/* ==================================================================
   Charte graphique — Chambre d'Agriculture de Corse

   Extrait tel quel du prototype de référence par
   database/seeders/outils/extraire_charte.php

   NE PAS MODIFIER À LA MAIN : les retouches propres à l'application
   vont dans app.css, qui se charge après celui-ci.

   Palette issue du logo : vert institutionnel, vert clair, rouge.
   ================================================================== */

:root{
  /* palette issue du logo : vert institutionnel, vert clair, rouge */
  --vert:#009640; --vert-fonce:#00702F; --vert-nuit:#0B2417;
  --vert-clair:#78BE20; --rouge:#E52322;
  --ink:#12211A; --ink-2:#33473C; --muted:#647A6E;
  --paper:#F2F4EF; --surface:#FFFFFF; --surface-2:#F7F9F4;
  --line:#D3DACD; --line-strong:#A9B7A0;
  --pine:var(--vert-fonce); --pine-soft:#E4F3E9; --pine-mid:var(--vert);
  --ok:#00702F; --ok-bg:#DCF0E2;
  --down:#C31A19; --down-bg:#FCE3E2;
  --up:#9A6800; --up-bg:#FDF0D5;
  --r:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:14px; line-height:1.45;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.side{
  width:230px;flex:0 0 230px;background:var(--vert-nuit);color:#D6E4DA;
  padding:0 0 20px;display:flex;flex-direction:column;gap:4px;
}
.brand{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.11);margin-bottom:18px}
.brand b{display:block;font-size:16px;letter-spacing:-.015em;color:#fff}
.brand .bar{display:flex;gap:3px;margin-top:7px;margin-bottom:6px}
.brand .bar i{height:3px;flex:1;border-radius:2px}
.brand .bar i:nth-child(1){background:var(--vert)}
.brand .bar i:nth-child(2){background:var(--vert-clair)}
.brand .bar i:nth-child(3){background:var(--rouge);flex:0 0 16px}
.brand span{font-size:11.5px;color:#8FA79A;letter-spacing:.01em;line-height:1.35;display:block}
.side h4 .reserve{
  float:right;font-size:9px;letter-spacing:.06em;background:rgba(255,255,255,.12);
  color:#A9C0B4;padding:1px 7px;border-radius:99px;font-weight:600;margin-top:-1px
}
.ouvre{flex:1;min-width:260px}
.ouvre b{display:block;font-size:14px;color:var(--vert-fonce)}
.alerte-inline{color:var(--down);display:inline}
.ouvre span{font-size:12.5px;color:var(--muted);line-height:1.45}
.side h4{
  padding:16px 20px 5px;font-size:10px;text-transform:uppercase;
  letter-spacing:.11em;color:#7C9789;font-weight:700
}
.nav button{
  display:block;width:100%;text-align:left;padding:8px 20px;
  font-size:13.5px;color:#C2D2C8;border-left:3px solid transparent
}
.nav button:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav button.on{color:#fff;background:rgba(0,150,64,.24);border-left-color:var(--vert-clair);font-weight:600}
.sscat{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 20px 7px;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:#7C9789;font-weight:700;border-left:3px solid transparent
}
.sscat:hover{color:#B9CFC3;background:rgba(255,255,255,.04)}
.sscat .chv{font-size:9px;opacity:.75;width:9px}
.sscat.actif{color:#C9DCD1}
.nav.sous{padding-bottom:4px}
.nav.sous button{padding-left:31px;font-size:13px;color:#A9BEB2}
.nav.sous button::before{
  content:'';position:absolute;margin-left:-13px;margin-top:8px;
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22)
}
.nav.sous button{position:relative}
.nav.sous button.on::before{background:var(--vert-clair)}
.side .foot{margin-top:auto;padding:14px 20px 0;font-size:11px;color:#68806F;line-height:1.5;border-top:1px solid rgba(255,255,255,.09)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{
  background:var(--surface);border-bottom:2px solid var(--vert);
  padding:14px 30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap
}
.top h1{font-size:19px;font-weight:700;letter-spacing:-.02em}
.top .sub{font-size:12.5px;color:var(--muted)}
/* ---------- chiffres clés ---------- */
.inv{margin-bottom:18px}
.cafbox{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line-strong);border-left:5px solid var(--vert);
  border-radius:var(--r);padding:13px 16px
}
.cafbox .ci{flex:1;min-width:280px}
.cafbox .ci>b{display:block;font-size:14px}
.cafbox .ci>span{font-size:12.5px;color:var(--muted);line-height:1.5}
.cafbox .ci span b{color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin-bottom:22px}
.kpi{
  background:var(--surface);border:1px solid var(--line-strong);border-top:3px solid var(--vert);
  border-radius:var(--r);padding:12px 15px;display:flex;flex-direction:column;gap:3px
}
.kpi span{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.kpi b{font-size:21px;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.kpi.pos{border-top-color:var(--vert)}
.kpi.pos b{color:var(--vert-fonce)}
.kpi.neg{border-top-color:var(--rouge)}
.kpi.neg b{color:var(--down)}

/* ---------- tableaux de bord ---------- */
.sh{
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--vert-nuit);
  margin:24px 0 11px;padding-bottom:6px;border-bottom:2px solid var(--vert)
}
.sh:first-of-type{margin-top:0}
.synth{border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:14px;
  width:max-content;max-width:100%;min-width:min(330px,100%)}
.synth table{width:100%;table-layout:auto}
.synth td{padding:7px 13px;font-size:13.5px;border-bottom:1px solid var(--line)}
.synth td.r{white-space:nowrap;width:1%}
.synth td:first-child{width:auto}
.synth tbody tr:nth-child(even):not(.stot):not(.sres):not(.ssect):not(.stitre) td{background:var(--surface-2)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,max-content));gap:14px;
  justify-content:start;align-items:start}
.sgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,max-content));gap:16px;
  margin-bottom:20px;justify-content:start;align-items:start}
tr.stitre td{background:var(--vert);color:#fff;font-weight:700;font-size:13px;text-align:center}
tr.ssect td{background:var(--vert-clair);color:#123;font-weight:700;font-size:12px;text-align:center;
  text-transform:uppercase;letter-spacing:.07em;padding-top:5px;padding-bottom:5px}
tr.sposte td{background:var(--pine-soft);font-weight:600;font-size:12.5px;color:var(--vert-fonce)}
tr.stot td{background:#F5B841;font-weight:700;border-bottom:none}
/* Résultat et solde : la couleur dit le sens avant qu'on ait lu le nombre.
   Un déficit doit se voir d'un coup d'œil sur une page qui en compte huit. */
tr.sres td{background:#FCE94F;font-weight:800;font-size:15px;letter-spacing:-.01em;
  padding-top:10px;padding-bottom:10px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
tr.ssolde td{background:var(--pine-soft);font-weight:800;font-size:14.5px;
  padding-top:9px;padding-bottom:9px;
  border-top:2px solid var(--vert-fonce);border-bottom:none}
tr.sres td.ben,tr.ssolde td.ben{color:var(--vert-fonce)}
tr.sres td.def,tr.ssolde td.def{color:var(--down)}
/* Le comparatif allège ses libellés et appuie sa colonne de total ;
   sur ces deux lignes-là c'est la lecture d'ensemble qui prime. */
table.comp tr.sres td,table.comp tr.ssolde td{font-weight:800}
.scroll{overflow-x:auto}
table.comp{min-width:760px}
/* Les noms de pôles passent à la ligne : « Etablissement Régional de
   l'Elevage » sur une seule ligne imposait à lui seul 269 px, et six
   colonnes de ce genre poussaient le tableau à 1 500 px — d'où la barre
   de défilement. Les montants, eux, ne se coupent jamais. */
table.comp thead th.r{white-space:normal;min-width:96px;max-width:148px;line-height:1.25}
/* Sept à onze colonnes sur une page qui en a la place pour huit : les
   marges intérieures sont resserrées. 112 px, c'est exactement ce que
   mesure le montant le plus large possible — « -18 464 829 € » — sans
   jamais se couper. */
table.comp td,table.comp th{padding-left:9px;padding-right:9px}
table.comp td.r{min-width:112px}
table.comp thead tr.sub th{background:var(--vert);padding-top:4px;padding-bottom:5px;font-size:11px}
table.comp td:first-child{white-space:nowrap;font-weight:500}
table.comp .tot{background:rgba(0,150,64,.09);font-weight:700}
table.comp thead th.tot{background:var(--vert-fonce)}
.caf{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.wcaf{flex:1 1 420px;min-width:0}
.wcaf td:first-child{min-width:0}
.tafnb{
  width:max-content;max-width:100%;
  display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line-strong);border-left:4px solid var(--vert);
  border-radius:var(--r);padding:11px 16px
}
.tafnb span{font-size:12.5px;font-weight:700;letter-spacing:.05em}
.tafnb b{font-size:15px}

/* ---------- ressources humaines ---------- */
:root{--violet:#7C4DBE; --violet-bg:rgba(124,77,190,.11); --violet-bg2:rgba(124,77,190,.19)}
tr.rh td, tr.rh input{background:var(--violet-bg) !important}
tr.rh:hover td{background:var(--violet-bg2) !important}
.ledger tr.cpt.rh td{border-bottom-color:rgba(124,77,190,.35)}
.reprise{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;
  background:#F3EDFB;border:1px solid var(--violet);border-left:5px solid var(--violet);
  border-radius:var(--r);padding:13px 16px
}
.reprise>div{flex:1;min-width:270px}
.reprise b{display:block;font-size:14px;color:#4A2C77}
.reprise span{font-size:12.5px;color:var(--muted);line-height:1.45}
.reprise .primaire{background:var(--violet);border-color:#5B3690;color:#fff}
.reprise .primaire:hover{background:#5B3690}
tr.cpt.attente td{background:#F7F3FC}
.grid tr.attente td{background:var(--up-bg)}
tr.cpt.attente .clib{color:var(--muted)}
tr.cpt.attente .propose{color:var(--muted);font-weight:500}
.conf{margin-right:9px;vertical-align:-2px;accent-color:var(--violet)}
.natt{
  font-size:11px;color:#5B3690;background:rgba(124,77,190,.13);border:1px solid rgba(124,77,190,.35);
  padding:1px 8px;border-radius:99px;margin-left:7px;font-weight:600
}
.confmiss{
  font-size:11.5px;font-weight:700;color:#fff;background:var(--violet);
  border-radius:99px;padding:3px 11px;margin-left:auto
}
.confmiss:hover{background:#5B3690}
.nrecond{
  font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  padding:1px 8px;border-radius:99px;margin-left:7px;font-weight:500
}
.filtremod{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 15px
}
.filtremod label{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;cursor:pointer}
.filtremod span{font-size:12.5px;color:var(--muted);margin-left:auto}
/* Un compte que le rectificatif ne reprend pas : présent pour son
   montant d'avant, sans rien à saisir. */
tr.cptrow.retire td{background:var(--surface-2);color:var(--muted)}
.nretire{
  font-size:10.5px;color:var(--down);background:rgba(183,58,58,.10);
  border:1px solid rgba(183,58,58,.32);padding:1px 8px;border-radius:99px;
  margin-left:7px;font-weight:700
}
/* Une grandeur que l'outil déduit, et que personne ne saisit. */
.ncalc{
  font-size:10.5px;color:var(--vert-fonce);background:var(--pine-soft);
  border:1px solid var(--vert-clair);padding:1px 8px;border-radius:99px;
  margin-left:7px;font-weight:700;text-transform:uppercase;letter-spacing:.04em
}
.nprec{
  font-size:11px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-strong);
  padding:1px 8px;border-radius:99px;margin-left:7px;font-weight:500
}
.nprec b{font-weight:700;color:var(--vert-fonce)}
.nrh{
  font-size:10.5px;color:#5B3690;background:rgba(124,77,190,.16);
  border:1px solid rgba(124,77,190,.4);padding:1px 8px;border-radius:99px;
  margin-left:7px;font-weight:700
}
.badge.rh{background:rgba(124,77,190,.14);color:#5B3690;border-color:rgba(124,77,190,.45)}

.import{
  background:var(--surface);border:1px solid var(--line-strong);
  border-left:5px solid var(--violet);border-radius:var(--r);
  padding:15px 17px;margin-bottom:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap
}
.import.off{opacity:.5}
.import .ii{flex:1;min-width:240px}
.import .ii b{display:block;font-size:14.5px}
.import .ii span{font-size:12.5px;color:var(--muted)}
.import .ia{display:flex;gap:8px;flex-wrap:wrap}
.import .primaire{background:var(--violet);border-color:#5B3690;color:#fff}
.import .raz{color:var(--down);border-color:#E0B4B1}
.import .raz:hover:not(:disabled){background:var(--down-bg);border-color:var(--down)}
.import .primaire:hover:not(:disabled){background:#5B3690}
.import button:disabled{opacity:.45;cursor:not-allowed}

.cadenas{
  display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-strong);
  border-left:5px solid var(--muted);margin-bottom:18px
}
.cadenas.on{border-left-color:var(--violet);background:var(--violet-bg)}
.cadenas .ic{font-size:17px}
.cadenas b{display:block;font-size:13.5px}
.cadenas span{font-size:12.5px;color:var(--muted)}
.cadenas>div{flex:1}
.cadenas.on button{border-color:var(--violet);color:#5B3690}

.corresp{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:11px 15px;margin-bottom:9px
}
.corresp .src{
  font-weight:700;font-size:13.5px;background:var(--up-bg);color:#6E4B00;
  border:1px solid #DFBE6C;padding:3px 11px;border-radius:var(--r)
}
.corresp .fl{color:var(--muted)}
.corresp select{min-width:230px}
.alias{
  background:var(--surface);border:1px solid var(--line-strong);border-left:5px solid var(--violet);
  border-radius:var(--r);padding:13px 16px;margin-bottom:18px
}
.alias b{display:block;font-size:13.5px}
.alias>span{font-size:12.5px;color:var(--muted)}
.alias .al{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.apair{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
  background:var(--violet-bg);border:1px solid rgba(124,77,190,.4);color:#4A2C77;
  padding:4px 6px 4px 11px;border-radius:99px
}
.apair button{color:#7C4DBE;font-size:15px;line-height:1;padding:0 4px;border-radius:99px;opacity:.6}
.apair button:hover{opacity:1;background:rgba(124,77,190,.18)}

.pastille{
  display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid
}
.pastille.jaune{background:var(--up-bg);color:#7A5300;border-color:#DFBE6C}
.pastille.vert{background:var(--ok-bg);color:var(--vert-fonce);border-color:var(--vert)}
.pastille.rouge{background:var(--down-bg);color:var(--down);border-color:var(--rouge)}
.spacer{flex:1}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
select,input[type=text]{
  border:1px solid var(--line-strong);border-radius:var(--r);
  padding:6px 9px;background:var(--surface);font-size:13.5px
}
select:hover{border-color:var(--pine-mid)}
.page{padding:22px 30px 70px;width:100%;max-width:1700px}
.page>*{max-width:100%}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:3px;flex-wrap:wrap;border-bottom:2px solid var(--line-strong);margin-bottom:20px}
.tabs button{
  padding:9px 14px;font-size:13px;color:var(--ink-2);font-weight:500;
  border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:var(--r) var(--r) 0 0
}
.tabs button:hover{background:var(--pine-soft);color:var(--vert-fonce)}
.tabs button.on{
  color:#fff;background:var(--vert);border-bottom-color:var(--vert-nuit);font-weight:700
}
.sepinv{
  display:flex;align-items:center;align-self:stretch;padding:0 14px 0 18px;margin-left:6px;
  border-left:2px solid var(--vert-fonce);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.11em;color:var(--vert-fonce)
}
@media (max-width:900px){
  .sepinv{border-left:none;border-top:2px solid var(--vert-fonce);width:100%;padding:7px 0 3px;margin:4px 0 0}
}
.tabs .amt{font-size:11.5px;color:var(--muted);margin-left:7px;font-weight:500}
.tabs button.on .amt{color:rgba(255,255,255,.82)}

/* ---------- mission picker ---------- */
.picker{
  background:var(--surface);border:1px solid var(--line-strong);
  border-left:4px solid var(--vert);border-radius:var(--r);
  padding:14px 16px;margin-bottom:20px
}
.picker .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.picker select{min-width:290px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{
  display:flex;align-items:center;gap:8px;padding:5px 7px 5px 11px;
  border:1.5px solid var(--line-strong);border-radius:99px;font-size:12.5px;background:var(--surface);font-weight:500
}
.chip:hover{border-color:var(--vert);color:var(--vert-fonce)}
.chip.on{background:var(--vert);border-color:var(--vert-fonce);color:#fff;font-weight:700}
.chip .n{font-size:11.5px;opacity:.72}
.chip .x{padding:0 3px;border-radius:99px;opacity:.5;font-size:14px;line-height:1}
.chip .x:hover{opacity:1}

/* ---------- mission block ---------- */
.block{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
  margin-bottom:16px;overflow:hidden;box-shadow:0 1px 2px rgba(11,36,23,.05);
  width:max-content;max-width:100%;min-width:min(560px,100%)
}
.block>header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:2px solid var(--vert);background:var(--pine-soft);cursor:pointer;user-select:none
}
.block>header:hover{background:#D8ECDF}
.block.plie>header{border-bottom:1px solid var(--line-strong)}
.block>header .chev{
  font-size:11px;color:var(--vert-fonce);width:13px;flex:0 0 13px;line-height:1
}
.block.bdir>header{background:var(--up-bg);border-bottom-color:#D9A222}
.block.bdir>header .name{color:#6E4B00}
.block.bdir>header .tot{color:#6E4B00}
.block.bdir>header:hover{background:#F8E7C4}
.block.bdir>header .chev{color:#8A6510}
.foldbar{display:flex;justify-content:flex-end;margin-bottom:8px}
.block>header .name{font-weight:700;font-size:14.5px;color:var(--vert-nuit)}
.block>header .code{font-size:11.5px;color:var(--muted)}
.block>header .tot{margin-left:auto;font-weight:700;font-size:15px;color:var(--vert-fonce);white-space:nowrap}
.block .body{padding:8px 16px 14px}
.block .wrap{width:100%}

/* ---------- ledger ---------- */
table.ledger{width:100%;border-collapse:collapse;table-layout:auto}
.ledger td{padding:5px 0;vertical-align:middle}
.ledger tr.poste td{
  background:var(--vert-fonce);color:#fff;font-weight:700;font-size:12.5px;
  padding:6px 11px;cursor:pointer;user-select:none
}
.ledger tr.poste:hover td{background:#005A26}
.ledger tr.poste .chev{margin-right:7px;font-size:10px;opacity:.9}
.ledger tr.poste .nsub{
  font-size:11px;font-weight:500;margin-left:8px;padding:1px 7px;
  border-radius:99px;background:rgba(255,255,255,.18)
}
.ledger tr.poste td:first-child{border-radius:var(--r) 0 0 var(--r)}
.ledger tr.poste td:last-child{text-align:right;border-radius:0 var(--r) var(--r) 0}
.ledger tr.spacer td{padding:5px 0;border:none}
.ledger tr.cpt td{border-bottom:1px solid var(--line-strong);padding-top:7px}
.ledger tr.cpt td:first-child{padding-left:14px}
.ledger .cnum{font-size:11.5px;color:var(--muted);font-weight:500}
.ledger .clib{font-size:13.5px;color:var(--ink);font-weight:600;width:auto}
.ledger .csum{text-align:right;font-weight:700;font-size:13.5px;white-space:nowrap;width:1%}
.ledger .cact{text-align:right;width:1%;white-space:nowrap;padding-left:10px}
.ledger tr.art td{border:none;padding:2px 0}
.ledger tr.art .lib{padding-left:30px;position:relative;width:auto}
.art input[type=text]{width:100%;min-width:210px;border-color:transparent;background:transparent;padding:4px 7px;font-size:13px}
.art input[type=text]:hover{border-color:var(--line-strong);background:var(--surface-2)}
.art input[type=text]:focus{border-color:var(--vert);background:var(--surface)}
.art input.num{text-align:right;width:112px}
.art .del{color:var(--muted);padding:2px 7px;border-radius:var(--r);font-size:15px;line-height:1}
.art .del:hover{color:#fff;background:var(--rouge)}
.hint{font-size:12px;color:var(--muted);padding-left:30px;padding-top:2px}

.addzone{border-top:2px solid var(--ink);margin-top:14px;padding-top:12px}
.addzone.nosep{border-top:none;margin-top:0;padding-top:0}
.add{
  font-size:13px;color:var(--vert-fonce);padding:6px 12px;border-radius:var(--r);
  border:1.5px dashed var(--line-strong);font-weight:600
}
.add:hover{background:var(--pine-soft);border-color:var(--vert);border-style:solid}
.add.big{margin:2px 0 22px;padding:9px 16px;font-size:13.5px;border-color:var(--vert);color:#fff;background:var(--vert);border-style:solid}
.add.big:hover{background:var(--vert-fonce)}

/* ---------- recap ---------- */
.recap{
  background:var(--surface);border:2px solid var(--vert-fonce);border-radius:var(--r);
  padding:16px 18px;box-shadow:0 1px 3px rgba(11,36,23,.07);
  width:max-content;max-width:100%;min-width:min(430px,100%)
}
.recap h3{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:700;
  background:var(--vert-fonce);margin:-16px -18px 12px;padding:8px 18px
}
.recap .l{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.recap .l .v,.recap .grand span:last-child{white-space:nowrap}
.recap .l:last-of-type{border:none}
.recap .l .k{color:var(--ink-2)}
.recap .l .v{font-weight:600}
.recap .grand{
  display:flex;justify-content:space-between;margin-top:10px;padding-top:11px;
  border-top:3px double var(--vert-fonce);font-weight:800;font-size:16px;color:var(--vert-fonce)
}

/* ---------- badges / direction ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#A8D8B8}
.badge.down{background:var(--down-bg);color:var(--down);border-color:#F0B5B3}
.badge.up{background:var(--up-bg);color:var(--up);border-color:#E8CE8E}

table.grid{width:100%;border-collapse:collapse;background:var(--surface);table-layout:auto}
.grid th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;font-weight:700;padding:10px 12px;background:var(--vert-nuit)
}
.grid th.r,.grid td.r{text-align:right}
.grid td{padding:8px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.grid td.r,.grid th.r{white-space:nowrap}
.grid td.r{width:1%}
.grid tr.mission td{
  background:var(--vert-fonce);color:#fff;font-weight:700;font-size:12.5px;
  border-bottom:none
}
.grid tr.mission td.r{color:#fff}
.grid tr.total td{border-bottom:none;background:var(--pine-soft);border-top:2px solid var(--vert-fonce)}
.grid input.num{width:112px;text-align:right;padding:5px 8px;border-color:var(--line-strong)}
.grid input.num:focus{border-color:var(--vert)}
.chev2{
  font-size:10px;color:var(--vert-fonce);padding:2px 5px;border-radius:3px;
  border:1px solid var(--line-strong);margin-right:5px;line-height:1;vertical-align:1px
}
.chev2:hover{background:var(--vert);border-color:var(--vert);color:#fff}
.chevoff{display:inline-block;width:21px;margin-right:5px}
.cptrow.ouvert{background:var(--surface-2)}
.cptrow.ouvert td{border-bottom-color:var(--vert-clair)}
.nvent{
  font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  padding:1px 7px;border-radius:99px;margin-left:6px
}
tr.vent td{
  background:var(--pine-soft);font-size:13px;border-bottom:1px solid #C6E0CE;
  border-left:3px solid var(--vert-clair)
}
tr.vent td:not(:first-child){border-left:none}
.dpos{color:var(--vert-fonce);font-weight:700}
.dneg{color:var(--down);font-weight:700}
.picker .raz2{align-self:flex-end}
tr.vent .nart{font-size:11px;color:var(--muted);margin-left:7px}
tr.vent input.num{background:var(--surface)}
tr.vent.ouvert td{border-bottom-color:var(--vert)}
tr.op td{
  background:var(--surface-2);font-size:12.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line);border-left:3px solid var(--vert-fonce);padding-top:5px;padding-bottom:5px
}
tr.op td:not(:first-child){border-left:none}
tr.op td i{color:var(--muted)}
.wrap{border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:18px;
  width:max-content;max-width:100%}
.wrap.plein{width:100%}
.wrap.scroll{overflow-x:auto}

/* ---------- references ---------- */
.tools{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.tools input[type=text]{width:230px}
.count{font-size:12.5px;color:var(--muted);padding-bottom:7px}
.pgroup{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  margin-bottom:10px;overflow:hidden;width:max-content;max-width:100%;min-width:min(480px,100%)}
.pgroup>header{
  display:flex;align-items:center;gap:10px;padding:9px 13px;
  background:var(--vert-fonce);color:#fff;border-bottom:1px solid var(--line)
}
.pgroup>header .pc{font-weight:700;font-size:13px;color:#fff}
.pgroup>header .po{font-size:11.5px;color:rgba(255,255,255,.75)}
.pgroup>header .st{margin-left:auto;font-size:11.5px;color:rgba(255,255,255,.85);font-weight:600}
.pgroup ul{list-style:none}
.pgroup li{display:flex;align-items:center;gap:11px;padding:6px 13px;border-bottom:1px solid var(--line)}
.pgroup li:last-child{border:none}
.pgroup li:hover{background:var(--pine-soft)}
.pgroup li .cn{font-size:11.5px;color:var(--muted);width:62px;flex:0 0 62px}
.pgroup li .cl{font-size:13.5px;color:var(--ink);flex:1;min-width:0}
.pgroup li.locked .cl{color:var(--muted)}
.lock{font-size:11px;color:var(--vert-fonce);background:var(--pine-soft);border:1px solid var(--pine-mid);padding:1px 8px;border-radius:99px;font-weight:600}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--vert);cursor:pointer}
.mini{font-size:12.5px;color:var(--vert-fonce);padding:5px 10px;border-radius:var(--r);border:1.5px solid var(--line-strong);font-weight:600;background:var(--surface)}
.mini:hover{background:var(--pine-soft);border-color:var(--vert)}

/* ---------- modale ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(12,20,16,.42);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .13s ease-out
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border-radius:11px;width:100%;max-width:660px;
  max-height:88vh;display:flex;flex-direction:column;box-shadow:0 18px 48px rgba(0,0,0,.26)
}
.modal>header{
  display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)
}
.modal h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
.modal>header p{font-size:12.5px;color:var(--muted);margin-top:1px}
.modal .close{margin-left:auto;font-size:22px;line-height:1;color:var(--muted);padding:0 5px;border-radius:var(--r)}
.modal .close:hover{color:var(--ink);background:var(--surface-2)}
.mbody{overflow-y:auto;padding:6px 20px 16px}
.modal>footer{
  display:flex;justify-content:flex-end;gap:8px;padding:13px 20px;
  border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 11px 11px
}
.modal>footer .ok{background:var(--pine);border-color:var(--pine);color:#fff;font-weight:600;padding:7px 16px}
.modal>footer .ok:hover:not(:disabled){background:#22463a}
.modal>footer .ok:disabled{opacity:.36;cursor:not-allowed}
.modal>footer .cancel{padding:7px 14px}

.modal.malerte>header{border-bottom-color:var(--rouge)}
.modal.malerte>header h2{color:var(--down)}
.modal.malerte>footer .ok.danger{background:var(--rouge);border-color:#B81C1B}
.modal.malerte>footer .ok.danger:hover{background:#B81C1B}
.alerte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:22px 12px 12px}
.alerte .ic{font-size:42px;line-height:1;color:var(--rouge)}
.alerte p{font-size:14.5px;line-height:1.5;max-width:430px}
.alerte b{font-weight:700}
.mstep{padding:13px 0;border-bottom:1px solid var(--line)}
.mstep:last-child{border:none}
.mstep.off{opacity:.5}
.mhead{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.mhead .num{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--pine);color:#fff;
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center
}
.mstep.off .mhead .num{background:var(--line-strong)}
.mhead b{font-size:13.5px;font-weight:600}
.mhead span{font-size:12px;color:var(--muted);margin-left:7px}
.opts{display:flex;flex-direction:column;gap:3px;max-height:230px;overflow-y:auto}
.opt{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  padding:7px 11px;border-radius:var(--r);border:1px solid transparent;font-size:13.5px
}
.opt:hover{background:var(--surface-2);border-color:var(--line)}
.opt.on{background:var(--pine-soft);border-color:var(--pine-mid);font-weight:600;color:var(--pine)}
.opt .ol{flex:1;min-width:0}
.opt .oc{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.opt.on .oc{color:var(--pine-mid)}
/* ---------- état du cycle budgétaire ---------- */
.etat{
  padding:11px 15px;border-radius:var(--r);margin-bottom:18px;font-size:13.5px;
  border-left:5px solid;line-height:1.5;width:100%
}
.etat b{display:block;font-size:14px;margin-bottom:2px}
.etat.jaune{background:var(--up-bg);border-color:#D9A222;color:#6E4B00}
.etat.vert{background:var(--ok-bg);border-color:var(--vert);color:var(--vert-fonce)}
.etat.gris{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink-2)}
.etat.gris button{margin-left:14px;vertical-align:1px}
.etat.archive{
  background:var(--down-bg);border-color:var(--rouge);border-left-width:7px;
  color:var(--down);font-size:15px;line-height:1.45;padding:15px 19px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap
}
.etat.archive b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}
.etat.archive .ic{font-size:26px;line-height:1}
.etat.archive>div{flex:1;min-width:260px}
.etat.archive>button{
  margin-left:auto;white-space:nowrap;background:var(--rouge);border-color:#B81C1B;
  color:#fff;font-size:13.5px;padding:9px 16px
}
.etat.archive>button:hover{background:#B81C1B}

.pilote{
  background:var(--surface);border:1px solid var(--line-strong);border-top:4px solid var(--vert);
  border-radius:var(--r);padding:14px 16px;margin-bottom:20px
}
.pilote.fige{border-top-color:var(--vert-fonce);background:var(--pine-soft)}
.pilote .ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pilote .ph b{font-size:14.5px}
.pilote .sm{font-size:12.5px;color:var(--muted);margin-left:10px}
.pilote .pa{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tag{
  display:inline-block;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-right:10px;border:1px solid
}
.tag.jaune{background:var(--up-bg);color:#7A5300;border-color:#DFBE6C}
.tag.vert{background:var(--vert);color:#fff;border-color:var(--vert-fonce)}
.mini.primaire{background:var(--vert);border-color:var(--vert-fonce);color:#fff}
.mini.primaire:hover{background:var(--vert-fonce)}
.poles{display:flex;gap:6px;flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--line)}
.pole-lock{
  display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  border:1.5px solid var(--line-strong);font-size:12.5px;font-weight:500;background:var(--surface)
}
.pole-lock:hover{border-color:var(--vert)}
.pole-lock.on{background:var(--vert-fonce);border-color:var(--vert-nuit);color:#fff;font-weight:600}
.pole-lock .ic{font-size:11px}

.inactif{
  font-size:10.5px;color:#7A5300;background:var(--up-bg);border:1px solid #DFBE6C;
  padding:1px 7px;border-radius:99px;margin-right:8px;font-weight:600;flex:0 0 auto
}
.mmontant{display:flex;gap:9px;align-items:center;padding:4px 0}
.mmontant input{border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 10px;font-size:13.5px}
.mmontant .lib{flex:1}
.mmontant .num{width:130px;text-align:right}
.mmontant input:focus{border-color:var(--vert)}
.grid.ro{border:none}
.grid.ro th{background:var(--ink-2)}
.attente{font-size:12.5px;color:var(--muted);padding:5px 11px;font-style:italic}

.addform{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:8px;
  padding:12px 14px;background:var(--pine-soft);border:1px solid var(--pine-mid);border-radius:var(--r)
}
.addform .acts{display:flex;gap:7px}
.addform .mini{background:var(--surface);padding:6px 11px}
.empty{
  text-align:center;padding:44px 20px;color:var(--muted);font-size:13.5px;
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r)
}
.note{font-size:12.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:9px 16px;border-radius:var(--r);
  font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.22);z-index:50
}
/* adaptation aux écrans étroits */
@media (max-width:1100px){
  .page,.top{padding-left:20px;padding-right:20px}
  .kpi b{font-size:19px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
}
@media (max-width:820px){
  .top{gap:12px}
  .top .field{flex:1;min-width:132px}
  .top select{width:100%}
  .synth td,.grid td{padding:6px 9px;font-size:13px}
  .sgrid2,.sgrid{grid-template-columns:1fr}
  .wrap.scroll{-webkit-overflow-scrolling:touch}
  .caf{flex-direction:column}
  .caf .wrap{min-width:0 !important;width:100%}
  .tafnb{width:100%}
  .recap{padding:13px 14px}
  .recap h3{margin:-13px -14px 11px;padding:8px 14px}
}
@media (max-width:820px){
  .side{width:64px;flex:0 0 64px}
  .brand span,.side h4,.side .foot,.nav button span.t{display:none}
  .nav button{text-align:center;padding:10px 0}
  .page,.top{padding-left:16px;padding-right:16px}
}