/* ════════════════════════════════════════════════════════════════════════════════ FICHE PERSONNEL — feuille de l'écran (/app/employes/fiche/{matricule}) ── MISE AU GABARIT (2026-09-10) ─────────────────────────────────────────────── La fiche a été livrée la veille (passation « Fiche personnel », 2026-09-09) avec sa propre grammaire : un bandeau, un rail, un volet, des cartes, des tables, des boutons, des pastilles, des états vides — 346 lignes qui REDESSINAIENT ce que le gabarit .mx-* portait déjà. C'est le même écart que la fiche terminal a corrigé le même jour : « deux grammaires cousues l'une à l'autre sur la même fiche ». Rien de ce que la fiche DIT n'a changé ; ce qui a changé est ce avec quoi elle le dit. Ce qui est PARTI d'ici, et où c'est allé : .fp-bandeau, .fp-identite, .fp-badge, .fp-initiales → .ecran-tete + .mx-obj .fp-cartes, .fp-carte-kpi, .fp-kpi-* → .mx-faits / .mx-fait .fp-rail, .fp-rail-*, .fp-volet, .fp-volet-tete → (.mx-fiche) .fp-groupe, .fp-def → + .fp-btn et ses cinq variantes → .mx-btn / -blanc / -cta / -danger .fp-tbl, .fp-defile, .ecart, .est-repos, .est-encours → .mx-tbl-cadre / .mx-tbl / .est-terne .fp-puce → .mx-pastille .fp-zones, .fp-zone → .mx-puces / .mx-puce .fp-indics, .fp-indic → .mx-ind-grille / .mx-ind .fp-liste → .mx-tbl (ce sont des collections) .fp-compte-rendu, .fp-invit → .mx-blocage .fp-vide → (.mx-etat-vide) .fp-note → .mx-note .fp-carte, .fp-carte-tete/-corps/-note → .mx-carte + .mx-carte-tete/-corps/-pied ── CE QUI RESTE, ET POURQUOI ────────────────────────────────────────────────── Sept choses seulement, toutes de GÉOMÉTRIE, aucune que le gabarit nomme : · la TRAME de la page — dossier à onglets d'un côté, panneau de côté de l'autre. Le gabarit dessine la fiche (.mx-fiche = rail + panneaux) mais pas ce qui se tient À CÔTÉ d'elle. L'ancienne fiche employé porte la même trame sous un autre nom (.fe-grille, fiche.css) : deux noms, deux familles, aucun partage — le jour où une troisième fiche en a besoin, c'est en section 11 du gabarit qu'elle monte, pas ici ; · la GOUTTIÈRE d'un bloc de volet (.fp-bloc). Les champs, les notes et les bandeaux encartés portent la leur (.mx-champ, .mx-note, .mx-blocage.est-encarte) ; une table, une grille d'indicateurs ou un état vide, non ; · la NAVIGATION de dossier — les deux chevrons, le rang et le retour à la liste, au coin droit de l'identité. Ce n'est ni une action ni un champ : c'est où l'on est et par où l'on repart, ce que le gabarit ne nomme pas ; · le LIEN d'invitation, en mono et coupable n'importe où ; · la PHOTO d'enrôlement et son repli sur les initiales ; · les POINTAGES RÉCENTS du panneau de côté ; · le pavé NON MODIFIABLE du même panneau, dont la grille de définitions ne peut pas être celle du formulaire dense : sa colonne de libellés fait 158 px, le panneau 330 px. Tout est en JETONS de la coquille (easytech-theme.css) : aucune valeur de couleur n'est écrite ici. ── LE PRÉFIXE EST « .fp- » ET NON « .fe- » ──────────────────────────────────── La maquette écrit .fe-*. Cette famille-là existe déjà : c'est celle de l'ANCIENNE fiche employé, dans fiche.css, qui reste servie sous /app/paie/employes/{id} et /app/rh/employes/{id}. Deux blocs homonymes ne font pas d'erreur : ils FUSIONNENT, propriété par propriété, dernier arrivé gagnant, et les deux écrans s'affichent à moitié faux sans que rien ne le signale (docs/conventions-nommage.md, « La même règle, côté CSS »). ════════════════════════════════════════════════════════════════════════════════ */ /* ── LA TRAME : LE DOSSIER, ET CE QUI SE TIENT À CÔTÉ ──────────────────────────── 330 px pour le côté, comme l'ancienne fiche : c'est la mesure d'une photo de portrait lisible plus ses gouttières. Le repli est plus bas, avec son motif. */ .fp-grille { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .fp-principal { min-width: 0; } .fp-cote { min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* 1100 px et non 1180 : c'est le palier de la scale retenue (docs/conventions-responsive.md), et c'est SURTOUT celui où le gabarit couche le rail d'onglets en rangée défilante (modele-erp.css §9). Les deux replis répondent au même fait — sous cette largeur, le rail, les panneaux et le côté se partageraient moins de 300 px chacun, et la colonne de libellés du formulaire dense en occupe déjà 158. Les séparer aurait donné une bande de 80 px où le rail est couché mais le côté encore à droite, c'est-à-dire le pire des deux. */ @media (max-width: 1100px) { .fp-grille { grid-template-columns: minmax(0, 1fr); } } /* ── LA PAGE OBJET DE CETTE FICHE ──────────────────────────────────────────────── TROIS CHOSES, TROIS ENDROITS, ET LA FRONTIÈRE EST DE SENS (2026-09-10). Le gabarit range tout dans une seule rangée : identité à gauche, barre d'outils à droite. Ici la barre portait sept contrôles et TROIS natures, que rien ne séparait : ce qui SITUE le dossier (le rang, ses chevrons, le retour à la liste), ce qui le QUALIFIE (les quatre faits saillants) et ce qui AGIT sur le salarié (l'inviter, le renvoyer aux terminaux, le dupliquer, prononcer sa sortie, corriger un volet). Les mêler coûtait cher : un bouton d'engagement à côté d'un chevron de navigation, une rangée qui ne tenait pas — l'aperçu a montré la colonne d'identité réduite à 110 px, le nom coupé caractère par caractère — et, une fois les actes sur leur propre rangée, la bande de faits repoussée d'un cran, décollée de l'identité qu'elle qualifie. Chaque nature a donc son endroit : · .fp-nav — AU COIN DROIT DE L'IDENTITÉ, sur la même ligne qu'elle. Rien de ce qui s'y trouve n'écrit quoi que ce soit : c'est où l'on est et par où l'on repart ; · .mx-faits — COLLÉE À L'IDENTITÉ, immédiatement dessous, sans rien entre les deux. C'est ce qu'on lit en arrivant ; · .fp-pied — EN PIED DU FORMULAIRE. Les actes, tous sur une ligne, « Modifier » compris. Voir son bloc plus bas. Rien de cela ne monte dans le gabarit : une fiche ordinaire porte deux ou trois actions, aucune navigation et pas de panneau de côté. C'est cette fiche qui est particulière. */ .fp-obj .mx-obj-rang { row-gap: 10px; } /* Le coin droit. « flex: none » parce qu'il ne se comprime pas : trois cibles dont deux carrées, il n'y a rien à y gagner. S'il ne tient plus, il passe à la ligne entier — c'est le repli du conteneur qui s'en charge. */ .fp-nav { flex: none; display: flex; align-items: center; gap: 8px; } /* ── LE PIED DU FORMULAIRE ─────────────────────────────────────────────────────── Les actes ne sont plus dans la bande d'identité : ils descendent SOUS la fiche, pour que la bande de faits saillants touche l'identité qu'elle qualifie. Une rangée de boutons entre les deux décollait ce qu'on lit en arrivant de ce qui le nomme. IL EST FIXE, PAS COLLANT. Il l'a été le temps d'un essai, au motif que la passation « Design 7 » avait fait remonter les actions vers l'en-tête parce qu'« il fallait traverser la fiche entière pour les atteindre ». Un pied qui suit le défilement répond à l'objection, mais il occupe une bande de la fenêtre en permanence et se pose par-dessus la dernière rangée du volet qu'on est en train de lire — sur le journal, celle qu'on cherche justement. Le pied reste donc au bas du formulaire : on y descend, ce qui est le geste normal quand on a fini de lire. Le fond, le filet et les gouttières sont ceux de .mx-modale-pied, à un détail près : le filet est en HAUT et les trois autres côtés continuent ceux de .mx-fiche, contre laquelle le pied est soudé — un pied qui flotterait à 8 px de la fiche se lirait comme un bloc de plus, pas comme son pied. */ .fp-pied { padding: 10px 14px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); border-top-color: var(--et-filet-fort); } /* À l'aplomb du bord droit, et repliable : à 560 px, cinq boutons ne tiennent sur aucune ligne, et une rangée qui déborde est pire que deux rangées. */ .fp-pied .mx-outils { justify-content: flex-end; } /* La gouttière d'un bloc de volet — table, grille d'indicateurs, état vide, rangée de puces. Elle vaut 18 px comme celle de .mx-champ et de .mx-note : dans un panneau, tout se lit sur la même verticale, sans quoi une table démarre 18 px à gauche du champ qui la précède. */ .fp-bloc { margin: 12px 18px 0; } /* Une colonne de CHIFFRES s'aligne à droite. Ce n'est pas .mx-tbl-mono, qui donne la chasse fixe et sert aussi aux matricules et aux heures d'arrivée : les aligner à droite déplacerait quatre écrans déjà servis par le gabarit (modèle de paie, rubriques, formules, cotisations). Scinder .mx-tbl-mono est un lot « technique/… », pas la queue d'un port d'écran. */ /* La tête PORTE LA MÊME CLASSE, et il lui faut sa propre règle : « .mx-tbl th » du gabarit aligne à gauche et pèse plus lourd que « .fp-num » seul. Sans cette seconde ligne, les intitulés restaient à gauche de colonnes dont les chiffres étaient à droite — l'écart ne se voit qu'à l'œil, sur une colonne étroite. */ .fp-num, .mx-tbl th.fp-num { text-align: right; } /* Les zones autorisées prennent la puce du gabarit (.mx-puce), qui est dessinée pour un CHOIX : elle porte donc un curseur de main. Ici elles ne se choisissent pas — la fiche ne saisit rien, on corrige les zones dans la fenêtre du volet. La puce reste la bonne forme, le curseur non. */ .fp-bloc.mx-puces .mx-puce { cursor: default; } /* ── LA NAVIGATION DE DOSSIER ──────────────────────────────────────────────────── Elle vit au coin droit de l'identité (.fp-nav ci-dessus) : la fiche s'ENCHAÎNE, et le volet ouvert est conservé d'un salarié au suivant. ELLE NE PORTE PLUS LE NOM DU DOSSIER OUVERT (2026-09-10). Une liste déroulante le répétait, à trois centimètres du titre qui le porte déjà — deux fois le même nom depuis que la page objet l'écrit en .mx-obj-nom, et le plus long contrôle de la bande. On atteint un autre dossier par les chevrons, ou par la liste du personnel, qui sait CHERCHER là où une liste déroulante de 148 lignes ne sait que dérouler. Le nom du voisin, lui, reste dans l'infobulle du chevron. */ .fp-pas-groupe { display: inline-flex; align-items: center; gap: 8px; } /* Un bouton d'ICÔNE CARRÉ à la hauteur de la barre d'outils d'en-tête. Le gabarit en nomme deux — .mx-btn-ico à 42 px (barre d'outils de LISTE) et .mx-btn-mini.mx-btn-ico à 24 px (fin de rangée d'une table) — et pas celui-ci : à 42 px les chevrons dépassent d'un tiers les .mx-btn de 32 px qui les entourent, et la barre se lit sur deux lignes. Seule la LARGEUR est écrite : la hauteur vient de .mx-btn, y compris son palier tactile. Sous 1024 px la largeur suit à la main — une cible à moitié conforme passe le contrôle de hauteur et se rate quand même au doigt (même remarque que .mx-taxe-retirer, modele-erp.css §11.x). */ .fp-pas { width: 32px; padding: 0; } @media (max-width: 1024px) { .fp-pas { width: 44px; } } /* Le rang « 3 / 148 » en mono : deux nombres qui changent à chaque dossier ne doivent pas faire bouger les chevrons qui les encadrent. */ .fp-rang { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── LE LIEN D'INVITATION ──────────────────────────────────────────────────────── Posé dans un .mx-blocage. Il est affiché UNE SEULE FOIS — seule son empreinte est gardée en base — d'où la mono, qui rend un jeton relisible caractère par caractère, et la coupure n'importe où, faute de quoi il déborde le bandeau. */ .fp-invit-lien { margin-top: 3px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); overflow-wrap: anywhere; } /* ── LE PANNEAU DE CÔTÉ ────────────────────────────────────────────────────────── La PHOTO garde sa mesure de portrait où qu'elle tombe : quand le panneau passe sous le dossier, il fait toute la largeur, et une photo étirée à 1 100 px n'est plus une photo d'identité. */ /* La gouttière est ici et non sur .mx-carte-corps : le corps d'une carte du gabarit ne pose PAS de gouttière latérale (padding: 14px 0), parce qu'il porte d'ordinaire des .mx-champ, qui ont la leur. Une photo, non. */ .fp-photo { margin: 0 14px; width: calc(100% - 28px); max-width: 200px; aspect-ratio: 3 / 4; overflow: hidden; display: grid; place-items: center; background: var(--et-surface-3); border: 1px solid var(--et-hairline); } .fp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Le repli sur les initiales : une photo absente est un fait de dossier, pas un trou. */ .fp-photo-vide { font-size: 34px; font-weight: 700; letter-spacing: .04em; color: var(--et-inerte); } /* LE DÉPÔT. Le champ de fichier natif est MASQUÉ et porté par le libellé, qui est un .mx-btn du gabarit : un « Parcourir… » du système au milieu d'une charte se voit, et il ne se met pas au gabarit — sa mise en forme appartient au navigateur. Le champ reste dans l'arbre, donc atteignable au clavier et lisible par un lecteur d'écran, et c'est le libellé qui lui donne son nom accessible. `display: none` le retirerait des deux. */ .fp-photo-actes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 14px 0; } .fp-photo-actes label { cursor: pointer; } .fp-photo-actes label.est-occupe { color: var(--et-inerte); cursor: default; } .fp-photo-actes input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Le libellé prend le focus du champ qu'il porte : sans cette règle, un parcours au clavier traverse le bouton sans rien allumer. */ .fp-photo-actes label:focus-within { outline: 2px solid var(--et-form-blue); outline-offset: 1px; } /* LE REFUS D'UNE PHOTO se lit dans la carte, au-dessus de la mention : c'est la carte qu'on regardait. Un pied de carte porte d'ordinaire une explication en gris ; celui-ci porte un motif à corriger, d'où l'encre de danger et le liseré. */ .fp-photo-refus { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); border-top-color: var(--et-danger-bord); border-left: 3px solid var(--et-danger); } /* Les pointages récents : une puce de sens, l'heure en mono. Entrée et sortie ne se distinguent que par elle — le libellé est à droite, où l'œil ne va qu'en cas de doute. */ .fp-pointage { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--et-rang); font-size: 12px; } .fp-pointage .pt { flex: none; width: 7px; height: 7px; border-radius: var(--et-r-pill); } .fp-pointage .pt.est-entree { background: var(--et-succes); } .fp-pointage .pt.est-sortie { background: var(--et-form-blue); } .fp-pointage .heure { font-family: var(--et-font-mono); font-weight: 600; color: var(--et-ink); } .fp-pointage .sens { margin-left: auto; color: var(--et-muted); } /* NON MODIFIABLE : libellés mono capitale, valeurs mono. Ce que personne ne saisit se lit d'une autre encre que ce qui se corrige. Ce n'est pas .mx-champ : la colonne de libellés du formulaire dense fait 158 px, le panneau 330. */ .fp-lu { margin: 0; padding: 10px 14px 12px; } .fp-lu > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 4px 0; } .fp-lu dt { font-family: var(--et-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--et-faint); text-wrap: pretty; } .fp-lu dd { margin: 0; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); white-space: nowrap; } /* La vignette de départ OUVRE le panneau : c'est le fait qui commande la lecture de tout le reste. Elle ne fait que TEINTER la .mx-carte du gabarit — elle ne la redessine pas. */ .fp-depart { border-color: var(--et-danger-bord); } .fp-depart .mx-carte-tete { background: var(--et-danger-badge-bg); border-bottom-color: var(--et-danger-bord); } .fp-depart .mx-carte-titre { color: var(--et-danger-ink); } .fp-depart .mx-carte-tete > i { color: var(--et-danger-ink); } /* ── LES PALIERS ───────────────────────────────────────────────────────────────── Échelle retenue : 560 / 640 / 720 / 1024 / 1100 et les deux jumeaux bornants (docs/conventions-responsive.md). Géométrie seulement — aucune couleur. Sous 1024 px, la RÈGLE TACTILE : aucune cible interactive sous 44 × 44 px, et une cible ne rétrécit jamais (docs/cibles-tactiles.md, lot 02). La famille .mx-* porte la sienne dans le gabarit ; les trois contrôles de navigation sont à nous. */ /* La gouttière d'un bloc suit celle que le gabarit donne aux champs sous 720 px (14 px), puis celle qu'il ne descend plus en dessous. */ @media (max-width: 720px) { .fp-bloc { margin-left: 14px; margin-right: 14px; } }