/* --- Style pour le menu déroulant --- */

/* Positionnement de base pour l'élément parent du menu */
.nav-links .dropdown {
    position: relative; /* Indispensable pour que le sous-menu se positionne par rapport à lui */
}

/* Style du sous-menu (caché par défaut) */
.nav-links .dropdown .dropdown-menu {
    display: none; /* Cache le sous-menu */
    position: absolute; /* Le sort du flux normal de la page */
    top: 100%; /* Se positionne juste en dessous du lien parent */
    left: 0;
    background-color: #fff; /* Couleur de fond (à adapter à votre design) */
    list-style: none; /* Supprime les puces de la liste */
    padding: 10px 0; /* Un peu d'espace intérieur */
    margin: 0;
    min-width: 180px; /* Largeur minimale du sous-menu */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ajoute une ombre pour un effet de profondeur */
    border-radius: 4px; /* Bords arrondis */
    z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
}

/* Affiche le sous-menu au survol du parent */
.nav-links .dropdown:hover .dropdown-menu {
    display: block; /* Affiche le sous-menu */
}

/* Style pour les liens dans le sous-menu */
.nav-links .dropdown .dropdown-menu li a {
    padding: 8px 15px;
    display: block; /* Fait en sorte que le lien occupe toute la largeur de son conteneur */
    color: #333; /* Couleur du texte (à adapter) */
    white-space: nowrap; /* Empêche le texte de revenir à la ligne */
}

/* Change la couleur au survol d'un lien du sous-menu */
.nav-links .dropdown .dropdown-menu li a:hover {
    background-color: #f5f5f5; /* Couleur de fond au survol (à adapter) */
}