/* ══════════════════════════════════════════════════════════════════════════
   NE PAS MODIFIER — fichier produit par `scripts/extraire_css_maquette.py`.

   Ceci est le <style> de `maquette/demo-sequentielle.html`, extrait tel quel.
   C'est la référence visuelle validée par le client : l'application ne la
   recopie pas, elle la charge. Une retouche faite ici serait perdue à la
   prochaine extraction, et surtout elle ferait diverger l'application de la
   maquette — ce qui est précisément ce que ce fichier empêche.

   Pour changer l'apparence : modifier la maquette, puis relancer le script.
   Ce que l'application ajoute par-dessus vit dans `app.css`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ===========================================================================
   Démonstration A → Z — parcours séquentiel.

   Les onglets 3 et 4 tiennent en TROIS blocs, dans cet ordre :
     1 · Constat — le tableau, il ne bouge pas. On clique une entreprise.
     2 · Aide à la justification — la demande pré-rédigée, prête à l'envoi.
     3 · Décision et justification — la réponse, le motif, le verdict.
   Les blocs 2 et 3 n'existent que pour l'entreprise sélectionnée, et le disent
   dans leur titre : on sait toujours de qui l'on parle.

   Le tableau est réellement cliquable : après la démonstration, on peut
   naviguer d'une société à l'autre à la main.

   Mono-fichier, aucun appel réseau.
   =========================================================================== */
:root{
  --bg:#fbfcfd; --card:#fff; --ink:#1a2833; --ink2:#55636e; --mut:#7c8892;
  --hair:#e7edf1; --hair2:#d8e1e7;
  --navy:#17506f; --blue:#1e88c7; --tint:#eef6fb; --tint2:#f7fafc;
  --green:#417f2a; --amber:#8d6110; --red:#a93b30; --violet:#6b4fa1;
  --neuf:#0f766e; --neuf-bg:#effaf7; --neuf-bord:#b5e0d6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;padding-bottom:134px}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--navy);text-decoration:none}
.lbl{font-size:.67rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sub{color:var(--ink2);font-size:.86rem}

/* ----------------------------------------------------------------- colonne */
.sidebar{position:fixed;inset:0 auto 134px 0;width:254px;background:var(--card);
  border-right:1px solid var(--hair);display:flex;flex-direction:column;z-index:40;overflow-y:auto}
.s-brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px}
.s-brand img{width:32px;height:32px}
.s-brand b{display:block;font-size:1.02rem;color:var(--navy)}
.s-brand span{display:block;font-size:.61rem;font-weight:600;letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.s-titre{margin:2px 18px 12px;padding-top:14px;border-top:1px solid var(--hair)}
.s-titre .nm{display:block;font-size:.98rem;font-weight:700;line-height:1.3}
.s-titre .rf{font-size:.76rem;color:var(--mut)}
.sidebar nav{padding:0 10px}
.sidebar .sec{padding:12px 8px 6px}
.nv{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--ink2);font-size:.88rem;margin-bottom:1px;cursor:pointer}
.nv:hover{background:var(--tint2)}
.nv.on{background:var(--tint);color:var(--navy);font-weight:650}
.dot{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:.68rem;font-weight:700;border:1px solid var(--hair2);color:var(--mut);background:#fff;
  transition:all .3s}
.nv.done .dot{border-color:#b9d6ac;color:#fff;background:var(--green)}
.nv.cur .dot{background:var(--navy);border-color:var(--navy);color:#fff}
.nv.wait .dot{border-color:#e6d5ab;color:var(--amber)}
.nv .mini{margin-left:auto;font-size:.7rem;color:var(--amber)}
.s-jour{margin:14px 12px;border-top:1px solid var(--hair);padding-top:14px}
.s-jour .lbl{padding:0 6px 7px}
.s-jour ol{list-style:none;font-size:.73rem;color:var(--ink2);line-height:1.45}
.s-jour li{padding:5px 6px;border-left:2px solid var(--hair2);margin-bottom:4px;animation:pop .45s ease}
.s-jour li b{color:var(--ink);font-weight:620}
.s-jour .vide{padding:0 6px;font-size:.75rem;color:var(--mut)}

/* ----------------------------------------------------------------- page */
main{margin-left:254px;padding:32px 42px 40px}
.page{max-width:1010px;margin:0 auto}
.pagehead{margin-bottom:22px}
.pagehead .lbl{color:var(--navy)}
.pagehead h1{font-size:1.58rem;font-weight:670;letter-spacing:-.022em;margin-top:4px}
.pagehead .chapeau{margin-top:9px;color:var(--ink2);max-width:76ch}

.card{background:var(--card);border:1px solid var(--hair);border-radius:12px;margin-bottom:20px}
.cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 24px 0}
.cardhead h2{font-size:1rem;font-weight:650}
.cardhead .n{font-size:.79rem;color:var(--mut);white-space:nowrap}
.pad{padding:14px 24px 20px}
.btnrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:0 24px 20px}

/* ruban de phase : 1 constat · 2 aide · 3 décision */
.phase{display:flex;align-items:center;gap:9px;padding:0 0 14px;flex-wrap:wrap}
.phase .p{font-size:.78rem;font-weight:640;color:var(--mut);padding:4px 13px;border-radius:20px;
  border:1px solid var(--hair2);background:#fff;transition:all .35s}
.phase .p.on{border-color:var(--navy);color:var(--navy);background:var(--tint)}
.phase .p.done{border-color:#c9dfc0;color:var(--green)}
.phase .f{color:var(--hair2)}

.rail{display:flex;border:1px solid var(--hair);border-radius:12px;background:#fff;
  margin-bottom:20px;overflow:hidden}
.rail .u{flex:1;padding:14px 18px;border-right:1px solid var(--hair)}
.rail .u:last-child{border-right:0}
.rail .n{display:block;font-size:1.4rem;font-weight:650;letter-spacing:-.02em;line-height:1.15}
.rail .l{display:block;font-size:.74rem;color:var(--mut);margin-top:2px}
.rail .u.al .n{color:var(--red)}.rail .u.at .n{color:var(--amber)}.rail .u.ok .n{color:var(--green)}

table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t th{font-size:.69rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);text-align:right;padding:0 14px 8px;border-bottom:1px solid var(--hair2)}
table.t th.l,table.t td.l{text-align:left}
table.t td{padding:10px 14px;border-bottom:1px solid var(--hair);text-align:right}
table.t tbody tr:last-child td{border-bottom:0}
table.t td.nm{font-weight:600}
table.t .tot{font-weight:680}
table.t tr.dim td{color:var(--mut)}
.scrollx{overflow-x:auto}

/* une ligne de constat se clique : elle ouvre le dossier de cette société */
tr.ouvrable{cursor:pointer}
tr.ouvrable:hover td{background:var(--tint2)}
tr.ouvrable td:first-child{border-left:3px solid transparent}
tr.ouvrable.sel td{background:var(--tint)}
tr.ouvrable.sel td:first-child{border-left-color:var(--navy)}
.ouvrir{font-size:.76rem;color:var(--navy);font-weight:620;white-space:nowrap}
tr.ouvrable.sel .ouvrir{color:var(--mut)}

.kv{padding:4px 24px 16px}
.kvline{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--hair)}
.kvline:last-child{border-bottom:0}
.kvline .k{font-size:.87rem;color:var(--ink2)}
.kvline .v{font-weight:620;white-space:nowrap}

.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:620;
  border:1px solid var(--hair2);color:var(--mut);background:#fff;white-space:nowrap;transition:all .3s}
.tag.ok{border-color:#c9dfc0;color:var(--green)}
.tag.warn{border-color:#e6d5ab;color:var(--amber)}
.tag.bad{border-color:#e2bfba;color:var(--red)}
.tag.info{border-color:#cfe4f0;color:var(--navy)}
.tag.mdl{border-color:#d8cdee;color:var(--violet)}

.note{border-left:2px solid var(--hair2);padding:11px 0 11px 15px;font-size:.87rem;
  color:var(--ink2);margin:12px 24px}
.note b{color:var(--ink)}
.note.ok{border-color:#9ac489}.note.warn{border-color:#dcc186}
.note.bad{border-color:#d9a79f}.note.blue{border-color:#a9cfe6}
.btn{display:inline-block;padding:8px 15px;border-radius:9px;background:var(--navy);color:#fff;
  border:1px solid var(--navy);font-size:.85rem;font-weight:600;transition:all .3s;cursor:pointer}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.sm{padding:4px 10px;font-size:.78rem}
.btn.off{background:#fff;color:var(--mut);border-color:var(--hair2);cursor:not-allowed}
.btn.no{background:#fff;color:var(--red);border-color:#e2bfba}
.btn.oui{background:#fff;color:var(--green);border-color:#c9dfc0}
.neuf{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:20px;font-size:.66rem;
  font-weight:700;color:var(--neuf);background:var(--neuf-bg);border:1px solid var(--neuf-bord);
  vertical-align:middle}

/* le panneau de la société sélectionnée : blocs 2 et 3 */
.panneau{border:1px solid var(--hair2);border-radius:12px;background:var(--card);margin-bottom:20px;
  overflow:hidden;display:none}
.panneau.vu{display:block;animation:pop .45s ease}
.pan-head{display:flex;align-items:center;gap:14px;padding:16px 24px;background:var(--tint);
  border-bottom:1px solid #cfe4f0;flex-wrap:wrap}
.pan-head .qui{font-size:1.06rem;font-weight:680;letter-spacing:-.015em;color:var(--navy)}
.pan-head .quoi{font-size:.84rem;color:var(--ink2)}
.pan-head .fermer{margin-left:auto;font-size:.8rem;color:var(--mut);cursor:pointer}
.pan-head .fermer:hover{color:var(--navy)}
.pan-bloc{border-bottom:1px solid var(--hair)}
.pan-bloc:last-child{border-bottom:0}
.pan-bloc>.cardhead{padding-top:16px}

/* la mécanique : une case vide, puis remplie */
.slot{display:inline-block;min-width:48px;color:var(--mut);border-bottom:1px dashed var(--hair2);
  transition:color .25s}
.slot.rempli{color:inherit;border-bottom-color:transparent;animation:flash .9s ease}
@keyframes flash{0%{background:#fff6cf}60%{background:#fffdf2}100%{background:transparent}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
tr.muet td{color:var(--mut);opacity:.42;transition:opacity .4s}
tr.vue td{opacity:1;color:inherit}
tr.vue{animation:pop .4s ease}
.bloc{display:none}.bloc.vu{display:block;animation:pop .45s ease}
.champ{margin-top:13px}
.champ label{display:block;margin-bottom:6px}
.champ textarea,.champ input{width:100%;padding:10px 13px;border:1px solid var(--hair2);
  border-radius:9px;font-size:.88rem;background:#fff;resize:none}
.champ textarea.plein,.champ input.plein{border-color:#bcd9ea;background:#fcfeff}
.lettre{background:#fdfcff;border:1px solid #d8cdee;border-radius:10px;padding:17px 19px;
  font-size:.87rem;line-height:1.7;color:var(--ink2);min-height:104px}
.lettre p+p{margin-top:9px}

.attente{border:1px solid #e6d5ab;background:#fdfaf2;border-radius:12px;padding:17px 21px;
  margin-bottom:20px;display:flex;gap:15px}
.attente .ic{flex:none;width:29px;height:29px;border-radius:50%;border:1px solid #e6d5ab;
  display:grid;place-items:center;color:var(--amber);background:#fff}
.attente b{display:block;margin-bottom:3px}
.attente p{font-size:.87rem;color:var(--ink2);max-width:72ch}
.attente .quoi{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.83rem;color:var(--ink2)}
.attente .quoi i{font-style:normal;color:var(--mut);margin-right:4px}

.screen{display:none}.screen.on{display:block}
.spot{position:relative;z-index:60;outline:2px solid var(--blue);outline-offset:6px;border-radius:10px}

/* pupitre */
.pupitre{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#12202a;color:#eef4f8;
  padding:15px 26px 17px;box-shadow:0 -6px 24px rgba(18,32,42,.13)}
.pupitre .in{max-width:1250px;margin:0 auto;display:flex;gap:22px;align-items:flex-start}
.pupitre .acte{flex:none;width:126px}
.pupitre .acte i{font-style:normal;display:block;font-size:.67rem;letter-spacing:.12em;
  text-transform:uppercase;color:#7fa5bb}
.pupitre .acte b{display:block;font-size:.87rem;margin-top:2px;color:#dce9f1}
.pupitre .tx{flex:1;min-width:0}
.pupitre h4{font-size:.99rem;font-weight:650;margin-bottom:2px}
.pupitre p{font-size:.87rem;color:#b8cbd7;line-height:1.55;max-width:92ch}
.pupitre .ct{display:flex;gap:6px;align-items:center}
.pupitre button{background:transparent;border:1px solid #33505f;color:#eef4f8;height:34px;
  min-width:34px;padding:0 10px;border-radius:8px;cursor:pointer;font-size:.85rem}
.pupitre button:hover{background:#1d3240}
.piste{position:absolute;left:0;top:0;height:3px;background:var(--blue);transition:width .4s}