/* ============================================================================
   ÉCRAN — ANALYSE DES FLUX (TRE-16)

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

   CE QUI N'EST PAS ICI : le rail d'onglets (.tbd-*, module) et la vignette
   (.af-fait / .af-faits, dessinées par css/easycompta-vignette.css). Cette
   feuille pose la barre de filtres, l'histogramme à double sens, la matrice
   mois × axe à première colonne figée, et le bloc des contreparties.
   ========================================================================== */

.appgrid .af-barre { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .af-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 .af-titre { display: flex; align-items: center; gap: 9px; margin: 18px 0 4px; padding-bottom: 5px; border-bottom: 2px solid var(--et-filet-fort); }
.appgrid .af-titre::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--et-form-blue); }
.appgrid .af-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 .af-note { margin: 6px 0 10px; max-width: 94ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }

/* L'HISTOGRAMME À DOUBLE SENS : ce qui entre monte, ce qui sort descend, et
   l'étiquette du mois tient l'axe. L'écart entre les deux moitiés EST le flux
   net — c'est lui qui explique la position, pas le résultat comptable. */
.appgrid .af-histo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 5px; height: 190px; padding: 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .af-mois { display: grid; grid-template-rows: 1fr 16px 1fr; height: 100%; align-items: center; }
.appgrid .af-haut { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.appgrid .af-bas { display: flex; align-items: flex-start; justify-content: center; height: 100%; }
.appgrid .af-in { width: 74%; background: var(--et-succes); }
.appgrid .af-out { width: 74%; background: var(--et-danger); }
.appgrid .af-etiq { display: flex; align-items: center; justify-content: center; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

/* LA MATRICE : première colonne et première ligne figées, parce qu'une cellule
   de mars sans son libellé de ligne ne veut rien dire. Le montant est cliquable
   — il ouvre les mouvements qui le composent. */
.appgrid .af-matrice { border-collapse: collapse; width: 100%; font-size: 13px; }
.appgrid .af-matrice th { position: sticky; top: 0; z-index: 2; background: var(--et-table-head); color: var(--et-sur-ardoise-plein); font-size: 12px; font-weight: 600; padding: 6px 8px; text-align: right; white-space: nowrap; }
.appgrid .af-matrice th:first-child { text-align: left; position: sticky; left: 0; z-index: 3; }
.appgrid .af-matrice td { padding: 5px 8px; border-bottom: 1px solid var(--et-hairline); font-family: var(--et-font-mono); text-align: right; white-space: nowrap; }
.appgrid .af-matrice td:first-child { text-align: left; font-family: var(--et-font); font-weight: 600; position: sticky; left: 0; background: var(--et-surface); }
.appgrid .af-matrice tr:hover td, .appgrid .af-matrice tr:hover td:first-child { background: var(--et-surface-3); }
.appgrid .af-matrice tr.total td { background: var(--et-surface-3); font-weight: 700; border-top: 2px solid var(--et-filet-fort); }
.appgrid .af-cell { cursor: pointer; }
.appgrid .af-cell:hover { text-decoration: underline; }

.appgrid .af-bloc { margin-top: 12px; }
.appgrid .af-bloc .h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.appgrid .af-bloc .h::before { content: ""; flex: none; width: 3px; height: 13px; background: var(--et-form-blue); }
.appgrid .af-bloc .h span { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--et-table-head-encre); }

.appgrid .af-tab, .xp-corps .af-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.appgrid .af-tab th, .xp-corps .af-tab th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .af-tab td, .xp-corps .af-tab td { padding: 5px 6px; border-bottom: 1px solid var(--et-hairline); font-family: var(--et-font-mono); }
.appgrid .af-tab td.txt, .xp-corps .af-tab td.txt { font-family: var(--et-font); }
.appgrid .af-tab td.num, .xp-corps .af-tab td.num { text-align: right; }

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

@media (max-width: 1024px) {
  /* Un bouton d'axe reste une cible de 44 px (docs/cibles-tactiles.md). */
  .appgrid .af-barre .btn-sm { min-height: 44px; }
}