/* ───────────────────────────────────────────────────────────────────────────
   Librairie Speyy : les jetons de RÔLE et d'ÉLÉMENT (Core 3.14, 22/10/2026).

   Trois niveaux, un sens de lecture :
     valeurs du thème  `--sp-t-*`   seulement dans `themes/<thème>.css` ;
     rôles             `--sp-<rôle>` ci-dessous, ne lisent que `--sp-t-*` ;
     éléments          `--sp-<élément>-<propriété>`, ne lisent que des rôles.
   Une règle de page ne lit qu'un rôle ou un élément, jamais `--sp-t-*`.
   Ce fichier ne porte AUCUNE valeur : seulement des `var()` et des mélanges
   (`color-mix`) de jetons. La liste commentée : `docs/design/speyy-librairie/
   CONTRAT.md` ; le mode d'emploi : `v3/docs/LIBRAIRIE-SPEYY.md`.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Rôles : surfaces ─────────────────────────────────────────────────── */
  --sp-bg: var(--sp-t-page);
  --sp-surface: var(--sp-t-card);
  --sp-surface-soft: var(--sp-t-muted);
  --sp-sidebar: var(--sp-t-sidebar);
  --sp-hover: var(--sp-t-hover);
  --sp-active: var(--sp-t-sidebar-active);
  --sp-backdrop: var(--sp-t-backdrop);
  --sp-selection: color-mix(in srgb, var(--sp-t-primary) var(--sp-t-selection-mix), transparent);
  /* Page et menu de CHAQUE apparence, quel que soit le mode courant (aperçus Jour / Nuit / Système). */
  --sp-day-bg: var(--sp-t-day-page);
  --sp-day-sidebar: var(--sp-t-day-sidebar);
  --sp-night-bg: var(--sp-t-night-page);
  --sp-night-sidebar: var(--sp-t-night-sidebar);

  /* ── Rôles : encres ───────────────────────────────────────────────────── */
  --sp-text: var(--sp-t-text);
  --sp-text-soft: var(--sp-t-text-soft);
  --sp-text-faint: color-mix(in srgb, var(--sp-t-text-soft) var(--sp-t-faint-mix), var(--sp-t-card));
  --sp-sidebar-text: var(--sp-t-sidebar-text);
  --sp-on-surface: var(--sp-t-text);

  /* ── Rôles : filets ───────────────────────────────────────────────────── */
  --sp-line: var(--sp-t-line);
  --sp-line-strong: var(--sp-t-input);
  --sp-focus: var(--sp-t-ring);

  /* ── Rôles : actions ──────────────────────────────────────────────────── */
  --sp-primary: var(--sp-t-primary);
  --sp-primary-hover: var(--sp-t-primary-hover);
  --sp-on-primary: var(--sp-t-on-primary);
  --sp-ink: var(--sp-t-cta);
  --sp-on-ink: var(--sp-t-on-cta);

  /* ── Rôles : statuts (le mot, le fond teinté, le filet teinté) ─────────── */
  --sp-ok: var(--sp-t-ok);
  --sp-ok-bg: color-mix(in srgb, var(--sp-t-ok) var(--sp-t-badge-fill), var(--sp-t-card));
  --sp-ok-line: color-mix(in srgb, var(--sp-t-ok) var(--sp-t-badge-line), var(--sp-t-card));
  --sp-warn: var(--sp-t-warn);
  --sp-warn-bg: color-mix(in srgb, var(--sp-t-warn) var(--sp-t-badge-fill), var(--sp-t-card));
  --sp-warn-line: color-mix(in srgb, var(--sp-t-warn) var(--sp-t-badge-line), var(--sp-t-card));
  --sp-danger: var(--sp-t-danger);
  --sp-on-danger: var(--sp-t-on-danger);
  --sp-danger-bg: color-mix(in srgb, var(--sp-t-danger) var(--sp-t-badge-fill), var(--sp-t-card));
  --sp-danger-line: color-mix(in srgb, var(--sp-t-danger) var(--sp-t-badge-line), var(--sp-t-card));
  --sp-crit: var(--sp-t-crit);                 /* « Urgent » : le danger de jour, un rouge plus clair de nuit */
  --sp-wait: var(--sp-t-wait);
  --sp-wait-bg: color-mix(in srgb, var(--sp-t-wait) var(--sp-t-badge-fill), var(--sp-t-card));
  --sp-wait-line: color-mix(in srgb, var(--sp-t-wait) var(--sp-t-badge-line), var(--sp-t-card));
  --sp-info: var(--sp-t-info);
  --sp-info-bg: color-mix(in srgb, var(--sp-t-info) var(--sp-t-badge-fill), var(--sp-t-card));
  --sp-info-line: color-mix(in srgb, var(--sp-t-info) var(--sp-t-badge-line), var(--sp-t-card));
  --sp-neutral-bg: color-mix(in srgb, var(--sp-t-text-soft) var(--sp-t-badge-fill), var(--sp-t-card));     /* statut sans couleur (« À lire » de la maquette) */
  --sp-neutral-line: color-mix(in srgb, var(--sp-t-text-soft) var(--sp-t-badge-line), var(--sp-t-card));
  --sp-status-ink: var(--sp-t-badge-ink);
  --sp-status-fill: var(--sp-t-badge-fill);
  --sp-status-line: var(--sp-t-badge-line);

  /* ── Rôles : graphiques et visuels de marque ──────────────────────────── */
  --sp-chart-1: var(--sp-t-chart-1);
  --sp-chart-2: var(--sp-t-chart-2);
  --sp-chart-3: var(--sp-t-chart-3);
  --sp-chart-4: var(--sp-t-chart-4);
  --sp-chart-5: var(--sp-t-chart-5);
  --sp-chart-dim: var(--sp-t-dotchart-dim);
  --sp-dotchart-fg: var(--sp-t-dotchart-ink);    /* graphique en points : points allumés, colonne en avant, points éteints */
  --sp-dotchart-accent: var(--sp-t-dotchart-accent);
  --sp-dotchart-dim: var(--sp-t-dotchart-dim);
  --sp-chart-area-fill: var(--sp-t-area-fill);
  --sp-chart-bar-top: var(--sp-t-bar-top);
  --sp-chart-bar-bottom: var(--sp-t-bar-bottom);
  --sp-person-1: var(--sp-t-person-1);          /* une couleur par personne (mission N2) : `speyy-ui.js::personTone` */
  --sp-person-2: var(--sp-t-person-2);
  --sp-person-3: var(--sp-t-person-3);
  --sp-person-4: var(--sp-t-person-4);
  --sp-person-5: var(--sp-t-person-5);
  --sp-person-6: var(--sp-t-person-6);
  --sp-person-7: var(--sp-t-person-7);
  --sp-person-8: var(--sp-t-person-8);
  --sp-on-person: var(--sp-t-on-person);
  --sp-dots: var(--sp-t-dots);
  --sp-dots-accent: var(--sp-t-dots-accent);
  --sp-city-1: var(--sp-t-city-1);
  --sp-city-2: var(--sp-t-city-2);
  --sp-city-3: var(--sp-t-city-3);
  --sp-city-mode: var(--sp-t-city-mode);       /* « dither » de jour, « nocturne » de nuit (ville éclairée) */
  --sp-city-light-1: var(--sp-t-city-light-1);
  --sp-city-light-2: var(--sp-t-city-light-2);
  --sp-city-light-3: var(--sp-t-city-light-3);
  --sp-logo-filter: var(--sp-t-logo-filter);   /* logo Speyy noir : passé en clair de nuit */
  --sp-brand-ivory: var(--sp-t-ivory);
  --sp-brand-ink: var(--sp-t-ink);
  --sp-brand-sand: var(--sp-t-sand);
  --sp-brand-sepia: var(--sp-t-sepia);

  /* ── Rôles : ombres ───────────────────────────────────────────────────── */
  --sp-shadow: var(--sp-t-shadow);
  --sp-shadow-lift: var(--sp-t-shadow-lift);
  --sp-shadow-focus: var(--sp-t-shadow-focus);
  --sp-shadow-inset: var(--sp-t-shadow-inset);
  --sp-shadow-ring: var(--sp-t-shadow-ring);
  --sp-shadow-none: var(--sp-t-shadow-none);
  --sp-press-mix: var(--sp-t-press-mix);      /* survol d'un bouton plein */

  /* ── Rôles : polices ──────────────────────────────────────────────────── */
  --sp-font-heading: var(--sp-t-font-heading);
  --sp-font-sans: var(--sp-t-font-sans);
  --sp-font-mono: var(--sp-t-font-mono);
  --sp-font: var(--sp-font-sans);              /* nom historique du socle du 09/10 */

  /* ── Rôles : rayons ───────────────────────────────────────────────────── */
  --sp-radius-xs: var(--sp-t-radius-xs);
  --sp-radius-sm: var(--sp-t-radius-sm);
  --sp-radius-md: var(--sp-t-radius-md);
  --sp-radius-lg: var(--sp-t-radius-lg);
  --sp-radius-xl: var(--sp-t-radius-xl);
  --sp-radius-xxl: var(--sp-t-radius-xxl);
  --sp-radius-pill: var(--sp-t-radius-pill);
  --sp-radius-round: var(--sp-t-radius-round);

  /* ── Rôles : mouvement (3.15.4) ───────────────────────────────────────── */
  --sp-dur-1: var(--sp-t-dur-1);
  --sp-dur-2: var(--sp-t-dur-2);
  --sp-dur-3: var(--sp-t-dur-3);
  --sp-dur-4: var(--sp-t-dur-4);
  --sp-ease-out: var(--sp-t-ease-out);
  --sp-ease-in: var(--sp-t-ease-in);
  --sp-ease-in-out: var(--sp-t-ease-in-out);
  --sp-ease-spring: var(--sp-t-ease-spring);

  /* ── Éléments ─────────────────────────────────────────────────────────── */
  /* Bouton : `.m-btn` (Olympe), `.v3-btn` (cockpit), boutons du chat. */
  --sp-btn-bg: var(--sp-surface);
  --sp-btn-fg: var(--sp-text);
  --sp-btn-line: var(--sp-line-strong);
  --sp-btn-hover: var(--sp-hover);
  --sp-btn-radius: var(--sp-radius-pill);
  --sp-btn-primary-bg: var(--sp-primary);
  --sp-btn-primary-fg: var(--sp-on-primary);
  --sp-btn-primary-hover: var(--sp-primary-hover);
  --sp-btn-ink-bg: var(--sp-ink);
  --sp-btn-ink-fg: var(--sp-on-ink);
  --sp-btn-danger-bg: var(--sp-danger);
  --sp-btn-danger-fg: var(--sp-on-danger);
  --sp-btn-ink-hover: color-mix(in srgb, var(--sp-btn-ink-bg) var(--sp-press-mix), var(--sp-btn-ink-fg));
  --sp-btn-danger-hover: color-mix(in srgb, var(--sp-btn-danger-bg) var(--sp-press-mix), var(--sp-text));
  /* Bouton de confirmation (vert) : « Confirmer » d'une carte de connexion. */
  --sp-btn-ok-bg: var(--sp-ok);
  --sp-btn-ok-fg: var(--sp-on-primary);
  --sp-btn-ok-hover: color-mix(in srgb, var(--sp-btn-ok-bg) var(--sp-press-mix), var(--sp-text));
  --sp-btn-focus: var(--sp-shadow-focus);
  /* Bouton-icône (rond) : envoi, actions du fil. */
  --sp-icon-btn-radius: var(--sp-radius-pill);
  --sp-icon-btn-hover: var(--sp-hover);

  /* Champ et sélecteur : `.m-input`, `.m-select`, `.sp-select`, champs des formulaires. */
  --sp-field-bg: var(--sp-surface);
  --sp-field-fg: var(--sp-text);
  --sp-field-placeholder: var(--sp-text-faint);
  --sp-field-line: var(--sp-line-strong);
  --sp-field-line-focus: var(--sp-focus);
  --sp-field-focus: var(--sp-shadow-focus);
  --sp-field-radius: var(--sp-radius-md);
  --sp-select-radius: var(--sp-search-radius);     /* sélecteur d'une barre de filtres : la forme de la recherche voisine (N1, 23/10) */
  /* Recherche : en pilule (c-sauge). */
  --sp-search-bg: var(--sp-surface);
  --sp-search-line: var(--sp-line);
  --sp-search-radius: var(--sp-radius-pill);

  /* Carte et tuile : `.m-card`, `.v3-card`, `.v3-tile`. */
  --sp-card-bg: var(--sp-surface);
  --sp-card-line: var(--sp-line);
  --sp-card-radius: var(--sp-radius-lg);
  --sp-card-shadow: var(--sp-shadow);
  --sp-card-hover-shadow: var(--sp-shadow-lift);

  /* Pastille d'état `.sp-st` et puce `.sp-chip`, badge `.m-badge`. */
  --sp-chip-bg: var(--sp-surface);
  --sp-chip-fg: var(--sp-text-soft);
  --sp-chip-line: var(--sp-line);
  --sp-chip-radius: var(--sp-radius-pill);
  --sp-status-dot-radius: var(--sp-radius-round);
  --sp-st-bg: var(--sp-neutral-bg);                /* pastille d'état : pilule teintée de sa couleur, neutre sans ton */
  --sp-st-line: var(--sp-neutral-line);
  --sp-count-radius: var(--sp-radius-pill);       /* compteur (menu, onglets) : pilule */
  /* Filtres en pilule `.sp-pillf`. */
  --sp-pillf-on-bg: var(--sp-ink);
  --sp-pillf-on-fg: var(--sp-on-ink);

  /* Menu de gauche (navigation) et menu contextuel. */
  --sp-nav-bg: var(--sp-sidebar);
  --sp-nav-fg: var(--sp-sidebar-text);
  --sp-nav-hover: var(--sp-active);
  --sp-nav-active: var(--sp-active);
  --sp-nav-radius: var(--sp-radius-md);
  --sp-group-title-font: var(--sp-font-mono);     /* titre de groupe du menu (« Mes conversations ») */
  --sp-group-title-fg: var(--sp-text-soft);
  --sp-group-label-fg: var(--sp-text-soft);       /* sous-titre de date (« Aujourd'hui ») */
  --sp-pill: var(--sp-active);                 /* pastille de sélection qui glisse (MUI.navPill) */
  --sp-menu-bg: var(--sp-surface);
  --sp-menu-fg: var(--sp-text);
  --sp-menu-line: var(--sp-line);
  --sp-menu-hover: var(--sp-hover);
  --sp-menu-radius: var(--sp-radius-lg);
  --sp-menu-shadow: var(--sp-shadow-lift);
  --sp-menu-item-radius: var(--sp-radius-sm);      /* entrée d'un menu (3.13.4 : 10) */
  --sp-menu-value-fg: var(--sp-text-soft);         /* valeur courante d'une préférence (« Français ») */
  --sp-menu-danger-fg: var(--sp-danger);           /* « Se déconnecter » */

  /* Menu de gauche de la maquette (Core 3.14.4, mission M1, `03-conversations.html` en b-ivoire). */
  --sp-sb-org-fg: var(--sp-text-soft);             /* nom de l'entreprise sous le logo */
  --sp-newconv-bg: var(--sp-surface);              /* « Nouvelle conversation » : bouton blanc à filet */
  --sp-newconv-fg: var(--sp-text);
  --sp-newconv-line: var(--sp-line);
  --sp-newconv-hover: var(--sp-hover);
  --sp-newconv-radius: var(--sp-btn-radius);      /* en pilule, comme la recherche dessous (maquette 03, sauge ; N1, 23/10) */
  --sp-sb-search-bg: var(--sp-search-bg);          /* recherche du menu : loupe, champ, indice ⌘K */
  --sp-sb-search-line: var(--sp-search-line);
  --sp-sb-search-fg: var(--sp-text-soft);
  --sp-sb-search-radius: var(--sp-search-radius);
  --sp-kbd-bg: var(--sp-surface);                  /* indice de raccourci `⌘K` */
  --sp-kbd-fg: var(--sp-text-soft);
  --sp-kbd-line: var(--sp-line);
  --sp-kbd-radius: var(--sp-radius-xs);
  --sp-kbd-font: var(--sp-font-mono);
  --sp-nav-count-fg: var(--sp-text-soft);          /* compteur d'une entrée : un chiffre discret, à droite */
  --sp-nav-count-font: var(--sp-font-mono);
  --sp-tag-font: var(--sp-font-mono);              /* étiquette d'une ligne « À valider » */
  --sp-tag-fg: var(--sp-wait);                     /* « À valider » */
  --sp-tag-crit-fg: var(--sp-crit);                /* « Urgent » */
  --sp-live-fg: color-mix(in srgb, var(--sp-info) var(--sp-status-ink), var(--sp-text));  /* « ● en cours » */
  --sp-live-dot: var(--sp-info);
  --sp-account-hover: var(--sp-active);            /* le compte en bas du menu, survolé ou ouvert */

  /* Bandeau sombre (`.m-cta` d'Olympe : « 41 mails triés cette semaine »), filet de nuit. */
  --sp-banner-bg: var(--sp-t-banner);
  --sp-banner-fg: var(--sp-t-on-banner);
  --sp-banner-ring: var(--sp-t-banner-ring);

  /* Fenêtre (modale) et notification (toast). */
  --sp-dialog-bg: var(--sp-surface);
  --sp-dialog-line: var(--sp-line);
  --sp-dialog-radius: var(--sp-radius-xxl);
  --sp-dialog-shadow: var(--sp-shadow-lift);
  --sp-dialog-backdrop: var(--sp-backdrop);
  --sp-toast-bg: var(--sp-surface);
  --sp-toast-fg: var(--sp-text);
  --sp-toast-line: var(--sp-line);
  --sp-toast-radius: var(--sp-radius-xl);
  --sp-toast-shadow: var(--sp-shadow-lift);

  /* Palette de recherche (`MUI.palette`, ⌘K, mission N4) : une fenêtre comme les autres, des lignes
     comme celles du menu de gauche, la ligne choisie comme une ligne choisie. */
  --sp-pal-bg: var(--sp-dialog-bg);
  --sp-pal-line: var(--sp-dialog-line);
  --sp-pal-radius: var(--sp-dialog-radius);
  --sp-pal-shadow: var(--sp-dialog-shadow);
  --sp-pal-backdrop: var(--sp-dialog-backdrop);
  --sp-pal-item-radius: var(--sp-nav-radius);
  --sp-pal-item-on: var(--sp-row-selected-bg);
  --sp-pal-hl-bg: var(--sp-selection);
  --sp-pal-hl-radius: var(--sp-radius-xs);
  --sp-pal-group-fg: var(--sp-group-label-fg);

  /* Tableau et blocs du fil (tableau, agents, réflexion) : 18 px ; alerte : 24 px. */
  --sp-table-bg: var(--sp-surface);
  --sp-table-head-bg: var(--sp-bg);
  --sp-table-line: var(--sp-line);
  --sp-table-hover: var(--sp-hover);
  --sp-table-radius: var(--sp-t-radius-block);
  --sp-block-bg: var(--sp-surface);
  --sp-block-line: var(--sp-line);
  --sp-block-radius: var(--sp-t-radius-block);
  --sp-think-bg: var(--sp-surface);
  --sp-think-line: var(--sp-line);
  --sp-think-icon-bg: var(--sp-surface-soft);
  --sp-think-radius: var(--sp-t-radius-block);
  --sp-alert-bg: var(--sp-danger-bg);
  --sp-alert-line: var(--sp-danger-line);
  --sp-alert-radius: var(--sp-radius-xl);

  /* Bulle de la personne et réponse de l'agent. */
  --sp-bubble-bg: var(--sp-surface-soft);
  --sp-bubble-fg: var(--sp-text);
  --sp-bubble-line: var(--sp-bubble-bg);          /* maquette du 21/10 : bulle sans filet visible */
  --sp-bubble-radius: var(--sp-t-radius-bubble);
  --sp-bubble-shadow: var(--sp-shadow-none);      /* ni ombre */
  /* Bulle d'un collègue (conversation à plusieurs) : la même famille, alignée à gauche. */
  --sp-bubble-other-bg: var(--sp-surface-soft);
  --sp-bubble-other-fg: var(--sp-text);
  --sp-bubble-other-line: var(--sp-bubble-other-bg);

  /* Compositeur et bouton d'envoi. */
  --sp-composer-bg: var(--sp-surface);
  --sp-composer-line: var(--sp-line-strong);
  --sp-composer-radius: var(--sp-t-radius-composer);
  --sp-composer-shadow: var(--sp-shadow-lift);
  --sp-send-bg: var(--sp-primary);
  --sp-send-fg: var(--sp-on-primary);
  --sp-send-hover: var(--sp-primary-hover);
  --sp-send-radius: var(--sp-radius-pill);

  /* Carte de mail (brouillon dans le fil) : 20 px, corps 14 px. */
  --sp-mail-bg: var(--sp-surface);
  --sp-mail-head-bg: var(--sp-bg);
  --sp-mail-line: var(--sp-line);
  --sp-mail-radius: var(--sp-radius-lg);
  --sp-mail-shadow: var(--sp-shadow);
  --sp-mail-body-line: var(--sp-line-strong);
  --sp-mail-body-radius: var(--sp-radius-md);

  /* Fichier (pièce jointe, livrable) : 14 px. */
  --sp-file-bg: var(--sp-surface);
  --sp-file-line: var(--sp-line);
  --sp-file-radius: var(--sp-t-radius-file);
  --sp-file-icon-bg: var(--sp-surface-soft);
  --sp-file-icon-radius: var(--sp-radius-md);      /* 3.13.4 : 12 */

  /* Ligne ou boîte choisie dans une liste (Besoin de moi, Mails) : fond actif + marqueur. */
  --sp-row-selected-bg: var(--sp-active);
  --sp-row-selected-shadow: var(--sp-t-shadow-row-selected);
  --sp-box-selected-line: var(--sp-text);
  --sp-box-selected-shadow: var(--sp-t-shadow-box-selected);
  /* Point « en cours » d'un agent (agents en parallèle). */
  --sp-agent-dot-halo: var(--sp-t-shadow-halo);

  /* Page de connexion et /acces : la carte et ses champs (3.13.4 : 28 et 16 px). */
  --sp-auth-card-radius: var(--sp-radius-xxl);
  --sp-auth-field-radius: var(--sp-t-radius-field);

  /* Étiquette en capitales (en-tête de tableau, libellé de section) : chasse fixe, comme la maquette du 21/10. */
  --sp-label-font: var(--sp-font-mono);

  /* Titres : page, panneau des réglages, conversation dans l'en-tête. */
  --sp-title-font: var(--sp-font-heading);
  --sp-title-fg: var(--sp-text);

  /* Onglets. */
  --sp-tabs-line: var(--sp-line);
  --sp-tabs-fg: var(--sp-text-soft);
  --sp-tabs-active-fg: var(--sp-text);
  --sp-tabs-active-bg: var(--sp-surface);
  --sp-tabs-track: var(--sp-surface-soft);
  --sp-tabs-radius: var(--sp-radius-pill);

  /* Avatar. Le sable et l'encre : une personne qu'on ne connaît pas (ni id, ni adresse). Une personne connue
     prend sa couleur par `data-sp-person` (`elements.css`). */
  --sp-avatar-bg: color-mix(in srgb, var(--sp-t-sand) var(--sp-t-avatar-mix), transparent);
  --sp-avatar-fg: var(--sp-text);
  --sp-avatar-person-fg: var(--sp-on-person);
  --sp-avatar-radius: var(--sp-radius-round);        /* rond : décision D7 du 22/10/2026 */
  --sp-avatar-overlap: var(--sp-t-avatar-overlap);   /* pile d'avatars : toutes les initiales restent entières (N5) */
  --sp-avatar-stack-inset: var(--sp-t-avatar-stack-inset); /* retrait des initiales d'un avatar recouvert (N5) */

  /* Chargement (squelette). */
  --sp-skel-from: var(--sp-active);
  --sp-skel-to: var(--sp-sidebar);

  /* Visuels dans le chat (Core 3.15, mission V1) : la palette nommée de l'agent (`VISUELS-DANS-LE-CHAT.md` § 5).
     `--sv-c-<nom>` la teinte, `-soft` le fond doux, `-ink` l'encre lisible. Un composant ne lit jamais ces
     noms à la main : la classe `.sv-c-<nom>` (`visuels/visuels-noyau.css`) les recopie dans `--sv-hue`,
     `--sv-soft`, `--sv-ink`, et `ctx.color(nom)` les rend en `var()`. */
  --sv-c-sauge: var(--sp-t-vis-sauge);
  --sv-c-sauge-soft: var(--sp-t-vis-sauge-soft);
  --sv-c-sauge-ink: var(--sp-t-vis-sauge-ink);
  --sv-c-terracotta: var(--sp-t-vis-terracotta);
  --sv-c-terracotta-soft: var(--sp-t-vis-terracotta-soft);
  --sv-c-terracotta-ink: var(--sp-t-vis-terracotta-ink);
  --sv-c-ocre: var(--sp-t-vis-ocre);
  --sv-c-ocre-soft: var(--sp-t-vis-ocre-soft);
  --sv-c-ocre-ink: var(--sp-t-vis-ocre-ink);
  --sv-c-bleu: var(--sp-t-vis-bleu);
  --sv-c-bleu-soft: var(--sp-t-vis-bleu-soft);
  --sv-c-bleu-ink: var(--sp-t-vis-bleu-ink);
  --sv-c-sarcelle: var(--sp-t-vis-sarcelle);
  --sv-c-sarcelle-soft: var(--sp-t-vis-sarcelle-soft);
  --sv-c-sarcelle-ink: var(--sp-t-vis-sarcelle-ink);
  --sv-c-prune: var(--sp-t-vis-prune);
  --sv-c-prune-soft: var(--sp-t-vis-prune-soft);
  --sv-c-prune-ink: var(--sp-t-vis-prune-ink);
  --sv-c-rose: var(--sp-t-vis-rose);
  --sv-c-rose-soft: var(--sp-t-vis-rose-soft);
  --sv-c-rose-ink: var(--sp-t-vis-rose-ink);
  --sv-c-ardoise: var(--sp-t-vis-ardoise);
  --sv-c-ardoise-soft: var(--sp-t-vis-ardoise-soft);
  --sv-c-ardoise-ink: var(--sp-t-vis-ardoise-ink);
  --sv-c-success: var(--sp-t-vis-success);
  --sv-c-success-soft: var(--sp-t-vis-success-soft);
  --sv-c-success-ink: var(--sp-t-vis-success-ink);
  --sv-c-warning: var(--sp-t-vis-warning);
  --sv-c-warning-soft: var(--sp-t-vis-warning-soft);
  --sv-c-warning-ink: var(--sp-t-vis-warning-ink);
  --sv-c-danger: var(--sp-t-vis-danger);
  --sv-c-danger-soft: var(--sp-t-vis-danger-soft);
  --sv-c-danger-ink: var(--sp-t-vis-danger-ink);
  --sv-c-info: var(--sp-t-vis-info);
  --sv-c-info-soft: var(--sp-t-vis-info-soft);
  --sv-c-info-ink: var(--sp-t-vis-info-ink);
  --sv-c-neutral: var(--sp-t-vis-neutral);
  --sv-c-neutral-soft: var(--sp-t-vis-neutral-soft);
  --sv-c-neutral-ink: var(--sp-t-vis-neutral-ink);
  --sv-c-accent: var(--sp-t-vis-accent);
  --sv-c-accent-soft: var(--sp-t-vis-accent-soft);
  --sv-c-accent-ink: var(--sp-t-vis-accent-ink);
  /* Visuels : le cadre commun. Deux visuels voisins (carte, chiffre, tableau, graphique, carte géographique,
     formulaire, vue vivante) ont le MÊME rayon : celui des blocs du fil (18 px), lu par tous les modules. */
  --sv-radius: var(--sp-block-radius);
  --sv-radius-inner: var(--sp-radius-sm);        /* élément dans un visuel : carré d'icône, vignette, champ */
  --sv-radius-pill: var(--sp-radius-pill);       /* pastille, bouton, onglet, recherche */
  --sv-radius-round: var(--sp-radius-round);     /* avatar, point, anneau */
  --sv-bg: var(--sp-surface);
  --sv-line: var(--sp-line);
  --sv-shadow: var(--sp-shadow-none);            /* un visuel du fil est à plat, comme les blocs du fil */
  --sv-shadow-hover: var(--sp-shadow);           /* … et se soulève à peine au survol d'une carte */
  --sv-font-title: var(--sp-font-heading);
  --sv-font-label: var(--sp-font-mono);
}