/* =====================================================================
   ÉCRAN — PORTAIL SALARIÉ (espace salarié, rôle Employee)

   Préfixe .psl-* (portail salarié). Six écrans la partagent — Accueil,
   Pointer, Mes rapports, Mon planning, Mes congés, Mes demandes —, et
   aucun écran hors du portail : c'est donc la feuille du portail, comme
   ecran-portail-client.css l'est du portail client. Maquettes :
   docs/modeles/design_handoff_portail_salarie (2026-09-29), bancs
   tools/banc-ecran/ecrans/portail-*.

   CE QUI N'EST PAS ICI, parce que le gabarit le porte déjà : la tête
   d'écran (.ecran-tete, easytime-shell.css), la carte (.mx-carte), le
   formulaire et la modale (.mx-champ, .mx-modale-*), le bouton
   d'engagement (.mx-btn-cta), les pastilles (.mx-pastille), la liste
   (Tableau → .tbl-*) et la vignette d'indicateur (.psl-fait, déclarée
   avec les autres dans easycompta-vignette.css).

   AUCUNE COULEUR EN DUR : tout passe par var(--et-*).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LE SÉLECTEUR DE MOIS — précédent · mois · suivant.

   Il remplace deux btn-sm de 31 px : sous 1024 px, c'était deux cibles
   sous les 44 px de docs/cibles-tactiles.md, sur les deux écrans que le
   salarié ouvre le plus depuis son téléphone. 44 px partout : le
   sélecteur est le seul outil de ces écrans, il n'a pas de voisin à
   ménager.
   --------------------------------------------------------------------- */
.psl-mois {
    display: inline-flex; align-items: stretch;
    background: var(--et-surface);
    border: 1px solid var(--et-bord-champ);
}
.psl-mois > button {
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--et-ink);
    cursor: pointer;
}
.psl-mois > button:first-child { border-right: 1px solid var(--et-hairline); }
.psl-mois > button:last-child  { border-left: 1px solid var(--et-hairline); }
.psl-mois > button:hover:enabled { background: var(--et-survol); }
.psl-mois > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.psl-mois > button:disabled { color: var(--et-inerte); cursor: default; }
.psl-mois-lib {
    min-width: 150px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--et-ink);
    text-transform: capitalize;
}

/* LA VIGNETTE SANS RÔLE lit son libellé au rang d'encre du bleu (--et-lien), pas
   dans la teinte du bord : --et-form-blue en encre tombe à 2,53:1 en sombre (relevé
   au banc, portail-accueil). Une vignette qui pose son rôle pose aussi son encre, en
   ligne — ce qui l'emporte sur cette valeur par défaut. */
.appgrid .psl-fait { --vig-encre: var(--et-lien); }

/* L'engagement de la tête d'écran garde les 44 px du sélecteur de mois qu'il
   côtoie : deux commandes de la même barre, deux hauteurs, se lisent comme
   une erreur. */
.psl-tete-cta { height: 44px; padding: 0 16px; }

/* ---------------------------------------------------------------------
   2. L'ACCUEIL — deux cartes côte à côte, puis les coordonnées.
   --------------------------------------------------------------------- */
.psl-deux {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.psl-deux > .mx-carte { min-width: 0; }

/* Une rangée de la carte « Derniers pointages » : le sens, le jour, l'heure. */
.psl-rang {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 14px;
    border-top: 1px solid var(--et-hairline);
    font-size: 13px; color: var(--et-ink);
}
.psl-rang:first-child { border-top: 0; }
.psl-rang > .mx-pastille { min-width: 64px; justify-content: center; }
.psl-rang-jour { flex: 1 1 auto; min-width: 0; }
.psl-rang-heure { font-family: var(--et-font-mono); }

/* Un accès rapide : une rangée entière est le lien (44 px au moins, sur
   tous les formats — c'est la porte vers l'écran, pas une décoration). */
.psl-acces {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 6px 14px;
    border-top: 1px solid var(--et-hairline);
    color: var(--et-ink); text-decoration: none;
}
.psl-acces:first-child { border-top: 0; }
.psl-acces:hover { background: var(--et-survol); color: var(--et-ink); }
.psl-acces:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.psl-acces-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.psl-acces-titre { font-size: 14px; font-weight: 600; }
.psl-acces-sous { font-size: 12px; color: var(--et-muted); }
.psl-acces > .bi { color: var(--et-form-blue-encre); }

/* La carte se ferme par un lien vers l'écran complet. */
.psl-carte-lien {
    display: flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-top: 1px solid var(--et-hairline);
    font-size: 13px; font-weight: 600; text-decoration: none;
}

/* Les coordonnées : la grille dense du gabarit (.mx-champ), dans une carte. Le
   bouton « Modifier mes coordonnées » ferme le bandeau de la carte à droite ; il
   est blanc — l'orange de l'accueil est « Pointer », celui de la fenêtre est
   « Enregistrer ». */
.psl-coord { padding: 4px 14px 10px; }
.psl-carte-action { margin-left: auto; }
/* Le bandeau passe à la ligne plutôt que de laisser le bouton sortir de la carte
   (390 px : « Coordonnées » + « Modifier mes coordonnées » ne tiennent pas côte à côte). */
.mx-carte-tete:has(> .psl-carte-action) { flex-wrap: wrap; row-gap: 8px; }
.psl-carte-blocage { margin: 10px 14px 0; }

/* La photo, en tête des coordonnées (2026-10-01) : celle des pointeuses, et l'état de
   celle que le salarié a proposée. Dans la fenêtre, l'aperçu et le bouton qui la choisit ;
   le champ natif est masqué sous le bouton, comme pour un justificatif d'absence. */
.psl-photo { display: flex; align-items: center; gap: 14px; padding: 12px 14px 4px; }
.psl-photo-img {
    flex: none; width: 72px; height: 72px; object-fit: cover;
    border: 1px solid var(--et-hairline); background: var(--et-surface-2);
}
.psl-photo-img.est-initiales {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; color: var(--et-muted);
}
.psl-photo-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--et-muted); }
.psl-photo-txt > strong { font-size: 14px; color: var(--et-ink); }
.psl-photo-choix { display: flex; align-items: flex-start; gap: 14px; }
.psl-photo-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.psl-photo-btn { position: relative; margin: 0; cursor: pointer; }
.psl-photo-btn.est-inerte { cursor: not-allowed; }
.psl-photo-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.psl-photo-btn:has(.psl-photo-input:focus-visible) { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.psl-photo-note { flex: 1 1 100%; font-size: 12px; color: var(--et-muted); }

/* ---------------------------------------------------------------------
   3. POINTER — l'horloge, l'état, le bouton.
   --------------------------------------------------------------------- */
.psl-pointer {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 40px 20px; text-align: center;
}
.psl-pointer-date { font-size: 14px; color: var(--et-muted); text-transform: capitalize; }
.psl-pointer-heure {
    font-family: var(--et-font-mono); font-size: 56px; font-weight: 600; line-height: 1;
    color: var(--et-ink);
}
.psl-pointer-etat { font-size: 14px; color: var(--et-ink); }
.psl-pointer-cta { height: 52px; min-width: 260px; padding: 0 22px; font-size: 16px; }
.psl-pointer .mx-blocage { margin: 0; text-align: left; }

/* La géolocalisation : une note de réglage, pas une glose — elle dit ce que
   le geste enregistre, et que le navigateur va demander une permission. */
.psl-note {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 12px; padding: 10px 14px;
    background: var(--et-info-bg); border: 1px solid var(--et-hairline);
    font-size: 13px; line-height: 1.5; color: var(--et-ink);
}
.psl-note > .bi { color: var(--et-form-blue-encre); margin-top: 1px; }
/* L'effet paie d'une demande à décider (2026-10-07) : un avertissement, à l'encre de son rang. */
.psl-effet-paie { font-weight: 600; color: var(--et-avertissement-ink); }

/* ---------------------------------------------------------------------
   3 bis. PRÉSENCE DE L'ÉQUIPE — le jour affiché, et la fenêtre « Lieu ».
   --------------------------------------------------------------------- */
.psl-jour { margin: 0; }
.psl-jour > .mx-input { height: 44px; width: 180px; }

/* Les pointages web d'un salarié : une rangée par pointage, jamais un tableau —
   six colonnes dans une fenêtre de 880 px se coupaient en largeur sur téléphone. */
.psl-geo { list-style: none; margin: 0; padding: 0; }
.psl-geo-rang {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    min-height: 52px; padding: 8px 0;
    border-top: 1px solid var(--et-hairline);
}
.psl-geo-rang:first-child { border-top: 0; }
.psl-geo-heure { font-family: var(--et-font-mono); font-size: 14px; font-weight: 600; min-width: 48px; }
.psl-geo-lieu { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; font-size: 13px; overflow-wrap: anywhere; }
.psl-geo-detail { font-size: 12px; color: var(--et-muted); }
.psl-geo-carte { flex: none; }

/* ---------------------------------------------------------------------
   4. LES DOCUMENTS DU PORTAIL — autorisation d'absence et bulletin : une
   feuille, à l'écran comme au papier.

   À l'écran, la feuille est posée sur le fond de page (largeur d'un A4
   lisible, 760 px) ; au papier, elle EST la page : la coquille part déjà
   (@media print d'easytime-shell.css), la tête d'écran part ici
   (.psl-hors-papier). Couleurs par jetons ; au papier le thème sombre
   retombe sur les valeurs claires (même bloc d'easytime-shell.css).
   --------------------------------------------------------------------- */
.psl-doc {
    max-width: 760px; margin: 0 auto 24px;
    padding: 36px 40px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    color: var(--et-ink);
    font-size: 14px; line-height: 1.5;
}
.psl-doc.est-invalide { border-color: var(--et-danger); }

@media print {
    .psl-hors-papier { display: none !important; }
    .psl-doc { max-width: none; margin: 0; padding: 0; border: 0; }
}

/* ---------------------------------------------------------------------
   4 ter. LA FEUILLE — design system « Autorisation d'Absence/Congé »
   (claude.ai, 2026-10-02), le même que le PDF (AutorisationAbsencePdf),
   étendu au bulletin de paie (même en-tête, bandeau, détails, pied).
   La feuille reste .psl-doc (cadre, impression) ; son contenu est .psl-feuille-*.

   Les valeurs du design passent par les jetons de la charte, jamais en dur :
   paper → --et-surface, surface-subtle → --et-surface-2, border →
   --et-filet-fort, ink → --et-ink, ink-muted → --et-muted, brand →
   --et-form-blue-d, brand-tint → --et-tint, accent → --et-action (le filet
   de l'en-tête, rien d'autre), vert → --et-succes-{bg,bord,ink}.
   Coins carrés, comme partout dans la charte (pastilles d'état exceptées) :
   le design arrondissait Période, Signature et le code, l'écran ne le fait
   pas (décision du 2026-10-02). Des filets, jamais d'ombres.
   --------------------------------------------------------------------- */
.psl-feuille {
    font-variant-ligatures: none;           /* « Motif » et « vérification » restent copiables */
    font-variant-numeric: tabular-nums;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* les aplats sortent au papier */
}
.psl-feuille > * + * { margin-top: 24px; }
.psl-feuille > .psl-feuille-titre { margin-top: 32px; }
.psl-feuille-libelle {
    display: block;
    font-size: 12px; line-height: 16px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--et-muted);
}
.psl-feuille-entete {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    padding-bottom: 16px; border-bottom: 2px solid var(--et-action);
}
.psl-feuille-societe { font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.psl-feuille-coordonnees { font-size: 12px; line-height: 16px; color: var(--et-muted); }
.psl-feuille-societe + .psl-feuille-coordonnees { margin-top: 4px; }
.psl-feuille-reference { text-align: right; white-space: nowrap; }
.psl-feuille-numero { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 700; }

.psl-feuille-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.psl-feuille-etiquette {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 24px; padding: 0 10px;
    border: 1px solid var(--et-filet-fort); border-radius: 999px;
    background: var(--et-surface-2); color: var(--et-muted);
    font-size: 12px; line-height: 16px; font-weight: 700;
}
.psl-feuille-etiquette.est-info { background: var(--et-tint); border-color: var(--et-tint); color: var(--et-form-blue-d); }
.psl-feuille-etiquette.est-succes { background: var(--et-succes-bg); border-color: var(--et-succes-bord); color: var(--et-succes-ink); }
.psl-feuille-etiquette.est-succes::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--et-succes-ink);
}
.psl-feuille-h {
    margin: 12px 0 0;
    font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.01em;
    color: var(--et-form-blue-d);
}
.psl-feuille-phrase { margin: 12px 0 0; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }

.psl-feuille-periode {
    display: grid; grid-template-columns: 1fr 1fr auto 1fr;
    padding: 16px 8px;
    background: var(--et-surface-2);
}
.psl-feuille-cellule { padding: 0 16px; min-width: 0; }
.psl-feuille-cellule + .psl-feuille-cellule { border-left: 1px solid var(--et-filet-fort); }
.psl-feuille-valeur { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 700; white-space: nowrap; }  /* une date ne se coupe pas */
/* Une valeur en mots (le profil du jour de « Mon planning ») passe à la ligne : à 390 px,
   « Journée 8 h – 17 h » sortait de sa cellule du bandeau 2×2 (relevé sur capture). */
.psl-feuille-valeur.est-texte { white-space: normal; overflow-wrap: anywhere; }
.psl-feuille-note { font-size: 12px; line-height: 16px; color: var(--et-muted); }

.psl-feuille-details { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; }
/* Le congé annuel porte neuf cases (lot 1 de la demande de congés, 2026-10-03) : trois
   colonnes, comme le PDF, pour que la feuille imprimée garde ses visas sur la première page. */
.psl-feuille-details.est-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.psl-feuille-ligne { padding: 12px 0; border-bottom: 1px solid var(--et-filet-fort); min-width: 0; }
.psl-feuille-ligne.est-large { grid-column: 1 / -1; }
.psl-feuille-ligne > dt {
    font-size: 12px; line-height: 16px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--et-muted);
}
.psl-feuille-ligne > dd { margin: 4px 0 0; overflow-wrap: anywhere; }

.psl-feuille-signature {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 16px 24px;
    background: var(--et-surface-2); border: 1px solid var(--et-filet-fort);
}
.psl-feuille-signature.est-signee { background: var(--et-succes-bg); border-color: var(--et-succes-bord); }
/* Sur l'aplat vert, --et-muted tombe à 4,40:1 en sombre (mesuré au banc) : les libellés du
   bloc prennent l'encre, les capitales suffisent à les distinguer de la valeur. */
.psl-feuille-signature.est-signee .psl-feuille-libelle { color: var(--et-ink); }
.psl-feuille-signataire { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 700; }
.psl-feuille-verification { text-align: right; }
.psl-feuille-code {
    display: inline-block; margin-top: 4px;
    padding: 8px calc(12px - .12em) 8px 12px;   /* l'interlettrage ajoute un blanc après le dernier caractère */
    background: var(--et-surface); border: 1px solid var(--et-succes-bord);
    font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: .12em;
    white-space: nowrap;   /* un code dicté ne se coupe pas */
}

/* Les visas : un cadre en pointillé par signataire, où l'on signe et appose le cachet.
   Le pointillé est en --et-muted et non en filet : il doit sortir à l'impression. */
.psl-feuille-visas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.psl-feuille-visa { min-width: 0; }
.psl-feuille-visa-zone {
    margin-top: 8px; min-height: 112px; padding: 12px;
    border: 1px dashed var(--et-muted);
    font-size: 12px; line-height: 16px; color: var(--et-muted);
}

.psl-feuille-pied {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 32px;
    padding-top: 12px; border-top: 1px solid var(--et-filet-fort);
    font-size: 12px; line-height: 16px; color: var(--et-muted);
}
.psl-feuille-pied > p { margin: 0; }
.psl-feuille-mention { max-width: 460px; }
.psl-feuille-edition { text-align: right; white-space: nowrap; }

/* Les dates restent sur une ligne : quand quatre cellules n'y tiennent plus, le bandeau
   passe à deux colonnes (≤ 1024 px), puis à une (≤ 560 px). */
@media (max-width: 1024px) {
    .psl-feuille-periode { grid-template-columns: 1fr 1fr; row-gap: 16px; }
    .psl-feuille-cellule:nth-child(3) { border-left: 0; }
}
/* Hors d'une feuille, posé directement sur le fond de page (Mes congés) : le bandeau prend
   la surface et un filet, sans quoi son aplat --et-surface-2 se confondrait avec la page. */
.psl-feuille-periode.est-sur-page { background: var(--et-surface); border: 1px solid var(--et-filet-fort); margin-bottom: 16px; }

/* Au papier, la feuille A4 fait ≈ 680 px de large : la règle des tablettes ci-dessus la
   replierait en 2 × 2. L'impression garde le bandeau sur une ligne, comme le PDF. */
@media print {
    .psl-feuille-periode { grid-template-columns: 1fr 1fr auto 1fr; row-gap: 0; }
    .psl-feuille-periode.est-montants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .psl-feuille-cellule:nth-child(3) { border-left: 1px solid var(--et-filet-fort); }
}
@media (max-width: 560px) {
    .psl-feuille-visas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .psl-feuille-periode { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 4px 0; }
    .psl-feuille-cellule { padding: 12px 16px; }
    .psl-feuille-cellule + .psl-feuille-cellule { border-left: 0; border-top: 1px solid var(--et-filet-fort); }
}
/* Un bandeau de chiffres courts (est-montants : congés, bulletin) reste en 2 × 2 au
   téléphone — quatre cellules empilées pour « 2 », « 3 », « 0 » allongeaient la page pour rien.
   Seuls les bandeaux de dates (autorisation) passent sur une colonne. */
@media (max-width: 560px) {
    .psl-feuille-periode.est-montants { grid-template-columns: 1fr 1fr; padding: 4px 0; }
    .psl-feuille-periode.est-montants .psl-feuille-cellule + .psl-feuille-cellule { border-top: 0; }
    .psl-feuille-periode.est-montants .psl-feuille-cellule:nth-child(even) { border-left: 1px solid var(--et-filet-fort); }
    .psl-feuille-periode.est-montants .psl-feuille-cellule:nth-child(n+3) { border-top: 1px solid var(--et-filet-fort); }
}
@media (max-width: 640px) {
    .psl-feuille-entete, .psl-feuille-pied { flex-direction: column; gap: 12px; }
    .psl-feuille-reference, .psl-feuille-edition { text-align: left; }
    .psl-feuille-details, .psl-feuille-details.est-trois { grid-template-columns: minmax(0, 1fr); }
    .psl-feuille-signature { flex-direction: column; align-items: stretch; padding: 16px; }
    .psl-feuille-verification { text-align: left; }
    /* 19 caractères interlettrés à .12em ne tiennent pas sur 390 px : le code se resserre,
       il ne se coupe pas. */
    .psl-feuille-code { font-size: 16px; letter-spacing: .06em; padding-right: calc(12px - .06em); }
}

/* ---------------------------------------------------------------------
   4 bis. LE BULLETIN — la feuille de 4 ter, plus ses tableaux de montants
   (gains, cotisations) et la ligne du net à payer.
   --------------------------------------------------------------------- */
.psl-feuille-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.psl-feuille-table th {
    padding: 0 0 8px; text-align: left;
    font-size: 12px; line-height: 16px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--et-muted);
    border-bottom: 1px solid var(--et-filet-fort);
}
.psl-feuille-table td { padding: 12px 0; border-bottom: 1px solid var(--et-filet-fort); vertical-align: top; overflow-wrap: anywhere; }
.psl-feuille-table :is(th, td) + :is(th, td) { padding-left: 16px; }
.psl-feuille-table .num { text-align: right; white-space: nowrap; }
.psl-feuille-table tr.est-total td { font-weight: 700; border-bottom: 0; }
/* Le bandeau du bulletin porte quatre montants de même rang : quatre colonnes égales
   (celui de l'autorisation laisse la durée, courte, à sa largeur). */
@media (min-width: 1025px) {
    .psl-feuille-periode.est-montants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.psl-feuille-net {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 16px 24px;
    background: var(--et-tint); border: 1px solid var(--et-tint);
}
/* Au téléphone, quatre colonnes de cotisations ne tiennent qu'en laissant les intitulés
   passer à la ligne (« Part / salariale ») et en resserrant la gouttière ; les montants,
   eux, ne se coupent jamais. Le net passe sous son libellé. */
@media (max-width: 640px) {
    .psl-feuille-table :is(th, td) + :is(th, td) { padding-left: 8px; }
    .psl-feuille-table th.num { white-space: normal; }
    .psl-feuille-net { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; }
}
.psl-feuille-net-valeur { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--et-form-blue-d); white-space: nowrap; }

/* ---------------------------------------------------------------------
   4 ter. NOTIFICATIONS — la rangée entière est le bouton.
   --------------------------------------------------------------------- */
.psl-notifs { list-style: none; margin: 0; padding: 0; }
.psl-notifs > li + li { border-top: 1px solid var(--et-hairline); }
.psl-notif {
    width: 100%; min-height: 56px; padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
    border: 0; background: transparent; color: var(--et-ink);
    font: inherit; text-align: left; cursor: pointer;
}
.psl-notif:hover { background: var(--et-survol); }
.psl-notif:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.psl-notif.est-nouvelle { box-shadow: inset 3px 0 0 var(--et-form-blue); }
.psl-notif.est-nouvelle .psl-notif-titre { font-weight: 700; }
.psl-notif-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psl-notif-titre { font-size: 14px; font-weight: 600; }
.psl-notif-corps { font-size: 13px; }
.psl-notif-date { font-size: 12px; color: var(--et-muted); }
.psl-notif > .bi { color: var(--et-form-blue-encre); }

/* ---------------------------------------------------------------------
   4 quater. LISTE ET FICHE (tickets, interventions du technicien) et
   les petits assemblages de formulaire qui vont avec.
   --------------------------------------------------------------------- */
.psl-seg > button { min-height: 44px; }
.psl-md {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 16px; align-items: start;
}
.psl-md-fiche { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.psl-md-fiche > .mx-blocage { margin: 0; }
.psl-md-items { list-style: none; margin: 0; padding: 0; }
.psl-md-items > li + li { border-top: 1px solid var(--et-hairline); }
.psl-md-item {
    width: 100%; min-height: 64px; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 3px;
    border: 0; background: transparent; color: var(--et-ink);
    font: inherit; text-align: left; cursor: pointer;
}
.psl-md-item:hover { background: var(--et-survol); }
.psl-md-item:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.psl-md-item[aria-current="true"] { background: var(--et-tint); box-shadow: inset 3px 0 0 var(--et-form-blue); }
.psl-md-item-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.psl-md-num { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }
.psl-md-titre { font-size: 14px; overflow-wrap: anywhere; }
.psl-md-sous { font-size: 12px; color: var(--et-muted); }
.psl-md-tete-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.psl-md-corps { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.psl-md-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.psl-texte-long { white-space: pre-wrap; overflow-wrap: anywhere; }

.psl-ligne-action { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.psl-champ-court, .psl-champ-long { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: var(--et-muted); }
.psl-champ-court { flex: 0 1 160px; }
.psl-champ-long { flex: 1 1 220px; }
.psl-champ-court > :is(.mx-input, .mx-select), .psl-champ-long > .mx-input { height: 44px; }
.psl-case { display: inline-flex; align-items: center; gap: var(--et-coche-gap); min-height: 44px; margin: 0; font-size: 13px; color: var(--et-ink); }
.psl-case > input { width: 18px; height: 18px; margin: 0; }
.psl-a-droite { margin-left: auto; }
/* Dans une colonne (.psl-md-corps), la base de 220 px d'un champ long devenait sa HAUTEUR :
   un vide de 200 px sous la zone de réponse (relevé sur la capture, pas par une règle). */
.psl-md-corps > .psl-champ-long { flex: none; }

.psl-fil { list-style: none; margin: 0; padding: 0 14px; }
.psl-fil-msg {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 0 10px 12px; border-top: 1px solid var(--et-hairline);
    box-shadow: inset 3px 0 0 var(--et-form-blue); font-size: 13px;
}
.psl-fil-msg:first-child { border-top: 0; }
.psl-fil-msg.est-interne { box-shadow: inset 3px 0 0 var(--et-avertissement-mark); }
.psl-fil-auteur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--et-muted); }

/* Deux commandes de fin de ligne côte à côte (Valider / Refuser). */
.psl-actions-ligne { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   5. RESPONSIVE — docs/conventions-responsive.md (560/640/720/1024).
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .psl-deux { grid-template-columns: minmax(0, 1fr); }
    .psl-md { grid-template-columns: minmax(0, 1fr); }
    .psl-actions-ligne .mx-btn-mini { min-height: 44px; padding: 0 12px; }
    /* Les fenêtres du portail se remplissent au doigt, sur le téléphone du salarié :
       leurs champs prennent les 44 px de docs/cibles-tactiles.md. La règle du lot 02
       couvre la coquille et les listes, pas les fenêtres — elle est donc posée ici, pour
       les fenêtres de ce portail seulement (relevé au banc, portail-accueil-coordonnees). */
    .psl-modale :is(.mx-input, .mx-select),
    .psl-coord :is(.mx-input, .mx-select) { min-height: 44px; }   /* et les fiches qu'on remplit sur place (intervention) */
    .psl-photo-gestes > .mx-btn, .psl-photo-btn { min-height: 44px; }
}
@media (max-width: 640px) {
    .ecran-tete-bas > .psl-mois { width: 100%; }
    .psl-mois-lib { flex: 1 1 auto; min-width: 0; }
    .ecran-tete-bas > .psl-tete-cta { width: 100%; }
    .psl-jour, .psl-jour > .mx-input { width: 100%; }
    .ecran-tete-bas > .psl-seg { width: 100%; display: flex; }
    /* Trois boutons au pied d'une fenêtre ne tiennent pas sur 390 px : « Approuver et
       signer » sortait du cadre, coupé (relevé sur la capture, pas par une règle). Ils
       passent l'un sous l'autre, l'engagement en premier. */
    .psl-modale .mx-modale-actions { width: 100%; flex-direction: column-reverse; align-items: stretch; }
    .psl-modale .mx-modale-actions > .mx-btn { width: 100%; min-height: 44px; }
    .ecran-tete-bas > .psl-seg > button { flex: 1 1 0; }
    .psl-champ-court, .psl-champ-long { flex-basis: 100%; }
    .psl-ligne-action > .mx-btn { width: 100%; }
    .psl-pointer { padding: 28px 16px; }
    .psl-pointer-heure { font-size: 48px; }
    .psl-pointer-cta { width: 100%; min-width: 0; }
    .psl-doc { padding: 20px 16px; }
}

/* ===========================================================================
   MES ABSENCES (/portail/absences, 2026-09-29) — la justification d'une absence
   constatée, et son document. Préfixe .psa-* : propre à cet écran.
   =========================================================================== */
.psa-vues                  { margin: 4px 0 16px; }
.psa-jour, .psa-justif     { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.psa-jour strong           { font-size: 14px; color: var(--et-ink); }
.psa-sous                  { font-size: 12px; font-weight: 400; color: var(--et-muted); }
.tbl-alerte .psa-sous      { color: var(--et-ink); }
.psa-justif                { font-size: 13px; color: var(--et-ink); }
.psa-telecharger {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--et-form-blue-d); overflow-wrap: anywhere; text-align: left;
}
.psa-gestes                { display: inline-flex; gap: 6px; }
.psa-justifier, .psa-retirer { white-space: nowrap; }
.psa-retirer               { color: var(--et-danger-ink); }

/* Le délai en clair, et la jauge des quinze jours écoulés : bleue, ambre sous trois jours. */
.psa-delai-bloc            { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 280px; }
.psa-delai                 { font-size: 13px; color: var(--et-muted); white-space: nowrap; }
.psa-delai.est-proche      { font-weight: 700; color: var(--et-avertissement-ink); }
.psa-jauge                 { display: block; height: 4px; background: var(--et-surface-3); }
.psa-jauge-plein           { display: block; height: 100%; background: var(--et-form-blue); }
.psa-jauge-plein.est-proche { background: var(--et-avertissement-mark); }

/* Une file courte, servie sur une page : pas de pied de pagination (TaillePage 0). */
.psa-corps .tbl-pied       { display: none; }

/* La fenêtre : libellés au-dessus des champs, motifs en choix directs, zone de dépôt. */
.psa-form                  { display: flex; flex-direction: column; gap: 18px; }
.psa-groupe                { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.psa-lbl                   { padding: 0; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.psa-requis                { color: var(--et-danger-ink); }
.psa-motifs                { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.psa-choix {
    min-height: 44px; padding: 0 12px; text-align: left; cursor: pointer;
    border: 1px solid var(--et-bord-champ); background: var(--et-surface);
    font-size: 14px; color: var(--et-ink);
}
.psa-choix:hover:not(:disabled) { background: var(--et-tint); }
.psa-choix.est-choisi {
    border-color: var(--et-form-blue); background: var(--et-tint);
    box-shadow: inset 3px 0 0 var(--et-form-blue); font-weight: 600; color: var(--et-form-blue-d);
}
.psa-choix:focus-visible   { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }
.psa-compteur              { align-self: flex-end; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

/* La zone de dépôt : un champ natif masqué dessous — son libellé suit la langue du
   navigateur (« Choose File »), pas celle du produit. */
.psa-depot {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 64px; margin: 0; padding: 8px 12px; cursor: pointer;
    border: 1px dashed var(--et-bord-champ); background: var(--et-surface-2);
}
.psa-depot:hover           { background: var(--et-tint); }
.psa-depot.est-inerte      { cursor: not-allowed; }
.psa-depot-lib             { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--et-form-blue-d); }
.psa-depot-formats         { font-size: 12px; color: var(--et-muted); }
.psa-fichier-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.psa-depot:has(.psa-fichier-input:focus-visible) { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.psa-fichier-nom           { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--et-ink); overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 1024px) {
    .psa-jour              { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
    .psa-delai-bloc        { max-width: none; }
    .psa-telecharger       { min-height: 44px; }
    .psa-corps table.tbl > tbody > tr > td:has(.psa-gestes) { flex: 1 1 100%; margin-left: 0; }
    .psa-gestes            { display: flex; width: 100%; }
    .psa-gestes .mx-btn    { flex: 1 1 0; justify-content: center; min-height: 44px; }
    .psa-fiche .mx-zone    { min-height: 44px; }
}
@media (max-width: 640px) {
    .psa-motifs            { grid-template-columns: minmax(0, 1fr); }
    /* Au téléphone, « Envoyer » d'abord et pleine largeur ; « Annuler » dessous. */
    .psa-pied              { flex-direction: column-reverse; align-items: stretch; }
    .psa-pied .mx-btn      { width: 100%; justify-content: center; min-height: 44px; }
}