/* ===========================================================================
   RAPPORTS PÉRIODIQUES — liste (.rpp-*) et fiche (.rpf-*)
   Routes /app/rapports-periodiques, /app/rapports-periodiques/{id|nouveau}.
   Port de la passation « export_rapports_periodiques » (Projet EasyTime,
   Design 9) : « Rapports periodiques List.dc.html », « Rapport periodique
   Fiche.dc.html ».

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css comme le demandait la
   passation : c'est là que les branches ouvertes le même jour entrent en
   conflit — sur la dernière ligne du fichier et sur la clé de cache partagée,
   jamais sur la substance. Le <link> est dans App.razor, APRÈS modele-erp.css.

   LE PRÉFIXE N'EST PAS CELUI DE LA PASSATION. Elle écrivait .rp-* ; .rp-* est
   déjà la famille de l'écran « Rapport du personnel »
   (css/ecran-rapport-personnel.css), avec lequel SIX classes se recouvrent au
   nom près et pas du tout au fond : .rp-table, .rp-table-hote, .rp-carte-hdr,
   .rp-ind, .rp-outils, .rp-vide. Les deux feuilles étant chargées ensemble
   sur toutes les pages, la dernière l'aurait emporté — et l'écran cassé aurait
   été celui qu'on ne regardait pas. D'où .rpp-* (liste) et .rpf-* (fiche).

   AUCUNE COULEUR EN DUR. La passation en écrivait une centaine (#0A6ED1,
   #354A5F, #FEF7F1, #BB0000…) : ce sont exactement les jetons --et-* de
   easytech-theme.css, mêmes valeurs, mais qui suivent la bascule de thème au
   lieu de la trouer. Corollaire : ce qui variait par une teinte calculée en C#
   passe par une CLASSE d'état (.est-echec, .est-manque, .est-diffuse…), pas
   par un style inline.

   CE QUI N'EST PAS ICI, PARCE QUE LE GABARIT LE PORTE DÉJÀ
     · trame de page, fil d'Ariane, titre, résumé .. .mx-page*, .mx-fil (modele-erp §1)
     · barre d'outils d'en-tête et boutons ......... .mx-outils, .mx-btn* (§1)
     · sélecteur segmenté des vues ................. .mx-seg (§11)
     · bouton de repli des filtres ................. .tbl-btn-filtre (easytime-shell)
     · tuiles d'indicateurs ........................ .mx-ind-grille, .mx-ind* (§7)
     · pastilles d'état ............................ .mx-pastille (§3)
     · formulaire dense ............................ .mx-form, .mx-champ*, .mx-groupe (§5)
     · champs de saisie ............................ .mx-input, .mx-select, .mx-zone (§5)
     · panneau d'actions irréversibles ............. .mx-irreversible (§5)
     · mention de méthode sous un bloc ............. .mx-methode (§7)
   Les redéclarer sous un préfixe local aurait fait une copie de plus de chacune.
   Rien ici n'est générique ; ce que deux écrans emploieraient monterait au
   gabarit, jamais l'inverse.
   =========================================================================== */

/* ===========================================================================
   LISTE
   =========================================================================== */

.rpp-corps { display: flex; flex-direction: column; gap: 14px; }

/* --- Bandeau d'anomalies ---------------------------------------------------
   La teinte suit le PIRE état de ses lignes, pas leur moyenne : un échec parmi
   des avertissements reste un échec. */
.rpp-alerte { background: var(--et-surface); border: 1px solid var(--et-avertissement-bord); }
.rpp-alerte.est-grave { border-color: var(--et-danger-bord); }

.rpp-alerte > .tete {
    display: flex; align-items: flex-start; gap: 12px; row-gap: 10px; flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--et-avertissement-bg);
    border-bottom: 1px solid var(--et-avertissement-bord);
}
.rpp-alerte.est-grave > .tete {
    background: var(--et-danger-badge-bg); border-bottom-color: var(--et-danger-bord);
}
.rpp-alerte > .tete > .bi { flex: none; margin-top: 1px; font-size: 17px; color: var(--et-avertissement-ink); }
.rpp-alerte.est-grave > .tete > .bi { color: var(--et-danger-ink); }
.rpp-alerte .tete .txt { flex: 1 1 420px; min-width: 260px; }
.rpp-alerte .tete .t { font-size: 14px; font-weight: 700; color: var(--et-avertissement-ink); }
.rpp-alerte.est-grave .tete .t { color: var(--et-danger-ink); }
.rpp-alerte .tete .x {
    margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--et-ink); text-wrap: pretty;
}
.rpp-alerte > .corps { padding: 4px 18px 12px; }

/* Chaque anomalie porte SON geste : une alerte sans sortie oblige à chercher où
   agir, et le geste mène là où on corrige. */
.rpp-alerte .ligne {
    display: flex; align-items: center; gap: 12px; row-gap: 8px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--et-rang);
}
.rpp-alerte .ligne:last-child { border-bottom: none; }
.rpp-alerte .nature {
    flex: none; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
}
.rpp-alerte .nature.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.rpp-alerte .ligne .txt { flex: 1 1 320px; min-width: 240px; }
.rpp-alerte .nom { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rpp-alerte .motif { margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--et-muted); text-wrap: pretty; }

.rpp-alerte .veille {
    display: flex; align-items: flex-start; gap: 11px; row-gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding: 11px 14px;
    background: var(--et-tint); border: 1px solid var(--et-form-blue);
}
.rpp-alerte .veille > .bi { flex: none; margin-top: 1px; color: var(--et-form-blue-d); }
.rpp-alerte .veille .txt { flex: 1 1 300px; min-width: 220px; }
.rpp-alerte .veille .t { font-size: 13px; font-weight: 600; color: var(--et-form-blue-d); }
.rpp-alerte .veille .x { margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--et-ink); text-wrap: pretty; }

/* --- En-tête de carte ------------------------------------------------------
   Un décompte NOMME SA BASE : « 4 sur 12 », jamais « 4 ». */
.rpp-carte-hdr {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 12px 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);
}
.rpp-carte-hdr .ct {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 400; color: var(--et-faint);
}

.rpp-vide { padding: 42px 24px; text-align: center; }
.rpp-vide .t { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.rpp-vide .d { margin-top: 6px; font-size: 13px; color: var(--et-muted); }

/* --- Tableau --------------------------------------------------------------- */
.rpp-hote { overflow-x: auto; }
.rpp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpp-table thead th {
    padding: 9px 16px;
    background: var(--et-table-head); border-bottom: 1px solid var(--et-table-head-fonce);
    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;
}
.rpp-table th.d, .rpp-table td.d { text-align: right; }
.rpp-table .sep { border-right: 1px solid var(--et-rang); }
.rpp-table tbody td {
    padding: 9px 16px; border-bottom: 1px solid var(--et-rang);
    white-space: nowrap; vertical-align: top; color: var(--et-ink);
}
.rpp-table tbody tr:hover td { background: var(--et-surface-3); }
.rpp-table tbody tr.est-inactif td { background: var(--et-surface-3); }
.rpp-table tbody tr.est-inactif .n { color: var(--et-muted); }
.rpp-table .s { margin-top: 1px; font-size: 12px; color: var(--et-faint); }
.rpp-table .mono, .rpp-table .s.mono { font-family: var(--et-font-mono); font-size: 12px; }
.rpp-table .liste { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.rpp-table td.nom { display: flex; align-items: center; gap: 8px; }
/* Le nom et sa note s'empilent : sans le passage en bloc, deux <span> frères
   restent sur la même ligne et « identifiant 3 » se lit comme une partie du nom. */
.rpp-table td.nom .txt { min-width: 0; }
.rpp-table td.nom .n, .rpp-table td.nom .s { display: block; }
/* Le filet d'accent naît TRANSPARENT : une planification suspendue n'a pas d'état
   à signaler, et lui donner une teinte neutre ferait une quatrième couleur à lire. */
.rpp-table td.nom .accent { width: 3px; height: 26px; flex: none; background: transparent; }
.rpp-table td.nom .accent.est-normal { background: var(--et-form-blue); }
.rpp-table td.nom .accent.est-alerte { background: var(--et-danger); }
.rpp-table td.nom .n { font-weight: 600; }
.rpp-table td.contenu { max-width: 260px; white-space: normal; }
.rpp-table td.contenu > * { margin: 0 4px 3px 0; }

/* Le module d'origine est dit par la teinte. Une section dont le module n'est pas
   souscrit est NEUTRALISÉE mais LISIBLE : le gris des inertes porterait ici un
   avertissement à 1,85:1 — le libellé reste en gris de texte secondaire et c'est
   la bordure ambre qui porte le signal. */
.rpp-jeton {
    display: inline-block; padding: 1px 7px; border: 1px solid transparent;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.rpp-jeton.est-time { background: var(--et-tint); color: var(--et-form-blue-d); }
.rpp-jeton.est-pos { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.rpp-jeton.est-muet {
    background: var(--et-surface-2); border-color: var(--et-avertissement-bord); color: var(--et-muted);
}

.rpp-fmt { display: inline-block; padding: 1px 7px; font-family: var(--et-font-mono); font-size: 12px; }
.rpp-fmt.est-html { background: var(--et-tint); color: var(--et-form-blue-d); }
.rpp-fmt.est-pdf { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.rpp-fmt.est-csv { background: var(--et-succes-bg); color: var(--et-succes-ink); }

.rpp-table td.suspendu { color: var(--et-inerte); }

.rpp-table td.actes { white-space: nowrap; }
.rpp-table td.actes > * { margin-left: 12px; }

/* Lien-bouton : un geste qui n'est pas une navigation mais ne mérite pas la
   surface d'un bouton. Déclaré une fois, employé par le tableau, le bandeau
   d'anomalies et l'en-tête de la carte d'aperçu. */
.rpp-lien, .rpf-lien {
    padding: 0; border: none; background: transparent; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--et-form-blue-encre); cursor: pointer;
    white-space: nowrap; text-decoration: none;
}
.rpp-lien:hover, .rpf-lien:hover { color: var(--et-form-blue-d); text-decoration: underline; }
.rpp-lien:disabled { color: var(--et-inerte); cursor: not-allowed; text-decoration: none; }

/* --- Journal des diffusions : la seule trace d'un échec -------------------- */
.rpp-journal { padding: 2px 18px 12px; }
.rpp-journal .ligne {
    display: flex; align-items: center; gap: 12px; row-gap: 6px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--et-rang);
}
.rpp-journal .ligne:last-child { border-bottom: none; }
.rpp-journal .q {
    flex: none; width: 96px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-table-head-encre);
}
.rpp-journal .txt { flex: 1 1 220px; min-width: 180px; }
.rpp-journal .n { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rpp-journal .d { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }
.rpp-journal .decl {
    flex: none; padding: 1px 8px; background: var(--et-surface-2);
    font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}
.rpp-journal .res { flex: none; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.rpp-journal .res.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.rpp-journal .res.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* --- Liste à puces d'effets / de suppositions ------------------------------
   .mx-effets du gabarit est un <ul> encadré dans une modale de création ; ici
   c'est une carte pleine largeur dont chaque ligne porte un titre, un détail et
   une puce de gravité. Deux objets différents sous un même nom auraient forcé
   l'un des deux à se déguiser. */
.rpp-effets, .rpf-effets { padding: 6px 18px 14px; }
.rpf-effets { padding: 4px 16px 12px; }
.rpp-effets .ligne, .rpf-effets .ligne {
    display: flex; align-items: baseline; gap: 11px; padding: 9px 0;
    border-bottom: 1px solid var(--et-rang);
}
.rpp-effets .ligne:last-child, .rpf-effets .ligne:last-child { border-bottom: none; }
.rpp-effets .puce, .rpf-effets .puce {
    flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--et-form-blue);
}
.rpp-effets .puce.est-critique, .rpf-effets .puce.est-critique { background: var(--et-avertissement); }
.rpp-effets .titre, .rpf-effets .titre { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.rpf-effets .titre { font-size: 13px; }
.rpp-effets .detail, .rpf-effets .detail {
    margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--et-muted); text-wrap: pretty;
}

/* ===========================================================================
   FICHE
   =========================================================================== */

/* La pastille d'état vit DANS le titre : à 11,5 px sur une ligne de 23 px, la
   ligne de base la ferait glisser vers le bas du titre. */
.ecran-tete-txt h1 > .mx-pastille { margin-left: 10px; vertical-align: middle; }

/* Fiche PLEINE PAGE et non modale : la prévisualisation, l'historique des
   diffusions et le panneau destructeur ne tiennent pas dans une modal-lg. */
.rpf-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start;
}
.rpf-colg { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rpf-cold { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 14px; }
/* 1100 px et non 1180 : c'est le palier de l'échelle retenue
   (docs/conventions-responsive.md §2), et celui où .mx-fiche et .fx-corps
   passent déjà en une colonne. Une fiche à deux colonnes au-dessus d'un
   formulaire dense qui n'en a plus qu'une aurait ouvert une dix-neuvième
   largeur de rupture pour 80 px. */
@media (max-width: 1100px) {
    .rpf-grille { grid-template-columns: minmax(0, 1fr); }
    .rpf-cold { position: static; }
}

.rpf-carte-hdr {
    padding: 12px 18px;
    background: var(--et-surface-2); border-bottom: 3px solid var(--et-form-strip);
    font-size: 14px; font-weight: 700; color: var(--et-table-head-encre);
}
.rpf-carte-hdr.petit {
    padding: 11px 16px; border-bottom: 1px solid var(--et-hairline); font-size: 14px;
}
.rpf-carte-hdr.avec-acte { display: flex; align-items: center; gap: 10px; }
.rpf-carte-hdr .t { flex: 1; min-width: 0; }

.rpf-corps { padding: 16px 18px 20px; }

/* Rangée de champs denses. La colonne de libellés de 158 px est portée par
   .mx-champ (gabarit) ; ici on ne pose que la répartition en colonnes — et on
   annule la gouttière horizontale de .mx-champ, qui vaut pour un formulaire posé
   à même la carte et se cumulerait ici avec le padding du corps. */
.rpf-rangee { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.rpf-rangee > .mx-champ { padding-left: 0; padding-right: 0; }
.rpf-corps > .mx-champ { padding-left: 0; padding-right: 0; margin-top: 12px; }
/* 1024 px et non 900 : palier de l'échelle, et frontière de la coquille — en
   dessous, le rail est en icônes et la tablette est la cible. Deux champs denses
   côte à côte y laissent, colonne d'intitulé de 158 px déduite, moins de 190 px
   à la saisie : moins que ce que la plupart des valeurs demandent. Le repli
   arrive donc AVANT 720 px, où c'est l'intitulé lui-même qui monte au-dessus de
   son champ (modele-erp.css). Les deux paliers se suivent, ils ne se doublent
   pas. */
@media (max-width: 1024px) {
    .rpf-rangee { grid-template-columns: minmax(0, 1fr); }
}

/* Segmenté de FORMULAIRE : hauteur de CHAMP (34 px, celle de .mx-input) et non de
   barre d'outils. .mx-seg du gabarit règle un affichage de lecture, à 32 px — le
   poser ici désalignerait la rangée avec le <select> voisin, dont le bord haut
   est la seule ligne que l'œil suit dans une grille dense. */
.rpf-seg { display: flex; height: 34px; border: 1px solid var(--et-form-border); overflow: hidden; }
.rpf-seg button {
    flex: 1; border: none; border-right: 1px solid var(--et-form-border);
    background: var(--et-surface); font-family: inherit; font-size: 13px;
    color: var(--et-ink); cursor: pointer; white-space: nowrap;
}
.rpf-seg button:last-child { border-right: none; }
.rpf-seg button:hover { background: var(--et-surface-3); }
.rpf-seg button.est-actif { background: var(--et-table-head); color: var(--et-sur-ardoise-plein); font-weight: 600; }

/* --- Contenu : rangé par module -------------------------------------------- */
.rpf-famille { margin-top: 14px; }
.rpf-famille .hdr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rpf-famille .hdr .lb { font-size: 12px; font-weight: 600; color: var(--et-muted); }
.rpf-famille .hdr .gl { font-size: 12px; color: var(--et-faint); }

/* Les filets viennent de la GOUTTIÈRE, pas de bordures : au repli, deux
   bordures adjacentes feraient un filet double. */
.rpf-tuiles {
    margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 1px; background: var(--et-hairline); border: 1px solid var(--et-hairline);
}
/* Famille en nombre impair : sans cette cellule, le fond du conteneur reste
   visible et se lit comme une tuile cassée. */
.rpf-tuiles .remplissage { background: var(--et-surface); }

.rpf-tuiles .tuile {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    background: var(--et-surface); border: none; cursor: pointer;
    font-family: inherit; text-align: left;
}
.rpf-tuiles .tuile:hover { background: var(--et-surface-3); }
/* La case est .mx-case (modele-erp.css). Elle garde son décalage d'un pixel, et
   surtout son état PILOTÉ PAR LA TUILE : trois états de tuile commandent une seule
   case (cochée, indisponible, cochée sans le module), ce qu'une classe posée sur la
   case ne saurait pas dire. Ces sélecteurs-là sont à (0,4,0) : ils passent devant
   le .mx-case.est-cochee du gabarit, qui est à (0,2,0). */
.rpf-tuiles .tuile .mx-case { margin-top: 1px; }
.rpf-tuiles .tuile .mx-case .bi { visibility: hidden; }
.rpf-tuiles .tuile .txt { flex: 1; min-width: 0; }
.rpf-tuiles .tuile .lb { display: block; font-size: 13px; color: var(--et-ink); }
.rpf-tuiles .tuile .dt { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--et-faint); }

.rpf-tuiles .tuile.est-cochee { background: var(--et-tint); }
.rpf-tuiles .tuile.est-cochee .lb { font-weight: 600; }
.rpf-tuiles .tuile.est-cochee .mx-case { border-color: var(--et-form-blue); background: var(--et-form-blue); }
.rpf-tuiles .tuile.est-cochee .mx-case .bi { visibility: visible; }

/* Option indisponible ET NON cochée : inerte, le gris des inertes est légitime. */
.rpf-tuiles .tuile.est-indispo { background: var(--et-surface-3); cursor: not-allowed; }
.rpf-tuiles .tuile.est-indispo .lb, .rpf-tuiles .tuile.est-indispo .dt { color: var(--et-inerte); }
.rpf-tuiles .tuile.est-indispo .mx-case { border-color: var(--et-form-border); }

/* Option indisponible mais COCHÉE : actionnable, et lisible. Le retrait est le
   remède que l'écran réclame — la peindre en inerte reviendrait à nommer un
   problème en interdisant son seul remède. */
.rpf-tuiles .tuile.est-muette-cochee { background: var(--et-avertissement-bg); cursor: pointer; }
.rpf-tuiles .tuile.est-muette-cochee .lb { color: var(--et-ink); font-weight: 600; }
.rpf-tuiles .tuile.est-muette-cochee .dt { color: var(--et-muted); }
.rpf-tuiles .tuile.est-muette-cochee .mx-case { border-color: var(--et-avertissement-mark); background: var(--et-avertissement); }
.rpf-tuiles .tuile.est-muette-cochee .mx-case .bi { visibility: visible; }

.rpf-avert {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 8px 11px;
    background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-bord);
}
.rpf-avert.mt { margin-top: 10px; }
.rpf-avert > .bi { flex: none; margin-top: 1px; font-size: 13px; color: var(--et-avertissement-ink); }
.rpf-avert span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--et-ink); text-wrap: pretty; }

/* --- Radios : cadrage de fenêtre, format ---------------------------------- */
.rpf-radios {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
    background: var(--et-hairline); border: 1px solid var(--et-hairline);
}
.rpf-radios .radio {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    background: var(--et-surface); border: none; cursor: pointer; font-family: inherit; text-align: left;
}
.rpf-radios .radio:hover { background: var(--et-surface-3); }
.rpf-radios .radio .puce {
    flex: none; margin-top: 2px; width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid var(--et-inerte); background: var(--et-surface);
}
.rpf-radios .radio .txt { flex: 1; min-width: 0; }
.rpf-radios .radio .lb { display: block; font-size: 13px; color: var(--et-ink); }
.rpf-radios .radio .dt { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--et-faint); }
.rpf-radios .radio.est-actif { background: var(--et-tint); }
.rpf-radios .radio.est-actif .lb { font-weight: 600; }
.rpf-radios .radio.est-actif .puce {
    border-color: var(--et-form-blue); background: var(--et-form-blue);
    box-shadow: inset 0 0 0 2px var(--et-surface);
}

.rpf-info {
    display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; padding: 11px 14px;
    background: var(--et-tint); border: 1px solid var(--et-form-blue);
}
.rpf-info > .bi { flex: none; margin-top: 1px; color: var(--et-form-blue-d); }
.rpf-info .ph { font-size: 13px; line-height: 1.6; color: var(--et-form-blue-d); text-wrap: pretty; }
.rpf-info .bn { margin-top: 4px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-table-head-encre); }

.rpf-adresses { margin-top: 8px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rpf-adresses .adr {
    padding: 2px 9px; background: var(--et-surface-2); font-size: 12px;
    color: var(--et-ink); white-space: nowrap;
}
.rpf-adresses .adr.est-invalide { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* --- Aperçu et prévisualisation ------------------------------------------- */
.rpf-apercu { padding: 12px 16px 14px; }
.rpf-apercu .et { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.rpf-apercu .et.mt { margin-top: 12px; }
.rpf-apercu .objet { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--et-ink); word-break: break-word; }
.rpf-apercu .sections { margin-top: 5px; display: flex; flex-direction: column; gap: 5px; }
.rpf-apercu .sections .ligne { display: flex; align-items: baseline; gap: 8px; }
.rpf-apercu .sections .rg { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-inerte); }
.rpf-apercu .sections .lb { flex: 1; min-width: 0; font-size: 13px; color: var(--et-ink); }
.rpf-apercu .sections .lb.est-muette { color: var(--et-inerte); }
.rpf-apercu .sections .mq { flex: none; font-size: 12px; color: var(--et-avertissement-ink); }
.rpf-apercu .piece {
    margin-top: 4px; font-family: var(--et-font-mono); font-size: 12px;
    color: var(--et-ink); word-break: break-all;
}
.rpf-apercu .note {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--et-rang);
    font-size: 12px; line-height: 1.55; color: var(--et-faint); text-wrap: pretty;
}

.rpf-preview { margin-top: 12px; border: 1px solid var(--et-hairline); }
.rpf-preview .hdr { padding: 9px 12px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline); }
.rpf-preview .hdr .t { font-size: 12px; font-weight: 600; color: var(--et-table-head-encre); word-break: break-word; }
.rpf-preview .hdr .s { margin-top: 2px; font-size: 12px; color: var(--et-faint); }
.rpf-preview .corps { padding: 4px 12px 10px; }
.rpf-preview .sec { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--et-ink); }
.rpf-preview .val {
    display: flex; align-items: baseline; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--et-rang);
}
.rpf-preview .val .k { flex: 1; min-width: 0; font-size: 12px; color: var(--et-muted); }
.rpf-preview .val .v {
    flex: none; font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; color: var(--et-ink);
}

.rpf-historique { padding: 2px 16px 12px; }
.rpf-historique .ligne {
    display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--et-rang);
}
.rpf-historique .ligne:last-child { border-bottom: none; }
.rpf-historique .pc { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--et-succes); }
.rpf-historique .pc.est-ko { background: var(--et-danger); }
.rpf-historique .q { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-table-head-encre); }
.rpf-historique .d { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--et-muted); }

/* ===========================================================================
   PALIERS DE LARGEUR ET CIBLES TACTILES

   EN QUEUE DE FEUILLE, comme la section 17 d'easypaie.css : ces règles
   reprennent celles qui précèdent à spécificité égale. Placées plus haut, elles
   se feraient écraser par les blocs qu'elles corrigent.

   Les deux paliers de mise en page vivent au contraire À CÔTÉ de la grille
   qu'ils replient (.rpf-grille, .rpf-rangee) : là, la règle et son repli se
   lisent ensemble, et c'est ce qui évite qu'on en déplace une sans l'autre.
   =========================================================================== */

/* --- Sous 1024 px : la règle des 44 px, étendue à cet écran ----------------
   Le lot 02 a posé la règle sur la coquille et sur le gabarit de liste, en
   laissant hors de portée les feuilles d'écran (docs/cibles-tactiles.md) ;
   easypaie.css §17 l'a étendue à son module, et c'est le précédent suivi ici.
   Sans ce bloc, les gestes de cet écran — « Envoyer maintenant », « Suspendre »,
   les cases de contenu — tiennent en 16 à 38 px sur une tablette, c'est-à-dire
   à côté de la règle de l'application.

   min-height et non height : « Prévisualiser sur la fenêtre courante » passe à
   la ligne dans une colonne étroite, et une hauteur fixe le couperait.

   inline-flex sur les liens-boutons : « Modifier » est un <a>, donc inline par
   défaut, et min-height ne s'applique pas à une boîte inline. Sans le passage
   en inline-flex, la règle serait écrite et sans effet sur exactement une cible
   de la rangée — la seule qui navigue. */
@media (max-width: 1024px) {
    .rpp-lien, .rpf-lien {
        display: inline-flex; align-items: center;
        min-height: 44px; padding-top: 4px; padding-bottom: 4px;
    }

    /* La rangée d'actes d'une ligne : trois cibles INDÉPENDANTES côte à côte,
       dont une bascule qui suspend la planification. L'écart de 12 px de la
       marge suffit à la règle (6 px au moins) et n'est donc pas repris. */
    .rpp-table td.actes { white-space: normal; }

    /* Sélecteur segmenté : UN objet à plusieurs positions, il reste soudé —
       comme .tbl-groupe au lot 02. Seule la hauteur cède. */
    .rpf-seg { height: auto; }
    .rpf-seg button { min-height: 44px; }

    /* Cases de contenu et radios de cadrage : la tuile ENTIÈRE est la cible,
       pas la case de 15 px qu'elle contient. Une tuile à deux lignes dépasse
       déjà 44 px ; celles qui n'ont pas de note descendaient à 38. */
    .rpf-tuiles .tuile, .rpf-radios .radio { min-height: 44px; }
}

/* --- Sous 560 px : les rembourrages rendent la place qu'ils prennent -------
   Dernier palier de contenu de l'échelle. Le tableau de la liste défile déjà
   dans son hôte (.rpp-hote) : chaque pixel rendu par une cellule est une
   colonne de plus sous les yeux avant le premier geste de défilement. Les
   valeurs sont celles qu'easypaie.css et modele-erp.css appliquent au même
   endroit — ce palier n'invente rien, il aligne. */
@media (max-width: 560px) {
    .rpp-table th, .rpp-table td { padding-left: 10px; padding-right: 10px; }
    .rpp-alerte > .tete { padding-left: 12px; padding-right: 12px; }
    .rpp-alerte > .corps, .rpp-journal, .rpp-effets { padding-left: 12px; padding-right: 12px; }
    .rpp-carte-hdr { padding-left: 12px; padding-right: 12px; }
    .rpf-corps { padding-left: 12px; padding-right: 12px; }
    .rpf-carte-hdr { padding-left: 12px; padding-right: 12px; }
    .rpf-apercu, .rpf-historique, .rpf-effets { padding-left: 12px; padding-right: 12px; }
}