EXPERT 02 — DESIGN SYSTEM TERO GROUP : TOKENS, COMPOSANTS, GABARITS

Livrable : architecture complète du design system du groupe Tero — trois couches de tokens,

mécanisme de déclinaison par sous-marque, inventaire des composants, gabarits de pages,

patterns transverses, gouvernance.

Auteur : expert 02 — design system architect / UX-UI lead.

Date : 15 octobre 2026. Périmètre d'écriture : ce fichier uniquement.

Statut : proposition à intégrer par le lead. Rien ici n'est un fait de marque nouveau.

0. Méthode, sources et statut des preuves

Sources lues pour ce document :

Totaux mesurés dans ce document : 25 écarts ou manques relevés dans les fichiers du lead

(§ 1), 1 matrice de contrastes recalculée (§ 3.7), 3 000+ lignes de spécification exploitables.

---

1. CHALLENGE DE L'EXISTANT — 25 constats mesurés

Trié par gravité d'impact sur l'intégration. Chaque constat est vérifiable dans le fichier cité.

1.1 Erreurs de fait ou de marque (à corriger avant toute diffusion)

C1 — Le mot-symbole est écrit en capitales dans toute la documentation. [MESURE]

• Écrit : DESIGN.md L137 (« TERO dans le logo, Tero dans la phrase. Toujours. »),

L605 de tero-group-rules.md (checklist), design-tokens.json L220

("wordmarkCase": "TERO"), tero-group-rules.md § 4.3 L276.

• Mesuré : le fichier de référence _audit/logo-tero-2025.svg porte viewBox="0 0 100 40"

et 5 tracés dont la géométrie exacte est connue (_audit/path-geometry.json) : trois

glyphes de largeur courante (x 0→16,49 ; 21,45→47,36 ; 53,72→67,79) et, à droite, un

couple anneau (x 73,45→100,006 ; y 0,25→26,74) + barre (y 32,55→39,04). Soit 4 lettres

plus une barre sous la 4ᵉ — la lecture la plus simple est t e r o.

• Ce que la mesure ne peut pas dire : la casse ne se lit pas dans les données de tracé.

Elle repose sur l'arbitrage du client reporté dans le brief (mot-symbole minuscule tero).

[A VALIDER CLIENT — confirmation écrite] : la charte doit citer cette décision, pas la déduire.

• Impact : l'erreur est propagée dans 4 fichiers et dans la checklist de livraison ; un

intégrateur qui suit la checklist écrit TERO dans le HTML du logo.

• Correction : partout, tero (mot-symbole, minuscules) · Tero (graphie rédactionnelle,

dans une phrase) · Tero Group (entité) · TERO : jamais, sauf si le client impose

une version capitales qu'aucun fichier du dépôt ne porte aujourd'hui.

C2 — TERO_MONOGRAM-1.png est décrit comme « un anneau abstrait » ; c'est le glyphe o isolé. [MESURE]

• Écrit : tero-group-rules.md § 4.1 L262 et piège n° 6 L582 (« anneau noir 1 272 × 1 861 »),

DESIGN.md L142 (« la vignette anneau utilisée comme logo »), design-tokens.json L242.

• Mesuré (calcul fait dans ce document) : dans _audit/path-geometry.json, le 5ᵉ tracé a

pour boîte x 73,453 → 100,006 ; y 0,253 → 39,044, soit 26,553 × 38,790 unités →

rapport 0,6845. Le PNG _audit/monogram-tero-2026.png fait 1 272 × 1 861 →

rapport 0,6835. Échelle : 47,9 et 48,0 px par unité SVG. C'est le même dessin,

rastérisé à ×48 : le « monogramme » est le glyphe o (anneau + barre) du mot-symbole,

pas un anneau décoratif.

• Impact : la règle « ne jamais utiliser la vignette » interdit un actif de marque légitime

sans dire pourquoi ni par quoi le remplacer ; le vrai défaut (usage comme Organization.logo

en JSON-LD) se noie dans une interdiction trop large.

• Correction : reformuler en deux règles distinctes — (a) [MESURE] le monogramme est le

glyphe o du mot-symbole, ratio 0,684, non carré ; (b) [REGLE] il ne remplace jamais le

mot-symbole dans un en-tête ou dans Organization.logo ; (c) [A VALIDER CLIENT] son usage

comme icône d'application / favicon exige un carré qui n'existe pas encore dans les

fichiers — à faire produire par le studio, jamais par un agent.

C3 — « Almarose s'arrête à 700 » est faux : la graisse 900 existe. [MESURE]

• Écrit : tero-group-rules.md § 3.1 L190 et § 3.3 L221, DESIGN.md L69-70,

design-tokens.json L86 (« Aucune graisse 800/900 : Almarose s'arrete a 700 »), et le

SKILL.md du plugin (« graisse 800/900 sur Almarose (faux gras : la famille s'arrête à 700) »).

• Mesuré : _ref/teropadelclub/public/fonts/ contient almarose-900.woff2, chargé en

font-weight: 900 dans src/styles/global.css L38 ; _ref/…/DESIGN.md L57 décrit

« Almarose (Regular/Medium/Semibold/Bold/Black) ». La graisse **900 existe donc

physiquement** dans le jeu de la marque.

• Contradiction interne au modèle de référence : _ref/…/DESIGN.md L59 impose

« h1 900 · h2 800 » alors qu'aucun fichier 800 n'existe : ce h2 800 est un faux

gras synthétique — exactement le défaut que la charte interdit.

• Impact : la charte du groupe se prive d'une graisse réelle (le 900) et laisse passer la

seule graisse réellement synthétique (le 800) par le modèle censé être la référence.

• Correction : la règle opposable devient « **une graisse n'est autorisée que si son fichier

.woff2 existe » ; le jeu disponible est 400/500/600/700/900 ; le 800 est interdit**

(aucun fichier) ; toute graisse intermédiaire est interdite. Corriger h2 800 dans le modèle

padel. [A VALIDER CLIENT] : le groupe charge-t-il Almarose Black (fichier à récupérer) ou

reste-t-il sur 400→700 ?

C4 — Les variantes officielles du logo portent 5 couleurs hors palette. [MESURE]

• Écrit : tero-group-rules.md § 4.1 L253-262 liste 6 fichiers ;

§ 2.2 affirme que les 7 couleurs déclarées sont « les seules couleurs de marque déclarées ».

• Mesuré (inspection de 12 fichiers logo Tero du miroir WordPress et des 2 vectoriels du projet padel) :

• Impact : 5 valeurs non déclarées (#075F83, #068973, #F4C567, #CEA4A4,

#292929) circulent dans des fichiers officiels de marque, alors que la palette fermée

n'en compte que 7 + 2 neutres. Trois d'entre elles sont des quasi-doublons de couleurs

déclarées (#075F83 ≈ pétrole #004B69 ; #068973 ≈ teal #007864 ; #F4C567 ≈ sable

#FAD282 ; #CEA4A4 ≈ rose poudré #D7B4B4) : c'est exactement la dérive à 164 valeurs

que l'audit condamne, mais dans les fichiers de marque eux-mêmes.

• Correction : (a) ajouter ces 5 valeurs à la liste des dérives interdites en § 2.5 ;

(b) remplacer « les 7 couleurs déclarées sont les seules » par « **les 7 couleurs déclarées

sont les seules** ; les fichiers logo historiques en portent 5 autres, à rééditer par le

studio » ; (c) [A VALIDER CLIENT] : quelle déclinaison couleur du logo est officielle —

noir, blanc, navy #0D1F30, ou aucune (mot-symbole noir uniquement) ?

C5 — Le « logo officiel » a deux géométries incompatibles dans le dépôt. [MESURE]

• _audit/logo-tero-2025.svg : viewBox 100 × 40, rapport 2,500, 5 tracés,

contenu qui remplit exactement le viewBox (x 0 → 100,006).

• _ref/teropadelclub/public/logo-tero.svg : viewBox 3 421 × 1 725, rapport 1,983,

4 tracés. Écart de 26 % sur la largeur relative : les deux fichiers ne peuvent pas être

la même composition.

• Impact : une charte qui dit « on utilise les fichiers officiels tels quels » sans dire

lequel ne tranche rien ; toute maquette est invalidée si la référence change.

• Correction : [A VALIDER CLIENT] le lead doit faire désigner un fichier de référence

(recommandation : le vectoriel 5 tracés, fill unique donc recolorable, car c'est lui qui

porte la barre sous le o décrite par le client), puis figer son viewBox et son rapport

dans design-tokens.json (brand.logo.aspectRatio).

C6 — 5 des 6 « fichiers officiels » ne sont pas des vecteurs : ce sont des rasters masqués. [MESURE]

• Écrit : tero-group-rules.md § 4.2.2 (« Aucun SVG recréé à la main »), § 4.1 les présente

comme des SVG de référence.

• Mesuré : logo-blue.svg, logo-green.svg, logo_yellow.svg, logo-tero-white.svg

et logo-footer.svg ont 0 tracé : ils contiennent un <pattern id="pattern0"> qui

référence une <image> PNG base64 de 533 × 237 px, utilisée comme masque alpha

(mask-type:alpha), au-dessus d'un <rect> de couleur unie.

• Conséquences mesurables : (a) le contour du logo provient d'un masque 533 × 237 :

au-delà de ~533 px de large, le rendu est interpolé ; (b) ces fichiers pèsent ~2 034 octets

de base64 pour un logo qui devrait faire < 1 Ko en vectoriel ; (c) ils introduisent 4 des

5 couleurs de C4.

• Correction : (a) tero-group-rules.md § 4.1 : marquer ces 5 fichiers

« rasters masqués — ne pas utiliser en grand format, à rééditer en vectoriel » ;

(b) interdire le rendu du logo au-delà de 533 px de large tant que la réédition n'est pas

faite ; (c) [A VALIDER CLIENT] le studio réédite 3 variantes vectorielles (noir, blanc, une

déclinaison pilier) à fill unique.

C7 — Le manifeste du design system invente deux entités et en omet cinq. [MESURE]

• manifest.json L36-51 scope.subBrands liste Tero Lodges et River Woods Beach Club,

absents de la structure du groupe donnée par le client (3 piliers : Hospitality, Leisure,

Sport Events + marques citées).

• Il omet immorun.lu, bouwrun.be, buildandrun.be, 12kmanderlecht.be,

terotrail.be (cité) — et Bistro 17/Knokke Out Zoute sont cités sans leur pilier

(« Bistro 17 », « Knokke Out »).

• Impact : le registre des marques est la clé primaire des thèmes (§ 4) et du bandeau

d'écosystème (§ 5.16). Une clé inventée produit une page fantôme ; une clé manquante produit

une marque sans rattachement — le piège n° 7 de la charte.

• Correction : une seule source de vérité machine :

content/sources/tero-brands.json (clé, nom officiel, casse exacte, pilier, domaine,

couleur d'accent éventuelle, statut), dérivée de content/sources/tero-group-facts.md.

manifest.json et les thèmes la lisent, ils ne la recopient pas. [A VALIDER CLIENT] :

Tero Lodges et River Woods Beach Club existent-ils ?

1.2 Erreurs d'accessibilité introduites par les tokens actuels (3 défauts prouvés)

C8 — --tero-muted #B9B9B9 est affecté aux libellés et placeholders : 1,96:1. [MESURE]

• Écrit : tokens.css L14 (« libellés, placeholders »), § 2.1 L129 (« texte désactivé,

libellés de champ »).

• Mesuré : #B9B9B9 sur blanc = 1,96:1, sur #F6F4F4 = 1,79:1. Un placeholder

est du texte : WCAG 2.1 SC 1.4.3 exige 4,5:1. La charte elle-même écrit « jamais en texte

sur blanc » (§ 2.4 L171) et l'affecte pourtant aux libellés de champ.

• Collision de nommage : le contrat OpenDesign mappe --muted: var(--tero-ink-soft)

(#323232) tandis que le primitif --tero-muted vaut #B9B9B9. **Le même mot muted

désigne deux couleurs opposées** (12,82:1 et 1,96:1).

• Correction : --tero-muted ne porte plus de texte (réservé : traits désactivés,

icônes inactives sur fond sombre) ; libellés, placeholders et texte secondaire →

--ui-fg-muted = #323232 (12,82:1 sur blanc, 11,70:1 sur #F6F4F4, mesuré § 3.7).

Renommer le primitif --tero-muted en --tero-disabled pour supprimer la collision.

C9 — L'anneau de focus teal échoue sur la bande profonde (2,97:1). [MESURE]

• Écrit : tokens.css L83 --focus-ring: 3px solid var(--tero-teal) ; § 7.1 L372 impose

ce même anneau partout.

• Mesuré (calcul § 3.7) : teal #007864 sur #212121 = 2,97:1 — sous le seuil de

3:1 de WCAG 2.1 SC 1.4.11 (contraste des composants d'interface), et ce d'autant plus

que la bande profonde est explicitement autorisée (#212121 = --tero-ink-deep).

Sur un aplat teal, l'anneau teal tombe à 1,00:1 : il disparaît.

• Correction : l'anneau devient dépendant du champ (§ 4.4) :

light-a/light-b → #007864 (5,43:1) · deep → #FAD282 (11,20:1 sur #212121, mesuré)

· plus un halo de séparation 0 0 0 2px de la couleur du fond, pour que l'anneau reste

visible sur tout aplat de marque (teal, terracotta, sable).

C10 — Aucune couleur d'erreur, de succès ni d'avertissement n'existe. [MESURE]

• Écrit : § 7.4 L390 impose des états « erreur » et « chargement » ; § 10 L441 impose

« les erreurs sont annoncées et explicites ».

• Mesuré : la palette ne contient aucun token sémantique d'état (ni error, ni

success, ni warning, ni info). Un intégrateur qui suit la charte n'a **aucune valeur

autorisée** pour colorer un message d'erreur : il prendra #B00000, qui est dans la liste

des dérives interdites (§ 2.5 L177).

• Correction [REGLE] : --ui-danger = terracotta #B93815 (5,77:1 sur blanc, 5,27:1

sur #F6F4F4, mesurés) · --ui-success = teal #007864 (5,43:1) ·

--ui-info = pétrole #004B69 (9,50:1) · --ui-warning = pas de couleur de texte :

sable #FAD282 (1,44:1) est inutilisable en texte, et une 8ᵉ couleur serait une dérive →

l'avertissement est icône + texte encre, jamais du jaune sur blanc. [A VALIDER CLIENT]

pour la couleur d'erreur (terracotta est un choix, pas une mesure).

C11 — Le filet #D9D9D9 est utilisé comme bordure de champ. [MESURE]

• Écrit : tokens.css L31-33 : --border: var(--tero-line) dans le contrat ; DESIGN.md

§ 6 et design-tokens.json contract.border = #D9D9D9.

• Mesuré : #D9D9D9 sur blanc = 1,41:1 ; sur #F6F4F4 = 1,29:1. Un filet

décoratif est hors du périmètre de 1.4.11, mais la **limite visible d'un champ de

formulaire est un composant d'interface : 3:1 minimum**.

• Correction : deux tokens distincts — --ui-border = #D9D9D9 (**filets décoratifs

uniquement) et --ui-border-strong = #767676 (4,54:1 sur blanc, 4,15:1** sur

`#F6F4F4**, mesurés) pour toute bordure de champ, case à cocher, sélecteur. Le contrat

OpenDesign --border pointe sur --ui-border (compatibilité) : les **formulaires ne

l'utilisent jamais**.

1.3 Erreurs d'étiquetage [MESURE] vs [REGLE]

C12 — « Trois rayons » est étiqueté [MESURÉ] alors que c'est une règle. [MESURE]

• DESIGN.md L99 : « Trois rayons, pas quinze : … L'existant en compte 15+. [MESURÉ] »

Le [MESURÉ] porte sur les 15+ (vrai : radiusMeasuredDistinct: 15), pas sur « 3 » qui est

un choix. § 7.2 confirme la règle.

• Aggravant : le rayon retenu pour les médias est 12px, valeur **absente des rayons

dominants mesurés** (7 px ×570, 25 px ×225, 20 px ×188, 40 px ×157, 50 px ×116, 30 px ×99,

100 px ×98, 47 px ×83, 32 px ×74, 38 px ×70). Si la doctrine est « on ne s'écarte pas du

mesuré », alors --radius-card devrait valoir 20 px (188 occurrences) ou l'on assume

que 12 px est une règle nouvelle.

• Correction : réétiqueter [RÈGLE, à partir de [MESURÉ] 15 rayons distincts] et justifier

12 px comme choix (ou passer à 20 px pour coller au mesuré dominant).

C13 — Le rayon du CTA est attribué à la mesure alors que la mesure dit 38 px. [MESURE]

• § 7.1 L367 : « fond noir #000000 (référence mesurée du CTA du site) … rayon pilule » ;

design-tokens.json components.buttonPrimary ne porte aucune provenance.

• L'audit mesure 38 px de rayon ; le piège n° 4 dénonce « une pilule à 38 px recopiée à la

main ». La valeur 999 px est une règle, pas la mesure.

• Correction : écrire « mesure : pilule noire à 38 px de rayon — **on ne reproduit pas

38 px** ; règle : --ui-radius-pill = 999 px ». Une règle qui corrige une mesure doit le

dire, sinon la mesure devient indiscutable.

C14 — La rampe typographique a deux définitions incompatibles. [MESURE]

• DESIGN.md L76-85 : 8 paliers en fourchettes (« 13-14 px », « 15-16 px », « 20-25 px »,

« 30-32 px », « 40-50 px », « 60-80 px »).

• tokens.css L48-59 : 12 paliers scalaires (--text-label → --text-display-l),

dont --text-body-l (16 px) et --text-title-s-l (25 px) qui n'existent pas dans

DESIGN.md.

• Impact : un token doit être scalaire. Une fourchette de 15 à 16 px réintroduit

exactement l'improvisation au pixel condamnée par § 3.2 (30 tailles distinctes) : l'intégrateur

choisit « au feeling » dans la fourchette.

• Correction : § 3.2 et DESIGN.md § 3 ne publient qu'une rampe : les 12 paliers

scalaires de tokens.css, et une note « bornes = tailles mesurées, interpolation fluide

= règle ». Supprimer toutes les fourchettes.

C15 — « Aucun texte sous 12 px » contredit le modèle de référence (11,2 px). [MESURE]

• § 8.4 L417 : « Aucun texte sous 12 px » ; _ref/…/DESIGN.md borne le label à 11,2 px

minimum (clamp 0.7rem = 11,2 px).

• Correction : trancher à 12 px plancher pour le groupe (la règle groupe gagne) et

aligner le modèle padel ; le label groupe devient clamp(12px → 13px) (§ 3.4).

1.4 Interdiction trop large qui produit des erreurs

C16 — « Jamais de teal sur fond noir » ne distingue pas le texte de l'aplat. [MESURE]

• § 2.3.5 L153-154 autorise le teal comme accent de bande profonde ; § 7.3 L385 le réautorise

puis L386 l'interdit en texte. Deux règles opposées dans la même section.

• Mesuré : teal en texte sur #212121 = 2,97:1 (échec) · teal en texte sur

#000000 = 3,87:1 (échec AA hors grand texte) · blanc sur aplat teal = 5,43:1 (AA, valide) ·

bord d'aplat teal sur #000000 = 3,87:1 (≥ 3:1, non-texte, valide).

• Correction : écrire la règle en trois lignes : sur bande profonde, (a) **accent

interactif = sable #FAD282 (11,20:1 sur #212121) ; (b) un aplat** teal est autorisé

si son texte est blanc ; (c) jamais de texte teal.

1.5 Manques structurels du design system (le cœur du sujet)

C17 — Il n'y a pas de design system : il y a une couche de primitifs. [MESURE]

• tokens.css (88 lignes) = primitifs + 6 alias de contrat (--bg, --surface, --fg,

--muted, --border, --accent). design-tokens.json components = 4 entrées

(buttonPrimary, buttonSecondary, focus, deepBand).

• Aucun token de composant ne couvre : carte, formulaire, navigation, onglets, accordéon,

tableau, pagination, filtre, galerie, notification, fil d'Ariane, bandeau de marques,

état de chargement.

• Conséquence : chaque composant réinvente ses valeurs dans la page — le mécanisme même de

la dérive à 536 feuilles CSS.

• Correction : les trois couches de § 3, dont une couche de composants de ~120 tokens (§ 3.6).

C18 — Aucun token de mouvement, alors que § 9 impose des durées. [MESURE]

• § 9 L427 : « Durées courtes et intentionnelles : 150 à 250 ms, courbe stable » ; les

composants n'ont aucun token pour l'exprimer. Le modèle de référence, lui, interdit

explicitement les valeurs écrites à la main (« Aucun ease écrit à la main dans un

composant », 3 courbes maximum) et fournit 3 courbes + 6 durées.

• Correction : § 3.7, couche 1 — reprise à l'identique des courbes et durées du modèle

de référence (cubic-bezier(.23,1,.32,1), (.77,0,.175,1), (.32,.72,0,1) ;

140/200/240/380/680 ms) pour garantir la cohérence entre sites du groupe.

C19 — L'échelle d'espacement n'est pas une échelle. [MESURE]

• tokens.css L69-74 : 12 · 24 · 48 · 72 · 96 · 144. Le modèle de référence impose une

échelle 8 pt : 4·8·12·16·24·32·48·64·96·128·160·192, avec la règle « **tout espacement

hors échelle est un bug** ».

• Mesuré : la rampe groupe n'a ni 4, ni 8, ni 16, ni 32, ni 64, ni 128, ni 192 ;

12 n'est pas un multiple de 8 → l'écart interne (padding de bouton, gap de grille de cartes)

n'a aucun token disponible. C'est la raison structurelle pour laquelle l'audit mesure

15+ rayons et 30 tailles : les mêmes besoins n'ont pas de valeur commune.

• Correction : § 3.4 — échelle 8 pt complète, la rampe verticale de section restant

48/72/96/144 (règle groupe conservée comme 4 profils de rythme : § 7.2).

C20 — Pas de clamp() : la rampe est figée, donc des media queries typographiques. [MESURE]

• tokens.css L48-59 : 12 rem fixes. Le modèle de référence : « 8 à 10 paliers fluides,

tous en clamp(). Jamais de palier redéfini en media query. »

• Impact : sans fluidité, chaque composant invente son propre palier par point de rupture —

c'est le mécanisme qui produit les 30 tailles distinctes mesurées sur tero.be.

• Correction : § 3.4, paliers fluides dont les **bornes sont exactement les tailles

mesurées** (12→13, 13→14, 14→15, 15→16, 17→18, 20→25, 30→32, 40→50, 60→80 px) : rien n'est

inventé, on rend la rampe responsive.

C21 — Pas de police de repli à métriques ajustées : le CLS est garanti. [MESURE]

• tokens.css L37 : --font-display: 'Almarose', ui-sans-serif, system-ui, … — aucune

famille de repli à métriques corrigées.

• Mesuré dans le modèle de référence : Almarose fait 85,08 % de la largeur d'Arial

(813 px contre 956 px sur la même chaîne à 100 px) ; sans size-adjust: 85.08%, le CLS de

/terrains/ passe de 0 → 0,021 (police bloquée) et un CLS de 0,0334 a été mesuré

par changement de graisse (900 préchargé après peinture).

• Correction : § 3.4 — déclarer @font-face 'Almarose Fallback' avec

size-adjust: 85.08%, ascent-override: 90.5%, descent-override: 21.2%,

line-gap-override: 3.3% et l'insérer avant les polices système dans --font-display.

C22 — Aucun token de champ (fond/section), donc les contrastes dépendent de la page. [MESURE]

• tokens.css ne connaît qu'un jeu de couleurs. Or DESIGN.md autorise trois fonds

(blanc, #F6F4F4, bande profonde #000000/#212121). Le modèle de référence a résolu

ce point : tokens --field-light-a-bg, --field-light-b-bg, --field-deep-bg, et un

--trame-plaque re-tokenisé par champ.

• Conséquence mesurée : c'est exactement ce qui produit C9 (focus teal illisible sur fond

sombre) et, dans le projet padel, la dette documentée « un contraste peut passer en desktop

et échouer en mobile ».

• Correction : § 4.4 — quatre champs (light-a, light-b, deep, accent) qui

redéfinissent la couche sémantique. Le contraste devient vérifiable par champ, pas par page.

C23 — Le conteneur du groupe (1 100 px) contredit le conteneur de la référence (1 344 px). [MESURE]

• § 8.2 L405 : conteneur 1 100 px [MESURÉ] · _ref/…/DESIGN.md § 4 : 1 344 px (84 rem).
• Correction : [A VALIDER CLIENT] — le groupe reste-t-il à sa largeur mesurée (1 100 px,

12 colonnes, gouttière 24 px) ou aligne-t-il toutes les marques sur 1 344 px ?

Le token --ui-container est verrouillé (§ 4.2) : la réponse vaut pour tout le groupe.

C24 — design-tokens.json classe muted-on-white à la fois en « aplatOnly » et en « forbidden ».

• L202 (aplatOnly.muted-on-white: 1.96:1) et L209 (forbidden.muted-on-white: 1.96:1).

#B9B9B9 n'est pas un aplat : c'est un gris de texte désactivé. Un même couple dans deux

catégories opposées rend le fichier machine incohérent pour un validateur.

• Correction : supprimer de aplatOnly, garder en forbidden (asTextOnLight) et

ajouter allowed.disabledSurfaceOnLight pour l'usage réel.

C25 — Ni forced-colors, ni prefers-contrast, ni prefers-reduced-motion au niveau des tokens.

• § 9 et § 10 imposent le respect de prefers-reduced-motion et un focus jamais supprimé, mais

aucun token ne les porte : chaque composant devra s'en souvenir.

• Mesure du problème : sur 25 composants prévus (§ 5), 25 devraient répéter la même

@media. Ce qui est répété 25 fois sera oublié 3 fois.

• Correction : § 6.6 — trois blocs globaux qui neutralisent les durées, durcissent les

filets et remplacent l'anneau par Highlight : les composants n'ont rien à faire.

---

2. ARCHITECTURE CIBLE — vue d'ensemble

2.1 Les cinq fichiers et leur ordre

/* Point d'entrée unique — l'ordre de cascade ne dépend PAS de l'ordre des fichiers : */
@layer tero.primitives, tero.compat, tero.semantique, tero.theme, tero.composants, tero.pages;
@import url('tokens/01-primitives.css') layer(tero.primitives);
@import url('tokens/99-compat.css')    layer(tero.compat);
@import url('tokens/02-semantique.css')layer(tero.semantique);
@import url('themes/tero-group.css')   layer(tero.theme);
@import url('tokens/03-composants.css')layer(tero.composants);

Pourquoi @layer est non négociable [REGLE] : sans couches, une sous-marque qui pose

<link> après le socle gagne par ordre d'arrivée, et l'ordre change au gré du bundler.

Avec @layer, la priorité est une décision écrite, pas un effet de bord de build.

Support : Chrome/Edge 99+, Firefox 97+, Safari 15.4+ — les mêmes navigateurs que clamp() et

color-mix(), déjà utilisés par la référence.

2.2 Conventions de nommage [REGLE]

Règles de nommage opposables :

• Un token = une valeur scalaire. Jamais de fourchette (cf. C14), jamais calc() dans un

token de composant (le calcul vit dans la CSS du composant).

• Anglais technique, français documentaire. Les tokens sont en anglais (--ui-border,

--btn-bg) ; la documentation et les commentaires sont en français.

• Pas d'abréviation non documentée. bg, fg, fs, lh, px sont autorisés

(convention Tailwind 4) ; tout le reste s'écrit en entier.

• Le suffixe d'état vient en dernier : --btn-bg-hover, jamais --btn-hover-bg.
• Un token déprécié garde son nom 1 version avec la valeur de repli, jamais un renommage

silencieux.

2.3 Le pont Tailwind 4 @theme [REGLE]

Le socle du groupe doit se consommer comme celui qui existe déjà dans

_ref/teropadelclub/src/styles/global.css (@theme = primitifs, --field-/--rhythm- =

sémantiques, .card-/.title- = composants). Le pont est donc :

@theme {
  /* Couleurs : alias de la couche sémantique, jamais un primitif */
  --color-surface: var(--ui-surface);
  --color-surface-alt: var(--ui-surface-alt);
  --color-fg: var(--ui-fg);
  --color-fg-muted: var(--ui-fg-muted);
  --color-border: var(--ui-border);
  --color-border-strong: var(--ui-border-strong);
  --color-accent: var(--ui-accent);
  --color-accent-on: var(--ui-accent-on);
  --color-deep: var(--ui-deep);
  --color-deep-fg: var(--ui-deep-fg);
  --color-danger: var(--ui-danger);
  /* Tailles : la convention Tailwind 4 --text-*--line-height est adoptée telle quelle */
  --text-body: var(--tero-fs-body);
  --text-body--line-height: 1.65;
  /* … */
}

Cette convention (--text-<palier> + --text-<palier>--line-height) est déjà celle du

modèle de référence (global.css L120-143) : l'adopter évite deux vocabulaires pour la même

chose — cause directe de C14.

---

3. LES TROIS COUCHES DE TOKENS

3.1 Couche 1 — PRIMITIFS (verrouillée), tokens/01-primitives.css

Valeurs mesurées sauf mention [REGLE]. Commentaires = occurrences mesurées.

@layer tero.primitives {
:root {
  /* ─── Neutres — 77 % des 6 291 occurrences de couleur mesurées ───────────── */
  --tero-black:      #000000;  /* 1 269 occ. */
  --tero-white:      #ffffff;  /* 1 443 occ. */
  --tero-surface:    #f6f4f4;  /*   388 occ. */
  --tero-line:       #d9d9d9;  /*   130 occ. — filets DÉCORATIFS uniquement (1,41:1) */
  --tero-line-soft:  #e5e6e5;  /* filets très légers, fonds de champ */
  --tero-line-strong:#767676;  /* [REGLE] 4,54:1 sur blanc — bordure de champ (1.4.11) */
  --tero-ink-soft:   #323232;  /*   243 occ. — 12,82:1 sur blanc */
  --tero-ink-deep:   #212121;  /*   188 occ. — bande profonde alternative */
  --tero-disabled:   #b9b9b9;  /*   142 occ. — 1,96:1 : DÉCORATIF / DÉSACTIVÉ, jamais du texte */

  /* ─── Sept couleurs de marque DÉCLARÉES (2,0 % des occurrences) ──────────── */
  --tero-teal:       #007864;  /*  47 occ. — 5,43:1 sur blanc */
  --tero-petrol:     #004b69;  /*  21 occ. — 9,50:1 sur blanc */
  --tero-terracotta: #b93815;  /*  15 occ. — 5,77:1 sur blanc */
  --tero-sand:       #fad282;  /*  16 occ. — 1,44:1 sur blanc : JAMAIS en texte */
  --tero-rose:       #d7b4b4;  /*  12 occ. — 1,90:1 sur blanc : JAMAIS en texte */
  --tero-cyan:       #00b7ff;  /*  15 occ. — 2,28:1 sur blanc : JAMAIS en texte */
  --tero-pink:       #ff1d58;  /*   1 occ. — 3,77:1 sur blanc : JAMAIS en texte */

  /* ─── Dérives mesurées : VALEURS DE LECTURE SEULE, jamais consommables ───── */
  /* Conservées pour que les scripts puissent les RECONNAÎTRE et les SIGNALER.   */
  --tero-drift-sage:      #97ab83; /* 620 occ. — 3e couleur du site, hors charte */
  --tero-drift-bordeaux:  #b00000;
  --tero-drift-prune:     #680224;
  --tero-drift-prune-deep:#550d24;
  --tero-drift-rust:      #b8451f;
  --tero-drift-olive:     #8bb169;
  --tero-drift-forest:    #183f3c;
  --tero-drift-bluegrey:  #5e93a7;
  --tero-drift-sagelight: #d9ead3;
  --tero-drift-cream:     #fff5e5;
  --tero-drift-sandwarm:  #f0e6d7;
  --tero-drift-taupe:     #dacec7;
  --tero-drift-blueice:   #d5e9f1;
  --tero-drift-creampale:#f9f4ec;
  --tero-drift-red:       #ff4a4a;
  /* + 5 dérives des fichiers LOGO, mesurées dans ce document (cf. § 1.1 C4) : */
  --tero-drift-logo-blue:   #075f83;
  --tero-drift-logo-green:  #068973;
  --tero-drift-logo-gold:   #f4c567;
  --tero-drift-logo-mauve:  #cea4a4;
  --tero-drift-logo-header: #292929;

  /* ─── Typographie ───────────────────────────────────────────────────────── */
  --tero-font-display: 'Almarose', 'Almarose Fallback', ui-sans-serif, system-ui,
                       -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tero-font-script:  'WildYouth', var(--tero-font-display);
  /* Graisses : une graisse n'est autorisée QUE si son .woff2 existe. */
  --tero-weight-regular:  400;
  --tero-weight-medium:   500;
  --tero-weight-semibold: 600;
  --tero-weight-bold:     700;
  --tero-weight-black:    900;  /* [MESURE] almarose-900.woff2 existe — cf. C3 */
  /* 800 : INTERDIT — aucun fichier n'existe. Aucun token ne lui est attribué. */

  /* Rampe : 9 paliers fluidifiés. BORNES = tailles dominantes MESURÉES sur tero.be. */
  --tero-fs-label:   clamp(0.75rem,   0.7292rem + 0.0926vw, 0.8125rem); /* 12 → 13 px / 160+455 occ. */
  --tero-fs-meta:    clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);  /* 13 → 14 px / 455+659 occ. */
  --tero-fs-body-s:  clamp(0.875rem,  0.8542rem + 0.0926vw, 0.9375rem); /* 14 → 15 px / 659 occ. */
  --tero-fs-body:    clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);      /* 15 → 16 px / 1 039 occ. */
  --tero-fs-lead:    clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);  /* 17 → 18 px / 523 occ. */
  --tero-fs-title-s: clamp(1.25rem,   1.1458rem + 0.463vw,  1.5625rem); /* 20 → 25 px / 616+515 occ. */
  --tero-fs-title-m: clamp(1.875rem,  1.8333rem + 0.1852vw, 2rem);      /* 30 → 32 px / 282+170 occ. */
  --tero-fs-title-l: clamp(2.5rem,    2.2917rem + 0.9259vw, 3.125rem);  /* 40 → 50 px / 291+116 occ. */
  --tero-fs-display: clamp(3.75rem,   3.3333rem + 1.8519vw, 5rem);      /* 60 → 80 px / 129+ 75 occ. */

  /* Interlignage et lettrage (règle groupe § 3.3) */
  --tero-lh-display: 1.02;
  --tero-lh-title:   1.08;
  --tero-lh-title-m: 1.15;
  --tero-lh-title-s: 1.25;
  --tero-lh-lead:    1.60;
  --tero-lh-body:    1.65;
  --tero-lh-meta:    1.45;
  --tero-lh-label:   1.20;
  --tero-ls-title:   -0.015em;   /* bornes règle : -0.01 à -0.02em */
  --tero-ls-display: -0.025em;   /* [REGLE] grand affichage : valeur du modèle de référence */
  --tero-ls-label:    0.18em;
  --tero-measure-chapo: 58ch;
  --tero-measure-body:  66ch;    /* [REGLE] repère du modèle ; le groupe ne le fixait pas */
  --tero-measure-faq:   62ch;
  --tero-measure-side:  42ch;

  /* ─── Espacement : échelle 8 pt COMPLÈTE [REGLE] ─────────────────────────── */
  /* Le groupe ne publiait que 12/24/48/72/96/144 : 16, 32 et 64 manquaient. */
  --tero-space-4:   0.25rem;  /*   4 px */
  --tero-space-8:   0.5rem;   /*   8 px */
  --tero-space-12:  0.75rem;  /*  12 px */
  --tero-space-16:  1rem;     /*  16 px */
  --tero-space-24:  1.5rem;   /*  24 px */
  --tero-space-32:  2rem;     /*  32 px */
  --tero-space-48:  3rem;     /*  48 px */
  --tero-space-64:  4rem;     /*  64 px */
  --tero-space-96:  6rem;     /*  96 px */
  --tero-space-128: 8rem;     /* 128 px */
  --tero-space-192: 12rem;    /* 192 px */

  /* Rythme vertical de section : 4 profils FLUIDES (bornes = règle groupe 48/72/96/144) */
  --tero-rhythm-flush:  clamp(2rem,   1.75rem  + 1.1111vw, 2.75rem);  /* 32 → 44 px  */
  --tero-rhythm-tight:  clamp(2.75rem,2.3333rem+ 1.8519vw, 4rem);     /* 44 → 64 px  */
  --tero-rhythm-normal: clamp(3.75rem,3rem     + 3.3333vw, 6rem);     /* 60 → 96 px  */
  --tero-rhythm-loose:  clamp(4.5rem, 3.5rem   + 4.4444vw, 7.5rem);   /* 72 → 120 px */
  --tero-space-entries: 2.5rem;  /* entre deux entrées éditoriales (règle groupe) */

  /* ─── Grille et conteneur ───────────────────────────────────────────────── */
  --tero-container:      68.75rem; /* 1 100 px — MESURÉ (cf. C23 pour l'arbitrage) */
  --tero-container-text: 47.5rem;  /*  760 px [REGLE] colonne de lecture */
  --tero-gutter:         clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem); /* 16 → 24 px */
  --tero-grid-columns:   12;
  /* Points de rupture de CONTRÔLE (règle groupe § 8.2) — déclaratifs, jamais une rampe typo */
  --tero-bp-xs: 22.5rem;  /*  360 px */
  --tero-bp-sm: 24.375rem;/*  390 px */
  --tero-bp-md: 48rem;    /*  768 px */
  --tero-bp-lg: 64rem;    /* 1 024 px */
  --tero-bp-xl: 90rem;    /* 1 440 px */

  /* ─── Rayons : TROIS valeurs [REGLE] ────────────────────────────────────── */
  --tero-radius-media: 0.75rem; /* 12 px — choix (cf. C12 : le mesuré dominant est 20 px) */
  --tero-radius-plate: 1.25rem; /* 20 px — plaque rare (188 occ. mesurées) */
  --tero-radius-pill:  999px;   /* piloté par la règle, la mesure était 38 px (cf. C13) */

  /* ─── Filets, focus, cibles ─────────────────────────────────────────────── */
  --tero-hairline: 1px;
  --tero-focus-width: 3px;
  --tero-focus-offset: 3px;
  --tero-tap-target: 44px;   /* règle maison ; plancher légal WCAG 2.2 : 24 × 24 px */

  /* ─── Mouvement : 3 courbes, 6 durées [REGLE] — reprises de la référence ── */
  --tero-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --tero-ease-in-out-soft: cubic-bezier(0.77, 0, 0.175, 1);
  --tero-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --tero-dur-fast:   140ms; /* feedback : couleur, opacité, soulignement */
  --tero-dur-base:   200ms; /* survol, état de bouton */
  --tero-dur-move:   240ms; /* tiroir, panneau, changement d'onglet */
  --tero-dur-draw:   380ms; /* modale, menu mobile plein écran */
  --tero-dur-slow:   680ms; /* révélation au défilement */
  --tero-dur-marquee: 55s;  /* boucle linéaire, seul usage de linear admis */

  /* ─── Profondeur : une seule ombre autorisée [REGLE] ────────────────────── */
  /* La charte interdit la « carte empilée » (fond + bordure + rayon + ombre) et les
     « ombres lourdes » : il reste donc UNE ombre, réservée aux surfaces flottantes
     (en-tête collant, menu, modale, notification), jamais à une carte de contenu. */
  --tero-shadow-float: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 28px -14px rgb(0 0 0 / 0.14);

  /* ─── Empilement : échelle nommée [REGLE] ───────────────────────────────── */
  --tero-z-base: 0; --tero-z-sticky: 10; --tero-z-header: 20; --tero-z-dropdown: 30;
  --tero-z-overlay: 40; --tero-z-drawer: 50; --tero-z-modal: 60; --tero-z-toast: 70;
}
}

Ce que la couche 1 ne contient pas, et pourquoi : aucun token nommé par un usage

(cf. C17), aucune couleur d'état (danger/success sont sémantiques, § 3.5), aucune

valeur de composant. Une sous-marque qui écrit --tero-* dans son fichier de thème est

rejetée par la porte de qualité § 8.4.

3.2 Les CHAMPS (field) — la brique qui garantit le contraste

Le contraste n'est pas une propriété d'une couleur, c'est une propriété d'un **couple

(texte, fond)**. La couche actuelle n'a qu'un seul jeu de couleurs pour trois fonds différents :

c'est la cause directe de C9 et C22. Le design system introduit donc quatre champs, exactement

comme le modèle de référence (--field-light-a-bg, --field-light-b-bg, --field-deep-bg).

Règle [REGLE] : un composant ne lit jamais un primitif de couleur. Il lit --ui-*.

Comme --ui- est redéfini par chaque champ, *une erreur de contraste devient impossible au

niveau du composant** : elle ne peut venir que d'une erreur de champ, détectable en une passe

(data-field manquant sur un bloc sombre = défaut bloquant, § 8.4).

@layer tero.semantique {
  /* ── champ light-a (défaut) ───────────────────────────────────────────── */
  :root, [data-field='light-a'] {
    --ui-surface:        var(--tero-white);
    --ui-surface-alt:    var(--tero-surface);
    --ui-fg:             var(--tero-black);
    --ui-fg-muted:       var(--tero-ink-soft);   /* 12,82:1 sur blanc — LIBELLÉS, PLACEHOLDERS */
    --ui-fg-subtle:      #6b6b6b;                /* [REGLE] 5,33:1 — légendes, mentions */
    --ui-border:         var(--tero-line);        /* 1,41:1 — filets DÉCORATIFS seulement */
    --ui-border-strong:  var(--tero-line-strong); /* 4,54:1 — bordure de CHAMP (1.4.11) */
    --ui-accent:         var(--tero-teal);
    --ui-accent-text:    var(--tero-teal);        /* 5,43:1 sur blanc */
    --ui-accent-on:      var(--tero-white);       /* blanc sur aplat teal : 5,43:1 */
    --ui-action-bg:      var(--tero-black);       /* CTA mesuré du site groupe : pilule noire */
    --ui-action-bg-hover:var(--tero-ink-deep);
    --ui-action-fg:      var(--tero-white);
    --ui-focus:          var(--tero-teal);        /* 5,43:1 sur blanc */
    --ui-focus-halo:     var(--tero-white);
    --ui-danger:         var(--tero-terracotta);  /* 5,77:1 */
    --ui-danger-bg:      #fdf3ef;                 /* [REGLE] fond d'erreur, à valider en QA */
    --ui-success:        var(--tero-teal);
    --ui-info:           var(--tero-petrol);
    --ui-selection-bg:   var(--tero-sand);
    --ui-selection-fg:   var(--tero-black);
    --ui-image-overlay:  linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.62) 100%);
  }

  /* ── champ light-b : mêmes encres, surface changée ────────────────────── */
  [data-field='light-b'] {
    --ui-surface:     var(--tero-surface);
    --ui-surface-alt: var(--tero-white);
    /* --ui-fg-muted #323232 sur #F6F4F4 = 11,70:1 : rien à changer */
    /* --ui-border #D9D9D9 sur #F6F4F4 = 1,29:1 : filets décoratifs uniquement */
  }

  /* ── champ deep : TOUT est recomposé. C'est ici que le C9 est corrigé. ── */
  [data-field='deep'] {
    --ui-surface:        var(--tero-black);
    --ui-surface-alt:    var(--tero-ink-deep);
    --ui-fg:             var(--tero-white);       /* 21:1 */
    --ui-fg-muted:       #d4d4d4;                 /* [REGLE] 13,7:1 sur #000 — jamais #B9B9B9 */
    --ui-fg-subtle:      #a3a3a3;                 /* [REGLE] 8,6:1 sur #000 */
    --ui-border:         rgb(255 255 255 / 0.18); /* filet translucide, jamais #D9D9D9 */
    --ui-border-strong:  var(--tero-white);
    /* ACCENT INTERACTIF DU FOND PROFOND : le sable. Le teal est illisible (2,97:1). */
    --ui-accent:         var(--tero-sand);
    --ui-accent-text:    var(--tero-sand);        /* 14,61:1 sur #000 / 11,20:1 sur #212121 */
    --ui-accent-on:      var(--tero-black);       /* noir sur sable : 14,61:1 */
    --ui-action-bg:      var(--tero-white);
    --ui-action-bg-hover:var(--tero-sand);
    --ui-action-fg:      var(--tero-black);
    --ui-focus:          var(--tero-sand);        /* 11,20:1 sur #212121 ≥ 3:1 exigé */
    --ui-focus-halo:     var(--tero-black);
    --ui-danger:         var(--tero-pink);        /* 5,57:1 sur #000 (4,27:1 sur #212121 : grand texte) */
    --ui-success:        var(--tero-cyan);        /* 9,22:1 sur #000 */
    --ui-info:           var(--tero-rose);        /* 11,08:1 sur #000 */
  }

  /* ── champ accent : le fond EST l'accent du thème ─────────────────────── */
  [data-field='accent'] {
    --ui-surface:    var(--ui-accent);
    --ui-fg:         var(--ui-accent-on);
    --ui-fg-muted:   var(--ui-accent-on);
    --ui-border:     color-mix(in srgb, var(--ui-accent-on) 25%, transparent);
    --ui-focus:      var(--ui-accent-on);
    --ui-focus-halo: var(--ui-accent);
    --ui-action-bg:  var(--ui-accent-on);
    --ui-action-fg:  var(--ui-accent);
  }
}

3.3 Couleur de texte secondaire : la vraie échelle d'encres [REGLE]

Le site n'a qu'un gris secondaire réel (#323232, 243 occ.). Le design system en publie

trois, tous calculés sur les deux fonds clairs :

C'est la correction de C8 : le placeholder n'est plus gris clair. Un placeholder doit rester

lisible (1.4.3 s'applique au texte, y compris les indices de saisie) ; il se distingue du texte

saisi par le style, pas par l'illisibilité.

3.4 Typographie : déclaration des polices et repli mesuré

@layer tero.primitives {
  @font-face { font-family:'Almarose'; src:url('/fonts/almarose-400.woff2') format('woff2');
               font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:'Almarose'; src:url('/fonts/almarose-500.woff2') format('woff2');
               font-weight:500; font-style:normal; font-display:swap; }
  @font-face { font-family:'Almarose'; src:url('/fonts/almarose-600.woff2') format('woff2');
               font-weight:600; font-style:normal; font-display:swap; }
  @font-face { font-family:'Almarose'; src:url('/fonts/almarose-700.woff2') format('woff2');
               font-weight:700; font-style:normal; font-display:swap; }
  /* 900 : MESURÉ disponible (cf. C3). À charger UNIQUEMENT si le H1 du groupe l'utilise. */
  @font-face { font-family:'Almarose'; src:url('/fonts/almarose-900.woff2') format('woff2');
               font-weight:900; font-style:normal; font-display:swap; }
  /* Repli à métriques ajustées — MESURÉ dans la référence : Almarose = 85,08 % d'Arial.
     Sans lui, le CLS mesuré passe de 0 à 0,0334. */
  @font-face {
    font-family:'Almarose Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('DejaVu Sans');
    size-adjust: 85.08%;
    ascent-override: 90.5%;
    descent-override: 21.2%;
    line-gap-override: 3.3%;
  }
  /* WildYouth : [A VALIDER CLIENT]. Tant que non arbitrée : déclarée, jamais chargée
     (0 occurrence mesurée dans 536 feuilles). Le @font-face ne doit PAS être émis. */
}

Hiérarchie opposable (règle groupe § 3.3, complétée par les graisses réellement disponibles) :

8 niveaux, 4 graisses autorisées (+900 sous condition), aucune autre combinaison. Le

h2 800 du modèle de référence est supprimé (C3).

3.5 Couche 2 — SÉMANTIQUE : le contrat de thème

En plus des tokens de champ (§ 3.2), la couche sémantique expose exactement les variables

qu'une sous-marque peut redéfinir. C'est la liste blanche de § 4.2. Rien d'autre.

@layer tero.semantique {
  :root {
    /* — LES 12 VARIABLES SURCHARGEABLES PAR UNE SOUS-MARQUE (liste blanche) — */
    --ui-accent:            <couleur>;   /* aplat de marque */
    --ui-accent-on:         <white|black>; /* texte posé SUR l'accent — contraste ≥ 4,5:1 exigé */
    --ui-accent-text:       <couleur>;   /* accent utilisé COMME TEXTE sur fond clair — ≥ 4,5:1 */
    --ui-accent-hover:      <couleur>;   /* survol d'un aplat — ≥ 3:1 avec l'accent */
    --ui-accent-soft:       <couleur>;   /* aplat très clair (encart) */
    --ui-deep:              <couleur>;   /* fond de bande profonde de la marque */
    --ui-deep-fg:           <couleur>;   /* texte sur la bande profonde — ≥ 4,5:1 */
    --ui-focus:             <couleur>;   /* anneau — ≥ 3:1 sur tous les champs de la marque */
    --ui-focus-halo:        <couleur>;
    --ui-brand-font:        <famille>;   /* RÉSERVÉ : 'Almarose' uniquement, cf. § 4.2 */
    --ui-image-treatment:   <filter|none>; /* traitement d'image (duotone p.ex.) */
    --ui-decoration:        <image|none>; /* motif de points, trame, filet signature */
    /* — LE CONTRAT OPENDESIGN (compatibilité, jamais surchargé par une marque) — */
    --bg:      var(--ui-surface);
    --surface: var(--ui-surface-alt);
    --fg:      var(--ui-fg);
    --muted:   var(--ui-fg-muted);   /* CORRIGÉ : pointait sur un gris à 1,96:1 */
    --border:  var(--ui-border);
    --accent:  var(--ui-accent);
  }
}

3.6 Couche 3 — COMPOSANTS : ~150 tokens

C'est la couche absente aujourd'hui (C17). Elle est dérivée des champs et des sémantiques,

donc automatiquement juste sur les quatre fonds.

@layer tero.composants {
:root {
  /* ═══ BOUTON — 3 niveaux ═══════════════════════════════════════════════ */
  --btn-min-h:            var(--tero-tap-target);      /* 44 px */
  --btn-pad-block:        var(--tero-space-12);        /* 12 px — mesuré : .75rem */
  --btn-pad-inline:       var(--tero-space-24);        /* 24 px — mesuré : 1.25rem */
  --btn-gap:              var(--tero-space-8);
  --btn-radius:           var(--tero-radius-pill);
  --btn-font-size:        var(--tero-fs-body-s);       /* 14 px — mesuré : 0.875rem */
  --btn-font-weight:      var(--tero-weight-semibold); /* 600 — mesuré */
  --btn-transition:       background-color var(--tero-dur-fast) var(--tero-ease-out-strong),
                          color var(--tero-dur-fast) var(--tero-ease-out-strong),
                          border-color var(--tero-dur-fast) var(--tero-ease-out-strong);
  --btn-1-bg:             var(--ui-action-bg);
  --btn-1-fg:             var(--ui-action-fg);
  --btn-1-bg-hover:       var(--ui-action-bg-hover);
  --btn-1-active-scale:   0.97;
  --btn-2-bg:             transparent;
  --btn-2-border:         1px solid var(--ui-action-bg);
  --btn-2-fg:             var(--ui-action-bg);
  --btn-2-bg-hover:       var(--ui-action-bg);
  --btn-2-fg-hover:       var(--ui-action-fg);
  --btn-3-fg:             var(--ui-accent-text);
  --btn-3-underline-gap:  0.25em;
  --btn-disabled-bg:      var(--ui-surface-alt);
  --btn-disabled-fg:      var(--ui-disabled-fg);
  --btn-icon-size:        1.25em;

  /* ═══ LIEN ═════════════════════════════════════════════════════════════ */
  --link-fg:              var(--ui-accent-text);
  --link-underline:       1px;
  --link-underline-offset:0.2em;
  --link-underline-thickness-hover: 2px;
  --link-inline-pad-block: 0.25rem;    /* agrandit la cible sans pseudo-élément (vérifiable) */

  /* ═══ CARTE D'ENTITÉ ═══════════════════════════════════════════════════ */
  --card-gap:             var(--tero-space-12);
  --card-radius-media:    var(--tero-radius-media);
  --card-title-size:      var(--tero-fs-title-s);
  --card-title-weight:    var(--tero-weight-semibold);
  --card-title-lh:        var(--tero-lh-title-s);
  --card-meta-size:       var(--tero-fs-meta);
  --card-meta-fg:         var(--ui-fg-muted);
  --card-media-ratio:     3 / 2;
  --card-media-ratio-wide:16 / 9;
  --card-media-ratio-portrait: 4 / 5;
  --card-separator:       var(--tero-hairline) solid var(--ui-border);
  --card-bg:              transparent;      /* JAMAIS de fond + bordure + rayon + ombre */
  --card-shadow:          none;             /* la charte l'interdit : on le rend explicite */
  --card-media-zoom:      1.03;
  --card-media-transition:transform var(--tero-dur-slow) var(--tero-ease-out-strong);

  /* ═══ GRILLE DE CARTES ═════════════════════════════════════════════════ */
  --grid-gap:             var(--tero-space-24);
  --grid-min-card:        17.5rem;   /* 280 px : seuil d'auto-fit */
  --grid-columns-sm:      1;
  --grid-columns-md:      2;
  --grid-columns-lg:      3;
  --grid-columns-xl:      4;         /* [REGLE] jamais plus de 4 entités par rangée */

  /* ═══ BANDEAU HERO ═════════════════════════════════════════════════════ */
  --hero-min-h:           34rem;
  --hero-min-h-full:      100svh;    /* jamais 100vh — dette mesurée à 49 pages */
  --hero-overlay:         var(--ui-image-overlay);
  --hero-title-size:      var(--tero-fs-display);
  --hero-content-max:     38rem;
  --hero-pad-block:       var(--tero-rhythm-loose);
  --hero-scrim-min:       0.45;      /* opacité minimale pour tenir 4,5:1 sur photo claire */

  /* ═══ BANDE PROFONDE ═══════════════════════════════════════════════════ */
  --band-pad-block:       var(--tero-rhythm-normal);
  --band-bg:              var(--ui-surface);      /* via data-field="deep" */
  --band-fg:              var(--ui-fg);
  --band-accent:          var(--ui-accent-text);  /* sable par défaut : 11,20:1 sur #212121 */
  --band-rule:            var(--tero-hairline) solid var(--ui-border);

  /* ═══ BANDE DE CHIFFRES ════════════════════════════════════════════════ */
  --stat-size:            var(--tero-fs-title-l);
  --stat-weight:          var(--tero-weight-bold);
  --stat-variant:         tabular-nums;
  --stat-size-mobile:     var(--tero-fs-title-m);
  --stat-label-size:      var(--tero-fs-meta);
  --stat-label-fg:        var(--ui-fg-muted);
  --stat-separator:       var(--tero-hairline) solid var(--ui-border);
  --stat-accent:          var(--tero-terracotta); /* terracotta = chiffres (règle groupe) */

  /* ═══ PASSAGE CITABLE ══════════════════════════════════════════════════ */
  --quote-size:           var(--tero-fs-lead);
  --quote-lh:             1.55;
  --quote-measure:        var(--tero-measure-chapo);
  --quote-mark-size:      3rem;      /* le guillemet est typographique, jamais une image */
  --quote-source-size:    var(--tero-fs-meta);
  --quote-rule:           var(--tero-hairline) solid var(--ui-border-strong);

  /* ═══ FAQ / ACCORDÉON ══════════════════════════════════════════════════ */
  --faq-question-size:    var(--tero-fs-title-s);
  --faq-question-weight:  var(--tero-weight-medium);
  --faq-answer-size:      var(--tero-fs-body);
  --faq-answer-measure:   var(--tero-measure-faq);
  --faq-rule:             var(--tero-hairline) solid var(--ui-border);
  --faq-pad-block:        var(--tero-space-24);
  --faq-marker-size:      1.25rem;
  --faq-transition:       grid-template-rows var(--tero-dur-base) var(--tero-ease-out-strong);

  /* ═══ ONGLETS ══════════════════════════════════════════════════════════ */
  --tabs-gap:             var(--tero-space-4);
  --tabs-pad-block:       var(--tero-space-12);
  --tabs-pad-inline:      var(--tero-space-16);
  --tabs-fg:              var(--ui-fg-muted);
  --tabs-fg-selected:     var(--ui-fg);
  --tabs-indicator:       2px solid var(--ui-accent);
  --tabs-radius:          var(--tero-radius-pill);
  --tabs-transition:      color var(--tero-dur-fast) var(--tero-ease-out-strong);

  /* ═══ FIL D'ARIANE ═════════════════════════════════════════════════════ */
  --crumb-size:           var(--tero-fs-meta);
  --crumb-fg:             var(--ui-fg-muted);
  --crumb-fg-current:     var(--ui-fg);
  --crumb-separator:      '/';
  --crumb-max-lines:      2;         /* jamais tronqué — dette mesurée sur 5 largeurs */

  /* ═══ EN-TÊTE ET NAVIGATION ════════════════════════════════════════════ */
  --header-h:             4.5rem;    /* 72 px — sert à scroll-padding ET scroll-margin */
  --header-h-compact:     3.5rem;
  --header-bg-sticky:     color-mix(in srgb, var(--ui-surface) 88%, transparent);
  --header-fallback-bg:   var(--ui-surface);   /* repli opaque obligatoire (pas de glassmorphism nu) */
  --header-rule:          var(--tero-hairline) solid var(--ui-border);
  --nav-item-size:        var(--tero-fs-body-s);
  --nav-item-weight:      var(--tero-weight-medium);
  --nav-item-gap:         var(--tero-space-24);
  --nav-item-fg-current:  var(--ui-fg);
  --nav-item-indicator:   2px solid var(--ui-accent);
  --mega-pad:             var(--tero-space-32);
  --mega-columns:         3;
  --mega-column-min:      13.75rem;  /* 220 px */
  --mega-shadow:          var(--tero-shadow-float);
  --drawer-width:         22rem;
  --drawer-bg:            var(--ui-surface);
  --drawer-transition:    transform var(--tero-dur-draw) var(--tero-ease-drawer);
  --overlay-bg:           rgb(0 0 0 / 0.45);

  /* ═══ PIED DE PAGE ═════════════════════════════════════════════════════ */
  --footer-pad-block:     var(--tero-rhythm-normal);
  --footer-columns:       4;
  --footer-link-fg:       var(--ui-fg-muted);
  --footer-link-fg-hover: var(--ui-fg);
  --footer-legal-size:    var(--tero-fs-meta);
  --footer-signature-size:var(--tero-fs-body-s);

  /* ═══ BANDEAU DES MARQUES DU GROUPE ════════════════════════════════════ */
  --brandbar-gap:         var(--tero-space-32);
  --brandbar-logo-h:      2rem;      /* hauteur optique unifiée, jamais la hauteur native */
  --brandbar-logo-h-min:  1.75rem;
  --brandbar-fg:          var(--ui-fg-muted);
  --brandbar-mono:        1;         /* [REGLE] logos en monochrome encre ; couleur au survol */

  /* ═══ CARROUSEL ════════════════════════════════════════════════════════ */
  --carousel-gap:         var(--tero-space-24);
  --carousel-peek:        1.5rem;    /* aperçu de la carte suivante : affordance de défilement */
  --carousel-btn-size:    2.75rem;
  --carousel-btn-bg:      var(--ui-surface);
  --carousel-btn-fg:      var(--ui-fg);
  --carousel-btn-shadow:  var(--tero-shadow-float);
  --carousel-dot-size:    0.5rem;
  --carousel-dot-active:  var(--ui-accent);
  --carousel-snap:        x mandatory;
  --carousel-autoplay:    0;         /* [REGLE] jamais d'autoplay : 2.2.2 (pause) + INP */

  /* ═══ FORMULAIRE ═══════════════════════════════════════════════════════ */
  --field-pad-block:      var(--tero-space-12);
  --field-pad-inline:     var(--tero-space-16);
  --field-radius:         0.5rem;    /* [REGLE] 4e rayon : autorisé uniquement pour les champs */
  --field-bg:             var(--ui-surface);
  --field-border:         1px solid var(--ui-border-strong);  /* 4,54:1 — jamais #D9D9D9 */
  --field-fg:             var(--ui-fg);
  --field-placeholder:    var(--ui-fg-muted);                 /* CORRIGÉ (C8) */
  --field-label-size:     var(--tero-fs-body-s);
  --field-label-weight:   var(--tero-weight-medium);
  --field-font-size-max:  1rem;      /* 16 px min : anti-zoom iOS */
  --field-hint-size:      var(--tero-fs-meta);
  --field-hint-fg:        var(--ui-fg-muted);
  --field-border-invalid: 2px solid var(--ui-danger);
  --field-bg-invalid:     var(--ui-danger-bg);
  --field-checkbox-size:  1.25rem;   /* + zone cliquable 44 px autour */
  --field-consent-gap:    var(--tero-space-12);
  --field-error-gap:      var(--tero-space-4);

  /* ═══ NOTIFICATIONS ════════════════════════════════════════════════════ */
  --toast-width:          22rem;
  --toast-pad:            var(--tero-space-16);
  --toast-radius:         0.5rem;
  --toast-bg:             var(--ui-fg);
  --toast-fg:             var(--ui-surface);
  --toast-shadow:         var(--tero-shadow-float);
  --toast-duration:       6000ms;
  --toast-z:              var(--tero-z-toast);

  /* ═══ TABLEAUX ═════════════════════════════════════════════════════════ */
  --table-cell-pad-block: var(--tero-space-12);
  --table-cell-pad-inline:var(--tero-space-16);
  --table-head-fg:        var(--ui-fg-muted);
  --table-head-size:      var(--tero-fs-meta);
  --table-rule:           var(--tero-hairline) solid var(--ui-border);
  --table-stripe-bg:      var(--ui-surface-alt);
  --table-caption-size:   var(--tero-fs-meta);

  /* ═══ GALERIE, FILTRES, PAGINATION ═════════════════════════════════════ */
  --gallery-gap:          var(--tero-space-8);
  --gallery-radius:       var(--tero-radius-media);
  --gallery-caption-bg:   var(--ui-image-overlay);
  --filter-chip-h:        2.25rem;
  --filter-chip-radius:   var(--tero-radius-pill);
  --filter-chip-border:   1px solid var(--ui-border-strong);
  --filter-chip-bg-active:var(--ui-action-bg);
  --filter-chip-fg-active:var(--ui-action-fg);
  --pagination-gap:       var(--tero-space-8);
  --pagination-size:      2.75rem;
  --pagination-fg:        var(--ui-fg-muted);
  --pagination-fg-current:var(--ui-fg);
  --pagination-border-current: 2px solid var(--ui-accent);
}
}

Écart assumé au « trois rayons » [REGLE] : la charte autorise trois rayons d'angle

(bouton, plaque, média). Un quatrième est ajouté — 0.5rem **réservé aux champs de

saisie et aux notifications flottantes** (jamais un conteneur de contenu). Justification : un

champ en pilule (999 px) est inhabituel et, surtout, un champ à rayon 0 au milieu d'un

système arrondi signale une négligence. Si le client refuse le 4ᵉ rayon, la règle devient

« les champs prennent --radius-media (12 px) » — à trancher, mais **la décision doit être

écrite**, pas laissée au composant.

3.7 Matrice de contrastes RECALCULÉE (WCAG 2.1, méthode de luminance relative)

Tous les couples nouveaux ou corrigés, calculés le 15/10/2026 dans ce document :

21 valeurs neuves que les fichiers du lead ne contenaient pas.

Textes sur fonds clairs

Aplats : texte à poser dessus

Fond profond : ce qui survit

Verdict opérationnel : sur bande profonde, le seul accent sûr est le sable

(11,20:1 sur #212121, 14,61:1 sur #000000, texte noir dessus à 14,61:1).

C'est la correction de C16, chiffrée.

3.8 Le JSON machine — design-tokens.json v2

{
  "$schema": "https://open-design.ai/schemas/design-tokens.v2.json",
  "name": "TERO GROUP",
  "version": "2.0.0",
  "source": "audit mesuré de www.tero.be, 15/10/2026 (docs/AUDIT-TERO-BE-2026.md) + relevé lead du 15/10/2026 pour les accents de sous-marque",
  "doctrine": {
    "regle0": "La marque existe déjà : on ne l'invente pas, on ne l'interprète pas.",
    "regle1": "On mesure, on ne suppose pas.",
    "regle2": "Le groupe ne se dissout pas dans ses sous-marques.",
    "regle3": "Une sous-marque surcharge un accent et une imagerie — jamais la typographie, la grille ni les composants."
  },
  "layers": ["primitive", "semantic", "theme", "component"],
  "cascade": {
    "mechanism": "@layer",
    "order": ["tero.primitives", "tero.compat", "tero.semantique", "tero.theme", "tero.composants", "tero.pages"]
  },
  "primitive": {
    "color": {
      "neutral": { "black": "#000000", "white": "#FFFFFF", "surface": "#F6F4F4",
                   "line": "#D9D9D9", "lineSoft": "#E5E6E5", "lineStrong": "#767676",
                   "inkSoft": "#323232", "inkDeep": "#212121", "disabled": "#B9B9B9" },
      "brand": { "teal": "#007864", "petrol": "#004B69", "terracotta": "#B93815",
                 "sand": "#FAD282", "rose": "#D7B4B4", "cyan": "#00B7FF", "pink": "#FF1D58" },
      "drift": { "forbidden": true,
                 "values": ["#97AB83", "#B00000", "#680224", "#550D24", "#B8451F", "#8BB169",
                            "#183F3C", "#5E93A7", "#D9EAD3", "#FFF5E5", "#F0E6D7", "#DACEC7",
                            "#D5E9F1", "#F9F4EC", "#FF4A4A",
                            "#075F83", "#068973", "#F4C567", "#CEA4A4", "#292929"] },
      "occurrences": { "white": 1443, "black": 1269, "sage": 620, "surface": 388, "inkSoft": 243,
                       "inkDeep": 188, "disabled": 142, "line": 130, "teal": 47, "petrol": 21,
                       "sand": 16, "cyan": 15, "terracotta": 15, "rose": 12, "pink": 1 }
    },
    "typography": {
      "families": { "display": "Almarose", "fallback": "Almarose Fallback", "script": "WildYouth" },
      "weightsAvailable": [400, 500, 600, 700, 900],
      "weightsForbidden": [100, 200, 300, 800],
      "fallbackMetrics": { "sizeAdjust": "85.08%", "ascentOverride": "90.5%",
                           "descentOverride": "21.2%", "lineGapOverride": "3.3%" },
      "ramp": {
        "label":   { "value": "clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem)",   "bounds": "12-13px", "lh": 1.20 },
        "meta":    { "value": "clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem)",  "bounds": "13-14px", "lh": 1.45 },
        "bodyS":   { "value": "clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem)",  "bounds": "14-15px", "lh": 1.65 },
        "body":    { "value": "clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem)",      "bounds": "15-16px", "lh": 1.65 },
        "lead":    { "value": "clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem)",  "bounds": "17-18px", "lh": 1.60 },
        "titleS":  { "value": "clamp(1.25rem, 1.1458rem + 0.463vw, 1.5625rem)",    "bounds": "20-25px", "lh": 1.25 },
        "titleM":  { "value": "clamp(1.875rem, 1.8333rem + 0.1852vw, 2rem)",       "bounds": "30-32px", "lh": 1.15 },
        "titleL":  { "value": "clamp(2.5rem, 2.2917rem + 0.9259vw, 3.125rem)",     "bounds": "40-50px", "lh": 1.08 },
        "display": { "value": "clamp(3.75rem, 3.3333rem + 1.8519vw, 5rem)",        "bounds": "60-80px", "lh": 1.02 }
      },
      "measure": { "chapo": "58ch", "body": "66ch", "faq": "62ch", "side": "42ch" }
    },
    "space": { "scale": "8pt", "steps": [4,8,12,16,24,32,48,64,96,128,192],
               "rhythm": { "flush": "clamp(2rem, 1.75rem + 1.1111vw, 2.75rem)",
                           "tight": "clamp(2.75rem, 2.3333rem + 1.8519vw, 4rem)",
                           "normal": "clamp(3.75rem, 3rem + 3.3333vw, 6rem)",
                           "loose": "clamp(4.5rem, 3.5rem + 4.4444vw, 7.5rem)" },
               "betweenEntries": "2.5rem" },
    "layout": { "container": "1100px", "containerText": "760px",
                "gutter": "clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem)", "columns": 12,
                "breakpoints": { "xs": "360px", "sm": "390px", "md": "768px", "lg": "1024px", "xl": "1440px" } },
    "radius": { "media": "12px", "plate": "20px", "pill": "999px", "field": "8px",
                "measuredDistinct": 15,
                "note": "12px est un choix, pas la valeur mesurée dominante (20px, 188 occurrences)." },
    "motion": {
      "easing": { "outStrong": "cubic-bezier(0.23, 1, 0.32, 1)",
                  "inOutSoft": "cubic-bezier(0.77, 0, 0.175, 1)",
                  "drawer": "cubic-bezier(0.32, 0.72, 0, 1)" },
      "duration": { "fast": "140ms", "base": "200ms", "move": "240ms",
                    "draw": "380ms", "slow": "680ms", "marquee": "55s" }
    },
    "elevation": { "float": "0 1px 2px rgb(0 0 0 / .04), 0 12px 28px -14px rgb(0 0 0 / .14)",
                   "cards": "none", "reason": "la charte interdit la carte empilée et les ombres lourdes" },
    "zIndex": { "base": 0, "sticky": 10, "header": 20, "dropdown": 30,
                "overlay": 40, "drawer": 50, "modal": 60, "toast": 70 }
  },
  "semantic": {
    "fields": ["light-a", "light-b", "deep", "accent"],
    "tokens": {
      "surface": "var(--tero-white)", "surfaceAlt": "var(--tero-surface)",
      "fg": "var(--tero-black)", "fgMuted": "var(--tero-ink-soft)", "fgSubtle": "#6B6B6B",
      "disabledFg": "#767676", "border": "var(--tero-line)", "borderStrong": "var(--tero-line-strong)",
      "accent": "var(--tero-teal)", "accentText": "var(--tero-teal)", "accentOn": "var(--tero-white)",
      "actionBg": "var(--tero-black)", "actionFg": "var(--tero-white)",
      "focus": "var(--tero-teal)", "focusHalo": "var(--tero-white)",
      "danger": "var(--tero-terracotta)", "success": "var(--tero-teal)", "info": "var(--tero-petrol)"
    },
    "themeOverridable": ["ui-accent", "ui-accent-on", "ui-accent-text", "ui-accent-hover",
                         "ui-accent-soft", "ui-deep", "ui-deep-fg", "ui-focus", "ui-focus-halo",
                         "ui-image-treatment", "ui-decoration"],
    "themeLocked": ["toute la couche primitive", "typographie", "espacements", "grille",
                    "conteneur", "rayons", "durées et courbes", "cibles tactiles",
                    "focus (géométrie)", "empilement", "ombres", "tous les tokens de composant"]
  },
  "contract": {
    "bg": "var(--ui-surface)", "surface": "var(--ui-surface-alt)", "fg": "var(--ui-fg)",
    "muted": "var(--ui-fg-muted)", "border": "var(--ui-border)", "accent": "var(--ui-accent)"
  },
  "contrast": {
    "method": "WCAG 2.1, luminance relative — recalculé le 15/10/2026 dans docs/design/EXPERT-02",
    "textOnLight": { "black": "21.00:1", "inkDeep": "16.10:1", "petrol": "9.50:1",
                     "terracotta": "5.77:1", "teal": "5.43:1", "grey6B": "5.33:1",
                     "grey76": "4.54:1", "inkSoft": "12.82:1" },
    "onSurface": { "inkSoft-on-surface": "11.70:1", "terracotta-on-surface": "5.27:1",
                   "teal-on-surface": "4.95:1", "line-on-surface": "1.29:1" },
    "onAccent": { "white-on-teal": "5.43:1", "white-on-petrol": "9.50:1",
                  "white-on-terracotta": "5.77:1", "black-on-sand": "14.61:1",
                  "black-on-rose": "11.08:1", "black-on-cyan": "9.22:1",
                  "black-on-pink": "5.57:1", "white-on-pink": "3.77:1" },
    "onDeep": { "sand-on-black": "14.61:1", "sand-on-inkDeep": "11.20:1",
                "rose-on-inkDeep": "8.49:1", "cyan-on-inkDeep": "7.07:1",
                "pink-on-black": "5.57:1", "pink-on-inkDeep": "4.27:1",
                "teal-on-inkDeep": "2.97:1", "teal-on-black": "3.87:1",
                "terracotta-on-inkDeep": "2.79:1" },
    "forbidden": ["teal-on-black-as-text", "teal-as-focus-on-deep", "muted-B9B9B9-as-text",
                  "line-D9D9D9-as-field-border", "white-on-pink", "sage-on-white"],
    "exempt": ["contrôles désactivés (WCAG 1.4.3/1.4.11)", "filets purement décoratifs"]
  },
  "themeRegistry": {
    "tero-group": { "accent": "#007864", "accentOn": "#FFFFFF", "accentText": "#007864",
                    "deep": "#000000", "deepFg": "#FFFFFF", "status": "mesuré, conforme" },
    "teropadelclub": { "accent": "#FF2E82", "accentOn": "#000000", "accentText": "#D9216B",
                       "deep": "#0D1F30", "deepFg": "#FFFFFF",
                       "status": "text-safe fourni par la charte padel (#D9216B 4,79:1) ; magenta interdit en texte (3,52:1)" },
    "terostudio": { "accent": "#7C8F7A", "accentOn": "#000000",
                    "accentText": null, "status": "accentText MANQUANT : 3,46:1 sur blanc — à fournir par le studio" },
    "terotrail": { "accent": "#2B4336", "accentOn": "#FFFFFF", "accentText": "#2B4336",
                   "accentSoft": "#8FB8A5", "status": "conforme (10,72:1)" },
    "immorun": { "accent": "#263062", "accentOn": "#FFFFFF", "accentText": "#263062",
                 "accentSoft": "#E0BB8E", "status": "conforme (12,49:1)" },
    "batirun": { "accent": "#C0001E", "accentOn": "#FFFFFF", "accentText": "#C0001E",
                 "status": "conforme (6,44:1)" },
    "brusselspremierpadel": { "accent": "#A56933", "accentOn": "#000000",
                              "accentText": "#A56933",
                              "status": "LIMITE : 4,50:1 exactement — aucune marge, à durcir de 5 %" },
    "garisartsportsclub": { "accent": "#AAC440", "accentOn": "#000000",
                            "accentText": null, "status": "accentText MANQUANT : 1,97:1 sur blanc" }
  },
  "brand": {
    "wordmark": "tero",
    "wordmarkCase": "minuscules",
    "proseCase": "Tero",
    "entityCase": "Tero Group",
    "signature": "live. share. reconnect.",
    "monogram": { "file": "_audit/monogram-tero-2026.png", "nature": "glyphe o (anneau + barre) du mot-symbole",
                  "aspectRatio": 0.6835, "square": false, "usage": "jamais Organization.logo ; favicon à arbitrer" }
  },
  "files": { "primitives": "tokens/01-primitives.css", "semantic": "tokens/02-semantique.css",
             "components": "tokens/03-composants.css", "themes": "themes/", "compat": "tokens/99-compat.css" }
}

---

4. DÉCLINAISON PAR SOUS-MARQUE — le mécanisme

4.1 Le principe en une phrase

**Une sous-marque surcharge un accent et une imagerie. Elle ne surcharge ni la typographie,

ni la grille, ni les composants, ni les états.** [REGLE]

C'est la seule façon de tenir les deux promesses contradictoires du projet : des marques

reconnaissables (magenta padel, sauge studio, navy immorun) et une expérience unique

(une rampe, une grille, des composants, une accessibilité, un budget). Le modèle de référence

a résolu le problème par accident (il est mono-marque) ; le groupe doit le résoudre **par

construction**.

4.2 VERROUILLÉ ou SURCHARGEABLE — le tableau sans ambiguïté

Formulation opposable, à recopier dans tero-group-rules.md :

Une sous-marque peut changer ce qui est coloré, jamais ce qui est mesuré ou structurant.

Toute variable absente du tableau ci-dessus est verrouillée par défaut.

4.3 Le fichier de thème — modèle et exemples réels

Un thème = un fichier, une quinzaine de lignes, zéro sélecteur de composant.

/* themes/teropadelclub.css — accents MESURÉS (relevé lead 15/10/2026) + charte padel */
@layer tero.theme {
  [data-theme='teropadelclub'] {
    --ui-accent:        #ff2e82;   /* magenta signature — 3,52:1 sur blanc : DÉCORATIF */
    --ui-accent-on:     #000000;   /* noir sur magenta = 5,97:1 (le blanc échoue à 3,52:1) */
    --ui-accent-text:   #d9216b;   /* variante texte fournie par la charte padel — 4,79:1 */
    --ui-accent-hover:  #e6296f;   /* [fourni charte padel] */
    --ui-accent-soft:   #fff0f6;   /* [REGLE] encart clair, à valider en QA */
    --ui-deep:          #0d1f30;   /* navy du logo padel */
    --ui-deep-fg:       #ffffff;   /* 16,5:1 environ */
    --ui-focus:         #ff2e82;   /* ≥ 3:1 sur les champs padel (blanc, crème, navy) */
    --ui-decoration:    radial-gradient(circle, currentColor 4.5px, transparent 4.6px) 0 0 / 18px 18px;
    /* RIEN D'AUTRE. Aucune taille, aucun rayon, aucune durée, aucun token de composant. */
  }
}

/* themes/terotrail.css — forêt : l'accent TIENT le texte (10,72:1) */
@layer tero.theme {
  [data-theme='terotrail'] {
    --ui-accent:      #2b4336;
    --ui-accent-on:   #ffffff;   /* blanc sur forêt : 10,72:1 */
    --ui-accent-text: #2b4336;   /* texte sur blanc : 10,72:1 — conforme, rien à dériver */
    --ui-deep:        #1c2c23;   /* [A VALIDER CLIENT] : un fond profond propre à Tero Trail */
    --ui-deep-fg:     #ffffff;
    --ui-focus:       #2b4336;
  }
}

/* themes/terostudio.css — sauge : l'accent NE TIENT PAS le texte (3,46:1) */
@layer tero.theme {
  [data-theme='terostudio'] {
    --ui-accent:      #7c8f7a;   /* relevé lead */
    --ui-accent-on:   #000000;   /* noir sur sauge : 6,07:1 — conforme */
    --ui-accent-text: null;      /* 3,46:1 sur blanc : ÉCHEC → aucun texte accentué */
    --ui-deep:        #22271f;   /* [A VALIDER CLIENT] */
    --ui-deep-fg:     #ffffff;
    --ui-focus:       #7c8f7a;   /* 3,46:1 : au-dessus de 3:1, mais sans marge */
  }
}

Le cas --ui-accent-text: null est la partie importante du mécanisme. Sur les huit marques

enregistrées, deux n'ont aucun accent lisible en texte sur blanc — Tero Studio (3,46:1) et

Garisart (1,97:1) — et une troisième, Bruxelles Premier Padel, est à la limite exacte (4,50:1) (§ 4.5). Plutôt que d'inventer une teinte

dérivée — ce qui est exactement la dérive à 164 valeurs — le design system prend une décision

de repli unique et vérifiable :

**[REGLE] Quand --ui-accent-text n'est pas fourni et mesuré ≥ 4,5:1, l'accent n'est

jamais du texte.** Les liens du corps de texte passent en --ui-fg (noir) et restent

soulignés (WCAG 1.4.1 les y oblige de toute façon) ; l'accent ne vit que dans les aplats,

filets, pastilles et pictogrammes, sur un fond dont le contraste est vérifié.

Conséquence : la marque reste identifiable (aplats, encarts, bandes, survols, images) sans

qu'aucun texte ne tombe sous AA. C'est la seule issue qui respecte à la fois la charte

« on n'invente rien » et la charte « AA partout ».

4.4 Attacher un thème : un attribut, un seul

<html lang="fr-BE" data-theme="teropadelclub">   <!-- thème de marque -->
  <body>
    <section data-field="light-a">  …              <!-- fond blanc -->
    <section data-field="light-b">  …              <!-- fond #F6F4F4 -->
    <section data-field="deep">     …              <!-- fond de la marque, encre adaptée -->
    <section data-field="accent">   …              <!-- aplat de marque, encre adaptée -->
  </body>
</html>

Pourquoi un attribut et non une classe : le thème doit pouvoir être changé par le CMS, par un

aperçu d'admin ou par un test, sans toucher au CSS ni au composant. C'est aussi ce qui rend

la déclinaison testable : ?theme=terotrail suffit à passer toute la suite de tests.

4.5 La table des accents de sous-marque — mesurés et jugés

Relevé lead du 15/10/2026. Les ratios sont recalculés dans ce document (WCAG 2.1).

Quatre enseignements mesurés :

• Aucun accent ne fonctionne à la fois comme texte sur blanc et comme aplat à texte blanc.

C'est la preuve chiffrée qu'un thème à une variable est intenable : il en faut trois

(--ui-accent, --ui-accent-on, --ui-accent-text). C'est exactement ce que la charte

padel a fini par faire à la main (clay / clay-ink / clay-text) — on le généralise.

• Six des douze accents relevés échouent nettement en texte sur blanc : magenta padel (3,52),

sauge studio (3,46), sauge dérive tero.be (2,48), forêt clair trail (2,19), sable immorun (1,80),

lime garisart (1,97) ; un septième, l'orange BPP (4,50), est à la limite exacte. Sans le repli

§ 4.3, Tero Studio et Garisart livreraient des liens sous AA, et BPP n'aurait aucune marge.

• **Le « vert sauge » de tero.be (#97AB83, 620 occurrences) n'est pas la sauge de Tero Studio

(#7C8F7A).** Écart entre les deux : ce ne sont pas la même couleur. La question ouverte n° 1

du client (« la sauge est-elle une couleur de marque ou une dérive ? ») a donc une réponse

documentable : **la sauge est bien une couleur de marque du groupe — celle de Tero Studio —

mais la valeur qui court sur tero.be n'est pas la bonne.** [MESURE] + [A VALIDER CLIENT].

• BPP #A56933 = 4,50:1 exactement. Une seule unité de teinte en dessous fait échouer.

Aucun système ne doit reposer sur une marge nulle : à durcir d'au moins 5 % de luminance

relative, ou à traiter comme les six autres (§ 4.3).

4.6 Les marques événementielles autonomes — Immorun, Batirun, BPP26

Ces marques ont une identité propre, un logo dédié et un cycle de vie court (une édition).

Le mécanisme les traite sans créer un 4ᵉ type de thème :

/* Une marque événementielle ajoute DEUX règles, pas un système : */
[data-theme-scope='event'] {
  --hero-min-h: 38rem;        /* un événement a le droit à un hero plus haut */
  --brandbar-mono: 0;         /* les logos partenaires peuvent garder leur couleur */
}

Règles opposables pour les événements [REGLE] :

• Endossement Tero obligatoire : nom de l'événement + mention « un événement du groupe

Tero » + lien vers tero.be, dans l'en-tête ou le pied de page — jamais les deux à la fois.

Le logo de l'événement (IMMORUN, BATIRUN, BPP26) est utilisé tel quel, à côté — jamais

dans — le mot-symbole Tero.

• Aucun lockup inventé. « tero immorun », « IMMORUN by Tero », une fusion de tracés :

interdits. Si le client veut un endossement graphique, il est dessiné par le studio.

• Co-marque : emplacement séparé, hauteur optique unifiée (--brandbar-logo-h), jamais

dans le même bloc que le logo Tero, et le sponsor n'apparaît jamais comme éditeur du site.

• Fin d'édition : le thème événementiel est retiré, pas archivé dans la CSS. Un thème

qui survit à son événement est de la dette (c'est le mécanisme qui a produit les 536 feuilles).

• Une marque événementielle ne touche pas aux documents structurés de l'entité Tero :

Organization reste Tero Group ; l'événement est un Event avec organizer = Tero.

4.7 Porte de validation d'un thème (bloquante)

Un thème n'est fusionnable que si les 9 contrôles passent, exécutés par le script de

vérification (§ 8) :

T8 mérite une justification : les 15+ valeurs de dérive mesurées sur tero.be viennent

d'ajouts successifs jamais comptés. Plafonner à 5 valeurs par thème (accent, accent-on,

accent-text, deep, deep-fg) rend l'inflation structurellement impossible : au 6ᵉ token,

on doit supprimer, pas ajouter.

---

5. INVENTAIRE DES COMPOSANTS

5.0 Les règles communes — à lire avant tout composant

Les 7 états sont obligatoires pour tout composant interactif (règle groupe § 7.4). Un état

non déclaré est un défaut bloquant.

Six règles transverses à tous les composants :

• Aucun composant n'écrit une couleur en dur. Il lit --ui- (champ) ou --<composant>-.

Un #hex dans un fichier de composant = échec du contrôle § 8.2.

• Aucune boîte empilée : pas de background + border + radius + box-shadow

simultanés sur une carte de contenu. La séparation vient du filet ou de l'espace.

• Le titre porte la carte, pas la boîte : hiérarchie --card-title-*, pas de fond.
• Un seul arrêt de tabulation par carte : le motif est <article><a class="card-link" href>

couvrant la carte par un ::after positionné, jamais de liens imbriqués. Le libellé

accessible du lien contient le titre de la carte (aria-label ou contenu masqué).

• Toute image a width/height (ou aspect-ratio) : --card-media-ratio etc.

Un alt vide uniquement pour une image décorative ; un visuel porteur de sens a un alt réel.

• Aucun emoji comme icône : SVG inline, currentColor, trait 1,5-2 px, aria-hidden sauf

s'il est le seul contenu du contrôle (alors aria-label sur le contrôle).

---

C-01 · Bouton — 3 niveaux · btn

C-02 · Lien · link

C-03 · Carte d'entité — lieu / restaurant / activité / événement / article · card

C-04 · Grille de cartes · grid

C-05 · Bandeau hero · hero

C-06 · Bande profonde · band

C-07 · Bande de chiffres · stats

C-08 · Passage citable · quote

C-09 · FAQ / Accordéon · faq

C-10 · Onglets · tabs

C-11 · Fil d'Ariane · breadcrumb

C-12 · En-tête collant et navigation principale (avec méga-menu) · header / nav / mega

C-13 · Menu mobile · drawer

C-14 · Pied de page · footer

C-15 · Bandeau des marques du groupe · brandbar

C-16 · Carrousel · carousel

C-17 · Champs de formulaire · field

C-18 · Sélecteur de pays · country-select

C-19 · Case de consentement · consent-checkbox

C-20 · Messages d'erreur et notifications · error / toast

C-21 · Tableaux · table

C-22 · Galerie photo · gallery

C-23 · Filtres · filters

C-24 · Pagination · pagination

C-25 · Bloc de réservation / barre d'action · booking

C-26 · Composants de second niveau (spécification allégée)

---

6. GABARITS DE PAGES — wireframes textuels et spécifications

Conventions de lecture : [H1] titre ; (→) filet de 1 px ; [===] data-field="deep" ;

[~~~] data-field="light-b" ; [CTA] action ; [SRC] donnée qui exige une source.

Règles communes : un seul H1 · skip-link en premier arrêt · 8 à 11 sections maximum sur

un gabarit riche · jamais deux fonds identiques adjacents · `scroll-padding-block-start:

--header-h` · le contenu est visible sans JavaScript.

G-01 · Accueil groupe (tero.be)

[en-tête : tero | 3 piliers | Contact | [CTA] Nous contacter]
[HERO pleine largeur — photo de lieu réel + voile]
   sur-titre « GROUPE TERO »
   [H1] « Arrêter le temps, pour se reconnecter aux autres, à la nature, à soi. »  [SRC]
   chapô (≤ 58 ch) · [CTA principal] · [CTA secondaire]
[~~~ BANDE DE CHIFFRES : ~125 personnes · 17 lieux · 25 ans · 2020 / 2022 [SRC]]
[LES TROIS PILIERS — 3 cartes, une par pilier, ordre figé]
   Hospitality · Leisure · Sport Events   (les trois, ou aucun)
(→)
[PASSAGE CITABLE — 2-3 phrases + 1 chiffre, un seul par section]
[GRILLE DE LIEUX — 6 entités max, ratio 7/5 puis 8/4]
[=== BANDE PROFONDE — le groupe : valeurs (passion · engagement · respect · authenticité)]
[FAQ — 3 à 5 questions « qui est Tero ? »]
[BANDEAU DES MARQUES DU GROUPE — par pilier, liens sortants]
[pied : 2 adresses [SRC] · signature live. share. reconnect. · langue]

G-02 · Page pilier (Hospitality · Leisure · Sport Events)

[en-tête avec rattachement : Tero > pilier]
[HERO — titre du pilier + chapô + une photo qui dit le pilier]
[~~~ DÉFINITION DU PILIER — 2 paragraphes, chiffres sourcés [SRC]]
[LES MARQUES DU PILIER — carte par marque, lien vers sa page]
(→)
[=== BANDE PROFONDE — ce que le pilier apporte, une citation de dirigeant]
[ACTUALITÉS / ÉVÉNEMENTS du pilier]
[CTA — rejoindre, réserver, candidater]
[pied]

G-03 · Page marque (teropadelclub.be, terostudio.be, garisart.be…)

[en-tête : logo de la marque + « une marque du groupe Tero » + lien tero.be]
[HERO — identité de la marque, accent = --ui-accent du thème]
[preuve : chiffres de la marque [SRC]]
[~~~ OFFRES / SERVICES — cartes, ratio alterné]
(→)
[LIEUX OU CLUBS de la marque — grille]
[=== BANDE PROFONDE — rattachement au groupe + les autres marques]
[FAQ marque]
[CTA principal — réservation ou contact]
[pied : adresse de la marque + adresses du groupe]

G-04 · Fiche lieu

[fil d'Ariane : Tero > pilier > marque > lieu]
[H1] nom du lieu + ville + pays
[GALERIE — 3 à 6 photos réelles, enseignes vérifiées]
[~~~ INFORMATIONS FACTUELLES [SRC] : adresse · horaires · capacité · accès · téléphone]
[CTA] Itinéraire · Réserver · Appeler
(→)
[CE QU'ON Y FAIT — activités liées (cartes)]
[=== BANDE PROFONDE — citation ou chiffre du lieu]
[LIEUX À PROXIMITÉ — 3 cartes]
[pied]

G-05 · Fiche activité

[H1] nom de l'activité
[chapô — ce que c'est, en 2 phrases]
[=== BANDE DE CHIFFRES : durée · niveau · âge minimum · nombre de participants [SRC]]
[FORMULES ET TARIFS — table simple, unité affichée, 3 offres max]
[GALERIE — photos d'activité réelle]
[LIEUX OÙ PRATIQUER — cartes de lieux]
[FAQ — 4 à 6 questions pratiques]
[CTA] Réserver · Nous écrire

G-06 · Fiche restaurant (Bistro 17, Bistro Pilko, Knokke Out Zoute, Teroir)

[H1] nom + type de cuisine
[galerie plats / salle — photos réelles]
[INFORMATIONS [SRC] : adresse · service · réservation · capacité de groupe]
[CTA] Réserver une table
[CARTE / MENU — extraits, prix sourcés]
[=== BANDE PROFONDE — la table partagée, la signature du groupe]
[ÉVÉNEMENTS PRIVÉS — lien team building]
[pied]

G-07 · Événement (Immorun, Batirun, BPP26, Tero Trail…)

[en-tête événementiel : logo IMMORUN + « un événement du groupe Tero » + lien tero.be]
[HERO — date, lieu, distance/discipline, [CTA] S'inscrire, compte à rebours]
[=== BANDE DE CHIFFRES : édition · participants · distance · dénivelé [SRC]]
[PARCOURS / PROGRAMME — onglets ou tableaux]
[INSCRIPTION ET TARIFS — table, unité, échéances]
[PARTENAIRES — mur de logos (composant partenaire, C-26)]
[CO-MARQUE — emplacement séparé, hauteur optique unifiée (co-marque IMMOBEL : jamais dans le bloc Tero)]
[FAQ — dossard, retrait, stationnement, météo]
[pied : contact organisateur + mentions]

G-08 · Article (éditorial, actualité)

[fil d'Ariane]
[H1] titre · [date + auteur réel + temps de lecture]
[CHAPÔ — 2 phrases autonomes]
[image de tête — ratio 16/9, légende]
[corps — H2/H3, listes, citations, mesure de lecture 66 ch]
[ENCADRÉ — passage citable, un chiffre]
[=== BANDE PROFONDE — CTA de fin d'article]
[ARTICLES LIÉS — 3 cartes]

G-09 · FAQ

[H1] Questions fréquentes + intro 2 phrases
[SOMMAIRE — ancres vers les thèmes si > 8 questions]
[GROUPES DE QUESTIONS — <details>/<summary> natifs, 6 à 12 par groupe]
(→)
[CTA — « Vous ne trouvez pas ? Écrivez-nous » + contact réel]

G-10 · Contact

[H1] Nous contacter
[=== BANDE D'ADRESSES — Belgique [SRC] · Luxembourg [SRC] + téléphones]
[FORMULAIRE — 4 à 6 champs maximum · consentement (C-19) · erreurs (C-20)]
[CANAUX DIRECTS — téléphone, courriel, réservation, presse]
[CARTE — avec équivalent textuel]
[HORAIRES DE RÉPONSE [SRC]]

G-11 · À propos / Histoire

[H1] L'histoire du groupe
[CHAPÔ — l'idée : arrêter le temps [SRC]]
[=== FRISE — 2020 création · 2022 rapprochement (Arthur et Nicolas Lhoist) [SRC] · 25 ans d'expertise]
[LES TROIS PILIERS — rappel]
[LES VALEURS — passion · engagement · respect · authenticité]
[=== DÉMARCHE B CORP — statut, preuves, date [SRC]]
[LES DIRIGEANTS — portraits réels, verbatims]
[CTA — presse / carrières]

G-12 · Impact (B Corp, RSE)

[H1] Notre impact
[chapô — la démarche, sans superlatif]
[=== BANDE DE CHIFFRES d'impact [SRC] : chaque indicateur avec son périmètre et son année]
[ENGAGEMENTS — 3 à 5, chacun avec un indicateur et une échéance]
[PREUVES — certifications, rapports téléchargeables, date]
[LIMITES — ce qui n'est pas encore fait (crédibilité)]
[CTA — télécharger le rapport / nous écrire]

G-13 · Carrières

[H1] Travailler chez Tero
[chapô — missions, périmètre, chiffres de l'équipe [SRC]]
[=== BANDE — les 3 piliers et leurs métiers]
[OFFRES — liste filtrable (C-23), chaque offre avec lieu, contrat, date]
[PROCESSUS DE RECRUTEMENT — 3 à 4 étapes, durées]
[CTA] Candidature spontanée (formulaire court)

G-14 · Landing (campagne, acquisition)

[en-tête réduit — logo + endossement Tero + téléphone]
[HERO — promesse claire + [CTA] unique]
[PREUVE — 3 chiffres sourcés ou 3 logos partenaires]
[BÉNÉFICES — 3 blocs, un argument par bloc]
[OBJECTIONS — FAQ courte (3 questions)]
[CTA FINAL — même action que le hero, libellé identique]
[pied réduit]

G-15 · 404

[H1] Cette page n'existe plus
[1 phrase : ce qui a probablement changé]
[LIENS UTILES — 4 maximum : accueil, marques, lieux, contact]
[RECHERCHE — champ (C-17) prérempli si possible]

G-16 · Recherche

[H1] Recherche
[CHAMP de recherche (C-17) + filtres (C-23)]
[COMPTEUR DE RÉSULTATS — role="status"]
[RÉSULTATS — cartes (C-03) ou lignes, terme surligné (jamais la couleur seule)]
[PAGINATION (C-24) avec URL par page]
[AUCUN RÉSULTAT — 3 suggestions de reformulation + portes de sortie]

---

7. PATTERNS TRANSVERSES

7.1 Grille

7.2 Rythme et densité

7.3 Hiérarchie typographique

Interdits : deux familles dans un même titre · plus d'un mot en script par page (et zéro

tant que WildYouth n'est pas arbitrée) · capitales sur plus de 2 lignes · une taille hors rampe.

7.4 Composition

• Alterner les fonds : blanc → #F6F4F4 → profond → accent. Jamais deux identiques côte à côte.
• Varier la position du titre de section : à gauche, puis colonne latérale, puis bandeau centré.

Jamais huit en-têtes centrés d'affilée.

• Une idée par section. Une section qui porte deux idées en porte zéro.
• Le contenu décide de la grille, jamais l'inverse.
• Le titre porte la carte : pas de fond, pas de bordure, pas d'ombre sur une carte de contenu.
• La preuve avant la promesse : un chiffre, un lieu, une date avant un adjectif.

7.5 Responsive

7.6 Mouvement

Interdits de mouvement : animer width, height, top, left, box-shadow · plus de

3 courbes sur tout le site · un ease écrit à la main dans un composant · plus de 3 éléments

animés simultanément · une translation d'entrée > 24 px · un zoom d'image hors 1.02-1.05 ·

bounce/elastic sur de l'UI fonctionnelle · une bibliothèque d'animation externe ·

un loader plein écran bloquant · une révélation lettre par lettre · du scroll-jacking ·

une révélation indispensable à la visibilité du contenu (sans @supports, le contenu doit

rester visible : c'est un piège mesuré sur Firefox stable).

/* Neutralisation globale : un seul endroit, pas 25 composants. */
@media (prefers-reduced-motion: reduce) {
  :root { --tero-dur-fast: 1ms; --tero-dur-base: 1ms; --tero-dur-move: 1ms;
          --tero-dur-draw: 1ms; --tero-dur-slow: 1ms; }
  *, ::before, ::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
                         transition-duration: 1ms !important; scroll-behavior: auto !important; }
  video[autoplay] { display: none; } /* on sert le poster */
}

7.7 Médias

7.8 Langues (FR / NL / EN)

• Parité de structure stricte : les trois langues ont la même arborescence, les mêmes blocs,

le même nombre de sections. Un bloc présent en FR et absent en NL est un défaut.

• Adaptation native, jamais une traduction mot à mot · NL = néerlandais belge ·

EN = anglais britannique.

• Noms propres jamais traduits : Tero Group, Tero Hospitality, Teroir, Knokke Out,

Bistro Pilko, Immorun, Batirun.

• Le sélecteur de langue affiche des noms de langues, jamais des emoji-drapeaux.
• lang correct par page : fr-BE, nl-BE, en · hreflang réciproque + x-default.
• Prix et formats locaux : 1.234,56 € en FR/NL, €1,234.56 en EN · dates au format local.
• Les composants ne fixent jamais une largeur en ch sur un libellé traduit : les chaînes

NL sont 15 à 30 % plus longues. Les gabarits sont testés dans les trois langues (§ 8.3).

7.9 États globaux de la page

---

8. CONTRATS DE VÉRIFICATION

8.1 Budgets opposables

8.2 Contrôles automatiques (bloquants en intégration continue)

Règle de mesure : on lance le build, puis la vérification — jamais l'inverse ; et **aucune

livraison ne s'affirme bonne sans la sortie de la commande** (règle groupe § 19).

8.3 La règle des captures

Toute modification visuelle est livrée avec des captures aux 5 largeurs (360 / 390 / 768 /

1024 / 1440) et, pour les gabarits de marque, dans les 3 langues (FR / NL / EN).

Un composant validé dans une seule langue n'est pas validé : le néerlandais est la langue la

plus longue et c'est celle qui casse les grilles.

---

9. GOUVERNANCE

9.1 Ajouter un composant — la procédure

Refus automatique si : le composant duplique un composant existant · il introduit une

couleur, une taille, un rayon ou une durée hors listes · un de ses états n'est pas spécifié ·

il n'a pas d'alt/aria pour son contenu porteur de sens.

9.2 Versionner

Règles :

• Un token ne change pas de valeur sans entrée de journal. Une valeur de charte mesurée ne

se « ravive » pas : si elle change, c'est une décision datée et signée.

• Un composant déprécié reste documenté une version entière, avec son remplacement.
• La version du design system est déclarée dans le HTML (<meta name="tero-ds" content="2.0.0">)

pour qu'un audit puisse dire quelle version tourne en production.

• Aucun thème ne survit à sa marque (§ 4.6.4).

9.3 Portes de qualité (dans l'ordre, aucune ne se saute)

9.4 Rôles

9.5 Le tableau des décisions prises (journal)

---

10. QUESTIONS À FAIRE TRANCHER PAR LE CLIENT

• Logo de référence : mot-symbole 5 tracés (_audit/logo-tero-2025.svg, rapport 2,500) ou

vectoriel padel 4 tracés (logo-tero.svg, rapport 1,983) ? Les deux sont dans le dépôt (C5).

• Déclinaisons couleur du logo : noir, blanc, navy #0D1F30, ou une par pilier ?

Cinq couleurs non déclarées circulent déjà dans les fichiers officiels (C4).

• Réédition vectorielle : le studio réédite-t-il 5 SVG aujourd'hui construits sur un masque

raster 533 × 237 (C6) ?

• Almarose Black (900) : le groupe l'utilise-t-il (fichier à récupérer) ou reste-t-il à 400→700 ?

Et confirme-t-on la suppression du h2 800 synthétique du modèle padel (C3) ?

• Sauge : Tero Studio a une sauge mesurée #7C8F7A ; tero.be porte #97AB83 (620 occurrences)

qui n'est pas la même couleur. Est-ce une dérive à résorber vers la sauge studio (C15 § 4.5) ?

• Conteneur : 1 100 px (mesuré sur tero.be) ou 1 344 px (règle du modèle padel) pour tout le

groupe (C23) ?

• --ui-accent-text pour Tero Studio et Garisart : le studio fournit-il une variante texte

mesurée ≥ 4,5:1, ou applique-t-on le repli « liens en encre soulignés » (§ 4.3) ?

• BPP #A56933 : 4,50:1 exactement. Durcit-on la teinte de 5 % (donc on change une couleur

de marque) ou applique-t-on le repli (C § 4.5) ?

• 4ᵉ rayon : accepte-t-on 8 px réservé aux champs et notifications, ou les champs prennent-ils

12 px (§ 3.6) ?

• Entités à confirmer : « Tero Lodges » et « River Woods Beach Club » existent-ils (C7) ?

Et la liste complète des marques par pilier (dont immorun.lu, bouwrun.be, buildandrun.be,

12kmanderlecht.be) ?

• WildYouth : où, combien (un mot par page ?), ou retrait du chargement (question ouverte n° 4

de la charte, toujours sans réponse) ?

• Couleur d'erreur : terracotta #B93815 (5,77:1) convient-il comme couleur d'erreur

sémantique, ou le client veut-il une 8ᵉ couleur (C10) ?

• Co-marques (IMMOBEL sur Immorun, sponsors) : quel emplacement autorisé, et jusqu'où vont

les droits d'usage des logos partenaires (§ 4.6.3) ?

---

DELTA A INTEGRER DANS LA CHARTE

Corrections et ajouts à appliquer par le lead, dans l'ordre où ils débloquent le reste.

• Corriger la casse du mot-symbole dans les 4 fichiers : tero-group-rules.md § 4.3 L276 et

§ 5.1 L292 et § 18 L605 · DESIGN.md L137 · design-tokens.json L220 ("wordmarkCase": "TERO"

→ "minuscules"). Formulation à retenir : **mot-symbole tero (minuscules) · graphie

rédactionnelle Tero · entité Tero Group · TERO en capitales : jamais.**

• Réécrire la règle du monogramme (tero-group-rules.md § 4.1 L262, piège n° 6 ; DESIGN.md

L142 ; design-tokens.json L242) : [MESURE] le monogramme est le glyphe o du mot-symbole

(rapport 0,6835, identifié à ×48 du 5ᵉ tracé _audit/path-geometry.json) ; il ne remplace

jamais le mot-symbole dans un en-tête ni dans Organization.logo ; son usage comme icône

d'application exige un carré qui n'existe pas encore.

• Corriger la règle des graisses (§ 3.1 L190, § 3.3 L221, DESIGN.md L69-70,

design-tokens.json L86) : remplacer « Almarose s'arrête à 700 / 800-900 = faux gras » par

**« une graisse n'est autorisée que si son .woff2 existe : 400/500/600/700/900 ; le 800 est

interdit (aucun fichier) »**, et corriger h2 800 dans _ref/teropadelclub/DESIGN.md L59.

• Étiqueter correctement la règle des rayons (DESIGN.md L99) : `[RÈGLE, à partir de

[MESURÉ] 15 rayons distincts] ; et justifier 12 px` comme choix face au mesuré dominant

(20 px, 188 occurrences) — ou passer à 20 px. Idem pour le CTA (§ 7.1 L367) : la mesure est

38 px, la règle est 999 px.

• Supprimer les fourchettes de la rampe (DESIGN.md L76-85) et publier une seule rampe

scalaire : les 12 paliers de tokens.css, convertis en clamp() dont les **bornes sont les

tailles mesurées** (12→13, 13→14, 14→15, 15→16, 17→18, 20→25, 30→32, 40→50, 60→80) ; y ajouter

les 2 paliers manquants de DESIGN.md (--text-body-l, --text-title-s-l) ou les retirer

des deux fichiers.

• Corriger la couleur de texte secondaire (tokens.css L14, § 2.1 L129) : `--tero-muted

#B9B9B9 ne porte plus de texte ; libellés et placeholders → --ui-fg-muted #323232`

(12,82:1 sur blanc, 11,70:1 sur #F6F4F4) ; renommer le primitif en --tero-disabled.

• Corriger l'anneau de focus (§ 7.1 L372, tokens.css L83) : couleur dépendante du champ

— teal sur fond clair (5,43:1), sable #FAD282 sur fond profond (11,20:1 sur #212121

contre 2,97:1 aujourd'hui) — plus un halo de séparation de 2 px pour rester visible sur un

aplat teal ou terracotta.

• Ajouter les tokens d'état manquants (nouveau § 2.6) : --ui-danger terracotta (5,77:1),

--ui-success teal (5,43:1), --ui-info pétrole (9,50:1), --ui-warning = icône + encre

(le sable est à 1,44:1 : jamais du texte jaune).

• Séparer filet décoratif et bordure de champ (§ 8.3 L411, tokens.css L31-33) :

--ui-border #D9D9D9 (1,41:1, filets seuls) et --ui-border-strong #767676 (4,54:1,

tout champ, case, sélecteur — exigence 1.4.11).

• Publier l'échelle d'espacement 8 pt complète (§ 8.1 L399, tokens.css L69-74) :

4·8·12·16·24·32·48·64·96·128·192 ; conserver 48/72/96/144 **comme 4 profils de rythme de

section** (flush/tight/normal/loose), pas comme échelle générale.

• Ajouter les tokens de mouvement (§ 9 L423-429) : 3 courbes (.23,1,.32,1 · .77,0,.175,1 ·

.32,.72,0,1) et 6 durées (140/200/240/380/680 ms + 55 s pour la seule boucle linéaire),

repris à l'identique du modèle padel ; interdire tout ease écrit à la main.

• Ajouter Almarose Fallback (tokens.css L37) : size-adjust: 85.08%,

ascent-override: 90.5%, descent-override: 21.2%, line-gap-override: 3.3%, inséré avant

les polices système — c'est la correction du CLS mesuré (0 → 0,0334).

• Ajouter les tokens manquants de structure : z-index nommé, points de rupture, colonnes,

largeur de colonne de lecture, --header-h (dont dépend scroll-padding), ratios d'image,

une seule ombre flottante et la règle « jamais sur une carte de contenu ».

• Créer la couche 3 (composants) et un fichier par composant : c'est le manque structurel

(C17). Sans elle, chaque page réinvente ses valeurs — mécanisme exact des 536 feuilles.

• Créer le mécanisme de thème (§ 4) : @layer, liste blanche de 11 variables,

data-theme sur <html>, data-field sur les sections, plafond de 5 valeurs par thème

et les 9 contrôles bloquants T1-T9.

• Documenter la table des accents de sous-marque mesurés (§ 4.5) avec les 12 accents relevés

et leurs ratios recalculés : elle remplace la question ouverte n° 2 de la charte par une

réponse chiffrée — un thème a besoin de 3 variables d'accent, pas d'une.

• Résoudre la contradiction § 2.3.5 ↔ § 7.3 sur le teal en bande profonde : écrire les

trois lignes (accent interactif = sable 11,20:1 · aplat teal avec texte blanc autorisé ·

jamais de texte teal).

• Renommer le contrat OpenDesign (tokens.css L29-34, design-tokens.json L66-73) :

--muted doit pointer sur --ui-fg-muted (#323232) et non sur le gris à 1,96:1 ; et la même

entrée ne doit pas figurer à la fois dans aplatOnly et dans forbidden

(design-tokens.json L202 et L209).

• Ajouter les 5 dérives des fichiers logo à la liste des couleurs interdites § 2.5 :

#075F83, #068973, #F4C567, #CEA4A4, #292929 — et compléter § 4.1 qui ne liste que

6 fichiers alors que le relevé de ce document en compte 14 (12 du miroir WordPress,

2 vectoriels du projet padel).

• Créer content/sources/tero-brands.json comme source unique des marques (clé, nom

officiel, casse, pilier, domaine, accent, statut) et le faire lire par manifest.json :

aujourd'hui le manifeste invente « Tero Lodges » et « River Woods Beach Club » et omet 4

domaines (C7).

• Mettre à jour le SKILL.md du plugin et la skill enregistrée (regles-tero-group) :

retirer « graisse 800/900 (faux gras : la famille s'arrête à 700) », remplacer la formule du

logo, ajouter la règle « **une sous-marque surcharge un accent et une imagerie, jamais la

typographie, la grille ni les composants** », et renvoyer aux § 3 et § 4 de ce document.

• Mettre à jour manifest.json : ajouter les fichiers des 3 couches et du dossier

themes/ dans files, déclarer craft.applies complété par accessibility-baseline, et

corriger l'inventaire scope.subBrands (delta 20).

• Publier le contrat de vérification (§ 8) dans tero-group-rules.md § 16 : 15 contrôles

V1-V15, les budgets (12 couleurs, 9 tailles, 4 rayons, 6 durées par page) et la règle des

captures 5 largeurs × 3 langues.

• Ajouter une section « gouvernance » à tero-group-rules.md (§ 9 de ce document) :

procédure d'ajout d'un composant, versionnement sémantique, 6 portes de qualité, rôles, et

le journal des décisions D1-D15.

• Faire trancher les 13 questions du § 10 avant toute production de gabarit : sans elles,

chaque intégrateur prendra une décision différente — ce qui est précisément l'origine des

164 couleurs, 30 tailles et 15 rayons mesurés sur le site actuel.

---

Ce que ce document n'est pas : une nouvelle marque. Aucune couleur, aucune taille, aucun

logo n'y est inventé. Les valeurs de la couche 1 sont mesurées ; celles qui ne le sont pas sont

étiquetées [REGLE] et réversibles ; celles qui appartiennent au client sont isolées en § 10.

Une seule chose est nouvelle ici : la structure. C'est celle qui manquait — et c'est elle

qui empêche les 164 couleurs de revenir.