@charset "utf-8";

nav {z-index: 3;}
#menu, .menu1 { z-index: 4;} /* !!! pour ie 11 !!! */

/* ********************************************************** */
/*                      XS. "MOBILE FIRST"                    */
/* ********************************************************** */

nav a {color:white;}
nav a:hover {
	color: hsla(359,100%,33%,1.00);
	font-weight: normal;
}

/* Le switch d'ouverture du menu pour petits écrans */
/* ------------------------------------------------ */
#voir_menu {
	text-align: center;
	background-color: hsla(359,100%,33%,1.00);
	padding: 2px 0 5px 0;
	color: white;
	cursor: pointer;
	height: 30px;
/* z-index: 2; pour diaporama (?) */
/* Afficher/Masquer : Tout Va Bien sauf que ça n'est pas animé. */	
/* Essayons de faire la même chose que le J.S., mais en CSS */
/*	Impossible de sélectionner un parent à partir de son enfant en CSS. Attendre CSS4 
Il faut donc animer en J.S. Et que ça marche pour ie11! 
Il a fallu rajouter z-index = 1 à #contenu, mais rectifier pour option M */	
}

/* STRUCTURE */
/* --------- */
nav {
	transition: none;
	/* évitement des transitions lors de passage XXL <=> M */
	}

/* HABILLAGE */
/* --------- */
.menu1 {
	margin: 0; padding: 0; 
	}
.menu1 > li {
	
	background-color: black;
	color: white;
    text-align: center;
    line-height: 20px;
    border-bottom: thin solid white;
    list-style-type:none;
	}
.menu1 > li:first-child {border-top: thin solid white;}
.menu1 > li:hover > a {color:hsla(359,100%,33%,1.00);}
.li0:hover {
	background-color: dimgrey;
	cursor: pointer;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);
	/*background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);*/
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);
}
.menu2 {
	margin: 0;padding: 0;
	}
.menu2 li {
	height: 1em;
	line-height: .5em;
	padding-top: .2em;
	background-color: white;
	color: black;
	text-align: left;
	list-style-position: inside;
	overflow: visible;
	list-style-type: square;
	}
.menu2 li a{
	
}
.menu2 li a {padding-left: 5%;color: black;}
.li2 a:hover {color: hsla(359,100%,33%,1.00);}
.li2:hover {
	background-color: dimgrey;
	color: green;
	cursor: pointer;
	background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);
	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);
	/*background-image: -o-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);*/
	background-image: linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(90,90,90,1.00) 100%);
}
.menu2 li:hover a {color:hsla(359,100%,33%,1.00);}

.menu2 {
	height: 0; overflow: hidden;
	transition: none; /* pour un retour instantané */
	}
.li1:hover .menu2 {
	height: auto;
	transition: .5s;
	}

@media  (min-height: 370px) and (max-width: 699px) { 
	/* un peu plus que la mesure (320px). Probablement du fait de la hauteur fixe du header dans la config. XXS */
	.menu2 {
		height: auto;
		}
	}
@media  (min-height: 490px) {
	.menu1 > li {
    	line-height: 30px;
	}
	.menu2  li {
		height: 1.5em;
		line-height: 1em;
	}
}

/* supprimer la classe li2 dans menu.js ? */

/* ********************************************************** */
/*                         M. "MEDIUM"                        */
/* ********************************************************** */

@media  (min-width: 700px) and (max-width: 999px)  {
	/* Pour que les sous-menus passent au premier plan */	
	.menu1  {position: absolute;}
	}
@media  (min-width: 700px) and (max-width: 730px)  {
	/* Bricolage pour le texte du dernier menu, trop long */	
	.menu1 > li:last-child {
	font-size: .9em;
	}
	}
/* Traités séparément car ie11 n'apprécie pas un media dans un media */

@media  (min-width: 700px){
	
	.menu1 > li {
    	line-height: 30px;
	}
	.menu2  li {
		height: 1.5em;
		line-height: 1em;
	}
	
/* STRUCTURE */
/* --------- */
	#voir_menu {display: none;}
	nav {
		height: 35px; 
		padding:  0 0 5px 0;
		/*position: absolute;*/   /*Pour animation*/
		}
	/*#menu {position: relative;}*/   /*Pour animation*/
	.menu1  {
		display: flex; display: -webkit-flex;
		flex-flow: row nowrap; /* defaut */
		width: 100%;
		}
	.menu1 > li {
		flex-basis: 100%;
		}	
	.menu2  {
		display: flex; display: -webkit-flex;
		flex-flow: column nowrap;
		}
	.menu2 li {
		line-height: 1em;
		/*height: 2.5em;*/
	}

/* MENU DYNAMIQUE */
/* -------------- */	
/*	La propriété display ne pouvant pas être animée, on a fait autre chose.
	Et l'animation (@keyframes, translation) ne fonctionne pas sous ie11. */
	
	.menu2 {
		height: 0; overflow: hidden;
		transition: none; /* pour un retour instantané */
	}
		.li1:hover .menu2 {
		/*height: 100px;
		transition: .3s;*/
	}
		
/* HABILLAGE */
/* --------- */
/*	Mais pourquoi la bordure sup. du premier élément disparait ?
	Augmenter le z-index du menu ne change rien. */
	.menu1 > li:first-child {border-top: none;}
	/* Et voilà (sup. héritage) !*/
	/* Il faut quand même redéfinir : */
	.menu1 > li, .menu1 > li:first-child {
		height: 35px;	
		border: 1px solid white;
		border-left: none;
	}
	.menu1 > li:first-child {
		border-left: none;
	}
	.menu1 > li:last-child {
	border-right: none;
	}
	.menu2 {
		margin-top: 4px;
		border-bottom-right-radius: 10px;
		box-shadow: 2px 2px 5px black;
	}
	.menu2 li {
		text-indent: 0;
		height: 35px;
	}
	.menu2 li  {
		padding-top: 10px;
	} /* à enlever en config. XXL */
}
/* ********************************************************** */
/*                           XXL. "BIG"                       */
/* ********************************************************** */

@media  (min-width: 1000px) {
	
/* STRUCTURE */
/* ********* */
	nav  {
		flex: 0 1 200px;
		/*height: 575px;*/
		height: 100%;
	}
	.menu1  {
		flex-flow:row wrap;
	}
	.menu1 > li {
		flex-basis: 100%;
		height:auto;
	}
	.menu2 {display: block;
	} /* ou bien flex, idem */	

	.li1:hover .menu2 {
		height: auto;
		transition: none;
	}
	
/* HABILLAGE */
/* --------- */
	nav {
		border-right: 1px solid black;
	}	
/*	nav, nav * {
		opacity: .7;
	}
	nav:hover * {
		opacity: 1;
	}*/
	.menu1 {
		border: none;
		height: auto;
		}
	.menu1, .menu1 > li {
		border: none;
		}
	.menu1 > li {
    	line-height: 20px;
	}
	.menu1 > li:first-child {
		border-width: 0px 0 1px 0 ;
		border-color: white;
	}
	.menu1 > li:last-child {
		border-bottom: none;
		}
	.menu2 {
	margin: 0;padding: 0;
	border-bottom-right-radius: 10px;
	box-shadow: none;
	}
	.menu2 li {
		padding-top: 3px;
		height: 1.5em;
	}
}

/* Adaptation du menu si la hauteur est insuffisante */
/* ------------------------------------------------- */
@media  (min-width: 1000px) and (min-height: 535px)  {
		.menu1 > li {
    	line-height: 30px;
	}
	.menu2  li {
		height: 1.5em;
	}
}
@media  (min-width: 1000px) and (min-height: 495px)  {
	.menu2 {
		height: auto;
		}
}