/* ============================================================
   KAOMA Vigilance — design system
   Trois états de thème : clair (défaut), sombre (système), forcé
   ============================================================ */
:root{
  --paper:#F6F3ED; --surface:#FFFFFF; --surface-2:#EFEBE2;
  --ink:#171F1B; --ink-2:#414B46; --muted:#6E7A74; --line:#DDD7CA;
  --accent:#1B5E58; --accent-soft:#E1EDEA; --accent-line:#9CC4BE;
  --good:#2E7047; --good-soft:#E3F0E7; --good-line:#9AC7AA;
  --warn:#9A6512; --warn-soft:#F7ECD8; --warn-line:#DCBE85;
  --crit:#A03A31; --crit-soft:#F8E5E2; --crit-line:#DFA9A2;
  --shadow:0 1px 2px rgba(23,31,27,.05), 0 8px 24px -16px rgba(23,31,27,.25);
  --shadow-lg:0 2px 6px rgba(23,31,27,.06), 0 30px 60px -30px rgba(23,31,27,.4);
  --side:#141B18; --side-ink:#C9D2CD; --side-ink-2:#7E8B85;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11150F; --surface:#191F1B; --surface-2:#212823; --ink:#EDEAE0;
    --ink-2:#C3CAC3; --muted:#8A958D; --line:#2D3630;
    --accent:#7CC6B9; --accent-soft:#1C2B29; --accent-line:#356661;
    --good:#74C08D; --good-soft:#1A2A20; --good-line:#33553D;
    --warn:#D9A94F; --warn-soft:#2A2317; --warn-line:#584A2C;
    --crit:#E28579; --crit-soft:#2E1E1C; --crit-line:#5C3833;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 34px 64px -32px rgba(0,0,0,.9);
    --side:#0C110F; --side-ink:#A9B4AE; --side-ink-2:#5E6B65;
  }
}
:root[data-theme="dark"]{
  --paper:#11150F; --surface:#191F1B; --surface-2:#212823; --ink:#EDEAE0;
  --ink-2:#C3CAC3; --muted:#8A958D; --line:#2D3630;
  --accent:#7CC6B9; --accent-soft:#1C2B29; --accent-line:#356661;
  --good:#74C08D; --good-soft:#1A2A20; --good-line:#33553D;
  --warn:#D9A94F; --warn-soft:#2A2317; --warn-line:#584A2C;
  --crit:#E28579; --crit-soft:#2E1E1C; --crit-line:#5C3833;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 34px 64px -32px rgba(0,0,0,.9);
  --side:#0C110F; --side-ink:#A9B4AE; --side-ink-2:#5E6B65;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif; margin:0; text-wrap:balance}
h1{font-size:1.6rem; font-weight:800; letter-spacing:-.022em}
h2{font-size:1.22rem; font-weight:700; letter-spacing:-.016em}
h3{font-size:1rem; font-weight:700}
p{margin:0}
button{font-family:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.67rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.shell{display:grid; grid-template-columns:216px 1fr; min-height:100vh}
@media(max-width:860px){ .shell{grid-template-columns:1fr}
  .side{position:sticky; top:0; z-index:40; flex-direction:row !important; align-items:center;
    padding:10px 14px !important; overflow-x:auto}
  .side .brand{margin-bottom:0 !important; margin-right:8px}
  .side .snav{flex-direction:row !important; gap:2px !important}
  .side .sfoot{display:none}
}
.side{background:var(--side); color:var(--side-ink); display:flex; flex-direction:column;
  padding:22px 14px; gap:4px}
.brand{display:flex; align-items:center; gap:10px; padding:0 10px; margin-bottom:18px}
.brand .k{width:30px; height:30px; border-radius:8px; background:var(--accent);
  display:grid; place-items:center; color:#F6F3ED; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800; font-size:1.05rem; flex:none}
.brand .t{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:.98rem; color:#fff}
.brand .t small{display:block; font-family:"IBM Plex Mono",monospace; font-weight:500;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--side-ink-2)}
.snav{display:flex; flex-direction:column; gap:2px}
.snav a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  color:var(--side-ink); text-decoration:none; font-size:.92rem; font-weight:500; white-space:nowrap}
.snav a:hover{background:rgba(255,255,255,.05)}
.snav a.on{background:rgba(255,255,255,.09); color:#fff}
.snav a .ic{width:17px; text-align:center; opacity:.75; flex:none}
.sfoot{margin-top:auto; padding:12px 11px; font-size:.72rem; color:var(--side-ink-2); line-height:1.5}
.sfoot a{color:var(--side-ink)}
main{padding:clamp(18px,3vw,34px); max-width:1150px; width:100%}
.view{display:none}
.view.on{display:block; animation:vin .18s ease}
@keyframes vin{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.vhead{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-bottom:22px}
.vhead .grow{flex:1}
.vhead p{color:var(--ink-2); font-size:.92rem}

/* ---------- composants ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; box-shadow:var(--shadow)}
.grid{display:grid; gap:14px}
@media(min-width:840px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:9px;
  padding:9px 16px; font-size:.9rem; font-weight:600; border:1px solid transparent; cursor:pointer;
  transition:transform .1s ease, opacity .1s ease; text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-1{background:var(--accent); color:var(--paper)}
.btn-2{background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow)}
.btn-3{background:transparent; color:var(--accent); border-color:var(--accent-line)}
.btn-danger{background:transparent; color:var(--crit); border-color:var(--crit-line)}
.btn-sm{padding:6px 12px; font-size:.82rem; border-radius:7px}

.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap; border:1px solid}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.p-ok{background:var(--good-soft); color:var(--good); border-color:var(--good-line)}
.p-wn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.p-ko{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line)}
.p-nt{background:var(--surface-2); color:var(--muted); border-color:var(--line)}
.p-acc{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px 16px;
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow)}
.stat .v{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.8rem;
  letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums}
.stat .l{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted)}
.stat.ok .v{color:var(--good)} .stat.wn .v{color:var(--warn)} .stat.ko .v{color:var(--crit)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}

input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%; padding:9px 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:.92rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent-line)}
label{display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:5px}
.field{margin-bottom:14px}
.frow{display:grid; gap:12px}
@media(min-width:700px){ .frow{grid-template-columns:1fr 1fr} .frow.f3{grid-template-columns:repeat(3,1fr)} }

/* listes */
.list{display:flex; flex-direction:column; gap:10px}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:11px; padding:14px 17px; box-shadow:var(--shadow);
  cursor:pointer; transition:border-color .12s ease}
.row:hover{border-color:var(--accent-line)}
.row .nm{font-weight:600; font-size:.97rem}
.row .sub{font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--muted); width:100%}
@media(min-width:700px){ .row .sub{width:auto} }
.row .grow{flex:1}

/* dropzone */
.drop{border:2px dashed var(--line); border-radius:12px; padding:26px 20px; text-align:center;
  color:var(--muted); font-size:.9rem; cursor:pointer; transition:all .15s ease; background:var(--surface)}
.drop:hover,.drop.over{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.drop input{display:none}

/* checks */
.checks{display:flex; flex-direction:column}
.check{display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:start;
  padding:11px 0; border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:none}
.check .ic{width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:700; margin-top:1px}
.check.ok .ic{background:var(--good-soft); color:var(--good); border:1px solid var(--good-line)}
.check.wn .ic{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line)}
.check.ko .ic{background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit-line)}
.check.nt .ic{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.check .t{font-weight:600; font-size:.9rem}
.check .d{font-size:.82rem; color:var(--ink-2); margin-top:1px}
.check .d .mono{font-size:.78rem}

/* score */
.score{display:flex; align-items:center; gap:16px; padding:16px 19px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); margin-bottom:16px}
.score .ring{width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.15rem; flex:none;
  border:4px solid var(--line); font-variant-numeric:tabular-nums}
.score.ok .ring{border-color:var(--good); color:var(--good)}
.score.wn .ring{border-color:var(--warn); color:var(--warn)}
.score.ko .ring{border-color:var(--crit); color:var(--crit)}
.score .t{font-weight:700}
.score .d{font-size:.85rem; color:var(--ink-2)}

/* preuve / journal */
.proofline{display:grid; grid-template-columns:150px 1fr; gap:10px; padding:9px 0;
  border-bottom:1px dashed var(--line); font-size:.85rem}
.proofline:last-child{border-bottom:none}
.proofline .w{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums}
@media(max-width:600px){ .proofline{grid-template-columns:1fr} }

/* toast + modal */
#toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:10px;
  font-size:.88rem; font-weight:600; opacity:0; transition:all .25s ease; z-index:100;
  box-shadow:var(--shadow-lg); max-width:90vw; text-align:center}
#toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:none;
  align-items:flex-start; justify-content:center; padding:4vh 16px; overflow-y:auto}
.modal-bg.show{display:flex}
.modal{background:var(--paper); border-radius:14px; box-shadow:var(--shadow-lg);
  width:100%; max-width:680px; padding:24px 26px; border:1px solid var(--line)}
.modal h2{margin-bottom:4px}
.modal .mh{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px}
.modal .mh .grow{flex:1}
.mclose{background:none; border:none; font-size:1.4rem; color:var(--muted); cursor:pointer; line-height:1}

.hint{font-size:.8rem; color:var(--muted); line-height:1.5}
.warnbox{background:var(--warn-soft); border:1px solid var(--warn-line); border-left:3px solid var(--warn);
  border-radius:9px; padding:11px 14px; font-size:.85rem; color:var(--ink-2)}
.okbox{background:var(--good-soft); border:1px solid var(--good-line); border-left:3px solid var(--good);
  border-radius:9px; padding:11px 14px; font-size:.85rem; color:var(--ink-2)}
.sep{height:1px; background:var(--line); border:none; margin:18px 0}
.empty{text-align:center; padding:44px 20px; color:var(--muted)}
.empty .big{font-size:2rem; margin-bottom:8px}
.tag-doc{display:inline-flex; align-items:center; gap:7px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:5px 10px;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* impression du dossier de preuve */
@media print{
  .side,.vhead .btn,.noprint,#toast{display:none !important}
  .shell{grid-template-columns:1fr}
  body{background:#fff; color:#111}
  .card,.row{box-shadow:none; border-color:#ccc}
  main{max-width:none; padding:0}
}