*{
	margin: 0px;
	padding: 0px;
	font-family: Avenir, sans-serif;
}

nav{
	width: 100%;
	margin: 0 auto;
	background-color: white;
	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: #EEE; /* 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: black;
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}
nav a:hover{
	color:orange;
	border-bottom: 2px solid gold;
}
.niveau01{
	display:none;					/* Le menu est invisible */
	box-shadow: 0px 1px 2px #CCC;
	background-color:white;
	position: absolute;				/* Il se superpose au reste
	width: 100%;						de la page sur tt largeur */
	z-index: 1000;					/* Il est toujours "en surface" */
}
nav > ul li:hover .niveau01{		/* Quand on passe sur un élément du sous-menu */
	display: block;					/* il s'affiche */ 
}

.niveau01 li{
	float: none;
	width: 100%;
	text-align: left;
}
.niveau01 a{
	padding: 10px;
	border-bottom: none;
}
.niveau01 a:hover{
	border-bottom: none;
	background-color: RGBa(200,200,200,0.1);	
}
.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%;
    }
}