/* ============================================================
   EXTRALYS : mode cinématique (accueil plein écran)
   Chaque scène occupe le viewport ; passage par dissolution
   (fondu + profondeur + flou). Actif sur tous les écrans ;
   repli défilement classique si prefers-reduced-motion
   (les wrappers .scene restent inertes : tout est scopé
   body.scenes-mode, voir js/cinematic.js).
   ============================================================ */

body.scenes-mode{overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none}
body.scenes-mode main#main{position:fixed;inset:0;z-index:1}

.scenes-mode .scene{position:fixed;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.965);filter:blur(7px);
  transition:opacity .6s var(--ease-out),transform .85s var(--ease-out),filter .6s var(--ease-out),visibility 0s linear .68s}
.scenes-mode .scene.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;z-index:2;
  transition:opacity .6s var(--ease-out),transform .85s var(--ease-out),filter .6s var(--ease-out),visibility 0s}
.scenes-mode .scene.is-leaving{opacity:0;visibility:visible;transform:scale(1.05);filter:blur(7px);z-index:1}

.scenes-mode .scene-inner{position:absolute;inset:0;width:100%;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;justify-content:safe center;
  padding:104px 0 58px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}
.scenes-mode .scene-inner::-webkit-scrollbar{display:none}
.scenes-mode .scene-inner .section,
.scenes-mode .scene-inner .hero,
.scenes-mode .scene-inner .page-hero{padding-top:0;padding-bottom:0}
.scenes-mode .scene-inner .site-footer{margin-top:64px}

.scenes-mode .scene .reveal{opacity:0;transform:translateY(30px)}
.scenes-mode .scene.is-active .reveal.in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .75s var(--ease-out)}

/* ---- Points de navigation latéraux ---- */
.scene-nav{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:95;
  display:flex;flex-direction:column;gap:15px;align-items:center}
.scene-nav button{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;
  cursor:pointer;padding:0;position:relative;transition:transform .3s var(--ease-out),border-color .3s,background .3s}
.scene-nav button::after{content:attr(data-label);position:absolute;right:22px;top:50%;
  transform:translateY(-50%) translateX(8px);white-space:nowrap;font-weight:500;font-size:12px;font-family:'Inter',sans-serif;
  color:var(--fg);background:color-mix(in srgb,var(--surface) 84%,transparent);border:1px solid var(--line);border-radius:8px;
  padding:5px 11px;opacity:0;pointer-events:none;transition:.3s;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.scene-nav button:hover{border-color:var(--accent);transform:scale(1.3)}
.scene-nav button:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.scene-nav button.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.scene-nav button.on::after{color:var(--accent-bright)}

/* ---- Indice « défiler » (première scène) ---- */
.scene-hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:95;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--fg-dim);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-family:'Inter',sans-serif;
  transition:opacity .5s;pointer-events:none}
.scene-hint.gone{opacity:0}
.scene-hint .wheel{width:24px;height:38px;border:1.5px solid var(--line-2);border-radius:12px;position:relative}
.scene-hint .wheel::before{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
  background:var(--accent-bright);transform:translateX(-50%);animation:wheelDot 1.9s var(--ease) infinite}
@keyframes wheelDot{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}55%{opacity:1;transform:translate(-50%,9px)}100%{opacity:0;transform:translate(-50%,13px)}}
.scene-hint .swipe{width:24px;height:34px;position:relative}
.scene-hint .swipe::before{content:'';position:absolute;left:50%;bottom:6px;width:11px;height:11px;
  border-left:2px solid var(--accent-bright);border-top:2px solid var(--accent-bright);
  transform:translateX(-50%) rotate(45deg);animation:swipeUp 1.9s var(--ease) infinite}
@keyframes swipeUp{0%{opacity:0;transform:translate(-50%,10px) rotate(45deg)}30%{opacity:1}
  70%{opacity:1;transform:translate(-50%,-4px) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-8px) rotate(45deg)}}

/* ---- Compteur + barre de progression ---- */
.scene-count{position:fixed;left:30px;bottom:26px;z-index:95;font-size:13px;color:var(--fg-dim);letter-spacing:.04em;font-family:'Inter',sans-serif}
.scene-count b{color:var(--accent-bright);font-size:23px;font-weight:600;letter-spacing:-.02em;font-family:'Playfair Display',serif}
.scene-prog{position:fixed;top:0;left:0;height:2px;z-index:96;background:var(--gold-grad);
  width:0;transition:width .85s var(--ease-out);box-shadow:0 0 12px var(--glow)}

.cine-flat .scene{transition:none!important;filter:none!important}

/* ============ Adaptation multi-écrans ============ */
@media(max-height:860px){
  .scenes-mode .scene-inner{padding-top:90px;padding-bottom:44px}
  .scenes-mode .hero h1{font-size:clamp(34px,4.6vw,56px);margin:16px 0 18px}
  .scenes-mode .hero .lead{font-size:18px;margin-bottom:26px}
  .scenes-mode .section-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 16px}
  .scenes-mode .hero-visual{max-width:400px}
}
@media(max-height:720px){
  .scenes-mode .hero-visual{max-width:320px}
  .scenes-mode .hero .lead{margin-bottom:20px}
}
@media(max-width:1024px){
  .scene-nav{right:9px;gap:11px}
  .scene-nav button{width:8px;height:8px}
  .scene-nav button::after{display:none}
  .scene-count{left:18px;bottom:13px;font-size:11px}
  .scene-count b{font-size:17px}
  .scene-hint{bottom:13px}
}
@media(max-width:680px){
  .scenes-mode .scene-inner{padding:112px 0 42px}
  .scenes-mode .hero h1{font-size:clamp(29px,8.2vw,38px);margin:14px 0 14px}
  .scenes-mode .hero .lead{font-size:16px;margin-bottom:20px}
  .scenes-mode .hero-slogan{margin-bottom:4px}
  .scenes-mode .hero-cta{gap:10px}
  .scenes-mode .btn-lg{padding:13px 20px;font-size:15px}
  .scenes-mode .hero-visual{max-width:min(52vw,240px);margin:16px auto 0}
  .scenes-mode .section-head h2{font-size:clamp(25px,7vw,32px)}
  .scenes-mode .scene-inner .site-footer{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){
  .scenes-mode .scene{transition:opacity .25s,visibility 0s;filter:none!important;transform:none!important}
  .scenes-mode .scene.is-leaving{filter:none;transform:none}
  .scene-hint .wheel::before,.scene-hint .swipe::before{animation:none}
}