/* ==========================================================================
   Lyrge UI · jetons
   --------------------------------------------------------------------------
   Deux couches, dans cet ordre :
     1. Marque       copie conforme des jetons de lyrge.fr (ne pas modifier)
     2. Application  jetons propres à l’outil : espacements, typographie
                     dense, durées, mise en page, états, statuts du pipeline,
                     thème sombre « Forêt » et îlots sombres
   C’est le seul fichier du kit où couleurs, durées et rayons s’écrivent en
   clair : tests/ui/codage-en-dur.test.mjs refuse toute valeur écrite en dur
   ailleurs. Pour une nouvelle valeur : créer un jeton ici (voir LISEZMOI.md).
   Thèmes : <html data-theme="clair|sombre|auto"> (clair par défaut).
   ========================================================================== */

/* 1. Marque -----------------------------------------------------------------
   Provenance : Lyrge/style.css, lignes 27 à 113 (bloc « 02 Tokens » et portée
   .theme-dark), copiées telles quelles le 30/09/2026. Noms et valeurs sont
   vérifiés par tests/ui/jetons.test.mjs contre reference/lyrge-fr-jetons.css,
   elle-même comparée au site en ligne par
   docs/programme-lyrge-os/outils/ui/comparer-avec-le-site.mjs. */

/* 02 Tokens */
:root {
  color-scheme: light;

  /* Brand palette (brief: ivoire, vert profond, menthe réservée à l'essentiel, texte noir-vert) */
  --ivory: #f7f4ec;
  --ivory-raised: #fbf9f4;
  --ivory-sunk: #f1ede3;
  --paper: #ffffff;
  --green: #073d2d;
  --green-deep: #052a1f;
  --green-hover: #0d5540;
  --green-ink: #1c5a44;
  --mint: #a8ebcb;
  --mint-light: #c6f3dd;
  --mint-soft: #e1f6ec;
  --mint-glow: rgb(168 235 203 / .55);
  --ink: #08120f;
  --ink-soft: #24332d;
  --text-2: #45524c;
  --muted: #56645e;
  --line: #e4e0d5;
  --line-strong: #d2ccbf;
  --focus: #2f8f68;

  /* Autonomy levels (demos, control section, solution pages) */
  --auto-bg: #e1f6ec;       --auto-fg: #0b5139;
  --validate-bg: #f8eed5;   --validate-fg: #6f4c0c;
  --human-bg: #e7ebe8;      --human-fg: #22312b;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-display: clamp(2.625rem, 1.15rem + 4.9vw, 5.25rem);  /* 42 → 84 : home hero */
  --text-h1: clamp(2.375rem, 1.45rem + 3.2vw, 4.25rem);        /* 38 → 68 : page heroes */
  --text-h2: clamp(2rem, 1.1rem + 2.95vw, 3.75rem);            /* 32 → 60, mockup section titles */
  --text-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.4375rem);      /* 19 → 23 */
  --text-lead: clamp(1.0625rem, .98rem + .38vw, 1.3125rem);    /* 17 → 21 */
  --text-base: 1rem;
  --text-sm: .9375rem;
  --text-xs: .8125rem;
  --text-eyebrow: .75rem;

  /* Space and layout */
  --container: 78rem;                                /* 1248px, mockup content width */
  --container-narrow: 48rem;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --section-y: clamp(5rem, 3rem + 7vw, 8.5rem);
  --header-h: 5.25rem;                               /* 84px */

  /* Shape and depth */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgb(8 18 15 / .05);
  --shadow-card: 0 1px 2px rgb(8 18 15 / .04), 0 18px 44px -26px rgb(7 61 45 / .28);
  --shadow-float: 0 2px 6px rgb(7 61 45 / .06), 0 34px 80px -34px rgb(7 61 45 / .40);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .35s;
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);   /* gentle spring, small overshoot */
  --dur-1: .35s;
  --dur-2: .6s;
  --dur-3: .9s;
  --dur-4: 1.2s;
}

/* Dark scope: every component reads these tokens, so it adapts inside dark sections */
.theme-dark {
  --ink: #f3f7f2;
  --ink-soft: #d9e7df;
  --text-2: #d0e2d8;
  --muted: #b3cbbe;
  --line: rgb(255 255 255 / .14);
  --line-strong: rgb(255 255 255 / .26);
  --focus: var(--mint);
  background-color: var(--green);
  color: var(--ink);
}

/* 1 bis. Marque : valeurs que le site écrit hors de ses jetons ---------------
   Reprises ici pour que les primitives du kit restent fidèles au site. */
:root {
  --mint-hl-from: #c8f6e0;                 /* style.css:322, début du dégradé de .hl */
  --bubble-from: #f4fcf8;                  /* style.css:352, dégradé de .icon-bubble */
  --bubble-to: #cdeede;                    /* style.css:352 */
  --mint-bright: #5fcf9f;                  /* style.css:3948, fin de la barre de progression */
  --band-glow: #0c4a37;                    /* style.css:434, lueur des bandeaux sombres */
  --band-end: #052c21;                     /* style.css:435, fin du dégradé des bandeaux */
  --header-frost: rgb(247 244 236 / .92);  /* style.css:474, verre dépoli de l’en-tête */
}

/* 2. Application ---------------------------------------------------------- */

/* 2.1 Invariants : identiques dans tous les thèmes */
:root {
  /* Espacements : pas de 4 px */
  --sp-1: .25rem;   --sp-2: .5rem;    --sp-3: .75rem;   --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
  --sp-9: 2.25rem;  --sp-10: 2.5rem;  --sp-11: 2.75rem; --sp-12: 3rem;
  --sp-13: 3.25rem; --sp-14: 3.5rem;  --sp-15: 3.75rem; --sp-16: 4rem;

  /* Typographie d’application (outil dense ; le site garde ses --text-*) */
  --fs-page: 1.75rem;          /* 28 px, titre de page : Inter Tight 700 */
  --fs-section: 1.25rem;       /* 20 px, titre de section : Inter Tight 700 */
  --fs-carte: 1rem;            /* 16 px, titre de carte : Inter 600 */
  --fs-corps: .9375rem;        /* 15 px, texte courant */
  --fs-ui: .875rem;            /* 14 px, commandes et tableaux */
  --fs-petit: .8125rem;        /* 13 px */
  --fs-xs: .75rem;             /* 12 px */
  --fs-nav: .6875rem;          /* 11 px, libellés de la barre mobile seulement */
  --fs-kpi: 2rem;              /* 32 px, chiffres clés : Inter Tight 700, chiffres tabulaires */
  --fs-kpi-lg: 2.5rem;         /* 40 px */
  --fs-champ: var(--fs-ui);    /* passe à 16 px au doigt : évite le zoom d’iOS */
  --lh-corps: 1.55;
  --lh-ui: 1.4;
  --lh-titre: 1.2;
  --ls-page: -.022em;
  --ls-section: -.015em;
  --ls-carte: -.011em;
  --ls-kpi: -.03em;
  --ls-label: .06em;           /* petites capitales des en-têtes de tableau */

  /* Durées d’application : la durée de marque (.35s) est trop lente pour un outil */
  --dur-rapide: .15s;          /* survols, couleurs */
  --dur-base: .2s;             /* apparitions, dialogues */
  --dur-moyen: .3s;            /* sorties de carte du mode tri */
  --dur-lent: .45s;            /* confirmation d’un déplacement */
  --dur-barre: .7s;            /* croissance des barres */
  --dur-rotation: .7s;         /* un tour de l’indicateur de chargement */
  --dur-reflet: 1.5s;          /* reflet des squelettes, tant que ça charge */
  --dur-nulle: .01ms;          /* mouvements réduits */

  /* Masques (fondu des rangées qui défilent) : seule l’opacité compte */
  --masque-opaque: #000;

  /* Mise en page */
  --side: 16rem;               /* barre latérale, 256 px (0 sous 900 px) */
  --mtop-h: 3.5rem;            /* barre du haut mobile, 56 px */
  --bnav-h: 4rem;              /* barre du bas mobile, 64 px */
  --page-max: 80rem;           /* 1280 px */
  --lecture-max: 46rem;        /* longueur de ligne confortable (.prose du site) */
  --carte-publique: 40rem;     /* carte centrée des pages client */
  --carte-publique-large: 49.625rem;  /* 210 mm : en-tête, carte et feuille du contrat alignés */
  --cible: 2.75rem;            /* cible tactile, 44 px */
  --ctl-h: 2.375rem;           /* 38 px : champs et boutons */
  --ctl-h-sm: 2rem;            /* 32 px */
  --ctl-h-xs: 1.625rem;        /* 26 px */
  --ctl-h-lg: 2.875rem;        /* 46 px */

  /* Rayons complémentaires (ceux du site restent la base) */
  --radius-3xs: 4px;           /* cases à cocher, anneau de focus (style.css:155) */
  --radius-2xs: 6px;           /* étiquettes, boutons xs, logo (style.css:510) */
  --radius-md: 12px;           /* cartes compactes, menus ; comme .btn--lg du site */
  --radius-hl: .16em;          /* surlignage .hl (style.css:320) */

  /* Profondeur */
  --z-collant: 10;
  --z-mtop: 20;
  --z-lot: 30;
  --z-bnav: 40;
  --z-menu: 50;
  --z-infobulle: 60;
  --z-toast: 80;
  --z-evitement: 200;          /* lien d’évitement, comme le site */
}

/* Sous 900 px, la barre latérale laisse place aux barres mobiles */
@media (max-width: 900px) {
  :root { --side: 0px; }
}

@media (pointer: coarse) {
  :root {
    --ctl-h: 2.75rem;
    --ctl-h-sm: 2.5rem;
    --ctl-h-xs: 2.25rem;         /* « Refus », « Demain », « ··· » : 36 px dessinés, 44 px de zone de clic */
    --ctl-h-lg: 3rem;
    --fs-champ: 1rem;
  }
}

/* 2.2 Thème clair (par défaut) -----------------------------------------------
   Les rôles de marque (--ink … --focus, ombres, trio d’autonomie) sont répétés
   à l’identique pour les îlots clairs posés dans une page sombre (feuille A4,
   par exemple) ; le test vérifie qu’ils égalent le bloc Marque. */
:root, [data-theme="clair"] {
  color-scheme: light;

  /* Rôles de marque (répétés, identiques au bloc 1) */
  --ink: #08120f;
  --ink-soft: #24332d;
  --text-2: #45524c;
  --muted: #56645e;
  --line: #e4e0d5;
  --line-strong: #d2ccbf;
  --focus: #2f8f68;
  --shadow-xs: 0 1px 2px rgb(8 18 15 / .05);
  --shadow-card: 0 1px 2px rgb(8 18 15 / .04), 0 18px 44px -26px rgb(7 61 45 / .28);
  --shadow-float: 0 2px 6px rgb(7 61 45 / .06), 0 34px 80px -34px rgb(7 61 45 / .40);
  --auto-bg: #e1f6ec;       --auto-fg: #0b5139;
  --validate-bg: #f8eed5;   --validate-fg: #6f4c0c;
  --human-bg: #e7ebe8;      --human-fg: #22312b;

  /* Surfaces */
  --bg: var(--ivory);                      /* fond de page */
  --surface: var(--paper);                 /* cartes, tableaux, champs, dialogues */
  --surface-2: var(--ivory-raised);        /* sous-surfaces : en-têtes de tableau, pieds */
  --surface-3: var(--ivory-sunk);          /* creux : colonnes du kanban, pistes */
  --side-bg: var(--ivory);
  --frost: var(--header-frost);            /* barres mobiles en verre dépoli */
  --hover: rgb(7 61 45 / .045);
  --press: rgb(7 61 45 / .08);
  --selected: var(--mint-soft);            /* ligne sélectionnée */
  --line-control: #838b84;                 /* contour des champs : 3:1 sur ivoire et papier */
  --line-control-hover: var(--muted);
  --overlay: rgb(5 42 31 / .34);
  --logo: var(--green);
  --scroll-thumb: rgb(8 18 15 / .2);
  --scroll-thumb-hover: rgb(8 18 15 / .34);

  /* Accent : vert profond en clair, menthe en sombre (règle du site) */
  --accent: var(--green);
  --accent-hover: var(--green-hover);
  --on-accent: var(--paper);
  --accent-soft: var(--mint-soft);
  --accent-soft-2: var(--mint-light);
  --accent-ink: var(--green);
  --accent-line: rgb(47 143 104 / .3);
  --lien: var(--green);
  --lien-trait: rgb(7 61 45 / .35);
  --halo-focus: rgb(47 143 104 / .2);

  /* Profondeur et matières */
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(7 61 45 / .18), 0 6px 14px -10px rgb(7 61 45 / .55);
  --shadow-btn-primary-lg: inset 0 1px 0 rgb(255 255 255 / .12), 0 10px 24px -14px rgb(7 61 45 / .7);  /* style.css:263, recette du site */
  --shadow-btn-primary-sm: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(7 61 45 / .2);   /* boutons de 38 px : sans traîne sous le bouton */
  --shadow-btn-mint: 0 12px 32px -14px rgb(168 235 203 / .8);
  --shadow-pop: 0 2px 6px rgb(7 61 45 / .08), 0 18px 44px -18px rgb(7 61 45 / .36);
  --shadow-bubble: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(7 61 45 / .04), 0 8px 22px -12px rgb(47 143 104 / .45);
  --shadow-hl: 0 0 .55em rgb(168 235 203 / .75);
  --shadow-monogram: inset 0 1px 1px rgb(255 255 255 / .9), inset 0 -8px 14px -8px rgb(7 61 45 / .3), 0 0 0 4px rgb(168 235 203 / .2), 0 10px 20px -12px rgb(7 61 45 / .5);
  --degrade-hl: linear-gradient(180deg, var(--mint-hl-from) 0%, var(--mint) 100%);
  --degrade-bulle: radial-gradient(circle at 32% 26%, var(--bubble-from) 0%, var(--mint-soft) 55%, var(--bubble-to) 100%);
  --degrade-monogram: radial-gradient(70% 55% at 30% 18%, rgb(255 255 255 / .92) 0%, rgb(255 255 255 / 0) 100%), radial-gradient(80% 80% at 82% 92%, rgb(47 143 104 / .3) 0%, rgb(47 143 104 / 0) 62%), linear-gradient(150deg, var(--mint-soft) 0%, var(--mint-light) 52%, var(--mint) 100%);
  --degrade-focus: linear-gradient(180deg, var(--mint-soft) 0%, var(--paper) 72%);
  --degrade-page: radial-gradient(64rem 30rem at 50% -8rem, rgb(168 235 203 / .32) 0%, rgb(168 235 203 / 0) 70%);
  --squelette: var(--ivory-sunk);
  --squelette-reflet: rgb(255 255 255 / .7);
  --badge-neutre-bg: rgb(8 18 15 / .05);   /* style.css:373, .badge--neutral */
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --tiret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");

  /* États : succès = famille « Automatique », attente = « Avec votre validation »,
     info = « Vous reprenez la main », erreur = brique (nouvelle : le site n’a pas de rouge) */
  --succes: var(--focus);
  --succes-bg: var(--auto-bg);
  --succes-ink: var(--auto-fg);
  --succes-line: rgb(47 143 104 / .32);
  --attente: #a8731a;
  --attente-bg: var(--validate-bg);
  --attente-ink: var(--validate-fg);
  --attente-line: rgb(168 115 26 / .32);
  --info: var(--text-2);
  --info-bg: var(--human-bg);
  --info-ink: var(--human-fg);
  --info-line: rgb(34 49 43 / .16);
  --erreur: #a33a2a;                       /* brique : 6,6:1 avec du blanc */
  --erreur-hover: #8a3022;
  --on-erreur: var(--paper);
  --erreur-bg: #f7e6e1;
  --erreur-ink: #852b1f;
  --erreur-line: rgb(163 58 42 / .3);

  /* Classes de prospect A / B */
  --cl-a-bg: var(--green);
  --cl-a-ink: var(--mint);
  --cl-b-bg: var(--mint-soft);
  --cl-b-ink: var(--green-ink);
  --cl-b-line: rgb(47 143 104 / .28);
  /* Classe C : la plus discrète des trois (A > B > C dans les deux thèmes) */
  --cl-c-bg: var(--surface-3);
  --cl-c-ink: var(--muted);
  --cl-c-line: var(--line-strong);

  /* Pastilles neutres (score, étiquettes, compteurs, signaux) : creux en clair, voile clair en sombre */
  --chip-bg: var(--surface-3);

  /* Point « Signé » des colonnes du pipeline : plein et cerclé, distinct de « RDV » */
  --st-signe-point: var(--green);
  --st-signe-halo: rgb(7 61 45 / .16);

  /* Statuts du pipeline (app/domaine.php) : point, fond, texte.
     Entonnoir = vert croissant ; action de Louis = ambre ; sorties = neutres ;
     refus et « ne pas contacter » = brique. */
  --st-fichier: #9aa19b;                --st-fichier-bg: transparent;            --st-fichier-ink: var(--muted);
  --st-nouveau: var(--text-2);          --st-nouveau-bg: var(--human-bg);        --st-nouveau-ink: var(--human-fg);
  --st-a_contacter: #c8922a;            --st-a_contacter-bg: var(--validate-bg); --st-a_contacter-ink: var(--validate-fg);
  --st-contacte: #8fd4b3;               --st-contacte-bg: #eef9f3;               --st-contacte-ink: var(--green-ink);
  --st-repondu: #4fbf8c;                --st-repondu-bg: var(--mint-soft);       --st-repondu-ink: var(--auto-fg);
  --st-rdv: var(--focus);               --st-rdv-bg: var(--mint-light);          --st-rdv-ink: var(--auto-fg);
  --st-proposition: var(--green-hover); --st-proposition-bg: var(--mint);        --st-proposition-ink: var(--green-deep);
  --st-signe: var(--mint);              --st-signe-bg: var(--green);             --st-signe-ink: var(--mint);
  --st-refus: #c65a44;                  --st-refus-bg: var(--erreur-bg);         --st-refus-ink: var(--erreur-ink);
  --st-ne_pas_contacter: var(--erreur); --st-ne_pas_contacter-bg: #f1d5cd;       --st-ne_pas_contacter-ink: #7d281c;
  --st-ecarte: #b3ab9c;                 --st-ecarte-bg: var(--ivory-sunk);       --st-ecarte-ink: var(--muted);
}

/* 2.3 Thème sombre « Forêt » ----------------------------------------------------
   Écran seulement : à l’impression, le thème clair s’applique toujours.
   Chaque jeton du thème clair est redéclaré ici (vérifié par test) : un îlot
   data-theme="sombre" fonctionne donc aussi dans une page claire. */
@media screen {
  [data-theme="sombre"] {
    color-scheme: dark;

    /* Rôles de marque recalés : textes de .theme-dark du site */
    --ink: #f3f7f2;
    --ink-soft: #d9e7df;
    --text-2: #d0e2d8;
    --muted: #b3cbbe;
    --line: rgb(255 255 255 / .12);
    --line-strong: rgb(255 255 255 / .22);
    --focus: var(--mint);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .32);
    --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 18px 44px -26px rgb(0 0 0 / .7);
    --shadow-float: 0 2px 6px rgb(0 0 0 / .32), 0 34px 80px -34px rgb(0 0 0 / .8);
    --auto-bg: rgb(168 235 203 / .14);       --auto-fg: var(--mint);
    --validate-bg: rgb(232 181 84 / .16);    --validate-fg: #f2d08e;
    --human-bg: rgb(255 255 255 / .08);      --human-fg: #d9e7df;

    /* Surfaces : forêt plus profonde que --green */
    --bg: #04211a;
    --surface: #072b21;
    --surface-2: #0b3327;
    --surface-3: #031b15;
    --side-bg: #04211a;
    --frost: rgb(4 33 26 / .86);
    --hover: rgb(255 255 255 / .05);
    --press: rgb(255 255 255 / .09);
    --selected: rgb(168 235 203 / .1);
    --line-control: rgb(255 255 255 / .38);
    --line-control-hover: rgb(255 255 255 / .56);
    --overlay: rgb(1 12 9 / .66);
    --logo: var(--ivory);
    --scroll-thumb: rgb(255 255 255 / .2);
    --scroll-thumb-hover: rgb(255 255 255 / .32);

    /* Accent : menthe, texte --green-deep dessus (.btn--mint du site) */
    --accent: var(--mint);
    --accent-hover: var(--mint-light);
    --on-accent: var(--green-deep);
    --accent-soft: rgb(168 235 203 / .12);
    --accent-soft-2: rgb(168 235 203 / .2);
    --accent-ink: var(--mint);
    --accent-line: rgb(168 235 203 / .3);
    --lien: var(--mint);
    --lien-trait: rgb(168 235 203 / .45);
    --halo-focus: rgb(168 235 203 / .22);

    /* Profondeur et matières */
    --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -12px rgb(168 235 203 / .5);
    --shadow-btn-primary-lg: inset 0 1px 0 rgb(255 255 255 / .35), 0 12px 32px -14px rgb(168 235 203 / .6);
    --shadow-btn-primary-sm: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .3);
    --shadow-btn-mint: 0 12px 32px -14px rgb(168 235 203 / .8);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / .35), 0 18px 44px -18px rgb(0 0 0 / .75);
    --shadow-bubble: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(168 235 203 / .12);
    --shadow-hl: 0 0 .55em rgb(168 235 203 / .35);
    --shadow-monogram: inset 0 1px 1px rgb(255 255 255 / .5), 0 0 0 4px rgb(168 235 203 / .12), 0 10px 20px -12px rgb(0 0 0 / .6);
    --degrade-hl: linear-gradient(180deg, var(--mint-hl-from) 0%, var(--mint) 100%);
    --degrade-bulle: linear-gradient(180deg, rgb(168 235 203 / .18) 0%, rgb(168 235 203 / .1) 100%);
    --degrade-monogram: linear-gradient(150deg, var(--mint-soft) 0%, var(--mint-light) 52%, var(--mint) 100%);
    --degrade-focus: linear-gradient(180deg, rgb(168 235 203 / .1) 0%, rgb(168 235 203 / 0) 72%);
    --degrade-page: radial-gradient(64rem 30rem at 50% -8rem, rgb(168 235 203 / .1) 0%, rgb(168 235 203 / 0) 70%);
    --squelette: rgb(255 255 255 / .06);
    --squelette-reflet: rgb(255 255 255 / .08);
    --badge-neutre-bg: rgb(255 255 255 / .1);
    --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a1f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --tiret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a1f' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");

    /* États */
    --succes: var(--mint);
    --succes-bg: rgb(168 235 203 / .12);
    --succes-ink: var(--mint);
    --succes-line: rgb(168 235 203 / .3);
    --attente: #e8b554;
    --attente-bg: rgb(232 181 84 / .14);
    --attente-ink: #f2d08e;
    --attente-line: rgb(232 181 84 / .32);
    --info: var(--muted);
    --info-bg: rgb(255 255 255 / .07);
    --info-ink: #d9e7df;
    --info-line: rgb(255 255 255 / .16);
    --erreur: #ec8b76;                       /* corail clair, texte foncé dessus */
    --erreur-hover: #f2a594;
    --on-erreur: #2b0c06;
    --erreur-bg: rgb(233 128 106 / .14);
    --erreur-ink: #f4b3a4;
    --erreur-line: rgb(233 128 106 / .34);

    /* Classes de prospect A / B */
    --cl-a-bg: var(--mint);
    --cl-a-ink: var(--green-deep);
    --cl-b-bg: rgb(168 235 203 / .14);
    --cl-b-ink: var(--mint);
    --cl-b-line: rgb(168 235 203 / .3);
    --cl-c-bg: rgb(255 255 255 / .03);
    --cl-c-ink: #8aa396;                     /* plus éteint que --muted : C reste sous B (5,2:1 sur carte) */
    --cl-c-line: rgb(255 255 255 / .16);

    /* Pastilles neutres : voile clair (le creux --surface-3 ferait un trou noir) */
    --chip-bg: rgb(255 255 255 / .07);

    /* Point « Signé » : menthe cerclée, distinct du point « RDV » (menthe pleine) */
    --st-signe-point: var(--mint);
    --st-signe-halo: rgb(168 235 203 / .3);

    /* Statuts */
    --st-fichier: #7e958a;                --st-fichier-bg: transparent;                 --st-fichier-ink: var(--muted);
    --st-nouveau: var(--muted);           --st-nouveau-bg: rgb(231 235 232 / .1);       --st-nouveau-ink: #d9e7df;
    --st-a_contacter: #e8b554;            --st-a_contacter-bg: rgb(232 181 84 / .16);   --st-a_contacter-ink: #f2d08e;
    --st-contacte: #5fbf94;               --st-contacte-bg: rgb(168 235 203 / .07);     --st-contacte-ink: var(--mint-light);
    --st-repondu: #7fd6ae;                --st-repondu-bg: rgb(168 235 203 / .12);      --st-repondu-ink: var(--mint-light);
    --st-rdv: var(--mint);                --st-rdv-bg: rgb(168 235 203 / .2);           --st-rdv-ink: var(--mint-soft);
    --st-proposition: var(--mint-light);  --st-proposition-bg: rgb(168 235 203 / .32);  --st-proposition-ink: #f3f7f2;
    --st-signe: var(--green-deep);        --st-signe-bg: var(--mint);                   --st-signe-ink: var(--green-deep);
    --st-refus: #e58a74;                  --st-refus-bg: rgb(233 128 106 / .14);        --st-refus-ink: #f4b3a4;
    --st-ne_pas_contacter: #f4b3a4;       --st-ne_pas_contacter-bg: rgb(233 128 106 / .24); --st-ne_pas_contacter-ink: #f8c9be;
    --st-ecarte: #7e958a;                 --st-ecarte-bg: rgb(255 255 255 / .06);       --st-ecarte-ink: var(--muted);
  }
}

/* 2.4 Thème automatique : suit le réglage du système (option explicite) ----------
   Mêmes déclarations que 2.3, recopiées (vérifié par test). */
@media screen and (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;

    /* Rôles de marque recalés : textes de .theme-dark du site */
    --ink: #f3f7f2;
    --ink-soft: #d9e7df;
    --text-2: #d0e2d8;
    --muted: #b3cbbe;
    --line: rgb(255 255 255 / .12);
    --line-strong: rgb(255 255 255 / .22);
    --focus: var(--mint);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .32);
    --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 18px 44px -26px rgb(0 0 0 / .7);
    --shadow-float: 0 2px 6px rgb(0 0 0 / .32), 0 34px 80px -34px rgb(0 0 0 / .8);
    --auto-bg: rgb(168 235 203 / .14);       --auto-fg: var(--mint);
    --validate-bg: rgb(232 181 84 / .16);    --validate-fg: #f2d08e;
    --human-bg: rgb(255 255 255 / .08);      --human-fg: #d9e7df;

    /* Surfaces : forêt plus profonde que --green */
    --bg: #04211a;
    --surface: #072b21;
    --surface-2: #0b3327;
    --surface-3: #031b15;
    --side-bg: #04211a;
    --frost: rgb(4 33 26 / .86);
    --hover: rgb(255 255 255 / .05);
    --press: rgb(255 255 255 / .09);
    --selected: rgb(168 235 203 / .1);
    --line-control: rgb(255 255 255 / .38);
    --line-control-hover: rgb(255 255 255 / .56);
    --overlay: rgb(1 12 9 / .66);
    --logo: var(--ivory);
    --scroll-thumb: rgb(255 255 255 / .2);
    --scroll-thumb-hover: rgb(255 255 255 / .32);

    /* Accent : menthe, texte --green-deep dessus (.btn--mint du site) */
    --accent: var(--mint);
    --accent-hover: var(--mint-light);
    --on-accent: var(--green-deep);
    --accent-soft: rgb(168 235 203 / .12);
    --accent-soft-2: rgb(168 235 203 / .2);
    --accent-ink: var(--mint);
    --accent-line: rgb(168 235 203 / .3);
    --lien: var(--mint);
    --lien-trait: rgb(168 235 203 / .45);
    --halo-focus: rgb(168 235 203 / .22);

    /* Profondeur et matières */
    --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -12px rgb(168 235 203 / .5);
    --shadow-btn-primary-lg: inset 0 1px 0 rgb(255 255 255 / .35), 0 12px 32px -14px rgb(168 235 203 / .6);
    --shadow-btn-primary-sm: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .3);
    --shadow-btn-mint: 0 12px 32px -14px rgb(168 235 203 / .8);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / .35), 0 18px 44px -18px rgb(0 0 0 / .75);
    --shadow-bubble: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(168 235 203 / .12);
    --shadow-hl: 0 0 .55em rgb(168 235 203 / .35);
    --shadow-monogram: inset 0 1px 1px rgb(255 255 255 / .5), 0 0 0 4px rgb(168 235 203 / .12), 0 10px 20px -12px rgb(0 0 0 / .6);
    --degrade-hl: linear-gradient(180deg, var(--mint-hl-from) 0%, var(--mint) 100%);
    --degrade-bulle: linear-gradient(180deg, rgb(168 235 203 / .18) 0%, rgb(168 235 203 / .1) 100%);
    --degrade-monogram: linear-gradient(150deg, var(--mint-soft) 0%, var(--mint-light) 52%, var(--mint) 100%);
    --degrade-focus: linear-gradient(180deg, rgb(168 235 203 / .1) 0%, rgb(168 235 203 / 0) 72%);
    --degrade-page: radial-gradient(64rem 30rem at 50% -8rem, rgb(168 235 203 / .1) 0%, rgb(168 235 203 / 0) 70%);
    --squelette: rgb(255 255 255 / .06);
    --squelette-reflet: rgb(255 255 255 / .08);
    --badge-neutre-bg: rgb(255 255 255 / .1);
    --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a1f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --tiret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a1f' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");

    /* États */
    --succes: var(--mint);
    --succes-bg: rgb(168 235 203 / .12);
    --succes-ink: var(--mint);
    --succes-line: rgb(168 235 203 / .3);
    --attente: #e8b554;
    --attente-bg: rgb(232 181 84 / .14);
    --attente-ink: #f2d08e;
    --attente-line: rgb(232 181 84 / .32);
    --info: var(--muted);
    --info-bg: rgb(255 255 255 / .07);
    --info-ink: #d9e7df;
    --info-line: rgb(255 255 255 / .16);
    --erreur: #ec8b76;                       /* corail clair, texte foncé dessus */
    --erreur-hover: #f2a594;
    --on-erreur: #2b0c06;
    --erreur-bg: rgb(233 128 106 / .14);
    --erreur-ink: #f4b3a4;
    --erreur-line: rgb(233 128 106 / .34);

    /* Classes de prospect A / B */
    --cl-a-bg: var(--mint);
    --cl-a-ink: var(--green-deep);
    --cl-b-bg: rgb(168 235 203 / .14);
    --cl-b-ink: var(--mint);
    --cl-b-line: rgb(168 235 203 / .3);
    --cl-c-bg: rgb(255 255 255 / .03);
    --cl-c-ink: #8aa396;                     /* plus éteint que --muted : C reste sous B (5,2:1 sur carte) */
    --cl-c-line: rgb(255 255 255 / .16);

    /* Pastilles neutres : voile clair (le creux --surface-3 ferait un trou noir) */
    --chip-bg: rgb(255 255 255 / .07);

    /* Point « Signé » : menthe cerclée, distinct du point « RDV » (menthe pleine) */
    --st-signe-point: var(--mint);
    --st-signe-halo: rgb(168 235 203 / .3);

    /* Statuts */
    --st-fichier: #7e958a;                --st-fichier-bg: transparent;                 --st-fichier-ink: var(--muted);
    --st-nouveau: var(--muted);           --st-nouveau-bg: rgb(231 235 232 / .1);       --st-nouveau-ink: #d9e7df;
    --st-a_contacter: #e8b554;            --st-a_contacter-bg: rgb(232 181 84 / .16);   --st-a_contacter-ink: #f2d08e;
    --st-contacte: #5fbf94;               --st-contacte-bg: rgb(168 235 203 / .07);     --st-contacte-ink: var(--mint-light);
    --st-repondu: #7fd6ae;                --st-repondu-bg: rgb(168 235 203 / .12);      --st-repondu-ink: var(--mint-light);
    --st-rdv: var(--mint);                --st-rdv-bg: rgb(168 235 203 / .2);           --st-rdv-ink: var(--mint-soft);
    --st-proposition: var(--mint-light);  --st-proposition-bg: rgb(168 235 203 / .32);  --st-proposition-ink: #f3f7f2;
    --st-signe: var(--green-deep);        --st-signe-bg: var(--mint);                   --st-signe-ink: var(--green-deep);
    --st-refus: #e58a74;                  --st-refus-bg: rgb(233 128 106 / .14);        --st-refus-ink: #f4b3a4;
    --st-ne_pas_contacter: #f4b3a4;       --st-ne_pas_contacter-bg: rgb(233 128 106 / .24); --st-ne_pas_contacter-ink: #f8c9be;
    --st-ecarte: #7e958a;                 --st-ecarte-bg: rgb(255 255 255 / .06);       --st-ecarte-ink: var(--muted);
  }
}

/* 2.5 Îlots sombres ---------------------------------------------------------------
   Bandeaux verts du site (.theme-dark, bloc 1) et surfaces flottantes de
   l’outil : barre d’actions groupées, notifications, infobulles. Même vert
   dans les deux thèmes ; l’action principale y devient menthe (règle du site). */
.theme-dark, .ilot-sombre, .lot, .toast, .tip {
  color-scheme: dark;
  --ink: #f3f7f2;
  --ink-soft: #d9e7df;
  --text-2: #d0e2d8;
  --muted: #b3cbbe;
  --line: rgb(255 255 255 / .14);
  --line-strong: rgb(255 255 255 / .26);
  --focus: var(--mint);
  --bg: var(--green);
  --surface: rgb(255 255 255 / .06);
  --surface-2: rgb(255 255 255 / .09);
  --surface-3: rgb(0 0 0 / .16);
  --hover: rgb(255 255 255 / .08);
  --press: rgb(255 255 255 / .14);
  --selected: rgb(168 235 203 / .14);
  --line-control: rgb(255 255 255 / .42);
  --line-control-hover: rgb(255 255 255 / .6);
  --logo: var(--ivory);
  --scroll-thumb: rgb(255 255 255 / .25);
  --scroll-thumb-hover: rgb(255 255 255 / .4);
  --accent: var(--mint);
  --accent-hover: var(--mint-light);
  --on-accent: var(--green-deep);
  --accent-soft: rgb(168 235 203 / .14);
  --accent-soft-2: rgb(168 235 203 / .22);
  --accent-ink: var(--mint);
  --accent-line: rgb(168 235 203 / .32);
  --lien: var(--mint);
  --lien-trait: rgb(168 235 203 / .5);
  --halo-focus: rgb(168 235 203 / .25);
  --shadow-btn-primary: 0 6px 16px -12px rgb(168 235 203 / .5);
  --shadow-btn-primary-lg: var(--shadow-btn-mint);
  --badge-neutre-bg: rgb(255 255 255 / .1);
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a1f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --tiret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a1f' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  --succes: var(--mint);
  --succes-ink: var(--mint);
  --erreur-ink: #f4b3a4;
}