/* =========================================================================
   Pilotage budgetaire APREMIS - feuille autonome
   =========================================================================
   La charte visuelle reste celle du parc (Info H'Emploi / renov) : polices et
   palette sont reprises a l identique ci-dessous. Ce qui n est PAS repris,
   c est la mise en page du site vitrine -- barre basse fixe sur mobile,
   cartes, badges, timeline, modales -- qui ne correspond pas a un outil de
   gestion et qu il fallait defaire regle par regle.

   Une seule feuille, un seul systeme de composants :
     .carte  .t  .puce  .btn  .grille  .kpi  .msg  form.f
   Polices auto-hebergees : aucun appel a un service tiers (contrainte RGPD).
   ========================================================================= */

@font-face{font-family:'Fraunces';src:url('/static/fonts/fraunces-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

@font-face{font-family:'Karla';src:url('/static/fonts/karla-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

@font-face{font-family:'Jost';src:url('/static/fonts/jost-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* --- Palette Info H'Emploi --- */
  --nuit:#101B4F; --nuit-clair:#1D2A63; --nuit-voile:rgba(16,27,79,.08);
  --terracotta:#C96E56; --terracotta-fonce:#A8543D; --terracotta-voile:#F6E7E1;
  --sauge:#A7B89A; --sauge-fonce:#6F8265;
  --eau:#C8E3DD; --eau-clair:#E7F3F0; --teal:#12897B;
  --ivoire:#FAF7F2; --ivoire-fonce:#F2ECE2; --blanc:#fff;
  --anthracite:#3D4348; --gris:#6E6A64; --bord:#E7DFD3;
  /* Variantes assombries reservees au TEXTE (contraste RGAA 4.5:1).
     Les aplats de la charte restent inchanges. */
  --teal-tx:#0E6F63; --sauge-tx:#556849; --terracotta-tx:#984734;

  /* --- Correspondance avec les roles de l'application ---
     --p pilote la structure (en-tete, navigation, elements actifs).
     Elle est surchargee au chargement par le reglage "couleur principale". */
  --p:var(--nuit); --p-d:#0A123A; --p-l:var(--eau-clair); --p-b:#070C28;
  --a:var(--terracotta-fonce); --a-l:var(--terracotta-voile);
  --bg:var(--ivoire); --card:var(--blanc);
  --tx:var(--anthracite); --tx2:var(--gris); --tx3:#726D66;
  --bd:var(--bord); --bd2:#D8CDBD;
  --ok:#2F7A55; --ok-l:#E3F0E7; --warn:var(--terracotta-fonce); --warn-l:var(--terracotta-voile);
  --err:#A32B23; --err-l:#F7E3E1; --info:var(--teal-tx); --info-l:var(--eau-clair);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --corps:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --logo:'Jost','Karla',sans-serif;

  --r:14px; --r-s:8px;
  --sh:0 1px 2px rgba(16,27,79,.04), 0 8px 24px -14px rgba(16,27,79,.16);
  --sh2:0 1px 2px rgba(16,27,79,.05), 0 12px 30px -12px rgba(16,27,79,.22);
  --sh-h:0 1px 2px rgba(16,27,79,.05), 0 10px 26px -12px rgba(16,27,79,.20);

  --t-xs:12.5px; --t-s:13.5px; --t-m:15px;
  --t-l:clamp(16.5px, 1.1vw + 13px, 19px);
  --t-xl:clamp(20px, 1.4vw + 16px, 25px);
  --t-2xl:clamp(24px, 2vw + 18px, 32px);

  --nav-h:58px; --header-h:56px;
}

/* ---------- Socle ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--corps);background:var(--bg);color:var(--tx);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}

a{color:var(--teal-tx);text-decoration:none}
a:hover{color:var(--terracotta-fonce);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}

h1,h2,h3{font-family:var(--display);color:var(--nuit);font-weight:600;line-height:1.18;
  letter-spacing:-.015em;margin:0 0 12px;
  font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 40}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-l)}
h3{font-size:var(--t-m);letter-spacing:-.01em}
p{margin:0 0 10px}
ul,ol{margin:0 0 10px;padding-left:22px}
li{margin-bottom:4px}
.hide{display:none!important}

/* Les chiffres d un outil de gestion doivent s aligner en colonne. */
table,.kpi .val,.etat-exercice .val{font-variant-numeric:tabular-nums lining-nums}

:focus-visible{outline:3px solid var(--terracotta-fonce);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Champs hors form.f : memes reperes visuels, sinon un ecran melange deux
   apparences de saisie. 16px sous 720px pour eviter le zoom automatique iOS. */
input,select,textarea{font-family:var(--corps);font-size:var(--t-m);color:var(--tx);
  background:#fff;border:1px solid var(--bd2);border-radius:var(--r-s);padding:9px 11px}
@media(max-width:719px){input,select,textarea{font-size:16px}}
textarea{min-height:96px;resize:vertical;line-height:1.6}
button{font-family:var(--corps)}

/* Le seul emprunt reel des gabarits a l ancienne feuille. */
.filtres label{margin-top:0}
.filtres{background:var(--card)}


.appbar{position:sticky;top:0;z-index:50;background:var(--p);color:#fff;
  display:flex;align-items:center;gap:16px;padding:10px 18px;box-shadow:var(--sh)}
.appbar .marque{font-family:var(--logo);font-weight:700;letter-spacing:.02em;font-size:16px}
.appbar .marque span{opacity:.72;font-weight:400}
.appbar nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.appbar nav a{color:#fff;opacity:.82;padding:7px 12px;border-radius:var(--r-s);
  font-size:var(--t-s);white-space:nowrap}
.appbar nav a:hover{opacity:1;background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.appbar nav a.on{opacity:1;background:rgba(255,255,255,.18);font-weight:700}
.appbar .moi{font-size:var(--t-xs);opacity:.8;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.25);line-height:1.35}

.bandeau-demo{background:var(--a);color:#fff;text-align:center;padding:6px;
  font-size:var(--t-xs);letter-spacing:.03em;font-weight:700}
.bandeau-env{background:var(--terracotta-voile);color:var(--terracotta-tx);
  text-align:center;padding:5px;font-size:var(--t-xs)}

.page{max-width:1280px;margin:0 auto;padding:22px 18px 64px}
.page>header{margin-bottom:18px}
.page>header .sur{font-size:var(--t-xs);color:var(--tx2);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:2px}

.grille{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.carte{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh)}
.carte h2{margin:0 0 10px}
.kpi .lib{font-size:var(--t-xs);color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.kpi .val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;
  font-weight:700;color:var(--p);line-height:1.2;margin-top:4px}
.kpi .sous{font-size:var(--t-xs);color:var(--tx2);margin-top:2px}

table.t{width:100%;border-collapse:collapse;font-size:var(--t-s)}
table.t th{text-align:left;font-weight:700;color:var(--tx2);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;
  border-bottom:2px solid var(--bd);background:var(--card)}
table.t td{padding:8px 10px;border-bottom:1px solid var(--bd)}
table.t tr:hover td{background:var(--p-l)}
table.t td.n{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.vide{color:var(--tx2);font-size:var(--t-s);padding:18px 0;text-align:center}

.puce{display:inline-block;padding:2px 9px;border-radius:999px;font-size:var(--t-xs);font-weight:700}
.puce.ok{background:var(--ok-l);color:var(--ok)}
.puce.warn{background:var(--warn-l);color:var(--warn)}
.puce.err{background:var(--err-l);color:var(--err)}
.puce.neutre{background:var(--p-l);color:var(--p)}
.puce.info{background:var(--info-l);color:var(--info)}

.btn{display:inline-block;border:1px solid var(--p);background:var(--p);color:#fff;
  padding:9px 16px;border-radius:var(--r-s);font-size:var(--t-s);font-weight:700;
  cursor:pointer;font-family:var(--corps)}
.btn:hover{background:var(--p-d);text-decoration:none;color:#fff}
.btn.sec{background:transparent;color:var(--p)}
.btn.sec:hover{background:var(--p-l);color:var(--p)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

form.f label{display:block;font-size:var(--t-xs);color:var(--tx2);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin:12px 0 4px}
form.f input,form.f select,form.f textarea{width:100%;padding:9px 11px;border:1px solid var(--bd2);
  border-radius:var(--r-s);font-family:var(--corps);font-size:var(--t-m);background:#fff;color:var(--tx)}
form.f input:focus,form.f select:focus{outline:2px solid var(--p);outline-offset:1px;border-color:var(--p)}

.msg{padding:10px 14px;border-radius:var(--r-s);font-size:var(--t-s);margin-bottom:14px}
.msg.err{background:var(--err-l);color:var(--err)}
.msg.ok{background:var(--ok-l);color:var(--ok)}
.msg.info{background:var(--info-l);color:var(--info)}

.connexion{max-width:400px;margin:9vh auto;padding:0 18px}
.connexion .carte{padding:26px 24px}
.connexion h1{text-align:center}
/* Logo APREMIS : dimensions donnees dans le HTML pour reserver la place et
   eviter que la carte ne saute au chargement de l image. */
.connexion .logo{display:block;margin:0 auto 16px;width:170px;height:auto}
.connexion .sous{text-align:center;color:var(--tx2);font-size:var(--t-s);margin-bottom:18px}
/* Voie de secours : repliee par defaut, elle ne doit pas se lire comme une
   alternative de meme rang que le compte APREMIS. */
.connexion details.secours{margin-top:18px;border-top:1px solid var(--bd);padding-top:14px}
.connexion details.secours summary{cursor:pointer;list-style:none;text-align:center;
  color:var(--tx2);font-size:var(--t-s);font-weight:600;padding:4px 0}
.connexion details.secours summary::-webkit-details-marker{display:none}
.connexion details.secours summary::after{content:" \25BE";font-size:var(--t-xs)}
.connexion details.secours[open] summary::after{content:" \25B4"}
.connexion details.secours summary:hover{color:var(--p)}
.connexion details.secours summary:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:var(--r-s)}
.connexion details.secours .f{margin-top:14px}

/* Sous 720px la barre passe sur deux lignes : le menu defile horizontalement,
   l identite de l utilisateur passe dessous. Pas de menu deroulant tant que le
   nombre d entrees reste faible. */
@media(max-width:719px){
  .appbar{flex-wrap:wrap;gap:8px;padding:9px 14px}
  .appbar nav.menu{margin-left:auto;order:2;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;max-width:100%}
  .appbar nav.menu::-webkit-scrollbar{display:none}
  .appbar .moi{order:3;width:100%;border-left:0;padding-left:0;padding-top:6px;
    border-top:1px solid rgba(255,255,255,.2)}
  .appbar .moi br{display:none}
  .page{padding:16px 14px 48px}
}

/* =========================================================================
   Saisie budgetaire
   Un chef de service saisit des centaines de lignes : la colonne de reference
   doit se lire sans effort, la ligne touchee doit se voir, et l ecran doit
   rester utilisable au doigt. Sous 720px le tableau devient une liste de
   cartes -- un tableau de sept colonnes qui defile lateralement n est pas
   saisissable sur telephone.
   ========================================================================= */

.filtre-ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}

.bandeau-total{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  background:var(--p-l);border:1px solid var(--bd);border-radius:var(--r-s);
  padding:9px 14px;margin-bottom:12px;font-size:var(--t-s)}
.bandeau-total .lib{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx2);font-weight:700}
.bandeau-total strong{font-variant-numeric:tabular-nums;font-weight:700;color:var(--p)}

/* Colonne de reference : presente mais en retrait, elle sert a juger le
   montant qu on saisit a cote, pas a etre lue pour elle-meme. */
table.saisie td.ref{color:var(--tx2);white-space:nowrap}
table.saisie td.ref .pct{display:block;font-size:var(--t-xs);font-weight:700}
table.saisie td.ref .pct.haut{color:var(--warn)}
table.saisie td.ref .pct.bas{color:var(--info)}

table.saisie tr.neuve td{background:var(--p-l)}
table.saisie tr.modifiee td{background:var(--warn-l);
  box-shadow:inset 3px 0 0 var(--warn)}
table.saisie tr.modifiee:hover td{background:var(--warn-l)}

table.saisie input,table.saisie select{padding:6px 8px;font-size:var(--t-s);
  border:1px solid var(--bd2);border-radius:var(--r-s);width:100%;
  font-family:var(--corps);background:#fff;color:var(--tx)}
table.saisie input.montant{text-align:right;font-variant-numeric:tabular-nums;
  min-width:104px;font-weight:600}
table.saisie input:focus,table.saisie select:focus{outline:2px solid var(--p);
  outline-offset:1px;border-color:var(--p)}
.retirer{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0}
.retirer input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--warn)}
.txt-mob{display:none}

.barre-saisie{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;
  position:sticky;bottom:0;background:var(--card);padding:12px 0 4px;
  border-top:1px solid var(--bd);z-index:10}
.etat-saisie{font-size:var(--t-xs);font-weight:700;color:var(--warn);
  background:var(--warn-l);border-radius:999px;padding:4px 11px}

@media(max-width:719px){
  .filtre-ligne>div{flex:1 1 100%}
  .bandeau-total{flex-direction:column;gap:4px}

  /* Une ligne = une carte. Les intitules de colonne reviennent devant chaque
     valeur par data-lib, ce qui evite un second gabarit a maintenir. */
  table.saisie thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.saisie,table.saisie tbody,table.saisie tr,table.saisie td{display:block;width:100%}
  table.saisie tr{border:1px solid var(--bd);border-radius:var(--r-s);
    margin-bottom:10px;padding:4px 2px;background:var(--card)}
  table.saisie tr.modifiee{border-color:var(--warn);box-shadow:none}
  table.saisie tr.modifiee td{box-shadow:none;background:transparent}
  table.saisie tr.modifiee{background:var(--warn-l)}
  table.saisie tr.neuve td{background:transparent}
  table.saisie tr.neuve{background:var(--p-l)}
  table.saisie td{border-bottom:0;padding:5px 10px;
    display:flex;gap:10px;align-items:center;justify-content:space-between}
  table.saisie td:empty{display:none}
  table.saisie td[data-lib]:before{content:attr(data-lib);flex:0 0 auto;
    font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;
    color:var(--tx2);font-weight:700}
  table.saisie td[data-lib="Compte"]{display:block;font-size:var(--t-m);
    padding-top:9px;border-bottom:1px solid var(--bd);padding-bottom:8px}
  table.saisie td[data-lib="Compte"]:before{display:block;margin-bottom:2px}
  table.saisie td input,table.saisie td select{max-width:60%}
  table.saisie td[data-lib="Compte"] input{max-width:100%}
  table.saisie td.n{text-align:right}
  table.saisie td.ref .pct{display:inline;margin-left:8px}
  table.saisie tr:hover td{background:transparent}
  .txt-mob{display:inline;font-size:var(--t-s);color:var(--tx2)}
  .retirer{flex-direction:row-reverse}
  .barre-saisie{position:sticky;bottom:0;padding-bottom:10px;box-shadow:0 -6px 14px rgba(16,27,79,.08)}
  .barre-saisie .btn{flex:1 1 auto}
}

/* =========================================================================
   Suivi budgetaire
   Huit colonnes de montants ne se comparent pas de tete : une jauge par ligne
   situe le realise par rapport au budget, sur une echelle commune a tout le
   tableau. Le sens de l ecart n est jamais porte par la seule couleur : le
   signe est toujours affiche (filtres ecart / ecart0).
   ========================================================================= */

/* Onglets d un ecran : « Preparer le budget » porte les versions et les
   indicateurs. Deux entrees de menu pour un meme travail auraient allonge une
   barre deja pleine. */
/* Onglets d une famille d ecrans, dessines comme des onglets de navigateur.
   Le simple soulignement se lisait comme une suite de titres et se ratait :
   la forme d onglet dit qu il y a d autres ecrans a cote, et lequel est ouvert.
   L onglet actif est blanc, borde de la couleur principale et ouvert sur le
   bas : il mange la ligne de la barre, comme une chemise ouverte. */
.onglets{display:flex;gap:3px;margin:0 0 18px;flex-wrap:wrap;align-items:flex-end;
  border-bottom:2px solid var(--p)}
.onglets a{padding:9px 16px;font-size:var(--t-s);font-weight:700;color:var(--tx2);
  text-decoration:none;background:var(--ivoire-fonce);
  border:1px solid var(--bd);border-bottom:2px solid var(--p);
  border-radius:var(--r-s) var(--r-s) 0 0;margin-bottom:-2px}
.onglets a:hover{background:var(--blanc);color:var(--p);border-color:var(--bd2);
  border-bottom-color:var(--p)}
.onglets a.on{background:var(--card);color:var(--p);border-color:var(--p);
  border-bottom-color:var(--card);box-shadow:inset 0 3px 0 var(--p)}
.onglets a:focus-visible{outline:2px solid var(--p);outline-offset:2px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* Sommaire d une page longue : une pastille par domaine, et un retour en tete
   sur chaque bloc. `scroll-margin-top` tient compte de la barre haute collante,
   sinon l ancre atterrit dessous et on croit que le lien n a rien fait. */
.sommaire{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px}
.sommaire-lib{font-size:var(--t-xs);color:var(--tx2);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;margin-right:2px}
.sommaire a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid var(--bd);border-radius:999px;background:var(--bg);
  font-size:var(--t-s);font-weight:700;color:var(--p);text-decoration:none}
.sommaire a:hover{background:var(--p-l);border-color:var(--p)}
.sommaire-n{font-size:var(--t-xs);font-weight:700;color:var(--tx2)}
.sommaire a:hover .sommaire-n{color:var(--p)}
#sommaire{scroll-margin-top:84px}
/* Aide (lot 53) : ancres sous la barre collante, sommaire, details replies. */
h2.ancre{scroll-margin-top:84px}
.aide-sommaire{line-height:1.9;font-size:var(--t-s)}
details.aide-detail{margin-top:6px;font-size:var(--t-s);color:var(--tx2)}
details.aide-detail summary{cursor:pointer;color:var(--tx);text-decoration:underline;
  text-underline-offset:2px}
.dom-bloc{scroll-margin-top:84px}
.dom-bloc h2{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.haut{font-family:var(--corps);font-size:var(--t-xs);font-weight:700;color:var(--tx2);
  text-decoration:none;white-space:nowrap}
.haut:hover{color:var(--p)}

.actions-filtres{display:flex;gap:8px;align-items:flex-end}
.actions-filtres .btn{flex:1 1 auto;text-align:center}

.col-jauge{width:140px;min-width:120px}
.jauge{position:relative;display:block;height:9px;border-radius:999px;
  background:var(--p-l);overflow:visible}
.jauge .re{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:var(--ok);max-width:100%}
.jauge .re.warn{background:var(--warn)}
.jauge .re.err{background:var(--err)}
.jauge .re.neutre{background:var(--tx3)}
/* Trait du budget : la reference que la barre doit ou ne doit pas depasser. */
.jauge .bu{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--p);
  border-radius:2px}

table.tab-suivi td.sourdine{color:var(--tx2)}
table.tab-suivi td.fort{font-weight:700}
table.tab-suivi td.defavorable{color:var(--err)}
table.tab-suivi td.favorable{color:var(--ok)}
table.tab-suivi tr.totaux td{font-weight:700;background:var(--p-l);
  border-top:2px solid var(--bd);border-bottom:0}

@media(max-width:719px){
  .actions-filtres{flex-direction:column;align-items:stretch}
  table.tab-suivi thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.tab-suivi,table.tab-suivi tbody,table.tab-suivi tfoot,
  table.tab-suivi tr,table.tab-suivi td{display:block;width:100%}
  table.tab-suivi tr{border:1px solid var(--bd);border-radius:var(--r-s);
    margin-bottom:10px;padding:6px 2px}
  table.tab-suivi td{border-bottom:0;padding:4px 10px;
    display:flex;gap:12px;align-items:center;justify-content:space-between}
  table.tab-suivi td[data-lib]:before{content:attr(data-lib);flex:0 0 auto;
    font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;
    color:var(--tx2);font-weight:700}
  table.tab-suivi td.col-jauge{display:block;padding:8px 10px 10px}
  table.tab-suivi td.col-jauge:before{display:block;margin-bottom:6px}
  table.tab-suivi td.col-jauge:empty{display:none}
  table.tab-suivi tr:hover td{background:transparent}
  table.tab-suivi tr.totaux td{background:transparent}
  table.tab-suivi tr.totaux{background:var(--p-l)}
  .col-jauge{width:auto}
}

/* =========================================================================
   Navigation groupee et etat de l exercice
   ========================================================================= */

/* Lien d evitement : invisible tant qu il n a pas le focus. */
.evitement{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);
  color:var(--p);padding:10px 16px;border-radius:0 0 var(--r-s) 0;font-weight:700;
  box-shadow:var(--sh)}
.evitement:focus{left:0}

.appbar nav.menu details.groupe{position:relative;flex:0 0 auto}
.appbar nav.menu summary{list-style:none;cursor:pointer;color:#fff;opacity:.82;
  padding:7px 12px;border-radius:var(--r-s);font-size:var(--t-s);white-space:nowrap;
  font-weight:600;display:inline-flex;align-items:center;gap:6px}
.appbar nav.menu summary::-webkit-details-marker{display:none}
.appbar nav.menu summary:after{content:"";width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7}
.appbar nav.menu summary:hover{opacity:1;background:rgba(255,255,255,.12)}
.appbar nav.menu summary.on{opacity:1;background:rgba(255,255,255,.18);font-weight:700}
.appbar nav.menu details[open] summary{opacity:1;background:rgba(255,255,255,.18)}
.appbar nav.menu .tiroir{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-s);
  box-shadow:var(--sh2);padding:6px;min-width:190px;display:flex;flex-direction:column}
.appbar nav.menu .tiroir a{color:var(--tx);opacity:1;padding:9px 12px;font-weight:600}
.appbar nav.menu .tiroir a:hover{background:var(--p-l);color:var(--p)}
.appbar nav.menu .tiroir a.on{background:var(--p);color:#fff}

.etat-exercice{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.etat-exercice .bloc{background:var(--p-l);border-radius:var(--r-s);padding:12px 14px}
.etat-exercice .lib{font-size:var(--t-xs);color:var(--tx2);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.etat-exercice .val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:23px;font-weight:700;color:var(--p);line-height:1.2;margin-top:4px}
.etat-exercice .val.alerte{color:var(--err)}
.etat-exercice .sous{font-size:var(--t-xs);color:var(--tx2);margin-top:3px;line-height:1.4}

@media(max-width:719px){
  /* Le tiroir occupe toute la largeur sous la barre : viser un menu de 190 px
     colle au bord droit d un telephone n est pas tenable au pouce. */
  .appbar nav.menu details.groupe{position:static}
  .appbar nav.menu .tiroir{left:8px;right:8px;min-width:0}
  .appbar nav.menu .tiroir a{padding:12px}
}

/* =========================================================================
   Impression
   Un budget et un tableau de suivi se presentent sur papier en reunion de
   direction. La barre, les tiroirs, les filtres et les boutons n ont plus de
   sens une fois imprimes ; le contexte, lui, disparait -- on rappelle donc en
   tete de page ce que le lecteur a sous les yeux.
   ========================================================================= */
@media print{
  @page{margin:12mm}
  body{background:#fff;color:#000;font-size:10.5pt}
  .appbar,.evitement,.bandeau-env,.barre-saisie,.filtres,.filtre-ligne,
  form.f,.actions-filtres,.no-print{display:none!important}
  .bandeau-demo{border:2px solid #000;color:#000;background:none;font-weight:700}
  .page{max-width:none;padding:0}
  .carte{box-shadow:none;border:1px solid #999;border-radius:0;padding:0 0 10px;
    margin-bottom:14px;break-inside:auto}
  h1{font-size:16pt}
  h2{font-size:12pt;margin-top:10px}
  a{color:#000;text-decoration:none}
  a[href]:after{content:''}

  /* Un tableau qui court sur deux pages doit reprendre ses en-tetes. */
  table.t{font-size:9pt}
  table.t thead{display:table-header-group}
  table.t tfoot{display:table-footer-group}
  table.t tr{break-inside:avoid}
  table.t th{background:none;border-bottom:1.5px solid #000;color:#000}
  table.t td{border-bottom:1px solid #ccc}
  table.t tr:hover td{background:none}
  .puce{border:1px solid #666;background:none;color:#000}
  .col-jauge,.jauge{display:none}
  table.tab-suivi td.defavorable:before{content:"\\25B2 "}
  table.tab-suivi td.favorable:before{content:"\\25BC "}
  .kpi,.etat-exercice .bloc{border:1px solid #999;box-shadow:none;background:none}
  .grille{display:block}
  .grille>*{margin-bottom:10px}
  /* Le tableau reste un tableau : la vue en cartes est un objet d ecran. */
  table.saisie,table.saisie tbody,table.saisie tfoot{display:table-row-group}
  table.saisie{display:table}
  table.saisie tr{display:table-row;border:0}
  table.saisie td{display:table-cell}
  table.saisie td[data-lib]:before{content:none}
  table.saisie input,table.saisie select{border:0;padding:0;background:none}
}

/* Bouton de validation glisse dans une cellule de tableau : il accompagne une
   liste deroulante dont on a retire la soumission automatique. */
.btn-mini{padding:5px 11px;font-size:var(--t-xs);white-space:nowrap}

/* En-tete de colonne triable et recherche, communs aux tableaux de
   consultation (macros.html). */
table.t th.tri{padding:0;white-space:nowrap}
table.t th.tri a{display:block;padding:8px 10px;color:inherit;
  text-transform:inherit;letter-spacing:inherit;font:inherit}
table.t th.tri a:hover{background:var(--p-l);text-decoration:none;color:var(--p)}
table.t th.tri .fl{margin-left:5px;opacity:.5;font-size:.85em}
table.t th.tri.on{color:var(--p)}
table.t th.tri.on .fl{opacity:1}

.recherche-tableau{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin:0 0 12px}
.recherche-tableau input[name=q]{flex:1 1 220px;min-width:0}
@media(max-width:719px){.recherche-tableau .btn{flex:1 1 auto;text-align:center}}

/* Lien dans un texte suivi : la couleur seule ne suffit pas a le distinguer
   d un mot en gras au milieu d un paragraphe, d ou le soulignement discret.
   Sert notamment aux renvois vers les ecrans depuis la page d aide. */
a.lien{text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
a.lien:hover{text-decoration-thickness:2px}

/* ---------------------------------------------- coherence des donnees
   Bandeau en tete des ecrans de donnees, page d avis, vue d ensemble.
   Voir app/coherence.py. */
.coh-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  background:var(--card);border:1px solid var(--bd);border-left:6px solid var(--bd2);
  border-radius:var(--r-s);padding:9px 14px;margin-bottom:16px;font-size:var(--t-s)}
.coh-bandeau .coh-titre{font-size:var(--t-xs);font-weight:700;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.05em}
.coh-bandeau .btn{margin-left:auto;padding:6px 14px}
/* Avis attendu : bandeau jaune, bien visible. Texte fonce pour le contraste. */
.coh-bandeau.attente{background:#FFF3C4;border-color:#E9C23A;border-left-color:#D9A400;
  color:#4A3900;font-weight:600;box-shadow:0 2px 8px -4px rgba(120,90,0,.35)}
.coh-bandeau.attente .coh-titre{color:#6B5200}
.coh-bandeau.attente .coh-titre::before{content:"!";display:inline-flex;align-items:center;
  justify-content:center;width:18px;height:18px;margin-right:8px;border-radius:50%;
  background:#D9A400;color:#fff;font-size:12px;vertical-align:1px}
.coh-bandeau.attente .coh-note{color:#6B5200}
.coh-bandeau.attente .btn{background:#8A6A00;border-color:#8A6A00;color:#fff}
.coh-bandeau.attente .btn:hover{background:#6B5200;border-color:#6B5200}
/* Signalement ouvert : la couleur du feu. Valide : discret. */
.coh-bandeau.warn{background:var(--warn-l);border-left-color:var(--warn)}
.coh-bandeau.info{background:var(--info-l);border-left-color:var(--info)}
.coh-bandeau.err{background:var(--err-l);border-left-color:var(--err)}
.coh-bandeau.ok{border-left-color:var(--ok)}
.coh-note{font-size:var(--t-xs);color:var(--tx2)}
.puce.revoir{background:repeating-linear-gradient(135deg,var(--ok-l) 0 5px,var(--card) 5px 10px);
  color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-l)}
.puce.partiel{background:var(--card);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.puce.gris{background:var(--ivoire-fonce);color:var(--tx2)}
.coh-defile{overflow-x:auto}
.coh-matrice td.coh-cellule{text-align:center;white-space:nowrap}
.coh-feux{border:0;padding:0;margin:0 0 8px}
.coh-feux legend{font-size:var(--t-xs);color:var(--tx2);font-weight:700;margin-bottom:4px}
form.f .coh-feux label.coh-feu{display:flex;gap:8px;align-items:baseline;font-size:var(--t-s);
  color:var(--tx);font-weight:400;text-transform:none;letter-spacing:0;padding:6px 8px;
  margin:4px 0;border-radius:var(--r-s);border-left:4px solid var(--bd2);background:var(--bg)}
form.f .coh-feux label.coh-feu input{width:auto;flex:0 0 auto}
form.f .coh-feux label.coh-feu.vert{border-left-color:var(--ok)}
form.f .coh-feux label.coh-feu.orange{border-left-color:var(--warn)}
form.f .coh-feux label.coh-feu.rouge{border-left-color:var(--err)}
.coh-signalement{border:1px solid var(--bd);border-left:4px solid var(--warn);
  border-radius:var(--r-s);padding:10px 12px;margin-bottom:12px}
.coh-signalement.rouge{border-left-color:var(--err)}
/* Corrige, a revalider : se distingue d un signalement non traite (22/09/2026) */
.coh-signalement.corrige{border-left-color:var(--info);background:var(--info-l)}
tr.coh-corrige td{background:var(--info-l)}
.coh-entete{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.coh-texte{white-space:pre-line;margin:8px 0}
.coh-suivi{font-size:var(--t-s);margin:6px 0 8px;padding-left:20px}
.coh-boutons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.coh-liens{display:flex;flex-wrap:wrap;gap:8px}
.coh-roles{margin:6px 0 0;padding-left:18px;font-size:var(--t-s)}
.coh-roles li{margin:3px 0}
.coh-h3{font-size:var(--t-s);margin:14px 0 4px}
@media(max-width:719px){
  /* Un tableau de sept colonnes ne tient pas dans la largeur d un telephone.
     Le laisser deborder poussait la page entiere : l en-tete partait a gauche
     et les boutons devenaient inatteignables. Il defile dans sa carte, et la
     page garde sa largeur. La saisie budgetaire et le suivi sont exclus --
     ils se transforment en liste de cartes, ou chaque valeur retrouve son
     intitule. Exclure le suivi est obligatoire : cette regle, plus specifique,
     rendait a son en-tete masque une largeur max-content et la page debordait
     de 331 px (mesure du rendu, paragraphe 79). */
  table.t:not(.saisie):not(.tab-suivi){display:block;width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  table.t:not(.saisie):not(.tab-suivi)>thead,table.t:not(.saisie):not(.tab-suivi)>tbody,
  table.t:not(.saisie):not(.tab-suivi)>tfoot{display:table;width:100%;min-width:max-content}
  /* Une image ou un bloc preformate deborde de la meme facon. */
  .page img,.page pre{max-width:100%}
}

@media print{.coh-bandeau{display:none!important}}

/* Tableau dont chaque ligne ouvre un detail (masse salariale par section). */
table.lignes-detail tbody tr[data-href]{cursor:pointer}
table.lignes-detail tbody tr[data-href]:hover td{background:var(--ivoire-fonce)}
/* Lignes depliables : Regie > Logements, par groupe (paragraphe 99). */
table.lignes-depliables tr.ligne-depliable{cursor:pointer}
table.lignes-depliables tr.ligne-depliable:hover td,
table.lignes-depliables tr.ligne-depliable.ouverte td{background:var(--ivoire-fonce)}
button.deplier{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;display:inline-flex;gap:6px;align-items:baseline}
button.deplier .chevron{display:inline-block;color:var(--tx2);transition:transform .15s}
tr.ouverte button.deplier .chevron{transform:rotate(90deg)}
tr.ligne-detail>td{background:var(--ivoire);padding:12px 14px 16px}
.detail-occupation .occ-chiffres{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:10px}
.detail-occupation .occ-chiffres .sur{display:block;font-size:var(--t-xs);color:var(--tx2)}
.detail-occupation .occ-chiffres strong{font-size:1.25em}
.detail-occupation .occ-tables{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.detail-occupation .occ-tables table{width:auto;min-width:280px}
.detail-occupation caption{text-align:left;font-weight:600;font-size:var(--t-s);padding:0 0 6px}
@media (prefers-reduced-motion:reduce){button.deplier .chevron{transition:none}}

/* =========================================================================
   Courbe d evolution cumulee (ecran de suivi)
   Le trace est un SVG etire ; tout le texte est du HTML autour, pour qu il
   garde sa taille quelle que soit la largeur. Voir macros.html, courbe_cumul.
   ========================================================================= */
.courbe{position:relative;padding-left:56px;margin:2px 0 0}
.courbe-y{position:absolute;left:0;top:0;bottom:34px;width:50px;
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;font-size:var(--t-xs);color:var(--tx3);line-height:1}
.courbe-y span{transform:translateY(-.4em)}
.courbe-y span:last-child{transform:none}
.courbe-cadre{position:relative;height:200px;
  border-left:1px solid var(--bd2);border-bottom:1px solid var(--bd2)}
.courbe-trace{display:block;width:100%;height:100%}
.courbe-point{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--p);border:2px solid var(--card);
  transform:translate(-50%,50%);box-shadow:var(--sh)}
.courbe-point.depasse{background:var(--err)}
.courbe-mois{display:grid;grid-template-columns:repeat(12,1fr);gap:0;
  list-style:none;margin:5px 0 0;padding:0;
  font-size:var(--t-xs);color:var(--tx3);text-align:center}
.courbe-legende{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:8px 0 0;font-size:var(--t-xs);color:var(--tx2)}
.courbe-legende span{display:inline-block;width:22px;height:0;
  border-top:2px dashed var(--tx2)}
.courbe-legende .cl-realise{border-top:2.5px solid var(--p)}
.courbe-legende .cl-budget+*{margin-right:10px}

@media(max-width:719px){
  /* Le cadre se tasse, le texte non : il vit en dehors du SVG. Un mois sur
     deux suffit a se reperer sur douze colonnes de 28 px. */
  .courbe{padding-left:42px}
  .courbe-y{width:38px}
  .courbe-cadre{height:150px}
  .courbe-mois{font-size:11px}
  .courbe-mois li:nth-child(even){visibility:hidden}
}

@media print{.courbe-cadre{height:150px}}


/* Graphiques de lecture rapide (paragraphe 71, 21/09/2026) : anneau, barres,
   histogramme. Aucun texte dans le dessin -- voir app/graphiques.py. */
/* Classes gr0 a gr6 : couleurs des parts. Nommees gr et non g pour ne pas
   croiser la grille « grille g4 » des indicateurs. */
.gr0{--g:var(--bd2)} .gr1{--g:var(--nuit)} .gr2{--g:var(--teal)}
.gr3{--g:var(--terracotta)} .gr4{--g:var(--sauge-fonce)} .gr5{--g:#7E8BC7}
.gr6{--g:#C9A04A}
.anneau-trace circle[class]{stroke:var(--g)}
.pastille{display:inline-block;width:11px;height:11px;border-radius:3px;
  background:var(--g);margin-right:7px;vertical-align:-1px}
.anneau{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.anneau-trace{width:150px;height:150px;flex:none;transform:rotate(0deg)}
.anneau-legende{list-style:none;margin:0;padding:0;font-size:var(--t-s);display:grid;gap:5px}
.anneau-legende strong{margin-left:6px;font-variant-numeric:tabular-nums}
.anneau-legende .pct{color:var(--tx2);font-size:var(--t-xs);margin-left:6px}
.barres{display:grid;gap:7px}
.barre-ligne{display:grid;grid-template-columns:minmax(90px,210px) 1fr auto;gap:12px;
  align-items:center;font-size:var(--t-s)}
.barre-lib{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-piste{position:relative;height:14px;background:var(--ivoire-fonce);border-radius:4px}
.barre{position:absolute;left:0;top:0;bottom:0;background:var(--nuit);border-radius:4px}
.barre.depasse{background:var(--terracotta-fonce)}
.barre-repere{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--tx2);z-index:1}
.barre-val{font-variant-numeric:tabular-nums;white-space:nowrap;min-width:72px;text-align:right}
.histo{position:relative;padding-left:56px}
.histo-y{position:absolute;left:0;top:0;bottom:24px;width:50px;display:flex;
  flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-size:var(--t-xs);color:var(--tx2);font-variant-numeric:tabular-nums}
.histo-cadre{height:170px;display:grid;grid-template-columns:repeat(12,1fr);gap:6px;
  align-items:end;border-bottom:1px solid var(--bd2);
  background:linear-gradient(var(--bd) 1px,transparent 1px) 0 0/100% 50%}
.histo-case{display:flex;align-items:flex-end;height:100%}
.histo-barre{display:block;width:100%;background:var(--nuit);border-radius:4px 4px 0 0}
.graphes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:16px}
.graphes .carte{margin:0}
.graphes h2{font-size:var(--t-m);margin-top:0}
@media(max-width:719px){
  .barre-ligne{grid-template-columns:1fr auto}
  .barre-piste{grid-column:1/-1;order:3}
  .histo{padding-left:42px}.histo-y{width:38px}
  .histo-cadre{height:130px;gap:3px}
}
@media print{.anneau-trace{width:110px;height:110px}.histo-cadre{height:120px}}

/* L essentiel a l accueil (paragraphe 73) : chiffres cles au-dessus du graphique. */
.essentiel .carte h2 a{color:inherit;text-decoration:none}
.essentiel .carte h2 a:hover{text-decoration:underline}
.kpis{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 14px}
.kpi-mini .lib{font-size:var(--t-xs);color:var(--tx2)}
.kpi-mini .val{font-size:var(--t-l);font-weight:700;font-variant-numeric:tabular-nums;color:var(--p)}
.kpi-mini .sous{font-size:var(--t-xs);color:var(--tx2)}
.essentiel-lien{font-size:var(--t-xs);margin:12px 0 0}

/* =========================================================================
   Notifications (lot 56, paragraphe 96)
   Ce qui attend la personne : un nombre sur le menu et les onglets, le verbe
   sur la ligne de l objet, un point sur le bouton de l action attendue, et
   la cloche qui rassemble tout. Une seule couleur, celle de l erreur : ce
   qui est marque attend quelqu un, et ce quelqu un, c est vous.
   ========================================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.notif{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--err);
  color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:1px;
  font-variant-numeric:tabular-nums}
.notif-ligne{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:9px;
  background:var(--err);color:#fff;font-size:var(--t-xs);font-weight:700;
  line-height:1.3;white-space:nowrap;vertical-align:1px}
.notif-bouton{display:inline-block;width:9px;height:9px;margin-left:8px;border-radius:50%;
  background:var(--err);box-shadow:0 0 0 2px #fff;vertical-align:1px}
.btn.sec .notif-bouton{box-shadow:none}

.appbar details.cloche{position:relative;flex:0 0 auto}
.appbar details.cloche summary{list-style:none;cursor:pointer;color:#fff;opacity:.85;
  display:inline-flex;align-items:center;padding:6px 8px;border-radius:var(--r-s)}
.appbar details.cloche summary::-webkit-details-marker{display:none}
.appbar details.cloche summary:hover,.appbar details.cloche[open] summary{opacity:1;
  background:rgba(255,255,255,.14)}
.appbar details.cloche summary .notif{margin-left:-6px;margin-top:-12px}
.cloche-liste{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:360px;
  max-height:70vh;overflow-y:auto;background:var(--card);color:var(--tx);
  border:1px solid var(--bd);border-radius:var(--r-s);box-shadow:var(--sh2);padding:6px}
.cloche-titre{font-weight:700;padding:8px 10px 4px;color:var(--p)}
.cloche-groupe{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx2);font-weight:700;padding:10px 10px 4px}
.cloche-liste a{display:block;padding:8px 10px;border-radius:var(--r-s);color:var(--tx);
  font-size:var(--t-s);line-height:1.35}
.cloche-liste a:hover{background:var(--p-l);text-decoration:none}
.cloche-liste a strong{display:block;font-weight:600}
.cloche-liste a span{display:block;font-size:var(--t-xs);color:var(--tx2)}
.cloche-vide{margin:0;padding:12px 10px;color:var(--tx2);font-size:var(--t-s)}
@media(max-width:719px){
  .appbar details.cloche{order:1;margin-left:auto;position:static}
  .cloche-liste{left:8px;right:8px;width:auto}
}
@media print{.appbar details.cloche,.notif,.notif-ligne,.notif-bouton{display:none}}

/* Tiroirs Cadrer et compte (lot 57, 24/09/2026). Le tiroir du compte porte
   l identite qui occupait une ligne entiere sous la barre sur telephone. */
.appbar nav.menu .tiroir .qui{padding:8px 12px 10px;font-size:var(--t-xs);color:var(--tx2);
  line-height:1.4;border-bottom:1px solid var(--bd);margin-bottom:4px}
.appbar nav.menu details.compte summary{font-weight:600}