/* Maison Sorell V3 — Hero immersif : séquence 3D pilotée par le défilement */
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--creme); color: var(--charbon-profond); font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.skip:focus { top: 16px; }

.immersive { position: relative; height: 520vh; background: #0a0908; }
.immersive__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.immersive__still, .immersive__still img, .immersive__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.immersive__still img { object-fit: cover; }
.immersive__canvas { display: block; opacity: 0; transition: opacity .6s var(--ease); transform-origin: 50% 45%; will-change: transform; }
.immersive.is-ready .immersive__canvas { opacity: 1; }
.immersive.is-ready .immersive__still { visibility: hidden; }
.immersive__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,9,8,.72) 0%, rgba(10,9,8,.25) 38%, rgba(10,9,8,0) 60%),
              linear-gradient(0deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 34%); }
.immersive__shade::after { content: ""; position: absolute; inset: 0; background: #0a0908; opacity: var(--dim, 0); }

/* temps forts typographiques */
.beat { position: absolute; z-index: 2; color: var(--creme); will-change: opacity, transform; }
.js .immersive:not(.is-static) .beat:not(.beat--1) { opacity: 0; pointer-events: none; }   /* la première phrase est visible dès le premier affichage */
.beat .eyebrow { color: rgba(242, 236, 226, .66); }
.beat--1 { left: var(--margin); bottom: clamp(80px, 12vh, 140px); max-width: 640px; }
.beat--1 .hero__title { margin: 22px 0 26px; }
.beat--1 .line > span { transform: none !important; }
.beat--2 { left: var(--margin); top: clamp(110px, 18vh, 190px); max-width: 420px; }   /* au-dessus de la couture : la plaque du fermoir occupe le bas de l'image */
.beat--3 { left: var(--margin); bottom: clamp(90px, 14vh, 150px); max-width: 420px; }
.beat--4 { left: var(--margin); top: 50%; translate: 0 -50%; max-width: 420px; }
.beat--4 .link { display: inline-block; margin-top: 28px; }
.beat__text { margin-top: 16px; font: 300 clamp(1.5rem, 2.2vw, 2.1rem)/1.2 var(--serif); }
.beat__text em { color: rgba(242, 236, 226, .7); }

/* chapitres */
.chapters { position: absolute; z-index: 2; left: 50%; bottom: 34px; translate: -50% 0; display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.chapters li { position: relative; padding-top: 14px; font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 236, 226, .38); transition: color .5s var(--ease); }
.chapters li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(242, 236, 226, .18); }
.chapters li::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--fill, 0) * 100%); background: var(--creme); }
.chapters li.is-active { color: var(--creme); }
.chapters .chapters__label { color: var(--sauge); margin-right: 6px; }   /* le Hero est le prologue ; les sections suivantes sont numérotées N° 01 à N° 04 */
.chapters .chapters__label::before, .chapters .chapters__label::after { content: none; }

.immersive__hint { position: absolute; z-index: 2; right: var(--margin); bottom: 34px; display: grid; justify-items: center; gap: 12px; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(242, 236, 226, .6); writing-mode: vertical-rl; transition: opacity .6s var(--ease); }
.immersive__hint i { width: 1px; height: 60px; background: rgba(242, 236, 226, .2); position: relative; overflow: hidden; }
.immersive__hint i::after { content: ""; position: absolute; inset: 0; background: var(--creme); animation: scroll-line 2.4s var(--ease) infinite; }

/* transition : la Philosophie monte par-dessus la scène */
.philo--lift { position: relative; z-index: 3; margin-top: -14vh; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .55); }

/* mode statique : sans JavaScript, mouvements réduits */
html:not(.js) .immersive, .immersive.is-static { height: auto; }
html:not(.js) .immersive__sticky, .immersive.is-static .immersive__sticky { position: relative; }
html:not(.js) .beat:not(.beat--1), .immersive.is-static .beat:not(.beat--1),
html:not(.js) .chapters, .immersive.is-static .chapters, .immersive.is-static .immersive__hint, html:not(.js) .immersive__hint { display: none; }
.immersive.is-static .immersive__canvas { display: none; }
html:not(.js) .philo--lift, .immersive.is-static + .philo--lift { margin-top: 0; }

@media (max-width: 760px) {
  .immersive { height: 440vh; }
  .immersive__shade { background: linear-gradient(0deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.55) 32%, rgba(10,9,8,0) 55%); }
  .beat { left: 20px; right: 20px; bottom: 96px; top: auto; translate: none; max-width: none; }
  .beat--1 .hero__ctas { gap: 22px; margin-top: 26px; }
  .chapters { gap: 14px; bottom: 26px; }
  .chapters li { font-size: 9px; letter-spacing: .16em; }
  .immersive__hint { display: none; }
  .philo--lift { border-radius: 20px 20px 0 0; margin-top: -10vh; }
}