/* Scenes animees de l'accueil (methode, Etre vu, Convertir, Engagement).
   Portees le 04/10/2026 depuis les pages de relecture validees par Raphael :
   05_Claude/001_Projets/Refonte-site/scenes-accueil/. Du CSS seul : la classe
   .live est posee par useSceneLive quand la scene entre a l'ecran ; sans elle,
   ou sous prefers-reduced-motion, la scene montre son etat final complet. */
.srp-scene{--border:#e7ddc9}
/* ---------- socle commun des scènes ---------- */
.srp-scene{position:relative;aspect-ratio:4/3;container-type:inline-size;overflow:hidden;border-radius:14px;border:2px solid var(--border);isolation:isolate}
.srp-scene *{box-sizing:border-box}
.srp-scene .w3{position:absolute;inset:0;perspective:150cqw;perspective-origin:50% 38%}
.srp-scene .p3{transform-style:preserve-3d}

/* =====================================================================
   SCÈNE 1 · CADRAGE
   Le gag : le brief « v2_final_FINAL.docx » se fait barrer, la fiche
   de cadrage passe devant et se remplit ligne à ligne, tampon « Cadré ».
   ===================================================================== */
.s1{background:radial-gradient(90% 85% at 62% 32%,#fffdf7 0%,#f5f1dc 58%,#ece4c4 100%)}
.s1-halo{position:absolute;width:70cqw;height:70cqw;left:40cqw;top:-18cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(206,0,38,.11),rgba(206,0,38,0))}
.s1-all{position:absolute;inset:0}
.s1-doc{position:absolute;left:5cqw;top:10cqw;width:44cqw;height:50cqw;transform:rotate(-8deg) translateZ(-8cqw)}
.s1-docin{position:absolute;inset:0;background:#fff;border:.3cqw solid var(--border);border-radius:2cqw;padding:4cqw 3.6cqw;box-shadow:0 2cqw 5cqw rgba(56,5,15,.12);opacity:.78}
.s1-file{position:relative;display:flex;align-items:center;gap:1.6cqw;font:500 2.7cqw/1 var(--font-body);color:var(--ink-500);white-space:nowrap}
.s1-file i{flex:none;width:4.2cqw;height:5.2cqw;border-radius:.6cqw;background:#2b5aa8;position:relative}
.s1-file i::after{content:"W";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 2.6cqw/1 var(--font-body);color:#fff}
.s1-rat{position:absolute;left:5cqw;right:-1cqw;top:50%;height:.9cqw;margin-top:-.45cqw;border-radius:1cqw;background:var(--red-500);transform:rotate(-4deg);transform-origin:0 50%}
.s1-lines{margin-top:4cqw;display:grid;gap:2.2cqw}
.s1-lines span{display:block;height:1.4cqw;border-radius:1cqw;background:#efe8d6}
.s1-lines span:nth-child(2){width:86%}.s1-lines span:nth-child(3){width:94%}.s1-lines span:nth-child(4){width:62%}
.s1-lines span:nth-child(5){width:90%}.s1-lines span:nth-child(6){width:74%}.s1-lines span:nth-child(7){width:40%}
.s1-cardpos{position:absolute;left:31cqw;top:9cqw;width:63cqw;transform:rotateY(-15deg) rotateX(7deg) translateZ(4cqw)}
.s1-float{transform-style:preserve-3d}
.s1-card{position:relative;background:#fff;border:.3cqw solid var(--border);border-radius:2.4cqw;padding:3.6cqw 4.2cqw 2.6cqw;box-shadow:0 1.1cqw 0 var(--cream-200),0 5cqw 8cqw rgba(56,5,15,.2)}
.s1-head{display:flex;align-items:center;gap:1.6cqw;font:700 2.5cqw/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-900)}
.s1-head b{display:inline-flex;align-items:center;justify-content:center;min-width:5cqw;height:3.6cqw;padding:0 1cqw;border-radius:9cqw;background:var(--red-500);color:#fff;font-size:2.2cqw;letter-spacing:.04em}
.s1-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2cqw;padding:2.1cqw 0;border-top:.25cqw dashed var(--border)}
.s1-head+.s1-row{margin-top:2.2cqw}
.s1-l{display:block;font:600 2.1cqw/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.s1-v{display:block;margin-top:1.1cqw;font:600 3.5cqw/1.15 var(--font-display);color:var(--ink-900);white-space:nowrap}
.s1-ok{width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--red-500);display:flex;align-items:center;justify-content:center;box-shadow:0 .8cqw 1.6cqw rgba(206,0,38,.3)}
.s1-ok svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s1-stamp{position:absolute;left:3cqw;bottom:6.5cqw;transform:translateZ(10cqw)}
.s1-stampin{position:relative;transform:rotate(-10deg)}
.s1-st{display:block;padding:1.2cqw 2.8cqw;border:.7cqw solid var(--red-500);border-radius:1.4cqw;font:800 5.4cqw/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--red-500);background:rgba(255,253,247,.82)}
.s1-ring{position:absolute;inset:-2cqw;border:.5cqw solid var(--red-500);border-radius:3cqw;opacity:0}

@media (prefers-reduced-motion: no-preference){
.s1.live .s1-halo{animation:s1-halo 10s ease-in-out infinite}
@keyframes s1-halo{0%,100%{transform:translate(0,0)}50%{transform:translate(-10cqw,6cqw)}}
.s1.live .s1-all{animation:s1-all 10s infinite both}
@keyframes s1-all{0%{opacity:0;transform:scale(.94)}4%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}98%,100%{opacity:0;transform:scale(.96) translateY(3cqw)}}
.s1.live .s1-docin{animation:s1-docin 10s infinite both}
@keyframes s1-docin{0%{opacity:0;transform:translateY(10cqw) rotate(6deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}5%{opacity:1;transform:none}12%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,1,.36,1)}20%,100%{opacity:.78;transform:translate(-2cqw,1cqw) scale(.96)}}
.s1.live .s1-rat{animation:s1-rat 10s infinite both}
@keyframes s1-rat{0%,7%{transform:rotate(-4deg) scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}11%,100%{transform:rotate(-4deg) scaleX(1)}}
.s1.live .s1-float{animation:s1-float 3.4s ease-in-out infinite alternate}
@keyframes s1-float{from{transform:translateY(0) rotateZ(0)}to{transform:translateY(-1.2cqw) rotateZ(-.6deg)}}
.s1.live .s1-card{animation:s1-card 10s infinite both}
@keyframes s1-card{0%,13%{opacity:0;transform:translateX(34cqw) rotateY(-50deg) translateZ(-10cqw);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22%,100%{opacity:1;transform:none}}
.s1.live .s1-row .s1-v{animation:10s infinite both;animation-timing-function:steps(14,end)}
.s1.live .s1-row:nth-child(2) .s1-v{animation-name:s1-v1}
.s1.live .s1-row:nth-child(3) .s1-v{animation-name:s1-v2}
.s1.live .s1-row:nth-child(4) .s1-v{animation-name:s1-v3}
.s1.live .s1-row:nth-child(5) .s1-v{animation-name:s1-v4}
@keyframes s1-v1{0%,24%{clip-path:inset(0 100% 0 0)}31%,100%{clip-path:inset(0 0 0 0)}}
@keyframes s1-v2{0%,34%{clip-path:inset(0 100% 0 0)}41%,100%{clip-path:inset(0 0 0 0)}}
@keyframes s1-v3{0%,44%{clip-path:inset(0 100% 0 0)}51%,100%{clip-path:inset(0 0 0 0)}}
@keyframes s1-v4{0%,54%{clip-path:inset(0 100% 0 0)}61%,100%{clip-path:inset(0 0 0 0)}}
.s1.live .s1-row .s1-ok{animation:10s infinite both}
.s1.live .s1-row:nth-child(2) .s1-ok{animation-name:s1-k1}
.s1.live .s1-row:nth-child(3) .s1-ok{animation-name:s1-k2}
.s1.live .s1-row:nth-child(4) .s1-ok{animation-name:s1-k3}
.s1.live .s1-row:nth-child(5) .s1-ok{animation-name:s1-k4}
@keyframes s1-k1{0%,31%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}34%,100%{transform:scale(1);opacity:1}}
@keyframes s1-k2{0%,41%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}44%,100%{transform:scale(1);opacity:1}}
@keyframes s1-k3{0%,51%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}54%,100%{transform:scale(1);opacity:1}}
@keyframes s1-k4{0%,61%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}64%,100%{transform:scale(1);opacity:1}}
.s1.live .s1-stampin{animation:s1-stamp 10s infinite both}
@keyframes s1-stamp{0%,66%{opacity:0;transform:rotate(-10deg) scale(2.6);animation-timing-function:cubic-bezier(.55,0,1,.45)}69%{opacity:1;transform:rotate(-10deg) scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}72%,100%{opacity:1;transform:rotate(-10deg) scale(1)}}
.s1.live .s1-ring{animation:s1-ring 10s infinite both}
@keyframes s1-ring{0%,68.5%{opacity:0;transform:scale(.8)}69%{opacity:.7;transform:scale(.9);animation-timing-function:cubic-bezier(.22,1,.36,1)}77%,100%{opacity:0;transform:scale(1.5)}}
.s1.live .s1-cardpos{animation:s1-push 10s infinite both}
@keyframes s1-push{0%,68%{transform:rotateY(-15deg) rotateX(7deg) translateZ(4cqw)}69.5%{transform:rotateY(-15deg) rotateX(7deg) translateZ(1cqw)}73%,100%{transform:rotateY(-15deg) rotateX(7deg) translateZ(4cqw)}}
}

/* =====================================================================
   SCÈNE 2 · PRODUCTION
   Le planning avance de jalon en jalon, le clap claque au tournage,
   les rushs tombent dans la timeline, la V1 sort en notification.
   ===================================================================== */
.s2{background:radial-gradient(85% 80% at 30% 20%,#5c0f16 0%,#38050f 55%,#15040a 100%)}
.s2-grid{position:absolute;inset:-10cqw;background-image:radial-gradient(rgba(255,253,247,.13) .3cqw,transparent .35cqw);background-size:5cqw 5cqw}
.s2-halo{position:absolute;width:64cqw;height:64cqw;right:-20cqw;bottom:-28cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(232,88,106,.32),rgba(232,88,106,0))}
.s2-all{position:absolute;inset:0}
.s2-planpos{position:absolute;left:6cqw;top:11cqw;width:80cqw;transform:rotateY(12deg) rotateX(10deg) translateZ(-4cqw)}
.s2-plan{position:relative;background:var(--cream-50);border-radius:2.2cqw;padding:3cqw 4cqw 3.2cqw;box-shadow:0 1cqw 0 var(--cream-300),0 5cqw 9cqw rgba(0,0,0,.45)}
.s2-cap{display:flex;align-items:center;justify-content:space-between;font:700 2.3cqw/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-900)}
.s2-rec{display:inline-flex;align-items:center;gap:1cqw;font:700 2cqw/1 var(--font-body);letter-spacing:.12em;color:var(--red-500)}
.s2-rec i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--red-500);box-shadow:0 0 0 .6cqw rgba(206,0,38,.18)}
.s2-track{position:relative;height:9cqw;margin:3.4cqw 2cqw 0}
.s2-rail,.s2-fill{position:absolute;left:0;right:0;top:2.1cqw;height:.8cqw;border-radius:1cqw}
.s2-rail{background:var(--cream-200)}
.s2-fill{background:var(--red-500);transform-origin:0 50%}
.s2-j{position:absolute;top:0;width:0}
.s2-j:nth-child(3){left:0}.s2-j:nth-child(4){left:33.333%}.s2-j:nth-child(5){left:66.666%}.s2-j:nth-child(6){left:100%}
.s2-dot{position:absolute;left:-2.5cqw;top:0;width:5cqw;height:5cqw;border-radius:50%;background:var(--red-500);border:.6cqw solid var(--cream-50);box-shadow:0 0 0 .3cqw var(--red-500);display:flex;align-items:center;justify-content:center}
.s2-dot svg{width:70%;height:70%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.s2-jl{position:absolute;top:6.4cqw;left:0;transform:translateX(-50%);font:600 2.3cqw/1 var(--font-body);color:var(--ink-700);white-space:nowrap}
.s2-pulse{position:absolute;left:-2.5cqw;top:0;width:5cqw;height:5cqw;border-radius:50%;border:.5cqw solid var(--red-500);opacity:0}
.s2-clap{position:absolute;left:33cqw;top:2.5cqw;width:10cqw;transform:translateZ(6cqw) rotate(-8deg)}
.s2-clapin{position:relative}
.s2-clap svg{display:block;width:100%;height:auto;overflow:visible}
.s2-bar{transform-box:fill-box;transform-origin:0% 100%}
.s2-tlpos{position:absolute;left:14cqw;top:40cqw;width:80cqw;transform:rotateY(12deg) rotateX(10deg) translateZ(8cqw)}
.s2-tl{position:relative;background:#fff;border-radius:2.2cqw;padding:2.8cqw 3.4cqw 3cqw;box-shadow:0 1cqw 0 var(--cream-300),0 6cqw 10cqw rgba(0,0,0,.5)}
.s2-tc{font:600 2.3cqw/1 var(--font-body);letter-spacing:.06em;color:var(--ink-500);font-variant-numeric:tabular-nums}
.s2-tc::after{content:"00:00:" counter(s2tc,decimal-leading-zero)}
@property --s2tc{syntax:'<integer>';inherits:true;initial-value:42}
.s2-tc{counter-reset:s2tc var(--s2tc)}
.s2-lane{position:relative;height:7.4cqw;margin-top:2.2cqw;border-radius:1.2cqw;background:var(--cream-100);display:flex;gap:.8cqw;padding:.9cqw}
.s2-clip{flex:1;border-radius:.8cqw;position:relative;overflow:hidden}
.s2-clip::after{content:"";position:absolute;left:12%;right:30%;bottom:18%;height:14%;border-radius:1cqw;background:rgba(255,255,255,.55)}
.s2-clip:nth-child(1){flex:1.3;background:linear-gradient(135deg,#ce0026,#8d001b)}
.s2-clip:nth-child(2){flex:.8;background:linear-gradient(135deg,#e8586a,#a3001f)}
.s2-clip:nth-child(3){flex:1.1;background:linear-gradient(135deg,#3a1e22,#1c0a0d)}
.s2-clip:nth-child(4){flex:.9;background:linear-gradient(135deg,#ef8585,#ce0026)}
.s2-audio{height:5.4cqw;margin-top:1.2cqw;border-radius:1.2cqw;background:var(--cream-100);display:flex;align-items:center;gap:.55cqw;padding:0 1.4cqw}
.s2-audio i{flex:1;height:calc(var(--h) * 1%);border-radius:1cqw;background:var(--red-300);transform-origin:50% 50%}
.s2-head{position:absolute;top:6.6cqw;bottom:2.4cqw;left:3.4cqw;width:.5cqw;border-radius:1cqw;background:var(--ink-900);transform:translateX(calc(73cqw - 3.4cqw - 3.4cqw - .5cqw))}
.s2-head::before{content:"";position:absolute;left:-1.1cqw;top:-1.6cqw;width:2.7cqw;height:2.2cqw;border-radius:.5cqw .5cqw 1.4cqw 1.4cqw;background:var(--ink-900)}
.s2-notif{position:absolute;right:11cqw;top:32cqw;transform:translateZ(10cqw)}
.s2-notifin{display:flex;align-items:center;gap:1.4cqw;padding:1.6cqw 2.4cqw 1.6cqw 1.6cqw;border-radius:9cqw;background:#fff;box-shadow:0 2cqw 5cqw rgba(0,0,0,.45);font:700 2.7cqw/1 var(--font-display);color:var(--ink-900);white-space:nowrap}
.s2-notifin i{width:4cqw;height:4cqw;border-radius:50%;background:var(--red-500);display:flex;align-items:center;justify-content:center}
.s2-notifin svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion: no-preference){
.s2.live .s2-grid{animation:s2-grid 10s linear infinite}
@keyframes s2-grid{from{transform:translate(0,0)}to{transform:translate(5cqw,5cqw)}}
.s2.live .s2-halo{animation:s2-halo 10s ease-in-out infinite}
@keyframes s2-halo{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12cqw,-6cqw) scale(1.15)}}
.s2.live .s2-all{animation:s2-all 10s infinite both}
@keyframes s2-all{0%{opacity:0}3%{opacity:1}92%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.75,0)}98%,100%{opacity:0;transform:translateY(4cqw) scale(.97)}}
.s2.live .s2-plan{animation:s2-plan 10s infinite both}
@keyframes s2-plan{0%{opacity:0;transform:translateY(-22cqw) rotateX(-30deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}7%,100%{opacity:1;transform:none}}
.s2.live .s2-tl{animation:s2-tl 10s infinite both}
@keyframes s2-tl{0%,4%{opacity:0;transform:translateY(30cqw) rotateX(30deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}12%,100%{opacity:1;transform:none}}
.s2.live .s2-fill{animation:s2-fill 10s infinite both}
@keyframes s2-fill{0%,12%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}34%{transform:scaleX(.3333);animation-timing-function:cubic-bezier(.65,0,.35,1)}56%{transform:scaleX(.6666);animation-timing-function:cubic-bezier(.65,0,.35,1)}78%,100%{transform:scaleX(1)}}
.s2.live .s2-dot{animation:10s infinite both}
.s2.live .s2-j:nth-child(3) .s2-dot{animation-name:s2-d1}
.s2.live .s2-j:nth-child(4) .s2-dot{animation-name:s2-d2}
.s2.live .s2-j:nth-child(5) .s2-dot{animation-name:s2-d3}
.s2.live .s2-j:nth-child(6) .s2-dot{animation-name:s2-d4}
@keyframes s2-d1{0%,11%{background:var(--cream-200);box-shadow:0 0 0 .3cqw var(--cream-300);transform:scale(.8)}12%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}15%,100%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1)}}
@keyframes s2-d2{0%,33%{background:var(--cream-200);box-shadow:0 0 0 .3cqw var(--cream-300);transform:scale(.8)}34%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}37%,100%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1)}}
@keyframes s2-d3{0%,55%{background:var(--cream-200);box-shadow:0 0 0 .3cqw var(--cream-300);transform:scale(.8)}56%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}59%,100%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1)}}
@keyframes s2-d4{0%,77%{background:var(--cream-200);box-shadow:0 0 0 .3cqw var(--cream-300);transform:scale(.8)}78%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}81%,100%{background:var(--red-500);box-shadow:0 0 0 .3cqw var(--red-500);transform:scale(1)}}
.s2.live .s2-dot svg{animation:10s infinite both}
.s2.live .s2-j:nth-child(3) .s2-dot svg{animation-name:s2-c1}
.s2.live .s2-j:nth-child(4) .s2-dot svg{animation-name:s2-c2}
.s2.live .s2-j:nth-child(5) .s2-dot svg{animation-name:s2-c3}
.s2.live .s2-j:nth-child(6) .s2-dot svg{animation-name:s2-c4}
@keyframes s2-c1{0%,12%{opacity:0}13%,100%{opacity:1}}
@keyframes s2-c2{0%,34%{opacity:0}35%,100%{opacity:1}}
@keyframes s2-c3{0%,56%{opacity:0}57%,100%{opacity:1}}
@keyframes s2-c4{0%,78%{opacity:0}79%,100%{opacity:1}}
.s2.live .s2-pulse{animation:10s infinite both}
.s2.live .s2-j:nth-child(3) .s2-pulse{animation-name:s2-p1}
.s2.live .s2-j:nth-child(4) .s2-pulse{animation-name:s2-p2}
.s2.live .s2-j:nth-child(5) .s2-pulse{animation-name:s2-p3}
.s2.live .s2-j:nth-child(6) .s2-pulse{animation-name:s2-p4}
@keyframes s2-p1{0%,12%{opacity:0;transform:scale(1)}12.5%{opacity:.8;transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}20%,100%{opacity:0;transform:scale(2.8)}}
@keyframes s2-p2{0%,34%{opacity:0;transform:scale(1)}34.5%{opacity:.8;transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}42%,100%{opacity:0;transform:scale(2.8)}}
@keyframes s2-p3{0%,56%{opacity:0;transform:scale(1)}56.5%{opacity:.8;transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}64%,100%{opacity:0;transform:scale(2.8)}}
@keyframes s2-p4{0%,78%{opacity:0;transform:scale(1)}78.5%{opacity:.8;transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}86%,100%{opacity:0;transform:scale(2.8)}}
.s2.live .s2-rec i{animation:s2-rec 10s infinite both}
@keyframes s2-rec{0%,20%{opacity:.25}21%,24%{opacity:1}25%,28%{opacity:.25}29%,32%{opacity:1}33%,36%{opacity:.25}37%,40%{opacity:1}41%,44%{opacity:.25}45%,100%{opacity:1}}
.s2.live .s2-clapin{animation:s2-clap 10s infinite both}
@keyframes s2-clap{0%,24%{opacity:0;transform:translateY(-14cqw) scale(.5) rotate(20deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}29%,48%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,1,.36,1)}53%,100%{opacity:1;transform:translate(-2cqw,1cqw) scale(.82)}}
.s2.live .s2-bar{animation:s2-bar 10s infinite both}
@keyframes s2-bar{0%,29%{transform:rotate(0)}31%{transform:rotate(-28deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}32.4%{transform:rotate(0)}34%{transform:rotate(-20deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}35.2%,100%{transform:rotate(0)}}
.s2.live .s2-clip{animation:10s infinite both}
.s2.live .s2-clip:nth-child(1){animation-name:s2-k1}
.s2.live .s2-clip:nth-child(2){animation-name:s2-k2}
.s2.live .s2-clip:nth-child(3){animation-name:s2-k3}
.s2.live .s2-clip:nth-child(4){animation-name:s2-k4}
@keyframes s2-k1{0%,37%{opacity:0;transform:translateY(-26cqw) rotate(-10deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}42%,100%{opacity:1;transform:none}}
@keyframes s2-k2{0%,40%{opacity:0;transform:translateY(-26cqw) rotate(8deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}45%,100%{opacity:1;transform:none}}
@keyframes s2-k3{0%,43%{opacity:0;transform:translateY(-26cqw) rotate(-6deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}48%,100%{opacity:1;transform:none}}
@keyframes s2-k4{0%,46%{opacity:0;transform:translateY(-26cqw) rotate(12deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}51%,100%{opacity:1;transform:none}}
.s2.live .s2-audio{animation:s2-audio 10s infinite both}
@keyframes s2-audio{0%,48%{opacity:0;transform:scaleY(.2)}52%,100%{opacity:1;transform:none}}
.s2.live .s2-audio i{animation:s2-wave .9s ease-in-out infinite alternate}
.s2.live .s2-audio i:nth-child(3n){animation-duration:.7s}
.s2.live .s2-audio i:nth-child(4n+1){animation-duration:1.1s}
.s2.live .s2-audio i:nth-child(5n+2){animation-duration:.6s}
@keyframes s2-wave{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.s2.live .s2-head{animation:s2-head 10s infinite both}
@keyframes s2-head{0%,54%{transform:translateX(0)}84%,100%{transform:translateX(calc(73cqw - 3.4cqw - 3.4cqw - .5cqw))}}
.s2.live .s2-tc{animation:s2-tc 10s infinite both}
@keyframes s2-tc{0%,54%{--s2tc:0}84%,100%{--s2tc:42}}
.s2.live .s2-notifin{animation:s2-notif 10s infinite both}
@keyframes s2-notif{0%,79%{opacity:0;transform:translateY(-6cqw) scale(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}83%,100%{opacity:1;transform:none}}
.s2.live .s2-tlpos{animation:s2-shake 10s infinite both}
@keyframes s2-shake{0%,31%{transform:rotateY(12deg) rotateX(10deg) translateZ(8cqw)}31.8%{transform:rotateY(12deg) rotateX(10deg) translateZ(8cqw) translateY(.8cqw)}33%,100%{transform:rotateY(12deg) rotateX(10deg) translateZ(8cqw)}}
}

/* =====================================================================
   SCÈNE 3 · LIVRAISON & ITÉRATION
   Le master se pose en 16:9 et lâche ses déclinaisons 9:16 et 1:1,
   deux retours arrivent et se règlent, V1 → V3, tampon « Prêt à publier ».
   ===================================================================== */
.s3{background:radial-gradient(90% 85% at 45% 30%,#fffdf7 0%,#fdece9 62%,#f9c9c0 100%)}
.s3-halo{position:absolute;width:56cqw;height:56cqw;left:-14cqw;bottom:-24cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(206,0,38,.14),rgba(206,0,38,0))}
.s3-all{position:absolute;inset:0}
.s3-stage{position:absolute;inset:0;transform:rotateX(8deg)}
.s3-c{position:absolute;transform-style:preserve-3d}
.s3-f{position:absolute;inset:0;border-radius:1.6cqw;background:#fff;padding:.9cqw;box-shadow:0 .9cqw 0 var(--cream-200),0 4cqw 7cqw rgba(56,5,15,.22)}
.s3-img{position:relative;width:100%;height:100%;border-radius:1cqw;overflow:hidden;background:linear-gradient(150deg,#ce0026 0%,#8d001b 55%,#38050f 100%)}
.s3-img::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-2.2cqw 0 0 -1.4cqw;border-left:3.8cqw solid rgba(255,255,255,.9);border-top:2.2cqw solid transparent;border-bottom:2.2cqw solid transparent}
.s3-img::after{content:"";position:absolute;left:18%;right:18%;bottom:12%;height:1.4cqw;border-radius:1cqw;background:rgba(255,255,255,.55)}
.s3-lab{position:absolute;left:50%;top:calc(100% + 1.8cqw);transform:translateX(-50%);padding:1cqw 1.8cqw;border-radius:9cqw;background:var(--ink-900);color:#fff;font:600 2.3cqw/1 var(--font-body);white-space:nowrap}
.s3-lab b{font:700 2.3cqw/1 var(--font-display);margin-right:.8cqw;color:var(--red-200)}
.s3-a{left:5cqw;top:24cqw;width:40cqw;height:22.5cqw;transform:rotateY(22deg) translateZ(-6cqw)}
.s3-b{left:40cqw;top:13cqw;width:21cqw;height:37.3cqw;transform:translateZ(6cqw)}
.s3-q{left:66cqw;top:23cqw;width:27cqw;height:27cqw;transform:rotateY(-22deg) translateZ(-4cqw)}
.s3-a .s3-img{background:linear-gradient(150deg,#3a1e22 0%,#1c0a0d 100%)}
.s3-q .s3-img{background:linear-gradient(150deg,#ef8585 0%,#ce0026 70%)}
.s3-v{position:absolute;right:-1.6cqw;top:-1.8cqw;width:7.4cqw;height:4.6cqw;transform:translateZ(3cqw)}
.s3-v span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:9cqw;background:var(--red-500);color:#fff;font:800 2.6cqw/1 var(--font-display);box-shadow:0 1cqw 2cqw rgba(206,0,38,.35)}
.s3-v span:not(.fin){opacity:0}
.s3-bub{position:absolute;transform:translateZ(18cqw)}
.s3-bubin{position:relative;display:flex;align-items:center;gap:1.2cqw;padding:1.5cqw 2cqw;border-radius:2cqw 2cqw 2cqw .4cqw;background:#fff;border:.3cqw solid var(--border);box-shadow:0 2cqw 4cqw rgba(56,5,15,.22);font:600 2.6cqw/1 var(--font-body);color:var(--ink-900);white-space:nowrap}
.s3-bubin i{flex:none;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--cream-200);display:flex;align-items:center;justify-content:center}
.s3-bubin i svg{width:64%;height:64%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.s3-b1{left:55cqw;top:17cqw}
.s3-b2{left:47cqw;top:40cqw}
.s3-bub{opacity:0}
.s3-cnt{position:absolute;left:5cqw;bottom:6cqw;display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 2cqw;border-radius:9cqw;background:#fff;border:.3cqw solid var(--border);font:600 2.4cqw/1 var(--font-body);color:var(--ink-700);white-space:nowrap}
.s3-cnt em{font-style:normal;font:700 2.1cqw/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.s3-n{position:relative;display:inline-block;width:9.6cqw;height:2.6cqw}
.s3-n span{position:absolute;left:0;top:0;font:800 2.6cqw/1 var(--font-display);color:var(--ink-900)}
.s3-n span.un{opacity:0}
.s3-pips{display:flex;gap:.7cqw}
.s3-pips i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--red-500)}
.s3-stamp{position:absolute;right:7cqw;bottom:8cqw;transform:translateZ(6cqw)}
.s3-stampin{position:relative;transform:rotate(-8deg)}
.s3-st{display:block;padding:1.1cqw 2.2cqw;border:.6cqw solid var(--red-500);border-radius:1.2cqw;font:800 3.3cqw/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--red-500);background:rgba(255,253,247,.9);white-space:nowrap}
.s3-ring{position:absolute;inset:-2cqw;border:.5cqw solid var(--red-500);border-radius:3cqw;opacity:0}
.s3-spark{position:absolute;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--red-500);opacity:0}

@media (prefers-reduced-motion: no-preference){
.s3.live .s3-halo{animation:s3-halo 10s ease-in-out infinite}
@keyframes s3-halo{0%,100%{transform:translate(0,0)}50%{transform:translate(14cqw,-8cqw)}}
.s3.live .s3-all{animation:s3-all 10s infinite both}
@keyframes s3-all{0%{opacity:0}3%{opacity:1}92%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.75,0)}98%,100%{opacity:0;transform:scale(.95) translateY(3cqw)}}
.s3.live .s3-stage{animation:s3-cam 10s ease-in-out infinite both}
@keyframes s3-cam{0%,14%{transform:rotateX(8deg) scale(1.04)}50%{transform:rotateX(10deg) rotateY(-4deg) scale(1)}100%{transform:rotateX(8deg) rotateY(2deg) scale(1)}}
.s3.live .s3-a{animation:s3-a 10s infinite both}
@keyframes s3-a{0%{opacity:0;transform:translate(25cqw,-4cqw) scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}6%,12%{opacity:1;transform:translate(25cqw,-4cqw) scale(1.4);animation-timing-function:cubic-bezier(.65,0,.35,1)}24%,100%{opacity:1;transform:rotateY(22deg) translateZ(-6cqw)}}
.s3.live .s3-b{animation:s3-b 10s infinite both}
@keyframes s3-b{0%,15%{opacity:0;transform:translate(-14cqw,10cqw) translateZ(-10cqw) scale(.3) rotate(-14deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}26%,100%{opacity:1;transform:translateZ(6cqw)}}
.s3.live .s3-q{animation:s3-q 10s infinite both}
@keyframes s3-q{0%,18%{opacity:0;transform:translate(-38cqw,6cqw) translateZ(-10cqw) scale(.3) rotate(12deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}29%,100%{opacity:1;transform:rotateY(-22deg) translateZ(-4cqw)}}
.s3.live .s3-float{animation:s3-float 3s ease-in-out infinite alternate}
.s3.live .s3-q .s3-float{animation-duration:3.6s;animation-delay:-1.2s}
.s3.live .s3-a .s3-float{animation-duration:4.2s;animation-delay:-2s}
@keyframes s3-float{from{transform:translateY(0)}to{transform:translateY(-1.1cqw)}}
.s3-float{position:absolute;inset:0;transform-style:preserve-3d}
.s3.live .s3-v span{animation:10s infinite both}
.s3.live .s3-v span.v1{animation-name:s3-v1}
.s3.live .s3-v span.v2{animation-name:s3-v2}
.s3.live .s3-v span.fin{animation-name:s3-v3}
@keyframes s3-v1{0%,30%{opacity:0;transform:scale(0)}33%{opacity:1;transform:scale(1.25);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}35%,49%{opacity:1;transform:scale(1)}51%,100%{opacity:0;transform:rotateX(90deg)}}
@keyframes s3-v2{0%,50%{opacity:0;transform:rotateX(-90deg)}52%{opacity:1;transform:scale(1.2);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}54%,69%{opacity:1;transform:scale(1)}71%,100%{opacity:0;transform:rotateX(90deg)}}
@keyframes s3-v3{0%,70%{opacity:0;transform:rotateX(-90deg)}72%{opacity:1;transform:scale(1.25);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}75%,100%{opacity:1;transform:scale(1)}}
.s3.live .s3-b1{animation:s3-b1 10s infinite both}
@keyframes s3-b1{0%,35%{opacity:0;transform:translateZ(18cqw) translateY(4cqw) scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}39%,46%{opacity:1;transform:translateZ(18cqw)}47.5%{opacity:1;transform:translateZ(18cqw) scale(1.06);animation-timing-function:cubic-bezier(.55,0,1,.45)}50%,100%{opacity:0;transform:translateZ(18cqw) translate(-6cqw,8cqw) scale(.2)}}
.s3.live .s3-b2{animation:s3-b2 10s infinite both}
@keyframes s3-b2{0%,55%{opacity:0;transform:translateZ(18cqw) translateY(4cqw) scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}59%,66%{opacity:1;transform:translateZ(18cqw)}67.5%{opacity:1;transform:translateZ(18cqw) scale(1.06);animation-timing-function:cubic-bezier(.55,0,1,.45)}70%,100%{opacity:0;transform:translateZ(18cqw) translate(-4cqw,-10cqw) scale(.2)}}
.s3.live .s3-b1 i{animation:s3-i1 10s infinite both}
.s3.live .s3-b2 i{animation:s3-i2 10s infinite both}
.s3.live .s3-b1 i svg{animation:s3-s1 10s infinite both}
.s3.live .s3-b2 i svg{animation:s3-s2 10s infinite both}
@keyframes s3-i1{0%,44%{background:var(--cream-200);transform:scale(1)}45%{background:var(--red-500);transform:scale(1.35);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}47%,100%{background:var(--red-500);transform:scale(1)}}
@keyframes s3-i2{0%,64%{background:var(--cream-200);transform:scale(1)}65%{background:var(--red-500);transform:scale(1.35);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}67%,100%{background:var(--red-500);transform:scale(1)}}
@keyframes s3-s1{0%,44.5%{opacity:0}45%,100%{opacity:1}}
@keyframes s3-s2{0%,64.5%{opacity:0}65%,100%{opacity:1}}
.s3.live .s3-cnt{animation:s3-cnt 10s infinite both}
@keyframes s3-cnt{0%,34%{opacity:0;transform:translateY(5cqw);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}38%,100%{opacity:1;transform:none}}
.s3.live .s3-n span.un{animation:s3-n1 10s infinite both}
.s3.live .s3-n span.deux{animation:s3-n2 10s infinite both}
@keyframes s3-n1{0%,54%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-2.4cqw)}}
@keyframes s3-n2{0%,54%{opacity:0;transform:translateY(2.4cqw)}56%,100%{opacity:1;transform:none}}
.s3.live .s3-pips i:nth-child(1){animation:s3-p1 10s infinite both}
.s3.live .s3-pips i:nth-child(2){animation:s3-p2 10s infinite both}
@keyframes s3-p1{0%,35%{background:var(--cream-200)}36%,100%{background:var(--red-500)}}
@keyframes s3-p2{0%,55%{background:var(--cream-200)}56%,100%{background:var(--red-500)}}
.s3.live .s3-stampin{animation:s3-stamp 10s infinite both}
@keyframes s3-stamp{0%,76%{opacity:0;transform:rotate(-8deg) scale(2.6);animation-timing-function:cubic-bezier(.55,0,1,.45)}79%{opacity:1;transform:rotate(-8deg) scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}82%,100%{opacity:1;transform:rotate(-8deg) scale(1)}}
.s3.live .s3-ring{animation:s3-ring 10s infinite both}
@keyframes s3-ring{0%,78.5%{opacity:0;transform:scale(.8)}79%{opacity:.7;transform:scale(.9);animation-timing-function:cubic-bezier(.22,1,.36,1)}87%,100%{opacity:0;transform:scale(1.5)}}
.s3.live .s3-spark{animation:10s infinite both}
.s3.live .s3-spark.k1{animation-name:s3-k1}
.s3.live .s3-spark.k2{animation-name:s3-k2}
.s3.live .s3-spark.k3{animation-name:s3-k3}
.s3.live .s3-spark.k4{animation-name:s3-k4}
@keyframes s3-k1{0%,79%{opacity:0;transform:translate(0,0) scale(1)}80%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}88%,100%{opacity:0;transform:translate(-9cqw,-7cqw) scale(.3)}}
@keyframes s3-k2{0%,79%{opacity:0;transform:translate(0,0) scale(1)}80%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}88%,100%{opacity:0;transform:translate(8cqw,-9cqw) scale(.3)}}
@keyframes s3-k3{0%,79%{opacity:0;transform:translate(0,0) scale(1)}80%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}88%,100%{opacity:0;transform:translate(-12cqw,3cqw) scale(.3)}}
@keyframes s3-k4{0%,79%{opacity:0;transform:translate(0,0) scale(1)}80%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}88%,100%{opacity:0;transform:translate(3cqw,-12cqw) scale(.3)}}
}
.srp-scene .chk{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   SCÈNE 4 · ÊTRE VU
   Le fil défile sur des posts de rituel, s'arrête sur la vidéo, les
   sous-titres s'écrivent ; quelqu'un qui ne vous connaissait pas s'abonne.
   ===================================================================== */
.s4{background:radial-gradient(90% 85% at 55% 30%,#fffdf7 0%,#fdece9 60%,#f9c9c0 100%)}
.s4-halo{position:absolute;width:60cqw;height:60cqw;left:-16cqw;top:-20cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(206,0,38,.12),rgba(206,0,38,0))}
.s4-all{position:absolute;inset:0}
.s4-phonepos{position:absolute;left:34cqw;top:4.5cqw;width:32cqw;height:66cqw;transform:rotateY(-16deg) rotateX(6deg)}
.s4-float{position:absolute;inset:0;transform-style:preserve-3d}
.s4-phone{position:absolute;inset:0;border-radius:5cqw;background:#1c0a0d;padding:1.5cqw;box-shadow:0 1.2cqw 0 #3a1e22,0 6cqw 9cqw rgba(0,0,0,.24)}
.s4-screen{position:relative;width:100%;height:100%;border-radius:3.6cqw;overflow:hidden;background:#f1ede6}
.s4-feed{position:absolute;left:1.3cqw;right:1.3cqw;top:0;transform:translateY(-48.6cqw)}
.s4-post{background:#fff;border-radius:1.6cqw;padding:1.6cqw;margin-top:1.4cqw}
.s4-post.t{height:15cqw}
.s4-who{display:flex;align-items:center;gap:1.2cqw}
.s4-who i{flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--cream-300)}
.s4-who span{display:block;height:1.1cqw;width:11cqw;border-radius:1cqw;background:#e9e2d2}
.s4-who span+span{width:7cqw;margin-top:.7cqw;background:#f1ece0}
.s4-say{margin-top:1.4cqw;font:600 1.8cqw/1.2 var(--font-body);color:var(--ink-900);white-space:nowrap}
.s4-bar{display:block;height:1cqw;border-radius:1cqw;background:#efe9db;margin-top:1.1cqw}
.s4-bar.c{width:70%}
.s4-post.v{padding-bottom:1.8cqw}
.s4-who.me i{background:var(--red-500)}
.s4-vid{position:relative;height:33cqw;margin-top:1.2cqw;border-radius:1.2cqw;overflow:hidden;background:linear-gradient(165deg,#5c0f16,#38050f)}
.s4-hd{position:absolute;left:50%;top:6cqw;width:9cqw;height:9cqw;margin-left:-4.5cqw;border-radius:50%;background:rgba(236,228,196,.88)}
.s4-bd{position:absolute;left:50%;bottom:-5cqw;width:21cqw;height:18cqw;margin-left:-10.5cqw;border-radius:50%;background:rgba(236,228,196,.88)}
.s4-sub{position:absolute;left:1.4cqw;right:1.4cqw;bottom:2cqw;padding:1cqw .8cqw;border-radius:1cqw;background:rgba(28,10,13,.82);text-align:center;font:700 2.1cqw/1.3 var(--font-display);color:#fff}
.s4-sub b{font-weight:800;color:#fff;background:var(--red-500);padding:0 .6cqw;border-radius:.6cqw}
.s4-prog{height:.8cqw;margin-top:1.3cqw;border-radius:1cqw;background:#ece4c4;overflow:hidden}
.s4-progf{height:100%;background:var(--red-500);transform-origin:0 50%}
.s4-viewer{position:absolute;left:4cqw;top:15cqw;transform:translateZ(12cqw)}
.s4-vin{width:30cqw;padding:2cqw;border-radius:2cqw;background:#fff;border:.3cqw solid var(--border);box-shadow:0 2.4cqw 5cqw rgba(0,0,0,.12)}
.s4-vtop{display:flex;align-items:center;gap:1.4cqw}
.s4-vtop i{flex:none;width:5.4cqw;height:5.4cqw;border-radius:50%;background:var(--cream-200);display:flex;align-items:center;justify-content:center;font:800 2.8cqw/1 var(--font-display);color:var(--ink-500);font-style:normal}
.s4-vtop em{font:700 1.9cqw/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-style:normal}
.s4-vs{position:relative;height:6.6cqw;margin-top:1.6cqw}
.s4-vs span{position:absolute;left:0;top:0;font:700 2.7cqw/1.22 var(--font-display);color:var(--ink-900)}
.s4-vs span.a{opacity:0}
.s4-vs span.b{color:var(--red-500);display:flex;align-items:center;gap:1cqw}
.s4-vs span.b svg{width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--red-500);padding:.6cqw}
.s4-follow{position:absolute;left:68cqw;top:47cqw;transform:translateZ(14cqw)}
.s4-fin{position:relative;width:20cqw;height:6.6cqw}
.s4-fin span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1cqw;border-radius:9cqw;font:700 2.8cqw/1 var(--font-display);box-shadow:0 2cqw 4cqw rgba(56,5,15,.22)}
.s4-fin .a{background:#fff;color:var(--ink-900);border:.35cqw solid var(--ink-900);opacity:0}
.s4-fin .b{background:var(--red-500);color:#fff}
.s4-fin .b svg{width:3cqw;height:3cqw}
.s4-cur{position:absolute;left:12cqw;top:4cqw;width:5cqw;transform:translateZ(16cqw)}
.s4-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .5cqw .8cqw rgba(0,0,0,.3))}

@media (prefers-reduced-motion: no-preference){
.s4.live .s4-halo{animation:s4-halo 10s ease-in-out infinite}
@keyframes s4-halo{0%,100%{transform:none}50%{transform:translate(12cqw,8cqw)}}
.s4.live .s4-all{animation:sx-all 10s infinite both}
@keyframes sx-all{0%{opacity:0;transform:scale(.95)}3%{opacity:1;transform:none}92%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.75,0)}98%,100%{opacity:0;transform:scale(.96) translateY(3cqw)}}
.s4.live .s4-float{animation:s4-float 3.2s ease-in-out infinite alternate}
@keyframes s4-float{from{transform:none}to{transform:translateY(-1.2cqw) rotateZ(.6deg)}}
.s4.live .s4-feed{animation:s4-feed 10s infinite both}
@keyframes s4-feed{0%,4%{transform:translateY(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}11%,13%{transform:translateY(-17cqw);animation-timing-function:cubic-bezier(.22,1,.36,1)}20%,22%{transform:translateY(-36cqw);animation-timing-function:cubic-bezier(.22,1,.36,1)}28%{transform:translateY(-51.6cqw);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}32%,100%{transform:translateY(-48.6cqw)}}
.s4.live .s4-sub span{animation:10s infinite both}
.s4.live .s4-sub .w1{animation-name:s4-w1}.s4.live .s4-sub .w2{animation-name:s4-w2}.s4.live .s4-sub .w3s{animation-name:s4-w3}.s4.live .s4-sub .w4{animation-name:s4-w4}.s4.live .s4-sub .w5{animation-name:s4-w5}
@keyframes s4-w1{0%,35%{opacity:0;transform:translateY(1cqw)}37%,100%{opacity:1;transform:none}}
@keyframes s4-w2{0%,40%{opacity:0;transform:translateY(1cqw)}42%,100%{opacity:1;transform:none}}
@keyframes s4-w3{0%,45%{opacity:0;transform:translateY(1cqw)}47%,100%{opacity:1;transform:none}}
@keyframes s4-w4{0%,50%{opacity:0;transform:translateY(1cqw)}52%,100%{opacity:1;transform:none}}
@keyframes s4-w5{0%,55%{opacity:0;transform:translateY(1cqw)}57%,100%{opacity:1;transform:none}}
.s4.live .s4-progf{animation:s4-prog 10s infinite both}
@keyframes s4-prog{0%,33%{transform:scaleX(0)}88%,100%{transform:scaleX(1)}}
.s4.live .s4-vin{animation:s4-vin 10s infinite both}
@keyframes s4-vin{0%,8%{opacity:0;transform:translateX(-10cqw) scale(.6) rotate(-6deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}14%,100%{opacity:1;transform:none}}
.s4.live .s4-vs .a{animation:s4-va 10s infinite both}
.s4.live .s4-vs .b{animation:s4-vb 10s infinite both}
@keyframes s4-va{0%,69%{opacity:1;transform:none}71%,100%{opacity:0;transform:translateY(-3cqw)}}
@keyframes s4-vb{0%,69%{opacity:0;transform:translateY(3cqw)}71%{opacity:1;transform:scale(1.12);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}74%,100%{opacity:1;transform:none}}
.s4.live .s4-fin{animation:s4-fin 10s infinite both}
@keyframes s4-fin{0%,56%{opacity:0;transform:scale(.4) translateY(4cqw);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}61%,66%{opacity:1;transform:none}67.5%{transform:scale(.88)}70%,100%{opacity:1;transform:none}}
.s4.live .s4-fin .a{animation:s4-fa 10s infinite both}
.s4.live .s4-fin .b{animation:s4-fb 10s infinite both}
@keyframes s4-fa{0%,67.5%{opacity:1}68.5%,100%{opacity:0}}
@keyframes s4-fb{0%,67.5%{opacity:0}68.5%,100%{opacity:1}}
.s4.live .s4-cur{animation:s4-cur 10s infinite both}
@keyframes s4-cur{0%,58%{opacity:0;transform:translateZ(16cqw) translate(14cqw,16cqw)}60%{opacity:1;transform:translateZ(16cqw) translate(14cqw,16cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}66%{transform:translateZ(16cqw)}67.5%{transform:translateZ(16cqw) scale(.85)}69%,100%{opacity:1;transform:translateZ(16cqw)}}
}

/* =====================================================================
   SCÈNE 5 · CONVERTIR
   Le prospect hésite sur une objection, une réponse vidéo arrive et
   s'attache à sa fiche, la fiche passe dans « Signé ».
   ===================================================================== */
.s5{background:radial-gradient(85% 80% at 70% 15%,#5c0f16 0%,#38050f 55%,#15040a 100%)}
.s5-grid{position:absolute;inset:-10cqw;background-image:radial-gradient(rgba(255,253,247,.12) .3cqw,transparent .35cqw);background-size:5cqw 5cqw}
.s5-all{position:absolute;inset:0}
.s5-boardpos{position:absolute;left:5cqw;top:11cqw;width:90cqw;transform:rotateX(16deg) rotateY(-9deg)}
.s5-board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;padding:2.4cqw;border-radius:2.4cqw;background:rgba(255,253,247,.07);border:.3cqw solid rgba(255,253,247,.14);box-shadow:0 6cqw 10cqw rgba(0,0,0,.45)}
.s5-col{display:flex;flex-direction:column;gap:1.6cqw;padding:1.8cqw;min-height:48cqw;border-radius:1.6cqw;background:rgba(255,253,247,.06)}
.s5-h{display:flex;align-items:center;justify-content:space-between;height:2.4cqw;font:700 2cqw/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-100);white-space:nowrap}
.s5-h i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:rgba(255,253,247,.25)}
.s5-col.win .s5-h{color:#fff}
.s5-col.win .s5-h i{background:var(--red-500);box-shadow:0 0 0 .7cqw rgba(206,0,38,.3)}
.s5-g{height:9.4cqw;border-radius:1.2cqw;background:rgba(255,253,247,.11);padding:1.6cqw}
.s5-g span{display:block;height:1.1cqw;width:70%;border-radius:1cqw;background:rgba(255,253,247,.22)}
.s5-g span+span{width:45%;margin-top:1cqw;background:rgba(255,253,247,.13)}
.s5-slot{height:9.4cqw}
.s5-deal{position:absolute;left:62.4cqw;top:8.2cqw;width:23.4cqw;transform-style:preserve-3d}
.s5-din{padding:1.5cqw 1.6cqw;border-radius:1.2cqw;background:#fff;box-shadow:0 1.6cqw 3cqw rgba(0,0,0,.45)}
.s5-dt{font:700 2.4cqw/1.1 var(--font-display);color:var(--ink-900);white-space:nowrap}
.s5-ds{margin-top:.6cqw;font:500 1.9cqw/1.1 var(--font-body);color:var(--ink-500);white-space:nowrap}
.s5-drow{display:flex;align-items:center;justify-content:space-between;margin-top:1.3cqw}
.s5-st{position:relative;width:10.6cqw;height:3.2cqw}
.s5-st span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.6cqw;border-radius:9cqw;font:700 1.8cqw/1 var(--font-body);white-space:nowrap}
.s5-st .a{background:var(--cream-100);color:var(--ink-500);opacity:0}
.s5-st .b{background:var(--red-500);color:#fff}
.s5-st .b svg{width:2.2cqw;height:2.2cqw}
.s5-att{display:flex;align-items:center;gap:.6cqw;padding:.6cqw 1cqw;border-radius:9cqw;background:var(--ink-900);color:#fff;font:700 1.7cqw/1 var(--font-body);white-space:nowrap}
.s5-att i{width:0;height:0;border-left:1.3cqw solid #fff;border-top:.8cqw solid transparent;border-bottom:.8cqw solid transparent}
.s5-obj{position:absolute;left:25cqw;top:-5.5cqw;transform:translateZ(12cqw);opacity:0}
.s5-oin{display:flex;align-items:center;gap:1.2cqw;padding:1.5cqw 2cqw;border-radius:2cqw 2cqw 2cqw .4cqw;background:#fff;font:600 2.4cqw/1 var(--font-body);color:var(--ink-900);white-space:nowrap;box-shadow:0 2cqw 4cqw rgba(0,0,0,.4)}
.s5-oin i{flex:none;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--cream-200);display:flex;align-items:center;justify-content:center}
.s5-oin i svg{width:64%;height:64%;opacity:0}
.s5-vid{position:absolute;left:66cqw;top:22cqw;width:20cqw;height:35.5cqw;transform:translateZ(20cqw) rotate(4deg);opacity:0}
.s5-vf{position:absolute;inset:0;padding:.8cqw;border-radius:1.6cqw;background:#fff;box-shadow:0 3cqw 6cqw rgba(0,0,0,.5)}
.s5-vi{position:relative;width:100%;height:100%;border-radius:1cqw;overflow:hidden;background:linear-gradient(160deg,#ce0026,#5c0f16)}
.s5-vi::before{content:"";position:absolute;left:50%;top:40%;margin:-2cqw 0 0 -1.2cqw;border-left:3.4cqw solid rgba(255,255,255,.92);border-top:2cqw solid transparent;border-bottom:2cqw solid transparent}
.s5-vl{position:absolute;left:1.4cqw;right:1.4cqw;bottom:4.4cqw;font:800 2.3cqw/1.2 var(--font-display);color:#fff;text-align:center}
.s5-vp{position:absolute;left:1.4cqw;right:1.4cqw;bottom:2cqw;height:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.3);overflow:hidden}
.s5-vp i{display:block;height:100%;background:#fff;transform-origin:0 50%}
.s5-spark{position:absolute;width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--red-300);opacity:0;left:72cqw;top:12cqw;transform:translateZ(14cqw)}

@media (prefers-reduced-motion: no-preference){
.s5.live .s5-grid{animation:s5-grid 10s linear infinite}
@keyframes s5-grid{to{transform:translate(-5cqw,5cqw)}}
.s5.live .s5-all{animation:sx-all 10s infinite both}
.s5.live .s5-board{animation:s5-board 10s infinite both}
@keyframes s5-board{0%{opacity:0;transform:translateY(16cqw) rotateX(-24deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}8%,100%{opacity:1;transform:none}}
.s5.live .s5-deal{animation:s5-deal 10s infinite both}
@keyframes s5-deal{0%,4%{opacity:0;transform:translate(-29.1cqw,11cqw) scale(.6)}9%{opacity:1;transform:translate(-29.1cqw,11cqw);animation-timing-function:step-end}60%{transform:translate(-29.1cqw,11cqw);animation-timing-function:cubic-bezier(.22,1,.36,1)}63%{transform:translate(-29.1cqw,9cqw) translateZ(8cqw) rotate(-4deg) scale(1.08);animation-timing-function:cubic-bezier(.65,0,.35,1)}70%{transform:translateZ(8cqw) rotate(3deg) scale(1.08);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}74%,100%{opacity:1;transform:none}}
.s5.live .s5-obj{animation:s5-obj 10s infinite both}
@keyframes s5-obj{0%,11%{opacity:0;transform:translateZ(12cqw) translateY(3cqw) scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}15%,53%{opacity:1;transform:translateZ(12cqw)}55%{opacity:1;transform:translateZ(12cqw) scale(1.06);animation-timing-function:cubic-bezier(.55,0,1,.45)}58%,100%{opacity:0;transform:translateZ(12cqw) translate(4cqw,8cqw) scale(.2)}}
.s5.live .s5-oin i{animation:s5-oi 10s infinite both}
.s5.live .s5-oin i svg{animation:s5-os 10s infinite both}
@keyframes s5-oi{0%,51%{background:var(--cream-200);transform:none}52%{background:var(--red-500);transform:scale(1.35);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}54%,100%{background:var(--red-500);transform:none}}
@keyframes s5-os{0%,51.5%{opacity:0}52%,100%{opacity:1}}
.s5.live .s5-vid{animation:s5-vid 10s infinite both}
@keyframes s5-vid{0%,20%{opacity:0;transform:translateZ(20cqw) translateX(24cqw) rotate(18deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}27%,52%{opacity:1;transform:translateZ(20cqw) rotate(4deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}58%,100%{opacity:0;transform:translateZ(20cqw) translate(-30cqw,2cqw) rotate(-10deg) scale(.12)}}
.s5.live .s5-vp i{animation:s5-vp 10s infinite both}
@keyframes s5-vp{0%,28%{transform:scaleX(0)}51%,100%{transform:scaleX(1)}}
.s5.live .s5-att{animation:s5-att 10s infinite both}
@keyframes s5-att{0%,57%{opacity:0;transform:scale(0)}59%{opacity:1;transform:scale(1.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}61%,100%{opacity:1;transform:none}}
.s5.live .s5-st .a{animation:s5-sa 10s infinite both}
.s5.live .s5-st .b{animation:s5-sb 10s infinite both}
@keyframes s5-sa{0%,71%{opacity:1}72%,100%{opacity:0}}
@keyframes s5-sb{0%,71%{opacity:0;transform:scale(.6)}73%{opacity:1;transform:scale(1.2);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}75%,100%{opacity:1;transform:none}}
.s5.live .s5-col.win .s5-h i{animation:s5-win 10s infinite both}
@keyframes s5-win{0%,71%{background:rgba(255,253,247,.25);box-shadow:0 0 0 0 rgba(206,0,38,0)}73%{background:var(--red-500);box-shadow:0 0 0 1.6cqw rgba(206,0,38,.35)}78%,100%{background:var(--red-500);box-shadow:0 0 0 .7cqw rgba(206,0,38,.3)}}
.s5.live .s5-spark{animation:10s infinite both}
.s5.live .s5-spark.k1{animation-name:s5-k1}.s5.live .s5-spark.k2{animation-name:s5-k2}.s5.live .s5-spark.k3{animation-name:s5-k3}.s5.live .s5-spark.k4{animation-name:s5-k4}
@keyframes s5-k1{0%,72%{opacity:0;transform:translateZ(14cqw)}73%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}82%,100%{opacity:0;transform:translateZ(14cqw) translate(-10cqw,-7cqw) scale(.3)}}
@keyframes s5-k2{0%,72%{opacity:0;transform:translateZ(14cqw)}73%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}82%,100%{opacity:0;transform:translateZ(14cqw) translate(9cqw,-8cqw) scale(.3)}}
@keyframes s5-k3{0%,72%{opacity:0;transform:translateZ(14cqw)}73%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}82%,100%{opacity:0;transform:translateZ(14cqw) translate(13cqw,4cqw) scale(.3)}}
@keyframes s5-k4{0%,72%{opacity:0;transform:translateZ(14cqw)}73%{opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}82%,100%{opacity:0;transform:translateZ(14cqw) translate(-6cqw,9cqw) scale(.3)}}
}

/* =====================================================================
   SCÈNE 6 · ENGAGEMENT
   Jour J le clap, J+1 et J+2 le travail, la V1 tombe dans J+3,
   tampon « Dans les temps ».
   ===================================================================== */
.s6{background:radial-gradient(90% 85% at 40% 25%,#fffdf7 0%,#f5f1dc 60%,#ece4c4 100%)}
.s6-halo{position:absolute;width:60cqw;height:60cqw;right:-18cqw;top:-22cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(206,0,38,.12),rgba(206,0,38,0))}
.s6-all{position:absolute;inset:0}
.s6-calpos{position:absolute;left:5cqw;top:9cqw;width:90cqw;transform:rotateX(14deg) rotateY(-8deg)}
.s6-cal{position:relative;padding:2.4cqw;border-radius:2.4cqw;background:#fff;border:.3cqw solid var(--border);box-shadow:0 1.2cqw 0 var(--cream-200),0 6cqw 9cqw rgba(56,5,15,.2)}
.s6-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6cqw}
.s6-d{position:relative;height:38cqw;border-radius:1.6cqw;background:var(--cream-50);border:.25cqw solid var(--border);padding:1.6cqw;display:flex;flex-direction:column;gap:1.3cqw;align-items:flex-start}
.s6-dh{font:800 3.2cqw/1 var(--font-display);color:var(--ink-900)}
.s6-dl{font:600 1.9cqw/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);margin-top:-.4cqw}
.s6-d.j .s6-dh{color:var(--red-500)}
.s6-chip{padding:1cqw 1.5cqw;border-radius:9cqw;background:var(--cream-100);border:.25cqw solid var(--border);font:600 2.1cqw/1 var(--font-body);color:var(--ink-700);white-space:nowrap}
.s6-clap{width:10cqw;margin-top:1cqw}
.s6-clap svg{display:block;width:100%;height:auto;overflow:visible}
.s6-bar{transform-box:fill-box;transform-origin:0% 100%}
.s6-v1{position:absolute;left:1.2cqw;right:1.2cqw;top:12cqw;padding:1.6cqw 1.4cqw;border-radius:1.4cqw;background:var(--red-500);color:#fff;box-shadow:0 1.6cqw 3cqw rgba(206,0,38,.35);transform:translateZ(6cqw)}
.s6-v1 svg{display:block;width:5cqw;height:auto;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s6-v1 b{display:block;margin-top:1cqw;font:800 2.8cqw/1.1 var(--font-display)}
.s6-v1 span{display:block;margin-top:.5cqw;font:500 1.9cqw/1.2 var(--font-body);color:var(--red-100)}
.s6-track{position:relative;height:1cqw;margin:2.2cqw .4cqw 0;border-radius:1cqw;background:var(--cream-200)}
.s6-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:1cqw;background:var(--red-500);transform-origin:0 50%;transform:scaleX(.87)}
.s6-now{position:absolute;top:50%;left:87%;width:3cqw;height:3cqw;margin:-1.5cqw 0 0 -1.5cqw;border-radius:50%;background:#fff;border:.7cqw solid var(--red-500)}
.s6-stamp{position:absolute;right:6cqw;bottom:6cqw;transform:translateZ(8cqw)}
.s6-stampin{position:relative;transform:rotate(-8deg)}
.s6-stv{display:block;padding:1.1cqw 2.2cqw;border:.6cqw solid var(--red-500);border-radius:1.2cqw;font:800 3.6cqw/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--red-500);background:rgba(255,253,247,.9);white-space:nowrap}
.s6-ring{position:absolute;inset:-2cqw;border:.5cqw solid var(--red-500);border-radius:3cqw;opacity:0}

@media (prefers-reduced-motion: no-preference){
.s6.live .s6-halo{animation:s6-halo 10s ease-in-out infinite}
@keyframes s6-halo{0%,100%{transform:none}50%{transform:translate(-14cqw,10cqw)}}
.s6.live .s6-all{animation:sx-all 10s infinite both}
.s6.live .s6-cal{animation:s6-cal 10s infinite both}
@keyframes s6-cal{0%{opacity:0;transform:translateY(14cqw) rotateX(-20deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}7%,100%{opacity:1;transform:none}}
.s6.live .s6-clap{animation:s6-clap 10s infinite both}
@keyframes s6-clap{0%,7%{opacity:0;transform:translateY(-10cqw) scale(.4) rotate(20deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}12%,100%{opacity:1;transform:none}}
.s6.live .s6-bar{animation:s6-bar 10s infinite both}
@keyframes s6-bar{0%,13%{transform:none}15%{transform:rotate(-28deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}16.4%{transform:none}18%{transform:rotate(-20deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}19.2%,100%{transform:none}}
.s6.live .s6-chip{animation:10s infinite both}
.s6.live .s6-chip.c1{animation-name:s6-c1}.s6.live .s6-chip.c2{animation-name:s6-c2}.s6.live .s6-chip.c3{animation-name:s6-c3}.s6.live .s6-chip.c4{animation-name:s6-c4}
@keyframes s6-c1{0%,24%{opacity:0;transform:translateY(-8cqw) rotate(-8deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}29%,100%{opacity:1;transform:none}}
@keyframes s6-c2{0%,32%{opacity:0;transform:translateY(-8cqw) rotate(8deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}37%,100%{opacity:1;transform:none}}
@keyframes s6-c3{0%,42%{opacity:0;transform:translateY(-8cqw) rotate(-6deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}47%,100%{opacity:1;transform:none}}
@keyframes s6-c4{0%,50%{opacity:0;transform:translateY(-8cqw) rotate(10deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}55%,100%{opacity:1;transform:none}}
.s6.live .s6-fill{animation:s6-fill 10s infinite both}
@keyframes s6-fill{0%,8%{transform:scaleX(0)}66%,100%{transform:scaleX(.87)}}
.s6.live .s6-now{animation:s6-now 10s infinite both}
@keyframes s6-now{0%,8%{left:0}66%,100%{left:87%}}
.s6.live .s6-v1{animation:s6-v1 10s infinite both}
@keyframes s6-v1{0%,62%{opacity:0;transform:translateZ(6cqw) translateY(-22cqw) rotate(-10deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}68%,100%{opacity:1;transform:translateZ(6cqw)}}
.s6.live .s6-stampin{animation:s6-stamp 10s infinite both}
@keyframes s6-stamp{0%,74%{opacity:0;transform:rotate(-8deg) scale(2.6);animation-timing-function:cubic-bezier(.55,0,1,.45)}77%{opacity:1;transform:rotate(-8deg) scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}80%,100%{opacity:1;transform:rotate(-8deg)}}
.s6.live .s6-ring{animation:s6-ring 10s infinite both}
@keyframes s6-ring{0%,76.5%{opacity:0;transform:scale(.8)}77%{opacity:.7;transform:scale(.9);animation-timing-function:cubic-bezier(.22,1,.36,1)}85%,100%{opacity:0;transform:scale(1.5)}}
.s6.live .s6-calpos{animation:s6-push 10s infinite both}
@keyframes s6-push{0%,76%{transform:rotateX(14deg) rotateY(-8deg)}77.5%{transform:rotateX(14deg) rotateY(-8deg) translateY(.8cqw)}80%,100%{transform:rotateX(14deg) rotateY(-8deg)}}
}