/* ==========================================================================
   Solde de tout compte — Pages/Paie/SoldeToutCompte.razor (lot P6,
   « Solde de tout compte.dc.html »). Les circonstances de la rupture, quatre
   indicateurs, le décompte poste par poste (rubrique, base, montant, régime)
   et les réserves du chiffrage. Couleurs : jetons seulement.
   ========================================================================== */
.appgrid .stc-etat { margin-bottom: 14px; }
.appgrid .stc-circonstances { margin-bottom: 14px; }
.appgrid .stc-contexte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; }
.appgrid .stc-contexte > div { padding: 10px 16px; border-right: 1px solid var(--et-hairline); min-width: 0; }
.appgrid .stc-contexte > div:last-child { border-right: 0; }
.appgrid .stc-contexte dt { font-size: 12px; font-weight: 400; color: var(--et-muted); }
.appgrid .stc-contexte dd { margin: 2px 0 0; font-size: 13px; color: var(--et-ink); }
.appgrid .stc-mono { font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.appgrid .stc-table-cadre { overflow-x: auto; }
.appgrid .stc-code { font-family: var(--et-font-mono); font-size: 12px; white-space: nowrap; }
.appgrid .stc-base { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .stc-methode { padding: 10px 16px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }
.appgrid .stc-reserves { margin-top: 14px; }
.appgrid .stc-liste { margin: 0; padding: 10px 16px 14px 34px; font-size: 13px; line-height: 1.5; color: var(--et-ink); }
.appgrid .stc-liste li + li { margin-top: 4px; }

@media (max-width: 1100px) {
  .appgrid .stc-contexte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appgrid .stc-contexte > div:nth-child(3) { border-right: 0; }
  .appgrid .stc-contexte > div:nth-child(-n+3) { border-bottom: 1px solid var(--et-hairline); }
}
/* Sous 720 px, les circonstances passent à deux par ligne et le décompte en cartes : chaque
   valeur garde son libellé (data-lib), aucune colonne n'est retirée. */
@media (max-width: 720px) {
  .appgrid .stc-contexte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appgrid .stc-contexte > div { border-right: 0; border-bottom: 1px solid var(--et-hairline); }
  .appgrid .stc-contexte > div:nth-child(odd) { border-right: 1px solid var(--et-hairline); }
  .appgrid .stc-table-cadre { overflow-x: visible; }
  .appgrid .stc-table, .appgrid .stc-table tbody { display: block; width: 100%; }
  .appgrid .stc-table thead { display: none; }
  .appgrid .stc-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 12px; border-top: 1px solid var(--et-hairline); }
  .appgrid .stc-table td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
  .appgrid .stc-table td[colspan], .appgrid .stc-table td:nth-child(2), .appgrid .stc-table td:nth-child(3),
  .appgrid .stc-table td:nth-child(5) { grid-column: 1 / -1; }
  .appgrid .stc-table td:empty { display: none; }
  .appgrid .stc-table td[data-lib]::before {
    content: attr(data-lib); display: block;
    font-family: var(--et-font); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--et-muted);
  }
}