chore: bump version to v0.1.77

## ERP-66 — Utilitaires adresse/téléphone + autocomplétion BAN

### feat
- **httpExternal** : client dédié aux API publiques externes (URL absolue, sans cookie de session, timeout). Seul point d'entrée autorisé pour un `$fetch` externe (règle frontend n°4).
- **useAddressAutocomplete** : implémentation BAN (api-adresse.data.gouv.fr) — recherche ville (`type=municipality`) et adresse, mapping GeoJSON, throw en cas d'erreur/timeout (mode dégradé côté composant). La recherche d'adresse n'impose **pas** `type=housenumber` (sinon 0 résultat tant qu'aucun numéro n'est saisi) — spec-front mise à jour.
- Tests Vitest : httpExternal, useAddressAutocomplete, cas limites `formatPhoneFR`.

### fix
- **ClientAddressBlock** : la rue courante est toujours réinjectée dans les options de `MalioInputAutocomplete` (computed, miroir de `cityOptions`). Corrige le champ Adresse qui se vidait après validation / à l'édition d'une adresse existante (valeur pourtant persistée). Test de montage ajouté.
- **useClientReferentials** : libellé des sites = numéro de département (2 premiers chiffres du code postal, déjà exposé par `/sites`) au lieu du nom.

### Vérifs
- ESLint ✅ · Vitest 196/196 ✅
- Changements 100% frontend (+ doc spec).

Reviewed-on: #52
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

README.md

@@ -1,209 +1,362 @@
 # Starseed
 
-CRM/ERP — Symfony 8 (API Platform 4) + Nuxt 4
+CRM/ERP en architecture **modular monolith DDD** — Symfony 8 (API Platform 4) + Nuxt 4.
+
+Le backend est la **source de vérité unique** : il décide des modules actifs et de
+l'organisation de la sidebar. Le frontend scanne `frontend/modules/*/` comme layers
+Nuxt et consomme l'API pour la navigation.
+
+---
+
+## Sommaire
+
+- [Stack](#stack)
+- [Prérequis](#prérequis)
+- [Démarrage rapide](#démarrage-rapide)
+- [Dev local : avec ou sans données de seed](#dev-local--avec-ou-sans-données-de-seed)
+- [Comptes (dev)](#comptes-dev)
+- [Bases de données : dev et test](#bases-de-données--dev-et-test)
+- [Tests](#tests)
+- [Déploiement : seed RBAC en recette / prod](#déploiement--seed-rbac-en-recette--prod)
+- [Commandes make](#commandes-make)
+- [Architecture](#architecture)
+- [Structure du dépôt](#structure-du-dépôt)
+- [CI/CD](#cicd)
+- [Conventions](#conventions)
+
+---
 
 ## Stack
 
 - **Backend** : PHP 8.4, Symfony 8, API Platform 4, Doctrine ORM, PostgreSQL 16
-- **Frontend** : Nuxt 4 (SPA), Vue 3, Pinia, Tailwind CSS, @malio/layer-ui
-- **Auth** : JWT HTTP-only cookie (Lexik)
+- **Frontend** : Nuxt 4 (SPA, SSR off), Vue 3, Pinia, Tailwind CSS, @malio/layer-ui, @nuxtjs/i18n
+- **Auth** : JWT HTTP-only cookie (Lexik), login sur `/login_check`
 - **Infra** : Docker Compose (dev + prod multi-stage)
 - **CI/CD** : Gitea Actions (auto-tag + build Docker)
 
-## Quick Start
+| Service       | Port |
+|---------------|------|
+| API (Nginx)   | 8083 |
+| Frontend dev  | 3004 |
+| PostgreSQL    | 5437 |
+
+---
+
+## Prérequis
+
+- Docker + Docker Compose
+- `make`
+- `nvm` (la version de Node est fixée par `.nvmrc`, voir `make node-use`)
+
+Toutes les commandes `make` s'exécutent dans le container PHP (`php-starseed-fpm`) ;
+rien n'est requis sur l'hôte hormis Docker — **sauf les tests E2E**, qui tournent sur
+l'hôte (navigateur réel, voir [Tests](#tests)).
+
+---
+
+## Démarrage rapide
 
 ```bash
-make start           # Demarrer les containers Docker
-make install         # Composer, migrations, fixtures, build Nuxt
+make start      # Démarre les containers Docker
+make install    # Composer + clés JWT + migrations + permissions + BDD de test
+make dev-nuxt   # Serveur Nuxt avec hot reload (http://localhost:3004)
 ```
 
-Dev frontend (hot reload) :
+`make install` prépare une base de dev **vierge** (schéma + RBAC structurel, sans
+données de démo) et la base de **test**. Pour obtenir des comptes et des données de
+démo prêtes à l'emploi, lis la section suivante.
+
+> Override local possible : `make` lit `infra/dev/.env.docker`, surchargé par
+> `infra/dev/.env.docker.local` s'il existe (créé automatiquement par `make env-init`).
+
+---
+
+## Dev local : avec ou sans données de seed
+
+Le projet distingue deux états de base de données de dev. Les **fixtures Doctrine sont
+en `require-dev`** : elles n'existent qu'en dev, jamais dans le build de prod.
+
+### Sans données de seed (base vierge)
+
+C'est ce que produit `make install`. La base contient :
+
+- le **schéma** complet (toutes les migrations jouées) ;
+- les **rôles système** `admin` / `user` (seedés en SQL par la migration RBAC) ;
+- le **catalogue de permissions** synchronisé (`app:sync-permissions`).
+
+Mais **aucun compte utilisateur ni donnée métier**. Pour pouvoir te connecter,
+crée toi-même un compte :
 
 ```bash
-make dev-nuxt        # Port 3003
+make shell
+php bin/console app:create-user admin monMotDePasse --admin   # compte ROLE_ADMIN
 ```
 
-## Ports
+Optionnel — provisionner les **rôles métier** (bureau / compta / commerciale / usine
++ matrice RBAC § 2.7) sans comptes de démo :
 
-| Service    | Port |
-|------------|------|
-| API (Nginx)| 8083 |
-| Frontend   | 3004 |
-| PostgreSQL | 5437 |
+```bash
+php bin/console app:seed-rbac
+```
 
-## Commandes
+Cet état est utile pour repartir d'une base propre, reproduire un bug sur données
+minimales, ou tester un parcours d'onboarding réel.
 
-| Commande | Description |
-|----------|-------------|
-| `make start` | Demarrer les containers |
-| `make stop` | Arreter les containers |
-| `make restart` | Redemarrer les containers |
-| `make install` | Install complet |
-| `make reset` | Tout supprimer et reinstaller |
-| `make dev-nuxt` | Serveur dev Nuxt (hot reload) |
-| `make shell` | Shell dans le container PHP |
-| `make cache-clear` | Vider le cache Symfony |
-| `make migration-migrate` | Lancer les migrations |
-| `make fixtures` | Charger les fixtures |
-| `make db-reset` | Reset BDD + migrations + fixtures |
-| `make test` | PHPUnit (tests back) |
-| `make nuxt-test` | Vitest (tests unitaires front) |
-| `make test-e2e` | Playwright (tests E2E front) |
-| `make test-e2e-ui` | Playwright UI interactive (debug) |
-| `make seed-e2e` | Seed les 6 personas E2E |
-| `make install-e2e-deps` | One-time : Chromium + libs systeme (sudo) |
-| `make php-cs-fixer-allow-risky` | Fix code style PHP |
-| `make logs-dev` | Tail logs Symfony |
+### Avec données de seed (base de démo)
+
+`make db-reset` (ou `make fixtures` après un `make install`) recharge la base de dev
+avec un jeu complet de données de démonstration, **idempotent** :
+
+```bash
+make db-reset   # ATTENTION : drop + recrée la base de dev, puis charge tout le seed
+```
+
+Ce que les fixtures posent :
+
+- **3 utilisateurs système** : `admin` (ROLE_ADMIN), `alice`, `bob` (ROLE_USER),
+  rattachés à des sites distincts ;
+- **3 sites** : Chatellerault, Saint-Jean, Pommevic ;
+- **les comptes de démo RBAC métier** (`bureau`, `compta`, `commerciale`, `usine`,
+  mot de passe `demo`) avec la matrice § 2.7 attachée ;
+- les **référentiels et données métier** des modules (catégories, clients de démo,
+  référentiels comptables…).
+
+Toutes les fixtures sont rejouables sans effet de bord (lookup par clé naturelle,
+aucun doublon).
+
+> Différence avec `make install` : `install` ne charge **pas** les fixtures sur la base
+> de dev (il alimente uniquement la base de test). Utilise `make db-reset` ou
+> `make fixtures` quand tu veux des données de démo en dev.
+
+---
+
+## Comptes (dev)
+
+Disponibles uniquement après `make db-reset` / `make fixtures` (état « avec seed ») :
+
+| Username      | Password | Rôle       | RBAC métier                                                   |
+|---------------|----------|------------|---------------------------------------------------------------|
+| `admin`       | `admin`  | ROLE_ADMIN | bypass complet (`is_admin`)                                   |
+| `alice`       | `alice`  | ROLE_USER  | —                                                             |
+| `bob`         | `bob`    | ROLE_USER  | —                                                             |
+| `bureau`      | `demo`   | ROLE_USER  | clients : view + manage                                       |
+| `compta`      | `demo`   | ROLE_USER  | clients : view + accounting.view / manage                     |
+| `commerciale` | `demo`   | ROLE_USER  | clients : view + manage (Information obligatoire — RG-1.04)   |
+| `usine`       | `demo`   | ROLE_USER  | aucun accès clients                                           |
+
+---
+
+## Bases de données : dev et test
+
+Deux bases distinctes vivent dans le **même container PostgreSQL** (port 5437) :
+
+| Base       | Environnement | Construite par                       | Usage                          |
+|------------|---------------|--------------------------------------|--------------------------------|
+| `<db>`      | `dev`         | `make install` / `make db-reset`     | développement manuel, dev-nuxt |
+| `<db>_test` | `test`        | `make test-db-setup`                 | PHPUnit (jamais touchée à la main) |
+
+Le suffixe `_test` est appliqué **automatiquement** par Doctrine quand `APP_ENV=test`
+(config `when@test` dans `config/packages/doctrine.yaml`). La base de test est donc
+totalement **isolée** de la base de dev : lancer `make test` ne touche jamais tes
+données de dev.
+
+`make test-db-setup` fait davantage que jouer les migrations, car certaines structures
+ne sont pas portées par des migrations « métier » :
+
+1. `doctrine:migrations:migrate` — schéma métier réel ;
+2. `doctrine:schema:update --force` — crée les tables mappées en `when@test`
+   uniquement (entités de test) ;
+3. `app:apply-column-comments` — réapplique les `COMMENT ON COLUMN` que
+   `schema:update` efface sur les tables managées par l'ORM (garde-fou
+   `ColumnsHaveSqlCommentTest`) ;
+4. `fixtures:load` → `sync-permissions` → `seed-rbac` — dans cet ordre précis
+   (le purger des fixtures vide la table `permission`, donc la sync passe après) ;
+5. recréation des **index partiels uniques** (`LOWER(...) WHERE ...`) non exprimables
+   en attributs ORM, indispensables aux tests d'unicité (RG-1.07, RG-1.16, RG-1.03/1.29).
+
+`make install` et `make db-reset` appellent déjà `test-db-setup` : tu n'as à le
+relancer à la main que si la base de test diverge (nouvelle migration, nouvelle
+permission) sans vouloir reseed la base de dev.
+
+---
 
 ## Tests
 
-- **Back** : `make test` (PHPUnit). Fixtures dediees sous `tests/Fixtures/`.
-- **Front unitaire** : `make nuxt-test` (Vitest, happy-dom). Composables, utils, stores — rapide, <30s.
-- **Front E2E** : `make test-e2e` (Playwright). Couvre login + matrice RBAC sidebar. Suite volontairement minimaliste (11 tests) — voir la regle d'or dans `CLAUDE.md`.
+| Suite             | Commande         | Outil                | Où                                |
+|-------------------|------------------|----------------------|-----------------------------------|
+| Back              | `make test`      | PHPUnit              | container PHP, base `<db>_test`   |
+| Front unitaire    | `make nuxt-test` | Vitest (happy-dom)   | container Node, < 30 s            |
+| Front E2E         | `make test-e2e`  | Playwright           | **hôte** (navigateur réel requis) |
+| Tout (back+front) | `make test-all`  | PHPUnit + Vitest     | —                                 |
+
+### Tests back (PHPUnit)
 
-**Bootstrap E2E (une fois par poste)** :
 ```bash
-make install-e2e-deps   # Telecharge Chromium + libs systeme via apt (sudo)
+make test                       # toute la suite
+make test FILES=tests/Module/Commercial   # un dossier / fichier ciblé
 ```
 
-**Workflow E2E** :
+PHPUnit force `APP_ENV=test` (`phpunit.dist.xml`) : les tests tournent **toujours**
+sur la base `<db>_test`, jamais sur la base de dev. Prérequis : que la base de test
+existe — c'est le cas après `make install`. Si elle a divergé, rejoue
+`make test-db-setup` (cf. [Bases de données](#bases-de-données--dev-et-test)).
+
+### Tests front unitaires (Vitest)
+
 ```bash
-# Terminal 1 : containers + dev server
+make nuxt-test   # composables, utils, stores — rapide et stable
+```
+
+C'est la **place par défaut** pour étendre la couverture (cf. règle d'or ci-dessous).
+
+### Tests E2E (Playwright)
+
+Suite volontairement minimaliste (login + matrice RBAC sidebar). **Règle d'or : un
+nouveau test E2E ne s'ajoute que si un bug critique est passé en prod** — sinon,
+préférer un test Vitest ou étendre un persona existant.
+
+Bootstrap (une fois par poste) :
+
+```bash
+make install-e2e-deps   # télécharge Chromium + libs système (apt/dnf, sudo)
+```
+
+Workflow :
+
+```bash
+# Terminal 1 — containers, seed des personas, serveur dev
 make start && make seed-e2e && make dev-nuxt
 
-# Terminal 2 : tests
-make test-e2e
+# Terminal 2 — tests
+make test-e2e            # headless
+make test-e2e-ui         # UI interactive (debug)
 ```
 
+> Toute permission testable touche **3 miroirs** à garder alignés : `config/sidebar.php`,
+> `frontend/tests/e2e/_fixtures/personas.ts`, `SeedE2ECommand.php`.
+
+---
+
+## Déploiement : seed RBAC en recette / prod
+
+Les fixtures Doctrine étant en `require-dev`, elles sont **absentes du build de prod**.
+Le RBAC métier (rôles `bureau` / `compta` / `commerciale` / `usine` + matrice § 2.7)
+est seedé par une **commande applicative idempotente**, jouée dans l'étape de release,
+**après** les migrations et la synchronisation des permissions :
+
+```bash
+php bin/console doctrine:migrations:migrate --no-interaction
+php bin/console app:sync-permissions      # pose les permissions (commercial.clients.*, …)
+php bin/console app:seed-rbac             # PROD : rôles + matrice § 2.7 (sans comptes démo)
+```
+
+En **recette / staging**, ajouter le flag pour disposer de logins de test. Le mot de
+passe est fourni **explicitement** (jamais en dur, jamais committé) :
+
+```bash
+php bin/console app:seed-rbac --with-demo-users --password='<mot-de-passe>'
+# ou via la variable d'environnement RBAC_DEMO_PASSWORD
+```
+
+La commande est rejouable sans effet de bord (aucun doublon de rôle, de lien ou de
+compte). Pour créer un premier administrateur en prod :
+
+```bash
+php bin/console app:create-user <username> <password> --admin
+```
+
+---
+
+## Commandes make
+
+`make` (sans argument) ou `make help` affiche l'aide colorée. Les principales :
+
+| Commande                       | Description                                              |
+|--------------------------------|----------------------------------------------------------|
+| `make start` / `stop` / `restart` | Cycle de vie des containers                          |
+| `make install`                 | Install complet (base dev vierge + base de test)         |
+| `make reset`                   | Tout supprimer et réinstaller (**drop la BDD**)          |
+| `make dev-nuxt`                | Serveur Nuxt hot reload (port 3004)                      |
+| `make shell` / `shell-root`    | Shell bash dans le container PHP                         |
+| `make migration-migrate`       | Jouer les migrations Doctrine                            |
+| `make fixtures`                | Charger les fixtures (données de démo dev)               |
+| `make sync-permissions`        | Synchroniser le catalogue RBAC                           |
+| `make seed-rbac`               | Seed RBAC métier (rôles + matrice § 2.7)                 |
+| `make db-reset`                | Reset base dev : drop + migrate + fixtures + RBAC        |
+| `make test-db-setup`           | (Re)construire la base de test                           |
+| `make test`                    | PHPUnit (back)                                           |
+| `make nuxt-test`               | Vitest (front unitaire)                                  |
+| `make test-all`                | PHPUnit + Vitest                                         |
+| `make test-e2e` / `test-e2e-ui`| Playwright (E2E, sur l'hôte)                             |
+| `make seed-e2e`                | Seed des 6 personas E2E                                  |
+| `make php-cs-fixer-allow-risky`| Fix du code style PHP                                    |
+| `make php-cs-fixer-check`      | Dry-run du fixer (CI / avant push)                       |
+| `make logs-dev`                | Tail des logs Symfony                                    |
+
+---
+
 ## Architecture
 
-**Modular Monolith DDD** : chaque module est un bounded context autonome, activable/desactivable par tenant. Le backend est la seule source de verite pour l'activation et l'organisation de la sidebar.
+**Modular Monolith DDD** : chaque module est un bounded context autonome,
+activable / désactivable par tenant. Le backend est la seule source de vérité pour
+l'activation des modules et l'organisation de la sidebar.
 
 - `config/modules.php` — liste des modules actifs
 - `config/sidebar.php` — structure de la sidebar (sections + items avec module owner)
-- `GET /api/sidebar` — retourne les sections filtrees par les modules actifs + les routes desactivees
-- Frontend : chaque `frontend/modules/*/` est auto-detecte comme layer Nuxt, la sidebar est fetchee de l'API
+- `GET /api/modules` — IDs des modules actifs (public)
+- `GET /api/sidebar` — sections filtrées par modules actifs + routes désactivées (public)
 
-Pour desactiver un module : commenter sa ligne dans `config/modules.php`, clear cache. Ses items de sidebar disparaissent et ses routes sont bloquees par le middleware front.
+**Désactiver un module** : commenter sa ligne dans `config/modules.php`, vider le cache.
+Ses items de sidebar disparaissent et ses routes sont bloquées par le middleware front.
+Le code reste dans le bundle (layer auto-détecté) → réactivation instantanée.
 
-Pour reorganiser la sidebar (ex: deplacer un item d'une section a l'autre) : editer `config/sidebar.php` uniquement, le code des modules n'est pas touche.
+**Réorganiser la sidebar** : éditer `config/sidebar.php` uniquement — le code des
+modules n'est pas touché.
 
-## Structure
+**Communication inter-modules** : jamais d'import direct d'un module à l'autre. Passer
+par `Shared/Domain/Contract/` (interfaces) ou des domain events.
+
+---
+
+## Structure du dépôt
 
 ```
 src/                              # Backend Symfony
-  Kernel.php
-  Shared/                         # Noyau technique partage
-    Domain/
-      ValueObject/                # Email, ...
-      Event/                      # DomainEventInterface
-      Contract/                   # Interfaces inter-modules
-    Application/
-      Bus/                        # CommandBusInterface, QueryBusInterface
-    Infrastructure/
-      ApiPlatform/
-        Resource/                 # AppVersion, ModulesResource, SidebarResource
-        State/                    # AppVersionProvider, ModulesProvider, SidebarProvider
+  Shared/                         # Noyau technique partagé (Domain/, Application/Bus/, Infrastructure/ApiPlatform/)
   Module/
-    Core/                         # Module obligatoire (auth, users)
-      CoreModule.php              # Declaration (ID, LABEL, REQUIRED)
-      Domain/
-        Entity/                   # User
-        Repository/               # UserRepositoryInterface
-        Event/                    # UserCreated
-      Application/
-        DTO/                      # UserOutput
-      Infrastructure/
-        Doctrine/                 # DoctrineUserRepository, Migrations/
-        ApiPlatform/State/
-          Provider/               # MeProvider
-          Processor/              # UserPasswordHasherProcessor
-        Console/                  # CreateUserCommand
-        DataFixtures/             # AppFixtures
-    Commercial/                   # Autre module (exemple)
-      CommercialModule.php
+    Core/                         # Module obligatoire (auth, users, RBAC)
+      CoreModule.php              # Déclaration (ID, LABEL, REQUIRED, permissions())
+      Domain/ Application/ Infrastructure/
+    Commercial/ Catalog/ Sites/   # Modules métier
 config/
-  modules.php                     # Source de verite activation
-  sidebar.php                     # Source de verite navigation
-  version.yaml
-  packages/                       # Config Symfony
-  jwt/                            # Cles JWT
-migrations/                       # Anciennes migrations
+  modules.php                     # Source de vérité : activation
+  sidebar.php                     # Source de vérité : navigation
+  packages/                       # Config Symfony (doctrine, api_platform, security…)
+migrations/                       # Migrations d'initialisation (namespace racine : setup, RBAC, seed de base)
 frontend/                         # App Nuxt 4 (SPA)
-  app/
-    layouts/                      # default.vue, auth.vue
-    middleware/                   # auth.global.ts, modules.global.ts
-  shared/                         # Code partage (hors modules)
-    composables/                  # useApi, useAppVersion, useSidebar
-    components/ui/                # AppTopNav, ...
-    stores/                       # auth, ui
-    services/                     # auth
-    types/                        # SidebarSection, UserData
-    utils/                        # api (Hydra)
-  modules/                        # Modules auto-detectes comme layers Nuxt
-    core/
-      nuxt.config.ts              # Marqueur layer
-      pages/                      # index, login, logout
-    commercial/
-      nuxt.config.ts
-      pages/                      # commercial.vue
-  app.vue
-  nuxt.config.ts                  # Scanne modules/*/ automatiquement
-  i18n/locales/                   # Traductions (sidebar.*, etc.)
-  assets/                         # CSS, images
-  public/                         # Fichiers statiques
+  app/                            # Shell : layouts, middlewares (auth.global, modules.global)
+  shared/                         # Code inter-modules (composables, stores, utils, types)
+  modules/                        # Layers Nuxt auto-détectés (core/, commercial/…)
+  i18n/locales/                   # Traductions (sidebar.*, audit.entity.*, …)
 infra/
-  dev/                            # Docker dev (Dockerfile, nginx, php.ini, xdebug)
+  dev/                            # Docker dev (Dockerfile, nginx, php.ini, xdebug, .env.docker)
   prod/                           # Docker prod (multi-stage, nginx, php-prod.ini)
 .gitea/workflows/                 # CI Gitea (auto-tag, build Docker)
-.claude/
-  skills/create-module/           # Skill Claude Code pour scaffolder un module
 ```
 
+---
+
 ## CI/CD
 
 - **Auto Tag** : push sur `develop` → bump `config/version.yaml` → tag `vX.Y.Z`
 - **Build Docker** : push tag `v*` → build image multi-stage → push Gitea Registry
 
 Secrets requis dans Gitea :
+
 - `RELEASE_TOKEN` — PAT avec droits `write:repository`
 - `REGISTRY_TOKEN` — token pour le registry Docker
 
-## Déploiement — seed RBAC (recette / prod)
-
-Le RBAC métier (rôles `bureau` / `compta` / `commerciale` / `usine` + matrice § 2.7)
-est seedé par une **commande applicative idempotente** (présente dans le build prod,
-contrairement aux fixtures Doctrine en `require-dev`). À jouer dans l'étape de release,
-**après** les migrations et la synchronisation des permissions :
-
-```bash
-php bin/console doctrine:migrations:migrate --no-interaction
-php bin/console app:sync-permissions          # pose les permissions commercial.clients.*
-php bin/console app:seed-rbac                  # PROD : rôles + matrice § 2.7 (sans comptes démo)
-```
-
-En **recette / staging**, ajouter le flag pour disposer de logins de test (mot de passe
-fourni explicitement, jamais en dur) :
-
-```bash
-php bin/console app:seed-rbac --with-demo-users --password='<mot-de-passe>'
-# ou via la variable d'env RBAC_DEMO_PASSWORD
-```
-
-La commande est rejouable sans effet de bord (aucun doublon de rôle, de lien ou de compte).
-En dev, `make db-reset` produit le même résultat (rôles + matrice + comptes démo).
-
-## Credentials (dev)
-
-| Username | Password | Role | RBAC métier |
-|----------|----------|------|-------------|
-| admin | admin | ROLE_ADMIN | bypass (is_admin) |
-| alice | alice | ROLE_USER | — |
-| bob | bob | ROLE_USER | — |
-| bureau | demo | ROLE_USER | clients : view + manage |
-| compta | demo | ROLE_USER | clients : view + accounting.view/manage |
-| commerciale | demo | ROLE_USER | clients : view + manage (Information obligatoire — RG-1.04) |
-| usine | demo | ROLE_USER | aucun accès clients |
+---
 
 ## Conventions
 
@@ -213,4 +366,13 @@ En dev, `make db-reset` produit le même résultat (rôles + matrice + comptes d
 <type>(<scope optionnel>) : <message>
 ```
 
-Types : `build`, `chore`, `ci`, `docs`, `feat`, `fix`, `perf`, `refactor`, `revert`, `style`, `test`
+Espaces obligatoires autour du `:`. Types : `build`, `chore`, `ci`, `docs`, `feat`,
+`fix`, `perf`, `refactor`, `revert`, `style`, `test`.
+
+### Langue
+
+- UI et communication : **français**
+- Code (classes, méthodes, variables) : **anglais**
+- Commentaires (PHP, TS, Vue) : **français**
+
+> Règles détaillées : `CLAUDE.md` et `.claude/rules/`.

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.74'
+    app.version: '0.1.77'

docs/specs/M1-clients/spec-front.md

@@ -258,7 +258,8 @@ Le composant `Code postal` + `Ville` + `Adresse` est branché sur **api-adresse.
 
 - Composable dédié `useAddressAutocomplete()` (à créer en M1).
 - Appel HTTP **direct depuis le front** (CORS OK), pas de proxy back.
-- Pattern : à la saisie du code postal (5 chiffres), GET `https://api-adresse.data.gouv.fr/search/?q={cp}&type=municipality` → alimente le select Ville. Sur saisie d'adresse : `?q={addr}&postcode={cp}&type=housenumber` → suggestions adresse.
+- Pattern : à la saisie du code postal (5 chiffres), GET `https://api-adresse.data.gouv.fr/search/?q={cp}&type=municipality` → alimente le select Ville. Sur saisie d'adresse : `?q={addr}&postcode={cp}` (sans filtre `type`) → suggestions adresse.
+    - ⚠ **Ne pas forcer `type=housenumber`** sur la recherche d'adresse (corrigé en ERP-66) : la BAN ne renvoie un résultat de ce type qu'une fois un numéro saisi, donc une recherche par nom de rue (« boulevard du port ») renverrait **0 résultat** pendant toute la frappe. Sans filtre `type`, la BAN classe rues + numéros par pertinence — comportement d'autocomplétion attendu.
 - Cas dégradé : si l'API ne répond pas (offline, timeout), le champ Ville devient un `<MalioInputText>` libre éditable + toast d'avertissement. Validation serveur acceptera la saisie libre.
 
 ## Points laissés ouverts par la V0 (résolus côté back)

frontend/i18n/locales/fr.json

@@ -10,7 +10,11 @@
         "confirm": "Confirmer",
         "yes": "Oui",
         "no": "Non",
-        "actions": "Actions"
+        "actions": "Actions",
+        "comingSoon": {
+            "title": "En cours de dev",
+            "subtitle": "Cette fonctionnalité arrive bientôt."
+        }
     },
     "sidebar": {
         "administration": {
@@ -95,8 +99,6 @@
                 "back": "Retour au répertoire",
                 "loading": "Chargement du client…",
                 "notFound": "Client introuvable.",
-                "emptyContacts": "Aucun contact enregistré.",
-                "emptyAddresses": "Aucune adresse enregistrée.",
                 "confirmArchive": {
                     "title": "Archiver le client",
                     "message": "Ce client n'apparaîtra plus dans le répertoire actif. Confirmer l'archivage ?"
@@ -111,8 +113,6 @@
                 "back": "Retour au répertoire",
                 "loading": "Chargement du client…",
                 "notFound": "Client introuvable.",
-                "emptyContacts": "Aucun contact enregistré.",
-                "emptyAddresses": "Aucune adresse enregistrée.",
                 "save": "Valider"
             },
             "validation": {

frontend/modules/commercial/components/ClientAddressBlock.vue

@@ -201,7 +201,8 @@ const model = computed(() => props.modelValue)
 const degraded = ref(false)
 // Villes proposees par la BAN (alimentees a la saisie du code postal).
 const banCityOptions = ref<RefOption[]>([])
-const addressOptions = ref<RefOption[]>([])
+// Adresses proposees par la BAN (alimentees a la saisie d'adresse).
+const banAddressOptions = ref<RefOption[]>([])
 
 // Options ville effectives : on garantit que la ville courante figure toujours
 // dans la liste, sinon MalioSelect (qui resout le libelle depuis ses options)
@@ -214,6 +215,20 @@ const cityOptions = computed<RefOption[]>(() => {
     }
     return banCityOptions.value
 })
+
+// Meme garantie que cityOptions pour le champ Adresse : la rue courante doit
+// toujours figurer dans les options, sinon MalioInputAutocomplete (qui resout
+// l'affichage depuis ses options) laisse le champ VIDE des que la liste de
+// suggestions BAN est vide — typiquement juste apres validation (remontage) ou
+// a l'edition d'une adresse existante (1.12), alors que la valeur est bien
+// persistee. On reinjecte donc la rue liee si la BAN ne l'a pas (re)proposee.
+const addressOptions = computed<RefOption[]>(() => {
+    const current = props.modelValue.street
+    if (current && !banAddressOptions.value.some(o => o.value === current)) {
+        return [{ value: current, label: current }, ...banAddressOptions.value]
+    }
+    return banAddressOptions.value
+})
 const addressLoading = ref(false)
 // Conserve les suggestions d'adresse pour retrouver ville/CP au moment du select.
 let lastAddressSuggestions: AddressSuggestion[] = []
@@ -280,7 +295,7 @@ async function onAddressSearch(query: string): Promise<void> {
         const postalCode = (model.value.postalCode ?? '').replace(/\D/g, '') || undefined
         const suggestions = await autocomplete.searchAddress(query, postalCode)
         lastAddressSuggestions = suggestions
-        addressOptions.value = suggestions.map(s => ({ value: s.street, label: s.label }))
+        banAddressOptions.value = suggestions.map(s => ({ value: s.street, label: s.label }))
     }
     catch {
         enterDegraded()

frontend/modules/commercial/components/TabPlaceholderBlank.vue

@@ -1,14 +0,0 @@
-<template>
-    <!--
-        Placeholder des onglets non encore implementes (Transport, Statistiques,
-        Rapports, Echanges). Frame vide blanche : aucun champ, aucun bouton,
-        aucun message « En cours » (decision Tristan 28/05). L'orchestrateur passe
-        automatiquement a l'onglet suivant — ce composant n'est qu'une coquille
-        visuelle reutilisee par 1.11/1.12.
-    -->
-    <div class="min-h-[240px] rounded-md bg-white" />
-</template>
-
-<script setup lang="ts">
-// Composant purement presentationnel : aucune prop, aucun event.
-</script>

frontend/modules/commercial/components/__tests__/ClientAddressBlock.spec.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, ref, computed } from 'vue'
+import { emptyAddress } from '~/modules/commercial/types/clientForm'
+import ClientAddressBlock from '../ClientAddressBlock.vue'
+
+// Le composable BAN est mocke : aucun appel reseau, aucune suggestion chargee.
+// On reproduit ainsi l'etat « adresse persistee, mais liste de suggestions
+// vide » (remontage apres validation / edition d'une adresse existante).
+vi.mock('~/shared/composables/useAddressAutocomplete', () => ({
+    useAddressAutocomplete: () => ({
+        searchCity: vi.fn(),
+        searchAddress: vi.fn(),
+    }),
+}))
+
+// Auto-imports Nuxt/Vue utilises sans import explicite par le composant.
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+vi.stubGlobal('ref', ref)
+vi.stubGlobal('computed', computed)
+
+// Stub de MalioInputAutocomplete : expose les `value` des options recues, pour
+// verifier que la rue courante figure bien dans la liste (sinon le composant
+// Malio ne peut pas resoudre/afficher la valeur liee -> champ vide).
+const MalioInputAutocompleteStub = defineComponent({
+    name: 'MalioInputAutocomplete',
+    props: {
+        modelValue: { type: [String, Number, null], default: undefined },
+        options: { type: Array as () => { value: string | number, label: string }[], default: () => [] },
+        loading: { type: Boolean, default: false },
+        minSearchLength: { type: Number, default: 0 },
+        label: { type: String, default: '' },
+        readonly: { type: Boolean, default: false },
+    },
+    emits: ['update:modelValue', 'search', 'select'],
+    setup(props) {
+        return () => h('div', {
+            'data-testid': 'addr-autocomplete',
+            'data-options': JSON.stringify(props.options.map(o => o.value)),
+        })
+    },
+})
+
+function mountBlock(street: string | null) {
+    return mount(ClientAddressBlock, {
+        props: {
+            modelValue: { ...emptyAddress(), street },
+            title: 'Adresse',
+            categoryOptions: [],
+            siteOptions: [],
+            contactOptions: [],
+            countryOptions: [],
+        },
+        global: {
+            stubs: {
+                MalioButtonIcon: true,
+                MalioCheckbox: true,
+                MalioSelect: true,
+                MalioSelectCheckbox: true,
+                MalioInputText: true,
+                MalioInputAutocomplete: MalioInputAutocompleteStub,
+            },
+        },
+    })
+}
+
+describe('ClientAddressBlock — affichage de l\'adresse persistee', () => {
+    it('inclut la rue courante dans les options de l\'autocomplete meme sans recherche BAN', () => {
+        const wrapper = mountBlock('8 Boulevard du Port')
+
+        const el = wrapper.find('[data-testid="addr-autocomplete"]')
+        const values = JSON.parse(el.attributes('data-options') ?? '[]')
+
+        expect(values).toContain('8 Boulevard du Port')
+    })
+})

frontend/modules/commercial/composables/useClientReferentials.ts

@@ -45,6 +45,7 @@ interface CategoryMember extends HydraMember {
 
 interface SiteMember extends HydraMember {
     name: string
+    postalCode: string
 }
 
 interface ReferentialMember extends HydraMember {
@@ -101,7 +102,10 @@ export function useClientReferentials() {
             fetchAll<CategoryMember>('/categories')
                 .then((cats) => { categories.value = cats.map(c => ({ value: c['@id'], label: c.name, code: c.code })) }),
             fetchAll<SiteMember>('/sites')
-                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: s.name })) }),
+                // Libelle = numero de departement (2 premiers chiffres du code
+                // postal du site), ex: 86100 -> « 86 ». Le code postal est deja
+                // expose par /sites (groupe site:read) — aucune colonne a ajouter.
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2) })) }),
             fetchAll<ReferentialMember>('/tva_modes')
                 .then((tva) => { tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label })) }),
             fetchAll<ReferentialMember>('/payment_delays')

frontend/modules/commercial/pages/clients/[id]/edit.vue

@@ -179,9 +179,6 @@
                             @update:model-value="(v) => contacts[index] = v"
                             @remove="askRemoveContact(index)"
                         />
-                        <p v-if="contacts.length === 0" class="text-center text-black/60">
-                            {{ t('commercial.clients.edit.emptyContacts') }}
-                        </p>
                         <div v-if="!businessReadonly" class="flex justify-center gap-6">
                             <MalioButton
                                 variant="secondary"
@@ -219,9 +216,6 @@
                             @remove="askRemoveAddress(index)"
                             @degraded="onAddressDegraded"
                         />
-                        <p v-if="addresses.length === 0" class="text-center text-black/60">
-                            {{ t('commercial.clients.edit.emptyAddresses') }}
-                        </p>
                         <div v-if="!businessReadonly" class="flex justify-center gap-6">
                             <MalioButton
                                 variant="secondary"
@@ -245,7 +239,7 @@
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
                         <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="accounting.siren"
                                     :label="t('commercial.clients.form.accounting.siren')"
@@ -312,7 +306,7 @@
                                 v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
                                 @click="askRemoveRib(index)"
                             />
-                            <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="rib.label"
                                     :label="t('commercial.clients.form.accounting.ribLabel')"
@@ -350,10 +344,10 @@
                 </template>
 
                 <!-- Onglets non encore implementes : frame vide (navigation libre). -->
-                <template #transport><TabPlaceholderBlank /></template>
-                <template #statistics><TabPlaceholderBlank /></template>
-                <template #reports><TabPlaceholderBlank /></template>
-                <template #exchanges><TabPlaceholderBlank /></template>
+                <template #transport><ComingSoonPlaceholder /></template>
+                <template #statistics><ComingSoonPlaceholder /></template>
+                <template #reports><ComingSoonPlaceholder /></template>
+                <template #exchanges><ComingSoonPlaceholder /></template>
             </MalioTabList>
         </template>
 
@@ -495,6 +489,11 @@ function hydrate(detail: ClientDetail): void {
     contacts.value = (detail.contacts ?? []).map(mapContactToDraft)
     addresses.value = (detail.addresses ?? []).map(mapAddressToDraft)
     ribs.value = (detail.ribs ?? []).map(mapRibToDraft)
+    // Chaque bloc reste visible meme vide : si une collection est vide, on amorce
+    // un bloc vierge (non persiste tant qu'incomplet — cf. submit*/canValidate*).
+    if (contacts.value.length === 0) contacts.value.push(emptyContact())
+    if (addresses.value.length === 0) addresses.value.push(emptyAddress())
+    if (ribs.value.length === 0) ribs.value.push(emptyRib())
     // Charge les listes distributeur / courtier si une relation est deja posee.
     if (main.relationType === 'distributeur') referentials.loadDistributors().catch(() => {})
     if (main.relationType === 'courtier') referentials.loadBrokers().catch(() => {})
@@ -694,6 +693,8 @@ function askRemoveContact(index: number): void {
         const removed = contacts.value[index]
         if (removed?.id != null) removedContactIds.value.push(removed.id)
         contacts.value.splice(index, 1)
+        // Garde au moins un bloc visible (cf. amorce a l'hydratation).
+        if (contacts.value.length === 0) contacts.value.push(emptyContact())
     })
 }
 
@@ -742,7 +743,9 @@ const canValidateAddresses = computed(() =>
     addresses.value.length > 0
     && addresses.value.every((a) => {
         const filledBillingEmail = a.billingEmail !== null && a.billingEmail.trim() !== ''
-        return a.siteIris.length >= 1 && (!isBillingEmailRequired(a) || filledBillingEmail)
+        return a.siteIris.length >= 1
+            && a.categoryIris.length >= 1
+            && (!isBillingEmailRequired(a) || filledBillingEmail)
     }),
 )
 
@@ -755,6 +758,8 @@ function askRemoveAddress(index: number): void {
         const removed = addresses.value[index]
         if (removed?.id != null) removedAddressIds.value.push(removed.id)
         addresses.value.splice(index, 1)
+        // Garde au moins un bloc visible (cf. amorce a l'hydratation).
+        if (addresses.value.length === 0) addresses.value.push(emptyAddress())
     })
 }
 
@@ -833,6 +838,8 @@ function askRemoveRib(index: number): void {
         const removed = ribs.value[index]
         if (removed?.id != null) removedRibIds.value.push(removed.id)
         ribs.value.splice(index, 1)
+        // Garde au moins un bloc RIB visible (cf. amorce a l'hydratation).
+        if (ribs.value.length === 0) ribs.value.push(emptyRib())
     })
 }
 

frontend/modules/commercial/pages/clients/[id]/index.vue

@@ -159,9 +159,6 @@
                             :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
                             readonly
                         />
-                        <p v-if="contacts.length === 0" class="text-center text-black/60">
-                            {{ t('commercial.clients.consultation.emptyContacts') }}
-                        </p>
                     </div>
                 </template>
 
@@ -174,14 +171,11 @@
                             :model-value="view.draft"
                             :title="t('commercial.clients.form.address.title', { n: index + 1 })"
                             :category-options="view.categoryOptions"
-                            :site-options="view.siteOptions"
+                            :site-options="allSiteOptions"
                             :contact-options="contactOptions"
                             :country-options="countryOptions"
                             readonly
                         />
-                        <p v-if="addressViews.length === 0" class="text-center text-black/60">
-                            {{ t('commercial.clients.consultation.emptyAddresses') }}
-                        </p>
                     </div>
                 </template>
 
@@ -189,7 +183,7 @@
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
                         <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     :model-value="accounting.siren"
                                     :label="t('commercial.clients.form.accounting.siren')"
@@ -244,7 +238,7 @@
                             :key="rib.id ?? index"
                             class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
                         >
-                            <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     :model-value="rib.label"
                                     :label="t('commercial.clients.form.accounting.ribLabel')"
@@ -266,10 +260,10 @@
                 </template>
 
                 <!-- Onglets non encore implementes : frame vide (navigation libre). -->
-                <template #transport><TabPlaceholderBlank /></template>
-                <template #statistics><TabPlaceholderBlank /></template>
-                <template #reports><TabPlaceholderBlank /></template>
-                <template #exchanges><TabPlaceholderBlank /></template>
+                <template #transport><ComingSoonPlaceholder /></template>
+                <template #statistics><ComingSoonPlaceholder /></template>
+                <template #reports><ComingSoonPlaceholder /></template>
+                <template #exchanges><ComingSoonPlaceholder /></template>
             </MalioTabList>
         </template>
 
@@ -320,6 +314,7 @@ import {
     type SelectOption,
 } from '~/modules/commercial/utils/clientConsultation'
 import { formatPhoneFR } from '~/shared/utils/phone'
+import { emptyAddress, emptyContact, emptyRib } from '~/modules/commercial/types/clientForm'
 
 // Masques d'affichage (purement visuels, la donnee reste celle du serveur).
 const PHONE_MASK = '## ## ## ## ##'
@@ -330,6 +325,7 @@ const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const { can, canAny } = usePermissions()
+const authStore = useAuthStore()
 
 // Gating de la route : la consultation exige `view`. Usine (sans view) est
 // redirige vers le repertoire (lui-meme protege). Cf. matrice § 2.7.
@@ -372,10 +368,21 @@ const information = computed(() => ({
     directorName: client.value?.directorName ?? null,
 }))
 
-const contacts = computed(() => (client.value?.contacts ?? []).map(mapContactToDraft))
+// Chaque bloc reste visible meme vide en consultation : si la collection est
+// vide, on affiche un bloc vierge en lecture seule (pas de message « Aucun … »).
+const contacts = computed(() => {
+    const list = (client.value?.contacts ?? []).map(mapContactToDraft)
+    return list.length ? list : [emptyContact()]
+})
 // Vue par adresse : brouillon + options (sites/categories) propres a l'adresse.
-const addressViews = computed(() => (client.value?.addresses ?? []).map(mapAddressView))
-const ribs = computed(() => (client.value?.ribs ?? []).map(mapRibToDraft))
+const addressViews = computed(() => {
+    const views = (client.value?.addresses ?? []).map(mapAddressView)
+    return views.length ? views : [{ draft: emptyAddress(), siteOptions: [], categoryOptions: [] }]
+})
+const ribs = computed(() => {
+    const list = (client.value?.ribs ?? []).map(mapRibToDraft)
+    return list.length ? list : [emptyRib()]
+})
 // Draft comptable (tout null si l'utilisateur n'a pas accounting.view).
 const accounting = computed(() => mapAccountingDraft(client.value ?? ({} as ClientDetail)))
 
@@ -385,6 +392,18 @@ const accounting = computed(() => mapAccountingDraft(client.value ?? ({} as Clie
 const mainCategoryOptions = computed(() => categoryOptionsOf(client.value?.categories))
 const contactOptions = computed(() => contactOptionsOf(client.value?.contacts))
 
+// Liste COMPLETE des sites disponibles, issue de /api/me (groupe me:read — donc
+// pas de 403 pour les roles metier, contrairement a GET /sites). Libelle = numero
+// de departement (2 premiers chiffres du code postal). Permet d'afficher TOUJOURS
+// toutes les cases « Sites » (86 / 17 / 82) dans le bloc adresse, meme celles non
+// rattachees a l'adresse consultee (les rattachees restent cochees via siteIris).
+const allSiteOptions = computed<SelectOption[]>(() =>
+    (authStore.user?.sites ?? []).map(s => ({
+        value: `/api/sites/${s.id}`,
+        label: (s.postalCode ?? '').slice(0, 2),
+    })),
+)
+
 const relationOptions = computed<SelectOption[]>(() => [
     { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
     { value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },

frontend/modules/commercial/pages/clients/new.vue

@@ -233,7 +233,7 @@
             <template v-if="canAccountingView" #accounting>
                 <div class="mt-12 flex flex-col gap-6">
                     <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                        <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="accounting.siren"
                                 :label="t('commercial.clients.form.accounting.siren')"
@@ -301,7 +301,7 @@
                             v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
                             @click="askRemoveRib(index)"
                         />
-                        <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="rib.label"
                                 :label="t('commercial.clients.form.accounting.ribLabel')"
@@ -341,7 +341,7 @@
             <!-- Onglet non encore implemente : frame vide, passage automatique.
                  Statistiques / Rapports / Echanges sont edit-only (absents a la
                  creation) — cf. buildClientFormTabKeys. -->
-            <template #transport><TabPlaceholderBlank /></template>
+            <template #transport><ComingSoonPlaceholder /></template>
         </MalioTabList>
 
         <!-- Modal de confirmation generique (suppression contact/adresse/RIB). -->
@@ -755,7 +755,9 @@ const canValidateAddresses = computed(() =>
     addresses.value.length > 0
     && addresses.value.every((a) => {
         const filledBillingEmail = a.billingEmail !== null && a.billingEmail.trim() !== ''
-        return a.siteIris.length >= 1 && (!isBillingEmailRequired(a) || filledBillingEmail)
+        return a.siteIris.length >= 1
+            && a.categoryIris.length >= 1
+            && (!isBillingEmailRequired(a) || filledBillingEmail)
     }),
 )
 
@@ -870,6 +872,8 @@ function addRib(): void {
 function askRemoveRib(index: number): void {
     askConfirm(t('commercial.clients.form.confirmDelete.rib'), () => {
         ribs.value.splice(index, 1)
+        // Garde au moins un bloc RIB visible (cf. amorce au montage).
+        if (ribs.value.length === 0) ribs.value.push(emptyRib())
     })
 }
 
@@ -956,5 +960,8 @@ interface ContactResponse {
 onMounted(() => {
     // Echec du chargement des referentiels non bloquant : les selects restent vides.
     referentials.loadCommon().catch(() => {})
+    // Au moins un bloc RIB toujours visible en creation : on amorce un bloc vide
+    // (non persiste tant qu'incomplet — RG-1.13).
+    if (ribs.value.length === 0) ribs.value.push(emptyRib())
 })
 </script>

frontend/shared/components/ui/ComingSoonPlaceholder.vue

@@ -0,0 +1,51 @@
+<template>
+    <!--
+        Placeholder generique « En cours de dev » pour les ecrans / onglets non
+        encore implementes. Composant PARTAGE (shared/components) : auto-importe
+        sans prefixe (`<ComingSoonPlaceholder>`) et reutilisable depuis n'importe
+        quel module. Affiche un gif (asset local par defaut) + un message i18n.
+    -->
+    <div class="flex min-h-[240px] flex-col items-center justify-center gap-4 rounded-md bg-white py-10">
+        <img
+            v-if="!imageFailed"
+            :src="src"
+            :alt="resolvedTitle"
+            class="max-h-[220px] w-auto rounded-md"
+            @error="imageFailed = true"
+        >
+        <!-- Repli si le gif ne charge pas (offline, CSP, asset absent) :
+             illustration emoji, le message reste affiche. -->
+        <div v-else class="text-5xl" aria-hidden="true">🚧 👨‍💻 🚧</div>
+
+        <div class="text-center">
+            <p class="text-xl font-bold text-black">{{ resolvedTitle }}</p>
+            <p class="mt-1 text-black/60">{{ resolvedSubtitle }}</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        /** Source de l'image/gif affichee. Defaut : asset local `/coming-soon.gif`. */
+        src?: string
+        /** Titre. Defaut : i18n `common.comingSoon.title`. */
+        title?: string
+        /** Sous-titre. Defaut : i18n `common.comingSoon.subtitle`. */
+        subtitle?: string
+    }>(),
+    {
+        src: '/coming-soon.gif',
+        title: '',
+        subtitle: '',
+    },
+)
+
+const { t } = useI18n()
+const imageFailed = ref(false)
+
+// Les props priment sur les libelles i18n par defaut (permet a un module
+// d'override le texte sans toucher au composant).
+const resolvedTitle = computed(() => props.title || t('common.comingSoon.title'))
+const resolvedSubtitle = computed(() => props.subtitle || t('common.comingSoon.subtitle'))
+</script>

frontend/shared/composables/__tests__/useAddressAutocomplete.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import {
+    useAddressAutocomplete,
+    AddressAutocompleteUnavailableError,
+} from '../useAddressAutocomplete'
+
+// On mocke le helper d'appel externe : aucun vrai appel reseau a la BAN.
+// vi.mock est hoiste par Vitest au-dessus des imports.
+const mockHttp = vi.hoisted(() => vi.fn())
+vi.mock('~/shared/utils/httpExternal', () => ({ httpExternal: mockHttp }))
+
+const BAN_URL = 'https://api-adresse.data.gouv.fr/search/'
+
+describe('useAddressAutocomplete', () => {
+    beforeEach(() => {
+        mockHttp.mockReset()
+    })
+
+    describe('searchCity', () => {
+        it('interroge la BAN en type=municipality et mappe { city, postalCode }', async () => {
+            mockHttp.mockResolvedValueOnce({
+                type: 'FeatureCollection',
+                features: [
+                    { properties: { city: 'Amiens', postcode: '80000', name: 'Amiens', type: 'municipality' } },
+                    { properties: { city: 'Amiens', postcode: '80080', name: 'Amiens', type: 'municipality' } },
+                ],
+            })
+
+            const { searchCity } = useAddressAutocomplete()
+            const res = await searchCity('80000')
+
+            expect(mockHttp).toHaveBeenCalledWith(
+                BAN_URL,
+                expect.objectContaining({ query: { q: '80000', type: 'municipality' } }),
+            )
+            expect(res).toEqual([
+                { city: 'Amiens', postalCode: '80000' },
+                { city: 'Amiens', postalCode: '80080' },
+            ])
+        })
+
+        it('throw une AddressAutocompleteUnavailableError sur erreur reseau / 5xx', async () => {
+            mockHttp.mockRejectedValueOnce(new Error('500 Server Error'))
+
+            const { searchCity } = useAddressAutocomplete()
+
+            await expect(searchCity('80000')).rejects.toBeInstanceOf(AddressAutocompleteUnavailableError)
+        })
+
+        it('throw une AddressAutocompleteUnavailableError sur timeout', async () => {
+            mockHttp.mockRejectedValueOnce(new Error('The operation was aborted due to timeout'))
+
+            const { searchCity } = useAddressAutocomplete()
+
+            await expect(searchCity('80000')).rejects.toBeInstanceOf(AddressAutocompleteUnavailableError)
+        })
+    })
+
+    describe('searchAddress', () => {
+        it('interroge la BAN avec postcode et mappe la suggestion', async () => {
+            mockHttp.mockResolvedValueOnce({
+                type: 'FeatureCollection',
+                features: [
+                    {
+                        properties: {
+                            label: '8 Boulevard du Port 80000 Amiens',
+                            name: '8 Boulevard du Port',
+                            street: 'Boulevard du Port',
+                            postcode: '80000',
+                            city: 'Amiens',
+                            type: 'housenumber',
+                        },
+                    },
+                ],
+            })
+
+            const { searchAddress } = useAddressAutocomplete()
+            const res = await searchAddress('8 boulevard du port', '80000')
+
+            expect(mockHttp).toHaveBeenCalledWith(
+                BAN_URL,
+                expect.objectContaining({
+                    query: { q: '8 boulevard du port', postcode: '80000' },
+                }),
+            )
+            expect(res).toEqual([
+                {
+                    label: '8 Boulevard du Port 80000 Amiens',
+                    street: '8 Boulevard du Port',
+                    postalCode: '80000',
+                    city: 'Amiens',
+                },
+            ])
+        })
+
+        it('omet le parametre postcode quand aucun code postal n\'est fourni', async () => {
+            mockHttp.mockResolvedValueOnce({ type: 'FeatureCollection', features: [] })
+
+            const { searchAddress } = useAddressAutocomplete()
+            await searchAddress('8 boulevard du port')
+
+            expect(mockHttp).toHaveBeenCalledWith(
+                BAN_URL,
+                expect.objectContaining({
+                    query: { q: '8 boulevard du port' },
+                }),
+            )
+        })
+
+        it('ne restreint PAS la recherche a type=housenumber (sinon la BAN ne renvoie rien tant qu\'aucun numero n\'est saisi)', async () => {
+            // Regression : avec `type=housenumber`, une saisie de nom de rue sans
+            // numero (ex: « boulevard du port ») renvoie 0 resultat cote BAN.
+            mockHttp.mockResolvedValueOnce({ type: 'FeatureCollection', features: [] })
+
+            const { searchAddress } = useAddressAutocomplete()
+            await searchAddress('boulevard du port', '80000')
+
+            const sentQuery = mockHttp.mock.calls[0]?.[1]?.query as Record<string, string>
+            expect(sentQuery.type).toBeUndefined()
+        })
+
+        it('throw une AddressAutocompleteUnavailableError sur erreur reseau', async () => {
+            mockHttp.mockRejectedValueOnce(new Error('network down'))
+
+            const { searchAddress } = useAddressAutocomplete()
+
+            await expect(searchAddress('8 boulevard du port', '80000')).rejects.toBeInstanceOf(
+                AddressAutocompleteUnavailableError,
+            )
+        })
+    })
+})

frontend/shared/composables/useAddressAutocomplete.ts

@@ -1,27 +1,29 @@
-// STUB ERP-63 — remplacé par l'implémentation BAN d'ERP-66.
+import { httpExternal } from '~/shared/utils/httpExternal'
+
+// Autocompletion d'adresse branchee sur la Base Adresse Nationale (BAN),
+// `api-adresse.data.gouv.fr` — service public francais, gratuit, CORS ouvert.
 //
-// Ce fichier appartient fonctionnellement à ERP-66 (#66). ERP-63 n'en livre
-// qu'un STUB pour ne pas se bloquer : la vraie implémentation (appels
-// api-adresse.data.gouv.fr) viendra remplacer le CORPS des deux méthodes SANS
-// changer leur signature ni l'usage côté composant.
+// Appel HTTP DIRECT depuis le front (pas de proxy back), conformement a la spec
+// M1 (§ API adresse postale). On passe par `httpExternal` et NON `useApi()` :
+// la BAN est un domaine externe, sans cookie de session ni enveloppe Hydra.
 //
-// Contrat figé par ERP-66 (c'est lui qui fait foi) :
+// Contrat (fige) :
 //   searchCity(postalCode)       -> liste { city, postalCode }
 //   searchAddress(query, cp?)    -> liste { label, street, postalCode, city }
-//   En cas d'erreur/timeout, la méthode THROW. Le composant catch l'erreur,
-//   affiche un toast d'avertissement et bascule en saisie libre (MalioInputText).
-//
-// Comportement du stub : les deux méthodes throw systématiquement → l'onglet
-// Adresse part directement en mode dégradé (Ville + Adresse en saisie libre,
-// Code postal saisi manuellement). Aucun appel réseau n'est émis ici.
+//   En cas d'erreur/timeout, la methode THROW une AddressAutocompleteUnavailableError.
+//   Le composant consommateur catch, affiche un toast d'avertissement et bascule
+//   en saisie libre (MalioInputText).
 
-/** Une suggestion de ville renvoyée à partir d'un code postal. */
+/** URL de l'endpoint de recherche BAN. */
+const BAN_SEARCH_URL = 'https://api-adresse.data.gouv.fr/search/'
+
+/** Une suggestion de ville renvoyee a partir d'un code postal. */
 export interface CitySuggestion {
     city: string
     postalCode: string
 }
 
-/** Une suggestion d'adresse complète (saisie assistée du champ « Adresse »). */
+/** Une suggestion d'adresse complete (saisie assistee du champ « Adresse »). */
 export interface AddressSuggestion {
     label: string
     street: string
@@ -34,27 +36,82 @@ export interface AddressAutocomplete {
     searchAddress(query: string, postalCode?: string): Promise<AddressSuggestion[]>
 }
 
-/** Erreur signalant que le service d'autocomplétion BAN n'est pas disponible. */
+/** Erreur signalant que le service d'autocompletion BAN n'est pas disponible. */
 export class AddressAutocompleteUnavailableError extends Error {
     constructor() {
-        // Message technique (non affiché tel quel) : le composant remonte son
-        // propre libellé i18n. Sert au debug / aux logs uniquement.
-        super('Address autocomplete (BAN) is not available yet — ERP-66 stub.')
+        // Message technique (non affiche tel quel) : le composant remonte son
+        // propre libelle i18n. Sert au debug / aux logs uniquement.
+        super('Address autocomplete (BAN) is not available.')
         this.name = 'AddressAutocompleteUnavailableError'
     }
 }
 
-/**
- * STUB : renvoie un composable conforme au contrat ERP-66 dont les méthodes
- * échouent toujours, forçant le mode dégradé côté onglet Adresse.
- */
+/** Proprietes d'une « feature » GeoJSON renvoyee par la BAN (champs utilises). */
+interface BanFeatureProperties {
+    label?: string
+    name?: string
+    street?: string
+    postcode?: string
+    city?: string
+}
+
+/** Reponse GeoJSON FeatureCollection de la BAN. */
+interface BanResponse {
+    features?: { properties?: BanFeatureProperties }[]
+}
+
 export function useAddressAutocomplete(): AddressAutocomplete {
     return {
-        async searchCity(_postalCode: string): Promise<CitySuggestion[]> {
-            throw new AddressAutocompleteUnavailableError()
+        async searchCity(postalCode: string): Promise<CitySuggestion[]> {
+            let res: BanResponse
+            try {
+                res = await httpExternal<BanResponse>(BAN_SEARCH_URL, {
+                    query: { q: postalCode, type: 'municipality' },
+                })
+            } catch {
+                // Reseau coupe, 5xx, timeout... -> mode degrade cote composant.
+                throw new AddressAutocompleteUnavailableError()
+            }
+
+            return (res.features ?? []).map((feature) => {
+                const props = feature.properties ?? {}
+                return {
+                    city: props.city ?? props.name ?? '',
+                    postalCode: props.postcode ?? '',
+                }
+            })
         },
-        async searchAddress(_query: string, _postalCode?: string): Promise<AddressSuggestion[]> {
-            throw new AddressAutocompleteUnavailableError()
+
+        async searchAddress(query: string, postalCode?: string): Promise<AddressSuggestion[]> {
+            // IMPORTANT : pas de `type=housenumber` ici. La BAN ne renvoie un
+            // resultat de ce type qu'une fois un numero saisi → une recherche par
+            // nom de rue (« boulevard du port ») renverrait 0 resultat pendant
+            // toute la frappe. Sans filtre `type`, la BAN classe rues + numeros
+            // par pertinence (comportement d'autocompletion attendu).
+            // On n'ajoute `postcode` que s'il est fourni (sinon recherche large).
+            const banQuery: Record<string, string> = { q: query }
+            if (postalCode) {
+                banQuery.postcode = postalCode
+            }
+
+            let res: BanResponse
+            try {
+                res = await httpExternal<BanResponse>(BAN_SEARCH_URL, { query: banQuery })
+            } catch {
+                throw new AddressAutocompleteUnavailableError()
+            }
+
+            return (res.features ?? []).map((feature) => {
+                const props = feature.properties ?? {}
+                return {
+                    label: props.label ?? '',
+                    // `name` porte la ligne d'adresse complete (numero + voie) ;
+                    // `street` ne contient que la voie. On privilegie `name`.
+                    street: props.name ?? props.street ?? '',
+                    postalCode: props.postcode ?? '',
+                    city: props.city ?? '',
+                }
+            })
         },
     }
 }

frontend/shared/utils/__tests__/httpExternal.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { httpExternal } from '../httpExternal'
+
+// On mocke ofetch : httpExternal s'appuie sur $fetch sans jamais toucher le
+// reseau pendant les tests. vi.mock est hoiste par Vitest au-dessus des imports.
+const mockFetch = vi.hoisted(() => vi.fn())
+vi.mock('ofetch', () => ({ $fetch: mockFetch }))
+
+describe('httpExternal', () => {
+    beforeEach(() => {
+        mockFetch.mockReset()
+    })
+
+    it('retourne le JSON parse renvoye par $fetch', async () => {
+        mockFetch.mockResolvedValueOnce({ ok: true })
+
+        const res = await httpExternal<{ ok: boolean }>('https://example.test/api')
+
+        expect(res).toEqual({ ok: true })
+    })
+
+    it('transmet la query, coupe le cookie (credentials omit) et pose un timeout par defaut', async () => {
+        mockFetch.mockResolvedValueOnce([])
+
+        await httpExternal('https://example.test/search', {
+            query: { q: '80000', type: 'municipality' },
+        })
+
+        expect(mockFetch).toHaveBeenCalledWith(
+            'https://example.test/search',
+            expect.objectContaining({
+                query: { q: '80000', type: 'municipality' },
+                credentials: 'omit',
+                retry: 0,
+                timeout: 5000,
+            }),
+        )
+    })
+
+    it('permet de surcharger le timeout', async () => {
+        mockFetch.mockResolvedValueOnce(null)
+
+        await httpExternal('https://example.test', { timeoutMs: 1000 })
+
+        expect(mockFetch).toHaveBeenCalledWith(
+            'https://example.test',
+            expect.objectContaining({ timeout: 1000 }),
+        )
+    })
+
+    it('propage l\'erreur reseau / timeout (throw)', async () => {
+        mockFetch.mockRejectedValueOnce(new Error('network down'))
+
+        await expect(httpExternal('https://example.test')).rejects.toThrow('network down')
+    })
+})

frontend/shared/utils/__tests__/phone.test.ts

@@ -20,4 +20,27 @@ describe('formatPhoneFR', () => {
     it('groupe par 2 meme un nombre impair de chiffres (dernier groupe seul)', () => {
         expect(formatPhoneFR('123')).toBe('12 3')
     })
+
+    it('formate une saisie courte (<= 4 chiffres) sans planter', () => {
+        expect(formatPhoneFR('1')).toBe('1')
+        expect(formatPhoneFR('12')).toBe('12')
+        expect(formatPhoneFR('1234')).toBe('12 34')
+    })
+
+    it('strip les caracteres non numeriques (lettres, espaces, ponctuation)', () => {
+        expect(formatPhoneFR('abc')).toBe('')
+        expect(formatPhoneFR('Tel : 06.12')).toBe('06 12')
+        expect(formatPhoneFR('  06 12  ')).toBe('06 12')
+    })
+
+    it('conserve l\'indicatif international (+33) sans le transformer', () => {
+        // Comportement fige : on retire seulement le `+`, on ne deduit pas le
+        // prefixe pays. Le `+33...` est donc groupe brut par paquets de 2.
+        expect(formatPhoneFR('+33612345678')).toBe('33 61 23 45 67 8')
+    })
+
+    it('groupe sans tronquer une saisie plus longue que 10 chiffres', () => {
+        // Aucune troncature silencieuse : on figure tous les chiffres groupes par 2.
+        expect(formatPhoneFR('061234567899')).toBe('06 12 34 56 78 99')
+    })
 })

frontend/shared/utils/httpExternal.ts

@@ -0,0 +1,40 @@
+import { $fetch } from 'ofetch'
+
+/**
+ * Options d'un appel HTTP externe.
+ */
+export interface HttpExternalOptions {
+    /** Parametres de query string (encodes par ofetch). */
+    query?: Record<string, string | number | undefined>
+    /** Timeout en millisecondes avant abandon (defaut 5000). */
+    timeoutMs?: number
+}
+
+/**
+ * Petit client HTTP pour les APIs PUBLIQUES EXTERNES (domaine tiers, hors `/api`).
+ *
+ * Pourquoi un helper dedie plutot que `useApi()` : `useApi()` est le client de
+ * l'API interne Starseed (baseURL `/api`, cookie JWT `credentials: 'include'`,
+ * parsing/erreurs Hydra, redirection `/login` sur 401, toasts i18n). Tout cela
+ * est inadapte — voire indesirable — pour un endpoint public externe comme la
+ * Base Adresse Nationale (`api-adresse.data.gouv.fr`).
+ *
+ * Ce helper est donc le SEUL point d'entree autorise pour un `$fetch` brut vers
+ * l'externe (cf. regle frontend n°4 : pas de `$fetch` eparpille dans les
+ * composants). Il :
+ * - cible une URL absolue (pas de baseURL `/api`) ;
+ * - n'envoie PAS le cookie de session (`credentials: 'omit'`) ;
+ * - ne retente pas (`retry: 0`) et applique un timeout ;
+ * - laisse remonter l'erreur (throw) — au consommateur de gerer le mode degrade.
+ */
+export async function httpExternal<T>(
+    url: string,
+    opts: HttpExternalOptions = {},
+): Promise<T> {
+    return $fetch<T>(url, {
+        query: opts.query,
+        credentials: 'omit',
+        retry: 0,
+        timeout: opts.timeoutMs ?? 5000,
+    })
+}

src/Module/Commercial/Domain/Entity/ClientAddress.php

@@ -177,12 +177,14 @@ class ClientAddress implements TimestampableInterface, BlamableInterface
     #[Groups(['client_address:read', 'client_address:write'])]
     private Collection $contacts;
 
+    // Au moins une categorie est obligatoire sur une adresse (spec-front § Adresse).
     // RG-1.29 : categories de code DISTRIBUTEUR/COURTIER interdites (validateCategoryCodes).
     /** @var Collection<int, CategoryInterface> */
     #[ORM\ManyToMany(targetEntity: CategoryInterface::class)]
     #[ORM\JoinTable(name: 'client_address_category')]
     #[ORM\JoinColumn(name: 'client_address_id', referencedColumnName: 'id', onDelete: 'CASCADE')]
     #[ORM\InverseJoinColumn(name: 'category_id', referencedColumnName: 'id', onDelete: 'RESTRICT')]
+    #[Assert\Count(min: 1, minMessage: 'Au moins une catégorie est obligatoire.')]
     #[Groups(['client_address:read', 'client_address:write'])]
     private Collection $categories;
 

tests/Module/Commercial/Api/ClientAddressTest.php

@@ -167,8 +167,9 @@ final class ClientAddressTest extends AbstractCommercialApiTestCase
     public function testNonBillingAddressAcceptsEmptyBillingEmail(): void
     {
         $this->skipIfSitesModuleDisabled();
-        $client = $this->createAdminClient();
-        $seed   = $this->seedClient('Non Billing Empty Email');
+        $client   = $this->createAdminClient();
+        $seed     = $this->seedClient('Non Billing Empty Email');
+        $category = $this->createCategory('SECTEUR');
 
         $client->request('POST', '/api/clients/'.$seed->getId().'/addresses', [
             'headers' => ['Content-Type' => self::LD],
@@ -179,6 +180,7 @@ final class ClientAddressTest extends AbstractCommercialApiTestCase
                 'city'         => 'Châtellerault',
                 'street'       => '1 rue du Test',
                 'sites'        => [$this->firstSiteIri()],
+                'categories'   => ['/api/categories/'.$category->getId()],
             ],
         ]);
 
@@ -286,6 +288,29 @@ final class ClientAddressTest extends AbstractCommercialApiTestCase
         self::assertResponseStatusCodeSame(201);
     }
 
+    /**
+     * Spec-front § Adresse : au moins une categorie est obligatoire sur une
+     * adresse. POST sans categorie (mais avec site) -> 422.
+     */
+    public function testAddressRequiresAtLeastOneCategory(): void
+    {
+        $this->skipIfSitesModuleDisabled();
+        $client = $this->createAdminClient();
+        $seed   = $this->seedClient('Address No Cat');
+
+        $client->request('POST', '/api/clients/'.$seed->getId().'/addresses', [
+            'headers' => ['Content-Type' => self::LD],
+            'json'    => [
+                'postalCode' => '86100',
+                'city'       => 'Châtellerault',
+                'street'     => '1 rue du Test',
+                'sites'      => [$this->firstSiteIri()],
+            ],
+        ]);
+
+        self::assertResponseStatusCodeSame(422);
+    }
+
     /**
      * Retourne l'IRI du premier site seede (fixtures Sites).
      */

tests/Module/Commercial/Api/ClientSubResourceApiTest.php

@@ -110,9 +110,10 @@ final class ClientSubResourceApiTest extends AbstractCommercialApiTestCase
     public function testPostAddressNormalizesBillingEmail(): void
     {
         $this->skipIfSitesModuleDisabled();
-        $client  = $this->createAdminClient();
-        $seed    = $this->seedClient('Address Host');
-        $siteIri = $this->firstSiteIri();
+        $client   = $this->createAdminClient();
+        $seed     = $this->seedClient('Address Host');
+        $siteIri  = $this->firstSiteIri();
+        $category = $this->createCategory('SECTEUR');
 
         $data = $client->request('POST', '/api/clients/'.$seed->getId().'/addresses', [
             'headers' => ['Content-Type' => self::LD],
@@ -123,6 +124,7 @@ final class ClientSubResourceApiTest extends AbstractCommercialApiTestCase
                 'city'         => 'Châtellerault',
                 'street'       => '1 rue du Test',
                 'sites'        => [$siteIri],
+                'categories'   => ['/api/categories/'.$category->getId()],
             ],
         ])->toArray();