/* Outil d'analyse financière — feuille de style unique, sans dépendance.
   Outil de saisie intensive : tableaux denses, en-têtes figés, contrastes
   francs, rien de décoratif qui coûte de la place. */

/* Palette reprise de l'identite de 2beapart (www.2beapart.com), relevee dans
   le CSS de leur theme le 28 octobre 2026. Leurs valeurs exactes :
     bleu principal   #6FBBD6   (leur --main-color)
     anthracite       #1F1F1F / #2A2A2A  (leur « anthracite urbain »)
     blanc casse      #F7F7F5
     beiges           #E7E3DE  #F2EEE8  #D9D1C6
     gris             #A3A4A4

   DEUX ECARTS ASSUMES, pour la lisibilite d'un outil de saisie :

   1. Leur bleu #6FBBD6 est clair : 2,15:1 seulement, que ce soit en texte sur
      blanc ou en texte blanc pose dessus. Illisible dans les deux sens. Il sert
      donc aux aplats, aux filets et au soulignement de l'onglet actif, JAMAIS au
      texte. Pour le texte et la barre, on prend --accent #2A7892, un bleu de
      leur propre famille, assombri jusqu'a passer le seuil AA.
   2. Leur gris #A3A4A4 ne fait que 2,50:1 sur blanc : inutilisable pour les
      mentions discretes, qui sont nombreuses dans cet outil. Assombri a
      #5C5F61 en gardant la meme teinte neutre.

   Contrastes mesures sur le fond reel #F7F7F5, et non sur du blanc — nuance qui
   avait d'abord fait retenir un accent trop clair :
      texte #1F1F1F                 15,37:1   AAA
      mention discrete #5C5F61       6,00:1   AA
      lien / accent #2A7892          4,66:1   AA
      texte blanc sur la barre       5,00:1   AA
      vert #2F6B3F sur blanc         6,37:1   AA
      rouge #B3261E sur blanc        6,54:1   AA
      ambre #8A5A12 sur blanc        5,91:1   AA

   Le vert et le rouge gardent leur seul role : dire si une evolution est
   favorable. Leur teinte les separe franchement du bleu d'accent ; et comme la
   couleur n'est jamais le seul signal — les evolutions portent aussi une fleche
   et un signe —, une cellule en alerte reste lisible sans distinguer les
   teintes. */
:root {
  --fond: #f7f7f5;          /* leur blanc casse */
  --fond-carte: #ffffff;
  --texte: #1f1f1f;         /* leur anthracite */
  --texte-discret: #5c5f61; /* leur gris, assombri pour le contraste */
  --bord: #e7e3de;          /* leur beige */
  --bord-fort: #d9d1c6;
  --accent: #2a7892;        /* bleu lisible, pour la barre, les liens */
  --accent-fort: #1f5f75;
  --accent-clair: #eaf4f8;
  --accent-vif: #6fbbd6;    /* LEUR bleu : aplats, filets, onglet actif */
  --vert: #2f6b3f;
  --vert-clair: #eaf2ec;
  --rouge: #b3261e;
  --rouge-clair: #fbeceb;
  --ambre: #8a5a12;
  --ambre-clair: #fbf3e4;
  --section: #efede9;
  /* Couleur de reperage du dossier courant ; l'accent par defaut. */
  --couleur-client: var(--accent);
}

/* Titres en serif, comme chez eux : ils emploient Playfair Display. La CSP de
   l'application est « default-src 'self' » — aucune police distante, et aucun
   fichier de police a embarquer n'a ete juge necessaire (« choisis en une
   proche, va au plus simple », 28 octobre 2026). Georgia est present partout
   et appartient a la meme famille d'allure : serif a fort contraste, chiffres
   lisibles. */
h1, h2, h3, .logo, .carte-connexion h1 {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  letter-spacing: -0.01em;
}

/* L'onglet actif est souligne de LEUR bleu : c'est la ou leur couleur se voit
   le mieux sans jamais passer sous du texte. */
.onglets a.actif { border-bottom-color: var(--accent-vif); }

/* Couleurs de repérage des dossiers — liste fermée, toutes dans la même
   famille pour rester harmonieuses entre elles (voir lib/couleurs.js). */
.couleur-terracotta { --couleur-client: #a6543b; }
.couleur-ambre      { --couleur-client: #c68a4e; }
.couleur-ocre       { --couleur-client: #a98a3c; }
.couleur-olive      { --couleur-client: #7d8c4a; }
.couleur-sauge      { --couleur-client: #5f8266; }
.couleur-ardoise    { --couleur-client: #4f6b82; }
.couleur-prune      { --couleur-client: #7d5570; }
.couleur-brun       { --couleur-client: #7a5c45; }

* { box-sizing: border-box; }

/* L'attribut « hidden » doit toujours gagner : une simple regle de classe
   (« input.note { display: block } ») a une specificite superieure a la regle
   du navigateur et reaffiche un element pourtant marque cache. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15.5px/1.5 "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

main { padding: 16px 20px 64px; max-width: 100%; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--bord); }
h3 { font-size: 14px; margin: 18px 0 6px; }

a { color: var(--accent); }
code { background: var(--accent-clair); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

/* --- Barre supérieure --------------------------------------------------- */
.barre {
  display: flex; align-items: center; gap: 14px;
  background: var(--accent); color: #fff; padding: 8px 20px;
}
/* Filet de repérage du dossier : discret, mais suffisant pour savoir d'un coup
   d'œil chez quel client on se trouve. */
.filet-client { height: 4px; background: var(--couleur-client); }
.pastille {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--couleur-client); margin-right: 7px; vertical-align: 1px;
}
.barre a { color: #fff; text-decoration: none; }
.barre a:hover { text-decoration: underline; }
.barre .logo { font-weight: 600; }
.barre .espace { flex: 1; }
.barre .qui { opacity: .8; font-size: 13px; }
.barre button.lien { color: #fff; }

.fil { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.fil .sep { color: var(--texte-discret); }

/* --- Onglets ------------------------------------------------------------ */
.onglets { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--bord); }
.onglets a {
  padding: 7px 12px; text-decoration: none; font-size: 13px;
  border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0;
  color: var(--texte-discret);
}
.onglets a:hover { background: var(--accent-clair); color: var(--accent); }
.onglets a.actif {
  background: var(--fond-carte); border-color: var(--bord); color: var(--texte);
  font-weight: 600; box-shadow: inset 0 3px 0 var(--couleur-client);
}

/* --- Messages ---------------------------------------------------------- */
.message, .erreur, .bandeau {
  padding: 9px 12px; border-radius: 4px; margin: 0 0 12px; font-size: 13px;
  border: 1px solid var(--bord);
}
.message { background: var(--accent-clair); border-color: #c4d4e8; }
.message.ok-bloc { background: var(--vert-clair); border-color: #bcdcc8; }
.erreur { background: var(--rouge-clair); border-color: #edc4c1; color: var(--rouge); }
.bandeau { display: flex; align-items: center; gap: 12px; background: var(--fond-carte); }
.bandeau-annualise { background: var(--ambre-clair); border-color: #e8d3a3; }
.aide { color: var(--texte-discret); font-size: 13px; margin: 4px 0 12px; max-width: 95ch; }
.discret { color: var(--texte-discret); font-size: 12px; }
.notes { white-space: pre-wrap; background: var(--fond-carte); border: 1px solid var(--bord); padding: 10px; border-radius: 4px; }

/* --- Tableaux ---------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 4px; }
/* Largeur dictee par le contenu, et non par l'ecran : des colonnes etirees
   eloignent les chiffres les uns des autres et imposent des allers-retours du
   regard (retour du 7 octobre 2026). */
table { border-collapse: collapse; width: auto; font-size: 14.5px; }
.tableau-defilant { display: inline-block; max-width: 100%; vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--section); text-align: left; font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--bord-fort); white-space: nowrap;
}
thead th.num { text-align: right; }
.sous-titre { display: block; font-weight: 400; font-size: 11px; color: var(--texte-discret); }
td, tbody th { padding: 3px 10px; border-bottom: 1px solid #eceff2; vertical-align: top; }
tbody th { text-align: left; font-weight: 400; }
tbody tr:hover > * { background: #fafcff; }
.num {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* Les montants sont l'information principale : ils portent la graisse. */
td.etat, td.num { font-weight: 500; }
.centre { text-align: center; }
.rang { color: var(--texte-discret); font-size: 11px; text-align: right; width: 2.5em; }
.poste { min-width: 19em; max-width: 34em; }
.vide { color: #a8b0b8; }
.neg { color: var(--rouge); }
.pos { color: var(--vert); }

tr.section > td {
  background: var(--section); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--texte-discret);
  padding: 7px 8px;
}
tr.detail > th, tr.detail > td { color: var(--texte-discret); }
tr.solde > th, tr.solde > td { font-weight: 600; background: #f3f6fa; border-top: 1px solid var(--bord); }
tr.solde:hover > * { background: #eef3f9; }
.signe { display: inline-block; width: 1em; color: var(--texte-discret); }

/* Cellule d'état : montant, part, écart.
   Les parts et les écarts sont des informations secondaires : repliés par
   défaut, ils laissent les montants seuls et les lignes se resserrent. */
td.etat .part, td.etat .ecart { display: block; font-size: 12px; color: var(--texte-discret); font-weight: 400; }
body.masquer-details .detail-sec { display: none !important; }
body.masquer-details td.etat { padding-top: 2px; padding-bottom: 2px; }
td.etat .part.ok { color: var(--vert); }
td.etat .part.ko { color: var(--rouge); }

/* --- Cellules de saisie ------------------------------------------------ */
td.cellule { position: relative; padding: 2px 4px; }
/* `montant-ajout` partage l'apparence de `montant` mais PAS son comportement :
   les champs de la ligne d'ajout ne sont pas des cellules enregistrées au vol.
   Les confondre faisait tenter un enregistrement sur une ligne qui n'existe pas
   encore, et marquait le champ en rouge (14 octobre 2026). */
input.montant, input.montant-ajout {
  width: 100%; min-width: 7.5em; text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 500;
  border: 1px solid transparent; background: transparent; padding: 4px 5px;
  border-radius: 3px; font-size: inherit; font-family: inherit; color: inherit;
}
/* Une cellule qui contient un calcul le signale par un liseré, sans occuper
   de place : l'expression elle-même apparaît au clic dans le champ. */
td.cellule.est-calcul input.montant { border-left: 2px solid var(--accent); }
input.montant:hover, input.montant-ajout:hover { border-color: var(--bord); }
input.montant:focus, input.montant-ajout:focus { border-color: var(--accent); background: #fff; outline: 2px solid var(--accent-clair); }
input.montant.invalide { border-color: var(--rouge); background: var(--rouge-clair); }
/* Le bouton de note ne se montre qu'au survol de la cellule, ou lorsqu'une
   note existe. Il servait sur deux cellules sur cent pour un encombrement
   permanent (retour du 7 octobre 2026). */
.note-bouton {
  position: absolute; top: 4px; left: 1px; border: none; background: none;
  color: #c2cad2; cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
td.cellule:hover .note-bouton, td.cellule:focus-within .note-bouton { opacity: 1; }
.note-bouton:hover { color: var(--accent); }
td.cellule.a-note .note-bouton { opacity: 1; color: var(--ambre); }
input.note {
  display: block; width: 100%; margin-top: 2px; font-size: 11px;
  border: 1px solid var(--bord); border-radius: 3px; padding: 2px 4px;
}
input.compte, input.denom, select, input.mini {
  font: inherit; font-size: 13px; border: 1px solid var(--bord); border-radius: 3px;
  padding: 2px 4px; background: #fff; color: inherit; max-width: 100%;
}
input.denom { width: 100%; min-width: 16em; }
input.mini { text-align: right; }
select { font-size: 12px; }
.invalide { border-color: var(--rouge) !important; background: var(--rouge-clair) !important; }

/* Colonnes de paramétrage des charges : réglées une fois, masquées ensuite. */
body.masquer-parametrage .col-param { display: none; }

/* Colonnes des charges, masquables une par une (14 octobre 2026). */
body.masquer-col-compte .col-compte { display: none; }
body.masquer-col-douze .col-douze { display: none; }
body.masquer-col-echeance .col-echeance { display: none; }
body.masquer-col-ratt .col-ratt { display: none; }
body.masquer-col-cvcf .col-cvcf { display: none; }
body.masquer-col-cdci .col-cdci { display: none; }
.replis {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin: 0 0 10px; font-size: 13px; color: var(--texte-discret);
}
.replis label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

td.actions { white-space: nowrap; }
td.actions .lien { font-size: 13px; padding: 0 3px; }

/* --- Formulaires ------------------------------------------------------- */
.formulaire-ligne, .barre-outils {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 4px; padding: 12px; margin: 12px 0;
}
.formulaire { background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 4px; padding: 14px; max-width: 60ch; }
.formulaire label, .formulaire-ligne label, .barre-outils label {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texte-discret);
}
.formulaire label { margin-bottom: 12px; }
.formulaire input, .formulaire textarea, .formulaire select,
.formulaire-ligne input, .formulaire-ligne select, .barre-outils input {
  font: inherit; padding: 5px 7px; border: 1px solid var(--bord-fort);
  border-radius: 3px; background: #fff; color: var(--texte);
}
.formulaire input, .formulaire textarea { width: 100%; }
label.case { flex-direction: row; align-items: center; gap: 5px; }
.formulaire .aide { font-size: 11px; margin: 2px 0 0; }

button, .bouton-mini {
  font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 3px; text-decoration: none; display: inline-block;
}
button:hover, .bouton-mini:hover { filter: brightness(1.08); }
.bouton-mini { padding: 3px 8px; font-size: 12px; background: var(--fond-carte); color: var(--accent); border-color: var(--bord-fort); }
button.lien { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }
button.danger, button.lien.danger { color: var(--rouge); }
button.danger { background: var(--fond-carte); border-color: var(--rouge); }
.danger-titre { color: var(--rouge); }
form.inline { display: inline; }

.etiquette {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--section); color: var(--texte-discret); border: 1px solid var(--bord);
  border-radius: 3px; padding: 0 4px; margin-left: 5px; vertical-align: middle;
}
.etiquette.corrige { background: var(--ambre-clair); color: var(--ambre); border-color: #e8d3a3; }
.sous-titre.corrige { color: var(--ambre); }
.ok { color: var(--vert); }
.ko { color: var(--rouge); }
/* Montants dont le signe négatif ne porte AUCUN jugement : un BFR négatif est
   courant et plutôt favorable, un endettement net négatif signifie une
   trésorerie excédentaire. Le rouge reste réservé à ce qui est défavorable, et
   l'absence de couleur ne dit rien (demandé le 15 octobre 2026). */
.sans-jugement .neg, .sans-jugement .pos { color: inherit; }
tr.ko-ligne > td { background: var(--rouge-clair); }

/* Bandeau de perte de connexion : l'accès passe par un tunnel SSH, et une page
   d'erreur de navigateur n'explique rien. Celui-ci explique, et disparaît de
   lui-même au retour (20 octobre 2026). Il est fixé en haut pour être vu où
   qu'on se trouve dans la page, et ne s'imprime pas. */
.bandeau-tunnel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--rouge-clair); color: var(--rouge);
  border-bottom: 2px solid var(--rouge);
  padding: 8px 14px; font-size: 13px; text-align: center;
}
.bandeau-tunnel[hidden] { display: none; }

.etat-enregistrement { font-size: 12px; color: var(--texte-discret); min-height: 1.4em; margin: 6px 0 0; }
.etat-enregistrement.ok { color: var(--vert); }
.etat-enregistrement.ko { color: var(--rouge); font-weight: 600; }

.carte-connexion {
  max-width: 34ch; margin: 8vh auto; background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: 6px; padding: 24px;
}
.carte-connexion h1 { margin-bottom: 12px; }
.carte-connexion label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 12px; color: var(--texte-discret); }
.carte-connexion input { font: inherit; padding: 7px; border: 1px solid var(--bord-fort); border-radius: 3px; }
.carte-connexion button { width: 100%; padding: 8px; }

.champ-nuancier { margin-bottom: 12px; }
.etiquette-champ { display: block; font-size: 12px; color: var(--texte-discret); margin-bottom: 5px; }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nuancier label {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--texte-discret); cursor: pointer; width: 4.6em;
}
.nuancier input { position: absolute; opacity: 0; width: 0; height: 0; }
.nuancier .echantillon {
  width: 2.1em; height: 2.1em; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--bord-fort);
}
.nuancier input:checked + .echantillon { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); }
.nuancier input:focus-visible + .echantillon { outline: 2px solid var(--accent); outline-offset: 2px; }
.nuancier .echantillon.aucune { background: var(--fond-carte); position: relative; }
.nuancier .echantillon.aucune::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 45%;
  border-top: 1px solid var(--bord-fort); transform: rotate(-45deg);
}

.nuancier .echantillon.terracotta { background: #a6543b; }
.nuancier .echantillon.ambre      { background: #c68a4e; }
.nuancier .echantillon.ocre       { background: #a98a3c; }
.nuancier .echantillon.olive      { background: #7d8c4a; }
.nuancier .echantillon.sauge      { background: #5f8266; }
.nuancier .echantillon.ardoise    { background: #4f6b82; }
.nuancier .echantillon.prune      { background: #7d5570; }
.nuancier .echantillon.brun       { background: #7a5c45; }

.liste .nom-dossier { font-weight: 600; text-decoration: none; }
.liste .nom-dossier:hover { text-decoration: underline; }
.controles-inline { margin-top: 18px; }

/* --- Synthèse ----------------------------------------------------------
   C'est l'écran susceptible d'être montré au client : il porte plus de poids
   visuel que les écrans de travail. */
table.synthese { font-size: 15px; }
table.synthese tbody th { font-weight: 500; }
table.synthese td.etat { font-size: 16px; font-weight: 600; }
table.synthese tbody tr:nth-child(odd) > * { background: #fbfcfd; }
table.synthese tbody tr:hover > * { background: var(--accent-clair); }

.fleche {
  display: inline-block; margin-left: 7px; font-size: 15px; font-weight: 700;
  line-height: 1; vertical-align: -1px;
}
.fleche.favorable { color: var(--vert); }
.fleche.defavorable { color: var(--rouge); }
.fleche.neutre { color: var(--texte-discret); }
.fleche.stable { color: #b9c2cb; font-weight: 400; }

.encart-commentaire { margin-top: 18px; max-width: 95ch; }
.encart-commentaire textarea {
  width: 100%; font: inherit; font-size: 14.5px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--bord);
  border-radius: 4px; background: var(--fond-carte); color: var(--texte);
  resize: vertical;
}
.encart-commentaire textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-clair); }

/* --- Valorisation ------------------------------------------------------- */
.sous-onglets { margin-top: -4px; margin-bottom: 14px; font-size: 13px; }
.sous-onglets a { padding: 5px 10px; }

/* La fourchette est le résultat : elle doit se lire d'un coup d'œil, et porter
   le fait qu'il s'agit d'un intervalle et non d'un prix. */
.fourchette {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-top: 3px solid var(--accent); border-radius: 4px;
  padding: 20px 24px; margin: 4px 0 12px; flex-wrap: wrap;
}
.fourchette .borne { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fourchette .borne-libelle {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-discret);
}
.fourchette .borne-valeur {
  font-size: 30px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fourchette .borne-separateur { color: var(--texte-discret); font-size: 15px; }

.precautions {
  background: var(--section); border: 1px solid var(--bord);
  border-left: 3px solid var(--ambre); border-radius: 4px;
  padding: 12px 18px; margin: 20px 0; max-width: 95ch; font-size: 13.5px;
}
.precautions h3 { margin-top: 0; }
.precautions ul { margin: 6px 0 0; padding-left: 20px; }
.precautions li { margin-bottom: 4px; }

.ligne-champ { display: inline-flex; align-items: center; gap: 5px; }
.ligne-champ .unite { color: var(--texte-discret); font-size: 12px; }
.formulaire-ligne label .aide { font-size: 11px; margin: 2px 0 0; max-width: 34ch; }

/* --- Impression -------------------------------------------------------- */
.entete-impression { margin-bottom: 18px; }
.entete-impression h1 { font-size: 22px; }
.mention { background: var(--ambre-clair); border: 1px solid #e8d3a3; padding: 6px 10px; border-radius: 4px; font-size: 13px; }

@media print {
  .barre, .onglets, .fil, .bandeau, .ecran-seulement, .etat-enregistrement { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  main { padding: 0; }
  .tableau-defilant { overflow: visible; border: none; }
  .page-impression { break-after: page; }
  .page-impression:last-child { break-after: auto; }
  thead { display: table-header-group; }   /* en-têtes répétés sur les tableaux longs */
  tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  /* Le document remis au client porte l'identité du cabinet (choix du
     8 octobre 2026) : les couleurs sont donc conservées à l'impression.
     « Microsoft Print to PDF » les restitue fidèlement. */
  .neg { font-weight: 600; }   /* reste repérable même imprimé en noir et blanc */
  .entete-impression { border-bottom: 3px solid var(--accent); padding-bottom: 10px; }
  .entete-impression h1 { color: var(--accent); }
  .page-impression h2 {
    color: var(--accent); border-bottom: 1px solid var(--bord-fort); padding-bottom: 3px;
  }
  thead th { background: var(--section) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.solde > th, tr.solde > td { background: var(--accent-clair) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fleche, .neg, .pos, .ok, .ko { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .encart-commentaire textarea {
    border: none; padding: 0; resize: none; background: transparent;
    height: auto; overflow: visible;
  }
  .replis, .sous-onglets { display: none !important; }
  /* La fourchette est le cœur du document remis : elle garde son relief. */
  .fourchette { border: 1px solid var(--bord-fort); border-top: 3px solid var(--accent); page-break-inside: avoid; }
  .fourchette .borne-valeur { font-size: 22pt; }
  .precautions { border: 1px solid var(--bord-fort); border-left: 3px solid var(--ambre); page-break-inside: avoid; }
}

/* --- Thème sombre ------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Gris neutres, legerement bleutes, dans la famille de l'identite.
       Sur fond sombre les roles s'inversent : c'est LEUR bleu #6FBBD6 qui
       devient lisible en texte (8,0:1 sur #16191c), alors qu'il etait
       inutilisable sur fond clair. Il reprend donc sa place d'accent. */
    --fond: #16191c; --fond-carte: #1d2125; --texte: #e8eaec; --texte-discret: #a2a9ad;
    --bord: #2e343a; --bord-fort: #434b52;
    --accent: #6fbbd6; --accent-fort: #93cee2; --accent-clair: #1d2e36;
    --accent-vif: #6fbbd6;
    --vert: #7fc08f; --vert-clair: #1b2a1f; --rouge: #e8928b; --rouge-clair: #2f1f1e;
    --ambre: #d9ab6a; --ambre-clair: #2d2519; --section: #212529;
    --couleur-client: var(--accent);
  }
  /* Les couleurs de repérage s'éclaircissent pour rester lisibles sur fond sombre. */
  .couleur-terracotta { --couleur-client: #cf7c5e; }
  .couleur-ambre      { --couleur-client: #dda868; }
  .couleur-ocre       { --couleur-client: #c7a757; }
  .couleur-olive      { --couleur-client: #9fae6a; }
  .couleur-sauge      { --couleur-client: #84a88a; }
  .couleur-ardoise    { --couleur-client: #7c9bb4; }
  .couleur-prune      { --couleur-client: #a97b9c; }
  .couleur-brun       { --couleur-client: #a98063; }
  .barre { background: #101315; }
  input.montant:focus, input.compte, input.denom, select, input.mini,
  .formulaire input, .formulaire textarea, .formulaire select,
  .formulaire-ligne input, .formulaire-ligne select, .barre-outils input,
  .carte-connexion input { background: #14181c; color: var(--texte); }
  tbody tr:hover > * { background: #22282e; }
  table.synthese tbody tr:nth-child(odd) > * { background: #1c2126; }
  .encart-commentaire textarea { background: #14181c; }
  tr.solde > th, tr.solde > td { background: #232a31; }
  button { color: #11161c; }
  .barre button.lien, .barre a { color: #fff; }
}

/* Marque d'infobulle sur un libellé de poste : la convention de signe des
   variations de stocks y est logée, pour ne pas élargir les colonnes de
   saisie (9 octobre 2026). */
.indice-aide {
  margin-left: 4px;
  font-size: 11px;
  color: var(--texte-discret);
  border: 1px solid var(--bord-fort);
  border-radius: 50%;
  padding: 0 3px;
  cursor: help;
}

/* Avertissement de saisie : la valeur est acceptée, mais elle sort des ordres
   de grandeur usuels. Ambre, et non rouge : ce n'est pas une erreur, c'est un
   point à vérifier (9 octobre 2026). */
.alerte-saisie {
  background: var(--ambre-clair);
  border-left: 3px solid var(--ambre);
  color: var(--texte);
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 13px;
}

/* --- Détail des calculs de valorisation (9 octobre 2026) -----------------
   Un bloc par méthode, lisible d'affilée : la séparation visuelle compte
   autant que le contenu, sinon les six méthodes se confondent. */
.bloc-methode {
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--couleur-client);
  border-radius: 4px;
}
.bloc-methode > h2 { margin-top: 0; }
.bloc-methode table { margin-top: 10px; }

.formule-methode { margin: 10px 0; }
.formule-methode code {
  display: inline-block;
  background: var(--section);
  padding: 5px 9px;
  border-radius: 3px;
  font-size: 13px;
}

.etiquette.retenue { background: var(--vert-clair); color: var(--vert); border-color: #cfdcbd; }
.etiquette.discret { background: var(--fond); color: var(--texte-discret); }

/* Les deux cases de lecture : ce qu'on dit au client, et ce qu'on ne lui
   fait pas dire. La seconde est la plus importante. */
.encart-explication {
  margin-top: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.encart-explication h3 {
  margin: 0 0 5px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-discret);
}
.case-explication p {
  margin: 0;
  padding: 10px 12px;
  background: var(--accent-clair);
  border-radius: 3px;
  font-size: 13px;
}
/* Le point de vigilance en ambre : ce n'est pas une alerte, mais ça se lit
   autrement qu'une formulation destinée au client. */
.case-explication.vigilance p { background: var(--ambre-clair); }

.controle-ligne th.poste, .controle-ligne td { color: var(--texte-discret); }

@media print {
  .bloc-methode { break-inside: avoid; border-left-color: var(--accent); }
  .encart-explication { grid-template-columns: 1fr 1fr; }
}

/* Bouton de suppression d'une ligne : discret, pour ne pas attirer le clic. */
.lien-discret {
  background: none;
  border: 0;
  padding: 0;
  color: var(--texte-discret);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.lien-discret:hover { color: var(--rouge); }

/* Texte suggéré pour l'encart d'analyse : visiblement distinct de ce que
   l'utilisatrice écrit elle-même, pour qu'aucune confusion ne soit possible
   entre les deux (12 octobre 2026). */
.suggestion-analyse {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--section);
  border-left: 3px solid var(--bord-fort);
  border-radius: 3px;
}
.suggestion-analyse h3 { margin: 0 0 6px; font-size: 14px; }
.texte-suggere { margin: 10px 0; max-width: 85ch; }
.texte-suggere p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.texte-suggere p:last-child { margin-bottom: 0; }

@media print { .suggestion-analyse { display: none; } }

/* Fourchette retenue à la main : visiblement distincte de la fourchette
   calculée, pour qu'on ne confonde jamais un jugement avec un calcul
   (12 octobre 2026). */
.fourchette-retenue {
  border-color: var(--couleur-client);
  background: var(--accent-clair);
}
.mention-fourchette {
  margin: 8px 0 4px;
  font-style: italic;
  max-width: 80ch;
}
.bloc-champ { display: block; margin: 10px 0; max-width: 80ch; }

/* --- Charges groupées par catégorie (14 octobre 2026) -------------------
   La catégorie se choisit en se plaçant au bon endroit : il faut donc qu'on
   voie d'un coup d'œil où commence et où finit chaque groupe. */
tr.section-charges td {
  background: var(--section);
  font-weight: 600;
  padding: 7px 8px;
  border-top: 2px solid var(--bord-fort);
}
tr.section-charges .compte-lignes {
  margin-left: 10px;
  font-weight: 400;
  font-size: 12px;
  color: var(--texte-discret);
}
/* Ligne d'ajout : vraies cellules alignées sur les colonnes du tableau, pour
   saisir le n° de compte, la dénomination ET les montants d'un coup
   (14 octobre 2026). */
tr.ajout-charges td { padding: 5px 4px 9px; background: var(--fond); }
tr.ajout-charges input { font-size: 13px; }
tr.ajout-charges input[name="denomination"] { width: 100%; }
tr.ajout-charges button { font-size: 13px; padding: 3px 10px; white-space: nowrap; }
tr.ajout-charges input::placeholder { color: var(--texte-discret); font-style: italic; }

.choix-colonnes { margin: 10px 0; }
.choix-colonnes summary {
  cursor: pointer;
  display: inline-block;
  padding: 4px 10px;
  background: var(--fond-carte);
  border: 1px solid var(--bord-fort);
  border-radius: 3px;
  font-size: 13px;
}
.choix-colonnes[open] summary { margin-bottom: 6px; }
.choix-colonnes .replis { display: flex; gap: 16px; flex-wrap: wrap; }

@media print { tr.ajout-charges, .choix-colonnes { display: none; } }

/* Ligne de charge éteinte dans le prévisionnel : présente mais hors calcul.
   Grisée plutôt que retirée, pour qu'on ne se demande pas où elle est passée
   (15 octobre 2026). */
tr.ligne-eteinte td { opacity: 0.55; }
tr.ligne-eteinte:hover td { opacity: 1; }
.alerte-ligne { color: var(--ambre); font-weight: 500; cursor: help; }

/* Commentaires de calcul du prévisionnel : plus petits que le montant qu'ils
   expliquent, et dans leur propre colonne masquable pour le montant projeté.
   Mêlés aux chiffres, ils rendaient le tableau illisible (15 octobre 2026). */
.note-calcul {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--texte-discret);
  font-weight: 400;
}
td.col-prev-calcul { max-width: 22ch; white-space: normal; }

body.masquer-col-prev-ref .col-prev-ref { display: none; }
body.masquer-col-prev-base .col-prev-base { display: none; }
body.masquer-col-prev-methode .col-prev-methode { display: none; }
body.masquer-col-prev-param .col-prev-param { display: none; }
body.masquer-col-prev-calcul .col-prev-calcul { display: none; }

/* Exercice atypique : signalé sur la dénomination, qui ne se masque pas. */
.marque-atypique {
  margin-left: 6px;
  font-size: 11px;
  color: var(--ambre);
  font-weight: 500;
  cursor: help;
  white-space: nowrap;
}

/* Mention « montants prévisionnels » en tête de l'export : un prévisionnel ne
   doit jamais pouvoir passer pour un constaté (15 octobre 2026). */
.mention-impression {
  background: var(--ambre-clair);
  border: 1px solid #e8d3a3;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Grille mensuelle : beaucoup de colonnes étroites. Chaque cellule porte le
   montant réel puis, en dessous et en plus petit, le montant prévu
   (16 octobre 2026). Le liseré marque un PRÉVU saisi à la main, qui ne suit
   plus la règle de ventilation. */
table.mensuel th, table.mensuel td { padding: 3px 4px; }
table.mensuel input.montant { display: block; min-width: 5.5em; font-size: 12px; }
table.mensuel input.montant.prevu {
  font-size: 11px; color: var(--texte-discret); margin-top: 2px; padding-top: 0; padding-bottom: 0;
}
table.mensuel td.cellule.est-saisi input.montant.prevu { border-left: 2px solid var(--accent); }
table.mensuel .note-calcul { max-width: 28ch; }

/* Le réel qui dépasse le prévu : seule chose que le rouge dit ici. En dessous
   ou à égalité, rien n'est coloré (demandé le 16 octobre 2026). */
table.mensuel td.cellule.depasse input.montant:not(.prevu) { color: var(--rouge); font-weight: 600; }

/* Rappel du prévu sous un total : secondaire, jamais coloré. */
.note-prevu { display: block; font-size: 11px; color: var(--texte-discret); font-weight: 400; }
.note-prevu .neg, .note-prevu .pos { color: inherit; }

/* --- Graphique d'évolution de la synthèse -------------------------------
   Demandé le 20 octobre 2026. Le tableau et le graphique côte à côte quand
   l'écran le permet, l'un sous l'autre sinon : « à côté du tableau » est un
   souhait de lecture, pas une contrainte de pixels. */
.synthese-colonnes {
  display: grid;
  /* Chaque colonne à la largeur de son contenu, et non en fractions : le
     conteneur du tableau est un bloc à fond blanc et à bordure, qui remplissait
     sinon toute la colonne et prolongeait le tableau d'une marge blanche
     inutile (signalé le 20 octobre 2026). */
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 18px; align-items: start;
}
/* Sans min-width nulle, un élément de grille refuse de rétrécir sous la
   largeur de son contenu et le défilement horizontal du tableau ne joue plus. */
.synthese-colonnes > * { min-width: 0; }
@media (max-width: 1500px) {
  .synthese-colonnes { grid-template-columns: minmax(0, 1fr); }
}
.colonne-graphe { max-width: 660px; }
.colonne-graphe h2 { margin-top: 0; }
.choix-courbes {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 12px;
}
.choix-courbes .replis { columns: 2; column-gap: 18px; }
.choix-courbes label { display: block; font-size: 13px; break-inside: avoid; }
.choix-courbes .base-cent { margin-top: 8px; font-weight: 600; }

.graphe-bloc { margin: 0 0 10px; background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 6px; padding: 10px; }
.graphe { display: block; width: 100%; height: auto; }

/* Axes et grille en retrait : ce sont des repères, pas l'information. */
.graphe .grille { stroke: #eceff2; stroke-width: 1; }
.graphe .axe { stroke: var(--bord-fort); stroke-width: 1; }
.graphe .graduation { fill: var(--texte-discret); font-size: 10px; font-family: inherit; }
.graphe .marque-negative { fill: var(--rouge); font-size: 10px; font-weight: 600; font-family: inherit; }

/* Trois couleurs, et pas une de plus : cette série de trois est validée pour
   la séparation daltonienne et le contraste sur fond clair. Chaque courbe
   porte en plus un trait distinct, qui est ce qui la distingue encore sur une
   impression en noir et blanc. */
.graphe .courbe { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .courbe.serie-1, .graphe .point.serie-1 { stroke: #a6543b; }
.graphe .courbe.serie-2, .graphe .point.serie-2 { stroke: #4a7fb5; }
.graphe .courbe.serie-3, .graphe .point.serie-3 { stroke: #5a9e4a; }
.graphe .courbe.serie-2 { stroke-dasharray: 7 3; }
.graphe .courbe.serie-3 { stroke-dasharray: 1.5 3; }
.graphe .point { fill: var(--fond-carte); stroke-width: 2; }
.graphe .point.point-negatif { fill: var(--rouge); stroke: var(--rouge); }

/* La légende est obligatoire dès deux courbes : l'identité d'une série ne doit
   jamais reposer sur la seule couleur. Le libellé reste en encre, la pastille
   porte la couleur. */
.legende-graphe { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.legende-graphe li { display: inline-block; margin-right: 14px; }
.pastille-serie {
  display: inline-block; width: 18px; height: 3px; margin-right: 5px;
  vertical-align: 3px; background: var(--bord-fort);
}
.pastille-serie.serie-1 { background: #a6543b; }
.pastille-serie.serie-2 { background: #4a7fb5; }
.pastille-serie.serie-3 { background: #5a9e4a; }

/* Au-delà de trois indicateurs : une grille de petits graphiques, un par
   indicateur, chacun avec sa propre échelle. Aucune couleur à distinguer. */
.grille-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.graphe-compact { padding: 6px 8px; }
.graphe-compact figcaption { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.graphe-compact .courbe { stroke: var(--accent); stroke-dasharray: none; }
.graphe-compact .point { stroke: var(--accent); }
.graphe-compact .point.point-negatif { fill: var(--rouge); stroke: var(--rouge); }

.avertissements-graphe {
  margin: 0 0 10px; padding: 8px 10px 8px 26px; font-size: 12px;
  background: var(--ambre-clair); border: 1px solid #e8d3a3; border-radius: 4px; color: var(--ambre);
}

@media print {
  /* Les cases à cocher ne s'impriment pas ; le graphique, si. */
  .choix-courbes { display: none !important; }
  .synthese-colonnes { display: block; }
  .colonne-graphe { max-width: none; }
  .graphe-bloc { border: none; padding: 0; break-inside: avoid; }
  .graphe .courbe, .graphe .point, .pastille-serie, .graphe .marque-negative {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .grille-graphes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La dernière valeur connue accompagne le libellé : une courbe sans ordre de
   grandeur ne dit que la forme. Le chiffre reste en encre — la couleur est
   portée par la pastille, jamais par le texte. */
.valeur-finale { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--texte-discret); }
.graphe-compact .valeur-finale { float: right; font-weight: 400; }

/* Charge ajoutée au prévisionnel : elle n'a pas d'historique et son montant est
   saisi, pas projeté. Un fond très léger la distingue des lignes issues des
   exercices passés, sans crier (20 octobre 2026). */
tr.ligne-ajoutee > td { background: var(--ambre-clair); }
tr.ligne-ajoutee .sous-titre { color: var(--ambre); }