Charte graphique

Typographie

Police display

Fraunces

Titres, sous-titres, numéros. Semi-bold (600).

h1 — Titre principal

h2 — Titre de section

h3 — Sous-titre

h4 — Petit titre

Un seul h1 par page, taille fluide (2,4 → 3 rem), interligne serré (leading-tight) dans les heros.
Titre compact (carte de connexion…) : classe h1-compact, la règle globale du h1 l'emporte sur les text-*.
Titres de section (h2) : text-3xl font-semibold sm:text-4xl.
Un titre peut se terminer par une petite violette ou une icône ambre, jamais plus d'une.

Police body

Montserrat

Corps de texte, boutons, labels. Regular (400) et Medium (500).

text-lg — 18px

text-base — 16px (défaut)

text-sm — 14px

text-xs — 12px

UPPERCASE TRACKING — labels

Palette de couleurs

Texte— 5 couleurs

3 bruns pour la hiérarchie du texte (titres, corps, secondaire) + rouge pour les erreurs. Le blanc n'est utilisé que sur fond foncé (bouton de suppression, compteurs).

Brun foncé

#351E16

heading · accent-foreground

Titres, liens, texte sur ambre (≈ 360 usages)

Brun texte

#443D3B

foreground

Corps de texte (≈ 120 usages)

Brun secondaire

#736860

muted-foreground

Texte secondaire, légendes, labels (≈ 260 usages)

Rouge

#B91C1C

destructive

Messages d'erreur, suppression

Blanc

#FFFFFF

background

Texte sur fond brun foncé ou rouge (rare)

Fonds et aplats— 4 couleurs

2 fonds de page (blanc, crème rosé) + l'ambre pour ce qui doit attirer l'œil. Les nuances transparentes d'ambre (5 à 20 %) servent aux survols et sélections ; le brun foncé aux rares boutons sombres.

Blanc

#FFFFFF

background · surface

Fond principal, cartes

Crème rosé

#F9F4F1

muted

Bandes entre vagues, aplats organiques, pastilles

Ambre

#FFBF52

accent

Boutons, badges de date, bandeau newsletter, surlignages

Brun foncé

#351E16

heading

Bouton « s'inscrire et créer un compte », compteur de filtres

Contours et lignes— 3 couleurs

Bordures neutres en taupe ; l'ambre pour les éléments mis en avant (cartes d'ateliers, question ouverte) et l'anneau de focus clavier.

Taupe clair

#E8DDD6

border

Bordures, séparateurs, vagues (trait)

Taupe input

#D4CBC4

input-border

Bordures des champs de formulaire

Ambre

#FFBF52

accent · ring

Bordure des cartes, focus clavier, soulignés

Illustrations— 3 couleurs

Réservées aux décors (jamais pour du texte ou des boutons). Le cœur des violettes reprend l'ambre.

Vert feuille

#6F8F5E

illustration-leaf

Tiges, feuilles foncées, brins d'herbe

Vert tendre

#9DB88C

illustration-leaf-light

Feuilles et brins clairs

Violette

#8B67B3

illustration-flower

Pétales de la violette

Définies mais inutilisées sur le site— 2 couleurs

Candidates à la suppression du thème : elles ne servent plus dans les pages.

Crème

#FAF4F1

brand-cream

Seulement dans les e-mails et les fonds d'avatars ; quasi identique au crème rosé

Violette claire

#B79AD6

illustration-flower-light

Plus utilisée depuis la violette unique

Règles graphiques

Tokens sémantiques uniquement

Utiliser bg-background, text-heading, bg-accent. Jamais les tokens bruts (brand-amber).

Texte sur accent

Le texte sur fond accent doit toujours être accent-foreground (brun foncé), jamais blanc.

Pas de valeurs arbitraires

Pas de p-[17px]. Utiliser l'échelle Tailwind.

Mise en valeur (non cliquable)

Les mots-clés d'un titre utilisent highlight-soft-wave : surlignage jaune pâle sur la moitié basse des mots, bord supérieur légèrement ondulé, fixe. Jamais animé, pour ne pas être confondu avec un lien.

Liens dans le texte

Un lien placé dans une phrase utilise la classe link-wave-underline : texte brun, soulignage ondulé jaune qui défile doucement, léger fond jaune au survol. Exemple d'usage : les liens « ateliers créatifs thématiques », « anniversaires créatifs » et « événements sur-mesure » du hero de l'accueil.

Adresses et liens externes simples

Une adresse (vers Google Maps) ou un lien purement informatif garde un souligné classique, droit et non animé. Un lien externe s'ouvre dans un nouvel onglet et l'annonce aux lecteurs d'écran.

Liens de section

Les renvois vers les pages de détail utilisent le style : MAJUSCULES AVEC FLÈCHE → — trait droit au repos, ondulant au hover.

Un renvoi vers un bloc plus bas sur la même page (le formulaire de devis des anniversaires, par exemple) prend le même style avec une flèche vers le bas, via ScrollDownLink : la page glisse jusqu'au bloc en une seconde (accélération puis ralentissement), sans saut, et saute directement si l'utilisateur limite les animations. On l'utilise à la place d'un bouton pour ces renvois internes.

Les médaillons d'exemples de thèmes ou d'univers (anniversaires, accueil, événements) ne sont pas des liens : au survol, la page entière se teinte doucement de la couleur du thème, et revient à l'original quand on le quitte ; sur mobile, un tap active la teinte et un second l'annule. Le hook usePageTint (components/ui/PageTint.tsx) fournit ce comportement ; les couleurs sont déclarées avec les photos dans lib/media/.

Boutons

Scale-up au hover (1.05), scale-down au clic (0.95).

Alternance des fonds

Les sections alternent entre blanc et crème rosé (muted). Pas de ligne droite entre deux fonds : une vague douce fait la transition (voir « Éléments organiques »). Le diamant jaune n'est plus utilisé sur les pages refaites.

Éléments organiques

Le site évite les lignes droites et les rectangles nus. Ces éléments réutilisables, mis au point sur la page d'accueil, donnent l'harmonie générale. Ils sont décoratifs (ignorés par les lecteurs d'écran, non cliquables), ne recouvrent jamais de texte, et toutes leurs animations s'arrêtent si l'utilisateur a choisi de réduire les animations.

Aplat organique

Titre sur un aplat

Bords ondulés, s'étire avec le contenu.

<OrganicBackdrop /> derrière un titre de hero ou un titre de carte. Options : tone (blanc / crème rosé), shadow (sur une photo), float (flotte comme un nuage, sans se déformer), flip (miroir, pour varier deux aplats voisins).

Cadres photo

Classes organic-blob-1…4 pour les photos et les pastilles d'icônes. Deux éléments voisins n'utilisent pas la même forme. Exception : les cartes du carrousel restent rectangulaires (lisibilité), seul leur titre est sur un aplat.

Vagues entre les sections

section crème rosé

Toute bande crème est encadrée par <Wave /> en haut et <Wave flip /> en bas. La barre de menu se termine elle aussi par une seule vague douce au lieu d'une bordure droite. Les séparateurs du menu d'administration sont des traits ondulés jaunes.

Hero des pages intérieures

Composant partagé <PageHero /> (components/sections/PageHero.tsx), utilisé par les pages Anniversaires, Ateliers, Événements, Pédagogie et Amina, à reprendre sur toutes les pages sauf l'accueil. Il reçoit le titre, l'intro (un ou plusieurs paragraphes), la photo du médaillon et, en option, une ligne de valeurs en petites majuscules affichée seulement sur téléphone.

Pas de grande photo : le h1 et le sous-titre sont posés sur un OrganicBackdrop tone="muted" shadow float (il flotte doucement comme un nuage), sans icône dans le titre.
Une petite photo en médaillon en haut à droite (organic-blob-2, 240 px), de préférence avec des enfants. Elle n'apparaît qu'à partir de la largeur ordinateur, pour ne jamais recouvrir le titre.
Trois décorations seulement : un rameau (LeafSprig) en haut à droite, incliné vers l'aplat et assez bas pour ne pas passer sous la barre de navigation, une touffe d'herbe (GrassTuft sway) en bas à gauche, une violette (Blossom) sous la photo, décalée vers la droite.
Un cadre récapitulatif juste en dessous, pour qui ne lit pas la page : bordure fine arrondie, quatre colonnes centrées séparées par un filet, sur deux colonnes en tablette et une seule sur téléphone. Chaque colonne : une icône enfantine (sourire, château, cadeau, soleil…) sur une pastille organic-blob de couleur douce (jaune, violet clair, vert clair), un titre court, une ligne.

Fleurs et plantes

Violette
Blossom
Violette sur tige
Flower
Rameau
LeafSprig
Branche de violette
VioletBranch
Branche feuillue
VioletBranch flower={false}
Touffe d'herbe
GrassTuft sway

Une seule violette pour tout le site : corolle à cinq pétales égaux, cœur ambre. Petite seule (à côté d'un titre, parsemée), moyenne sur tige, grande au bout d'une branche.
Trois tailles quand plusieurs violettes sont proches (ex. hero de l'accueil : petite dans l'aplat, moyenne, grande sous la vidéo).
Touffe d'herbe : tous les brins partent d'un même point, bouts arrondis ; elle « pose » un aplat ou une photo sur le sol. Ses brins oscillent doucement (sway).
Branches de violette : les feuilles bougent en continu, la violette tourne au défilement de la page.
Bouquet de bas de page (<PinnedBranches />) : deux branches fixes en bas à gauche, qui partent du même point et s'écartent sans se croiser ; la violette au bout de la grande tige, presque droite. Affiché seulement sur grand écran (≥ 1280 px), où la marge le permet.
Mobile : une plante qui toucherait le texte faute de marge est masquée plutôt que déplacée sur le contenu.

Animations

Rien n'est animé au premier affichage (hero, carrousel visibles d'emblée) : les entrées ne jouent que pour le contenu qui arrive au défilement.
Apparition élastique 1, 2, 3 : RevealOnView + pop-in, un bloc toutes les 0,25 s (blocs pédagogie, valeurs).
Respiration au survol : hover-breathe (bouton flottant « Contactez-nous »), le même halo ambre que le panier, seulement au survol. Un bouton flottant ne saute pas : il reste en place.
Bulles de discussion : chat-in et typing-dot (BirthdayCallForm). Amina à gauche sur fond muted, les réponses du visiteur à droite sur accent, cliquables pour les modifier. Les messages déjà là au chargement ne bougent pas. Primitives partagées dans components/ui/Chat.tsx (bulles, puces, champ de saisie avec erreur bloquante ou simple avertissement), utilisées aussi par la fenêtre de contact flottante (en bas à droite ; les langues sont en bas à gauche).
Distribution de cartes : deal-in, les cartes du carrousel arrivent de gauche à droite.
Survol des cartes : l'aplat du titre remonte légèrement, quelle que soit la partie de la carte survolée.
Icônes vivantes : battement (cœur), scintillement (étoile), balancement (pousse) — discrets et continus.
Mouvement réduit : toutes ces animations sont désactivées si l'utilisateur l'a demandé à son système.

Présentation de l'information

Badges de date (carrousel) : pastille ambre. Vacances et Duo parent-enfant sur deux lignes — icône + libellé en petites majuscules, puis la date. Icônes : soleil (vacances), deux personnes (parent-enfant), rien pour le mercredi. Ces icônes sont les mêmes partout (filtres, liste, calendrier).
Mini-carrousel (UpcomingCarousel size="mini", sous les séances d'un atelier) : petites cartes photo + date + titre, sans pastille ni aplat, dans l'ordre des dates. Même glisser-défiler que le grand carrousel, lien « Voir tous les ateliers » en bas à droite.
Question / réponse ouverte (FAQ) : la question passe en gras et s'entoure d'une fine bordure ambre arrondie, sans fond coloré, pour voir où commence et où finit la réponse. Les raccourcis (« NOUS CONTACTER → ») se placent en bas à droite de la réponse.
Listes d'ateliers : fond blanc, bordure ambre fine ; les blocs vacances ont un fond jaune très léger.
Pastilles d'icônes : icône brune dans une forme organique crème ou blanche, jamais un cercle parfait.