/* style du menu responsive */

	label {
	margin: 0px 0px 0px 0px;
	font-size: 18px;
	line-height: 65px;
	display: none;
	width: 220px;
	float: right;
  color: white;
	}

	#toggle {
	display: none;
	}

	/*---------------------------------------------Media Query-----------------------------------------*/

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

		  
	/* lorsque la largeur de l'écran est inférieure à 500px, l'étiquette s'affiche et le curseur se transforme en pointeur */

	label {
	display: block;
	cursor: pointer;
	}
		  
	/* le menu contenant les liens aura le texte aligné au centre, il prendra toute la largeur de la page et sera caché si l'étiquette n'est pas pressée */

	.menu {
	text-align: center;
	width: 100%;
	display: none;
	clear: both;
	}
		  
	/* les liens à l'intérieur du menu seront affichés en bloc, de sorte qu'ils occuperont toute la largeur de la page et qu'ils auront une marge inférieure. */
		  
	.menu a {
	clear: right;
	display: block;
	border-bottom: 1px solid lightgray/* #00b3b3 */;
	margin: 0;
	}
		  
	#toggle:checked + .menu {
	display: block;
	}  
		  
}

/*  ********************** intermédiaire **********************  */

body {
		 margin: 1;
		 padding: 1;
		 font: 18px Arial;
		 font-weight: bold;
		 background: pink;
		 }

.menu {
		  top:1px;
		  height: 100%;
		  max-width: auto;
		  position: sticky;
		  list-style: none;
		  padding: 1px;
		  margin: 1px;
		  background: #a81e59ff/* black  */ ;
			}

.menu li {
		  float:left;
		  width: 150px;
		  text-align: center;
		  background: #a81e59ff /* #a81e59ff */;
                  border-radius: 0.5em;      
                  list-style-type: none; /* pour enlever les marques */

			}

.menu li a:link, .menu li a:visited {
		  display: block;
		  color: marron /*#FFF*/;
		  background: lightpink /*#293245*/;
		  padding: 6px 10px;
		  border/*-right*/: 1px solid #FFF;
		  text-align: center;
		  text-decoration: none;
			}

.menu li a:hover {background-color: lightgray/* #a81e59ff #199BD2 */;}
.menu li a:active {background-color: #808080;}

.menu .sousmenu {
		  list-style-type: none;
		  display: none;
		  padding: 0;
		  margin: 0;
		  position: absolute;
			}

.menu .sousmenu li {
		  float: none;
		  margin: 0;
		  padding: 0;
		  border-top: 1px solid transparent;
		  border-right: 1px solid transparent;
			}

.menu .sousmenu li a:link, .menu li a:visited {
		  display: block;
		  color: #FFF;
		  text-decoration: none;
		  background-color: #a81e59ff /* #808080 */;
			}

.menu .sousmenu li a:hover {
	    background-color: gray  /* #191AA2 #199BD2   black */;
			}

.menu li:hover .sousmenu {
    	display: block;
			}



/* **************** fin style menu responsive **************** */


mark {
  background-color: lightgray ;
  color: white;
}

h3 {
  background-color: pink;
  color: maroon;
  text-align: center;
  border-radius: 20px;
}
*{
  font-family: Avenir, sans-serif;
  font-size: 1em;
  margin: 0.1px;
  padding: 0.1px;
  box-sizing: border-box;
  border-radius: 20px;
}
.conteneur-grid{
  padding: 20px 20px;
  display: grid;
  grid-template-columns: 1fr;
 /* border: 2px solid red; */
}
.conteneur-grid > div{
  padding: 5px 10px;
  background-color:  pink /* lightgray*/;
  border: 2px solid  #a81e59ff /* RGB(120,40,160) */;
  text-align:justify;
}

	.corps {
	background-color: #a81e59ff; /* l'arrière-plan de la fenêtre */
	}
      	#page_accueil {
	      max-width: 80%;
        background-color: pink;
        color: #333;
        font:
          1.2em / 1.5 Helvetica Neue,
          Helvetica,
          Arial,
          sans-serif;
        padding: 0;
        margin: 0;
      } 
      .container {
	      max-width: auto;
        padding: 20px;
	      text-align: center;
	
      }
      .container > * {
	      max-width: auto;
        padding: 10px;
        margin: 10px;
	     text-align: justify;
      }
	.monimage {
		  float:left; 
	    width: 40%;
	    max-height: auto;
	    border: 15px;
	    border: 20px;
	    margin: 20px;	
	    /* margin: margin="1em 1em 1em 1em"; */

	}
	.monimage_bandeau {
	    width: 95%;
	    max-height: auto;
	    border: 20px;
	    margin: 10px;	
	}
	
	.h1_bandeau{
            background-color:pink;
            color:maroon;
        }