:root{
  color-scheme:light;
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#eef1f8; --surface-3:#e2e6f1; --hair:rgba(22,24,60,.10);
  --tx:#15172b; --tx2:#5b6076; --tx3:#9aa0b4;
  --accent:#7c4dff; --accent2:#4d7cff; --grad:linear-gradient(135deg,#4d7cff,#9b5cff);
  --green:#16a34a; --amber:#d99000; --red:#e0352b;
  --radius:18px; --blur:saturate(180%) blur(20px); -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",sans-serif;background:var(--bg);color:var(--tx);line-height:1.45;background-image:radial-gradient(1100px 600px at 15% -260px,rgba(77,124,255,.18),transparent 60%),radial-gradient(900px 520px at 95% -200px,rgba(155,92,255,.16),transparent 60%);background-attachment:fixed;height:100%;overflow:hidden;display:flex;flex-direction:column}
header{flex:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:6px 20px;background:rgba(255,255,255,.78);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--hair)}
.brand{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.head-btns{display:flex;gap:8px}
.head-btns button{padding:7px 13px;min-height:0;font-size:.85rem}
.brand .logo{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
main{max-width:780px;width:100%;margin:0 auto;padding:26px 22px 60px;flex:1 1 auto;min-height:0;overflow-y:auto}
main#app.wide{max-width:1640px;padding:10px 22px 14px;overflow:hidden;display:flex;flex-direction:column}
main#app.wide>div:last-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
main#app.wide h1,main#app.wide .sub{display:none}
/* Étape 1 (Vidéo) sans scroll : 2 colonnes qui remplissent l'écran */
main#app.fit1{max-width:1280px;padding:10px 22px 14px;overflow:hidden;display:flex;flex-direction:column}
main#app.fit1 h1,main#app.fit1 .sub{display:none}
main#app.fit1 .s1-host{flex:1 1 auto;min-height:0;display:flex}
main#app.fit1 .status{flex:0 0 auto}
.stage1-card{flex:1 1 auto;min-height:0;display:flex;margin-bottom:0;padding:18px}
.stage1-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;width:100%;min-height:0}
.stage1-left{min-height:0;display:flex;align-items:center;justify-content:center}
.stage1-vid{width:100%;max-height:calc(100vh - 150px);aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#000}
.prog{height:10px;border-radius:980px;background:var(--surface-2);overflow:hidden;margin:10px 0 6px}
.prog-bar{height:100%;background:var(--grad);border-radius:980px;transition:width .4s ease;width:0}
.prog-msg{font-size:.86rem;color:var(--tx2);text-align:center}
.stage1-right{min-height:0;overflow-y:auto;padding-right:4px}
.stage1-right h2{margin-bottom:10px}
.stage1-cut{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.stage1-cut .soft{margin-top:4px}
.stage1-cut .soft-cta{margin-top:8px;padding:11px;font-size:.92rem}
.mini-ok{color:var(--green);font-size:.85rem;margin:4px 0 8px}
.cut-lbl{display:block;font-size:.76rem;color:var(--tx2);margin:8px 0 2px}
.stage1-cut .cap-range{width:100%;accent-color:var(--accent2)}
@media(max-width:900px){
  main#app.fit1{overflow-y:auto}
  main#app.fit1 .s1-host{display:block}
  .stage1-card{display:block}
  .stage1-grid{grid-template-columns:1fr}
  .stage1-vid{max-height:48vh}
}
/* Barre compacte unique : retour + étapes + action (fini les rangées empilées) */
.wk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.wk-bar .stepper{margin:0}
.wk-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.wk-actions .cta-inline{padding:10px 20px;font-size:.92rem}
.wk-actions .soft{padding:10px 16px}
.wk-actions .ed-status{margin:0;font-size:.8rem;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
h1{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin:.2rem 0 .3rem}
h2{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
.muted{color:var(--tx2)}
.sub{font-size:.85rem;margin:0 0 18px}
.hint{color:var(--tx3);font-size:.82rem;margin:.6rem 0}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:0 18px 48px -30px rgba(40,50,120,.45)}
label{display:block;font-size:.78rem;font-weight:500;color:var(--tx2);margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--hair);background:var(--surface-2);color:var(--tx);font:inherit;font-size:.95rem;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,77,255,.25)}
textarea{resize:vertical;line-height:1.5}
button{cursor:pointer;border:0;border-radius:980px;padding:10px 18px;font:inherit;font-weight:600;font-size:.9rem;color:#fff;background:var(--grad);letter-spacing:-.01em;transition:transform .12s,filter .15s,opacity .15s}
button:hover{filter:brightness(1.08)} button:active{transform:scale(.97)} button:disabled{opacity:.45;cursor:default}
button.ghost{background:transparent;border:1px solid var(--hair);color:var(--tx2)} button.ghost:hover{background:var(--surface-2);filter:none}
button.soft{background:var(--surface-2);color:var(--tx);border:1px solid var(--hair)} button.soft:hover{background:var(--surface-3);filter:none}
button.small{padding:7px 13px;font-size:.82rem}
.cta-primary{display:block;width:100%;margin-top:20px;padding:15px;font-size:1rem;border-radius:14px;box-shadow:0 10px 30px -10px rgba(124,77,255,.6)}
/* Home / hero */
.hero{text-align:center;padding:14px 0 8px}
.hero h1{font-size:2rem}
.lead{color:var(--tx2);max-width:440px;margin:0 auto 22px}
.drop{display:block;border:1.5px dashed var(--hair);border-radius:var(--radius);padding:34px 20px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--accent2);background:var(--surface-2)}
.drop-in{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.drop-ico{font-size:1.6rem}
.section{margin-top:30px}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.proj-card{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:16px;cursor:pointer;transition:transform .12s,border-color .15s}
.proj-card:hover{transform:translateY(-2px);border-color:var(--accent2)}
.pc-name{font-weight:600;font-size:.95rem;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:28px}
.pc-del{position:absolute;top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:transparent;color:var(--tx2);font-size:.9rem;cursor:pointer;opacity:0;transition:opacity .12s,background .12s}
.proj-card:hover .pc-del{opacity:.8}
.pc-del:hover{opacity:1;background:rgba(255,69,58,.18);color:#ff453a}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:980px;background:var(--surface-2);color:var(--tx2);border:1px solid var(--hair)}
/* Workspace */
.wk-top{margin-bottom:8px}
/* Stepper */
.stepper{display:flex;align-items:center;gap:6px;margin:6px 0 22px;flex-wrap:wrap}
.step-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hair);color:var(--tx2);padding:8px 14px;border-radius:980px;font-size:.85rem;font-weight:600}
.step-pill .num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface-3);color:var(--tx2);font-size:.75rem}
.step-pill.active{color:#fff;border-color:transparent;background:var(--grad)}
.step-pill.active .num{background:rgba(255,255,255,.25);color:#fff}
.step-pill.done{color:var(--green);border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.10)}
.step-pill.done .num{background:var(--green);color:#fff}
.step-pill:disabled{opacity:.45}
.step-sep{flex:0 0 14px;height:1px;background:var(--hair)}
/* Gauge */
.gauge{margin-bottom:16px}
.gauge-num{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.gauge-num span{font-size:1rem;font-weight:600;color:var(--tx3)}
.gauge-num.good{color:var(--green)}.gauge-num.mid{color:var(--amber)}.gauge-num.low{color:var(--red)}
.gauge-bar{height:8px;border-radius:980px;background:var(--surface-2);overflow:hidden;margin:8px 0 4px}
.gauge-fill{height:100%;border-radius:980px}
.gauge-fill.good{background:#30d158}.gauge-fill.mid{background:#ffd60a}.gauge-fill.low{background:#ff453a}
.gauge-lbl{font-size:.78rem;color:var(--tx2)}
/* Plan list */
.plan-item{border:1px solid var(--hair);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--surface-2)}
.pi-time{font-size:.78rem;font-weight:600;color:var(--accent2);margin-bottom:6px}
.pi-acts{display:flex;gap:8px;margin-top:8px}
/* Montage clips */
.clip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.clip-card{border:1px solid var(--hair);border-radius:14px;padding:12px;background:var(--surface-2);transition:border-color .15s,opacity .15s,box-shadow .15s}
.clip-card.approved{border-color:rgba(48,209,88,.45);box-shadow:0 0 0 1px rgba(48,209,88,.22)}
.clip-card.rejected{opacity:.45}
.clip{width:100%;border-radius:10px;background:#000;display:block;aspect-ratio:9/16;object-fit:cover}
.clip.ph{display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:.8rem;border:1px dashed var(--hair)}
.cc-time{font-size:.74rem;color:var(--tx2);margin:8px 0 4px}
.cc-acts{display:flex;gap:6px;margin-top:8px}
.cc-acts button{flex:1;padding:7px 0;font-size:1rem}
/* Final */
.final{width:100%;max-width:300px;border-radius:14px;margin:6px auto;display:block;background:#000;aspect-ratio:9/16;object-fit:contain}
.dl-btn{display:block;width:max-content;margin:12px auto 0;text-decoration:none;padding:13px 26px;border-radius:980px;background:var(--grad);color:#fff;font-weight:600}
.status{font-size:.86rem;margin-top:14px;min-height:1.1em;color:var(--tx2);text-align:center}
.status.err{color:var(--red)}.status.ok{color:var(--green)}
.loading{color:var(--tx2);padding:48px;text-align:center}
/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal.hidden{display:none}
.modal-card{background:var(--surface);border:1px solid var(--hair);border-radius:22px;padding:22px;max-width:460px;width:100%;box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
.pill{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;padding:4px 11px;border-radius:980px;background:var(--surface-2);color:var(--tx2);border:1px solid var(--hair)}
.row-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
/* ---- Pro editor ---- */
.ed-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.dl-inline{display:inline-flex;align-items:center;text-decoration:none}
.ed-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;margin-bottom:16px}
@media(max-width:640px){.ed-main{grid-template-columns:1fr}}
.ed-player{position:relative;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:9/16;max-height:420px;margin:0 auto;width:100%}
.ed-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ed-ovl{object-fit:cover!important;pointer-events:none}
.ed-transcript{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:14px;display:flex;flex-direction:column;min-height:200px}
.ed-tr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:.9rem}
.ed-tr-body{overflow-y:auto;max-height:380px;line-height:1.9;font-size:.95rem}
.word{cursor:pointer;border-radius:6px;padding:1px 2px;transition:background .1s}
.word:hover{background:var(--surface-3)}
.word.active{background:var(--grad);color:#fff}
.seg-edit{margin-bottom:8px}
.ed-tr-acts{display:flex;gap:8px;margin-top:8px}
.ed-timeline{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:14px;margin-bottom:6px}
.tl-track{position:relative;height:46px;background:var(--surface-2);border-radius:10px;overflow:hidden;cursor:pointer}
.tl-block{position:absolute;top:6px;bottom:6px;background:var(--grad);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:grab;overflow:hidden;box-shadow:0 2px 8px -2px rgba(0,0,0,.6);touch-action:none;user-select:none}
.tl-block.approved{outline:2px solid #30d158}
.tl-block.rejected{opacity:.4}
.tl-block.sel{outline:2px solid #fff}
.tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:0;pointer-events:none;box-shadow:0 0 8px rgba(255,255,255,.7)}
.ed-inspector{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:16px;margin-top:8px}
.insp-head{font-size:.9rem;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.insp-clip{width:100%;max-width:180px;border-radius:10px;background:#000;display:block;margin-bottom:8px;aspect-ratio:9/16;object-fit:cover}
.insp-times{display:flex;gap:12px}.insp-times>div{flex:1}
.insp-acts{display:flex;gap:8px;margin-top:10px}
.insp-acts button{flex:1;font-size:1rem;padding:8px 0}
.banner{background:rgba(217,144,0,.12);border:1px solid rgba(217,144,0,.32);color:#8a5d00;border-radius:12px;padding:10px 14px;font-size:.85rem;margin-bottom:14px}
.banner b{color:#5e3f00}
.ed-toolbar button{padding:11px 18px}
.cta-inline{background:var(--grad);color:#fff;box-shadow:0 6px 20px -8px rgba(124,77,255,.7)}
.tl-block.planned{background:var(--surface-3);border:1.5px dashed rgba(255,255,255,.2);color:var(--tx2);box-shadow:none}
.tl-block.generated{background:var(--grad)}
.tl-block.sel{outline:2px solid #fff;z-index:2}
.insp-ph{color:var(--tx3);font-size:.82rem;padding:14px;border:1px dashed var(--hair);border-radius:10px;margin-bottom:8px;text-align:center}
/* ---- Éditeur clair (cartes) ---- */
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:10px 12px 10px 16px;margin-bottom:10px}
.ed-head-left{min-width:0;flex:1 1 auto}
.ed-instr{font-size:.9rem;line-height:1.3;color:var(--tx2)}
.ed-actrow{display:flex;gap:10px;flex:0 0 auto}
.ed-actrow .cta-inline{flex:none;padding:11px 22px;font-size:.95rem}
.ed-actrow .soft{padding:11px 18px}
.ed-status{font-size:.8rem;margin-top:3px;min-height:0;color:var(--tx2)}
.ed-status.ok{color:var(--green)}.ed-status.err{color:var(--red)}
.cards-h2{margin:8px 0 12px;font-size:1.05rem}
.bcards{display:flex;flex-direction:column;gap:12px}
.bcard{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:16px}
.bcard.approved{border-color:rgba(48,209,88,.45);box-shadow:0 0 0 1px rgba(48,209,88,.2)}
.bcard.rejected{opacity:.5}
.bc-head{display:flex;align-items:center;gap:8px;font-size:.92rem;margin-bottom:0;cursor:pointer}
.bcard.open .bc-head{margin-bottom:10px}
.bc-chev{color:var(--tx3);font-size:.8rem;flex:0 0 auto}
.bc-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcard{transition:border-color .12s}
.bcard.open{border-color:var(--accent2);box-shadow:0 0 0 1px rgba(77,124,255,.18)}
.bcard .pill{flex:0 0 auto}
.bc-clip{width:130px;border-radius:10px;background:#000;display:block;aspect-ratio:9/16;object-fit:cover;margin-bottom:6px}
.bc-ph{color:var(--tx3);font-size:.82rem;padding:16px;border:1px dashed var(--hair);border-radius:10px;text-align:center;margin-bottom:6px}
.linklike{background:none;border:0;color:var(--accent2);padding:4px 0;font-size:.82rem;cursor:pointer;display:block;text-align:left}
.linklike:hover{filter:brightness(1.2)}
.bc-times{display:flex;gap:12px;margin:4px 0}.bc-times>div{flex:1}
.bc-cost{color:var(--accent2);font-weight:600}
.bc-audio{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.83rem;color:var(--tx2);cursor:pointer}
.bc-audio input{width:16px;height:16px;accent-color:var(--accent2);cursor:pointer;margin:0}
.bc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* ---- Éditeur tabbé : aperçu + onglets + timeline + barre d'action ---- */
.ed2{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0}
.ed2-top{display:flex;gap:16px;flex:1 1 auto;min-height:0;overflow:hidden}
.ed2-player{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
/* L'aperçu remplit la hauteur de sa zone (plus de hauteur fixe qui débordait sur la timeline) */
.ed-player{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:9/16;height:100%;max-height:100%;min-height:0;width:auto;max-width:40vw;margin:0}
.ed-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ed-ovl{object-fit:cover!important;pointer-events:none}
.ed2-panel{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:12px;box-shadow:0 18px 48px -34px rgba(40,50,120,.4)}
.ed2-panels{flex:1 1 auto;min-height:0;overflow-y:auto}
/* Timeline = panneau borné qui défile à l'intérieur (façon éditeur), n'écrase plus l'aperçu */
.ed-timeline{flex:0 0 auto;max-height:42vh;overflow-y:auto;overflow-x:hidden;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:8px 12px}
.ed-timeline .hint{font-size:.72rem;margin:6px 0 0;opacity:.85}
.ed2-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.ed2-actions .ed-status{flex:1 1 auto;margin:0;font-size:.82rem;text-align:left;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed2-actions .cta-inline{padding:12px 22px}
.ed2-actions .soft{padding:12px 18px}
.retouche-sep{height:1px;background:var(--hair);margin:18px 0}
.smooth-pv{width:100%;border-radius:10px;margin-top:10px;border:1px solid var(--hair);display:block}
.cut-panel audio,.music-row audio{width:100%;height:34px;margin-top:8px}
.music-up{display:flex;flex-direction:column;gap:6px}
.music-up input[type=file]{padding:9px}
.music-up .cta-primary{align-self:flex-start;margin-top:6px}
.music-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.music-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) auto;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--hair);border-radius:12px}
.music-info{min-width:0}
.music-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-mood{font-size:.78rem;color:var(--accent2);margin-top:2px}
.music-row audio{margin:0}
@media(max-width:720px){.music-row{grid-template-columns:1fr auto;grid-template-areas:'info del' 'audio audio'}.music-info{grid-area:info}.music-row .ghost{grid-area:del}.music-row audio{grid-area:audio}}
.tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.refs-panel,.caps-panel,.cut-panel{padding:0}
.ref-row{border-top:1px solid var(--hair);padding:8px 0}
.ref-row:first-of-type{border-top:0}
.ref-top{display:flex;gap:8px;align-items:center}
.ref-name{flex:1;font-weight:600;padding:7px 9px}
.ref-desc{margin-top:6px;font-size:.85rem}
.ref-select{margin-top:4px}
.ref-img{display:flex;align-items:center;gap:10px;margin-top:8px}
.ref-thumb{width:54px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--hair);background:#000}
/* Onglets (scroll horizontal si étroit) */
.ed-tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.ed-tabs::-webkit-scrollbar{display:none}
.ed-tab{flex:0 0 auto;white-space:nowrap;background:var(--surface-2);border:1px solid var(--hair);color:var(--tx2);padding:7px 12px;border-radius:10px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .12s}
.ed-tab.active{background:var(--accent2);border-color:var(--accent2);color:#fff}
/* Éditeur desktop : compacter le bandeau du haut → plus de place pour la timeline */
main#app.wide .wk-bar{margin-bottom:6px}
main#app.wide .wk-bar .stepper{display:none}   /* redondant dans l'éditeur (les onglets suffisent) */
.pill.busy{background:rgba(10,132,255,.18);color:var(--accent2);border-color:transparent}
.bcard.busy{border-color:rgba(10,132,255,.45);box-shadow:0 0 0 1px rgba(10,132,255,.18)}
.bc-ph.busy{color:var(--accent2);display:flex;align-items:center;justify-content:center;gap:8px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(22,24,60,.16);border-top-color:var(--accent2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.col-title{font-size:.74rem;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.ed-tr-body{max-height:none}
.ed2-panel .bcard{background:var(--surface-2)}
/* Sous-titres */
.caps-panel{border:1px solid var(--hair);border-radius:12px;padding:14px;background:var(--surface-2)}
.cap-toggle{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:.9rem;color:var(--tx);cursor:pointer}
.cap-toggle input{width:17px;height:17px;accent-color:var(--accent2);margin:0;cursor:pointer}
.cap-range{accent-color:var(--accent2)}
.cap-lines{max-height:280px;overflow-y:auto;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.cap-line{display:flex;gap:6px;align-items:center}
.cap-line .cap-t{width:56px;padding:6px 4px;font-size:.78rem;flex:0 0 auto;text-align:center}
.cap-line .cap-x{flex:1 1 auto;min-width:0;padding:6px 8px;font-size:.85rem}
.cap-line .ghost{flex:0 0 auto;padding:6px 9px}
.cap-line.flash{outline:2px solid var(--accent2);border-radius:8px}
.tl-lbl{font-size:.68rem;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 3px}
.tl-lbl:first-child{margin-top:0}
.tl-captrack{height:38px}
.tl-vidrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vid-tools{display:flex;gap:6px}
.tl-vidtrack{height:42px;background:linear-gradient(90deg,#cfe0ff,#dfe6ff);cursor:crosshair;touch-action:none}
.tl-sel{position:absolute;top:0;bottom:0;background:rgba(77,124,255,.32);border:2px solid var(--accent2);border-radius:6px;pointer-events:none}
.tl-cut{position:absolute;top:0;bottom:0;background:rgba(224,53,43,.45);border:1px solid #e0352b;border-radius:6px;cursor:pointer;z-index:2;touch-action:none}
.tl-cut:hover{background:rgba(224,53,43,.6)}
.tl-cut.sel{background:rgba(224,53,43,.62);outline:2px solid #fff;box-shadow:0 0 0 2px #e0352b;z-index:4}
.tl-cut .tl-h{background:#e0352b}
.tl-cut .tl-h::after{background:#fff}
/* Panneau de revue d'une zone rouge sélectionnée */
.cut-review{margin:8px 0 2px;padding:10px 12px;background:rgba(224,53,43,.07);border:1px solid rgba(224,53,43,.4);border-radius:12px}
.cr-head{font-size:.74rem;font-weight:700;color:#c22a22;text-transform:uppercase;letter-spacing:.02em}
.cr-txt{margin:5px 0 8px;font-size:.92rem;line-height:1.35;font-style:italic;color:var(--tx)}
.cr-acts{display:flex;gap:8px;flex-wrap:wrap}
.cut-review .hint{margin:8px 0 0}
.tl-cap{position:absolute;top:5px;bottom:5px;background:rgba(77,124,255,.14);border:1px solid rgba(77,124,255,.4);border-radius:7px;font-size:.72rem;color:var(--tx);display:flex;align-items:center;overflow:hidden;cursor:grab;z-index:1;touch-action:none;user-select:none}
.tl-cap:hover{background:rgba(77,124,255,.24);border-color:var(--accent2)}
.tl-cap-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;padding:0 9px;width:100%}
.tl-blk-n{pointer-events:none}
/* Poignées de redimensionnement (b-rolls, sous-titres) — façon CapCut */
.tl-h{position:absolute;top:0;bottom:0;width:12px;cursor:ew-resize;z-index:3;display:flex;align-items:center;justify-content:center;touch-action:none}
.tl-h.l{left:0}.tl-h.r{right:0}
.tl-h::after{content:'';width:2px;height:44%;background:rgba(255,255,255,.9);border-radius:1px}
.tl-cap .tl-h::after{background:var(--accent2)}
/* Clip vidéo : corps transparent (laisse passer la sélection de zone), poignées actives aux bords */
.tl-vidclip{position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none;border-radius:8px;border:1.5px solid transparent}
.tl-vidclip .tl-h{pointer-events:auto;background:rgba(77,124,255,.9);border-radius:8px}
.tl-vidclip .tl-h.l{border-radius:8px 0 0 8px}.tl-vidclip .tl-h.r{border-radius:0 8px 8px 0}
.tl-vidclip .tl-h::after{background:#fff}
/* Piste musique : clip déplaçable + poignées de découpe */
.tl-mustrack{height:40px}
.tl-mus{position:absolute;top:5px;bottom:5px;background:linear-gradient(135deg,rgba(48,209,88,.28),rgba(10,180,120,.34));border:1px solid rgba(48,209,88,.6);border-radius:8px;display:flex;align-items:center;cursor:grab;overflow:hidden;touch-action:none;user-select:none;z-index:1}
.tl-mus:active{cursor:grabbing}
.tl-mus-lbl{font-size:.72rem;color:var(--tx);font-weight:600;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tl-mus-h{position:absolute;top:0;bottom:0;width:12px;background:rgba(48,209,88,.85);cursor:ew-resize;display:flex;align-items:center;justify-content:center;touch-action:none}
.tl-mus-h::after{content:'';width:2px;height:42%;background:#fff;border-radius:1px;box-shadow:3px 0 0 -.5px #fff,-3px 0 0 -.5px #fff}
.tl-mus-h.l{left:0;border-radius:8px 0 0 8px}
.tl-mus-h.r{right:0;border-radius:0 8px 8px 0}
/* Enregistreur + téléprompteur */
.rec-entry{display:block;width:100%;margin-top:12px;padding:14px;border-radius:14px;background:var(--surface-2);color:var(--tx);border:1px solid var(--hair);font-weight:600}
.rec-entry:hover{border-color:var(--accent2);filter:none;background:var(--surface-3)}
.qr-entry{display:block;width:100%;margin-top:8px;padding:11px;border-radius:14px;background:transparent;color:var(--tx2);border:1px solid var(--hair);font-weight:600;font-size:.88rem}
.qr-entry:hover{border-color:var(--accent2);filter:none;background:var(--surface-2);color:var(--tx)}
.qr-modal{position:fixed;inset:0;background:rgba(20,23,43,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:60}
.qr-card{background:var(--surface);border:1px solid var(--hair);border-radius:22px;padding:24px;max-width:340px;width:100%;text-align:center;position:relative;box-shadow:0 30px 80px -20px rgba(40,50,120,.5)}
.qr-card h3{margin:0 0 8px;font-size:1.05rem}
.qr-close{position:absolute;top:12px;right:12px}
.qr-box{display:flex;align-items:center;justify-content:center;min-height:210px;margin:14px 0;padding:10px;background:#fff;border-radius:14px}
.qr-box img,.qr-box canvas{display:block}
.qr-url{font-size:.72rem;color:var(--tx3);word-break:break-all}
.login-modal{position:fixed;inset:0;background:var(--bg);background-image:radial-gradient(1100px 600px at 50% -260px,rgba(77,124,255,.18),transparent 60%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.login-card{background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:28px;max-width:340px;width:100%;text-align:center;box-shadow:0 30px 80px -24px rgba(40,50,120,.5)}
.login-card .brand{justify-content:center;font-size:1.1rem;margin-bottom:6px}
.login-card input{margin:14px 0 4px;text-align:center}
.login-card .cta-primary{margin-top:10px}
.rec-card{max-width:900px;margin:0 auto}
.rec-cols{display:flex;gap:18px;align-items:flex-start}
.rec-left{flex:0 0 auto}
.rec-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.rec-devs{display:flex;gap:12px}
.rec-devs>div{flex:1;min-width:0}
.rec-stage{position:relative;margin:0 auto;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:9/16;height:62vh;width:auto;flex:0 0 auto}
.rec-srcvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.rec-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
@media(max-width:820px){.rec-cols{flex-direction:column}.rec-stage{height:46vh}}
.rec-prompter{position:absolute;left:0;right:0;top:14%;height:54%;overflow:hidden;padding:0 14px;z-index:2}
.rec-prompter-in{width:100%;height:100%;background:transparent;border:0;outline:none;resize:none;color:#fff;font-weight:800;text-align:center;line-height:1.32;text-shadow:0 2px 8px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9);font-size:clamp(18px,2.3vw,30px);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;caret-color:#fff}
.rec-prompter-in::-webkit-scrollbar{display:none}
.rec-prompter-in::placeholder{color:rgba(255,255,255,.62);font-weight:600}
.rec-test-btn{margin-top:8px;width:100%}
.rec-timer{position:absolute;top:10px;left:10px;background:rgba(224,53,43,.92);color:#fff;font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:980px}
.rec-filter{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:.9rem;color:var(--tx);cursor:pointer}
.rec-filter input{width:17px;height:17px;accent-color:var(--accent2);margin:0;cursor:pointer}
.rec-range{accent-color:var(--accent2);width:100%}
.rec-typo{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.rec-typo .rec-range{width:100%;accent-color:var(--accent2);margin:0}
.rec-opt-lbl{display:block;font-size:.8rem;color:var(--tx2);text-align:center;margin-top:4px}
.rec-typo-btn{margin-top:8px}
.rec-actions{margin-top:10px}
.rec-actions .cta-inline{width:100%;padding:14px;font-size:1rem}
.cap-prev{position:absolute;left:50%;top:85%;transform:translate(-50%,-50%);max-width:88%;text-align:center;font-weight:800;font-size:clamp(15px,5.2vw,30px);color:#fff;text-shadow:0 2px 0 #000,0 0 7px rgba(0,0,0,.95),2px 2px 0 #000;text-transform:uppercase;pointer-events:none;line-height:1.12;z-index:3}

/* =====================  MOBILE — vraie app plein écran  ===================== */
/* Éditeur : aperçu en haut, onglets au milieu, actions collées en bas (sous 1000px) */
@media(max-width:1000px){
  /* Éditeur mobile : on DÉFILE verticalement (aperçu → onglets → timeline → barre collante).
     Le no-scroll desktop ne tient pas sur petit écran : la timeline écrasait l'aperçu. */
  main#app.wide{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 76px}
  main#app.wide>div:last-child{display:block;flex:none;min-height:0}
  main#app.wide .wk-bar{padding:8px 12px;margin:0;overflow:visible}
  main#app.wide .wk-bar .stepper{display:none}   /* redondant avec les onglets, libère le haut */
  .ed-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}   /* défile horizontalement sur mobile */
  .ed2{display:block;height:auto;min-height:0;gap:0;padding:0 12px}
  .ed2-top{display:block}
  .ed2-player{background:var(--bg);padding:4px 0 8px}
  .ed-player{height:42dvh;min-height:200px;max-height:46dvh;width:auto;aspect-ratio:9/16;margin:0 auto}
  .ed2-panel{border:0;box-shadow:none;padding:6px 0}
  .ed2-panels{overflow:visible;min-height:0}
  .ed-timeline{margin-top:4px;max-height:none;overflow:visible;border:0;background:transparent;padding:0}
  .ed2-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--hair);padding:10px 12px;margin:0 -12px;backdrop-filter:blur(8px);z-index:5}
  .ed2-actions .cta-inline{flex:1 1 auto;text-align:center}
}
@media(max-width:760px){
  body{height:100dvh}
  /* En-tête compact : marque courte + boutons en icône seule */
  header{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .brand{font-size:1rem;white-space:nowrap;flex:0 0 auto}
  .brand-tail{display:none}               /* « B-roll » suffit sur mobile */
  .head-btns{gap:8px;flex:0 0 auto}
  .head-btns button{min-height:40px;padding:0;width:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.05rem}
  .head-btns .hb-lbl{display:none}        /* icône seule */
  .head-btns .hb-ic{line-height:1}
  .qr-entry{display:none}                 /* déjà sur le téléphone */
  button{min-height:44px}
  .small{min-height:36px;padding:8px 13px}
  input,select,textarea{font-size:16px}   /* évite le zoom iOS */
  h1{font-size:1.4rem}
  /* Accueil : feed défilable propre */
  main:not(.wide):not(.fit1):not(.recmode){padding:14px 14px 28px}
  .hero{padding:10px 0 4px}.hero h1{font-size:1.55rem}.lead{margin-bottom:16px}
  .proj-grid{grid-template-columns:1fr}
  /* Barre étapes scrollable */
  .wk-bar{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .wk-bar::-webkit-scrollbar{display:none}
  .step-pill{padding:6px 10px;font-size:.78rem;flex:0 0 auto}
  .step-sep{flex-basis:8px}

  /* ===== RECORDER = plein écran TikTok : caméra full-bleed + prompteur au milieu ===== */
  body:has(main#app.recmode) header{display:none}            /* immersion totale */
  main#app.recmode{position:fixed;inset:0;padding:0;overflow:hidden;display:block;background:#000}
  .rec-card{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;background:#000;display:block}
  .rec-card>h2{display:none}
  .rec-cols{display:block;height:100%;gap:0}
  .rec-left{height:100%}
  .rec-stage{position:absolute;inset:0;height:100%;width:100%;max-width:none;margin:0;border-radius:0;aspect-ratio:auto}
  /* bouton retour flottant */
  main#app.recmode .wk-bar{position:fixed;top:12px;left:12px;width:auto;margin:0;padding:0;z-index:6}
  main#app.recmode .wk-bar .ghost{background:rgba(0,0,0,.45);color:#fff;border:0;backdrop-filter:blur(8px);min-height:40px}
  /* prompteur au milieu, devant le visage */
  .rec-prompter{top:15%;bottom:auto;height:50%;padding:0 16px}
  .rec-prompter-in{font-size:clamp(22px,6.6vw,34px);line-height:1.3}
  /* contrôles flottants en bas (sur la caméra) */
  .rec-right{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;gap:8px;padding:14px 14px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.6) 28%)}
  .rec-devs{flex-direction:row;gap:8px;order:1}
  .rec-devs>div{flex:1;min-width:0}
  .rec-devs label{display:none}
  .rec-devs select{background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.28);font-size:13px;padding:9px 10px}
  .rec-filter{order:2;margin:0;color:#fff;justify-content:center;font-size:.85rem}
  .rec-right>.rec-range{display:none}                        /* intensité réglable sur desktop */
  .rec-typo-btn{order:3;width:auto;align-self:center;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.3)}
  .rec-typo{order:3;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:10px 12px;margin:0}
  .rec-typo .rec-opt-lbl{color:#fff}
  .rec-test-btn{order:3;width:auto;align-self:center;margin:0;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.3)}
  .rec-actions{order:4;margin:0;display:flex;justify-content:center}
  .rec-actions .cta-inline{width:72px;height:72px;border-radius:50%;padding:0;font-size:0;background:#e0352b;border:4px solid #fff;box-shadow:0 0 0 4px rgba(0,0,0,.3);transition:transform .1s}
  .rec-actions .cta-inline:active{transform:scale(.92)}
  main#app.recmode .status{order:5;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);margin:0}
  .rec-timer{top:14px;left:50%;transform:translateX(-50%)}

  /* ===== ÉTAPE 1 (Vidéo) plein écran ===== */
  main#app.fit1{padding:0;overflow:hidden}
  main#app.fit1 .wk-bar{padding:8px 14px;margin:0}
  main#app.fit1 .s1-host{display:flex;min-height:0;padding:0 14px 10px}
  .stage1-card{height:100%;display:flex;margin:0;padding:0;border:0;box-shadow:none;background:transparent}
  .stage1-grid{display:flex;flex-direction:column;gap:10px;min-height:0}
  .stage1-left{flex:0 0 auto;min-height:0}
  .stage1-vid{height:40dvh;max-height:40dvh;width:auto;margin:0 auto}
  .stage1-right{flex:1 1 auto;min-height:0;overflow-y:auto}

  /* Résultat / modales / timeline */
  .final{max-width:100%}
  .modal-card,.qr-card,.login-card{max-width:100%}
  .tl-track{height:38px}
  .ed-tab{min-height:40px}
  .bc-clip{width:120px}
}
@media(max-width:380px){
  .ed-player{height:34dvh}
  .stage1-vid{height:36dvh;max-height:36dvh}
}

/* ============================================================
   ÉDITEUR PRO SOMBRE (façon CapCut) — scope main#app.wide
   L'accueil/recorder/résultat gardent le thème clair.
   ============================================================ */
main#app.wide{background:#0f1117;color:#e8eaf2}
body:has(main#app.wide){background:#0f1117}
main#app.wide .wk-bar .ghost{background:#1a1d26;color:#cdd3e1;border:1px solid #272b38}
main#app.wide .ed2-panel{background:#161922;border-color:#262a36;box-shadow:none}
main#app.wide .ed-tab{background:#1d212c;border-color:#2a2f3d;color:#aab2c6}
main#app.wide .ed-tab.active{background:var(--accent2);border-color:var(--accent2);color:#fff}
main#app.wide h2,main#app.wide .col-title,main#app.wide label,main#app.wide b{color:#e8eaf2}
main#app.wide .hint,main#app.wide .muted{color:#8b93a8}
main#app.wide input,main#app.wide select,main#app.wide textarea{background:#10131b;color:#e8eaf2;border-color:#2a2f3d}
main#app.wide .bcard,main#app.wide .card,main#app.wide .ref-row{background:#1b1f2a;border-color:#2a2f3d;color:#e8eaf2}
main#app.wide .ed2-panel .bcard{background:#1b1f2a}
main#app.wide .bc-head .bc-title{color:#e8eaf2}
main#app.wide .pill{background:#242938;color:#aab2c6;border-color:transparent}
main#app.wide .banner{background:#221d10;border-color:#4a3c14;color:#e8d9a8}
main#app.wide .status{color:#aab2c6}
main#app.wide .status.ok{color:#43d17c}
main#app.wide .status.err{color:#ff6b61}
main#app.wide .mini-ok{color:#43d17c}
main#app.wide .retouche-sep{background:#262a36}
main#app.wide .cap-line input{background:#10131b}
main#app.wide .ed-tr-body{color:#cdd3e1}
/* Aperçu + transport */
main#app.wide .ed-player{border-radius:12px;box-shadow:0 0 0 1px #262a36}
.ed-transport{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 0 0;flex:0 0 auto}
.tp-btn{background:#1d212c;border:1px solid #2a2f3d;color:#e8eaf2;border-radius:9px;min-height:34px;padding:4px 12px;font-size:.85rem;cursor:pointer}
.tp-btn:hover{background:#262b39}
.tp-play{min-width:48px;font-size:1rem}
.tp-time{font-variant-numeric:tabular-nums;color:#8b93a8;font-size:.8rem;margin-left:6px}
main#app.wide .ed2-player{flex-direction:column;justify-content:center;gap:0}
/* Timeline pro */
main#app.wide .ed-timeline{background:#13151d;border-color:#262a36;border-radius:12px;padding:10px 14px}
main#app.wide .tl-head{margin-bottom:6px;display:flex;align-items:center;gap:10px}
main#app.wide .tl-head .col-title{color:#8b93a8;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
main#app.wide .tl-head .vid-tools{margin-left:auto;display:flex;gap:8px}
main#app.wide .tl-head .small{background:#1d212c;border:1px solid #2a2f3d;color:#cdd3e1}
.tl-body{position:relative}
.tl-row{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center;margin:5px 0}
.tl-rowlbl{font-size:.64rem;font-weight:700;color:#737b90;text-transform:uppercase;letter-spacing:.05em;text-align:right;padding-right:2px;user-select:none}
.tl-row-ruler{margin:0 0 2px}
.tl-ruler{position:relative;height:24px;cursor:ew-resize;touch-action:none}
.tl-tick{position:absolute;bottom:0;width:1px;height:6px;background:#3a4052}
.tl-tick.major{height:11px;background:#5a6178}
.tl-ticklbl{position:absolute;top:0;font-size:.6rem;color:#737b90;transform:translateX(3px);font-variant-numeric:tabular-nums}
main#app.wide .tl-track{background:#1b1f2a;border-radius:8px;overflow:hidden}
main#app.wide .tl-vidtrack{height:52px;background-size:100% 100%;background-repeat:no-repeat;background-color:#1b1f2a}
main#app.wide .tl-brolltrack{height:40px}
main#app.wide .tl-captrack{height:30px}
main#app.wide .tl-mustrack{height:38px}
main#app.wide .tl-mus{background-size:100% 100%,100% 100%;background-repeat:no-repeat;border-color:#2ea36b}
main#app.wide .tl-cap{background:rgba(96,135,255,.16);border-color:rgba(120,150,255,.45);color:#dbe2ff}
main#app.wide .tl-block.planned{background:#222737;border:1.5px dashed #3a4156;color:#8b93a8}
/* Tête de lecture globale */
.tl-playhead-g{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.55);z-index:7;pointer-events:none;border-radius:1px}
.tl-playhead-g::before{content:'';position:absolute;top:-1px;left:-4px;border:5px solid transparent;border-top:7px solid #fff}
main#app.wide .tl-playhead{display:none}
/* Revue de coupe + actions */
main#app.wide .cut-review{background:rgba(224,53,43,.08);border-color:rgba(224,53,43,.45)}
main#app.wide .cr-txt{color:#e8eaf2}
main#app.wide .ed2-actions{background:transparent}
main#app.wide .ed2-actions .soft{background:#1d212c;border:1px solid #2a2f3d;color:#e8eaf2}
main#app.wide button.small.ghost{color:#aab2c6}
main#app.wide .linklike{color:#7da3ff}
@media(max-width:1000px){
  main#app.wide .ed2-actions{background:rgba(15,17,23,.95);border-top:1px solid #262a36}
  .tl-row{grid-template-columns:64px 1fr;gap:8px}
  .tl-rowlbl{font-size:.58rem}
  main#app.wide .ed-timeline{border:1px solid #262a36;background:#13151d;padding:10px 12px}
}
/* En-tête sombre quand l'éditeur est ouvert */
body:has(main#app.wide) header{background:rgba(15,17,23,.85);border-bottom-color:#262a36}
body:has(main#app.wide) .brand{color:#e8eaf2}
body:has(main#app.wide) .head-btns button{background:#1a1d26;color:#cdd3e1;border:1px solid #272b38}
/* Panneaux internes d'onglet : transparents en sombre (le conteneur .ed2-panel porte la surface) */
main#app.wide .ed-panel{background:transparent;border:0;box-shadow:none}
/* Badge de précision pendant un drag sur la timeline */
.tl-dragbadge{position:absolute;display:none;transform:translate(-50%,-100%);background:rgba(5,7,12,.92);color:#fff;font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);pointer-events:none;z-index:9;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5)}

/* ===== Lot « app finalisée » : timeline zoomable, studio, filtres, covers ===== */
/* Timeline : labels fixes + pistes zoomables */
.tl-body{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start}
.tl-labels{display:flex;flex-direction:column;gap:5px}
.tl-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#3a4052 transparent}
.tl-lanes{position:relative;display:flex;flex-direction:column;gap:5px;width:100%;min-width:100%}
.tl-lane{position:relative;width:100%}
.tl-lane>.tl-track,.tl-lane>.tl-ruler{height:100%}
.tl-rowlbl.r-ruler,.tl-lane.r-ruler{height:24px}
.tl-rowlbl.r-video,.tl-lane.r-video{height:52px}
.tl-rowlbl.r-brolls,.tl-lane.r-brolls{height:40px}
.tl-rowlbl.r-caps,.tl-lane.r-caps{height:30px}
.tl-rowlbl.r-music,.tl-lane.r-music{height:38px}
main#app.wide .tl-track{height:100%}
.tl-tool{min-height:30px;padding:4px 10px;border-radius:8px}
.tl-zoomlbl{font-size:.72rem;color:#8b93a8;font-variant-numeric:tabular-nums;min-width:42px;text-align:center}
/* Waveform de la voix par-dessus le filmstrip */
.tl-voicewave{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;opacity:.75;pointer-events:none;mix-blend-mode:screen}
/* Vignette du b-roll généré dans son bloc */
main#app.wide .tl-block.has-thumb{background-size:cover;background-position:center;color:#fff}
.tl-block.has-thumb .tl-blk-n{background:rgba(5,7,12,.72);border-radius:6px;padding:1px 7px;font-size:.72rem}
/* Chips de filtre vidéo */
.vf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.vf-chip{background:#1d212c;border:1px solid #2a2f3d;color:#cdd3e1;border-radius:10px;padding:8px 13px;font-size:.82rem}
.vf-chip.on{background:var(--accent2);border-color:var(--accent2);color:#fff}
/* Studio téléprompteur (desktop sombre) */
body:has(main#app.recmode){background:#0b0d12}
body:has(main#app.recmode) header{display:none}
main#app.recmode{background:#0b0d12;max-width:none;padding:14px 22px;overflow-y:auto}
main#app.recmode .wk-bar .ghost{background:rgba(255,255,255,.08);color:#e8eaf2;border:0}
main#app.recmode .rec-card{background:transparent;border:0;box-shadow:none;color:#e8eaf2}
main#app.recmode .rec-card>h2{color:#e8eaf2;text-align:center;margin-bottom:18px}
@media(min-width:761px){
  .rec-cols{display:flex;gap:30px;justify-content:center;align-items:flex-start}
  .rec-left{flex:0 0 auto}
  .rec-stage{height:min(74vh,780px);aspect-ratio:9/16;width:auto;max-width:none;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -36px rgba(0,0,0,.95)}
  .rec-right{width:330px;display:flex;flex-direction:column;gap:10px}
  main#app.recmode label{color:#9aa3b8}
  main#app.recmode select{background:#151823;color:#e8eaf2;border-color:#262b38}
  main#app.recmode .soft{background:#1a1e29;color:#e8eaf2;border:1px solid #262b38}
  main#app.recmode .rec-typo{background:#151823;border:1px solid #262b38;border-radius:12px;padding:10px 12px}
  main#app.recmode .rec-opt-lbl{color:#e8eaf2}
  main#app.recmode .status{color:#9aa3b8}
}
.rec-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;font-weight:800;color:#fff;background:rgba(0,0,0,.35);z-index:8;text-shadow:0 6px 30px rgba(0,0,0,.85)}
.rec-count.pop{animation:recpop .65s ease}
@keyframes recpop{0%{transform:scale(1.6);opacity:0}30%{transform:scale(1);opacity:1}100%{opacity:.92}}
.rec-review{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:7}
.rec-review-bar{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:10px;justify-content:center;z-index:9}
/* Accueil : covers de projets + badges d'état */
.pc-cover{height:74px;border-radius:10px;margin-bottom:10px;background:linear-gradient(135deg,#e3e9ff,#f1e8ff) center/cover no-repeat}
.proj-card .pc-cover{background-image:linear-gradient(135deg,#e3e9ff,#f1e8ff)}
.proj-card .pc-cover[style*="filmstrip"]{background-blend-mode:normal}
.badge.st-rendered{background:rgba(22,163,74,.12);color:#15803d;border-color:rgba(22,163,74,.3)}
.badge.st-busy{background:rgba(217,144,0,.12);color:#b45309;border-color:rgba(217,144,0,.35);animation:stpulse 1.4s infinite}
.badge.st-ready{background:rgba(77,124,255,.12);color:#3554c8;border-color:rgba(77,124,255,.3)}
@keyframes stpulse{50%{opacity:.55}}
/* Résultat */
.final-card{text-align:center}
.final-card video.final{max-height:64vh;width:auto;max-width:100%;border-radius:14px;margin:10px auto;display:block;background:#000}
.final-score{font-size:.9rem;color:var(--tx2);margin:2px 0 6px}
.final-actions{display:flex;gap:10px;justify-content:center;margin:12px 0 4px}
.final-actions .dl-btn{display:inline-block;background:var(--grad);color:#fff;border-radius:980px;padding:12px 24px;text-decoration:none;font-weight:600}
@media(max-width:1000px){
  .tl-body{grid-template-columns:62px 1fr;gap:8px}
}