/* Seraya · accueil : film de fond piloté par le défilement, récit épinglé, signature.
   Ne concerne que la page d'accueil (body.home). Sans film ni GSAP, la page reste complète :
   le hero garde sa mascotte, les étapes restent en grille, tout est lisible. */

/* même condition que FILM dans accueil.js : ordinateur, souris, mouvement autorisé */
.film { display: none }
@media (min-width: 921px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .film { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none }
  .film > * { position: absolute; inset: 0; width: 100%; height: 100% }
  .film-poster { background: #FBFBF8 url(/assets/video/poster.jpg) center / cover no-repeat }
  .film-end { background: #FBFBF8 url(/assets/video/ending.jpg) center / cover no-repeat; opacity: 0; transition: opacity .8s ease }
  .film-at-end .film-end { opacity: 1 }
  .film video { object-fit: cover; opacity: 0; transition: opacity .6s ease }
  .film-ready .film video { opacity: 1 }
  .film-ready .film-end { display: none }
  /* voile clair : la moitié gauche, où vivent les titres, reste calme et lisible */
  .film-veil { background: linear-gradient(90deg, rgba(251, 251, 248, .94) 0%, rgba(251, 251, 248, .78) 34%, rgba(251, 251, 248, 0) 60%) }
  .home main, .home .foot { position: relative; z-index: 1 }
  .home .hero .stage { display: none }
  .home .hero .wrap { grid-template-columns: minmax(0, 1fr) }
  .home .hero .wrap > div:first-child { max-width: min(780px, 60vw) }
  .home .hero { min-height: calc(100svh - 68px); display: flex; align-items: center }
}

/* ---------- typographie forte ---------- */
.home h2 { font-size: clamp(38px, 5.4vw, 80px); letter-spacing: -.045em }
.home .hero h1 { font-size: clamp(44px, 6.3vw, 104px); letter-spacing: -.05em; line-height: .98 }
.home .hero .lead { font-size: clamp(18px, 1.5vw, 21px) }
@media (max-width: 920px) { .home .hero h1 { font-size: clamp(40px, 10.4vw, 64px) } }

/* sections pleines : elles passent par-dessus le film */
.home .sec:not(.mint):not(.cream):not(.sky):not(.sand):not(.ink):not(.see):not(.chap) { background-color: var(--paper) }
.home .after-film { position: relative }
.home .after-film::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34vh; background: linear-gradient(to bottom, rgba(251, 251, 248, 0), var(--paper)); pointer-events: none }

/* ---------- verre clair ---------- */
.glass { background: rgba(255, 255, 255, .66); border: 1px solid rgba(227, 232, 229, .9); border-radius: var(--r-md);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: 0 24px 70px -30px rgba(11, 26, 21, .25) }

/* ---------- déclaration « pendant que » ---------- */
.impact { position: relative }
.impact-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 68px; padding-bottom: 40px }
.impact-txt { font-size: clamp(36px, 5.6vw, 88px); font-weight: 600; letter-spacing: -.045em; line-height: 1.04; max-width: 15ch }
.impact-txt em { font-family: var(--serif); font-weight: 400; color: var(--jade); font-size: 1.1em; letter-spacing: -.01em }
.impact .kick { margin-bottom: 26px }
.impact .word { display: inline-block; will-change: opacity, transform }
@media (max-width: 920px) { .impact-pin { min-height: 0; padding: clamp(72px, 14vw, 120px) var(--gut) } .impact { background: var(--mint) } }

/* ---------- chapitre « chaque matin » ---------- */
.chap-dots { display: none }
@media (min-width: 921px) { .home #comment .steps { position: relative; z-index: 1 } }
.fx .chap { padding: 0 }
.fx .chap-pin { height: 100svh; display: grid; grid-template-columns: minmax(0, 520px) 1fr; align-items: center; padding-top: 68px }
.fx .chap .steps { display: block; position: relative; height: 410px; margin-top: 34px }
.fx .chap .steps .step { position: absolute; left: 0; top: 0; width: min(440px, 100%); min-height: 380px; will-change: transform, opacity }
.fx .chap .step.card { background: rgba(255, 255, 255, .72); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2) }
.fx .chap .step[data-r] { opacity: 1; filter: none; transform: none; transition: none }
.fx .chap-dots { display: flex; gap: 8px; margin-top: 26px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--mut) }
.chap-dots i { width: 26px; height: 4px; border-radius: 4px; background: var(--line); transition: background-color .3s ease, width .4s var(--ease-out) }
.chap-dots i.on { background: var(--jade); width: 44px }
.chap-dots span { margin-left: 10px; font-variant-numeric: tabular-nums }

/* ---------- vidéo de présentation ---------- */
.home .vid-sec .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 34px; flex-wrap: wrap }
.home .vid-sec .head .lead { max-width: 420px }

/* ---------- signature sur l'image finale du film ---------- */
.signature { min-height: 100svh; display: flex; align-items: center; background: var(--mint); padding: clamp(80px, 12vw, 140px) 0 }
.signature .sig { max-width: 640px; padding: clamp(28px, 4vw, 48px) }
.signature h2 { font-size: clamp(40px, 6vw, 92px) }
.signature .masc-s { width: 96px; margin-bottom: 22px }
.signature .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }
.signature .lead { margin-top: 18px }
@media (min-width: 921px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .signature { background: transparent }
  .signature .masc-s { display: none }
}
@media (max-width: 920px) { .signature { min-height: 0 } .signature .sig { padding: 0 } .signature .glass { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none } }

/* ---------- élément signature : la mascotte qui veille en bas de l'écran ---------- */
.peek { display: none }
@media (min-width: 921px) and (hover: hover) {
  .peek { display: block; position: fixed; right: 22px; bottom: 16px; width: 72px; z-index: 40; pointer-events: none;
    transform: translateY(calc(100% + 40px)); transition: transform .7s var(--ease-out) }
  .peek.on { transform: translateY(0) }
  .peek svg { width: 100%; height: auto; overflow: visible }
  .peek .eo { transition: transform .25s var(--ease-out) }
  .peek .eh { opacity: 0 }
  .peek.happy .eo { opacity: 0 } .peek.happy .eh { opacity: 1 }
  .peek .lid { animation: blinkS 5.2s infinite; animation-delay: -1.3s; transform-origin: 60px 60px; transform-box: view-box }
  @keyframes blinkS { 0%, 94%, 100% { transform: scaleY(1) } 96% { transform: scaleY(.1) } }
}
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important }
@media (prefers-reduced-motion: reduce) { .peek, .peek .lid { transition: none; animation: none } }

/* Lenis */
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-stopped { overflow: hidden }