/* ==========================================================================
   Header adaptatif.

   - La barre supérieure porte le badge adhérent (déconnexion) : elle n'est
     rendue que pour un utilisateur connecté, à toutes les largeurs.
   - header-responsive.js mesure la ligne principale et resserre le menu quand
     il déborde : .header--tight (items resserrés) puis .header--tighter
     (logo réduit).
   (Le build Vite/Tailwind étant indisponible, on surcharge en CSS simple.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ligne principale : passage en flex sur desktop pour que le menu occupe
   réellement la place libre, au lieu d'être enfermé dans 6 colonnes sur 12
   et de déborder sur le sélecteur de langue.
   -------------------------------------------------------------------------- */
@media (min-width: 1240px) {
    header.header .main-header {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    header.header .main-header > .burger-container,
    header.header .main-header > .header-actions {
        flex: 0 0 auto;
        width: auto;
    }
    header.header .main-header > .header-mobile {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Repli si le JS n'a pas pu s'exécuter : compactage du menu par media query. */
@media (min-width: 1240px) {
    header.header:not([data-bk-fit]) .header-menu {
        gap: 0 !important;
    }
    header.header:not([data-bk-fit]) .header-menu > .menu-item {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }
}

/* --------------------------------------------------------------------------
   Barre supérieure : affichée seulement quand le badge adhérent y est basculé.
   -------------------------------------------------------------------------- */
.header-topbar {
    display: none;
    position: relative;
    z-index: 6; /* sous l'overlay du menu mobile (z-10) */
    background: #f8f8f8;
    border-bottom: 1px solid #d0d0d0;
}
.header--topbar .header-topbar {
    display: block;
}
@media (min-width: 1240px) {
    .header-topbar {
        z-index: 30;
    }
}

.header-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-height: 38px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Le badge y est toujours visible, y compris sur mobile, et sans la marge qui
   le séparait du sélecteur de langue dans la ligne principale. */
.header-topbar .ea-userbadge {
    display: flex;
    margin-left: 0;
}
.header-topbar .ea-userbadge-logout {
    display: inline;
}

/* --------------------------------------------------------------------------
   Sélecteur de langue : toujours dans la ligne principale, auprès du menu.
   Sur les petits écrans, le logo cède la hauteur nécessaire pour qu'il tienne
   à côté du burger plutôt que de disparaître.
   -------------------------------------------------------------------------- */
.header-lang {
    display: block;
}
@media (max-width: 459px) {
    header.header .main-header .burger-container img {
        height: 56px;
    }
    header.header .main-header .burger-menu {
        margin-left: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Paliers de compactage du menu (desktop uniquement).
   -------------------------------------------------------------------------- */
@media (min-width: 1240px) {
    .header--tight .main-header .header-menu {
        gap: 0 !important;
    }
    .header--tight .main-header .header-menu > .menu-item {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        font-size: 15px;
    }
    .header--tight .main-header .header-menu > .menu-item > a svg {
        width: 1.15rem;
        height: 1.15rem;
        margin-right: 0.35rem;
    }
    .header--tight .main-header .header-menu.last-item-is-btn > .menu-item:last-child {
        margin-left: 0.5rem;
        font-size: 15px;
    }
    .header--tight .main-header .header-menu.last-item-is-btn > .menu-item:last-child > a {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Palier suivant : le logo cède un peu de hauteur pour libérer sa largeur. */
    .header--tighter .main-header .burger-container img {
        height: 60px;
    }
    .header--tighter .main-header .header-menu > .menu-item {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }
}

/* --------------------------------------------------------------------------
   Accueil : au défilement, la ligne principale devient fixe. La barre
   supérieure doit la suivre, et le décalage se fait sur sa hauteur réelle
   (--bk-topbar-h, posée par le script).
   -------------------------------------------------------------------------- */
.home .header.active-scroll.header--topbar .header-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 41;
}
.home .header.active-scroll.header--topbar .main-header {
    top: var(--bk-topbar-h, 0px);
}