/*  ecran-traitements.css — les cinq écrans de traitements d'EasyCompta, UNE feuille :
    TRT-01 lettrage (.lt-*), TRT-02 rapprochement (.rb-*), TRT-03 validation (.vv-*),
    TRT-04 révision (.rv-*), TRT-05 clôture (.cl-*), et leurs communs (.trt-*).

    Versée avec les écrans refondus sur la passation « Traitements »
    (docs/modeles/design_handoff_traitements, 2026-09-06). Elle REMPLACE les quatre feuilles
    d'écran du 2026-09-03 (ecran-rapprochement-bancaire, -validation, -revision, -cloture) :
    les préfixes sont ceux des maquettes, le contenu est celui de la refonte. Une feuille
    pour cinq écrans et non cinq, parce qu'ils partagent le rail, les cartes, les verdicts,
    les boutons et le repli — « une classe utilisée par deux écrans remonte » aurait fini
    par tout remonter.

    Aucune valeur en dur : tout vient des jetons de easytech-theme.css. À charger après
    modele-erp.css.

    CE QUI N'EST PAS ICI
      .tbl-*                      la liste (easytime-shell.css)
      .xp-voile / .xp-modal       la fenêtre (easycompta-modal.css)
      .trt-kpi / .trt-kpis        la vignette et sa bande (easycompta-vignette.css, la
                                  feuille du dépôt qui les unifie sur le module)
      .et-bandeau*                le bandeau de fenêtre, que la passation livrait ici et
                                  qui est au thème depuis le 2026-09-05 — EcranCompta
                                  l'allume pour les 45 écrans.

    LES COULEURS D'ÉTAT. La passation écrivait l'encre nue (--et-succes, --et-avertissement,
    --et-danger) en `color:` et en ligne dans les pages. Au dépôt une couleur d'état n'est
    jamais écrite en `color:` (docs/couleurs-en-dur.md) : elle est un flat, un liseré ou une
    marque, et l'encre posée dessus est le rang `-ink`. D'où les classes d'état
    (.est-ok / .est-signal / .est-grave / .est-neutre / .est-info) que les pages posent à la
    place d'un style en ligne — un verdict, un contrôle, un préalable, un toast. */

/* ═══ Rail des cinq traitements ════════════════════════════════════════════ */

.trt-onglets {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 0 20px;
  margin-bottom: 12px;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-hairline);
}

.trt-onglets > a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: var(--et-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.trt-onglets > a:hover { background: var(--et-surface-3); color: var(--et-form-blue); text-decoration: none; }
.trt-onglets > a.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }
.trt-onglets > a:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

/* ═══ Communs ══════════════════════════════════════════════════════════════ */

.trt-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-bottom: 12px;
  padding: 8px var(--et-bandeau-pad-h, 16px);
  color: var(--et-ink);
  font-size: 13px;
}

.trt-bandeau > .bi { flex-shrink: 0; }
.trt-bandeau.est-info { background: var(--et-tint); }
.trt-bandeau.est-info > .bi { color: var(--et-form-blue); }
.trt-bandeau.est-signal { background: var(--et-avertissement-bg); }
.trt-bandeau.est-signal > .bi { color: var(--et-avertissement-ink); }
.trt-bandeau.est-grave { background: var(--et-danger-badge-bg); }
.trt-bandeau.est-grave > .bi { color: var(--et-danger-ink); }
.trt-bandeau-a { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 600; }

/* La bande de vignettes : la grille et la vignette sont au gabarit de module ; ici
   seulement l'aplomb sur la page. Une valeur d'alerte prend l'encre de rang. */
.trt-kpis { padding: 0 16px; }
.appgrid .trt-kpi .v.est-signal { color: var(--et-avertissement-ink); }
.appgrid .trt-kpi .v.est-grave { color: var(--et-danger-ink); }

.trt-sec-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--et-table-head-encre);
}

.trt-sous { font-size: 12px; color: var(--et-muted); line-height: 1.4; }
.trt-faint { font-size: 12px; color: var(--et-faint); }

.trt-lab {
  display: block;
  margin-bottom: 4px;
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.trt-lien { background: none; border: 0; padding: 0; color: var(--et-form-blue); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.trt-lien:hover { color: var(--et-form-blue-d); }
.trt-lien:disabled { color: var(--et-inerte); cursor: not-allowed; }

.trt-bascule { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--et-ink); cursor: pointer; }
/* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css),
   et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */

.trt-carte { background: var(--et-surface); border: 1px solid var(--et-hairline); margin-bottom: 14px; }
.trt-carte:last-child { margin-bottom: 0; }

.trt-carte-t {
  padding: 9px 12px;
  background: var(--et-surface-2);
  border-bottom: 1px solid var(--et-hairline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--et-table-head-encre);
}

.trt-carte-corps { padding: 12px; }
.trt-carte-corps.est-plein { padding: 0; }

.trt-btn,
.trt-btn-fort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.trt-btn-fort { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
.trt-btn-fort:hover { color: var(--et-sur-aplat); text-decoration: none; }
.trt-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.trt-btn:disabled,
.trt-btn-fort:disabled { background: var(--et-surface); border-color: var(--et-hairline); color: var(--et-inerte); cursor: not-allowed; }
.trt-btn:focus-visible,
.trt-btn-fort:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.trt-btn-bloc { width: 100%; justify-content: center; margin-bottom: 7px; }

.trt-vide { padding: 28px 16px; text-align: center; }
.trt-vide > .bi { font-size: 24px; color: var(--et-inerte); }
.trt-vide-t { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--et-ink); }
.trt-vide-d { margin: 4px auto 0; max-width: 420px; font-size: 13px; color: var(--et-muted); line-height: 1.5; }
.trt-vide-l { padding: 24px 14px; text-align: center; font-size: 13px; color: var(--et-muted); }

/* Le toast : un liseré d'état, l'encre de rang. */
.trt-toast {
  position: fixed;
  z-index: 1090;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 440px;
  padding: 10px 14px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left-width: 3px;
  box-shadow: var(--et-ombre-flottant);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--et-ink);
}

.trt-toast.est-ok { border-left-color: var(--et-succes); }
.trt-toast.est-ok > .bi { color: var(--et-succes-ink); }
.trt-toast.est-signal { border-left-color: var(--et-avertissement-mark); }
.trt-toast.est-signal > .bi { color: var(--et-avertissement-ink); }
.trt-toast.est-grave { border-left-color: var(--et-danger); }
.trt-toast.est-grave > .bi { color: var(--et-danger-ink); }

/* Le verdict : la pastille tintée et son encre de rang. Partagé par le panier de lettrage,
   le pointage, l'état de rapprochement et la pièce d'à-nouveaux. */
.lt-verdict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.lt-verdict > .bi { flex-shrink: 0; }
.lt-verdict.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.lt-verdict.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.lt-verdict.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.lt-verdict.est-neutre { background: var(--et-neutre-bg); color: var(--et-neutre); }

/* ═══ TRT-01 — Lettrage ════════════════════════════════════════════════════ */

.lt-corps { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 420px; border: 1px solid var(--et-hairline); }
.lt-tiers { flex: 0 0 292px; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface); border-right: 1px solid var(--et-filet-fort); }
.lt-centre { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface-2); }
.lt-aside { flex: 0 0 302px; min-width: 0; min-height: 0; overflow: auto; background: var(--et-surface); border-left: 1px solid var(--et-filet-fort); }
.lt-scroller { flex: 1 1 auto; min-height: 0; max-height: 640px; overflow: auto; }

.lt-tiers-tete,
.lt-centre-tete { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--et-hairline); }
.lt-tiers-tete > .trt-sous { margin-left: auto; }
.lt-centre-tete > .trt-lien { margin-left: auto; }

.lt-filtres { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--et-hairline); }

.lt-champ {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.lt-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }

/* Le chevron des listes est redessiné : appearance:none retire celui du navigateur, qui
   arrondissait aussi les coins quel que soit border-radius. */
select.lt-champ,
select.rb-champ {
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--et-muted) 50%), linear-gradient(135deg, var(--et-muted) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Vignette de tiers. Libellé, solde ouvert, code, type, nombre de lignes — la note de
   retard a été retirée à la demande du métier ; le bandeau de tête la porte. */
.lt-vignette {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--et-hairline);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lt-vignette:hover { background: var(--et-surface-3); }
.lt-vignette.est-visee { background: var(--et-tint); border-left-color: var(--et-form-blue); }
.lt-vignette:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.lt-vignette-h { display: flex; align-items: baseline; gap: 9px; }
.lt-vignette-r { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.lt-vignette-s { flex: none; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.lt-vignette-b { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.lt-vignette-n { margin-left: auto; }

.lt-table { width: 100%; }
.lt-col-coche { width: 34px; }
.lt-col-piece { width: 130px; text-align: left; }
.lt-col-date { width: 96px; text-align: left; }
.lt-col-montant { width: 116px; }
.lt-col-lettre { width: 130px; text-align: left; }

.lt-rang { cursor: pointer; }
.lt-rang:hover { background: var(--et-surface-3); }
.lt-rang.est-cochee { background: var(--et-tint); }
/* Un mouvement lettré reste visible mais grisé : le masquer ferait croire le compte plus
   ouvert qu'il ne l'est, et empêcherait de délettrer. */
.lt-rang.est-lettre { opacity: .62; cursor: default; }
/* Une échéance dépassée sur un mouvement non lettré : l'encre d'alerte, mesurée sur la
   rangée survolée et non sur le blanc. */
.lt-echue { color: var(--et-danger-ink); font-weight: 600; }
.lt-reste-partiel { color: var(--et-avertissement-ink); }

.lt-lettre {
  display: inline-block;
  padding: 1px 6px;
  background: var(--et-info-bg);
  color: var(--et-info);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 600;
}

/* Un lettrage partiel se distingue : le solde reste ouvert, ce n'est pas la même chose
   qu'un lettrage total. */
.lt-lettre.est-partielle { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.lt-delettrer { margin-left: 7px; }

.lt-panier-tete { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--et-hairline); }
.lt-panier-tete > .trt-sous { margin-left: auto; }
.lt-panier-corps { padding: 12px 14px; }
.lt-panier-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px; color: var(--et-muted); }
.lt-panier-l > .mono { font-size: 13px; color: var(--et-ink); }

.lt-ecart { margin-top: 10px; }
.lt-panier-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.lt-panier-actions > * { width: 100%; justify-content: center; }
.lt-panier-auto { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--et-hairline); }
.lt-panier-auto > .trt-btn { width: 100%; justify-content: center; }

/* ── Ce que le panier dit de plus depuis le 2026-09-06 ─────────────────────
   (retour de l'écran d'avant, que la passation ne dessinait pas) */

.lt-commentaire { margin-top: 10px; }

/* L'IMPUTATION AVANT LE CLIC : étroit et dense, il vit dans le panier. Le liseré de la
   ligne porte son verdict — une BORDURE, pas une encre : à ce rang la charte laisse
   --et-succes, mais pas l'ambre, d'où --et-avertissement-mark sur la ligne qui reste
   ouverte. */
.lt-apercu { margin-top: 8px; border: 1px solid var(--et-hairline); background: var(--et-surface-2); }
.lt-apercu-tete { display: flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 12px; font-weight: 600; color: var(--et-muted); border-bottom: 1px solid var(--et-hairline); }
.lt-apercu-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.lt-apercu-tbl td { padding: 4px 9px; border-bottom: 1px solid var(--et-hairline); vertical-align: middle; }
.lt-apercu-tbl tr:last-child td { border-bottom: 0; }
.lt-apercu-tbl .d { color: var(--et-muted); white-space: nowrap; }
.lt-apercu-tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-apercu-tbl .imp { font-weight: 600; }
.lt-apercu-tbl .s { text-align: right; white-space: nowrap; }
.lt-apercu-tbl tr.est-soldee td:first-child { box-shadow: inset 2px 0 0 var(--et-succes); }
.lt-apercu-tbl tr.est-ouverte td:first-child { box-shadow: inset 2px 0 0 var(--et-avertissement-mark); }
.lt-apercu-note { padding: 6px 9px; font-size: 12px; color: var(--et-muted); line-height: 1.45; border-top: 1px solid var(--et-hairline); }

/* La nature d'une lettre — totale, partielle, écart imputé — et l'état d'une ligne de
   l'aperçu : une pastille tintée, l'encre de rang. */
.lt-nature { display: inline-block; padding: 1px 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lt-nature.est-total { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.lt-nature.est-partiel { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.lt-nature.est-ecart { background: var(--et-info-bg); color: var(--et-info); }

/* Les couples proposés, sous le tableau : ils se lisent avant d'être retenus. */
.lt-couples { margin: 14px; background: var(--et-surface); border: 1px solid var(--et-form-blue); }
.lt-couples-tete { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--et-hairline); }
.lt-couples-tete > .trt-lien { margin-left: auto; }
.trt-sec-t.est-bleu { color: var(--et-form-blue); }
.lt-couple { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--et-hairline); font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); }
.lt-couple > .bi { color: var(--et-muted); font-size: 12px; }
.lt-couple-ref { flex: 0 0 130px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-couple-mt { margin-left: auto; }
.lt-couple-btn { height: 26px; padding: 0 9px; font-size: 12px; }
.lt-couples-pied { padding: 9px 12px; }

/* Les lettres posées, sous le panier. La confirmation du délettrage se déplie SOUS la
   carte, sans fenêtre : la conséquence se lit à côté de la lettre qu'elle concerne. */
.lt-lettres { border-top: 2px solid var(--et-filet-fort); }
.lt-lettres-corps { padding: 12px 14px; }
.lt-lettre-carte { padding: 9px 10px; margin-bottom: 7px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.lt-lettre-carte:last-child { margin-bottom: 0; }
.lt-lettre-l1 { display: flex; align-items: baseline; gap: 8px; }
.lt-lettre-code { font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-form-blue); white-space: nowrap; }
.lt-lettre-mt { margin-left: auto; font-size: 12px; color: var(--et-ink); }
.lt-lettre-ecart { margin-top: 2px; font-size: 12px; color: var(--et-avertissement-ink); }
.lt-lettre-pied { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.lt-lettre-pied > .lt-btn-danger { margin-left: auto; }

/* Le bouton de danger : bordure à la couleur d'état (un mark), encre au rang -ink ; plein
   pour la confirmation, avec le blanc de --et-sur-aplat. */
.lt-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--et-danger);
  color: var(--et-danger-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lt-btn-danger:hover { background: var(--et-danger-badge-bg); }
.lt-btn-danger.est-plein { background: var(--et-danger); color: var(--et-sur-aplat); }
.lt-btn-danger:disabled { opacity: .55; cursor: not-allowed; }
.lt-confirm { margin-top: 8px; padding: 9px 10px; background: var(--et-danger-badge-bg); color: var(--et-danger-ink); font-size: 12px; line-height: 1.5; }
.lt-confirm-actions { display: flex; gap: 8px; margin-top: 9px; }

/* ═══ TRT-02 — Rapprochement bancaire ══════════════════════════════════════ */

.rb-contexte {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-bottom: 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
}

.rb-champ-bloc { flex: 0 0 168px; padding: 10px 12px; border-right: 1px solid var(--et-hairline); }
.rb-champ-bloc.rb-champ-large { flex: 0 0 300px; }
.rb-contexte-fin { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }

.rb-champ {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.rb-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.rb-champ[readonly] { background: var(--et-surface-2); color: var(--et-muted); }
.rb-num { text-align: right; font-variant-numeric: tabular-nums; }

.rb-corps { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 420px; border: 1px solid var(--et-hairline); }
.rb-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface); border-right: 1px solid var(--et-hairline); }
.rb-aside { flex: 0 0 316px; min-width: 0; min-height: 0; overflow: auto; padding: 14px 14px 0; background: var(--et-surface-2); border-left: 1px solid var(--et-filet-fort); }
.rb-col-tete { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--et-hairline); }
.rb-col-tete > .trt-sous { margin-left: auto; }
.rb-scroll { flex: 1 1 auto; min-height: 0; max-height: 640px; overflow: auto; }

.rb-rang {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--et-hairline);
  cursor: pointer;
}

.rb-rang:hover { background: var(--et-surface-3); }
.rb-rang.est-cochee { background: var(--et-tint); }
.rb-rang.est-pointee { opacity: .6; cursor: default; }
.rb-rang > input { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; accent-color: var(--et-form-blue); }
.rb-rang-l { flex: 1; min-width: 0; }
.rb-rang-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rb-ref { font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.rb-rang-lib { font-size: 13px; color: var(--et-ink); line-height: 1.4; }
.rb-rang-gestes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.rb-montant { flex: none; font-size: 13px; font-weight: 600; color: var(--et-ink); }
/* Une entrée se distingue d'une sortie par l'encre de rang du succès — pas par la teinte nue. */
.rb-montant.est-entree { color: var(--et-succes-ink); }

.rb-etat { padding: 0; }
.rb-etat-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--et-hairline); font-size: 12px; color: var(--et-muted); }
.rb-etat-l > .mono { flex: none; font-size: 13px; color: var(--et-ink); }
.rb-etat-l.est-fort { font-weight: 600; color: var(--et-ink); background: var(--et-surface-2); }
.rb-etat-gl { border-top: 2px solid var(--et-filet-fort); }
.rb-etat > .lt-verdict { margin: 0; }
.rb-etat > .lt-panier-actions { padding: 11px 12px; margin-top: 0; }

.rb-histo { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--et-hairline); font-size: 12px; }
.rb-histo:last-child { border-bottom: 0; }
.rb-histo-s { margin-left: auto; color: var(--et-ink); }

/* Fenêtres : le chargement d'un relevé et la pièce d'une ligne hors compta. */
.rb-import, .rb-piece { max-width: 640px; }
.rb-import .xp-tete-l, .rb-piece .xp-tete-l { flex: 1; min-width: 0; }
.rb-import-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.rb-import-plein { grid-column: 1 / -1; }
.rb-import-fichier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rb-import-fichier > .trt-lab { flex: 0 0 100%; margin-bottom: 0; }
.rb-import-fichier > input[type="file"] { height: auto; padding: 5px 8px; flex: 1 1 260px; }

/* Fichier de relevé : décrit avant d'être chargé — un relevé chargé sur le mauvais compte
   ou la mauvaise période se découvre trop tard. */
.rb-fichier {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
}

.rb-fichier.est-visee { background: var(--et-tint); border-left-color: var(--et-form-blue); }
.rb-fichier-h { display: flex; align-items: baseline; gap: 9px; }
.rb-fichier-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rb-fichier-d { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--et-muted); }
.rb-fichier-d b { color: var(--et-ink); }

.rb-fichier-alerte {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding: 6px 9px;
  background: var(--et-avertissement-bg);
  color: var(--et-avertissement-ink);
  font-size: 12px;
  font-weight: 600;
}

.rb-fichier-alerte.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* ═══ TRT-03 — Validation et verrouillage ══════════════════════════════════ */

.vv-corps { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 400px; border: 1px solid var(--et-hairline); }
.vv-liste { flex: 0 0 300px; min-width: 0; min-height: 0; overflow: auto; background: var(--et-surface); border-right: 1px solid var(--et-filet-fort); }
.vv-panneau { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 14px 16px; background: var(--et-surface-2); }
.vv-exercice { padding: 10px 12px; border-bottom: 1px solid var(--et-hairline); }

.vv-periode {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--et-hairline);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vv-periode:hover { background: var(--et-surface-3); }
.vv-periode.est-visee { background: var(--et-tint); border-left-color: var(--et-form-blue); }
.vv-periode:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.vv-periode-m { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--et-ink); text-transform: capitalize; }
.vv-periode-e { flex: none; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.vv-periode-b { flex: 0 0 100%; font-size: 12px; color: var(--et-avertissement-ink); }

.vv-panneau-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vv-panneau-t { font-size: 15px; font-weight: 700; color: var(--et-ink); text-transform: capitalize; }
.vv-resume { margin-top: 3px; }

.vv-sec { margin-top: 14px; padding: 12px 14px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.vv-sec-t { margin-bottom: 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-table-head-encre); }

.vv-controle { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--et-hairline); }
.vv-controle:first-of-type { border-top: 0; }
.vv-controle > .bi { flex-shrink: 0; margin-top: 2px; }
.vv-controle-l { flex: 1; min-width: 0; }
.vv-controle-t { font-size: 13px; color: var(--et-ink); }
.vv-controle-e { margin-top: 2px; font-size: 12px; font-weight: 600; }
/* L'état d'un contrôle ou d'un préalable : l'encre de rang, sur le glyphe et sur la phrase. */
.vv-controle.est-ok > .bi, .cl-prealable.est-ok > .bi,
.vv-controle.est-ok .vv-controle-e, .cl-prealable.est-ok .cl-prealable-e { color: var(--et-succes-ink); }
.vv-controle.est-signal > .bi, .cl-prealable.est-signal > .bi,
.vv-controle.est-signal .vv-controle-e, .cl-prealable.est-signal .cl-prealable-e { color: var(--et-avertissement-ink); }
.vv-controle.est-grave > .bi, .cl-prealable.est-grave > .bi,
.vv-controle.est-grave .vv-controle-e, .cl-prealable.est-grave .cl-prealable-e { color: var(--et-danger-ink); }
.cl-prealable.est-info > .bi { color: var(--et-info); }

/* Bloquant et simple signal se distinguent par le mot autant que par la teinte : confondre
   les deux rend l'écran soit inutilisable, soit dangereux. */
.vv-bloquant {
  flex: none;
  padding: 1px 7px;
  background: var(--et-danger-badge-bg);
  color: var(--et-danger-ink);
  font-size: 12px;
  font-weight: 700;
}

.vv-piece { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--et-hairline); font-size: 12px; }
.vv-piece:last-of-type { border-bottom: 0; }
.vv-piece-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--et-ink); }
.vv-piece.est-bloquee { border-left: 3px solid var(--et-danger); padding-left: 8px; }
.vv-piece-saisie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 100%; margin-top: 4px; }
.vv-piece-saisie > .lt-champ { flex: 1 1 220px; }
.vv-habilites { margin-top: 8px; }
.vv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.vv-trace { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; font-size: 12px; color: var(--et-ink); }
.vv-trace.est-info > .bi { color: var(--et-info); }
.vv-trace.est-signal > .bi { color: var(--et-avertissement-ink); }

/* ═══ TRT-04 — Révision ════════════════════════════════════════════════════ */

.rv-corps { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 400px; border: 1px solid var(--et-hairline); }
.rv-liste { flex: 0 0 340px; min-width: 0; min-height: 0; overflow: auto; background: var(--et-surface); border-right: 1px solid var(--et-filet-fort); }
.rv-detail { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 14px 16px; background: var(--et-surface-2); }
.rv-exercice { width: auto; min-width: 160px; height: 31px; }

.rv-controle {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--et-hairline);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rv-controle:hover { background: var(--et-surface-3); }
.rv-controle.est-visee { background: var(--et-tint); border-left-color: var(--et-form-blue); }
/* Un contrôle sain reste affiché : savoir qu'il a tourné et n'a rien trouvé est une
   information — le masquer laisse croire qu'il n'a pas tourné. */
.rv-controle.est-sain { opacity: .78; }
.rv-controle-h { display: flex; align-items: baseline; gap: 9px; }
.rv-controle-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rv-controle-b { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rv-gravite { flex: none; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.rv-nb { font-size: 12px; font-weight: 600; color: var(--et-ink); }
.rv-sain { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--et-succes-ink); }

.rv-detail-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rv-detail-t { font-size: 15px; font-weight: 700; color: var(--et-ink); }
.rv-explication { margin-bottom: 12px; padding: 10px 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); font-size: 13px; color: var(--et-ink); line-height: 1.45; }
.rv-explication > .trt-sous { margin-top: 4px; }
.rv-bascule { margin-bottom: 10px; }

.rv-cas { margin-bottom: 10px; padding: 11px 13px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.rv-cas.est-accepte { opacity: .8; border-left: 3px solid var(--et-info); }
.rv-cas-h { display: flex; align-items: baseline; gap: 10px; }
.rv-cas-c { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.rv-cas-m { flex: none; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rv-cas-l { margin-top: 3px; font-size: 13px; color: var(--et-ink); line-height: 1.45; }
.rv-cas-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.rv-cas-saisie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.rv-cas-saisie > .lt-champ { flex: 1 1 220px; }

/* Une anomalie acceptée garde son motif, son auteur et sa date : c'est ce qui la distingue
   d'une anomalie effacée. */
.rv-cas-motif {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding: 7px 9px;
  background: var(--et-info-bg);
  color: var(--et-info);
  font-size: 12px;
  font-weight: 600;
}

/* ═══ TRT-05 — Clôture ═════════════════════════════════════════════════════ */

.cl-corps { display: flex; align-items: flex-start; flex: 1 1 auto; gap: 14px; }
.cl-colonne { flex: 1; min-width: 0; }
.cl-aside { flex: 0 0 318px; min-width: 0; }

.cl-prealable { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--et-hairline); }
.cl-prealable:last-child { border-bottom: 0; }
.cl-prealable > .bi { flex-shrink: 0; margin-top: 2px; }
.cl-prealable-l { flex: 1; min-width: 0; }
.cl-prealable-t { font-size: 13px; color: var(--et-ink); }
.cl-prealable-e { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--et-muted); }

.cl-resultat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; margin: 8px 0 11px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); font-size: 13px; }
.cl-resultat-v { font-size: 15px; font-weight: 700; color: var(--et-ink); }
.cl-affect { margin-bottom: 8px; }

.cl-table { width: 100%; }
.cl-col-compte { width: 100px; text-align: left; }
.cl-col-detail { width: 130px; text-align: left; }
.cl-col-montant { width: 140px; }
.cl-totaux { background: var(--et-surface-3); border-top: 2px solid var(--et-filet-fort); font-weight: 600; }
.cl-table + .lt-verdict, .tbl-cadre + .lt-verdict { margin: 0; }
.cl-etape { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--et-hairline); }
.cl-etape:last-child { border-bottom: 0; }

.cl-etape-n {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--et-tint);
  color: var(--et-form-blue);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
}

.cl-etape-t { flex: 1; min-width: 0; font-size: 13px; color: var(--et-ink); line-height: 1.4; }
/* La conséquence nommée avant la confirmation : un flat d'avertissement, un liseré de marque. */
.cl-confirme { padding: 10px 12px; background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-mark); }
.cl-confirme-t { margin-bottom: 10px; font-size: 12px; color: var(--et-ink); line-height: 1.5; }
.cl-fait { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--et-hairline); font-size: 12px; }
.cl-fait:last-child { border-bottom: 0; }
.cl-fait > .bi { flex: none; }
.cl-fait.est-signal > .bi { color: var(--et-avertissement-ink); }
.cl-fait.est-neutre > .bi { color: var(--et-neutre); }
.cl-fait-l { flex: 1 1 200px; min-width: 0; color: var(--et-ink); }

/* ═══ Repli — paliers de l'échelle retenue : 1100, 1024, 640 ═══════════════ */

@media (max-width: 1100px) {
  .lt-corps { flex-wrap: wrap; }
  .lt-tiers { flex: 1 1 320px; }
  .lt-aside { flex: 1 1 100%; border-left: 0; border-top: 2px solid var(--et-filet-fort); }
  .rb-corps { flex-wrap: wrap; }
  .rb-col { flex: 1 1 340px; }
  .rb-aside { flex: 1 1 100%; border-left: 0; border-top: 2px solid var(--et-filet-fort); }
  .cl-corps { flex-direction: column; }
  .cl-colonne, .cl-aside { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 1024px) {
  /* En colonne, plus rien n'est borné : la page défile d'un bloc. align-items:stretch est
     indispensable — sans lui les enfants prennent leur largeur de contenu et les volets
     s'écrasent au tiers de la largeur. */
  .lt-corps, .rb-corps, .vv-corps, .rv-corps {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 0;
  }

  .lt-tiers, .lt-centre, .lt-aside,
  .rb-col, .rb-aside,
  .vv-liste, .vv-panneau,
  .rv-liste, .rv-detail {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    overflow: visible;
    border-left: 0;
    border-right: 0;
  }

  .lt-scroller, .rb-scroll { flex: 0 0 auto; min-height: 0; max-height: none; overflow-x: auto; }
  .rb-champ-bloc, .rb-champ-bloc.rb-champ-large { flex: 1 1 200px; }

  /* Cibles tactiles : lot02 impose 44 px sous 1024 px, et une cible ne rétrécit jamais. */
  .trt-onglets > a { min-height: 44px; }
  .lt-champ, .rb-champ { min-height: 44px; }
  .trt-btn, .trt-btn-fort, .lt-btn-danger, .lt-couple-btn { min-height: 44px; }
  .lt-vignette, .vv-periode, .rv-controle, .rb-rang, .rb-fichier { min-height: 44px; }
}

@media (max-width: 640px) {
  .rb-import-grille { grid-template-columns: minmax(0, 1fr); }
  .trt-onglets { padding: 0 8px; }
  .trt-onglets > a { padding: 0 10px; }
}

/* Le motif d'un couple proposé par la facture lue (2026-09-07) : entre le montant et le bouton. */
.appgrid .lt-couple-motif { flex: 1 1 160px; min-width: 0; font-style: italic; }
/* La note de lecture du relevé (PDF lu par le moteur), sous le champ de fichier. */
.appgrid .rb-import-lecture { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   Lettrage (TRT-01) — les couples par la facture lue sur tout le dossier : un
   bouton dans l'en-tête des tiers, un panneau de couples groupés par tiers.
   --------------------------------------------------------------------------- */
/* Sur sa propre ligne, sous le titre : la colonne est étroite, et un titre qui se replie sur
   trois lignes pour laisser place à un bouton n'est plus un titre. */
.appgrid .lt-tiers-tete { flex-wrap: wrap; }
.appgrid .lt-tiers-tous { flex-basis: 100%; justify-content: center; border: 1px solid var(--et-rang); background: var(--et-surface); color: var(--et-lien); padding: 3px 8px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.appgrid .lt-tiers-tous:hover { border-color: var(--et-lien); }
.appgrid .lt-tiers-tous:disabled { color: var(--et-muted); cursor: default; }
.appgrid .lt-couples.est-tous { margin-bottom: 12px; }
.appgrid .lt-couples-tiers { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; padding-top: 6px; border-top: 1px solid var(--et-rang); }
.appgrid .lt-couples-tiers-r { font-weight: 600; color: var(--et-ink); }
.appgrid .lt-couples-vide { padding: 6px 0; }

/* Rapprochement (TRT-02) — plusieurs relevés d'un coup : un fichier par carte, ses bornes et
   ses soldes corrigeables sur la ligne, un refus dit sur la carte. */
.appgrid .rb-lot { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 320px; overflow: auto; }
.appgrid .rb-lot-bornes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 4px 12px 8px; font-size: 12px; }
.appgrid .rb-lot-bornes .rb-champ { max-width: 130px; }
.appgrid .rb-fichier.est-refusee { border-left: 3px solid var(--et-danger); }