/* MKD Conformité — styles portés du prototype design/prototype.html.
   Règle CLAUDE.md n°1 : tokens et composants recopiés à l'identique, jamais modifiés. */
:root{
  --paper:#F7F6F2; --card:#FFFFFF; --ink:#1C2330; --slate:#5A6472; --line:#DCDAD2;
  --primary:#2B4BC8; --primary-soft:#E8EDFB;
  --ok:#2E7D5B; --ok-soft:#E4F1EB;
  --warn:#C77F1F; --warn-soft:#FAF0DE;
  --block:#B3362B; --block-soft:#F9E7E4;
  --mono:"SF Mono","Cascadia Mono","Consolas",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:60px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

header{border-bottom:3px solid var(--ink);background:var(--card)}
.head-in{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 0 14px}
.brand .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.brand h1{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);padding:7px 12px;transform:rotate(-2deg);color:var(--ink);background:var(--card)}

main{padding:26px 0}

.formcard{background:var(--card);border:1px solid var(--line);padding:18px;margin-bottom:22px}
.formcard h3{font-size:15px;font-weight:800;margin-bottom:14px}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
input,select,textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);background:#FDFDFB;color:var(--ink);border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{appearance:none;font:inherit;font-weight:700;padding:9px 18px;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.btn:hover{background:var(--primary);border-color:var(--primary)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:3px 8px;border:1.5px solid}
.b-ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.b-warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.b-block{color:var(--block);border-color:var(--block);background:var(--block-soft)}
.muted{color:var(--slate);font-size:12.5px}
.empty{background:var(--card);border:1px dashed var(--line);padding:26px;text-align:center;color:var(--slate)}

nav{display:flex;gap:4px;padding-bottom:0}
nav button{appearance:none;border:none;background:none;font:inherit;font-weight:600;color:var(--slate);padding:10px 16px;border-bottom:3px solid transparent;margin-bottom:-3px;cursor:pointer}
nav button:hover{color:var(--ink)}
nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--primary)}
nav button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.panel{display:none}.panel.active{display:block}

/* Dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ink);padding:16px}
.kpi .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.kpi .val{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi.ok{border-top-color:var(--ok)} .kpi.warn{border-top-color:var(--warn)} .kpi.block{border-top-color:var(--block)}
.kpi .sub{font-size:12.5px;color:var(--slate);margin-top:2px}

h2{font-size:17px;font-weight:800;margin:26px 0 10px;display:flex;align-items:center;gap:10px}
h2 .rule{flex:1;height:1px;background:var(--line)}

.alert-list{display:flex;flex-direction:column;gap:8px}
.alert{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--block);padding:10px 14px;font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.alert.warn{border-left-color:var(--warn)}
.alert .who{font-weight:700}

/* Forms */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.btn.sm{padding:4px 10px;font-size:12.5px;border-width:1px;font-weight:600}

/* Ledger table */
.ledger{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-size:13.5px}
.ledger th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);text-align:left;padding:10px 10px;border-bottom:2px solid var(--ink);background:#FBFAF7}
.ledger td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.ledger tr.op{border-left:5px solid var(--line)}
.ledger tr.s-ok{border-left:5px solid var(--ok)}
.ledger tr.s-warn{border-left:5px solid var(--warn)}
.ledger tr.s-block{border-left:5px solid var(--block)}
.vol{font-variant-numeric:tabular-nums;font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.toolbar input{max-width:280px}
.savemsg{font-family:var(--mono);font-size:11px;color:var(--slate)}

/* Parties */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--line);padding:16px;border-top:4px solid var(--ink)}
.pcard.nodpa{border-top-color:var(--block)}
.pcard h4{font-size:15.5px;font-weight:800}
.pcard .type{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:2px 0 10px}
.pcard dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13.5px}
.pcard dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding-top:3px}
.pcard dd{word-break:break-word}
.pcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
@media (max-width:640px){ .head-in{flex-direction:column;align-items:flex-start} .stamp{display:none} }
@media (prefers-reduced-motion:no-preference){ .panel.active{animation:fade .18s ease} @keyframes fade{from{opacity:0}to{opacity:1}} }

/* Adaptations CSP (aucun style inline) : classes remplaçant les styles inline
   du prototype, valeurs reprises à l'identique. */
.toolbar-right{display:flex;gap:10px;align-items:center}
.tablewrap{overflow-x:auto}
.ledger td.nowrap{white-space:nowrap}
.pcard .nosig{color:var(--block)}

/* Adaptation P4 : bouton Déconnexion à côté du stamp (absent du prototype). */
.head-side{display:flex;align-items:center;gap:12px}

/* Pages d'authentification : mise en page centrée, composants du prototype. */
.auth main{display:grid;place-items:start center;padding-top:48px}
.auth .formcard{width:min(430px,92vw)}
.auth .msg{margin-top:12px;font-size:13.5px}
.auth .msg[hidden]{display:none}
.auth .qr{display:block;margin:12px auto;border:1px solid var(--line);width:220px;height:220px}
.auth .backup{font-family:var(--mono);font-size:18px;letter-spacing:.1em;text-align:center;border:1.5px dashed var(--warn);background:var(--warn-soft);color:var(--ink);padding:10px;margin:10px 0}
.auth .code{font-family:var(--mono);font-size:22px;letter-spacing:.35em;text-align:center}

/* Adaptation P5 : documents DPA dans la carte client/fournisseur (§6). */
.dpa{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.dpa-info{font-size:13px;margin-bottom:8px}
.dpa-info .sha{font-family:var(--mono);font-size:11.5px}
.dpa-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dpa-actions a.btn{text-decoration:none;display:inline-block}
.dpa-hist{list-style:none;font-size:12.5px;margin-bottom:8px}
.dpa-hist li{padding:2px 0;border-bottom:1px dotted var(--line)}
.dpa-hist li:last-child{border-bottom:0}
.dpa-hist[hidden]{display:none}
.dropzone{border:2px dashed var(--line);padding:14px 10px;text-align:center;color:var(--slate);font-size:12.5px;cursor:pointer;background:transparent}
.dropzone.drag{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.dropzone:focus-visible{outline:2px solid var(--primary);outline-offset:2px}