body {
 margin:0;
 font-size:1em;
 font-family: georgia, Arial; 
 display: flex;
 flex-direction: column;
 background-color:#DDDDDD
}

.header{
 display: flex;
 flex-direction: row; 
 justify-content: space-around;
 align-items: center;
 text-align: center;
 vertical-align: middle;  
 background-color: #B1AAE7;
}

#date, #heure {
    margin:  auto;
    text-align: center;
    font-size : 1.5em;    
}

.separation {
	padding-top:3em;
    padding-bottom: 3em;
}

.body-content{
 background-color: #DDDDDD;  
}

.body-content p { 
 padding-left:5em;
 padding-right: 5em;
}

.body-content ul { 
 padding-left:10em;
 padding-right: 5em;
}

.attention {
	color: red;
	font-weight: bold;
}

h2, h3 {
	text-align: center;	
	margin-top: 3em;
	margin-bottom: 3em
}

.footer{
 height: 175px;
 background-color: #000;
}

.conteneur {
 display: flex;
 flex-direction: row; 
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
 text-align: center;
 vertical-align: middle;  
}

.topnav {
  background-color: #333;  
}

.topnav::after {
    clear: both;
    content: "";
    display: block;
}

.topnav a {
  float: left;
  display: block;
  color: #F2F2F2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;  
}

.active {
  background-color: #4D4D4D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
	overflow: auto;
}

.dropdown .dropbtn {
    font-size: 17px;   
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: #332B6F;
    font-family: inherit;
    margin: 0;    
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ADD8E6;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Page content */
.content {
  padding-left:1em
}

/* La classe sticky est ajoutée à la barre de navigation avec JS lorsqu’elle atteint sa position de défilement */
.sticky,.topnav.responsive.sticky {

  position: fixed;
  top: 0;
  width: 100%;
}

/* Ajoutez un peu de remplissage supérieur au contenu de la page pour éviter tout mouvement rapide et soudain (car la barre de navigation obtient une nouvelle position en haut de la page (position :fixed et top :0) */
.sticky + .content {
  padding-top: 60px;
}

img {
  max-width: 100%;
  display: block;
}

iframe {
  max-width: 100%;
  display: block;
}

@media screen and (max-width: 1100px) {

	.header {
	 flex-direction: column; 
   }
   
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .body-content p { 
	 padding-left:1em;
	 padding-right: 1em;
	} 

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
    
}