/* ==========================================================================
   Widget « Comment ça fonctionne » — séquence auto-jouée en 5 étapes.
   Deux écrans en parallèle : le téléphone du client et vos outils (agenda,
   résumé, tableau de bord). Tout est en em : la taille de police de .dw
   règle l'échelle du widget entier (large ≈ 16px, compact ≈ 13px).
   ========================================================================== */
.dw-wrap{width:100%;}
.dw{--ph:17em;--stage:27em;font-size:16px;position:relative;color:var(--ink);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;}
.dw.compact{font-size:13px;}
.dw *{box-sizing:border-box;}

/* ---- En-tête : titre + segments d'étapes (barre de progression par étape) ---- */
.dw-head{display:flex;align-items:center;gap:1em;padding:.8em 1.25em;border-bottom:1px solid var(--line);}
.dw-head .lv{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.66em;
  letter-spacing:.14em;text-transform:uppercase;color:var(--maple-2);white-space:nowrap;}
.dw-head .lv::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--maple);animation:blink 1.6s infinite;}
.dw-steps{margin-left:auto;display:flex;gap:.35em;flex:1;justify-content:flex-end;max-width:64%;}
.dw-step{position:relative;flex:1;max-width:10.5em;background:none;border:0;padding:.45em .55em .7em;
  text-align:left;cursor:pointer;color:var(--muted);font:inherit;transition:color .25s;}
.dw-step .n{font-family:var(--mono);font-size:.6em;letter-spacing:.12em;display:block;margin-bottom:.3em;}
.dw-step .lbl{font-size:.76em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.dw-step .bar{position:absolute;left:.55em;right:.55em;bottom:0;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;}
.dw-step .bar i{display:block;height:100%;width:0;background:var(--maple);}
.dw-step.done .bar i{width:100%;background:var(--maple-deep);}
.dw-step.on{color:var(--ink);}
.dw-step.on .n{color:var(--maple-2);}
.dw-step:hover{color:var(--ink);}

/* ---- Scène : deux volets (le téléphone se replie sur les slides « admin seul ») ---- */
.dw-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);gap:1.25em;padding:1.25em;align-items:stretch;
  transition:grid-template-columns .55s ease,gap .55s ease;}
.dw.no-phone .dw-stage{grid-template-columns:minmax(0,0fr) minmax(0,1fr);gap:0;}
.dw.no-phone .dw-pane.client{opacity:0;pointer-events:none;}
.dw-pane{display:flex;flex-direction:column;gap:.6em;min-width:0;overflow:hidden;transition:opacity .35s;}
.dw-pane.client .phone{width:100%;}
.dw-side{font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:.7em;align-items:center;white-space:nowrap;overflow:hidden;}
.dw-side b{color:var(--ink);font-weight:600;}
.dw-side::before{content:"";width:1.3em;height:1px;background:var(--line-2);flex:0 0 auto;}

/* Scènes empilées, une seule visible par volet — la nouvelle arrive de la droite,
   l'ancienne sort vers la gauche */
.dw-body{position:relative;flex:1;}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(-1.4em);
  transition:opacity .4s,visibility .4s,transform .4s;}
.scene.active{opacity:1;visibility:visible;transform:none;animation:dwSlideIn .55s cubic-bezier(.2,.7,.2,1) both;}
@keyframes dwSlideIn{from{opacity:0;transform:translateX(2.4em);}to{opacity:1;transform:none;}}
.a{opacity:0;}
.scene.active .a{animation:dwRise .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s);}
@keyframes dwRise{from{opacity:0;transform:translateY(.6em);}to{opacity:1;transform:none;}}

/* ---- Téléphone du client ---- */
.phone{position:relative;height:var(--stage);border-radius:2.3em;background:#08090a;border:1px solid var(--line-2);
  padding:.55em;box-shadow:0 30px 60px -28px rgba(0,0,0,.9);}
.phone .scr{position:relative;height:100%;border-radius:1.8em;background:#111214;overflow:hidden;display:flex;flex-direction:column;}
.phone .notch{position:absolute;top:.5em;left:50%;transform:translateX(-50%);width:5em;height:1.1em;border-radius:1em;background:#08090a;z-index:2;}
.phone .sb{display:flex;justify-content:space-between;align-items:center;padding:.85em 1.2em .2em;font-family:var(--mono);font-size:.66em;color:var(--ink-soft);}
.phone .sb .sig{display:inline-flex;gap:.2em;align-items:flex-end;}
.phone .sb .sig i{width:.28em;background:var(--ink-soft);border-radius:1px;}
.phone .body{position:relative;flex:1;}
.phone .scene{padding:.7em .95em .95em;}

/* Écran d'appel */
.call{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:1.9em;height:100%;}
.call .av{width:4.4em;height:4.4em;border-radius:50%;background:var(--maple-tint);border:1px solid rgba(183,222,85,.35);
  display:grid;place-items:center;color:var(--maple-2);position:relative;margin-bottom:1em;}
.call .av svg{width:1.8em;height:1.8em;}
.call .av::before,.call .av::after{content:"";position:absolute;inset:-.4em;border-radius:50%;border:1px solid rgba(183,222,85,.45);animation:dwRipple 2s ease-out infinite;}
.call .av::after{animation-delay:1s;}
@keyframes dwRipple{from{transform:scale(.9);opacity:.8;}to{transform:scale(1.75);opacity:0;}}
.call .who{font-weight:700;font-size:1em;}
.call .st{font-family:var(--mono);font-size:.64em;color:var(--muted);margin-top:.35em;letter-spacing:.06em;}
.call .ans{margin-top:1.1em;display:inline-flex;align-items:center;gap:.5em;background:var(--maple-tint);
  border:1px solid rgba(183,222,85,.4);border-radius:999px;padding:.45em .85em;font-size:.68em;color:var(--maple-2);white-space:nowrap;}
.call .ans svg{width:1em;height:1em;}
.call .hang{margin-top:auto;width:3em;height:3em;border-radius:50%;background:var(--loss);display:grid;place-items:center;color:#fff;margin-bottom:.3em;}
.call .hang svg{width:1.3em;height:1.3em;transform:rotate(135deg);}

/* Enchaînement appel → conversation sur le même écran (compact) */
.phase{position:absolute;inset:.7em .95em .95em;}
.scene.active .phase1{animation:dwOut .4s 1.9s both;}
.phase2{opacity:0;}
.scene.active .phase2{animation:dwIn .4s 2.1s both;}
@keyframes dwOut{to{opacity:0;visibility:hidden;}}
@keyframes dwIn{to{opacity:1;}}

/* Transcription de la conversation */
.trans{display:flex;flex-direction:column;gap:.45em;height:100%;}
.trans .hd{font-family:var(--mono);font-size:.58em;letter-spacing:.1em;color:var(--muted);text-align:center;margin-bottom:.5em;text-transform:uppercase;}
.b{max-width:90%;padding:.5em .75em;border-radius:.95em;font-size:.74em;line-height:1.4;}
.b.c{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--ink-soft);border-bottom-left-radius:.3em;}
.b.ai{align-self:flex-end;background:var(--maple-tint);border:1px solid rgba(183,222,85,.3);color:var(--ink);border-bottom-right-radius:.3em;}

/* Textos */
.sms{display:flex;flex-direction:column;gap:.45em;}
.sms .hd{text-align:center;font-weight:600;font-size:.78em;padding-bottom:.55em;border-bottom:1px solid var(--line);margin-bottom:.3em;}
.sms .hd small{display:block;font-family:var(--mono);font-size:.78em;font-weight:400;color:var(--muted);letter-spacing:.06em;margin-top:.15em;}
.sms .ts{font-family:var(--mono);font-size:.56em;color:var(--muted);text-align:center;margin:.2em 0;}
.sms .m{max-width:94%;background:rgba(255,255,255,.07);border-radius:1em;border-bottom-left-radius:.3em;padding:.6em .8em;font-size:.72em;line-height:1.45;color:var(--ink-soft);}
.sms .m b{color:var(--ink);}
.sms .m.me{align-self:flex-end;background:var(--maple);color:#12140A;border-bottom-left-radius:1em;border-bottom-right-radius:.3em;}
.sms .m .ok{color:var(--maple-2);font-weight:700;}

/* ---- Vos outils (fenêtre) ---- */
.admin{height:var(--stage);border-radius:1.1em;background:var(--bg-3);border:1px solid var(--line-2);overflow:hidden;display:flex;flex-direction:column;}
.admin .wb{display:flex;align-items:center;gap:.4em;padding:.6em .9em;border-bottom:1px solid var(--line);}
.admin .wb i{width:.55em;height:.55em;border-radius:50%;background:var(--line-2);}
.admin .wb i:nth-child(1){background:#e0575f;} .admin .wb i:nth-child(2){background:#e8b54d;} .admin .wb i:nth-child(3){background:var(--maple-deep);}
.admin .wb .t{margin-left:.6em;font-family:var(--mono);font-size:.62em;letter-spacing:.1em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin .body{position:relative;flex:1;}
.admin .scene{padding:1.1em 1.2em 1.2em;}
.st-line{font-family:var(--mono);font-size:.64em;letter-spacing:.06em;color:var(--muted);display:flex;gap:.8em;align-items:center;margin-bottom:.9em;min-height:1.4em;}
.st-line .ok{color:var(--maple-2);}
.st-line .lv-dot{width:.7em;height:.7em;border-radius:50%;background:var(--maple);animation:blink 1.6s infinite;flex:0 0 auto;}

/* Console d'appel en direct (PC, slide 1 en mode large) */
.live{display:grid;grid-template-columns:1.15fr .85fr;gap:1.3em;height:100%;}
.live-l{display:flex;flex-direction:column;gap:.5em;min-width:0;}
.live-l .b.big{font-size:.86em;max-width:92%;}
.live-r{border-left:1px solid var(--line);padding-left:1.3em;}
.live-r .lab{font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1em;}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em;}
.checks li{display:flex;gap:.7em;align-items:flex-start;font-size:.82em;color:var(--ink-soft);line-height:1.35;}
.checks li .ck{width:1.35em;height:1.35em;border-radius:50%;background:var(--maple);color:#12140A;display:grid;place-items:center;flex:0 0 auto;margin-top:.05em;}
.checks li .ck svg{width:.75em;height:.75em;}
.checks li b{color:var(--ink);font-weight:600;}

/* Étape 1 — soirée tranquille */
.quiet{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.3em;}
.quiet .time{font-family:var(--mono);font-size:2.6em;font-weight:700;letter-spacing:-.03em;line-height:1;}
.quiet .date{font-size:.8em;color:var(--muted);margin-bottom:1.1em;}
.quiet .chips{display:flex;flex-direction:column;gap:.45em;align-items:center;}
.quiet .chip2{display:inline-flex;align-items:center;gap:.55em;font-size:.74em;color:var(--ink-soft);
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:999px;padding:.45em .9em;}
.quiet .chip2 svg{width:1em;height:1em;color:var(--muted);flex:0 0 auto;}
.quiet .chip2.ok{border-color:rgba(183,222,85,.35);color:var(--maple-2);background:var(--maple-tint);}
.quiet .chip2.ok svg{color:var(--maple-2);}

/* Étapes 2-3 — agenda (semaine) */
.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em;height:calc(100% - 2.6em);}
.cal .col{position:relative;border:1px solid var(--line);border-radius:.6em;background:rgba(255,255,255,.015);overflow:hidden;}
.cal .col .dh{font-family:var(--mono);font-size:.56em;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-align:center;padding:.6em 0;border-bottom:1px solid var(--line);}
.cal .col.today .dh{color:var(--maple-2);}
.cal .col.today{border-color:rgba(183,222,85,.35);}
.cal .grid{position:absolute;top:2.2em;left:.3em;right:.3em;bottom:.3em;}
.cal .ev{position:absolute;left:0;right:0;border-radius:.35em;padding:.3em .4em;font-size:.6em;line-height:1.25;
  background:rgba(255,255,255,.07);border-left:2px solid var(--line-2);color:var(--ink-soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cal .ev b{display:block;color:var(--ink);font-weight:600;}
.cal .ev.new{background:var(--maple-tint);border-left-color:var(--maple);color:var(--ink);}
.cal .ev.new b{color:var(--maple-2);}
.cal .ev.new small{display:block;font-family:var(--mono);font-size:.85em;color:var(--maple-2);opacity:.85;margin-top:.15em;}
.cal .scan{position:absolute;left:0;right:0;height:14%;border-radius:.35em;
  background:linear-gradient(180deg,transparent,rgba(183,222,85,.28),transparent);opacity:0;}
.scene.active .cal .scan{animation:dwScan 1.4s .2s ease-in-out both;}
@keyframes dwScan{0%{top:0;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:86%;opacity:0;}}
.cal .free{position:absolute;left:0;right:0;border-radius:.35em;padding:.3em .4em;font-size:.6em;line-height:1.25;
  border:1px dashed rgba(183,222,85,.6);color:var(--maple-2);background:var(--maple-tint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scene.active .free{animation:dwRise .4s both;animation-delay:var(--d,1.5s);}
.free{opacity:0;}
.scene.active .ev.new{animation:dwPop .55s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:var(--d,.5s);}
.ev.new{opacity:0;}
@keyframes dwPop{from{opacity:0;transform:scale(.85) translateY(.4em);}to{opacity:1;transform:none;}}

/* Étape 4 — résumé reçu */
.mail{height:100%;display:flex;flex-direction:column;}
.mail .mh{display:flex;align-items:center;gap:.8em;padding-bottom:.8em;border-bottom:1px solid var(--line);margin-bottom:.8em;}
.mail .mh .ic{width:2.2em;height:2.2em;border-radius:.6em;background:var(--maple-tint);border:1px solid rgba(183,222,85,.3);display:grid;place-items:center;color:var(--maple-2);flex:0 0 auto;}
.mail .mh .ic svg{width:1.05em;height:1.05em;}
.mail .mh b{display:block;font-size:.88em;}
.mail .mh span{font-family:var(--mono);font-size:.6em;color:var(--muted);letter-spacing:.06em;}
.mail .row{display:grid;grid-template-columns:5.2em 1fr;gap:.8em;padding:.5em 0;border-bottom:1px solid var(--line);font-size:.78em;}
.mail .row:last-of-type{border-bottom:0;}
.mail .row .k{font-family:var(--mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--maple);padding-top:.2em;}
.mail .row .v{color:var(--ink-soft);line-height:1.4;}
.mail .row .v b{color:var(--ink);font-weight:600;}
.mail .row.note .v{color:var(--ink);background:rgba(232,181,77,.08);border:1px solid rgba(232,181,77,.25);border-radius:.5em;padding:.4em .6em;}
.mail .mf{margin-top:auto;font-family:var(--mono);font-size:.58em;color:var(--muted);letter-spacing:.06em;}

/* Tableau de bord — réplique de l'écran du produit */
.db{height:100%;display:flex;flex-direction:column;gap:.55em;min-height:0;}
.db-head b{display:block;font-size:1.02em;font-weight:600;letter-spacing:-.01em;}
.db-head span{font-size:.62em;color:var(--muted);}
.db-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em;}
.db-card{position:relative;border:1px solid var(--line-2);border-radius:.85em;padding:.6em .85em .55em;background:rgba(255,255,255,.02);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7em;align-items:center;min-width:0;}
.db-card.hi{border-color:rgba(183,222,85,.5);background:linear-gradient(160deg,rgba(183,222,85,.1),rgba(183,222,85,.02) 60%);
  box-shadow:0 0 0 1px rgba(183,222,85,.12),0 0 28px -12px rgba(183,222,85,.45);}
.db-card .ic{grid-row:1/3;width:2.2em;height:2.2em;border-radius:.6em;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink-soft);}
.db-card.hi .ic{background:var(--maple);border-color:var(--maple);color:#12140A;}
.db-card .ic svg{width:1em;height:1em;}
.db-card .l{font-size:.66em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-card .v{font-family:var(--serif);font-weight:500;font-size:1.7em;line-height:1.05;letter-spacing:-.01em;color:var(--ink);}
.db-card .s{grid-column:1/3;font-size:.58em;color:var(--muted);margin-top:.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:.55em;flex:1;min-height:0;}
.db-chart{border:1px solid var(--line);border-radius:.85em;padding:.7em .9em .55em;display:flex;flex-direction:column;min-width:0;min-height:0;}
.db-chart .ch-h{display:flex;justify-content:space-between;align-items:flex-start;gap:.6em;}
.db-chart .ch-h b{display:block;font-family:var(--serif);font-weight:500;font-size:.98em;}
.db-chart .ch-h span{font-size:.62em;color:var(--muted);}
.db-chart .sel{font-size:.62em;color:var(--ink-soft);border:1px solid var(--line-2);border-radius:999px;padding:.35em .7em;white-space:nowrap;}
.ch-body{position:relative;flex:1;min-height:4.5em;margin-top:.3em;}
.ch-svg{position:absolute;inset:0;width:100%;height:100%;}
.ch-grid{stroke:rgba(255,255,255,.06);stroke-width:1;stroke-dasharray:3 4;}
.ch-area{fill:url(#dwArea);}
.ch-line{fill:none;stroke:#CBEB7C;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1400;stroke-dashoffset:1400;}
.scene.active .ch-line{animation:dwDraw 1.6s .9s ease-out both;}
@keyframes dwDraw{to{stroke-dashoffset:0;}}
.ch-peak{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 3;}
.ch-tip{position:absolute;left:90%;top:0;transform:translate(-50%,-1.1em);text-align:center;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:.55em;padding:.35em .65em;line-height:1.15;white-space:nowrap;}
.ch-tip b{display:block;font-family:var(--serif);font-size:.95em;font-weight:500;}
.ch-tip span{font-size:.58em;color:var(--muted);}
.ch-tip::after{content:"";position:absolute;left:50%;bottom:-.55em;width:.5em;height:.5em;border-radius:50%;background:var(--maple);transform:translateX(-50%);}
.ch-x{display:flex;justify-content:space-between;font-size:.58em;color:var(--muted);margin-top:.5em;}
.db-side{display:flex;flex-direction:column;gap:.55em;min-width:0;min-height:0;}
.db-minis{display:grid;grid-template-columns:1fr 1fr;gap:.55em;}
.db-mini{border:1px solid var(--line);border-radius:.85em;padding:.5em .8em;}
.db-mini span{display:block;font-size:.6em;color:var(--muted);}
.db-mini b{font-family:var(--serif);font-weight:500;font-size:1.2em;letter-spacing:-.01em;}
.db-rep{border:1px solid var(--line);border-radius:.85em;padding:.55em .8em .5em;flex:1;min-height:0;overflow:hidden;}
.db-rep > b{display:block;font-family:var(--serif);font-weight:500;font-size:.9em;margin-bottom:.3em;}
.rep{display:grid;grid-template-columns:7.6em 1fr 1.4em;gap:.5em;align-items:center;font-size:.6em;color:var(--muted);padding:.14em 0;white-space:nowrap;}
.rep i{height:.5em;border-radius:3px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;}
.rep i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--maple);border-radius:3px;}
.rep em{font-style:normal;color:var(--ink);text-align:right;}
.dw.compact .db-grid{grid-template-columns:1fr;}
.dw.compact .db-side{display:none;}
.dw.compact .db-card .s{display:none;}
.pill{font-family:var(--mono);font-size:.68em;letter-spacing:.03em;padding:.35em .7em;border-radius:999px;white-space:nowrap;}
.pill.ok{color:var(--maple-2);background:var(--maple-tint);border:1px solid rgba(183,222,85,.35);}
.pill.mv{color:var(--ink-soft);background:rgba(255,255,255,.05);border:1px solid var(--line-2);}
.pill.tr{color:#E8B54D;background:rgba(232,181,77,.1);border:1px solid rgba(232,181,77,.3);}

/* ---- Légende + contrôles ---- */
.dw-cap{display:flex;align-items:center;gap:1.1em;padding:.95em 1.25em 1.05em;border-top:1px solid var(--line);}
.dw-cap .num{font-family:var(--mono);font-size:1.5em;font-weight:700;color:var(--maple-2);letter-spacing:-.02em;min-width:1.6em;}
.dw-cap .tx{min-width:0;transition:opacity .25s,transform .3s;}
.dw-cap .tx.fade{opacity:0;transform:translateX(1.2em);}
.dw-cap h4{font-size:.98em;margin:0 0 .15em;font-weight:700;}
.dw-cap p{font-size:.82em;color:var(--muted);margin:0;line-height:1.4;}
.dw-ctl{margin-left:auto;display:flex;gap:.4em;flex:0 0 auto;}
.dw-ctl button{width:2.2em;height:2.2em;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .2s;}
.dw-ctl button:hover{border-color:var(--maple);}
.dw-ctl button svg{width:.85em;height:.85em;}
.dw-ctl .pp .i-pause{display:none;}
.dw.playing .dw-ctl .pp .i-pause{display:block;}
.dw.playing .dw-ctl .pp .i-play{display:none;}

/* ---- Mode compact : un seul volet à la fois, client puis vous ---- */
.dw.compact .dw-stage,.dw.compact.no-phone .dw-stage{grid-template-columns:1fr;gap:1.25em;padding:1em;}
.dw.compact .dw-pane{grid-area:1/1;transition:opacity .5s,transform .5s;}
.dw.compact .dw-pane.client{align-items:center;}
.dw.compact .dw-pane.client .phone{width:var(--ph);}
.dw.compact .dw-pane.client .dw-side{align-self:flex-start;}
.dw.compact[data-side="admin"] .dw-pane.client{opacity:0;transform:translateX(-1.5em);pointer-events:none;}
.dw.compact[data-side="client"] .dw-pane.admin{opacity:0;transform:translateX(1.5em);pointer-events:none;}
/* En-tête compact : titre, puis de simples barres de progression (sans titres d'étapes) */
.dw.compact .dw-head{flex-wrap:wrap;gap:.6em .8em;padding:.85em 1em .75em;}
.dw.compact .dw-steps{flex:1 1 100%;max-width:none;margin-left:0;gap:.35em;justify-content:stretch;}
.dw.compact .dw-step{max-width:none;padding:0;height:.5em;}
.dw.compact .dw-step .n,.dw.compact .dw-step .lbl{display:none;}
.dw.compact .dw-step .bar{left:0;right:0;top:0;bottom:auto;height:3px;}
/* Compact : pas de titres de fenêtre, pas de sous-ligne, pas de détails secondaires */
.dw.compact .admin .wb{display:none;}
.dw.compact .x{display:none!important;}
/* Compact : titre de l'étape + progression ensemble — la légende passe sous les barres */
.dw.compact{display:flex;flex-direction:column;}
.dw.compact .dw-head{order:0;border-bottom:0;padding-bottom:.4em;}
.dw.compact .dw-cap{order:1;border-top:0;border-bottom:1px solid var(--line);gap:.8em;padding:.4em 1em .9em;}
.dw.compact .dw-stage{order:2;}
.dw.compact .dw-cap h4{font-size:.95em;margin:0;}
.dw.compact .dw-cap p{display:none;}
.dw.compact .dw-ctl{gap:.3em;}
.dw.compact .dw-ctl button{width:2em;height:2em;}
/* Compact : ligne « toggle + action », responsive */
.dw.compact .dw-side{white-space:normal;overflow:visible;flex-wrap:wrap;gap:.5em .7em;font-size:.66em;}
.dw.compact .dw-side::before{display:none;}
.dw.compact .dw-side .sw{margin-left:0;flex:0 0 auto;}
.dw.compact .dw-side .act{color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans);font-size:1.25em;min-width:0;}
/* Compact : agenda sur 3 jours (mer → ven) pour rester lisible */
.dw.compact .cal{grid-template-columns:repeat(3,1fr);}
.dw.compact .cal .col:nth-child(1),.dw.compact .cal .col:nth-child(2){display:none;}
.dw.compact .dw-side .sw{margin-left:auto;display:inline-flex;gap:.4em;font-size:.95em;}
.dw-side .sw{display:none;}
.dw.compact .dw-side .sw span{padding:.15em .55em;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);}
.dw.compact[data-side="client"] .dw-side .sw .s-c,
.dw.compact[data-side="admin"] .dw-side .sw .s-a{color:var(--maple-2);border-color:rgba(183,222,85,.45);background:var(--maple-tint);}
.dw.compact .dw-cap .num{font-size:1.25em;}

/* Mode figé (tests / captures) : état final de chaque scène */
.dw.still .scene.active .a,.dw.still .scene.active .free,.dw.still .scene.active .ev.new{animation:none;opacity:1;}
.dw.still .cal .scan{display:none;}
.dw.still .call .av::before,.dw.still .call .av::after{animation:none;opacity:0;}
.dw.still .phase1{display:none;}
.dw.still .scene.active .phase2{animation:none;opacity:1;}
.dw.still .dw-stage,.dw.still .dw-pane,.dw.still .scene{transition:none;animation:none;}
.dw.still .scene.active .ch-line{animation:none;stroke-dashoffset:0;}

@media(prefers-reduced-motion:reduce){
  .scene.active .a,.scene.active .cal .scan,.scene.active .free,.scene.active .ev.new{animation:none;opacity:1;}
  .call .av::before,.call .av::after{animation:none;opacity:0;}
}