/* ========================================================================== PALETTE — LE SEUL FICHIER A OUVRIR POUR CHANGER LES COULEURS DU SITE -------------------------------------------------------------------------- Tout ce qui est colore sur la page descend des TROIS boutons ci-dessous. Tourner `--teinte` de 262 a 165 fait passer le site entier au vert menthe : bandeau, liens, jauges, fonds pales, ombres portees. Rien d'autre a toucher. POURQUOI OKLCH ET PAS DES HEXA Une couleur hexa melange teinte, saturation et clarte : on ne peut pas en tourner une sans defaire les deux autres. En OKLCH les trois sont separes -- oklch(clarte chroma teinte) -- et la clarte est PERCUE, pas calculee. Tourner la teinte garde donc la meme clarte percue, ce qui suffit a ce que la page reste equilibree. MAIS PAS LE MEME CONTRASTE. Cette note affirmait le contraire jusqu'au 2026-09-15, et c'etait faux. Le contraste WCAG se calcule sur la luminance relative, qui n'est pas la clarte percue : a clarte OKLCH egale, une couleur saturee change de luminance avec sa teinte. Six themes passaient sous le minimum AA sans que rien ne le signale. Voir `--clarte-marque` plus bas. LES ECARTS DE TEINTE NE SONT PAS INVENTES La reference n'emploie pas une seule teinte mais cinq, proches. Relevees le 2026-09-14 en convertissant chaque hexa de la V3 : #015afd bandeau L 0.53995 C 0.25180 H 262.161 <- la teinte de reference #008bfc jauges L 0.63646 C 0.19482 H 252.762 -9.399 #0093fc pistes L 0.65393 C 0.18628 H 250.240 -11.921 #0099ff liens L 0.66905 C 0.18368 H 248.807 -13.354 #def6ff hero L 0.95834 C 0.02794 H 222.276 -39.885 #d9f7ff sections L 0.95696 C 0.03303 H 215.572 -46.589 Les fonds pales tirent donc vers le cyan, 40 a 47 degres plus loin que le bandeau. Cet ecart est ce qui fait respirer la page : il est conserve tel quel et suit la rotation. C'est la raison d'etre des variables `--ecart-*`, et la raison de ne PAS y toucher. CE QUI NE PASSE PAS PAR ICI, ET POURQUOI Les `mask: linear-gradient(#000 ..., #0000 ...)` de sections.css ne sont pas des couleurs : dans un masque, seul le canal alpha compte, et le noir n'y veut dire que « opaque ». Les teindre ne changerait rien a l'ecran et brouillerait la lecture du fichier. Ils restent en noir, exprès. ========================================================================== */ :root { /* ====================================================================== */ /* LES TROIS BOUTONS */ /* ====================================================================== */ /* Angle de teinte, 0 a 360. Quelques reperes : 20 brique · 40 terre cuite · 90 or · 140 vert · 165 menthe 195 turquoise · 230 azur · 262 le bleu d'origine · 300 lavande */ --teinte: 262.16; /* Multiplicateur de saturation. 0 rend la page grise, 1 garde l'intensite d'origine, 1.3 la pousse. Au-dela de 1 certaines teintes sortent de ce qu'un ecran sait afficher : le navigateur ramene alors la couleur dans ses limites tout seul, sans erreur et sans casse. */ --intensite: 1; /* L'or des etoiles d'avis. Independant, parce que c'est une convention et pas une couleur de marque : des etoiles bleues ne se lisent plus comme une note. Le mettre a `var(--teinte)` pour qu'il suive quand meme. */ --teinte-accent: 90.43; /* ====================================================================== */ /* ECARTS RELEVES — ne pas modifier sans remesurer */ /* ====================================================================== */ --ecart-jauge: -9.399; --ecart-piste: -11.921; --ecart-lien: -13.354; --ecart-pale-haut:-39.885; --ecart-pale: -46.589; /* ====================================================================== */ /* ROLES — ce que le reste du site appelle */ /* Chaque ligne porte l'hexa d'origine qu'elle reproduit a l'identique */ /* quand les trois boutons sont a leur valeur de depart. */ /* ====================================================================== */ /* --- la marque ------------------------------------------------------- */ /* LA CLARTE DE LA MARQUE EST UN BOUTON, ET IL A FALLU QU'ELLE LE DEVIENNE. Une note de ce fichier affirmait qu'en OKLCH « tourner la teinte garde exactement le meme contraste ». C'EST FAUX, et la mesure du 2026-09-15 le montre. La clarte OKLCH est PERCUE ; le contraste WCAG se calcule sur la luminance relative, qui est une autre fonction. A clarte OKLCH egale, une meme couleur saturee change de luminance avec sa teinte : teinte 262 (bleu) #015afd blanc dessus 5,41:1 teinte 300 (violet) #8a2ee7 5,79:1 teinte 230 (azur) #007ce1 4,23:1 teinte 198 (mint) #0092a2 3,73:1 Six themes livres passaient donc sous le minimum AA de 4,5:1 sans que rien ne le signale. Leur clarte est abaissee juste assez pour le tenir -- de 0,006 pour `foret`, de 0,047 pour `mint`. */ --clarte-marque: 0.53995; --c-marque-vif: oklch(var(--clarte-marque) calc(0.25180 * var(--intensite)) var(--teinte)); /* #015afd */ --c-marque: oklch(0.66905 calc(0.18368 * var(--intensite)) calc(var(--teinte) + var(--ecart-lien))); /* #0099ff */ --c-marque-jauge: oklch(0.63646 calc(0.19482 * var(--intensite)) calc(var(--teinte) + var(--ecart-jauge))); /* #008bfc */ /* Le fond des pistes et des pastilles d'etape : la meme couleur que la jauge, posee a 10 %. Un alpha plutot qu'un gris fixe, pour qu'elle se teinte du fond sur lequel elle tombe. */ --c-marque-pose: oklch(0.65393 calc(0.18628 * var(--intensite)) calc(var(--teinte) + var(--ecart-piste)) / 0.102); /* #0093fc1a */ /* --- les fonds pales ------------------------------------------------- */ --c-fond-pale: oklch(0.95696 calc(0.03303 * var(--intensite)) calc(var(--teinte) + var(--ecart-pale))); /* #d9f7ff */ --c-fond-pale-haut: oklch(0.95834 calc(0.02794 * var(--intensite)) calc(var(--teinte) + var(--ecart-pale-haut))); /* #def6ff */ /* --- l'accent -------------------------------------------------------- */ --c-accent: oklch(0.86750 calc(0.17403 * var(--intensite)) var(--teinte-accent)); /* #ffcd17 */ /* --- les neutres ----------------------------------------------------- */ /* Le blanc casse du bloc « featured » porte un souffle de la teinte : a 0.001 de chroma il reste un blanc, mais il n'est plus etranger au reste de la page quand elle tourne. */ --c-blanc: #ffffff; --c-noir: #000000; --c-coquille: oklch(0.99183 calc(0.00106 * var(--intensite)) var(--teinte)); /* #fdfcfc */ --c-gris-050: oklch(0.976 0 0); /* #f7f7f7 */ --c-gris-200: oklch(0.845 0 0); /* #cccccc */ /* --- encres : le noir a ses onze opacites ---------------------------- */ --c-encre: rgba(0, 0, 0, 1); --c-encre-96: rgba(0, 0, 0, 0.96); --c-encre-70: rgba(0, 0, 0, 0.7); --c-encre-60: rgba(0, 0, 0, 0.6); --c-encre-50: rgba(0, 0, 0, 0.5); --c-encre-40: rgba(0, 0, 0, 0.4); --c-encre-30: rgba(0, 0, 0, 0.3); --c-encre-25: rgba(0, 0, 0, 0.25); --c-encre-15: rgba(0, 0, 0, 0.15); --c-encre-10: rgba(0, 0, 0, 0.1); --c-encre-08: rgba(0, 0, 0, 0.078); --c-encre-05: rgba(0, 0, 0, 0.05); --c-encre-00: rgba(0, 0, 0, 0); /* --- blancs transparents, sur les fonds sombres ---------------------- */ --c-blanc-80: rgba(255, 255, 255, 0.8); --c-blanc-60: rgba(255, 255, 255, 0.6); --c-blanc-25: rgba(255, 255, 255, 0.25); --c-blanc-15: rgba(255, 255, 255, 0.15); --c-blanc-00: rgba(255, 255, 255, 0); /* --- voiles poses sur les photos ------------------------------------- Ce sont des assombrissements, pas des masques : ils se voient. Ils restent neutres par defaut ; les teinter est un choix a faire theme par theme, d'ou leur presence ici plutot qu'en dur dans sections.css. */ --c-voile-fiche: var(--c-encre-50); --c-voile-cta: var(--c-encre-30); --c-voile-avis: var(--c-encre-60); --c-verre-haut: var(--c-encre-50); --c-verre-bas: var(--c-encre-25); } /* ========================================================================== LES VISUELS — option, et seulement option -------------------------------------------------------------------------- Une palette ne touche que le CSS. Le pot, les gommes et le ciel du hero sont des photos : ils restent bleus quelle que soit la teinte, et une page menthe avec un produit bleu ne montre qu'a moitie ce qu'on cherche a voir. D'ou cet interrupteur, qui fait tourner AUSSI les visuels de produit : CE QUE CA VAUT, ET CE QUE CA NE VAUT PAS `hue-rotate()` tourne la teinte en sRGB, pas en OKLCH : la clarte bouge un peu, et le resultat n'est pas la couleur qu'un photographe obtiendrait. Ca suffit pour choisir une direction, ca ne remplace pas de nouveaux visuels. C'est une maquette, pas une production. Aucune photo de personne n'est touchee : une peau qui vire au vert ne dit rien d'utile sur une palette. Seuls le pot, les gommes et les pastilles tournent. Le filtre est pose sur les CONTENEURS et non sur les images, pour ne pas ecraser les `filter: blur()` que portent deja quatre gommes du hero. Sans l'attribut, aucune de ces regles ne s'applique et pas un seul `filter` n'est cree : la page par defaut reste exactement celle de la V3. ========================================================================== */ :root { /* L'ecart entre la teinte choisie et celle d'origine, en degres. */ --rotation-images: calc((var(--teinte) - 262.16) * 1deg); } [data-images="tourne"] .oya-hero__decor, [data-images="tourne"] .oya-ingredients__gomme, [data-images="tourne"] .oya-carte-produit__cadre, [data-images="tourne"] .oya-featured__pastille, [data-images="tourne"] .oya-buy__vue { filter: hue-rotate(var(--rotation-images)); } /* ========================================================================== LA V5 EST EN TERRACOTTA, ET C'EST UN THEME -- PAS UNE BASE MODIFIEE -------------------------------------------------------------------------- Le terracotta de la V5 se pose sur le `` de chaque page : Une premiere version l'avait ecrit dans `:root`, en y remplacant les trois boutons, les ecarts et les deux fonds. C'etait une erreur, et elle cassait les themes : - `?palette=origine` retirait l'attribut et retombait sur `:root`, donc sur... le terracotta. Le bleu d'origine etait devenu inatteignable. - `?palette=mint` heritait des ecarts retournes vers l'orange : ses liens sortaient a #00afd4 au lieu de #00b7a3. - `?palette=menthe`, qui ne cloue pas les fonds, gardait le fond CREME du terracotta sous un bandeau vert. `:root` est donc revenu a l'identique de la V4 : c'est la reference, et une reference ne se modifie pas pour changer d'apparence. Tout ce qui est propre a la V5 vit dans son attribut, et les treize themes fonctionnent. ========================================================================== */ /* ========================================================================== THEMES PRETS — un seul attribut sur les allume -------------------------------------------------------------------------- ou, pour essayer sans toucher au fichier, en ajoutant ?palette=menthe a l'URL (voir scripts/palette.js). ========================================================================== */ [data-palette="menthe"] { --teinte: 165; --intensite: 0.95; --teinte-accent: 75; --clarte-marque: 0.506; } /* Les deux « mint » ne tournent pas seulement la teinte : ils CLOUENT le fond pale sur #EFFFF2, demande tel quel. C'est possible parce qu'un theme peut redefinir un role et pas seulement un bouton. Pourquoi il faut le clouer plutot que tourner : #EFFFF2 est 2,8 % plus CLAIR que le #d9f7ff d'origine, et la clarte n'est pas un bouton -- elle appartient a chaque role, c'est ce qui garantit que le contraste ne bouge pas quand la teinte tourne. Une rotation seule aurait donne la bonne teinte et le mauvais fond. Le fond du hero suit avec le rapport releve entre les deux fonds d'origine : +0,00138 de clarte, chroma x 0,846. Les deux se distinguent par ce que devient la marque : mint la marque garde l'ecart mesure avec le fond -> bandeau #0092a2 mint-vert la marque prend la teinte du fond -> bandeau #009200 */ /* L'ENTRE-DEUX DEMANDE : a mi-chemin du bleu d'origine (262) et du mint (198). Sa clarte recule de 0,016 -- sans quoi il sort a 4,23:1, sous AA. */ [data-palette="azur"] { --teinte: 230; --intensite: 1; --teinte-accent: 90.43; --clarte-marque: 0.524; /* #0076DC, blanc dessus 4,54:1 */ /* LE FOND SE RAPPROCHE DE LA MARQUE. L'ecart de -46,6 degres est celui de la reference : il mene du bleu au cyan, et c'est ce qui fait respirer la page d'origine. Applique a l'azur il mene a #DAF9F3, un fond qui tire au vert sous un bandeau bleu -- le fond ne se lit plus comme la meme famille que le theme. L'ecart est donc ramene a -20 degres ici, ce qui donne #D9F7FD : encore un peu plus frais que la marque, mais de la meme famille. Le rapport entre les deux fonds est conserve (0,856, releve), pour que le degrade du hero garde sa progression. La valeur MESUREE reste celle de `:root` : le theme `origine` la garde intacte. C'est un choix de ce theme, pas une correction du releve. */ --ecart-pale: -20; --ecart-pale-haut: -17.1; } [data-palette="mint"] { --clarte-marque: 0.493; /* #008293, blanc dessus 4,55:1 */ --teinte: 197.788; --intensite: 1; --teinte-accent: 90.43; --c-fond-pale: oklch(0.98465 0.02393 151.199); /* #EFFFF2, demande */ --c-fond-pale-haut: oklch(0.98603 0.02024 151.199); /* #F1FFF4 */ } [data-palette="mint-vert"] { --clarte-marque: 0.517; /* #008A00, blanc dessus 4,53:1 */ --teinte: 151.199; --intensite: 1; --teinte-accent: 90.43; --c-fond-pale: oklch(0.98465 0.02393 151.199); /* #EFFFF2, demande */ --c-fond-pale-haut: oklch(0.98603 0.02024 151.199); /* #F1FFF4 */ } [data-palette="terre"] { --teinte: 40; --intensite: 0.85; --teinte-accent: 70; } /* Les deux chauds — terracotta et argile — corrigent DEUX choses que la rotation seule fait mal des qu'on quitte les bleus. 1. LE FOND PARTAIT VERS LE ROSE. L'ecart de -46,6 degres entre la marque et le fond mene du bleu au cyan, ce qui refroidit. Applique a un orange, il mene au rose : `#fbecf3` au lieu d'une creme. Les deux themes clouent donc le fond, comme les « mint ». 2. L'EVENTAIL PARTAIT VERS LE ROSE AUSSI. Liens et jauges se placent 13 et 9 degres SOUS la marque. Sur un terracotta ca donne un vieux rose (#cd7b79) -- joli, mais ce n'est plus la meme famille. Les ecarts sont donc RETOURNES : l'eventail s'ouvre vers l'orange (#c8815b). C'est a cela que servent les variables `--ecart-*`, et c'est le seul endroit du fichier ou il est legitime d'y toucher. LA CLARTE, ELLE, NE BOUGE PAS, et c'est ce qui sauve le contraste : blanc sur le bandeau origine 5,41:1 terracotta 5,40:1 argile 5,23:1 texte 70 % sur le fond origine 8,09:1 terracotta 8,03:1 argile 8,03:1 Mesure du 2026-09-14. A titre de comparaison, le terracotta « de catalogue » #E2725B ne tient que 3,09:1 sous du blanc -- sous le minimum AA de 4,5:1. C'est pour cela que le bandeau est un terracotta FONCE : ce n'est pas un choix esthetique, c'est la clarte d'origine conservee. */ [data-palette="terracotta"] { --teinte: 35; --intensite: 0.56; --teinte-accent: 75; --ecart-jauge: 9.399; --ecart-piste: 11.921; --ecart-lien: 13.354; --c-fond-pale: oklch(0.95696 0.02200 70); /* #FBEFE1, creme */ --c-fond-pale-haut: oklch(0.95834 0.01861 70); /* #FAEFE4 */ } /* La variante brune, cote « mocha » : meme methode, moins de chroma. */ [data-palette="argile"] { --teinte: 45; --intensite: 0.34; --teinte-accent: 80; --ecart-jauge: 9.399; --ecart-piste: 11.921; --ecart-lien: 13.354; --c-fond-pale: oklch(0.95696 0.01250 78); /* #F5F0E8, greige */ --c-fond-pale-haut: oklch(0.95834 0.01058 78); /* #F5F0EA */ } [data-palette="brique"] { --teinte: 22; --intensite: 1; --teinte-accent: 65; } [data-palette="foret"] { --teinte: 145; --intensite: 0.9; --teinte-accent: 85; --clarte-marque: 0.528; } [data-palette="lavande"] { --teinte: 300; --intensite: 0.9; --teinte-accent: 95; } [data-palette="turquoise"]{ --teinte: 195; --intensite: 1; --teinte-accent: 90; --clarte-marque: 0.493; } [data-palette="agrume"] { --teinte: 70; --intensite: 1.1; --teinte-accent: 30; } [data-palette="encre"] { --teinte: 262.16; --intensite: 0.15; --teinte-accent: 90; } /* ========================================================================== REPLI — navigateurs qui ne connaissent pas oklch() -------------------------------------------------------------------------- oklch() est disponible partout depuis 2023 (Chrome 111, Safari 15.4, Firefox 113). Avant ces versions, une declaration oklch() est simplement ignoree : la variable garderait sa valeur precedente, donc AUCUNE. Sans ce bloc, un vieux navigateur afficherait un site sans fond ni accent. Le repli sert les couleurs d'origine en hexa. Les themes ne s'y appliquent pas -- c'est le compromis assume : le site reste juste, il ne tourne plus. ========================================================================== */ @supports not (color: oklch(0.5 0.1 200)) { :root { --c-marque-vif: #015afd; --c-marque: #0099ff; --c-marque-jauge: #008bfc; --c-marque-pose: rgba(0, 147, 252, 0.102); --c-fond-pale: #d9f7ff; --c-fond-pale-haut: #def6ff; --c-accent: #ffcd17; --c-coquille: #fdfcfc; --c-gris-050: #f7f7f7; --c-gris-200: #cccccc; } }