/* ================================================= */
/*       Style pour le Menu Principal Dynamique      */
/*            (Version 2.0 - Embellie)               */
/* ================================================= */

/* --- 1. Conteneur principal de la barre de navigation --- */
.main-nav {
    font-family: 'Roboto', sans-serif;
    
    /* --- NOUVEAU : Menu flottant et transparent --- */
    position: sticky; /* Reste collé en haut de la page */
    top: 0;
    width: 100%;
    z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
    
    /* On utilise les variables de votre site pour la cohérence */
    /* Le fond est semi-transparent pour voir le fond de la page à travers */
    background-color: rgba(30, 30, 30, 0.85); 
    backdrop-filter: blur(10px); /* Effet de flou moderne */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation subtile */
    
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

/* --- 2. La liste des boutons principaux (<ul>) --- */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* --- 3. Chaque élément de la liste (<li>) --- */
.main-nav ul li {
    position: relative;
}

/* --- 4. Style des liens principaux (<a>) --- */
.main-nav > ul > li > a {
    display: block;
    padding: 20px 25px; /* Un peu plus d'espace vertical */
    color: #ecf0f1;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative; /* Indispensable pour l'effet de survol ci-dessous */
    transition: color 0.3s ease-out;
}

/* --- 5. NOUVEL EFFET au survol des liens principaux --- */
/* On change juste la couleur du texte pour le rendre plus vif */
.main-nav > ul > li:hover > a {
    color: #fff;
}

/* On ajoute une ligne animée qui apparaît en dessous */
.main-nav > ul > li > a::before {
    content: '';
    position: absolute;
    bottom: 10px; /* Position de la ligne */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--color-primary); /* On utilise la couleur primaire de votre site ! */
    border-radius: 2px;
    transition: width 0.3s ease-out; /* Animation sur la largeur */
}

.main-nav > ul > li:hover > a::before {
    width: 60%; /* La ligne s'étend au survol */
}


/* --- 6. Le sous-menu déroulant (caché par défaut) --- */
.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    
    /* MODIFIÉ : On ajoute un petit espace entre le menu principal et le sous-menu */
    top: calc(100% + 5px); 
    
    min-width: 260px; /* Un peu plus large pour plus de confort */
    
    /* NOUVEAU : On applique l'effet de verre dépoli, comme sur le menu principal */
    background-color: rgba(44, 62, 80, 0.8); /* Fond plus sombre et semi-transparent */
    backdrop-filter: blur(10px);
    
    border-radius: 8px; /* On arrondit tous les coins pour un look plus doux */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
    
    /* NOUVEAU : On ajoute du padding pour que les liens ne soient pas collés aux bords */
    padding: 10px 0;
    
    /* Animation d'apparition améliorée */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98); /* On ajoute un léger effet de zoom */
    transform-origin: top center; /* L'animation part du haut */
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1); /* Transition plus dynamique */
}

/* --- 7. Affichage du sous-menu au survol de l'élément parent --- */
.nav-item-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* NOUVEAU : On ajoute des séparateurs entre les éléments du sous-menu */
.dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- 8. Style des liens dans le sous-menu (avec icônes et nouvel effet de survol) --- */
.dropdown-menu li a {
    display: block; /* S'assure que le lien prend toute la largeur */
    padding: 12px 20px 12px 45px; /* On augmente le padding gauche pour l'icône */
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    position: relative; /* Indispensable pour positionner l'icône */
    transition: background-color 0.2s, color 0.2s, padding-left 0.2s ease-out;
}

/* NOUVEAU : On ajoute une petite icône "chevron" avant chaque lien */
.dropdown-menu li a::before {
    content: '›';
    font-weight: bold;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary); /* La couleur primaire de votre site */
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* NOUVEL EFFET DE SURVOL */
.dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Un léger fond blanc transparent */
    color: #fff; /* Le texte devient blanc pur */
    padding-left: 50px; /* On décale le texte vers la droite pour un effet dynamique */
}

.dropdown-menu li a:hover::before {
    opacity: 1; /* L'icône devient plus visible */
}

/* --- Bonus : Flèche animée pour les menus déroulants (inchangé) --- */
.nav-item-dropdown > a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.3s ease-out;
}

.nav-item-dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* --- 7. Affichage du sous-menu au survol de l'élément parent --- */
.nav-item-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- 8. Style des liens dans le sous-menu --- */
.dropdown-menu li a {
    padding: 14px 20px;
    color: var(--color-text-muted); /* Variable de votre site */
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s; /* On ajoute la transition de couleur */
}

.dropdown-menu li a:hover {
    background-color: var(--color-primary); /* Variable de votre site */
    color: #fff;
}

/* --- Bonus : NOUVELLE flèche animée pour les menus déroulants --- */
.nav-item-dropdown > a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.3s ease-out; /* Animation sur la transformation */
}

/* Au survol, la flèche se retourne vers le haut */
.nav-item-dropdown:hover > a::after {
    transform: rotate(180deg);
}