* {
	margin: 0px;
	padding: 0px;
}

nav{
	width: 100%;
	margin: 0 auto;
	background-color: var(--menu-color);
	font-family: var(--main-font), sans-serif;
	position: sticky;
	top: 0px;
	z-index: 9999;
}

/* Sticky permet à un élément de rester "collé" à une position spécifique 
	lors du défilement, mais uniquement à l'intérieur de son conteneur parent.
*/

/*
nav ul{
	list-style-type: none; 
}
nav ul li{
	float: left;
	width: 25%;
	text-align: center;
	position: relative;
}
*/

nav ul {
	display: flex;		 /* Active le mode Flexbox */
	list-style: none;	  /* Enlève les puces */
	margin: 0;
	padding: 0;
	background-color: var(--menu-color); /* Exemple de fond */
}

nav ul li {
	flex: 1;
	position: relative;	/* Important pour le sous-menu .niveau01 */
}

/* Pour espacer les éléments ou les centrer */
/* nav ul { justify-content: center; }  <-- pour centrer le menu */


/* nav ul::after{
	content: "";
	display: table;
	clear: both;
}

*/
nav a{
	display: block;
	text-decoration: none;
	color: var(--menu-text-color, #000000);
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}
nav a:hover{
	color:white;
	border-bottom: 2px solid white;
}

/* Cache tous les sous-menus par défaut */
.sub-menu {
	display: none;
	position: absolute;
	background-color: var(--menu-color, #eeeeee);
	min-width: 200px;
	z-index: 1000;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

/* Affiche le sous-menu au survol du parent */
li.menu-item:hover > .sub-menu {
	display: block;
}

/* NIVEAU 1 (Vertical, sous le menu horizontal) */
.niveau-1 {
	top: 100%;
	left: 0;
}

/* NIVEAU 2 et plus (S'affiche sur le côté) */
.niveau-2, .niveau-3 {
	top: 0;
	left: 100%; /* Décale le menu à droite du précédent */
}

/* Style des liens dans les sous-menus */
.sub-menu li {
	width: 100%;
	text-align: left;
}

.sub-menu a {
	padding: 10px 15px;
}

.sub-menu a:hover {
	background-color: rgba(200,200,200,0.8);
}




.niveau00 >a::after{
	/* content: " ▼";  */
	font-size: 12px;
}


/* Version Mobile (écrans de moins de 768px) */
@media screen and (max-width: 768px) {
	nav ul {
		flex-direction: column; /* Aligne les éléments verticalement */
	}

	nav ul li {
		width: 100%; /* Chaque bouton prend toute la largeur */
		border-bottom: 1px solid #444; /* Optionnel : ajoute une séparation */
	}

	.niveau01 {
		position: static; /* Le sous-menu pousse le contenu au lieu de se superposer */
		width: 100%;
	}
}