/* ============================================================ tokens.css — couche d'alias du design system dentaire365 ------------------------------------------------------------ SOURCE DE VÉRITÉ : theme.json, `settings.custom.ds`. WordPress en génère les variables `--wp--custom--ds--*`. Ce fichier ne fait que leur donner les noms courts de la spéc (dentaire365-implementation.md §1.1), déclarés UNE fois. Il ne contient aucune valeur en dur, à deux exceptions près, signalées ligne à ligne. Ne jamais écrire une valeur ici : ajouter le token dans theme.json. Chargé avant fonts.css et layout.css (cf. functions.php), front + éditeur. ============================================================ */ :root{ /* ---- Typographie ---- */ --font-titre: var(--wp--custom--ds--font-titre); --font-texte: var(--wp--custom--ds--font-texte); --fs-rubrique: var(--wp--custom--ds--fs-rubrique); --lh-rubrique: var(--wp--custom--ds--lh-rubrique); --fs-une: var(--wp--custom--ds--fs-une); --lh-une: var(--wp--custom--ds--lh-une); /* Titre de la carte « À la une » : hors §1.1, ajouté sur demande du 28/07. Le titre de une reste à --fs-une sur la page article. */ --fs-une-carte: var(--wp--custom--ds--fs-une-carte); --fs-titre-l: var(--wp--custom--ds--fs-titre-l); --lh-titre-l: var(--wp--custom--ds--lh-titre-l); --fs-titre-m: var(--wp--custom--ds--fs-titre-m); --lh-titre-m: var(--wp--custom--ds--lh-titre-m); --fs-titre-s: var(--wp--custom--ds--fs-titre-s); --lh-titre-s: var(--wp--custom--ds--lh-titre-s); --fs-surtitre: var(--wp--custom--ds--fs-surtitre); --ls-surtitre: var(--wp--custom--ds--ls-surtitre); --fs-chapo: var(--wp--custom--ds--fs-chapo); --lh-chapo: var(--wp--custom--ds--lh-chapo); --fs-courant: var(--wp--custom--ds--fs-courant); --lh-courant: var(--wp--custom--ds--lh-courant); --fs-folio: var(--wp--custom--ds--fs-folio); --lh-folio: var(--wp--custom--ds--lh-folio); /* Interlettrages hors §1.1, repris de §2.1 (rubrique) et §5.3 (étiquette). */ --ls-rubrique: var(--wp--custom--ds--ls-rubrique); --ls-etiquette: var(--wp--custom--ds--ls-etiquette); /* ---- Couleur ---- */ --c-encre: var(--wp--custom--ds--color-encre); --c-texte: var(--wp--custom--ds--color-texte); --c-texte-doux: var(--wp--custom--ds--color-texte-doux); /* Accent éditorial. Décision du 27/07 (option b) : l'accent SUIT L'UNIVERS. `primary` / `accent` sont réécrits par pôle via le Palette_Filter SSR de parresia-topics — Omni porte le rouge de la spéc, Ortho garde son bleu. Le repli n'est utilisé que si parresia-topics est inactif. */ --c-rouge: var(--wp--preset--color--primary, var(--wp--custom--ds--color-rouge-defaut)); --c-rouge-h: var(--wp--preset--color--accent, var(--wp--custom--ds--color-rouge-h-defaut)); --c-jaune: var(--wp--custom--ds--color-jaune); --c-jaune-h: var(--wp--custom--ds--color-jaune-h); --c-papier: var(--wp--custom--ds--color-papier); --c-trame: var(--wp--custom--ds--color-trame); --c-nuit: var(--wp--custom--ds--color-nuit); --c-filet: var(--wp--custom--ds--color-filet); --c-filet-fort: var(--wp--custom--ds--color-filet-fort); /* Teintes de composants (§5.2, §5.4, §5.6) — hors §1.1, ajoutées au titre de la règle « une valeur manquante devient un token ». */ --c-sponsor-nom: var(--wp--custom--ds--color-sponsor-nom); --c-desactive-texte: var(--wp--custom--ds--color-desactive-texte); --c-nuit-chapo: var(--wp--custom--ds--color-nuit-chapo); --c-nuit-folio: var(--wp--custom--ds--color-nuit-folio); --c-nuit-sponsor-nom: var(--wp--custom--ds--color-nuit-sponsor-nom); /* Puces de rubrique (Top 5) — fixes, indépendantes de l'univers. */ --c-rub-1: var(--wp--custom--ds--color-rub-1); --c-rub-2: var(--wp--custom--ds--color-rub-2); --c-rub-3: var(--wp--custom--ds--color-rub-3); --c-rub-4: var(--wp--custom--ds--color-rub-4); --c-rub-5: var(--wp--custom--ds--color-rub-5); /* ---- Espacement (base 4) ---- */ --e1: var(--wp--custom--ds--espace-1); --e2: var(--wp--custom--ds--espace-2); --e3: var(--wp--custom--ds--espace-3); --e4: var(--wp--custom--ds--espace-4); --e5: var(--wp--custom--ds--espace-5); --e6: var(--wp--custom--ds--espace-6); --e7: var(--wp--custom--ds--espace-7); --e8: var(--wp--custom--ds--espace-8); --e9: var(--wp--custom--ds--espace-9); --e10: var(--wp--custom--ds--espace-10); --e11: var(--wp--custom--ds--espace-11); /* ---- Rayons ---- */ --r-etiquette: var(--wp--custom--ds--rayon-etiquette); --r-bouton: var(--wp--custom--ds--rayon-bouton); --r-image: var(--wp--custom--ds--rayon-image); --r-bloc: var(--wp--custom--ds--rayon-bloc); /* ---- Composants ---- */ --h-bouton: var(--wp--custom--ds--hauteur-bouton); --fs-toutvoir: var(--wp--custom--ds--fs-toutvoir); --h-toutvoir: var(--wp--custom--ds--hauteur-toutvoir); --e-surtitre-titre: var(--wp--custom--ds--espace-surtitre-titre); /* ---- Grille ---- */ --col-gauche: var(--wp--custom--ds--col-gauche); --col-droite: var(--wp--custom--ds--col-droite); --gouttiere: var(--wp--custom--ds--gouttiere); --largeur-max: var(--wp--custom--ds--largeur-max); --marge-mobile: var(--wp--custom--ds--marge-mobile); --marge-page: var(--wp--custom--ds--marge-page); --col-centrale-min:var(--wp--custom--ds--col-centrale-min); /* Gouttière de page CONSTANTE, à toutes les largeurs — jamais zéro. Le contenu ne touche jamais le bord de l'écran. */ --marge-laterale: var(--marge-page); } @media (max-width:767px){ :root{ --marge-laterale: var(--marge-mobile); } } /* Paliers de la sidebar gauche — §3.1. Les seuils sont décalés de 2 × --marge-page (40px) par rapport aux largeurs du tableau : celui-ci donne la largeur UTILE, et la gouttière de page étant constante, utile = viewport − 40. Un palier annoncé à 1280 bascule donc à 1320, 1140 à 1180, 1024 à 1064. C'est ce décalage qui garantit à la fois la marge permanente ET les minimums de colonne centrale (700 / 604 / 524). Les seuils restent des valeurs en dur : une media query ne sait pas lire une custom property, c'est une limite du CSS. */ @media (max-width:1319px){ :root{ --col-gauche: var(--wp--custom--ds--col-gauche-md); --gouttiere: var(--wp--custom--ds--gouttiere-md); } } @media (max-width:1179px){ :root{ --col-gauche: var(--wp--custom--ds--col-gauche-sm); --gouttiere: var(--wp--custom--ds--gouttiere-sm); } } @media (max-width:1063px){ :root{ --col-gauche: 0; --gouttiere: var(--wp--custom--ds--gouttiere-tablette); } }