/*-- menu principal --*/

/* version horizontale */
@media screen and (min-width: 601px){
	.nav_button{
		display: none;
	}
	#nav_zone
	{
		/*margin: auto;*/
		/*max-width: 1200px;*/
		display: flex;
		/*align-items: center;*/ /* conflit possible avec .social align-self */
		justify-content: center;
	}
	.nav_main{
		display: block;
		background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
		text-align: center;
		position: fixed;
	}
	.nav_main > ul{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.nav_main ul{
		padding-left: 0;
	}
	.nav_main li{
		padding: 5px;
	}
	.sub-menu{
		border-top: 3px solid #13aff0;
	}
	/* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
	.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 */
	}
	/* 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-top: 5px;
		margin-left: -5px;
	}
	
	@media (pointer: fine){
		.nav_main > ul > li:hover
		{
			background-color: white;
		}
		.drop-right > a > p:after{
			content: " ▶";
		}
	}
}

@media screen and (min-width: 1000px){
		nav > ul > li > ul{
			margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
			margin-top: 7px;
		}
		.nav_main li{
			padding: 7px;
		}
}

/* version petits écrans */
@media screen and (max-width: 600px){
	#nav_zone{
		padding-top: 5px;
	}
	.nav_button{
		display: block;
	}
	.nav_main{
		display: none;
		margin: 10px;
		background-color: white;
		text-align: left;
	}
	.nav_main.show{
		display: block;
	}
	/*.nav_main > ul{}*/
	.nav_main li{
		padding: 5px;
	}
	.drop-down{
		width: min-content;
	}
	.sub-menu{
		margin-top: 5px;
	}
	.nav_main ul{
		padding-left: 20px;
		padding-right: 20px;
	}

	/*nav > ul > li > ul{
		margin-left: 0;
	}*/
	@media (pointer: fine){
		.nav_main li > a:hover{
			background-color: yellow;
		}
		.drop-right > a > p:after{
			content: ' ▼';
		}
	}
}


.nav_main
{
	/*position: fixed;*/
	border: 2px solid #13aff0;
	top: -2px;
	/*font-size: 90%;*/
	text-wrap: nowrap;
	/*max-width: 90%;*/
}
.sub-menu{
	box-shadow: 1px 1px 3px black;
}
ul{
	margin: 0;
}

.nav_main ul
{
	/*list-style: none;*/
	/*padding-left: 0;*/
}
.nav_main li
{
	list-style: none;
	
}
.nav_main p
{
	display: inline-block; /* à cause du bouton sub-menu-toggle */
	margin: 0;
	/*background-color: #ffffffe1;*/ /* b3 = 179 = 0.7 (x 256) */
}

.current/* > a > p*/
{
	background-color: white;
	font-weight: bold;
}
li:not(.current){
	background-color: initial;
	font-weight: initial;
}



/* sous-menus avec PC + souris
mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :hover, cassant le JS utilisé ici */
@media (pointer: fine) /* fine => précision de la souris */
{
	.drop-down:hover > .sub-menu,
	.drop-right:hover > .sub-menu
	{
		display: block;
	}
	.sub-menu li:hover /* écrase le fond blanc placé en même temps */
	{
		background-color: yellow;
	}

	.drop-down > a > p::after
	{
		content: ' ▼';
		font-size: x-small;
	}
	.drop-right > a > p:after
	{
		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;
}

/* écran tactile */
@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;
	font-size: 95%;
}

@media screen and (max-width: 1000px){
	#nav_zone
	{
		/*height: 29px;*/
	}
	
	.nav_main p
	{
		/*font-size: smaller;*/
		font-size: 90%;
	}
	nav > ul > li > ul
	{
		/*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;*/
	}
}