/* BERNDS PRODUCTION — motion.css : socle de la boutique (tokens, typographie, composants ui-*,
   mouvement, transitions de vue, mouvement réduit) + bloc du parcours vitrine. Contrat : docs/BOUTIQUE-MOTION.md.
   Chargée après le <style> en ligne et styles.css : à spécificité égale, elle l'emporte sur les deux.
   Feuille BLOQUANTE du premier rendu (accueil, legal.html) : n'y mettre que ce qui sert au socle et à la
   galerie. Fiche, visionneuse, panier, commande et merci (blocs oeuvre et achat) : motion-couches.css,
   chargée sans bloquer le rendu de la galerie (voir son en-tête).
   N'animer que transform / translate / scale / opacity ; couleurs et bordures : transitions ≤ 200 ms. */

/* ══ 1. TOKENS ══════════════════════════════════════════════════════════════ */
:root {
  /* Couleurs (contrastes AA vérifiés sur --paper et --sand : docs § 2) */
  --paper: #FAF8F5;
  --surface: #FFFFFF;
  --sand: #F1ECE5;
  --ink: #1A1916;
  --ink-2: #4F4A44;
  --muted: #6F6A63;
  --line: #E6E1D9;
  --line-strong: #8A857E;
  --accent: #9B4F26;
  --accent-hover: #823F1B;
  --accent-soft: #F5E9E0;
  --ok: #3D6B4B;  --ok-soft: #E8F2EB;
  --ok-fort: #2B5236;   /* « ajouté » sur un verre : --ok passe sous 4,5:1 au pire fond (recette du 2026-11-02) */
  --danger: #B03A2E; --danger-soft: #FBEDEB;
  --on-ink: #FAF8F5;
  --scrim: rgba(26, 25, 22, .42);
  /* Alias hérités (index.html, app.js) : ne pas employer dans le nouveau code */
  --cream: var(--paper); --jet: var(--ink);

  /* Typographie fluide (320 → 1440 px) */
  --font-text: 'Outfit', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
  --fs-display: clamp(2.75rem, 1.9rem + 4.2vw, 4.125rem);
  --fs-h1: clamp(2rem, 1.62rem + 1.9vw, 2.75rem);
  --fs-h2: clamp(1.625rem, 1.38rem + 1.25vw, 2.375rem);
  --fs-h3: clamp(1.1875rem, 1.12rem + .35vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-caption: .8125rem;
  --fs-eyebrow: .6875rem;
  --fs-price: clamp(1.375rem, 1.27rem + .5vw, 1.75rem);
  --fw-text: 350; --fw-medium: 500; --fw-bold: 700;
  --lh-tight: 1.04; --lh-snug: 1.25; --lh-body: 1.6;
  --ls-display: -.04em; --ls-title: -.025em; --ls-eyebrow: .16em;

  /* Espacements (base 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --gutter: clamp(1rem, .75rem + 1.6vw, 2rem);
  --section: clamp(3.5rem, 2.6rem + 4.5vw, 7rem);
  --content: 72rem;

  /* Formes : angles droits ; exceptions = pastilles, badges, haut des feuilles du bas */
  --r-0: 0; --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-sheet: 16px; --r-pill: 999px;   /* coins légèrement arrondis partout (2026-10-19) */
  /* Ombres : couches flottantes seulement (feuille, barre du bas, vignette en vol, toast) */
  --shadow-float: 0 -6px 28px rgba(26, 25, 22, .12);
  --shadow-pop: 0 10px 34px rgba(26, 25, 22, .2);

  /* Écran : en-tête, zones sûres iOS, cibles tactiles, éléments fixés en bas */
  --header-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tap: 44px;
  --bar-h: 64px;
  --consent-h: 0px;
  --bas-occupe: 0px;

  /* Superpositions */
  --z-header: 40; --z-bar: 45; --z-scrim: 48; --z-sheet: 50; --z-fly: 60; --z-toast: 99999;

  /* Mouvement (recopiés dans Motion.ease et Motion.dur côté JS) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --d-press: 120ms;
  --d-fast: 200ms;
  --d-base: 320ms;
  --d-slow: 460ms;
  --d-reveal: 650ms;
  --stagger: 60ms;

  /* Verre (2026-11-02, skill .claude/skills/design-verre) : couche de commande flottante seulement (en-tête,
     pastilles, barres du bas, menu, bandeau, toast, outils posés sur une photo) — jamais le contenu (cartes,
     feuille du panier, formulaires, texte de la fiche). Opacités plancher calculées sur le pire fond (noir sous un
     verre clair, blanc sous un verre sombre) et vérifiées par tests/design-verre.test.mjs :
     --verre ≥ 4,5:1 pour --ink, --ink-2 et --accent-hover ; --verre-leger ≥ 3:1 pour une icône --ink ;
     --verre-encre ≥ 4,5:1 pour --on-ink ; --verre-encre-leger ≥ 3:1 pour une icône blanche.
     Sur un verre : jamais --muted, --accent ni --ok en petit texte (→ --ink-2, --accent-hover, --ok-fort). */
  --verre: rgba(250, 248, 245, .8);              /* surface avec du texte */
  --verre-fort: rgba(250, 248, 245, .88);        /* lecture longue : menu, bandeau, voile de redirection */
  --verre-leger: rgba(250, 248, 245, .6);        /* pastille d'icône --ink seule */
  --verre-encre: rgba(26, 25, 22, .84);          /* verre sombre avec texte clair (toast) : assez dense pour ne pas laisser lire le texte du dessous */
  --verre-encre-leger: rgba(26, 25, 22, .5);     /* pastille d'icône blanche sur une photo */
  --verre-flou: saturate(1.7) blur(20px);
  --verre-flou-leger: saturate(1.5) blur(10px);  /* petites pastilles (≤ 48 px : boutons ronds, cœurs, outils de la fiche) */
  --verre-flou-fort: saturate(1.3) blur(40px);  /* couche plein écran (menu, voile) : lavis doux, sans taches */
  --voile-flou: blur(8px);                       /* voile sombre derrière une fenêtre (fiche sur le bureau) : pas un verre */
  --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, .65);   /* arête lumineuse du haut */
  --verre-bord: rgba(255, 255, 255, .55);        /* contour des pastilles (visible sur une photo) */
  --verre-filet: rgba(26, 25, 22, .08);          /* séparation d'une barre et du contenu */
  --verre-ombre: 0 8px 28px rgba(26, 25, 22, .12);
}

/* Verre : replis opaques (mêmes surfaces, sans flou) — navigateur sans backdrop-filter, transparence réduite
   demandée (Chromium ; Safari ne transmet pas le réglage d'iOS : l'opacité plancher garde le texte lisible),
   contraste élevé. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --verre: rgba(250, 248, 245, .97); --verre-fort: rgba(250, 248, 245, .98); --verre-leger: rgba(250, 248, 245, .94);
    --verre-encre: rgba(26, 25, 22, .92); --verre-encre-leger: rgba(26, 25, 22, .78); --verre-flou: none; --verre-flou-leger: none; --verre-flou-fort: none; --voile-flou: none;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --verre: var(--paper); --verre-fort: var(--paper); --verre-leger: var(--paper);
    --verre-encre: var(--ink); --verre-encre-leger: rgba(26, 25, 22, .86); --verre-flou: none; --verre-flou-leger: none; --verre-flou-fort: none; --voile-flou: none; --verre-reflet: 0 0 #0000;
  }
}
@media (prefers-contrast: more) { :root { --verre-filet: var(--line-strong); --verre-bord: var(--line-strong); } }

/* ══ 2. BASE ════════════════════════════════════════════════════════════════ */
/* Chiffres tabulaires : prix, totaux, compteurs */
.t-num, .ui-price, .ui-count { font-variant-numeric: tabular-nums; }
/* Titre focalisé par programme (ouverture d'une couche, changement de vue) : pas d'anneau */
[tabindex="-1"]:focus { outline: none; }
/* Retour d'appui sur tactile : l'effet visuel vient de :active (§ 5), plus de reflet gris */
:where(button, .btn-cta, .ui-btn, .ui-icon-btn, .ui-chip, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(a, [role="button"], label) { touch-action: manipulation; }
/* Ancres et focus : jamais cachés sous l'en-tête fixe */
:where([id]) { scroll-margin-top: calc(var(--header-h) + var(--safe-t) + 16px); }
/* Ordre des couches (Layers) : fiche (#modal-overlay, 50) < panier (voile 51, feuille 52) < visionneuse < toast < consentement */
#cart-overlay { z-index: 51; }
#cart-sidebar { z-index: 52; }
/* Avant l'arrivée de motion-couches.css (accueil, premier rendu) : panier et voile fermés hors du flux et
   invisibles ; la feuille des couches les place ensuite (feuille du bas, tiroir) */
#cart-overlay, #cart-sidebar { position: fixed; }
#cart-overlay:not(.is-open), #cart-sidebar:not(.is-open) { visibility: hidden; }
/* Fiche en page (téléphone) : le panier fermé n'est ni mis en page ni peint (il reste ouvrable par-dessus) */
html.modal-page #cart-sidebar:not(.is-open) { display: none; }
/* Lecteurs d'écran seulement */
.ui-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ 3. TYPOGRAPHIE ═════════════════════════════════════════════════════════ */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--ink); }
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1.06; letter-spacing: var(--ls-display); color: var(--ink); }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: var(--ls-title); color: var(--ink); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--ink); }
.t-lead { font-size: var(--fs-lead); font-weight: var(--fw-text); line-height: var(--lh-body); color: var(--ink-2); }
.t-body { font-size: var(--fs-body); font-weight: var(--fw-text); line-height: var(--lh-body); color: var(--ink-2); }
.t-small { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.t-caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--muted); }
.t-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); }

/* ══ 4. COMPOSANTS ══════════════════════════════════════════════════════════ */
/* Bouton : .ui-btn + une variante (--primary | --secondary | --ghost | --accent) ;
   tailles --sm (40 px) / défaut (48 px) / --lg (52 px) ; --block = pleine largeur.
   Libellé en casse normale ; occupé : aria-busy="true" (libellé conservé, largeur stable). */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-s);
  font-family: var(--font-text); font-size: 15px; font-weight: var(--fw-medium); line-height: 1.2;
  letter-spacing: .01em; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast), scale var(--d-press) var(--ease-out);
}
.ui-btn--primary { background: var(--ink); color: var(--on-ink); }
.ui-btn--accent { background: var(--accent); color: var(--on-ink); }
.ui-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.ui-btn--ghost { background: transparent; color: var(--ink); padding: 0 4px; min-height: var(--tap); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ui-btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-small); }
.ui-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { background: #CDC9C2; color: #5F5A54; border-color: transparent; cursor: not-allowed; }
.ui-btn--secondary:disabled, .ui-btn--ghost:disabled { background: transparent; color: var(--muted); border-color: var(--line); }
.ui-btn[aria-busy="true"] { cursor: progress; opacity: .82; }
.ui-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Bouton icône : 44 × 44, aria-label obligatoire ; --round sur une photo, --on-dark sur fond sombre */
.ui-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color var(--d-fast), border-color var(--d-fast), scale var(--d-press) var(--ease-out);
}
.ui-icon-btn--round {
  border-radius: var(--r-pill); border-color: var(--verre-bord); background: var(--verre-leger);
  -webkit-backdrop-filter: var(--verre-flou-leger); backdrop-filter: var(--verre-flou-leger); box-shadow: var(--verre-reflet);
}
.ui-icon-btn--on-dark { border-color: rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .45); color: #fff; }
.ui-icon-btn svg { width: 18px; height: 18px; }
/* Puce (filtre, choix) : <button aria-pressed> ou input radio + label ; 40 px de haut */
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast), scale var(--d-press) var(--ease-out);
}
.ui-chip[aria-pressed="true"], .ui-chip.is-active, input:checked + .ui-chip { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) {
  .ui-btn--primary:not(:disabled):hover { background: #333028; }
  .ui-btn--accent:not(:disabled):hover { background: var(--accent-hover); }
  .ui-btn--secondary:not(:disabled):hover { background: var(--ink); color: var(--on-ink); }
  .ui-btn--ghost:not(:disabled):hover { text-decoration-thickness: 2px; }
  .ui-icon-btn:hover { border-color: var(--ink); }
  .ui-icon-btn--round:hover { background: #fff; }
  .ui-chip:not([aria-pressed="true"]):not(.is-active):hover { border-color: var(--ink); }
}
/* Badge (sur une photo, une ligne) et compteur (badge du panier) */
.ui-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; line-height: 1.1; background: var(--ink); color: var(--on-ink);
}
.ui-badge--accent { background: var(--accent); }
.ui-badge--neutral { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ui-badge--ok { background: var(--ok-soft); color: var(--ok); }
.ui-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 600; line-height: 1;
}
/* Prix */
.ui-price { font-family: var(--font-display); font-size: var(--fs-price); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.ui-price s, .ui-price del { font-family: var(--font-text); font-size: .6em; font-weight: 400; color: var(--muted); margin-right: 6px; }
/* Champ : .ui-field > .ui-label + .ui-input (ou .ui-select / .ui-textarea) + .ui-hint + .ui-error (role="alert") */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-label { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--ink-2); }
.ui-label .ui-optional { font-weight: 400; color: var(--muted); }
.ui-input, .ui-select, .ui-textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.ui-textarea { padding: 12px 14px; min-height: 96px; line-height: 1.5; }
.ui-input::placeholder, .ui-textarea::placeholder { color: #8F8A82; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ui-hint { font-size: var(--fs-caption); line-height: 1.45; color: var(--muted); }
.ui-error { font-size: var(--fs-caption); line-height: 1.45; color: var(--danger); }
.ui-error:empty { display: none; }
/* Carte d'œuvre : .ui-card > .ui-card-media (2:3, img) + .ui-card-body > .ui-card-title, .ui-card-meta, .ui-price */
.ui-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ui-card-media { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--sand); }
.ui-card-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-card-body { padding-top: var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.ui-card-title { font-size: 15px; font-weight: var(--fw-medium); line-height: 1.3; color: var(--ink); }
.ui-card-meta { font-size: var(--fs-caption); color: var(--muted); }
/* Lien étiré : toute la carte cliquable par son lien principal */
.ui-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Squelette : forme finale réservée (aucun décalage de mise en page à l'arrivée du contenu) */
.ui-skeleton { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-s); }
.ui-skeleton--text { height: .9em; margin: .35em 0; }
.ui-skeleton--media { aspect-ratio: 2 / 3; }
.ui-skeleton::after {
  content: ''; position: absolute; inset: 0; translate: -100% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: mv-reflet 1.4s var(--ease-in-out) infinite;
}
/* Voile sous une feuille ou une fenêtre (.is-open = visible) */
.ui-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim);
  opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease-out), visibility 0s linear var(--d-base);
}
.ui-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--d-base) var(--ease-out); }
/* Feuille du bas (téléphone) : .ui-sheet(.is-open) > .ui-sheet-handle (zone de glisser) + contenu ;
   fermée = hors écran, invisible (donc ni lue ni atteignable). Glisser pour fermer : Motion.dragToDismiss. */
.ui-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  display: flex; flex-direction: column; max-height: min(92svh, calc(100svh - var(--safe-t) - 24px));
  background: var(--paper); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-float);
  padding-bottom: var(--safe-b); translate: 0 100%; visibility: hidden;
  transition: translate var(--d-base) var(--ease-in), visibility 0s linear var(--d-base);
}
.ui-sheet.is-open { translate: 0 0; visibility: visible; transition: translate var(--d-slow) var(--ease-sheet); }
.ui-sheet.is-dragging { transition: none; }
.ui-sheet-handle { flex-shrink: 0; display: flex; justify-content: center; align-items: center; height: 28px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.ui-sheet-handle::before { content: ''; width: 36px; height: 4px; border-radius: var(--r-pill); background: #CFC8BD; }
/* Barre d'action fixée en bas (achat de la fiche, mini-barre du panier, paiement) : .ui-bar(.is-visible).
   Se place au-dessus du bandeau de consentement ; safe-area comprise. Son propriétaire réserve sa hauteur
   (padding-bottom de la vue) et la déclare avec Layout.bottom(clé, px). */
.ui-bar {
  position: fixed; left: 0; right: 0; bottom: var(--consent-h); z-index: var(--z-bar);
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--bar-h);
  padding: 10px var(--gutter) calc(10px + var(--bar-safe, var(--safe-b)));
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border-top: 1px solid var(--verre-filet); box-shadow: var(--verre-reflet);
  translate: 0 calc(100% + var(--consent-h)); visibility: hidden;
  transition: translate var(--d-fast) var(--ease-in), visibility 0s linear var(--d-fast);
}
.ui-bar.is-visible { translate: 0 0; visibility: visible; transition: translate var(--d-base) var(--ease-out); }
html.has-consent { --bar-safe: 0px; }
/* Rail horizontal aimanté (photos, autres œuvres, avis) : suivi du doigt et inertie natifs, sans JS */
.ui-rail {
  display: flex; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ui-rail::-webkit-scrollbar { display: none; }
.ui-rail > * { flex: 0 0 var(--rail-item, 80%); scroll-snap-align: start; min-width: 0; }
.ui-rail--full { gap: 0; padding-inline: 0; scroll-padding-inline: 0; }
.ui-rail--full > * { --rail-item: 100%; scroll-snap-stop: always; }
/* Progression (remise, étapes, photos) : <span class="ui-progress" style="--p:.4"><span></span></span> */
.ui-progress { display: block; height: 3px; background: var(--line); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform var(--d-base) var(--ease-in-out); }
/* Notification brève (toast(msg)) : annoncée par #bp-annonce, placée au-dessus des barres du bas */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  bottom: calc(16px + max(var(--safe-b), var(--bas-occupe)));
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; pointer-events: none;
  background: var(--verre-encre); color: var(--on-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-pop);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); border-radius: var(--r-s);
  font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.4; text-align: center;
}

/* ══ 5. MOUVEMENT ═══════════════════════════════════════════════════════════ */
@keyframes mv-monte { from { opacity: 0; translate: 0 var(--mv-y, 12px); } }
@keyframes mv-descend { from { opacity: 0; translate: 0 calc(var(--mv-y, 12px) * -1); } }
@keyframes mv-fondu { from { opacity: 0; } }
@keyframes mv-echelle { from { opacity: 0; scale: .96; } }
@keyframes mv-revele { from { opacity: 0; translate: 0 var(--reveal-y, 24px); } }
@keyframes mv-revele-echelle { from { opacity: 0; scale: var(--reveal-scale, 1.06); } }
@keyframes mv-parallaxe { to { translate: 0 var(--parallax-y, 12%); } }
@keyframes mv-reflet { to { translate: 100% 0; } }
@keyframes mv-pulse { 50% { opacity: .45; } }

/* Entrée d'un élément qui apparaît (inséré ou affiché) : .mv-entree (monte de 12 px),
   .mv-entree--fondu, --descend, --echelle ; cascade : style="--i:2". Jamais sur le LCP. */
.mv-entree { animation: mv-monte var(--d-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.mv-entree--fondu { animation-name: mv-fondu; }
.mv-entree--descend { animation-name: mv-descend; }
.mv-entree--echelle { animation-name: mv-echelle; }
/* Apparition d'un élément passé de display:none à affiché, sans JS (Chrome 117+, Safari 17.5+ ; ailleurs : immédiat) */
.mv-apparition { transition: opacity var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out), display var(--d-base) allow-discrete; }
@starting-style { .mv-apparition { opacity: 0; translate: 0 8px; } }
/* Pulsation douce (chargement indéterminé, à la place d'un spinner) */
.mv-pulse { animation: mv-pulse 1.2s var(--ease-in-out) infinite; }

/* Vignette qui vole vers le panier (Motion.flyToCart) */
.mv-vol { position: fixed; z-index: var(--z-fly); pointer-events: none; will-change: transform; }
.mv-vol img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-pop); will-change: transform, opacity; }

@media (prefers-reduced-motion: no-preference) {
  /* Appui : léger enfoncement immédiat (remplace l'ancien effet JS au clic). La propriété
     individuelle « scale » se compose avec un transform existant au lieu de l'écraser. */
  :where(button, .btn-cta, .ui-btn, .ui-icon-btn, .ui-chip):not(:disabled):active { scale: .97; }

  /* Révélation au défilement : [data-reveal] (monte de 24 px), ="fondu", ="echelle" ; cascade --i.
     Chrome 115+, Safari 26+ : liée au défilement, sans JS ; ailleurs : Motion.reveal (IntersectionObserver,
     une seule fois, classe html.mv-io). Jamais au-dessus de la ligne de flottaison au chargement. */
  @supports (animation-timeline: view()) {
    html:not(.mv-io) [data-reveal] {
      animation: mv-revele linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 4%) entry calc(65% + var(--i, 0) * 4%);
    }
    html:not(.mv-io) [data-reveal="fondu"] { animation-name: mv-fondu; }
    html:not(.mv-io) [data-reveal="echelle"] { animation-name: mv-revele-echelle; }
    /* Parallaxe à la sortie de l'écran (héros, grands titres) : [data-parallax] ; --parallax-y (défaut 12 %) */
    [data-parallax] { animation: mv-parallaxe linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
  html.mv-io [data-reveal]:not(.is-revealed) { opacity: 0; translate: 0 var(--reveal-y, 24px); }
  html.mv-io [data-reveal="fondu"]:not(.is-revealed) { translate: none; }
  html.mv-io [data-reveal="echelle"]:not(.is-revealed) { translate: none; scale: var(--reveal-scale, 1.06); }
  html.mv-io [data-reveal].is-revealed {
    transition: opacity var(--d-reveal) var(--ease-out), translate var(--d-reveal) var(--ease-out), scale var(--d-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  /* Fondu des images au chargement : img[data-fondu] dans du HTML rendu par app.js seulement
     (classe html.mv-fondu posée par Motion ; jamais sur l'image du héros ni la 1re photo d'une fiche) */
  html.mv-fondu img[data-fondu] { transition: opacity var(--d-base) var(--ease-out); }
  html.mv-fondu img[data-fondu]:not(.is-loaded) { opacity: 0; }
}

/* ══ 6. TRANSITIONS DE VUE (Motion.vt) ══════════════════════════════════════ */
/* Type posé sur <html data-vt="…"> pendant la transition : fondu (défaut), avance, retour, fiche,
   fiche-retour, suivante, precedente. Élément partagé : Motion.name(el, 'oeuvre') (un porteur par nom). */
/* En-tête fixe capturé à part pendant toute transition de vue (intégration) : il reste en place au lieu
   d'être emporté par la vue qui s'efface ou monte (en-tête « fantôme » de 0 à 80 ms) */
:root[data-vt] .site-header { view-transition-name: entete; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) { animation-duration: var(--d-base); animation-timing-function: var(--ease-out); }
  ::view-transition-old(root) { animation: mv-vt-sortie var(--d-fast) var(--ease-in) both; }
  ::view-transition-new(root) { animation: mv-vt-entree var(--d-base) var(--ease-out) both; }
  :root[data-vt="avance"]::view-transition-new(root),
  :root[data-vt="fiche"]::view-transition-new(root) { animation-name: mv-vt-monte; }
  :root[data-vt="retour"]::view-transition-old(root) { animation-name: mv-vt-sortie-bas; }
  :root[data-vt="suivante"]::view-transition-old(root) { animation-name: mv-vt-vers-gauche; }
  :root[data-vt="suivante"]::view-transition-new(root) { animation-name: mv-vt-depuis-droite; }
  :root[data-vt="precedente"]::view-transition-old(root) { animation-name: mv-vt-vers-droite; }
  :root[data-vt="precedente"]::view-transition-new(root) { animation-name: mv-vt-depuis-gauche; }
}
@keyframes mv-vt-sortie { to { opacity: 0; } }
@keyframes mv-vt-entree { from { opacity: 0; } }
@keyframes mv-vt-monte { from { opacity: 0; translate: 0 24px; } }
@keyframes mv-vt-sortie-bas { to { opacity: 0; translate: 0 24px; } }
@keyframes mv-vt-vers-gauche { to { opacity: 0; translate: -24% 0; } }
@keyframes mv-vt-vers-droite { to { opacity: 0; translate: 24% 0; } }
@keyframes mv-vt-depuis-droite { from { opacity: 0; translate: 24% 0; } }
@keyframes mv-vt-depuis-gauche { from { opacity: 0; translate: -24% 0; } }

/* ══ 7. MOUVEMENT RÉDUIT ════════════════════════════════════════════════════ */
/* Tout se termine aussitôt sur son état final (et non « animation: none », qui laissait invisibles
   les coches dessinées et ne déclenchait jamais animationend / transitionend). */
@media (prefers-reduced-motion: reduce) {
  :root { --d-press: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; --stagger: 0ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [data-reveal], [data-parallax] { animation: none !important; }
  .ui-skeleton::after { animation: none !important; display: none; }
  .mv-pulse { animation: none !important; }
}

/* ══ PARCOURS : vitrine ══ */
/* Nouveau CSS de la vitrine : en-tête, menu, héros, collection, sections, pied de page, consentement, 404.
   Mobile d'abord (390/360/320), puis ≥ 640, ≥ 768, ≥ 1024. legal.html réutilise .site-header et .site-footer.
   Le h1 et l'image du héros restent opaques (seuls translate / scale bougent) ; défilement : @supports
   animation-timeline, sinon Motion.reveal ; rien en mouvement réduit. [hidden] redéclaré là où display est fixé. */

/* ── Navigation index ↔ legal.html : fondu, en-tête immobile (Chrome 126+, Safari 18.2+) ; type « page » seulement ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: page; }
}
html:active-view-transition-type(page) .site-header { view-transition-name: entete; }

/* ── Titres de section, accroches ── */
.section-titre {
  margin-top: var(--s-2); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold);
  line-height: 1.06; letter-spacing: var(--ls-title); color: var(--ink);
}

/* ── En-tête : .is-cache (app.js) au défilement vers le bas = fond et marque s'effacent, panier et menu en pastilles ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  padding-top: var(--safe-t); pointer-events: none;
}
.site-header__fond {
  position: absolute; inset: 0; pointer-events: auto;
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid transparent;
  transition: translate var(--d-base) var(--ease-out), border-color var(--d-fast), box-shadow var(--d-fast);
}
.site-header.is-scrolled .site-header__fond { border-bottom-color: var(--verre-filet); box-shadow: 0 6px 24px rgba(26, 25, 22, .06); }
.site-header__barre {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  max-width: var(--content); height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter);
}
.site-header__marque {
  pointer-events: auto; display: flex; flex-direction: column; justify-content: center; min-height: var(--tap);
  margin-right: auto; min-width: 0; color: var(--ink); text-decoration: none;
  transition: translate var(--d-base) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.brand-name {
  font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.brand-tagline { display: none; margin-top: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); }   /* sur le verre de l’en-tête : jamais --muted */
@media (max-width: 359px) { .brand-name { font-size: 15px; letter-spacing: .03em; } }
@media (min-width: 640px) { .brand-name { font-size: 21px; } .brand-tagline { display: block; } }
.site-header__nav { display: none; }
.site-header__actions { pointer-events: auto; display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.entete-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--ink); font-family: var(--font-text); cursor: pointer;
}
.entete-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--verre-leger); -webkit-backdrop-filter: var(--verre-flou-leger); backdrop-filter: var(--verre-flou-leger);
  box-shadow: 0 0 0 1px var(--verre-bord), var(--verre-reflet), var(--verre-ombre);
  opacity: 0; scale: .7; transition: opacity var(--d-fast) var(--ease-out), scale var(--d-base) var(--ease-out);
}
.entete-btn svg { width: 22px; height: 22px; }
.entete-btn__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.entete-btn__icone { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
#cart-badge {
  position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
  align-items: center; justify-content: center; font-size: 11px; line-height: 1;
  box-shadow: 0 0 0 2px var(--paper);
}
.burger { position: relative; display: block; width: 20px; height: 10px; }
.burger > span {
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: translate var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-out);
}
.burger > span:first-child { top: 0; }
.burger > span:last-child { bottom: 0; }
.site-header.is-cache .site-header__fond { translate: 0 -101%; transition: translate var(--d-fast) var(--ease-in), border-color var(--d-fast), background-color var(--d-fast); }
.site-header.is-cache .site-header__marque,
.site-header.is-cache .site-header__nav { translate: 0 calc(-1 * (var(--header-h) + var(--safe-t))); opacity: 0; pointer-events: none; transition-timing-function: var(--ease-in); transition-duration: var(--d-fast); }
.site-header.is-cache .entete-btn::before { opacity: 1; scale: 1; }
@media (min-width: 1024px) {
  .site-header__nav { pointer-events: auto; display: flex; gap: var(--s-6); margin-right: var(--s-5); transition: translate var(--d-base) var(--ease-out), opacity var(--d-fast); }
  .site-header__nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink-2); text-decoration: none; transition: color var(--d-fast); }
  .site-header__nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--d-base) var(--ease-out);
  }
  .entete-btn--menu { display: none; }
  .entete-btn--panier { padding: 0 12px 0 16px; }
  .entete-btn__libelle { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--fs-small); font-weight: var(--fw-medium); }
  .site-header__actions { margin-right: -12px; }
}
@media (hover: hover) and (pointer: fine) {
  .site-header__nav a:hover { color: var(--ink); }
  .site-header__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .entete-btn:hover::before { opacity: 1; scale: 1; }
  .site-header__marque:hover .brand-name { color: #333028; }
}

/* ── Menu (< 1024 px) : couche plein écran, liens en cascade ── */
.menu-vitrine {
  position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; flex-direction: column;
  padding: var(--safe-t) 0 calc(var(--s-6) + var(--safe-b)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--verre-fort); -webkit-backdrop-filter: var(--verre-flou-fort); backdrop-filter: var(--verre-flou-fort);
  opacity: 0; transition: opacity var(--d-fast) var(--ease-in);
}
.menu-vitrine[hidden] { display: none; }
.menu-vitrine.is-open { opacity: 1; transition: opacity var(--d-base) var(--ease-out); }
.menu-vitrine__haut {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line);
}
.menu-vitrine__fermer { margin-right: -10px; }
.menu-vitrine.is-open .menu-vitrine__fermer .burger > span:first-child { translate: 0 4.25px; rotate: 45deg; }
.menu-vitrine.is-open .menu-vitrine__fermer .burger > span:last-child { translate: 0 -4.25px; rotate: -45deg; }
.menu-vitrine__nav { flex: 1 0 auto; padding: var(--s-4) var(--gutter) var(--s-8); }
.menu-vitrine__liens { list-style: none; margin: 0; padding: 0; }
.menu-vitrine__liens li { border-bottom: 1px solid var(--verre-filet); }
.menu-vitrine__liens li[hidden] { display: none; }
.menu-vitrine__liens a {
  display: flex; align-items: baseline; gap: var(--s-4); min-height: 64px; padding: 14px 0;
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.5rem); font-weight: var(--fw-bold);
  line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-decoration: none;
  opacity: 0; translate: 0 22px;
  transition: opacity var(--d-fast) var(--ease-in), translate var(--d-fast) var(--ease-in);
}
.menu-vitrine.is-open .menu-vitrine__liens a {
  opacity: 1; translate: 0 0;
  transition: opacity var(--d-slow) var(--ease-out), translate var(--d-slow) var(--ease-out);
  transition-delay: calc(80ms + var(--i, 0) * 45ms);
}
.menu-vitrine__num { flex: 0 0 auto; width: 1.6em; font-family: var(--font-text); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.menu-vitrine__pied { padding: 0 var(--gutter); opacity: 0; transition: opacity var(--d-fast); }
.menu-vitrine.is-open .menu-vitrine__pied { opacity: 1; transition: opacity var(--d-slow) var(--ease-out) 260ms; }
.menu-vitrine__offres { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s-3); }
.menu-vitrine__suivre { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); list-style: none; margin: 0; padding: 0; }
.menu-vitrine__suivre a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (min-width: 1024px) { .menu-vitrine { display: none !important; } }

/* ── Bandeau d'offres : sur téléphone, un message à la fois (rotation pausable, suspendue hors écran) ── */
.promo-bar {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 0 var(--gutter); background: var(--ink); color: var(--on-ink);
}
.promo-bar__offres { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: .01em; line-height: 1.3; text-align: center; }
.promo-bar__offre + .promo-bar__offre::before { content: '·'; margin: 0 14px; color: var(--line-strong); }
.promo-bar__pause { display: none; }
@media (max-width: 639px) {
  .promo-bar__offres { display: grid; place-items: center; width: 100%; height: 40px; overflow: hidden; }
  .promo-bar__offre { grid-area: 1 / 1; white-space: nowrap; }
  .promo-bar__offre + .promo-bar__offre::before { content: none; }
  .promo-bar__offre + .promo-bar__offre { opacity: 0; }
}
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) {
  .promo-bar { padding: 0 44px; }
  html.vitrine-prete .promo-bar__offre { animation: vitrine-offre 12s linear var(--offre-delai, 0s) infinite both; }
  .promo-bar__offre:nth-child(1) { --offre-delai: -.48s; }
  .promo-bar__offre:nth-child(2) { --offre-delai: 3.52s; }
  .promo-bar__offre:nth-child(3) { --offre-delai: 7.52s; }
  .promo-bar.is-arrete .promo-bar__offre, .promo-bar.is-hors-ecran .promo-bar__offre { animation-play-state: paused; }
  .promo-bar__pause {
    position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 44px;
    padding: 0; border: 0; background: none; color: rgba(250, 248, 245, .7); cursor: pointer;
  }
  .promo-bar__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .promo-bar__pause .ic-lecture { display: none; fill: currentColor; stroke: none; }
  .promo-bar__pause[aria-pressed="true"] .ic-pause { display: none; }
  .promo-bar__pause[aria-pressed="true"] .ic-lecture { display: inline; }
}
@keyframes vitrine-offre {
  0% { opacity: 0; translate: 0 75%; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  4% { opacity: 1; translate: 0 0; }
  33.3% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  37.3%, 100% { opacity: 0; translate: 0 -75%; }
}

/* ── Héros : photo pleine largeur d'abord sur téléphone (LCP préchargée, opaque dès la 1re image) ── */
.hero { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter) var(--s-16); }
.hero-grid { display: grid; gap: var(--s-6); align-items: center; }
.hero-texte { min-width: 0; }
.hero-eyebrow { margin-bottom: var(--s-3); }
.hero-title {
  font-family: var(--font-display); font-size: clamp(2.125rem, .2rem + 10.2vw, 4.125rem); font-weight: var(--fw-bold);
  line-height: 1.02; letter-spacing: var(--ls-display); color: var(--ink);
}
.hero-ligne { display: block; }
.hero-sub { max-width: 34rem; margin-top: var(--s-4); font-size: var(--fs-lead); font-weight: var(--fw-text); line-height: 1.6; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); }
.hero-cta { flex: 1 1 100%; }
.hero-cta .fleche { transition: translate var(--d-base) var(--ease-out); }
.hero-faq { font-size: var(--fs-small); }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.trust-row li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-caption); color: var(--ink-2); }
.trust-row svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.hero-visual {
  order: -1; position: relative; overflow: hidden; background: var(--sand);
  margin: 0 calc(-1 * var(--gutter)); height: 52vh; height: 52svh; min-height: 280px; max-height: 560px;
}
.hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-tag {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1; display: flex; flex-direction: column; gap: 2px;
  min-height: var(--tap); padding: 10px 14px; background: var(--verre); color: var(--ink); text-decoration: none;
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord); border-radius: var(--r-s); box-shadow: var(--verre-reflet), var(--verre-ombre);
}
.hero-tag__titre { font-family: var(--font-display); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -.01em; }
.hero-tag__lien { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--ink-2); }
.hero-tag__lien svg { width: 14px; height: 14px; transition: translate var(--d-base) var(--ease-out); }
@media (min-width: 640px) {
  .hero-cta { flex: 0 0 auto; }
  .hero-visual { max-height: 620px; }
}
@media (min-width: 1024px) {
  .hero { padding: var(--s-16) var(--gutter) var(--s-20); }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-16); }
  .hero-visual { order: 0; margin: 0; height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
  .hero-tag { left: var(--s-4); bottom: var(--s-4); }
}
@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover .fleche { translate: 0 3px; }
  .hero-tag:hover .hero-tag__lien svg { translate: 4px 0; }
}
/* Entrée au premier rendu (sans JS) : photo qui se pose, lignes du h1 qui remontent SANS fondu, le reste en cascade */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual img { animation: vitrine-pose 1.1s var(--ease-out) both; }
  .hero-ligne { animation: vitrine-ligne 760ms var(--ease-out) both; }
  .hero-ligne + .hero-ligne { animation-delay: 70ms; }
  .hero-eyebrow, .hero-sub, .hero-actions, .trust-row { --mv-y: 14px; animation: mv-monte 620ms var(--ease-out) both; }
  .hero-eyebrow { animation-delay: 20ms; }
  .hero-sub { animation-delay: 150ms; }
  .hero-actions { animation-delay: 220ms; }
  .trust-row { animation-delay: 290ms; }
  .hero-tag { --mv-y: 10px; animation: mv-monte 560ms var(--ease-out) 420ms both; }
  @supports (animation-timeline: view()) {
    html:not(.mv-io) .hero-visual img {
      animation: vitrine-pose 1.1s var(--ease-out) both, vitrine-hero-profondeur linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }
}
@keyframes vitrine-pose { from { scale: 1.07; } }
@keyframes vitrine-ligne { from { translate: 0 .3em; } }
@keyframes vitrine-hero-profondeur { to { translate: 0 14%; } }

/* ── Collection : filtres (dès VITRINE_FILTRE_MIN œuvres), grille 2 colonnes sur téléphone ── */
.collection, .bundles, .engagements { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.collection-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-8);
  margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line);
}
.bundle-hint { max-width: 26rem; padding: 10px 14px; background: var(--sand); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.bundle-hint strong { color: var(--accent); font-weight: 600; }
.collection-filtres {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--gutter)) var(--s-6); padding: 2px var(--gutter);
}
.collection-filtres::-webkit-scrollbar { display: none; }
.collection-filtres[hidden] { display: none; }
.collection-filtres .t-num { font-size: var(--fs-caption); opacity: .7; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }   /* téléphone : une affiche en grand par ligne */
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12) var(--s-6); } .collection-head { margin-bottom: var(--s-10); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16) var(--s-8); } }
.product-grid > .col-span-full { grid-column: 1 / -1; }
/* Squelette à la taille d'une carte (un seul élément : photo 2:3 + trois lignes ; statique, hors écran au chargement) */
.carte-squelette::before { content: ''; display: block; aspect-ratio: 2 / 3; background: var(--sand); }
.carte-squelette::after {
  content: ''; display: block; height: 66px; margin-top: var(--s-3);
  background: linear-gradient(var(--sand), var(--sand)) 0 2px / 75% 13px no-repeat, linear-gradient(var(--sand), var(--sand)) 0 24px / 50% 12px no-repeat,
    linear-gradient(var(--sand), var(--sand)) 0 46px / 32% 17px no-repeat;
}

/* Carte : lien /oeuvre/<id> étiré (.ui-stretch) + bouton « + » 44 × 44 */
.product-card { position: relative; min-width: 0; }
.product-card[hidden] { display: none; }
.card-image { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--sand); }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-badge, .card-count, .badge-sold, .card-cta-hover { pointer-events: none; }
.card-badge {
  position: absolute; z-index: 2; top: var(--s-2); left: var(--s-2); padding: 4px 8px; border-radius: var(--r-xs);
  background: var(--accent); color: var(--on-ink); font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
}
.card-count {
  position: absolute; z-index: 2; left: var(--s-2); bottom: var(--s-2); padding: 3px 7px; border-radius: var(--r-xs);
  background: rgba(26, 25, 22, .62); color: #fff; font-size: 11px; line-height: 1.3;
}
.badge-sold { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(250, 248, 245, .55); }
.badge-sold span { padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.card-cta-hover { display: none; }
/* Calque des actions : cadre de la photo, au-dessus du lien étiré */
.card-actions { position: absolute; z-index: 3; top: 0; left: 0; right: 0; aspect-ratio: 2 / 3; pointer-events: none; }
.card-add {
  position: absolute; right: 2px; bottom: 2px; isolation: isolate; display: grid; place-items: center; pointer-events: auto;
  width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; color: var(--on-ink); cursor: pointer;
}
.card-add::before {
  content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 50%; background: var(--ink);
  box-shadow: 0 4px 14px rgba(26, 25, 22, .22); transition: background-color var(--d-fast), box-shadow var(--d-fast);
}
.card-add svg {
  grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity var(--d-fast) var(--ease-out), rotate var(--d-base) var(--ease-out), scale var(--d-base) var(--ease-out);
}
.card-add .ic-check, .card-add .ic-cloche { opacity: 0; scale: .4; }
.card-add.is-ajoute::before, .card-add--ok::before { background: var(--ok); }
.card-add.is-ajoute .ic-plus, .card-add--ok .ic-plus, .card-add--alerte .ic-plus { opacity: 0; rotate: 90deg; scale: .4; }
.card-add.is-ajoute .ic-check, .card-add--ok .ic-check { opacity: 1; scale: 1; }
.card-add--alerte { color: var(--ink); }
.card-add--alerte::before { background: var(--paper); box-shadow: 0 0 0 1px var(--line-strong), 0 4px 14px rgba(26, 25, 22, .12); }
.card-add--alerte .ic-cloche { opacity: 1; scale: 1; }
.card-body { display: flex; flex-direction: column; padding-top: var(--s-3); }
.card-title { font-size: 15px; font-weight: var(--fw-medium); line-height: 1.3; color: var(--ink); }
.card-link { color: inherit; text-decoration: none; }
.card-link:focus-visible { outline-color: transparent; }
.card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.card-meta { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.4; color: var(--muted); }
.card-price { margin-top: 6px; font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.card-desc { display: none; }
.stock-label { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.stock-label:empty { display: none; }
.stock-label.is-low { color: var(--accent); font-weight: var(--fw-medium); }
.stock-label.is-panier { color: var(--ok); font-weight: var(--fw-medium); }
/* Téléphone (une colonne) : textes à l'échelle de la photo, description sur deux lignes */
@media (max-width: 639px) {
  .card-body { padding-top: var(--s-4); }
  .card-title { font-size: 19px; }
  .card-meta { font-size: var(--fs-small); }
  .card-price { margin-top: var(--s-2); font-size: 21px; }
  .card-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2);
  }
  .card-badge { top: var(--s-3); left: var(--s-3); font-size: 12px; }
  .card-count { left: var(--s-3); bottom: var(--s-3); font-size: 12px; }
  .card-add { right: 8px; bottom: 8px; }
}
@media (min-width: 640px) { .card-title { font-size: 16px; } .card-price { font-size: 19px; } .card-add { right: 6px; bottom: 6px; } }
@media (min-width: 1024px) {
  .card-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2);
  }
}
@media (hover: hover) and (pointer: fine) {
  .card-image img { transition: scale 700ms var(--ease-out); }
  .product-card:hover .card-image img { scale: 1.04; }
  .card-cta-hover {
    position: absolute; z-index: 2; left: 50%; bottom: var(--s-4); display: block; translate: -50% 8px; opacity: 0;
    padding: 10px 18px; background: var(--paper); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
    transition: opacity var(--d-fast) var(--ease-out), translate var(--d-base) var(--ease-out);
  }
  .product-card:hover .card-cta-hover { opacity: 1; translate: -50% 0; }
  .card-add:hover::before { background: #333028; }
  .card-add--ok:hover::before { background: #335A3F; }
  .card-add--alerte:hover::before { background: var(--surface); }
}
/* Profondeur : la photo glisse de quelques % dans son cadre au défilement */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.vitrine-prete:not(.mv-io) .card-image img { scale: 1.08; animation: vitrine-profondeur linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @media (hover: hover) and (pointer: fine) { html.vitrine-prete:not(.mv-io) .product-card:hover .card-image img { scale: 1.12; } }
  }
}
@keyframes vitrine-profondeur { from { translate: 0 -3.5%; } to { translate: 0 3.5%; } }

/* ── Ensembles « Composez votre mur » ── */
.bundles-grid { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .bundles-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.bundle-card { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.bundle-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--sand); }
.bundle-thumb { aspect-ratio: 4 / 5; }
.bundle-body { display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); padding: var(--s-5); }
.bundle-names { font-size: 15px; font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink); }
.bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.bundle-price strong { font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bundle-note { font-size: var(--fs-caption); color: var(--ok); }
@media (min-width: 521px) { .bundle-card { grid-template-columns: 1.1fr 1fr; } .bundle-thumb { aspect-ratio: 2 / 3; } }

/* ── Engagements : grille 2 × 2, icônes tracées une fois à leur arrivée à l'écran (visibles par défaut) ── */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
.benefit { min-width: 0; padding: var(--s-5) var(--s-4); background: var(--paper); }
@media (min-width: 640px) { .benefit { padding: 28px var(--s-6); } }
.benefit svg { display: block; width: 24px; height: 24px; margin-bottom: var(--s-3); color: var(--accent); }
.benefit h3 { margin-bottom: 6px; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.benefit p { font-size: var(--fs-caption); line-height: 1.55; color: var(--ink-2); }
@media (min-width: 640px) { .benefit p { font-size: var(--fs-small); } }
/* Tracé en durée (et non lié au défilement, qui laissait les icônes à moitié dessinées à l'arrêt) : app.js pose
   .benefits.a-tracer puis .is-trace sur chaque engagement à son arrivée à l'écran. Pointillés seulement pendant
   l'animation (remplissage « backwards ») : trait plein à la fin, même si pathLength n'est pas pris en compte. */
@media (prefers-reduced-motion: no-preference) {
  .benefits.a-tracer .benefit:not(.is-trace) svg > :is(path, circle, rect) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .benefits.a-tracer .benefit.is-trace svg > :is(path, circle, rect) { animation: vitrine-trace 900ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
}
@keyframes vitrine-trace { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }

/* ── Notre histoire : titre en profondeur, citation, suite dépliable sur téléphone ── */
.about { overflow: hidden; padding: var(--section) 0; background: var(--ink); color: var(--on-ink); }
.about-inner { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.about-eyebrow { margin-bottom: var(--s-5); color: #A39E96; }
.about-titre {
  --parallax-y: -18%; max-width: 15em; margin-bottom: var(--s-12);
  font-family: var(--font-display); font-size: clamp(2.25rem, 1.3rem + 4.6vw, 4.5rem); font-weight: var(--fw-bold);
  line-height: 1.02; letter-spacing: -.035em; color: var(--on-ink);
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; }
.about-texte { margin-bottom: var(--s-6); font-size: var(--fs-body); font-weight: var(--fw-text); line-height: 1.75; color: #C8C4BC; }
.about-citation {
  margin: var(--s-8) 0; padding-left: var(--s-4); border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); font-weight: var(--fw-medium);
  line-height: 1.18; letter-spacing: -.02em; color: var(--on-ink);
}
.about-toggle { display: none; }
.about-piliers { display: grid; gap: var(--s-5); margin: var(--s-4) 0 0; padding-top: var(--s-8); border-top: 1px solid #3A3631; }
.about-piliers dt { margin-bottom: 6px; color: #A39E96; }
.about-piliers dd { margin: 0; font-size: 15px; font-weight: var(--fw-text); line-height: 1.6; color: var(--on-ink); }
.about a:focus-visible, .about button:focus-visible { outline-color: #E2A178; }
@media (max-width: 767px) {
  .about-titre { margin-bottom: var(--s-8); }
  .about-citation { margin: var(--s-6) 0 var(--s-2); }
  html.js .about:not(.is-open) .about-suite { display: none; }
  html.js .about-toggle {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0; border: 0; background: none;
    color: var(--on-ink); font-family: var(--font-text); font-size: 15px; font-weight: var(--fw-medium);
    text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer;
  }
  .about-toggle svg { width: 18px; height: 18px; transition: rotate var(--d-base) var(--ease-out); }
  .about.is-open .about-toggle svg { rotate: 180deg; }
  .about-manifeste .about-suite + .about-piliers { margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .about.is-open .about-suite { animation: mv-monte var(--d-base) var(--ease-out) both; }
}

/* ── Avis : rail aimanté sur téléphone, grille au-delà ── */
.avis { max-width: var(--content); margin: 0 auto; padding: var(--section) var(--gutter); }
.avis-entete { margin-bottom: var(--s-8); text-align: center; }
.avis-note { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: var(--s-4); }
.avis-note strong { font-family: var(--font-display); font-size: clamp(3.25rem, 2.4rem + 3.8vw, 5.25rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.avis-note span { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); color: var(--muted); }
.avis-etoiles { display: flex; justify-content: center; gap: 6px; margin: var(--s-3) 0 var(--s-4); }
.avis-etoiles svg { width: 22px; height: 22px; fill: var(--accent); }
.avis-source { max-width: 30rem; margin: 0 auto; font-size: var(--fs-caption); line-height: 1.6; color: var(--muted); }
.avis-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.avis-liste {
  display: flex; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.avis-liste::-webkit-scrollbar { display: none; }
.avis-liste > * { flex: 0 0 82%; scroll-snap-align: start; }
.avis-progression { display: none; }
.review-card { display: flex; flex-direction: column; min-width: 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.review-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.review-stars { display: flex; flex-shrink: 0; gap: 2px; }
.review-stars svg { width: 13px; height: 13px; fill: var(--accent); }
.review-text { flex: 1; font-size: 15px; font-weight: var(--fw-text); line-height: 1.6; color: var(--ink-2); }
.review-date { margin-top: var(--s-4); font-size: 12.5px; color: var(--muted); }
@media (min-width: 640px) {
  .avis-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); overflow: visible; margin: 0; padding: 0; }
  .avis-liste > * { flex: none; }
}
@media (min-width: 1024px) { .avis-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Position dans le rail : barre liée au défilement horizontal (Chrome 116+, Safari 26+) */
@media (max-width: 639px) {
  @supports (timeline-scope: --a) and (animation-timeline: scroll()) {
    .avis { timeline-scope: --avis; }
    .avis-liste { scroll-timeline: --avis inline; }
    .avis-progression { display: block; width: 96px; height: 2px; margin: var(--s-5) auto 0; overflow: hidden; background: var(--line); }
    .avis-progression > span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; animation: vitrine-rail linear both; animation-timeline: --avis; }
  }
}
@keyframes vitrine-rail { from { transform: scaleX(.18); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.vitrine-prete:not(.mv-io) .avis-etoiles svg {
      animation: vitrine-etoile linear both; animation-timeline: view();
      animation-range: entry calc(30% + var(--i, 0) * 8%) entry calc(90% + var(--i, 0) * 8%);
    }
  }
}
@keyframes vitrine-etoile { from { opacity: 0; scale: .3; } }

/* ── FAQ : réponse en fondu (pas d'animation de hauteur), « + » qui pivote ── */
.faq-section { max-width: 48rem; margin: 0 auto; padding: 0 var(--gutter) var(--section); text-align: center; }
.faq-section .section-titre { margin-bottom: var(--s-8); }
.faq { text-align: left; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; padding: var(--s-4) 0;
  list-style: none; cursor: pointer; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: 0 0 14px; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--muted); transition: rotate var(--d-base) var(--ease-out);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 46rem; padding: 0 0 var(--s-5); font-size: 15px; font-weight: var(--fw-text); line-height: 1.7; color: var(--ink-2); }
.faq a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > p { --mv-y: 8px; animation: mv-monte var(--d-base) var(--ease-out) both; }
}

/* ── Pied de page (index et legal.html) ── */
.site-footer { padding: var(--s-12) 0 calc(var(--s-8) + var(--safe-b)); border-top: 1px solid var(--line); background: var(--paper); }
.site-footer__inner { display: grid; gap: var(--s-8); max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer__nom { font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.site-footer__baseline { max-width: 22rem; margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
.site-footer__suivre { grid-column: 1 / -1; }
.site-footer__titre { margin-bottom: var(--s-1); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer__nav a, .site-footer__nav button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none;
  font-family: var(--font-text); font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.site-footer__suivre ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-footer__copy { padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--muted); }
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 2fr; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
  .site-footer__suivre { grid-column: auto; }
  .site-footer__suivre ul { display: block; }
  .site-footer__copy { grid-column: 1 / -1; }
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover, .site-footer__nav button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
}

/* ── Page introuvable : message flottant au-dessus du consentement ── */
.vitrine-404 {
  position: fixed; left: var(--s-3); right: var(--s-3); z-index: var(--z-bar); max-width: 28rem; margin: 0 auto;
  bottom: calc(var(--s-3) + max(var(--safe-b), var(--bas-occupe)));
  padding: var(--s-5) var(--s-5) var(--s-4); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
}
.vitrine-404[hidden] { display: none; }
.vitrine-404__titre { margin-top: var(--s-2); font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--ink); }
.vitrine-404__texte { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.vitrine-404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
@media (prefers-reduced-motion: no-preference) {
  .vitrine-404:not([hidden]) { animation: mv-monte var(--d-slow) var(--ease-out) both; }
}

/* ── Sections sous la ligne de flottaison : rendu différé (intégration, 2026-10-19) ──
   content-visibility: auto jusqu'à html.vitrine-rendue (posée par playIntro au premier moment libre après le
   chargement) : le premier rendu de l'accueil ne calcule ni leurs styles ni leur mise en page (−30 ms à CPU ×4),
   et elles sont rendues avant que le visiteur ne les atteigne (au doigt, leur rendu faisait perdre des images).
   Contenu toujours lu par les lecteurs d'écran. Hauteurs d'attente = hauteurs réelles mesurées (390, 768 et
   1440 px) : les ancres atterrissent juste même avant le rendu. */
@supports (content-visibility: auto) {
  html:not(.vitrine-rendue) :is(.engagements, .about, .avis, .faq-section, .site-footer) { content-visibility: auto; }
  .engagements { contain-intrinsic-size: auto 500px; }
  .about { contain-intrinsic-size: auto 1050px; }
  .avis { contain-intrinsic-size: auto 550px; }
  .faq-section { contain-intrinsic-size: auto 630px; }
  .site-footer { contain-intrinsic-size: auto 570px; }
  @media (min-width: 640px) { .engagements { contain-intrinsic-size: auto 430px; } .avis { contain-intrinsic-size: auto 900px; } }
  @media (min-width: 768px) { .site-footer { contain-intrinsic-size: auto 375px; } }
  @media (min-width: 1024px) { .engagements { contain-intrinsic-size: auto 315px; } .about { contain-intrinsic-size: auto 980px; } .avis { contain-intrinsic-size: auto 815px; } }
}
/* ── Précommande : œuvre en rupture toujours en vente (badge « Précommande » de la carte, délai en terre cuite) ── */
.stock-label.is-preco { color: var(--accent); font-weight: var(--fw-medium); }
/* Section « Précommandes » (masquée tant que l'admin ne l'a pas activée) : mêmes cartes que la collection */
.precommandes[hidden] { display: none; }

/* ── Bon cadeau : encart vers /bon-cadeau (miniature de la carte PDF + texte) ── */
.bon-cadeau-promo { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.bon-cadeau-promo__inner { display: grid; gap: var(--s-10); align-items: center; padding: var(--s-10) var(--s-5) var(--s-8); background: var(--sand); border-radius: var(--r-m); }
.bon-cadeau-promo__carte {
  position: relative; display: grid; grid-template-columns: 36% minmax(0, 1fr); width: 100%; max-width: 26rem; aspect-ratio: 1.42; justify-self: center;
  overflow: hidden; border-radius: var(--r-s); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px rgba(26, 25, 22, .14); rotate: -2deg;
}
.bon-cadeau-promo__decor { position: relative; overflow: hidden; background: var(--ink); }
.bon-cadeau-promo__decor::before { content: ''; position: absolute; left: -48%; top: -22%; width: 132%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.bon-cadeau-promo__decor::after { content: ''; position: absolute; right: 12%; top: 16%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #E8DFD3; }
.bon-cadeau-promo__contenu { display: flex; flex-direction: column; min-width: 0; padding: 8% 9% 9%; }
.bon-cadeau-promo__marque { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.bon-cadeau-promo__type { margin-top: auto; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.bon-cadeau-promo__montant { margin-top: 2px; font-family: var(--font-display); font-size: clamp(34px, 11vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.bon-cadeau-promo__code { margin-top: auto; padding: 6px 8px; background: var(--sand); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; }
.bon-cadeau-promo__lead { max-width: 34rem; margin: var(--s-4) 0 var(--s-6); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
@media (min-width: 768px) {
  .bon-cadeau-promo__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); padding: var(--s-12); }
}
@media (hover: hover) and (pointer: fine) {
  .bon-cadeau-promo__carte { transition: rotate var(--d-slow) var(--ease-out), translate var(--d-slow) var(--ease-out); }
  .bon-cadeau-promo:hover .bon-cadeau-promo__carte { rotate: 0deg; translate: 0 -4px; }
}
/* ── Compte (en-tête), newsletter (pied de page, pied.js), coups de cœur (cartes) ── */
@media (min-width: 1024px) { .entete-btn--compte { padding: 0 12px 0 14px; } }
.entete-btn--compte { text-decoration: none; }
.pied-nl { margin-top: var(--s-6); max-width: 26rem; }
.pied-nl__texte { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.pied-nl__champ { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.pied-nl__champ .ui-input { flex: 1; min-width: 0; }
.pied-nl__champ .ui-btn { flex-shrink: 0; padding: 0 16px; }
.pied-nl__message { margin-top: var(--s-2); font-size: var(--fs-caption); line-height: 1.45; }
.pied-nl__message:empty { display: none; }
.pied-nl__message.is-ok { color: var(--ok); }
.pied-nl__message.is-erreur { color: var(--danger); }
.pied-nl__legal { margin-top: var(--s-2); font-size: var(--fs-caption); line-height: 1.45; color: var(--muted); }
.pied-nl__legal a { color: inherit; }
/* Cœur : coin haut droit de la photo (badge à gauche, « + » en bas), cible 44 px ; aria-pressed = coup de cœur */
.card-coeur {
  position: absolute; top: 2px; right: 2px; isolation: isolate; display: grid; place-items: center; pointer-events: auto;
  width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.card-coeur::before {
  content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 50%; background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou-leger); backdrop-filter: var(--verre-flou-leger);
  box-shadow: 0 0 0 1px var(--verre-bord), var(--verre-reflet), 0 2px 10px rgba(26, 25, 22, .14);
}
.card-coeur svg, .fiche-coeur svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill var(--d-fast), scale var(--d-base) var(--ease-out); }
.card-coeur[aria-pressed="true"], .fiche-coeur[aria-pressed="true"] { color: var(--accent); }
.card-coeur[aria-pressed="true"] svg, .fiche-coeur[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 639px) { .card-coeur { top: 8px; right: 8px; } }
@media (prefers-reduced-motion: no-preference) { .card-coeur:active svg, .fiche-coeur:active svg { scale: .82; } }
@media (hover: hover) and (pointer: fine) { .card-coeur:hover::before { background: #fff; } }

/* ══ FIN PARCOURS : vitrine ══ */

/* ══ Coins arrondis (Sacha, 2026-10-19 : « les angles droits font vieux ») ══
   Petits éléments et vignettes : --r-s (8 px) ; cartes, blocs et fenêtres : --r-m (12 px) ; feuilles : --r-sheet.
   Restent droits : ce qui va bord à bord (photo du héros sur téléphone, bandeau d'offres, pied, menu plein écran). */
.ui-card-media, .card-image, .carte-squelette::before, .bundle-card, .benefits, .review-card,
.toast, .vitrine-404, .bundle-hint { border-radius: var(--r-m); }
.benefits { overflow: hidden; }
.bundle-thumbs { border-radius: var(--r-s); overflow: hidden; }
.badge-sold span, .card-cta-hover, .hero-tag { border-radius: var(--r-s); }
.mv-vol img { border-radius: var(--r-m); }
@media (min-width: 1024px) { .hero-visual { border-radius: var(--r-m); } }