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

*/

/* BARETTES DU BOUTON qui devient une croix*/
/* #menu__toggle {opacity: 0;} */
#menu__toggle {
	 #display: flex;
	 #fiex-direction:column;
	 position: fixed;
	 background: rgba(255, 255, 255, 1);
	 z-index:255;
}

/* changer le premier top:xx pour décaler verticalement */
#menu__toggle:checked ~ .menu__btn > div {
    transform: rotate(765deg);background-color:white;}
#menu__toggle:checked ~ .menu__btn > div::before {
  top: 0vh;  transform: rotate(0deg);background-color:white;}
#menu__toggle:checked ~ .menu__btn > div::after {
  top: 0vh;  transform: rotate(-90deg);background-color:white;}





/* cacher les cases checkbox */
input[type="checkbox"] {
	#visibility: hidden;
	display:none;
	opacity:0;
	}


label {	
/*visibility:visible;*/
}



/**************************************** 
grand calque permettant de fermer le menu 
****************************************/
#button_2:not(:checked) + label {
    display: flex;
	opacity: 1;
	#position:fixed;
	#left:0;
	#top:0;
	
align-items:flex-start;
justify-content:flex-start;
	
	width: 80vw;
    #height: 99%;
	height: 105vh;
	#z-index:900;
	/* permet de visualiser le calque*/
	/*visibility:visible;*/
 	/*background:transparent;*/
	#border:2px solid lime;
	#border:2px solid black;
	transform: translate(-2vw, -24vh);
}




/*.menu__box a:active {visibility:hidden;}*/

#menu__toggle:checked ~ .menu__box {visibility: visible;} <!-- on clique sur le bouton menu --> 
#button_2:checked ~ .menu__box {visibility: hidden;display:none;} <!-- on clique sur le calque de gauche --> 


/*#button_2:not(:checked) ~ .menu__box {visibility:hidden;}*/
/* #menu__toggle:not(checked) ~ #button2 {visibility: hidden;} <!-- on clique sur le calque -->*/

#button_2:checked ~ label .menu__btn > div {
  transform: rotate(0deg);}
#button_2:checked ~ label .menu__btn > div::before {
  top: 0;  transform: rotate(0deg);}
#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;}
  

/* div permettant de fermer le menu */
/* div button2 */  
#button_2:checked + label {
    #display: flex;
	/*visibility:visible;*/
	visibility:hidden;
	#position:fixed;
   width: 70vw;
   height: 100vh;
   #height: 120%;
  opacity:1;
  ##top: 15%;
  ##left: 0;
  margin: 0;
  padding: 0;
 #background-color:green;
 #border:3px solid red;
 transform: translate(-22vw, -24vh);
}



.menu__btn {
  display: flex;
  align-items: center;
  justify-content:center
  #position: fixed;
  #top: 7vh;
  #right: 3vw;
/* largeur du bouton du menu */
  width: 40px; 
  height: 36px;

  #width:6vw; 
  #height:7vh;

  #flex-grow: 0.25; /* width */
  #height: 7.5vh;

  cursor: pointer;
  #opacity:1;
  z-index: 1001;
  border-radius: 36px;
  #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 */
  background:transparent;
  #border-radius: 4px;

 #background:lightgreen;
 #border:3px solid violet;
}



.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {
  #display: block; /* ça ouvre le menu*/
  display: flex;
  position: absolute;
  #position: relative;
  width: 40px;
  height: 4px;  /* epaisseur du trait de 1px à 12px*/ 
  #width: 3.8vw;
  #height:0.7vh;
  background-color: #187bcd; 
  #transition-duration: .25s;
  #transition-duration: 5s;
  transition-duration: 1.0s;
  #border:0.1vw solid red;
  }
.menu__btn > div::before {content:' ';  top: -0.4vw;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {content:' '; top: 0.4vw;} /* 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:flex-end;
  align-items:center;
  #######justify-content:center;
  justify-content:flex-start;
  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 */
  #background: rgba(54, 142, 242, 0.9);
  transition-duration: 0.0s;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding:0 1%;
  z-index: 1000;  
  list-style-type: none;
  #list-style: none;
  
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
 

  #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;
  #border:3px solid violet;
}

/* chaque ligne-rubrique du menu est un menu item*/
.menu__item { 
  display: flex;
  #align-items: center;
  width:100%;
  margin : 5% 1% 5% 0;
  #padding : 5% 1% 5% 0;
  padding :0;
  #text-align:start;
  #color: #C2DEFF;
  color: #E6F1FF;
  font-family: sans-serif;
  font-size: 100%;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none; #removes "bullets"
  text-align: end;
  #transition-duration: .25s;
  #border:2px solid lime;
  }
  
  
/* .menu__item:hover {background-color: #F7F7F7;}*/




/*order is important*/
.menu__box a:link {color:#E6F4FF;}
.menu__box a:visited {color:#E6F4FF;}
.menu__box a:hover {color:#2EA4FF;text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);}
.menu__box a:active {color:#2EA4FF;}

/* Responsive adjustments ************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
@media (min-width: 2561px) {
	
.menu__box {padding-top:9vw;}
	
#button_2:not(:checked) + label {width:70vw;}
.menu__box {width:40vw;}
.menu__item {font-size: 430%;font-weight:900}

.menu__btn {width:3.5vw; height:3.2vw;#border:0.5vw solid lime;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
/* espacement barre haut du bouton menu */
.menu__btn > div::before {content:' ';  top: -0.9vw;} 
/* espacement barre bas du bouton menu */
.menu__btn > div::after {content:' '; top: 0.9vw;} 

}


@media (min-width: 1921px) and (max-width: 2560px) {

.menu__box {padding-top:8vw;}	
	
#button_2:not(:checked) + label {width: 70vw;}
.menu__box {width:40vw;}
.menu__item {font-size: 300%;font-weight:900}

.menu__btn {width:3.5vw; height:4vw;#border:1vw solid lime;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
.menu__btn > div::before {content:' ';  top: -1vw;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {content:' '; top: 1vw;} /* espacement barre bas du bouton menu */

}

@media (min-width: 1681px) and (max-width: 1920px) {

.menu__box {padding-top:7vw;}	
	
#button_2:not(:checked) + label {width: 70vw;}
.menu__box {width:40vw;}
.menu__item {font-size: 220%;font-weight:900}

.menu__btn {width:3.5vw; height:3.2vw;#border:0.5vw solid lime;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
/* espacement barre haut du bouton menu */
.menu__btn > div::before {content:' ';  top: -0.9vw;} 
/* espacement barre bas du bouton menu */
.menu__btn > div::after {content:' '; top: 0.9vw;} 
}


@media all and (min-width: 1025px) and (max-width: 1680px) {
	
.menu__box {padding-top:6vw;}
	
#button_2:not(:checked) + label {width: 70vw;}
.menu__box {width:40vw;}
.menu__item {font-size: 140%;font-weight:900}

.menu__btn {width:3.5vw; height:4vw;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
.menu__btn > div::before {content:' ';  top: -1vw;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {content:' '; top: 1vw;} /* espacement barre bas du bouton menu */

}


/*********************************************************************************************************/
/* PC/TABLETTE DE TAILLE INTERMEDIAIRES 1/3 ***********************************************************************/
@media all and (min-width: 901px) and (max-width: 1024px) { 

.menu__box {padding-top:8vw;}

/* div partie gauche de l'ecran pour fermer le menu */
#button_2:not(:checked) + label {width: 70vw;}
.menu__box {width:40vw;}
.menu__item {font-size: 100%;font-weight:900}

.menu__btn {width:3.5vw; height:4vw;#border:0.5vw solid lime;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
.menu__btn > div::before {content:' ';  top: -1vw;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {content:' '; top: 1vw;} /* espacement barre bas du bouton menu */

}
/*********************************************************************************************************/
/* PC/TABLETTE DE TAILLE INTERMEDIAIRES 2/3 ***********************************************************************/
@media all and (min-width: 769px) and (max-width: 900px) {

.menu__box {padding-top:8vw;}
	
/* div partie gauche de l'ecran pour fermer le menu */
#button_2:not(:checked) + label {width: 70vw;}
.menu__box {width:40vw;}
.menu__item {font-size: 130%;}

.menu__btn {width:3.5vw; height:4vw;#border:0.5vw solid lime;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
.menu__btn > div::before {content:' ';  top: -1vw;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {content:' '; top: 1vw;} /* espacement barre bas du bouton menu */
	
}
/****************************************************************************************************/
/* PC/TABLETTE DE TAILLE INTERMEDIAIRES 3/3 ***********************************************************************/
@media all and (min-width: 481px) and (max-width: 768px) {
	
.menu__box {padding-top:8vw;}

/* div pour fermer le menu */
#button_2:not(:checked) + label {width: 70vw;}
.menu__box {width:50vw;}
.menu__item {font-size: 90%;font-weight:900}

.menu__btn {width:3.5vw; height:4vw;#border:0.5vw solid lime;}
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {display:flex; width:3.5vw; height:0.4vw;}
.menu__btn > div::before {content:' ';  top: -1vw;} /* espacement barre haut du bouton menu */
.menu__btn > div::after {content:' '; top: 1vw;} /* espacement barre bas du bouton menu */
}

/* M O B I L E S ***********************************************************************************/
@media (max-width:480px) {

/* le menu est centré verticalement */	
.menu__box {#justify-content:center;padding-top:20vw;}
	
/*mettre le boutton hamburger bien centré verticalement en mode responsive */
.menu__box {/* le DIV menu qui apparait apres appui sur le bouton Hamburger*/
  #padding: 15% 2%; /* decaler les rubriques du menu */
  #background: rgba(03, 121, 211, 0.8); /* hack pour avoir le texte qui ne soit pas transparent */
  width:100%;}

.menu__btn {width:12vw;} /* la largeur du bouton doit etre la meme que la largeur de la croix !!!! */
/* Epaisseur des traits, longueur des traits, espace entre les traits du bouton hamburger  */  
.menu__btn > div,
.menu__btn > div::before,
.menu__btn > div::after {width:12vw; height:0.7vh;} 
.menu__btn > div::before {content:' '; top: -2.2vh;}
.menu__btn > div::after {content:' '; top: 2.2vh;}	

.menu__item {
  font-size: 130%;
  font-weight: 900;
  }
	
}

/*******************************************************************************************************
ANCIENS PORTABLES / Largeur Inférieur à 329px
********************************************************************************************************/
/************************************************/
@media (max-width:329px){ 

.menu__item {
  font-size: 110%;
  font-weight: 900;
  }
	
}