/* Style général du menu */
.navlink-wrapper {
    display: inline-block;
    /* Afficher les éléments du menu côte à côte */
    position: relative;
    /* Position relative pour positionner les sous-menus */
    padding: 10px;
    /* Espace autour des éléments du menu */
    white-space: nowrap;
    /* Empêche le texte de passer à la ligne */
    list-style-type: none;
    /* Supprime les puces des listes */
}

.navlink {
    color: var(--grey);
    /* Couleur du texte des liens du menu */
    text-decoration: none;
    /* Aucun soulignement des liens */
    font-size: 1 rem;
    /* Taille de police standard */
    transition: color 0.3s;
    /* Transition douce pour le survol */
}

/* Style des sous-menus */
.navlink-dropdown,
.sublink-dropdown {
    display: none;
    /* Cache les sous-menus par défaut */
    position: absolute;
    /* Positionnement absolu par rapport à leur parent */
    left: 0;
    /* Aligné à gauche avec l'élément parent */
    background-color: var(--white);
    /* Arrière-plan blanc pour les sous-menus */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* Ombre pour le sous-menu */
    z-index: 1000;
    /* Assurez-vous que le sous-menu est au-dessus des autres éléments */
    list-style-type: none;
    /* Supprime les puces des listes */
    padding: 0;
    /* Supprime le padding par défaut des listes */
}

/* Affichage des sous-menus au survol du lien parent */
.navlink-wrapper:hover .navlink-dropdown {
    display: block;
    /* Affiche les sous-menus au survol du lien parent */
}

/* Style des éléments de sous-menu */
.navlink-dropdown li,
.sublink-dropdown li {
    padding: 5px 10px;
    /* Espace autour des éléments de sous-menu */
}

.navlink-dropdown a,
.sublink-dropdown a {
    color: #555;
    /* Couleur des liens de sous-menu */
    text-decoration: none;
    /* Aucun soulignement */
    display: block;
    /* Les liens prennent toute la largeur pour un clic facile */
    transition: background-color 0.3s;
    /* Transition pour le survol */
}

/* Affichage du sous-menu de deuxième niveau au survol de l'élément de premier niveau */
.navlink-dropdown li:hover .sublink-dropdown {
    display: block;
    /* Affiche les sous-menus de deuxième niveau au survol */
}

/* Position des sous-menus de deuxième niveau */
.sublink-dropdown {
    top: 0;
    /* Au même niveau que l'élément de menu parent */
    left: 100%;
    /* Juste à droite de l'élément de menu parent */
    min-width: 150px;
    /* Largeur minimale pour les sous-menus de deuxième niveau */
}

/* Adaptations pour mobile (si nécessaire) */
@media (max-width: 768px) {
    .navlink-wrapper {
        display: block;
        /* Les éléments du menu sont empilés verticalement sur mobile */
    }

    /* Couleur logo */
    header:not(.header-scroll) .logo {
        /* Make logo gray instead of white when bg is pink */
        filter: brightness(0) invert(0.33);
    }

    .header-scroll a {
        color: inherit !important;
    }
}

.navlink-dropdown li:hover {
    background-color: #f2d5d591;
}

nav a {
    font-size: 16px;
    font-family: var(--font-family);
}


/* Mobile */
/* Styles de base du menu mobile */
.mobile-menu {
    background-color: #fff;
    /* arrière-plan blanc */
    padding: 20px;
    position: fixed;
    /* fixer le menu pour qu'il ne défile pas avec la page */
    top: 0;
    left: 0;
    width: 100%;
    /* le menu prend toute la largeur */
    height: 100%;
    /* et toute la hauteur */
    overflow-y: auto;
    /* permettre le défilement si le contenu dépasse */
    z-index: 1000;
    /* s'assurer qu'il est au-dessus des autres éléments */
    display: none;
    /* masqué par défaut */
}

/* Styles du bouton de fermeture */
.menu-close-button {
    font-size: 30px;
    /* taille suffisamment grande pour être facilement cliquable */
    color: #333;
    /* couleur foncée pour contraster avec le fond */
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    /* indiquer que c'est cliquable */
}

/* Styles des liens de menu */
.menu-link {
    display: block;
    color: #333;
    /* couleur du texte */
    padding: 15px 0;
    /* espace vertical */
    text-decoration: none;
    /* pas de soulignement */
    font-size: 18px;
    /* taille de la police */
    border-bottom: 1px solid #eaeaea;
    /* séparateur subtil entre les éléments */
}

/* Styles des sous-menus */
.submenu {
    padding-left: 20px;
    /* retrait pour la hiérarchie */
    display: none;
    /* masquer les sous-menus par défaut */
}

.submenu-link {
    color: #666;
    /* couleur légèrement plus claire pour les sous-menus */
    padding: 10px 0;
    text-decoration: none;
    /* pas de soulignement */
    display: block;
}

/* Afficher le menu quand .active est ajouté via JavaScript */
.mobile-menu.active {
    display: block;
}

/* Afficher les sous-menus lorsqu'ils sont actifs */
.menu-item.active .submenu {
    display: block;
    /* montrer le sous-menu */
}

.bg-beige {
    background-color: var(--beige);
}

#nav-links>ul {
    list-style-type: none;
}

.navlink-mobile {
    line-height: 2em;
    /* 3em pas esthétique */
}

ul.mobile {
    padding-left: 0px !important;
}

/* Base state for mobile dropdown, initially hidden */
.navlink-mobile-dropdown {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    text-align: center;
}

/* When parent wrapper is active, display the dropdown */
.navlink-mobile-wrapper.active .navlink-mobile-dropdown {
    display: block;
    /* Show the dropdown */
    max-height: 1000px;
    /* Maximum height for the content */
}

ul.navlink-mobile-dropdown {
    list-style-type: none;
    /* Surcharge du style.css */
    padding: 0px !important;
}

.mobile-menu-logo {
    display: block;
    z-index: 40;
}

/* Suppression des puces de tous les éléments de liste dans le menu mobile */
#nav-links ul {
    list-style-type: none;
    padding-left: 0;
}

.navlink-mobile-wrapper {
    text-align: center;
}