/* Pilotage budgétaire : feuille de style.
   Les couleurs de marque viennent de l'espace (Réglages, Apparence) et se posent par script sur
   :root ; les valeurs ci-dessous servent tant qu'aucune apparence n'est réglée.
   Une seule règle de couleur à retenir : le jaune ne sert qu'au temps de l'année (le soleil sur
   l'horizon du bandeau, le repère des jauges). Le bleu porte la marque et la navigation ; le rouge
   et l'ambre, les anomalies. */

@font-face { font-family:"Plex"; src:url("/budget/plex-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/budget/plex-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/budget/plex-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/budget/plex-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --marque:#1F4E8C; --marque-fonce:#163A69; --marque-pale:#E8EFF8; --soleil:#F2C300; --soleil-fonce:#B89400;
  --encre:#17212E; --ardoise:#5A6676; --brume:#8A94A3; --trait:#DCE3EB; --trait-fort:#C3CDD9;
  --fond:#F2F5F9; --surface:#FFFFFF; --survol:#F6F9FC;
  --rouge:#B42318; --rouge-pale:#FDECEA; --ambre:#9A5800; --ambre-pale:#FFF3DF; --ardoise-pale:#EDF1F6; --vert:#2E7D4F; --vert-pale:#E8F4EC;
  --rayon:6px; --largeur:1280px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--encre);
       background:var(--fond); font-size:14.5px; line-height:1.5; font-feature-settings:"tnum" 1; }
[hidden] { display:none !important; }
a { color:var(--marque); text-underline-offset:2px; }
a:hover { color:var(--marque-fonce); }
button, input, select, textarea { font:inherit; color:inherit; }
::selection { background:var(--marque-pale); }

/* ── Bandeau : marque de l'espace, horizon de l'année, onglets ── */
.bandeau { background:var(--surface); border-bottom:1px solid var(--trait); }
.bandeau-haut { display:flex; align-items:center; gap:18px; max-width:var(--largeur); margin:0 auto; padding:14px 24px 6px; }
.marque { display:flex; align-items:center; gap:18px; min-width:0; flex:1; }
.marque img { height:62px; width:auto; display:block; }
.marque img[hidden] + .titres { border-left:0; padding-left:0; }
.titres { border-left:1px solid var(--trait); padding-left:18px; min-width:0; }
.titres h1 { margin:0; font-size:20px; line-height:1.2; font-weight:600; color:var(--marque-fonce); letter-spacing:-.005em; }
.titres p { margin:2px 0 0; font-size:13px; color:var(--ardoise); }
.qui { font-size:13px; color:var(--ardoise); display:flex; gap:10px; align-items:center; white-space:nowrap; }
.qui .role { color:var(--brume); }

/* L'horizon : la part de l'exercice écoulée à la date de situation. Le soleil s'y pose. */
.horizon { max-width:var(--largeur); margin:0 auto; padding:10px 24px 0; }
.horizon .piste { position:relative; height:16px; }
.horizon .piste::before { content:""; position:absolute; left:0; right:0; top:7px; height:2px; background:var(--trait); border-radius:1px; }
.horizon .fait { position:absolute; left:0; top:7px; height:2px; width:var(--x, 0%); background:var(--marque); border-radius:1px; }
.horizon .astre { position:absolute; top:1px; left:var(--x, 0%); width:14px; height:14px; margin-left:-7px; border-radius:50%;
                  background:var(--soleil); box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--soleil-fonce); }
.horizon .mois { display:grid; grid-template-columns:repeat(12, 1fr); font-size:11px; color:var(--brume); margin-top:1px; }
.horizon .mois span { border-left:1px solid var(--trait); padding-left:4px; line-height:1.3; }
.horizon .legende-temps { font-size:12.5px; color:var(--ardoise); margin:4px 0 0; min-height:19px; }
.horizon .legende-temps b { color:var(--encre); font-weight:600; }

.onglets { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 2px; max-width:var(--largeur); margin:6px auto 0; padding:0 16px; }
.onglets button { background:none; border:0; border-bottom:3px solid transparent; padding:10px 10px 9px; cursor:pointer; color:var(--ardoise);
                  font-weight:500; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.onglets button:hover { color:var(--marque-fonce); border-bottom-color:var(--trait-fort); }
.onglets button[aria-selected="true"] { color:var(--marque-fonce); font-weight:600; border-bottom-color:var(--marque); }
.onglets .separe { margin-left:auto; }
.onglets .compte { font-size:11.5px; font-weight:600; line-height:1; padding:3px 6px; border-radius:9px; background:var(--rouge-pale); color:var(--rouge); }
.onglets .compte.calme { background:var(--ardoise-pale); color:var(--ardoise); }

/* ── Filtres ── */
.filtres { background:var(--surface); border-bottom:1px solid var(--trait); position:sticky; top:0; z-index:5; }
.filtres > div { max-width:var(--largeur); margin:0 auto; padding:8px 24px 10px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:flex-end; }
.filtres label { display:flex; flex-direction:column; font-size:12px; color:var(--ardoise); gap:3px; }
.filtres select { min-width:150px; }
.filtres #f-exercice { min-width:96px; }
.filtres .note { margin-left:auto; align-self:center; }
select, input[type=text], input[type=email], input[type=number], input[type=date], textarea {
  border:1px solid var(--trait-fort); border-radius:var(--rayon); padding:6px 9px; background:var(--surface); min-height:34px; }
select:hover, input:hover, textarea:hover { border-color:var(--brume); }
textarea { width:100%; min-height:90px; }
input[type=color] { width:52px; height:34px; padding:2px; border:1px solid var(--trait-fort); border-radius:var(--rayon); background:var(--surface); }

/* ── Contenu ── */
main { max-width:var(--largeur); margin:0 auto; padding:26px 24px 56px; }
h2 { color:var(--marque-fonce); font-size:22px; line-height:1.25; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }
h3 { color:var(--encre); font-size:16px; font-weight:600; margin:30px 0 10px; }
.sous { color:var(--ardoise); font-size:13.5px; margin:0 0 18px; max-width:78ch; }
.note { color:var(--ardoise); font-size:12.5px; }
p.note { max-width:90ch; }
.message { margin:0 0 16px; padding:10px 14px; border-left:3px solid var(--marque); background:var(--surface); font-size:14px; }
.message.erreur { border-left-color:var(--rouge); color:var(--rouge); background:var(--rouge-pale); }
.vide { border:1px dashed var(--trait-fort); border-radius:var(--rayon); padding:18px 20px; margin:8px 0 16px; background:var(--surface); color:var(--ardoise); }

/* ── Tableaux ── */
table { border-collapse:collapse; width:100%; background:var(--surface); font-variant-numeric:tabular-nums; }
th, td { padding:8px 10px; border-bottom:1px solid var(--trait); text-align:left; vertical-align:top; }
th { font-size:12px; color:var(--ardoise); font-weight:500; background:var(--surface); border-bottom:1px solid var(--trait-fort); vertical-align:bottom; }
tbody tr:hover td { background:var(--survol); }
td.n, th.n { text-align:right; white-space:nowrap; }
tr.total td:first-child { white-space:nowrap; }
tr.total td { font-weight:600; color:var(--marque-fonce); border-top:2px solid var(--marque); background:var(--surface); }
tbody tr.total:hover td { background:var(--surface); }
tr.sous-total td { font-weight:600; }
td.libelle { max-width:380px; }
.defile { overflow-x:auto; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); }
.defile > table { border:0; }
.defile > table tbody tr:last-child td { border-bottom:0; }
table.pluri, table.anomalies { font-size:13px; }
table.pluri th, table.pluri td { padding:7px 8px; }
table.pluri td.code, table.pluri td.dir { white-space:nowrap; }
table.pluri td.libelle { min-width:180px; max-width:260px; }
table.anomalies td.code, table.anomalies td.dir, table.anomalies .fam { white-space:nowrap; }
table.anomalies td.code .note { white-space:normal; max-width:220px; }
table.anomalies td b { font-weight:600; }

/* Taux et jauges : le trait bleu est la consommation, le repère jaune la part de l'année écoulée. */
.taux { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.jauge { position:relative; width:72px; height:6px; background:var(--ardoise-pale); border-radius:3px; flex:none; }
.jauge i { position:absolute; left:0; top:0; bottom:0; background:var(--marque); border-radius:3px; }
.jauge b { position:absolute; top:-3px; bottom:-3px; width:3px; margin-left:-1px; background:var(--soleil); border-radius:2px; box-shadow:0 0 0 1px var(--soleil-fonce); }
.faible { color:var(--rouge); }

/* Étiquettes de source et de fonds : discrètes, en minuscules. */
.etiquette { display:inline-block; font-size:11px; line-height:1.5; padding:0 7px; border:1px solid var(--trait-fort); border-radius:10px; color:var(--ardoise);
             margin-left:4px; white-space:nowrap; font-weight:400; vertical-align:1px; }
.etiquette.cpn { border-color:#A9C0DE; color:var(--marque-fonce); background:var(--marque-pale); }
.etiquette.alerte { border-color:#E8B66B; color:var(--ambre); background:var(--ambre-pale); }

/* ── Chiffres clés : un montant, sa jauge, sa base ── */
.chiffres { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; background:var(--surface); border:1px solid var(--trait);
            border-radius:var(--rayon); margin:0 0 22px; }
.chiffres > div { padding:16px 20px 15px; border-right:1px solid var(--trait); min-width:0; }
.chiffres > div:last-child { border-right:0; }
.chiffres .lib { font-size:12.5px; color:var(--ardoise); }
.chiffres .val { font-size:28px; line-height:1.15; color:var(--encre); font-weight:600; letter-spacing:-.015em; margin:4px 0 8px; }
.chiffres .jauge { display:block; width:100%; height:8px; border-radius:4px; margin:0 0 8px; }
.chiffres .jauge i { border-radius:4px; }
.chiffres > div.choisi { box-shadow:inset 0 -3px 0 var(--marque); }
.chiffres button.tuile { all:unset; display:block; cursor:pointer; }
.chiffres button.tuile:focus-visible { outline:3px solid var(--marque-pale); outline-offset:4px; }

.alertes { list-style:none; padding:0; margin:0 0 16px; }
.alertes li { padding:8px 12px; border-left:3px solid #E8B66B; background:var(--ambre-pale); margin-bottom:6px; font-size:13.5px; border-radius:0 var(--rayon) var(--rayon) 0; }
.alertes li.info { border-left-color:#A9C0DE; background:var(--marque-pale); }

.deux { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.trois { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width:900px) { .deux, .trois { grid-template-columns:1fr; } }

/* ── Boutons ── */
button.b, label.b { display:inline-flex; align-items:center; gap:6px; background:var(--marque); color:#fff; border:1px solid var(--marque); border-radius:var(--rayon);
                    padding:8px 15px; cursor:pointer; font-size:14px; font-weight:600; min-height:36px; }
button.b:hover, label.b:hover { background:var(--marque-fonce); border-color:var(--marque-fonce); }
button.b.clair, label.b.clair { background:var(--surface); color:var(--marque-fonce); border-color:var(--trait-fort); }
button.b.clair:hover, label.b.clair:hover { border-color:var(--marque); }
button.b:disabled { opacity:.45; cursor:not-allowed; }
button.lien { background:none; border:1px solid transparent; color:var(--marque); cursor:pointer; padding:3px 7px; border-radius:5px; font-size:13px; }
button.lien:hover { border-color:var(--trait-fort); background:var(--surface); }
button.lien.danger { color:var(--rouge); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--marque) 35%, transparent); outline-offset:1px; }
.barre { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 12px; }
.barre label { font-size:13px; color:var(--ardoise); display:inline-flex; align-items:center; gap:6px; }
.barre .pousse { margin-left:auto; }

/* ── Niveaux et gravités : une pastille de texte, jamais un cadre ── */
.grav, .niv { display:inline-block; font-size:11.5px; font-weight:600; line-height:1.6; padding:0 8px; border-radius:10px; white-space:nowrap; }
.grav::first-letter { text-transform:uppercase; }
.grav.forte, .niv.ecart { color:var(--rouge); background:var(--rouge-pale); }
.grav.moyenne, .niv.alerte { color:var(--ambre); background:var(--ambre-pale); }
.grav.faible, .niv.info { color:var(--ardoise); background:var(--ardoise-pale); }
.niv.ok { color:var(--vert); background:var(--vert-pale); }
b.niv { padding:0 8px; }
td .fam { margin-top:3px; }

/* ── Dépôt de fichiers ── */
.depot { border:2px dashed var(--trait-fort); border-radius:var(--rayon); background:var(--surface); padding:28px; text-align:center; color:var(--ardoise); margin:0 0 16px; }
.depot.survol { border-color:var(--marque); background:var(--marque-pale); }
.depot input { display:none; }

/* ── Graphique ── */
.graphe { background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon); padding:12px; }
.graphe svg { width:100%; height:auto; display:block; }
.graphe text { font-size:11px; fill:#6B7686; font-family:inherit; }
.legende { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ardoise); margin:6px 0 0; }
.legende span::before { content:""; display:inline-block; width:14px; height:3px; margin-right:6px; vertical-align:middle; background:currentColor; }

.reglages { max-width:980px; }
.reglages label { display:block; font-size:13.5px; margin:6px 0 10px; }
.reglages label input[type=text], .reglages label textarea { display:block; width:100%; margin-top:4px; }
.reglages td input { width:100%; }
.apparence { display:grid; grid-template-columns:minmax(220px, 300px) 1fr; gap:18px 26px; align-items:start; }
.apparence .apercu-logo { border:1px dashed var(--trait-fort); border-radius:var(--rayon); background:var(--surface); min-height:96px; display:flex; align-items:center; justify-content:center; padding:12px; }
.apparence .apercu-logo img { max-height:72px; max-width:100%; }
.couleurs { display:flex; gap:22px; flex-wrap:wrap; }
.couleurs label { display:flex; align-items:center; gap:10px; margin:0; }
@media (max-width:760px) { .apparence { grid-template-columns:1fr; } }

/* ── Saisie ── */
table.saisie td { padding:4px 6px; }
table.saisie input, table.saisie select { width:100%; min-height:30px; padding:4px 6px; }
table.saisie input.montant { text-align:right; }
table.saisie select[data-c="type"] { min-width:8.5em; }
table.saisie select[data-c="section"], table.saisie select[data-c="direction"] { min-width:6.5em; }
table.saisie select[data-c="fonds"] { min-width:5em; }

/* ── Connexion ── */
.centre { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:18px; }
.carte { background:var(--surface); border:1px solid var(--trait); border-radius:10px; padding:30px 34px 26px; width:100%; max-width:440px; }
.carte .logo-client { height:64px; width:auto; display:block; margin:0 0 14px; }
.carte h1 { color:var(--marque-fonce); font-size:21px; font-weight:600; margin:0; line-height:1.25; }
.carte .sous-titre { color:var(--ardoise); font-size:13.5px; margin:3px 0 16px; }
.carte label { display:block; font-size:13px; color:var(--ardoise); margin:14px 0 4px; }
.carte input[type=email] { width:100%; }
.carte button.b { margin-top:14px; width:100%; justify-content:center; }
.cases-code { display:flex; gap:8px; }
.cases-code input { width:46px; height:52px; text-align:center; font-size:22px; border:1px solid var(--trait-fort); border-radius:var(--rayon); }
.cases-code.refus input { border-color:var(--rouge); }

/* ── Pied de page : qui a fait l'outil, en retrait ── */
.pied { max-width:var(--largeur); margin:0 auto; padding:0 24px 28px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--brume); }
.pied img { height:16px; width:auto; opacity:.75; }
.centre .pied { padding:0; }

/* ── Flash imprimable ── */
.flash { background:var(--surface); padding:28px 32px; border:1px solid var(--trait); border-radius:var(--rayon); }
.flash .entete-flash { display:flex; align-items:center; gap:18px; margin:0 0 6px; }
.flash .entete-flash img { height:46px; width:auto; }
.flash h2 { font-size:21px; margin:0; }
.flash table { font-size:13px; margin-bottom:6px; }
.flash .obs { font-size:13px; margin:4px 0 10px; white-space:pre-wrap; }

/* ── Contrôles de cohérence ── */
.controles { list-style:none; padding:0; margin:0 0 12px; background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon); }
.controles li { padding:9px 14px; border-bottom:1px solid var(--trait); font-size:13.5px; display:flex; gap:14px; }
.controles li:last-child { border-bottom:0; }
.controles li .niv { flex:0 0 auto; align-self:flex-start; min-width:58px; text-align:center; }
.resume-controles { margin:0 0 12px; font-size:14px; line-height:1.9; }
.resume-controles button.lien { padding:1px 3px; }
.resume-controles button.lien:last-child { margin-left:10px; }
.chiffres .jauge.reste i { background:var(--brume); }
.resume-controles button { margin-left:4px; }
details.ok-replies > summary { cursor:pointer; color:var(--ardoise); font-size:13px; margin:4px 0 8px; }
.correspondance { background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon); padding:14px 16px; margin:10px 0 16px; }
.correspondance table td { padding:4px 8px; }
.correspondance select { min-width:16em; }
.decale { margin-left:14px; }

@media (max-width:760px) {
  .bandeau-haut { flex-wrap:wrap; padding:12px 16px 4px; }
  .marque img { height:44px; }
  .marque { gap:12px; }
  .titres { padding-left:12px; }
  .titres h1 { font-size:18px; }
  .qui { white-space:normal; flex-wrap:wrap; gap:4px 10px; }
  .filtres > div { display:grid; grid-template-columns:1fr 1fr; }
  .filtres select { min-width:0; width:100%; }
  .horizon, .filtres > div, main, .pied { padding-left:16px; padding-right:16px; }
  .horizon .mois span:nth-child(even) { color:transparent; }
  .onglets { padding:0 8px; overflow-x:auto; flex-wrap:nowrap; }
  .onglets .separe { margin-left:0; }
  .filtres { position:static; }
}
@media (prefers-reduced-motion:no-preference) {
  .horizon .fait, .horizon .astre { transition:left .5s ease, width .5s ease; }
}
@media print {
  @page { size:A4 landscape; margin:12mm; }
  body { background:#fff; font-size:12px; }
  .bandeau, .filtres, .barre, .non-imprime, .pied { display:none !important; }
  main { padding:0; max-width:none; }
  .flash { border:0; padding:0; }
  .defile { border:0; }
  h3 { break-after:avoid; }
  table { break-inside:avoid; }
  tbody tr:hover td { background:none; }
}
#a-lien { flex:1 1 32rem; min-width:16rem; font-size:13px; }