/* styles CSS */



body {
  text-align: center;
  color: #fff;
  background: #18bc9c;
  background: #0f6ea5;
}






ul {
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#menu li {
	display: inline-block;
}

 

#menu a {
	display: block;
	background-color: #2E2E2E;
	color: #fff;
	min-width: 140px;
	height: 50px;
	text-decoration: none;
	line-height: 50px;
}




#menu a:hover {
	background-color: #050404;
}


/*-- sous-menu --*/

#menu .hidden a {
	background-color: #11226A;
	padding: 5px;
}

#menu .hidden a:hover {
	background-color: #768A9C;
}

#menu .hidden li {
	display: block;
}

#menu .hidden /*la classe sur les <ul>*/ {
	position: absolute;
	display: none;
}

#menu li a:hover + .hidden{
	display: block;
}

#menu .hidden:hover {
	display: block;
}


/* Menu mobile */

/* Applique l'apparence du "bouton" Show Menu et le cache par défaut */

.show-menu {
	background-color: #A3BF1A;
	color: #fff;
	text-align: center;
	padding: 10px 0;
	display: none;
}


/* cache la checkbox */

#show-menu {
	display: none;
}

/* Affiche le menu quand la checkbox est cochée */

#show-menu:checked + #menu {
	display: block;
}



/* media queries */

@media screen and (max-width: 735px) {

	/* cache le menu et enleve les marges par défaut de ul */

	#menu {
		display: none;
		margin: 0;
	}

	/* affiche le "bouton" Show menu */

	.show-menu {
		display: block;
		cursor: pointer;
	}


	/* remettre les li en blocks */

	#menu li {
		display: block;
	}

	/* remet les sous-menu dans le flux (à l'origine positionné en Absolute) */
	/* A mettre seulement si vous avez des sous-menus */
	#menu .hidden {
		position: static;
	}

	
}