chore: bump version to v0.1.71

## ERP-64 — Page Consultation client (lecture seule)

Route **`/clients/[id]`** : consultation client en lecture seule, porte vers Modification + actions Archiver / Restaurer.

### Périmètre (front uniquement)
- **`useClient(id)`** : charge le détail (embed contacts / adresses / ribs), `archive()` / `restore()` via `PATCH { isArchived }` **seul**, puis **refetch complet** (la réponse du PATCH ne porte pas l'embed). Le **409** de conflit d'homonyme à la restauration (RG-1.23) est propagé → toast dédié.
- **Page** : formulaire principal + **8 onglets** readonly en **navigation libre** (4 actifs + 4 placeholders). Onglet **Comptabilité** visible **uniquement avec `accounting.view`**.
- **Boutons** : **Modifier** si `manage` OU `accounting.manage` ; **Archiver** si `archive` et client actif ; **Restaurer** si `archive` et client archivé.
- Téléphones affichés formatés `XX XX XX XX XX`.
- Réutilise `ClientContactBlock` / `ClientAddressBlock` / `TabPlaceholderBlank` (ERP-63) en mode `readonly`.

### Libellés issus de l'embed (role-independant)
`GET /api/categories` et `/api/sites` renvoient **403 pour les rôles métier non-admin**. La page lit donc tous les libellés (catégories, sites, référentiels comptables) **directement dans le payload embarqué** — affichage correct pour tous les rôles, sans dépendre d'un `GET` de référentiel.

### Correctifs `ClientAddressBlock` (lecture seule)
- la **ville** courante est toujours présente dans les options (sinon `MalioSelect` n'affiche rien) ;
- la **rue** s'affiche en champ texte readonly (`MalioInputAutocomplete` ne réaffiche pas sa valeur liée).

### Pas de changement back
L'embed `GET /api/clients/{id}` (contacts/adresses/ribs + sites + codes catégories, gating `accounting.view`, 409 restauration) **était déjà livré par ERP-62 (#44)** — vérifié sur l'API réelle et couvert par `ClientApiTest::testGetDetailEmbedsSubCollections`, `ClientReadGroupContextBuilderTest`, `ClientArchiveTest::testRestoreConflictReturns409`.

### Tests
- Vitest : **+29 tests** (mapping payload→brouillons, options embed, permissions, archive/restore/409). Suite complète **158 OK**.
- `nuxi typecheck` : 0 erreur sur les fichiers ajoutés.
- Golden path navigateur (admin + commerciale) : readonly complet, onglet Compta + RIBs selon `accounting.view`, boutons selon rôle, bascule Archiver ↔ Restaurer.

### ⚠️ À investiguer (hors périmètre)
Le 403 sur `/categories` et `/sites` impacte aussi `useClientReferentials.loadCommon()` (un `Promise.all` qui rejette en entier) → potentiellement le **formulaire de création ERP-63 cassé pour la Commerciale** (impossible de choisir catégories/sites). À confirmer dans un ticket dédié.

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

.claude/rules/backend.md

@@ -98,6 +98,24 @@ Format obligatoire : `module.resource[.subresource].action` en snake_case.
 - Audit ManyToMany : trace automatiquement `{fieldName: {added: [ids], removed: [ids]}}` — aucune action supplementaire
 - Spec complete : @doc/audit-log.md
 
+### Libelle i18n du type d'entite (obligatoire avec `#[Auditable]`)
+
+**Toute entite `#[Auditable]` doit avoir son libelle FR dans le bloc `audit.entity` de `frontend/i18n/locales/fr.json`.** C'est la contrepartie i18n de l'attribut : sans elle, le filtre « Type d'entite » de l'audit-log affiche le type technique brut (ex: `commercial.Client`) au lieu d'un libelle lisible.
+
+Pourquoi : le filtre est dynamique (`GET /audit-log-entity-types` renvoie les `entity_type` distincts presents en base) ; des qu'un module audite une entite, son type y apparait. Le front (`formatEntityType`, `audit-log.vue`) construit la cle `audit.entity.<module>_<entity>` et, faute de traduction, **retombe silencieusement** sur le type brut.
+
+Derivation de la cle (emplacement centralise + schema flat — decision ERP-99) :
+
+| FQCN entite | `entity_type` (back) | Cle i18n (flat) |
+|---|---|---|
+| `App\Module\Commercial\Domain\Entity\Client` | `commercial.Client` | `commercial_client` |
+| `App\Module\Commercial\Domain\Entity\ClientAddress` | `commercial.ClientAddress` | `commercial_clientaddress` |
+| `App\Module\Catalog\Domain\Entity\Category` | `catalog.Category` | `catalog_category` |
+
+Regle : `strtolower(module)` + `_` + `strtolower(Entity)`. Ajouter sa cle de libelle audit fait partie de la **definition de fini** d'une entite metier auditee.
+
+**Garde-fou** : `tests/Architecture/AuditableEntitiesHaveI18nLabelTest` scanne les entites `#[Auditable]` et echoue si une seule n'a pas sa cle `audit.entity.*`. Conclusion : creer une entite `#[Auditable]` sans son libelle i18n casse `make test`.
+
 ## Timestampable + Blamable (obligatoire pour entites metier)
 
 Toute **nouvelle** entite metier sous `src/Module/*/Domain/Entity/` doit porter les 4 colonnes `created_at` / `updated_at` / `created_by` / `updated_by`, remplies automatiquement. Trois lignes a ajouter a l'entite :

config/packages/lexik_jwt_authentication.yaml

@@ -3,6 +3,14 @@ lexik_jwt_authentication:
     public_key: '%env(resolve:JWT_PUBLIC_KEY)%'
     pass_phrase: '%env(JWT_PASSPHRASE)%'
     token_ttl: '%env(int:JWT_TOKEN_TTL)%'
+    # Tolerance d'horloge (en secondes) appliquee a la validation des claims
+    # temporels iat / nbf / exp (LooseValidAt cote lcobucci). Sans cette marge
+    # (defaut 0), un recul d'horloge entre la signature (/login_check) et la
+    # requete suivante rend iat/nbf « dans le futur » -> « Invalid JWT Token »
+    # (401). Observe en dev sous WSL2/Docker (horloge CLOCK_REALTIME non
+    # monotone) : flakes intermittents de la suite PHPUnit (ERP-98). Benefice
+    # aussi en prod si les noeuds derivent legerement entre eux.
+    clock_skew: 15
     remove_token_from_body_when_cookies_used: true
     token_extractors:
         authorization_header:

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.66'
+    app.version: '0.1.71'

frontend/i18n/locales/fr.json

@@ -87,7 +87,24 @@
                 "archiveSuccess": "Client archivé avec succès",
                 "restoreSuccess": "Client restauré avec succès",
                 "error": "Une erreur est survenue. Réessayez.",
-                "exportError": "L'export du répertoire clients a échoué. Réessayez."
+                "exportError": "L'export du répertoire clients a échoué. Réessayez.",
+                "restoreConflict": "Impossible de restaurer : un client actif portant ce nom existe déjà."
+            },
+            "consultation": {
+                "title": "Consultation client",
+                "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 ?"
+                },
+                "confirmRestore": {
+                    "title": "Restaurer le client",
+                    "message": "Ce client réapparaîtra dans le répertoire actif. Confirmer la restauration ?"
+                }
             },
             "validation": {
                 "informationRequiredForCommercial": "Les informations de l'entreprise sont obligatoires pour le rôle Commerciale.",
@@ -99,6 +116,90 @@
                 "phoneFormat": "Format de téléphone invalide (attendu : XX XX XX XX XX).",
                 "emailFormat": "Format d'email invalide.",
                 "addressCategoryForbidden": "Une catégorie « Distributeur » ou « Courtier » ne peut pas qualifier une adresse."
+            },
+            "form": {
+                "title": "Ajouter un client",
+                "back": "Précédent",
+                "submit": "Valider",
+                "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",
+                    "relationDistributor": "Dépend du distributeur",
+                    "relationBroker": "Dépend du courtier",
+                    "distributorName": "Nom du distributeur",
+                    "brokerName": "Nom du courtier",
+                    "triageService": "Prestation de triage"
+                },
+                "information": {
+                    "description": "Description",
+                    "competitors": "Concurrent",
+                    "foundedAt": "Date de création",
+                    "employeesCount": "Nombre de salariés",
+                    "revenueAmount": "CA",
+                    "profitAmount": "Résultat",
+                    "directorName": "Dirigeant"
+                },
+                "contact": {
+                    "title": "Contact {n}",
+                    "lastName": "Nom",
+                    "firstName": "Prénom",
+                    "jobTitle": "Fonction",
+                    "email": "Email",
+                    "phonePrimary": "Téléphone",
+                    "phoneSecondary": "Téléphone (2)",
+                    "addPhone": "Ajouter un numéro",
+                    "remove": "Supprimer le contact",
+                    "add": "Nouveau contact"
+                },
+                "address": {
+                    "title": "Adresse {n}",
+                    "prospect": "Prospect",
+                    "delivery": "Adresse de livraison",
+                    "billing": "Facturation",
+                    "categories": "Catégorie",
+                    "country": "Pays",
+                    "postalCode": "Code postal",
+                    "city": "Ville",
+                    "street": "Adresse",
+                    "streetComplement": "Adresse complémentaire",
+                    "sites": "Sites Starseed",
+                    "contacts": "Contact(s) rattaché(s)",
+                    "billingEmail": "Email de facturation",
+                    "remove": "Supprimer l'adresse",
+                    "add": "Nouvelle adresse",
+                    "degraded": "Service d'adresse indisponible : saisie de la ville et de l'adresse en mode libre."
+                },
+                "accounting": {
+                    "siren": "SIREN",
+                    "accountNumber": "Numéro de compte",
+                    "tvaMode": "Mode de TVA",
+                    "nTva": "N° de TVA",
+                    "paymentDelay": "Délai de règlement",
+                    "paymentType": "Type de règlement",
+                    "bank": "Banque",
+                    "ribTitle": "RIB {n}",
+                    "ribLabel": "Libellé",
+                    "ribBic": "BIC",
+                    "ribIban": "IBAN",
+                    "addRib": "Ajouter un RIB",
+                    "removeRib": "Supprimer le RIB"
+                },
+                "confirmDelete": {
+                    "title": "Confirmer la suppression",
+                    "contact": "Supprimer ce contact ?",
+                    "address": "Supprimer cette adresse ?",
+                    "rib": "Supprimer ce RIB ?",
+                    "cancel": "Annuler",
+                    "confirm": "Confirmer"
+                }
             }
         }
     },
@@ -141,7 +242,12 @@
             "core_user":              "Utilisateur",
             "core_role":              "Rôle",
             "core_permission":        "Permission",
-            "sites_site":      "Site"
+            "sites_site":             "Site",
+            "catalog_category":       "Catégorie",
+            "commercial_client":      "Client",
+            "commercial_clientaddress": "Adresse client",
+            "commercial_clientcontact": "Contact client",
+            "commercial_clientrib":   "RIB client"
         },
         "empty": "Aucune activité enregistrée",
         "no_results": "Aucun résultat pour ces filtres",

frontend/modules/commercial/components/ClientAddressBlock.vue

@@ -0,0 +1,313 @@
+<template>
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+        <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:delete-outline"
+            variant="ghost"
+            button-class="absolute top-3 right-3"
+            v-bind="{ ariaLabel: t('commercial.clients.form.address.remove') }"
+            @click="$emit('remove')"
+        />
+
+        <!-- Usage de l'adresse : Prospect exclusif de Livraison/Facturation
+             (RG-1.06/07/08). L'exclusivite est appliquee au toggle (cocher l'un
+             decoche l'autre) plutot qu'en masquant les options. -->
+        <MalioCheckbox
+            :model-value="model.isProspect"
+            :label="t('commercial.clients.form.address.prospect')"
+            group-class="self-center"
+            :readonly="readonly"
+            @update:model-value="(v: boolean) => toggleFlag('isProspect', v)"
+        />
+        <MalioCheckbox
+            :model-value="model.isDelivery"
+            :label="t('commercial.clients.form.address.delivery')"
+            group-class="self-center"
+            :readonly="readonly"
+            @update:model-value="(v: boolean) => toggleFlag('isDelivery', v)"
+        />
+        <MalioCheckbox
+            :model-value="model.isBilling"
+            :label="t('commercial.clients.form.address.billing')"
+            group-class="self-center"
+            :readonly="readonly"
+            @update:model-value="(v: boolean) => toggleFlag('isBilling', v)"
+        />
+
+        <!-- Cellule vide : laisse un trou en position 4 (ligne 1) pour que
+             Categorie reparte au debut de la ligne suivante. -->
+        <div aria-hidden="true" />
+
+        <MalioSelectCheckbox
+            :model-value="model.categoryIris"
+            :options="categoryOptions"
+            :label="t('commercial.clients.form.address.categories')"
+            :display-tag="true"
+            :disabled="readonly"
+            @update:model-value="(v: (string | number)[]) => update('categoryIris', v.map(String))"
+        />
+
+        <MalioSelect
+            :model-value="model.country"
+            :options="countryOptions"
+            :label="t('commercial.clients.form.address.country')"
+            :disabled="readonly"
+            @update:model-value="(v: string | number | null) => update('country', String(v ?? 'France'))"
+        />
+
+        <MalioInputText
+            :model-value="model.postalCode"
+            :label="t('commercial.clients.form.address.postalCode')"
+            :mask="POSTAL_CODE_MASK"
+            :readonly="readonly"
+            @update:model-value="onPostalCodeChange"
+        />
+
+        <!-- Ville : MalioSelect alimente par le code postal (BAN). En mode
+             degrade (service indisponible), bascule en saisie libre. -->
+        <MalioSelect
+            v-if="!degraded"
+            :model-value="model.city"
+            :options="cityOptions"
+            :label="t('commercial.clients.form.address.city')"
+            :disabled="readonly"
+            empty-option-label=""
+            @update:model-value="(v: string | number | null) => update('city', v === null ? null : String(v))"
+        />
+        <MalioInputText
+            v-else
+            :model-value="model.city"
+            :label="t('commercial.clients.form.address.city')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('city', v)"
+        />
+
+        <!-- Adresse + Adresse complementaire sur 2 colonnes : on wrappe car
+             MalioInputText/Autocomplete (inheritAttrs:false) renvoient `class`
+             sur l'input interne, pas sur la cellule de grille. Le wrapper porte
+             le col-span-2, le champ le remplit (w-full). -->
+        <div class="col-span-2">
+            <!-- Adresse : saisie assistee (BAN) en edition ; champ texte simple en
+                 mode degrade OU en lecture seule (MalioInputAutocomplete ne reaffiche
+                 pas sa valeur liee, il n'afficherait rien en readonly). -->
+            <MalioInputAutocomplete
+                v-if="!degraded && !readonly"
+                :model-value="model.street"
+                :options="addressOptions"
+                :loading="addressLoading"
+                :min-search-length="3"
+                :label="t('commercial.clients.form.address.street')"
+                :readonly="readonly"
+                @update:model-value="(v: string | number | null) => update('street', v === null ? null : String(v))"
+                @search="onAddressSearch"
+                @select="onAddressSelect"
+            />
+            <MalioInputText
+                v-else
+                :model-value="model.street"
+                :label="t('commercial.clients.form.address.street')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('street', v)"
+            />
+        </div>
+
+        <div class="col-span-2">
+            <MalioInputText
+                :model-value="model.streetComplement"
+                :label="t('commercial.clients.form.address.streetComplement')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('streetComplement', v)"
+            />
+        </div>
+
+        <!-- Sites Starseed : cases a cocher inline (>= 1 obligatoire, RG-1.10). -->
+        <div class="flex justify-between">
+            <MalioCheckbox
+                v-for="site in siteOptions"
+                :key="site.value"
+                :model-value="model.siteIris.includes(site.value)"
+                :label="site.label"
+                group-class="w-auto self-center"
+                :readonly="readonly"
+                @update:model-value="(v: boolean) => toggleSite(site.value, v)"
+            />
+        </div>
+
+        <MalioSelectCheckbox
+            :model-value="model.contactIris"
+            :options="contactOptions"
+            :label="t('commercial.clients.form.address.contacts')"
+            :display-tag="true"
+            :disabled="readonly"
+            @update:model-value="(v: (string | number)[]) => update('contactIris', v.map(String))"
+        />
+
+        <!-- Email de facturation : visible/obligatoire seulement si Facturation
+             est coche (RG-1.11). -->
+        <MalioInputText
+            v-if="isBillingEmailRequired(model)"
+            :model-value="model.billingEmail"
+            :label="t('commercial.clients.form.address.billingEmail')"
+            :required="true"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('billingEmail', v)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    applyProspectExclusivity,
+    isBillingEmailRequired,
+    type AddressFlagsDraft,
+} from '~/modules/commercial/utils/clientFormRules'
+import { useAddressAutocomplete, type AddressSuggestion } from '~/shared/composables/useAddressAutocomplete'
+import type { CategoryOption, RefOption } from '~/modules/commercial/composables/useClientReferentials'
+import type { AddressFormDraft } from '~/modules/commercial/types/clientForm'
+
+// Masque code postal FR : 5 chiffres.
+const POSTAL_CODE_MASK = '#####'
+
+const props = defineProps<{
+    /** Brouillon de l'adresse (v-model). */
+    modelValue: AddressFormDraft
+    title: string
+    /** Categories autorisees sur une adresse (DISTRIBUTEUR/COURTIER exclus, RG-1.29). */
+    categoryOptions: CategoryOption[]
+    /** Sites Starseed disponibles. */
+    siteOptions: RefOption[]
+    /** Contacts deja saisis, rattachables a l'adresse. */
+    contactOptions: RefOption[]
+    /** Pays disponibles (France par defaut). */
+    countryOptions: RefOption[]
+    removable?: boolean
+    readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: AddressFormDraft]
+    'remove': []
+    /** Emis une fois quand le service d'autocompletion bascule en indisponible. */
+    'degraded': []
+}>()
+
+const { t } = useI18n()
+const autocomplete = useAddressAutocomplete()
+
+const model = computed(() => props.modelValue)
+
+// Mode degrade : service BAN indisponible → Ville/Adresse en saisie libre.
+const degraded = ref(false)
+// Villes proposees par la BAN (alimentees a la saisie du code postal).
+const banCityOptions = ref<RefOption[]>([])
+const addressOptions = 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)
+// afficherait un champ vide en lecture seule (consultation 1.11) ou en edition
+// d'une adresse existante (1.12), ou la BAN n'a pas (re)peuple les suggestions.
+const cityOptions = computed<RefOption[]>(() => {
+    const current = props.modelValue.city
+    if (current && !banCityOptions.value.some(o => o.value === current)) {
+        return [{ value: current, label: current }, ...banCityOptions.value]
+    }
+    return banCityOptions.value
+})
+const addressLoading = ref(false)
+// Conserve les suggestions d'adresse pour retrouver ville/CP au moment du select.
+let lastAddressSuggestions: AddressSuggestion[] = []
+
+/** Emet un nouveau brouillon avec le champ modifie (immutabilite). */
+function update<K extends keyof AddressFormDraft>(field: K, value: AddressFormDraft[K]): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+/** Coche/decoche un site Starseed rattache a l'adresse (M2M par IRI, RG-1.10). */
+function toggleSite(siteIri: string, selected: boolean): void {
+    const current = props.modelValue.siteIris
+    const next = selected
+        ? [...current, siteIri]
+        : current.filter(iri => iri !== siteIri)
+    update('siteIris', next)
+}
+
+/** Applique l'exclusivite Prospect / (Livraison|Facturation) au changement. */
+function toggleFlag(field: keyof AddressFlagsDraft, value: boolean): void {
+    const flags = applyProspectExclusivity(
+        { isProspect: model.value.isProspect, isDelivery: model.value.isDelivery, isBilling: model.value.isBilling },
+        field,
+        value,
+    )
+    emit('update:modelValue', { ...props.modelValue, ...flags })
+}
+
+/** Bascule définitivement en mode degrade et previent le parent (toast unique). */
+function enterDegraded(): void {
+    if (!degraded.value) {
+        degraded.value = true
+        emit('degraded')
+    }
+}
+
+/** Saisie du code postal → met a jour le champ + interroge la BAN pour la ville. */
+async function onPostalCodeChange(value: string): Promise<void> {
+    update('postalCode', value)
+
+    if (degraded.value) {
+        return
+    }
+    const digits = (value ?? '').replace(/\D/g, '')
+    if (digits.length < 5) {
+        return
+    }
+    try {
+        const suggestions = await autocomplete.searchCity(digits)
+        banCityOptions.value = suggestions.map(s => ({ value: s.city, label: s.city }))
+    }
+    catch {
+        enterDegraded()
+    }
+}
+
+/** Recherche d'adresse assistee (event de MalioInputAutocomplete). */
+async function onAddressSearch(query: string): Promise<void> {
+    if (degraded.value) {
+        return
+    }
+    addressLoading.value = true
+    try {
+        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 }))
+    }
+    catch {
+        enterDegraded()
+    }
+    finally {
+        addressLoading.value = false
+    }
+}
+
+/**
+ * Selection d'une suggestion d'adresse → remplit rue + ville + CP.
+ * Le type d'option suit le contrat MalioInputAutocomplete ({ label, value }).
+ */
+function onAddressSelect(option: { label: string, value: string | number } | null): void {
+    if (option === null) {
+        return
+    }
+    const suggestion = lastAddressSuggestions.find(s => s.street === option.value)
+    if (!suggestion) {
+        update('street', String(option.value))
+        return
+    }
+    emit('update:modelValue', {
+        ...props.modelValue,
+        street: suggestion.street,
+        city: suggestion.city,
+        postalCode: suggestion.postalCode,
+    })
+}
+</script>

frontend/modules/commercial/components/ClientContactBlock.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+             non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
+             ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:delete-outline"
+            variant="ghost"
+            button-class="absolute top-3 right-3"
+            v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            :model-value="model.lastName"
+            :label="t('commercial.clients.form.contact.lastName')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('lastName', v)"
+        />
+        <MalioInputText
+            :model-value="model.firstName"
+            :label="t('commercial.clients.form.contact.firstName')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('firstName', v)"
+        />
+        <MalioInputText
+            :model-value="model.jobTitle"
+            :label="t('commercial.clients.form.contact.jobTitle')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('jobTitle', v)"
+        />
+        <MalioInputEmail
+            :model-value="model.email"
+            :label="t('commercial.clients.form.contact.email')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('email', v)"
+        />
+        <MalioInputPhone
+            :model-value="model.phonePrimary"
+            :label="t('commercial.clients.form.contact.phonePrimary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :addable="!model.hasSecondaryPhone && !readonly"
+            :add-button-label="t('commercial.clients.form.contact.addPhone')"
+            @update:model-value="(v: string) => update('phonePrimary', v)"
+            @add="revealSecondaryPhone"
+        />
+        <MalioInputPhone
+            v-if="model.hasSecondaryPhone"
+            :model-value="model.phoneSecondary"
+            :label="t('commercial.clients.form.contact.phoneSecondary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('phoneSecondary', v)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ContactFormDraft } from '~/modules/commercial/types/clientForm'
+
+// Masque telephone FR : 5 groupes de 2 chiffres (la normalisation finale reste
+// serveur, cf. formatPhoneFR re-applique a la valeur renvoyee).
+const PHONE_MASK = '## ## ## ## ##'
+
+const props = defineProps<{
+    /** Brouillon du contact (v-model). */
+    modelValue: ContactFormDraft
+    /** Titre du bloc (ex: « Contact 1 »). */
+    title: string
+    /** Affiche l'icone de suppression (1er bloc non supprimable, RG-1.14). */
+    removable?: boolean
+    /** Bloc en lecture seule (onglet valide). */
+    readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: ContactFormDraft]
+    'remove': []
+}>()
+
+const { t } = useI18n()
+
+// Alias local pour la lisibilite du template.
+const model = computed(() => props.modelValue)
+
+/** Emet un nouveau brouillon avec le champ modifie (immutabilite). */
+function update<K extends keyof ContactFormDraft>(field: K, value: ContactFormDraft[K]): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+/** Revele le 2e numero (RG-1.02/1.20 : max 1 secondaire, le « + » disparait). */
+function revealSecondaryPhone(): void {
+    emit('update:modelValue', { ...props.modelValue, hasSecondaryPhone: true })
+}
+</script>

frontend/modules/commercial/components/TabPlaceholderBlank.vue

@@ -0,0 +1,14 @@
+<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/composables/__tests__/useClient.spec.ts

@@ -0,0 +1,95 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Mocks des composables auto-importes par Nuxt (indisponibles sous happy-dom).
+const mockGet = vi.hoisted(() => vi.fn())
+const mockPatch = vi.hoisted(() => vi.fn())
+
+vi.stubGlobal('useApi', () => ({
+    get: mockGet,
+    post: vi.fn(),
+    put: vi.fn(),
+    patch: mockPatch,
+    delete: vi.fn(),
+}))
+
+const { useClient } = await import('../useClient')
+
+const SAMPLE = { '@id': '/api/clients/42', id: 42, companyName: 'ACME', isArchived: false }
+
+describe('useClient', () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockPatch.mockReset()
+        mockGet.mockResolvedValue(SAMPLE)
+        mockPatch.mockResolvedValue({ ...SAMPLE, isArchived: true })
+    })
+
+    it('charge le detail via GET /clients/{id} en Hydra, sans toast', async () => {
+        const { client, load } = useClient(42)
+        await load()
+
+        expect(mockGet).toHaveBeenCalledWith(
+            '/clients/42',
+            {},
+            expect.objectContaining({
+                headers: { Accept: 'application/ld+json' },
+                toast: false,
+            }),
+        )
+        expect(client.value).toEqual(SAMPLE)
+    })
+
+    it('bascule loading pendant le chargement et le retombe a false', async () => {
+        const { loading, load } = useClient(42)
+        const promise = load()
+        expect(loading.value).toBe(true)
+        await promise
+        expect(loading.value).toBe(false)
+    })
+
+    it('marque error et laisse client null si le GET echoue (404...)', async () => {
+        mockGet.mockRejectedValueOnce(new Error('not found'))
+        const { client, error, load } = useClient(99)
+        await load()
+        expect(error.value).toBe(true)
+        expect(client.value).toBeNull()
+    })
+
+    it('archive() PATCHe { isArchived: true } sans toast puis RECHARGE le detail complet', async () => {
+        // 1er GET = chargement initial, 2e GET = rechargement post-archivage.
+        mockGet.mockResolvedValueOnce(SAMPLE)
+        mockGet.mockResolvedValueOnce({ ...SAMPLE, isArchived: true })
+        const { client, load, archive } = useClient(42)
+        await load()
+        await archive()
+
+        expect(mockPatch).toHaveBeenCalledWith(
+            '/clients/42',
+            { isArchived: true },
+            expect.objectContaining({ toast: false }),
+        )
+        // Le detail est re-fetch (le PATCH ne renvoie pas l'embed complet).
+        expect(mockGet).toHaveBeenCalledTimes(2)
+        expect(client.value?.isArchived).toBe(true)
+    })
+
+    it('restore() PATCHe { isArchived: false } (payload isArchived SEUL)', async () => {
+        const { load, restore } = useClient(42)
+        await load()
+        await restore()
+
+        expect(mockPatch).toHaveBeenCalledWith(
+            '/clients/42',
+            { isArchived: false },
+            expect.objectContaining({ toast: false }),
+        )
+    })
+
+    it('propage l\'erreur (ex: 409 conflit homonyme RG-1.23) au lieu de l\'avaler', async () => {
+        const conflict = { response: { status: 409 } }
+        mockPatch.mockRejectedValueOnce(conflict)
+        const { load, restore } = useClient(42)
+        await load()
+        await expect(restore()).rejects.toBe(conflict)
+    })
+})

frontend/modules/commercial/composables/useClient.ts

@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+import type { ClientDetail } from '~/modules/commercial/utils/clientConsultation'
+
+/**
+ * Chargement et actions d'archivage d'un client unique (ecran « Consultation
+ * client », 1.11). Lit le detail embarque via `GET /api/clients/{id}` (contacts /
+ * adresses / ribs sous `client:item:read` / `client:read:accounting`) et expose
+ * les bascules d'archivage (PATCH `isArchived` SEUL — tout autre champ => 422).
+ *
+ * L'en-tete `Accept: application/ld+json` est impose pour obtenir le payload
+ * Hydra complet (sans lui, API Platform 4 renvoie une representation reduite).
+ *
+ * Etat 100 % local a l'instance (refs) — aucune persistance URL. Les erreurs
+ * d'archivage/restauration (notamment le 409 RG-1.23 : homonyme actif a la
+ * restauration) sont PROPAGEES a l'appelant, qui decide du toast a afficher.
+ */
+export function useClient(id: number | string) {
+    const api = useApi()
+
+    const client = ref<ClientDetail | null>(null)
+    const loading = ref(false)
+    const error = ref(false)
+
+    /** Recupere le detail complet (embed contacts/adresses/ribs + comptabilite). */
+    function fetchDetail(): Promise<ClientDetail> {
+        return api.get<ClientDetail>(
+            `/clients/${id}`,
+            {},
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        )
+    }
+
+    /** Charge le detail du client. En cas d'echec : `error = true`, `client = null`. */
+    async function load(): Promise<void> {
+        loading.value = true
+        error.value = false
+        try {
+            client.value = await fetchDetail()
+        }
+        catch {
+            error.value = true
+            client.value = null
+        }
+        finally {
+            loading.value = false
+        }
+    }
+
+    /**
+     * Bascule l'archivage (PATCH `isArchived` SEUL — tout autre champ => 422),
+     * puis RECHARGE le detail complet : la reponse du PATCH ne porte que le groupe
+     * `client:read` (ni l'embed contacts/adresses/ribs ni les libelles des
+     * referentiels comptables), un simple merge laisserait l'affichage incoherent.
+     * Toute erreur (notamment le 409 d'homonyme actif a la restauration, RG-1.23)
+     * est propagee a l'appelant AVANT le rechargement.
+     */
+    async function setArchived(isArchived: boolean): Promise<void> {
+        await api.patch(`/clients/${id}`, { isArchived }, { toast: false })
+        client.value = await fetchDetail()
+    }
+
+    return {
+        client,
+        loading,
+        error,
+        load,
+        archive: () => setArchived(true),
+        restore: () => setArchived(false),
+    }
+}

frontend/modules/commercial/composables/useClientReferentials.ts

@@ -0,0 +1,141 @@
+import { ref } from 'vue'
+
+/**
+ * Charge les referentiels (listes courtes) alimentant les selects de l'ecran
+ * « Ajouter un client » : categories, sites, modes de TVA, delais et types de
+ * reglement, banques, et les listes distributeurs / courtiers.
+ *
+ * Toutes les collections sont recuperees en entier via l'echappatoire prevue
+ * `?pagination=false` (referentiels de quelques dizaines d'entrees max), avec
+ * l'en-tete `Accept: application/ld+json` impose par API Platform 4 pour obtenir
+ * l'enveloppe Hydra (`member`). Les valeurs d'option sont les IRI Hydra (`@id`)
+ * pour pouvoir etre renvoyees telles quelles dans les payloads POST/PATCH
+ * (relations ManyToOne / ManyToMany).
+ *
+ * Etat 100 % local a l'instance (refs) — aucune persistance URL.
+ */
+
+/** Option generique au format attendu par MalioSelect / MalioSelectCheckbox ({ label, value }). */
+export interface RefOption {
+    value: string
+    label: string
+}
+
+/** Option de type de reglement enrichie de son code stable (RG-1.12 / RG-1.13). */
+export interface PaymentTypeOption extends RefOption {
+    code: string
+}
+
+/** Option de categorie enrichie de son code stable (filtrage RG-1.29 cote adresse). */
+export interface CategoryOption extends RefOption {
+    code: string
+}
+
+/** Option de client (distributeur / courtier) — value = IRI du client lie. */
+export type ClientOption = RefOption
+
+interface HydraMember {
+    '@id': string
+}
+
+interface CategoryMember extends HydraMember {
+    code: string
+    name: string
+}
+
+interface SiteMember extends HydraMember {
+    name: string
+}
+
+interface ReferentialMember extends HydraMember {
+    code: string
+    label: string
+}
+
+interface ClientMember extends HydraMember {
+    companyName: string
+}
+
+const LD_JSON_HEADERS = { Accept: 'application/ld+json' }
+
+export function useClientReferentials() {
+    const api = useApi()
+
+    const categories = ref<CategoryOption[]>([])
+    const sites = ref<RefOption[]>([])
+    const tvaModes = ref<RefOption[]>([])
+    const paymentDelays = ref<RefOption[]>([])
+    const paymentTypes = ref<PaymentTypeOption[]>([])
+    const banks = ref<RefOption[]>([])
+    const distributors = ref<ClientOption[]>([])
+    const brokers = ref<ClientOption[]>([])
+
+    /** Recupere une collection complete (pagination desactivee) en Hydra. */
+    async function fetchAll<T extends HydraMember>(
+        url: string,
+        query: Record<string, string | string[]> = {},
+    ): Promise<T[]> {
+        const res = await api.get<{ member?: T[] }>(
+            url,
+            { pagination: 'false', ...query },
+            { headers: LD_JSON_HEADERS, toast: false },
+        )
+        return res.member ?? []
+    }
+
+    /**
+     * Charge en parallele les referentiels communs (hors distributeurs/courtiers,
+     * charges a la demande selon la relation choisie). Les selects compta ne sont
+     * pertinents que si l'utilisateur a acces a l'onglet, mais le cout est
+     * negligeable et simplifie l'orchestration.
+     */
+    async function loadCommon(): Promise<void> {
+        const [cats, sitesList, tva, delays, types, banksList] = await Promise.all([
+            fetchAll<CategoryMember>('/categories'),
+            fetchAll<SiteMember>('/sites'),
+            fetchAll<ReferentialMember>('/tva_modes'),
+            fetchAll<ReferentialMember>('/payment_delays'),
+            fetchAll<ReferentialMember>('/payment_types'),
+            fetchAll<ReferentialMember>('/banks'),
+        ])
+
+        categories.value = cats.map(c => ({ value: c['@id'], label: c.name, code: c.code }))
+        sites.value = sitesList.map(s => ({ value: s['@id'], label: s.name }))
+        tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label }))
+        paymentDelays.value = delays.map(d => ({ value: d['@id'], label: d.label }))
+        paymentTypes.value = types.map(t => ({ value: t['@id'], label: t.label, code: t.code }))
+        banks.value = banksList.map(b => ({ value: b['@id'], label: b.label }))
+    }
+
+    /** Liste des clients pouvant etre choisis comme distributeur (code DISTRIBUTEUR). */
+    async function loadDistributors(): Promise<void> {
+        if (distributors.value.length > 0) {
+            return
+        }
+        const clients = await fetchAll<ClientMember>('/clients', { categoryCode: 'DISTRIBUTEUR' })
+        distributors.value = clients.map(c => ({ value: c['@id'], label: c.companyName }))
+    }
+
+    /** Liste des clients pouvant etre choisis comme courtier (code COURTIER). */
+    async function loadBrokers(): Promise<void> {
+        if (brokers.value.length > 0) {
+            return
+        }
+        const clients = await fetchAll<ClientMember>('/clients', { categoryCode: 'COURTIER' })
+        brokers.value = clients.map(c => ({ value: c['@id'], label: c.companyName }))
+    }
+
+    return {
+        categories,
+        sites,
+        tvaModes,
+        paymentDelays,
+        paymentTypes,
+        banks,
+        distributors,
+        brokers,
+        loadCommon,
+        loadDistributors,
+        loadBrokers,
+    }
+}

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

@@ -0,0 +1,481 @@
+<template>
+    <div>
+        <!-- En-tete : retour repertoire + nom du client + actions (Modifier / Archiver|Restaurer). -->
+        <div class="flex items-center gap-3">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.clients.consultation.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[32px] font-bold text-m-primary">{{ headerTitle }}</h1>
+
+            <!-- gap-12 = 48px : meme espacement que Ajouter / Filtres du repertoire. -->
+            <div class="ml-auto flex items-center gap-12">
+                <MalioButton
+                    v-if="canEdit"
+                    variant="secondary"
+                    icon-name="mdi:pencil-outline"
+                    icon-position="left"
+                    :label="t('commercial.clients.action.edit')"
+                    @click="goEdit"
+                />
+                <MalioButton
+                    v-if="showArchive"
+                    variant="secondary"
+                    icon-name="mdi:archive-arrow-down-outline"
+                    icon-position="left"
+                    :label="t('commercial.clients.action.archive')"
+                    @click="askToggleArchive"
+                />
+                <MalioButton
+                    v-if="showRestore"
+                    variant="secondary"
+                    icon-name="mdi:archive-arrow-up-outline"
+                    icon-position="left"
+                    :label="t('commercial.clients.action.restore')"
+                    @click="askToggleArchive"
+                />
+            </div>
+        </div>
+
+        <!-- Etats de chargement / introuvable. -->
+        <p v-if="loading" class="mt-12 text-center text-black/60">{{ t('commercial.clients.consultation.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('commercial.clients.consultation.notFound') }}</p>
+
+        <template v-else-if="client">
+            <!-- ── Formulaire principal (lecture seule) ──────────────────────── -->
+            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+                <MalioInputText
+                    :model-value="client.companyName"
+                    :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"
+                    :label="t('commercial.clients.form.main.categories')"
+                    :display-tag="true"
+                    disabled
+                />
+                <MalioInputPhone
+                    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')"
+                    disabled
+                />
+                <MalioInputText
+                    v-if="relation.type"
+                    :model-value="relation.name"
+                    :label="relation.type === 'distributeur' ? t('commercial.clients.form.main.distributorName') : t('commercial.clients.form.main.brokerName')"
+                    readonly
+                />
+                <MalioCheckbox
+                    :model-value="client.triageService === true"
+                    :label="t('commercial.clients.form.main.triageService')"
+                    group-class="self-center"
+                    readonly
+                />
+            </div>
+
+            <!-- ── Onglets (navigation libre, tout en lecture seule) ─────────── -->
+            <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
+                <!-- Onglet Information -->
+                <template #information>
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                        <MalioInputTextArea
+                            :model-value="information.description"
+                            :label="t('commercial.clients.form.information.description')"
+                            resize="none"
+                            group-class="row-span-2 pt-1"
+                            text-input="h-full text-lg"
+                            disabled
+                        />
+                        <MalioInputText
+                            :model-value="information.competitors"
+                            :label="t('commercial.clients.form.information.competitors')"
+                            readonly
+                        />
+                        <MalioDate
+                            :model-value="information.foundedAt"
+                            :label="t('commercial.clients.form.information.foundedAt')"
+                            readonly
+                        />
+                        <MalioInputText
+                            :model-value="information.employeesCount"
+                            :label="t('commercial.clients.form.information.employeesCount')"
+                            readonly
+                        />
+                        <MalioInputAmount
+                            :model-value="information.revenueAmount"
+                            :label="t('commercial.clients.form.information.revenueAmount')"
+                            disabled
+                        />
+                        <MalioInputText
+                            :model-value="information.directorName"
+                            :label="t('commercial.clients.form.information.directorName')"
+                            readonly
+                        />
+                        <MalioInputAmount
+                            :model-value="information.profitAmount"
+                            :label="t('commercial.clients.form.information.profitAmount')"
+                            disabled
+                        />
+                    </div>
+                </template>
+
+                <!-- Onglet Contact -->
+                <template #contact>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <ClientContactBlock
+                            v-for="(contact, index) in contacts"
+                            :key="contact.id ?? index"
+                            :model-value="contact"
+                            :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>
+
+                <!-- Onglet Adresse -->
+                <template #address>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <ClientAddressBlock
+                            v-for="(view, index) in addressViews"
+                            :key="view.draft.id ?? index"
+                            :model-value="view.draft"
+                            :title="t('commercial.clients.form.address.title', { n: index + 1 })"
+                            :category-options="view.categoryOptions"
+                            :site-options="view.siteOptions"
+                            :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>
+
+                <!-- Onglet Comptabilite (present uniquement si accounting.view). -->
+                <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">
+                                <MalioInputText
+                                    :model-value="accounting.siren"
+                                    :label="t('commercial.clients.form.accounting.siren')"
+                                    :mask="SIREN_MASK"
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="accounting.accountNumber"
+                                    :label="t('commercial.clients.form.accounting.accountNumber')"
+                                    readonly
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.tvaModeIri"
+                                    :options="tvaModeOptions"
+                                    :label="t('commercial.clients.form.accounting.tvaMode')"
+                                    empty-option-label=""
+                                    disabled
+                                />
+                                <MalioInputText
+                                    :model-value="accounting.nTva"
+                                    :label="t('commercial.clients.form.accounting.nTva')"
+                                    readonly
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.paymentDelayIri"
+                                    :options="paymentDelayOptions"
+                                    :label="t('commercial.clients.form.accounting.paymentDelay')"
+                                    empty-option-label=""
+                                    disabled
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.paymentTypeIri"
+                                    :options="paymentTypeOptions"
+                                    :label="t('commercial.clients.form.accounting.paymentType')"
+                                    empty-option-label=""
+                                    disabled
+                                />
+                                <MalioSelect
+                                    v-if="accounting.bankIri"
+                                    :model-value="accounting.bankIri"
+                                    :options="bankOptions"
+                                    :label="t('commercial.clients.form.accounting.bank')"
+                                    empty-option-label=""
+                                    disabled
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Blocs RIB (0..n), lecture seule. -->
+                        <div
+                            v-for="(rib, index) in ribs"
+                            :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">
+                                <MalioInputText
+                                    :model-value="rib.label"
+                                    :label="t('commercial.clients.form.accounting.ribLabel')"
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="rib.bic"
+                                    :label="t('commercial.clients.form.accounting.ribBic')"
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="rib.iban"
+                                    :label="t('commercial.clients.form.accounting.ribIban')"
+                                    readonly
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </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>
+            </MalioTabList>
+        </template>
+
+        <!-- Modal de confirmation Archiver / Restaurer. -->
+        <MalioModal v-model="confirmOpen" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">
+                    {{ isArchived ? t('commercial.clients.consultation.confirmRestore.title') : t('commercial.clients.consultation.confirmArchive.title') }}
+                </h2>
+            </template>
+            <p>{{ isArchived ? t('commercial.clients.consultation.confirmRestore.message') : t('commercial.clients.consultation.confirmArchive.message') }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('commercial.clients.form.confirmDelete.cancel')"
+                    @click="confirmOpen = false"
+                />
+                <MalioButton
+                    :variant="isArchived ? 'primary' : 'danger'"
+                    button-class="flex-1"
+                    :label="t('commercial.clients.form.confirmDelete.confirm')"
+                    :disabled="toggling"
+                    @click="confirmToggleArchive"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useClient } from '~/modules/commercial/composables/useClient'
+import { buildClientFormTabKeys } from '~/modules/commercial/utils/clientFormRules'
+import {
+    canEditClient,
+    categoryOptionsOf,
+    contactOptionsOf,
+    mapAccountingDraft,
+    mapAddressView,
+    mapContactToDraft,
+    mapRibToDraft,
+    referentialOptionOf,
+    relationOf,
+    showArchiveAction,
+    showRestoreAction,
+    type ClientDetail,
+    type SelectOption,
+} from '~/modules/commercial/utils/clientConsultation'
+import { formatPhoneFR } from '~/shared/utils/phone'
+
+// Masques d'affichage (purement visuels, la donnee reste celle du serveur).
+const PHONE_MASK = '## ## ## ## ##'
+const SIREN_MASK = '#########'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { can, canAny } = usePermissions()
+
+// Gating de la route : la consultation exige `view`. Usine (sans view) est
+// redirige vers le repertoire (lui-meme protege). Cf. matrice § 2.7.
+if (!can('commercial.clients.view')) {
+    await navigateTo('/clients')
+}
+
+const clientId = route.params.id as string
+
+const { client, loading, error, load, archive, restore } = useClient(clientId)
+
+// ── Permissions / visibilite des actions ───────────────────────────────────
+const canAccountingView = computed(() => can('commercial.clients.accounting.view'))
+const canEdit = computed(() => canEditClient(canAny))
+const isArchived = computed(() => client.value?.isArchived === true)
+const showArchive = computed(() => showArchiveAction(can, isArchived.value))
+const showRestore = computed(() => showRestoreAction(can, isArchived.value))
+
+const headerTitle = computed(() => client.value?.companyName ?? t('commercial.clients.consultation.title'))
+
+// ── Donnees derivees du payload (lecture seule) ────────────────────────────
+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,
+    // MalioDate attend strictement YYYY-MM-DD : on tronque l'ISO datetime renvoye.
+    foundedAt: client.value?.foundedAt ? client.value.foundedAt.slice(0, 10) : null,
+    employeesCount: client.value?.employeesCount != null ? String(client.value.employeesCount) : null,
+    revenueAmount: client.value?.revenueAmount ?? null,
+    profitAmount: client.value?.profitAmount ?? null,
+    directorName: client.value?.directorName ?? null,
+}))
+
+const contacts = computed(() => (client.value?.contacts ?? []).map(mapContactToDraft))
+// 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))
+// Draft comptable (tout null si l'utilisateur n'a pas accounting.view).
+const accounting = computed(() => mapAccountingDraft(client.value ?? ({} as ClientDetail)))
+
+// ── Options des selects (construites depuis l'EMBED, jamais via un GET de
+//    referentiel : /categories et /sites sont en 403 pour les roles metier
+//    non-admin, ce qui laisserait les libelles vides). ───────────────────────
+const mainCategoryOptions = computed(() => categoryOptionsOf(client.value?.categories))
+const contactOptions = computed(() => contactOptionsOf(client.value?.contacts))
+
+const relationOptions = computed<SelectOption[]>(() => [
+    { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
+    { value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },
+])
+
+const countryOptions: SelectOption[] = [
+    { value: 'France', label: 'France' },
+    { value: 'Espagne', label: 'Espagne' },
+]
+
+// Selects comptables : libelle issu de l'embed (option unique ou vide).
+const tvaModeOptions = computed(() => referentialOptionOf(client.value?.tvaMode))
+const paymentDelayOptions = computed(() => referentialOptionOf(client.value?.paymentDelay))
+const paymentTypeOptions = computed(() => referentialOptionOf(client.value?.paymentType))
+const bankOptions = computed(() => referentialOptionOf(client.value?.bank))
+
+// ── Onglets : navigation LIBRE (pas de sequence forcee en consultation) ────
+// 4 onglets actifs (Information, Contact, Adresse, + Comptabilite si droit) et
+// 4 coquilles (Transport, Statistiques, Rapports, Echanges).
+const tabKeys = computed(() => buildClientFormTabKeys(canAccountingView.value, { includeEditOnlyTabs: true }))
+
+const TAB_ICONS: Record<string, string> = {
+    information: 'mdi:account-outline',
+    contact: 'mdi:account-box-plus-outline',
+    address: 'mdi:map-marker-outline',
+    transport: 'mdi:truck-delivery-outline',
+    accounting: 'mdi:bank-circle-outline',
+    statistics: 'mdi:finance',
+    reports: 'mdi:file-document-edit-outline',
+    exchanges: 'mdi:account-group-outline',
+}
+
+const tabs = computed(() => tabKeys.value.map(key => ({
+    key,
+    label: t(`commercial.clients.tab.${key}`),
+    icon: TAB_ICONS[key],
+})))
+
+const activeTab = ref('information')
+
+// ── Navigation ─────────────────────────────────────────────────────────────
+function goBack(): void {
+    router.push('/clients')
+}
+
+function goEdit(): void {
+    router.push(`/clients/${clientId}/edit`)
+}
+
+// ── Archivage / Restauration ────────────────────────────────────────────────
+const confirmOpen = ref(false)
+const toggling = ref(false)
+
+function askToggleArchive(): void {
+    confirmOpen.value = true
+}
+
+/**
+ * Confirme l'archivage ou la restauration (PATCH isArchived seul). Gere le 409
+ * de conflit d'homonyme actif a la restauration (RG-1.23) avec un message dedie.
+ */
+async function confirmToggleArchive(): Promise<void> {
+    if (toggling.value) return
+    toggling.value = true
+    const restoring = isArchived.value
+    try {
+        if (restoring) {
+            await restore()
+            toast.success({ title: t('commercial.clients.toast.restoreSuccess') })
+        }
+        else {
+            await archive()
+            toast.success({ title: t('commercial.clients.toast.archiveSuccess') })
+        }
+        confirmOpen.value = false
+    }
+    catch (e) {
+        const status = (e as { response?: { status?: number } })?.response?.status
+        toast.error({
+            title: t('commercial.clients.toast.error'),
+            message: restoring && status === 409
+                ? t('commercial.clients.toast.restoreConflict')
+                : t('commercial.clients.toast.error'),
+        })
+    }
+    finally {
+        toggling.value = false
+    }
+}
+
+useHead({ title: headerTitle })
+
+onMounted(load)
+</script>

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

@@ -0,0 +1,960 @@
+<template>
+    <div>
+        <!-- En-tete : retour vers le repertoire + titre. -->
+        <div class="flex items-center gap-3">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.clients.form.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[32px] font-bold text-m-primary">{{ t('commercial.clients.form.title') }}</h1>
+        </div>
+
+        <!-- ── Formulaire principal (pre-onglets) ─────────────────────────────
+             Sans validation de ce bloc, les onglets restent inaccessibles. Au
+             succes du POST, les champs passent en lecture seule et on bascule
+             automatiquement sur l'onglet Information. -->
+        <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+            <MalioInputText
+                v-model="main.companyName"
+                :label="t('commercial.clients.form.main.companyName')"
+                :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"
+                :label="t('commercial.clients.form.main.categories')"
+                :display-tag="true"
+                :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')"
+                :disabled="mainLocked"
+                @update:model-value="onRelationChange"
+            />
+            <MalioSelect
+                v-if="main.relationType === 'courtier'"
+                :model-value="main.brokerIri"
+                :options="referentials.brokers.value"
+                :label="t('commercial.clients.form.main.brokerName')"
+                :disabled="mainLocked"
+                @update:model-value="(v: string | number | null) => main.brokerIri = v === null ? null : String(v)"
+            />
+            <MalioSelect
+                v-if="main.relationType === 'distributeur'"
+                :model-value="main.distributorIri"
+                :options="referentials.distributors.value"
+                :label="t('commercial.clients.form.main.distributorName')"
+                :disabled="mainLocked"
+                @update:model-value="(v: string | number | null) => main.distributorIri = v === null ? null : String(v)"
+            />
+            <MalioCheckbox
+                v-model="main.triageService"
+                :label="t('commercial.clients.form.main.triageService')"
+                group-class="self-center"
+                :readonly="mainLocked"
+            />
+        </div>
+
+        <div v-if="!mainLocked" class="mt-12 flex justify-center">
+            <MalioButton
+                variant="primary"
+                :label="t('commercial.clients.form.submit')"
+                :disabled="!isMainValid || mainSubmitting"
+                @click="submitMain"
+            />
+        </div>
+
+        <!-- ── Onglets a validation incrementale ─────────────────────────────-->
+        <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
+            <!-- Onglet Information -->
+            <template #information>
+                <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                    <!-- pt-1 : aligne le bord superieur du textarea sur celui des
+                         inputs (centres dans un conteneur h-12, soit ~4px de retrait haut). -->
+                    <MalioInputTextArea
+                        v-model="information.description"
+                        :label="t('commercial.clients.form.information.description')"
+                        resize="none"
+                        group-class="row-span-2 pt-1"
+                        text-input="h-full text-lg"
+                        :disabled="isValidated('information')"
+                    />
+                    <MalioInputText
+                        v-model="information.competitors"
+                        :label="t('commercial.clients.form.information.competitors')"
+                        :readonly="isValidated('information')"
+                    />
+                    <MalioDate
+                        v-model="information.foundedAt"
+                        :label="t('commercial.clients.form.information.foundedAt')"
+                        :readonly="isValidated('information')"
+                    />
+                    <MalioInputText
+                        v-model="information.employeesCount"
+                        :label="t('commercial.clients.form.information.employeesCount')"
+                        :mask="EMPLOYEES_MASK"
+                        :readonly="isValidated('information')"
+                    />
+                    <MalioInputAmount
+                        v-model="information.revenueAmount"
+                        :label="t('commercial.clients.form.information.revenueAmount')"
+                        :disabled="isValidated('information')"
+                    />
+                    <MalioInputText
+                        v-model="information.directorName"
+                        :label="t('commercial.clients.form.information.directorName')"
+                        :readonly="isValidated('information')"
+                    />
+                    <MalioInputAmount
+                        v-model="information.profitAmount"
+                        :label="t('commercial.clients.form.information.profitAmount')"
+                        :disabled="isValidated('information')"
+                    />
+                </div>
+                <div v-if="!isValidated('information')" class="mt-12 flex justify-center">
+                    <!-- Desactive tant que le client n'est pas cree : evite un PATCH
+                         avant le POST si l'utilisateur clique trop tot (le panneau
+                         Information est l'onglet actif par defaut). -->
+                    <MalioButton
+                        variant="primary"
+                        :label="t('commercial.clients.form.submit')"
+                        :disabled="tabSubmitting || clientId === null"
+                        @click="submitInformation"
+                    />
+                </div>
+            </template>
+
+            <!-- Onglet Contact -->
+            <template #contact>
+                <div class="mt-12 flex flex-col gap-6">
+                    <ClientContactBlock
+                        v-for="(contact, index) in contacts"
+                        :key="index"
+                        :model-value="contact"
+                        :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
+                        :removable="index > 0"
+                        :readonly="isValidated('contact')"
+                        @update:model-value="(v) => contacts[index] = v"
+                        @remove="askRemoveContact(index)"
+                    />
+                    <div v-if="!isValidated('contact')" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('commercial.clients.form.contact.add')"
+                            :disabled="!canAddContact"
+                            @click="addContact"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="!canValidateContacts || tabSubmitting"
+                            @click="submitContacts"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Adresse -->
+            <template #address>
+                <div class="mt-12 flex flex-col gap-6">
+                    <ClientAddressBlock
+                        v-for="(address, index) in addresses"
+                        :key="index"
+                        :model-value="address"
+                        :title="t('commercial.clients.form.address.title', { n: index + 1 })"
+                        :category-options="addressCategoryOptions"
+                        :site-options="referentials.sites.value"
+                        :contact-options="contactOptions"
+                        :country-options="countryOptions"
+                        :removable="index > 0"
+                        :readonly="isValidated('address')"
+                        @update:model-value="(v) => addresses[index] = v"
+                        @remove="askRemoveAddress(index)"
+                        @degraded="onAddressDegraded"
+                    />
+                    <div v-if="!isValidated('address')" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('commercial.clients.form.address.add')"
+                            @click="addAddress"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="!canValidateAddresses || tabSubmitting"
+                            @click="submitAddresses"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Comptabilite (present uniquement si accounting.view) -->
+            <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">
+                            <MalioInputText
+                                v-model="accounting.siren"
+                                :label="t('commercial.clients.form.accounting.siren')"
+                                :mask="SIREN_MASK"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioInputText
+                                v-model="accounting.accountNumber"
+                                :label="t('commercial.clients.form.accounting.accountNumber')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.tvaModeIri"
+                                :options="referentials.tvaModes.value"
+                                :label="t('commercial.clients.form.accounting.tvaMode')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="(v: string | number | null) => accounting.tvaModeIri = v === null ? null : String(v)"
+                            />
+                            <MalioInputText
+                                v-model="accounting.nTva"
+                                :label="t('commercial.clients.form.accounting.nTva')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.paymentDelayIri"
+                                :options="referentials.paymentDelays.value"
+                                :label="t('commercial.clients.form.accounting.paymentDelay')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="(v: string | number | null) => accounting.paymentDelayIri = v === null ? null : String(v)"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.paymentTypeIri"
+                                :options="referentials.paymentTypes.value"
+                                :label="t('commercial.clients.form.accounting.paymentType')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="onPaymentTypeChange"
+                            />
+                            <MalioSelect
+                                v-if="isBankRequired"
+                                :model-value="accounting.bankIri"
+                                :options="referentials.banks.value"
+                                :label="t('commercial.clients.form.accounting.bank')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="(v: string | number | null) => accounting.bankIri = v === null ? null : String(v)"
+                            />
+                        </div>
+                    </div>
+
+                    <!-- Blocs RIB (0..n) — obligatoires si type de reglement = LCR. -->
+                    <div
+                        v-for="(rib, index) in ribs"
+                        :key="index"
+                        class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                    >
+                        <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+                        <MalioButtonIcon
+                            v-if="!accountingReadonly"
+                            icon="mdi:delete-outline"
+                            variant="ghost"
+                            button-class="absolute top-3 right-3"
+                            v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
+                            @click="askRemoveRib(index)"
+                        />
+                        <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+                            <MalioInputText
+                                v-model="rib.label"
+                                :label="t('commercial.clients.form.accounting.ribLabel')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioInputText
+                                v-model="rib.bic"
+                                :label="t('commercial.clients.form.accounting.ribBic')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioInputText
+                                v-model="rib.iban"
+                                :label="t('commercial.clients.form.accounting.ribIban')"
+                                :readonly="accountingReadonly"
+                            />
+                        </div>
+                    </div>
+
+                    <div v-if="!accountingReadonly" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('commercial.clients.form.accounting.addRib')"
+                            @click="addRib"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="!canValidateAccounting || tabSubmitting"
+                            @click="submitAccounting"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet non encore implemente : frame vide, passage automatique.
+                 Statistiques / Rapports / Echanges sont edit-only (absents a la
+                 creation) — cf. buildClientFormTabKeys. -->
+            <template #transport><TabPlaceholderBlank /></template>
+        </MalioTabList>
+
+        <!-- Modal de confirmation generique (suppression contact/adresse/RIB). -->
+        <MalioModal v-model="confirmModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('commercial.clients.form.confirmDelete.title') }}</h2>
+            </template>
+            <p>{{ confirmModal.message }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('commercial.clients.form.confirmDelete.cancel')"
+                    @click="confirmModal.open = false"
+                />
+                <MalioButton
+                    variant="danger"
+                    button-class="flex-1"
+                    :label="t('commercial.clients.form.confirmDelete.confirm')"
+                    @click="runConfirm"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useClientReferentials, type RefOption } from '~/modules/commercial/composables/useClientReferentials'
+import {
+    buildClientFormTabKeys,
+    CLIENT_FORM_PLACEHOLDER_TABS,
+    hasAtLeastOneValidContact,
+    isBankRequiredForPaymentType,
+    isBillingEmailRequired,
+    isContactNamed,
+    isRibRequiredForPaymentType,
+} from '~/modules/commercial/utils/clientFormRules'
+import {
+    emptyAddress,
+    emptyContact,
+    emptyRib,
+    type AddressFormDraft,
+    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 = '#######'
+
+// Codes de categorie interdits sur une adresse (RG-1.29, ERP-78).
+const FORBIDDEN_ADDRESS_CATEGORY_CODES = ['DISTRIBUTEUR', 'COURTIER']
+
+const { t } = useI18n()
+const api = useApi()
+const toast = useToast()
+const router = useRouter()
+const { can } = usePermissions()
+
+/** Retour vers le repertoire clients (fleche d'en-tete). */
+function goBack(): void {
+    router.push('/clients')
+}
+
+/**
+ * Message d'erreur a afficher dans un toast a partir d'une erreur d'API.
+ * Retourne TOUJOURS une chaine (le composant de toast plante sur `undefined`) :
+ * le message de validation renvoye par le serveur (violations 422 / detail),
+ * sinon un libelle generique.
+ */
+function apiErrorMessage(error: unknown): string {
+    const data = (error as { data?: unknown })?.data
+    return extractApiErrorMessage(data) || t('commercial.clients.toast.error')
+}
+
+useHead({ title: t('commercial.clients.form.title') })
+
+// Gating de la route : la creation est reservee a `manage`. Compta (accounting
+// seul) et Usine sont rediriges vers le repertoire (cf. §0 du ticket).
+if (!can('commercial.clients.manage')) {
+    await navigateTo('/clients')
+}
+
+const canAccountingView = computed(() => can('commercial.clients.accounting.view'))
+const canAccountingManage = computed(() => can('commercial.clients.accounting.manage'))
+
+const referentials = useClientReferentials()
+
+// ── Etat du client cree ────────────────────────────────────────────────────
+const clientId = ref<number | null>(null)
+const mainLocked = ref(false)
+const mainSubmitting = ref(false)
+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,
+    brokerIri: null as string | null,
+    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') },
+    { value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },
+])
+
+// Validation du formulaire principal (gate le bouton « Valider ») :
+//  - companyName / email / telephone principal / >= 1 categorie obligatoires ;
+//  - RG-1.01 : nom OU prenom du contact principal ;
+//  - relation Distributeur/Courtier obligatoire (un des deux), ET le nom
+//    correspondant obligatoire selon le choix (spec fonctionnelle).
+const isMainValid = computed(() => {
+    const filled = (v: string | null | undefined) => v !== null && v !== undefined && v.trim() !== ''
+    // Relation Distributeur/Courtier OPTIONNELLE ; mais si « Depend du
+    // distributeur/courtier » est choisi, le nom correspondant devient requis.
+    const relationValid
+        = main.relationType === null
+        || (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
+})
+
+async function onRelationChange(value: string | number | null): Promise<void> {
+    const relation = (value === null || value === '')
+        ? null
+        : (String(value) as 'distributeur' | 'courtier')
+    main.relationType = relation
+    // Reinitialise la FK non concernee (une seule remplie a la fois, RG-1.03).
+    if (relation !== 'distributeur') main.distributorIri = null
+    if (relation !== 'courtier') main.brokerIri = null
+
+    if (relation === 'distributeur') await referentials.loadDistributors()
+    if (relation === 'courtier') await referentials.loadBrokers()
+}
+
+/** POST /clients (groupe client:write:main). Au succes : verrouille + bascule Information. */
+async function submitMain(): Promise<void> {
+    if (!isMainValid.value || mainSubmitting.value) return
+    mainSubmitting.value = true
+    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,
+            triageService: main.triageService,
+        }
+        const created = await api.post<ClientResponse>('/clients', payload, {
+            headers: { Accept: 'application/ld+json' },
+            toast: false,
+        })
+
+        clientId.value = created.id
+        // Reaffiche les valeurs normalisees renvoyees 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
+        activeTab.value = 'information'
+        toast.success({ title: t('commercial.clients.toast.createSuccess') })
+    }
+    catch (error) {
+        // 409 = doublon nom de societe (RG d'unicite) → message explicite ;
+        // sinon on remonte le message de validation du serveur (ex: 422).
+        const status = (error as { response?: { status?: number } })?.response?.status
+        toast.error({
+            title: t('commercial.clients.toast.error'),
+            message: status === 409
+                ? t('commercial.clients.form.duplicateCompany')
+                : apiErrorMessage(error),
+        })
+    }
+    finally {
+        mainSubmitting.value = false
+    }
+}
+
+// ── Onglets : ordre + gating progressif ─────────────────────────────────────
+const activeTab = ref('information')
+// Index du dernier onglet deverrouille (-1 tant que le client n'est pas cree).
+const unlockedIndex = ref(-1)
+// Onglets valides (passent en lecture seule).
+const validated = reactive<Record<string, boolean>>({})
+
+const tabKeys = computed(() => buildClientFormTabKeys(canAccountingView.value))
+
+// Icone (Iconify) affichee dans l'onglet, par cle. A ajuster librement.
+const TAB_ICONS: Record<string, string> = {
+    information: 'mdi:account-outline',
+    contact: 'mdi:account-box-plus-outline',
+    address: 'mdi:map-marker-outline',
+    transport: 'mdi:truck-delivery-outline',
+    accounting: 'mdi:bank-circle-outline',
+    statistics: 'mdi:finance',
+    reports: 'mdi:file-document-edit-outline',
+    exchanges: 'mdi:account-group-outline',
+}
+
+const tabs = computed(() => tabKeys.value.map((key, index) => ({
+    key,
+    label: t(`commercial.clients.tab.${key}`),
+    icon: TAB_ICONS[key],
+    disabled: index > unlockedIndex.value,
+})))
+
+function isValidated(key: string): boolean {
+    return validated[key] === true
+}
+
+function tabIndex(key: string): number {
+    return tabKeys.value.indexOf(key)
+}
+
+/** Marque l'onglet valide, deverrouille et avance automatiquement au suivant. */
+function completeTab(key: string): void {
+    validated[key] = true
+    const next = tabKeys.value[tabIndex(key) + 1]
+    unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
+    if (next) activeTab.value = next
+}
+
+// Passage automatique sur les onglets coquille (Transport, Stats, Rapports, Echanges).
+watch(activeTab, (key) => {
+    if ((CLIENT_FORM_PLACEHOLDER_TABS as readonly string[]).includes(key)) {
+        const next = tabKeys.value[tabIndex(key) + 1]
+        unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
+        if (next) activeTab.value = next
+    }
+})
+
+// ── Onglet Information ──────────────────────────────────────────────────────
+const information = reactive({
+    description: null as string | null,
+    competitors: null as string | null,
+    foundedAt: null as string | null,
+    employeesCount: null as string | null,
+    revenueAmount: null as string | null,
+    profitAmount: null as string | null,
+    directorName: null as string | null,
+})
+
+/** PATCH /clients/{id} — mode strict : uniquement les champs du groupe information. */
+async function submitInformation(): Promise<void> {
+    if (clientId.value === null || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        await api.patch(`/clients/${clientId.value}`, {
+            description: information.description || null,
+            competitors: information.competitors || null,
+            foundedAt: information.foundedAt || null,
+            employeesCount: information.employeesCount ? Number(information.employeesCount) : null,
+            revenueAmount: information.revenueAmount || null,
+            profitAmount: information.profitAmount || null,
+            directorName: information.directorName || null,
+        }, { toast: false })
+        completeTab('information')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (error) {
+        toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Contact ──────────────────────────────────────────────────────────
+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]
+    return last !== undefined && isContactNamed(last)
+})
+
+// RG-1.14 : au moins un contact nomme pour finaliser l'onglet.
+const canValidateContacts = computed(() => hasAtLeastOneValidContact(contacts.value))
+
+function addContact(): void {
+    if (canAddContact.value) contacts.value.push(emptyContact())
+}
+
+function askRemoveContact(index: number): void {
+    askConfirm(t('commercial.clients.form.confirmDelete.contact'), () => {
+        contacts.value.splice(index, 1)
+    })
+}
+
+/** POST/PATCH des contacts sur la sous-ressource /clients/{id}/contacts. */
+async function submitContacts(): Promise<void> {
+    if (clientId.value === null || !canValidateContacts.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        for (const contact of contacts.value) {
+            // On ignore les blocs totalement vides (ni nom ni prenom).
+            if (!isContactNamed(contact)) continue
+
+            const body = {
+                firstName: contact.firstName || null,
+                lastName: contact.lastName || null,
+                jobTitle: contact.jobTitle || null,
+                phonePrimary: contact.phonePrimary || null,
+                phoneSecondary: contact.hasSecondaryPhone ? (contact.phoneSecondary || null) : null,
+                email: contact.email || null,
+            }
+
+            if (contact.id === null) {
+                const created = await api.post<ContactResponse>(
+                    `/clients/${clientId.value}/contacts`,
+                    body,
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                contact.id = created.id
+                contact.iri = created['@id'] ?? null
+            }
+            else {
+                await api.patch(`/client_contacts/${contact.id}`, body, { toast: false })
+            }
+        }
+        completeTab('contact')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (error) {
+        toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Adresse ──────────────────────────────────────────────────────────
+const addresses = ref<AddressFormDraft[]>([emptyAddress()])
+const addressDegradedNotified = ref(false)
+
+// Categories autorisees sur une adresse : toutes SAUF DISTRIBUTEUR/COURTIER (RG-1.29).
+const addressCategoryOptions = computed(() =>
+    referentials.categories.value.filter(c => !FORBIDDEN_ADDRESS_CATEGORY_CODES.includes(c.code)),
+)
+
+// Contacts deja crees, rattachables a une adresse (M2M, via leur IRI).
+const contactOptions = computed<RefOption[]>(() =>
+    contacts.value
+        .filter(c => c.iri !== null)
+        .map(c => ({
+            value: c.iri as string,
+            label: [c.firstName, c.lastName].filter(Boolean).join(' ') || (c.email ?? ''),
+        })),
+)
+
+// Pays disponibles (France preselectionnee par defaut sur chaque adresse).
+const countryOptions: RefOption[] = [
+    { value: 'France', label: 'France' },
+    { value: 'Espagne', label: 'Espagne' },
+]
+
+// RG-1.10 (>= 1 site) + RG-1.11 (email facturation si Facturation) sur chaque adresse.
+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)
+    }),
+)
+
+function addAddress(): void {
+    addresses.value.push(emptyAddress())
+}
+
+function askRemoveAddress(index: number): void {
+    askConfirm(t('commercial.clients.form.confirmDelete.address'), () => {
+        addresses.value.splice(index, 1)
+    })
+}
+
+/** Avertit une seule fois quand l'autocompletion d'adresse bascule en degrade. */
+function onAddressDegraded(): void {
+    if (addressDegradedNotified.value) return
+    addressDegradedNotified.value = true
+    toast.warning({
+        title: t('commercial.clients.toast.error'),
+        message: t('commercial.clients.form.address.degraded'),
+    })
+}
+
+/** POST des adresses sur la sous-ressource /clients/{id}/addresses. */
+async function submitAddresses(): Promise<void> {
+    if (clientId.value === null || !canValidateAddresses.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        for (const address of addresses.value) {
+            const body = {
+                isProspect: address.isProspect,
+                isDelivery: address.isDelivery,
+                isBilling: address.isBilling,
+                country: address.country,
+                postalCode: address.postalCode || null,
+                city: address.city || null,
+                street: address.street || null,
+                streetComplement: address.streetComplement || null,
+                categories: address.categoryIris,
+                sites: address.siteIris,
+                contacts: address.contactIris,
+                billingEmail: isBillingEmailRequired(address) ? (address.billingEmail || null) : null,
+            }
+
+            if (address.id === null) {
+                const created = await api.post<{ id: number }>(
+                    `/clients/${clientId.value}/addresses`,
+                    body,
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                address.id = created.id
+            }
+            else {
+                await api.patch(`/client_addresses/${address.id}`, body, { toast: false })
+            }
+        }
+        completeTab('address')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (error) {
+        toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Comptabilite ─────────────────────────────────────────────────────
+const accounting = reactive({
+    siren: null as string | null,
+    accountNumber: null as string | null,
+    tvaModeIri: null as string | null,
+    nTva: null as string | null,
+    paymentDelayIri: null as string | null,
+    paymentTypeIri: null as string | null,
+    bankIri: null as string | null,
+})
+const ribs = ref<RibFormDraft[]>([])
+
+// L'onglet est editable seulement avec accounting.manage (sinon lecture seule).
+const accountingReadonly = computed(() => isValidated('accounting') || !canAccountingManage.value)
+
+// Code du type de reglement selectionne (pour RG-1.12 / RG-1.13).
+const selectedPaymentTypeCode = computed(() =>
+    referentials.paymentTypes.value.find(p => p.value === accounting.paymentTypeIri)?.code ?? null,
+)
+const isBankRequired = computed(() => isBankRequiredForPaymentType(selectedPaymentTypeCode.value))
+const isRibRequired = computed(() => isRibRequiredForPaymentType(selectedPaymentTypeCode.value))
+
+function onPaymentTypeChange(value: string | number | null): void {
+    accounting.paymentTypeIri = value === null ? null : String(value)
+    // La banque n'a de sens que pour un virement : on la vide sinon (RG-1.12).
+    if (!isBankRequired.value) accounting.bankIri = null
+}
+
+function ribIsComplete(rib: RibFormDraft): boolean {
+    const filled = (v: string | null) => v !== null && v.trim() !== ''
+    return filled(rib.label) && filled(rib.bic) && filled(rib.iban)
+}
+
+// RG-1.12 : banque requise si VIREMENT. RG-1.13 : >= 1 RIB complet si LCR.
+const canValidateAccounting = computed(() => {
+    if (isBankRequired.value && (accounting.bankIri === null)) return false
+    if (isRibRequired.value && !ribs.value.some(ribIsComplete)) return false
+    return true
+})
+
+function addRib(): void {
+    ribs.value.push(emptyRib())
+}
+
+function askRemoveRib(index: number): void {
+    askConfirm(t('commercial.clients.form.confirmDelete.rib'), () => {
+        ribs.value.splice(index, 1)
+    })
+}
+
+/**
+ * Valide l'onglet Comptabilite : PATCH des scalaires (groupe client:write:accounting)
+ * PUIS POST des RIB sur /clients/{id}/ribs. Deux appels distincts (mode strict
+ * RG-1.28 : il n'existe pas d'endpoint /accounting, cf. recon back).
+ */
+async function submitAccounting(): Promise<void> {
+    if (clientId.value === null || !canValidateAccounting.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        await api.patch(`/clients/${clientId.value}`, {
+            siren: accounting.siren || null,
+            accountNumber: accounting.accountNumber || null,
+            tvaMode: accounting.tvaModeIri,
+            nTva: accounting.nTva || null,
+            paymentDelay: accounting.paymentDelayIri,
+            paymentType: accounting.paymentTypeIri,
+            bank: isBankRequired.value ? accounting.bankIri : null,
+        }, { toast: false })
+
+        for (const rib of ribs.value) {
+            if (!ribIsComplete(rib)) continue
+            if (rib.id === null) {
+                const created = await api.post<{ id: number }>(
+                    `/clients/${clientId.value}/ribs`,
+                    { label: rib.label, bic: rib.bic, iban: rib.iban },
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                rib.id = created.id
+            }
+            else {
+                await api.patch(`/client_ribs/${rib.id}`, { label: rib.label, bic: rib.bic, iban: rib.iban }, { toast: false })
+            }
+        }
+
+        completeTab('accounting')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (error) {
+        toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Modal de confirmation generique ─────────────────────────────────────────
+const confirmModal = reactive({
+    open: false,
+    message: '',
+    action: null as null | (() => void),
+})
+
+function askConfirm(message: string, action: () => void): void {
+    confirmModal.message = message
+    confirmModal.action = action
+    confirmModal.open = true
+}
+
+function runConfirm(): void {
+    confirmModal.action?.()
+    confirmModal.action = null
+    confirmModal.open = false
+}
+
+// ── Types de reponse API ────────────────────────────────────────────────────
+interface ClientResponse {
+    id: number
+    companyName: string | null
+    firstName: string | null
+    lastName: string | null
+    email: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+}
+
+interface ContactResponse {
+    '@id'?: string
+    id: number
+}
+
+onMounted(() => {
+    // Echec du chargement des referentiels non bloquant : les selects restent vides.
+    referentials.loadCommon().catch(() => {})
+})
+</script>

frontend/modules/commercial/types/clientForm.ts

@@ -0,0 +1,98 @@
+/**
+ * Types « brouillon » de l'ecran « Ajouter un client » (M1 Commercial).
+ *
+ * Ces interfaces decrivent l'etat LOCAL du formulaire (refs Vue), distinct des
+ * DTO de l'API : elles portent en plus des champs purement UI (`hasSecondaryPhone`)
+ * et l'`iri` Hydra des entites creees (necessaire pour rattacher une adresse a
+ * des contacts deja persistes, M2M). Partage par la page et les blocs reutilisables
+ * `ClientContactBlock` / `ClientAddressBlock` (reutilises par 1.11/1.12).
+ */
+
+/** Un contact du client (onglet Contact). */
+export interface ContactFormDraft {
+    /** Id serveur une fois le contact cree (null tant que non persiste). */
+    id: number | null
+    /** IRI Hydra du contact cree — utilise pour le rattachement M2M cote adresse. */
+    iri: string | null
+    firstName: string | null
+    lastName: string | null
+    jobTitle: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+    email: string | null
+    /** UI : le 2e numero a ete revele via le bouton « + ». */
+    hasSecondaryPhone: boolean
+}
+
+/** Une adresse du client (onglet Adresse). */
+export interface AddressFormDraft {
+    id: number | null
+    isProspect: boolean
+    isDelivery: boolean
+    isBilling: boolean
+    country: string
+    postalCode: string | null
+    city: string | null
+    street: string | null
+    streetComplement: string | null
+    /** IRI des categories rattachees (hors DISTRIBUTEUR/COURTIER — RG-1.29). */
+    categoryIris: string[]
+    /** IRI des sites Starseed rattaches (>= 1 obligatoire — RG-1.10). */
+    siteIris: string[]
+    /** IRI des contacts rattaches (= blocs Contact deja crees). */
+    contactIris: string[]
+    /** Email de facturation (obligatoire si isBilling — RG-1.11). */
+    billingEmail: string | null
+}
+
+/** Un RIB du client (onglet Comptabilite). */
+export interface RibFormDraft {
+    id: number | null
+    label: string | null
+    bic: string | null
+    iban: string | null
+}
+
+/** Fabrique un contact vierge. */
+export function emptyContact(): ContactFormDraft {
+    return {
+        id: null,
+        iri: null,
+        firstName: null,
+        lastName: null,
+        jobTitle: null,
+        phonePrimary: null,
+        phoneSecondary: null,
+        email: null,
+        hasSecondaryPhone: false,
+    }
+}
+
+/** Fabrique une adresse vierge (pays prerempli « France »). */
+export function emptyAddress(): AddressFormDraft {
+    return {
+        id: null,
+        isProspect: false,
+        isDelivery: false,
+        isBilling: false,
+        country: 'France',
+        postalCode: null,
+        city: null,
+        street: null,
+        streetComplement: null,
+        categoryIris: [],
+        siteIris: [],
+        contactIris: [],
+        billingEmail: null,
+    }
+}
+
+/** Fabrique un RIB vierge. */
+export function emptyRib(): RibFormDraft {
+    return {
+        id: null,
+        label: null,
+        bic: null,
+        iban: null,
+    }
+}

frontend/modules/commercial/utils/__tests__/clientConsultation.spec.ts

@@ -0,0 +1,235 @@
+import { describe, expect, it } from 'vitest'
+import {
+    canEditClient,
+    categoryOptionsOf,
+    contactOptionsOf,
+    iriOf,
+    mapAccountingDraft,
+    mapAddressToDraft,
+    mapAddressView,
+    mapContactToDraft,
+    mapRibToDraft,
+    referentialOptionOf,
+    relationOf,
+    showArchiveAction,
+    showRestoreAction,
+    siteOptionsOf,
+    type ClientDetail,
+} from '../clientConsultation'
+
+describe('iriOf', () => {
+    it('retourne l\'@id d\'une relation embarquee (objet)', () => {
+        expect(iriOf({ '@id': '/api/payment_types/10', code: 'LCR' })).toBe('/api/payment_types/10')
+    })
+
+    it('retourne la chaine telle quelle si la relation est deja un IRI', () => {
+        expect(iriOf('/api/banks/3')).toBe('/api/banks/3')
+    })
+
+    it('retourne null pour une relation absente (null / undefined / skip_null_values)', () => {
+        expect(iriOf(null)).toBeNull()
+        expect(iriOf(undefined)).toBeNull()
+    })
+})
+
+describe('relationOf', () => {
+    it('detecte une relation distributeur et expose son nom', () => {
+        const client = { distributor: { '@id': '/api/clients/15', companyName: 'DISTRIB GRAND SUD-OUEST' } } as ClientDetail
+        expect(relationOf(client)).toEqual({ type: 'distributeur', name: 'DISTRIB GRAND SUD-OUEST' })
+    })
+
+    it('detecte une relation courtier et expose son nom', () => {
+        const client = { broker: { '@id': '/api/clients/16', companyName: 'CABINET LEONARD' } } as ClientDetail
+        expect(relationOf(client)).toEqual({ type: 'courtier', name: 'CABINET LEONARD' })
+    })
+
+    it('retourne type null quand aucune relation n\'est posee (cles omises)', () => {
+        expect(relationOf({} as ClientDetail)).toEqual({ type: null, name: null })
+    })
+})
+
+describe('mapContactToDraft', () => {
+    it('formate les telephones en XX XX XX XX XX et conserve l\'iri', () => {
+        const draft = mapContactToDraft({
+            '@id': '/api/client_contacts/18',
+            id: 18,
+            firstName: 'Sophie',
+            lastName: 'Léonard',
+            jobTitle: 'Gérante',
+            phonePrimary: '0549112233',
+            email: 'sophie@x.fr',
+        })
+        expect(draft.id).toBe(18)
+        expect(draft.iri).toBe('/api/client_contacts/18')
+        expect(draft.phonePrimary).toBe('05 49 11 22 33')
+        expect(draft.hasSecondaryPhone).toBe(false)
+    })
+
+    it('revele le 2e telephone quand phoneSecondary est present', () => {
+        const draft = mapContactToDraft({
+            '@id': '/api/client_contacts/19',
+            id: 19,
+            phonePrimary: '0600000000',
+            phoneSecondary: '0611111111',
+        })
+        expect(draft.hasSecondaryPhone).toBe(true)
+        expect(draft.phoneSecondary).toBe('06 11 11 11 11')
+    })
+})
+
+describe('mapAddressToDraft', () => {
+    it('extrait les iris de sites / categories / contacts (objets ou chaines)', () => {
+        const draft = mapAddressToDraft({
+            '@id': '/api/client_addresses/18',
+            id: 18,
+            country: 'France',
+            postalCode: '86100',
+            city: 'Châtellerault',
+            street: '5 rue des Courtiers',
+            billingEmail: 'factures@x.fr',
+            isProspect: false,
+            isDelivery: false,
+            isBilling: true,
+            sites: [{ '@id': '/api/sites/4', name: 'Chatellerault', color: '#056CF2' }],
+            categories: [{ '@id': '/api/categories/3', code: 'SECTEUR' }],
+            contacts: [{ '@id': '/api/client_contacts/18' }, '/api/client_contacts/20'],
+        })
+        expect(draft.siteIris).toEqual(['/api/sites/4'])
+        expect(draft.categoryIris).toEqual(['/api/categories/3'])
+        expect(draft.contactIris).toEqual(['/api/client_contacts/18', '/api/client_contacts/20'])
+        expect(draft.isBilling).toBe(true)
+        expect(draft.city).toBe('Châtellerault')
+        expect(draft.country).toBe('France')
+    })
+
+    it('tolere les sous-collections absentes (defaut tableau vide, pays France)', () => {
+        const draft = mapAddressToDraft({ '@id': '/api/client_addresses/9', id: 9 })
+        expect(draft.siteIris).toEqual([])
+        expect(draft.categoryIris).toEqual([])
+        expect(draft.contactIris).toEqual([])
+        expect(draft.country).toBe('France')
+        expect(draft.isBilling).toBe(false)
+    })
+})
+
+describe('mapRibToDraft', () => {
+    it('mappe label / bic / iban et l\'id serveur', () => {
+        const draft = mapRibToDraft({ '@id': '/api/client_ribs/3', id: 3, label: 'Compte', bic: 'BNPAFRPPXXX', iban: 'FR14...' })
+        expect(draft).toEqual({ id: 3, label: 'Compte', bic: 'BNPAFRPPXXX', iban: 'FR14...' })
+    })
+})
+
+describe('mapAccountingDraft', () => {
+    it('mappe les scalaires et resout les iris des referentiels embarques', () => {
+        const acc = mapAccountingDraft({
+            '@id': '/api/clients/1',
+            id: 1,
+            siren: '123456789',
+            accountNumber: '411000',
+            nTva: 'FR123',
+            tvaMode: { '@id': '/api/tva_modes/1' },
+            paymentDelay: { '@id': '/api/payment_delays/2' },
+            paymentType: { '@id': '/api/payment_types/10', code: 'LCR' },
+            bank: { '@id': '/api/banks/3' },
+        } as ClientDetail)
+        expect(acc).toEqual({
+            siren: '123456789',
+            accountNumber: '411000',
+            nTva: 'FR123',
+            tvaModeIri: '/api/tva_modes/1',
+            paymentDelayIri: '/api/payment_delays/2',
+            paymentTypeIri: '/api/payment_types/10',
+            bankIri: '/api/banks/3',
+        })
+    })
+
+    it('renvoie des null quand les champs comptables sont absents (sans accounting.view)', () => {
+        const acc = mapAccountingDraft({} as ClientDetail)
+        expect(acc).toEqual({
+            siren: null,
+            accountNumber: null,
+            nTva: null,
+            tvaModeIri: null,
+            paymentDelayIri: null,
+            paymentTypeIri: null,
+            bankIri: null,
+        })
+    })
+})
+
+describe('options construites depuis l\'embed (role-independantes)', () => {
+    it('categoryOptionsOf expose value=IRI, label=nom, code', () => {
+        expect(categoryOptionsOf([{ '@id': '/api/categories/3', name: 'Secteur', code: 'SECTEUR' }])).toEqual([
+            { value: '/api/categories/3', label: 'Secteur', code: 'SECTEUR' },
+        ])
+    })
+
+    it('siteOptionsOf expose value=IRI, label=nom', () => {
+        expect(siteOptionsOf([{ '@id': '/api/sites/4', name: 'Chatellerault', color: '#000' }])).toEqual([
+            { value: '/api/sites/4', label: 'Chatellerault' },
+        ])
+    })
+
+    it('contactOptionsOf compose le libelle (nom complet, sinon email)', () => {
+        expect(contactOptionsOf([
+            { '@id': '/api/client_contacts/1', id: 1, firstName: 'Jean', lastName: 'Dupont' },
+            { '@id': '/api/client_contacts/2', id: 2, email: 'a@b.fr' },
+        ])).toEqual([
+            { value: '/api/client_contacts/1', label: 'Jean Dupont' },
+            { value: '/api/client_contacts/2', label: 'a@b.fr' },
+        ])
+    })
+
+    it('referentialOptionOf : option unique depuis l\'embed, vide pour IRI nu / absent', () => {
+        expect(referentialOptionOf({ '@id': '/api/payment_types/10', label: 'LCR' })).toEqual([
+            { value: '/api/payment_types/10', label: 'LCR' },
+        ])
+        expect(referentialOptionOf('/api/banks/3')).toEqual([])
+        expect(referentialOptionOf(null)).toEqual([])
+    })
+
+    it('mapAddressView assemble brouillon + options propres a l\'adresse', () => {
+        const view = mapAddressView({
+            '@id': '/api/client_addresses/18',
+            id: 18,
+            city: 'Châtellerault',
+            sites: [{ '@id': '/api/sites/4', name: 'Chatellerault' }],
+            categories: [{ '@id': '/api/categories/3', name: 'Secteur', code: 'SECTEUR' }],
+        })
+        expect(view.draft.id).toBe(18)
+        expect(view.siteOptions).toEqual([{ value: '/api/sites/4', label: 'Chatellerault' }])
+        expect(view.categoryOptions).toEqual([{ value: '/api/categories/3', label: 'Secteur', code: 'SECTEUR' }])
+    })
+})
+
+describe('canEditClient', () => {
+    const can = (granted: string[]) => (codes: string[]) => codes.some(c => granted.includes(c))
+
+    it('visible pour manage', () => {
+        expect(canEditClient(can(['commercial.clients.manage']))).toBe(true)
+    })
+
+    it('visible pour accounting.manage (role Compta)', () => {
+        expect(canEditClient(can(['commercial.clients.accounting.manage']))).toBe(true)
+    })
+
+    it('masque sans aucune des deux permissions (role Usine)', () => {
+        expect(canEditClient(can(['commercial.clients.view']))).toBe(false)
+    })
+})
+
+describe('showArchiveAction / showRestoreAction', () => {
+    const can = (granted: string[]) => (code: string) => granted.includes(code)
+
+    it('Archiver : visible avec la permission archive ET client non archive', () => {
+        expect(showArchiveAction(can(['commercial.clients.archive']), false)).toBe(true)
+        expect(showArchiveAction(can(['commercial.clients.archive']), true)).toBe(false)
+        expect(showArchiveAction(can([]), false)).toBe(false)
+    })
+
+    it('Restaurer : visible avec la permission archive ET client archive', () => {
+        expect(showRestoreAction(can(['commercial.clients.archive']), true)).toBe(true)
+        expect(showRestoreAction(can(['commercial.clients.archive']), false)).toBe(false)
+        expect(showRestoreAction(can([]), true)).toBe(false)
+    })
+})

frontend/modules/commercial/utils/__tests__/clientFormRules.spec.ts

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest'
+import {
+    applyProspectExclusivity,
+    buildClientFormTabKeys,
+    canSelectDeliveryOrBilling,
+    canSelectProspect,
+    hasAtLeastOneValidContact,
+    isBankRequiredForPaymentType,
+    isBillingEmailRequired,
+    isContactNamed,
+    isRibRequiredForPaymentType,
+    type ContactDraft,
+} from '../clientFormRules'
+
+describe('buildClientFormTabKeys (gating onglet Comptabilite + onglets edit-only)', () => {
+    it('inclut l onglet accounting si l utilisateur a accounting.view', () => {
+        expect(buildClientFormTabKeys(true)).toContain('accounting')
+    })
+
+    it('exclut l onglet accounting sinon (Bureau / Commerciale)', () => {
+        expect(buildClientFormTabKeys(false)).not.toContain('accounting')
+    })
+
+    it('a la creation, exclut Statistiques / Rapports / Echanges', () => {
+        const keys = buildClientFormTabKeys(true)
+        expect(keys).toEqual(['information', 'contact', 'address', 'transport', 'accounting'])
+        expect(keys).not.toContain('statistics')
+        expect(keys).not.toContain('reports')
+        expect(keys).not.toContain('exchanges')
+    })
+
+    it('en modification (includeEditOnlyTabs), ajoute les onglets edit-only en fin', () => {
+        const keys = buildClientFormTabKeys(true, { includeEditOnlyTabs: true })
+        expect(keys).toEqual([
+            'information',
+            'contact',
+            'address',
+            'transport',
+            'accounting',
+            'statistics',
+            'reports',
+            'exchanges',
+        ])
+    })
+})
+
+describe('isContactNamed (RG-1.05)', () => {
+    it('vrai si le prenom est renseigne', () => {
+        expect(isContactNamed({ firstName: 'Alice', lastName: null })).toBe(true)
+    })
+
+    it('vrai si le nom est renseigne', () => {
+        expect(isContactNamed({ firstName: null, lastName: 'Martin' })).toBe(true)
+    })
+
+    it('faux si les deux sont vides ou espaces uniquement', () => {
+        expect(isContactNamed({ firstName: null, lastName: null })).toBe(false)
+        expect(isContactNamed({ firstName: '  ', lastName: '' })).toBe(false)
+    })
+})
+
+describe('hasAtLeastOneValidContact (RG-1.14)', () => {
+    it('faux sur une liste vide', () => {
+        expect(hasAtLeastOneValidContact([])).toBe(false)
+    })
+
+    it('faux si aucun contact n a de nom ni prenom', () => {
+        const contacts: ContactDraft[] = [
+            { firstName: null, lastName: null },
+            { firstName: '', lastName: '  ' },
+        ]
+        expect(hasAtLeastOneValidContact(contacts)).toBe(false)
+    })
+
+    it('vrai des qu un contact a un nom ou un prenom', () => {
+        const contacts: ContactDraft[] = [
+            { firstName: null, lastName: null },
+            { firstName: 'Bob', lastName: null },
+        ]
+        expect(hasAtLeastOneValidContact(contacts)).toBe(true)
+    })
+})
+
+describe('exclusivite Prospect / Livraison / Facturation (RG-1.06/07/08)', () => {
+    it('Prospect est selectionnable tant que ni Livraison ni Facturation', () => {
+        expect(canSelectProspect({ isProspect: false, isDelivery: false, isBilling: false })).toBe(true)
+        expect(canSelectProspect({ isProspect: false, isDelivery: true, isBilling: false })).toBe(false)
+        expect(canSelectProspect({ isProspect: false, isDelivery: false, isBilling: true })).toBe(false)
+    })
+
+    it('Livraison / Facturation selectionnables tant que pas Prospect', () => {
+        expect(canSelectDeliveryOrBilling({ isProspect: false, isDelivery: false, isBilling: false })).toBe(true)
+        expect(canSelectDeliveryOrBilling({ isProspect: true, isDelivery: false, isBilling: false })).toBe(false)
+    })
+
+    it('cocher Prospect efface Livraison et Facturation', () => {
+        const next = applyProspectExclusivity(
+            { isProspect: false, isDelivery: true, isBilling: true },
+            'isProspect',
+            true,
+        )
+        expect(next).toEqual({ isProspect: true, isDelivery: false, isBilling: false })
+    })
+
+    it('cocher Livraison efface Prospect', () => {
+        const next = applyProspectExclusivity(
+            { isProspect: true, isDelivery: false, isBilling: false },
+            'isDelivery',
+            true,
+        )
+        expect(next).toEqual({ isProspect: false, isDelivery: true, isBilling: false })
+    })
+
+    it('cocher Facturation efface Prospect mais conserve Livraison', () => {
+        const next = applyProspectExclusivity(
+            { isProspect: true, isDelivery: true, isBilling: false },
+            'isBilling',
+            true,
+        )
+        expect(next).toEqual({ isProspect: false, isDelivery: true, isBilling: true })
+    })
+
+    it('decocher un drapeau ne reactive rien d autre', () => {
+        const next = applyProspectExclusivity(
+            { isProspect: false, isDelivery: true, isBilling: true },
+            'isBilling',
+            false,
+        )
+        expect(next).toEqual({ isProspect: false, isDelivery: true, isBilling: false })
+    })
+})
+
+describe('isBillingEmailRequired (RG-1.11)', () => {
+    it('obligatoire uniquement si Facturation est coche', () => {
+        expect(isBillingEmailRequired({ isProspect: false, isDelivery: false, isBilling: true })).toBe(true)
+        expect(isBillingEmailRequired({ isProspect: false, isDelivery: true, isBilling: false })).toBe(false)
+    })
+})
+
+describe('regles type de reglement (RG-1.12 / RG-1.13)', () => {
+    it('banque obligatoire si VIREMENT', () => {
+        expect(isBankRequiredForPaymentType('VIREMENT')).toBe(true)
+        expect(isBankRequiredForPaymentType('LCR')).toBe(false)
+        expect(isBankRequiredForPaymentType(null)).toBe(false)
+    })
+
+    it('RIB obligatoire si LCR', () => {
+        expect(isRibRequiredForPaymentType('LCR')).toBe(true)
+        expect(isRibRequiredForPaymentType('VIREMENT')).toBe(false)
+        expect(isRibRequiredForPaymentType(null)).toBe(false)
+    })
+})

frontend/modules/commercial/utils/clientConsultation.ts

@@ -0,0 +1,321 @@
+/**
+ * Helpers purs de l'ecran « Consultation client » (M1 Commercial, lecture seule).
+ *
+ * Mappent le payload `GET /api/clients/{id}` (relations embarquees, cf. groupe
+ * `client:item:read` + `client:read:accounting`) vers les brouillons « plats »
+ * partages avec les blocs reutilisables `ClientContactBlock` / `ClientAddressBlock`
+ * et l'onglet Comptabilite. Ne touchent ni a l'API ni a l'etat reactif : testables
+ * unitairement (cf. clientConsultation.spec.ts).
+ *
+ * Rappels de contrat back (verifies sur l'API reelle) :
+ *  - les relations ManyToOne (distributor/broker/tvaMode/paymentType/...) sont
+ *    serialisees en OBJETS embarques (avec @id + companyName/code/label), pas en IRI nu ;
+ *  - les champs nuls sont OMIS du JSON (skip_null_values) → toujours lire avec `?? null` ;
+ *  - les champs comptables et `ribs` sont TOTALEMENT ABSENTS sans permission
+ *    accounting.view (gate serveur via ClientReadGroupContextBuilder).
+ */
+
+import { formatPhoneFR } from '~/shared/utils/phone'
+import type {
+    AddressFormDraft,
+    ContactFormDraft,
+    RibFormDraft,
+} from '~/modules/commercial/types/clientForm'
+
+/** Reference Hydra embarquee minimale (@id toujours present). */
+export interface HydraRef {
+    '@id': string
+    [key: string]: unknown
+}
+
+/** Une relation peut etre embarquee (objet), un IRI nu (chaine) ou absente. */
+export type Relation = HydraRef | string | null | undefined
+
+/** Site embarque dans une adresse (groupe site:read). */
+export interface SiteRead extends HydraRef {
+    name?: string
+    color?: string
+}
+
+/** Categorie embarquee (groupe category:read). */
+export interface CategoryRead extends HydraRef {
+    code?: string
+    name?: string
+}
+
+/** Contact embarque (groupe client_contact:read). */
+export interface ContactRead extends HydraRef {
+    id: number
+    firstName?: string | null
+    lastName?: string | null
+    jobTitle?: string | null
+    phonePrimary?: string | null
+    phoneSecondary?: string | null
+    email?: string | null
+}
+
+/** Adresse embarquee (groupe client_address:read). */
+export interface AddressRead extends HydraRef {
+    id: number
+    country?: string | null
+    postalCode?: string | null
+    city?: string | null
+    street?: string | null
+    streetComplement?: string | null
+    billingEmail?: string | null
+    isProspect?: boolean
+    isDelivery?: boolean
+    isBilling?: boolean
+    sites?: SiteRead[]
+    categories?: CategoryRead[]
+    // L'embed M2M des contacts d'adresse peut etre un objet (partiel) ou un IRI nu.
+    contacts?: Array<HydraRef | string>
+}
+
+/** RIB embarque (groupe client:read:accounting, present ssi accounting.view). */
+export interface RibRead extends HydraRef {
+    id: number
+    label?: string | null
+    bic?: string | null
+    iban?: string | null
+}
+
+/** Client relie (distributeur / courtier) embarque (groupe client:read). */
+export interface RelatedClientRead extends HydraRef {
+    companyName?: string | null
+}
+
+/**
+ * Detail d'un client tel que renvoye par `GET /api/clients/{id}`. Tous les
+ * champs sont optionnels : skip_null_values cote serveur et gating accounting
+ * peuvent omettre n'importe quelle cle.
+ */
+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[]
+    distributor?: RelatedClientRead | string | null
+    broker?: RelatedClientRead | string | null
+    contacts?: ContactRead[]
+    addresses?: AddressRead[]
+    ribs?: RibRead[]
+    // Onglet Information
+    description?: string | null
+    competitors?: string | null
+    foundedAt?: string | null
+    employeesCount?: number | null
+    revenueAmount?: string | null
+    profitAmount?: string | null
+    directorName?: string | null
+    // Onglet Comptabilite (present ssi accounting.view)
+    siren?: string | null
+    accountNumber?: string | null
+    nTva?: string | null
+    tvaMode?: Relation
+    paymentDelay?: Relation
+    paymentType?: Relation
+    bank?: Relation
+}
+
+/** Etat « plat » de l'onglet Comptabilite (miroir lecture du formulaire 1.10). */
+export interface AccountingDraft {
+    siren: string | null
+    accountNumber: string | null
+    nTva: string | null
+    tvaModeIri: string | null
+    paymentDelayIri: string | null
+    paymentTypeIri: string | null
+    bankIri: string | null
+}
+
+/** Relation Distributeur/Courtier resolue pour l'affichage en lecture seule. */
+export interface ClientRelation {
+    type: 'distributeur' | 'courtier' | null
+    name: string | null
+}
+
+/** Option de select ({ value, label }) construite a partir de l'embed. */
+export interface SelectOption {
+    value: string
+    label: string
+}
+
+/** Option de categorie enrichie de son code (compatible CategoryOption des blocs). */
+export interface CategorySelectOption extends SelectOption {
+    code: string
+}
+
+/**
+ * Vue d'une adresse pour la consultation : le brouillon + ses options de select
+ * construites a partir de l'embed (sites/categories propres a CETTE adresse).
+ */
+export interface AddressView {
+    draft: AddressFormDraft
+    siteOptions: SelectOption[]
+    categoryOptions: CategorySelectOption[]
+}
+
+/** Extrait l'IRI d'une relation (objet embarque, IRI nu, ou null si absente). */
+export function iriOf(relation: Relation): string | null {
+    if (relation === null || relation === undefined) {
+        return null
+    }
+    if (typeof relation === 'string') {
+        return relation
+    }
+    return relation['@id'] ?? null
+}
+
+/**
+ * Resout la relation Distributeur/Courtier (RG-1.03 : mutuellement exclusives).
+ * Le nom est lu sur l'objet embarque (`companyName`) ; null si la relation est
+ * un IRI nu ou absente.
+ */
+export function relationOf(client: ClientDetail): ClientRelation {
+    const nameOf = (rel: RelatedClientRead | string | null | undefined): string | null =>
+        rel && typeof rel === 'object' ? (rel.companyName ?? null) : null
+
+    if (client.distributor) {
+        return { type: 'distributeur', name: nameOf(client.distributor) }
+    }
+    if (client.broker) {
+        return { type: 'courtier', name: nameOf(client.broker) }
+    }
+    return { type: null, name: null }
+}
+
+/** Mappe un contact embarque vers un brouillon (telephones formates XX XX XX XX XX). */
+export function mapContactToDraft(contact: ContactRead): ContactFormDraft {
+    const phoneSecondary = contact.phoneSecondary ?? null
+    return {
+        id: contact.id,
+        iri: contact['@id'] ?? null,
+        firstName: contact.firstName ?? null,
+        lastName: contact.lastName ?? null,
+        jobTitle: contact.jobTitle ?? null,
+        phonePrimary: contact.phonePrimary ? formatPhoneFR(contact.phonePrimary) : null,
+        phoneSecondary: phoneSecondary ? formatPhoneFR(phoneSecondary) : null,
+        email: contact.email ?? null,
+        hasSecondaryPhone: phoneSecondary !== null && phoneSecondary !== '',
+    }
+}
+
+/** Mappe une adresse embarquee vers un brouillon (IRI extraits des sous-collections). */
+export function mapAddressToDraft(address: AddressRead): AddressFormDraft {
+    return {
+        id: address.id,
+        isProspect: address.isProspect ?? false,
+        isDelivery: address.isDelivery ?? false,
+        isBilling: address.isBilling ?? false,
+        country: address.country ?? 'France',
+        postalCode: address.postalCode ?? null,
+        city: address.city ?? null,
+        street: address.street ?? null,
+        streetComplement: address.streetComplement ?? null,
+        categoryIris: (address.categories ?? []).map(c => c['@id']),
+        siteIris: (address.sites ?? []).map(s => s['@id']),
+        contactIris: (address.contacts ?? []).map(c => (typeof c === 'string' ? c : c['@id'])),
+        billingEmail: address.billingEmail ?? null,
+    }
+}
+
+/** Mappe un RIB embarque vers un brouillon. */
+export function mapRibToDraft(rib: RibRead): RibFormDraft {
+    return {
+        id: rib.id,
+        label: rib.label ?? null,
+        bic: rib.bic ?? null,
+        iban: rib.iban ?? null,
+    }
+}
+
+/** Mappe les champs comptables du client (scalaires + IRI des referentiels). */
+export function mapAccountingDraft(client: ClientDetail): AccountingDraft {
+    return {
+        siren: client.siren ?? null,
+        accountNumber: client.accountNumber ?? null,
+        nTva: client.nTva ?? null,
+        tvaModeIri: iriOf(client.tvaMode),
+        paymentDelayIri: iriOf(client.paymentDelay),
+        paymentTypeIri: iriOf(client.paymentType),
+        bankIri: iriOf(client.bank),
+    }
+}
+
+/**
+ * Options de categories (value=IRI, label=nom, code) construites depuis l'embed.
+ * Source role-independante : evite de dependre de `GET /categories` (403 pour les
+ * roles metier non-admin), qui laisserait les libelles vides.
+ */
+export function categoryOptionsOf(categories: CategoryRead[] | undefined): CategorySelectOption[] {
+    return (categories ?? []).map(c => ({
+        value: c['@id'],
+        label: c.name ?? c.code ?? c['@id'],
+        code: c.code ?? '',
+    }))
+}
+
+/** Options de sites (value=IRI, label=nom) construites depuis l'embed d'une adresse. */
+export function siteOptionsOf(sites: SiteRead[] | undefined): SelectOption[] {
+    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'] }))
+}
+
+/** Options de contacts (value=IRI, label=nom complet ou email) depuis l'embed client. */
+export function contactOptionsOf(contacts: ContactRead[] | undefined): SelectOption[] {
+    return (contacts ?? []).map(c => ({
+        value: c['@id'],
+        label: [c.firstName, c.lastName].filter(Boolean).join(' ') || (c.email ?? c['@id']),
+    }))
+}
+
+/**
+ * Liste a une seule option (ou vide) construite depuis un referentiel embarque
+ * (TvaMode / PaymentDelay / PaymentType / Bank) pour alimenter un MalioSelect en
+ * lecture seule. Le libelle vient de l'embed (`label` ou `name`), jamais d'un
+ * `GET` de referentiel — l'affichage reste correct quel que soit le role.
+ */
+export function referentialOptionOf(relation: Relation): SelectOption[] {
+    if (!relation || typeof relation === 'string') {
+        return []
+    }
+    const label = (relation.label as string | undefined)
+        ?? (relation.name as string | undefined)
+        ?? relation['@id']
+    return [{ value: relation['@id'], label }]
+}
+
+/** Vue d'une adresse (brouillon + options de select propres a l'adresse). */
+export function mapAddressView(address: AddressRead): AddressView {
+    return {
+        draft: mapAddressToDraft(address),
+        siteOptions: siteOptionsOf(address.sites),
+        categoryOptions: categoryOptionsOf(address.categories),
+    }
+}
+
+/**
+ * Bouton « Modifier » : visible si l'utilisateur peut editer au moins un onglet
+ * — `manage` (formulaire/onglets metier) OU `accounting.manage` (le role Compta
+ * doit pouvoir ouvrir l'edition pour son onglet Comptabilite). Le readonly fin
+ * par onglet est gere sur l'ecran d'edition (1.12).
+ */
+export function canEditClient(canAny: (codes: string[]) => boolean): boolean {
+    return canAny(['commercial.clients.manage', 'commercial.clients.accounting.manage'])
+}
+
+/** Bouton « Archiver » : permission archive ET client encore actif. */
+export function showArchiveAction(can: (code: string) => boolean, isArchived: boolean): boolean {
+    return can('commercial.clients.archive') && !isArchived
+}
+
+/** Bouton « Restaurer » : permission archive ET client deja archive. */
+export function showRestoreAction(can: (code: string) => boolean, isArchived: boolean): boolean {
+    return can('commercial.clients.archive') && isArchived
+}

frontend/modules/commercial/utils/clientFormRules.ts

@@ -0,0 +1,158 @@
+/**
+ * Regles metier pures de l'ecran « Ajouter un client » (M1 Commercial).
+ *
+ * Centralisees ici (hors composant) pour rester testables unitairement et
+ * partagees entre la page de creation et les futurs ecrans d'edition (1.11/1.12).
+ * Ces helpers ne touchent ni a l'API ni a l'etat reactif : ils prennent des
+ * brouillons « plats » et retournent des booleens / nouveaux objets.
+ *
+ * Le back reste la source de verite (les RG sont re-validees serveur) ; ces
+ * regles ne servent qu'au feedback UI immediat (gating de boutons, visibilite).
+ *
+ * NOTE RG-1.04 (Information obligatoire pour la Commerciale) : volontairement
+ * NON miroite cote front pour l'instant. Le payload /api/me ne porte pas le code
+ * de role (roles = IRIs opaques) et Bureau partage les memes permissions que
+ * Commerciale : aucun signal fiable pour distinguer le role cote front. Le back
+ * (ClientProcessor, via BusinessRoleAware) applique la regle de maniere fiable ;
+ * a rebrancher ici des qu'un code de role sera expose dans /api/me.
+ */
+
+/**
+ * Onglets « coquille » (non encore implementes) : frame vide, passage
+ * automatique a l'onglet suivant (decision Tristan 28/05).
+ */
+export const CLIENT_FORM_PLACEHOLDER_TABS = ['transport', 'statistics', 'reports', 'exchanges'] as const
+
+/**
+ * Onglets affiches uniquement en MODIFICATION (selon le role), jamais a la
+ * creation : Statistiques / Rapports / Echanges. A rebrancher dans les ecrans
+ * d'edition (1.11/1.12) via l'option `includeEditOnlyTabs`.
+ */
+export const CLIENT_FORM_EDIT_ONLY_TABS = ['statistics', 'reports', 'exchanges'] as const
+
+/**
+ * Construit l'ordre des onglets du formulaire client.
+ *  - L'onglet Comptabilite n'est present que si l'utilisateur a `accounting.view`
+ *    (Bureau / Commerciale ne le voient pas).
+ *  - Les onglets edit-only (Statistiques / Rapports / Echanges) sont exclus par
+ *    defaut (creation) ; passer `includeEditOnlyTabs: true` pour les afficher en
+ *    modification.
+ * Ordre aligne sur la spec M1 § Ecran « Ajouter un client ».
+ */
+export function buildClientFormTabKeys(
+    canAccountingView: boolean,
+    options: { includeEditOnlyTabs?: boolean } = {},
+): string[] {
+    const keys = ['information', 'contact', 'address', 'transport']
+    if (canAccountingView) {
+        keys.push('accounting')
+    }
+    if (options.includeEditOnlyTabs) {
+        keys.push(...CLIENT_FORM_EDIT_ONLY_TABS)
+    }
+    return keys
+}
+
+/** Sous-ensemble d'un contact necessaire aux regles de nommage (RG-1.05/1.14). */
+export interface ContactDraft {
+    firstName: string | null
+    lastName: string | null
+}
+
+/** Drapeaux d'usage d'une adresse (RG-1.06/07/08/11). */
+export interface AddressFlagsDraft {
+    isProspect: boolean
+    isDelivery: boolean
+    isBilling: boolean
+}
+
+/** Vrai si une chaine porte au moins un caractere non-espace. */
+function isFilled(value: string | null | undefined): boolean {
+    return value !== null && value !== undefined && value.trim() !== ''
+}
+
+/**
+ * RG-1.05 : un contact est valide des qu'il porte un nom OU un prenom.
+ */
+export function isContactNamed(contact: ContactDraft): boolean {
+    return isFilled(contact.firstName) || isFilled(contact.lastName)
+}
+
+/**
+ * RG-1.14 : l'onglet Contact ne peut etre finalise que s'il reste au moins un
+ * contact nomme (nom ou prenom).
+ */
+export function hasAtLeastOneValidContact(contacts: ContactDraft[]): boolean {
+    return contacts.some(isContactNamed)
+}
+
+/**
+ * RG-1.06/07/08 : une adresse de prospection est exclusive d'une adresse de
+ * livraison/facturation. Prospect n'est selectionnable que si ni Livraison ni
+ * Facturation ne sont coches.
+ */
+export function canSelectProspect(flags: AddressFlagsDraft): boolean {
+    return !flags.isDelivery && !flags.isBilling
+}
+
+/**
+ * RG-1.06/07/08 : Livraison et Facturation ne sont selectionnables que si
+ * Prospect n'est pas coche.
+ */
+export function canSelectDeliveryOrBilling(flags: AddressFlagsDraft): boolean {
+    return !flags.isProspect
+}
+
+/**
+ * Applique l'exclusivite Prospect / (Livraison|Facturation) au changement d'un
+ * drapeau. Cocher Prospect efface Livraison + Facturation ; cocher Livraison ou
+ * Facturation efface Prospect. Decocher n'a aucun effet de bord. Retourne un
+ * nouvel objet (pas de mutation de l'entree).
+ */
+export function applyProspectExclusivity(
+    flags: AddressFlagsDraft,
+    field: keyof AddressFlagsDraft,
+    value: boolean,
+): AddressFlagsDraft {
+    const next: AddressFlagsDraft = { ...flags, [field]: value }
+
+    if (value && field === 'isProspect') {
+        next.isDelivery = false
+        next.isBilling = false
+    }
+    else if (value && (field === 'isDelivery' || field === 'isBilling')) {
+        next.isProspect = false
+    }
+
+    return next
+}
+
+/**
+ * RG-1.11 : l'email de facturation n'est visible/obligatoire que si l'adresse
+ * est une adresse de facturation.
+ */
+export function isBillingEmailRequired(flags: AddressFlagsDraft): boolean {
+    return flags.isBilling
+}
+
+/** Code stable du type de reglement « virement » (cf. PaymentType.code, RG-1.12). */
+const PAYMENT_TYPE_TRANSFER = 'VIREMENT'
+
+/** Code stable du type de reglement « lettre de change » (RG-1.13). */
+const PAYMENT_TYPE_LCR = 'LCR'
+
+/**
+ * RG-1.12 : la banque est obligatoire lorsque le type de reglement est un
+ * virement.
+ */
+export function isBankRequiredForPaymentType(code: string | null | undefined): boolean {
+    return code === PAYMENT_TYPE_TRANSFER
+}
+
+/**
+ * RG-1.13 : au moins un RIB complet est obligatoire lorsque le type de reglement
+ * est une LCR.
+ */
+export function isRibRequiredForPaymentType(code: string | null | undefined): boolean {
+    return code === PAYMENT_TYPE_LCR
+}

frontend/shared/composables/useAddressAutocomplete.ts

@@ -0,0 +1,60 @@
+// STUB ERP-63 — remplacé par l'implémentation BAN d'ERP-66.
+//
+// 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.
+//
+// Contrat figé par ERP-66 (c'est lui qui fait foi) :
+//   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.
+
+/** Une suggestion de ville renvoyée à partir d'un code postal. */
+export interface CitySuggestion {
+    city: string
+    postalCode: string
+}
+
+/** Une suggestion d'adresse complète (saisie assistée du champ « Adresse »). */
+export interface AddressSuggestion {
+    label: string
+    street: string
+    postalCode: string
+    city: string
+}
+
+export interface AddressAutocomplete {
+    searchCity(postalCode: string): Promise<CitySuggestion[]>
+    searchAddress(query: string, postalCode?: string): Promise<AddressSuggestion[]>
+}
+
+/** Erreur signalant que le service d'autocomplétion 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.')
+        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.
+ */
+export function useAddressAutocomplete(): AddressAutocomplete {
+    return {
+        async searchCity(_postalCode: string): Promise<CitySuggestion[]> {
+            throw new AddressAutocompleteUnavailableError()
+        },
+        async searchAddress(_query: string, _postalCode?: string): Promise<AddressSuggestion[]> {
+            throw new AddressAutocompleteUnavailableError()
+        },
+    }
+}

src/Module/Commercial/Domain/Repository/ClientRepositoryInterface.php

@@ -33,6 +33,12 @@ interface ClientRepositoryInterface
      * la liste paginee (ClientProvider) et l'export (ClientExportController)
      * partagent strictement la meme logique de selection.
      *
+     * Contrat = SELECTION uniquement (filtres + tri). Aucun fetch-join to-many :
+     * l'hydratation des collections affichees est une decision de l'appelant
+     * (cf. {@see self::hydrateListCollections()}), pour ne pas imposer le cout
+     * d'un produit cartesien a un consommateur qui ne filtrerait/compterait que
+     * (ERP-100).
+     *
      * @param list<string> $categoryCodes
      * @param list<int>    $siteIds
      */
@@ -43,4 +49,19 @@ interface ClientRepositoryInterface
         array $siteIds = [],
         bool $archivedOnly = false,
     ): QueryBuilder;
+
+    /**
+     * Hydrate en lot les collections affichees par le repertoire (categories,
+     * adresses et leurs sites) sur un jeu de clients DEJA charges, via l'identity
+     * map Doctrine (memes instances). A appeler apres une selection bornee (page
+     * courante ou jeu d'export) pour eviter le N+1 a la serialisation, sans
+     * imposer de fetch-join au QueryBuilder de selection (ERP-100).
+     *
+     * Charge les categories et les adresses/sites en DEUX requetes distinctes
+     * (et non un triple fetch-join) pour ne pas multiplier categories x adresses
+     * x sites en un seul produit cartesien.
+     *
+     * @param list<Client> $clients
+     */
+    public function hydrateListCollections(array $clients): void;
 }

src/Module/Commercial/Infrastructure/ApiPlatform/State/Provider/ClientProvider.php

@@ -83,8 +83,13 @@ final class ClientProvider implements ProviderInterface
         // Echappatoire ?pagination=false : collection complete sans Paginator
         // (cf. convention ERP-72 — utile pour un <select> cote front).
         if (!$this->pagination->isEnabled($operation, $context)) {
-            // @var list<Client> $result
+            /** @var list<Client> $clients */
-            return $qb->getQuery()->getResult();
+            $clients = $qb->getQuery()->getResult();
+            // Hydratation batchee des collections affichees (cf. ERP-100) : evite
+            // le N+1 si la serialisation touche categories/sites, sans cartesien.
+            $this->repository->hydrateListCollections($clients);
+
+            return $clients;
         }
 
         $limit  = $this->pagination->getLimit($operation, $context);
@@ -93,9 +98,13 @@ final class ClientProvider implements ProviderInterface
 
         $qb->setFirstResult($offset)->setMaxResults($limit);
 
-        // fetchJoinCollection: true pour un COUNT correct des que des JOINs
+        // Le QB de selection ne porte plus de fetch-join to-many (ERP-100) : le
-        // to-many seront ajoutes (sous-collections embarquees en detail).
+        // COUNT est simple, fetchJoinCollection inutile. On materialise la page
-        return new Paginator(new DoctrinePaginator($qb->getQuery(), fetchJoinCollection: true));
+        // puis on hydrate ses collections en lot (memes entites managees).
+        $paginator = new Paginator(new DoctrinePaginator($qb->getQuery(), fetchJoinCollection: false));
+        $this->repository->hydrateListCollections(iterator_to_array($paginator));
+
+        return $paginator;
     }
 
     /**

src/Module/Commercial/Infrastructure/Controller/ClientExportController.php

@@ -69,6 +69,11 @@ final class ClientExportController
             ->getResult()
         ;
 
+        // Hydratation batchee des categories + adresses/sites (ERP-100) : le QB de
+        // selection ne fetch-join plus, on remplit les collections en 2 requetes
+        // IN bornees plutot que d'hydrater un produit cartesien sur tout le jeu.
+        $this->repository->hydrateListCollections($clients);
+
         $withSiren = $this->security->isGranted('commercial.clients.accounting.view');
 
         $binary = $this->exporter->export(

src/Module/Commercial/Infrastructure/Doctrine/DoctrineClientRepository.php

@@ -38,16 +38,12 @@ class DoctrineClientRepository extends ServiceEntityRepository implements Client
         array $siteIds = [],
         bool $archivedOnly = false,
     ): QueryBuilder {
+        // SELECTION uniquement (filtres + tri) : pas de fetch-join to-many ici.
+        // L'hydratation des collections affichees (Catégories / Site(s)) est
+        // deleguee a hydrateListCollections() une fois le jeu borne, pour ne pas
+        // imposer un produit cartesien aux chemins non pagines (export,
+        // ?pagination=false) — ERP-100.
         $qb = $this->createQueryBuilder('c')
-            // Jointures + addSelect pour hydrater en une seule requete les
-            // collections affichees par le Repertoire (colonnes Catégories /
-            // Site(s)) : sans cela, la serialisation declenche un N+1 (une
-            // requete par client, puis par adresse). Le Paginator ORM
-            // (fetchJoinCollection: true, cf. ClientProvider) gere le COUNT
-            // malgre ces jointures to-many.
-            ->leftJoin('c.categories', 'cat')->addSelect('cat')
-            ->leftJoin('c.addresses', 'addr')->addSelect('addr')
-            ->leftJoin('addr.sites', 'site')->addSelect('site')
             ->andWhere('c.deletedAt IS NULL')
             ->orderBy('c.companyName', 'ASC')
         ;
@@ -66,6 +62,46 @@ class DoctrineClientRepository extends ServiceEntityRepository implements Client
         return $qb;
     }
 
+    public function hydrateListCollections(array $clients): void
+    {
+        if ([] === $clients) {
+            return;
+        }
+
+        // Ids des clients deja charges (entites managees). On rehydrate leurs
+        // collections via l'identity map : les requetes ci-dessous renvoient les
+        // MEMES instances Client, dont les collections sont alors remplies.
+        $ids = [];
+        foreach ($clients as $client) {
+            $id = $client->getId();
+            if (null !== $id) {
+                $ids[] = $id;
+            }
+        }
+        if ([] === $ids) {
+            return;
+        }
+
+        // 1re passe : categories (colonne « Catégories »). Produit c x cat seul.
+        $this->createQueryBuilder('c')
+            ->leftJoin('c.categories', 'cat')->addSelect('cat')
+            ->where('c.id IN (:ids)')->setParameter('ids', $ids)
+            ->getQuery()
+            ->getResult()
+        ;
+
+        // 2e passe : adresses + sites (colonne « Site(s) », sites portes par les
+        // adresses — RG-1.10). Le join addr -> site reste imbrique mais n'est
+        // plus multiplie par les categories : le cartesien global est casse.
+        $this->createQueryBuilder('c')
+            ->leftJoin('c.addresses', 'addr')->addSelect('addr')
+            ->leftJoin('addr.sites', 'site')->addSelect('site')
+            ->where('c.id IN (:ids)')->setParameter('ids', $ids)
+            ->getQuery()
+            ->getResult()
+        ;
+    }
+
     /**
      * Recherche fuzzy insensible a la casse sur companyName + lastName + email.
      * Les metacaracteres LIKE (%, _, \) saisis sont echappes pour rester

src/Shared/Infrastructure/Doctrine/TimestampableBlamableSubscriber.php

@@ -6,12 +6,12 @@ namespace App\Shared\Infrastructure\Doctrine;
 
 use App\Shared\Domain\Contract\BlamableInterface;
 use App\Shared\Domain\Contract\TimestampableInterface;
-use DateTimeImmutable;
 use Doctrine\Bundle\DoctrineBundle\Attribute\AsDoctrineListener;
 use Doctrine\ORM\Event\PrePersistEventArgs;
 use Doctrine\ORM\Event\PreUpdateEventArgs;
 use Doctrine\ORM\Events;
 use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\Clock\ClockInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
 
 /**
@@ -30,12 +30,19 @@ use Symfony\Component\Security\Core\User\UserInterface;
 #[AsDoctrineListener(event: Events::preUpdate)]
 final class TimestampableBlamableSubscriber
 {
-    public function __construct(private readonly Security $security) {}
+    // L'horloge est injectee (et non un `new DateTimeImmutable()` direct) pour
+    // que les tests puissent figer/avancer le temps de facon deterministe via
+    // ClockSensitiveTrait (cf. ERP-98). En prod, le service `clock` delegue a
+    // l'horloge systeme reelle.
+    public function __construct(
+        private readonly Security $security,
+        private readonly ClockInterface $clock,
+    ) {}
 
     public function prePersist(PrePersistEventArgs $args): void
     {
         $entity = $args->getObject();
-        $now    = new DateTimeImmutable();
+        $now    = $this->clock->now();
         $user   = $this->security->getUser();
 
         if ($entity instanceof TimestampableInterface) {
@@ -55,7 +62,7 @@ final class TimestampableBlamableSubscriber
         $user   = $this->security->getUser();
 
         if ($entity instanceof TimestampableInterface) {
-            $entity->setUpdatedAt(new DateTimeImmutable());
+            $entity->setUpdatedAt($this->clock->now());
         }
 
         if ($entity instanceof BlamableInterface && $user instanceof UserInterface) {

tests/Architecture/AuditableEntitiesHaveI18nLabelTest.php

@@ -0,0 +1,167 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Tests\Architecture;
+
+use App\Shared\Domain\Attribute\Auditable;
+use PHPUnit\Framework\TestCase;
+use ReflectionClass;
+use Symfony\Component\Finder\Finder;
+
+use function is_string;
+use function sprintf;
+
+use const JSON_THROW_ON_ERROR;
+
+/**
+ * Garde-fou architecture : toute entite `#[Auditable]` doit avoir son libelle
+ * i18n dans le bloc `audit.entity` du `fr.json` du shell.
+ *
+ * Pourquoi : le filtre « Type d'entite » de l'audit-log est dynamique
+ * (`GET /audit-log-entity-types` renvoie les `entity_type` distincts presents
+ * en base). Des qu'un module audite une entite, un nouveau type apparait. Le
+ * rendu front (`formatEntityType`, audit-log.vue) construit la cle
+ * `audit.entity.<module>_<entity>` et, faute de traduction, retombe
+ * SILENCIEUSEMENT sur le type technique brut (ex: `commercial.Client`). Le
+ * manque passe donc inapercu jusqu'a observation dans l'UI.
+ *
+ * Ce test rend le manque BLOQUANT (meme esprit que ColumnsHaveSqlCommentTest) :
+ * il scanne les entites `#[Auditable]` sous `src/Module/<m>/Domain/Entity/`,
+ * derive la cle attendue comme le fait le front, et echoue si elle est absente
+ * du `fr.json`.
+ *
+ * Derivation de la cle (miroir exact de AuditListener::formatEntityType + de
+ * formatEntityType cote front) :
+ *   FQCN `App\Module\Commercial\Domain\Entity\ClientAddress`
+ *     -> entity_type `commercial.ClientAddress`   (module en minuscules, Entity intacte)
+ *     -> cle i18n    `commercial_clientaddress`   (tout en minuscules, `.` -> `_`)
+ *
+ * @internal
+ */
+final class AuditableEntitiesHaveI18nLabelTest extends TestCase
+{
+    /**
+     * Chemin du fichier de traductions FR du shell. Source unique des libelles
+     * d'entite audit (decision ERP-99 : emplacement centralise, schema flat).
+     */
+    private const LOCALE_FILE = __DIR__.'/../../frontend/i18n/locales/fr.json';
+
+    public function testEveryAuditableEntityHasAnI18nLabel(): void
+    {
+        $labels = $this->loadAuditEntityLabels();
+
+        $finder = new Finder()
+            ->files()
+            ->in(__DIR__.'/../../src/Module')
+            ->path('Domain/Entity')
+            ->name('*.php')
+        ;
+
+        // Garde : si le scan ne trouve rien, le chemin est casse — le test
+        // deviendrait un faux positif vert. On verifie qu'il a du grain a moudre.
+        self::assertNotEmpty(iterator_to_array($finder), 'Aucune entite scannee : chemin src/Module invalide ?');
+
+        $checked = 0;
+        foreach ($finder as $file) {
+            $fqcn = $this->extractFqcn($file->getRealPath());
+            if (null === $fqcn) {
+                continue;
+            }
+
+            $reflection = new ReflectionClass($fqcn);
+            // On ne s'interesse qu'aux entites reellement auditees.
+            if ($reflection->isAbstract() || [] === $reflection->getAttributes(Auditable::class)) {
+                continue;
+            }
+
+            $key = $this->deriveI18nKey($fqcn);
+            self::assertNotNull(
+                $key,
+                sprintf('Entite %s hors structure modulaire attendue (App\Module\<M>\Domain\Entity\<E>).', $fqcn),
+            );
+
+            self::assertArrayHasKey(
+                $key,
+                $labels,
+                sprintf(
+                    'L\'entite auditable %s n\'a pas de libelle i18n. Ajouter "%s" dans le bloc '
+                    .'`audit.entity` de frontend/i18n/locales/fr.json (sinon le filtre audit-log '
+                    .'affiche le type technique brut). Cf. ERP-99 + .claude/rules/backend.md § Audit.',
+                    $fqcn,
+                    $key,
+                ),
+            );
+            self::assertNotSame('', trim($labels[$key]), sprintf('Le libelle audit "%s" est vide.', $key));
+
+            ++$checked;
+        }
+
+        // Garde : au moins une entite auditable doit avoir ete verifiee, sinon
+        // la detection de l'attribut est cassee (faux positif vert).
+        self::assertGreaterThan(0, $checked, 'Aucune entite #[Auditable] detectee : detection d\'attribut cassee ?');
+    }
+
+    /**
+     * Charge le bloc `audit.entity` du fr.json sous forme de map cle -> libelle.
+     *
+     * @return array<string, string>
+     */
+    private function loadAuditEntityLabels(): array
+    {
+        $raw = file_get_contents(self::LOCALE_FILE);
+        self::assertIsString($raw, sprintf('Fichier de locale introuvable : %s', self::LOCALE_FILE));
+
+        /** @var array<string, mixed> $json */
+        $json = json_decode($raw, true, flags: JSON_THROW_ON_ERROR);
+
+        $entity = $json['audit']['entity'] ?? null;
+        self::assertIsArray($entity, 'Bloc `audit.entity` absent ou invalide dans fr.json.');
+
+        $labels = [];
+        foreach ($entity as $key => $value) {
+            if (is_string($key) && is_string($value)) {
+                $labels[$key] = $value;
+            }
+        }
+
+        return $labels;
+    }
+
+    /**
+     * Derive la cle i18n `<module>_<entity>` depuis le FQCN, en miroir de
+     * AuditListener::formatEntityType (module en minuscules) suivi de
+     * l'aplatissement front (tout en minuscules, `.` -> `_`).
+     *
+     * Retourne null si le FQCN ne respecte pas la structure modulaire.
+     */
+    private function deriveI18nKey(string $fqcn): ?string
+    {
+        if (1 !== preg_match('#^App\\\Module\\\(?<module>[^\\\]+)\\\.+\\\(?<entity>[^\\\]+)$#', $fqcn, $m)) {
+            return null;
+        }
+
+        return strtolower($m['module']).'_'.strtolower($m['entity']);
+    }
+
+    /**
+     * Extrait le FQCN (namespace + classe) d'un fichier PHP par lecture du
+     * source, sans charger le fichier.
+     */
+    private function extractFqcn(string $path): ?string
+    {
+        $source = file_get_contents($path);
+        if (false === $source) {
+            return null;
+        }
+
+        if (
+            1 !== preg_match('/^namespace\s+([^;]+);/m', $source, $nsMatch)
+            || 1 !== preg_match('/^(?:final\s+|abstract\s+|readonly\s+)*class\s+(\w+)/m', $source, $classMatch)
+        ) {
+            return null;
+        }
+
+        return trim($nsMatch[1]).'\\'.$classMatch[1];
+    }
+}

tests/Module/Catalog/Api/CategoryTimestampableBlamableTest.php

@@ -7,6 +7,8 @@ namespace App\Tests\Module\Catalog\Api;
 use App\Module\Catalog\Domain\Entity\Category;
 use App\Module\Core\Domain\Entity\User;
 use DateTimeImmutable;
+use Symfony\Component\Clock\ClockInterface;
+use Symfony\Component\Clock\Test\ClockSensitiveTrait;
 
 /**
  * Tests RG-1.15 / RG-1.16 : le TimestampableBlamableSubscriber doit remplir
@@ -20,12 +22,39 @@ use DateTimeImmutable;
  *  - DELETE : deletedAt rempli ET updatedAt + updatedBy mis a jour (UPDATE
  *    Doctrine declenche le subscriber)
  *
+ * ERP-98 : ces tests pilotent une horloge mockee (ClockSensitiveTrait) plutot
+ * que de dependre d'un `sleep(1)` reel. Le subscriber lit le service `clock`,
+ * que `self::mockTime()` remplace par un MockClock fige au niveau du process —
+ * ce qui survit aux reboots de kernel entre requetes (POST admin / PATCH bob)
+ * et reste insensible a la derive d'horloge WSL2 a l'origine des flakes.
+ *
  * @internal
  */
 final class CategoryTimestampableBlamableTest extends AbstractCatalogApiTestCase
 {
+    use ClockSensitiveTrait;
+
+    /**
+     * Fige l'horloge globale sur l'instant courant DANS LE FUSEAU PHP par
+     * defaut, et la retourne pour la piloter (`sleep()`).
+     *
+     * Subtilite : `self::mockTime()` cree par defaut un MockClock en UTC, or
+     * les colonnes `TIMESTAMP WITHOUT TIME ZONE` round-trippent via le fuseau
+     * PHP (Europe/Paris). Un MockClock UTC decalerait createdAt de l'offset
+     * (2h) au rechargement. On seede donc avec `new DateTimeImmutable()`
+     * (fuseau par defaut), exactement comme le NativeClock en prod.
+     */
+    private function freezeClock(): ClockInterface
+    {
+        return self::mockTime(new DateTimeImmutable());
+    }
+
     public function testCreatedByAdminOnPost(): void
     {
+        // Horloge figee : le subscriber posera createdAt/updatedAt sur cet
+        // instant exact, insensible a tout decalage d'horloge reel.
+        $clock = $this->freezeClock();
+
         $type = $this->createCategoryType();
 
         /** @var User $admin */
@@ -33,9 +62,7 @@ final class CategoryTimestampableBlamableTest extends AbstractCatalogApiTestCase
         self::assertNotNull($admin);
         $adminId = $admin->getId();
 
-        $before = new DateTimeImmutable();
+        $before = $clock->now();
-        // Petit decalage pour absorber les arrondis a la seconde de Postgres.
-        sleep(1);
 
         $client   = $this->createAdminClient();
         $response = $client->request('POST', '/api/categories', [
@@ -103,6 +130,8 @@ final class CategoryTimestampableBlamableTest extends AbstractCatalogApiTestCase
 
     public function testPatchUpdatesUpdatedFieldsOnly(): void
     {
+        $clock = $this->freezeClock();
+
         // Etape 1 : creation par admin pour figer createdBy=admin.
         $type        = $this->createCategoryType();
         $adminClient = $this->createAdminClient();
@@ -127,9 +156,9 @@ final class CategoryTimestampableBlamableTest extends AbstractCatalogApiTestCase
         $initialUpdatedAt   = $initial->getUpdatedAt();
         $initialCreatedById = $initial->getCreatedBy()->getId();
 
-        // Decalage temporel suffisant pour que la precision PG (seconde)
+        // Avance deterministe de l'horloge mockee : garantit un updatedAt
-        // capte un updatedAt different.
+        // strictement superieur cote PG (precision seconde) sans sleep reel.
-        sleep(1);
+        $clock->sleep(1);
 
         // Etape 2 : PATCH par un autre user (manager non-admin) — simule "bob".
         $manage    = $this->createManageClient();
@@ -180,6 +209,8 @@ final class CategoryTimestampableBlamableTest extends AbstractCatalogApiTestCase
 
     public function testSoftDeleteAlsoUpdatesUpdatedFields(): void
     {
+        $clock = $this->freezeClock();
+
         // RG-1.16 : le soft delete est un UPDATE Doctrine, donc le subscriber
         // doit aussi avancer updatedAt et updatedBy en plus de poser deletedAt.
         $type        = $this->createCategoryType();
@@ -202,7 +233,8 @@ final class CategoryTimestampableBlamableTest extends AbstractCatalogApiTestCase
         $initial          = $em->getRepository(Category::class)->find($createdId);
         $initialUpdatedAt = $initial->getUpdatedAt();
 
-        sleep(1);
+        // Avance deterministe de l'horloge mockee (cf. testPatch).
+        $clock->sleep(1);
 
         // Soft delete par un manager non-admin.
         $manage    = $this->createManageClient();

tests/Module/Commercial/Api/ClientExportControllerTest.php

@@ -4,6 +4,8 @@ declare(strict_types=1);
 
 namespace App\Tests\Module\Commercial\Api;
 
+use App\Module\Commercial\Domain\Entity\ClientAddress;
+use App\Module\Sites\Domain\Entity\Site;
 use PhpOffice\PhpSpreadsheet\IOFactory;
 
 /**
@@ -88,6 +90,39 @@ final class ClientExportControllerTest extends AbstractCommercialApiTestCase
         self::assertNotContains('SECTEUR CO', $names);
     }
 
+    /**
+     * ERP-100 : depuis le decouplage hydratation/selection, le QueryBuilder de
+     * liste ne fetch-join plus les collections — l'export les recharge en lot via
+     * hydrateListCollections(). Ce test garde que les colonnes « Catégories » et
+     * « Site(s) » restent peuplees (un oubli d'hydratation les rendrait vides
+     * sans erreur).
+     */
+    public function testExportPopulatesCategoryAndSiteColumns(): void
+    {
+        $client = $this->createAdminClient();
+        $seed   = $this->seedClient('Hydrate Co', false, 'DISTRIBUTEUR');
+
+        $em   = $this->getEm();
+        $site = $em->getRepository(Site::class)->findOneBy([]);
+        self::assertNotNull($site, 'Aucun site seede : impossible de tester la colonne Site(s).');
+
+        $address = new ClientAddress();
+        $address->setClient($seed);
+        $address->setPostalCode('86100');
+        $address->setCity('Châtellerault');
+        $address->setStreet('1 rue du Test');
+        $address->addSite($site);
+        $em->persist($address);
+        $em->flush();
+
+        $flat = $this->flatten($this->gridFromResponse($client->request('GET', self::EXPORT_URL)->getContent()));
+
+        // Colonne « Catégories » : libelle de la categorie du client (getName()).
+        self::assertStringContainsString('test_cli_cat_distributeur', $flat);
+        // Colonne « Site(s) » : site agrege depuis l'adresse (RG-1.10).
+        self::assertStringContainsString((string) $site->getName(), $flat);
+    }
+
     public function testSirenColumnPresentWithAccountingView(): void
     {
         // L'admin bypass le RBAC : il a donc accounting.view -> colonne SIREN.

tests/Shared/Infrastructure/Doctrine/TimestampableBlamableSubscriberTest.php

@@ -14,6 +14,7 @@ use Doctrine\ORM\Event\PrePersistEventArgs;
 use Doctrine\ORM\Event\PreUpdateEventArgs;
 use PHPUnit\Framework\TestCase;
 use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\Clock\MockClock;
 use Symfony\Component\Security\Core\User\UserInterface;
 
 /**
@@ -30,7 +31,7 @@ final class TimestampableBlamableSubscriberTest extends TestCase
     public function testPrePersistWithUser(): void
     {
         $user       = $this->createStub(UserInterface::class);
-        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning($user));
+        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning($user), new MockClock());
         $entity     = new FullAuditableFixture();
 
         $subscriber->prePersist($this->prePersistArgs($entity));
@@ -45,7 +46,7 @@ final class TimestampableBlamableSubscriberTest extends TestCase
 
     public function testPrePersistWithoutUser(): void
     {
-        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning(null));
+        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning(null), new MockClock());
         $entity     = new FullAuditableFixture();
 
         $subscriber->prePersist($this->prePersistArgs($entity));
@@ -60,7 +61,12 @@ final class TimestampableBlamableSubscriberTest extends TestCase
     public function testPreUpdate(): void
     {
         $user = $this->createStub(UserInterface::class);
-        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning($user));
+        // Horloge figee 1s apres le createdAt simule : updatedAt doit avancer
+        // de facon deterministe, sans dependre de l'heure reelle.
+        $subscriber = new TimestampableBlamableSubscriber(
+            $this->securityReturning($user),
+            new MockClock(new DateTimeImmutable('2020-01-01 10:00:01')),
+        );
 
         // On simule une entite deja persistee : createdAt fige dans le passe,
         // createdBy positionne par une creation anterieure.
@@ -80,7 +86,7 @@ final class TimestampableBlamableSubscriberTest extends TestCase
     public function testPartialEntityTimestampableOnly(): void
     {
         $user       = $this->createStub(UserInterface::class);
-        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning($user));
+        $subscriber = new TimestampableBlamableSubscriber($this->securityReturning($user), new MockClock());
         $entity     = new TimestampableOnlyFixture();
 
         // Entite Timestampable mais NON Blamable : seules les dates sont posees,