/* ==========================================================================
   Clôture et sorties — Pages/Paie/CloturePaie.razor (lot P6,
   « Cloture et sorties de paie.dc.html »). Le rapprochement des trois sorties
   d'une paie validée, les sorties déjà produites, et ce que la clôture
   engage. Couleurs : jetons seulement.
   ========================================================================== */
.appgrid .clo-etat { margin-bottom: 14px; }
.appgrid .clo-lien { color: var(--et-lien); font-weight: 600; text-decoration: none; white-space: nowrap; }
.appgrid .clo-lien:hover { text-decoration: underline; }
.appgrid .clo-ligne--bloquante td { background: var(--et-danger-badge-bg); }
.appgrid .clo-explication { font-size: 13px; line-height: 1.45; color: var(--et-ink); min-width: 280px; }
.appgrid .clo-ref { font-family: var(--et-font-mono); font-size: 12px; white-space: nowrap; }
.appgrid .clo-methode { padding: 10px 16px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }
.appgrid .clo-exports, .appgrid .clo-effets { margin-top: 14px; }
.appgrid .clo-liste { margin: 0; padding: 10px 16px 14px 34px; font-size: 13px; line-height: 1.5; color: var(--et-ink); }
.appgrid .clo-liste li + li { margin-top: 6px; }

/* Sous 1024 px, les deux tables passent en cartes — six colonnes, dont une explication, ne tiennent
   pas sur une tablette : chaque valeur garde son libellé (data-lib),
   aucune colonne n'est retirée. */
@media (max-width: 1024px) {
  .appgrid .clo-explication { min-width: 0; }
}