*{
  margin: 0px ;
  padding: 0px; : 

}

header{
   position: absolute;  
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100px;
    
}


.navPrincipal {
    position: absolute;  
    top:35px;
    left: 260px;
    width: 1000px;
    height: 30px; 
    background-color:white;
}


.Navigation{
  position: absolute;
  list-style: none;
  left: 135px;
  padding: 0px;
  margin: 0px;
}


.liPricipale{
 
   float: left;
   margin-top: 5px;
}


/*Dans notre cas cette identification concernera toutes les balise a */
.aPricipale{
 width: 100px;
 color: blue;
 /*Faire des blocs de mots; 
 1 mots par lignes
 display: block;*/
 text-decoration: none;
 color: black;
 font-size: 15px;
 text-align: center;
 padding: 10px;
 border-radius: 0px;
 font-weight: bold;
 /*Rendre l'ecriture moins opaques
 opacity: 0.5;*/
}


a:hover {
  background: rgba(0, 153, 255, 0.9);
  trasition:0.6s;
}



#overviewIcone{
  position: absolute;
  top: 5px;
  left: 0px;
  width: 6%;
}

#monOverview{
  position: absolute;
  top: 15px;
  left:90px;
  font-size: 25px;
}

#slogant{
  position: absolute;
  top: 45px;
  left:90px;
  font-style: italic;
}


#engagement1{
   position: absolute;
   top:105px;
   left:250px;
   width: 830px;
   height: 90px;
   background: rgba(76, 175, 200, 1);
   border: solid;
   border-width: 1.5px;
}

#engagementitre1{
  position: absolute;
  top: 0px;
  font-size: 20px;
  text-align: center;
  width: 100%;
  font-weight: bold;
  color: white;
}

#engagementexte1{
  position: absolute;
  top: 35px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: white;  
}


.PSectionS{
 position: absolute;
 font-size: 15px;
 width: 100%;
 
}


#secPictConfiance{
  position: absolute;
  top:270px;
  left: 160px; 
}

#pictogrammeConfiance{
  width: 50%;
  height: auto;
}


#secTechnologie{
  position: absolute;
  top:385px;
  left: 160px; 
}


#pictogrammeTehcno{
  width: 45%;
  height: auto;
}


#secSuivi{
  position: absolute;
  top:500px;
  left: 160px; 
}


#pictogrammeSuivi{
  width: 85%;
  height: auto;
}


#firstSection{
   position: absolute;
   top:210px;
   left: 250px;
   width: 830px;
   height: 2800px;
   border: solid;
   border-width: 1.5px;
}


#firstSection1_1{
  position: absolute;
   top:0px;
   left: 0px;
   width: 400px;
   height: 400px;
   background: rgba(76, 175, 200, 0.5);

}

#firstSection1_2{
  position: absolute;
   top:0px;
   left: 400px;
   width: 430px;
   height: 400px;
}

#ezgif{
  position: absolute;
  width: 100%;
  height: 100%;
}

 /*Quand on utilise l'attribu class pour identifier un 
  une balise on utilise le .*/
#avantage{
  position: absolute;  
   top:20px;
   left: 30px;  
   width: 830px;
   height: 560px;  
  /*background: rgba(76, 160, 80, 0.8);
  opacity:0.5; */
  background: rgba(76, 175, 200, 0.5);
}



#TitreAvantage{
  position: absolute;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  color: black;
}

#s1s1{
  position: absolute;
  top: 10px;
  left: 15px;  
}


.T1{
  font-size: 18px;
  left: 0px;
  text-align: left;
  font-weight: bold;
  color:rgba(0, 153, 255, 0.9);
  text-decoration: underline;
}


#s1s2{
  position: absolute;
  top: 510px;
  left: 15px;  
}


#s1s3{
  position: absolute;
  top: 640px;
  left: 15px;  
}

#s1s4{
  position: absolute;
  top: 820px;
  left: 15px;  
}

#s1s5{
  position: absolute;
  top: 970px;
  left: 15px;  
}

#s1s6{
  position: absolute;
  top: 1280px;
  left: 15px;  
}



#s1s7{
  position: absolute;
  top: 1415px;
  left: 15px;  
}



#s1s8{
  position: absolute;
  top: 1610px;
  left: 15px;  
}


#s1s9{
  position: absolute;
  top: 1770px;
  left: 15px;  
}

#s1s10{
  position: absolute;
  top: 1875px;
  left: 15px;  
}

#s1s11{
  position: absolute;
  top: 2070px;
  left: 15px;  
}

#s1s12{
  position: absolute;
  top: 2270px;
  left: 15px;  
}

#s1s13{
  position: absolute;
  top: 2360px;
  left: 15px;  
}


#s1s14{
  position: absolute;
  top: 2500px;
  left: 15px;  
}

#s1s15{
  position: absolute;
  top: 2560px;
  left: 15px;  
}


#s1s16{
  position: absolute;
  top: 2700px;
  left: 15px;  
}





.T3{
  font-size: 16px;
  left: 0px;
  text-align: left;
  font-weight: bold;
}


#containerDesc{
  position: absolute;  
   top: 5px;
   left: 5px;
   width: 100%;
   height: 50px;
}


#container2{
  position: absolute;  
  top:  60px;
  left: 1px;
  width: 394px;
  height: 95px;
  background-color: white;
  
}


#bloctexte1  {
   top: 40px;
}

#bloctexte2  {
   top: 125px;
}


#bloctexte3  {
   top: 210px;
}


#bloctexte4  {
   top: 300px;
}

#bloctexte5  {
   top: 360px;
}

#bloctexte6  {
   top: 390px;
}

#bloctexte7  {
   top: 540px;
}

#bloctexte8  {
   top: 670px;
}

#bloctexte9  {
   top: 730px;
}

#bloctexte10  {
   top: 850px;
}

#bloctexte11  {
   top: 1000px;
}

#bloctexte12  {
   top: 1050px;
}

#bloctexte13  {
   top: 1150px;
}

#bloctexte14  {
   top: 1210px;
}

#bloctexte15  {
   top: 1310px;
}

#bloctexte16  {
   top: 1360px;
}

#bloctexte17  {
   top: 1450px;
}

#bloctexte18  {
   top: 1500px;
}

#bloctexte19  {
   top: 1520px;
}

#bloctexte20  {
   top: 1540px;
}

#bloctexte21  {
   top: 1560px;
}

#bloctexte22  {
   top: 1580px;
}


#bloctexte23  {
   top: 1650px;
}

#bloctexte24  {
   top: 1700px;
}

#bloctexte25  {
   top: 1800px;
}

#bloctexte26  {
   top: 1840px;
}

#bloctexte27  {
   top: 1905px;
}

#bloctexte28  {
   top: 1990px;
}


#bloctexte29  {
   top: 2100px;
}


#bloctexte30  {
   top: 2150px;
}


#bloctexte31  {
   top: 2220px;
}


#bloctexte32  {
   top: 2300px;
}

#bloctexte33  {
   top: 2390px;
}
 
#bloctexte34  {
   top: 2530px;
}

#bloctexte35  {
   top: 2590px;
}

#bloctexte36  {
   top: 2650px;
}

#bloctexte37  {
   top: 2740px;
}


.bloctexte  {
  position: absolute;
  left: 5px;
  width: 820px;
}


#container3{
  position: absolute;  
  top:170px;
  left: 1px;
  width: 394px;
  height: 95px;
  background-color: white;
   
}

#container4{
  position: absolute;  
  top:280px;
  left: 1px;
  width: 394px;
  height: 95px;
  background-color: white;
  
}



#engagement{
   position: absolute;
   top:1250px;
   left:250px;
   width: 830px;
   height: 120px;
   background: rgba(76, 175, 200, 1);
   border: solid;
   border-width: 1.5px;
}

#engagementitre{
  position: absolute;
  top: 0px;
  left: 300px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: white;
}

#engagementexte{
  position: absolute;
  top: 35px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: white; 
}




body{
 
/*	background-image: url('grass.jpg');
	background-size: cover;
*/

}



#footer{
   position: absolute;  
   top:3050px;
   left: 0px;
   width: 100%;
   height: 150px;
   background: rgba(0, 153, 255, 0.9);
}


#sectfoot1{
 position: absolute;
 top:10px;
 left: 350px;
 width: 150px;
 height: 130px;
 border: solid;
 border-width: 1.5px;
 border-color: white; 
}

.afooter1{   
  font-size: 9px;
  color: white; 
}

.artfoot{ 
  font-size: 20px;
  color: white;
  font-weight: bold;
}
 

#sectfoot2{
 position: absolute;
 top:10px;
 left: 800px;
 width: 150px;
 height: 130px;
 border: solid;
 border-width: 1.5px;
 border-color: white; 
}


#sectfoot3{
 position: absolute;
 top:10px;
 left: 970px;
 width: 100px;
 height: 130px;
  
}


/*
#container{
  position: absolute;  
   top:100px;
   left: 300px;
   width: 900px;
   height: 700px;
  background-color: orange;
}

#container2{
  position: absolute;  
   top:0px;
   left: 0px;
   width: 450px;
   height: 700px;
  background-color: yellow;
}

#container3{
position: absolute;  
   top:0px;
   left: 450px;
   width: 450px;
   height: 700px;
  background-color: #FF00FF;
}*/