/* Back-office — charte V7LVET, densité d'outil de travail plutôt que de livrable client. */
:root{
  --paper:#F4F5F3; --card:#FFFFFF; --card2:#E9EDEB;
  --ink:#123A3E; --ink2:#43625F; --ink3:#6E8683;
  --accent:#2E6965; --accent-ink:#063238; --accent-soft:#DCE9E5;
  --hair:rgba(6,50,56,.16); --hair2:rgba(6,50,56,.08);
  --good:#0ca30c; --good-ink:#00591d; --good-soft:#E4F4E4;
  --warn:#e0a615; --warn-ink:#6d4e00; --warn-soft:#FBF2DC;
  --crit:#c43a3a; --crit-ink:#a02626; --crit-soft:#F8E5E5;
  --violet:#6242FB;
  --font-title:"Cabin","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#042A30; --card:#0A3940; --card2:#10454D;
    --ink:#F4F5F3; --ink2:#C0D2D0; --ink3:#8BA6A3;
    --accent:#6FCBB4; --accent-ink:#8FDCC9; --accent-soft:#0C4A46;
    --hair:rgba(244,245,243,.18); --hair2:rgba(244,245,243,.09);
    --good:#43b184; --good-ink:#7FD9B4; --good-soft:#0B3B2E;
    --warn:#e0a93e; --warn-ink:#F0C877; --warn-soft:#3D2F09;
    --crit:#e0685f; --crit-ink:#F09A94; --crit-soft:#3E1C1A;
    --violet:#A79AFF;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.55 var(--font-body);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--font-title);margin:0}
h1{font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
h2{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent-ink);margin:0 0 12px}
h3{font-size:15px;font-weight:600}
a{color:var(--accent-ink)}

.topbar{background:var(--accent-ink);color:#F4F5F3;padding:14px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar h1{color:#fff;font-size:15px;letter-spacing:.18em}
.topbar .sp{flex:1}
.topbar a,.topbar button{color:#9FBAB6;background:none;border:none;font:inherit;
  font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px}
.topbar a:hover,.topbar button:hover{color:#fff;background:rgba(255,255,255,.1)}
.ribbon{height:4px;background:linear-gradient(90deg,#063238 0%,#2E6965 45%,#6242FB 100%)}

.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 70px}
.wrap.etroit{max-width:420px;padding-top:70px}

.card{background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:18px;
  margin-bottom:16px}

label{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
input,select{width:100%;font:inherit;padding:8px 10px;border-radius:7px;
  border:1px solid var(--hair);background:var(--card);color:var(--ink)}
input[type=number]{font-family:var(--font-mono);text-align:right}
input:focus-visible,select:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.champ{margin-bottom:12px}
.grille{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.suffixe{position:relative}
.suffixe::after{content:"€";position:absolute;right:10px;top:31px;font-size:12px;
  color:var(--ink3);pointer-events:none}
.suffixe input{padding-right:24px}

button.action{font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;
  border:1px solid var(--accent-ink);background:var(--accent-ink);color:#fff}
button.action:hover{filter:brightness(1.15)}
button.action.fant{background:transparent;color:var(--accent-ink);border-color:var(--hair)}
button.action.danger{background:transparent;color:var(--crit-ink);border-color:var(--crit)}
button.action:disabled{opacity:.45;cursor:not-allowed;filter:none}
.barre{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair2)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);
  border-bottom:1px solid var(--hair)}
td.n,th.n{text-align:right;font-family:var(--font-mono)}
tbody tr:hover{background:var(--card2)}
tr.cliquable{cursor:pointer}

.statut{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap}
.statut.brouillon{background:var(--card2);color:var(--ink2)}
.statut.verifie{background:var(--good-soft);color:var(--good-ink)}
.statut.publie{background:var(--accent-soft);color:var(--accent-ink)}
.statut.revision{background:var(--warn-soft);color:var(--warn-ink)}

.msg{border-radius:8px;padding:11px 14px;margin:12px 0;font-size:14px;
  border:1px solid transparent}
.msg.ok{background:var(--good-soft);border-color:var(--good);color:var(--good-ink)}
.msg.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn-ink)}
.msg.crit{background:var(--crit-soft);border-color:var(--crit);color:var(--crit-ink)}
.msg ul{margin:6px 0 0;padding-left:20px}
.msg:empty{display:none}

.deux{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 340px;align-items:start}
@media (max-width:900px){.deux{grid-template-columns:1fr}}
/**
 * Colonne de droite collante.
 *
 * La règle porte sur la **colonne entière**, jamais sur une carte seule : une carte collante
 * suivie de sœurs les laisse défiler sous elle, et elles deviennent inatteignables. C'est le
 * défaut qui empêchait d'accéder au bloc de publication après avoir validé un dossier.
 *
 * Le `max-height` avec défilement propre règle le second cas : une colonne plus haute que
 * l'écran ne peut pas être parcourue jusqu'en bas, puisqu'elle reste épinglée.
 *
 * Sous 900 px, la grille passe en une colonne et le collage n'a plus de sens.
 */
.colle{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;
  scrollbar-width:thin}
@media (max-width:900px){.colle{position:static;max-height:none;overflow-y:visible}}

.kpi{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.kpi .t{background:var(--card2);border-radius:8px;padding:11px 13px}
.kpi .t .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:4px}
.kpi .t .v{font-family:var(--font-title);font-weight:700;font-size:19px;color:var(--accent-ink)}
.kpi .t.plein{grid-column:1/-1;background:var(--accent-ink)}
.kpi .t.plein .k{color:#8FDCC9}
.kpi .t.plein .v{color:#fff;font-size:24px}

.mini{font-size:12.5px;color:var(--ink3);line-height:1.5}
.vide{text-align:center;color:var(--ink3);padding:44px 20px}
.num{font-family:var(--font-mono)}