# RÈGLES DU GROUPE TERO — TERO GROUP (tero.be) > **Version** 1.0.0 — 15 octobre 2026 · **Auteur** clixite · **Périmètre** tero.be et toutes les > sous-activités du groupe Tero. > **Source des valeurs** : audit mesuré de www.tero.be (15 octobre 2026) — `docs/AUDIT-TERO-BE-2026.md`. > **Ce fichier est LA référence unique.** En cas de contradiction avec un autre document, il gagne. --- ## 0. Comment lire ce fichier Chaque affirmation porte une **étiquette** : | Étiquette | Signification | Droit d'usage | |---|---|---| | **[MESURÉ]** | Relevé sur tero.be en production, valeur exacte, source citée. | Opposable. On ne l'arrondit pas. | | **[RÈGLE]** | Décision de système prise pour rendre le groupe cohérent. | Opposable. On ne la contourne pas sans arbitrage. | | **[À VALIDER CLIENT]** | Question ouverte. Le client tranche ; l'agent ne devine jamais. | On demande, on ne décide pas. | ### Les trois règles qui priment sur toutes les autres 1. **La marque existe déjà.** On ne l'invente pas, on ne l'interprète pas, on ne la « modernise » pas. Toute valeur de la charte est mesurée sur les sites TERO en production. Si une information manque, **on demande au client — on ne devine jamais**. 2. **On mesure, on ne suppose pas.** Toute affirmation porte une mesure : position en pixels, ratio de contraste calculé, nombre d'occurrences, extrait de DOM. « Ça a l'air bon » ne vaut rien. 3. **Le groupe ne se dissout pas dans ses sous-marques.** Toute production affiche l'appartenance au groupe Tero et respecte la hiérarchie maison mère → pilier → marque (§ 1.4). ### L'écart zéro L'audit du site groupe a mesuré **164 valeurs chromatiques distinctes**, **30 tailles de texte** et **15+ rayons d'angle** pour des palettes, échelles et rayons officiels qui n'en comptent respectivement que **7 + 4 neutres**, **une rampe** et **une échelle**. **Ces règles existent pour que ce chiffre n'augmente plus**, et pour qu'il diminue à chaque livraison. --- ## 1. L'entité et l'architecture de marque ### 1.1 Le groupe — faits mesurés - **Tero Group** est la maison mère. Groupe créé en **2020**, rapprochement officialisé en **2022** entre **Arthur Lhoist** et **Nicolas Lhoist**. [MESURÉ] - Le groupe est né de l'alliance de **Tero**, **People First** (devenu Tero Team Building) et **Knokke Out**. [MESURÉ] - **~125 personnes**, **25 ans d'expertise** événementielle, **17 lieux d'exception**. [MESURÉ] - Coordonnées groupe : **Belgique** — Chau. de Tervuren 389, 1410 Waterloo, +32 484 59 87 48 ; **Luxembourg** — Rives des Clausen 15, 2165 Luxembourg, +352 671 315 015. [MESURÉ] - Démarche impact : cadre **B Corp**, Chief Impact Officer, analyse de double matérialité, comité d'impact. [MESURÉ] - Signature de marque : **« live. share. reconnect. »** — minuscules, points, jamais modifiée. [MESURÉ] - Idée de marque : **« Arrêter le temps, pour se reconnecter aux autres, à la nature, à soi. »** [MESURÉ] - Valeurs déclarées : **La passion · L'engagement · Le respect · L'authenticité**. [MESURÉ] ### 1.2 Les trois piliers La structure officielle du groupe est en **trois piliers**. On l'écrit toujours dans cet ordre. [MESURÉ] | Pilier | Ce qu'il couvre | |---|---| | **Tero Hospitality** | Lieux · Team building · Traiteur · Restaurants | | **Tero Leisure** | Clubs et académies (padel, tennis, bien-être) | | **Tero Sport Events** | Événements sportifs d'envergure, courses, consultance | ### 1.3 Inventaire des entités du groupe **Lieux** : Tero Lodges (Jalhay, Francorchamps, Ster, Herbeumont, Rochefort) · Hôtel La Malle Poste (Rochefort) · Tero River House (Luxembourg) · Tero House17 (Luxembourg) · Tero Foresthouse Martué · Tero Eventhouse Waterloo · Château de Terblock · Lime Justine Henin Sports Hub (Wavre-Limelette) · Garisart Sports Club (Arlon) · Padel Club Louise · Knokke Out Zoute · Nest Zwin Bistro · River Woods Beach Club. [MESURÉ] **Restaurants** : Knokke Out Zoute · Bistro 17 (Luxembourg) · Bistro Pilko. [MESURÉ] **Traiteur** : **Teroir** — positionnement « farm to fork ». [MESURÉ] **Autres entités nommées** : Tero Padel Club · Tero Padel Academy · Tero Studio (bien-être) · TeroGO · Jackfly School · Kids Camps · Sportero. [MESURÉ] **Domaines du groupe** : tero.be · teropadelclub.be · terostudio.be · garisart.be · immorun.be · immorun.lu · batirun.be · bouwrun.be · buildandrun.be · impactrun.be · terotrail.be · brusselspremierpadel.be · 12kmanderlecht.be. [MESURÉ] ### 1.4 Règle d'endossement — maison mère → pilier → marque 1. **Toute page d'une sous-activité affiche l'appartenance au groupe** : la mention textuelle **« Tero »** ou **« groupe Tero »** plus un lien vers **tero.be**. [RÈGLE] 2. **Sur tero.be, une sous-activité n'est jamais présentée à plat** : elle est rattachée à son pilier (Hospitality / Leisure / Sport Events), et la page groupe expose la hiérarchie. [RÈGLE] 3. **Aucun lockup, aucun logo combiné, aucune marque nouvelle ne peut être créé** sans validation client. L'endossement se fait par la typographie, l'espace et la mention — pas par un dessin. [RÈGLE] 4. **Les marques conservées sans préfixe** (Knokke Out, Garisart, River Woods, Bistro Pilko, Lime, Teroir) gardent leur nom exact, avec endossement textuel. On ne les renomme pas. [RÈGLE] 5. La hiérarchie n'est pas encore tranchée dans le détail visuel : voir § 20, question 3. **[À VALIDER CLIENT]** ### 1.5 Sources de vérité factuelles | Fait | Où il vit | |---|---| | Adresses, téléphones, entités, lieux, capacités | `content/sources/tero-group-facts.md` (à créer) | | Chiffres de marque (125 personnes, 17 lieux, 25 ans, 2020/2022) | même fichier | | Liens de réservation et UTM | `content/sources/utm.json` | | Contrat QA (attentes chiffrées) | `content/sources/site-expectations.json` | | Tokens réels | `src/styles/tokens.css` ou l'équivalent du projet | **Aucun fait, chiffre, prix, horaire ou distinction ne se corrige sans source.** Un chiffre affiché deux fois dans deux sections voisines est une faute (§ 17). --- ## 2. Couleurs ### 2.1 La base neutre (le fond du groupe) — [MESURÉ] Le site groupe est un site **noir et blanc** : les neutres représentent **77 % des occurrences de couleur** mesurées (sur 6 291). | Token | Hex | Rôle | |---|---|---| | `--tero-black` | `#000000` | texte principal, logo, aplats profonds (1 269 occurrences) | | `--tero-white` | `#FFFFFF` | fond principal (1 443 occurrences) | | `--tero-surface` | `#F6F4F4` | surface secondaire, fond de section (388 occurrences) | | `--tero-line` | `#D9D9D9` | filets et séparateurs (130 occurrences) | | `--tero-line-soft` | `#E5E6E5` | filets très légers, fonds de champ | | `--tero-ink-soft` | `#323232` | texte secondaire, survols (243 occurrences) | | `--tero-ink-deep` | `#212121` | titres alternatifs, aplats sombres (188 occurrences) | | `--tero-muted` | `#B9B9B9` | **désactivé uniquement** — 1,96:1 : ni libellé, ni placeholder (142 occurrences) | | `--tero-ink-muted` | `#5F5F5F` | texte discret, libellés, placeholders — **6,39:1** sur blanc, **5,83:1** sur crème, **5,10:1** sur filet léger | ### 2.2 Les sept couleurs de marque déclarées — [MESURÉ] Ce sont les seules couleurs de marque déclarées dans le kit Elementor du groupe. | Token | Hex | Rôle | |---|---|---| | `--tero-teal` | `#007864` | **accent n°1 du groupe** — lien, aplat, pastille (47 occurrences) | | `--tero-petrol` | `#004B69` | accent profond — bandes profondes, titres sur fond clair (21 occurrences) | | `--tero-terracotta` | `#B93815` | accent chaud — signalétique, chiffres clés (15 occurrences) | | `--tero-sand` | `#FAD282` | aplat chaud — **jamais en texte sur fond clair** (16 occurrences) | | `--tero-rose` | `#D7B4B4` | aplat doux — **jamais en texte sur fond clair** (12 occurrences) | | `--tero-cyan` | `#00B7FF` | aplat frais — **jamais en texte sur fond clair** (15 occurrences) | | `--tero-pink` | `#FF1D58` | accent d'action rare — **jamais en texte sur fond clair** (1 occurrence) | ### 2.3 Rôles opposables — [RÈGLE] 1. **Le fond est blanc** ; les neutres portent 80 % au moins de la surface. La couleur est un **accent**, jamais l'ambiance. 2. **Une page n'utilise pas plus de deux couleurs de marque** (hors aplats d'une bande profonde). 3. **Le teal `#007864` est l'accent par défaut du groupe** ; le pétrole `#004B69` est l'accent profond ; le terracotta est réservé aux chiffres et à la signalétique. 4. **Le rose vif `#FF1D58` est un accent rare** : un seul élément par page au maximum. 5. **Sur une bande profonde** (fond `#000000` ou `#212121`), on n'utilise que le blanc, le sable `#FAD282`, le cyan `#00B7FF`, le rose poudré `#D7B4B4` et le rose vif `#FF1D58`. 6. **Aucune couleur hors des listes 2.1, 2.2** n'est autorisée dans du neuf. Une couleur de dérive rencontrée dans l'existant se remplace, elle ne se reproduit pas. ### 2.4 Contrastes — valeurs calculées (formule WCAG 2.1) — [MESURÉ] | Couleur | Hex | sur blanc | sur noir | Usage texte | |---|---|---|---|---| | Teal | `#007864` | 5,43:1 | 3,87:1 | texte sur blanc ✅ | | Pétrole | `#004B69` | 9,50:1 | 2,21:1 | texte sur blanc ✅ | | Terracotta | `#B93815` | 5,77:1 | 3,64:1 | texte sur blanc ✅ | | Rose vif | `#FF1D58` | 3,77:1 | 5,57:1 | **jamais en texte sur blanc** ; texte blanc sur aplat rose vif = échec | | Cyan | `#00B7FF` | 2,28:1 | 9,22:1 | aplat uniquement sur fond clair ; texte noir sur aplat cyan ✅ | | Sable | `#FAD282` | 1,44:1 | 14,61:1 | aplat uniquement sur fond clair ; texte noir sur aplat sable ✅ | | Rose poudré | `#D7B4B4` | 1,90:1 | 11,08:1 | aplat uniquement ; texte noir sur aplat ✅ | | Noir | `#000000` | 21:1 | — | référence | | Gris profond | `#323232` | 12,82:1 | 1,64:1 | texte secondaire ✅ | | Gris clair | `#B9B9B9` | 1,96:1 | 10,70:1 | **désactivé uniquement** ; un placeholder actif passe par `#5F5F5F` | ### 2.5 Interdits couleur - Une couleur hors § 2.1 / § 2.2, **notamment la sauge `#97AB83`** (620 occurrences mesurées, la 3ᵉ couleur du site, jamais déclarée). [MESURÉ] Trois familles distinctes — ne pas les confondre : [MESURÉ] - **(A) Accents de sous-marques déclarés** (identités de marque, légitimes dans leur thème) : `#2b4336` Tero Trail · `#263062` Immorun · `#0E143C` Batirun · `#575756` Build&Run · `#183F3C` Impactrun (`theme-color` live) · `#aac440` Garisart · `#a56933` et `#c0001e` BPP26/Batirun · `#FF2E82` et `#E9F44E` teropadelclub · `#7C8F7A` Tero Studio · `#575756` Build&Run. Ratios recalculés sur blanc : 10,72 (Trail) · 12,49 (Immorun) · 6,44 (Batirun) · 11,57 (Impactrun) · **1,97 (Garisart)** · **4,50 (BPP26 — zéro marge)** · 7,23 (Build&Run) · **3,52 (magenta padel)** · **1,20 (lime padel)** · **3,46 (Tero Studio)**. Aucun de ces accents ne peut servir **à la fois** de texte sur blanc et d'aplat à texte blanc : **un thème a besoin de trois variables d'accent.** - **(B) Dérives réelles à résorber** : `#B00000`, `#680224`, `#550D24`, `#B8451F`, `#8BB169`, `#5E93A7`, `#D9EAD3`, `#FFF5E5`, `#F0E6D7`, `#DACEC7`, `#D5E9F1`, `#F9F4EC`, `#FF4A4A`. - **(C) À trancher par le client** : la sauge **`#97AB83`** de tero.be — à noter qu'elle **n'est pas** la sauge de Tero Studio (`#7C8F7A`) : ce sont deux couleurs différentes (§ 20, question 1). - Du texte dans une couleur qui échoue AA sur son fond (§ 2.4). - Un dégradé multicolore, un dégradé violet, un vert forêt générique. - Une palette « terre / forêt / sable » sans les accents vifs de la charte. --- ## 3. Typographie ### 3.1 La police du groupe — [MESURÉ] - **Almarose**, auto-hébergée, **cinq graisses livrées : 400, 500, 600, 700 et 900**. Fichiers : `Almarose-Regular`, `Almarose-Medium`, `Almarose-Semibold`, `Almarose-Bold`, `Almarose-Extrabold` (= la graisse 900 chargée par `almarose-900.woff2` sur teropadelclub). [MESURÉ] - **WildYouth** (script) est enregistrée sur tero.be **mais n'a aucune occurrence** dans les 536 feuilles de style mesurées. [MESURÉ] → § 3.4. - Aucune autre famille n'est autorisée, y compris pour un titre, un chiffre ou un logo de partenaire. ### 3.2 L'échelle typographique — [RÈGLE, dérivée de [MESURÉ]] L'audit a relevé **30 tailles px distinctes** sans rampe. La rampe ci-dessous est construite sur les tailles réellement dominantes du site (15, 14, 20, 18, 25, 13, 16, 24, 40, 30, 32, 60) et **remplace toute valeur au pixel près**. | Token | Taille (px → rem) | Interlignage | Usage | |---|---|---|---| | `--text-label` | 12 px / 0,75 rem | 1,2 | libellés, sur-titres, majuscules espacées | | `--text-meta` | 13-14 px / 0,8125-0,875 rem | 1,45 | mentions, dates, légendes | | `--text-body` | **15-16 px / 0,9375-1 rem** | 1,65 | corps de texte (valeur dominante du site : 15 px) | | `--text-lead` | 18 px / 1,125 rem | 1,6 | chapô, introduction | | `--text-title-s` | 20-25 px / 1,25-1,5625 rem | 1,25 | titre de carte, sous-titre | | `--text-title-m` | 30-32 px / 1,875-2 rem | 1,15 | titre de section | | `--text-title-l` | 40-50 px / 2,5-3,125 rem | 1,08 | titre de page | | `--text-display` | 60-80 px / 3,75-5 rem | 1,02 | titre d'accueil uniquement | **Règle** : une page n'introduit **aucune** taille hors de cette rampe. Si un besoin n'est pas couvert, on étend la rampe dans ce fichier — pas dans la page. ### 3.3 Graisses, interlignage, lettrage — [RÈGLE] - **Une graisse n'est autorisée que si son fichier `.woff2` existe** : **400 / 500 / 600 / 700 / 900**. - **800 est interdit** : aucun fichier ne le porte, il produirait un **faux gras synthétique**. Le `h2 { font-weight: 800 }` du modèle teropadelclub est précisément le faux gras à corriger. - Échelle de graisse opposable : **h1 600-700 · h2 500-600 · h3 500 · corps 400 · emphase 600.** - Interlignage serré sur les titres (1,02 à 1,25), ouvert sur le corps (1,6 à 1,7). - `letter-spacing` : `-0.01em` à `-0.02em` sur les titres ; `+0.18em` sur les sur-titres en majuscules. - `text-wrap: balance` sur les titres de 1 à 3 lignes. - **Accents français obligatoires** : « Reserver » sans accent disqualifie la page. ### 3.4 WildYouth — [À VALIDER CLIENT] WildYouth est déclarée mais **jamais utilisée**. Deux issues, à faire trancher : - **soit** on l'utilise comme accent script : **un seul mot par page**, jamais un paragraphe, jamais deux occurrences ; [RÈGLE si validée] - **soit** on la retire du socle et on la supprime du chargement (gain de poids immédiat). **En attendant l'arbitrage : ne pas l'utiliser.** On ne crée pas un usage de marque sans décision. ### 3.5 Interdits typographiques - Une serif éditoriale en titre principal. - Une taille en pixels hors rampe § 3.2. - Une graisse dont le fichier n'existe pas : **800 interdit** ; 900 autorisé (fichier livré). - Deux polices dans un même titre ; plus d'un mot en script par page. - Du texte en capitales sur plus de deux lignes. --- ## 4. Logo et marques ### 4.1 Fichiers officiels — [MESURÉ] | Fichier | Contenu | Usage | |---|---|---| | `tero_logo.svg` (2025/02) | mot-symbole **`tero` (minuscules)** noir, `viewBox="0 0 100 40"`, **5 tracés**, `fill="black"`, ratio **2,535** | **référence actuelle du site groupe**, sur fond clair | | `assets/logo/` | **registre officiel du groupe** : 11 variantes dérivées du tracé officiel (géométrie inchangée) | production | | `logo-tero-white.svg`, `logo-blue.svg`, `logo-green.svg`, `logo_yellow.svg` (2023) | **archive raster — usage de production interdit** : balise `` en base64 dans un ``, `viewBox 385 170` (ratio 2,26), couleurs `#075F83` / `#068973` / `#F4C567` **hors palette** | non | | `logo-header.svg` | marque compacte `#292929`, `viewBox="0 0 28 43"` | en-tête / favicon | | `TERO_MONOGRAM-1.png` | **monogramme officiel = le glyphe `o` du mot-symbole** (anneau plein + barre), 1 272 × 1 861, ratio **0,684** | favicon, icône d'application, avatar, filigrane, tampon — **jamais `Organization.logo`** (portrait, sans mot-symbole) ; usage en pastille autorisé, `alt` = « tero » | ### 4.2 Règles d'usage — [RÈGLE] 1. **Le logo ne se redessine pas, ne se recolore pas, ne se recompose pas, ne se rogne pas.** 2. On utilise **les fichiers officiels listés en 4.1**, tels quels. Aucun SVG recréé à la main. 3. **Zone de respiration** : référentiel **X = diamètre de l'anneau du `o`** = `0,265 ×` largeur du mot-symbole = `0,684 ×` hauteur du monogramme. **Minimum 0,5 X**, **conseillé 1 X**, de tous les côtés. La formule « hauteur du T » est abandonnée : le mot-symbole n'a **aucune capitale**, et l'anneau monte 6,15 u au-dessus du montant du `t`. [MESURÉ] 4. **Tailles minimales** : mot-symbole **≥ 88 px de large** (trait le plus fin 5,7 px), monogramme **≥ 16 px de haut** (trait 2,7 px) ; impression **25 mm / 6 mm** ; tampon **8 mm**. Le fichier officiel n'a **aucune marge interne** : toute la respiration est à la charge de l'intégrateur. [MESURÉ] 5. Sur photo, uniquement la version **blanche**, avec un voile sombre garantissant le contraste. 6. Le logo noir est la version par défaut sur fond clair ; **sur fond sombre, jamais le noir**. 7. Le logo n'est **jamais** accompagné d'un effet (ombre, contour, dégradé, animation). ### 4.3 Endossement des sous-marques — [RÈGLE] - La maison mère s'écrit **Tero** / **Tero Group** ; le **mot-symbole officiel est le dessin `tero` en minuscules** ; `Tero` est la graphie rédactionnelle ; **`TERO` en capitales est une erreur.** - Une sous-activité s'écrit avec sa casse officielle exacte (`Tero Padel Club`, `Teroir`, `Knokke Out`, `Bistro Pilko`, `Garisart Sports Club`…). - L'appartenance au groupe est **textuelle** (mention + lien tero.be), jamais un lockup inventé. - Les trois piliers s'écrivent toujours **Tero Hospitality**, **Tero Leisure**, **Tero Sport Events** — jamais abrégés, jamais traduits. --- ## 5. Vocabulaire éditorial — la règle de design la plus importante ### 5.1 Les six règles opposables 1. **Signature invariable** : `live. share. reconnect.` — minuscules, points, tel quel. [MESURÉ] 2. **On vouvoie le client** (« vos équipes », « votre événement ») et **on parle de l'entreprise à la première personne du pluriel** ou avec « on » (« chez Tero, on se donne à 1000 % »). [MESURÉ] 3. **Graphie** : le mot-symbole est **`tero`, en minuscules** ; la rédaction écrit `Tero` ; **`TERO` en capitales n'existe pas** dans la marque. [MESURÉ] 4. **Un fait = une source.** Aucune affirmation de marque (chiffre, date, distinction, capacité, prix) sans source vérifiable listée en § 1.5. 5. **Un chiffre ne s'affiche pas deux fois** dans deux sections voisines. 6. **Zéro superlatif vide** : « incroyable », « exceptionnel » sans preuve, « leader », « unique au monde » sont supprimés. On nomme les lieux, les chiffres, les délais. ### 5.2 Lexique figé — [RÈGLE] | Sujet | Forme imposée | Forme interdite | |---|---|---| | Activité collective | **team building** (nom), `team building` en titre | « teambuilding » dans du texte neuf | | Lieux d'hébergement | **Tero Lodges** puis « gîtes » | « lodge » seul, sans « Tero » | | Restauration | **farm to fork** (sans tirets), **Teroir** | « farm-to-fork », « traiteur Tero » quand on parle de la marque Teroir | | Événement sur mesure | **sur-mesure** | « custom », « tailor made » en FR | | Orthographe | **événement** | « évènement » | | Réponse commerciale | « nous revenons vers vous **endéans les 48 h** » | « rapidement » | | Impact | programme **B Corp**, **impact**, **reconnexion** | « écolo », « green » | | Nature | **se reconnecter** à soi, aux autres, à la nature | « déconnexion », « évasion » | ### 5.3 Interdits d'écriture - Un emoji. - Un anglicisme là où un mot français existe. - Une phrase de plus de 25 mots dans un chapô. - Un paragraphe de plus de 4 lignes en mobile sans respiration. - Une promesse non tenue par le groupe (prix, capacité, délai) non sourcée. - Un texte de marque inventé (histoire, distinction, ancienneté). --- ## 6. Structure et composition ### 6.1 Hiérarchie — [RÈGLE] - **Un seul H1 par page**, aucun saut de niveau. - Ordre imposé d'une page : **sur-titre → H1 → chapô → contenu → action**. - Le **sur-titre** en majuscules `--text-label`, `letter-spacing 0.18em`, au-dessus du H1. ### 6.2 Densité — [RÈGLE] - Part de surface occupée par du contenu réel (titres, textes, images, listes, tableaux, boutons) : **≥ 70 % sain** · 40-60 % acceptable en éditorial · **< 25 % à refaire**. - Une section dont la moitié est vide sans intention est une faute. - Une colonne latérale n'est jamais vide. ### 6.3 La règle de la maison mère — [RÈGLE] C'est la règle qui n'existait pas et qui justifie cette version : 1. **L'accueil expose les trois piliers** (Hospitality, Leisure, Sport Events) — les trois, ou aucun. On ne met pas en avant un pilier au détriment des autres sur la page groupe. 2. **Chaque page de pilier ou de marque affiche le lien vers le groupe** (mention + lien tero.be). 3. **Aucune marque du groupe n'est présentée sans son rattachement** (pilier) sur tero.be. 4. **Toute page groupe répond à la question « qui est Tero ? »** dans les 2 premiers écrans (aujourd'hui : « Tero Group, ce ne sont pas seulement des restaurants ou des clubs de padel »). ### 6.4 Modules de référence — [RÈGLE] - **Passage citable** : sur-titre majuscules teal + filet, paragraphe autonome de 2 à 3 phrases, un chiffre. Un par section maximum. - **Bande de chiffres** : grands nombres en Almarose 700, `tabular-nums`, séparés par un filet, posés directement sur la page (pas de pastilles). - **Grille de lieux** : photo, nom, ville, une ligne de description, lien. Jamais une carte générique sans hiérarchie. - **Bandeau d'écosystème** : les marques du groupe listées par pilier, avec lien sortant. - **FAQ** : questions en 500, réponses courtes, mesure de lecture **62 caractères maximum**. --- ## 7. Composants ### 7.1 Boutons — [RÈGLE] - **Bouton principal** : fond noir `#000000` (référence mesurée du CTA du site) ou teal `#007864`, texte blanc, rayon **pilule**, hauteur minimale **44 px**, `font-weight 600`, `font-size` 14-15 px. - **Bouton secondaire** : contour 1 px noir, fond transparent, même hauteur. - **Sur aplat sable / cyan / rose poudré** : **texte noir obligatoire** (§ 2.4). - **Focus** : **anneau dépendant du champ** — `outline: 2px solid #000000` + halo de séparation `2px` blanc sur fond clair, et **`#FAD282` (sable, 11,20:1) sur bande profonde**. Le teal seul est inutilisable (1,00:1 sur aplat teal, 2,97:1 sur `#212121`). **Jamais supprimé**, jamais rogné, `scroll-margin` sur les cibles. - **Cibles tactiles** : 44 px minimum ; un lien inline s'agrandit par `padding-block`. ### 7.2 Plaques et cartes — [RÈGLE] - Une carte de contenu n'est **pas** faite de fond + bordure + rayon + ombre. - Le séparateur est un **filet de 1 px** `#D9D9D9` ou l'espace, jamais une boîte. - **Filet décoratif ≠ bordure de contrôle** : tout champ, case ou sélecteur utilise `--ui-border-strong` **`#767676`** (**4,54:1** sur blanc, 4,15:1 sur crème, 3,63:1 sur filet léger — exigence 1.4.11) ; `#D9D9D9` (1,41:1) et `#E5E6E5` (1,25:1) ne délimitent **jamais** un contrôle. - Rayons autorisés : `--radius-pill: 999px` (boutons), `--radius-plate: 20px` (plaques rares), `--radius-card: 12px` (images et médias). **Trois valeurs, pas quinze.** ### 7.3 Bandes profondes — [RÈGLE] - Fond `#000000` ou `#212121` uniquement. Texte blanc. Accents autorisés : sable `#FAD282`, cyan `#00B7FF`, rose poudré `#D7B4B4`, rose vif `#FF1D58`, teal `#007864`. - Jamais de texte `#007864` sur fond noir (3,87:1 = échec). ### 7.4 États — [RÈGLE] Tout composant déclare explicitement : survol, focus visible, actif, désactivé, vide, erreur, chargement. Un état non déclaré est un défaut. --- ## 8. Rythme, grille, responsive ### 8.1 Rythme vertical — [RÈGLE] - Échelle unique : **48 / 72 / 96 / 144 px** (le site groupe n'avait aucune échelle ; c'est la rampe de référence pour le nouveau socle). - L'espace entre deux entrées éditoriales est de **2,5 à 3,5 rem**, pas 1,5. ### 8.2 Grille et conteneur — [MESURÉ + RÈGLE] - Conteneur de référence : **1 100 px** (valeur mesurée du site groupe). [MESURÉ] - Gouttières : 24 px desktop, 16 px mobile. - Points de rupture de contrôle et de capture : **360 / 390 / 768 / 1024 / 1440 px**. ### 8.3 Filets — [RÈGLE] - `border-block-start: 1px solid #D9D9D9`. **Jamais plus épais.** Un filet sépare, il ne décore pas. - Ancres : `scroll-padding-block-start: 6rem`. ### 8.4 Responsive — [RÈGLE] - Aucun débordement horizontal à 360 px. - Aucun texte sous 12 px. - Les tableaux et grilles de chiffres se réorganisent en pile, jamais en défilement caché. - Toute image a un ratio déclaré (évite le décalage de mise en page). --- ## 9. Mouvement — [RÈGLE] - Le mouvement va **dans l'image** (léger zoom au survol), jamais dans la boîte : pas de `translateY` qui saute, pas d'ombre qui s'intensifie. - Durées courtes et intentionnelles : **150 à 250 ms**, courbe stable. - Apparition au défilement en CSS si possible. - **`prefers-reduced-motion` respecté** : toute animation a un repli statique. --- ## 10. Accessibilité — [RÈGLE] - **AA minimum partout**, AAA visé sur le corps de texte. - Contrastes : appliquer § 2.4 à la lettre. - Cibles tactiles 44 px. - Focus visible et jamais supprimé. - Navigation clavier complète, ordre logique, `skip link` en tête. - Textes alternatifs réels (pas « image », pas le nom du fichier). - Formulaire : chaque champ a un `label` lié, les erreurs sont annoncées et explicites. - Langue déclarée par page (`lang="fr"`, `lang="nl"`, `lang="en"`). --- ## 11. Performance — [RÈGLE] - Budget CSS : **une** feuille de style de socle + le CSS de composants strictement nécessaire. L'existant (536 feuilles Elementor, 9,1 Mo de CSS généré) est un contre-exemple mesuré. - Polices : charger **au maximum les graisses réellement utilisées**, en `woff2`, avec `font-display: swap` ; précharger la graisse du H1 et la graisse du corps. - Images : formats modernes, `width`/`height` déclarés, `loading="lazy"` hors premier écran. - Cibles : **LCP < 1,5 s · INP < 200 ms · CLS < 0,1** (issues du plan de migration du groupe). --- ## 12. Contenu et sources — [RÈGLE] 1. Toute donnée factuelle vient de § 1.5. Pas de source, pas de publication. 2. Un conflit entre le contenu et la source se **signale au lead** — on n'arbitre pas seul. 3. Les prix, horaires, capacités et adresses ne se corrigent **jamais** sans source. 4. Les témoignages clients s'affichent **verbatim**, avec nom et société, jamais reformulés. 5. Les textes EN et NL sont des **adaptations natives**, pas des traductions mot à mot. --- ## 13. SEO et GEO — [RÈGLE] ### 13.1 Corrections prioritaires des données structurées — [MESURÉ] Défauts constatés dans le JSON-LD de toutes les pages de tero.be, à corriger dans le nouveau socle : 1. Le nœud de page est typé **`Article`** sur des pages non éditoriales (accueil, contact, tero-group) → doit être **`WebPage`**. 2. L'auteur déclaré est **`lumisys`** (compte agence) → doit être **`Organization` Tero** ou un auteur réel nommé. 3. `sameAs` contient l'URL de **prévisualisation Infomaniak** (`b88ep6bjdmh.preview.infomaniak.website`) → **à supprimer**, remplacée par les réseaux sociaux officiels du groupe. 4. `Organization.logo` pointe le **monogramme portrait** (1 272 × 1 861) → déclarer le **mot-symbole `tero`** (SVG, ou PNG carré à fond transparent ≥ 512 px) ; le monogramme sert de favicon et d'icône, **jamais** de logo d'organisation. 5. `og:image:width` / `height` annoncés ne correspondent pas à l'image servie → aligner. ### 13.2 Hiérarchie de marque en données structurées — [RÈGLE] - `Organization` **Tero Group** = nœud racine (nom `Tero`, `alternateName` `Tero Group`, `url` https://tero.be, logo officiel, `sameAs` réseaux officiels). - **`subOrganization`** pour les trois piliers et les marques opérationnelles. - **`brand`** sur les pages de marque. - **`LocalBusiness` / `Place`** par lieu, avec NAP strictement identique à § 1.1. - **`Event`** pour les événements, `Restaurant` pour les restaurants, `FAQPage` pour les FAQ, `BreadcrumbList` partout. - **Aucune donnée structurée inventée** : pas de `aggregateRating`, `review`, `vatID`, `foundingDate` ou `telephone` sans source. ### 13.3 Fichiers machine — [RÈGLE] - `robots.txt` ouvert aux moteurs de réponse : GPTBot, OAI-SearchBot, ChatGPT-User, Google-Extended, ClaudeBot, PerplexityBot, AmazonBot, Applebot-Extended, CCBot, meta-externalagent. - **`llms.txt`** et **`llms-full.txt`** décrivant le groupe, les trois piliers, les entités, les adresses et les marques. - `sitemap.xml` par langue + index, `hreflang` réciproque `fr` / `en` / `nl` + `x-default`, `canonical` sur chaque page. ### 13.4 GEO — être cité comme entité — [RÈGLE] - **Une phrase-réponse autonome** par section clé (2-3 phrases compréhensibles hors contexte). - **Le nom complet et la catégorie** du groupe dans le premier paragraphe de l'accueil : « Tero Group est un groupe belge d'hospitalité, de loisirs et d'événements sportifs… ». - **NAP identique partout** (site, schéma, annuaires, fiches). - Une page **« À propos »** unique et citable qui porte l'histoire, les fondateurs, les chiffres. ### 13.5 Maillage et redirections — [RÈGLE] - Maillage hub → pilier → marque → lieu, plus fil d'Ariane sur toutes les pages profondes. - Parité d'URL conservée : aucune URL existante ne change sans redirection **301**. --- ## 14. Langues FR / NL / EN — [RÈGLE] - **Le FR est la version de référence** ; NL et EN sont des adaptations natives. - Parité de structure : toute page existe dans les trois langues, ou n'existe dans aucune. - **Noms propres jamais traduits** : Tero, Teroir, Knokke Out, Bistro Pilko, Garisart, Lime, Tero Lodges, Tero House17, Tero River House, Tero Foresthouse, Terblock. - Formats : dates et nombres selon la locale ; prix en **€** avec espace insécable. - Le néerlandais est du **néerlandais belge** ; l'anglais est **britannique**. - Contrôle obligatoire : `hreflang` réciproque, `canonical` correct, aucune chaîne non traduite. --- ## 15. Médias et images — [RÈGLE] - **Vraies photos des lieux du groupe.** Jamais une photo de stock générique, jamais la photo d'un lieu attribuée à un autre. - Formats modernes (AVIF/WebP), largeurs générées 480 / 768 / 1024 / 1440 / 1920, poids maîtrisé. - Nommage : `tero---.`. - Textes alternatifs descriptifs et factuels. - Bandeaux de partenaires : jamais un logo de marque cliente sur une page de marque Tero sans autorisation — et jamais un logo redessiné. --- ## 16. QA, vérification et déploiement — [RÈGLE] ### 16.1 Règles générales - Jamais de vérification sans **build** préalable. - Jamais de livraison en affirmant « c'est bon » sans la sortie de la commande. - Toute affirmation du compte rendu porte sa mesure. ### 16.2 Contrôles minimaux avant livraison 1. Nombre de valeurs chromatiques distinctes introduites : **doit rester dans § 2.1/2.2**. 2. Nombre de tailles de texte distinctes : **doit rester dans § 3.2**. 3. Nombre de rayons distincts : **3 maximum** (§ 7.2). 4. Contrastes de chaque nouveau couple texte/fond : calculés et consignés. 5. Captures aux largeurs 360 / 390 / 768 / 1024 / 1440. 6. Parité FR/NL/EN. 7. JSON-LD valide et conforme à § 13. 8. Aucune requête 404, aucune image cassée. ### 16.3 Déploiement - Committer l'état exact déployé, poser un **tag annoté** `release--` dont le message dit comment revenir. - Ne jamais déployer depuis un arbre non committé. - Après un retour arrière, **re-déployer** : revenir en local ne remet pas la production en état. --- ## 17. Pièges connus — ne pas les reproduire Ce sont les pièges **réellement mesurés** sur tero.be. 1. **La dérive chromatique** : 164 valeurs distinctes, 2,0 % d'occurrences pour les couleurs déclarées. [MESURÉ] 2. **La sauge `#97AB83`** : 620 occurrences, 3ᵉ couleur du site, hors charte. [MESURÉ] 3. **Trente tailles de texte** sans rampe. [MESURÉ] 4. **Quinze rayons d'angle** de 0 à 999 px, dont une pilule à 38 px recopiée à la main. [MESURÉ] 5. **WildYouth déclarée, jamais utilisée** : une police chargée pour rien. [MESURÉ] 6. **Le logo déclaré aux moteurs n'est pas le logo** (anneau 1272 × 1861). [MESURÉ] 7. **La maison mère noyée** : les sous-marques présentées à plat, sans hiérarchie ni endossement. [MESURÉ] 8. **Des graphies concurrentes** : team building / teambuilding, farm to fork / farm-to-fork, événement / évènement. [MESURÉ] 9. **Du JSON-LD faux** : `Article` sur des pages, auteur `lumisys`, `sameAs` de prévisualisation. [MESURÉ] 10. **Des contrastes non documentés** : 6 des 7 couleurs déclarées échouent AA en texte sur blanc. [MESURÉ] 11. **L'identité produite page par page** par Elementor (536 feuilles) : aucun système de tokens. [MESURÉ] 12. **Un logo recoloré ou recomposé** à la main : toujours interdit, jamais une solution. 13. **Un chiffre affiché deux fois** dans deux sections voisines. 14. **Une section à moitié vide** (densité < 25 %) ou une colonne latérale morte. 15. **Un fait de marque sans source** : chiffre, ancienneté, distinction, capacité. --- ## 18. Checklist avant livraison - [ ] Le logo officiel est utilisé, non modifié, non rogné ; ce n'est **pas** la vignette anneau. - [ ] Seules les couleurs de § 2.1 / § 2.2 apparaissent ; aucune valeur hors charte. - [ ] Chaque couple texte/fond a un contraste calculé ≥ 4,5:1 (≥ 3:1 pour ≥ 24 px **ou** ≥ 18,66 px en graisse 700). - [ ] Les tailles de texte appartiennent à la rampe § 3.2. - [ ] Almarose uniquement ; graisses **400/500/600/700/900** (fichiers existants), **800 interdit**. - [ ] Aucun plus d'un mot en script — voire aucun, tant que WildYouth n'est pas arbitrée. - [ ] La signature `live. share. reconnect.` est exacte si elle est utilisée. - [ ] La marque s'écrit `Tero` dans le texte ; le **logo officiel est le dessin `tero` en minuscules** (`TERO` en capitales = erreur). - [ ] La page affiche le rattachement au groupe (pilier + lien tero.be). - [ ] Le lexique § 5.2 est respecté (team building, Tero Lodges, farm to fork, événement, sur-mesure). - [ ] Aucun fait, chiffre, prix ou distinction sans source (§ 1.5). - [ ] JSON-LD conforme à § 13 : `WebPage`, `Organization` Tero, `subOrganization`, pas d'auteur agence, pas de domaine de prévisualisation. - [ ] `hreflang` réciproque FR/NL/EN + `x-default`, `canonical` corrects. - [ ] Contrastes, focus, cibles 44 px, `prefers-reduced-motion` vérifiés. - [ ] Le fichier de logo vient du registre `assets/logo/REGISTRE-LOGOS.md` (jamais d'une capture d'écran). - [ ] Le paquet d'icônes est complet : `favicon.svg`, `favicon.ico`, `apple-touch-icon-180.png`, `icon-192/512`, `maskable`, `site.webmanifest`, `theme-color`. - [ ] Un endossement n'est graphique que si le lockup existe ; sinon il est textuel. - [ ] Captures aux largeurs 320/360/390/768/1024/1440 fournies pour tout changement visuel. - [ ] Le build passe **et** la vérification passe : sortie de commande à l'appui. --- ## 19. Discipline de vérification Ordre imposé, sans exception : 1. Lire ce fichier **en entier** avant de produire. 2. Vérifier les sources de vérité (§ 1.5). 3. Coder en appliquant la checklist § 18. 4. **Mesurer** — jamais à l'œil : compter les couleurs, les tailles, les rayons introduits ; calculer les contrastes ; capturer aux 5 largeurs. 5. Lancer le build **puis** la vérification. 6. Consigner les écarts restants avec la page et la raison. > Une livraison sans mesure n'est pas une livraison : c'est une opinion. --- ## 20. Décisions tranchées (v1.2) Les huit questions ouvertes des versions précédentes sont **tranchées** dans `docs/design/ARBITRAGES-TERO-GROUP.md`. Résumé opposable : 1. **Sauge `#97AB83`** : hors charte, dérive à résorber. Tero Studio garde `#7C8F7A`, accent scellé à `terostudio.be`. 2. **Couleur** : hiérarchie à trois niveaux — institutionnel (teal) → pilier (Hospitality teal · Leisure pétrole · Sport Events terracotta) → marque → campagne (aplats) → fonctionnel. 3. **Endossement** : 2 niveaux + autonome nominatif + co-marque encadrée ; **textuel tant que le lockup n'est pas dessiné**. 4. **WildYouth** : conservée, **un seul mot par page**, jamais en titre principal, subset latin obligatoire. 5. **Aucune variante « sans barre »** : deux constructions officielles (mot-symbole, monogramme). 6. **CTA** : noir en primaire, teal en secondaire, sable sur bande profonde (texte noir). 7. **Neutres de lisibilité** `#5F5F5F` et `#767676` : adoptés. 8. **Mode sombre** : complet sur `charte.tero.be`, **non** sur tero.be au lancement — tokens prêts.