/* ===========================================================================
   ÉCRAN BULLETIN DE PAIE (.blt-*)
   Components/Pages/Paie/Bulletin.razor — PAY-05.

   SA PROPRE FEUILLE, ET NON LA QUEUE DE easypaie.css. Règle du dépôt : un
   écran, un fichier, un <link> dans App.razor après la feuille de module dont
   il emprunte les composants.

   DEUX FAMILLES ICI, ET C'EST VOULU :
     · `.blt-*`      — le MOBILIER d'écran (filtres, liste, détail, modale).
                       Il ne fait qu'ajuster ce que `.ep-*` ne peut pas deviner.
     · `.blt-doc-*`  — le BULLETIN lui-même, qui est un DOCUMENT et non un
                       écran. Voir la section 4.

   AUCUNE COULEUR LITTÉRALE dans le mobilier : tout vient des jetons. Le
   document, lui, en porte — et la section 4 dit pourquoi.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LA BARRE D'OUTILS — période, salarié, deux actions.
   --------------------------------------------------------------------------- */
.blt-outils { margin-bottom: 12px; }
.blt-filtre { width: auto; min-width: 120px; }
.blt-filtre--large { min-width: 260px; }

/* ---------------------------------------------------------------------------
   2. LA LISTE DE LA PÉRIODE.
   --------------------------------------------------------------------------- */
.blt-liste { margin-bottom: 14px; overflow-x: auto; }
.blt-detail { margin-bottom: 14px; }
.blt-bandeau { margin-bottom: 12px; }

/* Le bouton « Envoyer tous » vit dans le bandeau de carte, qui aligne ses
   enfants sur la ligne de base : un bouton de 32 px y descendrait de deux
   pixels sous l'intitulé. */
.blt-liste .ep-carte__bandeau .ep-btn { align-self: center; margin-left: auto; }

.blt-etat { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--et-muted); }
.blt-matricule { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }
.blt-natures { font-size: 12px; color: var(--et-muted); }

/* Colonne d'actions : jamais de retour à la ligne. Le premier bouton porte un
   libellé (« Voir »), les autres non — c'est le geste courant, et le nommer
   évite d'avoir à deviner quatre icônes de suite. */
.blt-actions { white-space: nowrap; text-align: right; }
.blt-actions .ep-btn + .ep-btn { margin-left: 4px; }
.blt-actions .ep-btn:not(:first-child) { width: 30px; padding: 0; justify-content: center; }

/* La rangée d'actions du bulletin affiché. */
.blt-barre { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------------------------------------------------------------------------
   3. L'AIGUILLAGE DE RECALCUL — deux options de même poids.

   Ce n'est pas une confirmation : les deux branches sont légitimes et donnent
   des nets DIFFÉRENTS. Deux boutons de même poids, chacun avec sa conséquence
   écrite dessous ; aucun bouton d'engagement, qui désignerait « le bon ».
   --------------------------------------------------------------------------- */
.blt-choix { display: flex; flex-direction: column; gap: 10px; }
.blt-choix-opt {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 14px; text-align: left;
    border: 1px solid var(--et-form-border); background: var(--et-surface);
    color: var(--et-ink); font-family: inherit; font-size: 13px; cursor: pointer;
}
.blt-choix-opt:hover { border-color: var(--et-form-blue); background: var(--et-tint); }
.blt-choix-opt:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }
.blt-choix-opt > i { flex: none; margin-top: 2px; font-size: 15px; color: var(--et-form-blue-encre); }
.blt-choix-opt strong { display: block; font-size: 14px; }
.blt-choix-opt em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   4. LE BULLETIN — UN DOCUMENT, PAS UN ÉCRAN.

   POURQUOI IL N'EMPLOIE PAS `.ep-table`. La table du module porte une tête en
   ardoise pleine (#354A5F), texte clair. À l'écran elle ancre une liste de
   douze colonnes ; sur du papier elle sort en aplat sombre au milieu d'une
   pièce que le salarié garde — et qu'une imprimante de bureau rend en gris
   sale après avoir vidé son toner. Un bulletin se photocopie, se faxe encore
   dans certaines administrations, et doit rester lisible après tout cela.

   LES COULEURS Y SONT LITTÉRALES, contrairement au reste du dépôt, et c'est la
   même raison : le papier n'a pas de thème sombre. Jetonner ces valeurs ferait
   sortir un document en blanc sur ardoise chez qui a basculé son interface.
   C'est la règle que `.ep-*` applique déjà à son propre bloc d'impression
   (« blanc et noir EN DUR, et il faut qu'ils le restent »).
   --------------------------------------------------------------------------- */
.blt-doc {
    max-width: 800px; padding: 26px 28px;
    background: #fff; border: 1px solid #d0d4d9; color: #16181b;
    font-size: 13px;
}

.blt-doc-tete {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid #16181b;
}
.blt-doc-titre { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.blt-doc-nom   { font-weight: 700; }
.blt-doc-ident { text-align: right; }
.blt-doc-note { font-size: 12px; color: #5a6068; }

.blt-doc-table { width: 100%; border-collapse: collapse; }

/* La tête est un FILET, pas un aplat : elle sépare sans consommer d'encre. */
.blt-doc-table th {
    padding: 5px 8px; text-align: left;
    border-bottom: 1.5px solid #16181b;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: #5a6068;
}
.blt-doc-table td { padding: 5px 8px; border-bottom: 1px solid #e8eaed; }
.blt-doc-table tbody tr:last-child td { border-bottom: 0; }

/* LE MONTANT EST UN NOMBRE — chasse fixe et chiffres tabulaires, pour que les
   quatre colonnes se comparent au caractère près. C'est la même règle que dans
   le mobilier ; ici elle compte davantage, puisque le document se relit à
   froid, des mois plus tard. */
.blt-doc-num { text-align: right; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blt-doc-mono { font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; }

/* Le brut est un PALIER : il ferme les gains et ouvre les retenues. */
.blt-doc-sous-total td { font-weight: 700; border-top: 1px solid #16181b; border-bottom-color: #16181b; }

/* Les lignes « dont … » ne s'ajoutent à rien : elles décomposent la ligne du
   dessus. Le retrait et la nuance le disent sans qu'on ait à l'écrire. */
.blt-doc-dont td { padding-top: 2px; padding-bottom: 2px; font-size: 12px; color: #5a6068; }
.blt-doc-dont td:first-child { padding-left: 22px; }

.blt-doc-taux { font-size: 12px; color: #5a6068; }

.blt-doc-pied {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
    margin-top: 14px; padding-top: 12px; border-top: 1.5px solid #16181b;
}
.blt-doc-recap { font-size: 12px; line-height: 1.7; color: #5a6068; }

/* Une ligne SUBORDONNÉE du récapitulatif : « dont … ». Indentée comme les « dont »
   du corps du bulletin, mais celles-là sont des <tr> et la règle ci-dessus ne vise
   que des <td> — d'où une classe propre plutôt qu'une réutilisation qui ne prendrait
   pas. */
.blt-doc-sous { padding-left: 14px; font-size: 12px; }

/* LE NET À PAYER est la seule chose que presque tout le monde lit. Il est
   dimensionné pour être trouvé sans chercher. */
.blt-doc-net { text-align: right; }
.blt-doc-net-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #5a6068; }
.blt-doc-net-val {
    margin-top: 2px; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
    font-size: 24px; font-weight: 700;
}

.blt-doc-mention { margin-top: 18px; font-size: 12px; line-height: 1.5; color: #7a8089; }

/* ---------------------------------------------------------------------------
   5. IMPRESSION — le bloc qui vivait dans un <style> de la page.

   IL REPOSE SUR `visibility` ET NON SUR `display`, et c'est la seule mécanique
   qui marche ici : le bulletin est enfoui sous la coquille, la carte et le
   corps de page. Masquer ses ANCÊTRES en display:none l'emporterait avec eux ;
   `visibility` se surcharge en descendant, si bien qu'un enfant peut redevenir
   visible sous un parent masqué. Le `position: absolute` le décolle ensuite de
   la place que ses ancêtres invisibles occupent encore.

   Ne remplacez pas ces trois règles par un display:none sur le mobilier : ça
   marcherait tant qu'on n'aurait rien oublié, et la première carte ajoutée
   sans `no-print` reviendrait sur le papier.

   *** MAIS `body *` EST DÉLIMITÉ, PARCE QUE CETTE FEUILLE EST GLOBALE ***
   App.razor lie les 170 feuilles dans le <head>, sans condition de route : une
   feuille d'écran est CHARGÉE PARTOUT, et seuls ses sélecteurs la cantonnent à
   son écran. `body *` n'en cantonne aucun. Écrit nu, il masquait le corps du
   document sur les 633 routes, et seul `#zone-bulletin` — qui n'existe que
   ici — reprenait sa visibilité : les 16 autres écrans porteurs d'un bouton
   « Imprimer » sortaient une FEUILLE BLANCHE, l'aperçu des documents de vente
   compris. Mesuré au rendu, pas déduit : `visibility` calculée `hidden` sur
   `.dev-piece` sous @media print, avec les 170 feuilles dans l'ordre réel.

   `body:where(:has(#zone-bulletin))` le rend au seul écran qui porte le
   bulletin. Le `:has()` est ici le bon outil et non un raccourci : la règle doit
   s'appliquer à `body` d'après ce qu'il CONTIENT, ce qu'aucune classe posée par
   ce composant ne peut dire — et sa dégradation va dans le bon sens, un
   navigateur qui l'ignore imprimant le mobilier du bulletin avec le bulletin,
   ce qui est strictement mieux qu'une page blanche partout.

   *** ET LE `:where()` N'EST PAS DÉCORATIF ***
   `:has()` AJOUTE LA SPÉCIFICITÉ DE SON ARGUMENT. Écrit `body:has(#zone-bulletin) *`,
   le masquage pesait (1,0,1) et passait DEVANT le `#zone-bulletin` (1,0,0) de la
   ligne suivante, qui rend la visibilité : les deux portant `!important`, c'est la
   spécificité qui tranche, et le bulletin lui-même sortait blanc. Premier essai de
   ce lot, attrapé au harnais de rendu. `:where()` ne compte pour rien : le
   sélecteur repèse (0,0,1), exactement comme le `body *` d'origine, donc la
   cascade des trois règles est celle d'avant — seule la PORTÉE change.

   *** ET LE @page EST PARTI D'ICI ***
   Une règle @page vaut pour le DOCUMENT : aucun sélecteur ne la délimite, donc
   il n'y a pas de version « bien écrite » de @page dans une feuille d'écran.
   C'est ce que ecran-kilometre.css §756 refuse explicitement de faire, en
   nommant cette feuille-ci. Le format A4 du bulletin est désormais posé par
   l'écran, à l'entrée, avec `etImpression` — le mécanisme de l'organigramme et
   de l'aperçu de vente. Les écrans d'étiquettes, eux, n'héritent plus d'une
   marge de 12 mm qu'une planche d'étiquettes ne supporte pas.
   --------------------------------------------------------------------------- */
@media print {
    body:where(:has(#zone-bulletin)) * { visibility: hidden !important; }
    #zone-bulletin, #zone-bulletin * { visibility: visible !important; }
    #zone-bulletin { position: absolute; left: 0; top: 0; width: 100%; }
    .no-print { display: none !important; }

    /* Le cadre et le rembourrage sont ceux de l'APERÇU à l'écran ; sur le
       papier, c'est la marge de page qui les fournit. */
    .blt-doc { max-width: none; padding: 0; border: 0; }
}

/* ---------------------------------------------------------------------------
   6. PALIERS — docs/conventions-responsive.md.
   --------------------------------------------------------------------------- */

/* Règle tactile (lot 02) : sous 1024 px, aucune cible sous 44 px. */
@media (max-width: 1024px) {
    .blt-actions .ep-btn:not(:first-child) { width: 44px; height: 44px; }
    .blt-outils .ep-btn, .blt-barre .ep-btn { min-height: 44px; }
    .blt-filtre { min-height: 44px; }
    .blt-choix-opt { min-height: 44px; }
}

@media (max-width: 720px) {
    .blt-filtre, .blt-filtre--large { width: 100%; min-width: 0; }
    .blt-doc { padding: 18px 16px; }
    .blt-doc-tete, .blt-doc-pied { flex-direction: column; align-items: flex-start; }
    .blt-doc-ident, .blt-doc-net { text-align: left; }
}

/* LE CODE CONVIVIAL DE LA LIGNE — quatre chiffres, devant la désignation.
   Pas une colonne de plus : le document tient déjà quatre colonnes de chiffres,
   et une cinquième les resserrerait toutes pour un repère qui se lit très bien
   en tête de libellé. Chasse fixe et chiffres tabulaires pour que la colonne
   des numéros s'aligne d'elle-même, encre atténuée pour qu'elle ne dispute pas
   la désignation — mêmes valeurs que .blt-doc-taux, qui joue le même rôle. */
.blt-doc-code {
    font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
    font-size: 12px; color: #5a6068; margin-right: 8px;
}