**Base**: `sprint/8-c2` (sprint 8 not yet merged on origin/main, but its `C2ConfigCard` is the right pane).
**Scope**: frontend-only. No backend, no schema. No new features.
---
## Decisions (locked)
1.**Engagement page** : passer en **2 colonnes** sur desktop (`lg:grid-cols-2`), `[engagement form | C2ConfigCard]`. Mobile/tablet : stack vertical (comportement actuel).
2.**Contraste global** : le problème est que `canvas` (page bg) et `paper` (card bg) sont **tous deux `#ffffff`** en light mode. Les cartes ne ressortent que par leur hairline 1px → fatigue oculaire confirmée par l'utilisateur.
3.**Fix retenu** : **tinter le canvas light** d'un neutre froid très pâle. `paper` reste blanc pur. Les cartes "lèvent" naturellement sans casser le brutalisme.
- Proposition : `canvas` light `#f3f5f8` (gris-bleu très pâle, cohérent avec l'electric blue), `paper` light `#ffffff`.
- Dark mode **inchangé** (`canvas #111827` / `paper #1f2937` déjà différenciés).
4.**Pas de shadow**, pas de radius. La brutalité reste intacte — seul le contraste de surface change.
5.**Hairline** : à vérifier sur le nouveau canvas. Si nécessaire, passer `hairline` light de la valeur actuelle à un poil plus sombre pour préserver la lisibilité du bord sur tinted canvas. Mais éviter si la lecture est déjà bonne.
- Remplacer le wrapper `<div className="flex flex-col gap-xl max-w-2xl">` par un container plus large + grid 2-col responsive.
- Header reste en haut, full width.
- Body : `grid grid-cols-1 lg:grid-cols-2 gap-xl` avec :
- Col gauche : `<form>` engagement (déjà en `card-product`).
- Col droite : `<C2ConfigCard>` (seulement quand `editing && canEditEngagements`).
- Si pas en edit (création) : col droite vide → garder la grid mais que la col gauche se déploie via `lg:col-span-2` (pour pas avoir un vide à droite). Acceptable alternative : `flex` + `max-w-2xl` quand non-editing.
- Pas de modif sur la logique de form, validation, mutations.
## Task B — Contrast pass (tokens)
**Files** :
-`DESIGN.md` § Surface : mettre à jour `canvas` light = `#f3f5f8`, conserver `paper` light = `#ffffff`. Documenter dans la même section que "canvas tints lift paper cards in light mode without violating brutalism".
- Token source de vérité (Tailwind config ou CSS vars). Localiser et appliquer la même MAJ. Probablement `frontend/tailwind.config.js` ou un `frontend/src/styles/tokens.css` / `index.css`.
- Vérifier qu'aucun composant ne hardcode `#ffffff` pour la page bg (devrait utiliser `bg-canvas`).
- Tests CSS smoke : `bg-canvas` continue de matcher, dark mode inchangé.
## Task C — Visual regression check
-`pnpm vitest run` clean.
-`pnpm tsc --noEmit` clean.
-`pnpm lint` clean.
- Screenshots avant/après (au moins) :
- EngagementsListPage (cards-on-canvas)
- EngagementDetailPage
- EngagementFormPage (edit, avec C2ConfigCard à droite)
- SimulationFormPage (déjà 2-col sprint 7, vérifier que le tinted canvas n'écrase pas)
- LoginPage
- Dark mode : passe rapide pour confirmer aucune régression.
---
## Sequencing
1.**frontend-builder** : Task A + B + C. Une seule passe, commits atomiques.
2.**design-reviewer** : revue visuelle après merge des commits builder. Focus :
- Lecture confortable cards-on-tinted-canvas.
- Hairline encore visible.
- Dark mode inchangé.
- Pas de régression sur components qui pourraient ré-utiliser `bg-canvas` pour autre chose (dropdowns, modals).
---
## Definition of Done
- EngagementFormPage en édition : 2 colonnes desktop, stack mobile.
- Page bg différencié de card bg en light mode (eyes confort).
