/**
 * Header & Topbar & Drawer mobile.
 */

/* ============================================================
 * Promo Bar (Phase 2 MH) — bandeau fin au-dessus du header, fermable.
 * ============================================================ */
.sfc-promobar {
    position: relative;
    background: var(--color-primary-deep);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    overflow: hidden;
    max-height: 64px;
    transition:
        max-height var(--duration-slow) var(--ease-in-out),
        opacity var(--duration-base) var(--ease-out),
        padding var(--duration-slow) var(--ease-in-out);
}

.sfc-promobar.is-closed {
    max-height: 0;
    opacity: 0;
    padding: 0;
    border: 0;
}

.sfc-promobar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-block: var(--space-2);
    position: relative;
}

.sfc-promobar__text {
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

.sfc-promobar__close {
    position: absolute;
    right: var(--container-pad);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
    border-radius: var(--radius-full);
    color: var(--color-white);
    cursor: pointer;
    opacity: 0.7;
    transition:
        opacity var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        transform var(--duration-fast) var(--ease-spring);
}

.sfc-promobar__close:hover,
.sfc-promobar__close:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--color-white) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 50%, transparent);
    outline: none;
}

.sfc-promobar__close:active {
    transform: translateY(-50%) scale(0.92);
}

@media (max-width: 640px) {
    .sfc-promobar__inner {
        padding-right: 44px;
        padding-left: var(--space-3);
    }
    .sfc-promobar__text {
        text-align: left;
        font-size: 11px;
    }
    .sfc-promobar__close { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-promobar,
    .sfc-promobar__close { transition: none; }
}

/* ---------- Skip link ---------- */
.sfc-skip-link:focus {
    position: absolute;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    clip: auto;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-cream);
    z-index: 9999;
    border-radius: var(--radius-ui);
}

/* ---------- Topbar ---------- */
.sfc-topbar {
    background: var(--color-primary);
    color: var(--color-cream);
    font-size: 12px;
    letter-spacing: 0.08em;
    padding-block: 8px;
}

.sfc-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.sfc-topbar__left { justify-self: start; }
.sfc-topbar__center { justify-self: center; text-align: center; }
.sfc-topbar__right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sfc-topbar a {
    color: var(--color-cream);
}

.sfc-topbar a:hover,
.sfc-topbar a:focus-visible {
    color: var(--color-gold);
}

.sfc-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    text-transform: uppercase;
}

.sfc-topbar__phone svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Réseaux sociaux (à droite de la topbar) */
.sfc-topbar__instagram {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}

.sfc-topbar__instagram svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sfc-topbar__instagram-handle {
    line-height: 1;
    display: inline;
}

.sfc-topbar__msg {
    font-style: italic;
    color: var(--color-secondary);
    text-transform: none;
    letter-spacing: 0.04em;
}

.sfc-topbar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    text-transform: uppercase;
}

.sfc-topbar__menu li { margin: 0; }

/* ---------- Header principal ---------- */
.sfc-header {
    background: var(--color-cream);
    border-bottom: 1px solid rgba(26, 38, 64, 0.06);
    transition: box-shadow 300ms ease, padding-block 300ms ease;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sfc-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(26, 38, 64, 0.08);
}

.sfc-header__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 0;
    position: relative;
}

/* ============================================================
 * Header 2 lignes (Phase 4) — Top-line (logo central + actions) + Navline (menu)
 * ============================================================ */

/* Top-line : flex 3 zones (gauche flex:1 / logo auto / droite flex:1) — logo centré. */
.sfc-header .sfc-header__topline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between;
    column-gap: var(--space-5);
    padding-block: var(--space-4);
    min-height: 96px;
    width: 100%;
}

.sfc-header .sfc-header__topline > .sfc-header__topline-side {
    flex: 1 1 0 !important;
    min-width: 0;
}

.sfc-header .sfc-header__topline > .sfc-header__topline-side--left {
    justify-content: flex-start;
}

.sfc-header .sfc-header__topline > .sfc-header__topline-side--right {
    justify-content: flex-end;
}

.sfc-header .sfc-header__topline > .sfc-header__brand {
    flex: 0 0 auto !important;
}

/* Côtés gauche/droite : flex centré, height-stretch pour bien s'aligner verticalement */
.sfc-header__topline-side {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-3);
    line-height: 1;               /* évite le décalage baseline des icônes */
}

/* Logo central — colonne auto, centré dans le grid */
.sfc-header--two-lines .sfc-header__brand {
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
    line-height: 0;
    height: 100%;
}

.sfc-header--two-lines .sfc-header__brand .custom-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}

.sfc-header--two-lines .sfc-header__brand .custom-logo {
    display: block;               /* élimine l'espace baseline sous l'<img> */
    max-height: 72px;
    width: auto;
    transition: max-height var(--duration-base) var(--ease-out);
}

.sfc-header--two-lines.is-scrolled .sfc-header__brand .custom-logo {
    max-height: 56px;
}

/* ANIM-60 — Condensation au scroll : top-line plus compacte (en plus du logo
 * réduit ci-dessus + de l'ombre). Transition douce ; figée sous reduced-motion.
 * Header sticky → aucun décalage de mise en page (pas de CLS). */
.sfc-header .sfc-header__topline {
    transition: min-height var(--duration-base) var(--ease-out),
                padding-block var(--duration-base) var(--ease-out);
}
.sfc-header.is-scrolled .sfc-header__topline {
    min-height: 60px;
    padding-block: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
    .sfc-header .sfc-header__topline,
    .sfc-header--two-lines .sfc-header__brand .custom-logo {
        transition: none;
    }
}

/* Sélecteur de langue inline dans la top-line */
.sfc-header__lang {
    display: inline-flex;
    align-items: center;
}

/* Burger : masqué desktop, visible ≤1024 */
.sfc-header--two-lines .sfc-header__burger {
    display: none;
}

/* Navline : 2e ligne, filet doré subtil en haut, centrée */
.sfc-header__navline {
    border-top: 1px solid color-mix(in srgb, var(--color-rule) 60%, transparent);
    padding-block: var(--space-2);
    display: flex;
    justify-content: center;
}

.sfc-header__navline .sfc-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Le menu lui-même : neutralise le grid hérité du layout 1-ligne legacy. */
.sfc-header__navline .sfc-menu {
    grid-column: auto;
    justify-content: center;
}

/* ============ Override patterns legacy 1-ligne ============ */
/* On désactive le pattern "logo suspendu" du legacy 1-ligne. */
.sfc-header--two-lines .sfc-menu__logo {
    display: none;
}

/* Le pattern legacy de style.css masquait le brand en desktop ; on neutralise. */
@media (min-width: 1025px) {
    .sfc-header.sfc-header--two-lines .sfc-header__brand {
        display: flex !important;
    }
}

.sfc-header__burger {
    display: none;
    background: transparent;
    border: 0;
    color: var(--color-primary);
    cursor: pointer;
    padding: 8px;
}

/* ---------- Logo / Brand ---------- */
.sfc-header__brand {
    grid-column: 1;
}

.sfc-header__brand-link {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--color-primary);
}

.sfc-header__brand-link:hover .sfc-header__brand-name {
    color: var(--color-accent);
}

.sfc-header__brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    transition: var(--transition-base);
}

.sfc-header__brand-tagline {
    font-family: var(--font-script);
    font-size: 16px;
    color: var(--color-gold);
    margin-top: 2px;
}

.sfc-header .custom-logo-link img {
    max-height: 60px;
    width: auto;
}


/* ---------- Actions (search, account, cart) ---------- */
.sfc-header__actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sfc-header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* Reset des styles browser pour les <button> (#eeeeee background, border outset, padding) */
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--color-primary);
    border-radius: var(--radius-circle);
    transition: var(--transition-base);
    text-decoration: none;
}

.sfc-header__action:hover,
.sfc-header__action:focus-visible {
    background: rgba(201, 169, 97, 0.12);
    color: var(--color-accent);
}

.sfc-header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    transform: scale(1);
    transition: transform 200ms ease;
}

.sfc-header__cart-count.is-empty {
    transform: scale(0);
}

/* ANIM-61 — Bump du compteur à l'ajout au panier (classe posée par main.js
 * sur l'événement `added_to_cart`). Figé sous reduced-motion. */
@keyframes sfc-cart-bump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.sfc-header__cart-count.is-bumped {
    animation: sfc-cart-bump 480ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@media (prefers-reduced-motion: reduce) {
    .sfc-header__cart-count.is-bumped { animation: none; }
}

.sfc-header__action svg {
    width: 20px;
    height: 20px;
}

/* Loupe du bouton recherche — un peu plus marquée que les autres icônes
   pour signaler son rôle de point d'entrée principal du moteur de recherche. */
.sfc-header__action--search svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

/* ---------- Search panel (collapsible) ---------- */
.sfc-header__search-panel {
    border-top: 1px solid rgba(26, 38, 64, 0.06);
    padding-block: 20px;
    background: var(--color-white);
}

/* Desktop : le logo suspendu déborde sous le header et chevauche le panneau de
   recherche. On décale le contenu vers le bas pour qu'il passe sous le logo.
   La valeur suit la taille du logo selon l'état de scroll (200px / 150px). */
@media (min-width: 1025px) {
    .sfc-header__search-panel {
        padding-top: 120px;
    }
    .sfc-header.is-scrolled .sfc-header__search-panel {
        padding-top: 90px;
    }
}

.sfc-header__search-panel form {
    display: flex;
    gap: 0.5rem;
    max-width: 720px;
    margin: 0 auto;
}

.sfc-header__search-panel input[type="search"],
.sfc-header__search-panel input[type="text"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(26, 38, 64, 0.15);
    border-radius: var(--radius-ui);
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--color-white);
    color: var(--color-text);
}

.sfc-header__search-panel input:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 0;
    border-color: var(--color-gold);
}

.sfc-header__search-panel button {
    padding: 12px 24px;
    border: 0;
    border-radius: var(--radius-ui);
    background: var(--color-primary);
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);
}

.sfc-header__search-panel button:hover {
    background: var(--color-accent);
}


/* Body lock quand drawer ouvert (classe ajoutée par main.js) */
body.sfc-drawer-open {
    overflow: hidden;
}

/* ---------- Overlay (utilisé par mini-cart) ---------- */
.sfc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 38, 64, 0.45);
    z-index: 199;
    opacity: 0;
    /* ANIM-62 : synchronisé sur le glissement du drawer (380ms + --ease-out). */
    transition: opacity 380ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.sfc-overlay[hidden] { display: none; }
.sfc-overlay.is-open { opacity: 1; }

/* ============================================================
   Mini-panier — drawer latéral droit (design premium)
   Layout : header fixe + liste scrollable (flex:1) + footer collant.
   ============================================================ */
.sfc-mini-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 432px;
    background: var(--color-cream);
    color: var(--color-text);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -12px 0 40px -8px rgba(26, 38, 64, 0.28);
}

.sfc-mini-cart[hidden] { display: none; }
.sfc-mini-cart.is-open { transform: translateX(0); }

/* ---------- En-tête ---------- */
.sfc-mini-cart__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 18px;
    background: var(--color-white);
    border-bottom: 1px solid rgba(201, 169, 97, 0.28);
    flex-shrink: 0;
}

.sfc-mini-cart__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sfc-mini-cart__title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.1;
    margin: 0;
}

.sfc-mini-cart__count {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.sfc-mini-cart__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 200ms ease;
    flex-shrink: 0;
}

.sfc-mini-cart__close:hover {
    color: var(--color-primary);
}

/* ---------- Conteneur (fragment AJAX) : colonne flex pour footer collant ---------- */
.sfc-mini-cart__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---------- Liste scrollable des articles ---------- */
.sfc-mini-cart__list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 97, 0.5) transparent;
}

.sfc-mini-cart__list::-webkit-scrollbar { width: 6px; }
.sfc-mini-cart__list::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 97, 0.45);
    border-radius: 100px;
}

.sfc-mini-cart__list ul.cart_list,
.sfc-mini-cart__list ul.product_list_widget {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Ligne produit épurée ---------- */
.sfc-mini-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(26, 38, 64, 0.08);
}

.sfc-mini-cart-item:last-child { border-bottom: 0; }

.sfc-mini-cart-item__media {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-ui);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(201, 169, 97, 0.25);
}

.sfc-mini-cart-item__media img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    float: none !important;
    border-radius: 0;
}

.sfc-mini-cart-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sfc-mini-cart-item__name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 200ms ease;
}

a.sfc-mini-cart-item__name:hover { color: var(--color-accent); }

.sfc-mini-cart-item__body .quantity {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-muted);
}

.sfc-mini-cart-item__body .quantity .woocommerce-Price-amount,
.sfc-mini-cart-item__body .quantity .amount {
    color: var(--color-accent);
    font-weight: 600;
}

/* Variations / méta éventuels */
.sfc-mini-cart-item__body .variation {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}
.sfc-mini-cart-item__body .variation dt,
.sfc-mini-cart-item__body .variation dd { display: inline; margin: 0; }

/* ---------- Croix de suppression discrète ---------- */
.sfc-mini-cart-item .remove,
.sfc-mini-cart-item a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    border-radius: var(--radius-circle);
    color: var(--color-text-muted) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    background: transparent !important;
    text-decoration: none;
    transition: var(--transition-base);
    flex-shrink: 0;
}

.sfc-mini-cart-item .remove:hover,
.sfc-mini-cart-item a.remove:hover {
    color: var(--color-white) !important;
    background: var(--color-accent) !important;
}

/* ---------- Footer collant : sous-total + boutons ---------- */
.sfc-mini-cart__footer {
    flex-shrink: 0;
    padding: 18px 24px 24px;
    background: var(--color-white);
    border-top: 1px solid rgba(201, 169, 97, 0.28);
    box-shadow: 0 -8px 24px -16px rgba(26, 38, 64, 0.4);
}

.sfc-mini-cart__footer .total,
.sfc-mini-cart__footer p.total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 0 16px;
    margin: 0;
    border: 0;
}

.sfc-mini-cart__footer .total strong {
    font-weight: 500;
    color: var(--color-text-muted);
}

.sfc-mini-cart__footer .total .woocommerce-Price-amount,
.sfc-mini-cart__footer .total .amount {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
}

.sfc-mini-cart__footer .buttons,
.sfc-mini-cart__footer p.buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.sfc-mini-cart__footer .buttons .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-ui);
    text-decoration: none;
    transition: var(--transition-base);
}

/* « Voir le panier » = bouton fantôme */
.sfc-mini-cart__footer .buttons .button:not(.checkout) {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.sfc-mini-cart__footer .buttons .button:not(.checkout):hover {
    background: var(--color-primary);
    color: var(--color-cream);
}

/* « Commander » = bouton plein terracotta */
.sfc-mini-cart__footer .buttons .checkout {
    background: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
    box-shadow: 0 8px 20px -10px rgba(201, 116, 86, 0.6);
    order: -1; /* le CTA principal au-dessus */
}
.sfc-mini-cart__footer .buttons .checkout:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-cream);
}

/* ---------- État vide ---------- */
.sfc-mini-cart__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    gap: 6px;
}

.sfc-mini-cart__empty-icon {
    color: var(--color-gold);
    opacity: 0.8;
    margin-bottom: 10px;
}

.sfc-mini-cart__empty .woocommerce-mini-cart__empty-message {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.sfc-mini-cart__empty-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 18px;
    max-width: 280px;
}

.sfc-mini-cart__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cream);
    background: var(--color-primary);
    border-radius: var(--radius-ui);
    text-decoration: none;
    transition: var(--transition-base);
}

.sfc-mini-cart__empty-cta:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
    .sfc-mini-cart { transition: none; }
    .sfc-mini-cart__close:hover { transform: none; }
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 1024px) {

    /* Pattern 2 lignes : navline cachée, drawer prend le relais via burger */
    .sfc-header--two-lines .sfc-header__navline {
        display: none;
    }

    .sfc-header--two-lines .sfc-header__topline {
        min-height: 64px;
        padding-block: var(--space-3);
        gap: var(--space-3);
    }

    .sfc-header--two-lines .sfc-header__burger {
        display: inline-flex;
    }

    /* En mobile, le sélecteur de langue passe dans le drawer (cachée du top-line). */
    .sfc-header--two-lines .sfc-header__lang {
        display: none;
    }

    /* Compte également masqué sur mobile (accessible via drawer ou bottom-nav). */
    .sfc-header--two-lines .sfc-header__action--account {
        display: none;
    }

    .sfc-header--two-lines .sfc-header__brand .custom-logo {
        max-height: 56px;
    }

    /* ---- Legacy single-line (au cas où d'autres pages l'utilisent) ---- */
    .sfc-header:not(.sfc-header--two-lines) .sfc-header__burger { display: inline-flex; }
    .sfc-header:not(.sfc-header--two-lines) .sfc-header__inner {
        grid-template-columns: auto 1fr auto;
    }
    .sfc-header:not(.sfc-header--two-lines) .sfc-header__brand {
        grid-column: 2;
        text-align: center;
    }
    .sfc-header:not(.sfc-header--two-lines) .sfc-header__brand-link {
        align-items: center;
    }
    .sfc-header:not(.sfc-header--two-lines) .sfc-header__actions {
        grid-column: 3;
    }
    /* Logo plus grand / plus présent sur mobile : ici le grand logo centré du
       menu est masqué (.sfc-header__nav display:none), le logo de marque prend
       le relais — on l'agrandit nettement par rapport aux 60px par défaut. */
    .sfc-header__brand .custom-logo-link img,
    .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: 88px;
        width: auto;
    }
}

@media (max-width: 640px) {
    /* Topbar mobile : ligne 1 = téléphone (gauche) + Instagram (droite),
       ligne 2 = message livraison centré sur toute la largeur. */
    .sfc-topbar { font-size: 11px; }
    .sfc-topbar__inner {
        grid-template-columns: 1fr auto;
        column-gap: 0.75rem;
        row-gap: 4px;
        text-align: left;
    }
    .sfc-topbar__left {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .sfc-topbar__right {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .sfc-topbar__center {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        text-align: center;
    }
    .sfc-topbar__phone,
    .sfc-topbar__instagram { white-space: nowrap; }
    .sfc-header__brand-name { font-size: 20px; }
    /* Petits écrans : logo un peu réduit pour garder un header équilibré. */
    .sfc-header__brand .custom-logo-link img,
    .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: 76px;
    }
}

/* --- Sélecteur de langue dans le menu principal --- */
.sfc-lang-switcher {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.sfc-lang-switcher__list {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sfc-lang-switcher__item a {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--color-text-muted, #6B6B6B);
    transition: color 0.2s ease;
    padding: 4px 2px;
    display: inline-block;
}
.sfc-lang-switcher__item a:hover,
.sfc-lang-switcher__item a:focus {
    color: var(--color-gold, #C9A961);
}
.sfc-lang-switcher__item.is-current a {
    color: var(--color-primary, #1A2640);
    font-weight: 600;
    pointer-events: none;
    cursor: default;
}
.sfc-lang-switcher__item + .sfc-lang-switcher__item::before {
    content: "|";
    margin-right: 0.5rem;
    color: var(--color-text-muted, #6B6B6B);
    opacity: 0.4;
}
@media (max-width: 980px) {
    .sfc-lang-switcher {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 0.5rem;
    }
}