/**
 * HOME V2 — « Le seuil, puis la maison »
 * Socle commun (typo, boutons, puces, cartes, reveal, pilule, lucioles) + sections
 * de la home. Tout vient des tokens de style.css ; les manquants sont ajoutés en :root.
 * Le header/footer restent ceux du thème (components/ui/nav-capsule.php, footer.php).
 *
 * @package SamRelaxe
 * @version 11.0.0
 */
:root {
  --sr2-scrim:        rgba(2, 10, 14, 0.62);
  --sr2-scrim-soft:   rgba(2, 10, 14, 0.34);
  --sr2-ink-shadow:   0 2px 12px rgba(2, 10, 14, 0.9), 0 2px 40px rgba(2, 10, 14, 0.75);
  --sr2-hair:         var(--gold-25);
  --sr2-hair-soft:    var(--white-8);
  --sr2-wrap:         1320px;
  --sr2-measure:      62ch;
  --sr2-rhythm:       clamp(72px, 10vw, 168px);
  --sr2-ease:         var(--ease-out);
  --sr2-gold-ink:     #17120a;
}
/* `overflow-x: hidden` sur body (style.css) + `overflow-x: clip` sur html (Blocksy) font de body un
   conteneur de défilement → position: sticky du seuil cassée en prod (le contenu remontait avant la
   fin du scrub). `clip` ne crée pas de conteneur de défilement : le sticky suit à nouveau le viewport. */
body.sr-home { opacity: 1; overflow-x: clip; overflow-y: visible; }
.sr2-home img, .sr2-home video, .sr2-home canvas { display: block; max-width: 100%; }
.sr2-home a { color: inherit; text-decoration: none; }
:where(.sr-home, .sr2-home) button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.sr2-home :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-xs); }
.sr2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr2-wrap { width: min(100% - 2 * var(--container-padding), var(--sr2-wrap)); margin-inline: auto; }

/* ── Typographie ── */
.sr2-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); }
.sr2-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .7; }
.sr2-h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--snow); margin: var(--sp-4) 0 0; text-wrap: balance; max-width: 18ch; }
.sr2-h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--snow); margin: 0; text-wrap: balance; }
.sr2-h2 em, .sr2-h3 em { font-style: italic; color: var(--gold-soft); }
.sr2-lead { font-size: var(--text-md); color: var(--text-soft); max-width: var(--sr2-measure); margin: var(--sp-5) 0 0; }
.sr2-head { display: grid; align-items: end; grid-template-columns: 1fr auto; column-gap: var(--sp-10); }
.sr2-head__aside { color: var(--text-muted); font-size: var(--text-sm); padding-bottom: var(--sp-2); margin: 0; }
.sr2-link { color: var(--gold-soft); border-bottom: 1px solid var(--sr2-hair); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); }
.sr2-link:hover { color: var(--gold-bright); border-color: var(--gold); }
.sr2-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.sr2-kicker { font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); }

/* ── Boutons — l'or est le seul accent d'action ── */
.sr2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-8); border-radius: var(--r-pill); font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); white-space: nowrap; background: var(--grad-gold); color: var(--sr2-gold-ink); box-shadow: var(--shadow-gold); transition: transform var(--t-fast) var(--sr2-ease), box-shadow var(--t-normal); }
.sr2-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold), 0 0 0 1px var(--gold-bright); color: var(--sr2-gold-ink); }
.sr2-btn:active { transform: scale(.98); }
/* Blocksy et style.css recolorent les liens : le texte sombre du bouton or est imposé. */
a.sr2-btn, a.sr2-btn:visited, a.sr2-btn:hover, button.sr2-btn { color: var(--sr2-gold-ink) !important; text-decoration: none !important; }
.sr2-btn--ghost { background: var(--panel-soft); color: var(--text-main); border: 1px solid var(--sr2-hair); box-shadow: none; backdrop-filter: blur(6px); }
.sr2-btn--ghost:hover { border-color: var(--gold); box-shadow: none; color: var(--text-main); }
a.sr2-btn--ghost, a.sr2-btn--ghost:visited, a.sr2-btn--ghost:hover, button.sr2-btn--ghost { color: var(--text-main) !important; }
.sr2-btn svg { width: 16px; height: 16px; flex: none; }
.sr2-btn[disabled] { opacity: .6; pointer-events: none; }

/* ── Puces + champ ── */
.sr2-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--sr2-hair-soft); font-size: var(--text-sm); color: var(--text-soft); white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.sr2-chip:hover { border-color: var(--gold-35); color: var(--text-main); }
.sr2-chip[aria-pressed="true"] { background: var(--gold); color: var(--sr2-gold-ink); border-color: transparent; font-weight: var(--weight-semibold); }
.sr2-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sr2-input { min-height: 52px; padding: 0 var(--sp-5); border-radius: var(--r-pill); border: 1px solid var(--sr2-hair); background: var(--bg-panel); color: var(--text-main); font: inherit; backdrop-filter: blur(8px); width: 100%; }
.sr2-input::placeholder { color: var(--text-muted); }
.sr2-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-12); }

/* ── Reveal — subtil, une fois ── */
.js .sr2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--sr2-ease), transform .8s var(--sr2-ease); }
.js .sr2-reveal.is-in { opacity: 1; transform: none; }
.js .sr2-reveal[data-delay="1"] { transition-delay: .08s; }
.js .sr2-reveal[data-delay="2"] { transition-delay: .16s; }
.js .sr2-reveal[data-delay="3"] { transition-delay: .24s; }

/* ── Toggle son dans le header du thème ── */
.sr-nav-icon[aria-pressed="true"] { color: var(--gold); }

/* ── Pilule mobile + lucioles ── */
.sr2-btn.sr2-pill { position: fixed; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: var(--z-sticky); opacity: 0; pointer-events: none; transition: opacity var(--t-normal), transform var(--t-normal) var(--sr2-ease); display: none; }
.sr2-pill.is-visible { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.sr2-motes { position: fixed; inset: 0; z-index: var(--z-raised); pointer-events: none; opacity: .8; }

/* ── LE SEUIL — l'unique acte cinématique ── */
.sr2-seuil { position: relative; height: 230svh; background: var(--void); }
.sr2-seuil.is-lite { height: 100svh; }
.sr2-seuil__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--void); }
.sr2-seuil__poster, .sr2-seuil__loop, .sr2-seuil__cv, .sr2-seuil__arrive { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr2-seuil__poster img, .sr2-seuil__arrive img { width: 100%; height: 100%; object-fit: cover; }
.sr2-seuil__loop { opacity: 0; transition: opacity 1.2s ease; }
.sr2-seuil__loop.is-ready { opacity: 1; }
.sr2-seuil__loop.is-gone { opacity: 0; transition-duration: .35s; }
.sr2-seuil__cv { opacity: 0; transition: opacity .3s ease; }
.sr2-seuil__cv.is-live { opacity: 1; }
.sr2-seuil__arrive { opacity: 0; transition: opacity 1.4s var(--sr2-ease); }
.sr2-seuil.is-arrived .sr2-seuil__arrive { opacity: 1; }
.sr2-seuil__stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 60%, var(--sr2-scrim-soft), transparent 72%); pointer-events: none; }
.sr2-seuil__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30svh; background: linear-gradient(to bottom, transparent, var(--void)); pointer-events: none; }
.sr2-seuil__copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(760px, 90vw); text-align: center; display: grid; justify-items: center; gap: var(--sp-4); z-index: 2; }
.sr2-seuil__copy > * { animation: sr2-rise 1.1s var(--sr2-ease) both; }
.sr2-seuil__copy > :nth-child(2) { animation-delay: .12s; } .sr2-seuil__copy > :nth-child(3) { animation-delay: .24s; } .sr2-seuil__copy > :nth-child(4) { animation-delay: .36s; }
@keyframes sr2-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sr2-seuil__eyebrow { margin: 0; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); text-shadow: var(--sr2-ink-shadow); }
.sr2-seuil__h1 { margin: 0; display: grid; gap: var(--sp-3); text-wrap: balance; font-size: 1rem; }
.sr2-seuil__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(4.4rem, 12vw, 9.5rem); line-height: .95; letter-spacing: var(--tracking-tight); background: var(--grad-title-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgba(2, 10, 14, 0.7)); }
.sr2-seuil__promise { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium); font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: var(--leading-snug); color: var(--snow); text-shadow: var(--sr2-ink-shadow); }
.sr2-seuil__proof { margin: 0; font-size: var(--text-sm); color: var(--text-soft); letter-spacing: var(--tracking-wide); text-shadow: var(--sr2-ink-shadow); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); }
.sr2-seuil__proof b { color: var(--gold-soft); font-weight: var(--weight-semibold); }
.sr2-seuil__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-2); }
.sr2-seuil__mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; opacity: 0; pointer-events: none; width: min(700px, 90vw); }
.sr2-seuil__mid p { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 4.2vw, 3.4rem); font-weight: var(--weight-medium); color: var(--snow); text-shadow: var(--sr2-ink-shadow); line-height: var(--leading-tight); }
.sr2-seuil__mid small { display: block; margin-top: var(--sp-4); font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); text-shadow: var(--sr2-ink-shadow); }
.sr2-seuil__cue { position: absolute; left: 50%; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: var(--sp-2); color: var(--text-soft); font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; transition: opacity var(--t-slow); }
.sr2-seuil__cue i { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--gold), transparent); animation: sr2-cue 2.2s ease-in-out infinite; }
@keyframes sr2-cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
.sr2-seuil.is-lite .sr2-seuil__cue, .sr2-seuil.is-lite .sr2-seuil__mid { display: none; }

/* ── CE SOIR — les quatre portes ── */
.sr2-tonight { position: relative; z-index: 2; margin-top: -34svh; padding-top: 22svh; padding-bottom: var(--sr2-rhythm); background: linear-gradient(to bottom, transparent, var(--void) 26svh); }
.sr2-seuil.is-lite + .sr2-tonight { margin-top: 0; padding-top: var(--sr2-rhythm); }
.sr2-doors { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 240px; gap: var(--sp-4); margin-top: var(--sp-12); }
.sr2-door { position: relative; overflow: hidden; border-radius: var(--r-lg); isolation: isolate; grid-column: span 4; box-shadow: var(--shadow-md), inset 0 0 0 1px var(--sr2-hair-soft); transition: box-shadow var(--t-normal); }
.sr2-door:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.sr2-door:nth-child(2) { grid-column: span 7; }
.sr2-door:nth-child(3) { grid-column: span 4; }
.sr2-door:nth-child(4) { grid-column: span 3; }
.sr2-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--sr2-ease), filter 1.2s var(--sr2-ease); filter: saturate(.85) brightness(.82); }
.sr2-door:hover img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.sr2-door:hover { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--gold-35); }
.sr2-door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sr2-scrim) 0%, transparent 62%); }
.sr2-door__copy { position: absolute; left: var(--sp-6); right: var(--sp-6); bottom: var(--sp-6); z-index: 1; display: grid; gap: var(--sp-1); }
.sr2-door__t { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--snow); font-weight: var(--weight-medium); }
.sr2-door__s { font-size: var(--text-sm); color: var(--text-soft); max-width: 34ch; }
.sr2-door__go { position: absolute; top: var(--sp-5); right: var(--sp-5); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-panel); border: 1px solid var(--sr2-hair-soft); color: var(--gold-soft); z-index: 1; transition: background var(--t-normal), color var(--t-normal), transform var(--t-normal) var(--sr2-ease); }
.sr2-door:hover .sr2-door__go { background: var(--gold); color: var(--sr2-gold-ink); transform: rotate(-45deg); }
.sr2-door__go svg { width: 16px; height: 16px; }

/* ── À ÉCOUTER MAINTENANT ── */
.sr2-listen { padding: var(--sr2-rhythm) 0; border-top: 1px solid var(--sr2-hair-soft); }
.sr2-listen__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-6); margin-top: var(--sp-12); align-items: stretch; }
.sr2-feature { position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; min-height: 520px; box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--sr2-hair-soft); display: block; }
.sr2-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--sr2-ease); }
.sr2-feature:hover img { transform: scale(1.04); }
.sr2-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--void) 0%, var(--sr2-scrim-soft) 45%, transparent 75%); }
.sr2-feature__copy { position: absolute; left: var(--sp-8); right: var(--sp-8); bottom: var(--sp-8); z-index: 1; display: grid; gap: var(--sp-3); }
.sr2-feature__t { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-tight); color: var(--snow); font-weight: var(--weight-medium); max-width: 16ch; text-wrap: balance; }
.sr2-feature__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); color: var(--text-soft); font-size: var(--text-sm); }
.sr2-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-panel); border: 1px solid var(--gold-35); color: var(--gold-bright); backdrop-filter: blur(8px); z-index: 1; transition: transform var(--t-normal) var(--sr2-ease), background var(--t-normal), color var(--t-normal); }
.sr2-feature:hover .sr2-play { transform: translate(-50%, -50%) scale(1.06); background: var(--gold); color: var(--sr2-gold-ink); }
.sr2-play svg { width: 26px; height: 26px; margin-left: 4px; }
.sr2-list { display: grid; gap: var(--sp-3); align-content: start; }
.sr2-row { display: grid; grid-template-columns: 148px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid transparent; transition: background var(--t-normal), border-color var(--t-normal); }
.sr2-row:hover { background: var(--white-3); border-color: var(--sr2-hair-soft); }
.sr2-row__thumb { aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--abyss); }
.sr2-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr2-row__t { display: block; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--snow); font-weight: var(--weight-medium); }
.sr2-row__m { display: block; margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.sr2-row__m b { color: var(--gold-soft); font-weight: var(--weight-medium); }
.sr2-row__dur { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--text-lg); color: var(--text-soft); white-space: nowrap; }
.sr2-list__more { margin: var(--sp-3) 0 0; padding-left: var(--sp-3); }

/* ── DIX ROYAUMES ── */
.sr2-realms { padding: var(--sr2-rhythm) 0 0; }
.sr2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-4); scrollbar-width: thin; scrollbar-color: var(--gold-25) transparent; }
.sr2-realm { scroll-snap-align: start; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--sr2-hair-soft); background: linear-gradient(180deg, var(--white-3), transparent); transition: border-color var(--t-normal), transform var(--t-normal) var(--sr2-ease); }
.sr2-realm:hover { border-color: var(--gold-35); transform: translateY(-4px); }
.sr2-realm img { width: 112px; height: 129px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(2, 10, 14, 0.8)); transition: transform var(--t-slow) var(--sr2-ease); }
.sr2-realm:hover img { transform: translateY(-3px) scale(1.04); }
.sr2-realm__n { font-family: var(--font-display); font-size: var(--text-xl); color: var(--snow); text-align: center; font-weight: var(--weight-medium); line-height: 1.1; }
.sr2-realm__r { text-align: center; font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); }
.sr2-realm__s { text-align: center; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-normal); }
.sr2-realm__c { text-align: center; font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }

/* ── LE HALL DES PORTAILS ── */
.sr2-hall { position: relative; margin-top: var(--sp-16); }
.sr2-hall__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-2xl); isolation: isolate; box-shadow: var(--shadow-xl), inset 0 0 0 1px var(--sr2-hair-soft); }
.sr2-hall__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr2-hall__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sr2-scrim) 0%, transparent 38%); pointer-events: none; }
.sr2-arch { position: absolute; top: 17%; height: 66%; width: 11%; transform: translateX(-50%); border-radius: 50% 50% var(--r-md) var(--r-md) / 40% 40% var(--r-md) var(--r-md); z-index: 2; display: grid; align-content: end; justify-items: center; padding-bottom: var(--sp-3); color: var(--snow); transition: box-shadow var(--t-slow); }
.sr2-arch::before { content: ""; position: absolute; inset: -6%; border-radius: inherit; background: radial-gradient(60% 60% at 50% 45%, var(--gold-25), transparent 70%); opacity: 0; transition: opacity var(--t-slow); }
.sr2-arch:hover::before, .sr2-arch:focus-visible::before { opacity: 1; }
.sr2-arch:hover { box-shadow: 0 0 40px var(--gold-25), inset 0 0 0 1px var(--gold-35); }
.sr2-arch span { font-family: var(--font-display); font-size: clamp(.8rem, 1.3vw, 1.2rem); text-shadow: var(--sr2-ink-shadow); opacity: 0; transform: translateY(6px); transition: opacity var(--t-normal), transform var(--t-normal) var(--sr2-ease); }
.sr2-arch:hover span, .sr2-arch:focus-visible span { opacity: 1; transform: none; }
.sr2-hall__copy { position: absolute; left: var(--sp-10); bottom: var(--sp-10); z-index: 3; max-width: 34ch; pointer-events: none; }
.sr2-hall__copy a { pointer-events: auto; }
.sr2-hall__copy .sr2-h3 { margin-top: var(--sp-3); }
.sr2-hall__copy p { color: var(--text-soft); margin: var(--sp-3) 0 0; }
.sr2-hall__chips { display: none; margin-top: var(--sp-5); }

/* ── L'ORIGINE — le film, en plein cadre sur clic ── */
.sr2-origin { padding: var(--sr2-rhythm) 0 0; }
.sr2-origin__poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: var(--sp-10); border-radius: var(--r-2xl); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-xl), inset 0 0 0 1px var(--sr2-hair-soft); cursor: pointer; text-align: left; }
.sr2-origin__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--sr2-ease), filter 1.2s ease; filter: brightness(.9); }
.sr2-origin__poster:hover img { transform: scale(1.03); filter: brightness(1); }
.sr2-origin__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--void) 0%, transparent 45%); }
.sr2-origin__cap { position: absolute; left: var(--sp-8); bottom: var(--sp-8); z-index: 1; display: grid; gap: var(--sp-1); }
.sr2-origin__sub { font-size: var(--text-sm); color: var(--text-soft); }
.sr2-origin__poster .sr2-play { z-index: 2; }
.sr2-origin__poster:hover .sr2-play { transform: translate(-50%, -50%) scale(1.06); background: var(--gold); color: var(--sr2-gold-ink); }
.sr2-origin-dialog { position: fixed; inset: 0; z-index: var(--z-modal); background: #000; display: grid; place-items: center; }
.sr2-origin-dialog[hidden] { display: none; }
.sr2-origin-dialog video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sr2-origin-dialog__close { position: absolute; top: calc(var(--sp-4) + env(safe-area-inset-top)); right: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3); border-radius: var(--r-pill); background: rgba(6, 15, 24, .7); border: 1px solid var(--sr2-hair); color: var(--snow); font-size: var(--text-sm); backdrop-filter: blur(8px); }
.sr2-origin-dialog__close svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .sr2-origin__cap { left: var(--sp-5); bottom: var(--sp-5); } .sr2-origin__poster { border-radius: var(--r-lg); } }

/* ── LE GARDIEN ── */
.sr2-guardian { position: relative; padding: var(--sr2-rhythm) 0; margin-top: var(--sr2-rhythm); isolation: isolate; overflow: hidden; }
.sr2-guardian__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .55; }
.sr2-guardian::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--void) 0%, var(--sr2-scrim) 50%, transparent 100%), linear-gradient(to bottom, var(--void), transparent 20%, transparent 80%, var(--void)); }
.sr2-guardian__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-16); align-items: center; }
.sr2-guardian__lantern { position: relative; aspect-ratio: 1; max-width: 420px; margin-inline: auto; display: grid; place-items: center; }
.sr2-guardian__lantern video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mix-blend-mode: screen; }
.sr2-guardian__lantern::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; border: 1px solid var(--gold-12); pointer-events: none; }
.sr2-guardian__q { margin-top: var(--sp-8); }
.sr2-guardian__label { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-3); }
.sr2-guardian__go { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.sr2-guardian__hint { font-size: var(--text-sm); color: var(--text-muted); }

/* ── POURQUOI ÇA MARCHE ── */
.sr2-why { padding: var(--sr2-rhythm) 0; }
.sr2-why__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-16); margin-top: var(--sp-12); align-items: start; }
.sr2-proofs { display: grid; }
.sr2-proof { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-5); padding: var(--sp-6) 0; border-top: 1px solid var(--sr2-hair-soft); }
.sr2-proof:last-child { border-bottom: 1px solid var(--sr2-hair-soft); }
.sr2-proof__n { font-family: var(--font-display); font-size: var(--text-h4); color: var(--gold); line-height: 1; }
.sr2-proof__t { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); color: var(--snow); font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.sr2-proof__d { margin: var(--sp-2) 0 0; color: var(--text-soft); max-width: 46ch; }
.sr2-quote { position: relative; margin: 0; padding: var(--sp-8); border-radius: var(--r-xl); background: linear-gradient(160deg, var(--white-5), transparent); border: 1px solid var(--sr2-hair-soft); }
.sr2-quote blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-display); font-style: italic; font-size: var(--text-h4); line-height: var(--leading-heading); color: var(--snow); font-weight: var(--weight-medium); }
.sr2-quote blockquote::before { content: "«"; color: var(--gold); margin-right: .2em; }
.sr2-quote blockquote::after { content: "»"; color: var(--gold); margin-left: .2em; }
.sr2-quote figcaption { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); color: var(--text-soft); font-size: var(--text-sm); }
.sr2-quote figcaption img { width: 44px; height: 44px; border-radius: 50%; }
.sr2-post { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); align-items: center; margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--sr2-hair-soft); transition: border-color var(--t-normal), background var(--t-normal); }
.sr2-post:hover { border-color: var(--gold-35); background: var(--white-3); }
.sr2-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
.sr2-post__t { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--snow); margin-top: var(--sp-1); line-height: var(--leading-snug); }
.sr2-post__m { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--sp-2); }

/* ── LE FOYER ── */
.sr2-foyer { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--sr2-rhythm) * 1.2) 0; }
.sr2-foyer__media { position: absolute; inset: 0; z-index: -2; }
.sr2-foyer__media img, .sr2-foyer__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr2-foyer__media video { opacity: 0; transition: opacity 1.5s ease; }
.sr2-foyer__media video.is-ready { opacity: 1; }
.sr2-foyer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--void), transparent 22%, transparent 70%, var(--void)), radial-gradient(60% 70% at 30% 55%, var(--sr2-scrim), transparent 75%); }
.sr2-foyer__card { max-width: 560px; }
.sr2-foyer__form { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); margin-top: var(--sp-6); }
.sr2-foyer__small { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.sr2-foyer__small.is-error { color: var(--aurora); }
.sr2-foyer__yt { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--sr2-hair-soft); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.sr2-foyer__yt p { margin: 0; color: var(--text-soft); font-size: var(--text-sm); }
.sr2-foyer__yt b { color: var(--snow); font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.sr2-foyer__ok { display: none; color: var(--gold-soft); margin: var(--sp-4) 0 0; }
.sr2-foyer__form.is-done, .sr2-foyer__form.is-done + .sr2-foyer__small { display: none; }
.sr2-foyer__ok.is-shown { display: block; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sr2-listen__grid, .sr2-why__grid, .sr2-guardian__grid { grid-template-columns: 1fr; }
  .sr2-guardian__lantern { max-width: 300px; }
}
@media (max-width: 900px) {
  .sr2-btn.sr2-pill { display: inline-flex; }
  .sr2-head { grid-template-columns: 1fr; row-gap: var(--sp-3); }
  .sr2-doors { grid-auto-rows: 200px; }
  .sr2-door, .sr2-door:nth-child(n) { grid-column: span 12; grid-row: span 1; }
  .sr2-door:nth-child(1) { grid-row: span 2; }
  .sr2-hall__frame { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
  .sr2-hall__frame::after { background: linear-gradient(to top, var(--sr2-scrim-soft), transparent 40%); }
  .sr2-arch { display: none; }
  .sr2-hall__copy { position: static; max-width: none; padding: var(--sp-6) var(--sp-2) 0; pointer-events: auto; }
  .sr2-hall__chips { display: flex; }
  .sr2-feature { min-height: 380px; }
  .sr2-feature__copy { left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); }
  .sr2-row { grid-template-columns: 112px 1fr auto; }
  .sr2-post { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sr2-seuil { height: 160svh; }
  .sr2-seuil__copy { top: 52%; }
  .sr2-tonight { margin-top: -26svh; padding-top: 18svh; }
  .sr2-realm { padding: var(--sp-4); }
  .sr2-rail { grid-auto-columns: 72%; }
  .sr2-foyer__form { grid-template-columns: 1fr; }
  .sr2-quote { padding: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .sr2-seuil__copy > *, .sr2-seuil__cue i { animation: none; }
  .js .sr2-reveal { opacity: 1; transform: none; transition: none; }
  .sr2-door img, .sr2-feature img, .sr2-realm, .sr2-realm img, .sr2-btn { transition: none; }
}