/* ════════════════════════════════════════════════════════════════
   Suivi financier — v2
   Métaphore : le registre. Réglures fines, chiffres tabulaires,
   colonne de montants alignée au millimètre. Aucune décoration
   qui ne porte pas d'information.
   Polices auto-hébergées : fonctionne hors ligne, aucun CDN.
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  /* Encre et papier */
  --fond:      #0A0E13;
  --surface:   #121922;
  --relief:    #18212C;
  --reglure:   #1F2A36;   /* la ligne du registre */
  --reglure-f: #151D26;   /* réglure secondaire, plus discrète */

  /* Texte */
  --texte:     #E7EDF3;
  --sourdine:  #7A8A9C;
  --estompe:   #4A5867;

  /* Sémantique — jamais décorative */
  --vert:      #5FD3A6;   /* entrées, épargne, gain */
  --rouge:     #F26D7D;   /* sorties, dette, dépassement */
  --ambre:     #E8A33D;   /* seuil approché */
  --bleu:      #6E92B8;   /* neutre, référence */

  --sans: 'Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Plex Mono', ui-monospace, Menlo, monospace;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────── chiffres : la colonne du registre */
.n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.pos { color: var(--vert); }
.neg { color: var(--rouge); }
.sourdine { color: var(--sourdine); }
.estompe { color: var(--estompe); }

.eyebrow, .carte h3, .grand-chiffre .label, .tableau th, nav button {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────── ossature */
.app { max-width: 880px; margin: 0 auto; padding: 0 var(--e4) 104px; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e5) 0 var(--e3);
}
header h1 {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sourdine);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
/* Marque : trois réglures, un registre vu de côté */
header h1::before {
  content: '';
  width: 14px; height: 10px;
  background:
    linear-gradient(var(--vert) 2px, transparent 0) 0 0 / 14px 4px,
    linear-gradient(var(--sourdine) 2px, transparent 0) 0 4px / 10px 4px,
    linear-gradient(var(--rouge) 2px, transparent 0) 0 8px / 7px 4px;
  background-repeat: no-repeat;
}
header .maj { font-family: var(--mono); font-size: 11px; color: var(--estompe); }

nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(10, 14, 19, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--reglure);
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}
nav button {
  flex: 1;
  background: none;
  border: none;
  color: var(--estompe);
  font-family: var(--sans);
  padding: var(--e3) var(--e1) 14px;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}
nav button::after {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--vert);
  transform: translateX(-50%);
  transition: width .2s ease;
}
nav button[aria-selected="true"] { color: var(--texte); }
nav button[aria-selected="true"]::after { width: 22px; }
nav button:hover { color: var(--sourdine); }
nav button:focus-visible { outline: 2px solid var(--vert); outline-offset: -3px; }

@media (min-width: 720px) {
  nav {
    position: static;
    background: none;
    backdrop-filter: none;
    border-top: none;
    border-bottom: 1px solid var(--reglure);
    margin-bottom: var(--e6);
    gap: var(--e5);
  }
  nav button { flex: 0 0 auto; padding: 0 0 var(--e3); }
  nav button::after { top: auto; bottom: -1px; left: 0; transform: none; }
  nav button[aria-selected="true"]::after { width: 100%; }
  .app { padding-bottom: var(--e7); }
}

/* ══════════════════════ SIGNATURE : le chiffre posé sur ses réglures ══════ */
.grand-chiffre {
  position: relative;
  padding: var(--e5) 0 var(--e6);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--reglure);
}
.grand-chiffre::before {
  content: '';
  position: absolute;
  inset: var(--e5) 0 var(--e6) 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 15px,
    var(--reglure-f) 15px 16px
  );
  mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 72%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 72%);
  pointer-events: none;
}
.grand-chiffre > * { position: relative; }

.grand-chiffre .label { color: var(--sourdine); margin-bottom: var(--e2); }
.grand-chiffre .valeur {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(2.7rem, 11.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
.grand-chiffre .sous {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sourdine);
  margin-top: var(--e3);
}

.courbe { margin-top: var(--e5); }
.courbe svg { display: block; width: 100%; height: 58px; overflow: visible; }
.courbe .legende {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--estompe);
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────────── le registre */
.registre { border-top: 1px solid var(--reglure); }
.ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e3);
  align-items: baseline;
  padding: 12px 2px;
  border-bottom: 1px solid var(--reglure-f);
  transition: background .12s;
}
.ligne:hover { background: var(--surface); }
.ligne .titre {
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ligne .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--estompe);
  margin-top: 3px;
}
.ligne .n { font-size: 14px; }

.pastille {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: var(--e2);
  vertical-align: middle;
  flex: none;
}

/* Barre de part : la largeur EST l'information */
.part { padding: 10px 0; border-bottom: 1px solid var(--reglure-f); }
.part .tete { display: flex; justify-content: space-between; align-items: baseline; }
.part .nom { font-size: 14px; }
.part .barre-part { height: 2px; background: var(--reglure); margin-top: 8px; }
.part .barre-part span { display: block; height: 100%; transition: width .4s ease; }

/* Jauge */
.jauge { height: 2px; background: var(--reglure); margin-top: 8px; position: relative; }
.jauge > span { display: block; height: 100%; background: var(--bleu); transition: width .35s ease; }
.jauge.proche > span { background: var(--ambre); }
.jauge.depasse > span { background: var(--rouge); }
.jauge .repere {
  position: absolute; top: -4px; bottom: -4px;
  width: 1px; background: var(--sourdine);
}
.jauge .repere::after {
  content: attr(data-tag);
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--estompe);
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────── sections */
.carte {
  border-top: 1px solid var(--reglure);
  padding: var(--e5) 0 var(--e4);
}
.carte h3 { margin: 0 0 var(--e4); color: var(--sourdine); font-weight: 600; }
.carte.encadree {
  background: var(--surface);
  border: 1px solid var(--reglure);
  border-radius: 10px;
  padding: var(--e4);
  margin-top: var(--e5);
}

.paire { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 14px; }
.paire + .paire { border-top: 1px solid var(--reglure-f); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e6); }
@media (max-width: 620px) { .duo { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────── alertes */
.alerte {
  display: flex; gap: var(--e3); align-items: baseline;
  padding: 11px var(--e3);
  font-size: 13.5px;
  margin-bottom: var(--e2);
  background: var(--surface);
  border-left: 2px solid var(--bleu);
  border-radius: 0 6px 6px 0;
}
.alerte.niveau-alerte { border-left-color: var(--ambre); }

/* ─────────────────────────────────────────────────────── contrôles */
button.action, .fichier {
  background: var(--relief);
  color: var(--texte);
  border: 1px solid var(--reglure);
  border-radius: 7px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
button.action:hover, .fichier:hover { border-color: var(--sourdine); background: var(--surface); }
button.action:focus-visible, .fichier:focus-within { outline: 2px solid var(--vert); outline-offset: 2px; }
button.action.primaire {
  background: var(--vert); color: #05231B; border-color: var(--vert); font-weight: 600;
}
button.action.primaire:hover { background: #71DDB3; }
button.action.discret {
  background: none; border: none; color: var(--estompe);
  padding: 2px 6px; font-size: 12px;
}
button.action.discret:hover { color: var(--rouge); background: none; }
button.action:disabled { opacity: .45; cursor: not-allowed; }

input, select {
  background: var(--fond);
  border: 1px solid var(--reglure);
  border-radius: 7px;
  color: var(--texte);
  font-family: var(--sans);
  font-size: 14px;
  padding: 9px 11px;
  width: 100%;
  transition: border-color .15s;
}
input:hover, select:hover { border-color: var(--estompe); }
input:focus, select:focus { outline: none; border-color: var(--vert); }
input.n { font-family: var(--mono); }
input::placeholder { color: var(--estompe); }

label.champ { display: block; margin-bottom: var(--e3); }
label.champ span {
  display: block;
  font-size: 11px;
  color: var(--sourdine);
  margin-bottom: 5px;
}

.barre { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin-bottom: var(--e4); }
.barre input, .barre select { width: auto; flex: 1 1 140px; }
.note { font-size: 12px; color: var(--estompe); font-family: var(--mono); }

/* ────────────────────────────────────────────────────────── vide */
.vide { text-align: center; padding: var(--e7) var(--e5); color: var(--sourdine); }
.vide p { margin: 0 0 var(--e4); font-size: 14px; }

/* ──────────────────────────────────────────────────── connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--e5); }
.connexion form { width: 100%; max-width: 19rem; }
.connexion h1 {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sourdine); margin: 0 0 var(--e5); text-align: center; font-weight: 600;
}
.erreur { color: var(--rouge); font-size: 12.5px; margin-top: var(--e3); min-height: 1.2em; }

/* ─────────────────────────────────────────────── tableau chiffré */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: right;
  color: var(--estompe);
  padding: var(--e2);
  border-bottom: 1px solid var(--reglure);
}
.tableau th:first-child { text-align: left; }
.tableau td {
  padding: 7px var(--e2);
  border-bottom: 1px solid var(--reglure-f);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  text-align: right;
}
.tableau td:first-child { text-align: left; font-family: var(--sans); font-size: 13.5px; }
.tableau tr.retenue td { color: var(--texte); font-weight: 500; }
.defilant { overflow-x: auto; max-height: 360px; }

/* ─────────────────────────────────────────────────── graphiques */
.graphe svg { display: block; width: 100%; overflow: visible; }
.graphe text { font-family: var(--mono); font-size: 10px; fill: var(--estompe); }

@keyframes pose { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
main > * { animation: pose .28s ease both; }
main > *:nth-child(2) { animation-delay: .04s; }
main > *:nth-child(3) { animation-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────── module optimisation */
.meta-abo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  margin-top: 8px;
}
.meta-abo select {
  width: auto;
  flex: none;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--relief);
}

/* Le bilan des décisions : le seul bloc en relief de la page. */
.bilan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e4);
  background: var(--surface);
  border: 1px solid var(--reglure);
  border-left: 2px solid var(--vert);
  border-radius: 0 10px 10px 0;
  padding: var(--e4);
  margin-bottom: var(--e5);
}
.bilan .n { font-family: var(--mono); font-weight: 500; }