# Tokens de design

Ce document liste les variables CSS de `public/css/tokens.css`, la reference
unique pour toutes les couleurs, polices, espacements, rayons et ombres du
site. Il complete `docs/architecture-donnees.md` (section 4) qui pointe
desormais vers ce fichier comme reference operationnelle.

## Regle : NE PAS MODIFIER sans validation

Ces tokens sont extraits **tel quel** de la maquette Claude Design (dossier
`maquettes/`, fichiers `*.dc.html`, styles inline). Voir CLAUDE.md section 4
("Zones NE PAS MODIFIER") : toute deviation (couleur, police, espacement)
doit etre justifiee et validee par le chef de projet, jamais improvisee dans
une PR.

Concretement :
- Un dev qui a besoin d'une nouvelle couleur/espacement doit d'abord verifier
  s'il existe deja un token proche dans `tokens.css`.
- Si le token n'existe vraiment pas, il faut le retrouver dans la maquette
  (`maquettes/*.dc.html`, styles inline) avant de l'ajouter — pas inventer une
  valeur "qui semble correcte".
- `public/css/site.css` (charge juste apres `tokens.css`) contient uniquement
  les classes `:hover` portees depuis la maquette ; memes regles de non-
  modification.

## Chargement

Les tokens sont charges dans le layout principal `resources/views/layouts/site.blade.php`,
avant `site.css` :

```html
<link rel="stylesheet" href="{{ asset('css/tokens.css') }}">
<link rel="stylesheet" href="{{ asset('css/site.css') }}">
```

Les polices Google Fonts (Poppins, Mulish) sont chargees via des balises
`<link>` dans ce meme layout, pas dans `tokens.css`.

## Typographie

| Token | Valeur | Usage |
|---|---|---|
| `--police-titres` | `'Poppins', sans-serif` | Titres (h1-h3), nav, boutons |
| `--police-texte` | `'Mulish', sans-serif` | Corps de texte, footer |

### Tailles de police

| Token | Valeur | Usage |
|---|---|---|
| `--taille-h1-hero` | 52px | Titre H1 du hero (Accueil et pages avec bandeau haut) |
| `--taille-h2-section-lg` | 38px | Titre de section, variante large |
| `--taille-h2-section` | 32px | Titre de section standard |
| `--taille-h3-carte-lg` | 21px | Titre de carte, variante large |
| `--taille-h3-carte` | 19px | Titre de carte standard |
| `--taille-h3-carte-sm` | 18px | Titre de carte, variante compacte |
| `--taille-h3-carte-xs` | 16px | Titre de carte, variante mini |
| `--taille-corps-lg` | 19px | Paragraphe mis en avant |
| `--taille-corps` | 16.5px | Paragraphe standard |
| `--taille-corps-sm` | 16px | Paragraphe compact |
| `--taille-nav` | 16.5px | Liens de navigation (header) |
| `--taille-prix-carte` | 21px | Prix affiche sur une PropertyCard |
| `--taille-prix-carte-sm` | 19px | Prix, variante compacte |
| `--taille-texte-carte` | 14.5px | Texte secondaire de carte |
| `--taille-bouton` | 14px | Libelle de bouton |
| `--taille-bouton-sm` | 13.5px | Libelle de bouton compact |
| `--taille-badge` | 12.5px | Badges (ex: statut d'un bien) |
| `--taille-petite` | 13px | Mentions legales, bas de footer |
| `--taille-tres-petite` | 12px | Petites annotations |
| `--taille-mini` | 11.5px | Libelle "CONSTRUCTIONS" du logo footer |
| `--taille-footer-titre` | 14px | Titres de colonne du footer |
| `--taille-footer-texte` | 14px | Liens et texte du footer |

## Couleurs — bleu et variantes de marque

| Token | Valeur | Usage |
|---|---|---|
| `--couleur-bleu-principal` | `#1C5BB8` | Couleur de marque : boutons principaux, liens actifs |
| `--couleur-bleu-hover` | `#2467CC` | Survol des elements en `--couleur-bleu-principal` |
| `--couleur-bleu-clair` | `#2E7BE4` | Bloc "Estimez votre terrain" (sticky-actions) |
| `--couleur-bleu-clair-hover` | `#4089EE` | Survol du bloc bleu clair |

Note maquette : `--couleur-bleu-hover`, `--couleur-bleu-clair` et
`--couleur-bleu-clair-hover` n'etaient pas dans la premiere liste de
`docs/architecture-donnees.md` (qui ne citait que le bleu principal) ; ils ont
ete releves dans les etats `:hover` de la maquette et sont actes ici, la
maquette faisant foi.

## Couleurs — texte

| Token | Valeur | Usage |
|---|---|---|
| `--couleur-texte-fonce` | `#122A4A` | Texte principal sur fond clair |
| `--couleur-texte-titre-carte` | `#1B2A3D` | Titres de carte, couleur de texte par defaut du `<body>` |
| `--couleur-texte-attenue` | `#5C6B7E` | Texte secondaire sur fond clair |
| `--couleur-texte-clair` | `#ffffff` | Texte sur fond fonce/colore |

## Couleurs — bleus fonces (zone sombre : header sombre, footer, sticky)

| Token | Valeur | Usage |
|---|---|---|
| `--couleur-bleu-fonce` | `#0E2440` | Fond du footer, blocs sombres du bandeau sticky-actions |
| `--couleur-bleu-fonce-hover` | `#16335A` | Survol des blocs sombres du sticky-actions |

Note maquette : cette paire n'apparaissait pas dans la liste initiale de
`docs/architecture-donnees.md`. Elle a ete relevee dans le footer et le
bandeau sticky de la maquette (fond sombre distinct du bleu de marque) et
actee comme reference.

## Couleurs — textes attenues sur fond fonce

| Token | Valeur | Usage |
|---|---|---|
| `--couleur-texte-attenue-clair` | `#7E92AE` | Texte secondaire dans le footer (copyright, liens bas de page) |
| `--couleur-texte-attenue-clair-fort` | `#A9B8CD` | Texte de colonne du footer (liens, description) |
| `--couleur-texte-attenue-carte` | `#9AA6B6` | Texte attenue sur une carte |

Note maquette : ces trois tokens sont nouveaux par rapport a la liste initiale
(qui ne prevoyait qu'un texte attenue pour fond clair, `#5C6B7E`). Necessaires
des qu'un texte secondaire apparait sur fond sombre (footer, sticky-actions).

## Couleurs — fonds clairs / survols / hero

| Token | Valeur | Usage |
|---|---|---|
| `--couleur-fond-survol-bleu-clair` | `#EAF1FB` | Survol de lien / bloc actif dans le header |
| `--couleur-fond-survol-bleu` | `#DCE8F7` | Autre variante de fond survole |
| `--couleur-fond-hero` | `#E8EFF7` | Fond du bloc hero (depart de degrade) |
| `--couleur-fond-hero-degrade` | `#FBFCFE` | Fond du bloc hero (fin de degrade) |

Note maquette : `--couleur-fond-hero` et `--couleur-fond-hero-degrade` sont
nouveaux (le hero de l'Accueil utilise un degrade a deux tons non documente
initialement).

## Couleurs — bordures

| Token | Valeur | Usage |
|---|---|---|
| `--couleur-bordure-header` | `#E4EAF2` | Bordure basse du header, separateurs de blocs nav |
| `--couleur-bordure-carte` | `#E8EDF4` | Bordure des cartes (actualites, offres, etc.) |
| `--couleur-bordure-separateur` | `#EEF2F7` | Ligne de separation discrete |
| `--couleur-bordure-nav` | `#DCE6F1` | Bordure du bloc nav principal (autour ACHETER / VENDRE MON TERRAIN) |
| `--couleur-bordure-bouton` | `#D6DFEC` | Bordure des boutons secondaires (standard) |
| `--couleur-bordure-bouton-secondaire` | `#CBD8E8` | Bordure des boutons secondaires, variante |

Note maquette : `--couleur-bordure-bouton-secondaire` (`#CBD8E8`) est nouveau
par rapport a la liste initiale.

## Mise en page — conteneur

| Token | Valeur | Usage |
|---|---|---|
| `--largeur-conteneur` | 1280px | Largeur max des sections standard (header, footer, contenu) |
| `--largeur-conteneur-etroit` | 1100px | Largeur max des sections de contenu plus resserrees |
| `--padding-lateral-conteneur` | 32px | Padding gauche/droite des conteneurs |

## Mise en page — espacement vertical de section

Motif recurrent dans la maquette : `padding: XXpx 32px` sur les sections.

| Token | Valeur |
|---|---|
| `--espace-section-xs` | 48px |
| `--espace-section-sm` | 56px |
| `--espace-section-md` | 60px |
| `--espace-section-lg` | 64px |
| `--espace-section-xl` | 68px |
| `--espace-section-xxl` | 72px |

Note maquette : cette famille complete (48 a 72px) est nouvelle par rapport a
la liste initiale de `docs/architecture-donnees.md`, qui ne mentionnait pas
d'echelle d'espacement de section. Relevee en recoupant le padding vertical de
chaque section des differentes pages de la maquette.

## Rayons

| Token | Valeur | Usage |
|---|---|---|
| `--rayon-carte` | 14px | Cartes standard (actualites, offres...) |
| `--rayon-carte-grande` | 16px | Cartes plus grandes (mise en avant) |
| `--rayon-carte-tres-grande` | 18px | Blocs image/hero arrondis |
| `--rayon-bouton` | 9px | Boutons standard |
| `--rayon-bouton-grand` | 10px | Boutons plus grands |
| `--rayon-nav` | 12px | Bloc de navigation principal du header |
| `--rayon-badge` | 5px | Badges (statuts, etiquettes) |
| `--rayon-cercle` | 50% | Elements circulaires (icones reseaux sociaux) |

Note maquette : `--rayon-carte-grande` (16px), `--rayon-carte-tres-grande`
(18px) et `--rayon-badge` (5px) sont nouveaux par rapport a la liste initiale
(qui ne citait que 14px carte / 9px bouton / 12px nav).

## Ombres

Base commune : `rgba(18, 42, 74, x)` pour la plupart des ombres, avec une
base distincte `rgba(14, 36, 64, .28)` pour le bandeau sticky-actions
(coherente avec `--couleur-bleu-fonce`).

| Token | Valeur | Usage |
|---|---|---|
| `--ombre-legere` | `0 1px 0 rgba(18,42,74,.04)` | Liseré sous le header |
| `--ombre-nav` | `0 4px 16px rgba(18,42,74,.06)` | Bloc de navigation principal |
| `--ombre-carte` | `0 6px 20px rgba(18,42,74,.05)` | Carte au repos |
| `--ombre-carte-hover` | `0 14px 32px rgba(18,42,74,.12)` | Carte au survol |
| `--ombre-carte-parcours` | `0 10px 30px rgba(18,42,74,.08)` | Carte "parcours" (ex: etapes) |
| `--ombre-carte-parcours-hover` | `0 18px 40px rgba(18,42,74,.14)` | Carte "parcours" au survol |
| `--ombre-property-card` | `0 6px 22px rgba(18,42,74,.06)` | PropertyCard au repos |
| `--ombre-property-card-hover` | `0 14px 34px rgba(18,42,74,.13)` | PropertyCard au survol |
| `--ombre-bouton-favori` | `0 4px 12px rgba(18,42,74,.15)` | Bouton favori (coeur) sur une PropertyCard |
| `--ombre-image-mise-en-avant` | `0 24px 50px rgba(18,42,74,.14)` | Grande image mise en avant (hero) |
| `--ombre-sticky-actions` | `0 18px 44px rgba(14,36,64,.28)` | Bandeau flottant sticky-actions |

Note maquette : l'echelle complete d'ombres (au-dela de `.06`-`.13` cite
initialement) et la base `rgba(14,36,64,...)` specifique au sticky-actions
sont nouvelles par rapport a `docs/architecture-donnees.md` initial.

## Transitions

| Token | Valeur | Usage |
|---|---|---|
| `--transition-rapide` | .12s | Transitions tres courtes |
| `--transition-standard` | .15s | Transition par defaut (hover liens, blocs) |
| `--transition-douce` | .18s | Transition un peu plus lente |
| `--transition-lente` | .3s | Transition la plus lente (grands blocs) |

## Voir aussi

- `docs/architecture-donnees.md` section 4 — reference croisee et statut.
- `docs/frontend-composants.md` — composants Blade qui consomment ces tokens.
- `public/css/site.css` — classes `:hover` qui completent ces tokens.