/* The page under the hero: the bento of what Speedit does, how it works, before/after, the waitlist.
   Every tile is a night stage, as on the app's home. Its little story is played by home.js: in a tile marked
   [data-run], an element with data-at is in its starting state until home.js gives it .on (and .hot for a moment).
   Without [data-run] (no JS, « réduire les animations », paused) every element shows its final, readable state. */
:root{--st:radial-gradient(80% 70% at 50% 30%,#2b211a,#0b0a09);--card:#131110;--lbl:#ff8a5c;--hot:#ff9d00;--ok:#5fd897;--pop:cubic-bezier(.34,1.56,.64,1)}

/* ---------- Sections ---------- */
.sec{position:relative;padding-top:clamp(84px,10vw,128px)}
.sec-h{position:relative;max-width:760px;margin:0 auto clamp(32px,4vw,48px);text-align:center}
.lbl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lbl)}
.sec h2{margin-top:12px;font-family:var(--display);font-weight:600;font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-.045em;word-spacing:.04em;text-wrap:balance}
.sec h2 em{font-style:italic;color:var(--cut);text-shadow:0 0 42px rgba(255,75,15,.5);padding-right:.04em}
.sec-p{margin:14px auto 0;max-width:560px;font-size:16px;line-height:1.55;color:var(--n-mute);text-wrap:balance}
.still-b{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:34px;padding:0 13px 0 11px;border-radius:10px;font-size:13px;color:var(--n-mute);box-shadow:inset 0 0 0 1px var(--n-line-2);transition:color .2s,box-shadow .2s}
.still-b:hover{color:var(--n-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.still-b .ico{width:14px;height:14px}
.still-b span{display:inline-flex;align-items:center;gap:8px}
.still-b .s-on,.still .still-b .s-off{display:none}
.still .still-b .s-on{display:inline-flex}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bt{--px:0;--py:0;position:relative;display:flex;flex-direction:column;min-width:0;padding:7px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--n-line),0 24px 50px -36px rgba(0,0,0,.75);transition:transform .45s var(--ease),box-shadow .3s,opacity .8s var(--ease),translate .9s var(--ease)}
.bt-auto{grid-column:span 7;grid-row:span 2}
.bt-rc,.bt-cl,.bt-mb,.bt-co{grid-column:span 5}
.bt-sd,.bt-rl{grid-column:span 7}
.bt-cr,.bt-pl{grid-column:span 6}
.bt-vis{position:relative;isolation:isolate;height:228px;flex:none;border-radius:16px;overflow:hidden;color:#f7f7f7;background:var(--st);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bt-auto .bt-vis{flex:1 0 auto;height:auto;min-height:452px}
.bt-sd .bt-vis,.bt-mb .bt-vis{height:292px}
.bt-co .bt-vis,.bt-rl .bt-vis{height:248px}
/* A light that follows the pointer, and the grain of the hero. */
.bt-vis::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(60% 70% at calc(50% + var(--px) * 32%) calc(28% + var(--py) * 30%),rgba(255,75,15,.2),transparent 70%);opacity:.6;transition:opacity .4s}
.bt-vis::after{content:"";position:absolute;z-index:6;inset:0;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}
.bt-par{position:absolute;z-index:1;inset:0;transform:translate3d(calc(var(--px) * 6px),calc(var(--py) * 4px),0);transition:transform .7s var(--ease)}
.bt-body{display:grid;align-content:start;gap:6px;padding:16px 14px 12px}
.bt-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lbl)}
.bt-k .ico{width:14px;height:14px}
.bt h3{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.22;letter-spacing:-.025em;text-wrap:balance}
.bt-auto h3{font-size:clamp(22px,2.2vw,28px);line-height:1.12;letter-spacing:-.035em}
.bt-body p{font-size:14px;line-height:1.5;color:var(--n-mute)}
.bt-body p+p{margin-top:2px}
.bt-body .bt-aside{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;color:var(--n-text)}
.bt-aside .ico{width:15px;height:15px;color:var(--cut-2)}
img.th{display:block;width:100%;height:100%;object-fit:cover}
.bt.rs *,.bt.rs *::before,.bt.rs *::after{transition:none!important}

@media (hover:hover) and (pointer:fine){
  .bt:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,138,92,.42),0 34px 70px -34px rgba(0,0,0,.85),0 0 60px -24px rgba(255,75,15,.5)}
  .bt:hover .bt-vis::before{opacity:1}
}
/* A tile below the fold rises the first time it is seen. */
.bt[data-armed]:not([data-seen]){opacity:0;translate:0 26px}
.bt[data-armed]{transition-delay:0s,0s,calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms)}
/* Off screen or paused, the ambient loops stop where they are. */
[data-in="0"] *,[data-in="0"] *::before,[data-in="0"] *::after,.still *,.still *::before,.still *::after{animation-play-state:paused!important}
video.lz{opacity:0;transition:opacity .5s}
video.lz.live{opacity:1}

/* 1. Montage automatique: the rush dropped, « Monter » pressed, Claude's choices checked, the video edited (12 s). */
.mk{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,320px) auto;justify-content:center;align-items:center;gap:clamp(20px,3.4vw,44px);padding:24px}
.mk-flow{display:grid;gap:10px;min-width:0}
.mk-drop{position:relative;height:62px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.mk-zone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:rgba(247,247,247,.6);opacity:0;transition:opacity .3s}
.mk-zone .ico{width:15px;height:15px}
.mk-file{position:absolute;inset:10px;display:flex;align-items:center;gap:10px;padding:0 12px;white-space:nowrap;overflow:hidden;border-radius:10px;background:#27221d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 28px -16px rgba(0,0,0,.9);font-family:var(--mono);font-size:12px;color:#f7f7f7;transition:opacity .45s var(--ease),transform .7s var(--ease)}
.mk-file .ico{width:15px;height:15px;color:var(--lbl)}
.mk-file small{margin-left:auto;font-size:11px;color:rgba(247,247,247,.5)}
.mk-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:11px;font-family:var(--display);font-weight:600;font-size:13.5px;color:#fff;background:linear-gradient(180deg,#ff6a33,#ff4b0f 55%,#e8400a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px -12px rgba(255,75,15,.7);transition:transform .18s var(--ease),box-shadow .3s}
.mk-btn .ico{width:14px;height:14px}
.mk-ops{display:grid;gap:6px;margin-top:4px;list-style:none}
.mk-ops li{display:flex;align-items:center;gap:9px;min-height:32px;padding:6px 8px 6px 10px;border-radius:10px;background:rgba(24,21,18,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px;line-height:1.25;color:#f7f7f7;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.mk-ops li>.ico{width:14px;height:14px;color:var(--lbl)}
.mk-ops li span{flex:1;min-width:0}
.mk-ok{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(26,157,90,.22);color:var(--ok);transition:opacity .3s,transform .45s var(--pop)}
.mk-ok svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk-phone{position:relative;width:clamp(150px,18.5vw,256px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;isolation:isolate;background:#1a1512;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 6px rgba(255,255,255,.03),0 34px 70px -24px rgba(0,0,0,.9),0 0 100px -30px rgba(255,75,15,.6);transition:transform .6s var(--ease)}
.mk-phone>img,.mk-phone>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-veil{position:absolute;z-index:2;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(11,10,9,.8);opacity:0;transition:opacity .5s}
.mk-veil small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(247,247,247,.78)}
.mk-ring{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.16);border-top-color:#ff6a33}
.mk-bar{width:96px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.mk-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9d00,#ff4b0f);transform-origin:left;transform:scaleX(0)}
.mk-done{position:absolute;z-index:3;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;background:rgba(11,10,9,.74);box-shadow:inset 0 0 0 1px rgba(95,216,151,.4);font-size:11.5px;font-weight:600;color:#7ee2a8;transition:opacity .35s,transform .5s var(--pop)}
.mk-done svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bt[data-run] .mk-zone.on{opacity:1}
.bt[data-run] .mk-file:not(.on){opacity:0;transform:translate(-28px,-36px) rotate(-7deg) scale(.96)}
.bt[data-run] .mk-drop.on{border-color:rgba(255,106,51,.85);background:rgba(255,75,15,.08)}
.bt[data-run] .mk-btn.on{transform:scale(.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 5px rgba(255,75,15,.28)}
.bt[data-run] .mk-ops li:not(.on){opacity:0;transform:translateX(-10px)}
.bt[data-run] .mk-ok:not(.on){opacity:0;transform:scale(.3)}
.bt[data-run] .mk-veil.on{opacity:1}
.bt[data-run] .mk-bar i.on{transform:scaleX(1);transition:transform 5.2s linear}
.bt[data-run] .mk-done:not(.on){opacity:0;transform:scale(.6)}
@media (hover:hover) and (pointer:fine){.bt-auto:hover .mk-phone{transform:translateY(-4px) rotate(-1.5deg)}}

/* 2. Recréer un Reel: a Reel's link pasted, its cuts laid on the creator's rush, then what is kept, ticked (10 s). */
.rc{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:18px}
.rc-in{display:flex;gap:8px;min-width:0}
.rc-link{flex:1;display:flex;align-items:center;gap:9px;min-width:0;height:38px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:12.5px;color:rgba(247,247,247,.88)}
.rc-link .ico{width:15px;height:15px;color:var(--lbl)}
.rc-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 4px;margin-left:-4px;border-radius:5px;transition:opacity .3s,background .35s}
.rc-url.hot{background:rgba(255,75,15,.38)}
.rc-go{flex:none;display:grid;place-items:center;height:38px;padding:0 14px;border-radius:11px;background:#f7f7f7;color:#16130c;font-family:var(--display);font-weight:600;font-size:12.5px;transition:transform .18s var(--ease),box-shadow .3s}
.rc-st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-content:center}
.rc-lbls{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.rc-lbls small{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.04em;white-space:nowrap;color:rgba(247,247,247,.6)}
.rc-tracks{position:relative;display:grid;gap:8px}
.rc-strip{position:relative;height:34px;border-radius:8px;overflow:hidden;background:#1a1512;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rc-strip>i{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w)}
.rc-ref>i{background:linear-gradient(160deg,var(--c,#3a2c22),#15110e);box-shadow:inset -1.5px 0 0 #0b0a09}
.rc-film{position:absolute;inset:0;background:repeat-x 0 0/auto 100%;opacity:.62;filter:saturate(.75)}
[data-near] .rc-film{background-image:url("/media/bento/strip.webp")}
.rc-strip .rc-z{position:absolute;top:6px;bottom:6px;left:calc(var(--l) + 5px);width:calc(var(--w) - 10px);border:1.5px solid rgba(255,255,255,.8);border-radius:4px;transition:opacity .35s,transform .45s var(--pop)}
.rc-strip .rc-t{position:absolute;bottom:6px;left:calc(var(--l) + 5px);width:calc(var(--w) - 14px);height:5px;border-radius:3px;background:#f7f7f7;transition:opacity .35s,transform .45s var(--pop)}
.rc-strip .rc-b{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);background:repeating-linear-gradient(135deg,rgba(255,157,0,.5) 0 3px,transparent 3px 8px);transition:opacity .4s}
.rc-cut{position:absolute;z-index:2;top:-3px;bottom:-3px;left:var(--l);width:1.5px;margin-left:-.75px;background:#ff6a33;box-shadow:0 0 8px rgba(255,75,15,.8);transform-origin:top;transition:transform .45s var(--ease),opacity .3s}
.rc-kept{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rc-kept span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:11px;color:#f7f7f7;transition:opacity .3s,transform .45s var(--pop)}
.rc-kept svg{width:10px;height:10px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rc-kept .rc-hook{background:rgba(255,75,15,.14);box-shadow:inset 0 0 0 1px rgba(255,106,51,.5);color:#ffb08f}
.rc-kept .rc-hook svg{stroke:#ff8a5c}
.bt[data-run] .rc-url:not(.on){opacity:0}
.bt[data-run] .rc-go.on{transform:scale(.94);box-shadow:0 0 0 4px rgba(255,75,15,.35)}
.bt[data-run] .rc-cut:not(.on){opacity:0;transform:scaleY(0)}
.bt[data-run] :is(.rc-you .rc-z,.rc-you .rc-t):not(.on){opacity:0;transform:scale(.6)}
.bt[data-run] .rc-you .rc-b:not(.on){opacity:0}
.bt[data-run] .rc-kept span:not(.on){opacity:0;transform:scale(.7)}

/* 3. Clipping: the playhead reads the long video, three moments light up, come out as vertical clips and get ranked (8 s). */
.cl{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:20px 20px 16px}
.cl-long{position:relative;height:60px;border-radius:11px;overflow:hidden;background:#1a1512;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cl-film{position:absolute;inset:0;background:repeat-x 0 0/auto 100%;opacity:.5;filter:saturate(.7)}
[data-near] .cl-film{background-image:url("/media/bento/strip.webp")}
.cl-tag{position:absolute;z-index:3;left:7px;top:6px;display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 5px;border-radius:6px;background:rgba(11,10,9,.78);font-family:var(--mono);font-size:10.5px;color:rgba(247,247,247,.85)}
.cl-tag svg{width:13px;height:13px;fill:none;stroke:#ff6a33;stroke-width:1.8}
.cl-seg{position:absolute;z-index:1;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:5px;background:rgba(255,75,15,.26);box-shadow:inset 0 0 0 1.5px #ff6a33;transition:opacity .35s}
.cl-ph{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0}
.cl-ph i{position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff4b0f;box-shadow:0 0 12px #ff4b0f}
.cl-out{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;--slot:78px}
.cl-clip{position:relative;width:64px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#2a231d;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 30px -16px rgba(0,0,0,.9);transition:opacity .45s var(--ease),transform .75s var(--ease),translate .7s var(--ease),box-shadow .4s}
.cl-clip.k1{box-shadow:0 0 0 2px #ff6a33,0 0 22px -4px rgba(255,75,15,.7),0 18px 30px -16px rgba(0,0,0,.9)}
.cl-rk{position:absolute;left:5px;top:5px;padding:1px 6px;border-radius:6px;background:rgba(11,10,9,.78);font:800 11px/1.4 var(--display);color:#fff;transition:opacity .3s,transform .45s var(--pop)}
.k1 .cl-rk{background:#ff4b0f}
.cl-fmt{position:absolute;right:4px;bottom:4px;padding:1px 4px;border-radius:4px;background:rgba(11,10,9,.74);font-family:var(--mono);font-size:9px;color:#f7f7f7}
.cl-face{position:absolute;left:18%;right:18%;top:22%;height:34%;background:linear-gradient(#fff,#fff) 0 0/8px 1.5px,linear-gradient(#fff,#fff) 0 0/1.5px 8px,linear-gradient(#fff,#fff) 100% 0/8px 1.5px,linear-gradient(#fff,#fff) 100% 0/1.5px 8px,linear-gradient(#fff,#fff) 0 100%/8px 1.5px,linear-gradient(#fff,#fff) 0 100%/1.5px 8px,linear-gradient(#fff,#fff) 100% 100%/8px 1.5px,linear-gradient(#fff,#fff) 100% 100%/1.5px 8px;background-repeat:no-repeat;opacity:.9;transition:opacity .35s,transform .45s var(--pop)}
.bt[data-run] .cl-face:not(.on){opacity:0;transform:scale(1.25)}
.bt[data-run] .cl-seg:not(.on){opacity:0}
.bt[data-run] .cl-ph.on{opacity:1;transform:translateX(100%);transition:transform 3.2s linear,opacity .2s}
.bt[data-run] .cl-clip:not(.on){opacity:0;transform:translateY(-62px) scale(.5)}
.bt[data-run] .cl-rk:not(.on){opacity:0;transform:scale(.4)}
.bt[data-run] .cl-out:not(.on) .k1{translate:var(--slot) 0;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 30px -16px rgba(0,0,0,.9)}
.bt[data-run] .cl-out:not(.on) .k2{translate:calc(var(--slot) * -1) 0}

/* 4. Studio: « Titre plus gros » in the chat, the title grows; the playhead runs, a clip is cut, the motion design
   (a list of steps) pops on the preview as the playhead crosses it, keyframes pass (10 s). */
.sd{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:16px 16px 14px}
.sd-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;min-height:0}
.sd-pv{position:relative;height:168px;aspect-ratio:9/16;border-radius:13px;overflow:hidden;background:#2a231d;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 16px 30px -16px rgba(0,0,0,.9)}
.sd-title{position:absolute;left:0;right:0;top:9%;text-align:center;transform:scale(1.4);transform-origin:50% 0;transition:transform .55s var(--pop)}
.sd-title span{display:inline-block;padding:2px 5px;border-radius:3px;background:#ff4b0f;font:800 8px/1.1 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.sd-mo{position:absolute;left:10%;right:10%;top:34%;padding:7px 7px 6px;border-radius:8px;background:#fff;box-shadow:0 10px 20px -8px rgba(0,0,0,.8);transition:opacity .35s,transform .5s var(--pop)}
.sd-mo>b{display:block;width:58%;height:4px;margin-bottom:6px;border-radius:2px;background:#16130c}
.sd-mo>i{display:flex;align-items:center;gap:4px;margin-top:4px}
.sd-mo>i::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#ff4b0f;transition:background .3s,transform .35s var(--pop)}
.sd-mo>i::after{content:"";flex:1;height:3px;border-radius:2px;background:#d6d1c8}
.sd-crop{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 0 999px rgba(0,0,0,.3);opacity:0;transform:scale(.84);transition:opacity .3s,transform .6s var(--ease)}
.sd-chat{display:grid;justify-items:start;align-content:center;gap:7px;min-width:0}
.sd-u{justify-self:end;max-width:100%;padding:7px 11px;border-radius:13px 13px 4px 13px;background:linear-gradient(180deg,#ff6a33,#ff4b0f);font-size:12.5px;font-weight:500;color:#fff;transition:opacity .35s,transform .5s var(--ease)}
.sd-dots{display:inline-flex;gap:4px;padding:9px 11px;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.08);opacity:0;transition:opacity .25s}
.sd-dots i{width:5px;height:5px;border-radius:50%;background:rgba(247,247,247,.6)}
.sd-r{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:12.5px;color:#f7f7f7;transition:opacity .35s,transform .5s var(--ease)}
.sd-r svg{width:12px;height:12px;fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sd-tools{display:grid;gap:6px}
.sd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:11px;color:rgba(247,247,247,.72);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.sd-chip .ico{width:13px;height:13px}
.sd-chip.hot{background:rgba(255,75,15,.16);box-shadow:inset 0 0 0 1px rgba(255,106,51,.6);color:#ffb08f}
.sd-tl{position:relative;display:grid;gap:3px}
.sd-ruler{height:7px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 22px);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sd-lane{position:relative;height:15px}
.sd-lane>i{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:4px}
.sd-lay>i{display:flex;align-items:center;padding:0 6px;background:rgba(255,157,0,.16);box-shadow:inset 0 0 0 1px rgba(255,157,0,.5);font:normal 9px var(--mono);color:#ffc266;transition:background .3s,box-shadow .3s}
.sd-lay>i.hot{background:rgba(255,157,0,.3);box-shadow:inset 0 0 0 1.5px #ffb347}
.sd-kf{position:absolute;top:50%;left:var(--k);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:1.5px;background:#ffe2b8;transform:rotate(45deg);transition:transform .3s var(--pop),background .3s}
.sd-kf.hot{background:#ff4b0f;transform:rotate(45deg) scale(1.6)}
.sd-vid>i{overflow:hidden;background:#2a231d repeat-x 0 0/auto 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:translate .5s var(--ease),border-radius .3s}
[data-near] .sd-vid>i{background-image:url("/media/bento/strip.webp")}
.sd-vid>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,.1),rgba(11,10,9,.5))}
.sd-vid>i.sd-a{border-top-right-radius:2px;border-bottom-right-radius:2px}
.sd-vid>i.sd-b{translate:4px 0;border-top-left-radius:2px;border-bottom-left-radius:2px}
.sd-cap>i{background:rgba(247,247,247,.16);box-shadow:inset 0 0 0 1px rgba(247,247,247,.12)}
.sd-mus>i{background:rgba(255,75,15,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='15' fill='%23ff6a33' fill-opacity='.75'%3E%3Crect x='1' y='5' width='2' height='5' rx='1'/%3E%3Crect x='5' y='2' width='2' height='11' rx='1'/%3E%3Crect x='9' y='4' width='2' height='7' rx='1'/%3E%3Crect x='13' y='1' width='2' height='13' rx='1'/%3E%3Crect x='17' y='5' width='2' height='5' rx='1'/%3E%3Crect x='21' y='3' width='2' height='9' rx='1'/%3E%3Crect x='25' y='6' width='2' height='3' rx='1'/%3E%3Crect x='29' y='2' width='2' height='11' rx='1'/%3E%3Crect x='33' y='4' width='2' height='7' rx='1'/%3E%3Crect x='37' y='1' width='2' height='13' rx='1'/%3E%3Crect x='41' y='5' width='2' height='5' rx='1'/%3E%3Crect x='45' y='3' width='2' height='9' rx='1'/%3E%3C/svg%3E") repeat-x 0 0/48px 15px}
.sd-mus>i.sd-sfx{display:flex;align-items:center;justify-content:center;background:rgba(255,157,0,.22);box-shadow:inset 0 0 0 1px rgba(255,157,0,.6);font:normal 8.5px var(--mono);color:#ffc266;transition:opacity .3s,transform .45s var(--pop)}
.sd-ph{position:absolute;z-index:2;inset:0;pointer-events:none;transform:translateX(52%)}
.sd-ph i{position:absolute;left:0;top:-3px;bottom:0;width:2px;margin-left:-1px;background:#ff4b0f;box-shadow:0 0 10px #ff4b0f}
.sd-ph i::before{content:"";position:absolute;left:-4px;top:0;width:10px;height:7px;border-radius:2px;background:#ff4b0f}
.sd-sc{position:absolute;z-index:3;left:53%;top:22px;width:22px;height:22px;margin-left:-11px;border-radius:7px;display:grid;place-items:center;background:#f7f7f7;color:#16130c;box-shadow:0 6px 16px -6px rgba(0,0,0,.8);opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s var(--pop)}
.sd-sc .ico{width:13px;height:13px}
.bt[data-run] .sd-title:not(.on){transform:none}
.bt[data-run] .sd-mo:not(.on){opacity:0;transform:translateY(8px) scale(.8)}
.bt[data-run] .sd-mo>i:not(.on)::before{background:#d6d1c8;transform:scale(.8)}
.bt[data-run] .sd-crop.on{opacity:1;transform:none}
.bt[data-run] :is(.sd-u,.sd-r):not(.on){opacity:0;transform:translateY(8px) scale(.95)}
.bt[data-run] .sd-dots.on{opacity:1}
.bt[data-run] .sd-dots i{animation:sd-type 1s ease-in-out infinite}
.bt[data-run] .sd-dots i:nth-child(2){animation-delay:.15s}.bt[data-run] .sd-dots i:nth-child(3){animation-delay:.3s}
@keyframes sd-type{50%{opacity:.25}}
.bt[data-run] .sd-vid>i.sd-b:not(.on){translate:0 0}
.bt[data-run] .sd-sfx:not(.on){opacity:0;transform:scale(.5)}
.bt[data-run] .sd-ph:not(.on){transform:none}
.bt[data-run] .sd-ph.on{transform:translateX(100%);transition:transform 8.2s linear}
.bt[data-run] .sd-sc.on{opacity:1;transform:none}

/* 5. Marques: one brand per client; the same video in each one's logo, colours, font and captions, in turn (9 s). */
.mb{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px}
.mb-list{display:grid;gap:7px;min-width:0}
.mb-lbl{margin-bottom:2px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:rgba(247,247,247,.55)}
.mb-row{display:flex;align-items:center;gap:9px;min-width:0;height:40px;padding:0 11px;border-radius:11px;background:rgba(24,21,18,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px;transition:box-shadow .3s,background .3s}
.mb-row>i{flex:none;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.mb-row>b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mb-row>em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:rgba(247,247,247,.55);white-space:nowrap}
.mb-row.r1{background:rgba(255,75,15,.07);box-shadow:inset 0 0 0 1.5px rgba(255,138,92,.65)}
.mb-add{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:11px;border:1.5px dashed rgba(255,255,255,.14);font-size:12px;color:rgba(247,247,247,.55)}
.mb-add .ico{width:13px;height:13px}
.mb-pv{position:relative;height:250px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#2a231d;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 24px 44px -20px rgba(0,0,0,.9)}
.mb-sk{position:absolute;inset:0;transition:opacity .5s}
.mb-sk.s2,.mb-sk.s3{opacity:0}
.mb-logo{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--a);font:800 9px var(--display);letter-spacing:.02em;color:#fff;box-shadow:0 4px 10px -3px rgba(0,0,0,.6)}
.mb-hook{position:absolute;left:8%;right:8%;top:19%;text-align:center}
.mb-hook span{display:inline-block;padding:.38em .62em;border-radius:.45em;background:var(--a);color:#fff;font:800 12px/1 var(--display);letter-spacing:-.02em;transform:rotate(-2deg);box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.mb-cap{position:absolute;left:8%;right:8%;bottom:19%;text-align:center;font:800 14px/1.05 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 16px rgba(0,0,0,.4)}
.mb-cap span{color:var(--b)}
.mb-sk.s2 .mb-logo{border-radius:50%;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700}
.mb-sk.s2 .mb-hook span{border-radius:999px;font:italic 700 12.5px/1 Georgia,"Times New Roman",serif;letter-spacing:0;transform:none}
.mb-sk.s2 .mb-cap{font:italic 700 15px/1.1 Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none}
.mb-sk.s3 .mb-logo{border-radius:3px;font-family:var(--mono);font-weight:500}
.mb-sk.s3 .mb-hook span{border-radius:3px;font:500 11px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;transform:none}
.mb-sk.s3 .mb-cap{left:12%;right:12%;font:500 11.5px/1.3 var(--mono);letter-spacing:0;text-transform:none;text-shadow:none}
.mb-sk.s3 .mb-cap span{display:inline-block;padding:3px 6px;border-radius:3px;background:rgba(11,10,9,.82);color:#fff;box-shadow:inset 0 -2px 0 var(--a)}
.bt[data-run] .mb-row.r1:not(.on){background:rgba(24,21,18,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bt[data-run] .mb-row.on{background:rgba(255,75,15,.07);box-shadow:inset 0 0 0 1.5px rgba(255,138,92,.65)}
.bt[data-run] .mb-sk:not(.on){opacity:0}
.bt[data-run] .mb-sk.on{opacity:1}

/* 6. Démarrage: the coach asks, the niche lights up among the trends Speedit follows, the creator lands in it, then
   the formats of their strategy line up (10 s). */
.co{position:absolute;inset:0}
.co-sky{position:absolute;inset:0;width:100%;height:100%}
.co-sky circle{fill:rgba(247,247,247,.3)}
.co-niche circle{fill:rgba(255,138,92,.85);transition:fill .6s}
.co-niche .h{fill:#ffd0bd}
.co-n{position:absolute;z-index:1;translate:-50% 0;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:rgba(247,247,247,.34)}
.co-hive{position:absolute;z-index:2;left:72%;top:52%;width:0;height:0}
.co-hive i{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:8px;overflow:hidden;background:#2a231d;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 16px -8px rgba(0,0,0,.9);transform:translate(calc(var(--x) * var(--k,1)),calc(var(--y) * var(--k,1)));transition:opacity .4s,transform .6s var(--pop)}
.co-me{position:absolute;z-index:3;left:72%;top:52%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;overflow:hidden;background:#2a231d;box-shadow:0 0 0 2px #15110e,0 0 0 3.5px #ff6a33,0 0 26px rgba(255,75,15,.75);transition:opacity .4s,transform .9s var(--ease)}
.co-tag{position:absolute;z-index:3;left:72%;top:calc(52% + 50px);translate:-50% 0;padding:2px 8px;border-radius:999px;background:rgba(11,10,9,.82);box-shadow:inset 0 0 0 1px rgba(255,138,92,.5);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;white-space:nowrap;color:#ffb08f;transition:opacity .35s,transform .45s var(--pop)}
.co-chat{position:absolute;z-index:3;left:16px;top:16px;display:grid;gap:8px;width:min(250px,58%)}
.co-q{display:flex;align-items:flex-end;gap:8px;transition:opacity .4s,transform .5s var(--ease)}
.co-q img{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.co-q span{padding:8px 11px;border-radius:13px 13px 13px 4px;background:rgba(36,32,28,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:12px;line-height:1.3;color:#f7f7f7}
.co-a{justify-self:end;padding:8px 11px;border-radius:13px 13px 4px 13px;background:linear-gradient(180deg,#ff6a33,#ff4b0f);font-size:12px;font-weight:500;color:#fff;clip-path:inset(0 0 0 0 round 13px 13px 4px 13px);transition:clip-path .9s steps(14),opacity .2s}
.co-plan{position:absolute;z-index:3;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:6px;min-width:0;padding:7px 8px;border-radius:12px;background:rgba(20,18,16,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:opacity .4s,transform .5s var(--ease)}
.co-plan>small{flex:none;margin-right:2px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(247,247,247,.55)}
.co-f{display:inline-flex;align-items:center;gap:5px;min-width:0;height:24px;padding:0 9px 0 7px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:11px;white-space:nowrap;color:#f7f7f7;transition:opacity .3s,transform .45s var(--pop)}
.co-f svg{flex:none;width:10px;height:10px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bt[data-run] :is(.co-q,.co-plan):not(.on){opacity:0;transform:translateY(8px)}
.bt[data-run] .co-a:not(.on){opacity:0;clip-path:inset(0 100% 0 0 round 13px 13px 4px 13px);transition:none}
.bt[data-run] .co-niche:not(.on) circle{fill:rgba(247,247,247,.3)}
.bt[data-run] .co-me:not(.on){opacity:0;transform:translate(-200px,50px) scale(.4)}
.bt[data-run] .co-hive i:not(.on){opacity:0;transform:scale(.3)}
.bt[data-run] .co-tag:not(.on){opacity:0;transform:translateY(6px)}
.bt[data-run] .co-f:not(.on){opacity:0;transform:scale(.7)}

/* 7. Relecture: a guest comments at a moment and on a zone of the image, another comment, one resolved, the
   version approved (9 s). */
.rl{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;padding:16px 20px}
.rl-pl{display:grid;justify-items:center;gap:9px}
.rl-vid{position:relative;height:182px;aspect-ratio:9/16;border-radius:13px;overflow:hidden;background:#2a231d;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 32px -16px rgba(0,0,0,.9)}
.rl-zone{position:absolute;left:50%;top:6%;width:42%;height:17%;border:1.5px solid #ff6a33;border-radius:6px;background:rgba(255,75,15,.16);transition:opacity .3s,transform .45s var(--pop)}
.rl-zone b{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#ff4b0f;font:800 9px var(--display);color:#fff}
.rl-bar{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
.rl-prog{position:absolute;inset:0;border-radius:inherit;background:rgba(247,247,247,.8);transform-origin:left;transform:scaleX(.62)}
.rl-mk{position:absolute;top:50%;left:var(--x);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#ff6a33;box-shadow:0 0 0 2px #15110e;transition:opacity .3s,transform .4s var(--pop)}
.rl-side{display:grid;gap:8px;min-width:0}
.rl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
.rl-head b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.rl-head small{font-family:var(--mono);font-size:10px;color:rgba(247,247,247,.55);white-space:nowrap}
.rl-c{position:relative;display:flex;align-items:flex-start;gap:9px;min-width:0;padding:9px 10px;border-radius:12px;background:rgba(24,21,18,.84);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12px;line-height:1.35;color:rgba(247,247,247,.85);transition:opacity .4s,transform .5s var(--ease)}
.rl-av{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#a98bff,#6a4bd8);font:700 10px var(--display);color:#fff}
.rl-c+.rl-c .rl-av{background:linear-gradient(135deg,#6aa8ff,#2f6fdf)}
.rl-c>span{display:grid;gap:1px;min-width:0}
.rl-c b{display:flex;align-items:baseline;gap:6px;font-weight:600;color:#f7f7f7}
.rl-c b small{font-family:var(--mono);font-weight:400;font-size:10px;color:#ff8a5c}
.rl-res{position:absolute;top:8px;right:9px;display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;background:rgba(74,209,138,.15);font-size:10px;font-weight:600;color:#6fe0a5;transition:opacity .3s,transform .4s var(--pop)}
.rl-res svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rl-ok{position:relative;height:36px}
.rl-btn,.rl-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;font-family:var(--display);font-weight:600;font-size:12.5px;transition:opacity .35s,transform .2s var(--ease)}
.rl-btn{background:#f7f7f7;color:#16130c;opacity:0}
.rl-done{background:rgba(74,209,138,.14);box-shadow:inset 0 0 0 1px rgba(74,209,138,.45);color:#7ee2a8}
.rl-done svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bt[data-run] .rl-prog:not(.on){transform:scaleX(0)}
.bt[data-run] .rl-prog.on{transform:none;transition:transform 8.2s linear}
.bt[data-run] :is(.rl-mk,.rl-zone,.rl-res):not(.on){opacity:0;transform:scale(.4)}
.bt[data-run] .rl-c:not(.on){opacity:0;transform:translateX(12px)}
.bt[data-run] .rl-btn.on{opacity:1}
.bt[data-run] .rl-ok.on .rl-btn{transform:scale(.95)}
.bt[data-run] .rl-done:not(.on){opacity:0}

/* 8. Carrousels et Stories: the cover's key word selected then put in ember, the slides swiped, a story beside (9 s). */
.cs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(22px,4.5vw,40px);padding:16px}
.cs-fan{position:relative;width:150px;height:170px;flex:none}
.cs-sl{position:absolute;left:8px;top:0;width:136px;aspect-ratio:4/5;border-radius:12px;background:#1d1915;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 34px -18px rgba(0,0,0,.95);transition:transform .5s var(--ease)}
.cs-sl.b2{transform:translate(-30px,8px) rotate(-10deg);background:#cfc9bf;filter:brightness(.5)}
.cs-sl.b1{transform:translate(-15px,3px) rotate(-5deg);background:#e8e3db;filter:brightness(.72)}
.cs-front{overflow:hidden;background:linear-gradient(165deg,#fff,#f2eee8);color:#16130c;transform:rotate(2deg)}
@media (hover:hover) and (pointer:fine){.bt-cr:hover .cs-sl.b2{transform:translate(-44px,10px) rotate(-14deg)}.bt-cr:hover .cs-sl.b1{transform:translate(-24px,4px) rotate(-7deg)}.bt-cr:hover .cs-front{transform:translate(6px,-3px) rotate(3deg)}}
.cs-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 12px 22px;transition:opacity .4s,transform .55s var(--ease)}
.cs-face.cf2,.cs-face.cf3{opacity:0}
.cs-face small{font-family:var(--mono);font-size:9px;color:#8e877b}
.cs-face b{margin-top:8px;font:800 14.5px/1.12 var(--display);letter-spacing:-.025em}
.cs-face em{font-style:normal;color:#ff4b0f;border-radius:3px;transition:color .3s,background .2s,box-shadow .2s}
.cs-caret{display:inline-block;width:1.5px;height:.95em;margin-left:1px;vertical-align:-.1em;background:#16130c;opacity:0}
.cs-face ul{display:grid;gap:6px;margin-top:10px;list-style:none}
.cs-face li{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;transition:opacity .35s,transform .45s var(--ease)}
.cs-face li::before{content:"";width:5px;height:5px;border-radius:50%;background:#ff4b0f;flex:none}
.cs-pill{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:auto;height:22px;padding:0 9px;border-radius:999px;background:#16130c;font:700 10px var(--display);color:#fff}
.cs-pill svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-dots{position:absolute;left:12px;bottom:10px;display:flex;gap:3px}
.cs-dots i{width:4px;height:4px;border-radius:2px;background:rgba(22,19,12,.2);transition:width .3s var(--ease),background .3s}
.cs-dots i:first-child{width:11px;background:#16130c}
.cs-story{position:relative;flex:none;width:98px;aspect-ratio:9/16;border-radius:13px;overflow:hidden;background:linear-gradient(170deg,#3b2a1f,#120e0c);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 20px 34px -16px rgba(0,0,0,.9)}
.sb{position:absolute;z-index:4;top:6px;left:6px;right:6px;display:flex;gap:2px}
.sb i{position:relative;flex:1;height:2px;border-radius:1px;overflow:hidden;background:rgba(255,255,255,.32)}
.sb i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.sb i:first-child::after{transform:none}
.cs-ss{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:12px 8px;text-align:center;transition:opacity .4s}
.cs-ss.s2,.cs-ss.s3{opacity:0}
.cs-ss b{font:800 12.5px/1.12 var(--display);letter-spacing:-.02em;color:#fff}
.cs-poll{display:grid;gap:4px;width:74px;padding:6px;border-radius:9px;background:#fff;color:#16130c;font:700 9px var(--display)}
.cs-poll span{display:block;padding:4px 0;border-radius:6px;background:#f0ece6}
.cs-poll span:first-child{background:linear-gradient(90deg,#ffd9c9 62%,#f0ece6 62%)}
.cs-link{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:7px;background:#fff;font:700 9.5px var(--display);color:#2f6fdf}
.cs-link .ico{width:11px;height:11px}
.cs-zone{position:absolute;z-index:3;left:0;right:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.24) 0 2px,transparent 2px 9px),rgba(10,9,8,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);opacity:.55;transition:opacity .4s}
.cs-zone.zt{top:0;height:15%}.cs-zone.zb{bottom:0;height:19%}
.cs-zl{position:absolute;z-index:5;left:50%;bottom:6px;translate:-50% 0;padding:1px 5px;border-radius:4px;background:rgba(11,10,9,.8);font-family:var(--mono);font-size:8px;white-space:nowrap;color:#f7f7f7;opacity:0;transition:opacity .3s}
.bt[data-run] .cs-face:not(.on){opacity:0;transform:translateX(16px)}
.bt[data-run] .cs-face.on{opacity:1}
.bt[data-run] .cs-w:not(.on){color:inherit}
.bt[data-run] .cs-w.hot{color:inherit;background:rgba(64,140,255,.2);box-shadow:0 0 0 1.5px #4c8dff}
.bt[data-run] .cs-caret.on{opacity:1;animation:cs-blink 1s steps(1) infinite}
@keyframes cs-blink{50%{opacity:0}}
.bt[data-run] .cs-face li:not(.on){opacity:0;transform:translateX(-8px)}
.bt[data-run] .cs-dots i{width:4px;background:rgba(22,19,12,.2)}
.bt[data-run] .cs-dots i.on{width:11px;background:#16130c}
.bt[data-run] .sb i::after{transform:scaleX(0)}
.bt[data-run] .sb i.on::after{transform:none;transition:transform 2.8s linear}
.bt[data-run] .cs-ss:not(.on){opacity:0}
.bt[data-run] .cs-ss.on{opacity:1}
.bt[data-run] .cs-zone:not(.on){opacity:0}
.bt[data-run] .cs-zone.on{opacity:1}
.bt[data-run] .cs-zl.on{opacity:1}

/* 9. Planning: three videos land on their days with their networks, then the next one is ready to go (8 s). */
.pl{position:absolute;inset:16px 16px 54px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pl-d{display:grid;grid-template-rows:auto 1fr;gap:6px;min-width:0;padding:6px 5px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s}
.pl-d small{text-align:center;font-family:var(--mono);font-size:10px;color:rgba(247,247,247,.5)}
.pl-d.has small{color:var(--lbl)}
.pl-d.hot{box-shadow:inset 0 0 0 1.5px rgba(255,138,92,.75)}
.pl-p{position:relative;align-self:start;aspect-ratio:9/14;border-radius:6px;overflow:hidden;background:#2a231d;box-shadow:0 0 0 1px rgba(255,255,255,.14);transition:opacity .5s var(--ease),transform .65s cubic-bezier(.34,1.4,.64,1)}
.pl-n{position:absolute;left:2px;right:2px;bottom:3px;display:flex;justify-content:center;gap:2px}
.pl-n svg{flex:none;width:9px;height:9px;padding:1.5px;box-sizing:content-box;border-radius:4px;background:rgba(11,10,9,.8);fill:none;stroke:#f7f7f7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-toast{position:absolute;left:16px;right:16px;bottom:14px;height:30px;border-radius:9px;background:rgba(20,18,16,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:11.5px}
.pl-st{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 11px;white-space:nowrap;overflow:hidden;transition:opacity .35s,transform .45s var(--ease)}
.pl-st b{font-weight:600}
.pl-st span{color:rgba(247,247,247,.62);overflow:hidden;text-overflow:ellipsis}
.pl-st .ico{width:13px;height:13px;color:var(--hot)}
.pl-pub{opacity:0}
.pl-pub .ico{color:var(--ok)}
.bt[data-run] .pl-p:not(.on){opacity:0;transform:translateY(-18px) scale(.88)}
.bt[data-run] .pl-st:not(.on){opacity:0;transform:translateY(6px)}
.bt[data-run] .pl-st.on{opacity:1}

/* ---------- Comment ça marche ---------- */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;counter-reset:how}
.how li{position:relative;display:grid;align-content:start;gap:8px;padding:22px 22px 24px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--n-line)}
.how-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.how-i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,75,15,.1);box-shadow:inset 0 0 0 1px rgba(255,106,51,.35);color:var(--cut-2)}
.how-i .ico{width:20px;height:20px}
.how-n{font-family:var(--mono);font-size:12px;color:var(--n-mute)}
.how h3{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.025em}
.how p{font-size:14px;line-height:1.5;color:var(--n-mute)}
/* The arrow between two steps, on the gap. */
.how li:not(:last-child)::after{content:"";position:absolute;z-index:1;top:44px;right:-15px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff6a33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- Avant / après ---------- */
.ba{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,56px)}
.ba figure{display:grid;justify-items:center;gap:14px;margin:0;min-width:0}
.ba-ph{position:relative;width:clamp(138px,21vw,264px);aspect-ratio:9/16;border-radius:24px;overflow:hidden;isolation:isolate;background:#1a1512;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 34px 70px -28px rgba(0,0,0,.9)}
.ba-ph>img,.ba-ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after .ba-ph{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 34px 70px -28px rgba(0,0,0,.9),0 0 110px -36px rgba(255,75,15,.65)}
.ba figcaption{display:grid;gap:3px;text-align:center;font-size:13.5px;line-height:1.4;color:var(--n-mute)}
.ba figcaption b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--n-text)}
.ba-after figcaption b{color:var(--lbl)}
.ba-go{display:grid;justify-items:center;gap:8px;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--n-mute)}
.ba-go i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ff6a33,#ff4b0f 55%,#e8400a);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 30px -8px rgba(255,75,15,.6)}
.ba-go .ico{width:17px;height:17px}
.ba-note{max-width:560px;margin:26px auto 0;text-align:center;font-size:13px;line-height:1.5;color:var(--n-dim)}

/* ---------- Ambient loops (nothing with « réduire les animations ») ---------- */
@media (prefers-reduced-motion:no-preference){
  .bt[data-run] .mk-ring{animation:mk-spin .9s linear infinite}
  @keyframes mk-spin{to{transform:rotate(360deg)}}
  .ba-go i{animation:ba-nudge 2.6s ease-in-out infinite}
  @keyframes ba-nudge{0%,60%,100%{transform:none}75%{transform:translateX(4px)}}
}
@media (prefers-reduced-motion:reduce){
  .still-b{display:none}
  .bt,.mk-phone,.cs-sl{transition:none}
  .bt:hover,.bt-auto:hover .mk-phone{transform:none}
}

/* ---------- Narrower screens ---------- */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-auto,.bt-sd,.bt-rl{grid-column:1/-1;grid-row:auto}
  .bt-rc,.bt-cl,.bt-mb,.bt-co,.bt-cr,.bt-pl{grid-column:span 1}
  .bt-auto .bt-vis{min-height:420px}
  .bt-mb .bt-vis,.bt-co .bt-vis{height:276px}
  .mb-pv{height:236px}
  .how{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}
  .how li{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
  .how-top{grid-row:span 2;display:grid;justify-items:center;gap:8px;margin:0}
  .how li:not(:last-child)::after{top:auto;bottom:-15px;right:auto;left:37px;transform:rotate(90deg)}
}
@media (max-width:700px){
  .bento{grid-template-columns:minmax(0,1fr);gap:14px}
  .bt-rc,.bt-cl,.bt-mb,.bt-co,.bt-cr,.bt-pl{grid-column:1/-1}
  .bt-vis{height:216px}
  .bt-sd .bt-vis{height:262px}
  .bt-mb .bt-vis{height:250px}
  .bt-co .bt-vis{height:244px}
  .bt-rl .bt-vis{height:246px}
  .rc{padding:16px 14px;gap:12px}
  .rc-go{padding:0 11px}
  .mb{gap:12px;padding:14px}
  .mb-pv{height:218px;border-radius:15px}
  .mb-row{height:36px;padding:0 9px;gap:8px;font-size:12px}
  .mb-row>em{display:none}
  .co-chat{width:66%}
  .co-hive{--k:.82}
  .co-hive i{width:22px;height:22px;margin:-11px 0 0 -11px}
  .co-hive,.co-me{top:57%}
  .co-tag{display:none}
  .co-n{display:none}
  .co-plan>small,.co-f:nth-of-type(3){display:none}
  .rl{gap:12px;padding:14px}
  .rl-vid{height:168px}
  .rl-head small{display:none}
  .rl-c{padding:8px 9px;font-size:11.5px}
  .rl-res{position:static;justify-self:start;margin-top:3px}
  .bt-auto .bt-vis{min-height:0;height:auto}
  .bt-auto .bt-par{position:relative}
  .mk{position:relative;grid-template-columns:minmax(0,1fr) 124px;gap:12px;padding:16px 14px}
  .mk-ops li{font-size:11.5px;padding:5px 7px 5px 8px;gap:7px}
  .mk-ops li>.ico,.mk-file small{display:none}
  .mk-file{gap:8px;padding:0 10px;font-size:11px}
  .mk-phone{width:124px;border-radius:18px}
  .mk-done{left:6px;top:6px;height:21px;font-size:10.5px}
  .sd-tools{display:none}
  .sd-pv{height:146px}
  .sd-top{grid-template-columns:auto minmax(0,1fr)}
  .sec-p{font-size:15px}
  .bt h3{font-size:18px}
  .sec{padding-top:72px}
  .bt-auto h3{font-size:22px}
  .ba-go span{display:none}
  .ba-go i{width:36px;height:36px}
  .ba figcaption{font-size:12.5px}
}
@media (max-width:380px){.mk{grid-template-columns:minmax(0,1fr) 108px}.mk-phone{width:108px}.cs-story{width:86px}.cs-fan{width:140px}}