/*-- 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;
		top: -2px;
	}
	.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 screen and (max-width: 1000px){ /* entre 601 et 1000 */
		.nav_main p
		{
			font-size: 90%;
		}
	}
	
	@media (pointer: fine){
		.nav_main > ul > li:hover
		{
			background-color: white;
		}
		.drop-right > a > p:after{
			content: " ▶";
		}
	}
}
@media screen and (max-width: 450px){
	.sub-menu p{
		font-size: 90%;
	}
}

@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{
		display: flex;
		flex-direction: column;
	}
	.nav_button, .nav_main
	{
		position: fixed;
		left: 50%; /* technique pour centrer un élément positionné */
		transform: translateX(-50%);
	}
	.nav_button{
		display: block;
		margin-top: 5px;
		position: fixed;
	}
	.nav_main{
		display: none;
		background-color: white;
		text-align: left;
		margin: 5px 0;
		top: 31px; /* = taille bouton et de sa marge */
		
	}
	.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
{
	border: 2px solid #13aff0;
	text-wrap: nowrap;
}
.sub-menu{
	box-shadow: 1px 1px 3px black;
}
ul{
	margin: 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;
	}
	.drop-down.open, .drop-right.open{
		background-color: yellow;
	}
}
.sub-menu{
	display: none;
	background-color: white;
	font-size: 95%;
}