chore: bump version to v0.1.78

## Objectif

Retirer le bloc « contact principal » (Nom, Prénom, Téléphone, Téléphone 2, Email) des trois écrans Client — **création**, **consultation**, **modification** — ainsi que des types, mappeurs, validations et clés i18n associés. La saisie des contacts passe désormais exclusivement par l'onglet **Contacts** (`ClientContactBlock`, inchangé).

Dépend du ticket **1/3 (back)** : l'API ne renvoie/n'accepte plus ces 5 champs sur `client`. Contexte : `docs/specs/M1-clients/refonte-contact/README.md`.

## Changements

- **`pages/clients/new.vue`** : bloc principal réduit à Nom entreprise / Catégories / Relation / Triage. Suppression de `main.firstName/lastName/email`, `mainPhones`, `addMainPhone()`, `prefillFirstContact()`. `isMainValid` ne dépend plus que de `companyName` + ≥ 1 catégorie + relation valide. Payload POST et `ClientResponse` nettoyés.
- **`pages/clients/[id]/edit.vue`** : mêmes champs retirés, `isMainValid` simplifié.
- **`pages/clients/[id]/index.vue`** : affichage lecture seule des 5 champs retiré.
- **`utils/clientEdit.ts`** : `MainFormDraft`, `mapMainDraft()`, `buildMainPayload()` débarrassés des 5 champs + `hasSecondaryPhone`.
- **`utils/clientConsultation.ts`** : `ClientDetail` débarrassé des champs inline (`ContactRead` conservé).
- **`i18n/locales/fr.json`** : clés `form.main.firstName/lastName/email/phonePrimary/phoneSecondary/addPhone` supprimées. `form.contact.*` conservé.
- **Tests** : `clientEdit.spec.ts` ajusté (factory, `MAIN_KEYS`, assertions `mapMainDraft`, test téléphone secondaire obsolète retiré).

## Vérifications

- `make nuxt-test` : suites `clientEdit` / `clientConsultation` / `clientFormRules` vertes. Les 2 échecs restants (`useClientReferentials.spec.ts`, libellé de site) sont **pré-existants** sur `develop` (confirmé par `git stash`), sans rapport avec ce ticket.
- `eslint` sur les fichiers touchés : OK, aucun import/variable mort.
- Zéro référence orpheline aux clés `form.main.*` supprimées ; JSON i18n valide.

## Reste à faire

- Golden path navigateur (création → consultation → modification sans bloc inline) à valider manuellement.

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

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.76'
+    app.version: '0.1.78'

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": {
@@ -133,14 +133,9 @@
                 "duplicateCompany": "Un client portant ce nom de société existe déjà.",
                 "main": {
                     "companyName": "Nom du client (Entreprise)",
-                    "firstName": "Prénom du contact principal",
-                    "lastName": "Nom du contact principal",
-                    "email": "Email",
-                    "phonePrimary": "Téléphone",
-                    "phoneSecondary": "Téléphone (2)",
-                    "addPhone": "Ajouter un numéro",
                     "categories": "Catégorie",
                     "relation": "Distributeur / Courtier",
+                    "relationNone": "Aucun",
                     "relationDistributor": "Dépend du distributeur",
                     "relationBroker": "Dépend du courtier",
                     "distributorName": "Nom du distributeur",

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/__tests__/useClientReferentials.spec.ts

@@ -28,7 +28,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
                 return Promise.reject(new Error('403 Forbidden'))
             }
             if (url === '/sites') {
-                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault' }] })
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault', postalCode: '86100' }] })
             }
             return Promise.resolve({
                 member: [{ '@id': '/api/x/1', code: 'X', label: 'Libelle X' }],
@@ -40,7 +40,8 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
         await refs.loadCommon()
 
         // Resilience : les referentiels OK sont peuples malgre l'echec de /categories.
-        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: 'Chatellerault' }])
+        // Le libelle d'un site est son numero de departement (2 premiers chiffres du code postal).
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86' }])
         expect(refs.tvaModes.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
         expect(refs.banks.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
 
@@ -56,7 +57,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
                 })
             }
             if (url === '/sites') {
-                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault' }] })
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault', postalCode: '86100' }] })
             }
             return Promise.resolve({ member: [] })
         })
@@ -67,6 +68,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
         expect(refs.categories.value).toEqual([
             { value: '/api/categories/1', label: 'Secteur', code: 'SECTEUR' },
         ])
-        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: 'Chatellerault' }])
+        // Le libelle d'un site est son numero de departement (2 premiers chiffres du code postal).
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86' }])
     })
 })

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

@@ -29,16 +29,6 @@
                     :required="true"
                     :readonly="businessReadonly"
                 />
-                <MalioInputText
-                    v-model="main.lastName"
-                    :label="t('commercial.clients.form.main.lastName')"
-                    :readonly="businessReadonly"
-                />
-                <MalioInputText
-                    v-model="main.firstName"
-                    :label="t('commercial.clients.form.main.firstName')"
-                    :readonly="businessReadonly"
-                />
                 <MalioSelectCheckbox
                     :model-value="main.categoryIris"
                     :options="mainCategoryOptions"
@@ -47,34 +37,11 @@
                     :disabled="businessReadonly"
                     @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
                 />
-                <MalioInputPhone
-                    v-model="main.phonePrimary"
-                    :label="t('commercial.clients.form.main.phonePrimary')"
-                    :mask="PHONE_MASK"
-                    :required="true"
-                    :readonly="businessReadonly"
-                    add-icon-name="mdi:plus"
-                    :addable="!main.hasSecondaryPhone && !businessReadonly"
-                    :add-button-label="t('commercial.clients.form.main.addPhone')"
-                    @add="main.hasSecondaryPhone = true"
-                />
-                <MalioInputPhone
-                    v-if="main.hasSecondaryPhone"
-                    v-model="main.phoneSecondary"
-                    :label="t('commercial.clients.form.main.phoneSecondary')"
-                    :mask="PHONE_MASK"
-                    :readonly="businessReadonly"
-                />
-                <MalioInputEmail
-                    v-model="main.email"
-                    :label="t('commercial.clients.form.main.email')"
-                    :required="true"
-                    :readonly="businessReadonly"
-                />
                 <MalioSelect
                     :model-value="main.relationType"
                     :options="relationOptions"
                     :label="t('commercial.clients.form.main.relation')"
+                    :empty-option-label="t('commercial.clients.form.main.relationNone')"
                     :disabled="businessReadonly"
                     @update:model-value="onRelationChange"
                 />
@@ -179,9 +146,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 +183,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 +206,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 +273,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 +311,10 @@
                 </template>
 
                 <!-- Onglets non encore implementes : frame vide (navigation libre). -->
-                <template #transport><TabPlaceholderBlank /></template>
+                <template #transport><ComingSoonPlaceholder /></template>
-                <template #statistics><TabPlaceholderBlank /></template>
+                <template #statistics><ComingSoonPlaceholder /></template>
-                <template #reports><TabPlaceholderBlank /></template>
+                <template #reports><ComingSoonPlaceholder /></template>
-                <template #exchanges><TabPlaceholderBlank /></template>
+                <template #exchanges><ComingSoonPlaceholder /></template>
             </MalioTabList>
         </template>
 
@@ -430,7 +391,6 @@ import {
 import { extractApiErrorMessage } from '~/shared/utils/api'
 
 // Masques de saisie (la normalisation finale reste serveur).
-const PHONE_MASK = '## ## ## ## ##'
 const SIREN_MASK = '#########'
 const EMPLOYEES_MASK = '#######'
 
@@ -495,6 +455,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(() => {})
@@ -621,9 +586,6 @@ const isMainValid = computed(() => {
         || (main.relationType === 'distributeur' && filled(main.distributorIri))
         || (main.relationType === 'courtier' && filled(main.brokerIri))
     return filled(main.companyName)
-        && filled(main.email)
-        && filled(main.phonePrimary)
-        && (filled(main.firstName) || filled(main.lastName))
         && main.categoryIris.length >= 1
         && relationValid
 })
@@ -694,6 +656,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 +706,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 +721,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 +801,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

@@ -52,16 +52,6 @@
                     :label="t('commercial.clients.form.main.companyName')"
                     readonly
                 />
-                <MalioInputText
-                    :model-value="client.lastName"
-                    :label="t('commercial.clients.form.main.lastName')"
-                    readonly
-                />
-                <MalioInputText
-                    :model-value="client.firstName"
-                    :label="t('commercial.clients.form.main.firstName')"
-                    readonly
-                />
                 <MalioSelectCheckbox
                     :model-value="categoryIris"
                     :options="mainCategoryOptions"
@@ -69,26 +59,16 @@
                     :display-tag="true"
                     disabled
                 />
-                <MalioInputPhone
+                <!-- Relation toujours affichee (vide = « Aucun »), comme en edition. -->
-                    v-for="(phone, index) in mainPhones"
-                    :key="index"
-                    :model-value="phone"
-                    :label="index === 0 ? t('commercial.clients.form.main.phonePrimary') : t('commercial.clients.form.main.phoneSecondary')"
-                    :mask="PHONE_MASK"
-                    readonly
-                />
-                <MalioInputEmail
-                    :model-value="client.email"
-                    :label="t('commercial.clients.form.main.email')"
-                    readonly
-                />
                 <MalioSelect
-                    v-if="relation.type"
                     :model-value="relation.type"
                     :options="relationOptions"
                     :label="t('commercial.clients.form.main.relation')"
+                    :empty-option-label="t('commercial.clients.form.main.relationNone')"
                     disabled
                 />
+                <!-- Nom du distributeur/courtier : conditionnel (libelle type-dependant,
+                     aucune valeur sans relation — meme comportement qu'en edition). -->
                 <MalioInputText
                     v-if="relation.type"
                     :model-value="relation.name"
@@ -159,9 +139,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 +151,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 +163,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 +218,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 +240,10 @@
                 </template>
 
                 <!-- Onglets non encore implementes : frame vide (navigation libre). -->
-                <template #transport><TabPlaceholderBlank /></template>
+                <template #transport><ComingSoonPlaceholder /></template>
-                <template #statistics><TabPlaceholderBlank /></template>
+                <template #statistics><ComingSoonPlaceholder /></template>
-                <template #reports><TabPlaceholderBlank /></template>
+                <template #reports><ComingSoonPlaceholder /></template>
-                <template #exchanges><TabPlaceholderBlank /></template>
+                <template #exchanges><ComingSoonPlaceholder /></template>
             </MalioTabList>
         </template>
 
@@ -319,10 +293,9 @@ import {
     type ClientDetail,
     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).
+// Masque d'affichage (purement visuel, la donnee reste celle du serveur).
-const PHONE_MASK = '## ## ## ## ##'
 const SIREN_MASK = '#########'
 
 const { t } = useI18n()
@@ -330,6 +303,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.
@@ -354,13 +328,6 @@ const headerTitle = computed(() => client.value?.companyName ?? t('commercial.cl
 const relation = computed(() => (client.value ? relationOf(client.value) : { type: null, name: null }))
 const categoryIris = computed(() => (client.value?.categories ?? []).map(c => c['@id']))
 
-// Telephones du formulaire principal, formates XX XX XX XX XX (RG d'affichage).
-const mainPhones = computed(() =>
-    [client.value?.phonePrimary, client.value?.phoneSecondary]
-        .filter((p): p is string => Boolean(p))
-        .map(formatPhoneFR),
-)
-
 const information = computed(() => ({
     description: client.value?.description ?? null,
     competitors: client.value?.competitors ?? null,
@@ -372,10 +339,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 addressViews = computed(() => {
-const ribs = computed(() => (client.value?.ribs ?? []).map(mapRibToDraft))
+    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 +363,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

@@ -23,16 +23,6 @@
                 :required="true"
                 :readonly="mainLocked"
             />
-            <MalioInputText
-                v-model="main.lastName"
-                :label="t('commercial.clients.form.main.lastName')"
-                :readonly="mainLocked"
-            />
-            <MalioInputText
-                v-model="main.firstName"
-                :label="t('commercial.clients.form.main.firstName')"
-                :readonly="mainLocked"
-            />
             <MalioSelectCheckbox
                 :model-value="main.categoryIris"
                 :options="referentials.categories.value"
@@ -41,30 +31,11 @@
                 :disabled="mainLocked"
                 @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
             />
-            <!-- Telephones : 1 par defaut, le bouton « + » revele le 2e (max 2, RG-1.02). -->
-            <MalioInputPhone
-                v-for="(_, index) in mainPhones"
-                :key="index"
-                v-model="mainPhones[index]"
-                :label="t('commercial.clients.form.main.phonePrimary')"
-                :mask="PHONE_MASK"
-                :required="index === 0"
-                :readonly="mainLocked"
-                add-icon-name="mdi:plus"
-                :addable="mainPhones.length === 1 && !mainLocked"
-                :add-button-label="t('commercial.clients.form.main.addPhone')"
-                @add="addMainPhone"
-            />
-            <MalioInputEmail
-                v-model="main.email"
-                :label="t('commercial.clients.form.main.email')"
-                :required="true"
-                :readonly="mainLocked"
-            />
             <MalioSelect
                 :model-value="main.relationType"
                 :options="relationOptions"
                 :label="t('commercial.clients.form.main.relation')"
+                :empty-option-label="t('commercial.clients.form.main.relationNone')"
                 :disabled="mainLocked"
                 @update:model-value="onRelationChange"
             />
@@ -233,7 +204,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 +272,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 +312,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). -->
@@ -388,11 +359,9 @@ import {
     type ContactFormDraft,
     type RibFormDraft,
 } from '~/modules/commercial/types/clientForm'
-import { formatPhoneFR } from '~/shared/utils/phone'
 import { extractApiErrorMessage } from '~/shared/utils/api'
 
 // Masques de saisie (la normalisation finale reste serveur).
-const PHONE_MASK = '## ## ## ## ##'
 const SIREN_MASK = '#########'
 // Masque « nombre » du champ Nombre de salaries : chiffres uniquement (max 7).
 const EMPLOYEES_MASK = '#######'
@@ -444,9 +413,6 @@ const tabSubmitting = ref(false)
 // ── Formulaire principal ────────────────────────────────────────────────────
 const main = reactive({
     companyName: null as string | null,
-    firstName: null as string | null,
-    lastName: null as string | null,
-    email: null as string | null,
     categoryIris: [] as string[],
     relationType: null as 'distributeur' | 'courtier' | null,
     distributorIri: null as string | null,
@@ -454,17 +420,6 @@ const main = reactive({
     triageService: false,
 })
 
-// Telephones du formulaire principal : 1 par defaut, 2 au maximum (RG-1.02).
-// L'index 0 alimente phonePrimary, l'index 1 phoneSecondary au POST.
-const mainPhones = ref<string[]>([''])
-
-/** Revele le 2e numero (le bouton « + » disparait une fois a 2, RG-1.02). */
-function addMainPhone(): void {
-    if (mainPhones.value.length === 1) {
-        mainPhones.value.push('')
-    }
-}
-
 // Pas d'option « Aucun » : le select est vide par defaut (relationType = null).
 const relationOptions = computed<RefOption[]>(() => [
     { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
@@ -472,10 +427,11 @@ const relationOptions = computed<RefOption[]>(() => [
 ])
 
 // Validation du formulaire principal (gate le bouton « Valider ») :
-//  - companyName / email / telephone principal / >= 1 categorie obligatoires ;
+//  - companyName / >= 1 categorie obligatoires ;
-//  - RG-1.01 : nom OU prenom du contact principal ;
+//  - relation Distributeur/Courtier optionnelle, mais le nom correspondant
-//  - relation Distributeur/Courtier obligatoire (un des deux), ET le nom
+//    devient requis si l'un des deux est choisi (spec fonctionnelle).
-//    correspondant obligatoire selon le choix (spec fonctionnelle).
+// Les coordonnees de contact ne sont plus saisies ici : elles vivent dans
+// l'onglet Contacts (RG-1.05/1.14 garantissent >= 1 contact valide).
 const isMainValid = computed(() => {
     const filled = (v: string | null | undefined) => v !== null && v !== undefined && v.trim() !== ''
     // Relation Distributeur/Courtier OPTIONNELLE ; mais si « Depend du
@@ -485,9 +441,6 @@ const isMainValid = computed(() => {
         || (main.relationType === 'distributeur' && filled(main.distributorIri))
         || (main.relationType === 'courtier' && filled(main.brokerIri))
     return filled(main.companyName)
-        && filled(main.email)
-        && filled(mainPhones.value[0])
-        && (filled(main.firstName) || filled(main.lastName))
         && main.categoryIris.length >= 1
         && relationValid
 })
@@ -512,11 +465,6 @@ async function submitMain(): Promise<void> {
     try {
         const payload: Record<string, unknown> = {
             companyName: main.companyName,
-            firstName: main.firstName || null,
-            lastName: main.lastName || null,
-            email: main.email,
-            phonePrimary: mainPhones.value[0] || null,
-            phoneSecondary: mainPhones.value[1] || null,
             categories: main.categoryIris,
             distributor: main.relationType === 'distributeur' ? main.distributorIri : null,
             broker: main.relationType === 'courtier' ? main.brokerIri : null,
@@ -528,18 +476,8 @@ async function submitMain(): Promise<void> {
         })
 
         clientId.value = created.id
-        // Reaffiche les valeurs normalisees renvoyees par le serveur.
+        // Reaffiche la valeur normalisee renvoyee par le serveur.
         main.companyName = created.companyName ?? main.companyName
-        main.firstName = created.firstName ?? null
-        main.lastName = created.lastName ?? null
-        main.email = created.email ?? main.email
-        // Reaffiche les telephones normalises (reformates via formatPhoneFR).
-        const normalizedPhones = [formatPhoneFR(created.phonePrimary), formatPhoneFR(created.phoneSecondary)]
-            .filter(p => p !== '')
-        mainPhones.value = normalizedPhones.length > 0 ? normalizedPhones : ['']
-
-        // Pre-remplit le 1er contact a partir du formulaire principal (editable).
-        prefillFirstContact()
 
         mainLocked.value = true
         unlockedIndex.value = 0
@@ -652,18 +590,10 @@ async function submitInformation(): Promise<void> {
 }
 
 // ── Onglet Contact ──────────────────────────────────────────────────────────
+// Au moins un bloc Contact vide au depart : c'est desormais le seul point de
+// saisie des coordonnees (le bloc principal ne porte plus de contact inline).
 const contacts = ref<ContactFormDraft[]>([emptyContact()])
 
-/** Pre-remplit le 1er contact depuis le formulaire principal (apres creation). */
-function prefillFirstContact(): void {
-    const first = contacts.value[0]
-    if (!first) return
-    first.lastName = main.lastName
-    first.firstName = main.firstName
-    first.email = main.email
-    first.phonePrimary = mainPhones.value[0] ?? null
-}
-
 // « + Nouveau contact » desactive tant que le dernier bloc n'a ni nom ni prenom.
 const canAddContact = computed(() => {
     const last = contacts.value[contacts.value.length - 1]
@@ -755,7 +685,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 +802,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())
     })
 }
 
@@ -941,11 +875,6 @@ function runConfirm(): void {
 interface ClientResponse {
     id: number
     companyName: string | null
-    firstName: string | null
-    lastName: string | null
-    email: string | null
-    phonePrimary: string | null
-    phoneSecondary: string | null
 }
 
 interface ContactResponse {
@@ -956,5 +885,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/modules/commercial/utils/__tests__/clientEdit.spec.ts

@@ -22,12 +22,6 @@ import type { AddressFormDraft, ContactFormDraft, RibFormDraft } from '~/modules
 function mainDraft(overrides: Partial<MainFormDraft> = {}): MainFormDraft {
     return {
         companyName: 'ACME',
-        firstName: 'Jean',
-        lastName: 'Dupont',
-        email: 'jean@acme.fr',
-        phonePrimary: '05 49 11 22 33',
-        phoneSecondary: null,
-        hasSecondaryPhone: false,
         categoryIris: ['/api/categories/1'],
         relationType: null,
         distributorIri: null,
@@ -64,9 +58,10 @@ function accountingDraft(overrides: Partial<AccountingFormDraft> = {}): Accounti
 }
 
 // Champs de chaque groupe de serialisation (miroir back ClientProcessor).
+// Le contact inline (nom/prenom/telephones/email) ne fait plus partie du groupe
+// main : les coordonnees vivent desormais sur la sous-ressource ClientContact.
 const MAIN_KEYS = [
-    'companyName', 'firstName', 'lastName', 'email', 'phonePrimary',
+    'companyName', 'categories', 'distributor', 'broker', 'triageService',
-    'phoneSecondary', 'categories', 'distributor', 'broker', 'triageService',
 ]
 const INFORMATION_KEYS = [
     'description', 'competitors', 'foundedAt', 'employeesCount',
@@ -104,11 +99,6 @@ describe('buildMainPayload — scoping strict groupe client:write:main', () => {
         expect(payload.distributor).toBeNull()
         expect(payload.broker).toBeNull()
     })
-
-    it('telephone secondaire non revele : envoie null meme si une valeur traine', () => {
-        const payload = buildMainPayload(mainDraft({ hasSecondaryPhone: false, phoneSecondary: '06 00 00 00 00' }))
-        expect(payload.phoneSecondary).toBeNull()
-    })
 })
 
 describe('buildInformationPayload — scoping strict groupe client:write:information', () => {
@@ -168,19 +158,16 @@ describe('buildContactPayload / buildAddressPayload / buildRibPayload', () => {
 })
 
 describe('mapMainDraft — pre-remplissage bloc principal', () => {
-    it('formate les telephones, resout la relation et extrait les IRI', () => {
+    it('resout la relation et extrait les IRI (sans contact inline)', () => {
         const client = {
             '@id': '/api/clients/1', id: 1,
-            companyName: 'ACME', firstName: 'Jean', lastName: 'Dupont', email: 'jean@acme.fr',
+            companyName: 'ACME', triageService: true,
-            phonePrimary: '0549112233', phoneSecondary: '0600000000', triageService: true,
             categories: [{ '@id': '/api/categories/1', code: 'SECTEUR' }],
             distributor: { '@id': '/api/clients/9', companyName: 'DISTRIB' },
         } as ClientDetail
 
         const draft = mapMainDraft(client)
-        expect(draft.phonePrimary).toBe('05 49 11 22 33')
+        expect(draft.companyName).toBe('ACME')
-        expect(draft.phoneSecondary).toBe('06 00 00 00 00')
-        expect(draft.hasSecondaryPhone).toBe(true)
         expect(draft.categoryIris).toEqual(['/api/categories/1'])
         expect(draft.relationType).toBe('distributeur')
         expect(draft.distributorIri).toBe('/api/clients/9')
@@ -191,7 +178,6 @@ describe('mapMainDraft — pre-remplissage bloc principal', () => {
     it('gere les cles omises (skip_null_values) sans planter', () => {
         const draft = mapMainDraft({ '@id': '/api/clients/2', id: 2 } as ClientDetail)
         expect(draft.companyName).toBeNull()
-        expect(draft.hasSecondaryPhone).toBe(false)
         expect(draft.categoryIris).toEqual([])
         expect(draft.relationType).toBeNull()
         expect(draft.triageService).toBe(false)

frontend/modules/commercial/utils/clientConsultation.ts

@@ -93,11 +93,6 @@ export interface RelatedClientRead extends HydraRef {
 export interface ClientDetail extends HydraRef {
     id: number
     companyName?: string | null
-    firstName?: string | null
-    lastName?: string | null
-    phonePrimary?: string | null
-    phoneSecondary?: string | null
-    email?: string | null
     triageService?: boolean
     isArchived?: boolean
     categories?: CategoryRead[]

frontend/modules/commercial/utils/clientEdit.ts

@@ -24,23 +24,16 @@ import {
     type ClientDetail,
 } from '~/modules/commercial/utils/clientConsultation'
 import type { AddressFormDraft, ContactFormDraft, RibFormDraft } from '~/modules/commercial/types/clientForm'
-import { formatPhoneFR } from '~/shared/utils/phone'
 
 /**
  * Etat « plat » du bloc principal (groupe client:write:main). Distinct des
  * brouillons Contact : ces champs vivent sur le Client lui-meme (companyName,
- * contact principal, telephones, email, categories, relation, triage), pas sur
+ * categories, relation, triage), pas sur une sous-ressource ClientContact. Les
- * une sous-ressource ClientContact.
+ * coordonnees de contact (nom, prenom, telephones, email) ne sont plus portees
+ * par le Client : elles vivent exclusivement dans l'onglet Contacts.
  */
 export interface MainFormDraft {
     companyName: string | null
-    firstName: string | null
-    lastName: string | null
-    email: string | null
-    phonePrimary: string | null
-    phoneSecondary: string | null
-    /** UI : le 2e numero a ete revele (ou existait deja au chargement). */
-    hasSecondaryPhone: boolean
     /** IRI des categories rattachees (M2M). */
     categoryIris: string[]
     relationType: 'distributeur' | 'courtier' | null
@@ -96,22 +89,15 @@ export interface TabEditability {
 // ── Pre-remplissage (GET detail -> brouillons) ──────────────────────────────
 
 /**
- * Mappe le detail client vers le brouillon du bloc principal. Les telephones
+ * Mappe le detail client vers le brouillon du bloc principal. La relation
- * sont reformates XX XX XX XX XX (RG d'affichage). La relation Distributeur/
+ * Distributeur/Courtier est resolue par exclusivite (RG-1.03) et son IRI extrait
- * Courtier est resolue par exclusivite (RG-1.03) et son IRI extrait de l'embed.
+ * de l'embed.
  */
 export function mapMainDraft(client: ClientDetail): MainFormDraft {
     const relation = relationOf(client)
-    const phoneSecondary = client.phoneSecondary ?? null
 
     return {
         companyName: client.companyName ?? null,
-        firstName: client.firstName ?? null,
-        lastName: client.lastName ?? null,
-        email: client.email ?? null,
-        phonePrimary: client.phonePrimary ? formatPhoneFR(client.phonePrimary) : null,
-        phoneSecondary: phoneSecondary ? formatPhoneFR(phoneSecondary) : null,
-        hasSecondaryPhone: phoneSecondary !== null && phoneSecondary !== '',
         categoryIris: (client.categories ?? []).map(c => c['@id']),
         relationType: relation.type,
         distributorIri: iriOf(client.distributor),
@@ -157,11 +143,6 @@ export function mapAccountingFormDraft(client: ClientDetail): AccountingFormDraf
 export function buildMainPayload(main: MainFormDraft): Record<string, unknown> {
     return {
         companyName: main.companyName,
-        firstName: main.firstName || null,
-        lastName: main.lastName || null,
-        email: main.email,
-        phonePrimary: main.phonePrimary || null,
-        phoneSecondary: main.hasSecondaryPhone ? (main.phoneSecondary || null) : null,
         categories: main.categoryIris,
         distributor: main.relationType === 'distributeur' ? main.distributorIri : null,
         broker: main.relationType === 'courtier' ? main.brokerIri : null,

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
+// Appel HTTP DIRECT depuis le front (pas de proxy back), conformement a la spec
-// qu'un STUB pour ne pas se bloquer : la vraie implémentation (appels
+// M1 (§ API adresse postale). On passe par `httpExternal` et NON `useApi()` :
-// api-adresse.data.gouv.fr) viendra remplacer le CORPS des deux méthodes SANS
+// la BAN est un domaine externe, sans cookie de session ni enveloppe Hydra.
-// changer leur signature ni l'usage côté composant.
 //
-// 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,
+//   En cas d'erreur/timeout, la methode THROW une AddressAutocompleteUnavailableError.
-//   affiche un toast d'avertissement et bascule en saisie libre (MalioInputText).
+//   Le composant consommateur catch, 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.
 
-/** 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
+        // Message technique (non affiche tel quel) : le composant remonte son
-        // propre libellé i18n. Sert au debug / aux logs uniquement.
+        // propre libelle i18n. Sert au debug / aux logs uniquement.
-        super('Address autocomplete (BAN) is not available yet — ERP-66 stub.')
+        super('Address autocomplete (BAN) is not available.')
         this.name = 'AddressAutocompleteUnavailableError'
     }
 }
 
-/**
+/** Proprietes d'une « feature » GeoJSON renvoyee par la BAN (champs utilises). */
- * STUB : renvoie un composable conforme au contrat ERP-66 dont les méthodes
+interface BanFeatureProperties {
- * échouent toujours, forçant le mode dégradé côté onglet Adresse.
+    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[]> {
+        async searchCity(postalCode: string): Promise<CitySuggestion[]> {
-            throw new AddressAutocompleteUnavailableError()
+            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();
+        $client   = $this->createAdminClient();
-        $seed   = $this->seedClient('Non Billing Empty Email');
+        $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();
+        $client   = $this->createAdminClient();
-        $seed    = $this->seedClient('Address Host');
+        $seed     = $this->seedClient('Address Host');
-        $siteIri = $this->firstSiteIri();
+        $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();