# Charte TGA · Ton Golf Authentique

Version 1.0 · 02.10.2026
Page humaine : https://design-system-tga.pages.dev/
Charte (ce fichier) : https://design-system-tga.pages.dev/charte.md
Source qui fait foi : le code du site V2 (Systeme.io, tunnel Accueil 7561843) et les décisions ci-dessous. Le site actuel tongolfauthentique.com (ancien design) ne fait plus foi.
Logos : https://design-system-tga.pages.dev/logos/ (tga-logo-ligne-*, tga-logo-empile-*, tga-monogramme-*, en clair, fonce, vert, blanc, SVG vectorisés)
Favicon : https://design-system-tga.pages.dev/img/favicon-tga.png
Polices : Google Fonts, Fraunces (titres), Hanken Grotesk (texte). Gloock et Pinyon Script réservées au logo.

## En une phrase

Haut de gamme dans l'exécution, chaleureux dans le contenu : un club, pas une pub, lisible à 70 ans, avec de vraies personnes et le parcours comme décor.

## Décisions

| Date | Décision | Qui |
|---|---|---|
| 26.09.2026 | Ligne directrice : haut de gamme dans l'exécution, chaleureux dans le contenu ; références Golf Valley (Behance), pas le néon de Golfio | Francisco |
| 26.09.2026 | Site « senior friendly » : texte 18px minimum, contrastes forts, boutons larges, jamais de typographie fine et pâle | Francisco |
| 26.09.2026 | Palette A « Forêt et crème » : forêt #234534, nuit #0E1B15, crème #F6EFE2, or #D9AE54 en touche, blanc ; pas de vert vif | Francisco |
| 26.09.2026 | Logo : piste H2 simplifiée (« Ton » en Pinyon Script, « Golf Authentique » en Gloock), sans « 2012 » ni « Coaching de golf » ; le site V2 l'utilise, choix définitif à confirmer avec Mathieu | Francisco |
| 26.09.2026 | Images : vraies photos (shooting du 23.09.2026, stages, élèves hommes et femmes) ; mises en situation aux couleurs de TGA (gant, balle) | Francisco |
| 02.10.2026 | Vouvoiement partout : site, pages, pop-ups, e-mails. Le nom « Ton Golf Authentique » reste tel quel | Francisco |
| 02.10.2026 | Un seul mot pour le rendez-vous gratuit en ligne : « stage » (« le stage en ligne gratuit »). Jamais conférence, webinaire, bootcamp ni masterclass | Mathieu, via Francisco |
| 02.10.2026 | Jamais rabaisser le golfeur : pas de « golf d'amateur », pas de « l'amateur » en repoussoir | Francisco |
| 02.10.2026 | Liens dans le texte toujours visibles (voir Composants) | Francisco |
| 02.10.2026 | Pop-up d'inscription aux couleurs du site | Francisco |
| 02.10.2026 | Site en pages : Accueil (résumé), La méthode, L'Académie (avec les résultats), Mathieu, Contact, bouton « Stage gratuit » | Francisco |
| 02.10.2026 | Parcours des appels à l'action : Méthode → Académie ; Académie → stage ; Mathieu → stage ; Contact → prise de contact seulement | Francisco |
| 02.10.2026 | Pied de page en 4 colonnes de 3 liens (La méthode, L'Académie, Ressources, Mathieu) + logo, phrase, réseaux | Francisco |
| 02.10.2026 | Pas de prix affiché sur le site tant que Mathieu n'a pas tranché (Niveau 1 à 397 ou 497 €) | par extension de « demander plutôt que deviner » |
| 02.10.2026 | Photos de tiers (joueurs, presse) : accord des intéressés avant mise en ligne ; jamais de filigrane retiré ni recadré | Francisco |

## Couleurs

| Nom | Valeur | Usage |
|---|---|---|
| Forêt | #234534 | Couleur principale : boutons sur fond clair, bandeaux, blocs pleins, liens |
| Nuit | #0E1B15 | Titres, fonds sombres (accroches, sections « sombre », pied de page) |
| Crème | #F6EFE2 | Fond principal des pages, texte sur fond sombre |
| Crème 2 | #EFE6D4 | Encarts, pastilles, cartes sur fond blanc |
| Or | #D9AE54 | Chiffres, détails, boutons sur fond sombre, soulignés de lien, mots-clés des titres sur fond sombre |
| Blanc | #FFFFFF | Sections alternées, cartes sur fond crème |
| Texte | #3D4A43 | Texte courant sur crème ou blanc |
| Gris | #6B766F | Mentions, étiquettes, légendes |
| Filet | #E2D8C4 | Bordures fines, séparateurs |
| Texte clair | #D5DBD7 / #C9D3CE | Texte courant sur fond nuit |

Dosage : crème et blanc dominent, forêt et nuit structurent, or en touche. Jamais de texte or sur crème (illisible). Pas de dégradé criard ; seuls dégradés permis : voile nuit → transparent sur les photos.

## Typographie

Chargement : `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap`

| Style | Police | Taille | Graisse | Interlignage | Remarque |
|---|---|---|---|---|---|
| H1 | Fraunces | clamp(38px, 5vw, 60px) | 600 | 1.06 | interlettrage -0.01em ; fin du titre en italique 500 forêt (or sur fond sombre) |
| H2 | Fraunces | clamp(32px, 3.8vw, 46px) | 600 | 1.12 | même jeu d'italique |
| H3 | Fraunces | 23px | 600 | 1.25 | |
| Texte | Hanken Grotesk | 18px | 400 | 1.65 | jamais en dessous de 16px |
| Chapeau (lead) | Hanken Grotesk | 20px | 400 | 1.6 | largeur max 36em |
| Sur-titre (eye) | Hanken Grotesk | 14px | 700 | 1 | capitales, interlettrage 0.14em, trait or de 22×2px devant |
| Mention | Hanken Grotesk | 16px | 400 | | gris #6B766F |
| Chiffre clé | Fraunces | 44 à 56px | 600 | 1 | or |
| Bouton | Hanken Grotesk | 18px | 700 | 1 | voir Composants |

Gloock et Pinyon Script : uniquement dans le logo.

## Formes et espacements

- Conteneur : 1200px de large, marges latérales 24px.
- Sections : 104px de haut et de bas (72px sous 860px de large).
- Arrondis : 999px (boutons, pastilles), 24px (grandes images, blocs vedette), 20px (cartes), 18px (encarts), 14px (petites cartes mobiles).
- Ombres : rares, longues et douces, ex. `0 30px 60px -30px rgba(14,27,21,.45)` sous les photos.
- Points de rupture : 1100px, 860px (passage en 1 colonne), 560px.

## Éléments graphiques

- La trajectoire : pointillé or d'une balle qui part et atterrit au drapeau, en décor discret sur les fonds sombres.
- Icônes : trait 1.8px, style ligne, dans une pastille ronde or translucide (`rgba(217,174,84,.14)`) sur fond forêt.
- Coches de liste : rond forêt de 20px avec coche crème.
- Frise : ligne or translucide, points or (moment haut) ou gris (moment bas).
- Photos : vraies photos de Mathieu et des élèves ; jamais de photo floue ou de mauvaise qualité ; voile nuit pour poser du texte.
- Visuels de trophées : sur fond noir pur, fondus dans le vert nuit (mix-blend-mode: lighten), jamais détourés.

## Composants

**Boutons** : padding 18px 30px, arrondi 999px, Hanken Grotesk 700 18px, transition 0.25s.
- Plein forêt (fond clair) : fond #234534, texte crème ; survol fond #0E1B15 et remonte de 2px.
- Or (fond sombre) : fond #D9AE54, texte nuit ; survol #E6BF6C et remonte de 2px.
- Contour : bordure 2px forêt, texte forêt ; survol fond forêt, texte crème. Sur fond sombre : bordure crème à 70 %.
- Focus clavier : contour or 3px décalé de 3px.
- Libellés types : « Je réserve ma place → », « Stage gratuit », « Faire mon diagnostic », « Découvrir la méthode → », « Découvrir l'Académie → ».

**Liens dans le texte** : vert forêt, souligné or 2px décalé de 5px ; flèche ↗ (0.85em) quand le lien sort du site, collée au dernier mot (espace insécable, jamais seule sur une ligne) ; survol fond or pâle `rgba(217,174,84,.22)`, texte nuit, soulignement forêt.

**Menu** : barre collante crème à 94 % floutée, hauteur 78px, logo une ligne à gauche (42px de haut), liens Hanken 600 17px nuit, page active soulignée d'or ; bouton « Stage gratuit » plein forêt à droite. Sous 1100px, les liens disparaissent, le bouton reste.

**Pop-up d'inscription au stage** : fond crème, titre Fraunces, champs blancs arrondis, bouton forêt arrondi avec la date du prochain stage en sous-titre (« Stage gratuit · jeudi 8 octobre à 20h »), textes des boutons en minuscules.

**Cartes** : fond blanc sur crème (ou crème sur blanc), arrondi 20px, padding 28 à 32px. Variante « vedette » sur fond nuit.

**Chiffres** : bandeau forêt, chiffre Fraunces or, légende 17px crème, icône dorée au-dessus, séparateurs or translucides.

**Témoignages** : défilé continu de cartes (étoiles or, citation Fraunces 18 à 19px, prénom et contexte), pause au survol ; cartes image en 4 styles (Claire, Sapin, Citation, Bandeau) et 3 formats (Page 1080, Carré 1080, Story 1080×1920) ; miniatures vidéo 16:9 (fond forêt, titre crème et or, photo de l'élève à droite) ; vidéo lue dans une fenêtre sur la page.

**Pied de page** : fond nuit ; colonne logo + « Le coaching de golf en ligne de Mathieu Lamote, pour enfin jouer un golf régulier. » + réseaux (ronds de 44px, survol or) ; 4 colonnes de 3 liens (titres or en capitales 13px) ; ligne basse : © année, Mathieu Lamote · Ton Golf Authentique, mentions légales, CGV, confidentialité.

## Composition

- Accroches : moitié photo, moitié texte (fond crème ou nuit), environ 660 à 730px de haut sur ordinateur.
- Alterner crème, blanc et nuit d'une section à l'autre ; une section sombre forte par page (méthode, parcours, palmarès).
- Chaque page finit sur un bloc d'appel à l'action plein écran sur photo voilée (stage, ou Académie depuis la page Méthode).
- Senior friendly : une idée par bloc, peu de texte par ligne, gros boutons, rien d'animé qui gêne la lecture ; animations douces respectant `prefers-reduced-motion`.

## Newsletter

À construire (Design System newsletter TGA, prochain chantier). En attendant : largeur 600px, pile de polices Georgia pour les titres et Arial pour le texte, boutons en tableau fond #234534 texte crème arrondi, fond de page #F6EFE2, logo une ligne en PNG hébergé, vouvoiement, mot « stage ».

## Ton

- Vouvoiement partout. Mathieu parle en « je ».
- Le rendez-vous gratuit en ligne = « le stage » ou « le stage en ligne gratuit ». Jamais conférence, webinaire, bootcamp, masterclass.
- Jamais rabaisser le golfeur : « votre jeu », « votre meilleur golf », « la plupart des golfeurs » ; jamais « golf d'amateur ».
- Effet miroir : Mathieu a lui-même galéré (index bloqué, montagnes russes), il a trouvé sa méthode, elle produit des champions et des records d'élèves, il la révèle gratuitement pendant le stage.
- Preuves datées et sourcées ; un chiffre non vérifié ne s'écrit pas. Les mots des élèves restent les leurs (on coupe, on ne reformule pas).
- Méthode : D.R.I.V.E, 5 piliers (technique, mental, émotions, social, physique) ; « le plan », jamais « le programme ».
- Fiches Identité à lire avant d'écrire : À propos de Mathieu Lamote, Méthode TGA, Preuves et résultats TGA, Offre et tarifs TGA, Avatar TGA.

## Logo

- Versions : une ligne (menu, signatures, en-têtes d'e-mail), empilée (couvertures, grands formats), monogramme TG (favicon, avatar, broderie).
- Déclinaisons : clair (sur crème/blanc), foncé (sur nuit), vert, blanc.
- Zone de protection : la hauteur du « G » tout autour.
- Interdits : déformer, recolorer hors palette, mettre un effet (ombre, contour), poser sur une photo chargée sans voile, couper le nom, utiliser Gloock ou Pinyon Script ailleurs.

## Publication

- Pages du site : Systeme.io, tunnel Accueil 7561843, blocs Code HTML (une page = un bloc, menu et pied de page communs) ; images et code hébergés sur maquette-tga.pages.dev.
- Après tout enregistrement d'une page qui a un formulaire : revérifier ses règles d'automatisation.
- Design System : Cloudflare Pages, projet design-system-tga. Aucune mention d'outil de production sur les pages.