#lateral-volet {
  z-index: 9999;                  						/*pour étre au dessus des autres éléments*/
  position: fixed;                						/*ne suit pas le scroll de la page et sert de référent*/
  top: 0;                        						/*position en haut*/
  left: 0;                        						/*à gauche*/
  width: 12.5em;                    					/*valeur de largeur pour tout le contenu*/
  min-height: 100vh;              						/*occupe toute la hauteur du viewport*/
  bottom: 0;											/*en bordure basse de la page*/
  transform: translateX(-100%);   						/*on déplace à  gauche pour ne pas interférer avec le document*/
}

#lateral-volet-input {
  position: absolute;           						/*pour sortir l'élément du flux*/
  left: -999em;                 						/*position hors de la fenètre*/
}

#lateral-volet-label,
#lateral-volet-bloc {
  font-size: inherit;             						/*taille font du référent*/
  background:#002349;									/*il faut un fond opaque*/
  transition: all .5s;
}

#lateral-volet-bloc {
  z-index: 0;                  							/*mise au niveau zéro*/
  position: absolute;           						/*pour sortir l'élément du flux, il va bouger*/
  top: 0;                       						/*position en haut*/  
  left: 0;                      						/*alignement sur bord gauche du parent*/
  box-sizing: border-box;       						/*modèle de boite, plus simple à  gèrer*/
  width: 100%;                  						/*largeur 100% de son parent*/
  height: 100%;                 						/*100% hauteur 100% de son parent*/
  overflow: auto;              							/*rien ne doit déborder*/
}


#lateral-volet-label {
  z-index: 1;                  							/*on le met au dessus*/
  position: absolute;           						/*pour sortir l'élément du flux, il va bouger*/
  top: 0;                       						/*position de la flèche en haut*/
  left: 100%;                   						/*alignement sur le bord droit du parent*/
  width: 0;                   							/*dimensions respectables*/
  height: 0;
  cursor: pointer;
}

/* positionner la flèche dans le cadre */
#lateral-volet-label:before {
  	content:url('../img/hamburger.png');
  	position: absolute;
  	top: 20px;											/*position de la flèche au haut de la page*/
  	left: 10px;											/*position de la flèche au bort du menu*/
  	box-sizing: border-box;
  	width: 1em;											/*dimension de la flèche*/
  	height: 1em;										/*dimension de la flèche*/
  	color: #957C3D;										/*or*/
  	transition: all .5s;
	}	
	
#lateral-volet-label:hover:before {
  	color: #957C3D;										/*couleur de la flèche au passage de la sourie(or)*/
	}

#lateral-volet-input:checked ~ #lateral-volet-bloc {
  	transform: translateX(100%); 						/* translation vers la droite de 100% */ 
	}

#lateral-volet-input:checked ~ #lateral-volet-label {
  	left: 200%;											 /* décalage vers la droite, passe de 100% à  200% */
	}
	      
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------mobiles portrait--------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 479px) {

#lateral-volet {
width: 13.5em;
}
}

/*-----------------------------------------------------------------------------------------------*/
/*------------------------------------------mobiles paysage--------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 959px) {

}