/* ============================================================================
   ÉCRANS — RÈGLEMENTS CLIENTS (TRE-11) ET FOURNISSEURS (TRE-12)

   UNE SEULE FEUILLE POUR DEUX ÉCRANS, et c'est la règle du dépôt : encaisser et
   payer sont le même geste vu des deux côtés, avec la même fiche, la même table
   d'imputation et le même récapitulatif. Deux feuilles auraient été deux copies.
   Le préfixe est celui des maquettes de la passation, .r1- pour les clients et
   .r2- pour les fournisseurs (docs/modeles/design_handoff_easycompta) ; les deux
   familles partagent les mêmes règles, écrites une fois.

   CE QUI N'EST PAS ICI : .r1-fait / .r2-fait, dessinés par la feuille de MODULE
   css/easycompta-vignette.css.
   ========================================================================== */

.appgrid .r1-onglets, .appgrid .r2-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 .r1-onglets > button, .appgrid .r2-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 .r1-onglets > button:hover, .appgrid .r2-onglets > button:hover { color: var(--et-form-blue); }
.appgrid .r1-onglets > button.est-actif, .appgrid .r2-onglets > button.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }

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

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

/* Le champ d'imputation, dans la table : petit, aligné à droite, mono — on y tape
   un montant en regard d'un solde, et l'œil doit pouvoir les comparer. */
.xp-corps .r1-mini, .xp-corps .r2-mini { box-sizing: border-box; width: 100%; height: 26px; padding: 0 6px; text-align: right; font-family: var(--et-font-mono); font-size: 13px; background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: var(--et-r2); color: var(--et-ink); outline: none; }
.xp-corps .r1-mini:focus, .xp-corps .r2-mini:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.xp-corps .r2-case { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; cursor: pointer; }

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