/* ============================================================================
   ÉCRAN — FINANCEMENT : EMPRUNTS ET LIGNES DE CRÉDIT (TRE-07)

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

   CE QUI N'EST PAS ICI : le rail d'onglets interne (.eca-onglets, gabarit de
   module css/easycompta-onglets.css), la vignette (.f7-fait / .f7-faits,
   css/easycompta-vignette.css) et les fenêtres (.xp-*, css/easycompta-modal.css).
   Cette feuille pose la jauge d'utilisation d'une ligne, les blocs de fiche et
   le tableau d'amortissement défilant.
   ========================================================================== */

.appgrid .f7-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 .f7-ligne { cursor: pointer; }
.appgrid .f7-ligne:hover { background: var(--et-surface-3); }

/* La jauge d'une ligne de crédit : la part du plafond déjà consommée. Elle vit
   dans la cellule « utilisé », sous le montant — la lire, c'est voir d'un coup
   ce qui reste à tirer avant la révision. */
.appgrid .f7-jauge { height: 5px; margin-top: 5px; background: var(--et-surface-3); }
.appgrid .f7-jauge > i { display: block; height: 100%; }

.appgrid .f7-note { margin: 10px 0 0; max-width: 92ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }

/* Blocs de fenêtre : caractéristiques, amortissement, écriture. */
.appgrid .f7-paire, .xp-corps .f7-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.appgrid .f7-plein, .xp-corps .f7-plein { grid-column: 1 / -1; }

/* L'échéancier se lit d'un coup d'œil : ce qui est payé s'efface, la prochaine
   échéance s'éclaire — c'est la seule ligne sur laquelle un geste est possible. */
.appgrid .eca-tab tr.payee td, .xp-corps .eca-tab tr.payee td { color: var(--et-muted); }

.appgrid .f7-defile, .xp-corps .f7-defile { max-height: 260px; overflow: auto; border: 1px solid var(--et-hairline); }

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