/* css hamburger menu toggle close click anywhere
Click Outside to Close Hamburger Menu
~ suit l'action à faire

Lorsqu'on clique ou touche un élément <label> et que celui-ci est associé à un contrôle d'un formulaire, l'évènement click est également déclenché pour le contrôle.

The css input:checked+div selects the div immediately next to/after the input
The label for said checkbox (or hey leave out the label and just have the checkbox)
display:none hides stuff

*/

/* bouton qui devient une croix*/
/* #menu__toggle {opacity: 0;} */
 #menu__toggle {
	 position: fixed;
	 background: rgba(255, 255, 255, 0);
				z-index:255;
				}
 
#menu__toggle:checked ~ .menu__btn > div {
  transform: rotate(45deg);}
#menu__toggle:checked ~ .menu__btn > div::before {
  top: 0;  transform: rotate(0);}
#menu__toggle:checked ~ .menu__btn > div::after {
  top: 0;  transform: rotate(-90deg);}





/* cacher lse cases checkbox */
input[type="checkbox"] {visibility: hidden;}


label {
    display: flex;
	fiex-direction:row;
	/*visibility:visible;*/

}


#button_2:not(:checked) + label {
    display: flex;
	opacity: 1;

	position:fixed;
	left:0;
	top:15%;
	width: 60%;
    height: 85%;
	/* permet de visualiser le calque*/
	/*visibility:visible;
 	background:orange;*/
	#border:3px solid violet;
}

#button_3:not(:checked) + label {
    display: flex;
	opacity: 1;

	position:fixed;
	left:12.5%;
	top:0%;
	width: 47.5%;
    height: 16%;
		/* permet de visualiser le calque*/
	/*visibility:visible;
 	background:violet;*/
	#border:3px solid violet;
}

/* petit carré transparent à gauche du logo */
#button_4:not(:checked) + label {
    display: flex;
	opacity: 1;

	position:fixed;
	left:0%;
	top:0%;
	width: 4%;
    height: 15.5%;
		/* permet de visualiser le calque*/
	/*visibility:visible;
 	background:violet;*/
	#border:3px solid grey;
}



/*.menu__box a:active {visibility:hidden;}*/
#menu__toggle:checked ~ .menu__box {visibility: visible;} <!-- on clique sur le bouton menu --> 
#button_2:checked ~ label .menu__box {visibility:hidden;} <!-- on clique sur le calque de gauche --> 
/*#button_2:not(:checked) ~ .menu__box {visibility:hidden;}*/


#button_2:checked ~ label .menu__btn > div {
  transform: rotate(0deg);
  }
#button_2:checked ~ label .menu__btn > div::before {
  top: 0;  transform: rotate(0);}
#button_2:checked ~ label .menu__btn > div::after {
  top: 0;  transform: rotate(0deg);}

#button_2:checked ~ label .menu__btn > div::before {
  content: '';  top: -14px;}
#button_2:checked ~ label .menu__btn > div::after {
  content: '';  top: 14px;}


#button_2:checked + label {
    display: flex;
	/*visibility:visible;
	background:green;*/

	position:fixed;
   width: 50%;
    height: 85%;
  opacity:1;
  top: 15%;
  left: 0%;
  margin: 0;
  padding: 0;
 #background-color:green;
}



.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 7%;
  right: 20px;
  width: 40px; /* largeur du bouton du menu */
  height: 36px;
  cursor: pointer;
  #opacity:1;
  z-index: 253;
  #border:3px solid black;
  #background: rgba(03, 121, 211, 0); /* hack pour avoir le texte qui ne soit pas transparent */
  background:rgba(255,255,255,1); /* fond blanc sous le bouton du menu */
  border-radius: 4px;
  }





.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {
  display: block; /* ça ouvre le menu*/
  position: absolute;
  width: 100%;
  height: 3px;  /* epaisseur du trait de 1px à 12px*/ 
  background-color: #187bcd; 
  transition-duration: .25s;
  #border:1px solid yellow;
  }
.menu__btn > div::before {
  content: '';  top: -13px;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {
  content: '';  top: 13px;} /* espacement barre bas du bouton menu */


.menu__box {/* le DIV menu qui apparait apres appui sur le bouton Hamburger*/
  display: flex;
  flex-direction:column;
  align-items:stretch;
  #justify-content:flex-end;
  position: fixed;
  visibility: hidden;
  #opacity: 0.8;
  #background-color: #0079D3;
  background: rgba(03, 121, 211, 0.8); /* hack pour avoir le texte qui ne soit pas transparent */
  top: 0;
  right: 0%;
  width: auto;
  height: 100%;
  margin: 0;
  #padding: 10% 0 10% 0; /* decaler la 1ere rubrique du menu */
  padding: 20% 1%;
  #list-style: none;
  
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  
	z-index: 250;
  #border-radius: 16px;
  #box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
#transition-duration: .25s;
  border-left: 2px solid #0092FF;
  border-right: 2px solid #0092FF;
  #border-top: 2px solid #0092FF;
  #border-bottom: 2px solid #0063AD;
}

/* chaque ligne-rubrique du menu est un menu item*/
.menu__item { 
  display: block;
  #align-items: center;
  margin : 2% 0%;
  #color: #C2DEFF;
  color: #E6F1FF;
  font-family: sans-serif;
  font-size: 160%;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  text-align: end;
  #transition-duration: .25s;
  #border:3px solid yellow;
  }
  
  
/* .menu__item:hover {background-color: #F7F7F7;}*/



/* Responsive adjustments ************************************************************************/
/************************************************************************************************/
@media (max-width:768px) {

    .menu__item {font-size: 100%;}
	
.menu__btn {top: 7%;} /*mettre le boutton hamburger bien centré verticalement en mode responsive */

.menu__box {/* le DIV menu qui apparait apres appui sur le bouton Hamburger*/
  padding: 30% 2%; /* decaler les rubriques du menu */
  #background: rgba(03, 121, 211, 0.8); /* hack pour avoir le texte qui ne soit pas transparent */
}

#button_3:not(:checked) + label {
 	left:24%;
}
#button_4:not(:checked) + label {
	width: 6%;
}
.menu__item {
  #font-family: sans-serif;
  font-size: 180%;
  #font-weight: 500;
  #border:3px solid yellow;
  }
	
}

/*******************************************************************************************************
ANCIENS PORTABLES
********************************************************************************************************/
@media (max-width:375px) {
/* Styles pour cette Media Queries */

.menu__box {/* le DIV menu qui apparait apres appui sur le bouton Hamburger*/
  padding: 40% 2%; /* decaler les rubriques du menu */
}

}