/* =========================================================================
 * Quantisse — Feuille de style
 *
 * FICHIER GÉNÉRÉ — ne pas modifier à la main.
 * Source : design/system/ · Régénérer : node design/build-css.js
 *
 * Concaténation, dans l'ordre : polices locales, jetons (couleurs,
 * typographie, mise en page, mandats), feuille de l'application, puis
 * retouches maison.
 * ========================================================================= */



/* ═══════════════════════════════════════════════════════════════
   Polices embarquées (assets/fonts.css)
   ═══════════════════════════════════════════════════════════════ */

/* =========================================================================
 * Quantisse — Polices embarquées localement
 * Geist, Geist Mono (Vercel) et Space Grotesk (Florian Karsten) sont sous
 * SIL Open Font License 1.1, qui autorise la redistribution embarquée.
 * Servies depuis assets/fonts/ plutôt que depuis Google Fonts : la charte
 * impose que l'outil fonctionne hors ligne, sans dépendance ni CDN.
 * Sous-ensembles latin et latin-ext — suffisants pour le français.
 * Généré par design/build-css.js. Ne pas modifier à la main.
 * ========================================================================= */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══════════════════════════════════════════════════════════════
   Jetons — couleurs
   ═══════════════════════════════════════════════════════════════ */

/* Quantisse — Couleurs
   Deux couches : (1) rampes brutes, (2) alias sémantiques.
   La palette dataviz --series-* / --seq-* est REPRISE TELLE QUELLE de
   l'application (palette validée, testée en daltonisme et à l'impression).
   Seul le châssis (neutres, accent produit, surfaces) est refondu. */

:root {
  color-scheme: light;

  /* ---- Rampe neutre : graphite légèrement froid ("encre") ---- */
  --ink-950: #070a0f;
  --ink-900: #0e131b;
  --ink-800: #18202c;
  --ink-700: #273243;
  --ink-600: #3b4859;
  --ink-500: #566475;
  --ink-400: #788596;
  --ink-300: #a2acb9;
  --ink-200: #c8d0da;
  --ink-150: #dce2e9;
  --ink-100: #e8edf2;
  --ink-75:  #f1f4f8;
  --ink-50:  #f7f9fb;
  --ink-25:  #fbfcfd;
  --white:   #ffffff;

  /* ---- Accent produit : bleu « signal » (identité Quantisse) ---- */
  --brand-900: #0d1f6a;
  --brand-800: #122c98;
  --brand-700: #1738c5;
  --brand-600: #1f4aed;
  --brand-500: #3766f0;
  --brand-400: #5e83f4;
  --brand-300: #93aef8;
  --brand-100: #dbe4fd;
  --brand-50:  #eef2fe;

  /* ---- Dataviz (inchangée : palette validée) ---- */
  --series-1: #2a78d6;
  --series-2: #008300;
  --series-3: #e87ba4;
  --series-4: #eda100;
  --series-5: #1baf7a;
  --series-6: #eb6834;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --seq-100: #cde2fb;
  --seq-250: #86b6ef;
  --seq-400: #3987e5;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;

  /* ---- Statuts (inchangés) ---- */
  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --warning-text: #7a5200;
  --serious: #ec835a;
  --serious-text: #9c3f1c;
  --critical: #d03b3b;
  --critical-text: #b02222;

  /* ================= ALIAS SÉMANTIQUES ================= */

  /* Surfaces */
  --surface-page: var(--ink-75);        /* fond de l'application */
  --surface-card: var(--white);         /* carte, tableau, panneau */
  --surface-sunken: var(--ink-50);      /* champs, pistes, nœuds */
  --surface-raised: var(--white);       /* flottant : tooltip, modale */
  --surface-chrome: #0a0f1e;            /* bandeau supérieur (bleu-noir) */
  --surface-chrome-2: #151c33;          /* contrôles dans le bandeau */
  --surface-nav: var(--white);          /* barre d'onglets */
  --surface-inverse: var(--ink-900);
  --scrim: rgba(7, 10, 15, 0.55);       /* voile des overlays */

  /* Texte */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-inverse: var(--white);
  --text-inverse-soft: var(--ink-300);
  --text-accent: var(--brand-700);
  --text-negative: var(--critical-text);
  --text-positive: var(--good-text);
  --text-link: var(--brand-700);
  --text-link-hover: var(--brand-800);

  /* Bordures */
  --border-hairline: var(--ink-150);
  --border-soft: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-chrome: rgba(255, 255, 255, 0.14);
  --border-focus: var(--brand-500);

  /* Dataviz : structure du graphique */
  --data-grid: var(--ink-100);
  --data-axis: var(--ink-200);
  --data-label: var(--ink-400);

  /* Teintes de statut (fonds) */
  --tint-good: color-mix(in srgb, var(--good) 12%, transparent);
  --tint-warning: color-mix(in srgb, var(--warning) 20%, transparent);
  --tint-serious: color-mix(in srgb, var(--serious) 18%, transparent);
  --tint-critical: color-mix(in srgb, var(--critical) 12%, transparent);
  --tint-neutral: color-mix(in srgb, var(--ink-900) 6%, transparent);
  --tint-accent: color-mix(in srgb, var(--entity-accent, var(--brand-500)) 10%, transparent);

  /* Compatibilité : anciens jetons de l'application. À ne plus utiliser
     dans du code neuf, conservés pour que le balisage existant tienne. */
  --surface: var(--surface-sunken);
  --page: var(--surface-page);
  --card: var(--surface-card);
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --grid: var(--data-grid);
  --axis: var(--data-axis);
  --border: var(--border-hairline);
}

/* ===================== THÈMES =====================
   Le thème sombre s'applique à :root sous prefers-color-scheme, ou par
   data-theme="dark" ; data-theme="light" force le retour au clair et
   reprend donc la totalité des alias. Les trois blocs déclarent leurs
   jetons sous un scope enregistrable (:root ou [data-theme]). */

@media (prefers-color-scheme: dark) {
  :root {
  color-scheme: dark;
  --surface-page: var(--ink-950);
  --surface-card: #141a23;
  --surface-sunken: #1b222c;
  --surface-raised: #1b222c;
  --surface-chrome: #070b16;
  --surface-chrome-2: #151c33;
  --surface-nav: #141a23;
  --surface-inverse: var(--white);
  --scrim: rgba(0, 0, 0, 0.62);

  --text-primary: #f2f5f8;
  --text-secondary: #aeb9c6;
  --text-muted: #798596;
  --text-inverse: #f2f5f8;
  --text-inverse-soft: #aeb9c6;
  --text-accent: var(--brand-300);
  --text-positive: #21b521;
  --text-negative: #ef7676;
  --text-link: var(--brand-300);
  --text-link-hover: var(--brand-400);

  --border-hairline: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-chrome: rgba(255, 255, 255, 0.10);

  --data-grid: rgba(255, 255, 255, 0.08);
  --data-axis: rgba(255, 255, 255, 0.16);
  --data-label: #798596;

  --series-1: #3987e5;
  --series-3: #d55181;
  --series-4: #c98500;
  --series-5: #199e70;
  --series-6: #d95926;
  --series-7: #9085e9;
  --series-8: #e66767;
  --good-text: #21b521;
  --warning-text: #fab219;
  --serious-text: #ec835a;
  --critical-text: #ef7676;
  --tint-neutral: rgba(255, 255, 255, 0.07);
  }
}

:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --surface-page: var(--ink-950);
  --surface-card: #141a23;
  --surface-sunken: #1b222c;
  --surface-raised: #1b222c;
  --surface-chrome: #070b16;
  --surface-chrome-2: #151c33;
  --surface-nav: #141a23;
  --surface-inverse: var(--white);
  --scrim: rgba(0, 0, 0, 0.62);

  --text-primary: #f2f5f8;
  --text-secondary: #aeb9c6;
  --text-muted: #798596;
  --text-inverse: #f2f5f8;
  --text-inverse-soft: #aeb9c6;
  --text-accent: var(--brand-300);
  --text-positive: #21b521;
  --text-negative: #ef7676;
  --text-link: var(--brand-300);
  --text-link-hover: var(--brand-400);

  --border-hairline: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-chrome: rgba(255, 255, 255, 0.10);

  --data-grid: rgba(255, 255, 255, 0.08);
  --data-axis: rgba(255, 255, 255, 0.16);
  --data-label: #798596;

  --series-1: #3987e5;
  --series-3: #d55181;
  --series-4: #c98500;
  --series-5: #199e70;
  --series-6: #d95926;
  --series-7: #9085e9;
  --series-8: #e66767;
  --good-text: #21b521;
  --warning-text: #fab219;
  --serious-text: #ec835a;
  --critical-text: #ef7676;
  --tint-neutral: rgba(255, 255, 255, 0.07);
}

:root[data-theme="light"], [data-theme="light"] {
  color-scheme: light;
  --surface-page: var(--ink-75);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-50);
  --surface-raised: var(--white);
  --surface-chrome: #0a0f1e;
  --surface-chrome-2: #151c33;
  --surface-nav: var(--white);
  --surface-inverse: var(--ink-900);
  --scrim: rgba(7, 10, 15, 0.55);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-inverse: var(--white);
  --text-inverse-soft: var(--ink-300);
  --text-accent: var(--brand-700);
  --text-positive: var(--good-text);
  --text-negative: var(--critical-text);
  --text-link: var(--brand-700);
  --text-link-hover: var(--brand-800);

  --border-hairline: var(--ink-150);
  --border-soft: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-chrome: rgba(255, 255, 255, 0.14);

  --data-grid: var(--ink-100);
  --data-axis: var(--ink-200);
  --data-label: var(--ink-400);

  --series-1: #2a78d6;
  --series-3: #e87ba4;
  --series-4: #eda100;
  --series-5: #1baf7a;
  --series-6: #eb6834;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --good-text: #006300;
  --warning-text: #7a5200;
  --serious-text: #9c3f1c;
  --critical-text: #b02222;
  --tint-neutral: color-mix(in srgb, var(--ink-900) 6%, transparent);
}


/* ═══════════════════════════════════════════════════════════════
   Jetons — typographie
   ═══════════════════════════════════════════════════════════════ */

/* Quantisse — Typographie
   Polices web (Google Fonts, chargées par tokens/fonts.css) :
   Geist pour l'interface et les chiffres (tabulaires via tnum),
   Space Grotesk pour l'affichage, Geist Mono pour le code et les
   micro-libellés techniques. Repli sur la pile système hors ligne. */

:root {
  /* ---- Familles ---- */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-numeric: var(--font-sans);      /* chiffres : toujours tabulaires */

  /* ---- Échelle (racine = 15px) ---- */
  --fs-100: 0.700rem;   /* 10.5px — micro-libellé, mention légale */
  --fs-200: 0.760rem;   /* 11.4px — libellé de tuile, note de carte */
  --fs-300: 0.820rem;   /* 12.3px — cellule de tableau, badge */
  --fs-400: 0.880rem;   /* 13.2px — onglet, contrôle, corps dense */
  --fs-500: 0.950rem;   /* 14.3px — corps courant */
  --fs-600: 1.075rem;   /* 16.1px — titre de bloc, marque */
  --fs-700: 1.350rem;   /* 20.3px — titre de vue */
  --fs-800: 1.700rem;   /* 25.5px — valeur KPI */
  --fs-900: 2.150rem;   /* 32.3px — titre de diapositive */
  --fs-1000: 3.100rem;  /* 46.5px — accroche marketing */

  /* ---- Graisses ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 650; /* @kind font */
  --fw-black: 730; /* @kind font */

  /* ---- Interlignes ---- */
  --lh-tight: 1.15; /* @kind font */     /* titres, valeurs KPI */
  --lh-snug: 1.32; /* @kind font */      /* libellés multi-lignes */
  --lh-normal: 1.5; /* @kind font */     /* corps */
  --lh-relaxed: 1.62; /* @kind font */   /* prose longue (marketing, aide) */

  /* ---- Approche (letter-spacing) ---- */
  --ls-display: -0.022em; /* @kind font */   /* > 25px */
  --ls-title: -0.012em; /* @kind font */     /* 16–25px */
  --ls-body: 0; /* @kind font */
  --ls-label: 0.045em; /* @kind font */      /* micro-libellé en capitales */
  --ls-eyebrow: 0.10em; /* @kind font */     /* sur-titre marketing */

  /* ---- Rôles typographiques composés ---- */
  --type-view-title: var(--fw-bold) var(--fs-700) / var(--lh-tight) var(--font-display);
  --type-card-title: var(--fw-semibold) var(--fs-200) / var(--lh-snug) var(--font-sans);
  --type-kpi-value: var(--fw-bold) var(--fs-800) / var(--lh-tight) var(--font-numeric);
  --type-kpi-label: var(--fw-semibold) var(--fs-100) / var(--lh-snug) var(--font-sans);
  --type-table: var(--fw-regular) var(--fs-300) / 1.4 var(--font-numeric);
  --type-body: var(--fw-regular) var(--fs-500) / var(--lh-normal) var(--font-sans);
  --type-control: var(--fw-semibold) var(--fs-400) / 1.2 var(--font-sans);
  --type-mono: var(--fw-regular) var(--fs-200) / 1.4 var(--font-mono);
}

/* Utilitaire universel : tout chiffre aligné en colonne est tabulaire. */
.tnum,
.kpi-value,
.hbar-value,
table.data th,
table.data td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ═══════════════════════════════════════════════════════════════
   Jetons — espacement, rayons, élévation, mouvement
   ═══════════════════════════════════════════════════════════════ */

/* Quantisse — Espacement, rayons, élévation, mouvement, z-index.
   Base 2px : l'outil est dense, la demi-graduation est nécessaire. */

:root {
  /* ---- Espacement ---- */
  --sp-0: 0px; /* @kind spacing */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 18px;
  --sp-9: 22px;
  --sp-10: 28px;
  --sp-11: 36px;
  --sp-12: 48px;
  --sp-13: 64px;
  --sp-14: 88px;

  /* Rôles */
  --gap-grid: var(--sp-7);          /* entre cartes */
  --gap-stack: var(--sp-4);         /* entre éléments d'une pile */
  --pad-card: var(--sp-7) var(--sp-8);
  --pad-card-tight: var(--sp-6);
  --pad-cell: 7px 10px;             /* cellule de tableau */
  --pad-control: 6px 10px;
  --pad-view: var(--sp-9);
  --width-content: 1320px;          /* largeur utile de l'application */
  --width-prose: 68ch;
  --height-chrome: 56px;

  /* ---- Rayons ---- */
  --r-xs: 3px;      /* puce, segment de barre empilée */
  --r-sm: 5px;      /* badge, note, champ compact */
  --r-md: 7px;      /* bouton, select, nœud */
  --r-lg: 10px;     /* carte, alerte */
  --r-xl: 14px;     /* panneau flottant, modale */
  --r-pill: 999px;

  /* ---- Élévation : bordure d'abord, ombre en dernier recours ---- */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-1: 0 1px 2px rgba(7, 10, 15, 0.05);
  --shadow-2: 0 1px 2px rgba(7, 10, 15, 0.05), 0 6px 16px -6px rgba(7, 10, 15, 0.12);
  --shadow-3: 0 2px 4px rgba(7, 10, 15, 0.06), 0 18px 40px -12px rgba(7, 10, 15, 0.24);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring-focus: 0 0 0 2px var(--surface-card), 0 0 0 4px color-mix(in srgb, var(--border-focus) 55%, transparent);

  /* Compat ancien jeton */
  --shadow: var(--shadow-1);

  /* ---- Mouvement ---- */
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur-base: 190ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
  --ease-out: cubic-bezier(0.22, 0.71, 0.28, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.4, 1); /* @kind other */
  --transition-control: color var(--dur-fast) var(--ease-out),
                        background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out); /* @kind other */

  /* ---- Empilement ---- */
  --z-header: 40; /* @kind other */
  --z-tooltip: 100; /* @kind other */
  --z-overlay: 200; /* @kind other */
  --z-deck: 300; /* @kind other */
  --z-tour: 500; /* @kind other */
}

@media (prefers-color-scheme: dark) {
  :root {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); /* @kind shadow */
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6); /* @kind shadow */
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -12px rgba(0, 0, 0, 0.7); /* @kind shadow */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* @kind shadow */
  }
}

:root[data-theme="dark"], [data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); /* @kind shadow */
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6); /* @kind shadow */
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -12px rgba(0, 0, 0, 0.7); /* @kind shadow */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* @kind shadow */
}

:root[data-theme="light"], [data-theme="light"] {
  --shadow-1: 0 1px 2px rgba(7, 10, 15, 0.05); /* @kind shadow */
  --shadow-2: 0 1px 2px rgba(7, 10, 15, 0.05), 0 6px 16px -6px rgba(7, 10, 15, 0.12); /* @kind shadow */
  --shadow-3: 0 2px 4px rgba(7, 10, 15, 0.06), 0 18px 40px -12px rgba(7, 10, 15, 0.24); /* @kind shadow */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* @kind shadow */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}


/* ═══════════════════════════════════════════════════════════════
   Jetons — couleur par mandat
   ═══════════════════════════════════════════════════════════════ */

/* Quantisse — Couleur d'accent par mandat (--entity-accent)
   Chaque société suivie porte une couleur propre : c'est le repère
   permanent du mandat sur lequel on travaille. On ne pioche QUE dans la
   palette dataviz, pour rester cohérent avec les graphiques et lisible en
   thème sombre comme à l'impression.

   Usage : poser data-entity-accent sur <html> ou sur le conteneur du
   mandat ; toute la vue s'aligne (onglet actif, curseurs, sélection,
   liseré des nœuds de pilotage, jauge de visite guidée). */

:root {
  --entity-accent: var(--series-1);
  --entity-accent-soft: color-mix(in srgb, var(--entity-accent) 12%, transparent);
  --entity-accent-line: color-mix(in srgb, var(--entity-accent) 40%, transparent);
  --entity-accent-text: var(--entity-accent);
}

[data-entity-accent="bleu"]    { --entity-accent: var(--series-1); }
[data-entity-accent="vert"]    { --entity-accent: var(--series-5); }
[data-entity-accent="violet"]  { --entity-accent: var(--series-7); }
[data-entity-accent="orange"]  { --entity-accent: var(--series-6); }
[data-entity-accent="ambre"]   { --entity-accent: var(--series-4); }
[data-entity-accent="rose"]    { --entity-accent: var(--series-3); }
[data-entity-accent="brique"]  { --entity-accent: var(--series-8); }
[data-entity-accent="teal"]    { --entity-accent: var(--brand-500); }

/* Recalcule les dérivés dès qu'un scope redéfinit --entity-accent. */
[data-entity-accent] {
  --entity-accent-soft: color-mix(in srgb, var(--entity-accent) 12%, transparent);
  --entity-accent-line: color-mix(in srgb, var(--entity-accent) 40%, transparent);
  --entity-accent-text: var(--entity-accent);
}


/* ═══════════════════════════════════════════════════════════════
   Feuille de style de l'application
   ═══════════════════════════════════════════════════════════════ */

/* =============================================================
 * Quantisse — Feuille de style de l'application (remplacement de
 * assets/styles.css). Aucune dépendance, aucune police distante.
 *
 * Elle couvre le balisage existant classe pour classe : le fichier se
 * substitue à l'ancien sans toucher au HTML. Les noms de classe
 * historiques sont conservés ; les valeurs viennent toutes des jetons.
 *
 * Principes :
 *   1. Bandeau sombre, contenu clair — le châssis s'efface, les chiffres
 *      portent la hiérarchie.
 *   2. Le filet (1px) avant l'ombre. L'ombre est réservée au flottant.
 *   3. Densité assumée : rien n'est aéré arbitrairement dans un tableau.
 *   4. La couleur d'accent du mandat est le seul élément d'identité
 *      variable de l'interface.
 * ============================================================= */

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:var(--fs-500);background:var(--surface-page);color:var(--text-primary);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--text-link) 35%,transparent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
::selection{background:color-mix(in srgb,var(--entity-accent) 22%,transparent)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-xs)}

/* ---------- 1. Bandeau supérieur (sombre) ---------- */
.app-header{background:var(--surface-chrome);color:var(--text-inverse);border-bottom:1px solid var(--border-hairline);position:sticky;top:0;z-index:var(--z-header)}
.header-top{display:flex;align-items:center;gap:var(--sp-6);height:var(--height-chrome);padding:0 var(--pad-view);max-width:none}
.brand{display:flex;align-items:baseline;gap:var(--sp-4);white-space:nowrap;padding-right:var(--sp-4);position:relative}
.brand-name{font:var(--fw-bold) var(--fs-600)/1 var(--font-display);letter-spacing:var(--ls-title);color:var(--white)}
.brand-name::before{content:"";display:inline-block;width:3px;height:0.82em;margin-right:var(--sp-4);border-radius:var(--r-xs);background:var(--brand-400);vertical-align:baseline;transform:translateY(1px)}
.brand-sub{color:var(--text-inverse-soft);font-size:var(--fs-200);letter-spacing:var(--ls-body)}
.header-spacer{flex:1}

.entity-switcher{display:flex;align-items:center;gap:var(--sp-4);background:var(--surface-chrome-2);border:1px solid var(--border-chrome);border-radius:var(--r-md);padding:0 var(--sp-4) 0 var(--sp-5);height:32px}
.entity-accent{width:3px;height:16px;border-radius:var(--r-xs);display:inline-block;flex:none;background:var(--entity-accent)}
.entity-select{font:var(--fw-semibold) var(--fs-400)/1 var(--font-sans);color:var(--white);background:transparent;border:none;padding:0;min-width:212px;cursor:pointer;appearance:none;text-overflow:ellipsis}
.entity-select:focus{outline:none}
.entity-switcher:focus-within{border-color:var(--brand-400)}
.entity-switcher::after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid var(--text-inverse-soft);flex:none}
.entity-select option{color:var(--text-primary);background:var(--surface-card)}

.erp-badge{font:var(--fw-medium) var(--fs-100)/1 var(--font-sans);color:var(--text-inverse-soft);border:1px solid var(--border-chrome);border-radius:var(--r-pill);padding:5px var(--sp-5);white-space:nowrap}
.sync-pill{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-100);color:var(--text-inverse-soft);white-space:nowrap}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.close-info{font-size:var(--fs-100);color:var(--text-inverse-soft);white-space:nowrap;padding-left:var(--sp-4);border-left:1px solid var(--border-chrome)}

/* Boutons du bandeau (.print-btn est le bouton générique historique) */
.print-btn{font:var(--type-control);color:var(--text-inverse-soft);background:transparent;border:1px solid var(--border-chrome);border-radius:var(--r-md);padding:5px var(--sp-5);cursor:pointer;white-space:nowrap;font-size:var(--fs-200);transition:var(--transition-control)}
.print-btn:hover{color:var(--white);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24)}
.print-btn:active{background:rgba(255,255,255,.03);transform:translateY(.5px)}
/* Dans le corps de page (fond clair), le même bouton s'inverse. */
.main .print-btn,.card .print-btn,.note-form .print-btn,.deck-nav .print-btn,.tour-nav .print-btn,.help-head .print-btn{color:var(--text-secondary);background:var(--surface-card);border-color:var(--border-strong)}
.main .print-btn:hover,.card .print-btn:hover,.note-form .print-btn:hover,.deck-nav .print-btn:hover,.tour-nav .print-btn:hover,.help-head .print-btn:hover{color:var(--text-primary);background:var(--surface-sunken);border-color:var(--ink-300)}

/* Boutons nommés, pour le code neuf */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);font:var(--type-control);border-radius:var(--r-md);padding:var(--pad-control);cursor:pointer;border:1px solid transparent;transition:var(--transition-control);white-space:nowrap}
.btn-primary{background:var(--ink-900);color:var(--white);border-color:var(--ink-900)}
.btn-primary:hover{background:var(--ink-800);border-color:var(--ink-800)}
.btn-primary:active{background:var(--ink-950)}
.btn-accent{background:var(--brand-600);color:var(--white);border-color:var(--brand-600)}
.btn-accent:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-secondary{background:var(--surface-card);color:var(--text-secondary);border-color:var(--border-strong)}
.btn-secondary:hover{color:var(--text-primary);background:var(--surface-sunken);border-color:var(--ink-300)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--tint-neutral);color:var(--text-primary)}
.btn-danger{background:transparent;color:var(--critical-text);border-color:color-mix(in srgb,var(--critical) 34%,transparent)}
.btn-danger:hover{background:var(--tint-critical)}
.btn:disabled,.print-btn:disabled{opacity:.45;cursor:default;transform:none}

/* ---------- 2. Onglets ---------- */
.tabs{display:flex;gap:0;overflow-x:auto;background:var(--surface-nav);border-top:1px solid var(--border-chrome);padding:0 var(--pad-view);scrollbar-width:thin}
.tabs::-webkit-scrollbar{display:none}
.tabs{-ms-overflow-style:none;scrollbar-width:none}
.tab{font:var(--fw-medium) var(--fs-400)/1 var(--font-sans);color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;padding:11px var(--sp-6) 10px;cursor:pointer;white-space:nowrap;transition:var(--transition-control)}
.tab:hover{color:var(--text-primary);background:var(--surface-sunken)}
.tab.active{color:var(--text-primary);border-bottom-color:var(--entity-accent);font-weight:var(--fw-bold)}

/* ---------- 3. Structure de vue ---------- */
.main{max-width:var(--width-content);margin:0 auto;padding:var(--sp-9) var(--pad-view) var(--sp-13)}
.view-title{font:var(--type-view-title);letter-spacing:var(--ls-title);margin-bottom:3px}
.view-sub{color:var(--text-secondary);font-size:var(--fs-300);margin-bottom:var(--sp-8);max-width:110ch}
.grid{display:grid;gap:var(--gap-grid)}
.grid-kpi{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
.grid-2{grid-template-columns:1fr 1fr}
.grid-2-1{grid-template-columns:2fr 1fr}
@media (max-width:980px){.grid-2,.grid-2-1{grid-template-columns:1fr}}
.section-gap{margin-top:var(--gap-grid)}

.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-lg);padding:var(--pad-card);box-shadow:var(--shadow-1)}
.card-title{font:var(--type-card-title);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-label);margin-bottom:var(--sp-5);display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap}
.card-note{font-size:var(--fs-200);color:var(--text-muted);margin-top:var(--sp-5);line-height:var(--lh-snug);text-wrap:pretty}

/* ---------- 4. Tuiles KPI ---------- */
.kpi{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-6) var(--sp-7)}
.kpi-label{font:var(--type-kpi-label);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-label)}
.kpi-value{font:var(--type-kpi-value);letter-spacing:var(--ls-title);margin-top:var(--sp-2)}
.kpi-value>span{white-space:nowrap}
.kpi-delta{font-size:var(--fs-200);color:var(--text-muted);margin-top:var(--sp-1)}
.kpi-delta .up{color:var(--text-positive);font-weight:var(--fw-semibold)}
.kpi-delta .down{color:var(--text-negative);font-weight:var(--fw-semibold)}
.kpi-spark{margin-top:var(--sp-4);opacity:.9}

/* ---------- 5. Tableaux de données ---------- */
.table-scroll{overflow-x:auto;margin:0 calc(-1 * var(--sp-2))}
table.data{border-collapse:collapse;width:100%;font:var(--type-table)}
table.data th,table.data td{padding:var(--pad-cell);text-align:right;white-space:nowrap}
table.data th{color:var(--text-muted);font-weight:var(--fw-semibold);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:var(--ls-label);border-bottom:1px solid var(--ink-300);vertical-align:bottom;position:relative}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{color:var(--text-primary)}
table.data td:first-child,table.data th:first-child{text-align:left;position:sticky;left:0;background:var(--surface-card)}
table.data tbody tr{border-bottom:1px solid var(--border-soft)}
table.data tbody tr:hover,table.data tbody tr:hover td:first-child{background:var(--entity-accent-soft)}
tr.subtotal td{font-weight:var(--fw-bold);border-top:1px solid var(--border-strong);background:var(--tint-neutral)}
tr.subtotal:hover td{background:var(--tint-neutral)}
tr.total td{font-weight:var(--fw-black);border-top:2px solid var(--text-primary);border-bottom:none;font-size:var(--fs-400)}
td.indent,th.indent{padding-left:var(--sp-10)}
td.neg,span.neg{color:var(--text-negative)}
td.fcst{font-style:italic;color:var(--text-muted)}
.row-label{text-align:left}
.th-input{width:64px;font:var(--fw-semibold) var(--fs-300)/1.2 var(--font-numeric);text-align:right;font-variant-numeric:tabular-nums;color:var(--text-primary);background:var(--surface-sunken);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:3px 6px;transition:var(--transition-control)}
.th-input:hover{border-color:var(--ink-300)}
.th-input:focus{outline:none;border-color:var(--entity-accent);box-shadow:0 0 0 3px var(--entity-accent-soft)}

/* ---------- 6. Badges, notes de risque ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-3);font:var(--fw-semibold) var(--fs-100)/1.35 var(--font-sans);border-radius:var(--r-sm);padding:3px var(--sp-4);letter-spacing:.01em;white-space:nowrap}
.badge-good{background:var(--tint-good);color:var(--good-text)}
.badge-warning{background:var(--tint-warning);color:var(--warning-text)}
.badge-serious{background:var(--tint-serious);color:var(--serious-text)}
.badge-critical{background:var(--tint-critical);color:var(--critical-text)}
.badge-neutral{background:var(--tint-neutral);color:var(--text-secondary)}
.badge-accent{background:var(--entity-accent-soft);color:var(--entity-accent-text)}
.grade{display:inline-flex;width:22px;height:22px;border-radius:var(--r-sm);align-items:center;justify-content:center;font:var(--fw-black) var(--fs-300)/1 var(--font-sans)}
.grade-A{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good-text)}
.grade-B{background:color-mix(in srgb,var(--good) 9%,transparent);color:var(--good-text)}
.grade-C{background:var(--tint-warning);color:var(--warning-text)}
.grade-D{background:var(--tint-serious);color:var(--serious-text)}
.grade-E{background:color-mix(in srgb,var(--critical) 16%,transparent);color:var(--critical-text)}

/* ---------- 7. Alertes ---------- */
.alert{display:flex;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);border:1px solid var(--border-hairline);margin-bottom:var(--sp-4);background:var(--surface-sunken);position:relative;overflow:hidden}
.alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border-strong)}
.alert-critical::before{background:var(--critical)}
.alert-warning::before{background:var(--warning)}
.alert-info::before{background:var(--series-1)}
.alert-icon{font-size:var(--fs-500);line-height:1.25;flex:none}
.alert-title{font-weight:var(--fw-semibold);font-size:var(--fs-400)}
.alert-detail{font-size:var(--fs-300);color:var(--text-secondary);line-height:var(--lh-snug);margin-top:1px;text-wrap:pretty}

/* ---------- 8. Contrôles ---------- */
.controls{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;margin-bottom:var(--sp-7)}
.control-label{font-size:var(--fs-100);color:var(--text-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-label)}
.seg{display:inline-flex;border:1px solid var(--border-hairline);border-radius:var(--r-md);background:var(--surface-sunken);padding:2px;gap:2px}
.seg button{font:var(--fw-semibold) var(--fs-300)/1 var(--font-sans);color:var(--text-secondary);background:none;border:none;padding:6px var(--sp-5);cursor:pointer;border-radius:var(--r-sm);transition:var(--transition-control)}
.seg button:hover{color:var(--text-primary)}
.seg button.active{background:var(--surface-card);color:var(--text-primary);box-shadow:var(--shadow-1),0 0 0 1px var(--border-hairline)}
.seg button.active::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--entity-accent);margin-right:var(--sp-3);vertical-align:middle;transform:translateY(-1px)}
select.control,input.control{font:var(--fw-medium) var(--fs-300)/1.2 var(--font-sans);background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--pad-control);transition:var(--transition-control)}
select.control:hover,input.control:hover{border-color:var(--ink-300)}
select.control:focus,input.control:focus{outline:none;border-color:var(--entity-accent);box-shadow:0 0 0 3px var(--entity-accent-soft)}
input.control::placeholder{color:var(--text-muted)}
input[type=range]{accent-color:var(--entity-accent)}
input[type=checkbox]{accent-color:var(--entity-accent)}

/* ---------- 9. Graphiques (SVG produit par l'application) ---------- */
.chart-wrap{width:100%}
.chart{width:100%;height:auto;display:block}
.chart .tick{font-size:10.5px;fill:var(--data-label);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.chart .direct-label{font-size:11px;font-weight:var(--fw-semibold);font-family:var(--font-sans)}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-5);font-size:var(--fs-200);color:var(--text-secondary)}
.legend-item{display:inline-flex;align-items:center;gap:var(--sp-3)}
.chart-table-btn{margin-top:var(--sp-4);font:var(--fw-semibold) var(--fs-100)/1 var(--font-sans);color:var(--text-muted);background:none;border:none;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.chart-table-btn:hover{color:var(--text-primary)}
.chart-table{margin-top:var(--sp-5)}
.csv-btn{float:right;font:var(--fw-semibold) var(--fs-100)/1 var(--font-sans);color:var(--text-secondary);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:3px var(--sp-4);cursor:pointer;margin-left:var(--sp-5);text-transform:none;letter-spacing:0;transition:var(--transition-control)}
.csv-btn:hover{color:var(--text-primary);background:var(--surface-sunken)}
.chart-tooltip{position:fixed;display:none;z-index:var(--z-tooltip);pointer-events:none;background:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-hairline);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);font-size:var(--fs-200);box-shadow:var(--shadow-3);max-width:260px}
.tip-title{font-weight:var(--fw-semibold);margin-bottom:var(--sp-2);font-size:var(--fs-300)}
.tip-row{display:flex;align-items:center;gap:var(--sp-3)}
.tip-row b{margin-left:auto;padding-left:var(--sp-6);font-variant-numeric:tabular-nums}
.tip-dot{width:7px;height:7px;border-radius:var(--r-xs);display:inline-block;flex:none}

.stacked-bar-wrap{width:100%}
.stacked-bar{display:flex;height:24px;border-radius:var(--r-sm);overflow:hidden;gap:2px}
.stacked-seg{height:100%;min-width:2px}
.hbar-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.hbar-row{display:grid;grid-template-columns:180px 1fr 130px;gap:var(--sp-5);align-items:center;font-size:var(--fs-300)}
.hbar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.hbar-track{background:var(--tint-neutral);border-radius:var(--r-xs);height:10px;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:var(--r-xs)}
.hbar-value{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold)}
.hbar-extra{color:var(--text-muted);font-weight:var(--fw-regular);font-size:var(--fs-100)}

/* ---------- 10. Connecteurs & données ---------- */
.arch-flow{display:flex;align-items:stretch;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-7)}
.arch-node{flex:1;min-width:150px;border:1px solid var(--border-hairline);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);background:var(--surface-sunken);text-align:center}
.arch-node b{display:block;font-size:var(--fs-400);font-weight:var(--fw-semibold)}
.arch-node span{font-size:var(--fs-100);color:var(--text-secondary)}
.arch-arrow{align-self:center;color:var(--ink-300);font-size:var(--fs-500)}
.endpoint,.mono{font-family:var(--font-mono);font-size:var(--fs-200)}
.endpoint{background:var(--tint-neutral);border-radius:var(--r-xs);padding:2px var(--sp-4);color:var(--text-secondary)}

/* ---------- 11. Guide de lecture (modale d'aide) ---------- */
.help-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--sp-10);backdrop-filter:blur(3px)}
.help-panel{background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-3);width:100%;max-width:780px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.help-head{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-7) var(--sp-8);border-bottom:1px solid var(--border-hairline)}
.help-body{overflow-y:auto;padding:var(--sp-3) var(--sp-8) var(--sp-7)}
.help-group-title{font:var(--fw-bold) var(--fs-100)/1 var(--font-sans);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--entity-accent-text);margin:var(--sp-8) 0 var(--sp-4)}
.help-item{border-bottom:1px solid var(--border-soft);padding:var(--sp-5) 0}
.help-term{font-weight:var(--fw-semibold);font-size:var(--fs-500)}
.help-def{font-size:var(--fs-400);color:var(--text-secondary);margin-top:2px;line-height:var(--lh-snug)}
.help-formula{font-family:var(--font-mono);font-size:var(--fs-200);background:var(--tint-neutral);border-radius:var(--r-sm);padding:4px var(--sp-4);margin-top:var(--sp-4);display:inline-block;color:var(--text-secondary)}
.help-tip{font-size:var(--fs-300);color:var(--text-secondary);margin-top:var(--sp-4)}

/* ---------- 12. Palette de recherche ---------- */
.pal-item{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-5);border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-400)}
.pal-item:hover{background:var(--surface-sunken)}
.pal-item.pal-sel{background:var(--entity-accent-soft);box-shadow:inset 2px 0 0 var(--entity-accent)}

/* ---------- 13. Arbre de pilotage ---------- */
.dt-wrap{position:relative}
.dt-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8) var(--sp-13);position:relative}
.dt-col{display:flex;flex-direction:column;gap:var(--sp-10);justify-content:center}
.dt-node{background:var(--surface-sunken);border:1px solid var(--border-hairline);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);position:relative;z-index:1}
.dt-node.dt-driver{border-color:var(--entity-accent-line);background:var(--surface-card);box-shadow:inset 2px 0 0 var(--entity-accent)}
.dt-label{font:var(--fw-semibold) var(--fs-100)/1.2 var(--font-sans);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-label)}
.dt-val{font:var(--fw-bold) var(--fs-600)/1.15 var(--font-numeric);margin-top:3px;font-variant-numeric:tabular-nums}
.dt-delta{font-size:var(--fs-200);min-height:1.1em}
.dt-sub{font-size:var(--fs-100);color:var(--text-muted);margin-top:3px}
.dt-node input[type=range]{width:100%;margin-top:var(--sp-4)}
@media (max-width:900px){.dt-grid{grid-template-columns:1fr 1fr}.dt-svg{display:none}}

/* ---------- 14. Visite guidée ---------- */
#tour-overlay{position:fixed;inset:0;z-index:var(--z-tour);pointer-events:none}
.tour-spot{position:fixed;border-radius:var(--r-lg);box-shadow:0 0 0 9999px var(--scrim),0 0 0 2px var(--entity-accent);transition:all var(--dur-slow) var(--ease-out)}
.tour-panel{position:fixed;z-index:calc(var(--z-tour) + 1);pointer-events:auto;background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-3);width:min(440px,calc(100vw - 24px));padding:var(--sp-7) var(--sp-8)}
.tour-head{display:flex;justify-content:space-between;align-items:center}
.tour-chap{font:var(--fw-bold) var(--fs-100)/1 var(--font-sans);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--entity-accent-text)}
.tour-title{font:var(--fw-bold) var(--fs-600)/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-title);margin:var(--sp-4) 0 var(--sp-4)}
.tour-body{font-size:var(--fs-400);color:var(--text-secondary);line-height:var(--lh-normal);text-wrap:pretty}
.tour-body b{color:var(--text-primary);font-weight:var(--fw-semibold)}
.tour-progress{height:2px;background:var(--border-soft);border-radius:var(--r-pill);margin:var(--sp-6) 0 var(--sp-5);overflow:hidden}
.tour-progress-fill{height:100%;background:var(--entity-accent);border-radius:var(--r-pill);transition:width var(--dur-slow) var(--ease-out)}
.tour-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5)}
.tour-count{font-size:var(--fs-100);color:var(--text-muted);font-variant-numeric:tabular-nums}
.tour-nav button:disabled{opacity:.4;cursor:default}
.tour-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--critical);margin-left:var(--sp-2);vertical-align:middle}

/* ---------- 15. Mode présentation (board deck) ---------- */
.deck-overlay{position:fixed;inset:0;z-index:var(--z-deck);background:var(--surface-page);display:flex;flex-direction:column}
.deck-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:4vh 6vw}
.deck-slide{width:100%;max-width:1060px}
.deck-slide h2{font:var(--fw-bold) var(--fs-900)/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-display);margin-bottom:var(--sp-9);padding-bottom:var(--sp-5);border-bottom:2px solid var(--entity-accent);display:inline-block}
.deck-kpi .kpi-value{font-size:2rem}
.deck-note{font-size:var(--fs-500);color:var(--text-secondary);margin-top:var(--sp-8);max-width:var(--width-prose)}
.deck-nav{display:flex;justify-content:center;align-items:center;gap:var(--sp-7);padding:var(--sp-6);border-top:1px solid var(--border-hairline);background:var(--surface-card)}

/* ---------- 16. Notes de clôture ---------- */
.note-item{border:1px solid var(--border-hairline);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4);background:var(--surface-sunken)}
.note-item.note-done{opacity:.6}
.note-head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.note-date{font-size:var(--fs-100);color:var(--text-muted);font-variant-numeric:tabular-nums}
.note-check{font-size:var(--fs-100);color:var(--text-secondary);display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer}
.note-del{font:inherit;font-size:var(--fs-300);color:var(--text-muted);background:none;border:none;cursor:pointer;padding:2px var(--sp-3);border-radius:var(--r-sm);transition:var(--transition-control)}
.note-del:hover{color:var(--critical-text);background:var(--tint-critical)}
.note-text{font-size:var(--fs-400)}
.note-form{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin-top:var(--sp-6)}

.isolation-note{display:flex;gap:var(--sp-5);align-items:flex-start;border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-7);font-size:var(--fs-300);color:var(--text-secondary);background:var(--surface-sunken)}

/* ---------- 17. Pied de page, divers ---------- */
.footer{max-width:var(--width-content);margin:0 auto;padding:0 var(--pad-view) var(--sp-11);color:var(--text-muted);font-size:var(--fs-100)}
.print-meta{display:none}
details.formula{font-size:var(--fs-300);color:var(--text-secondary)}
details.formula summary{cursor:pointer;color:var(--text-muted);font-size:var(--fs-100)}
.formula-code{font-family:var(--font-mono);font-size:var(--fs-100)}

/* ---------- 18. Écrans étroits ---------- */
@media (max-width:760px){
  html{font-size:14px}
  .header-top{height:auto;flex-wrap:wrap;padding:var(--sp-4) var(--sp-6);gap:var(--sp-4) var(--sp-6)}
  .tabs{padding:0 var(--sp-6)}
  .brand-sub{display:none}
  .entity-switcher{order:10;flex:1 1 100%}
  .entity-select{width:100%;min-width:0}
  .erp-badge,.sync-pill{font-size:var(--fs-100)}
  .close-info{display:none}
  .print-btn{padding:4px var(--sp-4)}
  .tab{padding:9px var(--sp-5)}
  .main{padding:var(--sp-7) var(--sp-6) var(--sp-11)}
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-value{font-size:1.25rem}
  .card{padding:var(--pad-card-tight)}
  .hbar-row{grid-template-columns:105px 1fr 92px;font-size:var(--fs-200)}
  .table-scroll{-webkit-overflow-scrolling:touch}
  table.data th,table.data td{padding:5px 7px}
  .arch-flow{flex-direction:column}
  .arch-arrow{transform:rotate(90deg);align-self:center}
  .controls{gap:var(--sp-4)}
  .seg button{padding:5px var(--sp-4);font-size:var(--fs-200)}
}
@media (max-width:420px){.view-title{font-size:var(--fs-600)}.grid-kpi{gap:var(--sp-4)}.kpi-value{font-size:1.15rem}}

/* ---------- 19. Impression — le Pack mensuel part en PDF ---------- */
@media print{
  :root,:root[data-theme=light],:root[data-theme=dark]{
    color-scheme:light;
    --surface-page:#fff;--surface-card:#fff;--surface-sunken:#fff;--surface-raised:#fff;
    --surface-chrome:#fff;--surface-chrome-2:#fff;--surface-nav:#fff;
    --text-primary:#000;--text-secondary:#333;--text-muted:#555;--text-inverse:#000;--text-inverse-soft:#333;
    --border-hairline:#ccc;--border-soft:#ddd;--border-strong:#bbb;--border-chrome:#ccc;
    --data-grid:#ddd;--data-axis:#bbb;--data-label:#555;
    --shadow-1:none;--shadow-2:none;--shadow-3:none;
    --series-1:#2a78d6;--series-3:#e87ba4;--series-4:#eda100;--series-5:#1baf7a;--series-6:#eb6834;--series-7:#4a3aa7;--series-8:#e34948;
    --good-text:#006300;--critical-text:#b02222;
  }
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;font-size:12px}
  .tabs,.header-spacer,.sync-pill,.close-info,.controls,.print-btn,.entity-switcher,
  #th-reset,#scn-reset,#test-conn,#scn-form,.footer,.chart-table-btn,.csv-btn,
  .note-form,.note-check,.note-del,details.formula,.help-overlay,#tour-overlay,.deck-overlay{display:none !important}
  .app-header{position:static;border-bottom:2px solid #000;padding:0 0 var(--sp-3);background:#fff;color:#000}
  .brand-name{color:#000}
  .brand-name::before{background:#000}
  .print-meta{display:block;font-size:.76rem;color:#333;padding:var(--sp-2) 0 var(--sp-4)}
  .main{max-width:none;padding:8mm 0 0}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .grid-kpi{grid-template-columns:repeat(4,1fr)}
  .th-input{border:none;background:none;width:auto;padding:0}
  table.data{font-size:10.5px}
  table.data td:first-child,table.data th:first-child{position:static}
  .alert,tr,.report-block{break-inside:avoid}
  .stacked-seg,.hbar-fill,.grade,.badge,.kpi-delta .up,.kpi-delta .down,.alert::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* ═══════════════════════════════════════════════════════════════
   Retouches maison
   ═══════════════════════════════════════════════════════════════ */

/* =========================================================================
 * Quantisse — retouches maison sur la charte
 *
 * Concaténé APRÈS design/system/platform/app.css, donc l'emporte à
 * spécificité égale. Chaque règle ici doit être justifiée : la charte fait
 * foi, on ne la contredit que là où le produit réel s'écarte du kit de
 * référence sur lequel elle a été dessinée.
 * ========================================================================= */

/* --- 1. Bandeau : autoriser le passage à la ligne à toute largeur ---------
 * La charte fixe `.header-top` en `nowrap` à hauteur constante, et ne le
 * laisse passer à la ligne qu'en dessous de 760 px. Le kit de référence tient
 * ainsi sur une ligne, mais le produit réel porte un bouton de plus (« Visite
 * guidée » et sa pastille, là où le kit a « Thème ») et un nom de mandat plus
 * long : à 1440 px le dernier bouton sortait de 78 px et faisait défiler toute
 * la page horizontalement.
 * On garde donc la hauteur nominale comme plancher, et on laisse le bandeau
 * respirer sur deux lignes quand le contenu l'exige — ce que la charte fait
 * déjà en écran étroit, appliqué ici à toutes les largeurs. */
.header-top {
  flex-wrap: wrap;
  height: auto;
  min-height: var(--height-chrome);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  row-gap: var(--sp-4);
}
/* Le séparateur pousse le reste à droite tant qu'il y a la place ; une fois
 * le bandeau sur deux lignes, il ne doit pas creuser un vide au milieu. */
.header-spacer { min-width: 0; }

/* --- 2. Sélecteur de mandat : ne jamais tronquer le nom de la société ------
 * `min-width: 212px` suffit au kit, dont les libellés sont courts. Les noms
 * réels portent la forme juridique et le secteur (« Hélios Distribution SAS
 * — Négoce »), et un mandat mal identifié est une faute grave dans un outil
 * multi-sociétés : on laisse le champ prendre sa largeur naturelle. */
.entity-select { width: auto; min-width: 212px; max-width: 420px; }

/* --- 3. La marque du cockpit ramène au site --------------------------------
 * `.brand-name` devient un lien : sans lui, on entre dans le cockpit sans
 * pouvoir revenir à la page d'accueil. Le lien ne doit rien changer à
 * l'apparence — la charte dessine la marque, pas un lien. */
a.brand-name { text-decoration: none; border-bottom: none; }
a.brand-name:hover { color: var(--brand-300); }

/* --- 4. Identité de l'utilisateur connecté dans le bandeau -----------------
 * La charte ne prévoyait pas d'authentification : le bandeau n'avait donc pas
 * de place pour l'identité. On reprend la facture de `.erp-badge` — pilule
 * discrète sur le chrome sombre — pour ne pas introduire un objet visuel de
 * plus. */
.user-pill {
  font: var(--fw-medium) var(--fs-100)/1 var(--font-sans);
  color: var(--text-inverse-soft);
  border: 1px solid var(--border-chrome);
  border-radius: var(--r-pill);
  padding: 5px var(--sp-5);
  white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}

/* --- 5. Carnet de développement (onglet Administration) --------------------
 * Tableau façon Trello : trois colonnes, cartes déplaçables. Nouvelle vue,
 * absente de la charte livrée — construite avec ses jetons. */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); align-items: start; }
@media (max-width: 980px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col { background: var(--surface-sunken, var(--ink-50)); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); padding: var(--sp-6); }
.kanban-col h3 { font: var(--fw-semibold) var(--fs-300)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-secondary); margin: 0 0 var(--sp-3); display: flex; justify-content: space-between; }
.kanban-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kanban-hint { font-size: var(--fs-200); color: var(--text-muted); line-height: var(--lh-snug); margin: 0 0 var(--sp-5); }
.kanban-drop { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 60px; border-radius: var(--r-md); transition: background var(--dur-2, 130ms); }
.kanban-drop.over { background: color-mix(in srgb, var(--entity-accent, var(--brand-500)) 8%, transparent); outline: 2px dashed var(--entity-accent, var(--brand-500)); outline-offset: 2px; }
.kanban-vide { font-size: var(--fs-200); color: var(--text-muted); padding: var(--sp-5); text-align: center; }
.kanban-card { background: var(--surface-card, #fff); border: 1px solid var(--border-hairline); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); cursor: grab; box-shadow: var(--shadow-1); }
.kanban-card.dragging { opacity: .45; }
.kanban-card-title { font: var(--fw-semibold) var(--fs-400)/1.3 var(--font-sans); color: var(--text-primary); }
.kanban-card-body { font-size: var(--fs-300); color: var(--text-secondary); line-height: var(--lh-snug); margin-top: var(--sp-3); white-space: pre-line; }
.kanban-card-by { font-size: var(--fs-100); color: var(--brand-600); margin-top: var(--sp-3); }
.kanban-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.kanban-card-actions button { font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); color: var(--text-secondary); background: transparent; border: 1px solid var(--border-hairline); border-radius: var(--r-sm); padding: 3px var(--sp-4); cursor: pointer; }
.kanban-card-actions button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.kanban-card-actions button.danger:hover { color: var(--critical); border-color: var(--critical); }

/* Modale carte / suggestion — même voile que les surfaces du produit. */
.todo-overlay { position: fixed; inset: 0; z-index: var(--z-overlay, 200); background: var(--scrim); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: var(--sp-8); }
.todo-panel { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-3); }
.todo-label { font: var(--fw-semibold) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); margin-top: var(--sp-4); }
.todo-panel input, .todo-panel textarea { font: var(--fw-regular) var(--fs-400)/1.4 var(--font-sans); padding: 8px var(--sp-5); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-card, #fff); color: var(--text-primary); resize: vertical; }
.todo-panel input:focus, .todo-panel textarea:focus { outline: none; border-color: var(--entity-accent, var(--brand-500)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--entity-accent, var(--brand-500)) 15%, transparent); }
.todo-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); margin-top: var(--sp-5); }
.todo-actions .primary { background: var(--brand-600); color: #fff; border-color: var(--brand-500); }
.todo-msg { font-size: var(--fs-300); padding: var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }
.todo-msg[data-kind="ok"] { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text, var(--good)); }

/* Suivi des utilisateurs (Administration) : une ligne par rattachement. */
.admin-lien { display: flex; align-items: center; gap: var(--sp-4); padding: 2px 0; white-space: nowrap; }
.admin-lien select { font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); padding: 2px var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--surface-card, #fff); color: var(--text-primary); }
.admin-lien button { font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); color: var(--text-muted); background: none; border: 1px solid var(--border-hairline); border-radius: var(--r-sm); padding: 2px var(--sp-3); cursor: pointer; }
.admin-lien button:hover { color: var(--critical); border-color: var(--critical); }

/* =========================================================================
 * Le cockpit sur un téléphone : la page ne défile JAMAIS vers la droite
 * -------------------------------------------------------------------------
 * Mesuré à 320 px : chaque onglet poussait le document entre 363 et 637 px
 * de large. Le symptôme est toujours le même — un conteneur `flex` refuse de
 * rétrécir sous la largeur de son contenu tant qu'on ne lui donne pas
 * `min-width:0`. La barre d'onglets portait bien `overflow-x:auto`, mais
 * sans cette contrainte elle s'élargissait au lieu de défiler, et emmenait
 * la page avec elle.
 *
 * La règle qu'on pose : ce qui est large défile DANS SON CADRE (barre
 * d'onglets, tableaux), jamais en emportant la page. Un dirigeant qui lit
 * son cockpit dans le train ne doit pas avoir à repousser l'écran vers la
 * gauche pour retrouver le début d'une phrase.
 * ========================================================================= */
/* PAS de `overflow-x:hidden` sur html/body. C'est la rustine réflexe, et elle
   CASSE `position:sticky` : mesuré ici, l'en-tête du cockpit décrochait et
   partait avec le défilement. On contraint donc les vrais coupables, un par
   un — c'est plus long à trouver, et ça ne casse rien d'autre. */

/* La barre d'onglets défile seule, elle ne pousse plus le document. */
.tabs { max-width: 100%; min-width: 0; }

/* Les conteneurs souples de l'en-tête doivent pouvoir rétrécir. */
.app-header, .header-top, .entity-switcher, .main { min-width: 0; }
.entity-switcher { max-width: 100%; }
.entity-select { max-width: 100%; }

/* Un tableau large défile dans son cadre. `.table-scroll` le prévoyait déjà ;
   on garantit qu'il ne peut pas s'élargir au-delà de son parent. */
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; }

@media (max-width: 760px) {
  /* Les grilles à colonnes fixes retombent sur une colonne : deux colonnes
     de 105 px plus une valeur ne tiennent pas dans 320 px. */
  /* `1fr` ne suffit PAS : la taille minimale d'un enfant de grille vaut
     `auto`, c'est-à-dire sa largeur de contenu. Un tableau large élargit donc
     sa piste malgré la colonne unique — mesuré à 542 px dans une fenêtre de
     320. `minmax(0, 1fr)` autorise la piste à descendre sous le contenu, et
     `min-width: 0` sur les enfants fait le reste. */
  .grid-2, .grid-2-1, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid > * { min-width: 0; }
  /* Les cartes ne débordent pas de la zone principale. */
  .card { max-width: 100%; min-width: 0; }
  /* Les libellés très longs se coupent plutôt que d'élargir leur colonne. */
  table.data td, table.data th { overflow-wrap: anywhere; }

  /* Tous les tableaux ne sont pas enveloppés dans `.table-scroll` — six
     onglets poussaient encore la page. Plutôt que de traquer chaque oubli
     dans le gabarit, on rend le tableau lui-même défilant : `display:block`
     en fait une boîte qui sait se contenir. La colonne de libellés reste
     collée à gauche, ce qui est justement ce qu'on veut en lisant un
     tableau financier au doigt. */
  table.data { display: block; max-width: 100%; overflow-x: auto; }
}