/**
 * MONDE V2 — page d'un royaume (seuil court, lore, récit du Gardien, ambiances, rituel, voisins)
 * Dépend de site-v2.css. Portage des prototypes demo/videos-v2.html et demo/monde-v2.html.
 *
 * @package SamRelaxe
 * @version 11.3.0
 */
/* ── LE SEUIL DU MONDE — un moment court : la frame est visible AVANT le scroll ── */
.sr2-world { position: relative; height: 190svh; background: var(--void); }
.sr2-world.is-lite, .sr2-world.is-mobile { height: 100svh; }
.sr2-world__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sr2-world__poster, .sr2-world__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr2-world__poster img { width: 100%; height: 100%; object-fit: cover; }
.sr2-world.is-fallback .sr2-world__poster img { filter: blur(28px) saturate(1.2) brightness(.62); transform: scale(1.18); }
.sr2-world__cv { opacity: 0; transition: opacity .3s ease; }
.sr2-world__cv.is-live { opacity: 1; }
.sr2-world__stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sr2-scrim) 0%, var(--sr2-scrim-soft) 38%, transparent 68%), linear-gradient(to right, var(--sr2-scrim) 0%, var(--sr2-scrim-soft) 45%, transparent 80%); pointer-events: none; }
.sr2-world__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-world__copy { position: absolute; left: 0; right: 0; bottom: 18svh; z-index: 2; }
.sr2-world__copy > * { animation: sr2-rise 1s var(--sr2-ease) both; }
.sr2-world__copy > :nth-child(2) { animation-delay: .1s; } .sr2-world__copy > :nth-child(3) { animation-delay: .2s; } .sr2-world__copy > :nth-child(4) { animation-delay: .3s; } .sr2-world__copy > :nth-child(5) { animation-delay: .4s; }
@keyframes sr2-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sr2-world__crumb { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--text-soft); display: flex; gap: var(--sp-2); }
.sr2-world__crumb a { color: var(--gold-soft); }
/* Lisibilité du fil d'Ariane et du chapeau sur les seuils clairs (Harborya, Sanctelis…) */
.sr2-world__copy .sr2-world__crumb, .sr2-world__copy .sr2-eyebrow { text-shadow: var(--sr2-ink-shadow); }
.sr2-world__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(4rem, 10vw, 8rem); line-height: .95; letter-spacing: var(--tracking-tight); color: var(--snow); margin: var(--sp-3) 0 0; text-shadow: var(--sr2-ink-shadow); }
.sr2-world__name em { font-style: italic; font-size: .38em; display: block; color: var(--gold-soft); margin-top: var(--sp-3); letter-spacing: 0; }
.sr2-world__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-5) 0 0; color: var(--text-soft); font-size: var(--text-sm); text-shadow: var(--sr2-ink-shadow); }
.sr2-world__meta b { color: var(--gold-soft); font-family: var(--font-display); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.sr2-world__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.sr2-world__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-world__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-world.is-lite .sr2-world__cue, .sr2-world.is-mobile .sr2-world__cue { display: none; }

/* ── LE LORE — la page monte sur la dernière image ── */
.sr2-lore { position: relative; z-index: 2; margin-top: -30svh; padding-top: 18svh; padding-bottom: var(--sr2-rhythm); background: linear-gradient(to bottom, transparent, var(--void) 22svh); }
.sr2-world.is-lite + .sr2-lore, .sr2-world.is-mobile + .sr2-lore { margin-top: 0; padding-top: var(--sr2-rhythm); }
.sr2-lore__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; }
.sr2-facts { position: sticky; top: calc(var(--sr2-nav-h) + var(--sp-6)); display: grid; gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--r-xl); border: 1px solid var(--sr2-hair-soft); background: linear-gradient(170deg, var(--white-5), transparent); }
.sr2-facts img { width: 150px; height: 172px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 12px 28px rgba(2, 10, 14, 0.85)); }
.sr2-facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
.sr2-facts dt { color: var(--text-muted); font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; padding-top: 3px; }
.sr2-facts dd { margin: 0; color: var(--text-main); }
.sr2-facts dd b { font-family: var(--font-display); font-size: var(--text-md); font-variant-numeric: tabular-nums; color: var(--gold-soft); }
.sr2-prose { max-width: var(--sr2-measure); }
.sr2-prose p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--text-soft); margin: var(--sp-5) 0 0; }
.sr2-prose .sr2-h2 { max-width: 20ch; }
.sr2-prose .sr2-prose__lead { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--snow); margin: var(--sp-5) 0 0; }
.sr2-prose .sr2-prose__lead + p::first-letter { font-family: var(--font-accent); font-size: 3.2em; float: left; line-height: .8; margin: .08em .12em 0 0; color: var(--gold); }
.sr2-prose blockquote { margin: var(--sp-8) 0 0; padding-left: var(--sp-6); border-left: 2px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: var(--text-h4); line-height: var(--leading-heading); color: var(--snow); }
.sr2-narr { margin-top: var(--sp-10); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--sr2-hair); background: var(--panel-soft); }
.sr2-narr__btn { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--sr2-gold-ink); box-shadow: var(--shadow-gold); transition: transform var(--t-fast) var(--sr2-ease); }
.sr2-narr__btn:hover { transform: scale(1.04); }
.sr2-narr__btn svg { width: 22px; height: 22px; }
.sr2-narr__btn .pause { display: none; } .sr2-narr__btn[aria-pressed="true"] .pause { display: block; } .sr2-narr__btn[aria-pressed="true"] .play { display: none; }
.sr2-narr__t { font-family: var(--font-display); font-size: var(--text-lg); color: var(--snow); margin: 0; }
.sr2-narr__s { margin: var(--sp-1) 0 0; font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.sr2-narr__bar { grid-column: 1 / -1; height: 2px; background: var(--white-8); border-radius: 2px; overflow: hidden; }
.sr2-narr__bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s linear; }

/* ── AMBIANCES DU MONDE ── */
.sr2-amb { padding: 0 0 var(--sr2-rhythm); }
.sr2-amb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
.sr2-amb__grid .sr2-vcard:first-child { grid-column: span 2; grid-row: span 2; }
.sr2-amb__grid .sr2-vcard:first-child .sr2-vcard__t { font-size: var(--text-h4); }

/* ── LE RITUEL DU MONDE ── */
.sr2-writ { position: relative; isolation: isolate; overflow: hidden; padding: var(--sr2-rhythm) 0; }
.sr2-writ__bg { position: absolute; inset: 0; z-index: -2; background: url('../assets/cinematic/t2-clairiere/frame-0085.webp') center / cover no-repeat; opacity: .5; }
.sr2-writ::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--void), transparent 25%, transparent 75%, var(--void)), linear-gradient(to right, var(--sr2-scrim), transparent 70%); }
.sr2-writ__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); align-items: center; }
.sr2-writ__lantern { aspect-ratio: 1; max-width: 360px; margin-inline: auto; }
.sr2-writ__lantern video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mix-blend-mode: screen; }

/* ── AUTRES ROYAUMES ── */
.sr2-others { padding: var(--sr2-rhythm) 0 var(--sp-16); }
.sr2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); 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; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--sr2-hair-soft); background: linear-gradient(180deg, var(--white-3), transparent); text-align: center; 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: 96px; height: 110px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(2, 10, 14, 0.8)); }
.sr2-realm__n { font-family: var(--font-display); font-size: var(--text-xl); color: var(--snow); font-weight: var(--weight-medium); line-height: 1.1; }
.sr2-realm__r { font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); }
.sr2-realm__c { font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 1100px) { .sr2-lore__grid, .sr2-writ__grid { grid-template-columns: 1fr; } .sr2-facts { position: static; } .sr2-amb__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sr2-amb__grid { grid-template-columns: 1fr; } .sr2-amb__grid .sr2-vcard:first-child { grid-column: auto; grid-row: auto; } .sr2-world__copy { bottom: 12svh; } .sr2-rail { grid-auto-columns: 62%; } .sr2-facts img { width: 120px; height: 138px; } }
@media (prefers-reduced-motion: reduce) { .sr2-world__copy > *, .sr2-world__cue i { animation: none; } }

/* ── Le Gardien du royaume (carte dans le lore) ── */
.sr2-guardian-card { margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--sr2-hair-soft); background: linear-gradient(160deg, var(--white-5), transparent); }
.sr2-guardian-card p { margin: var(--sp-2) 0 0; color: var(--text-soft); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.sr2-guardian-card .sr2-kicker { display: block; }