/* Police google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* ****************************** - Tout le site -  */
body{
  margin: 0px;
  padding: 0px;
  background-color: #FF8800;
  font-family: 'Roboto', sans-serif;
}


/* ****************************** - Entëte -  */

header{
  background-color: #4285F4;
  height: 70px;
  position: fixed;
  width:100%;
  z-index: 1;
  
}

header h1{ /* que le h1 du header */
  color: white;
  font-size: 30px;
  margin: 0 20px; /* mage de haut à 0 et 20px à gauche */
  line-height: 70px;
  
}

/* ****************************** - Menu -  */
#menu{
  background-color: #9E9E9E;
  position: fixed;
  height: 100%;
  width: 15%;
  top: 70px; /* pour afficher sous le bandeau myBook */
  z-index: -1;
}

#menu ul{ /* on modifie les UL uniquement pour l'id 'menu' */
  list-style: none; /* on enlève les puces */
}

#menu ul li{ /* on modifie les LI des UL de l'id 'menu' */
  padding: 8px;
}

#menu ul li a{ 
  text-decoration: none; /* on retire les soulignements des liens */
  color: black;
}

#menu ul li:nth-of-type(2n+1){ /* Que les éléments impairs de ul li du menu */
  background-color: white;
}

#menu ul li:nth-of-type(2n){ /* Que les éléments iairs de ul li du menu */
}

/* ****************************** - Post -  */

#post{
  padding: 80px;
}

#post figure img{
  display: block;
  width: 600px; 
}

#post figure img:hover{ /* Le hover est le survol de la souris sur l'image */
  transform: scale(1.1); /* on grossit l'image par 1.1 */
}

#post figure{
  margin: 0 auto 1em; /* defini 0 pour en haut, Gauche droite en auto et 1em pour séparer les figures */
  width: min-content;
  background-color: #efefef;
  padding: 1em; /* pour décoller un peu le texte des bords */
  border: 1px solid rgba(0,0,0,0.5);
}


#post span.Publiee{
  display:block;
  width:150px;
  height: 16px;
  padding-top:5px;
  padding-bottom: 5px;
  text-align: center;
  
  background-color: blue;
  color: white;
  
}

#post figcaption{
  text-align: justify;
  margin-top: 10px;
  margin-bottom: 10px;
}

#post figure span#impression span{ /* Dans post - figure - span 'id impression' - span */
  margin-left: 100px;
}

/* ****************************** - Contact -  */
#contact{
  margin-left: 80%;
  position: fixed;
  top: 70px;
  background-color: #9e9e9e;
  width:100%;  
  height:100%;
  font-size: 1.1em;
  z-index:-1;
}

#contact tr td{
  padding:20px;  
  color: blue;
  width: 400px;
}

#contact tr th a{
  color: white;
  text-decoration: none;
}

#contact tr td a{
  color: blue;
  text-decoration: none;
}

#contact tr th {
  background-color: green;
  font-size: 2em;
  text-align: left; 
}

#contact tr:nth-of-type(2n){ /* Que les éléments pairs */
  background-color: white;
}

/* Affiche (en ligne) sur les lignes pairs */
#contact tr:nth-of-type(2n) > td::after{ 
  content: " (en ligne)";
}

/* Affiche (déconnecté) sur les lignes impairs */
#contact tr:nth-of-type(2n+1) > td::after{ 
  content: " (déconnecté)";
}

/* ****************************** - Footer -  */

footer {
 text-align:center;
 color:white;
 height:100px;

  background-color: #4282F4;
  
 
}