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;}
*/

/*  ***** mise en page des pages de contenu (accueil, comment faire…) ***** */

.contenu h1 {
	font-size: 2em;
	line-height: 1.25;
	margin: 1em 0 .6em;
	text-align: left;
	}

.contenu h2 {
	font-size: 1.35em;
	line-height: 1.35;
	margin: 1.6em 0 .8em;
	text-align: left;
	}

.contenu p {
	font-size: 1.05em;
	margin: 0 0 1em;
	}

.contenu .chapeau {			/* phrase d'accroche sous le titre */
	font-size: 1.3em;
	font-weight: bold;
	color: #b03e3e;
	margin-bottom: 1.2em;
	text-align: left;
	}

.contenu .illustration {
	border: 2px solid brown;
	float: left;
	margin: .3em 1.6em .8em 0;
	}

.contenu .encart {			/* note « à ce jour… » */
	clear: none;
	background-color: #fdf6e3;
	border-left: 6px solid #d55252;
	padding: 1em 1.2em;
	margin: 1.4em 0;
	}

.contenu .picto {
	width: 1.4em;
	vertical-align: -.25em;
	padding-right: .5em;
	}

.contenu .liste {			/* listes à puces */
	font-size: 1.05em;
	margin: 0 0 1.4em;
	padding-left: 1.3em;
	}

.contenu .liste li {
	margin-bottom: .7em;
	}

.contenu .etapes {			/* étapes numérotées */
	font-size: 1.05em;
	list-style: none;
	counter-reset: etape;
	margin: 0 0 1.6em;
	padding-left: 0;
	}

.contenu .etapes li {
	counter-increment: etape;
	position: relative;
	padding-left: 3em;
	margin-bottom: 1em;
	min-height: 2.1em;
	}

.contenu .etapes li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.1em;
	height: 2.1em;
	line-height: 2.1em;
	text-align: center;
	border-radius: 50%;
	background-color: #d55252;
	color: white;
	font-weight: bold;
	}

.contenu .appel form {
	margin: 0;
	}

.contenu .appel {			/* appel à l'action */
	clear: both;
	background-color: #f4f8fb;
	border: 1px solid #cbe9f3;
	border-radius: 10px;
	padding: 1.6em;
	margin: 2.4em 0 1.6em;
	text-align: center;
	}

.contenu .appel-texte {
	font-size: 1.35em;
	font-weight: bold;
	margin-bottom: .8em;
	text-align: center;
	}

.contenu .appel-note {
	font-size: .95em;
	color: #555;
	margin: .9em 0 0;
	text-align: center;
	}

.bouton {				/* bouton d'action */
	display: inline-block;
	background-color: #d55252;
	color: white;
	font-size: 1.25em;
	font-weight: bold;
	text-decoration: none;
	padding: .7em 1.8em;
	border: none;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
	font-family: inherit;
	cursor: pointer;
	}

.bouton:hover, .bouton:focus {
	background-color: #b03e3e;
	color: white;
	}

.bouton:active {
	box-shadow: none;
	transform: translateY(1px);
	}

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

.contenu .illustration {		/* l'image passe pleine largeur */
	float: none;
	width: 100%;
	margin: .5em 0 1em;
	}

.contenu h1 { font-size: 1.6em; }

.bouton { display: block; }
	}


/*   ****************** 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 */
  	}

}