/*-- menu principal --*/
#nav_zone
{
	/*height: 33px;*/
	/*width: 100%;*/
}
.nav_main
{
	position: fixed;
	/*box-shadow: 3px 3px 5px #13aff0;*/
	border: 2px solid #13aff0;
	top: -2px;
}
.nav_main
{
	/*font-size: 90%;*/
	/*margin-top: 10px;*/
	/*margin-bottom: 10px;*/
	text-wrap: nowrap;
	background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
}
.nav_main > ul
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
ul
{
	margin: 0;
}

.nav_main ul
{
	list-style: none;
	padding-left: 0;
}
.nav_main li
{
	list-style: none;
	padding: 7px;
}
.nav_main p
{
	display: inline-block; /* à cause du bouton sub-menu-toggle */
	margin: 0;
	/*background-color: #ffffffe1;*/ /* b3 = 179 = 0.7 (x 256) */
}
.nav_main > ul > li:hover
{
	background-color: white;
}
.current/* > a > p*/
{
	background-color: white;
	font-weight: bold;
}
li:not(.current){
	background-color: initial;
	font-weight: initial;
}

/* faire apparaître les sous-menu sur PC */
.drop-down:hover > .sub-menu,
.drop-right:hover > .sub-menu
{
	display: block;
}
@media (pointer: fine) /* fine => précision de la souris */
{
	.drop-down > a > p::after
	{
		content: ' ▼';
		font-size: x-small;
	}
	.drop-right > a > p:after
	{
		content: " ▶";
		font-size: x-small;
	}
}

/* faire apparaître les sous-menu sur smartphone */
.sub-menu-toggle
{
	display: none; /* masqué par défaut */
	background: none;
	/*border: none;*/
	cursor: pointer;
	font-size: x-small;
	vertical-align: text-bottom;
}
@media (pointer: coarse) /* coarse = grossier = précision écran tactile */
{
	.sub-menu-toggle
	{
		display: inline-block; /* visible sur écran tactile */
	}
	.drop-down.open > .sub-menu,
	.drop-right.open > .sub-menu
	{
		display: block;
	}
}


.sub-menu
{
	display: none;
	background-color: white;
	border-top: 3px solid #13aff0;
	box-shadow: 1px 1px 3px black;
	font-size: 95%;
}
.sub-menu li:hover /* écrase le fond blanc placé en même temps */
{
	background-color: yellow;
}

/* 1er sous-menu, poitionnement pour ne pas aggrandir l'élément parent */
nav > ul > li > ul
{
	position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
	margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
	margin-top: 7px;
}
/* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
.drop-right
{
	/*position: relative;*/
}
.drop-right .sub-menu
{
	position: absolute; /* positionnement par rapport au précédent "position" en CSS */
	left: 100%;
	top: -3px; /* la bordure bleue fait 3px */
}

@media screen and (max-width: 1000px){
	#nav_zone
	{
		/*height: 29px;*/
	}
	.nav_main li
	{
		padding: 5px;
	}
	.nav_main p
	{
		/*font-size: smaller;*/
		font-size: 90%;
	}
	nav > ul > li > ul
	{
		margin-left: -5px;
		margin-top: 5px;
	}
}
@media screen and (max-width: 450px){
	.nav_button
	{
		/*display: block;*/
	}
	#nav_zone
	{
		/*position: fixed;
		justify-content: left;*/
	}
	.nav_main
	{
		/*top: 0px;*/
	}
	.nav_main > ul
	{
		/*flex-direction: column;*/
	}
	.nav_main li
	{
		/**/
	}
	.sub-menu p
	{
		font-size: smaller;
	}
	.drop-down > .sub-menu
	{
		/*flex-direction: row;*/
		/*position: static;*/
	}
}