/* ==========================================================================
   Unshakable Perfection — up_refonte
   Système visuel : un seul mode clair, éditorial, sans ombres ni cartes.
   Palette héritée de la charte source (noir encre + or #DFBB5B), typo
   Poppins (déjà la police de marque) mariée à une serif display Fraunces
   pour les titres — parti pris "maison d'édition beauté", pas "template".
   ========================================================================== */

:root {
    --ink: #15120f;
    --ink-soft: #4a423a;
    --ink-faint: #8a8078;
    --paper: #faf6ef;
    --paper-alt: #f1e9d8;
    --paper-deep: #e9dfc7;
    --white: #ffffff;
    --gold: #a67c1f;
    --gold-bright: #dfbb5b;
    --gold-pale: #f1e0b8;
    --terracotta: #d99a63;
    --terracotta-deep: #c47c42;
    --line: rgba(21, 18, 15, 0.14);
    --line-soft: rgba(21, 18, 15, 0.08);

    --font-display: "Fraunces", "Times New Roman", serif;
    --font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

    --container: 1360px;
    --gutter: clamp(20px, 4vw, 64px);
    --radius: 2px;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- utility type ---- */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}
.kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--gold);
}
.eyebrow { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-gold { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn-gold:hover { background: var(--ink); border-color: var(--ink); color: var(--gold-bright); }
.btn-sm { padding: 11px 22px; font-size: 11px; }
.btn-danger { background: #b23b3b; border-color: #b23b3b; color: var(--paper); }
.btn-danger:hover { background: #8f2e2e; border-color: #8f2e2e; color: var(--paper); }
.btn-block { width: 100%; }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ea952; border-color: #1ea952; color: #fff; }
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.link-underline {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ink);
    transition: border-color .2s ease, color .2s ease;
}
.link-underline:hover { color: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   Barre supérieure (contact / SOS client)
   ========================================================================== */
.top-bar { background: var(--ink); color: var(--paper); }
.top-bar-inner {
    display: flex; justify-content: flex-end; gap: 28px;
    padding: 9px var(--gutter);
    font-size: 11.5px; letter-spacing: 0.04em;
}
.top-bar-inner a { display: inline-flex; align-items: center; gap: 7px; opacity: 0.85; transition: opacity .2s ease, color .2s ease; }
.top-bar-inner a:hover { opacity: 1; color: var(--gold-bright); }
.top-bar-inner svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .top-bar-inner a:first-child span, .top-bar-inner { font-size: 11px; } .top-bar-inner a:first-child { display: none; } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 18px var(--gutter);
    max-width: var(--container);
    margin: 0 auto;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.brand img { height: 40px; width: auto; }
.brand-word {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.02em;
    line-height: 1.05;
}
.brand-word small {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 2px;
}
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a, .main-nav .nav-drop > button {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
    background: none; border: none;
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
}
.main-nav a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--gold);
    transition: right .25s ease;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }
.main-nav a.is-active { color: var(--ink); }

/* Menus déroulants (Marques, Catégories) — CSS pur, comme les tabs témoignages */
.nav-drop { position: relative; }
.nav-drop > button svg { width: 11px; height: 11px; transition: transform .2s ease; }
.nav-drop:hover > button { color: var(--ink); }
.nav-drop:hover > button svg { transform: rotate(180deg); }
.nav-drop-panel {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-top: 14px;
    min-width: 200px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(21,18,15,0.08);
    padding: 10px 0;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 10;
}
.nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop-panel a {
    padding: 9px 22px;
    font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
    color: var(--ink-soft); white-space: nowrap;
}
.nav-drop-panel a:hover { background: var(--paper-alt); color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    color: var(--ink);
}
.icon-btn svg { width: 19px; height: 19px; stroke-width: 1.4; }
.icon-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px;
    background: var(--gold-bright);
    color: var(--ink);
    font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
/* ==========================================================================
   Menu "Toutes" — panneau plein écran coulissant (gauche -> droite)
   Le header (rangées 1/2 façon Amazon) est en Tailwind directement dans
   header.php ; ce panneau reste en CSS natif (checkbox-trick, indépendant
   du framework utilitaire) et fonctionne à toutes les largeurs — le
   déclencheur "Toutes" reste visible même en desktop, comme sur Amazon.
   ========================================================================== */
/* Rangée 2 du header en mobile : nav défilable horizontalement (au lieu
   d'être masquée derrière "Toutes"), scrollbar cachée — façon barre de nav
   mobile Amazon, où l'onglet suivant tronqué en bord d'écran suffit à
   signaler qu'il y a plus à découvrir en scrollant. */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.mobile-nav-checkbox { display: none; }

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(21, 18, 15, 0.55);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: min(88vw, 380px);
    height: 100vh;
    height: 100dvh;
    background: var(--paper);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 30px 0 60px rgba(21, 18, 15, 0.2);
}

.mobile-nav-checkbox:checked ~ .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
}
.mobile-nav-checkbox:checked ~ .mobile-nav {
    transform: translateX(0);
}

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--gutter);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.mobile-nav-head span { font-family: var(--font-display); font-size: 19px; }
.mobile-nav-close {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-soft);
    flex-shrink: 0;
}
.mobile-nav-close svg { width: 20px; height: 20px; }
.mobile-nav-close:hover { color: var(--gold); }

.mobile-nav a {
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.mobile-nav a.is-active { color: var(--gold); }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav summary {
    padding: 16px var(--gutter);
    font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-size: 18px; color: var(--ink-faint); }
.mobile-nav details[open] summary::after { content: "−"; }
.mobile-nav details a {
    display: block;
    padding: 12px var(--gutter) 12px calc(var(--gutter) + 14px);
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--ink-faint);
}
.mobile-nav details a:last-child { border-bottom: none; }

@media (min-width: 480px) {
    .mobile-nav { width: 360px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    min-height: 640px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding: 64px var(--gutter);
    max-width: 620px;
}
.hero-title {
    font-size: clamp(40px, 5.4vw, 74px);
    line-height: 0.98;
    letter-spacing: -0.02em;
}
.hero-title em { color: var(--gold); font-style: italic; }
.hero-lede { font-size: 16.5px; color: var(--ink-soft); max-width: 440px; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
.hero-stats div strong { display: block; font-family: var(--font-display); font-size: 26px; }
.hero-stats div span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.hero-visual {
    position: relative;
    background: radial-gradient(120% 130% at 72% 15%, var(--terracotta) 0%, var(--terracotta-deep) 62%, #a8632f 100%);
    overflow: hidden;
    border-left: 1px solid var(--line);
}
.hero-visual img {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    height: 104%;
    width: auto;
    max-width: none;
    object-fit: contain;
}
.hero-badge {
    position: absolute;
    top: 40px; left: 40px;
    width: 118px; height: 118px;
}
.hero-badge svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.hero-badge-dot {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.hero-badge-dot span {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.hero-badge-dot svg.arrow { width: 16px; height: 16px; stroke: var(--paper); animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-visual { height: 380px; order: -1; }
    .hero-copy { padding: 40px var(--gutter); max-width: none; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
    border-bottom: 1px solid var(--line);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    white-space: nowrap;
    padding: 16px 0;
}
.marquee-track {
    display: inline-flex;
    align-items: center;
    animation: marquee 32s linear infinite;
}
.marquee-track .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px;
}
.marquee-track .brand-logo::after { content: "✦"; color: var(--gold-bright); font-size: 12px; margin-left: 14px; }
.marquee-track .brand-logo .brand-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: var(--paper);
    opacity: 0.9;
    white-space: nowrap;
}
.marquee-track .brand-logo img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    background: var(--paper);
    border-radius: 10px;
    padding: 6px 16px;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Section shell
   ========================================================================== */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--paper-alt); }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 52px;
}
.section-head h2 { font-size: clamp(30px, 3.4vw, 46px); }
.section-head .kicker { margin-bottom: 14px; }

/* ==========================================================================
   Categories — liste indexée avec image révélée au survol
   ========================================================================== */
.index-list { border-top: 1px solid var(--line); }
.index-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px var(--gutter);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    transition: padding-left .35s ease;
}
.index-row .num { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; width: 40px; flex-shrink: 0; }
.index-row .name { font-family: var(--font-display); font-size: clamp(24px, 3vw, 40px); flex: 1; transition: color .3s ease; }
.index-row .count { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); flex-shrink: 0; }
.index-row .go {
    width: 34px; height: 34px; flex-shrink: 0;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.index-row .go svg { width: 14px; height: 14px; transition: stroke .3s ease; }
.index-row .thumb {
    position: absolute;
    top: 50%; right: 120px;
    transform: translate(20px, -50%) scale(0.92);
    width: 160px; height: 110px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-alt);
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

/* ==========================================================================
   Lazy loading avancé (cf. assets/js/lazy-images.js) :
   - [data-bg-src] : fond posé par IntersectionObserver, pas au chargement
     de page — évite de télécharger des images encore invisibles (survol,
     hors écran) ; couleur de repli le temps du chargement, cf. règles ci-dessus.
   - .lazy-img : fondu à l'apparition pour les <img loading="lazy"> qui
     l'utilisent explicitement (ne s'applique jamais aux images qui ont déjà
     leur propre logique d'opacité, ex. .img-hover au survol carte produit).
   ========================================================================== */
.lazy-img { opacity: 0; transition: opacity .4s ease; }
.lazy-img.is-loaded { opacity: 1; }
.index-row:hover { padding-left: calc(var(--gutter) + 14px); background: var(--paper-alt); }
.index-row:hover .name { color: var(--gold); }
.index-row:hover .thumb { opacity: 1; transform: translate(0, -50%) scale(1); }
.index-row:hover .go { background: var(--ink); }
.index-row:hover .go svg { stroke: var(--paper); }

/* ==========================================================================
   Produits — grille éditoriale, pas de cartes
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-card { background: var(--paper); display: flex; flex-direction: column; }
.product-media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--white);
    overflow: hidden;
}
.product-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 22px;
    transition: transform .5s ease, opacity .4s ease;
    mix-blend-mode: multiply;
}
.product-card:hover .product-media img.img-main { transform: scale(1.05); }
/* Deuxième photo de la galerie révélée au survol, image principale masquée
   en fondu — décoration pure, ne pèse rien de plus qu'une image déjà
   chargée pour la fiche produit (même main_image/secondary_image). */
.product-media img.img-hover {
    position: absolute; inset: 0;
    opacity: 0;
}
.product-card:hover .product-media img.img-hover { opacity: 1; transform: scale(1.05); }
.product-tag {
    position: absolute; top: 14px; left: 14px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--ink); color: var(--paper);
    padding: 5px 9px;
    z-index: 1;
}
.product-tag.gold { background: var(--gold-bright); color: var(--ink); }
.product-tag.stock-tag { background: var(--terracotta-deep); color: var(--paper); }
.product-tag.stock-tag.out { background: var(--paper-deep); color: var(--ink-soft); }
.product-quick {
    position: absolute; left: 14px; right: 14px; bottom: 14px;
    display: flex; align-items: stretch; gap: 8px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}
.product-card:hover .product-quick { opacity: 1; transform: translateY(0); }
/* Sur tactile il n'y a pas de :hover : sans ça, quick-add et quick-view
   restaient invisibles (opacity: 0) et donc inutilisables sur mobile. */
@media (hover: none) {
    .product-quick { opacity: 1; transform: none; }
}
.product-quick .btn { flex: 1; min-width: 0; }
.product-quick [data-island] { display: flex; flex-shrink: 0; }
.quick-add-btn, .quick-view-btn {
    flex-shrink: 0;
    width: 40px;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.quick-add-btn svg, .quick-view-btn svg { width: 17px; height: 17px; }
.quick-add-btn:hover:not(:disabled), .quick-view-btn:hover { background: var(--ink); color: var(--paper); }
.quick-add-btn { position: relative; }
.quick-add-btn.is-success { background: #4a7c3c; border-color: #4a7c3c; color: #fff; }
.quick-add-btn.is-loading { opacity: 0.6; }
.quick-add-btn.is-error { background: #b23b3b; border-color: #b23b3b; color: #fff; }
.quick-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.quick-add-error {
    position: absolute; right: 0; bottom: calc(100% + 8px);
    background: #b23b3b; color: #fff; font-size: 11px; font-weight: 500;
    padding: 6px 10px; border-radius: var(--radius);
    max-width: 220px; width: max-content; text-align: right; line-height: 1.4;
    z-index: 5;
}
/* Bouton liste de souhaits — carte produit (cœur en surimpression, toujours
   visible contrairement à .product-quick qui n'apparaît qu'au survol : sur
   tactile il n'y a pas de survol, et un souhait doit rester accessible sans
   ouvrir la fiche produit). */
.wishlist-btn {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(250, 246, 239, 0.9);
    border: none; border-radius: 50%;
    color: var(--ink);
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.wishlist-btn svg { width: 17px; height: 17px; }
.wishlist-btn:hover:not(:disabled) { background: var(--paper); transform: scale(1.08); }
.wishlist-btn.is-active { color: #b2493b; }
.wishlist-btn:disabled { opacity: 0.6; cursor: default; }

/* Bouton liste de souhaits — ligne d'action de la fiche produit
   (add-cart-row, à côté du bouton "Ajouter au panier"). Cette ligne est
   réutilisée telle quelle dans la barre sticky mobile (cf.
   ProductForm::cartRow + StickyAddBar), donc le cœur y apparaît aussi sans
   rien de plus à faire — d'où align-self: stretch pour matcher la hauteur
   du qty-stepper/bouton plutôt qu'un positionnement absolu. */
.wishlist-btn-inline {
    flex-shrink: 0;
    width: 44px;
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    transition: border-color .2s ease, color .2s ease;
}
.wishlist-btn-inline svg { width: 18px; height: 18px; }
.wishlist-btn-inline:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.wishlist-btn-inline.is-active { border-color: #b2493b; color: #b2493b; }
.wishlist-btn-inline:disabled { opacity: 0.6; cursor: default; }

.product-body { padding: 18px 4px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-cat { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.product-name { font-size: 15px; font-weight: 500; line-height: 1.35; }
.product-name a:hover { color: var(--gold); }
.product-rating { display: flex; align-items: center; gap: 6px; }
.stars { position: relative; display: inline-block; font-size: 12px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.stars-bg { color: var(--line); }
.stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; width: 0; color: var(--gold); white-space: nowrap; }
.rating-count { font-size: 11.5px; color: var(--ink-faint); }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 14px; }
.product-price .now { font-weight: 600; }
.product-price .was { text-decoration: line-through; color: var(--ink-faint); font-size: 12.5px; }
.product-weight { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .product-body { padding: 14px 2px; } }

/* Scroller horizontal (accueil) */
.scroller { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--line); border: 1px solid var(--line); }
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line); }
.scroller .product-card { min-width: 280px; scroll-snap-align: start; }

/* ==========================================================================
   Spotlight — produit mis en avant (accueil)
   Un seul produit "featured", tiré au hasard à chaque chargement de page
   (cf. Product::featuredRandomOne) mais toujours avec le même traitement
   éditorial pleine largeur — pas de carrousel, juste un visage qui change.
   ========================================================================== */
.spotlight-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--paper);
    border: 1px solid var(--line);
}
.spotlight-hero-media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: radial-gradient(120% 130% at 75% 12%, var(--gold-pale) 0%, var(--gold-bright) 62%, var(--gold) 100%);
    overflow: hidden;
}
.spotlight-hero-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 40px;
    mix-blend-mode: multiply;
}
.spotlight-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 48px;
}
.spotlight-hero-title { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; }
.spotlight-lede { font-size: 15px; color: var(--ink-soft); max-width: 420px; }
.spotlight-price { display: flex; align-items: baseline; gap: 10px; }
.spotlight-price .now { font-family: var(--font-display); font-size: 26px; }
.spotlight-price .was { text-decoration: line-through; color: var(--ink-faint); font-size: 14px; }
.spotlight-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 900px) {
    .spotlight-hero { grid-template-columns: 1fr; }
    .spotlight-hero-media { aspect-ratio: 16 / 11; }
    .spotlight-hero-copy { padding: 32px; }
}

/* ==========================================================================
   Bandeau CTA
   ========================================================================== */
.cta-band {
    background: var(--ink);
    color: var(--paper);
    padding: 100px var(--gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band h2 { font-size: clamp(32px, 5vw, 58px); max-width: 780px; margin: 0 auto 28px; line-height: 1.08; }
.cta-band .kicker { color: var(--gold-bright); justify-content: center; }
.cta-band .kicker::before { background: var(--gold-bright); }
.cta-watermark {
    position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display); font-size: 220px; white-space: nowrap;
    color: rgba(250,246,239,0.035); font-style: italic; pointer-events: none;
}

/* ==========================================================================
   Témoignages — citation éditoriale + tabs CSS pur
   ========================================================================== */
.testimonial-wrap { max-width: 820px; margin: 0 auto; text-align: center; position: relative; }
.testimonial-mark { font-family: var(--font-display); font-size: 90px; color: var(--gold-bright); line-height: 0; position: relative; top: 30px; }
.t-input { display: none; }
.t-panels { position: relative; min-height: 220px; }
.t-panel {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease;
}
.t-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.4; color: var(--ink); }
.t-author { margin-top: 24px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.t-dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.t-dots label { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); cursor: pointer; transition: background .2s ease; }

/* Grille de témoignages (page dédiée, par opposition au carrousel accueil) */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.testimonial-card { position: relative; background: var(--paper); padding: 36px 28px; display: flex; flex-direction: column; }
.testimonial-card .testimonial-mark { position: absolute; color: var(--gold-bright); }
.testimonial-card .t-quote { font-size: 16px; margin-top: 40px; }
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* Page contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: var(--container); margin: 0 auto; }
.contact-quick-card {
    background: var(--paper);
    padding: 28px 20px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    transition: background .2s ease, color .2s ease;
}
.contact-quick-card svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: 6px; transition: color .2s ease; }
.contact-quick-card .label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.contact-quick-card .value { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.contact-quick-card:hover { background: var(--ink); }
.contact-quick-card:hover .label { color: var(--paper); opacity: .6; }
.contact-quick-card:hover .value, .contact-quick-card:hover svg { color: var(--gold-bright); }
.contact-quick-card.is-primary { background: var(--ink); }
.contact-quick-card.is-primary .label { color: var(--paper); opacity: .6; }
.contact-quick-card.is-primary .value, .contact-quick-card.is-primary svg { color: var(--gold-bright); }
@media (max-width: 700px) { .contact-quick-grid { grid-template-columns: 1fr; } }

#t1:checked ~ .t-panels .t-panel-1,
#t2:checked ~ .t-panels .t-panel-2,
#t3:checked ~ .t-panels .t-panel-3 { opacity: 1; visibility: visible; position: relative; }
#t1:checked ~ .t-dots label[for="t1"],
#t2:checked ~ .t-dots label[for="t2"],
#t3:checked ~ .t-dots label[for="t3"] { background: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.footer-top { padding: 72px var(--gutter) 56px; display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 40px; max-width: var(--container); margin: 0 auto; }
.footer-brand .brand-word { font-size: 24px; }
.footer-brand p { margin-top: 16px; color: var(--ink-soft); max-width: 300px; font-size: 14px; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.footer-social a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.footer-social svg { width: 14px; height: 14px; }
.footer-col h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; color: var(--ink-faint); }
.footer-col a { display: block; font-size: 14px; color: var(--ink-soft); padding: 6px 0; transition: color .2s ease; }
.footer-col a:hover { color: var(--gold); }

.footer-newsletter p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 13.5px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.newsletter-form input:focus { outline: none; border-color: var(--gold); }
.newsletter-form button { padding: 10px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; transition: background .2s ease, color .2s ease; }
.newsletter-form button:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.newsletter-form button:disabled { opacity: .6; cursor: not-allowed; }
.newsletter-form-message { margin-top: 10px; font-size: 12.5px; color: #4a7c3c; }
.newsletter-form-message.is-error { color: #b23b3b; }
.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 22px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    max-width: var(--container); margin: 0 auto;
    font-size: 12.5px; color: var(--ink-faint);
}
.footer-watermark {
    font-family: var(--font-display); font-style: italic; font-size: clamp(60px, 12vw, 170px);
    text-align: center; color: var(--paper-deep); line-height: 0.8; padding: 20px var(--gutter) 0;
    user-select: none; overflow: hidden; white-space: nowrap;
}

@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Pages internes — boutique, produit, panier, connexion
   ========================================================================== */
.page-head {
    padding: 56px var(--gutter) 40px;
    border-bottom: 1px solid var(--line);
}
.breadcrumb { display: flex; gap: 8px; font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--gold); }
.page-head h1 { font-size: clamp(32px, 4vw, 52px); }
.page-head .count { color: var(--ink-faint); font-size: 14px; margin-top: 10px; }

.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter); align-items: start; }
.shop-filters {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.shop-filters h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }
.filter-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.filter-list a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.filter-list a span { color: var(--ink-faint); font-size: 12px; }
.filter-list a:hover, .filter-list a.is-active { color: var(--gold); }
.filter-list a.is-active { font-weight: 600; color: var(--ink); }

.search-box { margin-bottom: 40px; }
.search-box form { display: flex; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.search-box input { flex: 1; border: none; background: transparent; outline: none; font-size: 15px; }
.search-box button { background: none; border: none; }
.search-box svg { width: 18px; height: 18px; }

/* Panneau filtres mobile — .shop-filters reste une colonne fixe classique
   au-dessus de 860px ; le bouton déclencheur, l'entête et le fond masquant
   ne s'activent que sous ce seuil (cf. media query plus bas). Même
   mécanique tout-CSS (checkbox + label) que .mobile-nav dans le header. */
.shop-filters-checkbox { display: none; }
.shop-filters-trigger { display: none; }
.shop-filters-head { display: none; }
.shop-filters-close { display: none; }
.shop-filters-backdrop { display: none; }

/* Bascule grille / liste — cf. view-toggle.js. Grille par défaut ; la
   trigger "Filtres" n'apparaît qu'en mobile (règle ci-dessus), la bascule
   reste donc seule à droite sur desktop. */
.shop-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 24px; }
.view-toggle { display: flex; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; }
.view-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 30px;
    border: none; background: transparent; color: var(--ink-faint);
    cursor: pointer; border-radius: calc(var(--radius) - 1px);
    transition: background .2s ease, color .2s ease;
}
.view-toggle-btn svg { width: 16px; height: 16px; }
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.is-active { background: var(--ink); color: var(--paper); }

/* Vue liste : une colonne, carte en ligne (média à gauche, infos à droite),
   séparées et ombrées plutôt que les tuiles à trait fin de la grille — cf.
   .product-grid (cols de base). .product-list-desc/.product-list-actions
   sont toujours dans le DOM (partial partagé avec la grille) mais masqués
   hors vue liste ; symétriquement .product-quick (overlay au survol,
   pensé pour la grille) est masqué en liste au profit de la rangée
   d'actions toujours visible dans le corps de la carte. */
.product-list-desc, .product-list-actions { display: none; }

.product-grid.view-list {
    grid-template-columns: 1fr;
    gap: 20px;
    background: transparent;
    border: none;
}
.product-grid.view-list .product-card {
    flex-direction: row;
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(21, 18, 15, 0.07);
    transition: box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}
.product-grid.view-list .product-card:hover {
    box-shadow: 0 16px 40px rgba(21, 18, 15, 0.13);
    transform: translateY(-2px);
}
.product-grid.view-list .product-media { width: 220px; aspect-ratio: 1 / 1; flex-shrink: 0; }
.product-grid.view-list .product-quick { display: none; }
.product-grid.view-list .product-body { flex: 1; justify-content: center; padding: 22px 32px; gap: 8px; }
.product-grid.view-list .product-name { font-size: 17px; }
.product-grid.view-list .product-list-desc {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 480px;
}
.product-grid.view-list .product-price { margin-top: 4px; padding-top: 0; }
.product-grid.view-list .product-list-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
}
/* .quick-add-btn utilise height:100% (cf. règle partagée avec .product-quick) :
   le wrapper doit s'étirer (align-items du parent, pas de hauteur fixe ici)
   pour que le bouton panier atteigne la même hauteur que "Voir le produit"
   au lieu de se réduire à la taille de l'icône. */
.product-grid.view-list .product-list-actions [data-island] { display: flex; flex-shrink: 0; }
.product-grid.view-list .product-list-actions .quick-add-btn { width: 44px; }
@media (max-width: 640px) {
    .product-grid.view-list .product-media { width: 120px; }
    .product-grid.view-list .product-body { padding: 14px 16px; gap: 6px; }
    .product-grid.view-list .product-list-desc { display: none; }
}

.empty-state { text-align: center; padding: 80px 20px; color: var(--ink-faint); }
.empty-state h3 { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin-bottom: 10px; }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 56px; }
.pagination a, .pagination span {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); font-size: 13px;
}
.pagination a:hover { border-color: var(--ink); }
.pagination .is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Produit détail */
.product-detail { max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.pd-gallery-main { aspect-ratio: 1 / 1; background: var(--white); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); overflow: hidden; }
.pd-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 40px; mix-blend-mode: multiply; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pd-thumbs img { width: 74px; height: 74px; object-fit: contain; background: var(--white); border: 1px solid var(--line); padding: 8px; cursor: pointer; mix-blend-mode: multiply; }
.pd-info { padding-top: 8px; }
.pd-cat { color: var(--gold); }
.pd-title { font-size: clamp(28px, 3.2vw, 44px); margin: 14px 0 18px; }
.pd-price { display: flex; align-items: baseline; gap: 14px; font-size: 24px; font-weight: 600; margin-bottom: 26px; }
.pd-price .was { font-size: 16px; text-decoration: line-through; color: var(--ink-faint); font-weight: 400; }
.pd-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 28px; }
.pd-stock .dot { width: 7px; height: 7px; border-radius: 50%; background: #4a7c3c; }
.pd-stock.out .dot { background: #b23b3b; }
/* Sélecteur de gamme façon liste à cocher — un bloc par produit (image +
   nom + prix), sélection multiple indépendante (contrairement à un choix
   de variation classique où une seule combinaison est active à la fois). */
.pd-variant-selectall {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 14px;
    cursor: pointer;
}
.pd-variant-selectall input { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; }
.pd-variant-selectall.is-disabled { opacity: 0.45; cursor: not-allowed; }
.pd-variant-selectall.is-disabled input { cursor: not-allowed; }

.pd-variant-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }

.pd-variant-divider { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
.pd-variant-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pd-variant-divider-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); white-space: nowrap; }

.pd-variant-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pd-variant-card:hover { border-color: var(--gold); }
.pd-variant-card.is-checked { border-color: var(--gold); background: rgba(166, 124, 31, 0.05); box-shadow: 0 0 0 1px var(--gold); }
.pd-variant-card.is-disabled { opacity: 0.5; cursor: not-allowed; }

.pd-variant-card input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--ink); cursor: pointer; flex-shrink: 0; }
.pd-variant-card.is-disabled input { cursor: not-allowed; }

.pd-variant-thumb {
    width: 56px; height: 56px;
    border-radius: calc(var(--radius) - 4px);
    background: var(--paper);
    border: 1px solid var(--line);
    flex-shrink: 0;
    overflow: hidden;
}
.pd-variant-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.pd-variant-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-variant-name { font-weight: 600; color: var(--ink); }
.pd-variant-price { font-size: 14px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; }
.pd-variant-price .now { color: var(--ink); font-weight: 600; }
.pd-variant-price .was { text-decoration: line-through; color: var(--ink-faint); }

.pd-variant-stock { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #b23b3b; white-space: nowrap; }

.pd-desc { color: var(--ink-soft); line-height: 1.7; margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.pd-desc p, .rich-text p { margin: 0 0 12px; }
.pd-desc p:last-child, .rich-text p:last-child { margin-bottom: 0; }
.rich-text { color: var(--ink-soft); line-height: 1.8; }
.rich-text strong { color: var(--ink); font-weight: 600; }
.rich-text ul, .rich-text ol { padding-left: 20px; margin: 0 0 12px; }
.pd-meta { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-faint); margin-top: 30px; }
.pd-meta strong { color: var(--ink-soft); font-weight: 600; }

.pd-trust { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; margin-bottom: 30px; border: 1px solid var(--line); background: var(--paper, #faf8f5); }
.pd-trust-badges { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.pd-trust-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.02em; color: var(--ink-soft); }
.pd-trust-badge svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
.pd-trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pd-trust-logos img { height: 22px; width: auto; object-fit: contain; opacity: 0.85; }

.tabs-strip { display: flex; gap: 32px; border-bottom: 1px solid var(--line); margin: 88px auto 0; max-width: var(--container); padding: 0 var(--gutter); }
.tabs-strip a { padding: 16px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid transparent; color: var(--ink-faint); }
.tabs-strip a.is-active { color: var(--ink); border-color: var(--gold); }

/* Panier */
.cart-layout { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 100px; }

/* Auth — deux colonnes : panneau marketing (image + argumentaire) et
   formulaire, façon page de conversion plutôt qu'un simple formulaire nu. */
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; min-height: 640px; }

.auth-visual { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.auth-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.auth-visual::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(190deg, rgba(21,18,15,0.35) 0%, rgba(21,18,15,0.75) 75%);
}
.auth-visual-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 48px; }
.auth-visual .kicker { color: var(--gold-bright); }
.auth-visual h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 16px 0 14px; max-width: 380px; }
.auth-visual p { color: rgba(250,246,239,0.78); max-width: 360px; line-height: 1.6; }

.auth-benefits { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.auth-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(250,246,239,0.9); }
.auth-benefits svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--gold-bright); }

.auth-visual-stats { display: flex; gap: 32px; padding-top: 24px; border-top: 1px solid rgba(250,246,239,0.18); }
.auth-visual-stats div { display: flex; flex-direction: column; }
.auth-visual-stats strong { font-family: var(--font-display); font-size: 26px; }
.auth-visual-stats span { font-size: 12px; color: rgba(250,246,239,0.6); }

.auth-quote { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.5; max-width: 360px; }
.auth-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 12.5px; color: rgba(250,246,239,0.6); }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 60px var(--gutter); }
.auth-shell { max-width: 380px; width: 100%; margin: 0 auto; padding: 0; }
.auth-shell .kicker { justify-content: center; }
.auth-shell h1 { text-align: center; margin: 16px 0 40px; font-size: 34px; }

@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; min-height: auto; }
    .auth-visual { display: none; }
    .auth-panel { padding: 56px var(--gutter) 100px; }
}
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn-mount { display: flex; justify-content: center; }
.google-btn-mount > div { width: 100% !important; }
.google-btn-mount iframe { margin: 0 auto; }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.field input, .field textarea, .field select {
    width: 100%; border: 1px solid var(--line); background: var(--white);
    padding: 13px 14px; font-size: 14.5px; outline: none; border-radius: var(--radius);
    transition: border-color .2s ease;
    font-family: inherit; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }

/* Sélecteur de mode de livraison — commander/index.php */
.shipping-options { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.shipping-option {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.shipping-option:hover { border-color: var(--gold); }
.shipping-option.is-selected { border-color: var(--gold); background: var(--paper-alt); }
.shipping-option input { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; flex-shrink: 0; }
.shipping-option .so-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shipping-option .so-method { font-weight: 600; font-size: 14.5px; }
.shipping-option .so-desc { font-size: 12.5px; color: var(--ink-faint); }
.shipping-option .so-days { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.shipping-option .so-cost { font-weight: 600; white-space: nowrap; }
.shipping-option.is-disabled { cursor: default; opacity: 0.5; }
.shipping-option.is-disabled:hover { border-color: var(--line); }
.shipping-option.is-disabled input { cursor: default; }
.so-brand-logo {
    display: inline-block; height: 20px; width: auto; max-width: 44px;
    object-fit: contain; border-radius: 4px;
    vertical-align: middle; margin-right: 6px;
}
.so-badge {
    flex-shrink: 0; align-self: flex-start;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.shipping-option .so-remove {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; font-size: 18px; line-height: 1;
    color: var(--ink-faint); cursor: pointer;
}
.shipping-option .so-remove:hover { color: #b23b3b; background: var(--paper-alt); }

.checkout-save-address {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--ink-soft); cursor: pointer;
    margin-top: 4px;
}
.checkout-save-address input { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; flex-shrink: 0; }

/* Étapes du /commander (Coordonnées → Livraison → Récapitulatif) */
.checkout-steps { display: flex; align-items: center; margin-bottom: 40px; }
.checkout-step { display: flex; align-items: center; gap: 10px; }
.checkout-step.is-clickable { cursor: pointer; }
.checkout-step .cs-index {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    border: 1px solid var(--line); color: var(--ink-faint);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.checkout-step .cs-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); white-space: nowrap; }
.checkout-step.is-active .cs-index { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.checkout-step.is-active .cs-label { color: var(--ink); }
.checkout-step.is-done .cs-index { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.checkout-step.is-done .cs-label { color: var(--ink); }
.checkout-step-line { flex: 1; height: 1px; background: var(--line); margin: 0 16px; min-width: 20px; }
.checkout-step-actions { display: flex; gap: 14px; margin-top: 32px; }
.checkout-step-actions > .btn { flex: 1; min-width: 0; }
.checkout-step-actions > .btn-ghost { flex: 0 0 auto; }

@media (max-width: 640px) {
    .checkout-step .cs-label { display: none; }
    .checkout-step-line { margin: 0 8px; }
    /* "Confirmer la commande" ne tient pas à côté de "Précédent" sur mobile
       (.btn est en white-space: nowrap) — empilés en pleine largeur plutôt
       que de déborder du conteneur. */
    .checkout-step-actions { flex-direction: column; }
    .checkout-step-actions > .btn-ghost { flex: 1; }
}

/* Îlots React — panier / formulaire produit */
.add-cart-row { display: flex; align-items: stretch; gap: 14px; margin-bottom: 28px; }
.add-cart-row .btn { flex: 1; }
.qty-stepper { display: inline-flex; align-items: stretch; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); }
.qty-stepper button { width: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 15px; line-height: 1; color: var(--ink); }
.qty-stepper button:first-child { border-right: 1px solid var(--line); }
.qty-stepper button:last-child { border-left: 1px solid var(--line); }
.qty-stepper button:hover { background: var(--paper-alt); }
.qty-stepper span { min-width: 34px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.form-error { color: #b23b3b; font-size: 12.5px; margin-top: 10px; }
.form-success { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; background: var(--paper-alt); border-radius: 4px; padding: 14px 16px; }

/* Barre d'ajout au panier sticky — reprend le même bloc .add-cart-row (qty +
   bouton) que celui de la fiche produit, affichée en bas d'écran uniquement
   quand ce dernier est scrollé hors de vue (cf. useStickyVisibility). */
.sticky-add-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(21, 18, 15, 0.1);
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.sticky-add-bar.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-add-bar-inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); }
.sticky-add-bar .add-cart-row { margin-bottom: 0; }

.review-list { display: flex; flex-direction: column; gap: 28px; max-width: 720px; margin-top: 8px; }
.review-item { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.review-item .r-name { font-weight: 600; font-size: 14px; }
.review-item .r-date { color: var(--ink-faint); font-size: 12px; margin-left: 8px; }
.review-item p { margin-top: 8px; color: var(--ink-soft); line-height: 1.6; }
.review-item .star-row { margin-bottom: 8px; }
.review-form { max-width: 520px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }

/* Ligne d'étoiles à recouvrement — un fond ☆ pleine largeur (var(--line))
   surmonté d'un calque ★ tronqué en pourcentage (var(--gold)), ce qui
   permet n'importe quelle fraction de remplissage (2.5, 3.5...) plutôt que
   de devoir choisir entre étoile pleine ou vide comme le ferait un simple
   compteur de glyphes. Réutilisé tel quel par le sélecteur interactif du
   formulaire (.stars-input .star-btn) et par l'affichage lecture seule
   (.review-item .star-row). */
.star-row { position: relative; display: inline-block; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.star-row-bg { color: var(--line); }
.star-row-fill { position: absolute; inset: 0; overflow: hidden; color: var(--gold); white-space: nowrap; }

.stars-input { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; }
.stars-input .star-btn { position: relative; display: inline-block; background: none; border: none; padding: 0; font-size: 26px; line-height: 1; cursor: pointer; }
.stars-input .star-btn .star-row-bg { color: var(--line); }
.stars-input .star-btn .star-row-fill { color: var(--gold); }
.stars-input-value { margin-left: 8px; font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.review-photos { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.review-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.review-photo-preview { display: flex; align-items: center; gap: 14px; }
.review-photo-preview img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }

.review-item .r-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.review-like-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0;
    font-size: 12.5px; color: var(--ink-faint); cursor: pointer;
}
.review-like-btn:hover:not(:disabled) { color: var(--gold); }
.review-like-btn.is-liked { color: var(--gold); }
.review-like-btn:disabled { cursor: default; }
.review-like-btn svg { width: 15px; height: 15px; }

.review-replies { margin-top: 14px; padding-left: 18px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.review-reply .r-label { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); }
.review-reply p { margin-top: 4px; }

.admin-reply-toggle { margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; }
.admin-reply-form { margin-top: 12px; }
.admin-reply-form .field { margin-bottom: 10px; }
.admin-reply-form textarea { min-height: 70px; }

/* Zones nommées : "summary" occupe les deux lignes de la colonne de
   gauche (items + recommandations) — ça lui donne assez de hauteur pour
   que le sticky ait de la place où "flotter" pendant le scroll, même
   quand le panier ne contient qu'un ou deux articles. En mobile, l'ordre
   visuel (items -> résumé -> recos) est fixé par grid-template-areas et
   ne dépend donc pas de l'ordre du DOM. */
.cart-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas: "items summary" "recs summary";
    gap: 56px;
}
.cart-items-col { grid-area: items; min-width: 0; }
.cart-summary { grid-area: summary; }

.cart-list-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.cart-select-all { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); cursor: pointer; }
.cart-select-all input { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; }
.cart-ttc-note { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint); }

.cart-item-row { position: relative; display: grid; grid-template-columns: auto 90px 1fr auto auto; gap: 20px; align-items: center; padding: 24px 44px 24px 0; border-bottom: 1px solid var(--line); }
.cart-item-row .cart-item-check { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; }
.cart-item-row img { width: 90px; height: 90px; object-fit: contain; background: var(--white); border: 1px solid var(--line); mix-blend-mode: multiply; }
.cart-item-row .ci-name { font-family: var(--font-display); font-size: 17px; }
.cart-item-row .ci-unit-price { color: var(--ink-faint); font-size: 13px; margin-top: 4px; }
.cart-item-row .ci-total { font-weight: 600; }
.ci-remove-btn {
    position: absolute; top: 24px; right: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius);
    color: var(--ink-faint);
    transition: color .2s ease, background .2s ease;
}
.ci-remove-btn svg { width: 17px; height: 17px; }
.ci-remove-btn:hover { color: #b23b3b; background: var(--paper-alt); }
/* Résumé de commande : bloc noir épuré, même parti pris que .cta-band /
   .bo-sidebar — texte papier à opacité dégradée, accents or, CTA en
   btn-gold puisqu'un .btn noir disparaîtrait sur ce fond. */
.cart-summary-box { position: sticky; top: 96px; background: var(--ink); color: var(--paper); padding: 32px 28px; }
.cart-summary-box h3 { font-size: 18px; margin-bottom: 18px; color: var(--paper); }
.cart-summary-box .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(250, 246, 239, 0.14); font-size: 14.5px; color: rgba(250, 246, 239, 0.75); }
.cart-summary-box .row.total { font-weight: 600; font-size: 17px; border-bottom: none; padding-top: 18px; color: var(--paper); }
.cart-summary-box .field label { color: rgba(250, 246, 239, 0.55); }
.cart-summary-box .form-error { color: #ff8a8a; }
.cart-summary-box .link-underline { color: var(--gold-bright); border-color: var(--gold-bright); }
.cart-shipping-note { font-size: 12.5px; color: rgba(250, 246, 239, 0.5); margin-top: -4px; }
.cart-payment-methods { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(250, 246, 239, 0.14); }
.cart-payment-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(250, 246, 239, 0.5); margin-bottom: 10px; }
.payment-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-badge { padding: 7px 12px; border: 1px solid rgba(250, 246, 239, 0.22); border-radius: var(--radius); font-size: 12px; color: rgba(250, 246, 239, 0.8); }
.cart-empty { text-align: center; padding: 60px 0; color: var(--ink-faint); }

.cart-recs { grid-area: recs; padding-top: 40px; border-top: 1px solid var(--line); }
.cart-recs .section-head { margin-bottom: 32px; }
.cart-recs .section-head h2 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 10px; }

/* Institut / à propos style band */
.split-feature { display: grid; grid-template-columns: 1fr 1fr; }
.split-feature .ph-media { aspect-ratio: 4/5; background: var(--paper-alt); overflow: hidden; }
.split-feature .ph-media img { width: 100%; height: 100%; object-fit: cover; }
.split-feature .ph-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px var(--gutter); }
.split-feature .ph-copy h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 16px 0 20px; }
.split-feature .ph-copy p { color: var(--ink-soft); margin-bottom: 30px; max-width: 460px; }
@media (max-width: 860px) { .split-feature { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
    .shop-layout { grid-template-columns: 1fr; }

    .shop-toolbar { justify-content: space-between; }

    .shop-filters-trigger {
        display: inline-flex; align-items: center; gap: 8px;
        margin-bottom: 0; padding: 12px 20px;
        border: 1px solid var(--ink); border-radius: var(--radius);
        font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--ink); cursor: pointer;
    }
    .shop-filters-trigger svg { width: 16px; height: 16px; }
    .shop-filters-trigger:hover { background: var(--paper-alt); }

    .shop-filters-backdrop {
        position: fixed; inset: 0; background: rgba(21, 18, 15, 0.55); z-index: 190;
        opacity: 0; visibility: hidden;
        transition: opacity .35s ease, visibility 0s linear .35s;
    }
    .shop-filters-checkbox:checked ~ .shop-filters-backdrop {
        opacity: 1; visibility: visible; transition: opacity .35s ease;
    }

    /* .shop-filters devient le panneau lui-même — masqué hors écran par
       défaut, glisse depuis la droite quand la checkbox est cochée. */
    .shop-filters {
        position: fixed; top: 0; right: 0; z-index: 200;
        width: min(88vw, 380px); height: 100vh; height: 100dvh;
        background: var(--paper);
        display: flex; flex-direction: column;
        padding: 0 var(--gutter) 32px;
        max-height: none; overflow-y: auto;
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        box-shadow: -30px 0 60px rgba(21, 18, 15, 0.2);
    }
    .shop-filters-checkbox:checked ~ .shop-layout .shop-filters { transform: translateX(0); }

    .shop-filters-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 0; margin-bottom: 20px;
        border-bottom: 1px solid var(--line);
        position: sticky; top: 0; background: var(--paper); flex-shrink: 0;
    }
    .shop-filters-head span { font-family: var(--font-display); font-size: 19px; }
    .shop-filters-close {
        display: flex; width: 34px; height: 34px;
        align-items: center; justify-content: center;
        cursor: pointer; color: var(--ink-soft); flex-shrink: 0;
    }
    .shop-filters-close svg { width: 20px; height: 20px; }
    .shop-filters-close:hover { color: var(--gold); }

    .product-detail { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .footer-top { grid-template-columns: 1fr; }
    .cart-grid { grid-template-columns: 1fr; grid-template-areas: "items" "summary" "recs"; gap: 40px; }
    .cart-summary-box { position: static; }
    .cart-item-row { grid-template-columns: auto 70px 1fr; }
    /* justify-self: le calage sur la colonne "1fr" (large) étirait le cadre
       du stepper à toute sa largeur — il doit garder sa taille naturelle. */
    .cart-item-row .qty-stepper { grid-column: 3; justify-self: start; }
    .cart-item-row > div:nth-child(5) { grid-column: 3; }
}

@media (max-width: 420px) {
    .add-cart-row { flex-wrap: wrap; }
    .add-cart-row .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
    .pd-thumbs { flex-wrap: wrap; }
}

/* ==========================================================================
   Back-office — espace client (/backoffice/users)
   Même système visuel que le site (tokens --ink/--gold/--paper), pas de
   Tailwind ici : mise en page en CSS natif, cohérente avec le reste.
   ========================================================================== */
body.backoffice { background: var(--paper-alt); }

.bo-shell { display: flex; min-height: 100vh; }

.bo-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.bo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 22px;
    border-bottom: 1px solid rgba(250, 246, 239, 0.12);
    font-family: var(--font-display);
    font-size: 17px;
}
.bo-brand img { height: 30px; width: auto; background: var(--paper); border-radius: 2px; padding: 2px; }
.bo-nav { flex: 1; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.bo-nav button {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 11px 14px;
    background: none; border: none; border-radius: var(--radius);
    color: rgba(250, 246, 239, 0.7);
    font-size: 13.5px; font-weight: 500;
    text-align: left; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.bo-nav button svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.6; }
.bo-nav button:hover { background: rgba(250, 246, 239, 0.08); color: var(--paper); }
.bo-nav button.is-active { background: var(--gold-bright); color: var(--ink); font-weight: 600; }
.bo-nav-foot { padding: 12px; border-top: 1px solid rgba(250, 246, 239, 0.12); }
.bo-nav-foot button {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 11px 14px;
    background: none; border: none; border-radius: var(--radius);
    color: rgba(250, 246, 239, 0.7);
    font-size: 13.5px; font-weight: 500;
    cursor: pointer; transition: background .2s ease, color .2s ease;
}
.bo-nav-foot button svg { width: 18px; height: 18px; stroke-width: 1.6; }
.bo-nav-foot button:hover { background: rgba(178, 59, 59, 0.16); color: #e08080; }

.bo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bo-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 32px;
    background: var(--white); border-bottom: 1px solid var(--line);
}
.bo-topbar h1 { font-size: 21px; }
.bo-topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.bo-topbar-user strong { color: var(--ink); }
.bo-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold-pale); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.bo-menu-toggle { display: none; background: none; border: none; padding: 6px; color: var(--ink); cursor: pointer; }
.bo-menu-toggle svg { width: 22px; height: 22px; }

.bo-content { flex: 1; padding: 32px; max-width: 980px; width: 100%; }
.bo-content-head { margin-bottom: 24px; }
.bo-content-head h2 { font-size: 26px; margin-bottom: 6px; }
.bo-content-head p { color: var(--ink-faint); font-size: 14px; }

/* Commandes */
.order-list { display: flex; flex-direction: column; gap: 14px; }
.order-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.order-card:hover { border-color: var(--gold-bright); box-shadow: 0 8px 24px rgba(21,18,15,0.06); }
.order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.order-card-head h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.order-card-head time { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-total { font-size: 18px; font-weight: 700; color: var(--gold); }

.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.wishlist-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
}
.wishlist-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--paper); }
.wishlist-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; mix-blend-mode: multiply; }
.wishlist-card-remove {
    /* z-index explicite : sans lui, le bouton se fait quand même "recouvrir"
       par le clic sur l'image en dessous — mix-blend-mode sur <img> force un
       contexte d'empilement isolé qui, sur Chromium, peut faire gagner la
       compositing layer de l'image même sur un absolu sans z-index. */
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: rgba(250, 246, 239, 0.9); border: none; border-radius: 50%; color: var(--ink-soft);
}
.wishlist-card-remove:hover { color: #b23b3b; }
.wishlist-card-remove svg { width: 15px; height: 15px; }
.wishlist-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wishlist-card-name { font-size: 14px; font-weight: 500; line-height: 1.35; }
.wishlist-card-name a:hover { color: var(--gold); }
.wishlist-card-price { font-size: 15px; font-weight: 600; color: var(--gold); }
.wishlist-card-price .was { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); text-decoration: line-through; margin-left: 6px; }
.wishlist-card-out { font-size: 12px; color: var(--ink-faint); }
.wishlist-card-body .btn { margin-top: auto; }

.status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pending { background: #fdf3e0; color: #9a6b12; border-color: #f1dcae; }
.status-processing, .status-on-hold { background: #e9f0fb; color: #2f5fa8; border-color: #cfe0f7; }
.status-completed { background: #eaf6e9; color: #3d7a37; border-color: #cfe9cc; }
.status-cancelled, .status-failed { background: #fbe9e9; color: #b23b3b; border-color: #f3cccc; }
.status-refunded { background: var(--paper-alt); color: var(--ink-faint); border-color: var(--line); }

/* Détail commande (panneau) */
.order-panel-backdrop {
    position: fixed; inset: 0; background: rgba(21, 18, 15, 0.5);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 20px; overflow-y: auto; z-index: 300;
}
.order-panel {
    background: var(--white); border-radius: var(--radius);
    max-width: 640px; width: 100%; overflow: hidden;
}
.order-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 22px 26px; background: var(--ink); color: var(--paper);
}
.order-panel-head h3 { font-family: var(--font-body); font-size: 16px; }
.order-panel-head time { display: block; font-size: 12.5px; color: rgba(250,246,239,0.6); margin-top: 3px; }
.order-panel-close {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(250,246,239,0.12); border: none; border-radius: 50%;
    color: var(--paper); cursor: pointer;
}
.order-panel-close svg { width: 16px; height: 16px; }
.order-panel-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 22px; }
.order-items { display: flex; flex-direction: column; gap: 12px; }
.order-item-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.order-item-row:last-child { border-bottom: none; }
.order-item-name { font-size: 14px; font-weight: 500; }
.order-item-qty { font-size: 12.5px; color: var(--ink-faint); }
.order-item-total { font-weight: 600; white-space: nowrap; }
.order-summary { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.order-summary .row { display: flex; justify-content: space-between; color: var(--ink-soft); }
.order-summary .row.total { padding-top: 10px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 700; color: var(--ink); }

/* Profil */
.profile-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 480px; }
.profile-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-pale); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; flex-shrink: 0; }
.profile-card-head h3 { font-size: 19px; }
.profile-card-head span { font-size: 13px; color: var(--ink-faint); }
.profile-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.profile-row:last-child { border-bottom: none; }
.profile-row span:first-child { color: var(--ink-faint); }
.profile-row span:last-child { font-weight: 500; text-align: right; }
.role-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gold-pale); color: var(--gold); }

/* Adresses (profil client) */
.address-list { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-top: 16px; }
.address-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.address-card-body { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--ink-soft); }
.address-card-body strong { font-size: 14.5px; color: var(--ink); }
.address-card-remove {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
    color: var(--ink-faint); font-size: 18px; line-height: 1; cursor: pointer; transition: color .15s, background .15s;
}
.address-card-remove:hover { color: #b23b3b; background: var(--paper-alt); }
.address-card-edit {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
    color: var(--ink-faint); font-size: 13px; line-height: 1; cursor: pointer; transition: color .15s, background .15s;
}
.address-card-edit:hover { color: var(--gold); background: var(--paper-alt); }
.address-form { max-width: 480px; margin-top: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.address-form-actions { display: flex; gap: 10px; margin-top: 8px; }

@media (max-width: 900px) {
    .bo-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 250; transform: translateX(-100%); transition: transform .25s ease; }
    .bo-sidebar.is-open { transform: translateX(0); box-shadow: 30px 0 60px rgba(21,18,15,0.25); }
    .bo-menu-toggle { display: flex; }
    .bo-content { padding: 20px; }
    .bo-topbar { padding: 14px 18px; }
    .bo-topbar-user span.bo-topbar-name { display: none; }
}
@media (max-width: 560px) {
    .order-card-head { flex-direction: column; }
    .order-card-foot { flex-wrap: wrap; }
    .profile-card { padding: 22px; }
}

/* ==========================================================================
   Éditeur riche (Tiptap) — back-office admin
   ========================================================================== */
.rte-content { padding: 12px 14px; font-size: 14px; line-height: 1.6; color: #111827; outline: none; cursor: text; }
.rte-content p { margin: 0 0 10px; }
.rte-content p:last-child { margin-bottom: 0; }
.rte-content h2 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
.rte-content h3 { font-size: 17px; font-weight: 700; margin: 14px 0 6px; }
.rte-content h2:first-child, .rte-content h3:first-child { margin-top: 0; }
.rte-content ul, .rte-content ol { margin: 0 0 10px; padding-left: 22px; }
.rte-content li { margin-bottom: 4px; }
.rte-content blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid #d1d5db; color: #4b5563; font-style: italic; }
.rte-content strong { font-weight: 700; }
.rte-content a { color: #0284c7; text-decoration: underline; }
.rte-content mark { background: rgba(223, 187, 91, 0.4); border-radius: 2px; padding: 0 1px; }
.rte-content h1 { font-size: 24px; font-weight: 700; margin: 18px 0 10px; }
.rte-content h1:first-child { margin-top: 0; }
.rte-content h4 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.rte-content p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #9ca3af;
    pointer-events: none;
    height: 0;
}

/* ==========================================================================
   Bandeau cookies (Google Consent Mode v2)
   ========================================================================== */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.cookie-consent__box {
    width: 100%;
    max-width: 760px;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 12px 36px rgba(21, 18, 15, 0.22);
    padding: 22px 24px;
}

.cookie-consent__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 8px;
}

.cookie-consent__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 16px;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-consent__actions .btn,
.cookie-consent__actions .btn-ghost {
    padding: 10px 20px;
    font-size: 13px;
}

.cookie-consent__customize {
    margin-right: auto;
}

.cookie-consent__panel {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--paper-deep);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cookie-consent__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cookie-consent__row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 2px;
}

.cookie-consent__row-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-faint);
    margin: 0;
}

.cookie-consent__switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
}

.cookie-consent__switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.cookie-consent__switch span {
    position: absolute;
    inset: 0;
    background: var(--paper-deep);
    border: 1px solid var(--ink-faint);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cookie-consent__switch span::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--paper);
    transition: transform 0.15s ease;
}

.cookie-consent__switch input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
}

.cookie-consent__switch input:checked + span::before {
    transform: translateX(18px);
    background: var(--gold-bright);
}

.cookie-consent__switch--locked input {
    cursor: default;
}

/* ==========================================================================
   Popup d'annonce (ex. "peau neuve") — piloté depuis Réglages > Annonce
   ========================================================================== */
.rebrand-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rebrand-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(21, 18, 15, 0.55);
}

.rebrand-popup__box {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 20px 48px rgba(21, 18, 15, 0.3);
    padding: 36px 28px 28px;
    text-align: center;
}

.rebrand-popup__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
}

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

.rebrand-popup__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 12px;
}

.rebrand-popup__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 20px;
}

.rebrand-popup__cta {
    display: inline-block;
}

.cookie-consent__switch--locked span {
    opacity: 0.6;
}

.cookie-consent__actions--panel {
    margin-top: 4px;
}

@media (max-width: 560px) {
    .cookie-consent { padding: 0; }
    .cookie-consent__box { border-width: 1px 0 0; }
    .cookie-consent__actions { justify-content: stretch; }
    .cookie-consent__actions .btn,
    .cookie-consent__actions .btn-ghost { flex: 1; text-align: center; }
    /* Même spécificité que ".cookie-consent__actions .btn-ghost" ci-dessus
       (deux classes) — sinon cette règle perd malgré son flex-basis:100%
       voulu pour forcer "Personnaliser" seul sur sa ligne, et les 3
       boutons se répartissent de façon imprévisible selon la largeur
       jusqu'à déborder. */
    .cookie-consent__actions .cookie-consent__customize { margin-right: 0; flex-basis: 100%; }
}

/* Nav de la sidebar admin (Dashboard.jsx) — scrollbar fine et discrète
   plutôt que la barre grise épaisse par défaut du navigateur, qui jure sur
   fond sombre avec beaucoup d'onglets. */
.admin-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.admin-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.admin-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.admin-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.admin-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.32);
}

/* Variante claire du même traitement, pour les volets à fond blanc/gris
   clair du back-office (ex. messagerie — ChatList/ChatThread/ChatInfoPanel). */
.admin-scroll-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
.admin-scroll-thin::-webkit-scrollbar {
    width: 6px;
}
.admin-scroll-thin::-webkit-scrollbar-track {
    background: transparent;
}
.admin-scroll-thin::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
}
.admin-scroll-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.32);
}

/* ==========================================================================
   Quickview produit — modale ouverte depuis la carte produit (grille)
   ========================================================================== */
.quickview-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.quickview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(21, 18, 15, 0.55);
}

.quickview-box {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 24px 56px rgba(21, 18, 15, 0.32);
    display: flex;
    flex-direction: column;
}

/* Le scroll vit ici, pas sur .quickview-box : .quickview-close reste hors de
   cette zone, donc toujours visible (sticky) même quand le contenu défile. */
.quickview-scroll {
    /* flex: 1 + min-height: 0 : sans ça, un enfant flex ne se contracte pas
       sous sa taille de contenu et étire .quickview-box au-delà de
       max-height au lieu de défiler en interne. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 44px 36px 36px;
}

.quickview-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    z-index: 1;
}

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

.quickview-state {
    padding: 60px 0;
    text-align: center;
    color: var(--ink-faint);
}

.quickview-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.quickview-gallery .pd-gallery-main {
    aspect-ratio: 1 / 1;
    max-height: 380px;
}

.quickview-title {
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 10px 0 12px;
}

.quickview-info .product-rating { margin-bottom: 16px; }
.quickview-info .pd-price { font-size: 20px; margin-bottom: 16px; }
.quickview-info .pd-stock { margin-bottom: 18px; }
.quickview-info .add-cart-row { margin-bottom: 18px; }

.quickview-variant-list {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 18px;
}

.pd-thumbs img.is-active { border-color: var(--ink); }

.quickview-desc {
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: 14px;
    margin: 0 0 18px;
}

.quickview-link {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 720px) {
    /* Bottom sheet plutôt que modale centrée : plus naturel au pouce sur
       mobile (la carte produit d'où on ouvre l'aperçu est déjà en bas de
       l'écran), et évite qu'une fenêtre centrée coupe le clavier virtuel
       quand un champ est focus. */
    .quickview-modal {
        align-items: flex-end;
        padding: 0;
    }
    .quickview-box {
        max-width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        animation: quickview-sheet-up 0.28s ease-out;
    }
    .quickview-scroll {
        padding: 32px 20px 24px;
    }
    /* Fermeture : même trajet que l'ouverture, rejoué en sens inverse — cf.
       QuickView/index.jsx, requestClose() (attend la fin de l'animation,
       CLOSE_ANIMATION_MS, avant de démonter la modale). */
    .quickview-box.is-closing {
        animation: quickview-sheet-down 0.28s ease-in forwards;
    }
    /* Poignée visuelle en haut de la feuille, signal universel "glisser pour
       fermer" même si le geste lui-même n'est pas câblé côté JS. */
    .quickview-box::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--ink-faint, #c9c2b8);
    }
    .quickview-content { grid-template-columns: 1fr; gap: 20px; }
}

@keyframes quickview-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes quickview-sheet-down {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* ==========================================================================
   Raccourci admin sur la fiche produit publique (boutique/show.php) — visible
   uniquement au cookie admin, jamais aux clientes. bottom:96px + z-index:95
   pour rester au-dessus de .sticky-add-bar (bottom:0, z-index:90) plutôt que
   de se faire recouvrir quand celle-ci apparaît au scroll.
   ========================================================================== */
.admin-product-fab {
    position: fixed;
    left: 20px;
    bottom: 96px;
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--gold-bright);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(21, 18, 15, 0.35);
    transition: background-color .2s ease, transform .2s ease;
}
.admin-product-fab:hover {
    background: var(--gold-bright);
    color: var(--ink);
    transform: translateY(-2px);
}
.admin-product-fab svg { flex-shrink: 0; }

@media (max-width: 640px) {
    .admin-product-fab span { display: none; }
    .admin-product-fab { padding: 12px; }
}

/* ---------------------------------------------------------------------
   Comparatif "avant / après" — slider interactif (accueil + fiche produit)
   ------------------------------------------------------------------- */
.ba-slider-gallery { margin-top: 32px; }
.ba-slider-heading {
    font-family: var(--font-display);
    font-size: 28px;
    text-align: center;
    margin: 0 0 32px;
    color: var(--ink);
}
.ba-slider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.ba-slider-item { margin: 0; }
.ba-slider-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper);
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
}
.ba-slider-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ba-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gold-bright);
    transform: translateX(-1px);
    pointer-events: none;
}
.ba-slider-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(21, 18, 15, 0.3);
    pointer-events: auto;
    cursor: ew-resize;
}
.ba-slider-knob:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ba-slider-tag {
    position: absolute;
    top: 14px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    background: rgba(21, 18, 15, 0.55);
    padding: 5px 10px;
    border-radius: var(--radius);
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.ba-slider-tag-before { left: 14px; }
.ba-slider-tag-after { right: 14px; }
.ba-slider-caption {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.ba-slider-product-link {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
}
.ba-slider-product-link:hover { color: var(--ink); text-decoration: underline; }

/* Variante "carte" (accueil) : aperçus compacts en grille façon
   product-grid plutôt qu'un plein cadre par comparatif — le balayage
   automatique au survol (cf. BeforeAfterSlider prop `auto`) remplace le
   besoin de glisser soi-même sur un si petit format. */
.ba-slider-gallery-compact .ba-slider-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center;
    gap: 20px;
}
.ba-slider-gallery-compact .ba-slider-frame {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(21, 18, 15, 0.08);
}
.ba-slider-gallery-compact .ba-slider-knob { width: 30px; height: 30px; }
.ba-slider-gallery-compact .ba-slider-tag { font-size: 9px; padding: 4px 8px; top: 10px; }
.ba-slider-gallery-compact .ba-slider-tag-before { left: 10px; }
.ba-slider-gallery-compact .ba-slider-tag-after { right: 10px; }
.ba-slider-gallery-compact .ba-slider-caption { font-size: 12px; }