/* Bannière « plan-séquence » : travelling continu, coupes en zoom de vitesse (WebGL),
   grain de pellicule, timecode et chapitres. */
.reel{position:absolute;inset:0;z-index:-2;overflow:hidden;contain:strict}
.reel .shot{position:absolute;inset:0;margin:0;visibility:hidden;will-change:clip-path}
.reel .shot.on,.reel .shot.in{visibility:visible}
.reel .shot.in{z-index:2}
.reel-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3}
.reel.gl-on .shot{visibility:hidden!important}
.reel .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform,filter;backface-visibility:hidden}
.reel::after{content:"";position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:.11;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:reel-grain .6s steps(5) infinite}
@keyframes reel-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* Bandeau de régie : REC, timecode, chapitre, progression, pause */
.reel-hud{display:flex;align-items:center;gap:18px;font:700 11.5px/1 var(--sans,"PT Sans",Arial,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.reel-hud .rec{display:flex;align-items:center;gap:8px;color:#fff}
.reel-hud .rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.25);animation:reel-rec 1.2s steps(1) infinite}
.reel.paused~.hero-foot .rec::before,.hero.reel-paused .rec::before{animation:none;background:rgba(255,255,255,.5);box-shadow:none}
@keyframes reel-rec{50%{opacity:.2}}
.reel-hud .tc{font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#fff;min-width:11ch}
.reel-hud .chap{display:grid}
.reel-hud .chap span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;white-space:nowrap}
.reel-hud .chap span.on{opacity:1;transform:none}
.reel-hud .chap b{color:var(--sky,#3CBFE6);margin-right:8px}
.reel-bars{display:flex;gap:6px}
.reel-bars button{position:relative;width:34px;height:14px;padding:0;border:0;background:none;cursor:pointer}
.reel-bars button::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.28)}
.reel-bars button i{position:absolute;left:0;right:0;top:6px;height:2px;background:var(--sky,#3CBFE6);transform:scaleX(0);transform-origin:0 50%}
.reel-bars button:focus-visible,.reel-pause:focus-visible{outline:2px solid var(--sky,#3CBFE6);outline-offset:3px}
.reel-pause{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,12,13,.35);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .25s,border-color .25s}
.reel-pause:hover{background:var(--sky,#3CBFE6);border-color:var(--sky,#3CBFE6);color:#0B0C0D}
.reel-pause::before{content:"";width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.reel-pause[aria-pressed="true"]::before{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.hero-foot .wrap{flex-wrap:wrap}
@media (max-width:1080px){.reel-hud .chap,.reel-hud .tc{display:none}}
@media (max-width:700px){
  .hero.has-reel .hero-foot{display:block;bottom:22px}
  .hero.has-reel .cities-line{display:none}
  .hero.has-reel .hero-foot .wrap{justify-content:flex-end}
  .reel-hud{gap:12px}.reel-hud .rec{display:none}.reel-bars button{width:22px}
  .hero.has-reel>.wrap{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){.reel::after,.reel-hud .rec::before{animation:none}}