html,body{margin:0;min-height:100%;background:#07080b;color:#d7dbe0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}body{display:grid;place-items:center;overflow:hidden}.wrap{width:min(820px,90vw);border:1px solid #2a2e38;background:#0b0d12;box-shadow:0 0 70px #000;padding:38px;position:relative}.tag{color:#8e65ff;letter-spacing:.25em}.dim{color:#666b76}.hidden-select{color:#0b0d12;user-select:text}.hidden-select::selection{background:#8e65ff;color:#fff}.panel{margin-top:28px;padding:20px;border:1px solid #242833;background:#090a0e}input,button{font:inherit;background:#11141b;color:#e7e7ea;border:1px solid #34394a;padding:12px}button{cursor:pointer}button:hover{border-color:#9d7cff}.ok{color:#b8ff78}.bad{color:#ff7f9f}a{color:#9adfff}.scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.018) 4px)}.transmission{position:relative;overflow:hidden}.transmission:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(142,101,255,.04),transparent);transform:translateX(-100%);animation:sweep 5s linear infinite}.transmission-head{display:flex;justify-content:space-between;gap:12px;letter-spacing:.12em}.small{font-size:.88rem}.yt-fragments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.yt-frag{display:block;padding:11px 8px;border:1px solid #2e3443;background:#0c1017;color:#aee9ff;text-align:center;letter-spacing:.08em}.yt-frag.off{grid-column:1/-1;color:#ff7f9f}.url-seed{font-size:.9rem;color:#757b88;word-break:break-all}.blink{animation:blink 1s steps(1,end) infinite}@keyframes blink{50%{opacity:0}}@keyframes sweep{to{transform:translateX(100%)}}@media(max-width:650px){body{overflow:auto}.wrap{padding:24px}.yt-fragments{grid-template-columns:repeat(2,minmax(0,1fr))}.transmission-head{flex-direction:column}input{display:block;width:calc(100% - 26px);margin:8px 0}}

/* =========================================================
   SIGNAL//47 — CINÉMATIQUE FINALE
   Déclenchée uniquement après vérification des réponses côté serveur.
   ========================================================= */
.cinematic-open,.cinematic-open body{overflow:hidden!important}
.final-cinematic[hidden]{display:none!important}
.final-cinematic{position:fixed;inset:0;z-index:9999;background:#010302;color:#dfffd7;overflow:hidden;opacity:0;transition:opacity .35s ease;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.final-cinematic.playing{opacity:1}
.cinematic-bg{position:absolute;inset:-8%;background:radial-gradient(circle at 50% 52%,rgba(62,255,78,.20),transparent 36%),radial-gradient(circle at 50% 50%,#0b2614 0,#020704 42%,#000 78%);animation:bgPulse 2.2s ease-in-out infinite}
.cinematic-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(90,255,105,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(90,255,105,.12) 1px,transparent 1px);background-size:42px 42px;perspective:700px;transform:scale(1.25);animation:gridDrift 8s linear infinite}
.cinematic-frame-stack{position:absolute;inset:0;display:grid;place-items:center}
.cinematic-frame{position:absolute;width:min(100vw,100vh);height:min(100vw,100vh);object-fit:contain;opacity:0;filter:saturate(1.12) contrast(1.08) brightness(.84);will-change:transform,opacity,filter;transform:scale(1.13) rotate(-.35deg)}
.final-cinematic[data-stage="1"] .frame-1,.final-cinematic[data-stage="2"] .frame-2,.final-cinematic[data-stage="3"] .frame-3,.final-cinematic[data-stage="4"] .frame-4{opacity:1}
.final-cinematic[data-stage="1"] .frame-1{animation:frameEnter1 1.55s cubic-bezier(.16,.8,.18,1) both}
.final-cinematic[data-stage="2"] .frame-2{animation:frameEnter2 1.9s cubic-bezier(.12,.77,.2,1) both}
.final-cinematic[data-stage="3"] .frame-3{animation:frameEnter3 1.9s cubic-bezier(.12,.77,.2,1) both}
.final-cinematic[data-stage="4"] .frame-4{animation:frameFinal 1.6s cubic-bezier(.12,.8,.18,1) both}
.cinematic-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at center,rgba(202,255,195,.95),rgba(60,255,80,.24) 22%,transparent 55%);mix-blend-mode:screen}
.final-cinematic.impact .cinematic-flash{animation:impactFlash .48s ease-out}
.final-cinematic.impact .cinematic-frame-stack{animation:cameraHit .42s cubic-bezier(.12,.7,.2,1)}
.cinematic-noise{position:absolute;inset:-40%;pointer-events:none;opacity:.12;background-image:repeating-radial-gradient(circle at 20% 20%,rgba(255,255,255,.25) 0 1px,transparent 1px 5px);background-size:9px 9px;animation:noiseMove .18s steps(2) infinite;mix-blend-mode:screen}
.cinematic-hud{position:absolute;inset:0;pointer-events:none;padding:clamp(18px,3vw,42px);display:flex;flex-direction:column;justify-content:space-between;text-shadow:0 0 12px rgba(77,255,93,.55)}
.cinematic-topline{display:flex;justify-content:space-between;gap:18px;font-weight:700;letter-spacing:.16em;font-size:clamp(.75rem,1.5vw,1.05rem);color:#a8ff9e}
.cinematic-progress{position:absolute;left:8%;right:8%;top:calc(50% + min(43vw,43vh));height:2px;background:rgba(142,255,136,.16);overflow:hidden}
.cinematic-progress i{display:block;width:0;height:100%;background:#96ff8d;box-shadow:0 0 16px #63ff68}
.final-cinematic.playing .cinematic-progress i{animation:progressFill 8.25s linear forwards}
.cinematic-bottom{text-align:center;padding-bottom:clamp(18px,4vh,48px)}
.cinematic-bottom p{margin:0 auto 18px;font-size:clamp(.78rem,1.65vw,1.15rem);letter-spacing:.22em;color:#baffb1;text-transform:uppercase}
.final-access{pointer-events:none;display:inline-block;opacity:0;transform:translateY(18px) scale(.96);padding:15px 24px;border:1px solid rgba(155,255,146,.72);background:rgba(4,22,8,.78);color:#e7ffe4;text-decoration:none;letter-spacing:.12em;font-weight:700;box-shadow:0 0 0 rgba(71,255,85,0);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.8,.2,1),box-shadow .8s ease}
.final-access.visible{pointer-events:auto;opacity:1;transform:none;box-shadow:0 0 26px rgba(71,255,85,.34),inset 0 0 22px rgba(71,255,85,.06)}
.final-access.visible:hover{border-color:#fff;box-shadow:0 0 38px rgba(92,255,104,.56),inset 0 0 26px rgba(92,255,104,.11)}
.skip-cinematic{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:3;background:rgba(0,0,0,.4);border:1px solid rgba(160,255,155,.28);color:rgba(220,255,216,.62);padding:8px 11px;font-size:.72rem;letter-spacing:.12em;cursor:pointer;opacity:.7}
.skip-cinematic:hover{opacity:1;color:#fff;border-color:#8cff86}
.final-cinematic.complete .cinematic-bg{animation:finalGlow 1.8s ease-out both}
.final-cinematic.complete .frame-6{filter:saturate(1.18) contrast(1.08) brightness(1)}
@keyframes frameEnter1{0%{opacity:0;transform:scale(1.35) rotate(-1.1deg);filter:blur(10px) saturate(1.3) brightness(.55)}22%{opacity:1}100%{opacity:1;transform:scale(1.055) rotate(0);filter:blur(0) saturate(1.08) brightness(.86)}}
@keyframes frameEnter2{0%{opacity:0;transform:scale(1.20) translate3d(-1.6%,1.2%,0) rotate(.55deg);filter:blur(7px) brightness(.62)}18%{opacity:1}100%{opacity:1;transform:scale(1.035) translate3d(0,0,0);filter:blur(0) brightness(.9)}}
@keyframes frameEnter3{0%{opacity:0;transform:scale(1.17) translate3d(1.4%,-1%,0) rotate(-.45deg);filter:blur(6px) brightness(.66)}20%{opacity:1}100%{opacity:1;transform:scale(1.018);filter:blur(0) brightness(.94)}}
@keyframes frameFinal{0%{opacity:0;transform:scale(1.12);filter:blur(4px) brightness(.75)}28%{opacity:1;filter:blur(0) brightness(1.35)}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}
@keyframes impactFlash{0%{opacity:0}12%{opacity:.92}28%{opacity:.24}100%{opacity:0}}
@keyframes cameraHit{0%{transform:translate3d(0,0,0) scale(1)}20%{transform:translate3d(-4px,3px,0) scale(1.004)}38%{transform:translate3d(3px,-2px,0) scale(1.002)}65%{transform:translate3d(-1px,1px,0)}100%{transform:none}}
@keyframes progressFill{0%{width:0}18%{width:12%}47%{width:46%}75%{width:78%}100%{width:100%}}
@keyframes bgPulse{0%,100%{transform:scale(1);filter:brightness(.82)}50%{transform:scale(1.025);filter:brightness(1.08)}}
@keyframes finalGlow{0%{filter:brightness(1)}45%{filter:brightness(1.55)}100%{filter:brightness(1.05)}}
@keyframes gridDrift{to{transform:scale(1.25) translate3d(21px,21px,0)}}
@keyframes noiseMove{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(2%,-1%,0)}50%{transform:translate3d(-1%,2%,0)}75%{transform:translate3d(1%,1%,0)}100%{transform:translate3d(0,0,0)}}
@media(max-aspect-ratio:1/1){.cinematic-frame{width:100vw;height:100vw}.cinematic-progress{top:auto;bottom:112px}.cinematic-hud{padding:18px 14px}.cinematic-topline{font-size:.66rem}.skip-cinematic{bottom:10px;right:10px}.cinematic-bottom{padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){.cinematic-bg,.cinematic-grid,.cinematic-noise,.cinematic-frame,.cinematic-frame-stack,.cinematic-flash,.cinematic-progress i{animation:none!important}.cinematic-frame{transform:none!important}.final-cinematic[data-stage="4"] .frame-4{opacity:1}}


/* =========================================================
   SIGNAL//47 — CINÉMATIQUES DE PROGRESSION
   /intro/ : initialisation → transmission détectée
   /node47/ : fichier récupéré → route → transmission reconstruite
   ========================================================= */
.progress-cinematic[hidden]{display:none!important}
.progress-cinematic{position:fixed;inset:0;z-index:12000;background:#000;color:#dfffd7;overflow:hidden;opacity:0;transition:opacity .5s ease;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.progress-cinematic.playing{opacity:1}
.progress-cinematic.leaving{opacity:0}
.progress-cinematic-open,.progress-cinematic-open body{overflow:hidden!important}
.progress-cinematic-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(30,255,83,.16),transparent 48%),#010302;animation:progressBgPulse 2s ease-in-out infinite}
.progress-frame-stack{position:absolute;inset:0;display:grid;place-items:center}
.progress-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.06);filter:brightness(.62) contrast(1.08) blur(4px);will-change:transform,opacity,filter;transition:opacity .42s ease}
.progress-cinematic[data-stage="1"] .progress-frame-1,
.progress-cinematic[data-stage="2"] .progress-frame-2,
.progress-cinematic[data-stage="3"] .progress-frame-3,
.progress-cinematic[data-stage="4"] .progress-frame-4{opacity:1;animation:progressFrameIn 1.5s cubic-bezier(.16,.8,.2,1) both}
.progress-cinematic-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(100,255,126,.055) 4px),linear-gradient(90deg,transparent,rgba(56,255,88,.05),transparent);mix-blend-mode:screen;animation:progressScan 2.4s linear infinite}
.progress-cinematic-hud{position:absolute;z-index:4;left:50%;bottom:clamp(28px,7vh,72px);transform:translateX(-50%);width:min(760px,84vw);text-align:center;text-shadow:0 0 15px rgba(78,255,93,.72);pointer-events:none}
.progress-cinematic-hud span{display:block;font-weight:800;letter-spacing:.18em;font-size:clamp(.78rem,2vw,1.35rem);color:#caffc2;text-transform:uppercase;margin-bottom:14px}
.progress-cinematic-bar{height:3px;background:rgba(117,255,125,.16);overflow:hidden;border:1px solid rgba(117,255,125,.18)}
.progress-cinematic-bar i{display:block;height:100%;width:0;background:#8cff87;box-shadow:0 0 20px #5cff66}
.progress-cinematic.playing .progress-cinematic-bar i{animation:progressEntryBar 7.35s linear forwards}
.intro-cinematic.playing .progress-cinematic-bar i{animation-duration:4.3s}
.progress-cinematic.impact .progress-frame-stack{animation:progressCameraHit .36s ease-out}
.intro-page{margin:0;min-height:100vh;background:#000;overflow:hidden;display:block}
@keyframes progressFrameIn{0%{opacity:0;transform:scale(1.12) translate3d(0,1.5%,0);filter:brightness(.45) blur(9px)}18%{opacity:1;filter:brightness(1.3) blur(1px)}100%{opacity:1;transform:scale(1.015);filter:brightness(.92) contrast(1.08) blur(0)}}
@keyframes progressBgPulse{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.12)}}
@keyframes progressScan{0%{transform:translateY(-3%)}100%{transform:translateY(3%)}}
@keyframes progressEntryBar{from{width:0}to{width:100%}}
@keyframes progressCameraHit{0%{transform:none}25%{transform:translate3d(-3px,2px,0) scale(1.004)}55%{transform:translate3d(2px,-1px,0)}100%{transform:none}}

/* Deux nouveaux plans de la cinématique finale. */
.final-cinematic[data-stage="5"] .frame-5,
.final-cinematic[data-stage="6"] .frame-6{opacity:1;animation:frameFinalExtra 1.65s cubic-bezier(.12,.8,.18,1) both}
.final-cinematic[data-stage="5"] .frame-5,
.final-cinematic[data-stage="6"] .frame-6{width:100%;height:100%;object-fit:contain}
@keyframes frameFinalExtra{0%{opacity:0;transform:scale(1.10);filter:blur(7px) brightness(.58)}25%{opacity:1;filter:blur(0) brightness(1.35)}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}

@media(max-width:650px){
  .progress-cinematic-hud{bottom:28px;width:88vw}
  .progress-cinematic-hud span{font-size:.76rem;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){
  .progress-cinematic-bg,.progress-cinematic-scan,.progress-frame,.progress-frame-stack,.progress-cinematic-bar i{animation:none!important}
  .progress-frame{transform:none!important}
}
