/* ==========================================================================
   Les Folies de Nath — SOCLE « studio » — studio.css
   Système de mouvement partagé (tokens, composants, film, carte, curseur, préchargeur, voile) porté dans le site réel.
   Règles de cohabitation avec main.css (en-tête, tiroir, cartes produit…) :
   · AUCUNE classe de main.css n'est redéfinie : les composants génériques sont préfixés `st-` (.st-reveal, .st-tag, .st-pola…),
     ceux injectés par studio.js `lfn-` (.lfn-cursor, .lfn-preloader, .lfn-veil, .lfn-layer, .lfn-film, .lfn-venir).
   · AUCUNE variable :root de main.css n'est redéfinie : tous les tokens sont préfixés `--st-` (--st-ease-out, --st-violet…).
   · Aucun reset global : les resets nécessaires sont scopés aux composants studio.
   · Seuls transform / opacity / clip-path / filter sont animés.
   Charger APRÈS main.css. Nécessite /js/studio-boot.js dans <head> (classes html.lfn-js / lfn-rm / lfn-boot).
   ========================================================================== */

/* ---------- Polices de secours « métriques » (évite les sauts au chargement des polices locales) ---------- */
@font-face { font-family: 'Figtree Fallback'; font-weight: 400 800; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 99.7%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; font-weight: 700 800; src: local('Trebuchet MS Bold'), local('TrebuchetMS-Bold'), local('Trebuchet MS'); size-adjust: 99.5%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback 2'; font-weight: 700 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'), local('Liberation Sans'); size-adjust: 96.7%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: 'Pinyon Fallback'; src: local('Brush Script MT Italic'), local('BrushScriptMT'), local('Brush Script MT'); size-adjust: 108.7%; ascent-override: 88%; descent-override: 37%; line-gap-override: 0%; }
@font-face { font-family: 'Pinyon Fallback 2'; src: local('Segoe Script'); size-adjust: 67%; ascent-override: 88%; descent-override: 37%; line-gap-override: 0%; }

/* ==========================================================================
   TOKENS (préfixe --st-)
   ========================================================================== */
:root {
  /* couleurs (KIT) */
  --st-cream: #faf7f2; --st-cream-2: #f4efe6; --st-paper: #FFF9EE; --st-white: #ffffff;
  --st-violet: #5B3F7A; --st-violet-deep: #41295c; --st-ink: #2A2138; --st-ink-soft: #6f5f85; --st-night: #1a1226;
  --st-lavender: #F3EDF9; --st-line: #E6DAF2;
  --st-coral: #E8705F; --st-coral-cta: #c94b3a; --st-coral-text: #b8442f; --st-coral-soft: #FBE3DE;
  --st-kraft: #d7b98f; --st-kraft-2: #c6a271; --st-kraft-text: #5a3f1c;
  --st-ok: #2f7a5a; --st-ok-soft: #E3F3EA; --st-warn: #b8442f; --st-rose: #E7A5B8;
  /* typographie (polices LOCALES de /css/fonts.css ; Dancing Script, Montserrat, Fredoka : /css/fonts-perso.css) */
  --st-font-title: 'Bricolage Grotesque', 'Bricolage Fallback', 'Bricolage Fallback 2', system-ui, sans-serif;
  --st-font-text: 'Figtree', 'Figtree Fallback', system-ui, sans-serif;
  --st-font-hand: 'Pinyon Script', 'Pinyon Fallback', 'Pinyon Fallback 2', cursive;
  --st-font-demo-1: 'Pinyon Script', cursive; --st-font-demo-2: 'Dancing Script', cursive; --st-font-demo-3: 'Montserrat', sans-serif; --st-font-demo-4: 'Fredoka', sans-serif;
  --st-fs-0: .8125rem; --st-fs-1: .9375rem; --st-fs-2: 1.0625rem; --st-fs-3: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --st-fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); --st-fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); --st-fs-h1: clamp(2.5rem, 1.6rem + 4.6vw, 5.4rem);
  --st-lh-tight: 1.02; --st-lh-title: 1.08; --st-lh-text: 1.55; --st-track-title: -.025em;
  /* espacements, rayons, ombres */
  --st-s-1: 4px; --st-s-2: 8px; --st-s-3: 12px; --st-s-4: 16px; --st-s-5: 24px; --st-s-6: 32px; --st-s-7: 48px; --st-s-8: 64px; --st-s-9: 96px; --st-s-10: 144px;
  --st-gutter: clamp(16px, 4vw, 56px); --st-section: clamp(64px, 9vw, 128px);
  --st-r-s: 6px; --st-r-m: 14px; --st-r-l: 24px; --st-r-pill: 999px;
  --st-sh-1: 0 1px 2px rgba(42,33,56,.06), 0 6px 18px -8px rgba(42,33,56,.18);
  --st-sh-2: 0 2px 4px rgba(42,33,56,.06), 0 24px 48px -20px rgba(42,33,56,.35);
  --st-sh-pola: 0 1px 2px rgba(42,33,56,.08), 0 14px 30px -12px rgba(42,33,56,.38);
  --st-sh-focus: 0 0 0 3px var(--st-cream), 0 0 0 6px var(--st-violet);
  /* MOUVEMENT (une seule langue : entrées expo-out, déplacements in-out, ressort réservé aux micro-moments) */
  --st-ease-out: cubic-bezier(.16, 1, .3, 1);
  --st-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --st-ease-in: cubic-bezier(.7, 0, .84, 0);
  --st-d-micro: 180ms; --st-d-short: 320ms; --st-d-mid: 600ms; --st-d-long: 900ms; --st-d-choreo: 1200ms; --st-stagger: 55ms;
  --st-rot-a: -2.4deg; --st-rot-b: 1.6deg; --st-rot-c: -1.1deg; --st-rot-d: 2.8deg;
  /* plans — calés sur main.css : en-tête 900, menu mobile 950, tiroir 990, cookies 1050, toasts 1100, modale 1150, lightbox 1200 */
  --st-z-sparks: 940; --st-z-layer: 1160; --st-z-toast: 1120; --st-z-veil: 1240; --st-z-preload: 1250; --st-z-cursor: 1300;
}
@media (prefers-reduced-motion: reduce) {
  :root { --st-d-micro: 1ms; --st-d-short: 200ms; --st-d-mid: 240ms; --st-d-long: 260ms; --st-d-choreo: 300ms; --st-stagger: 0ms; --st-rot-a: 0deg; --st-rot-b: 0deg; --st-rot-c: 0deg; --st-rot-d: 0deg; }
}

/* ==========================================================================
   AMORCE (studio-boot.js) : couvre la page avant le préchargeur / la fin du voile
   ========================================================================== */
html.lfn-boot::before { content: ""; position: fixed; inset: 0; background: var(--st-cream); z-index: calc(var(--st-z-preload) - 1); }
html.lfn-boot body { overflow: hidden; }
html.lfn-entering::after { content: ""; position: fixed; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; z-index: var(--st-z-preload); background: url(/img/studio/logo/couronne-192.webp) center / contain no-repeat; pointer-events: none; }
html.lfn-entering:has(.lfn-veil.is-on)::after { display: none; }

/* ==========================================================================
   RESETS SCOPÉS (jamais globaux)
   ========================================================================== */
.lfn-film, .lfn-venir, .lfn-layer, .lfn-preloader, .lfn-veil, .st-card-product, .st-review, .st-stat, .st-pola, .st-field { box-sizing: border-box; }
.lfn-film *, .lfn-venir *, .lfn-layer *, .st-card-product *, .st-review *, .st-pola *, .st-field * { box-sizing: border-box; }
.lfn-film :is(h2, h3, p, figure, ul), .lfn-venir :is(p, figure), .st-card-product :is(h3, p), .st-review :is(blockquote, p), .st-stat p, .st-pola figcaption, .lfn-layer :is(h2, h3, p) { margin: 0; }
.lfn-film button, .lfn-venir button, .lfn-layer button, .st-chip, .st-sound, .st-swatch, .st-btn-icon { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lfn-film [hidden], .lfn-venir [hidden], .lfn-layer [hidden], .st-reveal[hidden] { display: none !important; }
.lfn-film img, .lfn-venir img, .lfn-layer img, .st-pola img, .st-card-product img { display: block; max-width: 100%; height: auto; }
.lfn-film :focus-visible, .lfn-venir :focus-visible, .lfn-layer :focus-visible, .st-chip:focus-visible, .st-swatch:focus-visible, .st-card-product:focus-visible { outline: none; box-shadow: var(--st-sh-focus); border-radius: var(--st-r-s); }

/* ==========================================================================
   TYPOGRAPHIE & MISE EN PAGE (utilitaires st-)
   ========================================================================== */
.st-h1, .st-h2, .st-h3 { font-family: var(--st-font-title); font-weight: 800; letter-spacing: var(--st-track-title); line-height: var(--st-lh-title); color: var(--st-ink); text-wrap: balance; margin: 0; }
.st-h1 { font-size: var(--st-fs-h1); line-height: var(--st-lh-tight); }
.st-h2 { font-size: var(--st-fs-h2); }
.st-h3 { font-size: var(--st-fs-h3); font-weight: 700; letter-spacing: -.015em; }
.st-hand { font-family: var(--st-font-hand); font-weight: 400; letter-spacing: 0; color: var(--st-violet); font-size: 1.22em; line-height: 1; }
.st-kicker { font-family: var(--st-font-title); font-weight: 700; font-size: var(--st-fs-0); letter-spacing: .14em; text-transform: uppercase; color: var(--st-coral-text); margin: 0; }
.st-kicker::before { content: "✦ "; color: var(--st-coral); }
.st-lead { font-size: var(--st-fs-3); color: var(--st-ink-soft); line-height: 1.5; max-width: 56ch; text-wrap: pretty; }
.st-muted { color: var(--st-ink-soft); }
.st-small { font-size: var(--st-fs-1); }
.st-on-dark { color: #fff; } .st-on-dark .st-h1, .st-on-dark .st-h2, .st-on-dark .st-h3 { color: #fff; } .st-on-dark .st-lead { color: rgba(255,255,255,.78); } .st-on-dark .st-hand { color: #e9d8ff; }
.st-section-head { display: grid; gap: var(--st-s-3); margin-bottom: clamp(28px, 4vw, 48px); max-width: 60ch; }
.st-grid { display: grid; gap: var(--st-s-5); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.st-grid-2 { --cols: 2; } .st-grid-3 { --cols: 3; } .st-grid-4 { --cols: 4; }
@media (max-width: 1000px) { .st-grid-4 { --cols: 3; } }
@media (max-width: 760px) { .st-grid-3, .st-grid-4 { --cols: 2; } .st-grid-2 { --cols: 1; } .st-grid { gap: var(--st-s-4); } }
.st-cluster { display: flex; flex-wrap: wrap; gap: var(--st-s-3); align-items: center; }
.st-stack { display: grid; gap: var(--st-s-4); }
.st-band { background: var(--st-violet-deep); color: #fff; }
.st-band-soft { background: var(--st-lavender); }
.st-band-night { background: var(--st-night); color: #fff; }

/* ---------- Compléments aux boutons de main.css (.btn reste celui de main.css) ---------- */
.st-btn-big { min-height: 58px; padding: 1.05em 1.9em; font-size: 1.08rem; }
.st-btn-small { min-height: 38px; padding: .6em 1.05em; font-size: .9rem; }
.st-btn-label { display: inline-block; will-change: transform; }
.st-btn-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--st-line); color: var(--st-ink); transition: background-color var(--st-d-micro), border-color var(--st-d-micro); }
.st-btn-icon:hover { background: var(--st-lavender); border-color: var(--st-violet); }
.st-btn-light { --_bd: rgba(255,255,255,.55); background: transparent !important; color: #fff !important; border-color: var(--_bd) !important; box-shadow: none !important; }
.st-btn-light:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.st-arrow { display: inline-block; transition: transform var(--st-d-short) var(--st-ease-out); }
a:hover .st-arrow, button:hover .st-arrow { transform: translateX(4px); }

/* ---------- Étiquettes kraft, badges ---------- */
.st-tag { position: relative; display: inline-flex; align-items: center; gap: .5em; padding: .42em .95em .42em 1.5em; border-radius: 5px 12px 12px 5px;
  font-family: var(--st-font-title); font-weight: 700; font-size: var(--st-fs-0); letter-spacing: .03em; color: var(--st-kraft-text);
  background: linear-gradient(135deg, #e3c79f, var(--st-kraft) 55%, var(--st-kraft-2)); box-shadow: 0 2px 0 rgba(90,63,28,.18), 0 8px 18px -10px rgba(42,33,56,.45);
  transform: rotate(var(--rot, 0deg)); transform-origin: 14px 50%; }
.st-tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--st-cream); box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }
.st-tag::after { content: ""; position: absolute; left: -5px; top: 50%; width: 14px; height: 1.5px; margin-top: -4px; background: rgba(90,63,28,.55); transform: rotate(-30deg); transform-origin: right center; }
.st-tag-soft { padding-left: .95em; border-radius: var(--st-r-pill); color: var(--st-violet-deep); background: var(--st-lavender); box-shadow: none; }
.st-tag-soft::before, .st-tag-soft::after { display: none; }
.st-badge { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: var(--st-r-pill); font-family: var(--st-font-title); font-weight: 800; font-size: .78rem; letter-spacing: .02em; line-height: 1; }
.st-badge-promo { background: var(--st-coral-cta); color: #fff; }
.st-badge-rose { background: var(--st-rose); color: #4a1f2e; }
.st-badge-new { background: var(--st-violet); color: #fff; }
.st-badge-soft { background: var(--st-paper); color: var(--st-ink); border: 1px solid rgba(42,33,56,.18); }
.st-badge-devis { background: var(--st-lavender); color: var(--st-violet-deep); }

/* ---------- Polaroïd (physique crédible : rotation 1–3°, ombre cohérente) ---------- */
.st-pola { position: relative; margin: 0; background: #fff; padding: 10px 10px 40px; border-radius: 3px; box-shadow: var(--st-sh-pola);
  transform: rotate(var(--rot, var(--st-rot-a))); transition: transform var(--st-d-mid) var(--st-ease-out); will-change: transform; }
.st-pola::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 2px 3px rgba(42,33,56,.08), 0 30px 44px -16px rgba(42,33,56,.45); opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out); pointer-events: none; }
.st-pola:hover::after, .st-pola:focus-within::after { opacity: 1; }
.st-pola img { aspect-ratio: var(--ar, 1 / 1); object-fit: cover; width: 100%; background: var(--st-cream-2); border-radius: 1px; }
.st-pola figcaption { position: absolute; left: 12px; right: 12px; bottom: 9px; font-family: var(--st-font-hand); font-size: 1.35rem; color: var(--st-ink-soft); text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pola .st-tape { position: absolute; left: 50%; top: -11px; width: 92px; height: 26px; margin-left: -46px; background: rgba(230,218,242,.75); border: 1px solid rgba(91,63,122,.18); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(42,33,56,.08); }
.st-pola:hover, .st-pola:focus-within { transform: rotate(0deg) translateY(-6px) scale(1.02); z-index: 2; }
.st-pola:nth-child(2n) { --rot: var(--st-rot-b); } .st-pola:nth-child(3n) { --rot: var(--st-rot-c); } .st-pola:nth-child(4n) { --rot: var(--st-rot-d); }

/* ---------- Cartes ---------- */
.st-card { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-m); box-shadow: var(--st-sh-1); overflow: hidden; }
.st-card-body { padding: var(--st-s-5); display: grid; gap: var(--st-s-2); }
/* Carte produit « studio » (boutique : FLIP, tilt, pastilles, vue rapide). Les prix viennent de LFN.opPriceHtml (app.js). */
.st-card-product { position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-m);
  text-decoration: none; color: inherit; box-shadow: var(--st-sh-1); transform-style: preserve-3d; will-change: transform; }
.st-card-product::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: var(--st-r-m); box-shadow: var(--st-sh-2); opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out); pointer-events: none; }
.st-card-product:hover::after { opacity: 1; }
.st-card-product .media { position: relative; aspect-ratio: 1; background: var(--st-cream-2); overflow: hidden; border-radius: calc(var(--st-r-m) - 1px) calc(var(--st-r-m) - 1px) 0 0; }
.st-card-product .media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--st-d-short) var(--st-ease-out), transform var(--st-d-long) var(--st-ease-out); }
.st-card-product:hover .media img { transform: scale(1.04); }
.st-card-product .media .img-alt { position: absolute; inset: 0; opacity: 0; }
.st-card-product .media.is-swapping .img-main { opacity: 0; } .st-card-product .media.is-swapping .img-alt { opacity: 1; }
.st-card-product .media-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--st-ink-soft); font-family: var(--st-font-hand); font-size: 1.6rem; background: repeating-linear-gradient(135deg, var(--st-cream-2) 0 10px, #efe8dc 10px 20px); }
.st-card-product .badges { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.st-card-product .body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.st-card-product .cat { font-size: var(--st-fs-0); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-soft); }
.st-card-product .name { font-family: var(--st-font-title); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--st-ink); }
.st-card-product .name a { color: inherit; text-decoration: none; }
.st-card-product .price { display: flex; align-items: baseline; gap: 8px; font-family: var(--st-font-title); font-weight: 800; font-size: 1.15rem; }
.st-card-product .price del, .st-card-product .price .price-old { font-weight: 600; font-size: .9rem; color: var(--st-ink-soft); text-decoration: line-through; }
.st-card-product .price .promo, .st-card-product .price .price-new { color: var(--st-coral-text); }
.st-card-product .swatches { display: flex; gap: 6px; margin-top: 2px; }
.st-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(42,33,56,.25); cursor: pointer; transition: transform var(--st-d-micro) var(--st-ease-out); }
.st-swatch:hover, .st-swatch:focus-visible { transform: scale(1.18); }
.st-swatch[aria-pressed="true"], .st-swatch.is-on { box-shadow: 0 0 0 2px var(--st-violet); }
.st-card-product .actions { display: flex; gap: 8px; margin-top: 8px; }
.st-card-product .actions .btn { flex: 1; }
.st-tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 60%); transition: opacity var(--st-d-short) var(--st-ease-out); z-index: 3; mix-blend-mode: soft-light; }
.is-tilting .st-tilt-glare { opacity: 1; }

/* ---------- Avis, compteur ---------- */
.st-review { display: grid; gap: 10px; padding: var(--st-s-5); background: var(--st-paper); border: 1px solid rgba(42,33,56,.14); border-radius: 4px; box-shadow: var(--st-sh-1); transform: rotate(var(--rot, 0deg)); }
.st-review .stars { color: var(--st-coral); letter-spacing: .1em; font-size: .95rem; }
.st-review blockquote { font-size: 1rem; line-height: 1.5; }
.st-review cite { font-style: normal; font-family: var(--st-font-hand); font-size: 1.35rem; color: var(--st-violet); }
.st-stat { display: grid; gap: 4px; }
.st-stat .num { font-family: var(--st-font-title); font-weight: 800; font-size: clamp(2.4rem, 1.5rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.03em; color: var(--st-violet); font-variant-numeric: tabular-nums; }
.st-stat .lbl { font-weight: 600; color: var(--st-ink-soft); }

/* ---------- Formulaire animé (validation en ligne) ---------- */
.st-field { display: grid; gap: 6px; position: relative; }
.st-field label { font-weight: 700; font-size: var(--st-fs-1); }
.st-field .hint { font-size: var(--st-fs-0); color: var(--st-ink-soft); }
.st-input { width: 100%; min-height: 50px; padding: 12px 16px; background: #fff; border: 1.5px solid var(--st-line); border-radius: var(--st-r-m); font: inherit; color: inherit; transition: border-color var(--st-d-micro); }
.st-input:hover { border-color: #cdbddf; }
.st-input:focus-visible { outline: none; border-color: var(--st-violet); box-shadow: 0 0 0 4px rgba(91,63,122,.14); }
textarea.st-input { min-height: 120px; resize: vertical; }
.st-field .msg { font-size: var(--st-fs-0); font-weight: 600; min-height: 1.3em; color: var(--st-warn); display: flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity var(--st-d-short) var(--st-ease-out), transform var(--st-d-short) var(--st-ease-out); }
.st-field.is-invalid .msg, .st-field.is-valid .msg { opacity: 1; transform: none; }
.st-field.is-invalid .st-input { border-color: var(--st-warn); }
.st-field.is-valid .st-input { border-color: var(--st-ok); }
.st-field.is-valid .msg { color: var(--st-ok); }
.st-field .check { position: absolute; right: 14px; top: 39px; width: 22px; height: 22px; border-radius: 50%; background: var(--st-ok); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; transform: scale(0); transition: transform var(--st-d-short) var(--st-ease-out); }
.st-field.is-valid .check { transform: scale(1); }
.st-form-success { display: grid; gap: 8px; padding: var(--st-s-5); background: var(--st-ok-soft); border-radius: var(--st-r-m); color: #1f5a41; }

/* ---------- Grille FLIP, filtres ---------- */
.st-flip-grid { position: relative; display: grid; gap: var(--st-s-5); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 760px) { .st-flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.st-flip-grid > * { will-change: transform, opacity; }
.st-flip-ghost { position: absolute; pointer-events: none; margin: 0; z-index: 1; }
.st-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: 0 16px; border-radius: var(--st-r-pill); border: 1.5px solid var(--st-line); background: #fff; font-family: var(--st-font-title); font-weight: 700; font-size: .92rem; color: var(--st-ink); cursor: pointer;
  transition: background-color var(--st-d-micro), border-color var(--st-d-micro), color var(--st-d-micro), transform var(--st-d-short) var(--st-ease-out); }
.st-chip:hover { border-color: var(--st-violet); }
.st-chip[aria-pressed="true"], .st-chip.is-on { background: var(--st-violet); border-color: var(--st-violet); color: #fff; }
.st-chip .n { font-size: .8em; opacity: .7; }

/* ---------- Bandeau défilant (piloté par GSAP : LFNStudio.marquee) ---------- */
.st-marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.st-marquee-track { display: inline-flex; gap: 48px; will-change: transform; padding-inline: 24px; }

/* ==========================================================================
   COMPOSANTS INJECTÉS PAR studio.js
   ========================================================================== */
/* ---------- Bouton sons (ajouté par studio.js dans .header-icons de l'en-tête app.js, classe icon-btn de main.css réutilisée).
   Haut-parleur : ondes quand les sons sont activés, croix quand ils sont coupés (jamais d'icône ambiguë « statistiques »).
   Sous 420 px, l'en-tête n'a pas la place (le paraphe du logo touchait le cœur) : le bouton passe dans le menu mobile. ---------- */
.st-sound .spk { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.st-sound .spk .w1, .st-sound .spk .w2, .st-sound .spk .x { transition: opacity var(--st-d-short) var(--st-ease-out), transform var(--st-d-short) var(--st-ease-out); transform-origin: 14px 12px; }
.st-sound[aria-pressed="false"] .spk .w1, .st-sound[aria-pressed="false"] .spk .w2 { opacity: 0; transform: scale(.6); }
.st-sound[aria-pressed="true"] .spk .x { opacity: 0; transform: scale(.6); }
.st-sound[aria-pressed="false"] { color: var(--encre-soft, #6f5f85); }
.mobile-menu .st-sound-mm { display: none; align-items: center; gap: 10px; margin-top: 14px; min-height: 44px; padding: 8px 20px; border-radius: 100px; border: 1px solid rgba(255,255,255,.28); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  opacity: 0; transform: translateY(18px); transition: opacity .45s var(--st-ease-out) .5s, transform .45s var(--st-ease-out) .5s, background-color .25s; }
.mobile-menu.open .st-sound-mm { opacity: 1; transform: none; }
.mobile-menu .st-sound-mm:hover { background: rgba(255,255,255,.1); }
.mobile-menu .st-sound-mm:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mobile-menu .st-sound-mm[aria-pressed="false"] { color: rgba(255,255,255,.82); }
.mobile-menu .st-sound-mm .st-sound-state { font-weight: 500; opacity: .75; }
@media (max-width: 419.98px) { #lfnSound { display: none; } .mobile-menu .st-sound-mm { display: inline-flex; } }

/* ---------- Curseur (desktop, pointeur fin) + traînée de paillettes ---------- */
.lfn-cursor { position: fixed; left: 0; top: 0; z-index: var(--st-z-cursor); pointer-events: none; display: none; }
.lfn-cursor-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--st-violet); will-change: transform; }
.lfn-cursor-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--st-violet); display: grid; place-items: center; will-change: transform; transition: border-color var(--st-d-short) var(--st-ease-out), background-color var(--st-d-short) var(--st-ease-out); }
.lfn-cursor-ring span { font-family: var(--st-font-title); font-weight: 800; font-size: 12px; letter-spacing: .04em; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--st-d-short) var(--st-ease-out), transform var(--st-d-short) var(--st-ease-out); white-space: nowrap; }
.lfn-cursor.is-hover .lfn-cursor-ring { background: rgba(91,63,122,.14); }
.lfn-cursor.is-play .lfn-cursor-ring, .lfn-cursor.is-voir .lfn-cursor-ring { background: var(--st-coral-cta); border-color: var(--st-coral-cta); }
.lfn-cursor.is-play .lfn-cursor-ring span, .lfn-cursor.is-voir .lfn-cursor-ring span { opacity: 1; transform: scale(1); }
.lfn-cursor.is-play .lfn-cursor-dot, .lfn-cursor.is-voir .lfn-cursor-dot, .lfn-cursor.is-hidden { opacity: 0; }
.lfn-cursor.is-down .lfn-cursor-ring { border-color: var(--st-coral); }
.lfn-sparks { position: fixed; inset: 0; z-index: var(--st-z-sparks); pointer-events: none; overflow: hidden; display: none; }
.lfn-spark { position: absolute; left: 0; top: 0; margin: -.5em 0 0 -.5em; line-height: 1; font-size: 9px; will-change: transform, opacity; text-shadow: 0 0 5px rgba(255,255,255,.7); }
@media (hover: hover) and (pointer: fine) {
  html.lfn-has-cursor .lfn-cursor, html.lfn-has-cursor .lfn-sparks { display: block; }
  html.lfn-has-cursor, html.lfn-has-cursor a, html.lfn-has-cursor button, html.lfn-has-cursor [data-cursor] { cursor: none; }
  html.lfn-has-cursor input, html.lfn-has-cursor textarea, html.lfn-has-cursor select,
  html.lfn-has-cursor input[data-cursor], html.lfn-has-cursor textarea[data-cursor], html.lfn-has-cursor select[data-cursor] { cursor: auto; }   /* champs : curseur natif, même marqués data-cursor */
}

/* ---------- Préchargeur-logo (une fois par session) ---------- */
.lfn-preloader { position: fixed; inset: 0; z-index: var(--st-z-preload); display: grid; place-items: center; background: var(--st-cream); will-change: clip-path; }
.lfn-preloader .medal { position: relative; width: 168px; height: 168px; display: grid; place-items: center; will-change: transform; }
.lfn-preloader .wreath { position: absolute; inset: 0; width: 100%; height: 100%; }
.lfn-preloader .wreath path, .lfn-preloader .wreath circle { fill: none; stroke: var(--st-violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lfn-preloader .wreath .petal { stroke: #7a5a9c; }
.lfn-preloader .wreath .bud { fill: var(--st-violet); stroke: none; opacity: 0; }
.lfn-preloader .logo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.lfn-preloader .sign { position: absolute; top: calc(50% + 100px); font-family: var(--st-font-hand); font-size: 2.2rem; color: var(--st-violet); line-height: 1; white-space: nowrap; clip-path: inset(-20% 100% -20% 0); }
.lfn-preloader .sub { position: absolute; top: calc(50% + 148px); font-family: var(--st-font-title); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--st-ink-soft); opacity: 0; }

/* ---------- Voile de transition (page → page) ---------- */
.lfn-veil { position: fixed; inset: 0; z-index: var(--st-z-veil); background: var(--st-cream); display: grid; place-items: center; clip-path: inset(100% 0 0 0); visibility: hidden; pointer-events: none; will-change: clip-path; }
.lfn-veil.is-on { visibility: visible; pointer-events: auto; }
.lfn-veil .medal { width: 96px; height: 96px; will-change: transform; }
.lfn-veil .medal img { width: 100%; height: 100%; display: block; }

/* ---------- Calque « vue rapide » (zoom partagé, Échap, piège de focus) ---------- */
.lfn-layer { position: fixed; inset: 0; z-index: var(--st-z-layer); display: grid; place-items: center; padding: var(--st-gutter); visibility: hidden; pointer-events: none; }
.lfn-layer.is-open { visibility: visible; pointer-events: auto; }
.lfn-layer-bg { position: absolute; inset: 0; background: rgba(42,33,56,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; }
.lfn-layer-panel { position: relative; width: min(100%, 960px); max-height: 86vh; overflow: auto; background: var(--st-cream); border-radius: var(--st-r-l); box-shadow: 0 40px 90px -30px rgba(26,18,38,.7); transform-origin: 0 0; will-change: transform, opacity; }
.lfn-layer-close { position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--st-sh-1); display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--st-ink); }
.lfn-layer-close:hover { background: var(--st-lavender); }
.lfn-layer .zoom-media { position: relative; background: var(--st-cream-2); overflow: hidden; }
.lfn-layer .zoom-media img { width: 100%; height: 100%; object-fit: cover; }
body.lfn-layer-open { overflow: hidden; }
@media (max-width: 760px) { .lfn-layer { padding: 0; align-items: end; } .lfn-layer-panel { width: 100%; max-height: 92vh; border-radius: var(--st-r-l) var(--st-r-l) 0 0; } }

/* ---------- Toast de secours (LFN.toast d'app.js est utilisé quand il existe) ---------- */
.lfn-toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--st-z-toast); transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: var(--st-r-pill); background: var(--st-ink); color: #fff; font-weight: 600; font-size: var(--st-fs-1); box-shadow: var(--st-sh-2); pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); }

/* ---------- Élément qui « vole » vers l'icône panier (#cartBtn) ---------- */
.lfn-flyer { position: fixed; z-index: var(--st-z-toast); pointer-events: none; border-radius: 50%; overflow: hidden; box-shadow: var(--st-sh-2); will-change: transform, opacity; }
.lfn-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* mini-panier de secours : l'icône de l'en-tête est hors écran au moment de l'ajout (Cart.dockFor) */
.lfn-cart-dock { position: fixed; top: 14px; left: 0; z-index: calc(var(--st-z-toast) - 1); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(250, 247, 242, .94); color: var(--st-ink, #2A2138); box-shadow: var(--st-sh-2); border: 1px solid rgba(91, 63, 122, .14); cursor: pointer; visibility: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lfn-cart-dock svg { width: 23px; height: 23px; }
.lfn-cart-dock .n { position: absolute; top: 2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 100px; background: var(--corail-cta, #c94b3a); color: #fff; font: 800 .7rem/20px var(--st-font-text); text-align: center; }
.lfn-cart-dock .n:empty { display: none; }

/* ---------- Ducking : pendant le film, l'en-tête du site se replie (seule touche à l'habillage d'app.js, par id) ---------- */
#siteHeader { transition: transform var(--st-d-mid) var(--st-ease-in-out), border-color .3s, box-shadow .3s; }
body.lfn-film-playing #siteHeader { transform: translateY(-110%); }

/* ==========================================================================
   UTILITAIRES DE MOUVEMENT
   ========================================================================== */
/* Révélations au scroll : .st-reveal (+ data-reveal="up|fade|scale|left|right|down|clip", data-reveal-delay="ms").
   Rien à voir avec .reveal de main.css (LFN.initReveals), qui continue de fonctionner à côté. */
html.lfn-js .st-reveal { opacity: 0; visibility: hidden; }
html.lfn-js .st-reveal[data-reveal="clip"] { opacity: 1; visibility: visible; clip-path: inset(0 0 100% 0); }
html.lfn-js.lfn-rm .st-reveal { opacity: 1; visibility: visible; clip-path: none; }
html.lfn-js .st-reveal.is-in, .st-reveal.is-in { opacity: 1; visibility: visible; }   /* doit l'emporter sur le masquage ci-dessus (élément révélé sans tween, ex. section dévoilée après coup) */
/* Lignes masquées (LFNStudio.splitLines) */
.sl-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.sl-inner { display: block; will-change: transform; }
.sl-word { display: inline-block; white-space: pre; }
.st-hand .sl-line, .sl-line.is-hand { padding-bottom: .22em; margin-bottom: -.22em; }
/* Tilt 3D */
.st-tilt { transform-style: preserve-3d; will-change: transform; }
.st-tilt-wrap { perspective: 900px; }
/* Parallaxe douce (data-parallax="0.15") */
[data-parallax] { will-change: transform; }

/* ==========================================================================
   FILM DE L'ATELIER (LFNFilm.mount) — + carte (chapitre 2) dans le même cadre
   Le conteneur reçoit .lfn-film ; états : .is-film (lecture/pause), .is-paused, .is-carte, .is-ended, .is-fullbleed.
   ========================================================================== */
.lfn-film { --gut: clamp(16px, 4vw, 40px); position: relative; overflow: hidden; background: var(--st-night); color: #fff; isolation: isolate; aspect-ratio: 16 / 9; min-height: 420px; max-height: 100vh; border-radius: var(--st-r-l); font-family: var(--st-font-text); line-height: var(--st-lh-text); }
.lfn-film.is-fullbleed { border-radius: 0; aspect-ratio: auto; height: 100vh; height: 100svh; max-height: none; }
@media (max-width: 760px) { .lfn-film { border-radius: 0; aspect-ratio: auto; height: 100svh; min-height: 560px; } }

/* plans */
.lfn-film-stage { position: absolute; inset: 0; }
.lfn-film-stage .plan { position: absolute; inset: 0; opacity: 0; will-change: opacity; transition: opacity .55s var(--st-ease-out); }
.lfn-film-stage .plan.is-on { opacity: 1; z-index: 1; }
.lfn-film-stage .plan.is-prev { opacity: 1; z-index: 0; transition: none; }
.lfn-film-stage .plan > img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; }
.lfn-film-stage .plan.is-on.kb-a > img { animation: lfn-kbA var(--kb, 5s) linear forwards; }
.lfn-film-stage .plan.is-on.kb-b > img { animation: lfn-kbB var(--kb, 5s) linear forwards; }
.lfn-film-stage .plan.is-on.kb-c > img { animation: lfn-kbC var(--kb, 5s) linear forwards; }
.lfn-film-stage .plan.kb-z > img { transform-origin: 34% 70%; object-position: 34% 70%; }
.lfn-film-stage .plan.is-on.kb-z > img { animation: lfn-kbZ var(--kb, 5s) ease-out forwards; }
@keyframes lfn-kbA { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -2%); } }
@keyframes lfn-kbB { from { transform: scale(1.2) translate(2%, 1.5%); } to { transform: scale(1.04) translate(0, 0); } }
@keyframes lfn-kbC { from { transform: scale(1.04) translate(0, 2%); } to { transform: scale(1.22) translate(2%, -2%); } }
@keyframes lfn-kbZ { from { transform: scale(1.0); } to { transform: scale(1.75); } }
.lfn-film-stage .plan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,18,38,.35) 0, rgba(26,18,38,0) 30%, rgba(26,18,38,0) 55%, rgba(26,18,38,.78) 100%); pointer-events: none; }
.lfn-film-stage .plan .idea { position: absolute; left: var(--gut); bottom: 30%; font-family: var(--st-font-title); font-weight: 800; font-size: clamp(2.2rem, 6vw, 5rem); letter-spacing: -.03em; line-height: 1; text-shadow: 0 10px 40px rgba(0,0,0,.45); }
.lfn-film-stage .plan .idea span, .lfn-film-stage .plan .idea em { display: block; opacity: 0; transform: translateY(24px); }
.lfn-film-stage .plan .idea em { font-family: var(--st-font-hand); font-weight: 400; font-style: normal; color: #f6d3cb; font-size: 1.2em; letter-spacing: 0; }
.lfn-film-stage .plan.is-on .idea span { animation: lfn-rise .8s var(--st-ease-out) .3s forwards; }
.lfn-film-stage .plan.is-on .idea em { animation: lfn-rise .8s var(--st-ease-out) 1.6s forwards; }
@keyframes lfn-rise { to { opacity: 1; transform: none; } }
/* plan « configurateur » (faux écran stylisé) */
.plan-config > img { filter: blur(8px) brightness(.45) saturate(.7); transform: scale(1.06); }
.plan-config .cfg-host { position: absolute; inset: 0; display: grid; place-items: center; padding: 56px var(--gut) 150px; z-index: 1; }
.lfn-film .cfg { width: min(100%, 720px); background: #fff; color: var(--st-ink); border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); overflow: hidden; font-size: 14px; opacity: 0; transform: translateY(20px) scale(.97); }
.plan-config.is-on .cfg { animation: lfn-cfgIn .7s var(--st-ease-out) .15s forwards; }
@keyframes lfn-cfgIn { to { opacity: 1; transform: none; } }
.lfn-film .cfg-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--st-lavender); border-bottom: 1px solid var(--st-line); }
.lfn-film .cfg-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--st-line); } .lfn-film .cfg-top i:first-child { background: var(--st-coral); }
.lfn-film .cfg-top b { margin-left: auto; font-family: var(--st-font-hand); font-weight: 400; font-size: 20px; color: var(--st-violet); }
.lfn-film .cfg-body { display: grid; grid-template-columns: 1.1fr 1fr; }
.lfn-film .cfg-prev { position: relative; display: grid; place-items: center; min-height: 230px; background: var(--st-cream); }
.lfn-film .cfg-prev svg { width: 70%; max-width: 230px; }
.lfn-film .cfg-prev .cfg-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -32%); font-family: var(--st-font-hand); font-size: clamp(30px, 5vw, 48px); color: var(--st-violet); white-space: nowrap; }
.lfn-film .cfg-name span { opacity: 0; display: inline-block; } .lfn-film .cfg-name span.on { opacity: 1; transition: opacity .18s; }
.lfn-film .cfg-caret { display: inline-block; width: 2px; height: .9em; margin-left: 3px; background: var(--st-violet); vertical-align: -0.1em; animation: lfn-blink 1s steps(2) infinite; }
@keyframes lfn-blink { 50% { opacity: 0; } }
.lfn-film .cfg-form { padding: 16px; display: grid; gap: 12px; align-content: start; }
.lfn-film .cfg-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-soft); margin-bottom: 4px; }
.lfn-film .cfg-field { padding: 10px 12px; border: 1.5px solid var(--st-line); border-radius: 10px; background: #fff; font-family: var(--st-font-hand); font-size: 24px; line-height: 1; color: var(--st-violet); min-height: 44px; }
.lfn-film .cfg-sw { display: flex; gap: 8px; } .lfn-film .cfg-sw i { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,33,56,.2); transition: transform .25s var(--st-ease-out); } .lfn-film .cfg-sw i.on { box-shadow: 0 0 0 2px var(--st-violet); transform: scale(1.15); }
.lfn-film .cfg-btn { margin-top: 4px; padding: 12px; border-radius: 999px; background: var(--st-coral-cta); color: #fff; font-family: var(--st-font-title); font-weight: 700; text-align: center; }
@media (max-width: 640px) { .lfn-film .cfg-body { grid-template-columns: 1fr; } .lfn-film .cfg-prev { min-height: 150px; } .lfn-film .cfg-form { padding: 12px; gap: 10px; } .plan-config .cfg-host { padding: 64px 16px 232px; } .lfn-film .cfg { font-size: 13px; } .lfn-film .cfg-prev .cfg-name { font-size: 34px; } }
/* montage rapide : flocage / gravure / personnalisation */
.plan-montage .sub { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; background: var(--st-cream-2); }
.plan-montage .sub.is-on { opacity: 1; }
.plan-montage .sub img { width: 100%; height: 100%; object-fit: cover; }
.plan-montage .sub.is-on img { animation: lfn-kbB 1.2s linear forwards; }
.plan-montage .mot { position: absolute; left: var(--gut); top: 14%; font-family: var(--st-font-title); font-weight: 800; font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: -.03em; color: #fff; text-shadow: 0 10px 40px rgba(0,0,0,.45); transform: translateX(-10px); opacity: 0; z-index: 2; }
.plan-montage .sub.is-on .mot { animation: lfn-slideIn .45s var(--st-ease-out) forwards; }
@keyframes lfn-slideIn { to { opacity: 1; transform: none; } }
/* collage final */
.plan-collage { background: var(--st-cream); }
.plan-collage::after { background: linear-gradient(180deg, rgba(26,18,38,0) 55%, rgba(26,18,38,.7) 100%); }
.plan-collage .col-grid { position: absolute; inset: 7% var(--gut) 24%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5%; align-items: center; }
.plan-collage .col-grid figure { margin: 0; background: #fff; padding: 3% 3% 10%; box-shadow: var(--st-sh-pola); opacity: 0; transform: translateY(30px) rotate(var(--r, -2deg)) scale(.9); }
.plan-collage .col-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.plan-collage.is-on .col-grid figure { animation: lfn-popIn .6s var(--st-ease-out) forwards; }
.plan-collage .col-grid figure:nth-child(2) { animation-delay: .12s; --r: 2deg; } .plan-collage .col-grid figure:nth-child(3) { animation-delay: .24s; --r: -1deg; } .plan-collage .col-grid figure:nth-child(4) { animation-delay: .36s; --r: 3deg; }
@keyframes lfn-popIn { to { opacity: 1; transform: translateY(0) rotate(var(--r, -2deg)) scale(1); } }
@media (max-width: 640px) { .plan-collage .col-grid { grid-template-columns: repeat(2, 1fr); inset: 10% 12% 36%; } }
/* plan final */
.plan-final { background: var(--st-night); }
.plan-final .final-bg { opacity: .35; filter: saturate(.6); }
.plan-final .final-inner { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; z-index: 1; padding-bottom: 120px; }
.plan-final .disc { width: clamp(120px, 22vw, 200px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); opacity: 0; transform: scale(.8); }
.plan-final .disc img { width: 90%; height: auto; }
.plan-final.is-on .disc { animation: lfn-popIn 1s var(--st-ease-out) .1s forwards; --r: 0deg; }
.plan-final .final-sign { font-family: var(--st-font-hand); font-size: clamp(2.4rem, 6vw, 4.4rem); color: #fff; line-height: 1; opacity: 0; transform: translateY(16px); }
.plan-final.is-on .final-sign { animation: lfn-rise .9s var(--st-ease-out) .5s forwards; }

/* ouverture (avant le clic) */
.lfn-film-amb { position: absolute; inset: 0; }
.lfn-film-amb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--st-ease-in-out); transform: scale(1.04); }
.lfn-film-amb img.is-on { opacity: 1; animation: lfn-kbA 11s linear infinite alternate; }
.lfn-film-amb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,18,38,.35), rgba(26,18,38,.55) 60%, rgba(26,18,38,.85)); }
.lfn-film.is-film .lfn-film-amb { display: none; }
.lfn-film-opening { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: var(--gut); }
.lfn-film.is-film .lfn-film-opening { display: none; }
.lfn-film.is-quiet .lfn-film-opening { opacity: 0; visibility: hidden; }   /* hero → film : la page garde sa propre ouverture (opts.opening: false) */
.lfn-film-opening .st-kicker { color: #f6d3cb; }
.lfn-film-opening .st-kicker::before { color: var(--st-coral); }
.lfn-film-opening .title { font-family: var(--st-font-title); font-weight: 800; font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1.05; text-shadow: 0 8px 30px rgba(0,0,0,.4); color: #fff; margin: 0; }
.lfn-film-opening .title .st-hand { color: #e9d8ff; }
.lfn-film-opening .lfn-film-text { max-width: 52ch; color: rgba(255,255,255,.82); font-size: var(--st-fs-1); line-height: 1.5; text-wrap: pretty; }
.lfn-film-play { display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 999px; background: #fff; color: var(--st-ink); font-family: var(--st-font-title); font-weight: 700; font-size: 1.05rem; box-shadow: 0 20px 50px -14px rgba(0,0,0,.6); transition: transform var(--st-d-short) var(--st-ease-out); will-change: transform; }
.lfn-film-play:hover { transform: scale(1.04); }
.lfn-film-play .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--st-coral-cta); color: #fff; display: grid; place-items: center; font-size: 18px; padding-left: 3px; }
.lfn-film-play small { font-weight: 500; opacity: .65; }
.lfn-film-voices { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.lfn-film-voice { min-height: 36px; padding: 0 14px; border-radius: 999px; color: #fff; font-family: var(--st-font-title); font-weight: 700; font-size: .9rem; transition: background-color var(--st-d-micro), color var(--st-d-micro); }
.lfn-film-voice[aria-pressed="true"] { background: #fff; color: var(--st-violet-deep); }
.lfn-film-voices .lbl { align-self: center; padding-left: 10px; font-size: .8rem; font-weight: 600; opacity: .8; }

/* interface pendant la lecture */
.lfn-film-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 0 var(--gut) 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lfn-film-caption { text-align: center; max-width: 30ch; text-wrap: balance; font-family: var(--st-font-title); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2.3rem); line-height: 1.18; letter-spacing: -.01em; min-height: 1.2em; }
.lfn-film-caption span { display: inline; background: rgba(26,18,38,.82); color: #fff; padding: .16em .5em; border-radius: .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; opacity: 0; transition: opacity .22s; }
.lfn-film-caption span.is-on { opacity: 1; }
.lfn-film-caption em { font-style: normal; color: #ffc9bf; }
.lfn-film-bar { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 980px; }
.lfn-film-ctl { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; flex: none; transition: background-color var(--st-d-micro); }
.lfn-film-ctl:hover { background: rgba(255,255,255,.28); }
.lfn-film-ctl svg { width: 18px; height: 18px; fill: currentColor; }
.lfn-film-ctl .i-pause { display: block; } .lfn-film-ctl .i-play { display: none; }
.lfn-film.is-paused .lfn-film-ctl .i-pause { display: none; } .lfn-film.is-paused .lfn-film-ctl .i-play { display: block; }
.lfn-film-prog { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); position: relative; cursor: pointer; }
.lfn-film-prog::before { content: ""; position: absolute; inset: -12px 0; }
.lfn-film-prog:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.lfn-film-prog .fill { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--st-coral); transform-origin: left; transform: scaleX(0); }
.lfn-film-prog .tick { position: absolute; top: -3px; width: 2px; height: 10px; background: rgba(255,255,255,.5); }
.lfn-film-prog .tick.chap { background: #fff; width: 3px; }
.lfn-film-time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; opacity: .85; white-space: nowrap; }
.lfn-film-voicenow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.lfn-film-exit { position: absolute; right: 16px; top: 16px; z-index: 9; width: 44px; height: 44px; border-radius: 50%; background: rgba(26,18,38,.55); color: #fff; font-size: 24px; line-height: 1; display: grid; place-items: center; backdrop-filter: blur(6px); }
.lfn-film-exit:hover { background: rgba(26,18,38,.85); }
.lfn-film.is-ended .lfn-film-exit { background: rgba(255,255,255,.14); }
.lfn-film.is-ended .lfn-film-exit:hover { background: rgba(255,255,255,.26); }
/* pause et × : disques sombres translucides lisibles sur les plans clairs (le reset `.lfn-film button` les mettait à nu) */
.lfn-film .lfn-film-ctl, .lfn-film .lfn-film-exit { width: 44px; height: 44px; border-radius: 50%; background: rgba(42,33,56,.55); border: 1px solid rgba(255,255,255,.25); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color var(--st-d-micro), border-color var(--st-d-micro), opacity var(--st-d-mid) var(--st-ease-out), transform var(--st-d-mid) var(--st-ease-out); }
.lfn-film .lfn-film-exit { font-size: 24px; line-height: 1; }
.lfn-film .lfn-film-ctl:hover, .lfn-film .lfn-film-exit:hover { background: rgba(42,33,56,.85); border-color: rgba(255,255,255,.5); }
.lfn-film .lfn-film-ctl:focus-visible, .lfn-film .lfn-film-exit:focus-visible { border-radius: 50%; box-shadow: 0 0 0 3px rgba(26,18,38,.9), 0 0 0 5px #fff; }
.lfn-film.is-ended .lfn-film-exit { background: rgba(255,255,255,.14); }
/* « ↻ Revoir » est un <button class="btn"> : le reset des boutons du film lui ôtait bordure et marges */
.lfn-film .lfn-film-end button.btn { padding: 15px 30px; border: 2px solid transparent; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.lfn-film .lfn-film-end .btn:focus-visible { border-radius: 100px; }
.lfn-film-chapter { position: absolute; left: 16px; top: 16px; z-index: 7; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(26,18,38,.55); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f6d3cb; backdrop-filter: blur(6px); }
.lfn-film-chapter b { color: #fff; }
.lfn-film-ui, .lfn-film-chapter, .lfn-film-exit { transition: opacity var(--st-d-mid) var(--st-ease-out), transform var(--st-d-mid) var(--st-ease-out); }
.lfn-film.is-arriving .lfn-film-ui { opacity: 0; transform: translateY(14px); }
.lfn-film.is-arriving .lfn-film-chapter, .lfn-film.is-arriving .lfn-film-exit { opacity: 0; transform: translateY(-8px); }
@media (max-width: 760px) { .lfn-film-ui { padding: 0 16px 16px; gap: 10px; } .lfn-film-caption { font-size: clamp(1.15rem, 5.4vw, 1.5rem); max-width: none; margin-bottom: 72px; } .lfn-film-voicenow { display: none; } .lfn-film-bar { gap: 10px; } }

/* chapitre 2 : la carte dans le même cadre */
.lfn-film-carte { position: absolute; left: var(--gut); right: var(--gut); top: 60px; bottom: 136px; z-index: 4; container-type: size; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s, visibility 0s .8s; }
.lfn-film.is-carte .lfn-film-carte { opacity: 1; visibility: visible; transition: opacity .9s .1s; }
.lfn-film.is-carte .plan.is-on { opacity: 0; transition: opacity .8s; }
.lfn-film-shade { position: absolute; inset: 0; z-index: 2; background: var(--st-night); opacity: 0; pointer-events: none; transition: opacity .9s var(--st-ease-in-out); }
.lfn-film.is-carte .lfn-film-shade { opacity: .72; }
.lfn-film.is-ended .lfn-film-carte { opacity: 0; visibility: hidden; transition: opacity .6s var(--st-ease-in-out), visibility 0s .6s; }
.lfn-film.is-carte.is-ended .lfn-film-shade { opacity: 1; }
.lfn-film-carte .carte-frame { width: min(100cqw, calc(100cqh * 16 / 9)); }
.lfn-film-carte .carte-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--st-cream); box-shadow: 0 50px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); }
.lfn-film-carte .carte-mount { position: absolute; inset: 0; }
.lfn-film-carte .carte-mount .sc-stage { height: 100%; aspect-ratio: auto; }
.lfn-film.is-carte .carte-stage { animation: lfn-carteIn 1.1s var(--st-ease-out) both; }
@keyframes lfn-carteIn { from { transform: translateY(16px) scale(.985); } to { transform: none; } }
@media (max-width: 760px) { .lfn-film-carte { left: 0; right: 0; top: 70px; bottom: 250px; align-items: center; } .lfn-film-carte .carte-stage { border-radius: 0; } }

/* fin */
.lfn-film-end { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: var(--gut); background: linear-gradient(180deg, rgba(26,18,38,.72), rgba(26,18,38,.94)); }
.lfn-film-end > * { animation: lfn-endIn .8s var(--st-ease-out) both; }
.lfn-film-end > :nth-child(2) { animation-delay: .12s; } .lfn-film-end > :nth-child(3) { animation-delay: .24s; } .lfn-film-end > :nth-child(4) { animation-delay: .4s; }
@keyframes lfn-endIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lfn-film-end .st-h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 3rem); }
.lfn-film-end .st-hand { font-size: 2rem; color: #e9d8ff; }
.lfn-film-end .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lfn-film-end .auto { font-size: 13px; opacity: .75; min-height: 1.2em; }
.lfn-film.is-ended .lfn-film-ui, .lfn-film.is-ended .lfn-film-chapter { opacity: 0; transition: opacity .4s; pointer-events: none; }

/* ==========================================================================
   « VENIR À L'ATELIER » (LFNVenir.mount) : poster papier + ▶, la carte se monte EN PLACE
   ========================================================================== */
.lfn-venir { position: relative; padding: 16px 0 12px; font-family: var(--st-font-text); }
.lfn-venir-frame { position: relative; display: block; width: 100%; padding: 12px 12px 44px; background: #fff; border-radius: 4px; box-shadow: var(--st-sh-pola);
  transform: rotate(var(--rot, 1.4deg)); transition: transform var(--st-d-mid) var(--st-ease-out); will-change: transform; }
.lfn-venir-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 2px 3px rgba(42,33,56,.08), 0 36px 54px -18px rgba(42,33,56,.45); opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out); pointer-events: none; }
.lfn-venir:not(.is-playing) .lfn-venir-frame:hover, .lfn-venir:not(.is-playing) .lfn-venir-frame:focus-within { transform: rotate(0deg) translateY(-6px) scale(1.01); }
.lfn-venir:not(.is-playing) .lfn-venir-frame:hover::after, .lfn-venir:not(.is-playing) .lfn-venir-frame:focus-within::after { opacity: 1; }
.lfn-venir.is-playing .lfn-venir-frame { transform: rotate(0deg); }
.lfn-venir .st-tape { position: absolute; left: 50%; top: -12px; width: 110px; height: 28px; margin-left: -55px; background: rgba(230,218,242,.75); border: 1px solid rgba(91,63,122,.18); transform: rotate(2deg); z-index: 6; }
.lfn-venir-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 2px; background: var(--st-cream-2); }
.lfn-venir-stage.sc-stage { aspect-ratio: 16 / 9; }
.lfn-venir-poster { position: absolute; left: 12px; right: 12px; top: 12px; width: calc(100% - 24px); height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--st-cream-2); filter: saturate(.95); z-index: 2; pointer-events: none; }
.lfn-venir-sub { position: absolute; left: 50%; bottom: calc(44px + 7%); transform: translateX(-50%); z-index: 4; width: max-content; max-width: 86%; padding: 10px 20px; border-radius: 6px; background: var(--st-paper); border: 1px solid rgba(42,33,56,.28); box-shadow: 3px 4px 0 rgba(42,33,56,.14), 0 14px 30px rgba(42,33,56,.12);
  font-weight: 600; font-size: clamp(.9rem, .6rem + 1.1vw, 1.25rem); text-align: center; line-height: 1.3; color: var(--st-ink); pointer-events: none; opacity: 0; }
.lfn-venir-sub:empty { display: none; }
.lfn-venir-sub em { font-style: normal; font-weight: 800; color: #c9513d; }
.lfn-venir-ctl { position: absolute; left: 12px; right: 12px; top: 12px; aspect-ratio: 16 / 9; z-index: 5; display: grid; place-items: center; transition: opacity var(--st-d-mid) var(--st-ease-out), visibility 0s var(--st-d-mid); }
.lfn-venir-ctl.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.lfn-venir-play { display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border-radius: var(--st-r-pill); background: var(--st-paper); color: var(--st-ink); font-family: var(--st-font-title); font-weight: 800; font-size: 1.15rem; box-shadow: 0 20px 50px -14px rgba(26,18,38,.6); white-space: nowrap; transition: transform var(--st-d-short) var(--st-ease-out); }
.lfn-venir-play .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--st-coral-cta); color: #fff; font-size: 16px; padding-left: 3px; }
.lfn-venir-play small { font-weight: 500; color: var(--st-ink-soft); font-size: .9rem; }
.lfn-venir-play:hover, .lfn-venir-frame:hover .lfn-venir-play { transform: scale(1.04); }
.lfn-venir.is-mounting .lfn-venir-play .ico { animation: lfn-venir-spin 1s linear infinite; }
@keyframes lfn-venir-spin { to { transform: rotate(360deg); } }
.lfn-venir-replay { position: absolute; right: 22px; top: 22px; z-index: 6; }
.lfn-venir-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; font-family: var(--st-font-hand); font-size: 1.3rem; color: var(--st-ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .lfn-venir-play { font-size: 1rem; } .lfn-venir-frame { padding-bottom: 52px; } .lfn-venir-cap { white-space: normal; font-size: 1.1rem; line-height: 1.1; } }
@media (max-width: 480px) { .lfn-venir-play { padding: 8px 16px 8px 8px; font-size: .95rem; gap: 10px; } .lfn-venir-play .ico { width: 36px; height: 36px; } .lfn-venir-sub { bottom: calc(52px + 5%); max-width: 92%; padding: 8px 12px; } }

/* ==========================================================================
   MOUVEMENT RÉDUIT : rien ne bouge, tout se lit (scopé aux composants studio, jamais global)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lfn-cursor, .lfn-sparks { display: none !important; }
  .st-pola:hover { transform: rotate(0deg); }
  .st-tag, .st-pola, .st-review, .lfn-venir-frame, .lfn-venir-frame:hover { transform: none; }
  .lfn-film-stage .plan > img, .plan-montage .sub.is-on img, .lfn-film-amb img.is-on { animation: none !important; transform: none !important; }
  .lfn-film-stage .plan.kb-z > img { transform: scale(1.6) !important; }
  .plan-final.is-on .disc, .plan-collage.is-on .col-grid figure, .plan.is-on .idea span, .plan.is-on .idea em, .plan-config.is-on .cfg, .plan-montage .sub.is-on .mot { animation: none; opacity: 1; transform: none; }
  .lfn-film-stage .plan { transition-duration: .3s; }
  .lfn-film.is-carte .carte-stage { animation: none; }
  .lfn-film-end > * { animation: none; }
  .lfn-film.is-arriving .lfn-film-ui, .lfn-film.is-arriving .lfn-film-chapter, .lfn-film.is-arriving .lfn-film-exit { transform: none; }
  .lfn-venir.is-mounting .lfn-venir-play .ico { animation: none; }
  .st-sound[aria-pressed="true"] .bars i { animation: none; }
  #siteHeader { transition: none; }
}