# Sprint 9 — UI: engagement 2-col + global contrast pass

**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.

---

## Task A — EngagementFormPage 2-col

**File** : `frontend/src/pages/EngagementFormPage.tsx`

- 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).
- Vitest + typecheck + lint verts.
- Design-reviewer APPROVED.
- Screenshots livrés ou écueil documenté.
- Commits conventional, branche `sprint/9-ui-contrast`.