@starterlib/tokens 0.7.2 → 0.9.0

package/fesm2022/starterlib-tokens.mjs

@@ -1,256 +1,598 @@
-/**
- * Niveau 1 — primitives. Palette brute, sans intention d'usage.
- * Aucun composant ne consomme ce niveau directement : il passe par le
- * niveau semantique, sinon un changement de nuance se propage a l'aveugle.
- */
+const DEGRES_EN_RADIANS = Math.PI / 180;
+function versSrgbLineaire({ l, c, h }) {
+	const a = c * Math.cos(h * DEGRES_EN_RADIANS);
+	const b = c * Math.sin(h * DEGRES_EN_RADIANS);
+	const l_ = l + .3963377774 * a + .2158037573 * b;
+	const m_ = l - .1055613458 * a - .0638541728 * b;
+	const s_ = l - .0894841775 * a - 1.291485548 * b;
+	const lc = l_ ** 3;
+	const mc = m_ ** 3;
+	const sc = s_ ** 3;
+	return [
+		4.0767416621 * lc - 3.3077115913 * mc + .2309699292 * sc,
+		-1.2684380046 * lc + 2.6097574011 * mc - .3413193965 * sc,
+		-.0041960863 * lc - .7034186147 * mc + 1.707614701 * sc
+	];
+}
+function dansLeGamut(lineaire) {
+	return lineaire.every((v) => v >= -1e-7 && v <= 1.0000001);
+}
+function encoderGamma(lineaire) {
+	const v = Math.min(1, Math.max(0, lineaire));
+	return v <= .0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - .055;
+}
+function decoderGamma(canal8bits) {
+	const c = canal8bits / 255;
+	return c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+}
+function enHex$2(lineaire) {
+	return `#${lineaire.map((v) => Math.round(encoderGamma(v) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function oklchVersSrgb(couleur) {
+	if (!Number.isFinite(couleur.l) || !Number.isFinite(couleur.c) || !Number.isFinite(couleur.h)) throw new Error(`Couleur OKLCH invalide : ${JSON.stringify(couleur)}`);
+	const demandee = versSrgbLineaire(couleur);
+	if (dansLeGamut(demandee)) return {
+		hex: enHex$2(demandee),
+		rabattue: false,
+		chroma: couleur.c
+	};
+	let dedans = 0;
+	let dehors = couleur.c;
+	for (let pas = 0; pas < 40; pas++) {
+		const milieu = (dedans + dehors) / 2;
+		if (dansLeGamut(versSrgbLineaire({
+			...couleur,
+			c: milieu
+		}))) dedans = milieu;
+		else dehors = milieu;
+	}
+	return {
+		hex: enHex$2(versSrgbLineaire({
+			...couleur,
+			c: dedans
+		})),
+		rabattue: true,
+		chroma: dedans
+	};
+}
+function oklchVersHex(couleur) {
+	return oklchVersSrgb(couleur).hex;
+}
+function hexVersOklch(hex) {
+	const v = hex.trim().replace(/^#/, "");
+	const complet = v.length === 3 ? v.split("").map((c) => c + c).join("") : v;
+	if (!/^[0-9a-fA-F]{6}$/.test(complet)) throw new Error(`Couleur hexadecimale invalide : ${hex}`);
+	const [r, g, b] = [
+		0,
+		2,
+		4
+	].map((i) => decoderGamma(parseInt(complet.slice(i, i + 2), 16)));
+	const l_ = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b);
+	const m_ = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b);
+	const s_ = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b);
+	const l = .2104542553 * l_ + .793617785 * m_ - .0040720468 * s_;
+	const a = 1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_;
+	const bb = .0259040371 * l_ + .7827717662 * m_ - .808675766 * s_;
+	const c = Math.hypot(a, bb);
+	return {
+		l,
+		c,
+		h: c < 1e-4 ? 0 : (Math.atan2(bb, a) / DEGRES_EN_RADIANS + 360) % 360
+	};
+}
+function oklchEnCss({ l, c, h }) {
+	const arrondir = (v, chiffres) => Number(v.toFixed(chiffres)).toString();
+	return `oklch(${arrondir(l, 3)} ${arrondir(c, 3)} ${arrondir(h, 0)})`;
+}
+const PAS_DE_RAMPE = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+const PAS_NEUTRES = [
+	0,
+	50,
+	100,
+	150,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+const RANGS_DE_SERIE = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+];
+const L_PAS = {
+	50: .97,
+	100: .935,
+	200: .88,
+	300: .8,
+	400: .7,
+	500: .6,
+	600: .5,
+	700: .43,
+	800: .36,
+	900: .28,
+	950: .2
+};
+const C_PAS = {
+	50: .07,
+	100: .15,
+	200: .29,
+	300: .5,
+	400: .77,
+	500: .95,
+	600: 1,
+	700: .88,
+	800: .74,
+	900: .58,
+	950: .38
+};
+const FAMILLES = {
+	bleu: {
+		teinte: 262,
+		chromaMax: .18,
+		vocation: "marque, focus, selection"
+	},
+	azur: {
+		teinte: 232,
+		chromaMax: .095,
+		vocation: "information"
+	},
+	or: {
+		teinte: 85,
+		chromaMax: .098,
+		vocation: "accent (jamais un statut, jamais une action)"
+	},
+	vert: {
+		teinte: 152,
+		chromaMax: .125,
+		vocation: "succes et variation positive"
+	},
+	ambre: {
+		teinte: 58,
+		chromaMax: .115,
+		exception: { 600: .52 },
+		vocation: "avertissement"
+	},
+	rouge: {
+		teinte: 25,
+		chromaMax: .19,
+		vocation: "danger, erreur, action destructrice"
+	}
+};
+const NEUTRES = {
+	0: {
+		l: 1,
+		c: 0,
+		h: 0
+	},
+	50: {
+		l: .98,
+		c: .003,
+		h: 255
+	},
+	100: {
+		l: .965,
+		c: .004,
+		h: 255
+	},
+	150: {
+		l: .94,
+		c: .005,
+		h: 255
+	},
+	200: {
+		l: .888,
+		c: .007,
+		h: 255
+	},
+	300: {
+		l: .81,
+		c: .009,
+		h: 255
+	},
+	400: {
+		l: .71,
+		c: .011,
+		h: 255
+	},
+	500: {
+		l: .61,
+		c: .013,
+		h: 255
+	},
+	600: {
+		l: .51,
+		c: .015,
+		h: 255
+	},
+	700: {
+		l: .45,
+		c: .016,
+		h: 255
+	},
+	800: {
+		l: .31,
+		c: .017,
+		h: 255
+	},
+	900: {
+		l: .22,
+		c: .018,
+		h: 255
+	},
+	950: {
+		l: .155,
+		c: .018,
+		h: 255
+	}
+};
+const SERIE = {
+	1: {
+		l: .55,
+		c: .15,
+		h: 262
+	},
+	2: {
+		l: .55,
+		c: .13,
+		h: 85
+	},
+	3: {
+		l: .55,
+		c: .12,
+		h: 195
+	},
+	4: {
+		l: .55,
+		c: .15,
+		h: 310
+	},
+	5: {
+		l: .55,
+		c: .14,
+		h: 152
+	},
+	6: {
+		l: .55,
+		c: .16,
+		h: 25
+	}
+};
+function definir(oklch) {
+	const { hex, rabattue } = oklchVersSrgb(oklch);
+	return {
+		oklch,
+		hex,
+		rabattue
+	};
+}
+function definitionDuPas(famille, pas) {
+	const f = FAMILLES[famille];
+	return {
+		l: f.exception?.[pas] ?? L_PAS[pas],
+		c: Number((f.chromaMax * C_PAS[pas]).toFixed(6)),
+		h: f.teinte
+	};
+}
+function engendrer(cles, definition) {
+	return Object.fromEntries(cles.map((cle) => [cle, definir(definition(cle))]));
+}
+function rampe(famille) {
+	return engendrer(PAS_DE_RAMPE, (pas) => definitionDuPas(famille, pas));
+}
+const definitionsDesPrimitives = {
+	neutre: engendrer(PAS_NEUTRES, (pas) => NEUTRES[pas]),
+	bleu: rampe("bleu"),
+	azur: rampe("azur"),
+	or: rampe("or"),
+	vert: rampe("vert"),
+	ambre: rampe("ambre"),
+	rouge: rampe("rouge"),
+	serie: engendrer(RANGS_DE_SERIE, (rang) => SERIE[rang])
+};
+function enHex$1(rampeDefinie) {
+	return Object.fromEntries(Object.entries(rampeDefinie).map(([cle, d]) => [cle, d.hex]));
+}
 const primitives = {
-    neutre: {
-        0: '#ffffff',
-        50: '#f7f8fa',
-        100: '#eef1f5',
-        200: '#dde2e9',
-        300: '#c3ccd7',
-        400: '#94a1b2',
-        500: '#6b7889',
-        600: '#4d5868',
-        700: '#39414e',
-        800: '#232a34',
-        900: '#141920',
-        950: '#0b0e13',
-    },
-    bleu: {
-        50: '#eff5ff',
-        100: '#dbe8fe',
-        200: '#bfd6fe',
-        300: '#93bbfd',
-        400: '#609afa',
-        500: '#3b7df6',
-        600: '#255eeb',
-        700: '#1d4ed8',
-        800: '#1e40af',
-        900: '#1e3a8a',
-    },
-    vert: {
-        100: '#d7f5e3',
-        300: '#7fd6a4',
-        500: '#1a9d54',
-        600: '#15803d',
-        700: '#116932',
-        900: '#0a3d1e',
-    },
-    ambre: {
-        100: '#fdf0d5',
-        300: '#f3c969',
-        500: '#b4730b',
-        600: '#a16207',
-        700: '#854d0e',
-        900: '#432a06',
-    },
-    rouge: {
-        100: '#fde2e2',
-        300: '#f3a3a3',
-        500: '#d92d2d',
-        600: '#b91c1c',
-        700: '#991b1b',
-        900: '#4c1010',
-    },
-};
-
-/**
- * Echelles non chromatiques. Elles ne changent pas entre le theme clair et le
- * theme sombre : une distance ni une graisse ne dependent de la luminosite.
- */
-/** Pas de 4 px. Une valeur hors echelle est un defaut de conception. */
+	neutre: enHex$1(definitionsDesPrimitives.neutre),
+	bleu: enHex$1(definitionsDesPrimitives.bleu),
+	azur: enHex$1(definitionsDesPrimitives.azur),
+	or: enHex$1(definitionsDesPrimitives.or),
+	vert: enHex$1(definitionsDesPrimitives.vert),
+	ambre: enHex$1(definitionsDesPrimitives.ambre),
+	rouge: enHex$1(definitionsDesPrimitives.rouge),
+	serie: enHex$1(definitionsDesPrimitives.serie)
+};
 const espacement = {
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
+	"0": "0",
+	"1": "0.25rem",
+	"2": "0.5rem",
+	"3": "0.75rem",
+	"4": "1rem",
+	"5": "1.25rem",
+	"6": "1.5rem",
+	"8": "2rem",
+	"10": "2.5rem",
+	"12": "3rem",
+	"16": "4rem",
+	"20": "5rem",
+	"24": "6rem",
+	demi: "0.125rem",
+	"1-5": "0.375rem",
+	"2-5": "0.625rem",
+	"3-5": "0.875rem"
 };
 const rayon = {
-    none: '0',
-    xs: '0.125rem',
-    sm: '0.25rem',
-    md: '0.5rem',
-    lg: '0.75rem',
-    xl: '1rem',
-    pleine: '9999px',
+	none: "0",
+	xs: "0.125rem",
+	sm: "0.25rem",
+	md: "0.5rem",
+	lg: "0.75rem",
+	xl: "1rem",
+	pleine: "9999px"
 };
+const CLES_DE_TAILLE = [
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl",
+	"4xl",
+	"5xl",
+	"6xl"
+];
 const typographie = {
-    famille: {
-        base: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-        mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
-    },
-    taille: {
-        xs: '0.75rem',
-        sm: '0.875rem',
-        md: '1rem',
-        lg: '1.125rem',
-        xl: '1.25rem',
-        '2xl': '1.5rem',
-        '3xl': '1.875rem',
-        '4xl': '2.25rem',
-    },
-    graisse: { normale: '400', moyenne: '500', semi: '600', grasse: '700' },
-    interligne: { serre: '1.25', normal: '1.5', large: '1.75' },
-};
-/**
- * Les ombres restent discretes : une elevation forte sur fond sombre se lit
- * comme une salissure, jamais comme une hauteur.
- */
-const ombre = {
-    none: 'none',
-    sm: '0 1px 2px 0 rgb(0 0 0 / 0.06)',
-    md: '0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06)',
-    lg: '0 8px 20px -4px rgb(0 0 0 / 0.12), 0 3px 8px -3px rgb(0 0 0 / 0.07)',
-    xl: '0 20px 40px -8px rgb(0 0 0 / 0.16)',
-};
-/**
- * Durees courtes : au-dela de 250 ms une interface bancaire parait lente.
- * Toute animation doit se desactiver sous `prefers-reduced-motion`.
- */
+	famille: {
+		base: "'Inter Variable', 'Inter Repli', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+		mono: "'JetBrains Mono Variable', 'JetBrains Mono Repli', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+	},
+	taille: {
+		"2xs": "0.6875rem",
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem",
+		"2xl": "1.5rem",
+		"3xl": "2rem",
+		"4xl": "2.5rem",
+		"5xl": "3rem",
+		"6xl": "3.5rem"
+	},
+	interligne: {
+		"2xs": "0.875rem",
+		xs: "1rem",
+		sm: "1.25rem",
+		md: "1.5rem",
+		lg: "1.75rem",
+		xl: "1.75rem",
+		"2xl": "2rem",
+		"3xl": "2.5rem",
+		"4xl": "3rem",
+		"5xl": "3.5rem",
+		"6xl": "4rem"
+	},
+	graisse: {
+		normale: "400",
+		moyenne: "500",
+		semi: "600",
+		grasse: "700"
+	},
+	interlettrage: {
+		serre: "-0.01em",
+		normal: "normal",
+		large: "0.02em",
+		capitales: "0.05em",
+		etiquette: "0.04em",
+		surtitre: "0.1em"
+	},
+	approche: {
+		lg: "-0.005em",
+		xl: "-0.01em",
+		"2xl": "-0.015em",
+		"3xl": "-0.02em",
+		"4xl": "-0.025em",
+		"6xl": "-0.03em"
+	},
+	chiffres: {
+		alignes: "tabular-nums lining-nums",
+		references: "tabular-nums lining-nums slashed-zero"
+	}
+};
 const duree = {
-    instantane: '0ms',
-    rapide: '120ms',
-    normale: '200ms',
-    lente: '320ms',
-};
-/**
- * Rythme d'une attente qui dure : respiration d'un squelette sous mouvement
- * reduit, va-et-vient d'une progression indeterminee.
- *
- * ⚠️ **Hors de l'echelle des durees, et c'est le point.** `--st-duree-*` passe a
- * zero sous `prefers-reduced-motion` : un indicateur d'activite cable dessus se
- * figerait, et l'ecran passerait pour bloque. Les feuilles le lisent par
- * `var(--st-anim-respiration, …)`, avec un repli litteral — une application peut
- * ralentir la respiration, jamais l'eteindre.
- */
-const respiration = '1600ms';
+	instantane: "0ms",
+	rapide: "120ms",
+	normale: "200ms",
+	lente: "320ms",
+	longue: "480ms"
+};
+const deplacement = {
+	court: "0.25rem",
+	moyen: "0.5rem",
+	long: "1rem"
+};
+const cadence = {
+	vive: "900ms",
+	normale: "1400ms",
+	respiration: "1600ms"
+};
+const cadenceMinimale = "600ms";
 const courbe = {
-    standard: 'cubic-bezier(0.2, 0, 0, 1)',
-    entrant: 'cubic-bezier(0, 0, 0, 1)',
-    sortant: 'cubic-bezier(0.3, 0, 1, 1)',
-};
-/**
- * Plans d'empilement nommes. Un `z-index` ecrit a la main dans un composant
- * est un defaut : il finira par passer devant ou derriere sans qu'on sache
- * pourquoi.
- */
+	standard: "cubic-bezier(0.2, 0, 0, 1)",
+	entrant: "cubic-bezier(0, 0, 0, 1)",
+	sortant: "cubic-bezier(0.3, 0, 1, 1)"
+};
 const plan = {
-    base: '0',
-    contenuEleve: '10',
-    entete: '100',
-    tiroir: '200',
-    superposition: '300',
-    dialogue: '400',
-    infobulle: '500',
-    notification: '600',
-};
-/** Points de rupture. Mobile d'abord : ces valeurs sont des minimums. */
+	base: "0",
+	contenuEleve: "10",
+	entete: "100",
+	superposition: "300",
+	notification: "600",
+	evitement: "700"
+};
 const rupture = {
-    sm: '480px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-};
-/** Cible tactile minimale. Sous 44 px, l'echec de pointage devient courant. */
-const cibleTactileMinimale = '44px';
-/**
- * Cible de pointage minimale (WCAG 2.5.8, niveau AA). C'est un PLANCHER, pas un
- * confort : la cible tactile reste la regle pour ce qui se touche.
- */
-const cibleMinimale = '24px';
-/**
- * Epaisseurs de trait. Trois suffisent : un filet qui separe, un accent qui
- * signale, un marqueur qui designe. Une quatrieme valeur serait un arbitraire de
- * plus a tenir.
- */
+	sm: "480px",
+	md: "768px",
+	lg: "1024px",
+	xl: "1280px",
+	"2xl": "1536px"
+};
+const cibleTactileMinimale = "44px";
+const cibleMinimale = "24px";
 const epaisseur = {
-    fine: '1px',
-    moyenne: '2px',
-    forte: '3px',
-};
-/**
- * Largeur de lecture. Au-dela de soixante-quinze caracteres, l'oeil perd le
- * debut de la ligne suivante ; en deca de quarante-cinq, il saute trop souvent.
- */
-const mesure = {
-    etroite: '45ch',
-    normale: '70ch',
-};
-
-/**
- * ⚠️ 16 px par rem, et non la taille de police de `html` : une requete de media
- * se resout contre la taille PAR DEFAUT du navigateur, celle que la personne
- * regle dans ses preferences, jamais contre une valeur posee par une feuille.
- * Une personne qui lit a 20 px voit donc la rupture `lg` a 1280 px reels : la
- * mise en page suit son choix, la ou des px l'ignoreraient.
- */
+	fine: "1px",
+	intermediaire: "1.5px",
+	moyenne: "2px",
+	forte: "3px",
+	epaisse: "4px"
+};
+const epaisseurCapillaire = {
+	base: "1px",
+	hauteDensite: "0.5px"
+};
+const largeur = {
+	etroite: "45ch",
+	normale: "70ch",
+	page: "90rem",
+	navigation: "16rem",
+	rail: "4.5rem",
+	"carte-auth": "28.125rem",
+	"dialogue-sm": "24rem",
+	"dialogue-md": "32rem",
+	"dialogue-lg": "48rem",
+	tiroir: "28rem",
+	menu: "12rem",
+	couche: "28rem",
+	"champ-sm": "8rem",
+	"champ-md": "12rem",
+	"champ-lg": "16rem",
+	colonne: "18rem"
+};
+const hauteurDeCommande = {
+	sm: "2rem",
+	md: "2.25rem",
+	lg: "2.5rem",
+	xl: "2.75rem",
+	"2xl": "3.25rem"
+};
+const MODES_DE_DENSITE = [
+	"confortable",
+	"dense",
+	"compacte"
+];
+const densite = {
+	confortable: {
+		"hauteur-commande-defaut": "var(--st-hauteur-commande-xl)",
+		"densite-cellule-bloc": "var(--st-espacement-3)",
+		"densite-cellule-ligne": "var(--st-espacement-3)",
+		"densite-texte-taille": "var(--st-taille-md)",
+		"densite-texte-interligne": "var(--st-interligne-md)",
+		"densite-ligne": "var(--st-hauteur-commande-2xl)",
+		"calendrier-jour-defaut": "var(--st-hauteur-commande-xl)"
+	},
+	dense: {
+		"hauteur-commande-defaut": "var(--st-hauteur-commande-md)",
+		"densite-cellule-bloc": "var(--st-espacement-2)",
+		"densite-cellule-ligne": "var(--st-espacement-3)",
+		"densite-texte-taille": "var(--st-taille-sm)",
+		"densite-texte-interligne": "var(--st-interligne-sm)",
+		"densite-ligne": "var(--st-hauteur-commande-xl)",
+		"calendrier-jour-defaut": "var(--st-hauteur-commande-md)"
+	},
+	compacte: {
+		"hauteur-commande-defaut": "var(--st-hauteur-commande-sm)",
+		"densite-cellule-bloc": "var(--st-espacement-1)",
+		"densite-cellule-ligne": "var(--st-espacement-2)",
+		"densite-texte-taille": "var(--st-taille-xs)",
+		"densite-texte-interligne": "var(--st-interligne-xs)",
+		"densite-ligne": "var(--st-hauteur-commande-md)",
+		"calendrier-jour-defaut": "var(--st-hauteur-commande-sm)"
+	}
+};
+const focus = {
+	epaisseur: "var(--st-epaisseur-moyenne)",
+	decalage: "var(--st-epaisseur-moyenne)",
+	lisere: "var(--st-epaisseur-moyenne)"
+};
+const delai = {
+	annonce: 120,
+	grace: 120,
+	attente: 200,
+	survol: 300,
+	repli: 50,
+	gel: 250
+};
+const tenue = {
+	affichageMinimal: 400,
+	confirmation: 2e3,
+	toast: 5e3,
+	rechargementAnnonce: 2e3,
+	revelation: 3e4
+};
+const rythme = {
+	delai,
+	tenue
+};
 const PIXELS_PAR_REM = 16;
 function enRem(px) {
-    return `${(px / PIXELS_PAR_REM).toString()}rem`;
+	return `${(px / PIXELS_PAR_REM).toString()}rem`;
 }
 function lire(nom) {
-    const px = Number.parseInt(rupture[nom], 10);
-    const rem = enRem(px);
-    return { px, rem, requete: `(min-width: ${rem})` };
-}
-/**
- * Les points de rupture de l'echelle, DERIVES de `rupture` : une valeur ecrite
- * ici a la main pourrait diverger de celle du CSS, et c'est precisement le
- * defaut F7 du plan de la coquille (`64rem` en dur la ou `rupture.lg` existait).
- *
- * ```ts
- * inject(BreakpointObserver).observe(RUPTURES.lg.requete);
- * ```
- */
+	const px = Number.parseInt(rupture[nom], 10);
+	const rem = enRem(px);
+	return {
+		px,
+		rem,
+		requete: `(min-width: ${rem})`
+	};
+}
 const RUPTURES = {
-    sm: lire('sm'),
-    md: lire('md'),
-    lg: lire('lg'),
-    xl: lire('xl'),
-    '2xl': lire('2xl'),
-};
-/**
- * Le partiel Sass `_ruptures.scss`, ENGENDRE comme la feuille de jetons : un
- * fichier ecrit a la main a cote du TypeScript finirait par ne plus lui
- * correspondre. Meme garde de non-derive (`pnpm tokens:css:check`).
- *
- * Il expose une variable par rupture, la carte complete, et un mixin qui ecrit
- * la requete de media, mobile d'abord :
- *
- * ```scss
- * @use '@starterlib/tokens/styles/ruptures' as rupture;
- *
- * @include rupture.depuis('lg') { … }
- * ```
- */
+	sm: lire("sm"),
+	md: lire("md"),
+	lg: lire("lg"),
+	xl: lire("xl"),
+	"2xl": lire("2xl")
+};
 function partielDesRuptures() {
-    const noms = Object.keys(RUPTURES);
-    const variables = noms.map((nom) => `$rupture-${nom}: ${RUPTURES[nom].rem}; // ${RUPTURES[nom].px.toString()}px`);
-    const entrees = noms.map((nom) => `  '${nom}': $rupture-${nom},`);
-    return `// Engendre par @starterlib/tokens — ne pas modifier a la main.
+	const noms = Object.keys(RUPTURES);
+	const variables = noms.map((nom) => `$rupture-${nom}: ${RUPTURES[nom].rem}; // ${RUPTURES[nom].px.toString()}px`);
+	const entrees = noms.map((nom) => `  '${nom}': $rupture-${nom},`);
+	return `// Engendre par @starterlib/tokens \u2014 ne pas modifier a la main.
 // Regenerer : pnpm tokens:css
 //
 // Points de rupture de l'echelle \`rupture\`, en rem : une requete de media en
 // rem suit la taille de police choisie par la personne, la ou des px
 // l'ignoreraient. Mobile d'abord : chaque valeur est un MINIMUM.
 @use 'sass:map';
+@use 'sass:string';
 
-${variables.join('\n')}
+${variables.join("\n")}
 
 $ruptures: (
-${entrees.join('\n')}
+${entrees.join("\n")}
 );
 
 // Applique les regles a partir d'une rupture : \`@include depuis('lg') { … }\`.
@@ -263,376 +605,1457 @@ ${entrees.join('\n')}
     @content;
   }
 }
-`;
+
+// Meme echelle, mesuree sur le CONTENEUR et non sur la fenetre : pour un composant
+// qui s'adapte a sa boite (carte, tableau, formulaire en colonne). L'ancetre
+// declare \`container-type: inline-size\`.
+//
+// ⚠️ La borne est INTERPOLEE : Sass evalue une requete \`@media\`, mais recopie le
+// prelude d'un \`@container\` tel quel. Sans \`#{}\`, la feuille recevait
+// \`(min-width: map.get(...))\`, que le navigateur ignore : la requete ne
+// s'appliquait jamais, et rien ne le signalait (lot 205, barre d'actions).
+@mixin depuis-conteneur($nom) {
+  @if not map.has-key($ruptures, $nom) {
+    @error "Rupture inconnue : #{$nom}. Admises : #{map.keys($ruptures)}.";
+  }
+
+  @container (min-width: #{map.get($ruptures, $nom)}) {
+    @content;
+  }
 }
 
-/**
- * Calcul de contraste WCAG 2.1. Il vit dans les jetons, et non dans les tests,
- * parce qu'une SPA peut avoir a verifier une couleur fournie a l'execution
- * (theme d'un client, statut colore par une donnee).
- */
-/** Accepte `#rgb` et `#rrggbb`. Leve sur toute autre forme : une couleur
- * illisible ne doit pas se transformer en noir par defaut. */
-function versRvb(hex) {
-    const v = hex.trim().replace(/^#/, '');
-    const complet = v.length === 3
-        ? v
-            .split('')
-            .map((c) => c + c)
-            .join('')
-        : v;
-    if (!/^[0-9a-fA-F]{6}$/.test(complet)) {
-        throw new Error(`Couleur hexadecimale invalide : ${hex}`);
+// Ce qui remplace une BOUCLE d'attente sous mouvement reduit : la preference du
+// systeme (sauf mouvement complet choisi), ou l'attribut \`data-mouvement='reduit'\`
+// pose par StMouvement sur <html> (ou par une zone). A poser DANS la regle de la boucle :
+// \`.barre { animation: … ; @include sous-mouvement-reduit { animation: … } }\`.
+//
+// ⚠️ Reserve aux boucles infinies. Une TRANSITION n'en a pas besoin : elle lit
+// \`--st-duree-*\`, que la feuille de jetons met deja a zero (03 P5).
+//
+// ⚠️ Dans une feuille de composant, la regle doit partir de \`:host\` : sans lui,
+// l'encapsulation d'Angular colle l'attribut de portee sur \`:root\`, et la regle
+// ne s'applique jamais — la boucle tournait encore sous mouvement reduit.
+@mixin sous-mouvement-reduit($composant: true) {
+  @if not & {
+    @error 'sous-mouvement-reduit se pose dans une regle : il complete son selecteur.';
+  }
+  @if $composant and not string.index('#{&}', ':host') {
+    @error 'sous-mouvement-reduit : la regle doit partir de :host (encapsulation Angular).';
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root:not([data-mouvement='complet']) & {
+      @content;
     }
-    return {
-        r: parseInt(complet.slice(0, 2), 16),
-        g: parseInt(complet.slice(2, 4), 16),
-        b: parseInt(complet.slice(4, 6), 16),
-    };
+  }
+
+  [data-mouvement='reduit'] & {
+    @content;
+  }
+}
+`;
+}
+function lireHex(texte) {
+	const v = texte.trim().replace(/^#/, "");
+	const complet = v.length === 3 ? v.split("").map((c) => c + c).join("") : v;
+	if (!/^[0-9a-fA-F]{6}$/.test(complet)) return null;
+	return {
+		r: parseInt(complet.slice(0, 2), 16),
+		g: parseInt(complet.slice(2, 4), 16),
+		b: parseInt(complet.slice(4, 6), 16)
+	};
+}
+function lireOpacite(texte) {
+	const v = texte.trim();
+	return v.endsWith("%") ? Number(v.slice(0, -1)) / 100 : Number(v);
+}
+function lireFonctionRgb(texte) {
+	const trouve = /^rgba?\(([^)]*)\)$/i.exec(texte.trim());
+	if (trouve === null) return null;
+	const [canaux = "", opaciteModerne] = (trouve[1] ?? "").split("/");
+	const morceaux = canaux.split(/[\s,]+/).map((m) => m.trim()).filter((m) => m !== "");
+	const opacite = opaciteModerne ?? (morceaux.length === 4 ? morceaux.pop() : void 0);
+	if (morceaux.length !== 3) return null;
+	const canal = (m) => Math.round(m.endsWith("%") ? Number(m.slice(0, -1)) * 255 / 100 : Number(m));
+	const [r, g, b] = morceaux.map(canal);
+	const a = opacite === void 0 ? 1 : lireOpacite(opacite);
+	if (![
+		r,
+		g,
+		b
+	].every((c) => Number.isFinite(c) && c >= 0 && c <= 255) || !Number.isFinite(a) || a < 0 || a > 1) return null;
+	return {
+		r,
+		g,
+		b,
+		a
+	};
+}
+function lireCouleur(texte) {
+	const hex = lireHex(texte);
+	if (hex !== null) return {
+		...hex,
+		a: 1
+	};
+	const fonction = lireFonctionRgb(texte);
+	if (fonction !== null) return fonction;
+	throw new Error(`Couleur invalide : ${texte}`);
+}
+function versRvb(couleur) {
+	const lue = lireCouleur(couleur);
+	if (lue.a < 1) throw new Error(`Couleur translucide (${couleur}) : la composer sur son fond avant d'en mesurer le contraste.`);
+	return {
+		r: lue.r,
+		g: lue.g,
+		b: lue.b
+	};
+}
+function enHex({ r, g, b }) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+function composer(premierPlan, fond) {
+	const dessus = lireCouleur(premierPlan);
+	const dessous = versRvb(fond);
+	const melange = (c, d) => Math.round(c * dessus.a + d * (1 - dessus.a));
+	return enHex({
+		r: melange(dessus.r, dessous.r),
+		g: melange(dessus.g, dessous.g),
+		b: melange(dessus.b, dessous.b)
+	});
 }
 function canalLineaire(valeur8bits) {
-    const c = valeur8bits / 255;
-    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+	const c = valeur8bits / 255;
+	return c <= .04045 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
 }
-/** Luminance relative WCAG, entre 0 (noir) et 1 (blanc). */
 function luminanceRelative(couleur) {
-    const { r, g, b } = typeof couleur === 'string' ? versRvb(couleur) : couleur;
-    return 0.2126 * canalLineaire(r) + 0.7152 * canalLineaire(g) + 0.0722 * canalLineaire(b);
+	const { r, g, b } = typeof couleur === "string" ? versRvb(couleur) : couleur;
+	return .2126 * canalLineaire(r) + .7152 * canalLineaire(g) + .0722 * canalLineaire(b);
 }
-/** Rapport de contraste, entre 1 et 21. L'ordre des arguments est indifferent. */
 function rapportDeContraste(a, b) {
-    const la = luminanceRelative(a);
-    const lb = luminanceRelative(b);
-    const clair = Math.max(la, lb);
-    const sombre = Math.min(la, lb);
-    return (clair + 0.05) / (sombre + 0.05);
-}
-/**
- * Seuils WCAG. `composant` couvre les bordures, icones et limites de champ :
- * la norme 1.4.11 leur demande 3:1, pas 4.5:1.
- */
+	const la = luminanceRelative(a);
+	const lb = luminanceRelative(b);
+	const clair = Math.max(la, lb);
+	const sombre = Math.min(la, lb);
+	return (clair + .05) / (sombre + .05);
+}
 function seuilExige(niveau, nature) {
-    if (nature === 'composant')
-        return 3;
-    if (niveau === 'AAA')
-        return nature === 'grand' ? 4.5 : 7;
-    return nature === 'grand' ? 3 : 4.5;
+	if (nature === "composant") return 3;
+	if (niveau === "AAA") return nature === "grand" ? 4.5 : 7;
+	return nature === "grand" ? 3 : 4.5;
 }
-function respecteLeContraste(premierPlan, arrierePlan, niveau = 'AA', nature = 'courant') {
-    return rapportDeContraste(premierPlan, arrierePlan) >= seuilExige(niveau, nature);
+function respecteLeContraste(premierPlan, arrierePlan, niveau = "AA", nature = "courant") {
+	return rapportDeContraste(premierPlan, arrierePlan) >= seuilExige(niveau, nature);
 }
-
+const APCA = {
+	trc: 2.4,
+	rouge: .2126729,
+	vert: .7151522,
+	bleu: .072175,
+	normFond: .56,
+	normTexte: .57,
+	inverseTexte: .62,
+	inverseFond: .65,
+	seuilNoir: .022,
+	serrageNoir: 1.414,
+	echelle: 1.14,
+	decalage: .027,
+	deltaMin: 5e-4,
+	plancher: .1
+};
+function luminanceApca(couleur) {
+	const { r, g, b } = versRvb(couleur);
+	const y = APCA.rouge * (r / 255) ** APCA.trc + APCA.vert * (g / 255) ** APCA.trc + APCA.bleu * (b / 255) ** APCA.trc;
+	return y > APCA.seuilNoir ? y : y + (APCA.seuilNoir - y) ** APCA.serrageNoir;
+}
+function apca(texte, fond) {
+	const yTexte = luminanceApca(texte);
+	const yFond = luminanceApca(fond);
+	if (Math.abs(yFond - yTexte) < APCA.deltaMin) return 0;
+	if (yFond > yTexte) {
+		const brut = (yFond ** APCA.normFond - yTexte ** APCA.normTexte) * APCA.echelle;
+		return brut < APCA.plancher ? 0 : (brut - APCA.decalage) * 100;
+	}
+	const brut = (yFond ** APCA.inverseFond - yTexte ** APCA.inverseTexte) * APCA.echelle;
+	return brut > -APCA.plancher ? 0 : (brut + APCA.decalage) * 100;
+}
+const RENDU = {
+	fond: "#f8f9ff",
+	texte: "#161c24",
+	texteDiscret: "#434652",
+	texteAttenue: "#656874",
+	primaire: "#003181",
+	surfaceConteneurBas: "#eff4ff",
+	surfaceConteneur: "#e9eefa",
+	surfaceConteneurHaut: "#e3e8f4",
+	surfaceConteneurPlusHaut: "#dde3ee",
+	positif: "#005a2b",
+	primaireAttenue: "#dae2ff",
+	surPrimaireAttenue: "#001848"
+};
+const SOMBRE_CALCULE = {
+	surfaceConteneurBas: "#0e141c",
+	surfaceConteneurHaut: "#323941",
+	surfaceSurvolElevee: "#383f49",
+	surfaceActive: "#424851"
+};
+const { neutre, bleu, azur, or, vert, ambre, rouge } = primitives;
 const themeClair = {
-    fond: primitives.neutre[50],
-    surface: primitives.neutre[0],
-    surfaceElevee: primitives.neutre[0],
-    surfaceEnfoncee: primitives.neutre[100],
-    surfaceSurvol: primitives.neutre[100],
-    texte: primitives.neutre[900],
-    texteDiscret: primitives.neutre[600],
-    texteDesactive: primitives.neutre[400],
-    texteInverse: primitives.neutre[0],
-    bordure: primitives.neutre[200],
-    // 4.49:1 sur `surface` : c'est la bordure qui IDENTIFIE un champ,
-    // elle est soumise a WCAG 1.4.11. La neutre 400 n'atteignait que 2.63:1.
-    bordureForte: primitives.neutre[500],
-    anneauFocus: primitives.bleu[600],
-    primaire: primitives.bleu[700],
-    primaireSurvol: primitives.bleu[800],
-    surPrimaire: primitives.neutre[0],
-    primaireDiscret: primitives.bleu[50],
-    surPrimaireDiscret: primitives.bleu[900],
-    succes: primitives.vert[600],
-    surSucces: primitives.neutre[0],
-    succesDiscret: primitives.vert[100],
-    surSuccesDiscret: primitives.vert[900],
-    avertissement: primitives.ambre[600],
-    surAvertissement: primitives.neutre[0],
-    avertissementDiscret: primitives.ambre[100],
-    surAvertissementDiscret: primitives.ambre[900],
-    danger: primitives.rouge[600],
-    dangerSurvol: primitives.rouge[700],
-    surDanger: primitives.neutre[0],
-    dangerDiscret: primitives.rouge[100],
-    surDangerDiscret: primitives.rouge[900],
+	fond: RENDU.fond,
+	surface: neutre[0],
+	surfaceElevee: neutre[0],
+	surfaceEnfoncee: RENDU.surfaceConteneur,
+	surfaceConteneurBas: RENDU.surfaceConteneurBas,
+	surfaceConteneurHaut: RENDU.surfaceConteneurHaut,
+	surfaceSurvol: RENDU.surfaceConteneur,
+	surfaceSurvolElevee: RENDU.surfaceConteneur,
+	surfaceCouranteElevee: RENDU.surfaceConteneur,
+	surfaceActive: RENDU.surfaceConteneurPlusHaut,
+	surfaceSelection: bleu[50],
+	surfaceInverse: RENDU.texte,
+	surfaceMarque: bleu[950],
+	texte: RENDU.texte,
+	texteDiscret: RENDU.texteDiscret,
+	texteAttenue: RENDU.texteAttenue,
+	texteDesactive: neutre[400],
+	texteInverse: neutre[0],
+	textePrimaire: RENDU.primaire,
+	texteSurMarque: neutre[0],
+	texteSurMarqueDiscret: bleu[200],
+	bordure: neutre[200],
+	bordureForte: neutre[500],
+	bordureSelection: bleu[700],
+	anneauFocus: bleu[600],
+	lisereFocus: neutre[0],
+	selection: bleu[200],
+	surSelection: neutre[950],
+	primaire: RENDU.primaire,
+	primaireSurvol: bleu[700],
+	primaireActif: bleu[900],
+	surPrimaire: neutre[0],
+	primaireDiscret: bleu[50],
+	surPrimaireDiscret: bleu[900],
+	primaireAttenue: RENDU.primaireAttenue,
+	surPrimaireAttenue: RENDU.surPrimaireAttenue,
+	accent: or[600],
+	accentSurvol: or[700],
+	surAccent: neutre[0],
+	accentDiscret: or[100],
+	surAccentDiscret: or[900],
+	information: azur[600],
+	surInformation: neutre[0],
+	informationDiscret: azur[50],
+	surInformationDiscret: azur[900],
+	succes: vert[600],
+	surSucces: neutre[0],
+	succesDiscret: vert[50],
+	surSuccesDiscret: vert[900],
+	avertissement: ambre[600],
+	surAvertissement: neutre[0],
+	avertissementDiscret: ambre[50],
+	surAvertissementDiscret: ambre[900],
+	danger: rouge[600],
+	dangerSurvol: rouge[700],
+	dangerActif: rouge[800],
+	surDanger: neutre[0],
+	dangerDiscret: rouge[50],
+	surDangerDiscret: rouge[900],
+	dangerDiscretCourant: rouge[100],
+	positif: RENDU.positif,
+	negatif: RENDU.texte
 };
 const themeSombre = {
-    fond: primitives.neutre[950],
-    surface: primitives.neutre[900],
-    surfaceElevee: primitives.neutre[800],
-    surfaceEnfoncee: primitives.neutre[950],
-    surfaceSurvol: primitives.neutre[800],
-    texte: primitives.neutre[100],
-    texteDiscret: primitives.neutre[300],
-    texteDesactive: primitives.neutre[500],
-    texteInverse: primitives.neutre[950],
-    bordure: primitives.neutre[700],
-    bordureForte: primitives.neutre[500],
-    anneauFocus: primitives.bleu[300],
-    primaire: primitives.bleu[300],
-    primaireSurvol: primitives.bleu[200],
-    surPrimaire: primitives.neutre[950],
-    primaireDiscret: primitives.bleu[900],
-    surPrimaireDiscret: primitives.bleu[100],
-    succes: primitives.vert[300],
-    surSucces: primitives.neutre[950],
-    succesDiscret: primitives.vert[900],
-    surSuccesDiscret: primitives.vert[100],
-    avertissement: primitives.ambre[300],
-    surAvertissement: primitives.neutre[950],
-    avertissementDiscret: primitives.ambre[900],
-    surAvertissementDiscret: primitives.ambre[100],
-    danger: primitives.rouge[300],
-    dangerSurvol: primitives.rouge[100],
-    surDanger: primitives.neutre[950],
-    dangerDiscret: primitives.rouge[900],
-    surDangerDiscret: primitives.rouge[100],
+	fond: neutre[950],
+	surface: neutre[900],
+	surfaceElevee: neutre[800],
+	surfaceEnfoncee: neutre[950],
+	surfaceConteneurBas: SOMBRE_CALCULE.surfaceConteneurBas,
+	surfaceConteneurHaut: SOMBRE_CALCULE.surfaceConteneurHaut,
+	surfaceSurvol: neutre[800],
+	surfaceSurvolElevee: SOMBRE_CALCULE.surfaceSurvolElevee,
+	surfaceCouranteElevee: neutre[700],
+	surfaceActive: SOMBRE_CALCULE.surfaceActive,
+	surfaceSelection: bleu[900],
+	surfaceInverse: neutre[100],
+	surfaceMarque: neutre[900],
+	texte: neutre[100],
+	texteDiscret: neutre[300],
+	texteAttenue: neutre[400],
+	texteDesactive: neutre[500],
+	texteInverse: neutre[950],
+	textePrimaire: bleu[300],
+	texteSurMarque: neutre[100],
+	texteSurMarqueDiscret: neutre[300],
+	bordure: neutre[700],
+	bordureForte: neutre[500],
+	bordureSelection: bleu[300],
+	anneauFocus: bleu[200],
+	lisereFocus: neutre[900],
+	selection: bleu[800],
+	surSelection: neutre[0],
+	primaire: bleu[300],
+	primaireSurvol: bleu[200],
+	primaireActif: bleu[100],
+	surPrimaire: neutre[950],
+	primaireDiscret: bleu[900],
+	surPrimaireDiscret: bleu[100],
+	primaireAttenue: bleu[800],
+	surPrimaireAttenue: bleu[100],
+	accent: or[300],
+	accentSurvol: or[200],
+	surAccent: neutre[950],
+	accentDiscret: or[900],
+	surAccentDiscret: or[100],
+	information: azur[300],
+	surInformation: neutre[950],
+	informationDiscret: azur[900],
+	surInformationDiscret: azur[100],
+	succes: vert[300],
+	surSucces: neutre[950],
+	succesDiscret: vert[900],
+	surSuccesDiscret: vert[100],
+	avertissement: ambre[300],
+	surAvertissement: neutre[950],
+	avertissementDiscret: ambre[900],
+	surAvertissementDiscret: ambre[100],
+	danger: rouge[300],
+	dangerSurvol: rouge[200],
+	dangerActif: rouge[100],
+	surDanger: neutre[950],
+	dangerDiscret: rouge[900],
+	surDangerDiscret: rouge[100],
+	dangerDiscretCourant: rouge[950],
+	positif: vert[300],
+	negatif: neutre[100]
 };
 const themes = {
-    clair: themeClair,
-    sombre: themeSombre,
+	clair: themeClair,
+	sombre: themeSombre
 };
+function surChacune(premierPlan, arrierePlans, nature = "courant") {
+	return arrierePlans.map((arrierePlan) => ({
+		premierPlan,
+		arrierePlan,
+		nature
+	}));
+}
+const SURFACES_DE_LECTURE = [
+	"fond",
+	"surface",
+	"surfaceElevee",
+	"surfaceEnfoncee",
+	"surfaceConteneurBas",
+	"surfaceConteneurHaut",
+	"surfaceSurvol",
+	"surfaceSelection"
+];
+const SURFACES_DE_STATUT = [
+	"fond",
+	"surface",
+	"surfaceElevee",
+	"surfaceEnfoncee",
+	"surfaceSurvol"
+];
 const pairesDeContraste = [
-    { premierPlan: 'texte', arrierePlan: 'surface', nature: 'courant' },
-    { premierPlan: 'texte', arrierePlan: 'fond', nature: 'courant' },
-    { premierPlan: 'texte', arrierePlan: 'surfaceElevee', nature: 'courant' },
-    { premierPlan: 'texte', arrierePlan: 'surfaceEnfoncee', nature: 'courant' },
-    { premierPlan: 'texteDiscret', arrierePlan: 'surface', nature: 'courant' },
-    { premierPlan: 'texteDiscret', arrierePlan: 'fond', nature: 'courant' },
-    { premierPlan: 'texteInverse', arrierePlan: 'primaire', nature: 'courant' },
-    { premierPlan: 'bordureForte', arrierePlan: 'surface', nature: 'composant' },
-    { premierPlan: 'anneauFocus', arrierePlan: 'surface', nature: 'composant' },
-    { premierPlan: 'anneauFocus', arrierePlan: 'fond', nature: 'composant' },
-    { premierPlan: 'surPrimaire', arrierePlan: 'primaire', nature: 'courant' },
-    { premierPlan: 'surPrimaire', arrierePlan: 'primaireSurvol', nature: 'courant' },
-    { premierPlan: 'surPrimaireDiscret', arrierePlan: 'primaireDiscret', nature: 'courant' },
-    { premierPlan: 'primaire', arrierePlan: 'surface', nature: 'courant' },
-    { premierPlan: 'surSucces', arrierePlan: 'succes', nature: 'courant' },
-    { premierPlan: 'surSuccesDiscret', arrierePlan: 'succesDiscret', nature: 'courant' },
-    // ⚠️ `courant` et non `composant` : `st-inline-message` emploie ces couleurs
-    // comme TEXTE. Declarees « composant », elles auraient pu descendre a 3:1 sans
-    // que la garde echoue (audit de la vague 2, UX-7). La nature se declare selon
-    // l'USAGE le plus exigeant, jamais selon la vocation premiere de la couleur.
-    { premierPlan: 'succes', arrierePlan: 'surface', nature: 'courant' },
-    { premierPlan: 'succes', arrierePlan: 'fond', nature: 'courant' },
-    { premierPlan: 'succes', arrierePlan: 'surfaceElevee', nature: 'courant' },
-    { premierPlan: 'surAvertissement', arrierePlan: 'avertissement', nature: 'courant' },
-    {
-        premierPlan: 'surAvertissementDiscret',
-        arrierePlan: 'avertissementDiscret',
-        nature: 'courant',
-    },
-    { premierPlan: 'avertissement', arrierePlan: 'surface', nature: 'courant' },
-    { premierPlan: 'avertissement', arrierePlan: 'fond', nature: 'courant' },
-    { premierPlan: 'avertissement', arrierePlan: 'surfaceElevee', nature: 'courant' },
-    { premierPlan: 'surDanger', arrierePlan: 'danger', nature: 'courant' },
-    { premierPlan: 'surDanger', arrierePlan: 'dangerSurvol', nature: 'courant' },
-    { premierPlan: 'surDangerDiscret', arrierePlan: 'dangerDiscret', nature: 'courant' },
-    { premierPlan: 'danger', arrierePlan: 'surface', nature: 'courant' },
-    { premierPlan: 'danger', arrierePlan: 'fond', nature: 'courant' },
-    { premierPlan: 'danger', arrierePlan: 'surfaceElevee', nature: 'courant' },
-    // Les surfaces flottantes — dialogues, messages ephemeres — sont
-    // `surfaceElevee` : ce qui s'y lit se verifie sur elle aussi.
-    { premierPlan: 'texteDiscret', arrierePlan: 'surfaceElevee', nature: 'courant' },
-    { premierPlan: 'primaire', arrierePlan: 'fond', nature: 'courant' },
-    { premierPlan: 'primaire', arrierePlan: 'surfaceElevee', nature: 'courant' },
+	...surChacune("texte", [
+		...SURFACES_DE_LECTURE,
+		"surfaceSurvolElevee",
+		"surfaceCouranteElevee",
+		"surfaceActive"
+	]),
+	...surChacune("texteDiscret", [
+		...SURFACES_DE_LECTURE,
+		"surfaceSurvolElevee",
+		"surfaceActive"
+	]),
+	...surChacune("texteAttenue", SURFACES_DE_LECTURE),
+	...surChacune("textePrimaire", [
+		"fond",
+		"surface",
+		"surfaceElevee",
+		"surfaceConteneurBas",
+		"surfaceSelection",
+		"primaireDiscret"
+	]),
+	{
+		premierPlan: "texteInverse",
+		arrierePlan: "surfaceInverse",
+		nature: "courant"
+	},
+	{
+		premierPlan: "texteInverse",
+		arrierePlan: "primaire",
+		nature: "courant"
+	},
+	{
+		premierPlan: "texteSurMarque",
+		arrierePlan: "surfaceMarque",
+		nature: "courant"
+	},
+	{
+		premierPlan: "texteSurMarqueDiscret",
+		arrierePlan: "surfaceMarque",
+		nature: "courant"
+	},
+	...surChacune("bordureForte", [
+		"surface",
+		"fond",
+		"surfaceEnfoncee",
+		"surfaceConteneurBas"
+	], "composant"),
+	...surChacune("bordureSelection", ["surfaceSelection", "surface"], "composant"),
+	...surChacune("anneauFocus", [
+		"surface",
+		"fond",
+		"surfaceElevee",
+		"lisereFocus",
+		"surfaceCouranteElevee",
+		"dangerDiscretCourant"
+	], "composant"),
+	{
+		premierPlan: "surSelection",
+		arrierePlan: "selection",
+		nature: "courant"
+	},
+	...surChacune("surPrimaire", [
+		"primaire",
+		"primaireSurvol",
+		"primaireActif"
+	]),
+	{
+		premierPlan: "surPrimaireDiscret",
+		arrierePlan: "primaireDiscret",
+		nature: "courant"
+	},
+	{
+		premierPlan: "surPrimaireAttenue",
+		arrierePlan: "primaireAttenue",
+		nature: "courant"
+	},
+	...surChacune("primaire", [
+		"surface",
+		"fond",
+		"surfaceElevee",
+		"primaireDiscret",
+		"surfaceSelection"
+	]),
+	{
+		premierPlan: "primaire",
+		arrierePlan: "surfaceCouranteElevee",
+		nature: "composant"
+	},
+	...surChacune("surAccent", ["accent", "accentSurvol"]),
+	{
+		premierPlan: "surAccentDiscret",
+		arrierePlan: "accentDiscret",
+		nature: "courant"
+	},
+	...surChacune("accent", [
+		"surface",
+		"fond",
+		"accentDiscret"
+	]),
+	{
+		premierPlan: "surInformation",
+		arrierePlan: "information",
+		nature: "courant"
+	},
+	{
+		premierPlan: "surInformationDiscret",
+		arrierePlan: "informationDiscret",
+		nature: "courant"
+	},
+	...surChacune("information", [...SURFACES_DE_STATUT, "informationDiscret"]),
+	{
+		premierPlan: "surSucces",
+		arrierePlan: "succes",
+		nature: "courant"
+	},
+	{
+		premierPlan: "surSuccesDiscret",
+		arrierePlan: "succesDiscret",
+		nature: "courant"
+	},
+	...surChacune("succes", [...SURFACES_DE_STATUT, "succesDiscret"]),
+	{
+		premierPlan: "surAvertissement",
+		arrierePlan: "avertissement",
+		nature: "courant"
+	},
+	{
+		premierPlan: "surAvertissementDiscret",
+		arrierePlan: "avertissementDiscret",
+		nature: "courant"
+	},
+	...surChacune("avertissement", [...SURFACES_DE_STATUT, "avertissementDiscret"]),
+	...surChacune("surDanger", [
+		"danger",
+		"dangerSurvol",
+		"dangerActif"
+	]),
+	{
+		premierPlan: "surDangerDiscret",
+		arrierePlan: "dangerDiscret",
+		nature: "courant"
+	},
+	...surChacune("danger", [
+		...SURFACES_DE_STATUT,
+		"dangerDiscret",
+		"dangerDiscretCourant"
+	]),
+	...surChacune("positif", [
+		"surface",
+		"fond",
+		"surfaceConteneurBas"
+	]),
+	...surChacune("negatif", ["surface", "fond"])
 ];
-const exemptesDeContraste = [
-    {
-        jeton: 'bordure',
-        raison: 'Separateur decoratif (bord de carte, filet de tableau). WCAG 1.4.11 ne ' +
-            "s'applique qu'aux bordures porteuses d'information ; celle qui identifie " +
-            'un champ est `bordureForte`, elle, controlee a 3:1.',
-    },
-    {
-        jeton: 'texteDesactive',
-        raison: 'WCAG 1.4.3 exempte explicitement les commandes desactivees. Le statut ' +
-            "desactive n'est jamais porte par la seule couleur : l'attribut aria le dit.",
-    },
+const exemptesDeContraste = [{
+	jeton: "bordure",
+	raison: "Separateur decoratif (bord de carte, filet de tableau). WCAG 1.4.11 ne s'applique qu'aux bordures porteuses d'information ; celle qui identifie un champ est `bordureForte`, elle, controlee a 3:1."
+}, {
+	jeton: "texteDesactive",
+	raison: "WCAG 1.4.3 exempte explicitement les commandes desactivees. Le statut desactive n'est jamais porte par la seule couleur : l'attribut aria le dit."
+}];
+const pairesExclues = [
+	{
+		premierPlan: "texteAttenue",
+		arrierePlan: "surfaceActive",
+		raison: "4,30:1 en clair (#656874 sur #dde3ee, D17), 3,59:1 en sombre. Sur une surface active, une aide se compose en `texteDiscret` (audit Claude Design §3.2 #3)."
+	},
+	{
+		premierPlan: "texteAttenue",
+		arrierePlan: "surfaceSurvolElevee",
+		raison: "4,13:1 en sombre (#9da2a8 sur #383f49). Une entree de menu survolee garde son texte en `texte` ou `texteDiscret`."
+	},
+	{
+		premierPlan: "texteDiscret",
+		arrierePlan: "surfaceCouranteElevee",
+		raison: "4,11:1 en sombre (#bdc1c7 sur #4f565e). L entree courante d un menu passe son texte en `texte` (6,74:1), son suffixe aussi en sombre."
+	}
 ];
-/** Seuil de perceptibilite des jetons exemptes : ils n'ont pas de minimum
- * normatif, mais un separateur invisible ne separe rien. */
 const SEUIL_DE_PERCEPTIBILITE = 1.2;
+const ecartsDeSurface = [
+	{
+		devant: "surfaceEnfoncee",
+		derriere: "surface",
+		minimum: 1.12,
+		pourquoi: "le creux (champ en lecture seule, puits) se voit sur une carte"
+	},
+	{
+		devant: "surfaceSurvol",
+		derriere: "surface",
+		minimum: 1.12,
+		pourquoi: "une ligne survolee se distingue de ses voisines"
+	},
+	{
+		devant: "surfaceSurvolElevee",
+		derriere: "surfaceElevee",
+		minimum: 1.15,
+		pourquoi: "une entree de menu survolee se voit dans les deux themes (D1)"
+	},
+	{
+		devant: "surfaceCouranteElevee",
+		derriere: "surfaceElevee",
+		minimum: 1.15,
+		pourquoi: "l'entree courante d'un menu se voit dans les deux themes (lot 231)"
+	},
+	{
+		devant: "dangerDiscretCourant",
+		derriere: "surfaceElevee",
+		minimum: 1.2,
+		pourquoi: "l'entree danger courante d'un menu se voit dans les deux themes (lot 231)"
+	},
+	{
+		devant: "surfaceActive",
+		derriere: "surfaceSurvol",
+		minimum: 1.1,
+		pourquoi: "l'etat enfonce differe du survol"
+	},
+	{
+		devant: "surfaceConteneurHaut",
+		derriere: "surfaceConteneurBas",
+		minimum: 1.1,
+		pourquoi: "le survol d un lien de navigation se voit sur son panneau"
+	},
+	{
+		devant: "surfaceConteneurBas",
+		derriere: "surface",
+		minimum: 1.05,
+		pourquoi: "un en-tete de tableau ou un pied se detache de la carte qui le porte"
+	}
+];
+const surfacesDuFocus = [
+	"surface",
+	"fond",
+	"surfaceElevee",
+	"surfaceEnfoncee",
+	"surfaceConteneurBas",
+	"surfaceConteneurHaut",
+	"surfaceSelection",
+	"surfaceActive",
+	"surfaceMarque",
+	"surfaceInverse",
+	"primaire",
+	"primaireSurvol",
+	"danger",
+	"accent",
+	"succes",
+	"information",
+	"avertissement"
+];
+const COUCHES = [
+	"repos",
+	"survol",
+	"surelevee",
+	"flottante",
+	"modale"
+];
+function memeCouleur(couleur) {
+	return {
+		clair: couleur,
+		sombre: couleur
+	};
+}
+const ombres = {
+	repos: [{
+		geometrie: "0 1px 2px 0",
+		couleur: memeCouleur("rgb(0 0 0 / 0.05)")
+	}],
+	survol: [{
+		geometrie: "0 4px 6px -1px",
+		couleur: memeCouleur("rgb(0 0 0 / 0.1)")
+	}, {
+		geometrie: "0 2px 4px -2px",
+		couleur: memeCouleur("rgb(0 0 0 / 0.1)")
+	}],
+	surelevee: [{
+		geometrie: "0 10px 15px -3px",
+		couleur: memeCouleur("rgb(0 0 0 / 0.1)")
+	}, {
+		geometrie: "0 4px 6px -4px",
+		couleur: memeCouleur("rgb(0 0 0 / 0.1)")
+	}],
+	flottante: [{
+		geometrie: "0 20px 25px -5px",
+		couleur: memeCouleur("rgb(0 0 0 / 0.1)")
+	}, {
+		geometrie: "0 8px 10px -6px",
+		couleur: memeCouleur("rgb(0 0 0 / 0.1)")
+	}],
+	modale: [{
+		geometrie: "0 16px 32px -8px",
+		couleur: {
+			clair: "rgb(7 13 20 / 0.14)",
+			sombre: "rgb(0 0 0 / 0.48)"
+		}
+	}, {
+		geometrie: "0 32px 64px -16px",
+		couleur: {
+			clair: "rgb(7 13 20 / 0.2)",
+			sombre: "rgb(0 0 0 / 0.56)"
+		}
+	}]
+};
+const voile = {
+	clair: "rgb(7 13 20 / 0.48)",
+	sombre: "rgb(0 0 0 / 0.64)"
+};
+const couleurDOmbre = {
+	clair: "rgb(0 0 0 / 0.2)",
+	sombre: "rgb(0 0 0 / 0.6)"
+};
+function ombreDuTheme(couche, theme) {
+	return ombres[couche].map((c) => `${c.geometrie} ${c.couleur[theme]}`).join(", ");
+}
+function rolesDesPrimitives() {
+	const roles = /* @__PURE__ */ new Map();
+	for (const nomDeTheme of ["clair", "sombre"]) {
+		const entrees = Object.entries(themes[nomDeTheme]);
+		for (const [jeton, valeur] of entrees) {
+			const liste = roles.get(valeur) ?? [];
+			liste.push(`${jeton} (${nomDeTheme})`);
+			roles.set(valeur, liste);
+		}
+	}
+	return roles;
+}
+const stylesTypographiques = {
+	corps: {
+		taille: "md",
+		graisse: "normale",
+		interlettrage: "normal",
+		usage: "texte courant"
+	},
+	"corps-petit": {
+		taille: "sm",
+		graisse: "normale",
+		interlettrage: "normal",
+		usage: "texte secondaire"
+	},
+	"corps-fort": {
+		taille: "md",
+		graisse: "semi",
+		interlettrage: "normal",
+		usage: "intitule de ligne, valeur secondaire (D5)"
+	},
+	"corps-grand": {
+		taille: "lg",
+		graisse: "normale",
+		interlettrage: "normal",
+		usage: "texte d introduction, mention juridique (18/28, DESIGN.md body-lg)"
+	},
+	legende: {
+		taille: "xs",
+		graisse: "moyenne",
+		interlettrage: "large",
+		usage: "legende, etiquette de badge"
+	},
+	libelle: {
+		taille: "sm",
+		graisse: "moyenne",
+		interlettrage: "normal",
+		usage: "libelle de champ, onglet (D18 : 14/500)"
+	},
+	commande: {
+		taille: "sm",
+		graisse: "semi",
+		interlettrage: "normal",
+		usage: "libelle de bouton de 44 px (14/20 600, majorite des planches)"
+	},
+	etiquette: {
+		taille: "xs",
+		graisse: "semi",
+		interlettrage: "etiquette",
+		usage: "en-tete de colonne, etiquette de statut (12/16 600, DESIGN.md label-md)"
+	},
+	"micro-capitales": {
+		taille: "2xs",
+		graisse: "semi",
+		interlettrage: "capitales",
+		capitales: true,
+		usage: "en-tete de colonne, terme de liste, statut en capitales (seul lecteur de 2xs)"
+	},
+	surtitre: {
+		taille: "2xs",
+		graisse: "semi",
+		interlettrage: "surtitre",
+		capitales: true,
+		usage: "surtitre de page ou de section, en capitales espacees"
+	},
+	"titre-4": {
+		taille: "lg",
+		interligne: "md",
+		graisse: "semi",
+		interlettrage: "approche",
+		usage: "intertitre, titre de dialogue et de carte (18/24)"
+	},
+	"titre-3": {
+		taille: "xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		usage: "titre de section"
+	},
+	"titre-2": {
+		taille: "2xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		usage: "titre de bloc majeur"
+	},
+	"titre-1": {
+		taille: "3xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		usage: "titre de page (h1 de 32 px, D18)"
+	},
+	affichage: {
+		taille: "4xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		usage: "annonce, titre d ecran de marque"
+	},
+	"affichage-grand": {
+		taille: "6xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		usage: "grand chiffre de tableau de bord (56/64, DESIGN.md display-lg)"
+	},
+	"chiffre-cle": {
+		taille: "3xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		chiffres: "alignes",
+		usage: "valeur de st-stat"
+	},
+	montant: {
+		taille: "md",
+		graisse: "moyenne",
+		interlettrage: "normal",
+		chiffres: "alignes",
+		usage: "st-money, cellule numerique"
+	},
+	"montant-hero": {
+		taille: "4xl",
+		graisse: "semi",
+		interlettrage: "approche",
+		chiffres: "alignes",
+		usage: "solde de compte (40/48, planche 2)"
+	},
+	reference: {
+		taille: "sm",
+		graisse: "normale",
+		interlettrage: "large",
+		chiffres: "references",
+		famille: "mono",
+		usage: "IBAN, identifiant, reference de virement"
+	},
+	code: {
+		taille: "sm",
+		graisse: "normale",
+		interlettrage: "normal",
+		chiffres: "references",
+		famille: "mono",
+		usage: "st-code"
+	}
+};
+function interlettrageEnCss(style) {
+	if (style.interlettrage !== "approche") return `var(--st-interlettrage-${style.interlettrage})`;
+	if (!(style.taille in typographie.approche)) throw new Error(`Aucune approche de titre pour la taille ${style.taille}.`);
+	return `var(--st-approche-${style.taille})`;
+}
+function interlettrageDuStyle(nom) {
+	const style = stylesTypographiques[nom];
+	if (style.interlettrage !== "approche") return typographie.interlettrage[style.interlettrage];
+	return typographie.approche[style.taille] ?? "normal";
+}
+function declarationsDuStyle(nom) {
+	const style = stylesTypographiques[nom];
+	return [
+		...style.famille === "mono" ? ["font-family: var(--st-police-mono);"] : [],
+		`font-size: var(--st-taille-${style.taille});`,
+		`line-height: var(--st-interligne-${style.interligne ?? style.taille});`,
+		`font-weight: var(--st-graisse-${style.graisse});`,
+		`letter-spacing: ${interlettrageEnCss(style)};`,
+		...style.chiffres === void 0 ? [] : [`font-variant-numeric: var(--st-chiffres-${style.chiffres});`],
+		...style.capitales === true ? ["text-transform: uppercase;"] : []
+	];
+}
+function partielDeTypographie() {
+	const noms = Object.keys(stylesTypographiques);
+	const branches = noms.map((nom, i) => {
+		return `  ${i === 0 ? "@if" : "} @else if"} $nom == '${nom}' {\n${declarationsDuStyle(nom).map((d) => `    ${d}`).join("\n")}\n`;
+	});
+	return `// Engendre par @starterlib/tokens \u2014 ne pas modifier a la main.
+// Regenerer : pnpm tokens:css
+//
+// Styles typographiques composites : taille, interligne, graisse, interlettrage et
+// chiffres, jamais de couleur. Une seule notation : \`@include style('titre-2')\`.
+// Les valeurs sont LUES dans la feuille de jetons (var(--st-*)) : l'impression, qui
+// passe les tailles en points, et la densite s'appliquent aux styles aussi.
+
+$styles: (${noms.map((n) => `'${n}'`).join(", ")});
 
+@mixin style($nom) {
+${branches.join("")}  } @else {
+    @error "Style typographique inconnu : #{$nom}. Admis : #{$styles}.";
+  }
+}
+`;
+}
+const LATIN = "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD";
+const LATIN_ETENDU = "U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF";
+const policesDuSocle = [{
+	famille: "Inter Variable",
+	graisses: "100 900",
+	paquet: "@fontsource-variable/inter",
+	fichiers: [{
+		fichier: "inter-latin-ext-wght-normal.woff2",
+		unicodeRange: LATIN_ETENDU,
+		aPrecharger: false
+	}, {
+		fichier: "inter-latin-wght-normal.woff2",
+		unicodeRange: LATIN,
+		aPrecharger: true
+	}],
+	metriques: {
+		unitesParEm: 2048,
+		ascendante: 1984,
+		descendante: 494,
+		interligneAjoute: 0,
+		chasseMoyenne: 969.74
+	},
+	repli: {
+		famille: "Inter Repli",
+		locales: [
+			"Arial",
+			"ArialMT",
+			"Liberation Sans",
+			"Arimo"
+		],
+		metriques: {
+			unitesParEm: 2048,
+			ascendante: 1854,
+			descendante: 434,
+			interligneAjoute: 67,
+			chasseMoyenne: 904
+		}
+	}
+}, {
+	famille: "JetBrains Mono Variable",
+	graisses: "100 800",
+	paquet: "@fontsource-variable/jetbrains-mono",
+	fichiers: [{
+		fichier: "jetbrains-mono-latin-ext-wght-normal.woff2",
+		unicodeRange: LATIN_ETENDU,
+		aPrecharger: false
+	}, {
+		fichier: "jetbrains-mono-latin-wght-normal.woff2",
+		unicodeRange: LATIN,
+		aPrecharger: false
+	}],
+	metriques: {
+		unitesParEm: 1e3,
+		ascendante: 1020,
+		descendante: 300,
+		interligneAjoute: 0,
+		chasseMoyenne: 600
+	},
+	repli: {
+		famille: "JetBrains Mono Repli",
+		locales: [
+			"Courier New",
+			"CourierNewPSMT",
+			"Liberation Mono",
+			"Cousine"
+		],
+		metriques: {
+			unitesParEm: 2048,
+			ascendante: 1705,
+			descendante: 615,
+			interligneAjoute: 0,
+			chasseMoyenne: 1229
+		}
+	}
+}];
+function pourcent(valeur) {
+	return `${(Math.round(valeur * 1e4) / 100).toFixed(2)}%`;
+}
+function surchargesDuRepli(police) {
+	const p = police.metriques;
+	const r = police.repli.metriques;
+	const agrandissement = p.chasseMoyenne / p.unitesParEm / (r.chasseMoyenne / r.unitesParEm);
+	return {
+		sizeAdjust: pourcent(agrandissement),
+		ascentOverride: pourcent(p.ascendante / p.unitesParEm / agrandissement),
+		descentOverride: pourcent(p.descendante / p.unitesParEm / agrandissement),
+		lineGapOverride: pourcent(p.interligneAjoute / p.unitesParEm / agrandissement)
+	};
+}
+function fichiersAPrecharger() {
+	return policesDuSocle.flatMap((p) => p.fichiers.filter((f) => f.aPrecharger).map((f) => f.fichier));
+}
+function feuilleDesPolices() {
+	const blocs = policesDuSocle.flatMap((police) => {
+		const faces = police.fichiers.map((f) => `@font-face {
+  font-family: '${police.famille}';
+  font-style: normal;
+  font-weight: ${police.graisses};
+  font-display: optional;
+  src: url('./polices/${f.fichier}') format('woff2');
+  unicode-range: ${f.unicodeRange};
+}`);
+		const s = surchargesDuRepli(police);
+		const repli = `@font-face {
+  font-family: '${police.repli.famille}';
+  src: ${police.repli.locales.map((l) => `local('${l}')`).join(", ")};
+  size-adjust: ${s.sizeAdjust};
+  ascent-override: ${s.ascentOverride};
+  descent-override: ${s.descentOverride};
+  line-gap-override: ${s.lineGapOverride};
+}`;
+		return [...faces, repli];
+	});
+	return `/* Engendre par @starterlib/tokens \u2014 ne pas modifier a la main.
+   Regenerer : pnpm tokens:css
+
+   Polices du socle, auto-hebergees (SIL OFL 1.1, voir polices/LICENSE-*.txt).
+   Recette : docs/recettes/police.md. A precharger par l'hote :
+${fichiersAPrecharger().map((f) => `     <link rel="preload" href="\u2026/polices/${f}" as="font" type="font/woff2" crossorigin>`).join("\n")}
+   Repli METRISE : memes hauteur de ligne et chasse moyenne que la police, calculees
+   sur le fichier livre (tools/verifier-police.mjs). */
+
+${blocs.join("\n\n")}
+`;
+}
 const jetonsDeComposant = [
-    {
-        nom: '--st-commande-hauteur',
-        repli: 'var(--st-cible-tactile-min)',
-        role: 'Hauteur MINIMALE commune des boutons, champs et listes deroulantes. Une ' +
-            'seule valeur pour tous : une ligne ou le champ fait 44 px et le bouton 40 ' +
-            'se voit tout de suite. Sous la hauteur du contenu, la commande grandit ' +
-            'plutot que de rogner son texte.',
-    },
-    {
-        nom: '--st-commande-rayon',
-        repli: 'var(--st-rayon-md)',
-        role: "Rayon des commandes. C'est le reglage d'identite le plus demande.",
-    },
-    {
-        nom: '--st-surface-rayon',
-        repli: 'var(--st-rayon-md)',
-        role: 'Rayon des surfaces qui portent du contenu : carte, dialogue, menu, popover.',
-    },
-    {
-        nom: '--st-tableau-cellule-bloc',
-        repli: 'var(--st-espacement-3)',
-        role: "Respiration verticale d'une cellule : c'est par elle que passe la densite.",
-    },
-    {
-        nom: '--st-tableau-cellule-ligne',
-        repli: 'var(--st-espacement-3)',
-        role: 'Respiration horizontale d une cellule.',
-    },
-    {
-        nom: '--st-tableau-largeur-case',
-        repli: '3rem',
-        role: 'Largeur de la colonne des cases a cocher ; la colonne figee suivante se decale d autant.',
-    },
-    {
-        nom: '--st-calendrier-jour-taille',
-        repli: 'var(--st-cible-tactile-min)',
-        role: 'Cote d une case de jour. Un calendrier dense reste au-dessus de la cible minimale.',
-    },
-    {
-        nom: '--st-anim-chargement',
-        repli: 'une duree propre a chaque indicateur',
-        role: "Rythme d'un indicateur d'activite. ⚠️ Hors de l'echelle des durees, qui " +
-            'passe a zero sous mouvement reduit : un indicateur fige ferait croire a un ecran bloque.',
-    },
-    {
-        nom: '--st-anim-respiration',
-        repli: '1600ms',
-        role: 'Rythme de la respiration qui remplace le mouvement sous `prefers-reduced-motion`.',
-    },
+	{
+		nom: "--st-commande-hauteur",
+		repli: "var(--st-hauteur-commande-defaut)",
+		role: "Hauteur MINIMALE commune des boutons, champs et listes deroulantes. Une seule valeur pour tous : une ligne ou le champ fait 44 px et le bouton 40 se voit tout de suite. Le repli suit la densite (44 / 36 / 32, 44 au doigt). Un reglage plus court ne descend jamais sous le plancher des commandes (D4) : 32 px au pointeur fin, 44 au doigt.",
+		lecteurs: [
+			"st-button",
+			"st-icon-button",
+			"_champ-natif"
+		]
+	},
+	{
+		nom: "--st-commande-rayon",
+		repli: "var(--st-rayon-md)",
+		role: "Rayon des commandes. C'est le reglage d'identite le plus demande.",
+		lecteurs: [
+			"st-button",
+			"st-icon-button",
+			"_champ-natif"
+		]
+	},
+	{
+		nom: "--st-surface-rayon",
+		repli: "var(--st-rayon-md)",
+		role: "Rayon des surfaces flottantes qui portent du contenu : menu, popover, dialogue, message.",
+		lecteurs: [
+			"st-menu",
+			"st-popover",
+			"st-dialog-container",
+			"st-toast-message"
+		]
+	},
+	{
+		nom: "--st-carte-rayon",
+		repli: "var(--st-rayon-lg)",
+		role: "Rayon de la carte, la surface la plus chartee : 12 px, distinct des surfaces flottantes.",
+		lecteurs: ["st-card"]
+	},
+	{
+		nom: "--st-tableau-cellule-bloc",
+		repli: "var(--st-espacement-0)",
+		role: "Respiration verticale d'une cellule ; aucune par defaut : la hauteur de ligne du mode fait le rythme (D29).",
+		lecteurs: ["st-data-table"]
+	},
+	{
+		nom: "--st-tableau-cellule-ligne",
+		repli: "calc(var(--st-densite-cellule-ligne) + var(--st-espacement-1))",
+		role: "Respiration horizontale d'une cellule ; le repli suit la densite (16 / 16 / 12 px).",
+		lecteurs: ["st-data-table"]
+	},
+	{
+		nom: "--st-tableau-largeur-case",
+		repli: "var(--st-espacement-12)",
+		role: "Largeur de la colonne des cases a cocher ; la colonne figee suivante se decale d autant.",
+		lecteurs: ["st-data-table"]
+	},
+	{
+		nom: "--st-calendrier-jour-taille",
+		repli: "var(--st-calendrier-jour-defaut)",
+		role: "Cote d une case de jour. Un calendrier dense reste au-dessus de la cible minimale.",
+		lecteurs: ["st-calendar"]
+	},
+	{
+		nom: "--st-anim-chargement",
+		repli: "var(--st-cadence-vive) ou var(--st-cadence-normale)",
+		role: "Rythme d'un indicateur d'activite. ⚠️ Hors de l'echelle des durees, qui passe a zero sous mouvement reduit : un indicateur fige ferait croire a un ecran bloque. Borne par --st-cadence-min : on ralentit une boucle, on ne l eteint pas.",
+		lecteurs: [
+			"st-spinner",
+			"st-progress",
+			"st-skeleton"
+		]
+	},
+	{
+		nom: "--st-anim-respiration",
+		repli: "var(--st-cadence-respiration)",
+		role: "Rythme de la respiration qui remplace le mouvement sous mouvement reduit. Borne par --st-cadence-min.",
+		lecteurs: [
+			"st-spinner",
+			"st-progress",
+			"st-skeleton"
+		]
+	},
+	{
+		nom: "--st-coquille-largeur-navigation",
+		repli: "var(--st-largeur-navigation)",
+		role: "Largeur de la navigation laterale de la coquille : un reglage de coquille legitime.",
+		lecteurs: ["st-app-shell"]
+	},
+	{
+		nom: "--st-separateur-marge",
+		repli: "var(--st-espacement-4)",
+		role: "Marge d'un separateur : le reglage de rythme vertical le plus pose par une SPA.",
+		lecteurs: ["st-divider"]
+	},
+	{
+		nom: "--st-champ-largeur-libelle",
+		repli: "var(--st-largeur-champ-md)",
+		role: "Largeur de la colonne des libelles d un formulaire en ligne (libelle a gauche du champ).",
+		lecteurs: ["st-form-field"]
+	},
+	{
+		nom: "--st-liste-hauteur-max",
+		repli: "18rem",
+		role: "Hauteur maximale d une liste deroulante avant defilement (combobox, choix multiple).",
+		lecteurs: ["_liste"]
+	}
+];
+const contratsDHote = [
+	"--st-hauteur-entete",
+	"--st-form-actions-hauteur",
+	"--st-choix-interligne",
+	"--st-choix-graisse",
+	"--st-choix-couleur",
+	"--st-menu-curseur",
+	"--st-switch-rail",
+	"--st-switch-curseur"
+];
+const variablesInternes = [
+	"--st-icone-taille",
+	"--st-avatar-taille",
+	"--st-spinner-taille",
+	"--st-logo-hauteur",
+	"--st-progress-part",
+	"--st-text-lignes",
+	"--st-arbre-niveau",
+	"--st-tableau-plan-figee",
+	"--st-tableau-plan-entete",
+	"--st-tableau-plan-coin",
+	"--st-skeleton-derniere"
 ];
-/** Vrai si la propriete fait partie du catalogue public. */
 function estJetonDeComposant(nom) {
-    return jetonsDeComposant.some((jeton) => jeton.nom === nom);
+	return jetonsDeComposant.some((jeton) => jeton.nom === nom);
+}
+const PREFIXE = "--st";
+function enKebab(valeur) {
+	return valeur.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
-
-/**
- * Les proprietes CSS personnalisees sont ENGENDREES depuis les jetons
- * TypeScript, jamais ecrites a la main en parallele. Deux sources de verite
- * pour une meme couleur finissent toujours par diverger ; ici la derive est
- * impossible, et la CI verifie que le fichier livre correspond au code.
- */
-const PREFIXE = '--st';
 function aplatir(prefixe, valeurs) {
-    const entrees = Object.entries(valeurs);
-    return entrees.map(([cle, valeur]) => `  ${prefixe}-${cle}: ${valeur};`);
+	return Object.entries(valeurs).map(([cle, valeur]) => `  ${prefixe}-${enKebab(cle)}: ${valeur};`);
 }
-function couleursEnCss(jetons) {
-    const entrees = Object.entries(jetons);
-    return entrees.map(([cle, valeur]) => `  ${PREFIXE}-couleur-${enKebab(cle)}: ${valeur};`);
+function selonLeTheme(clair, sombre) {
+	return clair === sombre ? clair : `light-dark(${clair}, ${sombre})`;
 }
-function enKebab(valeur) {
-    return valeur.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+function nomDeCouleur(jeton) {
+	return `${PREFIXE}-couleur-${enKebab(jeton)}`;
+}
+function couleursEnCss() {
+	return Object.keys(themeClair).map((jeton) => `  ${nomDeCouleur(jeton)}: ${selonLeTheme(themeClair[jeton], themeSombre[jeton])};`);
+}
+function ombresEnCss() {
+	return [
+		`  ${PREFIXE}-ombre-none: none;`,
+		...COUCHES.map((couche) => {
+			const valeur = ombres[couche].map((c) => `${c.geometrie} ${selonLeTheme(c.couleur.clair, c.couleur.sombre)}`).join(", ");
+			return `  ${PREFIXE}-ombre-${couche}: ${valeur};`;
+		}),
+		`  ${PREFIXE}-voile: ${selonLeTheme(voile.clair, voile.sombre)};`,
+		`  ${PREFIXE}-couleur-ombre: ${selonLeTheme(couleurDOmbre.clair, couleurDOmbre.sombre)};`
+	];
 }
-/** Jetons invariants : ils ne dependent pas du theme. */
 function cssDesEchelles() {
-    return [
-        ...aplatir(`${PREFIXE}-espacement`, espacement),
-        ...aplatir(`${PREFIXE}-rayon`, rayon),
-        ...aplatir(`${PREFIXE}-ombre`, ombre),
-        ...aplatir(`${PREFIXE}-duree`, duree),
-        ...aplatir(`${PREFIXE}-courbe`, courbe),
-        ...aplatir(`${PREFIXE}-plan`, plan),
-        ...aplatir(`${PREFIXE}-rupture`, rupture),
-        ...aplatir(`${PREFIXE}-police`, typographie.famille),
-        ...aplatir(`${PREFIXE}-taille`, typographie.taille),
-        ...aplatir(`${PREFIXE}-graisse`, typographie.graisse),
-        ...aplatir(`${PREFIXE}-interligne`, typographie.interligne),
-        ...aplatir(`${PREFIXE}-epaisseur`, epaisseur),
-        ...aplatir(`${PREFIXE}-mesure`, mesure),
-        `  ${PREFIXE}-cible-tactile-min: ${cibleTactileMinimale};`,
-        `  ${PREFIXE}-cible-min: ${cibleMinimale};`,
-    ].join('\n');
-}
-function cssDuTheme(theme) {
-    return couleursEnCss(themes[theme]).join('\n');
-}
-/**
- * Feuille complete. Le theme clair est la valeur par defaut ; le sombre
- * s'applique soit par preference systeme, soit par attribut explicite, et
- * l'attribut l'emporte dans les deux sens (un utilisateur qui choisit le
- * clair sur un systeme sombre doit obtenir le clair).
- *
- * Elle porte aussi les trois derogations qui obeissent a la PERSONNE et non au
- * theme : mouvement reduit (durees a zero), contraste renforce (filet fort,
- * texte discret rendu comme texte), impression (jetons clairs forces) — et le
- * decalage de defilement qui garde un focus hors de l'en-tete collant.
- *
- * ⚠️ `color-scheme` suit le theme EFFECTIF, il n'est pas pose une fois pour
- * toutes a `light dark` : ce dernier laisse le navigateur decider seul, si bien
- * qu'un theme clair force sur un systeme sombre gardait des barres de
- * defilement, des champs natifs et un remplissage automatique sombres.
- */
-/**
- * Catalogue des reglages de composant, en COMMENTAIRE.
- *
- * ⚠️ Ils ne sont pas declares : une declaration a la racine serait masquee par
- * celle d'un composant, et surtout elle laisserait croire qu'on les change ici.
- * Ils se posent la ou on veut regler — racine, zone, instance.
- */
+	return [
+		...aplatir(`${PREFIXE}-espacement`, espacement),
+		...aplatir(`${PREFIXE}-rayon`, rayon),
+		...aplatir(`${PREFIXE}-duree`, duree),
+		...aplatir(`${PREFIXE}-courbe`, courbe),
+		...aplatir(`${PREFIXE}-deplacement`, deplacement),
+		...aplatir(`${PREFIXE}-cadence`, cadence),
+		`  ${PREFIXE}-cadence-min: ${cadenceMinimale};`,
+		...aplatir(`${PREFIXE}-plan`, plan),
+		...aplatir(`${PREFIXE}-police`, typographie.famille),
+		...aplatir(`${PREFIXE}-taille`, typographie.taille),
+		...aplatir(`${PREFIXE}-interligne`, typographie.interligne),
+		...aplatir(`${PREFIXE}-graisse`, typographie.graisse),
+		...aplatir(`${PREFIXE}-interlettrage`, typographie.interlettrage),
+		...aplatir(`${PREFIXE}-approche`, typographie.approche),
+		...aplatir(`${PREFIXE}-chiffres`, typographie.chiffres),
+		...aplatir(`${PREFIXE}-epaisseur`, epaisseur),
+		`  ${PREFIXE}-epaisseur-capillaire: ${epaisseurCapillaire.base};`,
+		...aplatir(`${PREFIXE}-largeur`, largeur),
+		...aplatir(`${PREFIXE}-hauteur-commande`, hauteurDeCommande),
+		...aplatir(`${PREFIXE}-focus`, focus),
+		`  ${PREFIXE}-cible-tactile-min: ${cibleTactileMinimale};`,
+		`  ${PREFIXE}-cible-min: ${cibleMinimale};`
+	].join("\n");
+}
+function cssDuTheme() {
+	return [...couleursEnCss(), ...ombresEnCss()].join("\n");
+}
+function variablesDeDensite(mode, retrait = "  ") {
+	return Object.entries(densite[mode]).map(([nom, valeur]) => `${retrait}${PREFIXE}-${nom}: ${valeur};`).join("\n");
+}
 function catalogueDesComposants() {
-    const lignes = jetonsDeComposant.map((jeton) => `     ${jeton.nom} (defaut : ${jeton.repli})`);
-    return `/* Reglages de composant, a poser par l'application la ou elle veut :
-${lignes.join('\n')}
+	return `/* Reglages de composant, a poser par l'application la ou elle veut :
+${jetonsDeComposant.map((jeton) => `     ${jeton.nom} (defaut : ${jeton.repli})`).join("\n")}
    Voir le README de @starterlib/tokens. */`;
 }
-/**
- * Selecteur des DEROGATIONS de la racine : impression, contraste renforce.
- *
- * ⚠️ `:root` seul ne suffirait pas. Le theme sombre s'ecrit sur
- * `:root[data-theme='sombre']` et sur `:root:not([data-theme='clair'])`, deux
- * selecteurs de specificite (0,2,0) ; un `:root` nu ne pese que (0,1,0), et une
- * derogation ecrite dessus perdrait contre eux, meme placee apres. Les deux
- * formes ci-dessous couvrent chaque document — avec ou sans attribut — a
- * specificite egale, et l'emportent par l'ordre.
- */
-const RACINE_QUEL_QUE_SOIT_LE_THEME = `:root[data-theme],
-:root:not([data-theme])`;
-function indenter(bloc) {
-    return bloc
-        .split('\n')
-        .map((ligne) => `  ${ligne}`)
-        .join('\n');
+function dureesAEteindre() {
+	return Object.fromEntries(Object.entries(duree).filter(([, valeur]) => Number.parseFloat(valeur) !== 0).map(([cle]) => [`${PREFIXE}-duree-${enKebab(cle)}`, "0ms"]));
+}
+const mouvementReduit = {
+	...dureesAEteindre(),
+	...Object.fromEntries(Object.keys(deplacement).map((cle) => [`${PREFIXE}-deplacement-${enKebab(cle)}`, "0rem"]))
+};
+const mouvementGele = dureesAEteindre();
+const aliasDeContrasteRenforceParJeton = {
+	bordure: "bordureForte",
+	bordureForte: "texteDiscret",
+	texteDiscret: "texte",
+	texteAttenue: "texteDiscret",
+	texteDesactive: "texteAttenue",
+	surfaceSurvol: "surfaceActive",
+	surfaceSurvolElevee: "surfaceActive",
+	surfaceCouranteElevee: "bordure",
+	surfaceConteneurHaut: "surfaceActive"
+};
+const encresDeContrasteRenforce = {
+	succes: {
+		clair: primitives.vert[700],
+		sombre: themeSombre.succes
+	},
+	avertissement: {
+		clair: primitives.ambre[700],
+		sombre: themeSombre.avertissement
+	}
+};
+function themeSousContrasteRenforce(theme) {
+	const base = theme === "clair" ? themeClair : themeSombre;
+	const rendu = { ...base };
+	for (const [jeton, cible] of Object.entries(aliasDeContrasteRenforceParJeton)) rendu[jeton] = base[cible];
+	for (const [jeton, encres] of Object.entries(encresDeContrasteRenforce)) rendu[jeton] = encres[theme];
+	return rendu;
+}
+const aliasDeContrasteRenforce = {
+	...Object.fromEntries(Object.entries(aliasDeContrasteRenforceParJeton).map(([jeton, cible]) => [nomDeCouleur(jeton), selonLeTheme(themeClair[cible], themeSombre[cible])])),
+	...Object.fromEntries(Object.entries(encresDeContrasteRenforce).map(([jeton, encres]) => [nomDeCouleur(jeton), selonLeTheme(encres.clair, encres.sombre)])),
+	[`${PREFIXE}-focus-epaisseur`]: `var(${PREFIXE}-epaisseur-forte)`
+};
+const couleursSysteme = {
+	Canvas: [
+		"fond",
+		"surface",
+		"surfaceElevee",
+		"surfaceEnfoncee",
+		"surfaceConteneurBas",
+		"surfaceConteneurHaut",
+		"surfaceSurvol",
+		"surfaceSurvolElevee",
+		"surfaceCouranteElevee",
+		"surfaceActive",
+		"surfaceSelection",
+		"surfaceInverse",
+		"surfaceMarque",
+		"lisereFocus",
+		"primaireDiscret",
+		"primaireAttenue",
+		"accentDiscret",
+		"informationDiscret",
+		"succesDiscret",
+		"avertissementDiscret",
+		"dangerDiscret",
+		"dangerDiscretCourant"
+	],
+	CanvasText: [
+		"texte",
+		"texteDiscret",
+		"texteAttenue",
+		"texteInverse",
+		"texteSurMarque",
+		"texteSurMarqueDiscret",
+		"negatif",
+		"bordure",
+		"bordureForte",
+		"accent",
+		"accentSurvol",
+		"information",
+		"succes",
+		"avertissement",
+		"danger",
+		"dangerSurvol",
+		"dangerActif",
+		"positif",
+		"surPrimaireDiscret",
+		"surPrimaireAttenue",
+		"surAccentDiscret",
+		"surInformationDiscret",
+		"surSuccesDiscret",
+		"surAvertissementDiscret",
+		"surDangerDiscret"
+	],
+	GrayText: ["texteDesactive"],
+	LinkText: [
+		"primaire",
+		"primaireSurvol",
+		"primaireActif",
+		"textePrimaire"
+	],
+	Highlight: [
+		"selection",
+		"bordureSelection",
+		"anneauFocus"
+	],
+	HighlightText: ["surSelection"]
+};
+const encresDAplat = [
+	"surPrimaire",
+	"surAccent",
+	"surInformation",
+	"surSucces",
+	"surAvertissement",
+	"surDanger"
+];
+const derogationsDImpression = {
+	fond: "#ffffff",
+	surfaceSurvol: "#ffffff",
+	surfaceActive: "#ffffff",
+	surfaceSelection: "#ffffff",
+	surfaceConteneurBas: "#ffffff",
+	surfaceConteneurHaut: "#ffffff",
+	texte: "#070d14",
+	bordure: "#9da2a8",
+	bordureForte: "#60676f",
+	succes: "#07602f",
+	avertissement: "#783f03",
+	danger: "#960c19",
+	information: "#0b5776",
+	primaireDiscret: "#ffffff",
+	primaireAttenue: "#ffffff",
+	accentDiscret: "#ffffff",
+	informationDiscret: "#ffffff",
+	succesDiscret: "#ffffff",
+	avertissementDiscret: "#ffffff",
+	dangerDiscret: "#ffffff"
+};
+const taillesDImpression = {
+	"2xs": "8pt",
+	xs: "8pt",
+	sm: "9pt",
+	md: "10.5pt",
+	lg: "12pt",
+	xl: "13pt",
+	"2xl": "15pt",
+	"3xl": "18pt",
+	"4xl": "22pt",
+	"5xl": "28pt",
+	"6xl": "32pt"
+};
+function declarations(valeurs, retrait) {
+	return Object.entries(valeurs).map(([nom, valeur]) => `${retrait}${nom}: ${valeur};`).join("\n");
+}
+function blocContrasteForce() {
+	const alias = {};
+	for (const [systeme, jetons] of Object.entries(couleursSysteme)) for (const jeton of jetons) alias[nomDeCouleur(jeton)] = systeme;
+	for (const couche of ["none", ...COUCHES]) alias[`${PREFIXE}-ombre-${couche}`] = "none";
+	alias[`${PREFIXE}-epaisseur-capillaire`] = epaisseurCapillaire.base;
+	return declarations(alias, "    ");
+}
+function blocImpression() {
+	const valeurs = {};
+	for (const [jeton, valeur] of Object.entries(derogationsDImpression)) valeurs[nomDeCouleur(jeton)] = valeur;
+	for (const couche of COUCHES) valeurs[`${PREFIXE}-ombre-${couche}`] = "none";
+	valeurs[`${PREFIXE}-voile`] = "transparent";
+	valeurs[`${PREFIXE}-epaisseur-capillaire`] = epaisseurCapillaire.base;
+	for (const [cle, taille] of Object.entries(taillesDImpression)) valeurs[`${PREFIXE}-taille-${cle}`] = taille;
+	return declarations(valeurs, "    ");
+}
+function affichageSelonLeTheme(theme, retrait = "  ") {
+	const visible = "inline";
+	return [`${retrait}${PREFIXE}-affichage-si-clair: ${theme === "clair" ? visible : "none"};`, `${retrait}${PREFIXE}-affichage-si-sombre: ${theme === "sombre" ? visible : "none"};`].join("\n");
 }
 function feuilleDeJetons() {
-    return `/* Engendre par @starterlib/tokens — ne pas modifier a la main.
+	return `/* Engendre par @starterlib/tokens \u2014 ne pas modifier a la main.
    Regenerer : pnpm tokens:css */
 
 ${catalogueDesComposants()}
 
 :root {
   color-scheme: light;
+${affichageSelonLeTheme("clair")}
 ${cssDesEchelles()}
-${cssDuTheme('clair')}
+${cssDuTheme()}
+${variablesDeDensite("confortable")}
+}
+
+/* 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 {
+    color-scheme: dark;
+${affichageSelonLeTheme("sombre", "    ")}
+  }
 }
 
-:root[data-theme='sombre'] {
+[data-theme='sombre'] {
   color-scheme: dark;
-${cssDuTheme('sombre')}
+${affichageSelonLeTheme("sombre")}
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='clair']) {
-    color-scheme: dark;
-${cssDuTheme('sombre')
-        .split('\n')
-        .map((l) => `  ${l}`)
-        .join('\n')}
+[data-theme='clair'] {
+  color-scheme: light;
+${affichageSelonLeTheme("clair")}
+}
+
+/* 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(${PREFIXE}-couleur-texte);
+}
+
+::selection {
+  color: var(${nomDeCouleur("surSelection")});
+  background: var(${nomDeCouleur("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'] {
+${variablesDeDensite("confortable")}
+}
+
+[data-densite='dense'] {
+${variablesDeDensite("dense")}
+}
+
+[data-densite='compacte'] {
+${variablesDeDensite("compacte")}
+}
+
+@media (pointer: coarse) {
+  :root,
+  [data-densite] {
+    ${PREFIXE}-hauteur-commande-defaut: var(${PREFIXE}-hauteur-commande-xl);
+    ${PREFIXE}-calendrier-jour-defaut: var(${PREFIXE}-cible-tactile-min);
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
+/* Un filet d'un vrai pixel d'ecran sur les dalles haute densite. */
+@media (min-resolution: 2dppx) {
   :root {
-    ${PREFIXE}-duree-rapide: 0ms;
-    ${PREFIXE}-duree-normale: 0ms;
-    ${PREFIXE}-duree-lente: 0ms;
+    ${PREFIXE}-epaisseur-capillaire: ${epaisseurCapillaire.hauteDensite};
+  }
+}
+
+/* Mouvement reduit (01 \u00a76, 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 \u2014 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']) {
+${declarations(mouvementReduit, "    ")}
   }
 }
 
+[data-mouvement='reduit'] {
+${declarations(mouvementReduit, "  ")}
+}
+
+/* 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] {
+${declarations(mouvementGele, "  ")}
+}
+
 /* WCAG 2.4.11 : un arret de tabulation ne remonte jamais sous l'en-tete collant.
    \`${PREFIXE}-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. */
@@ -640,37 +2063,166 @@ html {
   scroll-padding-block-start: var(${PREFIXE}-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(${PREFIXE}-espacement-5);
+}
+
+/* Texte pour les seuls lecteurs d'ecran (\u00ab , 5 non lus \u00bb 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(${PREFIXE}-plan-superposition);
+}
+
+/* Contraste renforce : alias du theme courant, clair ou sombre (01 \u00a77.1). */
 @media (prefers-contrast: more) {
-${indenter(RACINE_QUEL_QUE_SOIT_LE_THEME)} {
-    ${PREFIXE}-couleur-bordure: var(${PREFIXE}-couleur-bordure-forte);
-    ${PREFIXE}-couleur-texte-discret: var(${PREFIXE}-couleur-texte);
+  :root {
+${declarations(aliasDeContrasteRenforce, "    ")}
+  }
+}
+
+/* Contraste force : les roles vers les couleurs systeme, aucune ombre (01 \u00a77.2). */
+@media (forced-colors: active) {
+  :root {
+${blocContrasteForce()}
   }
 }
 
-/* Impression : les jetons clairs, quel que soit le theme choisi a l'ecran. Un
-   fond sombre imprime est une page noire. */
+/* Impression : le theme clair et son encre, quel que soit le theme a l'ecran ou
+   dans un ilot (01 \u00a77.3). Un fond sombre imprime est une page noire. */
 @media print {
-${indenter(RACINE_QUEL_QUE_SOIT_LE_THEME)} {
+  :root,
+  [data-theme] {
     color-scheme: light;
-${indenter(cssDuTheme('clair'))}
+${affichageSelonLeTheme("clair", "    ")}
+  }
+
+  :root {
+${blocImpression()}
+  }
+
+  .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;
   }
-}
-`;
 }
 
-/**
- * @starterlib/tokens — niveau 1 et 2 du systeme de design.
- *
- * Ce paquet ne depend d'AUCUNE bibliotheque, Angular compris : il doit rester
- * consommable par un rendu de courriel, un export PDF ou un outil de design.
- */
+@media not print {
+  .st-impression-seulement {
+    display: none !important;
+  }
+}
 
-/**
- * Generated bundle index. Do not edit.
- */
+@page {
+  margin: 16mm 14mm;
+}
+`;
+}
+function nombreDeJetonsDeCouleur(jetons = themeClair) {
+	return Object.keys(jetons).length;
+}
+function jetonsDtcg() {
+	const jetons = {
+		$description: "Jetons de @starterlib/tokens au format DTCG 2025.10. Engendre par tools/generer-css.mjs : ne pas modifier.",
+		couleur: {
+			clair: couleurs(themeClair),
+			sombre: couleurs(themeSombre)
+		},
+		espacement: dimensions(espacement),
+		rayon: dimensions(rayon),
+		taille: dimensions(typographie.taille),
+		interligne: dimensions(typographie.interligne),
+		graisse: Object.fromEntries(Object.entries(typographie.graisse).map(([cle, valeur]) => [cle, {
+			$type: "fontWeight",
+			$value: Number(valeur)
+		}])),
+		police: Object.fromEntries(Object.entries(typographie.famille).map(([cle, pile]) => [cle, {
+			$type: "fontFamily",
+			$value: familles(pile)
+		}])),
+		duree: Object.fromEntries(Object.entries(duree).map(([cle, valeur]) => [cle, {
+			$type: "duration",
+			$value: {
+				value: Number.parseFloat(valeur),
+				unit: "ms"
+			}
+		}]))
+	};
+	return `${JSON.stringify(jetons, null, 2)}\n`;
+}
+function couleurs(theme) {
+	const noms = Object.keys(theme);
+	return Object.fromEntries(noms.map((nom) => [nom, {
+		$type: "color",
+		$value: couleur(theme[nom])
+	}]));
+}
+function couleur(hex) {
+	return {
+		colorSpace: "srgb",
+		components: [
+			1,
+			3,
+			5
+		].map((debut) => Number.parseInt(hex.slice(debut, debut + 2), 16) / 255).map((canal) => Number(canal.toFixed(4))),
+		alpha: 1,
+		hex
+	};
+}
+function dimensions(valeurs) {
+	return Object.fromEntries(Object.entries(valeurs).map(([cle, valeur]) => [cle, {
+		$type: "dimension",
+		$value: dimension(valeur)
+	}]));
+}
+function dimension(valeur) {
+	if (valeur === "0") return {
+		value: 0,
+		unit: "px"
+	};
+	const lu = /^(-?\d*\.?\d+)(px|rem)$/.exec(valeur);
+	if (lu === null) throw new Error(`Dimension hors du format DTCG (px ou rem) : ${valeur}`);
+	return {
+		value: Number(lu[1]),
+		unit: lu[2]
+	};
+}
+function familles(pile) {
+	return pile.split(",").map((famille) => famille.trim().replace(/^'(.*)'$/, "$1"));
+}
+export { CLES_DE_TAILLE, COUCHES, C_PAS, FAMILLES, L_PAS, MODES_DE_DENSITE, PAS_DE_RAMPE, PAS_NEUTRES, PREFIXE, RANGS_DE_SERIE, RUPTURES, SEUIL_DE_PERCEPTIBILITE, aliasDeContrasteRenforce, aliasDeContrasteRenforceParJeton, apca, cadence, cadenceMinimale, cibleMinimale, cibleTactileMinimale, composer, contratsDHote, couleurDOmbre, couleursSysteme, courbe, cssDesEchelles, cssDuTheme, declarationsDuStyle, definitionDuPas, definitionsDesPrimitives, delai, densite, deplacement, derogationsDImpression, duree, ecartsDeSurface, enKebab, encresDAplat, encresDeContrasteRenforce, epaisseur, epaisseurCapillaire, espacement, estJetonDeComposant, exemptesDeContraste, feuilleDeJetons, feuilleDesPolices, fichiersAPrecharger, focus, hauteurDeCommande, hexVersOklch, interlettrageDuStyle, jetonsDeComposant, jetonsDtcg, largeur, lireCouleur, luminanceRelative, mouvementGele, mouvementReduit, nomDeCouleur, nombreDeJetonsDeCouleur, oklchEnCss, oklchVersHex, oklchVersSrgb, ombreDuTheme, ombres, pairesDeContraste, pairesExclues, partielDeTypographie, partielDesRuptures, plan, policesDuSocle, primitives, rapportDeContraste, rayon, respecteLeContraste, rolesDesPrimitives, rupture, rythme, seuilExige, stylesTypographiques, surchargesDuRepli, surfacesDuFocus, taillesDImpression, tenue, themeClair, themeSombre, themeSousContrasteRenforce, themes, typographie, variablesInternes, versRvb, voile };
 
-export { PREFIXE, RUPTURES, SEUIL_DE_PERCEPTIBILITE, cibleMinimale, cibleTactileMinimale, courbe, cssDesEchelles, cssDuTheme, duree, epaisseur, espacement, estJetonDeComposant, exemptesDeContraste, feuilleDeJetons, jetonsDeComposant, luminanceRelative, mesure, ombre, pairesDeContraste, partielDesRuptures, plan, primitives, rapportDeContraste, rayon, respecteLeContraste, respiration, rupture, seuilExige, themeClair, themeSombre, themes, typographie, versRvb };
-//# sourceMappingURL=starterlib-tokens.mjs.map
+//# sourceMappingURL=starterlib-tokens.mjs.map