@starterlib/tokens 0.8.0 → 0.9.0

package/styles/starter-tokens.css

@@ -2,19 +2,26 @@
    Regenerer : pnpm tokens:css */
 
 /* Reglages de composant, a poser par l'application la ou elle veut :
-     --st-commande-hauteur (defaut : var(--st-cible-tactile-min))
+     --st-commande-hauteur (defaut : var(--st-hauteur-commande-defaut))
      --st-commande-rayon (defaut : var(--st-rayon-md))
      --st-surface-rayon (defaut : var(--st-rayon-md))
-     --st-tableau-cellule-bloc (defaut : var(--st-espacement-3))
-     --st-tableau-cellule-ligne (defaut : var(--st-espacement-3))
-     --st-tableau-largeur-case (defaut : 3rem)
-     --st-calendrier-jour-taille (defaut : var(--st-cible-tactile-min))
-     --st-anim-chargement (defaut : une duree propre a chaque indicateur)
-     --st-anim-respiration (defaut : 1600ms)
+     --st-carte-rayon (defaut : var(--st-rayon-lg))
+     --st-tableau-cellule-bloc (defaut : var(--st-espacement-0))
+     --st-tableau-cellule-ligne (defaut : calc(var(--st-densite-cellule-ligne) + var(--st-espacement-1)))
+     --st-tableau-largeur-case (defaut : var(--st-espacement-12))
+     --st-calendrier-jour-taille (defaut : var(--st-calendrier-jour-defaut))
+     --st-anim-chargement (defaut : var(--st-cadence-vive) ou var(--st-cadence-normale))
+     --st-anim-respiration (defaut : var(--st-cadence-respiration))
+     --st-coquille-largeur-navigation (defaut : var(--st-largeur-navigation))
+     --st-separateur-marge (defaut : var(--st-espacement-4))
+     --st-champ-largeur-libelle (defaut : var(--st-largeur-champ-md))
+     --st-liste-hauteur-max (defaut : 18rem)
    Voir le README de @starterlib/tokens. */
 
 :root {
   color-scheme: light;
+  --st-affichage-si-clair: inline;
+  --st-affichage-si-sombre: none;
   --st-espacement-0: 0;
   --st-espacement-1: 0.25rem;
   --st-espacement-2: 0.5rem;
@@ -28,6 +35,10 @@
   --st-espacement-16: 4rem;
   --st-espacement-20: 5rem;
   --st-espacement-24: 6rem;
+  --st-espacement-demi: 0.125rem;
+  --st-espacement-1-5: 0.375rem;
+  --st-espacement-2-5: 0.625rem;
+  --st-espacement-3-5: 0.875rem;
   --st-rayon-none: 0;
   --st-rayon-xs: 0.125rem;
   --st-rayon-sm: 0.25rem;
@@ -35,165 +46,298 @@
   --st-rayon-lg: 0.75rem;
   --st-rayon-xl: 1rem;
   --st-rayon-pleine: 9999px;
-  --st-ombre-none: none;
-  --st-ombre-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
-  --st-ombre-md: 0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06);
-  --st-ombre-lg: 0 8px 20px -4px rgb(0 0 0 / 0.12), 0 3px 8px -3px rgb(0 0 0 / 0.07);
-  --st-ombre-xl: 0 20px 40px -8px rgb(0 0 0 / 0.16);
   --st-duree-instantane: 0ms;
   --st-duree-rapide: 120ms;
   --st-duree-normale: 200ms;
   --st-duree-lente: 320ms;
+  --st-duree-longue: 480ms;
   --st-courbe-standard: cubic-bezier(0.2, 0, 0, 1);
   --st-courbe-entrant: cubic-bezier(0, 0, 0, 1);
   --st-courbe-sortant: cubic-bezier(0.3, 0, 1, 1);
+  --st-deplacement-court: 0.25rem;
+  --st-deplacement-moyen: 0.5rem;
+  --st-deplacement-long: 1rem;
+  --st-cadence-vive: 900ms;
+  --st-cadence-normale: 1400ms;
+  --st-cadence-respiration: 1600ms;
+  --st-cadence-min: 600ms;
   --st-plan-base: 0;
-  --st-plan-contenuEleve: 10;
+  --st-plan-contenu-eleve: 10;
   --st-plan-entete: 100;
-  --st-plan-tiroir: 200;
   --st-plan-superposition: 300;
-  --st-plan-dialogue: 400;
-  --st-plan-infobulle: 500;
   --st-plan-notification: 600;
-  --st-rupture-sm: 480px;
-  --st-rupture-md: 768px;
-  --st-rupture-lg: 1024px;
-  --st-rupture-xl: 1280px;
-  --st-rupture-2xl: 1536px;
-  --st-police-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --st-police-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --st-plan-evitement: 700;
+  --st-police-base: 'Inter Variable', 'Inter Repli', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --st-police-mono: 'JetBrains Mono Variable', 'JetBrains Mono Repli', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --st-taille-2xs: 0.6875rem;
   --st-taille-xs: 0.75rem;
   --st-taille-sm: 0.875rem;
   --st-taille-md: 1rem;
   --st-taille-lg: 1.125rem;
   --st-taille-xl: 1.25rem;
   --st-taille-2xl: 1.5rem;
-  --st-taille-3xl: 1.875rem;
-  --st-taille-4xl: 2.25rem;
+  --st-taille-3xl: 2rem;
+  --st-taille-4xl: 2.5rem;
+  --st-taille-5xl: 3rem;
+  --st-taille-6xl: 3.5rem;
+  --st-interligne-2xs: 0.875rem;
+  --st-interligne-xs: 1rem;
+  --st-interligne-sm: 1.25rem;
+  --st-interligne-md: 1.5rem;
+  --st-interligne-lg: 1.75rem;
+  --st-interligne-xl: 1.75rem;
+  --st-interligne-2xl: 2rem;
+  --st-interligne-3xl: 2.5rem;
+  --st-interligne-4xl: 3rem;
+  --st-interligne-5xl: 3.5rem;
+  --st-interligne-6xl: 4rem;
   --st-graisse-normale: 400;
   --st-graisse-moyenne: 500;
   --st-graisse-semi: 600;
   --st-graisse-grasse: 700;
-  --st-interligne-serre: 1.25;
-  --st-interligne-normal: 1.5;
-  --st-interligne-large: 1.75;
+  --st-interlettrage-serre: -0.01em;
+  --st-interlettrage-normal: normal;
+  --st-interlettrage-large: 0.02em;
+  --st-interlettrage-capitales: 0.05em;
+  --st-interlettrage-etiquette: 0.04em;
+  --st-interlettrage-surtitre: 0.1em;
+  --st-approche-lg: -0.005em;
+  --st-approche-xl: -0.01em;
+  --st-approche-2xl: -0.015em;
+  --st-approche-3xl: -0.02em;
+  --st-approche-4xl: -0.025em;
+  --st-approche-6xl: -0.03em;
+  --st-chiffres-alignes: tabular-nums lining-nums;
+  --st-chiffres-references: tabular-nums lining-nums slashed-zero;
   --st-epaisseur-fine: 1px;
+  --st-epaisseur-intermediaire: 1.5px;
   --st-epaisseur-moyenne: 2px;
   --st-epaisseur-forte: 3px;
-  --st-mesure-etroite: 45ch;
-  --st-mesure-normale: 70ch;
+  --st-epaisseur-epaisse: 4px;
+  --st-epaisseur-capillaire: 1px;
+  --st-largeur-etroite: 45ch;
+  --st-largeur-normale: 70ch;
+  --st-largeur-page: 90rem;
+  --st-largeur-navigation: 16rem;
+  --st-largeur-rail: 4.5rem;
+  --st-largeur-carte-auth: 28.125rem;
+  --st-largeur-dialogue-sm: 24rem;
+  --st-largeur-dialogue-md: 32rem;
+  --st-largeur-dialogue-lg: 48rem;
+  --st-largeur-tiroir: 28rem;
+  --st-largeur-menu: 12rem;
+  --st-largeur-couche: 28rem;
+  --st-largeur-champ-sm: 8rem;
+  --st-largeur-champ-md: 12rem;
+  --st-largeur-champ-lg: 16rem;
+  --st-largeur-colonne: 18rem;
+  --st-hauteur-commande-sm: 2rem;
+  --st-hauteur-commande-md: 2.25rem;
+  --st-hauteur-commande-lg: 2.5rem;
+  --st-hauteur-commande-xl: 2.75rem;
+  --st-hauteur-commande-2xl: 3.25rem;
+  --st-focus-epaisseur: var(--st-epaisseur-moyenne);
+  --st-focus-decalage: var(--st-epaisseur-moyenne);
+  --st-focus-lisere: var(--st-epaisseur-moyenne);
   --st-cible-tactile-min: 44px;
   --st-cible-min: 24px;
-  --st-couleur-fond: #f7f8fa;
-  --st-couleur-surface: #ffffff;
-  --st-couleur-surface-elevee: #ffffff;
-  --st-couleur-surface-enfoncee: #eef1f5;
-  --st-couleur-surface-survol: #eef1f5;
-  --st-couleur-texte: #141920;
-  --st-couleur-texte-discret: #4d5868;
-  --st-couleur-texte-desactive: #94a1b2;
-  --st-couleur-texte-inverse: #ffffff;
-  --st-couleur-bordure: #dde2e9;
-  --st-couleur-bordure-forte: #6b7889;
-  --st-couleur-anneau-focus: #255eeb;
-  --st-couleur-primaire: #1d4ed8;
-  --st-couleur-primaire-survol: #1e40af;
-  --st-couleur-sur-primaire: #ffffff;
-  --st-couleur-primaire-discret: #eff5ff;
-  --st-couleur-sur-primaire-discret: #1e3a8a;
-  --st-couleur-succes: #15803d;
-  --st-couleur-sur-succes: #ffffff;
-  --st-couleur-succes-discret: #d7f5e3;
-  --st-couleur-sur-succes-discret: #0a3d1e;
-  --st-couleur-avertissement: #a16207;
-  --st-couleur-sur-avertissement: #ffffff;
-  --st-couleur-avertissement-discret: #fdf0d5;
-  --st-couleur-sur-avertissement-discret: #432a06;
-  --st-couleur-danger: #b91c1c;
-  --st-couleur-danger-survol: #991b1b;
-  --st-couleur-sur-danger: #ffffff;
-  --st-couleur-danger-discret: #fde2e2;
-  --st-couleur-sur-danger-discret: #4c1010;
-}
-
-:root[data-theme='sombre'] {
-  color-scheme: dark;
-  --st-couleur-fond: #0b0e13;
-  --st-couleur-surface: #141920;
-  --st-couleur-surface-elevee: #232a34;
-  --st-couleur-surface-enfoncee: #0b0e13;
-  --st-couleur-surface-survol: #232a34;
-  --st-couleur-texte: #eef1f5;
-  --st-couleur-texte-discret: #c3ccd7;
-  --st-couleur-texte-desactive: #6b7889;
-  --st-couleur-texte-inverse: #0b0e13;
-  --st-couleur-bordure: #39414e;
-  --st-couleur-bordure-forte: #6b7889;
-  --st-couleur-anneau-focus: #93bbfd;
-  --st-couleur-primaire: #93bbfd;
-  --st-couleur-primaire-survol: #bfd6fe;
-  --st-couleur-sur-primaire: #0b0e13;
-  --st-couleur-primaire-discret: #1e3a8a;
-  --st-couleur-sur-primaire-discret: #dbe8fe;
-  --st-couleur-succes: #7fd6a4;
-  --st-couleur-sur-succes: #0b0e13;
-  --st-couleur-succes-discret: #0a3d1e;
-  --st-couleur-sur-succes-discret: #d7f5e3;
-  --st-couleur-avertissement: #f3c969;
-  --st-couleur-sur-avertissement: #0b0e13;
-  --st-couleur-avertissement-discret: #432a06;
-  --st-couleur-sur-avertissement-discret: #fdf0d5;
-  --st-couleur-danger: #f3a3a3;
-  --st-couleur-danger-survol: #fde2e2;
-  --st-couleur-sur-danger: #0b0e13;
-  --st-couleur-danger-discret: #4c1010;
-  --st-couleur-sur-danger-discret: #fde2e2;
+  --st-couleur-fond: light-dark(#f8f9ff, #070d14);
+  --st-couleur-surface: light-dark(#ffffff, #151b23);
+  --st-couleur-surface-elevee: light-dark(#ffffff, #2b3139);
+  --st-couleur-surface-enfoncee: light-dark(#e9eefa, #070d14);
+  --st-couleur-surface-conteneur-bas: light-dark(#eff4ff, #0e141c);
+  --st-couleur-surface-conteneur-haut: light-dark(#e3e8f4, #323941);
+  --st-couleur-surface-survol: light-dark(#e9eefa, #2b3139);
+  --st-couleur-surface-survol-elevee: light-dark(#e9eefa, #383f49);
+  --st-couleur-surface-courante-elevee: light-dark(#e9eefa, #4f565e);
+  --st-couleur-surface-active: light-dark(#dde3ee, #424851);
+  --st-couleur-surface-selection: light-dark(#f0f5fe, #08245b);
+  --st-couleur-surface-inverse: light-dark(#161c24, #f2f4f6);
+  --st-couleur-surface-marque: light-dark(#041434, #151b23);
+  --st-couleur-texte: light-dark(#161c24, #f2f4f6);
+  --st-couleur-texte-discret: light-dark(#434652, #bdc1c7);
+  --st-couleur-texte-attenue: light-dark(#656874, #9da2a8);
+  --st-couleur-texte-desactive: light-dark(#9da2a8, #7e848b);
+  --st-couleur-texte-inverse: light-dark(#ffffff, #070d14);
+  --st-couleur-texte-primaire: light-dark(#003181, #9ebef8);
+  --st-couleur-texte-sur-marque: light-dark(#ffffff, #f2f4f6);
+  --st-couleur-texte-sur-marque-discret: light-dark(#c5d8fb, #bdc1c7);
+  --st-couleur-bordure: light-dark(#d7dadf, #4f565e);
+  --st-couleur-bordure-forte: #7e848b;
+  --st-couleur-bordure-selection: light-dark(#1948a5, #9ebef8);
+  --st-couleur-anneau-focus: light-dark(#235bc8, #c5d8fb);
+  --st-couleur-lisere-focus: light-dark(#ffffff, #151b23);
+  --st-couleur-selection: light-dark(#c5d8fb, #113781);
+  --st-couleur-sur-selection: light-dark(#070d14, #ffffff);
+  --st-couleur-primaire: light-dark(#003181, #9ebef8);
+  --st-couleur-primaire-survol: light-dark(#1948a5, #c5d8fb);
+  --st-couleur-primaire-actif: light-dark(#08245b, #e0eafc);
+  --st-couleur-sur-primaire: light-dark(#ffffff, #070d14);
+  --st-couleur-primaire-discret: light-dark(#f0f5fe, #08245b);
+  --st-couleur-sur-primaire-discret: light-dark(#08245b, #e0eafc);
+  --st-couleur-primaire-attenue: light-dark(#dae2ff, #113781);
+  --st-couleur-sur-primaire-attenue: light-dark(#001848, #e0eafc);
+  --st-couleur-accent: light-dark(#7d5e0d, #ccbc9a);
+  --st-couleur-accent-survol: light-dark(#654b04, #e0d6c3);
+  --st-couleur-sur-accent: light-dark(#ffffff, #070d14);
+  --st-couleur-accent-discret: light-dark(#eee9df, #362600);
+  --st-couleur-sur-accent-discret: light-dark(#362600, #eee9df);
+  --st-couleur-information: light-dark(#156c90, #a0c4d7);
+  --st-couleur-sur-information: light-dark(#ffffff, #070d14);
+  --st-couleur-information-discret: light-dark(#f1f6f9, #022d3f);
+  --st-couleur-sur-information-discret: light-dark(#022d3f, #e1ebf2);
+  --st-couleur-succes: light-dark(#12773d, #a0caaa);
+  --st-couleur-sur-succes: light-dark(#ffffff, #070d14);
+  --st-couleur-succes-discret: light-dark(#f1f7f2, #013316);
+  --st-couleur-sur-succes-discret: light-dark(#013316, #e1ede3);
+  --st-couleur-avertissement: light-dark(#995515, #dbb59a);
+  --st-couleur-sur-avertissement: light-dark(#ffffff, #070d14);
+  --st-couleur-avertissement-discret: light-dark(#f9f4f0, #401f00);
+  --st-couleur-sur-avertissement-discret: light-dark(#401f00, #f3e7df);
+  --st-couleur-danger: light-dark(#b71824, #f5a69f);
+  --st-couleur-danger-survol: light-dark(#960c19, #facac5);
+  --st-couleur-danger-actif: light-dark(#760711, #fce3e0);
+  --st-couleur-sur-danger: light-dark(#ffffff, #070d14);
+  --st-couleur-danger-discret: light-dark(#fef2f1, #530208);
+  --st-couleur-sur-danger-discret: light-dark(#530208, #fce3e0);
+  --st-couleur-danger-discret-courant: light-dark(#fce3e0, #300304);
+  --st-couleur-positif: light-dark(#005a2b, #a0caaa);
+  --st-couleur-negatif: light-dark(#161c24, #f2f4f6);
+  --st-ombre-none: none;
+  --st-ombre-repos: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --st-ombre-survol: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --st-ombre-surelevee: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --st-ombre-flottante: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --st-ombre-modale: 0 16px 32px -8px light-dark(rgb(7 13 20 / 0.14), rgb(0 0 0 / 0.48)), 0 32px 64px -16px light-dark(rgb(7 13 20 / 0.2), rgb(0 0 0 / 0.56));
+  --st-voile: light-dark(rgb(7 13 20 / 0.48), rgb(0 0 0 / 0.64));
+  --st-couleur-ombre: light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6));
+  --st-hauteur-commande-defaut: var(--st-hauteur-commande-xl);
+  --st-densite-cellule-bloc: var(--st-espacement-3);
+  --st-densite-cellule-ligne: var(--st-espacement-3);
+  --st-densite-texte-taille: var(--st-taille-md);
+  --st-densite-texte-interligne: var(--st-interligne-md);
+  --st-densite-ligne: var(--st-hauteur-commande-2xl);
+  --st-calendrier-jour-defaut: var(--st-hauteur-commande-xl);
 }
 
+/* Theme : la preference du systeme, puis l'attribut, qui l'emporte dans les deux
+   sens. Sur la racine comme sur un conteneur : un ilot [data-theme] rend ses
+   descendants dans son theme. */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='clair']) {
+  :root {
     color-scheme: dark;
-    --st-couleur-fond: #0b0e13;
-    --st-couleur-surface: #141920;
-    --st-couleur-surface-elevee: #232a34;
-    --st-couleur-surface-enfoncee: #0b0e13;
-    --st-couleur-surface-survol: #232a34;
-    --st-couleur-texte: #eef1f5;
-    --st-couleur-texte-discret: #c3ccd7;
-    --st-couleur-texte-desactive: #6b7889;
-    --st-couleur-texte-inverse: #0b0e13;
-    --st-couleur-bordure: #39414e;
-    --st-couleur-bordure-forte: #6b7889;
-    --st-couleur-anneau-focus: #93bbfd;
-    --st-couleur-primaire: #93bbfd;
-    --st-couleur-primaire-survol: #bfd6fe;
-    --st-couleur-sur-primaire: #0b0e13;
-    --st-couleur-primaire-discret: #1e3a8a;
-    --st-couleur-sur-primaire-discret: #dbe8fe;
-    --st-couleur-succes: #7fd6a4;
-    --st-couleur-sur-succes: #0b0e13;
-    --st-couleur-succes-discret: #0a3d1e;
-    --st-couleur-sur-succes-discret: #d7f5e3;
-    --st-couleur-avertissement: #f3c969;
-    --st-couleur-sur-avertissement: #0b0e13;
-    --st-couleur-avertissement-discret: #432a06;
-    --st-couleur-sur-avertissement-discret: #fdf0d5;
-    --st-couleur-danger: #f3a3a3;
-    --st-couleur-danger-survol: #fde2e2;
-    --st-couleur-sur-danger: #0b0e13;
-    --st-couleur-danger-discret: #4c1010;
-    --st-couleur-sur-danger-discret: #fde2e2;
+    --st-affichage-si-clair: none;
+    --st-affichage-si-sombre: inline;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
+[data-theme='sombre'] {
+  color-scheme: dark;
+  --st-affichage-si-clair: none;
+  --st-affichage-si-sombre: inline;
+}
+
+[data-theme='clair'] {
+  color-scheme: light;
+  --st-affichage-si-clair: inline;
+  --st-affichage-si-sombre: none;
+}
+
+/* Un ilot re-pose la couleur du texte : `color` s'herite RESOLUE, et le texte d'un
+   ilot sombre heriterait sinon l'encre claire de la page. */
+:where([data-theme]):not(:root) {
+  color: var(--st-couleur-texte);
+}
+
+::selection {
+  color: var(--st-couleur-sur-selection);
+  background: var(--st-couleur-selection);
+}
+
+/* Densite : un MODE, sur la racine ou sur une zone. Aucune densite ne descend
+   sous la cible tactile sur un ecran tactile. */
+[data-densite='confortable'] {
+  --st-hauteur-commande-defaut: var(--st-hauteur-commande-xl);
+  --st-densite-cellule-bloc: var(--st-espacement-3);
+  --st-densite-cellule-ligne: var(--st-espacement-3);
+  --st-densite-texte-taille: var(--st-taille-md);
+  --st-densite-texte-interligne: var(--st-interligne-md);
+  --st-densite-ligne: var(--st-hauteur-commande-2xl);
+  --st-calendrier-jour-defaut: var(--st-hauteur-commande-xl);
+}
+
+[data-densite='dense'] {
+  --st-hauteur-commande-defaut: var(--st-hauteur-commande-md);
+  --st-densite-cellule-bloc: var(--st-espacement-2);
+  --st-densite-cellule-ligne: var(--st-espacement-3);
+  --st-densite-texte-taille: var(--st-taille-sm);
+  --st-densite-texte-interligne: var(--st-interligne-sm);
+  --st-densite-ligne: var(--st-hauteur-commande-xl);
+  --st-calendrier-jour-defaut: var(--st-hauteur-commande-md);
+}
+
+[data-densite='compacte'] {
+  --st-hauteur-commande-defaut: var(--st-hauteur-commande-sm);
+  --st-densite-cellule-bloc: var(--st-espacement-1);
+  --st-densite-cellule-ligne: var(--st-espacement-2);
+  --st-densite-texte-taille: var(--st-taille-xs);
+  --st-densite-texte-interligne: var(--st-interligne-xs);
+  --st-densite-ligne: var(--st-hauteur-commande-md);
+  --st-calendrier-jour-defaut: var(--st-hauteur-commande-sm);
+}
+
+@media (pointer: coarse) {
+  :root,
+  [data-densite] {
+    --st-hauteur-commande-defaut: var(--st-hauteur-commande-xl);
+    --st-calendrier-jour-defaut: var(--st-cible-tactile-min);
+  }
+}
+
+/* Un filet d'un vrai pixel d'ecran sur les dalles haute densite. */
+@media (min-resolution: 2dppx) {
   :root {
+    --st-epaisseur-capillaire: 0.5px;
+  }
+}
+
+/* Mouvement reduit (01 §6, 03 P5) : la preference du systeme, sauf quand la
+   personne a choisi le mouvement complet (data-mouvement sur <html>, pose par
+   StMouvement) ; puis l'attribut, qui l'impose — sur la racine ou sur une zone.
+   Durees et deplacements a zero ; les cadences restent, un indicateur d'attente
+   ne se fige jamais. `:where(:root)` : la regle pese (0,1,0), comme les autres. */
+@media (prefers-reduced-motion: reduce) {
+  :where(:root):not([data-mouvement='complet']) {
     --st-duree-rapide: 0ms;
     --st-duree-normale: 0ms;
     --st-duree-lente: 0ms;
+    --st-duree-longue: 0ms;
+    --st-deplacement-court: 0rem;
+    --st-deplacement-moyen: 0rem;
+    --st-deplacement-long: 0rem;
   }
 }
 
+[data-mouvement='reduit'] {
+  --st-duree-rapide: 0ms;
+  --st-duree-normale: 0ms;
+  --st-duree-lente: 0ms;
+  --st-duree-longue: 0ms;
+  --st-deplacement-court: 0rem;
+  --st-deplacement-moyen: 0rem;
+  --st-deplacement-long: 0rem;
+}
+
+/* Gel d'une image : au changement de theme ou de langue, rien ne transite le temps
+   d'un rendu (StTheme et StLangue posent data-gel sur <html>). Place apres le
+   mouvement : un mouvement complet choisi ne leve pas le gel. */
+[data-gel] {
+  --st-duree-rapide: 0ms;
+  --st-duree-normale: 0ms;
+  --st-duree-lente: 0ms;
+  --st-duree-longue: 0ms;
+}
+
 /* WCAG 2.4.11 : un arret de tabulation ne remonte jamais sous l'en-tete collant.
    `--st-hauteur-entete` est posee sur <html> par st-app-shell, qui mesure
    son en-tete ; sans coquille, le repli vaut zero et rien ne change. */
@@ -201,52 +345,200 @@ html {
   scroll-padding-block-start: var(--st-hauteur-entete, 0px);
 }
 
-/* Contraste renforce : le filet decoratif devient un filet fort, et le texte
-   discret redevient du texte. Les deux jetons restent des ALIAS du theme
-   courant, clair ou sombre. */
+/* Rythme vertical d'un formulaire, porte par le CONTENEUR (lot 200) : les champs du
+   socle n'ont plus de marge externe, pour qu'un champ pose dans une ligne de
+   reglage ou un popover ne traine pas 20 px qu'il n'a pas choisis. */
+.st-formulaire {
+  display: grid;
+  gap: var(--st-espacement-5);
+}
+
+/* Texte pour les seuls lecteurs d'ecran (« , 5 non lus » d'un lien de navigation) : la classe
+   est PUBLIEE ici, dans la feuille que l'hote charge deja. Emise dans la portee emulee de chaque
+   composant, elle n'atteignait jamais un element ecrit dans le gabarit de l'APPELANT, dont le
+   texte s'affichait en clair (constats A1099, A1082, lot 156). `.st-vh-focalisable` : masquee
+   tant qu'elle ne contient pas le focus (un lien d'evitement) ; `:where()` garde le poids d'une
+   classe, comme toute la feuille. */
+.st-vh,
+.st-vh-focalisable:where(:not(:focus-within)) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Contrat avec le CDK : ses surfaces (menus, popovers, infobulles, tiroirs,
+   dialogues) s'empilent par l'ordre du DOM dans ce conteneur, qui lit le plan. */
+.cdk-overlay-container {
+  z-index: var(--st-plan-superposition);
+}
+
+/* Contraste renforce : alias du theme courant, clair ou sombre (01 §7.1). */
 @media (prefers-contrast: more) {
-  :root[data-theme],
-  :root:not([data-theme]) {
-    --st-couleur-bordure: var(--st-couleur-bordure-forte);
-    --st-couleur-texte-discret: var(--st-couleur-texte);
+  :root {
+    --st-couleur-bordure: #7e848b;
+    --st-couleur-bordure-forte: light-dark(#434652, #bdc1c7);
+    --st-couleur-texte-discret: light-dark(#161c24, #f2f4f6);
+    --st-couleur-texte-attenue: light-dark(#434652, #bdc1c7);
+    --st-couleur-texte-desactive: light-dark(#656874, #9da2a8);
+    --st-couleur-surface-survol: light-dark(#dde3ee, #424851);
+    --st-couleur-surface-survol-elevee: light-dark(#dde3ee, #424851);
+    --st-couleur-surface-courante-elevee: light-dark(#d7dadf, #4f565e);
+    --st-couleur-surface-conteneur-haut: light-dark(#dde3ee, #424851);
+    --st-couleur-succes: light-dark(#07602f, #a0caaa);
+    --st-couleur-avertissement: light-dark(#783f03, #dbb59a);
+    --st-focus-epaisseur: var(--st-epaisseur-forte);
   }
 }
 
-/* Impression : les jetons clairs, quel que soit le theme choisi a l'ecran. Un
-   fond sombre imprime est une page noire. */
+/* Contraste force : les roles vers les couleurs systeme, aucune ombre (01 §7.2). */
+@media (forced-colors: active) {
+  :root {
+    --st-couleur-fond: Canvas;
+    --st-couleur-surface: Canvas;
+    --st-couleur-surface-elevee: Canvas;
+    --st-couleur-surface-enfoncee: Canvas;
+    --st-couleur-surface-conteneur-bas: Canvas;
+    --st-couleur-surface-conteneur-haut: Canvas;
+    --st-couleur-surface-survol: Canvas;
+    --st-couleur-surface-survol-elevee: Canvas;
+    --st-couleur-surface-courante-elevee: Canvas;
+    --st-couleur-surface-active: Canvas;
+    --st-couleur-surface-selection: Canvas;
+    --st-couleur-surface-inverse: Canvas;
+    --st-couleur-surface-marque: Canvas;
+    --st-couleur-lisere-focus: Canvas;
+    --st-couleur-primaire-discret: Canvas;
+    --st-couleur-primaire-attenue: Canvas;
+    --st-couleur-accent-discret: Canvas;
+    --st-couleur-information-discret: Canvas;
+    --st-couleur-succes-discret: Canvas;
+    --st-couleur-avertissement-discret: Canvas;
+    --st-couleur-danger-discret: Canvas;
+    --st-couleur-danger-discret-courant: Canvas;
+    --st-couleur-texte: CanvasText;
+    --st-couleur-texte-discret: CanvasText;
+    --st-couleur-texte-attenue: CanvasText;
+    --st-couleur-texte-inverse: CanvasText;
+    --st-couleur-texte-sur-marque: CanvasText;
+    --st-couleur-texte-sur-marque-discret: CanvasText;
+    --st-couleur-negatif: CanvasText;
+    --st-couleur-bordure: CanvasText;
+    --st-couleur-bordure-forte: CanvasText;
+    --st-couleur-accent: CanvasText;
+    --st-couleur-accent-survol: CanvasText;
+    --st-couleur-information: CanvasText;
+    --st-couleur-succes: CanvasText;
+    --st-couleur-avertissement: CanvasText;
+    --st-couleur-danger: CanvasText;
+    --st-couleur-danger-survol: CanvasText;
+    --st-couleur-danger-actif: CanvasText;
+    --st-couleur-positif: CanvasText;
+    --st-couleur-sur-primaire-discret: CanvasText;
+    --st-couleur-sur-primaire-attenue: CanvasText;
+    --st-couleur-sur-accent-discret: CanvasText;
+    --st-couleur-sur-information-discret: CanvasText;
+    --st-couleur-sur-succes-discret: CanvasText;
+    --st-couleur-sur-avertissement-discret: CanvasText;
+    --st-couleur-sur-danger-discret: CanvasText;
+    --st-couleur-texte-desactive: GrayText;
+    --st-couleur-primaire: LinkText;
+    --st-couleur-primaire-survol: LinkText;
+    --st-couleur-primaire-actif: LinkText;
+    --st-couleur-texte-primaire: LinkText;
+    --st-couleur-selection: Highlight;
+    --st-couleur-bordure-selection: Highlight;
+    --st-couleur-anneau-focus: Highlight;
+    --st-couleur-sur-selection: HighlightText;
+    --st-ombre-none: none;
+    --st-ombre-repos: none;
+    --st-ombre-survol: none;
+    --st-ombre-surelevee: none;
+    --st-ombre-flottante: none;
+    --st-ombre-modale: none;
+    --st-epaisseur-capillaire: 1px;
+  }
+}
+
+/* Impression : le theme clair et son encre, quel que soit le theme a l'ecran ou
+   dans un ilot (01 §7.3). Un fond sombre imprime est une page noire. */
 @media print {
-  :root[data-theme],
-  :root:not([data-theme]) {
+  :root,
+  [data-theme] {
     color-scheme: light;
-    --st-couleur-fond: #f7f8fa;
-    --st-couleur-surface: #ffffff;
-    --st-couleur-surface-elevee: #ffffff;
-    --st-couleur-surface-enfoncee: #eef1f5;
-    --st-couleur-surface-survol: #eef1f5;
-    --st-couleur-texte: #141920;
-    --st-couleur-texte-discret: #4d5868;
-    --st-couleur-texte-desactive: #94a1b2;
-    --st-couleur-texte-inverse: #ffffff;
-    --st-couleur-bordure: #dde2e9;
-    --st-couleur-bordure-forte: #6b7889;
-    --st-couleur-anneau-focus: #255eeb;
-    --st-couleur-primaire: #1d4ed8;
-    --st-couleur-primaire-survol: #1e40af;
-    --st-couleur-sur-primaire: #ffffff;
-    --st-couleur-primaire-discret: #eff5ff;
-    --st-couleur-sur-primaire-discret: #1e3a8a;
-    --st-couleur-succes: #15803d;
-    --st-couleur-sur-succes: #ffffff;
-    --st-couleur-succes-discret: #d7f5e3;
-    --st-couleur-sur-succes-discret: #0a3d1e;
-    --st-couleur-avertissement: #a16207;
-    --st-couleur-sur-avertissement: #ffffff;
-    --st-couleur-avertissement-discret: #fdf0d5;
-    --st-couleur-sur-avertissement-discret: #432a06;
-    --st-couleur-danger: #b91c1c;
-    --st-couleur-danger-survol: #991b1b;
-    --st-couleur-sur-danger: #ffffff;
-    --st-couleur-danger-discret: #fde2e2;
-    --st-couleur-sur-danger-discret: #4c1010;
+    --st-affichage-si-clair: inline;
+    --st-affichage-si-sombre: none;
+  }
+
+  :root {
+    --st-couleur-fond: #ffffff;
+    --st-couleur-surface-survol: #ffffff;
+    --st-couleur-surface-active: #ffffff;
+    --st-couleur-surface-selection: #ffffff;
+    --st-couleur-surface-conteneur-bas: #ffffff;
+    --st-couleur-surface-conteneur-haut: #ffffff;
+    --st-couleur-texte: #070d14;
+    --st-couleur-bordure: #9da2a8;
+    --st-couleur-bordure-forte: #60676f;
+    --st-couleur-succes: #07602f;
+    --st-couleur-avertissement: #783f03;
+    --st-couleur-danger: #960c19;
+    --st-couleur-information: #0b5776;
+    --st-couleur-primaire-discret: #ffffff;
+    --st-couleur-primaire-attenue: #ffffff;
+    --st-couleur-accent-discret: #ffffff;
+    --st-couleur-information-discret: #ffffff;
+    --st-couleur-succes-discret: #ffffff;
+    --st-couleur-avertissement-discret: #ffffff;
+    --st-couleur-danger-discret: #ffffff;
+    --st-ombre-repos: none;
+    --st-ombre-survol: none;
+    --st-ombre-surelevee: none;
+    --st-ombre-flottante: none;
+    --st-ombre-modale: none;
+    --st-voile: transparent;
+    --st-epaisseur-capillaire: 1px;
+    --st-taille-2xs: 8pt;
+    --st-taille-xs: 8pt;
+    --st-taille-sm: 9pt;
+    --st-taille-md: 10.5pt;
+    --st-taille-lg: 12pt;
+    --st-taille-xl: 13pt;
+    --st-taille-2xl: 15pt;
+    --st-taille-3xl: 18pt;
+    --st-taille-4xl: 22pt;
+    --st-taille-5xl: 28pt;
+    --st-taille-6xl: 32pt;
   }
+
+  .st-hors-impression {
+    display: none !important;
+  }
+
+  /* Impression EXCLUSIVE (lot 263) : un composant qui la demande (les codes de secours) pose
+     l'attribut sur <html> le temps du dialogue, et seule sa region s'imprime ; tout ce qui n'est
+     ni elle, ni dedans, ni l'un de ses ancetres disparait. Poids nul (:where) comme le reste de
+     la feuille ; !important l'emporte sur l'affichage des composants. */
+  :where(
+      :root[data-st-impression-exclusive]
+        body
+        *:not([data-st-imprimable], [data-st-imprimable] *, :has([data-st-imprimable]))
+    ) {
+    display: none !important;
+  }
+}
+
+@media not print {
+  .st-impression-seulement {
+    display: none !important;
+  }
+}
+
+@page {
+  margin: 16mm 14mm;
 }