/*DÉBUT RESET*/
html,
body,
div,
.menuContainer ul,
.menuContainer li,
a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
	line-height: 1;
}

.menuContainer ul {
	list-style: none;
}

.menuContainer a:link {
	color: #000;
	text-decoration: none;
}

.menuContainer a:visited {
	color: #000;
	text-decoration: none;
}

.menuContainer a:hover {
	color: #000;
	text-decoration: none;
}

.menuContainer a:active {
	color: #000;
	text-decoration: none;
}
/*FIN RESET*/

/*
	Création d'une classe interdisant les transitions
	Cette classe est initialement posée sur le body,
	puis retirée dès lors que la page est chargée.
	Ell est par ailleurs appliquée au début d'un redimensionnement
	et retirée à la fin...
	https://css-tricks.com/transitions-only-after-page-load/
*/
.noTransition *{
	transition:none !important;
}
.menuContainer{
	font-size:14px;
	/*On augmente line-height pour éviter la troncature des jambages
	induite par overflow:hidden;*/
	line-height: 1.06;
	/*Définition de la largeur de l'élément*/
	width:100%;
	font-weight:bold;
	position:relative;
	/*Centrage*/
	margin:20px auto;
	padding :0;
	
}
/*MENU PRINCIPAL*/
.menuContainer>ul {
	display: flex;
	justify-content: space-between;
	/*On empèche le retour ligne sur les éléments longs*/
	white-space:nowrap;
	margin:0 auto;
}
/*ÉLÉMENTS DU MENU PRINCIPAL*/
.menuContainer>ul>li {
	/*Pour positionner en absolute les sous-menus associés*/
	position:relative;
	/*On s'affranchit du curseur text sur les titres des sous-menus*/
	cursor:default;
	
}
/*SOUS-MENUS
Les sous-menus sont positionnés en absolute par rapport à l'élément li associé.
Un margin-top permet d'ajuster l'espace vertical qui les sépare de leur élément container.
Puisqu'ils sont destinés à être animés via fadeIn et fadeOut au survol de la ligne correspondante, 
on ne peut pas les dissimuler en passant leur display à none.
Pour simuler un display:none, ils sont cachés via visibility en hidden et opacity à 0.
*/
.menuContainer>ul>li>ul{
	position:absolute;
	visibility:hidden;
	opacity:0;
	margin-top:5px;
	/*Transition appliquée à la sortie du survol :
	visibility est animée en 0 secondes après un délai de 0.2s
	correspondant à la durée de la transition appliquée à opacity.
	Autrement dit, lorsque le survol prend fin, on passe l'opacity à 0 en 0.2 seconde
	puis on passe la visibility à hidden.*/
	/*transition:opacity .2s ease-in-out, visibility 0s ease-in-out .2s;*/
}
.menuContainer>ul>li:hover>ul {
	visibility:visible;
	opacity:1;
	/*Transition appliquée à l'entrée du survol :
	On anime l'opacity de 0 à 1 en 0.5 seconde*/
	/*transition:opacity .5s ease-in-out;*/
}
/*ÉLÉMENTS DES SOUS-MENUS*/
.menuContainer>ul>li>ul>li{
	z-index:10000;
	top:-5px;
	position:relative;
	margin-bottom:-5px;
	border:0 none;
	padding:0;
	
}
.menuContainer>ul>li>ul>li>a{
	width:120px;
	padding:10px;
	background:#C3D7F0;
	position:relative;
	top:-2px;
	border:1px solid #ccc;
	margin:0;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	line-height:16px;
	
}

.menuContainer>ul>li>ul>li>a:hover{
	background:#8DB3E2;
}

.menuContainer>ul>li>a:hover{
	background:#8DB3E2;
}

.menuContainer>ul li>a{
	display:inline-block;
	/*Pour positionner en absolute ::before et ::after*/
	position:relative;
	/*Pour cacher ::after en dehors de l'animation*/
	overflow:hidden;
	position:relative;
	padding:10px;
	width:120px;
	background:transparent;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	line-height:16px;
}
/*ANIMATION DES ÉLÉMENTS DE MENU*/
.menuContainer>ul li>a::before{
	/*Le contenu est défini par l'attribut name de l'ancre*/
	content:attr(name);
	/*Couleur rouge pour marquer l'effet*/
	color:red;
	position:absolute;
	width:0;
	/*Pour que wifth:0 est un effet*/
	overflow:hidden;
	/*transition:width .3s ease-in-out;*/
}
.menuContainer>ul li>a:hover::before{
	width:100%;
}
.menuContainer>ul li>a::after{
	content:'';
	position:absolute;
	top:50%;
	left:-10px;
	width:1px;
	height:1px;
	background:red;
	box-shadow:0px 0px 8px 3px red;
	/*transition:left .3s ease-in-out;*/
}
.menuContainer>ul li>a:hover::after {
	left:calc(100% + 10px);
}

/*ÉLÉMENTS SPÉCIFIQUES POUR LES PETITS ÉCRANS*/

/*Evidemment, on cache la checkbox*/
#menuHamburger{
	display: none;
}
/*Mise en forme du label associé à #menuHamburger :
Un carré aux bords arrondis.
Lorsqu'il est visible, son display passe en inline-flex.
Son contenu (les pseudo-éléments :before et :after) est centré 
horizontalement et verticalement par un simple margin:auto;
Le style vertical-align:top assure son alignement par le haut avec le menu.
*/
.menuContainer>label {
	display:none;
	cursor:pointer;
	vertical-align:top;
	background:gray;
	width:39px;
	height:39px;
	border-radius:5px;
}
/*
Le pseudo élément ::before est constitué des traditionnels trois traits horizontaux.
Les deux derniers traits sont réalisés via une box-shadow appliquée au premier.
*/
.menuContainer>label::before {
	content:'';
	margin:6px auto;
	width:25px;
	height:5px;
	background:#000;
	box-shadow:
		0 11px 0 0 #000,
		0 22px 0 0 #000;
}
/*
Le pseudo élément ::after est constitué d'un X.
On ne l'affiche que lorsque le menu est apparent
*/
.menuContainer>label::after {
	display:none;
	content:"\2716";
	font-weight:900;
	margin:auto;
	font-size:28px;
}
/*
Par défaut, le menu est dissimulé sur la gauche via un margin-left négatif.
Lorsqu'on clique sur le label/icone/hamburger, on l'affiche en passant son margin-left à 0;
*/

#menuHamburger:checked + ul{
    margin-left:0px;
}
/*Si le menu est visible, on affiche le pseudo élément ::after*/
#menuHamburger:checked  ~ label::after{
	display:block;
}
/*et on cache le pseudo élément ::before*/
#menuHamburger:checked  ~ label::before{
	display:none;
}
@media screen and (max-width:900px) {
	/*On annule le centrage du container*/
	.menuContainer{
		width:auto;
		margin:0;
		padding:0;
	}
	/*Menu Principal*/
	.menuContainer>ul {
		/*Pour assurer l'alignement avec le label*/
		display:inline-block;
		/*On intègre le padding dans le calcul des dimensions de l'élément*/
		box-sizing:border-box;
		/*On fixe sa largeur*/
		width:100%;
		/*On le positionne en passant son margin-left à moins sa largeur*/
		margin:0px;
		/*On agrémente l'apparence*/
		padding:10px;
		background:#ddd;
		border-radius:0 0px 10px 0;
		/*On pose une animation sur son margin-left 
		lequel est passé à zéro lorsqu'on clique sur le label*/
		/*transition:margin-left .5s ease-in-out;*/
	}
	/*Sous-menus*/
	.menuContainer>ul>li>ul{
		/*On annule le positionnement en absolute*/
		position:static;
		/*On asure son affichage*/
		visibility:visible;
		opacity:1;
		/*On décale pour faire joli*/
		margin-left:10px;
		/*On bloque toutes les transitions*/
		transition:none !important;
	}
	.menuContainer>label {
		display:inline-flex;
	}
	.menuContainer>ul>li>ul>li>a,.menuContainer>ul>li>a{
		width:90%
	}
	.menuContainer>ul>li>ul>li>a{
		width:200px;
	}
	.menuContainer>ul>li>a{
		width:280px;
	}
	.menuContainer>ul>li{
		position:relative;
		left:0px;
	}
	.menuContainer>ul>li>ul>li{
		position:relative;
		left:30px;
	}
}