/* ===========================================================================
ÉCRAN PRÊTS & REMBOURSEMENTS (.prt-*)
Components/Pages/Paie/Prets.razor.
SA PROPRE FEUILLE, ET NON LA QUEUE DE easypaie.css. C'est la 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. Les classes ci-dessous ne servent QUE lui ;
tout le reste de l'écran — barre d'outils, cartes, tables, pastilles,
indicateurs, modales, champs — vient de css/easypaie.css sans être redéfini.
AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. LA BARRE D'OUTILS — deux filtres et deux actions sur une rangée.
`.ep-outils` est une rangée souple ; ce qu'elle ne peut pas deviner, c'est la
largeur de ces deux listes-ci. « Statut » porte cinq mots courts, « Salarié »
porte des noms complets : leur donner la même largeur tronquerait les seconds
ou étirerait le premier sur un tiers de l'écran.
--------------------------------------------------------------------------- */
.prt-outils { margin-bottom: 12px; }
.prt-filtre { width: auto; min-width: 150px; }
.prt-filtre--large { min-width: 240px; }
/* La barre reprise DANS une modale ne porte pas de fond : elle y serait une
boîte dans la boîte. Elle ne garde que la rangée et son filet inférieur. */
.prt-outils-modale {
margin-bottom: 12px; padding: 0 0 10px;
background: transparent; border: 0;
border-bottom: 1px solid var(--et-hairline);
}
/* ---------------------------------------------------------------------------
2. LA LISTE.
--------------------------------------------------------------------------- */
/* LA TABLE DÉFILE DANS SA CARTE, PAS DANS LA PAGE. Neuf colonnes dont cinq de
montants dépassent 960 px : sans ce conteneur, c'est le corps de la page qui
partait vers la droite, emportant la coquille et le rail avec lui
(docs/conventions-responsive.md — « le corps de page ne défile jamais
horizontalement »). Le pied de carte, lui, garde la largeur de la carte : la
mention de méthode reste lisible pendant qu'on fait glisser la table. */
.prt-liste { margin-bottom: 0; overflow-x: auto; }
/* Chargement, liste vide, période sans retenue : un seul registre pour les
trois. Posé aussi sur un
, d'où le `text-align` explicite. */
.prt-etat {
padding: 28px 16px; text-align: center;
font-size: 13px; color: var(--et-muted);
}
/* L'INTITULÉ D'UNE LIGNE DE TOTAL est aligné à droite comme les nombres qu'il
coiffe, mais il n'en est PAS un : lui donner `.ep-num` mettrait « Capital
restant dû (7 prêt(s)) » en chasse fixe, au milieu d'un écran où la chasse
fixe signifie « ceci est une valeur ». */
.prt-total-lbl { text-align: right; }
/* Une RÉFÉRENCE est un identifiant : chasse fixe, pour que deux références
posées l'une sous l'autre se comparent d'un coup d'œil. */
.prt-ref { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }
/* Le matricule accompagne le nom sans lui disputer la ligne. */
.prt-matricule { margin-left: 6px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
/* COLONNE D'ACTIONS : jamais de retour à la ligne. Cinq boutons de 32 px y
tiennent parce qu'ils sont carrés et sans libellé ; sans `nowrap`, le
cinquième passe à la ligne et double la hauteur de la rangée. */
.prt-actions { white-space: nowrap; text-align: right; }
.prt-actions .ep-btn { width: 30px; padding: 0; justify-content: center; }
.prt-actions .ep-btn + .ep-btn { margin-left: 4px; }
/* ---------------------------------------------------------------------------
3. LES MODALES.
620 px est la largeur d'un formulaire d'une colonne. Trois de ces quatre
modales portent une TABLE de six ou sept colonnes de montants, que 620 px
feraient défiler horizontalement — et un échéancier qu'on lit de biais ne
sert à rien. La quatrième, « Reprendre », garde la largeur du module : deux
listes déroulantes n'ont rien à y gagner.
--------------------------------------------------------------------------- */
.prt-modale-large { max-width: 880px; }
/* Le bandeau d'erreur retrouve sa gouttière basse dans le corps de modale, où
`.ep-bandeau` n'en porte pas. */
.prt-bandeau { margin-bottom: 12px; }
/* ---------------------------------------------------------------------------
4. L'ÉCHÉANCIER — le bloc qu'on lit avant d'engager.
IL DÉFILE, ET C'EST DÉLIBÉRÉ. Un prêt sur trente-six mois donne trente-six
rangées : les laisser pousser la modale ferait sortir le bouton « Octroyer »
de l'écran, et c'est précisément le geste qu'on vient faire. La hauteur est
bornée, l'en-tête de table reste en vue, le pied de modale ne bouge plus.
--------------------------------------------------------------------------- */
.prt-simulation { margin-top: 14px; }
.prt-defile { max-height: 210px; overflow-y: auto; border-top: 1px solid var(--et-hairline); }
.prt-defile--haut { max-height: 340px; border-top: 0; }
/* L'en-tête reste visible pendant le défilement : sans lui, passé la dixième
rangée on ne sait plus quelle colonne porte le capital et laquelle l'intérêt.
`background` explicite — une tête translucide laisserait voir les rangées
glisser dessous. */
.prt-defile .ep-table thead th {
position: sticky; top: 0; z-index: 1;
background: var(--et-table-head);
}
/* Trois chiffres côte à côte, pas une grille de tuiles : ils se lisent ensemble
(« mensualité, intérêts, total ») et se répartissent la largeur à parts égales. */
.prt-indicateurs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Le motif est une phrase, pas un mot : il prend la largeur entière de la
grille au lieu d'une des colonnes de 280 px. */
.prt-champ-large { grid-column: 1 / -1; }
/* ---------------------------------------------------------------------------
5. PALIERS — docs/conventions-responsive.md.
Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue.
--------------------------------------------------------------------------- */
/* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible
interactive ne descend sous 44 px, et une cible ne rétrécit jamais. La
colonne d'actions est propre à cet écran, donc à sa charge. */
@media (max-width: 1024px) {
.prt-actions .ep-btn { width: 44px; height: 44px; }
.prt-outils .ep-btn { min-height: 44px; }
.prt-filtre { min-height: 44px; }
}
/* Sous 720 px les deux filtres prennent la rangée entière plutôt que de se
comprimer sous leur minimum, et les trois indicateurs se mettent en colonne :
à cette largeur, trois montants côte à côte se coupent au milieu. */
@media (max-width: 720px) {
.prt-filtre, .prt-filtre--large { width: 100%; min-width: 0; }
.prt-indicateurs { grid-template-columns: 1fr; }
}