@import url(https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;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 */

  /* ── 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 {
  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) ──────── */
.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); }

.sb {
  /* Rail SOUDÉ : bande gauche du cadre unique (app-body), ancrée à sa hauteur
     (absolute), pas au viewport. Plus de card flottante détachée. Replié = rail
     d'icônes intégré au bord gauche ; survol = peek en overlay transitoire. */
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 248px;
  display: flex;
  z-index: 30;
  transition: width 0.15s ease;
}
.sb--collapsed { width: 58px; }
.sb--float { z-index: 40; }

/* Rail : surface crème pleine hauteur + filet droit qui le sépare du contenu.
   Pas de cadre/ombre propre (il fait partie du cadre soudé). Scrolle si besoin ;
   Settings (foot) reste calé en bas du rail. */
.sb-rail {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-rail);
  border-right: 1px solid var(--color-border-rail);
  padding: 8px 0 12px;
  overflow-y: auto;
}
/* Survol en mode replié : le rail s'élargit en overlay au-dessus du contenu —
   légère ombre droite pour le détacher le temps du peek (pas au repos). */
.sb--float .sb-rail { box-shadow: 4px 0 18px rgba(43, 32, 62, 0.10); }

/* ── Marque + tenant (tête de barre) ───────────────────────────────────── */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.sb-brand__waffle { display: inline-flex; color: var(--color-text-muted); flex: 0 0 auto; cursor: default; }
.sb-brand__waffle svg { width: 18px; height: 18px; stroke: none; fill: currentColor; }
.sb-brand__word {
  font-family: "Trebuchet MS", Georgia, serif;
  font-weight: 700; font-size: 18px; letter-spacing: -0.5px;
  color: #2B203E; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.sb-brand__vsep { width: 1px; height: 18px; background: var(--color-border); flex: 0 0 auto; }
.sb-brand__tenant { display: flex; align-items: center; gap: 6px; flex: 1 1; min-width: 0; }
.sb-brand__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sb-brand__tenant-name {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-text);
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-brand__tenant select {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-text);
  background: transparent; border: none; cursor: pointer; padding: 0;
  max-width: 100%; min-width: 0; text-overflow: ellipsis;
}
/* Mode replié (rail) : on ne garde que la gaufre, centrée. */
.sb--collapsed .sb-brand { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.sb--collapsed .sb-brand__word,
.sb--collapsed .sb-brand__vsep,
.sb--collapsed .sb-brand__tenant { display: none; }

/* Création de tenant inline (dépliée par « Nouveau client », en pied de barre). */
.sb-create { padding: 8px 14px 10px; border-top: 1px solid var(--color-border); }
.sb-create input {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 5px 9px; outline: none;
}
.sb-create input:focus { border-color: var(--color-value); background: var(--color-value-bg); }
.sb-create__btns { display: flex; gap: 6px; margin-top: 6px; }
.sb-create__btns button[type="submit"] {
  font-size: 12px; background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-sm); padding: 4px 12px; font-weight: 500;
}
.sb-create__btns button[type="button"] {
  font-size: 12px; background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 10px;
}
.sb--collapsed .sb-create { display: none; }

/* ── Bouton repli (en bas) ─────────────────────────────────────────────── */
.sb-collapse {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 20px;
  margin-bottom: 4px;
  font: inherit;
  font-size: 12px;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
}
.sb-collapse:hover { background: #F3ECE0; color: var(--color-text); }
.sb-collapse .sb-ic { color: var(--color-text-muted); }
.sb-collapse.is-pinned { color: var(--color-primary); }
.sb-collapse.is-pinned .sb-ic { color: var(--color-primary); }

/* ── Mode replié : rail d'icônes ───────────────────────────────────────── */
.sb--collapsed .sb-band-lbl,
.sb--collapsed .sb-band-cvr { display: none; }
.sb--collapsed .sb-band,
.sb--collapsed .sb-collapse { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.sb--collapsed .sb-band { border-left-width: 0; }
.sb--collapsed .sb-band--single.is-active,
.sb--collapsed .sb-band.has-active { border-left-width: 2.5px; }

/* bandeaux top-level */
.sb-band {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 20px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-left: 2.5px solid transparent;
  cursor: pointer;
  text-align: left;
}
/* Survol : voile léger dans la teinte du tenant (cohérent avec le fond de page
   teinté et la mise en évidence active) — transitoire. */
.sb-band:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
/* Bande ouverte : AUCUN fond — l'ouverture est signalée par le seul chevron.
   On met en évidence uniquement la page active (.is-active). */
.sb-band--single { font-weight: 600; }
.sb-band--single.is-active {
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent);
  color: var(--color-accent);
}
.sb-band--single.is-active .sb-ic { color: var(--color-accent); }

/* Séparateur fin au-dessus de Print : trait en retrait (pas pleine largeur). */
.sb-band--sep { position: relative; margin-top: 7px; }
.sb-band--sep::before {
  content: '';
  position: absolute;
  top: -4px; left: 20px; right: 20px;
  border-top: 1px solid var(--color-border);
}
.sb--collapsed .sb-band--sep::before { left: 12px; right: 12px; }

/* Séparateur fin sous Settings (en bas du menu), même retrait. */
.sb-band--sep-after { position: relative; margin-bottom: 7px; }
.sb-band--sep-after::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 20px; right: 20px;
  border-top: 1px solid var(--color-border);
}
.sb--collapsed .sb-band--sep-after::after { left: 12px; right: 12px; }

/* Outils transverses (Print · Savoirs · Lexique) : ton atténué pour les
   distinguer légèrement des modules métier. */
.sb-band--util { color: var(--color-text-muted); }
.sb-band--util .sb-ic { color: var(--color-text-muted); }

/* Settings : terracotta, même au repos (référentiel, ancré en bas). */
.sb-band--tenant { color: var(--color-terracotta); }
.sb-band--tenant .sb-ic { color: var(--color-terracotta); }

.sb-ic { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-muted); }
.sb-band-lbl { flex: 1 1; font-weight: 700; }
.sb-band-cvr { display: flex; color: var(--color-text-muted); }
.sb-band-cvr svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.sb-band-cvr.up svg { transform: rotate(180deg); }

/* Panneau déplié : pas de fond ni de bordures — les sous-items reposent
   directement sur la barre ; seul l'item actif est surligné. */
.sb-panel { padding: 2px 0 6px; }

/* Bande de pied (Settings) : s'ouvre vers le haut.
   column-reverse → le panneau (après l'en-tête dans le DOM) s'affiche AU-DESSUS. */
.sb-group--foot { display: flex; flex-direction: column-reverse; }

/* Pied du rail : utilitaires transverses (Print · Savoirs · Lexique) + Settings,
   ancrés en bas du rail, séparés des modules par un filet en retrait. Plus de
   card détachée — tout vit dans le rail soudé. */
.sb-foot { margin-top: auto; margin-bottom: 32px; display: flex; flex-direction: column; }
.sb-foot .sb-group--foot { margin-top: 0; }
.sb-foot-sep {
  height: 1px;
  background: var(--color-border);
  margin: 7px 20px;
}
.sb--collapsed .sb-foot-sep { margin: 7px 12px; }

.sb-util {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 7px 16px 7px 20px;
  font: inherit; font-size: 12.5px;
  color: var(--color-text-muted);
  background: transparent; border: none; cursor: pointer; text-align: left;
}
.sb-util:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); }
.sb-util.is-active { color: var(--color-accent); font-weight: 600; }
.sb-util .sb-ic { color: var(--color-text-muted); }
.sb-util.is-active .sb-ic { color: var(--color-accent); }

/* Mode replié : icônes centrées. */
.sb--collapsed .sb-util { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.sb-sub-h { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #A8A29E; color: var(--stone-400, #A8A29E); padding: 9px 18px 3px; }

.sb-sub {
  width: 100%;
  display: flex;
  align-items: center;
  /* Le texte de lecture s'aligne sous le libellé du module
     (= padding band 20 + icône 18 + gap 11). */
  padding: 6px 18px 6px 49px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--color-navy);          /* lecture = navy */
  background: transparent;
  border: none;
  border-left: 2.5px solid transparent;
  cursor: pointer;
  text-align: left;
}
.sb-sub:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.sb-sub.is-active {
  color: var(--color-navy);
  font-weight: 600;
  border-left-color: #3F6470;        /* liseré ardoise */
  background: #EEF3F4;               /* surbrillance ardoise (nav) */
}
/* Pas d'encadré bleu au clic ; anneau ardoise discret au clavier seulement. */
.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; }

/* Marqueur « · » (saisie / réglage) : occupe la colonne du texte de lecture ;
   le libellé déborde d'un cran à droite. */
.sb-sub-mark { flex: 0 0 15px; 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; }

/* Saisie : gris atténué. Réglage (Paramètres) : gris plus pâle, toujours en pied. */
.sb-sub--input   { color: #928C80; }
.sb-sub--setting { color: #A89F90; }

/* Pastille de complétude sur les saisies — 🟢 ok · 🟡 à compléter · ⚪ à remplir. */
.sb-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; flex: 0 0 auto; }
.sb-dot--ok { background: #5C8A4E; }
.sb-dot--partial { background: #B8862A; background: var(--color-amber, #B8862A); }   /* données à traiter */
.sb-dot--empty { background: transparent; border: 1.5px solid #C9C2B6; }
/* Compteur « à faire » sur la bande (effet notification). */
.sb-band-badge {
  min-width: 17px; height: 17px; border-radius: 999px;
  background: #F7E6CC; color: #8a5a14;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; flex: 0 0 auto;
}
.sb-band-cvr { margin-left: 8px; }
.sb--collapsed .sb-band-badge { display: none; }

/* Étoile « module socle » (Finance, toujours actif) — accent amber discret. */
.sb-band-mark { display: inline-flex; align-items: center; color: #B8862A; color: var(--color-amber, #B8862A); margin-left: 6px; flex: 0 0 auto; }
.sb--collapsed .sb-band-mark { display: none; }

/* Tag d'item (ex. « simulé » sur Profitabilité) — pastille texte atténuée. */
.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 + contenu) ────────────────────
   app-body = LE cadre : bordure + coins arrondis + ombre à peine perceptible,
   hauteur fixe (viewport − gouttière), overflow caché pour clipper aux coins.
   Le défilement vit DANS la zone contenu (.logike-page-wrap), pas sur la fenêtre
   → le rail reste visible en permanence, les en-têtes sticky se recalent sur
   cette zone. Pas de gouttière entre rail et contenu : ils partagent le bord,
   séparés par le seul filet droit du rail. */
.app-body {
  position: relative;
  height: calc(100vh - 24px);
  margin: 12px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-page);
  box-shadow: 0 1px 4px rgba(43, 32, 62, 0.06);
}
.app-body .logike-page-wrap {
  margin-left: 58px;                 /* rail replié intégré, sans gouttière */
  height: 100%;
  overflow-y: auto;
  background: var(--color-surface-page);
  padding: 10px 28px 16px;
  transition: margin-left 0.15s ease;
}
.app-body--pinned .logike-page-wrap { margin-left: 248px; }
.app-body .logike-page-wrap > * { padding-top: 16px; }

/* 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__month-input {
  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__month-input {
  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; }

.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);
}

/* ════════════════════════════════════════════════════════════════════════
   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;
  margin-bottom: 18px;
  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 */
  font-size: 24px;
  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: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  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: 18px;
}

.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); }

/* 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; }

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

.tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.tabs__list { display: flex; gap: 4px; }

.tabs__tab {
  appearance: none;
  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: 600;
}
/* 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 (picker d'année, actions de hub) aligné au bas de la barre. */
.tabs__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}

/* 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;
}

.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;
  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: 10px; }
.vat-grid { display: flex; flex-direction: column; gap: 10px; }
.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-end; 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: right; }
/* 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-end; gap: 8px; }
.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);
}

/* 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);
}

/* 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; }

/* 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; }

/* ── 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;
}

.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 transparent;
  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);
}

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

.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;
}

.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 {
  background: var(--color-surface-th);   /* bande d'en-tête : crème à peine perceptible (chuchote) */
  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: 0.5px 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;
}
.hr-page__table th.hr-page__col-sticky {
  background: var(--color-surface-th);
  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-surface-th);
}
/* 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-th); 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-surface-th); }
.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;
}
.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: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 8px 18px;
  cursor: pointer;
  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: 13px;
  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 : Point de départ + Équivalent FTE, alignées à gauche */
.hr-cbar__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  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 façon KpiTile : fond doux + fin filet + ombre douce, arrondi. */
.hr-cbar__tile {
  flex: 0 0 auto;
  min-width: 210px;
  background: #FDFAF4;
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px 12px;
  box-shadow: 0 1px 2px rgba(43, 32, 62, 0.05);
}
/* Tuile mise en évidence — fond ardoise doux (charte). */
.hr-cbar__tile--highlight {
  background: var(--color-accent-tint);
}
/* Pied de tuile : part vs OT (OT = 100%). */
.hr-cbar__tile-pct {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 0.5px dashed var(--color-border);
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-cbar__tile-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.hr-cbar__tile-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}
.hr-cbar__tile-row > span { color: var(--color-text-muted); }
.hr-cbar__tile-row > b {
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}
.hr-cbar__tile-row--ded > b { color: var(--terracotta-dark); }
.hr-cbar__tile-row--ot,
.hr-cbar__tile-row--cap {
  margin-top: 2px;
  padding-top: 3px;
  border-top: 0.5px solid var(--color-border);
}
.hr-cbar__tile-row--ot > span,
.hr-cbar__tile-row--ot > b { color: var(--terracotta-dark); }
.hr-cbar__tile-row--ot > b { font-size: 13px; }
.hr-cbar__tile-row--cap > span,
.hr-cbar__tile-row--cap > b { color: var(--sage-dark); }
.hr-cbar__tile-row--pt > span,
.hr-cbar__tile-row--pt > b { color: var(--sage-dark); }
.hr-cbar__tile-row--pt > b { font-size: 13px; }

.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;
}
.hr-moves__title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.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:hover { opacity: 0.85; }
.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;
}
/* 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; }
.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;
}
.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;
}
.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;
}
.hr-synth--side {
  margin-bottom: 0;
}
.hr-chart--side {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.hr-chart--side .hr-chart__bars {
  flex: 1 1;
}
@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;
}

/* ── 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; }

.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; }

/* 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); }
.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);
}

/* 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%; }
}

/* 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; }

.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;
  padding: 40px 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); }
.page-table.pl-actuals thead .pl-grp-cumul,
.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-actuals tbody tr.pl-row--subtotal td.pl-line,
.page-table.pl-actuals 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; }

.pl-caret {
  display: inline-block;
  width: 14px;
  color: var(--color-text-muted);
  font-size: 9px;
  cursor: pointer;
}
/* Réel seul : chevron SVG (identique au Bilan), en couleur du texte, pivote à l'ouverture. */
.pl-actuals .pl-caret { width: 16px; }
.pl-actuals .pl-chev {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: var(--color-text);
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.pl-actuals .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-actuals tbody tr.pl-collapsible .pl-chev {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.page-table.pl-actuals tbody tr.pl-collapsible:hover .pl-chev,
.page-table.pl-actuals tbody tr.pl-collapsible .pl-chev.is-open {
  opacity: 1;
}
.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);
  font-style: italic;
}
.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;
  font-style: italic;
}

/* ── 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;
}
.pl-num--calc { font-style: italic; }
.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; }

/* 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; }

/* ── 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; }

/* 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); }

/* É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; }

/* ═══════════════════════════════════════════════════════════════════════════
   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; }
.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;
}
.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 (page de garde globale) ───────────────────────────────────────── */
.ppl-print__cover {
  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;
  }
  /* Numéro de page (PDF + HTML imprimés). Bloc @page SÉPARÉ du size/margin :
     si un navigateur (Safari) ne parse pas les marge-boxes, il n'invalide que
     ce bloc — l'orientation paysage du bloc ci-dessus reste intacte. Chrome /
     Edge rendent ces compteurs nativement. */
  @page {
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 8pt;
      color: #777;
    }
    @bottom-left {
      content: "Logike";
      font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 8pt;
      color: #9a8c78;
      letter-spacing: 0.08em;
    }
  }
  .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; }

/* 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;
}

/* ── 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 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. */
.fps-cmp--fill { width: 100%; }
.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); }

/* ── Ligne KPI « Liquidité & soutenabilité » en tête de la Synthèse (Rapports
   standards) : 4 postes + variation sémantique vs mois précédent.
   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. */
/* Une seule card : en-tête blanc à filet + 5 KPI séparés par un filet. */
.fss-liq {
  align-self: flex-start; max-width: 950px; 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-liq__tiles { display: grid; grid-template-columns: repeat(7, 1fr); }
.fss-liq__tile { padding: 12px 16px; border-left: 1px solid var(--color-border-inner); }
/* Variation de trésorerie YTD : signe coloré (sage = hausse, terracotta = baisse). */
.fss-tval-up { color: var(--color-sage); }
.fss-tval-down { color: var(--color-terracotta); }
.fss-liq__tile:first-child { border-left: none; }
.fss-liq__tlbl { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; margin-bottom: 6px; min-height: 1.4em; }
.fss-liq__tlbl small { color: var(--stone-400); }
.fss-liq__tval { font-size: 21px; font-weight: 600; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.fss-liq__tval small { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
.fss-liq__var { margin-top: 6px; font-size: 11.5px; font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.fss-liq__var--up { color: var(--color-sage); }
.fss-liq__var--down { color: var(--color-terracotta); }
@media (max-width: 900px) { .fss-liq { align-self: stretch; } .fss-liq__tiles { grid-template-columns: repeat(3, 1fr); max-width: 100%; } }

/* 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) pour que
   l'ensemble tienne en A4 paysage — les colonnes se calent sur leur contenu. */
.fin-screenprint .page-table th,
.fin-screenprint .page-table td { min-width: 0 !important; }
.fin-screenprint .pl-col-line,
.fin-screenprint .bs-col-line { width: auto !important; min-width: 150px !important; }
.fin-screenprint .pl-spacer,
.fin-screenprint .bs-spacer { width: 5px !important; min-width: 5px !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: 7pt !important; }
.fin-screenprint .cf-table .cf-year-grp { font-size: 8pt !important; }
.fin-screenprint .cf-recon-cap { font-size: 7pt !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; }
.fin-screenprint .cf-card,
.fin-screenprint .cf-card--bare { box-shadow: none; border: none; padding: 0; }
.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 = 4). */
.fin-screenprint .lk-card,
.fin-screenprint .fwc-subcard { margin-bottom: 5mm; box-shadow: none; }

/* ── 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. */
.fin-screenprint .fss-liq { max-width: 100%; margin: 0 0 3mm; page-break-inside: avoid; break-inside: avoid; }
.fin-screenprint .fss-liq__tiles { grid-template-columns: repeat(7, 1fr); }
.fin-screenprint .fss-liq__lbl { padding: 1.2mm 2mm; }
.fin-screenprint .fss-liq__lbl span { font-size: 7pt; }
.fin-screenprint .fss-liq__lbl small { font-size: 5.6pt; }
.fin-screenprint .fss-liq__tile { padding: 1.3mm 1.8mm; }
.fin-screenprint .fss-liq__tlbl { font-size: 5.4pt; line-height: 1.12; margin-bottom: 0.6mm; min-height: 0; }
.fin-screenprint .fss-liq__tval { font-size: 10pt; }
.fin-screenprint .fss-liq__tval small { font-size: 5.6pt; }
.fin-screenprint .fss-liq__var { font-size: 5.4pt; margin-top: 0.6mm; }

/* 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;
}

/* 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); font-style: italic; }
.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); font-style: italic; }

/* 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); font-style: italic; }

/* ── 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. */
.bs-foot-wrap { margin-top: 14px; }
.bs-foot-table { background: none; }

/* 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; }

/* 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;
}
.cf-table col.cf-col-label  { width: 240px; }
.cf-table col.cf-col-amount { width: 120px; }
.cf-table col.cf-col-month { width: 88px; }
/* 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; }
/* Libellés longs : on autorise le retour à la ligne plutôt que d'élargir la
   colonne (sinon les valeurs repartent à droite). */
.cf-table td.cf-label-indent,
.cf-row--section td:first-child,
.cf-row--recon-head td { white-space: normal; }

/* ── 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 { font-style: italic; }
/* 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; }

/* ── 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); font-style: italic; }
.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); }

/* 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 secondaire (DSO/DIO/DPO) — titre porté par la ligne des mois ─────── */
.fwc-subcard {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: visible;
}
.fwc-subcard__warn {
  color: var(--color-terracotta);
  font-size: 12px;
  margin: 10px 16px 0;
}
/* Titre dans la colonne libellé de l'en-tête (sur 2 lignes) + sous-titre dessous.
   Détache nettement le titre du 1er mois et économise une ligne de titre. */
.fwc-subhead__title {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px; font-weight: 600; color: var(--color-navy);
  line-height: 1.25;
}
.fwc-subhead__title .fwc-info { margin-left: 6px; vertical-align: middle; }
.fwc-subhead__sub {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 400; color: var(--color-text-muted);
}

/* 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; }

/* Cards secondaires (DSO/DIO/DPO) : en-tête mois non gras + fond léger (bleu-gris
   charte) ; libellés mois alignés en bas, titre (multi-lignes) aligné en haut. */
.fwc-subcard .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;
}
.fwc-subcard .fwc-table thead th.fwc-subhead { vertical-align: top; }

/* Délais de rotation fusionnés : en-tête des mois partagé au sommet (RollHead),
   chaque délai introduit par une ligne-titre pleine largeur SUR 1 LIGNE (Inter
   navy — charte : le contenu de table est en Inter, pas en serif), séparée par un
   filet. */
.fwc-row--secttitle td.fwc-secttitle {
  text-align: left;
  white-space: nowrap;                       /* titre sur 1 seule ligne */
  padding-top: 14px;
  padding-bottom: 4px;
  border-top: 1px solid var(--color-border);
}
.fwc-subcard .fwc-table tbody tr.fwc-row--secttitle:first-child td { border-top: none; }
.fwc-secttitle__t {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--color-navy);
}
.fwc-secttitle__sub {
  margin-left: 12px;
  font-size: 11.5px; color: var(--color-text-muted);
}
.fwc-secttitle .fwc-info { margin-left: 6px; }

/* 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;
}


/* 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;
}
.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 — hub Finance (registre commentaires + actions) ────────────────────
   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 à CFO.
   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);
}

/* Carte « Pont de trésorerie » (onglet Suivi) : le pont est court et large →
   on le centre verticalement dans la carte étirée à hauteur du graphe voisin,
   et on le laisse occuper toute la largeur. */
.cfo-pont-card .std-card__body { display: flex; align-items: center; }
.cfo-pont-card .cf-synth { width: 100%; }

/* ── Composeur ──────────────────────────────────────────────────────────── */
.cfo-journal { display: flex; flex-direction: column; gap: 14px; }
.cfo-journal__new {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 0 16px; border-bottom: 1px solid var(--color-border);
}
.cfo-journal__new-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfo-journal__date {
  font-family: inherit; font-size: 13px; color: var(--color-field-focus);
  border: none; background: transparent; padding: 4px 2px;
}
.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 textarea {
  width: 100%; min-height: 72px; border: none; border-radius: 10px;
  background: var(--color-surface-page); resize: vertical; font-family: inherit; font-size: 13.5px;
  color: var(--color-text); line-height: 1.6; outline: none; padding: 10px 12px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s;
}
.cfo-journal textarea:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-field-focus) 40%, transparent); }
.cfo-journal textarea::placeholder { color: var(--color-text-muted); }

/* Sous-bloc « Actions liées » du composeur */
.cfo-linked { border-top: 1px solid var(--ck-line); padding-top: 10px; }
.cfo-linked__lbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ck-muted); margin-bottom: 6px;
}
.cfo-linked__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cfo-linked__item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ck-ink); }
.cfo-linked__text { flex: 1 1 auto; }
.cfo-linked__resp {
  flex: 0 0 auto; font-size: 11px; color: var(--color-navy);
  background: var(--color-accent-tint); border-radius: 10px; padding: 1px 8px;
}
.cfo-linked__add { display: flex; gap: 8px; align-items: center; }
.cfo-linked__in {
  border: none; border-bottom: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--color-field-focus); padding: 3px 0; outline: none;
}
.cfo-linked__in:focus { border-bottom-color: color-mix(in srgb, var(--color-field-focus) 50%, transparent); }
.cfo-linked__in::placeholder { color: var(--color-text-muted); }
.cfo-linked__in:first-child { flex: 1 1 auto; }
.cfo-linked__in--resp { flex: 0 0 150px; }
.cfo-linked__btn {
  flex: 0 0 auto; border: 1px solid var(--ck-line); background: #fff; cursor: pointer;
  border-radius: 6px; width: 28px; height: 28px; font-size: 15px; color: var(--ck-navy); line-height: 1;
}
.cfo-linked__btn:disabled { opacity: .4; cursor: default; }
.cfo-x {
  border: none; background: none; cursor: pointer; color: var(--ck-missing);
  font-size: 16px; line-height: 1; padding: 0 2px;
}
.cfo-x:hover { color: var(--ck-terra); }

/* ── Pile des notes (récent d'abord) ───────────────────────────────────────── */
.cfo-note-row {
  display: grid; grid-template-columns: 96px 1fr; grid-gap: 14px; gap: 14px; align-items: start;
  padding: 12px 6px; border-top: 1px solid var(--ck-line); cursor: pointer; border-radius: 8px;
}
.cfo-note-row:hover { background: var(--color-accent-tint); }
.cfo-note-row__date {
  font-family: "Fraunces", Georgia, serif; font-size: 14px; font-weight: 500;
  color: var(--ck-navy); white-space: nowrap; padding-top: 2px;
}
.cfo-note-row__main { min-width: 0; }
.cfo-clamp {
  font-size: 13.5px; color: var(--ck-ink); line-height: 1.55; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.cfo-journal__empty { font-size: 13px; color: var(--ck-missing); font-style: italic; padding: 8px 0; }

/* Chips sous une note */
.cfo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cfo-chip-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-accent-tint); border-radius: 14px; padding: 2px 4px 2px 10px;
}
.cfo-chip-lbl { font-size: 12px; color: var(--ck-ink); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 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); }

/* ── Onglet Actions — Messages clés ─────────────────────────────────────────── */
.cfo-keys { margin-bottom: 18px; }
.cfo-keys__lbl, .cfo-synth__lbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ck-muted); margin-bottom: 6px;
}
.cfo-keys__empty { font-size: 13px; color: var(--ck-missing); font-style: italic; }
.cfo-keys__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cfo-keys__item { display: flex; gap: 12px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.cfo-keys__item:hover { background: var(--color-accent-tint); }
.cfo-keys__date { flex: 0 0 84px; color: var(--ck-muted); font-size: 12px; }
.cfo-keys__txt { color: var(--ck-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Onglet Actions — Synthèse aplatie ──────────────────────────────────────── */
.cfo-synth__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.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; }
.cfo-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cfo-act__row {
  display: grid; grid-template-columns: 88px 1fr 150px 84px; grid-gap: 12px; gap: 12px; align-items: center;
  padding: 7px 6px; border-top: 1px solid var(--ck-line); font-size: 13.5px;
}
.cfo-act__label { color: var(--ck-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfo-act__resp { color: var(--ck-muted); font-size: 12px; }
.cfo-act__date { color: var(--ck-muted); font-size: 12px; text-align: right; }

/* ── Carte détail (overlay) ─────────────────────────────────────────────────── */
.cfo-overlay {
  position: fixed; inset: 0; background: rgba(26, 18, 25, .38);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px; z-index: 1000;
}
.cfo-overlay__card {
  background: #fff; border-radius: 14px; width: min(640px, 100%); max-height: 80vh; overflow: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22); padding: 20px 24px;
}
.cfo-overlay__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cfo-overlay__date { font-family: "Fraunces", Georgia, serif; font-size: 18px; color: var(--ck-navy); }
.cfo-overlay__actions { display: flex; align-items: center; gap: 10px; }
.cfo-overlay__del {
  border: 1px solid var(--ck-line); background: #fff; color: var(--color-terracotta);
  cursor: pointer; font-family: inherit; font-size: 12px; border-radius: 7px; padding: 4px 12px;
}
.cfo-overlay__close {
  border: none; background: none; cursor: pointer; color: var(--ck-muted); font-size: 24px; line-height: 1; padding: 0 4px;
}
.cfo-overlay__text {
  font-size: 14px; color: var(--ck-ink); line-height: 1.65; white-space: pre-wrap; margin-bottom: 16px;
}
.cfo-overlay__todos { border-top: 1px solid var(--ck-line); padding-top: 12px; }

/* 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: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px;
  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); }

/* 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 { font-style: italic; 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 { font-style: italic; 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; font-style: italic; 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); }

/* 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 { font-style: italic; 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. */
.fcp-check td { border-top: 2px solid var(--color-border); background: var(--color-accent-tint); font-size: 0.8rem; }
.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); }
.fcp-chart { padding: 0.6rem 0.4rem 0.8rem; }
.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; }

/* 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;
}

/* 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; }

/* 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; }

/* le head de la table by-person : titre à gauche + filtre à droite */
.tcp-card > .tcp-ptable-head {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
}
.tcp-card > .tcp-ptable-head > .tcp-tit {
  margin: 0; padding: 0; background: transparent; border: none;
}
.tcp-card > .tcp-ptable-head .tcp-ptable-filter { margin: 0; }

/* 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); }

/* 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); }

/* 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.
   Bloc CSS .tres-modal*/.tres-form-grid retiré (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;
}

.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; }

/* ── 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; }
}

.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;
}

.login-brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.75rem;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  letter-spacing: -0.02em;
}

.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;
}

/* Assistant — fenêtre de chat Claude (charte Logike : tokens :root only). */

.asst-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1200;
  width: 48px;
  height: 48px;
  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);
}
/* Sidebar dépliée (épinglée, 248px) : décaler le FAB sur le bord droit du rail
   pour qu'il ne recouvre plus les libellés Utilitaires (alignés à gauche). */
.app-body--pinned ~ .asst-fab { left: 188px; }

.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: fixed;
  left: 22px;
  bottom: 82px;
  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); }

/* ── 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);
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--color-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  animation: toast-in 0.2s ease;
}

.toast--error {
  background: var(--color-terracotta);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/*# sourceMappingURL=main.d6344b9b.css.map*/