/* ==========================================================================
   EN-TÊTE — port des sections 3.1, 4.1, 4.2, 13b, 14 et 15 du design V4.
   Chargée sur toutes les pages par inc/assets.php, après style.css.

   Balisage : inc/header.php. Comportements : assets/js/header.js.
   Racine : .gmparts-header (pas .site-header, voir inc/header.php).
   Tout ce qui est à l'intérieur garde les noms de classes du design.

   Règle du projet : aucune couleur, ombre, rayon, police ni espacement en
   dur ici. Tout vient des jetons :root de style.css. Les dimensions
   propres aux composants de l'en-tête, que le design écrit en dur dans
   ses règles, sont déclarées ci-dessous comme jetons locaux --hd-*, à
   promouvoir dans style.css le jour où l'on décide de les y regrouper.

   Points de rupture du design : 1100, 768, 520. Le seuil 1024 ne porte
   aucune règle d'en-tête dans le design (hero et bande compte pro
   seulement). Le mouvement réduit est déjà respecté globalement par
   style.css : toutes les transitions de ce fichier sont désactivées.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. JETONS LOCAUX DE L'EN-TÊTE
   Dimensions de composants, ordres d'empilement, effets. Mêmes valeurs
   que le design.
   -------------------------------------------------------------------------- */
:root {

    /* Hauteurs des barres */
    --hd-topbar-min-h:   36px;   /* topbar                                  */
    --hd-masthead-min-h: 82px;   /* masthead sur bureau                     */
    --hd-nav-h:          52px;   /* entrées de la navigation principale     */
    --hd-rail-h:         44px;   /* rail des marques                        */
    --hd-panel-head-h:   72px;   /* en-tête du panneau mobile               */
    --hd-panel-row-h:    56px;   /* ligne du panneau mobile                 */
    --hd-cta-space:      72px;   /* place réservée sous la page pour le CTA */

    /* Logo */
    --hd-logo-w:   75px;
    --hd-logo-h:   57px;
    --hd-logo-mx:  30px;         /* marge latérale du logo                  */
    --hd-panel-logo-w: 64px;     /* logo dans le panneau mobile             */

    /* Recherche */
    --hd-search-h:     48px;
    --hd-search-basis: 300px;    /* largeur de départ avant répartition     */
    --hd-search-btn:   40px;     /* bouton rond dans la pilule              */
    --hd-ring:         2px;      /* anneau de focus, même valeur que style.css */

    /* Boutons WhatsApp et « View all brands » */
    --hd-pill-btn-w:   144px;
    --hd-whatsapp-h:   34px;
    --hd-rail-all-h:   33px;
    --hd-rail-more:    32px;     /* bouton rond mobile du rail              */

    /* Interrupteur TVA */
    --hd-vat-track-w:  36px;
    --hd-vat-track-h:  20px;
    --hd-vat-knob:     16px;
    --hd-vat-label-w:  52px;     /* largeur fixe : basculer ne décale rien  */

    /* Pastille du panier */
    --hd-count-size:   18px;
    --hd-count-px:     5px;

    /* Divers */
    --hd-divider-h:    24px;     /* trait vertical entre TVA et boutons     */
    --hd-sep-h:        14px;     /* séparateur de la topbar                 */
    --hd-icon-sm:      16px;     /* icône WhatsApp                          */
    --hd-icon-md:      20px;     /* icônes du panneau mobile                */
    --hd-hairline:     .9;       /* épaisseur du trait, panneau mobile      */
    --hd-line:         1px;      /* bordures                                */
    --hd-line-thick:   2px;      /* liseré de la pastille du panier         */
    --hd-blur:         12px;     /* flou des barres translucides            */
    --hd-saturate:     180%;

    /* Ordres d'empilement, partagés avec header.js et les autres feuilles */
    --z-masthead:        999;
    --z-masthead-mobile:  50;
    --z-panel:          1000;
    --z-cta:              35;
}

/* --------------------------------------------------------------------------
   1. BOUTONS — composant partagé (design 3.1)
   Chargé ici parce que l'en-tête est sur toutes les pages. Les variantes
   ghost, icon et pill, propres à l'accueil, iront dans accueil.css.
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    height: var(--touch);
    padding: 0 var(--sp-20);
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease-press);
}

.btn:hover {
    text-decoration: none;
}

.btn:active {
    transform: scale(.95);
}

.btn--primary {
    background: var(--action);
    color: var(--paper);
}

.btn--primary:hover {
    background: var(--action-lift);
    color: var(--paper);
}

.btn--outline {
    background: transparent;
    border: var(--hd-line) solid var(--line-strong);
    color: var(--ink);
}

.btn--outline:hover {
    border-color: var(--slate);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   2. TOPBAR (design 4.1)
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--topbar-bg);
    color: var(--paper);
    font-size: var(--fs-12);
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8) var(--sp-24);
    min-height: var(--hd-topbar-min-h);
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
}

.topbar__args {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6) var(--sp-16);
    min-width: 0;
}

/* Carrousel mobile : header.js ne fait que déplacer .is-active. Sur
   bureau, les trois arguments restent visibles (voir @media 768). */
.topbar__arg {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    white-space: nowrap;
    color: var(--on-dark-text);
    transition: opacity var(--ease-fade);
}

.topbar__arg svg {
    opacity: .7;
}

.topbar__sep {
    width: var(--hd-line);
    height: var(--hd-sep-h);
    background: var(--on-dark-sep);
}

.topbar__mail {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    color: var(--on-dark-text);
    white-space: nowrap;
}

.topbar__mail:hover {
    color: var(--paper);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. MASTHEAD COLLANT (design 4.2)
   position: sticky garde recherche et compte à portée à toute profondeur.
   Le flou donne l'effet givré ; le fond translucide sert de repli où le
   flou n'est pas pris en charge.
   -------------------------------------------------------------------------- */
.masthead {
    position: sticky;
    top: 0;
    z-index: var(--z-masthead);
    background: var(--masthead-bg);
    -webkit-backdrop-filter: saturate(var(--hd-saturate)) blur(var(--hd-blur));
    backdrop-filter: saturate(var(--hd-saturate)) blur(var(--hd-blur));
    border-bottom: var(--hd-line) solid var(--line-strong);
    box-shadow: none;
    transition: box-shadow var(--ease), background var(--ease);
}

/* .is-scrolled : posée par header.js dès que la page quitte le haut. */
.masthead.is-scrolled {
    box-shadow: var(--shadow-masthead);
}

/* .is-fixed : header.js détache la barre de l'en-tête pour qu'elle reste
   épinglée sur toute la page ; l'espaceur comble le vide laissé. */
.masthead.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--paper);
}

.masthead-spacer {
    display: none;
}

.masthead-spacer.is-active {
    display: block;
}

.masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-16);
    min-height: var(--hd-masthead-min-h);
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
}

.masthead__logo {
    flex: none;
}

.masthead__logo img {
    width: var(--hd-logo-w);
    height: var(--hd-logo-h);
    margin: 0 var(--hd-logo-mx);
}

/* Repli sans logo : le nom du site, en texte. État absent du design. */
.masthead__logo-text {
    display: inline-block;
    margin: 0 var(--hd-logo-mx);
    color: var(--ink);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

/* Burger : masqué sur bureau, affiché sous 1100 px. */
.hamburger {
    display: none;
    width: var(--touch);
    height: var(--touch);
    flex: none;
    align-items: center;
    justify-content: center;
    border: var(--hd-line) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--ease), transform var(--ease-press);
}

.hamburger:hover {
    border-color: var(--slate);
}

.hamburger:active {
    transform: scale(.95);
}

/* Champ de recherche en pilule */
.search {
    flex: 1 1 var(--hd-search-basis);
    min-width: 0;
    display: flex;
    align-items: center;
    height: var(--hd-search-h);
    background: var(--chrome);
    border: var(--hd-line) solid transparent;
    border-radius: var(--pill);
    padding: 0 var(--sp-4) 0 var(--sp-20);
    transition: background var(--ease), border-color var(--ease);
}

.search:focus-within {
    background: var(--paper);
    border-color: var(--line-strong);
}

/* Le champ n'a pas d'anneau propre : c'est la pilule qui le porte, et
   seulement au clavier, comme le :focus-visible global de style.css. */
.search:has(.search__input:focus-visible) {
    outline: var(--hd-ring) solid var(--action);
    outline-offset: var(--hd-ring);
}

.search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: var(--fs-14);
}

.search__input::placeholder {
    color: var(--grey);
}

.search__submit {
    width: var(--hd-search-btn);
    height: var(--hd-search-btn);
    flex: none;
    border: 0;
    border-radius: var(--pill);
    background: var(--action);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease-press);
}

.search__submit:hover {
    background: var(--action-lift);
}

.search__submit:active {
    transform: scale(.95);
}

/* Outils : flex none, pour que l'interrupteur TVA ne décale jamais rien. */
.masthead__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    flex: none;
    margin-left: auto;
}

/* Sélecteur de langue : classe prête pour le plugin de traduction. */
.lang {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-13);
    color: var(--grey);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--ease-press);
}

.lang:hover {
    color: var(--ink);
}

.lang:active {
    transform: scale(.95);
}

/* Bouton rond à icône : l'entrée Compte, mobile seulement. */
.icon-btn {
    width: var(--touch);
    height: var(--touch);
    flex: none;
    border: var(--hd-line) solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--ink);
    display: none;
    align-items: center;
    justify-content: center;
    transition: border-color var(--ease), transform var(--ease-press);
}

.icon-btn:hover {
    border-color: var(--slate);
    color: var(--ink);
    text-decoration: none;
}

.icon-btn:active {
    transform: scale(.95);
}

/* Interrupteur TVA : aria-pressed pilote l'état visuel. */
.vat {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}

.vat__track {
    width: var(--hd-vat-track-w);
    height: var(--hd-vat-track-h);
    flex: none;
    border-radius: var(--pill);
    background: var(--line-strong);
    padding: var(--hd-line-thick);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background var(--ease);
}

.vat__knob {
    width: var(--hd-vat-knob);
    height: var(--hd-vat-knob);
    border-radius: var(--pill);
    background: var(--paper);
    display: block;
    transition: transform var(--ease);
}

.vat[aria-pressed="true"] .vat__track {
    background: var(--vat-on);
    justify-content: flex-end;
}

.vat__label {
    font-size: var(--fs-13);
    width: var(--hd-vat-label-w);
    text-align: left;
}

.masthead__divider {
    width: var(--hd-line);
    height: var(--hd-divider-h);
    background: var(--line-strong);
}

/* Panier : bouton rond avec pastille orange. */
.cart {
    position: relative;
    width: var(--touch);
    height: var(--touch);
    flex: none;
    border: var(--hd-line) solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--ease), transform var(--ease-press);
}

.cart:hover {
    border-color: var(--slate);
    color: var(--ink);
    text-decoration: none;
}

.cart:active {
    transform: scale(.95);
}

.cart__count {
    position: absolute;
    top: calc(-1 * var(--sp-4));
    right: calc(-1 * var(--sp-4));
    min-width: var(--hd-count-size);
    height: var(--hd-count-size);
    padding: 0 var(--hd-count-px);
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--paper);
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--hd-line-thick) solid var(--paper);
}

/* --------------------------------------------------------------------------
   4. NAVIGATION PRINCIPALE À ICÔNES + WHATSAPP
   -------------------------------------------------------------------------- */
.primary-nav {
    background: var(--chrome);
    border-bottom: var(--hd-line) solid var(--line-strong);
}

.primary-nav ul {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.primary-nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    height: var(--hd-nav-h);
    padding: 0 var(--sp-16);
    color: var(--ink);
    font-size: var(--fs-14);
    transition: color var(--ease);
}

.primary-nav li:first-child a {
    padding-left: 0;
}

.primary-nav a:hover {
    color: var(--action);
    text-decoration: none;
}

.primary-nav__whatsapp-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.primary-nav .primary-nav__whatsapp,
.mobile-menu__head .primary-nav__whatsapp {
    display: inline-flex;
    width: var(--hd-pill-btn-w);
    height: var(--hd-whatsapp-h);
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-16);
    line-height: 1;
    border: var(--hd-line) solid var(--on-dark-border);
    border-radius: var(--pill);
    background: var(--whatsapp);
    color: var(--paper);
    font-size: var(--fs-13);
    font-weight: var(--fw-normal);
    transition: background var(--ease), transform var(--ease-press);
}

.primary-nav .primary-nav__whatsapp:hover {
    background: var(--whatsapp-lift);
    color: var(--paper);
    text-decoration: none;
}

/* Le vert sur blanc reste blanc dans tous les états du lien. */
.primary-nav .primary-nav__whatsapp,
.primary-nav .primary-nav__whatsapp:hover,
.primary-nav .primary-nav__whatsapp:visited,
.mobile-menu__head .primary-nav__whatsapp {
    color: var(--paper);
}

.primary-nav__whatsapp svg {
    width: var(--hd-icon-sm);
    height: var(--hd-icon-sm);
}

.primary-nav__whatsapp:active {
    transform: scale(.95);
}

/* --------------------------------------------------------------------------
   5. RAIL DES MARQUES
   -------------------------------------------------------------------------- */
.brand-rail {
    background: var(--slate);
}

.brand-rail__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--sp-16);
    flex-wrap: wrap;
    height: var(--hd-rail-h);
}

.brand-rail ul {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.brand-rail a {
    display: flex;
    align-items: center;
    height: var(--touch);
    padding: 0 var(--sp-14);
    color: var(--on-dark);
    font-size: var(--fs-13);
    transition: color var(--ease);
}

.brand-rail a:hover {
    color: var(--paper);
    text-decoration: none;
}

.brand-rail .brand-rail__all {
    align-self: center;
    display: inline-flex;
    width: var(--hd-pill-btn-w);
    height: var(--hd-rail-all-h);
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-16);
    line-height: 1;
    border: var(--hd-line) solid var(--on-dark-border);
    border-radius: var(--pill);
    color: var(--on-dark-strong);
    font-size: var(--fs-13);
    font-weight: var(--fw-normal);
    white-space: nowrap;
    transition: border-color var(--ease), color var(--ease);
}

.brand-rail .brand-rail__all:hover {
    border-color: var(--paper);
    color: var(--paper);
    text-decoration: none;
}

/* Flèche ronde, mobile seulement : hors du <ul> défilant, elle ne
   défile jamais, ne passe jamais à la ligne, ne rétrécit jamais. */
.brand-rail .brand-rail__more {
    display: none;
    align-self: center;
    flex: 0 0 var(--hd-rail-more);
    width: var(--hd-rail-more);
    height: var(--hd-rail-more);
    min-width: var(--hd-rail-more);
    padding: 0;
    margin-left: var(--sp-8);
    border: var(--hd-line) solid var(--on-dark-border);
    border-radius: var(--round);
    color: var(--on-dark-strong);
    align-items: center;
    justify-content: center;
    transition: border-color var(--ease), color var(--ease);
}

.brand-rail .brand-rail__more:hover {
    border-color: var(--paper);
    color: var(--paper);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. CTA MOBILE COLLANT (design 13b) — sous 520 px, révélé par header.js
   -------------------------------------------------------------------------- */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-cta);
    display: none;
    gap: var(--sp-8);
    padding: var(--sp-10) var(--gutter) calc(var(--sp-10) + env(safe-area-inset-bottom));
    background: var(--mobile-cta-bg);
    -webkit-backdrop-filter: blur(var(--hd-blur));
    backdrop-filter: blur(var(--hd-blur));
    border-top: var(--hd-line) solid var(--line-strong);
    transform: translateY(100%);
    transition: transform var(--ease-slide);
}

.mobile-cta.is-visible {
    transform: none;
}

.mobile-cta .btn {
    flex: 1;
}

/* --------------------------------------------------------------------------
   7. PANNEAU DE MENU MOBILE (design 14)
   -------------------------------------------------------------------------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
    background: var(--chrome);
    color: var(--panel-ink);
    display: none;
    flex-direction: column;
}

.mobile-menu[data-open="true"] {
    display: flex;
}

.mobile-menu__head {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    height: var(--hd-panel-head-h);
    padding: 0 var(--gutter);
    background: var(--paper);
    border-bottom: var(--hd-line) solid var(--line-strong);
}

.mobile-menu__logo {
    flex: none;
}

.mobile-menu__head img {
    width: var(--hd-panel-logo-w);
    height: auto;
    flex: none;
}

.mobile-menu__logo-text {
    color: var(--panel-ink);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.mobile-menu__close {
    width: var(--touch);
    height: var(--touch);
    margin-left: auto;
    flex: none;
    border: var(--hd-line) solid var(--line-strong);
    border-radius: var(--pill);
    background: transparent;
    color: var(--panel-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--ease-press);
}

.mobile-menu__close:active {
    transform: scale(.95);
}

/* WhatsApp entre le logo et le bouton fermer. */
.mobile-menu__head .primary-nav__whatsapp {
    margin-left: auto;
}

.mobile-menu__list {
    flex: 1;
    overflow: auto;
    padding: var(--sp-16) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

/* wp_nav_menu écrit un <ul> là où le design mettait les liens à nu. */
.mobile-menu__list ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

/* Lignes plates sur le panneau clair : libellé et icône sombres,
   séparateurs fins, aucun bloc coloré. */
.mobile-menu__list a {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    height: var(--hd-panel-row-h);
    padding: 0 var(--sp-4);
    border-bottom: var(--hd-line) solid var(--line-strong);
    background: transparent;
    color: var(--panel-ink);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    transition: color var(--ease), transform var(--ease-press);
}

/* Icônes en trait fin dans le panneau, comme le design : vector-effect
   garde le trait à .9 px quelle que soit l'échelle. */
.mobile-menu__list a svg {
    flex: none;
    width: var(--hd-icon-md);
    height: var(--hd-icon-md);
    fill: none;
    stroke: var(--panel-ink);
    stroke-width: var(--hd-hairline);
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.mobile-menu__list a svg * {
    fill: none !important;
    stroke: inherit;
    vector-effect: non-scaling-stroke;
}

/* Survol : le design passe au noir pur (#000), qui n'a pas de jeton.
   --ink (#0F1519) en tient lieu ; écart imperceptible, signalé. */
.mobile-menu__list a:hover {
    background: transparent;
    color: var(--ink);
    text-decoration: none;
}

.mobile-menu__list a:active {
    transform: scale(.98);
}

.mobile-menu__foot {
    padding: var(--gutter);
    display: grid;
    gap: var(--sp-12);
    background: var(--chrome);
    border-top: var(--hd-line) solid var(--line-strong);
}

.mobile-menu__vat {
    justify-self: start;
    margin-bottom: var(--sp-4);
}

.mobile-menu__vat .vat__track {
    background: var(--line-strong);
}

.mobile-menu__vat[aria-pressed="true"] .vat__track {
    background: var(--action);
}

/* --------------------------------------------------------------------------
   7b. NEUTRALISATION DE GENERATEPRESS SUR L'EN-TÊTE — PROVISOIRE
   Le CSS du parent (generate-style) est encore chargé. Il pose sur les
   éléments nus des règles que le design n'avait pas à combattre :
     ul                  list-style: disc, marges
     button              padding 10px 20px, fond gris, texte blanc, survol
     input[type=search]  padding, bordure, fond
   La remise à zéro de style.css est enveloppée dans :where(), donc de
   spécificité nulle : elle perd contre ces sélecteurs d'élément. Ce bloc
   part avec generate-style (étape 38 de la checklist).
   -------------------------------------------------------------------------- */
.primary-nav ul,
.brand-rail ul,
.mobile-menu__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search__submit,
.hamburger,
.mobile-menu__close {
    padding: 0;
}

.vat,
.vat:hover {
    color: var(--ink);
    background: none;
}

.hamburger:hover,
.hamburger:focus {
    background: transparent;
    color: var(--ink);
}

.mobile-menu__close:hover,
.mobile-menu__close:focus {
    background: transparent;
    color: var(--panel-ink);
}

.search__input,
.search__input:focus {
    padding: 0;
    color: var(--ink);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. POINTS DE RUPTURE (design 15)
   -------------------------------------------------------------------------- */

/* Sous 1100 px : le menu à icônes cède la place au burger et au panneau.
   Ligne 2 : burger · logo … compte · panier. Ligne 3 : recherche seule. */
@media (max-width: 1100px) {

    .hamburger {
        display: flex;
    }

    .primary-nav {
        display: none;
    }

    .masthead__inner {
        min-height: 0;
        padding: var(--sp-10) var(--gutter) var(--sp-12);
        gap: var(--sp-10) var(--sp-12);
    }

    .masthead__tools {
        margin-left: auto;
        gap: var(--sp-8);
    }

    /* TVA et boutons texte vivent dans le panneau. */
    .masthead__tools .btn,
    .masthead__tools .vat,
    .masthead__divider {
        display: none;
    }

    .masthead__account {
        display: flex;
    }

    .lang {
        height: var(--touch);
        padding: 0 var(--sp-12);
        border: var(--hd-line) solid var(--line-strong);
        border-radius: var(--pill);
        color: var(--ink);
        font-weight: var(--fw-medium);
    }

    .search {
        order: 3;
        flex-basis: 100%;
        height: var(--hd-search-h);
    }
}

/* Sous 768 px : masthead opaque au-dessus du contenu, rail sur une seule
   ligne défilante, topbar en carrousel. */
@media (max-width: 768px) {

    .masthead {
        background: var(--paper);
        z-index: var(--z-masthead-mobile);
        box-shadow: var(--shadow-icon);
    }

    /* « View all brands » devient une flèche ronde. */
    .brand-rail .brand-rail__all {
        display: none;
    }

    .brand-rail .brand-rail__more {
        display: flex;
    }

    /* Strictement une ligne : le <ul> est la seule piste souple, il
       rétrécit sous son contenu et défile ; le bouton rond garde 32 px. */
    .brand-rail__inner {
        height: auto;
        flex-wrap: nowrap;
        overflow: visible;
        justify-content: flex-start;
        gap: 0;
    }

    .brand-rail ul {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .brand-rail ul::-webkit-scrollbar {
        display: none;
    }

    .brand-rail li {
        flex: none;
        scroll-snap-align: start;
    }

    .brand-rail a {
        white-space: nowrap;
    }

    /* Carrousel : les arguments s'empilent sur la même cellule, seul
       l'actif est visible. inc/header.php pose is-active sur le premier. */
    .topbar__sep {
        display: none;
    }

    .topbar__inner {
        justify-content: center;
    }

    .topbar__mail {
        display: none;
    }

    .topbar__args {
        display: grid;
        justify-items: center;
        text-align: center;
        flex: 1;
    }

    .topbar__arg {
        grid-area: 1 / 1;
        opacity: 0;
        pointer-events: none;
    }

    .topbar__arg.is-active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Sous 520 px : le CTA collant apparaît, la page lui réserve de la place.
   Seulement si le CTA est rendu (visiteurs) : un client connecté n'a pas
   de bande vide en bas de page. */
@media (max-width: 520px) {

    .mobile-cta {
        display: flex;
    }

    body:has(#mobile-cta) {
        padding-bottom: var(--hd-cta-space);
    }
}