/* ========================================================================== CERVOLAND — DESIGN TOKENS (source de vérité) -------------------------------------------------------------------------- Fichier : maquette/css/tokens.css Version : 0.4 — 21 septembre 2026 Auteur : E-BM Web Conseils pour Nelly Larochelle Sources : Charte Graphique.pptx (couleurs, Poppins) · « Charte graphique + logo/Logo_principal.png » (copie de travail : maquette/assets/logo/logo-principal.png) · Brief complet §17 Direction artistique et Accessibilité · Fiche « Lieux de Vie » (pastels) · Rdv0 · Fiches couleur personnages (Bizz-Bizz, Aoutch), livrées le 8 septembre 2026 avec les PNG des usines TADACH et PRAXICO RÈGLES 1. Ce fichier ne contient QUE des variables CSS. Aucun sélecteur de composant, aucune règle de mise en page. 2. Trois niveaux : PRIMITIFS (valeurs brutes de la charte) → SÉMANTIQUES (rôle dans l'interface) → CONTEXTES (univers, espaces). Les composants n'utilisent que les niveaux 2 et 3. 3. Ce fichier reste une feuille CSS à part entière dans le thème WordPress. Seul un sous-ensemble se transpose en theme.json (palette de couleurs, tailles de police, espacements) pour alimenter l'interface de l'éditeur. Ne se transposent PAS : les scopes [data-espace] / [data-univers], la @media prefers-reduced-motion, les content: (--univers-nom), les url() et les alias sémantiques par var(). Les clamp() de --fs-* et --sp-* doivent être recopiés à la main, pas via les presets fluides de WP. 4. Toute valeur marquée « PROVISOIRE » est à remplacer quand les éléments correspondants (couleurs des personnages, PNG) arriveront. 5. « DÉRIVÉ » = valeur calculée à partir d'une couleur de la charte. « HORS CHARTE » = choix E-BM sans source dans la charte, le logo ni le brief — à valider avec Nelly, sans blocage pour la maquette. 6. Référence de contraste : tous les ratios de ce fichier sont calculés selon WCAG 2.x (luminance relative sRGB). Les couleurs de texte sont calibrées sur --c-gris-pale #F3F3F3, le fond clair le plus sombre du système, ce qui couvre automatiquement le blanc, le crème et les fonds -pale de tous les univers. ========================================================================== */ :root { color-scheme: light; /* V1 : fond clair uniquement (brief §17). */ /* ======================================================================== 1. PRIMITIFS — COULEURS DE LA CHARTE ======================================================================== */ /* --- Palette officielle (Charte Graphique.pptx, diapositive « Couleurs ») Ces quatre couleurs sont des APLATS, pas des couleurs de texte : sur blanc elles plafonnent à 2,3 (bleu), 2,6 (rose) et 1,3 (jaune). Deux conséquences : pour du texte, passer par les variantes -fonce ; pour une forme pleine (bouton, carte, pastille) posée sur la page, le bord doit être matérialisé par un contour --c-bordure-forte ou par une ombre --sh-sticker-*, sans quoi la forme n'a pas de limite perceptible (WCAG 1.4.11). C'est déjà le cas du style sticker de l'espace Cervoland ; à vérifier sur l'espace pro, qui utilise --sh-1. */ --c-bleu: #38B6FF; /* PRINCIPALE */ --c-rose: #FF66C4; /* secondaire */ --c-jaune: #FFDE59; /* secondaire */ --c-gris: #595959; /* secondaire — la pastille est dessinée avec la couleur de thème « dark 2 » = #595959 ; son étiquette indique « #5959FF » (indigo), très probablement une faute de frappe. À CONFIRMER avec Nelly. Si l'indigo était bien voulu : --c-violet: #5959FF; */ /* --- Neutres. Seule --c-encre est réellement sourcée (logo) ; le blanc vient du brief, les autres sont des choix E-BM. */ --c-blanc: #FFFFFF; /* fond principal (brief : « fond blanc ou blanc cassé ») */ --c-creme: #FFFDF7; /* HORS CHARTE — blanc cassé pour sections alternées et fonds d'univers. Le brief §17 dit « blanc ou blanc cassé » sans donner de valeur ; celle-ci est un blanc teinté vers --c-jaune (≈ 95 % blanc). À valider. */ --c-encre: #333033; /* trait et contour du cerveau du logo → couleur de texte principale. 13,0:1 sur blanc · 12,8:1 sur crème. NB : l'ombre portée des lettres CERVOLAND dans le logo n'est pas cette couleur mais un noir #000000 à ~80 % d'opacité (≈ #393939 une fois composé sur blanc). */ --c-gris-moyen: #8A8A8A; /* HORS CHARTE — 3,45:1 sur blanc. Éléments désactivés, bordures de champs et icônes. JAMAIS pour du texte, y compris les placeholders (4,5:1 requis). */ --c-gris-clair: #E3E3E3; /* HORS CHARTE — séparateurs et bordures décoratives seulement (1,28:1 : ne délimite aucun champ). */ --c-gris-pale: #F3F3F3; /* HORS CHARTE — surfaces en retrait, pistes de jauge. */ /* --- Variantes DÉRIVÉES des couleurs de la charte (teinte et saturation conservées, seule la luminosité change) -pale : fond très léger (90 % blanc) → aplats de section -clair : fond léger (75 % blanc) → badges, cartes -fonce : ≥ 4,5:1 sur blanc, crème, tous les fonds -pale ET --c-gris-pale → texte, liens, icônes sur tout fond clair du système. Sur les fonds -clair, ces couleurs tombent à ≈ 4,0–4,8 : grand texte (≥ 24 px, ou 19 px gras), bordures et icônes uniquement. -contraste : couleur de texte à poser SUR l'aplat pur */ --c-bleu-pale: #EEF8FF; --c-bleu-clair: #D4EEFF; --c-bleu-fonce: #0073B5; /* 5,10 blanc · 5,01 crème · 4,59 gris-pale */ --c-bleu-contraste: var(--c-encre); /* encre sur bleu : 5,8:1 */ --c-rose-pale: #FFF1F9; --c-rose-clair: #FFDBF0; --c-rose-fonce: #C42F8F; /* 5,06 blanc · 4,97 crème · 4,56 gris-pale */ --c-rose-contraste: var(--c-encre); /* encre sur rose : 4,9:1 */ --c-jaune-pale: #FFFCF1; --c-jaune-clair: #FFF8DB; --c-jaune-fonce: #886B00; /* 5,06 blanc · 4,97 crème · 4,56 gris-pale */ --c-jaune-contraste: var(--c-encre); /* encre sur jaune : 9,8:1 */ --c-gris-contraste: var(--c-blanc); /* blanc sur gris : 7,0:1 */ /* --- Couleurs d'état (formulaires, messages). succès et erreur sont HORS CHARTE : la charte ne contient ni vert ni rouge. Valeurs choisies pour tenir ≥ 4,5:1 sur blanc, crème et --c-gris-pale (un message d'erreur peut apparaître sur une surface en retrait). Rappel brief §17 : l'état n'est jamais porté par la couleur seule — toujours doublé d'un texte et d'une icône. */ --c-succes: #177A50; /* 5,34 blanc · 5,25 crème · 4,81 gris-pale */ --c-erreur: #CE303E; /* 5,10 blanc · 5,01 crème · 4,60 gris-pale */ --c-alerte: var(--c-jaune-fonce); --c-info: var(--c-bleu-fonce); /* --- Couleurs des personnages / univers, sourcées des fiches couleur livrées par la cliente (pas de la charte : ce ne sont ni un choix E-BM ni une des quatre couleurs officielles, donc pas « HORS CHARTE » au sens de la règle 5 — juste une source différente). Mêmes dérivées que les couleurs de charte : -pale (~9 % couleur / 91 % blanc), -clair (~22 % / 78 % blanc), -fonce (assombrie à teinte égale jusqu'à ~5,1:1 sur blanc). */ --c-jaune-bizzbizz: #FBC733; /* Bizz-Bizz (TADACH/TDAH) — SOURCE : « Code couleur Bizz-Bizz Usine TADACH.docx », livrée le 8 sept. 2026. RGB 251,199,51. Distincte de --c-jaune (charte) : aplat, pas une couleur de texte (1,6:1 sur blanc). */ --c-jaune-bizzbizz-pale: #FFFAED; --c-jaune-bizzbizz-clair: #FEF3D2; --c-jaune-bizzbizz-fonce: #8C6803; /* 5,14 blanc · 5,05 crème · 4,63 gris-pale */ --c-jaune-bizzbizz-contraste:var(--c-encre); /* encre sur jaune-bizzbizz : 8,3:1 */ --c-vert-anis: #D4EB22; /* Aoutch (PRAXICO/TDC) — SOURCE : « code couleur _ Vert anis.docx », livrée le 8 sept. 2026. RGB 212,235,34. Aplat, pas une couleur de texte (1,3:1 sur blanc). Premier vert du système : aucune des quatre couleurs de charte n'en a. */ --c-vert-anis-pale: #FBFDEB; --c-vert-anis-clair: #F6FBCE; --c-vert-anis-fonce: #68740A; /* 5,14 blanc · 5,05 crème · 4,63 gris-pale */ --c-vert-anis-contraste: var(--c-encre); /* encre sur vert-anis : 9,8:1 */ --c-bleu-tisto: #1083E3; /* Tisto (SPECTRUS/TSA) — CHOIX E-BM à valider (demande de Benjamin du 21 sept. 2026 : « un bleu en adéquation avec l'existant de Spectrus »). Bleu moyen échantillonné sur les PNG de Tisto (#1083E3) et la façade (#1E73BD). Plus profond que le bleu de charte #38B6FF, qui reste la couleur principale du site. Aplat : 3,9:1 sur blanc ; ni encre (3,3) ni blanc (3,9) n'atteint 4,5 sur cet aplat → les boutons passent par -fonce (blanc : 5,1:1). */ --c-bleu-tisto-pale: #E9F4FC; --c-bleu-tisto-clair: #CAE4F9; --c-bleu-tisto-fonce: #0E70C1; /* 5,13 blanc · 5,04 crème · 4,62 gris-pale */ --c-bleu-tisto-contraste: var(--c-blanc); /* 3,9:1 — grand texte et icônes seulement ; boutons : -fonce. */ /* ======================================================================== 2. PRIMITIFS — LIEUX DE VIE (fiche PDF « Les lieux de vie de Cervoland ») Pastels échantillonnés sur la fiche, arrondis (écart ≤ 3 par canal). Fonds uniquement, toujours avec du texte encre par-dessus (≥ 10:1). Un lien posé sur ces pastels ne doit PAS utiliser --c-lien tel quel : employer --c-encre souligné, ou --c-bordure-forte. --lieu-riviere et --lieu-usines tombent sur la même valeur que deux lieux : coïncidence d'échantillonnage, ce sont des concepts distincts qui peuvent diverger — ne pas les transformer en alias. ======================================================================== */ --lieu-hameau: #F8DCE8; /* Hameau du Vivre-Ensemble — socio-émotionnel */ --lieu-ville: #FCF0B8; /* Ville des Apprentissages — scolaire */ --lieu-banlieue: #DCECFC; /* Banlieue de la Voix — langage & communication */ --lieu-cite: #DCECD8; /* Cité des Gestes — praxies & motricité */ --lieu-quartier: #E8DCF4; /* Quartier Créatif — créativité & imagination */ --lieu-centre: #D8F0EC; /* Centre de Traitement — sensorialité, gnosies */ --lieu-parc: #F8E0D0; /* Parc des Explorateurs — attention, exécutif */ --lieu-phare: #FCF8EC; /* Phare des Souvenirs — mémoire */ --lieu-village: #F8EEE3; /* Village des Émotions — 9e lieu, livré par Nelly le 14 sept. 2026 (absent de la fiche PDF). DÉRIVÉ du socle orangé du visuel livré (#D5954D éclairci à 84 % blanc), même méthode que les pastels de la fiche. */ --lieu-riviere: #DCECFC; /* La Rivière — sépare usines et lieux de vie */ --lieu-usines: #F8DCE8; /* Rive gauche — les usines */ /* ======================================================================== 3. SÉMANTIQUE — COULEURS PAR RÔLE Les composants utilisent CES noms, jamais les primitifs. ======================================================================== */ --c-fond: var(--c-blanc); --c-fond-doux: var(--c-creme); --c-surface: var(--c-blanc); /* cartes, panneaux */ --c-surface-2: var(--c-gris-pale); /* surfaces en retrait */ --c-texte: var(--c-encre); --c-texte-2: var(--c-gris); /* 7,0 blanc · 6,9 crème · 6,3 gris-pale. Dépend de --c-gris, dont l'identité est encore « À CONFIRMER » : si Nelly tranche pour l'indigo #5959FF, rebasculer ce token sur un gris neutre plutôt que sur la couleur de marque. */ --c-texte-inverse: var(--c-blanc); --c-titre: var(--c-encre); --c-accent: var(--c-bleu); /* couleur d'action par défaut */ --c-accent-fonce: var(--c-bleu-fonce); --c-accent-clair: var(--c-bleu-clair); --c-accent-pale: var(--c-bleu-pale); --c-accent-contraste:var(--c-bleu-contraste); --c-lien: var(--c-bleu-fonce); /* ≥ 4,5:1 sur tout fond clair du système. Redéfini par univers (§14). */ --c-lien-survol: var(--c-encre); --c-focus: var(--c-rose-fonce); /* anneau de focus — volontairement CONSTANT dans tous les univers : le repère de navigation clavier ne doit pas changer d'apparence d'une page à l'autre. */ --c-bordure: var(--c-gris-clair); /* décoratif : séparateurs, filets, contours de cartes. 1,28:1 — n'utilise JAMAIS ce token pour délimiter un contrôle. */ --c-bordure-champ: var(--c-gris-moyen); /* contours de champs, cases, interrupteurs. 3,45 blanc · 3,39 crème · 3,11 gris-pale, soit le 3:1 exigé par WCAG 1.4.11 pour les composants d'interface. */ --c-bordure-forte: var(--c-encre); /* ======================================================================== 4. TYPOGRAPHIE (charte : Poppins — SemiBold titres, Light corps) Aperçu : Google Fonts. Production WordPress : auto-héberger les fichiers woff2 (RGPD, recommandation CNIL) — les noms de familles ne changent pas. ======================================================================== */ --font-titre: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-texte: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --fw-leger: 300; /* Poppins Light — charte « corps ». Réservé aux grands paragraphes d'intro : à 16 px sur écran, le Light fatigue la lecture (public neuroatypique). */ --fw-normal: 400; /* corps de texte à l'écran */ --fw-moyen: 500; --fw-semibold: 600; /* Poppins SemiBold — charte « titres » */ --fw-gras: 700; /* affichage, style logo */ --fw-texte: var(--fw-normal); --fw-titre: var(--fw-semibold); /* Échelle. Ratio ≈ 1,2 → 1,25. --fs-xs et --fs-sm sont FIXES (légendes et méta n'ont pas à grandir) ; les autres sont fluides et atteignent leur maximum entre 900 et 1400 px selon le palier, pas tous à 1280. */ --fs-xs: 0.75rem; /* 12 px légendes */ --fs-sm: 0.875rem; /* 14 px méta, badges */ --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 corps */ --fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18 → 20 intro, sous-titre */ --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 20 → 24 h4 */ --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); /* 24 → 32 h3 */ --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); /* 30 → 44 h2 */ --fs-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); /* 36 → 60 h1 */ --fs-display: clamp(2.75rem, 1.8rem + 5vw, 5rem); /* 44 → 80 héros */ --lh-titre: 1.15; --lh-serre: 1.3; /* boutons, cartes, listes denses */ --lh-texte: 1.6; --ls-titre: -0.01em; --ls-caps: 0.06em; /* sur-titres en capitales */ --mesure: 65ch; /* longueur de ligne maximale du texte courant */ --mesure-etroite: 45ch; /* citations, textes d'accueil poétiques */ /* ======================================================================== 5. ESPACEMENT (pas de 8 px) ======================================================================== */ --pas: 0.5rem; --sp-0: 0; --sp-1: 0.25rem; /* 4 px */ --sp-2: 0.5rem; /* 8 px */ --sp-3: 0.75rem; /* 12 px */ --sp-4: 1rem; /* 16 px */ --sp-5: 1.5rem; /* 24 px */ --sp-6: 2rem; /* 32 px */ --sp-7: 3rem; /* 48 px */ --sp-8: 4rem; /* 64 px */ --sp-9: 6rem; /* 96 px */ --sp-10: 8rem; /* 128 px */ --sp-bloc: clamp(1.5rem, 1rem + 2.5vw, 3rem); /* entre blocs d'une section */ --sp-section: clamp(3rem, 2rem + 5vw, 7rem); /* entre sections */ --gouttiere: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* marge latérale de page */ /* Conteneurs */ --largeur-etroite: 40rem; /* 640 px — formulaires, textes d'accueil */ --largeur-texte: var(--mesure); --largeur-contenu: 72rem; /* 1152 px — grille principale */ --largeur-large: 90rem; /* 1440 px — scènes d'usine, carte */ /* Accessibilité : zone cliquable minimale (brief §17) */ --cible-min: 2.75rem; /* 44 px */ /* ======================================================================== 6. FORMES — rayons et bordures (logo aux lettres rondes, formes organiques) ======================================================================== */ --r-xs: 0.25rem; /* 4 px cases à cocher, petits marqueurs */ --r-sm: 0.5rem; /* 8 px badges ET champs de formulaire */ --r-md: 1rem; /* 16 px cartes */ --r-lg: 1.5rem; /* 24 px panneaux */ --r-xl: 2rem; /* 32 px grandes scènes */ --r-pill: 999px; /* boutons */ --r-rond: 50%; /* avatars, pastilles */ /* Formes organiques (pattern de la charte) — pour les aplats décoratifs */ --r-blob-1: 62% 38% 46% 54% / 60% 40% 60% 40%; --r-blob-2: 40% 60% 55% 45% / 45% 40% 60% 55%; --r-blob-3: 55% 45% 35% 65% / 50% 60% 40% 50%; --bordure-fine: 1px; --bordure-epaisse: 2px; /* ======================================================================== 7. OMBRES — style « sticker » inspiré du logo (ombre dure décalée) + élévations douces. Le logo utilise en réalité un noir #000000 à ~80 % d'opacité pour l'ombre de ses lettres ; --sh-sticker-* prend --c-encre par cohérence avec les bordures et les élévations. Le rendu sur fond clair est quasi identique. ======================================================================== */ --sh-sticker-sm: 2px 2px 0 var(--c-encre); --sh-sticker: 4px 4px 0 var(--c-encre); --sh-sticker-lg: 6px 6px 0 var(--c-encre); --sh-1: 0 1px 2px rgb(51 48 51 / 0.08), 0 2px 8px rgb(51 48 51 / 0.06); --sh-2: 0 2px 4px rgb(51 48 51 / 0.08), 0 8px 24px rgb(51 48 51 / 0.10); --sh-3: 0 4px 8px rgb(51 48 51 / 0.10), 0 16px 48px rgb(51 48 51 / 0.14); /* Anneau de focus (brief : « navigation au clavier et focus visibles »). Double anneau blanc puis rose foncé : ce sont les deux anneaux qui contrastent ENTRE EUX (5,1:1) qui garantissent la visibilité, y compris posés sur un aplat de couleur vive où aucun des deux, pris isolément, n'atteindrait 3:1 contre le fond. Ne jamais réduire à un anneau simple. Limite connue : en mode couleurs forcées (Windows contraste élevé), une box-shadow n'est pas peinte — les composants devront doubler cet anneau d'un `outline: 2px solid transparent` sous @media (forced-colors: active). */ --anneau-focus: 0 0 0 3px var(--c-fond), 0 0 0 6px var(--c-focus); /* ======================================================================== 8. MOUVEMENT (brief : « animations courtes et porteuses de sens ») ======================================================================== */ --dur-rapide: 150ms; /* survol, focus */ --dur-base: 300ms; /* transitions courantes */ --dur-lente: 600ms; /* apparitions, panneaux */ --dur-scene: 900ms; /* entrée dans une usine */ --dur-jauge: 1400ms; /* remplissage des jauges au chargement */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-entree: cubic-bezier(0, 0, 0.2, 1); /* décélère → éléments qui arrivent */ --ease-sortie: cubic-bezier(0.4, 0, 1, 1); /* accélère → éléments qui partent */ --ease-rebond: cubic-bezier(0.34, 1.56, 0.64, 1); /* personnages, boutons */ --ease-jauge: cubic-bezier(0.22, 1, 0.36, 1); --decalage-apparition: 0.75rem; /* translateY des éléments qui apparaissent */ /* ======================================================================== 9. JAUGES (parcours usine : personnage → jauges → quotidien → outils) ======================================================================== */ --jauge-taille: clamp(4.5rem, 4rem + 4vw, 7rem); --jauge-epaisseur: 0.75rem; --jauge-piste: var(--c-gris-pale); --jauge-contour: var(--c-encre); /* --jauge-remplissage est redéclaré dans CHAQUE scope [data-univers] (§14) et non ici : une custom property contenant un var() est résolue à l'endroit où elle est déclarée, puis héritée comme valeur calculée. Déclarée à :root, elle resterait bleue dans tous les univers. CONTRASTE : la couleur vive de remplissage ne se distingue pas de la piste (2,0:1 en bleu, 2,4 en rose, 1,2 en jaune — très en dessous des 3:1 exigés). C'est --jauge-contour, tracé à la frontière entre le remplissage et la piste, qui rend le niveau lisible (11,8:1) : il est OBLIGATOIRE, pas décoratif. Et conformément au brief §17, le niveau doit toujours être doublé d'une valeur en toutes lettres. */ /* ======================================================================== 10. CALQUES (z-index) ======================================================================== */ --z-fond: -1; --z-base: 0; --z-decor: 1; --z-contenu: 2; --z-flottant: 10; --z-nav: 100; --z-passerelle:110; /* passerelle permanente entre les deux espaces */ --z-overlay: 200; --z-modal: 210; --z-toast: 300; /* ======================================================================== 11. POINTS DE RUPTURE — documentation et JS uniquement (les variables CSS ne fonctionnent pas dans @media : recopier les valeurs) ======================================================================== */ --bp-sm: 40em; /* 640 px */ --bp-md: 48em; /* 768 px */ --bp-lg: 64em; /* 1024 px */ --bp-xl: 80em; /* 1280 px */ /* ======================================================================== 12. UNIVERS PAR DÉFAUT (racine = hub Cervoland / Cellule Souche) Les composants d'univers lisent uniquement --univers-*. ======================================================================== */ --univers-nom: "Cervoland"; --univers-personnage: "Lilirone"; --univers-couleur: var(--c-bleu); --univers-couleur-fonce: var(--c-bleu-fonce); --univers-couleur-claire: var(--c-bleu-clair); --univers-couleur-pale: var(--c-bleu-pale); --univers-contraste: var(--c-bleu-contraste); --univers-fond: var(--c-fond-doux); --univers-personnage-img: url("../assets/img/personnages/lilirone-salut.webp"); --jauge-remplissage: var(--univers-couleur); /* Cartes et boutons : valeurs par défaut, redéfinies par espace (§13) */ --r-carte: var(--r-md); --sh-carte: var(--sh-1); --r-bouton: var(--r-pill); } /* ========================================================================== 13. ESPACES — les deux portes (brief §2 : identité commune, parcours propres) Usage : ou ========================================================================== */ [data-espace="pro"] { /* Espace professionnel : crédible, chaleureux, sobre */ --c-accent: var(--c-bleu); --c-accent-fonce: var(--c-bleu-fonce); --c-accent-clair: var(--c-bleu-clair); --c-accent-pale: var(--c-bleu-pale); --c-accent-contraste: var(--c-bleu-contraste); --r-carte: var(--r-md); --sh-carte: var(--sh-1); } [data-espace="cervoland"] { /* Univers Cervoland : vivant, coloré, style sticker */ --r-carte: var(--r-lg); --sh-carte: var(--sh-sticker); } /* ========================================================================== 14. UNIVERS — un scope par usine Usage :
…
TADACH et PRAXICO utilisent les vraies couleurs livrées avec les PNG des personnages (Bizz-Bizz, Aoutch). Spectrus utilise --c-bleu-tisto, choix E-BM échantillonné sur les visuels (à valider). Cellule Souche prend le rose de la charte, d'après la genèse (Lilirone est rose). Fichiers PNG des personnages : maquette/assets/personnages/. Livrés : tisto.png · bizz-bizz.png · aoutch.png. ATTENDUS, donc 404 pour l'instant : lilirone.png · astrolo.png Une url() relative dans une custom property est résolue par rapport à la feuille où elle est DÉCLARÉE (ce fichier), pas à celle qui la consomme : les chemins ci-dessous restent donc valables depuis n'importe quel CSS, mais devront être réécrits pour WordPress (get_theme_file_uri()). ========================================================================== */ [data-univers="spectrus"] { /* Tisto — fonctionnements associés au TSA */ --univers-nom: "Spectrus"; --univers-personnage: "Tisto"; --univers-couleur: var(--c-bleu-tisto); /* CHOIX E-BM, 21 sept. 2026 — à valider */ --univers-couleur-fonce: var(--c-bleu-tisto-fonce); --univers-couleur-claire: var(--c-bleu-tisto-clair); --univers-couleur-pale: var(--c-bleu-tisto-pale); --univers-contraste: var(--c-bleu-tisto-contraste); --univers-bouton: var(--c-bleu-tisto-fonce); /* texte blanc ≥ 4,5:1 */ --univers-bouton-contraste: var(--c-blanc); --univers-fond: var(--c-bleu-tisto-pale); --univers-personnage-img: url("../assets/img/personnages/tisto-neutre.webp"); } [data-univers="tadach"] { /* Bizz-Bizz — fonctionnements associés au TDAH */ --univers-nom: "TADACH"; --univers-personnage: "Bizz-Bizz"; --univers-couleur: var(--c-jaune-bizzbizz); /* SOURCE : fiche couleur, 8 sept. 2026 */ --univers-couleur-fonce: var(--c-jaune-bizzbizz-fonce); --univers-couleur-claire: var(--c-jaune-bizzbizz-clair); --univers-couleur-pale: var(--c-jaune-bizzbizz-pale); --univers-contraste: var(--c-jaune-bizzbizz-contraste); --univers-fond: var(--c-jaune-bizzbizz-pale); --univers-personnage-img: url("../assets/img/personnages/bizz-bizz-neutre.webp"); } [data-univers="praxico"] { /* Aoutch — fonctionnements associés au TDC */ --univers-nom: "PRAXICO"; --univers-personnage: "Aoutch"; --univers-couleur: var(--c-vert-anis); /* SOURCE : fiche couleur, 8 sept. 2026 */ --univers-couleur-fonce: var(--c-vert-anis-fonce); --univers-couleur-claire: var(--c-vert-anis-clair); --univers-couleur-pale: var(--c-vert-anis-pale); --univers-contraste: var(--c-vert-anis-contraste); --univers-fond: var(--c-vert-anis-pale); --univers-personnage-img: url("../assets/img/personnages/aoutch-neutre.webp"); } [data-univers="cellule-souche"] { /* Lilirone — maison, Grand Atlas, réserve générale de ressources. Rose de la charte : la genèse livrée le 14 sept. 2026 décrit Lilirone comme « une bulle de lumière rose », « un petit être rose aux dendrites lumineuses ». À affiner si Nelly livre une fiche couleur. */ --univers-nom: "Cellule Souche"; --univers-personnage: "Lilirone"; --univers-couleur: var(--c-rose); --univers-couleur-fonce: var(--c-rose-fonce); --univers-couleur-claire: var(--c-rose-clair); --univers-couleur-pale: var(--c-rose-pale); --univers-contraste: var(--c-rose-contraste); --univers-fond: var(--c-rose-pale); --univers-personnage-img: url("../assets/img/personnages/lilirone-salut.webp"); } /* -------------------------------------------------------------------------- Ce qui découle de l'univers courant, quel qu'il soit. Bloc séparé et placé APRÈS les quatre scopes : chaque var() se résout ici contre la valeur que l'élément a réellement reçue, donc l'accent d'une section TADACH sort bien en jaune. Écrire ces lignes à :root ne fonctionnerait pas (valeur figée à la racine puis héritée). Décision : l'accent et les liens SUIVENT l'univers, pour l'immersion. --c-focus n'y figure pas volontairement : l'anneau de focus reste rose partout, pour que le repère clavier ne change jamais d'apparence. -------------------------------------------------------------------------- */ [data-univers="spectrus"], [data-univers="tadach"], [data-univers="praxico"], [data-univers="cellule-souche"] { --jauge-remplissage: var(--univers-couleur); --c-accent: var(--univers-couleur); --c-accent-fonce: var(--univers-couleur-fonce); --c-accent-clair: var(--univers-couleur-claire); --c-accent-pale: var(--univers-couleur-pale); --c-accent-contraste: var(--univers-contraste); --c-accent-bouton: var(--univers-bouton, var(--univers-couleur)); --c-accent-bouton-contraste: var(--univers-bouton-contraste, var(--univers-contraste)); --c-lien: var(--univers-couleur-fonce); } /* ========================================================================== 15. RÉDUCTION DES ANIMATIONS (brief §17 : respecter le réglage système) Les durées passent à 1 ms (et non 0) pour que les événements transitionend / animationend continuent d'être émis côté JS. Les jauges affichent alors directement leur état final. ATTENTION : ceci ne couvre QUE les transitions et animations CSS. GSAP ne lit ni --dur-* ni cette @media. Tout script d'univers doit tester window.matchMedia('(prefers-reduced-motion: reduce)') de son côté et basculer sur l'état final. Sans cela, les scènes d'usine continueront de s'animer pour un utilisateur qui a demandé l'inverse. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapide: 1ms; --dur-base: 1ms; --dur-lente: 1ms; --dur-scene: 1ms; --dur-jauge: 1ms; --ease-rebond: var(--ease-standard); --decalage-apparition: 0; } } /* ========================================================================== RÉSERVÉ — options de confort visuel (fiche Rdv0 : « accessibilité par design »). Non implémenté en V1 ; prévu comme scope [data-confort="…"] redéfinissant --c-texte-2, --c-bordure et les durées. Ne pas coder dans les composants avant décision. ========================================================================== */