# Prompt Claude Code — Migration couleurs V2 « Emerald » (dativo.fr + app2)

> Copier-coller ce bloc dans Claude Code (à la racine `DATIVO_FR/`).

---

## Contexte

On fait évoluer la charte graphique Dativo vers la **V2 « Emerald »**. Le vert primaire
historique **Forest `#1F3D33`** (trop sombre, sortait noir à l'impression) est remplacé,
comme **couleur de marque / primaire**, par **Emerald `#4E7F65`** (PMS 5615 C).
Forest reste l'**encre** (textes, fonds foncés). Tout doit rester **RGAA / WCAG 2.1 AA**.

**Source de vérité** (à lire avant de commencer) :
- `~/Documents/WWW/_DATIVO/_PROJET_DATIVO/LOGO_MAQUETTES/LOGO V2/CHARTE_GRAPHIQUE.html`
- `~/Documents/WWW/_DATIVO/_PROJET_DATIVO/LOGO_MAQUETTES/LOGO V2/dativo-design-tokens.css`

## Échelle Emerald (teinte unique 148°) — à ajouter dans chaque `:root`

```
--emerald-900:#193828; --emerald-800:#264C38; --emerald-700:#37664D;
--emerald-600:#44755B; --emerald-500:#4E7F65; --emerald-400:#659E80;
--emerald-300:#84BD9F; --emerald-200:#A7D6BD; --emerald-100:#CAEBD9; --emerald-50:#E4F7ED;
```

Rôles :
- `#4E7F65` (Emerald 500) = **primaire** : logo, boutons, aplats de marque, liens. Texte BLANC (4,6:1 AA).
- `#37664D` (700) = **survol** bouton (6,6:1). `#264C38` (800) = **clic/`:active`** (9,7:1).
- `#1F3D33` (Forest) = **encre** : textes, nav, header/footer, sections foncées. Inchangé.
- Accents inchangés : Tender `#157F77`, Mint `#B7DDD2`, Dew `#DCF1E0`, Terra `#E37222`.

## Fichiers à modifier

### 1. dativo.fr — `_site/assets/css/`
- `dativo.css` : possède son propre `:root` en `--color-*` (`--color-forest:#1F3D33`),
  avec **104 usages de `var(--color-forest)`**.
- `dativo-design-tokens.css` : `:root` en `--forest`, `--emerald`…

### 2. app2 — `_app2/shared/assets/css/tokens.css`
- `:root` en `--dv-color-*`. ⚠️ `--dv-color-emerald:#4e7f65` y est **déjà** commenté
  « Primaire, CTA » → app2 est déjà en grande partie sur le bon vert. Vérifier/compléter
  seulement les **états** et l'échelle.

## Règles de migration (NE PAS tout basculer à l'aveugle)

1. **Ajouter** l'échelle Emerald + des alias :
   - dativo.css : `--color-primary:#4E7F65; --color-primary-hover:#37664D; --color-primary-active:#264C38;`
   - tokens.css app2 : équivalents `--dv-color-primary*` (ou réutiliser `--dv-color-emerald`).
2. **Repointer vers le primaire UNIQUEMENT les surfaces de marque** :
   - `.btn-primary { background: var(--color-forest) }` → `background: var(--color-primary)`,
     `:hover` → `--color-primary-hover`, `:active` → `--color-primary-active`.
   - boutons/CTA du header, aplats verts de marque, puces/icônes décoratives de marque, liens d'action.
3. **GARDER `--color-forest` (encre) pour** : tout `color: var(--color-forest)` (texte),
   les **fonds foncés** (header, footer, sections sombres à texte blanc), le texte de nav.
   → Ne jamais transformer un grand panneau de texte blanc-sur-Forest en blanc-sur-Emerald
   (4,6:1, limite pour un bloc entier).
4. **RGAA boutons (impératif)** :
   - Texte JAMAIS de la même teinte que le fond (pas de vert sur vert).
   - `:hover`/`:active` **foncent** (Emerald 700 puis 800) — jamais éclaircir.
   - `:focus-visible { outline:3px solid var(--color-forest); outline-offset:2px; }` sur tous les boutons/liens.
   - Vérifier chaque couple fond/texte ≥ 4,5:1 (texte normal) ou ≥ 3:1 (≥19px bold / UI).
   - Désactivé : gris (`#CBD5D0` fond / `#6B7280` texte), `pointer-events:none`.
5. **Ne pas** introduire de `#hex` en dur : passer par les variables.

## Garde-fous

- **Backups** : `cp fichier fichier.bak-$(date +%Y%m%d)` avant toute modif (des `.bak-20260622`
  existent déjà côté dativo.fr, créés en amont — ne pas les écraser).
- **Test en local** (serveur de dev), pas en prod.
- **Vérification RGAA** : passer un check de contraste (axe DevTools / Lighthouse) sur
  home, page produit, formulaire, et l'app2 ; lister les couples < 4,5:1 et les corriger.
- **Captures avant/après** de la home dativo.fr et d'un écran app2.
- **NE PAS DÉPLOYER.** Laisser le déploiement (scp) à Guillaume après revue. Pousser au plus
  un commit sur une branche `feat/charte-v2-emerald`.

## Livrable attendu

1. Diff complet par fichier (dativo.css, dativo-design-tokens.css, app2 tokens.css + CSS boutons app2).
2. Tableau des couples fond/texte modifiés avec leur ratio RGAA.
3. Captures avant/après.
4. Liste des points qui restent à trancher (le cas échéant).