:root{
  /* --- dark palette (default identity) --- */
  --bg:#0B0E13;
  --surface:#11151D;
  --surface-2:#161B24;
  --border:#262E3C;
  --text:#EDF0F5;
  --text-2:#A8B2C1;
  --text-3:#6E7A8C;

  --mint:#46E5C8;
  --mint-soft:rgba(70,229,200,.14);
  --amber:#FFB443;
  --amber-soft:rgba(255,180,67,.14);

  --crit:#E5484D;      --crit-soft:rgba(229,72,77,.16);
  --fragile:#F0954B;   --fragile-soft:rgba(240,149,75,.16);
  --correct:#4FA0E8;   --correct-soft:rgba(79,160,232,.16);
  --maitrise:#4FC98A;  --maitrise-soft:rgba(79,201,138,.16);

  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28);
  --radius: 14px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FCFCFD; --surface:#FFFFFF; --surface-2:#F5F6F8; --border:#E2E6ED;
    --text:#12151C; --text-2:#4B5565; --text-3:#828C9C;
    --mint-soft:rgba(14,156,133,.10); --amber-soft:rgba(166,101,15,.10);
    --crit:#CE3B40; --crit-soft:rgba(206,59,64,.10);
    --fragile:#C97324; --fragile-soft:rgba(201,115,36,.10);
    --correct:#2F7FC7; --correct-soft:rgba(47,127,199,.10);
    --maitrise:#2E9E6C; --maitrise-soft:rgba(46,158,108,.10);
    --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px rgba(20,24,32,.08);
  }
}
:root[data-theme="light"]{
  --bg:#FCFCFD; --surface:#FFFFFF; --surface-2:#F5F6F8; --border:#E2E6ED;
  --text:#12151C; --text-2:#4B5565; --text-3:#828C9C;
  --mint-soft:rgba(14,156,133,.10); --amber-soft:rgba(166,101,15,.10);
  --crit:#CE3B40; --crit-soft:rgba(206,59,64,.10);
  --fragile:#C97324; --fragile-soft:rgba(201,115,36,.10);
  --correct:#2F7FC7; --correct-soft:rgba(47,127,199,.10);
  --maitrise:#2E9E6C; --maitrise-soft:rgba(46,158,108,.10);
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px rgba(20,24,32,.08);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  padding-inline:20px;
}
h1,h2,h3,h4{font-family:"Space Grotesk",system-ui,sans-serif; font-weight:600; margin:0; text-wrap:balance;}
.wrap{max-width:1180px; margin-inline:auto;}
a{color:inherit;}
button{font:inherit; cursor:pointer;}
::selection{background:var(--mint-soft);}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--border); padding-block:14px;}
.topbar__inner{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk"; font-weight:600; font-size:16px; white-space:nowrap; text-decoration:none;}
.brand__mark{display:inline-flex; width:20px; height:14px; position:relative; flex:none;}
.brand__mark i{position:absolute; width:12px; height:12px; border-radius:50%; top:1px;}
.brand__mark i:first-child{background:var(--mint); left:0;}
.brand__mark i:last-child{background:var(--amber); left:8px; opacity:.9;}
.tabs{display:flex; gap:4px; margin-left:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px;}
.tab{border:none; background:transparent; color:var(--text-2); padding:8px 14px; border-radius:8px; font-size:13.5px; font-weight:500; text-decoration:none; display:inline-block;}
.tab[aria-current="true"]{background:var(--surface-2); color:var(--text); box-shadow:var(--shadow);}

main{padding-block:32px 64px;}
.eyebrow{color:var(--text-3); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin:0 0 8px; display:flex; align-items:center; flex-wrap:wrap;}
.muted{color:var(--text-2);}
.small{font-size:13px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:10px 18px; font-size:13.5px; font-weight:600; border:1px solid transparent; text-decoration:none;}
.btn--primary{background:var(--text); color:var(--bg);}
.btn--primary:hover{opacity:.88;}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn--ghost:hover{background:var(--surface-2);}
.btn--sm{padding:7px 12px; font-size:12.5px;}

/* ---------- badges / pills ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:600; letter-spacing:.02em; border:1px solid var(--border); color:var(--text-2); white-space:nowrap;}
.pill--status-cours{color:var(--fragile); background:var(--fragile-soft); border-color:transparent;}
.pill--status-fini{color:var(--maitrise); background:var(--maitrise-soft); border-color:transparent;}

/* ================= ACCUEIL ================= */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px;}
.list{display:flex; flex-direction:column; gap:1px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--border);}
.audit-card{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; background:var(--surface); padding:18px 20px; text-align:left; border:none; width:100%; color:var(--text); text-decoration:none;}
.audit-card:hover{background:var(--surface-2);}
.audit-card__name{font-family:"Space Grotesk"; font-weight:600; font-size:15.5px;}
.audit-card__meta{color:var(--text-3); font-size:12.5px; margin-top:3px;}
.score-chip{display:flex; align-items:baseline; gap:3px; font-family:"Space Grotesk"; font-weight:600; border-radius:10px; padding:8px 12px; min-width:64px; justify-content:center;}
.score-chip strong{font-size:17px;}
.score-chip span{font-size:11px; opacity:.75;}
@media (max-width:720px){ .audit-card{grid-template-columns:1fr; row-gap:10px;} }

/* ================= dialog (nouvel audit) ================= */
.dialog{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); padding:0; width:min(420px, calc(100vw - 40px));}
.dialog::backdrop{background:rgba(5,7,10,.55);}
.dialog-form{padding:24px;}
.dialog-form h3{margin-bottom:18px;}
.dialog-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-2); margin-bottom:14px;}
.field input, .field textarea{font:inherit; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 11px;}
.field input:focus, .field textarea:focus{outline:2px solid var(--mint); outline-offset:1px;}

/* ================= LOGIN ================= */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding-block:40px;}
.login-card{width:min(360px, calc(100vw - 40px)); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}
.form-error{color:var(--crit); background:var(--crit-soft); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:16px;}

/* ================= AUDIT — sticky summary ================= */
.summary-bar{display:grid; grid-template-columns:1.1fr repeat(3, minmax(0,1fr)); gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:var(--shadow);}
.client-id h2{font-size:19px;}
.client-id .meta{color:var(--text-2); font-size:13px; margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 14px;}
.score-tile{border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; border:1px solid var(--border);}
.score-tile__label{font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
.score-tile__value{font-family:"Space Grotesk"; font-size:26px; font-weight:600; font-variant-numeric:tabular-nums;}
.score-tile__value em{font-size:14px; font-weight:500; opacity:.6; font-style:normal;}
.score-tile--arnaud{border-color:color-mix(in srgb, var(--mint) 35%, var(--border));}
.score-tile--pierrot{border-color:color-mix(in srgb, var(--amber) 35%, var(--border));}
.score-tile--global{background:var(--surface-2);}
@media (max-width:860px){ .summary-bar{grid-template-columns:1fr 1fr;} }

/* ================= AUDIT — two volets ================= */
.volets{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:860px){ .volets{grid-template-columns:1fr;} }
.volet-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.volet-dot{width:10px; height:10px; border-radius:50%; flex:none;}
.volet-dot--mint{background:var(--mint);}
.volet-dot--amber{background:var(--amber);}
.volet-head h3{font-size:15px;}
.volet-head .who{color:var(--text-3); font-size:12px; font-weight:500;}

details.domain{background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden;}
details.domain > summary{list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
details.domain > summary::-webkit-details-marker{display:none;}
.domain-title{font-weight:600; font-size:13.5px;}
.domain-caret{color:var(--text-3); transition:transform .15s ease; flex:none;}
details[open] .domain-caret{transform:rotate(90deg);}
.domain-score{display:flex; align-items:center; gap:8px; flex:none;}
.domain-bar{width:72px; height:6px; border-radius:4px; background:var(--border); overflow:hidden;}
.domain-bar__fill{height:100%; border-radius:4px;}
.domain-score__num{font-family:"Space Grotesk"; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; width:34px; text-align:right;}

.criteria{border-top:1px solid var(--border); padding:6px 16px 14px;}
.criterion{padding:12px 0; border-bottom:1px solid var(--border);}
.criterion:last-child{border-bottom:none;}
.criterion__row{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.criterion__label{font-size:13.5px; flex:1; padding-top:4px;}
.score-select{display:flex; gap:4px; flex:none;}
.score-btn{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-3); font-family:"Space Grotesk"; font-weight:600; font-size:12.5px;}
.score-btn:hover{border-color:var(--text-3);}
.score-btn[data-active="true"]{color:#0B0E13; border-color:transparent;}
.note-toggle{margin-top:8px; background:none; border:none; color:var(--text-3); font-size:12px; text-decoration:underline; text-underline-offset:2px; padding:0;}
.note-toggle:hover{color:var(--text-2);}
.criterion__note{margin-top:8px; width:100%; resize:vertical; min-height:56px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:12.5px; padding:9px 10px;}
.criterion__note[hidden]{display:none;}

.save-status{min-height:18px; text-align:right; transition:opacity .3s ease;}

/* legend */
.legend{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 26px; font-size:12px; color:var(--text-2);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:9px; height:9px; border-radius:50%; display:inline-block;}

/* ================= RAPPORT ================= */
.report{max-width:760px;}
.report-head{border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; background:var(--surface); margin-bottom:26px;}
.report h2{font-size:21px;}
.report-score-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.report-score-row .score-tile{min-width:130px;}

.priorities{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:22px 24px; margin-bottom:26px;}
.priorities h3{font-size:14px; margin-bottom:14px;}
.priority-item{display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--border);}
.priority-item:first-of-type{border-top:none;}
.priority-rank{flex:none; width:22px; height:22px; border-radius:50%; background:var(--crit-soft); color:var(--crit); font-family:"Space Grotesk"; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.priority-item p{margin:0; font-size:13.5px;}
.priority-item .src{color:var(--text-3); font-size:11.5px; margin-top:2px;}

.report-section{margin-bottom:22px;}
.report-section h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:8px; font-weight:600;}
.report-section p{margin:0 0 10px; font-size:13.75px; color:var(--text);}
.report-actions{display:flex; gap:10px; margin-top:8px;}

/* ================= RÉFÉRENTIEL (admin) ================= */
.inline-edit{
  font:inherit; background:transparent; border:1px solid transparent; border-radius:7px;
  color:var(--text); padding:5px 8px; width:100%;
}
.inline-edit:hover{border-color:var(--border);}
.inline-edit:focus{outline:none; border-color:var(--mint); background:var(--surface-2);}
.inline-edit--volet{font-family:"Space Grotesk"; font-weight:600; font-size:15px; width:auto; flex:1; min-width:80px;}
.inline-edit--person{width:auto; flex:none; max-width:140px; color:var(--text-2); font-size:13px;}
.inline-edit--domain{font-weight:600; font-size:13.5px; flex:1;}
.inline-edit--criterion{font-size:13.5px; flex:1;}

.volet-head--ref{gap:8px; flex-wrap:wrap;}
details.domain summary{gap:10px;}
details.domain summary .inline-edit--domain{margin-right:auto;}

.icon-btn{
  flex:none; width:26px; height:26px; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--text-3); display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1;
}
.icon-btn:hover{background:var(--crit-soft); color:var(--crit); border-color:transparent;}

.ref-criterion{display:flex; align-items:center; gap:6px; padding:4px 0;}
.criteria--ref{padding:8px 16px 12px;}

.add-row{display:flex; gap:8px; padding:10px 16px; align-items:center;}
.add-row input[type="text"]{
  flex:1; font:inherit; font-size:13px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:8px 11px;
}
.add-row input[type="text"]:focus{outline:2px solid var(--mint); outline-offset:1px;}
.add-row--domain{background:var(--surface); border:1px dashed var(--border); border-radius:12px; margin-top:2px;}

@media print{
  .topbar, .report-actions, .btn{display:none !important;}
  body{background:#fff; color:#111; padding:0;}
}