/* ============================================================
   E-PORTFOLIO — DIRECTION ARTISTIQUE « CINÉMA »
   Refonte complète de l'identité (pas une surcouche timide) :
   • on bascule TOUS les tokens de couleur en NOIR CHARBON chaud
     → tous les composants validés repassent en mode salle obscure
   • projecteur + pellicule permanents en haut, bobines qui tournent
   • le film se DÉVELOPPE au scroll : muet N&B → argentique → 2010 → 4K
   • fond vivant partout : grain, poussières, rayures, vignette, flicker
   Règle d'or : l'époque habille le DÉCOR, les PHOTOS, le grain, l'accent —
   jamais la lisibilité du texte de réflexion (contraste tenu sur noir).
   ============================================================ */

/* --- propriété animable : avancée du développement (0 = muet N&B → 1 = 4K) --- */
@property --develop { syntax:'<number>'; inherits:true; initial-value:0; }

/* ============================================================
   1) BASCULE D'IDENTITÉ — tokens noir charbon chaud
   (redéfinit les variables de styles.css → tout le site devient cinéma)
   ============================================================ */
:root{
  --ivory:#0a0907;          /* canvas — noir chaud */
  --ivory-2:#141009;        /* surface creuse */
  --paper:#16120c;          /* surface des « cellules film » (cartes) */
  --ink:#f4ecdc;            /* texte — blanc cassé chaud */
  --ink-soft:#c4b6a0;       /* texte secondaire */
  --ink-faint:#8a7e6b;      /* libellés discrets */
  --hair:rgba(244,236,220,0.12);
  --hair-strong:rgba(244,236,220,0.22);

  --cold:#e7c98a;           /* « Soi » réétalonné chaud-clair pour le noir */
  --warm:#efaa53;           /* « Relation » — orange projecteur */

  --film-amber:#e9b667;     /* ambre projecteur (accent signature) */
  --top-h:94px;             /* hauteur de la barre projecteur */
  --maxw:1120px;
}

/* accent par ÉPOQUE — du gris muet au or 4K, de plus en plus vif */
.acc-hero  { --accent:#cdbf9f; }   /* bw — gris chaud (sera désaturé) */
.acc-qui   { --accent:#cdbf9f; }   /* bw */
.acc-s1    { --accent:#df9f4c; }   /* argentique — ambre */
.acc-s2    { --accent:#ecac3c; }   /* 2010 — or plus clair */
.acc-s3    { --accent:#f4b942; }   /* 4K — or vif */
.acc-tests { --accent:#f4b942; }
.acc-conc  { --accent:#f4b942; }

body{
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(233,182,103,0.10) 0%, transparent 42%),
    radial-gradient(120% 90% at 50% 108%, rgba(233,182,103,0.06) 0%, transparent 46%),
    var(--ivory);
  color:var(--ink);
  padding-top:var(--top-h);
  overflow-x:hidden;
}
::selection{background:color-mix(in oklab,var(--film-amber) 34%,transparent);color:#fff;}

/* perforations de pellicule sur les bords du canvas (on est DANS le film) */
body::before,body::after{
  content:"";position:fixed;top:var(--top-h);bottom:0;width:18px;z-index:58;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 12px,
      rgba(0,0,0,0.55) 12px 26px,
      transparent 26px 30px);
  -webkit-mask:repeating-linear-gradient(to bottom,#000 0 18px,transparent 18px 30px);
          mask:repeating-linear-gradient(to bottom,#000 0 18px,transparent 18px 30px);
  opacity:calc(0.10 + (1 - var(--develop)) * 0.30);
  mix-blend-mode:screen;
}
body::before{left:0;}
body::after{right:0;}

/* ============================================================
   2) FOND VIVANT — grain, poussières, rayures, vignette, flicker
   ============================================================ */
.film-fx{position:fixed;inset:0;z-index:60;pointer-events:none;}
.film-fx > *{position:absolute;inset:0;}

/* grain argentique animé (turbulence SVG) */
.fx-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  mix-blend-mode:soft-light;
  opacity:calc(0.10 + (1 - var(--develop)) * 0.22);
  animation:grainShift .9s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-6%,3%)}
  50%{transform:translate(4%,-5%)} 75%{transform:translate(-3%,5%)} 100%{transform:translate(5%,2%)}
}

/* poussières & cheveux dans la fenêtre (sparse, dérivent) */
.fx-dust{
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,250,235,0.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,250,235,0.45) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 45% 80%, rgba(255,250,235,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 85% 18%, rgba(255,250,235,0.5) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 12% 70%, rgba(255,250,235,0.4) 50%, transparent 52%);
  background-size:auto;
  opacity:calc((1 - var(--develop)) * 0.55);
  animation:dustDrift 7s steps(7) infinite;
}
@keyframes dustDrift{
  0%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-3px) translateX(4px)}
  66%{transform:translateY(2px) translateX(-3px)} 100%{transform:translateY(-1px) translateX(2px)}
}

/* rayures verticales de vieille pellicule (le « crépitement ») */
.fx-scratch{
  background-image:
    linear-gradient(90deg, transparent 0 18%, rgba(255,250,240,0.10) 18.2% 18.5%, transparent 18.7%),
    linear-gradient(90deg, transparent 0 63%, rgba(255,250,240,0.08) 63.3% 63.5%, transparent 63.8%),
    linear-gradient(90deg, transparent 0 81%, rgba(20,16,10,0.5) 81.2% 81.45%, transparent 81.6%);
  opacity:calc((1 - var(--develop)) * 0.6);
  animation:scratchFlick .7s steps(3) infinite;
}
@keyframes scratchFlick{
  0%{transform:translateX(0);opacity:.5} 30%{transform:translateX(2px);opacity:.15}
  31%{opacity:.55} 60%{transform:translateX(-1px)} 100%{transform:translateX(1px);opacity:.35}
}

/* vignette de projection */
.fx-vignette{
  background:radial-gradient(120% 95% at 50% 42%, transparent 52%, rgba(0,0,0,0.55) 100%);
  opacity:calc(0.55 + (1 - var(--develop)) * 0.35);
}

/* scintillement du projecteur (fort au début, s'apaise) */
.fx-flicker{
  background:rgba(255,244,225,0.025);
  opacity:calc((1 - var(--develop)) * 0.7);
  animation:flick .12s steps(2) infinite;
}
@keyframes flick{0%{opacity:.18}50%{opacity:.5}100%{opacity:.28}}

/* ============================================================
   3) PELLICULE DE PROGRESSION (liseré fin, piloté par main.js)
   ============================================================ */
.progress{top:0;height:3px;background:rgba(255,255,255,0.05);z-index:95;}
.progress__fill{
  background:linear-gradient(90deg,#7c756a 0%, #df9f4c 45%, #f4b942 100%);
}

/* ============================================================
   4) PROJECTEUR + PELLICULE (haut, permanent)
   ============================================================ */
.cine-top{
  position:fixed;top:0;left:0;width:100%;height:var(--top-h);z-index:80;
  display:flex;align-items:center;gap:16px;padding:0 18px;
  background:linear-gradient(180deg, #0d0a07 0%, #100c08 70%, #0a0806 100%);
  border-bottom:1px solid var(--hair);
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.9);
}
.cine-top::after{ /* fine bande perforée animée sous la barre = film qui défile */
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(90deg, rgba(233,182,103,0.0) 0 10px, rgba(233,182,103,0.35) 10px 13px, rgba(233,182,103,0.0) 13px 22px);
  background-size:22px 100%;
  animation:filmRun 1.1s linear infinite;
  opacity:.7;
}
@keyframes filmRun{from{background-position:0 0}to{background-position:-22px 0}}

/* — projecteur (gauche) — */
.cine-proj{position:relative;display:flex;align-items:center;flex:none;padding-right:8px;}
.proj-svg{width:128px;height:auto;display:block;overflow:visible;}
.reel__rim{fill:#1b1610;stroke:#6f6453;stroke-width:2.4;}
.reel__hub{fill:#3a3328;stroke:#8a7c63;stroke-width:1.6;}
.reel__spokes rect{fill:#4a4234;}
.reel__spokes{transform-box:fill-box;transform-origin:center;transform:rotate(var(--reel-rot,0deg));}
.proj-body rect{fill:#1c1610;stroke:#5d5343;stroke-width:1.6;}
.proj-lens-barrel{fill:#231c13;}
.proj-lens{fill:#0c0a07;stroke:var(--film-amber);stroke-width:2;}
.proj-lens-in{fill:var(--film-amber);opacity:.9;filter:drop-shadow(0 0 5px rgba(233,182,103,.8));}
.proj-foot{fill:#241d14;}
.proj-beam{fill:rgba(233,182,103,0.10);}
.cine-id{position:absolute;left:2px;bottom:6px;font-family:"Oswald",sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.cine-id--sub{bottom:-8px;font-weight:400;font-size:9px;color:var(--ink-faint);letter-spacing:.18em;}

/* — pellicule des scènes (centre) — */
.cine-strip{flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:hidden;position:relative;}
.cine-strip::before,.cine-strip::after{ /* rangées de perforations qui défilent */
  content:"";position:absolute;left:0;right:0;height:8px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,0.6) 9px 15px, transparent 15px 22px);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 22px);
          mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 22px);
  animation:filmRun 1.1s linear infinite;opacity:.5;
}
.cine-strip::before{top:9px;}
.cine-strip::after{bottom:9px;}
.cine-track{display:flex;align-items:center;gap:7px;height:100%;padding:0 4px;}

.cine-frame{
  position:relative;flex:none;width:64px;height:48px;border-radius:3px;cursor:pointer;
  background:#211b13;border:1px solid #3a3225;
  display:grid;place-items:center;text-decoration:none;
  filter:grayscale(1) brightness(.62);
  transition:filter .6s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
}
.cine-frame__cell{position:absolute;inset:4px;border-radius:2px;background:linear-gradient(135deg,#5a5043,#2c251b);opacity:.5;transition:opacity .6s ease,background .6s ease;}
.cine-frame__num{position:relative;z-index:2;font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;color:#e9e0cf;text-shadow:0 1px 2px rgba(0,0,0,.8);}
.cine-frame__tip{
  position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  font-family:"Oswald",sans-serif;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:#1c1610;border:1px solid var(--hair-strong);padding:4px 9px;border-radius:5px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:5;
}
.cine-frame:hover .cine-frame__tip{opacity:1;transform:translateX(-50%) translateY(0);}

/* développée = en couleur (par époque) */
.cine-frame.is-developed{filter:none;border-color:#6a5b3e;}
.cine-frame.is-developed .cine-frame__cell{opacity:1;}
.cine-frame[data-era="bw"].is-developed{filter:grayscale(.78) brightness(.95);}
.cine-frame[data-era="bw"].is-developed .cine-frame__cell{background:linear-gradient(135deg,#cfc6b5,#6f685b);}
.cine-frame[data-era="argentique"].is-developed .cine-frame__cell{background:linear-gradient(135deg,#e6b76a,#a6632d);}
.cine-frame[data-era="v2010"].is-developed .cine-frame__cell{background:linear-gradient(135deg,#f0c469,#3f7d86);}
.cine-frame[data-era="hd"].is-developed .cine-frame__cell{background:linear-gradient(135deg,#ffd66e,#e0772f 60%,#3aa0c4);}

/* image en cours = gate éclairée */
.cine-frame.is-current{
  transform:translateY(-1px) scale(1.12);
  border-color:var(--film-amber);
  box-shadow:0 0 0 2px var(--film-amber), 0 0 16px -2px rgba(233,182,103,.7);
}

/* — bobine réceptrice (droite) — */
.cine-take{flex:none;display:flex;align-items:center;padding-left:4px;}
.reel-svg{width:46px;height:46px;display:block;overflow:visible;}

/* ============================================================
   5) HERO — GÉNÉRIQUE D'OUVERTURE
   ============================================================ */
.hero{
  min-height:calc(100svh - var(--top-h));
  padding:clamp(36px,7vh,82px) 0 64px;
  background:
    radial-gradient(125% 90% at 78% 4%, rgba(233,182,103,0.12) 0%, transparent 46%),
    var(--ivory);
}
.hero__wrap{position:relative;z-index:2;}
.hero__title{color:var(--ink);text-shadow:0 2px 30px rgba(0,0,0,.6);}
.hero__title .je{color:var(--cold);}
.hero__title .nous{color:var(--warm);}
.hero__sub{color:var(--ink-soft);}
.hero__quote{border-left-color:var(--film-amber);}
.hero__quote .q{color:var(--ink);}
.pill{background:rgba(255,255,255,0.03);border-color:var(--hair-strong);color:var(--ink);}
.hero__leadertag{
  margin-top:clamp(30px,5vw,52px);font-family:"Oswald",sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:14px;
}
.hero__leadertag::before{content:"";width:46px;height:1px;background:var(--film-amber);}

/* amorce « académie » (compte à rebours) */
.leader{position:absolute;top:clamp(20px,5vh,54px);right:clamp(20px,5vw,60px);width:clamp(78px,11vw,128px);z-index:3;opacity:.9;}
.leader__svg{width:100%;height:auto;display:block;}
.leader__ring{fill:none;stroke:rgba(244,236,220,.5);stroke-width:1.5;}
.leader__ring2{fill:none;stroke:rgba(244,236,220,.22);stroke-width:1;}
.leader__cx{stroke:rgba(244,236,220,.3);stroke-width:1;}
.leader__sweep{fill:rgba(233,182,103,.18);transform-box:fill-box;transform-origin:66px 66px;transform-origin:center;animation:sweep .9s linear infinite;}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.leader__count{font-family:"Oswald",sans-serif;font-weight:700;font-size:46px;fill:var(--ink);text-anchor:middle;dominant-baseline:central;}
.scroll-cue{color:var(--ink-faint);}
.scroll-cue .line{background:var(--hair-strong);}

/* ============================================================
   6) CLAQUETTE / SLATE (en tête de scène)
   ============================================================ */
.slate{
  --slate-c:var(--accent);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,34px);padding-bottom:14px;
  border-bottom:1px solid var(--hair);
}
.slate[data-era="bw"]{--slate-c:#cfc6b5;}
.slate[data-era="argentique"]{--slate-c:#e6b76a;}
.slate[data-era="v2010"]{--slate-c:#7fb6c0;}
.slate[data-era="hd"]{--slate-c:#f4b942;}
.slate__sticks{
  width:54px;height:34px;flex:none;border-radius:3px;position:relative;transform-origin:left center;
  background:#11100e;border:1px solid #4a4234;overflow:hidden;
}
.slate__sticks::before{ /* le bras strié qui « claque » */
  content:"";position:absolute;left:0;right:0;top:0;height:11px;transform-origin:left center;
  background:repeating-linear-gradient(115deg,#f3ece0 0 7px,#11100e 7px 14px);
  transform:rotate(-26deg) translateY(-2px);transition:transform .45s cubic-bezier(.4,1.7,.5,1);
}
.slate__sticks::after{ /* base striée fixe */
  content:"";position:absolute;left:0;right:0;bottom:0;height:11px;
  background:repeating-linear-gradient(65deg,#f3ece0 0 7px,#11100e 7px 14px);
}
.is-visible .slate__sticks::before,.slate.is-visible .slate__sticks::before{transform:rotate(0) translateY(0);}
.slate__scene{font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-c);}
.slate__title{font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(16px,2vw,20px);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.slate__stock{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--hair);border-radius:5px;padding:4px 10px;background:rgba(0,0,0,.25);}

/* ============================================================
   7) DÉVELOPPEMENT COULEUR — les actes muets en N&B
   (uniquement hero + qui : aucune photo dessous → pas de bavure)
   ============================================================ */
section[data-era="bw"] .wrap{filter:grayscale(.92) contrast(1.05) brightness(.99);}
section[data-era="bw"] .leader,section[data-era="bw"] .slate{filter:none;} /* gardent leur traitement propre */

/* photos : étalonnage par époque (préfixe main → n'atteint jamais html[data-era]) */
.proof--real img{transition:filter .8s ease;}
main [data-era="bw"] .proof--real img{filter:grayscale(1) contrast(1.08) brightness(1.02);}
main [data-era="argentique"] .proof--real img{filter:sepia(.4) saturate(1.5) contrast(1.04) brightness(1.03) hue-rotate(-8deg);}
main [data-era="v2010"] .proof--real img{filter:saturate(1.12) contrast(1.14) brightness(1.0) hue-rotate(-3deg);}
main [data-era="hd"] .proof--real img{filter:saturate(1.05) contrast(1.03);}

/* cadre « photogramme » autour des preuves : perforations haut/bas */
.proof--real{background:#0e0b07;border-color:var(--hair-strong);position:relative;}
.proof--real::before,.proof--real::after{
  content:"";position:absolute;left:0;right:0;height:14px;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,0.75) 10px 17px, transparent 17px 26px);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 26px);
          mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 26px);
}
.proof--real::before{top:0;}
.proof--real::after{bottom:46px;}
.proof__tag::before{content:"▶ ";color:var(--film-amber);}

/* ============================================================
   8) RÉGLAGES SUR NOIR — composants validés (contraste + chaleur)
   ============================================================ */
.section{border-top-color:var(--hair);}
.section__num{color:var(--accent);}
.section__title{color:var(--ink);}
.eyebrow{color:var(--ink-soft);}
.eyebrow::before{background:var(--accent);}
.sphere{border-color:var(--hair);background:rgba(255,255,255,0.02);}
.sphere--soi{background:radial-gradient(120% 130% at 18% 12%, rgba(231,201,138,0.10) 0%, rgba(255,255,255,0.02) 72%);}
.sphere--rel{background:radial-gradient(120% 130% at 82% 12%, rgba(239,170,83,0.12) 0%, rgba(255,255,255,0.02) 72%);}
.sphere--soi{--sa:#e7c98a;}
.sphere--rel{--sa:#efaa53;}
.dim{background:rgba(255,255,255,0.025);}
.card,.driver{background:rgba(255,255,255,0.022);border-color:var(--hair);}
.belief__box.is-limit{background:rgba(231,201,138,0.06);border-color:rgba(231,201,138,0.22);}
.belief__box.is-limit .belief__q{color:#d8c9a6;}
.belief__box.is-help{background:rgba(239,170,83,0.08);border-color:rgba(239,170,83,0.28);}
.dstep__node,.jstep__dot{background:#16120c;}
.chain__node{background:rgba(255,255,255,0.025);}
.tool{background:color-mix(in oklab,var(--accent) 9%, rgba(255,255,255,0.015));}
.toolbox__head .tline,.driscoll__line,.journey__line{background:var(--hair);}
.tkmap__pt circle{fill:var(--hair-strong);}
.tkmap__pt.is-off circle{fill:var(--ink-faint);}
.bar__track{background:rgba(255,255,255,0.07);}
.mbti{background:color-mix(in oklab,var(--accent) 10%, rgba(255,255,255,0.015));}
.mbti__glyph{color:#16120c;}
.pistes{background:color-mix(in oklab,var(--accent) 8%, rgba(255,255,255,0.015));}
.sit-badge{color:#16120c;}
.conc{background:radial-gradient(120% 90% at 12% 100%, rgba(244,185,66,0.10) 0%, transparent 50%), var(--ivory);}
.conc__big .je{color:var(--cold);}
.conc__big .nous{color:var(--warm);}
.conc-arc__node{background:rgba(255,255,255,0.022);}
.conc-arc__node.is-soi .step{color:var(--cold);}
.conc-arc__node.is-rel .step{color:var(--warm);}
.foot{background:#08070a;border-top-color:var(--hair);}
.proof--real figcaption{background:#0c0a07;border-top-color:var(--hair);}
.proof--real{overflow:visible;}

/* ============================================================
   9) GÉNÉRIQUE DE FIN
   ============================================================ */
.fin{margin-top:clamp(54px,8vw,96px);text-align:center;padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--hair);}
.fin__mark{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(54px,11vw,128px);letter-spacing:.14em;color:var(--ink);line-height:1;
  text-shadow:0 4px 40px rgba(0,0,0,.7);}
.fin__next{margin-top:14px;font-family:"Oswald",sans-serif;font-weight:500;font-size:clamp(13px,1.6vw,16px);letter-spacing:.24em;text-transform:uppercase;color:var(--film-amber);}
.fin__credits{margin:clamp(30px,5vw,48px) auto 0;display:grid;gap:9px;max-width:60ch;}
.fin__credits span{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-faint);line-height:1.5;}
.fin__credits b{color:var(--ink-soft);font-weight:500;}

/* ============================================================
   9bis) ANIMATIONS CINÉMA SUPPLÉMENTAIRES
   ============================================================ */

/* — rideau d'ouverture : letterbox qui se rétracte au chargement — */
.letterbox{position:fixed;inset:0;z-index:130;pointer-events:none;}
.letterbox .lb{position:absolute;left:0;right:0;height:50.6%;background:#000;}
.lb--top{top:0;animation:lbTop 1.15s .1s cubic-bezier(.76,0,.24,1) both;}
.lb--bot{bottom:0;animation:lbBot 1.15s .1s cubic-bezier(.76,0,.24,1) both;}
@keyframes lbTop{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes lbBot{from{transform:translateY(0)}to{transform:translateY(101%)}}

/* — lampe du projecteur qui respire — */
.proj-lens-in{animation:lampPulse 3.4s ease-in-out infinite;}
@keyframes lampPulse{
  0%,100%{opacity:.7;filter:drop-shadow(0 0 4px rgba(233,182,103,.6))}
  50%{opacity:1;filter:drop-shadow(0 0 9px rgba(233,182,103,.95))}
}

/* — fenêtre éclairée du photogramme courant (gate flicker) — */
.cine-frame.is-current{animation:gateFlicker 2.4s ease-in-out infinite;}
@keyframes gateFlicker{
  0%,100%{box-shadow:0 0 0 2px var(--film-amber), 0 0 13px -2px rgba(233,182,103,.55)}
  45%{box-shadow:0 0 0 2px var(--film-amber), 0 0 22px 0 rgba(233,182,103,.92)}
  62%{box-shadow:0 0 0 2px var(--film-amber), 0 0 10px -3px rgba(233,182,103,.5)}
}

/* — claquette : flash blanc + sursaut du titre au « clap » — */
.slate{position:relative;}
.slate.is-visible::after{
  content:"";position:absolute;inset:-6px;border-radius:6px;background:#fff;opacity:0;
  mix-blend-mode:overlay;pointer-events:none;animation:clapFlash .55s .14s ease-out both;
}
@keyframes clapFlash{0%{opacity:0}16%{opacity:.55}100%{opacity:0}}
.slate.is-visible .slate__scene,.slate.is-visible .slate__title{animation:clapJolt .42s .12s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes clapJolt{0%{transform:translateX(-5px)}60%{transform:translateX(1px)}100%{transform:translateX(0)}}

/* — numéro de section : flash d'exposition à l'apparition — */
.section__num.is-visible{animation:exposeIn .7s ease-out both;}
@keyframes exposeIn{0%{filter:brightness(2.6)}100%{filter:brightness(1)}}

/* — générique de fin : « FIN » qui s'expose au net, « à suivre » qui clignote — */
.fin.is-visible .fin__mark{animation:finExpose 1.3s ease-out both;}
@keyframes finExpose{0%{opacity:0;filter:blur(14px) brightness(2)}55%{opacity:1}100%{filter:blur(0) brightness(1)}}
.fin__next{animation:nextBlink 2.4s steps(1,end) infinite;}
@keyframes nextBlink{0%,68%{opacity:1}69%,100%{opacity:.42}}

/* ============================================================
   10) RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  :root{--top-h:84px;}
  .proj-svg{width:104px;}
}
@media (max-width:760px){
  :root{--top-h:74px;}
  .cine-top{gap:10px;padding:0 10px;}
  .proj-svg{width:74px;}
  .cine-id{display:none;}
  .cine-take{display:none;}
  .cine-frame{width:50px;height:38px;}
  .cine-strip{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
  .cine-strip::-webkit-scrollbar{display:none;}
  body::before,body::after{display:none;}
  .slate__stock{margin-left:0;}
}

/* ============================================================
   11) MOUVEMENT RÉDUIT — on fige le mécanique, on garde le sens
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .fx-grain,.fx-dust,.fx-scratch,.fx-flicker,.cine-top::after,.cine-strip::before,.cine-strip::after,
  .leader__sweep,.proj-lens-in,.cine-frame.is-current,.fin__next,
  .slate.is-visible .slate__scene,.slate.is-visible .slate__title,.section__num.is-visible,.fin.is-visible .fin__mark{animation:none;}
  .reel__spokes{transform:none;}
  .slate__sticks::before{transform:rotate(0);}
  .letterbox{display:none;}
  .slate.is-visible::after{display:none;}
}

/* ============================================================
   12) IMPRESSION / PDF — document sombre propre, sans mécanique
   ============================================================ */
@media print{
  :root{--develop:1;}
  body{padding-top:0 !important;background:#0a0907 !important;}
  .film-fx,.cine-top,.leader,.scroll-cue,.progress{display:none !important;}
  body::before,body::after{display:none !important;}
  section[data-era="bw"] .wrap{filter:none !important;}
  main [data-era] .proof--real img{filter:none !important;}
  .slate,.fin{break-inside:avoid;page-break-inside:avoid;}
}