/* ============================================================================
   ÉCRAN — REMISES, EFFETS ET IMPAYÉS (TRE-03)

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

   CE QUI N'EST PAS ICI : .e3-fait et .e3-faits, dessinés par la feuille de
   MODULE css/easycompta-vignette.css — cette feuille ne pose que leur grille.

   LE PARCOURS EN TROIS TEMPS (.e3-etapes) est le motif central de l'écran :
   un chèque, un effet et un impayé ont chacun trois états, et c'est la bande
   d'étapes qui dit où en est la pièce plutôt qu'une pastille de plus.
   ========================================================================== */

.appgrid .e3-ligne:hover { background: var(--et-surface-3); cursor: pointer; }
.appgrid .e3-chip, .xp-corps .e3-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 .e3-mot { margin-top: 10px; font-size: 12px; color: var(--et-muted); line-height: 1.6; }

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

/* Le tableau d'un bordereau ou d'une écriture, DANS une fenêtre : pas de cadre
   .tbl-cadre, qui n'a pas de sens en surimpression. */

/* Le parcours : trois cases jointives, la faite en vert, la courante en bleu. */
.xp-corps .e3-etapes { display: flex; gap: 0; margin-top: 4px; flex-wrap: wrap; }
.xp-corps .e3-etape { flex: 1 1 0; min-width: 120px; padding: 7px 10px; background: var(--et-surface-3); border: 1px solid var(--et-hairline); border-right: 0; }
.xp-corps .e3-etape:last-child { border-right: 1px solid var(--et-hairline); }
.xp-corps .e3-etape.faite { background: var(--et-succes-bg); border-color: var(--et-succes-bg); }
.xp-corps .e3-etape.courante { background: var(--et-tint); border-color: var(--et-form-blue); }
.xp-corps .e3-etape .n { display: block; font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--et-muted); }
.xp-corps .e3-etape .d { display: block; font-size: 12px; color: var(--et-ink); margin-top: 2px; line-height: 1.4; }

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