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

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

/* ============================================================
 * TOPBAR — strate verre charcoal translucide (variante Liquid Glass dev2).
 * Rollback : `mv header.css.bak header.css`.
 * ============================================================ */
.sfc-topbar {
    position: relative;
    isolation: isolate;
    color: var(--color-primary);
    font-size: 12px;
    letter-spacing: 0.08em;
    padding-block: 8px;

    /* Verre teinté pêche */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-cream) 88%, transparent) 0%,
        color-mix(in srgb, var(--color-cream) 94%, transparent) 100%
    );
    -webkit-backdrop-filter: blur(18px) saturate(170%);
            backdrop-filter: blur(18px) saturate(170%);

    /* Filet spéculaire bas (orange catch light) qui sépare du header */
    box-shadow:
        inset 0 -1px 0 color-mix(in srgb, var(--color-gold) 22%, transparent);
}

/* Halo orange très diffus à gauche (catch light signature) */
.sfc-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 50%,
        color-mix(in srgb, var(--color-gold) 14%, transparent) 0%,
        transparent 35%);
    pointer-events: none;
    z-index: 0;
}

.sfc-topbar > * { position: relative; z-index: 1; }

.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: 1.25rem;
}

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

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

/* Instagram (à droite de la topbar) */
.sfc-topbar__instagram {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    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;
}

.sfc-topbar__msg {
    font-style: italic;
    color: rgba(34, 34, 34, 0.7);
    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 — frosted glass cream (variante Liquid Glass dev2).
 * Sticky : le contenu de la page glisse sous le header → backdrop blur
 * révèle son intérêt à plein. Au scroll (.is-scrolled), on accentue
 * le blur + on ajoute une ombre douce.
 * ============================================================ */
.sfc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    isolation: isolate;
    border-bottom: 0;
    transition:
        background 280ms ease,
        backdrop-filter 280ms ease,
        -webkit-backdrop-filter 280ms ease,
        box-shadow 300ms ease,
        padding-block 300ms ease;

    /* Verre cream translucide (frosted) — légère chaleur dorée en haut */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-cream) 78%, transparent) 0%,
        color-mix(in srgb, var(--color-cream) 86%, transparent) 100%
    );
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);

    /* Bord verre cream + reflet inner top */
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 60%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Filet spéculaire orange en bas du header (catch light qui sépare du contenu) */
.sfc-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-gold) 18%, transparent) 18%,
        color-mix(in srgb, var(--color-gold) 50%, transparent) 50%,
        color-mix(in srgb, var(--color-gold) 18%, transparent) 82%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.sfc-header > * { position: relative; z-index: 2; }

/* État scroll : blur poussé + ombre douce */
.sfc-header.is-scrolled {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-cream) 70%, transparent) 0%,
        color-mix(in srgb, var(--color-cream) 80%, transparent) 100%
    );
    -webkit-backdrop-filter: blur(28px) saturate(190%);
            backdrop-filter: blur(28px) saturate(190%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 60%, transparent),
        0 8px 28px -10px rgba(0, 0, 0, 0.18);
}

.sfc-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding-block: 20px;
    position: relative;
}

.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);
}

/* Wordmark : repli quand aucun logo n'est défini au Customizer. */
.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: 20px;
    color: var(--color-gold);
    margin-top: 2px;
}

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


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

/* Icônes header (search/account/cart) en orbes glass */
.sfc-header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    border-radius: var(--radius-circle);
    background: transparent;
    border: 1px solid transparent;
    transition:
        background 240ms ease,
        border-color 240ms ease,
        color 220ms ease,
        transform 200ms cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 240ms ease;
}

.sfc-header__action:hover,
.sfc-header__action:focus-visible {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gold) 18%, transparent) 0%,
        color-mix(in srgb, var(--color-gold) 6%,  transparent) 100%);
    border-color: color-mix(in srgb, var(--color-gold) 35%, transparent);
    color: var(--color-accent);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 50%, transparent),
        0 4px 12px -4px color-mix(in srgb, var(--color-gold) 45%, transparent);
}
.sfc-header__action:active { transform: scale(.94); }

.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);
}

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

/* ============================================================
 * SEARCH PANEL (collapsible) — strate frosted glass au-dessus du contenu.
 * ============================================================ */
.sfc-header__search-panel {
    position: relative;
    isolation: isolate;
    border-top: 0;
    padding-block: 20px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-white) 72%, transparent) 0%,
        color-mix(in srgb, var(--color-white) 82%, transparent) 100%
    );
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-cream) 70%, transparent),
        0 6px 18px -10px rgba(0, 0, 0, 0.18);
}

/* Filet doré bas (catch light, en miroir du header) */
.sfc-header__search-panel::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-gold) 35%, transparent) 50%,
        transparent 100%);
    pointer-events: none;
}

/* 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: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 14px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-white) 92%, transparent) 0%,
        color-mix(in srgb, var(--color-white) 86%, transparent) 100%);
    color: var(--color-text);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent);
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

.sfc-header__search-panel input:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--color-gold) 60%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent),
        0 0 0 3px color-mix(in srgb, var(--color-gold) 18%, transparent);
}

.sfc-header__search-panel button {
    padding: 13px 24px;
    border: 0;
    border-radius: 14px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    /* Pastille cuivrée gradient (mêmes proportions que le bouton newsletter footer) */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-cream) 18%, var(--color-accent)) 0%,
        var(--color-accent) 50%,
        color-mix(in srgb, var(--color-accent) 80%, var(--color-gold)) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-cream) 45%, transparent),
        inset 0 -1px 0 rgba(34, 34, 34, 0.18),
        0 2px 8px -2px color-mix(in srgb, var(--color-gold) 60%, transparent);
    transition: filter 220ms ease, transform 140ms ease;
}

.sfc-header__search-panel button:hover,
.sfc-header__search-panel button:focus-visible {
    filter: brightness(1.08);
}
.sfc-header__search-panel button:active { transform: scale(.97); }

/* Fallback navigateurs sans backdrop-filter — fond opaque crème + topbar pêche opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sfc-topbar { background: var(--color-cream); }
    .sfc-header { background: var(--color-cream); }
    .sfc-header__search-panel { background: var(--color-white); }
}


/* 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(34, 34, 34, 0.35);
    z-index: 199;
    opacity: 0;
    transition: opacity 300ms ease;
}

.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(34, 34, 34, 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(248, 152, 80, 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(248, 152, 80, 0.5) transparent;
}

.sfc-mini-cart__list::-webkit-scrollbar { width: 6px; }
.sfc-mini-cart__list::-webkit-scrollbar-thumb {
    background: rgba(248, 152, 80, 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(34, 34, 34, 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(248, 152, 80, 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(248, 152, 80, 0.28);
    box-shadow: 0 -8px 24px -16px rgba(34, 34, 34, 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-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* « 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(247, 99, 9, 0.6);
    order: -1; /* le CTA principal au-dessus */
}
.sfc-mini-cart__footer .buttons .checkout:hover {
    background: var(--color-accent);
    border-color: var(--color-gold);
    color: var(--color-white);
    filter: brightness(1.08);
}

/* ---------- É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-white);
    background: var(--color-accent);
    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);
    filter: brightness(1.08);
}

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

/* ---------- Mobile responsive (déplacé en responsive.css mais on met le minimum ici) ---------- */
@media (max-width: 1024px) {
    .sfc-header__burger { display: inline-flex; }
    .sfc-header__inner {
        grid-template-columns: auto 1fr auto;
    }
    .sfc-header__brand {
        grid-column: 2;
        text-align: center;
    }
    .sfc-header__brand-link {
        align-items: center;
    }
    .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: 112px;
        width: auto;
    }
    /* Au scroll (slide), le logo se réduit pour un header compact. */
    .sfc-header.is-scrolled .sfc-header__brand .custom-logo-link img,
    .sfc-header.is-scrolled .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: 64px;
    }
}

@media (max-width: 640px) {
    /* Topbar mobile : ligne 1 = réseaux sociaux (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__instagram { white-space: nowrap; }
    /* Petits écrans : icônes sociales seules — les pseudos en toutes lettres
       (amelie.lash, cocowlashes…) faisaient déborder la topbar à droite. */
    .sfc-topbar__instagram-handle { display: none; }
    .sfc-topbar__right { gap: 0.75rem; }
    .sfc-header__brand-name { font-size: 20px; }
    /* Petits écrans : logo bien présent en haut, réduit au scroll. */
    .sfc-header__brand .custom-logo-link img,
    .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: 96px;
    }
    .sfc-header.is-scrolled .sfc-header__brand .custom-logo-link img,
    .sfc-header.is-scrolled .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: 56px;
    }
}

/* --- Sélecteur de langue dans le menu principal --- */
.sfc-lang-switcher {
    display: flex;
    align-items: center;
    align-self: center;
    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 {
    display: flex;
    align-items: center;
}
.sfc-lang-switcher__item a {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--color-text-muted, #6B6B6B);
    transition: color 0.2s ease;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
/* Pas de soulignement hérité des liens du menu sur le switcher. */
.sfc-lang-switcher__item a::after {
    content: none;
    display: none;
}
.sfc-lang-switcher__item a:hover,
.sfc-lang-switcher__item a:focus {
    color: var(--color-gold, #F89850);
}
.sfc-lang-switcher__item.is-current a {
    color: var(--color-primary, #222222);
    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;
    }
}

/* ============================================================
 * Logo mobile — centré viewport, agrandi, entrée 3D + flottement.
 * Placé en fin de fichier : surcharge les règles 640px de style.css
 * (qui remettaient le logo en flux à 56px) et du bloc 640px plus haut.
 * ============================================================ */
@media (max-width: 640px) {
    /* Le brand redevient un porteur « hanging » comme sur tablette :
       le lien est centré sur le VIEWPORT (absolu + translateX), pas
       seulement dans sa colonne de grille (qui penchait à gauche). */
    .sfc-header .sfc-header__brand {
        position: static;
        min-width: 0;
        height: 64px;
        align-self: center;
    }
    .sfc-header__inner { position: relative; }
    .sfc-header__brand .custom-logo-link {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 110;
        display: block;
        line-height: 0;
        perspective: 700px;
    }
    .sfc-header__brand .custom-logo-link img,
    .sfc-header__brand .custom-logo-link img.custom-logo {
        height: 104px;
        max-height: none;
        width: auto;
        border-radius: 8px;
        box-shadow: 0 14px 30px -14px rgba(247, 99, 9, 0.38);
        transform-origin: 50% 15%;
        backface-visibility: hidden;
        transition: height 280ms ease;
        animation:
            sfc-logo-entrance 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
            sfc-logo-float 6s ease-in-out 1.4s infinite;
    }
    /* Au scroll : logo compact (le flottement continue, discret). */
    .sfc-header.is-scrolled .sfc-header__brand .custom-logo-link img,
    .sfc-header.is-scrolled .sfc-header__brand .custom-logo-link img.custom-logo {
        height: 60px;
    }
    /* Le logo déborde (~46px + ombre) sous le header : on redonne de l'air
       au premier bloc des pages internes (la home a son hero). */
    body:not(.home) #content,
    body:not(.home) .site-content,
    body:not(.home) .woocommerce-notices-wrapper {
        padding-top: 56px;
    }
}

/* Entrée : flip 3D depuis la tranche, léger zoom. */
@keyframes sfc-logo-entrance {
    from { opacity: 0; transform: rotateY(80deg) scale(0.7); }
    to   { opacity: 1; transform: rotateY(0deg) scale(1); }
}

/* Flottement : lévitation douce, l'ombre respire. */
@keyframes sfc-logo-float {
    0%, 100% { transform: translateY(0);    box-shadow: 0 14px 30px -14px rgba(247, 99, 9, 0.38); }
    50%      { transform: translateY(-5px); box-shadow: 0 20px 34px -14px rgba(247, 99, 9, 0.28); }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .sfc-header__brand .custom-logo-link img,
    .sfc-header__brand .custom-logo-link img.custom-logo {
        animation: none;
    }
}

/* ============================================================
 * HEADER — largeur de barre (2.3.0)
 *
 * Le menu desktop (6 entrées + emplacement du logo suspendu + bouton RDV +
 * sélecteur de langue) mesure ~1457 px : dans le conteneur standard de
 * 1280 px, les icônes recherche / compte / PANIER sortaient du viewport,
 * même en 1920 px. On élargit donc la barre — topbar comprise, pour qu'elles
 * restent alignées entre elles. Le contenu des pages garde 1280 px.
 * Le pendant de ce bloc (menu resserré, emplacement logo réduit) est dans
 * nav.css, chargé après header.css et planity.css.
 * ============================================================ */
@media (min-width: 1025px) {
    .sfc-header .sfc-header__inner,
    .sfc-topbar .sfc-topbar__inner {
        max-width: 1700px;
    }
    .sfc-header__inner {
        gap: clamp(1rem, 1.4vw, 2rem);
    }
}

/* Panneau de recherche : il vit dans son propre .sfc-container, on l'aligne
   sur la barre élargie. */
@media (min-width: 1025px) {
    .sfc-header__search-panel > .sfc-container {
        max-width: 1700px;
    }
}

/* 1025 → 1350 : même élargie et resserrée, la barre ne tient pas (le menu
   seul dépasse la place disponible). On bascule sur le tiroir mobile, comme
   en tablette. La règle qui masque `.sfc-header__nav` est dans nav.css. */
@media (min-width: 1025px) and (max-width: 1350px) {
    .sfc-header__burger { display: inline-flex; }
    .sfc-header__inner { grid-template-columns: auto 1fr auto; }
    .sfc-header .sfc-header__brand {
        display: block;
        grid-column: 2;
        position: relative;
        min-width: 100px;
        height: 60px;
        align-self: center;
        text-align: center;
    }
    .sfc-header__brand .custom-logo-link {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 110;
        display: block;
        line-height: 0;
    }
    .sfc-header__brand .custom-logo-link img,
    .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: none;
        height: 110px;
        width: auto;
        display: block;
    }
    .sfc-header__actions { grid-column: 3; }
    /* Le logo déborde sous la barre : on redonne de l'air au premier bloc
       des pages internes, comme le fait style.css en tablette. */
    body:not(.home) #content,
    body:not(.home) .site-content,
    body:not(.home) .woocommerce-notices-wrapper {
        padding-top: 30px;
    }
}