/*** menu de navigation principale à 2 niveaux ***/

.menu-container {
	display: inline-block;
	font-family: arial, verdana, helvetica, sans-serif;
}

.menu-container ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}

/**** niveau 1 ****/
.menu-container ul li {
	position: relative;
	cursor: pointer;
   	min-width: 170px;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
	font-weight: bold;
}

.menu-container ul li a {
	display: block;
	padding: 10px;
	color: #C9D7FB;					/* bleu clair */
	background-color: #1B62B6;		/* bleu foncé */
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 4px 4px 18px #888888;
	border-radius: 4px 4px 4px 4px;	/* boutons proncipaux avec les 4 coins arrondis */
}

.menu-container ul li a:hover {
	color: #1B62B6;					/* bleu foncé */
	background-color: #C9D7FB;		/* bleu clair */
}

.menu-container ul li a.active {
	color: white;					/* blanc */
	background-color: #F07B15;		/* orange */
}

/**** niveau 2 ****/
.menu-container ul li ul {
	display: none;
	position: absolute;
	/* positionnement haut du sous-menu % au menu principal (93% et non 100% pour couvrir la courbure inférieure du bouton du menu */
	top: 93%;
	left: 0;
	min-width: 170px;
	z-index: 1000;
	flex-direction: column;
	border-radius: 0px 0px 4px 4px;	/* coins arrondis inférieurs du calque du sous-menu */
}

.menu-container ul li:hover ul {
	display: flex;
	box-shadow: 4px 4px 18px #888888;
}

.menu-container ul li ul li a {
	padding: 10px 15px;
	box-shadow: 0px 0px 0px #888888;
	color: #1B62B6;					/* bleu foncé */
	background-color: #C9D7FB;		/* bleu clair */
	text-align: left;
	border-radius: 0px;				/* pas de coins arrondis pour les éléments du sous-menu */
	border-bottom: 1px dotted #1B62B6;
}

.menu-container ul li ul li:last-child a {
	border-bottom: 0px solid #F07B15;
	border-radius: 0px 0px 4px 4px; /* coins arrondis inférieurs du dernier élément du sous-menu */
}

.menu-container ul li ul li a:hover {
	background-color: #F4D224;		/* jaune */
}

/* séparateurs */
.menu-container > ul > li {
  position: relative;
  border-right: 10px solid #B5CBE1;	/* Couleur du séparateur */
}

.menu-container > ul > li:last-child {
  border-right: none;				/* Pas de séparateur après le dernier bouton */
}