/* Thème « Conduite d'émission » — Studio Démo Événements.
   Charge après le <style> d'origine : mêmes variables, mêmes classes/id/data-*
   utilisés par le script, aucune position ni dimension du canevas #stage n'est touchée. */

@font-face{font-family:'Archivo';src:url('fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('fonts/archivo-narrow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('fonts/archivo-narrow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* palette imposée : papier / encre / 3 tops */
  --papier:#F6F6F4;--encre:#111111;--vert:#2D6A4F;--rouge:#E5383B;--bleu:#1D4E89;--ambre:#8a5a00;

  --bg:var(--papier);--bg2:#EBEBE5;--surface:#FFFFFF;--ink:var(--encre);--ink2:#2A2A28;
  --muted:#55585C;--faint:#6E7173;--line:rgba(17,17,17,.14);--line2:rgba(17,17,17,.24);
  --accent:var(--bleu);--acc-t:var(--bleu);--accent-ink:#ffffff;
  --ok:var(--vert);--ok-soft:color-mix(in srgb,var(--vert) 14%,#fff);
  --warn:var(--ambre);--warn-soft:color-mix(in srgb,var(--ambre) 16%,#fff);
  --bad:color-mix(in srgb,var(--rouge) 85%,black);--bad-soft:color-mix(in srgb,var(--rouge) 10%,#fff);
  --grid:color-mix(in srgb,var(--encre) 4%,var(--papier));

  --r:6px;--r-md:5px;--r-sm:4px;
  --sh1:0 1px 0 rgba(17,17,17,.07);
  --sh2:0 1px 0 rgba(17,17,17,.07),0 14px 28px -20px rgba(17,17,17,.4);

  --f-ui:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --f-d:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --f-m:'Archivo Narrow','Archivo',-apple-system,sans-serif;
}

/* Instrument/JetBrains n'étant plus chargées, on enlève le remplacement de glyphe KDot. */
:root{--f-ui:'Archivo',-apple-system,'Segoe UI',sans-serif}

.rib,.eyebrow,.chip,.tag,.foot{word-spacing:normal}
.rib{background:var(--encre);font-family:var(--f-ui);padding-inline:2px}
body{font-family:var(--f-ui)}
.sh thead tr.letters th,.sh .rn{color:#5b5f63}
.elab.pill{font-size:12px}
.tl-m span{font-size:12px}
.tag{font-size:12.5px}
.note b{color:#6b5720}
@media(max-width:719px){.elab{font-size:11px}}

/* ── cartes guides : icône en ligne avec le titre, sans pavé décoratif ── */
.gd{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:start}
.gd .gi{grid-column:1;grid-row:1;width:26px;height:26px;background:none;border:0;color:var(--bleu)}
.gd .gi svg{width:22px;height:22px}
.gd h3{grid-column:2;grid-row:1;margin-top:2px}
.gd p,.gd ul,.gd .g-res,.gd .act{grid-column:1/-1}

.rib .wrap{padding-inline:4px}
.hero-rule{padding:18px 0 18px 26px}

/* ── devis/facture : un simple filet au lieu d'une carte dans la carte, pas de liseré collé au bord ── */
.qt-doc,.inv-doc{border:0;border-radius:0;box-shadow:none;background:transparent;border-top:2px solid var(--encre);padding-left:0;padding-right:0}

/* ── titres : une seule famille (Archivo), graisse et chasse qui portent la hiérarchie ── */
.hero h1{font:800 clamp(40px,6.2vw,80px)/0.98 var(--f-ui);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:inherit;font-weight:inherit}
.sec-h h2{font:800 clamp(26px,3.2vw,38px)/1.06 var(--f-ui);letter-spacing:-.01em}
.sec-h .kick{font:700 11.5px/1 var(--f-ui);letter-spacing:.1em}
.qt-brand{font:700 20px/1.15 var(--f-ui)}
.inv-top h4{font:700 24px/1 var(--f-ui)}
.step::before{color:var(--bleu)}

/* ── hero : feuille de conduite, colonne minutage + titre, pas de centrage ── */
.hero{padding:clamp(28px,5vw,52px) 0 clamp(30px,5vw,56px)}
.hero .eyebrow{font:600 13px/1.3 var(--f-ui);letter-spacing:.01em;text-transform:none;color:var(--muted)}
.hero .eyebrow::before{display:none}
.hero-grid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 32px;align-items:stretch}
.hero-rule{position:relative;display:flex;flex-direction:column;gap:18px;padding:12px 0 12px 22px;border-left:2px solid var(--encre)}
.hero-rule-tag{font:700 11px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--bleu);margin-bottom:4px}
.hero-rule-j{position:relative;display:flex;flex-direction:column;line-height:1.1}
.hero-rule-j::before{content:"";position:absolute;left:-25px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--bleu);box-shadow:0 0 0 3px var(--papier),0 0 0 4px var(--line2)}
.hero-rule-j b{font:700 17px/1 var(--f-m);color:var(--encre);font-variant-numeric:tabular-nums}
.hero-rule-j i{font:500 10.5px/1.3 var(--f-ui);font-style:normal;color:var(--muted);margin-top:2px}
.hero-main{min-width:0}
.hero .lead{margin-top:16px}
.hero .chips{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line2)}
.hero .chip{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;gap:7px;font-weight:600}
.hero .chip svg{color:var(--bleu)}
@media(max-width:719px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-rule{flex-direction:row;flex-wrap:wrap;gap:14px 20px;border-left:0;border-top:2px solid var(--encre);padding:14px 0 0}
  .hero-rule-tag{width:100%;margin-bottom:0}
  .hero-rule-j::before{left:0;top:-18px}
}

/* ── panneaux : rayons et ombres plus sobres, « papier » plutôt que « SaaS » ── */
.panel{box-shadow:var(--sh2)}
.gd,.step,.deliv li{box-shadow:var(--sh1)}
.btn{border-radius:999px;height:44px}
.btn.sm{height:44px}
.sw{min-height:44px}
.m-cta{background:color-mix(in srgb,var(--bleu) 6%,#fff);border-color:color-mix(in srgb,var(--bleu) 35%,#fff)}
.m-msg{color:var(--bleu)}
.qt-doc::before{background:var(--bleu)}

/* ── canevas (#stage) : chaque ligne de la conduite garde sa lumière de déclencheur ── */
.nd{border-left:3px solid var(--line2)}
.nd.trig{border-left-color:var(--bleu)}
.nd.run{border-color:var(--rouge);border-left-color:var(--rouge);box-shadow:0 0 0 4px color-mix(in srgb,var(--rouge) 18%,transparent),0 16px 30px -16px color-mix(in srgb,var(--rouge) 55%,transparent)}
.nd.run .nd-ico{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.nd.run .nd-st{border-color:var(--rouge)}
.nd.run .nd-st::after{border-color:var(--rouge);border-right-color:transparent}
.nd.done{border-left-color:var(--vert)}
.nd.done .nd-st{background:var(--vert);border-color:var(--vert)}
.nd.wait{border-color:var(--ambre);border-left-color:var(--ambre);box-shadow:0 0 0 4px color-mix(in srgb,var(--ambre) 18%,transparent)}
.nd.wait .nd-st{background:var(--ambre);border-color:var(--ambre)}
.edges g.on .e{stroke:var(--rouge)}
.edges g.on .pt{stroke:var(--rouge);fill:var(--rouge)}
.edges g.flow .ef{stroke:var(--rouge)}
.edges g.flow .e{stroke:color-mix(in srgb,var(--rouge) 45%,var(--papier))}
.ist.run{color:var(--rouge)}.ist.run::before{background:var(--rouge)}
.ist.done{color:var(--vert)}.ist.done::before{background:var(--vert)}
.ist.wait{color:var(--ambre)}.ist.wait::before{background:var(--ambre)}
.legend .l-run i{background:var(--rouge)}.legend .l-done i{background:var(--vert)}.legend .l-wait i{background:var(--ambre)}

/* ── le chrono de régie (#player) : élément signature, lumière de top rouge/verte ── */
.player{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.player .ib{background:transparent;border-color:rgba(246,246,244,.28);color:var(--papier)}
.player .ib:hover{background:rgba(246,246,244,.1);border-color:rgba(246,246,244,.5)}
.pl-btns .btn{background:var(--vert);color:#fff;min-width:200px}
.pl-btns .btn:hover{box-shadow:0 10px 24px -12px var(--vert)}
.pl-btns .btn.is-run{background:color-mix(in srgb,var(--rouge) 88%,black)}
.pl-btns .btn.is-run:hover{box-shadow:0 10px 24px -12px var(--rouge)}
.clock{position:relative;padding-left:30px;border-left-color:rgba(246,246,244,.22)}
.clock::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 4px color-mix(in srgb,var(--vert) 25%,transparent)}
#player:has(#play.is-run) .clock::before{background:var(--rouge);box-shadow:0 0 0 4px color-mix(in srgb,var(--rouge) 28%,transparent);animation:tally 1.1s ease-in-out infinite}
@keyframes tally{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--rouge) 28%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--rouge) 8%,transparent)}}
.ck-d{font:700 clamp(28px,3.4vw,40px)/1 var(--f-m);color:var(--papier);letter-spacing:0}
.ck-t{color:rgba(246,246,244,.75)}
.ck-t .mono{color:rgba(246,246,244,.55)}
.tl-track{background:rgba(246,246,244,.16)}
.tl-fill{background:var(--rouge)}
.tl-m::before{background:var(--encre);border-color:rgba(246,246,244,.4)}
.tl-m.past::before{border-color:var(--rouge);background:var(--rouge)}
.tl-m span{color:rgba(246,246,244,.65)}
.tl-m span b{color:var(--papier);font-family:var(--f-m)}
.pl-ap{background:color-mix(in srgb,var(--ambre) 16%,#fff);color:#6b4600}

@media (prefers-reduced-motion: reduce){
  #player:has(#play.is-run) .clock::before{animation:none}
}