/* ============================================================================
   ÉCRAN — ORDRES, CAMPAGNES ET CHÈQUES ÉMIS (TRE-04)

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

   CE QUI N'EST PAS ICI : .d4-fait et .d4-faits, dessinés par la feuille de
   MODULE css/easycompta-vignette.css.

   LE MOTIF CENTRAL EST LA BANDE DES TROIS TEMPS (.d4-temps) : établir,
   approuver, payer. Elle nomme QUI a fait quoi — c'est le seul écran du
   domaine où trois personnes interviennent sur la même pièce, et l'état doit
   se lire d'un coup d'œil.
   ========================================================================== */

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

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

/* LES TROIS TEMPS : faite en vert, courante en bleu, bloquée en rouge. */
.xp-corps .d4-temps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--et-hairline); border: 1px solid var(--et-hairline); }
.xp-corps .d4-temps > div { padding: 9px 11px; background: var(--et-surface); }
.xp-corps .d4-temps > div.faite { background: var(--et-succes-bg); }
.xp-corps .d4-temps > div.courante { background: var(--et-tint); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.xp-corps .d4-temps > div.bloquee { background: var(--et-danger-badge-bg); }
.xp-corps .d4-temps .n { display: flex; align-items: center; gap: 5px; font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--et-muted); }
.xp-corps .d4-temps .q { display: block; font-size: 13px; font-weight: 600; color: var(--et-ink); margin-top: 3px; }
.xp-corps .d4-temps .d { display: block; font-size: 12px; color: var(--et-muted); margin-top: 1px; line-height: 1.4; }

.xp-corps .d4-controle { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--et-hairline); }
.xp-corps .d4-controle span { flex: 1; font-size: 13px; color: var(--et-ink); line-height: 1.5; }

@media (max-width: 1024px) {
  .xp-corps .d4-paire { grid-template-columns: minmax(0, 1fr); }
  .xp-corps .d4-temps { grid-template-columns: minmax(0, 1fr); }
}