/* =========================================================
   THÈME GLOBAL — valeurs IDENTIQUES à l’existant
   (aucun changement visuel)
========================================================= */

:root {

    /* ========= Couleurs ========= */
    --color-header-bg: rgba(9, 40, 81, 1);
    --color-topbar-bg: rgba(39, 143, 226, 1);
    --color-nav-text: white;
    --color-white: white;
    --color-accent: orange;

    --color-dropdown-bg: rgba(255, 255, 255, 0.9);
    --color-border-light: #f0f0f0;

    /* ========= Dimensions ========= */
    --height-bar-desktop: 8vh;
    --height-bar-min: 50px;
    --height-bar-4k: 50px;

    /* ========= Layout ========= */
    --layout-max-width: 1800px;
    --layout-padding-inline: 60px; /* marge droite importante */
    --logo-offset-left: 200px; /* marge logo */

    /* ========= Animations ========= */
    --transition-fast: 0.3s ease;
    --transition-slow: 0.7s ease-out;

    /* ========= Ombres ========= */
    --shadow-header: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 8px 16px rgba(0,0,0,0.2);
}


@media (max-width: 1200px) {
    :root {
        --layout-padding-inline: 60px;
        --logo-offset-left: 40px;
    }
}

a {
    transition: color 0.3s ease;
}

/* ==========================
   Header principal
========================== */
/*header {*/
/*    display: block;*/
/*    position: sticky;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    z-index: 2000;*/
/*    background-color: var(--color-header-bg);*/
/*    box-shadow: var(--shadow-header);*/
/*    !* On garde uniquement la transition sur le transform *!*/
/*    transition: transform 0.4s ease-out;*/
/*    transform: translateY(0);*/
/*}*/

header {
    display: block;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 2000;
    background-color: var(--color-header-bg);
    box-shadow: var(--shadow-header);
}
/*header.hidden {*/
/*    opacity: 0;*/
/*    transform: translateY(-100%);*/
/*}*/

header.visible {
    opacity: 1;
    /*transform: translateY(0);*/
}

/* ==========================
   Barre du haut (.top-bar)
========================== */
.top-bar {
    background-color: var(--color-topbar-bg);
    color: var(--color-white);
    padding: 0;
    /*display: flex;*/
    align-items: center;
    /*justify-content: flex-end;*/
    /*justify-content: space-between;*/
    top: 0;        /* ajouté */
    width: 100%;   /* ajouté */
    z-index: 100;  /* ajouté */
}

/* ==========================
   Hauteur uniforme pour top-bar et nav
========================== */
.top-bar,
nav {
    height: var(--height-bar-desktop); /* hauteur responsive de base */
    min-height: var(--height-bar-min); /* optionnel : assure une hauteur minimum */
    display: flex;
    align-items: center;         /* centre verticalement le contenu */
}

.top-bar .has-dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 2. Cible UNIQUEMENT le contenu déroulant dans la barre supérieure */
.top-bar .dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* S'assure qu'il se place juste en dessous du déclencheur */
    right: 0;  /* Positionne le menu à l'extrême droite du conteneur parent */
    color: #333333;
    /* Styles pour l'animation */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;

    /* Styles d'apparence */
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
}

.top-bar .dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: 0.3s;
    background: transparent; /* Pas de fond gris */
    border-bottom: 1px solid #f0f0f0;
}

.top-bar .dropdown-content a:hover {
    color: orange !important;
    background-color: rgba(255, 165, 0, 0.1); /* Très léger voile orange au fond */

    /* Le texte doit rester sombre pour contraster avec le gris */
    color: #333333;
}
.top-bar .menu-container ul > li > a:hover {
    background-color: orange; /* Le fond bleu que vous voulez pour le niveau 1 */
    color: white;
}

.top-bar .has-dropdown > a.nav-link:hover {
    background-color: rgba(193, 193, 193, 0.1);
}

/* ==========================
   Wrapper pour l'alignement interne
========================== */

.top-bar-wrapper,
.nav-wrapper {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pousse les éléments aux extrémités */

    /* On utilise le même padding pour les deux */
    padding-left: var(--layout-padding-inline);
    padding-right: var(--layout-padding-inline);
}

/* ==========================
   Logo
========================== */
.logo-container {
    height: 2em;
    display: flex;
    align-items: center;
    /*margin-right: auto; !* Force les autres éléments vers la droite *!*/
    /*padding-left: 20px; !* Optionnel : petit espace pour ne pas coller au bord de l'écran *!*/
    margin-left: 0;
    transform: translateX(-100px); /* ajuste : -20 / -40 / -60 */
    padding-left: 0;
    flex-shrink: 0;
    z-index: 9999 !important; /* Plus haut que le menu mobile */
}

.logo-container img {
    max-width: 120px;
    min-height: 35px;
    max-height: 40px;
}

.logo-container a {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ==========================
   Conteneur droit (.right-container)
========================== */
.right-container {
    display: flex;
    align-items: center;
    padding-right: 5%;
    padding-left: 20px;
}
.search-icon {
    font-size: 1.1rem;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.search-icon:hover {
    background-color: orange;
    color: white;
    border-radius: 4px;
}

.top-bar-wrapper .right-container,
.nav-wrapper .right-container {
    padding-right: 0 !important; /* Force l'alignement sur le bord du wrapper */
    display: flex;
    align-items: center;
}

/* C'est ici qu'on crée la grande marge à droite du logo */
.top-bar-wrapper .menu-container {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* ==========================
   Sélecteur langue (.lang-selector)
========================== */
.lang-selector {
    display: flex;
    align-items: center; /* centre le lien dans le conteneur si nécessaire */
    justify-content: center;
    margin-left: 20px; /* optionnel : espace par rapport au bord gauche */
    gap: 10px; /* espace entre les drapeaux */
}

.flag-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* rond */
    /*border: 2px solid white;*/
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.flag-btn:hover:not(:disabled) {
    opacity: 1;
    transform: scale(1.1);
    border-color: rgba(39, 143, 226, 1);
}

.flag-btn.active {
    opacity: 1;
    box-shadow: 0 0 0 2px #1e4f91 inset; /* surbrillance CRAN */
    cursor: default;
}

/* drapeaux en background */
.flag-btn.fr {
    background-image: url('https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg');
}

.flag-btn.en {
    background-image: url('https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg');
}

/* ==========================
   Navigation principale (nav)
========================== */
nav {
    width: 100%;
    /* AJOUTS CLÉS pour l'alignement sur la grille du homepage-container */
    max-width: 1600px; /* ALIGNEMENT HORIZONTAL: Définit la grille */
    margin: 0 auto;    /* ALIGNEMENT HORIZONTAL: Centre la grille */
    padding: 0 20px;   /* PADDING: Assurez-vous que cette valeur correspond à celle de .homepage-container */

    /* FLEXBOX pour disposer le contenu (UL et .right-container) */
    display: flex;
    justify-content: space-between; /* CLÉ: Sépare le UL (gauche) du burger (droite) */
    align-items: center; /* Pour centrer verticalement le contenu de la nav */

    text-align: initial; /* Réinitialiser, car c'est géré par flexbox */

    /*background-color: var(--color-header-bg); !* Assure-toi que la nav a un fond opaque *!*/
    /*box-shadow: var(--shadow-header);*/
    /*padding-right: 280px;*/
}

/* ==========================
   Wrapper de la Navigation (Alignement avec la grille)
========================== */

.nav-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-end; /* Pousse tout le contenu de la nav à droite */
}

.main-menu {
    flex: 1; /* Prend toute la place et pousse la loupe à droite */
    display: flex;
    justify-content: center; /* Optionnel: centre tes liens de menu */
}

/* Vous pourriez aussi avoir besoin d'ajuster les styles de la liste UL */
.nav-wrapper ul {
    /* Le 'ul' du menu principal doit aussi être en display: flex pour aligner ses LI horizontalement */
    display: flex;
    list-style: none;
    margin-left: auto;
    padding: 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /*justify-content: center;*/
    /*margin-right: 80px;*/
    flex-wrap: wrap; /* ✅ permet aux <li> de passer à la ligne */
    /* overflow-x: auto; --> désactivé pour permettre menus déroulants */
}

nav ul li {
    position: relative;
    margin: 0;
}

.nav-link {
    /*padding-right: 2rem !important;*/
}

/* Lien direct dans <li> (a ou .nav-link) */
nav ul li > a,
nav ul li > .nav-link {
    position: relative;
    /*display: inline-block;*/
    /*padding: 15px 0;*/
    /*padding-left: calc(2rem);*/
    display: inline-flex;              /* 🔑 plus stable que inline-block */
    align-items: center;               /* centrage vertical parfait */
    padding: 15px 2rem;                /* 👈 LEFT + RIGHT identiques */
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
    color: white;
}

/* Onglet actif ou hover : fond orange uniquement sur l’entête */
nav ul li > .nav-link.active,
nav ul li > .nav-link:hover {
    background-color: orange;
    color: white; /* pour garder contraste lisible */
    /*width: 100%;    !* Prend toute la largeur disponible du li *!*/
}

/* Lien dans sous-menu */
nav ul li > .nav-link a {
    color: white;
    text-decoration: none;
}

nav ul li > a:hover::after,
nav ul li > .nav-link:hover::after {
    width: 100%;
}

/* Style spécifique pour la loupe à la fin du menu */
.search-container-li {
    list-style: none;
    display: flex;
    align-items: center;
    padding-left: 20px; /* Espace entre 'Formations' et la loupe */
    width: 60px;        /* Largeur pour s'aligner sous le bloc langue du haut */
    justify-content: center;
}

.search-link i {
    color: white !important;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s;
}

.search-link:hover i {
    color: orange !important;
}

nav .dropdown-content .submenu-title {
    background-color: transparent !important;
    color: #707070; /* Texte sombre pour lisibilité */
    padding: 10px 15px; /* Assure que le padding est le même que les liens <a> */
    cursor: default;
}

nav .dropdown-content .submenu-title:hover {
    background: rgba(255, 165, 0, 0.15); /* orange très léger */
    color: orange;
}

.has-dropdown {
    position: relative; /* 🔑 CLÉ : Le parent doit être positionné pour que le contenu se place correctement. */
    display: inline-block;
    align-items: stretch; /* 🔑 force même largeur */
}

.has-dropdown .dropdown-content {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100%;      /* 🔑 clé */
    width: max-content;
}

.has-dropdown:hover .dropdown-content {
    display: block; /* 🔑 CLÉ : Rend le contenu visible au survol du parent */
    opacity: 1;
    transform: translateY(0);
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;

    /*width: 100%;*/
    /*min-width: 100%;*/

    /* CHANGEMENTS ICI */
    width: max-content;       /* 👈 Le menu prendra la largeur de son texte le plus long */
    min-width: 200px;         /* 👈 Sécurité : au moins 200px de large */
    left: 0;                  /* Aligné à gauche du titre */

    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom-right-radius: 25px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    /*border-radius: 4px;*/
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
    overflow: hidden;
    text-align: left;
    text-transform: none; /* texte normal, pas en majuscules */

}

nav .dropdown-content a,
nav .dropdown-content a:visited {
    white-space: nowrap;      /* 👈 Empêche le texte de se couper en deux */
    color: #092851;
    padding: 12px 20px;       /* Un peu plus d'espace sur les côtés */
    /*padding: 12px 16px;*/
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
    transition: background 0.25s, color 0.25s;
}

/* ✅ modif : ne s'applique qu'aux <a> directs du dropdown, pas aux sous-menus */
.dropdown-content > a:last-child {
    border-bottom: none;
    white-space: nowrap;
    padding-right: 4rem !important;
}

nav .dropdown-content a:hover {
    /*background: rgba(255, 165, 0, 0.15); !* orange très léger *!*/
    /*background-color: #AAAAAA;*/
    color: orange;
    font-weight: 600;
}

/* Affichage dropdown au hover */
nav ul li:hover .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ==========================
   Sous-menu latéral "Commissions"
   (ouvre à droite sans élargir le menu principal)
========================== */

/* Élément parent (niveau 1 du dropdown) */
.dropdown-content .has-submenu {
    position: relative; /* nécessaire pour positionner le sous-menu à droite */
}

/* Titre du sous-menu */
.submenu-title {
    padding: 12px 16px;
    cursor: pointer;
    color: orange;
    font-weight: 600;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    position: relative;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.submenu-title:hover {
    background: rgba(255, 165, 0, 0.15); /* orange très léger */
    color: orange;
    font-weight: 600;
}

/* Petite flèche à droite */
.submenu-title::after {
    content: "▶";
    font-size: 0.8em;
    color: #777;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* Bloc du sous-menu (niveau 2) */
.submenu-dropdown {
    display: none;
    position: absolute;
    top: 0;
    left: 100%; /* ouverture à droite */
    background-color: rgba(255, 255, 255, 0.9);
    min-width: 220px;
    border: 1px solid #ddd;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
    white-space: nowrap;
}

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

/* Liens à l’intérieur du sous-menu */
.submenu-dropdown a {
    display: block;
    padding: 10px 16px;
    color: #092851;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
    background-color: rgba(255, 255, 255, 0.9);
}

.submenu-dropdown a:hover {
    background: rgba(255, 165, 0, 0.15); /* orange très léger */
    color: orange;
    font-weight: 600;
}

.dropdown-content {
    overflow: visible !important;
}

/* ==========================
   Menu-container (menu personnalisé)
========================== */

.menu-container ul {
    display: flex;
    list-style: none;
    margin: 0;
    margin-left: 230px; /* Attention : ce margin-left risque de décaler l'alignement avec le bas */
    padding: 0;
}

.menu-container li {
    position: relative;
    display: flex;
    align-items: center;
}

/* Style de base des liens */
.menu-container a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 10px 2rem; /* On met le padding ici pour que la zone cliquable et colorée soit large */
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* On cible précisément les liens du menu pour surpasser le style.css */
.menu-container ul li a,
.menu-container ul li a:visited {
    color: white !important; /* Force le texte en blanc par défaut */
    text-decoration: none;
}

/* État : Survol OU Classe active */
.menu-container ul li a:hover,
.menu-container ul li a.active {
    background-color: orange !important;
    color: white !important;
}

.menu-container .dropdown-content a,
.menu-container .dropdown-content a:visited {
    color: #0B2951 !important; /* Ton bleu foncé ici */
    background-color: white !important; /* Toujours sur fond blanc */
    text-transform: none; /* Optionnel : pour ne pas avoir tout en majuscules dans le menu */
    letter-spacing: normal;
    padding: 12px 20px !important;
    display: block !important;
    width: 100%;
}

.menu-container .dropdown-content a:hover {
    background-color: orange !important;
    color: white !important;
}
/* Suppression de l'ancien trait bleu (after) si tu n'en veux plus */
.menu-container a::after {
    display: none;
}

.has-dropdown a {
    color: #0B2951;
}
/* ===========================
            SEARCH BAR
 =============================*/
/* Le conteneur qui couvre la nav */
/* Conteneur de la barre de recherche */
.search-bar-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Hauteur fixe pour ne pas tout couvrir */
    background: #092851; /* Même couleur que ta topbar */
    z-index: 10000;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Ombre pour donner du relief */
    padding: 0 50px; /* Espace pour le bouton fermer */
}

.search-bar-nav.active {
    display: flex !important;
    animation: fadeInDown 0.3s ease-out; /* Petit effet d'apparition */
}

/* Formulaire plus large */
.search-form {
    width: 100%;
    max-width: 900px; /* Plus large sur l'écran */
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Input épais et grand */
.search-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 4px solid white; /* Bordure plus épaisse */
    color: white;
    padding: 15px 5px;
    font-size: 1.2rem; /* Texte beaucoup plus grand */
    font-weight: 600;
    outline: none;
    transition: border-color 0.3s;
}

.search-input:focus {
    border-bottom-color: #00aaff; /* Change de couleur au focus */
}

/* Icône de soumission plus grande */
.search-submit {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.search-input::placeholder {
    color: rgba(255,255,255,0.6);
}

/* Positionnement du bouton fermer */
.close-search-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 45px; /* Plus gros */
    color: white;
    cursor: pointer;
    line-height: 1;
}

.close-search-btn:hover {
    transform: scale(1.2);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* par défaut (desktop) */
.mobile-menu {
    display: none;
}

.mobile-tools {
    display: none; /* Cache le bloc sur ordinateur */
}

/* ==========================
   Menu hamburger
========================== */
.hamburger-menu {
    display: none;
    cursor: pointer;
    padding: 10px;
    margin-right: 15px;
}
.hamburger-menu .bar {
    height: 3px;
    background: white;
    margin: 4px 0;
}


/* ==========================
   Responsive (mobile & tablette)
========================== */
@media (min-width: 768px) {
    .right-container {
        display: none;
    }

    .top-bar {
        height: 8vh;
    }

    /* Barre verticale entre les liens dans nav */
    nav ul li:not(:last-child)::after {
        content: "|";
        color: white;
        position: static;
        margin: auto 0;
        padding: 0;
        margin-right: 4px;
    }

    /* Barre verticale sauf sur le dernier */
    .menu-container li:not(:last-child)::after {
        content: "|";
        color: white;
        /*margin-left: 2rem;          !* éloigne la barre du lien */
        margin:0;
        padding:0;
        padding-right:2px;
        pointer-events: none;       /* barre non cliquable */
        display: inline-block; /* pour mieux contrôler l’espace */
    }
}
@media (max-width: 768px) {
    header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;        /* Ancre à gauche */
        right: 0;       /* Ancre à droite -> remplace avantageusement le width 100% */
        max-width: 100vw;
        z-index: 2000;
        background-color: var(--color-header-bg);
        box-shadow: var(--shadow-header);
        box-sizing: border-box; /* Indispensable si tu as du padding dans le header */
        transition: transform 0.4s ease-out;
        transform: translateY(0);
    }
    /* On cache la nav desktop MAIS on laisse passer le search-bar s'il est actif */
    .desktop-nav,
    .menu-container {
        display: none !important;
    }

    /* 1. L'alignement Logo / Burger */
    .top-bar-wrapper {
        display: flex !important;
        flex-direction: row !important; /* Aligne horizontalement */
        justify-content: space-between !important; /* Pousse aux deux extrémités */
        align-items: center !important; /* Centre verticalement */

        width: 100% !important; /* Indispensable */
        max-width: 100vw !important; /* Sécurité */
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* On groupe mobile-tools et hamburger-menu à droite */
    .mobile-tools {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important; /* Espace équilibré entre Langue / Loupe / User */
        margin-left: auto;
        margin-right: 10px; /* Espace avant le burger */
        flex-shrink: 1; /* Permet au bloc de se réduire si le prénom est long */
        min-width: 0; /* Important pour que le texte puisse tronquer (ellipsis) */
    }

    /* 2. On aligne les drapeaux proprement */
    .lang-selector-mobile {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    /* 3. FORCER LA COULEUR DES ICÔNES (Loupe et User) */
    /* On cible précisément les icônes dans mobile-tools pour écraser le gris (#707070) */
    .mobile-tools a i,
    .mobile-tools a:visited i {
        color: #ffffff !important;
        font-size: 20px;
        display: block;
    }

    /* On cible spécifiquement l'icône DANS le lien de recherche mobile */
    .mobile-tools a.search-mobile-icon i,
    .mobile-tools a.search-mobile-icon:visited i {
        color: #ffffff !important;
        font-size: 20px !important;
        text-decoration: none !important;
        display: inline-block;
        opacity: 1 !important; /* Au cas où une opacité serait appliquée par erreur */
    }

    /* Espacement spécifique entre le dernier drapeau et la loupe */
    .search-mobile-icon {
        margin-left: 10px; /* Force un petit vide après le drapeau anglais */
        display: flex;
        align-items: center;
    }

    /* Effet au survol pour mobile (si on utilise une souris ou au clic) */
    .mobile-tools a.search-mobile-icon:hover i {
        color: #cbdcf0 !important; /* Un bleu très clair pour le feedback */
    }

    /* 1. On s'assure que le parent ne bloque pas l'affichage de son enfant actif */
    .desktop-nav {
        /* On ne met pas display: none, mais on réduit sa taille à 0 pour ne pas gêner */
        height: 0;
        overflow: visible;
    }

    /* 2. On force la barre de recherche à sortir du flux */
    #search-bar.search-bar-nav.active {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 8vh !important;
        background: #092851 !important; /* Bleu foncé CRAN */
        z-index: 100000 !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }

    /* 3. Style interne pour mobile */
    .search-form {
        display: flex !important;
        flex: 1;
        margin-right: 10px;
    }

    .search-input {
        width: 100%;
        height: 35px;
        border-radius: 4px;
        border: none;
        padding-left: 10px;
        font-size: 16px; /* Empêche le zoom auto iOS */
    }

    /* Le bouton de fermeture (la croix X) */
    .close-search-btn {
        color: white !important;
        font-size: 28px;
        cursor: pointer;
        padding: 5px;
    }

    /* Style des drapeaux dans ce bloc spécifique */
    .mobile-tools .lang-selector {
        display: flex;
        list-style: none;
        gap: 8px;
        padding: 0;
        margin: 0;
    }

    .mobile-tools .flag-btn {
        width: 22px;
        height: 22px;
    }

    /* Style pour l'icône dans la barre du haut */
    .mobile-user-badge {
        display: flex;
        align-items: center;
        gap: 5px; /* Espace entre l'icône et le texte "Katia" */
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6);
        padding: 4px 8px;
        border-radius: 15px;
        transition: 0.3s;
    }

    .mobile-user-badge.logged-in {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.2); /* Un léger fond pour bien voir le badge */
    }

    .mobile-user-badge i {
        font-size: 20px; /* On réduit un peu la taille de l'icône pour laisser de la place au texte */
    }

    .user-name-mobile {
        font-size: 13px;
        font-weight: 600;
        max-width: 65px; /* On limite la largeur pour ne pas pousser le burger */
        overflow: hidden;
        text-overflow: ellipsis; /* Si le prénom est trop long, on met "..." */
        white-space: nowrap;
    }

    .hamburger-menu {
        background: none;
        /*margin: 0;*/
        flex-shrink: 0 !important;
        border: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        width: 40px;
        height: 40px;
        z-index: 10001;
        cursor: pointer;
        /*overflow: visible; !* Primordial pour ne pas couper les pointes du X *!*/
    }

    .hamburger-menu .bar {
        width: 30px;
        height: 3px;
        margin: 3px 0 !important;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
        /*position: relative; !* Important pour le positionnement de la croix *!*/
    }

    /* --- ANIMATION QUAND TOP-BAR EST ACTIVE --- */

    /* L'ÉTAT CROIX */
    /* 6px (gap) + 3px (moitié de l'épaisseur des barres) = 9px environ */
    .top-bar.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .top-bar.active .bar:nth-child(2) {
        opacity: 0;
    }

    .top-bar.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }


    /* Le Menu Déroulant */
    .mobile-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px); /* Prend tout l'écran */
        background: #092851 !important;
        opacity: 1 !important;
        z-index: 500;
        overflow-y: auto; /* Permet de scroller dans le menu */
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .top-bar.active .mobile-menu {
        display: block;
    }

    /* Nettoyage des listes injectées par $menuHtml */
    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .mobile-menu .nav-link, .mobile-menu a {
        padding: 18px 20px;
        color: white;
        display: block;
        font-size: 16px; /* Plus lisible sur mobile */
        text-align: left;
    }

    /* --- NIVEAU 1 : DROPDOWN PRINCIPAL --- */
    /* On force le display à none même si on "survole" avec le doigt */
    .has-submenu:hover > .submenu-dropdown,
    .has-dropdown:hover > .dropdown-content {
        display: none !important;
    }

    .mobile-menu .has-dropdown .dropdown-content {
        display: none; /* Caché par défaut */
        background-color: #0b3366;
        width: 100%;
        position: static !important;
        opacity: 0;
        visibility: hidden;
    }

    /* 1. On cache TOUS les menus par défaut en mobile */
    .has-dropdown .dropdown-content {
        display: none;
        opacity: 0;
        visibility: hidden;
        position: static !important; /* Pour que le menu pousse le contenu vers le bas */
    }

    /* Affichage quand actif */
    .mobile-menu .has-dropdown.mobile-active > .dropdown-content {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        position: static !important; /* Très important en mobile pour pousser le contenu */
        visibility: visible !important;
    }

    .dropdown-content {
        overflow-y: visible; /* Important */
    }

    .has-submenu .submenu-dropdown {
        position: static; /* Au lieu de absolute */
        display: none;    /* Caché par défaut */
        width: 100%;
        padding-left: 20px; /* Décalage pour l'esthétique */
    }

    .has-submenu .submenu-dropdown a {
        color: #0B2951 !important;
    }

    /* Affichage quand on ajoute une classe via JS */
    .mobile-menu .has-submenu.is-open > .submenu-dropdown {
        display: block !important;
    }

    /* S'assurer que le logo est au-dessus du menu si nécessaire */
    .logo-container {
        /* On annule le translate du desktop */
        transform: none !important;
        flex-shrink: 0; /* Empêche le logo de s'écraser */
        display: flex;
        align-items: center;
        margin: 0;
        padding-left: 10px;
        max-width: 50% !important;
        position: relative;
    }

    .logo-container img {
        height: 35px;
        width: auto;
        display: block; /* Évite les décalages */
        max-width: 180px; /* Limite la largeur pour les petits écrans style iPhone SE */
        object-fit: contain;
    }

    /* Éviter que les liens soient écrasés */
    .mobile-menu li a, .mobile-menu .nav-link {
        color: white !important;
        font-weight: 500;
    }

    .submenu-title {
        color: white !important;
    }

    /* 4. Animation de la petite flèche sur le titre "Commissions" */
    .mobile-menu .submenu-title::after {
        content: '▾';
        position: absolute;
        right: 20px;
        transition: transform 0.3s ease;
    }

    .mobile-menu .has-submenu.is-open .submenu-title::after {
        transform: rotate(180deg); /* La flèche se retourne quand c'est ouvert */
    }

    /* La Loupe */
    .search-container-li {
        list-style: none;
        display: flex;
        align-items: center;
        padding-left: 0;      /* On retire le padding gauche pour coller au bord */
        width: auto;         /* 'auto' est mieux que 60px pour éviter de forcer un centrage */
        justify-content: flex-start; /* Aligne l'icône à gauche du conteneur */
    }

    /* Le Sélecteur de langue */
    .lang-selector {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Aligne les drapeaux à gauche */
        margin-left: 20px;           /* Espace constant par rapport au menu précédent */
        gap: 10px;                   /* Espace entre les deux drapeaux */
    }
}


/* ==========================
   Responsive (PC et tablettes larges)
========================== */


/* Pour les très grands écrans (4K etc.) */
@media (min-width: 1920px) {
    .top-bar,
    nav {
        height: var(--height-bar-4k); /* hauteur fixe confortable */
    }
}