Cours & ateliers
Idéale pour des sessions régulières en petit comité.
← L'AnnexeSource de vérité
Design System
La référence unique pour la cohérence visuelle du site. Toutes les valeurs ci-dessous sont lues en direct depuis app/globals.css — modifier les tokens là-bas met à jour automatiquement le site et cette page.
Réglages globaux
Quatre attributs data-* posés sur <html> pilotent l'ensemble du site. Changez-les ici pour voir tout réagir en direct.
Couleurs
Palette chaude et éditoriale. Les valeurs affichées sont les hex/rgba réellement calculés.
Encre & surfaces sombres
Surfaces claires
Neutres & lignes
Accent (or)
Typographie
Fraunces (serif display) pour les titres, Hanken Grotesk (sans) pour le corps. Échelle fluide en clamp(), mise à l'échelle par data-density.
--font-displayAa Gg
Display — Voix grave, danse, mouvement.
--font-bodyAa Gg
Corps — Voix grave, danse, mouvement.
--font-monoAa Gg
Mono — Voix grave, danse, mouvement.
--fs-display …--fs-h2 …--fs-h3 …--fs-lead …--fs-body …--fs-sm …--fs-eyebrow …Espacement
Tokens de mise en page fluides. Les barres sont rendues à leur taille réelle ; la valeur px est mesurée au runtime.
Gouttière
--gutter…Padding section
--section-y…Largeur max
--maxw…Conteneur standard : .wrap (largeur max + gouttières) · Espacement vertical : .section (padding-block: var(--section-y)).
Mouvement
Courbes d'accélération et durée de révélation partagées. Respectent prefers-reduced-motion.
Ease standard
--ease…
Ease out
--ease-out…
Durée révélation
--reveal-dur…
Opacité grain
--grain…
Boutons
Composant .btn et ses variantes. Survolez pour voir les transitions.
.btn--accent · .btn--ink · .btn--ghost · .btn--lg · .btn--on-dark · icône : <span class="btn-i">→</span>
Styles de texte
Classes utilitaires typographiques réutilisées partout.
Étiquette eyebrow
.eyebrowTexte d'introduction au ton posé, légèrement plus grand que le corps.
.leadCorps de texte standard avec un mot en accent, un passage en italique serif et une mention discrète.
.accent-text · em.ser · .mutedLien souligné animé
.ul-linkÉtiquettes
Petits éléments de catégorisation et de statut.
PilatesContemporainCréneau libreNouveau prof
Accueil / Design System
.tag · .plan-free-tag · badge prof · .crumb
Cartes
Patterns de cartes du site. Survolez pour l'élévation.
Répétitions
Grand miroir, parquet, sonorisation incluse.
Tournages
Lumière naturelle et volumes dégagés.
25€ / h
- Sans engagement
- Matériel inclus
90€ / 4h
- Le plus demandé
- Accès vestiaires
Offre recommandée
.use · .price-card (+.feat) · .contact-card
Formulaires
Champs, sélecteurs et chips de choix, basés sur le formulaire de réservation.
Ce champ est requis.
.field · .field.err · .chip-radio · .rform
Emplacements visuels
Placeholder annoté pour briefer les photos (cadrage, sujet) en attendant les visuels définitifs.
16:12 · sallePhotoSalle 1 vue large, lumière du matin.
3:4 · portraitPhotoProfesseur en mouvement.
.ph · .ph__tag · .ph__note · .ph__plus
Comment ça reste synchronisé
Cette page n'invente aucune valeur : elle lit les variables CSS et affiche les vrais composants de app/globals.css. Pour faire évoluer le design system, modifiez les tokens (couleurs, typo, espacement) ou les classes de composants dans app/globals.css — le site entier et cette référence se mettent à jour ensemble.