/* ============================================================================
   ÉCRAN — MOYENS DE PAIEMENT (TRE-14)

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

   L'ÉCRAN DOCUMENTE, IL NE PILOTE PAS : d'où l'encart d'avertissement en tête
   (.m4-encart, filet gauche ambre) et les rangs d'arbitrage (.m4-rang), qui
   n'existent nulle part ailleurs dans le module. Le jour où un référentiel de
   moyens sera créé, cette feuille rétrécira au lieu de grandir.
   ========================================================================== */

.appgrid .m4-onglets { display: flex; padding: 0 4px; margin-bottom: 12px; background: var(--et-surface); border-bottom: 1px solid var(--et-hairline); flex-shrink: 0; flex-wrap: wrap; }
.appgrid .m4-onglets > button { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--et-muted); cursor: pointer; }
.appgrid .m4-onglets > button:hover { color: var(--et-form-blue); }
.appgrid .m4-onglets > button.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }

.appgrid .m4-ligne:hover { background: var(--et-surface-3); cursor: pointer; }
.appgrid .m4-chip, .xp-corps .m4-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 .m4-note { margin: 8px 0 12px; max-width: 94ch; font-size: 12px; line-height: 1.65; color: var(--et-muted); }

/* L'ENCART QUI DIT CE QUI MANQUE. Un écran documentaire doit annoncer d'emblée
   qu'il ne pilote rien, sinon on cherche le bouton « Nouveau ». */
.appgrid .m4-encart { padding: 10px 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-left: 3px solid var(--et-avertissement-mark); margin-bottom: 12px; }
.appgrid .m4-encart b { display: block; font-size: 13px; color: var(--et-ink); margin-bottom: 3px; }
.appgrid .m4-encart p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--et-muted); max-width: 94ch; }

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

/* Les trois issues, avec leur coût : un rang par option, la pastille à droite. */
.appgrid .m4-rang { display: flex; align-items: flex-start; gap: 14px; padding: 10px 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-top: 0; }
.appgrid .m4-rang:first-of-type { border-top: 1px solid var(--et-hairline); }
.appgrid .m4-rang .l { flex: 1 1 auto; min-width: 0; }
.appgrid .m4-rang .l b { display: block; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .m4-rang .l p { margin: 2px 0 0; font-size: 12px; color: var(--et-muted); line-height: 1.5; max-width: 88ch; }

@media (max-width: 1024px) {
  .xp-corps .m4-paire { grid-template-columns: minmax(0, 1fr); }
  .appgrid .m4-onglets > button { height: 44px; }
}