#contenant{
 padding-bottom: 2em;
    display:flex;
  flex-direction:column;
}





.titreheader {

color:yellow;
font-weight:bold;
font-family:helvetica;
font-size:1.75em;
letter-spacing:0.25em;
text-align: right;
padding-right:0.5em;
text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8), 
             1px 0 0 rgba(0, 0, 0, 0.8),
             0 -1px 0 rgba(0, 0, 0, 0.8),
             0 1px 0 rgba(0, 0, 0, 0.8);

}

#menu {
  background-color: #7c7c7c;

  
}

.flexbody{
  flex:1; /*cet élément va occuper toute la place disponible sur l'axe vertial*/
  display:flex; /*les éléments contenus dans celui-ci s'afficheront en ligne*/
  flex-direction:row; /*valeur par défaut*/
}

#cote{
  background-color: #E9ECEF;
  font-size:1em;
  padding:5px;
  width: 20%;
}
#cote li {
margin-left:0.5em;
font-size:0.8em;
list-style: none;

}

#cote a:hover {
     color:#F2F2F2;
     background-color:gray;
}

#cote h1 {
  font-family:courrier new;
  font-size:1.25em;
  color:#3A4958;
  font-style: italic;
  text-align: center;
}


#content{
  background-color:#DDDDDD;
  flex:1.2; /*cet élément va occuper tout l'espace disponible sur l'axe horizontal*/
  font-size:1em;
  width: 80%;
  padding: 5px 10px 5px 10px;
  border: 1px  dashed #404040;
  background-color:white;


}

#content a:hover {
     color:#F2F2F2;
     background-color:gray;
}



#content h1 {
color:#84BAF8;
font-weight:bold;
font-family:helvetica;
font-size:1.95em;
letter-spacing:0.35em;
text-align: center;
padding-right:0.5em;
text-shadow: -1px 0 0 rgba(0, 0, 0, 0.9), 
             1px 0 0 rgba(0, 0, 0, 0.9),
             0 -1px 0 rgba(0, 0, 0, 0.9),
             0 1px 0 rgba(0, 0, 0, 0.9);

}

#content h6 {

 color:#0755A3; 
 font-family:arial;
 font-size:1em;
 font-weight: bold;
}


#content p a li {
  font-size:1.05em;
  text-align: justify;
  font-family: verdana;
}

#pied {
  background-color:#7c7c7c;
  font-size:1em;
  color:white;
  padding:5px;
  border:solid 1px black;
  text-align:center;  
}
#pied a {
color:white;    
}

#pied  a:hover{
color:#7388c7;  
background-color:white;
}

.fil_ariane {
font-family:verdana;
font-size:0.5em;
font-style : italic;
text-align:right;
color:#7c7c7c;  
}

.image_gauche{
    float:left;
    padding:0.5em;
}
.image_droite{
    float:right;
    padding:0.5em;
}

p, a , li{
    font-size: 12px;
    font-weight: normal;
    font-family: verdana;
    color: #000000;
    text-align: justify;
    line-height: 18px;
}

/*margin codepen*/
body{
  margin:0;
}

.en_tete_tableaux {
  font-family: arial ;
        font-size: 13px;
        color: #2E2E2E;
        background-color: #B9B7B8;
        font-weight:bold;


}
.lignes_tableaux_paires {
      font-family: arial ;
        font-size: 12px;
        color: #2E2E2E;
        background-color: #DBE8F1;
}

.lignes_tableaux_impaires {
     font-family: arial ;
        font-size: 12px;
        color: #2E2E2E;
        background-color: #FFF9D1;
}

.lettrine:first-letter{font-size:300%;float:left}


@media screen and (max-width: 760px)

{
    .flexbody{
     flex:1; /*cet élément va occuper toute la place disponible sur l'axe vertial*/
     display:flex; /*les éléments contenus dans celui-ci s'afficheront en ligne*/
     flex-direction:column; /*valeur par défaut*/

      }

    #content{
     clear: both;
     background-color:white;
     font-size:1em;
     padding: 0.5em 0.5em 0.5em 0.5em;
      border: 1px  dashed #404040;
      width: 95%;
      }

    #cote{
    clear: both;
    width: 97%;
    padding:5px;
    }
}










 
.overlay
{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0; 
  left: 0; 
  display: none; 
  z-index: 999;
  background: #c2c2c2;
}
  .overlay a
  {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    text-decoration:none;
  }
    .overlay_container img
    {
      background: #ffffff;
      padding: 10px;
      
      
    }
 
.overlay:target { display: table; }




.rouge {
  color: #800000;
  font-weight: bold;
}


.un {
  font-size:25px;
  color:#800000;
  margin-left: 5px;
}

.deux {
  font-size:20px;
  color:#0755A3;
  margin-left: 20px;
  padding-top: 10px;
 
}

.trois {
  font-size:18px;
   margin-left: 50px;
   color:darkgreen;
  }

.zero {
  font-family:Comic Sans MS;
  font-size:13px;
  padding-left:20px;
  padding-right:20px;
  margin-left:20px;
  margin-right:20px;
  background-color:#B5D8F7;
  border: 1px  solid #404040;
   
  }




h4 {
 font-family:Comic Sans MS;
 font-size:13px;
 padding-left:20px;
 padding-right:20px;
 margin-left:20px;
 margin-right:20px;
 background-color:#B5D8F7;
 border: 1px  solid #404040;
}

/* Base du menu */
nav {
  position: relative;
  font-family: Arial, sans-serif;
}

/* Le mot Menu visible */
nav > span {
  background: black;
  color: white;
  padding: 10px 15px;
  cursor: pointer;
  display: inline-block;
  font-size: 18px; /* taille par défaut */
}

/* Menu déroulant caché par défaut */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  background: #7c7c7c;
}

/* Afficher le menu au survol du mot Menu */
nav:hover > ul {
  display: block;
}

/* Styles des items */
nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  color: black;
  text-decoration: none;
  white-space: nowrap;
}

/* Sous-menu */
nav ul li ul {
  top: 0;
  left: 100%;
  display: none;
  position: absolute;
}

nav ul li:hover > ul {
  display: block;
 
}

/* Effet hover */
nav ul li a:hover {
  background: black;
  color:yellow;
}

.niveau_1 {
    background-color: lightgrey;
}

.niveau_2 {
    background-color: #cbdef1;
}

/* Mobile : texte plus gros et menu plein écran si besoin */
@media (max-width: 768px) {
  nav > span {
    font-size: 24px;
    padding: 15px 20px;
  }

  nav ul {
    position: static;
    display: none;
  }

  nav:hover > ul {
    display: block;
  }

  nav ul li ul {
    position: static;
  }

  nav ul li a {
    padding: 12px 20px;
    font-size: 20px;
  }
}