Pipeliner Client

## Design — Mon compte (profil client)

**Stack détectée :** Next.js 16 App Router · React 19 · Tailwind v4 (`@theme`) · next-intl (`en.ts` source de vérité + `fr.ts` **vraie traduction FR** typée `Translated<typeof en>` → tsc impose les mêmes clés/placeholders) · Atomic Design (`src/components/{atoms,molecules,organisms}`). Design system = source de vérité (`docs/design/design-system.md`). **Aucune nouvelle couleur** : la jauge et la carte tier réutilisent les tokens feedback/statut §2 existants.

### Brief — Atomic Design
- **Shell de page (MC.1)** — réutilise le **TopBar §TB** + ajoute une entrée **« Mon compte »** au menu principal et un `Link href="/account"` dans la molecule **`AccountMenu`** existante. Grille responsive `lg:grid-cols-[1.15fr_0.85fr]`, repliée en une colonne en mobile.
- **Atomes réutilisés :** `TextInput` (label + helper/erreur déjà câblés `aria-invalid`/`aria-describedby`), `Button` (primary/ghost, état `loading`), `Toast`, pastille forme §6.1.
- **Nouveaux :**
- atome **`CreditGauge`** (MC.3) — arc SVG natif (pas recharts, réservé à `TimeSeriesChart.tsx`), **couleur adaptative** : `success-fg` `#15803d` si **> 50 %**, `warning-fg` `#b45309` si **< 30 %**, `danger-fg` `#b91c1c` si **< 10 %** ; pourcentage chiffré + mot-verdict + `role="img"`/`aria-label` (jamais la couleur seule, §7).
- molecule **`PasswordChangeForm`** (MC.4) — voir ci-dessous.
- molecule **`CreditHistoryTable`** (MC.6, optionnelle).
- organisms **`ProfileInfoForm`** (MC.2) et **`TierCard`** (MC.5).

### Sections
- **Infos personnelles (MC.2)** — `TextInput` nom/entreprise éditables ; **e-mail en lecture seule** (`disabled` `bg-surface-muted` + pastille « 🔒 Lecture seule », non focusable). Mutation TanStack Query → Toast `success`.
- **Mot de passe (MC.4) — réf. #1144** : conçu ici comme **référence visuelle**. Ancien / nouveau / confirmer ; règle de force (helper ✓ `text-success-fg`) ; non-correspondance → `border-danger-fg` + helper `text-danger-fg` ; bandeaux **succès** (`bg-success-bg`, `role="status"`) / **erreur** serveur (`bg-danger-bg`, `role="alert"`). Le FE de #1143 pose la page ; **#1144 branche le formulaire sur l'endpoint sécurisé**.
- **Carte tier (MC.5)** — liseré gauche 4px + accent par niveau, **couleurs reprises des tokens de statut existants** : Démarrage 2 500 € (slate), Maintenance 4 200 € (cyan), Évolutions 9 700 € (violet), Pilotage 16 000 € (emerald). Avantages en liste à puces (check coloré), échelle 4 segments, **bouton « Demander une mise à niveau → »** pleine largeur.
- **Historique (MC.6)** — table accessible §AD.3, débit `text-danger-fg` / crédit `text-success-fg` ; affichée seulement si l'endpoint la fournit.

### États couverts
Vide/chargement (skeleton `animate-pulse`, respect `prefers-reduced-motion`), erreur (`SectionError`/bandeau + retry), succès (Toast / bandeau), peuplé.

### i18n (MC.7)
Espace `account` (+ `nav.account`) ajouté dans **`en.ts` ET `fr.ts`** (mêmes clés, mêmes placeholders ICU `{amount}`/`{total}`/`{pct}`/`{verdict}`). Noms de formule + mots-verdict toujours rendus en texte à côté de la couleur (§7).

### Preuve before/after (jointe)
- **`design-1143-after.png`** — maquette proposée (TopBar + « Mon compte », infos perso e-mail RO, jauge crédits verte 66 %, formule Évolutions violette, bouton upgrade, bloc mot de passe avec états validation/erreur, historique).
- **`design-1143-before.png`** — **reconstruction** (pas l'écran live) : « Mon compte » est un **écran neuf**. Aujourd'hui le client n'a que le menu Admin / Se déconnecter et aucune page de compte. Capture via le daemon gstack `/browse` (`load-html` + `screenshot`, viewport 840×… @2x).
- **`design-1143-mockup.html`** — maquette HTML autoportante (tokens §2/§3).

### Design system
Section **« Mon compte — profil client (MC) »** ajoutée (strictement additive) à `docs/design/design-system.md`, sous-sections MC.1→MC.7.

Transition **Spec → Design**.