/* ============================================================================
   EASYTIME — PLANNING (.plg-*)

   POURQUOI CETTE FEUILLE EXISTE, ET POURQUOI ELLE N'EST PLUS DANS LA COQUILLE

   Ces 527 lignes vivaient dans easytime-shell.css. Elles n'y avaient jamais eu
   leur place : la règle du dépôt est explicite — « un nouvel écran obtient sa
   propre feuille et sa propre ligne de chargement dans App.razor » — et
   easytime-periode.css, déposée la veille (et retirée depuis avec son bandeau),
   énonçait le même motif dans ses propres termes :

     « Elle ne va PAS dans easytime-shell.css non plus : cette feuille-là est la
       coquille (barre, rail, liste), et le bandeau vit DANS la page. »

   Le planning vit dans la page, exactement au même titre.

   CE QUE LE RANGEMENT COÛTAIT, ET QUI N'EST PAS UNE QUESTION DE PROPRETÉ
   easytime-shell.css est le périmètre où tools/couleurs-en-dur.ps1 BLOQUE, parce
   qu'une couleur y touche les vingt mises en page d'un coup. Sur les 194 couleurs en
   dur qu'y comptait le lot du 2026-09-03, QUATRE-VINGT-TROIS étaient en réalité
   la palette de cet écran — bloquantes pour cette seule raison de rangement.
   Elles sont désormais dans une feuille d'écran, où le garde est informatif.

   La coquille perd aussi 527 lignes sur sa clé de cache : jusqu'ici, toucher un
   détail du planning invalidait la feuille que les vingt mises en page chargent.

   ELLE SERT NEUF ÉCRANS — Planning, ses sept vues (Jour, Semaine, Mois, Salarié,
   Charge, Liste, Contrôles) et AffectationCycle. C'est ce qui en fait une feuille
   de MODULE et non une feuille d'écran : posée dans la feuille du premier écran
   porté, le neuvième aurait dépendu du premier pour s'afficher.

   Le contenu est déplacé SANS UNE MODIFICATION — un git mv de bloc. Les couleurs
   qui y restent en dur sont les sept documentées en section 42 de
   docs/modeles/design_handoff_easycompta/PORTAGE.md ; elles attendent une
   décision, pas un rangement.
   ============================================================================ */

/* ============================================================================
   PLANNING (.plg-*) — transcription de la passation « design_handoff_planning »
   (Projet EasyTime, Design 3).

   POURQUOI DES CLASSES ET NON LES STYLES EN LIGNE DE LA MAQUETTE
   La passation livre ses composants avec les styles en ligne, « pour rester fidèle
   à la maquette ». Fidèle, ils le sont — mais chaque couleur y est écrite dix fois,
   et le thème sombre n'a alors aucune prise : un fond #fff en ligne reste blanc
   quel que soit le thème. Les jetons de la maquette passent donc ici, et les seuls
   styles restés en ligne sont ceux qui DÉPENDENT DE LA DONNÉE — couleur d'un poste,
   densité du fond d'un créneau selon son écart au besoin.

   GÉOMÉTRIE reprise de la passation : angles droits sur les cartes du planning,
   10px sur les boutons et les encarts, pastilles en pilule, boutons de barre à
   38px, cellules de grille à 34px, gouttière de 2px entre les blocs.
   ============================================================================ */

.plg-titre-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pastille d'état : ambre en brouillon, verte une fois publié. */
.plg-statut {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
}
.plg-statut.est-publie { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.plg-statut .plg-point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Barre d'actions ------------------------------------------------------- */
.plg-barre { display: flex; align-items: center; gap: 8px; row-gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Étiquette du sélecteur de vues. Même registre que les surtitres du panneau et des
   indicateurs — mono, capitales, interlettrage large : c'est du MOBILIER, pas une
   donnée, et la charte les distingue ainsi partout dans l'écran. */
.plg-barre-lbl {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-muted);
    white-space: nowrap; margin-right: 2px;
}

.plg-vues { display: flex; border: 1px solid var(--et-form-border); }
.plg-vue-btn {
    height: 38px; padding: 0 12px; border: none; border-right: 1px solid var(--et-form-border);
    background: var(--et-surface); font-size: 13px; font-weight: 500; font-family: inherit;
    color: var(--et-ink); cursor: pointer;
}
.plg-vues .plg-vue-btn:last-child { border-right: none; }
.plg-vue-btn:hover { background: var(--et-surface-2); }
.plg-vue-btn.est-active { background: var(--et-table-head); color: var(--et-sur-ardoise-plein); font-weight: 600; }
.appgrid[data-theme="dark"] .plg-vue-btn.est-active { background: #2c4373; }

.plg-btn, .plg-cta {
    height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px;
    border-radius: 0; font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; text-decoration: none;
}
.plg-btn { background: var(--et-surface); border: 1px solid var(--et-form-border); color: var(--et-ink); }
.plg-btn:hover { border-color: var(--et-action); color: var(--et-action); }
.plg-btn-danger { color: var(--et-danger-ink); }
.plg-btn-danger:hover { border-color: var(--et-danger); color: var(--et-danger-ink); }
.plg-cta { background: var(--et-action); border: none; color: var(--et-sur-aplat); padding: 0 15px; }
.plg-cta:hover:not(:disabled) { background: var(--et-action-d); }
.plg-cta:disabled { background: #F4B489; cursor: not-allowed; }

/* --- Colonne de gauche ----------------------------------------------------- */
/* La période et le filtre partagent la colonne. Les blocs de contenu du panneau sont
   séparés d'une gouttière de 2 px — ils forment un seul bandeau. */
.plg-panneau { display: flex; flex-direction: column; gap: 2px; }
/* La période, elle, s'en détache. Les 2 px la collaient à la tête du filtre, ce qui était
   voulu tant que les deux portaient la MÊME tête. Depuis ComboPeriode, la période est une
   COMMANDE et le filtre un PANNEAU : sans gouttière, la combo aurait l'air d'appartenir
   au filtre et d'en restreindre le contenu. */
.plg-panneau > .cbp-cadre { margin-bottom: 10px; }

/* --- Colonne de contenu ---------------------------------------------------- */
.plg-contenu { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.plg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
@media (max-width: 1100px) { .plg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plg-kpi { background: var(--et-surface); border: 1px solid var(--et-form-border); border-left-width: 3px; padding: 11px 14px; }
.plg-kpi-lbl {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-muted);
}
.plg-kpi-bas { margin-top: 6px; display: flex; align-items: baseline; gap: 7px; }
.plg-kpi-val { font-family: var(--et-font-mono); font-size: 20px; font-weight: 500; }
.plg-kpi-detail { font-size: 12px; color: var(--et-muted); }

.plg-carte { background: var(--et-surface); border: 1px solid var(--et-form-border); }
.plg-defile { overflow-x: auto; }

.plg-tete {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--et-tint); border-bottom: 1px solid var(--et-hairline);
}
.plg-tete-mince { padding: 8px 12px; }
.plg-tete-titre { font-size: 14px; font-weight: 600; color: var(--et-form-blue-encre); }
/* ENCRE SOMBRE MANQUANTE — corrige le 2026-08-15, defaut PREEXISTANT sans rapport avec
   la bascule des en-tetes : releve en mesurant les surfaces voisines, pas en les
   modifiant. --et-form-blue est le marine de MARQUE ; il ne bascule pas par theme (il
   habille des bandeaux a texte blanc). Pose sur un bandeau que le theme sombre assombrit,
   il donnait du #1B2A5E sur #1F2D44, soit 1,01:1 — un titre litteralement invisible.
   Le bandeau avait bien sa regle sombre, mais elle ne reprenait que le FOND.
   #9FBEF2 n'est pas un choix nouveau : c'est deja l'encre sombre de .plg-ctrl-tete,
   le bandeau de meme dessin qui, lui, l'avait. On le rejoint plutot que d'inventer
   une teinte. Mesure sur le fond reel : 7,32:1. */
.plg-tete-droite { margin-left: auto; font-size: 12px; color: var(--et-muted); }

.plg-note {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 14px; background: var(--et-info-bg); border: 1px solid var(--et-info-bord);
    font-size: 13px; color: var(--et-info);
}

.plg-vide { padding: 46px 24px; text-align: center; color: var(--et-muted); font-size: 13px; }
.plg-vide-titre { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.plg-vide-txt { margin-top: 6px; }

/* --- Grilles (Mois, Semaine, Charge, Liste) -------------------------------- */
.plg-tbl { border-collapse: collapse; font-size: 12px; min-width: 100%; }
/* EN-TETE DE GRILLE — aligne sur --et-table-head le 2026-08-15, troisieme et derniere
   famille de tableaux a rejoindre l'anthracite.
   La valeur seule ne suffisait pas ici, c'est ce qui a fait traiter cette famille a
   part : l'en-tete de planning est une COMPOSITION, pas une bande unie.
     - Ses deux extremites (.plg-col-nom a gauche, .plg-col-h a droite) sont des
       colonnes FIGEES au defilement, peintes en --et-surface ; comme elles sont
       declarees plus bas que .plg-th, elles gagnaient a specificite egale et
       trouaient la bande de blanc a chaque bout. Invisible sur le bleu pale, criant
       sur l'anthracite. Les regles d'intersection ci-dessous les rattachent a la
       tete — elles ne visent QUE l'en-tete, les memes classes servant dans le corps
       ou elles doivent rester sur le fond de surface.
     - Les colonnes de WEEK-END etaient un retrait CLAIR (#F1F4F9) : sur fond sombre
       le retrait doit se prendre dans l'autre sens, d'ou le pendant fonce et une
       encre attenuee (5,38:1, au-dessus de AA pour ces 10px).
     - Les filets internes passent en voile blanc : un #C9D6E8 en travers de
       l'anthracite aurait raye la bande au lieu de la diviser.
   NON TOUCHE, et c'est deliberé : --flt-tete-fond continue d'habiller .plg-tete,
   .plg-ctrl-tete, .plg-impact-tete, .plg-pied-total et la ligne choisie
   .plg-sal.est-choisi. Ce sont du MOBILIER et un ETAT, pas des tetes de colonnes —
   le meme partage que .tbl-barre / .tbl-apercu-tete cote Tableau<T>. Les basculer
   aurait pose des bandeaux sombres a encre --et-form-blue (bleu sur anthracite) et
   fait passer la selection d'un salarie pour un en-tete. */
.plg-th {
    padding: 7px 10px; 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: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-sur-ardoise-plein);
    white-space: nowrap; text-align: left;
}
/* Meme valeur qu'en clair : l'anthracite vaut dans les deux themes, c'est tout son
   interet. La regle reste ecrite pour neutraliser l'ancienne teinte de ce bloc. */
.appgrid[data-theme="dark"] .plg-th {
    background: var(--et-table-head); border-bottom-color: var(--et-table-head-fonce); color: var(--et-sur-ardoise-plein);
}
/* Extremites figees : uniquement quand elles portent AUSSI .plg-th, donc en en-tete. */
.plg-th.plg-col-nom, .plg-th.plg-col-h,
.appgrid[data-theme="dark"] .plg-th.plg-col-nom, .appgrid[data-theme="dark"] .plg-th.plg-col-h {
    background: var(--et-table-head); color: var(--et-sur-ardoise-plein);
    border-right-color: var(--et-filet-ardoise); border-left-color: var(--et-filet-ardoise);
}
.plg-th-jour { width: 30px; padding: 5px 0; text-align: center; letter-spacing: 0; }
.plg-th-sem { padding: 6px 8px; text-align: center; letter-spacing: 0; }
.plg-th-jour.est-we, .plg-th-sem.est-we,
.appgrid[data-theme="dark"] .plg-th-jour.est-we, .appgrid[data-theme="dark"] .plg-th-sem.est-we {
    background: var(--et-table-head-fonce); color: var(--et-sur-ardoise);
}
.plg-th-lettre { font-size: 12px; font-weight: 500; }
.plg-th-jsem { font-size: 12px; font-weight: 600; }
.plg-th-num { margin-top: 2px; font-size: 12px; font-weight: 500; }

/* Première colonne et colonne d'heures FIGÉES au défilement horizontal : sur
   trente et un jours, le nom du salarié sort de l'écran avant la fin du mois, et
   une case de poste sans nom en face ne veut plus rien dire. */
.plg-col-nom {
    position: sticky; left: 0; z-index: 2; padding: 5px 12px; white-space: nowrap;
    background: var(--et-surface); border-right: 1px solid var(--et-hairline);
}
thead .plg-col-nom, tfoot .plg-col-nom { z-index: 3; }
.plg-col-h {
    padding: 5px 12px; text-align: right; white-space: nowrap;
    background: var(--et-surface); border-left: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
}
.plg-nom { font-weight: 600; font-size: 13px; color: var(--et-ink); }
.plg-detail { margin-top: 1px; font-size: 12px; color: var(--et-muted); }
.plg-detail-cell { font-size: 12px; color: var(--et-muted); }
.plg-mono { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); white-space: nowrap; }
.plg-num { text-align: right; }

.plg-tbl tbody tr:nth-child(even) .plg-col-nom,
.plg-tbl tbody tr:nth-child(even) .plg-col-h { background: var(--et-surface-2); }
.plg-tbl tbody td { border-bottom: 1px solid var(--et-hairline); }

.plg-cell {
    padding: 0; height: 34px; text-align: center; border-right: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    color: var(--et-muted); cursor: default;
}
.plg-cell.est-conge { background: #FBF0D9; color: #8A5B0B; }
.plg-cell.est-ferie { background: var(--et-surface-2); color: var(--et-faint); }

.plg-cell-sem { padding: 6px 8px; vertical-align: top; border-right: 1px solid var(--et-hairline); }
.plg-sem-plage { font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; }
.plg-sem-nom { margin-top: 1px; font-size: 12px; opacity: .85; }
.plg-sem-repos { font-size: 12px; color: var(--et-muted); }

.plg-pied-lbl { font-weight: 700; padding: 8px 12px; background: var(--et-surface-2); border-top: 2px solid var(--et-info-bord); }
.plg-pied-n {
    padding: 8px 0; text-align: center; background: var(--et-surface-2); border-top: 2px solid var(--et-info-bord);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; color: var(--et-form-blue-encre);
}
.plg-pied-n.est-vide { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.plg-pied-n.est-faible { color: var(--et-avertissement-ink); }
.plg-pied-total {
    background: var(--et-tint); border-top: 2px solid var(--et-info-bord);
    font-weight: 700; color: var(--et-form-blue-encre);
}
/* color ajoute le 2026-08-15 : la regle ne reprenait que le fond, laissant le total en
   marine de marque sur fond assombri (meme defaut prexistant que .plg-tete-titre). */

/* --- Vue Jour : frise horaire --------------------------------------------- */
.plg-frise-defile { overflow-x: auto; }
.plg-frise { min-width: 720px; padding: 0 14px 14px; }
.plg-frise-graduation, .plg-piste-ligne { display: flex; align-items: stretch; gap: 10px; }
.plg-frise-graduation { height: 26px; }
.plg-frise-nom { flex: none; width: 180px; padding: 4px 0; }
.plg-frise-axe, .plg-piste { position: relative; flex: 1; min-width: 0; }
.plg-frise-h {
    position: absolute; top: 8px; transform: translateX(-50%);
    font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}
.plg-piste-ligne { border-top: 1px solid var(--et-hairline); padding: 5px 0; }
.plg-piste { height: 30px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); border-radius: 0; }
.plg-piste-repere { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--et-hairline); }
.plg-seg {
    position: absolute; top: 3px; bottom: 3px; border: 1px solid; border-radius: 0;
    display: flex; align-items: center; padding: 0 6px; overflow: hidden;
}
/* La reprise après minuit est hachurée : sans elle, deux segments de la même
   couleur sur la même piste se liraient comme deux vacations du jour. */
.plg-seg.est-reprise { border-style: dashed; }
.plg-seg-lbl { font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.plg-piste-h {
    flex: none; width: 62px; align-self: center; text-align: right;
    font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink);
}

/* --- Vue Salarié ----------------------------------------------------------- */
.plg-salarie { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
@media (max-width: 1100px) { .plg-salarie { grid-template-columns: minmax(0, 1fr); } }
.plg-liste-sal { border-right: 1px solid var(--et-hairline); display: flex; flex-direction: column; min-height: 0; }
.plg-liste-sal-corps { overflow-y: auto; max-height: 520px; }
.plg-sal {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
    padding: 7px 12px; border: none; border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface); text-align: left; font-family: inherit; cursor: pointer;
}
.plg-sal:hover { background: var(--et-surface-2); }
.plg-sal.est-choisi { background: var(--et-tint); box-shadow: inset 3px 0 0 var(--et-action); }

.plg-cal { min-width: 0; }
.plg-cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 10px; }
.plg-cal-jsem {
    padding: 4px 0; text-align: center; font-family: var(--et-font-mono);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--et-muted);
}
.plg-cal-case {
    min-height: 62px; padding: 5px 6px; border: 1px solid var(--et-hairline);
    background: var(--et-surface); font-size: 12px;
}
.plg-cal-case.est-hors { border: none; background: transparent; }
.plg-cal-case.est-we { background: var(--et-surface-2); }
.plg-cal-num { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.plg-cal-code { margin-top: 3px; font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; }
.plg-cal-plage { margin-top: 1px; font-size: 12px; opacity: .8; }

/* --- Vue Charge ------------------------------------------------------------ */
/* .plg-legende NE GARDE QUE SA PLACE dans la rangée de tête : le reste — la
   disposition, la taille, l'encre atténuée — est celui du gabarit (.mx-legende,
   modele-erp.css §11.x), que l'élément porte aussi. */
.plg-legende { margin-left: auto; }
/* .plg-pastille EST PARTIE au gabarit (.mx-marque, modele-erp.css §11.x) le
   2026-09-08 : elle ne portait que la géométrie, et les trois couleurs de la
   légende étaient écrites dans la page. */
.plg-creneau-lbl { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-form-blue-encre); }
.plg-charge-cell {
    padding: 0; height: 36px; text-align: center; border-right: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
}
.plg-besoin { text-align: right; }
.plg-besoin-champ {
    width: 58px; height: 28px; padding: 0 6px; text-align: right;
    border: 1px solid var(--et-form-border); border-radius: 0;
    background: var(--et-surface); color: var(--et-form-text);
    font-family: var(--et-font-mono); font-size: 12px;
}
.plg-besoin-champ:focus { outline: none; border-color: var(--et-action); }

/* --- Vue Liste -------------------------------------------------------------
   DENSITÉ : la hauteur d'une rangée est celle de sa cellule la plus haute. Deux
   d'entre elles la poussaient bien au-delà du texte — le salarié écrit sur deux
   lignes, et la pilule du poste suivie de son intitulé, qui repassait à la ligne
   dès que la colonne se resserrait. C'est là que la correction porte ; le padding
   ne vient qu'ensuite, et ne pouvait pas suffire seul.

   Rien n'est retiré : sur un mois et cinquante salariés, c'est une liste qu'on
   parcourt à la recherche d'une anomalie, et une colonne absente oblige à changer
   d'écran pour la retrouver. */
.plg-tbl-liste td { padding: 3px 10px; vertical-align: middle; line-height: 1.25; }
.plg-tbl-liste .plg-th { padding: 5px 10px; }

/* Le salarié tient sur UNE ligne : matricule discret devant, nom ensuite. */
.plg-cell-sal { white-space: nowrap; }
.plg-mat {
    font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
    margin-right: 7px;
}
.plg-tbl-liste .plg-nom { display: inline; font-size: 12px; }
.plg-tbl-liste .plg-detail { display: inline; margin-top: 0; }

/* Le poste : un point de couleur, son code, son intitulé — tout sur la ligne. */
.plg-cell-poste { white-space: nowrap; }
.plg-point-poste {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
.plg-code-poste {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; margin-right: 6px;
}

/* La tête reste visible : une liste dense n'a d'intérêt que si l'on peut la
   parcourir sans perdre le nom des colonnes. */
.plg-defile-y { max-height: 62vh; overflow-y: auto; }
.plg-tbl-liste thead th { position: sticky; top: 0; z-index: 2; }

.plg-jeton {
    display: inline-block; padding: 2px 7px; border-radius: 999px;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 600;
}
/* Pilule allégée : à 2px de padding elle redevenait le plancher de la rangée une
   fois les deux autres cellules corrigées. */
.plg-etat {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--et-info-bg); color: var(--et-info);
}
.plg-etat.est-passee { background: var(--et-succes-bg); color: var(--et-succes-ink); }

/* --- Légende des postes ---------------------------------------------------- */
.plg-legende-postes {
    display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 9px 14px;
    background: var(--et-surface); border: 1px solid var(--et-form-border);
}
.plg-legende-nom { font-size: 12px; color: var(--et-muted); margin-right: 8px; }

/* --- Contrôles avant publication ------------------------------------------ */
.plg-ctrl { background: var(--et-surface); border: 1px solid var(--et-form-border); }
.plg-ctrl-tete {
    display: flex; align-items: center; gap: 9px; padding: 9px 14px;
    background: var(--et-tint); border-bottom: 1px solid var(--et-info-bord);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--et-form-blue-encre);
}
.plg-ctrl-n {
    margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--et-action); color: var(--et-sur-aplat); font-size: 12px; text-align: center;
}
.plg-ctrl-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 14px;
    border-bottom: 1px solid var(--et-hairline); border-left: 3px solid transparent;
}
.plg-ctrl-item:last-child { border-bottom: none; }
/* La barre de gauche est une MARQUE, pas une encre : le rouge et le bleu d'état y
   restent tels quels (4,83:1 et mieux au seuil graphique de 3:1), l'ambre seul prend
   --et-avertissement-mark — un ambre pur rend 2,15:1 et ne passe pas. */
.plg-ctrl-item.est-bloquant { border-left-color: var(--et-danger); background: var(--et-danger-badge-bg); }
.plg-ctrl-item.est-avert { border-left-color: var(--et-avertissement-mark); background: var(--et-avertissement-bg); }
.plg-ctrl-item.est-info { border-left-color: var(--et-info); }
.plg-ctrl-txt { flex: 1; min-width: 0; }
.plg-ctrl-titre { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.plg-ctrl-detail { margin-top: 2px; font-size: 12px; color: var(--et-muted); }
.plg-ctrl-val {
    flex: none; font-family: var(--et-font-mono); font-size: 12px;
    font-weight: 600; color: var(--et-ink);
}

/* ----------------------------------------------------------------------------
   FICHE PLANIFICATION — compléments au modèle de fiche (.fx-*).

   Le modèle porte déjà l'habillage : bandeau, sections, champs, pied. Ne restent
   ici que les briques propres à cet écran — la colonne d'impact, l'aperçu du
   cycle, les boutons de décalage et les trois encarts d'arbitrage. Elles vivent
   dans le préfixe .plg-* du module, et non dans fiche.css : une colonne d'impact
   n'a de sens que pour une affectation de cycle.
   ---------------------------------------------------------------------------- */

/* Deux colonnes : le formulaire à gauche, l'impact à droite. Sous 900px la colonne
   passe dessous plutôt que de comprimer les deux — un formulaire à 140px de large
   ne se remplit pas. */
.plg-fiche-corps { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; align-items: start; }
.plg-fiche-form { min-width: 0; }
.plg-fiche-cote { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1100px) { .plg-fiche-corps { grid-template-columns: minmax(0, 1fr); } }

/* --- Décalage : quatre valeurs, pas un champ libre ------------------------- */
.plg-decalages { display: flex; gap: 8px; }
.plg-decalage {
    flex: 1; height: 38px; border: 1px solid var(--et-form-border); background: var(--et-surface);
    font-family: var(--et-font-mono); font-size: 13px; color: var(--et-ink); cursor: pointer;
}
.plg-decalage:hover:not(:disabled) { border-color: var(--et-action); }
.plg-decalage.est-actif { border-color: var(--et-action); background: #FDF1E8; color: #B34E08; font-weight: 600; }
.plg-decalage:disabled { opacity: .55; cursor: not-allowed; }
.appgrid[data-theme="dark"] .plg-decalage.est-actif { background: rgba(242,108,22,.16); color: #F0A860; }

/* --- Encarts d'arbitrage --------------------------------------------------- */
/* Vert : la règle qui décide de tout conflit, affichée en clair dans le formulaire.
   Bleu : l'astuce 3×8, en retrait. Ambre/bleu : l'avertissement calculé. */
.plg-regle, .plg-astuce, .plg-conflit {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px;
    font-size: 13px; line-height: 1.55;
}
/* La barre verte valait #0E9F7E, soit 2,97:1 sur son propre fond — SOUS le seuil
   graphique de 3:1. --et-succes rend 3,16:1 : la substitution corrige une marque
   qui ne passait pas, elle ne fait pas que renommer. */
.plg-regle { background: var(--et-succes-bg); border-left: 3px solid var(--et-succes); color: var(--et-succes-ink); font-weight: 600; }
.plg-astuce { margin-top: 14px; background: var(--et-info-bg); border-left: 3px solid var(--et-info); color: var(--et-ink); font-style: italic; }
.plg-conflit { margin-top: 10px; background: var(--et-avertissement-bg); border-left: 3px solid var(--et-avertissement-mark); color: var(--et-avertissement-ink); }
.plg-conflit.est-large { background: var(--et-info-bg); border-left-color: var(--et-info); color: var(--et-info); }
.plg-regle i, .plg-astuce i, .plg-conflit i { flex: none; margin-top: 1px; }

/* --- Ancrage vs validité : le résultat, puis le principe -------------------- */
/* La phrase d'entrée dans le cycle est un CONSTAT sur les valeurs saisies, pas une
   règle ni une alerte : ni le vert de .plg-regle, ni l'ambre de .plg-conflit. Un
   encadré neutre, qui se lit sans se faire remarquer tant que rien ne cloche.      */
.plg-entree {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; margin-top: 14px;
    font-size: 13px; line-height: 1.55;
    background: var(--et-info-bg); border-left: 3px solid var(--et-info); color: var(--et-ink);
}
.plg-entree i { flex: none; margin-top: 1px; color: var(--et-info); }

.plg-details { margin-top: 8px; font-size: 13px; }
.plg-details > summary {
    cursor: pointer; font-weight: 600; color: var(--et-info); padding: 4px 0; list-style-position: outside;
}
.plg-details > summary:hover { text-decoration: underline; }
.plg-details > div { padding: 2px 0 0 14px; color: var(--et-muted); line-height: 1.6; }
.plg-details p { margin: 0 0 8px; }
.plg-details p:last-child { margin-bottom: 0; }

/* --- Colonne d'impact ------------------------------------------------------ */
.plg-impact {
    border: 1px solid var(--et-form-border); display: flex; flex-direction: column; max-height: 300px;
    background: var(--et-surface);
}
.plg-impact-tete {
    display: flex; align-items: baseline; gap: 9px; padding: 9px 12px;
    background: var(--et-tint); border-bottom: 1px solid var(--et-info-bord);
}
.plg-impact-lbl {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-form-blue-encre);
}
.plg-impact-n {
    margin-left: auto; font-family: var(--et-font-mono); font-size: 15px;
    font-weight: 500; color: var(--et-form-blue-encre);
}
/* Le libelle ET le nombre : tous deux poses sur .plg-impact-tete, dont la regle sombre
   ne reprenait que le fond. Meme defaut preexistant que .plg-tete-titre, meme correctif. */
.appgrid[data-theme="dark"] .plg-impact-lbl,
.plg-impact-repartition {
    padding: 8px 12px 9px; font-size: 12px; line-height: 1.5;
    color: var(--et-muted); border-bottom: 1px solid var(--et-hairline);
}
.plg-impact-corps { flex: 1; min-height: 0; overflow-y: auto; }
.plg-impact-vide { padding: 22px 12px; text-align: center; font-size: 12px; color: var(--et-muted); }

.plg-membre { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid var(--et-hairline); }
.plg-membre-init {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: 12px; font-weight: 600;
}
.plg-membre-txt { flex: 1; min-width: 0; }
.plg-membre-nom {
    display: block; font-size: 12px; font-weight: 600; color: var(--et-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plg-membre-detail {
    display: block; font-size: 12px; color: var(--et-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Un exclu reste LISIBLE, seulement estompé : il fait toujours partie du périmètre,
   c'est sa replanification qui est écartée. Le masquer ferait croire à une erreur
   de cible. */
.plg-membre.est-exclu .plg-membre-nom { color: var(--et-muted); text-decoration: line-through; }

.plg-membre-btn {
    flex: none; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px;
    background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-bord); font-family: inherit;
    font-size: 12px; font-weight: 600; color: var(--et-avertissement-ink); cursor: pointer;
}
.plg-membre-btn.est-exclu { background: var(--et-surface-2); border-color: var(--et-form-border); color: var(--et-muted); }
.plg-membre-motif { flex: none; color: var(--et-avertissement-ink); font-size: 12px; }
.plg-membre-motif.est-conge { color: var(--et-info); }

.plg-impact-pied {
    display: flex; align-items: center; gap: 9px; padding: 8px 12px;
    background: var(--et-avertissement-bg); border-top: 1px solid var(--et-avertissement-bord);
}
.plg-impact-pied-txt { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--et-avertissement-ink); }
.plg-impact-tout {
    flex: none; height: 26px; padding: 0 9px; background: var(--et-surface); border: 1px solid var(--et-avertissement-bord);
    font-size: 12px; font-weight: 600; font-family: inherit; color: var(--et-avertissement-ink);
    cursor: pointer; white-space: nowrap;
}

/* --- Aperçu du cycle ------------------------------------------------------- */
.plg-apercu { border: 1px solid var(--et-form-border); background: var(--et-surface); }
.plg-apercu-tete {
    padding: 9px 12px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--et-form-blue-encre);
}
.plg-apercu-corps { padding: 10px 12px 12px; }
.plg-apercu-crans { display: flex; gap: 3px; flex-wrap: wrap; }
.plg-cran {
    width: 34px; padding: 5px 0; text-align: center; border-top: 2px solid var(--et-hairline);
    background: var(--et-surface-2); font-family: var(--et-font-mono);
    font-size: 12px; font-weight: 500; color: var(--et-ink);
}
.plg-cran.est-repos { color: var(--et-muted); }
.plg-apercu-mention { margin-top: 9px; font-size: 12px; color: var(--et-muted); }