/* public/css/nav.css */

/* --- Header et Navigation --- */
#main-header {
    background-color: #212628;
    padding: 0 20px;
    border-bottom: 3px solid #2ecc71;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    height: 60px;
}

.header-container {
    width: 90%;
    max-width: 1880px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 25px; 
}

.logo-area .site-title {
    color: #2ecc71;
    font-size: 1.8em;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}
.logo-area .site-title:hover {
    color: #55efc4;
}

.main-navigation ul.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation ul.nav-links > li {
    margin-left: 15px;
    position: relative; /* Essentiel pour les dropdowns absolus */
}

.main-navigation ul.nav-links > li > a {
    color: #dfe6e9;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    font-size: 0.95em;
    cursor: pointer; /* Indiquer que les liens sont cliquables */
}

.main-navigation ul.nav-links > li > a:hover,
.main-navigation ul.nav-links > li > a.active { /* .active pour la page courante */
    background-color: #2ecc71;
    color: #212628;
}

/* Style pour les flèches des dropdowns */
.main-navigation ul.nav-links > li > a .dropdown-icon {
    font-size: 20px;
    margin-left: 5px; /* Ajusté pour un meilleur espacement */
    transition: transform 0.2s ease-in-out;
}

/* Rotation de la flèche quand le menu parent est ouvert (classe gérée par JS) */
.main-navigation ul.nav-links > li.menu-item-open > a .dropdown-icon {
    transform: rotate(180deg);
}


/* --- Styles Communs pour TOUS les Sous-Menus Déroulants (user et autres) --- */
ul.submenu-dropdown,
ul.user-dropdown {
    display: none; /* Caché par défaut, JS gère l'affichage avec .menu-item-open sur le LI parent */
    position: absolute;
    top: calc(100% + 5px); /* Positionné sous l'item parent */
    right: 0; /* Aligné à droite pour user-dropdown, peut être 'left: 0;' pour d'autres */
    background-color: #2c3e50;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    min-width: 200px;
    border-radius: 4px;
    border: 1px solid #525d60;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1001; /* Au-dessus des autres éléments */
}

/* Affichage des dropdowns lorsque le LI parent a la classe .menu-item-open (gérée par JS) */
.main-navigation ul.nav-links > li.menu-item-open > ul.submenu-dropdown,
.main-navigation ul.nav-links > li.menu-item-open > ul.user-dropdown {
    display: block;
}

/* Liens dans les dropdowns */
ul.submenu-dropdown li a,
ul.user-dropdown li a {
    display: block;
    padding: 10px 15px;
    color: #dfe6e9;
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
ul.submenu-dropdown li a:hover,
ul.user-dropdown li a:hover {
    background-color: #3b4446;
    color: #2ecc71;
}
ul.user-dropdown li hr { /* Spécifique si besoin de séparateur dans user-dropdown */
    border: 0;
    border-top: 1px solid #525d60;
    margin: 6px 0;
}

/* --- Sélecteur de langue (gardé séparé pour l'instant) --- */
.language-selector-container-standalone { /* Renommé pour éviter conflit avec .language-selector-container si utilisé ailleurs */
    margin-left: 20px; 
}
.language-selector-container-standalone select {
    background-color: #2d3436;
    color: #dfe6e9;
    border: 1px solid #525d60;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: border-color 0.3s ease;
}
.language-selector-container-standalone select:focus {
    outline: none;
    border-color: #2ecc71;
}

/* --- Bouton Burger Menu pour mobile --- */
.menu-toggle {
    display: none; 
    background: none;
    border: none;
    color: #dfe6e9;
    cursor: pointer;
    padding: 10px;
    margin-right: 10px; 
}
.menu-toggle .material-symbols-outlined {
    font-size: 30px; 
    display: block;
}

/* Icônes dans les liens de navigation (si vous les utilisez directement dans les <a> principaux) */
.nav-icon { 
    margin-right: 8px;
    vertical-align: middle;
    font-size: 1.2em; /* Ajuster si besoin */
}


/* --- Responsive pour le Menu (max-width: 860px) --- */
@media (max-width: 860px) {
    body {
        padding-top: 60px; /* Hauteur du header mobile, ajustez si #main-header.height change */
    }
    #main-header {
        height: 60px; /* Maintenir la hauteur ou l'ajuster */
        padding: 0 10px;
    }
    .header-container {
        padding: 0 10px; /* Réduire padding sur mobile pour le conteneur interne */
    }

    .logo-area .site-title {
        font-size: 1.5em;
    }

    /* Le conteneur des liens principaux en mode mobile */
    .main-navigation ul.nav-links {
        display: none; /* Caché par défaut, JS ajoute .active pour l'afficher */
        flex-direction: column;
        position: absolute;
        top: 60px; /* Doit correspondre à la hauteur de #main-header */
        left: 0;
        width: 100%;
        background-color: #2c3e50;
        padding: 0;
        border-top: 1px solid #525d60;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    }
    .main-navigation ul.nav-links.active { /* Affiché par JS */
        display: flex;
    }

    /* Items de menu en mobile */
    .main-navigation ul.nav-links > li {
        margin-left: 0;
        width: 100%;
    }
    .main-navigation ul.nav-links > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid #3b4446;
        justify-content: flex-start; /* Aligner le texte et icône à gauche */
    }
    .main-navigation ul.nav-links > li:last-child > a {
        border-bottom: none;
    }
    /* Flèche des dropdowns en mobile */
    .main-navigation ul.nav-links > li > a .dropdown-icon {
        margin-left: auto; /* Pousse la flèche tout à droite */
    }

    /* Comportement des sous-menus (dropdowns) en mobile */
    ul.submenu-dropdown,
    ul.user-dropdown {
        position: static; /* S'affiche dans le flux normal, pas en absolu */
        display: none; /* Toujours caché par défaut, géré par .menu-item-open */
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px dashed #4a5457; /* Séparateur plus distinct */
        background-color: #343e40; /* Fond légèrement différent */
        margin-top: 0;
        padding: 0;
    }
    /* Affichage quand le parent a la classe .menu-item-open (gérée par JS) */
    /* Cette règle est déjà définie plus haut et devrait s'appliquer aussi en mobile */
    /* .main-navigation ul.nav-links > li.menu-item-open > ul.submenu-dropdown,
       .main-navigation ul.nav-links > li.menu-item-open > ul.user-dropdown {
        display: block;
    } */
    
    ul.submenu-dropdown li a,
    ul.user-dropdown li a {
        text-align: left; /* Aligner le texte des sous-menus à gauche */
        padding-left: 30px; /* Indentation pour les sous-menus */
        border-bottom: 1px solid #3b4446;
    }
     ul.submenu-dropdown li:last-child a,
     ul.user-dropdown li:last-child a {
        border-bottom: none;
     }


    /* Sélecteur de langue en mobile */
    .language-selector-container-standalone {
        margin-left: 0; /* Prend toute la largeur */
        order: 99; /* Pour le mettre à la fin du menu flex mobile si besoin */
        width: 100%;
    }
    .main-navigation ul.nav-links > li.language-selector-container-item { /* Si vous l'intégrez comme un li */
        padding: 0; /* Le form prendra le padding */
    }
    .main-navigation ul.nav-links > li.language-selector-container-item form {
         padding: 12px 20px;
         border-bottom: 1px solid #3b4446;
    }
    .main-navigation ul.nav-links > li.language-selector-container-item select {
        width: 100%;
        padding: 10px;
    }


    .menu-toggle {
        display: block; /* Affiche le bouton burger */
    }
}

.main-navigation ul.nav-links > li > a.active,
.main-navigation ul.user-dropdown li > a.active, /* Pour les liens actifs dans le dropdown user */
.main-navigation ul.submenu-dropdown li > a.active { /* Pour autres dropdowns */
    background-color: #2ecc71; /* Vert émeraude */
    color: #212628;      /* Texte foncé */
    font-weight: bold;     /* Optionnel */
}