:root {
  --navy: #0f2a43;
  --navy-clair: #1c4066;
  --accent: #e8a33d;
  --rouge: #c0392b;
  --orange: #e07b39;
  --ambre: #e8a33d;
  --vert: #2e7d5b;
  --fond: #eef1f5;
  --carte: #ffffff;
  --bord: #dde3ea;
  --texte: #1a222c;
  --sourdine: #5b6875;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- navigation */

nav.principale {
  background: var(--navy);
  color: #fff;
  padding: 0 26px;
  display: flex; align-items: center; gap: 18px;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(15,42,67,.2);
}
nav.principale .marque {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  padding: 16px 0; color: var(--accent); font-weight: 700; white-space: nowrap;
}
nav.principale .marque span { color: rgba(255,255,255,.55); font-weight: 400; }
nav.principale a.lien {
  color: rgba(255,255,255,.78); padding: 18px 2px; font-size: 14.5px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
nav.principale a.lien:hover { color: #fff; text-decoration: none; }
nav.principale a.lien.actif { color: #fff; border-bottom-color: var(--accent); }
nav.principale .droite { margin-left: auto; display: flex; align-items: center; gap: 16px;
  font-size: 13.5px; color: rgba(255,255,255,.65); }
.identite-courte { display:none; }

/* 1 240 px : la colonne principale d'une fiche de financement garde ainsi
   ses 640 px de tableau sans défilement sur un écran de bureau. À 1 120 px,
   chaque tableau de la fiche défilait dans sa carte. */
main { max-width: 1240px; margin: 0 auto; padding: 30px 26px 70px; }

h1.titre { font-size: 26px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 4px; }
p.chapeau { color: var(--sourdine); margin: 0 0 26px; max-width: 68ch; }

/* ----------------------------------------------------------------- cartes */

.grille { display: grid; gap: 16px; }
/* « minmax(0, …) » et non « 1fr » nu : une piste « fr » ne descend jamais
   sous la largeur minimale de son contenu. Un tableau d'échéances ou un
   formulaire un peu large élargissait toute la grille, et la fiche d'un
   financement défilait de 180 px à l'horizontale sur un écran de bureau. */
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grille > * { min-width: 0; }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 4px;
  padding: 18px 20px;
}
.carte h2 {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sourdine); font-weight: 700; margin: 0 0 12px;
}
.indicateur .valeur {
  font-size: 27px; font-weight: 660; color: var(--navy); letter-spacing: -.02em;
  line-height: 1.15;
}
.indicateur .note { font-size: 13px; color: var(--sourdine); margin-top: 4px; }

/* Les indicateurs du tableau de bord sont des portes d'action, pas des nombres
   décoratifs. Le trait supérieur reprend la logique d'un intercalaire de dossier :
   discret au repos, lisible dès que la carte reçoit le focus. */
.indicateur-lien {
  color: inherit; display: flex; flex-direction: column; min-height: 174px;
  position: relative; overflow: hidden; transition: transform .16s ease,
  border-color .16s ease, box-shadow .16s ease;
}
.indicateur-lien::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--navy-clair); transform: scaleX(.18); transform-origin: left;
  transition: transform .16s ease;
}
.indicateur-lien.indicateur-attention::before { background: var(--orange); }
.indicateur-lien.indicateur-critique::before { background: var(--rouge); }
.indicateur-lien:hover {
  text-decoration: none; transform: translateY(-2px); border-color: #bac6d2;
  box-shadow: 0 8px 22px rgba(15,42,67,.09);
}
.indicateur-lien:hover::before, .indicateur-lien:focus-visible::before {
  transform: scaleX(1);
}
.indicateur-lien:focus-visible {
  outline: 3px solid rgba(232,163,61,.5); outline-offset: 3px;
}
.indicateur-action {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 16px; color: var(--navy-clair);
  font-size: 12.5px; font-weight: 700;
}
.indicateur-action span { font-size: 17px; transition: transform .16s ease; }
.indicateur-lien:hover .indicateur-action span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .indicateur-lien, .indicateur-lien::before, .indicateur-action span {
    transition: none;
  }
}

/* Registres explicatifs : une bande de vues pour choisir le signal, puis un
   grand livre dense qui montre la preuve et le prochain geste au même endroit. */
.registre-vues {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 22px 0 0; padding: 1px; background: var(--bord);
  border: 1px solid var(--bord); border-radius: 4px; overflow: hidden;
}
.registre-vues-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.registre-vues a {
  display: flex; flex-direction: column; gap: 4px; min-height: 82px;
  padding: 14px 16px; background: #fff; color: var(--texte);
}
.registre-vues a:hover { text-decoration: none; background: #f7f9fb; }
.registre-vues a:focus-visible { outline: 3px solid rgba(232,163,61,.5); outline-offset: -3px; }
.registre-vues a.actif { box-shadow: inset 0 3px var(--accent); background: #fffaf1; }
.registre-vues span { color: var(--sourdine); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.registre-vues strong { color: var(--navy); font-size: 19px; font-variant-numeric: tabular-nums; }
.registre-explication {
  display: grid; grid-template-columns: minmax(180px, .45fr) 1.55fr; gap: 18px;
  padding: 14px 16px; margin-bottom: 22px; background: #f8fafc;
  border: 1px solid var(--bord); border-top: 0;
}
.registre-explication p { margin: 0; color: var(--sourdine); }
.registre-tableau { padding: 0; }
.registre-tableau .entete-carte-actions { padding: 18px 20px 8px; }
.registre-total { display: flex; flex-direction: column; align-items: flex-end; }
.registre-total span { color: var(--sourdine); font-size: 12px; }
.registre-total strong { color: var(--navy); font-size: 22px; }
.bouton-compact { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.motif-correction {
  margin-top: 6px; padding-left: 9px; color: var(--danger);
  border-left: 3px solid var(--danger); font-size: 13px;
}

@media (max-width: 720px) {
  .registre-vues, .registre-vues-quatre { grid-template-columns: 1fr; }
  .registre-vues a { min-height: 64px; }
  .registre-explication { grid-template-columns: 1fr; gap: 4px; }
}

.barre { height: 7px; border-radius: 4px; background: #e9edf2; overflow: hidden; margin-top: 12px; }
.barre span { display: block; height: 100%; background: var(--navy); border-radius: 4px; }

/* --------------------------------------------------------------- tableaux */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--bord); text-align: left; }
thead th {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sourdine); font-weight: 700; border-bottom: 1.5px solid var(--navy);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fafbfc; }
table.compacte td, table.compacte th { padding: 8px 10px; }

/* --------------------------------------------------------------- étiquettes */

.etiquette {
  display: inline-block; padding: 2px 9px; border-radius: 100px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; max-width: 100%;
}
/* Une étiquette longue (« Collecte commerciale suspendue — autorisation… »)
   élargissait la page Veille sur téléphone. Elle passe à la ligne, et
   seulement là où la place manque. */
@media (max-width: 720px) {
  .etiquette { white-space: normal; border-radius: 10px; }
}
.e-critique { background: #fbeae8; color: var(--rouge); border-color: #f3cfca; }
.e-eleve    { background: #fdf1e7; color: #b4601f; border-color: #f5d9bf; }
.e-modere   { background: #fdf6e8; color: #93700f; border-color: #f2e2b8; }
.e-faible   { background: #eaf5ef; color: var(--vert); border-color: #cbe6d8; }
.e-neutre   { background: #eef1f5; color: var(--sourdine); border-color: var(--bord); }

/* ------------------------------------------------------------------ formes */

form.bloc { display: grid; gap: 14px; }
.champs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 5px; }
.champ label { font-size: 12.5px; font-weight: 600; color: var(--sourdine); }
.champ .aide { font-size: 12px; color: #8a95a1; }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--bord);
  border-radius: 3px; background: #fff; color: var(--texte); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(28,64,102,.25); outline-offset: 1px; border-color: var(--navy-clair);
}
textarea { min-height: 84px; resize: vertical; }

/* La règle « display » des boutons l'emporte sinon sur le display:none que le
   navigateur applique à [hidden] : un bouton masqué resterait visible. */
[hidden] { display: none !important; }

button, .bouton {
  font: inherit; font-weight: 600; padding: 9px 18px; border-radius: 3px;
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  cursor: pointer; display: inline-block;
}
button:hover, .bouton:hover { background: var(--navy-clair); text-decoration: none; }
button:disabled { background:#8a95a1; border-color:#8a95a1; cursor:not-allowed; opacity:.8; }
button.secondaire, .bouton.secondaire {
  background: #fff; color: var(--navy); border-color: var(--bord);
}
button.secondaire:hover, .bouton.secondaire:hover { background: #f6f8fa; }
button.discret {
  background: none; border: none; color: var(--navy-clair); padding: 2px 4px;
  font-weight: 600; font-size: 13px;
}
button.discret:hover { text-decoration: underline; background: none; }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.liste-liens { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }

/* Cockpit de trésorerie : dense, sans empiler des cartes décoratives. */
.tresorerie-kpis { margin: 22px 0 28px; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.tresorerie-kpis .indicateur { padding: 18px 4px; }
.surface-donnees { border-top: 2px solid var(--navy); margin-top: 24px; }
.surface-titre { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:16px 0 10px; }
.surface-titre h2 { margin:0; }
.surface-titre span { color:var(--sourdine); font-variant-numeric:tabular-nums; }
.table-defilante { overflow-x:auto; }
.date-forte, .montant-fort { font-variant-numeric:tabular-nums; white-space:nowrap; }
.preuve-prevision { max-width:38ch; color:var(--sourdine); }
.vide-action { display:flex; flex-direction:column; gap:6px; }
.calendrier-tresorerie { margin-bottom:32px; }
.ecart-negatif { color:var(--rouge); font-weight:650; }
.edition-prevision { min-width: 90px; }
.edition-prevision summary { color: var(--navy); cursor: pointer; font-weight: 700; }
.edition-prevision form {
  display: grid; gap: 7px; width: min(330px, 72vw); margin-top: 10px;
  padding: 12px; background: #f7f9fb; border: 1px solid var(--bord);
}
.edition-prevision label { font-size: 12px; font-weight: 700; }
.liste-controles { display: grid; gap: 1px; background: var(--bord); }
.controle-qualite { background: #fff; padding: 14px 16px; border-left: 3px solid #d29a31; }
.controle-qualite.controle-bloquant { border-left-color: var(--rouge); }
.controle-qualite p { margin: 6px 0; }
.formulaire-cloture { display: grid; gap: 8px; max-width: 720px; margin-top: 18px; }
.etat-maitrise { border-left: 3px solid var(--vert); padding: 12px 16px; background: #eef8f2; }
.metadonnees-cloture { display: grid; gap: 10px; }
.metadonnees-cloture div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.metadonnees-cloture dt { color: var(--sourdine); }
.metadonnees-cloture dd { margin: 0; overflow-wrap: anywhere; }
.ajout-prevision { border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); padding: 12px 0; }
.ajout-prevision summary { color: var(--navy); cursor: pointer; font-weight: 700; }
.ajout-prevision .bloc { margin-top: 14px; }
.ajout-ligne { max-width:760px; margin-top:18px; padding:16px; background:#f7f9fb; border:1px solid var(--bord); }
.edition-budget { margin-top:8px; }
.edition-budget summary { color:var(--navy); cursor:pointer; font-weight:600; }
fieldset { border:1px solid var(--bord); padding:16px; display:grid; gap:14px; }
legend { color:var(--navy); font-weight:700; padding:0 8px; }
.veille-liste { display:grid; gap:14px; }
.veille-element { background:#fff; border-left:4px solid var(--navy); padding:18px 20px; }
.veille-element header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.veille-element h2, .veille-element h3 { margin:8px 0 4px; color:var(--navy); }
.impact-veille { background:#f7f9fb; border:1px solid var(--bord); padding:12px 14px; margin:12px 0; }
.impact-veille p { margin:2px 0 9px; }
.ciblage-form { margin-top:14px; }
.ciblage-form summary { color:var(--navy); cursor:pointer; font-weight:700; }
.ciblage-form form { margin-top:12px; max-width:760px; }
.offres-montage { margin-bottom:16px; }
.offres-montage h3 { color:var(--navy); margin:0 0 6px; }
.offres-montage p { margin:0; }
button:active, .bouton:active { transform:translateY(1px); }

/* ------------------------------------------------------------------ divers */

.entete-page {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.encadre {
  background: #f7f9fb; border-left: 3px solid var(--navy); padding: 14px 18px;
  border-radius: 0 3px 3px 0; font-size: 14px; color: var(--sourdine);
}
.encadre strong { color: var(--texte); }
.alerte-config {
  background: #fbeae8; border-left: 3px solid var(--rouge); color: #7d2b21;
  padding: 14px 18px; border-radius: 0 3px 3px 0; margin-bottom: 20px; font-size: 14px;
}
.vide { color: var(--sourdine); padding: 22px; text-align: center; }
.pied { margin-top: 40px; font-size: 12.5px; color: #8a95a1; }

.echeance { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.echeance .quand { font-variant-numeric: tabular-nums; white-space: nowrap; }
.faite { color: #8a95a1; text-decoration: line-through; }

.filtres { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filtres select { width: auto; }

@media (max-width: 900px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g2 { grid-template-columns: minmax(0, 1fr); }
  .champs { grid-template-columns: 1fr; }
  /* Une seule bande qu'on fait défiler du doigt. Repliée sur quatre lignes
     et collée en haut de l'écran, la navigation masquait en permanence près
     de la moitié d'un téléphone. */
  nav.principale {
    flex-wrap: nowrap; gap: 14px; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none;
  }
  nav.principale::-webkit-scrollbar { display: none; }
  nav.principale .marque span, .identite-email { display: none; }
  .identite-courte { display: inline; }
  nav.principale a.lien { padding: 14px 2px; font-size: 14px; }
  nav.principale .marque { padding: 14px 0; }
  .veille-element header { display:block; }
  main { padding: 22px 16px 60px; }
}

/* Jusqu'à 1 500 px, onze entrées et une adresse électronique ne tiennent pas
   sur une ligne : les libellés passaient sur deux lignes. */
@media (min-width: 901px) and (max-width: 1500px) {
  nav.principale { gap:10px; padding:0 14px; }
  nav.principale .marque span, .identite-email { display:none; }
  .identite-courte { display:inline; }
  nav.principale a.lien { font-size:13px; }
  nav.principale .droite { gap:8px; }
}

/* ------------------------------------------- sélection multiple cherchable */
/* Soixante-huit domaines dans une liste déroulante de huit lignes : l'agent
   fait défiler à l'aveugle, et un clic sans Ctrl efface tout ce qu'il avait
   déjà coché. La liste native reste dans la page — elle porte la valeur et
   fonctionne sans script — mais elle est masquée dès que l'amélioration
   s'applique. La cartouche ne montre alors que ce qui est choisi. */

.multi { position: relative; }
.multi-boite {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--bord); border-radius: 3px; background: #fff;
  padding: 5px 6px; min-height: 38px; cursor: text;
}
.multi-boite.ouvert, .multi-boite:focus-within {
  outline: 2px solid rgba(28,64,102,.25); outline-offset: 1px;
  border-color: var(--navy-clair);
}
.multi-boite.invalide { border-color: var(--rouge); }

.multi-q {
  flex: 1 1 9ch; min-width: 9ch; width: auto; border: none; padding: 3px 2px;
  background: none;
}
.multi-q:focus { outline: none; }

.jeton {
  display: inline-flex; align-items: center; gap: 6px; font: inherit;
  font-size: 13px; font-weight: 600; padding: 3px 6px 3px 9px; border-radius: 3px;
  background: #eef1f5; color: var(--navy); border: 1px solid var(--bord);
  cursor: pointer;
}
.jeton:hover { background: #fbeae8; border-color: #f3cfca; color: var(--rouge); }
.jeton .croix { font-size: 14px; line-height: 1; opacity: .65; }
.jeton:hover .croix { opacity: 1; }

.multi-panneau {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--bord); border-radius: 3px;
  box-shadow: 0 6px 20px rgba(15,42,67,.13); max-height: 292px; overflow-y: auto;
}
.multi-liste { list-style: none; margin: 0; padding: 4px; }
.multi-liste li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 3px; cursor: pointer; font-size: 14px;
}
.multi-liste li:hover, .multi-liste li.actif { background: #eef1f5; }
.multi-liste li[aria-selected="true"] { color: var(--navy); font-weight: 600; }
.multi-liste .coche {
  width: 15px; height: 15px; border: 1px solid var(--bord); border-radius: 2px;
  flex: 0 0 auto; position: relative; background: #fff;
}
.multi-liste li[aria-selected="true"] .coche {
  background: var(--navy); border-color: var(--navy);
}
.multi-liste li[aria-selected="true"] .coche::after {
  content: "✓"; color: #fff; font-size: 11px; line-height: 15px;
  position: absolute; inset: 0; text-align: center;
}
.multi-liste mark { background: #fdf0d8; color: inherit; border-radius: 2px; }
.multi-rien { padding: 12px; margin: 0; font-size: 13px; color: var(--sourdine); }

.multi-etat {
  margin: 5px 0 0; font-size: 12px; color: var(--sourdine);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.multi-etat .erreur { color: var(--rouge); font-weight: 600; }

/* ------------------------------------------------- tableaux sur écran étroit */
/* Un tableau de sept colonnes ne tient pas sous 900 px. Sans conteneur qui
   défile, c'est la PAGE qui s'élargit : la navigation part hors champ, la
   dernière colonne est coupée, et l'agent ne sait pas qu'il manque quelque
   chose. Le défilement est donc rendu à la carte qui porte le tableau, jamais
   au document. */
.carte:has(table) { overflow-x: auto; }

/* Repli pour un navigateur sans :has(). La carte reste alors scrollable, au
   prix d'un débordement possible sur les cartes sans tableau — moins grave
   que la page entière qui glisse. */
@supports not selector(:has(table)) {
  .carte { overflow-x: auto; }
}

/* Sans largeur minimale, le moteur comprime les colonnes jusqu'à l'illisible
   au lieu de laisser le conteneur défiler. */
.carte table { min-width: 640px; }
/* La colonne latérale d'une page en deux colonnes ne porte que des tableaux
   de deux ou trois colonnes (journal, financements récents) : 640 px les
   faisaient défiler dans une carte de 450 px. */
.g2 > :last-child .carte table,
.g2 > .carte:last-child table { min-width: 0; }

/* ------------------------------------------- retours d'enregistrement */
/* « .aide » et « .erreur » n'existaient que portées par un parent (.champ,
   .multi-etat) : hors de ce contexte elles ne peignaient rien. Versions
   autonomes, sans toucher aux règles existantes qui restent plus spécifiques. */
p.succes { color: var(--vert, #1c7c4a); font-weight: 600; margin: 0 0 12px; }
p.erreur { color: var(--rouge); font-weight: 600; margin: 0 0 12px; }
p.aide   { font-size: 12px; color: #8a95a1; margin: 6px 0 14px; max-width: 62ch; }

/* ----------------------------------------------- bureau documentaire */
.bureau-synthese {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px; border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--bord); background: #fff;
}
.bureau-synthese .indicateur { padding: 16px 18px; border-right: 1px solid var(--bord); }
.bureau-synthese .indicateur:last-child { border-right: 0; }
.bureau-synthese h2 {
  margin: 0 0 5px; color: var(--sourdine); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
.methode-temps { margin: 0 0 22px; color: var(--sourdine); font-size: 13px; }
.methode-temps summary, .rejet-proposition summary {
  color: var(--navy-clair); cursor: pointer; font-weight: 650;
}
.methode-temps p { max-width: 82ch; }
.entete-carte-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.entete-carte-actions h2 { margin: 0; }
.ligne-retard { box-shadow: inset 3px 0 var(--rouge); }
.retard { display: block; color: var(--rouge); font-size: 12px; white-space: nowrap; }
.controles-documentaires { display: grid; gap: 10px; }
.controle-documentaire {
  padding: 13px 15px; border: 1px solid var(--bord); border-left: 4px solid var(--ambre);
  background: #fffaf1;
}
.controle-documentaire.controle-bloquant { border-left-color: var(--rouge); background: #fff7f6; }
.controle-documentaire header, .extraction-documentaire header {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.controle-documentaire h3, .extraction-documentaire h3 { margin: 0; font-size: 15px; color: var(--navy); }
.controle-documentaire p { margin: 5px 0 0; }
.extractions-documentaires { border-top: 1px solid var(--bord); }
.extraction-documentaire { padding: 17px 0; border-bottom: 1px solid var(--bord); }
.extraction-documentaire:last-child { border-bottom: 0; }
.extraction-documentaire header span { color: var(--sourdine); font-variant-numeric: tabular-nums; }
.valeur-extraite { margin: 7px 0; font-size: 17px; font-weight: 650; color: var(--texte); }
.preuve-extraite {
  margin: 7px 0 12px; padding: 10px 12px; background: #f7f9fb;
  border-left: 3px solid var(--navy-clair); color: var(--sourdine); overflow-wrap: anywhere;
}
.confirmation-remplacement {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0;
  padding: 9px 11px; background: #fff7e9; border: 1px solid #f0d8aa;
}
.confirmation-remplacement input { width: auto; margin-top: 5px; }
.rejet-proposition { margin-top: 10px; }
.rejet-proposition form { display: grid; gap: 7px; max-width: 520px; margin-top: 8px; }
.rejet-proposition label { font-size: 12px; font-weight: 700; color: var(--sourdine); }
.historique-documentaire { list-style: none; margin: 0; padding: 0; }
.historique-documentaire li { position: relative; padding: 0 0 18px 24px; border-left: 1px solid var(--bord); }
.historique-documentaire li::before {
  content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--navy);
}
.historique-documentaire li:last-child { border-left-color: transparent; }
.historique-documentaire span { display: block; color: var(--sourdine); font-size: 12px; }
.historique-documentaire p { margin: 4px 0 0; }
button.danger { background: #fff; color: var(--rouge); border-color: #e4b8b2; }
button.danger:hover { background: #fff5f4; }

@media (max-width: 900px) {
  .bureau-synthese { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bureau-synthese .indicateur:nth-child(2) { border-right: 0; }
  .bureau-synthese .indicateur:nth-child(-n+2) { border-bottom: 1px solid var(--bord); }
  .entete-carte-actions { align-items: flex-start; flex-direction: column; }
}

/* -------------------------------------------------- état des sources de veille

   Une liste de veille sans état de ses sources ne vaut rien : le lecteur ne
   peut pas distinguer « rien de neuf cette semaine » de « la source ne répond
   plus depuis mardi ». Le bandeau porte donc la date de lecture, l'origine
   réelle des données et la volumétrie, avant la liste elle-même. */

.bandeau-sources {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.source-etat {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 4px;
  border-left-width: 3px; padding: 14px 16px;
}
.source-etat.vivante  { border-left-color: var(--vert); }
.source-etat.degradee { border-left-color: var(--ambre); }
.source-etat.muette   { border-left-color: var(--orange); }
.source-etat.echec    { border-left-color: var(--rouge); }
.source-etat.jamais   { border-left-color: var(--bord); }
.source-etat h3 {
  margin: 0 0 2px; font-size: 14px; font-weight: 660; color: var(--navy);
}
.source-etat .organisme {
  font-size: 12.5px; color: var(--sourdine); margin: 0 0 10px;
}
.source-etat .lecture { font-size: 13px; margin: 0 0 6px; }
.source-etat .lecture strong { color: var(--texte); }
.source-etat .volumetrie {
  font-size: 12.5px; color: var(--sourdine); margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.source-etat .reserve {
  margin: 8px 0 0; font-size: 12.5px; color: #b4601f;
}

.qualite-veille {
  margin-top: 10px; font-size: 12.5px; color: var(--sourdine);
  border-top: 1px dashed var(--bord); padding-top: 8px;
}
.qualite-veille ul { margin: 4px 0 0; padding-left: 18px; }
.filtres-veille {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px; font-size: 13px;
}
.filtres-veille a { padding: 3px 10px; border: 1px solid var(--bord);
  border-radius: 100px; background: var(--carte); color: var(--sourdine); }
.filtres-veille a.actif { border-color: var(--navy); color: var(--navy);
  font-weight: 600; }

/* ------------------------------------------------------- autopilote (n. 8) */
/* Quatre classes posées par « autopilote.html » et « brief-autopilote.html »
   n'avaient aucune règle : les pastilles de priorité et les libellés des
   cartes d'indicateurs s'affichaient nus. Le défaut ne casse rien, il
   déshabille — et c'est justement sur ces deux pages que le montant
   mobilisable et la priorité d'une décision doivent se lire d'un coup d'œil.
   Les valeurs reprennent celles déjà en vigueur (.carte h2, .etiquette,
   p.chapeau) pour que ces pages n'inventent pas un second vocabulaire. */

.sur-titre {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--sourdine); font-weight: 700; margin-bottom: 4px;
}
p.intro { color: var(--sourdine); margin: 6px 0 0; max-width: 68ch; }

/* Titre d'une rangée d'indicateurs : il dit la portée des chiffres qui
   suivent (le portefeuille entier, ou la seule part de l'autopilote). */
/* Graphique de trésorerie : marques fines (24 px au plus), coin arrondi en
   haut seulement, 2 px de fond entre deux segments, grille en filet, texte à
   l'encre du texte et jamais à la couleur des séries. */
.graphique-tresorerie { margin: 4px 0 22px; }
.graphique-tresorerie .trace {
  position: relative; height: 200px; margin: 10px 0 28px 58px;
}
.ligne-grille {
  position: absolute; left: 0; right: 0; border-top: 1px solid #e3e8ee;
}
.ligne-grille span {
  position: absolute; right: calc(100% + 8px); top: -8px;
  font-size: 11px; color: var(--sourdine); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.graphique-tresorerie .colonnes {
  position: absolute; inset: 0; display: flex;
}
.graphique-tresorerie .colonne {
  position: relative; flex: 1 1 0; display: flex; justify-content: center;
  cursor: default;
}
.graphique-tresorerie .colonne:hover { background: #f3f6f9; }
.graphique-tresorerie .pile {
  width: min(24px, 50%); height: 100%;
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
}
.graphique-tresorerie .segment { display: block; min-height: 1px; }
.graphique-tresorerie .segment + .segment { border-bottom: 2px solid #fff; }
.graphique-tresorerie .segment:last-child { border-radius: 4px 4px 0 0; }
.point-encaisse {
  position: absolute; left: 50%; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px;
  border-radius: 50%; background: var(--texte); box-shadow: 0 0 0 2px #fff;
}
.mois-axe {
  position: absolute; top: calc(100% + 8px); font-size: 11px;
  color: var(--sourdine); white-space: nowrap;
}
.legende-graphique {
  display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none;
  margin: 0 0 4px; padding: 0; font-size: 12.5px; color: var(--sourdine);
}
.legende-graphique li { display: flex; align-items: center; gap: 6px; }
.pastille { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pastille-point { border-radius: 50%; background: var(--texte); }
@media (max-width: 720px) {
  .graphique-tresorerie .trace { margin-left: 46px; height: 170px; }
  .mois-axe { font-size: 10px; }
}

details.actions-demande { margin-top: 8px; }
details.actions-demande summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy-clair);
}
details.actions-demande[open] { min-width: 200px; }

.page-erreur { max-width: 720px; margin: 24px auto 0; padding: 28px 30px; }
.page-erreur h1 { margin: 4px 0 10px; }
.actions-erreur { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }

h2.titre-grille {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sourdine); font-weight: 700; margin: 22px 0 10px;
}

.carte .libelle {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sourdine); font-weight: 700;
  margin-bottom: 6px;
}
.carte .libelle + strong {
  display: block; font-size: 25px; font-weight: 660; color: var(--navy);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* « .aide » n'existe en autonome que pour un <p> ; ces deux pages l'emploient
   sur un <span> et un <div>, où elle ne peignait donc rien. */
.carte span.aide, .veille-element div.aide {
  display: block; font-size: 12px; color: #8a95a1; margin-top: 6px;
}

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  border: 1px solid var(--bord); background: #eef1f5; color: var(--sourdine);
  vertical-align: middle;
}
.badge.critique { background: #fbeae8; color: var(--rouge); border-color: #f3cfca; }
.badge.haute    { background: #fdf1e7; color: #b4601f; border-color: #f5d9bf; }
.badge.normale  { background: #eaf5ef; color: var(--vert); border-color: #cbe6d8; }

/* ------------------------------------------------ catalogue d'opportunités */

.catalogue-entete { align-items: center; }
.catalogue-entete .chapeau { margin-bottom: 0; }
.sur-titre { margin: 0 0 4px; }

.scenarios {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 22px; color: var(--sourdine); font-size: 12.5px;
}
.scenarios > span { font-weight: 700; margin-right: 3px; }
.scenario {
  display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px;
  border: 1px solid var(--bord); background: #fff; color: var(--navy);
  border-radius: 3px;
}
.scenario:hover, .scenario.actif {
  border-color: var(--navy); background: #f4f7fa; text-decoration: none;
}

.preuve-commerciale {
  display: grid; grid-template-columns: minmax(250px, 1.25fr) 1.75fr;
  gap: 20px 32px; padding: 22px 24px; margin-bottom: 20px;
  background: var(--navy); color: #fff; border-top: 3px solid var(--accent);
}
.preuve-commerciale h2 { margin: 0 0 5px; font-size: 20px; }
.preuve-commerciale p { margin: 0; color: rgba(255,255,255,.76); }
.preuve-commerciale .sur-titre { color: var(--accent); }
.preuve-commerciale ol {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  list-style: none; margin: 0; padding: 0; background: rgba(255,255,255,.18);
}
.preuve-commerciale li {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 82px; padding: 12px 14px; background: var(--navy);
}
.preuve-commerciale li strong { font-size: 23px; line-height: 1; color: #fff; }
.preuve-commerciale li span { margin-top: 7px; color: rgba(255,255,255,.66); font-size: 11.5px; line-height: 1.25; }
.preuve-commerciale .preuve-note { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }

.catalogue-recherche {
  margin-bottom: 28px; background: #fff; border: 1px solid var(--bord);
  border-top: 2px solid var(--navy);
}
.catalogue-formulaire { padding: 20px 22px; }
.catalogue-formulaire-titre {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; margin-bottom: 16px;
}
.catalogue-formulaire-titre h2, .catalogue-resultats-titre h2 {
  margin: 0; color: var(--navy); font-size: 19px;
}
.catalogue-champs {
  display: grid; grid-template-columns: 1.25fr repeat(3, minmax(150px, 1fr));
  gap: 18px; margin-top: 16px;
}
.catalogue-champs .champ { align-content: start; }
.catalogue-champs .champ label:not(:first-child) { margin-top: 10px; }
.champ-admin { padding-left: 17px; border-left: 1px solid var(--bord); }
.catalogue-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord);
}
.case-ligne { display: inline-flex; gap: 8px; align-items: center; color: var(--sourdine); font-size: 13px; }
.case-ligne input, .opportunite-selection input { width: auto; accent-color: var(--navy); }

.catalogue-resultats { margin-top: 12px; }
.catalogue-resultats-titre { border-bottom: 1px solid var(--bord); }
.catalogue-resultats-titre .sur-titre { margin-bottom: 1px; }
.catalogue-legende { display: flex; gap: 7px 15px; flex-wrap: wrap; font-size: 12.5px; color: var(--sourdine); }
.catalogue-legende b { color: var(--texte); font-variant-numeric: tabular-nums; }

.catalogue-lot-barre {
  position: sticky; top: 54px; z-index: 9; display: flex; align-items: center;
  gap: 16px; min-height: 52px; padding: 8px 12px; margin-bottom: 10px;
  background: #f7f9fb; border: 1px solid var(--bord);
}
.catalogue-lot-barre [data-compteur-selection] { color: var(--sourdine); font-size: 12.5px; }
.catalogue-lot-barre .actions { margin-left: auto; }
.catalogue-lot-barre button { padding: 6px 13px; font-size: 13px; }

.catalogue-liste { display: grid; gap: 10px; }
.opportunite-carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  background: #fff; border: 1px solid var(--bord); border-left: 3px solid var(--navy);
}
.opportunite-selection { padding: 21px 0 0 15px; }
.opportunite-contenu { padding: 18px 20px; }
.opportunite-haut { display: flex; justify-content: space-between; gap: 16px; }
.opportunite-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.opportunite-carte h3 { margin: 8px 80px 1px 0; font-size: 17px; line-height: 1.35; color: var(--navy); }
.opportunite-carte h3 a { color: inherit; }
.opportunite-carte p { max-width: 85ch; }
.opportunite-organisme { margin: 0 0 8px; color: var(--sourdine); font-size: 13px; font-weight: 600; }
.rang-instruction { display: flex; align-items: baseline; gap: 4px; min-width: 90px; justify-content: flex-end; color: var(--sourdine); }
.rang-instruction strong { font-size: 24px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.rang-instruction span { font-size: 10.5px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.opportunite-reperes, .decision-reperes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 15px 0; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
}
.opportunite-reperes div, .decision-reperes div { padding: 9px 11px; border-right: 1px solid var(--bord); }
.opportunite-reperes div:last-child, .decision-reperes div:last-child { border-right: 0; }
.opportunite-reperes dt, .decision-reperes dt { font-size: 10.5px; color: var(--sourdine); text-transform: uppercase; letter-spacing: .06em; }
.opportunite-reperes dd, .decision-reperes dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 650; }
.justification-classement, .points-verifier { display: grid; grid-template-columns: 170px 1fr; gap: 10px; font-size: 12.5px; }
.justification-classement ul, .points-verifier ul { display: flex; gap: 5px 16px; flex-wrap: wrap; margin: 0; padding-left: 18px; }
.justification-classement { color: var(--vert); }
.points-verifier { margin-top: 6px; color: #9a5b1d; }
/* Fiche détaillée d'un financement socle : chaque donnée porte sa source, et
   un point non confirmé se voit du premier coup d'œil. */
.fiche-base-juridique { margin: 10px 0 0; font-size: 12.5px; color: var(--sourdine); }
.fiche-base-juridique strong { color: var(--navy); margin-right: 6px; }
.fiche-dispositif { margin: 12px 0 0; border-top: 1px solid var(--bord); font-size: 12.5px; }
.fiche-dispositif > div { padding: 9px 0; border-bottom: 1px solid var(--bord); }
.fiche-dispositif > div.point-a-verifier { background: #fdf6e8; padding-left: 10px; padding-right: 10px; }
.fiche-dispositif dt { font-size: 10.5px; color: var(--sourdine); text-transform: uppercase; letter-spacing: .06em; }
.fiche-dispositif dd { margin: 4px 0 0; max-width: 90ch; }
.fiche-dispositif dd a { margin-left: 4px; }
.source-date { color: var(--sourdine); font-size: 11px; white-space: nowrap; }
.source-non-lue { color: #93700f; font-style: italic; }
.points-verifier li.point-a-verifier { background: #fdf6e8; padding: 4px 8px; }

.opportunite-actions { display: flex; align-items: center; gap: 16px; margin-top: 15px; }
.opportunite-actions .bouton { padding: 6px 12px; font-size: 12.5px; }
.catalogue-vide { padding: 38px 24px; background: #fff; border: 1px solid var(--bord); }
.catalogue-vide p { max-width: 72ch; margin: 8px auto 0; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 22px 0; }
.catalogue-principe {
  margin-top: 22px; padding: 13px 16px; border-left: 3px solid var(--navy);
  background: #f7f9fb; color: var(--sourdine); font-size: 12.5px;
}

.fil-ariane { display: flex; gap: 8px; margin-bottom: 18px; color: var(--sourdine); font-size: 12.5px; }
.fiche-opportunite-entete { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 20px; }
.fiche-opportunite-entete h1 { max-width: 850px; margin-top: 9px; }
.score-fiche { display: flex; gap: 5px; align-items: baseline; min-width: 120px; justify-content: flex-end; color: var(--sourdine); }
.score-fiche strong { color: var(--navy); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.score-fiche span { font-size: 11px; line-height: 1.2; text-transform: uppercase; }
.fiche-opportunite-grille { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 28px; }
.fiche-opportunite-corps .surface-donnees:first-child { margin-top: 0; }
.decision-reperes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.decision-reperes div:nth-child(3n) { border-right: 0; }
.decision-reperes div:nth-child(-n+3) { border-bottom: 1px solid var(--bord); }
.liste-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.source-catalogue { padding: 14px 0; border-bottom: 1px solid var(--bord); }
.source-catalogue > div { display: flex; justify-content: space-between; gap: 16px; }
.source-catalogue > div span { color: var(--sourdine); font-size: 12px; }
.source-catalogue details { margin-top: 9px; }
.source-catalogue summary { cursor: pointer; color: var(--navy-clair); font-weight: 650; }
.preuves-liste { display: grid; gap: 7px; padding-left: 20px; color: var(--sourdine); font-size: 12.5px; }
.fiche-opportunite-lateral { display: grid; gap: 14px; align-content: start; }
.action-principale { border-top: 3px solid var(--navy); }
.action-principale .bouton { display: block; text-align: center; margin: 8px 0; }
.action-principale > .lien { display: block; margin-top: 14px; }
.controles-fiche ul { padding-left: 18px; }
.controle-bloquant { padding: 10px 12px; background: #fff5f4; border-left: 3px solid var(--rouge); }
.preuve-territoire { padding-top: 10px; border-top: 1px solid var(--bord); color: var(--sourdine); font-size: 12px; }
.decision-editoriale { border-top: 3px solid var(--ambre); }
.decision-editoriale .actions { align-items: flex-start; }

@media (max-width: 900px) {
  .preuve-commerciale, .fiche-opportunite-grille { grid-template-columns: 1fr; }
  .preuve-commerciale ol { grid-template-columns: repeat(2, 1fr); }
  .catalogue-champs { grid-template-columns: 1fr 1fr; }
  .champ-admin { padding-left: 0; border-left: 0; }
  .opportunite-reperes { grid-template-columns: 1fr 1fr; }
  .opportunite-reperes div:nth-child(2n) { border-right: 0; }
  .justification-classement, .points-verifier { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .catalogue-champs, .decision-reperes { grid-template-columns: 1fr; }
  .catalogue-actions, .catalogue-lot-barre, .fiche-opportunite-entete { align-items: stretch; flex-direction: column; }
  .catalogue-lot-barre .actions { margin-left: 0; }
  .opportunite-carte { grid-template-columns: 1fr; }
  .opportunite-selection { padding: 14px 16px 0; }
  .opportunite-haut { flex-direction: column; }
  .opportunite-carte h3 { margin-right: 0; }
  .rang-instruction, .score-fiche { justify-content: flex-start; }
  .opportunite-reperes div, .decision-reperes div {
    border-right: 0; border-bottom: 1px solid var(--bord);
  }
  .preuve-commerciale ol { grid-template-columns: 1fr 1fr; }
}

/* Veille : file de travail BES, par ce que chaque fiche attend encore */
.veille-groupe { margin: 18px 0 4px; font-size: 15px; }
.veille-groupe small { color: var(--sourdine); font-weight: 400; }
.veille-diffusees { margin-top: 18px; }
.veille-diffusees > summary { cursor: pointer; padding: 12px 0; }

/* Compte en consultation (maire, élus, direction). Le serveur refuse toute
   écriture ; masquer les formulaires évite d'en proposer une qu'il refusera.
   Les téléchargements restent visibles (data-consultation). */
.bandeau-consultation {
  margin: 0 0 18px; padding: 10px 14px; background: var(--carte);
  border: 1px solid var(--bord); border-left: 3px solid var(--navy-clair);
  border-radius: 4px; color: var(--navy); font-size: 14px;
}
body.consultation main form[method="post"]:not([data-consultation]),
body.consultation main a[href*="/nouveau"],
body.consultation main a[href*="/import"],
body.consultation main a[href*="/modifier"] { display: none; }
/* Un volet dépliable qui ne contient qu'un formulaire d'écriture disparaît
   avec lui, plutôt que de s'ouvrir sur un vide. */
body.consultation main details:has(> form[method="post"]:not([data-consultation])):not(:has(> :not(summary, form))) {
  display: none;
}