@font-face {
    font-family: 'comfortaaregular';
    src: url('font/comfortaa/comfortaa-variablefont_wght-webfont.woff2') format('woff2'),
         url('font/comfortaa/comfortaa-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratAlt1-Regular';
    src: url('font/MontserratAlt1-Regular/MontserratAlt1-Regular.woff2') format('woff2'),
         url('font/MontserratAlt1-Regular/MontserratAlt1-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
    background-color: #cfd3d4;
}

body{
    width: 80%;
    margin: auto;
    margin-top: 0%;
    background-color: #1da0ba;
    font-family: 'comfortaaregular';
    color: #ECE7E9;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 20px 70px 20px auto 20px auto 20px auto;
}


/***********************************************************************head*******************/
/*****************************titre*******************/
header h1 {
    font-family: 'MontserratAlt1-Regular';
    color: #1e4eb1;
    grid-column: 2;
    grid-row: 2;
    margin-right: auto;
    font-size: 50px;  
}
header h1 span {
    font-family: 'MontserratAlt1-Regular';
    color: #ECE7E9;
    grid-column: 2;
    grid-row: 2;
}

.logo a{
  text-decoration: #1da0ba;
}


/*****************************nav*******************/
header nav {
    grid-column: 2;
    grid-row: 4 ;
    background-color: #18879d;
    display: inline-block;
    border: 100% solid ;
    border-radius: 10px;
    position: absolute;
    right: 15%;
}
header nav a{
    color: #ECE7E9;
    font-family: 'comfortaaregular';
    text-decoration-line : underline;
    text-decoration-style : solid;
    text-decoration-color: #18879d;
}
    header nav ul li{
        display: inline-block;
        margin-right: 20px;
        margin-left: 0px;
}

/*****passage de la souris sur onglet nav*****/
a:hover {
  color: #88adf3;
}

/**********************************************************************main********************/
body main {
    grid-column: 2;
    grid-row: 6;
    background-color: #18879d;
    border: 100% solid ;
    border-radius: 10px;
}

/***********************************************************************index*******************/
.index{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3% 200px auto;
  grid-template-rows: 50px auto auto 50px;
}

.index h2{
  grid-column: 3;
  grid-row: 2 ;
  margin-bottom: 10px;
}

.index p{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 60px;
  margin-right: 3%;
}

.index img{
  grid-column: 2;
  grid-row: 2;
  width: 150px;
  height: 150px;
}

/*****************************liens*******************/
.cv{
  grid-column: 3;
  grid-row: 3 ;
}
.cv img{
  width: 50px;
  height: 50px;
}
.cv p{
  grid-column: 3;
  grid-row: 3 ;
  margin-left: 55px;
  margin-top: -20px;
  color: #ECE7E9;
}

.linkedin{
  grid-column: 3;
  grid-row: 3 ;
  margin-left: 140px;
}
.linkedin img{
  width: 50px;
  height: 50px;
}
.linkedin p{
  grid-column: 3;
  grid-row: 3 ;
  margin-left: 55px;
  margin-top: -20px;
  color: #ECE7E9;
  text-decoration-color: #031f3a;
}
/***********************************************************************footer*******************/
footer {
    grid-column: 2;
    grid-row: 8 ;
    margin-left: auto;
    margin-right: auto;
}
    footer header p {
        color: #ECE7E9;
        font-family: 'comfortaaregular';
    }
    footer header p a{
        color: #ECE7E9;
        font-family: 'comfortaaregular';
    }

/***********************************************************************contact*******************/
input[type=text], textarea, input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
}
label{
  margin-right: 0px;
  margin-left: 20px;
  width: 100%;
}

input[type=submit] {
  background-color: #1255a2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #1e4eb1;
}

.contact {
  box-sizing : border-box;
  border-radius:5px;
  padding:20px;
  width: 90%;
  margin-left: 5%;
}

/***********************************************************************projets*******************/
/*****************************project1*******************/
.projets{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3% 200px auto;
  grid-template-rows: 50px auto  auto auto auto auto 50px;
}

.projet1-h2{
  grid-column: 3;
  grid-row: 2 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.projet1-p{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  border: 100% solid;
}

.projet1-img{
  grid-column: 2;
  grid-row: 2;
  width: 200px;
  height: auto;
}

/*****************************project2*******************/
.projets-2{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3% 200px auto;
  grid-template-rows: 50px auto  auto auto auto auto 50px;
}

.projet2-h2{
  grid-column: 3;
  grid-row: 2 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.projet2-p{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  border: 100% solid;
}
.projet2-p2{
  grid-column: 3;
  grid-row: 3 ;
  margin-top: -20px;
  margin-right: 3%;
  margin-left: 20px;
  border: 100% solid;
}

.projet2-img{
  grid-column: 2;
  grid-row: 2;
  width: 200px;
  height: auto;
}
/***********************************************************************project-parcus*******************/
.parcus-1 {
  margin-left: 3%;
  margin-right: 3%;
}
.parcus {
  margin-left: 3%;
  margin-right: 3%;
}
.parcus-intro ul li ul{
  margin-bottom: 10px;
}

.parcus-1-3-img {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}
.parcus-1-3-img{
  width: 70%;
  border-radius: 10px;
}
.parcus-1-img{
  width: 20%;
  border-radius: 10px;
  margin-right: 3%;
}
.parcus-1-2-img{
  width: 40%;
  border-radius: 10px;
}

.parcus-2 {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}
.parcus-2-img{
  width: 70%;
  border-radius: 10px;
}

.parcus-3 {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}

.parcus-3-img{
  width: 40%;
  border-radius: 10px;
  margin-right: 3%;
}
.parcus-3-2-img{
  width: 40%;
  border-radius: 10px;
}

.parcus-4 {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}

.parcus-4-img{
  width: 30%;
  border-radius: 10px;
  margin-right: 3%;
}
.parcus-4-2-img{
  width: 40%;
  border-radius: 10px;
}

.parcus-5 {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}

.parcus-5-img{
  width: 40%;
  border-radius: 10px;
  margin-right: 3%;
}
.parcus-5-2-img{
  width: 40%;
  border-radius: 10px;
}

.parcus-6 {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}

.parcus-6-img{
  width: 40%;
  border-radius: 10px;
  margin-right: 3%;
}
.parcus-6-2-img{
  width: 40%;
  border-radius: 10px;
}

.parcus-7 {
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
}

.parcus-7-img{
  width: 40%;
  border-radius: 10px;
  margin-right: 3%;
}
.parcus-7-2-img{
  width: 40%;
  border-radius: 10px;
}
























/***********************************************************************experiences*******************/
.experience{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3% 200px auto;
  grid-template-rows: 50px auto auto auto auto auto auto auto 50px;
}

/*****************************clinique*******************/
.clinique-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 40px;
  background-color: white;
}

.clinique-h2{
  grid-column: 3;
  grid-row: 2 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.clinique-p{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
.clinique-date{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

/*****************************rcr*******************/
.rcr-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 3;
  margin-bottom: 40px;
}

.rcr-h2{
  grid-column: 3;
  grid-row: 3 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.rcr-p{
  grid-column: 3;
  grid-row: 3 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

.rcr-date{
  grid-column: 3;
  grid-row: 3 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
/*****************************quick*******************/
.quick-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 4;
  margin-bottom: 40px;
}

.quick-h2{
  grid-column: 3;
  grid-row: 4 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.quick-p{
  grid-column: 3;
  grid-row: 4 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

.quick-date{
  grid-column: 3;
  grid-row: 4 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
/*****************************hp*******************/
.hp-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 5;
  margin-bottom: 40px;
}

.hp-h2{
  grid-column: 3;
  grid-row: 5 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.hp-p{
  grid-column: 3;
  grid-row: 5 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

.hp-date{
  grid-column: 3;
  grid-row: 5 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
/*****************************saissonnier*******************/
.saisonnier-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 6;
  margin-bottom: 40px;
}

.saisonnier-h2{
  grid-column: 3;
  grid-row: 6 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.saisonnier-p{
  grid-column: 3;
  grid-row: 6 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
.saisonnier-date{
  grid-column: 3;
  grid-row: 6 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
/*****************************interim*******************/
.interim-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 7;
  margin-bottom: 40px;
}

.interim-h2{
  grid-column: 3;
  grid-row: 7 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.interim-p{
  grid-column: 3;
  grid-row: 7 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

.interim-date{
  grid-column: 3;
  grid-row: 7 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

/*****************************sca*******************/
.sca-img{
  width: 200px;
  height: auto;
  grid-column: 2;
  grid-row: 8;
  margin-bottom: 40px;
}

.sca-h2{
  grid-column: 3;
  grid-row: 8 ;
  margin-bottom: 10px;
  margin-left: 20px;

}

.sca-p{
  grid-column: 3;
  grid-row: 8 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
.sca-date{
  grid-column: 3;
  grid-row: 8 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
/***********************************************************************mentions*******************/
.mentions{
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 50px;
  margin-bottom: 50px;
}

/***********************************************************************diplomes*******************/
.diplomes{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3% 3% auto;
  grid-template-rows: 50px auto auto auto 50px;
}

/*****************************Brevet*******************/
.brevet-h2{
  grid-column: 3;
  grid-row: 2 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.brevet-p{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}
.brevet-date{
  grid-column: 3;
  grid-row: 2 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

/*****************************bac*******************/
.bac-h2{
  grid-column: 3;
  grid-row: 3 ;
  margin-bottom: 10px;
  margin-left: 20px;
  line-height: 30px;
}

.bac-p{
  grid-column: 3;
  grid-row: 3 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

.bac-p a{
  color: #ECE7E9;
  font-family: 'comfortaaregular';
  text-decoration-line : underline;
  text-decoration-style : solid;
}

a:hover {
  color: #88adf3;
  text-decoration-color: #88adf3;
}

.bac-date{
  grid-column: 3;
  grid-row: 3 ;
  margin-top: 70px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

/*****************************bts*******************/
.bts-h2{
  grid-column: 3;
  grid-row: 4 ;
  margin-bottom: 10px;
  margin-left: 20px;
}

.bts-p{
  grid-column: 3;
  grid-row: 4 ;
  margin-top: 90px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

.bts-p a{
  color: #ECE7E9;
  font-family: 'comfortaaregular';
  text-decoration-line : underline;
  text-decoration-style : solid;
}

.bts-date{
  grid-column: 3;
  grid-row: 4 ;
  margin-top: 60px;
  margin-right: 3%;
  margin-left: 20px;
  margin-bottom: 40px;
}

/***********************************************************************burger*******************/
.hamburger{
  display: none;
  cursor: pointer;
}
.bar{
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #ECE7E9;
}













































/*********************************************************************responsive********************/
@media screen and (max-width: 480px) {

  body{
      width: 100%;
      margin: auto;
      margin-top: 0%;
      background-color: #1da0ba;
      font-family: 'comfortaaregular';
      color: #ECE7E9;
      display: block;
  }

a:hover {
  color: #88adf3;
  text-decoration-color: #88adf3;
}
/****************************burger********************/
.hamburger{
  display: block;
  position: absolute;
  top: -40px;
  right: -40px;
}
.hamburger.active .bar:nth-child(2){
  opacity: 0;
}
.hamburger.active .bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}
header nav ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: -150%;
  flex-direction: column;
  background-color: #cfd3d4;

  width: 100%;
  text-align: center;
  transition: 0.3s;
}
header nav ul li{
  margin: 16px 0;
  display:flex;
  color: #031f3a;

}
header nav ul.active{
  left: 0;
}
header nav ul li a{
  color: #031f3a;
}
/***********************************************************************index*******************/
.index{
  display: block;
}

.index h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.index p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.index img{
  margin-left: 3%;
  margin-top: 4%;
}

/*****************************liens*******************/

.cv p{
  margin-left: 65px;
  margin-top: -20px;
}

.linkedin{
  margin-left: 10px;
}
.linkedin p{
  margin-left: 65px;
  margin-top: -20px;
}

/***********************************************************************experience*******************/
.experience{
  display: block;
}

/*****************************clinique*******************/
.clinique-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.clinique-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.clinique-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.clinique-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}

/*****************************rcr*******************/
.rcr-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.rcr-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.rcr-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.rcr-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}
/*****************************quick*******************/
.quick-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.quick-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.quick-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.quick-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}
/*****************************hp*******************/
.hp-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.hp-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.hp-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.hp-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}
/*****************************saissonnier*******************/
.saisonnier-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.saisonnier-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.saisonnier-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.saisonnier-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}
/*****************************interim*******************/
.interim-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.interim-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.interim-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.interim-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}

/*****************************sca*******************/
.sca-img{
  width: 200px;
  height: auto;
  margin-bottom: 0px;
  margin-left: 3%;
  margin-top: 4%;
}

.sca-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.sca-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}
.sca-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}

/***********************************************************************projets*******************/
.projets{
  display: block;
}

/*****************************project1*******************/
.projet1-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.projet1-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.projet1-img{
  margin-left: 3%;
  margin-top: 4%;
}

/*****************************project2*******************/
.projets-2{
  display: block;
}
.projet2-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.projet2-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.projet2-p2{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.projet2-img{
  margin-left: 3%;
  margin-top: 4%;
}
.parcus-pdf embed{
  width: 100%;
}

/***********************************************************************footer*******************/
footer {
  margin: auto;
  
}
/***********************************************************************diplomes*******************/
.diplomes{
  display: block;
}

/*****************************brevet*******************/
.brevet-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.brevet-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.brevet-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}

/*****************************bac*******************/
.bac-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.bac-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.bac-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}

/*****************************bts*******************/
.bts-h2{
  margin-bottom: 20px;
  margin-left: 3%;
}

.bts-p{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
}

.bts-date{
  margin-top: 0px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
}

}