@import url(https://fonts.googleapis.com/css2?family=Schibsted+Grotesk: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 */

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

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

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

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

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

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

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

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

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

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius:    8px;
  --radius-sm: 4px;
  /* Coins de CARTE (décision 2026-09-01) : 8 px partout, un seul réglage. */
  --radius-card: 8px;

  /* ── Dimensions structurantes du CADRE (2026-09-17) ──────────────────────
     Les seules valeurs de gabarit de toute l'application : le cadre, le menu,
     la gouttière, le rythme vertical, la typographie et la hauteur des
     contrôles. Un écran n'en redéfinit AUCUNE — c'est ici qu'on déplace un
     bord, pas dans une feuille de page. (Avant : quatre tokens de dimension
     pour cent neuf de couleur, et quatre-vingt-trois feuilles de page qui
     réinventaient chacune ses marges.) */

  /* Cadre */
  --topbar-h:       56px;    /* bandeau des modules */
  --nav-w:          216px;   /* colonne du menu, et bloc client du bandeau */
  --page-px:        24px;    /* gouttière horizontale du contenu */
  --cmdbar-h:       34px;    /* ligne de commandes contextuelles */
  --cmdbar-gap:     16px;    /* de cette ligne à la première carte */

  /* Rythme vertical et espacements */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;

  /* Contrôles */
  --h-control:      32px;    /* bouton, champ, sélecteur */
  --h-control-sm:   28px;    /* icône seule, pastille */

  /* Typographie — tailles, les deux familles restant définies plus haut */
  --fs-title:     22px;      /* titre de page */
  --fs-section:   16px;      /* titre de card */
  --fs-body:      13.5px;    /* texte courant, libellés de menu */
  --fs-small:     12px;      /* indications, unités */
  --fs-micro:     11px;      /* têtes de groupe en petites capitales */

  /* Compatibilité : l'ancien nom reste le temps que les feuilles migrent. */
  --topbar-height:  var(--topbar-h);
}

/* ── Jeux de couleurs par CLIENT (tenants.ui_theme, 2026-09-01) ────────────
   Le défaut (:root ci-dessus) = ARDOISE, la charte historique. Deux
   overrides : 'olive' (les couleurs du site), 'glacier' (bleu-gris lumineux) et 'mono'
   (noir/blanc). SEULS les tokens changent — aucun composant ne connaît le
   thème. */
:root[data-ui-theme='olive'] {
  --color-canvas:        #E5E0CC;
  --color-surface-page:  #F1F0EB;
  --color-surface-rail:  #FBFAF6;
  --color-border:        #C6C2AE;
  --color-border-inner:  #E5E2D4;
  --color-accent:        #787252;
  --color-accent-tint:   #F1EFE4;
  --color-accent-tint-strong: #E5E0CC;
  --color-accent-soft:   #C8BF92;
  --color-on-tint:       #5C573E;
  --color-text:          #1E1E1E;   /* noir plus franc (retour Olivier) */
  --color-text-muted:    #5F5E5A;   /* un cran plus foncé (2026-09-12) : #767670 passait tout juste sur blanc */
  --color-navy:          #1E1E1E;
}
:root[data-ui-theme='glacier'] {
  /* Première version de la palette (retour Olivier : la v2 était trop
     glaciale) — fonds bleu-gris un cran plus présents, accent bleu acier. */
  --color-canvas:        #E9EDF1;
  --color-surface-page:  #F2F4F7;
  --color-surface-rail:  #FBFCFD;
  --color-border:        #C9D2DA;
  --color-border-inner:  #DDE4EA;
  --color-accent:        #41637F;
  --color-accent-tint:   #EDF2F6;
  --color-accent-tint-strong: #DEE7EE;
  --color-accent-soft:   #A8BCCB;
  --color-on-tint:       #365468;
  --color-text:          #232A31;
  --color-text-muted:    #6E7A85;
  --color-navy:          #232A31;
}
:root[data-ui-theme='mono'] {
  --color-canvas:        #E8E8E6;
  --color-surface-page:  #F2F2F0;
  --color-surface-rail:  #FBFBFA;
  --color-border:        #D6D4CE;
  --color-border-inner:  #E8E6E0;
  --color-accent:        #2E2E2B;
  --color-accent-tint:   #F0F0EE;
  --color-accent-tint-strong: #E3E3E0;
  --color-accent-soft:   #C9C8C2;
  --color-on-tint:       #3A3A36;
  --color-text:          #1F1F1F;
  --color-text-muted:    #8A8A86;
  --color-navy:          #1F1F1F;
}

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

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

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

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

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

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

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

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

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

/* ── Grille KPI à plat (dans une card, séparés par un fin trait) ────────── */
.lk-kpis { display: grid; grid-gap: 0; gap: 0; }
.lk-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 18px;
  border-left: 1px solid #E7E5E4;
  border-left: 1px solid var(--color-border, #E7E5E4);
}
.lk-kpi:first-child { border-left: none; padding-left: 0; }
.lk-kpi .lk-kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #78716C; color: var(--color-text-muted, #78716C); }
.lk-kpi .lk-kpi-val { font-family: "Schibsted Grotesk", Inter, system-ui, sans-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); }

/* ── Bascule segmentée — STANDARD (2026-08-26) ──────────────────────────────
   Le format unique des bascules à choix exclusif de l'application : libellé en
   petites capitales atténué, groupe de boutons dans un cadre arrondi, choix
   actif en aplat accent. Réf. d'origine : Planification › mouvements
   (« Vue : Tableau | Frise »). Composant : components/SegmentedToggle.js —
   ne pas recoder ce costume à la main ailleurs. */
.lk-seg { display: flex; align-items: center; gap: 8px; }
 /* Libellé d'un filtre (SEGMENT, MODE, FILTRE…) : un seul costume pour les
   trois formes, afin qu'une barre se lise d'une seule voix. */
.lk-seg__lbl, .lk-pills__lbl, .lk-filter-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.lk-seg__group {
  display: flex; gap: 2px; padding: 2px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 9px;
}
.lk-seg__btn {
  font: inherit; font-size: 12.5px; padding: 4px 12px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--color-text-muted); cursor: pointer;
  white-space: nowrap;
}
.lk-seg__btn.is-on { background: var(--color-accent); color: #fff; font-weight: 600; }
.lk-seg__btn:hover:not(:disabled):not(.is-on) { color: var(--color-text); background: var(--color-accent-tint); }
/* Option sans donnée : atténuée et inerte, jamais retirée (2026-09-17). */
.lk-seg__btn:disabled { color: var(--color-text-muted); opacity: .5; cursor: not-allowed; }
/* Taille LARGE : les bascules de portée page (cf. PageViews). */
.lk-seg--lg .lk-seg__btn { padding: 6px 14px; font-size: 13.5px; }
.lk-seg--lg .lk-seg__group { border-radius: 10px; }
.lk-seg__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Choix actif en terracotta : réservé à un état qui TRONQUE ce qu'on lit
   (« Actifs » du filtre de personnes). Voir SegmentedToggle, prop `tone`. */
.lk-seg__btn--alert.is-on { background: var(--color-terracotta); color: #fff; }

/* ── Barre de filtre — FORMAT STANDARD (décision 2026-08-27) ──────────────
   Un seul costume pour tous les filtres de l'application. La barre aligne
   ce qu'on lui donne ; chaque filtre choisit sa forme :
     · boutons visibles  → <SegmentedToggle> (exclusif) ou `multiple` (plusieurs)
     · saisie qui propose→ <FilterSearch> (personne, groupe, service…)
     · liste déroulante  → <select className="lk-filter-select">
   Masquer un filtre = ne pas le passer. Les valeurs vivent ICI : une page
   ne redéfinit plus son propre costume de filtre. */
.lk-filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
 /* Bande de filtres pleine largeur, sous l'en-tête d'une card (décision
   2026-08-27) : fond RAIL, pour qu'on voie d'un coup d'œil ce qui filtre et ce
   qui est filtré. Une card en porte au plus deux — les filtres, puis les
   pastilles, qui ont leur propre bande parce qu'elles se replient. */
.lk-filterbar--row {
  padding: 9px 16px;
  background: var(--color-surface-rail);
  border-bottom: 1px solid var(--color-border-inner);
}
/* Même bande, dans un corps de card qui porte déjà son padding. */
.lk-filterbar--under { margin: 0 0 12px; }
.lk-filter-select,
.lk-filter-input {
  font-family: inherit; font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface-card);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
}
.lk-filter-select { cursor: pointer; }
.lk-filter-input::placeholder { color: var(--color-text-muted); }
.lk-filter-select:focus, .lk-filter-input:focus { border-color: var(--color-accent); }

/* Saisie qui propose (typeahead) : champ + liste de suggestions + jetons. */
.lk-ta { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lk-ta__input { min-width: 150px; }
.lk-ta__menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 220px; max-height: 240px; overflow-y: auto;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(43, 32, 62, .18);
  padding: 4px;
}
.lk-ta__opt {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13px; color: var(--color-text);
  background: transparent; border: 0; border-radius: 7px;
  padding: 6px 9px; cursor: pointer;
}
.lk-ta__opt:hover, .lk-ta__opt.is-active { background: var(--color-accent-tint); }
/* Intertitre de nature : un seul champ peut proposer plusieurs dimensions
   (Groupe, Collaborateur…) sans qu'on confonde les lignes. */
.lk-ta__kind {
  margin: 6px 0 2px; padding: 0 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.lk-ta__kind:first-child { margin-top: 2px; }
.lk-ta__empty { padding: 7px 9px; font-size: 12.5px; color: var(--color-text-muted); }
/* Jeton d'une valeur retenue : on le retire d'un clic sur la croix. */
.lk-ta__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--color-on-tint);
  background: var(--color-accent-tint); border-radius: 999px;
  padding: 3px 4px 3px 10px;
}
.lk-ta__chip-kind {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted); margin-right: 5px;
}
.lk-ta__chip-x {
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  color: var(--color-text-muted); font-size: 12px; padding: 2px 5px; border-radius: 999px;
}
.lk-ta__chip-x:hover { color: var(--color-terracotta); }

/* ── Filtre en pastilles — STANDARD (décision 2026-08-27) ─────────────────
   Une valeur = une pastille autonome, retenue en aplat navy à coche. Elles
   passent à la ligne, ce que le groupe segmenté ne sait pas faire : c'est la
   forme des filtres à valeurs nommées et nombreuses (segments d'une offre).
   Voir components/PillFilter.js. Origine : People › Chiffres clés. */
.lk-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lk-pills__lbl { margin-right: 2px; }
.lk-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 5px 12px;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.lk-pill:hover { border-color: var(--color-navy); }
.lk-pill.is-on { color: #fff; background: var(--color-navy); border-color: var(--color-navy); }
.lk-pill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lk-pill__mark { font-size: 11px; line-height: 1; }

/* ── Bouton d'action d'une card — STANDARD (décision 2026-08-27) ──────────
   Ce qui AJOUTE ou MODIFIE, sur la ligne de titre : contour discret, texte
   ARDOISE (l'accent du chrome). Le terracotta reste réservé aux ALERTES et à
   ce qui détruit ; un ajout n'est pas une alerte. */
.lk-btn {
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-accent);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.lk-btn:hover { background: var(--color-accent-tint); border-color: var(--color-accent); }
/* Bouton DISCRET : un lien qui mène ailleurs, à côté d'actions qui font. Pas
   de cadre — il ne se dispute pas l'œil avec elles (2026-09-01). */
.lk-btn--quiet {
  background: transparent; border-color: transparent; font-weight: 500;
  color: var(--color-text-muted); padding-left: 6px; padding-right: 6px;
}
.lk-btn--quiet:hover { background: transparent; border-color: transparent; color: var(--color-accent); }

/* Bouton d'AFFICHAGE (montrer / masquer une famille de colonnes) : l'œil dit
   l'état, l'aplat le confirme. */
.lk-btn--toggle { display: inline-flex; align-items: center; gap: 6px; }
.lk-btn--toggle svg { width: 14px; height: 14px; }
.lk-btn--toggle.is-on { background: var(--color-accent-tint); border-color: var(--color-accent); }

/* ════════════════════════════════════════════════════════════════════════
   STANDARD DE CARTE — 7 zones, ordre fixe (proto validé le 2026-08-27).
   ENTÊTE = comment je regarde (vue, base de calcul, création).
   TOOLBAR = ce que je regarde (sous-ensemble, période, recherche).
   Test de classement : un contrôle qui change la REPRÉSENTATION ou la base de
   calcul va dans l'entête ; un contrôle qui RÉDUIT les lignes va dans la
   toolbar. Composant : components/CardShell.js — aucune card ne recompose son
   entête à la main. Charte inchangée : seuls les tokens existants servent.
   ════════════════════════════════════════════════════════════════════════ */
/* Filet bas TOUJOURS présent (2026-08-29) : il venait du bord haut de la
   toolbar, donc il disparaissait quand on repliait les filtres — l'entête
   flottait alors sur le tableau. */
.lk-cs__hd { padding: 12px 18px 10px; border-bottom: 1px solid var(--color-border); }
.lk-cs__hd1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 34px;
}
/* L'entête tient UNE ligne (2026-08-30) : les contrôles ne se replient pas,
   c'est le titre qui cède la place. L'entonnoir ferme toujours la ligne. */
.lk-cs__hd-r { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
.lk-cs__hd1 > div:first-child { min-width: 0; }
.lk-cs__ttl {
  margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Sous-titre = CONTEXTE (base de calcul, période clôturée, unité), jamais une
   instruction. */
.lk-cs__sub { margin: 3px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }

/* Toolbar REPLIABLE (2026-08-27) : la barre se plie quand elle ne sert pas.
   L'animation porte sur la ligne de grille, la seule façon d'animer une
   hauteur qu'on ne connaît pas d'avance. */
.lk-cs__tbwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; }
.lk-cs__tbwrap.is-closed { grid-template-rows: 0fr; }
.lk-cs__tbclip { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .lk-cs__tbwrap { transition: none; } }

/* Bouton entonnoir de l'entête : ouvre la barre et porte le compte. */
.lk-funnel {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--color-accent);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
.lk-funnel svg { width: 13px; height: 13px; }
.lk-funnel:hover { border-color: var(--color-accent); }
.lk-funnel.is-open { background: var(--color-accent-tint); }
.lk-funnel.is-active { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* Toolbar : filtres à gauche, portée puis recherche à droite. */
/* APLAT ARDOISE CLAIR (2026-08-27, remplace le crème puis le dégradé) : la
   barre doit se distinguer du blanc de la card sans virer au beige. On reste
   dans la seule famille d'accent de la charte. */
.lk-cs__tb {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 18px; min-height: 46px;
  background: var(--color-accent-tint-strong);
  border-bottom: 1px solid var(--color-accent-soft);
}
/* BARRE D'ÉTAT : un filtre actif teinte la barre. La couleur ne décore pas,
   elle dit qu'on ne lit qu'une partie du tableau. */
/* Un filtre actif fonce d'un cran : même famille, lecture immédiate. */
.lk-cs__tb.is-active {
  background: color-mix(in srgb, var(--color-accent) 22%, #fff);
  border-top-color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.lk-cs__tb-l, .lk-cs__tb-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lk-cs__tb-r { justify-content: flex-end; }

/* Bande de synthèse (cartes d'analyse seulement). */
.lk-cs__kpi { display: flex; gap: 34px; padding: 12px 18px; flex-wrap: wrap; border-top: 1px solid var(--color-border); }
/* Bande KPI collée à l'entête (aucune toolbar entre les deux) : l'entête porte
   déjà son filet bas, un second trait ferait un double filet. */
.lk-cs__hd + .lk-cs__kpi { border-top: none; }
/* Une bande qui porte sa PROPRE grille doit occuper la largeur : en enfant de
   flex, une grille `auto-fit` se replie sur une colonne (2026-08-29). */
.lk-cs__kpi > * { min-width: 0; }
.lk-cs__kpi-k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.lk-cs__kpi-v { font-size: 22px; font-weight: 600; color: var(--color-accent); margin-top: 2px; }

/* Recherche : TOUJOURS le dernier élément à droite de la toolbar. */
.lk-search { position: relative; display: inline-flex; align-items: center; }
.lk-search__ic {
  position: absolute; left: 9px; width: 14px; height: 14px;
  color: var(--color-text-muted); pointer-events: none;
}
.lk-search__in {
  min-width: 210px; padding-left: 28px;
  border-radius: 8px;
}

/* Entonnoir : ouvre la zone des filtres, pour qu'on reconnaisse la ligne qui
   RESTREINT ce qu'on lit. */
.lk-cs__tb-ic { width: 15px; height: 15px; color: var(--color-text-muted); flex: 0 0 auto; }

/* Compteur de filtres : visible seulement si au moins un filtre est actif. */
.lk-filtercount {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--color-accent); margin-left: 4px;
}
/* La croix DÉFAIT : seul emploi du terracotta dans une card. */
.lk-filtercount__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  font: inherit; font-size: 11px; line-height: 1;
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 10%, transparent);
  border: 0; padding: 0; cursor: pointer;
}
.lk-filtercount__clear:hover { background: color-mix(in srgb, var(--color-terracotta) 20%, transparent); }

/* Navigation de période (‹ libellé ›). */
.lk-periodnav {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); padding: 3px 8px;
  font-size: 12.5px; font-weight: 600; color: var(--color-text);
}
.lk-periodnav button {
  border: 0; background: transparent; color: var(--color-text-muted);
  font: inherit; padding: 0 3px; cursor: pointer;
}
.lk-periodnav button:disabled { opacity: .35; cursor: default; }

/* Variante compacte du segmenté (toolbar, ligne dépendante). */
.lk-seg--compact .lk-seg__btn { padding: 3px 10px; font-size: 12px; }

/* ── Bouton péristyle : agréger / détailler ───────────────────────────────
   Costume unique du geste « replier » (2026-08-29), monté par
   `components/PeristyleToggle.js`. La cour est pleine quand c'est replié, et
   s'évide en pivotant quand on ouvre : on entre dans la palestre. Né sur les
   cards de Plan services / Plan produits (`.spl-mark`, qui garde le sien le
   temps d'être ramené ici). */
.lk-mark {
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  font-size: 10px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.lk-mark:hover { background: var(--color-accent); color: var(--color-surface-card); }
.lk-mark__logo { display: block; transition: transform .25s ease; }
.lk-mark__logo .lk-mark__court {
  transform-origin: 32px 32px;
  transition: opacity .25s ease, transform .25s ease;
  opacity: 1;
}
.lk-mark__logo.is-open { transform: rotate(90deg); }
.lk-mark__logo.is-open .lk-mark__court { opacity: 0; transform: scale(2.2); }

/* Icône « ouvrir le détail » (DetailIcon) — coin haut droit d'une tuile
   cliquable. */
.lk-detail-ic {
  position: absolute; top: 8px; right: 10px;
  width: 14px; height: 14px; color: var(--color-accent);
}

/* Entonnoir fantôme : présent pour tenir la ligne, gris pour dire inactif. */
.lk-funnel.is-ghost {
  color: var(--color-text-muted);
  opacity: .55;
  cursor: default;
  pointer-events: none;
}


/* ═══ TABLE À SAISIE — STANDARD (2026-09-04) ══════════════════════════════
   Une table où l'on tape dans les lignes prend `lk-entry-table` : largeur
   fixe et colonnes déclarées (<colgroup>), pour qu'un champ ouvert n'élargisse
   jamais sa colonne ; cellules éditables en bleu sans cadre (InlineCells.js),
   poignée et croix en gouttière révélées au survol, titres de bloc en blanc,
   ligne d'ajout blanche. Les pages n'en redéfinissent rien. */
.lk-entry-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.lk-entry-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 8px 8px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-card); white-space: nowrap;
}
.lk-entry-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border-inner); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.lk-entry-table .lk-num, .lk-entry-table th.lk-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.lk-entry-table .lk-sep { border-left: 1px solid var(--color-border); }
/* Cellule à saisir : bleu du champ, sans cadre ; le champ ouvert tient dans sa cellule. */
.ic-cell { color: var(--color-field-focus); font: inherit; background: transparent; border: none; padding: 0; }
.ic-cell[role="button"] { cursor: text; display: block; width: 100%; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; }
.ic-cell--ro { color: var(--color-text); }
.ic-cell--ph { color: color-mix(in srgb, var(--color-field-focus) 55%, transparent); }
.ic-cell--edit { border-bottom: 1px solid var(--color-field-focus); outline: none; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.ic-cell--edit::placeholder { color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); }
.lk-num .ic-cell--edit, .lk-num .ic-cell[role="button"] { text-align: right; }
/* Liste déroulante sans flèches : le bleu dit déjà qu'on peut choisir. */
.ic-select { cursor: pointer; appearance: none; -webkit-appearance: none; max-width: 100%; padding-right: 0; text-overflow: ellipsis; }
.ic-select:hover, .ic-select:focus { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Titre de bloc en blanc, aéré ; ligne d'ajout blanche ; ligne choisie surlignée. */
.lk-entry-table .lk-grp-title td { background: var(--color-surface-card); padding: 16px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.lk-entry-table .lk-add-row td { background: var(--color-surface-card); }
.lk-add { border: none; background: transparent; color: var(--color-accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.lk-add:hover { text-decoration: underline; }
.lk-entry-table tr.is-selected td { background: var(--color-accent-tint); }
/* Défaire : croix atténuée, révélée au survol de la ligne, terracotta au survol. */
/* Le CRAYON d'édition (standard, 2026-09-11) : à côté du libellé, discret au
   repos, franc au survol de la ligne ; il ouvre la fenêtre de l'objet. */
.lk-edit { border: 0; background: none; color: var(--color-text-muted); font-size: 13px; cursor: pointer; padding: 0 4px; opacity: .45; flex: none; }
tr:hover .lk-edit, .lk-edit:focus-visible { opacity: 1; }
.lk-x { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; padding: 0 2px; }
.lk-x:hover { color: var(--color-terracotta); }
.lk-entry-table .lk-del { opacity: 0; }
.lk-entry-table tr:hover .lk-del { opacity: 1; }
.lk-entry-table .lk-actions { text-align: center; overflow: visible; text-overflow: clip; padding-right: 12px; }
/* Poignée de glisser-déposer en gouttière, révélée au survol. */
.lk-entry-table .lk-gutter { position: relative; padding-left: 22px; }
.lk-grip { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); cursor: grab; opacity: 0; -webkit-user-select: none; user-select: none; font-size: 12px; letter-spacing: -2px; }
.lk-entry-table tr:hover .lk-grip { opacity: 1; }
.lk-entry-table tr.is-dragging { opacity: .5; }

/* CHAMP À RENSEIGNER — STANDARD (2026-09-08) : fond ambre clair, comme une ligne
   non mappée du compte de résultat. Un texte ambre seul se voyait mal au milieu
   d'une colonne de valeurs bleues. */
.lk-todo { background: var(--amber-light); color: var(--amber-dark) !important; border-radius: 4px; padding: 0 4px; }
/* Onglet portant un pictogramme : l'icône se cale sur la ligne du mot. */
.of-tab { display: inline-flex; align-items: center; gap: 6px; }
.of-tab svg { flex: none; }

/* ── Zone de défilement horizontal — STANDARD (2026-09-10) ──────────────────
   Toute table plus large que sa carte défile dans `.lk-hscroll`. La barre de
   défilement se pose SOUS la dernière ligne, jamais dessus : la zone réserve
   sa hauteur (padding) et la barre garde une gouttière claire. Une page ne
   redéfinit plus la sienne : neuf écrans de Ventes l'avaient chacun recodée,
   et la barre chevauchait « ＋ Offre » sur chacun. */
/* ⚠️ `.page-table-wrap` SUIT LA MÊME RÈGLE depuis le 2026-09-18 : c'est le
   conteneur de défilement historique, celui des tables de Finance, et sa barre
   se posait SUR la dernière ligne — au travers du texte. Deux recettes pour un
   seul geste, dont une qui chevauche, c'était une de trop. */
.lk-hscroll,
.page-table-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 14px; scrollbar-gutter: stable; }
.lk-hscroll::-webkit-scrollbar,
.page-table-wrap::-webkit-scrollbar { height: 10px; }
.lk-hscroll::-webkit-scrollbar-track,
.page-table-wrap::-webkit-scrollbar-track { background: var(--color-surface-page); border-top: 1px solid var(--color-border-inner); }
.lk-hscroll::-webkit-scrollbar-thumb,
.page-table-wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; border: 2px solid var(--color-surface-page); }
.lk-hscroll::-webkit-scrollbar-thumb:hover,
.page-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Colonnes FIGÉES — STANDARD (2026-09-10) ────────────────────────────────
   Dans une zone `.lk-hscroll`, une cellule `.lk-stick` reste en place quand la
   table défile ; `--stick` porte son décalage depuis le bord gauche (la somme
   des largeurs des colonnes figées avant elle). La dernière figée porte
   `.lk-stick--last`, dont l'ombre dit que le reste glisse dessous. */
.lk-hscroll .lk-stick { position: sticky; left: 0; left: var(--stick, 0); z-index: 2; background: var(--color-surface-card); }
.lk-hscroll thead .lk-stick { z-index: 3; background: var(--color-surface-th); }
.lk-hscroll .lk-stick--last { box-shadow: 6px 0 8px -6px rgba(43, 32, 62, .18); }
/* Un titre de groupe ou une ligne d'ajout s'étale sur toutes les colonnes : son
   TEXTE reste en vue par `.lk-stick-txt`, collé au bord gauche. */
.lk-hscroll .lk-stick-txt { position: sticky; left: 8px; display: inline-block; }
/* La cellule qui porte un `.lk-stick-txt` ne clippe pas : une cellule à
   `overflow: hidden` ferme le collage sur elle-même, et le texte partait avec
   le défilement. */
.lk-hscroll .lk-grp-title td, .lk-hscroll .lk-add-row td { overflow: visible; }

/* ── Liste déroulante — STANDARD (2026-09-11) : `components/Listbox.js` ──────
   Un champ à filet fin et un menu en portail, sous le champ, de sa largeur.
   Même costume que les champs de saisie ; valeur en texte sombre, jamais en
   bleu de lien. */
.lk-lb { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px;
         padding: 0 10px 0 12px; font: inherit; font-size: 14px; color: var(--color-text); text-align: left;
         background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 7px; cursor: pointer; }
.lk-lb:hover { border-color: var(--color-accent-soft); }
.lk-lb:focus-visible, .lk-lb.is-open { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-tint); }
.lk-lb:disabled { color: var(--color-text-muted); cursor: default; }
.lk-lb__val { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-lb__val.is-empty { color: var(--color-text-muted); }
.lk-lb__chev { color: var(--color-text-muted); font-size: 14px; line-height: 1; transform: translateY(-2px); flex: none; }
.lk-lb__menu { position: fixed; z-index: 90; overflow-y: auto; padding: 4px;
               background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
               box-shadow: 0 8px 24px rgba(43, 32, 62, .16); }
.lk-lb__opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 14px; white-space: nowrap;
              color: var(--color-text); background: transparent; border: 0; border-radius: 6px; padding: 7px 10px 7px 8px; cursor: pointer; }
.lk-lb__opt.is-active { background: var(--color-accent-tint); }
.lk-lb__opt.is-selected { color: var(--color-on-tint); font-weight: 500; }
.lk-lb__opt:disabled { color: var(--color-text-muted); cursor: default; }
.lk-lb__tick { width: 14px; flex: none; font-size: 12px; color: var(--color-accent); }
.lk-lb__grp { margin: 6px 0 2px; padding: 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-muted); }
/* Un Listbox à renseigner : le fond ambre du standard, sur le champ entier. */
.lk-lb.lk-todo { background: var(--amber-light); color: var(--amber-dark); border-color: transparent; }

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

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

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

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

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

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

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

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

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

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

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

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

.sb-panel-head {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-inner);
}
/* Nom du module : SOUS le filet, avec le bouton fermer au bout de sa ligne. */
.sb-panel-modrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 24px 12px 10px 16px;   /* centre du nom ≈ 34 px, comme l'icône du rail */
}
.sb-panel-title {
  display: flex; align-items: center; gap: 6px;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 18px; font-weight: 600; color: var(--color-navy); line-height: 1.1;
}

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

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

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

/* ── Sous-items (sections du module) ──────────────────────────────────── */
.sb-sub {
  /* Largeur STANDARD (2026-09-01) : le surlignage couvre toute la ligne,
     pas seulement le mot. */
  width: calc(100% - 16px);
  display: flex; align-items: center;
  /* RYTHME ET VOIX du menu (2026-09-17, cahier des charges d'Olivier) : une
     entrée fait 38 px de haut, texte de 13 px sur une ligne de 20, graisse
     normale. Elle a fait 44 px le matin, puis 30 le soir, quand Finance est
     passée à onze entrées ; 38 tient la liste longue à l'écran sans la serrer.
     Le corps ne se déduit plus du parent : une entrée de menu a sa taille. */
  min-height: 38px;
  margin: 0 8px;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px; font-weight: 400; line-height: 20px;
  color: var(--color-navy);          /* lecture = navy */
  background: transparent; border: none;
  cursor: pointer; text-align: left;
}
.sb-sub:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
/* Section active : SANS fond (demande 2026-08-15) — couleur d'accent, graisse
   et liseré gauche seuls. Le surlignage plein reste réservé au module actif
   du rail ; ici, plus sobre, la colonne de gauche respire. */
/* Section active : même aplat clair que l'icône du module — assez pour se
   repérer dans une liste longue, sans crier. */
/* Section ouverte (2026-09-17, cahier des charges) : le TOKEN de surlignage
   fort de la charte, et la graisse 500 pour la distinguer sans changer sa
   couleur. Elle est passée par un aplat sans fond, puis par deux teintes
   calculées à la main (18 % puis 30 % du token) : une valeur dérivée à la main
   n'a plus sa place quand la charte porte déjà la teinte. La ligne garde donc
   le NAVY de sa voisine : c'est le fond qui dit où l'on est. */
.sb-sub.is-active {
  font-weight: 500;
  background: var(--color-accent-tint-strong);
}
.sb-sub.is-active .sb-sub-mark { color: var(--color-accent); }
.sb-sub:focus:not(:focus-visible) { outline: none; }
.sb-sub:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sb-lbl { flex: 1 1; }

/* Tête de groupe : détachée du groupe précédent, posée sur ses entrées. UN SEUL
   réglage porte ce détachement, la marge du bloc (16 px, retour d'Olivier du
   2026-09-17) : la tête n'y ajoute rien, sinon le chiffre se lit à deux
   endroits. Le resserrement du même jour vaut pour les ENTRÉES, pas pour la
   frontière entre deux groupes, qui doit se voir. */
.sb-group + .sb-group > .sb-sub-h { padding-top: 0; }
/* TÊTE DE GROUPE (2026-09-17, cahier des charges) : 11 px, lettres espacées de
   0.06 em. Elle a porté du 9 px gras à 0.11 em, qui se lisait comme un tampon.
   Son padding bas reste COURT : elle appartient aux entrées qu'elle annonce,
   l'air se met AVANT elle, entre les groupes.
   GRAISSE 600 le soir même : à 500 contre les 400 d'une entrée, l'écart se
   devinait plus qu'il ne se lisait, et une tête plus petite et atténuée passait
   derrière les entrées qu'elle annonce. Inter porte ce poids (import de
   `index.css`), il n'est donc pas synthétisé. */
.sb-sub-h {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 4px 16px 2px 18px;
}
/* Étape de synthèse (Σ Compte de résultat, Σ Bilan) : en gras. */
.sb-sub--strong { font-weight: 700; }

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

/* Respiration entre les blocs du panneau (Rapports · Calculs · Données). */
/* Espacement entre BLOCS du panneau (remplace l'ex-marge des têtes) : 24 px
   (cahier des charges du 2026-09-17), le seul réglage qui porte la frontière
   entre deux groupes. */
.sb-group + .sb-group { margin-top: var(--space-5); }

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

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

/* Marqueur « · » saisie / réglage. */
.sb-sub-mark { flex: 0 0 15px; margin-right: 9px; color: #928C80; display: inline-flex; align-items: center; }
.sb-sub-ic { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Icône portée par une TÊTE de groupe (ex. ✎ sur « Calculs et supports »). */
.sb-sub-h__ic { display: inline-flex; margin-left: 5px; vertical-align: -2px; }
.sb-sub-h__ic .sb-sub-ic { width: 10px; height: 10px; }
/* TOUTE DESTINATION ACCESSIBLE SE LIT EN NAVY, sans atténuation (cahier des
   charges du 2026-09-17) : un réglage n'est pas une demi-destination, et
   l'atténuation faisait passer une entrée cliquable pour une entrée grisée.
   Les trois tons (`input`, `setting`, `muted`) valent donc la même couleur ;
   les classes restent, la tête de groupe dit la nature. Seul le terracotta de
   `--danger` s'écarte encore : il ALERTE, il n'atténue pas. */
.sb-sub--input,
.sb-sub--setting,
.sb-sub--muted   { color: var(--color-navy); }

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

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

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

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

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

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

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

/* Sections RATTACHÉES (2026-08-31) : un plan produits ou services ne voisine
   pas le revenu, il le compose. Un crochet le dit — retrait, puis un filet
   vertical qui descend depuis la section mère et se coude sur le libellé.
   Dessiné en pseudo-éléments : aucun nœud de plus dans le menu. */
.sb-sub--child { position: relative; padding-left: 30px; }
.sb-sub--child::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0;
  border-left: 1px solid var(--color-border);
}
.sb-sub--child::after {
  content: ''; position: absolute; left: 15px; top: 50%; width: 7px;
  border-top: 1px solid var(--color-border);
}
/* Le dernier enfant referme le crochet : le filet s'arrête à son coude. */
.sb-sub--child-last::before { bottom: 50%; }

/* ── ESSAI « ligne haute » (2026-09-16) ────────────────────────────────────
   Le rail vertical disparaît : les modules tiennent UNE ligne d'icônes en tête
   du panneau, et seul le module actif porte son nom. Tout est en tokens de la
   charte — la pilule active est la surface card posée sur la surface page.
   L'essai se coupe par la bascule du pied ; il ne laisse rien derrière lui. */
.sb--topline .sb-panel-col { flex: 0 0 var(--nav-w); width: var(--nav-w); }
/* Replié, la navigation ne garde qu'une bande de dix pixels au bord gauche :
   elle rappelle que le menu est là et sert de cible au survol. Un filet
   d'accent apparaît quand la souris l'approche. */
.sb-hot {
  flex: 0 0 10px; width: 10px;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-rail);
  cursor: e-resize;
}
.sb-hot:hover { border-right-color: var(--color-accent-soft); }
/* Ouvert au SURVOL : le panneau se pose au-dessus du contenu, qui ne bouge
   pas — il part du bord, la bande passant dessous. */
.sb--topline.sb--float .sb-panel-col { left: 0; box-shadow: 6px 0 22px rgba(43, 32, 62, .14); }

/* Un module = UNE ligne : icône de 16 px, puis son nom. La pilule garde la
   même boîte qu'elle soit active ou non, sinon les voisines se déplacent à
   chaque changement de sélection (2026-09-17). */
.sb-topmods {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-1);
  min-width: 0;
}
.sb-topmods .sb-railbtn {
  flex: 0 0 auto;
  flex-direction: row; gap: 7px;
  width: auto; height: var(--h-control);
  padding: 0 10px;
  background: transparent; border: 0; border-radius: 6px; box-shadow: none;
  font-family: inherit; font-size: var(--fs-body);
  color: var(--color-text-muted);
  transition: background .12s, color .12s;
}
.sb-topmods .sb-railbtn:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); }
.sb-topmods .sb-ic { width: 16px; height: 16px; }
.sb-topmod__cap { font-size: var(--fs-body); line-height: 1; white-space: nowrap; color: inherit; }
/* Module ouvert : même renfort que la section ouverte du menu, pour que les
   deux niveaux se lisent d'un seul coup d'œil. Aucun changement de boîte par
   rapport au repos — même hauteur, même padding, même rayon. */
.sb-topmods .sb-railbtn.is-active {
  background: color-mix(in srgb, var(--color-accent) 22%, #fff);
  border-radius: 6px;
  color: var(--color-accent);
  font-weight: 600;
}
/* Les autres modules se lisent mieux : ils portaient le gris des libellés
   atténués, sur une bande claire, à 26 px. */
.sb-topmods .sb-railbtn .sb-ic { color: var(--color-navy); opacity: .62; }
.sb-topmods .sb-railbtn:hover .sb-ic { opacity: 1; }
.sb-topmods .sb-railbtn.is-active .sb-ic { color: var(--color-accent); opacity: 1; }
/* Savoirs ouvre le bloc utilitaire : un filet le détache des modules métier. */
.sb-topmod--sep { margin-left: 4px; border-left: 1px solid var(--color-border); padding-left: 6px; }

/* Badge d'environnement dans le menu : centré, posé dans la réserve du titre
   du module (24 px au-dessus de lui), donc sans rien pousser. */
.sb--topline .sb-panel-modrow { position: relative; }
.sb-panel-env {
  position: absolute; top: 5px; left: 0; right: 0;
  /* À DROITE (2026-09-17), sur le bord des sections du menu : centré, il
     coupait la colonne en deux au-dessus du nom du module. */
  display: flex; justify-content: flex-end;
  /* 9 px : le bord droit des SECTIONS, pas celui de la colonne. */
  padding-right: 9px;
  pointer-events: none;
}

/* PIED DE PANNEAU (refonte 2026-09-17) — trois rangs de poids décroissant,
   sous UN seul filet : ce qu'on ouvre, qui l'on est, la langue. Les trois
   adresses de l'exploitant tiennent la gauche ; la déconnexion ferme la
   rangée à droite, parce qu'elle SORT au lieu d'ouvrir. */
.sb-topops {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 2px;
  margin: 0 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--color-border);
}
.sb-topop { width: 28px; height: 28px; }
/* La sortie ferme la rangée : elle SORT, elle n'ouvre pas. */
.sb-topop--out { margin-left: auto; }
.sb-topop.is-active { color: var(--color-accent); background: var(--color-accent-tint); border-radius: var(--radius-card); }
.sb-topop.is-active .sb-ic { color: var(--color-accent); }

/* ── CARTE UTILISATEUR (2026-09-17) : la ligne d'identité ouvre les réglages
   de la personne — présentation du menu, langue — et la déconnexion. Ils se
   règlent une fois ; ils n'ont plus à tenir deux rangs dans le menu. ─────── */
.sb-urow {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: var(--radius-card);
  background: transparent; cursor: pointer; font-family: inherit; text-align: left;
}
.sb-urow:hover { background: var(--color-accent-tint); }
.sb-urow.is-open { background: var(--color-accent-tint-strong); }
.sb-urow__chev { flex: 0 0 auto; color: var(--color-text-muted); transition: transform .15s ease; }
.sb-urow.is-open .sb-urow__chev { transform: rotate(-90deg); }
/* Dans la BARRE, la carte s'ouvre sous la pastille, en popover ; dans le menu,
   elle reste dans le flux, au-dessus de la ligne d'identité. */
.app-topbar__user { position: relative; display: flex; align-items: center; }
.app-topbar__user .sb-panel-foot { padding: 0; height: auto; flex-direction: row; }
.app-topbar__user .sb-urow { width: auto; padding: 4px 6px; }
/* Dans la barre, la pastille suffit : le nom et le rôle se lisent dans la
   carte, une fois ouverte. La spécificité doit battre `--wide`. */
.app-topbar__user .sb-panel-foot--wide .sb-foot-id,
.app-topbar__user .sb-urow__chev { display: none; }
.app-topbar__user .sb-ucard {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 280px; z-index: 60;
  box-shadow: 0 8px 24px rgba(43, 32, 62, .12);
}
.sb-ucard {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 10px 10px 8px;
  margin-bottom: 6px;
}
.sb-ucard__mail {
  font-size: 11.5px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 10px;
}
.sb-uset + .sb-uset { margin-top: 10px; }
.sb-uset__l { font-size: 11.5px; font-weight: 600; color: var(--color-navy); margin-bottom: 5px; }
/* Segmenté pleine largeur : les trois choix se lisent d'un coup, sans menu. */
.sb-useg { display: flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.sb-useg__b {
  flex: 1 1; min-width: 0;
  padding: 5px 4px; border: 0; border-right: 1px solid var(--color-border);
  background: var(--color-surface-card); color: var(--color-text-muted); color: var(--color-text-secondary, var(--color-text-muted));
  font-family: inherit; font-size: 11.5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-useg__b:last-child { border-right: 0; }
.sb-useg__b:hover { background: var(--color-accent-tint); }
.sb-useg__b.is-active { background: var(--color-accent-tint-strong); color: var(--color-accent); font-weight: 600; }
.sb-uout {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 7px 4px 2px;
  border: 0; border-top: 1px solid var(--color-border-inner);
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--color-text);
}
.sb-uout:hover { color: var(--color-accent); }
.sb-uout .sb-ic { width: 16px; height: 16px; }

/* Bascule de l'essai (rail / ligne / arbre) : c'est le rang le moins
   important du pied, il se lit en dernier et s'efface. */
/* Les deux RÉGLAGES du pied, un par rang, même costume : libellé à gauche,
   choix à droite. Ils ouvrent le pied, au-dessus du filet des adresses. */
.sb-footset { flex: 0 0 auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.sb-navswitch {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0;
}
.sb-navswitch__lbl {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.sb-navswitch .sb-lang__b { font-size: 10.5px; padding: 2px 6px; }

/* Ligne d'identité sans rail : pastille, adresse et rôle, langue à droite. */
/* L'identité ferme le menu, avec une vraie marge sous elle (2026-09-17) : le
   pied touchait le bord de l'écran. */
.sb-panel-foot--wide {
  flex-direction: column; align-items: stretch; gap: 0;
  height: auto; padding: 10px 10px 16px;
}
.sb-foot-av {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
.sb-panel-foot--wide .sb-foot-id { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; text-align: left; }
/* L'adresse cesse d'être la ligne la plus lourde du menu : même poids que les
   sections, le rôle dessous en atténué. */
.sb-panel-foot--wide .sb-panel-user { font-size: 12px; font-weight: 500; color: var(--color-text); }
.sb-panel-foot--wide .sb-panel-role { font-size: 10.5px; }
/* Le panneau ne dit plus le nom du module (l'arbre le porte), il dit ce que la
   liste contient. */
.sb-panel-title--head {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Accès unique aux trois adresses de l'exploitant, dans la barre. */
.ops-menu { position: relative; display: flex; align-items: center; }
.ops-menu__pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 248px; z-index: 60;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(43, 32, 62, .12);
  padding: var(--space-1);
}
.ops-menu__item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-text);
  text-align: left;
}
.ops-menu__item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.ops-menu__item.is-active { background: var(--color-accent-tint-strong); color: var(--color-accent); font-weight: 600; }
.ops-menu__ic { display: inline-flex; color: var(--color-text-muted); }
.ops-menu__item:hover .ops-menu__ic,
.ops-menu__item.is-active .ops-menu__ic { color: var(--color-accent); }

/* Bouton REPLIER, au bout de la ligne du module. */
.sb-panel-fold {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.sb-panel-fold:hover { background: var(--color-accent-tint); color: var(--color-accent); }
/* ÉPINGLÉ : la punaise se plante, aplat accent et tracé plein — le clic a sa
   réponse à l'écran, sans attendre que la souris quitte le panneau. */
.sb-panel-fold.is-pinned { color: var(--color-accent); background: var(--color-accent-tint); }
.sb-panel-fold.is-pinned svg { fill: currentColor; }

/* RETOUR EN TÊTE DU PANNEAU (2026-09-18) : la sortie des lieux qui ne sont pas
   des modules (les réglages, les trois adresses de l'exploitant). Un lien, pas
   un bouton plein : il quitte un lieu, il n'agit pas dessus. Il nomme l'écran
   où il ramène, et se coupe à la largeur du panneau. */
.sb-panel-back {
  display: flex; align-items: center; gap: 7px; width: 100%;
  margin: 10px 0 2px; padding: 6px 10px;
  background: none; border: 0; border-radius: var(--radius-card);
  font: 500 12px/1.3 "Inter", system-ui, sans-serif;
  color: var(--color-text-muted); text-align: left; cursor: pointer;
}
.sb-panel-back:hover { color: var(--color-accent); background: var(--color-accent-tint); }
.sb-panel-back svg { flex: 0 0 auto; }
.sb-panel-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bouton « chemin » du Guide, dans la barre supérieure : même costume que
   les paramètres (discret au repos), AMBRE allumé, atténué sans guide. */
.gd-toggle {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.gd-toggle:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.gd-toggle.is-on { background: var(--color-amber); color: #fff; }
.gd-toggle.is-on:hover { background: var(--amber-dark); color: #fff; }
.gd-toggle.is-empty { opacity: .35; cursor: default; }
.gd-toggle.is-empty:hover { background: transparent; color: var(--color-text-muted); }
.gd-toggle:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 1px; }

/* Barre supérieure : contexte client, hors navigation. Elle partage la surface
   de la zone contenu — c'est une bande de la page, pas un bandeau de chrome. */
/* Allègement 2026-09-01 (proposition A) : barre plus FINE (40 px), tout en
   monochrome — client et période en pilules à filet léger, badge
   d'environnement à filet (plus d'aplat amber), pastille d'initiales retirée.
   Aucune couleur de différenciation : l'ardoise n'apparaît qu'au survol. */
.app-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  /* La barre passe AU-DESSUS du menu (z-index 30) : ses menus s'ouvrent vers
     le bas, ils ne doivent pas passer dessous (2026-09-17). */
  position: relative; z-index: 40;
  /* La hauteur du cadre vient des tokens : on la change à un seul endroit. */
  height: var(--topbar-h);
  padding: 0;
  /* Plus de couleur de fond (2026-09-01) : la barre se fond dans la page,
     seul le filet la termine — elle se lit, elle ne se voit pas. */
  background: var(--color-surface-page);
  border-bottom: 1px solid var(--color-border);
}

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

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

.app-tenant { position: relative; }
/* Option B (2026-09-02) : aplat teinté SANS filet — la zone dit « bouton »
   sans cadre. */
.app-tenant__btn {
  display: flex; align-items: center; gap: 7px;
  border: none; background: var(--color-accent-tint-strong);
  cursor: pointer; font: inherit;
  padding: 5px 12px; border-radius: 6px;
}
.app-tenant__btn:hover { background: var(--color-accent-tint); }
.app-tenant__name {
  font-size: 12.5px; font-weight: 600; color: var(--color-navy);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-tenant__caret {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: var(--color-accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

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

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

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

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

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

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

/* Le calendrier atténué devant ‹ année › : on choisit l'année lue (2026-09-16). */
.app-topbar__dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-accent);
  border: 1.5px solid var(--color-surface-page);
}

.app-topbar__cal { color: var(--color-text-muted); flex: 0 0 auto; margin: 0 -6px 0 2px; }

/* Le jour et la semaine, en repère atténué après le statut du réel. */
.app-topbar__today {
  font-size: 12px; color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Bande de la marque servant la LIGNE DES MODULES (essai 2026-09-16) : la
   Sidebar y pose ses icônes par portail. Le badge d'environnement ferme la
   bande, à la place du wordmark. */
/* La bande prend la largeur du PANNEAU des sections : les deux filets tombent
   alors au même x. La valeur suit `.sb--topline` dans Sidebar.css, si l'une
   bouge l'autre aussi. */
/* La barre prend la surface DU MENU, pas celle de la page : les deux forment
   alors un seul L clair, et le beige reste au contenu. Beige, la barre était
   coupée verticalement par la colonne du menu, plus claire qu'elle
   (2026-09-17). */
.app-topbar--modules { background: var(--color-surface-rail); }
.app-topbar--modules .app-topbar__brand-wrap {
  width: var(--nav-w);
  border-right: 0;
  background: transparent;
  /* Le bloc ne ROGNE plus son contenu (2026-09-17) : `overflow: hidden`
     masquait le wordmark quand la bande se réduisait, mais il coupait aussi le
     menu du client, qui s'ouvre sous lui. Ici le wordmark n'existe plus. */
  overflow: visible;
  /* Symbole PUIS client, serrés à gauche : le bloc a la largeur du menu, il
     ne doit pas répartir son contenu dedans. */
  display: flex; align-items: center; gap: var(--space-2);
  padding-left: var(--space-3);
}
.app-topbar--modules .app-topbar__brand-btn--sym { width: 34px; padding: 0; flex: 0 0 auto; }
/* La roue dentée ferme le bloc du client, sans se laisser comprimer : c'est le
   NOM du client qui cède la place (il s'ellipse déjà). */
.app-topbar--modules .app-topbar__brand-wrap > .app-topbar__icon { flex: 0 0 auto; }
.app-topbar--modules .sb-env { flex: 0 0 auto; }
.app-topbar--modules .app-tenant { flex: 1 1 auto; min-width: 0; }
.app-topbar--modules .app-tenant__btn { width: 100%; }
/* (Le filet vertical du bloc de gauche a disparu avec la barre d'une seule
   surface : il n'y a plus rien à effacer quand le menu se replie.) */

.app-topbar__modslot {
  display: flex; align-items: center; gap: 4px;
  width: 100%; height: 100%;
  padding: 0 6px;
  min-width: 0;
}
/* Nœud d'accueil de la ligne : c'est lui qui s'étire, entre le symbole et le
   badge d'environnement. */
.app-topbar__modrow { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 100%; }

/* Les MODULES au centre de la barre (2026-09-17) : ils poussent les outils
   vers la droite et gardent leur place quel que soit le nombre d'outils. */
/* Les modules commencent au bord du contenu et s'alignent à GAUCHE : centrés,
   ils bougeaient avec la largeur de la fenêtre et ne se rattachaient à rien. */
.app-topbar__mods {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
/* Les trois adresses de l'exploitant ferment la barre, détachées des outils
   par un filet : elles n'appartiennent pas au client. */
.app-topbar__ops {
  flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
  gap: 2px;
  margin-left: 4px; padding-left: 8px;
  border-left: 1px solid var(--color-border);
}
.app-topbar__ops:empty { display: none; }
.app-topbar__ops .sb-railbtn { flex: 0 0 auto; }

/* 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: var(--radius-card);
  padding: 4px 8px;
}

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

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

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

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

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

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

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

.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: var(--radius-card);
  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; }

/* Une SEULE ligne de commandes, alignée sur le bord droit des cards (même
   gouttière que le contenu) et séparée de la première card par 16 px. */
.page-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  min-height: 34px;
  padding: 6px var(--page-px) 16px;
}
/* POSÉE DANS LA LIGNE DU TITRE (2026-09-18) : plus de gouttière ni de hauteur
   propre, elle se règle sur la ligne qui l'accueille. Elle occupait sinon un
   étage de 56 px avant la première donnée, et le titre de la page tombait bien
   plus bas que le nom du module dans le menu, juste à côté. */
.page-bar--inline {
  min-height: 0; padding: 0; gap: 8px;
}
.page-bar__today { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
/* Rien ne descend sur une seconde ligne : les commandes se serrent. */
.page-bar > * { flex: 0 0 auto; }

/* L'EXERCICE SANS SON CADRE NI SON MOT (2026-09-18) : dans la bande de
   contexte, « ‹ 2026 › » se lit seul. La pastille blanche à filet en faisait
   un champ à remplir, et le mot « Exercice » répétait ce que l'année dit
   déjà. Les mêmes règles vivaient dans la barre supérieure quand elle portait
   ce contrôle ; elles suivent la bande, elles ne se recopient pas ailleurs. */
.page-bar .reporting-controls .year-picker {
  background: transparent; border: none; padding: 0; border-radius: 0; gap: 2px;
}
.page-bar .year-picker__label { display: none; }
.page-bar .reporting-controls .year-picker__select {
  appearance: none;                 /* plus de chevron natif ⇕ */
  font-size: 13.5px; font-weight: 600; color: var(--color-navy);
  padding: 3px 4px; cursor: pointer;
}
.page-bar .reporting-controls .year-picker__select:hover,
.page-bar .reporting-controls .year-picker__arrow:hover {
  background: var(--color-accent-tint); border-radius: 6px;
}
.page-bar .reporting-controls .year-picker__arrow { color: var(--color-text-muted); }
.page-bar .reporting-controls .year-picker__arrow:hover { color: var(--color-accent); }

.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: var(--radius-card);
  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: var(--radius-card);
  padding: 3px 10px;
  margin-bottom: 4px;
}

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

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

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

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

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

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

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

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

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

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

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

/* Actions à droite : cluster reporting (année + mois) puis actions de page
   (ex. toggle CHF/kCHF), séparés par un mince trait. */
/* Accueil de la BANDE DE CONTEXTE, à l'extrémité de la ligne du titre
   (2026-09-18) : vide, elle ne prend aucune place ; pleine, elle ferme la
   ligne. `margin-left: auto` la pousse au bord même quand la page n'a pas
   d'actions, si bien que l'exercice tombe toujours au même x. */
.page-header__ctx { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; }
.page-header__ctx:empty { display: none; }
.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: var(--radius-card);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 14px 18px;
  margin-bottom: 12px;
}

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

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

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

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

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

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

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

/* Rangée des commandes de portée PAGE (étage 3 du gabarit, 2026-09-17) : elle
   se pose SOUS le titre, alignée à GAUCHE.
   Ce fichier ne porte que la DISPOSITION : les bascules et les listes viennent
   du costume de la charte (`lk-seg*`, `lk-filter-select`), jamais d'un costume
   recodé ici. */
/* LE LIBELLÉ SE POSE AU-DESSUS DE SA COMMANDE (2026-09-18). Devant elle, sa
   largeur variable (VUE, ARRÊTÉ, COMPARAISON) décalait chaque groupe d'autant :
   aucun ne commençait au même x, ni entre eux, ni avec le titre et les cartes
   juste au-dessus et au-dessous. Au-dessus, les groupes s'alignent tous à
   gauche, l'œil descend du titre aux boutons sans détour, et la rangée coûte
   dix pixels de plus. La rangée s'aligne EN BAS, pour qu'une commande sans
   libellé reste sur la ligne des boutons. */
.lk-views { display: flex; align-items: flex-end; min-width: 0; margin: 0 0 16px; }
.lk-views__row { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.lk-views__ctl { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
/* Place d'accueil d'une commande calculée par une carte : vide, elle disparaît.
   Elle porte le même costume, son libellé venant du composant lui-même. */
.lk-views__slot { display: inline-flex; align-items: flex-end; gap: var(--space-4); }
.lk-views__slot:empty { display: none; }
.lk-views__slot .lk-seg { flex-direction: column; align-items: flex-start; gap: 4px; }
/* La liste d'une commande de page s'aligne sur la hauteur de la bascule large. */
.lk-views .lk-filter-select { height: 30px; font-size: 13.5px; }

/* 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; }
/* Le titre et SA rangée de commandes forment un bloc : 6 px les séparent, pas
   14 (2026-09-18). Les commandes appartiennent au titre qu'elles qualifient ;
   l'air se met APRÈS elles, avant la première carte. */
.page-header--withviews { margin-bottom: 6px; }
/* LA LIGNE DE TITRE PREND TOUTE LA LARGEUR (2026-09-18, analyse de Codex) :
   ses commandes se posent donc au même x d'une page à l'autre, quelle que soit
   la largeur du contenu dessous. Elle a été plafonnée à la colonne de contenu
   une heure durant, pour aligner les deux bords droits : c'était traiter le
   symptôme. Le vide d'un écran large doit rester DEHORS, entre le contenu et
   le bord, jamais entre un libellé et son chiffre. */

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

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

/* Tenue « flush » : page ouverte SANS la marge latérale du gabarit table
   (40/32 px) — même bord gauche que les hubs à cadre. Posée via className
   (ex. les plans de Ventes & Opérations, retour Olivier 2026-08-12). */
/* Retrait haut porté par la zone contenu (.logike-page-wrap > *), comme le
   gabarit table — sinon le titre passe sous la ligne du nom de module. */
/* Le retrait haut est REPOSÉ ici (2026-08-31) : `padding: 0 0 80px` est un
   raccourci, il écrasait les 12 px que `.logike-page-wrap > *` donne à tous
   les autres gabarits, et le titre venait toucher la barre supérieure. */
.page-shell.page-shell--flush { padding: 12px 0 80px; }

/* ── Les trois USAGES (2026-09-17) : des valeurs par défaut de présentation,
   pas des gabarits différents. Ils se lisent dans la classe de la page. ─── */
/* On LIT : le contenu respire, la donnée tient la largeur. */
.page-shell--report { --shell-gap: var(--space-5); }
/* On SAISIT : les blocs se serrent, la main reste près des champs. */
.page-shell--entry { --shell-gap: var(--space-4); }
/* On RÈGLE : des cards étroites, jamais pleine largeur. */
.page-shell--settings { --shell-gap: var(--space-4); }
.page-shell--settings > .page-shell__panel,
.page-shell--settings > .lk-card { max-width: 860px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card standard — voir components/Card.js. Gabarit charte réutilisable. */
.std-card {
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  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 {
  flex-wrap: wrap;
  row-gap: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.std-card__actions select {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

/* ── Data exchange card ─────────────────────────────────────────────────── */
.rdp__data-card {
  background: #F4ECDF;
  background: var(--color-card, #F4ECDF);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  width: 460px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Sauvegarde de tous les clients (2026-09-02) : une ligne, le libellé à
   gauche, l'action à droite. Aucune couleur propre — tokens de la charte
   uniquement, et pas de terracotta : le bouton ne détruit rien, il sort. */
.admin-dumpall {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.admin-dumpall__lbl {
  font-weight: 600; color: var(--color-navy); margin-bottom: 2px;
}
.admin-dumpall__desc {
  font-size: 12px; color: var(--color-text-muted);
}

/* ── Gouvernance client : titre de portée, et une seule largeur de card ──────
   Les deux sources de cards de cette page (échange de données, réglages du
   client) portaient chacune la sienne (720 / 780 px) : elles ne s'alignaient
   pas. La page impose la largeur, les composants gardent la leur ailleurs. */
.admin-ghead {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 18px;
}
.admin-ghead strong { font-weight: 700; }

.admin-hub--client .rdp__data-card,
.admin-hub--client .rdp__print-card,
.admin-hub--client .settings-card { max-width: 780px; }
.admin-hub--client .rdp__section { margin-bottom: 18px; }
.admin-hub--client .settings-target-bar { max-width: 780px; }

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

.tabs {
  display: flex;
  align-items: flex-end;
  /* Le slot droit est poussé par `margin-left: auto` (et non par
     space-between) : avec le nom de section à gauche, il y a trois enfants et
     space-between les écarterait tous les trois. */
  justify-content: flex-start;
  gap: 16px;
  /* Plus de filet sous la ligne d'onglets (2026-09-01) : seul le soulignement
     de l'onglet actif marque la ligne. */
  margin-bottom: 14px;
}

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

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

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

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

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

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

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

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

.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: var(--radius-card);
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

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

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

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

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

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

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

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

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

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

/* En-têtes centrés (max 2 lignes) — utilisés sur Synthesis */
/* Un entête de colonne CHIFFRÉE se pose au-dessus de ses chiffres, donc à
   droite (2026-08-30). `.hr-page__num` seul ne suffisait pas : la règle
   `.hr-page__table th { text-align: left }` la battait en spécificité, et tous
   les entêtes numériques restaient à gauche de leur colonne. Placée AVANT
   `th-center`, pour qu'un entête qui demande explicitement le centre l'obtienne
   encore. */
.hr-page__table th.hr-page__num {
  text-align: right;
  /* L'entête est un LIBELLÉ, pas un chiffre : il garde la voix du contenu
     (Inter). `.hr-page__num` lui imposait le monospace des cellules, qui n'est
     pas dans la charte et n'a rien à aligner sur un mot (2026-08-30). */
  font-family: inherit;
}
.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;
}
/* Bandeau du temps FACTURABLE : la famille ardoise, seule teinte de
   surlignage autorisée, et la plus turquoise de la charte (2026-08-30). Elle
   distingue le TF du bandeau NF, resté sur le fond neutre. */
/* La dernière colonne respire jusqu'au bord de la card : collée au filet, elle
   donnait l'impression d'être tronquée (2026-08-30). */
.hr-page__table th:last-child, .hr-page__table td:last-child { padding-right: 20px; }
/* Heures affectées — les libellés de colonne se replient sur DEUX lignes et
   s'alignent par le BAS (2026-08-30) : « Heures facturables (TF) » tenait sur
   une ligne et poussait sa colonne, tandis que les entêtes courts flottaient
   au-dessus des longs, flèches de tri décalées. */
/* Les libellés d'entête partagent la MÊME LIGNE DE BASE, juste au-dessus de
   leur colonne (2026-09-01) : ils s'alignent par le bas, et la flèche de tri
   sort du flux pour ne pas décaler ceux qui la portent. Le haut les alignait
   par leur première ligne, ce qui laissait un titre d'une ligne flotter
   au-dessus des titres de deux. */
.ptg-annual th { vertical-align: bottom; }
.ptg-annual th.hr-page__sort-th { position: relative; padding-bottom: 14px; }
.ptg-annual th.hr-page__sort-th .hr-page__sort-ind {
  position: absolute; left: 0; right: 0; bottom: 2px; margin: 0;
}
/* Colonnes CENTRÉES sur cet écran (demande du 2026-08-30) : les huit colonnes
   ont des ordres de grandeur proches et des libellés sur deux lignes, le
   centre les tient mieux que le fer à droite. Reste local — ailleurs, un
   nombre s'aligne à droite pour se comparer d'un coup d'œil. */
.ptg-annual th.hr-page__num,
.ptg-annual td.hr-page__num { text-align: center; }
.ptg-annual th.hr-page__sort-th > span:first-child { text-align: center; }
.ptg-annual td.hr-page__num .hr-edit-cell,
.ptg-annual td.hr-page__num .hr-edit-input { text-align: center; }
.ptg-annual th.hr-page__sort-th > span:first-child {
  display: inline-block;
  white-space: normal;
  max-width: 96px;
}
.hr-page__table th.hr-page__group-th--tf {
  background: var(--color-accent-tint-strong);
  color: var(--color-on-tint);
  border-bottom-color: var(--color-accent-soft);
}
.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 {
  /* 1 px comme tous les autres filets de l'application (2026-08-30) : à 2 px
     il pesait plus que la bordure de la card qui l'entoure. */
  border-left: 1px solid var(--color-border);
}

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

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

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

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

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

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

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

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

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

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

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

/* ── Cost synthesis KPI strip ────────────────────────────────────────────── */
.hr-synth {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  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); }

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

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

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

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

/* ── Barre cascade synthèse Annual hours (TT décomposé + couches OT/TR/Prod) ── */
/* Tuiles d'en-tête, GRILLE PLEINE LARGEUR (2026-08-26). En rangée flexible
   plafonnée à 330 px, elles s'arrêtaient bien avant le bord droit : la synthèse
   flottait au-dessus d'un tableau qui, lui, allait au bout. Elles se partagent
   désormais toute la largeur, en colonnes égales calées sur la card du dessous.
   `auto-fit` plutôt que trois colonnes fixes : la tuile EPT n'existe que si un
   effectif est connu, et deux tuiles doivent alors occuper la même largeur. */
.hr-cbar__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
}
/* Synthèse : pas de card blanche autour — la tuile est la seule couche de card
   (posée sur le fond de page), comme le composant KpiTile. */
.hr-synth.hr-cbar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Titre de la synthèse : label simple sur le fond de page (pas de bandeau blanc). */
.hr-synth.hr-cbar .hr-synth__head {
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border-bottom: none;
}
/* Tuiles de synthèse — GRAMMAIRE DE LA CARD DE CONSEIL (2026-08-26, celle de
   « Comment définir ses groupes ») : aplat ardoise, filet du même ton, titre en
   Fraunces navy. L'ancienne version parlait en petites capitales de 10 px sur
   blanc, corps de texte à 11.5 px — trois chiffres qu'on plissait les yeux pour
   lire, dans un module dont ils sont pourtant la conclusion.
   Le RÉSULTAT reste souligné d'un filet et posé en navy ; aucune couleur de
   jugement par ligne (une déduction n'est pas une alerte). */
.hr-cbar__tile {
  display: flex;
  flex-direction: column;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-strong);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
/* Dans UNE card (2026-08-30), les trois blocs perdent leur cadre : ils ne sont
   pas trois objets, ce sont trois temps d'une seule lecture. Un filet vertical
   les sépare, le premier n'en porte pas. */
.hr-cbar-card .std-card__body { padding-top: 14px; }
.hr-cbar__tiles--flat {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.hr-cbar__tiles--flat .hr-cbar__tile {
  background: transparent;
  border: none;
  border-left: 1px solid var(--color-border-inner);
  border-radius: 0;
  padding: 0 22px;
}
.hr-cbar__tiles--flat .hr-cbar__tile:first-child { border-left: none; padding-left: 0; }
.hr-cbar__tiles--flat .hr-cbar__tile:last-child { padding-right: 0; }
@media (max-width: 900px) {
  .hr-cbar__tiles--flat { grid-template-columns: 1fr; gap: 14px; }
  .hr-cbar__tiles--flat .hr-cbar__tile {
    border-left: none; border-top: 1px solid var(--color-border-inner);
    padding: 12px 0 0;
  }
  .hr-cbar__tiles--flat .hr-cbar__tile:first-child { border-top: none; padding-top: 0; }
}

/* Tuile mise en évidence : un cran plus dense, la famille ardoise étant la
   seule autorisée à surligner. Les trois tuiles partagent maintenant l'aplat,
   c'est donc le FILET et le fond du cran supérieur qui la distinguent. */
.hr-cbar__tile--highlight {
  background: var(--color-accent-tint-strong);
  border-color: var(--color-accent-soft);
}
/* Pied de tuile : part vs OT (OT = 100%). `margin-top: auto` le colle au bas,
   donc les pieds des trois tuiles s'alignent quel que soit le nombre de lignes
   au-dessus — sans quoi celui d'une tuile courte flottait au milieu. */
.hr-cbar__tile-pct {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hr-cbar__tile-title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: 10px;
}
.hr-cbar__tile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
}
.hr-cbar__tile-row > span { color: var(--color-text-muted); }
.hr-cbar__tile-row > b {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}
.hr-cbar__tile-row--ot,
.hr-cbar__tile-row--cap,
.hr-cbar__tile-row--pt {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--color-border);
}
.hr-cbar__tile-row--ot > span,
.hr-cbar__tile-row--cap > span,
.hr-cbar__tile-row--pt > span { color: var(--color-text); font-weight: 600; }
.hr-cbar__tile-row--ot > b,
.hr-cbar__tile-row--cap > b,
.hr-cbar__tile-row--pt > b { color: var(--color-navy); font-weight: 700; font-size: 16px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Sort + selection + mass update ──────────────────────────────────────── */
.hr-page__sort-th {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
}
.hr-page__sort-th:hover { color: var(--color-text); }
.hr-page__sort-th.is-sorted { color: var(--color-text); }
/* La flèche de tri ne se montre qu'au SURVOL, ou quand le tri est actif
   (2026-08-30) : au repos, un ↕ sous chaque entête faisait une seconde ligne
   de bruit sur toute la largeur. Même geste que le chevron de groupement.
   `visibility` et non `display` : la hauteur de l'entête ne bouge pas. */
.hr-page__sort-th .hr-page__sort-ind { visibility: hidden; }
.hr-page__sort-th:hover .hr-page__sort-ind,
.hr-page__sort-th.is-sorted .hr-page__sort-ind { visibility: visible; }
.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 : + / − discret + panneau contrats ──────────────
   Un + dit qu'il y a quelque chose DE PLUS à voir, là où un chevron ne disait
   que « ça tourne » (2026-08-27). Manuel : le survol n'ouvre rien, il faut
   cliquer. */
.hr-people__expand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.hr-people__expand:hover { color: var(--color-accent); border-color: var(--color-accent); }
.hr-people__expand.is-open {
  color: var(--color-accent); border-color: var(--color-accent);
  background: var(--color-accent-tint);
}

/* Détail d'une personne (2026-08-27) : plus de cadre teinté ni de titre
   « Contrats · n » — la colonne le dit déjà. Ce qui distingue le détail, c'est
   un LISERÉ ardoise à gauche : on voit qu'on est sous quelqu'un, sans que le
   bloc pèse. */
.hr-people__detail-row > td {
  padding: 0;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 3px 0 0 var(--color-accent-soft);
}
.hr-people__detail {
  padding: 8px 16px 12px 46px;    /* aligné sous le chevron */
}
.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: transparent;
}
/* La première colonne PORTE le nom de ce qu'on lit. */
.hr-people__detail-th--lead { font-weight: 700 !important; color: var(--color-navy) !important; }
.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: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  width: 460px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hr-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 0.5px solid var(--color-border);
}
.hr-modal__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.hr-modal__close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.hr-modal__close:hover { background: var(--color-bg); color: var(--color-text); }

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

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

/* ── People evolution grid (year-end view) ───────────────────────────── */
.hr-evol {
  background: var(--color-card);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  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;
}
/* Vue à deux ans : filet vertical au 1er mois de l'année suivante — la
   frontière entre exercices se lit sans compter les colonnes. */
.hr-evol__table th.hr-evol__ystart,
.hr-evol__table td.hr-evol__ystart { border-left: 2px solid var(--color-border); }
/* Bandeau d'année au-dessus des mois, au format standard (.lk-band) : ardoise
   claire, petites capitales. La ligne des mois se cale JUSTE en dessous quand
   la page défile — deux niveaux collants, pas un seul qui en recouvre l'autre.
   Spécificité assumée : `.hr-evol__table thead th` peint sinon le fond. */
.hr-evol__table thead .hr-evol__yband th.lk-band {
  height: 20px;
  padding: 3px 10px;
  background: var(--color-accent-tint-strong);
  color: var(--color-on-tint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  border-radius: 6px;
  border-bottom: none;
}
/* Deuxième exercice : ardoise pleine, comme le bandeau prévisionnel — deux
   années côte à côte ne doivent jamais se confondre. */
.hr-evol__table thead .hr-evol__yband th.hr-evol__yband--next {
  background: var(--color-accent);
  color: #fff;
}
.hr-evol__table thead .hr-evol__yband th.hr-evol__yband-pad {
  background: transparent;
  border-bottom: none;
}
.hr-evol__table thead .hr-evol__yband th { top: 0; }
.hr-evol__table thead tr:nth-child(2) th { top: 20px; }

/* Vue à deux ans : 24 colonnes de mois. Le signe « % » est retiré (le tableau
   ne dit que des taux, la colonne le rappelait 24 fois par ligne) et les
   colonnes se resserrent, pour lire les deux exercices sans défiler. */
.hr-evol__table--span2 .hr-evol__pct-sign { display: none; }
.hr-evol__table--span2 .hr-evol__mcol { min-width: 30px; }
.hr-evol__table--span2 thead th.hr-evol__mcol { padding-left: 2px; padding-right: 2px; }
.hr-evol__table--span2 .hr-evol__cell,
.hr-evol__table--span2 .hr-evol__total-cell { padding-left: 1px; padding-right: 1px; }
.hr-evol__name {
  white-space: nowrap;
}
.hr-evol__cell {
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  border-radius: 3px;
  padding: 4px 2px;
  color: var(--color-text-muted);
  background: transparent;
}
.hr-evol__cell--active {
  color: var(--sage-dark);
  background: var(--sage-light);
}
.hr-evol__cell--before,
.hr-evol__cell--after {
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  font-weight: 500;
}
.hr-evol__cell--none {
  color: var(--color-text-muted);
  background: var(--stone-100);
}

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

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

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

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

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

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

/* ── Vue d'ensemble : UNE card blanche multi-sections (le hub n'a plus de cadre).
   Les bandeaux servent de séparateurs de section ; les sous-blocs (chart / evol)
   restent des tuiles plates À L'INTÉRIEUR de la card (jamais de card-dans-card). */
.hr-overview .hr-charges-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card);
  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: var(--radius-card); }
.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: var(--radius-card); }
.chr-rate .chr-pcr-head {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
  margin: -18px -22px 16px;     /* card padding 18/22 */
  padding: 12px 22px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
}
.chr-rate .chr-pcr-tit { font-size: 14px; color: var(--color-navy); }

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

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

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

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

/* ── Tuiles de synthèse CLIQUABLES (2026-08-27) ───────────────────────────
   Le chiffre est la porte de son détail : on clique la tuile, la table du
   dessous montre d'où il vient. La retenue se marque par un aplat ardoise et
   un filet, jamais par une couleur nouvelle. */
button.hr-kpi { font: inherit; text-align: left; border: 1px solid transparent; }
.hr-kpi--pick { cursor: pointer; border-radius: 8px; transition: background .12s ease, border-color .12s ease; }
.hr-kpi--pick:hover { background: var(--color-accent-tint); }
.hr-kpi--pick.is-active { background: var(--color-accent-tint); border-color: var(--color-accent-soft); }
.hr-kpi--pick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* L'ÉQUATION de tête : rémunération + charges sociales = masse chargée.
   Les deux rangées forment UN SEUL bloc : même écart entre elles qu'entre
   deux tuiles d'une même rangée (2026-08-27). */
.hr-synth__eq {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 0; margin-bottom: 0;
}
/* Les deux rangées de tuiles vont ENSEMBLE : ni filet ni respiration entre
   elles, juste la gouttière de la grille (2026-08-29). */
.hr-charges-card--bare .hr-synth__eq { margin-bottom: 0; }
/* Toutes les tuiles de l'équation ont la MÊME hauteur : `align-items: center`
   les centrait à leur hauteur propre, et un indice sur deux lignes creusait
   sa tuile plus que les autres (2026-08-27). */
.hr-synth__eq { align-items: stretch; }
.hr-synth__eq .hr-kpi {
  flex: 1 1 160px;
  display: flex; flex-direction: column;
}
/* L'indice se cale en bas : les valeurs restent alignées d'une tuile à
   l'autre, quelle que soit la longueur de la légende. */
.hr-synth__eq .hr-kpi__hint { margin-top: auto; }
.hr-synth__op { align-self: center; }
.hr-synth__op { font-size: 18px; font-weight: 600; color: var(--color-text-muted); flex: 0 0 auto; }

/* Synthèse SANS card (2026-08-27) : les tuiles se posent directement sur la
   page, et le bandeau de titre se resserre — le cadre blanc n'ajoutait qu'une
   respiration entre le titre de section et les chiffres. */
.hr-charges-card--bare {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  margin-top: 0;
}
.hr-charges-card--bare .hr-charges-card__band {
  background: transparent; border: none; padding: 0 0 8px;
}
.hr-charges-card--bare .hr-charges-card__body { padding: 0; gap: 12px; }
/* La tuile porte son propre CONTOUR (même costume que les tuiles du plan LCR,
   2026-08-27) : la card blanche autour de toutes les tuiles disparaît, mais
   chaque tuile reste un objet — sur le crème de la page, un chiffre nu
   flotterait. */
button.hr-kpi, .hr-charges-card--bare .hr-kpi {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}
.hr-charges-card--bare .hr-kpi--pick:hover {
  border-color: var(--color-accent-soft); background: var(--color-accent-tint);
}
.hr-charges-card--bare .hr-kpi--pick.is-active {
  border-color: var(--color-accent); background: var(--color-accent-tint);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
/* La grille reprend son souffle entre deux tuiles encadrées. */
.hr-charges-card--bare .hr-synth__grid { gap: 12px; }
.hr-charges-card--bare .hr-synth__eq { gap: 12px; }
/* La SECONDE rangée est secondaire : l'équation de tête porte la lecture
   principale, ces quatre montants la complètent (2026-08-27). */
.hr-charges-card--bare .hr-synth__grid .hr-kpi { padding: 9px 12px; }
.hr-charges-card--bare .hr-synth__grid .hr-kpi__value { font-size: 15px; }
.hr-charges-card--bare .hr-synth__grid .hr-kpi__label { font-size: 9.5px; margin-bottom: 2px; }
.hr-charges-card--bare .hr-synth__grid .hr-kpi__hint { font-size: 10.5px; }

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Chapitre d'ouverture : trois portes sur volet plein ───────────────────
   Elles vivent sur l'aplat ardoise, donc elles s'éclaircissent par
   transparence plutôt que par une couleur de plus : le blanc translucide
   emprunte le ton du fond et reste dans la charte quel que soit l'aplat.
   Grille égale et pleine largeur : aucune des trois n'est le choix par
   défaut, elles ne doivent donc pas différer de taille. */
.pst-door:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pst-door { transition: none; } }

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

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

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

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

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

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

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

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

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

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

/* En-tête standard de la colonne Collaborateur (components/PersonTh.js).
   La disposition de la ligne vit en style en ligne dans le composant ; ne
   restent ici que l'indicateur de tri et la bascule ⇄, qui ne se battent avec
   aucune règle de page. */
.lk-personth { cursor: pointer; }
.lk-personth__ind {
  font-size: 11px;
  color: var(--color-text-muted);
  display: inline;
  margin-top: 0;
}
.lk-personth.is-sorted .lk-personth__ind { color: var(--color-accent); }
.lk-personth__flip {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 15px; line-height: 1; color: var(--color-text-muted);
  padding: 3px 6px; border-radius: 4px;
  margin-left: auto; margin-right: 0;
}
.lk-personth__flip:hover { color: var(--color-accent); background: var(--color-accent-tint); }
.lk-personth__flip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* La flèche de tri ne se montre qu'au SURVOL, ou quand le tri est actif
   (2026-08-30) : au repos, le ↕ se lisait comme deux points sous le libellé.
   Même règle que les autres entêtes ; `visibility` garde la place, la ligne
   ne saute pas. */
.lk-personth .lk-personth__ind { visibility: hidden; }
.lk-personth:hover .lk-personth__ind,
.lk-personth.is-sorted .lk-personth__ind { visibility: visible; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Le tableau EST le corps de la carte (standard 2026-09-01) : plus de cadre
   ni de rayon internes — la gouttière passe en padding des colonnes de bord. */
.ca2-table-wrap {
  overflow-x: auto;
}
/* La règle « table serrée » (.cbt-card …, 7 px) est plus spécifique : les
   gouttières de bord la battent explicitement. */
.ca2-table th:first-child, .ca2-table td:first-child,
.cbt-card .ca2-table thead th:first-child, .cbt-card .ca2-table tbody td:first-child { padding-left: 34px; }
.ca2-table th:last-child, .ca2-table td:last-child,
.cbt-card .ca2-table thead th:last-child, .cbt-card .ca2-table tbody td:last-child { padding-right: 34px; }

.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;
}
/* Ligne finale : le surlignage fort de la charte (le violet était un
   intrus du passé, 2026-09-01). */
.ca2-pnl-row-op td {
  font-weight: 700;
  font-size: 13px;
  border-top: 2px solid var(--color-accent);
  background: var(--color-accent-tint-strong);
}
.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: var(--color-accent-tint-strong) !important;
  border-top: 2px solid var(--color-accent);
  font-weight: 600;
  color: var(--color-navy);
}

.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: var(--radius-card);
  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: var(--radius-card);
  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 {
  max-width: 1120px;
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid #ECE5D8;
  border: 1px solid var(--color-border, #ECE5D8);
  border-radius: var(--radius-card);
  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; }
/* Les barres qui occupaient la moitié droite sont parties (2026-08-30) : les
   indicateurs restants prennent toute la largeur, sur une seule ligne. */
.ca2-synth__tiles { flex: 1 1 100%; min-width: 320px; align-content: flex-start; }
.ca2-synth__tiles.ca2-synth__row { flex-wrap: nowrap; }
.ca2-synth__tiles .ca2-synth__item { min-width: 0; }
.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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card);
  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%; position: relative; overflow: hidden; }
/* Le taux TF s'écrit DANS le segment vert (2026-09-01) ; segment trop étroit,
   le texte est masqué, pas débordé. */
.ca2-tobar__in {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6px; font-size: 10.5px; font-weight: 600; color: #fff;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.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; }
/* En table figée, la barre prend la largeur de sa colonne : un min-width la
   faisait déborder de la card (2026-09-01). */
.cbt-fixed .ca2-tobar { min-width: 0; }

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

/* ── Usage du temps : UNE table, deux lectures (2026-08-27) ───────────────
   La légende se pose juste au-dessus du tableau qu'elle explique ; en vue
   Groupe, toute la cellule déplie les personnes du groupe. */
/* La légende s'aligne sur le DÉBUT de la barre qu'elle explique : les cinq
   premières colonnes de `COL_W` valent 57 % de la table (16+8+11+11+11), et
   la cellule ajoute son padding. Décalée à gauche de la card, elle légendait
   des colonnes de chiffres. */
.cbt-legend-wrap { padding: 10px 0 0; }
.cbt-legend-wrap .cbt-legend { margin: 0 0 6px; padding-left: calc(57% + 10px); }
.cbt-td-click { cursor: pointer; }
.cbt-chev {
  display: inline-block; width: 16px; margin-right: 4px; vertical-align: middle;
  font-size: 11px; color: var(--color-text-muted); opacity: .5;
  transition: opacity .12s ease, color .12s ease;
}
.ca2-table tbody tr:hover .cbt-chev, .cbt-chev.is-open { opacity: 1; color: var(--color-accent); }
.ca2-table tbody tr:hover .cbt-td-click { color: var(--color-accent); }
.cbt-td-click:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Standard de groupement de la charte : c'est la ligne de GROUPE qui porte le
   léger surlignage ardoise, en gras ; le détail reste sur le fond de la table,
   simplement décalé (le beige de la page sur ces lignes était lourd). */
.cbt-grp td { background: var(--color-accent-tint); font-weight: 600; }
.cbt-sub td { background: transparent; }
.cbt-td-sub { padding-left: 34px !important; color: var(--color-text); font-weight: 400; }

/* Coût de production : ligne de GROUPE surlignée (standard de groupement). */
.ca2-grp-row td { background: var(--color-accent-tint); font-weight: 600; }

/* Usage du temps — le libellé d'entête tient dans un SPAN borné : sur un <th>,
   `max-width` n'est qu'un vœu en `table-layout: auto`, et « Heures indirectes
   (Gestion, Superv., Congés) » débordait sur la colonne voisine (2026-09-01).
   La précision descend sur une seconde ligne, en plus petit. */
.ca2-table thead th .cbt-th-lbl {
  display: inline-block;
  max-width: 92px;
  white-space: normal;
}
.ca2-table thead th .cbt-th-sub {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}
/* Table serrée : huit colonnes chiffrées doivent tenir sans barre horizontale. */
.cbt-card .ca2-table thead th,
.cbt-card .ca2-table tbody td { padding-left: 7px; padding-right: 7px; }

/* 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: var(--radius-card);
  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: var(--radius-card);
  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: var(--radius-card); 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: var(--radius-card); }
.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: var(--radius-card); 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: var(--radius-card); 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); }

/* SPARKLINE — bande de pied de tuile (proto du 18.09.2026). Elle se coupe à la
   carte : la courbe touche les bords, une marge la ferait flotter. */
.lk-spark {
  position: relative;
  height: 40px;
  height: var(--spark-h, 40px);
  margin: 8px -14px -8px;            /* déborde le padding de la tuile */
  overflow: hidden;                  /* la courbe se coupe à la carte */
}
.lk-spark__svg { display: block; width: 100%; height: 100%; }
.lk-spark__area { fill: var(--color-accent-tint); }
.lk-spark__line { fill: none; stroke: var(--color-accent); stroke-width: 1.5px; }

/* Les extrêmes : le plus haut se marque plein, le plus bas se creuse. La charte
   garde ses couleurs pour ce qui alerte ; un plus haut et un plus bas situent. */
.lk-spark__dot {
  position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 999px; pointer-events: none;
}
.lk-spark__dot--hi { background: var(--color-accent); }
.lk-spark__dot--lo { background: var(--color-surface-card); border: 1.5px solid var(--color-accent); }

/* Les bornes datées, posées dans les coins bas : elles disent la fenêtre sans
   qu'un axe ait à l'écrire. */
.lk-spark__lbl {
  position: absolute; bottom: 2px;
  font-size: 9px; color: var(--color-text-muted); letter-spacing: .01em;
  background: color-mix(in srgb, var(--color-surface-card) 72%, transparent);
  padding: 0 2px; border-radius: 2px; pointer-events: none;
}
.lk-spark__lbl--a { left: 4px; }
.lk-spark__lbl--b { right: 4px; }


/* 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%;
}
/* TOUTES LES CARTES À LA LARGEUR DE LA PLUS GRANDE (2026-09-18) : le conteneur
   prend la largeur de son plus large enfant (la bande d'indicateurs, qui doit
   nommer cinq mesures en entier), et les cartes s'y étendent. Leurs bords
   droits tombent donc au même x sans qu'aucune valeur soit écrite en dur deux
   fois : le jour où la bande change de largeur, les cartes suivent.
   ⚠️ La TABLE, elle, garde la largeur de ses colonnes et se cale à gauche dans
   sa carte : le vide reste du blanc de carte après la dernière colonne, jamais
   un écart entre un libellé et son chiffre. */
.fps-synth--reports { width: fit-content; min-width: 0; }
.fps-synth--reports > .report-card,
.fps-synth--reports > .fss-liq { 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`). */
/* (La carte a pris la largeur de ses seules colonnes une heure durant : les
   deux cartes n'avaient alors plus le même bord droit.) */
.fps-synth--reports > .report-card { max-width: 100%; align-self: flex-start; }
/* La table se cale à GAUCHE dans sa carte, à la largeur de ses colonnes. */
.fps-synth--reports > .report-card .fps-cmp-wrap { display: flex; }
.fps-synth--reports > .report-card .fps-cmp { margin-right: auto; }
.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: "Schibsted Grotesk", Inter, system-ui, sans-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: "Schibsted Grotesk", Inter, system-ui, sans-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: "Schibsted Grotesk", Inter, system-ui, sans-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; }
/* Groupement d'une ligne (standard 2026-08-17) : gouttière fixe de 16 px en
   tête de la colonne de libellés — le chevron l'occupe, les lignes sans
   chevron la laissent vide, donc tous les libellés démarrent au même x. Le
   chevron n'apparaît qu'au survol de sa ligne ; la ligne entière est cliquable.
   La gouttière ne s'ouvre que sur les tables qui portent un groupe. */
/* tbody SEULEMENT : l'en-tête porte la même classe sur un th `rowSpan=2`, et
   un th en display:flex perd son étendue sur deux lignes — la colonne des
   libellés s'écroulait alors dans l'en-tête. */
.fps-cmp--grp tbody .fps-cmp-lbl { display: flex; align-items: center; }
.fps-cmp-chev {
  flex: 0 0 16px;
  font-size: 11px; line-height: 1;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity .12s ease, transform .15s ease;
}
.fps-cmp-chev.is-open { transform: rotate(90deg); }
.fps-cmp-row--grp { cursor: pointer; }
.fps-cmp-row--grp:hover .fps-cmp-chev { opacity: 1; }
/* Composante d'un groupe : un retrait, rien d'autre. (Le standard 2026-08-17
   aligne tous les libellés parce que la table y est entièrement groupée ; ici
   deux natures se suivent dans la même table, d'où le retrait.) */
.fps-cmp-row--ingrp .fps-cmp-lbl { padding-left: 30px; }
/* Un groupe OUVERT ne se referme pas par un filet : il se couperait de ses
   propres composantes, et le trait tombait à côté des autres. */
.fps-cmp--grp tbody tr.fps-cmp-row--grp.is-open td { border-bottom: none; }
/* Première ligne du corps : le filet de l'en-tête suffit, deux traits collés
   faisaient une barre épaisse. */
.fps-cmp--grp tbody tr:first-child td { border-top: none; }
.fps-cmp {
  width: auto;                          /* pas pleine largeur → données calées à gauche */
  table-layout: fixed;                  /* largeurs fixes (colgroup) → tables alignées */
  border-collapse: collapse;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
}
.fps-cmp th, .fps-cmp td {
  padding: 6px 16px;
  white-space: nowrap;
}
/* Auto : table pleine largeur, colonnes calées sur le contenu (comme le compte
   de résultat) → lisible en CHF comme en kCHF (les colonnes s'élargissent pour
   les grands nombres au lieu de se chevaucher). */
.fps-cmp--auto { table-layout: auto; width: 100%; }
/* fill : table pleine largeur (aligne la card sur la 1ère) ; la colonne libellé
   (auto) absorbe l'espace → chiffres groupés à droite, pas d'espace vide.
   Libellés longs : retour à la ligne (jamais de chevauchement des chiffres). */
.fps-cmp--fill { width: 100%; }
.fps-cmp--fill .fps-cmp-lbl { white-space: normal; min-width: 0; }
/* Compte de résultat : libellés courts, tenus sur une seule ligne (un ratio
   coupé en deux, « Marge brute / (% du CA net) », se lit comme deux postes). */
.fps-cmp--lblnw .fps-cmp-lbl { white-space: nowrap; }
.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);
}
/* Colonnes d'écart des lignes ENTRE les sous-totaux : noir léger. Une ligne de
   synthèse garde le noir plein, et le terracotta quand l'écart y est négatif
   (voir deltaText) — sur une ligne de charge, un écart négatif est une baisse
   de coût, et le rouge la racontait à l'envers. */
.fps-cmp-delta { color: var(--color-text-muted); }
/* « na » : la mesure ne s'applique pas. Toujours atténué, même sur une ligne de
   synthèse — c'est une absence, pas un résultat. */
.fps-cmp-na { color: var(--color-text-muted); font-weight: 400; }
.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: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-weight: 600;
  color: var(--color-navy);
  padding-top: 12px;
  white-space: normal;
}
/* Hiérarchie sub/total : graisse + filet au-dessus/dessous (lignes importantes).
   Les lignes de détail restent sans bordure (table épurée). */
.fps-cmp-row--sub td {
  font-weight: 600;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.fps-cmp-row--total td {
  font-weight: 700;
  color: var(--color-navy);
  border-top: 2px solid var(--color-text);   /* noir épais (total) */
}
.fps-cmp-row--total td.fps-cmp-neg { color: var(--color-terracotta); }
/* Ligne d'espacement (ex. sous EBITDA avant les indicateurs EPT). */
.fps-cmp-row--spacer td { height: 10px; border: none; padding: 0; background: none; }
/* Intersection colonne phare × ligne total (charte). */
.fps-cmp-row--total td.fps-cmp-key { background: var(--color-accent-tint-strong); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Bandeau « Évolution de la liquidité » en tête de la Synthèse (Rapports
   standards) : Liquidité (héros gauche) et BFRE (héros droite) sur 2 lignes,
   4 composants du BFRE en 2×2 au centre, courbe des mois réalisés en fond.
   align-self flex-start → calé à gauche sur la card `report-card` (fit-content)
   du tableau en dessous ; largeur bornée → ne déborde pas à droite. */
.fss-liq {
  /* Largeur adaptée au NOMBRE d'indicateurs : cinq tuiles qui nomment en
     entier « Besoin en fonds de roulement » demandent 950 px. C'est elle, la
     plus large, qui donne sa largeur aux cartes du dessous. */
  align-self: flex-start; width: 950px; max-width: 100%; margin: 2px 0 0;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); 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); }
/* TROIS indicateurs, tous des SOLDES À UNE DATE (2026-09-18) : trésorerie,
   autonomie, besoin en fonds de roulement. Le chiffre d'affaires et l'EBITDA en
   sont partis — ce sont des FLUX, ils suivent la période lue, et la cascade du
   compte de résultat les donne juste dessous, avec leur comparaison à N-1. La
   bande dit donc une seule chose : de quoi l'entreprise dispose, et pour
   combien de temps. */
.fss-evo__band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fss-evo__tile {
  position: relative; min-width: 0; padding: 11px 14px 8px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 118px;
  border-left: 1px solid var(--color-border-inner);
}
.fss-evo__tile:first-child { border-left: none; }
.fss-evo__tile.has-b { border-bottom: 1px solid var(--color-border-inner); }
.fss-evo__tile--hero { grid-row: 1 / 3; min-height: 188px; }
.fss-evo__tile--last { grid-column: 4; }
/* Pied de tuile : la DATE ou la période que le chiffre porte. Un solde se lit
   à une date, un flux sur une période, et les mélanger sans le dire est la
   première source de malentendu sur un tableau de bord. */
.fss-evo__foot {
  position: relative; margin-top: auto; padding-top: 6px;
  border-top: 1px dashed var(--color-border);
  font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap;
}
/* AUTONOMIE sous le seuil : la seule alerte de la bande, en famille
   terracotta — c'est la mesure qui dit combien de temps l'entreprise tient. */
.fss-evo__tile--alert { background: color-mix(in srgb, var(--color-terracotta) 7%, transparent); }
.fss-evo__tile--alert .fss-evo__lbl,
.fss-evo__tile--alert .fss-evo__val,
.fss-evo__tile--alert .fss-evo__var { color: var(--color-terracotta); }
.fss-evo__tile--alert .fss-evo__foot { border-top-color: color-mix(in srgb, var(--color-terracotta) 35%, transparent); }
.fss-evo__tile--watch .fss-evo__val { color: var(--color-amber); }
.fss-evo__val small { font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
/* Composantes du cycle : une ligne de détail, sous les quatre indicateurs. */
.fss-evo__parts {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--color-border-inner);
  font-size: 12px; color: var(--color-text-muted);
}
.fss-evo__parts b { color: var(--color-navy); font-weight: 600; }
/* Ce que la ligne décompose, dit à son extrémité droite. */
.fss-evo__parts-note { margin-left: auto; }
/* Courbe de fond estompée : les chiffres gardent le dessus. */
.fss-evo__bg { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; display: block; opacity: .38; pointer-events: none; }
.fss-evo__tile--hero .fss-evo__bg { height: 58%; }
.fss-evo__val { position: relative; font-size: 24px; font-weight: 700; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fss-evo__tile--hero .fss-evo__val { font-size: 34px; margin-top: 2px; }
.fss-evo__var { position: relative; margin-top: 3px; font-size: 11.5px; font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.fss-evo__tile--hero .fss-evo__var { font-size: 12.5px; margin-top: 5px; }
/* Sous-titre de carte : la période lue, d'un ton atténué, derrière le titre. */
.report-card__sub { font-weight: 400; color: var(--color-text-muted); }

.fss-evo__var--up { color: var(--color-sage); }
.fss-evo__var--down { color: var(--color-terracotta); }
.fss-evo__since { color: var(--color-text-muted); font-weight: 400; }
.fss-evo__lbl {
  white-space: normal; min-height: 2.3em; align-content: start;
  position: relative; margin-bottom: 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .fss-liq { align-self: stretch; }
  .fss-evo__band { grid-template-columns: 1fr 1fr; grid-template-rows: auto; max-width: 100%; }
  .fss-evo__tile:nth-child(-n+3) { border-bottom: 1px solid var(--color-border-inner); }
  .fss-evo__tile:nth-child(odd) { border-left: none; }
  .fss-evo__tile--hero { grid-row: auto; grid-column: 1 / 3; min-height: 140px; }
  .fss-evo__tile--last { grid-column: 1 / 3; }
}

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

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

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


/* CE QUE LA BANDE COUVRE, en tête de tuile à droite du libellé (2026-09-18) :
   une propriété de l'indicateur, pas du tracé — la sparkline ne porte que sa
   courbe et ses deux bornes datées. */
.fss-evo__lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fss-evo__cap { font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); white-space: nowrap; }

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

.fin-screenprint { width: 100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Broad catch-all (0,2,1) — covers any table inside the compact layout */
.page-table-layout.is-compact th,
.page-table-layout.is-compact td {
  padding-top:    6px;
  padding-bottom: 6px;
}
/* Narrower (0,3,1) kept for page-table specificity vs. page-level overrides */
.page-table-layout.is-compact .page-table th,
.page-table-layout.is-compact .page-table td {
  padding-top:    6px;
  padding-bottom: 6px;
}
.page-table-layout.is-compact {
  gap: 16px;
}
.page-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-table-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.3px;
}
.page-table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* ⚠️ Sa barre de défilement vient du STANDARD (styles/designSystem.css) depuis
   le 2026-09-18 : gouttière réservée sous la dernière ligne, jamais sur le
   texte. Ne pas la redéfinir ici. */
.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: var(--radius-card);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
}
/* ── Embedded dans un hub à onglets (ex. États financiers) ───────────────────
   La table vit déjà dans l'encadré du hub (fond, bordure, ombre, padding) : on
   retire le gabarit card de la table et le padding de page pour éviter la
   card-dans-card. La bande d'en-tête bleu-gris du thead suffit à délimiter. */
.page-table-layout.is-embedded {
  padding: 0;
  gap: 16px;
}
.page-table-layout.is-embedded .page-table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Bandeaux Réalisé / Prévisionnel (2026-08-16) — mêmes couleurs que les cartes
   du Plan services : sable ardoise clair pour le réel, ardoise pleine pour le
   prévisionnel. */
.pl-bands th { padding: 0 !important; border: 0 !important; background: transparent !important; }
.pl-bands .pl-band {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 2px 8px !important; height: 18px;
}
.pl-bands .pl-band--real { background: var(--color-accent-tint-strong) !important; color: var(--color-on-tint); border-radius: 6px 0 0 6px; }
.pl-bands .pl-band--fore { background: var(--color-accent) !important; color: #fff; border-radius: 0 6px 6px 0; }
/* Le % CAN du bloc annuel porte la MÊME typographie que celui de la vue Réel :
   plus petit que les francs, jamais en gras, atténué sur une ligne de compte,
   terracotta seulement s'il est négatif (2026-09-18, le bloc a quitté le milieu
   de la table pour la fermer). */
.page-table.pl-actuals .pl-annual-pct { font-size: 11px; }
.page-table.pl-table tbody td.pl-annual-pct,
.page-table.pl-actuals tbody tr.pl-row--subtotal td.pl-annual-pct,
.page-table.pl-actuals tbody tr.pl-row--grand td.pl-annual-pct,
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-annual-pct { font-size: 11.5px; font-weight: 400; }
.page-table.pl-actuals tbody tr.pl-row--acc td.pl-annual-pct { color: var(--pl-muted2); }
.page-table.pl-actuals tbody tr td.pl-annual-pct.pl-neg { color: var(--pl-accent); }

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

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

/* Blocs de synthèse : l'aplat suffit, pas de bordure noire (2026-08-16).
   Le Total de l'année est la figure qu'on cherche → en gras. */
.page-table.pl-actuals thead th.pl-annual--first,
.page-table.pl-actuals tbody td.pl-annual--first,
.page-table.pl-actuals thead th.pl-annual--last,
.page-table.pl-actuals tbody td.pl-annual--last,
.page-table.pl-actuals thead th.pl-cumul-chf,
.page-table.pl-actuals tbody td.pl-cumul-chf,
.page-table.pl-table .pl-ytd-inline { border-left: 0 !important; border-right: 0 !important; }
/* Total de l'exercice : la figure recherchée du bloc — en gras, en-tête
   comprise, et sur TOUTES les rangées (les sous-totaux la remettaient en
   graisse normale). ⚠️ Le gras suit la COLONNE, jamais sa place : il tenait à
   `pl-annual--last`, qui désignait le Total tant qu'il fermait le bloc ; depuis
   qu'il l'OUVRE (2026-09-18), c'est « À venir » qui ferme, et le gras serait
   tombé sur elle. */
.page-table.pl-actuals thead th.pl-col-fy:not(.pl-blk2025),
.page-table.pl-actuals tbody td.pl-num--fy,
.page-table.pl-actuals tbody tr td.pl-num--fy,
.page-table.pl-actuals tbody tr.pl-row--subtotal td.pl-num--fy,
.page-table.pl-actuals tbody tr.pl-row--grand td.pl-num--fy { font-weight: 700 !important; }

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

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

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

/* LES PILULES DE SOURCE PRENNENT LA MÊME COLONNE QUE LES RÈGLES (2026-09-18).
   « PLAN DES VENTES », « MANUEL », « ACOMPTES CLIENTS » suivaient leur libellé :
   chacune démarrait donc à un x différent, et l'œil ne pouvait pas lire d'où
   viennent les lignes en descendant la colonne. Elles rejoignent la colonne
   fixe des règles, calées à gauche comme elles — c'est la même information,
   qu'elle se choisisse ou qu'elle soit imposée par une connexion. */
.page-table.pl-table tbody td.pl-line .pl-calc-badge {
  margin-left: auto;
  width: 168px; flex: 0 0 168px;
  text-align: left;
}
/* Deux pilules sur la même ligne restent côte à côte dans cette colonne : la
   seconde ne repousse pas la première hors de son rang. */
.page-table.pl-table tbody td.pl-line .pl-calc-badge ~ .pl-calc-badge {
  margin-left: 0; width: auto; flex: 0 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

.bs-caret { display: inline-block; width: 16px; color: var(--color-text-muted); }
.bs-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--color-border);
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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: var(--radius-card);
  padding: 2px 8px;
  cursor: pointer;
}
.bs-struct-bfre:hover { border-color: var(--navy-mid); color: var(--color-navy); }
.bs-struct-bfre.is-on {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.bs-struct-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.bs-struct-addbtn {
  background: var(--color-navy); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.bs-struct-addbtn:disabled { opacity: 0.4; cursor: default; }

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

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

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

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

/* ── Ajustements ─────────────────────────────────────────────────────────── */
.bs-adj-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--color-accent-tint-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-weight: 600;
  color: var(--color-navy);
}
.bs-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bs-modal-field { display: flex; flex-direction: column; gap: 4px; }
.bs-modal-field > span { font-size: 12px; color: var(--color-text-muted); }
.bs-modal-input {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: "Inter", system-ui, sans-serif;
}
.bs-modal-input:focus { outline: 2px solid var(--color-input); border-color: var(--color-input); }
.bs-modal-input[readonly] { background: var(--color-bg); color: var(--color-text-muted); }
.bs-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* LE VERDICT D'UN RAPPORT (2026-09-18) : une ligne, une icône, un mot. Le pied
   déroulait l'écart mois par mois et le résultat cumulé — ce qu'on regarde
   quand on VÉRIFIE une saisie, et qui reste dans Données comptables. Sur l'état
   qui se lit, il ne reste que la réponse. */
.bs-verdict {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 12px;
  border-radius: var(--radius-card);
  font-size: 12.5px; font-weight: 500;
}
.bs-verdict.is-ok { color: var(--color-sage); background: color-mix(in srgb, var(--color-sage) 8%, transparent); }
/* L'ÉCART est une alerte : le seul terracotta de cet écran, et il DÉFAIT la
   confiance qu'on met dans les chiffres du dessus. */
.bs-verdict.is-ko { color: var(--color-terracotta); background: color-mix(in srgb, var(--color-terracotta) 9%, transparent); }
.bs-verdict svg { flex: 0 0 auto; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── LA GOUTTIÈRE RESTE BLANCHE (2026-09-18) ────────────────────────────────
   Entre l'exercice et les mois, une colonne vide sépare deux lectures : ce qui
   est clos d'un côté, son détail de l'autre. Les filets des totaux la
   traversaient pourtant de part en part, et les deux blocs se lisaient comme un
   seul tableau très large. Cette règle ferme la question pour toutes les
   lignes, quelles que soient celles qui viendront. */
.cf-table td.cf-col-gap,
.cf-table th.cf-col-gap,
.cf-table tr td.cf-col-gap,
.cf-table tr th.cf-col-gap {
  border: 0 !important;
  background: var(--color-surface-card) !important;
}

/* ── DU NOIR FRANC SUR LES CHIFFRES (2026-09-18, retour d'Olivier) ──────────
   Les valeurs héritaient de la cellule et tombaient parfois en atténué : un
   montant se lit, il ne se devine pas. L'atténué reste aux ENTÊTES, aux unités
   et aux mentions, jamais à un chiffre. */
.cf-table .cf-num { color: var(--color-text); }
.cf-row--detail td { color: var(--color-text); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Thermomètres ratios de liquidité ────────────────────────────────────── */
.fsyn-thermos {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 14px;
  padding: 2px 0 0;
}
.fsyn-thermo { text-align: center; }
.fsyn-thermo__val { font-size: 14px; font-weight: 700; color: var(--color-navy); margin-bottom: 3px; }
.fsyn-thermo__val--terra { color: var(--color-terracotta); }
.fsyn-thermo__tube {
  position: relative;
  width: 22px;
  height: 64px;
  margin: 0 auto;
  background: var(--stone-100);
  border-radius: var(--radius-card);
}
.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: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 12px; font-style: italic; font-weight: 700;
  line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fwc-info__btn:hover { background: var(--color-accent-tint); }
.fwc-info__pop {
  position: absolute;
  top: 24px; right: 0;
  z-index: 20;
  width: max-content; max-width: 360px;
  padding: 9px 12px;
  background: var(--color-navy);
  color: #fff;
  font-size: 12px; line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(43, 32, 62, 0.22);
}
.fwc-info__pop::after {
  content: ""; position: absolute; top: -5px; right: 6px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid var(--color-navy);
}
.fwc-info__line { display: block; }
.fwc-info__line + .fwc-info__line { margin-top: 4px; }
/* Variante ancrée à gauche (ⓘ posée en début de ligne, devant les ratios). */
.fwc-info__pop--left { right: auto; left: 0; }
.fwc-info__pop--left::after { right: auto; left: 6px; }

/* ── Card Délais de rotation (DSO/DIO/DPO) — Card standard (coins arrondis,
   overflow masqué) ; avertissement TVA dans la table. ─────────────────────── */
.fwc-warn {
  color: var(--color-terracotta);
  font-size: 12px;
  text-align: left;
  white-space: normal;
}

/* Lignes de ratio (onglet Ratio liquidité) : le CHIFFRE en poids normal,
   même si la ligne (libellé) est en gras. */
.fwc-table td.fwc-ratioval { font-weight: 400; }

/* Onglet BFRE : layout fixe + colonne libellé de largeur identique → les colonnes
   mois s'alignent entre la table principale et les cards rotation (DSO/DIO/DPO). */
.fwc-table--roll { table-layout: fixed; width: 100%; }
.fwc-table--roll col.fwc-col-rolllabel { width: 220px; }
.fwc-table--roll td.fwc-rowhead,
.fwc-table--roll th.fwc-rowhead { white-space: normal; }

/* Card Délais de rotation : en-tête mois non gras, aligné en bas. */
.fwc-rollcard .fwc-table thead th {
  font-weight: 400;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  vertical-align: bottom;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* Bande de titre par délai : aplat ardoise clair (seule famille de surlignage
   autorisée) + icône, titre Inter SUR 1 LIGNE (charte : contenu de table en
   Inter, pas en serif). */
.fwc-row--secttitle td.fwc-secttitle {
  text-align: left;
  white-space: nowrap;                       /* titre sur 1 seule ligne */
  background: var(--color-accent-tint);
  padding-top: 8px;
  padding-bottom: 8px;
}
.fwc-secticon {
  vertical-align: -3px;
  margin-right: 9px;
  color: var(--color-accent);
}
.fwc-secttitle__t {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; color: var(--color-on-tint);
}
.fwc-secttitle .fwc-info { margin-left: 8px; }

/* Bande de titre cliquable : déplie les valeurs du calcul. Chevron révélé au
   survol seulement (standard groupement 2026-08-17). */
.fwc-row--rot { cursor: pointer; }
.fwc-rot-chevron {
  margin-left: 7px; vertical-align: -1px; color: var(--color-on-tint);
  opacity: 0; transition: opacity .12s ease, transform .12s ease;
}
.fwc-row--rot:hover .fwc-rot-chevron { opacity: 1; }
.fwc-rot-chevron.open { opacity: 1; transform: rotate(180deg); }

/* Ligne formule (ⓘ) : texte dans la table, lisible — plus de popover tronqué. */
.fwc-row--formula td {
  text-align: left; white-space: normal;
  font-size: 12px; color: var(--color-text-muted);
  background: var(--color-surface-page);
  padding-top: 6px; padding-bottom: 6px;
}
.fwc-formula-line { display: block; }
.fwc-formula-line + .fwc-formula-line { margin-top: 2px; }

/* Détail du calcul (numérateur moyen 12 mois + flux 12 mois glissants). */
.fwc-row--rotdetail td { color: var(--color-text-muted); }
.fwc-row--rotdetail .fwc-rowhead { color: var(--color-text); }

/* État de chargement — il n'avait pas de classe (style inline) : l'export ne
   pouvait pas le distinguer d'un onglet muet, et partait sans le BFRE ni le
   ratio de liquidité. */
.fwc-loading { color: var(--color-text-muted); }

/* Rapports sur-mesure — viewer + builder. Famille bleu-gris (charte card). */

/* Export PDF/Excel (CustomReportsExport) : titre de rapport au-dessus de chaque
   table, sans card (rendu à plat pour le print et l'export). */
.custrep-print-block { margin-bottom: 8px; }
.custrep-print-title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card); 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: 'Schibsted Grotesk', Inter, system-ui, sans-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: 'Schibsted Grotesk', Inter, system-ui, sans-serif;
  font-size: 32pt;
  font-weight: 700;
  color: #2B203E;
  letter-spacing: -0.01em;
  margin: 6mm 0 2mm;
}
.ppl-cover__meta {
  font-size: 14pt;
  color: #555;
}
.ppl-cover__date {
  font-size: 10pt;
  color: #9a8c78;
  margin-top: 2mm;
}
.ppl-cover__toc {
  margin-top: 18mm;
  border-top: 1pt solid #2B203E;
  padding-top: 6mm;
}
.ppl-cover__toc-title {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #777;
  font-weight: 600;
  margin-bottom: 4mm;
}
.ppl-cover__toc-list {
  margin: 0;
  padding-left: 6mm;
  font-size: 12pt;
  color: #2B203E;
  line-height: 1.9;
}


/* ── Charges Sociales Page ─────────────────────────────────────────────────── */
/* Palette Logike :
   fond        var(--color-bg) (taupe doux)
   navy        #2B203E
   terracotta  #BA5D4A
   vert sauge  #5C7A3E
   ambré       #B8862A
   bleu input  var(--color-input)
*/

.cs-layout {
  /* Horizontal padding handled by .logike-page-wrap (App.css) */
  max-width: 845px;
  padding: 32px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Embarqué dans un hub à onglets : le hub porte déjà l'espacement haut. */
.cs-layout.is-embedded { padding-top: 0; }

/* ── En-tête ─────────────────────────────────────────────────────────────────── */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cs-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-title {
  font-size: 20px;
  font-weight: 600;
  color: #2B203E;
  letter-spacing: -0.3px;
  margin: 0;
}

.cs-canton-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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; }

/* 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: var(--radius-card);
  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: 'Schibsted Grotesk', Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}
.scs__sub { font-size: 11px; color: #78716C; color: var(--color-text-muted, #78716C); }
/* Avec la barre de filtre standard (PersonFilterBar) : titre + barre calés à
   gauche (la barre porte margin-right:auto), sub à droite, alignement centré. */
.scs__head:has(.pfb) { align-items: center; gap: 12px; }
.scs__empty { padding: 16px; font-size: 13px; color: #78716C; color: var(--color-text-muted, #78716C); }

.scs__scroll { overflow-x: auto; }
.scs__table {
  /* width:100% → la table remplit la carte quand il y a la place (12 mois) et
     déborde en scroll quand c'est trop large (phasing 24 mois). */
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scs__table th,
.scs__table td { padding: 4px 9px; }

/* Colonne libellé figée à gauche */
.scs__lbl {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
  background: var(--color-card, #FFFFFF);
  text-align: left;
  min-width: 190px;
  color: #57534E;
  color: var(--color-text, #57534E);
  font-weight: 500;
}
.scs__lbl--head { background: #FFFFFF; background: var(--color-card, #FFFFFF); }

.scs__ygrp {
  text-align: center;
  color: #B8862A;
  color: var(--color-amber, #B8862A);
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
  border-left: 2px solid var(--color-border);
  font-weight: 600;
}
.scs__mh {
  text-align: right;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-weight: 600;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
}
.scs__cell { text-align: right; color: #1A1219; color: var(--color-text, #1A1219); }
.scs__cell--ystart { border-left: 2px solid var(--color-border); }
/* Filet réel / futur (premier mois ouvert) — navy, plus marqué que les séparateurs d'année. */
.scs__mh--sep, .scs__cell--sep { border-left: 2px solid #2B203E; border-left: 2px solid var(--color-navy, #2B203E); }

/* Colonne Total annuelle (somme des 12 mois) — séparateur + surlignage charte. */
.scs__mh--total,
.scs__cell--total {
  border-left: 1px solid #E7E5E4;
  border-left: 1px solid var(--color-border, #E7E5E4);
  background: #F1F5F6;
  background: var(--color-accent-tint, #F1F5F6);
  font-weight: 700;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
}

.scs__row { border-bottom: 1px solid #F4EFE5; }
.scs__sec td {
  background: #F7F4EE;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-weight: 600;
  position: sticky;
  left: 0;
}

.scs__row--brut .scs__lbl,
.scs__row--brut .scs__cell { color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.scs__row--cost .scs__cell { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); }
.scs__row--empr .scs__cell { color: #B8862A; color: var(--color-amber, #B8862A); }
.scs__row--cash .scs__cell { color: #2563EB; color: var(--color-input, #2563EB); }

/* Sous-totaux de charges (salarié / employeur) : couleur de section, en gras, filet haut. */
.scs__row--subcost td { border-top: 1px solid #E7E5E4; border-top: 1px solid var(--color-border, #E7E5E4); }
.scs__row--subcost .scs__lbl,
.scs__row--subcost .scs__cell { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); font-weight: 700; }
.scs__row--subempr td { border-top: 1px solid #E7E5E4; border-top: 1px solid var(--color-border, #E7E5E4); }
.scs__row--subempr .scs__lbl,
.scs__row--subempr .scs__cell { color: #B8862A; color: var(--color-amber, #B8862A); font-weight: 700; }

/* Ligne de ratio (% des salaires bruts) : atténuée, italique — se lit comme un taux, pas un montant. */
.scs__row--pct .scs__lbl,
.scs__row--pct .scs__cell { color: #78716C; color: var(--color-text-muted, #78716C); font-style: italic; font-weight: 500; }

.scs__row--strong { background: var(--color-accent-tint-strong); }
.scs__row--strong .scs__lbl { background: var(--color-accent-tint-strong); color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.scs__row--strong .scs__cell { color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 700; }
.scs__row--strong .scs__cell--ystart { border-left-color: var(--color-border); }

/* Synthèse compacte (cash) : 1 ligne par charge, totaux 24 mois */
.scs-syn { width: 100%; border-collapse: collapse; font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.scs-syn th {
  text-align: right; padding: 6px 14px; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #78716C; color: var(--color-text-muted, #78716C); font-weight: 600;
  border-bottom: 1px solid #E7E5E4;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
}
.scs-syn th:first-child { text-align: left; }
.scs-syn td { padding: 5px 14px; text-align: right; border-bottom: 1px solid #F4EFE5; }
.scs-syn td:first-child { text-align: left; color: #2B203E; color: var(--color-navy, #2B203E); font-weight: 500; }
.scs-syn .scs-syn__empr { color: #B8862A; color: var(--color-amber, #B8862A); }
.scs-syn .scs-syn__empl { color: #BA5D4A; color: var(--color-terracotta, #BA5D4A); }
/* Colonne échéancier (pastilles de mois) — alignée à gauche, largeur juste. */
.scs-syn th.scs-syn__chips-h { text-align: left; font-weight: 600; }
.scs-syn td.scs-syn__chips { text-align: left; width: 1%; white-space: nowrap; padding: 3px 14px; }
.scs-syn tfoot td {
  border-top: 1px solid #E7E5E4;
  border-top: 1px solid var(--color-border, #E7E5E4); border-bottom: none;
  font-weight: 700; color: #2B203E; color: var(--color-navy, #2B203E);
}

/* Onglet « Charges personnel & sociales » — vue pont accrual → dette → décaissement. */
.fsoc-wrap { overflow-x: auto; }
.fsoc {
  border-collapse: collapse; width: 100%; table-layout: fixed;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.fsoc th, .fsoc td {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border-inner); white-space: nowrap;
}
.fsoc thead th {
  font-weight: 600; color: var(--color-text); text-align: right;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-card);
}
.fsoc thead th.fsoc-lbl { text-align: left; }
/* Sous-libellés réel/prév. (homogène avec le Compte de résultat). */
.fsoc thead tr.fsoc-subhead-af th { font-size: 9px; font-weight: 600; border-bottom: none; padding-top: 0; }
.fsoc thead tr.fsoc-subhead-af th.fsoc-af--a { color: var(--color-accent); }
.fsoc thead tr.fsoc-subhead-af th.fsoc-af--f { color: var(--color-amber); }
/* Colonne libellé bornée (sinon un titre de bloc long élargit toute la colonne
   et serre les mois). Mois ET Total de largeur ÉGALE (le Total n'est plus
   écrasé) ; le % un peu plus étroit. */
.fsoc .fsoc-lbl { text-align: left; padding-left: 1.1rem; width: 200px; white-space: normal; }
.fsoc .fsoc-num { text-align: right; width: 58px; }
.fsoc .fsoc-total { width: 58px; }
.fsoc .fsoc-pct { width: 50px; }
.fsoc .fsoc-total { background: var(--color-surface-result); font-weight: 600; }
.fsoc .is-neg { color: var(--color-terracotta); }

/* En-tête de bloc (Accrual / Décaissement / Solde de dette). */
.fsoc-block td {
  background: var(--color-surface-th); font-weight: 700; color: var(--color-navy);
  border-top: 1px solid var(--color-border); text-transform: none; letter-spacing: 0;
  padding-left: 0.6rem;
}
.fsoc-block__hint { font-weight: 400; font-size: 0.78rem; color: var(--color-text-muted); }
.fsoc-strong .fsoc-lbl { font-weight: 600; color: var(--color-navy); }
.fsoc-debt .fsoc-num { color: var(--color-navy); }

/* Ligne de contrôle. */
.fsoc-check td { border-top: 2px solid var(--color-border); background: var(--color-accent-tint); font-size: 0.8rem; }
.fsoc-ok { color: var(--color-sage); font-weight: 600; }
.fsoc-ko { color: var(--color-terracotta); font-weight: 600; }

/* Bouton d'ouverture de l'échéancier. */
.fsoc-btn {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  border-radius: 8px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.82rem;
  cursor: pointer; color: var(--color-accent);
}
.fsoc-btn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* Pop-up phasing. */
.fsoc-modal__scrim { position: fixed; inset: 0; background: rgba(26,18,25,0.24); z-index: 50; }
.fsoc-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(920px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); 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: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-weight: 600; color: var(--color-navy); }
.fsoc-modal__x { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.fsoc-modal__body { padding: 1.1rem 1.2rem; }

/* Chevron de regroupement des blocs — révélé au survol (slot fixe, pas de décalage). */
.fsoc .fsoc-caret-slot { display: inline-block; width: 15px; text-align: left; vertical-align: middle; }
.fsoc-chev {
  display: inline-block; width: 11px; height: 11px; vertical-align: middle;
  color: var(--color-accent); transition: transform 0.15s ease, opacity 0.12s ease;
}
.fsoc-chev.is-open { transform: rotate(90deg); }
.fsoc-collapsible { cursor: pointer; }
.fsoc tbody tr.fsoc-collapsible .fsoc-chev { opacity: 0; }
.fsoc tbody tr.fsoc-collapsible:hover .fsoc-chev { opacity: 1; }
/* Totaux mensuels portés par l'en-tête de bloc. */
.fsoc .fsoc-block-tot { font-weight: 600; color: var(--color-navy); }
/* Lignes de détail (charges) : indentées sous l'en-tête de bloc. */
.fsoc-detail-row .fsoc-lbl { padding-left: 2.1rem; }

/* Sous-en-tête de section (Cotisations de base / Assurances) dans un bloc. */
.fsoc-secrow td {
  padding: 0.2rem 0.6rem 0.2rem 1.4rem; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface-th) 45%, transparent);
}

/* En-têtes de bloc alignés à gauche comme « Salaires bruts » : le chevron passe
   en absolu dans la marge, le titre démarre au même retrait (1.4rem). */
.fsoc-block .fsoc-lbl { position: relative; }
.fsoc-block .fsoc-caret-slot {
  position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%); width: auto;
}
/* Colonne % (part des salaires bruts). */
.fsoc .fsoc-pct { color: var(--color-text-muted); font-size: 0.78rem; min-width: 3.4rem; }

/* Démarcation réel / planifié : filet vertical à gauche du 1er mois planifié. */
.fsoc .fsoc-fc-start { border-left: 2px solid #B7C7CD; border-left: 2px solid var(--color-accent-soft, #B7C7CD); }

/* Ligne « Postes ouverts (Assurances sociales) » dans le décaissement (payé en janvier). */
.fsoc-open-row .fsoc-lbl { color: var(--color-navy); }

/* Champ « Masse salariale déclarée » — en tête de l'onglet, pilote le
   décaissement des assurances. */
.fsoc-declared {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 4px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.fsoc-declared__lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--color-text); font-weight: 600;
}
.fsoc-declared__in {
  width: 140px; padding: 4px 8px; text-align: right;
  border: 1px solid var(--color-field-focus); border-radius: 5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.fsoc-declared__cur { color: var(--color-text-muted); font-weight: 400; }
.fsoc-declared__hint { font-size: 0.74rem; color: var(--color-text-muted); }
.fsoc-declared__reset {
  margin-left: 8px; border: none; background: none; cursor: pointer;
  color: var(--color-accent); font-size: 0.74rem;
}

/* Ligne de référence « Bilan, Assurances sociales » — solde comptabilisé,
   connecté au bilan (comparaison avec la dette calculée). Grisé, non sommé. */
.fsoc-bilan-ref .fsoc-lbl { color: var(--color-text-muted); padding-left: 1.6rem; }
.fsoc-bilan-ref .fsoc-num { color: var(--color-text-muted); }

/* Ligne de total d'un bloc, sous les lignes sommées. */
.fsoc-blocktotal td {
  font-weight: 700; color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}
.fsoc-blocktotal .fsoc-lbl { padding-left: 1.1rem; }
/* Total cumulé (running) : plus léger, italique. */
.fsoc-cumul td { font-weight: 600; color: var(--color-text-muted); border-top: none; }

/* Cards séparées (Salaires · Décaissement · Charges calculées · Solde dette). */
.fsoc-cards { display: flex; flex-direction: column; gap: 16px; }

/* Bouton échéancier mis en évidence (accent plein). */
.fsoc-btn--primary {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
.fsoc-btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); filter: brightness(0.95); }

/* Card Bilan : colonnes Total / % vidées mais conservées (alignement inchangé
   avec les autres cards). */
.fsoc--notot .fsoc-total, .fsoc--notot .fsoc-pct { visibility: hidden; }
.fsoc--notot .fsoc-total { background: transparent; }

/* Synthèse des totaux des autres cards, dans la card Salaires. */
.fsoc-synth .fsoc-lbl { color: var(--color-text-muted); }
.fsoc-synth .fsoc-num { color: var(--color-navy); font-weight: 600; }
.fsoc-synth--top td { border-top: 1px solid var(--color-border); }

/* ── Une seule card, groupes repliables (2026-08-17) ─────────────────────────
   Standard : libellés alignés sur une GOUTTIÈRE FIXE (le chevron n'écarte pas le
   texte), chevron révélé au SURVOL seulement, sous-totaux en gras. */
.fsoc tr.fsoc-grp { cursor: pointer; }
.fsoc tr.fsoc-grp > td { background: var(--color-accent-tint); font-weight: 700; }
.fsoc .fsoc-gut { display: inline-block; width: 16px; }
.fsoc .fsoc-chev {
  display: inline-block; width: 16px; font-size: 10px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease, transform .15s ease;
}
.fsoc tr.fsoc-grp:hover .fsoc-chev { opacity: 1; }
.fsoc .fsoc-chev.is-open { transform: rotate(90deg); }
/* Tous les libellés démarrent au même x : la gouttière porte le chevron. */
.fsoc .fsoc-lbl { padding-left: 10px; }
.fsoc tr.fsoc-detail-row .fsoc-lbl,
.fsoc tr.fsoc-bilan-ref .fsoc-lbl,
.fsoc tr.fsoc-blocktotal .fsoc-lbl { padding-left: 10px; }

/* Bandeau standard réel / prévisionnel (modèle Plan services · CLAUDE.md). */
.fsoc thead tr.fsoc-bandrow th { border-bottom: 0; padding-bottom: 4px; }
.fsoc thead th.fsoc-band {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px;
}
.fsoc thead th.fsoc-band--real { background: var(--color-accent-tint-strong); color: var(--color-on-tint); border-radius: 6px 0 0 6px; }
.fsoc thead th.fsoc-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }

/* Total et % ne se chevauchent plus : largeurs explicites, chiffres tabulaires. */
.fsoc .fsoc-total { width: 92px; min-width: 92px; }
.fsoc .fsoc-pct { width: 74px; min-width: 74px; padding-left: 8px; }
.fsoc .fsoc-num, .fsoc .fsoc-total { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Deuxième niveau : « Cotisations de base » se déplie sur ses charges. */
.fsoc tr.fsoc-sub { cursor: pointer; }
.fsoc tr.fsoc-sub:hover .fsoc-chev { opacity: 1; }
.fsoc tr.fsoc-detail2 .fsoc-lbl { color: var(--color-text-muted); }

/* Alignement STRICT des libellés : la cellule est un flex, la gouttière (chevron
   ou vide) est un bloc de 16 px, le texte occupe le reste — une ligne qui passe
   à la ligne reste donc alignée sur la première (retour Olivier 2026-08-17). */
.fsoc td.fsoc-lbl { display: flex; align-items: baseline; gap: 0; }
.fsoc td.fsoc-lbl > .fsoc-gut,
.fsoc td.fsoc-lbl > .fsoc-chev { flex: 0 0 16px; }

/* Une ligne au libellé atténué porte des VALEURS atténuées : le gris dit le
   niveau de détail, il doit valoir pour toute la ligne (retour Olivier
   2026-08-17). */
.fsoc tr.fsoc-detail2 > td,
.fsoc tr.fsoc-bilan-ref > td { color: var(--color-text-muted); }
.fsoc tr.fsoc-detail2 > td.fsoc-total,
.fsoc tr.fsoc-bilan-ref > td.fsoc-total { color: var(--color-text-muted); font-weight: 400; }

/* Trajectoire des effectifs — même grammaire que les autres tables du module :
   filets internes, en-tête en petites capitales, cellule éditable en bleu SANS
   cadre (charte : on n'encadre jamais une valeur éditable). */
/* La card est portée par CardShell (2026-09-01) ; .trj ne garde que le nom. */
/* Indexation : UNE cellule éditable, en %, valable pour tous les départements. */
.trj__index {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.trj__index input {
  width: 62px; font: inherit; font-size: 13px; font-weight: 600; text-align: right;
  letter-spacing: 0; text-transform: none;
  color: var(--color-field-focus); background: transparent;
  border: 0; border-bottom: 1px solid transparent; padding: 2px 3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.trj__index input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }
.trj__index span { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0; }

.trj__scroll { overflow-x: auto; }
.trj__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trj__table--fixed { table-layout: fixed; font-size: 12.5px; }
.trj__table--fixed th, .trj__table--fixed td {
  padding-left: 8px; padding-right: 8px;
  overflow: hidden; text-overflow: ellipsis;
}
.trj__table--fixed .trj__lbl { white-space: normal; }
.trj__table--fixed .trj__cell input { width: 100%; text-align: right; }
.trj__table--fixed .trj__ref-input { width: 100%; }
.trj__table th, .trj__table td {
  /* Rangées serrées (2026-09-01) : la carte tenait trop de hauteur. */
  padding: 5px 12px; border-bottom: 1px solid var(--color-border-inner);
  text-align: right; white-space: nowrap; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.trj__lbl { text-align: left !important; font-weight: 600; color: var(--color-text); }
.trj__y {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.trj__y small {
  display: block; margin-top: 2px; font-size: 9px; font-weight: 500; letter-spacing: .04em;
}
.trj__y--contract { color: var(--color-accent); }
.trj__y--strat { color: var(--color-amber); }
/* Années sous contrat : elles se LISENT. Le fond ardoise clair dit « pas ici ». */
.trj__cell--contract { background: var(--color-accent-tint); color: var(--color-text-muted); }
.trj__cell input {
  width: 66px; font: inherit; font-size: 13px; font-weight: 600; text-align: right;
  color: var(--color-field-focus); background: transparent;
  border: 0; border-bottom: 1px solid transparent; padding: 2px 3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.trj__cell input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }
.trj__cell input:disabled { color: var(--color-border); cursor: not-allowed; }
.trj__gen { display: block; font-size: 10.5px; font-weight: 500; margin-top: 2px; }
.trj__gen.is-up { color: var(--color-sage); }
.trj__gen.is-dn { color: var(--color-terracotta); }
.trj__cell--ref { color: var(--color-text-muted); }
.trj__cell--total { font-weight: 700; color: var(--color-accent); }
.trj__table tfoot td { border-top: 1px solid var(--color-border); border-bottom: 0; }

/* ── Le bloc « argent » du pied : quatre lignes, dans l'ordre où le coût se
   construit. Les années extrapolées se DISENT — italique, pas une couleur :
   ce n'est pas une alerte, c'est une nature de chiffre. */
.trj__gap td { padding: 4px 0 !important; border: 0 !important; }
.trj__money td { border-bottom: 1px solid var(--color-border-inner); }
.trj__money .trj__lbl { font-weight: 500; color: var(--color-text-muted); }
.trj__money .trj__lbl small {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--color-text-muted); opacity: .8;
}
.trj__cell--est { font-style: italic; }
.trj__money--total td {
  border-top: 1px solid var(--color-border); border-bottom: 0;
  font-weight: 700; color: var(--color-navy); padding-top: 10px;
}
.trj__money--total .trj__lbl { color: var(--color-navy); font-weight: 700; }

/* ── Refonte proto 2026-09-01 : PLUSIEURS cards, pas une enveloppe ───────── */
.trj { display: flex; flex-direction: column; gap: 14px; }
.trj__pagehead { display: flex; justify-content: space-between; align-items: baseline; }
.trj__pagetitle { font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 19px; color: var(--color-navy); }
.trj__pagetitle small { font-family: "Inter", system-ui, sans-serif; font-size: 12px; color: var(--color-text-muted); }
.trj__pagesub { font-size: 12px; color: var(--color-text-muted); }
.trj__card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.trj__card--table { overflow: hidden; }
.trj__tablehead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--color-border);
}

/* Hypothèses générales : l'indexation par année, le taux CS constaté. */
.trj__hypo {
  display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start;
  padding: 14px 22px;
}
.trj__hypo-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 8px;
}
.trj__hypo-years { display: flex; gap: 14px; }
.trj__hypo-years label { display: flex; flex-direction: column; font-size: 11px; color: var(--color-text-muted); position: relative; }
.trj__hypo-years input {
  width: 52px; border: none; border-bottom: 1px solid transparent; background: none;
  font-family: inherit; font-size: 13px; color: var(--color-field-focus); padding: 1px 12px 1px 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  /* Pas de flèches d'ascenseur : la saisie reste nue, comme la charte le veut. */
  appearance: textfield; -moz-appearance: textfield;
}
.trj__hypo-years input::-webkit-outer-spin-button,
.trj__hypo-years input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trj__hypo-years input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }
.trj__hypo-years em { position: absolute; right: 6px; bottom: 2px; font-style: normal; font-size: 11px; color: var(--color-text-muted); }
.trj__hypo-cs { padding-top: 2px; }
.trj__hypo-cs b { font-size: 14px; color: var(--color-navy); margin-right: 8px; }
.trj__hypo-cs span { font-size: 11px; color: var(--color-text-muted); }

/* Table : deux colonnes par année (EPT · Masse), filet ardoise pour le réel,
   ardoise clair pour le stratégique ; colonne Évolution surlignée. */
.trj__sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); text-align: right; padding: 2px 10px 6px;
}
.trj__sub--contract { border-left: 2px solid var(--color-accent); }
.trj__sub--strat { border-left: 2px solid var(--color-accent-soft); }
.trj__sub--evol, .trj__y--evol, .trj__cell--evol { background: var(--color-accent-tint); }
.trj__cell--first.trj__cell--contract, tbody .trj__cell--first, tfoot .trj__cell--first { border-left: 2px solid var(--color-accent); }
.trj__y--strat + th, .trj__cell--est.trj__cell--first { border-left-color: var(--color-accent-soft); }
.trj__cell--money { color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.trj__cell--est { font-style: italic; }
.trj__cell--total { font-weight: 600; color: var(--color-navy); background: var(--color-accent-tint-strong); }
.trj__cell.is-up, .trj__evolband.is-up b { color: var(--color-sage); }
.trj__cell.is-dn, .trj__evolband.is-dn b { color: var(--color-terracotta); }

/* Trio du bas : synthèse employeur, courbe, répartition. */
.trj__trio {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-gap: 14px; gap: 14px;
}
.trj__panel {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 10px 14px;
}
.trj__mini { width: 100%; border-collapse: collapse; font-size: 11.5px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.trj__mini th { text-align: right; font-weight: 500; color: var(--color-text-muted); padding: 2px 0 4px 8px; }
.trj__mini th:first-child { text-align: left; padding-left: 0; }
.trj__mini td { text-align: right; padding: 3px 0 3px 8px; border-top: 1px solid var(--color-border-inner); }
.trj__mini td:first-child { text-align: left; padding-left: 0; color: var(--color-text-muted); }
.trj__mini tr.is-est td { font-style: italic; }
.trj__mini-strong { font-weight: 600; color: var(--color-navy); }
.trj__evolband {
  margin-top: 10px; padding: 6px 10px; border-radius: 6px;
  background: var(--color-accent-tint);
  display: flex; justify-content: space-between; align-items: baseline; font-size: 12px;
}
.trj__chart { width: 100%; display: block; }
.trj__bars { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; }
.trj__bar-head { display: flex; justify-content: space-between; margin-bottom: 2px; }
.trj__bar-head span:last-child { color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.trj__bar-track { height: 6px; background: var(--color-accent-tint); border-radius: 3px; }
.trj__bar-fill { height: 6px; background: var(--color-accent); border-radius: 3px; }

@media (max-width: 1100px) { .trj__trio { grid-template-columns: 1fr; } }

/* Les cellules EPT « à poser » perdent aussi leurs flèches d'ascenseur. */
.trj__cell input { appearance: textfield; -moz-appearance: textfield; }
.trj__cell input::-webkit-outer-spin-button,
.trj__cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Salaire de référence manuel : saisie bleue nue, alignée à droite. */
.trj__ref-input {
  width: 90px; border: none; border-bottom: 1px solid transparent; background: none;
  font-family: inherit; font-size: 12.5px; text-align: right;
  color: var(--color-field-focus); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.trj__ref-input::-webkit-outer-spin-button,
.trj__ref-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trj__ref-input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }
.trj__ref-input::placeholder { color: var(--color-terracotta); opacity: .8; }

/* Evolution pluriannuelle (People → Planification du personnel). Tokens charte
   uniquement. Mise en page : tableau synthétique à gauche, graphique à droite. */
.pev {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
/* Espace partagé 50/50 ; les deux cards alignées en hauteur. */
.pev__table { flex: 1 1 50%; min-width: 0; }
.pev__chart {
  flex: 1 1 50%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}
/* Annule la marge d'empilement .scs + .scs (cards côte à côte ici) : sinon la
   2e card descend de 16px et les en-têtes ne s'alignent plus. */
.pev .scs + .scs { margin-top: 0; }

/* Le tableau réutilise les styles .scs ; colonnes resserrées pour tenir sans
   scroll horizontal (au moins en kCHF). */
.pev__table .scs__lbl { min-width: 150px; }
.pev__table .scs__mh,
.pev__table .scs__cell { min-width: 56px; }
/* Un peu d'air vertical : la grille 7 colonnes paraissait serrée. */
.pev__table .scs__table th,
.pev__table .scs__table td { padding-top: 6px; padding-bottom: 6px; }

/* Colonne de l'année courante (N) — surlignage charte. */
.pev__yh--cur,
.pev__cell--cur {
  background: #F1F5F6;
  background: var(--color-accent-tint, #F1F5F6);
}
.pev__yh--cur { color: #2B203E; color: var(--color-navy, #2B203E); }

/* Étiquette « est. » sur les années estimées (taux de N repris). */
.pev__est {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B8862A;
  color: var(--color-amber, #B8862A);
}

/* Séparateur avant le bloc EPT / effectif. */
.pev__row--sep td { border-top: 1px solid #E7E5E4; border-top: 1px solid var(--color-border, #E7E5E4); }

.pev__chart-body {
  padding: 10px 8px 8px;
  flex: 1 1;            /* occupe la hauteur de la card étirée */
  min-height: 320px;  /* garde le graphique lisible si la card est courte */
}

/* Infobulle du graphique. */
.pev-tip {
  background: #FFFFFF;
  background: var(--color-card, #FFFFFF);
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  box-shadow: 0 4px 14px rgba(43, 32, 62, 0.10);
}
.pev-tip__year { font-weight: 700; color: #2B203E; color: var(--color-navy, #2B203E); margin-bottom: 4px; }
.pev-tip__row { display: flex; align-items: center; color: #1A1219; color: var(--color-text, #1A1219); }
.pev-tip__sw { width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.pev-tip__sw--cost { background: #2B203E; }
.pev-tip__sw--fte { background: #B8862A; }

@media (max-width: 1080px) {
  .pev { flex-direction: column; }
  .pev__table,
  .pev__chart { flex: 1 1 auto; width: 100%; }
}

/* Bandeau lecture seule — tokens de charte uniquement. Ardoise, pas terracotta :
   l'absence de droit d'écriture est un état normal, pas une alerte. */
.ro-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--color-accent-tint);
  color: var(--color-text);
  font-size: 13px;
}
.ro-banner__tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface-card);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Plan de calcul LCR — UNE ligne de tuiles, l'équation se lit de gauche à
   droite. PAS de card autour (retouche du soir) : une card blanche qui
   contient des tuiles blanches, c'est un cadre dans un cadre — les tuiles
   posent directement sur le fond de page, et respirent. Tokens charte. */
/* Le plan est la première chose sous la barre d'onglets : il lui faut de
   l'air au-dessus, sinon les tuiles collent aux onglets et l'écran démarre
   serré (2026-08-23). */
.lcrp {
  margin: 22px 0 34px;
  overflow-x: auto;
}
.lcrp__cap {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 18px;
}
.lcrp__cap small {
  font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  text-transform: none; color: var(--color-text-muted); margin-left: 6px;
}
.lcrp__row {
  min-width: 880px;
  display: flex; align-items: stretch; gap: 12px;
}
.lcrp__op {
  flex: 0 0 auto; width: 16px; align-self: center; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--color-text-muted);
}
.lcrp__op--plus { color: var(--color-sage); }
.lcrp__op--div  { font-size: 17px; }

/* Une tuile = une étape. Cliquable : elle réduit le tableau à ses colonnes. */
.lcrp-tile {
  position: relative;
  flex: 1 1; min-width: 0;
  display: block; text-align: left; font: inherit; cursor: pointer;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 14px 16px 28px;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
/* Affordance : un MOT, pas un glyphe. Le chevron seul, même visible au repos,
   ne disait pas ce qu'il ouvrait — « Voir le détail » ne laisse aucun doute,
   et le chevron pivote vers le bas quand le détail est affiché. */
.lcrp-go {
  position: absolute; left: 16px; bottom: 7px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--color-accent);
  transition: gap .14s;
}
.lcrp-go i { font-style: normal; font-size: 13px; line-height: 1; transition: transform .14s; }
.lcrp-tile:hover .lcrp-go { gap: 6px; }
.lcrp-tile.is-active .lcrp-go i,
.lcrp-res.is-active .lcrp-go i { transform: rotate(90deg); }
.lcrp-tile:hover {
  border-color: var(--color-accent-soft); background: var(--color-accent-tint);
  transform: translateY(-1px); box-shadow: 0 3px 8px rgba(26, 18, 25, .08);
}
.lcrp-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lcrp-tile.is-active {
  border-color: var(--color-accent); background: var(--color-accent-tint);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.lcrp-tile--res { border-color: var(--color-accent-soft); background: var(--color-accent-tint); }
.lcrp-tile__k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcrp-tile__v {
  display: block; font-size: 17px; font-weight: 600; color: var(--color-navy);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lcrp-tile__v small { font-size: 10.5px; font-weight: 500; color: var(--color-text-muted); margin-left: 3px; }

/* Le résultat — même gabarit que les tuiles, poids visuel de la conclusion. */
.lcrp-res {
  position: relative;
  flex: 1.1 1; min-width: 0;
  display: block; text-align: left; font: inherit; cursor: pointer;
  border: 0; border-radius: var(--radius-card); padding: 14px 16px 28px;
  background: var(--color-accent); color: #fff;
  transition: box-shadow .14s, transform .14s;
}
.lcrp-res .lcrp-go { color: rgba(255, 255, 255, .82); }
.lcrp-res:hover { box-shadow: 0 0 0 2px var(--color-accent-soft); transform: translateY(-1px); }
.lcrp-res:hover .lcrp-go { gap: 6px; color: #fff; }
.lcrp-res:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.lcrp-res.is-active { box-shadow: 0 0 0 2px var(--color-navy); }
.lcrp-res__k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .8; margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcrp-res__v {
  display: block; font-size: 17px; font-weight: 700; line-height: 1.15;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lcrp-res__v small { font-size: 10.5px; font-weight: 500; opacity: .8; margin-left: 4px; }

/* Récit du coût horaire — ce qui lui est PROPRE. Le cadre, les chapitres, les
   chiffres-clés et le rail viennent de `PeopleStory.css` : deux récits, une
   seule grammaire. Ici, seulement les barres de méthode et la table finale. */

/* Barre de méthode : libellé, jauge, valeur. La jauge n'est pas décorative —
   elle donne l'ordre de grandeur d'une déduction d'un coup d'œil. */
/* Plafonds relevés le 2026-08-22 : à 940 px, les barres s'arrêtaient au tiers
   d'un écran large alors que la lecture d'une cascade gagne à s'étaler — plus
   la piste est longue, plus une déduction de 3 % reste visible. */
.ccs-bars { margin-top: clamp(12px, 2.2vh, 40px); max-width: clamp(520px, 60cqw, 900px); }

/* Tableau du calendrier — jours, heures, écart à l'exercice précédent.
   Remplace les barres : une longueur ne dit rien quand la question est
   « combien d'heures », et les deux colonnes révèlent que les jours rattrapés
   retirent des jours sans retirer une heure. */
.ccs-caltbl { margin-top: clamp(12px, 2.2vh, 40px); overflow-x: auto; }
.ccs-cal {
  border-collapse: collapse; width: 100%; max-width: clamp(520px, 62cqw, 860px);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; font-size: 12px; font-size: clamp(12px, 1.1cqw, 15px);
}
.ccs-cal th {
  font-size: .8em; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-muted);
  text-align: right; padding: 0 0 8px; white-space: nowrap;
}
.ccs-cal th:first-child { text-align: left; }
.ccs-cal th + th, .ccs-cal td + td { padding-left: 1.8em; }
.ccs-cal td {
  padding: .38em 0; text-align: right;
  border-top: 1px solid var(--color-border-inner); color: var(--color-text);
}
.ccs-cal td:first-child { text-align: left; padding-right: 2em; }
.ccs-cal td small {
  display: block; font-size: .8em; font-weight: 400; color: var(--color-text-muted);
}
.ccs-cal .is-cut td { color: var(--color-text-muted); }
.ccs-cal .is-nil { color: var(--color-text-muted); font-weight: 400; }
.ccs-cal .is-lvl td {
  font-weight: 700; background: var(--color-accent-tint); border-top-color: var(--color-border);
}
.ccs-cal .is-fin td {
  font-weight: 700; background: var(--color-accent-tint-strong);
  border-top: 1px solid var(--color-accent-soft);
}
.ccs-cal .is-fin td:nth-child(2), .ccs-cal .is-fin td:nth-child(3) { color: var(--color-accent); }
.ccs-cal .is-lvl td:first-child, .ccs-cal .is-fin td:first-child { border-radius: 4px 0 0 4px; padding-left: .6em; }
.ccs-cal .is-lvl td:last-child, .ccs-cal .is-fin td:last-child { border-radius: 0 4px 4px 0; padding-right: .6em; }
/* Écart : favorable = la base monte, défavorable = elle recule. */
.ccs-cal__d { font-weight: 600; white-space: nowrap; }
.ccs-cal__d.is-up { color: var(--color-sage); }
.ccs-cal__d.is-dn { color: var(--color-terracotta); }
.ccs-cal__d.is-flat { color: var(--color-text-muted); font-weight: 400; }
.ccs-cal__d b { display: block; font-size: .92em; }
.ccs-cal__d b.is-up { color: var(--color-sage); }
.ccs-cal__d b.is-dn { color: var(--color-terracotta); }

/* Volet sombre. */
.pst-slide--deep .ccs-cal td { color: #fff; border-top-color: rgba(255, 255, 255, .16); }
.pst-slide--deep .ccs-cal th,
.pst-slide--deep .ccs-cal td small,
.pst-slide--deep .ccs-cal .is-cut td,
.pst-slide--deep .ccs-cal .is-nil { color: rgba(255, 255, 255, .68); }
.pst-slide--deep .ccs-cal .is-lvl td { background: rgba(255, 255, 255, .1); }
.pst-slide--deep .ccs-cal .is-fin td { background: rgba(255, 255, 255, .16); }
.pst-slide--deep .ccs-cal .is-fin td:nth-child(2),
.pst-slide--deep .ccs-cal .is-fin td:nth-child(3) { color: #fff; }
.ccs-bar {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 4fr) 96px;
  grid-gap: 12px;
  gap: 12px; align-items: center; margin-bottom: 4px; font-size: 12.5px;
}
/* Unité du bloc de barres : discrète, calée à droite au-dessus des montants. */
.ccs-unit {
  text-align: right; font-size: .78em; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px;
}
.pst-slide--deep .ccs-unit { color: rgba(255, 255, 255, .68); }
.ccs-bar__k { color: var(--color-text); }
.ccs-bar__k small { display: block; font-size: 11px; color: var(--color-text-muted); }
.ccs-bar__t {
  height: 14px; border-radius: 4px; background: var(--color-border-inner);
  position: relative; overflow: hidden;
}
.ccs-bar__f {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--color-accent); border-radius: 4px;
}
.ccs-bar__f--soft { background: var(--color-accent-soft); }
/* Ligne de déduction : pas de piste, seul le segment retiré se voit. */
.ccs-bar__t--cut { background: transparent; }
.ccs-bar__f--amber { background: var(--color-amber); }
.ccs-bar__v { text-align: right; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ccs-bar--total {
  border-top: 1px solid var(--color-border); padding-top: 7px; margin-top: 9px; font-weight: 700;
}
.ccs-bar--total .ccs-bar__v { color: var(--color-accent); }
/* Cellule à saisir : texte bleu SANS cadre (charte) — soulignement au focus. */
.ccs-bar__v input {
  width: 96px; font: inherit; font-size: 13px; font-weight: 700; text-align: right;
  color: var(--color-field-focus); background: transparent;
  border: 0; border-bottom: 1px solid transparent; padding: 1px 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ccs-bar__v input:focus { outline: 0; border-bottom-color: var(--color-field-focus); }

/* Barres empilées : le CCR se lit comme une somme, pas comme un total opaque. */
.ccs-stacks { margin-top: clamp(12px, 2.2vh, 40px); max-width: clamp(560px, 86cqw, 1340px); }
.ccs-stack {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 5fr) 96px;
  grid-gap: 12px;
  gap: 12px; align-items: center; margin-bottom: 6px; font-size: 13px;
}
.ccs-stack__b { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--color-border-inner); }
.ccs-stack__b i {
  display: grid; place-items: center; font-style: normal;
  font-size: 10.5px; font-weight: 700; color: #fff; overflow: hidden;
}
.ccs-stack__b .s1 { background: var(--color-accent); }
.ccs-stack__b .s2 { background: var(--color-accent-soft); color: var(--color-navy); }
.ccs-stack__b .s3 { background: var(--color-amber); }
.ccs-stack__v { text-align: right; font-weight: 700; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ccs-stack--avg {
  font-style: italic; border-bottom: 1px solid var(--color-border);
  padding-bottom: 7px; margin-bottom: 9px;
}
.ccs-lgd { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--color-text-muted); }
.ccs-lgd span { display: flex; align-items: center; gap: 6px; }
.ccs-lgd i { width: 12px; height: 12px; border-radius: 3px; }
.ccs-lgd .s1 { background: var(--color-accent); }
.ccs-lgd .s2 { background: var(--color-accent-soft); }
.ccs-lgd .s3 { background: var(--color-amber); }

/* Table finale — quelques lignes des deux bouts, pas la table complète. */
.ccs-pp { width: 100%; max-width: clamp(560px, 88cqw, 1380px); border-collapse: collapse; margin-top: 20px; font-size: 13px; }
.ccs-pp th, .ccs-pp td {
  padding: 6px 10px; border-bottom: 1px solid var(--color-border-inner);
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.ccs-pp th { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.ccs-pp td:first-child, .ccs-pp th:first-child { text-align: left; font-weight: 600; }
.ccs-pp td:nth-child(2), .ccs-pp th:nth-child(2) { text-align: left; font-weight: 400; color: var(--color-text-muted); }
.ccs-pp__ccr { color: var(--color-accent); font-weight: 700; }
.ccs-pp__gap { text-align: center !important; color: var(--color-text-muted); font-weight: 400 !important; }

/* Porte de sortie vers l'écran de saisie — un chapitre montre la méthode, il
   ne la modifie pas (sauf la base de charges indirectes, qui ne se déduit de
   rien). */
.ccs-src { margin-top: clamp(16px, 3vh, 38px); display: flex; flex-wrap: wrap; gap: 10px; }
.ccs-go {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--color-accent); background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-soft); border-radius: 9px; padding: 6px 12px;
}
.ccs-go:hover { background: var(--color-accent-tint-strong); }
.ccs-go small { font-weight: 400; color: var(--color-text-muted); }

/* ── Volet sombre : surcharges APRÈS les règles générales — à spécificité
   égale, c'est l'ordre qui tranche. Sans ça, une jauge ardoise sur fond
   ardoise et une table sombre sur sombre. ─────────────────────────────────── */
.pst-slide--deep .ccs-bar__k { color: #fff; }
.pst-slide--deep .ccs-bar__k small { color: rgba(255, 255, 255, .68); }
.pst-slide--deep .ccs-bar__t { background: rgba(255, 255, 255, .14); }
.pst-slide--deep .ccs-bar__t--cut { background: transparent; }
.pst-slide--deep .ccs-bar__f { background: #fff; }
.pst-slide--deep .ccs-bar__f--soft { background: rgba(255, 255, 255, .5); }
.pst-slide--deep .ccs-bar__v { color: #fff; }
.pst-slide--deep .ccs-bar--total { border-top-color: rgba(255, 255, 255, .35); }
.pst-slide--deep .ccs-bar--total .ccs-bar__v { color: #fff; }
.pst-slide--deep .ccs-pp th { color: rgba(255, 255, 255, .68); }
.pst-slide--deep .ccs-pp td { color: #fff; border-bottom-color: rgba(255, 255, 255, .16); }
.pst-slide--deep .ccs-pp td:nth-child(2) { color: rgba(255, 255, 255, .7); }
.pst-slide--deep .ccs-pp__ccr { color: #fff; }
.pst-slide--deep .ccs-pp__gap { color: rgba(255, 255, 255, .55) !important; }
.pst-slide--deep .ccs-go {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff;
}
.pst-slide--deep .ccs-go:hover { background: rgba(255, 255, 255, .2); }
.pst-slide--deep .ccs-go small { color: rgba(255, 255, 255, .7); }


/* Cascade de capacité — charte Palestre.

   Remise à la charte le 2026-08-30. La table peignait ses colonnes : vert
   d'eau sur le réel, beige sur l'extrapolé, filets bleu-gris — trois familles
   de couleur qui n'existent pas dans la charte, et un vert qui disait
   « favorable » d'une colonne qui ne juge rien. Une colonne se distingue
   désormais par son FILET (ardoise pour le réel, ardoise claire pour le
   prévisionnel) ; le surlignage reste aux LIGNES, en famille ardoise, la seule
   autorisée à surligner une table. */
/* Largeur CONTENUE (2026-09-01) : la card épouse sa table au lieu de tirer
   un blanc jusqu'au bord droit. */
.cao { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; max-width: 1120px; }

.cao-kpis { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }
.cao-kpi { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); 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: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; width: fit-content; min-width: 100%; }
.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: var(--color-accent-soft); color: var(--color-navy); }
.cao-seg--bill { background: var(--color-sage); color: #fff; }
.cao-seg--nf { background: var(--color-amber); }
.cao-seg--abs { background: color-mix(in srgb, var(--color-amber) 65%, #fff); color: var(--color-navy); }
.cao-seg--idle { background: color-mix(in srgb, var(--color-terracotta) 55%, #fff); color: var(--color-navy); }

.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: var(--color-surface-card); 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); }
/* Une colonne se reconnaît à son FILET, pas à un aplat : le RÉEL porte
   l'ardoise pleine, le PRÉVISIONNEL l'ardoise claire — la convention de toute
   l'application. Aucune teinte de colonne, sinon elle se bat avec le
   surlignage des lignes de sous-total. */
.cao-table .rc-first { border-left: 2px solid var(--color-accent); }
.cao-table .proj-first { border-left: 2px solid var(--color-accent-soft); }
.cao-table .std-first { border-left: 2px solid var(--color-accent-soft); }
.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.tot td { background: var(--color-accent-tint-strong); font-weight: 600; color: var(--color-navy); }
.cao-table tbody tr.idle-row td { font-weight: 600; color: var(--color-navy); }
.cao-table tbody tr:hover td { background: var(--color-surface-rail); }

.cao-note { padding: 10px 16px; font-size: 11px; color: var(--color-text-muted); }

/* 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-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; }
/* Le chevron reste VISIBLE au repos (2026-08-27) : ici il n'annonce pas un
   groupe, il dit qu'une ligne s'ouvre — on ne devine pas ce qu'on ne voit pas.
   Toute la cellule est la cible ; le chevron n'en est que la marque. */
.rc-drill-toggle {
  display: inline-block; color: var(--color-text-muted);
  font-size: 11px; width: 16px; margin-right: 4px; vertical-align: middle;
  opacity: .5; transition: opacity .12s ease, color .12s ease;
}
.rc-table tbody tr:hover .rc-drill-toggle,
.rc-drill-toggle.is-open { opacity: 1; color: var(--color-accent); }
.rc-res--click { cursor: pointer; }
.rc-table tbody tr:hover .rc-res--click .rc-res-name { color: var(--color-accent); }
.rc-res--click:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.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é.
   PAS de `min-width: 100%` (2026-08-27) : quand une famille de colonnes est
   repliée, la table devient plus étroite que la card et l'espace restant
   partait entièrement dans la colonne Collaborateur, qui s'étirait sur la
   moitié de l'écran. La table garde donc sa largeur naturelle. */
.rc-grid { width: max-content; 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; }
/* En-têtes en BLANC (demande 2026-08-27) : tout le fond de la card est blanc. */
.rc-grid thead th { background: var(--color-surface-card); 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 }`. */
/* En-tête de service : DEUX lignes au plus (2026-08-27), le nom entier restant
   dans l'infobulle. La coupure vit sur un SPAN interne : posée sur le `th`,
   elle le sortait du flux de tableau et empilait les colonnes. */
.rc-grid th.rc-th-prod {
  width: 58px; min-width: 58px; max-width: 58px;
  white-space: normal; line-height: 1.15; vertical-align: bottom;
}
.rc-th-prod__lbl {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* DEUX colonnes figées (2026-08-27) : Collaborateur et Groupe. L'en-tête de
   famille couvre les deux ; si le corps n'en gelait qu'une, le libellé du
   groupe glissait sous le nom au défilement. Le filet de bord vit donc sur la
   SECONDE, la dernière figée. */
.rc-sticky { position: sticky; left: 0; z-index: 2; background: var(--color-surface-card);
  text-align: left !important; min-width: 150px; }
/* Cellule de tête de la rangée de FAMILLES : elle couvre les deux colonnes
   figées, elle ne peut donc pas porter la largeur de la première (2026-08-27,
   c'est ce qui décalait le bandeau au défilement). */
.rc-grid .rc-gh-sticky {
  position: sticky; left: 0; z-index: 3;
  background: var(--color-surface-card);
  box-shadow: 1px 0 0 var(--color-border);
}
.rc-grid .rc-sticky2 { position: sticky; left: 180px; z-index: 2;
  background: var(--color-surface-card); box-shadow: 1px 0 0 var(--color-border); }
.rc-grid thead .rc-sticky2 { z-index: 3; }
.rc-grid thead tr.rc-grouphead .rc-sticky { box-shadow: 1px 0 0 var(--color-border); }
.rc-grid .rc-foot .rc-sticky, .rc-grid .rc-foot .rc-sticky2 { background: var(--color-accent-tint-strong); }
.rc-grid thead .rc-sticky { z-index: 3; background: var(--color-surface-card); }
.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; }
/* En-tête BLANC (2026-08-27), comme la grille d'Affectation Temps : le crème
   `--color-surface-th` grisait la ligne sous une card blanche. */
.rc-param thead th { background: var(--color-surface-card); 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); }
/* Valeur ÉDITABLE dans la table (charte) : bleu de saisie, sans cadre. Le
   cadre du sélecteur de mode faisait une boîte grise au milieu du blanc. */
.rc-param-sel {
  border: none; background: transparent; font: inherit;
  color: var(--color-field-focus); cursor: pointer; padding: 2px 0;
}
.rc-param-sel:focus { outline: none; }
.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); }
/* Costume STANDARD des filtres — mêmes valeurs que .pfb-select
   (components/PersonFilterBar.css), le format de référence des barres de
   filtre : filet fin, rayon standard, fond blanc. */
.rc-select { border: 0.5px solid var(--color-border); background: #fff;
  color: var(--color-text); border-radius: var(--radius-sm); padding: 4px 8px;
  font-family: inherit; font-size: 13px; cursor: pointer; }
.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: var(--radius-card); 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: "Schibsted Grotesk", Inter, system-ui, sans-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; }
/* Colonnes de tête resserrées (2026-08-27) : elles mangeaient la largeur
   avant même que la saisie par service commence. */
.rc-sticky { min-width: 128px; }
.rc-grid .rc-sticky { width: 180px; min-width: 180px; }
.rc-grid .rc-th-grp, .rc-grid .rc-grp { width: 110px; min-width: 110px;
  overflow: hidden; text-overflow: ellipsis; }
.rc-grid .rc-num, .rc-grid .rc-th-num { min-width: 66px; }
.rc-th-prod { min-width: 58px; }
/* Cellule de saisie : compacte, le champ occupe la colonne. */
.rc-grid td.rc-cell { padding: 4px 5px; width: 58px; }
.rc-grid .rc-in { width: 100%; min-width: 38px; }
.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; }



/* En-tête sur deux lignes (libellé long) : bat le `white-space: nowrap`
   de `.rc-grid th`. */
.rc-grid th.rc-th-wrap { white-space: normal; line-height: 1.2; vertical-align: bottom; }

/* ── Allocation du temps : familles de colonnes (2026-08-27) ──────────────
   Trois familles au-dessus des colonnes : les TAUX et les HEURES de la
   personne (ce qu'on lit), puis les heures affectées aux services (ce qu'on
   saisit). Chaque libellé est CENTRÉ sur ses colonnes, sinon il flotte au
   milieu de nulle part ; un filet encadre chaque famille, et un filet FORT
   marque la frontière entre lecture et saisie. */
.rc-grid thead tr.rc-grouphead th {
  background: var(--color-surface-card);
  border-bottom: none;
  padding: 8px 10px 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}
/* BANDEAU pleine largeur de la famille, comme les années de la frise : on
   repère d'un coup d'œil quelles colonnes vont ensemble. Ce qu'on LIT prend
   l'ardoise claire, ce qu'on SAISIT l'ardoise pleine — mêmes valeurs que le
   bandeau réel / prévisionnel de la charte. */
.rc-gh__in {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 3px 10px; border-radius: 6px;
  background: var(--color-accent-tint-strong); color: var(--color-on-tint);
}
/* La famille de SAISIE couvre beaucoup de colonnes : son libellé se cale à
   gauche, avec une marge, plutôt que de flotter au centre d'un long bandeau. */
.rc-gh--entry { text-align: left; }
.rc-gh--entry .rc-gh__in {
  background: var(--color-accent); color: #fff;
  justify-content: flex-start; padding-left: 14px;
}
.rc-gh--click { cursor: pointer; }
.rc-gh--click:hover .rc-gh__in { background: var(--color-accent-soft); }
.rc-gh--click:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Le + / − se voit au repos : c'est lui qui dit que la famille se replie. */
.rc-gh__tog {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: 0 0 auto;
  border-radius: 4px; border: 1px solid currentColor;
  font-size: 12px; font-weight: 700; line-height: 1;
  opacity: .75;
}
.rc-gh--click:hover .rc-gh__tog { opacity: 1; background: color-mix(in srgb, #fff 45%, transparent); }
/* Colonne d'une famille repliée : elle garde sa place, vide. */
.rc-td-folded { color: var(--color-text-muted); }
/* Taux masqués : la moyenne se lit dans le libellé de la ligne. */
.rc-foot-avg { color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Filets : simple entre deux familles, FORT entre ce qu'on lit et ce qu'on saisit. */
.rc-grid th.rc-sep-left, .rc-grid td.rc-sep-left { border-left: 1px solid var(--color-border-inner); }
.rc-grid th.rc-sep-strong, .rc-grid td.rc-sep-strong { border-left: 2px solid var(--color-accent-soft); }

/* Mapping comptes P&L et Bilan */

.mx-count        { font-size: 12px; color: var(--color-text-muted); align-self: center; }
.mx-count--warn  { color: var(--amber-dark); font-weight: 600; }

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

/* ── Rows plus compacts ────────────────────────────────────────────────────── */
.mx-list th { padding: 6px 12px; }
.mx-list td { padding: 3px 12px; }

.mx-col-num  { width: 110px; }
.mx-col-line { width: 300px; }

/* ── Reporting line : select sans encadrement ──────────────────────────────── */
.mx-line-select {
  font-family: inherit;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  padding: 2px 2px;
  width: 100%;
  appearance: auto;
}
.mx-line-select:hover  { color: var(--color-navy); }
.mx-line-select:focus  { outline: 1px solid var(--color-border); border-radius: 3px; }
.mx-line-select option, .mx-line-select optgroup { background: var(--color-card); }

/* ── États lignes ──────────────────────────────────────────────────────────── */
.page-table tbody tr.mx-row-unmapped td { background: var(--amber-light); }
.mx-paintable { cursor: pointer; }
.page-table tbody tr.mx-paintable:hover td {
  background: var(--color-value-bg);
  box-shadow: inset 3px 0 0 var(--color-value);
}

/* ── Ligne ajout manuel ────────────────────────────────────────────────────── */
.mx-add-row td {
  padding: 6px 12px;
  background: #F8FAFD;
  border-top: 1px solid var(--color-border);
}

.mx-add-input {
  font-family: inherit;
  font-size: 13px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  background: var(--color-card);
  color: var(--color-text);
  width: 100%;
}
.mx-add-input--num { width: 80px; }
.mx-add-input:focus { border-color: var(--color-navy); outline: none; }

.mx-add-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.mx-add-btn:hover:not(:disabled) { background: var(--navy-light); border-color: var(--color-navy); color: var(--color-navy); }
.mx-add-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Mode édition : sélection + suppression ────────────────────────────────── */
.mx-editbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-accent-tint);
}
.mx-edit-count   { font-size: 12px; color: var(--color-text-muted); }
.mx-edit-actions { display: flex; align-items: center; gap: 8px; }

.mx-col-check       { width: 34px; text-align: center; }
.mx-col-check input { cursor: pointer; accent-color: var(--color-accent); }

.mx-selectable { cursor: pointer; }
.page-table tbody tr.mx-row-selected td {
  background: var(--color-accent-tint-strong);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.mx-del-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border: 0.5px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
  background: var(--color-terracotta);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.mx-del-btn:disabled { opacity: 0.4; cursor: default; }

.mx-chip:disabled { opacity: 0.4; cursor: default; }

/* ── Barre brush + palette ─────────────────────────────────────────────────── */
.mx-brushbar {
  border: 1px solid var(--navy-mid);
  background: var(--navy-light);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mx-brush-hint { font-size: 13px; color: var(--color-text); }

.mx-palette      { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mx-pal-group    { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mx-pal-sec {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-right: 2px;
}

.mx-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.mx-chip:hover                { border-color: var(--color-navy); }
.mx-chip.is-active            { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.mx-chip--unmap               { color: var(--terracotta-dark); }
.mx-chip--unmap.is-active     { background: var(--color-terracotta); border-color: var(--color-terracotta); color: #fff; }

/* Éditeur de structure générique (sections → lignes). Charte : tokens index.css. */
.fstruct-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fstruct-head {
  padding: 10px 16px;
  background: var(--color-surface-card);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}
.fstruct-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-card);
}
/* Grille plafonnée à N cartes par ligne (ex. P&L = 2), remplie ligne par ligne. */
.fstruct-body--cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.fstruct-body--cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* Colonnes fixes côte à côte (ex. Bilan : Actif | Passif). Pas de card englobante. */
.fstruct-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
/* Colonnes (chemin `columns`, exclusif à la Structure Bilan) : chaque colonne
   Actif / Passif / Autres groupes est une card charte (corps blanc arrondi +
   ombre), pour les distinguer visuellement. */
.fstruct-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 14px 16px;
}
.fstruct-col-h {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card);
  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: var(--radius-card);
  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) */

/* Bloc BFR — VUE en lecture seule récapitulant les comptes inclus (les lignes
   restent éditables dans leur section). Teinte sable distincte du bleu-gris. */
.fstruct-sec--bfr { border-color: var(--color-border-structure); }
.fstruct-sec-h--static {
  display: block;
  padding: 8px 12px;
  background: var(--color-surface-structure);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-structure);
}
.fstruct-sec--bfr .fstruct-line { border-bottom-color: #EFE7D8; }
.fstruct-line--ro { gap: 8px; }
.fstruct-roname { flex: 1 1; min-width: 0; font-size: 13px; color: var(--color-text); padding: 2px 4px; }
.fstruct-secbadge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--stone-100);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}
.fstruct-vg-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.fstruct-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.fstruct-addbtn {
  background: var(--color-navy); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.fstruct-addbtn:disabled { opacity: 0.4; cursor: default; }

/* Action dans l'en-tête d'un bloc (ex. « Charger le standard ») — flottante à droite. */
.fstruct-sec-hwrap { position: relative; }
.fstruct-sec-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.fstruct-loadstd {
  border: 1px solid var(--color-accent); background: var(--color-surface-card);
  color: var(--color-accent); font-size: 10.5px; font-weight: 600;
  border-radius: 8px; padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.fstruct-loadstd:hover { background: var(--color-accent-tint); }

/* Pastille stock verrouillée (Achats / Variation de stock — obligatoire). */
.fstruct-stock.is-locked, .fstruct-stock:disabled { cursor: default; opacity: 0.92; }

/* Sous-total de groupe dans l'éditeur de structure : repère de lecture, non
   éditable — il dit où se coupe le bloc. */
.fstruct-line--sub {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border-top: 1px solid var(--color-border-inner);
}
.fstruct-subname {
  font-size: 12px; font-weight: 600; color: var(--color-accent);
  padding-left: 10px;
}
/* Lignes DU groupe : en retrait sous son intitulé. */
.fstruct-group .fstruct-line { padding-left: 18px; }

/* Autres paramètres — éditeur de lignes de crédit à période. */
.cl-wrap { padding: 4px 2px; }
.cl-empty { color: var(--color-text-muted); font-style: italic; padding: 12px 4px; }

.cl-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cl-table th {
  text-align: left; font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted);
  padding: 6px 8px; border-bottom: 1px solid var(--color-border);
}
.cl-table td { padding: 5px 8px; border-bottom: 1px solid var(--color-border-inner); }
.cl-table th.cl-num, .cl-table td.cl-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cl-lbl { min-width: 140px; }

.cl-input {
  width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  font: inherit; padding: 3px 6px; border-radius: 6px; color: var(--color-text);
}
.cl-input:hover { border-color: var(--color-border); }
.cl-input:focus { outline: none; border-color: var(--color-field-focus); background: var(--color-surface-card); }
.cl-amount { text-align: right; color: var(--color-field-focus); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.cl-my { display: inline-flex; gap: 4px; }
.cl-select {
  border: 1px solid var(--color-border); background: var(--color-surface-card);
  border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 0.82rem; cursor: pointer;
  color: var(--color-text);
}
.cl-select--year { width: 4.6rem; }

.cl-del button {
  border: none; background: none; color: var(--color-text-muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 2px 6px;
}
.cl-del button:hover { color: var(--color-terracotta); }

/* Récap limite cumulée. */
.cl-recap { margin-top: 18px; border-top: 1px solid var(--color-border); padding-top: 10px; }
.cl-recap-table td.cl-num, .cl-recap-table th.cl-num { color: var(--color-navy); }
.cl-recap-table .cl-lbl { color: var(--color-navy); }

/* Bouton « + Ajouter » sous le tableau (plus dans le bandeau). */
.cl-addrow { margin-top: 12px; }

/* Clôture (Finance › Paramètres) — tokens de charte uniquement. */

.closing-row { display: flex; gap: 28px; flex-wrap: wrap; }

.closing-field { display: flex; flex-direction: column; gap: 5px; }
.closing-field__lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Champ à saisir : valeur en bleu, sans cadre (charte). */
.closing-field select {
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-field-focus);
  font: inherit;
  font-size: 15px;
  padding: 2px 0;
  cursor: pointer;
}
.closing-field select:focus {
  outline: none;
  border-bottom-color: var(--color-field-focus);
}
.closing-field select:disabled { opacity: .5; cursor: default; }

.closing-empty {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Rapports — sélecteur d'arrêté d'affichage (vue Réel) : à droite du
   commutateur Réel | Prévisionnel, même famille que les boutons d'ancre. */
.fin-cut-select {
  font: inherit;
  font-size: 12px;
  color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px 6px;
  cursor: pointer;
}
.fin-cut-select:hover { border-color: var(--color-accent); }

/* Renvoi au Cockpit, dans l'entête de la Synthèse financière (2026-09-17) :
   les vues de direction (Rentabilité, Liquidité & solidité, Financement,
   Focus+) restent là-bas, la lecture des états ici. Lien discret, jamais un
   bouton d'action : il déplace le regard, il ne fait rien. */
.fin-reports__cockpit {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 3px 6px;
  border-radius: 6px;
}
.fin-reports__cockpit:hover { color: var(--color-accent); background: var(--color-accent-tint); }

/* Graphique du plan de liquidité (repris de la Simulation 12M, 2026-08-17). */
.cpc { margin: 0 0 6px; min-height: 560px; }
.cpc__chart { margin: 0 0 6px; }
.cpc__legend {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 6px 0 12px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.cpc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cpc__sw { width: 12px; height: 12px; border-radius: 2px; border: 1px solid; display: inline-block; }
.cpc__ln { width: 18px; height: 0; border-top: 2px solid var(--color-navy); display: inline-block; }
.cpc__ln--dash { border-top-style: dashed; }
.cpc__floor { color: var(--color-terracotta); display: inline-flex; align-items: center; gap: 6px; }
.cpc__ln--red { border-top-color: var(--color-terracotta); }

/* Les cinq indicateurs tiennent sur UNE ligne (2026-08-17) ; ils se resserrent
   plutôt que de passer à la ligne. */
.cpc__kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin-top: 16px; }
.cpc__kpi {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.cpc__kpi > span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.cpc__kpi > b { font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 24px; font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.cpc__kpi > em { font-style: normal; font-size: 11px; color: var(--color-text-muted); }
.cpc__kpi.is-neg > b { color: var(--color-terracotta); }

.cpc__tip {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(43,32,62,.14); font-size: 12px;
}
.cpc__tip-m { font-weight: 600; margin-bottom: 4px; }
.cpc__tip-r { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.cpc__tip-r b, .cpc__tip-t b { margin-left: auto; color: var(--color-text); font-weight: 600; }
.cpc__tip-t { display: flex; gap: 10px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border); font-weight: 600; }
.cpc__tip .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cpc__tip .sw--n1 { background: transparent; border-top: 2px dashed var(--color-navy); border-radius: 0; height: 0; width: 14px; }
/* Fenêtre de lecture : pastilles cumulables (années + 12 mois glissants). */
.cpc__win { display: flex; align-items: center; gap: 8px; padding: 2px 0 12px; }
.cpc__pill {
  font: inherit; font-size: 12.5px; padding: 3px 14px; cursor: pointer;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text-muted);
}
.cpc__pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cpc__pill.is-on { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-on-tint); font-weight: 600; }
.cpc__win-range { margin-left: 4px; font-size: 12px; color: var(--color-text-muted); }
/* Deux zones sous zéro : crédit consommé (ambre) puis dépassement (terracotta). */
.cpc__zone { display: inline-flex; align-items: center; gap: 6px; }
.cpc__zone::before { content: ''; width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.cpc__zone--used { color: var(--color-terracotta); }
.cpc__zone--used::before { background: color-mix(in srgb, var(--color-terracotta) 34%, transparent); }
.cpc__zone--over { color: var(--color-terracotta); font-weight: 600; }
.cpc__zone--over::before { background: color-mix(in srgb, var(--color-terracotta) 70%, transparent); }

/* LES TUILES AU-DESSUS DE LA CARTE (2026-09-18) : hors de la carte, elles
   prennent son costume — fond blanc, filet, même rayon — et se collent à elle
   par le bas. En pied de graphique, elles gardaient la marge du dessus. */
.fcp-kpis-host:not(:empty) { margin-bottom: 12px; }
.fcp-kpis-host .cpc__kpis {
  margin-top: 0;
  padding: 12px 14px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(26, 18, 25, .04);
}

/* Plan de liquidité (direct) — tableau de trésorerie sourcé du modèle.
   CHARTE : uniquement des tokens --color-* (aucun hex hors charte). */
.fcp-loading { padding: 1.2rem; color: var(--color-text-muted); }
.fcp-wrap { overflow-x: auto; }
/* Largeur calée sur le contenu (7 → 12 mois) : le tableau ne s'étire pas à toute
   la largeur. Colonnes de mois de largeur fixe et identique. */
.fcp {
  border-collapse: collapse; table-layout: fixed; width: auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.fcp th, .fcp td {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border-inner); white-space: nowrap;
}
.fcp thead th {
  font-weight: 600; color: var(--color-text); text-align: right;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-card);
}
.fcp thead th.fcp-lbl { text-align: left; }
/* Sous-libellés réel/prév. (homogène avec le Compte de résultat ; plan = tout prév.). */
.fcp thead tr.fcp-subhead-af th { font-size: 9px; font-weight: 600; border-bottom: none; padding-top: 0; }
.fcp thead tr.fcp-subhead-af th.fcp-af--a { color: var(--color-accent); }
.fcp thead tr.fcp-subhead-af th.fcp-af--f { color: var(--color-amber); }
.fcp .fcp-lbl { text-align: left; width: 260px; white-space: normal; }
.fcp .fcp-num { text-align: right; width: 70px; }
.fcp .fcp-total { width: 76px; background: var(--color-surface-result); font-weight: 600; }
.fcp .is-neg { color: var(--color-terracotta); }
.fcp-pos .fcp-num { color: var(--color-sage); }
.fcp-neg .fcp-num { color: var(--color-terracotta); }
.fcp-vat .fcp-lbl { color: var(--color-text-muted); }
/* Détail d'un poste : décalé sous sa ligne de regroupement, ton atténué. */
.fcp-detail .fcp-lbl { padding-left: 1.4rem; color: var(--color-text-muted); }
.fcp-detail .fcp-num { color: var(--color-text-muted); }
/* Sous-totaux intermédiaires (Total encaissements / décaissements). */
.fcp-sub td { font-weight: 600; border-top: 1px solid var(--color-border-inner); }

/* ── 3 niveaux : en-tête de niveau + sous-total de niveau bien distincts. */
.fcp-seclvl td {
  padding: 0.4rem 0.5rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent);
  background: var(--color-accent-tint); border-top: 2px solid var(--color-accent-soft);
}
.fcp-level td {
  font-weight: 700; color: var(--color-navy);
  background: var(--color-accent-soft); border-top: 1px solid var(--color-accent-soft);
}
.fcp-level.fcp-pos .fcp-num { color: var(--color-sage); }
.fcp-level.fcp-neg .fcp-num { color: var(--color-terracotta); }
/* Colonne Total des flux : même fond que la ligne (sinon écrasée par .fcp-total). */
.fcp-level .fcp-total { background: var(--color-accent-soft); }
/* Variation totale = ligne forte navy. */
.fcp-strong td { font-weight: 700; color: var(--color-navy); border-top: 2px solid var(--color-border); }

/* Soldes d'ouverture / clôture : bande navy. */
.fcp-open td, .fcp-close td { background: var(--color-navy); color: #fff; font-weight: 600; }
.fcp-open .is-neg, .fcp-close .is-neg { color: color-mix(in srgb, var(--color-terracotta) 55%, #fff); }
.fcp-open .fcp-total, .fcp-close .fcp-total { background: var(--color-navy); }

/* Contrôle. */
/* Réconciliation bilan : fond BLANC (pas de surlignage) ; en écart, la ligne
   passe en alerte terracotta (2026-08-20). */
.fcp-check td { border-top: 2px solid var(--color-border); background: var(--color-surface-card); font-size: 0.8rem; }
.fcp-check--ko td { color: var(--color-terracotta); font-weight: 600; }
/* Écart sous l'unité d'affichage : CHF exacts, petit et atténué (pas une alerte). */
.fcp-check-minor { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 400; }
.fcp-ok { color: var(--color-sage); font-weight: 600; }
.fcp-ko { color: var(--color-terracotta); font-weight: 600; }

/* ── Lignes éditables investissement / financement — surlignées en jaune
   (token charte --amber-light) pour distinguer la saisie. */
.fcp-editline td { background: var(--amber-light); }
.fcp-linehead { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
/* Boutons +/− solides (mêmes couleurs que le Cash flow). */
.fcp-type {
  width: 18px; height: 18px; border-radius: 4px; border: none;
  cursor: pointer; font-weight: 700; line-height: 1; color: #fff; font-size: 12px;
}
.fcp-type--in { background: var(--color-sage); }
.fcp-type--out { background: var(--color-terracotta); }
.fcp-line-lbl { flex: 1 1; border: none; border-bottom: 1px dashed var(--color-border); background: none; font: inherit; padding: 2px; color: var(--color-text); }
.fcp-del { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.95rem; }
/* Valeur à saisir : CHARTE cellule éditable = bleu, SANS cadre. */
.fcp-edit {
  width: 100%; border: none; background: transparent; padding: 2px 4px; text-align: right;
  font: inherit; color: var(--color-field-focus);
}
.fcp-edit::placeholder { color: var(--color-border); }
.fcp-edit:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
/* Pas de flèches ascenseur (spinners) sur les champs numériques. */
.fcp-edit::-webkit-outer-spin-button,
.fcp-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fcp-edit { appearance: textfield; }
.fcp-addrow td { padding: 0.2rem 0.5rem; }
.fcp-addbtn { border: 1px dashed var(--color-border); background: none; color: var(--color-accent); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 0.78rem; }
.fcp-addbtn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* ── Bascule Tableau / Graphique + graphique (style Plan des liquidités). */
/* Bouton « Visualiser le graphique » — au-dessus du tableau, aligné à gauche. */
.fcp-graphbar { display: flex; justify-content: flex-start; margin-bottom: 10px; }
.fcp-graphbtn {
  cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 7px; color: var(--color-accent);
  background: var(--color-accent-tint); border: 1px solid var(--color-border);
}
.fcp-graphbtn:hover { background: var(--color-accent-tint-strong); color: var(--color-navy); }
/* Interrupteurs icône (courbe / barres) : carrés, état actif en ardoise plein. */
.fcp-graphbar { gap: 6px; }
.fcp-graphbtn--ic { padding: 5px 7px; line-height: 0; }
.fcp-graphbtn--ic svg { width: 17px; height: 17px; }
.fcp-graphbtn--ic.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.fcp-graphbtn--ic.is-on:hover { color: #fff; }
/* Graphiques CONTENUS (2026-08-11) : le SVG s'étire à la largeur du bloc — sur
   grand écran, textes et légendes devenaient géants. Largeur plafonnée, calée à
   gauche : tout ce qui est dans le SVG (légendes, ligne de crédit) suit. */
.fcp-chart { padding: 0.6rem 0.4rem 0.8rem; max-width: 720px; }
.fcp-tooltip { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.fcp-tooltip__month { font-weight: 600; margin-bottom: 4px; color: var(--color-navy); }
.fcp-tooltip__row, .fcp-tooltip__total { display: flex; align-items: center; gap: 8px; }
.fcp-tooltip__row > span:nth-child(2), .fcp-tooltip__total > span:first-child { flex: 1 1; }
.fcp-tooltip__total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border-inner); font-weight: 600; color: var(--color-navy); }
.fcp-tooltip .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Légende du graphique de trésorerie (LiqProj du Cockpit). */
.fcp-chart__cap { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 0.4rem; padding: 0 0.4rem; }

/* ── Vues du plan (Plan · TVA · …) ─────────────────────────────────────────── */
.fcp-panes { display: inline-flex; gap: 4px; margin-right: auto; }
.fcp-panes button {
  font: inherit; font-size: 12.5px; padding: 3px 12px; cursor: pointer;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text-muted);
}
.fcp-panes button.is-on { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-on-tint); }
.fcp-panes button:hover:not(.is-on) { color: var(--color-accent); border-color: var(--color-accent); }

/* Bandeau de réglages de la vue (postes suivis, périodicité, délai). */
.fcp-cfg { background: var(--color-surface-page); border-radius: var(--radius-card); padding: 10px 12px; margin: 0 0 14px; }
.fcp-cfg__lbl { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); display: block; margin-bottom: 8px; }
.fcp-cfg__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fcp-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--color-accent-tint); color: var(--color-on-tint);
  border: 0.5px solid var(--color-accent-soft); border-radius: 999px; padding: 2px 4px 2px 10px;
}
.fcp-chip button { border: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; line-height: 1; padding: 0 4px; }
.fcp-cfg select { font: inherit; font-size: 12.5px; border: 0; background: transparent; color: var(--color-field-focus); cursor: pointer; }
.fcp-cfg__right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-muted); }
.fcp-memo td { color: var(--color-text-muted); }
.fcp-note { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.fcp-chip--man { background: var(--color-surface-card); border-color: var(--color-border); color: var(--color-text-muted); }
.fcp-chip__mode { font-size: 11px; opacity: .75; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
.fcp-tag { font-size: 11px; color: var(--color-text-muted); font-style: normal; margin-left: 6px; }
.fcp-src { color: var(--color-text-muted); }
.fcp-warn { color: var(--color-terracotta); margin-bottom: 6px; }
.fcp-recalc { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 12px; padding: 0 3px; }
.fcp-recalc:hover { color: var(--color-accent); }
.fcp-paycell {
  width: 100%; border: 0; background: transparent; text-align: right;
  font: inherit; color: var(--color-field-focus); padding: 0;
}
.fcp-paycell:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.fcp-num.is-edited .fcp-paycell { font-weight: 600; }

/* Charges sociales — sous-totaux en GROUPES : léger surlignage ardoise, chevron
   révélé au survol, détail en retrait (2026-08-17). */
.fcp .fcp-grp { cursor: pointer; }
.fcp .fcp-grp > td { background: var(--color-accent-tint); font-weight: 500; }
.fcp .fcp-grp .fcp-chev {
  display: inline-block; width: 14px; font-size: 10px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease, transform .15s ease;
}
.fcp .fcp-grp:hover .fcp-chev { opacity: 1; }
.fcp .fcp-grp .fcp-chev.is-open { transform: rotate(90deg); }
.fcp tr.fcp-in > td.fcp-lbl { padding-left: 22px; }

/* Section TVA annuelle : bande de régime et filet à la frontière réel/prév. */
.fcp thead tr.fcp-band th { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; border-bottom: none; }
.fcp thead tr.fcp-band th.fcp-band__r { color: var(--color-text-muted); }
.fcp thead tr.fcp-band th.fcp-band__f { color: var(--color-amber); }
.fcp .fcp-edge { border-left: 1px solid var(--color-border); }
/* Bandes de régime, même grammaire que Ventes (ardoise claire / ardoise pleine). */
.fcp thead tr.fcp-bandrow th { border-bottom: 0; padding-bottom: 4px; }
.fcp thead th.fcp-band {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px;
}
.fcp thead th.fcp-band--real { background: var(--color-accent-tint-strong); color: var(--color-on-tint); border-radius: 6px 0 0 6px; }
.fcp thead th.fcp-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }

/* Unité CHF : les montants font 6-7 chiffres — colonnes élargies pour que rien
   ne soit tronqué (retour Olivier 2026-08-17). */
.fcp.fcp--chf .fcp-lbl { width: 220px; }
.fcp.fcp--chf .fcp-num { width: 88px; }
.fcp.fcp--chf .fcp-total { width: 96px; }
.fcp.fcp--chf td, .fcp.fcp--chf th { padding-left: 4px; padding-right: 4px; }
.fcp .fcp-num, .fcp .fcp-total { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Bandeau d'information (réglages lus ailleurs) + lien vers leur écran. */
/* Information : une ligne par réglage, lien dessous, tout aligné à gauche ; de
   l'air au-dessus du tableau (retour Olivier 2026-08-17). */
.fcp-info { margin: 0 0 26px; font-size: 12px; color: var(--color-text-muted); }
.fcp-info__l { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; }
.fcp-info__l + .fcp-info__l { padding-left: 20px; }
.fcp-info__ic { font-style: normal; color: var(--color-accent); }
.fcp-info b { font-weight: 600; color: var(--color-text); }
.fcp-info__link {
  display: block; margin-top: 6px; margin-left: 20px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--color-accent); text-align: left;
}
.fcp-info__link:hover { text-decoration: underline; }
/* Hypothèses : plus d'air en tête de card. */
.fcp-hyp { margin: 6px 0 18px; }

/* ── Champ à saisir : bleu (charte) + très léger fond ambre pour être repérable
   même vide (retour Olivier 2026-08-17). Grammaire : noir = lu · bleu = calculé
   et modifiable · fond ambre = c'est un champ. ───────────────────────────────── */
.fcp-field {
  border: 0; padding: 1px 4px; border-radius: 3px;
  font: inherit; text-align: right; color: var(--color-field-focus);
  background: color-mix(in srgb, var(--color-amber) 8%, transparent);
}
.fcp-field:focus { outline: none; box-shadow: inset 0 -1px 0 var(--color-field-focus); }
.fcp-field::placeholder { color: var(--color-text-muted); }
.fcp-field--hyp { width: 120px; font-size: 15px; font-weight: 600; }

/* Bandeau d'hypothèses : libellé à gauche, valeur à droite. */
.fcp-hyp { margin: 0 0 12px; }
.fcp-hyp__row { display: flex; align-items: baseline; gap: 10px; max-width: 460px; }
.fcp-hyp__lbl { flex: 1 1; font-size: 13px; color: var(--color-text-muted); }
.fcp-hyp__lbl em { font-style: normal; font-size: 11px; margin-left: 6px; opacity: .8; }
.fcp-hyp__unit { font-size: 11px; color: var(--color-text-muted); }
/* Fenêtre du graphique : pastilles dans l'en-tête, alignées à droite. */
/* (Les pilules de fenêtre `fcp-win*` sont parties le 2026-09-18 : la fenêtre
   du graphique monte sur la ligne des commandes de la section, au costume
   `SegmentedToggle` de la charte.) */

/* 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: "Schibsted Grotesk", Inter, system-ui, sans-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); }
/* Arrangements : ligne jaune clair, une déduction manuelle de la créance
   (2026-09-12) ; le nom se lit à gauche, comme tout libellé. */
.fbs-subrow--arr td { background: color-mix(in srgb, #FEF3C7 60%, #fff); background: color-mix(in srgb, var(--amber-light, #FEF3C7) 60%, var(--color-surface-card, #fff)); }
.fbs .fbs-arrname { text-align: left; }

/* Éditeur de profil d'encaissement dans le drawer. */
.fbs-drawer__profile { display: flex; gap: 12px; margin: 4px 0 2px; }
.fbs-drawer__field--inline { display: flex; align-items: center; gap: 6px; }
.fbs-drawer__field--inline input { width: 52px; text-align: right; }

/* Roue de réglage (profil) sur une ligne à roulement — discrète, à droite du libellé. */
.fbs-gear {
  background: none; border: none; cursor: pointer; margin-left: 6px;
  color: #78716C;
  color: var(--color-text-muted, #78716C); font-size: 12px; opacity: 0;
  padding: 0 2px; line-height: 1; transition: opacity 0.12s ease;
}
.fbs tbody tr.fbs-collapsible:hover .fbs-gear { opacity: 0.6; }
.fbs-gear:hover { opacity: 1 !important; color: #3F6470; color: var(--color-accent, #3F6470); }
.fbs-detail--roll .fbs-lbl-txt { cursor: pointer; }

/* Signe +/− en largeur fixe → tous les libellés de sous-lignes alignés. */
.fbs-sub-sign { display: inline-block; width: 14px; text-align: left; }

/* Bouton + popover de réglage du profil d'encaissement (sur les lignes d'encaissement). */
.fbs-sub-prof { position: relative; display: inline-block; }
.fbs-sub-cfg {
  background: none; border: 1px solid #DED7CB; border: 1px solid var(--color-border, #DED7CB); border-radius: 4px;
  cursor: pointer; margin-left: 8px; font-size: 10px; padding: 0 5px; line-height: 1.6;
  color: #2563EB;
  color: var(--color-field-focus, #2563EB); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.fbs-sub-cfg:hover { border-color: #2563EB; border-color: var(--color-field-focus, #2563EB); }
.fbs-prof-pop {
  /* Position FIXE, calculée sur le bouton : dans le conteneur à défilement, un
     popup absolu était rogné par le cadre de la card (2026-08-17). */
  position: fixed; z-index: 60;
  background: #fff;
  background: var(--color-surface-card, #fff); border: 1px solid #DED7CB; border: 1px solid var(--color-border, #DED7CB);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(43, 32, 62, 0.14);
  padding: 8px 10px; display: flex; gap: 10px; white-space: nowrap;
}
.fbs-prof-pop label { font-size: 11px; color: #78716C; color: var(--color-text-muted, #78716C); display: flex; align-items: center; gap: 4px; }
.fbs-prof-pop input { width: 42px; text-align: right; border: 1px solid var(--color-border); border-radius: 3px; padding: 2px 4px; font: inherit; }

/* Pastilles de filtre Actif / Passif dans l'en-tête de la card. */
.fbs-side-pills { display: inline-flex; gap: 6px; }
.fbs-side-pill {
  border: 1px solid #DED7CB;
  border: 1px solid var(--color-border, #DED7CB); background: #fff; background: var(--color-surface-card, #fff);
  border-radius: 999px; padding: 3px 14px; font: inherit; font-size: 12px; cursor: pointer;
  color: #78716C;
  color: var(--color-text-muted, #78716C); transition: all 0.12s ease;
}
.fbs-side-pill:hover { border-color: #3F6470; border-color: var(--color-accent, #3F6470); color: #3F6470; color: var(--color-accent, #3F6470); }
.fbs-side-pill.is-active {
  background: #3F6470;
  background: var(--color-accent, #3F6470); color: #fff;
  border-color: #3F6470;
  border-color: var(--color-accent, #3F6470); font-weight: 600;
}

/* En-tête bilan : bouton agréger/déployer + pastilles Actif/Passif. */
.fbs-head-actions { display: flex; align-items: center; gap: 10px; }


/* ── Lignes de planification (nouvel actif / financement) éditées au bilan. */
.fbs-planline td { background: var(--amber-light); }
.fbs-plan-head { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.fbs-plan-type {
  width: 18px; height: 18px; border-radius: 4px; border: none; color: #fff;
  cursor: pointer; font-weight: 700; line-height: 1; font-size: 12px; flex: none;
}
.fbs-plan-type--in { background: var(--color-sage); }
.fbs-plan-type--out { background: var(--color-terracotta); }
.fbs-plan-lbl { flex: 1 1; min-width: 0; border: none; border-bottom: 1px dashed var(--color-border); background: none; font: inherit; padding: 2px; color: var(--color-text); }
.fbs-plan-rate { color: var(--color-text-muted); font-size: 0.78rem; white-space: nowrap; }
.fbs-plan-rate input { width: 34px; border: none; border-bottom: 1px dashed var(--color-border); background: none; text-align: right; font: inherit; color: var(--color-field-focus); }
.fbs-plan-del { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.95rem; flex: none; }
/* Valeur à saisir : bleu, sans cadre, sans spinner (charte). */
.fbs-plan-edit {
  width: 100%; box-sizing: border-box; border: none; background: transparent;
  text-align: right; font: inherit; color: var(--color-field-focus); padding: 2px 4px;
}
.fbs-plan-edit:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.fbs-plan-edit::-webkit-outer-spin-button, .fbs-plan-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fbs-plan-edit { appearance: textfield; }
.fbs-addrow td { background: transparent; padding: 0.2rem 0.6rem; }
.fbs-addbtn { border: 1px dashed var(--color-border); background: none; color: var(--color-accent); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 0.78rem; }
.fbs-addbtn:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* ── Vue figée mono-poste (2026-08-10 ; deux tuiles, proto du 2026-09-12) ──
   Source 01 la comptabilité, Source 02 les flux nouveaux : chaque tuile porte
   son hypothèse dans un bloc teinté. Arrangements multiples dans la table. */
.fbs-src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-gap: 0 14px; gap: 0 14px; margin-bottom: 14px; }
/* Sous-grille : les deux tuiles partagent leurs rangs, donc leurs filets s'alignent. */
.fbs-src {
  display: grid; grid-template-rows: subgrid; grid-row: span 2; background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05); overflow: hidden;
}
.fbs-src__top { padding-bottom: 12px; }
.fbs-src__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 0; }
.fbs-src__kicker { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.fbs-src__tag { font-size: 11px; color: var(--color-text-muted); }
.fbs-src__val { font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 19px; font-weight: 600; color: var(--color-text); padding: 6px 16px 0; }
.fbs-src__hint { font-size: 12px; color: var(--color-text-muted); padding: 2px 16px 0; }
/* Connecté ou non au module Ventes : coche sage, croix terracotta (une alerte). */
.fbs-src__link { display: flex; align-items: center; gap: 8px; }
.fbs-src__mark { font-size: 16px; font-weight: 700; line-height: 1; }
.fbs-src__link.is-on .fbs-src__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 12px; background: var(--color-sage); color: #fff;
}
.fbs-src__link.is-off .fbs-src__mark { color: var(--color-terracotta); }
.fbs-src__link.is-off { color: var(--color-terracotta); font-weight: 600; }
.fbs-src__hyp { background: var(--color-surface-card); border-top: 1px solid var(--color-border); padding: 12px 16px 14px; }
.fbs-src__hyptitle { font-size: 12.5px; font-weight: 600; color: var(--color-text); margin-bottom: 12px; }
.fbs-src__fields { display: flex; gap: 22px; flex-wrap: wrap; }
.fbs-src__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.fbs-src__field--row { flex-direction: row; align-items: baseline; gap: 12px; }
.fbs-src__in { display: inline-flex; align-items: baseline; gap: 4px; }
.fbs-src-in {
  width: 48px; border: none; border-bottom: 1px solid transparent; border-radius: 0; background: transparent;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--color-field-focus); text-align: right; padding: 2px 0;
}
.fbs-src-in:focus { outline: none; border-bottom-color: var(--color-field-focus); }
.fbs-src-in--dso { width: 40px; }
.fbs-src__unit { font-size: 13px; color: var(--color-text-muted); }
.fbs-src__ro { font-size: 15px; font-weight: 600; color: var(--color-text); }
.fbs-src__note { font-size: 11.5px; color: var(--color-text-muted); margin-top: 8px; }
.fbs-arrname { width: 170px; text-align: left; }
.fbs-arr-x {
  border: 0; background: transparent; cursor: pointer; margin-left: 4px;
  color: var(--color-text-muted); font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.fbs-subrow:hover .fbs-arr-x { opacity: 1; }
.fbs-arr-x:hover { color: var(--color-terracotta); }
.fbs-addbtn {
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--color-accent);
}
.fbs-addbtn:hover { text-decoration: underline; }

/* ── Bilan complet en lecture seule (2026-08-20) — une valeur qui BOUGE se
   met en évidence ; au survol du chiffre, l'infobulle dit la variation du
   mois et son origine (mouvement exceptionnel, driver, décompte, plug…). ── */
.fbs-num.is-var { color: var(--color-accent); font-weight: 600; }
td.fbs-tipcell { position: relative; cursor: default; }
.fbs-vartip {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  padding: 4px 10px; white-space: nowrap; text-align: left;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(43, 32, 62, .14);
  font-size: 12px; font-weight: 400; color: var(--color-text);
}
td.fbs-tipcell:hover .fbs-vartip { display: flex; gap: 7px; align-items: baseline; }
.fbs-vartip b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-navy); }

/* Purge des saisies manuelles d'une ligne (× + compte) — révélé au survol de la
   ligne seulement (charte : chevrons/actions au survol), terracotta discret. */
.fbs-purge {
  margin-left: 6px; border: 0; background: none; cursor: pointer;
  color: var(--color-terracotta); font-size: 0.72rem; font-weight: 600;
  opacity: 0; transition: opacity 0.12s;
}
.fbs-detail:hover .fbs-purge { opacity: 1; }

/* LES DEUX RANGS S'ALIGNENT (2026-09-18) : les cartes de SOURCE tiennent toute
   la largeur, la carte de la TABLE s'ajustait à ses colonnes, et leurs bords
   droits tombaient donc à deux x différents. C'est la CARTE qui s'étend, pas la
   table : « le vide reste dehors », la table garde la largeur de ses colonnes et
   se cale à gauche dans sa carte, le reste étant du blanc de carte.
   Vaut pour les trois écrans à deux sources — créances-clients, dettes
   fournisseurs, acomptes clients — qui partagent ce composant. */
.fbs-src-grid ~ .std-card,
.fbs-src-grid + .std-card { width: 100%; box-sizing: border-box; }

/* L'ENTRÉE D'UN PLAN, en tête de son bloc (2026-09-18) : un bouton à filet, pas
   un lien perdu sous la dernière ligne. Elle ouvre ce qu'on vient faire. */
.fbs-addrow--top .fbs-lbl { padding-top: 8px; padding-bottom: 4px; }
.fbs-addbtn--strong {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-accent-soft); border-radius: 999px;
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  color: var(--color-accent); cursor: pointer;
}
.fbs-addbtn--strong:hover { background: var(--color-accent-tint); border-color: var(--color-accent); }

/* Card du plan — reprise des règles `.spp-card*` de l'ex-Plan stratégique, avec
   leur propre préfixe : un style ne garde pas le nom d'un module retiré. */
.pcard {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-inner);
  border-radius: var(--radius-card); overflow: hidden; margin-bottom: 14px;
}
.pcard__head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--color-border-inner);
}
.pcard__num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pcard__num--btn { border: none; cursor: pointer; padding: 0; }
.pcard__num--btn:hover { background: var(--color-accent); color: var(--color-surface-card); }
.pcard__title { font-size: 14px; font-weight: 600; color: var(--color-navy); margin: 0; }
.pcard__note { font-size: 11.5px; color: var(--color-text-muted); }
.pcard__body { padding: 4px 0; }
.pcard__body--flush { padding: 0; overflow-x: auto; }

/* Étape « Investissements & amortissements » — 3 cards.

   Les cards utilisent le composant PlanCard de Planification (spp-card) : même
   en-tête, même pastille, même typographie — on ne l'imite plus, on le
   réutilise. Cette feuille ne stylise que les TABLEAUX du panneau (colonnes
   mensuelles, ancrage, saisie), au calibre des tables du plan (13 px).

   Charte : tokens :root uniquement. Cellules à saisir en bleu, SANS cadre —
   soulignement discret au focus. Cards tout en blanc (retour Olivier,
   2026-08-10) : la hiérarchie passe par la graisse et les filets, pas par des
   aplats. */

.iap { font-family: "Inter", system-ui, sans-serif; color: var(--color-text); }
.iap-empty { color: var(--color-text-muted); font-size: 13px; }

/* Marge blanche sur les côtés : les filets ne touchent pas le bord de la card. */
.iap-scroll { overflow-x: auto; padding: 0 16px; }

/* Colonnes CALÉES À GAUCHE (2026-08-11) : largeurs fixes, la table s'allonge
   vers la droite quand les mois s'ajoutent — plus d'étirement pleine largeur.
   Largeurs identiques sur les 3 cards → les mois restent alignés entre elles. */
.iap table { border-collapse: collapse; width: max-content; min-width: 0; font-size: 13px; }
.iap th, .iap td { padding: 7px 10px; text-align: right; white-space: nowrap; width: 66px; min-width: 66px; }
.iap thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border-inner);
}
.iap th.iap-lbl, .iap td.iap-lbl {
  text-align: left; width: 300px; min-width: 300px; padding-left: 0;
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface-card);
}
.iap th.iap-open, .iap td.iap-open {
  width: 140px; min-width: 140px;   /* « Durée de vie (ans) » tient sans élargir */
  border-right: 1px solid var(--color-border-inner);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.iap th.iap-end, .iap td.iap-end {
  border-left: 1px solid var(--color-border-inner);
  font-weight: 600; padding-right: 0; width: 80px; min-width: 80px;
}
.iap tbody tr + tr td { border-top: 1px solid var(--color-border-inner); }

.iap-v { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.iap-mut { color: var(--color-text-muted); }
/* Valeur d'actif : ce qui la diminue porte le signe moins. */
.iap-neg { color: var(--color-terracotta); }
.iap tr.iap-calc td { color: var(--color-text-muted); }
.iap tr.iap-calc td.iap-end { color: var(--color-text); font-style: normal; }
.iap tr.iap-tot td {
  font-weight: 600; color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}
.iap tr.iap-big td { font-size: 13.5px; }

/* Saisie : bleu, sans cadre. Le signe est posé au rendu, la saisie reste nue. */
.iap-cell, .iap-name, .iap-rate {
  border: 0; background: transparent; padding: 1px 0;
  font: inherit; color: var(--color-field-focus);
  text-align: right; width: 100%;
}
.iap-name { text-align: left; width: auto; min-width: 140px; }
.iap-rate { width: 44px; }
.iap-cell:focus, .iap-name:focus, .iap-rate:focus {
  outline: none; border-bottom: 1px solid var(--color-field-focus);
}
.iap-cell.iap-neg { color: var(--color-field-focus); }

/* Suppression : visible au survol de la ligne seulement. */
.iap-x {
  border: 0; background: transparent; cursor: pointer; margin-left: 6px;
  color: var(--color-text-muted); font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.iap tbody tr:hover .iap-x, .iap-x:focus-visible { opacity: 1; }
.iap-x:hover { color: var(--color-terracotta); }

/* Ajout : lien discret, comme dans le plan. */
.iap tr.iap-add td { padding-top: 5px; padding-bottom: 5px; }
.iap-addbtn {
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--color-accent);
}
.iap-addbtn:hover { text-decoration: underline; }

.iap-src { margin-left: 6px; font-size: 10px; color: var(--color-text-muted); }
.iap-to {
  margin-left: 6px; font-size: 10.5px; font-weight: 400;
  color: var(--color-accent);
}

/* Pieds de card : note d'ancrage, alerte, reports nommés. */
.iap-foot, .iap-ho {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; border-top: 1px solid var(--color-border-inner);
}
.iap-foott { font-size: 11px; color: var(--color-text-muted); }
.iap-warn { font-size: 11px; color: var(--color-terracotta); margin-left: auto; }
.iap-ho { font-size: 11.5px; color: var(--color-accent); }
.iap-ho b { color: var(--color-navy); }

/* ── Coût des produits vendus (carte périmètre + marge) ──────────────────── */
/* Sous-totaux (CA produits, COGS) : surlignage table = famille ardoise. */
.iap tr.pcp-sub td { font-weight: 600; color: var(--color-navy); background: var(--color-accent-tint); }
.iap tr.pcp-sub td.iap-lbl { background: var(--color-accent-tint); }
.iap tr.pcp-marge td {
  font-weight: 600; color: var(--color-sage);
  border-top: 1px solid var(--color-border);
}
.pcp-pct { display: block; font-size: 10px; font-weight: 400; color: var(--color-text-muted); }

/* Retirer du périmètre : au survol de la ligne seulement (comme .iap-x). */
.pcp-x {
  border: 0; background: transparent; cursor: pointer; margin-left: 6px;
  color: var(--color-text-muted); font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.iap tbody tr:hover .pcp-x, .pcp-x:focus-visible { opacity: 1; }
.pcp-x:hover { color: var(--color-terracotta); }

/* Driver par ligne : sélecteur discret + configuration inline. */
.pcp-driver { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; }
.pcp-mode, .pcp-cfgrow select, .pcp-add {
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text);
  font: inherit; font-size: 11px; padding: 1px 4px; max-width: 190px;
}
.pcp-cfg {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; font-size: 11px; color: var(--color-accent);
}
.pcp-cfg:hover { text-decoration: underline; }
.pcp-cfgrow { display: inline-flex; align-items: center; gap: 4px; }
.pcp-rate {
  border: 0; background: transparent; width: 40px; padding: 1px 0;
  font: inherit; font-size: 11.5px; color: var(--color-field-focus); text-align: right;
}
.pcp-rate:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.pcp-ok {
  border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer;
  background: var(--color-surface-card); font: inherit; font-size: 10.5px;
  color: var(--color-accent); padding: 1px 6px;
}
.pcp-switches { display: inline-flex; align-items: center; gap: 8px; }

/* Options de la section Stock & achats produits : AU-DESSUS des cards. */
.sps-options { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }

/* LA SYNTHÈSE À PLAT (2026-09-18) : ni carte, ni fond blanc, ni filet — c'est un
   résultat, pas une surface de saisie. Un titre en petites capitales, la table
   dessous, et l'air des deux blocs qui la nourrissent en dessous d'elle. */
.iap-sum { margin: 0 0 18px; }
.iap-sum > .iap-scroll { overflow-x: auto; }
.iap-sum table { background: none; }
.iap-sum::before {
  content: "Résumé";
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Mouvements exceptionnels — une ligne par écriture (2026-08-17). */
.cmv-empty { padding: 24px; color: var(--color-text-muted); }
.cmv-add {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 3px 12px;
  border: 0.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-card); color: var(--color-text);
}
.cmv-add:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Les quatre indicateurs, en tête de vue. */
.cmv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-gap: 12px; gap: 12px; margin: 0 0 18px; }
.cmv-kpi { background: var(--color-surface-page); border-radius: var(--radius-card); padding: 10px 12px; }
.cmv-kpi__lbl { display: block; font-size: 12px; color: var(--color-text-muted); }
.cmv-kpi__val { display: block; font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 22px; font-weight: 600; color: var(--color-navy); }

/* La barre de défilement horizontale se posait SUR la dernière ligne (constat
   Olivier 2026-08-17) : on lui réserve sa place sous le tableau. */
.cmv-wrap { overflow-x: auto; padding-bottom: 16px; scrollbar-gutter: stable; }
/* Tenir sur UNE page sans défilement : largeurs en pourcentage, contenu tronqué
   proprement plutôt que débordant (retour Olivier 2026-08-17). */
.cmv { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.cmv col.c-num { width: 11%; } .cmv col.c-lbl { width: 23%; } .cmv col.c-mo { width: 7%; }
.cmv col.c-rec { width: 13%; } .cmv col.c-acc { width: 16%; } .cmv col.c-kl { width: 11%; }
.cmv col.c-del { width: 28px; }
.cmv td, .cmv th { overflow: hidden; }
.cmv thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 4px 8px 8px 0; border-bottom: 1px solid var(--color-border);
}
.cmv tbody td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--color-border-inner); vertical-align: middle; }

/* Le montant ouvre la ligne (retour Olivier 2026-08-17) : chiffres alignés à
   droite dans leur colonne, respiration avant le libellé. */
.cmv-c-num, th.cmv-c-num { text-align: right; padding-right: 16px; }
.cmv-c-cash, th.cmv-c-cash { text-align: center; }
.cmv-c-rec { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cmv-c-del { width: 24px; }
.cmv-none { color: var(--color-text-muted); padding: 14px 0; }

/* Champ à saisir : bleu de la charte sur fond ambre très léger (il se voit même
   vide) — même grammaire que la section TVA. */
.cmv-field {
  border: 0; padding: 2px 6px; border-radius: 3px; font: inherit;
  color: var(--color-field-focus); background: color-mix(in srgb, var(--color-amber) 8%, transparent);
  width: 100%;
}
.cmv-field--num { text-align: right; width: 100%; }
.cmv-field--n { width: 34px; text-align: right; padding: 2px 4px; }
.cmv-field:focus { outline: none; box-shadow: inset 0 -1px 0 var(--color-field-focus); }
.cmv-sel {
  border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--color-field-focus); cursor: pointer; width: 100%; max-width: 100%;
  text-overflow: ellipsis;
}
.cmv-sel:focus { outline: none; }
.cmv-check { display: inline-flex; align-items: center; cursor: pointer; }
.cmv-hint { font-size: 11px; color: var(--color-text-muted); margin-left: 4px; cursor: help; }
.cmv-del { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 15px; }
.cmv-del:hover { color: var(--color-terracotta); }
/* Écriture sans effet monétaire : elle vit au bilan, pas dans le plan. */
.cmv-nocash td { color: var(--color-text-muted); }
.cmv-note { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }

/* Plan produits — feuille PROPRE à la section (2026-08-12).

   Trois règles tenues partout, contre le désordre constaté :
     · une seule couleur par rôle — BLEU = ce qui se saisit (sans cadre, filet au
       focus) · NAVY = les totaux · ATÉNUÉ = les étiquettes · ARDOISE = les
       renvois vers un autre écran · SAGE = la marge ;
     · un seul alignement — texte à gauche, nombres à droite (chiffres tabulaires,
       même largeur de colonne partout) ;
     · un seul rythme — 14 px de gouttière horizontale, 7 px de hauteur de ligne.
   Tokens :root uniquement (charte). */

.spl-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.spl-seg {
  display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px;
  overflow: hidden; background: var(--color-surface-card);
}
.spl-seg button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px;
  border: 0; border-left: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.spl-seg button:first-child { border-left: 0; }
.spl-seg button.on { background: var(--color-accent); color: #fff; }
.spl-add, .spl-cta {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-navy); padding: 6px 14px;
}
.spl-add:hover, .spl-cta:hover { border-color: var(--color-accent); color: var(--color-accent); }
.spl-cta {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
  padding: 8px 18px; margin-top: 4px;
}
/* Bouton d'ajout PRINCIPAL de la barre : ardoise claire (accent-soft), avant
   « Tout replier » — se voit sans concurrencer la vue active. */
/* ＋ Modèle : tint clair AVEC filet accent ; « Tout replier » s'efface en
   contraste (pas de gras, texte atténué, filet standard). */
.spl-add--primary {
  background: var(--color-accent-tint-strong); border-color: var(--color-accent);
  color: var(--color-accent);
}
.spl-add--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.spl-add--quiet { font-weight: 400; color: var(--color-text-muted); }
.spl-add--quiet:hover { color: var(--color-accent); border-color: var(--color-accent); }
.spl-cta:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* ── Écran vide : il enseigne le parcours ─────────────────────────────────── */
.spl-start {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 22px 24px 24px; max-width: 720px;
}
.spl-start h2 {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 19px; font-weight: 600;
  color: var(--color-navy); margin: 0 0 14px;
}
.spl-steps { margin: 0 0 18px; padding-left: 20px; }
.spl-steps li {
  font-size: 13px; line-height: 1.55; color: var(--color-text-muted);
  margin-bottom: 8px;
}
.spl-steps li::marker { color: var(--color-accent); font-weight: 700; }
.spl-steps b { color: var(--color-text); font-weight: 600; }
.spl-empty { font-size: 13px; color: var(--color-text-muted); padding: 20px 4px; }

/* ── Card catégorie ───────────────────────────────────────────────────────── */
/* `overflow: visible` + `position: relative` : la card ancre le popover de
   règle et ne le coupe pas (le débordement horizontal du tableau reste géré
   par .spl-scroll, qui porte l'arrondi bas). */
.spl-card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(43, 32, 62, .04);
  margin: 0 0 10px; overflow: visible; position: relative;
}
.spl-card > .spl-scroll { border-radius: 0 0 12px 12px; }
/* En-tête en DEUX rangées (structure 2026-08-15) :
     1. ◆ + TITRE à gauche — badge du modèle tout à droite ;
     2. réglages étiquetés (Mode de saisie · Compte + délai), espacée. */
.spl-head {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 18px 12px; border-bottom: 1px solid var(--color-border-inner);
}
.spl-head__row { display: flex; align-items: center; gap: 10px; }
.spl-head__row .spl-catname { flex: 1 1 auto; min-width: 120px; }
.spl-head__tag { margin-left: auto; }
.spl-head__cfg { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.spl-cfg { display: inline-flex; align-items: center; gap: 9px; }
.spl-cfg > label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.spl-mark {
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
  font-size: 10px; line-height: 1; padding: 0; margin-bottom: 3px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.spl-mark:hover { background: var(--color-accent); color: var(--color-surface-card); }
.spl-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spl-field--acct { margin-left: auto; padding-left: 18px; }
.spl-flabel {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.spl-catname, .spl-rowname, .spl-num {
  border: 0; background: transparent; padding: 1px 0;
  font: inherit; color: var(--color-field-focus);
}
.spl-catname { font-size: 16px; font-weight: 700; min-width: 220px; }
.spl-catname:focus, .spl-rowname:focus, .spl-num:focus {
  outline: none; border-bottom: 1px solid var(--color-field-focus);
}
.spl-catname::placeholder, .spl-rowname::placeholder, .spl-num::placeholder {
  color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); font-weight: 400;
}
.spl-catname:disabled, .spl-rowname:disabled { color: var(--color-navy); }
.spl-acct {
  font: inherit; font-size: 13.5px; font-weight: 400; color: var(--color-field-focus);
  background: transparent; border: 0; padding: 1px 0; cursor: pointer; max-width: 260px;
}
.spl-acct:focus { outline: none; }
/* Compte non choisi : le champ le dit lui-même (terracotta = alerte système),
   plus de bandeau d'avertissement séparé. */
/* Compte non choisi = ALERTE (terracotta de la charte) : fond teinté + filet,
   pour qu'on ne publie pas une carte non rattachée (2026-08-16). */
.spl-acct--todo {
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 12%, var(--color-surface-card));
  border: 1px solid var(--color-terracotta);
  border-radius: 7px;
  padding: 1px 6px;
}
/* Badge de modèle sur la card négoce (ardoise, petites capitales). */
.spl-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-on-tint); background: var(--color-accent-tint);
  border-radius: 999px; padding: 3px 9px; flex: 0 0 auto; align-self: center;
}
/* ── Règle de calcul (card négoce) : pastille + popover ──────────────────── */
/* La règle ÉCRIT les mois prévisionnels puis les laisse modifiables — la
   pastille rappelle seulement la dernière règle appliquée et son paramètre. */
.spl-c-rule { text-align: left; }
.spl-table thead th.spl-c-rule { white-space: normal; }
.spl-rule {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  text-align: left; line-height: 1.25; color: var(--color-field-focus); max-width: 100%;
}
.spl-rule i { font-style: normal; color: var(--color-text-muted); }
.spl-rule em {
  display: block; font-style: normal; font-size: 10px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spl-rule:disabled { cursor: default; }
.spl-pop {
  position: absolute; z-index: 30; min-width: 232px;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: 0 8px 22px rgba(0, 0, 0, .10); padding: 8px;
}
.spl-pop__h {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 2px 6px 6px;
}
.spl-pop__inds {
  background: var(--color-accent-tint); border-radius: 7px; padding: 6px 8px; margin-bottom: 8px;
}
.spl-pop__i { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; padding: 1px 0; }
.spl-pop__i span { color: var(--color-text-muted); }
.spl-pop__i b { color: var(--color-navy); font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.spl-pop__modes { display: flex; flex-direction: column; gap: 1px; }
.spl-pop__modes button {
  border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--color-text); padding: 5px 8px; border-radius: 6px;
}
.spl-pop__modes button:hover:not(:disabled) { background: var(--color-surface-page); }
.spl-pop__modes button.on { background: var(--color-accent-tint); color: var(--color-accent); font-weight: 600; }
.spl-pop__modes button:disabled { color: var(--color-text-muted); opacity: .5; cursor: default; }
.spl-pop__p {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.spl-pop__p .spl-num { width: 74px; text-align: left; font-size: 12.5px; }
.spl-pop__p span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.spl-pop__n {
  margin: 8px 0 0; padding: 6px 8px 0; border-top: 1px solid var(--color-border-inner);
  font-size: 10.5px; color: var(--color-text-muted); line-height: 1.35;
}

/* Pilule à segments (unité d'une card presta : heures | JH | CHF) — les trois
   choix VISIBLES (demande 2026-08-15), actif en ardoise claire. */
.spl-pillseg {
  display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px;
  overflow: hidden; background: var(--color-surface-card); align-self: center;
}
.spl-pillseg button {
  font: inherit; font-size: 11px; font-weight: 600; padding: 3px 10px;
  border: 0; border-left: 1px solid var(--color-border-inner);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.spl-pillseg button:first-child { border-left: 0; }
.spl-pillseg button.on { background: var(--color-accent-tint-strong); color: var(--color-accent); }

/* Select de cellule DISCRET : une valeur bleue sans cadre (charte saisie),
   pas un bouton — utilisé pour le décalage d'achat M−n. */
.spl-cellsel {
  font: inherit; font-size: 12.5px; color: var(--color-field-focus);
  background: transparent; border: 0; padding: 1px 0; cursor: pointer; max-width: 100%;
}
.spl-cellsel:focus { outline: none; }
.spl-cardx {
  align-self: flex-start; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 13px; line-height: 1; padding: 2px;
  opacity: 0; transition: opacity .12s ease;
}
.spl-card:hover .spl-cardx, .spl-cardx:focus-visible { opacity: 1; }
.spl-cardx:hover { color: var(--color-terracotta); }

/* ── Tableau ──────────────────────────────────────────────────────────────── */
/* défilement : voir .lk-hscroll (standard, designSystem.css) */
.spl-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
.spl-table th, .spl-table td {
  padding: 7px 8px; white-space: nowrap; vertical-align: middle;
}
.spl-table thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-inner);
  background: var(--color-surface-card);
}
/* Colonnes : texte à gauche, nombres à droite — largeurs fixes pour que les
   mois restent alignés d'une card à l'autre. */
/* GRILLE FIXE et identique sur TOUTES les cards (colgroup : libellé 190 +
   zone paramètres 240 partagée + 12 mois de 46 + total 66 ≈ 1 060 px) : les
   colonnes de mois s'alignent d'une card à l'autre, quel que soit le modèle,
   et les 12 mois tiennent sans défilement sur un écran plein. */
/* Responsive : libellé + paramètres en px FIXES, les mois se partagent le
   reste — les colonnes restent alignées d'une carte à l'autre à toute
   largeur, et le défilement horizontal n'apparaît qu'en dessous de 980px. */
.spl-table--fixed { table-layout: fixed; width: 100%; min-width: 1040px; }
/* En disposition fixe, `width: max-content` laisse le navigateur dimensionner
   les colonnes auto sur leur CONTENU (Safari : colonnes géantes, mois hors
   champ). `width: 100%` rend la répartition égale déterministe. */
.spl-table th, .spl-table td { border-left: 0 !important; border-right: 0 !important; }
.spl-table--fixed th, .spl-table--fixed td { overflow: hidden; text-overflow: ellipsis; }
.spl-c-lbl { text-align: left; padding-left: 18px !important; }
.spl-c-unit { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* En-têtes des colonnes de paramètres : sur 2 lignes plutôt que tronqués
   (« Valeur (kCHF) », « Coût (% du CA) » doivent se lire en entier). */
/* Les en-têtes de paramètres ne sont JAMAIS tronqués : ils débordent sur deux
   lignes plutôt que de finir en « … » (constat 2026-08-16, carnet en mode %). */
/* En-têtes de paramètres : deux lignes MAXIMUM — padding réduit, pas de
   césure au milieu d'un mot (constat 2026-08-16 : « HORAIR/E » sur 3 lignes). */
.spl-table thead th.spl-c-unit {
  white-space: normal; line-height: 1.15;
  overflow: visible; text-overflow: clip;
  letter-spacing: 0; word-break: keep-all; -webkit-hyphens: none; hyphens: none;
  padding-left: 4px !important; padding-right: 4px !important;
  font-size: 9.5px;
}
.spl-c-val { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.spl-c-tot {
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--color-navy);
  padding-right: 18px !important;
}
/* Filet devant le total annuel (demande 2026-08-15) — spécificité au-dessus
   du « border-left: 0 !important » générique de .spl-table th/td. */
.spl-table th.spl-c-tot, .spl-table td.spl-c-tot {
  border-left: 1px solid var(--color-border-inner) !important;
}
/* Respiration entre les paramètres (prix, coût) et les volumes. */
.spl-c-sep { width: 10px; min-width: 10px; padding: 0 !important; }
.spl-num { width: 100%; text-align: right; }
.spl-ro { color: var(--color-text-muted); }
.spl-closed .spl-ro { color: var(--color-text-muted); }

/* Le ✕ (masqué hors survol) débordait de la cellule : l'ellipse le rendait
   en « .. ». Il passe en absolu, l'input lui laisse sa place. */
.spl-c-lbl { position: relative; }
.spl-rowname { min-width: 0; width: calc(100% - 24px); }
/* Sous-rangée du préfacturé : paramètres étiquetés, pleine largeur. */
.sp-subrow td { padding: 2px 8px 8px 18px !important; border-top: 0 !important; }
.sp-sub { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sp-sub label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.sp-sub .spl-num { width: 62px; text-align: left; font-size: 12.5px; }
.sp-subnote { font-size: 11px; color: var(--color-text-muted); font-style: italic; }
.spl-rowx {
  border: 0; background: transparent; cursor: pointer;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: 12px; line-height: 1;
  opacity: .35; transition: opacity .12s ease;
}
.spl-table tbody tr:hover .spl-rowx, .spl-rowx:focus-visible { opacity: 1; }
.spl-rowx:hover { color: var(--color-terracotta); }

/* « ＋ Produit » : DANS le tableau, aligné sous la colonne Produit. */
.spl-addrow td { padding-top: 4px !important; padding-bottom: 5px !important; }
.spl-addrow button {
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent);
}
.spl-addrow button:hover { text-decoration: underline; }

/* ── Bloc de calcul (volumes · CA · coût · marge) : fond ivoire UNI (maquette
   Olivier 2026-08-12), CA en navy, coût atténué, pointillé avant la marge. */
.spl-sum td { font-weight: 600; color: var(--color-navy); background: var(--color-surface-th); }
.spl-sum--first td { border-top: 1px solid var(--color-border-inner) !important; }
.spl-sum--ca td { background: var(--color-surface-th); }
.spl-sum + .spl-sum:not(.spl-sum--marge) td { font-weight: 400; color: var(--color-text-muted); }
.spl-sum--ca td { font-weight: 600 !important; color: var(--color-navy) !important; }
.spl-sum--marge td {
  color: var(--color-sage); background: var(--color-surface-th);
  border-top: 1px dashed var(--color-border) !important;
}
.spl-unit {
  margin-left: 8px; font-size: 10px; font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.spl-to { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--color-accent); }
.spl-pct {
  margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--color-sage);
  background: color-mix(in srgb, var(--color-sage) 12%, transparent);
  border-radius: 6px; padding: 1px 7px;
}

/* Repère de clôture : filet avant le 1er mois OUVERT. Les mois clos restent
   saisissables (unités vendues connues) — le filet dit seulement où l'on passe
   du constaté au planifié. */
.spl-bound { border-left: 1px solid var(--color-accent-soft) !important; }  /* clôture : seule verticale */

/* Réel / prévisionnel façon BANDEAUX (inspiration Pigment, 2026-08-15) : deux
   champs colorés AU-DESSUS des mois — Réel en sable (fait comptable),
   Prévisionnel en ardoise pleine (saisie) — et les cellules restent BLANCHES.
   La classe .spl-fore ne teinte plus rien (conservée sur les cellules pour un
   éventuel usage futur). */
.spl-band {
  text-align: left !important; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px !important; border-bottom: 0 !important;
}
/* Spécificité relevée : `.spl-table thead th` pose un fond card blanc qui
   écrasait les bandeaux (constat 2026-08-15). */
.spl-table thead th.spl-band--real {
  /* Réalisé en ardoise CLAIRE (même famille que le prévisionnel plein) —
     ex-sable, changé le 2026-08-15 ; le bandeau dit « Réalisé », plus
     l'inducteur. */
  background: var(--color-accent-tint-strong); color: var(--color-on-tint);
  border-radius: 6px 0 0 6px;
}
.spl-table thead th.spl-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }

/* ── Plan services : menu de modèles + spécificités ──────────────────────── */
.sp-addwrap { position: relative; display: inline-block; }
/* Tuiles de modèles : hauteurs ALIGNÉES (grid étire les cellules), fond tuile
   léger (surface page), ombre douce, accent au survol. */
.sp-kinds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px; margin-top: 10px; align-items: stretch;
}
/* Popup du « ＋ » : tuiles LARGES (plus horizontales que verticales), 3 par
   rangée — la formule tient sur une seule ligne. Ancré au bord GAUCHE de la
   barre (pas au bouton) pour tenir à l'écran. */
/* Popup ancré au BOUTON « ＋ Modèle » (aligné sur sa gauche, 2026-08-16). */
.spl-bar { position: relative; }
.sp-addwrap { position: relative; }
.sp-addwrap .sp-kinds {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 460px;
  /* En COLONNE (demande 2026-08-16) : une tuile par rangée, menu étroit. */
  width: min(460px, 100%); grid-template-columns: 1fr;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 10px; box-shadow: 0 8px 24px rgba(43, 32, 62, .14);
}
.sp-kind {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  height: 100%;
  font: inherit; text-align: left; cursor: pointer; padding: 14px 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  /* Tuile en tint ardoise clair : se détache du fond crème et du popup blanc. */
  background: var(--color-accent-tint);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .07);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.sp-kind:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-tint-strong);
  box-shadow: 0 3px 10px rgba(43, 32, 62, .12);
  transform: translateY(-1px);
}
.sp-kind b { font-size: 13.5px; color: var(--color-navy); }
.sp-kind span { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.sp-kindtag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent); background: var(--color-accent-tint);
  border-radius: 6px; padding: 2px 7px; margin-bottom: 4px; white-space: nowrap;
}
.sp-terms-fixed { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.sp-bill select {
  border: 0; background: transparent; font: inherit; font-size: 12px;
  color: var(--color-field-focus); cursor: pointer; max-width: 100px; padding: 0;
}
.sp-over { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--color-terracotta); }
.sp-startp { font-size: 13px; color: var(--color-text-muted); margin: 0 0 14px; }


/* Card AGRÉGÉE : une seule ligne — nom, badge, et à droite la mini-courbe des
   mois, la marge % et le TOTAL ANNUEL. */
.spl-aggsum { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.spl-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.spl-spark i { display: block; width: 5px; background: var(--color-accent); border-radius: 1px; min-height: 2px; }
.spl-aggpct {
  font-size: 11.5px; font-weight: 700; color: var(--color-sage);
  background: color-mix(in srgb, var(--color-sage) 12%, transparent);
  border-radius: 6px; padding: 2px 8px;
}
.spl-aggtot { font-size: 15px; font-weight: 700; color: var(--color-navy); white-space: nowrap; }
.spl-aggtot small { font-size: 10px; font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }

/* Champs d'en-tête à ICÔNE : l'étiquette texte cède la place, le libellé
   complet reste en infobulle. */
.spl-fic { flex-direction: row; align-items: center; gap: 6px; }
.spl-fic svg { width: 13px; height: 13px; color: var(--color-text-muted); flex: 0 0 auto; }

/* Colonnes teintées : deux tons de la même couleur d'accent (ardoise) —
   tarif/prix un peu marqué, coût encore plus clair. Dérivés par color-mix,
   jamais un hex inventé (charte). */
col.spl-col-price { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-card)); }
col.spl-col-cost { background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface-card)); }
/* Largeurs EXPLICITES des colonnes de paramètres (2026-08-31). Sans elles, le
   `table-layout: fixed` partageait la place restante avec les douze mois : un
   prix à cinq chiffres et son apostrophe finissaient tronqués (« 14'50… »), et
   la colonne de coût touchait ses voisines. La colonne du milieu (± %/an ou
   marge) reste étroite, elle ne porte que deux ou trois signes. */
.spl-table--fixed colgroup col:nth-child(2) { width: 96px; }
.spl-table--fixed colgroup col:nth-child(3) { width: 62px; }
.spl-table--fixed colgroup col:nth-child(4) { width: 96px; }
/* Les fonds de rangées de totaux priment sur la teinte de colonne. */
.spl-sum td { position: relative; }

/* ── Règles de coût (section Coût des produits vendus) ───────────────────── */
/* Pastilles du taux observé : Ø N-1 · N réel · À venir · N total — le taux
   s'AFFICHE observé, il se POSE à la main (jamais auto-appliqué). */
.cr-obs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 14px 2px; }
.cr-obs__t {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.cr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--color-text-muted);
  background: var(--color-accent-tint); border-radius: 6px; padding: 2px 8px;
}
.cr-chip b { color: var(--color-on-tint); font-weight: 700; }
/* Taux posé : valeur éditable = bleu saisie, sans cadre (charte). */
.cr-rate { display: inline-flex; align-items: baseline; gap: 3px; }
.cr-rate input {
  width: 52px; font: inherit; font-weight: 600; text-align: right;
  color: var(--color-field-focus); background: transparent; border: 0; padding: 2px 0;
}
.cr-rate input:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.cr-rate input::placeholder { color: var(--color-text-muted); font-weight: 400; }
.cr-rate > span { font-size: 11.5px; color: var(--color-text-muted); }
/* Lignes dérivées du circuit stock (Achats, Variation) : lecture atténuée. */
.cr-derived td { color: var(--color-text-muted); font-weight: 400; }
/* Lignes de CA de référence : chips + ajout, sous la table. */
.cr-refs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 14px 12px;
}
.cr-refs > .spl-flabel { margin-right: 2px; }
.cr-chip--ref { background: var(--color-accent-tint-strong); color: var(--color-on-tint); }
.cr-chip--ref button {
  font: inherit; font-size: 10px; line-height: 1; cursor: pointer;
  color: var(--color-text-muted); background: transparent; border: 0; padding: 0 0 0 2px;
}
.cr-chip--ref button:hover { color: var(--color-terracotta); }
.cr-refs select {
  font: inherit; font-size: 12px; color: var(--color-accent); cursor: pointer;
  background: transparent; border: 0; padding: 2px 0;
}
.cr-refs select:focus { outline: none; }
/* Titre de la card totale « Coût des produits vendus » (lecture, pas saisie). */
.cr-title { color: var(--color-navy); font-weight: 600; }

/* Fiche de modèle en 3 lignes standard (tuiles du « ＋ » Plan services) :
   inducteur mensuel (ligne entière en gras terracotta) · formule (une seule
   ligne, jamais de saut) · convient pour (italique, en dernier). */
.sp-kind__ind { font-size: 11.5px; font-weight: 700; color: var(--color-terracotta); line-height: 1.35; }
.sp-kind__f { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; white-space: nowrap; }
.sp-kind__fit { font-size: 11.5px; font-style: italic; color: var(--color-text-muted); line-height: 1.35; }

/* Inducteur mensuel en clair au-dessus des mois (cards de modèles) — aligné
   sur le début EXACT de la colonne JAN (même gouttière que les cellules de
   mois, pas le padding du libellé), gras et souligné : on doit lire d'un
   coup d'œil qu'il couvre janvier → décembre. */
.spl-indrow th { border-bottom: 0 !important; padding-bottom: 6px !important; }
th.spl-ind {
  text-align: left !important; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-accent); padding: 8px 8px 6px !important;
  border-bottom: 1.5px solid var(--color-accent-soft) !important;
}
/* Cellule mensuelle en %, format « valeur % » (contrat d'heures annuel) —
   input bleu sans cadre + suffixe atténué, pour ne pas lire un nombre absolu. */
.spl-pctcell { display: inline-flex; align-items: baseline; gap: 2px; }
.spl-pctcell i { font-style: normal; font-size: 11px; color: var(--color-text-muted); }

/* ── Synthèse du plan : à PLAT sur le fond (pas une card) ────────────────── */
.spl-card--hours {
  background: transparent; border: 0; box-shadow: none;
  margin: 0 0 14px;
}
/* Fond transparent SAUF les bandes Réalisé / Prévisionnel, qui gardent leurs
   couleurs de charte (demande 2026-08-16). */
.spl-card--hours .spl-table thead th:not(.spl-band) { background: transparent; }
.spl-card--hours .spl-table td { background: transparent; }
/* Filet de clôture sous la dernière ligne du tableau. */
.spl-card--hours .spl-table tbody tr:last-child td { border-bottom: 1px solid var(--color-border); }

/* SYNTHÈSE en pied de page (2026-08-31) : une card à part, plus FONCÉE que les
   cards de plan — c'est le total, il ne se confond pas avec ce qu'il
   additionne. Aplat ardoise clair de la charte, la seule famille de
   surlignage. */
.spl-card--synth {
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-card);
  padding: 4px 14px 10px;
  margin-top: 18px;
}
.spl-card--synth .spl-table thead th:not(.spl-band),
.spl-card--synth .spl-table td { background: transparent; }
.spl-card--synth .spl-table tbody tr:last-child td { border-bottom: 0; }

/* ── Drag & drop des cards ──────────────────────────────────────────────── */
/* Poignée toujours visible, renforcée au survol (retour 2026-08-16). */
.spl-grip {
  cursor: grab; -webkit-user-select: none; user-select: none; color: var(--color-text-muted);
  font-size: 15px; font-weight: 700; letter-spacing: -2px; padding: 0 4px;
  opacity: .55; transition: opacity .12s ease, color .12s ease;
}
.spl-head:hover .spl-grip { opacity: 1; color: var(--color-accent); }
.spl-grip:active { cursor: grabbing; }
.spl-card.is-dragging { opacity: .45; }
/* Cible de dépôt : liseré ardoise au-dessus de la card visée. */
.spl-card.is-dropover { box-shadow: 0 -3px 0 0 var(--color-accent); }

/* ── Confirmation de suppression ────────────────────────────────────────── */
.spl-confirm {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(43, 32, 62, .32);
  display: flex; align-items: center; justify-content: center;
}
.spl-confirm__box {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 20px 22px; max-width: 420px;
  box-shadow: 0 12px 36px rgba(43, 32, 62, .22);
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; color: var(--color-text);
}
.spl-confirm__box p { margin: 0 0 16px; }
.spl-confirm__btns { display: flex; justify-content: flex-end; gap: 10px; }
.spl-confirm__btns button {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-text);
  padding: 7px 16px;
}
.spl-confirm__del {
  background: var(--color-terracotta) !important; border-color: var(--color-terracotta) !important;
  color: #fff !important;
}


/* ── Synthèse : figures-clés dans la zone de gauche (proto B) ────────────── */
/* Aligné sur le ◆ des cartes (18px de padding + 1px de filet + poignée), pas
   sur leur bordure (retour 2026-08-16). */
.spl-synth-side {
  vertical-align: top; padding: 4px 8px 4px 44px !important;
}
.spl-synth-side .spl-skpi { display: flex; }
/* Bascule posée sur la ligne des mois, alignée sur les figures-clés. */
.spl-table thead th.spl-th-toggle { padding-left: 44px !important; text-align: left; vertical-align: bottom; }
.spl-skpi { display: inline-flex; align-items: baseline; gap: 6px; }
.spl-skpi b {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 24px; font-weight: 600;
  color: var(--color-navy);
}
.spl-skpi small { font-size: 11px; color: var(--color-text-muted); }
.spl-skpi--marge b { color: var(--color-sage); }
.spl-synth-toggle {
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-text-muted);
  padding: 3px 10px;
}
.spl-synth-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.spl-synth-card td { color: var(--color-text-muted); font-size: 12px; }

/* Mini-péristyle du bouton de carte : la cour s'évide quand on ouvre
   (zoom « on entre dans la palestre »), rotation douce. */
.spl-mark__logo { display: block; transition: transform .25s ease; }
.spl-mark__logo .spl-mark__court {
  transform-origin: 32px 32px;
  transition: opacity .25s ease, transform .25s ease;
  opacity: 1;
}
.spl-mark__logo.is-open { transform: rotate(90deg); }
.spl-mark__logo.is-open .spl-mark__court { opacity: 0; transform: scale(2.2); }

/* Hiérarchie des figures : CA en grand, marge et heures en dessous, plus petits. */
.spl-skpi--marge b { font-size: 15px; }
.spl-skpi--h b { font-size: 13px; color: var(--color-text-muted); }


/* Total d'une ligne saisie en % qui dépasse 100 : alerte franche (charte). */
.spl-table td.spl-c-tot--over {
  color: #fff !important;
  background: var(--color-terracotta) !important;
  font-weight: 700;
  border-radius: 6px;
}

/* TROIS LECTURES du plan (2026-08-17) : chiffre d'affaires (+ heures) · facturé ·
   encaissé. Segment secondaire — la vue temporelle (mensuel / pluriannuel) reste
   la bascule principale, celle-ci se lit un cran plus discret. */
.spl-seg--metric button { font-size: 12.5px; font-weight: 500; padding: 6px 12px; }
.spl-seg--metric button.on {
  background: var(--color-accent-tint-strong); color: var(--color-on-tint); font-weight: 600;
}

/* Cockpit CFO — corps de l'onglet Cockpit du hub CFO. Recréation fidèle du
   prototype de design, habillée avec les tokens de la charte (aucun hex hors
   charte : les teintes de statut sont dérivées par color-mix des tokens sage /
   amber / terracotta). */

.ckpit { position: relative; }

/* Teintes de statut, dérivées des tokens charte. */
.ckpit__st--favorable { --st: var(--color-sage); --st-tint: color-mix(in srgb, var(--color-sage) 12%, white); }
.ckpit__st--attention { --st: var(--color-amber); --st-tint: color-mix(in srgb, var(--color-amber) 13%, white); }
.ckpit__st--critique  { --st: var(--color-terracotta); --st-tint: color-mix(in srgb, var(--color-terracotta) 12%, white); }

/* ── Signaux clés (colonne droite, état repos) ────────────────────────────── */
.ckpit__signals { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ckpit__signal {
  position: relative; padding-left: 19px; font-size: 13.5px; line-height: 1.5; color: var(--color-text);
}
.ckpit__signal::before {
  content: ''; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--color-terracotta);
}
.ckpit__signal strong { font-weight: 700; color: var(--color-navy); }
.ckpit__nosignal { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ── Toggle de vue ────────────────────────────────────────────────────────── */
.ckpit__viewbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 4px 0 16px;
}
/* Le choix de vue est passé aux onglets du hub : la barre ne porte plus que
   l'indice + le bouton d'édition, alignés à droite. */
.ckpit__viewbar--actions { justify-content: flex-end; }
.ckpit__seg { display: inline-flex; background: var(--color-surface-page); border-radius: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card); 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: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 22px; font-weight: 500; color: var(--color-navy); }
.ckfin-kpi-prev { font-size: 12.5px; color: var(--color-text-muted); }
.ckfin-arw { font-weight: 600; }
.ckfin-arw--up { color: var(--color-sage); }
.ckfin-arw--down { color: var(--color-amber); }
.ckfin-arw--flat { color: var(--color-text-muted); }
.ckfin-kpi-sub { font-size: 10.5px; color: var(--color-text-muted); margin-top: 7px; }

.ckfin-feu { display: grid; grid-template-columns: 14px 1fr; grid-gap: 12px; gap: 12px; padding: 15px 2px; border-top: 1px solid var(--color-border-inner); }
.ckfin-feu:first-of-type { border-top: 0; padding-top: 6px; }
.ckfin-dot { width: 13px; height: 13px; border-radius: 50%; margin-top: 5px; }
.ckfin-dot--g { background: var(--color-sage); }
.ckfin-dot--o { background: var(--color-amber); }
.ckfin-dot--r { background: var(--color-terracotta); }
.ckfin-feu-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ckfin-feu-name { font-size: 14.5px; font-weight: 600; color: var(--color-navy); }
.ckfin-feu-art { font-size: 11px; color: var(--color-text-muted); }
.ckfin-feu-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.ckfin-feu-pill--g { background: color-mix(in srgb, var(--color-sage) 15%, transparent); color: var(--color-sage); }
.ckfin-feu-pill--o { background: color-mix(in srgb, var(--color-amber) 16%, transparent); color: var(--color-amber); }
.ckfin-feu-pill--r { background: color-mix(in srgb, var(--color-terracotta) 15%, transparent); color: var(--color-terracotta); }
.ckfin-feu-rule { font-size: 12px; color: var(--color-text-muted); margin: 5px 0 9px; }
.ckfin-feu-rule b { color: var(--color-navy); font-weight: 600; }
.ckfin-feu-cols { display: flex; gap: 26px; }
.ckfin-fc-l { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
.ckfin-fc-v { font-size: 14px; font-weight: 600; color: var(--color-navy); }
.ckfin-fc-m { font-size: 11.5px; margin-top: 1px; }
.ckfin-fc-m--g { color: var(--color-sage); }
.ckfin-fc-m--o { color: var(--color-amber); }
.ckfin-fc-m--r { color: var(--color-terracotta); }
.ckfin-cascade { border-top: 1px solid var(--color-border-inner); margin-top: 6px; padding-top: 12px;
  font-size: 11.5px; color: var(--color-text-muted); line-height: 1.5; }
.ckfin-c--g { color: var(--color-sage); font-weight: 600; }
.ckfin-c--o { color: var(--color-amber); font-weight: 600; }
.ckfin-c--r { color: var(--color-terracotta); font-weight: 600; }
@media (max-width: 900px) { .ckfin-grid { grid-template-columns: 1fr; } }

/* ── CFO — Cockpit, onglet « Journal & décisions » ──────────────────────────
   Le gabarit (PageShell framed + Tabs + Card) porte l'en-tête, les onglets et
   le layout ; on ne style ici que le contenu fonctionnel propre au cockpit.
   Couleurs de statut = tokens charte (--color-terracotta / --color-amber /
   --color-sage). Le reste s'aligne sur les variables --ck-* locales. */
.cfo {
  --ck-navy:    var(--color-navy);
  --ck-missing: var(--color-text-muted);
  --ck-ink:     var(--color-text);
  --ck-muted:   var(--color-text-muted);
  --ck-line:    var(--color-border);
  --ck-edit:    var(--color-field-focus);
  --ck-terra:   var(--color-terracotta);
}

/* ── Champs partagés (composeurs date / bouton Ajouter) ─────────────────────── */
.cfo-journal__date {
  font-family: inherit; font-size: 13px; color: var(--color-field-focus);
  border: none; background: transparent; padding: 4px 2px;
  /* Assez large pour la date ET l'icône du gestionnaire de mots de passe :
     sans marge, l'icône chevauchait les derniers chiffres de l'année. */
  min-width: 152px;
}
.cfo-journal__add {
  border: none; background: var(--ck-navy); color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 600; border-radius: 7px; padding: 6px 16px; cursor: pointer;
}
.cfo-journal__add:disabled { opacity: .4; cursor: default; }
.cfo-journal__empty { font-size: 13px; color: var(--ck-missing); font-style: italic; padding: 8px 0; }
.cfo-journal__foot { margin-top: 12px; text-align: right; }

/* ── Chip de statut (cliquable, cycle) ──────────────────────────────────────── */
.cfo-chip {
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; border-radius: var(--radius-card); padding: 2px 10px; white-space: nowrap;
}
.cfo-chip--ouvert   { background: color-mix(in srgb, var(--color-terracotta) 14%, transparent); color: var(--color-terracotta); }
.cfo-chip--en_cours { background: color-mix(in srgb, var(--color-amber) 16%, transparent);      color: var(--color-amber); }
.cfo-chip--fait     { background: color-mix(in srgb, var(--color-sage) 16%, transparent);       color: var(--color-sage); }

/* ── Filtres de statut (en-tête de la vue Décisions) ────────────────────────── */
.cfo-filter { display: flex; gap: 4px; }
.cfo-filter__b {
  border: 1px solid var(--ck-line); background: #fff; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--ck-muted); border-radius: var(--radius-card); padding: 3px 12px;
}
.cfo-filter__b.is-active { background: var(--ck-navy); border-color: var(--ck-navy); color: #fff; }

/* ═══ « Journal & décisions » (refonte 2026-07-23) ═══════════════════════════
   Contrôle segmenté + vue Journal (timeline mois→jour) + vue Décisions (registre).
   Typo charte : Fraunces (dates, numéros, libellés de mois), Inter (contenu). */

/* Contrôle segmenté Journal | Décisions */
.cfo-seg {
  display: inline-flex; gap: 2px; margin: 16px 0 24px;
  background: var(--color-surface-rail); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 4px;
}
.cfo-seg__b {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-muted);
  padding: 7px 22px; border-radius: 999px; transition: background .12s, color .12s;
}
.cfo-seg__b.is-active {
  background: color-mix(in srgb, var(--color-accent) 78%, black);
  color: #fff;
}

/* Bouton d'ajout fantôme (＋ Observation / ＋ Décision) */
.cfo-add-b {
  border: 1px dashed var(--color-accent-soft); background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--color-accent);
  padding: 6px 14px; border-radius: 999px; transition: border-color .12s, background .12s;
}
.cfo-add-b:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.cfo-add-b:disabled { opacity: .4; cursor: default; }

/* ── Vue Journal ─────────────────────────────────────────────────────────── */
.cfo-jrnl { display: flex; flex-direction: column; gap: 22px; }
.cfo-jmonth { display: flex; flex-direction: column; }
.cfo-jmonth__label {
  display: flex; align-items: center; gap: 16px;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: 4px;
}
.cfo-jmonth__label::after {
  content: ''; flex: 1 1; height: 0; border-top: 1px solid var(--color-border);
}
.cfo-jday {
  display: grid; grid-template-columns: 118px 1fr; grid-gap: 14px; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--color-border-inner);
}
/* 1re journée d'un mois = celle qui suit le libellé (pas :first-of-type : le
   libellé est un <div> frère, il fausserait le sélecteur). */
.cfo-jmonth__label + .cfo-jday { border-top: none; }
.cfo-jday__d {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 17px; color: var(--color-text);
}
.cfo-jday__w { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.cfo-jday__items { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Observation = puce + texte + aside (badges / → Décision / réordre / suppression) */
.cfo-jbullet { display: grid; grid-template-columns: 14px 1fr auto; grid-gap: 10px; gap: 10px; align-items: start; border-radius: 8px; }
.cfo-jbullet__dot {
  width: 8px; height: 8px; margin-top: 7px; border-radius: 50%;
  border: 1.5px solid var(--color-accent-soft); box-sizing: border-box;
}
.cfo-jbullet__dot.is-linked { background: var(--color-accent); border-color: var(--color-accent); }
.cfo-jbullet__body { min-width: 0; }
.cfo-jbullet__text {
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.45;
  color: var(--color-text); cursor: text; white-space: pre-wrap;
}
.cfo-jbullet__edit {
  width: 100%; border: none; background: none; resize: none; overflow: hidden;
  padding: 0; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px;
  line-height: 1.45; color: var(--color-field-focus); outline: none;
  box-shadow: inset 0 -1px 0 0 var(--color-field-focus);
}
.cfo-jbullet__aside { display: flex; align-items: center; gap: 6px; }
.cfo-dbadge {
  border: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--color-accent);
  color: var(--color-on-tint, var(--color-accent)); background: var(--color-accent-tint-strong);
  border-radius: 6px; padding: 2px 7px;
}
.cfo-dbadge:hover { background: var(--color-accent-soft); }
.cfo-jbullet__mk {
  border: none; background: none; cursor: pointer; font-size: 12px;
  color: var(--color-accent); opacity: 0; transition: opacity .12s; white-space: nowrap;
}
.cfo-jbullet:hover .cfo-jbullet__mk { opacity: 1; }
.cfo-jbullet__del {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s;
}
.cfo-jbullet:hover .cfo-jbullet__del { opacity: 1; }
.cfo-jbullet__del:hover { color: var(--color-terracotta); }

/* Réordonnancement d'une puce (monter / descendre), au survol de la ligne. */
.cfo-jbullet__move {
  display: inline-flex; flex-direction: column; gap: 0; opacity: 0; transition: opacity .12s;
}
.cfo-jbullet:hover .cfo-jbullet__move { opacity: 1; }
.cfo-jbullet__mv {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 8px; line-height: 1; padding: 1px 3px;
}
.cfo-jbullet__mv:hover:not(:disabled) { color: var(--color-accent); }
.cfo-jbullet__mv:disabled { opacity: .25; cursor: default; }

/* Saisie inline d'observation (jour courant) */
.cfo-jadd {
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--color-text-muted); padding: 2px 0;
}
.cfo-jadd:hover { color: var(--color-accent); }
.cfo-jadd__edit {
  width: 100%; border: none; background: none; resize: none; overflow: hidden;
  padding: 2px 0; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px;
  line-height: 1.45; color: var(--color-field-focus); outline: none;
  box-shadow: inset 0 -1px 0 0 var(--color-field-focus);
}

/* Titre de la card Journal : plus fin (allègement demandé). */
.cfo-jrnl-card .std-card__title { font-weight: 500; letter-spacing: .09em; }

/* ── Vue Décisions (registre) ────────────────────────────────────────────── */
.cfo-dreg { display: flex; flex-direction: column; }
.cfo-drow {
  display: grid; grid-template-columns: 44px 88px 128px 1fr auto; grid-gap: 12px; gap: 12px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--color-border-inner);
}
.cfo-drow:first-of-type { border-top: none; }
.cfo-drow__num {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 15px; color: var(--color-text-muted); padding-top: 2px;
}
.cfo-drow--fait { opacity: .55; }
.cfo-drow--fait .cfo-drow__text { text-decoration: line-through; }
.cfo-drow__main { min-width: 0; }
.cfo-drow__text {
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 80%, var(--color-canvas)); cursor: text; white-space: pre-wrap;
}
.cfo-drow__edit {
  width: 100%; border: none; background: none; resize: none; overflow: hidden;
  padding: 0; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px;
  line-height: 1.45; color: var(--color-field-focus); outline: none;
  box-shadow: inset 0 -1px 0 0 var(--color-field-focus);
}
.cfo-drow__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px; align-items: center; }
.cfo-drow__ech {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--color-text-muted); padding: 0;
}
.cfo-drow__ech:hover { color: var(--color-accent); }
.cfo-drow__ech.is-overdue { color: var(--color-terracotta); font-weight: 600; }
.cfo-obslink {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--color-accent); padding: 0;
}
.cfo-obslink:hover { text-decoration: underline; }
.cfo-drow__del {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s; align-self: start;
}
.cfo-drow:hover .cfo-drow__del { opacity: 1; }
.cfo-drow__del:hover { color: var(--color-terracotta); }

/* Champ responsable inline (texte libre ; vide = pastille pointillée) */
.cfo-resp {
  width: 100%; border: 1px solid transparent; background: var(--color-accent-tint); border-radius: var(--radius-card);
  font-family: inherit; font-size: 12.5px; color: var(--color-text); padding: 3px 10px; outline: none;
}
.cfo-resp:focus { border-color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); color: var(--color-field-focus); }
.cfo-resp.is-empty {
  background: none; border: 1px dashed var(--color-border); color: var(--color-text-muted);
}
.cfo-resp::placeholder { color: var(--color-text-muted); }

/* Formulaire d'ajout de décision (déplié) */
.cfo-dform { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }
.cfo-dform__texte {
  width: 100%; border: none; border-radius: var(--radius-card); background: var(--color-surface-card);
  box-shadow: inset 0 0 0 1px var(--color-border); resize: vertical; font-family: inherit;
  font-size: 13.5px; color: var(--color-text); line-height: 1.5; outline: none; padding: 8px 10px;
}
.cfo-dform__row { display: flex; align-items: center; gap: 8px; }
.cfo-dform__row .cfo-resp { width: auto; flex: 1 1 auto; }
.cfo-dform__cancel {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Surlignage éphémère de navigation croisée */
@keyframes cfoFlash {
  0% { background: var(--color-accent-tint-strong); }
  100% { background: transparent; }
}
.is-flash { animation: cfoFlash 1.2s ease-out; }

/* Panneau « Modifier le cockpit » : choix des onglets visibles (self-service). */
.ckpit-config {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 12px 14px;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.ckpit-config__lbl {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .06em; color: var(--color-text-muted); text-transform: uppercase;
}
.ckpit-config__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ckpit-config__item {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 12px;
  transition: color .12s, border-color .12s, background .12s;
}
.ckpit-config__item.is-on { color: var(--color-accent); border-color: var(--color-accent-soft); background: var(--color-accent-tint); }
.ckpit-config__item input { accent-color: var(--color-accent); }


/* LA CONNEXION AU-DESSUS DE SA CARTE (2026-09-18) : à gauche, dans la gouttière
   du contenu, à la hauteur où l'on pose les commandes de ce qu'on lit. */
.prev-conn { display: flex; align-items: flex-end; gap: 14px; margin: 12px 0 10px; }

/* MÊME COSTUME QUE LA RANGÉE DE PAGE (2026-09-18) : le libellé se pose
   AU-DESSUS de sa commande, et la rangée s'aligne en bas pour qu'une commande
   sans libellé reste sur la ligne des boutons. */
.prev-conn .lk-seg, .prev-cs { flex-direction: column; align-items: flex-start; gap: 4px; }

/* LE TAUX DE CHARGES SOCIALES, à côté de la connexion : même costume que les
   libellés de commande, et un champ court — c'est un pourcentage, pas un
   montant. */
.prev-cs { display: inline-flex; }
.prev-cs__row { display: inline-flex; align-items: center; gap: 6px; }
.prev-cs__l { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.prev-cs__in {
  width: 54px; padding: 4px 6px; text-align: right;
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  color: var(--color-field-focus);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 6px;
}
.prev-cs__in:focus { outline: none; border-color: var(--color-accent); }
.prev-cs__u { font-size: 12px; color: var(--color-text-muted); }

/* La rangée porte maintenant des étapes ET des commandes : elle respire, et
   se replie plutôt que de pousser la dernière hors de l'écran. */
.prev-conn { flex-wrap: wrap; row-gap: 8px; }

/* Les commandes de source se tiennent à DROITE de la rangée, les étapes à
   gauche : deux natures, deux bouts. Sur un écran étroit elles passent dessous
   plutôt que de comprimer les étapes. */
.prev-conn__right { display: inline-flex; align-items: flex-end; gap: 14px; margin-left: auto; flex-wrap: wrap; }

/* 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: var(--radius-card);
  box-shadow: 0 1px 3px rgba(43, 32, 62, 0.05);
  overflow: hidden;
}

.cp-layout .page-table {
  border-radius: var(--radius-card);
  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: var(--radius-card);
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: 0.2px;
}
.cp-type-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cp-type-toggle--overhead {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  font-weight: 600;
}

.cp-protected-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Pools protégés (Direction, Administration) : fond grisé = figés, en tête de table. */
.cp-row--protected td {
  background: #F5F5F4;
}

/* ── Allocation Driver column ──────────────────────────────────────────────── */

.cp-driver-cell {
  white-space: nowrap;
}

.cp-driver-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #3D5A80;
  background: #EEF3FA;
  border: 1px solid #C3D4E8;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 200px;
}
.cp-driver-select:focus { outline: none; border-color: #3D5A80; }

.cp-driver-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.cp-driver-na {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.cp-driver-note {
  display: block;
  font-size: 11px;
  color: var(--color-primary);
  margin-top: 2px;
  font-style: italic;
}

/* Charte : une valeur À SAISIR s'écrit en bleu, SANS cadre (le soulignement
   n'apparaît qu'au focus). Le nom du groupe et son type se modifient : ils
   portent donc le bleu, là où l'inducteur et le cadenas restent du texte. */
.cp-layout .page-table tbody .p-cell-text { color: var(--color-field-focus); }
.cp-layout .page-table tbody .p-cell-text:hover {
  background: var(--color-accent-tint);
  color: var(--color-field-focus);
}
.cp-type-toggle { color: var(--color-field-focus); border-color: var(--color-border); }
.cp-type-toggle:hover { border-color: var(--color-field-focus); color: var(--color-field-focus); }
.cp-type-toggle--overhead {
  background: color-mix(in srgb, var(--color-field-focus) 10%, transparent);
  color: var(--color-field-focus);
  border-color: color-mix(in srgb, var(--color-field-focus) 30%, transparent);
}

/* Largeur capée (4 colonnes) + centrée → marges équilibrées, plus d'air en haut. */
.pp-layout { max-width: 1040px; padding-top: 52px; }

/* Embarqué dans le hub Input Analytics : aligné à gauche pleine largeur, comme
   les pages People standard (ex. Détail des coûts) — pas de cap ni de centrage,
   le hub gère déjà le titre et les marges horizontales. */
.pp-layout--embedded {
  max-width: 100%;
  padding: 0;
}
/* Dans le hub Paramétrage : card pleine largeur (alignée sur Groupes ressources). */
.pp-layout--embedded .pp-card { width: 100%; }

/* ── En-tête aéré, aligné sur les pages Costing (hr-page) — titre + sous-titre ── */
.pp-layout .page-table-header {
  align-items: flex-end;
  margin-bottom: 14px;
}
.pp-header-left {
  display: flex;
  flex-direction: column;
}
.pp-layout .page-table-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--color-text);
}
.pp-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  max-width: 720px;
  line-height: 1.55;
}

/* ── Sticky first two columns (Name + Cost pool) ───────────────────────────── */
.pp-th-sticky,
.pp-td-sticky {
  position: sticky;
  z-index: 2;
  /* background is inherited from the row — overridden per variant below */
}

/* Col 1 — Name */
.pp-th-sticky-1,
.pp-td-sticky-1 {
  left: 0;
  min-width: 160px;
}

/* Col 2 — Cost pool : left offset = min-width of col 1 */
.pp-th-sticky-2,
.pp-td-sticky-2 {
  left: 160px;
  min-width: 148px;
  /* thin shadow to signal the freeze boundary */
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
}

/* Solid backgrounds so scrolled content doesn't bleed through */
thead .pp-th-sticky    { background: var(--color-surface-card); z-index: 3; }
.pp-bulk-row .pp-th-sticky { background: #F4F4F0; z-index: 3; }
tbody tr .pp-td-sticky { background: #fff; }
tbody tr:hover .pp-td-sticky { background: #F9FAFB; }
tbody .pp-row--unassigned .pp-td-sticky { background: #FEF2F2; }
tbody .pp-row--unassigned:hover .pp-td-sticky { background: #FEE2E2; }
tfoot .pp-td-sticky    { background: #F4F4F0; }

/* ── Cost pool filter bar ──────────────────────────────────────────────────── */
.pp-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #FAFAF9;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.pp-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.pp-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Base tag */
.pp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}
.pp-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Active tag */
.pp-tag--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.pp-tag--active:hover {
  background: #433aab;
  border-color: #433aab;
  color: #fff;
}

/* Overhead pool variant */
.pp-tag--overhead {
  border-style: dashed;
}
.pp-tag--overhead.pp-tag--active {
  border-style: solid;
}

/* Count badge inside tag */
.pp-tag-count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
  background: rgba(0,0,0,0.08);
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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: var(--radius-card);
  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; }

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

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

/* Le toggle Actifs / Tous porte désormais la bascule segmentée standard
   (components/SegmentedToggle.js, classes .lk-seg*) : son costume vit dans
   styles/designSystem.css, plus ici. */

/* Le COSTUME du champ et du sélecteur vit dans styles/designSystem.css
   (`.lk-filter-input` / `.lk-filter-select`, format standard des filtres,
   2026-08-27) : ces deux classes ne gardent que leur particularité de mise
   en page. Elles restent posées sur les éléments parce que d'autres écrans
   s'y accrochent (PlanningTimeline). */
.pfb-search { min-width: 200px; }

/* ── 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: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card);
  padding: 2px 8px;
  margin-left: 6px;
}

/* ── Cost driver picker (cartouche grisée avec 3 lignes de toggles) ─────── */
.ca-cascade-drivers {
  background: #F4F1EA;
  border-radius: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card);
}
.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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ca-alloc-toggle:hover {
  border-color: var(--color-primary);
  border-color: var(--ca-accent);
  color: var(--color-primary);
  color: var(--ca-accent);
  background: #fff;
}
/* Tous les modes : même styling, le label suffit à distinguer */
.ca-alloc-toggle--within,
.ca-alloc-toggle--shared,
.ca-alloc-toggle--billed {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.ca-alloc-toggle-swap {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 2px;
}

/* Indem mirror — déjà OK (muted italic) */
.ca-alloc-mirror {
  color: var(--color-text-muted);
}

/* Cellules à saisir (charte) : texte bleu --color-field-focus, SANS cadre ;
   soulignement discret au survol, appuyé au focus. */
.ca-cell-editable {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: text;
  color: var(--color-field-focus);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}
.ca-cell-editable:hover {
  border-bottom-color: color-mix(in srgb, var(--color-field-focus) 40%, transparent);
}
.ca-cell-editable--empty {
  color: color-mix(in srgb, var(--color-field-focus) 55%, var(--color-text-muted));
  font-weight: 500;
}
.ca-cell-input {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-field-focus);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-field-focus);
  border-radius: 0;
  padding: 3px 6px;
  outline: none;
  width: 100%;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ca-cell-input:focus { border-bottom-width: 2px; }

/* Charge indirecte hypothétique : cette saisie vit dans une CARD, pas dans une
   cellule de table. `.ca-cell-input` fait 100 % de son conteneur — parfait
   dans un <td>, désastreux ici : dans une card `fit-content` à ligne
   flexible, l'input réclamait toute la largeur disponible, la card s'étirait
   et le libellé passait à la ligne. La valeur affichée et le champ partagent
   donc la MÊME boîte : la bascule lecture/saisie ne déplace plus rien. */
.ca-param-row--cost { flex-wrap: nowrap; }
.ca-param-row--cost .ca-cell-editable,
.ca-param-row--cost .ca-cell-input {
  flex: 0 0 auto;
  width: 10ch;
  box-sizing: content-box;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Negative row (indemnities) — couleur rouge discrète */
.ca-cascade-pivot tr.ca-cpv-neg td:not(.ca-cpv-label):not(.ca-cpv-driver) {
  color: #B0463A;
  color: var(--ca-neg);
}

/* Driver column borders */
.ca-cascade-pivot td.ca-cpv-driver {
  border-left: 1px solid #F1EDE3;
  text-align: center;
}

/* ── 3 blocs séparés (Key Drivers / Personnel / Externes) ────────────── */
.ca-cascade-block {
  margin: 0 0 10px;     /* rapprochés (anciennement 32px) */
  display: flex;
  flex-direction: column;
}
.ca-cascade-block:last-of-type { margin-bottom: 0; }

.ca-cascade-block-title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  box-shadow: 0 1px 3px rgba(43, 32, 62, .05);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.tcp-tit {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-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;
}
/* Structure STANDARD de table (2026-09-01) : plus de cadre interne — la card
   porte le cadre, la table est à fleur ; en-tête sur `--color-surface-th`,
   surlignages en famille ardoise, ligne de total `--color-accent-tint-strong`.
   Les bruns et l'alternance de lignes étaient hors charte. */
.tcp-ptable-wrap {
  overflow-x: auto;
  /* Respiration entre l'entête de la carte et les entêtes de colonnes. */
  margin-top: 12px;
}
.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;
}
/* La gouttière de la card devient le padding des colonnes de bord : le
   tableau EST le corps de la carte, ses filets vont bord à bord (annexe du
   proto, 2026-09-01). */
.tcp-ptable th:first-child, .tcp-ptable td:first-child { padding-left: 22px; }
.tcp-ptable th:last-child, .tcp-ptable td:last-child { padding-right: 22px; }
/* Colonne TRIÉE : teinte ardoise-soft sur toute la hauteur, thead compris. */
.tcp-ptable thead th.is-sorted,
.tcp-ptable tbody td.is-sortedcol { background: var(--color-accent-tint); }
/* 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: var(--color-surface-th);
  border-bottom: 1px solid var(--color-border);
  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); }
.tcp-ptable tbody tr:hover td { background: var(--color-surface-rail); }
/* Colonne phare CCR — famille ardoise, la seule à surligner une table. */
.tcp-ptable .tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-ptable tbody tr:hover .tcp-col-ccr { background: var(--color-accent-tint-strong); }
.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/Moyenne — le surlignage fort de la charte. */
.tcp-ptable tfoot td {
  border-top: 2px solid var(--color-navy); border-bottom: none;
  font-weight: 600; background: var(--color-accent-tint-strong); color: var(--color-navy);
}
.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: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Couleurs de segments (et swatches de légende) */
/* Décomposition du CCR (charte) : personnel en famille ardoise (direct foncé /
   indirect clair), frais généraux en amber (nature différente). */
.tcp-direct  { background: var(--color-accent); }
.tcp-indpers { background: var(--color-accent-soft); }
.tcp-ovh     { background: var(--color-amber); }
/* Ardoise clair = fond pâle → texte foncé pour le contraste. */
.tcp-seg.tcp-indpers { color: var(--color-navy); }
.tcp-bill    { background: #7C9A53; }
.tcp-nonbill { background: #E0B85C; }
.tcp-idle    { background: #C2543C; }

/* ─── Format card unifié — essai sur Capacity Costing ──────────────────────
   En-tête bleu-gris pleine largeur dans la card, KPI à plat (grille). */
.tcp-card { overflow: hidden; }

.tcp-card > .tcp-tit,
.tcp-card > .tcp-ptable-head {
  margin: -18px -22px 16px;
  padding: 12px 22px;
  background: var(--color-surface-card);                 /* bleu-gris calme harmonisé */
  border-bottom: 1px solid var(--color-border);
}
.tcp-card > .tcp-tit { font-size: 14px; color: var(--color-navy); }
.tcp-card > .tcp-tit small { color: var(--color-text-muted); font-weight: 500; }

/* En-tête du coût horaire, en GRILLE (2026-08-26).

   Trois blocs, deux rangées. À gauche le titre, puis la bascule Par groupe /
   Par personne sous lui ; à droite, sur la ligne du titre, les filtres tenus
   en UNE ligne.

   Ce qui a été corrigé au passage : la glose de l'unité se lisait comme une
   suite du titre, elle passe dessous ; la bascule était poussée au bord droit,
   à l'autre bout de l'écran, elle revient à gauche sous le titre ; et les
   filtres, un moment descendus avec elle, remontent à hauteur du titre, où
   l'on cherche un filtre.

   Sous 1000 px, la colonne des filtres n'a plus la place de tenir sa ligne :
   tout repasse en une seule colonne. */
.tcp-card > .tcp-ptable-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  grid-column-gap: 18px;
  column-gap: 18px; grid-row-gap: 10px; row-gap: 10px;
}
.tcp-card > .tcp-ptable-head > .tcp-tit {
  grid-column: 1; grid-row: 1;
  margin: 0; padding: 0; background: transparent; border: none;
}
.tcp-card > .tcp-ptable-head > .tcp-tit small {
  display: block; margin-top: 3px;
}
.tcp-card > .tcp-ptable-head > .tcp-viewsw {
  grid-column: 1; grid-row: 2; justify-self: start;
}
.tcp-ptable-head__filters {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.tcp-card > .tcp-ptable-head .tcp-ptable-filter { margin: 0; }
@media (max-width: 1000px) {
  .tcp-card > .tcp-ptable-head { grid-template-columns: 1fr; }
  .tcp-card > .tcp-ptable-head > .tcp-viewsw { grid-row: auto; }
  .tcp-ptable-head__filters { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* KPI à plat dans la card (plus de tuiles à ombre) */
.tcp-card > .ca-dist__kpis {
  grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-bottom: 0;
}
.tcp-card .ca-dist__kpi {
  background: transparent; border: none; box-shadow: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0; padding: 4px 18px;
}
.tcp-card .ca-dist__kpi:first-child { border-left: none; padding-left: 0; }

/* Table dans une card : en-tête de colonnes en texte simple (fond blanc =
   même que la card) → pas de 2e bande, l'en-tête de card reste la seule. */
.tcp-card .tcp-ptable thead th { background: #fff; }

/* Harmonisation bleu (colonne CCR + ligne total) — un seul bleu, dégradé léger.
   Corrige aussi l'en-tête CCR (qui était repassé blanc par la règle ci-dessus). */
.tcp-card .tcp-ptable .tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-card .tcp-ptable tbody tr:hover .tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-card .tcp-ptable thead th.tcp-col-ccr { background: var(--color-accent-tint); }
.tcp-card .tcp-ptable tfoot td { background: var(--color-accent-tint-strong); border-top-color: var(--color-border); }
.tcp-card .tcp-ptable tfoot td.tcp-col-ccr { background: var(--color-accent-tint-strong); }

/* ── Card unique de paramétrage (Indirect assignment) ───────────────────────
   Charge indirecte hypothétique + inducteurs de coûts dans une seule card. */
.ca-param-card {
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 21px; 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); }
/* Équation du CCR (2026-09-01) : 6 tuiles reliées par leurs opérateurs. */
.tcp-synth-tiles--eq {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
}
.tcp-eq__op {
  align-self: center; font-size: 15px; font-weight: 600;
  color: var(--color-text-muted); padding: 0 1px;
}
/* Tuiles version proto (2026-09-01) : la valeur en Fraunces, le taux horaire
   en ardoise dessous, et pour les deux tuiles indirectes un pied « Voir la
   cascade » sous un filet traitillé. La tuile ouverte se teinte et pointe le
   panneau d'un caret. */
.tcp-tile--pick { position: relative; }
.tcp-tile--pick.is-open {
  border: 1px solid var(--color-accent);
  background: var(--color-accent-tint);
}
.tcp-tile--pick.is-open::after {
  content: ''; position: absolute; left: 50%; bottom: -7px;
  width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-accent);
}
.tcp-tile__rate {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 19px; font-weight: 600; color: var(--color-accent);
  line-height: 1.15; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tcp-tile__rate small { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
.tcp-tile__foot {
  margin-top: 6px; padding: 6px 0 0;
  border: none; border-top: 1px dashed var(--color-border);
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--color-text);
  display: flex; justify-content: space-between; align-items: center;
}
.tcp-tile__foot:hover { color: var(--color-accent); }
.tcp-panel__body { padding: 4px 16px 12px; }
.tcp-tile--result { background: var(--color-accent-tint-strong); border-color: var(--color-accent-soft); }


/* Contrôle du coût horaire : les deux chemins vers le coût total. Liseré sauge
   quand ils coïncident au franc, terracotta sinon — un contrôle existe pour
   montrer l'écart, pas pour le taire. */
.tcp-check {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  margin: 12px 16px 4px; padding: 9px 14px;
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-page); border-radius: 0 6px 6px 0;
  font-size: 12.5px; color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tcp-check b { color: var(--color-text); font-weight: 600; margin-left: 5px; }
.tcp-check.is-ok  { border-left-color: var(--color-sage); }
.tcp-check.is-off { border-left-color: var(--color-terracotta); }
.tcp-check__gap { margin-left: auto; font-weight: 600; color: var(--color-text); }
.tcp-check.is-ok  .tcp-check__gap b { color: var(--color-sage); }
.tcp-check.is-off .tcp-check__gap b { color: var(--color-terracotta); font-weight: 700; }

/* Bascule de lecture d'une même card : par groupe, ou par personne. Costume
   porté par la bascule segmentée standard (.lk-seg, designSystem.css) depuis
   le 2026-08-26 ; il ne reste ici que son placement dans l'en-tête en grille. */

/* Charge indirecte : plus une saisie mais un TOTAL (2026-08-30), celui de la
   section « Charges indirectes ». Un lien y mène ; le chiffre se lit en navy,
   pas en bleu de saisie, parce qu'on ne le tape plus ici. */
.ca-param-static {
  flex: 0 0 auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--color-navy);
}
.ca-param-link {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px;
  color: var(--color-accent);
  padding: 2px 0;
}
.ca-param-link:hover { text-decoration: underline; }

/* ── 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: var(--radius-card);
  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: var(--radius-card);
  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;
}

/* Conseil de découpage — même famille visuelle que .ca-rule-card (le bloc de
   règles des onglets d'affectation) : pas une nouveauté graphique, la même
   voix. Ardoise uniquement, conformément à la charte.

   Grossi le 2026-08-22 : ces trois tests sont ce qu'on vient LIRE quand on ne
   sait pas comment découper. En 12 px sous un intertitre, ils passaient pour
   une note de bas de page ; ils portent maintenant leur propre card. */
.pool-advice { padding: 2px 0 4px; }
.pool-advice__title { display: none; }
.pool-advice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
}
@media (max-width: 860px) { .pool-advice__grid { grid-template-columns: 1fr; } }
.pool-advice__card {
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-strong);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.pool-advice__card b {
  display: block;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: 7px;
}
.pool-advice__card span {
  display: block;
  font-size: 13.5px; line-height: 1.55;
  color: var(--color-text);
}
.pool-advice__src {
  margin: 14px 0 0;
  font-size: 12px; line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 88ch;
}

/* Card dépliable à icône — gabarit charte : corps blanc arrondi, en-tête blanc
   à filet bas, aucune bande colorée. */
.fcard-stack { display: flex; flex-direction: column; gap: 14px; }

.fcard {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.fcard.is-open { box-shadow: 0 1px 2px rgba(26, 18, 25, .04); }

.fcard__head { display: flex; align-items: center; gap: 10px; }
.fcard__toggle {
  display: flex; align-items: center; gap: 12px; flex: 1 1; min-width: 0;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit;
}
.fcard__icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-tint); color: var(--color-accent);
}
.fcard.is-open .fcard__icon { background: var(--color-accent); color: #fff; }
.fcard__titles { display: flex; flex-direction: column; gap: 1px; flex: 1 1; min-width: 0; }
.fcard__title { font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 16px; color: var(--color-navy); }
.fcard__sub { font-size: 12px; color: var(--color-text-muted); }
.fcard__chev { flex: 0 0 auto; color: var(--color-text-muted); font-size: 13px; }
.fcard__actions { flex: 0 0 auto; padding-right: 14px; }
.fcard__body { padding: 4px 16px 18px; border-top: 1px solid var(--color-border-inner); }

/* Charges indirectes — saisie ligne à ligne.
   La card ne prend pas toute la page : deux colonnes, une désignation et un
   montant, n'ont pas besoin d'un mètre de blanc entre elles (2026-08-30). */
/* La matrice reprend toute la largeur : une colonne par groupe ressources
   (2026-08-30). Elle a tenu 720 px le temps de n'avoir que deux colonnes. */
.ic-table th:first-child, .ic-table td:first-child { min-width: 200px; }
.ic-th-pool { min-width: 96px; font-size: 10.5px; }

.ic-input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--color-field-focus);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.ic-input:focus {
  outline: none;
  border-bottom-color: var(--color-field-focus);
}
.ic-input--num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ic-th-act, .ic-td-act { width: 40px; text-align: right; }
/* La croix DÉFAIT : c'est le seul terracotta admis, et seulement au survol de
   sa ligne — au repos elle ne réclame rien. */
.ic-del {
  border: none; background: transparent; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px;
  color: transparent;
}
.ic-table tbody tr:hover .ic-del { color: var(--color-text-muted); }
.ic-del:hover { color: var(--color-terracotta); }

/* Découpage supérieur au total : le solde passe en terracotta — c'est une
   incohérence de saisie, donc une alerte, le seul cas qui l'autorise ici. */
.ic-over { color: var(--color-terracotta); }

/* 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: var(--radius-card);
  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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card); 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: var(--radius-card); 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: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  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: var(--radius-card); 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: "Schibsted Grotesk", Inter, system-ui, sans-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: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-style: italic;
  font-size: 13px;
  color: var(--color-navy);
  margin: 0 0 10px 0;
}
.tres-section-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 16px 0;
}

/* ── Sous-pages Cash : titre masqué (= libellé d'onglet), note explicative
   encadrée avec icône, données remontées au plus près des onglets. ───────── */
.treasury__content { padding-top: 12px; }
.treasury__content .tres-section-title,
.treasury__content .page-header__title { display: none; }

.treasury__content .tres-section-subtitle {
  position: relative;
  background: var(--color-accent-tint);
  background: var(--color-highlight, var(--color-accent-tint));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  margin: 0 0 12px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.treasury__content .tres-section-subtitle::before {
  content: "i";
  position: absolute;
  left: 11px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-navy);
  border-radius: 50%;
  color: var(--color-navy);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
}
.treasury__content .tres-section-motto { margin: 0 0 8px 0; }
/* En-tête de page embarquée (Salaires) : on resserre au-dessus de la note. */
.treasury__content .page-header { margin-bottom: 0; padding-top: 0; }

/* ── Tableaux édition (Revenus/Achats) ─────────────────────────────────── */
.tres-edit-table input,
.tres-edit-table select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  background: #FBF7EF;
  font-size: 12px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-input);
  font-family: inherit;
  border-radius: 4px;
}
.tres-edit-table input::placeholder { color: #B0A89C; }
.tres-edit-table select {
  min-width: 56px;
  text-align: left;
  cursor: pointer;
}
.tres-edit-table input:hover,
.tres-edit-table select:hover {
  background: #F7EFE0;
}
.tres-edit-table input:focus,
.tres-edit-table select:focus {
  border-color: var(--color-input);
  outline: none;
  background: var(--color-accent-tint);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.tres-edit-table input[type="text"]:not([inputmode]) {
  text-align: left;
  color: var(--color-text);
}
.tres-edit-table input[type="checkbox"] {
  width: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.tres-edit-table input:disabled,
.tres-edit-table select:disabled {
  background: #F0EDE6;
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.tres-edit-table .col-actions {
  text-align: center;
}
.tres-edit-table .col-actions button {
  background: none;
  border: none;
  color: var(--color-terracotta);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

.tres-add-row {
  margin-top: 12px;
  padding: 8px 14px;
  background: white;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-muted);
}
.tres-add-row:hover {
  background: var(--color-highlight);
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* ── ActionBar (Settings + Period selectors LEFT / Export-Import-Reset RIGHT) */
.tres-actionbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.tres-actionbar__left,
.tres-actionbar__right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tres-actionbar__select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-navy);
}
.tres-actionbar__select select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-input);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.tres-actionbar__select select:hover:not(:disabled) {
  border-color: var(--color-navy);
}
.tres-actionbar__select select:focus {
  outline: none;
  border-color: var(--color-input);
  background: var(--color-input-bg);
}

/* ── Chips mois (J F M A M J J A S O N D) ──────────────────────────────── */
.tres-chips {
  display: inline-flex;
  gap: 2px;
  flex-wrap: nowrap;
  align-items: center;
}
.tres-chip {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: white;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tres-chip:hover { background: var(--color-highlight); }
.tres-chip--active {
  background: var(--color-amber);
  color: white;
  border-color: var(--color-amber);
}
.tres-chip--tous {
  width: auto;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.tres-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Table charges indirectes : colonnes alignées + footer total ──────── */
.tres-indirect-table .col-pos     { width: 52px; text-align: center; }
.tres-indirect-table .col-pos input {
  width: 3em;
  text-align: center;
  padding: 2px 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.tres-indirect-table .col-label   { width: 30%; }
.tres-indirect-table .col-amount  { width: 110px; }
.tres-indirect-table .col-mode    { width: 80px; }
.tres-indirect-table .col-vat     { width: 70px;  text-align: center; }
.tres-indirect-table .col-months  { width: auto; white-space: nowrap; }
.tres-indirect-table .col-occ     { width: 90px;  text-align: right; }
.tres-indirect-table .col-total   { width: 100px; text-align: right; }
.tres-indirect-table .col-actions { width: 32px; text-align: center; }

.tres-indirect-table thead th { text-align: left; }
.tres-indirect-table thead th.col-amount,
.tres-indirect-table thead th.col-occ,
.tres-indirect-table thead th.col-total { text-align: right; }
.tres-indirect-table thead th.col-vat,
.tres-indirect-table thead th.col-actions { text-align: center; }

.tres-indirect-table tbody td { padding: 6px 8px; }
.tres-indirect-table tbody td input[type="text"] { padding: 4px 8px; }
.tres-num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--color-text);
}
.tres-total-cell {
  color: var(--color-terracotta);
  font-weight: 600;
}
.tres-indirect-footer {
  background: #EDE8DF;
  border-top: 2px solid var(--color-navy);
}
.tres-indirect-footer td {
  padding: 10px 8px;
  font-size: 13px;
}

/* ── SettingsModal supprimée (2026-06-17) : régime TVA déplacé dans Settings.
   Blocs CSS .tres-modal et .tres-form-grid retirés (plus aucun consommateur). ── */

/* Hub « Set up » — sous-onglets (postes d'ouverture / phasing charges sociales) */
.tres-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
/* Barre d'onglets principale en haut de la page « 12M Cash forecast ». */
.tres-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
  border-bottom: 1px solid var(--color-border);
}
.tres-tab {
  border: none;
  background: none;
  padding: 10px 16px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tres-tab:hover { color: var(--color-navy); }
.tres-tab.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.tres-subtab {
  border: none;
  background: none;
  padding: 8px 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tres-subtab:hover { color: var(--color-navy); }
.tres-subtab.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
  font-weight: 500;
}

/* Card blanche autour du tableau des charges indirectes (Point de départ). */
.tres-indirect-card {
  background: #fff;
  border: 1px solid #E7E5E4;
  border: 1px solid var(--color-border, #E7E5E4);
  border-radius: 8px;
  border-radius: var(--radius, 8px);
  padding: 8px 12px;
  overflow-x: auto;
}

/* Charges personnel — échéancier des charges sociales, replié derrière un bouton. */
.tres-personnel-tab { display: flex; flex-direction: column; gap: 16px; }
.tres-echeancier { border-top: 1px solid var(--color-border); padding-top: 12px; }
.tres-echeancier__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-navy); cursor: pointer;
}
.tres-echeancier__toggle:hover { border-color: var(--color-accent); }

/* Module Ventes — styles propres (tokens charte uniquement). */

/* Les pages Ventes réutilisent la classe `treasury` (erreurs/placeholders) mais
   PAS son scroll d'onglets (`.treasury .tabs__list { overflow-x:auto }`), qui
   force overflow-y:auto et crée un ascenseur vertical parasite dans la barre
   d'onglets (peu d'onglets ici, pas besoin de scroll). */
.treasury.sales-shell .tabs__list { overflow: visible; }

/* Synthèse : le graphe occupe une demi-page (l'autre moitié accueillera la suite
   de la synthèse). Repli pleine largeur sous 900px. */
.sales-synth { display: flex; gap: 24px; flex-wrap: wrap; }
.sales-synth__half { width: 50%; min-width: 420px; flex: 0 1 50%; }
@media (max-width: 900px) {
  .sales-synth__half { width: 100%; min-width: 0; flex-basis: 100%; }
}

.sales-synth__chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sales-synth__chart-title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-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; }

/* défilement : voir .lk-hscroll (standard, designSystem.css) */
.sales-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.sales-table th, .sales-table td {
  padding: 8px 10px; border-bottom: 0.5px solid var(--color-border);
  text-align: right;
}
.sales-table th {
  background: var(--color-surface-card); color: var(--color-navy);
  font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.5px;
}
.sales-table-head { border-bottom: 1px solid var(--color-border); }

.sales-col-label {
  text-align: left !important; /* Force left alignment for designation column */
}
/* Tables calculées (12M glissants, Saisonnalité) : valeurs = texte standard,
   pas le bleu réservé aux cellules éditables. */
.sales-col-num { color: var(--color-text); font-family: "Inter", system-ui, sans-serif; }
.sales-col-small { font-size: 12px; }
.sales-col-total {
  background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy);
}

.sales-table-row:hover { background: rgba(250, 243, 234, 0.5); }
.sales-table-total td {
  background: var(--color-accent-tint-strong); border-top: 1px solid var(--color-border);
  font-weight: 600; color: var(--color-navy);
}
.sales-table-total td.sales-col-label { text-align: left; }

.sales-table--compact .sales-col-num { font-size: 11px; padding: 6px 8px; }

/* Sélecteur années (Saisonnalité) — dans le header. */
.sales-seasonality-selector {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.sales-seasonality-label { font-size: 12px; font-weight: 600; color: var(--color-navy); }
.sales-seasonality-year-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-text); cursor: pointer;
}
.sales-seasonality-year-check input { margin: 0; cursor: pointer; }
.sales-seasonality-year-check input:disabled { cursor: not-allowed; opacity: 0.5; }

/* Table saisonnalité — années × mois, avec calculs transparents. */
.sales-seasonality-table { width: 100%; border-collapse: collapse; }
.sales-seasonality-table th, .sales-seasonality-table td {
  padding: 6px 6px; text-align: right; font-size: 11px;
  border-bottom: 0.5px solid var(--color-border);
}
.sales-seasonality-table .sales-col-label { text-align: left; font-weight: 500; min-width: 140px; }
.sales-seasonality-table .sales-col-small { padding: 5px 4px; }
.sales-seasonality-table .sales-col-total {
  background: var(--color-accent-tint); font-weight: 600; color: var(--color-navy);
  border-left: 1px solid var(--color-border);
}

/* Groupes d'années (headers) */
.sales-seasonality-year-row th {
  background: var(--color-surface-card); color: var(--color-navy);
  font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.5px; border-right: 2px solid #fff;
  padding: 8px 4px;
}
.sales-seasonality-year-header {
  border-right: 2px solid #fff !important;
}

/* Séparation avant les calculs (card blanche) */
.sales-seasonality-sep td { height: 8px; border: none; background: transparent; }

/* Lignes de calcul (moyenne, %, indice) — surlignage ardoise clair (charte). */
.sales-seasonality-calc-row td {
  background: var(--color-accent-tint); color: var(--color-navy); font-weight: 500;
}
.sales-seasonality-calc-row .sales-col-total {
  background: var(--color-accent-tint-strong);
}

/* Note méthodologie — sur le fond de page, hors card (pas d'encadré). */
.sales-seasonality-note {
  padding: 12px 4px; font-size: 12px; color: var(--color-text-muted);
  margin-top: 12px; line-height: 1.5;
}

/* Proto « Atterrissage » — charte Palestre (tokens :root). Cellules éditables :
   texte bleu --color-field-focus sans cadre ; réel/prévu séparés par un filet
   (pas de fond coloré) ; totaux navy. */

.atl-toolbar { margin: 0 0 14px; }
.atl-seg { display: inline-flex; border: 1px solid var(--color-border); border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: 8px; overflow: hidden; }
.atl-seg button { font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border: none;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer; border-left: 1px solid var(--color-border); }
.atl-seg button:first-child { border-left: none; }
.atl-seg button.on { background: var(--color-accent); color: #fff; }

/* défilement : voir .lk-hscroll (standard, designSystem.css) */

/* Largeur naturelle (pas de min-width:100%) → table resserrée, alignée à gauche. */
.atl-table { border-collapse: collapse; font-size: 12.5px; }
.atl-table th, .atl-table td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.atl-table th { color: var(--color-text-muted); font-weight: 500; font-size: 11.5px; border-bottom: 1px solid var(--color-border); }
.atl-table th.l, .atl-table td.l { padding-left: 2px; }
.atl-table th.l, .atl-table td.l { text-align: left; }
.atl-sub { font-size: 10px; font-weight: 400; }

/* En-tête de groupe réel / prévisionnel (centré, atténué). */
.atl-headgroup th { border-bottom: none; padding-bottom: 2px; }
.atl-table th.atl-grp { text-align: center; font-weight: 400; color: var(--color-text-muted); }

/* Filets de séparation (réel | prévu, et autour des colonnes de total). */
.atl-filet-l { border-left: 2px solid var(--color-border); border-left: 2px solid var(--color-border-strong, var(--color-border)); }
.atl-filet-r { border-right: 2px solid var(--color-border); border-right: 2px solid var(--color-border-strong, var(--color-border)); }
/* Colonne compta (Réalisé) : fond gris très clair = réel, lecture seule. */
.atl-table .atl-filet-r { background: color-mix(in srgb, var(--color-text-muted) 6%, transparent); }

/* Valeur calculée (non éditable) : navy discret, aligné à droite. */
.atl-num { color: var(--color-navy); }

/* Ligne total. */
.atl-tot td { font-weight: 700; color: var(--color-navy); border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface-card); }

/* Cellule éditable : bleu, sans cadre (soulignement discret au focus). */
.atl-in { width: 52px; font-family: inherit; font-size: 12.5px; text-align: right; color: var(--color-field-focus);
  border: none; background: transparent; padding: 2px 0; }
.atl-in--text { width: 130px; text-align: left; color: var(--color-text); }
.atl-in--muted { color: var(--color-text-muted); }
.atl-in:focus { outline: none; box-shadow: inset 0 -1px 0 0 var(--color-field-focus); }

/* Icône grouper/dégrouper (+/−) en tête de nom, largeur fixe → noms alignés. */
.atl-tgl { display: inline-block; width: 27px; text-align: left; vertical-align: top; flex: 0 0 auto; }
/* Icône ＋/− encerclée (pastille tuile, comme les numéros d'étape du plan). */
/* FERMÉ (+) : plein accent, signe blanc — l'affordance se voit ; OUVERT (−) :
   tint clair discret. */
/* Fond clair dans les DEUX états (ouvert comme fermé) — demande 2026-08-16. */
.atl-tgl-btn { border: none; background: var(--color-accent-tint-strong); color: var(--color-accent); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.atl-tgl-btn.is-open { background: var(--color-accent-tint-strong); color: var(--color-accent); }
.atl-tgl-btn:hover { background: var(--color-navy); color: #fff; }
/* inline-block → les blocs enfants (compte rattaché, prix) s'alignent à gauche
   SOUS le libellé, pas au bord de la cellule. Largeur bornée pour que le slot
   d'action (✎ / ＋−) reste SUR LA MÊME LIGNE que le libellé. */
.atl-nm { display: inline-block; vertical-align: top; }
.atl-table--fixed td.l .atl-nm { width: calc(100% - 27px); }
/* Méta en bloc sous le libellé (cards Variables / Inducteurs). */
.atl-linkline--block { display: block; margin-left: 0; }
.atl-linename { font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.atl-count { font-size: 10px; color: var(--color-text-muted); background: var(--color-accent-tint); border-radius: 9px; padding: 1px 6px; margin-left: 6px; }
/* Numéro de ligne de revenus (référence compacte ; nom complet au survol). */
.atl-lineno { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; background: var(--color-accent-tint); color: var(--color-accent);
  font-size: 10px; font-weight: 700; margin-right: 6px; vertical-align: 1px; cursor: default; }
.atl-line td.atl-num { font-weight: 600; }

/* Sous-ligne détail : nom indenté sous le libellé de ligne. */
/* Détails alignés sur le libellé de la ligne (même x, pas d'indentation). */
.atl-detail__name .atl-nm { padding-left: 0; }
/* Détail à inducteur : même noir que les autres (le tag suffit). */
.atl-detail--driver .atl-nm { color: var(--color-text); }
.atl-drvtag { font-size: 10px; color: var(--color-accent); background: var(--color-accent-tint); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
/* « Ajouter un détail » aligné sur le texte des détails + filet de fin de bloc. */
.atl-table .atl-addrow td { padding: 3px 8px 7px 29px; border-bottom: 1.5px solid var(--color-border); border-bottom: 1.5px solid var(--color-border-strong, var(--color-border)); }

/* Select ligne de revenus (inducteurs). */
.atl-sel { font-family: inherit; font-size: 12px; border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 6px; background: var(--color-surface-card); color: var(--color-text); }

/* Cards (proto) — corps blanc, en-tête blanc à filet. */
.atl-card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); margin: 0 0 8px; overflow: hidden; }
.atl-card__head { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border-inner, var(--color-border)); }
.atl-card__head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-navy); }
.atl-card__title { cursor: pointer; }
/* Pastille de card (repli/dépli) : NAVY foncé — distincte des ＋/− ardoise des
   lignes de revenus. Losange ◆ (fermée) qui TOURNE en carré ■ à l'ouverture. */
.atl-card-tgl { border: none; background: transparent; color: var(--color-navy); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.atl-card-tgl.is-open { transform: rotate(45deg); }
.atl-card-tgl:hover { color: var(--color-accent); }
.atl-card__note { font-size: 11.5px; color: var(--color-text-muted); }
.atl-card__right { margin-left: auto; }
/* Card Variables : bouton d'ajout + cellules de taux. */
.atl-add-var { border: none; background: transparent; color: var(--color-accent); font-family: inherit; font-size: 12px; cursor: pointer; }
.atl-add-var:hover { text-decoration: underline; }
.atl-rate-real { color: var(--color-text-muted); }
/* Cellules de taux compactes → mêmes largeurs de colonnes que la card CA. */
.atl-rate-cell { white-space: nowrap; padding-left: 2px !important; padding-right: 4px !important; }
.atl-rate-cell .atl-pct { color: var(--color-text-muted); font-size: 10px; margin-left: 0; }
.atl-table--fixed .atl-rate-cell .atl-in { width: 26px; padding-right: 0; }
.atl-card__body { padding: 6px 16px 12px; }

/* Grille de colonnes FIXE partagée par les 2 cards → alignement années/mois. */
.atl-table--fixed { table-layout: fixed; }
.atl-col-name { width: 224px; }
.atl-col-real { width: 60px; }
.atl-col-yr { width: 64px; }
.atl-col-mo { width: 46px; }
.atl-col-tot { width: 66px; }
.atl-col-del { width: 22px; }
.atl-table--fixed td.l, .atl-table--fixed th.l { white-space: normal; }
/* Poignée de redimensionnement de la colonne libellé. */
.atl-nameth { position: relative; }
.atl-resizer { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
.atl-resizer:hover { background: var(--color-accent-tint-strong); }
.atl-table--fixed .atl-in { width: 100%; box-sizing: border-box; }

/* Card Inducteurs : libellé + méta (mode · inducteur · ligne · prix) dans la 1re colonne. */
.atl-src { display: flex; flex-direction: column; gap: 4px; }
.atl-in.atl-src__name { width: 100%; font-weight: 600; }
.atl-srcmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.atl-modepill { display: inline-flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.atl-modepill button { font-family: inherit; font-size: 10px; padding: 2px 7px; border: none; background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer; }
.atl-modepill button.on { background: var(--color-accent); color: #fff; }
.atl-in.atl-src__drv { width: 74px; }
.atl-srcmeta .atl-sel { max-width: 104px; }
.atl-prix { font-size: 10px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 3px; }
.atl-prix .atl-in { width: 46px; }

/* Crayon d'édition (ligne inducteur) + rappel de la ligne de revenus rattachée. */
.atl-pencil { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .12s; }
.atl-pencil:hover { color: var(--color-accent); }
/* Actions (crayon / suppression) visibles seulement au survol de la ligne. */
.atl-table tbody tr:hover .atl-pencil { opacity: 1; }
.atl-table tbody tr.atl-line:hover td, .atl-table tbody tr.atl-detail:hover td { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
/* « ＋ inducteur » APRÈS le libellé + menu de choix d'unité. */
.atl-indwrap { position: relative; display: inline-block; }
.atl-addind { border: none; background: transparent; color: var(--color-sage); cursor: pointer; font-size: 11px; padding: 0; margin-left: 8px; white-space: nowrap; }
.atl-addind:hover { color: var(--color-accent); }
.atl-menu-ov { position: fixed; inset: 0; z-index: 55; }
.atl-indmenu { position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 3px; background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; min-width: 132px; padding: 4px; }
.atl-indmenu button { text-align: left; border: none; background: transparent; font-family: inherit; font-size: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--color-text); white-space: nowrap; }
.atl-indmenu button:hover { background: var(--color-accent-tint); }
.atl-indmenu__pct { color: var(--color-accent); }
.atl-indmenu__other { color: var(--color-text-muted); border-top: 1px solid var(--color-border); margin-top: 2px; }
.atl-modal__line { font-size: 12px; color: var(--color-text-muted); margin: 0 0 12px; }
.atl-prixinline { color: var(--color-text-muted); }
/* Tout sur une ligne : « SIG · jours-hommes : CHF 1'350 · Revenus des prestations ». */
.atl-drvline { font-size: 11px; color: var(--color-text-muted); margin-left: 6px; white-space: nowrap; }
.atl-linkline { font-size: 11px; color: var(--color-text-muted); margin-left: 6px; }
.atl-table--fixed .atl-drvline .atl-in { width: 50px; }
/* Détail manuel : libellé + « ＋ inducteur » sur la même ligne (input non pleine largeur). */
.atl-table--fixed .atl-in.atl-detname { width: 120px; }

/* Modale inducteur (choix ligne de revenus + inducteur). */
.atl-modal-ov { position: fixed; inset: 0; background: rgba(26, 18, 25, 0.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.atl-modal { background: var(--color-surface-card); border-radius: var(--radius-card); padding: 20px; width: 380px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
.atl-modal h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--color-navy); }
.atl-modal label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 0 0 10px; }
.atl-modal label input, .atl-modal label select { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; font-family: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-page); color: var(--color-text); }
.atl-modal label input:focus, .atl-modal label select:focus { outline: none; border-color: var(--color-field-focus); }
.atl-modal__actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.atl-modal__save { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; border: none; border-radius: 8px; background: var(--color-navy); color: #fff; cursor: pointer; }
.atl-modal__save:disabled { opacity: 0.4; cursor: not-allowed; }
.atl-modal__cancel { font-family: inherit; font-size: 13px; padding: 8px 13px; border: 1px solid var(--color-border); border-radius: 8px; background: transparent; color: var(--color-text); cursor: pointer; }
.atl-modal__del { font-family: inherit; font-size: 12.5px; padding: 8px 12px; border: none; border-radius: 8px; background: transparent; color: var(--color-terracotta); cursor: pointer; }
.atl-add-detail { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 11px; opacity: .85; padding: 0; }
.atl-add-detail:hover { color: var(--color-accent); opacity: 1; }

.atl-empty { font-size: 12.5px; color: var(--color-text-muted); padding: 20px 4px; }

/* Ligne d'ajustement compta (réalisé Finance − Σ détails) : atténuée, italique. */
.atl-adjname { font-style: italic; color: var(--color-text-muted); }
.atl-adjrow td.atl-num { color: var(--color-text-muted); font-style: italic; }

.atl-del { text-align: center; }
.atl-del button { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 12px; opacity: 0; }
.atl-table tr:hover .atl-del button { opacity: 1; }
.atl-del button:hover { color: var(--color-terracotta); }


/* Barre d'outils : toggle de vue + bouton « Copier N → N+1 ». */
.atl-toolbar { display: flex; align-items: center; gap: 12px; }
.atl-copybtn { font-family: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--color-border);
  border: 1px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface-card);
  color: var(--color-text); cursor: pointer; }
.atl-copybtn:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Modale de copie : liste de lignes à cocher. */
.atl-copyline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); padding: 4px 0; cursor: pointer; }
.atl-copyline input { accent-color: var(--color-accent); }

/* Bandeau lecture seule : le rôle voit le plan mais ne peut pas l'écrire. */
.atl-readonly {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-accent-tint);
  color: var(--color-text);
  color: var(--color-on-tint, var(--color-text));
  font-size: 13px;
}

/* « Ajouter une règle » (revenu variable) : remonté dans la barre, tenue du
   bouton principal des plans (tint ardoise + filet accent). */
.atl-rulebtn {
  background: var(--color-accent-tint-strong);
  border: 1px solid var(--color-accent);
  color: var(--color-accent); font-weight: 600;
}
.atl-rulebtn:hover { background: var(--color-accent); color: #fff; }

/* Ligne ciblée par une règle (revenu variable) : teinte ardoise légère +
   pastille ƒ% cliquable qui ouvre la règle. */
.atl-line--ruled > td { background: var(--color-accent-tint); }
.atl-rulechip {
  border: 0; cursor: pointer; margin-left: 8px; padding: 1px 7px;
  border-radius: 6px; font: inherit; font-size: 10.5px; font-weight: 700;
  background: color-mix(in srgb, var(--color-terracotta) 14%, transparent);
  color: var(--color-terracotta);
}
.atl-rulechip:hover { background: var(--color-terracotta); color: #fff; }

/* Modale de règle : taux réel observé + taux par année. */
.atl-realrate { color: var(--color-text); }
.atl-realrate b { color: var(--color-sage); }
.atl-ratesrow-lbl { margin-top: 6px; font-size: 11px; color: var(--color-text-muted); }
.atl-ratesrow { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.atl-rateyear { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-text-muted); }
.atl-rateyear input {
  width: 44px; border: 0; background: transparent; padding: 1px 0;
  font: inherit; font-size: 13px; color: var(--color-field-focus); text-align: right;
}
.atl-rateyear input:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
/* Sous-lignes du Plan produits/services dépliées : détail par client. */
.atl-tgl-btn--sub { width: 16px; height: 16px; font-size: 11px; }
.atl-detail--plansub .atl-detname--sub { color: var(--color-text-muted); }

/* Ligne de détail TENUE PAR UN PLAN (produits / services) — mise en évidence
   ardoise (2026-08-20) : son futur ne se saisit pas ici, il vient de son
   propre moteur. Le tag de source a quitté le libellé pour la colonne
   source/règle ; la teinte remplace le tag sur la ligne de groupement. */
.atl-table tbody tr.atl-detail--planned td { background: var(--color-accent-tint); }
.atl-table tbody tr.atl-detail--planned:hover td { background: var(--color-accent-tint-strong); }

/* Chevron d'ouverture des contributions (Plan produits / services) : DISCRET —
   visible au survol de la ligne, ou tant que le détail est ouvert. Format
   retenu par Olivier : libellés alignés à gauche, chevron au survol. */
.atl-chev {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  width: 16px; height: 16px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.atl-chev svg { width: 12px; height: 12px; transition: transform .12s ease; }
.atl-chev.is-open svg { transform: rotate(90deg); }
tr:hover .atl-chev, .atl-chev.is-open, .atl-chev:focus-visible { opacity: 1; }

/* Modale de règle : LARGE et horizontale — champs à la suite, réel observé en
   pastilles (N-1 + mois clos), taux annuels compacts avec le % dans le champ. */
.atl-modal--wide { width: min(820px, 94vw); max-width: none; }
.atl-modal__row { display: flex; gap: 16px; }
.atl-modal__row label { flex: 1 1; min-width: 0; }
.atl-obs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.atl-obs__t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 4px; }
.atl-obs__chip {
  font-size: 11.5px; color: var(--color-text-muted);
  background: var(--color-surface-page); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.atl-obs__chip b { color: var(--color-sage); margin-left: 3px; }
.atl-rateyear { display: inline-flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--color-text-muted); }
.atl-rateyear__field { display: inline-flex; align-items: baseline; gap: 2px; }
.atl-modal--wide .atl-rateyear input {
  width: 40px; border: 0; background: transparent; padding: 1px 0; border-radius: 0;
  font: inherit; font-size: 13.5px; color: var(--color-field-focus); text-align: right;
}
.atl-modal--wide .atl-rateyear input:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }

/* Séparation de la case « Coûts directs » dans la modale de copie N → N+1. */
.atl-copyline--dc { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 8px; }

/* ── Règle de projection (colonne 2 du plan des ventes) ──────────────────── */
.atl-rulecell { text-align: left !important; padding-left: 8px !important; position: relative; }
.atl-rulewrap { position: relative; display: inline-block; }
.atl-rulebtn {
  font: inherit; font-size: 11px; cursor: pointer; padding: 2px 8px;
  border: 1px solid var(--color-border); border-radius: 7px;
  background: var(--color-surface-card); color: var(--color-accent);
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .atl-rulebtn { opacity: 1; }
.atl-rulebtn i { font-style: normal; color: var(--color-text-muted); }
.atl-rulepop {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 190px;
  display: flex; flex-direction: column;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 4px; box-shadow: 0 8px 24px rgba(43, 32, 62, .16);
}
.atl-rulepop__i {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
  border: 0; background: transparent; color: var(--color-text); padding: 6px 8px; border-radius: 7px;
}
.atl-rulepop__i:hover { background: var(--color-accent-tint); }
.atl-rulepop__i:disabled { color: var(--color-text-muted); cursor: default; }
.atl-rulepop__i em { font-style: normal; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
/* Règle EN PLACE : visible en permanence (comme le badge « Plan produits »). */
.atl-rulebtn.is-set { opacity: 1; border-color: var(--color-accent); background: var(--color-accent-tint); }
/* Badge de source « Finance » : la prévision de la ligne vient d'une règle du
   compte de résultat, pas du plan. */
.atl-drvtag--fin { background: var(--color-accent-tint); color: var(--color-accent); }
/* Repère discret : la prévision de cette ligne vient d'une règle de Finance. */
.atl-finmark { font-size: 11px; color: var(--color-accent); margin-left: 4px; cursor: default; }

/* Destination de la famille : champ à saisir → bleu, sans cadre (charte). */
.atl-destwrap { display: inline-flex; align-items: baseline; gap: 2px; max-width: 100%; }
.atl-dest {
  appearance: none; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 11px; color: var(--color-field-focus);
  cursor: pointer; max-width: 100%;
}
.atl-destcar { font-size: 9px; color: var(--color-field-focus); font-style: normal; }
.atl-dest:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }


/* Coûts directs — vue de planification des charges directes (proto 2026-08-15).
   Tokens :root uniquement (charte). Réel condensé · prévisionnel teinté ardoise. */

.dc-wrap { position: relative; }
.dc-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.dc-year {
  font-size: 13px; font-weight: 600; color: var(--color-navy);
}

.dc-card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(43, 32, 62, .04); overflow: hidden;
}
.dc-scroll { overflow-x: auto; }
.dc-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 12.5px; }
.dc-table th, .dc-table td { padding: 6px 8px; white-space: nowrap; }
.dc-table thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-inner);
  text-align: right;
}
.dc-table tbody td { border-top: 1px solid var(--color-border-inner); }
.dc-c-lbl { text-align: left !important; padding-left: 16px !important; min-width: 170px; }
.dc-c-rule { text-align: left !important; min-width: 130px; }
.dc-c-val, .dc-c-tot, .dc-c-real { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.dc-c-real { color: var(--color-text-muted); border-right: 1px solid var(--color-border-inner); }
.dc-table thead .dc-c-real small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Card BLANCHE complète (demande 2026-08-15) : plus d'aplat — la frontière
   réel/prévisionnel tient au filet après la colonne Réel et à la teinte des
   en-têtes de mois. */
.dc-table thead th.dc-fore { color: var(--color-accent); }
.dc-bands th { border-bottom: 0 !important; padding: 5px 8px; }
.dc-band {
  text-align: left !important; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.dc-band--real {
  background: var(--color-surface-structure); color: var(--color-navy);
  border-radius: 6px 0 0 6px;
}
.dc-band--fore { background: var(--color-accent); color: #fff; border-radius: 0 6px 6px 0; }
.dc-c-tot { font-weight: 600; color: var(--color-navy); padding-right: 14px !important; border-left: 1px solid var(--color-border-inner); }

/* Lignes de somme (CA, total, valeur ajoutée) — blanches, la graisse suffit. */
.dc-sum td { font-weight: 600; color: var(--color-navy); }
.dc-sum--va td { color: var(--color-sage); border-top: 1px dashed var(--color-border) !important; }

/* Cellule kCHF éditable : bleu sans cadre (charte). */
.dc-num {
  border: 0; background: transparent; padding: 1px 0; font: inherit;
  color: var(--color-field-focus); width: 100%; text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.dc-num:focus { outline: none; border-bottom: 1px solid var(--color-field-focus); }
.dc-num::placeholder { color: color-mix(in srgb, var(--color-field-focus) 45%, transparent); }
.dc-num--rate { width: 64px; text-align: left; }
.dc-ro { color: var(--color-text-muted); }

/* Pastille de règle + badge « Ventes & Ops » (calculé). */
.dc-rule {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  font-size: 12px; text-align: left; line-height: 1.25; color: var(--color-field-focus);
}
.dc-rule i { font-style: normal; color: var(--color-text-muted); }
.dc-rule em { display: block; font-style: normal; font-size: 10px; color: var(--color-text-muted); }
.dc-rule:disabled { cursor: default; }
/* Règle figée (Achats, Variation de stock sous le plan des ventes) : se lit, ne se clique pas. */
.dc-rule--fixed { color: var(--color-text-muted); cursor: default; }
.dc-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-on-tint); background: var(--color-accent-tint);
  border-radius: 999px; padding: 2px 8px;
}

/* Popover de règle — même grammaire que la card négoce (spl-pop). */
.dc-pop {
  /* fixed : le popover se place par rapport à l'ÉCRAN (il se retourne au-dessus
     de la pastille si le bas manque) et échappe au défilement de la carte. */
  position: fixed; z-index: 1400; min-width: 232px; max-height: 460px; overflow-y: auto;
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: 0 8px 22px rgba(0, 0, 0, .10); padding: 8px;
}
.dc-pop__h {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 2px 6px 6px;
}
.dc-pop__inds {
  background: var(--color-accent-tint); border-radius: 7px; padding: 6px 8px; margin-bottom: 8px;
}
.dc-pop__inds div { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; padding: 1px 0; }
.dc-pop__inds span { color: var(--color-text-muted); }
.dc-pop__inds b { color: var(--color-navy); font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.dc-pop__modes { display: flex; flex-direction: column; gap: 1px; }
.dc-pop__modes button {
  border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--color-text); padding: 5px 8px; border-radius: 6px;
}
.dc-pop__modes button:hover:not(:disabled) { background: var(--color-surface-page); }
.dc-pop__modes button.on { background: var(--color-accent-tint); color: var(--color-accent); font-weight: 600; }
.dc-pop__modes button:disabled { color: var(--color-text-muted); opacity: .5; cursor: default; }
.dc-pop__p {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.dc-pop__p span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.dc-pop__p .dc-num { width: 74px; text-align: left; font-size: 12.5px; }
.dc-sel {
  font: inherit; font-size: 12.5px; color: var(--color-field-focus);
  background: transparent; border: 0; padding: 1px 0; cursor: pointer; max-width: 150px;
}
.dc-sel:focus { outline: none; }
.dc-pop__n {
  margin: 8px 0 0; padding: 6px 8px 0; border-top: 1px solid var(--color-border-inner);
  font-size: 10.5px; color: var(--color-text-muted); line-height: 1.35;
}

/* Segments de vue (2026 mensuel · 2027 mensuel · Plan pluriannuel), mêmes
   codes que les plans S&OP. */
.dc-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; }
.dc-seg button {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 12px;
  border: 0; background: var(--color-surface-card); color: var(--color-text);
}
.dc-seg button + button { border-left: 1px solid var(--color-border); }
.dc-seg button.on { background: var(--color-accent); color: #fff; }

/* Rendu embarqué (bas du Plan des ventes) : titre de bloc discret. */
.dc-embed-title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 16px; font-weight: 600;
  color: var(--color-navy); margin: 0;
}

/* Colonnes alignées sur le Plan des ventes (2026-08-16) : mois étroits,
   colonnes agrégées « Réel » et « À venir » séparées par un filet. */
.dc-table--m { table-layout: fixed; }
.dc-c-mo { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-c-togo {
  text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap;
  border-left: 1px solid var(--color-border);
}
.dc-c-lbl--rule { display: table-cell; }
.dc-c-lbl--rule .dc-lbl__txt { display: block; }
.dc-c-lbl--rule .dc-rule, .dc-c-lbl--rule .dc-badge { margin-top: 1px; }

/* Colonne RÈGLE en bout de table : dédiée, sans décaler les mois qui
   s'alignent sur la carte Chiffre d'affaires (2026-08-16). */
.dc-col-rule { width: 132px; }
/* Colonne Règle : texte À GAUCHE (les cellules de la table de plan sont
   alignées à droite par défaut — il faut le forcer). */
.dc-th-rule, .atl-table thead .dc-th-rule { text-align: left !important; padding-left: 10px !important; }
.dc-td-rule, .atl-table tbody .dc-td-rule { text-align: left !important; padding-left: 10px !important; }
.dc-td-rule .dc-rule, .dc-td-rule .dc-badge { text-align: left; }
.dc-td-rule { overflow: hidden; text-overflow: ellipsis; }   /* un badge ne déborde jamais sur les chiffres */
.dc-card .dc-scroll { overflow-x: auto; }

/* Libellés alignés sur le TEXTE des lignes du plan de revenus (qui portent un
   bouton ＋/− de 27px avant le texte) — pas sur ce bouton. */
.dc-table--m th.l, .dc-table--m td.l { padding-left: 29px !important; }

/* ── Popover de règle v2 (2026-08-16) : une ligne par règle, valeur ou
   paramètre de saisie À DROITE sur la même ligne. ─────────────────────────── */
.dc-pop__h { display: flex; align-items: baseline; gap: 10px; }
.dc-pop__h span {
  margin-left: auto; font-size: 10.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--color-text-muted);
}
.dc-mode { display: flex; align-items: center; gap: 8px; border-radius: 7px; padding-right: 8px; }
.dc-mode > button {
  flex: 1 1; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
  border: 0; background: transparent; color: var(--color-text); padding: 6px 10px;
}
.dc-mode:hover { background: var(--color-accent-tint); }
.dc-mode.on { background: var(--color-accent-tint-strong); }
.dc-mode.on > button { color: var(--color-accent); font-weight: 600; }
.dc-mode > button:disabled { color: var(--color-text-muted); cursor: default; }
.dc-mode__v {
  font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text-muted);
  white-space: nowrap;
}
.dc-mode__p { display: inline-flex; align-items: center; gap: 5px; }
.dc-mode__p em { font-style: normal; font-size: 10.5px; color: var(--color-text-muted); }
.dc-mode__p .dc-num { width: 64px; text-align: right; }
.dc-mode__p .dc-sel { max-width: 120px; font-size: 12px; }

/* Entrée « Planifier ici » : détache la ligne du circuit Ventes & Ops. */
.dc-mode--free { border-bottom: 1px solid var(--color-border); margin-bottom: 4px; padding-bottom: 4px; }
.dc-mode--free > button { color: var(--color-accent); font-weight: 600; }

/* Deux blocs dans la carte des coûts directs : en-tête de groupe repliable,
   lignes en retrait (même lecture qu'au compte de résultat). */
.dc-grp > td { font-weight: 600; background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.dc-ingroup > td.l { padding-left: 28px !important; }

/* Groupe de la ligne, en tête du popover de règle. */
.dc-pop__grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--color-border-inner); }
.dc-pop__grplbl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.dc-grpbtn {
  border: 0; background: transparent; padding: 2px 6px; border-radius: 4px;
  font: inherit; font-size: 11.5px; color: var(--color-field-focus); cursor: pointer;
}
.dc-grpbtn.on { background: var(--color-accent-tint); color: var(--color-on-tint); cursor: default; }
.dc-grpbtn:disabled:not(.on) { color: var(--color-text-muted); cursor: default; }

/* Comptes du chiffre d'affaires dépliés sous leur total (2026-09-01) : on
   planifie une charge directe contre le revenu qui la porte. Chevron révélé au
   survol seulement, standard de groupement. */
.dc-revrow:hover .dc-revline td { color: var(--color-text-muted); }
/* Respiration entre le revenu et ce qu'il coûte. */
/* Filet de séparation entre le bloc revenu et les charges (2026-09-01). */
.dc-revgap td { height: 10px; border: 0; border-top: 1px solid var(--color-border); padding: 0; }
/* Sous la valeur ajoutée (2026-09-14) : un espace, puis les parts du CAN, en lecture. */
.dc-gap td { height: 14px; border: 0; padding: 0; background: transparent; }
.dc-pct td { color: var(--color-text-muted); font-size: 11.5px; }

/* Prévisionnel : particularités seules, le costume de table vit dans designSystem.css. */
/* défilement : voir .lk-hscroll (standard, designSystem.css) */
.om-table { font-size: 13px; min-width: 100%; }
.om-table th { text-align: right; font-weight: 500; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; font-size: 12px; padding: 12px 8px 10px; }
/* GOUTTIÈRE FIXE : chevron et pictogramme y vivent, hors du flux du texte, si
   bien que TOUS les libellés démarrent au même x, offres, lignes et sous-titres
   confondus. La hiérarchie se lit à la graisse et au pictogramme, pas au
   décalage. */
.om-table th.om-lbl, .om-table td.om-lbl { text-align: left; position: relative; padding-left: 46px; }
.om-table td { padding: 10px 8px; }
/* Colonne d'année : la cible, en tête, reconnue à son FILET et à sa graisse.
   Aucun aplat : le surlignage reste aux LIGNES, jamais aux colonnes. */
/* Alignée à droite comme tout chiffre : sans la règle, la colonne d'année
   restait au fer à gauche et ses valeurs flottaient au milieu. */
.om-an { text-align: right; font-weight: 600; border-right: 1px solid var(--color-border); }
th.om-an { color: var(--color-text-muted); }
.om-row:hover td { background: var(--color-surface-page); }
/* Une offre s'ouvre d'un clic : la ligne entière est la poignée, le chevron
   occupe la gouttière pour que tous les libellés démarrent au même x. */
.om-offre { cursor: pointer; }
.om-offre td.om-lbl { font-weight: 600; }
/* Le pictogramme et le chevron se centrent sur la hauteur du rang (2026-09-12), en face du texte. */
.om-offre .of-ico { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); margin: 0; color: var(--color-text-muted); }
.om-chev { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--color-border); }
/* Ce qui compose une offre, ou une ligne dépliée sous un flux : même x que tout
   le reste, la gouttière étant vide faute de chevron. */
/* Le contexte de la ligne : prix du plan, profil. Jamais un chiffre à lire. */
.om-prof { margin-left: 10px; }
.om-tot td { font-weight: 700; border-top: 1px solid var(--color-border); }
/* Les trois flux se déplient d'un clic sur leur ligne. */
.om-f { cursor: pointer; }

.om-f td.om-lbl { font-weight: 700; }
/* Le résultat du panneau : en francs, annoncé comme tel, jamais mêlé aux unités. */
.om-res td { background: var(--color-surface-page); font-weight: 600; }
.om-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); }
/* Un mois tapé : bleu du champ, comme partout ailleurs. */
.om-in .ic-cell { color: var(--color-field-focus); font-weight: 600; }
/* Le réalisé, déjà livré, séparé des mois à venir par un filet. */
.om-fix { border-right: 1px solid var(--color-border-inner); }
th.om-fix { color: var(--color-text-muted); }
/* Fermer le panneau : un lien, pas un bouton d'action. */
.om-close { border: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--color-text-muted); cursor: pointer; padding: 2px 4px; }
.om-close:hover { color: var(--color-accent); }
/* Les trois totaux de l'année, en tête des flux. */
.om-kpis { display: flex; gap: 34px; padding: 14px 16px 16px; border-bottom: 1px solid var(--color-border-inner); }
.om-kpi { display: flex; flex-direction: column; gap: 3px; }
.om-kpi__lbl { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.om-kpi__val { font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 21px; font-weight: 600; }
.om-kpi__val small { font-size: 11px; font-weight: 500; color: var(--color-text-muted); margin-left: 3px; }
/* Livré (unités) et Facturé (francs) : deux grandeurs, deux colonnes nommées,
   jamais additionnées. Un seul filet ferme le bloc du réalisé. */
.om-fix { border-right: 1px solid var(--color-border-inner); }
/* Un réalisé sommé depuis les lignes ne se tape pas : il se lit en gris. */
.om-calc { color: var(--color-text); font-weight: 400; }   /* une valeur calculée se lit en noir (2026-09-12) */
.om-na { color: var(--color-border); }
/* Le prix réalisé, à côté du prix du plan : c'est l'écart qu'on vient lire. */
.om-reel { margin-left: 10px; color: var(--color-text-muted); }
/* Une LIGNE sous son offre : un filet clair la ferme, le filet franc restant aux offres. */
/* L'unité du rang, à droite du libellé : c'est elle qui dit comment lire. Elle
   garde sa casse, c'est la DONNÉE du client (« unit », « heure », « m² ») et non
   un libellé du logiciel ; en capitales, elle passait pour de l'anglais. */
.om-tag { float: right; font-size: 10.5px; color: var(--color-text-muted); padding-top: 3px; }
/* Les lignes d'une offre, sous elle, dans la lecture des trois flux. */
/* La condition et le prix, au bout du rang d'impact : discrets, ils disent d'où vient le chiffre. */
.om-px { color: var(--color-text-muted); font-weight: 400; font-size: 11px; margin-left: 8px; }
/* Deux cartes (2026-09-11). En haut, la ligne de l'offre porte deux valeurs par
   cellule, les unités en gras et leur valeur en petit dessous ; ses lignes à
   saisir suivent, serrées, sur un fond léger. L'offre sur laquelle on est se
   marque d'un liseré à gauche, jamais d'un aplat. */
.om-offre { cursor: pointer; }
/* La carte du haut a le COSTUME de celle du bas (2026-09-12) : l'offre en gras
   sur un rang serré, ses lignes en gris dessous, les étiquettes en ligne. */
.om-offre td { border-bottom: none; border-top: 1px solid var(--color-border); padding-top: 7px; padding-bottom: 5px; font-weight: 700; }
.om-offre td.om-lbl { padding-left: 46px; }
.om-offre td.om-lbl .om-px { font-weight: 400; }
.om-offre:hover .om-chev { color: var(--color-text-muted); }
.om-deux b { display: block; font-weight: 600; }
.om-deux small { display: block; font-size: 10.5px; color: var(--color-text-muted); font-weight: 400; }
.om-offre.is-replie td { border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
.om-li td { border-bottom: none; padding-top: 2px; padding-bottom: 2px; line-height: 1.4; color: var(--color-text-muted); font-size: 12px; }
.om-li td.om-lbl .lk-lb, .om-li td.om-lbl .om-prof > * { padding-top: 0; padding-bottom: 0; min-height: 0; }
.om-li--last td { padding-bottom: 6px; }
.om-row.is-selected td.om-lbl { box-shadow: inset 3px 0 var(--color-accent); }
.om-bloc { margin-top: 16px; }
/* La carte du bas : les flux en gras, leur détail dessous en gris. */
.om-tot td { padding-top: 8px; padding-bottom: 6px; }
.om-sous-li td { color: var(--color-text-muted); font-size: 12px; padding-top: 2px; padding-bottom: 2px; }
.om-sous-li td.om-lbl { padding-left: 46px; }
/* L'unité du temps, en bleu comme une saisie : un clic la change (heures ⇄ jours-hommes). */
.om-sw { border: 0; background: none; color: var(--color-field-focus); font: inherit; font-size: 10.5px; cursor: pointer; padding: 0; }
.om-sw:hover { text-decoration: underline; }
/* Les QUANTITÉS dans la carte des flux (jours-hommes) : une autre couleur que
   les francs, sans gras ; on ne les additionne pas aux montants. */
.om-tot--qte td, .om-sous-li--qte td { color: var(--color-on-tint); font-weight: 400; }
/* Une offre sans ligne est sa propre ligne : un seul rang, qui se tape. */
.om-offre--seule td { border-bottom: none; padding-top: 6px; padding-bottom: 6px; }
.om-offre--seule td .ic-cell { font-weight: 700; }
/* La vue Réalisé : sept colonnes fixes, la table ne s'étire pas. */
.om-reel { width: auto; min-width: 0; }
.om-reel th { text-align: right; }
/* Un filet à droite de l'écart : il clôt la comparaison objectif / atterrissage. */
.om-reel .lk-sep-r { border-right: 1px solid var(--color-border); }
/* Les deux entêtes d'année, sur deux lignes : la colonne reste étroite. */
.om-table th.om-th2 { line-height: 1.25; white-space: normal; }
/* Le détail par offre : deux familles nommées en tête, l'atterrissage en gras. */
.om-reel__grp th { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 2px; border-bottom: none; }
.om-reel th.om-th--fort, .om-reel td.om-fort { color: var(--color-text); font-weight: 700; }
/* La Synthèse se lit en NOIR (2026-09-12) : ses valeurs sont le résultat, pas
   une aide de lecture ; le poids seul distingue le gras des autres. */
.om-reel td.om-calc, .om-reel td.lk-num { color: var(--color-text); font-weight: 400; }
.om-reel td.om-fort, .om-reel .om-tot td { font-weight: 700; }
/* Débiteurs (2026-09-12) : la TVA s'ajoute en retrait, sans relief ; ce qui se
   lit, c'est le TTC : la facturation en surlignage ardoise, l'encaissement en
   sauge clair (ce qui entre en banque). */
.om-rm__plus td.om-lbl { padding-left: 46px; }
.om-rm__ttc td { background: var(--color-accent-tint); }
.om-rm__enc td { background: color-mix(in srgb, var(--color-sage) 12%, var(--color-surface-card)); }
/* Débiteurs : un souffle entre le bloc facturation et le bloc encaissement. */
.om-rm__gap td { height: 14px; padding: 0; border-bottom: none; background: transparent; }

/* Plan des ventes (09.09.2026) : particularités seules, le reste vient de designSystem.css. */
/* défilement : voir .lk-hscroll (standard, designSystem.css) */
.sp-table { font-size: 13px; min-width: 100%; }
.sp-table th { text-align: right; font-weight: 500; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; font-size: 12px; padding: 12px 8px 10px; }
.sp-table th.sp-lbl, .sp-table td.sp-lbl { text-align: left; }
.sp-table td { padding: 9px 8px; }
/* Première colonne large : le nom de l'affaire, son offre en dessous. */
.sp-row:hover td { background: var(--color-surface-page); }
/* Le SOLDE est la grandeur cherchée : calculé, mis en valeur, et un filet le
   sépare des mois qui le répartissent. */
.sp-solde { font-weight: 600; }
th.sp-solde { color: var(--color-text); }
/* Le report se pose d'un geste, révélé au survol de la ligne. */
.sp-carry { border: none; background: transparent; color: var(--color-accent); font: inherit; cursor: pointer; padding: 0 4px; opacity: 0; }
.sp-row:hover .sp-carry { opacity: 1; }
/* Bandeau d'une offre : son compte de CA se lit dessous. */
.sp-grp td { background: var(--color-accent-tint-strong); border-top: 1px solid var(--color-border); font-weight: 600; }
.sp-account { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
/* Colonnes d'année : un filet les ouvre, le bandeau « À facturer » les nomme.
   Elles ne portent plus d'aplat, le surlignage reste aux LIGNES. */
.sp-year { font-weight: 600; border-left: 1px solid var(--color-border); }
.sp-band th { padding: 8px 8px 0; border: none; }
.sp-band th.sp-fact { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .06em;
                      text-transform: uppercase; color: var(--color-on-tint);
                      background: var(--color-accent-tint); border-radius: var(--radius-card) var(--radius-card) 0 0;
                      padding: 5px 8px; }
th.sp-year { color: var(--color-text-muted); }
.sp-sep { border-left: 1px solid var(--color-border); }
.sp-neg { color: var(--color-terracotta); }
.sp-tot td { background: var(--color-accent-tint-strong); font-weight: 700; border-top: 1px solid var(--color-border); }
.sp-pond td { background: #FCFBF7; color: var(--color-text-muted); font-size: 12px; }
.sp-pond td.sp-year { color: var(--color-text); font-weight: 600; }
.sp-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); }
/* Synthèse : les trois catégories et l'écart à l'objectif. */
.sp-sum { max-width: 620px; }
.sp-sum td { padding: 8px 10px; }
.sp-sum td.sp-lbl { width: 100%; }
.sp-sum tr.sp-s1 td { border-top: 1px solid var(--color-border-inner); font-weight: 600; }
.sp-sum td.sp-pad { padding-left: 28px; font-weight: 400; color: var(--color-text-muted); }
.sp-sum tr.sp-s2 td { border-top: 1px solid var(--color-border); font-weight: 700; }
.sp-sum tr.sp-s3 td { border-top: 1px solid var(--color-text); border-bottom: 3px double var(--color-text); font-weight: 700; }
.sp-sum tr.sp-gap td { height: 12px; }
/* Une catégorie sans affaire le dit, plutôt que d'aligner un total à zéro. */
.sp-vide { padding: 22px 16px !important; text-align: center; color: var(--color-text-muted); }
.sp-row td.sp-lbl { padding-left: 26px; }

/* Nouvelle offre (2026-09-11) : deux cartes claires à gauche, Produit puis
   Conditions, et la synthèse en phrases à droite sur la teinte d'accent.
   Champs cadrés de 38 px, libellés 13 px, valeurs 14 px en texte sombre. */
.ocd-ov { position: fixed; inset: 0; background: rgba(26, 18, 25, 0.35); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.ocd { background: var(--color-surface-page); border-radius: var(--radius-card); width: 1000px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 18px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
.ocd__tt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ocd__tt h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--color-navy); font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; }
.ocd__pill { font-size: 12px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 30px; color: var(--color-text-muted); background: var(--color-surface-card); white-space: nowrap; }
.ocd__pill.is-on { background: var(--amber-light); color: var(--amber-dark); border-color: transparent; }
.ocd__lay { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); grid-gap: 16px; gap: 16px; align-items: start; }
/* Deux CARTES claires, une par section. */
.ocd__sec { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 16px 18px 18px; }
.ocd__sec + .ocd__sec { margin-top: 12px; }
.ocd__sec h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--color-navy); }
.ocd__n { width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-tint); color: var(--color-on-tint); display: grid; place-items: center; font-size: 12px; font-weight: 500; flex: none; }
.ocd__txt { margin-left: auto; background: none; border: 0; color: var(--color-text-muted); font: inherit; font-size: 12px; font-weight: 400; cursor: pointer; padding: 2px 4px; }
.ocd__txt:hover { color: var(--color-accent); text-decoration: underline; }
.ocd__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px 16px; gap: 12px 16px; }
.ocd__f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--color-text-muted); min-width: 0; }
.ocd__f--w { grid-column: 1 / -1; }
.ocd__f input { height: 38px; font-family: inherit; font-size: 14px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 7px; width: 100%; background: var(--color-surface-card); color: var(--color-text); box-sizing: border-box; }
.ocd__f input::placeholder { color: var(--color-text-muted); }
.ocd__f input:hover { border-color: var(--color-accent-soft); }
.ocd__f input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-tint); }
.ocd__in { display: flex; align-items: center; gap: 8px; }
.ocd__in > * { flex: 1 1; min-width: 0; }
.ocd__in .ocd__n { flex: 0 0 72px; }
.ocd__in > span { flex: none; font-size: 13px; color: var(--color-text-muted); }
.ocd__hint { font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
/* La synthèse : un panneau sur la teinte d'accent, des phrases, un filet entre chaque. */
.ocd__sum { background: var(--color-accent-tint); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px 20px; position: sticky; top: 0; }
.ocd__eb { font-size: 11px; letter-spacing: 1.2px; color: var(--color-on-tint); font-weight: 600; text-transform: uppercase; }
.ocd__sum h4 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; line-height: 1.35; margin: 10px 0 12px; color: var(--color-navy); font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.ocd__sum h4 .of-ico { color: var(--color-accent); flex: none; }
.ocd__r { padding: 11px 0; border-top: 1px solid var(--color-border); }
.ocd__r span { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.ocd__r b { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--color-text); }
.ocd__sf { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; margin: 14px 0 0; }
.ocd__err { color: var(--color-terracotta); font-size: 13px; padding: 9px 12px; background: color-mix(in srgb, var(--color-terracotta) 10%, var(--color-surface-card)); border-radius: 7px; margin: 12px 0 0; }
.ocd__act { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.ocd__act small { font-size: 12px; color: var(--color-text-muted); }
.ocd__act > span { display: flex; gap: 8px; }
.ocd__pri { padding: 9px 16px; border: 0; border-radius: 7px; background: var(--color-accent); color: #fff; font-size: 13px; font-family: inherit; cursor: pointer; }
.ocd__pri:hover { background: var(--color-on-tint); }
.ocd__pri:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 2px; }
@media (max-width: 760px) { .ocd__lay { grid-template-columns: 1fr; } .ocd__sum { position: static; } .ocd__g { grid-template-columns: 1fr; } .ocd { padding: 16px; } }
/* Un réglage à bascule dans la synthèse : même costume que sa valeur, un ⇄ dit
   qu'il se change d'un clic. */
.ocd__sw { display: block; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--color-text); cursor: pointer; text-align: left; }
.ocd__sw span { color: var(--color-text-muted); font-size: 12px; }
.ocd__sw:hover { color: var(--color-accent); }
/* Les nombres se TAPENT : pas de flèches de compteur. */
.ocd__f input[type="number"] { appearance: textfield; }
.ocd__f input[type="number"]::-webkit-outer-spin-button, .ocd__f input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Un menu à côté d'un nombre : le menu garde une largeur fixe et lisible, le
   nombre suit ; il ne se comprime plus jusqu'à « sur plusi… ». */
.ocd__in--fixe > .lk-lb { flex: 0 0 240px; }
/* Le ⇄ reste sur la ligne de sa valeur. */
.ocd__sw { display: inline-flex; align-items: baseline; gap: 6px; }
/* L'invitation à demander un modèle : en évidence au pied de la synthèse, sur
   l'aplat d'accent. */
.ocd__cta { display: block; margin: 16px 0 0; padding: 10px 12px; border-radius: 7px; background: var(--color-accent); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; }
.ocd__cta:hover { background: var(--color-on-tint); color: #fff; }
/* La reconnaissance en cellules : un carré par mois, le premier plein, les
   suivants creux ; on voit l'étalement sans le lire. */
.ocd__cells { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.ocd__cells i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--color-accent); background: var(--color-surface-card); box-sizing: border-box; }
.ocd__cells i.is-first { background: var(--color-accent); }
/* L'échéancier des tranches : une ligne par tranche, sous le paiement. */
.ocd__tr { gap: 6px; }
.ocd__tr-l { display: flex; align-items: center; gap: 8px; }
.ocd__tr-l .ocd__n { flex: 0 0 64px; }
.ocd__tr-l > span { font-size: 13px; color: var(--color-text-muted); flex: none; }
.ocd__tr-l .lk-lb { flex: 0 0 220px; }
.ocd__x { border: 0; background: none; color: var(--color-text-muted); cursor: pointer; font-size: 13px; padding: 0 4px; }
.ocd__x:hover { color: var(--color-terracotta); }
.ocd__tr-f { display: flex; align-items: center; gap: 12px; }
.ocd__tr-f .ocd__txt { margin-left: 0; }
.ocd__reste { font-size: 12px; color: var(--color-terracotta); }
/* Le solde de l'échéancier : un nombre calculé, en gris, sur la ligne « à la livraison ». */
.ocd__solde { display: inline-flex; align-items: center; justify-content: flex-end; height: 38px; padding: 0 12px; box-sizing: border-box; border: 1px dashed var(--color-border); border-radius: 7px; color: var(--color-text-muted); font-size: 14px; }
.ocd__solde.is-neg { color: var(--color-terracotta); border-color: var(--color-terracotta); }
.ocd__solde-lbl { font-size: 13px; color: var(--color-text-muted); }

/* Synthèse du Prévisionnel : quatre cartes, aucune couleur hors charte.
   Les barres se lisent en CELLULES d'une seule famille, le rang seul les
   distingue : navy pour ce qui est fait, olive pour ce qui reste prévu. */
.oms-haut { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-gap: 28px; gap: 28px; padding: 16px 20px 18px; }
.oms-row { display: grid; grid-template-columns: 190px 90px minmax(0, 1fr); align-items: center; grid-gap: 16px; gap: 16px; padding: 7px 0; }
.oms-lbl { font-size: 14px; color: var(--color-text); }
.oms-val { font-size: 15px; text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.oms-bar { display: flex; gap: 3px; height: 13px; }
.oms-b { width: 9px; border-radius: 2px; }
.oms-b--reel { background: var(--color-navy); border-radius: 2px; }
.oms-b--futur { background: var(--color-accent); border-radius: 2px; }
.oms-row--tot { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 12px; font-weight: 600; }
.oms-row--tot .oms-lbl { color: var(--color-navy); }
.oms-note { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); }
/* La cible, à droite, séparée par un filet : c'est l'autre lecture de la même page. */
.oms-cible { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--color-border); padding-left: 26px; }
.oms-cible__lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.oms-cible__val { font-size: 34px; font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; color: var(--color-navy); line-height: 1.15; }
.oms-cible__val small { font-size: 12px; color: var(--color-text-muted); }
.oms-cible__ecart { font-size: 14px; color: var(--color-text); margin-top: 6px; }
.oms-cible__bar { display: flex; gap: 3px; height: 11px; margin-top: 12px; }
.oms-cible__bar i { border-radius: 2px; min-width: 2px; }

/* Offre (04.09.2026) : particularités seules, le costume de table vit dans designSystem.css. */
.of-th { cursor: pointer; -webkit-user-select: none; user-select: none; }
.of-th:hover { color: var(--color-accent); }
.of-lbl { font-weight: 600; color: var(--color-navy); }
.of-lblwrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.of-lblwrap .ic-cell { flex: 1 1; min-width: 0; }
.of-muted { color: var(--color-text-muted); }
.of-txt { color: var(--color-text); }
.of-sub { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.of-spread { white-space: nowrap; }
.of-spread .ic-cell { display: inline; width: auto; min-width: 2ch; }
.of-spread .ic-cell--edit { width: 3ch; }
.of-btn {
  border: 1px solid var(--color-border); background: var(--color-surface-card); color: var(--color-text);
  border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.of-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.of-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); display: flex; flex-direction: column; gap: 10px; align-items: center; }
/* Card Détail : deux colonnes de champs, libellé en petites capitales. */
/* Le détail se lit en UNE colonne (2026-09-10) : il vit à droite de la liste,
   la place est celle de la carte. */
.of-detail { display: block; padding: 14px 18px; }
.of-field { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: baseline; grid-gap: 12px; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-border-inner); font-size: 13px; }
/* Le libellé tient sur UNE ligne : « Reconnaissance revenu » passait à la ligne
   et décalait la valeur d'un cran. */
.of-field__lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.of-field--3 { grid-template-columns: 168px minmax(170px, max-content) minmax(0, 1fr); }
/* Pictogramme de l'offre dans la ligne ; la liste des modèles dans le détail. */
.of-icobtn { display: inline-flex; color: var(--color-accent); flex: none; }
.of-models { display: flex; flex-direction: column; gap: 2px; }
.of-model {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.of-model .of-ico { color: var(--color-text-muted); flex: none; }
.of-model:hover { background: var(--color-accent-tint); }
.of-model.is-on { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.of-model.is-on .of-ico { color: var(--color-accent); }
/* Prix et son suffixe (« / mois ») sur une seule ligne. */
.of-prix { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; width: 100%; }
.of-prix .ic-cell { width: auto; min-width: 3ch; }
.of-suffix { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.of-prix--left { justify-content: flex-start; }
.of-field .ic-cell[role="button"] { display: inline; width: auto; }
/* Tranches de paiement, sous la ligne Paiement : une ligne par tranche, le solde en pied. */
/* L'échéancier vit dans une CELLULE de la table des offres (2026-09-10) : une
   tranche par ligne, serrées, sans le retrait ni le filet du panneau d'avant,
   qui poussaient tout hors de la cellule. */
.of-tranches { display: flex; flex-direction: column; gap: 0; font-size: 12px; white-space: normal; }
.of-tranche { display: flex; align-items: baseline; gap: 6px; min-height: 20px; white-space: nowrap; }
.of-table td .of-tranches { overflow: visible; }
.of-tranche__pct, .of-tranche__mois { display: inline-flex; align-items: baseline; }
.of-tranche .ic-cell { width: auto; min-width: 3ch; }
.of-tranche .lk-x { opacity: 0; }
.of-tranche:hover .lk-x { opacity: 1; }
.of-tranche--foot { color: var(--color-text-muted); font-size: 12px; }
/* Colonne de droite : ce que le modèle a fixé, en gris et en lecture seule. */
.of-ro { color: var(--color-text); font-weight: 400; }   /* lecture seule en NOIR (2026-09-12) : l'atténué reste aux entêtes et indications */
/* Ce que le modèle fixe suit la saisie, séparé par une respiration. */
.of-fixed { margin-top: 14px; }
.of-fixed .of-field__ctl .ic-cell--ro { color: var(--color-text-muted); }
/* « n/a » : la case n'est pas vide, elle est sans objet (même costume que la Trajectoire). */
.of-na { color: var(--color-text-muted); font-size: 11px; opacity: .7; }
/* Onglet Sélection : le catalogue des modèles et ce que le client en retient. */
/* Entête de GROUPE : le modèle et ses règles, écrits une fois. Les lignes ne
   portent que ce qui varie d'une offre à l'autre. */
.of-grp td { background: var(--color-accent-tint); padding: 7px 12px; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.of-grp .of-ico { color: var(--color-accent); vertical-align: -2px; margin-right: 7px; }
.of-grp b { font-size: 12.5px; color: var(--color-on-tint); }
.of-grp__rules { margin-left: 10px; font-size: 11.5px; color: var(--color-text-muted); }
/* Le chevron ouvre ce qui ne tient pas en colonne ; il occupe la gouttière. */
.of-chev { border: 0; background: none; color: var(--color-text-muted); font-size: 13px; cursor: pointer;
           padding: 0 6px 0 0; line-height: 1; transition: transform .12s ease; }
.of-chev.is-on { transform: rotate(90deg); color: var(--color-accent); }
/* Le déplié reste BLANC : un aplat gris sur huit lignes de réglages faisait un
   bloc plus lourd que la table qu'il complète. */
.of-more td { background: var(--color-surface-card); padding: 0 0 0 26px; }
.of-more .of-detail { padding: 10px 16px 12px 0; }
.of-more .of-field { max-width: 560px; }
/* La card et le rabat de sa barre d'outils CLIPPENT leurs coins : la liste des
   suggestions de la recherche s'y perdait, on n'en voyait qu'un liseré. La règle
   porte sur la CARD elle-même, jamais sur la mise en page, sinon elle se perd à
   chaque refonte de l'écran (constaté deux fois le 2026-09-10). */
.of-card, .of-card .lk-cs__tbclip { overflow: visible; }
/* La ligne dépliée ne se surligne pas : le chevron ouvert le dit déjà. */
.of-table .of-row.is-selected td { background: var(--color-surface-card); }
/* Douze colonnes : la table DÉFILE plutôt que de comprimer ses cellules. */
/* défilement : voir .lk-hscroll (standard, designSystem.css) */
.of-mini { font-size: 12px; }
.of-mini .ic-select { max-width: 100%; }
/* Une cellule à plusieurs lignes (l'échéancier) ne se coupe pas. */
.of-table td.of-cell-multi { white-space: normal; overflow: visible; vertical-align: top; padding-top: 7px; }
/* Le crayon suit le nom de l'offre ; il se révèle au survol de la ligne. */
.of-edit:hover { color: var(--color-accent); }
/* La poignée de redimensionnement, dans le bord droit de l'entête. */
.of-th { position: relative; }
.of-th__grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; }
.of-th__grip:hover { background: var(--color-accent-tint-strong); }
/* Comptabilisation : le compte au-dessus, la reconnaissance dessous. */
.of-acc { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; font-size: 12px; }
.of-acc .ic-cell { width: auto; }
/* La table des offres respire (2026-09-12) : des rangs plus hauts, un peu d'air autour des valeurs. */
.of-table td { padding-top: 11px; padding-bottom: 11px; }
.of-table td.of-cell-multi { padding-top: 9px; padding-bottom: 9px; }
.of-table th { padding-top: 12px; padding-bottom: 10px; }
/* Le catalogue (2026-09-12) : tuiles des modèles proposés, pastilles des
   modèles sur demande, bloc d'invitation teinté avec le seul bouton plein. */
.of-card + .of-card { margin-top: 16px; }
.of-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 12px; gap: 12px; }
.of-tile { background: var(--color-surface-page); border-radius: var(--radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.of-tile__nm { font-size: 14px; font-weight: 600; color: var(--color-navy); display: flex; align-items: center; gap: 8px; }
.of-tile__nm .of-ico { color: var(--color-text-muted); }
.of-tile__ph { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }
.of-tile__tg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.of-tile__tg span { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-surface-card); }
.of-dem { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-gap: 24px; gap: 24px; align-items: start; }
.of-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.of-chip { font-size: 13px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface-page); }
.of-ask { background: var(--color-accent-tint); border-radius: var(--radius-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.of-ask__t { font-size: 15px; font-weight: 600; color: var(--color-on-tint); }
.of-ask__s { font-size: 13px; color: var(--color-on-tint); line-height: 1.5; }
.of-cta { align-self: flex-start; margin-top: 4px; display: inline-block; padding: 8px 14px; border-radius: 7px; background: var(--color-accent); color: #fff; font-size: 13px; text-decoration: none; }
.of-cta:hover { background: var(--color-on-tint); color: #fff; }
@media (max-width: 900px) { .of-dem { grid-template-columns: 1fr; } }

/* Trajectoire, plan par offre (04.09.2026) : particularités seules, le costume de table vit dans designSystem.css. */
/* défilement : voir .lk-hscroll (standard, designSystem.css) */
.op-table { font-size: 12.5px; min-width: 100%; }
.op-table .op-grouphead th { border-bottom: none; padding: 6px 8px 2px; text-align: center; text-transform: none; letter-spacing: .04em; }
/* Trois familles de colonnes : le CA se lit, le volume et le prix se saisissent. */
.op-grp--ca { background: var(--color-accent-tint-strong); color: var(--color-on-tint); }
.op-grp--vol, .op-grp--px, .op-grp--cost { background: var(--color-accent-tint); color: var(--color-on-tint); }
.op-table th { text-align: right; }
.op-table th.op-lbl, .op-table th.op-unit, .op-table td.op-lbl, .op-table td.op-unit { text-align: left; }
.op-lbl { font-weight: 500; color: var(--color-text); }
.op-lbl .of-ico { vertical-align: -2px; color: var(--color-text-muted); margin-right: 4px; }
.op-unit { color: var(--color-text-muted); font-size: 11px; }
.op-sub { display: block; font-size: 10px; color: var(--color-text-muted); }
.op-muted { color: var(--color-text-muted); }
/* Ligne de compte en blanc, aérée, comme les titres de bloc de l'Offre ; elle garde son sous-total. */
.op-acc td { background: var(--color-surface-card); padding-top: 16px; padding-bottom: 6px; font-weight: 700; border-bottom: 1px solid var(--color-border); }
.op-acc td.op-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.op-tot td { background: var(--color-accent-tint-strong); font-weight: 700; border-top: 1px solid var(--color-border); }
.op-row:hover td { background: var(--color-surface-page); }
.op-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); }
/* Le CA calculé se lit en texte ; tapé directement, il passe au bleu du champ. */
.op-ca .ic-cell { color: var(--color-text); }
.op-ca.op-in .ic-cell { color: var(--color-field-focus); }
.op-ca .ic-cell--edit { color: var(--color-field-focus); }
/* Lignes sous une offre : en retrait sous leur offre ; l'offre lit alors la somme (op-sum). */
.op-parent td.op-lbl { font-weight: 600; }
/* Le libellé d'une ligne part au même x que le nom de son offre (gouttière :
   8 px de cellule + icône 14 px + 8 px) ; poignée et croix vivent DANS la
   gouttière, révélées au survol, sans prendre de place (2026-09-12). */
.op-table .op-line td.op-lbl.lk-gutter { padding-left: 30px; font-weight: 400; position: relative; }
.op-table .op-line .lk-grip { left: 2px; }
.op-table .op-line .lk-x.lk-del { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); padding: 0; }
/* Le libellé occupe ce qui reste après la croix et se coupe plutôt que de déborder. */
.op-table .op-line td.op-lbl.lk-gutter { display: flex; align-items: baseline; gap: 4px; }
.op-line__lbl { flex: 1 1; min-width: 0; overflow: hidden; }
.op-line__lbl .ic-cell { width: 100%; min-width: 6ch; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-sum { color: var(--color-text-muted); }
.op-parent td.op-sum:first-of-type, .op-parent .op-sum { font-weight: 500; }
/* « ＋ ligne » se révèle au survol de l'offre, comme le chevron d'un groupe. */
/* « ＋ ligne » se pose au BOUT de la cellule, pas à la suite du nom : derrière
   un nom long, il tombait sous l'écrêtage de la colonne et devenait
   introuvable. */
.op-addline { float: right; border: none; background: transparent; color: var(--color-accent); font: inherit; font-size: 11px; cursor: pointer; opacity: 0; padding: 0 2px; }
.op-row:hover .op-addline, .op-addline:focus { opacity: 1; }
.op-lbl > span { display: inline-block; max-width: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* « n/a » : la case n'est pas vide, elle est sans objet. */
.op-na { color: var(--color-text-muted); font-size: 11px; opacity: .7; }
/* L'entête Offre se tire par sa poignée droite (comme la table des offres). */
.op-table th.op-th { position: relative; }
.op-th__grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; }
.op-th__grip:hover { background: var(--color-accent-tint-strong); }

/* Chantier — sommaire du module `wip`. Rien d'inventé : tokens de la charte. */
.wip-lead {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--color-text);
}

.wip-rule {
  margin: 0 0 1.1rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.wip-empty {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* Intertitre de la liste — même voix que le label d'en-tête de card. */
.wip-listtitle {
  margin: 0 0 .35rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wip-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* Entrée de sommaire : un lien, pas un bouton d'action (pas de cadre). */
.wip-link {
  border: 0;
  background: transparent;
  padding: .4rem .5rem;
  margin-left: -.5rem;
  font: inherit;
  font-size: .9rem;
  color: var(--color-accent);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.wip-link:hover {
  background: var(--color-accent-tint);
}

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

/* Entrées de la section, en tuiles au-dessus de la Synthèse (2026-09-01).
   Même geste que les portes du récit People, en tenue CLAIRE : sur le fond de
   page, une tuile blanche à filet, titre navy et glose atténuée. */
.hcs-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 14px;
}
.hcs-door {
  display: flex; align-items: center; gap: 12px;
  text-align: left; cursor: pointer;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-card);
  font: inherit;
  transition: background .16s ease, border-color .16s ease;
}
.hcs-door:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.hcs-door .people-import__ico { width: 22px; height: 22px; flex: none; color: var(--color-accent); }
.hcs-door span { display: flex; flex-direction: column; gap: 3px; }
.hcs-door b { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--color-navy); }
.hcs-door small { font-size: 11.5px; line-height: 1.4; color: var(--color-text-muted); }

/* Synthèse des effectifs — tuiles, frise mensuelle, mouvements.
   Tokens de la charte uniquement : ardoise pour le réel, ardoise clair pour le
   prévisionnel, navy pour les chiffres. Aucun terracotta : un départ n'est pas
   une alerte. */

/* Quatre tuiles SUR UNE SEULE LIGNE : l'évolution de l'exercice (plus large,
   elle porte deux nombres), la moyenne, puis les deux masses. Elles se
   lisent ensemble, une rupture en deux rangées casserait la phrase. Les
   colonnes sont donc explicites, et `minmax(0, 1fr)` les autorise à se serrer
   plutôt qu'à déborder.
   La bande KPI de la card est un flex : sans largeur explicite, la grille se
   replie sur une seule colonne et les tuiles s'empilent. */
.hcs__kpis {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  width: 100%;
}
.hcs__kpi {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  background: var(--color-surface-card);
  min-width: 0;
}
.hcs__kpi--focus { border-color: var(--color-accent); background: var(--color-accent-tint); }
.hcs__kpi-lbl {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.hcs__kpi--focus .hcs__kpi-lbl { color: var(--color-on-tint); }
.hcs__kpi-val {
  font-size: clamp(17px, 1.55vw, 24px); color: var(--color-navy); margin-top: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hcs__kpi-val span { font-size: 12px; color: var(--color-text-muted); }
.hcs__kpi-val .hcs__arrow { font-size: 0.7em; color: var(--color-text-muted); margin: 0 2px; }
.hcs__kpi-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.hcs__kpi-lbl, .hcs__kpi-hint { overflow-wrap: anywhere; }
.hcs__kpi--focus .hcs__kpi-hint { color: var(--color-on-tint); }

/* ── Frise mensuelle ─────────────────────────────────────────────────────── */
.hcs__chart { padding: 4px 0 0; }
.hcs__gutter { width: 34px; flex: 0 0 34px; }
.hcs__bands { display: flex; gap: 2px; margin-bottom: 4px; }
.hcs__band {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; padding: 3px 0;
}
/* Trois temps, trois teintes : le PASSÉ dans la famille navy (l'archive), le
   RÉALISÉ en ardoise claire, le PRÉVISIONNEL en ardoise pleine. Dérivées des
   tokens par color-mix, jamais un hex inventé. */
/* Passé en GRIS BLEUTÉ léger (retour Olivier 2026-09-01) : la famille navy
   pesait autant que le présent. Dérivé de l'ardoise soft, jamais un hex. */
.hcs__band--past {
  background: color-mix(in srgb, var(--color-accent-soft) 30%, #fff);
  color: var(--color-text-muted);
}
.hcs__band--real { background: var(--color-accent-tint-strong); color: var(--color-on-tint); }
.hcs__band--fore { background: var(--color-accent); color: #fff; }
.hcs__band:first-of-type { border-radius: 4px 0 0 4px; }
.hcs__band:last-of-type { border-radius: 0 4px 4px 0; }
.hcs__band:only-of-type { border-radius: 4px; }

/* Haut : l'axe part de zéro, donc la variation utile n'occupe que le sommet
   du graphe. Une hauteur généreuse lui rend sa lisibilité (2026-08-29). */
.hcs__plot { position: relative; height: 300px; }
.hcs__bars { position: absolute; inset: 0; display: flex; gap: 2px; }
.hcs__axis {
  position: relative;
  font-size: 10px; color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.hcs__axis span { position: absolute; right: 6px; }
.hcs__axis-unit {
  top: -14px; right: 6px;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.hcs__slot { flex: 1 1; display: flex; flex-direction: column; justify-content: flex-end; }
.hcs__slot--edge { border-right: 1px solid var(--color-border); }
/* La valeur se pose DANS la colonne, en haut : l'axe donne l'ordre de grandeur,
   le chiffre donne le mois, et le graphe ne paie plus une ligne de texte au
   sommet de chaque barre. Elle repasse au-dessus quand la barre est trop
   courte pour l'accueillir. */
.hcs__val {
  font-size: 10px; color: var(--color-navy); text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; line-height: 1.2; padding-bottom: 2px;
}
.hcs__val--in { padding: 3px 0 0; }
.hcs__bar { background: var(--color-accent); border-radius: 3px 3px 0 0; overflow: hidden; }
/* Chaque fond a son texte : blanc sur l'ardoise pleine, navy sur les deux
   teintes claires, où le blanc ne se lirait pas. */
.hcs__bar .hcs__val--in { color: #fff; }
.hcs__bar--past { background: color-mix(in srgb, var(--color-accent-soft) 55%, #fff); }
.hcs__bar--past .hcs__val--in { color: var(--color-text); }
.hcs__bar--fore { background: var(--color-accent-soft); }
.hcs__bar--fore .hcs__val--in { color: var(--color-navy); }

/* Point de départ de l'exercice : il ne bouge pas avec la fenêtre. */
.hcs__anchor {
  position: absolute; left: 34px; right: 0;
  border-top: 1px dashed var(--color-navy); opacity: 0.55;
}
.hcs__anchor-lbl {
  position: absolute; right: 0;
  font-size: 10px; color: var(--color-navy); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  background: var(--color-surface-card); padding: 0 3px;
}

.hcs__axis-x { display: flex; gap: 2px; margin-top: 4px; }
.hcs__tick { flex: 1 1; text-align: center; font-size: 10px; color: var(--color-text-muted); }
.hcs__tick--year { color: var(--color-navy); }

/* Les deux bascules de l'entête, dans un seul bloc que le Guide peut viser. */
.hcs__views { display: flex; align-items: center; gap: 10px; }

/* Frise de planification — ardoise uniquement, aucune couleur hors charte.
   Trois signaux qui ne se recouvrent pas : le fond (le taux a changé), le
   couloir (combien de temps), le point (c'est le salaire, pas le taux). */
/* Respiration : le titre du panneau, les filtres et la table sont TROIS
   registres différents — les coller les faisait lire comme un seul bloc. */
/* La frise vit dans une card SANS padding (corps `flush` du standard de
   carte) : elle porte donc le sien, sinon les noms se collent au bord
   (2026-08-27). Les bandes pleine largeur (toolbar) le débordent à -16px. */
.pt { margin-top: 16px; padding: 0 16px; }
/* Filtres à gauche (ils raccourcissent la frise), légende à droite.

   UNE SEULE FAMILLE DE CONTRÔLES sur la rangée : le segmenté ardoise de
   Tableau | Frise. Le toggle Actifs / Tous de PersonFilterBar porte lui aussi
   la bascule standard depuis le 2026-08-26 : il ne reste ici que le sélecteur
   et la recherche, calés à la même hauteur. */
/* La rangée de contrôles EST la bande de filtres standard (.lk-filterbar--row,
   fond rail + filet) : elle saigne jusqu'aux bords de la card, qui porte un
   padding de 14/16. Elle ne garde ici que son espacement propre. */
.pt-ctl { gap: 16px; row-gap: 12px; margin: 0 -16px 14px; }
/* Bascule de groupement : la même que Tableau | Frise (hr-moves__view), pour
   qu'on n'apprenne pas deux fois le même geste. */
.pt-grpsw { display: flex; align-items: center; gap: 8px; }
.pt-grpsw__lb {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.pt-ctl .pfb { gap: 10px; margin-right: 0; }
.pt-ctl .pfb-search { min-width: 170px; }
/* En-tête GELÉ (2026-08-26) : la frise fait souvent plus d'un écran de haut,
   et sans les mois sous les yeux on ne sait plus lire une case. La boîte
   défile donc elle-même, en hauteur comme en largeur, et l'en-tête colle en
   haut. Le plafond laisse la place au chrome (barre, titre, filtres). */
.pt-scroll { overflow: auto; max-height: calc(100vh - 300px); }
/* Les mois n'ont que deux ou trois chiffres à porter : étalés sur toute la
   largeur d'un grand écran, ils faisaient 115 px pour « 100 ». La frise est
   donc CADRÉE — colonnes de libellés courtes, piste plafonnée — et calée à
   gauche plutôt qu'étirée. */
.pt-in { min-width: 964px; }

.pt-head {
  display: grid; grid-template-columns: 172px 124px 26px 1fr; grid-gap: 10px; gap: 10px; align-items: end;
  padding: 6px 0 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 6;
  background: var(--color-surface-card);
}
.pt-axis { display: block; }
/* Bandeaux d'année : chaque année se NOMME, et un filet plein la sépare de la
   suivante (2026-08-22). Sans eux, deux janviers se confondaient. */
.pt-yband { display: flex; gap: 3px; margin-bottom: 5px; }
.pt-y {
  flex: 1 1; text-align: center; padding: 3px 0; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  background: var(--color-accent-tint-strong); color: var(--color-accent);
}
.pt-y--last:not(.pt-y--first) { background: var(--color-accent); color: #fff; }
.pt-ticks { display: flex; }
/* Fenêtre : la LARGEUR décide du nombre d'années, les flèches du décalage. */
.pt-win { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pt-win em {
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  min-width: 3.6em; text-align: center;
}
.pt-win button {
  width: 26px; height: 26px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.pt-win button:hover:not(:disabled) { border-color: var(--color-accent-soft); color: var(--color-accent); background: var(--color-accent-tint); }
.pt-win button:disabled { opacity: .3; cursor: default; }
.pt-tick {
  flex: 1 1; text-align: center; min-width: 0; overflow: hidden;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border-inner);
}
.pt-tick:first-child { border-left: 0; }
.pt-tick.is-closed { color: var(--color-accent-soft); }

.pt-grp {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 14px 0 5px;
}
/* Le ＋ du groupe reste visible (comme les ＋ du tableau) : c'est une porte
   d'entrée, pas une action de ligne. */
.pt-grp__add .hr-evol__rowbtn { opacity: 1; }
.pt-row {
  display: grid; grid-template-columns: 172px 124px 26px 1fr; grid-gap: 10px; gap: 10px; align-items: center;
  margin-bottom: 3px;
}
.pt-name {
  font-size: 12.5px; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-dept {
  font-size: 11px; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-name--head {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted);
}
/* En-tête pressable : le tri se déclenche sur la colonne elle-même. */
.pt-sort {
  display: flex; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.pt-sort:hover { color: var(--color-accent); }
.pt-sort.is-active { color: var(--color-accent); }
.pt-sort__ind { font-size: 9px; opacity: .55; }
.pt-sort.is-active .pt-sort__ind { opacity: 1; }

.pt-track {
  position: relative; height: 24px; overflow: hidden;
  background: var(--color-surface-th); border-radius: 5px;
}
/* La case porte SON CHIFFRE. Encoder le taux par une hauteur donnait cinq
   pixels d'écart entre 80 et 100 % : illisible. */
.pt-cell {
  position: absolute; top: 0; bottom: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-border) 55%, #fff);
  border-right: 1px solid var(--color-surface-card);
}
.pt-cell b {
  font-size: 10.5px; font-weight: 600; color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Lecture par DÉPARTEMENT : ici la couleur dit une DIRECTION, pas une
   simulation — l'effectif monte ou descend. C'est le seul endroit du module où
   sage et terracotta portent un sens, parce que la question posée est
   « ça monte ou ça descend ? » et non « qui coûte plus cher ? ». */
.pt-cell.is-up { background: color-mix(in srgb, var(--color-sage) 17%, var(--color-surface-card)); }
.pt-cell.is-up b { color: var(--color-sage); font-weight: 700; }
.pt-cell.is-down { background: color-mix(in srgb, var(--color-terracotta) 15%, var(--color-surface-card)); }
.pt-cell.is-down b { color: var(--color-terracotta); font-weight: 700; }
.pt-sw--up { background: color-mix(in srgb, var(--color-sage) 17%, var(--color-surface-card)); }
.pt-sw--dn { background: color-mix(in srgb, var(--color-terracotta) 15%, var(--color-surface-card)); }

/* Deux faits, deux signaux, UNE famille de couleur : l'ambre de la charte
   (2026-08-26). Un mois SIMULÉ se peint en moutarde clair — l'aplat dit la
   DURÉE du passage et se voit d'un coup d'œil, là où deux barres fines se
   lisaient mal ; un changement de taux se marque d'un FILET ambre à la
   frontière du mois où ça bascule — il dit l'INSTANT. L'ardoise reste au
   chrome (bandeaux d'année, survol) : ce qui bouge ne se confond pas avec ce
   qui encadre. */
.pt-cell.is-sim { background: color-mix(in srgb, var(--color-amber) 22%, var(--color-surface-card)); }
.pt-cell.is-sim b { color: var(--color-amber); font-weight: 700; }
.pt-cell.is-chg { border-left: 2px solid var(--color-amber); }
.pt-cell.is-zero { background: var(--color-surface-card); box-shadow: inset 0 0 0 1px var(--color-border-inner); }
.pt-cell.is-zero b { color: var(--color-border); }
.pt-cell.is-sim.is-zero b { color: color-mix(in srgb, var(--color-amber) 55%, var(--color-surface-card)); }

/* Repérage dans la grille (2026-08-26) : la LIGNE survolée s'éclaire sur toute
   sa largeur, et la COLONNE du mois survolé sur toutes les lignes. Vingt-quatre
   colonnes de trois chiffres, on perd la sienne dès qu'on descend. Les deux
   repères sont posés APRÈS les états de cellule pour gagner sur eux : ils sont
   transitoires, ils n'effacent aucune information durable. */
.pt-row:hover { background: var(--color-accent-tint); border-radius: 6px; }
.pt-cell.is-hovm { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-card)); }
.pt-cell.is-hovm b { color: var(--color-accent); font-weight: 700; }
.pt-tick.is-hovm { color: var(--color-accent); background: var(--color-accent-tint); border-radius: 4px; }

/* Groupée par cause : une barre = un mouvement, posée sur ses mois. Pas de
   profil de taux derrière — c'est la décision qu'on regarde, pas la personne.
   Une colonne de plus (département, avant la valeur) : la grille s'élargit
   d'autant, la piste absorbe la différence. */
.pt-in--cause .pt-head, .pt-in--cause .pt-row { grid-template-columns: 172px 110px 116px 1fr; }
/* Vue par personne : deux colonnes de dates entre le département et le crayon. */
.pt-in--person .pt-head, .pt-in--person .pt-row { grid-template-columns: 172px 124px 66px 66px 26px 1fr; }
.pt-date {
  font-size: 11px; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Crayon en bout de ligne — révélé au survol seulement (standard charte). */
.pt-act { display: flex; align-items: center; justify-content: center; }
.pt-act .hr-evol__rowbtn { opacity: 0; transition: opacity .12s; }
.pt-row:hover .pt-act .hr-evol__rowbtn, .pt-act .hr-evol__rowbtn:focus-visible { opacity: 1; }
.pt-bar {
  position: absolute; top: 5px; bottom: 5px; z-index: 3;
  border-radius: 3px; opacity: .85;
}
.pt-none {
  font-size: 12.5px; color: var(--color-text-muted); padding: 14px 2px;
}

/* Mois clos : on n'y planifie plus. */
.pt-closed {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  border-right: 1px dashed var(--color-accent-soft);
}

/* Sous les filtres, à gauche ; l'écart d'avec la frise vit ici. */
 /* La légende décrit la frise : elle se pose JUSTE au-dessus d'elle
   (2026-08-27). Elle flottait 26 px plus haut, détachée de ce qu'elle
   explique. */
.pt-leg {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 10px 0 6px;
  font-size: 11px; color: var(--color-text-muted); white-space: nowrap;
}
.pt-leg span { display: flex; align-items: center; gap: 6px; }
.pt-sw { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.pt-sw--sim  { background: color-mix(in srgb, var(--color-amber) 22%, var(--color-surface-card)); }

/* Changement d'année : une BANDE BLANCHE épaisse (2026-08-26), pas un filet.
   Deux exercices côte à côte doivent se lire comme deux tables posées l'une à
   côté de l'autre — un trait fin les laissait couler l'un dans l'autre. */
.pt-ysep {
  position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px;
  z-index: 5; pointer-events: none;
  background: var(--color-surface-card);
}
.pt-head .pt-ysep { top: -4px; }

/* ＋ / − sur la ligne d'un DÉPARTEMENT : un poste vacant y naît AVEC son
   département, donc avec son coût de référence. Sur le graphique, il naissait
   sans — c'est ce qui manquait pour le valoriser à cinq ans. */
.pt-plus { display: flex; gap: 3px; justify-content: center; }
.pt-plus button {
  width: 20px; height: 20px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text-muted); cursor: pointer;
  font-size: 11px; line-height: 1; display: grid; place-items: center; opacity: 0;
  transition: opacity .12s;
}
.pt-row:hover .pt-plus button, .pt-plus button:focus-visible { opacity: 1; }
.pt-plus button:hover { border-color: var(--color-accent-soft); color: var(--color-accent); background: var(--color-accent-tint); }

/* « La trajectoire se trace » — tokens charte uniquement : ardoise = accent,
   vert = sage (delta positif), grille = filet. Reprise à l'identique du proto
   design (keyframes draw / area / pop1-3, easing cubic-bezier(.6,0,.3,1)). */
.tjs { display: block; width: 200px; height: 140px; position: relative; }
.tjs svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tjs__grid { stroke: var(--color-border); stroke-width: 1; }
.tjs__area { fill: var(--color-accent); opacity: 0; animation: tjs-area 6s infinite; }
.tjs__line {
  stroke: var(--color-accent); stroke-width: 2.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: tjs-draw 6s cubic-bezier(.6, 0, .3, 1) infinite;
}
.tjs__dot {
  fill: var(--color-surface-card); stroke: var(--color-accent); stroke-width: 2.5;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.tjs__d1 { animation: tjs-pop1 6s infinite; }
.tjs__d2 { animation: tjs-pop2 6s infinite; }
.tjs__d3 { animation: tjs-pop3 6s infinite; stroke: var(--color-sage); }
.tjs__lbl {
  font-family: inherit; font-size: 11px; font-weight: 600; fill: var(--color-sage);
  opacity: 0; animation: tjs-pop3 6s infinite; transform-box: fill-box; transform-origin: center;
}
@keyframes tjs-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  48% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes tjs-area {
  0%, 40% { opacity: 0; }
  55% { opacity: .09; }
  88% { opacity: .09; }
  100% { opacity: 0; }
}
@keyframes tjs-pop1 {
  0%, 14% { opacity: 0; transform: scale(.4); }
  20% { opacity: 1; transform: scale(1.15); }
  24% { transform: scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tjs-pop2 {
  0%, 30% { opacity: 0; transform: scale(.4); }
  36% { opacity: 1; transform: scale(1.15); }
  40% { transform: scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tjs-pop3 {
  0%, 47% { opacity: 0; transform: scale(.4); }
  53% { opacity: 1; transform: scale(1.15); }
  57% { transform: scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tjs__line { animation: none; stroke-dashoffset: 0; }
  .tjs__area { animation: none; opacity: .09; }
  .tjs__dot, .tjs__lbl { animation: none; opacity: 1; transform: none; }
}

/* Accueil People — proto v6 : l'accueil s'ouvre sur ce qui bouge.
   Ardoise seul accent ; le vert (sage) ne dit qu'une hausse d'EPT ; aucun
   terracotta sur cette page. */
.ph-home { max-width: 1120px; }
/* De l'air sous la salutation : la première rangée ne colle plus au titre. */
.ph-home > :first-child { margin-top: 10px; }
.ph-hello { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.ph-hello__hi { font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 24px; color: var(--color-navy); }
.ph-hello__sub { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.ph-hello__date { font-size: 12px; color: var(--color-text-muted); }
.ph-home__lead {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Haut de page : le Résumé à gauche, les gestes rapides en 2×2 à droite ── */
.ph-top {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px;
  align-items: stretch; margin-bottom: 22px;
}
/* Héros du récit — variante B (2026-09-01) : carte BLANCHE, le péristyle en
   filigrane qui se met en couleur à l'arrivée (animation sur currentColor,
   coupée si la personne préfère réduire les mouvements). */
.ph-hero {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 22px; background: var(--color-surface-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  font-family: inherit;
  transition: border-color .15s ease;
}
.ph-hero:hover { border-color: var(--color-accent); }
.ph-hero__mark {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.ph-hero__eyebrow {
  position: relative;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 14px;
}
.ph-hero__title {
  position: relative;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-size: 23px; line-height: 1.2;
  color: var(--color-navy); max-width: 72%;
}
.ph-hero__sub { position: relative; font-size: 12.5px; color: var(--color-text-muted); margin: 8px 0 16px; line-height: 1.5; }
.ph-hero__cta {
  position: relative;
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent); color: #fff;
  font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 6px;
}
.ph-hero:hover .ph-hero__cta { filter: brightness(.95); }
.ph-hero__cta-play { width: 15px; height: 15px; fill: #fff; flex: none; }

/* ── Ce qui a bougé / À confirmer ────────────────────────────────────────── */
.ph-move { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; margin-bottom: 26px; align-items: stretch; }
.ph-card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 18px 22px;
}
/* Côte à côte à MÊME hauteur : le lien de pied s'ancre en bas. */
.ph-move .ph-card { display: flex; flex-direction: column; }
.ph-move .ph-card__more { margin-top: auto; padding-top: 12px; }
.ph-card__title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-weight: 500; font-size: 19px;
  margin: 0 0 10px; color: var(--color-navy);
}
.ph-card__title small {
  font-family: "Inter", system-ui, sans-serif; font-size: 13.5px; font-weight: 400;
  color: var(--color-text-muted); margin-left: 8px;
}
.ph-card__more {
  display: inline-block; margin-top: 12px; border: none; background: none; padding: 0;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--color-accent);
}
.ph-card__more:hover { text-decoration: underline; }

.ph-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ph-card__head .ph-home__lead { margin: 0; }
.ph-lg { list-style: none; margin: 0; padding: 0; }
.ph-lg li {
  display: grid; grid-template-columns: auto 1fr auto; grid-gap: 12px; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--color-border-inner); font-size: 14px;
}
.ph-lg__ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent-tint); color: var(--color-accent);
  font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ph-lg__date { display: block; font-size: 11px; color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ph-lg li:first-child { border-top: 0; }
.ph-lg__d { color: var(--color-text-muted); font-size: 13px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; min-width: 40px; }
.ph-lg__d.is-now { color: var(--color-accent); font-weight: 600; }
.ph-lg__who { font-weight: 500; color: var(--color-text); }
.ph-lg__what { color: var(--color-text-muted); }
.ph-lg__delta {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; color: var(--color-text-muted);
  font-size: 13.5px; white-space: nowrap;
}
.ph-lg__delta.is-up { color: var(--color-sage); }
.ph-lg__tag {
  display: inline-block; font-size: 11px; font-weight: 500;
  color: var(--color-accent); background: var(--color-accent-tint);
  border-radius: 5px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px;
}
.ph-lg__moremark { color: var(--color-text-muted); font-size: 13px; }
.ph-lg__empty { margin: 4px 0 0; font-size: 14px; color: var(--color-text-muted); }

/* ── Tuiles d'action, format compact ─────────────────────────────────────── */
.ph-tiles {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 12px; gap: 12px;
  margin-bottom: 22px;
}
.ph-tiles--four { grid-template-columns: repeat(4, 1fr); }
/* Zone des gestes : tuiles 2×2 à gauche, liens empilés à droite. */

.ph-tile {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 8px; padding: 12px 14px; min-height: 64px;
  font-family: inherit;
  transition: border-color .12s ease;
}
.ph-tile:hover { border-color: var(--color-accent); }
.ph-tile .people-import__ico { width: 22px; height: 22px; flex: none; color: var(--color-accent); }
.ph-tile__txt { min-width: 0; }
/* Titre et glose tiennent chacun UNE ligne (2026-09-01) : les retours à la
   ligne inégaux cassaient le rythme des colonnes. */
.ph-tile__txt b {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-tile__txt > span {
  display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-tile__arrow { margin-left: auto; color: var(--color-text-muted); font-size: 13px; }
.ph-tile:hover .ph-tile__arrow { color: var(--color-accent); }
.ph-tile--sim { background: var(--color-accent-tint); border-color: var(--color-accent-soft); }

/* ── Quoi de neuf ────────────────────────────────────────────────────────── */
.ph-news { padding: 14px 22px; }
.ph-top .ph-news { overflow: auto; min-height: 0; }
.ph-news ul { list-style: none; margin: 0; padding: 0; }
.ph-news li {
  display: flex; gap: 16px; font-size: 14px; color: var(--color-text);
  line-height: 1.45; padding: 8px 0; border-top: 1px solid var(--color-border-inner);
}
.ph-news li:first-child { border-top: 0; }
.ph-news__date { color: var(--color-text-muted); font-size: 13px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-news__txt { flex: 1 1; }
.ph-news li::after { content: '›'; color: var(--color-accent); }

.ph-back {
  background: none; border: none; padding: 0; margin: 0 0 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--color-accent);
}
.ph-back:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ph-top, .ph-move { grid-template-columns: 1fr; }
  .ph-tiles, .ph-tiles--four { grid-template-columns: repeat(2, 1fr); }
}

/* Mises à jour du réel — liens discrets sous les gestes rapides. */
.ph-updates {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin: -8px 0 26px; padding: 0 2px;
}
.ph-updates button {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--color-accent);
}
.ph-updates button:hover { text-decoration: underline; }
.ph-updates .people-import__ico { width: 15px; height: 15px; color: var(--color-accent); }

/* CARTES DE MODULE de l'Accueil (2026-09-18) : fond blanc, filet, la carte
   entière est le bouton. Trois de front, puis deux, puis une. */
/* CINQ CADRANS (2026-09-18) : les trois modules sur le premier rang, le guide
   et les nouvelles sur le second. Même costume pour les cinq — la page se lit
   comme une grille, plus comme deux colonnes posées sur un fond. */
.wc-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 12px; gap: 12px; margin-bottom: 12px; }
.wcd {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 13px 15px 14px; text-align: left; cursor: pointer;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(26, 18, 25, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wcd:hover { border-color: var(--color-accent-soft); box-shadow: 0 2px 8px rgba(26, 18, 25, .07); }
.wcd__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wcd__t {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
/* La flèche ne s'annonce qu'au survol : au repos, la carte se lit comme un
   bloc de chiffres, pas comme un bouton de plus. */
.wcd__go { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-accent); opacity: 0; transition: opacity .15s ease; }
.wcd:hover .wcd__go { opacity: 1; }
.wcd__body { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.wcd__empty { font-size: 12px; color: var(--color-text-muted); }

.wcd-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wcd-stat__l { font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap; }
.wcd-stat__v { font-size: 21px; font-weight: 600; color: var(--color-navy); line-height: 1.15; letter-spacing: -.01em; }
.wcd-stat__n { font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap; }
.wcd-stat__n.is-up { color: var(--color-sage); }
.wcd-stat__n.is-down { color: var(--color-terracotta); }

/* ── Accueil (2026-09-16, deux colonnes le 2026-09-17) ───────────────────
   La dernière nouveauté en tête, pleine largeur ; dessous, les guides à
   gauche et les nouvelles à droite. Pas de cards : des blocs séparés d'un
   filet, la crème ambre marquant ce qui appelle un geste. */

/* Largeur de LECTURE bornée (2026-09-16) : sur un grand écran, le bouton
   « Reprendre » et les liens de section partaient à un mètre de leur texte.
   Le gabarit reste pleine largeur, c'est le contenu qui se tient. */
.wc-hello, .wc-body, .wc-page > .tabs { max-width: 1060px; }

/* Les deux colonnes : les guides prennent la place qui reste, les nouvelles
   une colonne fixe — une liste de titres courts ne gagne rien à s'étaler.
   Sous 860 px, elles reprennent leur file. */
.wc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  grid-gap: 0 32px;
  gap: 0 32px;
  align-items: start;
}
.wc-col { min-width: 0; }
@media (max-width: 860px) {
  .wc-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.wc-hello { padding: 2px 0 2px; }
/* La page RESPIRE (2026-09-16) : la première carte descend sous la
   salutation, et les sections s'espacent davantage. */
.wc-body > .wc-hi:first-child { margin-top: 14px; }
.wc-hello h1 {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 22px; font-weight: 600; color: var(--color-navy);
  margin: 0;
}

.wc-body { padding-bottom: 8px; }

/* ── La nouveauté mise en avant ──────────────────────────────────────── */
.wc-hi {
  background: color-mix(in srgb, var(--color-amber) 12%, var(--color-surface-card));
  border-left: 3px solid var(--color-amber);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 14px 18px;
}
.wc-hi__k {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber-dark);
}
.wc-hi b {
  display: block;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; color: var(--color-navy);
  line-height: 1.35;
  margin: 6px 0 3px;
}
.wc-hi small { font-size: 12.5px; color: var(--amber-dark); }

/* ── Sections ─────────────────────────────────────────────────────────── */
.wc-rule { border-top: 1px solid var(--color-border); margin: 34px 0 24px; }
.wc-sec { display: flex; align-items: baseline; gap: 10px; }
.wc-sec h2 {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; color: var(--color-navy);
  margin: 0;
}
.wc-more {
  margin-left: auto;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-accent);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.wc-more:hover { text-decoration: underline; }
.wc-lead { margin: 5px 0 16px; font-size: 12.5px; color: var(--color-text-muted); }
.wc-lbl {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 26px 0 4px;
}

/* ── Le guide à reprendre ─────────────────────────────────────────────── */
.wc-res {
  display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--color-amber) 12%, var(--color-surface-card));
  border-left: 3px solid var(--color-amber);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 14px 18px;
}
.wc-res__t { flex: 1 1; min-width: 0; }
.wc-res__t b {
  display: block;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; color: var(--color-navy);
  line-height: 1.35;
  margin: 5px 0 3px;
}
.wc-res__t small { display: block; font-size: 12.5px; color: var(--amber-dark); }
/* Les étapes en traits de même longueur, comme dans la bulle du Guide. */
.wc-steps { display: flex; gap: 4px; margin-top: 9px; max-width: 230px; }
.wc-steps i {
  flex: 1 1; height: 4px; border-radius: 2px; display: block;
  background: color-mix(in srgb, var(--color-amber) 22%, transparent);
}
.wc-steps i.is-past { background: color-mix(in srgb, var(--color-amber) 55%, transparent); }
.wc-steps i.is-now { background: var(--color-amber); }
.wc-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: #fff; background: var(--color-accent);
  border: 0; border-radius: 7px;
  padding: 9px 16px;
  cursor: pointer;
}
.wc-btn:hover { background: color-mix(in srgb, var(--color-accent) 88%, #000); }

/* ── Lignes de guide : gouttière d'icône fixe, donc intitulés alignés ─── */
.wc-grow {
  display: flex; align-items: center; gap: 0;
  width: 100%; padding: 13px 0;
  border-bottom: 1px solid var(--color-border-inner);
  font: inherit; text-align: left;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
}
.wc-grow:hover .wc-gt { color: var(--color-accent); }
.wc-gic {
  width: 21px; flex: 0 0 auto;
  display: flex; align-items: center;
  color: var(--color-text-muted);
}
.wc-gic .sb-ic { width: 16px; height: 16px; }
.wc-gt { flex: 1 1; min-width: 0; font-size: 13.5px; color: var(--color-text); line-height: 1.35; }
.wc-gm {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap;
}
.wc-grow.is-done .wc-gt { color: var(--color-text-muted); }
.wc-ck {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--color-accent-soft);
  background: var(--color-surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.wc-ck:hover { border-color: var(--color-accent); }
.wc-ck.is-on { background: var(--color-accent); border-color: var(--color-accent); }

/* ── Les nouvelles ────────────────────────────────────────────────────── */
.wc-nlist { margin-top: 12px; }
.wc-nrow {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-inner);
}
.wc-ndate {
  width: 58px; flex: 0 0 auto; padding-top: 1px;
  font-size: 12.5px; color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wc-nt { flex: 1 1; min-width: 0; }
.wc-nt b {
  display: block; font-weight: 500; font-size: 13.5px;
  color: var(--color-navy); line-height: 1.35;
}
.wc-nt small { font-size: 12.5px; color: var(--color-text-muted); }

/* ── Progression (onglet Guides) ──────────────────────────────────────── */
.wc-prog { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--color-text); }
.wc-pct { margin-left: auto; font-size: 12.5px; color: var(--color-text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.wc-bar {
  height: 5px; border-radius: 999px; margin: 10px 0 4px; overflow: hidden;
  background: var(--color-accent-tint-strong);
}
.wc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .25s ease; }

.wc-empty { font-size: 13px; color: var(--color-text-muted); padding: 16px 0; }

@media (max-width: 720px) {
  .wc-res { flex-direction: column; align-items: stretch; }
  .wc-btn { justify-content: center; }
}

/* ── GUIDES, mise en forme du proto (2026-09-18) ──────────────────────────
   Une ligne par parcours : le module et sa mesure en petites capitales, le
   titre, puis l'invitation à l'ouvrir. Un filet sépare les lignes, jamais de
   cadre par ligne — la carte est la seule frontière. */
.wcg-list { display: flex; flex-direction: column; }
.wcg-row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: 18px 2px; border-top: 1px solid var(--color-border-inner);
}
.wcg-row:first-child { border-top: 0; }
.wcg-main { flex: 1 1 auto; min-width: 0; }
.wcg-meta {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--color-accent); margin-bottom: 6px;
}
.wcg-title { font-size: 19px; font-weight: 600; color: var(--color-navy); line-height: 1.25; }
.wcg-open {
  margin-top: 10px; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--color-accent); padding: 0;
}
.wcg-open:hover { text-decoration: underline; }
/* La coche de progression : discrète, à droite, et pleine quand c'est fait. */
.wcg-ck {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 5px;
  background: var(--color-surface-card); color: #fff;
}
.wcg-ck.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.wcg-row.is-done .wcg-title { color: var(--color-text-muted); }

/* DES CADRES, PAS UNE PAGE À PLAT (2026-09-18, demande d'Olivier). Les deux
   colonnes (guides, nouvelles) étaient posées sur le fond de page, séparées par
   un simple filet : rien ne disait où commençait l'une et finissait l'autre.
   Elles prennent le costume de carte du reste de l'application. */
.wc-cols > .wc-col {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(26, 18, 25, .04);
  padding: 14px 16px 16px;
}
/* Le filet de tête ne sert plus : la carte porte sa propre frontière. */
.wc-cols > .wc-col > .wc-rule { display: none; }

/* Le second rang des cinq cadrans : guide et nouvelles, à parts égales, dans
   la même gouttière que les trois modules du dessus. */
.wc-cols { gap: 12px; }

/* CE QUI RESTE À FAIRE, en tête de la carte d'un domaine (2026-09-18) : le
   domaine se dit une fois, sa mesure avec lui. */
.wcg-left { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }

/* Pont des temps — waterfall TT → TO → TR. Charte only. */

.tbc__scroll { overflow-x: auto; }
.tbc__svg { display: block; width: 100%; min-width: 560px; height: auto; }

.tbc__bar--level { fill: var(--color-accent); }
.tbc__bar--cut   { fill: var(--color-accent-soft); }
.tbc__link { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 3; }
.tbc__base { stroke: var(--color-border); stroke-width: 1; }

.tbc__val {
  font-size: 12.5px; font-weight: 700; fill: var(--color-navy);
  text-anchor: middle; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.tbc__val--cut { fill: var(--color-text-muted); font-weight: 600; }
.tbc__lb  { font-size: 12px; font-weight: 700; fill: var(--color-text); text-anchor: middle; }
.tbc__lb2 { font-size: 10.5px; fill: var(--color-text-muted); text-anchor: middle; }

/* Légende : la lettre du graphique, le libellé complet, la valeur. */
.tbc__legend { list-style: none; margin: 18px 0 0; padding: 0; }
.tbc__legend li {
  display: grid; grid-template-columns: 26px 1fr auto;
  grid-gap: 12px;
  gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--color-border-inner);
}
.tbc__key {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--color-accent-soft); color: var(--color-navy);
  font-size: 11.5px; font-weight: 700; align-self: center;
}
.tbc__txt b { font-weight: 600; font-size: 13.5px; color: var(--color-text); }
.tbc__txt small { display: block; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; }
.tbc__num {
  font-weight: 600; font-size: 13.5px; color: var(--color-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.tbc__state { padding: 22px 0; color: var(--color-text-muted); font-size: 13px; }
.tbc__state--err { color: var(--color-terracotta); }

/* ── Fiche Savoirs : gabarit de lecture (ex-SavoirsPage.css, 2026-09-16) ── */
.sv-article { min-width: 0; }
.sv-reader-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.sv-reader-title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 8px 0 0;
  line-height: 1.3;
}
.sv-reader-summary {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── 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: var(--color-navy); }
.sv-tag-methode   { background: var(--color-amber); }
.sv-tag-finance   { background: var(--color-sage); }

.sv-section { margin-top: 20px; }
.sv-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.sv-label-law { color: var(--color-terracotta); }

.sv-para {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text);
  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 14px;
  background: var(--color-surface-page);
  border-left: 3px solid var(--color-terracotta);
  border-radius: 0 8px 8px 0;
}
.sv-law-ref {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}
.sv-law-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  font-style: italic;
}
.sv-source-note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 6px 0 0;
}

/* Tables d'illustration */
.sv-table-wrap { overflow-x: auto; margin-top: 4px; }
.sv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sv-table thead th {
  text-align: left;
  background: var(--color-surface-th);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
}
.sv-table tbody td {
  padding: 7px 10px;
  border-top: 1px solid var(--color-border-inner);
  color: var(--color-text);
  vertical-align: top;
}
.sv-table tbody tr:hover td { background: var(--color-accent-tint); }
.sv-table-note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 8px 0 0;
}

/* Lien « Dans Palestre » : il navigue derrière le volet. */
.sv-link-btn {
  margin-top: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
}
.sv-link-btn:hover { background: var(--color-accent-tint); }

/* Sources */
.sv-sources {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.sv-sources li { margin-bottom: 4px; }

/* ── Panneau Savoirs, ANCRÉ à droite (2026-09-16) ──────────────────────
   Frère de droite dans .app-body : il pousse la page au lieu de la
   recouvrir, et prend la surface du menu de gauche, à qui il fait pendant. */
.kd {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  display: flex; flex-direction: column;
  /* Surface la plus CLAIRE de l'échelle (2026-09-16) : le panneau se lit comme
     une page de texte, pas comme du chrome. Il faisait pendant au menu de
     gauche, dont il prenait la surface ; mais à gauche on choisit, à droite on
     lit. */
  background: var(--color-surface-card);
  border-left: 1px solid var(--color-border);
}
.kd--max { flex: 1 1 auto; width: auto; }
/* Plein écran : la page se retire derrière le panneau. */
.app-body:has(.kd--max) > .app-main { flex: 0 0; min-width: 0; overflow: hidden; }

/* Poignée : le bord gauche se tire à la souris. Visible, pas devinée. */
.kd-grip {
  position: absolute; top: 0; bottom: 0; left: -4px;
  width: 9px; cursor: col-resize; z-index: 2;
}
.kd-grip::after {
  content: '';
  position: absolute; top: 50%; left: 3px;
  width: 3px; height: 34px; margin-top: -17px;
  border-radius: 2px;
  background: var(--color-accent-soft);
}
.kd-grip:hover::after, .kd-grip:active::after { background: var(--color-accent); }

.kd-head {
  display: flex; align-items: center; gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--color-border);
}
.kd-head-ic { color: var(--color-accent); flex: 0 0 auto; }
.kd-title { font-size: 14px; font-weight: 600; color: var(--color-navy); }
.kd-page {
  font-size: 12.5px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Commandes du panneau : cadrées, pour qu'on les voie. */
.kd-icon {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card);
  color: var(--color-text-muted); cursor: pointer;
}
.kd-icon:first-of-type { margin-left: auto; }
.kd-icon:hover { background: var(--color-accent-tint); color: var(--color-accent); border-color: var(--color-accent-soft); }

.kd-seg { padding: 10px 14px 6px; }

.kd-body {
  flex: 1 1; min-height: 0;
  overflow: auto;
  padding: 4px 14px 18px;
  font-size: 13.5px;
}
.kd-h2 {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; color: var(--color-navy);
  margin: 6px 0 2px;
}
.kd-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }

/* ── Parcours à PLAT (Guide), comme les groupes du menu de gauche : un
   cadre dans le cadre du panneau alourdissait la vue (2026-09-16). Un filet
   sépare deux parcours ; l'entête se clique pour replier ou déplier. ─── */
.kd-grp { padding: 2px 0 4px; }
/* Les sujets restent SERRÉS sous leur titre de section ; c'est la respiration
   au-dessus du titre suivant qui fait le groupe. Seule L'essentiel, d'une
   autre nature, porte un filet. */
.kd-grp + .kd-grp { margin-top: 14px; }
.kd-grp--secondary { border-top: 1px solid var(--color-border); margin-top: 20px; padding-top: 14px; }
.kd-grp-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-bottom: 2px; padding: 0;
  font: inherit; text-align: left;
  background: transparent; border: 0; cursor: pointer;
}
.kd-grp-chev { color: var(--color-accent-soft); flex: 0 0 auto; }
/* Titre de section : petites capitales atténuées, comme les intertitres du
   menu. Le contexte est déjà en tête du panneau. */
.kd-grp-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kd-grp--secondary .kd-grp-title { font-weight: 600; }
.kd-grp-head:hover .kd-grp-chev { color: var(--color-accent); }
.kd-grp.is-collapsed .kd-bar { margin-bottom: 0; }
.kd-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  color: #fff; background: var(--color-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.kd-grp--page .kd-tag { background: var(--color-navy); }
.kd-count { margin-left: auto; font-size: 12.5px; color: var(--color-text); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-grp-head .kd-count { margin-left: auto; }
.kd-bar { height: 4px; border-radius: 999px; background: var(--color-accent-tint-strong); overflow: hidden; margin-bottom: 4px; }
.kd-bar i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .25s ease; }

/* ── Groupes de liste (Fiches, Lexique) ───────────────────────────────── */
.kd-group { margin-top: 4px; }
.kd-group-head {
  padding: 12px 0 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.kd-empty { font-size: 13px; color: var(--color-text-muted); padding: 10px 0; }

/* ── Lignes ───────────────────────────────────────────────────────────── */
.kd-row {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%;
  padding: 9px 0;
  border-top: 1px solid var(--color-border-inner);
  font: inherit; font-size: 14.5px; text-align: left;
  color: var(--color-text);
  background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
  cursor: pointer;
}
/* Deux niveaux : l'intitulé, puis sa nature et son état. */
.kd-row-text { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kd-row .kd-check, .kd-row .kd-chev { margin-top: 1px; }
/* La coche ouvre la ligne : les intitulés démarrent tous au même x, coche
   cochée ou non. */
.kd-row .kd-check { margin-right: 0; }
.kd-grp .kd-topic:first-of-type > .kd-row,
.kd-grp > .kd-row:first-of-type,
.kd-grp > .kd-term:first-of-type { border-top: 0; }
/* Sous le champ de recherche, la carte de la page respire. */
.kd-search + .kd-grp { margin-top: 10px; }
.kd-row:hover .kd-row-title { color: var(--color-accent); }
.kd-row-title { min-width: 0; line-height: 1.35; }
.kd-chev { color: var(--color-accent-soft); flex: 0 0 auto; transition: transform .15s ease; }
.kd-topic.is-open .kd-chev { transform: rotate(90deg); }
.kd-topic.is-done .kd-row-title { color: var(--color-text-muted); }
.kd-cat { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }

.kd-check {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border-radius: 999px;
  border: 1.5px solid var(--color-accent-soft);
  background: var(--color-surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
}
.kd-check:hover { border-color: var(--color-accent); }
.kd-topic.is-done .kd-check { background: var(--color-accent); border-color: var(--color-accent); }

/* Pictogramme d'une fiche, teinté par catégorie. */
.kd-fic {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-tint-strong); color: var(--color-on-tint);
}
.kd-fic--methode   { background: var(--amber-light); color: var(--amber-dark); }
.kd-fic--finance   { background: var(--sage-light);  color: var(--sage-dark); }
.kd-fic--juridique { background: var(--navy-light);  color: var(--color-navy); }

/* Sujet déplié : résumé, étapes, actions */
/* Le corps d'un sujet s'aligne sur son intitulé, qui part du bord. */
.kd-topic-body { padding: 2px 0 12px 0; }
.kd-actions { display: flex; gap: 6px; margin-top: 9px; }
.kd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--color-accent);
  background: var(--color-surface-card);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.kd-btn:hover { background: var(--color-accent-tint); }
.kd-btn--primary { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.kd-btn--primary:hover { background: color-mix(in srgb, var(--color-accent) 88%, #000); }
.kd-btn.is-done { color: var(--color-sage); border-color: color-mix(in srgb, var(--color-sage) 40%, transparent); }

/* ── Recherche ────────────────────────────────────────────────────────── */
.kd-search {
  width: 100%;
  height: 32px;
  margin: 2px 0 4px;
  font: inherit; font-size: 13.5px;
  color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0 10px;
}
.kd-search:focus { outline: none; border-color: var(--color-accent); }

/* ── Termes du lexique ────────────────────────────────────────────────── */
.kd-term { padding: 8px 0; border-top: 1px solid var(--color-border-inner); }
/* Terme replié : toute la ligne se clique, sans costume de bouton. */
.kd-term-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.kd-term-btn:hover .kd-term-fr { color: var(--color-accent); }
.kd-term-head { display: flex; align-items: baseline; gap: 8px; }
.kd-term-fr { font-size: 13.5px; font-weight: 600; color: var(--color-navy); flex: 1 1; min-width: 0; }
.kd-term-en { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--color-text-muted); }
.kd-term-note { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text); }

/* Nature et état du sujet, sous son intitulé : « 4 étapes · À faire ». */
.kd-meta { font-size: 12px; color: var(--color-text-muted); }
/* Ligne d'état au-dessus des boutons : « 3 étapes · à faire », « Étape 1 sur 3 ». */
.kd-status { font-size: 12.5px; color: var(--color-text); margin: 2px 0 6px; }
.kd-topic.is-running .kd-status { color: var(--amber-dark); font-weight: 600; }
.kd-keys-row { display: flex; align-items: center; gap: 2px; margin: 0 0 10px; font-size: 12px; }
.kd-link { font: inherit; font-size: 12px; color: var(--color-accent); background: transparent; border: 0; padding: 0; cursor: pointer; }
.kd-link:hover { text-decoration: underline; }
/* L'icône dans la bascule Guide. */
.kd-seg .lk-seg__btn svg { vertical-align: -2px; }

/* Sujet en cours : l'étape courante se lit en noir, les autres s'effacent ;
   les commandes du pas-à-pas tiennent une ligne, toujours au même endroit. */
/* Le sujet en cours ressort : fond ambre très léger sur toute la largeur du
   panneau et filet ambre à gauche, sans cadre ni coins arrondis. */
.kd-topic.is-running {
  margin: 0 -14px; padding: 0 14px 0 11px;
  border-left: 3px solid var(--color-amber);
  background: color-mix(in srgb, var(--color-amber) 9%, transparent);
  border-radius: 0;
}
.kd-topic.is-running > .kd-row { border-top: 0; }
.kd-topic.is-running > .kd-row .kd-row-title { color: var(--amber-dark); font-weight: 600; }
.kd-topic.is-running + .kd-topic > .kd-row { border-top: 0; }
.kd-keys { color: var(--color-text-muted); font-weight: 400; }
.kd-quit {
  margin-left: auto;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--color-text-muted); cursor: pointer;
}
.kd-quit:hover { background: var(--color-accent-tint); color: var(--color-text); }
.kd-stepper { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; flex-wrap: nowrap; }
/* Cases de même largeur : « Marquer comme fait » / « Précédent » à gauche,
   « Me montrer » / « Suivant » / « Terminer » à droite, toujours au même endroit. */
.kd-btn--fixed { min-width: 122px; justify-content: center; white-space: nowrap; }
.kd-topic-body > .kd-btn:disabled { opacity: .4; cursor: default; }
.kd-btn:disabled:hover { background: var(--color-surface-card); }

/* Sous-groupes de la carte du module : la page ouverte, puis le reste. */
.kd-sub + .kd-sub { margin-top: 6px; }
.kd-sub-head {
  padding: 10px 0 2px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.kd-sub .kd-topic:first-of-type > .kd-row { border-top: 0; }
.kd-sub + .kd-sub .kd-topic:first-of-type > .kd-row { border-top: 0; }

/* CE QUI SE JOUE SUR L'ÉCRAN OUVERT (2026-09-18) : un repère sur la ligne, dans
   la liste de son module. Il remplace la section « Sur cette page », qui
   extrayait le sujet de son module et faisait changer la liste d'un écran à
   l'autre. Petites capitales et famille d'accent : il qualifie, il n'alerte pas. */
.kd-here {
  margin-left: 8px; padding: 1px 6px; border-radius: 999px;
  background: var(--color-accent-tint); color: var(--color-on-tint);
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: 1px; white-space: nowrap;
}

/* ── Fenêtre de lecture d'une fiche (2026-09-16) ────────────────────────── */
.fw-ov {
  position: fixed; inset: 0; z-index: 2600;
  background: color-mix(in srgb, var(--color-navy) 28%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fw {
  width: min(920px, 100%);
  height: min(86vh, 900px);
  display: flex; flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 48px rgba(43, 32, 62, .22);
  animation: fw-in .18s ease;
}
@keyframes fw-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.fw-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.fw-cat { font-size: 12px; font-weight: 600; color: var(--color-navy); }
.fw-date { font-size: 12px; color: var(--color-text-muted); }
.fw-close {
  margin-left: auto;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-card); color: var(--color-text-muted);
  cursor: pointer;
}
.fw-close:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.fw-body {
  flex: 1 1; min-height: 0; overflow: auto;
  padding: 18px 28px 28px;
}
/* En fenêtre, la fiche retrouve la taille de lecture d'une page. */
.fw-body .sv-reader-title { font-size: 21px; }
.fw-body .sv-reader-summary { font-size: 14.5px; }
.fw-body .sv-para { font-size: 14.5px; }
.fw-body .sv-table { font-size: 13.5px; }
.fw-body .sv-sources { font-size: 13px; }

/* ── Mode Guide : repères, halo et bulle (2026-09-16) ───────────────────
   Rien n'assombrit l'écran : on lit et on fait dans le même mouvement. */
.gd { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.gd > * { pointer-events: auto; }

/* Pastille numérotée près de l'élément par lequel un geste commence. AMBRE,
   la couleur « ponctuelle » de la charte (2026-09-16) : l'ardoise se fondait
   dans les barres des graphiques et le surlignage des tables. */
.gd-pin {
  position: fixed;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid var(--color-surface-card);
  background: var(--color-amber);
  color: #fff;
  font: inherit; font-size: 11px; font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(43, 32, 62, .25);
  transition: top .2s ease, left .2s ease;
}
.gd-pin:hover { transform: scale(1.12); }
.gd-pin.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber) 35%, transparent); }
/* La fiche liée : la même pastille, plus sombre, avec le livre. */
.gd-pin--fiche { background: var(--amber-dark); }

/* Halo sur l'élément de l'étape : un liseré franc, pas un trou dans un voile. */
.gd-halo {
  position: fixed;
  border-radius: var(--radius-card);
  border: 3px solid var(--color-amber);
  pointer-events: none;
  animation: gd-pulse 1.6s ease-out infinite;
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease;
}
@keyframes gd-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-amber) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-amber) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-amber) 0%, transparent); }
}

/* ── Bulle ────────────────────────────────────────────────────────────── */
.gd-bubble {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(43, 32, 62, .18);
  padding: 11px 13px 12px;
  animation: gd-bubble-in .2s ease;
}
@keyframes gd-bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.gd-bubble-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
}
/* Le numéro de l'étape, dans la même pastille ambre que les repères de la
   page : la bulle et le repère se reconnaissent. */
.gd-num {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--color-amber); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.gd-bubble-title {
  flex: 1 1; min-width: 0;
  font-size: 13px; font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}
.gd-quit { flex: 0 0 auto; }
.gd-quit {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--color-text-muted);
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer;
}
.gd-quit:hover { color: var(--color-text); background: var(--color-accent-tint); }
.gd-text {
  margin: 0;
  font-size: 15px; line-height: 1.55;
  color: var(--color-text);
  /* Le texte à lire se surligne en ambre clair : c'est lui qu'on cherche des
     yeux quand la bulle se déplace. */
  background: var(--amber-light);
  padding: 10px 12px;
  border-radius: 6px;
}
.gd-inline-ic { display: inline-flex; vertical-align: -2px; margin: 0 2px; color: var(--color-navy); }
.gd-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 11px;
}
/* Progression en TRAITS de même longueur : où l'on en est, combien il reste.
   Un trait long suivi de pastilles mélangeait deux formes pour une même
   grandeur (2026-09-16). */
.gd-dots { display: inline-flex; align-items: center; gap: 4px; }
.gd-dot {
  width: 16px; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--color-amber) 25%, transparent);
  transition: background .2s ease;
}
.gd-dot.is-past { background: color-mix(in srgb, var(--color-amber) 55%, transparent); }
.gd-dot.is-now { background: var(--color-amber); }
.gd-count {
  margin-right: auto;
  font-size: 11px; color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.gd-btn {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
}
.gd-btn:hover { background: var(--color-accent-tint); }
.gd-btn--primary { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.gd-btn--primary:hover { background: color-mix(in srgb, var(--color-accent) 88%, #000); }

.gd-keys { color: var(--color-text-muted); }

/* ── Flèche : elle relie la bulle à l'élément mis en lumière ───────────── */
.gd-bubble--step { border-color: color-mix(in srgb, var(--color-amber) 45%, var(--color-border)); }
.gd-bubble--step::before,
.gd-bubble--step::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: var(--color-surface-card);
  border: 1px solid color-mix(in srgb, var(--color-amber) 45%, var(--color-border));
  transform: rotate(45deg);
}
.gd-bubble--step::before { display: none; }
.gd-arrow--top::after {
  top: -7px; left: var(--arrow); margin-left: -6px;
  border-right: 0; border-bottom: 0;
}
.gd-arrow--bottom::after {
  bottom: -7px; left: var(--arrow); margin-left: -6px;
  border-left: 0; border-top: 0;
}
.gd-arrow--left::after {
  left: -7px; top: var(--arrow); margin-top: -6px;
  border-right: 0; border-top: 0;
}

/* Journal d'audit — écran de lecture.
   Toutes les couleurs viennent des tokens de la charte (index.css) : aucune
   valeur hexadécimale en dur ici. */

/* ── Filtres (rangée d'outils sous le titre) ─────────────────────────── */
.aud-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
}
.aud-filter { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.aud-filter > span {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.aud-filter select,
.aud-filter input {
  font: inherit; font-size: 12.5px; color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: 6px;
  padding: 4px 8px; max-width: 220px;
}
.aud-filter select:focus,
.aud-filter input:focus { outline: none; border-color: var(--color-accent); }
.aud-filter--wide input { min-width: 200px; }
.aud-reset {
  font: inherit; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 6px; padding: 5px 10px;
}
.aud-reset:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Table ───────────────────────────────────────────────────────────── */
.aud-table { table-layout: auto; }
.aud-table td { vertical-align: top; }
.aud-col-when { white-space: nowrap; }

/* Gouttière FIXE de 16 px en tête de la colonne de gauche : le chevron
   l'occupe, les lignes sans chevron la laissent vide. Tous les horodatages
   démarrent donc au même x, groupes et lignes simples confondus. */
.aud-gutter {
  display: inline-flex; width: 16px; flex: 0 0 16px;
  align-items: center; justify-content: center; vertical-align: middle;
}
.aud-chev {
  width: 16px; height: 16px; color: var(--color-text-muted);
  opacity: 0; transition: opacity .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.aud-chev svg { width: 12px; height: 12px; transition: transform .12s ease; }
.aud-chev.is-open svg { transform: rotate(90deg); }
.aud-table tr:hover .aud-chev, .aud-chev.is-open { opacity: 1; }

/* Ligne d'opération repliable : surlignage ardoise, comme tout groupement de
   l'application (standard 2026-08-17). */
.aud-table tr.aud-op.is-group { cursor: pointer; font-weight: 600; }
.aud-table tr.aud-op.is-group:hover td { background: var(--color-accent-tint-strong); }

.aud-table tr.aud-detail td {
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-inner);
}

.aud-object { color: var(--color-text); }
.aud-record { display: block; color: var(--color-text-muted); font-size: 12px; }
.aud-op .aud-record { color: var(--color-text-muted); }

.aud-inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.aud-field { color: var(--color-text-muted); }
.aud-before { color: var(--color-text-muted); text-decoration: line-through; }
.aud-after { color: var(--color-text); font-weight: 600; }
.aud-arrow { color: var(--color-accent); }
.aud-empty { color: var(--color-text-muted); font-style: italic; }
.aud-note { color: var(--color-text-muted); }

.aud-blank { color: var(--color-text-muted); text-align: center; padding: 28px 14px; }

/* ── Pied : compteur + pagination ────────────────────────────────────── */
.aud-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 2px 0; font-size: 12px; color: var(--color-text-muted);
}
.aud-more {
  font: inherit; font-size: 12px; cursor: pointer;
  background: var(--color-surface-card); color: var(--color-accent);
  border: 1px solid var(--color-accent); border-radius: 6px; padding: 6px 14px;
}
.aud-more:disabled { color: var(--color-text-muted); border-color: var(--color-border); cursor: default; }

/* Administration › Gestion — deux colonnes : les nouveautés à gauche (une card
   par module, saisie en bleu, sans cadre), la sauvegarde de la plateforme en
   carré à droite. Elle tenait toute la largeur au-dessus des cards : un geste
   ponctuel ne barre pas la page (2026-09-02). */
.news-page {
  display: grid;
  grid-template-columns: minmax(0, 760px) 260px;
  grid-gap: 20px;
  gap: 20px;
  align-items: start;
}
.news-page__main { min-width: 0; }
.news-page__side { position: sticky; top: 12px; }
@media (max-width: 1120px) {
  .news-page { grid-template-columns: minmax(0, 1fr); }
  .news-page__side { position: static; max-width: 760px; }
}

/* Carte carrée : titre, texte, action empilés, l'action au pied. */
.news-page__side .admin-dumpall {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; min-height: 150px;
}
.news-page__side .admin-dumpall__txt { flex: 1 1; }
.news-page__side .admin-dumpall .admin-btn { width: 100%; }


.news-admin { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.news-admin__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.news-admin__table td { padding: 6px 10px; border-top: 1px solid var(--color-border-inner); }
.news-admin__table tr:first-child td { border-top: none; }
.news-admin__table input {
  border: none; background: none; font-family: inherit; font-size: 13px;
  color: var(--color-field-focus); padding: 2px 0; outline: none; width: 100%;
}
.news-admin__table input:focus { border-bottom: 1px solid var(--color-field-focus); }
.news-admin__date { width: 140px; white-space: nowrap; }
.news-admin__del { width: 70px; text-align: right; }
.news-admin__del button {
  border: none; background: none; cursor: pointer; font-family: inherit;
  color: var(--color-text-muted); font-size: 13px; padding: 2px 4px;
}
.news-admin__del button:hover { color: var(--color-terracotta); }
.news-admin__addbtn {
  color: var(--color-accent) !important; font-weight: 600;
}
.news-admin__addbtn:disabled { color: var(--color-text-muted) !important; cursor: default; opacity: .6; }

/* Écran d'interruption + écran vide de client sans module. Charte only. */

.eb { display: grid; place-items: center; padding: clamp(30px, 8vh, 90px) 20px; }
.eb__card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(26, 18, 25, .04);
  padding: 26px 28px 22px;
  max-width: 560px; width: 100%;
}
.eb__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px;
}
.eb__title {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif; font-weight: 600; font-size: 21px;
  color: var(--color-navy); margin: 0 0 10px; text-wrap: balance;
}
.eb__text { margin: 0; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }
.eb__text + .eb__text { margin-top: 8px; }

.eb__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.eb__btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-card); color: var(--color-text);
}
.eb__btn:hover { background: var(--color-accent-tint); }
.eb__btn--main {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.eb__btn--main:hover { background: color-mix(in srgb, var(--color-accent) 86%, #000); }

.eb__det { margin-top: 18px; font-size: 12px; color: var(--color-text-muted); }
.eb__det summary { cursor: pointer; }
.eb__det pre {
  margin: 8px 0 0; padding: 10px 12px; overflow-x: auto;
  background: var(--color-surface-page); border-radius: 6px;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* Client sans module vendu : pas une panne, un état. */
.eb__list { margin: 12px 0 0; padding-left: 1.15em; color: var(--color-text-muted); font-size: 13.5px; }
.eb__list li { margin-top: .3em; }
.eb__list li::marker { color: var(--color-accent-soft); }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0DACD;
  background: var(--color-canvas, #E0DACD);
  padding: 2rem;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  background: var(--color-surface-card, #fff);
  border: 1px solid #DED7CB;
  border: 1px solid var(--color-border, #DED7CB);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px color-mix(in srgb, #2B203E 8%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-navy, #2B203E) 8%, transparent);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Marque + nom, alignés sur une même ligne de base. */
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 2.2rem;
  color: #2B203E;
  color: var(--color-navy, #2B203E);
  letter-spacing: -0.02em;
}
.login-brand__mark { flex: none; color: #3F6470; color: var(--color-accent, #3F6470); }

.login-sub {
  margin: 0 0 1.25rem;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  font-size: 0.9rem;
}

.login-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #78716C;
  color: var(--color-text-muted, #78716C);
  margin-top: 0.65rem;
}

.login-input {
  border: none;
  border-bottom: 1px solid #DED7CB;
  border-bottom: 1px solid var(--color-border, #DED7CB);
  background: transparent;
  padding: 0.45rem 0;
  font-size: 1rem;
  color: #2563EB;
  color: var(--color-field-focus, #2563EB);
  font-family: "Inter", system-ui, sans-serif;
  outline: none;
}

.login-input:focus {
  border-bottom-color: #2563EB;
  border-bottom-color: var(--color-field-focus, #2563EB);
}

.login-error {
  background: color-mix(in srgb, #BA5D4A 12%, white);
  background: color-mix(in srgb, var(--color-terracotta, #BA5D4A) 12%, white);
  color: #BA5D4A;
  color: var(--color-terracotta, #BA5D4A);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.login-submit {
  margin-top: 1.35rem;
  border: none;
  border-radius: 8px;
  background: #3F6470;
  background: var(--color-accent, #3F6470);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
}

.login-submit:hover:not(:disabled) {
  filter: brightness(1.05);
}

.login-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* Œil voir/masquer le mot de passe, dans le champ. */
.login-pwd { position: relative; display: block; }
.login-pwd .login-input { width: 100%; padding-right: 36px; }
.login-pwd__eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--color-text-muted); line-height: 0;
}
.login-pwd__eye:hover { color: var(--color-accent); }
.login-pwd__eye svg { width: 16px; height: 16px; }

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

/* Assistant — dans la PAGE, coin bas-gauche, contre la barre de navigation
   (2026-08-18 : il était dans la colonne du rail, entre les icônes système).
   Positionné dans .app-main, donc il suit le décalage quand la barre se
   déplie. */
.asst-fab {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-navy);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(43, 32, 62, 0.30);
}

.asst-fab svg { width: 24px; height: 24px; }
.asst-fab:hover { background: var(--color-primary); }
.asst-fab.is-open { background: var(--color-primary); }

.asst-panel {
  position: absolute;
  left: 16px;
  bottom: 72px;
  z-index: 1200;
  width: 400px;
  max-width: calc(100vw - 44px);
  height: 540px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  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: "Schibsted Grotesk", Inter, system-ui, sans-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: var(--radius-card);
  padding: 10px 12px;
}

.asst-msg {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: var(--radius-card);
  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: var(--radius-card);
  padding: 8px 12px;
}

.asst-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--color-border);
  background: #fff;
}
.asst-input textarea {
  flex: 1 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--color-text);
}
.asst-input textarea:focus {
  outline: none;
  border-color: var(--color-input);
}
.asst-input button {
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--color-navy);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.asst-input button:disabled { opacity: 0.45; cursor: default; }
.asst-input button:not(:disabled):hover { background: var(--color-primary); }

/* Barre de refus d'écriture — pleine largeur, ambre (charte : secondaire,
   signalement ponctuel). Pas terracotta : ce n'est pas une panne, c'est une
   règle ; mais elle doit se voir, d'où la pleine largeur en haut. */
.fbd-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 18px;
  background: color-mix(in srgb, var(--color-amber) 22%, var(--color-surface-card));
  border-bottom: 2px solid var(--color-amber);
  color: var(--color-text);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}
.fbd-bar__txt strong { color: var(--color-navy); }

/* Quand la barre occupe le haut, les messages se placent en dessous. */
body:has(.fbd-bar) .toast { top: 66px; }
.fbd-bar__x {
  position: absolute;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}

/* ── Unified page wrapper ────────────────────────────────────────────────────
   All page contents render inside this wrapper. Horizontal padding is set
   ONCE here, sourced from --page-px (index.css), so the topbar and every
   page share the same gutter. To change the global indent, edit --page-px.
   Individual pages set vertical padding only (top/bottom). */
.logike-page-wrap {
  padding: 0 var(--page-px);
}

/* Messages : EN HAUT AU CENTRE. En bas à droite, ils passaient inaperçus —
   l'utilisateur ne voyait pas qu'une saisie avait échoué et recommençait. */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(560px, calc(100vw - 48px));
  text-align: center;
  background: var(--color-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  animation: toast-in 0.2s ease;
}

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

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Écran de démarrage — marque plein écran sur le canvas, fondu de sortie. */
.brand-splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0DACD;
  background: var(--color-canvas, #E0DACD);
  opacity: 1;
  transition: opacity .5s ease;
}
.brand-splash.is-fading { opacity: 0; pointer-events: none; }
.brand-splash__lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--color-navy);
}
.brand-splash__lockup svg { color: var(--color-accent); }
.brand-splash__lockup span {
  font-family: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
}


/*# sourceMappingURL=main.67fe537e.css.map*/