Pipeliner Client

## Brief design — #1149 (épopée #1147, vrai modèle 2 pools)

*Designer agent — maquettes + preuve before/after. Source de vérité du contenu = #1147 (matrice + copies + légende SLA). Aucune nouvelle teinte : on réutilise les tokens de niveau §MC.5 et les seuils §MC.3.*

### Design-system (additif, `docs/design/design-system.md`)
- **Nouvelle section §OF « Offres / Plans »** (OF.1 shell §UR.1 → OF.7 i18n) : grille 4 colonnes, `TierColumn`, formule actuelle mise en évidence, légende SLA, lien upgrade → `/offres`, états & a11y, namespace i18n `offers`.
- **Mise à jour additive §MC.3** : jauge à **2 indicateurs** (maintenance + évolutions), traitement « illimité », seuils conservés ; + note **page admin 2 pools** (sélecteur de pool sur le stepper §AG.3b, illimité non ajustable).

### 1. Page `/offres` (after — `offres-after.png` / `offres-mockup.html`)
**Atomic Design** : *page* `app/offres/page.tsx` sur le *template* §UR.1 (TopBar §7b.4 + bande sticky §TB.1, fil d'Ariane `← Mon compte`) → organism **`OffersGrid`** de molecules **`TierColumn`** + organism **`SlaLegend`**. Atomes réutilisés : `Badge` §v2.3, `Button` §7b.1, pastille-point `pdot`, barre 4-segments §MC.5.
- 4 colonnes **Démarrage 2 500 € · Maintenance 4 200 € · Évolutions 9 700 € · Pilotage 16 000 €**, accent = **token de niveau §MC.5** (slate / cyan `status-quality` / violet `status-spec` / emerald `brand-700`) — **aucune nouvelle couleur**.
- Chaque carte : prix/mois, tagline, **Maintenance** + **Évolutions** (« illimité » dans la couleur du niveau quand NULL), **Flux** (1/1/2/4), **1ʳᵉ livraison** (—/48 h/24 h/12 h), **Incident P1/P2/P3** (pastille `danger`/`warning`/`muted` + mot + délai — §SO.severity-map), ligne **humain/CTO**, bandeau **« + tout ce que contient {formule en dessous} »**, bullets **RUN/BUILD/PROTECT/ADVISE** (copie #1147), barre de progression, **CTA « Prendre rendez-vous »** par formule.
- **Formule actuelle** (OF.3) : bordure pleine + ombre teintée au niveau, **`Badge` « Formule actuelle »**, CTA en `solid`.
- **Légende « Comment lire les SLA »** (OF.4) : Réponse / Correctif livré / Première livraison / Flux + clé de sévérité P1/P2/P3, note prix fixe sans TJM / 100 % du code au client.
- **« Demander une mise à niveau »** (TierCard profil §MC.5 **et** admin) → **lien `next/link` vers `/offres`**, **plus de `mailto:`**.

### 2. Jauge profil à 2 indicateurs (after — `jauge-2-indicateurs.png` / `jauge-mockup.html`)
`CreditGauge` réutilisé/adapté, enveloppé par une molecule `CreditGauges` (deux anneaux côte à côte, **anneau SVG natif — pas recharts**). Trois cas démontrés :
- **Démarrage** = deux pools **finis** (100 maint / 10 évo) → deux anneaux pleins verts « Sain » (seuils §MC.3 inchangés).
- **Pool épuisé** → maintenance « Attention » (`warning-fg`), évolutions 0 % « Critique » (`danger-fg`) — indicateurs indépendants.
- **Illimité (NULL)** → anneau pointillé décoratif `brand-700`/55 %, centre **« ∞ illimité »**, pastille **neutre « illimité »** — **pas de %, pas de couleur « bas », jamais de faux rouge**.
- **Seuils conservés pour les pools finis** : vert > 50 % / orange < 30 % / rouge < 10 %. `aria-label` portant le verdict ou « illimité » (§7, jamais la couleur seule).

### Preuve before/after
- **`offres-after.png`** — page `/offres` complète. **`jauge-2-indicateurs.png`** — les 3 cas de la jauge. **`before-reconstruction.png`** — état actuel.
- **« Before » = reconstruction** (noté dans §OF/§MC.3) : **`/offres` est une page neuve** (n'existe pas) et l'app est derrière l'auth (non pilotable headless) → le before reconstruit l'état actuel = jauge **unique** (un seul pool, §MC.3 livré #1133) + bouton upgrade en **`mailto:`**. Captures via le daemon gstack `/browse`.

### i18n
Namespace **`offers`** (page) + ajouts au namespace **`account`** (jauge : `creditsMaintenance`, `creditsEvolutions`, `creditsUnlimited`, `creditsUncapped`, `creditsUnlimitedAria`). Toutes les clés dans **`en.ts` ET `fr.ts`** (vraie trad FR, placeholders ICU identiques, `Translated<typeof en>`). Copies de formule + bullets RUN/BUILD/PROTECT/ADVISE depuis #1147.

→ Transition **Spec → Design**.