/* ===========================================================================
ÉCRAN CONTRÔLE POST-CALCUL (.ctp-*)
Components/Pages/Paie/Controle.razor — PAY-06.
SA PROPRE FEUILLE, ET NON LA QUEUE DE easypaie.css. Règle du dépôt : un
écran, un fichier, un dans App.razor après la feuille de module dont
il emprunte les composants. Barre d'outils, cartes, tables, pastilles,
indicateurs, bandeaux et champs viennent d'easypaie.css sans être redéfinis.
AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. LA BARRE D'OUTILS — période, base de comparaison, seuil, action.
--------------------------------------------------------------------------- */
.ctp-outils { margin-bottom: 12px; }
.ctp-filtre { width: auto; min-width: 120px; }
.ctp-filtre--large { min-width: 280px; }
/* Le seuil est un POURCENTAGE, et il faut le dire à côté du nombre. Le motif
remplace l'`input-group` de Bootstrap, dont l'« addon » est un bloc bordé
collé au champ : à angles droits, deux boîtes accolées se lisent comme un
seul champ coupé en deux. */
.ctp-seuil { display: flex; align-items: center; gap: 6px; }
.ctp-seuil-champ { width: 74px; }
.ctp-seuil-unite { font-size: 12px; color: var(--et-muted); }
/* ---------------------------------------------------------------------------
2. LE VERDICT ET LES QUATRE INDICATEURS.
--------------------------------------------------------------------------- */
.ctp-bandeau { margin-bottom: 12px; }
/* Le verdict prend la place, le lien reste à droite : `.ep-bandeau` est une
rangée souple, elle ne sait pas lequel de ses enfants doit pousser. */
.ctp-verdict { flex: 1 1 320px; min-width: 0; }
.ctp-lien-bulletins { flex: none; margin-left: auto; align-self: center; }
.ctp-indicateurs { margin-bottom: 14px; }
/* ---------------------------------------------------------------------------
3. LES DEUX CARTES ET LEURS TABLES.
--------------------------------------------------------------------------- */
.ctp-carte { margin-bottom: 14px; }
.ctp-carte:last-child { margin-bottom: 0; }
/* Le sélecteur de niveau et l'export vivent dans le bandeau de carte, qui
aligne ses enfants sur la ligne de base : des contrôles de 32 px y
descendraient de deux pixels sous l'intitulé. */
.ctp-carte .ep-carte__bandeau .ep-vues,
.ctp-carte .ep-carte__bandeau .ctp-bascule { align-self: center; }
.ctp-export { flex: none; margin-left: auto; align-self: center; }
/* LA TABLE DÉFILE DANS SA CARTE, PAS DANS LA PAGE. Celle de comparaison aligne
douze colonnes dont huit de montants : sans ce conteneur, c'est le corps de
page qui part vers la droite en emportant la coquille et le rail
(docs/conventions-responsive.md). */
.ctp-defile { overflow-x: auto; }
/* La table de comparaison ne s'enroule pas : un montant coupé en deux lignes
cesse d'être comparable à celui du dessus, et c'est tout l'objet de l'écran. */
.ctp-table-compare { white-space: nowrap; }
/* Chargement, liste vide, période sans observation : un seul registre pour les
trois. Posé aussi sur un
, d'où le `text-align` explicite. */
.ctp-etat { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--et-muted); }
/* ---------------------------------------------------------------------------
4. TROIS FORMES DE CELLULE.
--------------------------------------------------------------------------- */
/* Un MATRICULE est un identifiant : chasse fixe, pour que deux matricules
posés l'un sous l'autre se comparent d'un coup d'œil. */
.ctp-matricule-cel { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }
.ctp-matricule { margin-left: 6px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
/* Le CODE de contrôle (« NET_NEGATIF », « BASE_CNSS_NULLE ») est un identifiant
technique : on le recopie dans un ticket, on ne le lit pas comme une phrase. */
.ctp-code {
display: inline-block; padding: 1px 6px;
background: var(--et-surface-2); border: 1px solid var(--et-hairline);
font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}
.ctp-terne { color: var(--et-muted); }
/* Le nom d'un salarié mène à sa fiche. Un lien, pas un bouton : c'est une
ADRESSE — elle s'ouvre dans un onglet et se met en favori. */
.ctp-lien { color: var(--et-form-blue-encre); text-decoration: none; font-weight: 600; }
.ctp-lien:hover { text-decoration: underline; }
.ctp-total-lbl { text-align: right; }
/* ---------------------------------------------------------------------------
5. LES TEINTES DE NIVEAU.
Elles remplacent « text-danger » / « text-warning » / « text-muted » de
Bootstrap, dont les rouges et les ambres ne sont pas ceux des jetons et ne
suivent pas le thème sombre.
UNE VARIATION N'EST ROUGE QUE PASSÉ LE SEUIL DEMANDÉ. C'est la règle que
`VarClasse` applique déjà côté C# ; ces deux classes en sont la moitié
visuelle. Sans elle, la colonne « Var. » serait rouge de bout en bout et ne
signalerait plus rien — ce que ce contrôle existe précisément pour éviter.
--------------------------------------------------------------------------- */
.ctp-ico-ko { color: var(--et-danger-ink); }
.ctp-ico-alerte { color: var(--et-avertissement-ink); }
.ctp-ico-ok { color: var(--et-inerte); }
.ctp-var-forte { color: var(--et-danger-ink); font-weight: 600; }
.ctp-var-calme { color: var(--et-muted); }
/* Une BAISSE de net se signale, une hausse non : un salarié payé moins que le
mois dernier est la question qu'on vient poser à cet écran. */
.ctp-baisse { color: var(--et-danger-ink); }
/* ---------------------------------------------------------------------------
6. LA BASCULE « ÉCARTS SEULEMENT ».
Une case à cocher et son libellé, pas l'interrupteur de Bootstrap : celui-ci
est un rail arrondi de 2 rem au milieu d'un écran à angles droits.
--------------------------------------------------------------------------- */
.ctp-bascule {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; color: var(--et-ink); cursor: pointer; white-space: nowrap;
}
/* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css),
et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */
.ctp-bascule input { border-radius: 0; cursor: pointer; }
/* ---------------------------------------------------------------------------
7. PALIERS — docs/conventions-responsive.md.
--------------------------------------------------------------------------- */
/* Règle tactile (lot 02) : sous 1024 px, aucune cible sous 44 px. */
@media (max-width: 1024px) {
.ctp-outils .ep-btn, .ctp-export, .ctp-lien-bulletins { min-height: 44px; }
.ctp-filtre, .ctp-seuil-champ { min-height: 44px; }
.ctp-carte .ep-vues__btn { min-height: 44px; }
/* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes
les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */
}
/* Sous 720 px les filtres prennent la rangée entière plutôt que de se comprimer
sous leur minimum, et le lien du verdict passe SOUS le texte : à cette
largeur, le garder à droite écraserait la phrase sur quatre lignes. */
@media (max-width: 720px) {
.ctp-filtre, .ctp-filtre--large { width: 100%; min-width: 0; }
.ctp-lien-bulletins, .ctp-export { margin-left: 0; }
.ctp-verdict { flex-basis: 100%; }
}