/* ============================================================================
   ÉCRAN — MOUVEMENTS ET TRANSFERTS (TRE-02)

   Feuille d'ÉCRAN : le préfixe .m2- est celui de la maquette de la passation
   (docs/modeles/design_handoff_easycompta, TRE-02), gardé pour que l'écran et
   sa référence se lisent en regard.

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

   L'ÉCRITURE GÉNÉRÉE est un tableau à part (.m2-ecriture) et non une table du
   gabarit : elle vit DANS une fenêtre, où le cadre .tbl-cadre n'a pas de sens.
   ========================================================================== */

/* La barre de filtres : au-dessus de la liste, sur la surface, séparée par un filet. */
.appgrid .m2-barre { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 0 12px; }

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

/* Blocs de la fenêtre : opération, écriture générée. */

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

/* L'ÉCRITURE QUE LE MOUVEMENT PRODUIT, montrée avant qu'elle existe. C'est la
   règle de la passation : une saisie de trésorerie EST une écriture, et l'écran
   la donne à lire au lieu de la laisser deviner. */
.xp-corps .m2-ecriture { width: 100%; border-collapse: collapse; font-family: var(--et-font-mono); font-size: 13px; }
.xp-corps .m2-ecriture th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); font-weight: 600; padding: 3px 6px; border-bottom: 1px solid var(--et-hairline); }
.xp-corps .m2-ecriture td { padding: 4px 6px; border-bottom: 1px solid var(--et-hairline); }
.xp-corps .m2-ecriture td.num { text-align: right; }

.appgrid .m2-mot { margin-top: 10px; font-size: 12px; color: var(--et-muted); line-height: 1.6; }

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