.menu_overlay
{
/*Positionnement du fond*/
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;

  /*Couleur du fond*/
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 700ms cubic-bezier(0.77,0.2,0.05,1.0),visibility 0.5s;

  /*Fond Masqué lorsque menu inactif*/
  visibility: hidden;
  opacity: 0;

  /*Pas de marge intérieure*/
  padding:0px;

  /*Position verticale*/
  z-index: 14000;
}

.menu_overlay label
{
	/*Etendre label sur toute la surface disponible*/
	display: block;
	width: 100%;
	height: 100%;
}

.menu_content
{
	/*Positionnement du menu*/
	position: absolute;
	top:61px;
	left:0%;

	/*Dimensions du menu*/
	width: auto;
	min-width: 35%;
	height: 85vh;

	/*Positionnement vertical*/
	z-index: 15000;

	/*marges*/
	margin-bottom: 2px;
	margin:0px;
	padding: 0px;

	/*Sortie du menu du champs tant qu'il n'est pas cliqué*/
  	transform-origin: 0% 0%;
  	transform: translate(-100%, 0);
  	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

  	/*Disposition du contenu du menu*/
  	display: flex;
  	flex-direction: column;
  	flex-wrap: nowrap;
  	justify-content: flex-start;
  	align-items: stretch;

  	/*Fond du menu*/
  	background: white;

  	overflow-y: auto;
  	overscroll-behavior-y:contain;

    border-radius: 0 0 10px 0;
}

.menu_content_header
{
	align-self: flex-end;
	padding:3%;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.menu_content_body
{
	display: flex;
	flex-direction: column;
	flex-wrap: none;
	justify-content: center;
	align-items: flex-start;

	align-self: center;
	width: 90%;
	height: auto;

	padding: 0px;
	margin: 0px;

}

.menu_content_body ul
{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: auto;
	text-indent: 0;
	white-space: nowrap;
}

.menu_content_body span
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;

	width: 100%;
	height:7vh;
	font-size: 1em;


	border-bottom: 1px solid rgb(230,230,230); 
}

/*.menu_content_body >ul > li
{
	text-indent: 0;
	text-align: left;

	align-self: flex-start;

	border: 1px solid;
	width: 100%;
	height: 5.2vh;
}*/


/*Masquer les checkbox standard*/
input[name='burger_checkbox_panel']
  {
    display: none;
  }
 input[name='burger_radio_panel'] 
  {
    display: none;
  }

/*modification du curseur sur les labels*/
  .menu_block label
  {
  	cursor: pointer;
  }

/*Activation du menu lorsqu'il est actionné*/
input[name='burger_checkbox_panel']:checked ~ .menu_content
{
  transform: none;
}

input[name='burger_checkbox_panel']:checked ~ .menu_overlay
{
 visibility: visible;
  opacity: 1;
}


/*   * Accordion  */
/* Basic Accordion Styles */
.menu_accordion 
  {
    /*disposition du menu en accordéon */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items:stretch;

    /*largeur d'écran*/
    width: 100%;
  }

.menu_accordion label span
  {
    /*Textes des titres*/
    text-align: left;
    font-size: 1em;
    color: rgb(1,70,8);

    border-bottom: none;
  }

/*Masquer les checkbox standard*/
.menu_accordion input[name='menu_accordion_panel'] 
  {
    display: none;
  }

.menu_accordion label 
  {   
    /*Disposition des labels*/
    display: flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content: space-between;
    align-items: center;

    /* Dimensionnement des labels*/
    height: 7vh;
  
    /*bordure*/
    border-bottom: 1px solid rgb(230,230,230);

    /* changement du curseur sur les labels*/
    cursor: pointer;

    /*Effet de transition*/
    transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  }

/*creation d'un element après le label + valeur initiale*/
.menu_accordion label:after 
  {
    /*chevron orienté vers la gauche*/
    content: '\2039'; 
  
    /*dimensionnement de l'élément*/
    width: 1vw; 
    height: 1vw; 

  /*rotation vers le bas*/
    transform: rotate(-90deg);

    /*traitement de texte*/
    color: rgb(1,70,8);
    font-size: 0.8em;
    text-align: center;
    font-weight: bold;
    padding: 0px;
    vertical-align: middle;
    line-height: 0.8em;
  }

/* Action au passage sur les chevrons et les éléments de label*/
.menu_accordion label span:hover, .menu_accordion label:hover:after
  {
    color: rgb(0,129,80);
  }

/*Action sur les titres des labels lorsque coche activée*/
.menu_accordion input:checked + label span
  {
    color: rgb(0,129,80)!important;
  }

/*Action sur les labels lorsque coche activée*/
.menu_accordion input:checked + label
  {
    background: rgb(230,230,230);
  }

/*Changement de valeur de l'élément after laber*/
.menu_accordion input:checked + label:after
  {
    content: '\203A';/* chevron orienté vers la droite(rotation + haut déjà prise en compte)*/
  
    /* adjust line-height to vertically center icon */
    line-height: .8em;
  }

.menu_accordion .accordion__content 
  {
    /*masquer le contenu*/
    overflow: hidden;
    max-height: 0em;

    /*positionnement et ajustemnet du contenu*/
    position: relative;
    padding: 0 1.5em;
  
    /*Couleur du texte*/
    color: black;

    /*Effet de transition*/
    transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  }

/*Disposition du corps*/
.menu_accordion .accordion__content .accordion__body
  {
    font-size: 0.8em;
    line-height: 1.4em;
    padding: 0px;
  }

/* tilde permet d'appliquer une action sur n'importe quel élément content à condition que la checkbox soit active*/
  input[name='menu_accordion_panel']:checked ~ .accordion__content 
  {
    /* Get this as close to what height you expect */
    max-height: 20em;
  }