/*
 * CHARTE PIM — la source des couleurs, espacements et polices de l'application. Maintenue à la main.
 * Règles d'usage, corrections et recettes : design/CHARTE.md. Règles d'écriture du CSS : .claude/rules/ui.md.
 *
 * Origine : dernier export de la charte Figma « DS PIM » de Guillaume (publiée le 22/10/2026, exportée le
 * 23/10/2026), gelée ce jour-là — Figma n'est plus la source. Les primitives Color/Blaze_Orange, qui venaient
 * d'une autre bibliothèque Figma, y sont résolues en valeur (design/reference/ds-pim-blaze-orange.json).
 *
 * Nommage : nom d'usage en minuscules, « / » et « _ » remplacés par « - », préfixe --ds-. Une règle de style
 * lit un jeton d'USAGE (--ds-button-primary-hover-bg), jamais une primitive (--ds-color-jungle-green-110).
 * Un jeton qui manque s'ajoute dans la section « Compléments », en fin de fichier.
 */

:root {
    /* ── Primary tokens ── */
    --ds-color-alpha-jungle-10-50: #f0f9f580;
    --ds-color-alpha-white-100-05: #fffefd0d;
    --ds-color-alpha-white-100-10: #fffefd1a;
    --ds-color-blaze-orange-10: #fff2eb;
    --ds-color-blaze-orange-20: #ffe4d6;
    --ds-color-blaze-orange-30: #ffc9ad;
    --ds-color-blaze-orange-100: #b94100; /* 23/10/2026 lisibilité : #ff5a00 donnait 2,6:1 sur les fonds orange */
    --ds-color-blaze-orange-110: #e05200;
    --ds-color-blue-10: #ebf8fe;
    --ds-color-blue-20: #d8f1fd;
    --ds-color-blue-100: #005bc2;
    --ds-color-blue-night-10: #ebe9ff;
    --ds-color-blue-night-20: #cec5ff;
    --ds-color-blue-night-100: #030a8f;
    --ds-color-charcoal-05: #fcfcfc;
    --ds-color-charcoal-10: #f9f9f9;
    --ds-color-charcoal-20: #f3f3f3;
    --ds-color-charcoal-30: #ebebea;
    --ds-color-charcoal-40: #e1e1e0;
    --ds-color-charcoal-50: #d7d7d5;
    --ds-color-charcoal-60: #cdcdcb;
    --ds-color-charcoal-70: #b9b9b6;
    --ds-color-charcoal-80: #91918d;
    --ds-color-charcoal-90: #686864;
    --ds-color-charcoal-100: #535350;
    --ds-color-cyan-10: #e9faf9;
    --ds-color-cyan-20: #c7e9e7;
    --ds-color-cyan-100: #007582;
    --ds-color-green-10: #ecfcea;
    --ds-color-green-20: #dffadb;
    --ds-color-green-100: #08651e;
    --ds-color-jungle-green-10: #f0f9f5;
    --ds-color-jungle-green-20: #dbf3e4;
    --ds-color-jungle-green-30: #c1e6d4;
    --ds-color-jungle-green-40: #a6debd;
    --ds-color-jungle-green-50: #88d3b0;
    --ds-color-jungle-green-60: #6ac89c;
    --ds-color-jungle-green-70: #4cbd84;
    --ds-color-jungle-green-80: #40a97f;
    --ds-color-jungle-green-90: #369171;
    --ds-color-jungle-green-100: #018570; /* 23/10/2026 lisibilité : #018973 donnait 4,32:1 au texte blanc */
    --ds-color-jungle-green-110: #007462;
    --ds-color-lime-green-10: #f1fbe4;
    --ds-color-lime-green-20: #dff3d4;
    --ds-color-lime-green-30: #d4f8c1;
    --ds-color-lime-green-40: #c1f9a3;
    --ds-color-lime-green-50: #b1e69b;
    --ds-color-lime-green-60: #8ed493;
    --ds-color-metalic-grey-10: #eae8ee;
    --ds-color-metalic-grey-20: #dfdce5;
    --ds-color-metalic-grey-30: #c9c4d4;
    --ds-color-metalic-grey-40: #b4adc2;
    --ds-color-metalic-grey-50: #a9a1ba;
    --ds-color-metalic-grey-60: #9e95b1;
    --ds-color-metalic-grey-70: #938aa8;
    --ds-color-metalic-grey-80: #887ea0;
    --ds-color-metalic-grey-90: #7d7297;
    --ds-color-metalic-grey-100: #73688d;
    --ds-color-metalic-grey-110: #695f81;
    --ds-color-neutral-teal: #164147;
    --ds-color-neutral-white: #fffefd;
    --ds-color-pink-10: #ffe4f2;
    --ds-color-pink-20: #ffa8d5;
    --ds-color-pink-100: #c90387;
    --ds-color-red-10: #fceaea;
    --ds-color-red-20: #fadbdb;
    --ds-color-red-100: #be1010;
    --ds-color-violet-10: #ffe6ff;
    --ds-color-violet-20: #e7a1e9;
    --ds-color-violet-100: #95009c;
    --ds-color-yellow-10: #fffadf;
    --ds-color-yellow-20: #fef4c3;
    --ds-color-yellow-100: #986300;
    --ds-font-family-ui: "Manrope";
    --ds-font-size-9: 9px;
    --ds-font-size-10: 10px;
    --ds-font-size-11: 11px;
    --ds-font-size-12: 12px;
    --ds-font-size-14: 14px;
    --ds-font-size-16: 16px;
    --ds-font-weight-light: 300;
    --ds-font-weight-medium: 500;
    --ds-font-weight-regular: 400;
    --ds-font-weight-semibold: 600;
    --ds-spacing-0: 0px;
    --ds-spacing-2: 2px;
    --ds-spacing-3: 3px;
    --ds-spacing-4: 4px;
    --ds-spacing-5: 5px;
    --ds-spacing-6: 6px;
    --ds-spacing-7: 7px;
    --ds-spacing-8: 8px;
    --ds-spacing-9-5: 9.5px;
    --ds-spacing-10: 10px;
    --ds-spacing-12: 12px;
    --ds-spacing-15: 15px;
    --ds-spacing-16: 16px;
    --ds-spacing-20: 20px;
    --ds-spacing-24: 24px;
    --ds-spacing-30: 30px;
    --ds-spacing-40: 40px;
    --ds-spacing-50: 50px;
    --ds-spacing-60: 60px;
    --ds-spacing-70: 70px;
    --ds-spacing-80: 80px;
    --ds-spacing-90: 90px;

    /* ── Secondary tokens ── */
    --ds-ariane-card-content-gap-default: var(--ds-spacing-2);
    --ds-ariane-card-content-padding-x-default: var(--ds-spacing-6);
    --ds-ariane-card-content-padding-y-default: var(--ds-spacing-3);
    --ds-button-content-gap-md: var(--ds-spacing-4);
    --ds-button-content-gap-sm: var(--ds-spacing-4);
    --ds-button-content-padding-y-md: var(--ds-spacing-7);
    --ds-button-primary-disabled-bg: var(--ds-color-jungle-green-20);
    --ds-button-primary-disabled-content: var(--ds-color-jungle-green-50);
    --ds-button-primary-enable-bg: var(--ds-color-jungle-green-100);
    --ds-button-primary-enable-content: var(--ds-color-neutral-white);
    --ds-button-primary-hover-bg: var(--ds-color-jungle-green-110);
    --ds-button-primary-hover-content: var(--ds-color-neutral-white);
    --ds-button-primary-pressed-bg: var(--ds-color-jungle-green-20);
    --ds-button-primary-pressed-content: var(--ds-color-neutral-teal);
    --ds-button-secondary-disabled-bg: var(--ds-color-jungle-green-20);
    --ds-button-secondary-disabled-content: var(--ds-color-jungle-green-50);
    --ds-button-secondary-enable-bg: var(--ds-color-jungle-green-20);
    --ds-button-secondary-enable-border: var(--ds-color-jungle-green-30);
    --ds-button-secondary-enable-content: var(--ds-color-neutral-teal);
    --ds-button-secondary-hover-bg: var(--ds-color-jungle-green-100);
    --ds-button-secondary-hover-content: var(--ds-color-neutral-white);
    --ds-button-secondary-pressed-bg: var(--ds-color-jungle-green-30); /* 23/10 : Figma -20 = le repos, enfoncé indiscernable */
    --ds-button-secondary-pressed-content: var(--ds-color-neutral-teal);
    --ds-button-tertiary-disabled-bg: var(--ds-color-metalic-grey-20);
    --ds-button-tertiary-disabled-content: var(--ds-color-metalic-grey-40);
    --ds-button-tertiary-enable-bg: var(--ds-color-metalic-grey-10);
    --ds-button-tertiary-enable-border: var(--ds-color-metalic-grey-20);
    --ds-button-tertiary-enable-content: var(--ds-color-neutral-teal);
    --ds-button-tertiary-hover-bg: var(--ds-color-metalic-grey-110);
    --ds-button-tertiary-hover-content: var(--ds-color-neutral-white);
    --ds-button-tertiary-pressed-bg: var(--ds-color-metalic-grey-10);
    --ds-button-tertiary-pressed-content: var(--ds-color-neutral-teal);
    --ds-button-text-box-padding-x-md: var(--ds-spacing-2);
    --ds-button-text-box-padding-x-sm: var(--ds-spacing-2);
    --ds-card-bg: var(--ds-color-jungle-green-20);
    --ds-card-border: var(--ds-color-jungle-green-30);
    --ds-card-content: var(--ds-color-neutral-teal);
    --ds-card-content-wrapper-padding-x-compact: var(--ds-spacing-15);
    --ds-card-content-wrapper-padding-x-standard: var(--ds-spacing-20);
    --ds-card-content-wrapper-padding-y-compact: var(--ds-spacing-8);
    --ds-card-content-wrapper-padding-y-standard: var(--ds-spacing-15);
    --ds-checkbox-active-on-dark-bg: var(--ds-color-jungle-green-10);
    --ds-checkbox-active-on-dark-border: var(--ds-color-jungle-green-20);
    --ds-checkbox-active-on-dark-content: var(--ds-color-jungle-green-100);
    --ds-checkbox-active-on-light-bg: var(--ds-color-jungle-green-100);
    --ds-checkbox-active-on-light-content: var(--ds-color-neutral-white);
    --ds-checkbox-content-padding-x-compact: var(--ds-spacing-2);
    --ds-checkbox-content-padding-x-standard: var(--ds-spacing-2);
    --ds-checkbox-content-padding-y-compact: var(--ds-spacing-2);
    --ds-checkbox-content-padding-y-standard: var(--ds-spacing-2);
    --ds-checkbox-disabled-bg: var(--ds-color-jungle-green-20);
    --ds-checkbox-disabled-border: var(--ds-color-jungle-green-30);
    --ds-checkbox-disabled-content: var(--ds-color-jungle-green-40);
    --ds-checkbox-enable-border: var(--ds-color-jungle-green-100);
    --ds-checkbox-hover-bg: var(--ds-color-jungle-green-20);
    --ds-checkbox-hover-border: var(--ds-color-jungle-green-100);
    --ds-empty-research-content-gap-default: var(--ds-spacing-5);
    --ds-empty-research-content-padding-y-default: var(--ds-spacing-40);
    --ds-family-filter-button-content-padding-x-default: var(--ds-spacing-8);
    --ds-family-filter-button-content-padding-y-default: var(--ds-spacing-8);
    --ds-family-filter-line-content-padding-left-default: var(--ds-spacing-10);
    --ds-family-number-content-padding-x-default: var(--ds-spacing-6);
    --ds-family-number-content-padding-y-default: var(--ds-spacing-5);
    --ds-family-filter-button-hover-bg: var(--ds-color-charcoal-10);
    --ds-family-filter-button-pressed-bg: var(--ds-color-charcoal-20);
    --ds-family-filter-icon-active-bg: var(--ds-color-jungle-green-60);
    --ds-family-filter-icon-active-border: var(--ds-color-jungle-green-70);
    --ds-family-filter-icon-enable-bg: var(--ds-color-jungle-green-50);
    --ds-family-filter-icon-enable-border: var(--ds-color-jungle-green-60);
    --ds-family-filter-line-active-bg: var(--ds-color-jungle-green-20);
    --ds-family-filter-line-enable-bg: var(--ds-color-charcoal-10);
    --ds-family-filter-line-hover-bg: var(--ds-color-charcoal-20);
    --ds-family-filter-line-pressed-bg: var(--ds-color-jungle-green-30);
    --ds-fil-d-ariane-content-gap-default: var(--ds-spacing-10);
    --ds-fil-d-ariane-content-wrapper-gap-default: var(--ds-spacing-2);
    --ds-grid-color-item-blue-bg: var(--ds-color-blue-10);
    --ds-grid-color-item-blue-content: var(--ds-color-blue-100);
    --ds-grid-color-item-blue-night-bg: var(--ds-color-blue-night-10);
    --ds-grid-color-item-blue-night-content: var(--ds-color-blue-night-100);
    --ds-grid-color-item-charcoal-bg: var(--ds-color-charcoal-20);
    --ds-grid-color-item-charcoal-content: var(--ds-color-charcoal-90);
    --ds-grid-color-item-cyan-bg: var(--ds-color-cyan-10);
    --ds-grid-color-item-cyan-content: var(--ds-color-cyan-100);
    --ds-grid-color-item-green-bg: var(--ds-color-green-10);
    --ds-grid-color-item-green-content: var(--ds-color-green-100);
    --ds-grid-color-item-orange-bg: var(--ds-color-blaze-orange-10);
    --ds-grid-color-item-orange-content: var(--ds-color-blaze-orange-100);
    --ds-grid-color-item-pink-bg: var(--ds-color-pink-10);
    --ds-grid-color-item-pink-content: var(--ds-color-pink-100);
    --ds-grid-color-item-red-bg: var(--ds-color-red-10);
    --ds-grid-color-item-red-content: var(--ds-color-red-100);
    --ds-grid-color-item-violet-bg: var(--ds-color-pink-10);
    --ds-grid-color-item-violet-content: var(--ds-color-violet-100);
    --ds-grid-color-item-yellow-bg: var(--ds-color-yellow-10);
    --ds-grid-color-item-yellow-content: var(--ds-color-yellow-100);
    --ds-grid-filter-item-active-bg: var(--ds-color-charcoal-20);
    --ds-grid-filter-item-active-content: var(--ds-color-neutral-teal);
    --ds-grid-filter-item-enable-bg: var(--ds-color-charcoal-10);
    --ds-grid-filter-item-enable-content: var(--ds-color-neutral-teal);
    --ds-grid-filter-item-hover-bg: var(--ds-color-charcoal-20);
    --ds-grid-filter-item-hover-content: var(--ds-color-neutral-teal);
    --ds-grid-filter-item-pressed-bg: var(--ds-color-charcoal-30);
    --ds-grid-filter-item-pressed-content: var(--ds-color-neutral-teal);
    --ds-grid-filter-research-active-bg: var(--ds-color-charcoal-10);
    --ds-grid-filter-research-active-border: var(--ds-color-charcoal-40);
    --ds-grid-filter-research-active-content: var(--ds-color-neutral-teal);
    --ds-grid-filter-research-enable-border: var(--ds-color-charcoal-30);
    --ds-grid-filter-research-enable-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-grid-filter-research-hover-bg: var(--ds-color-charcoal-10);
    --ds-grid-filter-research-hover-border: var(--ds-color-charcoal-40);
    --ds-grid-filter-research-hover-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-grid-footer-item-bg: var(--ds-color-lime-green-10);
    --ds-grid-footer-item-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-blue-active-bg: var(--ds-color-charcoal-10);
    --ds-grid-hierarchy-item-blue-active-border: var(--ds-color-jungle-green-100);
    --ds-grid-hierarchy-item-blue-active-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-blue-enable-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-blue-hover-bg: var(--ds-color-lime-green-20);
    --ds-grid-hierarchy-item-blue-hover-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-blue-pressed-bg: var(--ds-color-lime-green-30);
    --ds-grid-hierarchy-item-blue-pressed-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-blue-read-only-content: var(--ds-color-charcoal-100); /* lisibilité 23/10, était -70 */
    --ds-grid-hierarchy-item-cyan-active-bg: var(--ds-color-charcoal-10);
    --ds-grid-hierarchy-item-cyan-active-border: var(--ds-color-jungle-green-100);
    --ds-grid-hierarchy-item-cyan-active-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-cyan-enable-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-cyan-hover-bg: var(--ds-color-lime-green-20);
    --ds-grid-hierarchy-item-cyan-hover-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-cyan-pressed-bg: var(--ds-color-lime-green-30);
    --ds-grid-hierarchy-item-cyan-pressed-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-cyan-read-only-content: var(--ds-color-charcoal-100); /* lisibilité 23/10, était -70 */
    --ds-grid-hierarchy-item-orange-active-bg: var(--ds-color-charcoal-10);
    --ds-grid-hierarchy-item-orange-active-border: var(--ds-color-jungle-green-100);
    --ds-grid-hierarchy-item-orange-active-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-orange-enable-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-orange-hover-bg: var(--ds-color-lime-green-20);
    --ds-grid-hierarchy-item-orange-hover-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-orange-pressed-bg: var(--ds-color-lime-green-30);
    --ds-grid-hierarchy-item-orange-pressed-content: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-item-orange-read-only-content: var(--ds-color-charcoal-100); /* lisibilité 23/10, était -70 */
    --ds-grid-hierarchy-lvl-lvl-1: var(--ds-color-blaze-orange-110);
    --ds-grid-hierarchy-lvl-lvl-2: var(--ds-color-blue-100);
    --ds-grid-hierarchy-lvl-lvl-3: var(--ds-color-cyan-100);
    --ds-grid-hierarchy-title-lvl-1: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-title-lvl-2: var(--ds-color-neutral-teal);
    --ds-grid-hierarchy-title-lvl-3: var(--ds-color-neutral-teal);
    --ds-grid-line-item-active-bg: var(--ds-color-charcoal-10);
    --ds-grid-line-item-active-border: var(--ds-color-jungle-green-100);
    --ds-grid-line-item-active-content: var(--ds-color-neutral-teal);
    --ds-grid-line-item-enable-content: var(--ds-color-neutral-teal);
    --ds-grid-line-item-hover-bg: var(--ds-color-jungle-green-20);
    --ds-grid-line-item-hover-content: var(--ds-color-neutral-teal);
    --ds-grid-line-item-pressed-bg: var(--ds-color-jungle-green-30);
    --ds-grid-line-item-pressed-content: var(--ds-color-neutral-teal);
    --ds-grid-line-item-read-only-content: var(--ds-color-charcoal-100); /* lisibilité 23/10, était -80 */
    /* Ligne sélectionnée claire (23/10, design/CHARTE.md § 5.3) : Figma la peignait jungle-green-100, texte blanc. */
    --ds-grid-table-line-active-bg: var(--ds-color-jungle-green-20);
    --ds-grid-table-line-active-content: var(--ds-color-neutral-teal);
    --ds-grid-table-line-enable-impair-bg: var(--ds-color-charcoal-10);
    --ds-grid-table-line-enable-pair-bg: var(--ds-color-neutral-white);
    --ds-grid-table-line-hover-bg: var(--ds-color-jungle-green-20);
    --ds-grid-cell-content-padding-x-compact: var(--ds-spacing-6);
    --ds-grid-cell-content-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-cell-content-padding-y-compact: var(--ds-spacing-3);
    --ds-grid-cell-content-padding-y-standard: var(--ds-spacing-8);
    --ds-grid-cell-content-wrapper-gap-compact: var(--ds-spacing-10);
    --ds-grid-cell-content-wrapper-gap-standard: var(--ds-spacing-10);
    --ds-grid-cell-content-wrapper-padding-x-compact: var(--ds-spacing-6);
    --ds-grid-cell-content-wrapper-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-cell-content-wrapper-padding-y-compact: var(--ds-spacing-3);
    --ds-grid-cell-content-wrapper-padding-y-standard: var(--ds-spacing-8);
    --ds-grid-filter-content-padding-x-compact: var(--ds-spacing-6);
    --ds-grid-filter-content-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-filter-item-content-gap-compact: var(--ds-spacing-2);
    --ds-grid-filter-item-content-gap-standard: var(--ds-spacing-2);
    --ds-grid-filter-item-content-padding-x-compact: var(--ds-spacing-6);
    --ds-grid-filter-item-content-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-filter-item-content-padding-y-compact: var(--ds-spacing-3);
    --ds-grid-filter-item-content-padding-y-standard: var(--ds-spacing-10);
    --ds-grid-filter-item-content-wrapper-gap-compact: var(--ds-spacing-5);
    --ds-grid-filter-item-content-wrapper-gap-standard: var(--ds-spacing-5);
    --ds-grid-filter-research-content-gap-compact: var(--ds-spacing-5);
    --ds-grid-filter-research-content-gap-standard: var(--ds-spacing-5);
    --ds-grid-filter-research-content-padding-x-compact: var(--ds-spacing-6);
    --ds-grid-filter-research-content-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-filter-research-content-padding-y-compact: var(--ds-spacing-3);
    --ds-grid-filter-research-content-padding-y-standard: var(--ds-spacing-10);
    --ds-grid-line-content-gap-compact: var(--ds-spacing-16);
    --ds-grid-line-content-gap-standard: var(--ds-spacing-16);
    --ds-grid-line-content-padding-x-compact: var(--ds-spacing-6);
    --ds-grid-line-content-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-line-content-wrapper-gap-compact: var(--ds-spacing-10);
    --ds-grid-line-content-wrapper-gap-standard: var(--ds-spacing-10);
    --ds-grid-line-content-wrapper-padding-x-compact: var(--ds-spacing-10);
    --ds-grid-line-content-wrapper-padding-x-standard: var(--ds-spacing-10);
    --ds-grid-line-color-item-checkbox-padding-x-default: var(--ds-spacing-2);
    --ds-grid-line-color-item-checkbox-padding-y-default: var(--ds-spacing-2);
    --ds-grid-line-color-item-content-padding-bottom-default: var(--ds-spacing-2);
    --ds-grid-line-color-item-content-padding-top-default: var(--ds-spacing-3);
    --ds-grid-line-color-item-content-padding-y-default: var(--ds-spacing-8);
    --ds-header-page-date: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -70 */
    --ds-header-page-icon: var(--ds-color-neutral-teal);
    --ds-header-page-text: var(--ds-color-charcoal-90);
    --ds-header-page-title: var(--ds-color-jungle-green-110);
    --ds-input-content-gap-compact: var(--ds-spacing-5);
    --ds-input-content-gap-standard: var(--ds-spacing-5);
    --ds-input-content-padding-x-compact: var(--ds-spacing-6);
    --ds-input-content-padding-x-standard: var(--ds-spacing-10);
    --ds-input-content-padding-y-compact: var(--ds-spacing-3);
    --ds-input-content-padding-y-standard: var(--ds-spacing-8);
    --ds-input-content-wrapper-gap-compact: var(--ds-spacing-10);
    --ds-input-content-wrapper-gap-standard: var(--ds-spacing-10);
    --ds-input-disabled-filled-bg: var(--ds-color-charcoal-30);
    --ds-input-disabled-filled-content: var(--ds-color-charcoal-80);
    --ds-input-disabled-unfilled-bg: var(--ds-color-charcoal-30);
    --ds-input-disabled-unfilled-content: var(--ds-color-charcoal-70);
    --ds-input-dropdown-padding-x-compact: var(--ds-spacing-6);
    --ds-input-dropdown-padding-x-standard: var(--ds-spacing-10);
    --ds-input-dropdown-padding-y-compact: var(--ds-spacing-3);
    --ds-input-dropdown-padding-y-standard: var(--ds-spacing-8);
    --ds-input-enable-filled-bg: var(--ds-color-charcoal-10);
    --ds-input-enable-filled-border: var(--ds-color-charcoal-30);
    --ds-input-enable-filled-content: var(--ds-color-neutral-teal);
    --ds-input-enable-unfilled-bg: var(--ds-color-charcoal-10);
    --ds-input-enable-unfilled-border: var(--ds-color-charcoal-30);
    --ds-input-enable-unfilled-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-input-focus-filled-bg: var(--ds-color-charcoal-10);
    --ds-input-focus-filled-border: var(--ds-color-jungle-green-100);
    --ds-input-focus-filled-content: var(--ds-color-neutral-teal);
    --ds-input-focus-unfilled-bg: var(--ds-color-charcoal-10);
    --ds-input-focus-unfilled-border: var(--ds-color-jungle-green-100);
    --ds-input-focus-unfilled-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-input-hover-filled-bg: var(--ds-color-charcoal-20);
    --ds-input-hover-filled-border: var(--ds-color-charcoal-40);
    --ds-input-hover-filled-content: var(--ds-color-neutral-teal);
    --ds-input-hover-unfilled-bg: var(--ds-color-charcoal-20);
    --ds-input-hover-unfilled-border: var(--ds-color-charcoal-40);
    --ds-input-hover-unfilled-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-input-read-only-filled-bg: var(--ds-color-charcoal-10);
    --ds-input-read-only-filled-border: var(--ds-color-charcoal-30);
    --ds-input-read-only-filled-content: var(--ds-color-charcoal-100); /* lisibilité 23/10, était -70 */
    --ds-input-read-only-unfilled-bg: var(--ds-color-charcoal-10);
    --ds-input-read-only-unfilled-border: var(--ds-color-charcoal-30);
    --ds-input-read-only-unfilled-content: var(--ds-color-charcoal-100); /* lisibilité 23/10, était -70 */
    --ds-input-item-content-gap-compact: var(--ds-spacing-10);
    --ds-input-item-content-gap-standard: var(--ds-spacing-10);
    --ds-input-item-content-padding-x-compact: var(--ds-spacing-6);
    --ds-input-item-content-padding-x-standard: var(--ds-spacing-10);
    --ds-input-item-content-padding-y-compact: var(--ds-spacing-3);
    --ds-input-item-content-padding-y-standard: var(--ds-spacing-8);
    --ds-input-list-content-padding-x-default: var(--ds-spacing-5);
    --ds-input-list-content-padding-y-default: var(--ds-spacing-5);
    --ds-input-item-active-bg: var(--ds-color-jungle-green-20);
    --ds-input-item-active-content: var(--ds-color-neutral-teal);
    --ds-input-item-disabled-bg: var(--ds-color-charcoal-20);
    --ds-input-item-disabled-content: var(--ds-color-charcoal-60);
    --ds-input-item-enable-bg: var(--ds-color-charcoal-10);
    --ds-input-item-enable-content: var(--ds-color-neutral-teal);
    --ds-input-item-hover-bg: var(--ds-color-charcoal-20);
    --ds-input-item-hover-content: var(--ds-color-neutral-teal);
    --ds-input-item-pressed-bg: var(--ds-color-charcoal-20);
    --ds-input-item-pressed-content: var(--ds-color-neutral-teal);
    --ds-modal-bg: var(--ds-color-charcoal-10);
    --ds-modal-border: var(--ds-color-charcoal-30);
    --ds-modal-content: var(--ds-color-neutral-teal);
    --ds-modal-content-wrapper-gap-l: var(--ds-spacing-10);
    --ds-modal-content-wrapper-gap-m: var(--ds-spacing-10);
    --ds-modal-content-wrapper-gap-s: var(--ds-spacing-10);
    --ds-nav-ribbon-active-border: var(--ds-color-jungle-green-100);
    --ds-nav-ribbon-active-content: var(--ds-color-neutral-teal);
    --ds-nav-ribbon-enable-border: var(--ds-color-jungle-green-20);
    --ds-nav-ribbon-enable-content: var(--ds-color-neutral-teal);
    --ds-nav-ribbon-hover-bg: var(--ds-color-jungle-green-10);
    --ds-nav-ribbon-hover-content: var(--ds-color-neutral-teal);
    --ds-nav-ribbon-pressed-bg: var(--ds-color-jungle-green-20);
    --ds-nav-ribbon-pressed-content: var(--ds-color-neutral-teal);
    --ds-page-number-content-gap-compact: var(--ds-spacing-2);
    --ds-page-number-content-gap-standard: var(--ds-spacing-2);
    --ds-page-number-content-padding-x-compact: var(--ds-spacing-3);
    --ds-page-number-content-padding-x-standard: var(--ds-spacing-3);
    --ds-page-number-content-padding-y-compact: var(--ds-spacing-3);
    --ds-page-number-content-padding-y-standard: var(--ds-spacing-3);
    --ds-page-number-icon-button-group-gap-compact: var(--ds-spacing-2);
    --ds-page-number-icon-button-group-gap-standard: var(--ds-spacing-2);
    --ds-page-number-active: var(--ds-color-jungle-green-100);
    --ds-page-number-enable: var(--ds-color-neutral-white);
    --ds-page-number-hover: var(--ds-color-jungle-green-20);
    --ds-page-number-pressed: var(--ds-color-jungle-green-30);
    --ds-pager-content-padding-x-default: var(--ds-spacing-5);
    --ds-pager-content-padding-y-default: var(--ds-spacing-5);
    --ds-pim-sidebar-item-content-gap-open: var(--ds-spacing-5);
    --ds-pim-sidebar-item-content-padding-right-open: var(--ds-spacing-10);
    --ds-pim-sidebar-item-content-padding-x-collapsed: var(--ds-spacing-10);
    --ds-pim-sidebar-item-content-padding-x-open: var(--ds-spacing-10);
    --ds-pim-sidebar-item-content-padding-y-collapsed: var(--ds-spacing-8);
    --ds-pim-sidebar-item-content-padding-y-open: var(--ds-spacing-8);
    --ds-pim-sidebardark-content-gap-default: var(--ds-spacing-24);
    --ds-pim-sidebardark-content-padding-y-default: var(--ds-spacing-20);
    --ds-pim-sidebardark-slot-gap-default: var(--ds-spacing-8);
    --ds-placeholder-active-bg: var(--ds-color-charcoal-10);
    --ds-placeholder-active-border: var(--ds-color-jungle-green-100);
    --ds-placeholder-active-content: var(--ds-color-neutral-teal);
    --ds-placeholder-enable-bg: var(--ds-color-charcoal-10);
    --ds-placeholder-enable-border: var(--ds-color-charcoal-30);
    --ds-placeholder-enable-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-placeholder-hover-bg: var(--ds-color-charcoal-20);
    --ds-placeholder-hover-border: var(--ds-color-charcoal-40);
    --ds-placeholder-hover-content: var(--ds-color-charcoal-90); /* lisibilité 23/10, était -80 */
    --ds-radio-button-active-bg: var(--ds-color-jungle-green-100);
    --ds-radio-button-disabled-bg: var(--ds-color-jungle-green-20);
    --ds-radio-button-disabled-border: var(--ds-color-jungle-green-30);
    --ds-radio-button-disabled-content: var(--ds-color-charcoal-70);
    --ds-radio-button-enable-border: var(--ds-color-jungle-green-100);
    --ds-radio-button-hover-bg: var(--ds-color-jungle-green-20);
    --ds-radio-button-hover-border: var(--ds-color-jungle-green-100);
    --ds-radio-button-read-only-bg: var(--ds-color-jungle-green-20);
    --ds-radio-button-read-only-border: var(--ds-color-jungle-green-30);
    --ds-radio-button-read-only-content: var(--ds-color-neutral-teal);
    --ds-ribbon-item-content-gap-compact: var(--ds-spacing-4);
    --ds-ribbon-item-content-gap-standard: var(--ds-spacing-7);
    --ds-ribbon-item-content-padding-top-compact: var(--ds-spacing-4);
    --ds-ribbon-item-content-padding-top-standard: var(--ds-spacing-7);
    --ds-ribbon-item-content-padding-x-compact: var(--ds-spacing-4);
    --ds-ribbon-item-content-padding-x-standard: var(--ds-spacing-7);
    --ds-ribbon-item-content-box-gap-compact: var(--ds-spacing-5);
    --ds-ribbon-item-content-box-gap-standard: var(--ds-spacing-5);
    --ds-ribbon-item-content-box-padding-y-compact: var(--ds-spacing-2);
    --ds-ribbon-item-content-box-padding-y-standard: var(--ds-spacing-2);
    --ds-ribbon-item-selection-indicator-padding-x-compact: var(--ds-spacing-8);
    --ds-ribbon-item-selection-indicator-padding-x-standard: var(--ds-spacing-8);
    --ds-ribbon-item-text-box-gap-compact: var(--ds-spacing-5);
    --ds-ribbon-item-text-box-gap-standard: var(--ds-spacing-5);
    --ds-ribbon-item-text-box-padding-x-compact: var(--ds-spacing-3);
    --ds-ribbon-item-text-box-padding-x-standard: var(--ds-spacing-3);
    --ds-search-bar-content-wrapper-padding-x-md: var(--ds-spacing-10);
    --ds-search-bar-content-wrapper-padding-x-sm: var(--ds-spacing-6);
    --ds-search-bar-content-wrapper-padding-y-md: var(--ds-spacing-7);
    --ds-search-bar-content-wrapper-padding-y-sm: var(--ds-spacing-3);
    --ds-search-bar-search-button-padding-x-md: var(--ds-spacing-9-5);
    --ds-search-bar-search-button-padding-x-sm: var(--ds-spacing-5);
    --ds-search-bar-search-button-padding-y-md: var(--ds-spacing-9-5);
    --ds-sidebar-bg: var(--ds-color-neutral-teal);
    --ds-sidebar-page-active-bg: var(--ds-color-lime-green-30);
    --ds-sidebar-page-active-content: var(--ds-color-neutral-teal);
    --ds-sidebar-page-enable-content: var(--ds-color-jungle-green-10);
    --ds-sidebar-page-hover-bg: var(--ds-color-lime-green-20);
    --ds-sidebar-page-hover-content: var(--ds-color-neutral-teal);
    --ds-sidebar-page-pressed-bg: var(--ds-color-jungle-green-110);
    --ds-sidebar-page-pressed-content: var(--ds-color-neutral-white);
    --ds-sidebar-brand-content-gap-default: var(--ds-spacing-8);
    --ds-sidebar-placeholder-content-wrapper-gap-default: var(--ds-spacing-10);
    --ds-sidebar-placeholder-content-wrapper-padding-x-default: var(--ds-spacing-10);
    --ds-tag-color-content-padding-x-compact: var(--ds-spacing-6);
    --ds-tag-color-content-padding-x-standard: var(--ds-spacing-8);
    --ds-tag-color-content-padding-y-compact: var(--ds-spacing-3);
    --ds-tag-color-content-padding-y-standard: var(--ds-spacing-4);
    --ds-tags-blue-bg: var(--ds-color-blue-10);
    --ds-tags-blue-border: var(--ds-color-blue-20);
    --ds-tags-blue-content: var(--ds-color-blue-100);
    --ds-tags-blue-night-bg: var(--ds-color-blue-night-10);
    --ds-tags-blue-night-border: var(--ds-color-blue-night-20);
    --ds-tags-blue-night-content: var(--ds-color-blue-night-100);
    --ds-tags-cyan-bg: var(--ds-color-cyan-10);
    --ds-tags-cyan-border: var(--ds-color-cyan-20);
    --ds-tags-cyan-content: var(--ds-color-cyan-100);
    --ds-tags-green-bg: var(--ds-color-green-10);
    --ds-tags-green-border: var(--ds-color-green-20);
    --ds-tags-green-content: var(--ds-color-green-100);
    --ds-tags-grey-bg: var(--ds-color-charcoal-20);
    --ds-tags-grey-border: var(--ds-color-charcoal-30);
    --ds-tags-grey-content: var(--ds-color-charcoal-100);
    --ds-tags-orange-bg: var(--ds-color-blaze-orange-20);
    --ds-tags-orange-border: var(--ds-color-blaze-orange-30);
    --ds-tags-orange-content: var(--ds-color-blaze-orange-100);
    --ds-tags-pink-bg: var(--ds-color-pink-10);
    --ds-tags-pink-border: var(--ds-color-pink-20);
    --ds-tags-pink-content: var(--ds-color-pink-100);
    --ds-tags-red-bg: var(--ds-color-red-10);
    --ds-tags-red-border: var(--ds-color-red-20);
    --ds-tags-red-content: var(--ds-color-red-100);
    --ds-tags-violet-bg: var(--ds-color-violet-10);
    --ds-tags-violet-border: var(--ds-color-violet-20);
    --ds-tags-violet-content: var(--ds-color-violet-100);
    --ds-tags-yellow-bg: var(--ds-color-yellow-10);
    --ds-tags-yellow-border: var(--ds-color-yellow-20);
    --ds-tags-yellow-content: var(--ds-color-yellow-100);
    --ds-toggle-switch-active-bg: var(--ds-color-jungle-green-100);
    --ds-toggle-switch-active-button: var(--ds-color-neutral-white);
    --ds-toggle-switch-disabled-bg: var(--ds-color-lime-green-20);
    --ds-toggle-switch-disabled-border: var(--ds-color-lime-green-30);
    --ds-toggle-switch-disabled-content: var(--ds-color-charcoal-70);
    --ds-toggle-switch-enable-bg: var(--ds-color-charcoal-70);
    --ds-toggle-switch-enable-button: var(--ds-color-neutral-white);
    --ds-toggle-switch-hover-bg: var(--ds-color-charcoal-80);
    --ds-toggle-switch-hover-button: var(--ds-color-neutral-white);
    --ds-tree-content-padding-right-default: var(--ds-spacing-10);
    --ds-tree-content-padding-x-default: var(--ds-spacing-10);
    --ds-tree-content-padding-y-default: var(--ds-spacing-2);
    --ds-tree-item-indent-level-02: var(--ds-spacing-10);
    --ds-tree-item-indent-level-03: var(--ds-spacing-20);
    --ds-tree-item-indent-level-04: var(--ds-spacing-30);
    --ds-tree-item-indent-level-05: var(--ds-spacing-40);
    --ds-tree-item-indent-level-06: var(--ds-spacing-50);
    --ds-tree-item-indent-level-07: var(--ds-spacing-60);
    --ds-tree-item-indent-level-08: var(--ds-spacing-70);
    --ds-tree-item-indent-level-09: var(--ds-spacing-80);
    --ds-tree-item-indent-level-10: var(--ds-spacing-90);

    /* ── Compléments ── jetons absents de Figma, ajoutés depuis le 23/10/2026 : nom d'usage, valeur
       prise dans les primitives ci-dessus, une ligne datée qui dit pourquoi (design/CHARTE.md § 3). */
    /* 23/10/2026 — le soulignement d'un champ (Fluent, gardé : CHARTE.md § 5.2), que Figma ne dessine pas ;
       le même jeton du thème colore le chevron et la croix du champ : repère d'interface, ≥ 3:1. */
    --ds-input-underline: var(--ds-color-charcoal-80);
    --ds-input-underline-hover: var(--ds-color-charcoal-90);
    /* 23/10/2026 — l'élément choisi d'une liste ouverte, survolé : Figma n'a pas cet état. */
    --ds-input-item-active-hover-bg: var(--ds-color-jungle-green-30);
    /* 26/10/2026 — la sidebar de l'application, au-delà de la maquette (qui ne dessine ni l'état vide du
       filtre, ni la date du build) : filet sur le teal en blanc translucide, la primitive « Alpha » de
       Guillaume ; textes secondaires en gris de son échelle (≥ 5:1 sur le teal). Le champ de recherche
       translucide et ses quatre jetons sont retirés le 28/10/2026 : « Recherche » est une entrée du menu. */
    --ds-sidebar-separator: var(--ds-color-alpha-white-100-10);  /* filet au-dessus d'un titre de section */
    --ds-sidebar-muted-content: var(--ds-color-charcoal-60);  /* état vide du filtre */
    --ds-sidebar-subtle-content: var(--ds-color-charcoal-70); /* date du build */
    --ds-sidebar-tooltip-bg: var(--ds-color-charcoal-10);
    --ds-sidebar-tooltip-border: var(--ds-color-charcoal-20);
    --ds-sidebar-tooltip-content: var(--ds-color-neutral-teal);
    /* Une <img> ne lit pas de couleur : le filtre qui la rend teal sur une entrée claire (≈ #164147). */
    --ds-sidebar-icon-on-light-filter:
        brightness(0) saturate(100%) invert(19%) sepia(34%) saturate(1093%) hue-rotate(140deg) brightness(94%) contrast(91%);
    /* 27/10/2026 — la sidebar recopiée sur la maquette « Sidebardark » (DS PIM 6001-4314) : retrait du panneau
       (padding 15 de la variante Open) et titres de section (« Sidebardark-section-item », 6459-3283 ; fixes
       depuis le 29/10/2026, sans chevron ni survol), que Figma lie à des primitives sans jeton d'usage. « Recherche » y est une entrée du menu :
       le champ natif en prend l'apparence (plus de champ translucide). */
    --ds-sidebar-inset-x: var(--ds-spacing-15);
    --ds-sidebar-section-content: var(--ds-color-jungle-green-10);
    --ds-sidebar-section-font-size: var(--ds-font-size-11);
    --ds-sidebar-section-padding-y: var(--ds-spacing-8);
    --ds-sidebar-section-padding-x: var(--ds-spacing-10);
    --ds-sidebar-section-spacing: var(--ds-spacing-5); /* séparateur → titre → première entrée */
    /* 29/10/2026 — refonte de la sidebar (analyse d'ergonomie, décisions d'Adrien) : le survol de la maquette
       (Lime_Green/20) ne se distinguait pas de l'entrée active (Lime_Green/30, 1,00:1) ; il passe au voile blanc
       de 10 % (texte clair à 7,8:1), le lime ne dit plus que « vous êtes ici ». Le module qui contient la page
       ouverte porte un liseré Lime_Green/40 (9,2:1 sur le teal, repère ≥ 3:1). */
    --ds-sidebar-item-hover-bg: var(--ds-color-alpha-white-100-10);
    --ds-sidebar-item-hover-content: var(--ds-color-jungle-green-10);
    --ds-sidebar-ancestor-indicator: var(--ds-color-lime-green-40);
    /* 29/10/2026 — même refonte : « Rechercher » reprend l'allure d'un champ (on n'y voyait pas qu'on pouvait
       taper) : fond blanc 5 %, bordure Jungle_Green/10 à demi transparente (3,9:1 sur le teal, repère ≥ 3:1). */
    --ds-sidebar-search-bg: var(--ds-color-alpha-white-100-05);
    --ds-sidebar-search-border: var(--ds-color-alpha-jungle-10-50);
    /* 29/10/2026 — même refonte : l'étiquette d'environnement contre le logo, hors production, reprend les
       couleurs du composant « Tag (color) » : bleu pour le poste de développement, orange (attention) pour la
       préproduction, gris pour un autre environnement. */
    --ds-sidebar-env-development-bg: var(--ds-tags-blue-bg);
    --ds-sidebar-env-development-content: var(--ds-tags-blue-content);
    --ds-sidebar-env-preproduction-bg: var(--ds-tags-orange-bg);
    --ds-sidebar-env-preproduction-content: var(--ds-tags-orange-content);
    --ds-sidebar-env-other-bg: var(--ds-tags-grey-bg);
    --ds-sidebar-env-other-content: var(--ds-tags-grey-content);
    /* 26/10/2026 — les états métier peints par les controllers (classes pim-* des feuilles de domaine,
       css/domains/), jusqu'ici lus par leur seul repli en clair : rattachés aux couleurs du composant
       « Tag (color) » de la charte, même sens. */
    --ds-state-coef-alert-bg: var(--ds-tags-violet-bg);             /* coefficient sous le minimum (violet : BIO-096) */
    --ds-state-coef-alert-content: var(--ds-tags-violet-content);
    --ds-state-general-tariff-bg: var(--ds-tags-grey-bg);           /* cellule en tarif général */
    --ds-state-general-tariff-content: var(--ds-tags-grey-content);
    --ds-state-good-deal-bg: var(--ds-tags-green-bg);               /* ligne « bon coup » */
    --ds-state-good-deal-content: var(--ds-tags-green-content);
    --ds-state-partial-shortage-bg: var(--ds-tags-orange-bg);       /* préparation partielle */
    --ds-state-partial-shortage-content: var(--ds-tags-orange-content);
    --ds-state-stock-issue-bg: var(--ds-tags-red-bg);               /* rupture théorique */
    --ds-state-stock-issue-content: var(--ds-tags-red-content);
    --ds-last-saved-bg: var(--ds-color-jungle-green-10);            /* pastille « dernier enregistrement » */
    --ds-last-saved-border: var(--ds-color-jungle-green-30);
    --ds-last-saved-content: var(--ds-color-charcoal-90);
    --ds-last-saved-icon: var(--ds-color-charcoal-80);
    --ds-last-saved-user: var(--ds-color-neutral-teal);
    /* 26/10/2026 — retour d'erreur (texte), que Figma ne définit pas : le rouge de la charte. */
    --ds-feedback-danger: var(--ds-color-red-100);
    /* 26/10/2026 — états de ligne de grille (CHARTE.md § 5.3). Le repère de position — survol ET ligne
       courante au clavier — en gris : la maquette met le survol au vert de la ligne sélectionnée, et deux
       surbrillances de même teinte ne se lisent pas (observé à l'usage le 03/08/2026 ; pratique Fluent).
       La ligne sélectionnée survolée et la ligne en édition, que Figma ne dessine pas. */
    --ds-grid-table-line-cursor-bg: var(--ds-color-charcoal-40);
    --ds-grid-table-line-active-hover-bg: var(--ds-color-jungle-green-30);
    --ds-grid-table-line-edit-bg: var(--ds-color-jungle-green-10);
    /* 26/10/2026 — la case cochée survolée : Figma n'a que le survol de la case vide ; l'accent survolé,
       comme le bouton principal. */
    --ds-checkbox-active-hover-bg: var(--ds-color-jungle-green-110);
    /* 26/10/2026 — l'ombre « standard » de la maquette (Figma la nomme ainsi, sans variable). */
    --ds-shadow-standard: 0 4px 10px rgba(0, 0, 0, 0.03);
    /* 26/10/2026 — l'écart entre deux actions d'une barre d'outils : 10 px sur tous les écrans de la
       maquette (commande, liste produits), sans variable ; le thème en met 4 en Compact. */
    --ds-toolbar-item-gap: var(--ds-spacing-10);
    /* 26/10/2026 — l'arrondi de la carte (« card » 6288-23390, écrans commande et produit) : 10 px, sans variable
       dans Figma. */
    --ds-card-radius: 10px;
    /* 26/10/2026 — l'onglet survolé : le thème le souligne (un trait, pas l'aplat Jungle_Green/10 de la maquette) ;
       un cran au-dessus du trait pâle de la barre (enable/border, /20), pour s'en distinguer. */
    --ds-nav-ribbon-hover-border: var(--ds-color-jungle-green-30);
    /* 26/10/2026 — le corps d'une fenêtre, entre son en-tête et son pied gris (--ds-modal-bg) : blanc dans le
       composant « Modal » (6288-23319) et la fenêtre WMS, sans variable. */
    --ds-modal-body-bg: var(--ds-color-neutral-white);
    /* 27/10/2026 — la police de l'interface avec ses replis, le temps que Manrope charge. */
    --ds-font-family-text: var(--ds-font-family-ui), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* 27/10/2026 — les rayons du sur mesure, sans variable dans Figma : 4 px, celui de toute la charte
       (bouton, champ, fenêtre) ; 2 px pour une note ou une pastille dans un panneau ; 6 px pour un bandeau
       et un badge d'état. */
    --ds-radius-sm: 2px;
    --ds-radius-md: 4px;
    --ds-radius-lg: 6px;
    /* 27/10/2026 — les panneaux sur mesure (résumé d'une commande, stock et remise d'une ligne) : la carte
       blanche du composant « Modal », en-tête gris, titre et chiffres clés en vert foncé, texte Teal. */
    --ds-panel-bg: var(--ds-color-neutral-white);
    --ds-panel-border: var(--ds-color-charcoal-30);
    --ds-panel-divider: var(--ds-color-charcoal-40);
    --ds-panel-header-bg: var(--ds-color-charcoal-10);
    --ds-panel-title: var(--ds-color-jungle-green-110);
    --ds-panel-content: var(--ds-color-neutral-teal);
    --ds-panel-muted-content: var(--ds-color-charcoal-90);
    --ds-panel-accent: var(--ds-color-jungle-green-100);
    --ds-panel-note-bg: var(--ds-color-jungle-green-10);
    --ds-panel-note-border: var(--ds-color-jungle-green-30);
    /* 27/10/2026 — un retour sur fond clair dans le sur mesure (alerte d'un résumé, stock insuffisant ou
       suffisant) : le rouge de la charte, et le vert de l'application pour « tout va bien ». */
    --ds-feedback-danger-bg: var(--ds-color-red-10);
    --ds-feedback-danger-border: var(--ds-color-red-20);
    --ds-feedback-success: var(--ds-color-jungle-green-110);
    --ds-feedback-success-bg: var(--ds-color-jungle-green-20);
    --ds-feedback-success-border: var(--ds-color-jungle-green-30);
    /* 27/10/2026 — une valeur forcée, ou calculée avant un changement (date de tarif, PIM-220) : l'orange
       lisible de la charte ; c'était « darkorange » (2,4:1 sur blanc). */
    --ds-state-forced-content: var(--ds-color-blaze-orange-100);
    /* 27/10/2026 — les bandeaux posés au-dessus d'une vue (modification exclusive, TAP-03) : avertissement
       au jaune de la charte (5:1), simple rappel au vert pâle. */
    --ds-banner-warning-bg: var(--ds-color-yellow-10);
    --ds-banner-warning-border: var(--ds-color-yellow-20);
    --ds-banner-warning-content: var(--ds-color-yellow-100);
    --ds-banner-info-bg: var(--ds-color-jungle-green-10);
    --ds-banner-info-border: var(--ds-color-jungle-green-20);
    --ds-banner-info-content: var(--ds-color-neutral-teal);
    --ds-banner-info-accent: var(--ds-color-jungle-green-100);
    /* 27/10/2026 — le pavé de filtres au-dessus d'une liste (ListFilterPanel, PIM-350), que Figma ne dessine pas :
       ses couleurs d'origine reportées sur les primitives voisines de la charte. Accent pâle quand un filtre
       est actif, segment choisi et compteur en vert foncé, liens et puces à l'accent. */
    --ds-filter-panel-bg: var(--ds-color-neutral-white);
    --ds-filter-panel-border: var(--ds-color-charcoal-40);
    --ds-filter-panel-divider: var(--ds-color-charcoal-30);
    --ds-filter-panel-field-border: var(--ds-color-charcoal-50);
    --ds-filter-panel-field-muted-bg: var(--ds-color-charcoal-10);
    --ds-filter-panel-content: var(--ds-color-neutral-teal);
    --ds-filter-panel-text: var(--ds-color-charcoal-100);
    --ds-filter-panel-muted: var(--ds-color-charcoal-90);
    --ds-filter-panel-hover-bg: var(--ds-color-charcoal-20);
    --ds-filter-panel-row-hover-bg: var(--ds-color-charcoal-10);
    --ds-filter-panel-badge-bg: var(--ds-color-charcoal-30);
    --ds-filter-panel-accent: var(--ds-color-jungle-green-100);
    --ds-filter-panel-accent-border: var(--ds-color-jungle-green-30);
    --ds-filter-panel-accent-divider: var(--ds-color-jungle-green-20);
    --ds-filter-panel-highlight-bg: var(--ds-color-jungle-green-10);
    --ds-filter-panel-selected-bg: var(--ds-color-jungle-green-110);
    --ds-filter-panel-selected-content: var(--ds-color-neutral-white);
    --ds-filter-panel-link: var(--ds-color-jungle-green-110);
    /* 27/10/2026 — la poignée qui redimensionne deux volets d'un tableau de bord (dashboard-splitter.js) :
       trait gris au repos, fond à peine teinté au survol, trait à l'accent quand on la tient (était bleu). */
    --ds-splitter-handle: var(--ds-color-charcoal-60);
    --ds-splitter-hover-bg: var(--ds-color-charcoal-20);
    --ds-splitter-active: var(--ds-color-jungle-green-100);
    /* 27/10/2026 — une ligne d'aide dans un formulaire (classe app-help-note posée par le modèle). */
    --ds-help-bg: var(--ds-color-jungle-green-10);
    --ds-help-content: var(--ds-color-neutral-teal);
    --ds-help-icon-bg: var(--ds-color-jungle-green-100);
    --ds-help-icon-content: var(--ds-color-neutral-white);
    /* 27/10/2026 — la palette des règles de style des utilisateurs (StyleColor, css/domains/styling.css) lit
       les « Tags » de la charte ; deux de ses onze couleurs n'y ont pas d'équivalent. « Noir » : le texte le
       plus sombre de la charte (Teal), et un fond Teal porte un texte blanc. « Blanc » : le blanc de la
       charte. */
    --ds-style-rule-black-content: var(--ds-color-neutral-teal);
    --ds-style-rule-black-bg: var(--ds-color-neutral-teal);
    --ds-style-rule-on-black-content: var(--ds-color-neutral-white);
    --ds-style-rule-white-content: var(--ds-color-neutral-white);
    --ds-style-rule-white-bg: var(--ds-color-neutral-white);
    /* 28/10/2026 — l'en-tête de la page de connexion (gabarit de connexion de XAF) : le fond de la sidebar, sur
       lequel la marque se lit comme dans l'application (cube lime, mot blanc) ; sur le blanc du thème, le lime
       du mot lisait 1,2:1. */
    --ds-login-header-bg: var(--ds-color-neutral-teal);
    --ds-login-header-content: var(--ds-color-neutral-white);
}

/* ── Le thème DevExpress Fluent à la charte (27/10/2026) ──────────────────────────────────────────────
   Les jetons publics du thème (--dxds-*, dxdocs 405705) sont eux-mêmes des noms d'usage (surface, texte,
   bordure × rôle × état) : le thème Fluent les déclare sur :root (modes/light.min.css), et cette feuille,
   chargée après lui, leur donne les couleurs de la charte (son autre sélecteur, la classe de mode
   .dxbl-theme-fluent-mode-light, n'est posé sur aucun élément par XAF ; vérifié le 27/10/2026). C'est le seul pont entre les
   deux : une famille que la charte colore autrement les redéclare sur sa racine, dans app-theme.css, depuis
   un jeton d'usage (design/CHARTE.md § 4).
   Ce que la charte n'a pas n'est pas redéclaré, le thème garde sa valeur : survol et appui plus foncés
   des couleurs de retour (danger, info, succès, avertissement), rayons (2 et 4 px, les mêmes). Une
   transparence se dérive d'une primitive (« rgb(from … / a) »), comme les primitives Alpha de la charte.
   Les variables Bootstrap (--bs-*) : seules celles que lit encore une feuille chargée (styles.css de XAF ;
   aucune feuille Bootstrap n'est chargée avec Fluent). */
:root {
    --dxds-font-family-sans-serif: var(--ds-font-family-text);
    --dxds-box-shadow-md: var(--ds-shadow-standard);

    /* Surface — neutre */
    --dxds-color-surface-neutral-default-rest: var(--ds-color-neutral-white);
    --dxds-color-surface-neutral-default-hovered: var(--ds-color-charcoal-20);
    --dxds-color-surface-neutral-default-active: var(--ds-color-charcoal-30);
    --dxds-color-surface-neutral-default-selected: var(--ds-color-jungle-green-10);
    --dxds-color-surface-neutral-default-selected-hovered: var(--ds-color-jungle-green-20);
    --dxds-color-surface-neutral-default-disabled: var(--ds-color-charcoal-20);
    --dxds-color-surface-neutral-default-inverted-rest: var(--ds-color-neutral-teal);
    --dxds-color-surface-neutral-subdued-rest: var(--ds-color-charcoal-10);
    --dxds-color-surface-neutral-subdued-hovered: var(--ds-color-charcoal-20);
    --dxds-color-surface-neutral-subdued-active: var(--ds-color-charcoal-30);
    --dxds-color-surface-neutral-deep-rest: var(--ds-color-charcoal-20);
    --dxds-color-surface-neutral-deep-hovered: var(--ds-color-charcoal-30);
    --dxds-color-surface-neutral-default-static-light-rest: var(--ds-color-neutral-white);
    --dxds-color-surface-neutral-default-static-light-hovered: var(--ds-color-charcoal-20);
    --dxds-color-surface-neutral-default-static-light-active: var(--ds-color-charcoal-30);
    --dxds-color-surface-neutral-default-static-light-disabled: var(--ds-color-charcoal-20);
    --dxds-color-surface-neutral-default-static-light-selected: var(--ds-color-jungle-green-10);
    --dxds-color-surface-neutral-default-static-dark-rest: var(--ds-color-neutral-teal);
    --dxds-color-surface-neutral-default-static-dark-hovered: var(--ds-color-alpha-white-100-10);
    --dxds-color-surface-neutral-default-static-dark-active: rgb(from var(--ds-color-neutral-white) r g b / 0.15);
    --dxds-color-surface-neutral-default-static-dark-disabled: var(--ds-color-alpha-white-100-05);
    --dxds-color-surface-neutral-default-static-dark-selected: var(--ds-color-jungle-green-100);
    /* Surface — accent. Le bouton principal en est le premier lecteur (CHARTE.md § 5.1) : rest peint aussi la
       page active du pager, l'élément choisi d'une liste, le calendrier, les badges d'arbre, le splitter et la
       progression de XAF ; hovered, le survol de ces éléments choisis ; active, le seul bouton principal enfoncé ;
       disabled, le bouton principal désactivé de la barre de XAF (son styles.css). Le bouton principal scindé
       ouvert, un menu principal ouvert et le bouton coché d'un groupe principal lisent selected : l'accent survolé. */
    --dxds-color-surface-primary-default-rest: var(--ds-button-primary-enable-bg);
    --dxds-color-surface-primary-default-hovered: var(--ds-button-primary-hover-bg);
    --dxds-color-surface-primary-default-active: var(--ds-button-primary-pressed-bg);
    --dxds-color-surface-primary-default-selected: var(--ds-button-primary-hover-bg);
    --dxds-color-surface-primary-default-disabled: var(--ds-button-primary-disabled-bg);
    --dxds-color-surface-primary-subdued-rest: var(--ds-color-jungle-green-10);
    --dxds-color-surface-primary-subdued-hovered: var(--ds-color-jungle-green-20);
    --dxds-color-surface-primary-subdued-active: var(--ds-color-jungle-green-30);
    --dxds-color-surface-primary-subdued-selected: var(--ds-color-jungle-green-20);
    /* « deep » : des teintes pâles de l'accent dans le thème (primary-10 / 20 / 30), lues sous un texte foncé —
       période choisie d'un calendrier, toast « pastel ». L'ancienne palette y mettait l'accent plein : la période
       était illisible (texte gris sur vert foncé). La grille les redéclare pour ses lignes (app-theme.css § 13). */
    --dxds-color-surface-primary-deep-rest: var(--ds-color-jungle-green-10);
    --dxds-color-surface-primary-deep-hovered: var(--ds-color-jungle-green-20);
    --dxds-color-surface-primary-deep-selected: var(--ds-color-jungle-green-30);
    /* Surface — secondaire (gris : la charte n'a plus de violet) */
    --dxds-color-surface-secondary-default-hovered: var(--ds-color-charcoal-100);
    --dxds-color-surface-secondary-default-selected: var(--ds-color-metalic-grey-20);
    /* Surface — retours : le repos et le fond à la charte, survol et appui au thème */
    --dxds-color-surface-danger-default-rest: var(--ds-color-red-100);
    --dxds-color-surface-danger-default-selected: var(--ds-color-red-100);
    --dxds-color-surface-danger-deep-rest: var(--ds-color-red-100);
    --dxds-color-surface-info-default-rest: var(--ds-color-blue-10);
    --dxds-color-surface-info-default-hovered: var(--ds-color-blue-20);
    --dxds-color-surface-info-default-active: var(--ds-color-blue-20);
    --dxds-color-surface-info-default-selected: var(--ds-color-blue-20);
    --dxds-color-surface-info-subdued-rest: var(--ds-color-blue-10);
    --dxds-color-surface-info-subdued-hovered: var(--ds-color-blue-10);
    --dxds-color-surface-info-subdued-active: var(--ds-color-blue-20);
    --dxds-color-surface-info-subdued-selected: var(--ds-color-blue-10);
    --dxds-color-surface-info-deep-rest: var(--ds-color-blue-100);
    --dxds-color-surface-success-default-rest: var(--ds-color-green-10);
    --dxds-color-surface-success-default-hovered: var(--ds-color-green-20);
    --dxds-color-surface-success-default-active: var(--ds-color-green-20);
    --dxds-color-surface-success-default-selected: var(--ds-color-green-20);
    --dxds-color-surface-success-subdued-rest: var(--ds-color-green-10);
    --dxds-color-surface-success-subdued-hovered: var(--ds-color-green-10);
    --dxds-color-surface-success-subdued-active: var(--ds-color-green-20);
    --dxds-color-surface-success-subdued-selected: var(--ds-color-green-10);
    --dxds-color-surface-success-deep-rest: var(--ds-color-green-100);
    --dxds-color-surface-warning-default-rest: var(--ds-color-yellow-10);
    --dxds-color-surface-warning-default-hovered: var(--ds-color-yellow-20);
    --dxds-color-surface-warning-default-active: var(--ds-color-yellow-20);
    --dxds-color-surface-warning-default-selected: var(--ds-color-yellow-20);
    --dxds-color-surface-warning-subdued-rest: var(--ds-color-yellow-10);
    --dxds-color-surface-warning-subdued-hovered: var(--ds-color-yellow-10);
    --dxds-color-surface-warning-subdued-active: var(--ds-color-yellow-20);
    --dxds-color-surface-warning-subdued-selected: var(--ds-color-yellow-10);
    --dxds-color-surface-warning-deep-rest: var(--ds-color-yellow-100);
    /* Surface — voile d'une fenêtre, surlignage d'une recherche */
    --dxds-color-surface-backdrop-default-rest: rgb(from var(--ds-color-neutral-teal) r g b / 0.4);
    --dxds-color-surface-highlight-rest: var(--ds-color-jungle-green-20);
    /* Surface — couleurs utilitaires (graphiques, planning) : les teintes claires de la charte */
    --dxds-color-surface-utility-blue-default-rest: var(--ds-color-blue-20);
    --dxds-color-surface-utility-blue-subdued-rest: var(--ds-color-blue-10);
    --dxds-color-surface-utility-cyan-default-rest: var(--ds-color-cyan-20);
    --dxds-color-surface-utility-cyan-subdued-rest: var(--ds-color-cyan-10);
    --dxds-color-surface-utility-gray-subdued-rest: var(--ds-color-charcoal-20);
    --dxds-color-surface-utility-green-default-rest: var(--ds-color-green-20);
    --dxds-color-surface-utility-green-subdued-rest: var(--ds-color-green-10);
    --dxds-color-surface-utility-indigo-subdued-rest: var(--ds-color-blue-night-10);
    --dxds-color-surface-utility-orange-default-rest: var(--ds-color-blaze-orange-20);
    --dxds-color-surface-utility-orange-subdued-rest: var(--ds-color-blaze-orange-10);
    --dxds-color-surface-utility-pink-subdued-rest: var(--ds-color-pink-10);
    --dxds-color-surface-utility-purple-subdued-rest: var(--ds-color-metalic-grey-10);
    --dxds-color-surface-utility-red-default-rest: var(--ds-color-red-10);
    --dxds-color-surface-utility-red-subdued-rest: var(--ds-color-red-10);
    --dxds-color-surface-utility-teal-subdued-rest: var(--ds-color-jungle-green-10);
    --dxds-color-surface-utility-yellow-subdued-rest: var(--ds-color-yellow-10);

    /* Texte — neutre. Le thème ne fonce pas le texte au survol : un seul gris de texte, Charcoal/100.
       Le texte secondaire (subdued : grille vide, indications, chevrons de menu) en Charcoal/90, ≥ 4,5:1 sur
       blanc (CHARTE.md § 2 ; Charcoal/80 donnait 3,3:1) ; le soulignement des champs, repère et non texte,
       garde son jeton (--ds-input-underline, redéclaré sur la famille). */
    --dxds-color-content-neutral-default-rest: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-hovered: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-active: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-selected: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-selected-hovered: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-disabled: var(--ds-color-charcoal-70);
    --dxds-color-content-neutral-default-inverted-rest: var(--ds-color-neutral-white);
    --dxds-color-content-neutral-subdued-rest: var(--ds-color-charcoal-90);
    --dxds-color-content-neutral-subdued-hovered: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-subdued-active: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-subdued-selected: var(--ds-color-charcoal-90);
    --dxds-color-content-neutral-subdued-disabled: var(--ds-color-charcoal-60);
    /* Le thème le lit comme indication d'un champ vide (aussi les jours hors du mois du calendrier et la barre
       de défilement de la visionneuse de rapports, --dxbrv-gray-color). */
    --dxds-color-content-neutral-deep-rest: var(--ds-input-enable-unfilled-content);
    --dxds-color-content-neutral-default-static-light-rest: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-static-light-hovered: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-static-light-active: var(--ds-color-charcoal-100);
    --dxds-color-content-neutral-default-static-light-disabled: var(--ds-color-charcoal-60);
    --dxds-color-content-neutral-default-static-dark-rest: var(--ds-color-neutral-white);
    --dxds-color-content-neutral-default-static-dark-hovered: rgb(from var(--ds-color-neutral-white) r g b / 0.9);
    --dxds-color-content-neutral-default-static-dark-active: var(--ds-color-neutral-white);
    --dxds-color-content-neutral-default-static-dark-disabled: rgb(from var(--ds-color-neutral-white) r g b / 0.4);
    /* Texte — accent */
    --dxds-color-content-primary-default-rest: var(--ds-color-jungle-green-100);
    --dxds-color-content-primary-default-hovered: var(--ds-color-jungle-green-110);
    --dxds-color-content-primary-default-active: var(--ds-color-jungle-green-110);
    /* Lu par un seul composant en 26.1.3 : le REMPLISSAGE d'une case cochée
       (--dxbl-checkbox-primary-checked[-hover]-check-element-bg) ; la coche lit content-neutral-default-inverted-rest. */
    --dxds-color-content-primary-compound-rest: var(--ds-checkbox-active-on-light-bg);
    --dxds-color-content-primary-compound-hovered: var(--ds-checkbox-active-hover-bg);
    --dxds-color-content-secondary-default-rest: var(--ds-color-charcoal-100);
    /* Texte — retours */
    --dxds-color-content-danger-default-rest: var(--ds-color-red-100);
    --dxds-color-content-danger-compound-rest: var(--ds-color-neutral-white);
    --dxds-color-content-danger-compound-hovered: var(--ds-color-neutral-white);
    --dxds-color-content-info-default-rest: var(--ds-color-blue-100);
    --dxds-color-content-success-default-rest: var(--ds-color-green-100);
    --dxds-color-content-success-compound-rest: var(--ds-color-neutral-white);
    --dxds-color-content-success-compound-hovered: var(--ds-color-neutral-white);
    --dxds-color-content-warning-default-rest: var(--ds-color-yellow-100);
    /* Le texte surligné d'une recherche, et le cadre de la cellule focalisée de la grille (même jeton). */
    --dxds-color-content-highlight-rest: var(--ds-color-jungle-green-100);

    /* Bordure — neutre */
    --dxds-color-border-neutral-default-rest: var(--ds-color-charcoal-40);
    --dxds-color-border-neutral-default-hovered: var(--ds-color-charcoal-60);
    --dxds-color-border-neutral-default-active: var(--ds-color-charcoal-70);
    --dxds-color-border-neutral-default-disabled: var(--ds-color-charcoal-30);
    --dxds-color-border-neutral-default-inverted-rest: rgb(from var(--ds-color-neutral-white) r g b / 0.2);
    --dxds-color-border-neutral-accessible-rest: var(--ds-color-charcoal-70);
    --dxds-color-border-neutral-accessible-hovered: var(--ds-color-charcoal-90);
    --dxds-color-border-neutral-default-static-light-rest: var(--ds-color-charcoal-40);
    --dxds-color-border-neutral-default-static-light-hovered: var(--ds-color-charcoal-60);
    --dxds-color-border-neutral-default-static-light-active: var(--ds-color-charcoal-70);
    --dxds-color-border-neutral-default-static-light-disabled: var(--ds-color-charcoal-30);
    --dxds-color-border-neutral-default-static-dark-rest: rgb(from var(--ds-color-neutral-white) r g b / 0.2);
    --dxds-color-border-neutral-default-static-dark-hovered: rgb(from var(--ds-color-neutral-white) r g b / 0.3);
    --dxds-color-border-neutral-default-static-dark-active: rgb(from var(--ds-color-neutral-white) r g b / 0.4);
    --dxds-color-border-neutral-default-static-dark-disabled: var(--ds-color-alpha-white-100-10);
    /* Bordure — accent ; compound : la bordure d'une case cochée et le cadre d'une cellule en édition */
    --dxds-color-border-primary-default-rest: var(--ds-color-jungle-green-100);
    --dxds-color-border-primary-compound-rest: var(--ds-checkbox-active-on-light-bg);
    --dxds-color-border-primary-compound-hovered: var(--ds-checkbox-active-hover-bg);
    --dxds-color-border-secondary-default-rest: var(--ds-color-metalic-grey-20);
    /* Bordure — retours (cases « danger », état « valide » d'un champ) : le rouge et le vert pleins, repères ≥ 3:1 */
    --dxds-color-border-danger-compound-rest: var(--ds-color-red-100);
    --dxds-color-border-danger-compound-hovered: var(--ds-color-red-100);
    --dxds-color-border-success-compound-rest: var(--ds-color-green-100);
    --dxds-color-border-success-compound-hovered: var(--ds-color-green-100);
    /* Focus : l'accent */
    --dxds-color-border-focus-default: var(--ds-color-jungle-green-100);
    --dxds-color-border-focus-static-dark: var(--ds-color-jungle-green-100);
    --dxds-color-border-focus-static-light: var(--ds-color-jungle-green-100);
    /* Ombres : plus légères que le thème, comme l'ombre « standard » de la maquette */
    --dxds-color-shadow-ambient: rgba(0, 0, 0, 0.04);
    --dxds-color-shadow-key: rgba(0, 0, 0, 0.08);
    --dxds-color-shadow-ambient-darker: rgba(0, 0, 0, 0.08);
    --dxds-color-shadow-key-darker: rgba(0, 0, 0, 0.14);

    /* Bootstrap, lu par styles.css de XAF : case invalide (canaux du rouge, #be1010), en-tête du tiroir de
       thèmes, bordure du filtre de critères, menu de thèmes. */
    --bs-danger-rgb: 190, 16, 16;
    --bs-body-font-family: var(--ds-font-family-text);
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--ds-color-charcoal-100);
    --bs-border-color: var(--ds-color-charcoal-40);
    --bs-nav-link-color: var(--ds-color-charcoal-100);
}