/* ================================================================ tokens.css — Alias de design (L'Instant Douceur) ---------------------------------------------------------------- §5.1 : theme.json est la SOURCE UNIQUE des valeurs. Ce fichier ne contient QUE : 1. des alias courts vers les presets WordPress (aucune valeur recopiée — la valeur reste dans theme.json) ; 2. les trois seuls tokens réellement inexprimables en theme.json : courbe d'easing, largeur max hors layout, dégradé composé. Toute valeur littérale (hex, px) hors de ces trois cas = duplication à supprimer. ================================================================ */ :root { /* ---------------------------------------------------------------- Couleurs — alias vers settings.color.palette (theme.json) ---------------------------------------------------------------- */ --bg: var(--wp--preset--color--bg); --surface: var(--wp--preset--color--surface); --surface-2: var(--wp--preset--color--surface-2); --line: var(--wp--preset--color--line); --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); --ink-xsoft: var(--wp--preset--color--ink-xsoft); --ink-deep: var(--wp--preset--color--ink-deep); --or: var(--wp--preset--color--or); --or-soft: var(--wp--preset--color--or-soft); --or-pale: var(--wp--preset--color--or-pale); --or-deep: var(--wp--preset--color--or-deep); --or-dark: var(--wp--preset--color--or-dark); --vert: var(--wp--preset--color--vert); --vert-pale: var(--wp--preset--color--vert-pale); --rouge: var(--wp--preset--color--rouge); /* ---------------------------------------------------------------- Familles — alias vers settings.typography.fontFamilies ---------------------------------------------------------------- */ --ff-display: var(--wp--preset--font-family--display); --ff-text: var(--wp--preset--font-family--text); /* ---------------------------------------------------------------- Tailles de texte — alias vers settings.typography.fontSizes ---------------------------------------------------------------- */ --t-overline: var(--wp--preset--font-size--overline); --t-small: var(--wp--preset--font-size--small); --t-base: var(--wp--preset--font-size--base); --t-lead: var(--wp--preset--font-size--lead); --t-h4: var(--wp--preset--font-size--h4); --t-h3: var(--wp--preset--font-size--h3); --t-h2: var(--wp--preset--font-size--h2); --t-h1: var(--wp--preset--font-size--h1); /* ---------------------------------------------------------------- Espacement — alias vers settings.spacing.spacingSizes ---------------------------------------------------------------- 🔴 Recette du 2026-09-02 : tous les retraits poses en style EN LIGNE avec un cran « 2XL » a « 6XL » tombaient a ZERO au-dessus de 782 px — heros de fiche soin colle a son contenu, entre autres. Cause : WordPress ne genere PAS la variable sous le nom du slug. « _wp_to_kebab_case() » insere un tiret entre un chiffre et la lettre qui suit — le slug « 3xl » de theme.json devient « --wp--preset--spacing--3-xl », JAMAIS « --3xl ». Les crans « xs » a « xl » n'ont pas de chiffre, donc pas de tiret : eux fonctionnaient, ce qui rendait la panne invisible en lecture. Mesure sur la recette : « --3xl » vide, « --3-xl » = 64px. Consequence a reparer ICI et pas ailleurs : l'editeur ecrit les retraits de section en style EN LIGNE, sous la forme « padding-top:var(--wp--preset--spacing--3xl) » — dans les modeles, les compositions ET les contenus deja figes en base (34 occurrences a ce jour). Aucune regle de feuille ne peut corriger un style en ligne ; la variable qu'il cite, si. On declare donc le nom attendu, branche sur le nom reellement genere. Le repli litteral couvre le cas d'un theme.json ampute. Ce qui n'etait PAS touche, et pourquoi la panne est restee invisible si longtemps : les regles de CETTE feuille et de « composants.css » ecrivent toujours « var(--space-5xl, 96px) ». Un cran invalide y laisse la main au repli litteral — mesure : « .section » rendait bien 96 px avant comme apres. Seuls les styles en ligne, qui ne peuvent pas porter de repli, tombaient. 🔒 A ne pas « simplifier » en renommant les slugs de theme.json : les 34 styles en ligne ET les contenus en base citent « 3xl ». ---------------------------------------------------------------- */ --wp--preset--spacing--2xl: var(--wp--preset--spacing--2-xl, 48px); --wp--preset--spacing--3xl: var(--wp--preset--spacing--3-xl, 64px); --wp--preset--spacing--4xl: var(--wp--preset--spacing--4-xl, 80px); --wp--preset--spacing--5xl: var(--wp--preset--spacing--5-xl, 96px); --wp--preset--spacing--6xl: var(--wp--preset--spacing--6-xl, 128px); --space-xs: var(--wp--preset--spacing--xs); --space-s: var(--wp--preset--spacing--s); --space-m: var(--wp--preset--spacing--m); --space-l: var(--wp--preset--spacing--l); --space-xl: var(--wp--preset--spacing--xl); --space-2xl: var(--wp--preset--spacing--2xl); --space-3xl: var(--wp--preset--spacing--3xl); --space-4xl: var(--wp--preset--spacing--4xl); --space-5xl: var(--wp--preset--spacing--5xl); --space-6xl: var(--wp--preset--spacing--6xl); /* Copie de securite des grands crans, prise AVANT toute reduction mobile (voir le bloc « Rythme vertical mobile » en fin de fichier). Sans elle, la demi-echelle ne pourrait pas se calculer : une propriete personnalisee qui se cite elle-meme est invalide (cycle). La source reste theme.json (§5.1) ; les litteraux ne sont que des valeurs de repli, meme convention que partout ailleurs dans les feuilles du theme (« var(--space-5xl, 96px) »). Sans elles, un preset introuvable rendrait le calcul invalide et les paddings poses en style en ligne tomberaient a zero. 🔒 Elle lit le nom REELLEMENT genere par WordPress (« --3-xl »), pas l'alias pose juste au-dessus : la demi-echelle mobile redefinit « --3xl » A PARTIR de cette copie. Passer par l'alias ferait citer a la copie la variable qui la cite — un cycle, donc deux declarations invalides et des retraits a zero. */ --espace-plein-2xl: var(--wp--preset--spacing--2-xl, 48px); --espace-plein-3xl: var(--wp--preset--spacing--3-xl, 64px); --espace-plein-4xl: var(--wp--preset--spacing--4-xl, 80px); --espace-plein-5xl: var(--wp--preset--spacing--5-xl, 96px); --espace-plein-6xl: var(--wp--preset--spacing--6-xl, 128px); /* ---------------------------------------------------------------- Ombres — alias vers settings.shadow.presets ---------------------------------------------------------------- */ --shadow-soft: var(--wp--preset--shadow--soft); --shadow-card: var(--wp--preset--shadow--card); --shadow-btn: var(--wp--preset--shadow--bouton); /* ---------------------------------------------------------------- Rayons — alias vers settings.custom.radius ---------------------------------------------------------------- */ --r-s: var(--wp--custom--radius--s); --r-m: var(--wp--custom--radius--m); --r-ml: var(--wp--custom--radius--ml); --r-l: var(--wp--custom--radius--l); --r-xl: var(--wp--custom--radius--xl); --r-pill: var(--wp--custom--radius--pill); /* ================================================================ Tokens inexprimables en theme.json (seules valeurs littérales tolérées — §5.1) ================================================================ */ /* Courbe d'easing signature (maquette : boutons/révélations). */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Largeur max hors système de layout WP (contentSize = 1180px). */ --maxw: 1180px; /* Dégradé CTA « moment douceur » — composé à partir des alias (or-dark → ink → ink-deep), donc zéro hex dupliqué. */ --grad-cta: linear-gradient(135deg, var(--or-dark), var(--ink) 60%, var(--ink-deep)); } /* ================================================================ Rythme vertical mobile — demi-echelle sous 782 px ---------------------------------------------------------------- Demande de recette du 2026-08-26 : sur smartphone / tablette portrait, les sections respiraient autant qu'en grand ecran (96 px en haut ET en bas pour « .section », 64 px pour les bandes accentuees, 80 px pour les tunnels boutique) : trois ecrans de defilement pour trois lignes de texte. Un theme.json ne sait PAS exprimer un point d'arret : la seule couche capable de le faire est le CSS. On ne recopie pour autant aucune valeur — chaque cran est la MOITIE de sa valeur de theme.json, calculee a partir de la copie « --espace-plein-* » prise plus haut. Changer une taille dans theme.json continue donc de piloter les deux echelles (§5.1). Pourquoi redefinir les presets WordPress et pas seulement nos alias : les paddings de section sont poses en style en ligne par l'editeur (modeles, compositions, contenus figes en base) sous la forme « padding-top:var(--wp--preset--spacing--5xl) ». Un style en ligne ne peut etre corrige par aucune regle de feuille — mais la variable qu'il cite, si. On redefinit donc la variable un cran plus bas que les styles globaux (qui la posent sur « :root ») : le plus proche gagne par heritage, sans « !important ». Les alias sont repasses dans la foulee pour que « .section » & co suivent. Pourquoi « body > * » et pas « body » : dans l'editeur, WordPress reecrit AUSSI BIEN « :root » QUE « body » en « .editor-styles-wrapper ». Les deux regles tomberaient alors sur le MEME element — la copie citerait la variable qui cite la copie, donc un cycle, donc deux declarations invalides et des paddings a zero dans l'apercu. Un cran de descendance de plus garantit deux elements distincts des deux cotes (front et editeur). Tout ce qui est visible vit dans un enfant direct de « body » (« .wp-site-blocks »), la couverture est totale. Seuls les grands crans (2XL et au-dessus) sont touches : ce sont ceux du rythme de section. XS a XL portent les gouttieres, les retraits de cartes et le tiroir du header — les diviser rendrait les composants illisibles. ================================================================ */ @media (max-width: 781px) { body > * { --wp--preset--spacing--2xl: calc(var(--espace-plein-2xl) / 2); --wp--preset--spacing--3xl: calc(var(--espace-plein-3xl) / 2); --wp--preset--spacing--4xl: calc(var(--espace-plein-4xl) / 2); --wp--preset--spacing--5xl: calc(var(--espace-plein-5xl) / 2); --wp--preset--spacing--6xl: calc(var(--espace-plein-6xl) / 2); --space-2xl: var(--wp--preset--spacing--2xl); --space-3xl: var(--wp--preset--spacing--3xl); --space-4xl: var(--wp--preset--spacing--4xl); --space-5xl: var(--wp--preset--spacing--5xl); --space-6xl: var(--wp--preset--spacing--6xl); } }