/* Compléments d'interface spécifiques à la SPA (modales, toasts, formulaires…) */

/* Layout dynamique */
#app { min-height: 100vh; }
.hidden { display: none !important; }

/* Toasts */
.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary);
  box-shadow: var(--sh-3); border-radius: var(--r-md); padding: 12px 16px; min-width: 260px;
  font-size: 13.5px; animation: slidein .2s ease; }
.toast.err { border-left-color: var(--red-500); }
.toast.ok { border-left-color: var(--green-600); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(15,27,20,.45); display: grid; place-items: center;
  z-index: 900; padding: 20px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }
.modal__head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; justify-content: space-between; }
.modal__head h3 { font-size: 17px; }
.modal__body { padding: 22px; }
.modal__foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.x-btn { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--ink-400); line-height: 1; }

/* Combobox de recherche (components/search-select.js) — remplace un <select>
   natif à longue liste : le navigateur ne laisse aucune prise sur la taille
   ou la position de son propre menu, qui peut déborder de l'écran sans
   recours. Le panneau est ajouté à <body> en position:fixed (jamais imbriqué
   dans .modal, déjà overflow:auto) pour rester entièrement pilotable. */
.search-select { position: relative; }
.search-select__input { width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 14px; outline: none; font-family: var(--font-body);
  background: #fff; color: var(--ink-900); }
.search-select__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100); }
.search-select__panel { position: fixed; z-index: 950; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-3);
  max-height: min(320px, 50vh); overflow-y: auto; padding: 4px; }
.search-select__group-label { font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-400); padding: 8px 10px 4px; }
.search-select__option { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; }
.search-select__option:hover { background: var(--surface-2); }
.search-select__option.is-selected { background: var(--green-50); }
.search-select__option.is-disabled { cursor: not-allowed; opacity: .55; }
.search-select__option-label { font-weight: 500; color: var(--ink-900); }
.search-select__meta { font-size: 11.5px; color: var(--ink-500); }
.search-select__empty { padding: 12px 10px; font-size: 13px; color: var(--ink-500); text-align: center; }

/* Form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field select, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 14px; outline: none; font-family: var(--font-body); background: #fff; }
.field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--green-100); }
/* Responsable d'exécution : type + poste/externe sur une ligne */
.resp-split { display: flex; gap: 8px; flex-wrap: wrap; }
.resp-split > select:first-child { flex: 0 0 150px; }
.resp-split > select:not(:first-child) { flex: 1 1 200px; }

/* Espace de travail (choix commune + année de connexion post-login) */
.year-card { border: 2px solid var(--line); background: #fff; border-radius: var(--r-md);
  padding: 14px 12px; text-align: center; cursor: pointer; transition: border-color .15s, transform .05s; }
.year-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.year-card.is-current { border-color: var(--green-600); background: var(--green-50); }
.year-card__num { font-family: var(--font-title); font-weight: 800; font-size: 22px; color: var(--ink-900); }
.year-card.is-current .year-card__num { color: var(--green-800); }
.year-card__tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-400); margin-top: 4px; }
.year-card.is-current .year-card__tag { color: var(--green-700); }

/* Bannière mode consultation (archive) — cachet jaune officiel */
.archive-banner {
  background:
    repeating-linear-gradient(-45deg, rgba(217,159,0,.05) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, #fff6dc, #fffdf5);
  border-bottom: 1px solid var(--yellow-100);
  padding: 9px 24px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b5400; }
.archive-banner b { color: #4a3900; }
.archive-banner .mini-btn { margin-left: auto; }
.annee-badge { display: flex; align-items: center; gap: 7px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: 7px 13px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-700); cursor: pointer; white-space: nowrap; flex: none;
  transition: border-color .15s, color .15s, background .15s; }
.annee-badge:hover { border-color: var(--primary); color: var(--primary); background: var(--green-50); }
/* La commune ouverte, a la place de l'ancien selecteur d'exercice :
   trois communes dans le systeme, et rien en haut ne disait laquelle. */
.commune-badge { display: flex; align-items: center; gap: 7px; flex: none;
  background: var(--green-50); border: 1px solid color-mix(in srgb, var(--green-600) 25%, transparent);
  color: var(--green-800); border-radius: var(--r-full); padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.is-disabled { opacity: .5; cursor: not-allowed !important; pointer-events: none; }

/* Sélecteur d'exercice (header) — pastille officielle vert drapeau */

/* Toolbar */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .search { margin-left: 0; }
.toolbar .spacer { margin-left: auto; }

/* Empty & loading */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-400); }
.empty__ic { font-size: 34px; margin-bottom: 8px; opacity: .5; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--green-100); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Tableau de bord — bandeau officiel + KPI éditoriaux
   ========================================================================= */
.dash-hero {
  position: relative; overflow: hidden;
  background: var(--weave), linear-gradient(120deg, var(--green-700), var(--green-800) 60%, var(--green-900) 100%);
  border-radius: var(--r-lg);
  padding: 30px 32px 44px;
  color: #fff;
  box-shadow: var(--sh-2);
}
.dash-hero::after { /* fil tricolore cousu en pied de bandeau */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(to right,
    var(--bj-green) 0 34%, var(--bj-yellow) 34% 67%, var(--bj-red) 67% 100%);
  box-shadow: 0 -1px 0 rgba(0,0,0,.28); /* sépare le segment vert du fond vert */
}
.dash-hero__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #ffd75e; margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.dash-hero__kicker::before { content: ""; width: 7px; height: 7px; background: var(--yellow-500);
  transform: rotate(45deg); border-radius: 1px; }
.dash-hero__title {
  font-family: var(--font-title); font-weight: 900; font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -.02em; line-height: 1.1; max-width: 30ch;
}
.dash-hero__meta { margin-top: 10px; font-size: 13px; color: #d6ebdd; }
.dash-hero__meta b { color: #fff; }
.dash-hero__year { /* millésime sérigraphié en fond */
  position: absolute; right: 18px; bottom: -14px; pointer-events: none; user-select: none;
  font-family: var(--font-title); font-weight: 900; font-size: clamp(90px, 15vw, 170px);
  line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.16);
}
/* Les cartes KPI chevauchent le bandeau : le document posé sur le papier en-tête */
.dash-kpis { position: relative; z-index: 2; margin: -26px 18px 18px; }
.dash-kpis .card { box-shadow: var(--sh-2); }

/* Variante « bandeau de page » (PDC…) : plus compact, la barre d'actions
   vient se poser dessus (.dash-overlap), badge lisible sur fond sombre. */
.dash-hero--page { padding: 26px 32px 52px; }
.dash-hero__title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-hero .badge { background: rgba(255,190,0,.14); color: #ffd75e;
  border: 1px solid rgba(255,190,0,.35); }
.dash-hero .badge--red { background: rgba(235,0,0,.18); color: #ff9a9a; border-color: rgba(235,0,0,.4); }
.dash-hero .badge--grey { background: rgba(255,255,255,.1); color: #cfe3d7; border-color: rgba(255,255,255,.2); }
.dash-overlap { position: relative; z-index: 2; margin: -28px 18px 0; box-shadow: var(--sh-2); }
@media (max-width: 900px) {
  .dash-hero--page { padding: 22px 20px 46px; }
  .dash-overlap { margin: -24px 10px 0; }
}

/* Carte budget — encart officiel inversé */
.dash-budget {
  background: var(--weave), linear-gradient(160deg, var(--green-700), var(--green-900));
  color: #fff; border: none;
}
.dash-budget .kpi__label { color: #d6ebdd; }
.dash-budget__amount {
  font-family: var(--font-title); font-weight: 900; font-size: 24px; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; margin: 4px 0 16px;
}
.dash-budget__amount.is-gold { color: var(--yellow-500); margin-bottom: 0; }
.dash-budget hr { border: none; border-top: 1px solid rgba(255,255,255,.18); margin: 18px 0 14px; }
.dash-budget__row { display: flex; justify-content: space-between; font-size: 13px; color: #e2f0e8; }
.dash-budget__row b { color: #fff; }
.dash-budget__row + .dash-budget__row { margin-top: 8px; }

/* Histogramme par direction — colonnes tissées, pointe jaune */
.dash-bars { display: flex; align-items: flex-end; gap: 18px; height: 210px;
  padding-top: 8px; position: relative; }
.dash-bars::before { /* lignes de repère */
  content: ""; position: absolute; inset: 8px 0 34px;
  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%);
  pointer-events: none;
}
.dash-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%; justify-content: flex-end; position: relative; z-index: 1; }
.dash-bar__pct { font-weight: 800; font-family: var(--font-title); font-size: 13px; }
.dash-bar__col {
  width: 58%; max-width: 54px; min-height: 5px; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--green-600), var(--green-800));
  border-top: 4px solid var(--yellow-500);
  transition: height .5s cubic-bezier(.2,.8,.2,1);
}
.dash-bar__label { font-size: 11.5px; font-weight: 600; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .04em; }

/* Entrée en scène du tableau de bord (une seule vague, sobre) */
@keyframes dash-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dash-hero, .dash-kpis .card, .dash-row-2 > .card { animation: dash-rise .45s ease both; }
.dash-kpis .card:nth-child(2) { animation-delay: .06s; }
.dash-kpis .card:nth-child(3) { animation-delay: .12s; }
.dash-kpis .card:nth-child(4) { animation-delay: .18s; }
.dash-row-2 > .card { animation-delay: .22s; }

@media (max-width: 900px) {
  .dash-hero { padding: 24px 20px 40px; }
  .dash-hero__year { font-size: 90px; right: 6px; }
  .dash-kpis { margin: -22px 10px 16px; }
}

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-500);
  cursor: pointer; border-bottom: 2px solid transparent; }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* Tree (organigramme) */
.tree-node { border: 1px solid var(--line); border-radius: var(--r-md); margin: 6px 0; background: var(--surface); }
.tree-node__head { padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tree-node__children { padding: 0 0 8px 26px; }
.chip-code { font-family: var(--font-title); font-weight: 700; font-size: 11px; padding: 2px 8px;
  border-radius: var(--r-sm); background: var(--green-100); color: var(--green-800);
  /* Un code ne se coupe jamais : « A-1.1.1 » sur deux lignes ne se lit plus,
     et la colonne s'étire pour rien. */
  white-space: nowrap; }
.chip-code--neutre { background: var(--ink-100, #eef1f4); color: var(--ink-700, #384552); }

/* Actions inline */
.row-actions { display: flex; gap: 6px; }
.mini-btn { border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 5px 9px;
  font-size: 12px; cursor: pointer; color: var(--ink-700); }
.mini-btn:hover { background: var(--surface-2); }
.mini-btn.danger:hover { background: var(--red-50); color: var(--red-600); border-color: var(--red-100); }

/* Login page needs full width (no app grid) */
body.login-mode { background: var(--bg); }

/* =========================================================================
   Organigramme visuel (schéma hiérarchique coloré, style DGI)
   ========================================================================= */
:root { --oc-line: #c3cec8; }
.orgchart { text-align: center; overflow-x: auto; padding: 10px 10px 30px; }
.orgchart__inner { display: inline-block; min-width: 100%; }

/* Tête : SE + éventuel adjoint */
.oc-head { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.oc-node { border-radius: var(--r-md); box-shadow: var(--sh-2); color: #fff;
  padding: 12px 20px; text-align: center; position: relative; }
.oc-se { background: linear-gradient(135deg, var(--green-800), var(--green-900));
  padding: 16px 30px; min-width: 220px; }
.oc-se .oc-role { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a9cbb6; }
.oc-se .oc-title { font-family: var(--font-title); font-weight: 800; font-size: 18px; margin-top: 2px; }
.oc-se .oc-sub { font-size: 12px; color: #cfe4d8; margin-top: 2px; }

.oc-link-h { width: 46px; height: 3px; background: var(--bj-red); position: relative; }
.oc-adj { background: linear-gradient(135deg, #b23636, var(--bj-red)); min-width: 150px;
  padding: 12px 16px; cursor: pointer; }
.oc-adj .oc-role { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.oc-adj .oc-title { font-family: var(--font-title); font-weight: 700; font-size: 13.5px; margin-top: 2px; }
.oc-adj-ghost { border: 2px dashed var(--ink-300); color: var(--ink-500); background: #fff;
  border-radius: var(--r-md); padding: 12px 16px; min-width: 150px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.oc-adj-ghost:hover { border-color: var(--primary); color: var(--primary); }
.oc-adj-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--ink-500); border: 1px solid var(--line); cursor: pointer; font-size: 14px; line-height: 1; box-shadow: var(--sh-1); }

/* Tige verticale SE → bus */
.oc-stem { width: 3px; height: 26px; background: var(--oc-line); margin: 0 auto; }

/* Branches (directions) */
.oc-branches { display: flex; justify-content: center; list-style: none; padding: 0; }
.oc-branch { position: relative; padding: 26px 7px 0; }
.oc-branch::before, .oc-branch::after { content: ""; position: absolute; top: 0; right: 50%;
  width: 50%; height: 26px; border-top: 3px solid var(--oc-line); }
.oc-branch::after { right: auto; left: 50%; border-left: 3px solid var(--oc-line); }
.oc-branch:only-child::before, .oc-branch:only-child::after { display: none; }
.oc-branch:only-child { padding-top: 26px; }
.oc-branch:first-child::before, .oc-branch:last-child::after { border: 0 none; }
.oc-branch:last-child::before { border-right: 3px solid var(--oc-line); border-radius: 0 8px 0 0; }
.oc-branch:first-child::after { border-radius: 8px 0 0 0; }

/* Boîte direction (couleur par direction via --c) */
.oc-dir { width: 186px; }
.oc-dir__box { background: var(--c); color: #fff; border-radius: var(--r-md); box-shadow: var(--sh-2);
  padding: 12px 14px; text-align: left; position: relative; }
.oc-dir__code { font-family: var(--font-title); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.oc-dir__name { font-size: 11px; line-height: 1.25; opacity: .92; margin-top: 3px; }
.oc-dir__add { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff; border: none; cursor: pointer; font-size: 14px; line-height: 1; }
.oc-dir__add:hover { background: rgba(255,255,255,.4); }

/* Services sous une direction */
.oc-services { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.oc-services::before { content: ""; position: absolute; top: -12px; left: 50%; width: 3px; height: 12px; background: var(--c); opacity: .5; }
.oc-serv { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c);
  border-radius: var(--r-sm); padding: 8px 10px; text-align: left; box-shadow: var(--sh-1); }
.oc-serv__code { font-family: var(--font-title); font-weight: 700; font-size: 11.5px; color: var(--c); }
.oc-serv__name { font-size: 11px; color: var(--ink-700); line-height: 1.25; margin-top: 1px; }
.oc-serv-add { border: 1px dashed var(--ink-300); background: #fff; color: var(--ink-500);
  border-radius: var(--r-sm); padding: 7px; text-align: center; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.oc-serv-add:hover { border-color: var(--c); color: var(--c); }

/* Légende */
.oc-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.oc-legend__item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-700); }
.oc-legend__chip { width: 14px; height: 14px; border-radius: 4px; }

/* Postes + occupants (en bas de chaque carte service) */
.oc-serv__postes { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 4px; }
.oc-poste-row { display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.oc-poste-row .oc-poste-name { color: var(--ink-500); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 70px; }
.oc-poste-occ { margin-left: auto; font-weight: 700; border-radius: var(--r-full); padding: 2px 7px;
  font-size: 10px; cursor: pointer; white-space: nowrap; border: none; }
.oc-poste-occ.occ { background: var(--green-100); color: var(--green-800); }
.oc-poste-occ.vac { background: var(--surface-2); color: var(--ink-400); border: 1px dashed var(--ink-300); }
.oc-poste-add-row { font-size: 10.5px; color: var(--ink-400); background: none; border: none;
  cursor: pointer; text-align: left; padding: 2px 0; }
.oc-poste-add-row:hover { color: var(--primary); }

/* Cartes cliquables → ouvrent la fiche de l'entité */
[data-fiche] { cursor: pointer; transition: box-shadow .12s ease, filter .12s ease; }
.oc-serv__card:hover, .oc-div:hover, .oc-organe:hover, .oc-deconc__card:hover {
  box-shadow: 0 4px 14px -7px rgba(0,0,0,.4); }
.oc-dir__box:hover { filter: brightness(1.06); }
.oc-serv__card:hover .oc-serv__code, .oc-organe:hover .oc-organe__name,
.oc-deconc__card:hover .oc-deconc__code, .oc-div:hover .oc-div__code { text-decoration: underline; }

/* Fiche d'entité (modale au clic) */
.oc-fiche-sub { font-size: 12px; color: var(--ink-400); margin-top: 3px; }
.oc-fiche-holder { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.oc-fiche-holder__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-500); }
.oc-fiche-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Poste-tête (responsable) mis en avant sous chaque entité */
.oc-tete { margin-top: 6px; padding: 5px 7px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c, var(--primary)) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--primary)) 22%, var(--line));
  display: flex; align-items: center; gap: 6px; }
.oc-tete__name { flex: 1; min-width: 0; font-weight: 600; font-size: 10.5px; color: var(--ink-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-tete__badge { flex: none; font-weight: 700; font-size: 9.5px; border-radius: var(--r-full);
  padding: 2px 7px; white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.oc-tete__badge.occ { background: var(--green-100); color: var(--green-800); }
.oc-tete__badge.vac { background: #fff; color: var(--ink-400); border: 1px solid var(--ink-300); }

/* Divisions (sous un service) */
.oc-divisions { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.oc-div { background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-300); border-radius: var(--r-sm); padding: 6px 8px; }
.oc-div__code { font-family: var(--font-title); font-weight: 700; font-size: 10.5px; color: var(--ink-500); }
.oc-div__name { font-size: 10.5px; color: var(--ink-700); line-height: 1.25; }
.oc-div-add { margin-top: 6px; width: 100%; border: 1px dashed var(--ink-300); background: none;
  color: var(--ink-400); border-radius: var(--r-sm); padding: 5px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; }
.oc-div-add:hover { border-color: var(--c); color: var(--c); }

/* Pavé « poste non défini » — lisible, invite à ouvrir la fiche */
.oc-tete--vide { display: block; text-align: center; color: color-mix(in srgb, var(--c, var(--ink-500)) 75%, var(--ink-500));
  font-style: normal; font-weight: 600; font-size: 10px;
  background: color-mix(in srgb, var(--c, var(--primary)) 5%, #fff);
  border: 1px dashed color-mix(in srgb, var(--c, var(--primary)) 40%, var(--ink-300)); }
.oc-hint { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px;
  color: #6b5400; background: var(--yellow-50); border: 1px solid var(--yellow-100);
  border-radius: var(--r-sm); padding: 8px 10px; }
.oc-hint svg { flex: none; color: #b8860b; }

/* Aperçu du poste auto-proposé dans le formulaire de création d'entité */
.oc-poste-preview { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--green-50); border: 1px solid var(--green-100); }
.oc-poste-preview__head { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 700; color: var(--green-800);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }

/* =========================================================================
   Sommet politique / cabinet (au-dessus du Secrétaire Exécutif)
   ========================================================================= */
.oc-pol { display: flex; flex-direction: column; align-items: center; width: 100%; }
.oc-pol--empty { margin-bottom: 6px; }
.oc-pol-cta { display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--bj-red);
  background: color-mix(in srgb, var(--bj-red) 6%, #fff); color: var(--bj-red); font-weight: 700;
  font-size: 13px; border-radius: var(--r-full); padding: 11px 20px; cursor: pointer; transition: .15s; }
.oc-pol-cta:hover { background: color-mix(in srgb, var(--bj-red) 12%, #fff); }
.oc-pol-cta--sm { font-size: 12px; padding: 8px 14px; }
.oc-pol-cta.is-disabled { opacity: .5; pointer-events: none; }
.oc-pol-stem { width: 2px; height: 18px; background: linear-gradient(var(--bj-red), var(--ink-300)); }
.oc-pol-maire { display: flex; justify-content: center; }
.oc-pol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; width: 100%; max-width: 920px; }
.oc-pol-group { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden; }
.oc-pol-group__head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-700);
  background: color-mix(in srgb, var(--bj-red) 6%, var(--surface-2)); border-bottom: 1px solid var(--line); }
.oc-pol-add { border: none; background: none; color: var(--bj-red); font-weight: 700; font-size: 11px;
  cursor: pointer; white-space: nowrap; }
.oc-pol-add:hover { text-decoration: underline; }
.oc-pol-group__body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.oc-pol-empty { color: var(--ink-300); font-size: 12px; text-align: center; padding: 4px; }

.oc-organe { border: 1px solid var(--line); border-left: 3px solid var(--bj-red);
  border-radius: var(--r-sm); background: var(--surface); padding: 8px 10px; }
.oc-organe--maire { border-left: none; border: 2px solid var(--bj-red); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bj-red) 5%, #fff); padding: 12px 18px; min-width: 240px;
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--bj-red) 60%, transparent); text-align: center; }
.oc-organe--maire .oc-organe__name { font-size: 15px; font-family: var(--font-title); }
.oc-organe--maire .oc-organe__top { justify-content: center; }
.oc-organe__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.oc-organe__tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bj-red); }
.oc-organe__edit { border: none; background: none; color: var(--ink-400); cursor: pointer; padding: 2px;
  display: inline-flex; }
.oc-organe__edit:hover { color: var(--bj-red); }
.oc-organe__edit.is-disabled { opacity: .4; pointer-events: none; }
.oc-organe__name { font-size: 12.5px; font-weight: 700; color: var(--ink-900); line-height: 1.25; }
.oc-organe__sigle { font-size: 10px; font-weight: 700; color: var(--ink-400); }
.oc-organe .oc-tete { --c: var(--bj-red); }

/* Services déconcentrés de l'État */
.oc-deconc { margin-top: 16px; }
.oc-deconc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px; }
.oc-deconc__head b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.oc-deconc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.oc-deconc__card { border: 1px solid var(--line); border-top: 3px solid #1e6fb8;
  border-radius: var(--r-md); background: var(--surface); padding: 10px 12px; }
.oc-deconc__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.oc-deconc__code { font-family: var(--font-title); font-weight: 800; font-size: 12px; color: #1e6fb8;
  background: color-mix(in srgb, #1e6fb8 10%, #fff); border-radius: var(--r-sm); padding: 2px 8px; }
.oc-deconc__tut { font-size: 10.5px; color: var(--ink-400); font-weight: 600; }
.oc-deconc__actions { margin-left: auto; display: flex; gap: 4px; }
.oc-deconc__name { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
.oc-deconc__card .oc-tete { --c: #1e6fb8; }

/* Bouton compact */
.btn--sm { padding: 7px 12px; font-size: 12.5px; }

/* Points focaux (onglet Personnel) */
.pf-card { border: 1px solid var(--line); border-top: 3px solid var(--yellow-500);
  border-radius: var(--r-md); background: var(--surface); padding: 12px 14px; }
.pf-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pf-card__ic { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--yellow-50); color: #b8860b; }
.pf-card__actions { display: flex; gap: 4px; }
.pf-card__name { font-size: 14px; font-weight: 700; color: var(--ink-900); line-height: 1.25; }
.pf-card__domaine { font-size: 11.5px; color: var(--ink-400); font-weight: 600; margin-top: 2px; }
.pf-card__holder { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* Historique agent (timeline) */
.hist-sec { margin-bottom: 16px; }
.hist-sec__title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-500); margin-bottom: 8px; }
.hist-list { display: flex; flex-direction: column; }
.hist-item { display: flex; gap: 10px; padding: 2px 0; }
.hist-item__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%;
  background: var(--ink-300); position: relative; }
.hist-item::before { content: ""; }
.hist-item + .hist-item .hist-item__dot::after { content: ""; position: absolute; left: 50%; top: -14px;
  width: 2px; height: 14px; background: var(--line); transform: translateX(-50%); }
.hist-item.is-active .hist-item__dot { background: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.hist-item__body { padding-bottom: 12px; font-size: 13px; }
.hist-item__meta { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }

/* Barre de cycles d'organigramme */
.cycle-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cycle-chip { border: 1px solid var(--line); background: #fff; border-radius: var(--r-full);
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.cycle-chip.is-live::before { content: "● "; color: var(--green-600); }
.cycle-chip.is-active { border-color: var(--primary); background: var(--green-50); color: var(--green-800); }
.cycle-banner { display: flex; align-items: center; gap: 10px; background: var(--yellow-50);
  border: 1px solid var(--yellow-100); border-radius: var(--r-md); padding: 10px 14px; margin-top: 12px;
  font-size: 13px; color: #6b5400; }

/* =========================================================================
   PDC — arbre Programme → Projet → Action (accent couleur via --c)
   ========================================================================= */
.pdc-node { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  border-left: 4px solid var(--c, var(--primary)); overflow: hidden; }
.pdc-node--nested { border-left-width: 3px; margin: 10px 0 10px 22px; background: var(--surface-2); }
.pdc-node__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.pdc-node__title { font-size: 13.5px; cursor: pointer; }
.pdc-node__title:hover { color: var(--primary); text-decoration: underline; }
.pdc-node__body { padding: 0 14px 12px; }
.pdc-toggle { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--ink-400);
  width: 18px; flex: none; }
/* Puce de pondération : mini-jauge + valeur (plus parlant qu'un chiffre nu) */
.pdc-badge-poids { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--ink-700); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 3px 10px 3px 8px; white-space: nowrap; }
.pdc-badge-poids__label { color: var(--ink-400); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .02em; }
.pdc-badge-poids__bar { width: 30px; height: 6px; flex: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); overflow: hidden; }
.pdc-badge-poids__fill { display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, #6d5bd0, #a08cf5); }
.pdc-badge-poids b { font-family: var(--font-title); color: var(--ink-700); }

/* Réordonnancement ▲/▼ — échange avec le voisin immédiat (même parent) */
.pdc-move { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.pdc-move__btn { border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-size: 9px; line-height: 1; width: 16px; height: 13px; padding: 0; color: var(--ink-400);
  border-radius: 2px; display: grid; place-items: center; }
.pdc-move__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--primary); }
.pdc-move__btn:disabled { opacity: .25; cursor: default; }

/* Bandeau de statistiques rapides (nombre de programmes/projets/actions…) */
.pdc-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.pdc-stat { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 16px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pdc-stat:hover { border-color: var(--ink-300); box-shadow: 0 4px 14px rgba(16, 24, 40, .06); transform: translateY(-1px); }
.pdc-stat__icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); font-size: 17px; line-height: 1;
  background: color-mix(in srgb, var(--icon-color, var(--primary)) 14%, white);
  color: var(--icon-color, var(--primary)); }
.pdc-stat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pdc-stat b { font-family: var(--font-title); font-size: 19px; line-height: 1.15; color: var(--ink-700); }
.pdc-stat span { font-size: 10.5px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; }
.pdc-stat--warn { border-color: #f0c766; background: #fffaf0; }
.pdc-stat--warn b { color: #a3690a; }
.pdc-stat__gauge { width: 100%; height: 4px; margin-top: 4px; background: var(--surface-2);
  border-radius: var(--r-full); overflow: hidden; }
.pdc-stat__gauge-fill { display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--icon-color, var(--primary)), color-mix(in srgb, var(--icon-color, var(--primary)) 55%, white)); }
.pdc-stat--warn { background: #fff6e0; border-color: #f0c766; }
.pdc-stat--warn b { color: #a3690a; }

/* Écran Pondérer — repère visuel loi de Pareto (noyau ~80% du poids) */
.pond-pareto-mark { display: none; font-size: 13px; }
.pond-row--pareto { background: #fff8e6; border-radius: var(--r-sm); }
.pond-row--pareto .pond-pareto-mark { display: inline; }
.pond-row--ia { border-left: 3px solid var(--primary); padding-left: 6px !important; }

/* Bascule Arbre / Tableau */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; }
.view-toggle__btn { border: none; background: var(--surface); padding: 6px 14px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; color: var(--ink-500); }
.view-toggle__btn.is-active { background: var(--primary); color: #fff; }

/* Vue tableau — façon grille dense de l'ancien logiciel, adaptée au web.
   Hauteur plafonnée + double défilement contenu dans la boîte : sans ça,
   la barre horizontale native se retrouve tout en bas d'un tableau de
   plusieurs centaines de lignes, hors de portée sans défiler toute la page. */
.pdc-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--r-md); }
.pdc-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.pdc-grid th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-400); padding: 8px 6px; position: sticky; top: 0; z-index: 1; }
.pdc-grid td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.pdc-grid td.table__name { white-space: normal; min-width: 260px; }
.pdc-row--prog { background: color-mix(in srgb, var(--c, var(--primary)) 16%, transparent); font-weight: 600; }
.pdc-row--proj { background: color-mix(in srgb, #0e8a6a 12%, transparent); }
.pdc-row--act { background: color-mix(in srgb, #c47a00 8%, transparent); }
.pdc-grid input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.pdc-grid input[type="checkbox"]:disabled { cursor: default; opacity: .6; }

/* Colonne « Hiérarchie » : indentation + repère visuel par niveau, pour
   que Programme / Projet / Action ne soient jamais sur le même alignement. */
.pdc-tree { white-space: nowrap; }
.pdc-tree__label { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-400); }
.pdc-row--prog .pdc-tree__label { color: var(--ink-700); font-weight: 700; }
.pdc-tree__leaf { color: var(--ink-300); margin-right: 2px; }

/* =========================================================================
   PAD — tableau de pilotage (refonte premium/institutionnelle)
   ========================================================================= */

/* Icônes (trait, currentColor) */
.icon { flex: none; display: inline-block; vertical-align: middle; }
.icon--flip { transform: scaleX(-1); }

/* --- Barre d'actions : hiérarchie claire (principale / secondaires / utilitaires) --- */
.pad-actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pad-actionbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pad-actionbar__spacer { flex: 1; }
/* Le groupe « clé » porte l'action que l'écran existe pour rendre possible :
   il ne se replie sur aucune largeur, contrairement à `data-secondary`. */
.pad-actionbar__group[data-cle] { flex: none; }
.pad-btn--cle { border-color: var(--green-600, #0a7d34); color: var(--green-700, #006828); font-weight: 650; }
.pad-btn--cle:hover { background: color-mix(in srgb, var(--green-600, #0a7d34) 9%, transparent); }
.pad-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; border-radius: var(--r-sm);
  padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-700);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.pad-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-300); }
.pad-btn:active:not(:disabled) { transform: translateY(1px); }
.pad-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pad-btn:disabled { opacity: .5; cursor: not-allowed; }
.pad-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--sh-1); }
.pad-btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.pad-btn--icon { padding: 9px; }
.pad-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.pad-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%;
  animation: spin .6s linear infinite; color: inherit; }
.pad-btn--ghost.is-loading::after { border: 2px solid var(--line); border-top-color: var(--primary); }

/* Menu contextuel (« Plus d'actions », « ⋯ » sur les nœuds) */
.pad-menu-wrap { position: relative; display: inline-block; }
.pad-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3);
  min-width: 200px; z-index: 40; padding: 6px; display: none; }
.pad-menu.is-open { display: block; }
.pad-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; padding: 9px 10px; border-radius: var(--r-sm); font-size: 13px;
  color: var(--ink-700); cursor: pointer; }
.pad-menu__item:hover { background: var(--surface-2); }
.pad-menu__item:disabled { opacity: .45; cursor: not-allowed; }

/* --- Cartes principales (Budget / Progression / Équilibre) --- */
.pad-cards-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pad-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sh-1); }
.pad-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pad-card__icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone, var(--primary)) 14%, white); color: var(--tone, var(--primary)); flex: none; }
.pad-card__title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.pad-card__value { font-family: var(--font-title); font-size: 26px; font-weight: 800; color: var(--ink-900); line-height: 1.15; }
.pad-card__sub { font-size: 12.5px; color: var(--ink-500); margin-top: 4px; }
.pad-card__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pad-card__explain { font-size: 12px; color: var(--ink-500); line-height: 1.5; margin-top: 8px; }
/* Une carte qui MENE quelque part : le compteur de taches ouvre leur tableau.
   Elle comptait sans conduire — on lisait « 88 », puis on cherchait. */
button.pad-card--clic { display: block; width: 100%; text-align: left; font: inherit;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
button.pad-card--clic:hover { border-color: var(--green-600); box-shadow: var(--sh-2);
  transform: translateY(-1px); }
button.pad-card--clic:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* L'avertissement d'un taux qui ne repose pas encore sur des poids. */
.est-avertie { color: #9a6700; }
.pad-card--balance.is-critical { --tone: var(--red-500); }
.pad-card--balance.is-toimprove { --tone: var(--yellow-600); }
.pad-card--balance.is-good { --tone: var(--green-600); }
.pad-card--balance.is-excellent { --tone: var(--green-700); }
.pad-balance-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-full); background: color-mix(in srgb, var(--tone, var(--primary)) 16%, white); color: var(--tone, var(--primary)); }

/* --- Cartes secondaires compactes (Programmes/Projets/Actions/Activités) ---
   `minmax(0, 1fr)` et non `1fr` : `1fr` vaut `minmax(auto, 1fr)`, dont le
   plancher est la largeur min-content de la carte (~130px). À trois ou quatre
   colonnes sur un écran étroit, les pistes refusaient donc de se réduire et
   débordaient du conteneur, rendant toute la page scrollable horizontalement.
   La variante `--3` remplace un `style="grid-template-columns:…"` en ligne :
   posé en attribut, il écrasait les media queries ci-dessous (PDC et PTA
   restaient à trois colonnes jusqu'en 375px). */
.pad-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pad-metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pad-metric { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pad-metric:hover { border-color: var(--ink-300); box-shadow: var(--sh-2); transform: translateY(-1px); }
.pad-metric__icon { 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)) 13%, white); color: var(--tone, var(--primary)); }
.pad-metric__body { display: flex; flex-direction: column; min-width: 0; }
.pad-metric__value { font-family: var(--font-title); font-size: 19px; color: var(--ink-900); line-height: 1.15; }
.pad-metric__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-400); }
.pad-metric__desc { font-size: 11px; color: var(--ink-400); margin-top: 1px; }

/* Carte métrique cliquable (PDC : ouvre la liste du niveau) — le bouton
   enveloppe la carte, le chevron n'apparaît qu'au survol. */
.pad-metric-btn { display: block; position: relative; border: none; background: none;
  padding: 0; text-align: left; cursor: pointer; font: inherit; width: 100%; }
.pad-metric-btn .pad-metric { width: 100%; }
.pad-metric-btn:hover .pad-metric { border-color: var(--green-600); box-shadow: var(--sh-2); transform: translateY(-1px); }
.pad-metric-btn:focus-visible { outline: none; }
.pad-metric-btn:focus-visible .pad-metric { outline: 2px solid var(--primary); outline-offset: 2px; }
.pad-metric-btn__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(-4px);
  color: var(--green-600); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.pad-metric-btn:hover .pad-metric-btn__go, .pad-metric-btn:focus-visible .pad-metric-btn__go {
  opacity: 1; transform: translateY(-50%); }

/* --- Liste détaillée d'un niveau (fenêtre 4 Programmes / 18 Projets / 44 Actions) --- */
.niv-liste { max-height: 430px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.niv-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--primary));
  border-radius: var(--r-md); transition: box-shadow .15s ease, border-color .15s ease; }
.niv-row:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.niv-row__num { font-family: var(--font-title); font-weight: 800; font-size: 12px; color: var(--ink-300);
  flex: none; width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.niv-row .chip-code { flex: none; min-width: 46px; text-align: center; }
.niv-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.niv-row__body b { font-size: 13.5px; line-height: 1.35; }
.niv-row__parent { font-size: 11px; color: var(--ink-400); }
.niv-row__infos { font-size: 12px; color: var(--ink-500); }
.niv-row__meta { flex: none; display: flex; align-items: center; gap: 12px; }
@media (max-width: 640px) {
  .niv-row__meta { display: none; }
  .niv-row__num { display: none; }
}

/* --- Alertes métier --- */
.pad-alerts { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.pad-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-md);
  font-size: 12.5px; line-height: 1.45; }
.pad-alert .icon { margin-top: 1px; }
.pad-alert--warn { background: var(--yellow-50); color: #6b5400; border: 1px solid var(--yellow-100); }
.pad-alert--danger { background: var(--red-50); color: var(--red-600); border: 1px solid var(--red-100); }
.pad-alert--info { background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }
/* Le message dit CE QUI cloche ; le bouton dit OÙ. */
.pad-alert > span { flex: 1; }
.pdc-diag__btn { flex: none; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  border-radius: var(--r-sm); padding: 3px 9px; font-size: 11.5px; font-weight: 700;
  font-family: inherit; opacity: .75; white-space: nowrap; }
.pdc-diag__btn:hover { opacity: 1; }

/* --- Fenêtre d'explication d'un diagnostic --- */
.pdc-diag__bloc { margin-bottom: 18px; }
.pdc-diag__bloc h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500); }
.pdc-diag__bloc p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.pdc-diag__calcul { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pdc-diag__calcul th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.pdc-diag__calcul td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.pdc-diag__depasse { background: var(--red-50); color: var(--red-600); font-weight: 600; }
.pdc-diag__note { margin-top: 8px; font-size: 12px; color: var(--ink-500); }
.pdc-diag__liste { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.pdc-diag__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm);
  padding: 7px 10px; cursor: pointer; font-family: inherit; font-size: 12.5px; }
.pdc-diag__item:hover { border-color: var(--green-600); background: var(--green-50); }
.pdc-diag__item-txt { flex: 1; min-width: 0; }
.pdc-diag__item-txt i { color: var(--ink-500); font-style: normal; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; }
.pdc-diag__item-txt em { display: block; font-style: normal; color: var(--red-600); font-size: 11.5px; }

.field__aide { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-500); line-height: 1.45; }

/* --- Tranche annuelle : choisir ce que l'annee reprend du PDC --- */
.tranche-groupe { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tranche-groupe__tete { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--ink-50, #f7f8fa); border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; }
.tranche-groupe__tete span { flex: 1; min-width: 0; color: var(--ink-700); }
.tranche-groupe__tete em { flex: none; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--ink-500); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.tranche-ligne { display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.tranche-ligne:last-child { border-bottom: 0; }
.tranche-ligne--verrou { opacity: .6; cursor: default; }
.tranche-ligne__lib { flex: 1; min-width: 0; }
.tranche-ligne__nb { flex: none; color: var(--ink-500); font-size: 11.5px; }
.tranche-ligne__budget { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.tranche-ligne__verrou { flex: none; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); }

.pad-sans-resp { color: var(--red-600); font-style: italic; }

.strk__choix { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 12.5px; line-height: 1.55; cursor: pointer; }
.strk__choix.is-fige { opacity: .6; cursor: default; }
.strk__choix input { margin-top: 2px; flex: none; }
.strk__choix b { display: block; }

.confirm-msg { font-size: 13.5px; line-height: 1.6; color: var(--ink-700); }
.confirm-msg p { margin: 0 0 6px; }

/* --- Sélecteur multiple cherchable (partenaires, acteurs) --- */
.multi-picker { display: flex; flex-direction: column; gap: 6px; }
.multi-picker__chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; align-items: center; }
.multi-picker__vide { font-size: 12.5px; color: var(--ink-500); }
.multi-picker__chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 4px 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }
.multi-picker__chip button { border: 0; background: transparent; cursor: pointer; line-height: 1;
  font-size: 15px; color: var(--green-800); padding: 0 3px; border-radius: 999px; }
.multi-picker__chip button:hover { background: var(--green-100); }
.multi-picker__input { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 13px; }
/* Le panneau se borne a la place libre (calcul dans multi-picker.js) et
   garde son pied visible : c'est la sortie explicite, sans quoi une liste de
   deux cents entrees recouvre tout le formulaire. */
.multi-picker__panel { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.multi-picker__liste { overflow-y: auto; padding: 4px; flex: 1 1 auto; min-height: 0; }
.multi-picker__pied { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 10px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 12px; color: var(--ink-500); }
.multi-picker__fermer { border: 1px solid var(--line); background: #fff; color: var(--ink-700);
  border-radius: var(--r-sm); padding: 4px 10px; font-size: 12px; cursor: pointer;
  font-family: var(--font-body); }
.multi-picker__fermer:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); }
.multi-picker__option { flex-direction: row; align-items: baseline; gap: 8px; }
.multi-picker__coche { flex: none; width: 13px; font-weight: 700; color: var(--green-600); }

/* --- Suivi des indicateurs : filtrer, grouper, relever --- */
.ind-filtres { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.ind-filtres .pad-search { flex: 1 1 280px; }
.ind-filtre { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.ind-filtre select { max-width: 380px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 12.5px; text-transform: none;
  letter-spacing: 0; color: var(--ink-700); background: #fff; }

.ind-groupe { margin-top: 14px; }
.ind-groupe__tete { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; background: var(--ink-50, #f7f8fa);
  padding: 9px 13px; cursor: pointer; font-family: inherit; }
.ind-groupe__tete[aria-expanded="false"] { border-radius: var(--r-md); }
.ind-groupe__id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ind-groupe__id b { font-size: 13px; }
.ind-groupe__id em { font-style: normal; font-size: 11px; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .03em; }
.ind-groupe__nb { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-500);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.ind-groupe .sheet { border-top-left-radius: 0; border-top-right-radius: 0; }

.ind-source { display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.ind-cibles { display: block; font-size: 11.5px; color: var(--green-800); margin-top: 2px; }

.ind-resume { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ind-resume > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.ind-resume span { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); }
.ind-resume b { font-size: 15px; }
.ind-releves { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12.5px; }
.ind-releves th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-500); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.ind-releves td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ind-note { margin-top: 10px; font-size: 12px; color: var(--ink-500); }

/* --- Confirmation de suppression : dire ce qui disparaît --- */
.pdc-suppr__impact { background: var(--red-50); border: 1px solid var(--red-100);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.pdc-suppr__impact p { margin: 0 0 6px; }
.pdc-suppr__impact ul { margin: 0; padding-left: 18px; }
.pdc-suppr__impact li { margin: 2px 0; }
.pdc-suppr__cle { display: block; margin-top: 14px; font-size: 12.5px; color: var(--ink-700); }
.pdc-suppr__cle code { font-family: var(--font-title); font-weight: 700; background: var(--ink-100, #eef1f4);
  padding: 1px 6px; border-radius: var(--r-sm); }
.pdc-suppr__cle input { display: block; width: 100%; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: 13px; }
.btn--danger { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(.93); }
.btn--danger:disabled { opacity: .45; cursor: not-allowed; }

/* Branche archivée : visible mais manifestement hors du plan. */
.pdc-noeud--archive > .pad-node__row { opacity: .55; }
.pdc-noeud--archive > .pad-node__row .pad-node__title { text-decoration: line-through; }
.pdc-act--restaurer { width: auto; padding: 0 8px; gap: 5px; font-size: 11px; font-weight: 700;
  color: var(--green-800); border-color: var(--green-600); }
.pdc-suppr__reversible { display: flex; align-items: center; gap: 7px; margin: 12px 0 0;
  font-size: 12.5px; color: var(--ink-500); }

/* Pliage de la vue Tableau : sans lui, trois cent soixante-quinze lignes
   s'ouvrent d'un coup et l'on ne peut plus isoler une branche. */
.pdc-plier { border: 0; background: transparent; color: var(--ink-500); cursor: pointer;
  padding: 0 2px; display: inline-flex; align-items: center; vertical-align: middle; }
.pdc-plier:hover { color: var(--green-700, var(--green-800)); }
.pdc-plier--vide { width: 17px; display: inline-block; }

/* --- Section Structure du PAD : recherche/filtres/vue --- */
.pad-structure-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin: 22px 0 14px; }
.pad-structure-head h3 { font-size: 15.5px; }
.pad-structure-head p { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.pad-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pad-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: 8px 14px; min-width: 220px; }
.pad-search .icon { color: var(--ink-400); }
.pad-search input { border: none; background: none; outline: none; font-size: 13px; width: 100%; color: var(--ink-900); }
.pad-search input::placeholder { color: var(--ink-400); }

/* --- Hiérarchie : nœuds premium avec badge de niveau, ligne de liaison,
   chevron sémantique et métadonnées adaptées (pas seulement une couleur). --- */
.pad-tree { position: relative; }
.pad-node { position: relative; margin-bottom: 10px; }
.pad-node__row { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--c, var(--primary)); border-radius: var(--r-md);
  padding: 12px 14px; flex-wrap: wrap; transition: box-shadow .15s ease, border-color .15s ease; }
.pad-node__row:hover { box-shadow: var(--sh-1); }
.pad-node__toggle { border: none; background: var(--surface-2); color: var(--ink-500); width: 26px; height: 26px;
  border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; flex: none; }
.pad-node__toggle:hover { background: var(--line); }
.pad-node__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pad-node__toggle .icon { transition: transform .15s ease; }
.pad-node__toggle.is-collapsed .icon { transform: rotate(-90deg); }
.pad-node__level { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--c, var(--primary)); border-radius: var(--r-sm); padding: 3px 7px; flex: none; }
.pad-node__title { flex: 1; min-width: 200px; font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
/* Seule l'Activité s'ouvre au clic (Programme/Projet/Action ne font que se
   déplier via le chevron) : l'affordance « cliquable » ne doit apparaître
   que là où un clic fait réellement quelque chose. */
.pad-node__row--activite .pad-node__title { cursor: pointer; }
.pad-node__row--activite:hover .pad-node__title { color: var(--primary); text-decoration: underline; }
.pad-node__title--clickable { cursor: pointer; }
.pad-node__title--clickable:hover { color: var(--primary); text-decoration: underline; }
.pad-node__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-500); }
.pad-node__children { position: relative; margin-left: 28px; padding-left: 16px; margin-top: 8px; }
.pad-node__children::before { content: ""; position: absolute; left: 0; top: 0; bottom: 12px; width: 2px;
  background: var(--line); }
.pad-node--depth-1 .pad-node__row { background: var(--surface-2); }
.pad-node--match { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--primary)) 45%, transparent); }
.pad-node__row--activite { cursor: pointer; }

/* --- Vue tableau : densité et lisibilité --- */
.pdc-grid tbody tr { transition: background .1s ease; }
.pdc-grid tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }

/* --- Squelettes de chargement --- */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skeleton-shine 1.4s ease infinite; border-radius: var(--r-md); }
.skeleton-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.skeleton--card { height: 92px; }
.skeleton-lines { display: flex; flex-direction: column; gap: 10px; }
.skeleton--line { height: 46px; }
@keyframes skeleton-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --- État vide / aucun résultat de recherche --- */
.pad-noresult { text-align: center; padding: 32px 16px; color: var(--ink-400); font-size: 13px; }

/* --- Accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .skeleton, .pad-btn, .toast, .pdc-stat, .pad-metric, .modal-back,
  .dash-hero, .dash-kpis .card, .dash-row-2 > .card, .dash-bar__col { animation: none !important; transition: none !important; }
}

/* --- Responsive --- */
@media (max-width: 1180px) {
  .pad-cards-main { grid-template-columns: 1fr 1fr; }
  .pad-cards-main > :last-child { grid-column: 1 / -1; }
  .pad-metrics, .pad-metrics--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pad-cards-main { grid-template-columns: 1fr; }
  .pad-cards-main > :last-child { grid-column: auto; }
  .pad-metrics, .pad-metrics--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pad-actionbar__group[data-secondary] { display: none; }
  .pad-node__children { margin-left: 14px; padding-left: 10px; }
  .pad-search { min-width: 0; width: 100%; }
  .pad-structure-head { flex-direction: column; align-items: stretch; }
  .pad-btn, .pad-node__toggle { min-height: 40px; }
}
/* Sous ~520px, deux cartes côte à côte n'ont plus la place d'afficher leur
   icône ET leur libellé : on passe à une colonne pleine largeur. */
@media (max-width: 520px) {
  .pad-metrics, .pad-metrics--3 { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Mon PTA (vue personnalisée) + Classification DAAF
   ========================================================================= */
.mpta-tot { text-align: right; font-size: 12.5px; color: var(--ink-500); }
.mpta-tot b { display: block; font-size: 16px; color: var(--ink-900); font-family: var(--font-title); }
.mpta-group { margin-bottom: 14px; }
.mpta-group__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.mpta-group__code { font-family: var(--font-title); font-weight: 800; font-size: 14px; color: var(--primary);
  background: var(--green-50); border-radius: var(--r-sm); padding: 2px 9px; }
.mpta-group__lib { font-size: 13.5px; font-weight: 600; color: var(--ink-700); }
.mpta-table th, .mpta-table td { vertical-align: middle; }
.mpta-mois { display: inline-flex; gap: 2px; }
.mpta-mois__c { width: 15px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; border-radius: 3px; background: var(--surface-2); color: var(--ink-300); }
.mpta-mois__c.on { background: var(--green-600); color: #fff; }

.daaf-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.daaf-metric { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 8px 14px; min-width: 96px; text-align: center; }
.daaf-metric b { display: block; font-size: 20px; font-family: var(--font-title); color: var(--ink-900); line-height: 1; }
.daaf-metric span { font-size: 10.5px; color: var(--ink-500); }
.daaf-metric.is-nc { border-top: 3px solid var(--ink-300); }
.daaf-metric.is-f { border-top: 3px solid var(--green-600); }
.daaf-metric.is-i { border-top: 3px solid #1e6fb8; }

.daaf-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; background: var(--surface-2); }
.daaf-seg__btn { border: none; background: none; cursor: pointer; font-size: 11.5px; font-weight: 600;
  color: var(--ink-500); padding: 6px 11px; white-space: nowrap; transition: background .12s, color .12s; }
.daaf-seg__btn:not(:last-child) { border-right: 1px solid var(--line); }
.daaf-seg__btn:hover { background: #fff; }
.daaf-seg__btn.is-active.non_classe { background: var(--ink-300); color: #fff; }
.daaf-seg__btn.is-active.fonctionnement { background: var(--green-600); color: #fff; }
.daaf-seg__btn.is-active.investissement { background: #1e6fb8; color: #fff; }
#save.is-dirty { box-shadow: 0 0 0 3px var(--green-100); }

/* =========================================================================
   Éditeur de texte riche (fiche de poste) + validation d'organigramme
   ========================================================================= */
.rt { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.rt__bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 8px;
  background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.rt__btn { min-width: 30px; height: 28px; border: 1px solid transparent; background: none; cursor: pointer;
  border-radius: var(--r-sm); font-size: 13px; color: var(--ink-700); line-height: 1; }
.rt__btn:hover { background: #fff; border-color: var(--line); color: var(--primary); }
.rt__sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.rt__area { padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--ink-900);
  outline: none; overflow-y: auto; max-height: 46vh; }
.rt__area:empty::before { content: attr(data-placeholder); color: var(--ink-300); }
.rt__area:focus { box-shadow: inset 0 0 0 2px var(--green-100); }
.rt__area h2 { font-size: 18px; margin: 14px 0 6px; }
.rt__area h3 { font-size: 15px; margin: 12px 0 5px; }
.rt__area p { margin: 6px 0; }
.rt__area ul, .rt__area ol { margin: 6px 0 6px 22px; }
.rt__area li { margin: 2px 0; }
.rt__area blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--green-600);
  background: var(--green-50); color: var(--ink-700); }
.rt__area table { border-collapse: collapse; margin: 8px 0; }
.rt__area td, .rt__area th { border: 1px solid var(--line); padding: 5px 8px; }

/* Bloc PDF joint de la fiche de poste */
.fp-pdf { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); }
.fp-pdf__head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-500); margin-bottom: 8px; }
.fp-pdf__lien { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--primary); text-decoration: none; }
.fp-pdf__lien:hover { text-decoration: underline; }

/* Bandeau « organigramme en brouillon » */
.orga-draft { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
  padding: 11px 14px; border-radius: var(--r-md); font-size: 13px; color: #6b5400;
  background: var(--yellow-50); border: 1px solid var(--yellow-100); }
.orga-draft svg { flex: none; margin-top: 1px; color: #b8860b; }

/* Rapport de migration après validation d'une mise à jour */
.rap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; }
.rap-row:nth-child(odd) { background: var(--surface-2); }
.rap-row b { font-family: var(--font-title); font-size: 15px; }
.rap-row.is-warn { background: var(--yellow-50); color: #6b5400; }
.rap-sep { margin: 14px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-500); }

/* Tableau Année/Coût (formulaire Action du PDC) */
.acy-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.acy-table th { text-align: left; background: var(--surface-2); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-500); padding: 7px 10px; }
.acy-table td { padding: 5px 10px; border-top: 1px solid var(--line); }
.acy-table input[type="number"] { width: 100%; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 13px; }
.acy-year { display: flex; align-items: center; gap: 7px; font-weight: 600; cursor: pointer; }
.acy-table tfoot td { border-top: 2px solid var(--line); font-weight: 800; background: var(--green-50); }
.acy-table tfoot td:first-child { color: var(--ink-500); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .03em; }
.acy-table tfoot td:last-child { color: var(--green-800); font-family: var(--font-title); }

/* Super-admin : sélecteur du catalogue national des communes */
.sa-cat-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-500); background: var(--surface-2); padding: 6px 10px; margin: 8px -6px 4px;
  border-radius: var(--r-sm); position: sticky; top: 0; }
.sa-cat-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; cursor: pointer; padding: 8px 10px;
  border-radius: var(--r-sm); font-size: 13.5px; }
.sa-cat-row:hover { background: var(--green-50); border-color: var(--green-100); }
.sa-cat-code { font-family: var(--font-title); font-weight: 800; font-size: 12px; color: var(--primary);
  background: var(--green-50); border-radius: var(--r-sm); padding: 2px 8px; min-width: 42px; text-align: center; }
.sa-cat-nom { flex: 1; font-weight: 600; color: var(--ink-900); }
.sa-suspended { opacity: .58; }

/* Bannière d'invitation sur la page de connexion */
.auth__invite { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px;
  padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; line-height: 1.5;
  background: var(--green-50); border: 1px solid var(--green-100); color: var(--ink-700); }
.auth__invite svg { flex: none; margin-top: 1px; color: var(--green-700); }
.auth__invite b { color: var(--ink-900); }
.auth__invite--ko { background: var(--red-100); border-color: var(--red-100); color: var(--red-600); }
.auth__invite--ko svg { color: var(--red-600); }

/* Associés d'une activité PAD : combo + Ajouter, puis tableau récapitulatif. */
.assoc-pick { display: flex; gap: 8px; align-items: center; }
.assoc-pick select { flex: 1; }
.assoc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.assoc-table thead th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.assoc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.assoc-table tr:last-child td { border-bottom: none; }

/* Imputation budgétaire : recherche live sur les ~1150 comptes nationaux. */
.imp-results { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm);
  margin-top: 4px; }
.imp-results:empty { border: none; margin-top: 0; }
.imp-result { padding: 8px 10px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--line); }
.imp-result:last-child { border-bottom: none; }
.imp-result:hover { background: var(--surface-2); }
.imp-picked { display: flex; align-items: center; gap: 10px; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }

/* Règles du mot de passe : liste rouge/vert mise à jour en direct. */
.pwd-rules { list-style: none; margin: -6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pwd-rules li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); transition: color .15s; }
.pwd-rules li svg { flex: none; }
.pwd-rules li.is-ko { color: var(--red-500); }
.pwd-rules li.is-ok { color: var(--green-600); }
.pwd-match { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: -8px 0 14px; }
.pwd-match svg { flex: none; }
.pwd-match.is-ko { color: var(--red-500); }
.pwd-match.is-ok { color: var(--green-600); }


/* --- Prevision budgetaire (ecran DDLP) ------------------------------------
   La jauge n'est pas un ornement : cocher, c'est engager de l'argent, et le
   planificateur doit voir le total monter pendant qu'il coche. Sans elle, on
   arbitre a l'aveugle et l'on ne s'apercoit du depassement qu'au PTAB. */
.prevb-jauge { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "txt pct" "bar bar";
  gap: 6px 16px; align-items: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; }
.prevb-jauge__txt { grid-area: txt; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-600); }
.prevb-jauge__txt b { font-family: var(--font-title); font-size: 19px; color: var(--ink-900); }
.prevb-jauge__pct { grid-area: pct; font-family: var(--font-title); font-size: 19px; color: var(--primary); }
.prevb-jauge .progress { grid-area: bar; }
.prevb-case { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.prevb-case input { width: 17px; height: 17px; accent-color: var(--green-600); cursor: pointer; }
/* La cellule porte sa propre couleur de fond : peinte sur le <tr>, elle
   passait sous celle des <td> de la feuille et la ligne restait blanche. */
.prevb-row--oui > td { background: var(--green-50); }
.prevb-jauge .progress { height: 10px; }
.cbar__search { min-width: 260px; }
.btn.is-dirty { box-shadow: 0 0 0 3px var(--yellow-100); }

/* Pastille de prevision budgetaire, sur l'arbre et le tableau du plan annuel.
   « Hors budget » n'est pas une erreur : c'est une ligne du plan que le budget
   de l'exercice ne finance pas encore. Elle reste au plan, mais ne descend
   dans aucun PTAB — d'ou le ton d'attente, pas d'alerte. */
.bud-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-full);
  white-space: nowrap; }
.bud-pill--oui { background: var(--green-100); color: var(--green-700); }
.bud-pill--non { background: var(--surface-2); color: var(--ink-500); border: 1px dashed var(--ink-300); }
.seg--mini .seg__btn { font-size: 12px; padding: 5px 10px; }
.prevb-ext { color: var(--ink-500); font-style: italic; }

/* ---- L'attente ----
   Un ecran blanc pendant deux secondes se lit comme un ecran casse. La marque
   tient le centre, l'arc dit que quelque chose travaille, le texte dit quoi. */
.chargement { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 56px 20px; min-height: 220px; }
/* Le sceau est dense : sous cent pixels il devient une tache verte. On le
   sert donc en 256 et on l'affiche grand — c'est la marque qu'on attend, pas
   une vignette. */
.chargement__marque { position: relative; width: 144px; height: 144px;
  display: grid; place-items: center; }
.chargement__marque img { display: block; width: 104px; height: 104px;
  animation: chargement-respire 2.4s ease-in-out infinite; }
.chargement__arc { position: absolute; inset: 0; width: 144px; height: 144px;
  animation: chargement-tourne 1.15s linear infinite; }
.chargement__piste { fill: none; stroke: var(--green-100, #d8ece0); stroke-width: 4; }
.chargement__trait { fill: none; stroke: var(--primary, #006828); stroke-width: 5;
  stroke-linecap: round; stroke-dasharray: 70 213; stroke-width: 4; }
.chargement__mot { margin: 0; font-size: 13.5px; color: var(--ink-500, #6b7280);
  letter-spacing: .01em; }

@keyframes chargement-tourne { to { transform: rotate(360deg); } }
/* Le logo respire, il ne tourne pas : il porte du texte et treize emblemes,
   en rotation il devient illisible. */
@keyframes chargement-respire {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Chez qui a demande moins de mouvement, une animation permanente n'est pas
   un detail de confort : on l'arrete, l'arc reste lisible a l'arret. */
@media (prefers-reduced-motion: reduce) {
  .chargement__arc, .chargement__marque img { animation: none; }
  .chargement__trait { stroke-dasharray: 213 213; opacity: .45; }
}

/* ---- L'attente PAR-DESSUS l'ecran ----
   Le voile compte autant que le logo : une attente posee dans la zone de
   contenu laisse le reste de la page cliquable, on lance une deuxieme
   navigation par-dessus la premiere, et la plus lente gagne. Ici l'ecran est
   gele le temps du chargement, puis rendu d'un coup. */
.attente {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg, #f4f6f5) 78%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .16s ease;
}
.attente.est-la { opacity: 1; }
.attente__boite {
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8e5);
  border-radius: var(--r-lg, 14px); box-shadow: 0 18px 48px rgba(0,0,0,.16);
  padding: 6px 34px; min-width: 232px;
  transform: translateY(6px) scale(.98); transition: transform .18s ease;
}
.attente.est-la .attente__boite { transform: none; }
/* Dans la boite, l'attente n'a plus besoin de sa hauteur de page. */
.attente .chargement { min-height: 0; padding: 26px 8px 22px; }

@media (prefers-reduced-motion: reduce) {
  .attente, .attente__boite { transition: none; }
}

/* ---- Tableau de bord : d'ou vient le chiffre ---- */
.kpi__label { display: flex; align-items: center; gap: 6px; }
.kpi__aide { flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid currentColor; background: none; color: inherit; opacity: .5;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help; padding: 0; }
.kpi__aide:hover { opacity: 1; }
.kpi__note { margin-top: 8px; font-size: 11px; opacity: .75; line-height: 1.4; }
/* Un chiffre qu'on ne peut pas ouvrir ne sert a rien. */
.kpi--cliquable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi--cliquable:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.kpi--cliquable.is-ouvert { outline: 2px solid currentColor; outline-offset: -2px; }

.dash-retards { margin-bottom: 18px; }
.dash-retards__liste { display: flex; flex-direction: column; gap: 4px;
  max-height: 420px; overflow: auto; }
.dash-retard { display: flex; align-items: center; gap: 12px; padding: 8px 11px;
  border-radius: var(--r-sm); background: var(--surface-2); font-size: 12.5px; }
.dash-retard:nth-child(odd) { background: var(--surface); }
.dash-retard__dir { flex: none; min-width: 46px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; color: var(--ink-400); }
.dash-retard__lib { flex: 1; min-width: 0; line-height: 1.35; }
.dash-retard__lib b { color: var(--primary); }
.dash-retard__ech { flex: none; font-size: 11.5px; color: var(--red-600); white-space: nowrap; }
.dash-retard__mt { flex: none; font-family: var(--font-title); font-size: 12px;
  color: var(--ink-700); white-space: nowrap; }

/* Un seul logo tourne à la fois : tant que le voile d'attente est là, la
   marque restée dans la page s'efface. Sans cela, la page qui pose son propre
   `spinner()` puis appelle `attendre()` en montrait deux — celle du voile et
   celle du fond — et l'écran semblait s'être dédoublé. */
body.attente-en-cours #page .chargement { visibility: hidden; }

/* Le résumé budgétaire de la fenêtre « Sources de financement » d'une
   activité : ce que l'enveloppe autorise, ce que les sous-activités
   consomment déjà, et ce qui reste. Les deux étages puisent au même budget —
   sans ce rappel, le refus du serveur paraît arbitraire. */
.fin-budget { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
  padding: 10px 13px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px; }
.fin-budget__ligne { display: flex; justify-content: space-between; gap: 14px; }
.fin-budget__ligne span { color: var(--ink-500); }
.fin-budget__ligne b.est-trop, .fin-budget__ligne.est-trop b { color: var(--danger); }
.fin-budget__alerte { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0;
  font-size: 12.5px; color: var(--danger); }