/* =========================================================
   TOP BAR — responsive mobile / tablette
   Règles déplacées depuis topbar.css sans modification visuelle.
   ========================================================= */

@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 */
    }

    .dropdown-header {
        display: block;
        padding: 8px 15px 5px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        pointer-events: none;
    }

    .dropdown-content hr {
        border: 0;
        border-top: 1px solid #e5e5e5;
        margin: 6px 0;
    }

    .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 */
    }
}