* {  /* selecteur universel */
    
    margin: 0; /* marge */
    padding: 0; /* marge intérieure */
    list-style-type: none; /* style de base  */
    box-sizing: border-box; /* intègre la bordure à la taille du contenant*/
       
}

body{ 
       
  background-color: white;  /* couleur du fond */
  font-family: 'Shadows Into Light', cursive;/* ça s'affiche partout */
  color: #476b6b;
}


#container { 
    width: 80%;
   /* border: 4px solid grey;*/
    margin: auto;
}


header{
    
    margin-top: 20px;
    position: relative;

}


header h1 {
    
    margin-left: 0px;
    margin-top: 0px;
    /*border-bottom: 2px solid #334d4d;*/
    color: #334d4d;
    /*font-family:  'Abel', sans-serif;*/
    Font-family:  'Abel', sans-serif;
    font-size: 35px;
    font-weight: 50; /*police grasse*/
   /* border:  4px solid grey;*/
    text-align: center;
    
}


#container header nav{
    
    width: 100%;
    margin: 40px 0;  /* marge en haut et en bas , 0 pour gauche et droite */
   /* border: 1px solid #334d4d; /* c'est pour mettre une bordure*/
    
}



#container header nav ul { /* pour enlever le formatage de base*/
    
    list-style-type: none; /* enlever les puces devant chaque élements*/
    text-align: center; /* aligner mon texte vers la droite*/
    text-decoration: none; /* enlever le soulignement par défaut*/
    
    
}


#container header nav ul li {
    
    display: inline;
    margin-right: 40px;
    padding: 0 8px; /* espacement des éléments de la liste*/
    
}


#container header nav ul li a {
    
    
    font-family:  'Abel', sans-serif;
    font-size: 21px;
    font-weight: 500;
    color: #315c4d;
    text-decoration: none;    
    
    
}


#container header nav ul li a:hover {
    
    text-decoration:underline 3px solid #324e4e;
    background-color: #d0e1e1;
    
    
    }



.boite {  /* taille de chaque boite */

width: 30%;
/*border: 4px solid grey;*/
float: left;
margin-right: 2px;
margin-left: 200px;
margin-bottom: 10px;
color: #e6fff3;

}

.boite2 { 

width: 45%;
float: left;
margin-left: 35px;
    

}

.boite2 img {  /* taille de toutes les images */
    
    width: 130%;
    height: auto;
    
    
    }

#container .boite2 figure figcaption { 
    
   font-family: 'calibri light', serif;
   /*border: 2px solid black;*/
    margin-top: 5px; 
    margin-bottom: 20px;
    


}    
    
    
#container .boite2 p {  /* police et hauteur du paragraphe */

font-family: 'Rubik', sans-serif;
font-size: 15px;
line-height:1.5; /* hauteur des lignes entre le texte */
padding-bottom: 3px; /* faire descendre le texte */
margin-left : 160px;
color: #476b6b;
/* border: 1px solid #334d4d; /* c'est pour mettre une bordure*/
text-align: left;

}


.gras {
    font-family: 'Rubik', arial, sans-serif;
   font-weight: 600;
    
    
    
}



.boite2 h6{ 
    
    color: #476b6b;
    font-family: 'calibri light', serif;
    padding: 10px 0;
    margin-left: 160px;
}


.boite2 h3{ 
    
    text-align: left;
    font-size: 20px;
    color: #c2b595;
    font-family: 'Space Mono', monospace;
    padding: 2px 0;
    margin-left: 160px;
   
}


.clear {
    
    clear: both;
    
}


#container footer nav{
    
    width: 100%;
    margin: 40px 0;  /* marge en haut et en bas , 0 pour gauche et droite */
    /*border: 1px solid #334d4d;*/ /* c'est pour mettre une bordure*/
    
}



#container footer nav ul { /* pour enlever le formatage de base*/
    
    list-style-type: none; /* enlever les puces devant chaque élements*/
    text-align: center; /* aligner mon texte vers la droite*/
    text-decoration: none; /* enlever le soulignement par défaut*/
    
    
}


#container footer nav ul li {
    
    display: inline;
    margin-right: 20px;
    padding: 0 5px; /* espacement des éléments de la liste*/
    
}



#container footer nav ul li a {
    
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #293d3d;
    text-decoration: none;
    padding: 0 5px;

 }

#container footer nav ul li a img {
 
 width: 2%;
 padding: 0 5px;
    
 }

#container footer nav ul li a:hover {
    
    text-decoration:underline 3px solid #324e4e;
    background-color: #d0e1e1;
    
    
    }

#container footer nav ul li a img:hover {
    
    text-decoration:underline 3px solid #324e4e;
    background-color: #d0e1e1;
    
    
    }