/* Barre de navigation */
nav {
    background-color: #333;
    padding: 0;
    position: fixed; /* Fixe la barre de navigation en haut de la page */
    top: 0; /* Positionne la barre en haut */
    left: 0; /* Aligne la barre à gauche */
    width: 100%; /* La barre prend toute la largeur */
    z-index: 1000; /* Assure que la barre de navigation reste au-dessus d'autres contenus */
}

/* La liste principale est centrée avec Flexbox */
nav .menu {
    list-style: none; /* Supprimer les puces */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centre la liste horizontalement */
}

/* Chaque élément du menu */
nav .menu li {
    position: relative; /* Nécessaire pour le positionnement du menu déroulant */
}

/* Liens dans la barre de navigation */
nav .menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    background-color: #333;
}

/* Changement de couleur au survol */
nav .menu li a:hover {
    background-color: #555;
}
/* Menu déroulant */
.dropdown-content {
    display: none; /* Masquer les sous-catégories par défaut */
    position: absolute; /* Positionner les sous-menus sous la catégorie principale */
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    list-style: none; /* Supprimer les puces dans le sous-menu */
    margin: 0;
    padding: 0;
}

/* Chaque élément du sous-menu */
.dropdown-content li {
    padding: 0;
}

/* Liens dans le sous-menu */
.dropdown-content li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Changement de couleur au survol dans le sous-menu */
.dropdown-content li a:hover {
    background-color: #ddd;
}

/* Affichage du sous-menu au survol */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Changement de couleur au survol des liens dans le menu principal */
nav .menu li:hover > a {
    background-color: #555;
}