/* ==================================================================
   Compléments propres à l'application

   Se charge après prototype.css et n'en modifie jamais les règles :
   on n'ajoute ici que ce que le prototype ne couvrait pas, faute
   d'écrans d'authentification et de formulaires serveur.

   Toutes les couleurs viennent des variables de la charte.
   ================================================================== */

/* ---------- écrans publics : connexion, inscription, mot de passe ---------- */

.public {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--paper);
}

.carte {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--vert);
  border-radius: var(--r);
  box-shadow: 0 2px 10px rgba(11, 36, 23, .07);
  padding: 26px 28px 24px;
}

.carte .marque {
  margin-bottom: 22px;
}

.carte .marque b {
  display: block;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--vert-nuit);
}

/* le filet tricolore du logo, repris de la barre latérale */
.carte .marque .bar {
  display: flex;
  gap: 3px;
  margin: 7px 0 6px;
}

.carte .marque .bar i {
  height: 3px;
  flex: 1;
  border-radius: 2px;
}

.carte .marque .bar i:nth-child(1) { background: var(--vert); }
.carte .marque .bar i:nth-child(2) { background: var(--vert-clair); }
.carte .marque .bar i:nth-child(3) { background: var(--rouge); flex: 0 0 16px; }

.carte .marque span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  display: block;
}

.carte h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}

.carte .intro {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

.carte .liens {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

/* ---------- formulaires ---------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.champ label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 600;
}

.champ input[type=text],
.champ input[type=email],
.champ input[type=password] {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 8px 10px;
  background: var(--surface);
  font-size: 14px;
}

.champ input:focus {
  border-color: var(--vert);
  outline: 2px solid rgba(0, 150, 64, .18);
  outline-offset: 0;
}

.champ input[aria-invalid=true] {
  border-color: var(--rouge);
  background: #FFFBFB;
}

.champ .erreur {
  font-size: 12px;
  color: var(--down);
  font-weight: 500;
}

.champ .aide {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* suffixe de domaine collé au champ : l'inscription n'accepte que lui */
.champ .avec-suffixe {
  display: flex;
  align-items: stretch;
}

.champ .avec-suffixe input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 0;
}

.champ .avec-suffixe .suffixe {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-left: none;
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.bouton {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--vert);
  border: 1.5px solid var(--vert-fonce);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.bouton:hover { background: var(--vert-fonce); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

a {
  color: var(--vert-fonce);
  text-decoration: none;
  font-weight: 500;
}

a:hover { text-decoration: underline; }

/* ---------- messages ---------- */

.message {
  padding: 11px 14px;
  border-radius: var(--r);
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.45;
  border-left: 4px solid;
}

.message.succes { background: var(--ok-bg);   border-color: var(--vert);   color: var(--vert-fonce); }
.message.erreur { background: var(--down-bg); border-color: var(--rouge);  color: var(--down); }
.message.info   { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2); }
.message.alerte { background: var(--up-bg);   border-color: #D9A222;       color: #6E4B00; }

.message b { display: block; margin-bottom: 2px; }

.message ul { margin: 4px 0 0 16px; }

/* ---------- barre latérale : liens ---------- */

/* Le prototype utilisait des boutons ; l'application utilise de vrais liens,
   pour que le clic milieu, le survol et le retour arrière fonctionnent.
   On leur applique exactement le même habillage. */
.nav a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 20px;
  font-size: 13.5px;
  color: #C2D2C8;
  border-left: 3px solid transparent;
  text-decoration: none;
  font-weight: 400;
}

.nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
  text-decoration: none;
}

.nav a.on {
  color: #fff;
  background: rgba(0, 150, 64, .24);
  border-left-color: var(--vert-clair);
  font-weight: 600;
}

.nav.sous a {
  padding-left: 31px;
  font-size: 13px;
  color: #A9BEB2;
  position: relative;
}

.nav.sous a::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.nav.sous a.on::before { background: var(--vert-clair); }

.nav button[disabled] {
  opacity: .4;
  cursor: default;
}

/* ---------- onglets et pastilles rendus en liens ---------- */

/* Le prototype utilisait des boutons ; ici ce sont de vrais liens, pour que
   le clic milieu, le survol et le retour arrière fonctionnent. Habillage
   rigoureusement identique. */
.tabs a.onglet {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--r) var(--r) 0 0;
  text-decoration: none;
}

.tabs a.onglet:hover {
  background: var(--pine-soft);
  color: var(--vert-fonce);
  text-decoration: none;
}

.tabs a.onglet.on {
  color: #fff;
  background: var(--vert);
  border-bottom-color: var(--vert-nuit);
  font-weight: 700;
}

.tabs a.onglet.on .amt { color: rgba(255, 255, 255, .82); }

a.chip { text-decoration: none; color: inherit; }
a.chip:hover { text-decoration: none; }
a.chip.on { color: #fff; }

/* ---------- saisie ---------- */

.block.plie > header { border-bottom: 1px solid var(--line-strong); }

/* bouton « Recharger » du bandeau de conflit */
.toast button { font-weight: 600; }

/* ---------- barre latérale : pied de page ---------- */

.side .moi {
  padding: 12px 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  margin-top: auto;
}

.side .moi b {
  display: block;
  font-size: 12.5px;
  color: #D6E4DA;
  font-weight: 600;
  line-height: 1.3;
}

.side .moi span {
  display: block;
  font-size: 11px;
  color: #7C9789;
  margin-bottom: 8px;
}

.side .moi button {
  font-size: 12px;
  color: #A9BEB2;
  padding: 4px 0;
}

.side .moi button:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------- bandeau supérieur : identité ---------- */

.top .qui {
  text-align: right;
  font-size: 12.5px;
  line-height: 1.35;
}

.top .qui b { display: block; font-weight: 600; }
.top .qui span { color: var(--muted); font-size: 11.5px; }

/* ---------- page d'erreur d'autorisation ---------- */

.refus {
  max-width: 520px;
  margin: 60px auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--rouge);
  border-radius: var(--r);
  padding: 34px 28px;
}

.refus .ic { font-size: 38px; line-height: 1; color: var(--rouge); }
.refus h1 { font-size: 17px; margin: 12px 0 8px; }
.refus p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 820px) {
  .side .moi { padding-left: 8px; padding-right: 8px; text-align: center; }
  .side .moi b, .side .moi span { display: none; }
}

/* ==================================================================
   Largeurs de confort des blocs et des tableaux
   ==================================================================

   Les blocs du prototype épousent leur contenu (« width:max-content ») :
   un tableau de trois colonnes courtes n'a aucune raison de s'étaler.
   Mais coller au contenu laissait les blocs perdus dans un demi-écran de
   vide dès qu'on agrandissait la fenêtre.

   On leur donne donc une largeur qui suit la fenêtre, bornée des deux
   côtés :

     · le premier nombre — jamais plus étroit, même sur un petit écran ;
     · le pourcentage    — la part de fenêtre occupée entre les deux ;
     · le dernier nombre — jamais plus large.

   Ce dernier nombre compte autant que les autres. Un tableau de deux
   colonnes étiré sur 1 600 px place le montant à l'autre bout de l'écran,
   loin du libellé auquel il se rapporte : on lit en diagonale et on se
   trompe de ligne. La largeur utile dépend donc du nombre de colonnes,
   d'où les trois familles ci-dessous plutôt qu'une seule.

   Les petits tableaux de synthèse ne sont pas concernés : ils se rangent
   côte à côte dans une grille, qui remplit déjà la largeur. Leur imposer
   une largeur les empilerait au lieu de les juxtaposer.
   ================================================================== */

:root {
  --confort-large:   clamp(560px, 48vw,  900px);   /* deux à trois colonnes */
  --confort-moyen:   clamp(430px, 42vw,  780px);   /* encarts, récapitulatifs */
  --confort-tableau: clamp(700px, 72vw, 1400px);   /* cinq colonnes et plus */
}

/* Blocs de saisie et groupes de comptes : un libellé, un montant. */
.block,
.pgroup,
.wrap { width: min(var(--confort-large), 100%); min-width: 0; }

/* Deux colonnes, jamais plus : récapitulatif d'onglet et calcul de la CAF. */
.recap { width: min(var(--confort-moyen), 100%); }

/* Le tableau de la CAF est un élément flexible qui s'étire pour occuper sa
   rangée : lui fixer une largeur ne sert à rien, il faut le borner. */
.wrap.wcaf { max-width: min(var(--confort-moyen), 100%); }

/* Les tableaux déclarés « pleins » portent cinq à dix colonnes — arbitrage,
   comparatif par pôle, plan comptable.

   Leur largeur suit leur contenu, et s'arrête à la place disponible. Une
   part fixe de la fenêtre ne convenait ni dans un sens ni dans l'autre :
   elle étirait sans raison les tableaux étroits en plein écran, et elle
   coupait les larges — le comparatif par pôle réclamait 1 500 px et se
   voyait offrir 920 px, d'où une barre de défilement sur un écran qui
   avait pourtant la place. « scroll » ne sert plus que là où le contenu
   dépasse réellement l'écran. */
.wrap.plein { width: max-content; max-width: 100%; }

/* Sur un petit écran, la largeur disponible commande, pas le confort. */
@media (max-width: 820px) {
  .block, .wrap, .pgroup, .recap { width: 100%; min-width: 0; }
}

/* ==================================================================
   Reprise d'un budget : propositions à trancher
   ================================================================== */

.reprise .actrep{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.reprise .actrep select{
  font:inherit;font-size:13px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--violet);background:#fff;color:var(--ink)
}

/* Le bloc qui contient des propositions se signale sans crier. */
.block.brep{border-left:4px solid var(--violet)}

/* En-tête des deux colonnes de montants, au-dessus des propositions. */
.ledger tr.enrep td{
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:#5B3690;background:#F7F3FC;border-bottom:1px solid rgba(124,77,190,.3);
  padding:5px 11px
}
.ledger tr.enrep td.r{text-align:right}

/* Une proposition : fond teinté, montant d'origine à gauche du champ. */
.ledger tr.cpt.prop td{background:#F7F3FC}
.ledger tr.cpt.prop .clib{color:var(--ink)}
.ledger tr.cpt.prop .crepris{
  text-align:right;color:var(--muted);font-weight:600;white-space:nowrap;
  padding-right:11px
}
.ledger tr.cpt.prop .csum{padding-right:7px}
.ledger tr.cpt.prop .csum input{
  width:118px;text-align:right;border:1px solid var(--violet);background:#fff
}

/* La mission spécifique manquante, à choisir avant d'accepter. */
.msel{
  font:inherit;font-size:12px;padding:2px 7px;margin-left:9px;
  border:1px solid var(--violet);border-radius:7px;background:#fff;max-width:230px
}

/* Coche verte et croix rouge. Le même geste des deux côtés de l'écran. */
form.inl{display:inline}

.coche,.croix{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;border:1px solid transparent;
  font-size:13px;font-weight:800;line-height:1;cursor:pointer;
  vertical-align:-4px;margin-right:5px;padding:0
}
.coche{color:#fff;background:var(--vert);border-color:var(--vert-fonce)}
.coche:hover{background:var(--vert-fonce)}
.croix{color:#fff;background:var(--rouge);border-color:#B71C1C}
.croix:hover{background:#B71C1C}

/* Sur une ligne déjà acceptée, la croix ne doit pas attirer l'œil :
   elle sert rarement, et une suppression ne se propose pas d'elle-même. */
.retrait{margin-left:9px}
.croix.discret{
  width:19px;height:19px;font-size:11px;font-weight:700;margin-right:0;
  color:var(--rouge);background:transparent;border-color:var(--line-strong);opacity:.5
}
.croix.discret:hover{opacity:1;color:#fff;background:var(--rouge);border-color:#B71C1C}

/* ==================================================================
   Comptes retirés : information de contrôle, repliée par défaut
   ================================================================== */

.abandons{
  margin:16px 0;background:var(--surface);border:1px solid var(--line-strong);
  border-left:4px solid var(--rouge);border-radius:var(--r);padding:11px 15px;
  min-width:min(var(--confort-moyen),100%)
}
.abandons summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2);
  list-style:none;display:flex;align-items:center;gap:10px
}
.abandons summary::before{content:'▸';color:var(--rouge);font-size:11px}
.abandons[open] summary::before{content:'▾'}
.abandons summary::-webkit-details-marker{display:none}
.abandons summary .mono{margin-left:auto;color:var(--muted);font-weight:500}
.abandons table{margin-top:11px}
.abandons .hint{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.45}
.grid.petite th, .grid.petite td{font-size:12.5px;padding:5px 9px}

/* Libellé réservé aux lecteurs d'écran : présent dans le document, absent
   de l'affichage. Un « select » sans intitulé n'est pas annonçable. */
.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
}

/* ==================================================================
   Le zéro pointé — constat, pour ne pas refaire le tour
   ==================================================================

   IBM Plex Mono dessine son zéro avec un point au centre, pour le
   distinguer de la lettre O. Dans une colonne de montants, où aucune
   lettre ne voisine les chiffres, ce point n'apporte rien.

   « font-feature-settings: 'zero' 0 » a été essayé : la fonte livrée
   avec la charte ne porte pas cette variante, la règle restait sans
   effet. Inutile de la remettre.

   Le seul moyen d'obtenir un zéro nu est de changer de police pour les
   chiffres. Décommenter le bloc ci-dessous suffit : les montants passent
   à la police du texte en chasse tabulaire, ce qui conserve l'alignement
   des colonnes au pixel près. Ils ne sont alors plus en chasse fixe, ce
   qui ne se voit pas sur des montants alignés à droite.

   Laissé inactif : le client a jugé le point acceptable, et changer la
   police des montants est une entorse à la charte qui mérite d'être
   décidée, pas subie.
   ================================================================== */

/*
.mono {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
*/

/* ==================================================================
   Rappel d'une saisie ouverte sur un autre budget
   ================================================================== */

.rappel {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 11px 16px;
  background: var(--pine-soft);
  border: 1px solid var(--vert);
  border-left: 5px solid var(--vert);
  border-radius: var(--r);
  width: min(var(--confort-tableau), 100%);
}

.rappel .ic { font-size: 17px; color: var(--vert-fonce); }
.rappel > div { flex: 1; min-width: 240px; }
.rappel b { display: block; font-size: 14px; color: var(--vert-fonce); }
.rappel div { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.rappel .mini {
  background: var(--vert);
  border: 1.5px solid var(--vert-fonce);
  color: #fff;
  padding: 7px 14px;
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.rappel .mini:hover { background: var(--vert-fonce); text-decoration: none; }

/* ==================================================================
   Renommage sur place d'un poste ou d'un compte
   ==================================================================

   Le plan comptable arrive parfois sans libellé : treize postes ne
   portaient que leur propre code. Le champ doit donc être là en
   permanence, mais sans donner à l'écran l'air d'un formulaire — on ne
   vient pas sur cette page pour tout réécrire.

   Il ressemble donc à du texte tant qu'on ne le survole pas, se souligne
   au survol, s'encadre au clic. Le poste sans nom, lui, s'annonce en
   italique atténué : il se repère d'un coup d'œil dans la liste.
   ================================================================== */

form.renom { display: flex; min-width: 0; }

form.renom input[name=libelle] {
  font: inherit;
  width: 100%;
  min-width: 0;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: -6px;      /* le texte reste aligné sur les lignes voisines */
}

form.renom input[name=libelle]:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

form.renom input[name=libelle]:focus {
  border-color: var(--vert);
  background: var(--surface);
  outline: 2px solid rgba(0, 150, 64, .18);
  outline-offset: 0;
}

/* Dans l'en-tête vert du poste, l'inversion de couleurs s'applique aussi
   au champ, sinon il découpe un rectangle blanc dans le bandeau. */
.pgroup > header form.renom {
  flex: 1;
  min-width: 0;
  margin-right: 10px;
}

.pgroup > header form.renom input[name=libelle] {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .9);
}

.pgroup > header form.renom input[name=libelle]::placeholder {
  color: rgba(255, 255, 255, .55);
}

.pgroup > header form.renom input[name=libelle]:hover,
.pgroup > header form.renom input[name=libelle]:focus {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

/* Un poste dont le libellé n'est que son code : à nommer. */
.pgroup > header form.renom input.sansnom {
  font-style: italic;
  color: rgba(255, 255, 255, .6);
  border-color: rgba(255, 255, 255, .35);
  border-style: dashed;
}

.pgroup li form.renom input[name=libelle] { font-size: 13.5px; }
.pgroup li.locked form.renom input[name=libelle] { color: var(--muted); }

/* ==================================================================
   Bandeau de chiffres de l'arbitrage
   ==================================================================

   Trois tuiles pour la mission arbitrée, une pour le pôle entier. Cette
   dernière ne se rapporte pas à la mission affichée : elle est séparée
   par un filet, sans quoi on la lirait comme un quatrième chiffre de la
   mission en cours.
   ================================================================== */

.chiffres-arbitrage { margin-bottom: 18px; }

.chiffres-arbitrage .kpi span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chiffres-arbitrage .kpi b { font-size: 19px; }

.chiffres-arbitrage .kpi.apart {
  border-left: 4px solid var(--vert-nuit);
  background: var(--surface-2);
}

/* La mission budgétaire de la fenêtre d'ajout n'est pas un choix : elle
   s'affiche comme un fait, pas comme un champ. */
.modal .opts p.fige {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 0 2px;
}

.modal .opts p.fige .mono {
  font-weight: 400;
  color: var(--muted);
  margin-left: 7px;
}

.modal .opts p.hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Raccourci « + » sur une ligne de compte, à l'arbitrage : discret tant
   qu'on ne le cherche pas, franc au survol. */
.grid .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-left: 9px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--vert-fonce);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -3px;
  opacity: .45;
}

.grid tr:hover .plus { opacity: 1; }

.grid .plus:hover {
  color: #fff;
  background: var(--vert);
  border-color: var(--vert-fonce);
}

/* Le montant est la dernière étape : elle reste toujours ouverte, sinon
   on ne saurait pas qu'il faut le saisir. */
#fenetreLigneDirection [data-etape="4"] { border-top: 1px solid var(--line); }

/* ==================================================================
   Cascade : une étape choisie se replie sur son résultat
   ==================================================================

   Les trois listes ouvertes en même temps donnaient une fenêtre plus
   haute que l'écran : on ne voyait ni ce qu'on venait de choisir, ni le
   bouton de validation. Chaque étape tranchée se referme donc sur un
   résumé, et se rouvre d'un clic sur son en-tête.
   ================================================================== */

.mstep.replie { padding: 9px 0; }
.mstep.replie .mhead { margin-bottom: 0; cursor: pointer; }

/* Choisie, donc franchie : la pastille passe au vert plein. */
.mstep.replie .mhead .num { background: var(--vert); }

.mstep.replie .mhead > div > b { color: var(--muted); font-weight: 500; }

.mhead .choisi {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-left: auto;
  min-width: 0;
  font-size: 13px;
}

.mhead .choisi .v {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mhead .choisi .c { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }

.mhead .choisi .modif {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--vert-fonce);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-left: 2px;
  opacity: 0;
}

.mstep.replie .mhead:hover .choisi .modif,
.mstep.replie .mhead:focus-visible .choisi .modif { opacity: 1; }
.mstep.replie .mhead:hover { background: var(--surface-2); border-radius: var(--r); }

/* ==================================================================
   Compteur d'imputation de la TAFNB
   ==================================================================

   Il vient sous les chiffres de la mission, sur le seul onglet TAFNB.
   La première tuile porte un champ : l'enveloppe notifiée se saisit là
   où l'on regarde le reste à répartir.
   ================================================================== */

.tafnb-compteur { margin: -4px 0 18px; }

.tafnb-compteur .kpi b { font-size: 19px; }

.tafnb-compteur .saisie-enveloppe { border-top-color: var(--vert-nuit); }

.tafnb-compteur .saisie-enveloppe form {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.tafnb-compteur .saisie-enveloppe input {
  width: 118px;
  text-align: right;
  font-size: 17px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
}

.tafnb-compteur .saisie-enveloppe input:focus {
  border-color: var(--vert);
  outline: 2px solid rgba(0, 150, 64, .18);
}

/* Le reste à imputer se lit d'abord : c'est le seul chiffre qui dise si
   l'équilibrage est terminé. */
.tafnb-compteur .kpi.apart {
  border-left: 4px solid var(--vert-nuit);
  background: var(--surface-2);
}


/* ==================================================================
   Mode essai — le bac à sable

   L'essai a exactement les mêmes écrans que le vrai budget : c'est ce
   qui en fait un terrain d'entraînement utile, et c'est aussi ce qui le
   rend dangereux. Rien n'empêcherait d'y saisir pour de bon.

   D'où le basculement de toute la palette, plutôt qu'une pastille dans
   un coin. Les couleurs institutionnelles sont redéfinies en orange
   pour cette page-là : la barre latérale, les en-têtes de tableaux, les
   boutons, les onglets actifs — tout ce qui était vert vire, sans
   qu'aucune règle d'affichage ait été touchée. On ne peut pas confondre
   les deux écrans, même du coin de l'œil.

   Le rouge et le vert des résultats ne bougent pas : un déficit reste
   un déficit, et l'essai sert justement à le lire.
   ================================================================== */

body.essai {
  --vert:        #E07A00;
  --vert-fonce:  #A85800;
  --vert-nuit:   #2B1A05;
  --vert-clair:  #F0A830;
  --pine:        var(--vert-fonce);
  --pine-soft:   #FCEBD2;
  --pine-mid:    var(--vert);
  --paper:       #FAF5EE;
  --surface-2:   #FDF8F1;
  --line:        #E0D2BF;
  --line-strong: #C2A87F;
}

/* Bandeau permanent : il ne se referme pas, c'est le principe. */
.bandeau-essai {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 22px;
  background: var(--vert-fonce);
  color: #fff;
  font-size: 13px;
  border-bottom: 3px solid var(--vert-clair);
}

.bandeau-essai b {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11.5px;
  background: var(--vert-clair);
  color: #2B1A05;
  padding: 3px 9px;
  border-radius: var(--r);
  white-space: nowrap;
}

.bandeau-essai span { flex: 1; min-width: 240px; opacity: .95 }

.bandeau-essai .mini {
  background: #fff;
  color: var(--vert-fonce);
  border-color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

/* Le bloc du bac à sable, dans le bandeau de pilotage du cycle. */
.essai-bloc {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--line-strong);
}

.essai-texte { flex: 1; min-width: 260px; font-size: 12.5px; color: var(--ink-2) }
.essai-texte b { color: var(--ink) }

.essai-depart { display: flex; gap: 8px; align-items: center }
.essai-depart select { font-size: 12.5px; padding: 5px 8px }

/* ==================================================================
   Financeurs — référentiel partagé
   ================================================================== */

.ajout-financeur,
.ajout-convention {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px 14px;
}

.ajout-financeur label { font-size: 12.5px; font-weight: 600; color: var(--ink-2) }
.ajout-financeur input { flex: 1; min-width: 220px }
.ajout-convention { border-top: 1px dashed var(--line); background: var(--surface-2) }
.ajout-convention input { flex: 1; min-width: 130px }
.ajout-convention input[name="libelle"] { flex: 2; min-width: 200px }

.financeur .fin-tete {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--pine-soft);
  border-bottom: 1px solid var(--line);
}

.financeur .fin-tete b { font-size: 14px; color: var(--vert-fonce) }
.financeur .fin-compte { flex: 1; font-size: 12px; color: var(--muted) }

/* Un financeur mis de côté reste lisible, mais s'efface visuellement :
   il raconte le passé, il ne sert plus à saisir. */
.range { opacity: .55 }
.range .fin-tete { background: var(--surface-2) }

/* Le fléchage, à côté du libellé de l'opération. */
.op-lib { display: flex; align-items: center; gap: 8px }
.op-lib input { flex: 1; min-width: 0 }

select.fleche {
  flex: 0 1 190px;
  min-width: 118px;
  font-size: 12px;
  padding: 4px 6px;
  color: var(--ink-2);
}

/* Non fléchée : le menu s'efface, pour que les opérations rattachées se
   repèrent d'un coup d'œil dans une colonne qui en compte trente. */
select.fleche:not(:has(option:checked[value]:not([value=""]))) {
  color: var(--muted);
  border-style: dashed;
}

.fleche-lu {
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 8px;
  margin-left: 8px;
  white-space: nowrap;
}

.financeur-bloc { margin-bottom: 18px }
.financeur-bloc .fin-tete .badge { white-space: nowrap }
.muted { color: var(--muted); font-weight: 400; font-size: 12px }

input.abr { flex: 0 0 110px; min-width: 80px; text-transform: uppercase }
.abr-form { display: flex; gap: 6px; align-items: center }

/* ------------------------------------------------------------------
   Plan de financement : tout ce qui est détail arrive replié.

   Une convention se lit d'abord à ses totaux ; on ne descend dans les
   missions et les comptes que si le solde interroge. Sur un budget
   entier la page tiendrait autrement sur plusieurs écrans, et
   l'essentiel — qui verse quoi, et reste-t-il de l'argent — se perdrait
   dans le détail.

   « details » plutôt qu'un script : le repli est natif, il fonctionne
   sans JavaScript et le navigateur sait déjà l'annoncer aux outils
   d'accessibilité.
   ------------------------------------------------------------------ */

.convention { border-top: 1px solid var(--line) }
.convention:first-of-type { border-top: none }

.convention > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px 9px 8px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.convention > summary::-webkit-details-marker { display: none }

/* Le chevron, dessiné en CSS : il pivote à l'ouverture. */
.convention > summary::before {
  content: '▸';
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--vert-fonce);
  transition: transform .15s;
}

.convention[open] > summary::before { transform: rotate(90deg) }
.convention > summary:hover { background: var(--surface-2) }
.convention[open] > summary { background: var(--pine-soft); font-weight: 600 }

.convention .cv-nom { flex: 1; min-width: 180px }
.convention .cv-chiffres { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.convention .cv-chiffres .muted { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em }

/* Les deux axes de lecture, côte à côte quand la place le permet. */
.cv-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  padding: 4px 14px 16px 30px;
  background: var(--surface-2);
}

.cv-axe h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}

.cv-axe table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }

.fin-pied {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #FCE94F;
  border-top: 2px solid var(--ink);
  font-weight: 800;
}

.fin-pied > span:first-child { flex: 1 }
.fin-pied .mono { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.fin-pied .muted { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700 }
.fin-pied .ben { color: var(--vert-fonce) }
.fin-pied .def { color: var(--down) }

.sans-financeur > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.sans-financeur > summary::-webkit-details-marker { display: none }
.sans-financeur > summary::before { content: '▸'; color: var(--vert-fonce) }
.sans-financeur[open] > summary::before { content: '▾' }
.sans-financeur > summary:hover { background: var(--surface-2) }
.sans-financeur .note { padding: 0 14px }

.cv-chiffres .ben, .cv-detail .ben { color: var(--vert-fonce) }
.cv-chiffres .def, .cv-detail .def { color: var(--down) }