/* États financiers — Finance › États financiers : le Compte de résultat, le Bilan et la Clôture.
   Une seule feuille : ils partagent l'en-tête, les cartes de chiffres clés,
   le graphique, le tri et la grammaire du document.

   LA GRAMMAIRE DU DOCUMENT, et c'est tout l'enjeu de la lecture :
     .sec  titre de section — le plus fort, et JAMAIS de montant à côté ;
     .l    ligne de compte  — le grain ;
     .sst  sous-total       — discret, il ferme la section, il ne la titre pas ;
     .pal  palier technique — un filet et du gras (EBIT, EBT) ;
     .res  résultat         — une bande : un autre GENRE de ligne, trois par document.
   Le titre de section et le palier se confondaient tant qu'ils partageaient le gras :
   l'absence de montant sur le titre les sépare au premier coup d'œil.

   Aucune couleur en dur sans sa contrepartie sombre : les gris de graphique sont des
   neutres de dataviz, lisibles sur les deux thèmes, déclarés ci-dessous. */

:root{ --fi-g1:#B9BCC4; --fi-g2:#8C9099; --fi-g3:#6F737C; --fi-g4:#5A5F69 }
html[data-theme="dark"]{ --fi-g1:#565B66; --fi-g2:#6E747F; --fi-g3:#868C97; --fi-g4:#9BA1AC }

/* ---- en-tête ---- */
.fi-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fi-tete .sous{font-size:13px;color:var(--ink-2);margin-top:3px}
.fi-actes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fi-choix{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctrl);padding:5px 6px 5px 11px}
.fi-choix label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* `background-color` et non le raccourci `background` : celui-ci effacerait aussi le
   chevron que le kit pose sur tout select (v3.21). */
.fi-choix select{border:0;background-color:transparent;font-size:var(--champ-taille);font-weight:var(--champ-graisse);color:var(--ink);
  padding:3px 20px 3px 2px;background-position:right 1px center;background-size:13px}
.fi-choix select:focus{box-shadow:none}

/* ---- chiffres clés : les KPI-Cards du kit ---- */
.fi-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.fi-kpis.quatre{grid-template-columns:repeat(4,1fr)}
.fi-kpis.cinq{grid-template-columns:repeat(5,1fr)}
.fi-kpis .kcard .delta{font-size:11px;font-weight:500;color:var(--ink-3)}
.fi-kpis .kcard .delta.up{color:var(--pos)} .fi-kpis .kcard .delta.down{color:var(--down)}

/* ---- le graphique (cascade au résultat, masses au bilan) ---- */
.fi-casc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:17px 20px 14px;margin-bottom:16px}
.fi-casc h2{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.fi-casc .aide{font-size:12px;color:var(--ink-3);margin:0}
.fi-casc .aide b{color:var(--ink-2);font-weight:650}
.fi-casc svg{display:block;width:100%;height:auto;margin-bottom:4px}
.casc-val{font-family:var(--font-display);font-size:12px;font-weight:600;fill:var(--ink);text-anchor:middle}
.casc-val.moins{fill:var(--accent-strong)} .casc-val.plus{fill:var(--pos)}
.casc-nom{font-family:var(--font-body);font-size:10.5px;font-weight:600;fill:var(--ink-2);text-anchor:middle}
.casc-fil{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 3}
.casc-base{stroke:var(--border-strong);stroke-width:1}
.ms-cote{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.09em;fill:var(--ink-3);text-anchor:middle}
.ms-pct{font-family:var(--font-display);font-size:12px;font-weight:700;fill:#fff;text-anchor:middle}
.ms-nom{font-family:var(--font-body);font-size:12px;font-weight:600;fill:var(--ink-2)}
.ms-mnt{font-family:var(--font-display);font-size:12.5px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
.ms-fdr{font-family:var(--font-body);font-size:11px;font-weight:600;fill:var(--ink-3);text-anchor:middle}

/* ---- le document ---- */
.fi-doc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px}
.fi-doc-t{display:flex;align-items:baseline;gap:14px;margin-bottom:3px;flex-wrap:wrap}
.fi-doc-t h2{font-family:var(--font-display);font-size:19px;font-weight:600;margin:0}
.fi-tri{display:inline-flex;background:var(--surface-2);border-radius:var(--r-ctrl);padding:2px}
.fi-tri button{border:0;background:transparent;font-family:var(--font-body);font-size:12px;font-weight:650;color:var(--ink-3);padding:5px 11px;border-radius:var(--r-ctrl);cursor:pointer}
.fi-tri button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}
.fi-doc .periode{font-size:12px;color:var(--ink-3);margin:0 0 14px}

/* La colonne est un FLEX : chaque ligne porte alors elle-même les mêmes pistes, et la
   bande de total peut être poussée en bas (`margin-top:auto`) pour que l'actif et le
   passif, de longueurs différentes, finissent à la MÊME hauteur. En grille, les rangées
   auto ne laissaient aucune place à repousser. */
.fi-t{display:flex;flex-direction:column;--fi-cols:40px 1fr 96px 74px}
.fi-t.large{--fi-cols:42px 1fr 118px 118px}
/* `align-items:baseline` sur CHAQUE ligne : posé sur le conteneur il ne vaudrait que
   pour les lignes elles-mêmes, et les cellules resteraient étirées — chaque texte se
   posant alors en haut de la sienne, à une hauteur différente selon sa taille. */
.fi-t > *{display:grid;grid-template-columns:var(--fi-cols);column-gap:10px;align-items:baseline}
.fi-t .ent{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:6px;border-bottom:1px solid var(--border-strong)}
.fi-t .ent > span.large{grid-column:1/3}
.fi-t .ent .an{text-align:right;color:var(--ink-2)}

.fi-t .sec{margin-top:14px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.fi-t .sec > span:first-child{grid-column:1/3;font-size:13px;font-weight:700;color:var(--ink)}

.fi-t .l{padding:2.5px 0}
.fi-t .l:hover{background:var(--surface-2)}
.fi-t .l .no{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-3)}
.fi-t .l .nom{font-size:12.5px;color:var(--ink);text-decoration:none;text-align:left;background:none;border:0;
  padding:0;font-family:var(--font-body);cursor:pointer;line-height:1.35}
.fi-t .l:hover .nom{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-strong)}
.fi-t .l .nom.fige{cursor:default}
.fi-t .l:hover .nom.fige{text-decoration:none}

/* `.sst` et non `.st` : `.st` est une classe GLOBALE (pastille de statut, fond gris
   arrondi) — elle repeignait chaque sous-total en bande, exactement ce qu'un sous-total
   ne doit pas être. Même piège que `.note` sur le papier : nommer local, toujours. */
.fi-t .sst{padding:4px 0 2px}
.fi-t .sst > span:first-child{grid-column:1/3;font-size:12px;font-weight:600;color:var(--ink-2)}
.fi-t .sst .m{color:var(--ink-2);font-weight:600}

.fi-t .pal{margin-top:7px;padding:6px 0 1px;border-top:1px solid var(--border-strong)}
.fi-t .pal > span:first-child{grid-column:1/3;font-size:12.5px;font-weight:700;color:var(--ink)}
.fi-t .pal .nte{font-weight:500;color:var(--ink-3);font-size:11.5px}
.fi-t .pal .m{font-size:13.5px;font-weight:700}

.fi-t .res{margin:9px -12px 0;padding:9px 12px 10px;background:var(--surface-2);border-radius:var(--r-ctrl)}
.fi-t .res > span:first-child{grid-column:1/3;font-size:13.5px;font-weight:700;color:var(--ink)}
.fi-t .res .m{font-size:15.5px;font-weight:700}
.fi-t .res.net{margin-top:13px;padding:11px 12px 12px;background:var(--pos-soft)}
.fi-t .res.net > span:first-child{font-size:14.5px}
.fi-t .res.net .m{font-size:19px;color:var(--pos)}
.fi-t .res.net.perte{background:var(--neg-soft)}
.fi-t .res.net.perte .m{color:var(--neg)}
/* au bilan, le total de chaque colonne descend au bas de la sienne */
.fi-cols .fi-t .res{margin:auto -10px 0;padding:9px 10px 10px}

.fi-t .m{font-family:var(--font-display);font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.fi-t .m.n1{color:var(--ink-3);font-weight:500}

.fi-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px}

.fi-eq{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.fi-eq .ok{background:var(--pos-soft);color:var(--pos);border-radius:var(--r-ctrl);padding:4px 9px;font-size:12px;font-weight:700}
.fi-eq .bad{background:var(--neg-soft);color:var(--neg);border-radius:var(--r-ctrl);padding:4px 9px;font-size:12px;font-weight:700}
.fi-eq .calc{color:var(--ink-3);font-variant-numeric:tabular-nums}

.fi-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:16px}
.fi-note b{color:var(--ink-2);font-weight:650}

/* ---- Clôture : le bouclement d'un exercice, étape par étape ----
   La langue des étapes de l'écran de contrôle (coche verte quand c'est fait, corail pour la suivante),
   en pleine page : chaque étape dit ce que le livre en lit, et porte ses gestes. */
.clo-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.clo-note .ic-svg{flex:none;margin-top:1px}
.clo{padding:4px 20px}
.clo-etapes{list-style:none;margin:0;padding:0}
.clo-e{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:15px 0;border-top:1px solid var(--border)}
.clo-e:first-child{border-top:0}
.clo-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border-strong);color:var(--ink-3);font:600 11.5px/1 var(--font-display);font-variant-numeric:tabular-nums}
/* des états PRÉFIXÉS : `.fait` et `.attente` sont des classes globales de SnapDesk et du kit (la seconde,
   la barre d'attente, est en position fixe : elle sortait chaque étape de la carte) */
.clo-e.clo-fait .clo-ic{border-color:transparent;background:var(--pos-soft);color:var(--pos)}
.clo-e.clo-suivante .clo-ic{border-color:var(--accent);color:var(--coral-text)}
.clo-t{font-size:14px;font-weight:650;color:var(--ink);line-height:24px}
.clo-e.clo-fait .clo-t{color:var(--ink-2)}
.clo-s{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:1px}
.clo-s b{color:var(--ink-2);font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.clo-a{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;max-width:420px;min-height:24px}
.clo-q{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.clo-q.clo-ok{color:var(--pos);font-weight:600}
.clo-defaire{font-size:11.5px}
.clo-pied{font-size:12px;color:var(--ink-3);line-height:1.6;margin:14px 2px 0}
@media(max-width:720px){
  .clo{padding:4px 14px}
  .clo-e{grid-template-columns:24px minmax(0,1fr)}
  .clo-a{grid-column:2;justify-content:flex-start;max-width:none}
}

@media(max-width:1000px){
  .fi-kpis,.fi-kpis.quatre,.fi-kpis.cinq{grid-template-columns:repeat(2,1fr)}
  .fi-cols{grid-template-columns:1fr;gap:6px}
  .fi-cols .fi-t .res{margin-top:14px}
  .fi-t.large{--fi-cols:38px 1fr 104px 104px}
}
@media(max-width:620px){
  .fi-kpis,.fi-kpis.quatre,.fi-kpis.cinq{grid-template-columns:1fr}
  .fi-t,.fi-t.large{--fi-cols:36px 1fr 100px}
  .fi-t .ent .an.n1,.fi-t .m.n1{display:none}
}