/*   ----- Initialisation ----------    */

/*   tout d'abord, je vais chercher la ou les police(s) de caractère dans le bon dossier. Ici dossier "police" Si j'utilise une police Google Font, elle est simplement appelée dans le head du html et ce paragraphe est inutile voir https://www.w3schools.com/css/css3_fonts.asp */

@font-face {
font-family: 'OpenSans';
src: url('police/OpenSans-Regular.ttf');
font-display: swap;
}

* {
    margin: 0; /*   toutes les marges à zéro   */
    padding: 0; /*   ainsi que les paddings (marges intérieures aux boites   */
    font-family: 'OpenSans'; 
    color:#5D5D5D; /*   tous les textes en noir   */
    position:relative; /*   position relative pour tous les éléments afin de pouvoir travailler les positionnements   */
    border:none;
    text-decoration: none;
}


body {
    margin:0 auto; /*   les marges à zéro en haut et en bas puis auto pour droite gauche pour centrer le body dans l'écran   */
}

/*   --------------------------Eléments de ma page --------------------   */

/*   ----- Menu -----   */

nav {
    display:flex;
   justify-content: space-around;
   padding:15px 10px;
    text-align: center; 
    background-color: #F0E1C5;/*   et on lui donne une couleur de fond  */
    align-items: center;/*   alignement vertical en mode grid  */
}


/*   ici on style les liens du menu (noir et sans décorations - donc pas soulignés)  */
nav a{
    padding:10px;
}
nav a:hover, ul li:hover {
  color:#ffffff; /*   ----- Texte blanc ----------    */
  background-color: #074E78; 
}




/*   ----- Zone image avec titre -----   */
#haut {
    background-color: #5E9CC1; /*   ----- image de fond -----   */
    height:272px;/*   -----  hauteur de l'image moins le padding -----   */ 
    text-align: center;
    padding:50px;
}
#haut p, #haut h1 {
    color:white;
    width:80%;
    margin:0 auto 50px auto;/*   -----  marge haut à 0 puis droite et gauche auto donc centré et bas à 50px -----   */
}


h3 {
    margin-top:50px;
}

/*   ----- les éléments avec la class bouton ----------    */

.bouton {
    padding: 20px;    
    text-align: center;
    margin:20px auto;
    font-size: 24px;
    background-color: #F0E1C5;

}
.bouton {
    width:200px;
    border-radius: 12px; /*   ----- des coins arrondis pour que ce soit plus joli: ; ----------    */
    cursor: pointer;
    color:#5D5D5D;
}
.fdhtbas .bouton a {color:#222}
.attestation {
    margin:30px;
    padding-left:30px;
    border-left: 3px solid green;
    font-size: 150%;
}




/*   ----- bas de page -----  */

/*   ici on spécifie une largeur, une hauteur et une couleur de fond pour le footer  */
footer {
    width:100%;
    background-color: #5E9CC1;
}

/*   ici on centre le contenu du footer en utilisant la position absolue  */


.bleu, .bleu p {
  background: #5E9CC1;
    color:#fff;
}
.bleu h3 {
      color:#fff;
    text-transform: uppercase;
}
.bleu {
  background: #5E9CC1;
  padding: 20px;
}

ul li {
  margin: 5px;
  padding:10px;
  list-style: none;
}
ul li a:hover{
    color:#fff;
}