:root{
  --primaryColor : #093348 ;  
  --darkcolor:#333;
  --lightcolor:white;
  --lightgrey:#f5f5f5;
  --secondarycolor:#5a8da7;
}



/***************************************************
Stucture
***************************************************/
body{
  background-color: #333 !important;
  text-align: center !important;
  color: var(--lightcolor);
  font-family: 'Roboto', sans-serif;
}
li{
  text-align: center;
  padding:0 25px;
  list-style: none;
  margin:0;
  
}
h1{
  padding-top: 60px;
  font-size: 60px !important;
}
h2{
  margin: auto;
  font-size: 36px !important;
}


/***************************************************
Reutilisables
***************************************************/
.gras{
  text-transform: uppercase;
}
/***************************************************
Header
***************************************************/

.main-head{
  color: var(--lightcolor);
  background-color:var(--primaryColor) ;
  text-decoration: none;
  list-style: none;
  line-height: 30px;
  padding: 20px 0 ;  
}

.main-head li a{
  list-style: none;
  text-decoration: none;
  color: var(--lightcolor);
  font-size: 12px;
}
.logo{
  width: 45px !important;
  height: 45px;
  padding: 0;
  margin-left: 120px;
  
}
.trait{
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  content: "";
  width: 300px;
  height: 1px;
  background-color: var(--secondarycolor);
}
/***************************************************
Partie 1
***************************************************/
.partie1{
  color:var(--lightcolor);  
}
.image1{
background-image: url(../image/partie1-image.webp);
}

.p1{
  font-size: 22px;
}
.p2{
  font-size: 15px;
  color: var(--secondarycolor);
  line-height: normal;
}
.txt-partie1{
  flex-direction: column;
  line-height: 60px;
}
.btn-partie1{
  text-decoration: none;
  color: var(--lightcolor);
  border: var(--lightcolor) 2px solid;
  margin-top:40px ;
  margin-bottom: 100px !important;
  font-size: 10px;
  border-radius: 20px;
  line-height: 25px;

}
.main.partie1 a{
  background-color: var(--secondarycolor);

}
/***************************************************
Partie 2
***************************************************/
.image{  
  width: 178px;  
  line-height:20px ; 
}
.partie2{
  background-color: var(--lightcolor);
  padding-top: 77px;
  font-size: 15px;  
}
.text3{
  padding-bottom: 77px;
}
div.image p{
  font-size: 15px;
}

/***************************************************
Partie 3
***************************************************/
 .partie3{
  padding-top: 60px;
  background-color:#3ead87 ;
  color: var(--lightcolor);
 }

 .partie3 p .partie4 p{
font-weight:300 ;
  font-size: 18px;
 }
 .photo-partie3{
  width: 170px;
 }
.trait2{
  border:#4ebe98 1px solid;
  width: 1px !important;
  height:186px ;
padding: 0 !important;
 content: "";
 margin: 30px 30px 0 30px !important;  
}
section.partie3 div.row div.row img{
  padding:50px 30px
}
.btn-partie1{
  text-decoration: none;
  color: var(--lightcolor);
  border: var(--lightcolor) 2px solid;
  margin-bottom: 70px;
  font-size: 15px;
  border-radius: 20px;
  line-height: 25px;
  height: 41px;
  padding-top: 7px;
  width: 280px !important;

}
/***************************************************
Partie 4
***************************************************/
.partie4{
  background-color: #223139;
  color:var(--lightcolor);
  padding-top: 60px;
}
.contact{  
  margin:43px auto;
  flex-direction: column;
  width: 500px !important;
  border-radius: 20px;  
}
.input{
  border-radius: 40px;
  height: 50px;
  margin-top:7px;
  text-align: center;
}
section.partie4 form textarea{
  height:140px;
  padding-top: 50px;
}
::placeholder{
  color:var(--secondarycolor);
  font-size: 15px;
}
textarea.input{
  resize: none;
}
.submit{
  background-color: #223139;
  border: var(--lightcolor) 2px solid;
  width: 300px;
  color: var(--lightcolor);
  margin:auto;
  margin-top: 8px;
  margin-bottom: 70px;
}
section.partie4 div.trait{
  
  background-color:#747d82;
}

/***************************************************
footer
***************************************************/
.main-footer{
  font-size: 16px;
  padding-top: 30px;
  background-color: #223139;
  color:var(--lightgrey);
}
.copyright{
  justify-content: end;
  font-size: 12px;
}
.minicercles{
  border:var(--lightcolor) 1px solid;
  width: 35px !important;
  height: 35px;
  border-radius: 20px;
  padding-top: 3px;
}
.trait3{
  margin: auto;
  margin-top: 20px;
  
  content: "";
  width: 300px;
  height: 1px;
  background-color: var(--secondarycolor);
}
/***************************************************
animation
***************************************************/
.main-head li:hover{
 
  border-radius: 5px;
  height: 30px;
  color: var(--secondarycolor);
  background-color: #1f4558;
}
.btn-partie1:hover{
  background-color: var(--lightcolor);
 
}
.btn-partie1:hover{
  transition: all 1s; 
  color: var(--primaryColor);  
}

section.partie2 a img:hover{
  transform: rotate(360deg);
  transition: all 1s;
}
.submit:hover{
  transition: all 1s;
  background-color: var(--lightcolor);
  color: var(--primaryColor);
}