/*-- menu principal --*/

/* version horizontale */
@media screen and (min-width: 769px){
	.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;
	}
	.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, .drop-left .sub-menu
	{
		position: absolute; /* positionnement par rapport au précédent "position" en CSS */
		top: -3px; /* la bordure bleue fait 3px */
	}
	.drop-right .sub-menu{
		left: 100%;
	}
	.drop-left .sub-menu{
		right: 100%;
	}
	/* 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;
	}
	nav > ul > li > ul:has(.drop-left){
		right: 0;
	}

	@media screen and (max-width: 1024px){ /* entre 769 et 1024 */
		.nav_main p
		{
			font-size: 90%;
		}
	}
	
	@media (pointer: fine){
		.nav_main > ul > li:hover{
			background-color: white;
		}
		.drop-right > a > p:after{
			content: " ▶";
		}
		.drop-left > a > p:before{
			content: "◀ ";
		}
	}
}
@media screen and (max-width: 480px){
	.sub-menu p{
		font-size: 90%;
	}
}

@media screen and (min-width: 1025px){
	.nav_main li{
		padding: 7px;
	}
}
.nav_button, .nav_main{
	z-index: 2; /* être au dessus de fullcalendar, sauf de la barre des jours qui se fixe en haut */
}
/* version petits écrans */
@media screen and (max-width: 768px){
	#nav_zone{
		display: flex;
		flex-direction: column;
	}
	.nav_button, .nav_main{
		position: fixed;
	}
	.nav_button{
		display: block;
		margin: 5px;
		position: fixed;
	}
	.nav_main{
		display: none;
		background-color: white;
		text-align: left;
		margin: 5px;
		top: 31px; /* = taille bouton et de sa marge */
		
	}
	.nav_main.show{
		display: block;
	}
	/*.nav_main > ul{}*/
	.drop-down{
		width: min-content;
	}
	.sub-menu{
		margin-top: 5px;
	}
	.nav_main ul{
		padding-left: 25px;
		padding-right: 5px;
	}
	/*nav > ul > li > ul{
		margin-left: 0;
	}*/

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

	@media (pointer: coarse){
		.drop-down.open, .drop-right.open, .drop-left.open{
			border-radius: 5px;
		}
	}
}


.nav_main{
	border: 2px solid #13aff0;
	text-wrap: nowrap;
}
.sub-menu{
	box-shadow: 1px 1px 3px black;
}
.sub-menu:has(.drop-left), .sub-menu:has(.drop-left) .sub-menu{
	box-shadow: -1px 1px 3px black;
}
ul{
	margin-top: 0;
	margin-bottom: 0;
}

.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 li{
	padding: 5px;
	list-style: none;
}

.current/* > a > p*/
{
	background-color: white;
	font-weight: bold;
}
li:not(.current){
	background-color: initial;
	font-weight: initial;
}
.drop-down.open, .drop-down:hover{
	position: relative; /* permet d'aligner son enfant en position absolue à droite avec un right: 0; */
}


/* 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, .drop-left: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, .drop-left > a > p:before
	{
		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;
}
.sub-menu{
	display: none;
	background-color: white;
	font-size: 95%;
}

/* é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, .drop-left.open > .sub-menu{
		display: block;
	}
	.drop-down.open, .drop-right.open, .drop-left.open{
		background-color: yellow;
	}
}