/* ============================================================ 01 — TOKENS · direction « L'AFFICHE » Le papier est le fond, le Lapis est l'encre. L'Ambre ne sert qu'à une chose : valider. Les six familles ont chacune leur encre, et elles ne se croisent qu'à un seul endroit du site. Tous les ratios en commentaire sont mesures (WCAG 2.1), pas estimes. ============================================================ */ :root { /* --- Charte --- Source unique : « CHARTE GRAPHIQUE WARUJU — Refonte logo Juillet 2026 », page « Logo & couleur ». Quatre valeurs, pas une de plus. Le Lapis-Lazuli y est donne a #1E0080 (CMJN 77,100,0,50). Une valeur #532DD2 avait ete substituee ici, relevee a la pipette sur les boutons du site en ligne : c'est la couleur du theme Woodmart encore en production, anterieure a la refonte, pas une couleur de marque. La charte prime sur le releve. Le Lapis mesure 15.04:1 sur le papier. C'est une couleur d'APLAT et de logo, pas une couleur de texte : en titre sur clair, a deux crans du Noir, il ne se distingue pas du corps. La charte ne l'emploie jamais autrement, ses propres pages sont en noir sur blanc ou en noir sur aplat de couleur. */ --wrj-lapis: #1E0080; /* 15.04:1 — aplats pleine largeur, logo */ --wrj-ambre: #FFDC66; /* 1.31:1 — aplat uniquement, jamais du texte */ --wrj-noir: #0A001E; /* 19.93:1 */ --wrj-blanc: #FAFDFF; /* --- Surfaces --- Le papier est la seule surface de page. Il n'y a pas de « fond de section alternatif » : ce qui rythme la page, ce sont les pans d'encre pleine largeur, pas des gris. */ --wrj-papier: var(--wrj-blanc); --wrj-papier-2: #F0F1F9; /* puits d'image, champ au repos — 1.10:1 */ /* --- Encres --- Aucun gris pur : tous les neutres sont teintes sur la teinte du Lapis de la charte, OKLCH H 275.3. La rampe precedente etait calee sur H 283, la teinte du violet substitue ; chaque valeur a ete redevriee a chroma et contraste identiques, seule la teinte tourne. Le titre est en Noir et non en Lapis : c'est l'usage de la charte elle-meme, et a 15.04:1 contre 19.93:1 le Lapis en titre ne se lirait pas comme une couleur mais comme un noir sali. La couleur, dans ce systeme, arrive par les aplats, pas par la teinte du texte. */ --wrj-encre: var(--wrj-noir); /* 19.93:1 sur papier — AAA */ --wrj-encre-2: #33349E; /* 9.67:1 — AAA, texte long */ --wrj-encre-3: #5762A5; /* 5.56:1 — AA, metadonnees */ --wrj-filet-fort: #828EC9; /* 3.09:1 — bordures de composants */ --wrj-filet: #D1D6EC; /* 1.41:1 — filets de grille, decoratif */ --wrj-titre: var(--wrj-encre); /* 19.93:1 — le titre est en Noir */ /* Le lien doit se detacher d'un corps deja tres sombre. Le Lapis, a deux crans du Noir, ne s'en detache pas ; l'encre-2 si. */ --wrj-lien: var(--wrj-encre-2); /* 9.67:1 */ /* --- Action --- Mesure decisive : Ambre sur papier = 1.31:1. L'Ambre ne peut donc JAMAIS etre du texte, une icone ou une bordure sur clair. Il n'existe qu'en aplat, sous du Noir (15.20:1), et il est reserve a une seule chose sur tout le site : valider. */ --wrj-action: var(--wrj-ambre); --wrj-action-texte: var(--wrj-noir); /* --- Etats --- */ --wrj-erreur: #B03636; /* 6.00:1 sur papier */ --wrj-succes: #0A6E55; /* 6.09:1 sur papier */ --wrj-focus: var(--wrj-lapis); /* --- Les six encres de famille --- Les cinq univers de la charte, page « Les univers · Nuancier », repris a la valeur exacte. Le catalogue compte six familles : le Lapis prend la sixieme place et revient a « Marche et travail », la famille socle, la plus volumique (14 references). C'est de la que vient la couleur du site. La charte pose ses propres pages en aplat plein d'univers avec le titre en noir dessus ; le site fait pareil. Le texte reste sombre partout ailleurs. `--u-*` : l'aplat, valeur de charte, jamais retouchee. `--u-*-encre` : la version texte, assombrie jusqu'a 4.5:1 sur la surface la plus claire ET sur la surface teintee. `--u-*-sur` : ce qui se pose SUR l'aplat. Le choix n'est pas un parti pris, c'est le plus contraste des deux : noir sur les trois chauds, blanc sur les trois froids. CORRECTION DU 2026-08-14. Les quatre encres chaudes etaient calees sur le papier `#FAFDFF` et sur lui seul : 4.51 a 4.67:1, soit juste au-dessus du seuil. Or une encre de discipline ne se pose pas que sur le papier. Le puits `--wrj-papier-2` `#F0F1F9` sert de fond a la ligne de panier, au bloc de caracteristiques et au champ au repos ; dessus, les quatre tombaient entre 4.09 et 4.24:1. Releve sur le panier : « Course et Cyclisme » en 13px gras, 4.12:1. Une marge de 0.01 au-dessus du seuil n'est pas une marge. Les quatre valeurs sont donc reprises sur le fond LE PLUS SOMBRE des deux, ce qui est la seule facon de ne plus avoir a verifier ou l'encre atterrit. L'assombrissement va de 4.5 a 6.5 % : les canaux sont mis a l'echelle ensemble, donc la teinte et la saturation ne bougent pas, seule la valeur descend. L'ecart n'est pas visible a l'oeil, il l'est a la mesure. Hestia et Lapis passaient deja sur les deux fonds (4.80 et 13.65) : ils ne sont pas touches. On ne retouche pas ce qui tient. */ --wrj-u-atlas: #CC4141; --wrj-u-atlas-encre: #C33E3E; --wrj-u-atlas-sur: var(--wrj-blanc); /* encre 5.04:1 papier · 4.57:1 puits · sur aplat 4.67:1 */ --wrj-u-verdancy: #0C9976; --wrj-u-verdancy-encre: #0B7C64; --wrj-u-verdancy-sur: var(--wrj-noir); /* encre 5.04:1 papier · 4.57:1 puits · sur aplat 5.65:1 */ --wrj-u-adonis: #FF6C01; --wrj-u-adonis-encre: #B74D07; --wrj-u-adonis-sur: var(--wrj-noir); /* encre 5.04:1 papier · 4.57:1 puits · sur aplat 7.17:1 */ --wrj-u-zephyr: #FFB511; --wrj-u-zephyr-encre: #926515; --wrj-u-zephyr-sur: var(--wrj-noir); /* encre 5.02:1 papier · 4.56:1 puits · sur aplat 11.51:1 */ --wrj-u-hestia: #9E42B3; --wrj-u-hestia-encre: #9E42B3; --wrj-u-hestia-sur: var(--wrj-blanc); /* encre 5.29:1 papier · 4.80:1 puits · sur aplat 5.29:1 */ --wrj-u-lapis: #1E0080; --wrj-u-lapis-encre: #1E0080; --wrj-u-lapis-sur: var(--wrj-blanc); /* encre 15.04:1 papier · 13.65:1 puits · sur aplat 15.04:1 */ /* Valeurs par defaut, surchargees par .wrj-f--* */ --wrj-u: var(--wrj-lapis); --wrj-u-encre: var(--wrj-lapis); --wrj-u-sur: var(--wrj-blanc); /* L'encre de calage : la plaque decalee du hors-reperage. Elle doit differer de la couleur du titre, sinon le decalage epaissit la lettre au lieu de se voir. Rouge par defaut, comme la seconde plaque d'une serigraphie deux tons ; elle prend l'encre de la discipline la ou il y en a une. */ --wrj-calage-encre: var(--wrj-u-atlas); /* --- Typographie --- Syne et Space Grotesk sont l'identite deja engagee de Waruju. Regle de traitement : Syne n'existe qu'aux extremes, en 800 au-dela de 40px avec un tracking negatif, ou en label de 12px tres espace. Entre 22 et 28px elle ressemble a n'importe quel Syne, cette zone est vide dans l'echelle. */ --wrj-display: 'Syne', 'Trebuchet MS', system-ui, sans-serif; --wrj-corps: 'Space Grotesk', system-ui, -apple-system, sans-serif; /* Zone de lecture : pas fluide, une fiche produit est une interface dense */ --wrj-t-label: 0.8125rem; /* 13 */ --wrj-t-sm: 0.9375rem; /* 15 */ --wrj-t-corps: 1.0625rem; /* 17 */ --wrj-t-chapo: 1.375rem; /* 22 */ /* Taille de lecture longue. Le corps a 17px est cale sur une interface dense (fiche produit, tunnel, tableaux). Une page de contenu n'est pas une interface : c'est un texte qu'on lit d'un bout a l'autre. Mesure faite en caracteres et non en pixels : la colonne de 676px portait 79 caracteres par ligne en mediane et jusqu'a 89, quand la regle du metier plafonne a 65-75. Le defaut n'etait donc pas une colonne trop etroite mais une ligne trop longue. On corrige en montant la taille de lecture plutot qu'en retrecissant la colonne : c'est la seule facon de baisser le nombre de caracteres par ligne SANS toucher a la largeur physique, qui elle est bonne. A 19px la meme colonne porte 71 caracteres au lieu de 79, et le texte parait plus genereux au lieu de plus petit. Comptage : lignes reelles reconstruites au Range, caracteres comptes un par un, blancs non rendus exclus. Une estimation par pixels (largeur divisee par une chasse moyenne supposee) donne 72 sur les memes pages et sous-estime de 7 caracteres, parce que la chasse reelle de Space Grotesk en texte francais est plus etroite que la valeur habituellement retenue. Reste a 17px sous 400px, ou la colonne ne fait que 350px et ou grossir ferait tomber la ligne sous 35 caracteres. */ --wrj-t-lecture: clamp(1.0625rem, 1rem + 0.247vw, 1.1875rem); /* 17 → 19 */ /* Zone d'affiche : reservee au hero de l'accueil. Minimum mesure sur le mot le plus large du site, pas estime. En capitales Syne 800 : « COMMANDE » fait 382px a 36px et « DISCIPLINE » 409px a 44px, pour 350px utiles sur un ecran de 390px. La plus grande taille qui les absorbe tous les deux est 33px ; on retient 32px. */ --wrj-t-affiche: clamp(2rem, 0.40rem + 6.7vw, 8.25rem); /* 32 → 132 */ /* Titre de page de contenu. Ce token existe parce que l'affiche et la page de lecture n'ont pas le meme travail. L'ancienne echelle unique montait a 132px et suivait la fenetre sans jamais regarder la colonne : a 1440px le titre pesait 102.88px, soit 6.05x le corps, au-dessus d'une colonne de 676px, et la boite du titre faisait 1248px pour 676px de texte (1.85x). C'est ce rapport qui rendait la colonne « peu large », pas la colonne elle-meme. Deux corrections de principe : 1. La taille se cale sur la MESURE, pas sur la fenetre. La colonne de lecture atteint sa largeur definitive vers 900px de fenetre ; le titre s'arrete donc a 900px lui aussi, au lieu de continuer a grossir jusqu'a 1440px et au-dela. 2. Le plafond est fixe par le rapport voulu titre/corps sur une colonne de 65-75 caracteres : 3x environ, soit 56px pour 19px de lecture. En dessous de 2.5x le titre ne tient plus son rang, au dela de 3.5x il ecrase la colonne. Le plancher de 32px est repris tel quel : c'est une mesure, pas un choix, « DISCIPLINE » ne passe pas au-dessus. A noter : la CSS ne sait pas compter les caracteres d'un titre. Ce qui s'adapte tout seul a la longueur, c'est la BOITE, bornee en `ch` sur la taille du titre lui-meme (voir .wrj-pan__titre) : elle tient le meme nombre de caracteres par ligne a toutes les tailles, donc un titre court occupe une ligne courte et un titre long deux lignes pleines, sans exception par page. */ --wrj-t-titre-page: clamp(2rem, 0.853rem + 4.71vw, 3.5rem); /* 32 → 56 a 900px */ /* Les niveaux intermediaires. Ces trois jetons n'existaient pas. `02-base.css` et `04-sections.css` les appelaient quand meme : « font-size: var(--wrj-t-h2) » sur un jeton absent est une declaration invalide au calcul, donc font-size retombe en `inherit`. Concretement, tous les h2 du site prenaient la taille de leur parent. Sur une page de contenu, ou `.wrj-prose` est a 19px, un titre de section faisait 19px : du gras, pas de la hierarchie. C'est une part directe du « trop basique ». Meme construction que le titre de page : la valeur atteint son plafond a 900px, la ou la colonne de lecture arrete de grandir. Rapports au plafond, sur 19px de lecture : 56 / 38 / 30 / 22 / 19, soit 1.47, 1.27, 1.36 et 1.16. Les trois premiers passent le seuil de 1.25 pose dans DESIGN.md. Le dernier ne le passe pas et ne le peut pas : quatre niveaux a 1.25 au-dessus de 19px demanderaient un h1 a 46px minimum, or le plancher du h1 est une mesure, pas un choix. Le h4 se distingue donc par la famille et la casse, Syne 800 capitales contre Space Grotesk 500, pas par la taille. Note sur la regle « Syne n'existe pas entre 22 et 28px » ecrite plus haut : elle ne survit pas a une echelle fluide, puisqu'un clamp balaie en continu toutes les valeurs entre ses bornes. Elle vaut pour les paliers fixes, elle ne peut pas valoir ici. */ --wrj-t-h2: clamp(1.625rem, 1.052rem + 2.353vw, 2.375rem); /* 26 → 38 */ --wrj-t-h3: clamp(1.3125rem, 0.882rem + 1.765vw, 1.875rem); /* 21 → 30 */ --wrj-t-h4: clamp(1.0625rem, 0.824rem + 0.980vw, 1.375rem); /* 17 → 22 */ --wrj-ls-affiche: -0.03em; --wrj-ls-label: 0.11em; /* --- Espacement --- Rythme vertical ancre sur la ligne de corps : 17 × 1.53 = 26px. Le macro est un multiple de 26, le micro reste sur 4pt. */ --wrj-e-1: 4px; --wrj-e-2: 8px; --wrj-e-3: 12px; --wrj-e-4: 16px; --wrj-e-5: 24px; --wrj-e-6: 32px; --wrj-bloc-s: 52px; /* 2 × 26 */ --wrj-bloc-m: 78px; /* 3 × 26 */ --wrj-bloc-l: 130px; /* 5 × 26 */ --wrj-section: clamp(78px, 10vw, 156px); --wrj-gouttiere: clamp(20px, 4vw, 56px); --wrj-conteneur: 1360px; /* Mesure : le `ch` de Space Grotesk est plus large que la chasse moyenne d'un texte francais. Rapport releve sur les pages reelles : 1 ch = 1.274 caractere affiche. 62ch portait donc 79 caracteres, au-dessus du plafond de 75. 58ch en porte 74, soit le haut de la fourchette du metier. */ --wrj-mesure: 58ch; /* ~74 caracteres */ /* 56ch tient dans la fourchette 65-75 quelle que soit la methode de comptage retenue : 71 caracteres au comptage reel, 65 a l'estimation par pixels. Valeur choisie pour etre juste dans les deux lectures, et pour que la colonne garde sa largeur physique (682px a 1440, contre 676px avant : l'oeil ne voit pas la difference). */ --wrj-mesure-lecture: 56ch; /* --- Rayons --- Un role exclusif chacun. Regle dure : un aplat pleine largeur n'a pas de rayon, l'encre va au bord. */ --wrj-r-12: 12px; /* champs, puces de filtre, badges */ --wrj-r-18: 18px; /* carte produit, panneau */ --wrj-r-22: 22px; /* dossard, tiroir, modale */ --wrj-r-pill: 999px;/* actions et tags uniquement */ /* --- Mouvement --- Une racle de serigraphie decelere, elle ne rebondit pas. */ --wrj-ease: cubic-bezier(0.16, 1, 0.3, 1); --wrj-ease-cut: cubic-bezier(0.65, 0, 0.35, 1); --wrj-d-tap: 120ms; --wrj-d-etat: 220ms; --wrj-d-panneau:420ms; --wrj-d-calage: 520ms; --wrj-z-nav: 100; --wrj-z-panneau: 200; --wrj-hauteur-nav: 68px; } /* Les six familles. Poser la classe sur un conteneur suffit : tout ce qui est dedans herite de l'encre de la famille. */ .wrj-f--marche { --wrj-u: var(--wrj-u-lapis); --wrj-u-encre: var(--wrj-u-lapis-encre); --wrj-u-sur: var(--wrj-u-lapis-sur); --wrj-calage-encre: var(--wrj-u-atlas); } .wrj-f--course { --wrj-u: var(--wrj-u-verdancy); --wrj-u-encre: var(--wrj-u-verdancy-encre); --wrj-u-sur: var(--wrj-u-verdancy-sur); --wrj-calage-encre: var(--wrj-u-verdancy-encre); } .wrj-f--freestyle { --wrj-u: var(--wrj-u-adonis); --wrj-u-encre: var(--wrj-u-adonis-encre); --wrj-u-sur: var(--wrj-u-adonis-sur); --wrj-calage-encre: var(--wrj-u-adonis-encre); } .wrj-f--collectifs { --wrj-u: var(--wrj-u-atlas); --wrj-u-encre: var(--wrj-u-atlas-encre); --wrj-u-sur: var(--wrj-u-atlas-sur); --wrj-calage-encre: var(--wrj-u-atlas-encre); } .wrj-f--raquettes { --wrj-u: var(--wrj-u-zephyr); --wrj-u-encre: var(--wrj-u-zephyr-encre); --wrj-u-sur: var(--wrj-u-zephyr-sur); --wrj-calage-encre: var(--wrj-u-zephyr-encre); } .wrj-f--fitness { --wrj-u: var(--wrj-u-hestia); --wrj-u-encre: var(--wrj-u-hestia-encre); --wrj-u-sur: var(--wrj-u-hestia-sur); --wrj-calage-encre: var(--wrj-u-hestia-encre); }