/* ==========================================================================
   B18 V2 — Le suivi financier (A16), 23/09/2026

   Piste A des trois montrées à Stéphanie : cartes teintées. « Option A. »

   Aucune valeur en dur : tout passe par les jetons (§7). Un nom inventé ne
   fait pas d'erreur, il rend la déclaration invalide et la propriété retombe
   à sa valeur initiale — une ligne transparente qui a l'air juste sur fond
   clair. C'est le défaut du 17/09, et `outils-v2/essai-jetons-existants.mjs`
   le surveille.
   ========================================================================== */

/* --- Les trois cartes --------------------------------------------------- */
.fi-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

/* QUATRE CARTES DEPUIS LE 24/09/2026 — « Cette année » rejoint le jour, la
   semaine et le mois. Le nombre est porté par l'attribut plutôt que déduit :
   une grille qui compte ses enfants en CSS se trompe le jour où l'un d'eux
   est masqué par un droit. */
.fi-grille[data-n="4"] { grid-template-columns: repeat(4, 1fr); }

/* Entre le seuil mobile et 1100 px, quatre colonnes serrent les montants à
   se couper. Deux par deux, elles respirent — et c'est la transformation du
   §7, pas une compression. */
@media (min-width: 821px) and (max-width: 1100px) {
  .fi-grille[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
}

.fi-carte {
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: var(--e-4);
  /* LE DÉGRADÉ EST DE LA MÊME TEINTE QUE LA CARTE, et c'est la règle : du
     relief, pas de la couleur. « Sobre ≠ plat » — des dégradés discrets sur
     les fonds sont bienvenus, à condition de ne pas introduire une teinte de
     plus. Ici, --surface2 vers --surface. */
  background: linear-gradient(170deg, var(--surface2) 0%, var(--surface) 46%);
  box-shadow: var(--ombre-basse);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  cursor: pointer;
}

.fi-carte:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* La carte dont le détail est ouvert. Un filet, pas un aplat : la couleur
   identifie, elle ne dit pas le statut (§7). */
.fi-carte[aria-current="true"] { border-color: var(--teal); }

.fi-haut { display: flex; align-items: center; gap: var(--e-3); }
.fi-lab { font-weight: var(--graisse-appui); }
.fi-nb { margin-left: auto; font-size: var(--t-petit); color: var(--encre3); }

.fi-ico {
  width: 34px; height: 34px;
  border-radius: var(--r-m);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.fi-trace { width: 18px; height: 18px; display: block; }

/* Les trois teintes reprennent celles des phases du déroulé : elles existent
   déjà, elles tiennent le contraste, et en inventer trois de plus ferait
   trois couleurs de plus à signifier quelque chose — or plus il y en a, moins
   le rouge se voit (§7). */
.fi-ico[data-t="jour"]    { background: var(--phase-avant-l); color: var(--phase-avant); }
.fi-ico[data-t="semaine"] { background: var(--phase-apres-l); color: var(--phase-apres); }
.fi-ico[data-t="mois"]    { background: var(--teal-l);        color: var(--teal-d); }
.fi-ico[data-t="annee"]   { background: var(--lagon-f);       color: var(--lagon-b); }

.fi-val { margin: 0; line-height: 1.1; }
.fi-ttc {
  font-size: var(--t-titre);
  font-weight: var(--graisse-forte);
  letter-spacing: -.02em;
}
.fi-dev { font-size: var(--t-appui); font-weight: var(--graisse-appui); color: var(--encre2); }
.fi-ht { margin: 0; color: var(--encre2); font-size: var(--t-petit); }

.fi-perim {
  margin: 0;
  font-size: var(--t-micro);
  font-weight: var(--graisse-caps);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre3);
}

.fi-vide { margin: var(--e-3) 0 0; font-weight: var(--graisse-appui); }

/* --- La tendance -------------------------------------------------------- */
.fi-bas { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* PASTEL AVEC DU TEXTE FONCÉ DE LA MÊME TEINTE, jamais un aplat saturé à
   texte blanc. Règle de goût transverse, appliquée partout dans l'app. */
.fi-tend {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-p);
  padding: 3px var(--e-2);
  font-size: var(--t-micro);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
}
.fi-fleche { width: 13px; height: 13px; display: block; }
.fi-tend[data-s="haut"]    { background: var(--pousse-f); color: var(--pousse); }
.fi-tend[data-s="bas"]     { background: var(--lave-f);   color: var(--lave); }
.fi-tend[data-s="plat"]    { background: var(--surface2); color: var(--encre2); }
/* « Comparaison impossible » est un GRIS, jamais un rouge : ce n'est pas une
   mauvaise nouvelle, c'est une absence de repère. Le rouge reste aux vrais
   problèmes (§7). */
.fi-tend[data-s="inconnu"] { background: var(--surface2); color: var(--encre3); }

.fi-vs { font-size: var(--t-micro); color: var(--encre3); }

/* --- La conclusion, sous son filet -------------------------------------- */
.fi-concl {
  margin: var(--e-2) 0 0;
  border-top: 1px solid var(--trait2);
  padding-top: var(--e-3);
  font-size: var(--t-petit);
  color: var(--encre2);
}
.fi-concl[data-s="alerte"] { color: var(--ambre); }

/* --- Le détail ---------------------------------------------------------- */
.fi-detail {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  overflow: hidden;
}
/* L'EN-TÊTE EST UN BOUTON : c'est lui qui replie le cadre. Toute la barre,
   pas un chevron de 16 px — la cible tactile est la ligne entière. */
.fi-detail-t {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  min-height: var(--cible);
  background: var(--surface2);
  border: 0;
  border-bottom: 1px solid var(--trait);
  color: var(--encre3);
  text-align: left;
  cursor: pointer;
}
.fi-detail-t:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fi-detail-t[aria-expanded="false"] { border-bottom: 0; }

.fi-detail-mots { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; min-width: 0; }
.fi-detail-nom {
  font-size: var(--t-petit);
  font-weight: var(--graisse-caps);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* LE COMPTE EST DANS L'EN-TÊTE, et c'est ce qui rend le repli honnête : un
   cadre fermé qui n'annonce pas son contenu cache une information. */
.fi-detail-cpt { font-size: var(--t-micro); color: var(--encre3); text-transform: none; letter-spacing: 0; }

.fi-chev {
  width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto;
  transition: transform .15s ease;
}
.fi-detail-t[aria-expanded="true"] .fi-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .fi-chev { transition: none; } }
.fi-rien { margin: 0; padding: var(--e-5) var(--e-4); color: var(--encre2); }

.fi-ligne {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--trait2);
  min-height: var(--cible);
  cursor: pointer;
}
.fi-ligne:last-child { border-bottom: 0; }
.fi-ligne:hover { background: var(--surface2); }
.fi-ligne:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Un dossier hors du total se voit sans crier : le fond ambré pâle suffit,
   il n'y a rien à réparer en urgence. */
.fi-ligne[data-exclu="oui"] { background: var(--ambre-f); }

.fi-l-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fi-l-date { font-size: var(--t-micro); color: var(--encre3); }
.fi-l-qui { font-weight: var(--graisse-appui); }
.fi-l-form { font-size: var(--t-micro); color: var(--encre3); }

.fi-l-d { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.fi-l-ttc { font-weight: var(--graisse-forte); }
.fi-l-ht { font-size: var(--t-micro); color: var(--encre3); }
.fi-l-exclu { font-size: var(--t-petit); color: var(--ambre); text-align: right; }

/* --- Les états ---------------------------------------------------------- */
.fi-attente, .fi-refus {
  margin: 0; padding: var(--e-6) var(--e-4);
  color: var(--encre2); text-align: center;
}
.fi-panne {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: var(--e-5) var(--e-4);
  text-align: center;
}
.fi-panne-t { margin: 0 0 var(--e-2); font-weight: var(--graisse-appui); }
.fi-panne-q { margin: 0; color: var(--encre2); font-size: var(--t-petit); }

/* --- La frise des mois --------------------------------------------------
   Une barre par mois, sa hauteur au prorata du chiffre. Elle donne la FORME
   de la saison ; la liste en dessous donne les nombres. */
.fi-frise {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: var(--e-4);
  box-shadow: var(--ombre-basse);
  margin-bottom: var(--e-5);
}

.fi-frise-t {
  display: flex; align-items: center; gap: var(--e-3);
  flex-wrap: wrap; margin-bottom: var(--e-4);
}
.fi-frise-nom {
  font-size: var(--t-petit);
  font-weight: var(--graisse-caps);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre3);
}
.fi-frise-leg {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro); color: var(--encre3);
}
.fi-frise-ech {
  width: 14px; height: 14px; flex: 0 0 auto;
  border-radius: var(--r-s);
  border: 1px solid var(--trait);
  background: repeating-linear-gradient(45deg,
    var(--ambre-f), var(--ambre-f) 3px, var(--surface) 3px, var(--surface) 6px);
}

/* LES COLONNES NE SONT PAS COMPTÉES : la frise en porte de une à douze selon
   l'ancienneté des dossiers. `grid-auto-flow: column` les répartit sans que
   la feuille ait à connaître leur nombre. */
.fi-barres {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 11 * var(--e-2)) / 12); /* un mois = 1/12, meme seul */
  gap: var(--e-2);
  align-items: end;
}

.fi-barre {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: var(--e-2) 2px;
  border-radius: var(--r-m);
  font: inherit; color: inherit; cursor: pointer;
}
.fi-barre:hover { background: var(--surface2); }
.fi-barre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.fi-barre-h { width: 100%; height: 110px; display: flex; align-items: flex-end; }
/* `--part` n'est pas un jeton : c'est le prorata du mois, posé par le script
   sur chaque barre. Le minimum de 3 px garde une assise visible à un mois
   presque vide — une barre de zéro pixel se lit comme un mois absent. */
.fi-barre-f {
  width: 100%;
  height: calc(var(--part) * 1%);
  min-height: 3px;
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--teal-l);
  border-bottom: 2px solid var(--teal);
}
.fi-barre[aria-current="true"] .fi-barre-f { background: var(--teal); }

/* HACHURÉ, JAMAIS ROUGE. Une période non importée n'est pas une panne à
   réparer en urgence, c'est un trou à combler quand on voudra — et le rouge
   reste aux vrais problèmes (§7). */
.fi-barre[data-etat="non-importe"] .fi-barre-f {
  background: repeating-linear-gradient(45deg,
    var(--ambre-f), var(--ambre-f) 4px, var(--surface2) 4px, var(--surface2) 8px);
  border-bottom-color: var(--ambre);
}

.fi-barre-m { font-size: var(--t-micro); color: var(--encre3); }
.fi-barre[aria-current="true"] .fi-barre-m {
  color: var(--encre); font-weight: var(--graisse-appui);
}
.fi-barre-v { font-size: var(--t-micro); font-weight: var(--graisse-appui); color: var(--encre2); }
.fi-barre[data-etat="non-importe"] .fi-barre-v {
  color: var(--encre3); font-weight: var(--graisse-normale);
}

/* --- Mois par mois ------------------------------------------------------ */
.fi-mois { margin-top: var(--e-4); }
/* Le mois dont le détail est ouvert, repéré par un filet à gauche : la
   couleur identifie, elle ne dit pas un statut (§7). */
.fi-ligne[aria-current="true"] { box-shadow: inset 3px 0 0 var(--teal); }

/* --- Téléphone ----------------------------------------------------------
   Responsive par TRANSFORMATION, pas par compression (§7) : trois cartes
   côte à côte deviennent trois lignes, jamais trois petites cartes. */
@media (max-width: 820px) {
  .fi-grille, .fi-grille[data-n="4"] { grid-template-columns: 1fr; gap: var(--e-3); }

  /* DOUZE BARRES CÔTE À CÔTE À 375 px SERAIENT ILLISIBLES. La frise ne
     rétrécit pas : elle devient une liste, une barre à l'horizontale par
     mois — responsive par transformation, pas par compression (§7). */
  .fi-frise { padding: var(--e-3); border-radius: var(--r-m); }
  .fi-barres { grid-auto-flow: row; grid-auto-columns: 1fr; gap: 0; align-items: stretch; }
  .fi-barre {
    flex-direction: row; align-items: center; gap: var(--e-3);
    padding: var(--e-2); border-bottom: 1px solid var(--trait2);
    border-radius: 0; min-height: var(--cible);
  }
  .fi-barre:last-child { border-bottom: 0; }
  .fi-barre-m { order: 0; width: 3.6em; text-align: left; }
  .fi-barre-h { order: 1; flex: 1; width: auto; height: 12px; align-items: stretch; }
  .fi-barre-f {
    width: calc(var(--part) * 1%);
    height: auto; min-width: 3px; min-height: 0;
    /* 2px, PAS UN JETON — --r-s (8px) DÉFORME CETTE BARRE. Trouvé à la
       capture (24/09), invisible à toute mesure DOM : un rayon plus grand
       que la largeur de 3 px se fait automatiquement écraser par le
       navigateur sur les DEUX axes (CSS Backgrounds §5.5), et le petit trait
       devient un quart de cercle — à l'œil, une parenthèse « ) » plaquée sur
       le nom du mois. Avec 2 px, la largeur minimale (3 px) reste toujours
       plus grande que le rayon, donc aucun écrasement. */
    border-radius: 0 2px 2px 0;
    border-bottom: 0; border-right: 2px solid var(--teal);
  }
  .fi-barre[data-etat="non-importe"] .fi-barre-f { border-right-color: var(--ambre); }
  .fi-barre-v { order: 2; width: 6.4em; text-align: right; }
  .fi-ttc { font-size: var(--t-titre-s); }
  .fi-detail { border-radius: var(--r-m); }
  .fi-ligne { padding: var(--e-3); }
  .fi-l-form { display: none; }
}