/* =========================================================================
   TALA Finance — thème « registre »
   Couche posée par-dessus Bootstrap. Bootstrap garde la grille, les modales
   et la pagination ; tout ce qui relève de l'identité visuelle vit ici.

   Principe : un registre comptable, pas un empilement de cartes. Des filets
   plutôt que des ombres, une colonne de montants à laquelle tout s'aligne,
   et la couleur réservée au sens comptable (entrée / sortie / annulé).
   ========================================================================= */

/* Archivo variable, servie depuis public/assets/fonts/ : aucune dépendance
   réseau, même règle que Bootstrap depuis l'étape 3. Le sous-ensemble latin
   couvre le français en entier, œ et Œ compris. Un seul fichier porte les
   deux axes — la graisse ET la largeur. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Encre et papier ------------------------------------------------ */
  --encre:      #14213a;   /* texte principal */
  --encre-2:    #5a657a;   /* texte secondaire */
  --encre-3:    #8b95a8;   /* libellés, mentions */
  --papier:     #f4f3ef;   /* fond de page */
  --surface:    #ffffff;   /* surface du registre */
  --reglure:    #e3e0d8;   /* filet */
  --reglure-2:  #f0eee8;   /* filet intérieur, plus discret */

  /* --- Marque ---------------------------------------------------------- */
  --registre:   #0f2d62;   /* le navy de l'école : barre latérale, chrome */
  --registre-2: #17376f;
  --registre-3: #0a1f47;

  /* --- Sens comptable --------------------------------------------------
     Ces trois-là ne servent QU'À ça. Aucune décoration ne les emprunte. */
  --recette:    #14624a;   /* ce qui entre en caisse */
  --depense:    #a32c22;   /* ce qui sort, et le retard */
  --annule:     #8e3b34;   /* pièce annulée */

  /* --- Le sceau ---------------------------------------------------------
     L'or de la marque a un seul emploi : marquer la période vivante —
     l'exercice sélectionné, l'écran courant, le total de la sélection. */
  --sceau:      #c9a24a;
  --sceau-pale: #f3e9d0;

  /* --- Rythme ----------------------------------------------------------- */
  --rail-l:     238px;
  --r:          4px;       /* un rayon, discret : le registre n'est pas rond */
}

/* =========================================================================
   1. Typographie — l'axe de largeur porte la hiérarchie
   -------------------------------------------------------------------------
   Une seule famille, trois largeurs. Le lecteur apprend vite la règle :
     large  = une somme                          (font-stretch 108-115%)
     normal = l'interface                        (100%)
     étroit = une entrée, une colonne, un numéro (78-90%)
   Les tableaux à huit colonnes de cet écran ont des intitulés français
   longs — « Prochaine échéance », « Exigible à ce jour » — l'étroit leur
   rend la place qui leur manque.
   ========================================================================= */

body {
  font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

/* Toute somme, partout, dans les mêmes chiffres tabulaires. C'est ce qui
   fait qu'une colonne de montants s'aligne au caractère près. */
.somme-maitresse, .valeur, .num, .total-selection strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.num {
  text-align: right;
  white-space: nowrap;
  font-stretch: 82%;
  font-weight: 500;
}

/* Le numéro de pièce est une identité, pas un texte : on l'espace et on le
   fige en étroit pour qu'il se lise en colonne. Plus besoin de Consolas. */
.mono {
  font-stretch: 78%;
  font-weight: 500;
  letter-spacing: .07em;
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  color: var(--encre-2);
}

/* Le libellé qui coiffe un chiffre : petit, espacé, jamais en gras noir. */
.libelle, .table thead th, .rail nav .groupe, .filtres .form-label {
  font-stretch: 88%;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--encre-3);
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; }

/* =========================================================================
   2. Le rail
   ========================================================================= */

.rail {
  background: var(--registre); color: #ccd7ec; width: var(--rail-l); min-height: 100vh;
  position: fixed; top: 0; left: 0; display: flex; flex-direction: column;
  padding: 18px 0 12px;
}
.rail .marque { display: flex; gap: 10px; align-items: center; padding: 0 18px 16px; }
.rail .marque img { width: 34px; height: 34px; border-radius: var(--r); object-fit: cover; }
.rail .marque strong {
  font-size: .81rem; line-height: 1.15; display: block; color: #fff;
  font-weight: 600; letter-spacing: -.005em;
}
.rail .marque span {
  font-size: .6rem; color: #8fa5cc; letter-spacing: .14em;
  font-stretch: 88%; font-weight: 600;
}
.rail nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.rail nav a {
  display: block; padding: 7px 12px; margin-bottom: 1px; border-radius: var(--r);
  color: #bccce6; text-decoration: none; font-size: .855rem; font-weight: 450;
  border-left: 2px solid transparent;
}
.rail nav a:hover { background: rgba(255,255,255,.07); color: #fff; }

/* Le sceau marque l'écran courant. */
.rail nav a.actif {
  background: var(--registre-3); color: #fff; font-weight: 600;
  border-left-color: var(--sceau);
}
.rail nav .groupe { color: #7089b3; padding: 15px 12px 5px; }
.rail .pied {
  padding: 12px 18px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: .8rem;
}
.rail .pied .qui { color: #fff; font-weight: 600; }
.rail .pied .role {
  color: #8fa5cc; font-size: .63rem; letter-spacing: .12em;
  text-transform: uppercase; font-stretch: 88%; font-weight: 600;
}

/* Le sélecteur d'exercice : deuxième emploi du sceau. L'année choisie est la
   période vivante, et le rail le dit. */
.rail .exercice { padding: 0 14px 10px; }
.rail .exercice .form-label {
  color: #8fa5cc; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  font-stretch: 88%; font-weight: 600; margin-bottom: 4px;
}
.rail .exercice .form-select {
  background-color: var(--registre-3); border-color: rgba(201,162,74,.45);
  color: #fff; font-stretch: 90%; font-weight: 600; font-size: .82rem;
}
.rail .exercice .form-select:focus {
  border-color: var(--sceau); box-shadow: 0 0 0 2px rgba(201,162,74,.3);
}
.rail .exercice .form-select option { background: var(--registre-3); color: #fff; }

/* =========================================================================
   3. La page
   ========================================================================= */

/* Portée explicite : la page de connexion utilise elle aussi un <main>, et ne
   doit hériter ni du décalage du rail ni de ses marges. */
main.feuille { margin-left: var(--rail-l); padding: 24px 28px 64px; }

.entete {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--reglure);
}
.entete h1 { font-size: 1.3rem; margin: 0; }
.entete p {
  margin: 3px 0 0; color: var(--encre-2); font-size: .82rem; font-stretch: 92%;
}
.entete .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- La surface réglée ---------------------------------------------------
   Remplace l'empilement de cartes flottantes : un plan, un filet, des
   règles à l'intérieur. Bootstrap continue de fournir .card ; on le
   réaccorde plutôt que de le remplacer, pour ne pas toucher les 20 vues. */
.card {
  border: 1px solid var(--reglure);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: none;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--reglure);
  font-stretch: 88%; font-size: .68rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--encre-3);
  padding: .7rem .9rem .6rem;
}

/* La bande de filtres : un bandeau posé sur le papier, pas une carte. */
.filtres {
  background: var(--surface); border: 1px solid var(--reglure);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px;
}

/* =========================================================================
   4. Chiffres
   ========================================================================= */

/* Le grand total : large, serré, tabulaire. C'est la seule chose de l'écran
   qui a le droit d'être grande. */
.somme-maitresse {
  font-stretch: 115%; font-weight: 600; font-size: clamp(2.1rem, 5.5vw, 3rem);
  line-height: 1; letter-spacing: -.03em; color: var(--encre);
}
.somme-maitresse .unite {
  font-stretch: 88%; font-size: .26em; font-weight: 600; letter-spacing: .16em;
  color: var(--encre-3); margin-left: .7em; vertical-align: .55em;
}

.kpi .valeur {
  font-stretch: 108%; font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.1;
}
.kpi .libelle { display: block; margin-bottom: 3px; }

/* L'unité accolée à un chiffre secondaire. Elle recule d'un cran : c'est le
   nombre qu'on lit, pas la devise, qui est la même partout. */
.unite-petite {
  font-stretch: 88%; font-size: .58rem; font-weight: 600; letter-spacing: .12em;
  color: var(--encre-3); margin-left: .45em; vertical-align: .1em;
}

/* Sens comptable. Ces classes remplacent les hexadécimaux écrits en dur
   dans les tableaux PHP des vues.

   La discipline : l'encre est la norme — un montant est un montant. Le rouge
   ne dit qu'une chose, « ça sort ou ça manque » (dépense, retard, déficit),
   et le vert ne dit que « c'est rentré, c'est soldé ». Un chiffre qui n'est
   ni l'un ni l'autre reste noir, sinon plus rien ne ressort. */
.recette { color: var(--recette); }
.depense { color: var(--depense); }
.neutre  { color: var(--encre); }

/* Une pièce annulée : barrée, mais toujours lisible. Elle reste au registre. */
.annule { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--annule); }

/* =========================================================================
   5. Tableaux — le registre proprement dit
   ========================================================================= */

.table { --bs-table-bg: transparent; color: var(--encre); margin-bottom: 0; }
.table > :not(caption) > * > * {
  padding: .58rem .7rem;
  border-bottom-color: var(--reglure-2);
  background-color: transparent;
}
.table thead th {
  border-bottom: 1px solid var(--reglure);
  padding-top: .55rem; padding-bottom: .5rem;
  white-space: nowrap;
  background: transparent;
}
.table tbody tr:last-child > * { border-bottom: 0; }
/* Le registre ne colle pas à son cadre : les colonnes de bord respirent. */
.table > :not(caption) > * > *:first-child { padding-left: .9rem; }
.table > :not(caption) > * > *:last-child  { padding-right: .9rem; }
.table-hover > tbody > tr:hover > * { background-color: #faf9f5; }
.table td { font-stretch: 90%; }
.table td strong { font-weight: 600; font-stretch: 96%; }

/* Second niveau dans une cellule : le matricule sous le nom, le niveau sous
   la filière. Un seul style, au lieu des style="font-size:.78rem" dispersés. */
.second {
  font-size: .765rem; color: var(--encre-3); font-stretch: 88%; line-height: 1.35;
}

/* =========================================================================
   6. La jauge
   ========================================================================= */

.barre-jauge { height: 4px; border-radius: 2px; background: var(--reglure); overflow: hidden; }
.barre-jauge span { display: block; height: 100%; background: var(--recette); }

/* La jauge de recouvrement du tableau de bord porte l'écran : simplement plus
   haute. Elle était graduée au quart — les repères tombaient près du taux et
   la faisaient lire comme quatre étapes plutôt qu'une proportion. */
.jauge-maitresse {
  height: 12px; border-radius: 2px; background: var(--reglure); overflow: hidden;
}
.jauge-maitresse span { display: block; height: 100%; background: var(--recette); }

/* --- Le graphe en colonnes -----------------------------------------------
   Les encaissements par mois sont une série dans le temps : des colonnes se
   lisent d'un coup d'œil, là où une pile de barres horizontales oblige à
   comparer des longueurs empilées. Une ligne de base, et rien d'autre. */
.colonnes {
  display: flex; align-items: flex-end; gap: 10px;
  height: 150px; padding-top: 18px;
  border-bottom: 1px solid var(--reglure);
}
.colonnes .colonne { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
                     justify-content: flex-end; align-items: center; height: 100%; }
/* Le fût est plafonné et centré : à pleine largeur les colonnes se touchaient
   presque et la série se lisait comme un bloc plein. */
.colonnes .fut {
  width: 100%; max-width: 46px; background: var(--registre);
  border-radius: 2px 2px 0 0; min-height: 2px; position: relative;
}
.colonnes .colonne:hover .fut { background: var(--registre-2); }
/* La cote est ancrée au sommet du fût, pas au haut du cadre : elle monte et
   descend avec sa colonne au lieu de s'aligner en ligne détachée. */
.colonnes .cime {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 5px; font-size: .62rem; font-stretch: 78%; font-weight: 600;
  color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.axe-mois { display: flex; gap: 10px; margin-top: 6px; }
.axe-mois span {
  flex: 1 1 0; min-width: 0; text-align: center; font-size: .62rem; font-stretch: 82%;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3);
}

/* --- La liste part/total (répartition par mode, par type) ----------------
   L'écart entre une ligne et sa jauge doit rester plus petit que l'écart
   entre deux lignes, sinon la jauge se lit comme un séparateur. */
.repartition .ligne { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px;
                      align-items: baseline; margin-bottom: 15px; }
.repartition .ligne:last-child { margin-bottom: 0; }
.repartition .quoi { font-size: .84rem; font-stretch: 94%; }
.repartition .combien { font-size: .84rem; font-stretch: 82%; font-weight: 500;
                        font-variant-numeric: tabular-nums; white-space: nowrap; }
.repartition .part { color: var(--encre-3); font-weight: 400; margin-left: .5em; }
.repartition .barre-jauge { grid-column: 1 / -1; }

/* =========================================================================
   7. Contrôles
   ========================================================================= */

.btn {
  font-stretch: 92%; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r);
}
.btn-sm { font-size: .8rem; padding: .32rem .7rem; }
.btn-primary { background: var(--registre); border-color: var(--registre); }
.btn-primary:hover, .btn-primary:focus { background: var(--registre-2); border-color: var(--registre-2); }
.btn-outline-primary { color: var(--registre); border-color: #c3cddf; }
.btn-outline-primary:hover { background: var(--registre); border-color: var(--registre); }
.btn-outline-secondary { color: var(--encre-2); border-color: var(--reglure); }
.btn-outline-secondary:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.btn-outline-success { color: var(--recette); border-color: #bcd4c9; }
.btn-outline-success:hover { background: var(--recette); border-color: var(--recette); }
.btn-outline-danger { color: var(--depense); border-color: #e2c4c1; }
.btn-outline-danger:hover { background: var(--depense); border-color: var(--depense); }
.btn-danger { background: var(--depense); border-color: var(--depense); }
.btn-outline-light { border-color: rgba(255,255,255,.3); font-size: .8rem; }

.form-control, .form-select {
  border-color: var(--reglure); border-radius: var(--r); color: var(--encre);
  font-size: .86rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--registre); box-shadow: 0 0 0 2px rgba(15,45,98,.12);
}
.form-control::placeholder { color: #adb5c2; }
.form-label { font-size: .78rem; font-weight: 600; color: var(--encre-2); }

/* Le clavier doit toujours savoir où il est. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--sceau); outline-offset: 2px;
}

.badge { font-stretch: 90%; font-weight: 600; letter-spacing: .04em; border-radius: 3px; }
.text-bg-success { background: var(--recette) !important; }
.text-bg-warning { background: var(--sceau-pale) !important; color: #7a5c14 !important; }

.alert { border-radius: var(--r); font-size: .86rem; border-width: 1px; }
.alert-success { background: #edf5f1; border-color: #cbe0d6; color: var(--recette); }
.alert-danger  { background: #fbeeed; border-color: #eccfcc; color: var(--depense); }

/* Le total d'une sélection : troisième emploi du sceau — c'est le chiffre
   que le filtre courant vient de produire. */
.total-selection {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  background: var(--surface); border: 1px solid var(--reglure);
  border-left: 2px solid var(--sceau);
  border-radius: var(--r); padding: 9px 14px; margin-bottom: 14px; font-size: .85rem;
}
.total-selection strong { font-stretch: 108%; font-size: 1.05rem; }

.page-link { color: var(--registre); border-color: var(--reglure); font-size: .84rem; }
.page-item.active .page-link { background: var(--registre); border-color: var(--registre); }

.modal-content { border-radius: var(--r); border-color: var(--reglure); }
.modal-title { font-size: 1rem; font-weight: 600; }

/* =========================================================================
   8. Mobile — le rail devient un tiroir
   ========================================================================= */

.barre-mobile, .voile, .fermer-rail { display: none; }

@media (max-width: 820px) {
  .barre-mobile {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1035; height: 56px;
    background: var(--registre); color: #fff; padding: 0 12px;
    border-bottom: 2px solid var(--sceau);
  }
  .barre-mobile img { width: 30px; height: 30px; border-radius: var(--r); object-fit: cover; }
  .barre-mobile .titre { font-size: .83rem; font-weight: 600; line-height: 1.15; }
  .barre-mobile .titre span {
    display: block; font-size: .58rem; color: #8fa5cc; letter-spacing: .14em; font-stretch: 88%;
  }
  .burger {
    display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
    width: 40px; height: 40px; padding: 0; color: #fff; background: transparent;
    border: 1px solid rgba(255,255,255,.28); border-radius: var(--r);
  }

  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; min-height: 0; width: 270px; max-width: 84vw;
    z-index: 1045; overflow-y: auto; transform: translateX(-100%);
    transition: transform .25s ease; box-shadow: 2px 0 14px rgba(8,20,44,.35);
  }
  body.rail-ouvert .rail { transform: translateX(0); }
  .fermer-rail {
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    width: 32px; height: 32px; padding: 0; font-size: 1.4rem; line-height: 1;
    color: #bccce6; background: transparent; border: 0; border-radius: var(--r);
  }

  .voile {
    display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(8,20,44,.5);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.rail-ouvert .voile { opacity: 1; pointer-events: auto; }
  body.rail-ouvert { overflow: hidden; }

  main.feuille { margin-left: 0; padding: 72px 14px 48px; }
  .entete h1 { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .voile { transition: none; }
}

/* =========================================================================
   9. Impression — les rapports partent au papier
   ========================================================================= */

@media print {
  .rail, .barre-mobile, .voile, .d-print-none { display: none !important; }
  main.feuille { margin-left: 0; padding: 0; }
  body { background: #fff; font-size: 10pt; }
  .card { border-color: #bbb; break-inside: avoid; }
}