/* ══════════════════════════════════════════
   GAS Site Header — Frontend
   Tokens: gas-design-tokens.css
   ══════════════════════════════════════════ */

.gas-site-header {
    /* ── Header global ── */
    --_header-panel-bg: var(--gas-color-surface-card, var(--gas-bg-surface, #fff));
    --_header-control-bg: var(--gas-color-surface-card, var(--gas-bg-surface, #fff));
    --_header-bg: var(--gas-site-header-bg, rgba(255, 255, 255, 0.97));
    --_header-border: var(--gas-color-border-default, var(--gas-border-color));
    --_header-text: var(--gas-color-text-default, var(--gas-text-color));
    --_header-muted: var(--gas-color-text-muted, var(--gas-text-color-muted));
    --_header-hover-bg: var(--gas-color-surface-muted, var(--gas-neutral-100));
    --_header-shadow: var(--gas-shadow-s);
    --_logo-w: var(--gas-site-logo-width, 220px);
    --_logo-h: var(--gas-site-logo-height, 72px);

    /* ── Nav links (surchargeables via inline style) ── */
    --_nav-color: var(--_header-text);
    --_nav-hover-color: var(--gas-primary);
    --_nav-hover-bg: var(--_header-hover-bg);
    --_nav-active-color: var(--gas-primary);
    --_nav-active-bg: var(--gas-primary-ultra-light);

    /* ── Member mega ── */
    --_member-color: var(--_header-text);
    --_member-hover-color: var(--gas-primary);
    --_member-hover-bg: var(--_header-hover-bg);
    --_member-active-color: var(--gas-primary);
    --_member-active-bg: var(--gas-primary-ultra-light);

    /* ── CTA primary ── */
    --_cta-primary-bg: var(--gas-button-primary-bg);
    --_cta-primary-color: var(--gas-button-primary-color);
    --_cta-primary-hover-bg: var(--gas-button-primary-bg-hover);

    /* ── CTA secondary ── */
    --_cta-secondary-bg: transparent;
    --_cta-secondary-color: var(--gas-primary);
    --_cta-secondary-hover-bg: var(--gas-primary-ultra-light);

    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    color: var(--_header-text);
    font-family: var(--gas-font-family);
    box-sizing: border-box;
}

/* Responsive structurel opt-in. Le breakpoint JS/mobile historique reste la
   source de vérité pour l'ouverture du drawer; ces presets n'agissent que sur
   la composition disponible avant ce basculement. */
.gas-responsive-surface--header {
    container-type: inline-size;
    container-name: gas-header-responsive;
}

@container gas-header-responsive (max-width: 1280px) {
    .gas-responsive-surface--preset-balanced_navigation .gas-site-header__row--has-branding {
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
        column-gap: var(--gas-space-m);
    }

    .gas-responsive-surface--preset-balanced_navigation :is(.gas-site-menu--primary, .gas-site-menu--gas) {
        justify-content: flex-end;
        gap: 0;
    }

    .gas-responsive-surface--preset-balanced_navigation :is(.gas-site-menu__link, .gas-site-menu__trigger) {
        padding-inline: var(--gas-space-xs);
    }
}

@container gas-header-responsive (max-width: 1180px) {
    .gas-responsive-surface--preset-compact_navigation .gas-site-header__row {
        column-gap: var(--gas-space-s);
    }

    .gas-responsive-surface--preset-compact_navigation :is(.gas-site-menu__link, .gas-site-menu__trigger) {
        min-height: 30px;
        padding-inline: 2px;
        font-size: var(--gas-text-xs);
    }
}

:root[data-theme="dark"] .gas-site-header {
    --_header-bg: var(--gas-site-header-bg-dark, var(--_header-panel-bg));
    --_nav-hover-color:       var(--gas-primary-light);
    --_nav-active-color:      var(--gas-primary-light);
    --_member-hover-color:    var(--gas-primary-light);
    --_member-active-color:   var(--gas-primary-light);
    --_cta-primary-bg:        var(--gas-primary-light);
    --_cta-primary-hover-bg:  var(--gas-primary-light);
    --_cta-primary-color:     var(--gas-color-on-primary);
    --_cta-secondary-color:   var(--gas-text-color-link);
    --_cta-secondary-hover-bg: var(--_header-hover-bg);
}

.gas-site-header *,
.gas-site-header *::before,
.gas-site-header *::after {
    box-sizing: border-box;
}

.gas-site-header--static {
    position: relative;
}

.gas-site-header--document {
    display: block;
    inline-size: 100%;
    min-inline-size: 100%;
}

.gas-site-header__document {
    display: block;
    inline-size: 100%;
}

/* Le tiroir est toujours présent dans le markup (surface unique par header),
   mais il ne s'affiche que là où le menu se replie : sous le point de rupture
   (media query plus bas) ou en `collapse_mode: always`. Défaut = pas de tiroir. */
.gas-site-header__document-drawer {
    display: none;
}

.gas-site-header__document > .gas-block-anchor,
.gas-site-header__document > .gas-block-anchor > .gas-block-section {
    inline-size: 100%;
}

.gas-site-header--document {
    background: var(--gas-color-surface-card, #fff);
    box-shadow: var(--gas-shadow-s, 0 1px 8px rgba(15, 23, 42, 0.08));
    /* Sticky par défaut (comme le header rows). position:relative cassait le
       sticky sur les sites Document (emmanuelsilvy one-pager). L'opt-out reste
       la classe --static posée quand settings.sticky = false. */
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Air entre le header et le contenu de la page. Défaut 0 : aucun site existant
   ne bouge tant que le réglage n'est pas renseigné. */
.gas-site-header--document {
    margin-bottom: var(--_header-margin-bottom, 0);
}

/* Bande épinglée : le header colle avec un décalage NÉGATIF, égal à la hauteur
   cumulée des bandes visuellement au-dessus de la bande épinglée (calculée par
   `initStickyBand()` dans gas-site-header.js, elle n'est pas connue en CSS).
   Ces bandes défilent donc hors de l'écran et la bande épinglée s'immobilise
   pile en haut. Poser `position: sticky` sur la bande elle-même ne marcherait
   pas : le collage serait borné par la boîte du header.
   Sans JS, `--_header-sticky-top` vaut 0 et on retombe sur un header épinglé
   entier — dégradation acceptable, rien ne disparaît. */
.gas-site-header--document.is-band-sticky {
    position: sticky;
    top: var(--_header-sticky-top, 0);
}

/* L'épinglage par bande prime sur l'opt-out global : demander une bande
   épinglée sur un header non épinglé est une demande cohérente, c'est même le
   seul cas où la fonctionnalité a un sens. */
.gas-site-header--document.gas-site-header--static.is-band-sticky {
    position: sticky;
}

.gas-site-header--document.gas-site-header--static {
    position: relative;
}

/* ── Header Document : une bande recouvre les bandes SUIVANTES ─────────────
   Un panneau (sous-menu, menu compte) s'ouvre vers le bas et déborde donc sur
   la bande d'en dessous. Or chaque section porte `isolation: isolate` : c'est
   un contexte d'empilement en `z-index: auto`, où seul l'ordre du DOM décide —
   la bande 2 recouvre le déroulant de la bande 1. Donner un rang explicite
   DÉCROISSANT aux bandes règle le cas quel que soit leur nombre. Vécu deux
   fois : le déroulant « L'Association » passait sous le bouton voisin, puis
   sous la bande de service. */
.gas-site-header__document > * {
    position: relative;
}
.gas-site-header__document > *:nth-child(1) { z-index: 40; }
.gas-site-header__document > *:nth-child(2) { z-index: 30; }
.gas-site-header__document > *:nth-child(3) { z-index: 20; }
.gas-site-header__document > *:nth-child(4) { z-index: 10; }

/* ── Header Document : sous-menus au-dessus des blocs voisins ──────────────
   La règle globale `[data-block-type] { container-type: inline-size }` applique
   `contain: layout` à CHAQUE racine de bloc, ce qui en fait un contexte
   d'empilement autonome. Deux blocs frères s'empilent alors dans l'ordre du DOM :
   un bouton placé après le menu se peint AU-DESSUS de son sous-menu déroulant,
   quel que soit le z-index interne du sous-menu. Vécu : le déroulant de
   « L'Association » passait sous le bouton « Devenir membre ».
   On donne donc un rang explicite aux blocs qui ouvrent un panneau. */
.gas-site-header__document .gas-block-site-menu,
.gas-site-header__document .gas-block-site-member-mega,
.gas-site-header__document .gas-block-site-account,
.gas-site-header__document .gas-block-site-application,
.gas-site-header__document .gas-block-nav-mega {
    position: relative;
    z-index: 5;
}

/* Groupes / colonnes du header Document : un panneau absolute (nav_mega,
   sous-menus) doit pouvoir déborder sans être découpé ni pousser le layout. */
.gas-site-header__document .gas-block-group,
.gas-site-header__document .gas-block-group__item,
.gas-site-header__document .gas-block-section__column {
    overflow: visible;
}

/* ── Header Document : les boutons suivent l'habillage CTA du header ───────
   Le builder rows habillait ses CTA via `.gas-site-header__cta-group` (couleurs
   configurées pour le header + adaptation au thème sombre). Les blocs `button`
   n'étaient pas dans ce conteneur et retombaient sur les couleurs génériques du
   design system — un CTA secondaire passait ainsi d'un bouton fantôme
   transparent à un aplat de couleur secondaire. Même habillage ici. */
.gas-site-header__document .gas-button--primary {
    background: var(--_cta-primary-bg);
    color: var(--_cta-primary-color);
    border-color: var(--_cta-primary-bg);
}

.gas-site-header__document .gas-button--primary:hover {
    background: var(--_cta-primary-hover-bg);
    border-color: var(--_cta-primary-hover-bg);
}

.gas-site-header__document .gas-button--secondary,
.gas-site-header__document .gas-button--outline {
    background: var(--_cta-secondary-bg);
    color: var(--_cta-secondary-color);
    border-color: var(--_cta-secondary-color);
}

.gas-site-header__document .gas-button--secondary:hover,
.gas-site-header__document .gas-button--outline:hover {
    background: var(--_cta-secondary-hover-bg);
}

.gas-site-header__document .gas-button--link {
    /* Lien texte : pas de bordure/fond (contrairement à outline/secondary). */
    background: transparent;
    border-color: transparent;
    border-width: 0;
    box-shadow: none;
    color: var(--_cta-secondary-color, var(--gas-text-color-link, var(--gas-primary)));
    text-decoration: none;
}

.gas-site-header__document .gas-button--link:hover {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
}

.gas-site-header--document .gas-block-anchor,
.gas-site-header--document .gas-block-section {
    margin-block: 0;
}

.gas-site-header--document .gas-block-section {
    max-width: none;
    overflow: visible;
    /* Un cran plus compact que space-s : le bas du menu ne « flotte » plus. */
    padding-block: var(--gas-space-2xs, 4px);
}

.gas-site-header--document .gas-block-section__inner {
    gap: 0;
    max-width: min(100%, var(--gas-wide-max-width, 1180px));
    padding-inline: var(--gas-space-l, 24px);
}

.gas-site-header--document .gas-block-section__grid {
    align-items: center;
}

/* …sauf dans un panneau `nav_mega` : centrer verticalement se justifie pour une
   BANDE de header (logo et menu sur un même axe), pas pour un panneau à colonnes
   de contenu. Des colonnes de hauteurs différentes s'y décalaient en escalier —
   les trois titres du mega « Devenir membre » démarraient à 74, 104 et 117 px.
   Elles doivent partir du même bord haut. */
.gas-site-header--document .gas-block-nav-mega__panel .gas-block-section__grid {
    align-items: start;
}

.gas-site-header--document .gas-block-site-branding--inline .gas-block-site-branding__link {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.gas-site-header--document .gas-block-site-branding__name {
    color: var(--gas-color-text-strong, var(--gas-color-text, #1f2937));
    font-size: clamp(18px, 1.6vw, 23px);
    line-height: 1.05;
    max-width: 13.5em;
}

.gas-site-header--document .gas-block-site-branding__tagline {
    color: var(--gas-color-text-muted, #64748b);
    font-size: var(--gas-text-s, 13px);
    line-height: 1.35;
}

.gas-site-header--document .gas-block-link-list--inline .gas-block-link-list__items,
.gas-site-header--document .gas-block-site-menu--inline .gas-block-site-menu__list {
    flex-wrap: nowrap;
}

.gas-site-header--document .gas-block-link-list--inline .gas-block-link-list__items {
    justify-content: flex-end;
}

@media (max-width: 768px) {
    /* Le nowrap ci-dessus est une intention desktop (liens utilitaires sur
     * une seule ligne, alignés à droite). En mobile, une liste plus large
     * que sa colonne déborde des deux côtés de l'écran (mesuré sur aph :
     * lien « Panier » à 6px du bord) — on laisse les items passer à la
     * ligne, alignement conservé. */
    .gas-site-header--document .gas-block-link-list--inline .gas-block-link-list__items {
        flex-wrap: wrap;
    }
}

/* Barre utilitaire du header Document : les blocs de parité (compte, panier,
   badges, langue, thème, application) partagent la typographie compacte du
   link_list. Sans cette règle ils héritent du corps de texte (16 px) et la
   barre mélange deux tailles — vu sur le header APH lors de la migration. */
.gas-site-header--document .gas-block-link-list__link,
.gas-site-header--document .gas-block-site-account__link,
.gas-site-header--document .gas-block-site-application__link,
.gas-site-header--document .gas-block-site-language-switcher__link,
.gas-site-header--document .gas-block-site-cart-badge,
.gas-site-header--document .gas-block-site-notification-badge,
.gas-site-header--document .gas-block-site-theme-toggle__choice {
    font-size: var(--gas-text-xs, 12px);
    font-weight: var(--gas-weight-semi, 600);
    line-height: 1.2;
    white-space: nowrap;
}

/* La règle ci-dessus vise la barre utilitaire compacte. Le bloc compte se pose
   aussi dans une bande de contenu, à côté d'un bouton — il y paraît alors
   minuscule (11,5 px contre 16 px, vu sur aph). Le champ `size` reprend la main :
   il doit donc gagner sur le défaut compact, d'où la spécificité ajoutée. */
.gas-site-header--document .gas-block-site-account--size-s .gas-block-site-account__link {
    font-size: var(--gas-text-s, 14px);
}

.gas-site-header--document .gas-block-site-account--size-m .gas-block-site-account__link {
    font-size: var(--gas-text-m, 16px);
}

.gas-block-site-account__icon {
    flex: 0 0 auto;
}

/* …sauf quand le badge accompagne des voisins « bouton / menu » plutôt qu'une
   barre utilitaire pure : posé dans le même `group` qu'un `site_menu`, un
   `nav_mega` ou un `gas-button`, il doit partager leur axe optique. Sans cela
   il sortait plus petit et ~4 px trop haut — mesuré sur assp (panier entre
   « Se connecter » et « Devenir membre », mid 16 vs 20). */
.gas-site-header--document .gas-block-group:has(.gas-block-site-menu) .gas-block-site-cart-badge,
.gas-site-header--document .gas-block-group:has(.gas-block-site-menu) .gas-block-site-notification-badge,
.gas-site-header--document .gas-block-group:has(.gas-block-nav-mega) .gas-block-site-cart-badge,
.gas-site-header--document .gas-block-group:has(.gas-block-nav-mega) .gas-block-site-notification-badge,
.gas-site-header--document .gas-block-group:has(.gas-button) .gas-block-site-cart-badge,
.gas-site-header--document .gas-block-group:has(.gas-button) .gas-block-site-notification-badge {
    box-sizing: border-box;
    font-size: var(--gas-text-s, 13px);
    font-weight: var(--gas-weight-semi, 600);
    line-height: 1.2;
    min-height: 30px;
    padding-block: 0;
    align-items: center;
}

/* Les wrappers group__item > anchor ne sont pas flex : un enfant plus bas
   que le voisin n'est pas recentré par align-items du parent group seul
   (l'item prend la hauteur du contenu et le flex centre l'item, pas le
   contenu interne de l'anchor). */
.gas-site-header--document .gas-block-group--align-center > .gas-block-group__item {
    display: flex;
    align-items: center;
}

.gas-site-header--document .gas-block-link-list__link--accent,
.gas-site-header--document .gas-block-link-list__link--primary {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--gas-color-accent, var(--gas-accent, #c56f38)) 22%, transparent);
    font-weight: var(--gas-weight-bold, 700);
    letter-spacing: 0;
    min-height: 34px;
    padding-inline: var(--gas-space-m, 12px);
}

.gas-site-header--document .gas-block-link-list__link--accent {
    background: var(--gas-color-accent, var(--gas-accent, #c56f38));
    color: var(--gas-text-color-inverse, #fff);
}

.gas-site-header--document .gas-block-link-list__link--accent:hover,
.gas-site-header--document .gas-block-link-list__link--accent:focus-visible {
    background: var(--gas-accent-dark, #9f5527);
    color: var(--gas-text-color-inverse, #fff);
    outline: 2px solid color-mix(in srgb, var(--gas-color-accent, var(--gas-accent, #c56f38)) 45%, transparent);
    outline-offset: 2px;
}

.gas-site-header--document .gas-block-link-list__icon {
    display: none;
}

/* …SAUF dans un panneau `nav_mega` : une liste illustrée y est le propos.
   Ces règles vivent ici et non dans gas-blocks.css parce qu'elles annulent des
   règles du header — à spécificité égale, gas-site-header.css étant chargé en
   dernier, une surcharge posée côté bloc ne gagnerait jamais. */
.gas-site-header--document .gas-block-nav-mega__panel-inner .gas-block-link-list__icon {
    align-items: center;
    color: var(--gas-color-primary, var(--gas-primary, #0f766e));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.1em;
}

.gas-site-header--document .gas-block-nav-mega__panel-inner .gas-block-link-list__link {
    align-items: start;
    font-size: var(--gas-text-s, 13px);
    font-weight: var(--gas-weight-regular, 400);
    gap: var(--gas-space-xs, 8px);
    line-height: 1.4;
    min-height: 0;
    padding: 0;
    white-space: normal;
}

.gas-site-header--document .gas-block-site-menu--inline .gas-block-site-menu__list {
    gap: 2px;
    /* Défaut : coller à droite (menu unique / demi-gauche d’un logo centré). */
    justify-content: flex-end;
}

/* Logo centré en 3 colonnes : demi-droite du menu collée AU logo (flex-start),
   pas au bord droit de la colonne — sinon le menu de droite s’éloigne / se
   rapproche de façon asymétrique par rapport au menu de gauche. */
.gas-site-header--document .gas-block-section__column:last-child .gas-block-site-menu--inline .gas-block-site-menu__list,
.gas-site-header--document .gas-block-group--justify-start .gas-block-site-menu--inline .gas-block-site-menu__list {
    justify-content: flex-start;
}

.gas-site-header--document .gas-block-section--cols-1 .gas-block-site-menu--inline .gas-block-site-menu__list,
.gas-site-header--document .gas-block-section--cols-1 .gas-block-link-list--inline .gas-block-link-list__items {
    justify-content: center;
}

.gas-site-header--document .gas-block-section--cols-2 .gas-block-section__column:first-child .gas-block-link-list--inline .gas-block-link-list__items {
    justify-content: flex-start;
}

.gas-site-header--document .gas-block-site-menu__item {
    position: relative;
}

.gas-site-header__document-toggle,
.gas-site-header__document-overlay,
.gas-site-header__document-drawer-head {
    display: none;
}

.gas-site-header--document .gas-block-site-menu__item.has-children {
    align-items: center;
    display: inline-flex;
}

.gas-site-header--document .gas-block-site-menu__submenu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--gas-radius-s, 6px);
    color: var(--gas-color-text-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    height: 36px;
    justify-content: center;
    margin-inline-start: -6px;
    padding: 0;
    width: 24px;
}

.gas-site-header--document .gas-block-site-menu__submenu-toggle:hover,
.gas-site-header--document .gas-block-site-menu__submenu-toggle:focus-visible {
    background: var(--gas-color-surface-muted, var(--gas-neutral-100, #f3f4f6));
    color: var(--gas-primary, #0f766e);
    outline: none;
}

.gas-site-header--document .gas-block-site-menu__submenu-toggle span {
    transition: transform var(--gas-transition-fast, 120ms ease);
}

.gas-site-header--document .gas-block-site-menu__item.is-open > .gas-block-site-menu__submenu-toggle span,
.gas-site-header--document .gas-block-site-menu__item:hover > .gas-block-site-menu__submenu-toggle span,
.gas-site-header--document .gas-block-site-menu__item:focus-within > .gas-block-site-menu__submenu-toggle span {
    transform: rotate(180deg);
}

.gas-site-header--document .gas-block-site-menu__link {
    border-radius: var(--gas-radius-s, 6px);
    color: var(--gas-color-text, #1f2937);
    font-size: var(--gas-text-s, 13px);
    font-weight: var(--gas-weight-semi, 600);
    line-height: 1.2;
    min-height: 36px;
    padding: 7px 9px;
    white-space: nowrap;
}

.gas-site-header--document .gas-block-site-menu__link:hover,
.gas-site-header--document .gas-block-site-menu__item:focus-within > .gas-block-site-menu__link,
.gas-site-header--document .gas-block-site-menu__item.is-open > .gas-block-site-menu__link {
    background: var(--gas-color-surface-muted, var(--gas-neutral-100, #f3f4f6));
    color: var(--gas-primary, #0f766e);
    text-decoration: none;
}

/* Entrée courante — page active, ou section lue en scrollspy (`is-current` posé
   par le JS). Mêmes variables que le markup rows : chaque site hérite ainsi des
   couleurs qu'il a déjà réglées dans l'admin du header (styles.nav_active_bg /
   nav_active_color), sans une ligne de CSS par tenant. Le bloc Document n'avait
   aucun style d'entrée courante — trou de parité, comblé ici. */
.gas-site-header--document .gas-block-site-menu__item.is-current > .gas-block-site-menu__link,
.gas-site-header--document .gas-block-site-menu__link[aria-current] {
    background: var(--_nav-active-bg);
    color: var(--_nav-active-color);
}

/* Le marquage suit le défilement : sans transition il clignote d'une section à
   l'autre. Respecte le réglage système de réduction des animations. */
@media (prefers-reduced-motion: no-preference) {
    .gas-site-header--document .gas-block-site-menu__link {
        transition: background var(--gas-transition-fast, 120ms ease),
            color var(--gas-transition-fast, 120ms ease);
    }
}

.gas-site-header--document .gas-block-site-menu__sublist {
    background: var(--gas-color-surface-card, #fff);
    border: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
    border-radius: var(--gas-radius-m, 8px);
    box-shadow: var(--gas-shadow-m, 0 10px 25px rgba(15, 23, 42, 0.12));
    display: grid;
    gap: 2px;
    left: 0;
    min-width: 220px;
    opacity: 0;
    padding: var(--gas-space-xs, 6px);
    pointer-events: none;
    position: absolute;
    top: calc(100% + 4px);
    transform: translateY(4px);
    transition: opacity var(--gas-transition-fast, 120ms ease), transform var(--gas-transition-fast, 120ms ease), visibility var(--gas-transition-fast, 120ms ease);
    visibility: hidden;
    z-index: 60;
}

.gas-site-header--document .gas-block-site-menu__item:hover > .gas-block-site-menu__sublist,
.gas-site-header--document .gas-block-site-menu__item:focus-within > .gas-block-site-menu__sublist,
.gas-site-header--document .gas-block-site-menu__item.is-open > .gas-block-site-menu__sublist {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

/* Pont invisible : couvre le gap item↔sous-menu (top: 100% + 4px) pour que la souris
   ne perde pas le :hover en descendant. Le ::before est un descendant de l'item (via le
   sublist) → le survoler garde l'item en :hover. Actif quand le sublist est visible. */
.gas-site-header--document .gas-block-site-menu__item > .gas-block-site-menu__sublist::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 8px;
}

.gas-site-header--document .gas-block-site-menu__sublist .gas-block-site-menu__link {
    display: flex;
    justify-content: flex-start;
    min-height: 32px;
    width: 100%;
}

/* ══ Burger — placement `inline` (réglage burger_placement) ═════════════════
   Hôte flex créé par le renderer UNIQUEMENT quand l'injection réussit
   (`injectInlineBurgerToggle()`) : logo + burger y sont posés côte à côte, en
   flux, sans toucher au reste de la bande (le CTA voisin par exemple). Actif à
   toute largeur — c'est `data-nav-collapse` et la media query 900px qui
   décident déjà si le burger est visible, pas cette règle. */
.gas-site-header__burger-inline-host {
    align-items: center;
    display: flex;
    gap: var(--gas-space-s, 8px);
}

/* `site_branding` imbrique lui-même un `display:flex; flex-direction:column`
   (`.gas-block-site-branding__link`). Posé comme item d'un flex EXTÉRIEUR
   (l'hôte ci-dessus), son calcul de taille de contenu (`max-content`/`auto`)
   résout à 0 au lieu de la taille réelle du nom du site — confirmé par un test
   direct `width: max-content !important` qui rend 0px alors que le texte
   fait 56px de large : ce n'est pas un problème de spécificité CSS, c'est
   l'algorithme d'intrinsic-sizing du navigateur qui ne redescend pas
   correctement dans un flex `column` imbriqué. Le logo se met alors à déborder
   par-dessus le burger au lieu de lui laisser sa place. `display: table` fait
   passer `.gas-block-site-branding` par l'algorithme de shrink-to-fit des
   tableaux (mesuré : largeur exacte du contenu, 56px) — `inline-block`, qui
   utilise la même famille d'algorithme que `max-content`, reproduit le même
   bug à 0px et ne convient donc pas. `flex-shrink: 0` seul ne suffit pas non
   plus : le problème est la taille DE BASE (flex-basis), pas le rétrécissement.
   `display: table` reste blockifié comme item de l'hôte flex (spec CSS
   Display) : la mise en page du parent n'en est pas affectée, seul le calcul
   de largeur intrinsèque de ce bloc change. */
.gas-site-header__burger-inline-host > .gas-block-site-branding {
    display: table;
    flex-shrink: 0;
}

/* ── Mode Document : bloc mobile, seuil FIXE à 900px ──────────────────────────
   Contrairement au chemin legacy rows, ce seuil n'est PAS piloté par
   `header_runtime.mobile_breakpoint` (standard|tablet|wide → 1100/1280/1440,
   media queries additives `--mbp-*` plus bas, sélecteurs `__row` uniquement).
   Paramétrer ce bloc exigerait de le dupliquer en trois variantes scopées
   (~420 lignes ×2) : refusé tant qu'aucun besoin réel ne le justifie.
   La valeur est déclarée côté PHP (GasSiteHeaderRenderer::
   DOCUMENT_MOBILE_BREAKPOINT_PX) et émise en `data-nav-breakpoint-px` : le JS
   la lit de là, aucun littéral 900 ne doit réapparaître ailleurs. */
@media (max-width: 900px) {
    body.gas-site-header-document-drawer-open {
        overflow: hidden;
    }

    .gas-site-header--document {
        z-index: var(--gas-z-sticky, 100);
    }

    .gas-site-header--document .gas-block-section {
        padding-block: var(--gas-space-xs, 6px);
    }

    .gas-site-header--document .gas-block-section__inner {
        padding-inline: var(--gas-space-m, 16px);
    }

    .gas-site-header--document .gas-block-section__grid {
        gap: var(--gas-space-xs, 6px);
    }

    .gas-site-header--document .gas-block-site-branding {
        padding-inline-end: 52px;
    }

    .gas-site-header--document .gas-block-site-branding__name {
        font-size: 18px;
        max-width: 18em;
    }

    .gas-site-header--document .gas-block-site-branding__tagline {
        font-size: 12px;
    }

    .gas-site-header--document {
        --_doc-toggle-size: 40px;
        --_doc-toggle-gap: 8px;
    }

    /* La bande du LOGO doit être au moins aussi haute que le burger qui se pose
       dessus. C'est elle la cible, pas le header : grandir le header laisserait la
       bande courte et le burger centré retomberait hors d'elle (mesuré).
       Sans cette réserve, aucun ancrage ne peut s'en sortir — centrer un bloc de
       40px dans une boîte de 27px le fait déborder des deux côtés. Le cas se
       produit dès qu'une bande de logo n'a pas de rembourrage (logo texte).
       Ne touche QUE les bandes déjà trop courtes pour héberger leur propre burger.
       Réduire le burger serait l'autre option : refusée, 40px est déjà sous la
       cible tactile recommandée. */
    .gas-site-header__document > *:has(.gas-block-site-branding) {
        min-height: calc(var(--_doc-toggle-size) + 2 * var(--_doc-toggle-gap));
    }

    .gas-site-header__document-toggle {
        align-items: center;
        background: var(--gas-color-surface-card, #fff);
        border: 1px solid var(--gas-color-border-default, var(--gas-color-border, #d7dde8));
        border-radius: var(--gas-radius-m, 8px);
        box-shadow: var(--gas-shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.08));
        color: var(--gas-color-text, #1f2937);
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        gap: 4px;
        height: var(--_doc-toggle-size, 40px);
        justify-content: center;
        padding: 0;
        position: absolute;
        right: var(--gas-space-m, 16px);
        /* Le repère du burger est la bande du LOGO — c'est là que la place lui est
           réservée (`site-branding { padding-inline-end: 52px }` plus bas), et c'est
           le seul point d'ancrage qui ait un sens visuel. Surtout pas la bande du
           MENU : en mobile le menu est un drawer `position:fixed`, sa bande peut
           donc être haute de 8 px (vu sur le header symétrique d'assp).
           Un `top` en dur, lui, suppose une seule bande au-dessus : avec deux bandes
           (barre utilitaire + promo école) ou une barre qui passe sur deux lignes,
           le burger tombait en plein sur le CTA « Devenir membre » et le rendait
           incliquable. On ancre donc du côté où se trouve réellement le logo.
           Défaut = logo dans la dernière bande (barres de service au-dessus). */
        bottom: var(--gas-space-m, 16px);
        top: auto;
        transition: background var(--gas-transition-fast, 120ms ease), border-color var(--gas-transition-fast, 120ms ease);
        width: 42px;
        z-index: 130;
    }

    /* Logo dans la PREMIÈRE bande (header à logo centré, barres de service en
       dessous) : on ancre en haut. Les deux règles couvrent les deux dispositions
       réelles ; si le logo vivait dans une bande du milieu, le défaut ci-dessus
       s'applique et il faudrait un repère explicite. */
    .gas-site-header--document:has(.gas-site-header__document > *:first-child .gas-block-site-branding)
    .gas-site-header__document-toggle {
        bottom: auto;
        top: var(--gas-space-m, 16px);
    }

    /* Logo dans l'UNIQUE bande : les deux règles ci-dessus ancrent par une marge
       fixe depuis un bord du header, ce qui suppose que la bande du logo est plus
       haute que le burger (40px) plus cette marge (16px), soit 56px. Une bande
       courte — un logo texte sans rembourrage — est plus basse que ça, et le
       burger DÉBORDE alors sous le header : mesuré à 29px sur la fixture `[3+3]`
       (bande de 26.9px), burger dont le centre tombe hors de toute bande.
       Quand il n'y a qu'une bande, header et bande du logo sont la même boîte :
       on centre, ce qui est juste quelle que soit la hauteur.
       Doit rester APRÈS la règle `:first-child` — un enfant unique est aussi un
       premier enfant, c'est l'ordre qui départage. */
    .gas-site-header--document:has(.gas-site-header__document > *:only-child .gas-block-site-branding)
    .gas-site-header__document-toggle {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Drawer ouvert : le header se déploie, le burger doit rester à portée de
       pouce en haut et non suivre le bas du drawer. Le `transform` du cas
       mono-bande est annulé ici, sinon le burger remonterait de 20px hors du
       header une fois le tiroir ouvert. */
    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-toggle {
        bottom: auto;
        top: var(--gas-space-m, 16px);
        transform: none;
    }

    /* ── burger_side=start (mode auto) — inverse le côté d'ancrage ──
       Propriétés logiques : équivalentes à `right`/`left` en LTR, mais posent
       le bon vocabulaire pour un futur site RTL. Spécificité (0,2,0), au-dessus
       de la règle de base (0,1,0) : gagne sans dépendre de l'ordre. */
    .gas-site-header--document.gas-site-header--burger-start .gas-site-header__document-toggle {
        inset-inline-end: auto;
        inset-inline-start: var(--gas-space-m, 16px);
    }

    /* ── burger_placement=inline — le burger est un enfant en flux, plus un
       overlay absolu. Spécificité (0,3,0), au-dessus de la règle de base
       (0,1,0) : gagne sans dépendre de l'ordre. La place réservée sur
       site-branding (`padding-inline-end: 52px` ci-dessus) devient inutile
       puisque rien ne recouvre plus le logo. */
    .gas-site-header--document.gas-site-header--burger-inline .gas-site-header__document-toggle {
        bottom: auto;
        inset-inline-end: auto;
        inset-inline-start: auto;
        position: static;
        right: auto;
        top: auto;
        transform: none;
    }

    .gas-site-header--document.gas-site-header--burger-inline .gas-block-site-branding {
        padding-inline-end: 0;
    }

    .gas-site-header__document-toggle:hover,
    .gas-site-header__document-toggle:focus-visible {
        background: var(--gas-color-surface-muted, #f3f4f6);
        border-color: var(--gas-primary, #0f766e);
        outline: none;
    }

    .gas-site-header__document-toggle span {
        background: currentColor;
        border-radius: 999px;
        display: block;
        height: 2px;
        transition: opacity var(--gas-transition-fast, 120ms ease), transform var(--gas-transition-fast, 120ms ease);
        width: 18px;
    }

    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-toggle span:nth-child(2) {
        opacity: 0;
    }

    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-toggle {
        display: none;
    }

    .gas-site-header__document-overlay {
        background: rgba(15, 23, 42, 0.42);
        border: 0;
        bottom: 0;
        cursor: pointer;
        display: block;
        left: 0;
        padding: 0;
        position: fixed;
        right: min(360px, 92vw);
        top: 0;
        z-index: 180;
    }

    .gas-site-header__document-overlay[hidden] {
        display: none;
    }

    /* Le panneau fixe est porté par le TIROIR, plus par le bloc menu. C'est tout
       l'intérêt d'en faire une surface : il est unique par construction, donc un
       menu `split` (deux blocs `site_menu`) ne peut plus produire deux panneaux
       superposés dont le second masquait la moitié de la navigation.

       Corollaire : les deux hissages de z-index qui vivaient ici ont disparu. Ils
       compensaient le fait que le panneau était piégé dans le contexte d'empilement
       de la `section` du menu (chaque `.gas-block-section` a `isolation: isolate`)
       puis dans celui du wrapper `.gas-block-anchor`. Le tiroir est maintenant un
       frère de `.gas-site-header__document`, directement sous `<header>` : il n'est
       plus dans aucun de ces contextes, il n'y a donc plus rien à hisser. */
    .gas-site-header__document-drawer {
        background: var(--gas-color-surface-card, #fff);
        border-left: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
        bottom: 0;
        box-shadow: var(--gas-shadow-l, -18px 0 36px rgba(15, 23, 42, 0.18));
        display: flex;
        flex-direction: column;
        margin: 0;
        max-width: 92vw;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform var(--gas-transition-base, 220ms ease);
        width: min(360px, 92vw);
        z-index: 260;
    }

    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-drawer {
        transform: translateX(0);
    }

    /* Tiroir fermé : hors écran ET hors parcours du clavier. L'ancienne
       implémentation laissait les liens focalisables sous le doigt. */
    .gas-site-header__document-drawer[aria-hidden="true"] {
        visibility: hidden;
    }

    .gas-site-header--document.is-document-drawer-open .gas-site-header__document-drawer {
        visibility: visible;
    }

    .gas-site-header__document-drawer-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        overflow-y: auto;
    }

    /* Tiroir COMPOSÉ (`drawer_document_slug` attaché) : le JS n'emprunte PAS les
       blocs `site_menu` des bandes — le tiroir a son propre contenu. Sans cette
       règle, le menu de bande restait donc DÉPLIÉ dans le header à côté du
       burger (vécu sur gas-aph le 2026-08-04, dans les deux états d'auth : le
       mode emprunt masquait les menus en les déplaçant physiquement, le mode
       composé ne les masquait plus du tout). Garde `never` : dans ce mode il
       n'y a ni burger ni tiroir, les menus de bande restent en ligne.
       ⚠️ `--inline` n'est PAS un marqueur de repli : c'est le modificateur de
       LAYOUT du bloc (stacked/inline/columns), porté par tout menu horizontal —
       ne pas s'en servir pour exclure. Le contrat de repli est
       `data-nav-collapse` sur le <header>, seul attribut que CSS et JS lisent. */
    .gas-site-header--document:not([data-nav-collapse="never"]):has(.gas-site-header__document-drawer--composed)
    .gas-site-header__document .gas-block-site-menu {
        display: none;
    }

    /* Les blocs menu déplacés dans le tiroir s'y empilent : ils ne portent plus
       aucun positionnement propre. */
    .gas-site-header__document-drawer .gas-block-site-menu {
        background: none;
        border: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        inset: auto;
        margin: 0;
        max-width: none;
        padding: 0;
        position: static;
        transform: none;
        width: auto;
        z-index: auto;
    }

    .gas-site-header__document-drawer-head {
        align-items: center;
        border-bottom: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
        display: flex;
        flex: 0 0 auto;
        gap: var(--gas-space-s, 8px);
        justify-content: space-between;
        min-height: 64px;
        padding: var(--gas-space-m, 16px);
        position: sticky;
        top: 0;
        background: var(--gas-color-surface-card, #fff);
        z-index: 1;
    }

    .gas-site-header__document-drawer-title {
        color: var(--gas-color-text-strong, var(--gas-color-text, #1f2937));
        font-size: var(--gas-text-m, 16px);
        line-height: 1.2;
    }

    .gas-site-header__document-drawer-close {
        align-items: center;
        background: var(--gas-color-surface-muted, #f3f4f6);
        border: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
        border-radius: var(--gas-radius-m, 8px);
        color: var(--gas-color-text, #1f2937);
        cursor: pointer;
        display: inline-flex;
        font-size: 22px;
        height: 40px;
        justify-content: center;
        line-height: 1;
        padding: 0;
        width: 40px;
    }

    .gas-site-header--document .gas-block-site-menu--inline .gas-block-site-menu__list {
        align-items: stretch;
        display: grid;
        /* L'air ENTRE les entrées remplace les filets pleine largeur : c'est ce
           qui sépare un tiroir d'application d'une liste de liens brute. */
        gap: var(--gas-space-2xs, 3px);
        justify-content: stretch;
        overflow: visible;
        padding: var(--gas-space-s, 8px) var(--gas-space-m, 16px) var(--gas-space-l, 24px);
        width: auto;
    }

    .gas-site-header--document .gas-block-site-menu__item.has-children {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gas-site-header--document .gas-block-site-menu__link {
        border-radius: var(--gas-radius-m, 8px);
        display: flex;
        /* 48px : cible tactile recommandée. À 46px avec 14px de texte, le tiroir
           faisait « liste dense » là où le reste du site respire. */
        font-size: var(--gas-text-m, 16px);
        justify-content: flex-start;
        min-height: 48px;
        padding: var(--gas-space-3, 12px) var(--gas-space-m, 16px);
        white-space: normal;
        width: 100%;
    }

    .gas-site-header--document .gas-block-site-menu__link:hover,
    .gas-site-header--document .gas-block-site-menu__link:focus-visible {
        background: var(--gas-color-surface-muted, #f8fafc);
    }

    /* Une entrée à sous-menu est une grille « lien | chevron ». Un fond posé sur
       le seul lien s'arrête donc net avant le chevron et se lit comme un bloc
       tronqué. Les deux moitiés portent le même fond, chacune n'arrondissant que
       ses angles extérieurs : la ligne redevient une seule pastille. */
    .gas-site-header--document .gas-block-site-menu__item.has-children > .gas-block-site-menu__link {
        border-radius: var(--gas-radius-m, 8px) 0 0 var(--gas-radius-m, 8px);
    }

    .gas-site-header--document .gas-block-site-menu__item.has-children > .gas-block-site-menu__submenu-toggle {
        border-radius: 0 var(--gas-radius-m, 8px) var(--gas-radius-m, 8px) 0;
    }

    .gas-site-header--document .gas-block-site-menu__item.has-children:hover > .gas-block-site-menu__submenu-toggle,
    .gas-site-header--document .gas-block-site-menu__item.has-children:focus-within > .gas-block-site-menu__submenu-toggle {
        background: var(--gas-color-surface-muted, #f8fafc);
    }

    .gas-site-header--document .gas-block-site-menu__item.has-children.is-current > .gas-block-site-menu__submenu-toggle,
    .gas-site-header--document .gas-block-site-menu__item.has-children:has(> .gas-block-site-menu__link[aria-current]) > .gas-block-site-menu__submenu-toggle {
        background: var(--_nav-active-bg);
        color: var(--_nav-active-color);
    }

    .gas-site-header--document .gas-block-site-menu__submenu-toggle {
        align-items: center;
        align-self: stretch;
        background: transparent;
        border: 0;
        border-radius: var(--gas-radius-s, 6px);
        color: var(--gas-color-text-muted, #64748b);
        cursor: pointer;
        display: inline-flex;
        font-size: 18px;
        justify-content: center;
        min-width: 44px;
        padding: 0;
    }

    .gas-site-header--document .gas-block-site-menu__submenu-toggle span {
        transition: transform var(--gas-transition-fast, 120ms ease);
    }

    .gas-site-header--document .gas-block-site-menu__item.is-open > .gas-block-site-menu__submenu-toggle span {
        transform: rotate(180deg);
    }

    .gas-site-header--document .gas-block-site-menu__sublist {
        background: var(--gas-color-surface-muted, #f8fafc);
        border: 0;
        border-radius: var(--gas-radius-m, 8px);
        box-shadow: none;
        display: none;
        gap: var(--gas-space-2xs, 3px);
        grid-column: 1 / -1;
        /* Retrait à gauche : le sous-menu se lit comme une dépendance du parent,
           sans avoir besoin d'un filet pour le dire. */
        margin: var(--gas-space-2xs, 3px) 0 var(--gas-space-s, 8px) var(--gas-space-m, 16px);
        min-width: 0;
        opacity: 1;
        padding: var(--gas-space-s, 8px);
        pointer-events: auto;
        position: static;
        transform: none;
        visibility: visible;
    }

    .gas-site-header--document .gas-block-site-menu__item.is-open > .gas-block-site-menu__sublist {
        display: grid;
    }

    .gas-site-header--document .gas-block-site-menu__sublist .gas-block-site-menu__item {
        border-bottom: 0;
    }

    .gas-site-header--document .gas-block-site-menu__sublist .gas-block-site-menu__link {
        color: var(--gas-color-text-muted, #64748b);
        font-size: var(--gas-text-s, 14px);
        min-height: 42px;
        padding: var(--gas-space-s, 8px) var(--gas-space-3, 12px);
    }
}

/* ── Tiroir EMPRUNTÉ : menus consécutifs sans couture ──────────────────────
   Un menu `split` (deux blocs site_menu du même menu) arrive dans le tiroir
   en DEUX blocs empruntés : le padding bas de la première liste (24px) plus
   le padding haut de la seconde (8px) creusaient un trou visuel de 32px au
   milieu des entrées (vécu sur sophrologues.ch). Enfants DIRECTS du body :
   ne matche que le mode emprunté — en mode composé les blocs sont dans des
   wrappers `.gas-block-anchor`. */
.gas-site-header__document-drawer-body > .gas-block-site-menu:not(:last-child) .gas-block-site-menu__list {
    padding-bottom: 0;
}

.gas-site-header__document-drawer-body > .gas-block-site-menu + .gas-block-site-menu .gas-block-site-menu__list {
    padding-top: 0;
}

/* ── Tiroir composé : zone de pied ─────────────────────────────────────────
   Quand le tiroir est composé (document attaché), les blocs qui SUIVENT le
   menu (compte, CTA, langue…) forment un pied de tiroir : ancré en bas du
   panneau, séparé du menu par un filet, avec de vraies cibles tactiles —
   plutôt que des liens en vrac collés sous la dernière entrée (vécu sur aph).
   Hors media query à dessein : le panneau est le même en mode `responsive`
   (≤900px) et en `always` (toutes largeurs). Inerte en mode EMPRUNT : le JS
   y déplace des nœuds `.gas-block-site-menu` nus, sans wrapper
   `.gas-block-anchor`, donc aucun de ces sélecteurs ne matche. */
.gas-site-header__document-drawer-body > .gas-block-anchor:has(.gas-block-site-menu) ~ .gas-block-anchor {
    padding-inline: var(--gas-space-m, 16px);
}

.gas-site-header__document-drawer-body > .gas-block-anchor:has(.gas-block-site-menu) + .gas-block-anchor:not(:has(.gas-block-site-menu)) {
    border-top: 1px solid var(--gas-color-border-subtle, #edf1f5);
    margin-top: auto;
    padding-top: var(--gas-space-m, 16px);
}

.gas-site-header__document-drawer-body > .gas-block-anchor:last-child:not(:has(.gas-block-site-menu)) {
    padding-bottom: var(--gas-space-l, 24px);
}

/* Compte : une vraie ligne tapable, pas un lien de coin de page. Le bloc rend
   une liste (compte + panier éventuel) : reset des puces, empilement propre. */
.gas-site-header__document-drawer-body .gas-block-site-account__list {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-2xs, 4px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gas-site-header__document-drawer-body .gas-block-site-account__link {
    align-items: center;
    display: flex;
    font-size: var(--gas-text-s, 14px);
    gap: var(--gas-space-xs, 6px);
    min-height: 44px;
    width: 100%;
}

/* CTA : boutons pleine largeur, empilés avec de l'air. */
.gas-site-header__document-drawer-body .gas-block-link-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-s, 8px);
}

.gas-site-header__document-drawer-body .gas-block-link-list__link {
    justify-content: center;
    min-height: 44px;
    width: 100%;
}

/* Sélecteur de langue : discret, centré sous les actions. */
.gas-site-header__document-drawer-body .gas-block-site-language-switcher__list {
    justify-content: center;
    padding-block: var(--gas-space-s, 8px);
}

.gas-site-header--overlay-content {
    margin-bottom: calc(var(--gas-site-header-height, 0px) * -1);
    z-index: 120;
}

.gas-site-header--smart,
.gas-site-header--smart .gas-site-header__row--has-branding,
.gas-site-header--smart .gas-site-header__logo img {
    transition:
        background-color var(--gas-transition-base, 180ms ease),
        color var(--gas-transition-base, 180ms ease),
        box-shadow var(--gas-transition-base, 180ms ease),
        padding var(--gas-transition-base, 180ms ease),
        max-height var(--gas-transition-base, 180ms ease),
        opacity var(--gas-transition-fast, 120ms ease);
}

.gas-site-header--smart.is-scrolled {
    --_header-bg: var(--_header-smart-scrolled-bg, rgba(255, 255, 255, 0.96));
    --_header-text: var(--_header-smart-scrolled-text, var(--gas-neutral-900));
    --_header-muted: color-mix(in srgb, var(--_header-text) 72%, transparent);
    --_header-shadow: var(--gas-shadow-s);
}

.gas-site-header--smart.is-menu-open,
.gas-site-header--smart.is-drawer-open {
    --_header-bg: var(--_header-smart-menu-bg, var(--_header-smart-scrolled-bg, rgba(255, 255, 255, 0.98)));
    --_header-text: var(--_header-smart-menu-text, var(--_header-smart-scrolled-text, var(--gas-neutral-900)));
    --_header-muted: color-mix(in srgb, var(--_header-text) 72%, transparent);
    --_header-shadow: var(--gas-shadow-m);
}

.gas-site-header--smart-shrink.is-scrolled .gas-site-header__row--has-branding {
    padding-top: var(--_header-smart-shrink-padding-top, 2px);
    padding-bottom: var(--_header-smart-shrink-padding-bottom, 2px);
}

.gas-site-header--smart-shrink.is-scrolled .gas-site-header__logo img {
    max-height: min(var(--_logo-h), var(--_header-smart-shrink-logo-h, 44px));
}

/* ── Comportements smart/overlay en mode DOCUMENT ──────────────────────────
   Les règles ci-dessus ne parlent qu'au markup rows (`__row--has-branding`,
   `__logo img`, et `.gas-site-header__row { background: var(--_header-bg) }`).
   En mode Document, les bandes sont des `.gas-block-section` qui peignent leur
   `--gas-block-section-bg` posé en style INLINE : elles ne voient jamais
   `--_header-bg`. Résultat, un site migré perdait EN SILENCE le fond au scroll,
   le rétrécissement et le header transparent sur hero — les classes étaient
   pourtant bien émises (`buildRootClasses` est partagé) et `is-scrolled` bien
   posé par le JS. La chaîne cassait uniquement ici.

   On ne peut pas redéfinir `--gas-block-section-bg` (l'inline gagne) : on
   surcharge donc `background` sur un sélecteur plus spécifique. */

/* 1. Transparent au repos — header posé sur un hero plein écran (one-page).
      Au repos seulement : dès `is-scrolled`, la règle 2 reprend la main. */
.gas-site-header--document.gas-site-header--overlay-content:not(.is-scrolled)
.gas-site-header__document > * > .gas-block-section {
    background: transparent;
}

/* 2. Fond plein au scroll (et menu ouvert) — parité avec
      `.gas-site-header__row { background: var(--_header-bg) }` du chemin rows. */
.gas-site-header--document.gas-site-header--smart.is-scrolled
.gas-site-header__document > * > .gas-block-section,
.gas-site-header--document.gas-site-header--smart.is-menu-open
.gas-site-header__document > * > .gas-block-section {
    background: var(--_header-bg);
    color: var(--_header-text);
}

/* La bande peut porter `--text-light` (texte blanc, choisi pour sa couleur de
   repos). Une fois le header repeint en clair au scroll, ce blanc devient
   illisible : on rend la main à `--_header-text`. */
.gas-site-header--document.gas-site-header--smart.is-scrolled
.gas-site-header__document > * > .gas-block-section.gas-block-section--text-light {
    --gas-color-text: var(--_header-text);
    --gas-color-text-muted: color-mix(in srgb, var(--_header-text) 72%, transparent);
    --gas-text-color-link: var(--_header-text);
}

.gas-site-header--document.gas-site-header--smart.is-scrolled
.gas-site-header__document > * > .gas-block-section.gas-block-section--text-light a {
    color: var(--_header-text);
}

/* 3. Rétrécissement au scroll : le logo du bloc `site_branding` et le padding
      vertical des bandes. `min()` avec la hauteur au repos pour ne JAMAIS
      agrandir un logo déjà plus petit que la cible. */
.gas-site-header--document.gas-site-header--smart-shrink.is-scrolled
.gas-block-site-branding__logo {
    max-height: min(
        var(--gas-block-site-branding-logo-h, var(--_header-smart-shrink-logo-h, 44px)),
        var(--_header-smart-shrink-logo-h, 44px)
    );
    transition: max-height var(--gas-transition-base, 180ms ease);
}

.gas-site-header--document.gas-site-header--smart-shrink.is-scrolled
.gas-site-header__document > * > .gas-block-section {
    padding-block: var(--_header-smart-shrink-padding-top, 2px)
        var(--_header-smart-shrink-padding-bottom, 2px);
}

/* Transition du fond côté Document (l'équivalent rows vise `__row`). */
.gas-site-header--document.gas-site-header--smart
.gas-site-header__document > * > .gas-block-section {
    transition:
        background-color var(--gas-transition-base, 180ms ease),
        color var(--gas-transition-base, 180ms ease),
        padding var(--gas-transition-base, 180ms ease);
}

/* ── Admin bar offset ── */

body.admin-bar .gas-site-header:not(.gas-site-header--static) {
    top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .gas-site-header:not(.gas-site-header--static) {
        top: var(--wp-admin--admin-bar--height, 46px);
    }
}

.gas-site-header a {
    text-decoration: none;
    transition: color var(--gas-transition-fast);
}

.gas-site-header select {
    background: var(--gas-input-bg);
    border: var(--gas-border-width) solid var(--gas-input-border);
    border-radius: var(--gas-input-radius);
    color: var(--gas-input-color);
}

/* ── Announcement bar ── */

.gas-site-header__announcement {
    width: 100%;
    padding: var(--gas-space-s) var(--gas-space-m);
    font-size: var(--gas-text-xs);
    line-height: var(--gas-leading-tight);
}

.gas-site-header__announcement--info    { background: var(--gas-info);    color: var(--gas-white); }
.gas-site-header__announcement--warning { background: var(--gas-warning); color: var(--gas-neutral-900); }
.gas-site-header__announcement--success { background: var(--gas-success); color: var(--gas-white); }
.gas-site-header__announcement--primary { background: var(--gas-primary); color: var(--gas-white); }
.gas-site-header__announcement--accent  { background: var(--gas-accent);  color: var(--gas-white); }
.gas-site-header__announcement--danger  { background: var(--gas-danger);  color: var(--gas-white); }

.gas-site-header__announcement--highlight {
    background: linear-gradient(90deg, var(--gas-primary), var(--gas-secondary));
    color: var(--gas-white);
}

.gas-site-header__announcement + .gas-site-header__announcement {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.gas-site-header__announcement--full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.gas-site-header__announcement-inner {
    display: block;
    max-width: var(--gas-site-max-width);
    margin: 0 auto;
    color: inherit;
    text-align: center;
    font-weight: var(--gas-weight-semi);
}

a.gas-site-header__announcement-inner:hover { opacity: 0.85; }

/* ── Row-based layout ── */

.gas-site-header__row {
    display: grid;
    align-items: center;
    gap: 0 var(--gas-space-l);
    /* Fond pleine largeur, mais CONTENU centré dans la largeur du site (même
       pour les rangées MULTI-colonnes branding+nav — sans ça le logo touche le
       bord gauche et le menu le bord droit). Le padding latéral pousse les
       colonnes dans une bande centrée de --gas-wide-max-width. */
    padding: var(--gas-space-xs) max(var(--gas-space-l), calc((100% - var(--gas-wide-max-width, 1120px)) / 2));
    background: var(--_header-bg);
    position: relative;
    z-index: var(--_row-z, 20);
    width: 100%;
}
/* Rangée à colonne UNIQUE (logo + nav + réseaux) : le fond reste pleine largeur,
   mais le contenu s'aligne sur la largeur de contenu du site (--gas-wide-max-width),
   centré — le logo tombe sur le bord gauche du contenu, les réseaux sur le droit. */
.gas-site-header__col--first.gas-site-header__col--last {
    width: min(100%, var(--gas-wide-max-width, 1120px));
    margin-inline: auto;
}

/* The main row (with branding) gets the visual weight */
.gas-site-header__row--has-branding {
    padding: var(--_header-padding-top, var(--gas-space-xs)) max(var(--gas-space-l), calc((100% - var(--gas-wide-max-width, 1120px)) / 2)) var(--_header-padding-bottom, var(--gas-space-xs));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Pas de bord bas : sur fond sombre, le 1px `--_header-border` (#3a3a3a) lit
       comme un mini-espace/couture entre le header et le contenu. L'ombre douce
       suffit à séparer le header quand il est sticky. */
    box-shadow: var(--_header-shadow);
}

/* Non-branding rows: subtle separator */
.gas-site-header__row:not(.gas-site-header__row--has-branding) {
    border-bottom: 1px solid var(--_header-border);
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Announcement-only rows: zero padding (announcements handle their own) */
.gas-site-header__row--announcements-only {
    padding: 0;
    border-bottom: 0;
    gap: 0;
}

/* ── Row layout variants (grid-template-columns) ── */
.gas-site-header__row--1-1       { grid-template-columns: 1fr; }
.gas-site-header__row--1-2--1-2  { grid-template-columns: 1fr 1fr; }
.gas-site-header__row--1-3--2-3  { grid-template-columns: 1fr 2fr; }
.gas-site-header__row--2-3--1-3  { grid-template-columns: 2fr 1fr; }
.gas-site-header__row--1-4--3-4  { grid-template-columns: 1fr 3fr; }
.gas-site-header__row--3-4--1-4  { grid-template-columns: 3fr 1fr; }

.gas-site-header--compact .gas-site-header__row--has-branding,
.gas-site-header--menu-only .gas-site-header__row--has-branding {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ── Column ── */

.gas-site-header__col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gas-space-xs) var(--gas-space-m);
    min-width: 0;
}

/* Second+ columns: align content to the right */
.gas-site-header__col:not(:first-child) {
    justify-content: flex-end;
}

/* ── Generic element wrappers ── */

.gas-site-header__element {
    display: flex;
    align-items: center;
    min-width: 0;
}

.gas-site-header__element > * {
    min-width: 0;
}

.gas-site-header__element--announcements,
.gas-site-header__element--school-promo {
    width: 100%;
}

.gas-site-header__element--branding,
.gas-site-header__element--member-mega,
.gas-site-header__element--cta {
    flex-shrink: 0;
}

.gas-site-header__element--primary-nav,
.gas-site-header__element--gas-menu {
    flex: 1 1 auto;
}

/* ── Branding ── */

.gas-site-header__branding {
    flex-shrink: 0;
    min-width: 0;
}

.gas-site-header__brand-link {
    display: flex;
    align-items: center;
    gap: var(--gas-space-m);
    min-width: 0;
    color: inherit;
}

/* Branding layout: inline (logo + name + slogan all in a row) */
.gas-site-header__branding--inline .gas-site-header__brand-link {
    flex-direction: row;
    align-items: center;
}

.gas-site-header__branding--inline .gas-site-header__brand-copy {
    flex-direction: row;
    gap: var(--gas-space-s);
    align-items: baseline;
}

/* Branding layout: logo-left-stacked (logo left, name + slogan stacked right) — default */
.gas-site-header__branding--logo-left-stacked .gas-site-header__brand-link {
    flex-direction: row;
    align-items: center;
    gap: var(--gas-space-s);
}

/* Branding layout: stacked (everything vertical) */
.gas-site-header__branding--stacked .gas-site-header__brand-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gas-space-xs);
}

/* Branding layout: logo-top (logo above, texts below in a row) */
.gas-site-header__branding--logo-top .gas-site-header__brand-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gas-space-xs);
}

.gas-site-header__branding--logo-top .gas-site-header__brand-copy {
    flex-direction: row;
    gap: var(--gas-space-s);
    align-items: baseline;
}

/* Branding text vertical alignment */
.gas-site-header__branding--valign-top .gas-site-header__brand-link {
    align-items: flex-start;
}

.gas-site-header__branding--valign-bottom .gas-site-header__brand-link {
    align-items: flex-end;
}

.gas-site-header__brand-link:hover .gas-site-header__site-name {
    color: var(--gas-primary);
}

.gas-site-header__logo img {
    display: block;
    width: auto;
    max-width: var(--_logo-w);
    height: auto;
    max-height: var(--_logo-h);
    object-fit: contain;
}

.gas-site-header__logo-img--transparent {
    display: none;
}

.gas-site-header--smart-logo:not(.is-scrolled):not(.is-menu-open):not(.is-drawer-open) .gas-site-header__logo-img--default {
    display: none;
}

.gas-site-header--smart-logo:not(.is-scrolled):not(.is-menu-open):not(.is-drawer-open) .gas-site-header__logo-img--transparent {
    display: block;
}

.gas-site-header__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gas-site-header__site-name {
    font-size: clamp(14px, 12px + 0.5vw, 18px);
    font-weight: var(--gas-weight-bold);
    line-height: var(--gas-leading-tight);
    transition: color var(--gas-transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gas-site-header__site-description {
    color: var(--_header-muted);
    font-size: var(--gas-text-xs);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Element alignment within columns ── */

/* Primary nav pushes rest right (default = left) */
.gas-site-header__element--primary-nav,
.gas-site-header__element--gas-menu {
    margin-right: auto;
}

/* Nav align: center — nav centered, le reste (logo à gauche, réseaux à droite)
   poussé sur les bords par les marges auto. `flex: 0 1 auto` est requis : si l'élément
   nav grandit (flex-grow:1), il remplit la rangée et les marges auto n'ont plus d'effet
   (nav collé à gauche). */
.gas-site-header--nav-center .gas-site-header__element--primary-nav,
.gas-site-header--nav-center .gas-site-header__element--gas-menu {
    margin-right: auto;
    margin-left: auto;
    flex: 0 1 auto;
}

/* Nav align: right — nav pushed to the right */
.gas-site-header--nav-right .gas-site-header__element--primary-nav,
.gas-site-header--nav-right .gas-site-header__element--gas-menu {
    margin-right: 0;
    margin-left: auto;
}

/* Member mega inline with nav, not full column */
.gas-site-header__element--member-mega {
    flex-shrink: 0;
}

/* Element separator bars (configurable left/right) */
.gas-site-header__element-wrap--sep-left,
.gas-site-header__element-wrap--sep-right {
    display: flex;
    align-items: center;
}

.gas-site-header__element-wrap--sep-left {
    border-left: 1px solid var(--_header-border);
    padding-left: var(--gas-space-s);
}

.gas-site-header__element-wrap--sep-right {
    border-right: 1px solid var(--_header-border);
    padding-right: var(--gas-space-s);
}

/* ── Hamburger toggle ── */

.gas-site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-m);
    background: var(--_header-control-bg);
    cursor: pointer;
    transition: background var(--gas-transition-fast);
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
}

.gas-site-header__toggle:hover {
    background: var(--_header-hover-bg);
}

.gas-site-header__collapsed-bar {
    align-items: center;
    display: flex;
    gap: var(--gas-space-4, 10px);
    justify-content: space-between;
    margin-inline: auto;
    max-width: var(--gas-header-max-width, var(--gas-container-xl, 1200px));
    min-height: 64px;
    padding: var(--gas-space-2, 5px) var(--gas-space-4, 10px);
    width: 100%;
}

.gas-site-header__collapsed-brand {
    min-width: 0;
}

.gas-site-header--display-collapsed .gas-site-header__collapsed-toggle {
    display: flex;
    margin-left: 0;
}

.gas-site-header__toggle span:not(.screen-reader-text):not(.gas-site-header__toggle-label) {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--_header-text);
    border-radius: var(--gas-radius-full);
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

.gas-site-header__toggle-label {
    display: none;
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
    line-height: 1;
}

.gas-responsive-surface--trigger-icon_label .gas-site-header__toggle {
    width: auto;
    min-width: 44px;
    padding-inline: var(--gas-space-s);
    flex-direction: row;
}

.gas-responsive-surface--trigger-icon_label .gas-site-header__toggle-label {
    display: inline;
}

.gas-responsive-surface--density-compact .gas-site-header__row {
    gap: var(--gas-space-xs);
}

.gas-responsive-surface--density-comfortable .gas-site-header__row {
    gap: var(--gas-space-m);
}

.gas-responsive-surface--mobile-fullscreen .gas-site-header__drawer {
    width: 100vw;
    max-width: none;
    border-left: 0;
}

.gas-responsive-surface--cta-keep_visible .gas-site-header__drawer .gas-site-header__cta-group {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-block: var(--gas-space-s);
    background: var(--_header-panel-bg);
}

.gas-site-header__priority-cta {
    display: none;
}

@media (max-width: 1100px) {
    .gas-responsive-surface--cta-keep_visible[data-nav-breakpoint="standard"] .gas-site-header__priority-cta {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1002;
        display: flex;
        justify-content: center;
        padding: var(--gas-space-s);
        border-top: 1px solid var(--gas-color-border);
        background: var(--_header-panel-bg);
        box-shadow: 0 -8px 24px rgb(15 23 42 / 10%);
    }
}

@media (max-width: 1280px) {
    .gas-responsive-surface--cta-keep_visible[data-nav-breakpoint="tablet"] .gas-site-header__priority-cta {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1002;
        display: flex;
        justify-content: center;
        padding: var(--gas-space-s);
        border-top: 1px solid var(--gas-color-border);
        background: var(--_header-panel-bg);
        box-shadow: 0 -8px 24px rgb(15 23 42 / 10%);
    }
}

@media (max-width: 1440px) {
    .gas-responsive-surface--cta-keep_visible[data-nav-breakpoint="wide"] .gas-site-header__priority-cta {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1002;
        display: flex;
        justify-content: center;
        padding: var(--gas-space-s);
        border-top: 1px solid var(--gas-color-border);
        background: var(--_header-panel-bg);
        box-shadow: 0 -8px 24px rgb(15 23 42 / 10%);
    }
}

.gas-site-header__priority-cta .gas-site-header__cta-group {
    inline-size: min(100%, 680px);
    justify-content: center;
}

.gas-site-header__priority-cta .gas-button {
    flex: 1 1 auto;
}

/* Le burger desktop réutilise exactement la structure mobile, sans second
   renderer ni second enhancer. */
.gas-responsive-surface--desktop-burger .gas-site-header__row:not(.gas-site-header__row--has-branding) {
    display: none;
}

.gas-responsive-surface--desktop-burger .gas-site-header__row--has-branding,
.gas-responsive-surface--desktop-burger.gas-site-header--no-branding .gas-site-header__row:first-child {
    display: grid;
    grid-template-columns: 1fr;
}

.gas-responsive-surface--desktop-burger .gas-site-header__row--has-branding .gas-site-header__col:not(:first-child),
.gas-responsive-surface--desktop-burger.gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:not(:first-child) {
    display: none;
}

.gas-responsive-surface--desktop-burger .gas-site-header__row--has-branding .gas-site-header__col:first-child > *:not(.gas-site-header__element--branding):not(.gas-site-header__toggle),
.gas-responsive-surface--desktop-burger.gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:first-child > *:not(.gas-site-header__toggle) {
    display: none;
}

.gas-responsive-surface--desktop-burger .gas-site-header__toggle {
    display: inline-flex;
}

.gas-site-header.is-drawer-open .gas-site-header__toggle span:not(.screen-reader-text):not(.gas-site-header__toggle-label):nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.gas-site-header.is-drawer-open .gas-site-header__toggle span:not(.screen-reader-text):not(.gas-site-header__toggle-label):nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.gas-site-header.is-drawer-open .gas-site-header__toggle span:not(.screen-reader-text):not(.gas-site-header__toggle-label):nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Shared nav elements ── */

.gas-site-header__primary-nav,
.gas-site-header__action-nav,
.gas-site-header__member-mega {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.gas-responsive-surface--menu {
    container-type: inline-size;
    container-name: gas-menu-responsive;
}

@container gas-menu-responsive (max-width: 720px) {
    .gas-responsive-surface--preset-adaptive_links > :is(.gas-site-menu--primary, .gas-site-menu--gas) {
        gap: 2px var(--gas-space-xs);
        align-items: stretch;
    }

    .gas-responsive-surface--preset-adaptive_links > :is(.gas-site-menu--primary, .gas-site-menu--gas) > .gas-site-menu__item {
        flex: 1 1 max(140px, 28%);
    }

    .gas-responsive-surface--preset-adaptive_links > :is(.gas-site-menu--primary, .gas-site-menu--gas) > .gas-site-menu__item > :is(a, button) {
        inline-size: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

.gas-site-menu,
.gas-site-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gas-site-menu--primary,
.gas-site-menu--gas {
    display: flex;
    align-items: center;
    gap: var(--_nav-menu-gap, var(--_global-menu-gap, 2px));
    flex-wrap: wrap;
}

.gas-site-menu__item {
    position: relative;
}

/* ── Nav links / triggers ── */

.gas-site-menu__link,
.gas-site-menu__trigger,
.gas-site-action-list__item a {
    display: inline-flex;
    align-items: center;
    gap: var(--gas-space-xs);
    min-height: 34px;
    padding: 2px var(--gas-space-s);
    border: 0;
    border-radius: var(--gas-radius-s);
    background: transparent;
    color: var(--_nav-color);
    font-size: var(--_nav-font-size, var(--_global-font-size, var(--gas-text-s)));
    font-weight: var(--gas-weight-semi);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--gas-transition-fast), color var(--gas-transition-fast);
}

.gas-site-header__member-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gas-space-xs);
    min-height: 34px;
    padding: 2px var(--gas-space-s);
    border: 0;
    border-radius: var(--gas-radius-s);
    background: transparent;
    color: var(--_member-color);
    font-size: var(--_member-font-size, var(--_global-font-size, var(--gas-text-xs)));
    font-weight: var(--gas-weight-semi);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--gas-transition-fast), color var(--gas-transition-fast);
}

.gas-site-menu__item-head {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.gas-site-menu__trigger--icon {
    min-width: 32px;
    padding-left: var(--gas-space-xs);
    padding-right: var(--gas-space-xs);
    justify-content: center;
}

.gas-site-menu__link--label { cursor: default; }

.gas-site-menu__link:hover,
.gas-site-menu__trigger:hover,
.gas-site-action-list__item a:hover {
    background: var(--_nav-hover-bg);
    color: var(--_nav-hover-color);
}

.gas-site-header__member-trigger:hover {
    background: var(--_member-hover-bg);
    color: var(--_member-hover-color);
}

.gas-site-menu__item.is-current > .gas-site-menu__link,
.gas-site-menu__item.is-current > .gas-site-menu__item-head > .gas-site-menu__link,
.gas-site-menu__item.is-current-ancestor > .gas-site-menu__item-head > .gas-site-menu__link,
.gas-site-menu__item.is-current-ancestor > .gas-site-menu__link--parent,
.gas-site-action-list__item.is-current a {
    background: var(--_nav-active-bg);
    color: var(--_nav-active-color);
}

.gas-site-menu__item.is-highlight > .gas-site-menu__link,
.gas-site-menu__item.is-highlight > .gas-site-menu__item-head > .gas-site-menu__link,
.gas-site-menu__item.is-highlight > .gas-site-menu__link--parent {
    background: var(--gas-menu-highlight-bg, var(--gas-primary-ultra-light));
    color: var(--gas-menu-highlight-text, var(--gas-primary));
    box-shadow: inset 0 0 0 1px var(--gas-menu-highlight-border, transparent);
    font-weight: var(--gas-weight-bold);
}

/* Item de menu poussé à droite (CTA en bout de barre). Sur la barre horizontale
   (flex), margin-inline-start:auto repousse l'item et la suite vers la droite. */
.gas-site-menu__item.gas-nav-cta-end {
    margin-inline-start: auto;
}
/* Allure bouton pour un item CTA mis en avant (highlight) en bout de barre :
   coins arrondis + padding horizontal. Scopé à l'item CTA-end (pas tous les highlight). */
.gas-site-menu__item.gas-nav-cta-end.is-highlight > .gas-site-menu__link,
.gas-site-menu__item.gas-nav-cta-end.is-highlight > .gas-site-menu__item-head > .gas-site-menu__link,
.gas-site-menu__item.gas-nav-cta-end.is-highlight > .gas-site-menu__link--parent {
    border-radius: var(--gas-radius-full, 999px);
    padding-inline: var(--gas-space-m, 16px);
}

.gas-site-menu__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.gas-site-menu__label-text {
    display: inline-block;
}

/* ── Action lists ── */

.gas-site-action-list {
    display: flex;
    align-items: center;
    gap: var(--_global-menu-gap, 2px);
    flex-wrap: wrap;
    max-width: 100%;
}

.gas-site-header__action-nav--application .gas-site-action-list {
    gap: var(--_app-menu-gap, var(--_global-menu-gap, 2px));
}

.gas-site-header__action-nav--application .gas-site-action-list__item a {
    font-size: var(--_app-font-size, var(--_global-font-size, var(--gas-text-xs)));
    background: var(--gas-neutral-100);
}

.gas-site-header__action-nav--application .gas-site-action-list__item a:hover {
    background: var(--gas-primary-ultra-light);
}

.gas-site-header__action-nav--account .gas-site-action-list {
    justify-content: flex-end;
    gap: var(--_account-menu-gap, var(--_global-menu-gap, 0));
}

.gas-site-header__action-nav--account {
    flex: 1 1 auto;
    width: 100%;
}

.gas-site-header__action-nav--account .gas-site-action-list__item a {
    font-size: var(--_account-font-size, var(--_global-font-size, var(--gas-text-xs)));
}

.gas-site-header__action-nav--account .gas-site-action-list__item.is-emphasis a {
    max-width: min(100%, 180px);
    white-space: normal;
    text-align: center;
}

.gas-site-action-list--language {
    gap: 2px;
}

.gas-site-header__action-nav--language .gas-site-action-list__item a {
    min-width: 32px;
    justify-content: center;
    padding-left: var(--gas-space-xs);
    padding-right: var(--gas-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gas-site-action-list__item.is-emphasis a {
    background: var(--_account-greeting-bg, var(--gas-primary-ultra-light));
    color: var(--_account-greeting-text, inherit);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header--action-emphasis-soft-primary .gas-site-action-list__item.is-emphasis a {
    background: var(--gas-primary-ultra-light);
    color: var(--gas-primary);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header--action-emphasis-outline-primary .gas-site-action-list__item.is-emphasis a {
    background: transparent;
    color: var(--gas-primary);
    border: 1px solid var(--gas-primary-light);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header--action-emphasis-solid-primary .gas-site-action-list__item.is-emphasis a {
    background: var(--gas-primary);
    color: var(--gas-white);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header--action-emphasis-neutral-pill .gas-site-action-list__item.is-emphasis a {
    background: var(--gas-neutral-100);
    color: var(--gas-neutral-800);
    border: 1px solid var(--gas-neutral-300);
    font-weight: var(--gas-weight-semi);
}

.gas-site-header--action-emphasis-accent-pill .gas-site-action-list__item.is-emphasis a {
    background: var(--gas-accent-ultra-light);
    color: var(--gas-accent-dark);
    border: 1px solid var(--gas-accent-light);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header--action-emphasis-underline .gas-site-action-list__item.is-emphasis a {
    background: transparent;
    color: var(--gas-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    font-weight: var(--gas-weight-bold);
}

/* ── CTA group ── */

.gas-site-header__cta-group {
    display: flex;
    align-items: center;
    gap: var(--gas-space-s);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.gas-site-header__cta-group .gas-button--primary {
    background: var(--_cta-primary-bg);
    color: var(--_cta-primary-color);
    border-color: var(--_cta-primary-bg);
}

.gas-site-header__cta-group .gas-button--primary:hover {
    background: var(--_cta-primary-hover-bg);
    border-color: var(--_cta-primary-hover-bg);
}

.gas-site-header__cta-group .gas-button--primary-outline,
.gas-site-header__cta-group .gas-button--primary-ghost,
.gas-site-header__cta-group .gas-button--ghost {
    background: var(--_cta-secondary-bg);
    color: var(--_cta-secondary-color);
    border-color: var(--_cta-secondary-color);
}

.gas-site-header__custom-link.gas-button--primary-outline,
.gas-site-header__custom-link.gas-button--primary-ghost,
.gas-site-header__custom-link.gas-button--ghost {
    background: var(--_cta-secondary-bg);
    color: var(--_cta-secondary-color);
    border-color: var(--_cta-secondary-color);
}

.gas-site-header__cta-group .gas-button--primary-outline:hover,
.gas-site-header__cta-group .gas-button--primary-ghost:hover,
.gas-site-header__cta-group .gas-button--ghost:hover {
    background: var(--_cta-secondary-hover-bg);
}

.gas-site-header__custom-link.gas-button--primary-outline:hover,
.gas-site-header__custom-link.gas-button--primary-ghost:hover,
.gas-site-header__custom-link.gas-button--ghost:hover {
    background: var(--_cta-secondary-hover-bg);
}

/* ── Dropdowns ── */

.gas-site-menu__dropdown,
.gas-site-header__mega-panel {
    position: absolute;
    top: calc(100% + var(--gas-space-xs));
    right: 0;
    min-width: 240px;
    padding: var(--gas-space-s);
    background: var(--_header-panel-bg);
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-l);
    box-shadow: var(--gas-shadow-m);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 40;
}

.gas-site-menu__item.is-open > .gas-site-menu__dropdown,
.gas-site-header__member-mega.is-open > .gas-site-header__mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Pont invisible : couvre le gap item↔dropdown (top: 100% + space-xs) pour que
   la souris ne perde pas le :hover en descendant. Le ::after est un descendant de
   l'item (via le dropdown) → le survoler garde l'item en :hover. Actif seulement
   quand le dropdown est visible (pointer-events hérité du dropdown). */
.gas-site-menu__item > .gas-site-menu__dropdown::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: calc(var(--gas-space-xs, 4px) + 4px);
}

.gas-site-menu--sub {
    display: grid;
    gap: 2px;
}

.gas-site-menu--sub .gas-site-menu__dropdown {
    left: calc(100% + var(--gas-space-s));
    right: auto;
    top: 0;
}

.gas-site-menu--sub .gas-site-menu__link,
.gas-site-menu--sub .gas-site-menu__trigger {
    width: 100%;
    justify-content: space-between;
}

/* ── Mega menu ── */

.gas-site-header__mega-panel {
    width: min(480px, calc(100vw - 20px));
    padding: var(--gas-space-l);
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
}

.gas-site-header__member-mega.is-open > .gas-site-header__mega-panel {
    transform: translateX(-50%) translateY(0);
}

.gas-site-header__mega-message {
    margin-bottom: var(--gas-space-m);
    padding: var(--gas-space-s) var(--gas-space-m);
    border-radius: var(--gas-radius-s);
    border: 1px solid var(--_header-border);
    background: var(--gas-neutral-50);
    color: var(--_header-text);
    font-size: var(--gas-text-xs);
    line-height: 1.45;
}

.gas-site-header__mega-message > *:first-child {
    margin-top: 0;
}

.gas-site-header__mega-message > *:last-child {
    margin-bottom: 0;
}

.gas-site-header__mega-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gas-space-m);
    max-height: 60vh;
    overflow-y: auto;
}

.gas-site-header__mega-title {
    margin: 0 0 var(--gas-space-xs);
    font-size: var(--gas-text-s);
    font-weight: var(--gas-weight-bold);
    color: var(--_member-color);
}

.gas-site-header__mega-title a { color: inherit; }
.gas-site-header__mega-title a:hover { color: var(--_member-hover-color); }

.gas-site-header__mega-description {
    margin: 0 0 var(--gas-space-s);
    color: var(--_header-muted);
    font-size: var(--gas-text-xs);
}

.gas-site-header__mega-links,
.gas-site-header__mega-sub-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gas-site-header__mega-links { display: grid; gap: var(--_member-menu-gap, var(--_global-menu-gap, var(--gas-space-xs))); }

.gas-site-header__mega-link-item > a,
.gas-site-header__mega-sub-links a {
    display: block;
    padding: var(--gas-space-xs) var(--gas-space-s);
    border-radius: var(--gas-radius-s);
    color: var(--_member-color);
    font-size: var(--_member-font-size, var(--_global-font-size, var(--gas-text-xs)));
    transition: background var(--gas-transition-fast), color var(--gas-transition-fast);
}

.gas-site-header__mega-link-item > a:hover,
.gas-site-header__mega-sub-links a:hover {
    background: var(--_member-hover-bg);
    color: var(--_member-hover-color);
}

.gas-site-header__mega-link-item > a.is-current {
    background: var(--_member-active-bg);
    color: var(--_member-active-color);
}

.gas-site-header__mega-link-item > a.is-highlight,
.gas-site-header__mega-sub-links a.is-highlight {
    background: var(--gas-menu-highlight-bg, var(--gas-primary-ultra-light));
    color: var(--gas-menu-highlight-text, var(--gas-primary));
    box-shadow: inset 0 0 0 1px var(--gas-menu-highlight-border, transparent);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header__mega-sub-links {
    display: grid;
    gap: 2px;
    margin-top: var(--gas-space-xs);
    padding-left: var(--gas-space-s);
}

/* ── School promo ── */

.gas-site-header__school-promo {
    position: relative;
    z-index: 10;
}

.gas-site-header__school-promo-inner {
    display: flex;
    align-items: center;
    gap: var(--gas-space-m);
    padding: var(--gas-space-s) var(--gas-space-l);
    background: var(--gas-neutral-50);
    border-bottom: 1px solid var(--_header-border);
    max-width: 1440px;
    margin: 0 auto;
}

.gas-site-header__school-promo--card .gas-site-header__school-promo-inner {
    margin: var(--gas-space-s) var(--gas-space-l) 0;
    padding: var(--gas-space-m);
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-l);
    box-shadow: var(--gas-shadow-xs);
    background: var(--_header-panel-bg);
}

.gas-site-header__school-logo img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--gas-radius-m);
}

.gas-site-header__school-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.gas-site-header__school-label,
.gas-site-header__school-meta,
.gas-site-header__school-description {
    margin: 0;
    font-size: var(--gas-text-xs);
}

.gas-site-header__school-label,
.gas-site-header__school-meta {
    color: var(--_header-muted);
}

.gas-site-header__school-title {
    color: var(--_header-text);
    font-weight: var(--gas-weight-bold);
    font-size: var(--gas-text-s);
}

.gas-site-header__school-title:hover { color: var(--gas-primary); }

.gas-site-header__school-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--gas-space-xs) var(--gas-space-m);
    border-radius: var(--gas-radius-s);
    background: var(--gas-primary);
    color: var(--gas-white);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-bold);
    transition: background var(--gas-transition-fast);
    flex-shrink: 0;
}

.gas-site-header__school-cta:hover {
    background: var(--gas-primary-dark);
    color: var(--gas-white);
}

.gas-site-header__school-promo--inline .gas-site-header__school-promo-inner {
    padding-top: var(--gas-space-xs);
    padding-bottom: var(--gas-space-xs);
}

/* Header Document : pas de trait sous la promo école. La `border-bottom` de
   l'encart vient du markup rows, où elle séparait la bande de ce qui suit. En
   mode Document chaque bande est une `section` qui porte déjà son propre fond
   et sa propre séparation : le trait fait doublon et se lit comme un souligné
   sous le nom de l'école. Les sites encore en rows gardent leur séparateur. */
.gas-site-header--document .gas-site-header__school-promo-inner {
    border-bottom: 0;
}

.gas-site-header__school-promo--inline .gas-site-header__school-logo,
.gas-site-header__school-promo--inline .gas-site-header__school-meta,
.gas-site-header__school-promo--inline .gas-site-header__school-description,
.gas-site-header__school-promo--inline .gas-site-header__school-cta {
    display: none;
}

/* CTA texte inline apres le titre (layouts inline + pill) */
.gas-site-header__school-cta-inline {
    font-weight: var(--gas-weight-regular);
    opacity: 0.7;
    font-size: 0.9em;
}

/* ── Drawer + Overlay (hidden by default) ── */

.gas-site-header__drawer,
.gas-site-header__overlay {
    display: none;
}

/* ── Drawer close button ── */

.gas-site-header__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-m);
    background: var(--_header-control-bg);
    color: var(--_header-text);
    font-size: 14px;
    font-weight: var(--gas-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: background var(--gas-transition-fast);
    flex-shrink: 0;
    padding: 0;
}

.gas-site-header__drawer-close:hover {
    background: var(--_header-hover-bg);
}

/* ══════════════════════════════════════════
   Submenu styles: Hover
   ══════════════════════════════════════════ */

.gas-site-header--submenu-hover .gas-site-menu__item--has-children > .gas-site-menu__dropdown {
    top: 100%;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.gas-site-header--submenu-hover .gas-site-menu__item--has-children:hover > .gas-site-menu__dropdown,
.gas-site-header--submenu-hover .gas-site-menu__item--has-children:focus-within > .gas-site-menu__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.gas-site-header--submenu-hover .gas-site-menu__link--parent {
    gap: var(--gas-space-xs);
}

.gas-site-header--submenu-hover .gas-site-menu--sub .gas-site-menu__dropdown {
    left: 100%;
}

/* ══════════════════════════════════════════
   Submenu styles: Underline (click-on-link)
   ══════════════════════════════════════════ */

.gas-site-header--submenu-underline .gas-site-menu__link--parent {
    border: 0;
    background: transparent;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding-bottom: var(--gas-space-xs);
    transition: border-color var(--gas-transition-fast), color var(--gas-transition-fast);
    gap: var(--gas-space-xs);
    cursor: pointer;
}

.gas-site-header--submenu-underline .gas-site-menu__link--parent:hover {
    color: var(--gas-primary);
}

.gas-site-header--submenu-underline .gas-site-menu__item.is-open > .gas-site-menu__link--parent {
    border-bottom-color: var(--gas-primary);
    color: var(--gas-primary);
}

/* ══════════════════════════════════════════
   Submenu styles: Fullwidth (mega-style)
   ══════════════════════════════════════════ */

.gas-site-header--submenu-fullwidth .gas-site-menu__link--parent {
    gap: var(--gas-space-xs);
    cursor: pointer;
}

.gas-site-header--submenu-fullwidth .gas-site-header__col,
.gas-site-header--submenu-fullwidth .gas-site-header__primary-nav,
.gas-site-header--submenu-fullwidth .gas-site-header__gas-menu,
.gas-site-header--submenu-fullwidth .gas-site-menu--primary,
.gas-site-header--submenu-fullwidth .gas-site-menu--gas {
    position: static;
}

.gas-site-header--submenu-fullwidth .gas-site-menu__item--has-children {
    position: static;
}

.gas-site-menu__dropdown--fullwidth {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 0;
    box-shadow: var(--gas-shadow-l);
    transform: translateY(6px);
}

.gas-site-menu__item.is-open > .gas-site-menu__dropdown--fullwidth {
    transform: translateY(0);
}

.gas-site-menu__dropdown-inner {
    max-width: var(--gas-max-width, 1280px);
    margin: 0 auto;
    padding: var(--gas-space-l) var(--gas-space-xl);
}

.gas-site-menu--columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gas-space-xs);
}

.gas-site-menu--columns .gas-site-menu__item {
    break-inside: avoid;
}

.gas-site-menu--columns .gas-site-menu__link {
    padding: var(--gas-space-xs) var(--gas-space-s);
    border-radius: var(--gas-radius-s);
    font-size: var(--_nav-font-size, var(--_global-font-size, var(--gas-text-s)));
}

.gas-site-menu--columns .gas-site-menu__link:hover {
    background: var(--_nav-hover-bg);
    color: var(--_nav-hover-color);
}

/* ── Fullwidth: nested sub-dropdowns as inline groups ── */

.gas-site-header--submenu-fullwidth .gas-site-menu--columns .gas-site-menu__item--has-children {
    grid-column: 1 / -1;
    position: relative;
}

/* ── Mega-doc : indépendance du submenu_style global ──────────────────────────
   Un item portant --mega-doc doit se comporter comme un panneau fullwidth
   quel que soit le submenu_style du header (click / hover / underline / minimal).
   On duplique les règles position:static sur l'item et ses ancêtres en les scopant
   via :has() sur la présence de --mega-doc dans l'arbre. La coque visuelle
   (.gas-site-menu__dropdown--fullwidth) est déjà stylée ci-dessus — --mega-doc
   ne sert qu'au scoping JS/CSS de ce comportement spécifique.
   ─────────────────────────────────────────────────────────────────────────── */

/* L'item lui-même n'a pas besoin d'un positionnement relatif non-static */
.gas-site-menu__item--mega-doc {
    position: static;
}

/* Ancêtres : remonter position:static pour que la coque dropdown--fullwidth
   puisse se positionner par rapport au viewport / au header sticky.
   On utilise :has() pour cibler les conteneurs dès qu'ils contiennent un mega-doc,
   sans modifier les règles globales existantes. */
.gas-site-header__col:has(.gas-site-menu__item--mega-doc),
.gas-site-header__primary-nav:has(.gas-site-menu__item--mega-doc),
.gas-site-header__gas-menu:has(.gas-site-menu__item--mega-doc),
.gas-site-menu--primary:has(.gas-site-menu__item--mega-doc),
.gas-site-menu--gas:has(.gas-site-menu__item--mega-doc) {
    position: static;
}

/* Le curseur pointer sur le trigger, cohérent avec la branche fullwidth */
.gas-site-menu__item--mega-doc > .gas-site-menu__link--parent {
    gap: var(--gas-space-xs);
    cursor: pointer;
}

/* ── Mise en page du panneau mega ─────────────────────────────────────────────
   - Pas d'espace parasite header↔panneau : la base `.gas-site-menu__dropdown`
     pose `top: calc(100% + space-xs)`. On colle le panneau au header par défaut
     (`--gas-mega-gap: 0`), tout en le laissant définissable.
   - Contenu centré ALIGNÉ sur la bande de contenu du header
     (`--gas-wide-max-width`, et non `--gas-max-width` qui désalignait).
   - Espacements haut / bas / latéral définissables via variables, surchargables
     par le CSS du header (design tokens) ou un override site.
   ─────────────────────────────────────────────────────────────────────────── */
.gas-site-menu__dropdown--mega-doc {
    top: calc(100% + var(--gas-mega-gap, 0px));
}

.gas-site-menu__dropdown--mega-doc .gas-site-menu__dropdown-inner {
    max-width: var(--gas-mega-max-width, var(--gas-wide-max-width, 1120px));
    margin-inline: auto;
    padding-block: var(--gas-mega-pad-top, var(--gas-space-l)) var(--gas-mega-pad-bottom, var(--gas-space-l));
    padding-inline: var(--gas-mega-pad-inline, var(--gas-space-l));
}

/* === MEGA PANEL — LAYOUTS DESKTOP (Lot A) === */

/* full (défaut) : fond bord à bord, coque interne contrainte par --gas-mega-max-width
   — comportement déjà assuré par .gas-site-menu__dropdown--mega-doc ci-dessus, rien à ajouter. */

/* contained : fond pleine largeur visuellement, mais la coque interne se limite à
   --gas-wide-max-width pour un rendu centré même sur très grands écrans. */
.gas-site-menu__dropdown--mega-d-contained .gas-site-menu__dropdown-inner {
    max-width: var(--gas-wide-max-width, 1280px);
    margin-inline: auto;
}

/* item : panneau largeur auto, aligné sous l'élément déclencheur — pas pleine largeur.
   Revert le positionnement fullwidth pour se comporter comme un dropdown classique. */
.gas-site-menu__dropdown--mega-d-item {
    position: absolute;
    left: auto;
    right: auto;
    width: max-content;
    max-width: min(90vw, 720px);
}

/* tabbed (Lot C) : rail d'onglets à gauche + zone de contenu à droite.
   Le wrapper .gas-mega-tabbed__wrapper réorganise le panneau en grille
   deux colonnes : rail (~220px fixe) | contenu (flex-1).
   Sur viewports étroits (< 900px), le rail bascule au-dessus en ligne. */

.gas-site-menu__dropdown--mega-d-tabbed .gas-mega-tabbed__wrapper {
    display: grid;
    grid-template-columns: var(--gas-mega-tab-rail-width, 220px) 1fr;
    gap: 0;
    min-height: var(--gas-mega-tab-min-height, 260px);
}

/* Rail tablist — colonne gauche */
.gas-mega-tabbed__rail {
    border-right: 1px solid var(--_header-border, var(--gas-color-border-default, #e2e8f0));
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-xs, 4px);
    padding: var(--gas-space-s, 8px) 0;
    overflow-y: auto;
}

/* Zone de contenu — colonne droite */
.gas-mega-tabbed__content {
    padding: var(--gas-space-m, 16px) var(--gas-space-l, 24px);
    overflow: auto;
}

/* Bouton onglet */
.gas-mega-tabbed__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    color: var(--_header-text, var(--gas-color-text-default, #1a202c));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--gas-text-s, 8.75px);
    font-weight: 500;
    padding: var(--gas-space-xs, 6px) var(--gas-space-m, 16px);
    text-align: left;
    transition: background var(--gas-transition-fast, 120ms ease),
                color var(--gas-transition-fast, 120ms ease),
                border-color var(--gas-transition-fast, 120ms ease);
    white-space: nowrap;
}

.gas-mega-tabbed__tab:hover {
    background: var(--_header-hover-bg, var(--gas-neutral-50, #f8fafc));
    color: var(--_nav-hover-color, var(--gas-primary, #2d6cdf));
}

.gas-mega-tabbed__tab.is-active,
.gas-mega-tabbed__tab[aria-selected="true"] {
    background: var(--_header-hover-bg, var(--gas-neutral-50, #f8fafc));
    border-left-color: var(--gas-primary, #2d6cdf);
    color: var(--gas-primary, #2d6cdf);
    font-weight: 600;
}

.gas-mega-tabbed__tab:focus-visible {
    outline: 2px solid var(--gas-primary, #2d6cdf);
    outline-offset: -2px;
}

/* Panneau de contenu onglet */
.gas-mega-tabbed__content [role="tabpanel"] {
    outline: none;
}

/* Responsive : rail en ligne au-dessus si viewport étroit */
@media (max-width: 900px) {
    .gas-site-menu__dropdown--mega-d-tabbed .gas-mega-tabbed__wrapper {
        grid-template-columns: 1fr;
    }

    .gas-mega-tabbed__rail {
        border-right: 0;
        border-bottom: 1px solid var(--_header-border, var(--gas-color-border-default, #e2e8f0));
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 var(--gas-space-s, 8px);
    }

    .gas-mega-tabbed__tab {
        border-bottom: 3px solid transparent;
        border-left: 0;
        white-space: nowrap;
    }

    .gas-mega-tabbed__tab.is-active,
    .gas-mega-tabbed__tab[aria-selected="true"] {
        border-bottom-color: var(--gas-primary, #2d6cdf);
        border-left-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gas-mega-tabbed__tab {
        transition: none;
    }
}

/* === MEGA PANEL — LAYOUT DESKTOP OVERLAY (Lot B) === */

/* Scroll-lock sur le body pendant qu'un overlay mega est ouvert. */
body.gas-mega-locked {
    overflow: hidden;
}

/* Backdrop semi-opaque derrière le panneau overlay. */
.gas-mega-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: var(--gas-bg-overlay, rgba(0, 0, 0, 0.55));
    z-index: 980;
    opacity: 0;
    /* Fermé : ne JAMAIS intercepter les clics (sinon il couvre tout le viewport). */
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--gas-transition-base, 200ms ease), visibility var(--gas-transition-base, 200ms ease);
}

.gas-mega-overlay-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* ── Coques mega « takeover » portées au <body> à l'ouverture ──────────────────
   Après portail (JS openMegaShell), la coque n'est plus enfant de `.item.is-open`
   → le CSS de visibilité du dropdown ne s'applique plus. La visibilité + le
   plein écran sont donc pilotés par `.is-mega-open` (2 classes → bat `--mega-doc`).
   ─────────────────────────────────────────────────────────────────────────── */
.gas-site-menu__dropdown--mega-d-overlay.is-mega-open,
.gas-site-header__drawer-mega--m-fullscreen.is-mega-open,
.gas-site-header__drawer-mega--m-drilldown.is-mega-open {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--_header-panel-bg, var(--gas-color-surface, #fff));
}

.gas-site-header__drawer-mega--m-bottomsheet.is-mega-open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 85vh;
    margin: 0;
    overflow-y: auto;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--_header-panel-bg, var(--gas-color-surface, #fff));
}

/* Panneau overlay plein écran (injecté sur data-mega-desktop="overlay"). */
.gas-site-menu__dropdown--mega-d-overlay {
    /* Annule le positionnement dropdown standard. */
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow-y: auto;
    z-index: 990;
    /* Fond opaque : couvre la page sous le panneau (sinon le contenu flotte sur le backdrop). */
    background: var(--_header-panel-bg, var(--gas-color-surface, #fff));
    /* État initial : caché par un fondu. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    transition: opacity var(--gas-transition-base, 200ms ease), visibility var(--gas-transition-base, 200ms ease);
}

.gas-site-menu__dropdown--mega-d-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Barre supérieure avec le bouton fermer (injectée par JS). */
.gas-mega-overlay-bar {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    padding: var(--gas-space-s) var(--gas-space-m);
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    border-bottom: 1px solid var(--_header-border, var(--gas-color-border-default));
    z-index: 1;
}

.gas-mega-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gas-space-xs);
    background: transparent;
    border: 1px solid var(--_header-border, var(--gas-color-border-default));
    border-radius: var(--gas-radius-m, 6px);
    color: var(--_header-text, var(--gas-color-text-default));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--gas-text-s, 8.75px);
    min-height: 36px;
    padding: 0 var(--gas-space-m);
    transition: background var(--gas-transition-fast, 120ms ease), color var(--gas-transition-fast, 120ms ease);
}

.gas-mega-overlay-close:hover {
    background: var(--_header-hover-bg, var(--gas-neutral-100));
    color: var(--_nav-hover-color, var(--gas-primary));
}

.gas-mega-overlay-close:focus-visible {
    outline: 2px solid var(--gas-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .gas-mega-overlay-backdrop,
    .gas-site-menu__dropdown--mega-d-overlay {
        transition: none;
    }
}

.gas-site-header--submenu-fullwidth .gas-site-menu--columns .gas-site-menu__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    padding-left: var(--gas-space-m);
    background: transparent;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gas-space-xs);
}

/* ══════════════════════════════════════════
   Submenu styles: Minimal (modern/clean)
   ══════════════════════════════════════════ */

.gas-site-header--submenu-minimal .gas-site-menu__link--parent {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    gap: var(--gas-space-xs);
    padding: var(--gas-space-xs) var(--gas-space-s);
    border-radius: 0;
    transition: color var(--gas-transition-fast);
    position: relative;
}

.gas-site-header--submenu-minimal .gas-site-menu__link--parent:hover {
    color: var(--_nav-hover-color);
}

.gas-site-header--submenu-minimal .gas-site-menu__item.is-open > .gas-site-menu__link--parent {
    color: var(--_nav-active-color);
}

/* Active indicator bar below the trigger */
.gas-site-header--submenu-minimal .gas-site-menu__item.is-open > .gas-site-menu__link--parent::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--gas-space-s);
    right: var(--gas-space-s);
    height: 2px;
    background: var(--gas-primary);
    border-radius: 1px;
}

/* Flush dropdown: no gap, no border-radius, top accent bar */
.gas-site-header--submenu-minimal .gas-site-menu__dropdown {
    top: 100%;
    border-radius: 0;
    border-top: 2px solid var(--gas-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: var(--gas-space-xs) 0;
    min-width: 220px;
    transform: none;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.gas-site-header--submenu-minimal .gas-site-menu__item.is-open > .gas-site-menu__dropdown {
    opacity: 1;
    transform: none;
}

/* Sub-items: clean left border on hover */
.gas-site-header--submenu-minimal .gas-site-menu--sub .gas-site-menu__link {
    padding: var(--gas-space-xs) var(--gas-space-m);
    border-radius: 0;
    border-left: 2px solid transparent;
    transition: border-color var(--gas-transition-fast), color var(--gas-transition-fast), background var(--gas-transition-fast);
    font-size: var(--_nav-font-size, var(--_global-font-size, var(--gas-text-s)));
}

.gas-site-header--submenu-minimal .gas-site-menu--sub .gas-site-menu__link:hover {
    border-left-color: var(--gas-primary);
    color: var(--_nav-hover-color);
    background: var(--gas-neutral-50, var(--_nav-hover-bg));
}

/* Nested dropdowns in minimal: appear to the right, flush */
.gas-site-header--submenu-minimal .gas-site-menu--sub .gas-site-menu__dropdown {
    left: 100%;
    right: auto;
    top: 0;
    border-top: 0;
    border-left: 2px solid var(--gas-primary);
}

/* ── Chevron indicator ── */

.gas-site-menu__chevron {
    font-size: 0.8em;
    line-height: 1;
    transition: transform var(--gas-transition-fast);
}

.gas-site-menu__item.is-open > .gas-site-menu__link--parent .gas-site-menu__chevron,
.gas-site-menu__item--has-children:hover > .gas-site-menu__link--parent .gas-site-menu__chevron {
    transform: rotate(180deg);
}

/* ── QW3 — Description visible dans les contextes colonnes/fullwidth/minimal ──
   Affichée sous le label du lien, uniquement dans les sous-menus en colonnes
   ou les modes fullwidth/minimal (jamais dans la barre primaire de 1er niveau).
   Le title= est conservé pour les lecteurs d'écran et le survol.
   ─────────────────────────────────────────────────────────────────────────── */

.gas-site-menu__desc {
    display: block;
    font-size: var(--gas-text-xs);
    color: var(--gas-color-text-muted, var(--gas-text-color-muted));
    line-height: 1.3;
    margin-top: 2px;
    font-weight: normal;
}

/* ══════════════════════════════════════════
   Mega menu: Content card
   ══════════════════════════════════════════ */

.gas-site-header__mega-panel--with-content {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: start;
    gap: var(--gas-space-l);
    width: min(580px, calc(100vw - 20px));
}

.gas-site-header__mega-content {
    min-width: 0;
}

.gas-site-header__mega-content-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--_header-text);
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-m);
    overflow: hidden;
    transition: box-shadow var(--gas-transition-fast), border-color var(--gas-transition-fast);
}

.gas-site-header__mega-content-card:hover {
    border-color: var(--gas-primary-light);
    box-shadow: var(--gas-shadow-s);
}

.gas-site-header__mega-content-img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
}

.gas-site-header__mega-content-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--gas-space-s);
}

.gas-site-header__mega-content-date {
    font-size: 10px;
    color: var(--gas-primary);
    font-weight: var(--gas-weight-semi);
}

.gas-site-header__mega-content-title {
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-bold);
    line-height: var(--gas-leading-tight);
}

.gas-site-header__mega-content-meta {
    font-size: 10px;
    color: var(--_header-muted);
}

.gas-site-header__mega-content-price {
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-bold);
    color: var(--gas-primary);
    margin-top: var(--gas-space-xs);
}

.gas-site-header__mega-editorial-links {
    min-width: 0;
}

.gas-site-header__mega-editorial-links-title {
    margin: 0 0 var(--gas-space-s);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-bold);
    color: var(--_header-text);
}

.gas-site-header__mega-editorial-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gas-space-xs);
}

.gas-site-header__mega-editorial-link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gas-space-xs);
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.gas-site-header__mega-editorial-thumb-wrap {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gas-neutral-100);
    border: 1px solid var(--_header-border);
}

.gas-site-header__mega-editorial-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.gas-site-header__mega-editorial-link-title {
    font-size: var(--gas-text-xs);
    line-height: 1.3;
    color: var(--_header-text);
}

.gas-site-header__mega-editorial-link-cat {
    display: block;
    font-size: var(--gas-text-xxs);
    color: var(--_header-muted);
}

/* Note: The old "centered" layout is replaced by the row-based builder.
   Users achieve centered layouts by placing branding alone in a 1/1 row
   and nav in a separate 1/1 row below it. No special layout mode needed. */

/* ══════════════════════════════════════════
   DRAWER — Styles hors media-query
   (actifs quelle que soit la largeur d'écran
   quand .is-drawer-open / .is-visible est posé)
   ══════════════════════════════════════════ */

.gas-site-header__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 85vw);
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--_header-panel-bg);
    border-left: 1px solid var(--_header-border);
    box-shadow: var(--gas-shadow-l);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gas-site-header.is-drawer-open .gas-site-header__drawer {
    display: block;
    transform: translateX(0);
}

.gas-site-header__drawer.is-visible {
    display: block;
}

.gas-site-header__drawer-inner {
    display: grid;
    gap: var(--gas-space-l);
    padding: var(--gas-space-l);
}

/* Drawer head (logo + close) */
.gas-site-header__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gas-space-m);
    padding-bottom: var(--gas-space-s);
    border-bottom: 1px solid var(--_header-border);
}

.gas-site-header__drawer-head .gas-site-header__branding {
    flex: 1;
    min-width: 0;
}

.gas-site-header__drawer-head .gas-site-header__logo img {
    max-height: 40px;
}

/* Sections */
.gas-site-header__drawer-section {
    display: grid;
    gap: var(--gas-space-s);
}

.gas-site-header__drawer-title {
    margin: 0;
    padding: 0 2px;
    font-size: 10px;
    color: var(--_header-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--gas-weight-bold);
}

.gas-site-header__drawer-links,
.gas-site-header__drawer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gas-space-xs);
}

/* Links in drawer */
.gas-site-header__drawer-links a,
.gas-site-header__drawer-menu a,
.gas-site-header__drawer-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 46px;
    padding: var(--gas-space-s) var(--gas-space-m);
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-m);
    background: var(--_header-control-bg);
    color: var(--_header-text);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
    transition: background var(--gas-transition-fast);
}

.gas-site-header__drawer-links a:hover,
.gas-site-header__drawer-menu a:hover {
    background: var(--_header-hover-bg);
}

.gas-site-header__drawer-links .is-current a,
.gas-site-header__drawer-menu .is-current > a,
.gas-site-header__drawer-menu .is-current > .gas-site-header__drawer-row > a {
    background: var(--_nav-active-bg);
    color: var(--_nav-active-color);
    border-color: var(--_nav-active-color);
}

.gas-site-header__drawer-menu .is-current-ancestor > .gas-site-header__drawer-row > a,
.gas-site-header__drawer-menu .is-current-ancestor > .gas-site-header__drawer-row > .gas-site-header__drawer-label {
    color: var(--_nav-active-color);
    font-weight: var(--gas-weight-bold);
}

.gas-site-header__drawer-links .is-highlight a,
.gas-site-header__drawer-menu .is-highlight > a,
.gas-site-header__drawer-menu .is-highlight > .gas-site-header__drawer-row > a,
.gas-site-header__drawer-menu .is-highlight > .gas-site-header__drawer-label,
.gas-site-header__drawer-menu .is-highlight > .gas-site-header__drawer-row > .gas-site-header__drawer-label {
    background: var(--gas-menu-highlight-bg, var(--gas-primary-ultra-light));
    color: var(--gas-menu-highlight-text, var(--gas-primary));
    border-color: var(--gas-menu-highlight-border, var(--gas-primary-light));
    font-weight: var(--gas-weight-bold);
}

.gas-site-header__drawer-toggle {
    cursor: pointer;
    border: 1px solid var(--_header-border);
}

.gas-site-header__drawer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gas-space-xs);
}

.gas-site-header__drawer-row > a,
.gas-site-header__drawer-label {
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: var(--gas-space-s) var(--gas-space-m);
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-m);
    background: var(--_header-control-bg);
    color: var(--_header-text);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
}

.gas-site-header__drawer-toggle {
    width: 46px;
    justify-content: center;
}

.gas-site-header__drawer-submenu {
    margin-top: var(--gas-space-xs);
    padding-left: var(--gas-space-m);
}

/* ── Panneau mega dans le drawer (reflow 1 colonne) ── */

.gas-site-header__drawer-mega {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-s);
    padding: var(--gas-space-s) 0;
}

/* Neutralise les grilles multi-colonnes éventuelles issues des blocs */
.gas-site-header__drawer-mega [style*="grid-template-columns"],
.gas-site-header__drawer-mega .gas-block-columns,
.gas-site-header__drawer-mega .gas-block-cards__grid,
.gas-site-header__drawer-mega .gas-block-loop__grid {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-s);
}

/* Cibles tactiles suffisantes dans le panneau mega mobile */
.gas-site-header__drawer-mega a,
.gas-site-header__drawer-mega button {
    min-height: 44px;
}

/* Lien « Voir tout » en bas du panneau mega */
.gas-site-header__drawer-mega-view-all {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: var(--gas-space-s) var(--gas-space-m);
    border: 1px solid var(--_header-border);
    border-radius: var(--gas-radius-m);
    background: var(--_header-control-bg);
    color: var(--_header-text);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
    text-decoration: none;
    margin-top: var(--gas-space-xs);
    transition: background var(--gas-transition-fast);
}

.gas-site-header__drawer-mega-view-all:hover {
    background: var(--_header-hover-bg);
}

/* ═══════════════════════════════════════════════════
   MEGA PANEL MOBILE — COQUES JS (Lot B)
   fullscreen | bottomsheet | drilldown
   ═══════════════════════════════════════════════════ */

/* ── Barre de navigation supérieure (injectée par JS) ── */

.gas-mega-mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--gas-space-s);
    padding: var(--gas-space-s) var(--gas-space-m);
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    border-bottom: 1px solid var(--_header-border, var(--gas-color-border-default));
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Bouton Retour (fullscreen / drilldown) ou Fermer (bottomsheet injecté différemment) */
.gas-mega-mobile-back,
.gas-mega-mobile-close {
    display: flex;
    align-items: center;
    gap: var(--gas-space-xs);
    background: transparent;
    border: 0;
    color: var(--_header-text, var(--gas-color-text-default));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--gas-text-s, 8.75px);
    font-weight: var(--gas-weight-semi, 600);
    min-height: 44px;
    padding: 0 var(--gas-space-xs);
    text-align: left;
    transition: color var(--gas-transition-fast, 120ms ease);
}

.gas-mega-mobile-back:hover,
.gas-mega-mobile-close:hover {
    color: var(--_nav-hover-color, var(--gas-primary));
}

.gas-mega-mobile-back:focus-visible,
.gas-mega-mobile-close:focus-visible {
    outline: 2px solid var(--gas-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Fullscreen ── */

.gas-site-header__drawer-mega--m-fullscreen {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    z-index: 1100;
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    transform: translateX(100%);
    transition: transform var(--gas-transition-base, 200ms ease);
    display: flex;
    flex-direction: column;
}

.gas-site-header__drawer-mega--m-fullscreen.is-mega-open {
    transform: translateX(0);
}

.gas-site-header__drawer-mega--m-fullscreen .gas-mega-mobile-bar {
    flex-shrink: 0;
}

.gas-site-header__drawer-mega--m-fullscreen .gas-site-header__drawer-mega-view-all {
    margin: var(--gas-space-s) var(--gas-space-m);
}

/* Bloc `nav_mega`, mobile_layout=fullscreen : même coque JS (openMegaShell /
   closeMegaShell portent le panneau au <body>), même chrome injecté
   (.gas-mega-mobile-bar / .gas-mega-mobile-close), mais gatée sur
   `.is-mega-open` plutôt que toujours fixe hors écran — le panneau `nav_mega`
   sert aussi de dropdown desktop `position:absolute`, un `position:fixed`
   permanent le casserait au-dessus du point de rupture. Même z-index que la
   coque `--m-fullscreen` ci-dessus, pour rester cohérent si les deux
   coexistent un jour sur la même page. */
.gas-block-nav-mega__panel[data-nav-mega-mobile="fullscreen"].is-mega-open {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    z-index: 1100;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    display: flex;
    flex-direction: column;
}

/* ── Bottomsheet ── */

.gas-mega-bottomsheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--gas-bg-overlay, rgba(0, 0, 0, 0.55));
    z-index: 1080;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--gas-transition-base, 200ms ease), visibility var(--gas-transition-base, 200ms ease);
}

.gas-mega-bottomsheet-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.gas-site-header__drawer-mega--m-bottomsheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1090;
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    border-radius: var(--gas-radius-l, 12px) var(--gas-radius-l, 12px) 0 0;
    transform: translateY(100%);
    transition: transform var(--gas-transition-base, 200ms ease);
    display: flex;
    flex-direction: column;
}

.gas-site-header__drawer-mega--m-bottomsheet.is-mega-open {
    transform: translateY(0);
}

/* Bloc `nav_mega`, mobile_layout=bottomsheet : même remarque que fullscreen
   ci-dessus (gatée sur `.is-mega-open`, pas toujours fixe). z-index AU-DESSUS
   de `.gas-mega-bottomsheet-backdrop` (1080) — sinon le backdrop, lui bien
   au-dessus depuis l'aplomb du `<body>`, intercepte les clics sur le panneau
   qu'il est censé assombrir DERRIÈRE. Bug mesuré : les 3 liens du premier
   panneau bottomsheet testé résolvaient tous vers le backdrop. */
.gas-block-nav-mega__panel[data-nav-mega-mobile="bottomsheet"].is-mega-open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 85vh;
    margin: 0;
    overflow-y: auto;
    z-index: 1090;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    border-radius: var(--gas-radius-l, 12px) var(--gas-radius-l, 12px) 0 0;
    display: flex;
    flex-direction: column;
}

/* Poignée visuelle + ligne fermer en tête de bottomsheet (injectées par JS) */
.gas-mega-bottomsheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gas-space-xs);
    padding: var(--gas-space-s) var(--gas-space-m) var(--gas-space-xs);
    flex-shrink: 0;
}

.gas-mega-bottomsheet-grip {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--gas-color-border-default, var(--gas-neutral-300, #ccc));
}

.gas-mega-bottomsheet-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 0 var(--gas-space-m) var(--gas-space-s);
    flex-shrink: 0;
}

.gas-site-header__drawer-mega--m-bottomsheet .gas-site-header__drawer-mega-view-all {
    margin: var(--gas-space-s) var(--gas-space-m);
}

/* ── Drilldown ── */

.gas-site-header__drawer-mega--m-drilldown {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    z-index: 1100;
    background: var(--_header-panel-bg, var(--gas-bg-surface, #fff));
    transform: translateX(100%);
    transition: transform var(--gas-transition-base, 200ms ease);
    display: flex;
    flex-direction: column;
}

.gas-site-header__drawer-mega--m-drilldown.is-mega-open {
    transform: translateX(0);
}

.gas-site-header__drawer-mega--m-drilldown .gas-mega-mobile-bar {
    flex-shrink: 0;
}

.gas-site-header__drawer-mega--m-drilldown .gas-site-header__drawer-mega-view-all {
    margin: var(--gas-space-s) var(--gas-space-m);
}

/* Reduced motion : supprime les transitions d'animation */
@media (prefers-reduced-motion: reduce) {
    .gas-site-header__drawer-mega--m-fullscreen,
    .gas-site-header__drawer-mega--m-drilldown,
    .gas-site-header__drawer-mega--m-bottomsheet,
    .gas-mega-bottomsheet-backdrop {
        transition: none;
    }
}

/* ── Overlay ── */

.gas-site-header.is-drawer-open .gas-site-header__overlay {
    display: block;
}

.gas-site-header__overlay {
    position: fixed;
    inset: 0;
    background: var(--gas-bg-overlay);
    z-index: 190;
}

/* CTA in drawer */
.gas-site-header__drawer .gas-site-header__cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gas-space-s);
}

.gas-site-header__drawer .gas-site-header__cta-group .gas-button {
    justify-content: center;
    text-align: center;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet / Mobile (< 1100px)
   Règles de SWITCH (masquage nav desktop,
   révélation hamburger). Le drawer est hissé
   hors du @media ci-dessus.
   ══════════════════════════════════════════ */

@media (max-width: 1100px) {

    /* Hide all rows except the one with branding */
    .gas-site-header__row:not(.gas-site-header__row--has-branding) {
        display: none;
    }

    /* In the branding row: single column on mobile */
    .gas-site-header__row--has-branding {
        grid-template-columns: 1fr;
    }

    /* Hide non-first columns on mobile */
    .gas-site-header__row--has-branding .gas-site-header__col:not(:first-child) {
        display: none;
    }

    /* First column: only show branding and hamburger */
    .gas-site-header__row--has-branding .gas-site-header__col:first-child > *:not(.gas-site-header__element--branding):not(.gas-site-header__toggle) {
        display: none;
    }

    /* Fallback: when no branding row exists, show the first row (with hamburger) */
    .gas-site-header--no-branding .gas-site-header__row:first-child {
        display: grid;
        grid-template-columns: 1fr;
    }

    .gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:not(:first-child) {
        display: none;
    }

    .gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:first-child > *:not(.gas-site-header__toggle) {
        display: none;
    }

    /* Mobile logo width override */
    .gas-site-header__logo img {
        max-width: var(--_logo-w-mobile, var(--_logo-w));
    }

    /* Hamburger visible on mobile */
    .gas-site-header__toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .gas-site-header__element-wrap--sep-left,
    .gas-site-header__element-wrap--sep-right {
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* ── Responsive size overrides (mobile variants) ── */
    /* When --_xxx-mobile is set via inline style, override the desktop value on mobile */
    .gas-site-header[style*="--_global-font-size-mobile"] {
        --_global-font-size: var(--_global-font-size-mobile);
    }
    .gas-site-header[style*="--_nav-font-size-mobile"] {
        --_nav-font-size: var(--_nav-font-size-mobile);
    }
    .gas-site-header[style*="--_member-font-size-mobile"] {
        --_member-font-size: var(--_member-font-size-mobile);
    }
    .gas-site-header[style*="--_app-font-size-mobile"] {
        --_app-font-size: var(--_app-font-size-mobile);
    }
    .gas-site-header[style*="--_account-font-size-mobile"] {
        --_account-font-size: var(--_account-font-size-mobile);
    }
    .gas-site-header[style*="--_global-menu-gap-mobile"] {
        --_global-menu-gap: var(--_global-menu-gap-mobile);
    }
    .gas-site-header[style*="--_nav-menu-gap-mobile"] {
        --_nav-menu-gap: var(--_nav-menu-gap-mobile);
    }
    .gas-site-header[style*="--_member-menu-gap-mobile"] {
        --_member-menu-gap: var(--_member-menu-gap-mobile);
    }
    .gas-site-header[style*="--_app-menu-gap-mobile"] {
        --_app-menu-gap: var(--_app-menu-gap-mobile);
    }
    .gas-site-header[style*="--_account-menu-gap-mobile"] {
        --_account-menu-gap: var(--_account-menu-gap-mobile);
    }

    /* School promo in mobile */
    .gas-site-header__school-promo-inner {
        padding-left: var(--gas-space-m);
        padding-right: var(--gas-space-m);
    }

    .gas-site-header__school-cta { margin-left: 0; }
}

/* ══════════════════════════════════════════════════
   BREAKPOINTS MOBILES ADDITIFS — presets tablet/wide
   Scopés par classe racine : n'affectent que les
   headers portant la classe --mbp-{preset}.
   En dessous de 1100 px, les règles standard
   @media ≤1100 et les règles scopées s'appliquent
   toutes les deux (idempotent).
   ══════════════════════════════════════════════════ */

/* Preset tablet — bascule hamburger + drawer à 1280 px */
@media (max-width: 1280px) {
    .gas-site-header--mbp-tablet .gas-site-header__row:not(.gas-site-header__row--has-branding) {
        display: none;
    }

    .gas-site-header--mbp-tablet .gas-site-header__row--has-branding {
        grid-template-columns: 1fr;
    }

    .gas-site-header--mbp-tablet .gas-site-header__row--has-branding .gas-site-header__col:not(:first-child) {
        display: none;
    }

    .gas-site-header--mbp-tablet .gas-site-header__row--has-branding .gas-site-header__col:first-child > *:not(.gas-site-header__element--branding):not(.gas-site-header__toggle) {
        display: none;
    }

    .gas-site-header--mbp-tablet.gas-site-header--no-branding .gas-site-header__row:first-child {
        display: grid;
        grid-template-columns: 1fr;
    }

    .gas-site-header--mbp-tablet.gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:not(:first-child) {
        display: none;
    }

    .gas-site-header--mbp-tablet.gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:first-child > *:not(.gas-site-header__toggle) {
        display: none;
    }

    .gas-site-header--mbp-tablet .gas-site-header__logo img {
        max-width: var(--_logo-w-mobile, var(--_logo-w));
    }

    .gas-site-header--mbp-tablet .gas-site-header__toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .gas-site-header--mbp-tablet .gas-site-header__element-wrap--sep-left,
    .gas-site-header--mbp-tablet .gas-site-header__element-wrap--sep-right {
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .gas-site-header--mbp-tablet[style*="--_global-font-size-mobile"] {
        --_global-font-size: var(--_global-font-size-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_nav-font-size-mobile"] {
        --_nav-font-size: var(--_nav-font-size-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_member-font-size-mobile"] {
        --_member-font-size: var(--_member-font-size-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_app-font-size-mobile"] {
        --_app-font-size: var(--_app-font-size-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_account-font-size-mobile"] {
        --_account-font-size: var(--_account-font-size-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_global-menu-gap-mobile"] {
        --_global-menu-gap: var(--_global-menu-gap-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_nav-menu-gap-mobile"] {
        --_nav-menu-gap: var(--_nav-menu-gap-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_member-menu-gap-mobile"] {
        --_member-menu-gap: var(--_member-menu-gap-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_app-menu-gap-mobile"] {
        --_app-menu-gap: var(--_app-menu-gap-mobile);
    }
    .gas-site-header--mbp-tablet[style*="--_account-menu-gap-mobile"] {
        --_account-menu-gap: var(--_account-menu-gap-mobile);
    }

    .gas-site-header--mbp-tablet .gas-site-header__school-promo-inner {
        padding-left: var(--gas-space-m);
        padding-right: var(--gas-space-m);
    }

    .gas-site-header--mbp-tablet .gas-site-header__school-cta { margin-left: 0; }
}

/* Preset wide — bascule hamburger + drawer à 1440 px */
@media (max-width: 1440px) {
    .gas-site-header--mbp-wide .gas-site-header__row:not(.gas-site-header__row--has-branding) {
        display: none;
    }

    .gas-site-header--mbp-wide .gas-site-header__row--has-branding {
        grid-template-columns: 1fr;
    }

    .gas-site-header--mbp-wide .gas-site-header__row--has-branding .gas-site-header__col:not(:first-child) {
        display: none;
    }

    .gas-site-header--mbp-wide .gas-site-header__row--has-branding .gas-site-header__col:first-child > *:not(.gas-site-header__element--branding):not(.gas-site-header__toggle) {
        display: none;
    }

    .gas-site-header--mbp-wide.gas-site-header--no-branding .gas-site-header__row:first-child {
        display: grid;
        grid-template-columns: 1fr;
    }

    .gas-site-header--mbp-wide.gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:not(:first-child) {
        display: none;
    }

    .gas-site-header--mbp-wide.gas-site-header--no-branding .gas-site-header__row:first-child .gas-site-header__col:first-child > *:not(.gas-site-header__toggle) {
        display: none;
    }

    .gas-site-header--mbp-wide .gas-site-header__logo img {
        max-width: var(--_logo-w-mobile, var(--_logo-w));
    }

    .gas-site-header--mbp-wide .gas-site-header__toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .gas-site-header--mbp-wide .gas-site-header__element-wrap--sep-left,
    .gas-site-header--mbp-wide .gas-site-header__element-wrap--sep-right {
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .gas-site-header--mbp-wide[style*="--_global-font-size-mobile"] {
        --_global-font-size: var(--_global-font-size-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_nav-font-size-mobile"] {
        --_nav-font-size: var(--_nav-font-size-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_member-font-size-mobile"] {
        --_member-font-size: var(--_member-font-size-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_app-font-size-mobile"] {
        --_app-font-size: var(--_app-font-size-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_account-font-size-mobile"] {
        --_account-font-size: var(--_account-font-size-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_global-menu-gap-mobile"] {
        --_global-menu-gap: var(--_global-menu-gap-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_nav-menu-gap-mobile"] {
        --_nav-menu-gap: var(--_nav-menu-gap-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_member-menu-gap-mobile"] {
        --_member-menu-gap: var(--_member-menu-gap-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_app-menu-gap-mobile"] {
        --_app-menu-gap: var(--_app-menu-gap-mobile);
    }
    .gas-site-header--mbp-wide[style*="--_account-menu-gap-mobile"] {
        --_account-menu-gap: var(--_account-menu-gap-mobile);
    }

    .gas-site-header--mbp-wide .gas-site-header__school-promo-inner {
        padding-left: var(--gas-space-m);
        padding-right: var(--gas-space-m);
    }

    .gas-site-header--mbp-wide .gas-site-header__school-cta { margin-left: 0; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Small mobile (< 600px)
   ══════════════════════════════════════════ */

@media (max-width: 600px) {
    .gas-site-header__row--has-branding {
        padding: var(--gas-space-xs) var(--gas-space-m);
        gap: var(--gas-space-s);
        min-height: 52px;
    }

    .gas-site-header__brand-link {
        gap: var(--gas-space-s);
    }

    .gas-site-header__logo img {
        max-height: 42px;
    }

    .gas-site-header__site-name {
        font-size: var(--gas-text-s);
    }

    .gas-site-header__site-description {
        display: none;
    }

    .gas-site-header__school-promo-inner {
        flex-wrap: wrap;
        gap: var(--gas-space-s);
    }

    .gas-site-header__school-cta {
        width: 100%;
        justify-content: center;
    }

    .gas-site-header__drawer {
        width: 100vw;
    }

    .gas-site-header__drawer .gas-site-header__cta-group {
        grid-template-columns: 1fr;
    }
}

/* ────────────────────────────────────────────────────────────
 * Blocs « contenu libre » du header builder
 * ──────────────────────────────────────────────────────────── */

/* Texte libre */
.gas-site-header__text {
    color: inherit;
    line-height: 1.4;
}
.gas-site-header__text p { margin: 0; }
.gas-site-header__text p + p { margin-top: 0.4em; }
.gas-site-header__text--size-s { font-size: 8.5px; }
.gas-site-header__text--size-m { font-size: 10px; }
.gas-site-header__text--size-l { font-size: 12px; }
.gas-site-header__text--left   { text-align: left; }
.gas-site-header__text--center { text-align: center; }
.gas-site-header__text--right  { text-align: right; }
.gas-site-header__text a {
    color: inherit;
    text-decoration: underline;
}

/* Spacer */
.gas-site-header__spacer {
    align-self: stretch;
    min-width: 4px;
}
.gas-site-header__spacer--grow {
    flex: 1 1 auto;
}

/* Divider */
.gas-site-header__divider {
    flex: 0 0 auto;
}
.gas-site-header__divider--horizontal {
    align-self: stretch;
}

/* Mobile : si data-mobile-width est posé, surcharger la largeur dans le drawer */
@media (max-width: 768px) {
    .gas-site-header__spacer[data-mobile-width] {
        width: attr(data-mobile-width);
    }
}

/* Image custom */
.gas-site-header__image { display: inline-flex; align-items: center; }
.gas-site-header__image-img { display: block; max-width: 100%; height: auto; }

/* Recherche */
.gas-site-header__search { align-items: center; display: inline-flex; gap: 4px; }
.gas-site-header__search-input {
    background: var(--gas-bg-surface-alt, #f7f9fc);
    border: 1px solid var(--gas-border-color, #d7dde5);
    border-radius: var(--gas-radius-s, 4px);
    color: inherit;
    font-size: 9px;
    height: 32px;
    min-width: 160px;
    padding: 4px 10px;
}
.gas-site-header__search-btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--gas-border-color, #d7dde5);
    border-radius: var(--gas-radius-s, 4px);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
}
.gas-site-header__search-btn:hover { color: var(--gas-primary, #2d6cdf); }
.gas-site-header__search--icon { position: relative; }
.gas-site-header__search--icon .gas-site-header__search-input { display: none; min-width: 200px; }
.gas-site-header__search--icon:focus-within .gas-site-header__search-input { display: inline-block; }
.gas-site-header__search-icon-btn {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 4px;
}

/* Icon link */
.gas-site-header__icon-link {
    align-items: center;
    background: var(--gas-site-header-icon-link-bg, transparent);
    border: 1px solid transparent;
    color: var(--gas-site-header-icon-link-color, inherit);
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.gas-site-header__icon-link:hover,
.gas-site-header__icon-link:focus-visible {
    color: var(--gas-site-header-icon-link-hover-color, var(--gas-primary));
    transform: translateY(-1px);
}
.gas-site-header__icon-link--s {
    height: 28px;
    width: 28px;
}
.gas-site-header__icon-link--m {
    height: 36px;
    width: 36px;
}
.gas-site-header__icon-link--l {
    height: 44px;
    width: 44px;
}
.gas-site-header__icon-link--s svg {
    height: 18px;
    width: 18px;
}
.gas-site-header__icon-link--m svg {
    height: 22px;
    width: 22px;
}
.gas-site-header__icon-link--l svg {
    height: 26px;
    width: 26px;
}
.gas-site-header__icon-link--plain {
    height: auto;
    width: auto;
}
.gas-site-header__icon-link--circle {
    border-radius: 999px;
}
.gas-site-header__icon-link--square {
    border-radius: var(--gas-radius-s, 4px);
}
.gas-site-header__icon-link--outline {
    border-color: currentColor;
    border-radius: 999px;
}

/* Social icons */
.gas-site-header__social { align-items: center; display: inline-flex; gap: 8px; }
.gas-site-header__social--s svg { width: 18px; height: 18px; }
.gas-site-header__social--m svg { width: 22px; height: 22px; }
.gas-site-header__social--l svg { width: 28px; height: 28px; }
.gas-site-header__social-link {
    align-items: center;
    color: inherit;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    transition: opacity 120ms, transform 120ms;
}
.gas-site-header__social-link:hover { opacity: 0.7; }
.gas-site-header__social--rounded .gas-site-header__social-link,
.gas-site-header__social--square .gas-site-header__social-link {
    background: var(--gas-bg-surface-alt, #f7f9fc);
    border-radius: var(--gas-radius-s, 4px);
    padding: 6px;
}
.gas-site-header__social--rounded .gas-site-header__social-link { border-radius: 50%; }

/* Newsletter */
.gas-site-header__newsletter { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.gas-site-header__newsletter--stacked { flex-direction: column; align-items: stretch; }
.gas-site-header__newsletter-title {
    color: inherit;
    font-size: 8.5px;
    font-weight: 600;
    margin-right: 6px;
}
.gas-site-header__newsletter-input {
    background: var(--gas-bg-surface-alt, #f7f9fc);
    border: 1px solid var(--gas-border-color, #d7dde5);
    border-radius: var(--gas-radius-s, 4px);
    color: inherit;
    font-size: 9px;
    height: 32px;
    min-width: 180px;
    padding: 4px 10px;
}

/* Next activity / Last article : laisser le shortcode définir son rendu */
.gas-site-header__next-activity,
.gas-site-header__last-article {
    display: inline-block;
    max-width: 360px;
    font-size: 8.5px;
}
.gas-site-header__next-activity > *,
.gas-site-header__last-article > * {
    margin: 0;
}

/* Contact */
.gas-site-header__contact { align-items: center; display: inline-flex; gap: 12px; }
.gas-site-header__contact--stacked { flex-direction: column; align-items: flex-start; gap: 4px; }
.gas-site-header__contact-item {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: 8.5px;
    gap: 4px;
    text-decoration: none;
}
.gas-site-header__contact-item:hover { color: var(--gas-primary, #2d6cdf); }

/* Cart badge */
.gas-site-header__cart-badge,
.gas-site-header__notif-badge {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 4px;
    position: relative;
    text-decoration: none;
}
.gas-site-header__cart-badge:hover,
.gas-site-header__notif-badge:hover { color: var(--gas-primary, #2d6cdf); }
.gas-site-header__cart-badge-count,
.gas-site-header__notif-badge-count {
    background: var(--gas-danger, #d93030);
    border-radius: 999px;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    position: absolute;
    right: -6px;
    top: -4px;
}
.gas-site-header__cart-badge-label,
.gas-site-header__notif-badge-label {
    font-size: 8.5px;
    margin-left: 4px;
}

/* HTML raw + shortcode wrappers : pas de style imposé, l'admin gère */
.gas-site-header__html-raw,
.gas-site-header__shortcode {
    display: inline-flex;
    align-items: center;
}

/* Icône vectorielle par item de menu (registre partagé). Dimensionnée en `em`
   pour suivre la taille du libellé — la même règle sert donc la barre desktop et
   le tiroir mobile, où le texte est plus grand. `currentColor` est hérité du
   lien : l'icône suit l'état courant/survol sans règle dédiée. */
.gas-site-menu__icon {
    flex: 0 0 auto;
    height: 1.1em;
    width: 1.1em;
    margin-right: var(--gas-space-xs, 4px);
    vertical-align: middle;
}

/* Icône / image par item de menu */
.gas-site-menu__icon-img {
    height: 1.25em;
    width: auto;
    vertical-align: middle;
    border-radius: var(--gas-radius-s, 4px);
    margin-right: var(--gas-space-xs, 4px);
    object-fit: contain;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .gas-site-header {
        --_header-bg: var(--gas-site-header-bg-dark, var(--_header-panel-bg));
        --_nav-hover-color:       var(--gas-primary-light);
        --_nav-active-color:      var(--gas-primary-light);
        --_member-hover-color:    var(--gas-primary-light);
        --_member-active-color:   var(--gas-primary-light);
        --_cta-primary-bg:        var(--gas-primary-light);
        --_cta-primary-hover-bg:  var(--gas-primary-light);
        --_cta-primary-color:     var(--gas-color-on-primary);
        --_cta-secondary-color:   var(--gas-text-color-link);
        --_cta-secondary-hover-bg: var(--_header-hover-bg);
    }
}

/* ══ Header Document — mode de repli du menu (data-nav-collapse) ═════════════
   Le repli en tiroir n'est pas un fait mobile : un header épuré peut vouloir son
   burger sur grand écran, un menu de deux entrées peut ne jamais vouloir en
   avoir. Le renderer résout le `collapse_mode` des blocs `site_menu` et émet
   `data-nav-collapse` sur le <header> ; les règles ci-dessous s'y accordent.

   Elles vivent HORS media query à dessein : un sélecteur portant l'attribut est
   plus spécifique que la règle du tiroir (deux classes) dans `@media
   (max-width: 900px)`, et les media queries n'entrent pas dans le calcul de
   spécificité. Un seul bloc suffit donc pour les deux sens, sans dupliquer la
   media query ni en dépendre. */

/* ── never : jamais de tiroir, le menu reste en flux à toutes les largeurs ── */
.gas-site-header--document[data-nav-collapse="never"] .gas-site-header__document-drawer,
.gas-site-header--document[data-nav-collapse="never"] .gas-site-header__document-toggle,
.gas-site-header--document[data-nav-collapse="never"] .gas-site-header__document-overlay {
    display: none;
}

/* ── always : tiroir à toutes les largeurs, y compris sur grand écran ─────── */
.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-drawer {
    background: var(--gas-color-surface-card, #fff);
    border-left: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
    bottom: 0;
    box-shadow: var(--gas-shadow-l, -18px 0 36px rgba(15, 23, 42, 0.18));
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 92vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform var(--gas-transition-base, 220ms ease);
    visibility: hidden;
    width: min(360px, 92vw);
    z-index: 260;
}

.gas-site-header--document[data-nav-collapse="always"].is-document-drawer-open .gas-site-header__document-drawer {
    transform: translateX(0);
    visibility: visible;
}

/* Le hissage de z-index qui vivait ici a disparu avec la même cause que sur
   mobile : le tiroir n'est plus imbriqué dans une bande, il est frère de
   `.gas-site-header__document` sous `<header>`. Rien ne le recouvre plus. */

/* Même règle que dans la media query 900px, mais pour `always` (burger à toutes
   les largeurs) : tiroir composé = les menus de bande ne sont pas empruntés par
   le JS, ils doivent donc être repliés en CSS, ici quelle que soit la largeur. */
.gas-site-header--document[data-nav-collapse="always"]:has(.gas-site-header__document-drawer--composed)
.gas-site-header__document .gas-block-site-menu {
    display: none;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-toggle {
    align-items: center;
    background: var(--gas-color-surface-card, #fff);
    border: 1px solid var(--gas-color-border-default, var(--gas-color-border, #d7dde8));
    border-radius: var(--gas-radius-m, 8px);
    box-shadow: var(--gas-shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.08));
    color: var(--gas-color-text, #1f2937);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: var(--gas-space-m, 16px);
    bottom: var(--gas-space-m, 16px);
    top: auto;
    width: 42px;
    z-index: 130;
}

.gas-site-header--document[data-nav-collapse="always"]:has(.gas-site-header__document > *:first-child .gas-block-site-branding)
.gas-site-header__document-toggle {
    bottom: auto;
    top: var(--gas-space-m, 16px);
}

/* Même override burger_side/burger_placement qu'en mode `responsive`
   (media query 900px), mais pour `always` (visible aussi en desktop). La
   spécificité (0,4,0 / 0,3,0) bat sans ambiguïté celle de la règle de base
   ci-dessus (0,3,0), pour ne pas dépendre de l'ordre des règles. */
.gas-site-header--document.gas-site-header--burger-start[data-nav-collapse="always"] .gas-site-header__document-toggle {
    inset-inline-end: auto;
    inset-inline-start: var(--gas-space-m, 16px);
}

.gas-site-header--document.gas-site-header--burger-inline[data-nav-collapse="always"] .gas-site-header__document-toggle {
    bottom: auto;
    inset-inline-end: auto;
    inset-inline-start: auto;
    position: static;
    right: auto;
    top: auto;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-toggle span {
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 18px;
}

/* La tête du tiroir est construite en JS ; sa mise en forme vit dans la media
   query mobile. Sans ces déclarations, le titre et la croix se chevauchent en
   desktop (constaté à la capture). */
.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-drawer-head {
    align-items: center;
    background: var(--gas-color-surface-card, #fff);
    border-bottom: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
    display: flex;
    flex: 0 0 auto;
    gap: var(--gas-space-s, 8px);
    justify-content: space-between;
    min-height: 64px;
    padding: var(--gas-space-m, 16px);
    position: sticky;
    top: 0;
    z-index: 1;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-drawer-title {
    color: var(--gas-color-text-strong, var(--gas-color-text, #1f2937));
    font-size: var(--gas-text-m, 16px);
    line-height: 1.2;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-drawer-close {
    align-items: center;
    background: var(--gas-color-surface-muted, #f3f4f6);
    border: 1px solid var(--gas-color-border-default, var(--gas-color-border, #e2e8f0));
    border-radius: var(--gas-radius-m, 8px);
    color: var(--gas-color-text, #1f2937);
    cursor: pointer;
    display: inline-flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 40px;
}

/* Le panneau est en `fixed`, mais la LISTE garde sa disposition desktop en
   ligne : les entrées débordent des 360 px du tiroir (mesuré : 3/7 atteignables
   en 1440 px). Les mêmes règles de mise en colonne que la media query mobile
   sont donc nécessaires ici. */
.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu--inline .gas-block-site-menu__list {
    align-items: stretch;
    display: grid;
    gap: 0;
    justify-content: stretch;
    overflow: visible;
    padding: var(--gas-space-s, 8px);
    width: auto;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__item {
    border-bottom: 1px solid var(--gas-color-border-subtle, #edf1f5);
}

.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__item.has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__link {
    border-radius: var(--gas-radius-s, 6px);
    display: flex;
    font-size: 14px;
    justify-content: flex-start;
    min-height: 46px;
    padding: 12px 10px;
    white-space: normal;
    width: 100%;
}

/* Les sous-menus deviennent des accordéons dans le flux, pas des déroulants
   positionnés — sinon ils sortent du panneau. */
.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__sublist {
    position: static;
    display: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    padding-left: var(--gas-space-s, 8px);
}

.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__item.is-open > .gas-block-site-menu__sublist {
    display: block;
}

/* Le survol ne doit plus ouvrir : dans un tiroir, l'ouverture est au clic. */
.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__item:hover > .gas-block-site-menu__sublist,
.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__item:focus-within > .gas-block-site-menu__sublist {
    display: none;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-block-site-menu__item.is-open > .gas-block-site-menu__sublist {
    display: block;
}

.gas-site-header--document[data-nav-collapse="always"] .gas-site-header__document-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgb(15 23 42 / 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gas-transition-base, 220ms ease);
}

.gas-site-header--document[data-nav-collapse="always"].is-document-drawer-open .gas-site-header__document-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Verrou de défilement : la règle historique vit dans la media query mobile ;
   en mode `always` le tiroir s'ouvre aussi sur grand écran. */
body.gas-site-header-document-drawer-open:has(.gas-site-header--document[data-nav-collapse="always"].is-document-drawer-open) {
    overflow: hidden;
}

/* ══ Header Document — agencement mobile des bandes ══════════════════════════
   `mobile_order` / `mobile_hidden` sur le bloc `section`. Le conteneur ne passe
   en flex QUE sous le point de rupture : hors media query il reste `block`, donc
   le desktop est strictement inchangé. */
@media (max-width: 900px) {
    .gas-site-header__document:has(> * > .gas-block-section--mobile-order-0),
    .gas-site-header__document:has(> * > [class*="gas-block-section--mobile-order-"]) {
        display: flex;
        flex-direction: column;
    }

    /* L'ordre est posé sur le WRAPPER `.gas-block-anchor` (enfant direct du
       conteneur flex), pas sur la section : `order` n'agit que sur un enfant
       direct du conteneur. Le z-index suit le même rang, DÉCROISSANT comme la
       règle `nth-child` d'origine, pour qu'un déroulant passe au-dessus de la
       bande suivante. */
    .gas-site-header__document > *:has(.gas-block-section--mobile-order-0) { order: 0; z-index: 40; }
    .gas-site-header__document > *:has(.gas-block-section--mobile-order-1) { order: 1; z-index: 39; }
    .gas-site-header__document > *:has(.gas-block-section--mobile-order-2) { order: 2; z-index: 38; }
    .gas-site-header__document > *:has(.gas-block-section--mobile-order-3) { order: 3; z-index: 37; }
    .gas-site-header__document > *:has(.gas-block-section--mobile-order-4) { order: 4; z-index: 36; }
    .gas-site-header__document > *:has(.gas-block-section--mobile-order-5) { order: 5; z-index: 35; }

    /* Masquage : sur le wrapper aussi, sinon il garderait sa boîte (et son rang
       d'empilement) alors que la section serait invisible. */
    .gas-site-header__document > *:has(> .gas-block-section--mobile-hidden),
    .gas-block-section--mobile-hidden {
        display: none;
    }

    /* Ancrage du burger quand l'ordre est réordonné. L'ancrage par défaut se
       décide sur `:first-child`, qui est du DOM : une bande remontée par
       `mobile_order` reste dernière dans le document, et le burger atterrissait
       alors sur la bande du bas — recouvrant ses liens (attrapé par
       `scripts/check-header-mobile.mjs`). Ici on suit l'ordre VISUEL.
       Cas couverts : logo en premier (ancrage haut) ou en dernier (défaut bas).
       Un logo au MILIEU d'un ordre personnalisé resterait mal ancré — cas absent
       des compositions réelles, à traiter le jour où il apparaît. */
    .gas-site-header--document:has(.gas-block-section--mobile-order-0 .gas-block-site-branding)
    .gas-site-header__document-toggle {
        bottom: auto;
        top: var(--gas-space-m, 16px);
    }
}

/* ══ Auto-hide au défilement descendant ══════════════════════════════════════
   Le header se range vers le haut quand on descend et revient dès qu'on remonte
   (`smart_behavior.hide_on_scroll_down`). N'a de sens qu'avec un header sticky :
   un header statique sort de l'écran tout seul. Le JS retire la classe dès qu'un
   panneau est ouvert, pour ne jamais escamoter un menu déployé. */
.gas-site-header--smart.is-hidden-down:not(.gas-site-header--static) {
    transform: translateY(-100%);
}

.gas-site-header--smart:not(.gas-site-header--static) {
    transition: transform var(--gas-transition-base, 220ms ease),
        background-color var(--gas-transition-base, 220ms ease);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .gas-site-header--smart:not(.gas-site-header--static) {
        transition: none;
    }
    /* Mouvement réduit : on ne masque pas — un header qui disparaît sans
       transition est plus déroutant qu'un header qui reste. */
    .gas-site-header--smart.is-hidden-down:not(.gas-site-header--static) {
        transform: none;
    }
}