/* Réactothèque — feuille de style commune (appli locale + vitrine) */
body{margin:0}
[hidden]{display:none!important}
img,svg{max-width:100%}

/* Layout : menu de filtres en haut (fonctions groupées par famille), grille de fiches-réaction, bulle flottante au survol. */
:root{
  --bg:#eef2f4; --surface:#ffffff; --ink:#14232b; --muted:#5b6d76; --line:#d3dde2;
  --accent:#0b6e8a; --accent-soft:#d8ecf2;
  --tip-bg:#14232b; --tip-ink:#f2f7f9; --tip-muted:#9fb6c0;
  /* une teinte par type de réaction */
  --t-add:#0b6e8a; --t-eli:#7a4fb3; --t-sub:#a2620a; --t-ae:#2f7d4f; --t-ox:#b4362f; --t-red:#2f5fb8; --t-pol:#5b6d76; --t-rea:#a83a7c;
  --t-con:#5f7012; --t-cyc:#7a4a2a; --t-cou:#4a44c4;
  --ok:#23804a; --bad:#c2372d;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f181d; --surface:#16232a; --ink:#e3edf1; --muted:#8fa4ae; --line:#283942;
  --accent:#4cc0de; --accent-soft:#143a46;
  --tip-bg:#e8f1f4; --tip-ink:#10202a; --tip-muted:#4d6470;
  --t-add:#4cc0de; --t-eli:#b896e6; --t-sub:#e0a54a; --t-ae:#6ccf93; --t-ox:#f07b72; --t-red:#80a8f2; --t-pol:#9fb2bb; --t-rea:#ea8cc4;
  --t-con:#c3d25a; --t-cyc:#d9a77c; --t-cou:#a39dfa;
  --ok:#5fd08c; --bad:#ff7a6e;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f181d; --surface:#16232a; --ink:#e3edf1; --muted:#8fa4ae; --line:#283942;
  --accent:#4cc0de; --accent-soft:#143a46;
  --tip-bg:#e8f1f4; --tip-ink:#10202a; --tip-muted:#4d6470;
  --t-add:#4cc0de; --t-eli:#b896e6; --t-sub:#e0a54a; --t-ae:#6ccf93; --t-ox:#f07b72; --t-red:#80a8f2; --t-pol:#9fb2bb; --t-rea:#ea8cc4;
  --t-con:#c3d25a; --t-cyc:#d9a77c; --t-cou:#a39dfa;
  --ok:#5fd08c; --bad:#ff7a6e;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px}

/* Barre compacte : une ligne sur ordinateur, deux sur téléphone */
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.barline{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding-block:10px}
.logo{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;margin-right:4px}
.logo span,.intro h1 span{color:var(--accent)}
.search{flex:1 1 200px;min-width:0;max-width:320px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;padding:6px 12px;border-radius:8px}
.dds{display:flex;gap:6px;margin-left:auto}
.dd{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 .85rem var(--f-body);padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;max-width:46vw}
.dd .v{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.dd.on{border-color:var(--accent);background:var(--accent-soft)}
.dd.on .v{color:var(--accent)}
.dd .car{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.reset{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .85rem var(--f-body);padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.reset span:first-child{font-size:1rem;line-height:1}
.reset:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.reset:disabled{opacity:.4;cursor:default}
.dd[aria-expanded="true"]{border-color:var(--ink)}
.dd[aria-expanded="true"] .car{transform:rotate(-135deg) translateY(-2px)}

.panel{position:absolute;left:0;right:0;top:100%;z-index:30}
.pin{background:var(--surface);border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 18px 40px -20px color-mix(in srgb,var(--ink) 55%,transparent);padding-block:12px 16px;max-height:min(62vh,520px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.ph{display:flex;align-items:baseline;gap:10px;position:sticky;top:-12px;background:var(--surface);padding-block:4px}
.ph strong{font-family:var(--f-display);font-size:1.05rem}
.ph .hint{color:var(--muted);font-size:.8rem;flex:1;min-width:0}
.pclose{border:0;background:none;color:var(--accent);font:600 .85rem var(--f-body);cursor:pointer}
#pbody{display:flex;flex-direction:column;gap:10px}
.group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.group .gname{width:100%;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
#scrim{position:fixed;inset:0;z-index:15;background:color-mix(in srgb,var(--ink) 28%,transparent)}

.intro{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.intro h1{font-family:var(--f-display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin:0}
.intro p{margin:0;color:var(--muted);font-size:.9rem}
.status{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.ftag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 4px 2px 10px;font:600 .8rem var(--f-body);cursor:pointer}
.ftag i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--surface);font-size:.7rem}
.clear{border:0;background:none;color:var(--muted);font:500 .8rem var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (max-width:760px){
  header.bar{backdrop-filter:none;background:var(--bg)}
  .logo{display:none}
  .search{order:-1;flex:1 1 140px;max-width:none}
  .dds{width:100%;margin-left:0}
  .dd{flex:1 1 0;justify-content:space-between;min-width:0;max-width:none}
  .dd .v{min-width:0}
  .dd:not(.on) .v{display:none}
  .reset .lbl{display:none}
  .reset{flex:0 0 auto}
  .dd.on .lbl{display:none}
  .panel{position:fixed;top:auto;bottom:0}
  .pin{border-radius:16px 16px 0 0;max-height:72vh;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .ph{top:-12px}
}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--muted);font:500 .85rem var(--f-body);padding:5px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .84rem var(--f-body);padding:5px 10px;border-radius:8px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:background .15s,border-color .15s}
.chip:hover:not(:disabled){border-color:var(--accent)}
.chip .n{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.8}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.chip.t[aria-pressed="true"]{background:var(--c);border-color:var(--c)}
.chip.t[aria-pressed="true"] .dot{background:var(--surface)}
button:focus-visible,.search:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

main .wrap{padding-block:22px 48px;display:flex;flex-direction:column;gap:16px}
.status{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.seg button{padding:5px 10px}.intro h1{font-size:1.35rem}.intro p{display:none}main .wrap{padding-block:14px 40px}}
.status strong{color:var(--ink);font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;cursor:help;transition:transform .18s ease,border-color .18s,box-shadow .18s;min-width:0}
.card:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 8px 22px -14px color-mix(in srgb,var(--ink) 60%,transparent)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.fx{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.78rem;font-weight:600;min-width:0}
.fx .tag{padding:2px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.fx .to{color:var(--muted)}
.type{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;white-space:nowrap;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);padding:2px 7px;border-radius:6px}

.eq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.98rem;min-height:72px;padding:4px 0}
.eq .side{white-space:nowrap}
.eq sub,.eq sup{font-size:.68em}
.eq small{font-family:var(--f-body);font-size:.72em;color:var(--muted)}
.arrow{display:inline-flex;flex-direction:column;align-items:center;min-width:110px;max-width:170px;font-family:var(--f-body);font-size:.74rem;color:var(--muted);text-align:center;line-height:1.25}
.arrow .shaft{width:100%;height:2px;background:var(--ink);position:relative;margin:4px 0}
.arrow .shaft::after{content:"";position:absolute;right:-1px;top:-4px;border-left:9px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.arrow.eqm .shaft{height:7px;background:none;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.arrow.eqm .shaft::after{top:-6px;right:-1px;border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:0}
.arrow.eqm .shaft::before{content:"";position:absolute;left:-1px;bottom:-6px;border-right:8px solid var(--ink);border-bottom:5px solid transparent;border-top:0}
.arrow sub,.arrow sup{font-size:.75em}
.note{margin:0;font-size:.85rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.epox{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1}
.epox svg{width:52px;height:18px;margin-left:22px}

.t-add{--c:var(--t-add)} .t-eli{--c:var(--t-eli)} .t-sub{--c:var(--t-sub)} .t-ae{--c:var(--t-ae)}
.t-ox{--c:var(--t-ox)} .t-red{--c:var(--t-red)} .t-pol{--c:var(--t-pol)} .t-rea{--c:var(--t-rea)}
.t-con{--c:var(--t-con)} .t-cyc{--c:var(--t-cyc)} .t-cou{--c:var(--t-cou)}
.cardfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.78rem}
.src{color:var(--muted);min-width:0}
.src a{color:var(--accent)}
.mlink{color:var(--accent);font-weight:600;white-space:nowrap;opacity:.75;transition:opacity .15s}
.card:hover .mlink{opacity:1}
.card{cursor:pointer}

/* Fenêtre du mécanisme */
.mech{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:color-mix(in srgb,var(--ink) 40%,transparent)}
.mbox{background:var(--surface);color:var(--ink);border-radius:14px;width:min(780px,100%);max-height:100%;overflow:auto;padding:20px 22px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.mhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mtitle{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.mtitle h2{margin:0;font-family:var(--f-display);font-size:1.45rem;line-height:1.2;text-wrap:balance}
.mtitle h2 small{font-family:var(--f-body);font-weight:500;font-size:.7em;color:var(--muted)}
.mclose{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;flex:0 0 auto}
.meq{background:var(--bg);border-radius:10px;padding:10px 14px;overflow-x:auto;flex-wrap:nowrap}
.mbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.mbar strong{font-family:var(--f-display);font-size:1.1rem}
.mstep{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer}
.mbtn:disabled{opacity:.35;cursor:default}
.mall{border:0;background:none;color:var(--accent);font:600 .82rem var(--f-body);cursor:pointer}
.msteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:st}
.msteps li{counter-increment:st;display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 12px;padding:10px 0;transition:opacity .2s}
.msteps li::before{content:counter(st);grid-row:1 / span 4;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--surface);font:700 .85rem var(--f-mono)}
.msteps li:not(:last-child){border-bottom:1px dashed var(--line)}
.msteps .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--c)}
.msteps .e{font-family:var(--f-mono);font-size:.92rem;background:var(--bg);border-radius:8px;padding:7px 10px;overflow-x:auto;white-space:nowrap}
.msteps .e sub,.msteps .e sup{font-size:.7em}
.msteps .d{margin:0;font-size:.9rem;line-height:1.5;max-width:68ch}
.msteps.stepping li.later{opacity:.22}
.msteps.stepping li.cur .e{outline:2px solid var(--c)}
.molbox{background:var(--bg);border-radius:8px;padding:6px 8px;overflow-x:auto}
.mol{display:block;width:100%;min-width:400px;max-width:560px;height:auto;font-family:var(--f-body);font-size:15px}
.mol text{fill:var(--ink)}
.mol text.ch{font-size:11px;fill:var(--c)}
.mol line,.mol polygon.wd{stroke:var(--ink);stroke-width:1.5;fill:var(--ink)}
.mol .lp{fill:var(--ink)}
.mol .rx{stroke:var(--muted);stroke-width:1.5}
.mol .rxh{fill:var(--muted)}
.mol text.rl{font-size:10.5px;fill:var(--muted)}
.mol .ca{fill:none;stroke:var(--c);stroke-width:1.6}
.mdrawn{font-family:var(--f-body);font-size:.78rem;font-weight:500;color:var(--muted)}
.msteps li > *{grid-column:2}
.mnote{margin:0;font-size:.85rem;color:var(--muted)}
.mnav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.mlinkb{border:0;background:none;color:var(--accent);font:500 .85rem var(--f-body);cursor:pointer;padding:4px 0}
.mlinkb:disabled{color:var(--muted);opacity:.5;cursor:default}
@media (max-width:760px){
  .mech{align-items:flex-end;padding:0}
  .mbox{border-radius:16px 16px 0 0;max-height:92vh;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  .mtitle h2{font-size:1.2rem}
}
#tip .sr{font-family:var(--f-mono);font-size:.72rem;color:var(--tip-muted);margin-top:6px}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:32px;text-align:center;color:var(--muted)}

/* Bulle d'info (msgbox) */
#tip{position:fixed;left:0;top:0;z-index:50;max-width:300px;background:var(--tip-bg);color:var(--tip-ink);border-radius:10px;padding:12px 14px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
#tip.on{opacity:1;transform:none}
#tip .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tip-muted);font-weight:600}
#tip .nm{font-family:var(--f-display);font-weight:700;font-size:1.15rem;line-height:1.2;margin:2px 0 6px;text-wrap:balance}
#tip .nm.none{font-family:var(--f-body);font-weight:500;font-size:.95rem;font-style:italic}
#tip .ds{font-size:.82rem;line-height:1.4;opacity:.9}

@media (max-width:560px){.grid{grid-template-columns:1fr}.eq{font-size:.9rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Appli locale : statut des fiches, évaluation, ajout ===== */
.tright{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.okb{display:inline-grid;place-items:center;width:22px;height:22px}
.okb svg{width:22px;height:22px}
.okb circle{fill:var(--ok)}
.okb path{fill:none;stroke:var(--surface);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kob{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--bad);border:1px solid var(--bad);border-radius:6px;padding:1px 6px;white-space:nowrap}
.card.bad{border:2px solid var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 14%,transparent)}
.card.bad:hover{border-color:var(--bad)}
.probleme{margin:0;font-size:.84rem;line-height:1.45;color:var(--ink);background:color-mix(in srgb,var(--bad) 9%,transparent);border-radius:8px;padding:8px 10px}
.probleme strong{color:var(--bad)}
.bilan{margin-left:auto;font-size:.82rem;display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.okd,.kod{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.kod{background:var(--bad);margin-left:4px}
.chip.st-valide{--c:var(--ok)} .chip.st-a_corriger{--c:var(--bad)} .chip.st-neutre{--c:var(--muted)}
.chip.st .dot{background:var(--c)}
.chip.st[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--surface)}
.chip.st[aria-pressed="true"] .dot{background:var(--surface)}

.tools{display:flex;gap:6px;align-items:center}
.tool{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .85rem var(--f-body);padding:6px 10px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.tool:hover{border-color:var(--accent);color:var(--accent)}
.tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.pill{background:var(--bad);color:#fff;border-radius:999px;font:700 .7rem var(--f-mono);padding:1px 7px}
@media (max-width:1560px) and (min-width:761px){ .tool .lbl{display:none} .tool{padding:6px 8px} }
@media (max-width:760px){ .tools{width:100%} .tool{flex:1 1 0;justify-content:center} }

.eval{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.eval.ev-valide{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--surface))}
.eval.ev-a_corriger{border:2px solid var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--surface))}
.evhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.evhead strong{font-family:var(--f-display);font-size:1rem}
.ev-valide .evhead strong{color:var(--ok)} .ev-a_corriger .evhead strong{color:var(--bad)}
.evbtns{display:flex;gap:6px;flex-wrap:wrap}
.evb{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .84rem var(--f-body);padding:6px 11px;border-radius:8px;cursor:pointer}
.evb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.evb-ok{border-color:var(--ok);color:var(--ok)} .evb-ok:hover{background:var(--ok);color:var(--surface)}
.evb-ko{border-color:var(--bad);color:var(--bad)} .evb-ko:hover{background:var(--bad);color:var(--surface)}
.eval label,#addform label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:2px 0 4px}
.eval textarea,#addform textarea,#addform input[type=url],#addform input[type=text],#addres textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:.9rem;padding:8px 10px;resize:vertical}
#evp,#addp{font-family:var(--f-mono);font-size:.78rem;line-height:1.45}
.evsend{margin-top:8px;border:0;background:var(--accent);color:var(--surface);font:600 .86rem var(--f-body);padding:8px 14px;border-radius:8px;cursor:pointer}
.evsend:disabled{opacity:.5;cursor:default}
.evinfo{margin:0 0 6px;font-size:.86rem}
.everr{margin:0;color:var(--bad);font-size:.85rem}
.everr:empty{display:none}
.addbox form{display:flex;flex-direction:column;gap:8px}
.modes{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.modes label{display:flex!important;gap:8px;align-items:center;font-size:.92rem!important;color:var(--ink)!important;font-weight:500!important}
.foot{color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);padding-top:12px}

/* Pages simples (demandes, publication) */
.page{max-width:980px;margin:0 auto;padding:24px 20px 60px;display:flex;flex-direction:column;gap:16px}
.page h1{font-family:var(--f-display);margin:0}
.page .back{color:var(--accent)}
.dem{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.dem.en_attente{border-left:4px solid var(--bad)}
.dem.traitee{opacity:.75}
.dem .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.dem .meta b{color:var(--ink)}
.dem textarea{width:100%;font-family:var(--f-mono);font-size:.78rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:8px}
.dem .acts{display:flex;gap:8px;flex-wrap:wrap}
.log{background:var(--ink);color:var(--bg);font:12px/1.45 var(--f-mono);padding:12px;border-radius:10px;white-space:pre-wrap;max-height:60vh;overflow:auto}