/* Couche cinématique — transparente, hérite du design existant */
.cine-progress{
  position:fixed;top:0;left:0;z-index:140;
  height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--or, currentColor);
  pointer-events:none
}
.cine-overlay{
  position:fixed;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:139
}
.cine-grain{
  opacity:.045;mix-blend-mode:overlay;
  background-repeat:repeat;background-size:220px 220px;
  animation:cine-grain-shift 900ms steps(4) infinite
}
.cine-vignette{
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 54%, rgba(0,0,0,.28) 100%)
}
.cine-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
@keyframes cine-grain-shift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)}
  75%{transform:translate3d(-2%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}
body.cine-on .hero-bg{
  animation:none;
  will-change:transform,filter
}
body.is-alertes .cine-overlay,
body.is-alertes .cine-progress{opacity:.35}

/* Accueil : pas de fade de page — le plan est déjà là */
body.is-home #page-home.visible{animation:none}

/* --- Ouverture film (tout est DANS .hero, overflow hidden) --------------- */
.cine-stage{
  position:absolute;inset:0;z-index:1;
  pointer-events:none!important;overflow:hidden
}
.cine-stage *{pointer-events:none!important}
.cine-flash{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%,rgba(255,248,230,.82),rgba(236,202,146,.28) 46%,transparent 72%);
  opacity:0
}
.cine-flare{
  position:absolute;inset:0;
  background:linear-gradient(108deg,transparent 30%,rgba(255,236,200,.38) 50%,transparent 70%);
  transform:translate3d(-90%,0,0);
  opacity:0
}
.cine-beam{
  position:absolute;left:50%;top:-10%;bottom:-10%;width:70%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 36%,rgba(236,202,146,.22),transparent 66%);
  opacity:0
}
.cine-box{
  position:absolute;left:0;right:0;height:8vh;
  background:#070a08;
  transform-origin:center
}
.cine-box-top{top:0;transform-origin:top}
.cine-box-bot{bottom:0;transform-origin:bottom}

.hero.cine-hero-play .cine-flash{animation:cineFlash .55s ease-out both}
.hero.cine-hero-play .cine-flare{animation:cineFlare 1.15s .08s ease-out both}
.hero.cine-hero-play .cine-beam{animation:cineBeam 1.8s ease-out both}
.hero.cine-hero-play .cine-box{animation:cineBoxOut .9s 2.05s cubic-bezier(.16,1,.3,1) forwards}

.hero.cine-hero-play .hero-bg{
  animation:cinePush 3.4s cubic-bezier(.13,.7,.15,1) both
}
.hero.cine-hero-play .hero-logo-wrap{
  animation:cineSlam 1.15s .18s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-brand-line{
  animation:cineLine .7s .55s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-role{animation:none}
.hero.cine-hero-play .hero-role-top{
  animation:cineWhip .85s .42s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-duo .hero-role-sub:first-child{
  animation:cineWhip .85s .56s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-duo-and{
  animation:cineFade .45s .68s ease both
}
.hero.cine-hero-play .hero-duo .hero-role-sub:last-child{
  animation:cineWhip .85s .72s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-copy > p{
  animation:cineRise .9s 1s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-actions{
  animation:cineRise .85s 1.18s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-actions .btn-or{
  animation:cineBtn .85s 1.22s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-play .hero-bridge{
  animation:cineFade .7s 1.1s ease both
}
.hero.cine-hero-play .hero-rule,
.hero.cine-hero-play .hero-scroll-mobile{
  animation:cineFade .7s 1.45s ease both
}
body.is-home.cine-intro #header{
  animation:cineFade .55s .9s ease both
}

.hero.cine-hero-soft .hero-bg{animation:cinePushSoft 1.4s cubic-bezier(.16,1,.3,1) both}
.hero.cine-hero-soft .hero-logo-wrap,
.hero.cine-hero-soft .hero-role,
.hero.cine-hero-soft .hero-copy > p,
.hero.cine-hero-soft .hero-actions{
  animation:cineRise .9s cubic-bezier(.16,1,.3,1) both
}
.hero.cine-hero-soft .cine-stage{display:none}

.hero.cine-hero-done .cine-stage{display:none}
.hero.cine-hero-done .hero-bg{animation:heroKen 28s ease-out both}
body.cine-on .hero.cine-hero-done .hero-bg{animation:none}

@keyframes cineFlash{
  0%{opacity:.72}
  100%{opacity:0}
}
@keyframes cinePush{
  0%{transform:scale(1.62) translate3d(0,8px,0);filter:brightness(1.28) saturate(1.22) contrast(1.12)}
  18%{transform:scale(1.38) translate3d(0,4px,0);filter:brightness(1.05) saturate(1.14) contrast(1.1)}
  100%{transform:scale(1.12) translate3d(0,0,0);filter:brightness(.9) saturate(1.08) contrast(1.06)}
}
@keyframes cinePushSoft{
  from{transform:scale(1.16);filter:brightness(.55) saturate(1.08) contrast(1.06)}
  to{transform:scale(1.08);filter:brightness(.9) saturate(1.08) contrast(1.06)}
}
@keyframes cineRise{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}
@keyframes cineSlam{
  from{opacity:0;transform:translate3d(0,18px,0) scale(1.12)}
  to{opacity:1;transform:none}
}
@keyframes cineWhip{
  from{opacity:0;transform:translate3d(0,.7em,0) scale(1.04);clip-path:inset(80% 0 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes cineLine{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}
@keyframes cineFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes cineBtn{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes cineFlare{
  0%{transform:translate3d(-90%,0,0);opacity:0}
  28%{opacity:1}
  100%{transform:translate3d(90%,0,0);opacity:0}
}
@keyframes cineBeam{
  0%{opacity:.55}
  55%{opacity:.2}
  100%{opacity:0}
}
@keyframes cineBoxOut{
  to{transform:scaleY(0);opacity:0}
}

@media (max-width:900px){
  .cine-box{height:6vh}
  .cine-box-bot{display:none}
  .hero.cine-hero-play .hero-bg{animation:cinePush 2.8s cubic-bezier(.13,.7,.15,1) both}
}

/* Mobile / tactile : aucun overlay fixed, aucun hijack GPU hors hero */
@media (hover:none), (pointer:coarse), (max-width:1024px){
  .cine-progress,
  .cine-overlay,
  .cine-defs{display:none!important}
  body.cine-on .hero-bg{
    will-change:auto
  }
  body.cine-on:not(.cine-intro) .hero.cine-hero-done .hero-bg,
  body.cine-on:not(.cine-intro) .hero:not(.cine-hero-play) .hero-bg{
    animation:heroKen 28s ease-out both;
    transform:none;
    filter:brightness(.9) saturate(1.08) contrast(1.06)
  }
}
@media (prefers-reduced-motion:reduce){
  .cine-grain{animation:none!important}
  .cine-progress,.cine-overlay,.cine-stage{display:none}
  .hero.cine-hero-play .hero-bg,
  .hero.cine-hero-done .hero-bg,
  body.cine-on .hero-bg{animation:heroKen 28s ease-out both;filter:brightness(.9) saturate(1.08) contrast(1.06)}
  .hero.cine-hero-play .hero-logo-wrap,
  .hero.cine-hero-play .hero-brand-line,
  .hero.cine-hero-play .hero-role-top,
  .hero.cine-hero-play .hero-duo .hero-role-sub,
  .hero.cine-hero-play .hero-duo-and,
  .hero.cine-hero-play .hero-copy > p,
  .hero.cine-hero-play .hero-actions,
  .hero.cine-hero-play .hero-actions .btn-or,
  .hero.cine-hero-play .hero-rule,
  .hero.cine-hero-play .hero-scroll-mobile,
  body.is-home.cine-intro #header{
    animation:none!important;opacity:1;transform:none;clip-path:none;filter:none
  }
}