/* ============================================================================
   ÉCRAN — ANALYSE DES FRAIS BANCAIRES (TRE-17)

   Feuille d'ÉCRAN. Préfixe .fb-, celui de la maquette de la passation
   (docs/modeles/design_handoff_easycompta, TRE-17).

   CE QUI N'EST PAS ICI : le rail d'onglets (.tbd-*, module), la vignette
   (.fb-fait / .fb-faits, css/easycompta-vignette.css) et les fenêtres (.xp-*).
   Cette feuille pose la courbe mensuelle, les jauges de part, les blocs de
   fiche et la liste des anomalies.
   ========================================================================== */

.appgrid .fb-chip { display: inline-block; padding: 1px 7px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }

.appgrid .fb-ligne { cursor: pointer; }
.appgrid .fb-ligne:hover { background: var(--et-surface-3); }

.appgrid .fb-titre { display: flex; align-items: center; gap: 9px; margin: 18px 0 4px; padding-bottom: 5px; border-bottom: 2px solid var(--et-filet-fort); }
.appgrid .fb-titre::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--et-form-blue); }
.appgrid .fb-titre span { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--et-table-head-encre); }
.appgrid .fb-note { margin: 6px 0 10px; max-width: 94ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }

/* La courbe des frais : un mois qui dépasse la moyenne de plus de moitié passe
   en ambre. C'est presque toujours un arrêté trimestriel d'agios, pas une
   dérive du tarif — mais le trésorier doit pouvoir le vérifier d'un regard. */
.appgrid .fb-courbe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 5px; height: 140px; padding: 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .fb-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.appgrid .fb-bar { width: 70%; background: var(--et-form-blue); }
.appgrid .fb-bar.haut { background: var(--et-avertissement); }
.appgrid .fb-col span { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .fb-col b { font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-ink); }

.appgrid .fb-part { height: 5px; margin-top: 4px; background: var(--et-surface-3); }
.appgrid .fb-part > i { display: block; height: 100%; }

.appgrid .fb-paire, .xp-corps .fb-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }

/* UNE ANOMALIE EST CLIQUABLE parce qu'elle doit se prouver : contester demande
   une trace, et la fiche renvoie au mouvement qui la porte. */
.appgrid .fb-anomalie { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 11px; background: transparent; border: 0; border-bottom: 1px solid var(--et-hairline); text-align: left; cursor: pointer; font-family: inherit; }
.appgrid .fb-anomalie:hover { background: var(--et-surface-3); }
.appgrid .fb-anomalie > i { flex: none; margin-top: 2px; font-size: 14px; }
.appgrid .fb-anomalie .l { flex: 1; min-width: 0; }
.appgrid .fb-anomalie .l b { display: block; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .fb-anomalie .l span { display: block; font-size: 12px; color: var(--et-muted); line-height: 1.45; }
.appgrid .fb-anomalie .m { margin-left: auto; flex: none; font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }

.appgrid .fb-encart { padding: 10px 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-left: 4px solid var(--et-avertissement-mark); font-size: 13px; line-height: 1.6; color: var(--et-ink); }

@media (max-width: 1024px) {
  .appgrid .fb-paire, .xp-corps .fb-paire { grid-template-columns: minmax(0, 1fr); }
  .appgrid .fb-anomalie { min-height: 44px; }
}