/* =========================================================================
   SIGEC · Couche « Console » — écrans d'administration et de gestion
   -------------------------------------------------------------------------
   Prolonge dans les écrans de données (Utilisateurs, Paramètres, Personnel,
   Points focaux, Classification…) le vocabulaire déjà posé par la sidebar,
   le tableau de bord et le PDC/PAD : matière tissée, fil tricolore, losange
   kente, chiffres en Montserrat. Aucun sélecteur ici ne touche aux blocs
   .pdc-*, .pad-*, .dash-* : ces écrans-là sont déjà traités.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Bandeau de page « papier officiel »
   Contrepoint clair du bandeau vert du tableau de bord : même signature
   (losange, fil tricolore, trame), mais posée sur du papier — un écran de
   réglage ne doit pas crier aussi fort qu'un tableau de bord.
   ------------------------------------------------------------------------- */
.adm-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(620px 300px at 88% -30%, var(--green-50), transparent 70%),
    linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px 22px 30px;
  margin-bottom: 20px;
  box-shadow: var(--sh-1);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.adm-hero::before { /* fil tricolore cousu sur la tranche gauche */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom,
    var(--bj-green) 0 34%, var(--bj-yellow) 34% 67%, var(--bj-red) 67% 100%);
}
.adm-hero::after { /* trame textile, à peine perceptible */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(45deg, rgba(0,104,40,.028) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0,104,40,.018) 0 2px, transparent 2px 8px);
}
.adm-hero__main { position: relative; z-index: 1; min-width: 0; }
.adm-hero__kicker {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-700);
}
.adm-hero__kicker::before { /* losange kente */
  content: ""; width: 6px; height: 6px; flex: none; background: var(--yellow-500);
  transform: rotate(45deg); border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0,104,40,.18);
}
.adm-hero__title {
  font-family: var(--font-title); font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.12; color: var(--ink-900);
}
.adm-hero__sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-500); max-width: 68ch; line-height: 1.5; }
.adm-hero__side { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pastilles de chiffres posées dans le bandeau (effectif, comptes actifs…) */
.adm-figs { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.adm-fig { padding: 0 18px; border-left: 1px solid var(--line); }
.adm-fig:first-child { padding-left: 0; border-left: none; }
.adm-fig b {
  display: block; font-family: var(--font-title); font-weight: 900; font-size: 21px;
  line-height: 1.1; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.adm-fig span {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400);
}
.adm-fig--green b { color: var(--green-700); }
.adm-fig--yellow b { color: var(--yellow-600); }
.adm-fig--red b { color: var(--red-600); }

@media (max-width: 720px) {
  .adm-hero { padding: 18px 18px 18px 22px; }
  .adm-hero__side { width: 100%; }
}

/* -------------------------------------------------------------------------
   2. Onglets segmentés
   Reprend la pilule déjà utilisée à la connexion (.auth__tabs) : une seule
   grammaire d'onglets dans toute l'application.
   ------------------------------------------------------------------------- */
.seg {
  display: inline-flex; gap: 3px; padding: 4px; margin-bottom: 20px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  border: none; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-500);
  padding: 8px 18px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.seg__btn:hover { color: var(--ink-900); }
.seg__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.seg__btn.is-active { background: var(--green-700); color: #ffd75e; box-shadow: var(--sh-1); }
.seg__btn.is-active .seg__n { background: rgba(255,255,255,.18); color: #fff; }
.seg__n {
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-500);
  border-radius: var(--r-full); padding: 1px 7px; line-height: 1.5;
}
.seg__btn.is-active .seg__n { border-color: transparent; }

/* -------------------------------------------------------------------------
   3. Panneau — carte de contenu raffinée
   ------------------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.panel--flush { overflow: visible; }
.panel__head {
  display: flex; align-items: center; gap: 12px; padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--surface-2));
}
.panel__ic {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone, var(--primary)) 12%, #fff);
  color: var(--tone, var(--primary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--primary)) 18%, transparent);
}
.panel__titles { min-width: 0; flex: 1; }
.panel__title {
  font-family: var(--font-title); font-weight: 800; font-size: 14.5px; letter-spacing: -.01em;
  color: var(--ink-900); line-height: 1.25;
}
.panel__sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; line-height: 1.45; }
.panel__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.panel__body { padding: 20px; }
.panel__body--tight { padding: 14px 20px 18px; }
/* Un tableau seul dans un panneau se fond dans le panneau : sans ça, deux
   cadres imbriqués se dessinent l'un dans l'autre pour rien. */
.panel__body > .sheet:only-child {
  border: none; box-shadow: none; border-radius: 0; margin: -20px;
}
.panel__body > .sheet:only-child > .sheet__head { display: none; }
.panel__body > .void:only-child { padding: 26px 24px 34px; }
.panel__note {
  font-size: 12.5px; color: var(--ink-500); line-height: 1.55; margin-bottom: 16px;
  padding-left: 12px; border-left: 2px solid var(--green-100);
}
.panel--wide { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
   4. Feuille de données — le tableau premium
   ------------------------------------------------------------------------- */
.sheet {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.sheet__head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--surface-2));
}
.sheet__title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-title); font-weight: 800; font-size: 13.5px; color: var(--ink-900);
}
.sheet__title::before { /* losange kente */
  content: ""; width: 6px; height: 6px; flex: none; background: var(--yellow-500);
  transform: rotate(45deg); border-radius: 1px;
}
.sheet__count {
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-500);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 2px 9px;
}
.sheet__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet__scroll { overflow-x: auto; }

.sheet table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sheet thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 10px 18px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-400); white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.sheet tbody td {
  padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle;
  color: var(--ink-700);
}
.sheet tbody tr:last-child td { border-bottom: none; }
/* Survol : liseré vert qui se coud sur la tranche gauche de la ligne */
.sheet tbody tr { transition: background .12s ease; }
.sheet tbody tr:hover td { background: color-mix(in srgb, var(--green-50) 70%, #fff); }
.sheet tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--green-600); }
.sheet tbody tr.is-muted td { color: var(--ink-400); background: var(--surface-2); }
/* Dans un tableau, un badge d'état ne doit jamais se casser en deux lignes :
   « En activité » sur deux lignes déforme toute la ligne. */
.sheet .badge, .sheet .token { white-space: nowrap; }
.sheet__strong { font-weight: 600; color: var(--ink-900); }
.sheet__meta { font-size: 11.5px; color: var(--ink-400); }
.sheet__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet th.sheet__num { text-align: right; }
.sheet__end { text-align: right; width: 1%; white-space: nowrap; }
.sheet__foot {
  padding: 11px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 12px; color: var(--ink-500);
}

/* -------------------------------------------------------------------------
   5. Cellule d'identité — médaillon d'initiales + nom + ligne secondaire
   ------------------------------------------------------------------------- */
.ident { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ident__med {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 800; font-size: 12px; letter-spacing: .01em;
  background: color-mix(in srgb, var(--tone, var(--primary)) 13%, #fff);
  color: color-mix(in srgb, var(--tone, var(--primary)) 82%, var(--ink-900));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--primary)) 22%, transparent);
  text-transform: uppercase;
}
.ident__med--soft { background: var(--surface-2); color: var(--ink-400); box-shadow: inset 0 0 0 1px var(--line); }
.ident__body { min-width: 0; }
.ident__name {
  font-size: 13.5px; font-weight: 600; color: var(--ink-900); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ident__meta {
  font-size: 11.5px; color: var(--ink-400); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
   6. Boutons d'action de ligne
   Remplace .mini-btn dans les tableaux : même encombrement, mais une vraie
   affordance (icône, teinte au survol, état de danger lisible).
   ------------------------------------------------------------------------- */
.acts { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.act {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--ink-700); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 11px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .05s ease;
}
.act:hover {
  background: var(--green-50); border-color: color-mix(in srgb, var(--green-600) 40%, var(--line));
  color: var(--green-800); box-shadow: 0 1px 3px rgba(15,27,20,.07);
}
.act:active { transform: translateY(1px); }
.act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.act .icon { opacity: .75; }
.act:hover .icon { opacity: 1; }
.act--primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--sh-1); }
.act--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.act--primary .icon { opacity: .9; }
.act--danger:hover {
  background: var(--red-50); border-color: color-mix(in srgb, var(--red-500) 38%, var(--line));
  color: var(--red-600);
}
.act--warn:hover {
  background: var(--yellow-50); border-color: color-mix(in srgb, var(--yellow-600) 40%, var(--line));
  color: #8a6d00;
}
.act--icon { padding: 7px; }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act:disabled:hover { background: var(--surface); border-color: var(--line); color: var(--ink-700); box-shadow: none; }

/* Menu « ⋯ » : au-delà de deux actions, les suivantes passent au menu plutôt
   que d'empiler des boutons qui font déborder la colonne. */
.actmenu { position: relative; display: inline-block; }
.actmenu__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; display: none;
  min-width: 210px; padding: 6px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.actmenu.is-open .actmenu__pop { display: block; }
/* Ouverture vers le haut quand la place manque en dessous. Le conteneur du
   tableau porte « overflow-x: auto », ce qui rogne aussi verticalement : sur
   les dernieres lignes, un menu deroulant vers le bas etait coupe par le bord
   du cadre et ses actions devenaient inatteignables. */
.actmenu--haut .actmenu__pop { top: auto; bottom: calc(100% + 6px); }
.actmenu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-700);
  padding: 9px 10px; border-radius: var(--r-sm);
}
.actmenu__item:hover { background: var(--surface-2); color: var(--ink-900); }
.actmenu__item .icon { color: var(--ink-400); }
.actmenu__item:hover .icon { color: var(--primary); }
.actmenu__item--danger:hover { background: var(--red-50); color: var(--red-600); }
.actmenu__item--danger:hover .icon { color: var(--red-500); }
.actmenu__sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* -------------------------------------------------------------------------
   7. Liste clé / valeur (fiche d'identité d'une commune, d'un agent…)
   ------------------------------------------------------------------------- */
.kv { display: flex; flex-direction: column; }
.kv__row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.kv__row:last-child { border-bottom: none; }
.kv__k { color: var(--ink-500); flex: none; }
.kv__fill { flex: 1; }
.kv__v { font-weight: 600; color: var(--ink-900); text-align: right; }

/* -------------------------------------------------------------------------
   8. Cartes d'option (choix exclusif) — remplace un groupe de radios nus
   ------------------------------------------------------------------------- */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.opt {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 14px 15px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.opt:hover { border-color: var(--ink-300); box-shadow: var(--sh-1); transform: translateY(-1px); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__mark {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--ink-300); background: #fff;
  display: grid; place-items: center; transition: border-color .15s ease;
}
.opt__mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  transform: scale(0); transition: transform .16s cubic-bezier(.2,.9,.3,1.4);
}
.opt__body { min-width: 0; display: block; }
.opt__title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.opt__desc { display: block; font-size: 12px; color: var(--ink-500); margin-top: 4px; line-height: 1.45; }
.opt:has(input:checked) {
  border-color: var(--green-600); background: var(--green-50);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 12%, transparent);
}
.opt:has(input:checked) .opt__mark { border-color: var(--green-600); }
.opt:has(input:checked) .opt__mark::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   9. Nuanciers de couleur (paramètre d'impression par niveau)
   ------------------------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.swatch-card {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.swatch-card:hover { box-shadow: var(--sh-2); border-color: var(--ink-300); }
.swatch-card__demo {
  padding: 16px 14px; text-align: center;
  font-family: var(--font-title); font-weight: 800; font-size: 14px; letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
}
.swatch-card__ctrl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.swatch-card__blanc { padding: 5px 12px 0; font-size: 10.5px; font-weight: 700; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .04em; }
.swatch-lab { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); cursor: pointer; }
.swatch-lab input[type="color"] {
  width: 30px; height: 26px; padding: 0; cursor: pointer; background: none;
  border: 1px solid var(--line); border-radius: 6px;
}

/* -------------------------------------------------------------------------
   10. État vide — un vide qui reste soigné
   ------------------------------------------------------------------------- */
.void {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 46px 24px; color: var(--ink-500);
}
.void__ic {
  width: 52px; height: 52px; border-radius: var(--r-lg); display: grid; place-items: center;
  margin-bottom: 14px; color: var(--green-700);
  background: linear-gradient(160deg, var(--green-50), #fff);
  box-shadow: inset 0 0 0 1px var(--green-100);
}
.void__title { font-family: var(--font-title); font-weight: 800; font-size: 14.5px; color: var(--ink-700); }
.void__text { font-size: 12.5px; margin-top: 5px; max-width: 46ch; line-height: 1.55; color: var(--ink-400); }
.void__cta { margin-top: 16px; }

/* -------------------------------------------------------------------------
   11. Barre d'outils de page (recherche + filtres)
   ------------------------------------------------------------------------- */
.cbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cbar__spacer { flex: 1; }
/* Une etiquette et sa liste ne se separent pas : sur une barre qui passe a la
   ligne, « Plan » se retrouvait seul d'un cote et sa liste de l'autre. */
.cbar__champ { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cbar__champ select { max-width: 420px; }
.cbar__etiq { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-400); }
.cbar__search {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 210px; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 9px 16px; color: var(--ink-400);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.cbar__search:focus-within {
  border-color: var(--green-600); color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-100);
}
.cbar__search input {
  border: none; background: none; outline: none; width: 100%;
  font-family: var(--font-body); font-size: 13px; color: var(--ink-900);
}
.cbar__search input::placeholder { color: var(--ink-400); }
.cbar select {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-700);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.cbar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100); }

/* -------------------------------------------------------------------------
   12. Jeton de permission / de rôle
   ------------------------------------------------------------------------- */
.tokens { display: flex; flex-wrap: wrap; gap: 5px; }
.token {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--green-50); color: var(--green-800);
  border: 1px solid var(--green-100);
}
.token--grey { background: var(--surface-2); color: var(--ink-500); border-color: var(--line); }
.token--yellow { background: var(--yellow-50); color: #8a6d00; border-color: var(--yellow-100); }
.token--blue { background: color-mix(in srgb, #1e6fb8 8%, #fff); color: #1a5c9c; border-color: color-mix(in srgb, #1e6fb8 20%, #fff); }
.token--ghost { background: none; color: var(--ink-400); border-style: dashed; }
/* Croix de retrait portée par le jeton lui-même (fin d'affectation…) */
.token__x {
  border: none; background: none; cursor: pointer; color: inherit; opacity: .5;
  font-size: 14px; line-height: 1; padding: 0 0 0 2px; margin-left: 1px; border-radius: 3px;
  transition: opacity .14s ease, color .14s ease;
}
.token__x:hover { opacity: 1; color: var(--red-600); }
.token__x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Code court (sigle) — même esprit que .chip-code mais neutre */
.tag-code {
  display: inline-block; font-family: var(--font-title); font-weight: 800; font-size: 11px;
  letter-spacing: .03em; padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100);
  /* Un code ne se coupe pas : « A-1.1.4.1 » passait a la ligne apres le tiret
     et se lisait « A- » puis « 1.1.4.1 », ce qui n'est plus le meme code. */
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   13. Bloc « secret à recopier » (mot de passe temporaire, lien d'invitation)
   ------------------------------------------------------------------------- */
.copybox { display: flex; gap: 8px; align-items: stretch; }
.copybox input {
  flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px; letter-spacing: .02em; color: var(--ink-900);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.copybox input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100); background: #fff; }

/* -------------------------------------------------------------------------
   14. Modale — mêmes composants, meilleure tenue
   Le fil tricolore en tête rattache la fenêtre au reste du système ; le pied
   se détache du corps pour que les deux boutons ne flottent plus.
   ------------------------------------------------------------------------- */
.modal { position: relative; }
.modal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(to right,
    var(--bj-green) 0 34%, var(--bj-yellow) 34% 67%, var(--bj-red) 67% 100%);
}
/* En-tête et pied collants : sur un formulaire long (la fiche Activité fait
   1330px pour 810px visibles), « Enregistrer » n'était atteignable qu'après
   avoir fait défiler tout le contenu. */
.modal__head {
  position: sticky; top: 0; z-index: 3;
  padding: 19px 22px 15px; align-items: flex-start;
  background: linear-gradient(180deg, #fff, var(--surface-2));
}
.modal__foot {
  position: sticky; bottom: 0; z-index: 3;
  box-shadow: 0 -1px 0 var(--line), 0 -8px 20px -16px rgba(15,27,20,.4);
}
/* Le fil tricolore doit rester au-dessus de l'en-tête devenu collant. */
.modal::before { z-index: 4; }

/* Ascenseurs fins — l'ascenseur natif de Windows (17px, gris plein) écrase
   visuellement une fenêtre soignée. Firefox via scrollbar-*, le reste via
   ::-webkit-scrollbar. */
.modal, .sheet__scroll, .actmenu__pop, .search-select__panel,
.nav, .pdc-table-wrap, .niv-liste, .rt__area {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-300) transparent;
}
.modal::-webkit-scrollbar,
.sheet__scroll::-webkit-scrollbar,
.actmenu__pop::-webkit-scrollbar,
.search-select__panel::-webkit-scrollbar,
.pdc-table-wrap::-webkit-scrollbar,
.niv-liste::-webkit-scrollbar,
.rt__area::-webkit-scrollbar { width: 9px; height: 9px; }
.modal::-webkit-scrollbar-track,
.sheet__scroll::-webkit-scrollbar-track,
.actmenu__pop::-webkit-scrollbar-track,
.search-select__panel::-webkit-scrollbar-track,
.pdc-table-wrap::-webkit-scrollbar-track,
.niv-liste::-webkit-scrollbar-track,
.rt__area::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb,
.sheet__scroll::-webkit-scrollbar-thumb,
.actmenu__pop::-webkit-scrollbar-thumb,
.search-select__panel::-webkit-scrollbar-thumb,
.pdc-table-wrap::-webkit-scrollbar-thumb,
.niv-liste::-webkit-scrollbar-thumb,
.rt__area::-webkit-scrollbar-thumb {
  background: var(--ink-300); border-radius: var(--r-full);
  border: 2px solid transparent; background-clip: content-box;
}
.modal::-webkit-scrollbar-thumb:hover,
.sheet__scroll::-webkit-scrollbar-thumb:hover,
.pdc-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--ink-400); background-clip: content-box;
}
.modal__head h3 {
  font-family: var(--font-title); font-weight: 800; font-size: 16.5px; letter-spacing: -.01em;
  line-height: 1.25; color: var(--ink-900);
}
.modal__head .modal__sub { font-size: 12.5px; color: var(--ink-500); margin-top: 4px; line-height: 1.45; }
.modal__head-txt { min-width: 0; }
.x-btn {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); font-size: 20px;
  display: grid; place-items: center; transition: background .14s ease, color .14s ease;
}
.x-btn:hover { background: var(--surface-2); color: var(--ink-900); }
.modal__foot { background: var(--surface-2); }

/* Champs de formulaire — plus de tenue, focus lisible.
   Sélecteur d'enfant direct : sinon la mise en capitales déborde sur les
   <label> des cases à cocher imbriquées, et « Directeur DDLP » y devient
   « DIRECTEUR DDLP ». */
.field > label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500); margin-bottom: 7px;
}
/* Beaucoup de libellés portent leur aide dans un <span class="muted"> :
   « Statut (une nouvelle Activité démarre toujours à « Non démarré ») ».
   Sans cette règle, la mise en capitales avale la phrase entière et le champ
   devient illisible. L'aide repasse en casse normale, sur sa propre ligne. */
.field > label > span,
.field > label .muted {
  display: block; margin-top: 4px;
  font-size: 12px; font-weight: 400; line-height: 1.45;
  text-transform: none; letter-spacing: normal; color: var(--ink-400);
}
/* Astérisque du champ obligatoire : discret mais repérable. */
.field > label { position: relative; }

/* app.css applique `width: 100%` à tout `.field input` — donc aussi aux cases
   à cocher, qui se retrouvent étirées sur toute la largeur de leur étiquette
   (mesuré : la case du calendrier mensuel démarrait à 64px du bord). */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto; min-width: 0; flex: none; margin: 0;
  accent-color: var(--green-700); cursor: pointer;
}
/* Étiquette d'une case à cocher : jamais en capitales, texte collé à la case. */
.field label:has(> input[type="checkbox"]),
.field label:has(> input[type="radio"]) {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: normal;
  color: var(--ink-700); margin-bottom: 0;
}
.field input, .field select, .field textarea { transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: var(--ink-300); }
.field textarea { resize: vertical; min-height: 76px; line-height: 1.55; }

/* Respiration du formulaire : deux colonnes serrées à 14px donnaient un pavé
   compact où rien ne se détachait. */
.form-grid { gap: 18px 16px; }
.modal__body { padding: 22px 22px 24px; }

/* Champ en lecture seule (Statut figé, Poids, Classification DAAF) : une
   valeur posée sans cadre flottait entre deux champs bordés et ne se lisait
   pas comme un champ. On lui donne la même boîte, visiblement inerte. */
.field__ro {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 9px 13px; border-radius: var(--r-sm);
  border: 1px dashed var(--line); background: var(--surface-2);
}
.field__ro .badge, .field__ro .pdc-badge-poids { flex: none; }
.field__ro::after {
  content: ""; margin-left: auto; flex: none; width: 13px; height: 13px; opacity: .45;
  background: currentColor; color: var(--ink-400);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='1.5'/%3E%3Cpath d='M8 10V6l1-2 3-1 3 1 1 2v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='1.5'/%3E%3Cpath d='M8 10V6l1-2 3-1 3 1 1 2v4'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Les trois rôles d'une Activité — qui exécute, qui valide, qui contribue
   Trois sélecteurs de postes identiques d'affilée, tous alimentés par la même
   liste : rien ne distinguait visuellement les trois responsabilités, et le
   bloc se lisait comme un mur de listes déroulantes. Chaque rôle reçoit donc
   sa teinte, tenue de bout en bout (liseré, pastille du libellé, focus, et
   jusqu'au tableau des associés).

     vert   — exécute      (l'action)
     bleu   — valide       (le contrôle)
     ambre  — contribue    (l'appui)
   ------------------------------------------------------------------------- */
.role-field {
  position: relative;
  padding-left: 14px;
  border-left: 3px solid color-mix(in srgb, var(--tone) 55%, transparent);
}
.role-field > label { color: color-mix(in srgb, var(--tone) 78%, var(--ink-900)); }
/* Losange kente teinté, reprise du motif de la sidebar et des bandeaux. */
.role-field > label::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 8px; margin-top: -2px;
  background: var(--tone); transform: rotate(45deg); border-radius: 1px;
}
.role-field > label > span { color: var(--ink-400); }
.role-field select:focus, .role-field input:focus {
  border-color: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent);
}
.role-field--exec { --tone: var(--green-700); }
.role-field--valide { --tone: #1e6fb8; }
.role-field--associes { --tone: var(--yellow-600); }

/* Tableau des associés — même grammaire que le tableau des financements,
   accordé à l'ambre du rôle. */
.assoc-wrap {
  margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface);
}
.assoc-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.assoc-wrap thead th {
  text-align: left; padding: 8px 12px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-400);
  background: color-mix(in srgb, var(--yellow-500) 8%, var(--surface-2));
  border-bottom: 1px solid var(--line);
}
.assoc-wrap td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.assoc-wrap tbody tr:last-child td { border-bottom: none; }
.assoc-wrap tbody tr:hover td { background: var(--yellow-50); }
.assoc-wrap td:first-child { font-weight: 600; color: var(--ink-900); }
.assoc-wrap .assoc-end { width: 1%; text-align: right; white-space: nowrap; }
.assoc-vide {
  padding: 14px 12px; text-align: center;
  font-size: 12.5px; color: var(--ink-400);
}
/* Le combo + « Ajouter » forment une seule barre de saisie. */
.assoc-pick { display: flex; gap: 8px; align-items: stretch; }
.assoc-pick select { flex: 1; min-width: 0; }

/* Fenêtre large — fiches métier denses (Activité PAD…). Deux colonnes de
   champs y tiennent confortablement, ce qui raccourcit d'autant le défilement. */
.modal--large { max-width: 980px; }
@media (max-width: 1040px) { .modal--large { max-width: 100%; } }

/* --- Financements : un vrai tableau, avec total en pied ---
   En lignes de champs libres, trois contrôles côte à côte par source
   formaient un pavé illisible dès deux ou trois financements. */
.fin-table {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.fin-table table { width: 100%; border-collapse: collapse; }
.fin-table th {
  text-align: left; padding: 9px 12px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-400); background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.fin-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fin-table tbody tr:last-child td { border-bottom: none; }
.fin-table__num { text-align: right; }
.fin-table__num input { text-align: right; font-variant-numeric: tabular-nums; }
.fin-table__end { width: 1%; white-space: nowrap; text-align: right; }
/* Les contrôles se fondent dans la cellule : un cadre par champ dans un
   tableau déjà quadrillé ferait doublon. */
.fin-table select, .fin-table input {
  width: 100%; padding: 7px 9px; font-family: var(--font-body); font-size: 13px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-900); outline: none;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.fin-table select:hover, .fin-table input:hover { border-color: var(--line); background: #fff; }
.fin-table select:focus, .fin-table input:focus {
  border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px var(--green-100);
}
.fin-table input::placeholder { color: var(--ink-300); }
.fin-table__vide td {
  text-align: center; padding: 18px 12px;
  font-size: 12.5px; color: var(--ink-400);
}
.fin-table tfoot td {
  padding: 11px 12px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-700);
}
.fin-table tfoot #fin-total {
  font-family: var(--font-title); font-size: 15px; color: var(--green-800);
  font-variant-numeric: tabular-nums;
}
.fin-table tfoot #fin-total.is-over { color: var(--red-600); }
.fin-table tfoot .muted { font-weight: 500; font-size: 12px; }
.fin-table__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface);
}
@media (max-width: 720px) {
  .fin-table { overflow-x: auto; }
  .fin-table table { min-width: 520px; }
}

/* --- Affectation en masse des responsables d'exécution (PAD) ---
   Une Activité sans responsable n'entre dans aucun PTA : cet écran peut donc
   avoir plus de cent lignes à traiter d'un coup. D'où la barre d'outils
   collante (filtrer + appliquer à tout ce qui est affiché) et la ligne
   compacte, où seul le sélecteur attire l'œil. */
/* --- PTI / PTM : écrans de lecture ---
   Trois onglets qui regardent la même matière sur des périodes différentes.
   Le sous-titre (« Année » / « Mois ») évite d'avoir à cliquer pour comprendre
   ce que chaque onglet borne. */
.tab__sous {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-400);
}
.tab.is-active .tab__sous { color: var(--primary); }

/* Navigation mensuelle : le mois lu d'abord, les flèches en second. */
.pti-mois { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pti-mois b {
  font-family: var(--font-title); font-size: 15px; min-width: 150px; text-align: center;
  color: var(--ink-900);
}

/* Tableau à niveaux : la teinte de fond dit la profondeur, l'étiquette de
   niveau la nomme — jamais la couleur seule (règle d'accessibilité tenue
   partout ailleurs dans l'application). */
.pti-table-wrap { overflow-x: auto; }
.pti-table { min-width: 900px; }
.pti-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pti-niveau {
  display: inline-block; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-500);
}
.pti-row--pg > td { background: color-mix(in srgb, var(--green-100) 55%, #fff); font-weight: 700; }
.pti-row--pj > td { background: color-mix(in srgb, var(--green-50) 70%, #fff); }
.pti-row--ac > td { background: var(--surface-2); }
.pti-row--act > td { background: #fff; font-weight: 600; }
.pti-row--sa > td { background: #fff; }
.pti-row--sa .table__name, .pti-row--t .table__name { padding-left: 14px; }
.pti-row--st .table__name { padding-left: 28px; }
.pti-row--t > td, .pti-row--st > td { background: #fff; color: var(--ink-700); }

/* --- Pilotage du PTA par direction ---
   Le niveau intermédiaire du PTA : une carte par direction, identifiée par son
   poste de directeur. Le titre de groupe sépare « ma direction » du reste
   sans en faire un onglet — les deux listes se lisent d'un seul coup d'œil. */
.pta-groupe {
  margin: 20px 0 10px; font-family: var(--font-title); font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-400);
}
.pta-groupe:first-of-type { margin-top: 4px; }
/* Le directeur, sur fond légèrement creusé : c'est l'identité de la carte,
   pas une métrique de plus. */
.pta-dir__chef {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 12px; padding: 8px 10px;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.4; color: var(--ink-600);
}
.pta-dir__chef .icon { flex: none; margin-top: 1px; color: var(--ink-400); }
.pta-dir__chef i { font-style: normal; color: var(--ink-400); }
/* Le TEP est le taux de la carte ; l'avancement declare se lit dessous, nomme,
   plutot que de passer pour lui. */
.pta-dir__taux { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px; font-size: 12px; color: var(--ink-500); }
.pta-dir__second { margin-top: 5px; font-size: 11.5px; color: var(--ink-400); }

/* --- Le tableau de bord de l'exercice ------------------------------------
   L'ecran ne montrait que des portes : pour savoir ou en etait la commune, il
   fallait entrer dans chaque direction, relever son taux et faire la moyenne
   de tete. */
.pta-bord { margin: 18px 0 6px; }
.pta-bord__tete { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pta-bord__tete h3 { margin: 0; font-family: var(--font-title); font-size: 15px;
  font-weight: 800; color: var(--ink-900); }
.pta-bord__tete p { margin: 3px 0 0; font-size: 12px; color: var(--ink-500); }
.pta-bord__cartes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px; }
@media (max-width: 1100px) { .pta-bord__cartes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .pta-bord__cartes { grid-template-columns: 1fr; } }
.pta-bord__duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .pta-bord__duo { grid-template-columns: 1fr; } }

.pta-bloc { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px 12px; }
.pta-bloc header { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; }
.pta-bloc header h4 { margin: 0; font-family: var(--font-title); font-size: 13px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-600); }
.pta-bloc header span { font-size: 11px; color: var(--ink-400); }
.pta-bloc__vide { margin: 6px 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.5; }
.pta-bloc__note { margin: 8px 0 0; font-size: 11px; color: var(--ink-400); line-height: 1.5; }

.pta-rangs { list-style: none; margin: 0; padding: 0; }
.pta-rangs > li { border-bottom: 1px solid var(--line); }
.pta-rangs > li:last-child { border-bottom: 0; }
.pta-rang { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 0; font-size: 12.5px; text-align: left; }
button.pta-rang { background: none; border: 0; cursor: pointer; font: inherit;
  padding: 9px 6px; margin: 0 -6px; border-radius: var(--r-sm);
  transition: background .12s ease; }
button.pta-rang:hover { background: var(--surface-2); }
button.pta-rang:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pta-rang__code { flex: none; min-width: 42px; font-family: var(--font-title);
  font-weight: 800; color: var(--ink-700); }
.pta-rang__lib { flex: 1; min-width: 0; color: var(--ink-600); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; }
.pta-rang__lib em { display: block; font-style: normal; font-size: 11px;
  color: var(--ink-400); margin-top: 2px; }
.pta-rang__jauge { flex: none; width: 88px; }
.pta-rang__val { flex: none; min-width: 52px; text-align: right;
  font-family: var(--font-title); font-weight: 800; color: var(--green-700); }
.pta-rang__val.est-douteux { color: var(--ink-400); }
.progress--fin { height: 6px; }
.est-avertie { color: var(--yellow-700, #9a6700); }

/* --- Structure en lecture seule (PTA d'une autre direction) ---
   Le refus réel vient du serveur (PeutGererSaTache + pta.toutes_directions) ;
   ici on retire simplement de la vue les commandes qui échoueraient, plutôt
   que de les laisser inviter à un geste voué au refus. */
.is-readonly .mini-btn { display: none; }
.is-readonly .pad-node__title--clickable { cursor: default; }

/* Alerte porteuse d'un bouton d'action : sans `wrap`, le bouton déborde du
   bandeau sur écran étroit (.pad-alert est en flex sans retour à la ligne). */
.pad-alert:has(button) { flex-wrap: wrap; align-items: center; }
.pad-alert:has(button) > button { align-self: center; }

.aff-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  position: sticky; top: 0; z-index: 2;
  padding-bottom: 12px; margin-bottom: 4px;
  background: var(--surface);
}
.aff-toolbar select { min-width: 220px; max-width: 320px; }
.aff-liste { display: grid; gap: 6px; }
.aff-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .14s ease, background .14s ease;
}
.aff-row:hover { border-color: var(--ink-300); }
/* Ligne renseignée : liseré vert à gauche — on voit d'un coup d'œil ce qui
   reste à traiter dans une liste longue. */
.aff-row.is-set { border-color: color-mix(in srgb, var(--green-600) 40%, var(--line)); background: var(--green-50); }
.aff-row.is-set .aff-row__select select { border-color: var(--green-600); }
.aff-row__info { flex: 1; min-width: 240px; display: grid; gap: 4px; justify-items: start; }
.aff-row__titre { font-size: 13.5px; line-height: 1.4; color: var(--ink-900); }
.aff-row__meta { font-size: 11.5px; color: var(--ink-400); line-height: 1.4; }
.aff-row__select { width: 300px; flex: none; }
.aff-row__select select { width: 100%; }
@media (max-width: 720px) {
  .aff-row__select { width: 100%; }
  .aff-toolbar select { max-width: none; flex: 1; }
}

/* Calendrier mensuel : grille de pastilles cliquables, cochées = vertes. */
.mois-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.mois-grid > label { display: flex; align-items: center; gap: 6px; }
.mois-grid > label input { flex: none; margin: 0; }
.mois-grid > label {
  justify-content: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.mois-grid > label:hover { border-color: var(--ink-300); background: var(--surface-2); }
.mois-grid > label:has(input:checked) {
  background: var(--green-50); border-color: color-mix(in srgb, var(--green-600) 40%, var(--line));
  color: var(--green-800); font-weight: 600;
}
@media (max-width: 640px) { .mois-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Groupe de cases à cocher (permissions par module, mois, années) : chaque
   case devient une pastille cliquable qui se teinte une fois cochée. */
.checks { display: grid; gap: 7px; }
.checks .check-pill {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--ink-700); line-height: 1.35;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 11px;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.checks .check-pill:hover { border-color: var(--ink-300); background: var(--surface-2); }
.checks .check-pill,
.checks .check-pill span { text-transform: none; letter-spacing: normal; }
.checks .check-pill input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--green-700); cursor: pointer; }
.checks .check-pill > span { flex: 1; min-width: 0; }
.checks .check-pill:has(input:checked) {
  background: var(--green-50); border-color: color-mix(in srgb, var(--green-600) 38%, var(--line));
  color: var(--green-800); font-weight: 600;
}
/* Titre de sous-groupe dans une modale (nom de module) */
.field--group > label {
  display: flex; align-items: center; gap: 8px; color: var(--green-800);
  font-size: 10.5px; letter-spacing: .1em;
}
.field--group > label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* -------------------------------------------------------------------------
   15. Grille de pages d'administration
   ------------------------------------------------------------------------- */
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1024px) { .adm-grid { grid-template-columns: 1fr; } }

/* Empilement doux à l'arrivée sur la page — une seule vague, discrète. */
@keyframes adm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.adm-hero, .adm-grid > *, .sheet, .panel { animation: adm-rise .38s ease both; }
.adm-grid > *:nth-child(2) { animation-delay: .05s; }
.adm-grid > *:nth-child(3) { animation-delay: .1s; }
.adm-grid > *:nth-child(4) { animation-delay: .14s; }
.adm-grid > *:nth-child(n+5) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .adm-hero, .adm-grid > *, .sheet, .panel, .opt, .act, .swatch-card {
    animation: none !important; transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   16. Responsive des tableaux : au-delà d'une certaine étroitesse, les
   colonnes secondaires disparaissent avant que la ligne ne se disloque.
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .sheet thead th, .sheet tbody td { padding-left: 12px; padding-right: 12px; }
  .sheet [data-col="secondary"] { display: none; }
}
@media (max-width: 640px) {
  .sheet [data-col="tertiary"] { display: none; }
  .adm-fig { padding: 0 12px; }
}

/* -------------------------------------------------------------------------
   16bis. Gestion des droits — interrupteurs
   Un droit est un état binaire qui s'applique à une personne : l'interrupteur
   dit mieux que la case à cocher qu'on ouvre ou qu'on ferme un accès. Trois
   états : accordé, non accordé, et accordé-mais-verrouillé (hérité d'un rôle
   ou d'une affectation — on ne peut pas le retirer ici, seulement à la source).
   ------------------------------------------------------------------------- */
.sw {
  flex: none; position: relative; display: inline-flex; align-items: center;
  width: 42px; height: 24px; padding: 0; border: none; cursor: pointer;
  background: var(--ink-300); border-radius: var(--r-full);
  transition: background .18s ease, box-shadow .18s ease;
}
.sw::after {
  content: ""; position: absolute; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(15,27,20,.28);
  transition: transform .18s cubic-bezier(.3,.8,.3,1.2);
}
.sw:hover { background: var(--ink-400); }
.sw:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.sw[aria-checked="true"] { background: var(--green-600); }
.sw[aria-checked="true"]:hover { background: var(--green-700); }
.sw[aria-checked="true"]::after { transform: translateX(18px); }
/* Verrouillé : l'état reste lisible, l'action est refusée. */
.sw.is-locked { cursor: not-allowed; background: var(--green-100); box-shadow: inset 0 0 0 1px var(--green-600); }
.sw.is-locked::after { transform: translateX(18px); background: var(--green-600); box-shadow: none; }
.sw.is-locked:hover { background: var(--green-100); }
/* Modifié mais pas encore enregistré */
.sw.is-dirty { box-shadow: 0 0 0 3px var(--yellow-100); }

/* Ligne de droit : libellé + explication à gauche, interrupteur à droite. */
.dr-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
.dr-row:last-child { border-bottom: none; }
.dr-row:hover { background: color-mix(in srgb, var(--green-50) 55%, #fff); }
.dr-row__body { flex: 1; min-width: 0; }
.dr-row__titre {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 600; color: var(--ink-900); line-height: 1.35;
}
.dr-row__aide { font-size: 12.5px; color: var(--ink-500); line-height: 1.55; margin-top: 4px; max-width: 78ch; }
.dr-row__origine {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--green-800);
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--r-full); padding: 3px 10px;
}
.dr-row__origine .icon { color: var(--green-700); }
.dr-row__code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 10.5px; color: var(--ink-400); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}
.dr-row--sensible .dr-row__titre::after {
  content: "Sensible"; font-family: var(--font-body);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #8a6d00; background: var(--yellow-50);
  border: 1px solid var(--yellow-100); border-radius: var(--r-full); padding: 2px 8px;
}
.dr-row.is-on { background: color-mix(in srgb, var(--green-50) 40%, #fff); }
.dr-row.is-on:hover { background: color-mix(in srgb, var(--green-50) 70%, #fff); }

/* Un combobox doit se lire comme une liste déroulante, pas comme un filtre :
   sans ce chevron, l'usager cherche un bouton et ne clique jamais le champ.
   Posé sur le composant partagé, il profite aussi au sélecteur de poste. */
.search-select { position: relative; }
.search-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; pointer-events: none;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-400); border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg); transition: border-color .15s ease;
}
.search-select:focus-within::after { border-color: var(--primary); }
.search-select__input { padding-right: 34px !important; cursor: pointer; }

/* Sélecteur de compte, en tête de page */
.dr-pick { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.dr-pick__field { flex: 1; min-width: 260px; max-width: 460px; }
.dr-pick__field > label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-500); margin-bottom: 7px;
}

/* Barre d'enregistrement collante — n'apparaît qu'en cas de modification. */
.dr-save {
  position: sticky; bottom: 0; z-index: 30; margin-top: 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--r-lg);
  background: var(--green-950); color: #fff;
  box-shadow: 0 -6px 24px -12px rgba(15,27,20,.5), var(--sh-2);
  animation: adm-rise .25s ease both;
}
.dr-save__txt { flex: 1; min-width: 200px; font-size: 13px; }
.dr-save__txt b { color: var(--yellow-500); }
.dr-save__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dr-save .btn--ghost { background: transparent; color: #cfe3d7; border-color: rgba(255,255,255,.25); }
.dr-save .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Bandeau d'avertissement (super-admin, compte suspendu…) */
.dr-note {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  padding: 12px 15px; border-radius: var(--r-md); font-size: 13px; line-height: 1.55;
}
.dr-note svg { flex: none; margin-top: 1px; }
.dr-note--info { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-800); }
.dr-note--warn { background: var(--yellow-50); border: 1px solid var(--yellow-100); color: #6b5400; }

@media (max-width: 640px) {
  .dr-row { padding: 12px 14px; gap: 12px; }
  .dr-row__aide { font-size: 12px; }
}

/* -------------------------------------------------------------------------
   17. En-tête d'application sur petit écran
   Le bandeau supérieur (titre + exercice + recherche + cloche + compte)
   dépassait la largeur du viewport sous ~760px : la page entière devenait
   scrollable horizontalement, sur tous les écrans. On sacrifie ici les
   éléments secondaires, jamais le titre ni le sélecteur d'exercice.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .header { gap: 10px; padding: 0 14px; }
  .header .search { display: none; }
  .header .annee-badge { display: none; }
  .header > div:first-of-type { min-width: 0; }
}
@media (max-width: 480px) {
  .header .avatar { display: none; }
  .header h1 { font-size: 15px; }
  .content { padding: 16px 14px; }
}

/* --- Construction de la structure du PDC --------------------------------- */
/* Deux colonnes : la palette fermée à gauche, la chaîne retenue à droite.
   L'ordre de la chaîne n'est pas libre — il découle du rang de l'échelon —
   donc le glisser-déposer sert à retenir ou retirer, jamais à réordonner. */
/* « minmax(0, …) » et non « minmax(200px, …) » : sans le zéro, une colonne de
   grille ne descend jamais sous la largeur minimale de son contenu, et les
   cartes — code, deux champs, mention, bouton — la poussaient à 555 px dans un
   écran de 375. Le panneau débordait alors de son cadre. */
.strk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 18px; }
@media (max-width: 900px) { .strk { grid-template-columns: minmax(0, 1fr); } }

.strk__titre {
  margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500);
}
.strk__zone {
  min-height: 120px; padding: 10px; border-radius: var(--r-md);
  border: 1px dashed var(--line); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 8px;
}
.strk__zone.is-cible { border-color: var(--green-600); background: var(--green-50, #f0f7f2); }

.strk__dispo, .strk__niv {
  /* Pas d'enroulement en largeur normale : un conteneur « wrap » fait passer un
     element a la ligne AVANT de le retrecir, si bien que la mention un peu plus
     longue des echelons « attribut » faisait des cartes de 82 px contre 48. */
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0;
  padding: 9px 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  cursor: grab;
}
.strk__dispo:hover, .strk__niv:hover { border-color: var(--ink-300); }
.strk__niv--attr { border-left: 3px solid var(--yellow-600); }
.is-drag { opacity: .45; }

.strk__code {
  flex: 0 0 auto; min-width: 34px; text-align: center;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  color: var(--ink-500); background: var(--surface-2);
  border-radius: 4px; padding: 2px 5px;
}
.strk__nom { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.strk__tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #8a6d00; background: var(--yellow-50); border-radius: 4px; padding: 2px 6px;
}
.strk__champs { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.strk__in {
  flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-900); font-family: var(--font-body);
}
.strk__in--pl { max-width: 40%; opacity: .8; }
.strk__in:focus { outline: none; border-color: var(--green-600); }
/* Tronquée plutôt que renvoyée à la ligne : sans cela les cartes « attribut »,
   dont la mention est plus longue, faisaient 83 px quand les autres en
   faisaient 49, et la colonne paraissait bancale. Le texte entier reste
   accessible en infobulle. */
.strk__meta {
  flex: 0 1 auto; min-width: 0; font-size: 11px; color: var(--ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sous 620 px, la mention passe seule sur sa ligne plutôt que de comprimer les
   champs de saisie, qui sont l'essentiel de l'écran. */
@media (max-width: 620px) {
  .strk__dispo, .strk__niv { flex-wrap: wrap; }
  .strk__champs { flex: 1 1 100%; }
  .strk__meta { flex: 1 1 100%; white-space: normal; }
}
.strk__btn {
  margin-left: auto; flex: 0 0 auto;
  width: 24px; height: 24px; line-height: 1; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-700); cursor: pointer;
}
.strk__btn:hover { border-color: var(--ink-300); color: var(--ink-900); }
.strk__btn--x:hover { border-color: var(--red-600, #c0392b); color: var(--red-600, #c0392b); }
.strk__verrou { margin-left: auto; color: var(--ink-300); display: flex; }

/* La frontière rappelle que le PAD n'est pas un réglage : il découle du
   dernier échelon retenu. */
.strk__frontiere {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 0;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-300);
}
.strk__frontiere::before, .strk__frontiere::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.strk__deduit {
  font-size: 12.5px; color: var(--ink-700);
  display: flex; align-items: center; gap: 7px; padding: 2px 2px 0;
}
.strk__deduit--vide { color: var(--ink-500); font-style: italic; }

.strk__aide, .strk__note { font-size: 11.5px; color: var(--ink-500); margin: 8px 0 0; line-height: 1.5; }
.strk__pied {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.strk__note { flex: 1 1 320px; margin: 0; }
.strk__actions { display: flex; gap: 8px; margin-left: auto; }

/* Échelons déduits (PAD, PTA) : présentés comme la chaîne du PDC pour qu'on
   lise les trois d'un coup, mais visiblement figés — ils ne se règlent pas,
   ils découlent de l'endroit où le PDC s'arrête. */
/* Deux blocs de meme nature, donc deux colonnes egales — contrairement a la
   grille du haut, ou la palette est volontairement plus etroite que la chaine. */
.strk--deduits { margin-top: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .strk--deduits { grid-template-columns: minmax(0, 1fr); } }
.strk__zone--fige { background: var(--surface); border-style: solid; }
.strk__niv--fige { cursor: default; background: var(--surface-2); border-style: dashed; }
.strk__niv--fige .strk__nom { flex: 1 1 auto; }
.strk__fleche {
  display: flex; align-items: center; gap: 7px; padding-left: 10px;
  font-size: 11.5px; color: var(--ink-500);
}

/* Détail de ce qu'un changement de structure détruirait. */
.strk__impact { font-size: 13.5px; line-height: 1.6; color: var(--ink-700); }
.strk__impact ul { margin: 10px 0; padding-left: 18px; }
.strk__impact li { margin-bottom: 4px; }

/* --- Arbre du PDC pilote par la structure -------------------------------- */
/* La profondeur n'etant plus bornee a trois niveaux, le decalage et la couleur
   viennent du rang de l'echelon et non d'une classe ecrite par niveau. */
.pdc-arbre { display: flex; flex-direction: column; gap: 4px; }
.pdc-noeud { border-left: 2px solid transparent; }
.pdc-noeud > .pad-node__row { border-left: 3px solid var(--c); border-radius: var(--r-sm); }
.pdc-enfants { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pdc-enfants.hidden { display: none; }

/* Un attribut n'est pas un enfant qu'on deplie : c'est une ligne de son
   parent, presentee comme telle. */
.pdc-attr {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  margin: 2px 0 2px 48px; padding: 5px 10px;
  border-left: 2px dashed var(--c); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2); font-size: 12.5px;
}
.pdc-attr:hover { background: var(--surface); }
.pdc-attr__nom {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-500);
}
.pdc-attr__texte { color: var(--ink-700); }

.pdc-actions { display: flex; gap: 3px; flex: 0 0 auto; margin-left: 8px; }
.pdc-act {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-500); cursor: pointer;
}
.pdc-act:hover { border-color: var(--ink-300); color: var(--ink-900); }
.pdc-act--danger:hover { border-color: var(--red-600, #c0392b); color: var(--red-600, #c0392b); }
.pdc-meta__cout { font-weight: 700; color: var(--ink-700); }
.pdc-meta__annees { font-size: 11px; color: var(--ink-500); margin-left: 10px; }

/* Table du PDC pilotee par la structure. */
.pdc-table__attr { font-size: 11.5px; color: var(--ink-500); }
.pdc-table__attr i { font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; margin-right: 4px; }
.pdc-table__actions { white-space: nowrap; }
.pdc-table__actions .pdc-act { width: 22px; height: 22px; }

/* --- Les trois plans, visuellement distincts ----------------------------- */
/* PDC, PAI/PAD et PTA sont trois documents differents : les afficher dans la
   meme couleur invite a les confondre. Chaque bloc porte donc sa teinte, et le
   PDC — le seul modifiable — est le plus affirme. */
.strk__plan--pdc   { --plan: var(--green-600, #0a7d38); }
.strk__plan--pad   { --plan: #1e6fb8; }
.strk__plan--pta   { --plan: #7a4fb0; }

.strk__planhead {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.strk__pastille {
  width: 9px; height: 9px; border-radius: 50%; background: var(--plan); flex: none;
}
.strk__planhead .strk__titre { margin: 0; color: var(--plan); }
.strk__deduitTag {
  margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-500);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.strk__deduitTag--vif {
  color: var(--plan); border-color: color-mix(in srgb, var(--plan) 35%, var(--line));
}
.strk__plan .strk__zone {
  border-color: color-mix(in srgb, var(--plan) 22%, var(--line));
  border-left: 3px solid var(--plan);
}
.strk__plan--pdc .strk__zone--chaine { border-left: 3px solid var(--plan); }

/* Bandeau de verrou : la structure ne s'ouvre que sur un geste explicite. */
.strk__verrouBandeau {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--yellow-50); border: 1px solid color-mix(in srgb, var(--yellow-600) 35%, var(--line));
  color: #7a5f00; font-size: 13px;
}
.strk__verrouBandeau > div { flex: 1 1 auto; }
.strk__verrouBandeau--ouvert {
  background: var(--surface-2); border-color: var(--line); color: var(--ink-700);
}
.strk--verrouille .strk__zone { opacity: .72; }
.strk--verrouille .strk__in { pointer-events: none; background: var(--surface-2); }

/* Table du PDC : le libelle doit respirer. Sans largeur minimale, la colonne
   se comprimait au point d'afficher un mot par ligne pendant que Secteur et
   les cinq annees restaient vides a cote. */
.pdc-table__lib { min-width: 420px; line-height: 1.45; }
.pdc-table__lib b { font-weight: 650; }
.pdc-table__secteur { white-space: nowrap; color: var(--ink-500); font-size: 12.5px; }
.pdc-table__annee { text-align: center; width: 52px; }
.pdc-table__cout { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Les lignes de branche portent le libelle sur toute la largeur : on les
   distingue par un fond leger plutot que par une colonne vide. */
.pdc-row--branche > td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.pdc-row--branche .pdc-table__lib b { font-weight: 700; }
.pdc-table__attr { display: block; margin-top: 3px; }
.pdc-table__clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Guides d'indentation, a la maniere d'un editeur de code : un trait vertical
   court du debut a la fin de chaque bloc, et un coude marque le dernier
   element — c'est lui qui montre ou le bloc se termine. Le decalage par
   « padding-left » ne le disait pas : on voyait le retrait, jamais la portee. */
.pdc-tree {
  display: flex !important; align-items: stretch; padding: 0 !important;
  white-space: nowrap;
}
.pdc-guide { width: 18px; flex: none; position: relative; }
.pdc-guide--trait::before,
.pdc-guide--coude::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
  border-left: 1px solid var(--line);
}
/* Dernier de sa fratrie : le trait s'arrete a mi-hauteur, sur le coude. */
.pdc-guide--coude.pdc-guide--fin::before { bottom: 50%; }
.pdc-guide--coude::after {
  content: ""; position: absolute; left: 8px; top: 50%; width: 11px;
  border-top: 1px solid var(--c, var(--line));
}
.pdc-tree .pad-node__level { align-self: center; margin-left: 4px; }

/* Cartes d'indicateurs : autant de colonnes que d'echelons retenus, la
   commune decidant de leur nombre. Les variantes 1 et 2 manquaient. */
.pad-metrics--1 { grid-template-columns: minmax(0, 1fr); }
.pad-metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pad-metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .pad-metrics--1, .pad-metrics--2, .pad-metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pad-metrics--1, .pad-metrics--2, .pad-metrics--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Chronogramme : une quantite par annee. */
.quantites { display: flex; gap: 8px; flex-wrap: wrap; }
.quantite { display: flex; flex-direction: column; gap: 3px; min-width: 62px; }
.quantite__an {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-500); text-align: center;
}
.quantite input {
  width: 100%; padding: 6px 4px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-900); font-family: var(--font-body);
}
.quantite input:focus { outline: none; border-color: var(--green-600); }

/* Separateur de section dans un formulaire long : sans lui, dix-huit champs
   d'affilee se lisent comme une liste sans articulation. */
.form-sep {
  margin: 6px 0 2px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500);
}

/* Choix de nature d'un echelon : se decline ou unique. */
.strk__nature {
  flex: 0 0 auto; padding: 4px 6px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-700); font-family: var(--font-body);
}
.strk__nature:focus { outline: none; border-color: var(--green-600); }
.strk__natureFixe {
  flex: 0 0 auto; font-size: 11px; color: var(--ink-500);
  border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 3px 7px;
}

/* Indicateurs d'un element : liste dans sa propre fenetre. */
.pdc-act--plein { border-color: var(--green-600); color: var(--green-600); }
.pdc-act--plein b { font-size: 9.5px; margin-left: 2px; }
.ind-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ind-row:last-of-type { border-bottom: none; }
.ind-row__body { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ind-row__meta { display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.ind-row__src { display: block; font-size: 11.5px; color: var(--ink-700); margin-top: 3px; font-style: italic; }


/* -------------------------------------------------------------------------
   19. Fiche Activite — remplissage en sections
   Dix-huit champs d'affilee dans une grille unique : la fenetre n'etait qu'une
   colonne de rectangles blancs sur fond gris, ou rien ne distinguait le
   contenu de l'activite, la decision budgetaire, le portage et le
   financement. Six sections numerotees, chacune avec sa teinte, rendent
   l'ordre de remplissage lisible d'un coup d'oeil — et la section 2 se
   colore quand la case est cochee, parce que c'est la seule decision de la
   fiche qui engage de l'argent.
   ------------------------------------------------------------------------- */
.fiche { display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); }
.fiche .form-grid { gap: 16px 16px; }
.fiche .field:last-child { margin-bottom: 0; }

.fiche__sec {
  --ton: var(--green-600);
  --ton-fond: var(--green-50);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ton);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fiche__sec--jaune { --ton: var(--yellow-500); --ton-fond: var(--yellow-50); }
.fiche__sec--bleu { --ton: #1e6fb8; --ton-fond: #eef4fb; }
.fiche__sec--neutre { --ton: var(--ink-300); --ton-fond: var(--surface-2); }

.fiche__sec-head {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px;
  background: var(--ton-fond);
  border-bottom: 1px solid var(--line);
}
.fiche__num {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--ton); color: #fff;
  font-family: var(--font-title); font-size: 11.5px; font-weight: 700;
}
.fiche__sec--jaune .fiche__num { color: var(--ink-900); }
.fiche__sec--neutre .fiche__num { color: var(--ink-700); }
.fiche__sec-txt { min-width: 0; }
.fiche__sec-txt h4 {
  margin: 0; font-family: var(--font-title); font-size: 13px; font-weight: 700;
  color: var(--ink-900); letter-spacing: .01em;
}
.fiche__sec-txt p { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-500); line-height: 1.4; }
.fiche__sec-corps { padding: 16px; }

/* La decision budgetaire : une case, mais celle qui commande la descente au
   PTAB. Elle prend la largeur, se colore une fois cochee, et dit ce qu'elle
   implique — une case nue au milieu de dix-sept champs ne se voyait pas. */
.fiche__decision {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); transition: background .15s ease, border-color .15s ease;
}
.fiche__decision:hover { border-color: var(--yellow-600); }
.fiche__decision input { flex: none; margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--green-600); cursor: pointer; }
.fiche__decision-txt { font-size: 12.5px; color: var(--ink-500); line-height: 1.55; }
.fiche__decision-txt b {
  display: block; font-size: 13.5px; color: var(--ink-900); margin-bottom: 3px;
  font-family: var(--font-title);
}
.fiche__decision:has(input:checked) { background: var(--green-50); border-color: var(--green-600); }
.fiche__decision:has(input:checked) .fiche__decision-txt b::after {
  content: "· descend au PTAB"; margin-left: 7px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--green-700);
}

/* Lecture seule : ces deux valeurs se reglent ailleurs. Presentees en champs,
   elles ressemblaient a des champs de saisie en panne. */
.fiche__ro-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fiche__ro {
  flex: 1 1 220px; display: grid; grid-template-columns: auto 1fr; gap: 3px 9px;
  align-items: center;
  padding: 9px 12px; border: 1px dashed var(--ink-300); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.fiche__ro-lab {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400);
}
.fiche__ro > .badge, .fiche__ro > .pdc-badge-poids { justify-self: start; }
.fiche__ro em {
  grid-column: 1 / -1; font-size: 11px; font-style: normal; color: var(--ink-400);
}


/* Bandeau des taux d'execution financiere — les six taux que le canevas de
   suivi appelle par leur nom, sous les quatre cartes de montants. Un taux
   n'est pas un montant : il tient sur une ligne, et les mettre en cartes
   aurait double la hauteur de l'ecran pour six nombres. */
.exf-taux { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 18px; }
.exf-taux__bloc { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: var(--r-sm); padding: 9px 13px; font-size: 12px; color: var(--ink-500); }
.exf-taux__bloc:nth-child(2) { border-left-color: var(--yellow-600); }
.exf-taux__bloc:nth-child(3) { border-left-color: #1e6fb8; }
.exf-taux__titre { font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); }
.exf-taux__bloc b { color: var(--ink-900); font-family: var(--font-title); font-size: 13.5px; }


/* -------------------------------------------------------------------------
   20. Ponderer en descendant l'arbre
   L'ancienne fenetre alignait tous les objectifs du plan, puis tous les
   resultats : cent lignes ou l'on ne savait pas ce qui appartenait a quoi. Un
   poids ne se juge que face a ses freres, et c'est ce que cette fenetre
   montre — une fratrie a la fois, avec le total qu'elle doit atteindre.
   ------------------------------------------------------------------------- */
.modal--xl { max-width: 1120px; width: 96vw; }
.pond2__corps { display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); }

.pond2__fil { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px 10px; }
.pond2__pas { display: inline-flex; align-items: center; gap: 7px; border: 0;
  background: transparent; border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer;
  font-family: var(--font-body); color: var(--ink-700); max-width: 300px; text-align: left; }
.pond2__pas:hover { background: var(--surface-2); }
.pond2__pas.is-actif { background: var(--green-50); }
.pond2__pas__puce { flex: none; width: 8px; height: 8px; border-radius: 2px;
  background: var(--rang, var(--ink-300)); }
.pond2__pas__txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
/* Le nom de l'echelon sur chaque etape : sans lui, « 1.1 Promouvoir... › 1 La
   production agricole... » ne dit pas si l'on regarde un objectif specifique,
   un resultat ou une action. */
.pond2__pas__niveau { font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rang, var(--ink-400)); }
.pond2__pas__lib { font-size: 12.5px; color: var(--ink-800); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pond2__pas.is-actif .pond2__pas__lib { font-weight: 600; color: var(--green-800); }
.pond2__pas b { color: var(--ink-900); }
.pond2__sep { color: var(--ink-300); }

.pond2__jauge { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.pond2__carte { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-300); border-radius: var(--r-md); padding: 12px 15px; }
.pond2__carte.est-juste { border-left-color: var(--green-600); }
.pond2__carte.est-court { border-left-color: var(--yellow-600); }
.pond2__carte.est-trop { border-left-color: var(--red-500); }
.pond2__carte.est-pareto { border-left-color: #c47a00; }
.pond2__carte.est-attente { border-left-color: var(--ink-300); opacity: .85; }
.pond2__chiffre { font-family: var(--font-title); font-size: 27px; line-height: 1.05;
  color: var(--ink-900); }
.pond2__chiffre span { font-size: 15px; color: var(--ink-400); }
.pond2__legende { font-size: 11.5px; color: var(--ink-500); margin: 2px 0 7px; }

.pond2__barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pond2__regle { flex: 1 1 320px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5;
  background: var(--green-50); border-radius: var(--r-sm); padding: 8px 12px; }
.pond2__regle b { color: var(--ink-900); }
.pond2__regle.est-juste { background: color-mix(in srgb, var(--green-600) 12%, #fff);
  color: var(--green-800); }
.pond2__regle.est-bloque { background: #fff7e6; color: #7a5200;
  box-shadow: inset 3px 0 0 var(--yellow-600); }
.pond2__regle__ok { color: var(--green-700); font-weight: 700; }
.pond2__outils { display: flex; gap: 8px; align-items: center; }

/* L'ampoule : discrete tant qu'on ne la sollicite pas, franche une fois ouverte. */
.pond2__ampoule { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 12px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 600;
  border: 1px dashed color-mix(in srgb, #c47a00 45%, var(--line)); background: #fffdf6;
  color: #8a5b00; transition: background .15s, border-color .15s, color .15s; }
.pond2__ampoule:hover { background: #fff6e0; border-style: solid; }
.pond2__ampoule.is-actif { background: #fff2d4; border-style: solid;
  border-color: #c47a00; color: #6d4700; }

/* Le parent en apposition : aucun article a accorder, et l'oeil le retrouve. */
.pond2__ref { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap;
  padding: 1px 8px; border-radius: var(--r-full); background: var(--green-50);
  border: 1px solid color-mix(in srgb, var(--green-600) 22%, transparent);
  font-size: 11.5px; vertical-align: baseline; }
.pond2__ref i { font-style: normal; color: var(--ink-500); }
.pond2__ref b { font-family: var(--font-title); color: var(--green-800); }
.pond2__regle.est-bloque .pond2__ref { background: #fff2d4; border-color: #e2bb6a; }
.pond2__regle.est-bloque .pond2__ref b { color: #6d4700; }

.pond2__aide { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid #c47a00; border-radius: var(--r-md); padding: 13px 16px 15px; }
.pond2__aide__tete { display: flex; align-items: center; gap: 8px; color: #8a5b00;
  font-size: 13px; margin-bottom: 11px; }
.pond2__aide__tete b { color: var(--ink-900); font-size: 13.5px; }
.pond2__aide__x { margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--ink-400); padding: 0 4px; }
.pond2__aide__x:hover { color: var(--ink-900); }
.pond2__aide__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
.pond2__aide__bloc--large { grid-column: span 3; }
.pond2__aide__bloc--double { grid-column: span 2; }
.pond2__aide__bloc h5 { margin: 0 0 4px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.pond2__aide__bloc p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-600); }
.pond2__aide__bloc p b { color: var(--ink-900); }
.pond2__aide__calcul { font-family: var(--font-title); font-size: 13px; margin: 0 0 3px !important; }
.pond2__aide__calcul.est-ok { color: var(--green-700); }
.pond2__aide__calcul.est-ko { color: var(--red-500); }
.pond2__aide__calcul span { font-family: inherit; font-size: 11px; color: var(--ink-400); }

/* L'echelle, en escalier : la marche courante surlignee, la couleur du rang. */
.pond2__echelle { list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.pond2__echelle li { flex: 1 1 130px; min-width: 118px; max-width: 230px;
  border: 1px solid var(--line); border-top: 3px solid var(--rang);
  border-radius: var(--r-sm); background: var(--surface-2); padding: 7px 10px 8px; }
.pond2__echelle__nom { display: block; font-size: 12px; font-weight: 600;
  color: var(--ink-800); line-height: 1.3; }
.pond2__echelle__cible { display: block; margin-top: 3px; font-family: var(--font-title);
  font-size: 12px; color: var(--ink-500); }
.pond2__echelle li.est-cent .pond2__echelle__cible { color: var(--green-700); font-size: 15px; }
.pond2__echelle li.est-ici { background: #fff2d4; border-color: #e2bb6a;
  box-shadow: 0 0 0 2px #fff2d4; }
.pond2__echelle li.est-ici .pond2__echelle__nom { color: #6d4700; }
/* La marche courante se signale SOUS le nom : en pastille flottante, elle
   percutait les noms d'echelon longs, qui sont la regle et non l'exception. */
.pond2__echelle li.est-ici::after { content: "vous êtes ici"; display: block;
  margin-top: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #b07d1a; }
.pond2__echelle__note { margin: 8px 0 0 !important; font-size: 11.5px !important;
  color: var(--ink-500) !important; }

@media (max-width: 900px) {
  .pond2__aide__grille { grid-template-columns: 1fr; }
  .pond2__aide__bloc--large, .pond2__aide__bloc--double { grid-column: auto; }
}

.pond2__liste { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); max-height: 46vh; overflow: auto; }
.pond2__ligne { display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); }
.pond2__ligne:last-child { border-bottom: 0; }
.pond2__ligne.est-pareto { background: #fff8ec; }
.pond2__ligne.est-ia { box-shadow: inset 3px 0 0 var(--info); }
.pond2__marque { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.pond2__ligne.est-pareto .pond2__marque { background: #c47a00; }
.pond2__texte { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.pond2__texte b { font-weight: 600; color: var(--ink-900); }
.pond2__ia { display: block; font-size: 11px; color: var(--info); margin-top: 2px; }
.pond2__champ { width: 74px; flex: none; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--r-sm); text-align: right; font-family: var(--font-title);
  font-size: 14px; color: var(--ink-900); background: #fff; }
.pond2__champ:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100); }
.pond2__descendre { flex: none; display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-full);
  padding: 5px 10px; cursor: pointer; font-family: var(--font-body); font-size: 12px;
  color: var(--ink-600); }
.pond2__descendre:hover { border-color: var(--primary); color: var(--primary); background: var(--green-50); }
.pond2__feuille { flex: none; width: 44px; text-align: center; color: var(--ink-300); }
.pond2__compteur { margin-right: auto; font-size: 12px; color: var(--yellow-600); font-weight: 600; }


/* -------------------------------------------------------------------------
   21. Suivi des indicateurs
   Deux series de sept colonnes face a face — ce qui est vise, ce qui est
   atteint. Sans bandeau ni teinte, quatorze colonnes de nombres se
   ressemblent toutes et l'on saisit dans la mauvaise.
   ------------------------------------------------------------------------- */
/* Les rubriques, repliees par defaut.
   Quatre cents indicateurs deployes d'un coup font une page qu'on ne lit pas :
   on ouvre ce qu'on vient chercher. Repliee, chaque barre doit donc suffire a
   se situer — d'ou l'indentation (--creux), la teinte du niveau (--rang) et la
   part deja mesuree. */
.isuivi__grps { display: flex; flex-direction: column; gap: 6px; }
.isuivi__grp { margin-left: var(--creux, 0); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--rang, var(--ink-300));
  border-radius: var(--r-md); overflow: hidden; transition: box-shadow .15s; }
.isuivi__grp.est-ouvert { box-shadow: var(--sh-2); }

.isuivi__tete { width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-900); }
/* La teinte du niveau, posee tres legerement : elle situe sans crier. */
.isuivi__tete:hover { background: color-mix(in srgb, var(--rang) 6%, transparent); }
.isuivi__grp.est-ouvert .isuivi__tete {
  background: color-mix(in srgb, var(--rang) 8%, transparent);
  border-bottom: 1px solid var(--line); }
.isuivi__chev { flex: none; display: grid; place-items: center; color: var(--rang);
  transition: transform .15s; }
.isuivi__grp.est-ouvert .isuivi__chev { transform: rotate(90deg); }
.isuivi__niv { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rang);
  background: color-mix(in srgb, var(--rang) 11%, transparent);
  padding: 3px 7px; border-radius: var(--r-full); }
.isuivi__code { flex: none; font-family: var(--font-title); font-size: 12.5px;
  color: var(--rang); }
.isuivi__lib { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isuivi__compte { flex: none; font-size: 11px; font-weight: 700; color: var(--ink-500);
  background: var(--surface-2); border-radius: var(--r-full); padding: 2px 9px; }
.isuivi__part { flex: none; width: 44px; height: 5px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden; }
.isuivi__part i { display: block; height: 100%; background: var(--ink-300); }
.isuivi__part.est-partiel i { background: var(--yellow-600); }
.isuivi__part.est-plein i { background: var(--green-600); }
.isuivi__corps { padding: 10px 12px 12px; }
.isuivi__plis { display: flex; gap: 6px; margin-left: auto; }

/* La rubrique, sur la ligne de l'indicateur : indentee de sa profondeur dans
   l'arbre et teintee de son echelon. Un groupe couvre tout un programme, il
   faut donc bien que la ligne dise de quoi elle mesure le progres. */
.isuivi__rub { display: block; margin-left: var(--creux, 0); margin-bottom: 3px;
  font-size: 10.5px; line-height: 1.3; color: var(--ink-500);
  border-left: 2px solid var(--rang, var(--ink-300)); padding-left: 6px; }
.isuivi__rub i { font-style: normal; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; font-size: 9px; color: var(--rang); }

/* La ligne en cours de saisie se detache : dans quatorze colonnes de nombres,
   savoir sur quelle ligne on tape n'est pas un confort. */
.isuivi__enveloppe tr.est-saisie { background: color-mix(in srgb, var(--primary) 5%, transparent); }

/* La barre horizontale doit etre atteignable SANS descendre.
   Avant, elle se posait sous la derniere ligne : sur cent dix indicateurs il
   fallait derouler toute la page pour la trouver, pousser vers la droite, puis
   remonter pour saisir. On borne donc la hauteur de la boite : les deux barres
   tiennent alors dans l'ecran, cote a cote. */
.isuivi__enveloppe { overflow: auto; max-height: min(68vh, 620px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overscroll-behavior: contain; }
.isuivi__enveloppe table { min-width: 900px; }
/* L'en-tete suit : quatorze colonnes de nombres sans en-tete ne se lisent pas. */
.isuivi__enveloppe thead th { position: sticky; top: 0; z-index: 3;
  background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.isuivi__enveloppe .isuivi__bandeau th { top: 0; z-index: 4; }
.isuivi__enveloppe .sv-colonnes th, .isuivi__enveloppe thead tr:last-child th { top: 26px; }
/* Le nom de l'indicateur reste a gauche quand on pousse vers la droite :
   sinon on saisit un nombre sans savoir sur quelle ligne on est. */
.isuivi__enveloppe td.table__name,
.isuivi__enveloppe thead th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  box-shadow: inset -1px 0 0 var(--line);
  /* Figee, la colonne perdait sa largeur et le libelle se renvoyait sur sept
     lignes. On la borne : c'est elle qui porte l'identite de la ligne. */
  min-width: 250px; max-width: 320px; }
.isuivi__enveloppe thead th:first-child { z-index: 5; }
/* La rubrique tient sur deux lignes : au-dela elle mange la hauteur de la
   ligne sans rien apprendre de plus. */
.isuivi__enveloppe .isuivi__rub { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.isuivi__enveloppe tr.est-saisie td.table__name {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.isuivi__bandeau th { background: var(--surface-2); text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.isuivi__bandeau th:nth-child(3) { color: var(--ink-700); }
.isuivi__bandeau th:nth-child(4) { color: var(--green-700); background: var(--green-50); }

.isuivi__cell { padding: 3px 4px; }
.isuivi__cell input { width: 62px; padding: 5px 7px; border: 1px solid var(--line);
  border-radius: var(--r-sm); text-align: right; font-size: 12.5px;
  font-variant-numeric: tabular-nums; background: #fff; color: var(--ink-900); }
.isuivi__cell input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--green-100); }
.isuivi__cell--fait { background: var(--green-50); }
.isuivi__cell--fait input { border-color: color-mix(in srgb, var(--green-600) 30%, var(--line)); }

.isuivi__total { font-family: var(--font-title); font-size: 13px; color: var(--ink-900);
  background: var(--surface-2); }
.isuivi__total--fait { background: var(--green-100); color: var(--green-800); }
.isuivi__ref { color: var(--ink-600); }
.isuivi__an { display: block; font-size: 10.5px; color: var(--ink-400); }
.isuivi__unite { display: block; font-size: 11px; color: var(--ink-500); }
.isuivi__taux { display: inline-block; padding: 2px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700; }
.isuivi__taux.est-atteint { background: var(--green-100); color: var(--green-700); }
.isuivi__taux.est-moyen { background: var(--yellow-100); color: var(--yellow-600); }
.isuivi__taux.est-faible { background: var(--red-100); color: var(--red-600); }


/* -------------------------------------------------------------------------
   22. Ecran de suivi d'un plan annuel
   Quatre familles de colonnes, quatre teintes : ce qui vient du plan, ce que
   le planificateur arrete, ce que l'execution constate, ce qui se deduit.
   C'est la seule chose qui compte sur un tableau de suivi — savoir d'ou vient
   un chiffre, et donc a qui s'adresser quand il parait faux.
   ------------------------------------------------------------------------- */
.sv-bandeau { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 12px;
  margin-bottom: 16px; }
@media (max-width: 1180px) { .sv-bandeau { grid-template-columns: 1fr 1fr; } }

.sv-periode { background: var(--green-950); color: #fff; border-radius: var(--r-md);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; }
.sv-periode__label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.sv-periode__choix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sv-periode__btn { display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  border-radius: var(--r-sm); padding: 7px 4px; cursor: pointer; color: #fff;
  font-family: var(--font-body); transition: background .14s ease, border-color .14s ease; }
.sv-periode__btn b { font-family: var(--font-title); font-size: 15px; }
.sv-periode__btn span { font-size: 9.5px; color: rgba(255,255,255,.6); white-space: nowrap; }
.sv-periode__btn:hover { background: rgba(255,255,255,.14); }
.sv-periode__btn.is-active { background: var(--accent); border-color: var(--accent);
  color: var(--ink-900); }
.sv-periode__btn.is-active span { color: rgba(15,27,20,.62); }

.sv-jauge { background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--ink-300); border-radius: var(--r-md); padding: 12px 15px; }
.sv-jauge--vert { border-top-color: var(--green-600); }
.sv-jauge--bleu { border-top-color: #1e6fb8; }
.sv-jauge--neutre { border-top-color: var(--ink-400); }
.sv-jauge__titre { font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400); }
.sv-jauge__val { font-family: var(--font-title); font-size: 25px; color: var(--ink-900);
  line-height: 1.15; margin: 3px 0 7px; }
.sv-jauge__val--money { font-size: 19px; }
.sv-jauge__pied { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: 11.5px; color: var(--ink-500); }
.sv-jauge__pied b.est-bon { color: var(--green-700); }
.sv-jauge__pied b.est-court { color: var(--red-600); }

.sv-alerte { display: flex; align-items: center; gap: 12px; background: var(--yellow-50);
  border: 1px solid var(--yellow-100); border-left: 3px solid var(--yellow-600);
  border-radius: var(--r-md); padding: 11px 15px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--ink-700); line-height: 1.5; }
.sv-alerte svg { flex: none; color: var(--yellow-600); }
.sv-alerte .btn { flex: none; }

/* La table DÉFILE DANS SA PROPRE FENÊTRE, et non dans la page.
   Sans hauteur bornée, la barre de défilement horizontale se posait au bas du
   conteneur — c'est-à-dire au bas des trois cent soixante-quinze lignes, à
   trente-huit mille pixels du haut. Pour voir les colonnes de droite il
   fallait donc descendre tout le tableau, puis pousser la barre, puis remonter.
   Bornée, la barre reste sous les yeux, les trois rangées d'en-tête restent
   collées en haut, et la colonne des rubriques reste collée à gauche : on sait
   toujours quelle ligne et quelle colonne on lit. */
.sv-table {
  overflow: auto;
  max-height: min(72vh, 760px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overscroll-behavior: contain;
}
/* Treize colonnes : sans largeur minimale, le navigateur ecrase la colonne des
   libelles a quatre-vingt-dix pixels et un intitule de plan y descend sur dix
   lignes. La table defile horizontalement plutot que de se comprimer.
   Pas de `table-layout: fixed` : les largeurs y seraient prises sur la PREMIERE
   rangee, qui est celle des familles fusionnees — trois cents pixels demandes a
   la colonne des libelles s'y repartissaient sur trois colonnes. */
.sv-table table { width: 100%; min-width: 1320px; border-collapse: collapse; }
.sv-table th, .sv-table td { padding: 7px 9px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; vertical-align: middle; }
.sv-table thead th { position: sticky; background: var(--surface-2); z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-500); text-align: left; }
/* Trois rangées empilées : chacune se colle SOUS la précédente, sinon les
   trois se superposeraient au même `top: 0`. Les hauteurs sont celles que les
   rangées occupent réellement — familles hautes, familles, colonnes. */
.sv-table thead .sv-familles--haut th { top: 0; }
.sv-table thead .sv-familles:not(.sv-familles--haut) th { top: 24px; }
.sv-table thead .sv-colonnes th { top: 46px; }
/* La rubrique reste visible quand on pousse la table vers la droite : sur
   quinze cents pixels de large, on perdait de vue de quelle ligne il s'agit. */
.sv-table thead .sv-colonnes th:first-child,
.sv-table tbody td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}
.sv-table thead .sv-colonnes th:first-child { z-index: 3; background: var(--surface-2); }
.sv-ligne.est-rubrique td:first-child { background: var(--surface-2); }
.sv-ligne.est-encours td:first-child { background: #fff8e8; }
.sv-ligne.est-encours.est-rubrique td:first-child { background: #fdf3dd; }
.sv-ligne:hover td:first-child { background: var(--green-50); }
/* Sous 760 px, la colonne des rubriques (290 px au minimum) occuperait à elle
   seule presque tout ce qu'on voit : la coller à gauche ne laisserait plus la
   place d'afficher un seul chiffre. Elle défile alors avec le reste. */
@media (max-width: 760px) {
  .sv-table thead .sv-colonnes th:first-child,
  .sv-table tbody td:first-child { position: static; box-shadow: none; }
}
/* Trois rangees d'en-tete : la famille, la base, puis la colonne.
   « Engagement » et « Ordonnancement » s'affichaient au meme rang
   qu'« Execution physique », comme trois choses de meme nature. Ce sont deux
   BASES d'une meme chose — l'execution financiere. */
.sv-familles th { text-align: center; border-bottom: 0; padding-bottom: 3px; }
.sv-familles--haut th { padding-top: 7px; font-size: 11px; letter-spacing: .04em; }
.sv-familles .est-physique { color: var(--green-700); background: var(--green-50); }
.sv-familles .est-financiere { color: #1e5fa8;
  background: linear-gradient(90deg, #eef4fb 50%, #f3effc 50%); }
.sv-familles .est-engage { color: #1e6fb8; background: #eef4fb; font-size: 10.5px; }
.sv-familles .est-ordonne { color: #6b46c1; background: #f3effc; font-size: 10.5px; }
/* L'unite dans le titre : trois nombres cote a cote en FCFA et en points de
   taux, sans que rien ne le dise, se lisent forcement de travers. */
.sv-colonnes th i { display: block; font-style: normal; font-weight: 500;
  font-size: 9px; letter-spacing: .05em; text-transform: none; color: var(--ink-400);
  margin-top: 1px; }
.sv-th-prevu { color: #1e6fb8 !important; }
.sv-th-realise { color: var(--red-600) !important; }
.sv-th-deduit { color: var(--yellow-600) !important; }

.sv-ligne.est-rubrique { background: var(--surface-2); }
.sv-ligne.est-rubrique .sv-libelle { font-weight: 600; }
.sv-ligne.est-encours { background: #fff8e8; }
.sv-ligne.est-encours.est-rubrique { background: #fdf3dd; }
.sv-ligne:hover { background: var(--green-50); }
.sv-nom, .sv-table thead tr:last-child th:first-child { min-width: 290px; }
.sv-echelon { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400); }
.sv-libelle { display: block; color: var(--ink-900); line-height: 1.4; }
.sv-nom .chip-code { margin-top: 3px; display: inline-block; }

.sv-tri { white-space: nowrap; }
.sv-t { display: inline-flex; align-items: center; justify-content: center; width: 17px;
  height: 17px; border-radius: 4px; margin-right: 2px; font-size: 10px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-300); }
.sv-t.est-prevu { background: var(--green-100); color: var(--green-700); }
.sv-t.est-revue { outline: 2px solid var(--accent); outline-offset: 1px; }
.sv-poids { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--green-50); color: var(--green-800); font-weight: 700; font-size: 11.5px; }
.sv-sanspoids { color: var(--ink-300); }

.sv-prevu { background: rgba(30,111,184,.05); }
.sv-realise { background: rgba(192,0,0,.04); font-variant-numeric: tabular-nums; }
.sv-deduit { background: rgba(217,159,0,.06); font-variant-numeric: tabular-nums; }
.sv-champ { width: 84px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r-sm);
  text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; background: #fff; }
.sv-champ:focus { outline: none; border-color: #1e6fb8; box-shadow: 0 0 0 3px rgba(30,111,184,.16); }
.sv-derive { color: var(--ink-400); font-variant-numeric: tabular-nums; }
.sv-ecart { display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-weight: 700; font-size: 11.5px; }
.sv-ecart.est-bon { background: var(--green-100); color: var(--green-700); }
.sv-ecart.est-moyen { background: var(--yellow-100); color: var(--yellow-600); }
.sv-ecart.est-mauvais { background: var(--red-100); color: var(--red-600); }

.sv-legende { display: flex; flex-wrap: wrap; gap: 16px; padding: 11px 14px;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-500); }
.sv-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.sv-pastille--prevu { background: rgba(30,111,184,.35); }
.sv-pastille--realise { background: rgba(192,0,0,.3); }
.sv-pastille--deduit { background: rgba(217,159,0,.4); }
.sv-pastille--encours { background: #fff8e8; border: 1px solid var(--yellow-600); }

/* Les points de suivi : une capture par ligne, la reference en tete.
   L'ancienne liste vivait sous le tableau ; elle est devenue l'accueil, et
   chaque ligne s'ouvre — d'ou la cible cliquable et la fleche. */



/* Le logo de la commune : depose dans les parametres, imprime sur les pages
   de garde. Le damier discret montre la transparence — un logo sur fond blanc
   opaque se verra tel quel sur une page de garde blanche. */
.com-logo { display: grid; place-items: center; padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2)
    repeating-conic-gradient(rgba(0,0,0,.04) 0% 25%, transparent 0% 50%) 0 / 14px 14px; }
.com-logo img { max-height: 96px; max-width: 100%; object-fit: contain; }
.com-logo__vide { display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-md);
  font-size: 12px; line-height: 1.5; color: var(--ink-400); }
.field__apercu { display: grid; place-items: center; padding: 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.field__apercu img { max-height: 72px; max-width: 100%; object-fit: contain; }

/* ===================================================================== *
 * Modeles de taches : la declinaison type d'une activite, et ses poids.
 * ===================================================================== */
.mdl-groupe { margin-bottom: 18px; }
.mdl-groupe__titre { margin: 0 0 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); }
.mdl-cartes { display: flex; flex-direction: column; gap: 7px; }
.mdl-carte { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; }
.mdl-carte.est-ouvert { border-color: var(--primary); box-shadow: var(--shadow-1); }
.mdl-carte__tete { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; background: none; border: 0; cursor: pointer; font: inherit;
  text-align: left; }
.mdl-carte__tete:hover { background: var(--surface-2); }
.mdl-carte__ic { flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--green-50); color: var(--green-700); }
.mdl-carte__txt { flex: 1; min-width: 0; line-height: 1.35; }
.mdl-carte__txt b { display: block; font-size: 13px; color: var(--ink-900); }
.mdl-carte__txt span { font-size: 11.5px; color: var(--ink-400); }
.mdl-carte__total { flex: none; font-family: var(--font-title); font-size: 14px; }
.mdl-carte__total i { font-style: normal; font-size: 11px; color: var(--ink-400); }
.mdl-carte__total.est-juste { color: var(--green-700); }
.mdl-carte__total.est-faux { color: #a3690a; }
.mdl-carte__fleche { flex: none; color: var(--ink-300); display: inline-flex;
  transition: transform .15s; }
.mdl-carte.est-ouvert .mdl-carte__fleche { transform: rotate(90deg); color: var(--primary); }
.mdl-carte__corps { padding: 0 14px 12px; border-top: 1px solid var(--line); }
.mdl-carte__pied { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.mdl-note { margin: 10px 0 0; padding: 7px 10px; border-radius: var(--r-sm);
  background: #fff8e8; color: #7a5200; font-size: 11.5px; line-height: 1.5; }

/* Les etapes : la fille se lit sous sa mere, decalee et allegee. */
.mdl-etapes { list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px; }
.mdl-etapes li { display: flex; align-items: baseline; gap: 10px; padding: 5px 8px;
  border-radius: var(--r-sm); font-size: 12.5px; }
.mdl-etapes li:nth-child(odd) { background: var(--surface-2); }
.mdl-etapes li.est-fille { padding-left: 30px; font-size: 12px; color: var(--ink-500); }
.mdl-etapes__num { flex: none; width: 34px; font-family: var(--font-title);
  font-size: 11px; color: var(--ink-400); }
.mdl-etapes__lib { flex: 1; min-width: 0; color: var(--ink-800); }
.mdl-etapes li.est-fille .mdl-etapes__lib { color: var(--ink-500); }
.mdl-etapes__poids { flex: none; font-family: var(--font-title); font-size: 12px;
  color: var(--ink-900); }

/* La fenetre de choix : cases a cocher et total retenu. */
.mdl-choix { margin-top: 8px; }
.mdl-choix__barre { display: flex; align-items: center; gap: 8px; }
.mdl-etapes--choix { max-height: 300px; overflow-y: auto; }
.mdl-etapes--choix label { display: flex; align-items: baseline; gap: 10px;
  width: 100%; cursor: pointer; }
.mdl-etapes--choix input { margin: 0; flex: none; }

/* La table du modèle appliqué à une unité de travail.
   Deux colonnes de poids, et c'est le sujet : celui que porte le modèle, et
   celui qui sera réellement appliqué. Retirer trois étapes d'un modèle de onze
   laissait les huit restantes à soixante-deux points ; elles sont désormais
   ramenées à cent, et la table le montre avant qu'on valide. */
.mdl-choix__select { width: 100%; margin-bottom: 10px; }
.mdl-ajuste {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 0; padding: 9px 11px;
  background: color-mix(in srgb, var(--yellow-500, #FFBE00) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow-600, #c47a00) 32%, transparent);
  border-radius: var(--r-sm); font-size: 12px; line-height: 1.45;
}
.mdl-ajuste svg { flex: none; margin-top: 1px; color: var(--yellow-600, #c47a00); }
.mdl-table {
  margin-top: 10px; max-height: 340px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.mdl-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mdl-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 8px 10px; text-align: left;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400);
}
.mdl-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mdl-table tr:last-child td { border-bottom: none; }
.mdl-table__num { width: 46px; font-family: var(--font-title); color: var(--ink-500);
  white-space: nowrap; }
.mdl-table__poids { width: 92px; text-align: right; font-family: var(--font-title);
  white-space: nowrap; }
.mdl-table thead .mdl-table__poids { text-align: right; }
.mdl-table__x { width: 44px; text-align: right; }
.mdl-table tr.est-fille td:nth-child(2) { padding-left: 28px; color: var(--ink-500); }
/* Une étape retirée reste VISIBLE, barrée : elle se remet d'un clic, et l'on
   voit ce dont on s'est privé. La faire disparaître obligeait à rouvrir le
   modèle pour la retrouver. */
.mdl-table tr.est-retiree td:nth-child(2) { text-decoration: line-through; opacity: .5; }
.mdl-table tr.est-retiree .mdl-table__num,
.mdl-table tr.est-retiree .mdl-table__poids { opacity: .45; }
.mdl-table__hors { font-size: 11px; color: var(--muted); font-style: italic; }
/* Sur un écran étroit, les deux colonnes de poids et celle du retrait ne
   tiennent plus : les en-têtes se raccourcissent et les gouttières se
   resserrent plutôt que de renvoyer le bouton de retrait derrière un
   défilement horizontal, où personne ne va le chercher. */
@media (max-width: 560px) {
  .mdl-table table { font-size: 12px; }
  .mdl-table thead th, .mdl-table td { padding: 6px 6px; }
  .mdl-table__num { width: 34px; }
  .mdl-table__poids { width: 58px; }
  .mdl-table__x { width: 36px; }
  .mdl-table tr.est-fille td:nth-child(2) { padding-left: 18px; }
}

/* L'editeur d'etapes, en tableau : chaque colonne porte son titre, et le pied
   dit ce que le total commande. Les champs echappent au `width: 100%` des
   formulaires — sans quoi une ligne s'etalait hors de la fenetre. */
.mdl-tab { border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); }
.mdl-tab__entete, .mdl-tab__ligne {
  display: grid; grid-template-columns: 46px 1fr 96px 64px; gap: 8px;
  align-items: center; padding: 7px 10px; }
.mdl-tab__entete { background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400); }
.mdl-tab__entete .mdl-tab__num { text-align: right; }
.mdl-tab__ligne { border-bottom: 1px solid var(--line); }
.mdl-tab__ligne:hover { background: var(--surface-2); }
.mdl-tab__ligne.est-sous { padding-left: 30px;
  grid-template-columns: 46px 1fr 96px 64px; background: #fafbfa; }
.mdl-tab__no { font-family: var(--font-title); font-size: 12px; color: var(--ink-500); }
.mdl-tab .mdl-tab__lib, .mdl-tab .mdl-tab__poids {
  width: 100%; padding: 7px 10px; font-size: 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink-900); }
.mdl-tab .mdl-tab__poids { text-align: right; }
.mdl-tab .mdl-tab__lib:focus, .mdl-tab .mdl-tab__poids:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100); }
.mdl-tab__outils { display: flex; gap: 4px; justify-content: flex-end; }
.mdl-tab__outils button { width: 26px; height: 26px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm); cursor: pointer;
  color: var(--ink-400); font-size: 14px; line-height: 1; }
.mdl-tab__outils button:hover:not(:disabled) { color: var(--primary);
  border-color: var(--primary); }
.mdl-tab__outils button:last-child:hover { color: var(--red-500); border-color: var(--red-500); }
.mdl-tab__outils button:disabled { opacity: .35; cursor: default; }
.mdl-tab__vide { margin: 0; padding: 18px; text-align: center; font-size: 12.5px;
  color: var(--ink-400); }
.mdl-tab__ajout { padding: 9px 10px; border-bottom: 1px solid var(--line); }

/* Le pied : le total, et ce qu'il commande. Un « 0 / 100 » pose sans phrase
   ne dit pas pourquoi 100. */
.mdl-tab__pied { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.mdl-tab__pied.est-juste { background: var(--green-50); }
.mdl-tab__pied.est-faux { background: #fff8e8; }
.mdl-tab__somme { flex: none; font-family: var(--font-title); font-size: 13px;
  color: var(--ink-400); }
.mdl-tab__somme b { font-size: 24px; }
.mdl-tab__pied.est-juste .mdl-tab__somme b { color: var(--green-700); }
.mdl-tab__pied.est-faux .mdl-tab__somme b { color: #a3690a; }
.mdl-tab__expl { font-size: 11.5px; line-height: 1.5; color: var(--ink-500); }
.mdl-tab__expl b { display: block; color: var(--ink-900); font-size: 12.5px; }
.mdl-tab__expl i { font-style: italic; }

/* Le total retenu, dans la fenetre de choix d'un modele. */
.mdl-edit__total { margin-left: auto; font-family: var(--font-title); font-size: 12.5px; }
.mdl-edit__total.est-juste { color: var(--green-700); }
.mdl-edit__total.est-faux { color: #a3690a; }

/* La marque dans l'arbre : une declinaison type existe pour cette activite.
   Elle dit la nature ET le nombre d'etapes — annoncer « une correspondance
   existe » sans dire laquelle obligerait a cliquer pour voir. */
.mini-btn--modele { background: var(--green-50); border-color: color-mix(in srgb, var(--green-600) 30%, transparent);
  color: var(--green-800); font-weight: 600; }
.mini-btn--modele:hover { background: color-mix(in srgb, var(--green-600) 16%, #fff);
  border-color: var(--green-600); }
.mini-btn--modele i { font-style: normal; margin-left: 4px; color: var(--ink-400);
  font-weight: 400; }

/* La fenetre de choix : l'activite d'abord, le modele ensuite. */
.mdl-cible { padding: 10px 13px; border-radius: var(--r-md); background: var(--surface-2);
  border-left: 3px solid var(--primary); margin-bottom: 10px; }
.mdl-cible__quoi { display: block; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400);
  margin-bottom: 2px; }
.mdl-cible b { font-size: 13px; color: var(--ink-900); line-height: 1.4; }
/* D'où découle ce qu'on décline. Un directeur qui compte huit sous-activités
   sous quatre activités ne sait plus laquelle il remplit si l'on n'affiche
   que le libellé de la dernière. */
.mdl-cible__parent {
  display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
  font-size: 11.5px; color: var(--muted, #6b6b6b); line-height: 1.35;
}
.mdl-cible__parent svg { flex: none; opacity: .75; }
.mdl-cible__parent b { font-size: 11.5px; color: var(--muted, #6b6b6b); }
.mdl-motif { display: flex; gap: 9px; margin: 0 0 12px; padding: 9px 12px;
  border-radius: var(--r-md); background: var(--green-50);
  border: 1px solid color-mix(in srgb, var(--green-600) 20%, transparent);
  font-size: 12px; line-height: 1.5; color: var(--green-800); }
.mdl-motif b { color: var(--green-900, #14432a); }

/* La passerelle offerte au moment de saisir la premiere tache. */
.tache-modele { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--green-50);
  border: 1px solid color-mix(in srgb, var(--green-600) 22%, transparent);
  color: var(--green-800); font-size: 12.5px; line-height: 1.45; }
.tache-modele span { flex: 1; }

/* ===================================================================== *
 * Tableau de bord du PDC : ou en est le plan, en une page.
 * Tout vient de l'apercu du suivi : aucun chiffre n'est recalcule ici.
 * ===================================================================== */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .board { grid-template-columns: 1fr; } }

/* Les cartes de tête : quatre chiffres qui disent s'il faut lire la suite.
   Chacune porte son icone teintee, sa jauge et — surtout — la phrase qui dit
   sur quoi le taux est calcule : un pourcentage sans denominateur ne veut
   rien dire, et c'est ce qui manquait quand ces chiffres n'etaient que du
   texte pose dans le bandeau. */
.board-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 0 0 14px; }
@media (max-width: 1180px) { .board-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .board-kpis { grid-template-columns: 1fr; } }

.board-kpi { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 15px 13px; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; overflow: hidden; }
/* Un filet teinte sur la tranche haute : il rattache la carte a sa famille
   sans colorer tout le bloc, qui deviendrait illisible. */
.board-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ton); }
.board-kpi.est-alerte { border-color: #f0d9a8; background: #fffdf7; }

.board-kpi__ic { width: 32px; height: 32px; border-radius: 9px; display: grid;
  place-items: center; margin-bottom: 9px;
  color: var(--ton); background: color-mix(in srgb, var(--ton) 12%, transparent); }
.board-kpi__val { font-family: var(--font-title); font-weight: 800; font-size: 27px;
  line-height: 1.05; color: var(--ink-900); letter-spacing: -.02em; }
.board-kpi__val i { font-style: normal; font-size: 14px; font-weight: 700;
  color: var(--ink-400); margin-left: 3px; }
.board-kpi__lib { font-size: 11.5px; font-weight: 600; color: var(--ink-600);
  margin-top: 2px; }
.board-kpi__jauge { height: 5px; border-radius: var(--r-full); background: var(--surface-2);
  margin: 10px 0 0; overflow: hidden; }
.board-kpi__jauge i { display: block; height: 100%; border-radius: var(--r-full);
  background: var(--ton); }
.board-kpi__pied { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 10.5px; line-height: 1.45; color: var(--ink-400); }
.board-kpi__pied b { font-weight: 700; }
.board-kpi__pied .est-avert { color: #a3690a; }

/* La frise du cycle : ou l'on en est, et ce qui reste. */
.board-frise { display: flex; gap: 6px; margin: 0 0 14px; }
.board-frise__an { flex: 1; text-align: center; padding: 9px 4px 8px;
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--line); }
.board-frise__an b { display: block; font-family: var(--font-title); font-size: 15px;
  color: var(--ink-800); }
.board-frise__an span { font-size: 11px; color: var(--ink-400); }
.board-frise__an.est-passe { border-top-color: var(--green-600); background: var(--green-50); }
.board-frise__an.est-passe b { color: var(--green-800); }
.board-frise__an.est-courante { border-top-color: var(--yellow-600); background: #fff6e0;
  box-shadow: 0 0 0 2px #fff6e0; }
.board-frise__an.est-courante b { color: #7a5200; }
.board-frise__an.est-avenir { opacity: .6; }

/* Une barre par programme, lue contre la moyenne du plan. */
.board-barres { display: flex; flex-direction: column; gap: 13px; }
.board-barre__tete { display: flex; align-items: baseline; gap: 10px; }
.board-barre__nom { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-barre__nom b { color: var(--primary); }
.board-barre__taux { flex: none; font-family: var(--font-title); font-size: 14px; }
.board-barre__taux.est-bon { color: var(--green-700); }
.board-barre__taux.est-moyen { color: #a3690a; }
.board-barre__taux.est-faible { color: var(--red-500); }
.board-barre__piste { position: relative; height: 8px; margin: 5px 0 4px;
  border-radius: var(--r-full); background: var(--surface-2); overflow: visible; }
.board-barre__fond { height: 100%; border-radius: var(--r-full); background: var(--green-600); }
.board-barre__fond.est-moyen { background: var(--yellow-600); }
.board-barre__fond.est-faible { background: var(--red-500); }
.board-barre__moyenne { position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink-700); border-radius: 1px; }
.board-barre__pied { display: flex; gap: 12px; font-size: 11px; color: var(--ink-400); }
.board-barre__part { margin-left: auto; }
.board-note { margin: 10px 0 0 !important; font-size: 11px; color: var(--ink-400);
  line-height: 1.5; }
.board-ok { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; color: var(--green-700); line-height: 1.5; }

/* Les listes : ce qui traine, les indicateurs hors trajectoire. */
.board-liste { display: flex; flex-direction: column; gap: 5px; }
.board-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-sm); background: var(--surface-2); font-size: 12px; }
.board-item__niveau { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400); width: 62px; }
.board-item__lib { flex: 1; min-width: 0; color: var(--ink-800); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-item__lib b { color: var(--primary); }
.board-item__lib em { display: block; font-style: normal; font-size: 10.5px;
  color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; }
.board-item__an { flex: none; font-size: 10.5px; color: #a3690a; white-space: nowrap; }
.board-item__montant, .board-item__chiffre { flex: none; font-family: var(--font-title);
  font-size: 12px; color: var(--ink-800); white-space: nowrap; }
.board-item__chiffre i { font-style: normal; color: var(--ink-400); font-size: 11px; }
.board-item__jauge { flex: none; width: 46px; height: 6px; border-radius: var(--r-full);
  background: var(--line); overflow: hidden; }
.board-item__jauge i { display: block; height: 100%; background: var(--red-500); }
.board-item__pct { flex: none; width: 64px; text-align: right; font-family: var(--font-title);
  font-weight: 700; font-size: 12.5px; }

/* L'etat de la ponderation. */
.board-pond__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 10px; }
.board-pond__chiffres div { text-align: center; padding: 8px 4px;
  border-radius: var(--r-sm); background: var(--surface-2); }
.board-pond__chiffres b { display: block; font-family: var(--font-title); font-size: 19px;
  color: var(--ink-900); line-height: 1.1; }
.board-pond__chiffres b i { font-style: normal; font-size: 12px; color: var(--ink-400); }
.board-pond__chiffres span { font-size: 10.5px; color: var(--ink-500); }
.board-pond__chiffres .est-alerte { background: #fff6e0; }
.board-pond__chiffres .est-alerte b { color: #7a5200; }

/* ===================================================================== *
 * Le ruban du PDC : ce qu'on vient faire commence tout de suite.
 *
 * L'arbre demarrait huit cents pixels plus bas — bandeau, barre d'actions,
 * trois grandes cartes, cinq compteurs. Le cout total se regarde une fois par
 * mois, l'arbre a chaque ouverture : l'occasionnel etait pose au-dessus du
 * constant. Le ruban garde les memes chiffres sur deux lignes, colle en haut,
 * et rend chacun cliquable.
 * ===================================================================== */
.pdc-ruban { position: sticky; top: 0; z-index: 20; margin: -4px -4px 14px;
  padding: 12px 16px 10px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--weave), linear-gradient(120deg, var(--green-700), var(--green-800) 65%, var(--green-900));
  color: #fff; box-shadow: 0 6px 18px -10px rgba(0,0,0,.45); }
.pdc-ruban__haut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pdc-ruban__id { min-width: 0; flex: 1 1 240px; }
.pdc-ruban__titre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdc-ruban__titre h2 { margin: 0; font-family: var(--font-title); font-size: 20px;
  line-height: 1.15; color: #fff; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pdc-ruban__chaine { margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdc-ruban__chaine b { color: var(--accent); }

/* Les trois chiffres : lisibles, et chacun une porte. */
.pdc-ruban__stats { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.pdc-ruban__stat { display: flex; flex-direction: column; gap: 1px; cursor: pointer;
  padding: 6px 13px; border-radius: var(--r-md); text-align: left;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
  color: #fff; font: inherit; transition: background .15s, border-color .15s; }
.pdc-ruban__stat:hover { background: rgba(255,255,255,.15); border-color: var(--accent); }
.pdc-ruban__stat b { font-family: var(--font-title); font-size: 15px; line-height: 1.1;
  white-space: nowrap; }
.pdc-ruban__stat em { font-style: normal; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.66); white-space: nowrap; }
.pdc-ruban__stat.est-juste b { color: #b8f0c8; }
.pdc-ruban__stat.est-court b, .pdc-ruban__stat.est-trop b { color: var(--accent); }

/* La barre d'actions se replie plutot que de sortir de l'ecran : « Adopter le
   PDC » se faisait couper a droite sur un portable. */
.pdc-ruban__actions { flex: 0 1 auto; min-width: 0; }
.pdc-ruban__actions .pad-actionbar { margin: 0; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; }
.pdc-ruban__actions .pad-actionbar__spacer { display: none; }
.pdc-ruban__actions .pad-btn { background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.2); }
.pdc-ruban__actions .pad-btn:hover { background: rgba(255,255,255,.2); }
.pdc-ruban__actions .pad-btn--primary { background: var(--accent); color: var(--green-950);
  border-color: transparent; font-weight: 700; }
.pdc-ruban__actions .pad-btn--primary:hover { background: #ffd75e; }
.pdc-ruban__actions .pad-btn[disabled] { opacity: .45; }
.pdc-ruban__actions .pad-menu { color: var(--ink-800); }

.pdc-ruban__bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.14); }
.pdc-ruban__compteurs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.pdc-compteur { cursor: pointer; font: inherit; font-size: 11.5px; color: rgba(255,255,255,.8);
  padding: 4px 11px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.16);
  background: transparent; transition: background .15s, color .15s; }
.pdc-compteur:hover { background: rgba(255,255,255,.14); color: #fff; }
.pdc-compteur b { font-family: var(--font-title); font-size: 13px; color: #fff;
  margin-right: 3px; }
.pdc-ruban__ensemble { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85);
  padding: 5px 12px; border-radius: var(--r-full); background: transparent;
  border: 1px dashed rgba(255,255,255,.3); }
.pdc-ruban__ensemble:hover { background: rgba(255,255,255,.12); color: #fff; }
.pdc-ruban__ensemble.is-actif { background: var(--accent); color: var(--green-950);
  border-style: solid; border-color: transparent; }

.pdc-ensemble { margin-bottom: 14px; }
.pdc-ensemble[hidden] { display: none; }

@media (max-width: 1100px) {
  .pdc-ruban { position: static; }
  .pdc-ruban__stats { order: 3; width: 100%; }
  .pdc-ruban__actions { order: 2; }
}

/* Suivi du PDC : la regle de l'annee sous revue, et l'ampoule qui l'explique.
   Meme forme que la fenetre de ponderation, ou elle a fait ses preuves. */
.sv-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; }
.sv-regle { flex: 1 1 340px; font-size: 12.5px; color: var(--ink-600); line-height: 1.5;
  background: var(--green-50); border-radius: var(--r-sm); padding: 9px 13px; }
.sv-regle b { color: var(--ink-900); }

/* Les quatre familles, expliquees une fois pour toutes. */
.sv-familles-aide { list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.sv-familles-aide li { display: flex; flex-direction: column; gap: 1px;
  padding: 5px 10px; border-left: 3px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); }
.sv-familles-aide li b { font-size: 12px; color: var(--ink-900); }
.sv-familles-aide li span { font-size: 11.5px; color: var(--ink-500); line-height: 1.45; }
.sv-familles-aide .est-plan { border-left-color: #0F1B14; }
.sv-familles-aide .est-prevu { border-left-color: #1E6FB8; }
.sv-familles-aide .est-realise { border-left-color: #C00000; }
.sv-familles-aide .est-deduit { border-left-color: #8A6D00; }

/* L'indicateur d'une ligne : ce qu'on visait sur le cycle, ce qu'on a atteint. */
.sv-indcell { max-width: 210px; }
.sv-ind { display: flex; flex-direction: column; line-height: 1.35; }
.sv-ind b { font-size: 12px; font-weight: 600; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-ind span { font-size: 11px; color: var(--ink-400); }

.sv-points { display: flex; flex-direction: column; gap: 8px; }
.sv-point { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s; }
.sv-point:hover { border-color: var(--primary); box-shadow: var(--shadow-1); }
.sv-point:active { transform: translateY(1px); }
.sv-point--ref { border-left: 3px solid var(--green-600); background: var(--green-50); }
.sv-point__marque { flex: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--surface-2); color: var(--green-700); }
.sv-point--ref .sv-point__marque { background: var(--green-700); color: #fff; }
.sv-point__marque--periode { background: var(--green-950); color: var(--accent);
  font-family: var(--font-title); font-size: 15px; }
.sv-point__txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; }
.sv-point__txt b { display: block; color: var(--ink-900); font-size: 13.5px; }
.sv-point__txt span { color: var(--ink-500); font-size: 11.5px; }
.sv-point__chiffre { flex: none; text-align: right; font-family: var(--font-title);
  font-size: 17px; color: var(--ink-900); line-height: 1.1; }
.sv-point__chiffre i { font-style: normal; font-size: 12px; color: var(--ink-400); }
.sv-point__chiffre em { display: block; font-style: normal; font-family: var(--font-body);
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.sv-point__chiffre.est-bon { color: var(--green-700); }
.sv-point__chiffre.est-court { color: var(--yellow-600); }
.sv-point__taux { flex: none; width: 68px; text-align: right; }
.sv-point__taux b { display: block; font-family: var(--font-title); font-size: 14px;
  color: var(--green-700); }
.sv-point__taux em { font-style: normal; font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400); }
.sv-point__fleche { flex: none; color: var(--ink-300); display: inline-flex; }
.sv-point:hover .sv-point__fleche { color: var(--primary); }
/* Les exercices qui ont un plan, quand celui de la session n'en a pas.
   Le bouton fait le meme geste que le selecteur d'en-tete : la session
   bascule d'annee, et les deux ne peuvent pas se contredire. */
.sv-annees { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; }
.sv-annees__label { font-size: 12px; color: var(--ink-500); }
.sv-annee { font-family: var(--font-title); font-size: 14px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: var(--r-full); cursor: pointer;
  background: var(--surface); color: var(--ink-900);
  transition: border-color .15s, background .15s, color .15s; }
.sv-annee:hover { border-color: var(--primary); background: var(--green-50);
  color: var(--green-800); }
.sv-annees__note { margin: 9px 0 0 !important; font-size: 11.5px;
  color: var(--ink-400); line-height: 1.5; }

.sv-points__vide { display: flex; align-items: flex-start; gap: 9px; margin: 0;
  padding: 14px; border: 1px dashed var(--line); border-radius: var(--r-md);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 760px) {
  .sv-point { flex-wrap: wrap; }
  .sv-point__txt { flex: 1 1 100%; order: 3; }
}


/* Vue d'ensemble de la ponderation : ce qui reste a faire, et ou aller.
   Descendre l'arbre branche par branche suffit quand on sait ou aller ; sur
   six cent quinze elements dont soixante-deux ponderes, il faut d'abord voir
   ce qui manque. */
/* L'attribut `hidden` vaut `display: none` dans la feuille du navigateur, mais
   une regle d'auteur qui pose `display: flex` l'emporte : le fil d'Ariane et la
   jauge restaient visibles sous la vue d'ensemble. */
.pond2 [hidden] { display: none !important; }
/* Consultation : la pondération d'un plan adopté se lit, elle ne se modifie
   plus. Faire disparaître le bouton laissait chercher partout une fonction
   qui existait — l'écran s'ouvre donc, et dit d'entrée pourquoi il est figé. */
/* Le raccourci des évidences : les fratries d'un seul élément. Sur le PAD
   2025 de Covè elles sont cent cinquante-cinq sur cent cinquante-cinq — les
   saisir une par une serait cent cinquante-cinq gestes pour zéro décision. */
.pond2__evidences {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 13px 15px;
  background: color-mix(in srgb, var(--green-600, #0a7d34) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--green-600, #0a7d34) 28%, transparent);
  border-radius: var(--r-sm, 8px); font-size: 12.5px; line-height: 1.5;
}
.pond2__evidences > span { flex: 1 1 260px; }
.pond2__evidences svg { flex: none; color: var(--green-700, #006828); }

.pond2__lecture {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 14px; padding: 11px 13px;
  background: color-mix(in srgb, var(--yellow-500, #FFBE00) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow-600, #c47a00) 34%, transparent);
  border-radius: var(--r-sm, 8px);
  font-size: 12.5px; line-height: 1.5; color: var(--text, #1a1a1a);
}
.pond2__lecture svg { flex: none; margin-top: 1px; color: var(--yellow-600, #c47a00); }
.pond2__champ[readonly] {
  background: var(--surface-2, #f4f4f4); color: var(--muted, #6b6b6b);
  border-style: dashed; cursor: default;
}

.pond2__onglets { display: flex; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; }
.pond2__onglet { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border: 0; background: transparent; border-radius: var(--r-sm);
  padding: 8px 12px; cursor: pointer; font-family: var(--font-body); font-size: 13px;
  color: var(--ink-600); font-weight: 600; }
.pond2__onglet:hover { background: var(--surface-2); }
.pond2__onglet.is-actif { background: var(--green-700); color: #fff; }

.pond2__restants { display: flex; flex-direction: column; gap: 7px; margin-top: 12px;
  max-height: 40vh; overflow: auto; }
/* Le decalage suit le rang de l'echelon, et le badge en porte la couleur :
   un Resultat est sous un Objectif specifique, et cela doit se voir sans lire.
   Ecrits pareil, « Actions » et « Activites » se confondaient — alors qu'ils
   n'obeissent pas a la meme regle de somme. */
.pond2__restant { display: grid; grid-template-columns: 132px 1fr auto 74px; align-items: center;
  gap: 12px; text-align: left; border: 1px solid var(--line);
  border-left: 4px solid var(--rang, var(--ink-300)); border-radius: var(--r-sm);
  background: var(--surface); padding: 9px 13px; cursor: pointer;
  font-family: var(--font-body); }
.pond2__restant:hover { border-color: var(--primary); border-left-color: var(--rang);
  background: var(--green-50); }
.pond2__restant.est-attente { opacity: .7; border-style: dashed; }
.pond2__restant__badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--rang, var(--ink-400)); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pond2__restant__sous { color: var(--ink-400); font-size: 11px; }
.pond2__restant__parent { font-size: 12.5px; color: var(--ink-900); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pond2__restant__parent b { color: var(--primary); }
.pond2__restant__motif { font-size: 11.5px; color: var(--ink-500); white-space: nowrap; }
.pond2__restant__compte { font-family: var(--font-title); font-size: 15px; text-align: right;
  color: var(--ink-900); }
.pond2__restant__compte i { font-style: normal; font-size: 11px; color: var(--ink-400); }
.pond2__fini { display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
  background: var(--green-50); color: var(--green-800); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 13px; }

/* ===================================================================== *
 * Ecran « Indicateurs » : la lecture. On saisit dans « Suivi des
 * indicateurs », on lit ici — cet ecran ne modifie rien.
 * ===================================================================== */
.ind-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 0 0 14px; }
@media (max-width: 1180px) { .ind-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ind-kpis { grid-template-columns: 1fr; } }

/* La jauge devant chaque indicateur : une colonne de pourcentages se compare
   mal de l'oeil, des barres alignees oui. */
.ind-jauge { min-width: 190px; display: flex; align-items: center; gap: 9px; }
.ind-jauge__piste { flex: 1; height: 7px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden; }
.ind-jauge__piste i { display: block; height: 100%; border-radius: var(--r-full);
  background: var(--ink-300); }
.ind-jauge__piste.est-atteint i { background: var(--green-600); }
.ind-jauge__piste.est-moyen i { background: var(--yellow-600); }
.ind-jauge__piste.est-faible i { background: var(--red-500); }
.ind-jauge__val { flex: none; min-width: 62px; text-align: right;
  font-family: var(--font-title); font-size: 12.5px; font-weight: 700; }
.ind-jauge__val.est-atteint { color: var(--green-700); }
.ind-jauge__val.est-moyen { color: #a3690a; }
.ind-jauge__val.est-faible { color: var(--red-600); }
/* « Non mesure » n'est pas « zero » : il ne prend pas la couleur d'un echec. */
.ind-jauge__val.est-vide { color: var(--ink-400); font-weight: 500; font-size: 11px; }
.ind-cible { color: var(--ink-600); }

.ind-groupe__taux { flex: none; min-width: 46px; text-align: right;
  font-family: var(--font-title); font-size: 13px; font-weight: 700; }
.ind-groupe__taux.est-atteint { color: var(--green-700); }
.ind-groupe__taux.est-moyen { color: #a3690a; }
.ind-groupe__taux.est-faible { color: var(--red-600); }
.ind-groupe__taux.est-vide { color: var(--ink-300); }

.ind-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ind-mini th { text-align: left; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); font-weight: 700;
  padding: 5px 8px; border-bottom: 1px solid var(--line); }
.ind-mini td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ind-mini tr:last-child td { border-bottom: 0; }

/* ---- Impression ----
   L'ecran est une console : barre laterale, filtres, boutons. Sur papier rien
   de tout cela ne sert, et le tableau doit pouvoir couper proprement entre
   deux pages. */
@media print {
  .sidebar, .topbar, .cbar, .isuivi__plis, .adm-hero__side,
  .sheet__end, .nav__bulle, .toast-wrap { display: none !important; }
  .app { display: block !important; }
  .main, .page { padding: 0 !important; margin: 0 !important; }
  body { background: #fff !important; }
  .board-kpi, .isuivi__grp, .panel {
    box-shadow: none !important; break-inside: avoid; }
  .ind-kpis { grid-template-columns: repeat(4, 1fr) !important; }
  .isuivi__enveloppe { overflow: visible !important; }
  .isuivi__enveloppe table { min-width: 0 !important; }
  .isuivi__grp { break-inside: auto; }
  .isuivi__corps tr { break-inside: avoid; }
  thead { display: table-header-group; }
}

/* ===================================================================== *
 * Parametres > Mode simulation.
 * Le jeu de demonstration pend sous une commune a lui : « live » se reduit
 * a la masquer. Voir apps/organizations/demonstration.py.
 * ===================================================================== */
.sim-bascule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .sim-bascule { grid-template-columns: 1fr; } }
.sim-mode { text-align: left; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font: inherit; color: var(--ink-900); transition: border-color .15s, background .15s; }
.sim-mode:hover:not(:disabled) { border-color: var(--primary); }
.sim-mode:disabled { opacity: .55; cursor: default; }
.sim-mode b { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-size: 13.5px; }
.sim-mode span { display: block; margin-top: 5px; font-size: 11.5px;
  color: var(--ink-500); line-height: 1.45; }
/* Le mode courant se voit : sans quoi on clique deux fois sur le meme. */
.sim-mode.is-actif { border-color: var(--primary); background: var(--green-50); }
.sim-mode.is-actif b { color: var(--green-800); }

/* Les deux volumes de données : une carte chacune, avec son bouton en bas. */
.sim-volume { display: flex; flex-direction: column; gap: 10px; cursor: default; }
.sim-volume .btn { align-self: flex-start; margin-top: auto; }
.sim-choix { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.sim-choix label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sim-mdp { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
  background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-sm); }
.sim-journal { margin: 0; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-700);
  background: var(--surface-2); padding: 12px 14px; border-radius: var(--r-md);
  max-height: 340px; overflow: auto; white-space: pre-wrap; }

/* ===================================================================== *
 * « Mon PTAB » : ce dont je reponds dans le plan de travail.
 * Deux vues — liste rangee par rubrique, arbre montrant la descendance —
 * et une descente jusqu'aux taches, avec ce qui attend MA validation.
 * ===================================================================== */
.mpta-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin: 0 0 14px; }
@media (max-width: 900px) { .mpta-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mpta-kpi { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px 15px; overflow: hidden; }
.mpta-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ton); }
.mpta-kpi.est-alerte { border-color: #f0c9c9; background: #fffbfb; }
.mpta-kpi__ic { width: 28px; height: 28px; border-radius: 8px; display: grid;
  place-items: center; margin-bottom: 8px; color: var(--ton);
  background: color-mix(in srgb, var(--ton) 12%, transparent); }
.mpta-kpi__val { font-family: var(--font-title); font-weight: 800; font-size: 24px;
  line-height: 1.05; letter-spacing: -.02em; }
.mpta-kpi__val.est-petit { font-size: 15px; }
.mpta-kpi__lib { font-size: 11px; color: var(--ink-500); margin-top: 3px; line-height: 1.35; }

/* --- Les groupes de la vue liste --- */
.mpta-grp { margin-bottom: 12px; }
.mpta-grp__tete { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 2px; }
.mpta-grp__code { font-family: var(--font-title); font-size: 12px; font-weight: 800;
  color: var(--primary); background: var(--green-50); border-radius: var(--r-full);
  padding: 3px 10px; }
.mpta-grp__lib { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpta-grp__n { font-size: 11px; font-weight: 700; color: var(--ink-500);
  background: var(--surface-2); border-radius: var(--r-full); padding: 2px 9px; }
.mpta-grp__corps { display: flex; flex-direction: column; gap: 5px; }

/* --- L'activite, depliable sur ses taches --- */
.mpta-act { margin-left: var(--creux, 0); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mpta-act.est-ouvert { box-shadow: var(--sh-2); }
.mpta-act__tete { width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-900); }
.mpta-act__tete:hover { background: var(--surface-2); }
.mpta-act__chev { flex: none; width: 14px; color: var(--ink-400); transition: transform .15s; }
.mpta-act.est-ouvert .mpta-act__chev { transform: rotate(90deg); color: var(--primary); }
.mpta-act__code { flex: none; font-family: var(--font-title); font-size: 12px; color: var(--primary); }
.mpta-act__lib { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.mpta-act__lib em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-400); }
.mpta-act__roles { flex: none; display: flex; gap: 4px; }
.mpta-act__taches { flex: none; font-size: 11px; color: var(--ink-500); white-space: nowrap; }
/* Ce qui attend MA validation se voit sans chercher. */
.mpta-act__taches.est-attente { color: var(--red-600); }
.mpta-act__mt { flex: none; font-family: var(--font-title); font-size: 12px;
  color: var(--ink-700); white-space: nowrap; }
.mpta-act__st { flex: none; }
.mpta-act__corps { padding: 4px 13px 12px; border-top: 1px solid var(--line);
  background: var(--surface-2); }
.mpta-meta { display: flex; align-items: center; gap: 10px; padding: 9px 0; flex-wrap: wrap; }

/* --- Le tableau des taches --- */
.mpta-taches { width: 100%; border-collapse: collapse; font-size: 12.5px;
  background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
.mpta-taches th { text-align: left; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); font-weight: 800;
  padding: 7px 9px; border-bottom: 1px solid var(--line); }
.mpta-taches td { padding: 7px 9px; border-bottom: 1px solid var(--line); }
.mpta-taches tr:last-child td { border-bottom: 0; }
.mpta-taches tr.est-a-moi { background: #fffdf6; }
.mpta-taches__lib { line-height: 1.35; }
.mpta-sous { color: var(--ink-300); margin-right: 4px; }
.mpta-num { font-family: var(--font-title); font-size: 11.5px; color: var(--ink-600); }
.mpta-jauge { display: inline-block; width: 54px; height: 5px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.mpta-jauge i { display: block; height: 100%; background: var(--green-600); }
.est-retard { color: var(--red-600); font-weight: 600; }
.mpta-avous { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  font-weight: 800; color: #a3690a; background: var(--yellow-100);
  border-radius: var(--r-full); padding: 2px 8px; white-space: nowrap; }

/* --- Le calendrier --- */
.mpta-mois--vide { font-size: 11px; color: var(--ink-400); }
.mpta-mois--vide i { font-style: italic; }

/* --- La vue arbre --- */
.mpta-arbre { display: flex; flex-direction: column; gap: 5px; }
.mpta-noeud { margin-left: var(--creux, 0); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--rang, var(--ink-300));
  border-radius: var(--r-md); overflow: hidden; }
.mpta-noeud__tete { width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-900); }
.mpta-noeud__tete:hover { background: color-mix(in srgb, var(--rang) 6%, transparent); }
.mpta-noeud.est-ouvert .mpta-noeud__tete {
  background: color-mix(in srgb, var(--rang) 8%, transparent);
  border-bottom: 1px solid var(--line); }
.mpta-noeud__chev { flex: none; color: var(--rang); transition: transform .15s; }
.mpta-noeud.est-ouvert .mpta-noeud__chev { transform: rotate(90deg); }
.mpta-noeud__tete b { flex: none; font-family: var(--font-title); font-size: 12.5px;
  color: var(--rang); }
.mpta-noeud__lib { flex: 1; min-width: 0; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mpta-noeud__n { flex: none; font-size: 11px; font-weight: 700; color: var(--ink-500);
  background: var(--surface-2); border-radius: var(--r-full); padding: 2px 9px; }
.mpta-noeud__corps { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; }

/* ===================================================================== *
 * Suivi plateforme > Arborescence : la forme de la ponderation.
 * Chaque boite porte son POIDS, jamais son libelle complet — un libelle de
 * six lignes dans une case interdit la lecture d'ensemble, qui est
 * precisement ce qu'on vient chercher.
 * ===================================================================== */
.arbo-alerte { margin-bottom: 12px; }
.arbo-barre { align-items: center; }
.arbo-case { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--ink-700); white-space: nowrap; cursor: pointer; }

.arbo-page { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px 22px; margin-bottom: 16px; }
.arbo-page__tete { display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 12px; border-bottom: 2px solid var(--line); margin-bottom: 12px; }
.arbo-page__kicker { font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400); }
.arbo-page__tete h3 { font-size: 15px; margin-top: 4px; line-height: 1.35; }
.arbo-page__poids { flex: none; text-align: center; padding: 6px 14px;
  background: var(--green-50); border-radius: var(--r-md); }
.arbo-page__poids b { display: block; font-family: var(--font-title);
  font-size: 21px; color: var(--green-800); line-height: 1; }
.arbo-page__poids span { font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-400); }

.arbo-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.arbo-legende__x { font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c); display: flex; align-items: center; gap: 5px; }
.arbo-legende__x::before { content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: var(--c); }

/* L'arbre se lit en colonnes : chaque niveau est une colonne, les enfants
   d'une boite se lisent a sa droite. C'est la disposition du canevas papier. */
.arbo-corps { overflow-x: auto; padding-bottom: 6px; }
.arbo-rangee { display: flex; align-items: center; gap: 0; }
.arbo-boite { flex: none; width: 78px; min-height: 34px; margin: 3px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid var(--c); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c) 7%, transparent); }
/* Une fratrie dont la somme ne tombe pas juste se voit sans l'ouvrir. */
.arbo-boite.est-faux { border-color: var(--red-500); border-width: 2px;
  background: #fdeaea; }
.arbo-boite--reste { border-style: dashed; opacity: .8; }
.arbo-boite__code { font-size: 9.5px; font-weight: 700; color: var(--ink-500);
  line-height: 1.1; }
.arbo-boite__poids { font-family: var(--font-title); font-size: 15px; line-height: 1.1;
  color: var(--ink-900); }
.arbo-enfants { position: relative; margin-left: 22px; padding-left: 14px;
  border-left: 1.5px solid var(--line); }
.arbo-enfants.est-faux { border-left-color: var(--red-500); }
/* Le total de la fratrie, pose sur son trait de liaison. */
.arbo-total { position: absolute; left: -19px; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 800; color: var(--ink-400); background: var(--surface);
  padding: 2px 0; writing-mode: vertical-rl; letter-spacing: .04em; }
.arbo-total.est-faux { color: var(--red-600); }

/* ---- Impression : A4 paysage, un programme par page ---- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .sidebar, .topbar, .cbar, .adm-hero__side, .arbo-alerte,
  .demo-banner, .archive-banner, .header { display: none !important; }
  .app { display: block !important; }
  .main, .page { padding: 0 !important; margin: 0 !important; }
  body { background: #fff !important; }
  .arbo-page { border: 0; box-shadow: none; padding: 0; margin: 0;
    break-after: page; }
  .arbo-page:last-child { break-after: auto; }
  .arbo-corps { overflow: visible !important; }
}

/* ===================================================================== *
 * Suivi plateforme > Validations en attente.
 * Une tache achevee mais non validee ne compte pas dans le TEP : le travail
 * est fait, le plan dit qu'il ne l'est pas.
 * ===================================================================== */
.val-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin: 0 0 14px; }
@media (max-width: 900px) { .val-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.val-kpi { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px 15px; overflow: hidden; }
.val-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ton); }
.val-kpi__ic { width: 28px; height: 28px; border-radius: 8px; display: grid;
  place-items: center; margin-bottom: 8px; color: var(--ton);
  background: color-mix(in srgb, var(--ton) 12%, transparent); }
.val-kpi__val { font-family: var(--font-title); font-weight: 800; font-size: 24px;
  line-height: 1.05; letter-spacing: -.02em; }
.val-kpi__lib { font-size: 11px; color: var(--ink-500); margin-top: 3px; line-height: 1.35; }

.val-bloc { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-300); border-radius: var(--r-md);
  margin-bottom: 6px; overflow: hidden; }
/* L'anciennete se voit sur la tranche : c'est elle qui presse, pas le nombre. */
.val-bloc.est-tiede { border-left-color: var(--yellow-600); }
.val-bloc.est-chaud { border-left-color: #c47a00; }
.val-bloc.est-critique { border-left-color: var(--red-500); }
.val-bloc.est-ouvert { box-shadow: var(--sh-2); }

.val-tete { width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-900); }
.val-tete:hover { background: var(--surface-2); }
.val-tete__chev { flex: none; color: var(--ink-400); transition: transform .15s; }
.val-bloc.est-ouvert .val-tete__chev { transform: rotate(90deg); color: var(--primary); }
.val-tete__ident { flex: 1; min-width: 0; }
.val-tete__ident b { display: block; font-size: 13.5px; }
.val-tete__ident em { display: block; font-style: normal; font-size: 11px;
  color: var(--ink-400); margin-top: 2px; }
.val-tete__dirs { flex: none; display: flex; gap: 4px; }
.val-dir { font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--ink-500); background: var(--surface-2); border-radius: var(--r-full);
  padding: 3px 8px; }
.val-tete__n, .val-tete__poids, .val-tete__age { flex: none; text-align: right;
  font-family: var(--font-title); font-size: 15px; min-width: 62px; }
.val-tete__n i, .val-tete__poids i, .val-tete__age i { display: block; font-style: normal;
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500; color: var(--ink-400); }
.val-tete__age.est-tiede { color: #a3690a; }
.val-tete__age.est-chaud { color: #c47a00; }
.val-tete__age.est-critique { color: var(--red-600); }

.val-corps { padding: 4px 14px 14px; border-top: 1px solid var(--line);
  background: var(--surface-2); }
.val-table { width: 100%; border-collapse: collapse; font-size: 12.5px;
  background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
.val-table th { text-align: left; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); font-weight: 800;
  padding: 8px 9px; border-bottom: 1px solid var(--line); }
.val-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); }
.val-table tr:last-child td { border-bottom: 0; }
.val-table__act b { color: var(--primary); }
.val-table__act em { display: block; font-style: normal; font-size: 10.5px;
  color: var(--ink-400); }
.val-num { font-family: var(--font-title); font-size: 12px; text-align: right; }
.val-num.est-critique { color: var(--red-600); }

/* Les taches que PERSONNE ne peut valider : leur activite n'a pas de
   responsable. Les taire les rendrait invisibles pour toujours. */
.val-bloc--orphelin { border-left-color: var(--red-500); margin-top: 14px; }
.val-orphelin__tete { display: flex; gap: 10px; padding: 12px 14px;
  color: var(--red-600); }
.val-orphelin__tete b { font-size: 13.5px; }
.val-orphelin__tete em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--ink-500); margin-top: 3px; line-height: 1.45; }

/* La tete n'est plus un bouton — un bouton dans un bouton est du HTML
   invalide, et le navigateur sortait « Relancer » de la ligne. */
.val-tete__chev, .val-tete__ident { cursor: pointer; }
.val-tete__chev { display: grid; place-items: center; width: 18px; }
.val-tete__relance { flex: none; }

/* ===================================================================== *
 * Exécution physique : le circuit clôture → validation → refus.
 * Une tâche fait un PARCOURS, pas un état. Ce qui compte à l'écran, c'est
 * ce qu'il reste à faire, ce qui revient corrigé, et pourquoi.
 * ===================================================================== */
.ec-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin: 0 0 14px; }
@media (max-width: 980px) { .ec-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ec-kpi { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px 15px; overflow: hidden; }
.ec-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ton); }
.ec-kpi.est-alerte { border-color: #f0c9c9; background: #fffbfb; }
.ec-kpi__ic { width: 28px; height: 28px; border-radius: 8px; display: grid;
  place-items: center; margin-bottom: 8px; color: var(--ton);
  background: color-mix(in srgb, var(--ton) 12%, transparent); }
.ec-kpi__val { font-family: var(--font-title); font-weight: 800; font-size: 24px;
  line-height: 1.05; letter-spacing: -.02em; }
.ec-kpi__lib { font-size: 11.5px; font-weight: 600; color: var(--ink-600); margin-top: 3px; }
.ec-kpi__sous { font-size: 10.5px; color: var(--ink-400); margin-top: 4px;
  padding-top: 6px; border-top: 1px dashed var(--line); line-height: 1.4; }

.ec-consult { margin-bottom: 12px; }

/* --- Le tableau --- */
.ec-table-wrap { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: auto; max-height: min(66vh, 640px); }
.ec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 820px; }
.ec-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface);
  text-align: left; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 800; padding: 10px 10px;
  box-shadow: inset 0 -1px 0 var(--line); }
.ec-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ec-table tbody tr:last-child td { border-bottom: 0; }
.ec-table tbody tr:hover { background: var(--surface-2); }
/* Un dossier deja revenu se signale : il ne se traite pas comme un premier
   passage. */
.ec-table tbody tr.est-revenue { background: #fffdf6; }
.ec-table tbody tr.est-revenue:hover { background: #fffaeb; }
.ec-table__case { width: 34px; text-align: center; }
.ec-table__lib { min-width: 240px; line-height: 1.35; }
.ec-table__parent { color: var(--ink-500); max-width: 300px; }
.ec-table__fin { white-space: nowrap; text-align: right; }
.ec-sous { color: var(--ink-300); margin-right: 4px; }
.ec-num { font-family: var(--font-title); font-size: 12px; }
/* Qui a fait le travail, et d'ou il vient : le validateur est d'un AUTRE
   service, et il doit pouvoir le verifier d'un coup d'oeil. */
.ec-qui em { display: block; font-style: normal; font-size: 10.5px;
  font-weight: 700; letter-spacing: .03em; color: var(--ink-400); margin-top: 2px; }
/* La piece a lire avant de dire oui. Sans elle, on valide sur parole. */
.ec-source { max-width: 260px; color: var(--ink-600); line-height: 1.35; }
.ec-source--vide { display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-style: italic; color: var(--yellow-700, #9a6700); }

/* --- De QUOI la tache est-elle la suite -----------------------------------
   « Rattachee a : Elaborer le PCDA » ne disait pas si l'on remontait a une
   activite du plan annuel ou a une sous-activite. */
.ec-rat__niv {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); vertical-align: 1px;
}
.ec-rat__code { color: var(--ink-700); }
/* La ligne s'ouvre au double-clic : on le montre au survol. */
.ec-table tbody tr[data-detail] { cursor: default; }
.ec-table tbody tr[data-detail]:hover .ec-rat__code { color: var(--green-700); }

/* --- La fiche complete d'une tache ----------------------------------------
   Les tableaux ne montrent que ce qui tient sur une ligne. Qui valide, sur
   quelle piece, depuis quand, apres combien d'allers-retours : il fallait
   ouvrir la tache dans le PTAB, un autre ecran. */
.ec-fiche__tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; }
.ec-fiche__jeton { padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--ink-600); }
.ec-fiche__jeton.est-refus { background: #fff4f4; border-color: #f0c9c9;
  color: var(--red-600); }
.ec-fiche__rat { display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; margin-bottom: 12px; background: var(--surface-2);
  border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.45; }
.ec-fiche__etiq { display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-400); }
.ec-fiche__poste { font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; color: var(--ink-400); margin-left: 4px; }
.ec-fiche__bloc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ec-fiche__bloc p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-800); white-space: pre-wrap; }
.ec-fiche__bloc.est-vide p { color: var(--yellow-700, #9a6700); font-style: italic; }
.est-retard { color: var(--red-600); font-weight: 600; }

.ec-jauge { display: inline-block; width: 52px; height: 5px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ec-jauge i { display: block; height: 100%; background: var(--green-600); }

/* --- Le compteur de mouvements, sur la ligne --- */
.ec-mvt { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px;
  font-size: 10px; font-weight: 800; color: var(--ink-500);
  background: var(--surface-2); border-radius: var(--r-full); padding: 2px 7px; }
.ec-mvt.est-refus { color: var(--red-600); background: var(--red-100); }

.pad-btn--ok { color: var(--green-700); border-color: color-mix(in srgb, var(--green-600) 35%, var(--line)); }
.pad-btn--ok:hover { background: var(--green-50); }
.pad-btn--ko { color: var(--red-600); border-color: color-mix(in srgb, var(--red-500) 35%, var(--line)); }
.pad-btn--ko:hover { background: var(--red-50); }

/* --- La barre d'action groupee --- */
.ec-selection { display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding: 10px 14px; background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--r-md); font-size: 13px; }
.ec-selection b { font-family: var(--font-title); font-size: 15px; }
.ec-selection .btn { margin-left: auto; }

/* --- Les renvoyees : le MOTIF d'abord ---
   Une ligne de tableau ne porte pas un paragraphe. Ce qui compte ici n'est pas
   l'etat de la tache mais ce qu'il faut corriger. */
.ec-renvois { display: flex; flex-direction: column; gap: 10px; }
.ec-renvoi { background: var(--surface); border: 1px solid #f0c9c9;
  border-left: 3px solid var(--red-500); border-radius: var(--r-md); overflow: hidden; }
.ec-renvoi__tete { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.ec-renvoi__tete > div { flex: 1; min-width: 0; }
.ec-renvoi__tete b { display: block; font-size: 13.5px; line-height: 1.35; }
.ec-renvoi__tete em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--ink-400); margin-top: 3px; }
.ec-renvoi__motif { margin: 0 14px 12px; padding: 11px 13px; background: #fdf5f5;
  border-radius: var(--r-sm); }
.ec-renvoi__qui { display: flex; align-items: center; gap: 6px; font-size: 10.5px;
  font-weight: 700; color: var(--red-600); }
.ec-renvoi__motif p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-800); }
.ec-renvoi__pied { padding: 0 14px 14px; }

/* --- La tete de la page PTA : imprimer, et remonter l'execution ---------- */
.pta-tete__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .pta-tete__actions { width: 100%; }
  .pta-tete__actions .btn { flex: 1; justify-content: center; }
}

/* --- Le compte rendu du recalage : ce que le geste a change --------------
   Un bouton qui ne rend rien ne se croit pas : on montre le avant/apres, et
   le taux de chaque sommet du plan une fois l'execution remontee. */
.recal { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.recal__l { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 9px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.recal__l:last-child { border-bottom: 0; }
.recal__l:nth-child(odd) { background: var(--surface-2); }
.recal__l b { font-family: var(--font-title); display: inline-flex; align-items: center;
  gap: 4px; color: var(--green-700); }
.recal__avant { color: var(--ink-400); font-weight: 400; }
.recal__note { margin: 12px 0 8px; font-size: 11.5px; color: var(--ink-400);
  line-height: 1.5; }
.recal__sommets { border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; }
.recal__s { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); font-size: 12.5px; }
.recal__s:last-child { border-bottom: 0; }
.recal__code { font-family: var(--font-title); font-weight: 800; min-width: 44px; }
.recal__lib { flex: 1; min-width: 0; color: var(--ink-600); }
.recal__tep { font-family: var(--font-title); font-weight: 800; color: var(--green-700); }
.recal__tep.est-douteux { color: var(--ink-400); }
.recal__sommets + .recal__note, .recal__sommets .recal__note { padding: 0 12px 10px; }

/* --- Le bloc de contenu : son titre, et l'action qui le concerne ----------
   Le bouton « Clôturer des tâches » se tenait dans le bandeau de titre de la
   page, par-dessus quatre cartes de chiffres : on ne le voyait pas. Il se
   tient maintenant AU-DESSUS DE LA LISTE qu'il traite. */
.ec-bloc { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; }
.ec-bloc__tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ec-bloc__titres { flex: 1; min-width: 200px; }
.ec-bloc__titres h3 { margin: 0; font-family: var(--font-title); font-size: 15px;
  font-weight: 800; color: var(--ink-900); }
.ec-bloc__titres p { margin: 3px 0 0; font-size: 12px; color: var(--ink-500);
  line-height: 1.45; max-width: 74ch; }
.ec-bloc__actions { flex: none; }
.ec-bloc .ec-table-wrap { border: 0; border-radius: 0; }
.ec-bloc .void { padding: 34px 16px; }
@media (max-width: 640px) {
  .ec-bloc__actions, .ec-bloc__actions .btn { width: 100%; justify-content: center; }
}

/* --- L'avancement, saisi sur la ligne ------------------------------------
   Il ne se saisissait nulle part : le pourcentage s'affichait, mais seul le
   planificateur pouvait l'écrire depuis le PTAB. L'exécutant n'avait que deux
   positions — rien, ou clôturé. */
.ec-col-poids { width: 70px; white-space: nowrap; color: var(--ink-500); }
.ec-col-av { width: 140px; }
.ec-av { white-space: nowrap; }
.ec-av__champ { display: inline-flex; align-items: center; gap: 3px; margin-right: 7px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  padding: 2px 6px 2px 2px; transition: border-color .15s ease, box-shadow .15s ease; }
.ec-av__champ:focus-within { border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--green-100); }
.ec-av__champ input {
  width: 46px; border: 0; background: none; outline: none; padding: 3px 4px;
  font-family: var(--font-title); font-size: 12px; font-weight: 700;
  color: var(--ink-900); text-align: right;
}
.ec-av__champ span { font-size: 11px; color: var(--ink-400); }
/* La confirmation de l'enregistrement : discrète, et sur la cellule
   concernée — un bandeau par ligne saisie serait insupportable. */
.ec-av.est-enregistre { background: color-mix(in srgb, var(--green-600) 12%, transparent); }
.ec-av.est-enregistre .ec-av__champ { border-color: var(--green-600); }

/* --- La fenetre de cloture : on coche, on date, on valide -----------------
   La date d'echeance flottait en bout de ligne a cote d'un nombre de points,
   sans en-tete : on ne savait pas ce qu'on lisait. Les colonnes sont nommees,
   et la date de cloture du lot se saisit au-dessus. */
.ec-lot__intro { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-500); }
.ec-lot__barre { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  background: var(--surface-2); border-radius: var(--r-sm) var(--r-sm) 0 0;
  border: 1px solid var(--line); border-bottom: 0; }
.ec-lot__tout { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; }
.ec-lot__n { margin-left: auto; font-size: 12px; color: var(--ink-400); }
.ec-lot__n.est-actif { color: var(--green-700); font-weight: 700; }
.ec-lot__wrap { max-height: 44vh; overflow: auto; border: 1px solid var(--line);
  border-radius: 0 0 var(--r-sm) var(--r-sm); }
.ec-lot__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ec-lot__table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface);
  text-align: left; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 800; padding: 9px 10px;
  box-shadow: inset 0 -1px 0 var(--line); }
.ec-lot__table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ec-lot__table tbody tr:last-child td { border-bottom: 0; }
.ec-lot__table tbody tr:hover { background: var(--surface-2); }
.ec-lot__table tbody tr.est-cochee { background: var(--green-50, #f1f8f3); }
.ec-lot__co { width: 34px; text-align: center; }
.ec-lot__lib { min-width: 180px; line-height: 1.35; }
.ec-lot__parent { color: var(--ink-500); max-width: 320px; line-height: 1.35; }
.ec-lot__date { white-space: nowrap; width: 100px; }
.ec-lot__pts { width: 60px; text-align: right; color: var(--ink-500); }
.ec-lot__refus { list-style: none; margin: 0; padding: 0; }
.ec-lot__refus li { display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ec-lot__refus li:last-child { border-bottom: 0; }
.ec-lot__refus span { color: var(--red-600); white-space: nowrap; }

/* --- L'historique d'une tache : son parcours, dans l'ordre --- */
.ec-hist { list-style: none; margin: 0; padding: 0; position: relative; }
.ec-hist::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px;
  width: 2px; background: var(--line); }
.ec-h { position: relative; display: flex; gap: 12px; padding: 9px 0; }
.ec-h__pastille { position: relative; z-index: 1; flex: none; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-500); border: 2px solid var(--surface); }
.ec-h--cloture .ec-h__pastille { background: var(--green-100); color: var(--green-700); }
.ec-h--valide .ec-h__pastille { background: var(--green-600); color: #fff; }
.ec-h--refus .ec-h__pastille { background: var(--red-100); color: var(--red-600); }
.ec-h--resoum .ec-h__pastille { background: var(--yellow-100); color: #a3690a; }
.ec-h__corps { flex: 1; min-width: 0; }
.ec-h__tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ec-h__tete b { font-size: 12.5px; }
.ec-h__tete span { font-size: 11.5px; color: var(--ink-500); }
.ec-h__tete time { margin-left: auto; font-size: 11px; color: var(--ink-400); }
.ec-h__motif { margin: 5px 0 0; padding: 8px 11px; background: var(--surface-2);
  border-radius: var(--r-sm); font-size: 12px; line-height: 1.55; color: var(--ink-800); }
.ec-h--refus .ec-h__motif { background: #fdf5f5; }
.ec-h__n { flex: none; font-size: 10px; font-weight: 800; color: var(--ink-300);
  align-self: center; }

/* =======================================================================
   Convocations — poser une réunion dans l'agenda de ceux qu'on encadre.
   Deux colonnes : à gauche QUI (l'organigramme réduit à son encadrement),
   à droite QUOI. L'ordre n'est pas indifférent — on choisit d'abord les
   personnes, et la liste des conflits se remplit à mesure qu'on coche.
   ======================================================================= */

.conv-titre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 14px;
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: 10px; color: var(--ink-700); font-size: var(--fs-sm);
}
.conv-titre svg { color: var(--primary); flex: none; }
.conv-tabs { margin-bottom: 16px; }

.conv-grid {
  display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 16px; align-items: start;
}
@media (max-width: 1080px) { .conv-grid { grid-template-columns: 1fr; } }
.conv-col--gens .panel__body { padding: 0; }

/* --- L'arbre d'encadrement --------------------------------------------- */
.conv-arbre { max-height: 620px; overflow: auto; padding: 6px; }
.conv-branche { border-radius: 9px; }
.conv-branche--n1 { margin-left: 14px; border-left: 2px solid var(--line); padding-left: 6px; }
.conv-branche--n2 { margin-left: 12px; }

.conv-branche__tete {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); margin: 4px 0 2px;
}
.conv-branche__tete:hover { background: var(--green-50); }
.conv-branche__code {
  font-family: var(--font-title); font-weight: 700; font-size: 11.5px;
  color: var(--primary); letter-spacing: .02em;
}
.conv-branche__lib {
  flex: 1; font-size: 12.5px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-branche__n {
  font-size: 11px; font-weight: 700; color: var(--ink-500);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 8px; flex: none;
}
.conv-branche__corps { padding-left: 8px; }

.conv-agent {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.conv-agent:hover { background: var(--surface-2); }
.conv-agent.is-on { background: var(--green-50); border-color: var(--green-100); }
.conv-agent .ident { flex: 1; min-width: 0; }
.conv-agent .ident__name { font-size: 12.5px; }
.conv-agent .ident__meta { font-size: 11px; }
.conv-agent__conflit {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font-size: 11px; font-weight: 600; color: var(--yellow-600);
  background: var(--yellow-50); border: 1px solid var(--yellow-100);
  border-radius: 20px; padding: 1px 7px;
}

/* --- Le formulaire ----------------------------------------------------- */
.conv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.conv-form .full { grid-column: 1 / -1; }
.conv-form .field__aide { font-size: 11.5px; color: var(--ink-500); margin-top: 4px; }
.conv-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.conv-check input { width: 16px; height: 16px; }
.conv-journee { padding-top: 2px; }

.conv-conflits { margin: 0; padding: 0; list-style: none; }
.conv-conflits li {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px;
}
.conv-conflits li:last-child { border-bottom: 0; }
.conv-conflits span { color: var(--ink-500); }

.conv-envoi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}
.conv-envoi__compte { font-size: 13px; color: var(--ink-700); }
.conv-alerte { color: var(--yellow-600); font-weight: 600; }

/* --- Le registre ------------------------------------------------------- */
.conv-liste { display: flex; flex-direction: column; gap: 14px; }
.conv-carte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.conv-carte.is-annulee { opacity: .72; }
.conv-carte__tete {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.conv-carte__quand {
  display: flex; flex-direction: column; gap: 2px; flex: none;
  min-width: 118px; padding-right: 14px; border-right: 1px solid var(--line);
}
.conv-carte__quand b { font-family: var(--font-title); font-size: 13.5px; color: var(--ink-900); }
.conv-carte__quand span { font-size: 12px; color: var(--ink-500); }
.conv-carte__titres { flex: 1; min-width: 0; }
.conv-carte__titre { font-family: var(--font-title); font-weight: 600; font-size: 14.5px; color: var(--ink-900); }
.conv-carte__meta { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
.conv-carte__etat { display: flex; gap: 6px; flex: none; }

.conv-carte__corps { padding: 12px 16px; font-size: 13px; color: var(--ink-700); }
.conv-carte__corps p { margin: 0 0 6px; white-space: pre-wrap; }
.conv-carte__consigne {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--yellow-600); font-weight: 500;
}
.conv-carte__annul {
  padding: 9px 16px; background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-500); border-top: 1px solid var(--line);
}
.conv-carte__lien {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--green-50);
  font-size: 12.5px; color: var(--ink-700);
}
.conv-carte__marep { color: var(--ink-500); font-style: italic; }
.conv-carte__table .sheet { border: 0; border-radius: 0; }
.conv-carte__table .conv-lien,
.conv-carte__table .conv-reponse { font-size: 12px; color: var(--ink-500); }
.conv-carte__pied {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.conv-carte__pied:empty { display: none; }

/* Une entrée d'agenda posée par quelqu'un d'autre doit se voir comme telle. */
.ag-impose {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--info);
  background: #eaf2fa; border: 1px solid #cfe0f0;
  border-radius: 20px; padding: 1px 7px;
}

/* =======================================================================
   Localisation structurée — arrondissement, villages, précision.
   Trois contrôles empilés et un aperçu du texte qui sera enregistré : sans
   cet aperçu, on ne sait pas ce que la saisie produit, et le libellé imprimé
   devient une surprise.
   ======================================================================= */

.loc-pick { display: flex; flex-direction: column; gap: 10px; }
.loc-pick__row { display: flex; flex-direction: column; gap: 5px; }
.loc-pick__lab {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-500);
}
.loc-pick__row select,
.loc-pick__row input[type="text"] {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-900);
}
.loc-pick__row select:focus,
.loc-pick__row input[type="text"]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--green-50);
}
.loc-pick__apercu {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
  background: var(--green-50); border: 1px solid var(--green-100); color: var(--ink-700);
}
.loc-pick__apercu svg { color: var(--primary); flex: none; margin-top: 1px; }
.loc-pick__note { margin: 0; font-size: 12px; color: var(--ink-500); }
.loc-pick__vide {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; margin-bottom: 10px; border-radius: 8px; font-size: 12.5px;
  background: var(--yellow-50); border: 1px solid var(--yellow-100); color: var(--ink-700);
}
.loc-pick__vide svg { color: var(--yellow-600); flex: none; margin-top: 1px; }

/* =======================================================================
   Cadre de suivi des ODD — le tableau 37 du PDC.
   La couleur porte le sens : chaque objectif garde la teinte officielle des
   Nations unies, la même partout dans le monde. En inventer une seconde
   rendrait le document illisible pour qui connaît la première.
   ======================================================================= */

/* --- La roue des dix-sept objectifs ------------------------------------ */
.odd-roue { margin: 0 0 20px; }
.odd-roue__titre {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 9px;
}
.odd-roue__grille {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.odd-tuile {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-500); font: inherit; transition: transform .12s, box-shadow .12s;
}
.odd-tuile b {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink-300); color: #fff; font-size: 13px; font-family: var(--font-title);
}
.odd-tuile span {
  font-size: 11.5px; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.odd-tuile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.odd-tuile.est-couvert { border-color: var(--odd); color: var(--ink-900); }
.odd-tuile.est-couvert b { background: var(--odd); }

/* --- La pastille d'un objectif ----------------------------------------- */
.odd-puce {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 3px 10px 3px 3px; border-radius: 20px;
  background: color-mix(in srgb, var(--odd) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--odd) 35%, transparent);
}
.odd-puce b {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--odd); color: #fff;
  font-family: var(--font-title); font-size: 12px;
}
.odd-puce span { font-size: 11.5px; font-weight: 600; color: var(--ink-700); }
.odd-puce--mini { padding: 2px; }
.odd-puce--mini b { width: 20px; height: 20px; font-size: 11px; }

/* --- La carte d'une cible retenue -------------------------------------- */
.odd-carte {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--odd); border-radius: 12px;
  margin-bottom: 14px; overflow: hidden;
}
.odd-carte__tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--odd) 4%, var(--surface));
}
.odd-carte__titres { flex: 1; min-width: 180px; }
.odd-carte__code {
  font-family: var(--font-title); font-weight: 700; font-size: 14.5px; color: var(--ink-900);
}
.odd-carte__lib { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.odd-carte__meta { display: flex; gap: 12px; font-size: 12px; color: var(--ink-500); }
.odd-carte__actions { display: flex; gap: 6px; }
.odd-carte__vide { margin: 0; padding: 14px 16px; font-size: 12.5px; color: var(--ink-500); }

/* --- Le tableau des indicateurs ---------------------------------------- */
.odd-table { overflow-x: auto; }
.odd-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.odd-table th {
  padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-500);
  background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.odd-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.odd-table tr:last-child td { border-bottom: 0; }
.odd-num { text-align: right; white-space: nowrap; }
.odd-table th.odd-num { text-align: right; }
.odd-fin { width: 1%; white-space: nowrap; }
.odd-ind__code {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-weight: 700; font-size: 12px; color: var(--primary);
}
.odd-ind__lib { font-size: 12.5px; color: var(--ink-700); line-height: 1.35; max-width: 460px; }
.odd-ref__an { display: block; font-size: 10.5px; color: var(--ink-400); }
.odd-elements { max-width: 150px; }
.odd-jeton {
  display: inline-block; margin: 0 3px 3px 0; padding: 1px 7px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-700);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px;
}

/* Le SENS de l'indicateur. Le tableau papier ne le dit pas, et c'est son
   piège : une proportion de pauvreté qui BAISSE est une réussite. Sans ce
   repère, l'écart se lit à l'envers une fois sur deux. */
.odd-sens {
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1;
}
.odd-sens--hausse { background: var(--green-100); color: var(--green-700); }
.odd-sens--baisse { background: #e6f0fa; color: #1e6fb8; }

/* --- Le suivi ---------------------------------------------------------- */
.odd-annees { margin-bottom: 16px; }
.odd-table--suivi td.odd-saisie, .odd-table--suivi th.odd-saisie {
  background: var(--green-50);
}
.odd-table--suivi input[type="number"], .odd-table--suivi input[type="text"] {
  width: 100%; min-width: 84px; padding: 6px 8px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
}
.odd-table--suivi input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-50);
}
.odd-table--suivi input[type="number"] { text-align: right; }
.odd-cible__code { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-500); }

.odd-att {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
}
.odd-att--ok { background: var(--green-100); color: var(--green-700); }
.odd-att--moyen { background: var(--yellow-100); color: var(--yellow-600); }
.odd-att--faible { background: #fde8dc; color: #c2410c; }
.odd-att--nul { background: var(--red-100); color: var(--red-600); }
.odd-att--vide { background: var(--surface-2); color: var(--ink-400); font-weight: 500; }

/* --- Prévoir un trimestre ------------------------------------------------
   Neuf colonnes dont huit chiffrées, et rien ne doit déborder : une barre de
   défilement horizontale sur un tableau de SAISIE fait perdre la colonne qu'on
   est en train de remplir. D'où des en-têtes abrégés, une légende posée en
   haut qui les développe, et des largeurs qui se resserrent avant de rendre
   les armes. */
.prev-onglets { margin: 4px 0 14px; }

.prev-legende {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-600);
}
.prev-legende b { color: var(--ink-800); }
.prev-legende__dot { display: inline-flex; align-items: center; gap: 6px; }
.prev-legende__dot i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--green-600, #0a7d34);
}

.prev-table { overflow-x: auto; }
.prev-table table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  table-layout: fixed;
}
.prev-table th {
  padding: 8px 6px; text-align: right; vertical-align: bottom;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-500); background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.prev-table th i {
  display: block; font-style: normal; font-weight: 500; font-size: 9px;
  text-transform: none; letter-spacing: .04em; color: var(--ink-400);
}
.prev-table td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.prev-table tr:last-child td { border-bottom: none; }
.prev-th-nom { width: auto; text-align: left !important; }
.prev-num { width: 82px; text-align: right; font-variant-numeric: tabular-nums; }
/* La saisie porte un fond, pour qu'on voie d'un coup d'œil les quatre colonnes
   qui attendent une décision et les trois qui se calculent. */
.prev-table th.prev-saisie { background: #eef4fb; color: #1e5fa8; }
.prev-table td.prev-saisie { background: #f7fafd; }
.prev-table td.prev-saisie input {
  width: 100%; min-width: 0; padding: 5px 6px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px; font-variant-numeric: tabular-nums; background: var(--surface);
}
.prev-table td.prev-saisie input:focus {
  outline: none; border-color: var(--green-600, #0a7d34);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-600, #0a7d34) 18%, transparent);
}
.prev-dotation { color: var(--ink-500); }
.prev-niveau {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400);
}
.prev-lib { display: block; color: var(--ink-900); line-height: 1.35; }
.prev-trim { display: block; font-size: 10.5px; color: var(--ink-400); margin-top: 2px; }
/* Une ligne déjà enregistrée pour CE trimestre : la pastille verte de la
   légende. Sans elle, on ne sait plus ce qui reste à décider. */
.prev-table tr.est-prevue .prev-niveau::after {
  content: ""; display: inline-block; margin-left: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-600, #0a7d34); vertical-align: middle;
}

/* Une valeur PROPOSÉE par « Générer » et pas encore enregistrée : fond ambre,
   bord pointillé. En relisant, on doit voir d'un coup d'œil ce que la machine
   a mis et ce qu'on a décidé ; l'enregistrement la rend ordinaire. */
.prev-table td.prev-saisie input.est-genere {
  background: #fff6db; border: 1px dashed #c98a00; color: #6b4a00; font-style: italic;
}
.prev-legende__genere { display: inline-flex; align-items: center; gap: 6px; }
/* Un échelon du plan : ses prévisions sont la somme de ses activités. Pas de
   champ, un fond neutre et le texte en retrait — on lit, on ne saisit pas. */
.prev-table tr.est-agregee td { background: var(--surface-2); }
.prev-table td.prev-agregee { color: var(--ink-600); font-weight: 600; padding-right: 12px; }
.prev-legende__agregee { display: inline-flex; align-items: center; gap: 6px; }
.prev-legende__agregee i {
  width: 14px; height: 9px; border-radius: 2px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
}
/* Adoptées, les prévisions ne se saisissent plus : le champ le montre. */
.prev-table td.prev-saisie input:disabled {
  background: var(--surface-2); color: var(--ink-600); border-style: solid; cursor: not-allowed;
}
/* Plan de consommation : les trimestres que le calendrier planifie portent un
   fond plus soutenu — c'est là que la dépense est attendue. */
.pcc-table td.pcc-planifie { background: #e6f0fa; }
/* Un trimestre non planifié : grisé, sans saisie. */
.pcc-table td.pcc-non-planifie { background: repeating-linear-gradient(
  -45deg, #f3f4f5, #f3f4f5 5px, #eceef0 5px, #eceef0 10px); }
.pcc-table td.pcc-non-planifie input:disabled { background: transparent; border-color: transparent; }
/* Un montant resté dans un trimestre que le calendrier ne prévoit plus. */
.pcc-table td.prev-saisie input.est-hors-calendrier {
  border: 1px solid var(--red-600, #c62828); color: var(--red-600, #c62828);
  background: #fdecea; font-weight: 700;
}
/* « Planifiée : T2 · T3 » : c'est ce qui dit où l'on peut saisir — en rouge
   pour qu'on le lise avant de remplir la ligne. */
.pcc-table .prev-trim.pcc-planifiee { color: var(--red-600, #c62828); font-weight: 700; font-size: 11px; }
.pcc-table .prev-trim.pcc-planifiee--aucune { font-style: italic; }
/* Des montants en millions, pas des taux : 82 px les tronquaient. */
.pcc-table .prev-num { width: 92px; }
.pcc-table tfoot td {
  padding: 8px 6px; border-top: 2px solid var(--line); font-weight: 700;
  background: var(--surface-2); font-variant-numeric: tabular-nums;
}
/* Un cumul ordonnancé au-dessus de l'engagé (ou payé au-dessus de l'ordonnancé). */
.prev-table td.prev-saisie input.est-au-dessus {
  border-color: var(--red-600, #c62828); color: var(--red-600, #c62828); font-weight: 700;
}
.pcc-legende__planifie, .pcc-legende__excede { display: inline-flex; align-items: center; gap: 6px; }
.pcc-legende__planifie i { width: 14px; height: 9px; border-radius: 2px; background: #e6f0fa; border: 1px solid #b9d3ee; }
.pcc-legende__excede i { width: 14px; height: 9px; border-radius: 2px; border: 1px solid var(--red-600, #c62828); }
/* Prévisions : la rubrique indentée, filet à la couleur de son niveau. */
.prev-table td.prev-rubrique { box-shadow: inset 3px 0 0 var(--rubrique, transparent); }
.prev-puces { display: inline-flex; gap: 3px; vertical-align: middle; }
.prev-puce {
  display: inline-block; min-width: 20px; padding: 0 4px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  color: var(--ink-400); background: var(--surface-2); border: 1px solid transparent;
}
.prev-puce.est-planifie { color: #fff; background: #1e6fb8; }
.prev-puce.est-revue { border-color: var(--red-600, #c62828); }
.prev-puce.est-planifie.est-revue { background: var(--red-600, #c62828); }
.prev-resp { color: var(--ink-400); }
.prev-problemes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.prev-legende__genere i {
  width: 14px; height: 9px; border-radius: 2px; flex: none;
  background: #fff6db; border: 1px dashed #c98a00;
}

/* Sous 1100 px, les huit colonnes chiffrées ne tiennent plus : on resserre
   avant d'accepter le défilement, qui reste le dernier recours. */
@media (max-width: 1100px) {
  .prev-table table { font-size: 12px; min-width: 760px; }
  .prev-num { width: 70px; }
  .prev-table th, .prev-table td { padding: 5px 4px; }
}
/* Un montant prévu qui dépasse la dotation de sa ligne : le taux le dit, mais
   il fallait le voir. Cinq millions sur une ligne dotée de deux cent mille
   passaient sans un mot, et l'écart absurde ne se découvrait qu'au point de
   suivi, un trimestre plus tard. */
.prev-table td.est-excede {
  color: var(--red-600, #c62828); font-weight: 700;
  background: color-mix(in srgb, var(--red-500, #eb0000) 8%, transparent);
}

/* Le sélecteur d'agent posé dans l'état vide : sans poste dans la commune
   ouverte, on ne repart pas les mains vides — on choisit qui consulter.
   Le menu déroulant était laissé NU, au style du navigateur, au milieu d'une
   page blanche : c'était le seul geste possible de l'écran, et il ressemblait
   à un oubli. */
.ec-choisir-agent {
  display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 4px;
}
.ec-choisir-agent label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-400);
}
.ec-choisir-agent select {
  min-width: 340px; max-width: 100%;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-700);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.ec-choisir-agent select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100);
}
.ec-choisir-agent__note {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 44ch; text-align: center;
  font-size: 11.5px; color: var(--ink-400);
}
@media (max-width: 640px) { .ec-choisir-agent select { min-width: 0; width: 100%; } }

/* --- La clef de lecture du suivi, posée AVANT le tableau ------------------
   Vingt-cinq colonnes dont trois familles : on ne devine pas d'où vient un
   chiffre en le regardant. La clef le dit une fois, en haut, plutôt que de
   laisser chercher la légende sous trois cents lignes. */
.sv-clef {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 12px; padding: 10px 13px;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-600);
}
.sv-clef b { color: var(--ink-800); }
.sv-clef__item { display: inline-flex; align-items: center; gap: 6px; }

/* Une prévision qui n'existe pas pour la période : un tiret, pas un zéro.
   Un écart de -21 points contre une prévision absente n'est pas un retard,
   c'est une prévision manquante — et le zéro les confondait. */
.sv-aprevoir { color: var(--ink-300); font-weight: 700; }
/* La somme prévue d'un échelon dont une partie des activités n'est pas prévue :
   lisible, mais signalée incomplète. */
.sv-partiel { font-style: italic; color: #8a6100; }
.sv-partiel::after { content: " *"; font-style: normal; font-weight: 800; }

/* Un réalisé RELEVÉ par la commune, et non calculé par l'application : le
   champ le dit, sinon on ne sait pas si le chiffre vient d'une pièce ou
   d'une correction. */
.sv-champ.est-releve {
  border-color: var(--green-600, #0a7d34);
  background: color-mix(in srgb, var(--green-600, #0a7d34) 7%, transparent);
  font-weight: 650;
}
.sv-champ--texte { width: 200px; text-align: left; }
.sv-justif { min-width: 180px; }
.sv-familles .est-paye { color: #0a7d34; background: #eaf6ee; font-size: 10.5px; }
/* Les trois indices d'efficacité, réunis : chacun rapporte un réalisé à son
   prévu, et c'est côte à côte qu'ils disent ce qui décroche — le travail fait,
   la commande passée, ou l'argent sorti. */
.sv-familles .est-indices { color: #6b3fa0; background: #f3eefa; font-size: 10.5px; }
.sv-ligne td.est-indice { background: color-mix(in srgb, #6b3fa0 4%, transparent); }

/* Montants par année : une année décochée ne se chiffre pas. */
.quantite.is-off { opacity: .45; }
.quantite.is-off input { background: var(--surface-2); cursor: not-allowed; }

/* La somme des années face au coût total, sous les yeux pendant la saisie. */
.couts-controle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; color: var(--ink-700);
}
.couts-controle__texte { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.couts-controle__actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.couts-controle__actions .btn { padding: 5px 10px; font-size: 12.5px; }
.couts-controle--ok { border-color: var(--green-600); background: var(--green-50); color: var(--green-800, var(--green-600)); }
.couts-controle--ko { border-color: var(--red-500); background: var(--red-50); color: var(--red-600); }

/* Le refus d'une fenêtre, au pied, à côté du bouton qui l'a provoqué. */
.modal__refus {
  margin: 0 auto 0 0; align-self: center; max-width: 60%;
  color: var(--red-600); font-size: 13px; font-weight: 600; line-height: 1.35;
}
.deliberation-jointe { font-size: 13px; margin-top: 4px; }
.deliberation-jointe button { background: none; border: 0; padding: 0; color: var(--green-600); text-decoration: underline; cursor: pointer; font: inherit; }

/* Étape détaillée d'un modèle : titre de groupe, ses sous-étapes deviennent les tâches. */
.mdl-table tr.est-titre td { background: var(--surface-2); }
.mdl-table tr.est-titre .mdl-table__hors { font-weight: 400; }
.mdl-table tr.est-fille td:nth-child(2) { color: inherit; }

/* Le nombre de fils DIRECTS d'un nœud de l'arbre, à côté de son échelon :
   « PROGRAMME (2) ». */
.pad-node__fils { font-weight: 800; opacity: .85; letter-spacing: 0; }
/* Le calendrier d'une activité du plan annuel, dans la ligne de l'arbre. */
.pad-calendrier { display: inline-flex; align-items: center; gap: 4px; }
.pad-calendrier i { font-style: italic; opacity: .75; }
.pad-calendrier--vide { color: var(--red-600, #c62828); font-weight: 600; }

/* La filiation d'une ligne du plan de consommation, dans la même écriture que
   le sigle de direction : P3 › OS3.1 › R3 › ACTION 3.3 › ACTIVITÉ A-3.3.1. */
.pcc-filiation { font-weight: 700; color: #1e5fa8; letter-spacing: .03em; }

/* --- Suivi : la valeur realisee des indicateurs ---------------------------
   La colonne AB du canevas. Chaque indicateur de l'echelon montre sa cible de
   l'annee et sa valeur realisee, ecrite dans la cible annuelle du PDC. */
.sv-indicateurs { min-width: 230px; vertical-align: top; }
.sv-indics { list-style: none; margin: 0; padding: 0; }
.sv-indic { display: grid; gap: 2px; padding: 4px 6px; border-radius: var(--r-sm);
  transition: background .2s ease; }
.sv-indic + .sv-indic { border-top: 1px dashed var(--line); }
.sv-indic__lib { font-size: 11px; line-height: 1.3; color: var(--ink-700);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-indic__cible { font-size: 10.5px; color: var(--ink-400); }
.sv-indic__sanscible { color: var(--yellow-700, #9a6700); font-style: italic; }
.sv-indic__saisie { display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--ink-400); }
.sv-indic__champ { width: 96px; }
.sv-indic__val { font-size: 11px; color: var(--ink-500); }
.sv-indic.est-enregistre { background: color-mix(in srgb, var(--green-600) 14%, transparent); }
.pcc-maillon { white-space: nowrap; }
/* Le nom de l'echelon devant le numero : « A-1.2.5.1 » en gras ne disait pas
   de QUOI il etait le numero — activite, sous-activite, tache ? */
.pcc-unite {
  display: inline-block; margin-right: 2px; padding: 1px 6px;
  border-radius: var(--r-full); background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); vertical-align: 1px;
}

/* --- Le plan unique : l'unite, puis ses lignes d'imputation ------------------
   La ligne d'unite ne se saisit pas : c'est la SOMME de ses lignes. Elle se lit
   comme un intertitre, et les lignes d'imputation dessous comme son detail. */
.pcc-table tr.pcc-groupe > td {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border-top: 2px solid var(--line);
}
.pcc-groupe__somme { font-weight: 700; color: var(--ink-700); }
.pcc-table tr.pcc-imput > td.prev-th-nom { padding-left: 26px; position: relative; }
.pcc-table tr.pcc-imput > td.prev-th-nom::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
  border-left: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.pcc-imput__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pcc-imput__ligne .cpt { flex: 1 1 240px; }
.pcc-imput__compte { font-size: 12px; color: var(--ink-700); }
.pcc-imput__compte.est-vide { color: var(--yellow-700, #9a6700); font-style: italic; }
.pcc-imput__source { font-size: 11px; color: var(--ink-500); white-space: nowrap; }
.pcc-imput__figee {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--ink-700); background: var(--ink-100, #eef1f4); border: 1px solid var(--ink-200, #dde2e8);
}
.pcc-table tr.pcc-imput--vide > td { color: var(--ink-500); font-size: 12px; font-style: italic; }
.pcc-scinder__somme { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-600); }

/* Le libelle ouvre la fiche, en lecture seule. Un bouton et non un lien : il
   n'y a nulle part ou aller. Il garde l'aspect du texte pour ne pas transformer
   quatre cents lignes en quatre cents boutons bleus, et ne se signale qu'au
   survol et au clavier. */
.pcc-ouvre {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.pcc-ouvre:hover { color: var(--primary); border-bottom-color: currentColor; }
.pcc-ouvre:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

/* Pondération : l'état des enfants de chaque ligne. Coche verte quand leur
   total est juste, point rouge sinon — le DDLP voit d'un coup d'œil où
   descendre. */
.pond2__etat {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
}
.pond2__etat--ok { background: var(--green-600, #0a7d34); }
.pond2__etat--ko { background: var(--red-600, #c62828); width: 11px; height: 11px; margin: 0 3.5px; }
.pond2__ligne.est-ko { box-shadow: inset 3px 0 0 var(--red-600, #c62828); }
.pond2__ligne.est-ok { box-shadow: inset 3px 0 0 var(--green-600, #0a7d34); }
.pond2__etat-texte { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--red-600, #c62828); }

/* Réalisation du PAD : la jauge TEP, puis les trois TEF. */
.pad-jauge { margin-top: 8px; }
.pad-jauge__tete { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--ink-600); margin-bottom: 4px; }
.pad-jauge__tete b { font-size: 13px; color: var(--ink-900); }
.pad-jauge--grande .pad-jauge__tete b { font-size: 24px; font-weight: 800; }
.pad-jauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
@media (max-width: 700px) { .pad-jauges { grid-template-columns: 1fr; } }

/* Décliner en tâches : le poids appliqué se saisit. Fixé à la main, il se
   distingue des poids recalculés. */
.mdl-table__saisie {
  width: 64px; padding: 4px 6px; text-align: right; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.mdl-table__saisie.est-saisi { border-color: #1e6fb8; background: #eef4fb; color: #1e5fa8; }
.mdl-edit__total.est-faux { color: var(--red-600, #c62828); font-weight: 700; }

/* Le choix d'un compte budgetaire : un champ, et la liste qui s'ouvre dessous. */
.cpt { position: relative; min-width: 220px; }
.cpt__champ { width: 100%; }
.cpt__champ:disabled { background: var(--surface-2, #f4f6f8); color: var(--ink-500); cursor: not-allowed; }
.cpt__liste {
  position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 260px; overflow: auto; background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.cpt__choix {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0;
  background: none; font: inherit; font-size: 12.5px; cursor: pointer;
}
.cpt__choix:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cpt__vide { display: block; padding: 8px 10px; font-size: 12px; color: var(--ink-500); }


/* --- Tableau de suivi du plan de consommation ------------------------------
   Les échelons en gras, l'unité sur fond gris clair, les lignes d'imputation
   sur fond crème — la même lecture que le canevas de présentation. */
.sc-table td.sc-code { white-space: nowrap; font-size: 11.5px; color: var(--ink-500); }
.sc-table tr.sc-element > td { font-weight: 700; }
.sc-table tr.sc-unite > td { background: #F4F6F8; }
.sc-table tr.sc-imputation > td { background: #FBF7EC; font-size: 12px; }
.sc-niveau { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); margin-right: 4px; }
.sc-source { color: var(--ink-500); }
.sc-table td.sc-obs { font-size: 11.5px; color: var(--ink-500); min-width: 140px; }
.sc-table tfoot td { padding: 8px 6px; border-top: 2px solid var(--line); font-weight: 700;
  background: #EAF2EC; font-variant-numeric: tabular-nums; }
.sc-table .prev-num { width: 108px; }
.sc-table table { min-width: 1100px; }
/* Des titres longs (« Niveau prévisionnel de consommation ») : ils passent à
   la ligne plutôt que de se chevaucher. */
.sc-table th { white-space: normal; line-height: 1.25; }
.sc-table th.sc-th-code, .sc-table td.sc-code { width: 84px; text-align: left; }
.sc-table th.sc-th-obs { width: 150px; text-align: left; }
.sc-f--bon { color: var(--green-700, #1b7a3a); font-weight: 700; }
.sc-f--moyen { color: var(--yellow-700, #9a6700); font-weight: 700; }
.sc-f--faible { color: var(--red-600, #c62828); font-weight: 700; }
.sc-f--au-dela { color: #1e5fa8; font-weight: 700; }
.sc-pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; margin: 0 2px 0 8px; vertical-align: 0; }
.sc-detail { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-600); }

/* Exécution financière : une ligne sur laquelle on ne peut pas engager dit
   pourquoi, sous son libellé — hors budget, ou hors de l'échelon des crédits. */
.exf-bloquee { margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--yellow-700, #9a6700); }

/* Contrôle avant adoption du plan de consommation. */
.pcc-ctrl__section { margin: 0 0 12px; }
.pcc-ctrl__section h4 { margin: 0 0 3px; font-size: 13.5px; }
.pcc-ctrl__section p { margin: 0 0 5px; font-size: 12.5px; color: var(--ink-500); }
.pcc-ctrl__section ul { margin: 0; padding-left: 18px; font-size: 12.5px; max-height: 160px; overflow: auto; }
.pcc-ctrl__bloquant h4 { color: var(--red-600, #c62828); }
.pcc-ctrl__ok { color: var(--green-700, #1b7a3a); font-weight: 600; }

/* Suivi : une tâche ne porte pas de crédits — tiret discret, pas un zéro. */
.sv-sans-credits { color: var(--ink-400); text-align: center !important; }

/* --- Montant de l'activité à la tranche annuelle ------------------------
   Le montant de l'exercice, celui du PDC quand il diffère, et l'état de la
   répartition : équilibrée, reste à répartir, ou dépassement. */
.pad-montant { display: inline-flex; align-items: center; gap: 4px; }
.pad-montant__pdc { font-size: 11px; color: var(--ink-400); text-decoration: line-through; }
.pad-montant.est-ajuste b { color: #1e5fa8; }
.pad-ecart { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
  padding: 1px 7px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; white-space: nowrap; }
.pad-ecart--ok { background: color-mix(in srgb, var(--green-600, #2e7d32) 12%, transparent); color: var(--green-700, #1b7a3a); }
.pad-ecart--reste { background: #fff4d6; color: var(--yellow-700, #9a6700); }
.pad-ecart--depasse { background: #fdecea; color: var(--red-600, #c62828); }
.pad-montant-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pad-montant-fiche > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); }
.pad-montant-fiche b { font-size: 15px; }
.pad-repartition { overflow-x: auto; }
.pad-repartition__etat { margin: 10px 0 0; }
.pad-repartition tfoot td { font-weight: 700; border-top: 2px solid var(--line); padding-top: 6px; }

/* --- Consommation par source --------------------------------------------
   Une carte par source, trois jauges ; le repère vertical dit ce que le plan
   de consommation prévoyait. Grille fluide : une colonne sur téléphone. */
.src-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 14px; margin: 14px 0; }
.src-carte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  padding: 14px 16px; display: grid; gap: 12px; }
.src-carte.est-ouverte { grid-column: 1 / -1; }
.src-carte__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.src-carte__tete h3 { margin: 0 0 2px; font-size: 15px; }
.src-carte__eff { font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.src-carte__jauges { display: grid; gap: 10px; }
.src-jauge__tete { display: flex; justify-content: space-between; font-size: 12.5px; }
.src-jauge__barre { position: relative; height: 9px; border-radius: 99px; background: var(--surface-2);
  overflow: visible; margin: 4px 0 2px; }
.src-jauge__reel { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.src-jauge__reel--engagement { background: #1e5fa8; }
.src-jauge__reel--ordonnancement { background: #b8860b; }
.src-jauge__reel--paiement { background: var(--green-600, #2e7d32); }
.src-jauge__plan { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-700);
  transform: translateX(-1px); }
.src-jauge__pied { font-size: 11.5px; color: var(--ink-500); text-align: right; }
.src-carte__detail { justify-self: start; background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--primary); font-weight: 600; font-size: 12.5px; display: inline-flex; gap: 4px; align-items: center; }
.src-lignes { overflow-x: auto; }
.src-lignes .num { text-align: right; white-space: nowrap; }
.src-code { white-space: nowrap; font-size: 12px; color: var(--ink-500); }
.src-legende-plan { display: inline-block; width: 2px; height: 11px; background: var(--ink-700); vertical-align: -1px; }

/* --- « Préparer l'impression » ------------------------------------------
   Une fenêtre unique pour tous les documents : raccourcis, aperçu de la page,
   puis les colonnes par famille. Sur téléphone, plein écran : les familles
   passent sur une colonne et le pied (Imprimer) reste toujours visible. */
.imp__corps { display: grid; gap: 16px; }
.imp__raccourcis { display: flex; flex-wrap: wrap; gap: 8px; }
.imp__raccourci {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-700);
  border-radius: var(--r-full); padding: 6px 14px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.imp__raccourci:hover { border-color: var(--primary); color: var(--primary); }
.imp__raccourci:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.imp__apercu { border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  background: var(--surface-2); padding: 12px 14px; display: grid; gap: 10px; }
.imp__page { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; }
.imp__format { display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
  color: #1e5fa8; background: #e8f0fa; border-radius: var(--r-full); padding: 3px 10px; }
.imp__format.est-reduit { color: var(--yellow-700, #9a6700); background: #fff4d6; }
.imp__bande { display: flex; height: 46px; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.imp__segment { position: relative; min-width: 0; border-right: 1px solid #fff;
  background: color-mix(in srgb, var(--primary) 18%, #fff); display: flex; align-items: flex-end;
  transition: flex-basis .2s ease; }
.imp__segment.est-elastique { background: color-mix(in srgb, var(--primary) 34%, #fff); }
.imp__segment i { font-style: normal; font-size: 9.5px; line-height: 1.1; color: var(--ink-700);
  padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.imp__familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px; }
.imp__famille { border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: 10px 12px; }
.imp__famille-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 4px; }
.imp__famille-tete h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-500); }
.imp__famille-tete h4::after { content: attr(data-compte); margin-left: 8px; font-weight: 600;
  color: var(--ink-400); letter-spacing: 0; }
.imp__tout { border: 0; background: none; color: var(--primary); font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 2px 0; }
.imp__liste { list-style: none; margin: 0; padding: 0; }
.imp__col { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.imp__col:hover { background: var(--surface-2); }
.imp__col input { position: absolute; opacity: 0; pointer-events: none; }
.imp__interrupteur { width: 32px; height: 18px; border-radius: 99px; background: #cfd5dc;
  position: relative; transition: background .15s; flex: none; }
.imp__interrupteur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.imp__col input:checked + .imp__interrupteur { background: var(--primary); }
.imp__col input:checked + .imp__interrupteur::after { transform: translateX(14px); }
.imp__col input:focus-visible + .imp__interrupteur { outline: 2px solid var(--primary); outline-offset: 2px; }
.imp__col.est-fixe { cursor: default; opacity: .8; }
.imp__col-txt { display: grid; gap: 1px; min-width: 0; }
.imp__col-txt b { font-size: 13px; font-weight: 600; }
.imp__col-txt small { font-size: 11.5px; color: var(--ink-500); }
.imp__cadenas { color: var(--ink-400); }
.imp__pied { align-items: center; }
.imp__compte { margin-right: auto; font-size: 12.5px; color: var(--ink-500); }

@media (max-width: 640px) {
  .modal-back:has(.imp) { padding: 0; }
  .modal.imp { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .imp__bande { height: 38px; }
  .imp__pied .btn { flex: 1; justify-content: center; }
  .imp__compte { flex-basis: 100%; }
  .imp__pied { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .imp__segment, .imp__interrupteur, .imp__interrupteur::after { transition: none; }
}

/* --- Mon plan de travail : quatre onglets --------------------------------
   Des boutons (et non des div) pour le clavier ; sur téléphone, la rangée
   défile au lieu de se tasser. */
.pt-onglets { display: flex; overflow-x: auto; scrollbar-width: none; }
.pt-onglets::-webkit-scrollbar { display: none; }
.pt-onglets .tab { flex: none; border: 0; background: none; font: inherit; cursor: pointer;
  text-align: left; }
.pt-onglets .tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pt-barre { margin: 14px 0 6px; align-items: flex-end; }
.pt-sous { margin: 4px 0 14px; font-size: 13px; }
@media (max-width: 640px) {
  .pt-barre { flex-wrap: wrap; }
  .pt-barre #pt-imprimer { flex: 1 1 100%; justify-content: center; }
  .pt-barre select { max-width: 100%; }
}

/* --- Paramètres › Importer un canevas de suivi ----------------------------- */
.imp { display: grid; gap: 16px; }
.imp-form { display: grid; gap: 14px; }
.imp-fichier {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: var(--r-sm, 8px); color: var(--ink-700);
  background: var(--surface);
}
.imp-fichier:hover { border-color: var(--primary); color: var(--primary); }
.imp-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.imp-grille label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.imp-grille input, .imp-grille select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-weight: 400;
  background: var(--surface); color: var(--ink-900, inherit); min-width: 0;
}
.imp-grille .imp-large { grid-column: 1 / -1; }
.imp-case { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-700); }
.imp-case input { margin-top: 3px; }
.imp-case--court { align-items: center; white-space: nowrap; }
.imp-case--court input { margin-top: 0; }
.imp-types { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 12px; }
.imp-types .imp-case--court { white-space: normal; }
.imp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-barre { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
.imp-comptes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.imp-pastille {
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--ink-100, #eef1f4); color: var(--ink-700);
}
.imp-anomalies { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.imp-anomalie {
  padding: 8px 12px; border-radius: 6px; font-size: 13px; line-height: 1.45;
  border-left: 3px solid var(--yellow-600, #c47a00); background: var(--yellow-50, #fff8e6);
}
.imp-anomalie--bloquant { border-left-color: var(--red-600, #c0392b); background: var(--red-50, #fdecea); }
.imp-anomalie__l { font-weight: 700; margin-right: 8px; white-space: nowrap; }
.imp-ok { color: var(--green-700); display: flex; gap: 6px; align-items: center; }
.imp-bloque { color: var(--red-600, #c0392b); font-weight: 600; }
.imp-aide { font-size: 12.5px; color: var(--ink-500); margin: 0 0 10px; }
.imp-table-wrap { overflow-x: auto; }
.imp-table { font-size: 12.5px; }
.imp-table td, .imp-table th { white-space: nowrap; }
.imp-table .imp-lib { white-space: normal; min-width: 220px; }
.imp-num { text-align: right; font-variant-numeric: tabular-nums; }
.imp-table tr.est-ecart td { background: var(--red-50, #fdecea); }
.imp-table tr.est-ecart .imp-ecart { color: var(--red-600, #c0392b); font-weight: 700; }
.imp-ecart svg { color: var(--green-700); }
@media (max-width: 640px) {
  .imp-grille { grid-template-columns: 1fr; }
}