/* ==========================================================================
   Circuit de validation de la paie (lot C de l'audit EasyPaie, 2026-10-02)
   Pages/Paie/CircuitValidation.razor — porté de « Circuit de validation paie.dc.html ».

   Mobilier d'écran en .cir-* par-dessus easypaie.css : cartes, indicateurs, pastilles,
   lignes, journal et modales viennent du module ; ici seulement la rangée d'étape (rang,
   corps, colonne du visa) et la grille à deux cartes. Jetons seulement.
   ========================================================================== */

.appgrid .cir-vide { padding: 44px; text-align: center; color: var(--et-muted); }

/* --- Les étapes ----------------------------------------------------------- */
.appgrid .cir-etapes { list-style: none; margin: 0; padding: 0; }
.appgrid .cir-etape {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px; padding: 16px 18px 16px 15px;
  border-top: 1px solid var(--et-rang); border-left: 3px solid transparent;
  background: var(--et-surface);
}
.appgrid .cir-etape:first-child { border-top: 0; }
.appgrid .cir-etape--visee    { border-left-color: var(--et-succes); }
.appgrid .cir-etape--en-cours { border-left-color: var(--et-form-blue); background: var(--et-tint); }

.appgrid .cir-etape__rang {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--et-font-mono); font-size: 13px; font-weight: 700;
  background: var(--et-surface-2); color: var(--et-muted); border: 1px solid var(--et-hairline);
}
.appgrid .cir-etape--visee .cir-etape__rang    { background: var(--et-succes-bg); color: var(--et-succes-ink); border-color: var(--ep-positif-bordure); }
.appgrid .cir-etape--en-cours .cir-etape__rang { background: var(--et-surface); color: var(--et-form-blue-d); border-color: var(--et-form-blue); }

.appgrid .cir-etape__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appgrid .cir-etape__libelle { font-size: 14px; font-weight: 700; color: var(--et-ink); }

.appgrid .cir-etape__visa { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.appgrid .cir-etape__etiquette {
  display: block; font-family: var(--et-font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--et-faint);
}
.appgrid .cir-etape__role { font-size: 13px; color: var(--et-ink); }
.appgrid .cir-etape__signature { font-size: 13px; color: var(--et-muted); }
.appgrid .cir-etape__signature.est-visee { color: var(--et-succes-ink); font-weight: 600; }
.appgrid .cir-etape__action,
.appgrid .cir-etape__renvoi { align-self: flex-start; margin-top: 4px; max-width: 100%; white-space: normal; text-align: left; }
/* Sur deux lignes, le bouton du module (hauteur fixe) laissait déborder son libellé. */
.appgrid .cir-etape__renvoi { height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; }

/* Un bouton qui ne peut pas servir nomme son motif (REGLES.md §12). La même main est un refus,
   le reste une attente : deux poids, deux fonds. */
.appgrid .cir-empeche {
  margin-top: 4px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  background: var(--et-surface-2); border: 1px solid var(--et-hairline); color: var(--et-muted);
}
.appgrid .cir-empeche.est-bloquant {
  background: var(--et-danger-badge-bg); border-color: var(--et-danger-bord); color: var(--et-danger-ink);
}

/* --- Séparation et journal, côte à côte ----------------------------------- */
.appgrid .cir-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* La ligne d'anomalie du module réserve 240 px à son corps : dans une demi-carte, le glyphe
   passait seul à la ligne. Ici le glyphe et la règle restent côte à côte. */
.appgrid .cir-deux .ep-ligne { flex-wrap: nowrap; }
.appgrid .cir-deux .ep-ligne__corps { min-width: 0; }
.appgrid .cir-glyphe { flex: none; font-size: 15px; line-height: 1.4; }
.appgrid .cir-glyphe--respectee { color: var(--et-succes-ink); }
.appgrid .cir-glyphe--enfreinte { color: var(--et-danger-ink); }
.appgrid .cir-glyphe--attente   { color: var(--et-faint); }

.appgrid .cir-journal { padding: 4px 18px 8px; }
/* Dans une demi-carte, la base de 300 px du journal du module poussait l'auteur à la ligne. */
.appgrid .cir-journal .ep-journal__evenement { flex: 1 1 0; min-width: 0; }
.appgrid .cir-journal__vide { padding: 14px 0; font-size: 13px; color: var(--et-muted); }
.appgrid .cir-journal__motif { display: block; margin-top: 2px; font-size: 12px; color: var(--et-muted); }
.appgrid .cir-journal__ligne--renvoi .ep-journal__evenement,
.appgrid .cir-journal__ligne--devalidation .ep-journal__evenement { color: var(--et-danger-ink); }

.appgrid .cir-motif { margin-top: 12px; }
.appgrid .cir-motif__saisie { width: 100%; resize: vertical; }

/* --- Paliers -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .appgrid .cir-deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .appgrid .cir-journal .ep-journal__evenement { flex-basis: 100%; order: 3; }
}
@media (max-width: 720px) {
  .appgrid .cir-etape { grid-template-columns: 32px minmax(0, 1fr); }
  .appgrid .cir-etape__visa { grid-column: 2; }
}

/* Sur la teinte de l'étape en cours, l'étiquette prend --et-muted (revue EasyPaie du
   2026-10-03) : --et-faint y tombait à 4,41:1. Le baisser pour tout le produit l'aurait fait
   passer devant --et-muted et renversé l'ordre des crans. */
.appgrid .cir-etape--en-cours .cir-etape__etiquette { color: var(--et-muted); }