/* ==========================================================================
   EasyPaie — feuille de style du module de paie
   SAP Fiori habillé EasyTech. Chargée APRÈS `modele-erp.css`, dont elle
   s'appuie sur les jetons --et-* et sur lequel elle ne revient jamais.

   ÉTAT AU 2026-08-20 : DÉPOSÉE, PAS ENCORE CONSOMMÉE. Aucun écran n'emploie
   encore une classe .ep-* — le portage de la passation n'a pas commencé. La
   feuille n'est donc pas du code mort, elle est du code en attente ; et c'est
   la seule fenêtre où corriger sa charpente ne casse aucun écran.

   Les maquettes du dossier `maquettes/` sont écrites en styles en ligne : c'est
   une contrainte de l'outil de maquettage, pas une intention. Ce fichier est la
   traduction de ces styles en classes, et c'est LUI qui doit être porté — jamais
   les attributs `style=` des maquettes.

   Trois règles tenues partout dans le module :
   1. Les surfaces sont plates. Aucune ombre, aucun arrondi sur les cartes : la
      structure tient par les filets. Arrondi 4px sur les boutons d'outils,
      pilule sur les pastilles, angles droits sur les champs de saisie.
   2. L'orange EasyTech est réservé aux boutons d'engagement (Modifier,
      Enregistrer, Nouveau X, le CTA d'une modale). Jamais une pastille, une case
      à cocher, un numéro de page, une bordure.
   3. Toute couleur sémantique porte un fond ET un texte accordés. Un rouge sur
      blanc n'est pas un état négatif, c'est un texte rouge.
   ========================================================================== */

:root {
  /* SIX JETONS, ET SIX SEULEMENT.
     Ce bloc en portait trente-six le 2026-08-19, jour du dépôt de la passation.
     Vingt-huit couleurs et les deux piles de polices étaient, à l'octet près, la
     valeur d'un jeton --et-* déjà défini par easytech-theme.css : un second
     vocabulaire pour les mêmes teintes. La feuille les lit désormais chez leur
     propriétaire, et non plus dans une copie.

     CE QUE LA COPIE COÛTAIT, ET QUI N'ÉTAIT PAS QU'UN DOUBLON : les --ep-*
     étaient des littéraux du thème clair. easytech-theme.css redéfinit les
     --et-* sous « .appgrid[data-theme=dark] », et EasyPayroll A la bascule de
     thème (PaieLayout, ThemeToggleActive). Les seize familles de composants de
     cette feuille se seraient donc rendues en clair sur clair dès le premier
     écran porté en thème sombre — invisible aujourd'hui, puisqu'aucun écran ne
     les emploie encore. C'est le bon moment : le défaut se corrige AVANT le
     portage, pas au trente-cinquième écran.

     Un alias (« --ep-filet: var(--et-hairline) » posé sur :root) n'aurait PAS
     suffi et aurait masqué le défaut : la substitution se calcule sur l'élément
     qui PORTE la déclaration. Sur :root, --et-hairline vaut la valeur claire ;
     --ep-filet aurait figé cette valeur puis l'aurait fait hériter jusque dans
     la coquille sombre. Il fallait remplacer les usages, pas les renommer.

     Restent ici les six valeurs qui n'ont pas de jumeau --et-* — quatre teintes
     propres aux maquettes de paie, et la trame de page. Elles gardent le
     préfixe de module parce qu'elles appartiennent vraiment au module. */

  /* Teintes sans équivalent dans le thème : elles viennent des maquettes du
     dossier de passation et n'existent nulle part ailleurs dans la suite. */
  --ep-bleu-bordure:    #C3D8F0;   /* bordure de bandeau d'information */
  --ep-ardoise-terne:   #A9B4C0;   /* libellé d'une colonne neutralisée (week-end) */
  --ep-positif-bordure: #A8DCC0;   /* bordure de bandeau positif — plus soutenue
                                      que --et-succes-bord (#C6E7D4), qui n'est
                                      donc PAS son jumeau : aliaser aurait
                                      changé le rendu que la passation fixe. */
  --ep-negatif-tuile:   #FFF7F7;   /* fond de rangée en anomalie, plus léger que
                                      --et-danger-badge-bg employé par les
                                      pastilles */

  /* Trame de page */
  --ep-plafond:         1600px;
  --ep-gouttiere:       24px;
}

/* --------------------------------------------------------------------------
   1. Trame de page

   LA COQUILLE PORTE LA PAGE, ET CETTE SECTION S'EFFACE DEVANT ELLE.

   Les maquettes de la passation sont des pages AUTONOMES : leur trame pose une
   hauteur d'écran entière, un plafond de 1600 px, un centrage et une gouttière de
   24 px. Portés tels quels dans EasyERP, ces trois derniers s'ajoutaient à ce que
   `.et-scroll` de la coquille ShellModule pose déjà — « padding: 20px 22px 28px »
   — donc une gouttière doublée et un contenu deux fois plus rentré que prévu.

   La géométrie est donc ALIGNÉE SUR CELLE DE `.ecran-tete` (easytime-shell.css),
   le patron que les écrans déjà portés du reste de la suite emploient : l'en-tête
   est une CARTE dans la zone déjà rembourrée, non un bandeau pleine largeur. Deux
   raisons de préférer cela à un débordement négatif qui rendrait le pleine
   largeur de la maquette : la valeur du rembourrage de la coquille change selon
   les paliers de largeur (lot01-coquille-responsive.css), et un écran de paie
   doit se ressembler à un écran de pointage — c'est la même application.

   `--ep-plafond` et `--ep-gouttiere` restent déclarés : ils servent à qui
   ouvrirait une maquette hors coquille, et documentent l'intention d'origine.

   `.ep-page` reste défini et n'est employé par AUCUN écran, volontairement : la
   coquille tient déjà ce rôle, et l'empiler créerait une seconde zone plein écran
   dans la première. Il n'est conservé que pour l'impression et pour une éventuelle
   page hors coquille.
   -------------------------------------------------------------------------- */

.ep-page {
  min-height: 100vh;
  margin: 0;
  background: var(--et-surface-2);
  font-family: var(--et-font);
  color: var(--et-ink);
  -webkit-font-smoothing: antialiased;
}

/* En-tête : le filet bleu de 3px sous l'en-tête est la signature du module. */
.ep-entete {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--et-surface);
  border-bottom: 3px solid var(--et-form-blue);
}
/* La trame intérieure ne rembourre plus : son parent le fait. Elle reste dans le
   balisage pour que les écrans se portent sans retoucher leur structure. */
.ep-entete__trame { max-width: none; margin: 0; padding: 0; }

.ep-corps {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ep-fil { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-faint); }
.ep-fil__segment { color: var(--et-ink); }
.ep-fil__separateur { color: var(--et-repos-bord); }

.ep-titre-rangee {
  margin-top: 7px;
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.ep-titre { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.025em; }

/* QUALIFICATION D'ÉCRAN, en queue de fil d'Ariane : la référence du cahier des
   charges et la nature de l'écran. Ajoutée pour l'ossature `EcranPaie`, qui sert
   vingt-trois écrans du module — donc dans la feuille de MODULE et non dans une
   feuille d'écran.

   EN QUEUE DE FIL, ET NON EN BADGE À CÔTÉ DU TITRE, qui était le rendu précédent :
   ce sont des métadonnées de projet, pas des états de l'objet affiché. Un badge
   coloré posé près du titre a le poids visuel d'un statut, et se lit comme tel.
   Ici elles se lisent quand on les cherche, et disparaissent sinon. */
.ep-fil .ecp-qualif {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--et-faint);
  white-space: nowrap;
}
.ep-fil .ecp-ref {
  font-family: var(--et-font-mono);
  letter-spacing: .04em;
  color: var(--et-muted);
}
.ep-sous-titre { margin-top: 4px; font-size: 13px; color: var(--et-muted); }

/* LA RÈGLE « a » GLOBALE A QUITTÉ CETTE FEUILLE (2026-08-20).
   Elle vivait ici, et c'était le seul « a { } » de toute l'application : une
   feuille de MODULE, chargée par App.razor pour la suite entière, décidait donc
   de l'apparence des liens d'EasyStock, d'EasyCompta et de la caisse. Elle est
   désormais dans easytech-theme.css, section « LIENS », sur les jetons
   --et-lien / --et-lien-survol, à l'identique en thème clair et corrigée en
   thème sombre. Ne pas la réintroduire ici. */

/* --------------------------------------------------------------------------
   2. Boutons
   Un seul bouton orange par écran : celui qui engage. Tous les autres sont
   transparents à texte bleu.
   -------------------------------------------------------------------------- */

.ep-btn {
  height: 32px; padding: 0 13px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 0;
  background: transparent; border: 1px solid var(--et-filet-fort);
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--et-form-blue-encre);
  cursor: pointer;
  white-space: nowrap;   /* Open Sans est large : un libellé long se couperait */
}
.ep-btn:hover { background: var(--et-tint); }

/* UN BOUTON D'OUTILS PORTÉ PAR UN LIEN. Beaucoup d'actions de ces écrans sont des
   NAVIGATIONS — « Ouvrir le solde de tout compte », « Voir les congés » — et un
   <a> est ce qui les décrit : clic milieu, ouverture dans un onglet, adresse
   copiable. Reste que le thème souligne les liens au survol (easytech-theme.css,
   section LIENS), ce qui sur une pastille d'outil se lit comme un défaut. La
   règle vit ici, dans la feuille de MODULE, et non dans une feuille d'écran :
   le cas se présentera sur la plupart des 35 écrans. */
a.ep-btn:hover,
a.ep-btn--engagement:hover,
a.ep-btn--destructeur:hover { text-decoration: none; }
a.ep-btn { text-decoration: none; }

.ep-btn--engagement {
  padding: 0 15px;
  background: var(--et-action); border-color: var(--et-action);
  color: var(--et-sur-aplat);                                                                                                                                       
}
.ep-btn--engagement:hover { background: var(--et-action-d); }

/* CTA inactif : fond délavé et curseur d'interdiction, jamais un bouton masqué.
   L'utilisateur doit voir l'action qu'il ne peut pas encore faire. */
.ep-btn--engagement:disabled,
.ep-btn--inactif {
  background: var(--et-action-off); border-color: var(--et-action-off);
  cursor: not-allowed;
}
.ep-btn--destructeur { border-color: var(--et-danger-bord); color: var(--et-danger-ink); }
.ep-btn--destructeur:hover { background: var(--et-danger-badge-bg); }
.ep-btn--nu { border: none; background: transparent; color: var(--et-muted); padding: 0; }
.ep-btn--nu:hover { background: transparent; color: var(--et-ink); }
.ep-btn--haut { height: 42px; }       /* barre d'outils de liste */

/* --------------------------------------------------------------------------
   3. Barre d'outils — deux emplacements selon la nature de l'écran
   -------------------------------------------------------------------------- */

/* Écran de liste : barre en bande, premier élément du corps. */
.ep-outils {
  display: flex; align-items: center;
  gap: 8px; row-gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--et-surface-2);
  border: 1px solid var(--et-hairline);
}
.ep-outils__intitule {
  font-family: var(--et-font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--et-muted); white-space: nowrap;
}
.ep-outils__droite { margin-left: auto; }

/* Fiche objet : barre d'outils dans l'en-tête, à droite du titre. */
.ep-entete__outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Sélecteur de vue : boutons 32px accolés, l'actif en ardoise pleine. */
.ep-vues { display: flex; border: 1px solid var(--et-filet-fort); overflow: hidden; }
.ep-vues__btn {
  height: 32px; padding: 0 12px;
  border: none; border-right: 1px solid var(--et-filet-fort);
  background: var(--et-surface);
  font-family: inherit; font-size: 13px; color: var(--et-ink);
  cursor: pointer; white-space: nowrap;
}
.ep-vues__btn:hover { background: var(--et-rang); }
/* Même cas : blanc sur l'ardoise de l'onglet retenu, invariant par thème. */
.ep-vues__btn[aria-pressed="true"] { background: var(--et-table-head); color: var(--et-sur-ardoise-plein); font-weight: 600; }

/* Puce de filtre : bordure bleue et fond teinté quand active. */
.ep-puce-filtre {
  height: 32px; padding: 0 12px;
  background: var(--et-surface); border: 1px solid var(--et-filet-fort);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink);
  cursor: pointer; white-space: nowrap;
}
.ep-puce-filtre:hover { border-color: var(--et-form-blue); }
.ep-puce-filtre[aria-pressed="true"] {
  background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue-d);
}

/* --------------------------------------------------------------------------
   4. Cartes — à plat, la structure tient par les filets
   -------------------------------------------------------------------------- */

.ep-carte { background: var(--et-surface); border: 1px solid var(--et-hairline); }

/* Bandeau de carte avec filet vertical bleu et intitulé mono en capitales. */
.ep-carte__bandeau {
  display: flex; align-items: baseline; gap: 10px; row-gap: 6px; flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--et-surface-2);
  border-bottom: 1px solid var(--et-hairline);
}
.ep-carte__filet { flex: none; width: 3px; height: 15px; background: var(--et-form-blue); }
.ep-carte__intitule {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--et-table-head-encre);
}
.ep-carte__note { flex: none; font-size: 12px; color: var(--et-faint); }
.ep-carte__titre { padding: 11px 18px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline); font-size: 14px; font-weight: 700; color: var(--et-table-head-encre); }

/* Pied de carte : la mention de méthode, jamais une action.
   « Dire la méthode » est une règle du module : sous chaque série ou table,
   la formule en clair. Un pourcentage sans dénominateur est une erreur. */
.ep-carte__pied {
  padding: 11px 18px;
  background: var(--et-surface-3);
  border-top: 1px solid var(--et-hairline);
  font-size: 12px; line-height: 1.6; color: var(--et-faint);
}

/* --------------------------------------------------------------------------
   5. Cartes d'indicateur
   Icône + libellé sur une ligne, puis la valeur en mono avec sa précision en
   clair à côté : « 193 j · sur 4 788 jours ouvrés ».
   -------------------------------------------------------------------------- */

.ep-indicateurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.ep-indicateur { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 14px 16px; }
.ep-indicateur--critique { background: var(--et-avertissement-bg); }
.ep-indicateur--negatif  { background: var(--et-danger-badge-bg); }
.ep-indicateur__tete { display: flex; align-items: center; gap: 7px; }
.ep-indicateur__puce { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--et-table-head); }
.ep-indicateur__libelle {
  flex: 1; min-width: 0; font-size: 12px; color: var(--et-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-indicateur__corps { margin-top: 7px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ep-indicateur__valeur { font-family: var(--et-font-mono); font-size: 19px; font-weight: 500; }
.ep-indicateur__precision { flex: 1 1 110px; font-size: 12px; color: var(--et-faint); }

/* --------------------------------------------------------------------------
   6. Bandeaux d'état
   Une synthèse ne doit pas effacer l'alerte de son détail : la teinte d'un
   bandeau de total suit le PIRE état des lignes qu'il résume, pas leur moyenne.
   -------------------------------------------------------------------------- */

.ep-bandeau {
  display: flex; align-items: flex-start;
  gap: 12px; row-gap: 10px; flex-wrap: wrap;
  padding: 12px 18px;
  border: 1px solid var(--et-hairline);
}
.ep-bandeau__titre { font-size: 14px; font-weight: 700; }
.ep-bandeau__detail { margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--et-muted); }
.ep-bandeau__mention { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }

.ep-bandeau--positif  { background: var(--et-succes-bg);  border-color: var(--ep-positif-bordure); }
.ep-bandeau--positif  .ep-bandeau__titre { color: var(--et-succes-ink); }
.ep-bandeau--critique { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-bord); }
.ep-bandeau--critique .ep-bandeau__titre { color: var(--et-avertissement-ink); }
.ep-bandeau--negatif  { background: var(--et-danger-badge-bg);  border-color: var(--et-danger-bord); }
.ep-bandeau--negatif  .ep-bandeau__titre { color: var(--et-danger-ink); }
.ep-bandeau--info     { background: var(--et-tint);   border-color: var(--ep-bleu-bordure); }

/* Cartouche « écran à compléter » : la même carte d'information, mais centrée et
   plus aérée — elle occupe une page vide, pas une ligne dans une page pleine. */
.ecp-vide { padding: 26px 22px; }
.ep-bandeau--info     .ep-bandeau__titre { color: var(--et-form-blue-d); }

/* --------------------------------------------------------------------------
   7. Tables denses
   En-tête ardoise, libellés mono 10px capitales. Colonnes neutralisées
   (week-end, période en cours) en ardoise sombre.
   -------------------------------------------------------------------------- */

.ep-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ep-table th {
  padding: 9px 16px;
  background: var(--et-table-head);
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--et-sur-ardoise);
  white-space: nowrap;
  text-align: left;
}
.ep-table th.ep-num { text-align: right; }
.ep-table th.ep-neutralise { background: var(--et-table-head-fonce); color: var(--ep-ardoise-terne); }
.ep-table td { padding: 10px 16px; border-bottom: 1px solid var(--et-rang); }
.ep-table tbody tr:hover { background: var(--et-surface-3); }
.ep-table__separateur { border-right: 1px solid var(--et-rang); }

/* Valeurs numériques : mono, alignées à droite, insécables.
   Décomptes entiers, heures décimales, écarts signés. */
.ep-num { text-align: right; font-family: var(--et-font-mono); font-size: 13px; white-space: nowrap; }
.ep-num--fort { font-weight: 500; }
.ep-num--neutre { color: var(--et-inerte); }   /* période en cours, valeur non applicable */

/* Rangée de groupe dans une table : intitulé mono sur fond clair. */
.ep-table__groupe td {
  padding: 9px 16px;
  background: var(--et-surface-2);
  border-top: 1px solid var(--et-filet-fort);
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--et-table-head-encre);
}

/* Rangée de total : filet ardoise épais, jamais une couleur de fond forte. */
.ep-table__total td {
  padding: 11px 16px;
  background: var(--et-surface-2);
  border-top: 2px solid var(--et-table-head);
  font-weight: 700; color: var(--et-table-head-encre);
}
.ep-table__total .ep-num { font-size: 14px; font-weight: 500; color: var(--et-ink); }

/* Rangées teintées par leur état. */
.ep-rangee--critique { background: var(--et-avertissement-bg); }
.ep-rangee--negatif  { background: var(--ep-negatif-tuile); }

/* --------------------------------------------------------------------------
   8. Pastilles d'état
   Pilule, point de couleur, libellé. Jamais d'orange EasyTech ici : le critique
   Fiori (#E9730C) et l'orange de marque (#F26C16) sont deux couleurs distinctes.
   -------------------------------------------------------------------------- */

.ep-pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.ep-pastille__point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ep-pastille--positif  { background: var(--et-succes-bg);  color: var(--et-succes-ink); }
.ep-pastille--critique { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.ep-pastille--negatif  { background: var(--et-danger-badge-bg);  color: var(--et-danger-ink); }
.ep-pastille--info     { background: var(--et-tint);   color: var(--et-form-blue-d); }
.ep-pastille--neutre   { background: var(--et-surface-2);  color: var(--et-muted); }
.ep-pastille--ronde    { border-radius: 999px; padding: 1px 9px; font-size: 12px; }

/* --------------------------------------------------------------------------
   9. Barres et jauges
   La valeur SUIT la fin du remplissage, posée hors de la pilule en frère à sa
   droite. Une marge automatique ne suffit pas : elle n'absorbe que de l'espace
   libre positif. Inscrite dedans en blanc seulement au-delà de 70 %.
   Ne jamais décider la couleur sur une fraction de piste.
   -------------------------------------------------------------------------- */

.ep-barre { display: flex; align-items: center; gap: 9px; }
.ep-barre__piste {
  flex: 1; min-width: 44px; height: 17px;
  background: var(--et-piste); border-radius: 0;
  overflow: hidden;
  display: flex; align-items: center;
}
.ep-barre__remplissage { flex: none; height: 100%; background: var(--et-form-blue); }
.ep-barre__remplissage--positif  { background: var(--et-succes); }
.ep-barre__remplissage--critique { background: var(--et-avertissement); }
.ep-barre__remplissage--negatif  { background: var(--et-danger); }
.ep-barre__remplissage--ardoise  { background: var(--et-table-head); }
.ep-barre__remplissage--inerte   { background: var(--et-repos-bord); }
.ep-barre__valeur { flex: none; font-family: var(--et-font-mono); font-size: 13px; color: var(--et-ink); }
.ep-barre__base { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }
.ep-barre--fine .ep-barre__piste { height: 8px; border-radius: 0; }

/* --------------------------------------------------------------------------
   10. Listes d'anomalies et de contrôles
   Filet vertical gauche coloré par la gravité. Le fond ne se teinte que pour
   le bloquant : un avertissement teinté partout ne se distingue plus.
   -------------------------------------------------------------------------- */

.ep-ligne {
  display: flex; align-items: flex-start;
  gap: 14px; row-gap: 10px; flex-wrap: wrap;
  padding: 12px 18px 12px 15px;
  border-top: 1px solid var(--et-rang);
  border-left: 3px solid transparent;
  background: var(--et-surface);
}
.ep-ligne:hover { background: var(--et-surface-3); }
.ep-ligne--bloquant     { border-left-color: var(--et-danger);  background: var(--ep-negatif-tuile); }
.ep-ligne--avertissement{ border-left-color: var(--et-avertissement-bord); }
.ep-ligne--info         { border-left-color: var(--ep-bleu-bordure); }
.ep-ligne--conforme     { border-left-color: transparent; }
.ep-ligne__corps { flex: 1 1 320px; min-width: 240px; }
.ep-ligne__libelle { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.ep-ligne__consequence { margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--et-muted); }
.ep-ligne__exemples { margin-top: 4px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.ep-ligne__compte { flex: 0 1 180px; min-width: 150px; }
.ep-ligne__compte-valeur { font-family: var(--et-font-mono); font-size: 18px; font-weight: 500; }
.ep-ligne__compte-base { margin-top: 2px; font-size: 12px; color: var(--et-muted); }
.ep-ligne__actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   11. Formulaires denses
   Deux colonnes, libellés au-dessus, champs 42px (40px en modale).
   AUCUN filet entre rangées : seuls les en-têtes de groupe en portent.
   Sous un champ, UNE SEULE ligne à la fois — aide, erreur ou compteur.
   -------------------------------------------------------------------------- */

.ep-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 18px; }
.ep-champ { display: flex; flex-direction: column; gap: 5px; }
.ep-champ__libelle { font-size: 12px; color: var(--et-muted); }
.ep-champ__requis::after { content: ' *'; color: var(--et-danger-ink); }

/* Champs à angles droits : c'est une règle du thème, pas un oubli. */
.ep-saisie {
  height: 42px; padding: 0 11px;
  background: var(--et-surface); border: 1px solid var(--et-filet-fort); border-radius: 0;
  font-family: inherit; font-size: 13px; color: var(--et-ink);
}
.ep-saisie:focus { outline: none; border-color: var(--et-form-blue); }
.ep-saisie--erreur { border-color: var(--et-danger); }
.ep-saisie:disabled { background: var(--et-surface-2); color: var(--et-muted); cursor: not-allowed; }
.ep-saisie--modale { height: 40px; }
.ep-saisie--mono { font-family: var(--et-font-mono); font-size: 14px; }
.ep-champ__aide,
.ep-champ__erreur { font-size: 12px; line-height: 1.45; }
.ep-champ__aide { color: var(--et-faint); }
.ep-champ__erreur { color: var(--et-danger-ink); }

/* En-tête de groupe de formulaire : filet vertical bleu + libellé mono gras. */
.ep-groupe {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--et-hairline);
}
.ep-groupe__filet { flex: none; width: 3px; height: 15px; background: var(--et-form-blue); }
.ep-groupe__libelle {
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--et-table-head-encre);
}
.ep-groupe__note { font-size: 12px; color: var(--et-faint); }

/* Fiche en lecture seule : libellés à droite sur colonne fixe, valeurs à gauche. */
.ep-fiche__rangee { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 5px 0; }
.ep-fiche__libelle { font-size: 12px; color: var(--et-muted); text-align: right; }
.ep-fiche__valeur { font-size: 13px; font-weight: 500; }
.ep-fiche__valeur--mono { font-family: var(--et-font-mono); font-size: 14px; }

/* Panneau d'actions irréversibles : bordure rouge, en bas de fiche, séparé. */
.ep-danger { border: 1px solid var(--et-danger-bord); background: var(--et-surface); }
.ep-danger__bandeau { padding: 11px 18px; background: var(--et-danger-badge-bg); border-bottom: 1px solid var(--et-danger-bord); font-size: 13px; font-weight: 700; color: var(--et-danger-ink); }

/* --------------------------------------------------------------------------
   12. Modales
   Actions en bas à droite. Chaque modale de création annonce ses EFFETS —
   ce que la validation déclenche — et porte une mention de bas de modale.
   -------------------------------------------------------------------------- */

.ep-voile {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 27, 38, .45);   /* voile de modale : le même dans les deux
                                          thèmes, il assombrit ce qu'il couvre */
  display: grid; justify-items: center; align-items: start;
  overflow-y: auto; padding: 24px;
}
.ep-modale { position: relative; width: 100%; max-width: 620px; background: var(--et-surface); border: 1px solid var(--et-filet-fort); }
.ep-modale__entete { padding: 14px 20px; background: var(--et-surface-2); border-bottom: 3px solid var(--et-form-blue); }
.ep-modale__titre { font-size: 17px; font-weight: 700; }
.ep-modale__sous-titre { margin-top: 2px; font-size: 13px; color: var(--et-muted); }
.ep-modale__corps { padding: 16px 20px; }
.ep-modale__pied {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--et-surface-2); border-top: 1px solid var(--et-hairline);
}
.ep-modale__mention { flex: 1; min-width: 0; font-size: 12px; color: var(--et-faint); }

/* Liste des effets d'une validation : puce bleue, titre, conséquence en clair. */
.ep-effets__ligne { display: flex; align-items: baseline; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--et-rang); }
.ep-effets__puce { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--et-form-blue); }
.ep-effets__titre { font-size: 13px; font-weight: 600; }
.ep-effets__detail { margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--et-muted); }

/* --------------------------------------------------------------------------
   13. Onglets de vue analytique
   L'onglet actif porte un soulignement bleu de 3px ; les inactifs portent un
   soulignement TRANSPARENT pour que la hauteur ne bouge pas au survol.
   -------------------------------------------------------------------------- */

.ep-onglets { display: flex; gap: 2px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline); }
.ep-onglet {
  height: 38px; padding: 0 16px;
  border: none; border-bottom: 3px solid transparent;
  background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--et-muted);
  cursor: pointer; white-space: nowrap;
}
.ep-onglet[aria-selected="true"] { background: var(--et-surface); color: var(--et-form-blue-encre); border-bottom-color: var(--et-form-blue); }

/* --------------------------------------------------------------------------
   14. Journaux et pistes d'audit
   Un journal ne se modifie pas : il n'a ni bouton, ni champ, ni tri destructif.
   -------------------------------------------------------------------------- */

.ep-journal__ligne {
  display: flex; align-items: baseline;
  gap: 14px; row-gap: 4px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--et-rang);
}
.ep-journal__quand { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.ep-journal__evenement { flex: 1 1 300px; min-width: 220px; font-size: 13px; }
.ep-journal__auteur { flex: none; font-size: 12px; color: var(--et-ink); }
.ep-journal__role { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }

/* --------------------------------------------------------------------------
   15. Éditions papier
   Les écrans d'impression (ordre de virement, livre de paie) sont bâtis sur le
   composant de page paginée. Ne pas écrire de règle @page dans ce fichier :
   la géométrie d'impression appartient au composant.
   -------------------------------------------------------------------------- */

@media print {
  .ep-outils,
  .ep-entete__outils,
  .ep-vues,
  /* .ep-fil est le fil d'Ariane DE CE MODULE — EasyPaie a le sien, distinct du
     .ecran-fil du gabarit, et il échappait donc à la règle posée là-bas. Trois
     écrans de paie imprimaient « EasyPayroll » en tête de feuille (recette
     d'impression du 2026-09-11). Un fil dit d'où l'on vient ; sur du papier, il
     ne mène nulle part. */
  .ep-fil,
  .ep-puce-filtre { display: none !important; }
  /* Blanc et noir EN DUR, et il faut qu'ils le restent : une impression sort sur
     du papier, qui n'a pas de thème sombre. Jetonner ces deux lignes ferait
     sortir un aplat ardoise sur toute la page en thème sombre. */
  .ep-page { background: #fff; }
  .ep-carte { border-color: #000; }
}

/* --------------------------------------------------------------------------
   16. Animation d'entrée
   Une seule, discrète, sur les blocs qui apparaissent à un changement de vue.
   Aucune animation sur les valeurs : un chiffre qui bouge se lit mal.
   -------------------------------------------------------------------------- */

@keyframes ep-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ep-anime { animation: ep-monte .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  .ep-anime { animation: none; }
}

/* --------------------------------------------------------------------------
   17. Paliers de largeur
   Lot 04 du plan d'action responsive. EN QUEUE DE FEUILLE, et pas au rang que
   suggérerait l'ordre des familles : ces règles n'existent que pour reprendre
   celles qui précèdent, à spécificité égale — placées plus haut, elles se
   feraient écraser par les blocs qu'elles corrigent.

   DANS CETTE FEUILLE ET NON DANS LA SIENNE, contrairement aux lots 01 à 03 :
   ceux-là touchaient le noyau partagé — coquille, gabarit de liste — dont la
   clé de cache est celle de tous les écrans. Ici les paliers ne concernent que
   les .ep-*, dont la clé bouge déjà à chaque retouche du module.

   CE QUE LA MESURE A DIT, ET QUI CHANGE LE LOT PRÉVU
     Le plan annonçait trois paliers, 980 / 720 / 560, « calés sur ceux de la
     fiche ». À la mesure, 980 px N'A RIEN À PORTER : les grilles de cette
     feuille sont déjà fluides — auto-fit minmax(215px) pour les indicateurs,
     minmax(280px) pour les formulaires, flex-wrap partout ailleurs. Aucune
     colonne ne se casse entre 1280 et 720 px. Le seul objet rigide de la
     feuille est la rangée de fiche, et il ne gêne qu'en dessous de 720.
     Poser un palier vide pour tenir un plan aurait ajouté une largeur de
     rupture au dépôt — qui en compte déjà dix-huit — sans rien corriger.
   -------------------------------------------------------------------------- */

/* --- Sous 1024 px : la règle des 44 px, étendue au module -----------------
   Le lot 02 a posé cette règle sur la coquille et sur le gabarit de liste, en
   laissant hors de portée les feuilles de module (docs/cibles-tactiles.md).
   Les commandes d'EasyPayroll tiennent en 32 px, ses onglets en 38 : sur une
   tablette, un écran de paie reste donc à côté de la règle de l'application.

   min-height et non height : un libellé long — « Clôturer la période de paie »
   — passe à la ligne dans une barre d'outils étroite, et une hauteur fixe le
   couperait. Même raison qu'au lot 02. */
@media (max-width: 1024px) {
  .ep-btn,
  .ep-vues__btn,
  .ep-puce-filtre,
  .ep-onglet { min-height: 44px; height: auto; padding-top: 6px; padding-bottom: 6px; }

  /* Deux commandes indépendantes voisines gardent leur écart ; .ep-vues et
     .ep-onglets sont des sélecteurs segmentés — un seul objet à plusieurs
     positions — et restent soudés, comme .tbl-groupe au lot 02. */
  .ep-outils, .ep-entete__outils { gap: 10px; }
}

/* --- Sous 720 px : la rangée de fiche passe en une colonne ----------------
   Seul objet rigide de la feuille : une colonne d'intitulé de 190 px, plus
   large encore que les 158 px du gabarit .mx-champ, qui bascule au même
   palier (modele-erp.css:714). À 390 px, mesuré, l'intitulé prenait 190 px
   et la valeur 150 : le libellé était plus large que la donnée qu'il annonce.

   L'intitulé repasse À GAUCHE en même temps qu'il monte au-dessus : sur une
   seule colonne, l'alignement à droite n'a plus de bord à suivre. C'est ce que
   font déjà .mx-champ et .fx-liste (fiche.css:1346). */
@media (max-width: 720px) {
  .ep-fiche__rangee { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .ep-fiche__libelle { text-align: left; }
}

/* --- Sous 560 px : les rembourrages rendent la place qu'ils prennent ------
   Ce palier ne corrige aucune casse : il rend de la largeur utile. À 390 px,
   les 18 px de gouttière d'une carte et les 16 px de chaque cellule de table
   coûtaient plus de place que la colonne qu'ils encadrent — et dans une table
   qui défile déjà, chaque pixel rendu est une colonne de plus sous les yeux
   avant le premier geste de défilement. Les valeurs rejoignent celles que
   modele-erp.css applique à son propre corps de page au même endroit. */
@media (max-width: 560px) {
  .ep-entete { padding: 10px 12px; }
  .ep-carte__bandeau,
  .ep-carte__titre,
  .ep-carte__pied { padding-left: 12px; padding-right: 12px; }
  .ep-table th,
  .ep-table td { padding-left: 10px; padding-right: 10px; }
  .ep-voile { padding: 12px; }
}