/* ============================================================================
   PÉRIODES DE POINTAGE — /app/periodes
   Passations « design_handoff_periodes » (Design 24) et « export_periodes » (Design 6,
   la vue Suivi).

   SA FEUILLE, ET RIEN QUE LA SIENNE : la frise de couverture, les trous, la clôture
   d'exercice, les cartes de période, la file de jalons du suivi. Rien ici n'est
   réutilisable en l'état par un autre écran ; le jour où l'un le fait, la classe monte
   dans le gabarit (modele-erp.css § 11) et non l'inverse — sinon le second écran
   dépendrait de la feuille du premier pour s'afficher. C'est ce qui vient d'arriver au
   sélecteur de vue, parti en section 11 sous .mx-seg.

   PRÉFIXE .pdp-* ET NON .per-*
   La passation écrit .per-frise, .per-trous, .per-cartes. Or .per-* est DÉJÀ la famille
   du sélecteur de bornes partagé (.per-declencheur, .per-panneau, .per-bornes… dans
   modele-erp.css et easytime-shell.css), posé sur cet écran-ci comme sur douze autres.
   Deux familles sous un même préfixe, et le premier qui renomme casse l'autre sans le
   savoir. « Imbriquer, ou préfixer » — docs/conventions-nommage.md.

   Aucune couleur en dur : tout passe par les jetons --et-*, c'est par eux que le mode
   sombre existe. La passation les écrit en hexadécimal (#0A6ED1, #BB0000…) ; ce sont les
   valeurs des jetons clairs, elles sont donc reprises par leur nom.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   LA LIGNE DE CONTINUITÉ, dans la barre d'outils.

   Elle NOMME les bornes du trou. « 3 période(s) » — ce que l'écran affichait pour tout
   résumé — ne permet pas de savoir qu'il manque quatre mois. En mono : ce sont des dates,
   elles se comparent en colonne. */
.pdp-continuite {
    flex: 1 1 240px;
    min-width: 180px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-succes-ink);
}

.pdp-continuite.est-rompue { color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   LE SÉLECTEUR DE VUE (Suivi · Cockpit · Toutes · Ouvertes · Clôturées).

   LA CONDITION POSÉE ICI EST LEVÉE. Cette note portait le constat que .pdp-vues
   et .org-axe de l'organigramme étaient le même objet sous deux préfixes, et que
   la remontée au gabarit était due dès qu'un troisième écran en poserait un. Les
   rôles l'ont fait : le composant est en section 11 de modele-erp.css sous le nom
   .mx-seg, et cette feuille n'en garde rien.

   Deux valeurs changent au passage, et aucune n'était une décision : la hauteur
   passe de 32 à 31 px — celle des deux autres copies, et celle du champ de
   recherche de la même barre — et la bordure quitte --et-filet-fort pour
   --et-form-border, qui a un pendant sombre là où le premier n'en a pas. Le
   sélecteur gardait donc un filet clair sur fond sombre.                       */

/* ---------------------------------------------------------------------------
   LA FRISE DE COUVERTURE.

   La continuité est une propriété d'AXE. Un trou de quatre mois se voit d'un coup d'œil
   sur une bande, et se lit péniblement en comparant des dates de fin et de début.

   Chaque bloc est positionné EN POURCENTAGE de l'année (style inline calculé par la
   page) : un mois vaut sa durée réelle. Une grille de douze colonnes égales serait plus
   simple et fausse — février y paraîtrait aussi long que janvier, et un trou de 28 jours
   aussi large qu'un trou de 31. */
.pdp-frise-bloc {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}

.pdp-frise-tete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 18px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}

.pdp-frise-tete .filet { flex: none; width: 3px; height: 15px; background: var(--et-form-blue); }

.pdp-frise-tete .titre {
    flex: 1;
    min-width: 0;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--et-table-head-encre);
}

.pdp-frise-tete .note { font-size: 12px; color: var(--et-faint); }

.pdp-frise-corps { padding: 16px 18px 12px; }

.pdp-frise {
    position: relative;
    height: 38px;
    background: var(--et-surface-3);
    border: 1px solid var(--et-hairline);
}

.pdp-bloc {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: none;
    border-right: 1px solid var(--et-surface);
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

/* Quatre lectures d'état, et la nuance compte : une période clôturée est GRISE, pas
   verte — elle est soldée, il n'y a plus rien à y faire. */
.pdp-bloc.est-ouverte  { background: var(--et-info-bg);    color: var(--et-ink); }
.pdp-bloc.est-generee  { background: var(--et-succes-bg);  color: var(--et-ink); }
.pdp-bloc.est-cloturee { background: var(--et-repos-bord); color: var(--et-muted); }
.pdp-bloc.est-archivee { background: var(--et-rang);       color: var(--et-inerte); }

/* La période par défaut porte un filet bleu : c'est celle que les autres écrans
   présélectionnent, elle doit se repérer sans lire l'infobulle. */
.pdp-bloc.est-defaut { border-left: 2px solid var(--et-form-blue); }

/* Un trou est HACHURÉ, pas seulement teinté : il ne représente pas une durée travaillée,
   et la texture le dit avant la couleur — y compris pour qui ne distingue pas le rouge. */
.pdp-bloc.est-trou {
    background: var(--et-danger-badge-bg);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 5px, rgba(187, 0, 0, .14) 5px 10px);
    border-left: 1px solid var(--et-danger-bord);
    color: var(--et-danger-ink);
    cursor: default;
}

/* Le reste de l'année n'est PAS un trou : il n'est pas encore arrivé. Le peindre en rouge
   ferait crier l'écran onze mois par an, et le trou réel s'y noierait. */
.pdp-bloc.est-avenir {
    background: var(--et-surface-3);
    border-left: 1px solid var(--et-hairline);
    color: var(--et-inerte);
    cursor: default;
}

.pdp-frise-mois {
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.pdp-frise-mois span {
    text-align: center;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-inerte);
}

/* ---------------------------------------------------------------------------
   CLÔTURE D'EXERCICE.

   Geste distinct de la clôture d'une période : il verrouille les douze mois d'un coup,
   donc il attend que chacun soit soldé. Le bandeau NOMME les obstacles — un bouton inerte
   sans motif est une porte fermée sans écriteau. */
.pdp-exercice {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
}

.pdp-exercice.est-pret { background: var(--et-succes-bg); }

.pdp-exercice .txt { flex: 1 1 320px; min-width: 240px; }
.pdp-exercice .titre { font-size: 14px; font-weight: 700; color: var(--et-muted); }
.pdp-exercice.est-pret .titre { color: var(--et-succes-ink); }
.pdp-exercice.est-clos .titre { color: var(--et-ink); }
.pdp-exercice .detail { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   LES TROUS, et leur coût.

   Un trou ne se corrige pas en le regardant : chacun porte son geste. Et le geste
   PRINCIPAL est le découpage mensuel — combler 122 jours par un bloc unique casserait
   tous les cumuls hebdomadaires et mensuels, et la fenêtre de plafonnement des heures
   supplémentaires avec eux. La période unique est reléguée en second choix. */
.pdp-trous { background: var(--et-surface); border: 1px solid var(--et-danger-bord); }

.pdp-trous .tete {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: var(--et-danger-badge-bg);
    border-bottom: 1px solid var(--et-danger-bord);
    font-size: 14px;
    font-weight: 700;
    color: var(--et-danger-ink);
}

.pdp-trous .corps { padding: 4px 18px 12px; }

.pdp-trous .ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--et-rang);
}

.pdp-trous .ligne:last-child { border-bottom: none; }

.pdp-trous .txt { flex: 1 1 280px; min-width: 240px; }

.pdp-trous .bornes {
    font-family: var(--et-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--et-ink);
}

.pdp-trous .detail { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }

/* Le coût est en rouge ET en mono : c'est un chiffre, et c'est lui qui parle. */
.pdp-trous .cout {
    margin-top: 3px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-danger-ink);
}

/* ---------------------------------------------------------------------------
   LES CARTES DE PÉRIODE (vue cockpit).

   Une période est la maille de tout le reste : elle se génère, se clôture, se transmet à
   la paie. La carte porte donc ses cinq mesures, son avancement de préparation et son
   pied de génération — ce qu'une ligne de tableau ne peut pas dire. */
.pdp-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    padding: 14px 18px 18px;
}

.pdp-carte {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    display: flex;
    flex-direction: column;
}

/* La période par défaut se cerne, parce que c'est celle sur laquelle tous les autres
   écrans s'ouvrent : la retrouver dans une grille de douze cartes doit être immédiat. */
.pdp-carte.est-defaut { border-color: var(--et-form-blue); }

.pdp-carte-tete {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}

.pdp-carte.est-defaut .pdp-carte-tete { background: var(--et-info-bg); }

.pdp-carte-tete .txt { flex: 1; min-width: 0; }
.pdp-carte-tete .nom { font-size: 14px; font-weight: 700; color: var(--et-ink); }

/* Le point de la pastille de statut : il REDOUBLE la teinte, pour qui ne la distingue pas.
   Il prend sa couleur du texte de la pastille — donc de la classe .bg-*-subtle posée par
   la page, sans qu'un jeton de plus soit à tenir. */
.pdp-point {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}
.pdp-carte.est-cloturee .pdp-carte-tete .nom { color: var(--et-muted); }

.pdp-carte-tete .bornes {
    margin-top: 2px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}

/* --- Les mesures : trois colonnes, deux rangées ------------------------- */
.pdp-mesures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--et-rang);
}

.pdp-mesure {
    padding: 11px 14px;
    border-right: 1px solid var(--et-rang);
    border-top: 1px solid var(--et-rang);
}

.pdp-mesure.est-alerte { background: var(--et-avertissement-bg); }

.pdp-mesure .lbl {
    font-size: 12px;
    color: var(--et-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-mesure .val {
    margin-top: 4px;
    font-family: var(--et-font-mono);
    font-size: 15px;
    font-weight: 500;
    color: var(--et-ink);
}

.pdp-mesure .val.est-vide    { color: var(--et-inerte); }
.pdp-mesure .val.est-danger  { color: var(--et-danger-ink); }
.pdp-mesure .val.est-ok      { color: var(--et-succes-ink); }
.pdp-mesure .val.est-info    { color: var(--et-form-blue-d); }

.pdp-mesure .sous {
    margin-top: 2px;
    font-size: 12px;
    color: var(--et-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- L'avancement de préparation ---------------------------------------- */
.pdp-avancement { padding: 12px 16px; border-bottom: 1px solid var(--et-rang); }

.pdp-avancement .rang { display: flex; align-items: baseline; gap: 8px; }
.pdp-avancement .lbl { flex: 1; min-width: 0; font-size: 12px; color: var(--et-muted); }

.pdp-avancement .pct {
    flex: none;
    font-family: var(--et-font-mono);
    font-size: 12px;
}

.pdp-jauge {
    margin-top: 6px;
    position: relative;
    height: 17px;
    background: var(--et-rang);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.pdp-jauge > span { flex: none; height: 100%; }

.pdp-avancement .methode {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-faint);
}

/* Trois teintes, un seul sens : où en est la préparation de la période. */
.est-avct-plein   { color: var(--et-succes-ink); }
.est-avct-partiel { color: var(--et-avertissement-ink); }
.est-avct-faible  { color: var(--et-danger-ink); }
.pdp-jauge > span.est-avct-plein   { background: var(--et-succes); }
.pdp-jauge > span.est-avct-partiel { background: var(--et-avertissement); }
.pdp-jauge > span.est-avct-faible  { background: var(--et-danger); }

/* --- Le pied de carte --------------------------------------------------- */
.pdp-carte-pied {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    row-gap: 8px;
    flex-wrap: wrap;
    padding: 11px 16px;
    background: var(--et-surface-2);
}

.pdp-carte-pied .txt {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 12px;
    color: var(--et-faint);
}

/* ---------------------------------------------------------------------------
   CE QUE LA PÉRIODE COMMANDE.

   Quatre points, parce que la question « à quoi sert cet écran » se pose, et que la
   réponse n'est pas évidente depuis une liste de dates. */
.pdp-effets { padding: 4px 18px 12px; }

.pdp-effets .ligne {
    display: flex;
    align-items: baseline;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--et-rang);
}

.pdp-effets .ligne:last-child { border-bottom: none; }
.pdp-effets .puce { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--et-form-blue); }
.pdp-effets .titre { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.pdp-effets .detail { margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   LA LÉGENDE DU TABLEAU — ce que les colonnes ne peuvent pas dire d'elles-mêmes. */
.pdp-legende {
    padding: 11px 18px;
    border-top: 1px solid var(--et-hairline);
    font-size: 12px;
    line-height: 1.55;
    color: var(--et-faint);
}

/* ---------------------------------------------------------------------------
   LES PASTILLES DE CADENCE de la fiche (Mois civil · Du 26 au 25 · Libre).

   Ce n'est pas un champ de saisie mais un RACCOURCI qui pose les deux bornes : une paie
   arrêtée au 25 se paramètre en période du 26 au 25, et personne ne devrait avoir à
   calculer cette date à la main tous les mois. */
/* LES CHIPS DE CADENCE SONT DEVENUES LES PUCES DU GABARIT (.mx-puce,
   modele-erp.css §11.x) le 2026-09-08. C'est leur géométrie qui a été retenue
   là-haut — angles droits, 28 px — parce qu'elle était la seule des trois copies
   du motif à suivre la charte ; les deux autres vivaient dans le modèle de fiche
   hérité (.fx-puce) et dans ecran-affectations.css, qui habillait sous un
   sélecteur non préfixé la puce de tous les écrans. Rien ne reste ici. */

/* ---------------------------------------------------------------------------
   LA VUE « SUIVI » — une rangée par période, l'avancement en file de jalons.

   Elle NE REMPLACE PAS le cockpit. Les deux répondent à des questions
   différentes : les cartes à « combien y en a-t-il et dans quel état », les
   rangées à « où en suis-je ». C'est la seconde qu'on pose en ouvrant l'écran,
   d'où la vue par défaut. */
.pdp-suivi { padding: 4px 0 0; }

/* --- Groupes repliables : À traiter, Clôturées ---------------------------
   DEUX groupes, pas un par statut : trois colonnes dont deux à une ligne ne
   rangent rien, elles fragmentent. */
.pdp-suivi-grp {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.pdp-suivi-grp > .bi { flex: none; font-size: 12px; color: var(--et-muted); transition: transform .15s; }
.pdp-suivi-grp.est-replie > .bi { transform: rotate(-90deg); }

.pdp-suivi-grp .lb {
    flex: none;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--et-table-head-encre);
}

.pdp-suivi-grp .ct { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.pdp-suivi-grp .filet { flex: 1; min-width: 20px; height: 1px; background: var(--et-hairline); }

/* --- La rangée ----------------------------------------------------------- */
.pdp-suivi-ligne {
    display: flex;
    align-items: center;
    gap: 16px;
    row-gap: 12px;
    flex-wrap: wrap;
    padding: 13px 18px 13px 15px;
    border-top: 1px solid var(--et-rang);
    border-left: 3px solid transparent;
    background: var(--et-surface);
}

.pdp-suivi-ligne:hover { background: var(--et-surface-3); }

/* Le filet bleu marque la période PAR DÉFAUT, pas un état d'avancement : deux
   sens sur un même repère et l'œil ne saurait plus lequel il lit. */
.pdp-suivi-ligne.est-defaut { border-left-color: var(--et-form-blue); background: var(--et-info-bg); }

.pdp-suivi-ligne .ident { flex: 1 1 250px; min-width: 200px; }
.pdp-suivi-ligne .l1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pdp-suivi-ligne .nom { font-size: 17px; font-weight: 600; color: var(--et-ink); }
.pdp-suivi-ligne .nom.est-solde { color: var(--et-muted); }
.pdp-suivi-ligne .l2 { margin-top: 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pdp-suivi-ligne .bornes { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

.pdp-suivi-ligne .eff {
    padding: 1px 8px;
    border: 1px solid var(--et-filet-fort);
    font-size: 12px;
    color: var(--et-muted);
    white-space: nowrap;
}

/* --- Les décomptes : la valeur en mono, sa nature dessous ---------------- */
.pdp-suivi-ligne .mesure { flex: 0 1 150px; min-width: 120px; }

.pdp-suivi-ligne .mesure .v {
    font-family: var(--et-font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--et-ink);
}

.pdp-suivi-ligne .mesure .v.est-negatif { color: var(--et-danger-ink); }
.pdp-suivi-ligne .mesure .v.est-lien    { color: var(--et-form-blue-d); }
.pdp-suivi-ligne .mesure .v.est-inerte  { color: var(--et-inerte); }

.pdp-suivi-ligne .mesure .l {
    margin-top: 2px;
    font-size: 12px;
    color: var(--et-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- La file de jalons ---------------------------------------------------
   DEUX DEMI-SEGMENTS PAR JALON, et non un trait pleine largeur : le premier n'a
   rien à sa gauche, le dernier rien à sa droite. Un trait continu laisse après
   « Clôturée » une queue pendante, qui paraît relier le jalon à une étape
   absente.

   Et le segment ne se colore qu'entre deux étapes RÉELLEMENT atteintes — sinon
   la couleur déborde d'un jalon franchi vers un jalon qui ne l'est pas, et
   annonce une avance qui n'existe pas. */
.pdp-suivi-ligne .jalons { flex: 0 0 auto; display: flex; align-items: flex-start; padding: 0 4px; }
.pdp-suivi-ligne .jalon { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 74px; }
.pdp-suivi-ligne .jalon .rail { position: relative; width: 100%; height: 14px; display: grid; place-items: center; }

.pdp-suivi-ligne .jalon .avant,
.pdp-suivi-ligne .jalon .apres { position: absolute; top: 6.5px; height: 2px; background: var(--et-hairline); }
.pdp-suivi-ligne .jalon .avant { left: 0; right: 50%; }
.pdp-suivi-ligne .jalon .apres { left: 50%; right: 0; }

.pdp-suivi-ligne .jalon.est-premier .avant,
.pdp-suivi-ligne .jalon.est-dernier .apres { background: transparent; }

.pdp-suivi-ligne .jalon .puce {
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--et-filet-fort);
    border: 2px solid var(--et-surface);
    box-shadow: 0 0 0 1px var(--et-filet-fort);
}

/* Étape franchie : le vert positif. Sur une période CLÔTURÉE la file entière
   passe en ardoise — l'affaire est classée, elle n'a plus à attirer l'œil comme
   une réussite récente. */
.pdp-suivi-ligne .jalon.est-franchi .puce { background: var(--et-succes); box-shadow: 0 0 0 1px var(--et-succes); }
.pdp-suivi-ligne .jalon.est-solde .puce   { background: var(--et-muted);  box-shadow: 0 0 0 1px var(--et-muted); }

.pdp-suivi-ligne .jalon.relie-avant.est-franchi .avant,
.pdp-suivi-ligne .jalon.relie-apres.est-franchi .apres { background: var(--et-succes); }
.pdp-suivi-ligne .jalon.relie-avant.est-solde .avant,
.pdp-suivi-ligne .jalon.relie-apres.est-solde .apres { background: var(--et-muted); }

.pdp-suivi-ligne .jalon .lb { font-size: 12px; color: var(--et-inerte); white-space: nowrap; }
.pdp-suivi-ligne .jalon.est-franchi .lb,
.pdp-suivi-ligne .jalon.est-solde .lb { color: var(--et-muted); }
.pdp-suivi-ligne .jalon.est-courant .lb { font-weight: 600; color: var(--et-ink); }

/* --- Les actes : UN SEUL geste, plus le détail --------------------------
   Une file de boutons ne dit plus lequel est le prochain. */
.pdp-suivi-ligne .actes { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pdp-suivi-ligne .actes .mx-btn { height: 34px; }

.pdp-suivi-kebab {
    width: 30px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--et-muted);
    cursor: pointer;
}

.pdp-suivi-kebab:hover { background: var(--et-rang); color: var(--et-ink); }

/* Sous 1240 px la file passe sous les décomptes : la comprimer rendrait les
   libellés d'étape illisibles, et c'est eux qu'on vient lire. */
@media (max-width: 1240px) {
    .pdp-suivi-ligne .jalons { flex: 1 0 100%; padding: 2px 0 0; }
    .pdp-suivi-ligne .actes { margin-left: 0; }
}

/* ============================================================================
   LA FICHE DE PÉRIODE, AU GABARIT (2026-09-08)

   La modale est celle du gabarit (.mx-voile > .mx-modale-cadre, modele-erp.css §6) ;
   ce bloc ne fait que ce qu'aucune règle générale ne peut faire à sa place — sa
   largeur, et les trois raccords que .reforg-modale a déjà décrits pour les fiches
   des paramètres d'organisation. Rien d'autre : tout ce qui se répéterait ici est
   déjà dans le gabarit.
   ============================================================================ */

/* LA LARGEUR EST CELLE DU CRAN COURANT (2026-09-10) — 660 px. Cette feuille
   posait 620 « et non les 660 du gabarit », pour quatre champs et deux dates
   courtes : quarante pixels, contre une fenêtre qui ne ressemble à aucune
   autre. L'échelle tranche dans l'autre sens, et la fiche n'y perd rien qui se
   voie. */

/* La bande de faits est collée à la tête : c'est le filet de 3 px de l'en-tête de
   modale qui sépare, celui de la bande ferait double. */
.pdp-modale .mx-faits { border-top: 0; }

/* Les deux règles du bandeau d'état en corps de modale sont au GABARIT
   (modele-erp.css §6) : elles ne dépendent pas de cet écran. */