@import url(https://fonts.googleapis.com/css2?family=Fraunces:SOFT,WONK,opsz,wght@0,0,9..144,400;0,0,9..144,500;0,0,9..144,600;0,0,9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap);
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ════════════════════════════════════════════════════════════════════════
     CHARTE — principe directeur : toute couleur nomme son rôle en un mot.
     ardoise = accent · sage = favorable · terracotta = alerte · bleu = saisie.
     Une couleur sans rôle n'entre pas dans la charte (cf. carte Charte, Settings
     › Design). Les anciens noms fonctionnels restent en alias le temps du
     balayage page par page — voir bloc « Alias de transition » plus bas.
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Surfaces — échelle d'élévation à 4 niveaux (du plus foncé au clair) ──
     canvas (derrière) < surface-page (zone contenu) < surface-rail (navigation)
     < surface-card (blanc). Relief par le différentiel de valeur + filet. */
  --color-canvas:        #E0DACD;   /* fond, derrière les panneaux (chaud) */
  --color-surface-page:  #ECE8E1;   /* zone contenu / gabarit (greige chaud) */
  --color-surface-rail:  #FBFAF7;   /* barre de navigation (blanc cassé crème) */
  --color-surface-card:  #FFFFFF;   /* cards */
  --color-surface-th:    #FBF8F2;   /* en-tête de table — crème à peine perceptible */
  --color-surface-structure: #F2ECDF;  /* en-tête de bloc des tables de STRUCTURE (P&L / Bilan) — sable chaud */
  --color-border-structure:  #E4D9C2;  /* filet des tables de structure (sable) */
  --color-surface-result:       #FDFCFA;   /* colonne résultat épinglée — crème presque blanc (le filet gauche fait la séparation) */
  --color-surface-result-hover: #F9F6F0;   /* survol colonne résultat */

  /* ── Bordures / filets ───────────────────────────────────── */
  --color-border:        #DED7CB;   /* filet général (cards, séparateurs) */
  --color-border-inner:  #ECE6DC;   /* filets internes de card (tuiles plates) */
  --color-border-rail:   #ECE6DC;   /* filet rail ↔ contenu */

  /* ── Accent — ardoise, SEUL accent du chrome (nav active, survol, onglet
     actif, liserés, barres de graphe réel). Plus de panachage par tenant. ── */
  --color-accent:        #3F6470;   /* accent unique */
  --color-accent-tint:   #F1F5F6;   /* fond figure-clé / surlignage table (clair) */
  --color-accent-tint-strong: #E5ECEE; /* surlignage fort : lignes total de table */
  --color-accent-soft:   #B7C7CD;   /* aplat clair — prévisionnel / extrapolé */
  --color-on-tint:       #3E5B65;   /* texte sur accent-tint */

  /* Rail de navigation — lavis ardoise, intensité MOYENNE (variante « 3 » du
     comparatif à 5 tuiles, 2026-08-15) : plus soutenu que la 2, mais reste un
     lavis (pas une couleur pleine). Retour à cette valeur après l'essai
     terracotta, écarté (conflit de rôle avec l'alerte — voir DesignPage). */
  --color-rail: color-mix(in srgb, var(--color-accent) 26%, var(--color-surface-card) 74%);

  /* ── Variations chiffrées (deltas) — neutre par défaut + flèche ────────── */
  --color-delta-neutral:   #78716C;   /* défaut (= texte atténué) + flèche directionnelle */
  --color-delta-favorable: #5C7A3E;   /* sage */
  --color-delta-alert:     #BA5D4A;   /* terracotta — usage rare */

  /* ── Palette sémantique ──────────────────────────────────── */
  --color-navy:         #2B203E;   /* primaire — titres, KPI, totaux */
  --color-terracotta:   #BA5D4A;   /* ALERTES (n'est plus le défaut « coûts ») */
  --color-sage:         #5C7A3E;   /* produits, positif, profit */
  --color-amber:        #B8862A;   /* secondaire, ponctuel */
  --color-violet:       #5B4F73;   /* 13e mois (réservé métier) */
  --color-gold:         #D4A017;   /* primes, bonus (réservé métier) */
  --color-field-focus:  #2563EB;   /* champs de formulaire UNIQUEMENT (focus/actif) */

  /* ── Alias de transition (retirés en fin de balayage, lot C) ───────────── */
  --color-bg:           var(--color-canvas);        /* ex-taupe #ECE8E1 */
  --color-card:         var(--color-surface-card);
  --color-highlight:    #fef9f0;                     /* surlignage doux (legacy) */
  --color-input:        var(--color-field-focus);    /* ancien « bleu saisie » */

  /* ── Tones dérivés ──────────────────────────────────────── */
  --navy-light:         #EDE9F2;   /* fond navy très clair */
  --navy-mid:           #C5BDD4;   /* bordure navy */
  --navy-dark:          #1F1630;   /* navy hover / foncé */
  --terracotta-light:   #FDEAE6;   /* fond alerte / erreur */
  --terracotta-mid:     #ECA898;   /* bordure alerte */
  --terracotta-dark:    #8A3D2C;   /* texte erreur foncé */
  --sage-light:         #EFF5E8;   /* fond positif */
  --sage-mid:           #8DC076;   /* bordure positif */
  --sage-dark:          #3D5129;   /* texte positif foncé */
  --amber-light:        #FEF3C7;   /* fond warning / secondaire */
  --amber-dark:         #7A4F10;   /* texte warning foncé */

  /* ── Verrou actif ────────────────────────────────────────── */
  --color-lock-bg:      #fef3c7;
  --color-lock-text:    #92400e;
  --color-lock-border:  #fbbf24;

  /* ── Neutres (Tailwind stone) ────────────────────────────── */
  --stone-50:           #FAFAF9;
  --stone-100:          #F5F5F4;
  --stone-150:          #EDEBE8;   /* extra, entre 100 et 200 */
  --stone-200:          #E7E5E4;
  --stone-300:          #D6D3D1;
  --stone-400:          #A8A29E;
  --stone-500:          #78716C;
  --stone-600:          #57534E;
  --stone-700:          #44403C;

  /* ── Mappings fonctionnels ──────────────────────────────── */
  /* Primary = terracotta : réservé aux alertes / actions système (Détacher,
     Settings). Le chrome (nav active, onglets, liserés) utilise --color-accent. */
  --color-primary:       var(--color-terracotta);
  --color-primary-light: var(--terracotta-light);
  --color-text:          #1A1219;
  --color-text-muted:    var(--stone-500);
  --color-value:         var(--color-field-focus);
  --color-value-bg:      #EFF6FF;
  --color-green:         var(--color-sage);
  --color-green-bg:      var(--sage-light);

  /* ── User-input cell convention (Charges sociales / HR EditableCell) ──── */
  /* Three blues : main, light bg, darker text on focus.                     */
  --color-input-bg:      #EFF4FF;
  --color-input-text:    #1D4ED8;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius:    8px;
  --radius-sm: 4px;

  /* ── Layout tokens ──────────────────────────────────────────────────────── */
  /* Horizontal page padding, applied ONCE in App.css/.logike-page-wrap.
     Change this to shift the whole app's gutter — topnav uses the same. */
  --page-px:        32px;
  --topbar-height:  52px;
}

/* Reduce the global gutter on narrow screens so content has room to breathe. */
@media (max-width: 1024px) {
  :root { --page-px: 16px; }
}

body {
  /* Le gabarit occupe tout le viewport (100vh) : la marge par défaut du
     navigateur (8px) laissait un liseré de canvas en haut et à gauche, visible
     depuis que la navigation est ancrée au bord (2026-08-18). */
  margin: 0;
  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #1A1219;
  color: var(--color-text);
  /* Fond = canvas (--color-canvas), niveau le plus bas de l'échelle d'élévation,
     identique pour tous les clients. Le gabarit soudé (rail + contenu) flotte
     dessus ; les cards blanches sont le niveau le plus clair. */
  background-color: #E0DACD;
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ── Utility: narrow page layout ──────────────────────────────────────────── */
.page--narrow {
  max-width: 1100px;
  margin-inline: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   Design system Logike — gabarit unique des pages.
   Une seule source : cards blanches arrondies + en-tête blanc à filet (label en
   petites capitales atténué), KPI à plat, tables sans 2e bande, mise en évidence
   en ardoise (accent-tint). Réf. visuelle : Settings › Design › carte Charte.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Titre de page (sur le crème) ───────────────────────────────────────── */
.lk-title {
  font-family: "Fraunces", Georgia, serif;     /* voix « titre » */
  font-size: 24px;
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  margin: 0 0 2px;
}
.lk-sub {
  font-size: 13px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  margin: 0 0 18px;
}

/* ── Card (1 par section) ───────────────────────────────────────────────── */
.lk-card {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  overflow: hidden;                 /* clippe l'en-tête aux coins arrondis */
  margin-bottom: 18px;
}
/* En-tête de card : surface blanche + filet bas (plus aucune bande colorée).
   Label en petites capitales atténué. */
.lk-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: #fff;
  background: var(--color-surface-card, #fff);
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
}
.lk-card__head small {
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.lk-card__body { padding: 18px 20px; }
.lk-card__body--flush { padding: 0; }       /* pour une table pleine largeur */

/* ── Table dans une card : en-tête de colonnes en texte simple ──────────── */
.lk-card table thead th { background: #fff; }

/* ── Mise en évidence : ardoise (colonne clé claire / total moyen) ──────── */
/* Bandeau réel / prévisionnel — STANDARD (2026-08-17, généralisé aux Rapports
   le 2026-08-20) : au-dessus de la ligne des mois, RÉALISÉ en ardoise claire
   (coins arrondis à gauche), PRÉVISIONNEL en ardoise pleine (arrondis à
   droite). Référence d'origine : .spl-band du Plan produits/services. */
th.lk-band, td.lk-band {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-align: left; padding: 3px 10px; border-bottom: none;
}
th.lk-band--real, td.lk-band--real {
  background: var(--color-accent-tint-strong); color: var(--color-on-tint);
  border-radius: 6px 0 0 6px;
}
th.lk-band--fore, td.lk-band--fore {
  background: var(--color-accent); color: #fff;
  border-radius: 0 6px 6px 0;
}

.lk-hi      { background: var(--color-accent-tint); }                              /* colonne / cellule clé */
.lk-hi-strong { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-card)); } /* total (moyen) */

/* ── Grille KPI à plat (dans une card, séparés par un fin trait) ────────── */
.lk-kpis { display: grid; grid-gap: 0; gap: 0; }
.lk-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 18px;
  border-left: 1px solid #E7E5E4;
  border-left: 1px solid var(--color-border, #E7E5E4);
}
.lk-kpi:first-child { border-left: none; padding-left: 0; }
.lk-kpi .lk-kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #78716C; color: var(--color-text-muted, #78716C); }
.lk-kpi .lk-kpi-val { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: #2B203E; color: var(--color-navy, #2B203E); }
.lk-kpi .lk-kpi-hint { font-size: 11px; color: #78716C; color: var(--color-text-muted, #78716C); }

/* ── Barre latérale : rail d'icônes (toujours visible) + panneau contextuel ──
   ANCRÉE au bord gauche depuis le 2026-08-18 (fin de la pilule flottante) :
   deux colonnes soudées, pleine hauteur, UNE seule surface (celle du panneau
   ouvert, --color-surface-rail), séparée de la page par un filet. Elle POUSSE
   le contenu au lieu de le recouvrir — d'où l'ouverture au clic et non au
   survol : s'élargir au passage de la souris déplaçait la page sous les yeux.
   Rail = ICÔNE SEULE, le nom du module apparaît en infobulle (.sb-tip). */
.sb {
  position: relative;             /* ancre du chevron de bord et du panneau détaché */
  flex: 0 0 auto;
  display: flex;
  min-height: 0;
  z-index: 30;
}

/* Rail d'icônes : même surface que le panneau (UNE seule couleur pour toute
   la navigation, demande 2026-08-18 — le lavis ardoise du rail est abandonné).
   Aucun rayon, aucune ombre, aucune marge : il est soudé au bord de l'écran. */
.sb-rail {
  flex: 0 0 48px;
  width: 48px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-rail);
  border: 0;
  border-right: 1px solid var(--color-border);
  padding: 0 0 12px;
  overflow-y: auto;
}

/* (La marque — symbole + wordmark + badge — vit dans la barre supérieure
   depuis le 2026-08-21 : le rail commence directement par les modules.) */
.sb-rail-modules { display: flex; flex-direction: column; align-items: center; padding: 14px 6px 0; gap: 6px; }
/* Filet de séparation : détache le bloc utilitaire (Savoirs, export) des
   bandes de modules. */
.sb-rail-sep { width: 20px; height: 1px; background: var(--color-border); margin: 4px 0; }

/* Bouton de module dans le rail : ICÔNE SEULE, carrée, liseré ardoise actif —
   le nom vit dans l'infobulle (.sb-tip, portail) déclenchée au survol, pas
   sous l'icône. */
.sb-railbtn {
  position: relative;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-muted);
}
.sb-railbtn:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); border-radius: 10px; }
/* Module actif = pilule ardoise CLAIRE, tracé en accent (2026-08-18, second
   réglage) : l'aplat plein pesait plus que le titre de la page. Le surlignage
   reste dans la famille ardoise de la charte, celle des tables. */
.sb-railbtn.is-active {
  color: var(--color-accent);
  background: var(--color-accent-tint-strong);
  border-radius: 10px;
}
.sb-railbtn.is-active .sb-ic { color: var(--color-accent); }

/* Bloc EXPLOITANT (Chantier, Administration) — 2026-08-26. Ces deux icônes ne
   sont vendues à personne : elles n'existent que pour l'admin Palestre, et
   doivent se distinguer d'un coup d'œil des modules du client. Terracotta de la
   charte (« alertes / actions système »), la couleur que porte déjà l'entrée
   « Admin Palestre » du menu d'administration. Le fond actif suit la même
   famille, pour ne pas mélanger deux signaux. */
.sb-railbtn--ops .sb-ic { color: var(--color-terracotta); }
.sb-railbtn--ops:hover {
  background: color-mix(in srgb, var(--color-terracotta) 10%, transparent);
}
.sb-railbtn--ops:hover .sb-ic { color: var(--color-terracotta); }
.sb-railbtn--ops.is-active {
  background: color-mix(in srgb, var(--color-terracotta) 16%, transparent);
}
.sb-railbtn--ops.is-active .sb-ic { color: var(--color-terracotta); }

/* Icônes : trait affiné, même famille que le reste du chrome. */
.sb-ic { width: 19px; height: 19px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.45; fill: none; stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-muted); }

/* Infobulle du rail — rendue en PORTAIL (document.body), `position: fixed`
   calculée au survol depuis getBoundingClientRect (même pattern que
   InfoTooltip.js) : le rail n'a pas de card à coins arrondis mais garde
   `overflow-y: auto`, qui tronquerait sinon une bulle simplement positionnée
   en absolu. */
.sb-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--color-navy); color: #fff;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 4px 9px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(43, 32, 62, .22);
}

/* ── Coin BAS-GAUCHE fixe (2026-08-15, remplace le pied de rail) ──────────
   Pile de bas en haut : pastille utilisateur · ampoule Savoirs · FAB assistant
   (composant à part, remonté via son propre `bottom` dans AssistantPanel.css).
   Fixe et hors du rail : la capsule courte ne descend plus jusqu'ici, et le
   survol du coin ne déclenche pas le peek du panneau. */
/* UNE seule capsule (demande 2026-08-15) — même matériau que le rail :
   assistant (FAB, positionné dans la réserve du haut) · Savoirs · client ·
   utilisateur. */
/* Pied de barre : réglages / administration / déconnexion en icônes, puis la
   pastille d'identité (2026-08-18 — fin du popover et de la capsule du coin). */
.sb-rail-foot {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 14px;
}
.sb-identity { display: flex; justify-content: center; }

/* Langue — préférence par utilisateur (FR/EN), déplacée dans le pied du volet
   contextuel (au large, plutôt qu'à l'étroit dans le rail 64px). */
.sb-lang { display: inline-flex; gap: 4px; }
.sb-lang__b {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--color-text-muted); padding: 2px 7px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.sb-lang__b:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); }
.sb-lang__b.is-active { background: var(--color-accent-tint-strong); color: var(--color-accent); }

/* Identité = BOUTON du menu utilisateur (façon Grok) : la pastille d'initiales
   ouvre le popover Paramètres / Administration / Déconnexion. */
.sb-identity__btn {
  border: 0; background: transparent; cursor: pointer; padding: 6px 0 4px;
  display: flex; justify-content: center;
}
.sb-identity__initials {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--color-on-tint); background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-soft);
}
.sb-identity__btn:hover .sb-identity__initials,
.sb-identity__btn[aria-expanded="true"] .sb-identity__initials {
  background: var(--color-accent); color: #fff;
}
/* Popover du menu utilisateur — portail (document.body), position fixed
   calculée en JS ; ouvre vers le haut depuis la pastille. */
/* MÊME matériau que le menu des modules (verre teinté du lavis, 2026-08-15) :
   tous les popovers du rail — modules, client, utilisateur — se ressemblent. */
.sb-usermenu {
  position: fixed; z-index: 1300; min-width: 210px;
  background: color-mix(in srgb, var(--color-rail) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--color-accent-soft) 45%, transparent);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(43, 32, 62, .12);
  padding: 6px;
}
.sb-usermenu__id {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border-inner);
}
.sb-usermenu__id b {
  font-size: 12px; font-weight: 600; color: var(--color-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px;
}
.sb-usermenu__id span { font-size: 11px; color: var(--color-text-muted); }
.sb-usermenu__item {
  width: 100%; display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--color-text); text-align: left;
  padding: 7px 10px; border-radius: 8px;
}
.sb-usermenu__item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.sb-usermenu__item .sb-ic { width: 15px; height: 15px; color: currentColor; }
/* Pastille client en tête de capsule : carrée arrondie (≠ du rond utilisateur),
   accent plein — le contexte « chez qui suis-je » se voit d'un coup d'œil. */
.sb-tenant__btn { border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; justify-content: center; }
/* Harmonie de la capsule du coin (2026-08-16) — un dégradé d'une seule
   famille : assistant navy (action) → client ardoise pleine (contexte) →
   utilisateur ardoise claire (identité). */
.sb-tenant__initials {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--color-accent);
}
.sb-tenant__btn:hover .sb-tenant__initials,
.sb-tenant__btn[aria-expanded="true"] .sb-tenant__initials {
  background: var(--color-navy);
}
.sb-usermenu__item.is-active { color: var(--color-accent); font-weight: 600; }

.sb-usermenu--dark {
  background: color-mix(in srgb, var(--color-navy) 94%, transparent);
  border-color: color-mix(in srgb, #ffffff 18%, transparent);
}
.sb-usermenu--dark .sb-usermenu__id { border-bottom-color: rgba(255, 255, 255, .16); }
.sb-usermenu--dark .sb-usermenu__id b { color: #fff; }
.sb-usermenu--dark .sb-usermenu__item { color: rgba(255, 255, 255, .85); }
.sb-usermenu--dark .sb-usermenu__item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sb-usermenu--dark .sb-usermenu__item.is-active { color: #fff; font-weight: 700; }

.sb-usermenu__lang {
  margin-top: 4px; padding: 7px 6px 2px;
  border-top: 1px solid var(--color-border-inner);
  display: flex; justify-content: flex-start;
}

/* ── Colonne 2 : panneau contextuel du module actif ─────────────────────
   Soudé au rail, MÊME surface, pleine hauteur : la navigation est un seul
   bloc d'une seule couleur (2026-08-18). Visible uniquement dépliée. */
.sb-panel-col {
  flex: 0 0 210px;
  width: 210px;
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--color-surface-rail);
  border: 0;
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}
.sb:not(.sb--pinned) .sb-panel-col { display: none; }

/* DÉTACHÉ : le panneau sort du flux et se pose au-dessus du contenu, à droite
   du rail. La zone de travail garde sa largeur pendant qu'on navigue. */
.sb--float .sb-panel-col {
  position: absolute; left: 48px; top: 0; bottom: 0;
  z-index: 40;
  border-right: 1px solid var(--color-border);
  box-shadow: 6px 0 22px rgba(43, 32, 62, .14);
}

/* Nom de la marque, en tête du panneau : il n'apparaît qu'une fois la barre
   dépliée (demande 2026-08-18). */
.sb-panel-brand {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .22em;
  color: var(--color-navy);
}

.sb-panel-head {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-inner);
}
/* Nom du module : SOUS le filet, avec le bouton fermer au bout de sa ligne. */
.sb-panel-modrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 12px 8px 16px;
}
/* PUNAISE — elle ne dit pas « fermer », elle dit « reste ouvert ou non ».
   Ancrée (is-docked) : le panneau pousse le contenu. Détachée : il flotte
   au-dessus et s'efface dès que la souris quitte la navigation. Discrète au
   repos, révélée au survol du panneau — sauf détachée, où l'état doit se voir. */
.sb-panel-pin {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
  opacity: 0; transition: opacity .15s ease, background .12s, color .12s;
}
.sb-panel-col:hover .sb-panel-pin,
.sb-panel-pin:focus-visible { opacity: 1; }
.sb--float .sb-panel-pin { opacity: 1; }
.sb-panel-pin.is-docked { color: var(--color-accent); }
.sb-panel-pin:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }

/* CHEVRON À CHEVAL sur le filet — il ouvre et ferme le panneau. Il vit DANS
   le filet, ne vole aucune place, et suit le bord : replié il se retrouve au
   bord du rail, où il reste visible en permanence (sinon plus rien ne dit
   comment rouvrir). */
.sb-edge {
  position: absolute; top: 14px; left: 100%;
  transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer; z-index: 45;
  box-shadow: 0 1px 4px rgba(43, 32, 62, .12);
  opacity: 0; transition: opacity .15s ease, color .12s, border-color .12s;
}
.sb:hover .sb-edge,
.sb-edge:focus-visible { opacity: 1; }
.sb:not(.sb--pinned) .sb-edge { opacity: 1; }
.sb:not(.sb--pinned) .sb-edge svg { transform: scaleX(-1); }
.sb-edge:hover { color: var(--color-accent); border-color: var(--color-accent-soft); }
.sb-panel-title {
  display: flex; align-items: center; gap: 6px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px; font-weight: 600; color: var(--color-navy); line-height: 1.1;
}

/* Ligne client (tenant) AU-DESSUS du nom du module (2026-08-12) : mise en
   évidence par la couleur d'accent, sans pastille — les deux textes partagent
   le même bord gauche. */
.sb-tenantbar { display: flex; align-items: center; margin: 0 0 12px; }
.sb-tenantbar select,
.sb-tenantbar .sb-brand__tenant-name {
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--color-accent);
  background: transparent; border: none; cursor: pointer; padding: 0;
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sb-panel-body { flex: 1 1; min-height: 0; overflow-y: auto; padding: 6px 0 10px; }

/* Pied du volet : identité en clair, centrée sur la MÊME hauteur que la
   pastille du rail (36px de pastille à 12px du bas → centre à 30px). */
.sb-panel-foot {
  flex: 0 0 auto;
  height: 60px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 0 16px;
}
.sb-panel-user {
  font-size: 12px; font-weight: 600; color: var(--color-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-panel-userrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-panel-role {
  font-size: 11px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Sous-items (sections du module) ──────────────────────────────────── */
.sb-sub {
  width: auto;
  display: flex; align-items: center;
  margin: 1px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit; font-size: 12.5px;
  color: var(--color-navy);          /* lecture = navy */
  background: transparent; border: none;
  cursor: pointer; text-align: left;
}
.sb-sub:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
/* Section active : SANS fond (demande 2026-08-15) — couleur d'accent, graisse
   et liseré gauche seuls. Le surlignage plein reste réservé au module actif
   du rail ; ici, plus sobre, la colonne de gauche respire. */
/* Section active : même aplat clair que l'icône du module — assez pour se
   repérer dans une liste longue, sans crier. */
.sb-sub.is-active {
  color: var(--color-accent); font-weight: 600;
  background: var(--color-accent-tint-strong);
}
.sb-sub.is-active .sb-sub-mark { color: var(--color-accent); }
.sb-sub:focus:not(:focus-visible) { outline: none; }
.sb-sub:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sb-lbl { flex: 1 1; }

/* Tête de groupe d'étapes (ex. Planification : Réglages / Stratégie / …). */
.sb-sub-h {
  font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 10px 16px 3px 18px;
}
/* Étape de synthèse (Σ Compte de résultat, Σ Bilan) : en gras. */
.sb-sub--strong { font-weight: 700; }

/* Groupes : plus de teinte ambre par item (illisible sur le verre teinté,
   2026-08-15) — la tête de groupe (petites capitales + crayon) suffit. */

/* Respiration entre les blocs du panneau (Rapports · Calculs · Données). */
/* Espacement entre BLOCS du panneau (remplace l'ex-marge des têtes). */
.sb-group + .sb-group { margin-top: 16px; }

/* Groupe CLIENT du panneau Administration : l'en-tête porte le NOM du client
   visé — accent ardoise + filet supérieur pour trancher avec la plateforme. */
.sb-group--client { border-top: 1px solid var(--color-border); padding-top: 8px; }
.sb-group--client .sb-sub-h { color: var(--color-accent); font-size: 10px; }

/* Entrée hors périmètre client (Admin Palestre) : rouge charte = alerte. */
.sb-sub--danger,
.sb-sub--danger .sb-lbl { color: var(--color-terracotta); }
.sb-sub--danger:hover { background: color-mix(in srgb, var(--color-terracotta) 8%, transparent); }
.sb-sub--danger.is-active {
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 12%, transparent);
}

/* Marqueur « · » saisie / réglage. */
.sb-sub-mark { flex: 0 0 15px; margin-right: 9px; color: #928C80; display: inline-flex; align-items: center; }
.sb-sub-ic { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Icône portée par une TÊTE de groupe (ex. ✎ sur « Calculs et supports »). */
.sb-sub-h__ic { display: inline-flex; margin-left: 5px; vertical-align: -2px; }
.sb-sub-h__ic .sb-sub-ic { width: 10px; height: 10px; }
.sb-sub--input   { color: var(--color-navy); }
.sb-sub--setting { color: color-mix(in srgb, var(--color-navy) 72%, transparent); }
/* `muted` = ton seul, sans changer le rôle de la section (2026-08-21). Sert à
   ce qu'un groupe se lise d'une seule voix : dans « Saisie & réglages », la
   saisie ressortait plus sombre que les réglages, sans que la différence dise
   quoi que ce soit d'utile. */
.sb-sub--muted   { color: color-mix(in srgb, var(--color-navy) 72%, transparent); }

/* Marqueurs proto : losange (stratégie) · pastille numérotée · pastille Σ (total).
   Tous en pastille ronde 18px pour un rythme visuel homogène. */
.sb-sub-num, .sb-sub-mark--dia {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  justify-content: center; font-size: 10px; font-weight: 700;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
}
.sb-sub-num--sig { background: var(--color-accent); color: var(--color-surface-card); }
.sb-sub.is-active .sb-sub-num--sig { color: var(--color-surface-card); }

/* Tag d'item (ex. « simulé »). */
.sb-sub-tag { font-size: 9.5px; letter-spacing: .02em; color: var(--color-text-muted); margin-left: 8px; flex: 0 0 auto; }

/* ── Layout shell — cadre soudé unique (rail + panneau + contenu) ─────────
   app-body = LE cadre : bordure + coins arrondis, hauteur fixe, overflow caché.
   Le défilement vit DANS la zone contenu (.logike-page-wrap). Contenu décalé de
   la largeur du rail (détaché) ou rail + panneau (épinglé). */
/* Coquille : barre supérieure pleine largeur, puis (navigation | contenu). */
.app-shell { display: flex; flex-direction: column; height: 100vh; }

.app-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-surface-page);
}
/* Colonne de droite : barre supérieure + contenu. Aucun décalage à calculer —
   la navigation est un frère de gauche, elle prend sa largeur dans le flux. */
.app-main {
  position: relative;              /* ancre de l'assistant (coin bas-gauche) */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-body .logike-page-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-surface-page);
  padding: 0 28px 16px;
}
/* Respiration haute UNIQUE de la zone contenu (12px) : avec les 46px de barre
   supérieure, le titre de page tombe à la hauteur du nom de module. */
.app-body .logike-page-wrap > * { padding-top: 12px; }

/* Badge d'environnement sous le logo (déduit du nom d'hôte — jamais en prod) :
   DEV = ambre (on n'est pas chez le client), LOCAL = atténué. */
/* Environnement : surlignage PLEIN — ambre en LOCAL, terracotta en DEV
   (demande 2026-08-18). C'est un avertissement gradué : machine de travail
   d'un côté, serveur partagé de l'autre. Rien ne s'affiche en production. */
.sb-env {
  font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
  border-radius: 5px; padding: 2px 5px; line-height: 1;
  color: var(--color-surface-card);
}
.sb-env--local { background: var(--color-amber); }
.sb-env--dev   { background: var(--color-terracotta); }

/* Page sans export : simple repère atténué. */
.sb-railbtn--off { opacity: .38; cursor: default; }
.sb-railbtn--off:hover { background: transparent; }

/* Environnement : PASTILLE derrière la marque (2026-08-18, remplace le triangle
   plié dans le coin de l'écran). Barre repliée, la marque est cachée : un point
   de la même couleur se pose sur le logo. */
.sb-panel-brand-row { display: flex; align-items: center; gap: 8px; }
.sb-envdot {
  position: absolute; top: 4px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
}
.sb-envdot--local { background: var(--color-amber); }
.sb-envdot--dev   { background: var(--color-terracotta); }
.sb--pinned .sb-envdot { display: none; }


/* YearPicker — sélecteur d'année compact. Repris de l'ancien .people-hub__year. */

.year-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.year-picker__select {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

.year-picker__arrow {
  appearance: none;
  width: 24px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-navy);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.year-picker__arrow:hover { background: var(--color-bg); }

/* ReportingControls — cluster « contexte de reporting » (année + dernier mois
   réel clôturé) posé à droite du titre par PageHeader. Style aligné sur
   YearPicker (charte : blanc, bordure fine, coins 6px). */

.reporting-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Deux pastilles propres (Année · Réel) : le filet est porté par la pastille,
   pas par chaque contrôle interne — plus de cadres dans le cadre. */
.reporting-controls .year-picker,
.reporting-controls__closed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 4px 8px;
}

/* Contrôles internes : sans bordure ni fond propres (fondus dans la pastille). */
.reporting-controls .year-picker__select,
.reporting-controls .year-picker__arrow,
.reporting-controls__month,
.reporting-controls__select {
  border: none;
  background: transparent;
}
.reporting-controls .year-picker__arrow { width: 20px; height: 22px; }
.reporting-controls .year-picker__arrow:hover,
.reporting-controls .year-picker__select:hover,
.reporting-controls__month:hover {
  background: var(--color-bg);
  border-radius: 6px;
}

.reporting-controls__flag { white-space: nowrap; }

.reporting-controls__month,
.reporting-controls__select {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  padding: 3px 6px;
  color: var(--color-text);
  cursor: pointer;
}

.reporting-controls__month.is-empty { color: var(--color-text-muted); font-style: italic; }

/* Saisie de la clôture : mois + année en listes déroulantes (un
   <input type="month"> n'est pas géré par Safari). */
.reporting-controls__month-edit { display: inline-flex; align-items: center; gap: 2px; }
.reporting-controls__select { appearance: auto; cursor: pointer; }
.reporting-controls__select:hover { background: var(--color-bg); border-radius: 6px; }
.reporting-controls__done {
  border: none; background: transparent; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 3px 5px;
  color: var(--color-accent);
}
.reporting-controls__done:hover { background: var(--color-bg); border-radius: 6px; }

/* Clôture en LECTURE (l'édition vit dans Finance › Paramètres) : plus de survol
   cliquable, le curseur ne promet pas une action qui n'existe plus ici. */
.reporting-controls__closed--readonly .reporting-controls__month { cursor: default; }
.reporting-controls__closed--readonly .reporting-controls__month:hover {
  background: transparent;
}

/* Export de la vue courante — l'icône télécharger, à droite de l'exercice dans
   la barre supérieure. Menu Excel · PDF ; atténuée si la page ne déclare rien. */
.app-export { position: relative; }
.app-export__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-muted);
}
.app-export__btn:hover:not(:disabled) { background: var(--color-accent-tint); color: var(--color-accent); }
.app-export__btn:disabled { cursor: default; opacity: .35; }
.app-export__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1300;
  min-width: 150px; padding: 6px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(43, 32, 62, .12);
}
.app-export__item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  text-align: left; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--color-text);
  padding: 7px 10px; border-radius: 8px;
}
.app-export__item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.app-export__item svg { flex: 0 0 auto; }

/* Barre supérieure : contexte client, hors navigation. Elle partage la surface
   de la zone contenu — c'est une bande de la page, pas un bandeau de chrome. */
.app-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 46px;
  padding: 0;
  /* Couleur du rail + filet qui TRAVERSE tout (pleine largeur, 2026-08-21). */
  background: var(--color-surface-rail);
  border-bottom: 1px solid var(--color-border);
}

/* ── LA GRILLE DE GAUCHE (2026-08-20) ────────────────────────────────────
   La barre supérieure se cale sur les MÊMES abscisses que la navigation :
   le bloc de marque a exactement la largeur de la navigation, si bien que le
   filet qui le ferme tombe pile sur celui du panneau — au lieu de flotter à
   une cinquième abscisse. Panneau ouvert : rail (48) + panneau (210). Replié :
   le rail seul, et le wordmark s'efface comme le fait le panneau. */
.app-topbar__brand-wrap {
  flex: 0 0 auto;
  width: 48px;
  padding: 0;
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  transition: width .22s ease;
}
.app-topbar--navwide .app-topbar__brand-wrap { width: 258px; }
.app-topbar:not(.app-topbar--navwide) .app-topbar__brand { display: none; }

/* Zone de droite : elle démarre à la gouttière du contenu (28 px), la même
   que .logike-page-wrap — client, statut et exercice partagent donc le bord
   gauche des titres de page. */
.app-topbar__rest {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
}

.app-tenant { position: relative; }
.app-tenant__btn {
  display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 5px 8px 5px 5px; border-radius: 10px;
}
.app-tenant__btn:hover { background: var(--color-accent-tint); }
.app-tenant__initials {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--color-surface-card); background: var(--color-accent);
}
.app-tenant__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px; font-weight: 600; color: var(--color-navy);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-tenant__caret {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: var(--color-text-muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.app-tenant__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1300;
  min-width: 230px; padding: 6px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(43, 32, 62, .12);
}
.app-tenant__item {
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--color-text);
  padding: 7px 10px; border-radius: 8px;
}
.app-tenant__item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.app-tenant__item.is-active { color: var(--color-accent); font-weight: 600; }

/* Séparateur entre le client et le contexte temporel (exercice · réel). */
.app-topbar__sep {
  width: 1px; height: 18px; flex: 0 0 auto;
  background: var(--color-border);
  margin: 0 4px;
}

/* Exercice ‹ › poussé à droite : place fixe de l'année (grammaire d'écran,
   2026-08-18) — le statut du réel reste à gauche, avec le client. */
.app-topbar__right {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
}

/* Marque — symbole + wordmark réunis (2026-08-21), clic = Cockpit. */
.app-topbar__brand-btn {
  width: 100%; height: 100%;
  display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  padding: 0 12px; border-radius: 0;
  color: var(--color-navy);
}
/* Rail seul : le symbole se centre dans ses 48 px, comme les icônes dessous. */
.app-topbar:not(.app-topbar--navwide) .app-topbar__brand-btn {
  justify-content: center; padding: 0;
}
.app-topbar__brand-btn svg g { stroke-width: 7; }
.app-topbar__brand-btn:hover { background: var(--color-accent-tint); }
.app-topbar__brand {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .22em;
  color: var(--color-navy);
}

/* ── Barre À PLAT (retour Olivier 2026-08-21) : plus de cadres — l'exercice
   et le statut du réel sont du TEXTE, pas des champs. Scopé à la barre :
   les mêmes composants gardent leur tenue à pastille ailleurs. ──────────── */
/* Exercice : libellé atténué, année en navy — la pastille blanche disparaît. */
.app-topbar .reporting-controls .year-picker {
  background: transparent; border: none; padding: 0; border-radius: 0;
  gap: 2px;
}
.app-topbar .year-picker__label { margin-right: 4px; }
.app-topbar .reporting-controls .year-picker__select {
  appearance: none;                 /* plus de chevron natif ⇕ */
  font-size: 13.5px; font-weight: 600; color: var(--color-navy);
  padding: 3px 4px; cursor: pointer;
}
.app-topbar .reporting-controls .year-picker__select:hover,
.app-topbar .reporting-controls .year-picker__arrow:hover {
  background: var(--color-accent-tint); border-radius: 6px;
}
.app-topbar .reporting-controls .year-picker__arrow {
  color: var(--color-text-muted);
}
.app-topbar .reporting-controls .year-picker__arrow:hover { color: var(--color-accent); }
/* Statut du réel : texte atténué, sans pastille. */
.app-topbar .reporting-closed-chip {
  background: transparent; border-radius: 0; padding: 0;
  font-size: 12.5px; font-weight: 500; color: var(--color-text-muted);
}

/* Bouton d'icône de la barre : les paramètres, à droite du client. Même poids
   visuel que le contexte qu'il prolonge — discret au repos, ardoise au survol. */
.app-topbar__icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--color-text-muted);
}
.app-topbar__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.app-topbar__icon:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.app-topbar__icon.is-active { background: var(--color-accent-tint); color: var(--color-accent); }
.app-topbar__icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.coming-soon {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.coming-soon__card {
  max-width: 460px;
  width: 100%;
  text-align: center;
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.coming-soon__badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--stone-100);
  border-radius: 10px;
  padding: 3px 10px;
  margin-bottom: 4px;
}

.coming-soon__title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.2px;
  margin: 0;
}

.coming-soon__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 360px;
}

.coming-soon__back {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
}
.coming-soon__back:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Bouton ⓘ + pop-up d'aide — tokens charte uniquement. */
.info-tt { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
.info-tt__btn {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface-card); color: var(--color-text-muted);
  font: italic 700 10px/1 Georgia, serif; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.info-tt__btn:hover, .info-tt__btn[aria-expanded="true"] {
  border-color: var(--color-accent); color: var(--color-accent);
  background: var(--color-accent-tint);
}
/* Rendue en portail (document.body) : position `fixed` calculée en JS
   (top/left inline) — pas de coordonnées ici, juste l'apparence. Ainsi la
   pop-up n'est jamais tronquée par le `overflow: hidden` des cards (coins
   arrondis). */
.info-tt__pop {
  position: fixed; z-index: 200; padding: 10px 12px;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(43, 32, 62, .16);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.info-tt__title {
  font-size: 12.5px; font-weight: 700; color: var(--color-navy); margin-bottom: 4px;
}
.info-tt__body {
  font-size: 12px; line-height: 1.5; color: var(--color-text);
  white-space: normal;
}

/* ════════════════════════════════════════════════════════════════════════
   PageHeader + KpiBar — mise en page d'en-tête CENTRALISÉE.
   Valeurs canoniques reprises du header Revenues / hr-page (la référence).
   Toute page utilise <PageHeader> → en-têtes identiques partout.
   ════════════════════════════════════════════════════════════════════════ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* contrôles alignés sur la LIGNE DU TITRE (haut), pas sur le sous-titre */
  gap: 16px;
  /* Titre ALIGNÉ sur le nom du module dans le panneau (2026-08-18). Le retrait
     de 56px servait à dégager le logo posé sur la page — il vit dans la barre
     depuis, et le titre remonte à sa hauteur. */
  margin-top: 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.page-header__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-header__title {
  font-family: "Fraunces", Georgia, serif;   /* voix « titre » du design system */
  /* Allégé 24→20px (2026-08-15) : depuis le rail à icônes seules, le titre est
     le SEUL texte disant où l'on est — on le garde, discret et aéré. */
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}

/* Sous-titre : ligne fine descriptive sous le titre H1. */
.page-header__subtitle {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  margin: 6px 0 0;
  max-width: 70ch;
}

/* Flèches de navigation rapport-à-rapport, en ligne DEVANT le titre. */
.page-header__title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.page-header__nav-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-header__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.page-header__nav:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-border);
  color: var(--color-accent);
}

/* Rangée d'outils contextuels (sélecteurs, toggles) sous le titre */
.page-header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Actions à droite : cluster reporting (année + mois) puis actions de page
   (ex. toggle CHF/kCHF), séparés par un mince trait. */
.page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.page-header__actions-sep {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--color-border);
}

/* ── KpiBar — bandeau de synthèse une-ligne ─────────────────────────────── */

.kpi-bar {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.kpi-bar__head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
  margin-bottom: 10px;
}

.kpi-bar__row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}

.kpi-bar__item {
  flex: 0 0 auto;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 28px 2px 18px;
  border-left: 1px solid #ECE5D8;
  border-left: 1px solid var(--color-border, #ECE5D8);
}
.kpi-bar__item:first-child { padding-left: 0; border-left: none; }
.kpi-bar__item--accent {
  background: #FBEEE9;
  background: var(--color-primary-light, #FBEEE9);
  border-left: none;
  border-radius: 10px;
  padding: 6px 14px;
}

.kpi-bar__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
}

.kpi-bar__value {
  font-size: 22px;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-text, #2B203E);
  line-height: 1.15;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.kpi-bar__value small { font-size: 13px; font-weight: 500; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.kpi-bar__value--green { color: #3F7E1F; }
.kpi-bar__value--amber { color: #B45309; }
.kpi-bar__value--red,
.kpi-bar__value--terra { color: #C2543C; color: var(--color-terracotta, #C2543C); }

.kpi-bar__sub { font-size: 11px; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.kpi-bar__sub--green { color: #3F7E1F; }
.kpi-bar__sub--amber { color: #B45309; }
.kpi-bar__sub--red { color: #C2543C; color: var(--color-terracotta, #C2543C); }

/* Pastille d'état « Réel · juin 2026 » sur la ligne du titre — information
   pure, surlignée ardoise claire (famille de surlignage unique de la charte). */
.reporting-closed-chip {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #3F6470;
  color: var(--color-on-tint, #3F6470);
  background: #E5ECEE;
  background: var(--color-accent-tint-strong, #E5ECEE);
  border-radius: 10px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Tabs — barre d'onglets de hub (charte). Reprise de l'ancien .fin-hub__tabs. */

.tabs {
  display: flex;
  align-items: flex-end;
  /* Le slot droit est poussé par `margin-left: auto` (et non par
     space-between) : avec le nom de section à gauche, il y a trois enfants et
     space-between les écarterait tous les trois. */
  justify-content: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}

/* La ligne d'onglets ne CHANGE PAS DE HAUTEUR (2026-08-23). Les libellés se
   repliaient sur deux lignes quand la place manquait, et se dépliaient dès que
   la bascule d'unité disparaissait d'un onglet à l'autre : la barre montait et
   descendait à chaque changement. Un libellé tient donc sur une ligne. */
.tabs__list { display: flex; gap: 4px; }

.tabs__tab {
  appearance: none;
  white-space: nowrap;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  margin-bottom: -1px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
}
.tabs__tab:hover { color: var(--color-accent); }
.tabs__tab.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-accent);
  font-weight: 700;
}
/* Après le séparateur : des SOURCES, pas le livrable de la section. Elles se
   consultent, elles ne se présentent pas — d'où un libellé plus léger et plus
   atténué, actif compris. Le trait vertical seul ne le disait pas. */
.tabs__tab.is-source { font-weight: 400; color: color-mix(in srgb, var(--color-text-muted) 78%, transparent); }
.tabs__tab.is-source:hover { color: var(--color-accent); }
.tabs__tab.is-source.is-active { font-weight: 500; color: var(--color-text-muted); }
/* Pas d'encadré : le clic ne laisse pas de contour bleu ; le clavier garde un
   anneau ardoise discret (accessibilité). L'onglet actif = soulignement seul. */
.tabs__tab:focus:not(:focus-visible) { outline: none; }
.tabs__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* Tag d'onglet (ex. « simulé » sur Prix standard) — pastille texte atténuée,
   calquée sur .sb-sub-tag de la barre latérale. */
.tabs__tag { font-size: 9.5px; letter-spacing: .02em; color: var(--color-text-muted); margin-left: 6px; font-weight: 400; }

/* Slot droit de la ligne d'onglets : contrôles de l'écran + icône télécharger
   (retour au format d'origine le 2026-08-20 — la rangée sous le filet du
   2026-08-21 est abandonnée). Aussi utilisé par les barres recodées à la main
   des pages hors menu. */
.tabs__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  margin-left: auto;
}

/* Hub sans cadre : la barre d'onglets court sur toute la largeur du contenu,
   pas de bleed (plus de padding de cadre à compenser). */

/* Flèche discrète entre onglets (prop flow) — indique l'ordre de construction. */
.tabs__arrow {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: var(--color-text-muted);
  opacity: 0.45;
  font-size: 13px;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* Séparateur discret entre deux natures d'onglets (ex. vues d'analyse | outils
   de suivi). Un filet vertical + un peu d'air, sans peser visuellement. */
.tabs__sep {
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 10px;
  background: var(--color-border);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* ── Nom de section sur la ligne d'onglets (2026-08-20) ───────────────────
   Il a remplacé le titre H1 de la page, qui répétait l'entrée de menu déjà
   surlignée dans le panneau et repoussait la première donnée d'un étage
   entier. Le filet le sépare des onglets : deux natures, deux zones. */
.tabs__lead {
  flex: 0 0 auto;
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.1;
  white-space: nowrap;
  padding: 0 16px 9px 0;
  border-right: 1px solid var(--color-border);
}

/* PageShell — gabarit de page unifié. Voir PageShell.js pour le contrat de props.
   La tenue par défaut s'appuie sur `page-table-layout is-fluid` (CSS existant :
   padding, largeur fluide, habillage des tables). Seules les tenues `--framed`
   et `is-embedded` ajoutent du style ici. */

/* Hub à onglets — SANS cadre : titre + onglets posés directement sur la
   surface-page (charte « une seule couche de card » : seules les cards du
   contenu sont des frontières blanches, jamais de card-dans-card). */
.page-shell--framed {
  padding: 0;
  margin: 0;
}
.page-shell--framed > .page-header { margin-bottom: 14px; }

/* Mode embarqué : le hub porte déjà l'en-tête → pas de padding haut. */
.page-shell.is-embedded { padding-top: 0; }

/* Panneau d'onglet actif (corps du hub sous la barre <Tabs>). */
.page-shell__panel { min-height: 200px; }

/* Tenue « flush » : page ouverte SANS la marge latérale du gabarit table
   (40/32 px) — même bord gauche que les hubs à cadre. Posée via className
   (ex. les plans de Ventes & Opérations, retour Olivier 2026-08-12). */
/* Retrait haut porté par la zone contenu (.logike-page-wrap > *), comme le
   gabarit table — sinon le titre passe sous la ligne du nom de module. */
.page-shell.page-shell--flush { padding: 0 0 80px; }

.settings-empty { color: #7A7287; color: var(--color-text-muted, #7A7287); }

.settings-card {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 20px 22px;
  margin-bottom: 18px;
  max-width: 780px;                /* réglages = colonne lisible, pas pleine largeur */
  overflow: hidden;                /* clippe l'en-tête aux coins arrondis */
}
.settings-card-title {
  margin: -20px -22px 18px;        /* bleed jusqu'aux bords de la card */
  padding: 12px 22px;
  background: var(--color-surface-card);             /* en-tête bleu-gris harmonisé */
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}
.settings-card-desc {
  font-size: 13px;
  color: #7A7287;
  color: var(--color-text-muted, #7A7287);
  margin: -6px 0 16px;
  line-height: 1.5;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(43, 32, 62, 0.06);
}
.settings-row:first-of-type { border-top: none; }

.settings-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  color: #2B203E;
  color: var(--color-text, #2B203E);
}
.settings-hint {
  font-size: 11px;
  font-weight: 400;
  color: #7A7287;
  color: var(--color-text-muted, #7A7287);
}

.settings-input {
  font: inherit;
  font-size: 14px;
  color: #2B203E;
  color: var(--color-text, #2B203E);
  background: #fff;
  border: 1px solid rgba(43, 32, 62, 0.18);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.settings-input--year { width: 92px; cursor: text; text-align: right; }

.settings-readonly { font-size: 14px; font-weight: 600; color: #2B203E; color: var(--color-text, #2B203E); }

.settings-year-edit, .settings-locked { display: flex; align-items: center; gap: 8px; }
.settings-locked-val { font-size: 14px; font-weight: 600; color: #2B203E; color: var(--color-text, #2B203E); }

.settings-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.settings-btn--primary {
  background: #C2613D;
  background: var(--terracotta, #C2613D);
  color: #fff;
}
.settings-btn--primary:hover { filter: brightness(1.05); }
.settings-btn--ghost {
  background: #fff;
  border-color: rgba(43, 32, 62, 0.18);
  color: #2B203E;
  color: var(--color-text, #2B203E);
}
.settings-btn--ghost:hover { background: #F6F2EA; background: var(--color-bg, #F6F2EA); }
.settings-btn--danger {
  background: #fff;
  border-color: #FCA5A5;
  color: #B91C1C;
}
.settings-btn--danger:hover { background: #FEE2E2; }
.settings-btn:disabled { opacity: 0.55; cursor: default; }

.settings-links { display: flex; flex-wrap: wrap; gap: 10px; }

.settings-card--danger { border-color: rgba(185, 28, 28, 0.25); }
.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(43, 32, 62, 0.06);
}
.settings-danger-row:first-of-type { border-top: none; }
.settings-danger-lbl { font-size: 14px; font-weight: 600; color: #2B203E; color: var(--color-text, #2B203E); }
.settings-danger-desc { font-size: 12px; color: #7A7287; color: var(--color-text-muted, #7A7287); margin-top: 2px; }

/* ── Card « Design system » (référence couleurs + typo) ──────────────────── */
.ds-sub { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin: 16px 0 8px; }
.ds-sub:first-of-type { margin-top: 0; }
.ds-swatches { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4px 28px; gap: 4px 28px; }
.ds-swatch { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.ds-chip { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.10); }
.ds-name { flex: 1 1; color: var(--color-text); }
.ds-hex { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-text-muted); }
.ds-fonts { display: flex; gap: 16px; flex-wrap: wrap; }
.ds-font { flex: 1 1; min-width: 220px; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; }
.ds-font-sample { font-size: 26px; color: var(--color-navy); margin-bottom: 4px; line-height: 1.1; }
.ds-font-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.ds-font-body { font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; }
.ds-font-meta { font-size: 12px; color: var(--color-text-muted); }
.ds-font-meta b { color: var(--color-text); }

/* ── Grille des taux de TVA par année (blocs qui passent à la ligne) ─────────── */
.settings-row--block { flex-direction: column; align-items: stretch; gap: 18px; }
.vat-grid { display: flex; flex-direction: column; gap: 14px; }
.vat-grid-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 500; color: var(--color-text); }
.vat-grid-sub { font-size: 11px; font-weight: 400; color: var(--color-text-muted); line-height: 1.5; }
.vat-cells { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 14px; }
.vat-cell { display: flex; flex-direction: column; gap: 4px; width: 78px; }
.vat-cell-head { display: flex; align-items: center; justify-content: space-between; }
.vat-cell-year { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.vat-cell-del {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 11px; line-height: 1; padding: 1px 3px; border-radius: 4px;
}
.vat-cell-del:hover { background: #FEE2E2; color: #B91C1C; }
.vat-cell input { width: 100%; text-align: left; }
/* Charte : bleu = valeur saisie (éditable) ; gris = taux reporté. */
.vat-cell input.is-own { color: #2563EB; color: var(--color-input, #2563EB); font-weight: 600; }
.vat-cell input.is-inherited { color: var(--color-text-muted); }
.vat-grid-add { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 6px; }
.vat-grid-empty { color: var(--color-text-muted); font-size: 13px; padding: 8px; }

/* ── Modale de suppression d'entreprise (garde-fou sauvegarde + saisie) ────── */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  width: 480px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}
.settings-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: #B91C1C;
}
.settings-modal-close {
  background: none; border: none; font-size: 14px;
  color: var(--color-text-muted); cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.settings-modal-close:hover { background: var(--color-bg); color: var(--color-text); }
.settings-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.settings-modal-warn {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text);
  background: #FEF2F2; border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 8px; padding: 10px 12px;
}
.settings-modal-step { display: flex; gap: 12px; align-items: flex-start; }
.settings-modal-step-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #2B203E;
  background: var(--color-navy, #2B203E); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.settings-modal-step-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1; }
.settings-modal-step-lbl { font-size: 13px; font-weight: 600; color: var(--color-text); }
.settings-modal-ok { font-size: 12px; font-weight: 600; color: #5C7A3E; color: var(--color-sage, #5C7A3E); }
.settings-modal-dl { display: flex; align-items: center; gap: 8px; }
.settings-modal-dl .settings-btn { flex: 1 1; text-align: left; }
.settings-modal-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--color-text); cursor: pointer;
}
.settings-modal-check input { margin-top: 2px; accent-color: #2B203E; accent-color: var(--color-navy, #2B203E); }
.settings-modal-check.is-disabled { color: var(--color-text-muted); cursor: default; }
.settings-modal-field { display: flex; flex-direction: column; gap: 5px; }
.settings-modal-field-lbl { font-size: 12px; color: var(--color-text-muted); }
.settings-modal-field .settings-input { width: 100%; cursor: text; }
.settings-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px; border-top: 1px solid var(--color-border);
}

/* Client visé par la zone sensible — lisible avant d'ouvrir la modale.
   Cet écran vit dans Administration, où le contexte est la plateforme entière :
   sans ce rappel, rien ne dit sur quel client porte la suppression. */
.settings-danger-target {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.settings-danger-target strong { color: var(--color-text); }

/* ── TVA : méthode en cartes + toggles segmentés (refonte 2026-08) ─────────── */
.settings-vat-methods-lbl {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 10px;
}
.settings-vat-methods { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; margin-bottom: 26px; }
.settings-vat-method {
  text-align: left; cursor: pointer; background: #fff;
  border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px;
  transition: border-color .12s, background .12s;
}
.settings-vat-method:hover:not(.is-active) { border-color: var(--color-accent-soft); }
.settings-vat-method.is-active { border: 2px solid var(--color-accent); background: var(--color-accent-tint); padding: 13px 15px; }
.settings-vat-method:disabled { cursor: default; }
.settings-vat-method__name { display: block; font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 16px; color: var(--color-navy); }
.settings-vat-method__sub { display: block; font-size: 13px; color: var(--color-text-muted); margin-top: 3px; }

.settings-vat-controls { display: grid; grid-template-columns: repeat(3, auto); grid-gap: 24px; gap: 24px; margin-bottom: 28px; }
.settings-vat-ctrl__lbl { font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; }
.settings-seg { display: inline-flex; gap: 4px; }
.settings-seg__b {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--color-text-muted); padding: 6px 13px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.settings-seg__b.is-active { background: var(--color-accent-tint-strong); color: var(--color-accent); font-weight: 500; }
.settings-seg__b:disabled { color: var(--color-accent-soft); cursor: default; }
.settings-seg__b:disabled.is-active { background: var(--color-accent-tint); }

/* Désignation explicite du client visé (Administration › Zone sensible) :
   sélecteur vide par défaut — aucune opération sans cible désignée. */
.settings-target-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; max-width: 780px; }
.settings-target-lbl { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
/* Fond ambre clair (dérivé du token, jamais de hex inventé) : le sélecteur de
   cible doit sauter aux yeux — c'est lui qui décide qui subit l'opération. */
.settings-target-select { font: inherit; font-weight: 600; padding: 6px 10px; border: 1px solid var(--color-amber); border-radius: 8px; background: color-mix(in srgb, var(--color-amber) 16%, #fff); color: var(--color-text); min-width: 220px; }
.settings-btn.is-disabled { opacity: .45; pointer-events: none; }

/* Restauration par module (Zone sensible). */
.settings-restore-panel { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-page); }
.settings-restore-line { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.settings-restore-line input { accent-color: var(--color-accent); }
.settings-restore-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

.settings-restore-detail { font-size: 13px; margin-bottom: 10px; }
.settings-restore-detail summary { cursor: pointer; color: var(--color-text-muted); }
.settings-restore-detail ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow-y: auto; }
.settings-restore-detail code { font-family: inherit; color: var(--color-text-muted); }
.settings-restore-type { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.settings-restore-type input { border: none; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-field-focus); font: inherit; padding: 4px 0; max-width: 320px; }
.settings-restore-type input:focus { outline: none; border-bottom-color: var(--color-field-focus); }

/* Fenêtre de confirmation de restauration. */
.settings-ack-title--danger { color: var(--color-terracotta); letter-spacing: .06em; font-size: 20px; }
.settings-restore-alerts strong { color: var(--color-terracotta); }
.settings-modal-warn .settings-restore-alerts { margin: 0; }
/* Volume remplacé : information obligatoire, en texte simple (pas d'encadré). */
.settings-ack-intro { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.settings-ack-delicate { border: 1px solid var(--color-terracotta); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.settings-ack-delicate__lbl { font-weight: 600; color: var(--color-terracotta); font-size: 13px; margin-bottom: 4px; }
.settings-ack-delicate ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* Card standard — voir components/Card.js. Gabarit charte réutilisable. */
.std-card {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  overflow: hidden;
  margin-bottom: 18px;
}

/* En-tête = surface blanche + filet bas (plus aucune bande colorée).
   Label en petites capitales atténué. */
.std-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
}
.std-card__title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}
.std-card__title small { color: var(--color-text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.std-card__subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
}
.std-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.std-card__actions select {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

.std-card__body { padding: 18px 22px; }
.std-card__body--flush { padding: 0; }

/* Table dans une card : en-tête de colonnes sur fond blanc (charte —
   même règle que .lk-card), prime sur le fond crème générique des tables hr. */
.std-card table thead th { background: var(--color-surface-card); }

/* ── Synthèse KPI à plat (style Capacity cost rate) ─────────────────────── */
.std-kpis {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}
.std-kpi {
  flex: 1 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 18px;
  border-left: 1px solid var(--color-border);
}
.std-kpi:first-child { border-left: none; padding-left: 0; }
.std-kpi__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.std-kpi__value {
  font-size: 21px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.std-kpi__value small { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.std-kpi__value--terra { color: var(--color-terracotta); }
.std-kpi__value--sage  { color: var(--color-sage); }
.std-kpi__value--amber { color: var(--color-amber); }
.std-kpi__hint {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Capacités (lecture seule) — tokens de charte uniquement. */

.cap-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.cap-table th {
  background: var(--color-surface-th);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.cap-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-inner);
  color: var(--color-text);
}
.cap-table tbody tr:last-child td { border-bottom: none; }

.cap-label__name { font-weight: 600; color: var(--color-navy); }
.cap-cell { text-align: center; }

/* Accordé = ardoise (accent) ; refusé = tiret atténué, pas une croix rouge :
   l'absence de droit est l'état normal, pas une alerte. */
.cap-yes { color: var(--color-accent); font-weight: 700; }
.cap-no  { color: var(--color-text-muted); }

/* Colonne de l'exploitant : détachée du reste par un filet. */
.cap-operator { border-left: 1px solid var(--color-border); }

/* Rôle de la personne connectée (Paramètres › Utilisateur). */
.cap-mine { background: var(--color-accent-tint); }

/* Paramètres › Utilisateur — lecture seule (charte : tokens uniquement). */

.sa-page { display: flex; flex-direction: column; gap: 18px; }

/* Identité : paires libellé / valeur, sans cadre (rien n'est éditable ici). */
.sa-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 18px 32px;
  gap: 18px 32px;
  margin: 0;
}
.sa-identity dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.sa-identity dd {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
}

.sa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sa-table th {
  background: var(--color-surface-th);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.sa-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-inner);
  color: var(--color-text);
}
.sa-table tbody tr:last-child td { border-bottom: none; }

/* Périmètre sans droit : atténué, pour que l'œil aille aux accès réels. */
.sa-none { color: var(--color-text-muted); }

.sa-role { white-space: nowrap; }
.sa-role__name { font-weight: 600; color: var(--color-navy); }

/* Marque « mon rôle » — accent ardoise, comme la ligne surlignée. */
.sa-badge {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface-card);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Paramètres en page pleine largeur (navbar app masquée). Deux colonnes :
   nav de sections à gauche + contenu. */
.settings-page { display: flex; gap: 30px; align-items: flex-start; }
.settings-nav { flex: 0 0 232px; display: flex; flex-direction: column; }
.settings-nav__head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.settings-nav__back {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 24px; line-height: 1; padding: 0 2px;
}
.settings-nav__back:hover { color: var(--color-accent); }
.settings-nav__titles { display: flex; flex-direction: column; min-width: 0; }
.settings-nav__title {
  font-family: "Fraunces", Georgia, serif; font-size: 22px; color: var(--color-navy);
}
/* Client concerné — affiché sous le titre, visible sur tous les onglets. */
.settings-nav__tenant {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--color-text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-nav__list { display: flex; flex-direction: column; gap: 2px; }
.settings-nav__item {
  border: none; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text);
  padding: 9px 14px; border-radius: 8px; transition: background .12s, color .12s;
}
.settings-nav__item:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.settings-nav__item.is-active { background: var(--color-accent-tint); color: var(--color-accent); }
.settings-page__content { flex: 1 1; min-width: 0; }

/* Section Finance : CashActualsPage rend un <main page-table-layout is-fluid>
   (pleine largeur). On le contraint à la largeur des autres cards (780). */
.settings-page__content .page-table-layout { max-width: 780px; padding: 0; }

/* En-tête de la card Finance en navy gras (comme « TVA »), pas en gris atténué. */
.settings-page__content .std-card__title { color: var(--color-navy); font-size: 12px; }

/* Reports & Data — hub export/import + rapports/impressions */
.rdp__section { margin-bottom: 32px; }
.rdp__section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

/* ── Data exchange card ─────────────────────────────────────────────────── */
.rdp__data-card {
  background: #F4ECDF;
  background: var(--color-card, #F4ECDF);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  padding: 8px 20px;
  max-width: 720px;
}
.rdp__data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.rdp__data-row + .rdp__data-row {
  border-top: 0.5px solid var(--color-border);
}
.rdp__data-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.rdp__data-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Print reports — checklist (unitaire ou combiné) ───────────────────── */
.rdp__print-card {
  background: #F4ECDF;
  background: var(--color-card, #F4ECDF);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 720px;
}
/* Deux colonnes : Print reports (gauche) · Data exchange (droite) */
.rdp__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 32px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .rdp__cols { grid-template-columns: 1fr; }
}
.rdp__cols .rdp__section { margin-bottom: 0; }
.rdp__cols .rdp__data-card,
.rdp__cols .rdp__print-card { max-width: none; }

/* Catégories empilées verticalement ; rapports en colonne sous chaque label */
.rdp__print-all {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid var(--color-border);
}
.rdp__print-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rdp__print-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rdp__print-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.rdp__print-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.rdp__print-item input { cursor: pointer; accent-color: var(--color-primary); }
.rdp__print-item input:disabled { cursor: not-allowed; }
.rdp__print-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--color-border);
}
.rdp__print-count {
  font-size: 12px;
  color: var(--color-text-muted);
}
.rdp__print-formats {
  display: flex;
  gap: 8px;
}

.rdp__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  border: 0.5px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.rdp__btn svg { width: 15px; height: 15px; }
.rdp__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.rdp__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rdp__btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.rdp__btn--primary:hover:not(:disabled) { background: #A23A24; background: var(--terracotta-dark, #A23A24); color: #fff; }
.rdp__btn--import { color: #059669; border-color: #A7D8C4; }
.rdp__btn--import:hover:not(:disabled) { border-color: #059669; color: #047857; }

.rdp__err {
  font-size: 12px;
  color: #B0463A;
  margin-right: 8px;
}
.rdp__err--block { margin: 0 0 12px; }

/* ── Report group : titre + tuiles format + liens d'ouverture ───────────── */
.rdp-group { margin-bottom: 30px; }
.rdp-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.rdp-group__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--color-text);
  margin: 0;
}
.rdp-group__sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Tuiles de livrables par format — mises en évidence */
.rdp-formats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 12px;
}
.rdp-format {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: #F4ECDF;
  background: var(--color-card, #F4ECDF);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color 0.12s, background 0.12s, transform 0.05s, box-shadow 0.12s;
}
.rdp-format:hover:not(.is-disabled) {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 2px 10px rgba(194, 84, 60, 0.10);
}
.rdp-format:active:not(.is-disabled) { transform: translateY(1px); }
.rdp-format__icon {
  display: inline-flex;
  color: var(--color-primary);
}
.rdp-format__icon svg { width: 26px; height: 26px; }
.rdp-format__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.rdp-format.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--color-bg);
}
.rdp-format.is-disabled .rdp-format__icon { color: var(--color-text-muted); }
.rdp-format__soon {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: #EFEAE1;
  background: var(--stone-100, #EFEAE1);
  border-radius: 8px;
  padding: 1px 6px;
}

/* Rapports en ligne — mini boutons sur une seule ligne, sous les tuiles */
.rdp-open {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.rdp-open__lbl {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.rdp-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.rdp-online:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}
.rdp-online__icon { display: inline-flex; }
.rdp-online__icon svg { width: 13px; height: 13px; }

/* Gabarit unifié : ces conteneurs sont désormais le corps d'une .lk-card. */
.lk-card__body.rdp__print-card,
.lk-card__body.rdp__data-card {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  padding: 18px 20px;
}
.rdp__section-label { display: none; }   /* le titre est dans l'en-tête de card */
.lk-card__body.rdp__print-card, .lk-card__body.rdp__data-card { max-width: none; }

/* ── Modale d'import (déplacée depuis l'ancien Topbar.css, supprimé) ─────────
   Classes topnav__* conservées telles quelles : seule cette page les utilise. */
.topnav__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav__modal {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  width: 460px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topnav__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 0.5px solid var(--color-border);
}

.topnav__modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.topnav__modal-close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.topnav__modal-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.topnav__modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.topnav__modal-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}
.topnav__modal-hint em {
  font-style: normal;
  font-weight: 500;
  color: var(--color-text);
}

.topnav__modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topnav__modal-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.topnav__file-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topnav__file-name {
  flex: 1 1;
  font-size: 12px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav__btn-browse {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.topnav__btn-browse:hover { background: var(--terracotta-mid); }

.topnav__radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topnav__radio-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}

.topnav__radio-label input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.topnav__import-result {
  background: #F0FDF4;
  border: 0.5px solid rgba(5, 150, 105, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
}
.topnav__import-result.is-error {
  background: #FEF2F2;
  border-color: rgba(220, 38, 38, 0.3);
}

.topnav__import-stats {
  display: flex;
  gap: 16px;
  color: var(--color-text);
}
.topnav__import-stats strong { color: var(--color-primary); }

.topnav__import-errors {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topnav__import-error-line {
  font-size: 11px;
  color: #DC2626;
}

.topnav__modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 0.5px solid var(--color-border);
}

.topnav__btn-cancel {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
}
.topnav__btn-cancel:hover { background: var(--color-bg); }

.topnav__btn-import-confirm {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #059669;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 18px;
  cursor: pointer;
}
.topnav__btn-import-confirm:hover:not(:disabled) { background: #047857; }
.topnav__btn-import-confirm:disabled { opacity: 0.4; cursor: default; }

/* DesignPage — sélecteur de couleurs d'apparence (palette charte + couleur libre).
   Le reste de l'habillage (settings-card, settings-row…) vient de TenantSettingsPage.css. */

.dz-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.dz-auto {
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-muted);
  border: 0.5px solid var(--color-border);
}
.dz-auto.is-active { border: 2px solid var(--color-navy); color: var(--color-navy); }

.dz-swatch {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  outline-offset: 2px;
  padding: 0;
}
.dz-swatch.is-active { outline: 2px solid var(--color-text); }

/* Pastille « couleur libre » : pointillés tant qu'aucune couleur custom. */
.dz-swatch--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px dashed var(--color-border);
  overflow: hidden;
}
.dz-swatch--custom.is-active { border: none; }
.dz-plus { font-size: 18px; line-height: 1; color: var(--color-text-muted); }

/* Le sélecteur natif couvre la pastille (invisible, cliquable). */
.dz-swatch--custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}

.dz-hex {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-hub {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
}

.admin-form--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: end;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: "Inter", system-ui, sans-serif;
}

.admin-form input:not([type="checkbox"]),
.admin-form select,
.admin-table select {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--color-field-focus);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 0.35rem 0;
  min-width: 0;
  width: 100%;
}

.admin-form input:not([type="checkbox"]):focus,
.admin-form select:focus,
.admin-table select:focus {
  outline: none;
  border-bottom-color: var(--color-field-focus);
}

.admin-check-row {
  flex-direction: row !important;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  color: var(--color-text);
  gap: 0.5rem !important;
}

.admin-btn {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-surface-card);
  cursor: pointer;
  height: fit-content;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
}

.admin-table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-th);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

.admin-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--color-border-inner);
  color: var(--color-text);
  vertical-align: middle;
}

.admin-table tr:hover td {
  background: var(--color-accent-tint);
}

.admin-check {
  text-align: center;
  width: 3rem;
}

.admin-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.admin-muted {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.admin-role-name {
  font-weight: 600;
  color: var(--color-navy);
}

/* En-tête de groupe « Périmètre » au-dessus des colonnes de scopes. */
.admin-perimeter-head {
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-inner);
}

.admin-form-span {
  grid-column: 1 / -1;
}

/* Ligne d'appartenance : client · rôle + badges des périmètres accessibles. */
.admin-membership-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.admin-scope-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.admin-scope-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--color-on-tint);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-soft);
}
.admin-scope-badge.is-rw {
  background: var(--color-accent-tint-strong);
  border-color: var(--color-accent);
}

/* Bouton DELETE d'un admin Palestre (action destructive, terracotta). */
.admin-btn-delete {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-terracotta) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-terracotta) 8%, transparent);
  color: var(--color-terracotta);
  cursor: pointer;
}
.admin-btn-delete:hover { background: var(--color-terracotta); color: #fff; }

.admin-memberships {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-memberships--panel {
  padding: 0.75rem 0;
}

.admin-membership-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.admin-membership-row select {
  min-width: 160px;
  flex: 1 1;
}

.admin-membership-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.35rem;
}

.admin-btn-ghost {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
}

.admin-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Création client : bouton replié en haut (évite une grande card + le scroll). */
.admin-newtenant-bar { margin-bottom: 16px; }
.admin-btn--ghost {
  background: transparent; color: var(--color-accent);
  border: 1px dashed var(--color-accent-soft);
}
.admin-btn--ghost:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* « + Ajouter un client » (enfant direct des memberships) aligné à gauche. */
.admin-memberships > .admin-btn-ghost { align-self: flex-start; }

/* Actions de fin de ligne (utilisateurs) : éditer les clients + supprimer. */
.admin-row-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

/* Réinitialisation du mot de passe (ligne dépliée sous le compte). */
.admin-pwd-row > td { background: var(--color-accent-tint); }
.admin-pwd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-pwd__lbl { font-weight: 600; color: var(--color-navy); }
.admin-pwd__field { display: inline-flex; align-items: center; gap: 4px; }
/* Valeur à saisir : bleu, sans cadre (charte) ; soulignement au focus. */
.admin-pwd__field input {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-field-focus);
  font: inherit;
  padding: 3px 0;
  min-width: 220px;
}
.admin-pwd__field input:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.admin-pwd__eye { border: none; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
.admin-pwd__hint { color: var(--color-terracotta); font-size: 12px; }
.admin-pwd__note { margin: 8px 0 0; font-size: 12px; color: var(--color-text-muted); }

/* Champ mot de passe : œil (voir/masquer) + générateur, dans le champ. */
.admin-pwd { position: relative; display: block; }
.admin-pwd input { width: 100%; padding-right: 58px; }
.admin-pwd__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--color-text-muted); line-height: 0;
}
.admin-pwd__btn:hover { color: var(--color-accent); }
.admin-pwd__btn svg { width: 15px; height: 15px; }
.admin-pwd__btn:nth-of-type(1) { right: 30px; }
.admin-pwd__btn:nth-of-type(2) { right: 6px; }
/* Masquage CSS du mot de passe (champ texte → pas de radar gestionnaire). */
.admin-pwd input.is-masked { -webkit-text-security: disc; }

/* Colonne d'actions de la liste des clients : bouton aligné à droite, collé au
   bord de la card pour ne pas voler de largeur aux cases à cocher des modules. */
.admin-col-actions {
  text-align: right;
  white-space: nowrap;
}

.unit-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  font-family: "Inter", system-ui, sans-serif;
}
.unit-switch:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; border-radius: 4px; }
.unit-switch__lab { font-size: 12px; color: var(--color-text-muted); }
.unit-switch__lab.on { color: var(--color-navy); font-weight: 600; }
.unit-switch__track {
  width: 38px; height: 20px;
  border-radius: 10px;
  background: #D6D3D1;
  background: var(--stone-300, #D6D3D1);
  position: relative;
  transition: background 0.15s ease;
}
.unit-switch__track.on { background: var(--color-navy); }
.unit-switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}
.unit-switch__track.on .unit-switch__knob { left: 20px; }

.hr-page {
  /* Horizontal padding handled by .logike-page-wrap (App.css) */
  padding: 32px 0 80px;
}
/* Embarqué dans un hub à onglets : le hub porte déjà l'espacement (marge basse
   des onglets) — pas de padding haut, sinon l'écart onglets ↔ card double. */
.hr-page.is-embedded { padding-top: 0; }

/* Bouton de contrôle de vue dans l'ancre droite des onglets (Exporter…). */
.hr-tabaside-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface-card);
  color: var(--color-text);
  cursor: pointer;
}
.hr-tabaside-btn:hover { background: var(--color-accent-tint); color: var(--color-accent); border-color: var(--color-accent); }
.hr-tabaside-btn--icon { display: inline-flex; align-items: center; gap: 5px; }

.hr-onboard__exempt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text); margin-bottom: 10px; cursor: pointer; }

/* Menu d'aiguillage des données People (écran 1 de la modale Import). */
.people-import__menu { padding: 8px; }
.people-import__group { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding: 12px 10px 4px; }
.people-import__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--color-border); background: none; padding: 11px 10px; cursor: pointer; }
.people-import__row:last-child { border-bottom: none; }
.people-import__row:hover { background: var(--color-accent-tint); }
.people-import__ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); }
.people-import__rtext { flex: 1 1; }
.people-import__rtitle { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); }
.people-import__rsub { display: block; font-size: 12.5px; color: var(--color-text-muted); margin-top: 1px; }
.people-import__rwarn { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-terracotta); margin: 2px 0 0; }
.people-import__chev { font-size: 20px; color: var(--color-text-muted); line-height: 1; }
.people-import__back { border: none; background: none; color: var(--color-accent); font-size: 13px; cursor: pointer; padding: 0 0 8px; }
.people-import__addnote { margin: 0 0 12px; padding: 10px 12px 10px 28px; background: var(--color-accent-tint); border-radius: 7px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; list-style: disc; }
.people-import__addnote li { margin: 0 0 3px; }
.people-import__addnote li:last-child { margin-bottom: 0; }

/* Modale Import People — geste en 2 étapes (réutilise .topnav__modal-*). */
.people-import__step { display: flex; gap: 12px; margin-bottom: 20px; }
.people-import__num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.people-import__step-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.people-import__step-hint  { margin: 0 0 10px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.people-import__yearbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.people-import__yearhint { font-size: 12.5px; color: var(--color-text-muted); padding-bottom: 4px; }
.people-import__dl { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.people-import__year { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--color-text-muted); }
.people-import__year select { font-family: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-card); color: var(--color-text); }
.people-import__result {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 7px;
  background: var(--color-accent-tint);
  color: var(--color-text);
  font-size: 13px;
}
.people-import__result.has-errors { background: var(--terracotta-light); }
.people-import__errors { margin: 8px 0 0; padding-left: 18px; color: var(--color-terracotta); font-size: 12.5px; }
.people-import__errors li { margin-bottom: 2px; }

.hr-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

/* Bloc gauche du header : titre + sous-titre + rangée d'outils contextuels */
.hr-page__header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hr-page__tools-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hr-page__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--color-text);
}

.hr-page__subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  max-width: 720px;
  line-height: 1.55;
}

.hr-page__readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--stone-100);
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.hr-page__year-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
/* Fenêtre en lecture seule (Planning) : texte discret, non interactif. */
.hr-page__window-readonly {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
}
.hr-page__year-picker select,
.hr-page__year-picker input[type="search"] {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
}
.hr-page__year-picker select {
  cursor: pointer;
}

/* Filtre texte (personne / département) dans la barre d'actions d'une card. */
.hr-page__search {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
  min-width: 200px;
}
.hr-page__search::placeholder {
  color: var(--color-text-muted);
}

.hr-page__count {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.hr-page__loading,
.hr-page__empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 40px 0;
  text-align: center;
}

.hr-page__table-wrap {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  overflow-x: auto;
}
/* LCR : rapproche les deux cards (Synthèse / tableau). */
.lcr-page .std-card { margin-bottom: 10px; }
/* Dans un Card (flush), la table coule dans la carte unique : pas de cadre ni
   d'arrondi propres → titre de bloc + en-tête de colonnes sur la MÊME carte
   blanche, séparés par un simple filet (pas un bloc blanc puis un bloc crème). */
.std-card__body--flush .hr-page__table-wrap {
  border: none;
  border-radius: 0;
}

.hr-page__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hr-page__table th {
  /* En-tête blanc à filet bas — harmonisé avec le gabarit Card (charte,
     2026-08-13) : plus de bande crème, un seul filet qui sépare. */
  background: var(--color-surface-card);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: left;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
}

.hr-page__table td {
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}

/* Variante dense (Annual hours) — aligne la hauteur de ligne sur le tableau
   LCR (~30px) malgré les cellules éditables. */
.hr-page__table--dense td { padding: 4px 10px; }
.hr-page__table--dense th { padding: 8px 10px; }
.hr-page__table--dense .hr-edit-cell { padding: 1px 6px; }
.hr-page__table--dense .hr-edit-input { padding: 1px 6px; font-size: 12px; }

/* En-têtes centrés (max 2 lignes) — utilisés sur Synthesis */
.hr-page__table th.hr-page__th-center {
  text-align: center;
}
.hr-page__table th.hr-page__th-center > span:first-child {
  display: block;
  /* Largeur contrainte pour forcer le wrap (sinon la colonne s'élargit),
     mais SANS troncature : le libellé se répartit sur autant de lignes que
     nécessaire (texte entier toujours lisible). */
  max-width: 130px;
  white-space: normal;
  margin: 0 auto;
}

/* Sur-titre regroupant plusieurs colonnes (ex. « Activity cost @PCR ») */
.hr-page__table th.hr-page__group-th {
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg);
  border-bottom: 0.5px solid var(--color-border);
  padding: 6px 12px;
  vertical-align: middle;
}
.hr-page__table th.hr-page__group-th.is-empty {
  background: transparent;
  border-bottom-color: transparent;
}

/* Séparateur vertical (« espace ») entre deux blocs de colonnes */
.hr-page__table th.hr-page__col-sep,
.hr-page__table td.hr-page__col-sep {
  border-left: 2px solid var(--color-border);
}

/* Colonne mise en évidence (ex. BCR) — en-tête, lignes et total */
.hr-page__table th.hr-page__col-hl,
.hr-page__table td.hr-page__col-hl {
  background: var(--color-primary-light) !important;
}
.hr-page__table tbody tr:hover td.hr-page__col-hl {
  background: var(--color-primary-light) !important;
}

/* Colonne phare mise en évidence (LCR, BCR…) — même brun que la ligne
   Total/Average (#EDE8DF) mais en version plus claire, texte navy. */
.hr-page__table th.hr-page__col-accent,
.hr-page__table td.hr-page__col-accent {
  background: var(--color-surface-result) !important;
}
.hr-page__table thead th.hr-page__col-accent { color: var(--color-navy); }
.hr-page__table tbody tr:hover td.hr-page__col-accent {
  background: var(--color-surface-result-hover) !important;
}

/* Colonne résultat épinglée à droite (convention intrant → résultat) : reste
   visible au scroll horizontal, fond crème porté par .hr-page__col-accent +
   filet gauche pour la détacher des colonnes d'intrants. */
.hr-page__table th.hr-page__col-sticky-right,
.hr-page__table td.hr-page__col-sticky-right {
  position: sticky;
  right: 0;
  z-index: 1;
  border-left: 1px solid var(--color-border);   /* filet plus marqué : la sépare des intrants */
}
.hr-page__table thead th.hr-page__col-sticky-right { z-index: 3; }

/* Sticky columns (e.g. Person column on Contracts page) */
.hr-page__table th.hr-page__col-sticky,
.hr-page__table td.hr-page__col-sticky {
  position: sticky;
  z-index: 1;
}
/* En-tête figé : MÊME blanc que les autres th (charte 2026-08-13) — sinon la
   bande crème réapparaît sur les seules colonnes gelées. */
.hr-page__table th.hr-page__col-sticky {
  background: var(--color-surface-card);
  z-index: 2;
}
.hr-page__table td.hr-page__col-sticky {
  background: var(--color-card);
}
.hr-page__table tr:hover td.hr-page__col-sticky {
  background: var(--color-bg);
}
/* min-width verrouille la largeur réelle de la colonne ✎ à 90px : sinon elle
   rend plus étroite que le `left:90px` de Collaborateur, laissant une bande
   transparente entre les deux colonnes figées (texte défilé visible dessous). */
.hr-page__table th.hr-page__col-sticky--actions,
.hr-page__table td.hr-page__col-sticky--actions {
  left: 0;
  min-width: 44px;
  padding-left: 4px;
  padding-right: 4px;
}
.hr-page__table th.hr-page__col-sticky--person,
.hr-page__table td.hr-page__col-sticky--person {
  left: 44px;
  padding-left: 4px;
  border-right: 0.5px solid var(--color-border);
}

/* Tables avec colonne de sélection (cases à cocher) EN PLUS des colonnes figées
   (✎ + Collaborateur) : la colonne cases (26px) devient elle-même figée à
   left:0 et décale les offsets des deux suivantes — sinon la colonne ✎ (left:0)
   recouvre les cases et l'édition groupée paraît absente. */
.hr-page__table--checkable th.hr-page__check-col,
.hr-page__table--checkable td.hr-page__check-col {
  position: sticky;
  left: 0;
  z-index: 1;
}
.hr-page__table--checkable thead th.hr-page__check-col { background: var(--color-surface-card); z-index: 2; }
.hr-page__table--checkable tbody td.hr-page__check-col { background: var(--color-card); }
.hr-page__table--checkable tr:hover td.hr-page__check-col { background: var(--color-bg); }
.hr-page__table--checkable th.hr-page__col-sticky--actions,
.hr-page__table--checkable td.hr-page__col-sticky--actions { left: 26px; }
.hr-page__table--checkable th.hr-page__col-sticky--person,
.hr-page__table--checkable td.hr-page__col-sticky--person { left: 70px; }

.hr-page__table tbody tr:hover { background: var(--color-bg); }

.hr-page__num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 12px;
}

/* ── Open-contracts summary block ────────────────────────────────────────── */
.hr-summary {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.hr-summary--compact {
  padding: 8px 12px;
  margin-bottom: 10px;
}
.hr-summary--compact .hr-summary__title { margin-bottom: 6px; }
.hr-summary--compact .hr-summary__grid { gap: 10px; }
.hr-summary--compact .hr-summary__value { font-size: 12px; }
.hr-summary__title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.hr-summary__title strong {
  color: var(--color-text);
}
.hr-summary__hint {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.hr-summary__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 14px;
  gap: 14px;
}
.hr-summary__cell {
  border-left: 2px solid var(--color-primary-light);
  padding-left: 10px;
}
.hr-summary__label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.hr-summary__value {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-summary__pct {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 400;
}
@media (max-width: 900px) {
  .hr-summary__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Status pill (active / inactive / joined / left) ─────────────────────── */
.hr-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}
.hr-status--active {
  color: var(--sage-dark);        /* sage-dark */
  background: var(--sage-light);   /* sage-light */
}
.hr-status--joined {
  color: var(--amber-dark);        /* amber-dark */
  background: var(--amber-light);   /* amber-light */
}
.hr-status--left {
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
}
.hr-status--inactive {
  color: var(--color-text-muted);
  background: var(--stone-100);
}

/* Person row in LPP rates without an LPP entry — flagged in soft terracotta */
.hr-page__row--missing td {
  background: var(--terracotta-light);
}

/* TOTAL footer row (LPP rates) — bold + light fill, sticky bottom */
.hr-page__table tfoot .hr-page__row-total td {
  font-weight: 600;
  background: var(--stone-100);
  border-top: 1px solid var(--color-border);
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* ── Filter pills (All / Active) ─────────────────────────────────────────── */
.hr-filter {
  display: inline-flex;
  background: var(--stone-100);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.hr-filter__btn {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  cursor: pointer;
  font-weight: 500;
}
.hr-filter__btn:hover { color: var(--color-text); }
.hr-filter__btn.is-active {
  color: var(--color-primary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ── Détail des charges : card unique (synthèse + détail) ─────────────────── */
.hr-charges-card {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
/* Cards empilées (synthèse puis détail) : filet d'air entre les deux. */
.hr-charges-card + .hr-charges-card {
  margin-top: 16px;
}
.hr-charges-card__band {
  padding: 12px 20px;
  background: var(--color-surface-card);                  /* bandeau bleu-gris charte */
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);                       /* navy, comme .hr-synth__head (Extrapolation) */
}
/* Bandeaux après le 1er = séparateur de section (bord haut). */
.hr-charges-card__band + .hr-charges-card__band,
.hr-charges-card__body + .hr-charges-card__band {
  border-top: 1px solid var(--color-border);
}
.hr-charges-card__band--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Titre détail + sélecteur de vue (puces AFFICHER) forment un seul bloc :
     pas de filet entre eux. La coupure de section vit au-dessus (border-top)
     et avant le tableau (border-top du table-wrap). */
  border-bottom: none;
}
.hr-charges-card__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Le tableau coule dans la card unique : pas de cadre/arrondi propre. */
.hr-charges-card .hr-page__table-wrap {
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* ── View selector chips (une puce à la fois) ────────────────────────────── */
.hr-colgroups {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
}
/* Variante inline : puces posées sur la ligne du filtre (bandeau), à droite. */
.hr-colgroups--inline { padding: 0; }

/* Rangée de filtre sous le titre (Planification — évolution du personnel). */
.hr-evol__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 12px;
}
.hr-colgroups__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.hr-colgroups__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hr-colgroups__chip:hover { border-color: var(--color-navy); }
.hr-colgroups__chip.is-active {
  color: #fff;
  background: var(--color-navy);        /* puce active pleine navy (charte) */
  border-color: var(--color-navy);
}
.hr-colgroups__mark {
  font-size: 11px;
  line-height: 1;
}

/* ── Cost synthesis KPI strip ────────────────────────────────────────────── */
.hr-synth {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hr-synth__head {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.hr-synth__grid {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.hr-synth__grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Layout 2 lignes × 6 KPIs + colonne latérale (Daily / Hourly Rate empilés) */
.hr-synth__layout {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.hr-synth__left {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hr-synth__right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 150px;
  padding-left: 14px;
  border-left: 0.5px solid var(--color-border);
}
@media (max-width: 1100px) {
  .hr-synth__layout { flex-direction: column; }
  .hr-synth__right {
    flex-direction: row;
    border-left: none;
    border-top: 0.5px solid var(--color-border);
    padding-left: 0;
    padding-top: 14px;
  }
  .hr-synth__right > * { flex: 1 1; }
}
.hr-synth__grid--5 { grid-template-columns: repeat(5, 1fr); }
.hr-synth__grid--4 { grid-template-columns: repeat(4, 1fr); }
.hr-synth__grid--2 { grid-template-columns: repeat(2, 1fr); }
.hr-synth__grid--3 {
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--color-border);
  padding-top: 12px;
}

.hr-kpi {
  border-left: 2px solid var(--stone-200);
  padding-left: 10px;
}
/* Figure-clé : fond accent-tint + liseré gauche ardoise (charte). */
.hr-kpi--primary { border-left-color: var(--color-accent); background: var(--color-accent-tint); padding: 6px 10px; margin-left: 2px; border-radius: 4px; }
/* Stripes de SIGNAL uniquement (sage = favorable, terracotta = alerte). */
.hr-kpi--sage    { border-left-color: var(--color-sage); }
.hr-kpi--terra   { border-left-color: var(--color-terracotta); }
.hr-kpi--amber   { border-left-color: var(--color-amber); }

.hr-kpi__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.hr-kpi__value {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy);            /* tous les montants en navy — on ne peint pas un nombre par nature */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Couleur sur la VALEUR uniquement pour une variation = signal :
   sage = favorable, terracotta = alerte. Jamais par catégorie de coût. */
.hr-kpi--sage    .hr-kpi__value { color: var(--color-sage); }
.hr-kpi--terra   .hr-kpi__value { color: var(--color-terracotta); }
.hr-kpi__value--negative { color: var(--color-terracotta); }
.hr-kpi__unit { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }

.hr-kpi__hint {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.hr-kpi--sage    .hr-kpi__hint,
.hr-kpi--primary .hr-kpi__hint { color: var(--color-text-muted); }

.hr-synth__note {
  font-size: 11px;
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  border-radius: 6px;
  padding: 8px 12px;
}

/* ── Barre cascade synthèse Annual hours (TT décomposé + couches OT/TR/Prod) ── */
/* Tuiles d'en-tête, GRILLE PLEINE LARGEUR (2026-08-26). En rangée flexible
   plafonnée à 330 px, elles s'arrêtaient bien avant le bord droit : la synthèse
   flottait au-dessus d'un tableau qui, lui, allait au bout. Elles se partagent
   désormais toute la largeur, en colonnes égales calées sur la card du dessous.
   `auto-fit` plutôt que trois colonnes fixes : la tuile EPT n'existe que si un
   effectif est connu, et deux tuiles doivent alors occuper la même largeur. */
.hr-cbar__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
}
/* Synthèse : pas de card blanche autour — la tuile est la seule couche de card
   (posée sur le fond de page), comme le composant KpiTile. */
.hr-synth.hr-cbar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Titre de la synthèse : label simple sur le fond de page (pas de bandeau blanc). */
.hr-synth.hr-cbar .hr-synth__head {
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border-bottom: none;
}
/* Tuiles de synthèse — GRAMMAIRE DE LA CARD DE CONSEIL (2026-08-26, celle de
   « Comment définir ses groupes ») : aplat ardoise, filet du même ton, titre en
   Fraunces navy. L'ancienne version parlait en petites capitales de 10 px sur
   blanc, corps de texte à 11.5 px — trois chiffres qu'on plissait les yeux pour
   lire, dans un module dont ils sont pourtant la conclusion.
   Le RÉSULTAT reste souligné d'un filet et posé en navy ; aucune couleur de
   jugement par ligne (une déduction n'est pas une alerte). */
.hr-cbar__tile {
  display: flex;
  flex-direction: column;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-strong);
  border-radius: 10px;
  padding: 16px 18px;
}
/* Tuile mise en évidence : un cran plus dense, la famille ardoise étant la
   seule autorisée à surligner. Les trois tuiles partagent maintenant l'aplat,
   c'est donc le FILET et le fond du cran supérieur qui la distinguent. */
.hr-cbar__tile--highlight {
  background: var(--color-accent-tint-strong);
  border-color: var(--color-accent-soft);
}
/* Pied de tuile : part vs OT (OT = 100%). `margin-top: auto` le colle au bas,
   donc les pieds des trois tuiles s'alignent quel que soit le nombre de lignes
   au-dessus — sans quoi celui d'une tuile courte flottait au milieu. */
.hr-cbar__tile-pct {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-cbar__tile-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: 10px;
}
.hr-cbar__tile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
}
.hr-cbar__tile-row > span { color: var(--color-text-muted); }
.hr-cbar__tile-row > b {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}
.hr-cbar__tile-row--ot,
.hr-cbar__tile-row--cap,
.hr-cbar__tile-row--pt {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--color-border);
}
.hr-cbar__tile-row--ot > span,
.hr-cbar__tile-row--cap > span,
.hr-cbar__tile-row--pt > span { color: var(--color-text); font-weight: 600; }
.hr-cbar__tile-row--ot > b,
.hr-cbar__tile-row--cap > b,
.hr-cbar__tile-row--pt > b { color: var(--color-navy); font-weight: 700; font-size: 16px; }

.hr-cbar__stack { display: flex; flex-direction: column; gap: 5px; }
.hr-cbar__row   { display: flex; align-items: stretch; }
.hr-cbar__row--first { margin-top: 3px; }
.hr-cbar__sp    { flex-shrink: 0; }

/* Barre principale = TT décomposé */
.hr-cbar__bar {
  display: flex;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid var(--color-border);
}
.hr-cbar__seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 4px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.hr-cbar__seg:last-child { border-right: none; }
.hr-cbar__seg-n {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hr-cbar__seg-h { font-size: 13px; font-weight: 700; margin-top: 1px; }
.hr-cbar__seg-d { font-size: 10px; opacity: 0.85; }
.hr-cbar__seg--hol  { background: var(--stone-300); color: var(--color-text); }
.hr-cbar__seg--corp { background: #C98A4B; }
.hr-cbar__seg--sup  { background: #C98A4B; }
.hr-cbar__seg--abs  { background: #A8612F; }
.hr-cbar__seg--bill { background: var(--color-sage); }
.hr-cbar__seg--nb   { background: #9DB87A; }
.hr-cbar__seg--idle { background: var(--color-terracotta); }

/* Couches agrégat sous la barre */
.hr-cbar__agg {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid transparent;
}
.hr-cbar__agg span { font-weight: 600; opacity: 0.75; }
.hr-cbar__agg--ot   { background: #F6E0D7; border-color: #E3B7A6; color: var(--terracotta-dark); }
.hr-cbar__agg--tr   { background: #F2E6D2; border-color: #DEC79E; color: #7A5326; }
.hr-cbar__agg--prod { background: #E4ECD7; border-color: #BBCEA0; color: var(--sage-dark); }

/* ── Définitions de vue (bullets sous le titre) ──────────────────────────── */
.chr-view-defs {
  margin: 0 0 14px;
  padding: 12px 16px 12px 32px;
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.chr-view-defs li { margin: 2px 0; }

/* ── Point de contrôle Full cost (sous le tableau) ───────────────────────── */
.chr-control-point {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--stone-50);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.chr-control-point__label {
  color: var(--color-text-muted);
}
.chr-control-point__val {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}
.chr-control-point__sep {
  color: var(--color-text-muted);
}
.chr-control-point__flag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.chr-control-point__flag.is-ok {
  background: #e3ede0;
  background: var(--sage-light, #e3ede0);
  color: var(--sage-dark);
}
.chr-control-point__flag.is-ko {
  background: var(--terracotta-light);
  color: var(--terracotta-dark);
}

/* ── 3 cards calculs intermédiaires CHR (sous la synthèse) ───────────────── */
.chr-formula-cards {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.chr-formula-card {
  padding: 14px 16px;
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chr-formula-card--primary {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.chr-formula-card__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.chr-formula-card--primary .chr-formula-card__title {
  color: var(--color-primary);
}
.chr-formula-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.chr-formula-card__row--result {
  border-top: 0.5px solid var(--color-border);
  margin-top: 4px;
  padding-top: 8px;
}
.chr-formula-card--primary .chr-formula-card__row--result {
  border-top-color: var(--color-primary);
  color: var(--color-primary);
}
.chr-formula-card__lbl {
  color: var(--color-text);
}
.chr-formula-card__val {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text);
}
.chr-formula-card__val--muted {
  color: var(--color-text-muted);
  font-size: 11px;
}
@media (max-width: 1100px) {
  .chr-formula-cards { grid-template-columns: 1fr; }
}

/* ── Définitions CHB / CHP / CHR sous la table ───────────────────────────── */
.chr-definitions {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
}
.chr-definitions__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.chr-definitions__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin: 0;
}
.chr-definitions__item dt {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--color-text);
}
.chr-definitions__item dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .chr-definitions__list { grid-template-columns: 1fr; }
}
.hr-synth__note code {
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

@media (max-width: 1100px) {
  .hr-synth__grid--6 { grid-template-columns: repeat(3, 1fr); }
  .hr-synth__grid--5 { grid-template-columns: repeat(3, 1fr); }
  .hr-synth__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .hr-synth__grid--6, .hr-synth__grid--5, .hr-synth__grid--4, .hr-synth__grid--3 { grid-template-columns: 1fr; }
}

/* ── Monthly chart ───────────────────────────────────────────────────────── */
.hr-chart {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
}
.hr-chart__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  /* Bandeau bleu standard (charte var(--color-surface-card)), bleed jusqu'aux bords (card padding 16/18). */
  margin: -16px -18px 14px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 10px 10px 0 0;
}
.hr-chart__bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 6px;
  gap: 6px;
  min-height: 200px;
}
.hr-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.hr-chart__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-chart__bar-wrap {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
/* Affordance +/− au survol d'une barre : crée un mouvement (Position / Réduction)
   directement au mois cliqué. Visible seulement au survol de la colonne. */
.hr-chart__add {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s;
}
.hr-chart__col:hover .hr-chart__add { opacity: 1; pointer-events: auto; }
.hr-chart__add-btn {
  width: 18px; height: 18px; border-radius: 4px;
  border: none; cursor: pointer;
  font-size: 14px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 1px 3px rgba(43, 32, 62, 0.25);
}
.hr-chart__add-btn--hire { background: var(--color-sage); }
.hr-chart__add-btn--cut  { background: var(--color-terracotta); }
.hr-chart__add-btn:hover { filter: brightness(1.08); }
.hr-chart__bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  position: relative;
  transition: height 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hr-chart__bar-base {
  background: var(--color-accent);
  width: 100%;
}
.hr-chart__bar-delta {
  width: 100%;
}
.hr-chart__bar-delta.is-up {
  background: var(--color-navy);
  order: -1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hr-chart__bar-delta.is-down {
  background: var(--color-terracotta);
  order: -1;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.hr-chart__val-delta {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}
.hr-chart__val-delta.is-up {
  color: white;
  background: var(--color-navy);
}
.hr-chart__val-delta.is-down {
  color: white;
  background: var(--color-terracotta);
}
.hr-chart__btn-zone {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
  -webkit-user-select: none;
          user-select: none;
}
.hr-chart__bar:hover .hr-chart__btn-zone { opacity: 0.85; }
.hr-chart__btn-zone:hover { opacity: 1 !important; }
.hr-chart__btn-zone--add {
  top: 0;
  height: 50%;
  background: rgba(99, 153, 34, 0.4);
  border-radius: 2px 2px 0 0;
}
.hr-chart__btn-zone--sub {
  bottom: 0;
  height: 50%;
  background: rgba(226, 75, 74, 0.4);
}
/* .hr-chart__delta is gone — delta is now materialized as a full
   segment of the bar via .hr-chart__bar-delta (above). */
.hr-chart__month {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text);
  margin-top: 6px;
}
.hr-chart__net {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--color-border);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-chart__net::before {
  content: 'net ';
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #A8A29E;
  color: var(--stone-400, #A8A29E);
  margin-right: 2px;
}
.hr-chart__legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--color-text-muted);
}
.hr-chart__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hr-chart__sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ── Movements section ───────────────────────────────────────────────────── */
.hr-moves {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.hr-moves__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Bandeau bleu standard (charte var(--color-surface-card)), bleed jusqu'aux bords (card padding 14/16). */
  margin: -14px -16px 12px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 10px 10px 0 0;
}
.hr-moves__head-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hr-moves__note {
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
/* Directive (« marche à suivre »), pas un simple libellé de section — texte
   complet, donc casse normale (l'UPPERCASE le rendrait moins lisible en
   phrase longue), gras et coloré pour qu'on la lise avant de saisir. */
.hr-moves__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy);
}
.hr-moves__add {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.hr-moves__add--hire  { background: var(--color-sage); }
.hr-moves__add--raise { background: var(--color-amber); }
.hr-moves__add--leave { background: #E24B4A; }
.hr-moves__add--primary { background: var(--color-accent); }
.hr-moves__add:hover { opacity: 0.85; }

/* Menu déroulant unifié (bouton ✎ de ligne, ou « + Mouvement » d'en-tête). */
.hr-movemenu { position: relative; display: inline-block; }
.hr-movemenu__pop {
  position: absolute; z-index: 30; top: calc(100% + 4px);
  min-width: 180px; padding: 4px;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(43, 32, 62, .16);
}
.hr-movemenu__pop--row { right: 0; }
.hr-movemenu__pop--head { left: 0; min-width: 220px; }
.hr-movemenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font: inherit; font-size: 12.5px; text-align: left;
  color: var(--color-text); background: transparent; border: 0;
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
}
.hr-movemenu__item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.hr-movemenu__chev { color: var(--color-text-muted); font-size: 13px; }
.hr-movemenu__searchwrap { padding: 4px 4px 6px; }
.hr-movemenu__search {
  width: 100%; font: inherit; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-page);
}
.hr-movemenu__search:focus { outline: none; border-color: var(--color-accent); }
.hr-movemenu__empty { font-size: 12px; color: var(--color-text-muted); padding: 6px 9px; }
.hr-moves__clear {
  font-family: inherit;
  font-size: 11px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0.5px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.hr-moves__empty {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 16px 0;
  text-align: center;
}
.hr-moves__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hr-moves__table th {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 0.5px solid var(--color-border);
}
.hr-moves__table td {
  padding: 6px 8px;
}
.hr-moves__table input,
.hr-moves__table select {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 4px;
  padding: 3px 6px;
  outline: none;
}
.hr-moves__table input:focus,
.hr-moves__table select:focus {
  border-color: var(--color-primary);
}
.hr-moves__my {
  display: inline-flex;
  gap: 4px;
}
/* Préposition avant le sélecteur De/À (dès / du / au) — lit la ligne comme
   une phrase (« dès 1er sept. » / « du 1er sept. au fin déc. »), sans
   ajouter de colonne. */
.hr-moves__prep {
  font-size: 11px; color: var(--color-text-muted); margin-right: 3px;
}
/* Colonne À d'un départ : par nature sans fin (permanent) — un tiret plutôt
   qu'un sélecteur vide désactivé, qui se lisait comme un « de … à … » bizarre
   pour un événement ponctuel. */
.hr-moves__noend { color: var(--color-text-muted); font-size: 12px; }
/* Sous-titres de groupe dans la table mouvements (une seule card, 2 blocs).
   Deux familles de teinte distinctes (tokens charte) pour séparer les blocs sans
   inonder toute la table : bleu-gris (nominatifs) vs crème chaud (globales).
   Filet coloré à gauche = repère du bloc. */
.hr-moves__table .hr-moves__section td {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  padding: 7px 8px;
}
.hr-moves__table .hr-moves__section--nominative td {
  background: #E5ECEE;
  background: var(--color-accent-tint-strong, #E5ECEE);
}
.hr-moves__table .hr-moves__section--global td {
  background: #ECE8E1;
  background: var(--color-surface-page, #ECE8E1);
}
.hr-moves__table .hr-moves__section:not(:first-child) td {
  border-top: 1px solid #E7E5E4;
  border-top: 1px solid var(--color-border, #E7E5E4);
}
/* Lignes de données — teinte douce assortie à leur bloc. */
.hr-moves__table .hr-moves__row--nominative td {
  background: #F1F5F6;
  background: var(--color-accent-tint, #F1F5F6);
}
.hr-moves__table .hr-moves__row--global td {
  background: #FBF8F2;
  background: var(--color-surface-th, #FBF8F2);
}
/* Filet coloré à gauche du bloc — repère porté par la 1ʳᵉ cellule uniquement. */
.hr-moves__table .hr-moves__section--nominative td:first-child,
.hr-moves__table .hr-moves__row--nominative td:first-child {
  box-shadow: inset 3px 0 0 #3F6470;
  box-shadow: inset 3px 0 0 var(--color-accent, #3F6470);
}
.hr-moves__table .hr-moves__section--global td:first-child,
.hr-moves__table .hr-moves__row--global td:first-child {
  box-shadow: inset 3px 0 0 #B8862A;
  box-shadow: inset 3px 0 0 var(--color-amber, #B8862A);
}
.hr-moves__count { color: #78716C; color: var(--color-text-muted, #78716C); font-weight: 600; }
/* Sous-bloc DANS « Mouvements nominatifs » (Fins de contrat / Chgt de taux) —
   même famille que le bloc parent mais plus discret (pas de fond plein, pas
   de filet), juste un séparateur fin pour scinder la lecture. */
.hr-moves__table .hr-moves__subsection td {
  font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase;
  font-weight: 600; color: #78716C; color: var(--color-text-muted, #78716C);
  padding: 5px 8px 4px 14px;
  background: transparent;
}
/* Filet seulement entre deux sous-blocs (pas juste sous l'en-tête parent,
   qui a déjà son propre filet plus marqué). */
.hr-moves__table .hr-moves__row--nominative + .hr-moves__subsection td,
.hr-moves__table .hr-moves__sub-empty + .hr-moves__subsection td {
  border-top: 1px dashed #DED7CB;
  border-top: 1px dashed var(--color-border-inner, #DED7CB);
}
.hr-moves__table .hr-moves__sub-empty td {
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-size: 12px;
  padding: 8px;
}
.hr-moves__remove {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.hr-moves__remove:hover {
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
}

/* ── Bottom total bar ────────────────────────────────────────────────────── */
.hr-total-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-navy);
  color: #FBF7EF;
  border-radius: 8px;
  padding: 14px 20px;
  margin-top: 12px;
}
.hr-total-bar__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.hr-total-bar__detail {
  font-size: 11px;
  color: rgba(251, 247, 239, 0.65);
  flex: 1 1;
}
.hr-total-bar__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.hr-page__muted { color: var(--color-text-muted); }
.hr-page__zero  { color: var(--stone-400); }

.hr-page__back {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-muted);
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.hr-page__back:hover { background: var(--color-bg); color: var(--color-text); }

/* ── Sort + selection + mass update ──────────────────────────────────────── */
.hr-page__sort-th {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
}
.hr-page__sort-th:hover { color: var(--color-text); }
.hr-page__sort-th.is-sorted { color: var(--color-text); }
.hr-page__sort-ind {
  display: block;
  margin-left: 0;
  margin-top: 2px;
  font-size: 10px;
  color: var(--stone-400);
  opacity: 0.6;
}
.hr-page__sort-th.is-sorted .hr-page__sort-ind {
  color: var(--color-accent);   /* ardoise — un tri actif n'est pas une alerte */
  opacity: 1;
}

/* ── Person column inline sort toggles (F / L) ───────────────────────────── */
.hr-person-sort {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 6px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--stone-400);
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
}
.hr-person-sort:hover {
  color: var(--color-text);
  background: var(--color-bg);
}
.hr-person-sort.is-active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  opacity: 1;
}
.hr-person-sort__ind {
  display: inline-block;
  font-weight: 400;
  font-size: 9px;
}

.hr-page__check-col {
  width: 26px;
  text-align: center;
  padding-left: 4px !important;
  padding-right: 2px !important;
}
.hr-page__check-col input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--color-primary);
}

.hr-page__table tbody tr.is-selected { background: var(--color-primary-light); }
.hr-page__table tbody tr.is-selected:hover { background: var(--color-primary-light); }

.hr-page__add-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: var(--color-sage);          /* sage — "add" intent */
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.hr-page__add-btn:hover { background: var(--sage-dark); }

.hr-page__row-del,
.hr-page__row-edit,
.hr-page__row-dup {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0 1px;
}
.hr-page__row-del:hover {
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
}
.hr-page__row-edit:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.hr-page__row-dup:hover {
  color: var(--sage-dark);
  background: var(--sage-light);
}

/* ── Master-detail People : chevron + panneau contrats ───────────────────── */
.hr-people__expand {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: transform 0.12s ease;
  transform: rotate(0deg);
}
.hr-people__expand.is-open { transform: rotate(90deg); }
.hr-people__expand:hover { color: var(--color-navy); }

.hr-people__detail-row > td {
  padding: 0;
  background: var(--color-accent-tint);             /* colonne phare bleu-gris (charte) */
  border-bottom: 1px solid var(--color-border);
}
.hr-people__detail {
  padding: 12px 16px 14px 46px;    /* aligné sous le chevron */
}
.hr-people__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hr-people__detail-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  color: var(--color-navy);
}
.hr-people__detail-add { padding: 4px 10px; font-size: 12px; }
.hr-people__detail-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 4px 0;
}
.hr-people__detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hr-people__detail-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-card);             /* en-tête bleu-gris (charte) */
  border-bottom: 1px solid var(--color-border);
  padding: 6px 10px;
}
.hr-people__detail-table tbody td {
  padding: 6px 10px;
  border-bottom: 0.5px solid var(--color-border);
}
.hr-people__detail-table tbody tr:last-child td { border-bottom: none; }

/* ── LPP : taux par défaut + badges source ───────────────────────────────── */
.lpp-default {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.lpp-default__field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lpp-default__adopt {
  font-size: 11px;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}
.lpp-default__adopt:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-border);
  color: var(--color-navy);
}
.lpp-default__label {
  font-size: 13px;
  color: var(--color-text-muted);
}
.lpp-default__hint {
  font-size: 12px;
  color: var(--color-text-muted);
}
.lpp-default__warn {
  margin-top: 10px;
  font-size: 13px;
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  border: 0.5px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.lpp-src {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.lpp-src--explicit { color: var(--sage-dark);  background: var(--sage-light); }
.lpp-src--carried  { color: var(--color-text-muted); background: var(--color-bg); border: 0.5px solid var(--color-border); }
/* Emprunté = taux futur appliqué à une année passée → ambre, contour pour signaler l'estimation. */
.lpp-src--borrowed { color: var(--color-amber); background: var(--color-bg); border: 0.5px solid var(--color-amber); }
.lpp-src--default  { color: var(--color-amber); background: #F6EEDD; }
.lpp-src--none     { color: var(--terracotta-dark); background: var(--terracotta-light); }

.hr-modal--wide { width: 1080px; max-width: 95vw; max-height: 90vh; }
.hr-modal--wide .hr-modal__body { overflow-y: auto; overflow-x: hidden; }

/* ── Onboarding modal sections ─────────────────────────────────────────────── */
.hr-onboard__section {
  margin-bottom: 18px;
}
.hr-onboard__section:last-child { margin-bottom: 0; }

.hr-onboard__section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--color-border);
  display: flex;
  align-items: center;
}

.hr-onboard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px 16px;
  gap: 12px 16px;
}
@media (max-width: 900px) {
  .hr-onboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hr-onboard__grid { grid-template-columns: 1fr; }
}

.hr-onboard__hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1.5;
}
.hr-onboard__hint code {
  background: var(--stone-100);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

/* ── Editable cell (blue user-input convention, matches Charges sociales) ── */
.hr-edit-cell {
  display: inline-block;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-input);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-edit-cell:hover {
  background: var(--color-input-bg);
  color: var(--color-input-text);
}
.hr-edit-cell:focus {
  outline: none;
  background: var(--color-input-bg);
  box-shadow: 0 0 0 1px var(--color-input);
}
.hr-edit-cell--empty {
  color: var(--stone-400);
  font-style: italic;
}
.hr-edit-cell--empty:hover { color: var(--color-input); font-style: normal; }

.hr-edit-input {
  font-family: inherit;
  font-size: 13px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  color: var(--color-input-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  box-sizing: border-box;
}

/* ── Triple-segment date input (DD - MM - YYYY, auto-advance) ────────────── */
.hr-date-trio {
  display: inline-flex;
  align-items: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input);
  border-radius: 4px;
  padding: 1px 4px;
  gap: 2px;
}
.hr-date-trio input {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-input-text);
  background: transparent;
  border: none;
  padding: 1px 2px;
  outline: none;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-date-trio input::placeholder {
  color: var(--color-accent-soft);
}
/* Sizing per segment (DD=2 chars, MM=2 chars, YYYY=4 chars) */
.hr-date-trio input:nth-of-type(1) { width: 22px; }
.hr-date-trio input:nth-of-type(2) { width: 22px; }
.hr-date-trio input:nth-of-type(3) { width: 38px; }
.hr-date-trio__sep {
  color: var(--color-accent-soft);
  -webkit-user-select: none;
          user-select: none;
}

.hr-page__bulk-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.hr-page__bulk-btn:hover:not(:disabled) { background: var(--terracotta-dark); }
.hr-page__bulk-btn:disabled {
  background: var(--stone-100);
  color: var(--stone-400);
  cursor: not-allowed;
}

/* Suppression : variante contour (ghost) — geste rare et délibéré, n'attire pas
   l'œil comme un bouton plein. Actif seulement quand une sélection existe. */
.hr-page__del-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.hr-page__del-btn:hover:not(:disabled) {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.hr-page__del-btn:disabled {
  color: var(--stone-400);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* Sélecteur de mois de versement (compléments) — 12 pastilles cliquables.
   « Coché » = bleu saisie (convention cellule éditable de la charte). */
.hr-months {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: max-content;
}
.hr-months__btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 4px;
  min-width: 27px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.hr-months__btn:hover { border-color: var(--color-input); }
.hr-months__btn.is-on {
  color: #fff;
  background: var(--color-input);
  border-color: var(--color-input);
  font-weight: 600;
}
/* Bouton TOUS — coche/décoche les 12 mois d'un coup (méthode prévision trésorerie). */
.hr-months__btn--all {
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-right: 4px;
}
.hr-months__del {
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.55;
}
.hr-months__del:hover { opacity: 1; }

/* En-tête de colonne non triable (curseur par défaut). */
.hr-page__sort-th.is-static { cursor: default; }

/* LPP — ligne sans taux saisi (ni exonération) : on applique la moyenne/défaut.
   Signalée en rouge (terracotta) pour inviter à préciser un taux. */
.lpp-row--needs-rate td { background: var(--terracotta-light); }
.lpp-src--exempt { color: var(--color-text-muted); background: var(--color-bg); border: 0.5px dashed var(--color-border); }

/* Source cliquable : badge rendu comme bouton (figer / relâcher l'exercice).
   Ligne fine, pas de halo/contour épais du <button> par défaut. */
.lpp-src--btn {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: 1px solid var(--color-border);
}
.lpp-src--btn:hover { filter: brightness(0.96); text-decoration: underline; }
.lpp-src--btn:focus,
.lpp-src--btn:focus-visible { outline: none; border-color: var(--color-primary); }

.hr-page__linkbtn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.hr-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hr-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  width: 460px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hr-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 0.5px solid var(--color-border);
}
.hr-modal__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.hr-modal__close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.hr-modal__close:hover { background: var(--color-bg); color: var(--color-text); }

.hr-modal__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hr-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hr-modal__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.hr-modal__hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--stone-400);
  margin-left: 6px;
}
.hr-modal__input {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  outline: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hr-modal__input:focus { border-color: var(--color-primary); }
.hr-modal__textarea { resize: vertical; min-height: 60px; }
.hr-modal__error {
  background: var(--terracotta-light);
  color: var(--terracotta-dark);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
}
/* Alerte contrat ↔ mouvement de planning en doublon — même famille que
   l'erreur (alerte système), mais moins pressante : n'empêche pas de saisir. */
.hr-modal__warn {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--terracotta-light); color: var(--terracotta-dark);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px;
}
.hr-modal__warn-icon { flex: 0 0 auto; font-size: 14px; line-height: 1.3; }
.hr-modal__warn-title { font-weight: 600; margin-bottom: 3px; }
.hr-modal__warn-list { margin: 0 0 4px; padding-left: 18px; }
.hr-modal__warn-link {
  font: inherit; font-weight: 600; color: inherit; text-decoration: underline;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hr-modal__warn-link:hover { opacity: .8; }
.hr-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 0.5px solid var(--color-border);
}
.hr-modal__btn {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
}
.hr-modal__btn:hover:not(:disabled) { background: var(--color-bg); color: var(--color-text); }
.hr-modal__btn--primary {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}
.hr-modal__btn--primary:hover:not(:disabled) { background: var(--terracotta-dark); }
.hr-modal__btn--danger {
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
}
.hr-modal__btn--danger:hover:not(:disabled) {
  color: #fff;
  background: var(--color-terracotta);
}
.hr-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Totals row (tfoot) ────────────────────────────────────────────────── */
.hr-page__total-row td {
  background: var(--color-card);   /* total en blanc — marqué par le filet navy, pas par un fond */
  border-top: 2px solid var(--color-navy);
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  padding-top: 8px;
  padding-bottom: 8px;
}
.hr-page__total-row td.hr-page__num strong {
  color: var(--color-navy);
}

/* ── People evolution grid (year-end view) ───────────────────────────── */
.hr-evol {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  margin-top: 14px;
}
.hr-evol__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Bandeau bleu standard (charte var(--color-surface-card)), bleed jusqu'aux bords (card padding 16/18). */
  margin: -16px -18px 14px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 10px 10px 0 0;
}
.hr-evol__title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.hr-evol__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hr-evol__hint {
  margin-left: 10px;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.hr-evol__table-wrap {
  overflow-x: auto;
}
.hr-evol__table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 11px;
}
.hr-evol__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--stone-50);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 6px;
  border-bottom: 0.5px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.hr-evol__table tbody td {
  padding: 5px 6px;
  border-bottom: 0.5px solid var(--color-border);
  white-space: nowrap;
  vertical-align: middle;
}
.hr-evol__table tbody tr:hover { background: var(--color-bg); }
.hr-evol__num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
.hr-evol__sub {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
  color: var(--color-text-muted);
}
.hr-evol__mcol {
  text-align: center !important;
  min-width: 48px;
}
.hr-evol__name {
  white-space: nowrap;
}
.hr-evol__cell {
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  border-radius: 3px;
  padding: 4px 2px;
  color: var(--color-text-muted);
  background: transparent;
}
.hr-evol__cell--active {
  color: var(--sage-dark);
  background: var(--sage-light);
}
.hr-evol__cell--before,
.hr-evol__cell--after {
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  font-weight: 500;
}
.hr-evol__cell--none {
  color: var(--color-text-muted);
  background: var(--stone-100);
}

/* ── Personnel planning : overlay mouvements ─────────────────────────────── */
.hr-evol__rowbtn {
  border: 1px solid var(--color-border);
  background: #fff;
  background: var(--surface, #fff);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
  margin-left: 3px;
  color: var(--color-text-muted);
}
.hr-evol__rowbtn:hover {
  color: var(--color-text);
  background: var(--stone-100);
}
.hr-evol__row--planned > td {
  background: rgba(99, 153, 34, 0.05);
}
.hr-evol__row--synthetic > td {
  font-style: italic;
}
.hr-evol__row--synthetic.is-hire .hr-evol__name {
  border-left: 3px solid var(--color-sage);
  padding-left: 6px;
  color: #3D5129;
}
.hr-evol__row--synthetic.is-cut .hr-evol__name {
  border-left: 3px solid #963F25;
  border-left: 3px solid var(--terracotta-dark, #963F25);
  padding-left: 6px;
  color: #963F25;
  color: var(--terracotta-dark, #963F25);
}
.hr-plan-banner {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(99, 153, 34, 0.08);
  border: 1px solid rgba(99, 153, 34, 0.25);
  color: var(--color-text);
}
.hr-plan-banner--closed {
  background: #f0eee9;
  background: var(--stone-100, #f0eee9);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.hr-plan-banner--warn {
  background: var(--terracotta-light);
  border-color: #963F25;
  border-color: var(--terracotta-dark, #963F25);
  color: #963F25;
  color: var(--terracotta-dark, #963F25);
}
.hr-moves--full {
  margin-top: 16px;
}
/* Cellule en dépassement (Annual hours) : saisies > capacité. */
.hr-page__cell-warn {
  background: var(--terracotta-light);
  color: #963F25;
  color: var(--terracotta-dark, #963F25);
  font-weight: 600;
}
.hr-page__cell-warn input {
  color: #963F25;
  color: var(--terracotta-dark, #963F25);
  font-weight: 600;
}

/* Card mouvements mise en évidence — zone de saisie des hypothèses.
   Corps blanc (pas d'aplat sur toute la table) + élévation (ombre) pour signaler
   la zone de saisie. La distinction visuelle se fait par section (cf. plus bas). */
.hr-moves--highlight {
  background: var(--color-surface-card);
  border-color: var(--color-border);
  box-shadow: 0 4px 16px rgba(43, 32, 62, 0.12);
}
.hr-moves__head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Boutons nominatifs (Fin de contrat / Chgt de taux / Modif. salaire) —
   même famille que --hire/--leave mais neutre (pas de connotation +/-). */
.hr-moves__add--nominal { background: var(--color-accent); }
/* Recherche par personne, au-dessus de la table (2026-08-13). */
.hr-moves__search { padding: 10px 20px 0; }
/* Lecture compacte des mouvements : libellé tronqué proprement, période sur
   une ligne, valeur alignée à droite — remplace les colonnes De/À/Taux/CHF
   éditables (« un stylo pour modifier suffit »). */
.hr-moves__lbl { color: var(--color-text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-moves__period { color: var(--color-text); white-space: nowrap; }
/* Personne déjà choisie dans MoveFormModal — bouton "changer" pour revenir
   à la recherche. */
.hr-movemenu__chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-page); font-size: 13px;
}
.hr-movemenu__chosen button {
  font: inherit; font-size: 11.5px; color: var(--color-accent);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
}
.hr-movemenu__list { max-height: 180px; overflow-y: auto; margin-top: 4px; }

/* ── Kanban des mouvements (2026-08-13) ────────────────────────────────────
   Une colonne par type — la table Mouvements ne sert QU'à ça, autant
   l'exploiter comme une console de mixage plutôt qu'un tableau plat.
   Chaque colonne : en-tête (libellé + compteur + ＋), tuiles triées par
   prénom (nominatif) ou par date (global), état vide si rien à montrer
   (colonnes toujours visibles, décision d'Olivier — pas de repli caché). */
.hr-kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  padding: 4px 20px 20px;
}
.hr-kanban__col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 7px;
  border-bottom: 2px solid var(--color-border);
}
.hr-kanban__col-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  flex: 1 1 auto;
  min-width: 0;
}
.hr-kanban__col-count {
  font-size: 11px;
  color: var(--color-text-muted);
}
.hr-kanban__col-add {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-card);
  color: var(--color-text-muted);
  cursor: pointer;
}
.hr-kanban__col-add:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hr-kanban__col-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 2px;
}
.hr-kanban__tile {
  position: relative;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 32px 6px 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.hr-kanban__tile-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-kanban__tile-actions {
  position: absolute;
  top: 5px;
  right: 6px;
  display: flex;
  gap: 2px;
}
.hr-kanban__tile-actions button {
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 2px 3px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.hr-kanban__tile:hover .hr-kanban__tile-actions button,
.hr-kanban__tile-actions button:focus-visible { opacity: 1; }
.hr-kanban__tile-actions button:hover { color: var(--color-terracotta); }
.hr-kanban__tile-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-kanban__empty {
  font-size: 12px;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 14px 8px;
  text-align: center;
}
@media (max-width: 1100px) {
  .hr-kanban { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 680px) {
  .hr-kanban { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
.hr-moves__table--full {
  width: 100%;
}
.hr-moves__table--full th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 4px 6px;
}
.hr-moves__table--full input,
.hr-moves__table--full select {
  font-size: 12px;
  /* Fond blanc : le champ ressort comme zone éditable sur les lignes teintées. */
  background: var(--color-surface-card);
}
.hr-moves__table--full input:disabled,
.hr-moves__table--full select:disabled {
  opacity: 0.4;
}

.hr-evol__sort-th {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.hr-evol__sort-th:hover {
  color: var(--color-text);
  background: var(--stone-100);
}
.hr-evol__sort-th.is-sorted {
  color: var(--color-primary);
}
.hr-evol__sort-ind {
  margin-left: 4px;
  opacity: 0.6;
  font-size: 9px;
}
.hr-evol__sort-th.is-sorted .hr-evol__sort-ind {
  opacity: 1;
}

.hr-evol__total-row td,
.hr-evol__total-row th {
  background: var(--stone-50);
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 500;
  border-bottom: none;
}
.hr-evol__total-row--fte th,
.hr-evol__total-row--fte td {
  border-top: 1px solid var(--color-border);
}
.hr-evol__total-row--hc th,
.hr-evol__total-row--hc td {
  border-top: 0.5px solid var(--color-border);
}
.hr-evol__total-label {
  text-align: left;
  padding-left: 6px;
  font-weight: 600;
}
.hr-evol__total-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--color-text);
}
.hr-evol__total-avg {
  margin-left: 10px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.hr-evol__total-cell {
  text-align: center;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-text);
}

/* ── Top row layout : KPI panel (left) + chart (right) ──────────────── */
.hr-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}
/* Le graphique parti (2026-08-22), la synthèse prend toute la largeur : six
   tuiles à plat plutôt qu'une colonne étroite sur deux rangs. La grille --6
   existe déjà plus haut, avec ses paliers responsive — on ne la redéfinit pas. */
.hr-top-row--tiles { grid-template-columns: 1fr; }
.hr-synth--side {
  margin-bottom: 0;
}
.hr-chart--side, .hr-chart--wide {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.hr-chart--side .hr-chart__bars, .hr-chart--wide .hr-chart__bars {
  flex: 1 1;
}
/* Dans l'onglet Masse salariale, le graphique ouvre l'écran, pleine largeur. */
.hr-chart--wide { margin-bottom: 18px; }
@media (max-width: 1100px) {
  .hr-top-row {
    grid-template-columns: 1fr;
  }
}

/* ── Vue d'ensemble : UNE card blanche multi-sections (le hub n'a plus de cadre).
   Les bandeaux servent de séparateurs de section ; les sous-blocs (chart / evol)
   restent des tuiles plates À L'INTÉRIEUR de la card (jamais de card-dans-card). */
.hr-overview .hr-charges-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.hr-overview .hr-chart { border: none; border-radius: 0; background: transparent; padding: 0; margin: 0; }
.hr-overview .hr-evol { border: none; border-radius: 0; background: transparent; margin: 0; padding: 8px 20px 16px; }

/* Vue d'ensemble éclatée en blocs-clés : Masse salariale (pleine largeur) puis
   Effectif & rotation | Variation salaires bruts, côte à côte. */
.hr-ov-stack { display: flex; flex-direction: column; gap: 18px; }
.hr-ov-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-gap: 18px;
  gap: 18px;
  align-items: stretch;
}
.hr-ov-row > .hr-charges-card { display: flex; flex-direction: column; }
.hr-ov-row > .hr-charges-card > .hr-charges-card__body { flex: 1 1; }
/* En rangée (côte à côte), neutraliser la marge des cards empilées : sinon la
   2e card hérite du margin-top:16px et descend → entêtes désalignés. */
.hr-ov-row > .hr-charges-card + .hr-charges-card { margin-top: 0; }
@media (max-width: 1100px) { .hr-ov-row { grid-template-columns: 1fr; } }

/* Total des salaires bruts affiché sous le titre, au-dessus du graphe. */
.hr-chart-total {
  font-family: inherit;               /* Inter (contenu) — un nombre n'est pas un titre */
  font-size: 22px;
  font-weight: 500;
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hr-chart-total .hr-kpi__unit { font-size: 12px; color: var(--color-text-muted); }
/* Le graphe remplit la hauteur de sa card → alignée sur la card Effectif.
   min-height:0 retire les planchers (bars 200px / wrap) pour que ce soit la card
   Effectif qui dicte la hauteur de rangée ; le graphe s'étire jusqu'à elle. */
.hr-ov-row .hr-chart { flex: 1 1; display: flex; flex-direction: column; }
.hr-ov-row .hr-chart__bars { flex: 1 1; min-height: 0; }
.hr-ov-row .hr-chart__bar-wrap { flex: 1 1; height: auto; min-height: 0; }

/* Effectif : KPI à gauche, graphe à droite */
.hr-ov-effectif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-gap: 18px; gap: 18px; align-items: stretch; }
@media (max-width: 1100px) { .hr-ov-effectif { grid-template-columns: 1fr; } }

/* Cockpit masse salariale */
.hr-cockpit-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.hr-cockpit-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.hr-cockpit-hero__big { font-size: 32px; font-weight: 500; line-height: 1.1; color: var(--color-navy); }
.hr-cockpit-hero__land { font-size: 22px; font-weight: 500; line-height: 1.1; color: var(--color-navy); }
.hr-cockpit-hero__cmp { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.hr-detail-toggle {
  margin-top: 12px; align-self: flex-start; width: fit-content;
  background: var(--color-accent-tint); border: 1px solid var(--color-border); border-radius: 7px;
  padding: 5px 11px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent);
}
.hr-detail-toggle:hover { background: var(--color-accent-tint-strong); color: var(--color-navy); }
.hr-cockpit-bar { height: 12px; background: var(--color-border-inner); border-radius: 6px; overflow: hidden; margin-top: 12px; }
.hr-cockpit-bar > div { height: 100%; background: var(--color-accent); border-radius: 6px; }
.hr-cockpit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 14px; gap: 14px; margin-top: 16px; }
.hr-cockpit-proj { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.hr-cockpit-proj__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.hr-cockpit-proj__val { font-size: 15px; font-weight: 500; margin-top: 2px; }

/* ── Print mode (Evolution page only) ─────────────────────────────────────
   Active when <body> gets `.evolution-printing` (set by the print button on
   HrEvolutionPage). A4 portrait, same screen view, scaled down so the
   chart + cards fit on one page. */
@media print {
  body.evolution-printing { background: #fff !important; }
  /* @page est global (non scopable) : le forcer en portrait ici imposait le
     portrait à TOUT le PDF (système Print inclus). On s'aligne sur landscape. */
  @page { size: A4 landscape; margin: 10mm 8mm; }

  /* Hide everything by default */
  body.evolution-printing > *,
  body.evolution-printing .logike-page-wrap > * {
    visibility: hidden !important;
  }
  /* Show only the Evolution page */
  body.evolution-printing .hr-page,
  body.evolution-printing .hr-page * {
    visibility: visible !important;
  }
  body.evolution-printing .hr-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Hide the interactive bits inside the header */
  body.evolution-printing .hr-page__no-print { display: none !important; }

  /* Densify : the on-screen layout already scales gracefully when narrowed.
     We just reduce a few base sizes so the 24-month chart + 3 cards fit
     comfortably on one A4 portrait page. */
  body.evolution-printing .hr-page {
    font-size: 9pt;
  }
  body.evolution-printing .hr-page__title { font-size: 16pt; }
  body.evolution-printing .hr-page__subtitle { font-size: 8.5pt; }
  body.evolution-printing .hr-chart__bars { gap: 2px !important; }

  /* Avoid page-breaks inside cards */
  body.evolution-printing .hr-chart,
  body.evolution-printing .hr-page > div { page-break-inside: avoid; break-inside: avoid; }

  /* Year-end : masquer les colonnes détail (dept, salaire 100%, EPT, dates)
     pour ne garder que Nom + 12 mois sur une page A4 portrait. */
  body.evolution-printing .hr-evol__col-detail { display: none !important; }

  /* Etiquette tfoot : version "screen" cachée, version print-only visible */
  body.evolution-printing .hr-evol__print-only { display: table-cell !important; }
  body.evolution-printing .hr-page__no-print { display: none !important; }

  /* Densification grille personnel : 13 colonnes (1 nom + 12 mois) sur ~190mm */
  body.evolution-printing .hr-evol { font-size: 7.5pt; }
  body.evolution-printing .hr-evol__table th,
  body.evolution-printing .hr-evol__table td {
    padding: 2px 3px !important;
    font-size: 7.5pt !important;
    line-height: 1.15 !important;
  }
  body.evolution-printing .hr-evol__table { table-layout: fixed; width: 100%; }
  body.evolution-printing .hr-evol__sub,
  body.evolution-printing .hr-evol__sort-ind,
  body.evolution-printing .hr-evol__total-avg { display: none !important; }

  /* Largeurs explicites pour éviter que le nom déborde sur janvier.
     1ère colonne (nom) = 22% / 12 mois = 6,5% chacun (= 78%/12). */
  body.evolution-printing .hr-evol__table thead th:first-child,
  body.evolution-printing .hr-evol__table tbody td:first-child,
  body.evolution-printing .hr-evol__table tfoot .hr-evol__print-only { width: 22% !important; }
  body.evolution-printing .hr-evol__table thead .hr-evol__mcol,
  body.evolution-printing .hr-evol__table tbody .hr-evol__cell,
  body.evolution-printing .hr-evol__table tfoot .hr-evol__total-cell { width: 6.5% !important; }

  /* Colonne nom : autoriser le wrap sur 2 lignes plutôt que déborder */
  body.evolution-printing .hr-evol__name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
  }

  /* Cellules mois : afficher la valeur sans le signe % (gagne ~30% de largeur) */
  body.evolution-printing .hr-evol__pct-sign { display: none !important; }
  body.evolution-printing .hr-evol__cell,
  body.evolution-printing .hr-evol__mcol,
  body.evolution-printing .hr-evol__total-cell {
    text-align: center !important;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }

  /* Section KPI + chart en haut : compresser pour libérer la page */
  body.evolution-printing .hr-kpi { padding: 4px 6px !important; }
  body.evolution-printing .hr-kpi__value { font-size: 11pt !important; }
  body.evolution-printing .hr-kpi__label,
  body.evolution-printing .hr-kpi__hint { font-size: 7pt !important; }
  body.evolution-printing .hr-synth__head,
  body.evolution-printing .hr-chart__title { font-size: 8pt !important; }
}

/* Cellules "print-only" : invisibles hors impression */
.hr-evol__print-only { display: none; }

/* Bloc détail (page 2 du print Year-end) — invisible à l'écran */
.hr-evol--print-detail { display: none; }
@media print {
  body.evolution-printing .hr-evol--print-detail {
    display: block !important;
    break-before: page;
    page-break-before: always;
    margin-top: 0;
  }
  body.evolution-printing .hr-evol__table--detail {
    width: 100%;
    table-layout: auto;
    font-size: 8.5pt;
  }
  body.evolution-printing .hr-evol__table--detail th,
  body.evolution-printing .hr-evol__table--detail td {
    padding: 3px 6px !important;
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid #e8e6e0;
  }
  body.evolution-printing .hr-evol__table--detail thead th {
    text-align: left;
    border-bottom: 1px solid #57534e;
    font-weight: 600;
  }
  body.evolution-printing .hr-evol__table--detail .hr-evol__num {
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }
  /* En cas de débordement, autoriser le retour à la ligne dans le tableau détail */
  body.evolution-printing .hr-evol__table--detail tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ── Tooltip d'en-tête (explication colonne) — au-dessus, clair, lisible ─── */
.chr-th-tip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
  background: #FFFDF7;
  color: #2B203E;
  border: 1px solid #E0D8C8;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  width: max-content;
  max-width: 300px;
  text-align: left;
  z-index: 1000;
  pointer-events: none;
}

/* ── Filtre cost pool (vue Profitability) — au-dessus du tableau, à gauche ── */
.chr-pool-filter {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}
.chr-pool-filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.chr-pool-filter select {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

/* ── Build-up CCR → BCR (vue Capacity cost / Billable cost rate) ──────────────
   Barres empilées : CCR + charge non facturable + charge idle, ramenées à
   l'heure facturable (BCR). Même style que la carte tcp- (Capacity cost rate). */
.ccrb-card {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.ccrb-tit { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #2B203E; color: var(--color-text, #2B203E); }
.ccrb-tit small { font-weight: 400; color: #8B8478; color: var(--color-text-muted, #8B8478); font-size: 12px; }
.ccrb-leg { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: 11.5px; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.ccrb-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ccrb-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ccrb-ccr { background: #5B7C99; }
.ccrb-nonbill { background: #D99C5B; }
.ccrb-idle { background: #C2543C; }
.ccrb-row { display: grid; grid-template-columns: 120px 1fr 150px; align-items: center; grid-gap: 16px; gap: 16px; padding: 7px 0; }
.ccrb-row--avg { font-weight: 700; }
.ccrb-row--avg .ccrb-name { font-style: italic; }
.ccrb-row:not(:last-child) { border-bottom: 0.5px solid #ECE5D8; border-bottom: 0.5px solid var(--color-border, #ECE5D8); }
.ccrb-name { font-size: 13px; color: #2B203E; color: var(--color-text, #2B203E); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccrb-barcell { min-width: 2px; }
.ccrb-bar { display: flex; height: 27px; border-radius: 7px; overflow: hidden; min-width: 2px; }
.ccrb-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ccrb-seg.ccrb-ccr { background: #5B7C99; }
.ccrb-seg.ccrb-nonbill { background: #D99C5B; }
.ccrb-seg.ccrb-idle { background: #C2543C; }
.ccrb-right { text-align: right; font-size: 13px; color: #8B8478; color: var(--color-text-muted, #8B8478); white-space: nowrap; }
.ccrb-bcr { color: #C2543C; font-weight: 700; font-size: 15px; }

/* ── Production costing · by person (vue pcr) — carte soignée avec titre ──────
   Aligné sur la carte « Capacity cost rate · by person » (page Capacity Costing) :
   carte marquée (radius 14 + ombre + padding) + titre serif + lignes soignées. */
/* Carte extérieure (comme .tcp-card de Capacity Costing) */
.chr-pcr-card {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 18px 22px;
  margin-bottom: 18px;
}
/* En-tête de carte : titre + filtre, espacés (aéré) */
.chr-pcr-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.chr-pcr-tit {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: #2B203E;
  color: var(--color-text, #2B203E);
}
.chr-pcr-tit small {
  font-family: inherit;
  font-weight: 400;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
  font-size: 12px;
}
/* Filtre cost pool — même format que Capacity Costing (.tcp-ptable-filter) */
.chr-pcr-filter {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #8B8478; color: var(--color-text-muted, #8B8478);
}
.chr-pcr-filter select {
  border: 1px solid #C3D4E8; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  background: #EEF3FA; color: #3D5A80;
  font-family: inherit; cursor: pointer;
}
/* Cadre intérieur du tableau (comme .tcp-ptable-wrap) */
.chr-pcr-frame {
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: none;
}
.chr-pcr-frame .hr-page__table { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.chr-pcr-frame .hr-page__table tbody tr:nth-child(even) { background: rgba(43, 32, 62, .018); }
.chr-pcr-frame .hr-page__table tbody tr:hover { background: #FBF7F0; background: var(--color-bg, #FBF7F0); }
/* Total row : on garde le brun global (.hr-page__total-row) — pas d'override. */

/* ════════════════════════════════════════════════════════════════════════
   Gabarit "card unifié" (calé sur Capacity Costing) — Labour cost rate (LCR)
   & Production cost rate (BCR). Scopé sous .chr-rate (posé sur le <main> de
   ChrPage) → n'affecte AUCUNE autre page HR. En-tête de chaque card converti
   en BANDE bleu-gris pleine largeur via marges négatives (comme la référence
   .tcp-card > .tcp-tit de Capacity Costing).
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Carte synthèse KPI : bande d'en-tête bleu-gris (les KPI sont déjà à plat) */
.chr-rate .hr-synth {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
}
/* En-tête bleu standard du bloc KPI synthèse (charte var(--color-surface-card)), pour TOUS les
   rapports People — plus seulement LCR (.chr-rate). Bandeau titre pleine largeur. */
.hr-synth__head {
  margin: -16px -18px 0;        /* bleed jusqu'aux bords de la card (padding 16/18) */
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-navy);
  font-weight: 600;
}

/* Variante "à plat" : la section INDICATEURS n'est PAS une carte (pas de fond
   blanc, pas de bordure) — juste un label + filet bas posé sur le fond de page.
   Les tuiles KPI redeviennent la seule couche de card → un seul niveau. */
.hr-synth--flat {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 22px;   /* respire sous la carte du dessus */
  gap: 10px;          /* titre rapproché des tuiles */
}
/* Label à plat : pas de bandeau, pas de filet (hérités de .hr-synth__head) ;
   juste un titre posé sur le fond de page, aligné aux tuiles en dessous. */
.hr-synth--flat .hr-synth__head {
  margin: 0;
  padding: 0 20px;   /* aligné au titre des cards voisines (bandeau 12px 20px) */
  background: none;
  border-bottom: none;
}

/* 2. Carte bar-chart "Billable cost rate" (vue BCR) : même bande */
.chr-rate .ccrb-card { overflow: hidden; border-radius: 14px; }
.chr-rate .ccrb-tit {
  margin: -18px -22px 14px;     /* card padding 18/22 */
  padding: 12px 22px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600; color: var(--color-navy);
}

/* 3. Carte tableau "by person" (LCR & BCR) : en-tête (titre + filtre) en bande */
.chr-rate .chr-pcr-card { overflow: hidden; border-radius: 14px; }
.chr-rate .chr-pcr-head {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
  margin: -18px -22px 16px;     /* card padding 18/22 */
  padding: 12px 22px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
}
.chr-rate .chr-pcr-tit { font-size: 14px; color: var(--color-navy); }

/* Colonne phare (LCR / BCR) + ligne Total/Average → BLEU identique à Capacity
   cost rate (CCR) : colonne var(--color-accent-tint) (hover var(--color-accent-tint)), total var(--color-accent-tint-strong), intersection
   colonne×total var(--color-accent-tint-strong). Remplace le brun #F5F2EC / #EDE8DF. */
.chr-rate .hr-page__table th.hr-page__col-accent,
.chr-rate .hr-page__table td.hr-page__col-accent {
  background: var(--color-accent-tint) !important;
}
.chr-rate .hr-page__table tbody tr:hover td.hr-page__col-accent {
  background: var(--color-accent-tint) !important;
}
.chr-rate .hr-page__total-row td {
  background: var(--color-accent-tint-strong);
  border-top: 1px solid var(--color-border);
  color: var(--color-navy);
}
.chr-rate .hr-page__total-row td.hr-page__col-accent {
  background: var(--color-accent-tint-strong) !important;
}

/* Proposition de clôture du contrat précédent (2026-08-20) — case cochée par
   défaut dans la modale de création ; décocher assume un avenant temporaire. */
.hr-modal__warn-check { display: flex; align-items: center; gap: 7px; font-weight: 600; cursor: pointer; }
.hr-modal__warn-check input { accent-color: var(--color-accent); cursor: pointer; }
.hr-modal__warn-note { margin-top: 4px; color: var(--color-text-muted); font-style: italic; }

/* Bascule lecture / saisie de la card des mouvements (2026-08-21) : la frise
   lit, le tableau saisit. La lecture est la vue par défaut. */
.hr-moves__view {
  display: flex; gap: 2px; padding: 2px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 9px;
}
.hr-moves__view button {
  font: inherit; font-size: 12.5px; padding: 4px 12px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--color-text-muted); cursor: pointer;
}
.hr-moves__view button.is-on { background: var(--color-accent); color: #fff; font-weight: 600; }
.hr-moves__view button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Mini-bouton ⇄ de l'en-tête Collaborateur : inverse « NOM Prénom » ↔
   « Prénom NOM » (le tri de la colonne suit ce qui s'affiche en premier). */
.hr-nameorder {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 15px; line-height: 1; color: var(--color-text-muted);
  padding: 3px 6px; margin-left: 6px; border-radius: 4px;
}
.hr-nameorder:hover { color: var(--color-accent); background: var(--color-accent-tint); }
/* En-tête à deux bouts : libellé à gauche, commande à droite, une seule ligne. */
.hr-th-strong { font-weight: 700; color: var(--color-navy); }
/* En-tête à deux bouts : libellé à gauche, commande à droite, UNE ligne.
   Le sélecteur reprend celui de `th.hr-page__th-center > span:first-child`
   (display:block, max-width 130px) — sans cette spécificité, la règle
   générique gagnait et empilait libellé, flèche de tri et bascule. */
.hr-page__table th.hr-page__th-center > span.hr-th-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  white-space: nowrap;
}
.hr-th-row > span:first-child { white-space: nowrap; }
.hr-th-row .hr-page__sort-ind { display: inline; margin-top: 0; }
.hr-th-row .hr-nameorder { margin-left: auto; margin-right: 0; }

/* Gabarit des récits (« Résumé ») — deck aimanté, rail de chapitres, chapô,
   figures clés. Partagé par TOUS les récits depuis le 2026-08-23 : il vivait
   en double dans PeopleStory et CcrStory, deux copies à corriger à chaque
   retouche. Le défilement reste dans un conteneur PROPRE au récit, il ne
   touche pas au défilement de la page. */
.pst { position: relative; }

.pst-deck {
  height: calc(100vh - 210px);
  min-height: 420px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-card);
}
@media (prefers-reduced-motion: reduce) {
  .pst-deck { scroll-snap-type: none; scroll-behavior: auto; }
}

/* Rail de chapitres — une colonne de pastilles au repos, un MENU au survol.
   Discret tant qu'on lit, disponible dès qu'on cherche : sans les libellés,
   les pastilles disaient où l'on est sans dire ce qu'il y a ailleurs. */
.pst-rail {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pst-rail:hover, .pst-rail:focus-within {
  background: var(--color-surface-card);
  border-color: var(--color-border);
  box-shadow: 0 10px 28px rgba(43, 32, 62, .14);
}
.pst-rail button {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 6px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font: inherit; text-align: left;
  color: var(--color-text-muted);
}
.pst-rail:hover button:hover, .pst-rail:focus-within button:hover {
  background: var(--color-accent-tint); color: var(--color-accent);
}
.pst-rail button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* La pastille : seule visible au repos. */
.pst-rail button i {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--color-accent-soft); background: transparent;
  transition: background .2s, transform .2s, border-color .2s;
}
.pst-rail button.on i {
  background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.4);
}
.pst-rail:hover button i, .pst-rail:focus-within button i { transform: none; }

/* Numéro et libellé : révélés avec le menu. */
.pst-rail__n, .pst-rail__lb {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .22s ease, opacity .16s ease;
}
.pst-rail__n { font-size: 10.5px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.pst-rail__lb { font-size: 12.5px; }
.pst-rail:hover .pst-rail__n, .pst-rail:focus-within .pst-rail__n { max-width: 2em; opacity: .6; }
.pst-rail:hover .pst-rail__lb, .pst-rail:focus-within .pst-rail__lb { max-width: 15em; opacity: 1; }
.pst-rail button.on .pst-rail__lb { color: var(--color-accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pst-rail, .pst-rail button i, .pst-rail__n, .pst-rail__lb { transition: none; }
}
@media (max-width: 760px) { .pst-rail { display: none; } }

.pst-slide {
  position: relative;                 /* ancre du lien de pied */
  scroll-snap-align: start; scroll-snap-stop: always;
  min-height: calc(100vh - 210px);
  display: flex; flex-direction: column; justify-content: center;
  /* GRAND ÉCRAN (2026-08-22) : le récit grandit avec la PLACE DISPONIBLE —
     sans devenir fluide pour autant.

     L'unité est le `cqw` (largeur de CE bloc), pas le `vw` : le rail de
     navigation prend 258 px et le gabarit ses marges, si bien qu'un
     coefficient en `vw` visait toujours à côté — première tentative sans
     effet visible (2 vw ≈ 31 px là où le plafond précédent était déjà 29).
     Chaque taille garde un plancher (les valeurs d'avant, pour le portable)
     et un plafond (pour que ça ne parte pas en affiche).

     La ligne `font-size` nue qui précède chaque clamp est le repli des
     navigateurs sans requêtes de conteneur : sans elle, la déclaration
     entière serait ignorée.

     Le RYTHME VERTICAL, lui, se mesure en `vh` — la diapositive est haute
     comme l'écran, c'est donc la fenêtre qui commande. Sans ça, agrandir le
     texte ne servait à rien sur un écran haut : le bloc restait centré avec
     350 px de vide au-dessus et autant en dessous. */
  container-type: inline-size;
  /* Marge DROITE resserrée (2026-08-22) : sur un 13 pouces, elle mangeait
     jusqu'à 130 px que le contenu n'utilisait pas. La marge gauche reste
     large — elle loge le rail de chapitres, qui s'y superpose. */
  /* 13 POUCES (2026-08-23) : le contenu débordait sous le cadre. Le rythme
     vertical se mesure en `vh` et démarre plus bas — un plancher de 38 px en
     haut et 62 px en bas coûtait 100 px que l'écran n'avait pas. Les plafonds
     ne bougent pas : sur un grand écran, le récit respire comme avant. */
  padding: clamp(20px, 2.6vh, 40px) clamp(28px, 3cqw, 64px)
           clamp(22px, 3.4vh, 62px) clamp(54px, 7cqw, 150px);
}
.pst-slide + .pst-slide { border-top: 1px solid var(--color-border-inner); }
.pst-slide--tint { background: var(--color-accent-tint); }
.pst-slide--deep { background: var(--color-accent); }

/* Le numéro vient du COMPOSANT, plus d'un compteur CSS : le récit du coût
   horaire se scinde en deux moitiés qui repartent chacune à 1, ce qu'un
   compteur ne sait pas faire au milieu d'une liste. */
.pst-chap {
  font-size: 10px;
  font-size: clamp(10px, 1.1cqw, 14px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  margin-bottom: clamp(7px, 1.4vh, 30px);
}
.pst-chap b { font-weight: 700; opacity: .6; }
.pst-slide h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 29px;
  /* Échelle resserrée le 2026-08-23 : à 3.6cqw le titre prenait deux lignes
     sur un 13 pouces et poussait le tableau hors de l'écran. */
  font-size: clamp(19px, 2.8cqw, 42px); line-height: 1.14; font-weight: 600;
  font-variation-settings: 'WONK' 0, 'SOFT' 0;
  color: var(--color-navy); max-width: 28ch; margin: 0; text-wrap: balance;
}
.pst-lede {
  margin: 10px 0 0; color: var(--color-text-muted); max-width: 72ch;
  margin-top: clamp(7px, 1.3vh, 26px);
  font-size: 14.5px;
  font-size: clamp(13.5px, 1.32cqw, 18px);
}
/* Un mot souligné dans un chapô atténué : il doit reprendre la couleur pleine,
   sinon le gras seul ne se voit pas sur du texte déjà gris. */
.pst-lede b { color: var(--color-text); font-weight: 600; }
/* Énumération d'un chapô : même voix, une puce discrète. */
.pst-list { padding-left: 1.15em; margin-top: clamp(6px, 1vh, 12px); }
.pst-list li { margin-top: .3em; }
.pst-list li::marker { color: var(--color-accent-soft); }

/* Volet sombre — les surcharges viennent APRÈS les règles générales : à
   spécificité égale, c'est l'ordre qui tranche. Placées avant, elles étaient
   écrasées et le titre restait navy sur ardoise, illisible. */
.pst-slide--deep h2 { color: #fff; }
.pst-slide--deep .pst-chap { color: rgba(255, 255, 255, .82); }
.pst-slide--deep .pst-lede { color: rgba(255, 255, 255, .78); }
.pst-slide--deep .pst-lede b { color: #fff; }
.pst-slide--deep .pst-list li::marker { color: rgba(255, 255, 255, .5); }

.pst-figs {
  display: flex; flex-wrap: wrap;
  gap: 34px; gap: clamp(20px, 2.6cqw, 56px);
  margin-top: 26px; margin-top: clamp(14px, 2.8vh, 70px);
}
.pst-figs--tight { margin-top: 20px; margin-top: clamp(12px, 2.2vh, 48px); gap: 28px; }
/* Charte : « Titres / en-têtes : Fraunces · Contenu : Inter ». Un KPI est du
   CONTENU — il hérite donc de la sans, comme .std-kpi__value du design system.
   Seuls les h2 de chapitre gardent la serif. */
.pst-fig__v {
  font-size: 44px;
  font-size: clamp(24px, 3.4cqw, 56px); font-weight: 700; line-height: 1;
  color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.pst-fig__v small {
  font-size: 14px;
  font-size: clamp(12px, 1.15cqw, 17px); font-weight: 500; color: var(--color-text-muted); margin-left: 4px;
}
.pst-fig__k {
  font-size: 11px;
  font-size: clamp(9.5px, 1cqw, 13px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  /* Interligne resserré : un libellé long tient sur deux lignes (le dernier mot
     passe dessous), et l'espacement par défaut les aurait décollées l'une de
     l'autre au point de les faire lire comme deux libellés. */
  line-height: 1.35;
  color: var(--color-text-muted); margin-top: 5px;
}
/* Une variation de masse salariale n'est ni une bonne ni une mauvaise
   nouvelle : derrière une « économie » il y a des départs, derrière une
   hausse il y a des embauches. Le vert et le terracotta ne s'appliquent pas
   à ces chiffres — la charte prévoit `--color-delta-neutral` pour cela.
   Les deux tons restent disponibles là où une direction est sans ambiguïté. */
.pst-fig--up .pst-fig__v,
.pst-fig--down .pst-fig__v { color: var(--color-navy); }
.pst-slide--deep .pst-fig__v { color: #fff; }
/* Sur volet plein, le gris atténué des LIBELLÉS et des UNITÉS restait tel quel :
   du #78716C sur ardoise ne se lit pas (2026-08-26). Ils passent au blanc
   atténué, comme le chapô — le chiffre garde le blanc pur, la hiérarchie tient. */
.pst-slide--deep .pst-fig__v small,
.pst-slide--deep .pst-fig__k { color: rgba(255, 255, 255, .78); }


/* ══ Récit imprimé — une diapositive = une page A4 paysage ══════════════════

   Décision Olivier (2026-08-23) : TOUT en fond blanc. Les aplats du récit
   (chapitre teinté, chapitre plein) sont un contraste d'ÉCRAN ; sur papier ils
   noircissent la page, et le texte blanc du chapitre plein devient illisible dès
   que l'imprimante rend l'aplat un ton trop clair. La typographie repasse donc
   partout en couleurs de lecture.

   La page fait 297 × 210 mm, marges 12/14/16 → 269 × 182 mm utiles. La
   diapositive occupe cette hauteur et CENTRE son contenu : une page au tiers
   remplie, texte tassé en haut, n'est pas une diapositive mais un fragment.
   Le bloc est centré horizontalement mais le texte reste aligné à gauche — un
   chapô centré se lit mal dès la deuxième ligne.

   Les tailles d'écran sont des `clamp()` en `cqw` / `vh` calés sur la fenêtre :
   sur la page, ils rendaient un corps de note de bas de page. On leur substitue
   une échelle fixe en points, proportionnée à la largeur utile. Deux classes de
   spécificité (`.pst--print .pst-slide`) suffisent à passer devant
   `.ppl-print__section`, quel que soit l'ordre des feuilles dans le paquet. */
.pst--print .pst-slide {
  box-sizing: border-box;
  /* HAUTEUR — surtout pas une valeur en millimètres. `@page` est GLOBAL et non
     scopable : l'application en déclare plusieurs (People 12/14/16, trésorerie
     8 mm, coût horaire 0), et c'est la DERNIÈRE du paquet CSS qui l'emporte —
     donc l'ordre des imports, pas l'écran qui imprime. Une hauteur fixe calée
     sur une marge supposée tombe à côté dès que l'ordre change.
     En média paginé, `vh` se rapporte à la BOÎTE DE PAGE : la diapositive
     remplit ce que la page lui donne, quelle que soit la marge. */
  height: 180mm;                 /* repli : moteur qui ne rapporte pas `vh` à la page */
  height: 100vh;
  min-height: 0;
  /* Le bloc est centré par la MARGE, pas par `align-items` : centrer chaque
     enfant les décalait les uns par rapport aux autres dès qu'ils n'avaient pas
     la même largeur — le chapô rentrait vers la droite, le titre restait à
     gauche. Ici tout démarre au même x. */
  padding: 0 8mm;
  border-top: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* le récit se lit au milieu de la page */
  align-items: stretch;
  break-inside: avoid;
  page-break-inside: avoid;
}
/* Une seule mesure de ligne pour le texte courant ; le reste prend la largeur. */
.pst--print .pst-slide > * { max-width: none; }

/* Plus d'aplat : ni le chapitre teinté, ni le chapitre plein. */
.pst--print .pst-slide--tint,
.pst--print .pst-slide--deep { background: #fff; }

/* Le chapitre plein écrivait en blanc SUR son aplat. Sans aplat, il lui faut
   les couleurs de lecture, sinon il s'imprime blanc sur blanc. */
.pst--print .pst-slide--deep h2,
.pst--print .pst-slide--deep .pst-fig__v { color: var(--color-navy); }
/* …et le PDF, qui repeint ces volets en blanc, doit défaire le blanc atténué :
   sans cette ligne, les libellés disparaîtraient sur la page. */
.pst--print .pst-slide--deep .pst-fig__v small,
.pst--print .pst-slide--deep .pst-fig__k { color: var(--color-text-muted); }
.pst--print .pst-slide--deep .pst-chap { color: var(--color-accent); }
.pst--print .pst-slide--deep .pst-lede,
.pst--print .pst-slide--deep .pst-list li::marker { color: var(--color-text-muted); }
.pst--print .pst-slide--deep .pst-lede b { color: var(--color-text); }

/* Échelle de DIAPOSITIVE — la page est une affiche, pas un paragraphe. Les
   tailles d'écran sont des `clamp()` calés sur la fenêtre ; reprises telles
   quelles sur 269 mm de large, elles remplissaient un tiers de page. */
.pst--print .pst-chap { font-size: 12pt; letter-spacing: .16em; margin-bottom: 9mm; }
.pst--print .pst-slide h2 { font-size: 40pt; line-height: 1.1; margin: 0 0 9mm; }
.pst--print .pst-lede { font-size: 16pt; line-height: 1.5; margin-bottom: 0; max-width: 200mm; }
.pst--print .pst-figs { margin-top: 15mm; gap: 22mm; }
.pst--print .pst-figs--tight { margin-top: 12mm; gap: 18mm; }
.pst--print .pst-fig__v { font-size: 40pt; }
.pst--print .pst-fig__v small { font-size: 16pt; }
.pst--print .pst-fig__k { font-size: 10pt; letter-spacing: .12em; margin-top: 2mm; }
.pst--print .pst-foot { font-size: 11pt; margin-top: 10mm; }

/* Les barres et segments PORTENT la donnée : eux gardent leurs couleurs. */
.pst--print .pst-dept__bar,
.pst--print .pst-split__seg,
.pst--print .pst-cmp__track,
.pst--print .pst-dept__track {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Aperçu à l'écran (avant impression) : la page n'existe pas encore, `vh` y
   vaut la fenêtre. On donne à la diapositive une hauteur de page plausible pour
   que l'aperçu ressemble au résultat. */
@media screen {
  .pst--print .pst-slide { height: 180mm; }
}

/* Chiffres clés — éléments PROPRES à ce récit. Le gabarit (deck, rail, chapô,
   figures) vit dans components/StoryDeck.css, partagé par tous les récits. */
/* Comparaison N-1 / N */
.pst-cmp { margin-top: 26px; margin-top: clamp(26px, 4.5vh, 62px); max-width: 560px; max-width: clamp(560px, 62cqw, 1000px); }
.pst-cmp__row {
  display: grid; grid-template-columns: 56px 1fr 116px; grid-gap: 12px; gap: 12px; align-items: center;
  margin-bottom: 9px; font-size: 12.5px;
}
.pst-cmp__row > span:first-child { color: var(--color-text-muted); font-weight: 600; }
.pst-cmp__track { height: 26px; border-radius: 6px; background: #fff; overflow: hidden; }
.pst-cmp__bar { display: block; height: 100%; border-radius: 6px; }
.pst-cmp__bar--past { background: var(--color-accent-soft); }
.pst-cmp__bar--now { background: var(--color-accent); }
.pst-cmp__v { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-navy); }

/* Le paradoxe : trois cartes, deux sens */
.pst-arrows { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.pst-arw {
  flex: 1 1 200px; background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px;
}
.pst-arw b {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px;
}
.pst-arw__n {
  font-size: 25px; font-weight: 700; line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.pst-arw__n.up { color: var(--color-sage); }
.pst-arw__n.down { color: var(--color-terracotta); }
.pst-arw small { display: block; font-size: 11.5px; color: var(--color-text-muted); margin-top: 5px; }

/* Composition */
.pst-stack { margin-top: 24px; margin-top: clamp(24px, 4.5vh, 60px); max-width: 620px; max-width: clamp(620px, 68cqw, 1120px); }
.pst-stack__bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.pst-stack__seg {
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; white-space: nowrap; background: var(--color-accent);
}
.pst-stack__seg--alt { background: var(--color-accent-soft); color: var(--color-on-tint); }

/* Troisième part de la composition (frais) — nuance intermédiaire d'ardoise. */
.pst-stack__seg--third {
  background: color-mix(in srgb, var(--color-accent) 34%, #fff);
  color: var(--color-on-tint);
}
/* Ligne de pied d'un chapitre (rotation, précisions). */
.pst-foot { margin: 18px 0 0; margin-top: clamp(18px, 3vh, 42px); font-size: 12.5px; font-size: clamp(12.5px, 1.3cqw, 17px); color: var(--color-text-muted); }
.pst-slide--deep .pst-foot { color: rgba(255, 255, 255, .72); }

/* ── Chapitre d'ouverture : trois portes sur volet plein ───────────────────
   Elles vivent sur l'aplat ardoise, donc elles s'éclaircissent par
   transparence plutôt que par une couleur de plus : le blanc translucide
   emprunte le ton du fond et reste dans la charte quel que soit l'aplat.
   Grille égale et pleine largeur : aucune des trois n'est le choix par
   défaut, elles ne doivent donc pas différer de taille. */
.pst-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-top: 26px; margin-top: clamp(16px, 3vh, 56px);
  max-width: 900px; max-width: clamp(900px, 78cqw, 1400px);
}
.pst-door {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; cursor: pointer;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .12);
  font: inherit;
  transition: background .16s ease, border-color .16s ease;
}
.pst-door b {
  font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff;
}
.pst-door small { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.pst-door:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.pst-door:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pst-door { transition: none; } }

/* Passerelle vers « Chiffres clés » : un VRAI bouton, plein, à l'accent de la
   charte (2026-08-26). Le lien texte qu'il remplace se lisait comme une note
   de pied de volet et ne se voyait pas.

   POSÉ EN PIED DE VOLET, en position absolue : un `margin-top: auto` l'aurait
   descendu aussi, mais en absorbant l'espace libre du conteneur centré, ce qui
   aurait décollé tout le chapitre vers le haut, seul de la série.

   Il reprend le padding du volet (mêmes clamps) : en retrait fixe, il
   décrochait du texte dès que la diapositive respirait. */
.pst-cta {
  position: absolute;
  left: clamp(54px, 7cqw, 150px); bottom: clamp(22px, 3.4vh, 62px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--color-accent); border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: #fff;
  transition: background .16s ease;
}
.pst-cta svg { width: 15px; height: 15px; transition: transform .16s ease; }
.pst-cta:hover { background: color-mix(in srgb, var(--color-accent) 86%, #000); }
.pst-cta:hover svg { transform: translateX(3px); }
.pst-cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pst-cta, .pst-cta svg { transition: none; } }

/* ── Ce qui a changé : arrivées et départs, nommés ─────────────────────── */
.pst-moves { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 26px; gap: 26px; margin-top: 22px; margin-top: clamp(22px, 4.5vh, 60px); max-width: 620px; max-width: clamp(620px, 68cqw, 1120px); }
@media (max-width: 700px) { .pst-moves { grid-template-columns: 1fr; gap: 16px; } }
.pst-moves__col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pst-moves__h {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 3px;
}
/* Une arrivée n'est pas « favorable » et un départ n'est pas « défavorable » :
   les deux colonnes se distinguent par leur libellé, pas par une couleur qui
   porterait un jugement. */
.pst-moves__h--in,
.pst-moves__h--out { color: var(--color-text-muted); }
.pst-moves__row {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px;
  border-bottom: 1px solid var(--color-border-inner); padding-bottom: 4px;
}
.pst-moves__name { color: var(--color-text); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst-moves__when { color: var(--color-text-muted); font-size: 11.5px; flex: 0 0 auto; }
.pst-moves__none { font-size: 13px; color: var(--color-text-muted); }

/* ── Atterrissage : UNE barre, deux parts d'un même tout ───────────────── */
.pst-split { margin-top: 24px; margin-top: clamp(24px, 4.5vh, 60px); max-width: 620px; max-width: clamp(620px, 68cqw, 1120px); }
.pst-split__bar { display: flex; height: 32px; border-radius: 8px; overflow: hidden; }
.pst-split__seg {
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--color-accent); white-space: nowrap;
}
.pst-split__seg--rest { background: var(--color-accent-soft); color: var(--color-on-tint); }
.pst-split__legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px;
  font-size: 12px; color: var(--color-text-muted);
}
.pst-split__legend span { display: flex; align-items: center; gap: 6px; }
.pst-split__legend i {
  width: 10px; height: 10px; border-radius: 3px; background: var(--color-accent); flex: 0 0 auto;
}
.pst-split__legend i.rest { background: var(--color-accent-soft); }

/* ── Mouvements prévus ─────────────────────────────────────────────────── */
.pst-plan { margin-top: 22px; max-width: 660px; display: flex; flex-direction: column; gap: 4px; }
.pst-plan__h {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 3px;
}
.pst-plan__row {
  display: grid; grid-template-columns: 22px 1fr auto auto; grid-gap: 11px; gap: 11px; align-items: center;
  font-size: 13px; border-bottom: 1px solid var(--color-border-inner); padding: 5px 0;
}
/* La pastille porte le NOMBRE de mouvements de la cause : le regroupement ne
   sert à rien s'il faut recompter les lignes. */
.pst-plan__tag {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.pst-plan__tag--in  { background: color-mix(in srgb, var(--color-sage) 13%, #fff); color: var(--color-sage); }
.pst-plan__tag--out { background: color-mix(in srgb, var(--color-terracotta) 13%, #fff); color: var(--color-terracotta); }
.pst-plan__tag--chg { background: var(--color-accent-tint-strong); color: var(--color-accent); }
.pst-plan__lbl { color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst-plan__when { color: var(--color-text-muted); font-size: 11.5px; }
.pst-plan__amt { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-navy); }

/* Le cadre reçoit le focus clavier : un anneau discret le dit, sans encadrer
   la lecture au repos. */
.pst-deck:focus { outline: none; }
.pst-deck:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Rappel du geste clavier, sous le cadre — discret, jamais dans le récit. */
.pst-hint {
  margin: 0 0 7px; text-align: left;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--color-text-muted);
}

/* La formule descend nettement sous les indicateurs : elle JUSTIFIE le taux,
   elle ne se lit pas dans la foulée. Un simple écart généreux plutôt qu'un
   `margin-top: auto` — celui-ci pousserait la note au bas du volet mais
   décollerait tout le reste vers le haut, cassant le centrage des chapitres. */
.pst-foot--formula {
  margin-top: 46px;
  font-size: 11.5px;
}

/* ── Répartition par département ───────────────────────────────────────── */
.pst-dept { margin-top: 22px; max-width: 640px; display: flex; flex-direction: column; gap: 6px; }
.pst-dept__row {
  display: grid; grid-template-columns: 168px 1fr 78px 44px; grid-gap: 12px; gap: 12px; align-items: center;
  font-size: 12.5px;
}
.pst-dept__lb {
  color: var(--color-text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pst-dept__track { height: 18px; border-radius: 5px; background: #fff; overflow: hidden; }
.pst-dept__bar { display: block; height: 100%; border-radius: 5px; background: var(--color-accent); }
.pst-dept__v {
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-navy);
}
.pst-dept__p { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
@media (max-width: 700px) {
  .pst-dept__row { grid-template-columns: 120px 1fr 66px; }
  .pst-dept__p { display: none; }
}

/* Barre de filtre standard des tables de personnes (toggle + recherche). */

/* La barre se cale à GAUCHE de l'en-tête (contre le titre) ; les autres
   actions (boutons) restent à droite grâce à la marge auto. */
.pfb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-right: auto;
}
/* Les zones d'actions (alignées à droite par défaut) s'étirent quand elles
   contiennent la barre, pour que la marge auto la pousse à gauche. */
.std-card__head:has(.pfb) .std-card__actions,
.hr-charges-card__band--split:has(.pfb) .hr-evol__tools,
.pp-toolbar:has(.pfb) .pp-toolbar__right,
.page-header:has(.pfb) .page-header__actions {
  flex: 1 1 auto;
}

.pfb-toggle {
  display: inline-flex;
  background: var(--stone-100);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.pfb-toggle__btn {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  cursor: pointer;
  font-weight: 500;
}
.pfb-toggle__btn:hover { color: var(--color-text); }
/* État sélectionné : ardoise, l'accent du chrome. Il se lisait en terracotta
   quel que soit le bouton, donc « Tous » alertait autant qu'« Actifs » et
   l'alerte ne voulait plus rien dire. */
.pfb-toggle__btn.is-active {
  color: var(--color-accent);
  font-weight: 700;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* « Actifs » sélectionné = liste tronquée. Terracotta (alerte de la charte)
   et cerne assorti : un total d'heures sous une liste filtrée ne doit jamais
   passer pour un total d'entreprise. */
.pfb-toggle__btn.is-filtering.is-active {
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 9%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-terracotta) 42%, transparent),
              0 1px 2px rgba(0, 0, 0, .06);
}

.pfb-search {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
  min-width: 200px;
}
.pfb-select {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}

.pfb-search::placeholder {
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PeoplePrint — stylesheet partagé pour l'impression People reports.
   Approche : CSS Paged Media natif (Chrome/Edge/Safari modernes).
   Le navigateur pagine automatiquement les <table> longs grâce à
   thead { display: table-header-group } + break-inside: avoid sur <tr>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper : préview écran ─────────────────────────────────────────────── */
.ppl-print {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #1A1A1A;
  background: #FFFFFF;
  font-size: 10pt;
  line-height: 1.4;
}

.ppl-print__section {
  padding: 6mm 4mm 8mm;
  /* Saut de page entre rapports (et avant le 1er rapport, après la cover) */
  break-before: page;
  page-break-before: always;
}
.ppl-print__section:first-of-type {
  break-before: auto;
  page-break-before: auto;
}
/* Aperçu écran : matérialiser la séparation de page entre rapports/onglets. */
.ppl-print__section + .ppl-print__section {
  margin-top: 10mm;
  border-top: 1px dashed #d9d2c6;
}

/* ── Page de garde (1ère page, seule) ───────────────────────────────────── */
.ppl-print__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150mm;            /* < hauteur imprimable A4 paysage → ne déborde jamais sur une 2e page */
  text-align: center;
  overflow: hidden;
  /* Pas de break-after : le 1er rapport a déjà break-before: page (sinon
     double saut → page blanche). Et la cover reste insécable sur sa page. */
  break-inside: avoid;
  page-break-inside: avoid;
}
/* Pas de bordure pointillée écran sous la cover (c'est une page à part). */
.ppl-print__cover + .ppl-print__section {
  margin-top: 0;
  border-top: none;
}
.ppl-cover__inner { max-width: 220mm; }
.ppl-cover__brand {
  font-size: 11pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A7CA8;
  font-weight: 700;
  margin-bottom: 8mm;
}
.ppl-cover__title {
  font-size: 30pt;
  font-weight: 700;
  color: #2B203E;
  margin: 0 0 2mm;
  letter-spacing: -0.01em;
}
.ppl-cover__sub {
  font-size: 14pt;
  color: #5b5168;
  margin-bottom: 1mm;
}
.ppl-cover__date {
  font-size: 9.5pt;
  color: #9a8c78;
  margin-bottom: 12mm;
}
.ppl-cover__list-title {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a8c78;
  border-top: 1pt solid #2B203E;
  border-bottom: 1pt solid #d9d2c6;
  padding: 2.5mm 0;
  margin-bottom: 4mm;
  font-weight: 700;
}
.ppl-cover__list { list-style: none; margin: 0; padding: 0; }
/* Marque : péristyle + wordmark côte à côte, en tête de la page de garde. */
.ppl-cover__brandblock {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 2mm; color: #8A7CA8;
}
.ppl-cover__brandblock .ppl-cover__brand { margin-bottom: 0; }
.ppl-cover__logo { display: block; }
/* Sommaire : une partie du document par ligne. */
.ppl-cover__toc { margin-top: 2mm; }
.ppl-cover__toc-item {
  display: block; text-align: center;
  font-size: 11.5pt; color: #4a4456; padding: 1.2mm 0;
}
/* Éditeur, juste sous la marque ; le nom du client descend nettement dessous. */
.ppl-cover__publisher {
  margin-bottom: 22mm; font-size: 9pt; color: #9a8c78; letter-spacing: 0.04em;
}
.ppl-cover__publisher strong { color: #4a4456; font-weight: 600; }
.ppl-cover__cat-group {
  display: flex;
  gap: 4mm;
  justify-content: center;
  align-items: baseline;
  padding: 1.6mm 0;
  font-size: 10.5pt;
}
.ppl-cover__cat {
  min-width: 30mm;
  text-align: right;
  font-weight: 700;
  color: #2B203E;
  text-transform: uppercase;
  font-size: 8.5pt;
  letter-spacing: 0.04em;
}
.ppl-cover__cat-reports { text-align: left; color: #4a4456; }

/* ── En-tête de rapport (répété visuellement en tête de section) ─────────── */
.ppl-print__report-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1pt solid #2B203E;
  padding-bottom: 3mm;
  margin-bottom: 5mm;
}
.ppl-print__report-title {
  font-size: 16pt;
  font-weight: 700;
  color: #2B203E;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Unité (kCHF/CHF) en corps réduit à côté du titre. */
.ppl-print__report-unit { font-size: 10pt; font-weight: 500; color: #78716C; }
.ppl-print__report-eyebrow {
  font-size: 9pt;
  font-weight: 500;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2mm;
}
.ppl-print__report-meta {
  text-align: right;
  font-size: 9pt;
  color: #555;
  line-height: 1.5;
}
.ppl-print__report-meta strong {
  color: #1A1A1A;
}

/* ── KPI strip compact pour impression ───────────────────────────────────── */
.ppl-print__kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 4mm;
  gap: 4mm;
  margin-bottom: 6mm;
}
.ppl-print__kpi {
  border-left: 2pt solid #CCC;
  padding-left: 3mm;
}
.ppl-print__kpi--primary { border-left-color: #2B203E; }
.ppl-print__kpi--sage    { border-left-color: #639922; }
.ppl-print__kpi--terra   { border-left-color: #C25450; }
.ppl-print__kpi-label {
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #777;
  margin-bottom: 1mm;
}
.ppl-print__kpi-value {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 12pt;
  font-weight: 600;
  color: #1A1A1A;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ppl-print__kpi-hint {
  font-size: 7.5pt;
  color: #999;
  margin-top: 0.5mm;
}

/* ── Tables d'impression ─────────────────────────────────────────────────── */
.ppl-print__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Mode largeur stricte : utilisé pour les tables denses (year-end, synthesis)
   où on doit absolument tenir dans la largeur A4 paysage. Combiné avec un
   <colgroup> explicite côté JSX. */
.ppl-print__table--fixed {
  table-layout: fixed;
}
.ppl-print__table--fixed td,
.ppl-print__table--fixed th {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
/* Chiffres alignés à droite par défaut (les colonnes texte gardent leur
   style inline text-align:left, qui l'emporte). */
.ppl-print__table--rnum td,
.ppl-print__table--rnum th {
  text-align: right;
}

/* Variante densité plus serrée pour la grille year-end (18 colonnes en A4 paysage). */
.ppl-print__table--dense {
  font-size: 7.5pt;
}
.ppl-print__table--dense thead th,
.ppl-print__table--dense tbody td,
.ppl-print__table--dense tfoot td {
  padding: 1.2mm 1.4mm;
}
/* Pas de coupure forcée sur dates / nombres / pourcentages */
.ppl-print__table td.nowrap,
.ppl-print__table th.nowrap {
  white-space: nowrap;
}
.ppl-print__table caption {
  text-align: left;
  font-size: 9pt;
  font-weight: 500;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 2mm;
  caption-side: top;
}
.ppl-print__table thead th {
  background: #2B203E;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 8pt;
  text-align: left;
  padding: 1.3mm 2.5mm;
  letter-spacing: 0.02em;
  border-bottom: 0.5pt solid #2B203E;
  line-height: 1.2;
}
.ppl-print__table thead th.num {
  text-align: right;
}
.ppl-print__table tbody td {
  padding: 1mm 2.5mm;
  border-bottom: 0.5pt solid #E5E5E5;
  vertical-align: middle;
  line-height: 1.2;
}
.ppl-print__table tbody td.num {
  text-align: right;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 8pt;
}
.ppl-print__table tbody tr.zebra td {
  background: #FAFAFA;
}
.ppl-print__table tfoot td {
  background: #F0EDF8;
  font-weight: 700;
  padding: 1.4mm 2.5mm;
  border-top: 1pt solid #2B203E;
  border-bottom: none;
  font-size: 9pt;
}
.ppl-print__table tfoot td.num {
  text-align: right;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  color: #2B203E;
}

/* Cellules de la grille year-end (active / before / after / none) */
.ppl-print__cell--active { background: #E5EFD5; color: #3F6614; text-align: center; font-family: 'JetBrains Mono', monospace; }
.ppl-print__cell--before,
.ppl-print__cell--after  { background: #FBE4E4; color: #9A2D2A; text-align: center; font-family: 'JetBrains Mono', monospace; }
.ppl-print__cell--none   { background: #EEEEEE; color: #999;    text-align: center; }

/* Colonnes mises en évidence (ex. Production costing : Billable hours / Capacity cost / BCR) */
.ppl-print__table thead th.ppl-print__col-hl { background: #BA5D4A; }
.ppl-print__table tbody td.ppl-print__col-hl { background: #FBEBE4; }
.ppl-print__table tbody tr.zebra td.ppl-print__col-hl { background: #F6DECF; }
.ppl-print__table tfoot td.ppl-print__col-hl { background: #F2D6C6; color: #8A3D2C; }

/* Badge département */
.ppl-print__badge {
  display: inline-block;
  font-size: 7.5pt;
  font-weight: 500;
  background: #F0EDF8;
  color: #2B203E;
  border-radius: 2pt;
  padding: 0.5mm 1.8mm;
  letter-spacing: 0.02em;
}

/* ── Cover People (PeopleReportCover — section SANS .ppl-print__section) ────
   ⚠️ Scopée :not(.ppl-print__section) : la page de garde de PrintReportDocument
   porte LES DEUX classes et héritait de ce min-height 190mm + break-after
   → page blanche systématique après la garde (bug PDF du 2026-08-19). */
.ppl-print__cover:not(.ppl-print__section) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190mm; /* hauteur utile A4 paysage moins marges */
  padding: 10mm 6mm;
  break-after: page;
  page-break-after: always;
}
.ppl-print__cover-eyebrow {
  font-size: 10pt;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.ppl-print__cover-tenant {
  font-size: 36pt;
  font-weight: 700;
  color: #2B203E;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 4mm 0 1mm;
}
.ppl-print__cover-doc {
  font-size: 22pt;
  font-weight: 400;
  color: #555;
  letter-spacing: -0.01em;
}
.ppl-print__cover-period {
  margin-top: 12mm;
  font-size: 14pt;
  color: #1A1A1A;
}
.ppl-print__cover-period strong {
  font-weight: 600;
  color: #2B203E;
}
.ppl-print__cover-stats {
  display: flex;
  gap: 14mm;
  margin-top: 10mm;
}
.ppl-print__cover-stat-label {
  font-size: 8.5pt;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ppl-print__cover-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24pt;
  font-weight: 600;
  color: #2B203E;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ppl-print__cover-toc {
  margin-top: auto;
  padding-top: 14mm;
  border-top: 0.5pt solid #DDD;
}
.ppl-print__cover-toc-title {
  font-size: 9pt;
  font-weight: 500;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4mm;
}
.ppl-print__cover-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6mm;
  gap: 6mm;
}
.ppl-print__cover-toc-item {
  border-left: 2pt solid #2B203E;
  padding-left: 4mm;
}
.ppl-print__cover-toc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9pt;
  color: #639922;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ppl-print__cover-toc-label {
  font-size: 13pt;
  font-weight: 600;
  color: #2B203E;
  margin-top: 1mm;
}
.ppl-print__cover-toc-desc {
  font-size: 8.5pt;
  color: #777;
  margin-top: 1mm;
  line-height: 1.4;
}
.ppl-print__cover-edited {
  text-align: right;
  font-size: 9pt;
  color: #999;
  margin-top: 8mm;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Aperçu écran (avant impression) — simule des feuilles A4 paysage.
   ═══════════════════════════════════════════════════════════════════════════ */
.ppl-print__preview {
  background: #DCDCDC;
  padding: 24px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ppl-print__preview .ppl-print {
  width: 297mm;
  background: #FFFFFF;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  padding: 12mm 14mm;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   @media print — règles déterminantes pour la pagination native
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* @page minimal : size + margin uniquement. Les boîtes @bottom-left/right
     (CSS Paged Media) ne sont supportées ni par Chrome ni par Safari, et sous
     Safari elles invalidaient tout le bloc → retour au portrait. Retirées. */
  @page {
    /* Dimensions explicites (297×210) : Safari ignore souvent le mot-clé
       « A4 landscape » mais respecte mieux des dimensions paysage explicites. */
    size: 297mm 210mm;
    margin: 12mm 14mm 16mm;
  }
  /* Pied de page — les marge-boxes @page (@bottom-*) ne sont rendues ni par
     Chrome ni par Safari (constat du projet) → retirées. À la place :
     · GAUCHE : élément FIXE (répété par le moteur d'impression sur chaque
       page), contenu = var(--ppl-footer-left) posée par chaque overlay
       (tenant · Imprimé le jj.mm.aaaa).
     · DROITE : numéro de page par COMPTEUR DE SECTIONS (1 section = 1 page
       dans le gabarit standard), rendu en ::after ancré au bas de la section. */
  .ppl-print::after {
    content: "";
    content: var(--ppl-footer-left, "");
    position: fixed; bottom: 0; left: 0;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 7pt; color: #9a8c78; letter-spacing: 0.06em;
  }
  .ppl-print { counter-reset: pplpage; }
  .ppl-print__section { counter-increment: pplpage; }
  /* Numéro EN HAUT À DROITE (au-dessus du nom du tenant) : ancré dans
     l'en-tête, il ne peut jamais déborder sur une page vide. */
  .ppl-print__section--wide .ppl-print__report-meta::before {
    content: "p. " counter(pplpage);
    display: block; text-align: right;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 7pt; color: #9a8c78; margin-bottom: 1mm;
  }
  .ppl-print__section--wide { overflow: visible; }
  /* (Cover retirée — plus de page de garde : le footer s'affiche dès la 1ère page.) */

  /* Forcer le rendu couleur (Chrome ne l'applique pas par défaut) */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Une page par rapport / onglet : chaque section démarre une nouvelle page
     (sauf la première). Dupliqué ici pour fiabilité cross-navigateur. */
  .ppl-print__section {
    break-before: page;
    page-break-before: always;
  }
  .ppl-print__section:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }
  /* Le séparateur d'aperçu n'a pas lieu d'être à l'impression (saut de page). */
  .ppl-print__section + .ppl-print__section {
    margin-top: 0;
    border-top: none;
  }

  /* Le wrapper preview disparait, le contenu hérite directement du flux d'impression */
  .ppl-print__preview {
    background: transparent;
    padding: 0;
    display: block;
  }
  .ppl-print__preview .ppl-print {
    width: auto;
    box-shadow: none;
    padding: 0;
  }

  /* Pagination native des tableaux longs */
  .ppl-print__table {
    page-break-inside: auto;
    break-inside: auto;
  }
  .ppl-print__table thead {
    display: table-header-group; /* en-tête répété sur chaque page */
  }
  .ppl-print__table tfoot {
    display: table-footer-group; /* total repoussé en pied du tableau */
  }
  /* Tables multi-pages où le total ne doit PAS se répéter en bas de chaque
     page : on traite le tfoot comme un groupe de lignes normal → il n'apparaît
     qu'une seule fois, à la fin (donc sur la dernière page uniquement). */
  .ppl-print__table--total-once tfoot {
    display: table-row-group;
  }
  .ppl-print__table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Chaque rapport/onglet tente de tenir sur une seule page : s'il rentre, il
     n'est pas coupé (il bascule entier sur la page suivante au besoin). Un
     tableau réellement plus long qu'une page reste paginé (le navigateur
     ignore l'« avoid » quand c'est impossible). */
  .ppl-print__section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Anti-orphelines : une coupure ne peut pas isoler moins de 5 lignes sur la
     page suivante — on garde les 4 dernières lignes solidaires du corps. */
  .ppl-print__table tbody tr:nth-last-child(-n+4) {
    page-break-before: avoid;
    break-before: avoid;
  }

  /* Garder le titre de section avec au moins 2-3 lignes du tableau */
  .ppl-print__report-header,
  .ppl-print__kpis {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Bouton bar et autres décor d'aperçu : invisibles */
  .ppl-print-controls { display: none !important; }

  /* Évolution : comprimer pour tenir sur 1 page (A4 paysage). */
  .ppl-print__section--evolution .hr-chart__bars { min-height: 72px !important; gap: 2px !important; }
  .ppl-print__section--evolution .hr-chart__bar-wrap { height: 60px !important; }
  .ppl-print__section--evolution .hr-chart { padding: 6px 8px !important; }
  .ppl-print__section--evolution .hr-chart__legend { margin-top: 4px !important; }
  .ppl-print__section--evolution .hr-hero { margin-bottom: 6px !important; }
  .ppl-print__section--evolution .ppl-print__report-header { margin-bottom: 6px !important; }
}

/* Onglet d'écran réutilisé tel quel dans une page d'impression (ex. cockpit
   Synthèse). On neutralise les marges/paddings de page pour qu'il s'insère dans
   le gabarit A4, sans retoucher le composant écran. */
.ppl-print__screen-embed { width: 100%; }
.ppl-print__screen-embed .hr-page,
.ppl-print__screen-embed .hr-overview { padding: 0 !important; margin: 0 !important; }
.ppl-print__screen-embed .hr-ov-stack { gap: 8px !important; }

/* Effectif mensuel : la grille par personne, telle qu'à l'écran. On enlève ce
   qui n'a pas de sens sur papier, la barre de filtres et les indicateurs de
   tri, plutôt que d'entretenir une seconde table qui divergerait de la
   première dès la colonne suivante. Douze mois par personne : le pas de
   caractère se resserre pour tenir dans la largeur. */
.ppl-print__section--headcount .hr-evol__tools,
.ppl-print__section--headcount .hr-evol__sort-ind,
.ppl-print__section--headcount .hr-person-sort { display: none !important; }
.ppl-print__section--headcount .hr-page,
.ppl-print__section--headcount .hr-overview { padding: 0 !important; margin: 0 !important; }
.ppl-print__section--headcount .hr-charges-card { box-shadow: none !important; }
.ppl-print__section--headcount .hr-evol__table { font-size: 7.5px !important; }
.ppl-print__section--headcount .hr-evol__table th,
.ppl-print__section--headcount .hr-evol__table td { padding: 2px 3px !important; }
.ppl-print__section--headcount .hr-evol__table-wrap { overflow: visible !important; }
.ppl-print__section--headcount .hr-evol__sort-th { cursor: default !important; }

/* Cockpit Synthèse : tenir sur 1 page A4 paysage sans casser le graphe.
   `zoom` réduit aussi la boîte de pagination (Chrome). Ajuster si débordement. */
.ppl-print__section--cockpit .ppl-print__screen-embed { zoom: 0.84; }
.ppl-print__section--cockpit .hr-charges-card { box-shadow: none !important; }
.ppl-print__section--cockpit .hr-charges-card__body { padding: 7px 9px !important; }

/* Graphe : hauteur FIXE (spécificité > .hr-ov-row …) sinon les barres % de auto = 0. */
.ppl-print__section--cockpit .hr-ov-row .hr-chart__bars { flex: none !important; min-height: 0 !important; }
.ppl-print__section--cockpit .hr-ov-row .hr-chart__bar-wrap { flex: none !important; height: 64px !important; min-height: 64px !important; }
.ppl-print__section--cockpit .hr-chart__bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Tuiles KPI : compresser (hauteur/police) pour libérer de la place. */
.ppl-print__section--cockpit .hr-kpi { padding: 5px 8px !important; }
.ppl-print__section--cockpit .hr-kpi__value { font-size: 14px !important; line-height: 1.15 !important; }
.ppl-print__section--cockpit .hr-kpi__label { font-size: 8px !important; }
.ppl-print__section--cockpit .hr-kpi__hint { font-size: 7.5px !important; }
.ppl-print__section--cockpit .hr-synth__grid,
.ppl-print__section--cockpit .hr-cockpit-grid { gap: 6px !important; }
.ppl-print__section--cockpit .hr-cockpit-hero__big,
.ppl-print__section--cockpit .hr-cockpit-hero__land { font-size: 20px !important; }
.ppl-print__section--cockpit .hr-cockpit-proj { margin-top: 6px !important; }

/* Graphe « variation des salaires bruts » de la page Planification (page 1).
   Hauteur fixe (sinon barres % d'une hauteur indéfinie = 0) + couleurs imprimées. */
.ppl-print__planning-chart { margin: 8px 0 2px; }
.ppl-print__planning-chart .hr-chart__bars { padding-top: 6px; }
.ppl-print__planning-chart .hr-chart__bar-wrap { height: 86px !important; }
.ppl-print__planning-chart .hr-chart__bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Note de bas de section (préambule/explication courte) */
.ppl-print__note {
  margin-top: 6px;
  font-size: 9px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-style: italic;
}

/* ── Capacity Analysis Page — Phase 14 ──────────────────────────────────── */

.ca2-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Embarqué dans le hub People : pas de padding page (les cards s'alignent à gauche
   sur le titre/onglets, comme les autres pages People type LCR).
   Sélecteur combiné pour battre .page-table-layout (padding 40px 32px). */
.page-table-layout.ca2-layout--embedded {
  padding: 0;
}

/* ── Mode toggle (Standard / Progress) ───────────────────────────────────── */

.ca2-mode-toggle {
  display: inline-flex;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
}

.ca2-mode-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.ca2-mode-btn--active {
  background: #2B203E;
  color: #fff;
}

.ca2-mode-btn:not(.ca2-mode-btn--active):hover {
  background: #F3F4F6;
}

/* ET mode button color */
.ca2-mode-btn--et.ca2-mode-btn--active {
  background: #5B21B6;
  color: #fff;
}

/* ET mode year selector */
.ca2-et-year-select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--color-text);
  cursor: pointer;
}

/* ET mode badge */
.ca2-et-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #EDE9FE;
  color: #5B21B6;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ── KPI cards ────────────────────────────────────────────────────────────── */

.ca2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.ca2-kpi-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ca2-kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}

.ca2-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.ca2-kpi-value--warn { color: #A32D2D; }
.ca2-kpi-value--amber { color: #BA7517; }
.ca2-kpi-value--green { color: #3B6D11; }

.ca2-kpi-sub {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ── Section title ────────────────────────────────────────────────────────── */

.ca2-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #374151;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #E5E7EB;
}

/* ── Formula bar ─────────────────────────────────────────────────────────── */

.ca2-formula-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #F8F7FF;
  border: 1px solid #E0DBFF;
  border-radius: 7px;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 0 24px;
}

.ca2-formula-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  padding: 3px 0;
}

.ca2-formula-name {
  font-size: 13px;
  font-weight: 700;
  color: #A32D2D;
  letter-spacing: 0.2px;
  min-width: 32px;
}

.ca2-formula-sep {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.ca2-formula-expr {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 500;
}

.ca2-formula-div {
  font-size: 13px;
  color: #6B7280;
  margin: 0 2px;
}

.ca2-formula-note {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

.ca2-formula-divider {
  width: 1px;
  height: 20px;
  background: #DDD6FE;
  flex-shrink: 0;
}

/* ── Metrics table ────────────────────────────────────────────────────────── */

.ca2-table-wrap {
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.ca2-table {
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: nowrap;
  width: 100%;
}

.ca2-table thead th {
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  padding: 5px 10px;
  font-weight: 600;
  color: #374151;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  /* En-têtes sur 2 lignes : on autorise le retour à la ligne (la table est en
     nowrap) et on contraint la largeur pour éviter la barre de scroll. */
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.25;
  max-width: 80px;
}

/* Person / Cost pool : libellés courts, pas de contrainte de largeur. */
.ca2-table thead th.th-left { max-width: none; }

.ca2-table thead th.th-left  { text-align: left; }
.ca2-table thead th.th-right { text-align: right; }
.ca2-table thead th.th-center { text-align: center; }

.ca2-table tbody tr {
  height: 32px;
  border-bottom: 1px solid #F3F4F6;
}

.ca2-table tbody tr:last-child {
  border-bottom: none;
}

.ca2-table tbody tr:hover td {
  background: #F9FAFB;
}

.ca2-td-pool {
  padding: 4px 10px;
  font-weight: 500;
  color: var(--color-text);
  min-width: 120px;
}

.ca2-td-num {
  text-align: right;
  padding: 4px 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.ca2-td-muted {
  color: var(--color-text-muted);
}

/* Hour columns — subtle accent tint */
.ca2-td-h {
  color: var(--color-accent);
}

/* Utilization cell */
.ca2-td-util {
  padding: 4px 10px;
  min-width: 130px;
}

.ca2-util-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ca2-util-bar-track {
  flex: 1 1;
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
}

.ca2-util-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ca2-util-bar--green { background: #639922; }
.ca2-util-bar--amber { background: #BA7517; }
.ca2-util-bar--red   { background: #A32D2D; }

.ca2-util-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 38px;
  text-align: right;
}

.ca2-util-label--green { color: #3B6D11; }
.ca2-util-label--amber { color: #BA7517; }
.ca2-util-label--red   { color: #A32D2D; }

/* CCR / CHR columns */
.ca2-td-ccr {
  font-weight: 700;
  color: #A32D2D;
  border-left: 1px solid #E5E7EB;
}

.ca2-td-chr {
  font-style: italic;
  color: #A32D2D;
}

/* Idle cost */
.ca2-td-idle-high { color: #A32D2D; font-weight: 600; }
.ca2-td-idle-low  { color: var(--color-text-muted); }
.ca2-td-terra     { color: var(--color-terracotta); font-weight: 600; }

/* ── Chart section ────────────────────────────────────────────────────────── */

.ca2-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ca2-unit-toggle {
  display: inline-flex;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
}

.ca2-unit-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ca2-unit-btn--active {
  background: #374151;
  color: #fff;
}

.ca2-unit-btn:not(.ca2-unit-btn--active):hover {
  background: #F3F4F6;
}

/* Chart legend */
.ca2-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ca2-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.ca2-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ca2-chart-wrap {
  position: relative;
}

/* ── Bloc financier (Rev. → Prod. cost → Net margin → Idle cost → Profit/Loss) ── */

/* Début du bloc : séparateur vertical sur la colonne Rev. (cellule + en-tête). */
.ca2-td-fin,
.ca2-table thead th.ca2-th-fin {
  border-left: 2px solid #E5E7EB;
}
.ca2-td-fin { min-width: 90px; color: #374151; font-weight: 500; }
/* Profit / Loss : colonne finale, en gras. */
.ca2-td-pl { font-weight: 700; }

/* ── P&L table (capacity costing @ CCR) ──────────────────────────────────────── */

.ca2-pnl { width: 100%; }
.ca2-pnl thead th { background: #F9FAFB; }

.ca2-pnl-label {
  text-align: left;
  padding: 5px 12px;
  color: var(--color-text);
  white-space: nowrap;
  font-weight: 500;
}
.ca2-pnl-hint {
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
}
/* Colonne Total : encadrée pour la détacher des pools. */
.ca2-pnl-total {
  border-left: 1px solid #E5E7EB;
  border-right: 2px solid #E5E7EB;
  font-weight: 600;
}
/* % sur une 2e ligne, discret. */
.ca2-pnl-pct {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.1;
}
/* Revenu : ligne forte. */
.ca2-pnl-row-rev td { font-weight: 700; border-bottom: 1px solid #E5E7EB; }
/* Déductions : indentées, atténuées. */
.ca2-pnl-row-tier .ca2-pnl-label { padding-left: 26px; color: var(--color-text-muted); }
.ca2-pnl-row-tier td { color: var(--color-text-muted); }
/* Net margin : marge intermédiaire. */
.ca2-pnl-row-margin td {
  font-weight: 700;
  border-top: 1px solid #E5E7EB;
  background: #FAFAFA;
}
/* Operating profit : ligne finale, accent violet (cohérent footer). */
.ca2-pnl-row-op td {
  font-weight: 700;
  font-size: 13px;
  border-top: 2px solid #C4B5FD;
  background: #F5F3FF;
}
.ca2-pnl-pos { color: #3B6D11; }
.ca2-pnl-neg { color: #A32D2D; }
.ca2-pnl-empty {
  margin: 0 0 12px;
  font-size: 12px;
  color: #B45309;
}

/* ── Footer row (total) ──────────────────────────────────────────────────────── */

.ca2-tr-footer td {
  background: #F5F3FF !important;
  border-top: 2px solid #C4B5FD;
  font-weight: 600;
  color: #374151;
}

.ca2-td-footer-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
}

.ca2-footer-count {
  font-weight: 400;
  color: #9CA3AF;
}

.ca2-td-footer-muted {
  text-align: right;
  color: #D1D5DB;
  font-weight: 400;
}

/* ── Cards (chart / metrics per pool / per person) — style capacity costing ── */
.ca2-card {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.ca2-card-title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-navy);
}
/* Titre de table directe en bandeau bleu (pas la card chart, gérée via chart-header). */
.ca2-card > .ca2-card-title {
  margin: -18px -20px 14px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
}
/* En-tête du chart dans la card : bandeau bleu, titre à gauche, légende + toggle à droite */
.ca2-card .ca2-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -18px -20px 14px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
}
.ca2-card .ca2-chart-header .ca2-card-title { margin-bottom: 0; }
/* La table dans une card : pas de marge/bordure externe superflue */
.ca2-card .ca2-table-wrap { margin: 0; }

/* ── Filtre par pool (table « Metrics per person ») ───────────────────────── */
.ca2-pool-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ca2-pool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  color: var(--color-text-muted, #6B7280);
  background: #fff;
  background: var(--color-bg, #fff);
  border: 0.5px solid #E5E7EB;
  border: 0.5px solid var(--color-border, #E5E7EB);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ca2-pool-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ca2-pool-btn--active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.ca2-pool-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ca2-pool-btn--active .ca2-pool-count { background: rgba(255, 255, 255, 0.22); }

/* ── Synthèse une-ligne (style Labour cost / Production costing) ───────────── */
.ca2-synth {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.ca2-synth__head {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-navy);
  /* Bandeau bleu standard (charte var(--color-surface-card)), bleed jusqu'aux bords (card padding 14/18). */
  margin: -14px -18px 12px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
}
/* Synthèse en 2 colonnes : tuiles à gauche · barres (pont + flottaison) à droite. */
.ca2-synth__split { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; }
.ca2-synth__tiles { flex: 1 1 56%; min-width: 320px; align-content: flex-start; }
.ca2-synth__bars {
  flex: 1 1 36%; min-width: 320px; display: flex; flex-direction: column;
  gap: 14px; justify-content: center;
  border-left: 1px solid #ECE5D8;
  border-left: 1px solid var(--color-border, #ECE5D8); padding-left: 20px;
}
.ca2-synth__row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px; }
.ca2-synth__item {
  flex: 1 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  padding: 2px 18px; border-left: 1px solid #ECE5D8; border-left: 1px solid var(--color-border, #ECE5D8);
}
.ca2-synth__item:first-child { padding-left: 0; border-left: none; }
.ca2-synth__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
}
.ca2-synth__value { font-size: 22px; font-weight: 700; color: #2B203E; color: var(--color-text, #2B203E); line-height: 1.15; }
.ca2-synth__value small { font-size: 13px; font-weight: 500; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.ca2-synth__sub { font-size: 11px; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.ca2-synth__value--green { color: #3F7E1F; }
.ca2-synth__value--amber { color: #B45309; }
.ca2-synth__value--red,
.ca2-synth__value--terra { color: #C2543C; color: var(--color-terracotta, #C2543C); }
.ca2-synth__item--accent {
  background: #FBEEE9;
  background: var(--color-primary-light, #FBEEE9);
  border-left: none; border-radius: 10px; padding: 6px 14px;
}

/* 2e ligne synthèse : pont « où va le temps payé » (gauche) + tuile accent (droite). */
.ca2-synth__row2 { margin-top: 10px; align-items: stretch; }
.ca2-pont { flex: 1 1; min-width: 240px; display: flex; flex-direction: column;
  gap: 5px; justify-content: center; padding: 2px 18px 2px 0; }
.ca2-pont-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478); }
.ca2-pont-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden;
  font-size: 11px; font-weight: 600; }
.ca2-pseg { display: flex; align-items: center; padding-left: 8px; white-space: nowrap; overflow: hidden; }
.ca2-pseg--struct { background: #B4B2A9; color: #2C2C2A; }
.ca2-pseg--bill { background: #5C7A3E; background: var(--color-sage, #5C7A3E); color: #fff; }
.ca2-pseg--nf { background: #B8862A; background: var(--color-amber, #B8862A); }
.ca2-pseg--abs { background: #C9A24B; }
.ca2-pseg--idle { background: #E0A18F; color: #5A1F12; }

/* ── Usage breakdown : chart + panneau de valeurs à droite ──────────────── */
.ca2-chart-flex { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ca2-chart-flex .ca2-chart-wrap { flex: 1 1 380px; min-width: 0; }
.ca2-usage-side { flex: 0 1 auto; max-width: 100%; overflow-x: auto; }
.ca2-usage-tbl { border-collapse: collapse; font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ca2-usage-tbl th, .ca2-usage-tbl td { padding: 4px 10px; border-bottom: 0.5px solid #ECE5D8; border-bottom: 0.5px solid var(--color-border, #ECE5D8); white-space: nowrap; }
.ca2-usage-tbl th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.ca2-usage-tbl th.th-left { text-align: left; }
.ca2-usage-tbl th.th-right { text-align: right; }
.ca2-usage-tbl .ca2-td-pool { text-align: left; color: #2B203E; color: var(--color-text, #2B203E); }
.ca2-usage-tbl .ca2-td-num { text-align: right; color: #2B203E; color: var(--color-text, #2B203E); }
.ca2-usage-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.ca2-usage-unit { margin-top: 6px; font-size: 10.5px; color: #8B8478; color: var(--color-text-muted, #8B8478); text-align: right; }

/* ── Tri colonnes (Metrics per person) ──────────────────────────────────── */
.ca2-table th.ca2-th-sort { cursor: pointer; -webkit-user-select: none; user-select: none; }
.ca2-table th.ca2-th-sort:hover { color: #2B203E; color: var(--color-text, #2B203E); }
.ca2-th-sort--active { color: #2B203E; color: var(--color-text, #2B203E); font-weight: 700; }
.ca2-name-sort {
  cursor: pointer; font-weight: 500; font-size: 10px; text-transform: none; letter-spacing: 0;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478); margin-left: 6px;
}
.ca2-name-sort:hover { color: #C2543C; color: var(--color-terracotta, #C2543C); }
.ca2-name-sort.is-on { color: #C2543C; color: var(--color-terracotta, #C2543C); font-weight: 700; }
.ca2-name-sep { color: #ECE5D8; color: var(--color-border, #ECE5D8); margin-left: 4px; font-size: 10px; }


/* ── Annual Hours bar (CORP / IDLE) ────────────────────────────────────── */
.ca2-ah-wrap { margin: 0 0 16px; }
.ca2-ah-bar {
  display: flex; border-radius: 6px; overflow: hidden; height: 56px;
  border: 0.5px solid #ECE5D8;
  border: 0.5px solid var(--color-border, #ECE5D8);
}
.ca2-ah-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.ca2-ah-seg--corp { background: #B8862A; background: var(--color-amber, #B8862A); }
.ca2-ah-seg--idle { background: #BA5D4A; background: var(--color-terracotta, #BA5D4A); flex: 1 1; }
.ca2-ah-seg-name  { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.ca2-ah-seg-hours { font-size: 14px; font-weight: 600; color: #fff; }
.ca2-ah-footer {
  margin-top: 6px; background: var(--color-accent-tint); background: var(--color-highlight, var(--color-accent-tint));
  border: 0.5px solid #ECE5D8;
  border: 0.5px solid var(--color-border, #ECE5D8); border-radius: 5px;
  padding: 5px 12px; font-size: 11px; color: #78716C; color: var(--color-text-muted, #78716C);
}
.ca2-ah-footer strong { color: #2B203E; color: var(--color-navy, #2B203E); }

/* Hub Capacity Analysis — deltas N/N-1 et badges (tokens charte uniquement) */
.cah-delta { font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cah-delta--up   { color: var(--color-sage); }
.cah-delta--down { color: var(--color-terracotta); }
.cah-delta--flat { color: var(--color-text-muted); }
.cah-vs { margin-left: 10px; color: var(--color-text-muted); font-size: 12px; font-style: italic; }
.cah-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; vertical-align: middle; }
.cah-badge--gone { background: var(--color-terracotta); color: #fff; }
.cah-tr-gone td { color: var(--color-text-muted); background: var(--color-bg); }
/* Onglet Mensuel — matrice compacte */
.cah-monthly td, .cah-monthly th { padding-left: 8px; padding-right: 8px; }
.cah-zero { color: var(--color-border); }
/* Onglet Standards — mass-edit + saisie cible */
.cah-bulk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.cah-bulk__lbl { color: var(--color-text-muted); }
.cah-bulk__pct { width: 56px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 5px;
  text-align: right; color: var(--color-input); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cah-bulk select { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 5px; }
.cah-bulk__btn { padding: 5px 12px; border: 1px solid var(--color-navy); background: var(--color-navy);
  color: #fff; border-radius: 5px; font-size: 12px; cursor: pointer; }
.cah-bulk__btn:hover { opacity: .9; }
.cah-bulk__btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.cah-bulk__btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }
/* Modale copier une année */
.cah-modal__overlay { position: fixed; inset: 0; background: rgba(43, 32, 62, 0.35);
  display: flex; align-items: center; justify-content: center; z-index: 50; }
.cah-modal { background: #fff; border-radius: 12px; padding: 18px 20px; width: 400px; max-width: 90vw;
  box-shadow: 0 8px 30px rgba(43, 32, 62, 0.2); }
.cah-modal__row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.cah-modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cah-target-input { width: 64px; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: 5px;
  text-align: right; color: var(--color-input); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Cellule vide (non saisie) — mise en évidence pour la complétion */
.cah-target-input--empty { background: #FBF1DE; border-color: #EAD9AE; }
/* Badge Type de pool (Direct / Overhead) */
.cah-type { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 10px;
  background: #EAF3DE; color: #3B6D11; }
.cah-type--ovh { background: #F1EFE8; color: #5F5E5A; }

/* Toolbar tri/filtre de l'onglet Standard (saisie + rapport) */
.cah-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 12px; color: var(--color-text-muted); }
.cah-filter__search { width: 200px; padding: 5px 9px; border: 1px solid var(--color-border);
  border-radius: 6px; font-family: inherit; font-size: 12px; color: var(--color-text); }
.cah-filter__search:focus { outline: none; border-color: var(--color-primary); }
.cah-filterbar select { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px;
  font-family: inherit; font-size: 12px; }
.cah-filter__chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cah-filter__count { margin-left: auto; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Variante en-tête : filtres alignés à droite du titre, sans marge ni étirement. */
.cah-filterbar--head { margin-bottom: 0; flex-wrap: nowrap; }
.cah-filterbar--head .cah-filter__count { margin-left: 0; }
.ca2-table th.cah-sort { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.ca2-table th.cah-sort:hover { color: var(--color-primary); }
.cah-sort__arr { color: var(--color-primary); font-size: 10px; }

/* En-tête sur 2 lignes : nom (ligne 1) + unité « % » (ligne 2). Garde les
   colonnes % lisibles malgré les libellés longs (Congés spéciaux, Non-facturable). */
.ca2-table thead th.cah-th2 { max-width: none; vertical-align: bottom; }
.cah-th2 .cah-th-name { display: block; white-space: nowrap; }
.cah-th2 .cah-th-unit {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* Synthèse cible facturable moyenne (sous-titre de la card) */
.cah-avg-tag { font-weight: 400; font-size: 12px; color: var(--color-text-muted); margin-left: 10px; }
/* Colonne Idle = calculée, lecture seule */
.cah-idle-cell { color: var(--color-text-muted); font-weight: 500; }
/* Ligne « Moyenne pondérée » (pied de tableau) — gabarit total bleu-gris */
.cah-avg-row td { background: var(--color-accent-tint-strong); border-top: 1px solid var(--color-border); font-weight: 600; color: var(--color-navy); }
.cah-avg-row td.cah-avg-bill { background: var(--color-accent-tint-strong); }
/* Sous-lignes de moyenne (pools directs / overhead) — plus discrètes */
.cah-avg-sub td { background: #EEF1F7; border-top: 1px solid #E0E6F0; font-weight: 400; color: var(--color-text-muted); }
.cah-avg-sub td.cah-avg-bill { background: var(--color-accent-tint-strong); }

/* ── Barre base TO (Temps facturé) : facturable · non facturé · absences + marqueur cible ── */
.ca2-tobar { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.ca2-tobar__track { position: relative; flex: 1 1; height: 15px; background: #EDE7DC; border-radius: 4px; display: flex; overflow: visible; }
.ca2-tobar__seg { height: 100%; }
.ca2-tobar__seg:first-child { border-radius: 4px 0 0 4px; }
.ca2-tobar__seg:last-child { border-radius: 0 4px 4px 0; }
/* Facturable : vert clair hachuré (lecture daltonienne : motif distinct, angle ≠ absences) */
.ca2-tobar__seg--fac { background-image: repeating-linear-gradient(135deg, #8AAE63 0 5px, #6E9148 5px 10px); }
/* Absences hachurées (lecture daltonienne : motif + non couleur seule) */
.ca2-tobar__seg--abs { background-image: repeating-linear-gradient(45deg, #C9C4B8 0 3px, #E0DCD3 3px 6px); }
/* Marqueur cible : navy épais + halo blanc → visible même sur zone terracotta */
.ca2-tobar__mk { position: absolute; top: -4px; height: 23px; width: 3px; background: #2B203E; background: var(--color-navy, #2B203E); box-shadow: 0 0 0 1px #fff; border-radius: 1px; }
.ca2-tobar__mk::after { content: ''; position: absolute; top: -5px; left: -3px; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 6px solid #2B203E; border-top: 6px solid var(--color-navy, #2B203E); }
.ca2-tobar__pct { font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; width: 48px; text-align: right; color: #3B6D11; font-weight: 600; }

/* Tables Temps facturé : colonnes figées alignées entre pool/personne ;
   cellules texte (nom, pool) clippées en ellipse, la barre n'est pas affectée. */
.cbt-fixed td.ca2-td-pool { overflow: hidden; text-overflow: ellipsis; }

/* Légende des couleurs de la barre (Temps facturé) */
.cbt-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--color-text-muted); margin: 2px 0 10px; }
.cbt-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.cbt-sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.cbt-sw--abs { background-image: repeating-linear-gradient(45deg, #C9C4B8 0 2px, #E0DCD3 2px 4px); }
.cbt-sw--fac { background-image: repeating-linear-gradient(135deg, #8AAE63 0 2px, #6E9148 2px 4px); }
.cbt-tick { width: 3px; height: 13px; background: #2B203E; background: var(--color-navy, #2B203E); box-shadow: 0 0 0 1px #fff; display: inline-block; }

/* Filtre par pool dans l'en-tête de la table personne */
.cbt-filter { font-size: 12px; border: 1px solid var(--color-border); border-radius: 8px; padding: 5px 9px; background: #fff; color: var(--color-text); cursor: pointer; }

/* Revenues page — synthèse, bridge, tables (style aligné capacity costing). */

/* Embarqué dans le hub Profitabilité : pas de padding page (aligné sur titre/onglets). */
.page-table-layout.rev-layout--embedded {
  padding: 0;
}

.rev-caption { margin: 2px 0 0; font-size: 12px; color: #8B8478; color: var(--color-text-muted, #8B8478); }

/* ── Cards ── */
.rev-card {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.rev-card-title {
  margin: -18px -20px 14px;
  padding: 12px 20px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-navy);
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
}
.rev-card-title small { font-weight: 400; color: #8B8478; color: var(--color-text-muted, #8B8478); font-size: 12px; }

/* ── Synthèse une-ligne ── */
.rev-synth {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.rev-synth__head {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-navy);
  margin: -14px -18px 12px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
}
.rev-synth__row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
.rev-synth__item {
  flex: 0 0 auto; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  padding: 2px 28px 2px 18px; border-left: 1px solid #ECE5D8; border-left: 1px solid var(--color-border, #ECE5D8);
}
.rev-synth__item:first-child { padding-left: 0; border-left: none; }
.rev-synth__item--accent { background: #FBEEE9; background: var(--color-primary-light, #FBEEE9); border-left: none; border-radius: 10px; padding: 6px 14px; }
.rev-synth__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.rev-synth__value { font-size: 22px; font-weight: 700; color: #2B203E; color: var(--color-text, #2B203E); line-height: 1.15; }
.rev-synth__value small { font-size: 13px; font-weight: 500; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.rev-synth__sub { font-size: 11px; color: #8B8478; color: var(--color-text-muted, #8B8478); }

/* ── Bridge ── */
.rev-bridge-row {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px;
  padding: 8px 0; border-bottom: 0.5px solid #ECE5D8; border-bottom: 0.5px solid var(--color-border, #ECE5D8);
}
.rev-bridge-row:last-of-type { border-bottom: none; }
.rev-bridge-by {
  align-self: center; min-width: 96px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: #8B8478; color: var(--color-text-muted, #8B8478);
}
.rev-bridge-step {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-end;
  min-width: 92px; padding: 4px 12px; border-radius: 8px; background: #FBF7F0; background: var(--color-bg, #FBF7F0);
}
.rev-bridge-anchor { background: #FBEEE9; background: var(--color-primary-light, #FBEEE9); }
.rev-bridge-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #8B8478; color: var(--color-text-muted, #8B8478); }
.rev-bridge-v { font-size: 15px; font-weight: 700; color: #2B203E; color: var(--color-text, #2B203E); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.rev-bridge-note { margin: 10px 0 0; font-size: 11px; color: #8B8478; color: var(--color-text-muted, #8B8478); }

/* ── Tables ── */
.rev-table-wrap { overflow-x: auto; border: 1px solid #ECE5D8; border: 1px solid var(--color-border, #ECE5D8); border-radius: 12px; }
.rev-table { width: 100%; border-collapse: collapse; font-size: 13px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.rev-table th, .rev-table td { padding: 7px 12px; border-bottom: 0.5px solid #ECE5D8; border-bottom: 0.5px solid var(--color-border, #ECE5D8); white-space: nowrap; }
.rev-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478); background: #FBF7F0; background: var(--color-bg, #FBF7F0); text-align: right;
}
.rev-table th.th-l { text-align: left; }
.rev-td-name { text-align: left; color: #2B203E; color: var(--color-text, #2B203E); }
.rev-td-num { text-align: right; color: #2B203E; color: var(--color-text, #2B203E); }
.rev-table tbody tr:hover { background: #FBF7F0; background: var(--color-bg, #FBF7F0); }
.rev-muted { color: #8B8478; color: var(--color-text-muted, #8B8478); }
.rev-accent { color: #C2543C; color: var(--color-terracotta, #C2543C); font-weight: 600; }
.rev-pos { color: #3F7E1F; }
.rev-neg { color: #C2543C; color: var(--color-terracotta, #C2543C); }
.rev-tr-foot td { background: #FBF7F0; background: var(--color-bg, #FBF7F0); font-weight: 600; border-top: 1px solid #ECE5D8; border-top: 1px solid var(--color-border, #ECE5D8); border-bottom: none; }

/* ── Saisie billed (convention bleu user-input, comme les autres pages) ── */
.rev-td-edit { background: rgba(37, 99, 235, .05); background: var(--color-input-bg, rgba(37, 99, 235, .05)); }
.rev-billed-cell { cursor: pointer; display: inline-block; min-width: 48px; color: #2563EB; color: var(--color-input, #2563EB); font-weight: 600; }
.rev-billed-cell:hover { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
.rev-input {
  width: 90px; text-align: right; font: inherit; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  color: #2563EB;
  color: var(--color-input-text, var(--color-input, #2563EB));
  background: #fff;
  background: var(--color-input-bg, #fff);
  border: 1px solid #2563EB;
  border: 1px solid var(--color-input, #2563EB); border-radius: 6px; padding: 2px 6px;
}

.rev-bridge-empty {
  margin: 0 0 18px; padding: 14px 18px;
  background: #FBF7F0;
  background: var(--color-bg, #FBF7F0); border: 1px dashed #ECE5D8; border: 1px dashed var(--color-border, #ECE5D8);
  border-radius: 12px; font-size: 12px; color: #8B8478; color: var(--color-text-muted, #8B8478);
}

/* ── En-têtes triables ── */
.rev-th-sort { cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .12s, background .12s; }
.rev-th-sort:hover { color: #2B203E; color: var(--color-text, #2B203E); background: #FBEEE9; background: var(--color-primary-light, #FBEEE9); }
.rev-th-sort--active { color: #2B203E; color: var(--color-text, #2B203E); font-weight: 700; }
.rev-sort-ind { font-size: 9px; color: #C2543C; color: var(--color-terracotta, #C2543C); }

/* ── Filtre par pool (chips, table By employee) ── */
.rev-pool-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -2px 0 12px; }
.rev-pool-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478); background: #fff; background: var(--color-card, #fff);
  border: 0.5px solid #ECE5D8;
  border: 0.5px solid var(--color-border, #ECE5D8); border-radius: 20px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.rev-pool-btn:hover { border-color: #C2543C; border-color: var(--color-terracotta, #C2543C); color: #C2543C; color: var(--color-terracotta, #C2543C); }
.rev-pool-btn--active {
  background: #C2543C;
  background: var(--color-terracotta, #C2543C); color: #fff;
  border-color: #C2543C;
  border-color: var(--color-terracotta, #C2543C);
}
.rev-pool-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; font-weight: 700;
  background: rgba(0, 0, 0, .08); border-radius: 10px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.rev-pool-btn--active .rev-pool-count { background: rgba(255, 255, 255, .22); }

.rev-bridge-sub {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478); margin: 0 0 6px;
}

/* ── Revenue analysis : 2 blocs côte à côte sur une ligne ── */
.rev-analysis-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 0; }
.rev-analysis-block { flex: 1 1 320px; min-width: 0; }
.rev-analysis-block--py { flex-grow: 1.5; }   /* 6 indicateurs vs 4 → un peu plus large */
.rev-analysis-block + .rev-analysis-block {
  border-left: 1px solid #ECE5D8;
  border-left: 1px solid var(--color-border, #ECE5D8);
  margin-left: 24px; padding-left: 24px;
}
/* Pas de soulignement sous la ligne d'indicateurs dans ce contexte. */
.rev-analysis-block .rev-bridge-row { border-bottom: none; padding: 0; }
/* Chips compactes pour tenir tous les indicateurs sur une ligne. */
.rev-analysis-block .rev-bridge-step { min-width: 76px; padding: 4px 10px; }

/* Bloc analyses intégré dans la card de synthèse */
.rev-synth__analysis { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ECE5D8; border-top: 1px solid var(--color-border, #ECE5D8); }

/* Synthèse prévisionnelle — briques mensuelles empilées (pleine largeur). */

/* Pile verticale : chaque brique (card) en pleine largeur, l'une sous l'autre. */
.fps-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

/* Synthèse synthétique : cards empilées, TOUTES de la même largeur (celle de la
   plus large = compte de résultat) → bords et colonnes alignés. width:fit-content
   dimensionne le conteneur sur la card la plus large ; align-items:stretch étire
   les autres à cette largeur ; min-width:100% garde le remplissage si étroit. */
.fps-synth {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 34px; padding-top: 18px;
  width: fit-content; min-width: 100%;
}
/* Prévisionnel (tables 12 mois larges) : cards en pleine largeur, toutes alignées. */
.fps-synth--prev > .report-card { width: 100%; }
/* Rapports standards : cards calées sur la 1ère card (positions clés, max 950px,
   à gauche) — pas d'espace vide à droite, la table remplit (prop `fill`). */
.fps-synth--reports > .report-card { width: 950px; max-width: 100%; align-self: flex-start; }
.fps-caption { font-size: 12px; color: var(--color-text-muted); margin: 0; }

/* ── KPI Revenu par EPT — tuiles en ligne dans une card ; la croissance annuelle
   est poussée tout à droite par le spacer flexible. ──────────────────────── */
.fps-eptkpis {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;             /* tous les KPI sur UNE ligne */
  gap: 8px 24px;
  padding: 2px 2px;
  overflow-x: auto;             /* filet de sécurité sur écran étroit */
}
.fps-eptkpis__spacer { flex: 1 1 24px; }
.fps-eptkpis .fsyn-tile { padding: 6px 12px; background: transparent; }
.fps-eptkpis .fsyn-tile__value { font-size: 20px; }
.fps-eptkpis .fsyn-tile__delta { margin-top: 1px; }

/* ── KPI (tuiles) : 2 groupes — à fin de mois · total annuel vs N-1 ───────── */
.fps-kpi-groups { display: flex; flex-wrap: wrap; gap: 28px; }
.fps-kpi-group { flex: 1 1 320px; }
.fps-kpi-group__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.fps-kpi-row { display: flex; gap: 14px; }
.fps-kpi { flex: 1 1; }
.fps-kpi__label { font-size: 11px; color: var(--color-text-muted); line-height: 1.25; }
.fps-kpi__value {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy);
  margin-top: 2px;
}
.fps-kpi__sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
/* Un peu d'air vertical dans les lignes + sous l'en-tête de chaque bloc. */
.fps-synth .fcm th, .fps-synth .fcm td { padding-top: 6px; padding-bottom: 6px; }
.fps-synth .fcm thead th { padding-bottom: 9px; }

/* ── Table mensuelle (12 mois + Total) ───────────────────────────────────── */
.fcm-wrap { overflow-x: auto; background: #fff; }
.fcm {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
}
.fcm th, .fcm td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border);
}
.fcm-lbl { text-align: left; white-space: nowrap; color: var(--color-text); }
.fcm-num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text);
}
.fcm thead th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.fcm-total { background: var(--color-accent-tint); font-weight: 600; }
/* Colonne d'ouverture (point de départ 31.12.N-1) — séparée des mois par un filet. */
.fcm-open { background: #F6F4EF; border-right: 1px solid var(--color-border); color: var(--color-text-muted); }
.fcm thead th.fcm-open { color: var(--color-text-muted); }

/* Mode aligné : layout fixe + colonnes Départ/Total toujours présentes (réservées
   vides si non demandées) → Jan…Déc alignés entre les tables empilées. */
.fcm--align { table-layout: fixed; }
.fcm--align col.fcm-col-lbl { width: 210px; }
.fcm--align col.fcm-col-open { width: 64px; }
.fcm--align col.fcm-col-total { width: 64px; }
.fcm--align col.fcm-col-n1 { width: 64px; }
/* Colonne réservée (slot Départ/Total/N-1 vide) : pas d'habillage, garde le filet bas. */
.fcm-reserve { background: none; }
/* Colonne N-1 (comparatif du total) — fond crème comme dans le réel. */
.fcm-n1 { background: #F6F4EF; color: var(--color-text-muted); }
/* Titre de bloc, posé dans la cellule libellé de l'en-tête (sur la ligne des mois). */
.fcm-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy);
}
.fcm-neg { color: var(--color-terracotta); }
.fcm-row--sub td { background: var(--color-accent-tint); font-weight: 600; }
.fcm-row--total td {
  background: var(--color-accent-tint-strong);
  font-weight: 700;
  color: var(--color-navy);
  border-top: 2px solid var(--color-border);
}
.fcm-row--total .fcm-total { background: var(--color-accent-tint-strong); }

/* ── Synthèse condensée — 3 blocs distincts, sans card, à plat, données à gauche ── */
.fps-block__head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-text);   /* noir épais (titre de bloc) */
}
.fps-block__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
}
.fps-block__sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
}

.fps-cmp-wrap { overflow-x: auto; }
.fps-cmp {
  width: auto;                          /* pas pleine largeur → données calées à gauche */
  table-layout: fixed;                  /* largeurs fixes (colgroup) → tables alignées */
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
}
.fps-cmp th, .fps-cmp td {
  padding: 6px 16px;
  white-space: nowrap;
}
/* Auto : table pleine largeur, colonnes calées sur le contenu (comme le compte
   de résultat) → lisible en CHF comme en kCHF (les colonnes s'élargissent pour
   les grands nombres au lieu de se chevaucher). */
.fps-cmp--auto { table-layout: auto; width: 100%; }
/* fill : table pleine largeur (aligne la card sur la 1ère) ; la colonne libellé
   (auto) absorbe l'espace → chiffres groupés à droite, pas d'espace vide.
   Libellés longs : retour à la ligne (jamais de chevauchement des chiffres). */
.fps-cmp--fill { width: 100%; }
.fps-cmp--fill .fps-cmp-lbl { white-space: normal; min-width: 0; }
.fps-cmp--auto .fps-cmp-num { min-width: 52px; }
.fps-cmp--auto .fps-cmp-lbl { min-width: 176px; }

/* Compact : resserre pour faire tenir tous les mois à venir sur un écran. */
.fps-cmp--compact { font-size: 11.5px; }
.fps-cmp--compact th, .fps-cmp--compact td { padding: 5px 6px; }
.fps-cmp--compact thead th { font-size: 10px; }
.fps-cmp--compact .fps-cmp-lbl { white-space: normal; }   /* libellés longs : retour ligne */
/* En-têtes compacts lisibles : retour à la ligne, alignés en bas, un peu d'air. */
.fps-cmp--compact thead th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.fps-cmp--compact thead tr:nth-child(2) th { padding-bottom: 4px; }
/* Sous-libellé de colonne (réel / prév.) sous le nom du mois. */
.fps-cmp-colsub {
  display: block;
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin-top: 1px;
}
/* réel = ardoise (accent) · prév. = amber (homogène avec le Compte de résultat). */
.fps-cmp-colsub.is-reel { color: var(--color-accent); font-weight: 600; }
.fps-cmp-colsub.is-prev { color: var(--color-amber); font-weight: 600; }
.fps-cmp thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-align: right;
  vertical-align: bottom;
  border-bottom: 1px solid var(--color-border);   /* filet sous l'en-tête (seul filet des lignes hors sous-totaux) */
}
.fps-cmp thead th.fps-cmp-lbl { text-align: left; }
/* En-tête de groupe (niveau 1) : « Mai 2026 », « 2025 » — centré sur ses colonnes.
   Spécificité élevée pour battre le `text-align: right` de `.fps-cmp thead th`. */
.fps-cmp thead th.fps-cmp-grp {
  text-align: center;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-text);   /* noir fin (en-tête de groupe) */
  padding-bottom: 4px;
}
.fps-cmp-lbl { text-align: left; min-width: 220px; color: var(--color-text); }
.fps-cmp-num {
  text-align: right;
  min-width: 96px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.fps-cmp-neg { color: var(--color-terracotta); }
/* Colonne Cumulé (année en cours) mise en valeur — fond phare charte. */
.fps-cmp-key { background: var(--color-accent-tint); }
.fps-cmp thead th.fps-cmp-key { background: var(--color-accent-tint); }
/* Séparation nette du groupe N-1 : filet vertical continu + large respiration.
   Le gros padding ne s'applique qu'aux cellules de données / sous-en-têtes (pas à
   l'en-tête de groupe, qui doit rester centré sur ses colonnes). */
.fps-cmp-sep { border-left: 1px solid var(--color-text); }      /* noir fin (séparateur de groupe) */
.fps-cmp-sepl { border-left: 1px solid var(--color-border); }   /* gris léger : réel | prév. */
.fps-cmp-num.fps-cmp-sep { padding-left: 40px; }
/* Ligne titre de bloc (rapports sur-mesure) — intertitre serif navy. */
.fps-cmp-row--head td {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--color-navy);
  padding-top: 12px;
  white-space: normal;
}
/* Hiérarchie sub/total : graisse + filet au-dessus/dessous (lignes importantes).
   Les lignes de détail restent sans bordure (table épurée). */
.fps-cmp-row--sub td {
  font-weight: 600;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.fps-cmp-row--total td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 2px solid var(--color-text);   /* noir épais (total) */
}
.fps-cmp-row--total td.fps-cmp-neg { color: var(--color-terracotta); }
/* Ligne d'espacement (ex. sous EBITDA avant les indicateurs EPT). */
.fps-cmp-row--spacer td { height: 10px; border: none; padding: 0; background: none; }
/* Intersection colonne phare × ligne total (charte). */
.fps-cmp-row--total td.fps-cmp-key { background: var(--color-accent-tint-strong); }

/* Barre de drivers (DSO/DPO/DIO) — placée au-dessus de la table mensuelle. */
.fps-cf__assums--bar { padding: 8px 12px 16px; }

.fps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.fps-pl {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
}

.fps-pl__row td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text);
}

.fps-pl__label { text-align: left; }

.fps-pl__val {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fps-pl__val--neg { color: var(--color-terracotta); }

.fps-loading { color: var(--color-text-muted); padding: 8px 4px; }

/* Table fonds de roulement (4 colonnes) — resserrée pour tenir dans la card. */
.fps-wc { table-layout: fixed; }
.fps-wc thead th {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--color-border);
}
.fps-wc thead th.fps-pl__val { text-align: right; }
.fps-wc td { padding-left: 8px; padding-right: 8px; font-size: 13px; }
.fps-wc .fps-pl__label { width: 34%; }
.fps-wc .fps-pl__val { width: 22%; }

.fps-cf__note {
  padding: 6px 12px 12px;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Sous-totaux (Valeur ajoutée, Marge brute, EBITDA cash flow) — surlignage accent. */
.fps-pl__row--sub td {
  background: var(--color-accent-tint);
  font-weight: 600;
}

/* Total fort (EBITDA P&L, Cash flow opérationnel) — ligne navy. */
.fps-pl__row--total td {
  background: var(--color-accent-tint-strong);
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  font-weight: 700;
  color: var(--color-navy);
}

/* ── Hypothèses BFR (jours) ─────────────────────────────────────────────── */
.fps-cf__assums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* DSO · DPO · DIO · acomptes — sur une ligne */
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 12px 4px;
}

.fps-cf__assum {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fps-cf__assum-lbl {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.25;
}

.fps-cf__assum-field {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fps-cf__assum-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  color: var(--color-input);
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.fps-cf__assum-input:focus {
  outline: none;
  border-color: var(--color-input);
}

.fps-cf__assum-unit {
  font-size: 12px;
  color: var(--color-text-muted);
}

.fps-cf__assum-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Saisie d'hypothèse en tuile KPI : valeur bleue, sans cadre, modifiable. */
.fps-assum-input {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-input);
  width: 3.4ch;
  padding: 0;
  text-align: left;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.fps-assum-input::-webkit-outer-spin-button,
.fps-assum-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fps-assum-input:focus { outline: none; }
.fps-assum-unit { font-size: 13px; font-weight: 500; color: var(--color-text-muted); margin-left: 2px; }

/* ── Cash flow éditable : saisie bleue dans la cellule (mois de prévision) ──── */
.fps-cmp-row--bold td { font-weight: 700; }
.fps-cf-edit {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--color-input);
  text-align: right;
  padding: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.fps-cf-edit::-webkit-outer-spin-button,
.fps-cf-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fps-cf-edit:focus { outline: none; }
.fps-cf-linehead { display: flex; align-items: center; gap: 4px; }
.fps-cf-line-lbl {
  flex: 1 1; min-width: 0; border: none; background: transparent; font: inherit;
  color: var(--color-input); padding: 0;
}
.fps-cf-line-lbl:focus { outline: none; }
.fps-cf-type {
  flex: none; width: 16px; height: 16px; line-height: 1; border-radius: 4px;
  border: none; cursor: pointer; font-weight: 700; font-size: 12px; color: #fff;
}
.fps-cf-type--in { background: var(--color-sage); }
.fps-cf-type--out { background: var(--color-terracotta); }
.fps-cf-del {
  flex: none; border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 13px; line-height: 1; padding: 0 2px;
}
.fps-cf-del:hover { color: var(--color-terracotta); }
.fps-cf-addrow td { padding-top: 4px; padding-bottom: 4px; }
.fps-cf-addbtn {
  border: 1px dashed var(--color-border); background: transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 11px; border-radius: 4px; padding: 3px 8px;
}
.fps-cf-addbtn:hover { border-color: var(--color-input); color: var(--color-input); }

/* Variation totale de trésorerie : encadrée comme un total (filet avant + épais après). */
.fps-cmp-row--cftotal td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 1.5px solid var(--color-navy);
  border-bottom: 2.5px solid var(--color-navy);
}
/* Ligne total : pas de couleur (même les négatifs restent navy). */
.fps-cmp-row--cftotal .fps-cmp-neg { color: var(--color-navy); }
/* Les 3 sous-totaux de flux : aplat accent clair (--color-accent-soft). */
.fps-cmp-row--flux td { font-weight: 700; background: var(--color-accent-soft); color: var(--color-navy); }
.fps-cmp-row--flux .fps-cmp-neg { color: var(--color-terracotta); }
/* Soldes de trésorerie : négatif en rouge gras · repère début/fin en gras. */
.fps-cf-solde-neg { color: var(--color-terracotta); font-weight: 700; }
.fps-cf-solde-bold { font-weight: 700; }

/* Cash flow prévisionnel — table alignée sur les autres onglets : police 13px
   (base fps-cmp, sans --compact), colonnes resserrées pour tenir les 12 mois,
   libellés longs sur 2 lignes. Les bordures (sous-totaux uniquement) sont gérées
   par la base .fps-cmp — plus rien de spécifique ici. */
.fps-cf-tbl td, .fps-cf-tbl th { padding-left: 10px; padding-right: 10px; }
.fps-cf-tbl .fps-cmp-lbl { white-space: normal; }
/* Espace avant les soldes de trésorerie. */
.fps-cf-gaptop td { padding-top: 14px; }
/* Solde de trésorerie négatif : fond rouge léger (terracotta charte, atténué). */
.fps-cf-negbg { background: rgba(186, 93, 74, 0.12); }

/* ── Bandeau « Évolution de la liquidité » en tête de la Synthèse (Rapports
   standards) : Liquidité (héros gauche) et BFRE (héros droite) sur 2 lignes,
   4 composants du BFRE en 2×2 au centre, courbe des mois réalisés en fond.
   align-self flex-start → calé à gauche sur la card `report-card` (fit-content)
   du tableau en dessous ; largeur bornée → ne déborde pas à droite. */
.fss-liq {
  align-self: flex-start; width: 950px; max-width: 100%; margin: 2px 0 0;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; overflow: hidden;
}
.fss-liq__lbl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--color-border);
}
.fss-liq__lbl span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.fss-liq__lbl small { font-size: 11px; color: var(--color-text-muted); }
.fss-evo__band { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.7fr; grid-template-rows: 1fr 1fr; }
.fss-evo__tile {
  position: relative; min-width: 0; padding: 11px 14px 8px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 92px;
  border-left: 1px solid var(--color-border-inner);
}
.fss-evo__tile:first-child { border-left: none; }
.fss-evo__tile.has-b { border-bottom: 1px solid var(--color-border-inner); }
.fss-evo__tile--hero { grid-row: 1 / 3; min-height: 188px; }
.fss-evo__tile--last { grid-column: 4; }
/* Courbe de fond estompée : les chiffres gardent le dessus. */
.fss-evo__bg { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; display: block; opacity: .38; pointer-events: none; }
.fss-evo__tile--hero .fss-evo__bg { height: 58%; }
.fss-evo__val { position: relative; font-size: 24px; font-weight: 700; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fss-evo__tile--hero .fss-evo__val { font-size: 34px; margin-top: 2px; }
.fss-evo__var { position: relative; margin-top: 3px; font-size: 11.5px; font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.fss-evo__tile--hero .fss-evo__var { font-size: 12.5px; margin-top: 5px; }
.fss-evo__var--up { color: var(--color-sage); }
.fss-evo__var--down { color: var(--color-terracotta); }
.fss-evo__since { color: var(--color-text-muted); font-weight: 400; }
.fss-evo__lbl {
  position: relative; margin-bottom: 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .fss-liq { align-self: stretch; }
  .fss-evo__band { grid-template-columns: 1fr 1fr; grid-template-rows: auto; max-width: 100%; }
  .fss-evo__tile--hero { grid-row: auto; grid-column: 1 / 3; min-height: 140px; }
  .fss-evo__tile--last { grid-column: 1 / 3; }
}

/* Détail du fonds de roulement (lignes de bilan sous BFRE / Autres FR). */
.fps-cmp-row--det .fps-cmp-lbl { padding-left: 1.6rem; font-style: italic; color: var(--color-text-muted); }
.fps-cmp-row--det td { font-size: 0.95em; }

/* Sous-total de fonds de roulement cliquable (groupement sans chevron). */
.fps-cf-grouprow { cursor: pointer; }
.fps-cf-grouprow td { font-weight: 600; }
.fps-cf-grouprow:hover td { background: var(--color-accent-tint); }
.fps-cf-groupmark { margin-left: 8px; color: var(--color-text-muted); font-weight: 400; font-size: 0.85em; }

/* Bouton « Tout grouper / dégrouper » — en-tête Cash flow prévisionnel. */
.fps-cf-groupbtn {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  border-radius: 8px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.82rem;
  cursor: pointer; color: var(--color-accent);
}
.fps-cf-groupbtn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }


/* Reprise du rendu écran (tables réelles) dans l'impression Finance.
   But : conserver EXACTEMENT les colonnes / en-têtes / agrégation de l'écran,
   en réduisant police + paddings pour tenir dans la largeur A4 paysage, et en
   neutralisant le décor interactif (boutons d'outils, ombres, scroll). */

.fin-screenprint { width: 100%; }

/* Pas de scroll horizontal : tout doit tenir sur la page. */
.fin-screenprint .page-table-wrap,
.fin-screenprint .cf-table-wrap,
.fin-screenprint .fwc-wrap { overflow: visible !important; }

/* Tables denses (P&L, Bilan) — police réduite + paddings serrés. */
.fin-screenprint .page-table { font-size: 6.4pt; width: 100%; }
.fin-screenprint .page-table thead th,
.fin-screenprint .page-table tbody td { padding: 0.5mm 0.9mm; line-height: 1.15; }
/* Taille de texte HOMOGÈNE : les tailles px par niveau (soldes 13px, détails et
   colonnes % 11px, comptes 11px) détonnent à l'impression → tout au même corps. */
.fin-screenprint .page-table th,
.fin-screenprint .page-table td,
.fin-screenprint .page-table td span { font-size: 6.4pt !important; }
/* Pas de cadre autour de la table : l'en-tête print + la page suffisent. */
.fin-screenprint .page-table-wrap {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}
/* Pas de pastille de comptage (nombre de comptes inclus par ligne). */
.fin-screenprint .pl-count,
.fin-screenprint .bs-count { display: none !important; }
/* Lever les largeurs mini d'écran (col. libellé 260px, cellules 50px) et
   RÉPARTIR les colonnes uniformément (même vides) : layout fixe pleine largeur,
   libellé borné → plus de trou entre les libellés et la colonne Janvier. */
.fin-screenprint .page-table th,
.fin-screenprint .page-table td { min-width: 0 !important; }
.fin-screenprint .pl-actuals,
.fin-screenprint .bs-table.bs-actuals { table-layout: fixed !important; width: 100% !important; }
.fin-screenprint .pl-col-line,
.fin-screenprint .bs-col-line { width: 44mm !important; min-width: 0 !important; }
.fin-screenprint col.bs-c-line { width: 44mm !important; }
.fin-screenprint col.bs-c-lead, .fin-screenprint col.bs-c-mo,
.fin-screenprint col.bs-c-var { width: auto !important; }
.fin-screenprint col.bs-c-sp { width: 2mm !important; }
.fin-screenprint .pl-spacer,
.fin-screenprint .bs-spacer { width: 2mm !important; min-width: 0 !important; }

/* Impression : les chevrons d'expansion (▸/▾) ne servent à rien sur papier et
   rognent la largeur du libellé. On les masque et on récupère la place ; la
   hiérarchie reste portée par l'indentation et le gras des sous-totaux. Le
   libellé peut s'enrouler sur 2 lignes plutôt que d'être tronqué. */
.fin-screenprint .pl-caret,
.fin-screenprint .bs-gut,
.fin-screenprint .bs-caret { display: none !important; }
.fin-screenprint td.pl-line,
.fin-screenprint td.bs-line { white-space: normal; }

/* Tous les libellés du compte de résultat alignés à gauche : on annule
   l'indentation par niveau (sous-totaux/soldes étaient décalés de 14 px). La
   hiérarchie reste lisible via le gras des sous-totaux et la couleur des lignes.
   Les comptes dépliés gardent leur léger retrait + n° de compte. */
.fin-screenprint .pl-actuals td.pl-line,
.fin-screenprint .pl-actuals tbody tr.pl-row--line td.pl-line,
.fin-screenprint .pl-actuals tbody tr.pl-row--subtotal td.pl-line,
.fin-screenprint .pl-actuals tbody tr.pl-row--grand td.pl-line { padding-left: 0 !important; }

/* ── Bilan imprimé : filets noirs ───────────────────────────────────────────
   - Détails : aucun filet horizontal (pas de quadrillage).
   - Groupes (Actifs circulants/immobilisés, Dettes CT/LT, Capitaux propres) :
     filet noir SIMPLE au-dessus et au-dessous.
   - Total Actif / Total Passif : filet noir PLUS ÉPAIS, sans fond navy.
   - Verticales : après la clôture (31.12 N-1), avant et après la variation,
     sur toute la hauteur (en-tête inclus).
   NB : le bilan réel a un stylesheet très spécifique (.bs-table.bs-actuals) qui
   pose le filet terracotta (--bs-band-top) sur les totaux et les verticales beige
   (--bs-hairline) en !important ; on doit donc re-scoper à .bs-actuals et monter
   la spécificité pour gagner. */
/* Groupes (sections) : filet noir simple haut + bas */
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--sectiontotal td {
  background: none !important;
  border-top: 0.75px solid var(--color-text) !important;
  border-bottom: 0.75px solid var(--color-text) !important;
}
/* Sous-total intermédiaire (Total fonds étrangers) : simple aussi */
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--subtotal:not(.bs-row--grand) td {
  background: none !important;
  color: var(--color-text) !important;
  border-top: 0.75px solid var(--color-text) !important;
  border-bottom: 0.75px solid var(--color-text) !important;
}
/* Total Actif / Total Passif : filet noir ÉPAIS (remplace terracotta + navy),
   y compris sur les cellules clôture + séparateur. */
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--grand td,
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--grand td.bs-lead-prev,
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--grand td.bs-spacer {
  background: none !important;
  color: var(--color-text) !important;
  border-top: 2px solid var(--color-text) !important;
  border-bottom: 2px solid var(--color-text) !important;
}
/* Pied du bilan imprimé.
   - Réconciliation P&L (Résultat net) : pas imprimée.
   - Équilibre : seule la marque reste. Pas de filets parasites, pas de « – »/0
     dans les colonnes. Mise en évidence (terracotta) UNIQUEMENT si déséquilibré
     (is-ko) — dans ce cas les écarts restent visibles. */
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--reconfoot { display: none !important; }
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--equ td {
  background: none !important;
  color: var(--color-text-muted) !important;
  border: none !important;
}
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--equ:not(.is-ko) td.bs-num {
  color: transparent !important;
}
.fin-screenprint .bs-table.bs-actuals tbody tr.bs-row--equ.is-ko td {
  color: var(--color-terracotta) !important;
  font-weight: 700;
}
/* ── Verticales noires, pleine hauteur (en-tête inclus) ─────────────────────
   - après la clôture 31.12 N-1 (bord droit) ;
   - avant la variation (bord gauche) et après (bord droit). */
.fin-screenprint .bs-table.bs-actuals thead th.bs-grp-close,
.fin-screenprint .bs-table.bs-actuals thead th.bs-lead-prev,
.fin-screenprint .bs-table.bs-actuals tbody td.bs-lead-prev {
  border-right: 0.75px solid var(--color-text) !important;
}
.fin-screenprint .bs-table.bs-actuals thead th.bs-grp-var,
.fin-screenprint .bs-table.bs-actuals thead th.bs-col-var,
.fin-screenprint .bs-table.bs-actuals tbody td.bs-num--var {
  border-left: 0.75px solid var(--color-text) !important;
  border-right: 0.75px solid var(--color-text) !important;
}

/* Cash flow + Liquidités/BFRE (fwc). */
.fin-screenprint .cf-table,
.fin-screenprint .fwc-table { font-size: 7pt; width: 100%; }
.fin-screenprint .cf-table td,
.fin-screenprint .cf-table th,
.fin-screenprint .fwc-table td,
.fin-screenprint .fwc-table th { padding: 0.6mm 1mm; }

/* Flux : à l'écran les titres/totaux vont de 11 à 17 px (détails ~11) — trop
   d'écart à l'impression. On homogénéise : tout à 7pt, seul l'en-tête d'année
   garde 1pt de plus (8pt). La hiérarchie reste portée par le gras et les fonds. */
.fin-screenprint .cf-table td,
.fin-screenprint .cf-table th,
.fin-screenprint .cf-table .cf-row--section td,
.fin-screenprint .cf-table .cf-row--subtotal td,
.fin-screenprint .cf-table .cf-row--total td,
.fin-screenprint .cf-table .cf-row--net-cf td,
.fin-screenprint .cf-table .cf-row--cash-key td,
.fin-screenprint .cf-table .cf-row--cash-final td,
.fin-screenprint .cf-table .cf-row--recon-head td,
.fin-screenprint .cf-table .cf-row--recon td,
.fin-screenprint .cf-table .cf-thead-sub td { font-size: 6.5pt !important; }
.fin-screenprint .cf-table .cf-year-grp { font-size: 7.5pt !important; }
.fin-screenprint .cf-recon-cap { font-size: 7pt !important; }
/* Filets des lignes de total : les bordures écran (1-2px) deviennent des barres
   grasses aux bouts arrondis à l'échelle 7pt du PDF → filets fins d'imprimé. */
.fin-screenprint .cf-table .cf-row--total td,
.fin-screenprint .cf-table .cf-row--net-cf td,
.fin-screenprint .cf-table .cf-row--cash-key td,
.fin-screenprint .cf-table .cf-row--cash-final td {
  border-top-width: 0.5pt !important;
  border-bottom-width: 0.5pt !important;
}
.fin-screenprint .cf-table .cf-row--net-cf td { border-top-width: 1pt !important; border-bottom-width: 1pt !important; }
.fin-screenprint .cf-table .cf-row--cash-final td { border-bottom-width: 1pt !important; }
/* Ratio de liquidité : la colonne « Cible » gardait sa taille écran → alignée
   sur le corps 7pt du reste de la table. */
.fin-screenprint .fwc-table td.fwc-cible,
.fin-screenprint .fwc-table th.fwc-cible { font-size: 7pt !important; }

/* ── Lignes de CONTRÔLE hors du rapport imprimé (décision 2026-08-19) :
   le PDF présente, les contrôles de cohérence restent à l'écran. ─────────── */
.fin-screenprint .pl-kpi-taux,                 /* taux CS constaté (P&L) */
.fin-screenprint .bs-foot-periods,             /* rappel des périodes en pied de bilan */
.fin-screenprint .bs-row--unmapped,            /* comptes non alloués */
.fin-screenprint .bs-row--unmapped-none,
.fin-screenprint .bs-row--equ,                 /* Équilibré / écart bilan */
.fin-screenprint .cf-recon-block { display: none !important; }   /* réconciliation flux ↔ bilan */

/* ── Largeurs du tableau de flux : le gabarit écran (290px + 12 × 68px)
   déborde de l'A4 paysage → colonnes resserrées, tout tient sur la page. ── */
.fin-screenprint .cf-table col.cf-col-label { width: 200px; }
.fin-screenprint .cf-table col.cf-col-amount { width: 62px; }
.fin-screenprint .cf-table col.cf-col-month { width: 52px; }
.fin-screenprint .cf-table col.cf-col-gap { width: 10px; }

/* Marge haute réduite : gagne ~3mm de hauteur utile par page (le flux ouvert
   frôlait la hauteur de page → le numéro de page partait seul sur une page). */
.fin-screenprint.ppl-print__section { padding-top: 3mm; }

/* ── Pagination : ne PAS forcer chaque section finance à rester insécable —
   une section à peine plus haute qu'une page était repoussée entière sur la
   page suivante (→ pages blanches + en-tête orphelin). Elle démarre toujours
   sur une page neuve (break-before du gabarit), puis coule naturellement. ── */
@media print {
  .fin-screenprint.ppl-print__section {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
}

/* P&L imprimé : filet vertical qui sépare le bloc N-1 (Jul cum. · écarts)
   du réalisé — posé à gauche de la colonne N-1. */
.fin-screenprint .pl-actuals th.pl-2025-chf,
.fin-screenprint .pl-actuals td.pl-2025-chf { border-left: 0.5pt solid var(--color-text) !important; }

/* ── Neutraliser le décor d'écran (chrome interactif) ───────────────────── */
/* Cash flow : barre d'outils (Mapping / unité) + alerte non-classé + classeur. */
.fin-screenprint .cf-card-head,
.fin-screenprint .cf-unclassified-warn,
.fin-screenprint .cfc { display: none !important; }
/* Cellules éditables (cessions mensuelles, trésorerie d'ouverture) : sur papier
   le bleu saisie + soulignement traitillé n'ont pas de sens — encre normale. */
.fin-screenprint .cf-cess-val,
.fin-screenprint .cf-cash-val { color: inherit !important; border-bottom: none !important; cursor: default; }
.fin-screenprint .cf-cess-val.no-val,
.fin-screenprint .cf-cash-val.no-val { color: var(--color-text-muted) !important; }
.fin-screenprint .cf-refresh-btn { display: none !important; }
.fin-screenprint .cf-card,
.fin-screenprint .cf-card--bare {
  box-shadow: none; border: none; padding: 0;
  /* le radius écran (overflow hidden) arrondissait les coins de la DERNIÈRE
     ligne teintée (Trésorerie fin de période) sur le PDF */
  border-radius: 0 !important; overflow: visible !important;
}
.fin-screenprint .page-table-layout { min-height: 0; padding: 0; }

/* Cards écran (report-card / std-card) réutilisées en print : à plat — pas de
   cadre / ombre / fond ni marge intérieure (la page PDF est déjà blanche, le
   cadre fait doublon). Le titre du bloc est conservé, sans la bande bleu-gris. */
.fin-screenprint .std-card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.fin-screenprint .std-card__head {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 0 0.8mm !important;
}
.fin-screenprint .std-card__body { padding: 0 !important; }

/* Liquidités/BFRE : bouton formule (ⓘ). Les titres de Card sont conservés. */
.fin-screenprint .fwc-info { display: none !important; }

/* Espacement entre cards empilées (liquidité = 2 tables, BFRE = 2 + tuiles) :
   AÉRER entre les tables, RAPPROCHER chaque titre de sa table. */
.fin-screenprint .lk-card { margin-bottom: 5mm; box-shadow: none; }
.fin-screenprint .std-card { margin-bottom: 9mm; }
.fin-screenprint .std-card:last-child { margin-bottom: 0; }
.fin-screenprint .std-card__title { margin: 0 !important; }
.fin-screenprint .std-card__subtitle { margin: 0 !important; }
.fin-screenprint .fwc-wrap { padding-top: 0 !important; }

/* ── Compacité verticale : tenir sur UNE page (P&L, Synthèse, Flux) ────────
   L'en-tête de rapport et l'interligne des tables d'écran (padding 7px) sont
   resserrés ; spécificité montée pour battre les règles .pl-actuals/.bs-actuals. */
.fin-screenprint .ppl-print__report-header { padding-bottom: 1.5mm; margin-bottom: 2.5mm; }
.fin-screenprint .ppl-print__report-title { font-size: 12pt; }
.fin-screenprint .ppl-print__report-eyebrow { margin-bottom: 0.5mm; }
.fin-screenprint .page-table.pl-actuals tbody td,
.fin-screenprint .page-table.pl-actuals thead th,
.fin-screenprint .page-table.bs-actuals tbody td,
.fin-screenprint .page-table.bs-actuals thead th { padding-top: 0.45mm !important; padding-bottom: 0.45mm !important; line-height: 1.08 !important; }
.fin-screenprint .fps-cmp td, .fin-screenprint .fps-cmp th,
.fin-screenprint .cf-table td, .fin-screenprint .cf-table th { padding-top: 0.45mm !important; padding-bottom: 0.45mm !important; line-height: 1.1 !important; }
/* Prévisionnel — BFRE : carte « Hypothèses BFR » avec champs éditables → aplatis
   en lecture (pas de bordure de saisie ni de chrome). */
.fin-print-forecast-bfre .fps-cf__assum-field input,
.fin-print-forecast-bfre .fps-cf__assum-field select,
.fin-print-forecast-bfre input,
.fin-print-forecast-bfre select {
  border: none !important;
  background: none !important;
  appearance: none;
  padding: 0 !important;
  color: var(--color-text) !important;
}

/* Positions clés au Bilan (card KPI) : à l'écran = 1 rangée de 7 tuiles, mais la
   media-query (max-width:900px) la casse en 3 colonnes en contexte print → card
   trop haute. On reforce 7 colonnes (spécificité .fin-screenprint > media-query)
   et on densifie fortement les tuiles pour que la Synthèse tienne sur UNE page. */
/* Bandeau « Évolution de la liquidité » imprimé : tuiles NUES (pas de card ni
   d'en-tête — le titre de page suffit), les 4 composants du centre agrandis,
   répartition plus équilibrée héros / composants. */
.fin-screenprint .fss-liq {
  max-width: 100%; width: 100%; margin: 0 0 3mm; page-break-inside: avoid; break-inside: avoid;
  border: none !important; border-radius: 0; background: transparent; box-shadow: none;
}
.fin-screenprint .fss-liq__lbl { display: none; }
.fin-screenprint .fss-evo__band { grid-template-columns: 1.25fr 1fr 1fr 1.25fr; }
.fin-screenprint .fss-evo__tile { padding: 2mm 2.5mm; min-height: 19mm; }
.fin-screenprint .fss-evo__tile--hero { min-height: 38mm; }
.fin-screenprint .fss-evo__val { font-size: 14pt; }
.fin-screenprint .fss-evo__tile--hero .fss-evo__val { font-size: 17pt; }
.fin-screenprint .fss-evo__var { font-size: 6.5pt; margin-top: 0.8mm; }
.fin-screenprint .fss-evo__lbl { font-size: 6.2pt; padding-top: 1mm; }

/* Bandeaux RÉALISÉ / PRÉVISIONNEL : sans objet sur un rapport réel-only. */
.fin-screenprint .fwc-band-row { display: none !important; }
/* Plus d'air entre le titre de page et le premier titre de card. */
.fin-screenprint .ppl-print__report-header { margin-bottom: 9mm; }

/* Titres de bloc (CR simplifié / Cash flow op.) : sans le gros filet noir. */
.fin-screenprint .fps-block__head { border-bottom: none; padding-bottom: 2px; }
.fin-screenprint .fps-caption { display: none; }
/* Synthèse : le conteneur écran est un flex → il ne se FRAGMENTE pas à
   l'impression (WebKit/Blink) et partait entier sur la page suivante, laissant
   l'en-tête orphelin. En bloc + compression verticale, tout tient sous le titre. */
.fin-screenprint .fps-synth {
  display: block !important; width: 100% !important; min-width: 0 !important;
  padding-top: 0 !important;
}
.fin-screenprint .fps-synth > * { margin-bottom: 6mm; }
.fin-screenprint .fps-cmp th,
.fin-screenprint .fps-cmp td { padding: 2.5px 10px; font-size: 8.5pt !important; }
.fin-screenprint .fss-evo__tile--hero { min-height: 30mm; }
.fin-screenprint .fss-evo__tile { min-height: 15mm; padding: 1.6mm 2.2mm; }
.fin-screenprint .fss-evo__val { font-size: 12pt; }
.fin-screenprint .fss-evo__tile--hero .fss-evo__val { font-size: 15pt; }
.fin-screenprint .fss-liq { margin-bottom: 5mm; }
/* Ligne de total (EBITDA, CF opérationnel) : filet noir SIMPLE et fin. */
.fin-screenprint .fps-cmp-row--total td { border-top: 0.5pt solid var(--color-text) !important; }

/* Coût de production (impression Rentabilité) : la card synthèse « Coût par
   groupe » tient sur sa page, la card détail « Coût par personne » démarre sur la
   page suivante (saut de page). Les filtres de groupe interactifs (chips Tous /
   Data / …) sont masqués sur le PDF. */
.fin-screenprint .ca2-pool-filter { display: none !important; }
.fin-screenprint .ca2-card + .ca2-card { break-before: page; page-break-before: always; }

/* Synthèse : deux blocs empilés — réduire l'espace entre eux. */
.fin-screenprint .fps-block { margin-bottom: 2mm; }
.fin-screenprint .fps-block__head { margin-bottom: 0.5mm; }
.fin-screenprint .fps-caption { margin-bottom: 1mm; }
.fin-screenprint .fps-cmp td, .fin-screenprint .fps-cmp th { padding-top: 0.3mm !important; padding-bottom: 0.3mm !important; font-size: 6.4pt !important; }
/* Synthèse prévisionnelle (dense : KPI + 2 tables 12 mois) — tuiles très compactes. */
.fin-screenprint .fsyn-tilecols { gap: 3mm; margin-bottom: 1.5mm; }
.fin-screenprint .fsyn-tiles { gap: 2mm; }
.fin-screenprint .fsyn-tile { padding: 0.6mm 1.5mm; }
.fin-screenprint .fsyn-tile__value { font-size: 7.5pt; }
.fin-screenprint .fsyn-tile__label { font-size: 5pt; line-height: 1.05; }
.fin-screenprint .fsyn-tile__delta { font-size: 4.8pt; }
.fin-screenprint .fsyn-grouplbl { font-size: 6pt; margin-bottom: 0.5mm; }

/* ── Synthèse (réutilise FinancialsSynthesisTab : 2 colonnes + graphiques) ──
   On garde la mise en page écran, en évitant les coupures de cards en travers
   d'une page et les ombres. */
.fin-screenprint .fsyn-chartwrap,
.fin-screenprint .fsyn-tiles,
.fin-screenprint .fsyn-thermos { page-break-inside: avoid; break-inside: avoid; }

/* ── Costing (Coût horaire CCR + Coût de production) : tables réelles réutilisées
   en impression. Compaction police + paddings pour tenir en largeur A4 paysage,
   scroll neutralisé, chrome interactif masqué. Pagination native (thead répété). */
.fin-screenprint .ca2-table-wrap,
.fin-screenprint .tcp-ptable-wrap { overflow: visible !important; }
.fin-screenprint .ca2-table,
.fin-screenprint .tcp-ptable,
.fin-screenprint .prof-table { width: 100%; font-size: 7pt; }
.fin-screenprint .ca2-table th,  .fin-screenprint .ca2-table td,
.fin-screenprint .tcp-ptable th, .fin-screenprint .tcp-ptable td,
.fin-screenprint .prof-table th, .fin-screenprint .prof-table td {
  padding: 0.5mm 1mm !important;
  font-size: 7pt !important;
  line-height: 1.15 !important;
}
/* Cards costing (tcp-card / hr-synth) à plat en impression : pas d'ombre/cadre. */
.fin-screenprint .tcp-card,
.fin-screenprint .hr-synth { box-shadow: none !important; border: none !important; margin-bottom: 4mm; }
/* Filtres / tris interactifs inutiles sur papier. */
.fin-screenprint .tcp-ptable-filter,
.fin-screenprint .tcp-sort-ind { display: none !important; }
/* Éviter de couper une carte/tuile en travers d'une page. */
.fin-screenprint .tcp-synth-tiles,
.fin-screenprint .tcp-card { page-break-inside: avoid; break-inside: avoid; }

/* ── Ajustements (annexe) : on masque le chrome d'édition, on aplatit les
   champs de saisie pour une lecture papier propre. ──────────────────────── */
.fin-print-adjustments .page-header,
.fin-print-adjustments .adj-col--del,
.fin-print-adjustments .adj-del-btn { display: none !important; }
.fin-print-adjustments .adj-select,
.fin-print-adjustments .adj-input,
.fin-print-adjustments .adj-amount-input {
  border: none !important;
  background: none !important;
  appearance: none;
  padding: 0 !important;
  color: var(--color-text) !important;
}

/* Bascule de vue — segments accolés, famille ardoise (seul accent du chrome).
   Tokens :root uniquement, aucune couleur hors charte. */
.view-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-card);
  font-family: "Inter", system-ui, sans-serif;
}

.view-switch__seg {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 11px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.view-switch__seg + .view-switch__seg {
  border-left: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border-inner, var(--color-border));
}

.view-switch__seg:hover:not(.on) {
  background: var(--color-accent-tint);
  color: var(--color-on-tint);
}

.view-switch__seg.on {
  background: var(--color-accent);
  color: var(--color-surface-card);
  font-weight: 600;
}

.view-switch__seg:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: -2px;
}

/* Cellules éditables partagées — utilisées dans toutes les pages à tableau */
.p-cell-text {
  display: inline-block;
  min-width: 40px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
}
.p-cell-text:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.p-cell-empty { color: var(--color-text-muted); font-style: normal; }
/* Invitation à saisir : bleu du champ, atténué — ce n'est pas encore une valeur. */
.p-cell-ph {
  color: color-mix(in srgb, var(--color-field-focus) 55%, transparent);
  font-style: normal;
}

.p-cell-input {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-value-bg);
  border: 1px solid var(--color-value);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  width: 100%;
  min-width: 60px;
  outline: none;
  /* Pas de spinners sur les inputs numériques */
  -moz-appearance: textfield;
}
.p-cell-input::-webkit-inner-spin-button,
.p-cell-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.p-cell-computed {
  font-weight: 600;
  color: var(--color-value);
  white-space: nowrap;
}

/* Boutons communs aux pages à tableau */
.p-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.p-btn--primary { background: var(--color-primary); color: #fff; }
.p-btn--primary:hover { background: #433aab; }
.p-btn--secondary { background: var(--color-primary-light); color: var(--color-primary); }
.p-btn--secondary:hover { background: #dddaf5; }
/* Toggle "éteint" : même encadré gris + fond blanc que les autres boutons,
   mais icône + texte en terracotta. */
.p-btn--brush-off {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  color: var(--color-terracotta);
  font-weight: 600;
}
.p-btn--brush-off:hover { background: var(--terracotta-light); }

.p-btn-delete {
  font-family: inherit;
  font-size: 11px;
  background: transparent;
  color: var(--color-text-muted);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  cursor: pointer;
  line-height: 1;
}
.p-btn-delete:hover { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; }

/* Layout commun aux pages à tableau */
.page-table-layout {
  max-width: 1200px;
  margin: 0 auto;
  /* Retrait haut porté par la zone contenu (.logike-page-wrap > *) — ces 40px
     descendaient le titre bien sous le nom de module (2026-08-18). */
  padding: 0 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Fluid variant — full viewport width ─────────────────────────────────────
   Add class "is-fluid" to page-table-layout to remove the max-width cap.       */
.page-table-layout.is-fluid {
  max-width: 100%;
}

/* ── Compact density — reduced vertical padding ──────────────────────────────
   Add class "is-compact" to page-table-layout to opt in.
   Two rules cover both named (page-table) and custom table classes
   (ccr-table, prof-table, ic-table…).                                           */

/* Broad catch-all (0,2,1) — covers any table inside the compact layout */
.page-table-layout.is-compact th,
.page-table-layout.is-compact td {
  padding-top:    6px;
  padding-bottom: 6px;
}
/* Narrower (0,3,1) kept for page-table specificity vs. page-level overrides */
.page-table-layout.is-compact .page-table th,
.page-table-layout.is-compact .page-table td {
  padding-top:    6px;
  padding-bottom: 6px;
}
.page-table-layout.is-compact {
  gap: 16px;
}
.page-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-table-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.3px;
}
.page-table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.page-table-wrap {
  overflow-x: auto;
  width: fit-content;          /* la card épouse la table → bande pleine largeur, pas de blanc à droite */
  max-width: 100%;             /* mais ne dépasse jamais la zone de contenu (sinon scroll interne) */
  background: #fff;                                   /* gabarit : table en card */
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
}
/* ── Embedded dans un hub à onglets (ex. États financiers) ───────────────────
   La table vit déjà dans l'encadré du hub (fond, bordure, ombre, padding) : on
   retire le gabarit card de la table et le padding de page pour éviter la
   card-dans-card. La bande d'en-tête bleu-gris du thead suffit à délimiter. */
.page-table-layout.is-embedded {
  padding: 0;
  gap: 16px;
}
.page-table-layout.is-embedded .page-table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

/* ── Table de rapport embarquée dans une <Card> (hub Rapports standards) ──────
   Le wrap est `fit-content` par défaut (la table porte sa propre card standalone).
   Dans une Card, on veut au contraire que la table REMPLISSE la card : sinon
   rectangle étroit + blanc à droite, et coins carrés du thead qui jurent avec
   l'arrondi. width:100% → la table s'étire, la Card (overflow:hidden) rogne les
   coins. Aligné sur le gabarit BFRE/Ratio (.fwc-table width:100%). */
/* Gabarit partagé « card de rapport » (hub Rapports standards : Compte de résultat,
   Bilan…). La card ÉPOUSE la table (fit-content) : pas de blanc à droite quand peu
   de colonnes (le fond crème apparaît à droite d'une card plus petite) ; card plus
   large avec 12 mois. max-width:100% → si la table déborde du panneau, la card
   plafonne et son wrap scrolle. Marge intérieure mesurée autour de la table.
   Une seule définition, réutilisée via <Card className="report-card">. */
.report-card { width: fit-content; max-width: 100%; }
.report-card .std-card__body { padding: 14px 16px; }

.page-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.page-table thead tr {
  background: var(--color-surface-card);   /* en-tête de colonnes en texte simple + filet */
  border-bottom: 1px solid var(--color-border);
}
.page-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.page-table td {
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: middle;
}
.page-table tbody tr:last-child td { border-bottom: none; }
.page-table tbody tr:hover { background: #FAFAF9; }

.page-table-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.page-table-loading { color: var(--color-text-muted); font-size: 13px; }

/* Select inline direct (répartition charges indirectes) */
.ci-repartition-select {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text);
  background: transparent;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  outline: none;
  cursor: pointer;
}
.ci-repartition-select:hover { border-color: var(--color-value); }
.ci-repartition-select:focus { border-color: var(--color-value); background: var(--color-value-bg); }

/* Sélecteur d'année */
.year-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}
/* Badge version snapshot dans Effectif */
.hp-label-badge {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 20px;
  white-space: nowrap;
}

.year-selector select {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

/* Profit & Loss — deltas au-dessus du standard (EditableCell.css : page-table-layout,
   page-table-wrap, page-table, p-btn). On ne redéfinit ni la card, ni l'en-tête de
   tableau, ni les radii/couleurs : on réutilise les tokens d'index.css. */

/* ── Boutons "outil" (toggles) en complément de p-btn ───────────────────────── */
.pl-tool {
  background: var(--color-card);
  color: var(--color-text);
  border: 0.5px solid var(--color-border);
}
.pl-tool:hover { background: var(--stone-50); }

/* Sélecteur de niveau de lecture (segmenté) */
.pl-levels {
  display: inline-flex;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-card);
}
.pl-lvl {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border: none;
  border-left: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.pl-lvl:first-child { border-left: none; }
.pl-lvl:hover { background: var(--stone-50); }
.pl-lvl.is-active { background: var(--color-navy); color: #fff; }
.pl-tool--warn {
  background: var(--amber-light);
  border-color: var(--color-lock-border);
  color: var(--amber-dark);
}

/* ── Colonnes ────────────────────────────────────────────────────────────────
   Réutilise l'en-tête standard (page-table thead) ; on ne fait qu'aligner. */
.pl-table { white-space: nowrap; }
.pl-col-line { width: 300px; min-width: 260px; }
.page-table th.pl-col-num { text-align: right; min-width: 50px; }
.page-table th.pl-col-total { min-width: 68px; }
/* Colonnes mois resserrées pour voir toute l'année sans scroll */
.page-table.pl-table th, .page-table.pl-table td { padding-left: 9px; padding-right: 9px; padding-top: 5px; padding-bottom: 5px; }

.pl-line { text-align: left; }
.pl-mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; font-size: 12px; color: var(--color-text-muted); }

/* Compte : n° + désignation sous la reporting line (1ʳᵉ colonne, indenté) */
.pl-acc-cell { padding-left: 46px !important; white-space: normal; }
.pl-acc-desc { margin-left: 8px; color: var(--color-text-muted); }
.page-table td.pl-num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
/* Colonne Total = colonne phare (un cran plus foncé que sa ligne) */
.page-table td.pl-num--total { font-weight: 600; color: var(--color-navy); }

/* Total YTD = réel cumulé (mois clos), colonne phare en fin de tableau, séparée des mois */
.page-table th.pl-col-ytd,
.page-table td.pl-num--ytd { border-left: 2px solid var(--stone-300); }
.page-table th.pl-col-ytd { min-width: 68px; }
.page-table td.pl-num--ytd { font-weight: 600; color: var(--color-navy); }

/* Total FY = année pleine (actual + forecast) — total secondaire, ton atténué */
.page-table th.pl-col-fy { min-width: 64px; }
.page-table td.pl-num--fy {
  font-weight: 600;
  color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ════ Réel seul (États financiers) — cascade + comparatif Cumulé · N-1 · Écart ══
   Couleurs charte (terracotta = accent 2026/%CAN ; sage = écart positif ;
   navy = soldes/pivot). Fonds blancs partout (y compris au niveau compte) :
   la hiérarchie est portée par la typographie, l'indentation et les filets. */
.pl-actuals {
  --pl-accent: var(--color-terracotta);
  --pl-balance: var(--color-navy);
  --pl-detail: #6E6757;
  --pl-muted: #8A8170;
  --pl-muted2: #A39A86;
  --pl-pos: var(--color-sage);
  --pl-band-2025: var(--color-card);
  --pl-band-net: var(--color-card);
  --pl-band-detail: #FDFBF7;   /* sous-bloc compte : crème très léger (lisibilité du détail déplié) */
  --pl-hairline: var(--color-border);
}

/* NB : préfixe `.page-table.pl-actuals` (2 classes) pour battre en spécificité
   les styles globaux de page-table (fond d'en-tête, filets, totaux navy). */

/* En-tête NEUTRE : pas de fond bleu-gris hérité, filets fins seulement. */
.page-table.pl-actuals thead tr { background: none; border-bottom: none; }
.page-table.pl-actuals thead th { white-space: nowrap; background: none; }
/* Ligne 1 (groupes) : gras, lisible (navy). */
.page-table.pl-actuals thead tr.pl-grouphead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
  padding: 7px 7px 5px;
  border-bottom: 0.5px solid var(--pl-hairline);
}
.page-table.pl-actuals thead tr.pl-grouphead th.pl-col-line,
.page-table.pl-actuals thead tr.pl-grouphead th.pl-spacer { border: none; }
.page-table.pl-actuals thead tr.pl-grouphead th.pl-grp-cumul { border-bottom: 1px solid var(--color-text); }   /* noir fin */
/* Ligne 2 (colonnes) : semi-gras muté, casse normale (mois Jan/Fév…). */
.page-table.pl-actuals thead tr.pl-colhead th {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  padding: 5px 7px;
  border-bottom: 0.5px solid var(--pl-hairline);
  text-align: right;
}
.page-table.pl-actuals thead tr.pl-colhead th.pl-col-line { text-align: left; }
/* Colonne phare « Cumulé » mise en évidence (fond bleu-gris charte), en-têtes en noir. */
.page-table.pl-actuals thead .pl-cumul-chf,
.page-table.pl-actuals thead .pl-cumul-pct { color: var(--color-text); }
/* BANDEAU : deux teintes, jamais trois (2026-08-20). La rangée de bandeaux ne
   porte QUE réel (ardoise claire) et prévisionnel (ardoise pleine) ; « Année
   N » y était une troisième teinte voisine, si bien que la frontière ne se
   voyait plus. Elle devient un libellé neutre, séparé par un filet. La colonne
   cumulée garde son surlignage `accent-tint` sur l'en-tête de colonne et le
   corps — c'est une mise en évidence de colonne (.lk-hi), pas un bandeau. */
.page-table.pl-actuals thead .pl-grp-cumul {
  background: none !important;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
}
.page-table.pl-actuals thead .pl-cumul-chf,
.page-table.pl-actuals thead .pl-cumul-pct,
.page-table.pl-actuals tbody td.pl-cumul-chf,
.page-table.pl-actuals tbody td.pl-cumul-pct { background: var(--color-accent-tint) !important; }
/* Filet noir fin transversal sous toute la ligne d'en-tête de colonnes. */
.page-table.pl-actuals thead tr.pl-colhead th,
.page-table.pl-actuals thead tr.pl-colhead th.pl-spacer { border-bottom: 1px solid var(--color-text) !important; }

/* Colonnes séparatrices : largeur fixe, vides → l'espace entre les 4 blocs. */
.page-table.pl-actuals .pl-spacer { width: 18px; min-width: 18px; padding: 0; border: none !important; background: none; }

/* Bloc 2025 : fond crème sur le CORPS uniquement (en-tête sans fond). */
.page-table.pl-actuals tbody .pl-blk2025 { background: var(--pl-band-2025); }
.page-table.pl-actuals thead .pl-blk2025 { background: none; }

/* Espacement & alignement des colonnes chiffrées. */
.page-table.pl-actuals td.pl-num,
.page-table.pl-actuals th.pl-col-num { text-align: right; padding: 7px 7px; }
.page-table.pl-actuals td.pl-line,
.page-table.pl-actuals th.pl-col-line { text-align: left; padding: 7px 12px 7px 0; }
.page-table.pl-actuals .pl-cumul-pct,
.page-table.pl-actuals .pl-2025-pct,
.page-table.pl-actuals .pl-ecart-pct { font-size: 11px; }

/* Lignes : AUCUN filet entre détails ; filet fin seulement sur les soldes. */
.page-table.pl-actuals tbody td { border-top: none; border-bottom: none; }
.page-table.pl-actuals tbody tr.pl-row--subtotal td { border-top: 0.5px solid var(--pl-hairline); }
/* Résultat net = fin du tableau : filet gras navy en dessous pour clore la lecture. */
.page-table.pl-actuals tbody tr.pl-row--grand td { border-top: 0.5px solid var(--pl-hairline); border-bottom: 2px solid var(--color-text); }
.page-table.pl-actuals tbody tr.pl-row--grand td.pl-spacer { border-bottom: 2px solid var(--color-text) !important; }

/* Texte par niveau — TOUTE la ligne dans une seule couleur (cohérence) :
   navy 500 pour le CA net + les soldes intermédiaires ; noir pour les en-têtes
   de catégorie (Charges de matières, de personnel…) afin de les distinguer des
   lignes de détail dépliées ; brun (--pl-detail) réservé au détail. */
.page-table.pl-actuals tbody tr.pl-row--sectiontotal td { color: var(--color-text); font-weight: 400; background: none; border-top: none; }
.page-table.pl-actuals tbody tr.pl-row--line td { color: var(--pl-detail); font-weight: 400; background: none; border-top: none; }
.page-table.pl-actuals tbody tr.pl-row--acc td { color: var(--pl-muted); font-weight: 400; font-size: 11px; background: var(--pl-band-detail); }
/* Sous-bloc compte : fond crème continu (y compris les cellules N-1, sinon elles
   repassent en blanc), % CAN cumulé en gris atténué. Colonnes 2025/écart vides. */
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-blk2025 { background: var(--pl-band-detail); }
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-cumul-pct { color: var(--pl-muted2); }
/* N° de compte en colonne tabulaire fixe + filet vertical d'indentation
   (gouttière 20px, contenu à +13px), pas de filet horizontal entre comptes. */
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-acc-cell {
  padding-left: 33px !important;
  position: relative;
}
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-acc-cell::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  border-left: 0.5px solid #E7E0D2;
}
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-acc-cell .pl-mono {
  display: inline-block;
  width: 34px;
}
.page-table.pl-actuals tbody tr.pl-row--headline td,
.page-table.pl-actuals tbody tr.pl-row--subtotal td,
.page-table.pl-actuals tbody tr.pl-row--grand td { color: var(--pl-balance); font-weight: 500; font-size: 13px; background: none; }
/* Soldes sans chevron : on les décale de la largeur du chevron (14px) pour
   aligner leur libellé sur les lignes à chevron (ex. Chiffre d'affaires net). */
.page-table.pl-table tbody tr.pl-row--subtotal td.pl-line,
.page-table.pl-table tbody tr.pl-row--grand td.pl-line { padding-left: 14px; }

/* % CAN : couleur de la ligne par défaut ; terracotta SEULEMENT si négatif.
   (Les CHF et mois gardent la couleur de ligne même négatifs.) */
.page-table.pl-actuals tbody tr td.pl-cumul-pct.pl-neg,
.page-table.pl-actuals tbody tr td.pl-2025-pct.pl-neg { color: var(--pl-accent); }
/* Écart : vert si positif, terracotta si négatif. */
.page-table.pl-actuals tbody tr td.pl-ecart-chf,
.page-table.pl-actuals tbody tr td.pl-ecart-pct { color: var(--pl-muted); }
.page-table.pl-actuals tbody tr td.pl-ecart-chf.pl-pos,
.page-table.pl-actuals tbody tr td.pl-ecart-pct.pl-pos { color: var(--pl-pos); }
.page-table.pl-actuals tbody tr td.pl-ecart-chf.pl-neg,
.page-table.pl-actuals tbody tr td.pl-ecart-pct.pl-neg { color: var(--pl-accent); }
/* La colonne 2025 garde son fond crème même sur les lignes de solde. */
.page-table.pl-actuals tbody td.pl-blk2025 { background: var(--pl-band-2025); }

/* Résultat net : fond discret. Hover des lignes agrégées. */
.page-table.pl-actuals tbody tr.pl-row--grand td { background: var(--pl-band-net); }
.page-table.pl-actuals tbody tr.pl-row--grand td.pl-blk2025 { background: var(--pl-band-2025); }
.page-table.pl-actuals tbody tr.pl-collapsible:hover td { background: var(--stone-100); }
.page-table.pl-actuals tbody tr.pl-collapsible:hover td.pl-blk2025 { background: var(--stone-100); }

/* ── Sous-en-tête Actual / Forecast (sous les mois) ──────────────────────────── */
.page-table thead tr.pl-subhead-af th {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
/* réel = ardoise (accent), prév. = amber. Le bleu reste réservé à la saisie. */
.page-table thead tr.pl-subhead-af th.pl-af--a { color: var(--color-accent); }
.page-table thead tr.pl-subhead-af th.pl-af--f { color: var(--color-amber); }

/* Frontière réel | prévision : un seul trait vertical net au 1ᵉʳ mois prévisionnel
   (pl-fcedge), au lieu d'un voile ambré sur toute la zone. Plus minimaliste. */
.page-table th.pl-fcedge,
.page-table td.pl-fcedge { border-left: 1px solid var(--stone-400); }

/* Cellule de saisie forecast (éditable, charte : bleu saisie) */
.pl-edit-cell--forecast { color: var(--color-input); font-weight: 500; }

.pl-td-muted { color: var(--color-text-muted); }

/* ── Hiérarchie des lignes : minimaliste — typographie + retrait + filets fins,
   sans aplats de couleur. Le poids et l'indentation portent la hiérarchie ;
   les sous-totaux se lisent à un filet au-dessus (convention comptable).        */

/* Comptes (détail) — texte atténué, fond blanc */
.page-table tbody tr.pl-row--acc td { background: var(--color-card); color: var(--color-text-muted); }
.pl-row--acc .pl-num { color: var(--color-text); font-weight: 400; }

/* Lignes de reporting (détail sous une catégorie) — libellé atténué, fond blanc */
.page-table tbody tr.pl-row--line td { font-weight: 400; background: transparent; }
.page-table tbody tr.pl-row--line td.pl-line { color: var(--color-text-muted); }
.pl-collapsible { cursor: pointer; }

/* Chevron SVG (identique au Bilan), en couleur du texte, pivote à l'ouverture.
   Règles GÉNÉRIQUES (réel ET prévisionnel — alignées le 2026-08-11 sur la vue
   Rapports, à la demande d'Olivier). */
.pl-caret {
  display: inline-block;
  width: 16px;
  color: var(--color-text-muted);
  font-size: 9px;
  cursor: pointer;
}
.pl-table .pl-chev {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: var(--color-text);
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.pl-table .pl-chev.is-open { transform: rotate(90deg); }
/* Chevron discret : caché au repos, révélé au survol de la ligne ou quand la
   rubrique est déjà ouverte. L'espace (16px de .pl-caret) reste réservé → aucun
   décalage de libellé. Lecture plus épurée : au repos, seules les lignes ouvertes
   montrent leur flèche. */
.page-table.pl-table tbody tr.pl-collapsible .pl-chev {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.page-table.pl-table tbody tr.pl-collapsible:hover .pl-chev,
.page-table.pl-table tbody tr.pl-collapsible .pl-chev.is-open {
  opacity: 1;
}
/* Titre du tableau (« Compte de résultat ») : sur la rangée Mois N (vue
   réelle) ou en tête de colonne (prévisionnel) — navy, casse normale. */
.page-table thead th.pl-th-title {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy);
}

.pl-count {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--stone-150);
  border-radius: 999px;
  padding: 1px 6px;
}

/* Indentation hiérarchique : catégorie → lignes → comptes */
.pl-row--line td.pl-line { padding-left: 28px; }

/* En-tête de catégorie (Chiffre d'affaires, Charges de matières…) — navy, filet fin au-dessus */
.page-table tbody tr.pl-row--sectiontotal td,
.page-table tbody tr.pl-row--sectiontotal:hover td {
  font-weight: 600;
  color: var(--color-navy);
  background: transparent;
  border-top: 1px solid var(--color-border);
}

/* Marges intermédiaires (Marge brute, EBITDA, EBIT, RAI) — navy gras, filet au-dessus */
.page-table tbody tr.pl-row--subtotal td,
.page-table tbody tr.pl-row--subtotal:hover td {
  font-weight: 700;
  color: var(--color-navy);
  background: transparent;
  border-top: 1px solid var(--stone-300);
}

/* Résultat net — total fort : double filet navy (au-dessus + dessous) */
.page-table tbody tr.pl-row--grand td,
.page-table tbody tr.pl-row--grand:hover td {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-navy);
  background: transparent;
  border-top: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

/* ── Lignes de pourcentage de marge (sous les sous-totaux) ───────────────────── */
.page-table tbody tr.pl-row--pct td { background: transparent; }
.pl-pct-label {
  padding-left: 28px !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.page-table td.pl-num--pct {
  text-align: right;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Cellules éditables (mode déverrouillé) — bleu saisie (charte) ───────────── */
.pl-edit-cell {
  display: inline-block;
  min-width: 48px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-value);
  font-weight: 500;
}
.pl-edit-cell:hover { background: var(--color-value-bg); }
.pl-edit-input {
  font-family: inherit;
  font-size: 12px;
  width: 84px;
  text-align: right;
  border: 1px solid var(--color-value);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--color-value-bg);
  color: var(--color-text);
  outline: none;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Lignes d'ajustement (corrections manuelles) — orange ambre ──────────────── */
.page-table tbody tr.pl-row--adjustment td {
  background: #FFFBEB;
  border-bottom: 0.5px dashed #F59E0B;
}
.pl-adj-cell { padding-left: 46px !important; white-space: normal; }
.pl-adj-ref {
  display: inline-block;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #92400E;
  background: #FDE68A;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 6px;
}
.pl-adj-desc { font-size: 12px; color: #78350F; }
.pl-adj-memo { font-size: 11px; color: #B45309; font-style: italic; }
.page-table td.pl-num--adj {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: #B45309;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.pl-adj-badge {
  background: #FDE68A;
  color: #92400E;
}

/* Lignes "Non mappé" — warning */
.page-table tbody tr.pl-row--unmapped td { background: var(--amber-light); }
.page-table tbody tr.pl-row--unmapped.pl-row--line td { background: var(--color-lock-bg); color: var(--color-lock-text); }

/* ── Brush mode ──────────────────────────────────────────────────────────────── */
.pl-brushbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-accent-tint-strong);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--color-text);
}
.pl-fc-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-accent-tint-strong);
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text);
}
.pl-fc-legend-intro {
  font-weight: 600;
  margin-bottom: 2px;
}
.pl-fc-legend-item b {
  display: inline-block;
  min-width: 32px;
  color: var(--color-navy);
}

/* Popup « Mode » — légende des modes de prévision (au clic sur le bouton Mode). */
.pl-fc-modes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 25, 0.28);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 90px;
  z-index: 1000;
}
.pl-fc-modes-pop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(620px, 92vw);
  padding: 14px 18px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(26, 18, 25, 0.18);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text);
}
.pl-fc-modes-pop__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 4px;
}
.pl-fc-modes-pop__close {
  border: none;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 2px;
}
.pl-fc-modes-pop__close:hover { color: var(--color-text); }

.pl-brush-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
}
.pl-brush-chip.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.pl-pickable { cursor: pointer; }
.pl-pickable:hover td { background: var(--color-accent-tint); }
.page-table tbody tr.pl-brush-active td {
  background: var(--color-accent-tint-strong);
  box-shadow: inset 3px 0 0 var(--color-navy);
}
.pl-paintable { cursor: pointer; }
.pl-paintable:hover td { background: var(--color-value-bg); box-shadow: inset 3px 0 0 var(--color-value); }

/* ── Drag & drop ─────────────────────────────────────────────────────────────── */
.pl-draggable { cursor: grab; }
.pl-draggable:active { cursor: grabbing; }
.pl-dragging td { opacity: 0.4; }
/* Cible de dépôt valide (reporting line ou « Non mappé ») */
.page-table tbody tr.pl-droptarget td {
  background: var(--sage-light) !important;
  box-shadow: inset 0 0 0 2px var(--color-sage);
}

/* ── Mapping builder (card standard) ─────────────────────────────────────────── */
.pl-mapwrap, .pl-structwrap {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  overflow: hidden;
}
.pl-map-head {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-navy);
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
}
.pl-map-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-map-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  border-bottom: 0.5px solid var(--color-border);
}
.pl-map-table td { padding: 6px 14px; border-bottom: 0.5px solid var(--color-border); }
.pl-map-table tr:last-child td { border-bottom: none; }
.pl-map-unmapped { background: var(--amber-light); }
.pl-muted { color: var(--color-text-muted); font-style: italic; }
.pl-map-table select, .pl-struct-input {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
}

/* ── Éditeur de structure ────────────────────────────────────────────────────── */
.pl-struct-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  padding: 14px;
}
.pl-struct-sec {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--stone-50);
}
.pl-struct-sec-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-navy);
  margin-bottom: 8px;
}
.pl-struct-sec-input {
  width: 100%;
  border: 0.5px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 3px 6px;
}
.pl-struct-sec-input:hover { border-color: var(--color-border); background: var(--color-card); }
.pl-struct-sec-input:focus { border-color: var(--color-navy); background: var(--color-card); outline: none; }

.pl-struct-line, .pl-struct-add { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.pl-struct-input { flex: 1 1; min-width: 0; }
.pl-struct-ic {
  font-size: 11px;
  width: 22px;
  height: 26px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text-muted);
  cursor: pointer;
}
.pl-struct-ic:disabled { opacity: 0.3; cursor: default; }
.pl-struct-del { color: var(--terracotta-dark); font-size: 15px; }
.pl-struct-addbtn {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
}
.pl-struct-addbtn:disabled { opacity: 0.4; cursor: default; }

/* ── Tag sémantique (lignes protégées) ──────────────────────────────────────── */
.pl-struct-role-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--stone-100);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Badge mode de forecast (clic = mode suivant) ───────────────────────────── */
.pl-fc-mode {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 34px;
  height: 20px;
  padding: 0 4px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* Liste déroulante de mode de prévision (remplace le badge cyclique). */
.pl-fc-select {
  font-family: var(--font-body);
  font-size: 11px;
  height: 22px;
  padding: 0 4px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
  max-width: 140px;
}
.pl-fc-select:focus { outline: none; border-color: var(--color-navy); }
/* Manuel → fond jaune (cohérent avec l'ancien badge MAN). */
.pl-fc-select--man { background: var(--amber-light); border-color: var(--amber-light); color: var(--amber-dark); }
/* Petit bouton de config (taux % / cible) à côté du select. */
.pl-fc-edit {
  margin-left: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  height: 22px;
  padding: 0 6px;
  border: 0.5px solid var(--color-navy);
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-card);
  cursor: pointer;
  white-space: nowrap;
}
.pl-fc-mode:hover { border-color: var(--color-navy); color: var(--color-navy); }
.pl-fc-mode.is-set {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-card);
}

/* ── Badge forecast inline (après le libellé de la reporting line) ──────────── */
.pl-fc-inline {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
}
/* Popover ancré à gauche du badge (cellule libellé = bord gauche du tableau) */
.pl-fc-inline .pl-fc-pop { left: 0; right: auto; }

.pl-fc-wrap { position: relative; display: inline-block; }

.pl-fc-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  width: 22px;
  height: 22px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s, color 0.15s;
}
.pl-fc-btn:hover,
.pl-fc-btn.is-open {
  border-color: var(--color-navy);
  color: var(--color-navy);
  background: var(--color-card);
}
/* Taux appliqué mémorisé → bouton large + navy (même langage que .pl-fc-mode.is-set) */
.pl-fc-btn.is-set {
  width: auto;
  min-width: 34px;
  padding: 0 4px;
  font-size: 10px;
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-card);
}

/* Mode manuel (MAN) — fond jaune : on sait que la ligne est saisie à la main. */
.pl-fc-mode--man,
.pl-fc-btn--man {
  background: var(--amber-light);
  border-color: var(--amber-light);
  color: var(--amber-dark);
}
.pl-fc-mode--man:hover,
.pl-fc-btn--man:hover { border-color: var(--amber-dark); color: var(--amber-dark); }
.pl-fc-btn--man {
  width: auto;
  min-width: 38px;
  padding: 0 4px;
  font-size: 10px;
}

/* Bouton « Repasser en manuel » dans le popover CS / Impôts */
.pl-fc-manual {
  margin-top: 6px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 11px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text-muted);
  padding: 4px 6px;
  cursor: pointer;
}
.pl-fc-manual:hover { border-color: var(--color-navy); color: var(--color-navy); }

/* Sélecteur de ligne de base (méthode % d'une autre ligne) */
.pl-fc-base {
  font-family: var(--font-body);
  font-size: 12px;
  max-width: 220px;
  height: 26px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
}
.pl-fc-base:focus { border-color: var(--color-navy); outline: none; }

.pl-fc-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 10px 12px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-fc-pop-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pl-fc-constate {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}
.pl-fc-pop-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pl-fc-input {
  font-family: var(--font-body);
  font-size: 13px;
  width: 80px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-navy);
  text-align: right;
}
.pl-fc-input:focus { outline: none; border-color: var(--color-navy); }
.pl-fc-pct {
  font-size: 13px;
  color: var(--color-text-muted);
}
.pl-fc-apply {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: #fff;
  cursor: pointer;
}
.pl-fc-apply:hover { opacity: 0.88; }
.pl-fc-apply:disabled { opacity: 0.4; cursor: default; }

/* ── KPI taux CS constaté (sous le tableau) ─────────────────────────────────── */
.pl-kpi-taux {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 6px 8px 2px;
  letter-spacing: 0.01em;
}

/* ── Groupe stock prévisionnel : Coût des ventes (cible) → Achats → Sous-traitance
   → Variation de stock. Liseré ardoise à gauche pour montrer qu'ils vont ensemble. */
.pl-table .pl-stockgrp > td:first-child { position: relative; }
.pl-table .pl-stockgrp > td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--color-accent-soft);
}
.pl-table .pl-stockgrp--first > td:first-child::before { top: 3px; border-radius: 2px 2px 0 0; }
.pl-table .pl-stockgrp--last  > td:first-child::before { bottom: 3px; border-radius: 0 0 2px 2px; }

/* Ligne « Coût des ventes » — total mémo (non sommé) sous la Variation de stock. */
.pl-row--cogstarget { background: var(--color-accent-tint); }
.pl-row--cogstarget > td { border-top: 1px solid var(--color-accent-soft); font-weight: 600; }
.pl-cogstarget-lbl { color: var(--color-navy); font-weight: 600; }
.pl-cogstotal-num { color: var(--color-navy); }
.pl-cogstotal-num.pl-neg { color: var(--color-terracotta); }

/* Icône ↔ « lié au stock » sur Achats / Sous-traitance. */
.pl-stock-ic {
  display: inline-block; margin-right: 4px; color: var(--color-accent);
  font-weight: 700; cursor: help;
}

/* Badge « calculée » sur la Variation de stock dérivée. */
.pl-calc-badge {
  margin-left: 8px; padding: 1px 6px; border-radius: 8px; font-size: 0.66rem;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* Valeur venue d'un autre module : plus d'italique (2026-08-20). Le bandeau
   prévisionnel et la colonne « règle » disent déjà d'où sort le chiffre — un
   même attribut typographique servait ici trois usages, donc aucun. */
.pl-num--calc { }
.pl-row--line.pl-stockgrp--last .pl-num--calc { color: var(--color-text-muted); }

/* Driver « Coût des ventes » : chip + popover. */
.pl-cogscfg { position: relative; display: inline-block; margin-left: 8px; }
.pl-cogscfg-btn {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  color: var(--color-text-muted); border-radius: 6px; padding: 1px 7px;
  font-size: 0.72rem; cursor: pointer;
}
.pl-cogscfg-btn.is-set { color: var(--color-accent); border-color: var(--color-accent-soft); }
.pl-cogspop-overlay { position: fixed; inset: 0; z-index: 60; }
.pl-cogspop {
  position: absolute; z-index: 61; margin-top: 4px; width: 320px;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 12px;
  font-style: normal;
}
.pl-cogspop__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pl-cogspop__close { border: none; background: none; cursor: pointer; font-size: 0.9rem; color: var(--color-text-muted); }
.pl-cogspop__modes { display: flex; gap: 4px; margin-bottom: 10px; }
.pl-cogspop__mode {
  flex: 1 1; border: 1px solid var(--color-border); background: var(--color-surface-page);
  border-radius: 6px; padding: 4px; font-size: 0.72rem; cursor: pointer; color: var(--color-text-muted);
}
.pl-cogspop__mode.is-on { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.pl-cogspop__hint { font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 6px; }
.pl-cogspop__line { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 0.8rem; }
.pl-cogspop__line label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pl-cogspop__line.is-on { font-weight: 600; }
.pl-cogspop__rate input { width: 56px; padding: 2px 4px; border: 1px solid var(--color-field-focus); border-radius: 4px; text-align: right; }
.pl-cogspop__single label { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; color: var(--color-text-muted); }
.pl-cogspop__single input { padding: 4px 6px; border: 1px solid var(--color-field-focus); border-radius: 4px; }
.pl-cogspop__foot { display: flex; justify-content: space-between; margin-top: 12px; }
.pl-cogspop__clear { border: none; background: none; color: var(--color-terracotta); cursor: pointer; font-size: 0.76rem; }
.pl-cogspop__save { border: none; background: var(--color-accent); color: #fff; border-radius: 6px; padding: 4px 14px; cursor: pointer; font-size: 0.78rem; }

/* ── Barre de commande (écran unique du compte de résultat, 2026-08-10) ───── */
.pl-cmdbar__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px;
}
.pl-cmdbar__ctx { display: inline-flex; align-items: center; gap: 6px; }
.pl-cmdbar__info { font-size: 11px; color: var(--color-text-muted); }
.pl-cmdbar__filters { display: inline-flex; gap: 5px; flex-wrap: wrap; }
/* Filtres RONDS : ils restreignent la vue, ils ne changent pas d'état —
   la forme les distingue des segments carrés vue/mode. */
.pl-fpill {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  border-radius: 999px; padding: 3px 11px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--color-text-muted);
}
.pl-fpill.is-on {
  border-color: var(--color-accent); color: var(--color-accent);
  background: var(--color-accent-tint); font-weight: 600;
}
/* « Une à la fois » : bouton à état enfoncé. */
.pl-accordion.is-on {
  background: var(--color-accent-tint-strong);
  color: var(--color-accent); border-color: var(--color-accent);
}

/* Les filtres vivent dans le bandeau de card (slot titre) : pas de graisse ni
   de style de titre — ce sont des boutons. */
.std-card__title .pl-fpill { font-weight: 400; }
.std-card__title .pl-fpill.is-on { font-weight: 600; }

/* Bandeaux Réalisé / Prévisionnel (2026-08-16) — mêmes couleurs que les cartes
   du Plan services : sable ardoise clair pour le réel, ardoise pleine pour le
   prévisionnel. */
.pl-bands th { padding: 0 !important; border: 0 !important; background: transparent !important; }
.pl-bands .pl-band {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 2px 8px !important; height: 18px;
}
.pl-bands .pl-band--real { background: var(--color-accent-tint-strong) !important; color: var(--color-on-tint); border-radius: 6px 0 0 6px; }
.pl-bands .pl-band--fore { background: var(--color-accent) !important; color: #fff; border-radius: 0 6px 6px 0; }
/* Total cumulé posé juste après le dernier mois clos : filet de fermeture. */
.page-table.pl-table .pl-ytd-inline { border-right: 1px solid var(--color-text) !important; }

/* Colonne « % CAN » : même taille sur TOUTES les lignes (les sous-totaux
   l'affichaient plus gros que les lignes de détail — 2026-08-16). */
.page-table.pl-table tbody td.pl-cumul-pct,
.page-table.pl-actuals tbody tr.pl-row--subtotal td.pl-cumul-pct,
.page-table.pl-actuals tbody tr.pl-row--grand td.pl-cumul-pct,
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-cumul-pct { font-size: 11.5px; font-weight: 400; }
/* Vue unifiée : « À venir » (Σ des mois prévisionnels) et groupe Prévisionnel. */
.page-table.pl-table .pl-col-togo, .page-table.pl-table td.pl-num--togo { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.page-table.pl-actuals thead tr.pl-grouphead th.pl-grp-fore { color: var(--color-accent); }

/* Bloc ANNÉE (À venir · Total) : même traitement que le bloc CUMULÉ — aplat
   ardoise clair et filets d'encadrement (2026-08-16). */
.page-table.pl-actuals thead th.pl-annual,
.page-table.pl-actuals tbody td.pl-annual { background: var(--color-accent-tint) !important; }
.page-table.pl-actuals thead th.pl-annual--first,
.page-table.pl-actuals tbody td.pl-annual--first { border-left: 1px solid var(--color-text) !important; }
.page-table.pl-actuals thead th.pl-annual--last,
.page-table.pl-actuals tbody td.pl-annual--last { border-right: 1px solid var(--color-text) !important; }
/* Le bloc cumulé se ferme aussi à gauche, comme en vue Réel. */
.page-table.pl-actuals thead th.pl-cumul-chf,
.page-table.pl-actuals tbody td.pl-cumul-chf { border-left: 1px solid var(--color-text) !important; }

/* Blocs de synthèse : l'aplat suffit, pas de bordure noire (2026-08-16).
   Le Total de l'année est la figure qu'on cherche → en gras. */
.page-table.pl-actuals thead th.pl-annual--first,
.page-table.pl-actuals tbody td.pl-annual--first,
.page-table.pl-actuals thead th.pl-annual--last,
.page-table.pl-actuals tbody td.pl-annual--last,
.page-table.pl-actuals thead th.pl-cumul-chf,
.page-table.pl-actuals tbody td.pl-cumul-chf,
.page-table.pl-table .pl-ytd-inline { border-left: 0 !important; border-right: 0 !important; }
/* Total 2026 : la figure recherchée du bloc — en gras, en-tête comprise, et sur
   TOUTES les rangées (les sous-totaux la remettaient en graisse normale). */
.page-table.pl-actuals thead th.pl-annual--last,
.page-table.pl-actuals tbody td.pl-annual--last,
.page-table.pl-actuals tbody tr td.pl-annual--last,
.page-table.pl-actuals tbody tr.pl-row--subtotal td.pl-annual--last,
.page-table.pl-actuals tbody tr.pl-row--grand td.pl-annual--last { font-weight: 700 !important; }

/* Règles de prévision (2026-08-16) : alignées à DROITE de la colonne libellé —
   les noms de lignes restent alignés entre eux — en bleu de saisie et sans
   cadre, comme toute valeur éditable de la charte. */
.page-table.pl-table tbody td.pl-line { display: flex; align-items: center; gap: 6px; }
/* Colonne des RÈGLES : largeur fixe en bout de cellule libellé, contenu calé à
   gauche — sinon chaque pastille démarre à un x différent selon la longueur de
   son intitulé (retour Olivier 2026-08-17). */
.page-table.pl-table tbody td.pl-line .pl-fc-inline {
  margin-left: auto; width: 168px; flex: 0 0 168px; justify-content: flex-start;
}
.page-table.pl-table tbody td.pl-line .pl-fc-inline .pl-fc-wrap { display: flex; width: 100%; gap: 4px; }
.page-table.pl-table tbody td.pl-line .pl-fc-inline .pl-fc-select {
  flex: 1 1; min-width: 0; max-width: none;
}
.page-table.pl-table .pl-fc-select,
.page-table.pl-table .pl-fc-select--man {
  border: 0 !important;
  background: transparent !important;
  color: var(--color-field-focus) !important;
  padding-right: 2px;
}
.page-table.pl-table .pl-fc-select:focus { outline: none; box-shadow: none; }

/* Poignée de reclassement : la cellule du libellé d'un compte se glisse. */
.page-table.pl-table tbody tr.pl-draggable td.pl-acc-cell { cursor: grab; }
.page-table.pl-table tbody tr.pl-draggable td.pl-acc-cell:active { cursor: grabbing; }

/* Sous-totaux de GROUPE des charges directes (Coûts des produits vendus ·
   Autres coûts directs) : plus discrets que les sous-totaux de cascade, en
   retrait pour marquer le second niveau. */
/* En-tête de groupe : ni gras ni retrait particulier — il se lit comme une
   rubrique (Chiffre d'affaires net, Charges directes), tous les libellés du
   compte de résultat partageant la même gouttière (2026-08-17). */
.page-table.pl-table tbody tr.pl-row--group td,
.page-table.pl-table tbody tr.pl-row--group:hover td { font-weight: 400; color: var(--color-text); }
.page-table.pl-table tbody tr.pl-row--group td.pl-line { padding-left: 0; }
/* En-tête de groupe : filet AU-DESSUS inutile (il ouvre le bloc, il ne le
   clôt pas) — le trait des sous-totaux de cascade ne s'applique pas ici. */
.page-table.pl-table tbody tr.pl-row--group td { border-top: 0; }
/* Lignes DANS un groupe : en retrait sous leur en-tête. */
/* Lignes d'un groupe : même gouttière que toute autre ligne de détail. */
.page-table.pl-table tbody tr.pl-row--ingroup td.pl-line { padding-left: 28px; }
/* Fond BLANC comme une rubrique (Chiffre d'affaires net) — plus d'aplat
   teinté : le groupe se lit à son libellé et à son chevron (2026-08-17). */
.page-table.pl-table tbody tr.pl-row--group.pl-collapsible { cursor: pointer; }
.page-table.pl-table tbody tr.pl-row--group .pl-caret { margin-right: 4px; }
/* Chevron STRICTEMENT au survol : contrairement aux rubriques, un groupe est
   ouvert par défaut — garder sa flèche visible reviendrait à l'afficher en
   permanence. */
.page-table.pl-table tbody tr.pl-row--group .pl-chev,
.page-table.pl-table tbody tr.pl-row--group .pl-chev.is-open { opacity: 0; }
.page-table.pl-table tbody tr.pl-row--group:hover .pl-chev,
.page-table.pl-table tbody tr.pl-row--group:hover .pl-chev.is-open { opacity: 1; }

/* Balance Sheet — deltas au-dessus du standard (EditableCell.css). */

.bs-tool {
  background: var(--color-card);
  color: var(--color-text);
  border: 0.5px solid var(--color-border);
}
.bs-tool:hover { background: var(--stone-50); }

.bs-levels {
  display: inline-flex;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-card);
}
.bs-lvl {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border: none;
  border-left: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.bs-lvl:first-child { border-left: none; }
.bs-lvl:hover { background: var(--stone-50); }
.bs-lvl.is-active { background: var(--color-navy); color: #fff; }

/* ── Colonnes ─────────────────────────────────────────────────────────────── */
.bs-table { white-space: nowrap; }
.bs-col-line { width: 300px; min-width: 260px; }
.page-table th.bs-col-num { text-align: right; min-width: 50px; }
.page-table th.bs-col-total { min-width: 68px; }
.page-table.bs-table th, .page-table.bs-table td { padding-left: 9px; padding-right: 9px; }

.bs-line { text-align: left; }
.bs-mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; font-size: 12px; color: var(--color-text-muted); }
.bs-acc-cell { padding-left: 46px !important; white-space: normal; }
.bs-acc-desc { margin-left: 8px; color: var(--color-text-muted); }

.page-table td.bs-num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Forecast */
.bs-mforecast { color: var(--color-text-muted); }
.bs-td-muted { color: var(--color-text-muted); }

/* Lignes */
.bs-row { border-bottom: 0.5px solid var(--color-border); }
.bs-row--line {
  background: #FAFAF9;
  font-weight: 400;          /* ligne de reporting : normal (vs groupe en gras) */
}
/* Léger retrait du libellé pour marquer la hiérarchie groupe › ligne (~1 largeur de « A »,
   sans dépasser). td.bs-line pour battre `.page-table.bs-table td` (padding-left 9px). */
.bs-row--line > td.bs-line { padding-left: 18px; }
.bs-row--line.bs-pickable { cursor: crosshair; }
.bs-row--line.bs-brush-active { background: #dce9ff; outline: 2px solid var(--color-input); }
.bs-row--line.bs-collapsible { cursor: pointer; }
.bs-row--line.bs-droptarget { background: #cfe8ff; }
.bs-row--acc { font-size: 13px; color: var(--color-text-muted); }
.bs-row--acc.bs-draggable { cursor: grab; }
.bs-row--acc.bs-dragging { opacity: 0.4; }
.bs-row--acc.bs-paintable { cursor: crosshair; }
.bs-row--unmapped { background: #fff8f0; }
/* Rapport : « aucun compte non alloué » — discret (confirme l'absence). */
.bs-table.bs-actuals tbody tr.bs-row--unmapped-none td {
  background: none; color: var(--bs-muted2); font-size: 11px; font-style: italic;
  padding: 8px 9px; border: none;
}

/* En-tête de section */
.bs-row--sectiontotal {
  background: #F5F5F4;
  font-weight: 700;
  border-top: 1.5px solid #E7E5E4;
}
.bs-row--sectiontotal.bs-collapsible { cursor: pointer; }

/* Sous-totaux */
.bs-row--subtotal {
  background: #EFEFEE;
  font-weight: 700;
  border-top: 1.5px solid #D6D3D1;
  font-size: 13px;
}
.bs-row--grand {
  background: var(--color-navy);
  color: #fff;
  font-size: 14px;
}
/* Spécificité : forcer la couleur + fond navy sur chaque cellule du grand total */
.page-table .bs-row--grand td,
.page-table .bs-row--grand td.bs-num,
.page-table .bs-row--grand td.bs-num.bs-num--ytd,
.page-table .bs-row--grand td.bs-num.bs-num--fy,
.page-table .bs-row--grand td.bs-num.bs-num--prev,
.page-table .bs-row--grand td.bs-num.bs-num--var {
  color: #fff;
  background: var(--color-navy);
}

/* Équilibre */
.bs-row--balanced {
  background: #e8f5e9;
  color: var(--color-sage);
  font-weight: 700;
  border-top: 2px solid var(--color-sage);
}
.bs-row--unbalanced {
  background: #fdecea;
  color: var(--color-terracotta);
  font-weight: 700;
  border-top: 2px solid var(--color-terracotta);
}
.bs-row--check-warn {
  background: #fef9ec;
  color: var(--color-amber);
  font-weight: 700;
  border-top: 2px solid var(--color-amber);
}

/* Réconciliation P&L */
.bs-recon-table {
  margin-top: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 0.5px solid #E0D8CE;
}
.bs-row--recon {
  background: #F0E8DC;
  color: var(--color-text-muted);
  font-size: 12px;
  font-style: italic;
}
.bs-row--recon td { border-bottom: none; }
.bs-row--recon td.bs-num { color: var(--color-text-muted); }

.bs-caret { display: inline-block; width: 16px; color: var(--color-text-muted); }
.bs-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--color-border);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Brush */
.bs-brushbar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--color-accent-tint);
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.bs-brush-hint { flex: 1 1; min-width: 200px; color: var(--color-text-muted); }
.bs-brush-chip {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text);
}
.bs-brush-chip.is-active {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}
.bs-brush-chip--unmap { color: var(--color-terracotta); border-color: var(--color-terracotta); }
.bs-brush-chip--unmap.is-active { background: var(--color-terracotta); color: #fff; }

/* Structure editor */
.bs-structwrap {
  margin: 12px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.bs-map-head {
  padding: 10px 16px;
  background: var(--color-surface-card);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}
.bs-struct-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-card);
}
.bs-struct-sec {
  min-width: 200px;
  flex: 1 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.bs-struct-sec-h {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-accent-tint);
  font-weight: 600;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
}
.bs-struct-sec-h:focus { outline: 2px solid var(--color-input); }
.bs-struct-sec-input { cursor: text; }
.bs-struct-line {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 0.5px solid var(--color-border);
}
.bs-struct-input {
  flex: 1 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  padding: 2px 4px;
}
.bs-struct-input:focus { outline: 1px solid var(--color-input); border-radius: 2px; }
.bs-struct-ic {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 12px; padding: 2px 4px;
}
.bs-struct-ic:hover { color: var(--color-navy); }
.bs-struct-del:hover { color: var(--color-terracotta); }

/* Jeton BFRE — actif/inactif (besoin en fonds de roulement d'exploitation) */
.bs-struct-bfre {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
}
.bs-struct-bfre:hover { border-color: var(--navy-mid); color: var(--color-navy); }
.bs-struct-bfre.is-on {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.bs-struct-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.bs-struct-addbtn {
  background: var(--color-navy); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.bs-struct-addbtn:disabled { opacity: 0.4; cursor: default; }

/* Cellule éditable */
.bs-edit-input {
  width: 80px; text-align: right;
  border: 1.5px solid var(--color-input);
  border-radius: 3px;
  padding: 1px 4px;
  font: inherit; font-size: 13px;
  background: #fff;
}
.bs-edit-cell {
  display: block; text-align: right;
  padding: 1px 4px; border-radius: 3px;
  cursor: pointer;
}
.bs-edit-cell:hover { background: #e8f0ff; }
.bs-edit-cell--forecast { color: var(--color-text-muted); }

/* Colonnes de total */
.bs-col-ytd { background: var(--color-accent-tint); }
.bs-col-fy  { background: var(--color-accent-tint-strong); font-weight: 600; }
.page-table td.bs-num.bs-num--total { background: var(--color-accent-tint); }
.page-table td.bs-num.bs-num--fy    { background: var(--color-accent-tint-strong); font-weight: 600; }
.page-table td.bs-num.bs-num--ytd   { background: var(--color-accent-tint); }

/* ── Bloc comparatif : 31.12.N-1 · dernier mois réel · variation ──────────── */
/* Séparateur visuel entre les 12 mois et le bloc comparatif. */
.bs-cmp-start { border-left: 1px solid var(--color-text) !important; }   /* noir fin */
/* Colonne de tête (réel seul) : 31.12 N-1 = point de départ, séparée de janvier. */
.bs-lead-prev { background: var(--color-accent-tint); border-right: 1px solid var(--color-text) !important; }   /* noir fin */
.bs-col-prev, .page-table td.bs-num.bs-num--prev { background: var(--color-accent-tint); }
/* Variation : pas de fond de cellule (sur demande). */
.page-table td.bs-num.bs-num--var.is-pos { color: var(--color-sage); }
.page-table td.bs-num.bs-num--var.is-neg { color: var(--color-terracotta); }

/* Sous-tête Actual/Forecast */
.bs-subhead-af th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.bs-af--a { color: var(--color-input); }
.bs-af--f { color: var(--color-amber); }

/* ── Ajustements ─────────────────────────────────────────────────────────── */
.bs-adj-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--color-accent-tint-strong);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-input);
}
.bs-adjustable {
  cursor: pointer;
  color: var(--color-input);
  border-bottom: 1px dashed var(--color-input);
}
.bs-adjustable:hover { background: var(--color-accent-tint); }

.bs-row--adj td { background: #F7F9FC; }
.bs-adj-cell { padding-left: 28px !important; font-size: 12px; font-style: italic; }
.bs-adj-ref  { color: var(--color-input); font-weight: 500; margin-right: 8px; font-style: normal; }
.bs-adj-desc { color: var(--color-text-muted); }
.bs-row--adj td.bs-num { color: var(--color-input); font-style: normal; }

/* ── Modale d'ajustement ─────────────────────────────────────────────────── */
.bs-modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 18, 25, 0.35);
  display: flex; align-items: center; justify-content: center;
}
.bs-modal {
  width: 460px; max-width: 92vw;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(26, 18, 25, 0.22);
  overflow: hidden;
}
.bs-modal-head {
  padding: 14px 18px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--color-navy);
}
.bs-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bs-modal-field { display: flex; flex-direction: column; gap: 4px; }
.bs-modal-field > span { font-size: 12px; color: var(--color-text-muted); }
.bs-modal-input {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: "Inter", system-ui, sans-serif;
}
.bs-modal-input:focus { outline: 2px solid var(--color-input); border-color: var(--color-input); }
.bs-modal-input[readonly] { background: var(--color-bg); color: var(--color-text-muted); }
.bs-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ════ Bilan — vue réel seul (mise en forme) ═══════════════════════════════════
   Jetons propres à la présentation des états (pas de tokens globaux :root).
   Hiérarchie par poids + couleur (pas de retrait) ; gouttière fixe de 20 px. */
.bs-table.bs-actuals {
  --bs-anchor:   #FAF6EE;   /* fond colonne clôture (ancre) */
  --bs-band:     #ECE5D7;   /* bande totaux majeurs */
  --bs-band-top: #1A1219;   /* filet haut noir (clôture de masse) */
  --bs-band-bot: #E7E0D2;   /* filet bas hairline */
  --bs-subtotal: #FBF7F0;   /* fond sous-total */
  --bs-band-detail: #FDFBF7; /* sous-bloc compte (crème léger, comme le P&L) */
  --bs-rubric:   #352D4F;   /* rubriques / totaux */
  --bs-detail:   #6E6757;   /* comptes de détail */
  --bs-muted:    #8A8170;
  --bs-muted2:   #A39A86;
  --bs-hairline: #E7E5E4;   /* gris léger neutre (charte) */
  --bs-pos:      #3B6D11;   /* variation + */
  --bs-neg:      #B5532E;   /* variation − */
  --bs-badge-bg: #F1EFE8; --bs-badge-tx: #8A8170;
  --bs-ok-bg: #EAF3DE; --bs-ok-tx: #3B6D11;
  --bs-ko-bg: #FCEBEB; --bs-ko-tx: #B5532E;
  border-collapse: collapse;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* En-tête neutre (pas de fond bleu-gris hérité) */
.bs-table.bs-actuals thead tr { background: none; border-bottom: none; }
.bs-table.bs-actuals thead th { background: none; }
.bs-table.bs-actuals thead tr.bs-grouphead th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text); text-align: center; padding: 8px 9px 4px; border: none;
}
.bs-table.bs-actuals thead tr.bs-grouphead th.bs-col-line { text-align: left; }
/* Distinction des 3 groupes par BANDES DE FOND (Clôture crème · Mois blancs ·
   Variation bleu-gris) — pas par un filet partiel (qui s'affichait incomplet). */
.bs-table.bs-actuals thead tr.bs-grouphead th.bs-grp-close { background: #F6F4EF; }
.bs-table.bs-actuals thead tr.bs-colhead th {
  font-size: 10px; font-weight: 600; color: var(--color-text);
  text-transform: none; letter-spacing: 0;
  padding: 4px 9px 6px; border-bottom: 1px solid var(--color-text); text-align: right;
}
.bs-table.bs-actuals thead tr.bs-colhead th.bs-col-line { text-align: left; }
/* Filet noir fin transversal sous toute la ligne d'en-tête de colonnes (espaceurs inclus). */
.bs-table.bs-actuals thead tr.bs-colhead th.bs-spacer,
.bs-table.bs-actuals thead tr.bs-colhead th.bs-lead-prev { border-bottom: 1px solid var(--color-text) !important; }
/* Bandes continues jusque dans les sous-en-têtes (sinon coupées par thead th{background:none}). */
.bs-table.bs-actuals thead tr.bs-colhead th.bs-lead-prev { background: #F6F4EF; }

/* Colonne séparatrice 14 px (ancre ↔ mois) */
.bs-table.bs-actuals .bs-spacer { width: 14px; min-width: 14px; padding: 0; border: none !important; background: none; }

/* Colonne clôture 2025 : bande crème → distincte des mois (blancs) ; le spacer
   14 px renforce la séparation. */
.bs-table.bs-actuals .bs-lead-prev { background: #F6F4EF; border: none !important; text-align: right; }

/* Gouttière 20 px : chevron / icône / vide → libellés alignés au même x */
.bs-actuals .bs-gut { display: inline-block; width: 20px; vertical-align: middle; }
/* Chevrons des rubriques plus lisibles — couleur du texte, plus gros (gouttière 20px conservée). */
.bs-actuals .bs-chev { color: var(--color-text); width: 16px; height: 16px; transition: transform 0.15s ease, opacity 0.12s ease; vertical-align: middle; }
.bs-actuals .bs-chev.is-open { transform: rotate(90deg); }
/* Chevron discret : visible seulement au survol de la ligne (ou si déplié), comme le Compte de résultat. */
.bs-actuals .bs-chev { opacity: 0; }
.bs-actuals .bs-row--line:hover .bs-chev,
.bs-actuals .bs-chev.is-open { opacity: 1; }

/* Corps : aucun filet entre détails, padding homogène, pas de retrait.
   Neutralise les fonds de LIGNE hérités (navy grand-total, gris section, off-white
   line, balanced/unbalanced) qui transparaîtraient sous nos cellules sans aplat. */
.bs-table.bs-actuals tbody tr { background: none !important; border: none; }
.bs-table.bs-actuals tbody td { border: none; padding: 7px 9px; text-align: right; }
.bs-table.bs-actuals tbody td.bs-line { text-align: left; padding-left: 0; white-space: nowrap; }
.bs-table.bs-actuals tbody tr.bs-row--line > td.bs-line { padding-left: 0; }
/* Compte de détail : une seule ligne, libellé long tronqué « … » (complet au survol). */
.bs-table.bs-actuals tbody td.bs-acc-cell { padding-left: 0 !important; white-space: nowrap; }
.bs-table.bs-actuals tbody tr.bs-row--acc td.bs-acc-cell .bs-acc-desc {
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Rubriques agrégées (sections : Actifs circulants/immobilisés, Dettes CT/LT…) — en
   gras, fermées par un filet noir en bas (séparation entre masses du bilan). */
.bs-table.bs-actuals tbody tr.bs-row--sectiontotal td {
  color: var(--bs-rubric); font-weight: 700; background: none;
  border-bottom: 1px solid #1A1219; padding-top: 9px; padding-bottom: 9px;
}
/* Le filet noir couvre AUSSI la clôture + le séparateur (continuité de la ligne) :
   !important pour battre .bs-lead-prev/.bs-spacer { border:none !important }. */
.bs-table.bs-actuals tbody tr.bs-row--sectiontotal td.bs-spacer,
.bs-table.bs-actuals tbody tr.bs-row--sectiontotal td.bs-lead-prev {
  border-bottom: 1px solid #1A1219 !important;
}
/* Comptes de détail (reporting lines) — texte noir (charte) */
.bs-table.bs-actuals tbody tr.bs-row--line td { color: var(--color-text); font-weight: 400; background: none; }
/* Comptes du grand livre — sous-bloc crème continu (comme le P&L), n° tabulaire +
   filet vertical d'indentation, pas de filet horizontal entre comptes. */
.bs-table.bs-actuals tbody tr.bs-row--acc td { color: var(--bs-muted); font-weight: 400; font-size: 11px; background: var(--bs-band-detail); }
.bs-table.bs-actuals tbody tr.bs-row--acc td.bs-acc-cell { position: relative; }
.bs-table.bs-actuals tbody tr.bs-row--acc td.bs-acc-cell::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  border-left: 0.5px solid #E7E0D2;
}
.bs-table.bs-actuals tbody tr.bs-row--acc td.bs-acc-cell .bs-mono {
  display: inline-block;
  width: 34px;
  margin-left: 13px;
}
/* Badge n° comptes */
.bs-actuals .bs-count { background: var(--bs-badge-bg); color: var(--bs-badge-tx); font-weight: 500; }

/* Sous-totaux (Total fonds étrangers) : pas d'aplat de fond, juste un filet haut. */
.bs-table.bs-actuals tbody tr.bs-row--subtotal:not(.bs-row--grand) td {
  color: var(--bs-rubric); font-weight: 500; background: none;
  border-top: 0.5px solid var(--bs-hairline);
}
/* Totaux majeurs (Total Actifs, Total Passifs + CP) : PAS d'aplat de fond — filet
   noir en haut (se confond avec le filet de la section au-dessus) + filet gras navy
   en dessous pour clore chaque masse du bilan. !important bat la règle navy héritée. */
.bs-table.bs-actuals tbody tr.bs-row--grand td {
  color: var(--bs-rubric) !important; font-weight: 500; background: none !important;
  border-top: 1px solid var(--bs-band-top); border-bottom: 2px solid var(--color-text);
}
/* Les filets couvrent AUSSI la clôture + le séparateur (identique aux mois) :
   !important pour battre .bs-lead-prev/.bs-spacer { border:none !important }. */
.bs-table.bs-actuals tbody tr.bs-row--grand td.bs-spacer,
.bs-table.bs-actuals tbody tr.bs-row--grand td.bs-lead-prev {
  background: none !important;
  border-top: 1px solid var(--bs-band-top) !important;
  border-bottom: 2px solid var(--color-text) !important;
}

/* Variation : séparateur léger, couleur par signe (tokens spec).
   !important pour battre la règle de couleur héritée (td.bs-num.bs-num--var, 0,4,1). */
/* Variation : pas de fond, pas de filet vertical (distinction par position seule). */
.bs-table.bs-actuals td.bs-num--var,
.bs-table.bs-actuals th.bs-col-var { border-left: none !important; background: none !important; }
.bs-table.bs-actuals .bs-cmp-start { border-left: none !important; }
/* Clôture 2025 : bande crème CONTINUE de haut en bas — valeurs, sous-totaux ET
   grands totaux compris (!important bat les resets background:none des totaux). */
.bs-table.bs-actuals td.bs-lead-prev,
.bs-table.bs-actuals tbody tr.bs-row--sectiontotal td.bs-lead-prev,
.bs-table.bs-actuals tbody tr.bs-row--grand td.bs-lead-prev { background: #F6F4EF !important; }
.bs-table.bs-actuals td.bs-num--var.is-pos { color: var(--bs-pos) !important; }
.bs-table.bs-actuals td.bs-num--var.is-neg { color: var(--bs-neg) !important; }

/* Drill-down : rubrique cliquable, hover discret */
.bs-table.bs-actuals tbody tr.bs-collapsible { cursor: pointer; }
.bs-table.bs-actuals tbody tr.bs-collapsible:hover td { background: var(--bs-subtotal); }
.bs-table.bs-actuals tbody tr.bs-collapsible:hover td.bs-lead-prev { background: #F3ECDD; }

/* Pied de contrôle sorti sous la card (table séparée) : décollé, sans filet ni
   habillage de card — ce sont des contrôles, pas des lignes de l'état. */

/* Gabarit de colonnes commun (layout fixe des deux tables). */
.bs-table.bs-actuals { table-layout: fixed; }
.bs-table.bs-actuals col.bs-c-line { width: 300px; }
.bs-table.bs-actuals col.bs-c-lead { width: 78px; }
.bs-table.bs-actuals col.bs-c-sp   { width: 14px; }
.bs-table.bs-actuals col.bs-c-mo   { width: 62px; }
.bs-table.bs-actuals col.bs-c-var  { width: 84px; }
/* Périodes au-dessus des chiffres — repère discret, calé sur les colonnes. */
.bs-table.bs-actuals tbody tr.bs-foot-periods td {
  padding: 0 9px 2px;
  border: none !important;
  background: none !important;
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Pied détaché : espacement 20 px, équilibre (pilule) + mémo résultat net */
.bs-table.bs-actuals tbody tr.bs-foot-gap td { height: 20px; padding: 0; border: none; background: none; }
.bs-table.bs-actuals tbody tr.bs-row--equ td { border: none; padding: 7px 9px; font-weight: 500; }
/* Équilibré : discret — pas de bandeau, juste une petite coche verte (sage). */
.bs-table.bs-actuals tbody tr.bs-row--equ.is-ok td { background: none; color: var(--bs-muted2); }
.bs-actuals .bs-row--equ.is-ok .bs-gut { color: var(--color-sage); }
/* Déséquilibre : rouge flagrant — bandeau terracotta, texte blanc, gras. */
.bs-table.bs-actuals tbody tr.bs-row--equ.is-ko td { background: var(--color-terracotta); color: #fff; font-weight: 700; }
.bs-actuals .bs-row--equ.is-ko .bs-gut { color: #fff; }
.bs-table.bs-actuals tbody tr.bs-row--equ td.bs-spacer { background: none; }
.bs-table.bs-actuals tbody tr.bs-row--reconfoot td {
  background: none; border: none; color: var(--bs-muted2); font-style: italic; padding: 7px 9px;
}
.bs-table.bs-actuals tbody tr.bs-row--reconfoot td.bs-lead-prev { background: none; }

/* ── Notes (compte × mois) ───────────────────────────────────────────────── */
.bs-noteable { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.bs-noteable:hover { outline: 1px dashed var(--color-amber); border-radius: 2px; }
.bs-note-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-amber);
  vertical-align: super;
}
/* Note visible hors mode Notes : marqueur (point ambre) + bulle au survol
   affichant le texte noté (plus de curseur « ? » peu clair). */
.bs-note-mark { position: relative; display: inline-block; margin-left: 3px; cursor: default; outline: none; }
.bs-note-tip {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
  display: none; width: max-content; max-width: 240px; text-align: left;
  padding: 6px 9px; border-radius: 8px; white-space: normal;
  background: var(--color-navy); color: #fff; font-size: 12px; font-weight: 400;
  box-shadow: 0 4px 14px rgba(26,18,25,0.18);
}
.bs-note-mark:hover .bs-note-tip, .bs-note-mark:focus .bs-note-tip { display: block; }

/* ── Pied de contrôle du bilan (fin de fichier : bat les règles ci-dessus) ────
   Posé à plat sur le fond de page — aucune surface blanche — et texte en noir
   pour être lisible (retour Olivier 2026-08-17). */
.page-table-wrap.bs-foot-wrap {
  margin-top: 14px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bs-foot-table,
.bs-foot-table tbody tr td,
.bs-foot-table tbody tr:hover td { background: none !important; }
.bs-table.bs-actuals.bs-foot-table tbody tr td,
.bs-table.bs-actuals.bs-foot-table tbody tr.bs-row--equ.is-ok td,
.bs-table.bs-actuals.bs-foot-table tbody tr.bs-row--reconfoot td,
.bs-table.bs-actuals.bs-foot-table tbody tr.bs-row--unmapped td,
.bs-table.bs-actuals.bs-foot-table tbody tr.bs-row--unmapped-none td {
  color: var(--color-text) !important;
  font-style: normal;
}
.bs-table.bs-actuals.bs-foot-table tbody tr.bs-foot-periods td { color: var(--color-text-muted) !important; }

/* Cash Flow Statement — Tableau des flux de trésorerie */

.cf-page { padding: 0 24px 40px; }
.cf-page--bare { padding: 0; }
.cf-loading { padding: 24px; color: var(--color-text-muted); font-size: 13px; }

/* ── Card wrapper ───────────────────────────────────────────────────────────── */
.cf-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(43, 32, 62, 0.06);
  margin-bottom: 24px;
  overflow: hidden;
}

/* Variante embarquée (hub Rapports standards) : gabarit « report-card » partagé —
   fond blanc arrondi + ombre + marge intérieure, comme le Compte de résultat et le
   Bilan. En-tête sans bande colorée (outils Mapping en haut, dans la card). */
.cf-card--bare {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  margin-bottom: 0;
  overflow: hidden;
  padding: 14px 16px;
  width: fit-content;   /* la card épouse la table (fixed cols) — pas de blanc à droite */
  max-width: 100%;
}
.cf-card--bare .cf-card-head {
  background: transparent;
  border-bottom: 0;
  padding: 0 0 12px;
  justify-content: flex-start;
}
/* La marge intérieure vient de la card (padding ci-dessus) : on neutralise le
   padding propre du wrap de table et du bloc de réconciliation en embarqué. */
.cf-page--bare .cf-table-wrap { padding: 0; }

/* ── En-tête de la card ─────────────────────────────────────────────────────── */
.cf-card-head {
  padding: 14px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);   /* gris léger */
}
.cf-card-head--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cf-head-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Outils contextuels à gauche (bouton Mapping + compteur), à l'image du
   « brush mode » du compte de résultat. */
.cf-head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-mapping-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-terracotta);
  white-space: nowrap;
}
.cf-card-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}
.cf-card-meta {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-family: "Inter", system-ui, sans-serif;
}

/* Interrupteur CHF ⇄ kCHF : composant partagé <UnitSwitch> (components/UnitSwitch). */

/* ── Synthèse : pont (2/3) à gauche + tuiles (1/3) à droite ──────────────────── */
.cf-synthesis-body { padding: 16px 20px; }
/* Tuiles KPI sur une seule ligne, puis graphique pleine largeur dessous. */
.cf-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .cf-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cf-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.cf-kpi { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 15px; }
.cf-kpi--hero { background: var(--color-navy); border-color: var(--color-navy); }
.cf-kpi-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cf-kpi--hero .cf-kpi-label { color: #C9C2D6; }
.cf-kpi-value {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}
.cf-kpi--hero .cf-kpi-value { color: #fff; }

.cf-waterfall { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px 4px; }
/* Variante embarquée (dans une Card, ex. hub CFO) : la Card porte déjà cadre +
   titre → on retire bordure et padding pour éviter la carte-dans-carte. */
.cf-waterfall--bare { border: none; border-radius: 0; padding: 0; width: 100%; }
.cf-waterfall--bare svg { display: block; }
.cf-waterfall-cap {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.cf-table-wrap { overflow-x: auto; padding: 0 20px 16px; }
/* Embarqué : table calée à gauche sur la marge du hub (comme les autres onglets). */
.cf-page--bare .cf-table-wrap { padding-left: 0; }
.cf-table {
  /* Largeur = somme des colonnes (libellé fixe + colonnes chiffres) : la table
     grandit avec le nombre de mois et scrolle (cf-table-wrap) au lieu d'écraser
     la colonne libellé. */
  width: auto;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
}
/* Colonnes serrées, libellés sur UNE ligne (aligné sur le cash flow du hub
   Prévisionnel, demande du 2026-08-11) : la colonne libellé s'élargit au
   contenu, les colonnes chiffres restent compactes. */
.cf-table col.cf-col-label  { width: 290px; }
.cf-table col.cf-col-amount { width: 96px; }
.cf-table col.cf-col-month { width: 68px; }
/* Colonne d'espacement blanc entre 2026 (réel) et les mois réalisés. */
.cf-table col.cf-col-gap { width: 28px; }
.cf-table td.cf-col-gap, .cf-table th.cf-col-gap { background: none; border: none; padding: 0; }
.cf-table td.cf-label-indent,
.cf-row--section td:first-child { white-space: nowrap; }
.cf-row--recon-head td { white-space: normal; }

/* Lignes agrégées BFRE / autres : cliquables, marque ＋/－ discrète. */
.cf-row--wcrgrp { cursor: pointer; }
.cf-row--wcrgrp:hover td { background: var(--color-accent-tint); }
.cf-groupmark { margin-left: 7px; font-size: 11px; color: var(--color-text-muted); }

/* ── En-tête : ligne années + sous-ligne scénarios ──────────────────────────── */
.cf-year-row th {
  padding: 10px 12px 4px;
  background: #fff;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-navy);
}
.cf-year-row th.cf-year-grp { border-bottom: 1px solid var(--color-text); }   /* noir fin */
/* 2025 / 2026 : alignés à droite, au-dessus de leur colonne cumulé. */
.cf-year-row th.cf-year-grp--right { text-align: right; }
/* « Évolution AAAA » : titre groupé centré au-dessus des mois (les distingue). */
.cf-year-row th.cf-year-evo { text-align: center; }
.cf-thead-sub td {
  padding: 2px 12px 7px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--color-text-muted);
  font-weight: 500;
}
.cf-thead-sub td:first-child { text-align: left; }
.cf-thead-sub .cf-th-ytd { color: var(--color-navy); font-weight: 700; }
.cf-th-sub-fcast { }
/* En-têtes des mois réalisés (détail mensuel, analyse) — discrets. */
.cf-thead-sub .cf-th-month { color: var(--color-text-muted); font-weight: 500; }

/* ── Lignes de détail ──────────────────────────────────────────────────────── */
.cf-row--detail td {
  padding: 4px 12px;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
}
.cf-row--detail:hover td { background: #F5F3EE; }

/* ── Postes sans mouvement (repli) ──────────────────────────────────────────── */
.cf-row--fold td {
  padding: 3px 12px 5px 28px;
  font-size: 12px;
  color: #5F6B7E;
  cursor: pointer;
}
.cf-row--fold:hover td { color: var(--color-navy); }

/* ── Section collapsible ───────────────────────────────────────────────────── */
.cf-row--section td {
  padding: 8px 12px;
  background: transparent;
  border-top: 0.5px solid var(--color-border);
  border-bottom: none;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.cf-row--toggle { cursor: pointer; -webkit-user-select: none; user-select: none; }
.cf-row--toggle:hover td { background: var(--color-accent-tint); }
.cf-row--toggle td:first-child { display: flex; align-items: center; gap: 7px; }
.cf-chevron { flex-shrink: 0; color: var(--color-navy); transition: transform 0.15s ease; }
.cf-chevron.open { transform: rotate(0deg); }
.cf-chevron:not(.open) { transform: rotate(-90deg); }

/* ── Sous-total de section ──────────────────────────────────────────────────── */
/* Fonds blanc, texte navy + filet fin — à l'image des soldes intermédiaires du P&L. */
.cf-row--subtotal td {
  padding: 6px 12px;
  background: transparent;
  border-top: 0.5px solid var(--color-border);
  border-bottom: none;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 13px;
}

/* ── Totaux majeurs (opérationnel, free cash flow) ──────────────────────────── */
/* Plus de bandeau navy plein : bleu léger (ligne total charte) + texte navy. */
.cf-row--total td {
  padding: 9px 12px;
  background: var(--color-accent-tint-strong);
  border-top: 1px solid var(--color-text);      /* noir fin (total majeur) */
  border-bottom: 1px solid var(--color-text);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 13.5px;
  font-family: "Inter", system-ui, sans-serif;
}
.cf-row--total .cf-num { color: var(--color-navy); }

/* ── Variation nette (grand total) ─────────────────────────────────────────── */
/* Total fort : bleu léger renforcé + double filet navy (au-dessus / dessous). */
.cf-row--net-cf td {
  padding: 9px 12px;
  background: var(--color-accent-tint-strong);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 14px;
  font-family: "Inter", system-ui, sans-serif;
  border-top: 2px solid var(--color-text);      /* noir épais (grand total) */
  border-bottom: 2px solid var(--color-text);
}
.cf-row--net-cf .cf-num { color: var(--color-navy); }

/* ── Séparateurs ────────────────────────────────────────────────────────────── */
.cf-row--spacer td { height: 12px; background: transparent; border: none; padding: 0; }
.cf-row--fcf-spacer td { height: 6px; background: transparent; border: none; padding: 0; }

/* ── En-tête « Solde de trésorerie » (bornes du flux) ───────────────────────── */
.cf-row--recon-head td {
  padding: 14px 12px 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}
.cf-row--recon td {
  padding: 3px 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* ── Soldes de trésorerie initial / final ───────────────────────────────────── */
.cf-row--cash-key td {
  padding: 8px 12px;
  background: var(--color-accent-tint-strong);
  border-top: 1px solid var(--color-text);      /* noir fin */
  border-bottom: 1px solid var(--color-text);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 13px;
}
.cf-row--cash-key .cf-num { color: var(--color-navy); }
.cf-row--cash-key + .cf-row--cash-key td { border-top: none; }
/* Solde final = ligne de clôture forte (bleu renforcé + gras). */
.cf-row--cash-final td {
  background: var(--color-accent-tint-strong);
  font-weight: 700;
  font-size: 13.5px;
  border-bottom: 2px solid var(--color-text);   /* noir épais (clôture) */
}

/* ── Trésorerie début — champ saisie ────────────────────────────────────────── */
.cf-refresh-btn {
  margin-left: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted);
  font-size: 13px; padding: 0 2px; line-height: 1;
  opacity: 0.7; vertical-align: middle;
}
.cf-refresh-btn:hover { opacity: 1; color: var(--color-navy); }

.cf-cash-val {
  cursor: pointer;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-bottom: 1px dashed var(--color-input);
  color: var(--color-input);
  padding-bottom: 1px;
}
.cf-cash-val.no-val { color: var(--color-text-muted); border-bottom-color: var(--color-text-muted); }
.cf-cash-val:hover { background: var(--color-input-bg); border-radius: 2px; }

.cf-cash-input {
  width: 110px;
  text-align: right;
  border: 1px solid var(--color-input);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--color-input);
  background: #fff;
  outline: none;
}

/* ── Cessions d'actifs — cellule mensuelle éditable (charte : bleu, sans cadre) ── */
.cf-num--edit { text-align: right; }
.cf-cess-val {
  cursor: pointer;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-input);
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
}
.cf-cess-val.no-val { color: color-mix(in srgb, var(--color-input) 45%, transparent); }
.cf-cess-val:hover { border-bottom-color: var(--color-input); }
.cf-cess-input {
  width: 100%;
  max-width: 72px;
  text-align: right;
  border: none;
  border-bottom: 1px solid var(--color-input);
  padding: 0 2px 1px;
  font-size: inherit;
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-input);
  background: transparent;
  outline: none;
}

/* ── Écart de réconciliation ─────────────────────────────────────────────────── */
.cf-row--gap td {
  padding: 4px 12px;
  font-size: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.cf-row--gap.is-ok td { background: color-mix(in srgb, var(--color-sage) 10%, transparent); }
.cf-row--gap.is-err td { background: color-mix(in srgb, var(--color-terracotta) 12%, transparent); }

/* ── Bloc réconciliation au bilan — contrôle détaché sous le tableau ─────────── */
.cf-recon-block {
  margin-top: 18px;
  padding: 12px 20px 0;
  border-top: 1px dashed var(--color-border);
}
.cf-page--bare .cf-recon-block { padding-left: 0; padding-right: 0; }
.cf-recon-cap {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
/* Filets allégés : ce n'est qu'un contrôle, pas une ligne du tableau. */
.cf-recon-table .cf-row--recon td,
.cf-recon-table .cf-row--gap td { border-top: none; }
/* Périodes au-dessus des chiffres — repère discret, calé sur les colonnes. */
.cf-recon-table .cf-row--recon-periods td {
  padding: 0 12px 2px;
  border: none;
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ── Couleurs de montants ────────────────────────────────────────────────────── */
.cf-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-num--plain { color: var(--color-text); }
.cf-num--neg   { color: var(--color-terracotta); }
.cf-num--zero  { color: var(--color-text-muted); }
.cf-num--navy  { color: var(--color-navy); font-weight: 600; }
.cf-num--fcast { color: var(--color-text-muted); }
.cf-num--ytd   { font-weight: 600; }
.cf-num--gap-ok  { color: var(--color-sage); font-weight: 700; }
/* Écart de réconciliation ≠ 0 : surligné en rouge (le cash flow ne colle pas au bilan). */
.cf-num--gap-err { color: var(--color-terracotta); font-weight: 700; background: color-mix(in srgb, var(--color-terracotta) 16%, transparent); }

/* ── Labels indentés ────────────────────────────────────────────────────────── */
.cf-label-indent { padding-left: 28px !important; }
.cf-detail-note {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-left: 6px;
}

/* ── Avertissement lignes non classifiées ──────────────────────────────────── */
.cf-unclassified-warn {
  margin: 12px 0 0;
  padding: 8px 14px;
  background: #FFF3CD;
  border-left: 3px solid var(--color-amber);
  border-radius: 3px;
  font-size: 12px;
  color: var(--color-text);
  cursor: pointer;
}
.cf-unclassified-warn:hover { background: #FBEAB5; }
.cf-warn-cta { margin-left: 8px; font-weight: 600; color: var(--color-amber); white-space: nowrap; }
.cf-classify-btn.on { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

/* ── Classifier (drag-drop des lignes du bilan vers les catégories CF) ───────── */
.cfc-body { padding: 16px 20px; }
.cfc-group { margin-bottom: 16px; }
.cfc-group-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.cfc-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.cfc-bucket, .cfc-pool {
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  background: #F8FAFC;
  min-height: 64px;
}
.cfc-bucket.cfc-over, .cfc-pool.cfc-over {
  border-color: var(--color-navy);
  border-style: solid;
  background: var(--color-accent-tint);
}
.cfc-bucket-h, .cfc-pool-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  padding: 7px 10px 5px;
}
.cfc-bucket-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.cfc-empty { font-size: 12px; color: var(--color-text-muted); }

.cfc-pool {
  margin-top: 6px;
  background: #FFF8EC;
  border-color: var(--color-amber);
}
.cfc-pool-h { color: #8A6516; }

.cfc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}
.cfc-chip:hover { border-color: var(--color-navy); }
.cfc-chip--dragging { opacity: 0.4; }
.cfc-chip--locked { cursor: default; color: var(--color-text-muted); background: #F1EFEA; }
.cfc-chip--locked:hover { border-color: var(--color-border); }
.cfc-chip-grip { color: var(--color-text-muted); font-size: 11px; line-height: 1; }

/* Ajustements & Corrections — table plate (1 ligne = 1 écriture) */

/* ── Wrapper ───────────────────────────────────────────────────────────────── */
.adj-table-wrap {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
}

/* ── Table plate ───────────────────────────────────────────────────────────── */
.adj-flat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.adj-flat-table thead tr {
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
}

.adj-flat-table th {
  text-align: left;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}

.adj-col--period { width: 148px; }
.adj-col--label  { width: 180px; }
.adj-col--amount { width: 110px; text-align: right; }
.adj-col--line   { width: 190px; }
.adj-col--memo   { }
.adj-col--del    { width: 36px; }

.adj-flat-table td {
  padding: 6px 12px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: middle;
}
.adj-flat-table tbody tr:last-child td { border-bottom: none; }
.adj-flat-row:hover td { background: #F8FAFD; }

/* ── Footer balance ────────────────────────────────────────────────────────── */
.adj-tfoot td {
  padding: 6px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-accent-tint-strong);
}
.adj-tfoot .adj-col--amount { text-align: right; }

/* ── Cellule Période ───────────────────────────────────────────────────────── */
.adj-col--period {
  display: table-cell;
}
.adj-flat-row td.adj-col--period {
  display: table-cell;
  white-space: nowrap;
}
.adj-flat-table td.adj-col--period {
  display: table-cell;
}

/* ── Ref badge ─────────────────────────────────────────────────────────────── */
.adj-ref {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-accent-tint-strong);
  border-radius: 4px;
  padding: 2px 5px;
  margin-right: 6px;
  white-space: nowrap;
}

/* ── Balance badge ─────────────────────────────────────────────────────────── */
.adj-balance {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.adj-balance.is-zero    { background: #DCFCE7; color: #166534; }
.adj-balance.is-nonzero { background: #FEF3C7; color: #92400E; }

/* ── Libellé cliquable ─────────────────────────────────────────────────────── */
.adj-desc {
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  display: block;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.adj-desc:hover { background: var(--stone-50); }
.adj-desc--empty { color: var(--color-text-muted); font-style: italic; }

/* ── Montant ───────────────────────────────────────────────────────────────── */
.adj-amount {
  display: block;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.adj-amount:hover { background: var(--color-value-bg); }
.adj-amount.is-pos  { color: var(--color-sage); font-weight: 600; }
.adj-amount.is-zero { color: var(--color-text-muted); }

.adj-amount-input {
  font-family: inherit;
  font-size: 13px;
  width: 90px;
  text-align: right;
  border: 1px solid var(--color-value);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--color-value-bg);
  color: var(--color-text);
  outline: none;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Contrôles saisie ──────────────────────────────────────────────────────── */
.adj-select {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
}
.adj-select--sm   { font-size: 11px; padding: 3px 5px; }
.adj-select--line { width: 100%; font-size: 12px; padding: 3px 6px; }

.adj-input {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  width: 100%;
}
.adj-input:focus { border-color: var(--color-navy); outline: none; }
.adj-input--memo { font-size: 12px; }

/* ── Bouton suppression ────────────────────────────────────────────────────── */
.adj-del-btn {
  font-family: inherit;
  font-size: 16px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 1;
  padding: 0;
}
.adj-del-btn:hover { background: #FEE2E2; color: var(--color-terracotta); }

/* Sélection multiple (suppression groupée) — 2026-08-17. */
.adj-col--sel { width: 30px; text-align: center; }
.adj-flat-row.is-sel > td { background: var(--color-accent-tint); }
.adj-delsel { color: var(--color-terracotta); border-color: var(--color-terracotta); }
.adj-delsel:hover { background: color-mix(in srgb, var(--color-terracotta) 8%, transparent); }

/* Onglet Synthèse — états financiers. Vue d'ensemble au réel (liquidité,
   fond de roulement, ratios, productivité). Charte uniquement (tokens :root). */

.fsyn-grouplbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin: 4px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fsyn-grouplbl small { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ── Colonnes de tuiles : liquidité (gauche) · productivité (droite) ──────── */
.fsyn-tilecols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .fsyn-tilecols { grid-template-columns: 1fr; }
}

/* ── Tuiles KPI ──────────────────────────────────────────────────────────── */
.fsyn-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;            /* toutes les tuiles à la même hauteur */
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 18px;
}
/* Grille fixe à 3 colonnes (rentabilité : CA sur une ligne, 3 marges sur l'autre). */
.fsyn-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Variante compacte (délais du cycle) : tuiles plus petites, non étirées */
.fsyn-tiles--compact {
  display: flex;
  flex-wrap: wrap;
}
.fsyn-tiles--compact .fsyn-tile { flex: 0 1 160px; padding: 9px 13px; }
.fsyn-tiles--compact .fsyn-tile__value { font-size: 17px; }
.fsyn-tile {
  background: var(--stone-100);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.fsyn-tile__label { font-size: 12.5px; color: var(--color-text-muted); }
.fsyn-tile__label small { color: var(--stone-400); }
.fsyn-tile__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  line-height: 1.15;
}
.fsyn-tile__value--terra { color: var(--color-terracotta); }
.fsyn-tile__value--sage  { color: var(--color-sage); }
.fsyn-tile__value small { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.fsyn-tile__delta { font-size: 12px; margin-top: 3px; color: var(--color-text-muted); }
.fsyn-tile__delta--up   { color: var(--color-sage); }
.fsyn-tile__delta--down { color: var(--color-terracotta); }

/* ── Deux colonnes : indicateurs + Liquidité (gauche) · le reste (droite) ─── */
.fsyn-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 18px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .fsyn-cols { grid-template-columns: 1fr; }
}
.fsyn-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fsyn-col .std-card { margin-bottom: 0; }
/* Les tuiles gardent leur marge basse propre à l'intérieur de la colonne */
.fsyn-col .fsyn-tiles { margin-bottom: 0; }

/* Rangée Liquidité (2/3) · Ratios (1/3) — grille deux-tiers / un-tiers. */
.fsyn-liqrow {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 18px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .fsyn-liqrow { grid-template-columns: 1fr; }
}

.fsyn-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.fsyn-legend span { display: flex; align-items: center; gap: 5px; }
.fsyn-swatch { width: 14px; height: 0; border-top: 2px solid; display: inline-block; }

/* ── Thermomètres ratios de liquidité ────────────────────────────────────── */
.fsyn-thermos {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 14px;
  padding: 2px 0 0;
}
.fsyn-thermo { text-align: center; }
.fsyn-thermo__val { font-size: 14px; font-weight: 700; color: var(--color-navy); margin-bottom: 3px; }
.fsyn-thermo__val--terra { color: var(--color-terracotta); }
.fsyn-thermo__tube {
  position: relative;
  width: 22px;
  height: 64px;
  margin: 0 auto;
  background: var(--stone-100);
  border-radius: 11px;
}
.fsyn-thermo__fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 13px 13px; }
.fsyn-thermo__ref { position: absolute; left: -5px; right: -5px; height: 0; border-top: 2px dashed var(--color-navy); }
.fsyn-thermo__cap { font-size: 11px; color: var(--stone-500); margin-top: 3px; }
.fsyn-thermo__name { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.25; }

/* ── Signaux ─────────────────────────────────────────────────────────────── */
.fsyn-signals { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.fsyn-signals strong { font-weight: 600; color: var(--color-text); }

/* ── États vides / placeholders ──────────────────────────────────────────── */
.fsyn-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.fsyn-chartwrap { width: 100%; }

/* Onglet Fonds de roulement — tableau BFRE mensuel (charte). */

.fwc-wrap { width: 100%; overflow-x: auto; }

.fwc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.fwc-table th {
  font-weight: 600;
  color: var(--color-navy);
  padding: 8px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-navy);
}
.fwc-table th.fwc-rowhead { text-align: left; }
/* Tableaux liquidité : grille de colonnes fixe → les mois s'alignent entre les
   deux tableaux (valeurs + ratios), malgré la colonne Cible. */
.fwc-table--liq { table-layout: fixed; width: 100%; }
.fwc-table--liq col.fwc-col-label { width: 240px; }
.fwc-table--liq col.fwc-col-cible { width: 78px; }
.fwc-table--liq col.fwc-col-open { width: 76px; }
/* col.fwc-col-month : largeur auto, répartie également (layout fixe). */

/* Colonne d'ancrage 31.12 N-1 (point de départ, avant Janvier) : fond bleu-gris
   + filet à droite, comme l'ancre clôture du Bilan. */
.fwc-table th.fwc-open,
.fwc-table td.fwc-open {
  background: var(--color-accent-tint);
  border-right: 1.5px solid var(--color-border);
}

/* Colonne Cible (ratios) — entre le libellé et Janvier, décalée à gauche,
   sans fond, séparée par un filet à droite ; valeur entre crochets. */
.fwc-table th.fwc-cible,
.fwc-table td.fwc-cible {
  border-right: 1px solid var(--color-border);
  text-align: left;
  padding-left: 4px;
  padding-right: 8px;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

.fwc-table td {
  padding: 6px 12px;
  text-align: right;
  white-space: nowrap;
  color: var(--color-text);
}
.fwc-table td.fwc-rowhead {
  text-align: left;
  color: var(--color-text);
  max-width: 360px;
}
.fwc-table td.fwc-zero { color: var(--stone-400); }
.fwc-table .fwc-future { color: var(--color-text-muted); opacity: 0.55; }

/* Cascade liquidité : valeur (CHF) + ratio (%) par degré */
.fwc-table .fwc-sub { display: block; font-weight: 400; font-size: 11px; color: var(--color-text-muted); }
.fwc-row--liqgross td { color: var(--color-text); }
.fwc-row--liqref td { color: var(--color-text-muted); }
.fwc-row--liqval td { font-weight: 600; color: var(--color-navy); }
.fwc-row--liqrat td { color: var(--color-text-muted); font-size: 12px; }
/* Lignes de détail (composantes des numérateurs degré 2 / 3) */
.fwc-row--liqdetail td { color: var(--color-text-muted); }
.fwc-row--liqdetail .fwc-rowhead { padding-left: 22px; font-style: italic; }
.fwc-row--liqfrn td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}

/* Ligne Trésorerie (haut) */
.fwc-row--treso td { border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.fwc-row--treso .fwc-rowhead { font-weight: 600; }

/* Composants du BFRE */
.fwc-row--comp td { color: var(--color-text-muted); }
.fwc-row--comp .fwc-rowhead { color: var(--color-text); }

/* Total BFRE */
.fwc-row--bfre td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}

/* Trésorerie + BFRE */
.fwc-row--total td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 2px solid var(--color-navy);
  padding-top: 10px;
}

.fwc-spacer td { height: 8px; padding: 0; border: none; }

/* ── Synthèse : graphique 12 mois roulants, puis tuiles sur une ligne ─────── */
.fwc-chartcard { margin-bottom: 18px; }
.fwc-head__chartbox { width: 100%; height: 280px; }

/* Deux graphiques côte à côte (onglet Suivi des liquidités du hub CFO) :
   « Suivi de la liquidité » (60 %) + « Pont de trésorerie » injecté (40 %).
   min-width:0 pour laisser les graphes rétrécir dans le flex. */
.fwc-charts-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 18px; }
.fwc-charts-row > * { min-width: 0; }
.fwc-charts-row > .fwc-chartcard { flex: 1 1 60%; margin-bottom: 0; }
.fwc-charts-row > .cfo-pont-card { flex: 0 0 40%; }
@media (max-width: 1100px) {
  .fwc-charts-row { flex-direction: column; }
  .fwc-charts-row > .cfo-pont-card { flex: 1 1; }
}

/* Rangée de tuiles : Trésorerie + DSO / DIO / DPO, une seule ligne. */
.fwc-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .fwc-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Tuile plate (format KPI) : fond léger, libellé muté, valeur navy. Pas de Card. */
/* Tuiles bande 3 (Suivi CFO) = SECONDAIRES : à plat, plus compactes et un chiffre
   plus petit que le bandeau KPI primaire (blanc à filet). Hiérarchie voulue :
   KPI (pont chiffré) fort en tête, rotations discrètes en bas. */
.fwc-tile {
  background: var(--stone-100);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.fwc-tile__label {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.3;
  margin-bottom: 4px;
  min-height: 1.3em;
}
.fwc-tile__label small { color: var(--stone-400); }

.fwc-tile__val {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fwc-tile__val small { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }

.fwc-tile__trends {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.fwc-tile__trends > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fwc-tile__trendlbl { color: var(--color-text-muted); }
.fwc-tile__trend { font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.fwc-tile__trend--up { color: var(--color-sage); }
.fwc-tile__trend--down { color: var(--color-terracotta); }
.fwc-tile__trend--na { color: var(--color-text-muted); font-weight: 400; }

/* Icône « i » + pop-over de formule (cards rotation, onglet BFRE) */
.fwc-info { position: relative; display: inline-flex; }
.fwc-info__btn {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 12px; font-style: italic; font-weight: 700;
  line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fwc-info__btn:hover { background: var(--color-accent-tint); }
.fwc-info__pop {
  position: absolute;
  top: 24px; right: 0;
  z-index: 20;
  width: max-content; max-width: 360px;
  padding: 9px 12px;
  background: var(--color-navy);
  color: #fff;
  font-size: 12px; line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(43, 32, 62, 0.22);
}
.fwc-info__pop::after {
  content: ""; position: absolute; top: -5px; right: 6px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid var(--color-navy);
}
.fwc-info__line { display: block; }
.fwc-info__line + .fwc-info__line { margin-top: 4px; }
/* Variante ancrée à gauche (ⓘ posée en début de ligne, devant les ratios). */
.fwc-info__pop--left { right: auto; left: 0; }
.fwc-info__pop--left::after { right: auto; left: 6px; }

/* ── Card Délais de rotation (DSO/DIO/DPO) — Card standard (coins arrondis,
   overflow masqué) ; avertissement TVA dans la table. ─────────────────────── */
.fwc-warn {
  color: var(--color-terracotta);
  font-size: 12px;
  text-align: left;
  white-space: normal;
}

/* Lignes de ratio (onglet Ratio liquidité) : le CHIFFRE en poids normal,
   même si la ligne (libellé) est en gras. */
.fwc-table td.fwc-ratioval { font-weight: 400; }

/* Onglet BFRE : layout fixe + colonne libellé de largeur identique → les colonnes
   mois s'alignent entre la table principale et les cards rotation (DSO/DIO/DPO). */
.fwc-table--roll { table-layout: fixed; width: 100%; }
.fwc-table--roll col.fwc-col-rolllabel { width: 220px; }
.fwc-table--roll td.fwc-rowhead,
.fwc-table--roll th.fwc-rowhead { white-space: normal; }

/* Card Délais de rotation : en-tête mois non gras, aligné en bas. */
.fwc-rollcard .fwc-table thead th {
  font-weight: 400;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  vertical-align: bottom;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* Bande de titre par délai : aplat ardoise clair (seule famille de surlignage
   autorisée) + icône, titre Inter SUR 1 LIGNE (charte : contenu de table en
   Inter, pas en serif). */
.fwc-row--secttitle td.fwc-secttitle {
  text-align: left;
  white-space: nowrap;                       /* titre sur 1 seule ligne */
  background: var(--color-accent-tint);
  padding-top: 8px;
  padding-bottom: 8px;
}
.fwc-secticon {
  vertical-align: -3px;
  margin-right: 9px;
  color: var(--color-accent);
}
.fwc-secttitle__t {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; color: var(--color-on-tint);
}
.fwc-secttitle .fwc-info { margin-left: 8px; }

/* Bande de titre cliquable : déplie les valeurs du calcul. Chevron révélé au
   survol seulement (standard groupement 2026-08-17). */
.fwc-row--rot { cursor: pointer; }
.fwc-rot-chevron {
  margin-left: 7px; vertical-align: -1px; color: var(--color-on-tint);
  opacity: 0; transition: opacity .12s ease, transform .12s ease;
}
.fwc-row--rot:hover .fwc-rot-chevron { opacity: 1; }
.fwc-rot-chevron.open { opacity: 1; transform: rotate(180deg); }

/* Ligne formule (ⓘ) : texte dans la table, lisible — plus de popover tronqué. */
.fwc-row--formula td {
  text-align: left; white-space: normal;
  font-size: 12px; color: var(--color-text-muted);
  background: var(--color-surface-page);
  padding-top: 6px; padding-bottom: 6px;
}
.fwc-formula-line { display: block; }
.fwc-formula-line + .fwc-formula-line { margin-top: 2px; }

/* Détail du calcul (numérateur moyen 12 mois + flux 12 mois glissants). */
.fwc-row--rotdetail td { color: var(--color-text-muted); }
.fwc-row--rotdetail .fwc-rowhead { color: var(--color-text); }

/* État de chargement — il n'avait pas de classe (style inline) : l'export ne
   pouvait pas le distinguer d'un onglet muet, et partait sans le BFRE ni le
   ratio de liquidité. */
.fwc-loading { color: var(--color-text-muted); }

/* Rapports sur-mesure — viewer + builder. Famille bleu-gris (charte card). */

/* Export PDF/Excel (CustomReportsExport) : titre de rapport au-dessus de chaque
   table, sans card (rendu à plat pour le print et l'export). */
.custrep-print-block { margin-bottom: 8px; }
.custrep-print-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-navy);
  margin-bottom: 4px;
}

/* ── Barre d'onglets : actions à droite (aside) ─────────────────────────── */
.custrep-tabaside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Barre de création / renommage d'un rapport (dans le panneau). */
.custrep-createbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 4px;
}

.custrep-input,
.custrep-kind,
.custrep-source,
.custrep-fmt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 8px;
}
.custrep-input.grow { flex: 1 1 auto; min-width: 120px; }
.custrep-input.mono { font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; }

.custrep-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
}
.custrep-btn:hover { background: var(--color-accent-tint); }
.custrep-btn.active { background: var(--color-accent-tint-strong); border-color: var(--color-border); }
.custrep-btn.primary { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.custrep-btn.primary:hover { opacity: 0.92; }

.custrep-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.82rem;
  color: var(--color-navy); text-decoration: underline;
}
.custrep-link.danger { color: var(--color-terracotta); }

.custrep-empty, .custrep-note {
  padding: 28px; color: var(--color-text-muted);
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem;
}
.custrep-note { padding: 18px; }

.custrep-err { color: var(--color-terracotta); cursor: help; }

/* ── Builder ────────────────────────────────────────────────────────────── */
.custrep-builder { display: flex; flex-direction: column; gap: 8px; }
.custrep-brow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff;
}
.custrep-brow.kind-header { background: #F7F9FC; }
.custrep-brow-move { display: inline-flex; flex-direction: column; gap: 2px; }

.custrep-refkey {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace;
  font-size: 0.74rem; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  background: var(--color-terracotta); border-radius: 4px; padding: 2px 6px; flex: 0 0 auto;
}
.custrep-kind { min-width: 90px; }
.custrep-source { min-width: 220px; max-width: 340px; }
.custrep-fmt { min-width: 64px; }

.custrep-formula { display: flex; flex-direction: column; gap: 5px; flex: 1 1 320px; min-width: 240px; }
.custrep-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.custrep-chip {
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.72rem;
  color: var(--color-navy); background: var(--color-accent-tint); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 2px 9px; cursor: pointer; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.custrep-chip:hover { background: var(--color-accent-tint-strong); }

.custrep-emph {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem; color: var(--color-text-muted);
}

.custrep-mini {
  font-size: 0.7rem; line-height: 1; color: var(--color-navy);
  background: #fff; border: 1px solid var(--color-border); border-radius: 4px;
  padding: 3px 6px; cursor: pointer;
}
.custrep-mini:hover { background: var(--color-accent-tint); }
.custrep-mini:disabled { opacity: 0.35; cursor: default; }
.custrep-mini.danger { color: var(--color-terracotta); border-color: var(--color-terracotta); }

.custrep-add { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* ── Rapports empilés (page = tableau de bord, format synthèse minimaliste) ─ */
.custrep-reports { display: flex; flex-direction: column; gap: 34px; padding: 16px; }
.custrep-reports .custrep-empty { padding: 22px; }

.custrep-report { margin: 0; }
/* En-tête de bloc (fps-block__head) passé en flex : titre à gauche, actions à droite. */
.custrep-report__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}

/* Actions dans l'en-tête de rapport */
.custrep-cardact { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.custrep-inline { display: inline-flex; align-items: center; gap: 6px; }
.custrep-link.on { font-weight: 600; }

/* Zone « à placer » */
.custrep-unassigned { padding: 8px 16px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.custrep-unassigned__title {
  margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem;
  color: var(--color-text-muted); font-weight: 600;
}
.custrep-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.82rem; color: var(--color-text);
  background: #fff; border: 1px dashed var(--color-border); border-radius: 14px; padding: 3px 10px;
}

/* ── Wizard (popover multi-étapes) ──────────────────────────────────────── */
.custrep-modal__overlay {
  position: fixed; inset: 0; background: rgba(26, 18, 25, 0.38);
  display: flex; align-items: center; justify-content: center; z-index: 500; padding: 24px;
}
.custrep-modal {
  background: #fff; border-radius: 12px; width: 760px; max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(26, 18, 25, 0.25);
  font-family: 'Inter', system-ui, sans-serif;
}
.custrep-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-card); border-radius: 12px 12px 0 0;
}
.custrep-modal__title { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; color: var(--color-navy); font-weight: 600; }
.custrep-modal__close { background: none; border: none; font-size: 1rem; color: var(--color-text-muted); cursor: pointer; }

/* Rail vertical : stepper à gauche, contenu à droite. */
.custrep-modal--rail { width: 820px; }
.custrep-wrap { display: flex; min-height: 0; flex: 1 1 auto; }
.custrep-rail {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 12px;
  border-right: 1px solid var(--color-border); background: var(--color-surface-page);
  border-radius: 0 0 0 12px; flex: 0 0 168px;
}
.custrep-railstep {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.84rem; color: var(--color-text-muted);
  background: none; border: none; border-radius: 8px; padding: 8px 10px;
}
.custrep-railstep:hover { background: var(--color-accent-tint); }
.custrep-railstep.on { color: var(--color-navy); font-weight: 600; background: var(--color-accent-tint); }
.custrep-railstep.done { color: var(--color-navy); }
.custrep-railstep__n {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; background: var(--color-accent-tint-strong); color: var(--color-navy);
  font-size: 0.82rem; font-weight: 700;
}
.custrep-railstep.on .custrep-railstep__n { background: var(--color-terracotta); color: #fff; }
.custrep-railstep.done .custrep-railstep__n { background: color-mix(in srgb, var(--color-terracotta) 40%, #fff); color: var(--color-navy); }

.custrep-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.custrep-pane__hint { padding: 12px 18px 0; font-size: 0.8rem; color: var(--color-text-muted); }

.custrep-modal__body { padding: 12px 18px; overflow-y: auto; flex: 1 1 auto; }

/* Typeahead de sélection de poste. */
.custrep-picker { position: relative; flex: 1 1 320px; min-width: 220px; }
.custrep-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
  background: #fff; border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(26, 18, 25, 0.16); max-height: 320px; overflow-y: auto; padding: 4px;
}
.custrep-suggest__it {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 6px; padding: 7px 8px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.84rem; color: var(--color-text);
}
.custrep-suggest__it.hi { background: var(--color-accent-tint); }
.custrep-suggest__lab { font-weight: 500; color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custrep-suggest__meta { margin-left: auto; font-size: 0.74rem; color: var(--color-text-muted); white-space: nowrap; padding-left: 8px; }
.custrep-atomkind {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 600; border-radius: 4px; padding: 1px 6px;
  color: var(--color-navy); background: var(--color-accent-tint-strong);
}
.custrep-atomkind.k-section { color: #fff; background: var(--color-accent); }
.custrep-atomkind.k-sous-total { color: var(--color-navy); background: var(--color-accent-soft); }
.custrep-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--color-border);
}
.custrep-modal__hint { font-size: 0.76rem; color: var(--color-text-muted); }

.custrep-form { display: flex; flex-direction: column; gap: 14px; }
.custrep-field { display: flex; flex-direction: column; gap: 6px; }
.custrep-field__lab { font-size: 0.82rem; font-weight: 600; color: var(--color-navy); }

.custrep-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.custrep-choice.col { flex-direction: column; }
.custrep-choicebtn {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.86rem; color: var(--color-text);
  background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 14px; flex: 1 1 200px;
}
.custrep-choicebtn span { font-size: 0.76rem; color: var(--color-text-muted); }
.custrep-choicebtn.on { background: var(--color-accent-tint); border-color: var(--color-navy); }

.custrep-addbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.custrep-tag {
  font-size: 0.72rem; color: var(--color-navy); background: #F7F9FC;
  border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 6px;
}
.custrep-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }
.custrep-hint code { font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; background: var(--color-accent-tint); padding: 0 4px; border-radius: 3px; }

.custrep-calcmain { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.custrep-calcrow1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   PeoplePrintDocument — uniquement les styles de l'overlay et de sa barre.
   La typographie + pagination des rapports vivent dans print/PeoplePrint.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.ppl-print-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #DCDCDC;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ppl-print-controls {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2B203E;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 16px;
  flex-shrink: 0;
}

.ppl-print-controls__left,
.ppl-print-controls__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ppl-print-controls__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.ppl-print-controls__loading {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  animation: ppl-print-pulse 1.2s ease-in-out infinite;
}

@keyframes ppl-print-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

.ppl-print-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
}
.ppl-print-btn--print {
  background: #FFFFFF;
  color: #2B203E;
}
.ppl-print-btn--print:hover:not(:disabled) { background: #F0EDF8; }
.ppl-print-btn--print:disabled {
  opacity: 0.45;
  cursor: default;
}
.ppl-print-btn--close {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
}
.ppl-print-btn--close:hover { background: rgba(255, 255, 255, 0.08); }

@media print {
  /* L'overlay est portalé dans <body> (createPortal) → c'est un frère de #root,
     pas un descendant. On masque donc TOUT le reste (dont #root) en display:none :
     aucune place réservée → pas de page blanche en tête (visibility:hidden
     réservait la hauteur de l'app → pages taupe parasites). */
  body.people-printing > *:not(.ppl-print-overlay) {
    display: none !important;
  }
  /* Pas de fond taupe à l'impression : feuille blanche stricte, sur toute la
     chaîne (html → body → overlay → preview → feuille). */
  html,
  body.people-printing,
  body.people-printing .ppl-print-overlay,
  body.people-printing .ppl-print__preview,
  body.people-printing .ppl-print {
    background: #fff !important;
  }
  body.people-printing .ppl-print-overlay {
    position: static;
    overflow: visible;
  }
  .ppl-print-controls { display: none !important; }
}

/* ── Page de garde simple (titre de section · date · sommaire) ─────────────── */
.ppl-cover {
  break-after: page;
  page-break-after: always;
  padding: 28mm 4mm 0;
}
.ppl-cover__brand {
  font-size: 11pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8c78;
  font-weight: 700;
}
.ppl-cover__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32pt;
  font-weight: 700;
  color: #2B203E;
  letter-spacing: -0.01em;
  margin: 6mm 0 2mm;
}
.ppl-cover__meta {
  font-size: 14pt;
  color: #555;
}
.ppl-cover__date {
  font-size: 10pt;
  color: #9a8c78;
  margin-top: 2mm;
}
.ppl-cover__toc {
  margin-top: 18mm;
  border-top: 1pt solid #2B203E;
  padding-top: 6mm;
}
.ppl-cover__toc-title {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #777;
  font-weight: 600;
  margin-bottom: 4mm;
}
.ppl-cover__toc-list {
  margin: 0;
  padding-left: 6mm;
  font-size: 12pt;
  color: #2B203E;
  line-height: 1.9;
}


/* ── Charges Sociales Page ─────────────────────────────────────────────────── */
/* Palette Logike :
   fond        var(--color-bg) (taupe doux)
   navy        #2B203E
   terracotta  #BA5D4A
   vert sauge  #5C7A3E
   ambré       #B8862A
   bleu input  var(--color-input)
*/

.cs-layout {
  /* Horizontal padding handled by .logike-page-wrap (App.css) */
  max-width: 845px;
  padding: 32px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Embarqué dans un hub à onglets : le hub porte déjà l'espacement haut. */
.cs-layout.is-embedded { padding-top: 0; }

/* ── En-tête ─────────────────────────────────────────────────────────────────── */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cs-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-title {
  font-size: 20px;
  font-weight: 600;
  color: #2B203E;
  letter-spacing: -0.3px;
  margin: 0;
}

.cs-canton-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: #D1FAE5;
  color: #065F46;
}

.cs-annee-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cs-annee-select {
  font-family: inherit;
  font-size: 13px;
  color: #2B203E;
  background: var(--color-bg);
  border: 0.5px solid #DDD8D0;
  border-radius: 6px;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

/* ── Barre d'import (intégrée à la card Cotisations de base) ──────────────────── */
.cs-import {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--color-border);
}

.cs-canton-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
}

.cs-canton-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 0.5px solid #DDD8D0;
  border-radius: 6px;
  background: var(--color-bg);
  color: #2B203E;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cs-canton-btn:hover {
  background: #F0E8D8;
  border-color: #B8862A;
}
.cs-canton-btn--active {
  background: #2B203E;
  color: #fff;
  border-color: #2B203E;
}
.cs-canton-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cs-importing {
  font-size: 12px;
  color: #6B7280;
  font-style: italic;
}

/* ── Pied de section (bouton + Ajouter) ──────────────────────────────────────── */
.cs-section-foot {
  padding: 12px 22px;
}

/* ── Tableau ─────────────────────────────────────────────────────────────────── */
.cs-table-wrap {
  border: 0.5px solid #DDD8D0;
  border-radius: 8px;
  overflow: hidden;
}
/* Embarqué dans une Card flush : pas de double cadre. */
.cs-table-wrap--flush {
  border: none;
  border-radius: 0;
}

/* État vide inline (dans la card Cotisations de base) */
.cs-empty-inline {
  padding: 28px 22px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  table-layout: fixed;
}

/* Largeurs fixes : les colonnes numériques s'ancrent à droite et s'alignent
   d'une card à l'autre (Cotisations de base ↔ Assurances). Le libellé absorbe
   l'espace restant. */
.cs-col-libelle { width: auto; }
.cs-col-num { width: 132px; }
.cs-col-del { width: 52px; }

.cs-table thead {
  background: #F8F6F2;
  border-bottom: 0.5px solid #DDD8D0;
}

.cs-table th {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: right;
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
}
.cs-th-libelle { text-align: left !important; }
.cs-th-calc {
  background: #F0F5FF !important;
  color: var(--color-input) !important;
}

.cs-table td {
  padding: 7px 12px;
  border-bottom: 0.5px solid #EDE8E0;
  vertical-align: middle;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cs-table tbody tr:last-child td {
  border-bottom: none;
}
.cs-table tbody tr:hover {
  background: #FAF8F5;
}

.cs-td-libelle {
  text-align: left !important;
  min-width: 200px;
}
.cs-td-calc {
  color: #4B5563;
  font-weight: 600;
}
.cs-td-plafond {
  font-size: 12px;
  color: #6B7280;
}
.cs-td-notes {
  font-size: 11px;
  color: #9CA3AF;
  text-align: left;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-plafond-none {
  font-size: 11px;
  color: #D1D5DB;
  font-style: italic;
}

/* ── Sous-total ──────────────────────────────────────────────────────────────── */
.cs-subtotal {
  background: #F4F2EE;
  border-top: 1.5px solid #DDD8D0;
}
.cs-subtotal td {
  padding: 8px 12px;
  border-bottom: none;
}
.cs-subtotal-label {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cs-subtotal-val {
  font-size: 13px;
  font-weight: 700;
  color: #2B203E;
  text-align: right;
}

/* ── Boutons ─────────────────────────────────────────────────────────────────── */
.cs-btn-add {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  background: transparent;
  border: 0.5px dashed #DDD8D0;
  border-radius: 6px;
  color: #6B7280;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.12s, color 0.12s;
}
.cs-btn-add:hover {
  background: #F0E8D8;
  color: #2B203E;
  border-color: #B8862A;
}

.cs-btn-delete {
  font-family: inherit;
  font-size: 11px;
  background: transparent;
  color: #9CA3AF;
  border: 0.5px solid #DDD8D0;
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
}
.cs-btn-delete:hover {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #FCA5A5;
}

/* ── Cellules saisie ─────────────────────────────────────────────────────────── */
.cs-cell-saisie {
  display: inline-block;
  min-width: 52px;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-input);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cs-cell-saisie:hover {
  background: var(--color-input-bg);
  color: var(--color-input-text);
}

.cs-cell-libelle {
  cursor: pointer;
  display: inline-block;
  padding: 1px 3px;
  border-radius: 3px;
}
.cs-cell-libelle:hover {
  background: #F0E8D8;
}

.cs-cell-input {
  font-family: inherit;
  font-size: 13px;
  width: 90px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input);
  border-radius: 4px;
  padding: 2px 5px;
  outline: none;
  text-align: right;
  color: var(--color-input-text);
}
.cs-cell-input--text {
  width: 180px;
  text-align: left;
}

/* ── Barre total global ──────────────────────────────────────────────────────── */
.cs-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: #2B203E;
  border-radius: 10px;
  color: #fff;
}

.cs-total-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #C4B8D8;
}

.cs-total-values {
  display: flex;
  align-items: center;
  gap: 0;
}

.cs-total-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
}
.cs-total-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.2);
}

.cs-total-sub {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #C4B8D8;
}
.cs-total-num {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cs-total-num--grand {
  color: #F9C74F;
  font-size: 20px;
}

/* ── Divers ──────────────────────────────────────────────────────────────────── */
.cs-empty {
  text-align: center;
  padding: 60px 20px;
  color: #9CA3AF;
  line-height: 1.8;
}
.cs-loading {
  color: #9CA3AF;
  font-size: 13px;
  text-align: center;
}

/* ── Phasing chips (inline dans Assurances suppl. & LPP) ──────────────── */
.cs-th-phasing { text-align: left; white-space: nowrap; }
.cs-td-phasing { white-space: nowrap; padding: 4px 8px; vertical-align: middle; }
.cs-chips {
  display: inline-flex;
  gap: 3px;
  flex-wrap: nowrap;
}
.cs-chip {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 9px;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid #D6D3D1;
  border-radius: 3px;
  background: white;
  color: #78716C;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cs-chip:hover {
  background: var(--color-bg);
  border-color: #2B203E;
  border-color: var(--color-navy, #2B203E);
}
.cs-chip.is-active {
  background: #5C7A3E;
  color: white;
  border-color: #5C7A3E;
  font-weight: 700;
}
.cs-chip.is-active:hover {
  background: #4A6332;
}

/* ── Recalc LPP button ─────────────────────────────────────────────────── */
.cs-td-actions {
  white-space: nowrap;
  text-align: right;
}
.cs-btn-lpp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  margin-right: 6px;
  background: #EFF5E8;
  background: var(--sage-light, #EFF5E8);
  border: 1px solid #8DC076;
  border: 1px solid var(--sage-mid, #8DC076);
  color: #3D5129;
  color: var(--sage-dark, #3D5129);
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.cs-btn-lpp:hover {
  background: #E2EED1;
  border-color: #5C7A3E;
  border-color: var(--color-sage, #5C7A3E);
}

/* ── Phasing block (sous le bandeau total) ─────────────────────────────── */
.cs-phasing-block {
  margin-top: 16px;
  background: #FFFFFF;
  background: var(--color-card, #FFFFFF);
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  padding: 14px 18px;
}
.cs-phasing-block__title {
  font-size: 13px;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  margin-bottom: 4px;
}
.cs-phasing-block__hint {
  font-size: 11px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  margin-bottom: 10px;
}
.cs-phasing-block__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cs-phasing-block__table td {
  padding: 6px 8px;
  border-bottom: 1px solid #F4EFE5;
  vertical-align: middle;
}
.cs-phasing-block__name {
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  width: 240px;
}
.cs-phasing-block__cells {
  text-align: left;
}

/* ── Table des valeurs calculées (cotisations + assurances par mois) ─────── */
.cs-calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cs-calc-table th {
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  padding: 4px 8px;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
}
.cs-calc-table th:first-child { text-align: left; }
.cs-calc-table td {
  text-align: right;
  padding: 4px 8px;
  border-bottom: 1px solid #F4EFE5;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cs-calc-table__month {
  text-align: left !important;
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}
.cs-calc-table__total { font-weight: 700; color: #2B203E; color: var(--color-navy, #2B203E); }
.cs-calc-table tfoot td {
  border-top: 1px solid #E7E5E4;
  border-top: 1px solid var(--color-border, #E7E5E4);
  border-bottom: none;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}
.cs-calc-table tfoot td:first-child { text-align: left; }

/* Frise de planification — ardoise uniquement, aucune couleur hors charte.
   Trois signaux qui ne se recouvrent pas : le fond (le taux a changé), le
   couloir (combien de temps), le point (c'est le salaire, pas le taux). */
/* Respiration : le titre du panneau, les filtres et la table sont TROIS
   registres différents — les coller les faisait lire comme un seul bloc. */
.pt { margin-top: 16px; }
/* Filtres à gauche (ils raccourcissent la frise), légende à droite.

   UNE SEULE FAMILLE DE CONTRÔLES sur la rangée : le segmenté ardoise de
   Tableau | Frise. La barre standard PersonFilterBar arrive avec son propre
   costume (actif blanc à texte terracotta, hauteurs différentes) — cinq
   contrôles, trois styles, ça se lisait comme un bazar. On la rhabille ICI,
   sans toucher au composant partagé : ailleurs, elle reste elle-même. */
.pt-ctl { display: flex; align-items: center; gap: 16px; row-gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
/* Bascule de groupement : la même que Tableau | Frise (hr-moves__view), pour
   qu'on n'apprenne pas deux fois le même geste. */
.pt-grpsw { display: flex; align-items: center; gap: 8px; }
.pt-grpsw__lb {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.pt-ctl .pfb { gap: 10px; margin-right: 0; }
.pt-ctl .pfb-toggle {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 9px; padding: 2px; gap: 2px;
}
.pt-ctl .pfb-toggle__btn { font-size: 12.5px; padding: 4px 12px; border-radius: 7px; }
.pt-ctl .pfb-toggle__btn.is-active {
  background: var(--color-accent); color: #fff; font-weight: 600; box-shadow: none;
}
/* Sélecteur et recherche : même hauteur, même rayon que les segmentés. */
.pt-ctl .pfb-select, .pt-ctl .pfb-search {
  height: 32px; border-radius: 9px; border: 1px solid var(--color-border);
  padding: 0 10px; font-size: 12.5px;
}
.pt-ctl .pfb-search { min-width: 170px; }
.pt-scroll { overflow-x: auto; }
/* Les mois n'ont que deux ou trois chiffres à porter : étalés sur toute la
   largeur d'un grand écran, ils faisaient 115 px pour « 100 ». La frise est
   donc CADRÉE — colonnes de libellés courtes, piste plafonnée — et calée à
   gauche plutôt qu'étirée. */
.pt-in { min-width: 964px; }

.pt-head {
  display: grid; grid-template-columns: 172px 124px 26px 1fr; grid-gap: 10px; gap: 10px; align-items: end;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.pt-axis { display: block; }
/* Bandeaux d'année : chaque année se NOMME, et un filet plein la sépare de la
   suivante (2026-08-22). Sans eux, deux janviers se confondaient. */
.pt-yband { display: flex; gap: 3px; margin-bottom: 5px; }
.pt-y {
  flex: 1 1; text-align: center; padding: 3px 0; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
}
.pt-y--last:not(.pt-y--first) { background: var(--color-accent); color: #fff; }
.pt-ticks { display: flex; }
/* Fenêtre : la LARGEUR décide du nombre d'années, les flèches du décalage. */
.pt-win { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pt-win em {
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  min-width: 3.6em; text-align: center;
}
.pt-win button {
  width: 26px; height: 26px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.pt-win button:hover:not(:disabled) { border-color: var(--color-accent-soft); color: var(--color-accent); background: var(--color-accent-tint); }
.pt-win button:disabled { opacity: .3; cursor: default; }
.pt-tick {
  flex: 1 1; text-align: center; min-width: 0; overflow: hidden;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border-inner);
}
.pt-tick:first-child { border-left: 0; }
.pt-tick.is-closed { color: var(--color-accent-soft); }

.pt-grp {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 14px 0 5px;
}
/* Le ＋ du groupe reste visible (comme les ＋ du tableau) : c'est une porte
   d'entrée, pas une action de ligne. */
.pt-grp__add .hr-evol__rowbtn { opacity: 1; }
.pt-row {
  display: grid; grid-template-columns: 172px 124px 26px 1fr; grid-gap: 10px; gap: 10px; align-items: center;
  margin-bottom: 3px;
}
.pt-name {
  font-size: 12.5px; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-dept {
  font-size: 11px; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-name--head {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted);
}
/* En-tête pressable : le tri se déclenche sur la colonne elle-même. */
.pt-sort {
  display: flex; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.pt-sort:hover { color: var(--color-accent); }
.pt-sort.is-active { color: var(--color-accent); }
.pt-sort__ind { font-size: 9px; opacity: .55; }
.pt-sort.is-active .pt-sort__ind { opacity: 1; }

.pt-track {
  position: relative; height: 24px; overflow: hidden;
  background: var(--color-surface-th); border-radius: 5px;
}
/* La case porte SON CHIFFRE. Encoder le taux par une hauteur donnait cinq
   pixels d'écart entre 80 et 100 % : illisible. */
.pt-cell {
  position: absolute; top: 0; bottom: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-border) 55%, #fff);
  border-right: 1px solid var(--color-surface-card);
}
.pt-cell b {
  font-size: 10.5px; font-weight: 600; color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Lecture par DÉPARTEMENT : ici la couleur dit une DIRECTION, pas une
   simulation — l'effectif monte ou descend. C'est le seul endroit du module où
   sage et terracotta portent un sens, parce que la question posée est
   « ça monte ou ça descend ? » et non « qui coûte plus cher ? ». */
.pt-cell.is-up { background: color-mix(in srgb, var(--color-sage) 17%, var(--color-surface-card)); }
.pt-cell.is-up b { color: var(--color-sage); font-weight: 700; }
.pt-cell.is-down { background: color-mix(in srgb, var(--color-terracotta) 15%, var(--color-surface-card)); }
.pt-cell.is-down b { color: var(--color-terracotta); font-weight: 700; }
.pt-sw--up { background: color-mix(in srgb, var(--color-sage) 17%, var(--color-surface-card)); }
.pt-sw--dn { background: color-mix(in srgb, var(--color-terracotta) 15%, var(--color-surface-card)); }

/* Un seul fond pour un seul fait : « le taux a bougé ce mois-ci ». */
.pt-cell.is-sim, .pt-cell.is-acted { background: var(--color-accent-tint-strong); }
.pt-cell.is-sim b, .pt-cell.is-acted b { color: var(--color-accent); font-weight: 700; }
.pt-cell.is-zero { background: var(--color-surface-card); box-shadow: inset 0 0 0 1px var(--color-border-inner); }
.pt-cell.is-zero b { color: var(--color-border); }
.pt-cell.is-sim.is-zero { background: color-mix(in srgb, var(--color-accent-tint) 60%, #fff); }
.pt-cell.is-sim.is-zero b { color: var(--color-accent-soft); }

/* Groupée par cause : une barre = un mouvement, posée sur ses mois. Pas de
   profil de taux derrière — c'est la décision qu'on regarde, pas la personne.
   Une colonne de plus (département, avant la valeur) : la grille s'élargit
   d'autant, la piste absorbe la différence. */
.pt-in--cause .pt-head, .pt-in--cause .pt-row { grid-template-columns: 172px 110px 116px 1fr; }
/* Crayon en bout de ligne — révélé au survol seulement (standard charte). */
.pt-act { display: flex; align-items: center; justify-content: center; }
.pt-act .hr-evol__rowbtn { opacity: 0; transition: opacity .12s; }
.pt-row:hover .pt-act .hr-evol__rowbtn, .pt-act .hr-evol__rowbtn:focus-visible { opacity: 1; }
.pt-bar {
  position: absolute; top: 5px; bottom: 5px; z-index: 3;
  border-radius: 3px; opacity: .85;
}
.pt-none {
  font-size: 12.5px; color: var(--color-text-muted); padding: 14px 2px;
}

/* Couloir : la durée du passage, pas l'état d'un mois isolé. */
.pt-cor {
  position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
/* Le salaire ne déforme pas le taux : il lui faut son propre marqueur. */
.pt-sal {
  position: absolute; top: 4px; right: 4px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--color-accent); z-index: 4;
}
/* Mois clos : on n'y planifie plus. */
.pt-closed {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  border-right: 1px dashed var(--color-accent-soft);
}

/* Sous les filtres, à gauche ; l'écart d'avec la frise vit ici. */
.pt-leg {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0 0 26px;
  font-size: 11px; color: var(--color-text-muted); white-space: nowrap;
}
.pt-leg span { display: flex; align-items: center; gap: 6px; }
.pt-sw { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.pt-sw--cor  {
  background: var(--color-accent-tint-strong);
  border-top: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
}
.pt-sw--sal  { background: var(--color-accent); border-radius: 50%; width: 8px; height: 8px; }

/* Filet plein de changement d'année — il traverse la piste et remonte dans
   l'en-tête, pour que la frontière se lise sur toute la hauteur. */
.pt-ysep {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none;
  border-left: 2px solid var(--color-accent-soft);
}
.pt-head .pt-ysep { top: -4px; }

/* ＋ / − sur la ligne d'un DÉPARTEMENT : un poste vacant y naît AVEC son
   département, donc avec son coût de référence. Sur le graphique, il naissait
   sans — c'est ce qui manquait pour le valoriser à cinq ans. */
.pt-plus { display: flex; gap: 3px; justify-content: center; }
.pt-plus button {
  width: 20px; height: 20px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer;
  font-size: 11px; line-height: 1; display: grid; place-items: center; opacity: 0;
  transition: opacity .12s;
}
.pt-row:hover .pt-plus button, .pt-plus button:focus-visible { opacity: 1; }
.pt-plus button:hover { border-color: var(--color-accent-soft); color: var(--color-accent); background: var(--color-accent-tint); }

/* Grille charges sociales 24 mois (N + N+1) — partagée People (Plan masse
   salariale) et Cash forecast (synthèse + phasing). Tokens charte uniquement. */
.scs {
  background: #FFFFFF;
  background: var(--color-card, #FFFFFF);
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 10px;
  overflow: hidden;
}
.scs + .scs { margin-top: 16px; }
.scs__head {
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  padding: 11px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.scs__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}
.scs__sub { font-size: 11px; color: #78716C; color: var(--color-text-muted, #78716C); }
/* Avec la barre de filtre standard (PersonFilterBar) : titre + barre calés à
   gauche (la barre porte margin-right:auto), sub à droite, alignement centré. */
.scs__head:has(.pfb) { align-items: center; gap: 12px; }
.scs__empty { padding: 16px; font-size: 13px; color: #78716C; color: var(--color-text-muted, #78716C); }

.scs__scroll { overflow-x: auto; }
.scs__table {
  /* width:100% → la table remplit la carte quand il y a la place (12 mois) et
     déborde en scroll quand c'est trop large (phasing 24 mois). */
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scs__table th,
.scs__table td { padding: 4px 9px; }

/* Colonne libellé figée à gauche */
.scs__lbl {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
  background: var(--color-card, #FFFFFF);
  text-align: left;
  min-width: 190px;
  color: #57534E;
  color: var(--color-text, #57534E);
  font-weight: 500;
}
.scs__lbl--head { background: #FFFFFF; background: var(--color-card, #FFFFFF); }

.scs__ygrp {
  text-align: center;
  color: #B8862A;
  color: var(--color-amber, #B8862A);
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
  border-left: 2px solid var(--color-border);
  font-weight: 600;
}
.scs__mh {
  text-align: right;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-weight: 600;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
}
.scs__cell { text-align: right; color: #1A1219; color: var(--color-text, #1A1219); }
.scs__cell--ystart { border-left: 2px solid var(--color-border); }
/* Filet réel / futur (premier mois ouvert) — navy, plus marqué que les séparateurs d'année. */
.scs__mh--sep, .scs__cell--sep { border-left: 2px solid #2B203E; border-left: 2px solid var(--color-navy, #2B203E); }

/* Colonne Total annuelle (somme des 12 mois) — séparateur + surlignage charte. */
.scs__mh--total,
.scs__cell--total {
  border-left: 1px solid #E7E5E4;
  border-left: 1px solid var(--color-border, #E7E5E4);
  background: #F1F5F6;
  background: var(--color-accent-tint, #F1F5F6);
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}

.scs__row { border-bottom: 1px solid #F4EFE5; }
.scs__sec td {
  background: #F7F4EE;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-weight: 600;
  position: sticky;
  left: 0;
}

.scs__row--brut .scs__lbl,
.scs__row--brut .scs__cell { color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.scs__row--cost .scs__cell { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); }
.scs__row--empr .scs__cell { color: #B8862A; color: var(--color-amber, #B8862A); }
.scs__row--cash .scs__cell { color: #2563EB; color: var(--color-input, #2563EB); }

/* Sous-totaux de charges (salarié / employeur) : couleur de section, en gras, filet haut. */
.scs__row--subcost td { border-top: 1px solid #E7E5E4; border-top: 1px solid var(--color-border, #E7E5E4); }
.scs__row--subcost .scs__lbl,
.scs__row--subcost .scs__cell { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); font-weight: 700; }
.scs__row--subempr td { border-top: 1px solid #E7E5E4; border-top: 1px solid var(--color-border, #E7E5E4); }
.scs__row--subempr .scs__lbl,
.scs__row--subempr .scs__cell { color: #B8862A; color: var(--color-amber, #B8862A); font-weight: 700; }

/* Ligne de ratio (% des salaires bruts) : atténuée, italique — se lit comme un taux, pas un montant. */
.scs__row--pct .scs__lbl,
.scs__row--pct .scs__cell { color: #78716C; color: var(--color-text-muted, #78716C); font-style: italic; font-weight: 500; }

.scs__row--strong { background: var(--color-accent-tint-strong); }
.scs__row--strong .scs__lbl { background: var(--color-accent-tint-strong); color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.scs__row--strong .scs__cell { color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.scs__row--strong .scs__cell--ystart { border-left-color: var(--color-border); }

/* Synthèse compacte (cash) : 1 ligne par charge, totaux 24 mois */
.scs-syn { width: 100%; border-collapse: collapse; font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.scs-syn th {
  text-align: right; padding: 6px 14px; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #78716C; color: var(--color-text-muted, #78716C); font-weight: 600;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
}
.scs-syn th:first-child { text-align: left; }
.scs-syn td { padding: 5px 14px; text-align: right; border-bottom: 1px solid #F4EFE5; }
.scs-syn td:first-child { text-align: left; color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 500; }
.scs-syn .scs-syn__empr { color: #B8862A; color: var(--color-amber, #B8862A); }
.scs-syn .scs-syn__empl { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); }
/* Colonne échéancier (pastilles de mois) — alignée à gauche, largeur juste. */
.scs-syn th.scs-syn__chips-h { text-align: left; font-weight: 600; }
.scs-syn td.scs-syn__chips { text-align: left; width: 1%; white-space: nowrap; padding: 3px 14px; }
.scs-syn tfoot td {
  border-top: 1px solid #E7E5E4;
  border-top: 1px solid var(--color-border, #E7E5E4); border-bottom: none;
  font-weight: 700; color: #2B203E; color: var(--color-navy, #2B203E);
}

/* Onglet « Charges personnel & sociales » — vue pont accrual → dette → décaissement. */
.fsoc-wrap { overflow-x: auto; }
.fsoc {
  border-collapse: collapse; width: 100%; table-layout: fixed;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.fsoc th, .fsoc td {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border-inner); white-space: nowrap;
}
.fsoc thead th {
  font-weight: 600; color: var(--color-text); text-align: right;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-card);
}
.fsoc thead th.fsoc-lbl { text-align: left; }
/* Sous-libellés réel/prév. (homogène avec le Compte de résultat). */
.fsoc thead tr.fsoc-subhead-af th { font-size: 9px; font-weight: 600; border-bottom: none; padding-top: 0; }
.fsoc thead tr.fsoc-subhead-af th.fsoc-af--a { color: var(--color-accent); }
.fsoc thead tr.fsoc-subhead-af th.fsoc-af--f { color: var(--color-amber); }
/* Colonne libellé bornée (sinon un titre de bloc long élargit toute la colonne
   et serre les mois). Mois ET Total de largeur ÉGALE (le Total n'est plus
   écrasé) ; le % un peu plus étroit. */
.fsoc .fsoc-lbl { text-align: left; padding-left: 1.1rem; width: 200px; white-space: normal; }
.fsoc .fsoc-num { text-align: right; width: 58px; }
.fsoc .fsoc-total { width: 58px; }
.fsoc .fsoc-pct { width: 50px; }
.fsoc .fsoc-total { background: var(--color-surface-result); font-weight: 600; }
.fsoc .is-neg { color: var(--color-terracotta); }

/* En-tête de bloc (Accrual / Décaissement / Solde de dette). */
.fsoc-block td {
  background: var(--color-surface-th); font-weight: 700; color: var(--color-navy);
  border-top: 1px solid var(--color-border); text-transform: none; letter-spacing: 0;
  padding-left: 0.6rem;
}
.fsoc-block__hint { font-weight: 400; font-size: 0.78rem; color: var(--color-text-muted); }
.fsoc-strong .fsoc-lbl { font-weight: 600; color: var(--color-navy); }
.fsoc-debt .fsoc-num { color: var(--color-navy); }

/* Ligne de contrôle. */
.fsoc-check td { border-top: 2px solid var(--color-border); background: var(--color-accent-tint); font-size: 0.8rem; }
.fsoc-ok { color: var(--color-sage); font-weight: 600; }
.fsoc-ko { color: var(--color-terracotta); font-weight: 600; }

/* Bouton d'ouverture de l'échéancier. */
.fsoc-btn {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  border-radius: 8px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.82rem;
  cursor: pointer; color: var(--color-accent);
}
.fsoc-btn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* Pop-up phasing. */
.fsoc-modal__scrim { position: fixed; inset: 0; background: rgba(26,18,25,0.24); z-index: 50; }
.fsoc-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(920px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: 0 18px 48px rgba(26,18,25,0.28); z-index: 51;
}
.fsoc-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface-card);
}
.fsoc-modal__title { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--color-navy); }
.fsoc-modal__x { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.fsoc-modal__body { padding: 1.1rem 1.2rem; }

/* Chevron de regroupement des blocs — révélé au survol (slot fixe, pas de décalage). */
.fsoc .fsoc-caret-slot { display: inline-block; width: 15px; text-align: left; vertical-align: middle; }
.fsoc-chev {
  display: inline-block; width: 11px; height: 11px; vertical-align: middle;
  color: var(--color-accent); transition: transform 0.15s ease, opacity 0.12s ease;
}
.fsoc-chev.is-open { transform: rotate(90deg); }
.fsoc-collapsible { cursor: pointer; }
.fsoc tbody tr.fsoc-collapsible .fsoc-chev { opacity: 0; }
.fsoc tbody tr.fsoc-collapsible:hover .fsoc-chev { opacity: 1; }
/* Totaux mensuels portés par l'en-tête de bloc. */
.fsoc .fsoc-block-tot { font-weight: 600; color: var(--color-navy); }
/* Lignes de détail (charges) : indentées sous l'en-tête de bloc. */
.fsoc-detail-row .fsoc-lbl { padding-left: 2.1rem; }

/* Sous-en-tête de section (Cotisations de base / Assurances) dans un bloc. */
.fsoc-secrow td {
  padding: 0.2rem 0.6rem 0.2rem 1.4rem; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface-th) 45%, transparent);
}

/* En-têtes de bloc alignés à gauche comme « Salaires bruts » : le chevron passe
   en absolu dans la marge, le titre démarre au même retrait (1.4rem). */
.fsoc-block .fsoc-lbl { position: relative; }
.fsoc-block .fsoc-caret-slot {
  position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%); width: auto;
}
/* Colonne % (part des salaires bruts). */
.fsoc .fsoc-pct { color: var(--color-text-muted); font-size: 0.78rem; min-width: 3.4rem; }

/* Démarcation réel / planifié : filet vertical à gauche du 1er mois planifié. */
.fsoc .fsoc-fc-start { border-left: 2px solid #B7C7CD; border-left: 2px solid var(--color-accent-soft, #B7C7CD); }

/* Ligne « Postes ouverts (Assurances sociales) » dans le décaissement (payé en janvier). */
.fsoc-open-row .fsoc-lbl { color: var(--color-navy); }

/* Champ « Masse salariale déclarée » — en tête de l'onglet, pilote le
   décaissement des assurances. */
.fsoc-declared {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 4px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.fsoc-declared__lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--color-text); font-weight: 600;
}
.fsoc-declared__in {
  width: 140px; padding: 4px 8px; text-align: right;
  border: 1px solid var(--color-field-focus); border-radius: 5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.fsoc-declared__cur { color: var(--color-text-muted); font-weight: 400; }
.fsoc-declared__hint { font-size: 0.74rem; color: var(--color-text-muted); }
.fsoc-declared__reset {
  margin-left: 8px; border: none; background: none; cursor: pointer;
  color: var(--color-accent); font-size: 0.74rem;
}

/* Ligne de référence « Bilan, Assurances sociales » — solde comptabilisé,
   connecté au bilan (comparaison avec la dette calculée). Grisé, non sommé. */
.fsoc-bilan-ref .fsoc-lbl { color: var(--color-text-muted); padding-left: 1.6rem; }
.fsoc-bilan-ref .fsoc-num { color: var(--color-text-muted); }

/* Ligne de total d'un bloc, sous les lignes sommées. */
.fsoc-blocktotal td {
  font-weight: 700; color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}
.fsoc-blocktotal .fsoc-lbl { padding-left: 1.1rem; }
/* Total cumulé (running) : plus léger, italique. */
.fsoc-cumul td { font-weight: 600; color: var(--color-text-muted); border-top: none; }

/* Cards séparées (Salaires · Décaissement · Charges calculées · Solde dette). */
.fsoc-cards { display: flex; flex-direction: column; gap: 16px; }

/* Bouton échéancier mis en évidence (accent plein). */
.fsoc-btn--primary {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
.fsoc-btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); filter: brightness(0.95); }

/* Card Bilan : colonnes Total / % vidées mais conservées (alignement inchangé
   avec les autres cards). */
.fsoc--notot .fsoc-total, .fsoc--notot .fsoc-pct { visibility: hidden; }
.fsoc--notot .fsoc-total { background: transparent; }

/* Synthèse des totaux des autres cards, dans la card Salaires. */
.fsoc-synth .fsoc-lbl { color: var(--color-text-muted); }
.fsoc-synth .fsoc-num { color: var(--color-navy); font-weight: 600; }
.fsoc-synth--top td { border-top: 1px solid var(--color-border); }

/* ── Une seule card, groupes repliables (2026-08-17) ─────────────────────────
   Standard : libellés alignés sur une GOUTTIÈRE FIXE (le chevron n'écarte pas le
   texte), chevron révélé au SURVOL seulement, sous-totaux en gras. */
.fsoc tr.fsoc-grp { cursor: pointer; }
.fsoc tr.fsoc-grp > td { background: var(--color-accent-tint); font-weight: 700; }
.fsoc .fsoc-gut { display: inline-block; width: 16px; }
.fsoc .fsoc-chev {
  display: inline-block; width: 16px; font-size: 10px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease, transform .15s ease;
}
.fsoc tr.fsoc-grp:hover .fsoc-chev { opacity: 1; }
.fsoc .fsoc-chev.is-open { transform: rotate(90deg); }
/* Tous les libellés démarrent au même x : la gouttière porte le chevron. */
.fsoc .fsoc-lbl { padding-left: 10px; }
.fsoc tr.fsoc-detail-row .fsoc-lbl,
.fsoc tr.fsoc-bilan-ref .fsoc-lbl,
.fsoc tr.fsoc-blocktotal .fsoc-lbl { padding-left: 10px; }

/* Bandeau standard réel / prévisionnel (modèle Plan services · CLAUDE.md). */
.fsoc thead tr.fsoc-bandrow th { border-bottom: 0; padding-bottom: 4px; }
.fsoc thead th.fsoc-band {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px;
}
.fsoc thead th.fsoc-band--real { background: var(--color-accent-tint-strong); color: var(--color-on-tint); border-radius: 6px 0 0 6px; }
.fsoc thead th.fsoc-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }

/* Total et % ne se chevauchent plus : largeurs explicites, chiffres tabulaires. */
.fsoc .fsoc-total { width: 92px; min-width: 92px; }
.fsoc .fsoc-pct { width: 74px; min-width: 74px; padding-left: 8px; }
.fsoc .fsoc-num, .fsoc .fsoc-total { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Deuxième niveau : « Cotisations de base » se déplie sur ses charges. */
.fsoc tr.fsoc-sub { cursor: pointer; }
.fsoc tr.fsoc-sub:hover .fsoc-chev { opacity: 1; }
.fsoc tr.fsoc-detail2 .fsoc-lbl { color: var(--color-text-muted); }

/* Alignement STRICT des libellés : la cellule est un flex, la gouttière (chevron
   ou vide) est un bloc de 16 px, le texte occupe le reste — une ligne qui passe
   à la ligne reste donc alignée sur la première (retour Olivier 2026-08-17). */
.fsoc td.fsoc-lbl { display: flex; align-items: baseline; gap: 0; }
.fsoc td.fsoc-lbl > .fsoc-gut,
.fsoc td.fsoc-lbl > .fsoc-chev { flex: 0 0 16px; }

/* Une ligne au libellé atténué porte des VALEURS atténuées : le gris dit le
   niveau de détail, il doit valoir pour toute la ligne (retour Olivier
   2026-08-17). */
.fsoc tr.fsoc-detail2 > td,
.fsoc tr.fsoc-bilan-ref > td { color: var(--color-text-muted); }
.fsoc tr.fsoc-detail2 > td.fsoc-total,
.fsoc tr.fsoc-bilan-ref > td.fsoc-total { color: var(--color-text-muted); font-weight: 400; }

/* Trajectoire des effectifs — même grammaire que les autres tables du module :
   filets internes, en-tête en petites capitales, cellule éditable en bleu SANS
   cadre (charte : on n'encadre jamais une valeur éditable). */
.trj {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.trj__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--color-border);
}
.trj__title {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.trj__hint {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--color-text-muted);
}
/* Indexation : UNE cellule éditable, en %, valable pour tous les départements. */
.trj__index {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.trj__index input {
  width: 62px; font: inherit; font-size: 13px; font-weight: 600; text-align: right;
  letter-spacing: 0; text-transform: none;
  color: var(--color-field-focus); background: transparent;
  border: 0; border-bottom: 1px solid transparent; padding: 2px 3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.trj__index input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }
.trj__index span { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0; }

.trj__scroll { overflow-x: auto; }
.trj__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trj__table th, .trj__table td {
  padding: 9px 12px; border-bottom: 1px solid var(--color-border-inner);
  text-align: right; white-space: nowrap; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.trj__lbl { text-align: left !important; font-weight: 600; color: var(--color-text); }
.trj__y {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.trj__y small {
  display: block; margin-top: 2px; font-size: 9px; font-weight: 500; letter-spacing: .04em;
}
.trj__y--contract { color: var(--color-accent); }
.trj__y--strat { color: var(--color-amber); }
/* Années sous contrat : elles se LISENT. Le fond ardoise clair dit « pas ici ». */
.trj__cell--contract { background: var(--color-accent-tint); color: var(--color-text-muted); }
.trj__cell input {
  width: 66px; font: inherit; font-size: 13px; font-weight: 600; text-align: right;
  color: var(--color-field-focus); background: transparent;
  border: 0; border-bottom: 1px solid transparent; padding: 2px 3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.trj__cell input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }
.trj__cell input:disabled { color: var(--color-border); cursor: not-allowed; }
.trj__gen { display: block; font-size: 10.5px; font-weight: 500; margin-top: 2px; }
.trj__gen.is-up { color: var(--color-sage); }
.trj__gen.is-dn { color: var(--color-terracotta); }
.trj__cell--ref { color: var(--color-text-muted); }
.trj__cell--total { font-weight: 700; color: var(--color-accent); }
.trj__table tfoot td { border-top: 1px solid var(--color-border); border-bottom: 0; }
.trj__missing { color: var(--color-terracotta); font-weight: 600; }
.trj__note {
  margin: 0; padding: 12px 18px 14px; font-size: 12px; color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-inner);
}

/* ── Le bloc « argent » du pied : quatre lignes, dans l'ordre où le coût se
   construit. Les années extrapolées se DISENT — italique, pas une couleur :
   ce n'est pas une alerte, c'est une nature de chiffre. */
.trj__gap td { padding: 4px 0 !important; border: 0 !important; }
.trj__money td { border-bottom: 1px solid var(--color-border-inner); }
.trj__money .trj__lbl { font-weight: 500; color: var(--color-text-muted); }
.trj__money .trj__lbl small {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--color-text-muted); opacity: .8;
}
.trj__cell--est { font-style: italic; }
.trj__money--total td {
  border-top: 1px solid var(--color-border); border-bottom: 0;
  font-weight: 700; color: var(--color-navy); padding-top: 10px;
}
.trj__money--total .trj__lbl { color: var(--color-navy); font-weight: 700; }

/* Evolution pluriannuelle (People → Planification du personnel). Tokens charte
   uniquement. Mise en page : tableau synthétique à gauche, graphique à droite. */
.pev {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
/* Espace partagé 50/50 ; les deux cards alignées en hauteur. */
.pev__table { flex: 1 1 50%; min-width: 0; }
.pev__chart {
  flex: 1 1 50%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}
/* Annule la marge d'empilement .scs + .scs (cards côte à côte ici) : sinon la
   2e card descend de 16px et les en-têtes ne s'alignent plus. */
.pev .scs + .scs { margin-top: 0; }

/* Le tableau réutilise les styles .scs ; colonnes resserrées pour tenir sans
   scroll horizontal (au moins en kCHF). */
.pev__table .scs__lbl { min-width: 150px; }
.pev__table .scs__mh,
.pev__table .scs__cell { min-width: 56px; }
/* Un peu d'air vertical : la grille 7 colonnes paraissait serrée. */
.pev__table .scs__table th,
.pev__table .scs__table td { padding-top: 6px; padding-bottom: 6px; }

/* Colonne de l'année courante (N) — surlignage charte. */
.pev__yh--cur,
.pev__cell--cur {
  background: #F1F5F6;
  background: var(--color-accent-tint, #F1F5F6);
}
.pev__yh--cur { color: #2B203E; color: var(--color-navy, #2B203E); }

/* Étiquette « est. » sur les années estimées (taux de N repris). */
.pev__est {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B8862A;
  color: var(--color-amber, #B8862A);
}

/* Séparateur avant le bloc EPT / effectif. */
.pev__row--sep td { border-top: 1px solid #E7E5E4; border-top: 1px solid var(--color-border, #E7E5E4); }

.pev__chart-body {
  padding: 10px 8px 8px;
  flex: 1 1;            /* occupe la hauteur de la card étirée */
  min-height: 320px;  /* garde le graphique lisible si la card est courte */
}

/* Infobulle du graphique. */
.pev-tip {
  background: #FFFFFF;
  background: var(--color-card, #FFFFFF);
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  box-shadow: 0 4px 14px rgba(43, 32, 62, 0.10);
}
.pev-tip__year { font-weight: 700; color: #2B203E; color: var(--color-navy, #2B203E); margin-bottom: 4px; }
.pev-tip__row { display: flex; align-items: center; color: #1A1219; color: var(--color-text, #1A1219); }
.pev-tip__sw { width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.pev-tip__sw--cost { background: #2B203E; }
.pev-tip__sw--fte { background: #B8862A; }

@media (max-width: 1080px) {
  .pev { flex-direction: column; }
  .pev__table,
  .pev__chart { flex: 1 1 auto; width: 100%; }
}

/* Bandeau lecture seule — tokens de charte uniquement. Ardoise, pas terracotta :
   l'absence de droit d'écriture est un état normal, pas une alerte. */
.ro-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--color-accent-tint);
  color: var(--color-text);
  font-size: 13px;
}
.ro-banner__tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface-card);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Plan de calcul LCR — UNE ligne de tuiles, l'équation se lit de gauche à
   droite. PAS de card autour (retouche du soir) : une card blanche qui
   contient des tuiles blanches, c'est un cadre dans un cadre — les tuiles
   posent directement sur le fond de page, et respirent. Tokens charte. */
/* Le plan est la première chose sous la barre d'onglets : il lui faut de
   l'air au-dessus, sinon les tuiles collent aux onglets et l'écran démarre
   serré (2026-08-23). */
.lcrp {
  margin: 22px 0 34px;
  overflow-x: auto;
}
.lcrp__cap {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 18px;
}
.lcrp__cap small {
  font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  text-transform: none; color: var(--color-text-muted); margin-left: 6px;
}
.lcrp__row {
  min-width: 880px;
  display: flex; align-items: stretch; gap: 12px;
}
.lcrp__op {
  flex: 0 0 auto; width: 16px; align-self: center; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--color-text-muted);
}
.lcrp__op--plus { color: var(--color-sage); }
.lcrp__op--div  { font-size: 17px; }

/* Une tuile = une étape. Cliquable : elle réduit le tableau à ses colonnes. */
.lcrp-tile {
  position: relative;
  flex: 1 1; min-width: 0;
  display: block; text-align: left; font: inherit; cursor: pointer;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 10px; padding: 14px 16px 28px;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
/* Affordance : un MOT, pas un glyphe. Le chevron seul, même visible au repos,
   ne disait pas ce qu'il ouvrait — « Voir le détail » ne laisse aucun doute,
   et le chevron pivote vers le bas quand le détail est affiché. */
.lcrp-go {
  position: absolute; left: 16px; bottom: 7px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--color-accent);
  transition: gap .14s;
}
.lcrp-go i { font-style: normal; font-size: 13px; line-height: 1; transition: transform .14s; }
.lcrp-tile:hover .lcrp-go { gap: 6px; }
.lcrp-tile.is-active .lcrp-go i,
.lcrp-res.is-active .lcrp-go i { transform: rotate(90deg); }
.lcrp-tile:hover {
  border-color: var(--color-accent-soft); background: var(--color-accent-tint);
  transform: translateY(-1px); box-shadow: 0 3px 8px rgba(26, 18, 25, .08);
}
.lcrp-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lcrp-tile.is-active {
  border-color: var(--color-accent); background: var(--color-accent-tint);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.lcrp-tile--res { border-color: var(--color-accent-soft); background: var(--color-accent-tint); }
.lcrp-tile__k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcrp-tile__v {
  display: block; font-size: 17px; font-weight: 600; color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lcrp-tile__v small { font-size: 10.5px; font-weight: 500; color: var(--color-text-muted); margin-left: 3px; }

/* Le résultat — même gabarit que les tuiles, poids visuel de la conclusion. */
.lcrp-res {
  position: relative;
  flex: 1.1 1; min-width: 0;
  display: block; text-align: left; font: inherit; cursor: pointer;
  border: 0; border-radius: 10px; padding: 14px 16px 28px;
  background: var(--color-accent); color: #fff;
  transition: box-shadow .14s, transform .14s;
}
.lcrp-res .lcrp-go { color: rgba(255, 255, 255, .82); }
.lcrp-res:hover { box-shadow: 0 0 0 2px var(--color-accent-soft); transform: translateY(-1px); }
.lcrp-res:hover .lcrp-go { gap: 6px; color: #fff; }
.lcrp-res:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.lcrp-res.is-active { box-shadow: 0 0 0 2px var(--color-navy); }
.lcrp-res__k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .8; margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcrp-res__v {
  display: block; font-size: 17px; font-weight: 700; line-height: 1.15;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lcrp-res__v small { font-size: 10.5px; font-weight: 500; opacity: .8; margin-left: 4px; }

/* Récit du coût horaire — ce qui lui est PROPRE. Le cadre, les chapitres, les
   chiffres-clés et le rail viennent de `PeopleStory.css` : deux récits, une
   seule grammaire. Ici, seulement les barres de méthode et la table finale. */

/* Barre de méthode : libellé, jauge, valeur. La jauge n'est pas décorative —
   elle donne l'ordre de grandeur d'une déduction d'un coup d'œil. */
/* Plafonds relevés le 2026-08-22 : à 940 px, les barres s'arrêtaient au tiers
   d'un écran large alors que la lecture d'une cascade gagne à s'étaler — plus
   la piste est longue, plus une déduction de 3 % reste visible. */
.ccs-bars { margin-top: clamp(12px, 2.2vh, 40px); max-width: clamp(520px, 60cqw, 900px); }

/* Tableau du calendrier — jours, heures, écart à l'exercice précédent.
   Remplace les barres : une longueur ne dit rien quand la question est
   « combien d'heures », et les deux colonnes révèlent que les jours rattrapés
   retirent des jours sans retirer une heure. */
.ccs-caltbl { margin-top: clamp(12px, 2.2vh, 40px); overflow-x: auto; }
.ccs-cal {
  border-collapse: collapse; width: 100%; max-width: clamp(520px, 62cqw, 860px);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; font-size: 12px; font-size: clamp(12px, 1.1cqw, 15px);
}
.ccs-cal th {
  font-size: .8em; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-muted);
  text-align: right; padding: 0 0 8px; white-space: nowrap;
}
.ccs-cal th:first-child { text-align: left; }
.ccs-cal th + th, .ccs-cal td + td { padding-left: 1.8em; }
.ccs-cal td {
  padding: .38em 0; text-align: right;
  border-top: 1px solid var(--color-border-inner); color: var(--color-text);
}
.ccs-cal td:first-child { text-align: left; padding-right: 2em; }
.ccs-cal td small {
  display: block; font-size: .8em; font-weight: 400; color: var(--color-text-muted);
}
.ccs-cal .is-cut td { color: var(--color-text-muted); }
.ccs-cal .is-nil { color: var(--color-text-muted); font-weight: 400; }
.ccs-cal .is-lvl td {
  font-weight: 700; background: var(--color-accent-tint); border-top-color: var(--color-border);
}
.ccs-cal .is-fin td {
  font-weight: 700; background: var(--color-accent-tint-strong);
  border-top: 1px solid var(--color-accent-soft);
}
.ccs-cal .is-fin td:nth-child(2), .ccs-cal .is-fin td:nth-child(3) { color: var(--color-accent); }
.ccs-cal .is-lvl td:first-child, .ccs-cal .is-fin td:first-child { border-radius: 4px 0 0 4px; padding-left: .6em; }
.ccs-cal .is-lvl td:last-child, .ccs-cal .is-fin td:last-child { border-radius: 0 4px 4px 0; padding-right: .6em; }
/* Écart : favorable = la base monte, défavorable = elle recule. */
.ccs-cal__d { font-weight: 600; white-space: nowrap; }
.ccs-cal__d.is-up { color: var(--color-sage); }
.ccs-cal__d.is-dn { color: var(--color-terracotta); }
.ccs-cal__d.is-flat { color: var(--color-text-muted); font-weight: 400; }
.ccs-cal__d b { display: block; font-size: .92em; }
.ccs-cal__d b.is-up { color: var(--color-sage); }
.ccs-cal__d b.is-dn { color: var(--color-terracotta); }

/* Volet sombre. */
.pst-slide--deep .ccs-cal td { color: #fff; border-top-color: rgba(255, 255, 255, .16); }
.pst-slide--deep .ccs-cal th,
.pst-slide--deep .ccs-cal td small,
.pst-slide--deep .ccs-cal .is-cut td,
.pst-slide--deep .ccs-cal .is-nil { color: rgba(255, 255, 255, .68); }
.pst-slide--deep .ccs-cal .is-lvl td { background: rgba(255, 255, 255, .1); }
.pst-slide--deep .ccs-cal .is-fin td { background: rgba(255, 255, 255, .16); }
.pst-slide--deep .ccs-cal .is-fin td:nth-child(2),
.pst-slide--deep .ccs-cal .is-fin td:nth-child(3) { color: #fff; }
.ccs-bar {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 4fr) 96px;
  grid-gap: 12px;
  gap: 12px; align-items: center; margin-bottom: 4px; font-size: 12.5px;
}
/* Unité du bloc de barres : discrète, calée à droite au-dessus des montants. */
.ccs-unit {
  text-align: right; font-size: .78em; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px;
}
.pst-slide--deep .ccs-unit { color: rgba(255, 255, 255, .68); }
.ccs-bar__k { color: var(--color-text); }
.ccs-bar__k small { display: block; font-size: 11px; color: var(--color-text-muted); }
.ccs-bar__t {
  height: 14px; border-radius: 4px; background: var(--color-border-inner);
  position: relative; overflow: hidden;
}
.ccs-bar__f {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--color-accent); border-radius: 4px;
}
.ccs-bar__f--soft { background: var(--color-accent-soft); }
/* Ligne de déduction : pas de piste, seul le segment retiré se voit. */
.ccs-bar__t--cut { background: transparent; }
.ccs-bar__f--amber { background: var(--color-amber); }
.ccs-bar__v { text-align: right; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ccs-bar--total {
  border-top: 1px solid var(--color-border); padding-top: 7px; margin-top: 9px; font-weight: 700;
}
.ccs-bar--total .ccs-bar__v { color: var(--color-accent); }
/* Cellule à saisir : texte bleu SANS cadre (charte) — soulignement au focus. */
.ccs-bar__v input {
  width: 96px; font: inherit; font-size: 13px; font-weight: 700; text-align: right;
  color: var(--color-field-focus); background: transparent;
  border: 0; border-bottom: 1px solid transparent; padding: 1px 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ccs-bar__v input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }

/* Barres empilées : le CCR se lit comme une somme, pas comme un total opaque. */
.ccs-stacks { margin-top: clamp(12px, 2.2vh, 40px); max-width: clamp(560px, 86cqw, 1340px); }
.ccs-stack {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 5fr) 96px;
  grid-gap: 12px;
  gap: 12px; align-items: center; margin-bottom: 6px; font-size: 13px;
}
.ccs-stack__b { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--color-border-inner); }
.ccs-stack__b i {
  display: grid; place-items: center; font-style: normal;
  font-size: 10.5px; font-weight: 700; color: #fff; overflow: hidden;
}
.ccs-stack__b .s1 { background: var(--color-accent); }
.ccs-stack__b .s2 { background: var(--color-accent-soft); color: var(--color-navy); }
.ccs-stack__b .s3 { background: var(--color-amber); }
.ccs-stack__v { text-align: right; font-weight: 700; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ccs-stack--avg {
  font-style: italic; border-bottom: 1px solid var(--color-border);
  padding-bottom: 7px; margin-bottom: 9px;
}
.ccs-lgd { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--color-text-muted); }
.ccs-lgd span { display: flex; align-items: center; gap: 6px; }
.ccs-lgd i { width: 12px; height: 12px; border-radius: 3px; }
.ccs-lgd .s1 { background: var(--color-accent); }
.ccs-lgd .s2 { background: var(--color-accent-soft); }
.ccs-lgd .s3 { background: var(--color-amber); }

/* Table finale — quelques lignes des deux bouts, pas la table complète. */
.ccs-pp { width: 100%; max-width: clamp(560px, 88cqw, 1380px); border-collapse: collapse; margin-top: 20px; font-size: 13px; }
.ccs-pp th, .ccs-pp td {
  padding: 6px 10px; border-bottom: 1px solid var(--color-border-inner);
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.ccs-pp th { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.ccs-pp td:first-child, .ccs-pp th:first-child { text-align: left; font-weight: 600; }
.ccs-pp td:nth-child(2), .ccs-pp th:nth-child(2) { text-align: left; font-weight: 400; color: var(--color-text-muted); }
.ccs-pp__ccr { color: var(--color-accent); font-weight: 700; }
.ccs-pp__gap { text-align: center !important; color: var(--color-text-muted); font-weight: 400 !important; }

/* Porte de sortie vers l'écran de saisie — un chapitre montre la méthode, il
   ne la modifie pas (sauf la base de charges indirectes, qui ne se déduit de
   rien). */
.ccs-src { margin-top: clamp(16px, 3vh, 38px); display: flex; flex-wrap: wrap; gap: 10px; }
.ccs-go {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--color-accent); background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-soft); border-radius: 9px; padding: 6px 12px;
}
.ccs-go:hover { background: var(--color-accent-tint-strong); }
.ccs-go small { font-weight: 400; color: var(--color-text-muted); }

/* ── Volet sombre : surcharges APRÈS les règles générales — à spécificité
   égale, c'est l'ordre qui tranche. Sans ça, une jauge ardoise sur fond
   ardoise et une table sombre sur sombre. ─────────────────────────────────── */
.pst-slide--deep .ccs-bar__k { color: #fff; }
.pst-slide--deep .ccs-bar__k small { color: rgba(255, 255, 255, .68); }
.pst-slide--deep .ccs-bar__t { background: rgba(255, 255, 255, .14); }
.pst-slide--deep .ccs-bar__t--cut { background: transparent; }
.pst-slide--deep .ccs-bar__f { background: #fff; }
.pst-slide--deep .ccs-bar__f--soft { background: rgba(255, 255, 255, .5); }
.pst-slide--deep .ccs-bar__v { color: #fff; }
.pst-slide--deep .ccs-bar--total { border-top-color: rgba(255, 255, 255, .35); }
.pst-slide--deep .ccs-bar--total .ccs-bar__v { color: #fff; }
.pst-slide--deep .ccs-pp th { color: rgba(255, 255, 255, .68); }
.pst-slide--deep .ccs-pp td { color: #fff; border-bottom-color: rgba(255, 255, 255, .16); }
.pst-slide--deep .ccs-pp td:nth-child(2) { color: rgba(255, 255, 255, .7); }
.pst-slide--deep .ccs-pp__ccr { color: #fff; }
.pst-slide--deep .ccs-pp__gap { color: rgba(255, 255, 255, .55) !important; }
.pst-slide--deep .ccs-go {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff;
}
.pst-slide--deep .ccs-go:hover { background: rgba(255, 255, 255, .2); }
.pst-slide--deep .ccs-go small { color: rgba(255, 255, 255, .7); }


/* Mapping comptes P&L et Bilan */

.mx-count        { font-size: 12px; color: var(--color-text-muted); align-self: center; }
.mx-count--warn  { color: var(--amber-dark); font-weight: 600; }

.pl-mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Rows plus compacts ────────────────────────────────────────────────────── */
.mx-list th { padding: 6px 12px; }
.mx-list td { padding: 3px 12px; }

.mx-col-num  { width: 110px; }
.mx-col-line { width: 300px; }

/* ── Reporting line : select sans encadrement ──────────────────────────────── */
.mx-line-select {
  font-family: inherit;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  padding: 2px 2px;
  width: 100%;
  appearance: auto;
}
.mx-line-select:hover  { color: var(--color-navy); }
.mx-line-select:focus  { outline: 1px solid var(--color-border); border-radius: 3px; }
.mx-line-select option, .mx-line-select optgroup { background: var(--color-card); }

/* ── États lignes ──────────────────────────────────────────────────────────── */
.page-table tbody tr.mx-row-unmapped td { background: var(--amber-light); }
.mx-paintable { cursor: pointer; }
.page-table tbody tr.mx-paintable:hover td {
  background: var(--color-value-bg);
  box-shadow: inset 3px 0 0 var(--color-value);
}

/* ── Ligne ajout manuel ────────────────────────────────────────────────────── */
.mx-add-row td {
  padding: 6px 12px;
  background: #F8FAFD;
  border-top: 1px solid var(--color-border);
}

.mx-add-input {
  font-family: inherit;
  font-size: 13px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  background: var(--color-card);
  color: var(--color-text);
  width: 100%;
}
.mx-add-input--num { width: 80px; }
.mx-add-input:focus { border-color: var(--color-navy); outline: none; }

.mx-add-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.mx-add-btn:hover:not(:disabled) { background: var(--navy-light); border-color: var(--color-navy); color: var(--color-navy); }
.mx-add-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Mode édition : sélection + suppression ────────────────────────────────── */
.mx-editbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-accent-tint);
}
.mx-edit-count   { font-size: 12px; color: var(--color-text-muted); }
.mx-edit-actions { display: flex; align-items: center; gap: 8px; }

.mx-col-check       { width: 34px; text-align: center; }
.mx-col-check input { cursor: pointer; accent-color: var(--color-accent); }

.mx-selectable { cursor: pointer; }
.page-table tbody tr.mx-row-selected td {
  background: var(--color-accent-tint-strong);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.mx-del-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border: 0.5px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
  background: var(--color-terracotta);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.mx-del-btn:disabled { opacity: 0.4; cursor: default; }

.mx-chip:disabled { opacity: 0.4; cursor: default; }

/* ── Barre brush + palette ─────────────────────────────────────────────────── */
.mx-brushbar {
  border: 1px solid var(--navy-mid);
  background: var(--navy-light);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mx-brush-hint { font-size: 13px; color: var(--color-text); }

.mx-palette      { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mx-pal-group    { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mx-pal-sec {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-right: 2px;
}

.mx-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.mx-chip:hover                { border-color: var(--color-navy); }
.mx-chip.is-active            { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.mx-chip--unmap               { color: var(--terracotta-dark); }
.mx-chip--unmap.is-active     { background: var(--color-terracotta); border-color: var(--color-terracotta); color: #fff; }

/* Éditeur de structure générique (sections → lignes). Charte : tokens index.css. */
.fstruct-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fstruct-head {
  padding: 10px 16px;
  background: var(--color-surface-card);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}
.fstruct-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-card);
}
/* Grille plafonnée à N cartes par ligne (ex. P&L = 2), remplie ligne par ligne. */
.fstruct-body--cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.fstruct-body--cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* Colonnes fixes côte à côte (ex. Bilan : Actif | Passif). Pas de card englobante. */
.fstruct-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
/* Colonnes (chemin `columns`, exclusif à la Structure Bilan) : chaque colonne
   Actif / Passif / Autres groupes est une card charte (corps blanc arrondi +
   ombre), pour les distinguer visuellement. */
.fstruct-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 14px 16px;
}
.fstruct-col-h {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-navy);
  padding: 2px 2px 0;
}

.fstruct-sec {
  min-width: 220px;
  flex: 1 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fstruct-sec-h {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface-structure);   /* sable — en-tête de table de structure (P&L + Bilan) */
  font-weight: 600;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid var(--color-border-structure);
  box-sizing: border-box;
}
.fstruct-sec-h:focus { outline: 2px solid var(--color-field-focus); }
.fstruct-sec-input { cursor: text; }
.fstruct-line {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-bottom: 0.5px solid var(--color-border);
}
/* Le libellé pousse les contrôles à droite ; petite marge pour aérer. */
.fstruct-line > .fstruct-input { margin-right: 6px; }
.fstruct-input {
  flex: 1 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  padding: 2px 4px;
}
.fstruct-input:focus { outline: 1px solid var(--color-input); border-radius: 2px; }
.fstruct-ic {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 12px; padding: 2px 4px;
}
.fstruct-ic:hover { color: var(--color-navy); }
.fstruct-ic:disabled { opacity: 0.3; cursor: default; }
.fstruct-del:hover { color: var(--color-terracotta); }

/* Pastille de rôle protégé (P&L) */
.fstruct-roletag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--stone-100);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}

/* Sélecteur de type de revenu (P&L, section revenue) */
.fstruct-revtype {
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--color-navy);
  /* Sélecteur de nature (revenus) mis en évidence en jaune léger (famille amber). */
  background: color-mix(in srgb, #B8862A 14%, #fff);
  background: color-mix(in srgb, var(--color-amber, #B8862A) 14%, #fff);
  border: 1px solid color-mix(in srgb, #B8862A 45%, var(--color-border));
  border: 1px solid color-mix(in srgb, var(--color-amber, #B8862A) 45%, var(--color-border));
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* Pastille TVA (P&L, section revenue) — toujours visible ; active = avec TVA
   (défaut), inactive = hors TVA / export (no_vat). Famille amber. */
.fstruct-vat {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 10px;
  padding: 2px 7px;
  cursor: pointer;
  text-decoration: line-through;   /* inactive = « barrée » (sans TVA) */
}
.fstruct-vat:hover { border-color: var(--color-amber); color: var(--color-amber); }
.fstruct-vat.is-on {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: #fff;
  text-decoration: none;
}

/* Pastille lien stock (P&L, section cogs) — active = mise en évidence (ardoise),
   inactive = grisée. */
.fstruct-stock {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  line-height: 1.4;
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
}
.fstruct-stock__ic { font-size: 13px; line-height: 1; }
.fstruct-stock:hover { border-color: var(--color-accent); color: var(--color-accent); }
.fstruct-stock.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Pastille œil (P&L, toutes lignes) — œil ouvert = visible, œil barré = masqué. */
.fstruct-eye {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-text-muted);
  padding: 2px 4px;
  cursor: pointer;
}
.fstruct-eye:hover { color: var(--color-navy); }
.fstruct-eye.is-off { color: var(--color-terracotta); }

/* Jeton BFRE (Bilan) — actif / inactif */
.fstruct-bfre {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
}
.fstruct-bfre:hover { border-color: var(--navy-mid); color: var(--color-navy); }
.fstruct-bfre.is-on {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.fstruct-bfre.is-locked { cursor: default; opacity: 0.85; }
.fstruct-bfre.is-locked:hover { border-color: var(--color-navy); }
/* Ajout supplémentaire (non obligatoire) : vert sage, distinct du navy figé. */
.fstruct-bfre.is-on.is-extra {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: #fff;
}
.fstruct-bfre.is-on.is-extra:hover { border-color: var(--color-sage); }

/* Libellé verrouillé (ligne standard, non éditable) */
.fstruct-input.is-locked { cursor: default; color: var(--color-text); }
.fstruct-input.is-locked:focus { outline: none; }

/* Bloc BFR — VUE en lecture seule récapitulant les comptes inclus (les lignes
   restent éditables dans leur section). Teinte sable distincte du bleu-gris. */
.fstruct-sec--bfr { border-color: var(--color-border-structure); }
.fstruct-sec-h--static {
  display: block;
  padding: 8px 12px;
  background: var(--color-surface-structure);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-structure);
}
.fstruct-sec--bfr .fstruct-line { border-bottom-color: #EFE7D8; }
.fstruct-line--ro { gap: 8px; }
.fstruct-roname { flex: 1 1; min-width: 0; font-size: 13px; color: var(--color-text); padding: 2px 4px; }
.fstruct-secbadge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--stone-100);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}
.fstruct-vg-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.fstruct-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.fstruct-addbtn {
  background: var(--color-navy); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.fstruct-addbtn:disabled { opacity: 0.4; cursor: default; }

/* Action dans l'en-tête d'un bloc (ex. « Charger le standard ») — flottante à droite. */
.fstruct-sec-hwrap { position: relative; }
.fstruct-sec-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.fstruct-loadstd {
  border: 1px solid var(--color-accent); background: var(--color-surface-card);
  color: var(--color-accent); font-size: 10.5px; font-weight: 600;
  border-radius: 8px; padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.fstruct-loadstd:hover { background: var(--color-accent-tint); }

/* Pastille stock verrouillée (Achats / Variation de stock — obligatoire). */
.fstruct-stock.is-locked, .fstruct-stock:disabled { cursor: default; opacity: 0.92; }

/* Sous-total de groupe dans l'éditeur de structure : repère de lecture, non
   éditable — il dit où se coupe le bloc. */
.fstruct-line--sub {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border-top: 1px solid var(--color-border-inner);
}
.fstruct-subname {
  font-size: 12px; font-weight: 600; color: var(--color-accent);
  padding-left: 10px;
}
/* Lignes DU groupe : en retrait sous son intitulé. */
.fstruct-group .fstruct-line { padding-left: 18px; }

/* Autres paramètres — éditeur de lignes de crédit à période. */
.cl-wrap { padding: 4px 2px; }
.cl-empty { color: var(--color-text-muted); font-style: italic; padding: 12px 4px; }

.cl-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cl-table th {
  text-align: left; font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted);
  padding: 6px 8px; border-bottom: 1px solid var(--color-border);
}
.cl-table td { padding: 5px 8px; border-bottom: 1px solid var(--color-border-inner); }
.cl-table th.cl-num, .cl-table td.cl-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cl-lbl { min-width: 140px; }

.cl-input {
  width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  font: inherit; padding: 3px 6px; border-radius: 6px; color: var(--color-text);
}
.cl-input:hover { border-color: var(--color-border); }
.cl-input:focus { outline: none; border-color: var(--color-field-focus); background: var(--color-surface-card); }
.cl-amount { text-align: right; color: var(--color-field-focus); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.cl-my { display: inline-flex; gap: 4px; }
.cl-select {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 0.82rem; cursor: pointer;
  color: var(--color-text);
}
.cl-select--year { width: 4.6rem; }

.cl-del button {
  border: none; background: none; color: var(--color-text-muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 2px 6px;
}
.cl-del button:hover { color: var(--color-terracotta); }

/* Récap limite cumulée. */
.cl-recap { margin-top: 18px; border-top: 1px solid var(--color-border); padding-top: 10px; }
.cl-recap-table td.cl-num, .cl-recap-table th.cl-num { color: var(--color-navy); }
.cl-recap-table .cl-lbl { color: var(--color-navy); }

/* Bouton « + Ajouter » sous le tableau (plus dans le bandeau). */
.cl-addrow { margin-top: 12px; }

/* Clôture (Finance › Paramètres) — tokens de charte uniquement. */

.closing-row { display: flex; gap: 28px; flex-wrap: wrap; }

.closing-field { display: flex; flex-direction: column; gap: 5px; }
.closing-field__lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Champ à saisir : valeur en bleu, sans cadre (charte). */
.closing-field select {
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-field-focus);
  font: inherit;
  font-size: 15px;
  padding: 2px 0;
  cursor: pointer;
}
.closing-field select:focus {
  outline: none;
  border-bottom-color: var(--color-field-focus);
}
.closing-field select:disabled { opacity: .5; cursor: default; }

.closing-empty {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Rapports — sélecteur d'arrêté d'affichage (vue Réel) : à droite du
   commutateur Réel | Prévisionnel, même famille que les boutons d'ancre. */
.fin-cut-select {
  font: inherit;
  font-size: 12px;
  color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px 6px;
  cursor: pointer;
}
.fin-cut-select:hover { border-color: var(--color-accent); }

/* Graphique du plan de liquidité (repris de la Simulation 12M, 2026-08-17). */
.cpc { margin: 0 0 6px; min-height: 560px; }
.cpc__chart { margin: 0 0 6px; }
.cpc__legend {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 6px 0 12px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.cpc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cpc__sw { width: 12px; height: 12px; border-radius: 2px; border: 1px solid; display: inline-block; }
.cpc__ln { width: 18px; height: 0; border-top: 2px solid var(--color-navy); display: inline-block; }
.cpc__ln--dash { border-top-style: dashed; }
.cpc__floor { color: var(--color-terracotta); display: inline-flex; align-items: center; gap: 6px; }
.cpc__ln--red { border-top-color: var(--color-terracotta); }

/* Les cinq indicateurs tiennent sur UNE ligne (2026-08-17) ; ils se resserrent
   plutôt que de passer à la ligne. */
.cpc__kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin-top: 16px; }
.cpc__kpi {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.cpc__kpi > span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.cpc__kpi > b { font-family: "Fraunces", Georgia, serif; font-size: 24px; font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.cpc__kpi > em { font-style: normal; font-size: 11px; color: var(--color-text-muted); }
.cpc__kpi.is-neg > b { color: var(--color-terracotta); }

.cpc__tip {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(43,32,62,.14); font-size: 12px;
}
.cpc__tip-m { font-weight: 600; margin-bottom: 4px; }
.cpc__tip-r { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.cpc__tip-r b, .cpc__tip-t b { margin-left: auto; color: var(--color-text); font-weight: 600; }
.cpc__tip-t { display: flex; gap: 10px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border); font-weight: 600; }
.cpc__tip .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cpc__tip .sw--n1 { background: transparent; border-top: 2px dashed var(--color-navy); border-radius: 0; height: 0; width: 14px; }
/* Fenêtre de lecture : pastilles cumulables (années + 12 mois glissants). */
.cpc__win { display: flex; align-items: center; gap: 8px; padding: 2px 0 12px; }
.cpc__pill {
  font: inherit; font-size: 12.5px; padding: 3px 14px; cursor: pointer;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text-muted);
}
.cpc__pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cpc__pill.is-on { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-on-tint); font-weight: 600; }
.cpc__win-range { margin-left: 4px; font-size: 12px; color: var(--color-text-muted); }
/* Deux zones sous zéro : crédit consommé (ambre) puis dépassement (terracotta). */
.cpc__zone { display: inline-flex; align-items: center; gap: 6px; }
.cpc__zone::before { content: ''; width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.cpc__zone--used { color: var(--color-terracotta); }
.cpc__zone--used::before { background: color-mix(in srgb, var(--color-terracotta) 34%, transparent); }
.cpc__zone--over { color: var(--color-terracotta); font-weight: 600; }
.cpc__zone--over::before { background: color-mix(in srgb, var(--color-terracotta) 70%, transparent); }

/* Plan de liquidité (direct) — tableau de trésorerie sourcé du modèle.
   CHARTE : uniquement des tokens --color-* (aucun hex hors charte). */
.fcp-loading { padding: 1.2rem; color: var(--color-text-muted); }
.fcp-wrap { overflow-x: auto; }
/* Largeur calée sur le contenu (7 → 12 mois) : le tableau ne s'étire pas à toute
   la largeur. Colonnes de mois de largeur fixe et identique. */
.fcp {
  border-collapse: collapse; table-layout: fixed; width: auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.fcp th, .fcp td {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border-inner); white-space: nowrap;
}
.fcp thead th {
  font-weight: 600; color: var(--color-text); text-align: right;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-card);
}
.fcp thead th.fcp-lbl { text-align: left; }
/* Sous-libellés réel/prév. (homogène avec le Compte de résultat ; plan = tout prév.). */
.fcp thead tr.fcp-subhead-af th { font-size: 9px; font-weight: 600; border-bottom: none; padding-top: 0; }
.fcp thead tr.fcp-subhead-af th.fcp-af--a { color: var(--color-accent); }
.fcp thead tr.fcp-subhead-af th.fcp-af--f { color: var(--color-amber); }
.fcp .fcp-lbl { text-align: left; width: 260px; white-space: normal; }
.fcp .fcp-num { text-align: right; width: 70px; }
.fcp .fcp-total { width: 76px; background: var(--color-surface-result); font-weight: 600; }
.fcp .is-neg { color: var(--color-terracotta); }
.fcp-pos .fcp-num { color: var(--color-sage); }
.fcp-neg .fcp-num { color: var(--color-terracotta); }
.fcp-vat .fcp-lbl { color: var(--color-text-muted); }
/* Détail d'un poste : décalé sous sa ligne de regroupement, ton atténué. */
.fcp-detail .fcp-lbl { padding-left: 1.4rem; color: var(--color-text-muted); }
.fcp-detail .fcp-num { color: var(--color-text-muted); }
/* Sous-totaux intermédiaires (Total encaissements / décaissements). */
.fcp-sub td { font-weight: 600; border-top: 1px solid var(--color-border-inner); }

/* ── 3 niveaux : en-tête de niveau + sous-total de niveau bien distincts. */
.fcp-seclvl td {
  padding: 0.4rem 0.5rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent);
  background: var(--color-accent-tint); border-top: 2px solid var(--color-accent-soft);
}
.fcp-level td {
  font-weight: 700; color: var(--color-navy);
  background: var(--color-accent-soft); border-top: 1px solid var(--color-accent-soft);
}
.fcp-level.fcp-pos .fcp-num { color: var(--color-sage); }
.fcp-level.fcp-neg .fcp-num { color: var(--color-terracotta); }
/* Colonne Total des flux : même fond que la ligne (sinon écrasée par .fcp-total). */
.fcp-level .fcp-total { background: var(--color-accent-soft); }
/* Variation totale = ligne forte navy. */
.fcp-strong td { font-weight: 700; color: var(--color-navy); border-top: 2px solid var(--color-border); }

/* Soldes d'ouverture / clôture : bande navy. */
.fcp-open td, .fcp-close td { background: var(--color-navy); color: #fff; font-weight: 600; }
.fcp-open .is-neg, .fcp-close .is-neg { color: color-mix(in srgb, var(--color-terracotta) 55%, #fff); }
.fcp-open .fcp-total, .fcp-close .fcp-total { background: var(--color-navy); }

/* Contrôle. */
/* Réconciliation bilan : fond BLANC (pas de surlignage) ; en écart, la ligne
   passe en alerte terracotta (2026-08-20). */
.fcp-check td { border-top: 2px solid var(--color-border); background: var(--color-surface-card); font-size: 0.8rem; }
.fcp-check--ko td { color: var(--color-terracotta); font-weight: 600; }
/* Écart sous l'unité d'affichage : CHF exacts, petit et atténué (pas une alerte). */
.fcp-check-minor { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 400; }
.fcp-ok { color: var(--color-sage); font-weight: 600; }
.fcp-ko { color: var(--color-terracotta); font-weight: 600; }

/* ── Lignes éditables investissement / financement — surlignées en jaune
   (token charte --amber-light) pour distinguer la saisie. */
.fcp-editline td { background: var(--amber-light); }
.fcp-linehead { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
/* Boutons +/− solides (mêmes couleurs que le Cash flow). */
.fcp-type {
  width: 18px; height: 18px; border-radius: 4px; border: none;
  cursor: pointer; font-weight: 700; line-height: 1; color: #fff; font-size: 12px;
}
.fcp-type--in { background: var(--color-sage); }
.fcp-type--out { background: var(--color-terracotta); }
.fcp-line-lbl { flex: 1 1; border: none; border-bottom: 1px dashed var(--color-border); background: none; font: inherit; padding: 2px; color: var(--color-text); }
.fcp-del { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.95rem; }
/* Valeur à saisir : CHARTE cellule éditable = bleu, SANS cadre. */
.fcp-edit {
  width: 100%; border: none; background: transparent; padding: 2px 4px; text-align: right;
  font: inherit; color: var(--color-field-focus);
}
.fcp-edit::placeholder { color: var(--color-border); }
.fcp-edit:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
/* Pas de flèches ascenseur (spinners) sur les champs numériques. */
.fcp-edit::-webkit-outer-spin-button,
.fcp-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fcp-edit { appearance: textfield; }
.fcp-addrow td { padding: 0.2rem 0.5rem; }
.fcp-addbtn { border: 1px dashed var(--color-border); background: none; color: var(--color-accent); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 0.78rem; }
.fcp-addbtn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* ── Bascule Tableau / Graphique + graphique (style Plan des liquidités). */
/* Bouton « Visualiser le graphique » — au-dessus du tableau, aligné à gauche. */
.fcp-graphbar { display: flex; justify-content: flex-start; margin-bottom: 10px; }
.fcp-graphbtn {
  cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 7px; color: var(--color-accent);
  background: var(--color-accent-tint); border: 1px solid var(--color-border);
}
.fcp-graphbtn:hover { background: var(--color-accent-tint-strong); color: var(--color-navy); }
/* Interrupteurs icône (courbe / barres) : carrés, état actif en ardoise plein. */
.fcp-graphbar { gap: 6px; }
.fcp-graphbtn--ic { padding: 5px 7px; line-height: 0; }
.fcp-graphbtn--ic svg { width: 17px; height: 17px; }
.fcp-graphbtn--ic.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.fcp-graphbtn--ic.is-on:hover { color: #fff; }
/* Graphiques CONTENUS (2026-08-11) : le SVG s'étire à la largeur du bloc — sur
   grand écran, textes et légendes devenaient géants. Largeur plafonnée, calée à
   gauche : tout ce qui est dans le SVG (légendes, ligne de crédit) suit. */
.fcp-chart { padding: 0.6rem 0.4rem 0.8rem; max-width: 720px; }
.fcp-tooltip { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.fcp-tooltip__month { font-weight: 600; margin-bottom: 4px; color: var(--color-navy); }
.fcp-tooltip__row, .fcp-tooltip__total { display: flex; align-items: center; gap: 8px; }
.fcp-tooltip__row > span:nth-child(2), .fcp-tooltip__total > span:first-child { flex: 1 1; }
.fcp-tooltip__total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border-inner); font-weight: 600; color: var(--color-navy); }
.fcp-tooltip .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Légende du graphique de trésorerie (LiqProj du Cockpit). */
.fcp-chart__cap { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 0.4rem; padding: 0 0.4rem; }

/* ── Vues du plan (Plan · TVA · …) ─────────────────────────────────────────── */
.fcp-panes { display: inline-flex; gap: 4px; margin-right: auto; }
.fcp-panes button {
  font: inherit; font-size: 12.5px; padding: 3px 12px; cursor: pointer;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text-muted);
}
.fcp-panes button.is-on { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-on-tint); }
.fcp-panes button:hover:not(.is-on) { color: var(--color-accent); border-color: var(--color-accent); }

/* Bandeau de réglages de la vue (postes suivis, périodicité, délai). */
.fcp-cfg { background: var(--color-surface-page); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.fcp-cfg__lbl { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); display: block; margin-bottom: 8px; }
.fcp-cfg__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fcp-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--color-accent-tint); color: var(--color-on-tint);
  border: 0.5px solid var(--color-accent-soft); border-radius: 999px; padding: 2px 4px 2px 10px;
}
.fcp-chip button { border: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; line-height: 1; padding: 0 4px; }
.fcp-cfg select { font: inherit; font-size: 12.5px; border: 0; background: transparent; color: var(--color-field-focus); cursor: pointer; }
.fcp-cfg__right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-muted); }
.fcp-memo td { color: var(--color-text-muted); }
.fcp-note { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.fcp-chip--man { background: var(--color-surface-card); border-color: var(--color-border); color: var(--color-text-muted); }
.fcp-chip__mode { font-size: 11px; opacity: .75; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
.fcp-tag { font-size: 11px; color: var(--color-text-muted); font-style: normal; margin-left: 6px; }
.fcp-src { color: var(--color-text-muted); }
.fcp-warn { color: var(--color-terracotta); margin-bottom: 6px; }
.fcp-recalc { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 12px; padding: 0 3px; }
.fcp-recalc:hover { color: var(--color-accent); }
.fcp-paycell {
  width: 100%; border: 0; background: transparent; text-align: right;
  font: inherit; color: var(--color-field-focus); padding: 0;
}
.fcp-paycell:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.fcp-num.is-edited .fcp-paycell { font-weight: 600; }

/* Charges sociales — sous-totaux en GROUPES : léger surlignage ardoise, chevron
   révélé au survol, détail en retrait (2026-08-17). */
.fcp .fcp-grp { cursor: pointer; }
.fcp .fcp-grp > td { background: var(--color-accent-tint); font-weight: 500; }
.fcp .fcp-grp .fcp-chev {
  display: inline-block; width: 14px; font-size: 10px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease, transform .15s ease;
}
.fcp .fcp-grp:hover .fcp-chev { opacity: 1; }
.fcp .fcp-grp .fcp-chev.is-open { transform: rotate(90deg); }
.fcp tr.fcp-in > td.fcp-lbl { padding-left: 22px; }

/* Section TVA annuelle : bande de régime et filet à la frontière réel/prév. */
.fcp thead tr.fcp-band th { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; border-bottom: none; }
.fcp thead tr.fcp-band th.fcp-band__r { color: var(--color-text-muted); }
.fcp thead tr.fcp-band th.fcp-band__f { color: var(--color-amber); }
.fcp .fcp-edge { border-left: 1px solid var(--color-border); }
/* Bandes de régime, même grammaire que Ventes (ardoise claire / ardoise pleine). */
.fcp thead tr.fcp-bandrow th { border-bottom: 0; padding-bottom: 4px; }
.fcp thead th.fcp-band {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px;
}
.fcp thead th.fcp-band--real { background: var(--color-accent-tint-strong); color: var(--color-on-tint); border-radius: 6px 0 0 6px; }
.fcp thead th.fcp-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }

/* Unité CHF : les montants font 6-7 chiffres — colonnes élargies pour que rien
   ne soit tronqué (retour Olivier 2026-08-17). */
.fcp.fcp--chf .fcp-lbl { width: 220px; }
.fcp.fcp--chf .fcp-num { width: 88px; }
.fcp.fcp--chf .fcp-total { width: 96px; }
.fcp.fcp--chf td, .fcp.fcp--chf th { padding-left: 4px; padding-right: 4px; }
.fcp .fcp-num, .fcp .fcp-total { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Bandeau d'information (réglages lus ailleurs) + lien vers leur écran. */
/* Information : une ligne par réglage, lien dessous, tout aligné à gauche ; de
   l'air au-dessus du tableau (retour Olivier 2026-08-17). */
.fcp-info { margin: 0 0 26px; font-size: 12px; color: var(--color-text-muted); }
.fcp-info__l { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; }
.fcp-info__l + .fcp-info__l { padding-left: 20px; }
.fcp-info__ic { font-style: normal; color: var(--color-accent); }
.fcp-info b { font-weight: 600; color: var(--color-text); }
.fcp-info__link {
  display: block; margin-top: 6px; margin-left: 20px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--color-accent); text-align: left;
}
.fcp-info__link:hover { text-decoration: underline; }
/* Hypothèses : plus d'air en tête de card. */
.fcp-hyp { margin: 6px 0 18px; }

/* ── Champ à saisir : bleu (charte) + très léger fond ambre pour être repérable
   même vide (retour Olivier 2026-08-17). Grammaire : noir = lu · bleu = calculé
   et modifiable · fond ambre = c'est un champ. ───────────────────────────────── */
.fcp-field {
  border: 0; padding: 1px 4px; border-radius: 3px;
  font: inherit; text-align: right; color: var(--color-field-focus);
  background: color-mix(in srgb, var(--color-amber) 8%, transparent);
}
.fcp-field:focus { outline: none; box-shadow: inset 0 -1px 0 var(--color-field-focus); }
.fcp-field::placeholder { color: var(--color-text-muted); }
.fcp-field--hyp { width: 120px; font-size: 15px; font-weight: 600; }

/* Bandeau d'hypothèses : libellé à gauche, valeur à droite. */
.fcp-hyp { margin: 0 0 12px; }
.fcp-hyp__row { display: flex; align-items: baseline; gap: 10px; max-width: 460px; }
.fcp-hyp__lbl { flex: 1 1; font-size: 13px; color: var(--color-text-muted); }
.fcp-hyp__lbl em { font-style: normal; font-size: 11px; margin-left: 6px; opacity: .8; }
.fcp-hyp__unit { font-size: 11px; color: var(--color-text-muted); }
/* Fenêtre du graphique : pastilles dans l'en-tête, alignées à droite. */
.fcp-win { margin-left: auto; display: inline-flex; gap: 6px; }
.fcp-winpill {
  font: inherit; font-size: 12.5px; padding: 3px 14px; cursor: pointer;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text-muted);
}
.fcp-winpill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.fcp-winpill.is-on { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-on-tint); font-weight: 600; }

/* Bilan prévisionnel — table sections repliables, réel / prévisionnel. */
.fbs-wrap { overflow-x: auto; }
.fbs {
  border-collapse: collapse;
  width: auto;
  table-layout: fixed;   /* largeurs de colonne STABLES : le repli/dépli des
                            sections ne recalcule plus la mise en page. */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.fbs th, .fbs td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border-inner);
  white-space: nowrap;
}
/* Colonnes de largeur fixe (label large, mois identiques). */
.fbs .fbs-lbl { width: 250px; white-space: normal; }
.fbs .fbs-open { width: 74px; }
.fbs .fbs-num { width: 68px; }
.fbs thead th {
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-th);
}
.fbs thead th.fbs-lbl { text-align: left; }
.fbs .fbs-lbl { text-align: left; }
/* Sous-libellés réel/prév. (homogène avec le Compte de résultat). */
.fbs thead tr.fbs-subhead-af th { font-size: 9px; font-weight: 600; border-bottom: none; padding-top: 0; }
.fbs thead tr.fbs-subhead-af th.fbs-af--a { color: var(--color-accent); }
.fbs thead tr.fbs-subhead-af th.fbs-af--f { color: var(--color-amber); }
.fbs .fbs-num { text-align: right; }

/* Colonne de départ (31.12.N-1) : légèrement mise en avant. */
.fbs .fbs-open { background: var(--color-accent-tint); }
/* Colonnes prévisionnelles (mois > clôture) : fond blanc (pas d'aplat).
   La frontière réel / prévision reste marquée par le filet vertical (fcedge). */
.fbs thead th.is-fc,
.fbs .fbs-num.is-fc { background: var(--color-surface-card); }
/* Frontière réel | prévision : filet vertical au 1er mois prévisionnel. */
.fbs .is-fc-edge { border-left: 2px solid var(--color-accent-soft); }

.fbs .is-neg { color: var(--color-terracotta); }

/* Cellule prévisionnelle éditable : saisie en bleu (charte cellules éditables). */
.fbs .fbs-editcell { padding: 0; }
.fbs .fbs-edit {
  width: 100%; box-sizing: border-box;
  border: none; background: transparent;
  padding: 0.4rem 0.6rem;
  text-align: right; font: inherit; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  color: var(--color-field-focus); cursor: text;
}
.fbs .fbs-edit:hover { background: color-mix(in srgb, var(--color-field-focus) 8%, transparent); }
.fbs .fbs-edit:focus { outline: 1px solid var(--color-field-focus); background: var(--color-surface-card); }

/* Libellé de ligne à roulement (dépliable via le chevron) : seul cas cliquable
   (plus de drawer de comportement ; les réglages vivent dans la barre en tête). */
.fbs .fbs-lbl--cfg { cursor: pointer; }
.fbs .fbs-detail--roll .fbs-lbl-txt:hover { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; text-underline-offset: 3px; }


/* ── Drawer latéral (comportement d'une ligne) ─────────────────────────── */
.fbs-drawer__scrim { position: fixed; inset: 0; background: rgba(26,18,25,0.18); z-index: 40; }
.fbs-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw;
  background: var(--color-surface-card); border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 28px rgba(26,18,25,0.14); z-index: 41;
  display: flex; flex-direction: column;
}
.fbs-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--color-border);
}
.fbs-drawer__title { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--color-navy); }
.fbs-drawer__x { border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.fbs-drawer__body { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.fbs-drawer__lbl { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.fbs-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.fbs-seg button {
  border: none; background: var(--color-surface-card); padding: 0.45rem 0.8rem;
  font: inherit; cursor: pointer; color: var(--color-text-muted);
}
.fbs-seg button + button { border-left: 1px solid var(--color-border); }
.fbs-seg button.is-active { background: var(--color-accent); color: #fff; font-weight: 600; }
.fbs-drawer__field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--color-text); }
.fbs-ratio {
  width: 6rem; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px;
  font: inherit; color: var(--color-field-focus); text-align: right;
}
.fbs-ratio:focus { outline: 1px solid var(--color-field-focus); }
.fbs-drawer__hint { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.4; margin: 0; }
/* Détail du calcul mois par mois (audit). */
.fbs-drawer__audit { border-top: 1px solid var(--color-border); padding-top: 0.9rem; min-height: 0; }
.fbs-audit { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; max-height: 46vh; overflow-y: auto; }
.fbs-audit li {
  display: grid; grid-template-columns: 2.6rem 4.2rem 1fr; grid-gap: 0.5rem; gap: 0.5rem; align-items: baseline;
  padding: 0.32rem 0; border-bottom: 1px solid var(--color-border-inner);
}
.fbs-audit__m { color: var(--color-text-muted); }
.fbs-audit__v { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-navy); font-weight: 600; }
.fbs-audit__x { color: var(--color-text-muted); font-size: 0.76rem; line-height: 1.3; }
.fbs-audit__revert {
  display: inline-block; margin-left: 0.4rem; border: 1px solid var(--color-border);
  background: var(--color-surface-card); color: var(--color-accent); border-radius: 6px;
  padding: 0.05rem 0.4rem; font-size: 0.72rem; cursor: pointer; white-space: nowrap;
}
.fbs-audit__revert:hover { background: var(--color-accent-tint); }

/* Ligne de section (total de section) : navy, gras, repliable. */
.fbs .fbs-section td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 1px solid var(--color-border);
  border-bottom: none;
}
/* Slot de chevron à largeur fixe (toujours réservé) → libellés alignés, avec ou
   sans flèche. La flèche n'apparaît qu'au survol de la ligne, ou si ouverte. */
.fbs .fbs-caret-slot {
  display: inline-block; width: 16px; text-align: left; vertical-align: middle;
}
.fbs .fbs-chev {
  display: inline-block; width: 12px; height: 12px; vertical-align: middle;
  color: var(--color-accent);
  transition: transform 0.15s ease, opacity 0.12s ease;
}
.fbs .fbs-chev.is-open { transform: rotate(90deg); }
.fbs .fbs-collapsible { cursor: pointer; }
.fbs tbody tr.fbs-collapsible .fbs-chev { opacity: 0; }
.fbs tbody tr.fbs-collapsible:hover .fbs-chev,
.fbs tbody tr.fbs-collapsible .fbs-chev.is-open { opacity: 1; }
/* Lignes de détail : indentées sous la section (le slot ajoute 16px). */
.fbs .fbs-detail .fbs-lbl { padding-left: 1.1rem; color: var(--color-text); }
/* Sous-totaux (Total Actifs / Total Passif + CP) : filet haut marqué. */
.fbs .fbs-subtotal td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  background: var(--color-accent-tint-strong);
}

/* Repère « taux actuel » (annualisé YTD) sous la saisie du ratio, dans le drawer. */
.fbs-drawer__actual {
  margin: -4px 0 8px;
  font-size: 12px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
}
.fbs-drawer__actual b { color: #2B203E; color: var(--color-navy, #2B203E); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Roulement de créances : ligne total + sous-lignes dépliables ─────────── */
.fbs-detail--roll .fbs-lbl { font-weight: 600; }
.fbs-lbl-txt { cursor: pointer; }
/* Fond léger (mélange ardoise très dilué sur blanc) — le tint plein était trop chargé. */
.fbs-subrow td { background: color-mix(in srgb, #F1F5F6 42%, #fff); background: color-mix(in srgb, var(--color-accent-tint, #F1F5F6) 42%, var(--color-surface-card, #fff)); }
/* Spécificité : .fbs td (0,1,1) écrase .fbs-sublbl (0,1,0) → on qualifie par .fbs
   pour que le retrait s'applique vraiment (signe ± aligné sous le « C » du compte). */
.fbs .fbs-sublbl {
  padding-left: 34px; font-size: 12px; color: #78716C; color: var(--color-text-muted, #78716C);
  white-space: nowrap;
}
.fbs-sub-manual {
  margin-left: 6px; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.04em; color: #B8862A; color: var(--color-amber, #B8862A); font-weight: 600;
}
.fbs-subcell { font-size: 12px; color: #78716C; color: var(--color-text-muted, #78716C); }
/* Nouvelles ventes = ligne mise en évidence (apport, sage). */
/* Paire « nouvelles ventes » (apport + encaissement) : même fond vert léger. */
.fbs-subrow--add td,
.fbs-subrow--newpair td { background: color-mix(in srgb, #EAF0E2 55%, #fff); background: color-mix(in srgb, var(--sage-light, #EAF0E2) 55%, var(--color-surface-card, #fff)); }
.fbs-subrow--add .fbs-sublbl { color: #5C7A3E; color: var(--color-sage, #5C7A3E); font-weight: 600; }
.fbs-sub-add { color: #5C7A3E; color: var(--color-sage, #5C7A3E); font-weight: 600; }
.fbs-subrow--arr .fbs-edit { color: #2563EB; color: var(--color-field-focus, #2563EB); }

/* Éditeur de profil d'encaissement dans le drawer. */
.fbs-drawer__profile { display: flex; gap: 12px; margin: 4px 0 2px; }
.fbs-drawer__field--inline { display: flex; align-items: center; gap: 6px; }
.fbs-drawer__field--inline input { width: 52px; text-align: right; }

/* Roue de réglage (profil) sur une ligne à roulement — discrète, à droite du libellé. */
.fbs-gear {
  background: none; border: none; cursor: pointer; margin-left: 6px;
  color: #78716C;
  color: var(--color-text-muted, #78716C); font-size: 12px; opacity: 0;
  padding: 0 2px; line-height: 1; transition: opacity 0.12s ease;
}
.fbs tbody tr.fbs-collapsible:hover .fbs-gear { opacity: 0.6; }
.fbs-gear:hover { opacity: 1 !important; color: #3F6470; color: var(--color-accent, #3F6470); }
.fbs-detail--roll .fbs-lbl-txt { cursor: pointer; }

/* Signe +/− en largeur fixe → tous les libellés de sous-lignes alignés. */
.fbs-sub-sign { display: inline-block; width: 14px; text-align: left; }

/* Bouton + popover de réglage du profil d'encaissement (sur les lignes d'encaissement). */
.fbs-sub-prof { position: relative; display: inline-block; }
.fbs-sub-cfg {
  background: none; border: 1px solid #DED7CB; border: 1px solid var(--color-border, #DED7CB); border-radius: 4px;
  cursor: pointer; margin-left: 8px; font-size: 10px; padding: 0 5px; line-height: 1.6;
  color: #2563EB;
  color: var(--color-field-focus, #2563EB); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.fbs-sub-cfg:hover { border-color: #2563EB; border-color: var(--color-field-focus, #2563EB); }
.fbs-prof-pop {
  /* Position FIXE, calculée sur le bouton : dans le conteneur à défilement, un
     popup absolu était rogné par le cadre de la card (2026-08-17). */
  position: fixed; z-index: 60;
  background: #fff;
  background: var(--color-surface-card, #fff); border: 1px solid #DED7CB; border: 1px solid var(--color-border, #DED7CB);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(43, 32, 62, 0.14);
  padding: 8px 10px; display: flex; gap: 10px; white-space: nowrap;
}
.fbs-prof-pop label { font-size: 11px; color: #78716C; color: var(--color-text-muted, #78716C); display: flex; align-items: center; gap: 4px; }
.fbs-prof-pop input { width: 42px; text-align: right; border: 1px solid var(--color-border); border-radius: 3px; padding: 2px 4px; font: inherit; }

/* Pastilles de filtre Actif / Passif dans l'en-tête de la card. */
.fbs-side-pills { display: inline-flex; gap: 6px; }
.fbs-side-pill {
  border: 1px solid #DED7CB;
  border: 1px solid var(--color-border, #DED7CB); background: #fff; background: var(--color-surface-card, #fff);
  border-radius: 999px; padding: 3px 14px; font: inherit; font-size: 12px; cursor: pointer;
  color: #78716C;
  color: var(--color-text-muted, #78716C); transition: all 0.12s ease;
}
.fbs-side-pill:hover { border-color: #3F6470; border-color: var(--color-accent, #3F6470); color: #3F6470; color: var(--color-accent, #3F6470); }
.fbs-side-pill.is-active {
  background: #3F6470;
  background: var(--color-accent, #3F6470); color: #fff;
  border-color: #3F6470;
  border-color: var(--color-accent, #3F6470); font-weight: 600;
}

/* En-tête bilan : bouton agréger/déployer + pastilles Actif/Passif. */
.fbs-head-actions { display: flex; align-items: center; gap: 10px; }


/* ── Lignes de planification (nouvel actif / financement) éditées au bilan. */
.fbs-planline td { background: var(--amber-light); }
.fbs-plan-head { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.fbs-plan-type {
  width: 18px; height: 18px; border-radius: 4px; border: none; color: #fff;
  cursor: pointer; font-weight: 700; line-height: 1; font-size: 12px; flex: none;
}
.fbs-plan-type--in { background: var(--color-sage); }
.fbs-plan-type--out { background: var(--color-terracotta); }
.fbs-plan-lbl { flex: 1 1; min-width: 0; border: none; border-bottom: 1px dashed var(--color-border); background: none; font: inherit; padding: 2px; color: var(--color-text); }
.fbs-plan-rate { color: var(--color-text-muted); font-size: 0.78rem; white-space: nowrap; }
.fbs-plan-rate input { width: 34px; border: none; border-bottom: 1px dashed var(--color-border); background: none; text-align: right; font: inherit; color: var(--color-field-focus); }
.fbs-plan-del { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.95rem; flex: none; }
/* Valeur à saisir : bleu, sans cadre, sans spinner (charte). */
.fbs-plan-edit {
  width: 100%; box-sizing: border-box; border: none; background: transparent;
  text-align: right; font: inherit; color: var(--color-field-focus); padding: 2px 4px;
}
.fbs-plan-edit:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.fbs-plan-edit::-webkit-outer-spin-button, .fbs-plan-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fbs-plan-edit { appearance: textfield; }
.fbs-addrow td { background: transparent; padding: 0.2rem 0.6rem; }
.fbs-addbtn { border: 1px dashed var(--color-border); background: none; color: var(--color-accent); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 0.78rem; }
.fbs-addbtn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* ── Vue figée mono-poste (2026-08-10) ──────────────────────────────────────
   Réglages de délais en tête de card + arrangements multiples. */
.fbs-delaybar { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-text-muted); }
.fbs-delaybar__lbl { margin-left: 8px; }
.fbs-delaybar__lbl:first-child { margin-left: 0; }
.fbs-delay-in { width: 30px; text-align: right; }
.fbs-delaybar__sep, .fbs-delaybar__unit { color: var(--color-text-muted); }
.fbs-arrname { width: 170px; text-align: left; }
.fbs-arr-x {
  border: 0; background: transparent; cursor: pointer; margin-left: 4px;
  color: var(--color-text-muted); font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.fbs-subrow:hover .fbs-arr-x { opacity: 1; }
.fbs-arr-x:hover { color: var(--color-terracotta); }
.fbs-addbtn {
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--color-accent);
}
.fbs-addbtn:hover { text-decoration: underline; }

/* ── Bilan complet en lecture seule (2026-08-20) — une valeur qui BOUGE se
   met en évidence ; au survol du chiffre, l'infobulle dit la variation du
   mois et son origine (mouvement exceptionnel, driver, décompte, plug…). ── */
.fbs-num.is-var { color: var(--color-accent); font-weight: 600; }
td.fbs-tipcell { position: relative; cursor: default; }
.fbs-vartip {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  padding: 4px 10px; white-space: nowrap; text-align: left;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(43, 32, 62, .14);
  font-size: 12px; font-weight: 400; color: var(--color-text);
}
td.fbs-tipcell:hover .fbs-vartip { display: flex; gap: 7px; align-items: baseline; }
.fbs-vartip b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-navy); }

/* Purge des saisies manuelles d'une ligne (× + compte) — révélé au survol de la
   ligne seulement (charte : chevrons/actions au survol), terracotta discret. */
.fbs-purge {
  margin-left: 6px; border: 0; background: none; cursor: pointer;
  color: var(--color-terracotta); font-size: 0.72rem; font-weight: 600;
  opacity: 0; transition: opacity 0.12s;
}
.fbs-detail:hover .fbs-purge { opacity: 1; }

/* Plan stratégique — module Planification. Charte Palestre : tokens :root
   uniquement (index.css). Les ÉTAPES vivent dans le panneau de navigation du
   module (Sidebar, clés sp-*) — cette page ne rend que le contenu de l'étape. */

.spp { display: flex; gap: 0; align-items: stretch; min-height: 0; }

/* ── Contenu ───────────────────────────────────────────────────────────── */
.spp-content { flex: 1 1; min-width: 0; padding: 0 0 24px; }
.spp-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.spp-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px; font-weight: 600; color: var(--color-navy); margin: 0;
}
.spp-sub { font-size: 11.5px; color: var(--color-text-muted); }
.spp-save {
  margin-left: auto; font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted);
}
.spp-save--error { color: var(--color-terracotta); }
.spp-loading { padding: 40px; color: var(--color-text-muted); font-size: 13px; }

/* Tuiles de résumé */
.spp-kpis {
  display: flex; gap: 0; margin: 10px 0 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border-inner); padding-bottom: 12px;
}
.spp-kpi { flex: 1 1; min-width: 140px; padding: 2px 18px; }
/* Léger trait de séparation entre les figures (plus de tuiles). */
.spp-kpi + .spp-kpi { border-left: 1px solid var(--color-border-inner); }
.spp-kpi label {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); display: block;
}
.spp-kpi b { font-size: 17px; color: var(--color-navy); }
.spp-kpi small { display: block; font-size: 10.5px; color: var(--color-text-muted); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.spp-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-inner);
  border-radius: 12px; overflow: hidden; margin-bottom: 14px;
}
.spp-card__head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--color-border-inner);
}
.spp-card__num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Bouton principal « Ajouter une source » — navy plein, en tête. */
.spp-cardname { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Inducteur sur la ligne du titre : nom + « Inducteur : … » à droite, sans retour ligne. */
.spp-cardname--row { flex-direction: row; align-items: center; gap: 22px; flex-wrap: nowrap; white-space: nowrap; }
.spp-cardname > .spp-in--text { font-weight: 700; font-size: 15px; }
.spp-inducteur-lbl { font-size: 12px; color: var(--color-text-muted); }
.spp-cardinducteur { display: inline-flex; align-items: center; gap: 6px; }
/* Synthèse Revenus : nom de source + ligne Finance en face. */
.spp-synthname { display: inline-flex; align-items: center; gap: 10px; }
.spp-synthname__ro { font-weight: 600; color: var(--color-navy); }
/* Détail par catégorie sous une source à inducteur (lecture seule, atténué). */
.spp-synthdetail td { color: var(--color-text-muted); }
.spp-synthdetail__name { padding-left: 22px; }
.spp-cardmodel label { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }
/* Inducteur encadré (champ nommé), sans libellé, placeholder « inducteur ». */
.spp-cardinducteur .spp-in { border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 9px; width: auto; min-width: 96px; }
.spp-cardinducteur .spp-in:focus { border-color: var(--color-field-focus); }
.spp-cardctrls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Toggle Inducteur ⇄ Revenus (saisie bidirectionnelle, modèle qté × prix). */
.spp-entrytoggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; }
.spp-entrytoggle button { font-family: inherit; font-size: 11px; padding: 3px 9px; border: none;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer; }
.spp-entrytoggle button.on { background: var(--color-accent); color: #fff; }
/* Onglets Inducteur / Revenus (sépare saisie des volumes et vue CA). */
.spp-strattabs { display: inline-flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--color-border); }
.spp-strattabs button { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: none;
  background: none; color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.spp-strattabs button.on { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.spp-emptytab { font-size: 12.5px; color: var(--color-text-muted); padding: 18px 4px; }
.spp-addsrc-top { margin: 0 0 14px; }
.spp-addsrc { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 9px;
  border: none; background: var(--color-navy); color: var(--color-surface-card); cursor: pointer; }
.spp-addsrc:hover { filter: brightness(1.12); }
.spp-card__num--btn { border: none; cursor: pointer; padding: 0; }
.spp-card__num--btn:hover { background: var(--color-accent); color: var(--color-surface-card); }
.spp-card__title { font-size: 14px; font-weight: 600; color: var(--color-navy); margin: 0; }
.spp-card__note { font-size: 11.5px; color: var(--color-text-muted); }
.spp-card__body { padding: 4px 0; }
.spp-card__body--flush { padding: 0; overflow-x: auto; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.spp-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.spp-table th {
  background: var(--color-surface-card);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 7px 10px; text-align: right;
  border-bottom: 1px solid var(--color-border-inner);
}
.spp-table th.l, .spp-table td.l { text-align: left; padding-left: 16px; }
.spp-table th.spp-yeargroup { text-align: center; border-bottom: none; color: var(--color-accent); }
/* Ligne d'en-tête de groupe (kCHF/Volume) : sans filet (ni sous les cellules vides). */
.spp-headgroup th { border-bottom: none; }
/* Suffixe d'unité (k / u) derrière les chiffres des colonnes. */
.spp-numwrap { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 1px; width: 100%; }
.spp-numwrap .spp-in { text-align: right; }
.spp-numunit { font-size: 10px; color: var(--color-text-muted); flex: 0 0 auto; }
.spp-table td {
  padding: 6px 10px; text-align: right;
  border-bottom: 1px solid var(--color-border-inner);
  color: var(--color-text);
}
.spp-table tr:last-child td { border-bottom: none; }
.spp-table td.mut, .spp-table .mut { color: var(--color-text-muted); }
.spp-cellsub { font-size: 10px; color: var(--color-text-muted); }

/* Lignes spéciales : sous-total (ardoise), total, final, calculée, driver. */
.spp-sub td { font-weight: 600; color: var(--color-navy); background: var(--color-accent-tint); }
.spp-tot td { font-weight: 700; color: var(--color-navy); background: var(--color-surface-card); }
.spp-final td { font-weight: 700; color: var(--color-navy); background: var(--color-accent-tint-strong); }
.spp-calc td { color: var(--color-text-muted); font-size: 12px; font-style: italic; }
.spp-pct td { color: var(--color-text-muted); font-size: 11px; border-bottom: none; }
.spp-drv td {
  background: color-mix(in srgb, var(--color-surface-th) 55%, var(--color-surface-card));
  color: var(--color-text-muted); font-size: 12px; padding: 4px 10px 4px 42px;
  border-bottom: 1px dashed var(--color-border-inner);
}
.spp-ref { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface-th) 60%, var(--color-surface-card)); }
.spp-alert { color: var(--color-terracotta); font-weight: 700; }

/* Bouton flèche-cercle : tirer/rafraîchir une donnée connectée (People/Finance). */
.spp-refresh {
  border: none; background: transparent; cursor: pointer; padding: 0 2px; margin-left: 5px;
  color: var(--color-accent); display: inline-flex; align-items: center; vertical-align: middle;
}
.spp-refresh:hover { color: var(--color-navy); }

/* Ligne séparatrice : distingue les inducteurs (au-dessus) des coûts (en dessous). */
.spp-sep td { border-bottom: 2px solid var(--color-border); }

/* Source de revenus (card multi-source) : type + suppression dans l'en-tête. */
.spp-cardtype { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--color-text-muted); }
.spp-del--card { visibility: visible; color: var(--color-text-muted); font-size: 13px; }
.spp-del--card:hover { color: var(--color-terracotta); }
/* Bouton « Ajouter une source de revenus » — au fil des cards, avant Services. */
.spp-addcard { margin: -2px 0 14px; padding-left: 2px; }
.spp-addcard .spp-add { font-size: 13px; }
/* Édition d'une card : crayon + déplacement de catégorie entre sources. */
.spp-cardedit { border: none; background: transparent; cursor: pointer; padding: 2px 4px;
  color: var(--color-text-muted); font-size: 13px; }
.spp-cardedit:hover, .spp-cardedit.is-on { color: var(--color-accent); }
/* Déplacer une catégorie (mode édition) — sous le nom, dans la 1re colonne (visible). */
.spp-move { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--color-accent); }
.spp-move .spp-sel { font-size: 11.5px; }
.spp-del.is-shown { visibility: visible; }

/* Libellé de driver sur 2 lignes : titre en haut, formule (badge) en dessous. */
.spp-drvtop { display: flex; align-items: baseline; flex-wrap: wrap; }
.spp-drvform { margin-top: 3px; }

/* Tables « année par année » (Revenus, Coûts directs…) : colonnes à largeur
   FIXE, collées à gauche après le libellé. La table grandit vers la DROITE
   quand on ajoute des années (défilement horizontal), sans re-répartir. */
.spp-yr { table-layout: fixed; width: auto; }
.spp-yr .l { width: 340px; }
.spp-yr th:not(.l), .spp-yr td:not(.l) { width: 92px; }
.spp-yr td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }
/* Sous-libellé sous l'année (réel / prév. / Plan) dans l'en-tête. */
.spp-yrsub { font-size: 9px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--color-text-muted); margin-top: 1px; }
/* La card d'une table année-par-année épouse son contenu (pas étalée sur toute
   la page quand il y a peu d'années). L'en-tête (note) peut passer à la ligne. */
.spp-card:has(.spp-yr) { width: fit-content; max-width: 100%; }
.spp-card:has(.spp-yr) .spp-card__note { white-space: normal; }

/* ── Saisie (charte : bleu, sans cadre, soulignement au focus) ─────────── */
.spp-in {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px; color: var(--color-field-focus);
  background: transparent; border: none; outline: none;
  text-align: right; width: 68px; padding: 0;
  border-bottom: 1px solid transparent;
}
.spp-in--text { text-align: left; width: 190px; font-size: 13px; }
.spp-in:focus { border-bottom-color: var(--color-field-focus); }

.spp-sel {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px;
  border: 1px solid var(--color-border); border-radius: 6px;
  padding: 2px 6px; color: var(--color-navy); background: var(--color-surface-card);
}

/* Ajout / suppression de lignes */
.spp-addrow td { padding: 6px 16px; }
.spp-add {
  font-family: inherit; font-size: 12.5px; color: var(--color-accent);
  background: none; border: none; cursor: pointer; padding: 0;
}
.spp-add:hover { text-decoration: underline; }
.spp-del {
  color: var(--color-text-muted); font-size: 12px; cursor: pointer;
  padding: 0 4px; background: none; border: none; visibility: hidden;
}
tr:hover .spp-del { visibility: visible; }
.spp-delcell { width: 26px; }

/* Badges */
.spp-badge {
  display: inline-block; font-size: 9.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  margin-left: 7px; vertical-align: 1px;
}
.spp-badge--soft { background: var(--color-accent-tint); }
.spp-badge--alert { background: color-mix(in srgb, var(--color-terracotta) 12%, transparent); color: var(--color-terracotta); }

/* ── Paramètres (rangées réglage) ──────────────────────────────────────── */
.spp-prow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--color-border-inner);
}
.spp-prow:last-child { border-bottom: none; }
.spp-prow__lbl { width: 340px; font-size: 13.5px; color: var(--color-navy); }
.spp-prow__lbl small { display: block; font-size: 11.5px; color: var(--color-text-muted); font-weight: 400; }
.spp-prow__val { font-size: 13px; color: var(--color-navy); }

/* Paramètres : titre puis bouton EN DESSOUS (colonne à gauche), description à droite. */
.spp-prow__main {
  flex: 0 0 400px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.spp-prow__lbl--plain { width: auto; }
.spp-prow__hint {
  margin-left: auto; flex: 0 1 560px; align-self: flex-start; padding-top: 2px;
  font-size: 11.5px; line-height: 1.4; color: var(--color-text-muted);
}
.spp-range { display: flex; align-items: center; gap: 10px; }
.spp-range input[type=range] { width: 220px; accent-color: var(--color-accent); }
.spp-range b { font-size: 12px; color: var(--color-navy); }

/* Toggle segmenté (pilules) */
.spp-seg {
  display: inline-flex; border: 1px solid var(--color-border);
  border-radius: 999px; overflow: hidden;
}
.spp-seg button {
  font-family: inherit; font-size: 12.5px; padding: 5px 15px;
  border: none; background: var(--color-surface-card);
  color: var(--color-text-muted); cursor: pointer;
}
.spp-seg button.on { background: var(--color-accent); color: var(--color-surface-card); font-weight: 600; }

/* Avertissement connexion manquante — donnée absente affichée absente. */
.spp-warn {
  font-size: 12.5px; color: var(--color-terracotta);
  padding: 8px 16px; border-bottom: 1px solid var(--color-border-inner);
}

/* Pont « Année 1 → Budget » (bouton inactif, mécanisme à venir) */
.spp-bridge {
  background: var(--color-surface-card);
  border: 1.5px solid var(--color-accent-soft); border-radius: 12px;
  padding: 13px 18px; display: flex; align-items: center; gap: 18px; margin-bottom: 14px;
}
.spp-bridge__title { font-size: 14px; font-weight: 600; color: var(--color-navy); margin-bottom: 2px; }
.spp-bridge__kpi { display: inline-block; margin-right: 14px; }
.spp-bridge__kpi label {
  font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); display: block;
}
.spp-bridge__kpi b { font-size: 15px; color: var(--color-navy); }
.spp-bridge button {
  margin-left: auto; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; border: none;
  background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed;
}

/* Étape « Investissements & amortissements » — 3 cards.

   Les cards utilisent le composant PlanCard de Planification (spp-card) : même
   en-tête, même pastille, même typographie — on ne l'imite plus, on le
   réutilise. Cette feuille ne stylise que les TABLEAUX du panneau (colonnes
   mensuelles, ancrage, saisie), au calibre des tables du plan (13 px).

   Charte : tokens :root uniquement. Cellules à saisir en bleu, SANS cadre —
   soulignement discret au focus. Cards tout en blanc (retour Olivier,
   2026-08-10) : la hiérarchie passe par la graisse et les filets, pas par des
   aplats. */

.iap { font-family: "Inter", system-ui, sans-serif; color: var(--color-text); }
.iap-empty { color: var(--color-text-muted); font-size: 13px; }

/* Marge blanche sur les côtés : les filets ne touchent pas le bord de la card. */
.iap-scroll { overflow-x: auto; padding: 0 16px; }

/* Colonnes CALÉES À GAUCHE (2026-08-11) : largeurs fixes, la table s'allonge
   vers la droite quand les mois s'ajoutent — plus d'étirement pleine largeur.
   Largeurs identiques sur les 3 cards → les mois restent alignés entre elles. */
.iap table { border-collapse: collapse; width: max-content; min-width: 0; font-size: 13px; }
.iap th, .iap td { padding: 7px 10px; text-align: right; white-space: nowrap; width: 66px; min-width: 66px; }
.iap thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border-inner);
}
.iap th.iap-lbl, .iap td.iap-lbl {
  text-align: left; width: 300px; min-width: 300px; padding-left: 0;
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface-card);
}
.iap th.iap-open, .iap td.iap-open {
  width: 140px; min-width: 140px;   /* « Durée de vie (ans) » tient sans élargir */
  border-right: 1px solid var(--color-border-inner);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.iap th.iap-end, .iap td.iap-end {
  border-left: 1px solid var(--color-border-inner);
  font-weight: 600; padding-right: 0; width: 80px; min-width: 80px;
}
.iap tbody tr + tr td { border-top: 1px solid var(--color-border-inner); }

.iap-v { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.iap-mut { color: var(--color-text-muted); }
/* Valeur d'actif : ce qui la diminue porte le signe moins. */
.iap-neg { color: var(--color-terracotta); }
.iap tr.iap-calc td { color: var(--color-text-muted); }
.iap tr.iap-calc td.iap-end { color: var(--color-text); font-style: normal; }
.iap tr.iap-tot td {
  font-weight: 600; color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}
.iap tr.iap-big td { font-size: 13.5px; }

/* Saisie : bleu, sans cadre. Le signe est posé au rendu, la saisie reste nue. */
.iap-cell, .iap-name, .iap-rate {
  border: 0; background: transparent; padding: 1px 0;
  font: inherit; color: var(--color-field-focus);
  text-align: right; width: 100%;
}
.iap-name { text-align: left; width: auto; min-width: 140px; }
.iap-rate { width: 44px; }
.iap-cell:focus, .iap-name:focus, .iap-rate:focus {
  outline: none; border-bottom: 1px solid var(--color-field-focus);
}
.iap-cell.iap-neg { color: var(--color-field-focus); }

/* Suppression : visible au survol de la ligne seulement. */
.iap-x {
  border: 0; background: transparent; cursor: pointer; margin-left: 6px;
  color: var(--color-text-muted); font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.iap tbody tr:hover .iap-x, .iap-x:focus-visible { opacity: 1; }
.iap-x:hover { color: var(--color-terracotta); }

/* Ajout : lien discret, comme dans le plan. */
.iap tr.iap-add td { padding-top: 5px; padding-bottom: 5px; }
.iap-addbtn {
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--color-accent);
}
.iap-addbtn:hover { text-decoration: underline; }

.iap-src { margin-left: 6px; font-size: 10px; color: var(--color-text-muted); }
.iap-to {
  margin-left: 6px; font-size: 10.5px; font-weight: 400;
  color: var(--color-accent);
}

/* Pieds de card : note d'ancrage, alerte, reports nommés. */
.iap-foot, .iap-ho {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; border-top: 1px solid var(--color-border-inner);
}
.iap-foott { font-size: 11px; color: var(--color-text-muted); }
.iap-warn { font-size: 11px; color: var(--color-terracotta); margin-left: auto; }
.iap-ho { font-size: 11.5px; color: var(--color-accent); }
.iap-ho b { color: var(--color-navy); }

/* ── Coût des produits vendus (carte périmètre + marge) ──────────────────── */
/* Sous-totaux (CA produits, COGS) : surlignage table = famille ardoise. */
.iap tr.pcp-sub td { font-weight: 600; color: var(--color-navy); background: var(--color-accent-tint); }
.iap tr.pcp-sub td.iap-lbl { background: var(--color-accent-tint); }
.iap tr.pcp-marge td {
  font-weight: 600; color: var(--color-sage);
  border-top: 1px solid var(--color-border);
}
.pcp-pct { display: block; font-size: 10px; font-weight: 400; color: var(--color-text-muted); }

/* Retirer du périmètre : au survol de la ligne seulement (comme .iap-x). */
.pcp-x {
  border: 0; background: transparent; cursor: pointer; margin-left: 6px;
  color: var(--color-text-muted); font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.iap tbody tr:hover .pcp-x, .pcp-x:focus-visible { opacity: 1; }
.pcp-x:hover { color: var(--color-terracotta); }

/* Driver par ligne : sélecteur discret + configuration inline. */
.pcp-driver { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; }
.pcp-mode, .pcp-cfgrow select, .pcp-add {
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text);
  font: inherit; font-size: 11px; padding: 1px 4px; max-width: 190px;
}
.pcp-cfg {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; font-size: 11px; color: var(--color-accent);
}
.pcp-cfg:hover { text-decoration: underline; }
.pcp-cfgrow { display: inline-flex; align-items: center; gap: 4px; }
.pcp-rate {
  border: 0; background: transparent; width: 40px; padding: 1px 0;
  font: inherit; font-size: 11.5px; color: var(--color-field-focus); text-align: right;
}
.pcp-rate:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.pcp-ok {
  border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer;
  background: var(--color-surface-card); font: inherit; font-size: 10.5px;
  color: var(--color-accent); padding: 1px 6px;
}
.pcp-switches { display: inline-flex; align-items: center; gap: 8px; }

/* Options de la section Stock & achats produits : AU-DESSUS des cards. */
.sps-options { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }

/* Plan produits — feuille PROPRE à la section (2026-08-12).

   Trois règles tenues partout, contre le désordre constaté :
     · une seule couleur par rôle — BLEU = ce qui se saisit (sans cadre, filet au
       focus) · NAVY = les totaux · ATÉNUÉ = les étiquettes · ARDOISE = les
       renvois vers un autre écran · SAGE = la marge ;
     · un seul alignement — texte à gauche, nombres à droite (chiffres tabulaires,
       même largeur de colonne partout) ;
     · un seul rythme — 14 px de gouttière horizontale, 7 px de hauteur de ligne.
   Tokens :root uniquement (charte). */

.spl-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.spl-seg {
  display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px;
  overflow: hidden; background: var(--color-surface-card);
}
.spl-seg button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px;
  border: 0; border-left: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.spl-seg button:first-child { border-left: 0; }
.spl-seg button.on { background: var(--color-accent); color: #fff; }
.spl-add, .spl-cta {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-navy); padding: 6px 14px;
}
.spl-add:hover, .spl-cta:hover { border-color: var(--color-accent); color: var(--color-accent); }
.spl-cta {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
  padding: 8px 18px; margin-top: 4px;
}
/* Bouton d'ajout PRINCIPAL de la barre : ardoise claire (accent-soft), avant
   « Tout replier » — se voit sans concurrencer la vue active. */
/* ＋ Modèle : tint clair AVEC filet accent ; « Tout replier » s'efface en
   contraste (pas de gras, texte atténué, filet standard). */
.spl-add--primary {
  background: var(--color-accent-tint-strong); border-color: var(--color-accent);
  color: var(--color-accent);
}
.spl-add--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.spl-add--quiet { font-weight: 400; color: var(--color-text-muted); }
.spl-add--quiet:hover { color: var(--color-accent); border-color: var(--color-accent); }
.spl-cta:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* ── Écran vide : il enseigne le parcours ─────────────────────────────────── */
.spl-start {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 22px 24px 24px; max-width: 720px;
}
.spl-start h2 {
  font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600;
  color: var(--color-navy); margin: 0 0 14px;
}
.spl-steps { margin: 0 0 18px; padding-left: 20px; }
.spl-steps li {
  font-size: 13px; line-height: 1.55; color: var(--color-text-muted);
  margin-bottom: 8px;
}
.spl-steps li::marker { color: var(--color-accent); font-weight: 700; }
.spl-steps b { color: var(--color-text); font-weight: 600; }
.spl-empty { font-size: 13px; color: var(--color-text-muted); padding: 20px 4px; }

/* ── Card catégorie ───────────────────────────────────────────────────────── */
/* `overflow: visible` + `position: relative` : la card ancre le popover de
   règle et ne le coupe pas (le débordement horizontal du tableau reste géré
   par .spl-scroll, qui porte l'arrondi bas). */
.spl-card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(43, 32, 62, .04);
  margin: 0 0 10px; overflow: visible; position: relative;
}
.spl-card > .spl-scroll { border-radius: 0 0 12px 12px; }
/* En-tête en DEUX rangées (structure 2026-08-15) :
     1. ◆ + TITRE à gauche — badge du modèle tout à droite ;
     2. réglages étiquetés (Mode de saisie · Compte + délai), espacée. */
.spl-head {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 18px 12px; border-bottom: 1px solid var(--color-border-inner);
}
.spl-head__row { display: flex; align-items: center; gap: 10px; }
.spl-head__row .spl-catname { flex: 1 1 auto; min-width: 120px; }
.spl-head__tag { margin-left: auto; }
.spl-head__cfg { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.spl-cfg { display: inline-flex; align-items: center; gap: 9px; }
.spl-cfg > label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.spl-mark {
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  font-size: 10px; line-height: 1; padding: 0; margin-bottom: 3px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.spl-mark:hover { background: var(--color-accent); color: var(--color-surface-card); }
.spl-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spl-field--acct { margin-left: auto; padding-left: 18px; }
.spl-flabel {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.spl-catname, .spl-rowname, .spl-num {
  border: 0; background: transparent; padding: 1px 0;
  font: inherit; color: var(--color-field-focus);
}
.spl-catname { font-size: 16px; font-weight: 700; min-width: 220px; }
.spl-catname:focus, .spl-rowname:focus, .spl-num:focus {
  outline: none; border-bottom: 1px solid var(--color-field-focus);
}
.spl-catname::placeholder, .spl-rowname::placeholder, .spl-num::placeholder {
  color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); font-weight: 400;
}
.spl-catname:disabled, .spl-rowname:disabled { color: var(--color-navy); }
.spl-acct {
  font: inherit; font-size: 13.5px; font-weight: 400; color: var(--color-field-focus);
  background: transparent; border: 0; padding: 1px 0; cursor: pointer; max-width: 260px;
}
.spl-acct:focus { outline: none; }
/* Compte non choisi : le champ le dit lui-même (terracotta = alerte système),
   plus de bandeau d'avertissement séparé. */
/* Compte non choisi = ALERTE (terracotta de la charte) : fond teinté + filet,
   pour qu'on ne publie pas une carte non rattachée (2026-08-16). */
.spl-acct--todo {
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 12%, var(--color-surface-card));
  border: 1px solid var(--color-terracotta);
  border-radius: 7px;
  padding: 1px 6px;
}
/* Badge de modèle sur la card négoce (ardoise, petites capitales). */
.spl-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-on-tint); background: var(--color-accent-tint);
  border-radius: 999px; padding: 3px 9px; flex: 0 0 auto; align-self: center;
}
/* ── Règle de calcul (card négoce) : pastille + popover ──────────────────── */
/* La règle ÉCRIT les mois prévisionnels puis les laisse modifiables — la
   pastille rappelle seulement la dernière règle appliquée et son paramètre. */
.spl-c-rule { text-align: left; }
.spl-table thead th.spl-c-rule { white-space: normal; }
.spl-rule {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  text-align: left; line-height: 1.25; color: var(--color-field-focus); max-width: 100%;
}
.spl-rule i { font-style: normal; color: var(--color-text-muted); }
.spl-rule em {
  display: block; font-style: normal; font-size: 10px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spl-rule:disabled { cursor: default; }
.spl-pop {
  position: absolute; z-index: 30; min-width: 232px;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .10); padding: 8px;
}
.spl-pop__h {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 2px 6px 6px;
}
.spl-pop__inds {
  background: var(--color-accent-tint); border-radius: 7px; padding: 6px 8px; margin-bottom: 8px;
}
.spl-pop__i { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; padding: 1px 0; }
.spl-pop__i span { color: var(--color-text-muted); }
.spl-pop__i b { color: var(--color-navy); font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.spl-pop__modes { display: flex; flex-direction: column; gap: 1px; }
.spl-pop__modes button {
  border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--color-text); padding: 5px 8px; border-radius: 6px;
}
.spl-pop__modes button:hover:not(:disabled) { background: var(--color-surface-page); }
.spl-pop__modes button.on { background: var(--color-accent-tint); color: var(--color-accent); font-weight: 600; }
.spl-pop__modes button:disabled { color: var(--color-text-muted); opacity: .5; cursor: default; }
.spl-pop__p {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.spl-pop__p .spl-num { width: 74px; text-align: left; font-size: 12.5px; }
.spl-pop__p span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.spl-pop__n {
  margin: 8px 0 0; padding: 6px 8px 0; border-top: 1px solid var(--color-border-inner);
  font-size: 10.5px; color: var(--color-text-muted); line-height: 1.35;
}

/* Pilule à segments (unité d'une card presta : heures | JH | CHF) — les trois
   choix VISIBLES (demande 2026-08-15), actif en ardoise claire. */
.spl-pillseg {
  display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px;
  overflow: hidden; background: var(--color-surface-card); align-self: center;
}
.spl-pillseg button {
  font: inherit; font-size: 11px; font-weight: 600; padding: 3px 10px;
  border: 0; border-left: 1px solid var(--color-border-inner);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.spl-pillseg button:first-child { border-left: 0; }
.spl-pillseg button.on { background: var(--color-accent-tint-strong); color: var(--color-accent); }

/* Select de cellule DISCRET : une valeur bleue sans cadre (charte saisie),
   pas un bouton — utilisé pour le décalage d'achat M−n. */
.spl-cellsel {
  font: inherit; font-size: 12.5px; color: var(--color-field-focus);
  background: transparent; border: 0; padding: 1px 0; cursor: pointer; max-width: 100%;
}
.spl-cellsel:focus { outline: none; }
.spl-cardx {
  align-self: flex-start; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 13px; line-height: 1; padding: 2px;
  opacity: 0; transition: opacity .12s ease;
}
.spl-card:hover .spl-cardx, .spl-cardx:focus-visible { opacity: 1; }
.spl-cardx:hover { color: var(--color-terracotta); }

/* ── Tableau ──────────────────────────────────────────────────────────────── */
.spl-scroll { overflow-x: auto; }
.spl-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
.spl-table th, .spl-table td {
  padding: 7px 8px; white-space: nowrap; vertical-align: middle;
}
.spl-table thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-inner);
  background: var(--color-surface-card);
}
/* Colonnes : texte à gauche, nombres à droite — largeurs fixes pour que les
   mois restent alignés d'une card à l'autre. */
/* GRILLE FIXE et identique sur TOUTES les cards (colgroup : libellé 190 +
   zone paramètres 240 partagée + 12 mois de 46 + total 66 ≈ 1 060 px) : les
   colonnes de mois s'alignent d'une card à l'autre, quel que soit le modèle,
   et les 12 mois tiennent sans défilement sur un écran plein. */
/* Responsive : libellé + paramètres en px FIXES, les mois se partagent le
   reste — les colonnes restent alignées d'une carte à l'autre à toute
   largeur, et le défilement horizontal n'apparaît qu'en dessous de 980px. */
.spl-table--fixed { table-layout: fixed; width: 100%; min-width: 980px; }
/* En disposition fixe, `width: max-content` laisse le navigateur dimensionner
   les colonnes auto sur leur CONTENU (Safari : colonnes géantes, mois hors
   champ). `width: 100%` rend la répartition égale déterministe. */
.spl-table th, .spl-table td { border-left: 0 !important; border-right: 0 !important; }
.spl-table--fixed th, .spl-table--fixed td { overflow: hidden; text-overflow: ellipsis; }
.spl-c-lbl { text-align: left; padding-left: 18px !important; }
.spl-c-unit { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* En-têtes des colonnes de paramètres : sur 2 lignes plutôt que tronqués
   (« Valeur (kCHF) », « Coût (% du CA) » doivent se lire en entier). */
/* Les en-têtes de paramètres ne sont JAMAIS tronqués : ils débordent sur deux
   lignes plutôt que de finir en « … » (constat 2026-08-16, carnet en mode %). */
/* En-têtes de paramètres : deux lignes MAXIMUM — padding réduit, pas de
   césure au milieu d'un mot (constat 2026-08-16 : « HORAIR/E » sur 3 lignes). */
.spl-table thead th.spl-c-unit {
  white-space: normal; line-height: 1.15;
  overflow: visible; text-overflow: clip;
  letter-spacing: 0; word-break: keep-all; -webkit-hyphens: none; hyphens: none;
  padding-left: 4px !important; padding-right: 4px !important;
  font-size: 9.5px;
}
.spl-c-val { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.spl-c-tot {
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--color-navy);
  padding-right: 18px !important;
}
/* Filet devant le total annuel (demande 2026-08-15) — spécificité au-dessus
   du « border-left: 0 !important » générique de .spl-table th/td. */
.spl-table th.spl-c-tot, .spl-table td.spl-c-tot {
  border-left: 1px solid var(--color-border-inner) !important;
}
/* Respiration entre les paramètres (prix, coût) et les volumes. */
.spl-c-sep { width: 10px; min-width: 10px; padding: 0 !important; }
.spl-num { width: 100%; text-align: right; }
.spl-ro { color: var(--color-text-muted); }
.spl-closed .spl-ro { color: var(--color-text-muted); }

/* Le ✕ (masqué hors survol) débordait de la cellule : l'ellipse le rendait
   en « .. ». Il passe en absolu, l'input lui laisse sa place. */
.spl-c-lbl { position: relative; }
.spl-rowname { min-width: 0; width: calc(100% - 24px); }
/* Sous-rangée du préfacturé : paramètres étiquetés, pleine largeur. */
.sp-subrow td { padding: 2px 8px 8px 18px !important; border-top: 0 !important; }
.sp-sub { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sp-sub label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.sp-sub .spl-num { width: 62px; text-align: left; font-size: 12.5px; }
.sp-subnote { font-size: 11px; color: var(--color-text-muted); font-style: italic; }
.spl-rowx {
  border: 0; background: transparent; cursor: pointer;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: 12px; line-height: 1;
  opacity: .35; transition: opacity .12s ease;
}
.spl-table tbody tr:hover .spl-rowx, .spl-rowx:focus-visible { opacity: 1; }
.spl-rowx:hover { color: var(--color-terracotta); }

/* « ＋ Produit » : DANS le tableau, aligné sous la colonne Produit. */
.spl-addrow td { padding-top: 4px !important; padding-bottom: 5px !important; }
.spl-addrow button {
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent);
}
.spl-addrow button:hover { text-decoration: underline; }

/* ── Bloc de calcul (volumes · CA · coût · marge) : fond ivoire UNI (maquette
   Olivier 2026-08-12), CA en navy, coût atténué, pointillé avant la marge. */
.spl-sum td { font-weight: 600; color: var(--color-navy); background: var(--color-surface-th); }
.spl-sum--first td { border-top: 1px solid var(--color-border-inner) !important; }
.spl-sum--ca td { background: var(--color-surface-th); }
.spl-sum + .spl-sum:not(.spl-sum--marge) td { font-weight: 400; color: var(--color-text-muted); }
.spl-sum--ca td { font-weight: 600 !important; color: var(--color-navy) !important; }
.spl-sum--marge td {
  color: var(--color-sage); background: var(--color-surface-th);
  border-top: 1px dashed var(--color-border) !important;
}
.spl-unit {
  margin-left: 8px; font-size: 10px; font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.spl-to { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--color-accent); }
.spl-pct {
  margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--color-sage);
  background: color-mix(in srgb, var(--color-sage) 12%, transparent);
  border-radius: 6px; padding: 1px 7px;
}

/* Repère de clôture : filet avant le 1er mois OUVERT. Les mois clos restent
   saisissables (unités vendues connues) — le filet dit seulement où l'on passe
   du constaté au planifié. */
.spl-bound { border-left: 1px solid var(--color-accent-soft) !important; }  /* clôture : seule verticale */

/* Réel / prévisionnel façon BANDEAUX (inspiration Pigment, 2026-08-15) : deux
   champs colorés AU-DESSUS des mois — Réel en sable (fait comptable),
   Prévisionnel en ardoise pleine (saisie) — et les cellules restent BLANCHES.
   La classe .spl-fore ne teinte plus rien (conservée sur les cellules pour un
   éventuel usage futur). */
.spl-band {
  text-align: left !important; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px !important; border-bottom: 0 !important;
}
/* Spécificité relevée : `.spl-table thead th` pose un fond card blanc qui
   écrasait les bandeaux (constat 2026-08-15). */
.spl-table thead th.spl-band--real {
  /* Réalisé en ardoise CLAIRE (même famille que le prévisionnel plein) —
     ex-sable, changé le 2026-08-15 ; le bandeau dit « Réalisé », plus
     l'inducteur. */
  background: var(--color-accent-tint-strong); color: var(--color-on-tint);
  border-radius: 6px 0 0 6px;
}
.spl-table thead th.spl-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }

/* ── Plan services : menu de modèles + spécificités ──────────────────────── */
.sp-addwrap { position: relative; display: inline-block; }
/* Tuiles de modèles : hauteurs ALIGNÉES (grid étire les cellules), fond tuile
   léger (surface page), ombre douce, accent au survol. */
.sp-kinds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px; margin-top: 10px; align-items: stretch;
}
/* Popup du « ＋ » : tuiles LARGES (plus horizontales que verticales), 3 par
   rangée — la formule tient sur une seule ligne. Ancré au bord GAUCHE de la
   barre (pas au bouton) pour tenir à l'écran. */
/* Popup ancré au BOUTON « ＋ Modèle » (aligné sur sa gauche, 2026-08-16). */
.spl-bar { position: relative; }
.sp-addwrap { position: relative; }
.sp-addwrap .sp-kinds {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 460px;
  /* En COLONNE (demande 2026-08-16) : une tuile par rangée, menu étroit. */
  width: min(460px, 100%); grid-template-columns: 1fr;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 10px; box-shadow: 0 8px 24px rgba(43, 32, 62, .14);
}
.sp-kind {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  height: 100%;
  font: inherit; text-align: left; cursor: pointer; padding: 14px 16px;
  border: 1px solid var(--color-border); border-radius: 10px;
  /* Tuile en tint ardoise clair : se détache du fond crème et du popup blanc. */
  background: var(--color-accent-tint);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .07);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.sp-kind:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-tint-strong);
  box-shadow: 0 3px 10px rgba(43, 32, 62, .12);
  transform: translateY(-1px);
}
.sp-kind b { font-size: 13.5px; color: var(--color-navy); }
.sp-kind span { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.sp-kindtag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent); background: var(--color-accent-tint);
  border-radius: 6px; padding: 2px 7px; margin-bottom: 4px; white-space: nowrap;
}
.sp-terms-fixed { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.sp-bill select {
  border: 0; background: transparent; font: inherit; font-size: 12px;
  color: var(--color-field-focus); cursor: pointer; max-width: 100px; padding: 0;
}
.sp-over { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--color-terracotta); }
.sp-startp { font-size: 13px; color: var(--color-text-muted); margin: 0 0 14px; }


/* Card AGRÉGÉE : une seule ligne — nom, badge, et à droite la mini-courbe des
   mois, la marge % et le TOTAL ANNUEL. */
.spl-aggsum { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.spl-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.spl-spark i { display: block; width: 5px; background: var(--color-accent); border-radius: 1px; min-height: 2px; }
.spl-aggpct {
  font-size: 11.5px; font-weight: 700; color: var(--color-sage);
  background: color-mix(in srgb, var(--color-sage) 12%, transparent);
  border-radius: 6px; padding: 2px 8px;
}
.spl-aggtot { font-size: 15px; font-weight: 700; color: var(--color-navy); white-space: nowrap; }
.spl-aggtot small { font-size: 10px; font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }

/* Champs d'en-tête à ICÔNE : l'étiquette texte cède la place, le libellé
   complet reste en infobulle. */
.spl-fic { flex-direction: row; align-items: center; gap: 6px; }
.spl-fic svg { width: 13px; height: 13px; color: var(--color-text-muted); flex: 0 0 auto; }

/* Colonnes teintées : deux tons de la même couleur d'accent (ardoise) —
   tarif/prix un peu marqué, coût encore plus clair. Dérivés par color-mix,
   jamais un hex inventé (charte). */
col.spl-col-price { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-card)); }
col.spl-col-cost { background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface-card)); }
/* Les fonds de rangées de totaux priment sur la teinte de colonne. */
.spl-sum td { position: relative; }

/* ── Règles de coût (section Coût des produits vendus) ───────────────────── */
/* Pastilles du taux observé : Ø N-1 · N réel · À venir · N total — le taux
   s'AFFICHE observé, il se POSE à la main (jamais auto-appliqué). */
.cr-obs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 14px 2px; }
.cr-obs__t {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.cr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--color-text-muted);
  background: var(--color-accent-tint); border-radius: 6px; padding: 2px 8px;
}
.cr-chip b { color: var(--color-on-tint); font-weight: 700; }
/* Taux posé : valeur éditable = bleu saisie, sans cadre (charte). */
.cr-rate { display: inline-flex; align-items: baseline; gap: 3px; }
.cr-rate input {
  width: 52px; font: inherit; font-weight: 600; text-align: right;
  color: var(--color-field-focus); background: transparent; border: 0; padding: 2px 0;
}
.cr-rate input:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.cr-rate input::placeholder { color: var(--color-text-muted); font-weight: 400; }
.cr-rate > span { font-size: 11.5px; color: var(--color-text-muted); }
/* Lignes dérivées du circuit stock (Achats, Variation) : lecture atténuée. */
.cr-derived td { color: var(--color-text-muted); font-weight: 400; }
/* Lignes de CA de référence : chips + ajout, sous la table. */
.cr-refs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 14px 12px;
}
.cr-refs > .spl-flabel { margin-right: 2px; }
.cr-chip--ref { background: var(--color-accent-tint-strong); color: var(--color-on-tint); }
.cr-chip--ref button {
  font: inherit; font-size: 10px; line-height: 1; cursor: pointer;
  color: var(--color-text-muted); background: transparent; border: 0; padding: 0 0 0 2px;
}
.cr-chip--ref button:hover { color: var(--color-terracotta); }
.cr-refs select {
  font: inherit; font-size: 12px; color: var(--color-accent); cursor: pointer;
  background: transparent; border: 0; padding: 2px 0;
}
.cr-refs select:focus { outline: none; }
/* Titre de la card totale « Coût des produits vendus » (lecture, pas saisie). */
.cr-title { color: var(--color-navy); font-weight: 600; }

/* Fiche de modèle en 3 lignes standard (tuiles du « ＋ » Plan services) :
   inducteur mensuel (ligne entière en gras terracotta) · formule (une seule
   ligne, jamais de saut) · convient pour (italique, en dernier). */
.sp-kind__ind { font-size: 11.5px; font-weight: 700; color: var(--color-terracotta); line-height: 1.35; }
.sp-kind__f { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; white-space: nowrap; }
.sp-kind__fit { font-size: 11.5px; font-style: italic; color: var(--color-text-muted); line-height: 1.35; }

/* Inducteur mensuel en clair au-dessus des mois (cards de modèles) — aligné
   sur le début EXACT de la colonne JAN (même gouttière que les cellules de
   mois, pas le padding du libellé), gras et souligné : on doit lire d'un
   coup d'œil qu'il couvre janvier → décembre. */
.spl-indrow th { border-bottom: 0 !important; padding-bottom: 6px !important; }
th.spl-ind {
  text-align: left !important; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-accent); padding: 8px 8px 6px !important;
  border-bottom: 1.5px solid var(--color-accent-soft) !important;
}
/* Cellule mensuelle en %, format « valeur % » (contrat d'heures annuel) —
   input bleu sans cadre + suffixe atténué, pour ne pas lire un nombre absolu. */
.spl-pctcell { display: inline-flex; align-items: baseline; gap: 2px; }
.spl-pctcell i { font-style: normal; font-size: 11px; color: var(--color-text-muted); }

/* ── Synthèse du plan : à PLAT sur le fond (pas une card) ────────────────── */
.spl-card--hours {
  background: transparent; border: 0; box-shadow: none;
  margin: 0 0 14px;
}
/* Fond transparent SAUF les bandes Réalisé / Prévisionnel, qui gardent leurs
   couleurs de charte (demande 2026-08-16). */
.spl-card--hours .spl-table thead th:not(.spl-band) { background: transparent; }
.spl-card--hours .spl-table td { background: transparent; }
/* Filet de clôture sous la dernière ligne du tableau. */
.spl-card--hours .spl-table tbody tr:last-child td { border-bottom: 1px solid var(--color-border); }

/* ── Drag & drop des cards ──────────────────────────────────────────────── */
/* Poignée toujours visible, renforcée au survol (retour 2026-08-16). */
.spl-grip {
  cursor: grab; -webkit-user-select: none; user-select: none; color: var(--color-text-muted);
  font-size: 15px; font-weight: 700; letter-spacing: -2px; padding: 0 4px;
  opacity: .55; transition: opacity .12s ease, color .12s ease;
}
.spl-head:hover .spl-grip { opacity: 1; color: var(--color-accent); }
.spl-grip:active { cursor: grabbing; }
.spl-card.is-dragging { opacity: .45; }
/* Cible de dépôt : liseré ardoise au-dessus de la card visée. */
.spl-card.is-dropover { box-shadow: 0 -3px 0 0 var(--color-accent); }

/* ── Confirmation de suppression ────────────────────────────────────────── */
.spl-confirm {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(43, 32, 62, .32);
  display: flex; align-items: center; justify-content: center;
}
.spl-confirm__box {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 20px 22px; max-width: 420px;
  box-shadow: 0 12px 36px rgba(43, 32, 62, .22);
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; color: var(--color-text);
}
.spl-confirm__box p { margin: 0 0 16px; }
.spl-confirm__btns { display: flex; justify-content: flex-end; gap: 10px; }
.spl-confirm__btns button {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-text);
  padding: 7px 16px;
}
.spl-confirm__del {
  background: var(--color-terracotta) !important; border-color: var(--color-terracotta) !important;
  color: #fff !important;
}


/* ── Synthèse : figures-clés dans la zone de gauche (proto B) ────────────── */
/* Aligné sur le ◆ des cartes (18px de padding + 1px de filet + poignée), pas
   sur leur bordure (retour 2026-08-16). */
.spl-synth-side {
  vertical-align: top; padding: 4px 8px 4px 44px !important;
}
.spl-synth-side .spl-skpi { display: flex; }
/* Bascule posée sur la ligne des mois, alignée sur les figures-clés. */
.spl-table thead th.spl-th-toggle { padding-left: 44px !important; text-align: left; vertical-align: bottom; }
.spl-skpi { display: inline-flex; align-items: baseline; gap: 6px; }
.spl-skpi b {
  font-family: "Fraunces", Georgia, serif; font-size: 24px; font-weight: 600;
  color: var(--color-navy);
}
.spl-skpi small { font-size: 11px; color: var(--color-text-muted); }
.spl-skpi--marge b { color: var(--color-sage); }
.spl-synth-toggle {
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-text-muted);
  padding: 3px 10px;
}
.spl-synth-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.spl-synth-card td { color: var(--color-text-muted); font-size: 12px; }

/* Mini-péristyle du bouton de carte : la cour s'évide quand on ouvre
   (zoom « on entre dans la palestre »), rotation douce. */
.spl-mark__logo { display: block; transition: transform .25s ease; }
.spl-mark__logo .spl-mark__court {
  transform-origin: 32px 32px;
  transition: opacity .25s ease, transform .25s ease;
  opacity: 1;
}
.spl-mark__logo.is-open { transform: rotate(90deg); }
.spl-mark__logo.is-open .spl-mark__court { opacity: 0; transform: scale(2.2); }

/* Hiérarchie des figures : CA en grand, marge et heures en dessous, plus petits. */
.spl-skpi--marge b { font-size: 15px; }
.spl-skpi--h b { font-size: 13px; color: var(--color-text-muted); }


/* Total d'une ligne saisie en % qui dépasse 100 : alerte franche (charte). */
.spl-table td.spl-c-tot--over {
  color: #fff !important;
  background: var(--color-terracotta) !important;
  font-weight: 700;
  border-radius: 6px;
}

/* TROIS LECTURES du plan (2026-08-17) : chiffre d'affaires (+ heures) · facturé ·
   encaissé. Segment secondaire — la vue temporelle (mensuel / pluriannuel) reste
   la bascule principale, celle-ci se lit un cran plus discret. */
.spl-seg--metric button { font-size: 12.5px; font-weight: 500; padding: 6px 12px; }
.spl-seg--metric button.on {
  background: var(--color-accent-tint-strong); color: var(--color-on-tint); font-weight: 600;
}

/* Mouvements exceptionnels — une ligne par écriture (2026-08-17). */
.cmv-empty { padding: 24px; color: var(--color-text-muted); }
.cmv-add {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 3px 12px;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text);
}
.cmv-add:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Les quatre indicateurs, en tête de vue. */
.cmv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-gap: 12px; gap: 12px; margin: 0 0 18px; }
.cmv-kpi { background: var(--color-surface-page); border-radius: 10px; padding: 10px 12px; }
.cmv-kpi__lbl { display: block; font-size: 12px; color: var(--color-text-muted); }
.cmv-kpi__val { display: block; font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600; color: var(--color-navy); }

/* La barre de défilement horizontale se posait SUR la dernière ligne (constat
   Olivier 2026-08-17) : on lui réserve sa place sous le tableau. */
.cmv-wrap { overflow-x: auto; padding-bottom: 16px; scrollbar-gutter: stable; }
/* Tenir sur UNE page sans défilement : largeurs en pourcentage, contenu tronqué
   proprement plutôt que débordant (retour Olivier 2026-08-17). */
.cmv { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.cmv col.c-num { width: 11%; } .cmv col.c-lbl { width: 23%; } .cmv col.c-mo { width: 7%; }
.cmv col.c-rec { width: 13%; } .cmv col.c-acc { width: 16%; } .cmv col.c-kl { width: 11%; }
.cmv col.c-del { width: 28px; }
.cmv td, .cmv th { overflow: hidden; }
.cmv thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 4px 8px 8px 0; border-bottom: 1px solid var(--color-border);
}
.cmv tbody td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--color-border-inner); vertical-align: middle; }

/* Le montant ouvre la ligne (retour Olivier 2026-08-17) : chiffres alignés à
   droite dans leur colonne, respiration avant le libellé. */
.cmv-c-num, th.cmv-c-num { text-align: right; padding-right: 16px; }
.cmv-c-cash, th.cmv-c-cash { text-align: center; }
.cmv-c-rec { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cmv-c-del { width: 24px; }
.cmv-none { color: var(--color-text-muted); padding: 14px 0; }

/* Champ à saisir : bleu de la charte sur fond ambre très léger (il se voit même
   vide) — même grammaire que la section TVA. */
.cmv-field {
  border: 0; padding: 2px 6px; border-radius: 3px; font: inherit;
  color: var(--color-field-focus); background: color-mix(in srgb, var(--color-amber) 8%, transparent);
  width: 100%;
}
.cmv-field--num { text-align: right; width: 100%; }
.cmv-field--n { width: 34px; text-align: right; padding: 2px 4px; }
.cmv-field:focus { outline: none; box-shadow: inset 0 -1px 0 var(--color-field-focus); }
.cmv-sel {
  border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--color-field-focus); cursor: pointer; width: 100%; max-width: 100%;
  text-overflow: ellipsis;
}
.cmv-sel:focus { outline: none; }
.cmv-check { display: inline-flex; align-items: center; cursor: pointer; }
.cmv-hint { font-size: 11px; color: var(--color-text-muted); margin-left: 4px; cursor: help; }
.cmv-del { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 15px; }
.cmv-del:hover { color: var(--color-terracotta); }
/* Écriture sans effet monétaire : elle vit au bilan, pas dans le plan. */
.cmv-nocash td { color: var(--color-text-muted); }
.cmv-note { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }

/* Cockpit CFO — corps de l'onglet Cockpit du hub CFO. Recréation fidèle du
   prototype de design, habillée avec les tokens de la charte (aucun hex hors
   charte : les teintes de statut sont dérivées par color-mix des tokens sage /
   amber / terracotta). */

.ckpit { position: relative; }

/* Teintes de statut, dérivées des tokens charte. */
.ckpit__st--favorable { --st: var(--color-sage); --st-tint: color-mix(in srgb, var(--color-sage) 12%, white); }
.ckpit__st--attention { --st: var(--color-amber); --st-tint: color-mix(in srgb, var(--color-amber) 13%, white); }
.ckpit__st--critique  { --st: var(--color-terracotta); --st-tint: color-mix(in srgb, var(--color-terracotta) 12%, white); }

/* ── Signaux clés (colonne droite, état repos) ────────────────────────────── */
.ckpit__signals { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ckpit__signal {
  position: relative; padding-left: 19px; font-size: 13.5px; line-height: 1.5; color: var(--color-text);
}
.ckpit__signal::before {
  content: ''; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--color-terracotta);
}
.ckpit__signal strong { font-weight: 700; color: var(--color-navy); }
.ckpit__nosignal { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ── Toggle de vue ────────────────────────────────────────────────────────── */
.ckpit__viewbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 4px 0 16px;
}
/* Le choix de vue est passé aux onglets du hub : la barre ne porte plus que
   l'indice + le bouton d'édition, alignés à droite. */
.ckpit__viewbar--actions { justify-content: flex-end; }
.ckpit__seg { display: inline-flex; background: var(--color-surface-page); border-radius: 12px; padding: 4px; gap: 4px; }
.ckpit__seg-btn {
  font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 9px;
  cursor: pointer; transition: all .14s; border: none; background: transparent;
  color: var(--color-text-muted); font-family: inherit;
}
.ckpit__seg-btn.is-on {
  background: var(--color-surface-card); color: var(--color-text);
  box-shadow: 0 1px 3px rgba(60, 50, 38, .18);
}
.ckpit__hint { font-size: 12.5px; color: var(--color-text-muted); }
.ckpit__editbtn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 8px 14px; border-radius: 10px; transition: all .14s;
  background: var(--color-surface-card); color: var(--color-text-muted);
  border: 1px solid var(--color-border); font-family: inherit;
}
.ckpit__editbtn.is-on { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ── Corps master-détail : gauche (cartes + tuile clé) · droite fixe (50 %) ── */
.ckpit__body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px; gap: 18px; align-items: stretch; }
.ckpit__left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ckpit__right { display: flex; flex-direction: column; min-width: 0; }
.ckpit__right > * { flex: 1 1; animation: ckFade .18s ease; }
.ckpit__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 14px; gap: 14px; align-content: start; }

/* Panneau droit = une seule card jusqu'en bas (signaux + commentaires + graphe). */
.ckpit__panel.std-card { margin-bottom: 0; display: flex; flex-direction: column; }
.ckpit__panel .std-card__body { flex: 1 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; }
.ckpit__panel-sub {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--color-border-inner);
}

/* Fond fantôme (test — semi-transparent, sans aplat blanc). */
.ckpit__panel--ghost.std-card { background: color-mix(in srgb, var(--color-surface-card) 42%, transparent); box-shadow: none; }
.ckpit__panel--ghost .std-card__head { background: transparent; }

/* ── Carte KPI (blanche, sobre — statut porté par le seul badge) ──────────── */
.ckc {
  display: flex; flex-direction: column; gap: 4px; min-height: 128px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 14px; padding: 13px 14px 11px; cursor: pointer;
  transition: box-shadow .14s, border-color .14s, opacity .14s;
  box-shadow: 0 1px 2px rgba(60, 50, 38, .05);
}
.ckc:hover { box-shadow: 0 8px 22px -16px rgba(60, 50, 38, .38); }
.ckc.is-active { border-color: var(--color-accent); box-shadow: 0 12px 30px -18px rgba(60, 50, 38, .4); }
.ckc.is-dim { opacity: .62; }
.ckc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ckc__label { font-size: 12.5px; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.ckc__sublabel { font-size: 11.5px; font-weight: 400; color: var(--color-text-muted); line-height: 1.15; margin-top: 1px; }
.ckc__badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--st);
  background: var(--st-tint); padding: 3px 8px; border-radius: 999px; flex: none;
}
.ckc__valrow { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.ckc__value { font-size: 29px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-navy); }
.ckc__unit { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.ckc__rate { font-size: 12.5px; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text-muted); margin-left: 2px; }
.ckc__sub { font-size: 11.5px; color: var(--color-text-muted); }
.ckc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.ckc__delta { font-size: 12px; font-weight: 600; color: var(--color-delta-neutral); white-space: nowrap; }
.ckc__delta.is-fav { color: var(--color-delta-favorable); }
.ckc__delta.is-alert { color: var(--color-delta-alert); }

/* Mode édition — interrupteur (accent ardoise) */
.ckc__switchrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.ckc__switch-lbl { font-size: 11.5px; font-weight: 600; }
.ckc__switch-lbl.on { color: var(--color-accent); }
.ckc__switch-lbl.off { color: var(--color-text-muted); }
.ckc__switch { position: relative; width: 34px; height: 19px; border-radius: 999px; flex: none; transition: background .15s; background: var(--color-border); }
.ckc__switch.on { background: var(--color-accent); }
.ckc__knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.ckc__switch.on .ckc__knob { left: 17px; }

/* Note d'unité (kCHF) dans l'en-tête des cards graphiques standard. */
.ckpit__unit-note { font-size: 11.5px; color: var(--color-text-muted); }

/* ── Panneau de détail (inline, colonne droite) — même fond fantôme de test ── */
.ckdr {
  background: color-mix(in srgb, var(--color-surface-card) 42%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 16px; overflow: hidden; animation: ckFade .18s ease;
}
.ckdr__topbar { height: 4px; background: var(--st); }
.ckdr__pad { padding: 22px 26px 34px; }
.ckdr__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ckdr__name { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--color-text-muted); text-transform: uppercase; }
.ckdr__valrow { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.ckdr__value { font-size: 33px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-navy); }
.ckdr__unit { font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.ckdr__pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--st); background: var(--st-tint); padding: 5px 12px; border-radius: 999px; margin-top: 10px; }
.ckdr__close { cursor: pointer; color: var(--color-text-muted); font-size: 23px; line-height: 1; padding: 3px 9px; border-radius: 8px; flex: none; border: none; background: transparent; }
.ckdr__close:hover { background: var(--color-surface-page); color: var(--color-text); }
.ckdr__stats { display: flex; gap: 9px; margin-top: 16px; }
.ckdr__stat { flex: 1 1; background: var(--color-surface-th); border: 1px solid var(--color-border-inner); border-radius: 11px; padding: 11px 12px; }
.ckdr__stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); line-height: 1.3; }
.ckdr__stat-val { font-size: 17px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-top: 5px; color: var(--color-text); }
.ckdr__ecart { margin-top: 12px; display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--st); background: var(--st-tint); padding: 6px 12px; border-radius: 9px; }
.ckdr__section { margin-top: 22px; }
.ckdr__section-t { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; }
.ckdr__driver { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--color-border-inner); }
.ckdr__driver-l { font-size: 13px; color: var(--color-text); }
.ckdr__driver-v { font-size: 13px; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text); }
/* Mix des revenus (C6) : libellé + actuel (val · %) + N-1 (val · %). */
.ckdr__mixrow { display: grid; grid-template-columns: 1fr auto auto; grid-gap: 16px; gap: 16px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--color-border-inner); }
.ckdr__mix-l { font-size: 13px; color: var(--color-text); }
.ckdr__mix-v { font-size: 13px; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text); text-align: right; min-width: 96px; }
.ckdr__mix-v em { font-style: normal; font-weight: 500; color: var(--color-text-muted); }
.ckdr__mix-25 { color: var(--color-text-muted); }
.ckdr__mixhead .ckdr__mix-v { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.ckdr__driver-v.neg { color: var(--color-terracotta); }
.ckdr__driver-pct { font-weight: 500; font-style: normal; color: var(--color-text-muted); }
.ckdr__cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; font-weight: 600;
  color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, white);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
  border-radius: 10px; padding: 10px 15px; cursor: pointer;
}

@keyframes ckFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Vue Focus+ : carte « + Nouveau KPI » + table de détail ─────────────── */
.ckc--new {
  align-items: center; justify-content: center; gap: 6px;
  background: none; border: 1.5px dashed color-mix(in srgb, var(--color-terracotta) 45%, var(--color-border));
  box-shadow: none;
}
.ckc--new:hover { border-color: var(--color-terracotta); background: color-mix(in srgb, var(--color-terracotta) 6%, transparent); }
.ckc__plus { font-size: 30px; font-weight: 300; color: var(--color-terracotta); line-height: 1; }
.ckc__plus-lbl { font-size: 12.5px; font-weight: 600; color: var(--color-terracotta); }

/* Focus+ : pile verticale — cards en haut, détail pleine largeur en dessous
   (12 mois visibles, contrairement au master-détail 2 colonnes). */
/* Master-détail comme Rentabilité/Liquidité : cartes à gauche (1/3), détail
   dynamique à droite (2/3) = graphique + tableau mensuel. */
.ckfoc-layout { display: grid; grid-template-columns: minmax(210px, 1fr) 2fr; grid-gap: 22px; gap: 22px; align-items: start; }
.ckfoc-detail { min-width: 0; }
/* KPI Focus+ empilés verticalement dans la colonne de gauche. */
.ckfoc-cards .ckpit__cards { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.ckfoc-cards .ckc { flex: 0 0 auto; min-width: 0; width: 100%; }

/* Graphique combiné (barres revenus/charges + courbe marge % cumulée). */
.ckfoc-chart { margin-bottom: 14px; }
.ckfoc-chart__legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 4px; }
.ckfoc-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ckfoc-chart__line-key { width: 14px !important; height: 0 !important; border-radius: 0 !important;
  border-top: 2px solid var(--color-navy); vertical-align: 2px !important; }
.ckfoc-chart__svg { width: 100%; height: auto; display: block; }
.ckfoc-chart__axtxt { font-size: 11px; fill: var(--color-navy); font-weight: 600; }
.ckfoc-chart__mlbl { font-size: 10px; fill: var(--color-text-muted); }

.ckfoc__wrap { overflow-x: auto; }
.ckfoc { width: 100%; border-collapse: collapse; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ckfoc th, .ckfoc td { padding: 7px 8px; font-size: 12.5px; }
.ckfoc thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); text-align: right; }
.ckfoc__lbl { text-align: left; color: var(--color-text); white-space: nowrap; }
.ckfoc__num { text-align: right; color: var(--color-text); white-space: nowrap; }
.ckfoc__num.is-fcast { color: var(--color-text-muted); }
.ckfoc__num.is-neg { color: var(--color-terracotta); }
.ckfoc__tot { font-weight: 600; color: var(--color-navy); background: var(--color-accent-tint); }
.ckfoc__result td { font-weight: 700; border-top: 1px solid var(--color-border); }
.ckfoc__cumrow td { background: var(--color-accent-tint); }
.ckfoc tbody tr:not(.ckfoc__result) td { border-bottom: 1px solid var(--color-border-inner); }

@media (max-width: 900px) {
  .ckpit__body { grid-template-columns: 1fr; }
  .ckfoc-layout { grid-template-columns: 1fr; }
}

/* ── Vue « Financement » (structure de financement + contrôles 725) ────────── */
.ckfin-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-gap: 18px; gap: 18px; align-items: start; }
.ckfin-seclbl { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0 0 10px; }

.ckfin-bar-row { margin-bottom: 12px; }
.ckfin-bar-cap { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); margin-bottom: 5px; }
.ckfin-bar-cap b { color: var(--color-navy); font-weight: 600; }
.ckfin-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; }
.ckfin-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  color: #fff; white-space: nowrap; }
.ckfin-seg--fp { background: var(--color-navy); }
.ckfin-seg--lt { background: var(--color-accent); }
.ckfin-seg--ct { background: var(--color-accent-soft); color: var(--color-navy); }
.ckfin-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 18px; font-size: 12px; color: var(--color-text-muted); }
.ckfin-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.ckfin-kpis { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 11px; gap: 11px; }
.ckfin-kpi { background: var(--color-surface-page); border-radius: 10px; padding: 11px 13px; }
.ckfin-kpi-lbl { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 8px; line-height: 1.35; }
.ckfin-kpi-vals { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ckfin-kpi-real { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 500; color: var(--color-navy); }
.ckfin-kpi-prev { font-size: 12.5px; color: var(--color-text-muted); }
.ckfin-arw { font-weight: 600; }
.ckfin-arw--up { color: var(--color-sage); }
.ckfin-arw--down { color: var(--color-amber); }
.ckfin-arw--flat { color: var(--color-text-muted); }
.ckfin-kpi-sub { font-size: 10.5px; color: var(--color-text-muted); margin-top: 7px; }

.ckfin-feu { display: grid; grid-template-columns: 14px 1fr; grid-gap: 12px; gap: 12px; padding: 15px 2px; border-top: 1px solid var(--color-border-inner); }
.ckfin-feu:first-of-type { border-top: 0; padding-top: 6px; }
.ckfin-dot { width: 13px; height: 13px; border-radius: 50%; margin-top: 5px; }
.ckfin-dot--g { background: var(--color-sage); }
.ckfin-dot--o { background: var(--color-amber); }
.ckfin-dot--r { background: var(--color-terracotta); }
.ckfin-feu-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ckfin-feu-name { font-size: 14.5px; font-weight: 600; color: var(--color-navy); }
.ckfin-feu-art { font-size: 11px; color: var(--color-text-muted); }
.ckfin-feu-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.ckfin-feu-pill--g { background: color-mix(in srgb, var(--color-sage) 15%, transparent); color: var(--color-sage); }
.ckfin-feu-pill--o { background: color-mix(in srgb, var(--color-amber) 16%, transparent); color: var(--color-amber); }
.ckfin-feu-pill--r { background: color-mix(in srgb, var(--color-terracotta) 15%, transparent); color: var(--color-terracotta); }
.ckfin-feu-rule { font-size: 12px; color: var(--color-text-muted); margin: 5px 0 9px; }
.ckfin-feu-rule b { color: var(--color-navy); font-weight: 600; }
.ckfin-feu-cols { display: flex; gap: 26px; }
.ckfin-fc-l { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
.ckfin-fc-v { font-size: 14px; font-weight: 600; color: var(--color-navy); }
.ckfin-fc-m { font-size: 11.5px; margin-top: 1px; }
.ckfin-fc-m--g { color: var(--color-sage); }
.ckfin-fc-m--o { color: var(--color-amber); }
.ckfin-fc-m--r { color: var(--color-terracotta); }
.ckfin-cascade { border-top: 1px solid var(--color-border-inner); margin-top: 6px; padding-top: 12px;
  font-size: 11.5px; color: var(--color-text-muted); line-height: 1.5; }
.ckfin-c--g { color: var(--color-sage); font-weight: 600; }
.ckfin-c--o { color: var(--color-amber); font-weight: 600; }
.ckfin-c--r { color: var(--color-terracotta); font-weight: 600; }
@media (max-width: 900px) { .ckfin-grid { grid-template-columns: 1fr; } }

/* ── CFO — Cockpit, onglet « Journal & décisions » ──────────────────────────
   Le gabarit (PageShell framed + Tabs + Card) porte l'en-tête, les onglets et
   le layout ; on ne style ici que le contenu fonctionnel propre au cockpit.
   Couleurs de statut = tokens charte (--color-terracotta / --color-amber /
   --color-sage). Le reste s'aligne sur les variables --ck-* locales. */
.cfo {
  --ck-navy:    var(--color-navy);
  --ck-missing: var(--color-text-muted);
  --ck-ink:     var(--color-text);
  --ck-muted:   var(--color-text-muted);
  --ck-line:    var(--color-border);
  --ck-edit:    var(--color-field-focus);
  --ck-terra:   var(--color-terracotta);
}

/* ── Champs partagés (composeurs date / bouton Ajouter) ─────────────────────── */
.cfo-journal__date {
  font-family: inherit; font-size: 13px; color: var(--color-field-focus);
  border: none; background: transparent; padding: 4px 2px;
  /* Assez large pour la date ET l'icône du gestionnaire de mots de passe :
     sans marge, l'icône chevauchait les derniers chiffres de l'année. */
  min-width: 152px;
}
.cfo-journal__add {
  border: none; background: var(--ck-navy); color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 600; border-radius: 7px; padding: 6px 16px; cursor: pointer;
}
.cfo-journal__add:disabled { opacity: .4; cursor: default; }
.cfo-journal__empty { font-size: 13px; color: var(--ck-missing); font-style: italic; padding: 8px 0; }
.cfo-journal__foot { margin-top: 12px; text-align: right; }

/* ── Chip de statut (cliquable, cycle) ──────────────────────────────────────── */
.cfo-chip {
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; border-radius: 12px; padding: 2px 10px; white-space: nowrap;
}
.cfo-chip--ouvert   { background: color-mix(in srgb, var(--color-terracotta) 14%, transparent); color: var(--color-terracotta); }
.cfo-chip--en_cours { background: color-mix(in srgb, var(--color-amber) 16%, transparent);      color: var(--color-amber); }
.cfo-chip--fait     { background: color-mix(in srgb, var(--color-sage) 16%, transparent);       color: var(--color-sage); }

/* ── Filtres de statut (en-tête de la vue Décisions) ────────────────────────── */
.cfo-filter { display: flex; gap: 4px; }
.cfo-filter__b {
  border: 1px solid var(--ck-line); background: #fff; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--ck-muted); border-radius: 14px; padding: 3px 12px;
}
.cfo-filter__b.is-active { background: var(--ck-navy); border-color: var(--ck-navy); color: #fff; }

/* ═══ « Journal & décisions » (refonte 2026-07-23) ═══════════════════════════
   Contrôle segmenté + vue Journal (timeline mois→jour) + vue Décisions (registre).
   Typo charte : Fraunces (dates, numéros, libellés de mois), Inter (contenu). */

/* Contrôle segmenté Journal | Décisions */
.cfo-seg {
  display: inline-flex; gap: 2px; margin: 16px 0 24px;
  background: var(--color-surface-rail); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 4px;
}
.cfo-seg__b {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-muted);
  padding: 7px 22px; border-radius: 999px; transition: background .12s, color .12s;
}
.cfo-seg__b.is-active {
  background: color-mix(in srgb, var(--color-accent) 78%, black);
  color: #fff;
}

/* Bouton d'ajout fantôme (＋ Observation / ＋ Décision) */
.cfo-add-b {
  border: 1px dashed var(--color-accent-soft); background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--color-accent);
  padding: 6px 14px; border-radius: 999px; transition: border-color .12s, background .12s;
}
.cfo-add-b:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.cfo-add-b:disabled { opacity: .4; cursor: default; }

/* ── Vue Journal ─────────────────────────────────────────────────────────── */
.cfo-jrnl { display: flex; flex-direction: column; gap: 22px; }
.cfo-jmonth { display: flex; flex-direction: column; }
.cfo-jmonth__label {
  display: flex; align-items: center; gap: 16px;
  font-family: "Fraunces", Georgia, serif; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: 4px;
}
.cfo-jmonth__label::after {
  content: ''; flex: 1 1; height: 0; border-top: 1px solid var(--color-border);
}
.cfo-jday {
  display: grid; grid-template-columns: 118px 1fr; grid-gap: 14px; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--color-border-inner);
}
/* 1re journée d'un mois = celle qui suit le libellé (pas :first-of-type : le
   libellé est un <div> frère, il fausserait le sélecteur). */
.cfo-jmonth__label + .cfo-jday { border-top: none; }
.cfo-jday__d {
  font-family: "Fraunces", Georgia, serif; font-size: 17px; color: var(--color-text);
}
.cfo-jday__w { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.cfo-jday__items { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Observation = puce + texte + aside (badges / → Décision / réordre / suppression) */
.cfo-jbullet { display: grid; grid-template-columns: 14px 1fr auto; grid-gap: 10px; gap: 10px; align-items: start; border-radius: 8px; }
.cfo-jbullet__dot {
  width: 8px; height: 8px; margin-top: 7px; border-radius: 50%;
  border: 1.5px solid var(--color-accent-soft); box-sizing: border-box;
}
.cfo-jbullet__dot.is-linked { background: var(--color-accent); border-color: var(--color-accent); }
.cfo-jbullet__body { min-width: 0; }
.cfo-jbullet__text {
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.45;
  color: var(--color-text); cursor: text; white-space: pre-wrap;
}
.cfo-jbullet__edit {
  width: 100%; border: none; background: none; resize: none; overflow: hidden;
  padding: 0; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px;
  line-height: 1.45; color: var(--color-field-focus); outline: none;
  box-shadow: inset 0 -1px 0 0 var(--color-field-focus);
}
.cfo-jbullet__aside { display: flex; align-items: center; gap: 6px; }
.cfo-dbadge {
  border: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--color-accent);
  color: var(--color-on-tint, var(--color-accent)); background: var(--color-accent-tint-strong);
  border-radius: 6px; padding: 2px 7px;
}
.cfo-dbadge:hover { background: var(--color-accent-soft); }
.cfo-jbullet__mk {
  border: none; background: none; cursor: pointer; font-size: 12px;
  color: var(--color-accent); opacity: 0; transition: opacity .12s; white-space: nowrap;
}
.cfo-jbullet:hover .cfo-jbullet__mk { opacity: 1; }
.cfo-jbullet__del {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s;
}
.cfo-jbullet:hover .cfo-jbullet__del { opacity: 1; }
.cfo-jbullet__del:hover { color: var(--color-terracotta); }

/* Réordonnancement d'une puce (monter / descendre), au survol de la ligne. */
.cfo-jbullet__move {
  display: inline-flex; flex-direction: column; gap: 0; opacity: 0; transition: opacity .12s;
}
.cfo-jbullet:hover .cfo-jbullet__move { opacity: 1; }
.cfo-jbullet__mv {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 8px; line-height: 1; padding: 1px 3px;
}
.cfo-jbullet__mv:hover:not(:disabled) { color: var(--color-accent); }
.cfo-jbullet__mv:disabled { opacity: .25; cursor: default; }

/* Saisie inline d'observation (jour courant) */
.cfo-jadd {
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--color-text-muted); padding: 2px 0;
}
.cfo-jadd:hover { color: var(--color-accent); }
.cfo-jadd__edit {
  width: 100%; border: none; background: none; resize: none; overflow: hidden;
  padding: 2px 0; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px;
  line-height: 1.45; color: var(--color-field-focus); outline: none;
  box-shadow: inset 0 -1px 0 0 var(--color-field-focus);
}

/* Titre de la card Journal : plus fin (allègement demandé). */
.cfo-jrnl-card .std-card__title { font-weight: 500; letter-spacing: .09em; }

/* ── Vue Décisions (registre) ────────────────────────────────────────────── */
.cfo-dreg { display: flex; flex-direction: column; }
.cfo-drow {
  display: grid; grid-template-columns: 44px 88px 128px 1fr auto; grid-gap: 12px; gap: 12px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--color-border-inner);
}
.cfo-drow:first-of-type { border-top: none; }
.cfo-drow__num {
  font-family: "Fraunces", Georgia, serif; font-size: 15px; color: var(--color-text-muted); padding-top: 2px;
}
.cfo-drow--fait { opacity: .55; }
.cfo-drow--fait .cfo-drow__text { text-decoration: line-through; }
.cfo-drow__main { min-width: 0; }
.cfo-drow__text {
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 80%, var(--color-canvas)); cursor: text; white-space: pre-wrap;
}
.cfo-drow__edit {
  width: 100%; border: none; background: none; resize: none; overflow: hidden;
  padding: 0; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px;
  line-height: 1.45; color: var(--color-field-focus); outline: none;
  box-shadow: inset 0 -1px 0 0 var(--color-field-focus);
}
.cfo-drow__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px; align-items: center; }
.cfo-drow__ech {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--color-text-muted); padding: 0;
}
.cfo-drow__ech:hover { color: var(--color-accent); }
.cfo-drow__ech.is-overdue { color: var(--color-terracotta); font-weight: 600; }
.cfo-obslink {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--color-accent); padding: 0;
}
.cfo-obslink:hover { text-decoration: underline; }
.cfo-drow__del {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s; align-self: start;
}
.cfo-drow:hover .cfo-drow__del { opacity: 1; }
.cfo-drow__del:hover { color: var(--color-terracotta); }

/* Champ responsable inline (texte libre ; vide = pastille pointillée) */
.cfo-resp {
  width: 100%; border: 1px solid transparent; background: var(--color-accent-tint); border-radius: 12px;
  font-family: inherit; font-size: 12.5px; color: var(--color-text); padding: 3px 10px; outline: none;
}
.cfo-resp:focus { border-color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); color: var(--color-field-focus); }
.cfo-resp.is-empty {
  background: none; border: 1px dashed var(--color-border); color: var(--color-text-muted);
}
.cfo-resp::placeholder { color: var(--color-text-muted); }

/* Formulaire d'ajout de décision (déplié) */
.cfo-dform { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }
.cfo-dform__texte {
  width: 100%; border: none; border-radius: 10px; background: var(--color-surface-card);
  box-shadow: inset 0 0 0 1px var(--color-border); resize: vertical; font-family: inherit;
  font-size: 13.5px; color: var(--color-text); line-height: 1.5; outline: none; padding: 8px 10px;
}
.cfo-dform__row { display: flex; align-items: center; gap: 8px; }
.cfo-dform__row .cfo-resp { width: auto; flex: 1 1 auto; }
.cfo-dform__cancel {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Surlignage éphémère de navigation croisée */
@keyframes cfoFlash {
  0% { background: var(--color-accent-tint-strong); }
  100% { background: transparent; }
}
.is-flash { animation: cfoFlash 1.2s ease-out; }

/* Panneau « Modifier le cockpit » : choix des onglets visibles (self-service). */
.ckpit-config {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 12px 14px;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 12px;
}
.ckpit-config__lbl {
  font-family: "Fraunces", Georgia, serif; font-size: 12px; font-weight: 500;
  letter-spacing: .06em; color: var(--color-text-muted); text-transform: uppercase;
}
.ckpit-config__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ckpit-config__item {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 12px;
  transition: color .12s, border-color .12s, background .12s;
}
.ckpit-config__item.is-on { color: var(--color-accent); border-color: var(--color-accent-soft); background: var(--color-accent-tint); }
.ckpit-config__item input { accent-color: var(--color-accent); }

/* Cost Pools page — TDABC */

/* ── En-tête aéré, aligné sur les pages Costing — titre + sous-titre ──────── */
.cp-layout { padding-top: 52px; }

/* Embarqué dans le hub Input Analytics : aligné à gauche pleine largeur, comme
   People assignment / Standard price — pas de cap ni de centrage. */
.page-table-layout.cp-layout--embedded { max-width: 100%; margin: 0; padding: 0; }
/* Dans le hub Paramétrage : card pleine largeur (alignée sur les autres). */
.page-table-layout.cp-layout--embedded .page-table-wrap { width: 100%; }
.page-table-layout.cp-layout--embedded .page-table { width: 100%; }
.cp-layout .page-table-header {
  align-items: flex-end;
  margin-bottom: 14px;
}
.cp-header-left {
  display: flex;
  flex-direction: column;
}
.cp-layout .page-table-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--color-text);
}
.cp-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  max-width: 720px;
  line-height: 1.55;
}

/* Card container — same look as the Capacity / Production costing tables
   (rounded 16px, soft shadow, warm border, contained white surface). */
.cp-layout .page-table-wrap {
  width: fit-content;          /* la card épouse la table → bande pleine largeur, pas de blanc à droite */
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, 0.05);
  overflow: hidden;
}

.cp-layout .page-table {
  border-radius: 16px;
  overflow: hidden;
}

.cp-layout .page-table tbody td,
.cp-layout .page-table tbody tr {
  background: #fff;
}

/* Comfortable rows + subtle separators, last row flush to the card edge. */
.cp-layout .page-table tbody td {
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid #F3F4F6;
}
.cp-layout .page-table tbody tr { line-height: 1.3; }
.cp-layout .page-table tbody tr:hover td { background: #FAFAF9; }
.cp-layout .page-table tbody tr:last-child td { border-bottom: none; }

/* Header sits inside the card top — warm tint, no harsh divider. */
.cp-layout .page-table thead tr { background: var(--color-surface-card); }
.cp-layout .page-table thead th { border-bottom: 1px solid var(--color-border); }

/* Pied de tableau : ajouter un groupe (pattern « ajouter une ligne »). */
.cp-add-row td { border-top: 1px solid var(--color-border); padding: 0; }
.cp-add-row-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
}
.cp-add-row-btn:hover { background: var(--color-surface-page); }
.cp-driver-fixed { color: var(--color-navy); }

.cp-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: #FAFAF9;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius);
}

.cp-add-name,
.cp-add-description {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  outline: none;
}
.cp-add-name { flex: 1 1 220px; min-width: 200px; }
.cp-add-description { flex: 2 1 280px; min-width: 200px; }
.cp-add-name:focus,
.cp-add-description:focus { border-color: var(--color-primary); }

.cp-add-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.cp-lock-cell {
  text-align: center;
  width: 30px;
}
.cp-lock {
  display: inline-block;
  font-size: 13px;
  opacity: 0.65;
  cursor: help;
}

.cp-type-toggle {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-muted);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: 0.2px;
}
.cp-type-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cp-type-toggle--overhead {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  font-weight: 600;
}

.cp-protected-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Pools protégés (Direction, Administration) : fond grisé = figés, en tête de table. */
.cp-row--protected td {
  background: #F5F5F4;
}

/* ── Allocation Driver column ──────────────────────────────────────────────── */

.cp-driver-cell {
  white-space: nowrap;
}

.cp-driver-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #3D5A80;
  background: #EEF3FA;
  border: 1px solid #C3D4E8;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 200px;
}
.cp-driver-select:focus { outline: none; border-color: #3D5A80; }

.cp-driver-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.cp-driver-na {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.cp-driver-note {
  display: block;
  font-size: 11px;
  color: var(--color-primary);
  margin-top: 2px;
  font-style: italic;
}

/* Charte : une valeur À SAISIR s'écrit en bleu, SANS cadre (le soulignement
   n'apparaît qu'au focus). Le nom du groupe et son type se modifient : ils
   portent donc le bleu, là où l'inducteur et le cadenas restent du texte. */
.cp-layout .page-table tbody .p-cell-text { color: var(--color-field-focus); }
.cp-layout .page-table tbody .p-cell-text:hover {
  background: var(--color-accent-tint);
  color: var(--color-field-focus);
}
.cp-type-toggle { color: var(--color-field-focus); border-color: var(--color-border); }
.cp-type-toggle:hover { border-color: var(--color-field-focus); color: var(--color-field-focus); }
.cp-type-toggle--overhead {
  background: color-mix(in srgb, var(--color-field-focus) 10%, transparent);
  color: var(--color-field-focus);
  border-color: color-mix(in srgb, var(--color-field-focus) 30%, transparent);
}

/* Largeur capée (4 colonnes) + centrée → marges équilibrées, plus d'air en haut. */
.pp-layout { max-width: 1040px; padding-top: 52px; }

/* Embarqué dans le hub Input Analytics : aligné à gauche pleine largeur, comme
   les pages People standard (ex. Détail des coûts) — pas de cap ni de centrage,
   le hub gère déjà le titre et les marges horizontales. */
.pp-layout--embedded {
  max-width: 100%;
  padding: 0;
}
/* Dans le hub Paramétrage : card pleine largeur (alignée sur Groupes ressources). */
.pp-layout--embedded .pp-card { width: 100%; }

/* ── En-tête aéré, aligné sur les pages Costing (hr-page) — titre + sous-titre ── */
.pp-layout .page-table-header {
  align-items: flex-end;
  margin-bottom: 14px;
}
.pp-header-left {
  display: flex;
  flex-direction: column;
}
.pp-layout .page-table-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--color-text);
}
.pp-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  max-width: 720px;
  line-height: 1.55;
}

/* ── Sticky first two columns (Name + Cost pool) ───────────────────────────── */
.pp-th-sticky,
.pp-td-sticky {
  position: sticky;
  z-index: 2;
  /* background is inherited from the row — overridden per variant below */
}

/* Col 1 — Name */
.pp-th-sticky-1,
.pp-td-sticky-1 {
  left: 0;
  min-width: 160px;
}

/* Col 2 — Cost pool : left offset = min-width of col 1 */
.pp-th-sticky-2,
.pp-td-sticky-2 {
  left: 160px;
  min-width: 148px;
  /* thin shadow to signal the freeze boundary */
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
}

/* Solid backgrounds so scrolled content doesn't bleed through */
thead .pp-th-sticky    { background: var(--color-surface-card); z-index: 3; }
.pp-bulk-row .pp-th-sticky { background: #F4F4F0; z-index: 3; }
tbody tr .pp-td-sticky { background: #fff; }
tbody tr:hover .pp-td-sticky { background: #F9FAFB; }
tbody .pp-row--unassigned .pp-td-sticky { background: #FEF2F2; }
tbody .pp-row--unassigned:hover .pp-td-sticky { background: #FEE2E2; }
tfoot .pp-td-sticky    { background: #F4F4F0; }

/* ── Cost pool filter bar ──────────────────────────────────────────────────── */
.pp-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #FAFAF9;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.pp-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.pp-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Base tag */
.pp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}
.pp-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Active tag */
.pp-tag--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.pp-tag--active:hover {
  background: #433aab;
  border-color: #433aab;
  color: #fff;
}

/* Overhead pool variant */
.pp-tag--overhead {
  border-style: dashed;
}
.pp-tag--overhead.pp-tag--active {
  border-style: solid;
}

/* Count badge inside tag */
.pp-tag-count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
}
.pp-tag--active .pp-tag-count {
  background: rgba(255,255,255,0.25);
  opacity: 1;
}

/* Clear button */
.pp-filter-clear {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s;
  margin-left: 2px;
}
.pp-filter-clear:hover { background: #F0F0EC; color: var(--color-text); }

/* ── Assign (brush) mode ─────────────────────────────────────────────────── */
.pp-filter-bar--brush {
  background: #FFF7ED;          /* léger orangé pour signaler le mode */
  border-color: var(--color-primary);
}

/* Pill armé (brush actif sur ce pool) — terracotta plein, légèrement plus
   marqué que le filtre actif pour distinguer les 2 modes visuellement. */
.pp-tag--brush {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(194, 84, 60, 0.18);
}
.pp-tag--brush .pp-tag-count {
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
}

/* Toggle Assign mode (à droite des pills) */
.pp-mode-toggle {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pp-mode-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pp-mode-toggle.is-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Card unifiée (gabarit) : toolbar + table dans une seule card ───────────
   Remplace l'ancienne pile « filter-bar + page-table-wrap » (2 boîtes).      */
.pp-card {
  width: fit-content;          /* la card épouse son contenu → bande pleine largeur, pas de blanc à droite */
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, 0.05);
  overflow: hidden;
  margin-bottom: 12px;
}
/* La table remplit la largeur de la card (pilotée par la toolbar/contenu le plus large). */
.pp-card .pp-table { width: 100%; }
.pp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.pp-toolbar--brush { background: #FFF7ED; }   /* signale le mode Assign */
.pp-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.pp-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.pp-toolbar__right .pp-mode-toggle { margin-left: 0; }
/* Scroll horizontal interne à la card (la card garde ses coins arrondis). */
.pp-table-scroll { overflow-x: auto; }
/* Hint + add-form rentrent dans la card, alignés sur le padding toolbar. */
.pp-card > .pp-brush-hint,
.pp-card > .pp-add-form {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 10px 16px;
}

/* Hint sous la barre quand brush mode actif */
.pp-brush-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  background: #FFF7ED;
  border: 0.5px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin: 6px 0 8px;
}
.pp-brush-hint strong { color: var(--color-primary); }

/* Rangées : quand le brush est armé, cursor pinceau + hover marqué. */
.pp-table--brush-armed tbody tr.pp-row--brushable { cursor: crosshair; }
.pp-table--brush-armed tbody tr.pp-row--brushable:hover { background: #FFF1E8; }
.pp-table--brush-armed tbody tr.pp-row--brushable:hover .pp-td-sticky { background: #FFF1E8; }

.pp-scenario-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.pp-scenario-selector select {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

.pp-warning {
  padding: 10px 16px;
  background: #FEF3C7;
  border: 0.5px solid #FBBF24;
  color: #78350F;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.pp-warning em { font-style: italic; }

.pp-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: #FAFAF9;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius);
}
.pp-add-form input {
  flex: 1 1 280px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  outline: none;
}
.pp-add-form input:focus { border-color: var(--color-primary); }
.pp-add-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.pp-table th,
.pp-table td {
  white-space: nowrap;
}
.pp-table td { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Compact rows — aligned on the Capacity / Production costing table look
   (dense, ~32px rows, subtle separators). */
.pp-table tbody td {
  padding-top: 6px;
  padding-bottom: 6px;
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
}
.pp-table tbody tr { line-height: 1.3; }

/* Padding horizontal cohérent avec le format standard (LPP / costing) —
   décolle surtout le nom (1re colonne) du bord de la card. */
.pp-table th,
.pp-table td { padding-left: 14px; padding-right: 14px; }
.pp-table th:first-child,
.pp-table td:first-child { padding-left: 16px; }
/* Selects Cost pool compacts → rangées moins hautes. */
.pp-table td select {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 13px;
}
.pp-table tbody tr:hover td { background: #F9FAFB; }

/* Plain dark text (no link-blue) to match the costing tables. Editable cells
   get a faint neutral hover to still signal they're clickable. */
.pp-table tbody .p-cell-text {
  color: var(--color-text);
  font-weight: 400;
}
.pp-table tbody .pp-td-sticky-1 .p-cell-text { font-weight: 600; }
.pp-table tbody .p-cell-text:hover { background: #F3F4F6; }
.pp-table tbody .pp-pct { color: var(--color-text); font-weight: 400; }

/* Foot rows: TOTAL + AVG, matching the app's existing total-row convention
   (gray background, bold dark text — same as legacy "SOUS-TOTAL COTISATIONS"). */
.pp-foot-row td {
  padding: 12px 14px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  background: #FAFAF9;
}
.pp-foot-total td {
  font-weight: 700;
  color: var(--color-text);
  border-top: 1.5px solid var(--color-border);
}
.pp-foot-avg td {
  color: var(--color-text-muted);
  border-top: 0.5px solid var(--color-border);
}
.pp-foot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
/* Empty spacer row — pushes the horizontal scrollbar a bit away from the AVG
   row so it doesn't read as part of the data. */
.pp-foot-spacer td {
  height: 24px;
  background: var(--color-bg);
  border: none !important;
  padding: 0 !important;
}

/* Wrap: horizontal scroll inside, vertical scrolls the page (table grows tall).
   Sticky header + sticky first column make navigation comfortable. */
.pp-layout .page-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  margin-bottom: 12px;
  padding-bottom: 0;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, 0.05);
  background: #fff;
}

/* Sticky header — the second thead row is the column-name row (the bulk-apply
   row sits above it and scrolls away naturally). */
/* En-tête crème chaud (comme la card Capacity cost rate) */
.pp-table thead tr { background: var(--color-surface-card); }
.pp-table thead tr:nth-child(2) th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg);
}

/* Sticky first column (Name) for body, tfoot, and the first header cell */
.pp-table thead tr:nth-child(2) th:first-child {
  left: 0;
  z-index: 3;  /* corner: sticky on both axes */
}
.pp-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}
.pp-table tbody tr:hover td:first-child { background: #F9FAFB; }
.pp-table tbody tr.pp-row--unassigned td:first-child { background: #FEF2F2; }
.pp-table tbody tr.pp-row--unassigned:hover td:first-child { background: #FEE2E2; }

.pp-table tfoot tr:not(.pp-foot-spacer) td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #F4F4F0;
}

/* Subtle drop shadow on sticky elements to mark the boundary when scrolled. */
.pp-table thead tr:nth-child(2) th { box-shadow: 0 0.5px 0 0 var(--color-border); }
.pp-table tbody td:first-child,
.pp-table tfoot tr:not(.pp-foot-spacer) td:first-child {
  box-shadow: 0.5px 0 0 0 var(--color-border);
}

.pp-th-computed { color: var(--color-text-muted) !important; }

/* Sortable column headers */
.pp-th-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.pp-th-sortable:hover { color: var(--color-text); background: #F4F4F0; }
.pp-th-sortable--active { color: var(--color-primary) !important; }
.pp-td-computed { color: var(--color-text-muted); }

.pp-pct { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.pp-pct-input { text-align: right; width: 60px; }
.pp-date-input { width: 130px; font-size: 12px; }

/* Cellule éditable (charte) : texte bleu, SANS cadre ; soulignement discret. */
.pp-pool-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-field-focus);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 4px 2px;
  outline: none;
  cursor: pointer;
  max-width: 220px;
}
.pp-pool-select:hover { border-bottom-color: color-mix(in srgb, var(--color-field-focus) 40%, transparent); }
.pp-pool-select:focus { border-bottom-color: var(--color-field-focus); }
.pp-pool-select--empty {
  color: var(--color-text-muted);
  font-weight: 500;
}

.pp-row--unassigned td { background: #FEF2F2; }
.pp-row--unassigned:hover td { background: #FEE2E2 !important; }

.pp-disclaimer {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 12px 0 0;
  margin: 0;
  border-top: 0.5px solid var(--color-border);
}

/* Bulk apply row in thead */
.pp-bulk-row th {
  background: #F4F4F0;
  border-bottom: 0.5px solid var(--color-border);
  padding: 6px 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.pp-bulk-label-cell { text-align: right !important; }
.pp-bulk-label {
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.pp-bulk-cell {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  justify-content: flex-end;
}
.pp-bulk-input {
  font-family: inherit;
  font-size: 12px;
  width: 56px;
  text-align: right;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 3px 6px;
  background: var(--color-bg);
  outline: none;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.pp-bulk-input:focus { border-color: var(--color-primary); }
.pp-bulk-input:disabled { background: #F4F4F0; cursor: not-allowed; }
.pp-bulk-btn {
  font-family: inherit;
  font-size: 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0 8px;
  cursor: pointer;
  line-height: 1;
}
.pp-bulk-btn:hover:not(:disabled) { background: #433aab; }
.pp-bulk-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Cost Assignment Page — Phase 13 ─────────────────────────────────────── */

.ca-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 52px;
}

/* Version autonome (hors hub) : on retire le padding horizontal de
   page-table-layout pour s'aligner sur hr-page (LCR/BCR), qui ne s'appuie
   que sur les 28px du .logike-page-wrap. */
.ca-layout--standalone { padding-left: 0; padding-right: 0; }

/* Embarqué dans le hub Input Analytics : aligné à gauche pleine largeur, comme
   People assignment / Standard price — pas de padding horizontal ni de retrait
   en haut (le hub porte le titre et les marges via .logike-page-wrap). */
.page-table-layout.ca-layout--embedded { padding: 0 0 60px; }

/* Espace sous les tableaux scrollables (Affectation personnel / frais) pour que
   la barre de défilement horizontale ne recouvre pas la dernière ligne. */
.ca-layout .prof-table-wrap {
  padding-bottom: 16px;
}

/* Affectation personnel / frais : colonnes resserrées et table packée à gauche
   (pas d'étirement à 100 %) pour afficher au moins 8 groupes ressources sans
   défilement. La colonne des libellés reste figée (sticky) à gauche. */
/* La card épouse la largeur de sa table (pas de grand vide blanc à droite) ;
   plafonnée à 100 % → défilement interne quand il y a beaucoup de groupes. */
.ca-layout .prof-section { width: fit-content; max-width: 100%; }
/* 2e tableau dans la même card (temps puis coûts) : filet de séparation. */
.ca-layout .ca-table-gap { border-top: 1px solid var(--color-border); }
.ca-layout .prof-output-table { width: auto; }
.ca-layout .prof-col-metric { width: 260px; }
.ca-layout .prof-col-total  { width: 100px; }
.ca-layout .prof-col-pool   { width: 100px; }
.ca-layout .prof-th-metric  { min-width: 260px; }
.ca-layout .prof-th-pool    { min-width: 0; white-space: normal; }
.ca-layout .prof-table th,
.ca-layout .prof-table td   { padding-left: 10px; padding-right: 10px; }

/* Règle d'allocation des temps indirects — texte seul, aéré (pas de card). */
.ca-rule-card {
  padding: 8px 6px 16px;
}
.ca-rule-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ca-rule-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}
.ca-rule-list b,
.ca-rule-inline b { color: var(--color-navy); }
.ca-rule-inline { font-size: 13px; color: var(--color-text); }

/* ── Reconciliation badge ──────────────────────────────────────────────────── */

.ca-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ca-badge--ok {
  background: #DCFCE7;
  color: #166534;
  border: 0.5px solid #86EFAC;
}

.ca-badge--off {
  background: #FEE2E2;
  color: #991B1B;
  border: 0.5px solid #FCA5A5;
}

.ca-saving {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ── En-tête aligné sur hr-page (Production costing) — titre + sous-titre ──── */
.ca-layout .page-table-header {
  align-items: flex-end;
  margin-bottom: 10px;        /* + gap 14px du layout ≈ 24px sous l'en-tête */
}
.ca-header-left {
  display: flex;
  flex-direction: column;
}
.ca-layout .page-table-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--color-text);
}
.ca-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  max-width: 720px;
  line-height: 1.55;
}

/* ── Drivers grid ─────────────────────────────────────────────────────────── */

.ca-drivers-grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  grid-gap: 4px 12px;
  gap: 4px 12px;
  max-width: 720px;
  padding: 0 2px;
}

.ca-driver-pool-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.ca-driver-residual {
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: 400;
}

.ca-driver-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Minimal blue select */
.ca-driver-wrap {
  display: inline-flex;
  align-items: center;
}

.ca-driver-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #185FA5;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%23185FA5%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 18px;
}

.ca-driver-select:hover {
  background-color: rgba(24, 95, 165, 0.08);
}

.ca-driver-status {
  font-size: 11px;
  min-width: 60px;
}

.ca-driver-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.ca-driver-amount-lbl {
  font-style: italic;
  color: var(--color-text-muted);
}

.ca-driver-status--ok {
  color: #16a34a;
  font-style: italic;
}

.ca-driver-status--warn {
  color: #b45309;
  font-style: italic;
}

/* ── Totals line ──────────────────────────────────────────────────────────── */

.ca-totals-line {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

.ca-totals-line strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ── Breakdown table ──────────────────────────────────────────────────────── */

.ca-table-wrap {
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.ca-table {
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: nowrap;
}

.ca-table thead th {
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  padding: 5px 8px;
  text-align: center;
  font-weight: 600;
  color: #374151;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Sticky pool column */
.ca-th-sticky,
.ca-td-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}

.ca-th-sticky {
  background: #F9FAFB !important;
  text-align: left;
  min-width: 140px;
  max-width: 180px;
  border-right: 1px solid #E5E7EB;
}

.ca-table tbody tr .ca-td-sticky {
  background: #fff;
}

.ca-table tbody .ca-tr-overhead .ca-td-sticky {
  background: #F3F4F6 !important;
}

.ca-table tbody .ca-tr-gt .ca-td-sticky {
  background: #F0F4F8 !important;
}

/* Group headers */
.ca-th-group {
  text-align: center;
  border-left: 1px solid #E5E7EB;
}

.ca-th-group-pers {
  background: #FAFAF8 !important;
  color: #374151;
}

.ca-th-group-oh {
  background: var(--color-surface-card) !important;
  color: var(--color-navy);
  border-left: 2px solid var(--color-border);
  border-right: 2px solid var(--color-border);
}

.ca-th-group-ind {
  background: #F0FDF4 !important;
  color: #166534;
  border-left: 1px solid #BBF7D0;
}

.ca-th-pool {
  min-width: 150px;
}

.ca-th-sub {
  font-weight: 500;
  color: #6B7280;
  min-width: 90px;
}

.ca-th-dl {
  border-right: 2px solid #E5E7EB;
}

.ca-th-oh {
  background: #EDF3FC !important;
  color: var(--color-navy);
  min-width: 120px;
}

.ca-th-oh-manual {
  background: #E8F0FF !important;
}

.ca-oh-ok { color: #16a34a; font-weight: normal; }
.ca-oh-warn { color: #b45309; font-weight: normal; }

.ca-th-sep {
  background: #F8F9FA !important;
  min-width: 100px;
  border-left: 2px solid #E5E7EB;
  border-right: 2px solid #E5E7EB;
  font-weight: 700;
  color: #374151;
}

.ca-th-specific {
  background: #F0FDF4 !important;
  color: #166534;
}

.ca-th-residual {
  background: #F0FDF4 !important;
  color: #166534;
}

.ca-th-total {
  background: #F0F4F8 !important;
  color: var(--color-navy);
  font-weight: 700;
  min-width: 100px;
  border-left: 2px solid var(--color-border);
}

/* ── Data cells ──────────────────────────────────────────────────────────── */

.ca-table tbody tr {
  height: 32px;
  box-sizing: border-box;
}

.ca-table tbody tr:hover td:not(.ca-td-sticky) {
  background: #F9FAFB;
}

.ca-table tbody tr:hover .ca-td-sticky {
  background: #F9FAFB !important;
}

.ca-td-pool {
  padding: 4px 8px;
  font-weight: 500;
  border-right: 1px solid #E5E7EB;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ca-td-oh-name {
  color: #6B7280;
}

.ca-td-num {
  text-align: right;
  padding: 4px 8px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ca-td-dl {
  border-right: 2px solid #E5E7EB;
  font-weight: 500;
}

.ca-td-sep {
  border-left: 2px solid #E5E7EB;
  border-right: 2px solid #E5E7EB;
  font-weight: 600;
  background: #F8F9FA;
}

.ca-td-specific {
  background: #F7FFF9;
}

.ca-td-total {
  border-left: 2px solid var(--color-border);
  font-weight: 700;
  background: #F0F4F8;
}

.ca-td-oh-emit {
  background: #FFF8F6;
}

.ca-td-oh-total {
  background: #F3F4F6;
}

.ca-td-dash {
  text-align: center;
  color: #D1D5DB;
  padding: 4px 8px;
}

.ca-td-small {
  font-size: 11px;
  color: #9CA3AF;
}

.ca-td-auto-pct {
  color: #9CA3AF;
}

.ca-td-manual {
  background: #F0F5FF;
}

/* Overhead pool rows */
.ca-tr-overhead td {
  background: #F3F4F6;
  color: #6B7280;
  font-style: italic;
}

/* Grand total row */
.ca-tr-gt td {
  background: #E8EEF7;
  font-weight: 700;
  border-top: 2px solid var(--color-accent-soft);
}

.ca-td-gt {
  background: #E8EEF7 !important;
}

.ca-td-gt-label {
  padding: 4px 8px;
  font-weight: 700;
  border-right: 1px solid #E5E7EB;
  letter-spacing: 0.3px;
  font-size: 11px;
  text-transform: uppercase;
}

/* Signed value colors */
.ca-neg { color: #A32D2D; }
.ca-pos { color: #3B6D11; }
.ca-zero { color: #D1D5DB; }

/* ── Output summary columns (Practical Capacity + CCR) ──────────────────────── */

.ca-th-group-ccr {
  background: #FFF8EE !important;
  color: #92400E;
  border-left: 2px solid #FCD34D;
}

.ca-th-ccr-h,
.ca-th-ccr-rate {
  background: #FFFBF0 !important;
  color: #92400E;
  min-width: 90px;
}

.ca-th-ccr-h {
  border-left: 2px solid #FCD34D;
}

.ca-td-ccr-summary {
  background: #FFFBF0;
  border-left: 2px solid #FCD34D;
}

.ca-td-ccr-summary + .ca-td-ccr-summary {
  border-left: none;
}

.ca-td-ccr-value strong {
  color: #A32D2D;
  font-weight: 700;
}

.ca-td-dash-inline {
  color: #D1D5DB;
  font-style: italic;
}

/* Grand total row: summary columns keep the blue GT background but keep border */
.ca-tr-gt .ca-td-ccr-summary {
  background: #E8EEF7 !important;
  border-left: 2px solid #FCD34D;
}

.ca-tr-gt .ca-td-ccr-summary + .ca-td-ccr-summary {
  border-left: none;
}

/* Overhead rows: summary dash columns */
.ca-tr-overhead .ca-td-ccr-summary {
  background: #F3F4F6 !important;
}

/* ── Inline editable spans ────────────────────────────────────────────────── */

.ca-editable {
  display: inline-block;
  cursor: pointer;
  color: #185FA5;
  border-radius: 3px;
  padding: 1px 3px;
  min-width: 30px;
  text-align: right;
  outline: none;
  transition: background 0.1s;
}

.ca-editable:hover {
  background: rgba(24, 95, 165, 0.08);
}

.ca-editable:focus {
  background: rgba(24, 95, 165, 0.12);
  box-shadow: 0 0 0 2px rgba(24, 95, 165, 0.2);
}

.ca-editable--pct {
  font-weight: 500;
  min-width: 42px;
}

.ca-editable--amount {
  min-width: 60px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.ca-recon-footer {
  font-size: 12px;
  color: #6B7280;
  font-style: italic;
  text-align: right;
  margin: 0;
}

.ca-recon-footer--off {
  color: #991B1B;
}

.ca-legend {
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.6;
  margin: 0;
  border-top: 1px solid #E5E7EB;
  padding-top: 8px;
}

/* ── Personnel costs (mirror of Standard Capacity people list) ───────────── */

.ca-people-section {
  margin-top: 24px;
}

.ca-people-title {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}

.ca-people-sub {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
}

.ca-people-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #F3F4F6;
  background: #fff;
}

.ca-people-table tbody tr:hover td {
  background: #F9FAFB;
}

.ca-people-table .ca-td-num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Personnel cost cascade (MOCK Phase A) ────────────────────────────────── */
.ca-cascade-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 22px;
}
.ca-cascade-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.ca-cascade-head-left { min-width: 0; }
.ca-cascade-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.2;
}
.ca-cascade-sub {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ── Allocation toggle row (inline dans thead, sous chaque /h) ──────────── */
.ca-alloc-row > th {
  background: var(--color-accent-tint);
  border-top: 1px solid #DBE8FA;
  padding: 6px 8px;
}
.ca-alloc-row-empty { background: transparent !important; border: none !important; }
.ca-alloc-row-cell { text-align: center; }

.ca-alloc-toggle {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid #3D6FB4;
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ca-alloc-toggle:hover {
  background: #DBE8FA;
}
.ca-alloc-toggle--within {
  background: #DBE8FA;
  color: var(--color-navy);
  border-color: #3D6FB4;
}
.ca-alloc-toggle--shared {
  background: #fff;
  color: var(--color-navy);
  border-color: #3D6FB4;
}
.ca-alloc-toggle--billed {
  background: #E8E2F4;
  color: #4C2E80;
  border-color: #7C5BCB;
}
.ca-alloc-toggle--billed:hover {
  background: #DCD4ED;
}
.ca-alloc-toggle-swap {
  font-size: 9px;
  opacity: 0.6;
}
.ca-cascade-mock {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #D38A2A;
  background: #F7EAD3;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* ── Cost driver picker (cartouche grisée avec 3 lignes de toggles) ─────── */
.ca-cascade-drivers {
  background: #F4F1EA;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  gap: 24px;
}
.ca-cascade-drivers-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 6px;
  flex: none;
  min-width: 90px;
}
.ca-cascade-drivers-rows {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
.ca-cascade-driver-row {
  display: grid;
  grid-template-columns: 130px auto 1fr;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  padding: 8px 0;
  border-top: 0.5px solid #E2D6C2;
}
.ca-cascade-driver-row:first-child { border-top: none; }
.ca-cascade-driver-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.ca-cascade-toggle {
  display: inline-flex;
  gap: 4px;
}
.ca-cascade-toggle-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ca-cascade-toggle-btn:hover {
  border-color: #3D6FB4;
  color: #3D6FB4;
}
.ca-cascade-toggle-btn.is-on {
  background: #DBE8FA;
  border-color: #3D6FB4;
  color: var(--color-navy);
  font-weight: 600;
}
.ca-cascade-driver-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: right;
}

/* ── Cascade table ──────────────────────────────────────────────────────── */
.ca-cascade-table thead .ca-cascade-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 8px 10px;
}
.ca-cascade-table thead .ca-cascade-group--cost {
  background: #FAF1E0;
  color: #B25F00;
}
.ca-cascade-table thead .ca-cascade-group--rate {
  background: #E8F0FA;
  color: var(--color-navy);
}
.ca-cascade-table thead .ca-th-rate {
  background: var(--color-accent-tint);
  color: var(--color-navy);
}
.ca-cascade-table .ca-td-rate {
  color: var(--color-navy);
}
.ca-cascade-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #F1EDE3;
}
.ca-cascade-table tfoot .ca-tr-gt td {
  font-weight: 600;
  border-top: 1px solid var(--color-border);
  background: #FFFFFF;
  padding: 10px 12px;
}
.ca-cascade-foot {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 12px 0 0;
  line-height: 1.5;
}

/* ── Year picker (header Cost Assignment) ────────────────────────────────── */
.ca-year-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.ca-year-picker > span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}
.ca-year-picker select {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  outline: none;
  cursor: pointer;
}
.ca-year-picker select:focus { border-color: var(--color-primary); }

/* ── Personnel cost cascade — pivot (composants en lignes, pools en cols) ──── */
.ca-cascade-pivot { width: 100%; }

.ca-cpv-th-label {
  text-align: left;
  padding: 10px 12px;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  min-width: 240px;
}
.ca-cpv-th-pool {
  text-align: right;
  padding: 10px 12px;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.ca-cpv-th-unassigned { color: var(--color-text-muted); font-style: italic; }
.ca-cpv-th-total {
  text-align: right;
  padding: 10px 12px;
  background: #F1ECDE;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.ca-cpv-th-perh {
  text-align: right;
  padding: 10px 12px;
  background: #E8F0FA;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
}

.ca-cascade-pivot tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #F1EDE3;
}
.ca-cascade-pivot .ca-cpv-label {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* libellé à gauche, toggle à droite */
  gap: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.ca-cascade-pivot .ca-cpv-label-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}
.ca-cascade-pivot .ca-cpv-label small {
  font-weight: 400;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: 4px;
}
.ca-cpv-lock {
  color: #5C8A4E;
  font-size: 10px;
  flex: none;
}

.ca-cpv-total { background: #FFFFFF; font-weight: 600; }
.ca-cpv-perh  { background: var(--color-accent-tint); color: var(--color-navy); font-weight: 600; }

/* Section header (Personnel / Externes) */
.ca-cascade-pivot tr.ca-cpv-section td {
  background: #ECE1CF;
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Sous-totaux par section */
.ca-cascade-pivot tr.ca-cpv-subtotal td {
  background: #FFFFFF;
  font-weight: 600;
  border-top: 1px solid #DDD5C5;
  border-bottom: 1px solid var(--color-border);
}

/* Footer rows (Total / TR / Quote-part) */
.ca-cascade-pivot tr.ca-cpv-total-row td {
  background: #F1ECDE;
  font-weight: 700;
  border-top: 2px solid var(--color-border);
}
.ca-cascade-pivot tr.ca-cpv-hours-row td {
  background: #FFFFFF;
  font-size: 12px;
  color: var(--color-text-muted);
}
.ca-cascade-pivot tr.ca-cpv-qph-row td {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  border-top: 1px solid var(--color-primary);
}
.ca-cascade-pivot tr.ca-cpv-qph-row .ca-cpv-total { background: #A13D2A; }
.ca-cascade-pivot tr.ca-cpv-qph-row .ca-cpv-perh  { background: #A13D2A; color: #fff; }

/* Toggle locked (Indirect) */
.ca-alloc-toggle--locked {
  cursor: not-allowed;
  opacity: 0.7;
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  background: var(--color-bg);
}
.ca-alloc-toggle--locked:hover { background: var(--color-bg); }

/* ── Cascade : retirer la "card" autour (tableau direct, pas de double box) ── */
.ca-cascade-wrap {
  border: none !important;
  border-radius: 0 !important;
  overflow-x: auto;
  background: transparent;
}

/* Ligne "Sous-total / heure" — variante muted (info ÷ TR) */
.ca-cascade-pivot tr.ca-cpv-subtotal-h td {
  background: #FFFFFF;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-style: italic;
  border-bottom: 1px solid var(--color-border);
}

/* Ligne "Total personnel" — réconciliation (encadré subtil) */
.ca-cascade-pivot tr.ca-cpv-reconcile td {
  border-top: 1px dashed var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
.ca-cascade-pivot tr.ca-cpv-reconcile .ca-cpv-label-text small {
  font-style: italic;
}

/* ── Colonne Cost Driver (toggle Within/Shared dans cellule dédiée) ───── */
.ca-cpv-th-driver {
  text-align: center;
  padding: 10px 12px;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid #F1EDE3;
  white-space: nowrap;
  min-width: 110px;
}
.ca-cascade-pivot td.ca-cpv-driver {
  text-align: center;
  border-left: 1px solid #F1EDE3;
  padding: 6px 8px;
}

/* Label : libellé seul, toggle parti dans sa colonne — retire le space-between */
.ca-cascade-pivot .ca-cpv-label {
  justify-content: flex-start;
}

/* Ligne déductive (–) Indemnités */
.ca-cascade-pivot tr.ca-cpv-neg td:not(.ca-cpv-label):not(.ca-cpv-driver) {
  color: #B0463A;
}

/* Clé d'allocation "mirror" — lecture seule, suit un autre composant.
   Style délibérément SANS pill ni bordure pour signaler non modifiable. */
.ca-alloc-mirror {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
  background: transparent;
  border: none;
  padding: 0;
}
.ca-alloc-mirror-arrow {
  font-size: 11px;
  opacity: 0.6;
}

/* ── Indirect costs total — saisie rapide en haut du tableau ─────────────── */
.ca-ci-input-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ca-ci-input-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
}
.ca-ci-input {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: #185FA5;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 12px;
  outline: none;
  min-width: 160px;
  text-align: right;
  cursor: text;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ca-ci-input:focus {
  border-color: #3D6FB4;
  box-shadow: 0 0 0 3px rgba(61, 111, 180, 0.18);
}
.ca-ci-input:disabled { opacity: 0.6; cursor: progress; }
.ca-ci-readonly {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: #185FA5;
  padding: 6px 12px;
  min-width: 160px;
  text-align: right;
}
.ca-ci-input-suffix {
  font-size: 12px;
  color: var(--color-text-muted);
}
.ca-ci-input-saving {
  font-size: 11px;
  font-style: italic;
  color: #185FA5;
  margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   REFONTE DESIGN — harmonisation sur le design system Logike
   (terracotta + cream + navy, espacements cohérents, plus de bleu disparate)
   Surcharges placées en fin de fichier pour overrider les anciennes règles.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --ca-accent:        var(--color-primary);      /* terracotta */
  --ca-accent-light:  var(--color-primary-light);
  --ca-section-bg:    #F4ECDF;                   /* card cream sub */
  --ca-thead-bg:      #FFFFFF;                   /* blanc — aligné rapports People */
  --ca-zebra-bg:      #FCFAF5;
  --ca-row-hover:     #F4ECDF;
  --ca-total-bg:      #F1ECDE;
  --ca-neg:           #B0463A;
}

/* ── Bandeau CI total (saisie) — léger, pas de card, juste label + input ── */
.ca-ci-input-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
}
/* ── Panneau des modes de distribution (sous Indirect costs total) ───────── */
.ca-modes-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 12px 16px;
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
}
.ca-modes-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.ca-modes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
}
.ca-modes-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ca-modes-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.ca-ci-input-label {
  color: var(--color-text);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.ca-ci-input {
  color: var(--color-primary);
  color: var(--ca-accent);
  border: 1px solid var(--color-border);
  font-size: 16px;
  font-weight: 600;
  padding: 7px 14px;
}
.ca-ci-input:focus {
  border-color: var(--color-primary);
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 3px rgba(194, 84, 60, 0.15);
}
.ca-ci-input-saving { color: var(--color-primary); color: var(--ca-accent); }

/* ── Wrap table : suppression overflow border (déjà flat) ─────────────── */
.ca-cascade-wrap {
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  background: #fff;
  overflow: hidden;
}

/* ── Thead unifié sur cream pâle, accent terra ────────────────────────── */
.ca-cascade-pivot thead th {
  background: #FFFFFF !important;
  background: var(--ca-thead-bg) !important;
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ca-cpv-th-label   { text-align: left;   min-width: 280px; }
.ca-cpv-th-driver  { text-align: center; min-width: 130px; border-left: 1px solid #F1EDE3; }
.ca-cpv-th-total   {
  text-align: right;
  min-width: 110px;
  background: #F4ECDF !important;
  background: var(--ca-section-bg) !important;
  color: var(--color-text);
}
.ca-cpv-th-pool    { text-align: right; min-width: 100px; }
.ca-cpv-th-perh    {
  text-align: right;
  min-width: 90px;
  background: #FFFFFF !important;
  background: var(--ca-thead-bg) !important;
  color: var(--color-text-muted);
}
.ca-cpv-th-unassigned { color: var(--color-text-muted); font-style: italic; }

/* ── Tbody : espacements + zebra léger ─────────────────────────────────── */
.ca-cascade-pivot tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #F1EDE3;
  background: #fff;
}
.ca-cascade-pivot tbody tr:hover td:not(.ca-cpv-section td):not(.ca-cpv-qph-row td) {
  background: #FCFAF5;
  background: var(--ca-zebra-bg);
}

/* Labels uniformes */
.ca-cascade-pivot .ca-cpv-label {
  justify-content: flex-start;
  padding-left: 16px;
}
.ca-cpv-lock { color: var(--color-primary); color: var(--ca-accent); }

/* Cellules numériques */
.ca-cascade-pivot td.ca-td-num {
  padding: 10px 14px;
}
.ca-cascade-pivot td.ca-cpv-total {
  background: #F4ECDF !important;
  background: var(--ca-section-bg) !important;
  font-weight: 600;
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.ca-cascade-pivot td.ca-cpv-perh {
  background: #FFFFFF !important;
  background: var(--ca-thead-bg) !important;
  color: var(--color-text-muted);
  border-left: 1px solid #F1EDE3;
}

/* Section header (Key Drivers / Personnel / Externes) */
.ca-cascade-pivot tr.ca-cpv-section td {
  background: #F4ECDF !important;
  background: var(--ca-section-bg) !important;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Sous-totaux et lignes /h info */
.ca-cascade-pivot tr.ca-cpv-subtotal td {
  background: #FFFFFF !important;
  background: var(--ca-thead-bg) !important;
  font-weight: 600;
  border-top: 1px solid #E5DCC6;
}
.ca-cascade-pivot tr.ca-cpv-subtotal-h td {
  background: #FFFFFF !important;
  background: var(--ca-thead-bg) !important;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-style: italic;
}
.ca-cascade-pivot tr.ca-cpv-total-row td {
  background: #F1ECDE !important;
  background: var(--ca-total-bg) !important;
  font-weight: 700;
  border-top: 2px solid var(--color-border);
}

/* Quote-part / heure — terracotta plein, point d'arrivée */
.ca-cascade-pivot tr.ca-cpv-qph-row td {
  background: var(--color-primary) !important;
  background: var(--ca-accent) !important;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 14px;
}
.ca-cascade-pivot tr.ca-cpv-qph-row .ca-cpv-total,
.ca-cascade-pivot tr.ca-cpv-qph-row .ca-cpv-perh {
  background: #A13D2A !important;
  color: #fff;
  border-color: #A13D2A;
}

/* ── Toggle Cost driver — UN SEUL style, neutre + accent terra quand actif ── */
.ca-alloc-toggle {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px 11px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ca-alloc-toggle:hover {
  border-color: var(--color-primary);
  border-color: var(--ca-accent);
  color: var(--color-primary);
  color: var(--ca-accent);
  background: #fff;
}
/* Tous les modes : même styling, le label suffit à distinguer */
.ca-alloc-toggle--within,
.ca-alloc-toggle--shared,
.ca-alloc-toggle--billed {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.ca-alloc-toggle-swap {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 2px;
}

/* Indem mirror — déjà OK (muted italic) */
.ca-alloc-mirror {
  color: var(--color-text-muted);
}

/* Cellules à saisir (charte) : texte bleu --color-field-focus, SANS cadre ;
   soulignement discret au survol, appuyé au focus. */
.ca-cell-editable {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: text;
  color: var(--color-field-focus);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}
.ca-cell-editable:hover {
  border-bottom-color: color-mix(in srgb, var(--color-field-focus) 40%, transparent);
}
.ca-cell-editable--empty {
  color: color-mix(in srgb, var(--color-field-focus) 55%, var(--color-text-muted));
  font-weight: 500;
}
.ca-cell-input {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-field-focus);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-field-focus);
  border-radius: 0;
  padding: 3px 6px;
  outline: none;
  width: 100%;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ca-cell-input:focus { border-bottom-width: 2px; }

/* Charge indirecte hypothétique : cette saisie vit dans une CARD, pas dans une
   cellule de table. `.ca-cell-input` fait 100 % de son conteneur — parfait
   dans un <td>, désastreux ici : dans une card `fit-content` à ligne
   flexible, l'input réclamait toute la largeur disponible, la card s'étirait
   et le libellé passait à la ligne. La valeur affichée et le champ partagent
   donc la MÊME boîte : la bascule lecture/saisie ne déplace plus rien. */
.ca-param-row--cost { flex-wrap: nowrap; }
.ca-param-row--cost .ca-cell-editable,
.ca-param-row--cost .ca-cell-input {
  flex: 0 0 auto;
  width: 10ch;
  box-sizing: content-box;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Negative row (indemnities) — couleur rouge discrète */
.ca-cascade-pivot tr.ca-cpv-neg td:not(.ca-cpv-label):not(.ca-cpv-driver) {
  color: #B0463A;
  color: var(--ca-neg);
}

/* Driver column borders */
.ca-cascade-pivot td.ca-cpv-driver {
  border-left: 1px solid #F1EDE3;
  text-align: center;
}

/* ── 3 blocs séparés (Key Drivers / Personnel / Externes) ────────────── */
.ca-cascade-block {
  margin: 0 0 10px;     /* rapprochés (anciennement 32px) */
  display: flex;
  flex-direction: column;
}
.ca-cascade-block:last-of-type { margin-bottom: 0; }

.ca-cascade-block-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
  margin: 0;
  letter-spacing: 0.01em;
}

/* On retire les vieilles rangées "section" inline puisque chaque bloc a
   désormais son propre titre h3 au-dessus. */
.ca-cascade-pivot tr.ca-cpv-section { display: none; }

/* ── Alignement des 3 tables (largeurs cohérentes) ─────────────────────── */
.ca-cascade-pivot {
  width: 100%;
  table-layout: fixed;
}
/* Colonne COMPOSANT (label + driver inline) — la plus large */
.ca-cpv-th-label   { width: 38%; min-width: 360px; }
/* TOTAL — largeur fixe */
.ca-cpv-th-total   { width: 10%; min-width: 100px; }
/* /h global — largeur fixe */
.ca-cpv-th-perh    { width: 8%;  min-width: 84px; }
/* Pools — partagent le reste équitablement (auto via table-layout: fixed) */

/* Driver inline (à droite du label, avec espace) ─────────────────────── */
.ca-cpv-label {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
}
.ca-cpv-label-wrap {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-cpv-driver-inline {
  flex: none;
  display: inline-flex;
  align-items: center;
}

/* Le sélecteur masquant l'ancienne colonne driver dédiée n'est plus utile,
   on supprime le td.ca-cpv-driver (plus rendu côté JSX). */
.ca-cpv-th-driver, td.ca-cpv-driver { display: none; }

/* En-tête « section » qui remplace COMPOSANT — Fraunces serif, aligné gauche */
.ca-cascade-pivot thead th.ca-cpv-th-section {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--color-text) !important;
  text-align: left !important;
  padding-left: 16px;
}

/* ════════ Ajustements demandés (totaux gris, /h retirée, toggles colorés) ════ */

/* Totaux (Total external cost, TOTAL personnel, Total cost assigned, Personnel
   charges) → même gris que la ligne Total d'Annual hours (#EDE8DF).
   TOUTES les cellules (label + TOTAL + pools) uniformément grises, sans liseré :
   on neutralise les border-left/right de la colonne TOTAL (sinon trait clair
   visible sur fond gris) et on retire la grosse bordure navy. */
.ca-cascade-pivot tr.ca-cpv-subtotal td,
.ca-cascade-pivot tr.ca-cpv-total-row td,
.ca-cascade-pivot tr.ca-cpv-subtotal td.ca-cpv-total,
.ca-cascade-pivot tr.ca-cpv-total-row td.ca-cpv-total,
.ca-cascade-pivot tr.ca-cpv-subtotal td.ca-cpv-label,
.ca-cascade-pivot tr.ca-cpv-total-row td.ca-cpv-label {
  background: #fff !important;
  color: var(--color-navy);
  font-weight: 600;
  border-left-color: #fff !important;
  border-right-color: #fff !important;
}
/* Bordure haute discrète (cream foncé) au lieu de la grosse ligne navy */
.ca-cascade-pivot tr.ca-cpv-total-row td {
  border-top: 1px solid #DDD3C2 !important;
  font-weight: 700;
}

/* Colonne /h global retirée → la colonne COMPOSANT peut respirer un peu plus */
.ca-cpv-th-perh, td.ca-cpv-perh { display: none; }

/* ── Toggles Cost driver — couleur distincte selon la clé choisie ───────── */
.ca-alloc-toggle { font-weight: 600; }
/* Pool specific → terracotta */
.ca-alloc-toggle--within {
  background: #F6E2DC;
  border-color: #C2543C;
  color: #A23A24;
}
.ca-alloc-toggle--within:hover { background: #F0D2C8; }
/* Production hours → bleu */
.ca-alloc-toggle--shared {
  background: #DCE7F6;
  border-color: #3D6FB4;
  color: var(--color-navy);
}
.ca-alloc-toggle--shared:hover { background: #CBDBF0; }
/* Billed hours → violet/mauve */
.ca-alloc-toggle--billed {
  background: #E8E2F4;
  border-color: #7C5BCB;
  color: #4C2E80;
}
.ca-alloc-toggle--billed:hover { background: #DCD4ED; }
/* Exclure des affectations → neutre (aucune réaffectation) */
.ca-alloc-toggle--excluded {
  background: var(--color-canvas);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.ca-alloc-toggle--excluded:hover { background: var(--color-border); }
/* Mode unique (coût global) : chip statique, non cliquable — garde sa couleur. */
.ca-alloc-toggle--static { cursor: default; }
.ca-alloc-toggle--static.ca-alloc-toggle--shared:hover { background: #DCE7F6; }

/* ── Indirect cost total : valeur de saisie en BLEU (éditable) ──────────── */
.ca-ci-input {
  color: #3D6FB4 !important;
  color: var(--color-value, #3D6FB4) !important;
  font-weight: 600;
  font-size: 13px;  /* aligné sur la taille des valeurs de tableau */
}

/* ── Indirect burden rate (CHF/h) : terracotta gras ─────────────────────── */
.ca-burden-rate td {
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* ── Cascade : colonnes identiques sur les 3 tables (alignement inter-blocs) ── */
.ca-cpv-col-label { width: 40%; }
.ca-cpv-col-total { width: 9%; }

/* ════════ Cost assignment — fond blanc + en-têtes à droite + colonnes alignées ════════ */
/* table-layout fixed → les 3 blocs (Summary/Personnel/External) partagent
   exactement les mêmes largeurs de colonnes (via le colgroup commun). */
.ca-cascade-pivot { table-layout: fixed; }

/* En-têtes alignés à droite comme les chiffres (le label reste à gauche). */
.ca-cascade-pivot thead th.ca-cpv-th-total,
.ca-cascade-pivot thead th.ca-cpv-th-pool { text-align: right !important; }

/* Tout en fond blanc — on garde le gras, les bordures et les couleurs de texte
   (ex. burden rate terracotta) pour la lisibilité. */
.ca-cascade-pivot thead th,
.ca-cascade-pivot tbody td,
.ca-cascade-pivot td.ca-cpv-total,
.ca-cascade-pivot td.ca-cpv-perh,
.ca-cascade-pivot tr.ca-cpv-section td,
.ca-cascade-pivot tr.ca-cpv-subtotal td,
.ca-cascade-pivot tr.ca-cpv-subtotal-h td,
.ca-cascade-pivot tr.ca-cpv-total-row td { background: #fff !important; }

/* Colonne TOTAL plate (pas de liseré latéral) → aucun décalage vertical entre
   lignes normales et sous-totaux. */
.ca-cascade-pivot thead th.ca-cpv-th-total,
.ca-cascade-pivot td.ca-cpv-total {
  border-left: none !important;
  border-right: none !important;
}

/* ════════ Filets : SEULEMENT des bordures horizontales dans la cascade ════════
   Supprime toute bordure verticale (left/right) sur en-têtes ET cellules, quelle
   que soit la règle (doublons hérités). Le cadre arrondi (.ca-cascade-wrap) fait
   le contour ; les lignes ne sont plus que des séparateurs de lignes. */
.ca-cascade-pivot th,
.ca-cascade-pivot td {
  border-left: none !important;
  border-right: none !important;
}

/* ── Mise en évidence des lignes de coûts INDIRECTS (vs Production = direct) ──
   Filet terracotta à gauche (box-shadow → non affecté par le retrait des
   bordures verticales) + libellé légèrement teinté. */
.ca-cascade-pivot tr.ca-cpv-indirect td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.ca-cascade-pivot tr.ca-cpv-indirect .ca-cpv-label-text {
  color: var(--color-primary);
}

/* Surlignage des lignes "Out of which indirect cost" et "Indirect burden rate"
   (paire ca-cpv-subtotal-h) — fond terracotta très clair, posé APRÈS l'override
   blanc pour le supplanter. */
.ca-cascade-pivot tr.ca-cpv-subtotal-h td {
  background: #FBF1EC !important;
}

/* ════════ Filets horizontaux UNIFORMES ════════
   Cause des "lignes inégales" : bordures de couleurs (#F1EDE3 / #E5DCC6 /
   #DDD3C2 / border) et d'épaisseurs (1px/2px) mélangées + border-top sur les
   sous-totaux (doubles lignes). On impose UN seul filet horizontal identique
   sur toutes les cellules (en-têtes inclus) et on retire tous les border-top.
   Selecteurs incluant les classes de lignes pour battre les règles !important
   plus spécifiques. */
.ca-cascade-pivot thead th,
.ca-cascade-pivot tbody td,
.ca-cascade-pivot tr.ca-cpv-subtotal td,
.ca-cascade-pivot tr.ca-cpv-subtotal-h td,
.ca-cascade-pivot tr.ca-cpv-total-row td {
  border-top: none !important;
  border-bottom: 1px solid #E6E0D4 !important;
}

/* ════════════════════════ REDESIGN CASCADE (autoritaire, fin de fichier) ════════════════════════
   Objectif : filets horizontaux STRICTEMENT uniformes (un seul trait, même
   couleur, même épaisseur), AUCUNE bordure verticale ni double-ligne, design
   propre. Ce bloc est le dernier → il l'emporte sur tous les doublons. */
.ca-cascade-pivot {
  border-collapse: collapse !important;
  table-layout: fixed;
  width: 100%;
}
/* Toutes les cellules : seul un filet bas, rien d'autre. */
.ca-cascade-pivot thead th,
.ca-cascade-pivot tbody td {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #ECE5D8 !important;
  box-shadow: none;
  padding: 9px 14px !important;
}
/* En-tête de colonnes : fond crème pâle, filet bas un peu marqué. */
.ca-cascade-pivot thead th {
  background: #FAF7F1 !important;
  border-bottom: 1px solid #D9D0BF !important;
}
/* Dernière ligne du bloc : pas de filet (le cadre arrondi ferme proprement). */
.ca-cascade-pivot tbody tr:last-child td { border-bottom: 0 !important; }

/* Sous-totaux / Total : gras + très léger fond (PAS de border-top → évite la
   double ligne qui rendait les filets "inégaux"). */
.ca-cascade-pivot tr.ca-cpv-subtotal td,
.ca-cascade-pivot tr.ca-cpv-total-row td {
  font-weight: 700 !important;
  background: #FBF8F1 !important;
}
/* Lignes "Out of which indirect cost" + "Indirect burden rate" : teinte douce
   et VALEURS plus foncées (lisibles, plus de gris pâle italique). */
.ca-cascade-pivot tr.ca-cpv-subtotal-h td { background: #FBF1EC !important; }
.ca-cascade-pivot tr.ca-cpv-subtotal-h td.ca-td-num {
  color: #8A3D28 !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
/* Accent terracotta à gauche des lignes indirectes (réaffirmé, box-shadow). */
.ca-cascade-pivot tr.ca-cpv-indirect td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-primary) !important;
}

/* ── Polish : couture libellé/valeurs sur les sous-totaux + élévation carte ──
   Les cellules libellé des sous-totaux/total héritaient d'un fond blanc plus
   spécifique → teinte le libellé comme les valeurs (plus de couture verticale). */
.ca-cascade-pivot tr.ca-cpv-subtotal td.ca-cpv-label,
.ca-cascade-pivot tr.ca-cpv-total-row td.ca-cpv-label {
  background: #FBF8F1 !important;
}
.ca-cascade-pivot tr.ca-cpv-subtotal-h td.ca-cpv-label {
  background: #FBF1EC !important;
}
/* Élévation douce des 3 cartes. */
.ca-cascade-wrap {
  box-shadow: 0 1px 3px rgba(43, 32, 62, 0.05) !important;
}

/* ════════════════════════ Répartition compacte par pool + KPI ════════════════════════ */
.ca-dist { margin-bottom: 22px; }
.ca-dist__kpis { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 14px; gap: 14px; margin-bottom: 20px; }
.ca-dist__kpi {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 13px 16px; box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
}
.ca-dist__kpi .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 700; }
.ca-dist__kpi .val { font-size: 21px; font-weight: 700; margin-top: 4px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ca-dist__kpi .hint { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.ca-dist__kpi--navy .val  { color: #33415A; color: var(--color-navy, #33415A); }
.ca-dist__kpi--terra .val { color: #8A3D28; }

.ca-dist__legend { display: flex; gap: 18px; font-size: 11.5px; color: var(--color-text); margin: 0 2px 8px; }
.ca-dist__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ca-dist__legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.sw--d { background: #5B7C99; } .sw--i { background: #C2543C; }

.ca-dist__list {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
}
.ca-dist__row {
  display: grid; grid-template-columns: 160px 1fr 130px 120px 90px;
  align-items: center; grid-gap: 18px; gap: 18px; padding: 10px 16px;
  border-bottom: 1px solid #ECE5D8;
}
.ca-dist__row:last-child { border-bottom: none; }
.ca-dist__row--head {
  background: #FAF7F1; border-bottom: 1px solid #D9D0BF;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted); font-weight: 700;
}
.ca-dist__row .r { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ca-dist__name { font-weight: 600; color: var(--color-text); }
.ca-dist__tot { font-weight: 700; }
.ca-dist__pcr { color: #8A3D28; font-weight: 700; }
.ca-dist__bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #eee; }
.ca-dist__bar > span {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap;
}
.ca-dist__bar .d { background: #5B7C99; }
.ca-dist__bar .i { background: #C2543C; }

/* ════════ Cascade multi-pools : scroll horizontal commun + colonnes lisibles ════════
   Les 3 blocs partagent le même conteneur scrollable → ils restent alignés et
   défilent ensemble. Colonnes en px (mêmes largeurs partout), en-têtes de pool
   sur 2 lignes (plus de chevauchement quand il y a 8-10 pools). */
.ca-cascade-heading {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  margin: 8px 0 10px;
}
.ca-cascade-scroll { overflow-x: auto; padding-bottom: 2px; }
.ca-cascade-scroll .ca-cascade-block { width: max-content; min-width: 100%; }
.ca-cascade-scroll .ca-table-wrap { overflow: visible; }

.ca-cascade-pivot { width: max-content !important; min-width: 100%; table-layout: fixed; }
.ca-cpv-col-label { width: 280px !important; }
.ca-cpv-col-total { width: 104px !important; }
.ca-cpv-col-pool  { width: 118px; }

/* En-têtes de pool : sur plusieurs lignes, alignés en bas (lisibles, sans chevauchement). */
.ca-cascade-pivot thead th.ca-cpv-th-pool {
  white-space: normal !important;
  line-height: 1.15;
  vertical-align: bottom;
  word-break: break-word;
}

/* ════════ Tables transposées (pools en lignes, composants en colonnes) ════════ */
.ca-pivot-byrow {
  width: max-content;
  min-width: 480px;
  border-collapse: collapse;
  background: #fff;
}
.ca-pivot-byrow thead th {
  background: #FAF7F1;
  border-bottom: 1px solid #D9D0BF;
  padding: 9px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  vertical-align: bottom;
  text-align: right;
  white-space: normal;
  line-height: 1.2;
  min-width: 110px;
}
.ca-pivot-byrow thead th small {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9.5px;
  opacity: .8;
}
.ca-pbr-th-pool {
  text-align: left !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text) !important;
  min-width: 200px !important;
}
.ca-pbr-th.ca-pbr-ind { color: #8A3D28; }     /* colonnes indirectes en terracotta */
.ca-pbr-th.ca-pbr-tot { color: #33415A; color: var(--color-navy, #33415A); }

.ca-pivot-byrow tbody td,
.ca-pivot-byrow tfoot td {
  padding: 9px 14px;
  border-bottom: 1px solid #ECE5D8;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ca-pivot-byrow tbody tr:last-child td { border-bottom: 1px solid #ECE5D8; }
.ca-pbr-pool {
  text-align: left !important;
  font-weight: 600;
  color: var(--color-text);
}
.ca-pbr-totcell { color: #33415A; color: var(--color-navy, #33415A); }
.ca-pivot-byrow tfoot .ca-pbr-total td {
  background: #FBF8F1;
  border-top: 1px solid #D9D0BF;
  border-bottom: none;
  font-weight: 700;
}

/* Séparateurs de groupes dans la table fusionnée (Personnel | External | Total). */
.ca-pivot-byrow .ca-pbr-grp { border-left: 1px solid #E0D8C8; }
.ca-pivot-byrow thead th.ca-pbr-grand { color: var(--color-primary); }
.ca-pivot-byrow .ca-pbr-grandcell { color: var(--color-primary); background: #FBF6EE; }

/* ── Table fusionnée : pleine largeur SANS scroll horizontal, colonnes réduites,
   en-têtes sur 2 lignes. ── */
.ca-cascade-scroll .ca-cascade-block--full { width: 100%; }
.ca-cascade-block--full .ca-pivot-byrow {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.ca-cascade-block--full .ca-pivot-byrow th,
.ca-cascade-block--full .ca-pivot-byrow td {
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Colonne pool ~14%, les 11 colonnes de valeurs se partagent le reste. */
.ca-cascade-block--full .ca-pbr-th-pool { width: 13% !important; min-width: 0 !important; }
/* En-têtes : forcer ~2 lignes (hauteur mini) pour un alignement régulier. */
.ca-cascade-block--full .ca-pivot-byrow thead th {
  font-size: 10px;
  line-height: 1.18;
  min-height: 30px;
}
.ca-cascade-block--full .ca-pivot-byrow thead th small { font-size: 9px; }

/* Plus d'air sous le tableau / la barre de scroll. */
.ca-cascade-scroll { padding-bottom: 14px; }

/* Ligne "Cost driver" (clé d'allocation par colonne) en tête du corps. */
.ca-pivot-byrow tr.ca-pbr-driver td {
  font-size: 9.5px;
  font-style: italic;
  color: #8A3D28;
  text-align: right;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #D9D0BF;
}
.ca-pivot-byrow tr.ca-pbr-driver .ca-pbr-pool {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  text-align: left;
}

/* Cost driver : laisser les clés s'afficher en entier (wrap, pas de troncature). */
.ca-pivot-byrow tr.ca-pbr-driver td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  vertical-align: top;
}
/* Alignement vertical homogène des lignes de données + nombres bien à droite. */
.ca-cascade-block--full .ca-pivot-byrow tbody td,
.ca-cascade-block--full .ca-pivot-byrow tfoot td { vertical-align: middle; }
.ca-cascade-block--full .ca-pivot-byrow thead th { padding-top: 10px; padding-bottom: 8px; }
/* Cellule Specific (saisie) centrée verticalement, pastille alignée à droite. */
.ca-pivot-byrow .ca-cell-editable { white-space: nowrap; }

/* En-têtes : texte centré + alignés en haut (la colonne libellé reste à gauche). */
.ca-pivot-byrow thead th { text-align: center; vertical-align: top; }
.ca-pivot-byrow thead th.ca-pbr-th-pool { text-align: left; }

/* Ligne Cost driver : valeurs centrées (le libellé reste à gauche). */
.ca-pivot-byrow tr.ca-pbr-driver td { text-align: center; }
.ca-pivot-byrow tr.ca-pbr-driver td.ca-pbr-pool { text-align: left; }

/* Summary transposé : valeurs indirectes en terracotta. */
.ca-pivot-byrow .ca-pbr-indcell { color: #8A3D28; }

/* Lignes négatives des cascades (décharge, indemnités) en terracotta. */
.prof-output-table .ca-cas-neg { color: #8A3D28 !important; }

/* Lignes de mark-up mises en évidence (fond terracotta clair + gras + cadre). */
.prof-output-table tr.ca-cas-markup td {
  background: #FBF1EC !important;
  color: #8A3D28 !important;
  font-weight: 700;
  border-top: 1.5px solid #D9A893 !important;
  border-bottom: 1.5px solid #D9A893 !important;
}
.prof-output-table tr.ca-cas-markup td:first-child { border-left: 1.5px solid #D9A893 !important; }
.prof-output-table tr.ca-cas-markup td:last-child  { border-right: 1.5px solid #D9A893 !important; }

/* ════════════════════════════════════════════════════════════════════
   Total cost per pool — 3 cards (PCR · cost structure · time usage)
   ════════════════════════════════════════════════════════════════════ */
.tcp-card {
  background: #fff;
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.tcp-tit {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 2px;
  color: #2B203E;
  color: var(--color-text, #2B203E);
}
.tcp-tit small {
  font-family: inherit;
  font-weight: 400;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
  font-size: 12px;
}
.tcp-leg {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
  font-size: 11.5px;
  color: #5a5468;
}
.tcp-leg span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tcp-sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
}
.tcp-row {
  display: grid;
  grid-template-columns: 120px 1fr 150px;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
  padding: 7px 0;
}
.tcp-row--avg {
  border-bottom: 1px solid #ECE5D8;
  border-bottom: 1px solid var(--color-border, #ECE5D8);
  margin-bottom: 4px; padding-bottom: 9px;
}
.tcp-row--avg .tcp-name { font-weight: 700; font-style: italic; }
.tcp-name { font-weight: 600; color: #2B203E; color: var(--color-text, #2B203E); }
.tcp-name-sub { font-weight: 400; color: #8A8195; color: var(--color-text-muted, #8A8195); margin-left: 4px; font-size: 0.85em; }
.tcp-barcell { width: 100%; }
.tcp-bar {
  display: flex;
  height: 27px;
  border-radius: 7px;
  overflow: hidden;
  min-width: 2px;
}
.tcp-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.tcp-right {
  text-align: right;
  font-size: 12px;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
}
.tcp-right b {
  color: #2B203E;
  color: var(--color-text, #2B203E);
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.tcp-pcr { color: #C2543C; font-weight: 700; }

/* ── Tableau PCR par personne (Total cost per pool) ── */
.tcp-ptable-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; margin-bottom: 16px;
}
.tcp-ptable-filter {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #8B8478; color: var(--color-text-muted, #8B8478);
}
.tcp-ptable-filter select {
  border: 1px solid #C3D4E8; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  background: #EEF3FA; color: #3D5A80;
}
.tcp-ptable-wrap {
  overflow-x: auto;
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 10px;
}
.tcp-ptable {
  width: 100%; border-collapse: collapse;
  font-size: 13px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tcp-ptable th, .tcp-ptable td {
  padding: 6px 9px; border-bottom: 0.5px solid #ECE5D8; border-bottom: 0.5px solid var(--color-border, #ECE5D8);
  text-align: left; white-space: nowrap;
}
/* En-têtes : retour à la ligne autorisé (colonnes compactes → tient sans scroll
   horizontal sur un écran 13"). */
.tcp-ptable thead th {
  position: sticky; top: 0; z-index: 1;
  white-space: normal; line-height: 1.2;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em;
  font-weight: 600; color: #8B8478; color: var(--color-text-muted, #8B8478);
  background: #FBF7F0;
  background: var(--color-bg, #FBF7F0);
  border-bottom: 1px solid #ECE5D8;
  border-bottom: 1px solid var(--color-border, #ECE5D8);
  cursor: pointer; -webkit-user-select: none; user-select: none; vertical-align: bottom;
}
.tcp-ptable thead th:hover { color: #2B203E; color: var(--color-text, #2B203E); }
.tcp-ptable thead th.is-sorted { color: #2B203E; color: var(--color-text, #2B203E); }
.tcp-ptable .is-num { text-align: right; }
.tcp-sort-ind { opacity: 0.5; font-size: 10px; }
/* Première colonne (Person) — repère de lecture renforcé */
.tcp-ptable tbody td:first-child { font-weight: 600; color: #2B203E; color: var(--color-text, #2B203E); }
/* Alternance de lignes discrète + survol */
.tcp-ptable tbody tr:nth-child(even) { background: rgba(43, 32, 62, .018); }
.tcp-ptable tbody tr:hover { background: #FBF7F0; background: var(--color-bg, #FBF7F0); }
/* Colonne phare CCR — brun clair (= ligne total éclaircie), texte navy.
   Dans le TABLEAU uniquement (le graphique à barres garde le terracotta). */
.tcp-ptable .tcp-col-ccr { background: #F5F2EC; }
.tcp-ptable tbody tr:hover .tcp-col-ccr { background: #EFEBE2; }
.tcp-ptable thead th.tcp-col-ccr { color: #2B203E; color: var(--color-navy, #2B203E); }
.tcp-ptable .tcp-pcr { color: #2B203E; color: var(--color-navy, #2B203E); }
/* Ligne Total/Average — même brun que Labour costing (#EDE8DF + navy) */
.tcp-ptable tfoot td {
  border-top: 2px solid #2B203E;
  border-top: 2px solid var(--color-navy, #2B203E); border-bottom: none;
  font-weight: 600; background: #EDE8DF; color: #2B203E; color: var(--color-navy, #2B203E);
}
.tcp-det {
  font-size: 11px;
  color: #8B8478;
  color: var(--color-text-muted, #8B8478);
  margin: -2px 0 6px;
  padding-left: 136px; /* nom 120 + gap 16 : aligné au début de la barre */
}
.tcp-det b { color: #5a5468; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Couleurs de segments (et swatches de légende) */
/* Décomposition du CCR (charte) : personnel en famille ardoise (direct foncé /
   indirect clair), frais généraux en amber (nature différente). */
.tcp-direct  { background: var(--color-accent); }
.tcp-indpers { background: var(--color-accent-soft); }
.tcp-ovh     { background: var(--color-amber); }
/* Ardoise clair = fond pâle → texte foncé pour le contraste. */
.tcp-seg.tcp-indpers { color: var(--color-navy); }
.tcp-bill    { background: #7C9A53; }
.tcp-nonbill { background: #E0B85C; }
.tcp-idle    { background: #C2543C; }

/* ─── Format card unifié — essai sur Capacity Costing ──────────────────────
   En-tête bleu-gris pleine largeur dans la card, KPI à plat (grille). */
.tcp-card { overflow: hidden; }

.tcp-card > .tcp-tit,
.tcp-card > .tcp-ptable-head {
  margin: -18px -22px 16px;
  padding: 12px 22px;
  background: var(--color-surface-card);                 /* bleu-gris calme harmonisé */
  border-bottom: 1px solid var(--color-border);
}
.tcp-card > .tcp-tit { font-size: 14px; color: var(--color-navy); }
.tcp-card > .tcp-tit small { color: var(--color-text-muted); font-weight: 500; }

/* En-tête du coût horaire, en GRILLE (2026-08-26).

   Trois blocs, deux rangées. À gauche le titre, puis la bascule Par groupe /
   Par personne sous lui ; à droite, sur la ligne du titre, les filtres tenus
   en UNE ligne.

   Ce qui a été corrigé au passage : la glose de l'unité se lisait comme une
   suite du titre, elle passe dessous ; la bascule était poussée au bord droit,
   à l'autre bout de l'écran, elle revient à gauche sous le titre ; et les
   filtres, un moment descendus avec elle, remontent à hauteur du titre, où
   l'on cherche un filtre.

   Sous 1000 px, la colonne des filtres n'a plus la place de tenir sa ligne :
   tout repasse en une seule colonne. */
.tcp-card > .tcp-ptable-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  grid-column-gap: 18px;
  column-gap: 18px; grid-row-gap: 10px; row-gap: 10px;
}
.tcp-card > .tcp-ptable-head > .tcp-tit {
  grid-column: 1; grid-row: 1;
  margin: 0; padding: 0; background: transparent; border: none;
}
.tcp-card > .tcp-ptable-head > .tcp-tit small {
  display: block; margin-top: 3px;
}
.tcp-card > .tcp-ptable-head > .tcp-viewsw {
  grid-column: 1; grid-row: 2; justify-self: start;
}
.tcp-ptable-head__filters {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.tcp-card > .tcp-ptable-head .tcp-ptable-filter { margin: 0; }
@media (max-width: 1000px) {
  .tcp-card > .tcp-ptable-head { grid-template-columns: 1fr; }
  .tcp-card > .tcp-ptable-head > .tcp-viewsw { grid-row: auto; }
  .tcp-ptable-head__filters { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* KPI à plat dans la card (plus de tuiles à ombre) */
.tcp-card > .ca-dist__kpis {
  grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-bottom: 0;
}
.tcp-card .ca-dist__kpi {
  background: transparent; border: none; box-shadow: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0; padding: 4px 18px;
}
.tcp-card .ca-dist__kpi:first-child { border-left: none; padding-left: 0; }

/* Table dans une card : en-tête de colonnes en texte simple (fond blanc =
   même que la card) → pas de 2e bande, l'en-tête de card reste la seule. */
.tcp-card .tcp-ptable thead th { background: #fff; }

/* Harmonisation bleu (colonne CCR + ligne total) — un seul bleu, dégradé léger.
   Corrige aussi l'en-tête CCR (qui était repassé blanc par la règle ci-dessus). */
.tcp-card .tcp-ptable .tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-card .tcp-ptable tbody tr:hover .tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-card .tcp-ptable thead th.tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-card .tcp-ptable tfoot td { background: var(--color-accent-tint-strong); border-top-color: var(--color-border); }
.tcp-card .tcp-ptable tfoot td.tcp-col-ccr { background: var(--color-accent-tint-strong); }

/* ── Card unique de paramétrage (Indirect assignment) ───────────────────────
   Charge indirecte hypothétique + inducteurs de coûts dans une seule card. */
.ca-param-card {
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 20px 0 28px;
}
/* Petite card compacte : saisie de la charge indirecte seule (épouse le contenu). */
.ca-param-card--compact {
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px;
  margin: 12px 0 20px;
}
.ca-param-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ca-param-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 150px;
}
.ca-param-suffix {
  font-size: 12px;
  color: var(--color-text-muted);
}
.ca-param-sep {
  height: 1px;
  background: var(--color-border);
  margin: 14px 0;
}
.ca-param-row--drivers .ca-modes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: flex-end;
}

/* Synthèse CCR — mini-tuiles au look KpiTile (fond teinté, filet, ombre douce),
   posées à plat sur le fond de page (section hr-synth--flat, pas de card blanche). */
.tcp-synth-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 8px;
  gap: 8px;
  padding: 0 4px;
}
.tcp-tile {
  background: var(--color-surface-rail);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-navy) 5%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tcp-tile__label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.tcp-tile__value {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 20px; font-weight: 600; color: var(--color-navy);
  line-height: 1.15; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tcp-tile__value small { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
.tcp-tile__hint { font-size: 11px; color: var(--color-text-muted); }

/* Contrôle du coût horaire : les deux chemins vers le coût total. Liseré sauge
   quand ils coïncident au franc, terracotta sinon — un contrôle existe pour
   montrer l'écart, pas pour le taire. */
.tcp-check {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  margin: 12px 16px 4px; padding: 9px 14px;
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-page); border-radius: 0 6px 6px 0;
  font-size: 12.5px; color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tcp-check b { color: var(--color-text); font-weight: 600; margin-left: 5px; }
.tcp-check.is-ok  { border-left-color: var(--color-sage); }
.tcp-check.is-off { border-left-color: var(--color-terracotta); }
.tcp-check__gap { margin-left: auto; font-weight: 600; color: var(--color-text); }
.tcp-check.is-ok  .tcp-check__gap b { color: var(--color-sage); }
.tcp-check.is-off .tcp-check__gap b { color: var(--color-terracotta); font-weight: 700; }

/* Bascule de lecture d'une même card : par groupe, ou par personne. Même
   grammaire que le filtre Actifs / Tous des tables de personnes. */
.tcp-viewsw { display: inline-flex; background: var(--stone-100); border-radius: 6px; padding: 2px; gap: 2px; }
.tcp-viewsw button {
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--color-text-muted); background: transparent; border: none;
  border-radius: 5px; padding: 5px 12px; white-space: nowrap;
}
.tcp-viewsw button:hover { color: var(--color-text); }
.tcp-viewsw button.is-on {
  color: var(--color-accent); font-weight: 700;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* ── Profitability Page — Phase 11.2 ─────────────────────────────────────── */

.prof-layout {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Embarqué dans le hub Profitabilité : pas de padding page (aligné sur titre/onglets). */
.page-table-layout.prof-layout--embedded {
  padding: 0;
}

/* ── Page header ─────────────────────────────────────────────────────────────── */

.prof-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 2px;
  line-height: 1.3;
}

.prof-caption {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── KPI strip ───────────────────────────────────────────────────────────────── */

.prof-kpi-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}

.prof-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #FAFAF7;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 140px;
  flex: 1 1;
}

.prof-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.prof-kpi-value {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.25;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.prof-kpi-value--danger {
  color: #DC2626;
  color: var(--color-text-danger, #DC2626);
}

.prof-kpi-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* ── Warnings ────────────────────────────────────────────────────────────────── */

.prof-warning {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 0.5px solid;
}
.prof-warning--blocker { background: #FEF3C7; border-color: #FBBF24; color: #78350F; }
.prof-warning--info    { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-on-tint); }

/* ── Section container ───────────────────────────────────────────────────────── */

.prof-section {
  background: #ffffff;
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  margin-bottom: 18px;
}
.prof-section-body { padding: 0; }

/* ── Table wrapper ───────────────────────────────────────────────────────────── */

.prof-table-wrap {
  overflow-x: auto;
}

/* ── Table base ──────────────────────────────────────────────────────────────── */

.prof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.prof-table th {
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.prof-table td {
  padding: 7px 12px;
  border-bottom: 0.5px solid var(--color-border);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.prof-table tbody tr:last-child td { border-bottom: none; }

/* Metric column header — left-aligned, sticky */
.prof-th-metric {
  text-align: left !important;
  min-width: 290px;
  position: sticky;
  left: 0;
  background: rgba(0, 0, 0, 0.02);
  z-index: 2;
}

.prof-th-pool   { min-width: 140px; color: var(--color-text) !important; }

.prof-th-total {
  color: var(--color-primary) !important;
  border-right: 1.5px solid var(--color-primary);
  border-right: 1.5px solid var(--color-border-primary, var(--color-primary));
}

/* ── Sticky metric column (body) ─────────────────────────────────────────────── */

.prof-td-metric {
  text-align: left;
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 1;
}

.prof-td-metric--indent   { padding-left: 24px; }
.prof-td-metric--indent30 { padding-left: 30px; }

.prof-td-italic { font-style: italic; }

/* ── Cell types ──────────────────────────────────────────────────────────────── */

.prof-td-num {
  text-align: right;
  white-space: nowrap;
  background: #ffffff;   /* cellules de valeur blanches sur ligne normale ; tint de ligne déborde au-dessus */
}

/* Total column — fond blanc, filet primary à droite + texte primary pour la distinguer. */
.prof-td-total {
  background: #ffffff;
  color: var(--color-primary);
  border-right: 1.5px solid var(--color-primary);
  border-right: 1.5px solid var(--color-border-primary, var(--color-primary));
}

/* Semantic colors — margin rows only */
.prof-td-success { color: #166534; }
.prof-td-danger  { color: #DC2626; }

.prof-td-muted   { color: var(--color-text-muted); font-style: italic; }
.prof-td-stat    { /* neutral — no color override */ }

/* ── Section headers (legacy — kept for safety, no longer rendered) ──────────── */

.prof-row-section-head { /* unused in 2-table layout */ }

.prof-section-head-label {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  background: #F1F5F9;
  border-bottom: 0.5px solid var(--color-border);
}

.prof-section-head--margins .prof-section-head-label { /* unused */ }
.prof-section-head--margins td { /* unused */ }

.prof-row-section-sep td {
  padding: 0;
  height: 5px;
  border-bottom: 1px solid var(--color-border);
  background: #ffffff;
}

/* ── Sub-group header (Hours / Pricing / Break-even) ─────────────────────────── */

.prof-row-subhead td {
  border-bottom: none;
}

.prof-subhead-label {
  padding: 12px 14px 2px !important;
  font-size: 10.5px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
  background: var(--color-bg) !important;
  letter-spacing: 0.2px;
}

/* ── Stat rows ───────────────────────────────────────────────────────────────── */

.prof-row-stat td {
  /* default styling from .prof-table td */
}

/* ── Revenue rows ────────────────────────────────────────────────────────────── */

.prof-row-revenue td {
  border-top: 0.5px solid var(--color-border);
  background: #ffffff;
}

/* ── Tier deduction rows ─────────────────────────────────────────────────────── */

.prof-row-tier td {
  color: var(--color-text);
}

.prof-td-tier-val {
  color: var(--color-text);  /* neutral — no success/danger */
}

.prof-tier-hint {
  font-size: 10px;
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: 400;
}

/* ── Intermediate margin rows (Gross, Contribution, Effective revenue) ───────── */

.prof-row-imargin td {
  background: #ffffff;
  border-top: 0.5px solid var(--color-border);
}

/* Trait épais sous le bloc revenus (= Effective revenue) */
.prof-row-imargin--thick td {
  border-bottom: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-border-primary, var(--color-primary));
}

/* Bloc Fixed costs (supervision → overhead + total) — barre rouge à gauche,
   relie ces lignes au calcul du break-even (fixed cost = input du seuil). */
.prof-row-fixed-mark td:first-child {
  box-shadow: inset 3px 0 0 #DC2626;
}

/* ── Percentage rows (small, tertiary, reduced padding) ──────────────────────── */

.prof-row-pct td {
  padding-top: 2px;
  padding-bottom: 6px;
  border-bottom: none;
  background: #ffffff;
}

.prof-td-pct {
  font-size: 11px;
  color: var(--color-text-muted);
}

.prof-td-pct-label {
  /* empty label cell for pct row alignment */
}

/* Jauge d'utilization (billable+non-billable ÷ TR) — barre verte + label centré */
.prof-util-bar {
  position: relative;
  width: 100%;
  height: 16px;
  background: #ECEFF1;
  border-radius: 8px;
  overflow: hidden;
}
.prof-util-bar__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #22C55E;
  border-radius: 8px;
}
.prof-util-bar__label {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 600;
  color: #14532D;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* % inline sous le montant de marge (compact — fusionne l'ancienne ligne %) */
.prof-inline-pct {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--color-text-muted) !important;  /* gris, jamais vert/rouge hérité */
  margin-top: 1px;
}
/* % mis en avant (ex. Contribution margin — cœur du rapport Contribution Analysis) */
.prof-inline-pct--big {
  font-size: 13px;
  font-weight: 700;
  color: inherit !important;   /* même couleur que la valeur CHF (vert/rouge marge) */
  margin-top: 1px;
}

/* ── Final operating margin row ──────────────────────────────────────────────── */

.prof-row-operating {
  border-top: 1.5px solid var(--color-primary);
  border-top: 1.5px solid var(--color-border-primary, var(--color-primary));
}

.prof-row-operating td {
  padding: 11px 12px;
  border-bottom: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-border-primary, var(--color-primary));  /* trait épais final */
  background: #ffffff;
}

.prof-td-operating-label {
  font-size: 13px;
  font-weight: 600;
}

.prof-td-operating {
  font-size: 14px;
}

/* Total cell within operating row — slightly heavier (tint hérité de la ligne) */
.prof-row-operating .prof-td-total {
  font-size: 14px;
}

/* ── Revenue override input ──────────────────────────────────────────────────── */

.prof-td-override { padding: 5px 12px; }

.prof-override-cell {
  display: inline-block;
  min-width: 80px;
  padding: 4px 8px;
  border-radius: 4px;
  border-radius: var(--radius-sm, 4px);
  border: 0.5px dashed var(--color-accent-soft);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}

.prof-override-cell:hover {
  border-color: var(--color-field-focus);
  background: var(--color-input-bg);
  color: var(--color-text);
}

.prof-override-cell--set {
  border: 0.5px solid var(--color-field-focus);
  background: var(--color-input-bg);
  color: var(--color-input-text);
  border-style: solid;
  font-weight: 600;
}

.prof-override-input {
  width: 100px;
  padding: 4px 8px;
  border-radius: 4px;
  border-radius: var(--radius-sm, 4px);
  border: 0.5px solid var(--color-field-focus);
  background: var(--color-input-bg);
  color: var(--color-input-text);
  font-family: inherit;
  font-size: 13px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  outline: none;
}

.prof-override-input--active { border-width: 1px; }

.prof-override-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Two-table split (Metrics / Financial Margins) ───────────────────────────── */

/* Second table section — visual gap above */
.prof-section--margins {
  margin-top: 20px;
}

/* table-layout: fixed so both tables honour identical colgroup widths */
.prof-output-table {
  table-layout: fixed;
}

/* Column width hints (colgroup cols) */
.prof-col-metric { width: 290px; }
.prof-col-total  { width: 140px; }
.prof-col-pool   { width: 140px; }

/* ── Block-label header row ── */

.prof-thead-block .prof-th-block-label {
  background: var(--color-surface-card);   /* charte — en-tête de bloc bleu-gris */
  color: var(--color-navy);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* Bloc Financial Margins — teinte charte un cran plus marquée (grand total). */
.prof-thead-block--margins .prof-th-block-label {
  background: var(--color-accent-tint-strong);   /* charte — bleu-gris renforcé */
  color: var(--color-navy);
}

/* ── Footnote ────────────────────────────────────────────────────────────────── */

.prof-footnote {
  font-size: 10.5px;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ── Filtre par pool (gauche, au-dessus du tableau) ─────────────────────── */
.prof-filter-row {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 12px;
}
.prof-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.prof-filter-lbl { font-weight: 500; }
.prof-filter select {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}

/* ── Séparateurs de blocs dans la table Metrics ──────────────────────────── */
.prof-row-sep td {
  padding: 0;
  height: 10px;
  border-top: 1px solid #ECE5D8;
  border-top: 1px solid var(--color-border, #ECE5D8);
}
.prof-row-sep--black td {
  border-top: 2px solid #2B203E;
}

/* Capacity overview cascade — charte Logike (variables :root + famille bleu-gris sanctionnée). */
.cao { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }

.cao-kpis { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }
.cao-kpi { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 15px; }
.cao-kpi-lbl { font-size: 11.5px; color: var(--color-text-muted); }
.cao-kpi-val { font-size: 23px; font-weight: 600; color: var(--color-navy); margin-top: 2px; }
.cao-kpi-val--terra { color: var(--color-terracotta); }
.cao-kpi-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.cao-card { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.cao-head { background: var(--color-surface-card); border-bottom: 1px solid var(--color-border); padding: 10px 16px;
  font-weight: 600; font-size: 13px; color: var(--color-navy); }

.cao-pont-wrap { padding: 16px; }
.cao-pont { display: flex; height: 32px; border-radius: 8px; overflow: hidden; font-size: 11.5px; font-weight: 600; }
.cao-seg { display: flex; align-items: center; padding-left: 10px; white-space: nowrap; overflow: hidden; }
.cao-seg--struct { background: #B4B2A9; color: #2C2C2A; }
.cao-seg--bill { background: var(--color-sage); color: #fff; }
.cao-seg--nf { background: var(--color-amber); }
.cao-seg--abs { background: #C9A24B; }
.cao-seg--idle { background: #E0A18F; color: #5A1F12; }

.cao-table-wrap { overflow-x: auto; }
.cao-table { width: auto; border-collapse: collapse; font-size: 12px; }
.cao-table th, .cao-table td { padding: 6px 9px; text-align: right; white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; }
.cao-table thead th { background: #fff; color: var(--color-navy); font-weight: 600;
  border-bottom: 1px solid var(--color-border); }
.cao-table th:first-child, .cao-table td:first-child { text-align: left; }
.cao-table th.pct, .cao-table td.pct { color: var(--color-text-muted); font-weight: 400; padding-left: 3px; padding-right: 14px; }
.cao-table th.nat, .cao-table td.nat { text-align: left; color: var(--color-text-muted); font-weight: 400; }
.cao-table td.nat--sage { color: var(--color-sage); }
.cao-table td.nat--amber { color: var(--color-amber); }
.cao-table td.nat--terra { color: var(--color-terracotta); }
.cao-table td.rc { background: #EDF4E3; }
.cao-table thead th.rc { background: #E2EDD2; }
.cao-table .rc-first { border-left: 2px solid var(--color-sage); }
.cao-table .proj { background: #F6F4EE; }
.cao-table thead th.proj { background: #EEEAE0; }
.cao-table .proj-first { border-left: 2px solid #C9B79A; }
.cao-table td.std { background: var(--color-accent-tint); }
.cao-table thead th.std { background: var(--color-accent-tint-strong); }
.cao-table .std-first { border-left: 2px solid #8FA8C8; }
.cao-table td.ind { padding-left: 22px; color: var(--color-text-muted); }
.cao-table td.lbl { font-weight: 500; color: var(--color-text); }
.cao-table tbody tr.inp td { font-weight: 500; }
.cao-table tbody tr.sub td { background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy); }
.cao-table tbody tr.sub td.proj { background: var(--color-accent-tint); }
.cao-table tbody tr.tot td { background: var(--color-accent-tint-strong); font-weight: 600; color: var(--color-navy); }
.cao-table tbody tr.tot td.proj { background: var(--color-accent-tint-strong); }
.cao-table tbody tr.idle-row td { font-weight: 600; color: var(--color-navy); }
.cao-table tbody tr:hover td { background: #FBFAF7; }

.cao-note { padding: 10px 16px; font-size: 11px; color: var(--color-text-muted); }

/* Capacity audit — charte Logike (variables :root + famille bleu-gris sanctionnée). */
.cau { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }

.cau-anchor { font-size: 12.5px; color: var(--color-text); }
.cau-anchor b { color: var(--color-navy); font-size: 14px; }
.cau-anchor-detail { color: var(--color-text-muted); font-size: 11.5px; }

.cau-toggle { display: inline-flex; border: 1px solid var(--color-border);
  border-radius: 6px; overflow: hidden; vertical-align: middle; }
.cau-toggle button { font-size: 11.5px; padding: 2px 9px; border: none; background: #fff;
  color: var(--color-text-muted); cursor: pointer; }
.cau-toggle button + button { border-left: 1px solid var(--color-border); }
.cau-toggle button.on { background: var(--color-accent-tint); color: var(--color-accent); font-weight: 600; }

.cau-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cau-chips + .cau-chips { margin-top: 8px; }
.cau-chips-lbl { font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
.cau-chips-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 2px 6px; }
.cau-chip { font-size: 12px; padding: 3px 11px; border: 1px solid var(--color-border);
  border-radius: 999px; background: #fff; color: var(--color-text); cursor: pointer; }
.cau-chip:hover { border-color: #8FA8C8; }
.cau-chip.on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; font-weight: 600; }
.cau-chip--clear { color: var(--color-text-muted); border-style: dashed; }

/* Couleurs par groupe pour distinguer Unité / Type / Pool */
.cau-chips-lbl.l-unit { color: var(--color-navy); }
.cau-chips-lbl.l-type { color: var(--color-terracotta); }
.cau-chips-lbl.l-pool { color: var(--color-sage); }
.cau-toggle button.on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.cau-chip--type { border-color: color-mix(in srgb, var(--color-terracotta) 45%, var(--color-border)); }
.cau-chip--type:hover { border-color: var(--color-terracotta); }
.cau-chip--type.on { background: var(--color-terracotta); border-color: var(--color-terracotta); }
.cau-chip--pool { border-color: color-mix(in srgb, var(--color-sage) 45%, var(--color-border)); }
.cau-chip--pool:hover { border-color: var(--color-sage); }
.cau-chip--pool.on { background: var(--color-sage); border-color: var(--color-sage); }

.cau-table-wrap { overflow-x: auto; }
.cau-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.cau-table th, .cau-table td { padding: 6px 8px; text-align: right; white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.cau-table td.num, .cau-table th.num { text-align: right; }
.cau-table th.lbl, .cau-table td.lbl { text-align: left; }

.cau-table thead th { background: #fff; color: var(--color-navy); font-weight: 600;
  border-bottom: 1px solid var(--color-border); }
.cau-table thead tr.cau-grp th { font-weight: 600; color: var(--color-navy);
  text-align: center; border-bottom: 1px solid var(--color-border); }
.cau-table thead tr.cau-grp th.g-std { background: var(--color-surface-card); }
.cau-table thead tr.cau-grp th.g-res { background: var(--color-accent-tint); }
.cau-table thead tr.cau-grp th.g-real { background: var(--color-accent-tint-strong); }

/* séparateurs de blocs */
.cau-table th.g-std, .cau-table td.g-std { border-left: 1px solid var(--color-border); }
.cau-table th.g-res, .cau-table td.g-res { border-left: 2px solid #8FA8C8; }
.cau-table th.g-real, .cau-table td.g-real { border-left: 2px solid #8FA8C8; }
.cau-table th.g-tfc, .cau-table td.g-tfc { border-left: 2px solid #8FA8C8; }

.cau-table th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.cau-table th.sortable:hover { color: var(--color-terracotta); }

.cau-table td.lbl { font-weight: 500; color: var(--color-text); }
.cau-sub { color: var(--color-text-muted); font-weight: 400; font-size: 11px; }

.cau-table td.phare, .cau-table th.phare { background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy); }
/* TF cible : surligné avec le fond de sélection de la nav (accent tenant léger) */
.cau-table th.hl, .cau-table td.hl { background: color-mix(in srgb, var(--color-primary) 14%, #fff); background: color-mix(in srgb, var(--tenant-accent, var(--color-primary)) 14%, #fff); }
.cau-table tbody tr:hover td { background: #FBFAF7; }
.cau-table tbody tr:hover td.phare { background: var(--color-accent-tint); }
.cau-table tbody tr:hover td.hl { background: color-mix(in srgb, var(--color-primary) 22%, #fff); background: color-mix(in srgb, var(--tenant-accent, var(--color-primary)) 22%, #fff); }
/* Colonne de base du mode % (OT ou TR) : surlignage jaune moutarde (amber charte) */
.cau-table th.base, .cau-table td.base { background: color-mix(in srgb, var(--color-amber) 22%, #fff); font-weight: 600; color: var(--color-navy); }
.cau-table tbody tr:hover td.base { background: color-mix(in srgb, var(--color-amber) 30%, #fff); }

.cau-table tfoot tr.cau-tot td { background: var(--color-accent-tint-strong); font-weight: 600; color: var(--color-navy);
  border-top: 1px solid var(--color-border); }
.cau-table tfoot tr.cau-tot td.phare { background: var(--color-accent-tint-strong); }
.cau-table tfoot tr.cau-tot td.hl { background: color-mix(in srgb, var(--color-primary) 24%, #fff); background: color-mix(in srgb, var(--tenant-accent, var(--color-primary)) 24%, #fff); }
.cau-table tfoot tr.cau-tot td.base { background: color-mix(in srgb, var(--color-amber) 36%, #fff); }

/* Conseil de découpage — même famille visuelle que .ca-rule-card (le bloc de
   règles des onglets d'affectation) : pas une nouveauté graphique, la même
   voix. Ardoise uniquement, conformément à la charte.

   Grossi le 2026-08-22 : ces trois tests sont ce qu'on vient LIRE quand on ne
   sait pas comment découper. En 12 px sous un intertitre, ils passaient pour
   une note de bas de page ; ils portent maintenant leur propre card. */
.pool-advice { padding: 2px 0 4px; }
.pool-advice__title { display: none; }
.pool-advice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
}
@media (max-width: 860px) { .pool-advice__grid { grid-template-columns: 1fr; } }
.pool-advice__card {
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-strong);
  border-radius: 10px;
  padding: 16px 18px;
}
.pool-advice__card b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px; font-weight: 600; line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: 7px;
}
.pool-advice__card span {
  display: block;
  font-size: 13.5px; line-height: 1.55;
  color: var(--color-text);
}
.pool-advice__src {
  margin: 14px 0 0;
  font-size: 12px; line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 88ch;
}

/* Card dépliable à icône — gabarit charte : corps blanc arrondi, en-tête blanc
   à filet bas, aucune bande colorée. */
.fcard-stack { display: flex; flex-direction: column; gap: 14px; }

.fcard {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.fcard.is-open { box-shadow: 0 1px 2px rgba(26, 18, 25, .04); }

.fcard__head { display: flex; align-items: center; gap: 10px; }
.fcard__toggle {
  display: flex; align-items: center; gap: 12px; flex: 1 1; min-width: 0;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit;
}
.fcard__icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-tint); color: var(--color-accent);
}
.fcard.is-open .fcard__icon { background: var(--color-accent); color: #fff; }
.fcard__titles { display: flex; flex-direction: column; gap: 1px; flex: 1 1; min-width: 0; }
.fcard__title { font-family: "Fraunces", Georgia, serif; font-size: 16px; color: var(--color-navy); }
.fcard__sub { font-size: 12px; color: var(--color-text-muted); }
.fcard__chev { flex: 0 0 auto; color: var(--color-text-muted); font-size: 13px; }
.fcard__actions { flex: 0 0 auto; padding-right: 14px; }
.fcard__body { padding: 4px 16px 18px; border-top: 1px solid var(--color-border-inner); }

/* Rentabilité client — matrice ressource × client (charte : tokens uniquement). */

.rc-layout { }
.rc-layout--embedded { padding: 0; }

.rc-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rc-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text);
}
.rc-period__sep { color: var(--color-text-muted); }
.rc-period__unit { color: var(--color-text-muted); }
.rc-months {
  width: 44px;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-field-focus);
  font: inherit;
  text-align: center;
  padding: 2px 0;
}
.rc-months:focus { outline: none; border-bottom-color: var(--color-field-focus); }

.rc-add-client {
  border: 1px solid var(--color-border);
  background: var(--color-surface-card);
  color: var(--color-accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rc-add-client:hover { background: var(--color-accent-tint); }

.rc-note {
  padding: 12px 16px;
  color: var(--color-text-muted);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
}

/* ── Synthèse KPI ─────────────────────────────────────────────────────────── */
.rc-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.rc-kpi { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
/* Force un saut de ligne (ex. Seuil de rentabilité en 2e ligne quand la vue LCR est chargée). */
.rc-kpi-break { flex-basis: 100%; height: 0; margin: 0; }
.rc-kpi-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rc-kpi-value {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.rc-kpi--strong .rc-kpi-value { font-size: 20px; }
.rc-kpi-sub { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.rc-scroll { overflow-x: auto; padding-bottom: 6px; }

.rc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
}
.rc-table th, .rc-table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border-inner);
  text-align: left;
  vertical-align: middle;
}
.rc-table thead th {
  background: var(--color-surface-th);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.rc-th-sub { font-weight: 500; text-transform: none; letter-spacing: 0; }
.rc-th-num, .rc-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; min-width: 84px; }
/* Colonne Prestation cadrée (≈ 22 %) : les colonnes chiffrées se partagent le reste
   au lieu de laisser la Prestation absorber tout l'espace. */
.rc-th-res { min-width: 190px; width: 22%; }
.rc-th-client { min-width: 150px; }

.rc-client-head { display: flex; align-items: center; gap: 6px; }
.rc-client-name {
  flex: 1 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-field-focus);
  font: inherit;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 0;
}
.rc-client-name:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.rc-client-del {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px;
}
.rc-client-del:hover { color: var(--color-terracotta); }

.rc-res { white-space: nowrap; }
.rc-res-name { display: block; color: var(--color-text); font-weight: 600; }
.rc-res-tr { display: block; color: var(--color-text-muted); font-size: 11px; }
.rc-ccr { color: var(--color-navy); font-weight: 600; }

.rc-cell { padding: 6px 8px; text-align: right; }
.rc-cell-row { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.rc-cell-x { color: var(--color-text-muted); font-size: 11px; }
.rc-in {
  width: 52px;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-field-focus);
  font: inherit;
  text-align: right;
  padding: 2px 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.rc-in:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.rc-in::placeholder { color: var(--color-text-muted); opacity: 0.6; }
.rc-cell-margin { text-align: right; font-size: 11px; margin-top: 2px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.rc-col-idle { background: color-mix(in srgb, var(--color-canvas) 40%, transparent); }
.rc-col-res { background: var(--color-accent-tint); }
.rc-idle-h { display: block; font-size: 11px; opacity: 0.8; }

.rc-foot td {
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  background: var(--color-accent-tint-strong);
  font-weight: 700;
}
.rc-foot .rc-res { color: var(--color-navy); text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }

/* ── Synthèse : filtre + drill personnes ─────────────────────────────────────── */
.rc-synth-actions { display: flex; align-items: center; gap: 12px; }
.rc-drill-toggle {
  border: none; background: transparent; cursor: pointer; color: var(--color-text-muted);
  font-size: 11px; width: 16px; padding: 0; margin-right: 4px; vertical-align: middle;
  opacity: 0; transition: opacity 0.12s ease;
}
/* Chevron visible seulement au survol de la ligne (ou si le service est déplié). */
.rc-table tbody tr:hover .rc-drill-toggle,
.rc-drill-toggle.is-open { opacity: 1; }
.rc-drill-toggle:hover { color: var(--color-accent); }
.rc-drill-row td { background: var(--color-surface-page); border-bottom: 1px solid var(--color-border-inner); }
.rc-drill-cell { padding-left: 34px !important; white-space: nowrap; }
.rc-drill-name { color: var(--color-text); font-weight: 500; }
.rc-drill-grp { color: var(--color-text-muted); font-size: 11px; margin-left: 8px; }

/* ── Proto hub : grille de saisie collable + analyse drill ─────────────────── */
.rc-hint, .rc-empty {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 10px 4px 14px;
}
.rc-empty { padding: 24px 4px; }
.rc-link {
  border: none; background: none; padding: 0;
  color: var(--color-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}

/* Grille de saisie : 1re colonne figée, scroll horizontal assumé */
.rc-grid { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: "Inter", system-ui, sans-serif; font-size: 13px; }
.rc-grid th, .rc-grid td { padding: 7px 10px; border-bottom: 1px solid var(--color-border-inner); white-space: nowrap; }
.rc-grid thead th { background: var(--color-surface-th); color: var(--color-text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border); text-align: right; }
/* En-têtes de prestation : sur 2 lignes (wrap) → colonnes plus étroites.
   Sélecteur `.rc-grid th.rc-th-prod` pour battre `.rc-grid th { white-space: nowrap }`. */
.rc-grid th.rc-th-prod { min-width: 62px; max-width: 88px; white-space: normal; line-height: 1.15; vertical-align: bottom; }
.rc-sticky { position: sticky; left: 0; z-index: 2; background: var(--color-surface-card);
  text-align: left !important; box-shadow: 1px 0 0 var(--color-border); min-width: 190px; }
.rc-grid thead .rc-sticky { z-index: 3; background: var(--color-surface-th); }
.rc-grid tbody .rc-sticky { background: var(--color-surface-card); }
.rc-col-sep { border-left: 1px solid var(--color-border); }
/* En-têtes triables (Affectation Temps) : cliquables, indicateur seulement sur la colonne active. */
.rc-th-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.rc-th-sortable:hover { color: var(--color-accent); }

.rc-param { width: 100%; border-collapse: collapse; font-family: "Inter", system-ui, sans-serif; font-size: 13px; }
.rc-param th, .rc-param td { padding: 8px 10px; border-bottom: 1px solid var(--color-border-inner); text-align: left; }
.rc-param thead th { background: var(--color-surface-th); color: var(--color-text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.rc-param-in { width: 100%; border: none; border-bottom: 1px solid transparent; background: transparent;
  color: var(--color-field-focus); font: inherit; padding: 3px 0; }
.rc-param-in--num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.rc-param-in:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.rc-param-in::placeholder { color: var(--color-text-muted); opacity: 0.6; }

/* Analyse : lignes groupe (drill) */
.rc-grp-row { cursor: pointer; }
.rc-grp-row:hover { background: var(--color-accent-tint); }
.rc-grp-row .rc-res-name { font-weight: 700; color: var(--color-navy); }
.rc-caret { display: inline-block; width: 14px; color: var(--color-text-muted); }
.rc-drill-row td { background: color-mix(in srgb, var(--color-canvas) 25%, transparent); font-size: 12px; }
.rc-res--drill { padding-left: 26px !important; color: var(--color-text); }

/* Barre de saisie : filtre segment + tri colonnes */
.rc-saisie-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 4px 4px 14px; }
.rc-filter { display: inline-flex; align-items: center; gap: 6px; }
.rc-filter-lbl { font-family: "Inter", system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.rc-select { border: 1px solid var(--color-border); background: var(--color-surface-card);
  color: var(--color-text); border-radius: 6px; padding: 4px 8px;
  font-family: "Inter", system-ui, sans-serif; font-size: 13px; }
.rc-select:focus { outline: none; border-color: var(--color-accent); }
.rc-hint--inline { padding: 0; margin: 0; }

.rc-th-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.rc-th-sortable:hover { color: var(--color-accent); }

/* Modal d'import */
.rc-modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-navy) 45%, transparent);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.rc-modal { background: var(--color-surface-card); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  width: min(880px, 100%); max-height: 88vh; display: flex; flex-direction: column; font-family: "Inter", system-ui, sans-serif; }
.rc-modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.rc-modal-title { font-family: "Fraunces", Georgia, serif; font-size: 17px; color: var(--color-navy); }
.rc-modal-body { padding: 16px 18px; overflow-y: auto; }
.rc-import-ta { width: 100%; min-height: 200px; border: 1px solid var(--color-border); border-radius: 8px;
  padding: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; resize: vertical; background: var(--color-surface-page); }
.rc-import-ta:focus { outline: none; border-color: var(--color-accent); }
.rc-modal-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.rc-import-summary { font-size: 13px; color: var(--color-text); margin: 0 0 14px; }

.rc-map-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; }
.rc-map-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 8px; }
.rc-map-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--color-border-inner); }
.rc-map-src { font-size: 13px; color: var(--color-text); }
.rc-map-row--miss { background: color-mix(in srgb, var(--color-terracotta) 8%, transparent); }
.rc-map-row--miss .rc-map-src { color: var(--color-terracotta); font-weight: 600; }

/* Personne sur UNE ligne + colonnes Groupe/TR distinctes + resserrage */
.rc-grid th, .rc-grid td { padding: 5px 8px; }
.rc-sticky { min-width: 128px; }
.rc-th-prod { min-width: 64px; }
.rc-in { width: 44px; }
.rc-th-grp { text-align: left !important; }
.rc-grp { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.rc-res .rc-res-name { font-size: 13px; }
.rc-tr { color: var(--color-text-muted); }

.rc-count { font-weight: 400; color: var(--color-text-muted); font-size: 12px; }

/* Chevron drill : devant le nom du groupe, révélé au survol de la ligne */
.rc-grp-cell { display: inline-flex; align-items: baseline; gap: 5px; }
.rc-grp-cell .rc-res-name { display: inline; }
.rc-caret { opacity: 0; transition: opacity .12s ease; }
.rc-grp-row:hover .rc-caret { opacity: 1; }

/* Synthèse 2-étapes : sous-total segment + ligne Interne (idle) */
.rc-subtotal td { background: var(--color-accent-tint); font-weight: 700; border-top: 1px solid var(--color-border); }
.rc-subtotal .rc-res { color: var(--color-navy); }
.rc-interne td { background: color-mix(in srgb, var(--color-canvas) 40%, transparent); }
.rc-interne .rc-res-name, .rc-interne .rc-res { color: var(--color-text-muted); font-weight: 600; }

/* Segment sur une ligne distincte, au-dessus du nom de prestation (en-tête Saisie) */
.rc-th-seg { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: none; color: var(--color-accent); margin-bottom: 3px; }

/* Cash Outlook (Treasury → Summary) styles.
 * Scoped under .synth-tab to keep the rules from leaking into the
 * other treasury sub-tabs. */

.synth-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Chart ─────────────────────────────────────────────────────────── */
.synth-chart {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.synth-chart__title {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  font-weight: 700;
  /* Bandeau bleu standard (charte var(--color-surface-card)), bleed jusqu'aux bords (card padding 12/16). */
  margin: -12px -16px 8px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.synth-chart__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.synth-filter-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 14px;
  border: 1.5px solid #D6D3D1;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-family: "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.synth-filter-pill.is-active {
  color: var(--color-text);
  font-weight: 500;
}
.synth-filter-pill:hover { opacity: 0.85; }
.synth-filter-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.synth-filter-pill__sep {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 2px 3px;
}

/* Comparer avec — rangée de chips sous les filtres de vue (vue Total). */
.synth-chart__compare {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: -2px 0 10px;
}
.synth-chart__compare-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 2px;
}
.synth-cmp-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 14px;
  border: 1.5px solid #D6D3D1;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-family: "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.synth-cmp-pill.is-active { color: var(--color-text); font-weight: 500; }
.synth-cmp-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.synth-cmp-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.synth-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  text-transform: uppercase;
}
.synth-chart__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.swatch {
  width: 14px;
  height: 12px;
  display: inline-block;
  border-radius: 2px;
}
.swatch--enc { background: #9DC076; border: 1px solid #5C7A3E; }
.swatch--dec { background: #E6B5A6; border: 1px solid #BA5D4A; }
.swatch--flux { background: repeating-linear-gradient(90deg, #2B203E 0 5px, transparent 5px 9px); height: 3px; border-radius: 0; }
.swatch--solde { background: #2B203E; height: 3px; border-radius: 0; }

.synth-chart__tooltip {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(43, 32, 62, 0.14);
  font-size: 11px;
  min-width: 220px;
}
.synth-chart__tooltip-month {
  font-weight: 700;
  font-size: 12px;
  color: var(--color-navy);
  margin-bottom: 6px;
}
.synth-chart__tooltip-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.synth-chart__tooltip-row > :first-child {
  /* swatch slot */
}
.synth-chart__tooltip-row > :nth-child(2) {
  color: var(--color-text);
  font-family: inherit;
}
.synth-chart__tooltip-row > :nth-child(3) {
  color: var(--color-navy);
  font-weight: 600;
}
.synth-chart__tooltip-total {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--color-navy);
}

/* ── KPI banner ────────────────────────────────────────────────────── */
.synth-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.synth-kpi {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.synth-kpi__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.synth-kpi__value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}
.synth-kpi__hint {
  font-size: 10px;
  color: var(--color-text-muted);
}
.synth-kpi--sage  .synth-kpi__value { color: var(--color-sage); }
.synth-kpi--terra .synth-kpi__value { color: var(--color-terracotta); }
.synth-kpi--navy  .synth-kpi__value { color: var(--color-navy); }

/* ── Plan de trésorerie table ──────────────────────────────────────── */
.synth-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 12px;
}
.synth-table thead th {
  background: var(--color-surface-card);   /* charte — thead bleu-gris (était navy) */
  color: var(--color-navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 8px;
  text-align: right;
  white-space: nowrap;
  border-bottom: none;
}
.synth-table thead th .synth-table__year {
  color: rgba(34, 43, 69, 0.6);   /* muté foncé (thead bleu-gris, plus navy) */
}
.synth-table thead th.synth-table__row-label {
  text-align: left;
  padding-left: 16px;
  width: 220px;
}
.synth-table__month {
  width: 96px;
}
.synth-table__year {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
}
.synth-table__total-col {
  width: 110px;
  border-left: 1px solid var(--color-border);
}

.synth-table__row td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid #F4EFE5;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
}
.synth-table__row-label {
  text-align: left !important;
  font-family: inherit !important;
  padding-left: 16px !important;
  font-weight: 600;
  color: var(--color-navy);
}
.synth-table__row-label--child {
  padding-left: 28px !important;
  font-weight: 500;
}

.synth-table__section td {
  padding: 6px 16px;
  background: #EDE8DF;
  text-align: left !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  font-family: inherit !important;
}

.synth-table__cell {
  /* defaults */
}
.synth-table__cell--zero {
  color: var(--stone-400);
}
.synth-table__cell.is-pos { color: var(--color-sage); }
.synth-table__cell.is-neg { color: var(--color-terracotta); }
.synth-table__cell.is-navy { color: var(--color-navy); font-weight: 600; }
.synth-table__cell.is-amber { color: var(--color-amber); }

.synth-table__row--expandable {
  cursor: pointer;
  transition: background 0.1s;
}
.synth-table__row--expandable:hover td {
  background: var(--color-highlight);
}
.synth-table__caret {
  display: inline-block;
  width: 14px;
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 700;
}
.synth-table__row--expandable:hover .synth-table__caret {
  color: var(--color-input);
}
.synth-table__row-label--subdetail {
  padding-left: 52px !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 11px;
  color: var(--stone-500) !important;
}
.synth-table__row--subdetail td {
  background: #FBF7EF;
  border-bottom: 1px solid #F4EFE5;
}
.synth-table__row--subdetail .synth-table__cell {
  font-style: italic;
  color: var(--stone-500);
  font-size: 11px;
}
.synth-table__row--italic td {
  font-style: italic;
  color: var(--stone-500);
}
.synth-table__row--italic .synth-table__row-label {
  font-style: italic;
}

.synth-table__row--subtotal td {
  font-weight: 700;
  background: #FBF7EF;
  border-top: 1px solid var(--color-border);
}
.synth-table__row--enc-total td {
  background: var(--sage-light);
}
.synth-table__row--dec-total td {
  background: var(--terracotta-light);
}

.synth-table__row--solde-debut td {
  font-weight: 700;
  background: var(--color-navy);
  color: white;
  border-bottom: 1px solid var(--navy-dark);
}
.synth-table__row--solde-debut .synth-table__row-label {
  color: white;
}
.synth-table__row--solde-debut .synth-table__cell.is-pos { color: #C7E1A5; }
.synth-table__row--solde-debut .synth-table__cell.is-neg { color: #FBD4C9; }
.synth-table__row--solde-debut .synth-table__cell.is-navy { color: white; }

.synth-table__row--summary td {
  font-weight: 700;
  background: #FBF7EF;
  border-top: 1px solid var(--color-border);
}
.synth-table__row--summary-enc td {
  background: var(--sage-light);
}
.synth-table__row--summary-dec td {
  background: var(--terracotta-light);
}

.synth-table__row--fluxnet td {
  font-weight: 700;
  background: var(--color-bg);
  border-top: 2px solid var(--color-navy);
}

.synth-table__row--solde-fin td {
  background: var(--color-navy);
  color: white;
  font-weight: 700;
  border-bottom: none;
}
.synth-table__row--solde-fin .synth-table__row-label {
  color: white;
}
.synth-table__row--solde-fin .synth-table__cell.is-pos { color: #C7E1A5; }
.synth-table__row--solde-fin .synth-table__cell.is-neg { color: #FBD4C9; }

/* ── Header bar with print button ─────────────────────────────────────── */
.synth-tab__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.synth-print-btn {
  flex: none;
  border: 1px solid #d6d3d1;
  border: 1px solid var(--color-border, #d6d3d1);
  background: #fff;
  background: var(--color-surface, #fff);
  color: #1c1917;
  color: var(--color-text, #1c1917);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.synth-print-btn:hover { background: #faf9f7; }

/* ── Print mode : A4 landscape, all groups expanded, table only ───────── */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.cash-printing { background: #fff !important; }

  /* Hide everything outside the synthesis tab content */
  body.cash-printing > *,
  body.cash-printing .logike-page-wrap > *,
  body.cash-printing .treasury > *:not(.treasury__layout),
  body.cash-printing .treasury__layout > *:not(.treasury__content) {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  body.cash-printing .treasury__content,
  body.cash-printing .treasury__content * {
    visibility: visible !important;
  }
  body.cash-printing .treasury__content {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide the chart, button, and interactive header parts to free vertical space */
  body.cash-printing .cash-no-print,
  body.cash-printing .synth-chart { display: none !important; }

  /* Hide caret (▸ ▾) — table is forced-expanded in JS */
  body.cash-printing .synth-table__caret { display: none !important; }

  /* Compress KPIs row */
  body.cash-printing .synth-kpis {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  body.cash-printing .synth-kpis > * {
    padding: 4px 8px !important;
  }

  /* Compress the table to fit 12 months + sub-lines on one page */
  body.cash-printing .synth-table {
    font-size: 7.5pt !important;
    width: 100% !important;
  }
  body.cash-printing .synth-table th,
  body.cash-printing .synth-table td {
    padding: 1.5px 4px !important;
    font-size: 7.5pt !important;
    line-height: 1.2 !important;
  }
  body.cash-printing .synth-table__row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Hide the row-clickable cursor hint in print */
  body.cash-printing .synth-table__row--expandable {
    cursor: default !important;
  }
}

/* The print button is hidden on screen only inside print mode */
@media screen {
  .cash-no-print { /* visible on screen */ }
}

/* Mini-card « Durée de projection » au-dessus du graphique. */
.synth-horizon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  border-radius: var(--radius, 8px);
}
.synth-horizon__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-family: "Inter", system-ui, sans-serif;
}
.synth-horizon__opts { display: inline-flex; gap: 4px; }
.synth-horizon__btn {
  appearance: none;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  background: transparent;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  font-family: "Inter", system-ui, sans-serif;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  cursor: pointer;
}
.synth-horizon__btn.is-active {
  background: #2B203E;
  background: var(--color-navy, #2B203E);
  border-color: #2B203E;
  border-color: var(--color-navy, #2B203E);
  color: #fff;
  font-weight: 600;
}

/* Champ libre de durée de projection (1–12 mois) à côté des raccourcis. */
.synth-horizon__sep {
  width: 1px;
  align-self: stretch;
  background: #E7E5E4;
  background: var(--color-border, #E7E5E4);
  margin: 2px 4px;
}
.synth-horizon__input {
  width: 48px;
  height: 26px;
  box-sizing: border-box;
  text-align: right;
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 6px;
  color: #2563EB;
  color: var(--color-value, #2563EB);
  font-family: "Inter", system-ui, sans-serif;
}
.synth-horizon__unit {
  font-size: 13px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-family: "Inter", system-ui, sans-serif;
}

/* Curseur de durée de projection (1 à 12 mois). */
.synth-horizon__slider {
  width: 180px; height: 4px; appearance: none;
  background: var(--color-accent-soft); border-radius: 3px; outline: none; cursor: pointer;
  vertical-align: middle;
}
.synth-horizon__slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-accent); border: 2px solid var(--color-surface-card); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.synth-horizon__slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent);
  border: 2px solid var(--color-surface-card); cursor: pointer;
}
.synth-horizon__value {
  display: inline-block; min-width: 1.6rem; text-align: right; margin-left: 10px;
  font-weight: 700; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

/* Billing tab — visual styles for the Facturation onglet.
 * Imported once via RevenuesTab.js. Scoped under .billing-tab so the rules
 * stay isolated from .tres-edit-table (which applies broader input styling
 * across other treasury tabs). */

.billing-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Overview : KPIs (gauche, 420 px = même largeur que la liste) + graphique (droite) ── */
.billing-overview {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: stretch;
}

/* Stats 2×2 grid dans la colonne gauche */
.billing-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  align-content: start;
}
/* Variante : 4 tuiles sur une seule ligne (pleine largeur, sans graphique) */
.billing-stats--row {
  grid-template-columns: repeat(4, 1fr);
}
.billing-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  border-radius: var(--radius, 8px);
}
.billing-stat__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-family: "Inter", system-ui, sans-serif;
}
.billing-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.billing-stat__hint {
  font-size: 11px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-family: "Inter", system-ui, sans-serif;
}
@media (max-width: 900px) {
  .billing-overview { grid-template-columns: 1fr; }
  .billing-stats { grid-template-columns: repeat(2, 1fr); }
  .billing-stats--row { grid-template-columns: repeat(2, 1fr); }
}

/* Ligne « Total » en tête de la liste : agrégat lecture seule, accent navy. */
.billing-list__item--total {
  border-left-color: #2B203E;
  border-left-color: var(--color-navy, #2B203E);
  background: #F4F2EF;
}
.billing-list__item--total .billing-list__item-label {
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}
.billing-list__item-total-static {
  font-size: 14px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}

/* ── BillingChart ──────────────────────────────────────────────────────── */
.billing-chart {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 8px 4px;
  position: relative;
}
.billing-chart--empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  font-style: italic;
}
.billing-chart__year-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: 4px 0 2px;
}
.billing-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 16px 4px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}
.billing-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.billing-chart__legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.billing-chart__legend-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  text-transform: uppercase;
}
.billing-chart__tooltip {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(43, 32, 62, 0.14);
  font-size: 11px;
  min-width: 220px;
}
.billing-chart__tooltip-month {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-navy);
  margin-bottom: 6px;
}
.billing-chart__tooltip-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.billing-chart__tooltip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.billing-chart__tooltip-label {
  color: var(--color-text);
}
.billing-chart__tooltip-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--color-navy);
}
.billing-chart__tooltip-total {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--color-navy);
}

/* ── KpiBanner ─────────────────────────────────────────────────────────── */
.billing-kpi-banner {
  margin: 0;
}
.tres-kpi__unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 2px;
  font-family: inherit;
  letter-spacing: 0.02em;
}

/* ── Split layout : list (left) + detail panel (right) ────────────────── */
.billing-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.billing-list {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.billing-list__header {
  padding: 10px 14px;
  background: var(--color-surface-card);   /* charte — en-tête bleu-gris (était beige #EDE8DF) */
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.billing-list__count {
  font-weight: 600;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.billing-list__divider {
  color: var(--stone-400);
}
.billing-list__grand-total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-navy);
}
.billing-list__items {
  display: flex;
  flex-direction: column;
  max-height: 540px;
  overflow-y: auto;
}
.billing-list__empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}
.billing-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #F4EFE5;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.billing-list__item:last-child {
  border-bottom: none;
}
.billing-list__item:hover {
  background: var(--color-highlight);
}
.billing-list__item:focus-visible {
  outline: 2px solid var(--color-input);
  outline-offset: -2px;
}
.billing-list__item--selected {
  background: var(--sage-light);
}
.billing-list__item-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.billing-list__item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.billing-list__item--selected .billing-list__item-label {
  color: var(--sage-dark);
}
.billing-list__item-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
}
.billing-list__item-total-input {
  width: 96px !important;
  padding: 2px 4px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: left !important;
  font-size: 11px !important;
  color: var(--color-navy) !important;
  font-weight: 600 !important;
}
.billing-list__item-total-input:hover:not(:disabled) {
  background: white !important;
  border-color: var(--color-border) !important;
}
.billing-list__item-total-input:focus {
  background: var(--color-input-bg) !important;
  border-color: var(--color-input) !important;
  color: var(--color-input) !important;
}
.billing-list__item--selected .billing-list__item-total-input {
  color: var(--sage-dark) !important;
}
.billing-list__item-divider {
  color: var(--stone-400);
}
.billing-list__item-cv {
  color: var(--color-text-muted);
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.billing-list__item-cv-suffix {
  font-weight: 400;
}
.billing-list__item-cv--warn {
  color: var(--color-amber);
}
.billing-list__sparkline {
  flex-shrink: 0;
}
.billing-list__item-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.billing-list__reorder-btn {
  width: 20px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.billing-list__reorder-btn:hover:not(:disabled) {
  background: white;
  border-color: var(--color-border);
  color: var(--color-navy);
}
.billing-list__reorder-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ── Detail panel (right) ──────────────────────────────────────────────── */
.billing-detail {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.billing-detail--empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: italic;
}
.billing-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
}
/* Colonne gauche : titre + sous-titre puis contrôles, sans vide intercalé. */
.billing-detail__left {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Coefficient de variation sous le graphique éditable. */
.billing-detail__cv {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}
.billing-detail__cv-value {
  font-size: 14px;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  font-family: "Fraunces", Georgia, serif;
}
.billing-detail__cv--warn .billing-detail__cv-value {
  color: #B8862A;
  color: var(--color-amber, #B8862A);
}
.billing-detail__cv-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-family: "Inter", system-ui, sans-serif;
}
/* Aide sous le filet d'en-tête, au-dessus du graphique éditable. */
.billing-detail__chart-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #B8862A;
  color: var(--color-amber, #B8862A);
  font-style: italic;
  font-family: "Inter", system-ui, sans-serif;
}
.billing-detail__chart-hint-lock {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 3px;
}
/* Bloc central de l'en-tête : rangée pastilles puis rangée coût variable. */
.billing-detail__mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Deux rangées alignées : pastilles/Délai/TVA puis coût marchandise. */
.billing-detail__header-controls,
.billing-detail__vc {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 30px;
}
.billing-detail__vc { padding-top: 0; }
.billing-detail__vc-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-weight: 600;
  font-family: "Inter", system-ui, sans-serif;
}
.billing-detail__vc-error {
  font-size: 11px;
  color: #BA5D4A;
  color: var(--color-terracotta, #BA5D4A);
}
/* Pastille de nature : Prestation / Marchandise / Mix (+ % marchandise) */
.billing-detail__nature {
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-detail__nature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1.5px solid #2B203E;
  border: 1.5px solid var(--color-navy, #2B203E);
  border-radius: 14px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", system-ui, sans-serif;
  cursor: pointer;
}
.billing-detail__nature-pill:disabled { cursor: default; opacity: 0.6; }
.billing-detail__nature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.billing-detail__nature-pct {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
}
.billing-detail__nature-pct input {
  width: 54px;
  height: 26px;
  box-sizing: border-box;
  text-align: right;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 4px;
  color: #2563EB;
  color: var(--color-value, #2563EB);
}
/* Aligne la hauteur des selects sur les inputs dans l'en-tête. */
.billing-detail__mid select {
  height: 26px;
  box-sizing: border-box;
}
.billing-detail__control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.billing-detail__control select {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: white;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-input);
  cursor: pointer;
  text-transform: none;
}
.billing-detail__control select:disabled {
  background: #F0EDE6;
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.billing-detail__control--check {
  cursor: pointer;
}
.billing-detail__control--check input[type="checkbox"] {
  accent-color: var(--color-navy);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}
.billing-detail__lock {
  margin-top: 6px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.billing-detail__lock-label {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.billing-detail__lock:hover:not(:disabled) {
  background: var(--color-highlight);
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.billing-detail__lock--on {
  background: var(--color-navy);
  color: white;
  border-color: var(--color-navy);
}
.billing-detail__lock--on:hover:not(:disabled) {
  background: var(--navy-dark);
  color: white;
}
.billing-detail__lock:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Seasonality picker ────────────────────────────────────────────────── */
.billing-profile {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.billing-profile__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.billing-profile__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.billing-profile__btn {
  padding: 5px 12px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-input);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.billing-profile__btn:hover:not(:disabled) {
  background: #DCE6FC;
  border-color: var(--color-input);
}
.billing-profile__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.billing-profile__btn--custom {
  background: var(--sage-light);
  border-color: var(--sage-mid);
  color: var(--sage-dark);
}
.billing-profile__btn--custom:hover:not(:disabled) {
  background: #E2EED1;
  border-color: var(--color-sage);
}
.billing-profile__btn--add {
  background: white;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}
.billing-profile__btn--add:hover:not(:disabled) {
  background: var(--color-highlight);
  border-color: var(--color-navy);
  border-style: solid;
  color: var(--color-navy);
}
.billing-profile__custom-wrap {
  display: inline-flex;
  align-items: stretch;
}
.billing-profile__custom-wrap .billing-profile__btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.billing-profile__edit,
.billing-profile__del {
  padding: 0 7px;
  background: var(--sage-light);
  border: 1px solid var(--sage-mid);
  border-right: none;
  color: var(--sage-dark);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.billing-profile__edit:hover:not(:disabled) {
  background: #E2EED1;
  color: var(--sage-dark);
}
.billing-profile__del {
  border-right: 1px solid var(--sage-mid);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  font-size: 13px;
}
.billing-profile__del:hover:not(:disabled) {
  background: var(--terracotta-light);
  border-color: var(--terracotta-mid);
  color: var(--color-terracotta);
}

/* ── Profile editor modal ──────────────────────────────────────────────── */
.profile-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 32, 62, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.profile-editor {
  background: var(--color-card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(43, 32, 62, 0.3);
  overflow: hidden;
}
.profile-editor__header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}
.profile-editor__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}
.profile-editor__close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.profile-editor__close:hover {
  color: var(--color-navy);
}
.profile-editor__hint {
  padding: 12px 24px 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}
.profile-editor__name-field {
  padding: 12px 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-editor__name-field span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.profile-editor__name-field input {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  background: white;
}
.profile-editor__name-field input:focus {
  outline: none;
  border-color: var(--color-input);
  background: var(--color-input-bg);
}
.profile-editor__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px 16px;
  gap: 10px 16px;
  padding: 16px 24px;
}
.profile-editor__month {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-editor__month > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0.04em;
}
.profile-editor__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.profile-editor__input-wrap input {
  flex: 1 1;
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-input);
  background: #FBF7EF;
  text-align: right;
  -moz-appearance: textfield;
}
.profile-editor__input-wrap input::-webkit-outer-spin-button,
.profile-editor__input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.profile-editor__input-wrap input:focus {
  outline: none;
  border-color: var(--color-input);
  background: var(--color-input-bg);
}
.profile-editor__unit {
  position: absolute;
  right: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.profile-editor__footer {
  padding: 14px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.profile-editor__btn-secondary {
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.profile-editor__btn-secondary:hover {
  background: var(--color-highlight);
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.profile-editor__sum {
  flex: 1 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.profile-editor__sum.is-ok {
  color: var(--color-sage);
}
.profile-editor__sum.is-warn {
  color: var(--color-amber);
}
.profile-editor__sum-note {
  font-weight: 400;
  color: var(--color-text-muted);
  font-family: inherit;
  margin-left: 4px;
}
.profile-editor__actions {
  display: flex;
  gap: 8px;
}
.profile-editor__btn-cancel {
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text);
}
.profile-editor__btn-cancel:hover {
  background: var(--color-highlight);
}
.profile-editor__btn-save {
  padding: 8px 18px;
  background: var(--color-navy);
  border: 1px solid var(--color-navy);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}
.profile-editor__btn-save:hover:not(:disabled) {
  background: var(--navy-dark);
}
.profile-editor__btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.billing-detail__title-block {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.billing-detail__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-family: inherit;
  width: 100%;
}
.billing-detail__title:hover {
  background: var(--color-highlight);
}
.billing-detail__title:focus {
  outline: none;
  background: var(--color-input-bg);
  border-color: var(--color-input);
  color: var(--color-input);
}
.billing-detail__subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: inherit;
  font-style: italic;
  width: 100%;
}
.billing-detail__subtitle:hover {
  background: var(--color-highlight);
}
.billing-detail__subtitle:focus {
  outline: none;
  background: var(--color-input-bg);
  border-color: var(--color-input);
  color: var(--color-input);
  font-style: normal;
}
.billing-detail__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}
.billing-detail__total-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.billing-detail__total-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}
.billing-detail__total-input {
  width: auto !important;
  min-width: 120px;
  padding: 2px 6px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-feature-settings: "tnum" !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-navy) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: right !important;
}
.billing-detail__total-input:hover:not(:disabled) {
  background: var(--color-highlight) !important;
  border-color: var(--color-border) !important;
}
.billing-detail__total-input:focus {
  background: var(--color-input-bg) !important;
  border-color: var(--color-input) !important;
  color: var(--color-input) !important;
  outline: none;
}


/* ── Editable sparkline ────────────────────────────────────────────────── */
.billing-sparkline {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 8px 4px;
}
.billing-sparkline__svg {
  display: block;
}
.billing-sparkline__svg text {
  -webkit-user-select: none;
          user-select: none;
}

.billing-detail__values-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.billing-detail__values-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 8px 12px;
  gap: 8px 12px;
}
.billing-detail__month {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.billing-detail__month-label {
  font-size: 11px;
  color: var(--color-text-muted);
}
.billing-detail__month .billing-amount-input {
  border: 1px solid var(--color-border);
  background: #FBF7EF;
}

.billing-detail__actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.billing-detail__action {
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-text);
}
.billing-detail__action:hover {
  background: var(--color-highlight);
}
.billing-detail__action--del {
  color: var(--color-terracotta);
}
.billing-detail__action--del:hover {
  background: var(--terracotta-light);
  border-color: var(--terracotta-mid);
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.billing-table {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.billing-table thead th {
  background: #EDE8DF;
  color: var(--color-navy);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 6px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.billing-table thead th.billing-table__label-col {
  text-align: left;
  padding-left: 16px;
  min-width: 200px;
}
.billing-table thead th.billing-table__month-col   { width: 86px; min-width: 86px; }
.billing-table thead th.billing-table__total-col   { text-align: right; width: 96px; padding-right: 12px; }
.billing-table thead th.billing-table__lag-col     { width: 56px; }
.billing-table thead th.billing-table__vat-col     { width: 44px; }
.billing-table thead th.billing-table__actions-col { width: 64px; }
.billing-table tbody tr + tr td {
  border-top: 1px solid #F4EFE5;
}
.billing-table__empty {
  padding: 30px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  font-style: italic;
}

/* ── RevenueRow ────────────────────────────────────────────────────────── */
.billing-row td {
  vertical-align: middle;
}
.billing-row__label-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 8px 8px 12px;
  border-left: 3px solid transparent;
}
.billing-row__label-input {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: inherit;
  width: 100%;
  max-width: 220px;
}
.billing-row__label-input:hover {
  background: var(--color-highlight);
}
.billing-row__label-input:focus {
  background: var(--color-input-bg);
  border-color: var(--color-input);
  color: var(--color-input);
  outline: none;
}
.billing-row__detail-input {
  font-size: 11px;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 6px;
  font-family: inherit;
  font-style: italic;
  width: 100%;
  max-width: 220px;
  border-radius: 3px;
}
.billing-row__detail-input:hover {
  background: var(--color-highlight);
}
.billing-row__detail-input:focus {
  background: var(--color-input-bg);
  border-color: var(--color-input);
  color: var(--color-input);
  font-style: normal;
  outline: none;
}
.billing-row__month-cell {
  padding: 4px 2px;
}
.billing-row__total-cell {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 6px 12px 6px 4px;
  white-space: nowrap;
}
.billing-row__lag-cell {
  padding: 4px;
  text-align: center;
}
.billing-row__lag-select {
  width: 44px;
  padding: 4px 4px;
  font-size: 12px;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: white;
  color: var(--color-input);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.billing-row__lag-select:hover {
  background: var(--color-highlight);
}
.billing-row__lag-select:focus {
  outline: none;
  border-color: var(--color-input);
  background: var(--color-input-bg);
}
.billing-row__lag-select:disabled {
  background: #F0EDE6;
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.billing-row__vat-cell {
  text-align: center;
  padding: 4px;
}
.billing-row__vat-checkbox {
  accent-color: var(--color-navy);
  width: 14px;
  height: 14px;
  cursor: pointer;
  margin: 0;
}
.billing-row__actions-cell {
  padding: 4px;
  text-align: center;
  white-space: nowrap;
}
.billing-row__action {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.billing-row__action:hover {
  background: var(--color-highlight);
}
.billing-row__action--dup:hover {
  color: var(--color-navy);
}
.billing-row__action--del:hover {
  background: var(--terracotta-light);
  color: var(--color-terracotta);
}
.billing-row__action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: none;
}

/* ── AmountInput ───────────────────────────────────────────────────────── */
.billing-amount-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-input);
  border-radius: 3px;
  cursor: text;
}
.billing-amount-input--right {
  text-align: right;
}
.billing-amount-input::placeholder {
  color: var(--stone-300);
  opacity: 1;
}
.billing-amount-input:hover {
  background: #FBF7EF;
  border-color: var(--stone-200);
}
.billing-amount-input:focus {
  outline: none;
  background: var(--color-input-bg);
  border-color: var(--color-input);
}
.billing-amount-input:disabled {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
}

/* ── Header bar (above the table) ──────────────────────────────────────── */
.billing-table__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 4px 0 -4px;
}
.billing-clear-btn {
  padding: 9px 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  color: var(--color-terracotta);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.billing-clear-btn:hover {
  background: var(--terracotta-light);
  border-color: var(--terracotta-mid);
  color: var(--terracotta-dark);
}

.billing-add-menu {
  position: relative;
  display: inline-block;
}
.billing-add-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--color-navy);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
  box-shadow: 0 2px 6px rgba(43, 32, 62, 0.18);
}
.billing-add-menu__trigger:hover:not(:disabled) {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}
.billing-add-menu__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.billing-add-menu__trigger-plus {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.billing-add-menu__chevron {
  font-size: 10px;
  margin-left: 2px;
}
.billing-add-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(43, 32, 62, 0.18);
  min-width: 320px;
  max-width: 380px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  z-index: 50;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.billing-add-menu__divider {
  height: 1px;
  background: var(--color-border);
  margin: 6px 2px;
}
.billing-add-menu__section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 4px 10px 6px;
}
.billing-add-menu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  font-family: inherit;
}
.billing-add-menu__item--compact {
  padding: 6px 10px;
  gap: 0;
}
.billing-add-menu__item:hover {
  background: var(--color-highlight);
}
.billing-add-menu__item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
}
.billing-add-menu__item-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.billing-add-menu__item--blank .billing-add-menu__item-label {
  color: var(--color-text);
}
.billing-add-menu__item--standard {
  background: var(--sage-light);
}
.billing-add-menu__item--standard:hover {
  background: #E2EED1;
}
.billing-add-menu__item--standard .billing-add-menu__item-label {
  color: var(--sage-dark);
}

/* Texte intercalé dans la ligne « Part de marchandises … coût direct … ». */
.billing-detail__vc-text {
  font-size: 11px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-family: "Inter", system-ui, sans-serif;
}

/* Coche « Soumis TVA » sous le bouton Total libre (bloc total, à droite). */
.billing-detail__total-vat { margin-top: 6px; }

/* Ventilation de la ligne « Total » (prestation / marchandise / TVA). */
.billing-detail__breakdown {
  display: flex; flex-direction: column;
  margin-top: 6px; max-width: 420px;
  font-family: "Inter", system-ui, sans-serif;
}
.billing-detail__bd-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; padding: 4px 0;
  border-bottom: 1px solid #eee;
  border-bottom: 1px solid var(--color-border-inner, #eee);
}
.billing-detail__bd-row span { color: #78716C; color: var(--color-text-muted, #78716C); }
.billing-detail__bd-row b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: #2B203E; color: var(--color-navy, #2B203E); }
.billing-detail__bd-row--neg b { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); }
.billing-detail__bd-row--va {
  border-top: 2px solid #DED7CB;
  border-top: 2px solid var(--color-border, #DED7CB); border-bottom: none;
  padding-top: 6px; margin-top: 2px; font-weight: 700;
}
.billing-detail__bd-row--va span,
.billing-detail__bd-row--va b { color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.billing-detail__bd-row--sep {
  border-top: 1px solid #DED7CB;
  border-top: 1px solid var(--color-border, #DED7CB);
  margin-top: 8px; padding-top: 8px;
}

/* Bloc TVA à droite, sous le Total Hors TVA (ligne Total). */
.billing-detail__vat-right {
  margin-top: 14px; min-width: 260px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-family: "Inter", system-ui, sans-serif;
  border-top: 1px solid #DED7CB;
  border-top: 1px solid var(--color-border, #DED7CB); padding-top: 10px;
}
.billing-detail__vat-row { display: flex; justify-content: space-between; gap: 20px; }
.billing-detail__vat-row span { color: #78716C; color: var(--color-text-muted, #78716C); }
.billing-detail__vat-row b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: #2B203E; color: var(--color-navy, #2B203E); }

/* Point de départ — section Planification financière (Soldes / Débiteurs / Dettes).
   Charte : tokens :root uniquement (pas de hex hors charte). */

.sp-placeholder { padding: 2rem; color: var(--color-text-muted); }

.sp-error {
  margin: 0.75rem 0; padding: 0.5rem 0.75rem;
  background: #FCEBEB; color: var(--color-terracotta);
  border: 1px solid var(--color-border); border-radius: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.sp-error button { background: none; border: none; cursor: pointer; font-size: 1rem; color: inherit; }

/* ── Solde initial ──────────────────────────────────────────────────────── */
.sp-soldes-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 1rem; }
/* Cards réduites à 2/3 (coupées d'1/3 à droite), alignées à gauche. */
.sp-soldes-wrap > .std-card { width: 66.66%; min-width: 520px; }

.sp-start { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.sp-start__field { display: flex; flex-direction: column; gap: 3px; }
.sp-start__field span { font-size: 0.75rem; color: var(--color-text-muted); }
.sp-start__field select {
  border: 1px solid var(--color-border); border-radius: 6px; padding: 5px 8px;
  font-size: 0.9rem; color: var(--color-text); background: #fff;
}
.sp-start__note { font-size: 0.85rem; color: var(--color-text-muted); padding-bottom: 6px; }
.sp-anchor { margin-top: 0.7rem; }
.sp-anchor__ok { font-size: 0.85rem; font-weight: 600; color: var(--color-sage); }

.sp-soldes__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0.5rem 0 1.5rem; }
.sp-amount {
  width: 160px; text-align: right; font-size: 1.2rem; font-weight: 600; color: var(--color-input);
  border: 1px solid var(--color-border); border-radius: 7px; padding: 6px 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.sp-amount:disabled { color: var(--color-text-muted); background: var(--color-bg); }
.sp-soldes__unit { color: var(--color-text-muted); font-weight: 600; }
.sp-pull {
  border: 1px solid var(--color-input); background: #fff; color: var(--color-input);
  border-radius: 7px; cursor: pointer; font-size: 0.85rem; padding: 6px 12px;
}
.sp-pull:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--color-border); color: var(--color-text-muted); }
.sp-soldes__src { font-size: 0.75rem; padding: 2px 8px; border-radius: 5px; }
.sp-soldes__src.is-bilan { color: var(--color-sage); background: #EEF3E5; }
.sp-soldes__src.is-manual { color: var(--color-input); background: #EAEFFB; }

.sp-liq { max-width: 460px; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.sp-liq__title { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.sp-liq__table { width: 100%; border-collapse: collapse; }
.sp-liq__table td { padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.sp-liq__total td { font-weight: 600; color: var(--color-navy); border-bottom: none; border-top: 2px solid var(--color-border); padding-top: 10px; }
.sp-liq__empty { color: var(--color-text-muted); font-size: 0.9rem; }

/* ── Planification / Sélection PO ───────────────────────────────────────── */
.sp-level1__empty, .sp-level2__empty { padding: 0.75rem 0; color: var(--color-text-muted); font-size: 0.9rem; }

.sp-link { background: none; border: none; color: var(--color-input); cursor: pointer; padding: 0; font-size: inherit; }
.sp-po-actions { margin-top: 0.75rem; }

/* ── Grille « Postes ouverts (PO) » : mois en colonnes ──────────────────── */
.sp-grid-wrap { overflow-x: auto; }
.sp-grid { border-collapse: collapse; width: 100%; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.sp-grid th, .sp-grid td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.sp-grid thead th {
  font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); text-align: right; vertical-align: bottom;
}
.sp-grid th.po-name-h { text-align: left; }
.sp-grid .num { text-align: right; }
.sp-grid .is-ref { background: #F1F5FB; }
.sp-grid thead th.is-ref { background: #E9EDF4; }
.po-yr { display: block; font-size: 0.62rem; color: var(--color-text-muted); }
.sp-grid .is-neg { color: var(--color-terracotta); }
.sp-grid .is-pos { color: var(--color-navy); }
.sp-grid .is-zero { color: var(--color-text-muted); }

.po-name { display: flex; align-items: center; gap: 0.5rem; }
.po-lbl { color: var(--color-text); }
.po-badge {
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-navy);
  border-radius: 5px; padding: 1px 7px; font-size: 0.72rem; cursor: pointer; white-space: nowrap;
}
.po-badge:hover { background: #E8EEF8; }
.po-badge:disabled { cursor: not-allowed; opacity: 0.6; }
.po-manual { font-size: 0.66rem; color: var(--color-input); border: 1px solid var(--color-border); border-radius: 4px; padding: 0 5px; }
.po-warn { font-size: 0.66rem; color: var(--color-amber); }
.po-rm {
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted);
  border-radius: 5px; cursor: pointer; line-height: 1; padding: 1px 6px; margin-left: auto;
}
.po-rm:disabled { opacity: 0.4; cursor: not-allowed; }

.sp-grid .po-grp td {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); padding-top: 0.7rem; border-bottom: none;
}
.sp-grid .po-grp td.num { font-size: 0.85rem; letter-spacing: 0; }
.sp-grid .po-grp td.num.is-neg { color: var(--color-terracotta); }
.sp-grid .po-grp td.num.is-pos { color: var(--color-navy); }
/* Espacement supplémentaire avant le 2e groupe (décaissements) pour aérer. */
.sp-grid .po-grp--gap td { padding-top: 1.7rem; }
/* Sous-total de groupe, sous les lignes concernées (filet haut, sans filet bas). */
.sp-grid .po-subtotal td {
  font-weight: 600; border-top: 1px solid var(--color-border); border-bottom: none;
}
.sp-grid .po-subtotal td.is-pos { color: var(--color-navy); }
.sp-grid .po-subtotal td.is-neg { color: var(--color-terracotta); }
.sp-grid tfoot td { font-weight: 600; border-top: 2px solid var(--color-border); border-bottom: none; }
.sp-grid tfoot .po-net td { color: var(--color-navy); }
.sp-grid tfoot .po-cum td { color: var(--color-text-muted); }

/* ── Popover / modale d'édition de la règle ─────────────────────────────── */
.sp-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(43, 32, 62, 0.35);
  display: flex; align-items: center; justify-content: center;
}
.sp-modal__box { background: #fff; border-radius: 12px; width: 460px; max-width: 92vw; padding: 1.25rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); }
.sp-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.sp-modal__title { font-weight: 600; color: var(--color-navy); }
.sp-modal__x { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--color-text-muted); }
.sp-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; margin-bottom: 1rem; }
.sp-seg button { background: #fff; border: none; cursor: pointer; padding: 5px 14px; font-size: 0.85rem; color: var(--color-text-muted); border-right: 1px solid var(--color-border); }
.sp-seg button:last-child { border-right: none; }
.sp-seg button.is-active { background: var(--color-navy); color: #fff; }
.sp-tranches { display: flex; flex-direction: column; gap: 8px; }
.sp-tranche { display: flex; align-items: center; gap: 6px; }
.sp-tranche select { border: 1px solid var(--color-border); border-radius: 5px; padding: 4px 6px; font-size: 0.85rem; background: #fff; flex: 1 1; }
.sp-tranche__foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.sp-tranche__sum { font-size: 0.8rem; color: var(--color-text-muted); }
.sp-tranche__sum.is-warn { color: var(--color-terracotta); font-weight: 600; }
.sp-modal__cat { display: flex; align-items: center; gap: 10px; margin-top: 1.1rem; }
.sp-modal__cat span { font-size: 0.85rem; color: var(--color-text-muted); }
.sp-modal__cat select { border: 1px solid var(--color-border); border-radius: 5px; padding: 5px 8px; font-size: 0.85rem; background: #fff; }
.sp-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.25rem; }
.sp-btn { background: var(--color-navy); color: #fff; border: none; border-radius: 7px; padding: 7px 16px; cursor: pointer; font-size: 0.88rem; }
.sp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-btn-ghost { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 7px; padding: 7px 16px; cursor: pointer; font-size: 0.88rem; }

/* Sélection PO : 2 cards côte à côte (actifs | passifs) */
.sp-sel-note { margin-top: 0.75rem; font-size: 0.85rem; color: var(--color-text-muted); }
.sp-selcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); grid-gap: 1rem; gap: 1rem; align-items: start; margin-top: 0.5rem; }
.sp-selcols .std-card { margin-top: 0; }
.sp-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.is-neg { color: var(--color-terracotta); }
.is-pos { color: var(--color-navy); }

.sp-mono { font-family: monospace; font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--color-text-muted); margin-right: 7px; }
.sp-desc { color: var(--color-text); }
.sp-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 0.68rem; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 5px; padding: 1px 6px;
}
.sp-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-input); }

.sp-split__rm {
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted);
  border-radius: 5px; cursor: pointer; line-height: 1; padding: 2px 7px;
}

/* ── Éditeur mois de réalisation ────────────────────────────────────────── */
.sp-split { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-split__pair { display: inline-flex; align-items: center; gap: 2px; }
.sp-split__month {
  border: 1px solid var(--color-border); border-radius: 5px; padding: 2px 4px;
  font-size: 0.8rem; color: var(--color-text); background: #fff;
}
.sp-pct {
  width: 42px; text-align: right; border: 1px solid var(--color-border);
  border-radius: 5px; padding: 2px 4px; font-size: 0.8rem; color: var(--color-input);
}
.sp-pct:disabled { color: var(--color-text-muted); background: var(--color-bg); }
.sp-split__unit { font-size: 0.75rem; color: var(--color-text-muted); }
.sp-split__rm { padding: 0 6px; }
.sp-split__add {
  border: 1px dashed var(--color-border); background: none; color: var(--color-input);
  border-radius: 5px; cursor: pointer; font-size: 0.78rem; padding: 2px 7px;
}
.sp-split__empty { color: var(--color-text-muted); }
.sp-split__sum { font-size: 0.78rem; color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.sp-split__sum.is-warn { color: var(--color-terracotta); font-weight: 600; }

/* ── Niveau 2 : groupes repliables ──────────────────────────────────────── */
.sp-group { border-bottom: 1px solid var(--color-border); }
.sp-group__head {
  width: 100%; display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 0.5rem 0.25rem; color: var(--color-navy); font-weight: 600;
}
.sp-group__caret { color: var(--color-text-muted); width: 1rem; }
.sp-group__label { flex: 1 1; }
.sp-group__count {
  font-size: 0.72rem; color: var(--color-text-muted);
  background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 0 7px;
}
.sp-group__bal { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 600; }

.sp-ref {
  display: grid; grid-template-columns: 22px 1fr auto; grid-gap: 0.6rem; gap: 0.6rem; align-items: center;
  padding: 0.4rem 0.25rem; border-top: 1px solid var(--color-border);
}
.sp-ref.is-on { background: #F1F5FB; }
.sp-ref__name { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.sp-ref__bal { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Toggle inclure/exclure, devant le compte (gagne de la place, montants alignés). */
.sp-ref__tg {
  width: 22px; height: 22px; padding: 0; border-radius: 5px;
  border: 1px solid var(--color-input); background: #fff; color: var(--color-input);
  cursor: pointer; line-height: 1; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.sp-ref__tg.is-on { background: var(--color-sage); border-color: var(--color-sage); color: #fff; }
.sp-ref__tg:disabled { opacity: 0.4; cursor: not-allowed; }

/* Postes ouverts — liste libre, encaissement/décaissement sur M1-M3. Charte. */
.opos { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.opos-hint { font-size: 12px; color: var(--color-text-muted); }

.opos-wrap { overflow-x: auto; }
.opos-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.opos-table th, .opos-table td {
  padding: 6px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-inner, var(--color-border));
}
.opos-table th { color: var(--color-text-muted); font-weight: 600; font-size: 12px; }

.opos-label {
  width: 100%; min-width: 150px; font: inherit; padding: 4px 2px;
  border: none; border-bottom: 1px solid transparent; background: transparent;
}
.opos-label:hover { border-bottom-color: var(--color-border); }
.opos-label:focus { outline: none; border-bottom-color: var(--color-field-focus); }

/* Type = badge coloré (segmenté via select stylé). */
.opos-type {
  font: inherit; font-size: 12px; font-weight: 500; padding: 3px 8px;
  border-radius: 999px; border: 1px solid var(--color-border); cursor: pointer;
}
.opos-type--in  { color: var(--color-sage); background: color-mix(in srgb, var(--color-sage) 12%, transparent); border-color: color-mix(in srgb, var(--color-sage) 40%, transparent); }
.opos-type--out { color: var(--color-terracotta); background: color-mix(in srgb, var(--color-terracotta) 12%, transparent); border-color: color-mix(in srgb, var(--color-terracotta) 40%, transparent); }

.opos-amt {
  width: 96px; text-align: right; font: inherit; padding: 3px 2px;
  border: none; border-bottom: 1px solid transparent; background: transparent;
  color: var(--color-field-focus);
}
.opos-amt:hover { border-bottom-color: var(--color-border); }
.opos-amt:focus { outline: none; border-bottom-color: var(--color-field-focus); }

/* Cellule % (part d'utilisation M1-M6) : champ + suffixe % accolé. */
.opos-pctcell { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 1px; }
.opos-pct { width: 46px; }
.opos-pctsign { color: var(--color-text-muted); font-size: 0.85em; }

.opos-del {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--color-text-muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.opos-del:hover { color: var(--color-terracotta); }

.opos-add {
  align-self: flex-start; margin-top: 4px; padding: 6px 12px; font-size: 13px;
  border: 1px dashed var(--color-border); border-radius: 8px;
  background: transparent; color: var(--color-navy); cursor: pointer;
}
.opos-add:hover { border-color: var(--color-accent); }

/* Point de départ — stepper à étapes numérotées (accordéon). Tokens charte. */
.stp-wrap { display: flex; flex-direction: column; gap: 12px; }

.stp-step {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.stp-step.is-open { box-shadow: 0 1px 2px rgba(26, 18, 25, 0.04); }

.stp-step__head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: transparent; border: none; cursor: pointer;
  text-align: left;
}
.stp-step__num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
  font-weight: 600; font-size: 13px;
}
.stp-step__titles { display: flex; flex-direction: column; gap: 1px; flex: 1 1; }
.stp-step__title {
  font-family: "Fraunces", Georgia, serif; font-size: 16px; color: var(--color-navy);
}
.stp-step__sub { font-size: 12px; color: var(--color-text-muted); }
.stp-step__chev { color: var(--color-text-muted); font-size: 13px; }

.stp-step__body {
  padding: 4px 16px 18px; border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border-inner, var(--color-border));
}

/* Durée de projection (repris du Graphique). */
.stp-horizon { display: flex; align-items: center; gap: 16px; padding-top: 12px; flex-wrap: wrap; }
.stp-horizon__label { font-size: 13px; color: var(--color-text-muted); }
.stp-horizon__opts { display: flex; align-items: center; gap: 10px; }
.stp-horizon__slider { width: 260px; accent-color: var(--color-accent); }
.stp-horizon__value { font-weight: 600; color: var(--color-navy); min-width: 20px; text-align: right; }
.stp-horizon__unit { font-size: 13px; color: var(--color-text-muted); }

/* Choix du mode de planification personnel. */
.stp-personnel { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.stp-personnel__hint { font-size: 13px; color: var(--color-text-muted); margin: 0 0 2px; }
.stp-radio {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px;
  cursor: pointer; font-size: 13px; color: var(--color-text); line-height: 1.4;
}
.stp-radio.is-active {
  border-color: var(--color-accent); background: var(--color-accent-tint);
}
.stp-radio input { margin-top: 2px; accent-color: var(--color-accent); }

/* Charges personnel — saisie manuelle. Tokens charte. Pas de card (déjà dans le
   gabarit encadré du hub — pas de cadre dans un cadre). */
.pmf { display: flex; flex-direction: column; gap: 22px; }

.pmf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 16px 24px;
  gap: 16px 24px; align-items: end;
}
.pmf-field { display: flex; flex-direction: column; gap: 6px; }
.pmf-field__lab { font-size: 13px; color: var(--color-text); }

.pmf-block { display: flex; flex-direction: column; gap: 8px; }
.pmf-block__lab { font-size: 13px; font-weight: 600; color: var(--color-navy); }

/* Champ numérique (valeur bleue éditable). */
.pmf-num { display: inline-flex; align-items: baseline; gap: 4px; }
.pmf-num input {
  width: 120px; text-align: right; font: inherit;
  border: none; border-bottom: 1px solid var(--color-border);
  background: transparent; color: var(--color-field-focus); padding: 2px 2px;
}
.pmf-num input:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.pmf-num__suffix { font-size: 12px; color: var(--color-text-muted); }

/* 13e / 14e : case + mois. */
.pmf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text); cursor: pointer; }
.pmf-check input { accent-color: var(--color-accent); }
/* Champs de saisie sans cadre (charte : valeur éditable, pas d'encadré). */
.pmf-field select {
  font: inherit; font-size: 13px; padding: 4px 4px;
  border: none; background: transparent; color: var(--color-field-focus); cursor: pointer;
}

/* Ajustements de salaires. */
.pmf-adj { display: flex; flex-direction: column; gap: 8px; }
.pmf-adj__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pmf-adj__label {
  flex: 0 1 240px; min-width: 150px; font: inherit; padding: 4px 2px;
  border: none; border-bottom: 1px solid var(--color-border); background: transparent;
}
.pmf-adj__label::placeholder { color: var(--color-text-muted); }
.pmf-adj__label:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.pmf-adj__row select {
  font: inherit; font-size: 13px; padding: 4px 4px;
  border: none; background: transparent; color: var(--color-field-focus); cursor: pointer;
}
.pmf-adj__del {
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--color-text-muted); font-size: 17px; cursor: pointer; line-height: 1;
}
.pmf-adj__del:hover { color: var(--color-terracotta); }

.pmf-add {
  align-self: flex-start; margin-top: 4px; padding: 6px 12px; font-size: 13px;
  border: 1px dashed var(--color-border); border-radius: 8px;
  background: transparent; color: var(--color-navy); cursor: pointer;
}
.pmf-add:hover { border-color: var(--color-accent); }

/* Table de recalcul — compacte pour tenir les 12 mois à l'écran. */
.pmf-recap-wrap { overflow-x: auto; }
.pmf-recap { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.pmf-recap th, .pmf-recap td {
  padding: 4px 3px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-inner, var(--color-border));
  overflow: hidden; text-overflow: ellipsis;
}
.pmf-recap th { color: var(--color-text-muted); font-weight: 600; }
/* Colonne libellé plus large ; colonnes mois/total réparties sur le reste. */
.pmf-recap th:first-child, .pmf-recap td:first-child { width: 170px; }
.pmf-recap th:last-child, .pmf-recap td:last-child { width: 62px; font-weight: 600; }
.pmf-recap__total td { background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy); }
.pmf-recap__net td { font-weight: 600; color: var(--color-sage); }
.pmf-recap__net td:first-child { color: var(--color-navy); }
.pmf-recap__disb td { color: var(--color-terracotta); }
.pmf-recap__disb td:first-child { color: var(--color-navy); }

/* Bouton « Taux & échéancier » — style primary (comme Finance › Charges sociales). */
.pmf-cs__btn {
  align-self: flex-start; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.82rem;
  border: 1px solid var(--color-accent); border-radius: 8px;
  background: var(--color-accent); color: #fff; cursor: pointer;
}
.pmf-cs__btn:hover { filter: brightness(0.95); }

/* Modale centrée (mêmes valeurs que .fsoc-modal de Finance). */
.pmf-cs__scrim { position: fixed; inset: 0; background: rgba(26, 18, 25, 0.24); z-index: 50; }
.pmf-cs__modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(920px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: 0 18px 48px rgba(26, 18, 25, 0.28); z-index: 51;
}
.pmf-cs__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface-card);
}
.pmf-cs__title { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--color-navy); }
.pmf-cs__head-actions { display: flex; align-items: center; gap: 12px; }
.pmf-cs__example {
  padding: 0.3rem 0.7rem; font: inherit; font-size: 0.78rem; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-accent);
}
.pmf-cs__example:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.pmf-cs__x { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.pmf-cs__body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 12px; }
.pmf-cs__rate { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--color-text); }
.pmf-cs__sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 10px; }
.pmf-cs__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border-inner, var(--color-border));
}
.pmf-cs__label { font-size: 13px; color: var(--color-text); min-width: 240px; flex: 0 0 auto; }

.pmf-chips { display: inline-flex; gap: 4px; margin-left: auto; }
.pmf-chip {
  width: 26px; height: 26px; font-size: 11px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text-muted);
}
.pmf-chip.is-on {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600;
}

.treasury {
  /* Le cadre encadré (PageShell --framed) fournit bordure + padding ; ici on
     ne garde que le rythme vertical entre scénario / onglets / contenu. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Onglets <Tabs> dans la carte trésorerie. Pas d'overflow-x:auto : avec
   overflow-y implicite à 'auto', le margin-bottom:-1px des onglets faisait
   apparaître un ascenseur vertical parasite. 3 onglets → pas besoin de scroll. */
.treasury .tabs__tab { white-space: nowrap; }

/* Contenu à l'intérieur de la carte hub : pas de bordure/fond propres
   (la carte PageShell les porte déjà). */
.treasury .treasury__layout { min-height: 0; }
.treasury .treasury__content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0 0;
}
.treasury--empty,
.treasury__placeholder {
  padding: 40px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.treasury__error {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.treasury__error button {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: #92400E;
}

.treasury__layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 600px;
}

.treasury__content {
  flex: 1 1;
  min-width: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px;
}

/* ── Set up : période du plan (mois/année de départ) ───────────────────── */
.tres-setup-period {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.tres-setup-period__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.tres-setup-period__fields {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.tres-setup-period__range {
  font-size: 12px;
  color: var(--color-text-muted);
  padding-bottom: 6px;
}

/* ── ScenarioBar (header transparent, no card) ─────────────────────────── */
.tres-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 0;
}
.tres-bar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tres-bar__row--notes {
  background: transparent;
  padding: 2px 0;
}
.tres-bar__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
  margin-right: 12px;
  letter-spacing: -0.01em;
}
.tres-bar__select {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-card);
  font-size: 13px;
  font-family: inherit;
  min-width: 200px;
  cursor: pointer;
}
.tres-bar__name-input {
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-navy);
  min-width: 240px;
  flex: 1 1;
  max-width: 400px;
}
.tres-bar__name-input:hover:not(:disabled) {
  background: var(--color-card);
  border-color: var(--color-border);
}
.tres-bar__name-input:focus {
  outline: none;
  background: var(--color-input-bg);
  border-color: var(--color-input);
  color: var(--color-input);
}
.tres-bar__name-input:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.tres-bar__notes-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  min-width: 50px;
}
.tres-bar__notes-input {
  flex: 1 1;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: var(--color-text);
  font-style: italic;
}
.tres-bar__notes-input::placeholder {
  color: var(--stone-400);
}
.tres-bar__notes-input:hover:not(:disabled) {
  background: var(--color-card);
  border-color: var(--color-border);
}
.tres-bar__notes-input:focus {
  outline: none;
  background: var(--color-input-bg);
  border-color: var(--color-input);
  color: var(--color-input);
  font-style: normal;
}
.tres-bar__locked {
  font-size: 11px;
  background: var(--color-lock-bg);
  color: var(--color-lock-text);
  border: 1px solid var(--color-lock-border);
  padding: 2px 8px;
  border-radius: 4px;
}
/* Période du plan : texte discret, non interactif. */
.tres-bar__period {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
}
.tres-bar__btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text);
}
.tres-bar__btn:hover {
  background: var(--color-highlight);
}
.tres-bar__btn--primary {
  background: var(--color-navy);
  color: white;
  border-color: var(--color-navy);
}
.tres-bar__btn--primary:hover {
  background: #3a2e54;
}
.tres-bar__btn--danger {
  color: var(--color-terracotta);
}
.tres-bar__btn--icon {
  padding: 6px 8px;
  line-height: 1;
}
.tres-bar__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.tres-bar__spacer {
  flex: 1 1;
}

/* ── Rangée d'onglets : onglets à gauche, Réinitialiser à droite ─────────── */
.tres-tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.tres-tabs-row .tres-tabs { flex: 1 1 auto; min-width: 0; }
.tres-tabs-row__reset { flex: 0 0 auto; margin-bottom: 5px; }

/* ── Onglets horizontaux Treasury ───────────────────────────────────────── */
.tres-tabs {
  display: flex;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  overflow-x: auto;
  margin-bottom: -1px;
  z-index: 1;
}
.tres-tabs__item {
  padding: 11px 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-weight: 500;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  position: relative;
}
.tres-tabs__item:hover:not(.tres-tabs__item--active) {
  background: var(--color-highlight);
  color: var(--color-navy);
}
.tres-tabs__item--active {
  background: var(--color-navy);
  color: white;
  font-weight: 700;
  border-color: var(--color-navy);
  box-shadow: 0 2px 6px rgba(43, 32, 62, 0.2);
  position: relative;
  z-index: 2;
}
.tres-tabs__item--active:hover {
  background: var(--navy-dark);
  color: white;
}

/* ── KPI grid ───────────────────────────────────────────────────────────── */
.tres-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}
.tres-kpi {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tres-kpi__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tres-kpi__value {
  font-size: 16px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--color-navy);
}
.tres-kpi--sage .tres-kpi__value       { color: var(--color-sage); }
.tres-kpi--terracotta .tres-kpi__value { color: var(--color-terracotta); }
.tres-kpi--navy .tres-kpi__value       { color: var(--color-navy); }
.tres-kpi--neg .tres-kpi__value        { color: var(--color-terracotta); }

/* ── Table Synthèse ─────────────────────────────────────────────────────── */
.tres-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.tres-table thead th {
  background: var(--color-surface-card);   /* charte — thead bleu-gris (était beige #EDE8DF) */
  color: var(--color-navy);
  font-weight: 600;
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.tres-table thead th:first-child {
  text-align: left;
}
.tres-table tbody td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid #F4EFE5;
  white-space: nowrap;
}
.tres-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--color-navy);
}
.tres-table tbody tr:hover {
  background: var(--color-highlight);
}
.tres-table .num--neg { color: var(--color-terracotta); }
.tres-table .num--pos { color: var(--color-sage); }

.tres-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 4px 0;
}
.tres-section-motto {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--color-navy);
  margin: 0 0 10px 0;
}
.tres-section-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 16px 0;
}

/* ── Sous-pages Cash : titre masqué (= libellé d'onglet), note explicative
   encadrée avec icône, données remontées au plus près des onglets. ───────── */
.treasury__content { padding-top: 12px; }
.treasury__content .tres-section-title,
.treasury__content .page-header__title { display: none; }

.treasury__content .tres-section-subtitle {
  position: relative;
  background: var(--color-accent-tint);
  background: var(--color-highlight, var(--color-accent-tint));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  margin: 0 0 12px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.treasury__content .tres-section-subtitle::before {
  content: "i";
  position: absolute;
  left: 11px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-navy);
  border-radius: 50%;
  color: var(--color-navy);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
}
.treasury__content .tres-section-motto { margin: 0 0 8px 0; }
/* En-tête de page embarquée (Salaires) : on resserre au-dessus de la note. */
.treasury__content .page-header { margin-bottom: 0; padding-top: 0; }

/* ── Tableaux édition (Revenus/Achats) ─────────────────────────────────── */
.tres-edit-table input,
.tres-edit-table select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  background: #FBF7EF;
  font-size: 12px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-input);
  font-family: inherit;
  border-radius: 4px;
}
.tres-edit-table input::placeholder { color: #B0A89C; }
.tres-edit-table select {
  min-width: 56px;
  text-align: left;
  cursor: pointer;
}
.tres-edit-table input:hover,
.tres-edit-table select:hover {
  background: #F7EFE0;
}
.tres-edit-table input:focus,
.tres-edit-table select:focus {
  border-color: var(--color-input);
  outline: none;
  background: var(--color-accent-tint);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.tres-edit-table input[type="text"]:not([inputmode]) {
  text-align: left;
  color: var(--color-text);
}
.tres-edit-table input[type="checkbox"] {
  width: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.tres-edit-table input:disabled,
.tres-edit-table select:disabled {
  background: #F0EDE6;
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.tres-edit-table .col-actions {
  text-align: center;
}
.tres-edit-table .col-actions button {
  background: none;
  border: none;
  color: var(--color-terracotta);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

.tres-add-row {
  margin-top: 12px;
  padding: 8px 14px;
  background: white;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-muted);
}
.tres-add-row:hover {
  background: var(--color-highlight);
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* ── ActionBar (Settings + Period selectors LEFT / Export-Import-Reset RIGHT) */
.tres-actionbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.tres-actionbar__left,
.tres-actionbar__right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tres-actionbar__select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-navy);
}
.tres-actionbar__select select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-input);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.tres-actionbar__select select:hover:not(:disabled) {
  border-color: var(--color-navy);
}
.tres-actionbar__select select:focus {
  outline: none;
  border-color: var(--color-input);
  background: var(--color-input-bg);
}

/* ── Chips mois (J F M A M J J A S O N D) ──────────────────────────────── */
.tres-chips {
  display: inline-flex;
  gap: 2px;
  flex-wrap: nowrap;
  align-items: center;
}
.tres-chip {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: white;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tres-chip:hover { background: var(--color-highlight); }
.tres-chip--active {
  background: var(--color-amber);
  color: white;
  border-color: var(--color-amber);
}
.tres-chip--tous {
  width: auto;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.tres-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Table charges indirectes : colonnes alignées + footer total ──────── */
.tres-indirect-table .col-pos     { width: 52px; text-align: center; }
.tres-indirect-table .col-pos input {
  width: 3em;
  text-align: center;
  padding: 2px 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.tres-indirect-table .col-label   { width: 30%; }
.tres-indirect-table .col-amount  { width: 110px; }
.tres-indirect-table .col-mode    { width: 80px; }
.tres-indirect-table .col-vat     { width: 70px;  text-align: center; }
.tres-indirect-table .col-months  { width: auto; white-space: nowrap; }
.tres-indirect-table .col-occ     { width: 90px;  text-align: right; }
.tres-indirect-table .col-total   { width: 100px; text-align: right; }
.tres-indirect-table .col-actions { width: 32px; text-align: center; }

.tres-indirect-table thead th { text-align: left; }
.tres-indirect-table thead th.col-amount,
.tres-indirect-table thead th.col-occ,
.tres-indirect-table thead th.col-total { text-align: right; }
.tres-indirect-table thead th.col-vat,
.tres-indirect-table thead th.col-actions { text-align: center; }

.tres-indirect-table tbody td { padding: 6px 8px; }
.tres-indirect-table tbody td input[type="text"] { padding: 4px 8px; }
.tres-num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--color-text);
}
.tres-total-cell {
  color: var(--color-terracotta);
  font-weight: 600;
}
.tres-indirect-footer {
  background: #EDE8DF;
  border-top: 2px solid var(--color-navy);
}
.tres-indirect-footer td {
  padding: 10px 8px;
  font-size: 13px;
}

/* ── SettingsModal supprimée (2026-06-17) : régime TVA déplacé dans Settings.
   Blocs CSS .tres-modal et .tres-form-grid retirés (plus aucun consommateur). ── */

/* Hub « Set up » — sous-onglets (postes d'ouverture / phasing charges sociales) */
.tres-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
/* Barre d'onglets principale en haut de la page « 12M Cash forecast ». */
.tres-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
  border-bottom: 1px solid var(--color-border);
}
.tres-tab {
  border: none;
  background: none;
  padding: 10px 16px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tres-tab:hover { color: var(--color-navy); }
.tres-tab.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.tres-subtab {
  border: none;
  background: none;
  padding: 8px 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tres-subtab:hover { color: var(--color-navy); }
.tres-subtab.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
  font-weight: 500;
}

/* Card blanche autour du tableau des charges indirectes (Point de départ). */
.tres-indirect-card {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  border-radius: var(--radius, 8px);
  padding: 8px 12px;
  overflow-x: auto;
}

/* Charges personnel — échéancier des charges sociales, replié derrière un bouton. */
.tres-personnel-tab { display: flex; flex-direction: column; gap: 16px; }
.tres-echeancier { border-top: 1px solid var(--color-border); padding-top: 12px; }
.tres-echeancier__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-navy); cursor: pointer;
}
.tres-echeancier__toggle:hover { border-color: var(--color-accent); }

/* Module Ventes — styles propres (tokens charte uniquement). */

/* Les pages Ventes réutilisent la classe `treasury` (erreurs/placeholders) mais
   PAS son scroll d'onglets (`.treasury .tabs__list { overflow-x:auto }`), qui
   force overflow-y:auto et crée un ascenseur vertical parasite dans la barre
   d'onglets (peu d'onglets ici, pas besoin de scroll). */
.treasury.sales-shell .tabs__list { overflow: visible; }

/* Synthèse : le graphe occupe une demi-page (l'autre moitié accueillera la suite
   de la synthèse). Repli pleine largeur sous 900px. */
.sales-synth { display: flex; gap: 24px; flex-wrap: wrap; }
.sales-synth__half { width: 50%; min-width: 420px; flex: 0 1 50%; }
@media (max-width: 900px) {
  .sales-synth__half { width: 100%; min-width: 0; flex-basis: 100%; }
}

.sales-synth__chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sales-synth__chart-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px; color: var(--color-navy);
}

/* Header du toggle d'unité CHF / kCHF. */
.sales-unit-header {
  padding: 12px 0; display: flex; justify-content: flex-end;
  border-bottom: 1px solid var(--color-border);
}

/* Toggle d'unité CHF / kCHF (segments). */
.sales-unit-toggle {
  display: inline-flex; border: 1px solid var(--color-border);
  border-radius: 8px; overflow: hidden;
}
.sales-unit-toggle__btn {
  padding: 3px 12px; font-size: 12px; line-height: 1.6;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-muted);
}
.sales-unit-toggle__btn + .sales-unit-toggle__btn { border-left: 1px solid var(--color-border); }
.sales-unit-toggle__btn.is-active { background: var(--color-navy); color: #fff; }

/* Onglet « Plan par EPT ». */
.sales-ept__bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; margin-bottom: 16px; }
.sales-ept__grp {
  display: flex; align-items: flex-end; gap: 14px;
  border: 1px solid var(--color-border); border-radius: 8px; border-radius: var(--border-radius-md, 8px);
  padding: 6px 14px 10px; margin: 0;
}
.sales-ept__grp legend { font-size: 11px; color: var(--color-text-muted); padding: 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.sales-ept__grp label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text-muted); }
.sales-ept__grp select, .sales-ept__grp input { height: 32px; }
.sales-ept__ca { width: 110px; text-align: right; color: var(--color-value); }
.sales-ept__reset { margin-left: 6px; border: none; background: none; color: var(--color-input); cursor: pointer; font-size: 11px; text-decoration: underline; }
.sales-ept__sim {
  align-self: flex-start; font-size: 11px; font-weight: 600;
  color: var(--color-amber); background: rgba(184, 134, 42, 0.12);
  border-radius: 99px; padding: 3px 10px;
}

/* Légende réel / projeté. */
.sales-ept__legend { font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; }
.sales-ept__chip { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 8px; }
.sales-ept__chip--real { color: var(--color-navy); background: var(--color-accent-tint-strong); }
.sales-ept__chip--proj { color: var(--color-amber); background: rgba(184, 134, 42, 0.14); }
.sales-ept__table .sales-ept__proj-col { background: rgba(184, 134, 42, 0.06); }

/* Lignes « drivers » sous la table revenus (EPT, CA/EPT, saisonnalité). */
.sales-ept__driver-sep td { height: 8px; border: none; }
.sales-ept__table tr.sales-ept__driver td {
  color: var(--color-text-muted); font-size: 12px; background: var(--color-bg);
}
.sales-ept__table tr.sales-ept__driver td:first-child { color: var(--color-navy); font-weight: 500; }

.sales-ept__ref { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; margin-bottom: 16px; padding: 12px 14px; background: var(--color-bg); border-radius: 8px; border-radius: var(--border-radius-md, 8px); }
.sales-ept__ref-kpis { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-text); }
.sales-ept__season { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.sales-ept__season-lbl { align-self: center; font-size: 11px; color: var(--color-text-muted); margin-right: 6px; }
.sales-ept__season-bar { width: 10px; background: var(--color-navy); border-radius: 2px 2px 0 0; opacity: 0.65; }

.sales-ept__tag { font-size: 10px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 99px; padding: 0 6px; margin-left: 6px; }
.sales-ept__table th, .sales-ept__table td { white-space: nowrap; }

/* Paramètres → Facturation : grille catégories × 12 mois (collage Excel). */
.sales-billing-grid { padding: 12px; }
/* Défilement horizontal scopé à la table seule ; overflow-y figé pour éviter
   l'ascenseur vertical parasite (overflow-x auto force sinon overflow-y auto). */
.sales-bill-scroll { overflow-x: auto; overflow-y: hidden; }
.sales-billing-grid__year { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sales-billing-grid__year button {
  width: 26px; height: 26px; border: 1px solid var(--color-border);
  border-radius: 6px; background: #fff; cursor: pointer; color: var(--color-navy);
}
.sales-billing-grid__year-val { font-weight: 600; color: var(--color-navy); min-width: 56px; text-align: center; }
.sales-billing-grid__hint { font-size: 12px; color: var(--color-text-muted); margin-left: 12px; }

.sales-bill-table .sales-bill-label {
  width: 100%; border: 1px solid transparent; background: transparent;
  font: inherit; padding: 2px 4px; border-radius: 4px;
}
.sales-bill-table .sales-bill-label:hover { border-color: var(--color-border); }
.sales-bill-table .sales-bill-label:focus { border-color: var(--color-input); outline: none; }

.sales-bill-table .sales-bill-cell {
  width: 72px; text-align: right; border: 1px solid transparent;
  background: transparent; font: inherit; padding: 2px 4px; border-radius: 4px;
  color: var(--color-value);
}
.sales-bill-table .sales-bill-cell:hover { border-color: var(--color-border); }
.sales-bill-table .sales-bill-cell:focus { border-color: var(--color-input); outline: none; }

.sales-bill-del {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--color-text-muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.sales-bill-del:hover { color: var(--color-terracotta); }

.sales-bill-add {
  margin-top: 12px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: #fff; color: var(--color-input); cursor: pointer;
}
.sales-bill-add:hover { border-color: var(--color-input); }

/* Grille façon tableur : en-têtes triables, cellules vue/sélection. */
.sales-bill-scroll:focus { outline: none; }
.sales-bill-table th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.sales-bill-table th .sort-ind { font-size: 10px; color: var(--color-text-muted); }

.sales-bill-table td.sales-bill-mcell { padding: 0; }
.sales-bill-cell-view {
  display: block; width: 72px; min-height: 26px; line-height: 26px;
  text-align: right; padding: 0 8px; cursor: cell; color: var(--color-value);
  white-space: nowrap;
}
.sales-bill-table td.sales-bill-mcell.is-sel { background: rgba(37, 99, 235, 0.14); }
.sales-bill-table td.sales-bill-mcell.is-sel .sales-bill-cell-view {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.45);
}

/* Barre d'actions de sélection. */
.sales-bill-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--color-text-muted); }
.sales-bill-toolbar button {
  padding: 3px 10px; font-size: 12px; border: 1px solid var(--color-border);
  border-radius: 6px; background: #fff; color: var(--color-navy); cursor: pointer;
}
.sales-bill-toolbar button:hover { border-color: var(--color-input); }

/* Colonne Total (protégée, lecture seule) + ligne Total — famille bleu-gris charte. */
.sales-bill-table .sb-total-col {
  background: var(--color-accent-tint); text-align: right; font-weight: 600;
  color: var(--color-navy); padding: 2px 8px; white-space: nowrap;
}
.sales-bill-table .sb-total-row td {
  background: var(--color-accent-tint-strong); border-top: 1px solid var(--color-border);
  font-weight: 600; color: var(--color-navy); text-align: right; padding: 4px 8px;
}
.sales-bill-table .sb-total-row td:first-child { text-align: left; }
.sales-bill-table .sb-total-row .sb-total-col,
.sales-bill-table .sb-total-row .sb-grand { background: var(--color-accent-tint-strong); }

/* ──────────────────────────────────────────────────────────────────────────────
   Section Facturation (SalesBillingAnalysisPage) — onglets Réalisé / 12M / Saisonnalité
   ────────────────────────────────────────────────────────────────────────────── */

/* Filtrage multi-lignes dans l'en-tête de la table. */
.sales-table-header {
  padding: 12px; background: var(--color-bg); border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sales-filter-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1;
}
.sales-filter-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: #fff; color: var(--color-text-muted); cursor: pointer;
  white-space: nowrap; transition: all 0.15s ease;
}
.sales-filter-btn:hover { border-color: var(--color-input); }
.sales-filter-btn.is-active {
  background: var(--color-navy); color: #fff; border-color: var(--color-navy);
}
.sales-filter-item input { margin: 0; }

/* Tables de facturation. */
.sales-empty { padding: 40px 20px; text-align: center; color: var(--color-text-muted); }
.sales-loading { padding: 20px; color: var(--color-text-muted); font-size: 13px; }

.sales-table-wrap { overflow-x: auto; }
.sales-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.sales-table th, .sales-table td {
  padding: 8px 10px; border-bottom: 0.5px solid var(--color-border);
  text-align: right;
}
.sales-table th {
  background: var(--color-surface-card); color: var(--color-navy);
  font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.5px;
}
.sales-table-head { border-bottom: 1px solid var(--color-border); }

.sales-col-label {
  text-align: left !important; /* Force left alignment for designation column */
}
/* Tables calculées (12M glissants, Saisonnalité) : valeurs = texte standard,
   pas le bleu réservé aux cellules éditables. */
.sales-col-num { color: var(--color-text); font-family: "Inter", system-ui, sans-serif; }
.sales-col-small { font-size: 12px; }
.sales-col-total {
  background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy);
}

.sales-table-row:hover { background: rgba(250, 243, 234, 0.5); }
.sales-table-total td {
  background: var(--color-accent-tint-strong); border-top: 1px solid var(--color-border);
  font-weight: 600; color: var(--color-navy);
}
.sales-table-total td.sales-col-label { text-align: left; }

.sales-table--compact .sales-col-num { font-size: 11px; padding: 6px 8px; }

/* Sélecteur années (Saisonnalité) — dans le header. */
.sales-seasonality-selector {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.sales-seasonality-label { font-size: 12px; font-weight: 600; color: var(--color-navy); }
.sales-seasonality-year-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-text); cursor: pointer;
}
.sales-seasonality-year-check input { margin: 0; cursor: pointer; }
.sales-seasonality-year-check input:disabled { cursor: not-allowed; opacity: 0.5; }

/* Table saisonnalité — années × mois, avec calculs transparents. */
.sales-seasonality-table { width: 100%; border-collapse: collapse; }
.sales-seasonality-table th, .sales-seasonality-table td {
  padding: 6px 6px; text-align: right; font-size: 11px;
  border-bottom: 0.5px solid var(--color-border);
}
.sales-seasonality-table .sales-col-label { text-align: left; font-weight: 500; min-width: 140px; }
.sales-seasonality-table .sales-col-small { padding: 5px 4px; }
.sales-seasonality-table .sales-col-total {
  background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy);
  border-left: 1px solid var(--color-border);
}

/* Groupes d'années (headers) */
.sales-seasonality-year-row th {
  background: var(--color-surface-card); color: var(--color-navy);
  font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.5px; border-right: 2px solid #fff;
  padding: 8px 4px;
}
.sales-seasonality-year-header {
  border-right: 2px solid #fff !important;
}

/* Séparation avant les calculs (card blanche) */
.sales-seasonality-sep td { height: 8px; border: none; background: transparent; }

/* Lignes de calcul (moyenne, %, indice) — surlignage ardoise clair (charte). */
.sales-seasonality-calc-row td {
  background: var(--color-accent-tint); color: var(--color-navy); font-weight: 500;
}
.sales-seasonality-calc-row .sales-col-total {
  background: var(--color-accent-tint-strong);
}

/* Note méthodologie — sur le fond de page, hors card (pas d'encadré). */
.sales-seasonality-note {
  padding: 12px 4px; font-size: 12px; color: var(--color-text-muted);
  margin-top: 12px; line-height: 1.5;
}

/* Proto « Atterrissage » — charte Palestre (tokens :root). Cellules éditables :
   texte bleu --color-field-focus sans cadre ; réel/prévu séparés par un filet
   (pas de fond coloré) ; totaux navy. */

.atl-toolbar { margin: 0 0 14px; }
.atl-seg { display: inline-flex; border: 1px solid var(--color-border); border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: 8px; overflow: hidden; }
.atl-seg button { font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border: none;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer; border-left: 1px solid var(--color-border); }
.atl-seg button:first-child { border-left: none; }
.atl-seg button.on { background: var(--color-accent); color: #fff; }

.atl-scroll { overflow-x: auto; }

/* Largeur naturelle (pas de min-width:100%) → table resserrée, alignée à gauche. */
.atl-table { border-collapse: collapse; font-size: 12.5px; }
.atl-table th, .atl-table td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.atl-table th { color: var(--color-text-muted); font-weight: 500; font-size: 11.5px; border-bottom: 1px solid var(--color-border); }
.atl-table th.l, .atl-table td.l { padding-left: 2px; }
.atl-table th.l, .atl-table td.l { text-align: left; }
.atl-sub { font-size: 10px; font-weight: 400; }

/* En-tête de groupe réel / prévisionnel (centré, atténué). */
.atl-headgroup th { border-bottom: none; padding-bottom: 2px; }
.atl-table th.atl-grp { text-align: center; font-weight: 400; color: var(--color-text-muted); }

/* Filets de séparation (réel | prévu, et autour des colonnes de total). */
.atl-filet-l { border-left: 2px solid var(--color-border); border-left: 2px solid var(--color-border-strong, var(--color-border)); }
.atl-filet-r { border-right: 2px solid var(--color-border); border-right: 2px solid var(--color-border-strong, var(--color-border)); }
/* Colonne compta (Réalisé) : fond gris très clair = réel, lecture seule. */
.atl-table .atl-filet-r { background: color-mix(in srgb, var(--color-text-muted) 6%, transparent); }

/* Valeur calculée (non éditable) : navy discret, aligné à droite. */
.atl-num { color: var(--color-navy); }

/* Ligne total. */
.atl-tot td { font-weight: 700; color: var(--color-navy); border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface-card); }

/* Cellule éditable : bleu, sans cadre (soulignement discret au focus). */
.atl-in { width: 52px; font-family: inherit; font-size: 12.5px; text-align: right; color: var(--color-field-focus);
  border: none; background: transparent; padding: 2px 0; }
.atl-in--text { width: 130px; text-align: left; color: var(--color-text); }
.atl-in--muted { color: var(--color-text-muted); }
.atl-in:focus { outline: none; box-shadow: inset 0 -1px 0 0 var(--color-field-focus); }

/* Icône grouper/dégrouper (+/−) en tête de nom, largeur fixe → noms alignés. */
.atl-tgl { display: inline-block; width: 27px; text-align: left; vertical-align: top; flex: 0 0 auto; }
/* Icône ＋/− encerclée (pastille tuile, comme les numéros d'étape du plan). */
/* FERMÉ (+) : plein accent, signe blanc — l'affordance se voit ; OUVERT (−) :
   tint clair discret. */
/* Fond clair dans les DEUX états (ouvert comme fermé) — demande 2026-08-16. */
.atl-tgl-btn { border: none; background: var(--color-accent-tint-strong); color: var(--color-accent); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.atl-tgl-btn.is-open { background: var(--color-accent-tint-strong); color: var(--color-accent); }
.atl-tgl-btn:hover { background: var(--color-navy); color: #fff; }
/* inline-block → les blocs enfants (compte rattaché, prix) s'alignent à gauche
   SOUS le libellé, pas au bord de la cellule. Largeur bornée pour que le slot
   d'action (✎ / ＋−) reste SUR LA MÊME LIGNE que le libellé. */
.atl-nm { display: inline-block; vertical-align: top; }
.atl-table--fixed td.l .atl-nm { width: calc(100% - 27px); }
/* Méta en bloc sous le libellé (cards Variables / Inducteurs). */
.atl-linkline--block { display: block; margin-left: 0; }
.atl-linename { font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.atl-count { font-size: 10px; color: var(--color-text-muted); background: var(--color-accent-tint); border-radius: 9px; padding: 1px 6px; margin-left: 6px; }
/* Numéro de ligne de revenus (référence compacte ; nom complet au survol). */
.atl-lineno { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; background: var(--color-accent-tint); color: var(--color-accent);
  font-size: 10px; font-weight: 700; margin-right: 6px; vertical-align: 1px; cursor: default; }
.atl-line td.atl-num { font-weight: 600; }

/* Sous-ligne détail : nom indenté sous le libellé de ligne. */
/* Détails alignés sur le libellé de la ligne (même x, pas d'indentation). */
.atl-detail__name .atl-nm { padding-left: 0; }
/* Détail à inducteur : même noir que les autres (le tag suffit). */
.atl-detail--driver .atl-nm { color: var(--color-text); }
.atl-drvtag { font-size: 10px; color: var(--color-accent); background: var(--color-accent-tint); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
/* « Ajouter un détail » aligné sur le texte des détails + filet de fin de bloc. */
.atl-table .atl-addrow td { padding: 3px 8px 7px 29px; border-bottom: 1.5px solid var(--color-border); border-bottom: 1.5px solid var(--color-border-strong, var(--color-border)); }

/* Select ligne de revenus (inducteurs). */
.atl-sel { font-family: inherit; font-size: 12px; border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 6px; background: var(--color-surface-card); color: var(--color-text); }

/* Cards (proto) — corps blanc, en-tête blanc à filet. */
.atl-card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 12px; margin: 0 0 8px; overflow: hidden; }
.atl-card__head { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border-inner, var(--color-border)); }
.atl-card__head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-navy); }
.atl-card__title { cursor: pointer; }
/* Pastille de card (repli/dépli) : NAVY foncé — distincte des ＋/− ardoise des
   lignes de revenus. Losange ◆ (fermée) qui TOURNE en carré ■ à l'ouverture. */
.atl-card-tgl { border: none; background: transparent; color: var(--color-navy); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.atl-card-tgl.is-open { transform: rotate(45deg); }
.atl-card-tgl:hover { color: var(--color-accent); }
.atl-card__note { font-size: 11.5px; color: var(--color-text-muted); }
.atl-card__right { margin-left: auto; }
/* Card Variables : bouton d'ajout + cellules de taux. */
.atl-add-var { border: none; background: transparent; color: var(--color-accent); font-family: inherit; font-size: 12px; cursor: pointer; }
.atl-add-var:hover { text-decoration: underline; }
.atl-rate-real { color: var(--color-text-muted); }
/* Cellules de taux compactes → mêmes largeurs de colonnes que la card CA. */
.atl-rate-cell { white-space: nowrap; padding-left: 2px !important; padding-right: 4px !important; }
.atl-rate-cell .atl-pct { color: var(--color-text-muted); font-size: 10px; margin-left: 0; }
.atl-table--fixed .atl-rate-cell .atl-in { width: 26px; padding-right: 0; }
.atl-card__body { padding: 6px 16px 12px; }

/* Grille de colonnes FIXE partagée par les 2 cards → alignement années/mois. */
.atl-table--fixed { table-layout: fixed; }
.atl-col-name { width: 224px; }
.atl-col-real { width: 60px; }
.atl-col-yr { width: 64px; }
.atl-col-mo { width: 46px; }
.atl-col-tot { width: 66px; }
.atl-col-del { width: 22px; }
.atl-table--fixed td.l, .atl-table--fixed th.l { white-space: normal; }
/* Poignée de redimensionnement de la colonne libellé. */
.atl-nameth { position: relative; }
.atl-resizer { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
.atl-resizer:hover { background: var(--color-accent-tint-strong); }
.atl-table--fixed .atl-in { width: 100%; box-sizing: border-box; }

/* Card Inducteurs : libellé + méta (mode · inducteur · ligne · prix) dans la 1re colonne. */
.atl-src { display: flex; flex-direction: column; gap: 4px; }
.atl-in.atl-src__name { width: 100%; font-weight: 600; }
.atl-srcmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.atl-modepill { display: inline-flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.atl-modepill button { font-family: inherit; font-size: 10px; padding: 2px 7px; border: none; background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer; }
.atl-modepill button.on { background: var(--color-accent); color: #fff; }
.atl-in.atl-src__drv { width: 74px; }
.atl-srcmeta .atl-sel { max-width: 104px; }
.atl-prix { font-size: 10px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 3px; }
.atl-prix .atl-in { width: 46px; }

/* Crayon d'édition (ligne inducteur) + rappel de la ligne de revenus rattachée. */
.atl-pencil { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .12s; }
.atl-pencil:hover { color: var(--color-accent); }
/* Actions (crayon / suppression) visibles seulement au survol de la ligne. */
.atl-table tbody tr:hover .atl-pencil { opacity: 1; }
.atl-table tbody tr.atl-line:hover td, .atl-table tbody tr.atl-detail:hover td { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
/* « ＋ inducteur » APRÈS le libellé + menu de choix d'unité. */
.atl-indwrap { position: relative; display: inline-block; }
.atl-addind { border: none; background: transparent; color: var(--color-sage); cursor: pointer; font-size: 11px; padding: 0; margin-left: 8px; white-space: nowrap; }
.atl-addind:hover { color: var(--color-accent); }
.atl-menu-ov { position: fixed; inset: 0; z-index: 55; }
.atl-indmenu { position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 3px; background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; min-width: 132px; padding: 4px; }
.atl-indmenu button { text-align: left; border: none; background: transparent; font-family: inherit; font-size: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--color-text); white-space: nowrap; }
.atl-indmenu button:hover { background: var(--color-accent-tint); }
.atl-indmenu__pct { color: var(--color-accent); }
.atl-indmenu__other { color: var(--color-text-muted); border-top: 1px solid var(--color-border); margin-top: 2px; }
.atl-modal__line { font-size: 12px; color: var(--color-text-muted); margin: 0 0 12px; }
.atl-prixinline { color: var(--color-text-muted); }
/* Tout sur une ligne : « SIG · jours-hommes : CHF 1'350 · Revenus des prestations ». */
.atl-drvline { font-size: 11px; color: var(--color-text-muted); margin-left: 6px; white-space: nowrap; }
.atl-linkline { font-size: 11px; color: var(--color-text-muted); margin-left: 6px; }
.atl-table--fixed .atl-drvline .atl-in { width: 50px; }
/* Détail manuel : libellé + « ＋ inducteur » sur la même ligne (input non pleine largeur). */
.atl-table--fixed .atl-in.atl-detname { width: 120px; }

/* Modale inducteur (choix ligne de revenus + inducteur). */
.atl-modal-ov { position: fixed; inset: 0; background: rgba(26, 18, 25, 0.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.atl-modal { background: var(--color-surface-card); border-radius: 12px; padding: 20px; width: 380px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
.atl-modal h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--color-navy); }
.atl-modal label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 0 0 10px; }
.atl-modal label input, .atl-modal label select { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; font-family: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-page); color: var(--color-text); }
.atl-modal label input:focus, .atl-modal label select:focus { outline: none; border-color: var(--color-field-focus); }
.atl-modal__actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.atl-modal__save { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; border: none; border-radius: 8px; background: var(--color-navy); color: #fff; cursor: pointer; }
.atl-modal__save:disabled { opacity: 0.4; cursor: not-allowed; }
.atl-modal__cancel { font-family: inherit; font-size: 13px; padding: 8px 13px; border: 1px solid var(--color-border); border-radius: 8px; background: transparent; color: var(--color-text); cursor: pointer; }
.atl-modal__del { font-family: inherit; font-size: 12.5px; padding: 8px 12px; border: none; border-radius: 8px; background: transparent; color: var(--color-terracotta); cursor: pointer; }
.atl-add-detail { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 11px; opacity: .85; padding: 0; }
.atl-add-detail:hover { color: var(--color-accent); opacity: 1; }

.atl-empty { font-size: 12.5px; color: var(--color-text-muted); padding: 20px 4px; }

/* Ligne d'ajustement compta (réalisé Finance − Σ détails) : atténuée, italique. */
.atl-adjname { font-style: italic; color: var(--color-text-muted); }
.atl-adjrow td.atl-num { color: var(--color-text-muted); font-style: italic; }

.atl-del { text-align: center; }
.atl-del button { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 12px; opacity: 0; }
.atl-table tr:hover .atl-del button { opacity: 1; }
.atl-del button:hover { color: var(--color-terracotta); }


/* Barre d'outils : toggle de vue + bouton « Copier N → N+1 ». */
.atl-toolbar { display: flex; align-items: center; gap: 12px; }
.atl-copybtn { font-family: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--color-border);
  border: 1px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface-card);
  color: var(--color-text); cursor: pointer; }
.atl-copybtn:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Modale de copie : liste de lignes à cocher. */
.atl-copyline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); padding: 4px 0; cursor: pointer; }
.atl-copyline input { accent-color: var(--color-accent); }

/* Bandeau lecture seule : le rôle voit le plan mais ne peut pas l'écrire. */
.atl-readonly {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-accent-tint);
  color: var(--color-text);
  color: var(--color-on-tint, var(--color-text));
  font-size: 13px;
}

/* « Ajouter une règle » (revenu variable) : remonté dans la barre, tenue du
   bouton principal des plans (tint ardoise + filet accent). */
.atl-rulebtn {
  background: var(--color-accent-tint-strong);
  border: 1px solid var(--color-accent);
  color: var(--color-accent); font-weight: 600;
}
.atl-rulebtn:hover { background: var(--color-accent); color: #fff; }

/* Ligne ciblée par une règle (revenu variable) : teinte ardoise légère +
   pastille ƒ% cliquable qui ouvre la règle. */
.atl-line--ruled > td { background: var(--color-accent-tint); }
.atl-rulechip {
  border: 0; cursor: pointer; margin-left: 8px; padding: 1px 7px;
  border-radius: 6px; font: inherit; font-size: 10.5px; font-weight: 700;
  background: color-mix(in srgb, var(--color-terracotta) 14%, transparent);
  color: var(--color-terracotta);
}
.atl-rulechip:hover { background: var(--color-terracotta); color: #fff; }

/* Modale de règle : taux réel observé + taux par année. */
.atl-realrate { color: var(--color-text); }
.atl-realrate b { color: var(--color-sage); }
.atl-ratesrow-lbl { margin-top: 6px; font-size: 11px; color: var(--color-text-muted); }
.atl-ratesrow { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.atl-rateyear { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-text-muted); }
.atl-rateyear input {
  width: 44px; border: 0; background: transparent; padding: 1px 0;
  font: inherit; font-size: 13px; color: var(--color-field-focus); text-align: right;
}
.atl-rateyear input:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
/* Sous-lignes du Plan produits/services dépliées : détail par client. */
.atl-tgl-btn--sub { width: 16px; height: 16px; font-size: 11px; }
.atl-detail--plansub .atl-detname--sub { color: var(--color-text-muted); }

/* Ligne de détail TENUE PAR UN PLAN (produits / services) — mise en évidence
   ardoise (2026-08-20) : son futur ne se saisit pas ici, il vient de son
   propre moteur. Le tag de source a quitté le libellé pour la colonne
   source/règle ; la teinte remplace le tag sur la ligne de groupement. */
.atl-table tbody tr.atl-detail--planned td { background: var(--color-accent-tint); }
.atl-table tbody tr.atl-detail--planned:hover td { background: var(--color-accent-tint-strong); }

/* Chevron d'ouverture des contributions (Plan produits / services) : DISCRET —
   visible au survol de la ligne, ou tant que le détail est ouvert. Format
   retenu par Olivier : libellés alignés à gauche, chevron au survol. */
.atl-chev {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  width: 16px; height: 16px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.atl-chev svg { width: 12px; height: 12px; transition: transform .12s ease; }
.atl-chev.is-open svg { transform: rotate(90deg); }
tr:hover .atl-chev, .atl-chev.is-open, .atl-chev:focus-visible { opacity: 1; }

/* Modale de règle : LARGE et horizontale — champs à la suite, réel observé en
   pastilles (N-1 + mois clos), taux annuels compacts avec le % dans le champ. */
.atl-modal--wide { width: min(820px, 94vw); max-width: none; }
.atl-modal__row { display: flex; gap: 16px; }
.atl-modal__row label { flex: 1 1; min-width: 0; }
.atl-obs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.atl-obs__t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 4px; }
.atl-obs__chip {
  font-size: 11.5px; color: var(--color-text-muted);
  background: var(--color-surface-page); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.atl-obs__chip b { color: var(--color-sage); margin-left: 3px; }
.atl-rateyear { display: inline-flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--color-text-muted); }
.atl-rateyear__field { display: inline-flex; align-items: baseline; gap: 2px; }
.atl-modal--wide .atl-rateyear input {
  width: 40px; border: 0; background: transparent; padding: 1px 0; border-radius: 0;
  font: inherit; font-size: 13.5px; color: var(--color-field-focus); text-align: right;
}
.atl-modal--wide .atl-rateyear input:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }

/* Séparation de la case « Coûts directs » dans la modale de copie N → N+1. */
.atl-copyline--dc { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 8px; }

/* ── Règle de projection (colonne 2 du plan des ventes) ──────────────────── */
.atl-rulecell { text-align: left !important; padding-left: 8px !important; position: relative; }
.atl-rulewrap { position: relative; display: inline-block; }
.atl-rulebtn {
  font: inherit; font-size: 11px; cursor: pointer; padding: 2px 8px;
  border: 1px solid var(--color-border); border-radius: 7px;
  background: var(--color-surface-card); color: var(--color-accent);
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .atl-rulebtn { opacity: 1; }
.atl-rulebtn i { font-style: normal; color: var(--color-text-muted); }
.atl-rulepop {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 190px;
  display: flex; flex-direction: column;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(43, 32, 62, .16);
}
.atl-rulepop__i {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
  border: 0; background: transparent; color: var(--color-text); padding: 6px 8px; border-radius: 7px;
}
.atl-rulepop__i:hover { background: var(--color-accent-tint); }
.atl-rulepop__i:disabled { color: var(--color-text-muted); cursor: default; }
.atl-rulepop__i em { font-style: normal; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
/* Règle EN PLACE : visible en permanence (comme le badge « Plan produits »). */
.atl-rulebtn.is-set { opacity: 1; border-color: var(--color-accent); background: var(--color-accent-tint); }
/* Badge de source « Finance » : la prévision de la ligne vient d'une règle du
   compte de résultat, pas du plan. */
.atl-drvtag--fin { background: var(--color-accent-tint); color: var(--color-accent); }
/* Repère discret : la prévision de cette ligne vient d'une règle de Finance. */
.atl-finmark { font-size: 11px; color: var(--color-accent); margin-left: 4px; cursor: default; }

/* Bloc d'information « Coûts calculés par les cards » : à plat sur le fond,
   texte atténué — on le lit, on n'y saisit rien (2026-08-16). */
.atl-cardcosts { margin: 16px 0 6px; }
.atl-cardcosts__head { display: flex; align-items: baseline; gap: 10px; padding: 0 0 6px 2px; }
.atl-cardcosts__title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.atl-cardcosts__note { font-size: 11px; color: var(--color-text-muted); }
.atl-cardcosts__body { padding: 0; }
.atl-cardcosts .atl-table td { background: transparent; color: var(--color-text-muted); }
.atl-cardcosts .atl-table tr.atl-tot td { color: var(--color-text); border-top: 1px solid var(--color-border); }
.atl-cardcosts .atl-table tr.atl-sub td { color: var(--color-text); font-weight: 600; }
/* Destination de la famille : champ à saisir → bleu, sans cadre (charte). */
.atl-destwrap { display: inline-flex; align-items: baseline; gap: 2px; max-width: 100%; }
.atl-dest {
  appearance: none; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 11px; color: var(--color-field-focus);
  cursor: pointer; max-width: 100%;
}
.atl-destcar { font-size: 9px; color: var(--color-field-focus); font-style: normal; }
.atl-dest:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }


/* Coûts directs — vue de planification des charges directes (proto 2026-08-15).
   Tokens :root uniquement (charte). Réel condensé · prévisionnel teinté ardoise. */

.dc-wrap { position: relative; }
.dc-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.dc-year {
  font-size: 13px; font-weight: 600; color: var(--color-navy);
}

.dc-card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(43, 32, 62, .04); overflow: hidden;
}
.dc-scroll { overflow-x: auto; }
.dc-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 12.5px; }
.dc-table th, .dc-table td { padding: 6px 8px; white-space: nowrap; }
.dc-table thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-inner);
  text-align: right;
}
.dc-table tbody td { border-top: 1px solid var(--color-border-inner); }
.dc-c-lbl { text-align: left !important; padding-left: 16px !important; min-width: 170px; }
.dc-c-rule { text-align: left !important; min-width: 130px; }
.dc-c-val, .dc-c-tot, .dc-c-real { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.dc-c-real { color: var(--color-text-muted); border-right: 1px solid var(--color-border-inner); }
.dc-table thead .dc-c-real small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Card BLANCHE complète (demande 2026-08-15) : plus d'aplat — la frontière
   réel/prévisionnel tient au filet après la colonne Réel et à la teinte des
   en-têtes de mois. */
.dc-table thead th.dc-fore { color: var(--color-accent); }
.dc-bands th { border-bottom: 0 !important; padding: 5px 8px; }
.dc-band {
  text-align: left !important; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.dc-band--real {
  background: var(--color-surface-structure); color: var(--color-navy);
  border-radius: 6px 0 0 6px;
}
.dc-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }
.dc-c-tot { font-weight: 600; color: var(--color-navy); padding-right: 14px !important; border-left: 1px solid var(--color-border-inner); }

/* Lignes de somme (CA, total, valeur ajoutée) — blanches, la graisse suffit. */
.dc-sum td { font-weight: 600; color: var(--color-navy); }
.dc-sum--va td { color: var(--color-sage); border-top: 1px dashed var(--color-border) !important; }

/* Cellule kCHF éditable : bleu sans cadre (charte). */
.dc-num {
  border: 0; background: transparent; padding: 1px 0; font: inherit;
  color: var(--color-field-focus); width: 100%; text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.dc-num:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.dc-num::placeholder { color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); }
.dc-num--rate { width: 64px; text-align: left; }
.dc-ro { color: var(--color-text-muted); }

/* Pastille de règle + badge « Ventes & Ops » (calculé). */
.dc-rule {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  font-size: 12px; text-align: left; line-height: 1.25; color: var(--color-field-focus);
}
.dc-rule i { font-style: normal; color: var(--color-text-muted); }
.dc-rule em { display: block; font-style: normal; font-size: 10px; color: var(--color-text-muted); }
.dc-rule:disabled { cursor: default; }
.dc-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-on-tint); background: var(--color-accent-tint);
  border-radius: 999px; padding: 2px 8px;
}

/* Popover de règle — même grammaire que la card négoce (spl-pop). */
.dc-pop {
  /* fixed : le popover se place par rapport à l'ÉCRAN (il se retourne au-dessus
     de la pastille si le bas manque) et échappe au défilement de la carte. */
  position: fixed; z-index: 1400; min-width: 232px; max-height: 460px; overflow-y: auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .10); padding: 8px;
}
.dc-pop__h {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 2px 6px 6px;
}
.dc-pop__inds {
  background: var(--color-accent-tint); border-radius: 7px; padding: 6px 8px; margin-bottom: 8px;
}
.dc-pop__inds div { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; padding: 1px 0; }
.dc-pop__inds span { color: var(--color-text-muted); }
.dc-pop__inds b { color: var(--color-navy); font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.dc-pop__modes { display: flex; flex-direction: column; gap: 1px; }
.dc-pop__modes button {
  border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--color-text); padding: 5px 8px; border-radius: 6px;
}
.dc-pop__modes button:hover:not(:disabled) { background: var(--color-surface-page); }
.dc-pop__modes button.on { background: var(--color-accent-tint); color: var(--color-accent); font-weight: 600; }
.dc-pop__modes button:disabled { color: var(--color-text-muted); opacity: .5; cursor: default; }
.dc-pop__p {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.dc-pop__p span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.dc-pop__p .dc-num { width: 74px; text-align: left; font-size: 12.5px; }
.dc-sel {
  font: inherit; font-size: 12.5px; color: var(--color-field-focus);
  background: transparent; border: 0; padding: 1px 0; cursor: pointer; max-width: 150px;
}
.dc-sel:focus { outline: none; }
.dc-pop__n {
  margin: 8px 0 0; padding: 6px 8px 0; border-top: 1px solid var(--color-border-inner);
  font-size: 10.5px; color: var(--color-text-muted); line-height: 1.35;
}

/* Segments de vue (2026 mensuel · 2027 mensuel · Plan pluriannuel), mêmes
   codes que les plans S&OP. */
.dc-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; }
.dc-seg button {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 12px;
  border: 0; background: var(--color-surface-card); color: var(--color-text);
}
.dc-seg button + button { border-left: 1px solid var(--color-border); }
.dc-seg button.on { background: var(--color-accent); color: #fff; }

/* Rendu embarqué (bas du Plan des ventes) : titre de bloc discret. */
.dc-embed-title {
  font-family: "Fraunces", Georgia, serif; font-size: 16px; font-weight: 600;
  color: var(--color-navy); margin: 0;
}

/* Colonnes alignées sur le Plan des ventes (2026-08-16) : mois étroits,
   colonnes agrégées « Réel » et « À venir » séparées par un filet. */
.dc-table--m { table-layout: fixed; }
.dc-c-mo { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-c-togo {
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap;
  border-left: 1px solid var(--color-border);
}
.dc-c-lbl--rule { display: table-cell; }
.dc-c-lbl--rule .dc-lbl__txt { display: block; }
.dc-c-lbl--rule .dc-rule, .dc-c-lbl--rule .dc-badge { margin-top: 1px; }

/* Colonne RÈGLE en bout de table : dédiée, sans décaler les mois qui
   s'alignent sur la carte Chiffre d'affaires (2026-08-16). */
.dc-col-rule { width: 132px; }
/* Colonne Règle : texte À GAUCHE (les cellules de la table de plan sont
   alignées à droite par défaut — il faut le forcer). */
.dc-th-rule, .atl-table thead .dc-th-rule { text-align: left !important; padding-left: 10px !important; }
.dc-td-rule, .atl-table tbody .dc-td-rule { text-align: left !important; padding-left: 10px !important; }
.dc-td-rule .dc-rule, .dc-td-rule .dc-badge { text-align: left; }
.dc-card .dc-scroll { overflow-x: auto; }

/* Libellés alignés sur le TEXTE des lignes du plan de revenus (qui portent un
   bouton ＋/− de 27px avant le texte) — pas sur ce bouton. */
.dc-table--m th.l, .dc-table--m td.l { padding-left: 29px !important; }

/* ── Popover de règle v2 (2026-08-16) : une ligne par règle, valeur ou
   paramètre de saisie À DROITE sur la même ligne. ─────────────────────────── */
.dc-pop__h { display: flex; align-items: baseline; gap: 10px; }
.dc-pop__h span {
  margin-left: auto; font-size: 10.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--color-text-muted);
}
.dc-mode { display: flex; align-items: center; gap: 8px; border-radius: 7px; padding-right: 8px; }
.dc-mode > button {
  flex: 1 1; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
  border: 0; background: transparent; color: var(--color-text); padding: 6px 10px;
}
.dc-mode:hover { background: var(--color-accent-tint); }
.dc-mode.on { background: var(--color-accent-tint-strong); }
.dc-mode.on > button { color: var(--color-accent); font-weight: 600; }
.dc-mode > button:disabled { color: var(--color-text-muted); cursor: default; }
.dc-mode__v {
  font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text-muted);
  white-space: nowrap;
}
.dc-mode__p { display: inline-flex; align-items: center; gap: 5px; }
.dc-mode__p em { font-style: normal; font-size: 10.5px; color: var(--color-text-muted); }
.dc-mode__p .dc-num { width: 64px; text-align: right; }
.dc-mode__p .dc-sel { max-width: 120px; font-size: 12px; }

/* Entrée « Planifier ici » : détache la ligne du circuit Ventes & Ops. */
.dc-mode--free { border-bottom: 1px solid var(--color-border); margin-bottom: 4px; padding-bottom: 4px; }
.dc-mode--free > button { color: var(--color-accent); font-weight: 600; }

/* Deux blocs dans la carte des coûts directs : en-tête de groupe repliable,
   lignes en retrait (même lecture qu'au compte de résultat). */
.dc-grp > td { font-weight: 600; background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.dc-ingroup > td.l { padding-left: 28px !important; }

/* Groupe de la ligne, en tête du popover de règle. */
.dc-pop__grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--color-border-inner); }
.dc-pop__grplbl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.dc-grpbtn {
  border: 0; background: transparent; padding: 2px 6px; border-radius: 4px;
  font: inherit; font-size: 11.5px; color: var(--color-field-focus); cursor: pointer;
}
.dc-grpbtn.on { background: var(--color-accent-tint); color: var(--color-on-tint); cursor: default; }
.dc-grpbtn:disabled:not(.on) { color: var(--color-text-muted); cursor: default; }

.lex-card {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  overflow: hidden;
}
.lex-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface-card);                 /* en-tête bleu-gris charte */
  border-bottom: 1px solid var(--color-border);
}
.lex-search {
  flex: 1 1;
  font: inherit;
  font-size: 14px;
  color: #2B203E;
  color: var(--color-text, #2B203E);
  background: #fff;
  border: 1px solid rgba(43, 32, 62, 0.18);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: text;
}
.lex-count {
  font-size: 12px;
  font-weight: 600;
  color: #7A7287;
  color: var(--color-text-muted, #7A7287);
  white-space: nowrap;
}

.lex-table-wrap { overflow-x: auto; }
.lex-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lex-table thead th {
  text-align: left;
  color: #7A7287;
  color: var(--color-text-muted, #7A7287);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
}
.lex-table tbody td {
  padding: 9px 18px;
  border-top: 1px solid rgba(43, 32, 62, 0.06);
  vertical-align: top;
  color: #2B203E;
  color: var(--color-text, #2B203E);
}
.lex-table tbody tr:first-child td { border-top: none; }
.lex-table tbody tr:hover td { background: var(--color-accent-tint); }   /* hover bleu-gris charte */

.lex-fr { font-weight: 600; white-space: nowrap; }
.lex-en {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #7A7287;
  color: var(--color-text-muted, #7A7287);
  white-space: nowrap;
}
.lex-module {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #7A7287;
  color: var(--color-text-muted, #7A7287);
}
.lex-note { color: #2B203E; color: var(--color-text, #2B203E); line-height: 1.45; }
.lex-empty { color: #7A7287; color: var(--color-text-muted, #7A7287); text-align: center; padding: 18px; }

/* Chantier — sommaire du module `wip`. Rien d'inventé : tokens de la charte. */
.wip-lead {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--color-text);
}

.wip-rule {
  margin: 0 0 1.1rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.wip-empty {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* Intertitre de la liste — même voix que le label d'en-tête de card. */
.wip-listtitle {
  margin: 0 0 .35rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wip-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* Entrée de sommaire : un lien, pas un bouton d'action (pas de cadre). */
.wip-link {
  border: 0;
  background: transparent;
  padding: .4rem .5rem;
  margin-left: -.5rem;
  font: inherit;
  font-size: .9rem;
  color: var(--color-accent);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.wip-link:hover {
  background: var(--color-accent-tint);
}

/* Pont des temps — waterfall TT → TO → TR. Charte only. */

.tbc__scroll { overflow-x: auto; }
.tbc__svg { display: block; width: 100%; min-width: 560px; height: auto; }

.tbc__bar--level { fill: var(--color-accent); }
.tbc__bar--cut   { fill: var(--color-accent-soft); }
.tbc__link { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 3; }
.tbc__base { stroke: var(--color-border); stroke-width: 1; }

.tbc__val {
  font-size: 12.5px; font-weight: 700; fill: var(--color-navy);
  text-anchor: middle; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tbc__val--cut { fill: var(--color-text-muted); font-weight: 600; }
.tbc__lb  { font-size: 12px; font-weight: 700; fill: var(--color-text); text-anchor: middle; }
.tbc__lb2 { font-size: 10.5px; fill: var(--color-text-muted); text-anchor: middle; }

/* Légende : la lettre du graphique, le libellé complet, la valeur. */
.tbc__legend { list-style: none; margin: 18px 0 0; padding: 0; }
.tbc__legend li {
  display: grid; grid-template-columns: 26px 1fr auto;
  grid-gap: 12px;
  gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--color-border-inner);
}
.tbc__key {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--color-accent-soft); color: var(--color-navy);
  font-size: 11.5px; font-weight: 700; align-self: center;
}
.tbc__txt b { font-weight: 600; font-size: 13.5px; color: var(--color-text); }
.tbc__txt small { display: block; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; }
.tbc__num {
  font-weight: 600; font-size: 13.5px; color: var(--color-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.tbc__state { padding: 22px 0; color: var(--color-text-muted); font-size: 13px; }
.tbc__state--err { color: var(--color-terracotta); }

/* ── Layout maître-détail ─────────────────────────────────────────────── */
.sv-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-gap: 18px;
  gap: 18px;
  align-items: start;
}

/* ── Sommaire (maître) ────────────────────────────────────────────────── */
.sv-toc {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  overflow: hidden;
  position: sticky;
  top: 12px;
}
.sv-toc-head {
  padding: 12px;
  background: var(--color-surface-card);                 /* en-tête bleu-gris charte */
  border-bottom: 1px solid var(--color-border);
}
.sv-search {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: #1A1219;
  color: var(--color-text, #1A1219);
  background: #fff;
  border: 1px solid rgba(43, 32, 62, 0.18);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: text;
}
.sv-toc-list { padding: 6px; }
.sv-toc-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 9px 10px;
  cursor: pointer;
  font: inherit;
}
.sv-toc-item:hover { background: var(--color-accent-tint); }   /* hover bleu-gris charte */
.sv-toc-item.is-active { background: var(--color-accent-tint-strong); }
.sv-toc-title {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  line-height: 1.35;
}
.sv-toc-empty {
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

/* ── Tags catégorie ───────────────────────────────────────────────────── */
.sv-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
}
.sv-tag-juridique { background: #2B203E; background: var(--color-navy, #2B203E); }
.sv-tag-methode   { background: #B8862A; background: var(--color-amber, #B8862A); }
.sv-tag-finance   { background: #5C7A3E; background: var(--color-sage, #5C7A3E); }

/* ── Lecture (détail) ─────────────────────────────────────────────────── */
.sv-reader {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 24px 28px;
  min-width: 0;
}
.sv-reader-head {
  padding-bottom: 16px;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
  margin-bottom: 4px;
}
.sv-reader-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  margin: 8px 0 0;
}
.sv-reader-summary {
  margin: 8px 0 0;
  font-size: 14px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  line-height: 1.5;
}

.sv-section { margin-top: 22px; }
.sv-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  margin: 0 0 10px;
}
.sv-label-law { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); }

.sv-para {
  font-size: 14px;
  line-height: 1.6;
  color: #1A1219;
  color: var(--color-text, #1A1219);
  margin: 0 0 10px;
}
.sv-para:last-child { margin-bottom: 0; }

/* Extrait de loi — bloc citation, filet terracotta */
.sv-law {
  margin: 0 0 12px;
  padding: 10px 16px;
  background: var(--color-bg);         /* fond standard */
  border-left: 3px solid #BA5D4A;
  border-left: 3px solid var(--color-terracotta, #BA5D4A);
  border-radius: 0 8px 8px 0;
}
.sv-law-ref {
  font-size: 12px;
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  margin-bottom: 4px;
}
.sv-law-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1A1219;
  color: var(--color-text, #1A1219);
  font-style: italic;
}
.sv-source-note {
  font-size: 12px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  line-height: 1.45;
  margin: 6px 0 0;
}

/* Tables d'illustration — gabarit bleu-gris charte */
.sv-table-wrap { overflow-x: auto; margin-top: 4px; }
.sv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sv-table thead th {
  text-align: left;
  background: var(--color-surface-card);
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
}
.sv-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid rgba(43, 32, 62, 0.06);
  color: #1A1219;
  color: var(--color-text, #1A1219);
  vertical-align: top;
}
.sv-table tbody tr:hover td { background: var(--color-accent-tint); }
.sv-table-note {
  font-size: 12px;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  line-height: 1.45;
  margin: 8px 0 0;
}

/* Lien « Dans Logike » */
.sv-link-btn {
  margin-top: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2563EB;
  color: var(--color-input, #2563EB);
  background: transparent;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}
.sv-link-btn:hover { background: rgba(37, 99, 235, 0.06); }

/* Sources */
.sv-sources {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
}
.sv-sources li { margin-bottom: 4px; }

/* ── Responsive : pile sur petit écran ────────────────────────────────── */
@media (max-width: 820px) {
  .sv-layout { grid-template-columns: 1fr; }
  .sv-toc { position: static; }
}

/* Journal d'audit — écran de lecture.
   Toutes les couleurs viennent des tokens de la charte (index.css) : aucune
   valeur hexadécimale en dur ici. */

/* ── Filtres (rangée d'outils sous le titre) ─────────────────────────── */
.aud-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
}
.aud-filter { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.aud-filter > span {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.aud-filter select,
.aud-filter input {
  font: inherit; font-size: 12.5px; color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 6px;
  padding: 4px 8px; max-width: 220px;
}
.aud-filter select:focus,
.aud-filter input:focus { outline: none; border-color: var(--color-accent); }
.aud-filter--wide input { min-width: 200px; }
.aud-reset {
  font: inherit; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 6px; padding: 5px 10px;
}
.aud-reset:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Table ───────────────────────────────────────────────────────────── */
.aud-table { table-layout: auto; }
.aud-table td { vertical-align: top; }
.aud-col-when { white-space: nowrap; }

/* Gouttière FIXE de 16 px en tête de la colonne de gauche : le chevron
   l'occupe, les lignes sans chevron la laissent vide. Tous les horodatages
   démarrent donc au même x, groupes et lignes simples confondus. */
.aud-gutter {
  display: inline-flex; width: 16px; flex: 0 0 16px;
  align-items: center; justify-content: center; vertical-align: middle;
}
.aud-chev {
  width: 16px; height: 16px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.aud-chev svg { width: 12px; height: 12px; transition: transform .12s ease; }
.aud-chev.is-open svg { transform: rotate(90deg); }
.aud-table tr:hover .aud-chev, .aud-chev.is-open { opacity: 1; }

/* Ligne d'opération repliable : surlignage ardoise, comme tout groupement de
   l'application (standard 2026-08-17). */
.aud-table tr.aud-op.is-group { cursor: pointer; font-weight: 600; }
.aud-table tr.aud-op.is-group:hover td { background: var(--color-accent-tint-strong); }

.aud-table tr.aud-detail td {
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-inner);
}

.aud-object { color: var(--color-text); }
.aud-record { display: block; color: var(--color-text-muted); font-size: 12px; }
.aud-op .aud-record { color: var(--color-text-muted); }

.aud-inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.aud-field { color: var(--color-text-muted); }
.aud-before { color: var(--color-text-muted); text-decoration: line-through; }
.aud-after { color: var(--color-text); font-weight: 600; }
.aud-arrow { color: var(--color-accent); }
.aud-empty { color: var(--color-text-muted); font-style: italic; }
.aud-note { color: var(--color-text-muted); }

.aud-blank { color: var(--color-text-muted); text-align: center; padding: 28px 14px; }

/* ── Pied : compteur + pagination ────────────────────────────────────── */
.aud-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 2px 0; font-size: 12px; color: var(--color-text-muted);
}
.aud-more {
  font: inherit; font-size: 12px; cursor: pointer;
  background: var(--color-surface-card); color: var(--color-accent);
  border: 1px solid var(--color-accent); border-radius: 6px; padding: 6px 14px;
}
.aud-more:disabled { color: var(--color-text-muted); border-color: var(--color-border); cursor: default; }

/* Écran d'interruption + écran vide de client sans module. Charte only. */

.eb { display: grid; place-items: center; padding: clamp(30px, 8vh, 90px) 20px; }
.eb__card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(26, 18, 25, .04);
  padding: 26px 28px 22px;
  max-width: 560px; width: 100%;
}
.eb__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px;
}
.eb__title {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 21px;
  color: var(--color-navy); margin: 0 0 10px; text-wrap: balance;
}
.eb__text { margin: 0; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }
.eb__text + .eb__text { margin-top: 8px; }

.eb__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.eb__btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-card); color: var(--color-text);
}
.eb__btn:hover { background: var(--color-accent-tint); }
.eb__btn--main {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.eb__btn--main:hover { background: color-mix(in srgb, var(--color-accent) 86%, #000); }

.eb__det { margin-top: 18px; font-size: 12px; color: var(--color-text-muted); }
.eb__det summary { cursor: pointer; }
.eb__det pre {
  margin: 8px 0 0; padding: 10px 12px; overflow-x: auto;
  background: var(--color-surface-page); border-radius: 6px;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* Client sans module vendu : pas une panne, un état. */
.eb__list { margin: 12px 0 0; padding-left: 1.15em; color: var(--color-text-muted); font-size: 13.5px; }
.eb__list li { margin-top: .3em; }
.eb__list li::marker { color: var(--color-accent-soft); }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0DACD;
  background: var(--color-canvas, #E0DACD);
  padding: 2rem;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  background: var(--color-surface-card, #fff);
  border: 1px solid #DED7CB;
  border: 1px solid var(--color-border, #DED7CB);
  border-radius: 12px;
  box-shadow: 0 8px 24px color-mix(in srgb, #2B203E 8%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-navy, #2B203E) 8%, transparent);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Marque + nom, alignés sur une même ligne de base. */
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.2rem;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  letter-spacing: -0.02em;
}
.login-brand__mark { flex: none; color: #3F6470; color: var(--color-accent, #3F6470); }

.login-sub {
  margin: 0 0 1.25rem;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-size: 0.9rem;
}

.login-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  margin-top: 0.65rem;
}

.login-input {
  border: none;
  border-bottom: 1px solid #DED7CB;
  border-bottom: 1px solid var(--color-border, #DED7CB);
  background: transparent;
  padding: 0.45rem 0;
  font-size: 1rem;
  color: #2563EB;
  color: var(--color-field-focus, #2563EB);
  font-family: "Inter", system-ui, sans-serif;
  outline: none;
}

.login-input:focus {
  border-bottom-color: #2563EB;
  border-bottom-color: var(--color-field-focus, #2563EB);
}

.login-error {
  background: color-mix(in srgb, #BA5D4A 12%, white);
  background: color-mix(in srgb, var(--color-terracotta, #BA5D4A) 12%, white);
  color: #BA5D4A;
  color: var(--color-terracotta, #BA5D4A);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.login-submit {
  margin-top: 1.35rem;
  border: none;
  border-radius: 8px;
  background: #3F6470;
  background: var(--color-accent, #3F6470);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
}

.login-submit:hover:not(:disabled) {
  filter: brightness(1.05);
}

.login-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* Œil voir/masquer le mot de passe, dans le champ. */
.login-pwd { position: relative; display: block; }
.login-pwd .login-input { width: 100%; padding-right: 36px; }
.login-pwd__eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--color-text-muted); line-height: 0;
}
.login-pwd__eye:hover { color: var(--color-accent); }
.login-pwd__eye svg { width: 16px; height: 16px; }

/* Assistant — fenêtre de chat Claude (charte Logike : tokens :root only). */

/* Assistant — dans la PAGE, coin bas-gauche, contre la barre de navigation
   (2026-08-18 : il était dans la colonne du rail, entre les icônes système).
   Positionné dans .app-main, donc il suit le décalage quand la barre se
   déplie. */
.asst-fab {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-navy);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(43, 32, 62, 0.30);
}

.asst-fab svg { width: 24px; height: 24px; }
.asst-fab:hover { background: var(--color-primary); }
.asst-fab.is-open { background: var(--color-primary); }

.asst-panel {
  position: absolute;
  left: 16px;
  bottom: 72px;
  z-index: 1200;
  width: 400px;
  max-width: calc(100vw - 44px);
  height: 540px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(43, 32, 62, 0.22);
  overflow: hidden;
}

.asst-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
}
.asst-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  color: var(--color-navy);
}
.asst-scope {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  color: var(--color-text-muted);
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asst-close {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}
.asst-close:hover { color: var(--color-navy); }

.asst-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--color-text);
  background: var(--color-bg);
}

.asst-hint {
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.asst-msg {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.asst-msg--user {
  align-self: flex-end;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
}
.asst-msg--assistant {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
}
.asst-msg--busy { color: var(--color-text-muted); }

.asst-error {
  font-size: 12.5px;
  color: var(--color-terracotta);
  background: #fff;
  border: 1px solid var(--color-terracotta);
  border-radius: 10px;
  padding: 8px 12px;
}

.asst-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--color-border);
  background: #fff;
}
.asst-input textarea {
  flex: 1 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--color-text);
}
.asst-input textarea:focus {
  outline: none;
  border-color: var(--color-input);
}
.asst-input button {
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--color-navy);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.asst-input button:disabled { opacity: 0.45; cursor: default; }
.asst-input button:not(:disabled):hover { background: var(--color-primary); }

/* Barre de refus d'écriture — pleine largeur, ambre (charte : secondaire,
   signalement ponctuel). Pas terracotta : ce n'est pas une panne, c'est une
   règle ; mais elle doit se voir, d'où la pleine largeur en haut. */
.fbd-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 18px;
  background: color-mix(in srgb, var(--color-amber) 22%, var(--color-surface-card));
  border-bottom: 2px solid var(--color-amber);
  color: var(--color-text);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}
.fbd-bar__txt strong { color: var(--color-navy); }

/* Quand la barre occupe le haut, les messages se placent en dessous. */
body:has(.fbd-bar) .toast { top: 66px; }
.fbd-bar__x {
  position: absolute;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}

/* Fenêtre des hubs transverses (Administration, Paramètres) — tokens :root
   uniquement. Fond de l'application FLOUTÉ derrière (référence Grok). */

.hubm-ov {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: color-mix(in srgb, var(--color-canvas) 55%, transparent);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.hubm {
  display: flex;
  width: min(1180px, 100%);
  height: min(760px, 100%);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(43, 32, 62, .28);
  overflow: hidden;
}

/* Colonne des sections */
.hubm__nav {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  background: var(--color-surface-page);
  border-right: 1px solid var(--color-border-inner);
  overflow-y: auto;
}
.hubm__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  padding: 2px 10px 10px;
}
/* Têtes de groupe (Administration : PLATEFORME / CLIENT — nom du client). */
.hubm__grouphead {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 14px 12px 4px;
}
.hubm__grouphead--client {
  color: var(--color-accent);
  border-top: 1px solid var(--color-border);
  margin-top: 10px;
}

.hubm__item {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--color-text);
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.hubm__item:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.hubm__item.is-active {
  background: var(--color-accent-tint-strong);
  color: var(--color-accent);
  font-weight: 600;
}
.hubm__item.is-danger { color: var(--color-terracotta); }

/* Contenu de la section active */
.hubm__body {
  position: relative;
  flex: 1 1;
  min-width: 0;
  overflow: auto;
  padding: 18px 22px 24px;
  background: var(--color-surface-card);
}
.hubm__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.hubm__close:hover { background: var(--color-accent-tint); color: var(--color-navy); }

/* Le hub embarqué n'a plus besoin de son propre gabarit de page. */
.hubm__body .page-shell,
.hubm__body .page-shell--flush { padding: 0 !important; }

/* ── Unified page wrapper ────────────────────────────────────────────────────
   All page contents render inside this wrapper. Horizontal padding is set
   ONCE here, sourced from --page-px (index.css), so the topbar and every
   page share the same gutter. To change the global indent, edit --page-px.
   Individual pages set vertical padding only (top/bottom). */
.logike-page-wrap {
  padding: 0 var(--page-px);
}

/* Messages : EN HAUT AU CENTRE. En bas à droite, ils passaient inaperçus —
   l'utilisateur ne voyait pas qu'une saisie avait échoué et recommençait. */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(560px, calc(100vw - 48px));
  text-align: center;
  background: var(--color-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  animation: toast-in 0.2s ease;
}

.toast--error {
  background: var(--color-terracotta);
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Écran de démarrage — marque plein écran sur le canvas, fondu de sortie. */
.brand-splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0DACD;
  background: var(--color-canvas, #E0DACD);
  opacity: 1;
  transition: opacity .5s ease;
}
.brand-splash.is-fading { opacity: 0; pointer-events: none; }
.brand-splash__lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--color-navy);
}
.brand-splash__lockup svg { color: var(--color-accent); }
.brand-splash__lockup span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
}


/*# sourceMappingURL=main.cd9b474c.css.map*/