l'attitude

01

L'ADN de marque

02

Les couleurs

La palette officielle de L'Attitude Massothérapie suit la règle 60/30/10 pour garantir un équilibre visuel chaleureux et sophistiqué.

Règle d'utilisation : 60% couleurs principales · 30% secondaires · 10% accent

Déclinaisons de teintes

Chaque couleur est disponible à 80% / 60% / 40% / 20% pour créer profondeur et effets ton sur ton.

03

La typographie

Hiérarchie visuelle en contexte

Comparaison des tailles — corps de texte

Récapitulatif de la hiérarchie

Ratio d'or — Pour des tailles harmonieuses, multiplier ou diviser par 1.618. Ne pas utiliser text-align: justify en CSS.

04

Les logos

Versions disponibles

Composantes de l'emblème

Zone de protection

Espace minimal autour du logo = 2× la hauteur de la lettre « L » du mot « l'attitude ». Aucun élément ne doit empiéter sur cette zone.

Usages interdits

05

Les éléments graphiques

Directives photographies

Bonnes pratiques web

• ✓ Utiliser les valeurs HEX ou RGB uniquement — jamais CMYK ou Pantone
• ✓ Servir les logos en SVG inline pour permettre fill: currentColor
• ✓ Servir les images en .webp ou .jpg optimisé — compresser avant déploiement
• ✓ Ajouter un attribut alt descriptif sur tous les logos et images
• ✓ Adapter la version du logo selon le viewport — vertical, horizontal ou alternatif
• ✓ Utiliser font-display: swap pour éviter le blocage du rendu
• ✕ Ne pas utiliser text-align: justify — risque de trous typographiques
• ✕ Ne pas utiliser des logos en .png ou .jpg basse résolution
• ✕ Ne pas appliquer transform: rotate, filter, ou opacity non autorisée sur le logo

06

Espacement

Basée sur une unité de 8px, chaque palier double ou suit la progression naturelle. La cohérence d'espacement donne l'impression d'aération et de luxe discrète au site.

07

Grille & Breakpoints

12 colonnes · gouttière 24px · container max 1200px. Les mises en page soins / école / ateliers utilisent toutes le même référentiel.

Layouts typiques — site vitrine

• 6 + 6 colonnes — Texte + Image (pages soins, à propos)
• 4 + 4 + 4 colonnes — Grille de soins, formateurs, ateliers
• 4 + 8 colonnes — Sidebar navigation + contenu principal
• 12 colonnes (pleine largeur) — Hero, bannières, sections d'impact

08

Composants de base

Tous les états interactifs (hover, focus, disabled) sont définis. Le focus visible est requis par WCAG 2.1 critère 2.4.11.

Boutons

Spécifications

Liens textuels

Découvrez notre approche thérapeutique fondée sur 35 années d'expertise en massothérapie. Consultez notre programme de formation ou réservez une séance dès maintenant.

Couleur : --vie-de-toscane · Underline au hover · Transition 150ms · Focus outline --fleur-de-bleuet

09

Mouvement & Élévation

Durées d'animation

Principe d'animation — apaisante, cohérente avec l'univers du bien-être. Éviter les rebonds, les flashs ou les transitions trop rapides. Tout ce qui bouge doit sembler naturel et doux.

Système d'élévation

10

Accessibilité — WCAG 2.1

Les ratios sont calculés selon la norme WCAG 2.1. Le niveau AA est le minimum légal recommandé pour tout site web.

11

Variables CSS

Bloc de référence à coller dans un fichier CSS global pour démarrer l'intégration.

/* L'ATTITUDE MASSOTHÉRAPIE — VARIABLES DE MARQUE */
:root {
  /* COULEURS — Principales 60% */
  --heure-du-the:     #6B774F;
  --bois-flotte:      #B48954;
  --vie-de-toscane:   #AD5120;
  /* Secondaires 30% */
  --creme:            #E8E4E2;
  --roche-volcanique: #282828;
  /* Accent 10% */
  --fleur-de-bleuet:  #9AC1E5;
  /* Neutre numérique */
  --blanc:            #FAFAFA;

  /* TYPOGRAPHIE */
  --font-mono: 'Silka Mono', 'DM Mono', monospace;
  --font-body: 'Roboto', sans-serif;

  --text-h1:      1.313rem;
  --text-h2:      1.063rem;
  --text-h3:      0.813rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.625rem;

  --tracking-h1:    0.08em;
  --tracking-h2:    0.35em;
  --tracking-h3:    0.18em;
  --line-height-body: 1.75;

  /* ESPACEMENTS — base 8px */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* GRILLE */
  --container-max: 1200px;
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* OMBRES */
  --shadow-sm: 0 1px 4px rgba(40,40,40,.07);
  --shadow-md: 0 4px 16px rgba(40,40,40,.09);
  --shadow-lg: 0 12px 40px rgba(40,40,40,.11);

  /* MOUVEMENT */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* UTILITAIRES */
  --radius: 2px;
}

/* OVERRIDES MOBILE (max-width: 640px) */
@media (max-width: 640px) {
  :root {
    --text-body-sm: 1rem;     /* 14 → 16px */
    --text-caption: 0.75rem;  /* 10 → 12px */
  }
}