/* ==========================================================================
   Traitement de la paie (lot F de l'audit EasyPaie, 2026-10-03)
   Pages/Paie/Traitement.razor — porté de « Traitement de la paie.dc.html ».

   Mobilier d'écran en .tpa-* par-dessus easypaie.css : indicateurs, bandeaux, lignes de
   points à arbitrer, table, pastilles et modales viennent du module ; ici seulement la frise
   des jalons, la colonne salarié, l'écart signé et la note de méthode. Jetons seulement.
   ========================================================================== */

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

/* ---- Frise des jalons : calcul, puis les quatre visas du circuit ---- */
.appgrid .tpa-jalons {
  list-style: none; margin: 0 0 14px; padding: 14px 18px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  background: var(--et-surface); border: 1px solid var(--et-hairline);
}
.appgrid .tpa-jalon { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 12px 0 22px; min-width: 0; }
.appgrid .tpa-jalon::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: var(--et-hairline);
}
.appgrid .tpa-jalon.est-atteint::before { background: var(--et-succes); }
.appgrid .tpa-jalon:first-child::before { left: 6px; }
.appgrid .tpa-jalon:last-child::before { right: auto; width: 6px; }
.appgrid .tpa-jalon__puce {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px;
  background: var(--et-surface); border: 2px solid var(--et-filet-fort); border-radius: 50%;
}
.appgrid .tpa-jalon.est-atteint .tpa-jalon__puce { background: var(--et-succes); border-color: var(--et-succes); }
.appgrid .tpa-jalon.est-courant .tpa-jalon__puce { border-color: var(--et-form-blue); background: var(--et-tint); }
.appgrid .tpa-jalon__libelle { margin-top: 18px; font-size: 13px; color: var(--et-muted); }
.appgrid .tpa-jalon.est-atteint .tpa-jalon__libelle { color: var(--et-ink); }
.appgrid .tpa-jalon.est-courant .tpa-jalon__libelle { color: var(--et-ink); font-weight: 600; }
/* Le détail passe à la ligne plutôt que « … » : « 129 bulletin(s) produit(s) » se coupait à 768 px. */
.appgrid .tpa-jalon__detail { font-size: 12px; color: var(--et-faint); overflow-wrap: anywhere; }

/* ---- Points à arbitrer ---- */
.appgrid .tpa-points { margin-bottom: 14px; }
.appgrid .tpa-points__tete { margin: 0; border-width: 0 0 1px; }
.appgrid .tpa-points__glyphe { flex: none; font-size: 16px; line-height: 1.4; }
.appgrid .tpa-nature { flex: none; min-width: 168px; justify-content: center; }

/* ---- Filtres de la table ---- */
.appgrid .tpa-filtres { margin-bottom: var(--et-criteres-mb); }
.appgrid .tpa-recherche { width: 280px; max-width: 100%; }
.appgrid .tpa-vue__compte { margin-left: 4px; color: var(--et-faint); }
.appgrid .ep-vues__btn[aria-pressed="true"] .tpa-vue__compte { color: var(--et-sur-ardoise); }
.appgrid .tpa-signature { font-size: 13px; color: var(--et-muted); }

/* ---- Table des bulletins ---- */
/* position: relative — le libellé masqué de la colonne d'actions (position absolue) sortait sinon du cadre défilant et élargissait la page. */
.appgrid .tpa-table-cadre { position: relative; overflow-x: auto; }
.appgrid .tpa-table { min-width: 860px; }
.appgrid .tpa-recalcul { width: 32px; padding: 0; justify-content: center; color: var(--et-lien); }
.appgrid .tpa-recalcul:disabled { color: var(--et-faint); }
.appgrid .tpa-vide-ligne { padding: 28px 12px; text-align: center; color: var(--et-muted); }
.appgrid .tpa-salarie { display: inline-flex; flex-direction: column; gap: 1px; color: var(--et-ink); text-decoration: none; }
.appgrid .tpa-salarie:hover .tpa-salarie__nom { color: var(--et-lien); text-decoration: underline; }
.appgrid .tpa-salarie__nom { font-weight: 600; white-space: nowrap; }
.appgrid .tpa-salarie__mat { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .tpa-negatif { color: var(--et-danger-ink); }
.appgrid .tpa-ecart { color: var(--et-muted); }
.appgrid .tpa-ecart.est-hausse { color: var(--et-avertissement-ink); font-weight: 600; }
.appgrid .tpa-ecart.est-baisse { color: var(--et-danger-ink); font-weight: 600; }
.appgrid .tpa-ecart-glyphe { margin-left: 4px; font-size: 13px; color: var(--et-muted); }

/* Le service se lit en entier : « Ressources h… » était tronqué par la règle générale
   .ep-libelle-court (7rem). Il passe à la ligne, la colonne garde sa largeur. */
.appgrid .tpa-table .ep-libelle-court { max-width: 12rem; white-space: normal; overflow: visible; text-overflow: clip; }

/* Sur une rangée teintée (à revoir, en anomalie), le second rang prend --et-muted-sur-alerte :
   --et-muted y tombait à 4,46:1 en sombre (matricule, écart nul). Même teinte en clair. */
.appgrid .tpa-table tr.ep-rangee--critique .tpa-salarie__mat,
.appgrid .tpa-table tr.ep-rangee--critique .tpa-ecart:not(.est-hausse):not(.est-baisse),
.appgrid .tpa-table tr.ep-rangee--critique .tpa-ecart-glyphe,
.appgrid .tpa-table tr.ep-rangee--negatif .tpa-salarie__mat,
.appgrid .tpa-table tr.ep-rangee--negatif .tpa-ecart:not(.est-hausse):not(.est-baisse),
.appgrid .tpa-table tr.ep-rangee--negatif .tpa-ecart-glyphe { color: var(--et-muted-sur-alerte); }
.appgrid .tpa-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }
.appgrid .tpa-actions .ep-btn--nu { padding: 0 8px; color: var(--et-lien); font-weight: 600; }
.appgrid .tpa-actions .ep-btn--nu:disabled { color: var(--et-faint); }
.appgrid .tpa-methode { padding: 10px 18px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }

/* ---- Modale de cause ---- */
.appgrid .tpa-cause__saisie { width: 100%; resize: vertical; }

@media (max-width: 720px) {
  .appgrid .tpa-jalons { grid-template-columns: 1fr; gap: 10px; }
  .appgrid .tpa-jalon::before { display: none; }
  .appgrid .tpa-jalon__libelle { margin-top: 0; }
  .appgrid .tpa-nature { min-width: 0; }
}
/* LES BULLETINS EN CARTES SOUS 1024 PX. La table défilait en largeur — 231 px coupés à 768,
   557 à 390 : pour qui lit, des colonnes omises. Aucune n'est retirée ici (laquelle est
   secondaire n'est pas une décision de CSS, docs/tables-larges.md) : chaque valeur porte son
   libellé (data-lib), le salarié en tête, le recalcul en haut à droite. Même parti que
   .gen-tbl (ecran-generation.css). */
@media (max-width: 1024px) {
  .appgrid .tpa-table-cadre { overflow-x: visible; }
  .appgrid .tpa-table { min-width: 0; }
  .appgrid .tpa-table, .appgrid .tpa-table tbody { display: block; width: 100%; }
  .appgrid .tpa-table thead { display: none; }
  .appgrid .tpa-table tbody tr {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px; padding: 12px 60px 12px 12px; border-top: 1px solid var(--et-hairline);
  }
  .appgrid .tpa-table td { display: block; padding: 0 !important; border: 0; text-align: left !important; background: transparent; }
  .appgrid .tpa-table td:empty { display: none; }
  .appgrid .tpa-table td.tpa-cell-salarie { grid-column: 1 / -1; }
  .appgrid .tpa-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);
  }
  .appgrid .tpa-table tr.ep-rangee--critique td[data-lib]::before,
  .appgrid .tpa-table tr.ep-rangee--negatif td[data-lib]::before { color: var(--et-muted-sur-alerte); }
  .appgrid .tpa-table td.tpa-cell-action { position: absolute; top: 6px; right: 6px; }
  .appgrid .tpa-recalcul { width: 44px; min-height: 44px; }
  .appgrid .tpa-table .ep-libelle-court { max-width: none; }
  .appgrid .tpa-table tbody tr td.tpa-vide-ligne { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .appgrid .tpa-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .appgrid .tpa-recherche { width: 100%; }
}

/* ==========================================================================
   Fiche du bulletin — Pages/Paie/BulletinFiche.razor (« Bulletin de paie.dc.html »)
   Colonne latérale (salarié, cumuls, vie du bulletin) et colonne principale (alertes,
   indicateurs, détail par rubrique, comparaison au mois précédent).
   ========================================================================== */
.appgrid .bfi-vide { padding: 44px; text-align: center; color: var(--et-muted); }
.appgrid .bfi-retour { color: var(--et-lien); font-weight: 600; padding: 0 8px 0 0; }
.appgrid .bfi-rang { font-size: 13px; color: var(--et-muted); font-variant-numeric: tabular-nums; }
.appgrid .bfi-pas { width: 32px; padding: 0; justify-content: center; }
.appgrid .bfi-pas.est-inerte { pointer-events: none; color: var(--et-faint); }

.appgrid .bfi-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.appgrid .bfi-cote, .appgrid .bfi-principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.appgrid .bfi-cote .ep-carte, .appgrid .bfi-principal .ep-carte { margin: 0; }
.appgrid .bfi-fiche { padding: 6px 16px 10px; }
.appgrid .bfi-fiche .ep-fiche__rangee { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--et-hairline); }
.appgrid .bfi-fiche .ep-fiche__rangee:last-child { border-bottom: 0; }
.appgrid .bfi-fiche .ep-fiche__valeur { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.appgrid .bfi-tiret { color: var(--et-faint); }

.appgrid .bfi-vie { list-style: none; margin: 0; padding: 8px 16px 12px; }
.appgrid .bfi-vie__ligne { display: flex; gap: 10px; padding: 6px 0; }
.appgrid .bfi-vie__puce { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--et-succes); }
.appgrid .bfi-vie__ligne.est-alerte .bfi-vie__puce { background: var(--et-avertissement-mark); }
.appgrid .bfi-vie__quand { font-size: 12px; color: var(--et-muted); font-variant-numeric: tabular-nums; }
.appgrid .bfi-vie__detail { font-size: 13px; color: var(--et-ink); }
.appgrid .bfi-vie__motif { font-size: 12px; color: var(--et-muted); }

.appgrid .bfi-alerte { display: flex; align-items: flex-start; gap: 10px; }
.appgrid .bfi-alerte__glyphe { flex: none; font-size: 16px; line-height: 1.4; }
.appgrid .bfi-alerte__lien { display: inline-block; margin-top: 6px; font-size: 13px; }

.appgrid .bfi-table-cadre { overflow-x: auto; }
.appgrid .bfi-table { min-width: 640px; }
.appgrid .bfi-code { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.appgrid .bfi-net td { font-weight: 700; }
.appgrid .bfi-net.est-negatif .ep-num { color: var(--et-danger-ink); }
.appgrid .bfi-methode { padding: 10px 18px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }
.appgrid .bfi-ecart { color: var(--et-muted); }
.appgrid .bfi-ecart.est-hausse { color: var(--et-avertissement-ink); font-weight: 600; }
.appgrid .bfi-ecart.est-baisse { color: var(--et-danger-ink); font-weight: 600; }

.appgrid .bfi-cause { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 18px; border-top: 1px solid var(--et-hairline); }
.appgrid .bfi-cause:empty { display: none; }
.appgrid .bfi-cause.est-attendue { background: var(--et-avertissement-bg); }
.appgrid .bfi-cause__libelle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--et-muted); }
.appgrid .bfi-cause.est-attendue .bfi-cause__libelle,
.appgrid .bfi-cause.est-attendue .bfi-cause__texte { color: var(--et-avertissement-ink); }
.appgrid .bfi-cause__texte { font-size: 13px; color: var(--et-ink); }
.appgrid .bfi-cause__par { font-size: 12px; color: var(--et-muted); }
.appgrid .bfi-cause__modifier { margin-left: auto; padding: 0 8px; color: var(--et-lien); font-weight: 600; }
.appgrid .bfi-cause__saisie { width: 100%; resize: vertical; }

@media (max-width: 1100px) {
  .appgrid .bfi-grille { grid-template-columns: 1fr; }
}

/* Le calcul de l'impôt (lot M4.c) : la trace fiscale conservée depuis M4.a, une étape par ligne.
   L'opération qui relie une étape à la précédente est un glyphe dans sa propre colonne, pour que
   les montants restent alignés à droite ; le libellé seul passe à la ligne sur un téléphone. */
.appgrid .bfi-chaine { padding: 4px 18px 10px; }
.appgrid .bfi-chaine__groupe {
  padding: 12px 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--et-muted); border-bottom: 1px solid var(--et-hairline);
}
.appgrid .bfi-chaine__etape {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--et-hairline); font-size: 13px; color: var(--et-ink);
}
.appgrid .bfi-chaine__op { font-family: var(--et-font-mono); color: var(--et-muted); text-align: center; }
.appgrid .bfi-chaine__valeur { font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.appgrid .bfi-chaine__etape.est-forte { font-weight: 700; }
.appgrid .bfi-impot__vide { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; font-size: 13px; color: var(--et-muted); }
.appgrid .bfi-impot__vide-titre { font-weight: 600; color: var(--et-ink); }

/* Les versions d'un bulletin (lot M4.d) : une par bloc, la plus récente d'abord, chacune avec
   ses quatre totaux face au bulletin actuel. Un écart non nul se lit en gras, sans couleur d'état :
   une correction n'est ni une alerte ni un succès. */
.appgrid .bfi-versions__vide { padding: 14px 18px; font-size: 13px; color: var(--et-muted); }
.appgrid .bfi-version { border-top: 1px solid var(--et-hairline); }
.appgrid .bfi-version:first-of-type { border-top: 0; }
.appgrid .bfi-version__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 18px 4px; }
.appgrid .bfi-version__numero { font-size: 13px; font-weight: 700; color: var(--et-ink); }
.appgrid .bfi-version__quand { font-size: 12px; color: var(--et-muted); }
.appgrid .bfi-version__motif { padding: 0 18px 8px; font-size: 13px; color: var(--et-ink); }
.appgrid .bfi-ecart.est-modifie { color: var(--et-ink); font-weight: 700; }

/* SOUS 1024 PX, les flèches précédent / suivant prennent la cible tactile de 44 px
   (docs/cibles-tactiles.md) : 32 px de large suffisaient à la souris. */
@media (max-width: 1024px) {
  .appgrid .bfi-pas { width: 44px; min-height: 44px; }
}

/* SOUS 720 PX, LE DÉTAIL DU BULLETIN EN CARTES. La table de 640 px défilait en largeur — 273 px
   coupés à 390 : pour qui lit, des colonnes omises. Aucune n'est retirée (laquelle est secondaire
   n'est pas une décision de CSS, docs/tables-larges.md) : la rubrique en tête, chaque montant sous
   son libellé (data-lib). Même parti que .tpa-table. La comparaison, à quatre colonnes, tient
   dans la largeur dès que la sienne n'est plus imposée. */
@media (max-width: 720px) {
  .appgrid .bfi-table { min-width: 0; }
  .appgrid .bfi-table-cadre { overflow-x: visible; }
  .appgrid .bfi-table--detail, .appgrid .bfi-table--detail tbody { display: block; width: 100%; }
  .appgrid .bfi-table--detail thead { display: none; }
  .appgrid .bfi-table--detail tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px;
    padding: 10px 12px; border-top: 1px solid var(--et-hairline);
  }
  .appgrid .bfi-table--detail td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
  .appgrid .bfi-table--detail td[colspan] { grid-column: 1 / -1; }
  .appgrid .bfi-table--detail td.bfi-code { grid-column: 1 / -1; }
  .appgrid .bfi-table--detail td.bfi-code + td { grid-column: 1 / -1; margin-top: -6px; }
  .appgrid .bfi-table--detail 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);
  }
}
/* Les en-têtes en capitales espacées réclamaient 145 px pour « Coût employeur » : ils passent sur deux lignes. */
.appgrid .tpa-table thead th { white-space: normal; vertical-align: bottom; }

/* La campagne de calcul du mois (lot M1.e) : en cours, la barre et ses compteurs ; en échec, la
   liste des salariés à corriger. Bandeau, barre et lignes sont ceux du gabarit EasyPaie. */
.appgrid .tpa-campagne { margin-bottom: 14px; }
.appgrid .tpa-campagne__tete { display: flex; gap: 10px; align-items: flex-start; border-width: 0 0 1px; }
.appgrid .tpa-campagne__glyphe { font-size: 18px; line-height: 1.3; }
.appgrid .tpa-campagne__corps { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.appgrid .tpa-campagne__compteurs { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--et-ink); }
.appgrid .tpa-campagne__compteurs strong { font-family: var(--et-font-mono); font-weight: 600; }
.appgrid .tpa-campagne__echecs { color: var(--et-danger-ink); }
.appgrid .tpa-campagne__releve { color: var(--et-muted); }
.appgrid .tpa-campagne__actions { display: flex; flex-wrap: wrap; gap: var(--et-outils-gap); }

/* REPRENDRE LE CALCUL (lot R2) — au bout du bandeau d'une campagne arrêtée, par tranche : le
   texte prend la place, le bouton garde la sienne. Sous 560 px il passe sous le texte. */
.appgrid .tpa-campagne__tete > div { flex: 1; min-width: 0; }
.appgrid .tpa-reprendre { flex: none; align-self: center; }
@media (max-width: 560px) {
    .appgrid .tpa-campagne__tete { flex-wrap: wrap; }
    .appgrid .tpa-reprendre { width: 100%; justify-content: center; }
}

/* L'option « Tout ou rien », dans la barre de période, juste avant « Recalculer tout ». */
.appgrid .tpa-tout-ou-rien { align-self: center; font-size: 13px; white-space: nowrap; }