/* ============================================================================
   ÉCRAN — NUMÉROTATION DES TIERS (CPT-07)

   Feuille d'ÉCRAN. Préfixe .n7-, celui de la maquette de la passation
   (docs/modeles/design_handoff_easycompta, CPT-07) — libre au dépôt, à la
   différence du .ep- de CPT-02 et du .pc- de CPT-04.

   POURQUOI LA GRILLE DE FORMULAIRE EST ICI, ET NON EMPRUNTÉE
     La maquette monte ses champs dans .xp-grille / .xp-cellule / .xp-champ. Ces
     classes-là sont le gabarit des FENÊTRES (easycompta-modal.css) : les employer
     dans une carte de page, c'est faire dépendre un écran du gabarit d'un modal,
     et la première retouche apportée aux fenêtres retomberait ici sans raison.
     La grille est donc posée en propre, en .n7-, avec la même anatomie.

   CE QUI N'EST PAS ICI : les cartes (.md-card, .md-head, compta-ux.css), le cadre
   de liste (.tbl-*), le surtitre de bloc (.flt-surtitre) — tous du gabarit.
   ========================================================================== */

/* La grille de champs : deux colonnes, une seule sous 700 px. Un champ « large »
   occupe la ligne entière — c'est le cas des options, qui alignent trois
   interrupteurs et n'entrent pas dans une demi-largeur. */
.appgrid .n7-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.appgrid .n7-large { grid-column: 1 / -1; }
.appgrid .n7-lab { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); margin-bottom: 2px; }
.appgrid .n7-aide { margin-top: 3px; font-size: 12px; color: var(--et-muted); line-height: 1.4; }
.appgrid .n7-mini { font-size: 12px; color: var(--et-muted); line-height: 1.45; }

/* Le raccourci de gabarit est un bouton qui se lit comme un exemple : il MONTRE
   le rendu (« C001 ») plutôt que de nommer le gabarit ({PREFIXE}{NUM}). C'est le
   rendu qu'on reconnaît, pas la formule. */
.appgrid .n7-raccourci {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--et-font-mono);
  font-size: 12px;
  color: var(--et-form-blue);
  cursor: pointer;
}
.appgrid .n7-raccourci:hover { color: var(--et-form-blue-d); text-decoration: underline; }

.appgrid .n7-avert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.45;
}

/* LA PASTILLE DE CODE. Elle sert à VOIR une suite d'un coup d'œil : vingt-quatre
   codes alignés montrent une régularité — ou un trou — qu'un tableau de
   vingt-quatre lignes ferait lire une par une. Le fond porte l'état, jamais le
   texte : un code se lit toujours en encre pleine. */
.appgrid .n7-code {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--et-font-mono);
  font-size: 12px;
  background: var(--et-surface-3);
  color: var(--et-ink);
}
.appgrid .n7-code.est-hors { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .n7-code.est-casse { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.appgrid .n7-code.est-trou { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .n7-code.est-neuf { background: var(--et-succes-bg); color: var(--et-succes-ink); }

/* Les onglets de type, et ceux des panneaux du bas : même dessin, deux emplois.
   Un seul jeu de règles — ils ne se distinguent que par ce qu'ils commandent. */
.appgrid .n7-onglets { display: flex; border-bottom: 1px solid var(--et-hairline); flex-wrap: wrap; }
.appgrid .n7-ong {
  padding: 7px 11px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--et-muted);
  cursor: pointer;
}
.appgrid .n7-ong:hover { color: var(--et-ink); background: var(--et-surface-3); }
.appgrid .n7-ong.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }

.appgrid .n7-panneau { padding: 11px 13px; }

/* La trace d'une réservation : un rang, un code, une note. Elle existe parce que
   la réservation SAUTE les codes déjà pris — sans la trace, la suite paraît
   désordonnée et le compteur, cassé. */
.appgrid .n7-trace { margin-top: 10px; border: 1px solid var(--et-hairline); }
.appgrid .n7-trace-tete {
  padding: 7px 10px;
  background: var(--et-surface-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--et-table-head);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.appgrid .n7-trace-ligne { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-top: 1px solid var(--et-rang); }

/* Les trois chiffres du compteur : même anatomie que la vignette du module, mais
   à trois colonnes et sans sa bande — ils vivent DANS une carte, pas au-dessus
   d'un écran. */
.appgrid .n7-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appgrid .n7-chiffre { padding: 8px 10px; background: var(--et-surface-3); border-left: 3px solid var(--et-form-blue); }
.appgrid .n7-chiffre-cle { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--et-muted); }
.appgrid .n7-chiffre-val { margin-top: 3px; font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); }

/* 720 px, sur l'échelle retenue de docs/conventions-responsive.md — le palier
   était à 700, un cran que rien d'autre dans le dépôt ne connaît. */
@media (max-width: 720px) {
  .appgrid .n7-grille { grid-template-columns: minmax(0, 1fr); }
  .appgrid .n7-grille > * { grid-column: 1 / -1; }
  .appgrid .n7-chiffres { grid-template-columns: minmax(0, 1fr); }
}

/* Les largeurs de la table des jetons. Elles vivaient EN DUR dans le Razor
   (style="max-width:680px" sur le cadre, style="width:120px" sur chaque <th>) ;
   une largeur dans une page est ce que docs/conventions-responsive.md interdit,
   et c'est ici qu'un palier peut les relâcher. Le cadre est volontairement
   étroit : trois colonnes de référence n'ont pas à s'étirer sur 1600 px. */
.appgrid .n7-bloc-jetons { max-width: 680px; }
.appgrid .n7-col-jeton { width: 120px; }
.appgrid .n7-col-rendu { width: 130px; }
/* Le rang d'un jeton dans la souche : chasse fixe, encre effacée, et une largeur
   minimale pour que les rangs à un et deux chiffres s'alignent. Vivait en dur dans
   la page, typographie comprise. */
.appgrid .n7-rang { display: inline-block; min-width: 18px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }