Pipeliner Client

## Brief de design — Page admin Gestion des clients (Frontend)

**Stade :** Design (maquette HTML + preuve avant/après ci-jointes). Surface **frontend/admin uniquement** ; les endpoints backend du même ticket ne nécessitent pas de maquette. Section de design system ajoutée : **« Admin — Gestion des clients (AG) »** (`docs/design/design-system.md`, additive, après §MC).

### Atomic Design — réutiliser avant d'inventer (aucune nouvelle couleur, aucun nouvel atome)
- **Réutilisé** : `WorkspaceLayout`/TopBar §7b.4 + gating admin §AD.1 (non-admin → `/projects`, 401 → `/login`, 403 endpoints) ; contrat de **tableau §AD.3** ; atomes §7b.1 Button, §7b.2 TextInput, §6.1 pill, select §AD.4 ; **§TD.7 ConfirmDialog** (unique modale).
- **Référencé depuis #1143 (§MC) — pas dupliqué** : couleurs de tier §MC.5 (Démarrage slate `#475569` · Maintenance cyan `#0e7490` · Évolutions violet `#6d28d9` · Pilotage emerald `#047857`) ; seuils/verdicts crédits §MC.3 (`>50 %` Sain `success-fg`, `<30 %` Attention `warning-fg`, `<10 %` Critique `danger-fg`) ; règles signe/couleur historique §MC.6.
- **Nouveaux composants** : `ClientFilters` (molecule, AG.2), `ClientTable` (organism, AG.3), `TierSelect` (atome, AG.3a), `CreditStepper` (molecule, AG.3b), `ChangeHistoryPanel` + `ChangeHistoryRow` (organism, AG.5).

### Écrans / composants
- **Page « Gestion des clients »** (`/admin/clients`), grille `lg:grid-cols-[1.45fr_0.95fr]` : gauche = liste filtrable, droite = historique.
- **Barre de filtres** : recherche nom/e-mail (debounce, params backend) + filtre tier + compteur `{n} clients` (ICU plural).
- **Tableau filtrable** : colonnes **Client** (nom + e-mail mono) · **Tier** (dropdown éditable) · **Crédits restants** (montant coloré par seuil §MC.3 + pastille verdict) · **Ajuster** (stepper +/−).
- **Édition tier (AG.3a)** : select coloré au token de niveau, mutation persistée (`PATCH …/tier`) optimiste ; **§TD.7 ConfirmDialog** avant persistance car un changement de tier déclenche l'e-mail client (#1142).
- **Ajustement crédits (AG.3b)** : stepper `−|pas|+`, `PATCH …/credits {delta}`, optimiste, garde solde ≥ 0.
- **Historique consultable (AG.5)** : lecture seule — type (Tier/Crédits), client, ancien → nouveau, qui (`par {acteur}`, `· e-mail client envoyé` pour un tier), quand (`<time>` ISO) ; re-fetch après chaque mutation.

### États (empty / loading / error / populated)
- Tableau : skeleton §AD.3 · `Aucun client` / `Aucun client ne correspond à votre recherche.` · `role="alert"` + `Réessayer`.
- Tier : succès `Tier mis à jour` (`role="status"`) · erreur rollback `role="alert"`.
- Stepper : succès `Crédits ajustés` · solde→0 bouton `−` désactivé + hint `Le solde ne peut pas être négatif.` · erreur rollback.
- Historique : skeleton · `Aucune modification enregistrée.` · `role="alert"` + `Réessayer`.

### i18n
Namespace **`admin.clients`**, clés ajoutées dans **`en.ts` ET `fr.ts`** (vraie traduction FR, mêmes clés/placeholders ICU `{n} plural`, `{amount}`, `{verdict}`, `{client}`, `{actor}` — tsc via `Translated<typeof en>`). Échantillon complet dans §AG.8.

### Accessibilité (§7)
Jamais la couleur seule : tier en **mot** (nom de formule), verdict crédits en **mot** + montant, type historique en **mot** ; `<th scope="row">` sur le client ; cibles `+/−` ≥44px ; ConfirmDialog focus-trap/Esc=Annuler ; gardes via `disabled`+`title` ; `motion-safe:` partout.

### Preuve avant/après (jointe)
- **`design-1145-after.png`** = la maquette proposée (liste + édition tier + steppers crédits + panneau historique).
- **`design-1145-before.png`** = **reconstruction** de l'écran admin actuel (`/admin` = onboarding projet + vue d'ensemble projets, **aucune gestion clients/tier/crédits**). Le `/admin` est derrière l'auth (gating §AD.1) donc non pilotable headless — le « before » reconstruit fidèlement l'état actuel, ce n'est pas une capture live.
- **`design-1145-mockup.html`** = source HTML auto-portée de la maquette.

Transition **Spec → Design**. Le développement FE attend les endpoints admin de ce ticket.