/* ============================================================================
   ÉCRAN — POSITION MULTI-BANQUES (TRE-09)

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

   CE QUI N'EST PAS ICI : le rail d'onglets (.tbd-*, feuille de module
   css/easycompta-onglets.css) et la vignette (.p9-carte, .p9-parite, dessinées
   par css/easycompta-vignette.css). Cette feuille pose les cartes de compte, la
   jauge de découvert, la courbe des dix prochains jours et les blocs de fiche.
   ========================================================================== */

.appgrid .p9-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; }

/* UNE CARTE PAR COMPTE : le filet du haut dit l'état — bleu sain, ambre tendu,
   rouge à découvert. La carte s'ouvre au clic, comme une ligne de liste. */
.appgrid .p9-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.appgrid .p9-carte { padding: 8px 11px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-top: 3px solid var(--et-form-blue); cursor: pointer; }
.appgrid .p9-carte:hover { background: var(--et-surface-3); }
.appgrid .p9-carte.alerte { border-top-color: var(--et-danger); }
.appgrid .p9-carte.tendue { border-top-color: var(--et-avertissement-mark); }
.appgrid .p9-carte .t { display: flex; align-items: baseline; gap: 7px; }
.appgrid .p9-carte .t b { font-size: 13px; font-weight: 700; color: var(--et-ink); }
.appgrid .p9-carte .s { display: block; font-family: var(--et-font-mono); font-size: 17px; font-weight: 600; margin-top: 2px; }
.appgrid .p9-carte .l { display: block; font-size: 12px; color: var(--et-muted); margin-top: 2px; line-height: 1.4; }

/* La jauge : part du plafond de découvert consommée. */
.appgrid .p9-jauge { height: 5px; margin-top: 8px; background: var(--et-surface-3); }
.appgrid .p9-jauge > i { display: block; height: 100%; }

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

/* La courbe des dix prochains jours : des barres, pas une bibliothèque. */
.appgrid .p9-courbe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 132px; padding: 10px 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .p9-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.appgrid .p9-bar { width: 100%; background: var(--et-form-blue); }
.appgrid .p9-bar.bas { background: var(--et-avertissement); }
.appgrid .p9-bar.neg { background: var(--et-danger); }
.appgrid .p9-col span { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }

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

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

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