/* ============================================================================
   ÉCRAN — PARAMÈTRES DE TRÉSORERIE (TRE-13)

   Feuille d'ÉCRAN et non de module : ces classes ne servent qu'ici, à la liste
   de réglages « un rang par paramètre » de la passation EasyCompta
   (docs/modeles/design_handoff_easycompta, TRE-13). Le jour où un second écran
   emploie .g3-rang, la règle du dépôt s'applique — la classe remonte dans le
   gabarit (section 11 de modele-erp.css), elle ne se recopie pas.

   LE PRÉFIXE EST CELUI DE LA MAQUETTE (.g3-), gardé tel quel pour que l'écran
   et sa référence de conception se lisent en regard.

   AUCUNE COULEUR EN DUR : tout vient des jetons --et-*.
   ========================================================================== */

.appgrid .g3-zone { flex: 1 1 auto; display: block; min-height: 0; padding: 16px 20px 40px; overflow: auto; background: var(--et-surface-2); }
.appgrid .g3-doc { max-width: 980px; }

/* Intitulé de groupe : filet bleu à gauche, mono capitales, filet inférieur fort —
   le motif des en-têtes de groupe du gabarit, à la mesure de cet écran. */
.appgrid .g3-titre { display: flex; align-items: center; gap: 9px; margin: 20px 0 4px; padding-bottom: 5px; border-bottom: 2px solid var(--et-filet-fort); }
.appgrid .g3-titre::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--et-form-blue); }
.appgrid .g3-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 .g3-note { margin: 6px 0 10px; max-width: 88ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }

/* UN RANG PAR RÉGLAGE : ce qu'il fait à gauche, ce qu'il vaut à droite, le geste
   au bout. Les rangs se touchent — un seul filet entre deux. */
.appgrid .g3-rang { display: flex; align-items: flex-start; gap: 16px; padding: 12px 14px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-top: 0; }
.appgrid .g3-rang:first-of-type { border-top: 1px solid var(--et-hairline); }
.appgrid .g3-rang:hover { background: var(--et-surface-3); }
.appgrid .g3-rang .lib { flex: 1 1 auto; min-width: 0; }
.appgrid .g3-rang .lib b { display: block; font-size: 13px; font-weight: 700; color: var(--et-ink); }
.appgrid .g3-rang .lib p { margin: 3px 0 0; font-size: 12px; line-height: 1.6; color: var(--et-muted); max-width: 62ch; }
.appgrid .g3-rang .val { flex: 0 0 210px; text-align: right; font-family: var(--et-font-mono); font-size: 15px; font-weight: 500; color: var(--et-ink); }
.appgrid .g3-rang .val i { display: block; font-family: var(--et-font); font-style: normal; font-size: 12px; color: var(--et-muted); margin-top: 2px; }
.appgrid .g3-rang .act { flex: 0 0 auto; }

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

/* L'interrupteur : un rectangle et un pion, à angles droits comme le reste. */
.appgrid .g3-inter { width: 38px; height: 21px; flex-shrink: 0; border: 1px solid var(--et-form-border); background: var(--et-surface-3); padding: 2px; cursor: pointer; display: flex; }
.appgrid .g3-inter.est-on { background: var(--et-form-blue); border-color: var(--et-form-blue); justify-content: flex-end; }
.appgrid .g3-pion { width: 15px; height: 15px; background: var(--et-sur-aplat); }

/* CHAQUE BASCULE DIT SON EFFET DANS LES DEUX SENS. C'est la règle de la
   passation : un réglage qui ne dit que ce qu'il fait quand il est actif laisse
   deviner l'autre moitié, et c'est celle qui coûte. */
.appgrid .g3-effet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--et-hairline); border: 1px solid var(--et-hairline); margin-top: 8px; }
.appgrid .g3-effet > div { padding: 9px 11px; background: var(--et-surface); }
.appgrid .g3-effet .n { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); margin-bottom: 3px; }
.appgrid .g3-effet p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--et-ink); }

/* Étapes de la simulation : une ligne par contrôle rejoué. */
.appgrid .g3-etape { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--et-hairline); }
.appgrid .g3-etape .t { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .g3-etape .d { font-size: 12px; color: var(--et-muted); line-height: 1.5; }

/* DEUX INTENTIONS QUI N'ONT PAS LE MEME PALIER, ET QUI ETAIENT DANS LE MEME BLOC.
   Le commentaire de la regle tactile annoncait « sous 1024 px » ; la requete disait
   900. Entre 901 et 1024 px, l'interrupteur n'avait donc PAS ses 44 px, alors que
   la note affirmait le contraire. Les deux sont separees. */

/* La mise en page se replie a 1100 px : c'est la que la colonne de contenu vaut
   828 px (rail plein a 256 px), soit ce que le palier de 900 px visait — il la
   mesurait a 832 px, mais par en dessous, et laissait donc passer la bande
   1025-1104 ou elle tombe a 753 px. Voir docs/conventions-responsive.md §2. */
@media (max-width: 1100px) {
  .appgrid .g3-rang { flex-wrap: wrap; }
  .appgrid .g3-rang .val { flex: 1 1 100%; text-align: left; }
  .appgrid .g3-effet { grid-template-columns: minmax(0, 1fr); }
}

/* La regle tactile a son propre palier, celui de docs/cibles-tactiles.md, et il
   ne se deduit pas de la mise en page : c'est un seuil d'usage, pas de largeur
   utile. */
@media (max-width: 1024px) {
  .appgrid .g3-inter { min-height: 44px; min-width: 52px; align-items: center; }
}