body {
 // background-color:white;font-family:"Lucida Grande",Geneva,Arial,Helvetica,sans-serif;
   	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 1.5;
 	text-align: justify;
	}

.cachette {color:white;  opacity: 0.0;
  width:0;
  height:0;
  overflow:hidden;

  position: absolute;
  left: -9999px;
  }

.aster {
color :red;
  font-size: 2.0em; }

/* barre de navigation */
nav{
	position: fixed;
       width: 90%;
    	top: 0; left:0; right:0;
    	padding-left:5%; padding-right:5%;
  	border-bottom-style: solid;
   	border-bottom-width: thick;
	border-bottom-color: #d55252;
   	background-color: white;
	}

/* footer */
footer {
	position: fixed;
	left: 0px;
	bottom:0px;
	width: 100%;
	height:auto;
	background-color: lightgray;
	border-top-style: solid;
	border-top-width: thick;
	border-top-color: #d55252;
	padding-left:5%;
	padding-right:5%;
	margin-top:15%;
	line-height: 1.6;
	z-index:500;
  	}


 /* contenu de la page */
#page{
	position : absolute;
	padding-top:80px;
	width:90%;
	left:5%;
	z-index:-100;
	}


body {margin:0;font-family:Arial}



/*
#divfooter2 {display:none;}
*/

/*   ****************** section pour menu de navigation ****************** */


/* FR/DE/EN */
.topnav span { 
	color:blue; background-color: #cbe9f3;
	}


/*  ***** Grands écrans ***   */

@media screen and (min-width: 720px) {

.topnav #lang {
	float:right;}
	}


/* *********** Ci-dessous nav responsive écran normal ********* */

.topnav {
	overflow: hidden;
	background-color:  white;
	}

.topnav a {   /* page accueil */
	float: left;
	display: block;
	color: #d55252;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 1.2em;
	}

.active {
  	background-color: #04AA00;
  	color: white;
	}

.topnav .icon {   /* icone "burger" */
  	display: none;
	}

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

.dropdown .dropbtn {  /* menus et boutons sous-menus */
  	font-size: 1.2em;
  	border: none;
  	outline: none;
  	color: #d55252;
  	padding: 14px 16px;
  	background-color: white;
  	font-family: inherit;
  	margin: 0;
	}

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

.dropdown-content a {  /* liens des sous-menus (=contenu des sous-menus) */
  	float: none;
  	color: black;
  	padding: 12px 16px;
  	text-decoration: none;
  	display: block;
  	text-align: left;
	}

.topnav a:hover, .dropdown:hover .dropbtn {
  	background-color: lightgrey;
  	color: #d55252;
	}

.dropdown-content a:hover {
 	 background-color: #f10f1f1;
  	color: #d55252;
	}

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



/* ****** petits écrans ******* */

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


/* pour font size différent dans la page responsive  */ 
#page {	
	font-size:0.8em;
	}  


/* le menu conventionnel est invisible (option first child a non utilisée) */
.topnav a:not(:first-child), .dropdown .dropbtn {	
    	display: none;   
  	}


/* l'icone burger est visible */
.topnav a.icon {
    	float: right;
    	display: block;  
  	}





/* le footer est invisible */
footer {display: none;}

/* le contenu du footer2 est visible dans la page */
#divfooter2 {
	
display: block;
	position: fixed;
	left: 0px;
	bottom:0px;
	width: 100%;
	height:auto;
	background-color: lightgray;
	border-top-style: solid;
	border-top-width: thick;
	border-top-color: #d55252;
	padding-left:5%;
	padding-right:5%;
	margin-top:15%;
	line-height: 1.6;
	z-index:500;
  	}
*/


}


/*  ***** quand la classe "responsive" est activée par click du burger ***** */


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



.topnav.responsive img {	/* bannière est invisible */
    	display: none;
  	}

.topnav.responsive {
	position: relative;
	}
  	
.topnav.responsive .icon {
    	position: absolute;
    	right: 0;
    	top: 0;
  	}

 .topnav.responsive a {
   	float: none;
    	display: block;
    	text-align: left;
     	/* font-size: 2.2em; */ /*pour taille responsive différente pour les menus */
  	}


.topnav.responsive .dropdown {
	float: none;
	}

.topnav.responsive .dropdown-content {
	position: relative;
	}

.topnav.responsive .dropdown .dropbtn {
    	display: block;
    	width: 100%;
    	text-align: left;
     	/* font-size: 2.2em; */	 /*event. pour taille responsive différente pour les sous-menus */
  	}

}