chore: bump version to v0.1.73

## Contexte

ERP-102 — Découvert pendant ERP-64. Connecté avec un rôle **métier** (bureau / compta / commerciale), `GET /api/categories` et `GET /api/sites` renvoient **403**, alors que `/tva_modes`, `/payment_delays`, `/payment_types`, `/banks` renvoient 200.

Conséquences : page **Création client** inutilisable (le `Promise.all` rejetait → **tous** les selects vides) et **filtres Catégories/Sites vides** au répertoire.

## Cause

La `security` des `GetCollection`/`Get` de `Category` et `Site` exigeait `catalog.categories.view` / `sites.view` — permissions d'**administration** du Catalogue / des Sites. Or ces référentiels sont **transverses** : tout rôle qui gère un tiers doit pouvoir les lire.

## Correctif back — Option C (permission de lecture-référentiel dédiée)

Choix d'archi retenu parmi les 3 du ticket :

- **Pourquoi pas A** (`... or is_granted('commercial.clients.view')`) : coupler `Category`/`Site` à une permission **Commercial** viole l'esprit de la règle ABSOLUE n°1 et ne scale pas (M2 Fournisseurs devrait rajouter un OR).
- **Pourquoi pas B** (donner `.view` aux rôles métier) : `.view` = accès admin → items sidebar admin Catégories/Sites exposés à une commerciale.
- **C** : nouvelle permission `catalog.categories.read_ref` / `sites.read_ref`, distincte de `.view` (pas d'item sidebar) et de `.manage`. Chaque permission appartient à **son** module → isolement inter-module préservé, **réutilisable tel quel par M2 Fournisseurs**. C'est la « permission référentiel lisible » que le ticket pointe lui-même.

Détail :
- `CatalogModule` / `SitesModule` : déclaration des deux permissions `read_ref`.
- `Category` / `Site` : security lecture (liste + item) = `view OR read_ref`.
- `RbacSeeder` (matrice § 2.7) : `read_ref` attaché à bureau / compta / commerciale ; usine reste sans accès.

## Durcissement front (résilience — requis dans tous les cas)

`useClientReferentials.loadCommon` : `Promise.all` → **`Promise.allSettled`** avec affectation isolée par référentiel. L'échec d'un endpoint ne vide plus que **son** select, plus la totalité du formulaire.

## Tests (TDD)

- `ClientRBACMatrixTest::testBusinessRolesCanReadCategoriesAndSitesReferentials` — bureau/compta/commerciale listent `/categories` et `/sites` (200), usine reste 403.
- `SitesModuleTest` — set de permissions porté à 4 codes.
- `useClientReferentials.spec` (Vitest) — un référentiel en échec ne vide que son select.

## Vérifications

- `make test` (back) : **467/467** ✓
- `make nuxt-test` (front) : **131/131** ✓
- `make php-cs-fixer` : conforme ✓

## Note miroirs RBAC

`config/sidebar.php` / `personas.ts` / `SeedE2ECommand.php` **non touchés** : `read_ref` n'ajoute aucun item sidebar, le persona E2E `user-full` lit déjà via `.view`, et aucun persona ne modélise un rôle métier seul. Pas de nouveau test E2E (règle n°7 : bug attrapé avant prod). La source de vérité de la matrice (`RbacSeeder`) est mise à jour et couverte par `ClientRBACMatrixTest`.

Closes ERP-102.

---------

Co-authored-by: Matthieu <contact@malio.fr>
Reviewed-on: #53
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-committed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.70'
+    app.version: '0.1.73'

frontend/i18n/locales/fr.json

@@ -87,7 +87,33 @@
                 "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 ?"
+                }
+            },
+            "edit": {
+                "title": "Modifier le client",
+                "back": "Retour au répertoire",
+                "loading": "Chargement du client…",
+                "notFound": "Client introuvable.",
+                "emptyContacts": "Aucun contact enregistré.",
+                "emptyAddresses": "Aucune adresse enregistrée.",
+                "save": "Valider"
             },
             "validation": {
                 "informationRequiredForCommercial": "Les informations de l'entreprise sont obligatoires pour le rôle Commerciale.",

frontend/modules/commercial/components/ClientAddressBlock.vue

@@ -88,9 +88,11 @@
              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) ou libre en mode degrade. -->
+            <!-- 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"
+                v-if="!degraded && !readonly"
                 :model-value="model.street"
                 :options="addressOptions"
                 :loading="addressLoading"
@@ -197,8 +199,21 @@ const model = computed(() => props.modelValue)
 
 // Mode degrade : service BAN indisponible → Ville/Adresse en saisie libre.
 const degraded = ref(false)
-const cityOptions = ref<RefOption[]>([])
+// 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[] = []
@@ -248,7 +263,7 @@ async function onPostalCodeChange(value: string): Promise<void> {
     }
     try {
         const suggestions = await autocomplete.searchCity(digits)
-        cityOptions.value = suggestions.map(s => ({ value: s.city, label: s.city }))
+        banCityOptions.value = suggestions.map(s => ({ value: s.city, label: s.city }))
     }
     catch {
         enterDegraded()

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+// `useApi` est un auto-import Nuxt : on le stubbe globalement pour intercepter
+// les appels de chargement des referentiels et simuler un endpoint en echec
+// (ex: 403 sur /categories pour un role sans la permission de lecture).
+// Meme pattern que useClientsRepository.spec.ts.
+const mockGet = vi.hoisted(() => vi.fn())
+vi.stubGlobal('useApi', () => ({
+    get: mockGet,
+    post: vi.fn(),
+    put: vi.fn(),
+    patch: vi.fn(),
+    delete: vi.fn(),
+}))
+
+// Import APRES le stub pour que useApi soit bien resolu au top-level du module.
+const { useClientReferentials } = await import('../useClientReferentials')
+
+describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+    })
+
+    it('un referentiel en echec (403) ne vide QUE son select, pas les autres', async () => {
+        // /categories rejette (simulateur d'un 403), tous les autres repondent.
+        mockGet.mockImplementation((url: string) => {
+            if (url === '/categories') {
+                return Promise.reject(new Error('403 Forbidden'))
+            }
+            if (url === '/sites') {
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault' }] })
+            }
+            return Promise.resolve({
+                member: [{ '@id': '/api/x/1', code: 'X', label: 'Libelle X' }],
+            })
+        })
+
+        const refs = useClientReferentials()
+        // loadCommon ne doit JAMAIS rejeter : l'echec d'un referentiel est isole.
+        await refs.loadCommon()
+
+        // Resilience : les referentiels OK sont peuples malgre l'echec de /categories.
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: 'Chatellerault' }])
+        expect(refs.tvaModes.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
+        expect(refs.banks.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
+
+        // Seul le select en echec reste vide.
+        expect(refs.categories.value).toEqual([])
+    })
+
+    it('charge tous les referentiels quand tout repond', async () => {
+        mockGet.mockImplementation((url: string) => {
+            if (url === '/categories') {
+                return Promise.resolve({
+                    member: [{ '@id': '/api/categories/1', code: 'SECTEUR', name: 'Secteur' }],
+                })
+            }
+            if (url === '/sites') {
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault' }] })
+            }
+            return Promise.resolve({ member: [] })
+        })
+
+        const refs = useClientReferentials()
+        await refs.loadCommon()
+
+        expect(refs.categories.value).toEqual([
+            { value: '/api/categories/1', label: 'Secteur', code: 'SECTEUR' },
+        ])
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: 'Chatellerault' }])
+    })
+})

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

@@ -85,26 +85,32 @@ export function useClientReferentials() {
 
     /**
      * 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.
+     * charges a la demande selon la relation choisie).
+     *
+     * Chargement RESILIENT (Promise.allSettled) : chaque referentiel est isole.
+     * Necessaire pour les roles metier qui n'ont pas toutes les permissions de
+     * lecture — ex. Compta a `commercial.clients.view` (donc /tva_modes, /banks...
+     * accessibles) mais PAS `catalog.categories.view` ni `sites.view` : sans
+     * isolation, le 403 sur /categories ferait echouer tout le bloc et viderait
+     * les selects comptables dont Compta a besoin sur l'ecran de modification.
+     * Un referentiel en echec reste simplement vide (l'ecran d'edition complete
+     * l'affichage des valeurs courantes depuis l'embed du detail client).
      */
     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'),
+        await Promise.allSettled([
+            fetchAll<CategoryMember>('/categories')
+                .then((cats) => { categories.value = cats.map(c => ({ value: c['@id'], label: c.name, code: c.code })) }),
+            fetchAll<SiteMember>('/sites')
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: s.name })) }),
+            fetchAll<ReferentialMember>('/tva_modes')
+                .then((tva) => { tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label })) }),
+            fetchAll<ReferentialMember>('/payment_delays')
+                .then((delays) => { paymentDelays.value = delays.map(d => ({ value: d['@id'], label: d.label })) }),
+            fetchAll<ReferentialMember>('/payment_types')
+                .then((types) => { paymentTypes.value = types.map(t => ({ value: t['@id'], label: t.label, code: t.code })) }),
+            fetchAll<ReferentialMember>('/banks')
+                .then((banksList) => { banks.value = banksList.map(b => ({ value: b['@id'], label: b.label })) }),
         ])
-
-        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). */

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

@@ -0,0 +1,909 @@
+<template>
+    <div>
+        <!-- En-tete : retour repertoire + nom du client. -->
+        <div class="flex items-center gap-3">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.clients.edit.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[32px] font-bold text-m-primary">{{ headerTitle }}</h1>
+        </div>
+
+        <!-- Etats de chargement / introuvable. -->
+        <p v-if="loading" class="mt-12 text-center text-black/60">{{ t('commercial.clients.edit.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('commercial.clients.edit.notFound') }}</p>
+
+        <template v-else-if="client">
+            <!-- ── Bloc principal (pre-rempli, editable si `manage`) ──────────────
+                 Decision Tristan : on conserve le bloc principal en modification
+                 (« pour ne pas tout casser »), edite via son propre PATCH scope
+                 sur le groupe client:write:main. Readonly pour les roles sans
+                 `manage` (ex. Compta). -->
+            <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="businessReadonly"
+                />
+                <MalioInputText
+                    v-model="main.lastName"
+                    :label="t('commercial.clients.form.main.lastName')"
+                    :readonly="businessReadonly"
+                />
+                <MalioInputText
+                    v-model="main.firstName"
+                    :label="t('commercial.clients.form.main.firstName')"
+                    :readonly="businessReadonly"
+                />
+                <MalioSelectCheckbox
+                    :model-value="main.categoryIris"
+                    :options="mainCategoryOptions"
+                    :label="t('commercial.clients.form.main.categories')"
+                    :display-tag="true"
+                    :disabled="businessReadonly"
+                    @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
+                />
+                <MalioInputPhone
+                    v-model="main.phonePrimary"
+                    :label="t('commercial.clients.form.main.phonePrimary')"
+                    :mask="PHONE_MASK"
+                    :required="true"
+                    :readonly="businessReadonly"
+                    add-icon-name="mdi:plus"
+                    :addable="!main.hasSecondaryPhone && !businessReadonly"
+                    :add-button-label="t('commercial.clients.form.main.addPhone')"
+                    @add="main.hasSecondaryPhone = true"
+                />
+                <MalioInputPhone
+                    v-if="main.hasSecondaryPhone"
+                    v-model="main.phoneSecondary"
+                    :label="t('commercial.clients.form.main.phoneSecondary')"
+                    :mask="PHONE_MASK"
+                    :readonly="businessReadonly"
+                />
+                <MalioInputEmail
+                    v-model="main.email"
+                    :label="t('commercial.clients.form.main.email')"
+                    :required="true"
+                    :readonly="businessReadonly"
+                />
+                <MalioSelect
+                    :model-value="main.relationType"
+                    :options="relationOptions"
+                    :label="t('commercial.clients.form.main.relation')"
+                    :disabled="businessReadonly"
+                    @update:model-value="onRelationChange"
+                />
+                <MalioSelect
+                    v-if="main.relationType === 'courtier'"
+                    :model-value="main.brokerIri"
+                    :options="brokerOptions"
+                    :label="t('commercial.clients.form.main.brokerName')"
+                    :disabled="businessReadonly"
+                    @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="distributorOptions"
+                    :label="t('commercial.clients.form.main.distributorName')"
+                    :disabled="businessReadonly"
+                    @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="businessReadonly"
+                />
+            </div>
+
+            <div v-if="!businessReadonly" class="mt-12 flex justify-center">
+                <MalioButton
+                    variant="primary"
+                    :label="t('commercial.clients.edit.save')"
+                    :disabled="!isMainValid || mainSubmitting"
+                    @click="submitMain"
+                />
+            </div>
+
+            <!-- ── Onglets : navigation LIBRE, edition independante par onglet ──── -->
+            <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
+                            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="businessReadonly"
+                        />
+                        <MalioInputText
+                            v-model="information.competitors"
+                            :label="t('commercial.clients.form.information.competitors')"
+                            :readonly="businessReadonly"
+                        />
+                        <MalioDate
+                            v-model="information.foundedAt"
+                            :label="t('commercial.clients.form.information.foundedAt')"
+                            :readonly="businessReadonly"
+                        />
+                        <MalioInputText
+                            v-model="information.employeesCount"
+                            :label="t('commercial.clients.form.information.employeesCount')"
+                            :mask="EMPLOYEES_MASK"
+                            :readonly="businessReadonly"
+                        />
+                        <MalioInputAmount
+                            v-model="information.revenueAmount"
+                            :label="t('commercial.clients.form.information.revenueAmount')"
+                            :disabled="businessReadonly"
+                        />
+                        <MalioInputText
+                            v-model="information.directorName"
+                            :label="t('commercial.clients.form.information.directorName')"
+                            :readonly="businessReadonly"
+                        />
+                        <MalioInputAmount
+                            v-model="information.profitAmount"
+                            :label="t('commercial.clients.form.information.profitAmount')"
+                            :disabled="businessReadonly"
+                        />
+                    </div>
+                    <div v-if="!businessReadonly" class="mt-12 flex justify-center">
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.edit.save')"
+                            :disabled="tabSubmitting"
+                            @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="contact.id ?? `new-${index}`"
+                            :model-value="contact"
+                            :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
+                            :removable="contacts.length > 1"
+                            :readonly="businessReadonly"
+                            @update:model-value="(v) => contacts[index] = v"
+                            @remove="askRemoveContact(index)"
+                        />
+                        <p v-if="contacts.length === 0" class="text-center text-black/60">
+                            {{ t('commercial.clients.edit.emptyContacts') }}
+                        </p>
+                        <div v-if="!businessReadonly" class="flex justify-center gap-6">
+                            <MalioButton
+                                variant="secondary"
+                                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.edit.save')"
+                                :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="address.id ?? `new-${index}`"
+                            :model-value="address"
+                            :title="t('commercial.clients.form.address.title', { n: index + 1 })"
+                            :category-options="addressCategoryOptions"
+                            :site-options="siteOptions"
+                            :contact-options="contactOptions"
+                            :country-options="countryOptions"
+                            :removable="addresses.length > 1"
+                            :readonly="businessReadonly"
+                            @update:model-value="(v) => addresses[index] = v"
+                            @remove="askRemoveAddress(index)"
+                            @degraded="onAddressDegraded"
+                        />
+                        <p v-if="addresses.length === 0" class="text-center text-black/60">
+                            {{ t('commercial.clients.edit.emptyAddresses') }}
+                        </p>
+                        <div v-if="!businessReadonly" class="flex justify-center gap-6">
+                            <MalioButton
+                                variant="secondary"
+                                icon-name="mdi:add-bold"
+                                icon-position="left"
+                                :label="t('commercial.clients.form.address.add')"
+                                @click="addAddress"
+                            />
+                            <MalioButton
+                                variant="primary"
+                                :label="t('commercial.clients.edit.save')"
+                                :disabled="!canValidateAddresses || tabSubmitting"
+                                @click="submitAddresses"
+                            />
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Onglet Comptabilite (present uniquement si accounting.view ;
+                     editable uniquement si accounting.manage). -->
+                <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="tvaModeOptions"
+                                    :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="paymentDelayOptions"
+                                    :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="paymentTypeOptions"
+                                    :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="bankOptions"
+                                    :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 (RG-1.13). -->
+                        <div
+                            v-for="(rib, index) in ribs"
+                            :key="rib.id ?? `new-${index}`"
+                            class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                        >
+                            <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.edit.save')"
+                                :disabled="!canValidateAccounting || tabSubmitting"
+                                @click="submitAccounting"
+                            />
+                        </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 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 } from 'vue'
+import { useClient } from '~/modules/commercial/composables/useClient'
+import { useClientReferentials, type CategoryOption, type RefOption } from '~/modules/commercial/composables/useClientReferentials'
+import {
+    canEditClient,
+    categoryOptionsOf,
+    referentialOptionOf,
+    siteOptionsOf,
+    mapContactToDraft,
+    mapAddressToDraft,
+    mapRibToDraft,
+    type ClientDetail,
+} from '~/modules/commercial/utils/clientConsultation'
+import {
+    buildAccountingPayload,
+    buildAddressPayload,
+    buildContactPayload,
+    buildInformationPayload,
+    buildMainPayload,
+    buildRibPayload,
+    mapAccountingFormDraft,
+    mapInformationDraft,
+    mapMainDraft,
+    resolveTabEditability,
+    type AccountingFormDraft,
+    type ClientEditAbilities,
+    type InformationFormDraft,
+    type MainFormDraft,
+} from '~/modules/commercial/utils/clientEdit'
+import {
+    buildClientFormTabKeys,
+    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 { extractApiErrorMessage } from '~/shared/utils/api'
+
+// Masques de saisie (la normalisation finale reste serveur).
+const PHONE_MASK = '## ## ## ## ##'
+const SIREN_MASK = '#########'
+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 route = useRoute()
+const router = useRouter()
+const { can, canAny } = usePermissions()
+
+// Gating de la route : l'edition exige de pouvoir editer au moins un onglet
+// (`manage` OU `accounting.manage`). Usine et roles en lecture seule sont
+// rediriges vers le repertoire (lui-meme protege).
+if (!canEditClient(canAny)) {
+    await navigateTo('/clients')
+}
+
+const clientId = route.params.id as string
+
+const { client, loading, error, load } = useClient(clientId)
+const referentials = useClientReferentials()
+
+// ── Permissions / editabilite par zone (option 1 ERP-74) ────────────────────
+const abilities = computed<ClientEditAbilities>(() => ({
+    canManage: can('commercial.clients.manage'),
+    canAccountingView: can('commercial.clients.accounting.view'),
+    canAccountingManage: can('commercial.clients.accounting.manage'),
+}))
+const editability = computed(() => resolveTabEditability(abilities.value))
+// Bloc principal + onglets Information / Contact / Adresse.
+const businessReadonly = computed(() => !editability.value.businessEditable)
+const canAccountingView = computed(() => editability.value.accountingVisible)
+const accountingReadonly = computed(() => !editability.value.accountingEditable)
+
+const headerTitle = computed(() => client.value?.companyName ?? t('commercial.clients.edit.title'))
+
+// ── Brouillons editables (pre-remplis depuis le detail) ─────────────────────
+const main = reactive<MainFormDraft>(mapMainDraft({} as ClientDetail))
+const information = reactive<InformationFormDraft>(mapInformationDraft({} as ClientDetail))
+const accounting = reactive<AccountingFormDraft>(mapAccountingFormDraft({} as ClientDetail))
+const contacts = ref<ContactFormDraft[]>([])
+const addresses = ref<AddressFormDraft[]>([])
+const ribs = ref<RibFormDraft[]>([])
+
+// Ids des sous-ressources existantes supprimees (DELETE differe au « Valider »).
+const removedContactIds = ref<number[]>([])
+const removedAddressIds = ref<number[]>([])
+const removedRibIds = ref<number[]>([])
+
+const mainSubmitting = ref(false)
+const tabSubmitting = ref(false)
+const addressDegradedNotified = ref(false)
+
+/** Recopie le detail charge dans les brouillons editables. */
+function hydrate(detail: ClientDetail): void {
+    Object.assign(main, mapMainDraft(detail))
+    Object.assign(information, mapInformationDraft(detail))
+    Object.assign(accounting, mapAccountingFormDraft(detail))
+    contacts.value = (detail.contacts ?? []).map(mapContactToDraft)
+    addresses.value = (detail.addresses ?? []).map(mapAddressToDraft)
+    ribs.value = (detail.ribs ?? []).map(mapRibToDraft)
+    // Charge les listes distributeur / courtier si une relation est deja posee.
+    if (main.relationType === 'distributeur') referentials.loadDistributors().catch(() => {})
+    if (main.relationType === 'courtier') referentials.loadBrokers().catch(() => {})
+}
+
+// ── Options de selects (referentiels UNION valeurs courantes de l'embed) ─────
+// L'union garantit que les valeurs deja posees s'affichent meme quand le
+// referentiel complet n'est pas chargeable (roles metier sans
+// catalog.categories.view / sites.view → 403, cf. matrice § 2.7).
+function mergeOptions<T extends { value: string }>(primary: T[], extra: T[]): T[] {
+    const seen = new Set(primary.map(o => o.value))
+    return [...primary, ...extra.filter(o => !seen.has(o.value))]
+}
+
+const embedCategoryOptions = computed<CategoryOption[]>(() => {
+    const fromClient = categoryOptionsOf(client.value?.categories)
+    const fromAddresses = (client.value?.addresses ?? []).flatMap(a => categoryOptionsOf(a.categories))
+    return mergeOptions(fromClient, fromAddresses)
+})
+const mainCategoryOptions = computed(() => mergeOptions(referentials.categories.value, embedCategoryOptions.value))
+// Categories autorisees sur une adresse : toutes SAUF DISTRIBUTEUR/COURTIER (RG-1.29).
+const addressCategoryOptions = computed(() =>
+    mainCategoryOptions.value.filter(c => !FORBIDDEN_ADDRESS_CATEGORY_CODES.includes(c.code)),
+)
+
+const embedSiteOptions = computed<RefOption[]>(() =>
+    mergeOptions([], (client.value?.addresses ?? []).flatMap(a => siteOptionsOf(a.sites))),
+)
+const siteOptions = computed(() => mergeOptions(referentials.sites.value, embedSiteOptions.value))
+
+// Contacts deja persistes (iri non null), rattachables a une adresse (M2M).
+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 ?? ''),
+        })),
+)
+
+const countryOptions: RefOption[] = [
+    { value: 'France', label: 'France' },
+    { value: 'Espagne', label: 'Espagne' },
+]
+
+const relationOptions = computed<RefOption[]>(() => [
+    { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
+    { value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },
+])
+
+// Distributeur / courtier : referentiel charge a la demande UNION valeur courante.
+const currentDistributorOption = computed<RefOption[]>(() => {
+    const d = client.value?.distributor
+    return d && typeof d === 'object' ? [{ value: d['@id'], label: d.companyName ?? d['@id'] }] : []
+})
+const currentBrokerOption = computed<RefOption[]>(() => {
+    const b = client.value?.broker
+    return b && typeof b === 'object' ? [{ value: b['@id'], label: b.companyName ?? b['@id'] }] : []
+})
+const distributorOptions = computed(() => mergeOptions(referentials.distributors.value, currentDistributorOption.value))
+const brokerOptions = computed(() => mergeOptions(referentials.brokers.value, currentBrokerOption.value))
+
+// Selects comptables : referentiel UNION valeur courante de l'embed (libelle).
+const tvaModeOptions = computed(() => mergeOptions(referentials.tvaModes.value, referentialOptionOf(client.value?.tvaMode)))
+const paymentDelayOptions = computed(() => mergeOptions(referentials.paymentDelays.value, referentialOptionOf(client.value?.paymentDelay)))
+const paymentTypeOptions = computed(() => mergeOptions(
+    referentials.paymentTypes.value.map(p => ({ value: p.value, label: p.label })),
+    referentialOptionOf(client.value?.paymentType),
+))
+const bankOptions = computed(() => mergeOptions(referentials.banks.value, referentialOptionOf(client.value?.bank)))
+
+// ── Onglets : navigation libre (4 actifs + 4 coquilles, comme la consultation) ─
+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/${clientId}`)
+}
+
+/**
+ * Message d'erreur a afficher : violation 422 / detail renvoye par le serveur,
+ * sinon un libelle generique. Le 409 d'unicite de nom (bloc principal) est
+ * traduit explicitement par l'appelant.
+ */
+function apiErrorMessage(e: unknown): string {
+    const data = (e as { data?: unknown })?.data
+    return extractApiErrorMessage(data) || t('commercial.clients.toast.error')
+}
+
+function showError(e: unknown, opts: { duplicateCompany?: boolean } = {}): void {
+    const status = (e as { response?: { status?: number } })?.response?.status
+    toast.error({
+        title: t('commercial.clients.toast.error'),
+        message: opts.duplicateCompany && status === 409
+            ? t('commercial.clients.form.duplicateCompany')
+            : apiErrorMessage(e),
+    })
+}
+
+// ── Bloc principal ───────────────────────────────────────────────────────────
+const isMainValid = computed(() => {
+    const filled = (v: string | null | undefined) => v !== null && v !== undefined && v.trim() !== ''
+    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(main.phonePrimary)
+        && (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
+    // Une seule FK 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().catch(() => {})
+    if (relation === 'courtier') await referentials.loadBrokers().catch(() => {})
+}
+
+/** PATCH /clients/{id} — groupe client:write:main UNIQUEMENT (mode strict). */
+async function submitMain(): Promise<void> {
+    if (businessReadonly.value || !isMainValid.value || mainSubmitting.value) return
+    mainSubmitting.value = true
+    try {
+        const updated = await api.patch<ClientDetail>(`/clients/${clientId}`, buildMainPayload(main), {
+            headers: { Accept: 'application/ld+json' },
+            toast: false,
+        })
+        // Reaffiche les valeurs normalisees renvoyees par le serveur.
+        Object.assign(main, mapMainDraft(updated))
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e, { duplicateCompany: true })
+    }
+    finally {
+        mainSubmitting.value = false
+    }
+}
+
+// ── Onglet Information ───────────────────────────────────────────────────────
+/** PATCH /clients/{id} — groupe client:write:information UNIQUEMENT. */
+async function submitInformation(): Promise<void> {
+    if (businessReadonly.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        await api.patch(`/clients/${clientId}`, buildInformationPayload(information), { toast: false })
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Contact ───────────────────────────────────────────────────────────
+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'), () => {
+        const removed = contacts.value[index]
+        if (removed?.id != null) removedContactIds.value.push(removed.id)
+        contacts.value.splice(index, 1)
+    })
+}
+
+/**
+ * Valide l'onglet Contact : DELETE des contacts retires (existants), puis
+ * POST/PATCH des blocs restants sur la sous-ressource. Strictement scope a la
+ * collection contacts (endpoints client_contact dedies).
+ */
+async function submitContacts(): Promise<void> {
+    if (businessReadonly.value || !canValidateContacts.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        for (const id of removedContactIds.value) {
+            await api.delete(`/client_contacts/${id}`, {}, { toast: false })
+        }
+        removedContactIds.value = []
+
+        for (const contact of contacts.value) {
+            if (!isContactNamed(contact)) continue
+            const body = buildContactPayload(contact)
+            if (contact.id === null) {
+                const created = await api.post<{ '@id'?: string, id: number }>(
+                    `/clients/${clientId}/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 })
+            }
+        }
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet 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'), () => {
+        const removed = addresses.value[index]
+        if (removed?.id != null) removedAddressIds.value.push(removed.id)
+        addresses.value.splice(index, 1)
+    })
+}
+
+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'),
+    })
+}
+
+/** Valide l'onglet Adresse : DELETE des adresses retirees puis POST/PATCH. */
+async function submitAddresses(): Promise<void> {
+    if (businessReadonly.value || !canValidateAddresses.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        for (const id of removedAddressIds.value) {
+            await api.delete(`/client_addresses/${id}`, {}, { toast: false })
+        }
+        removedAddressIds.value = []
+
+        for (const address of addresses.value) {
+            const body = buildAddressPayload(address, isBillingEmailRequired(address))
+            if (address.id === null) {
+                const created = await api.post<{ id: number }>(
+                    `/clients/${clientId}/addresses`,
+                    body,
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                address.id = created.id
+            }
+            else {
+                await api.patch(`/client_addresses/${address.id}`, body, { toast: false })
+            }
+        }
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Comptabilite ──────────────────────────────────────────────────────
+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)
+    if (!isBankRequired.value) accounting.bankIri = null
+}
+
+function ribIsComplete(rib: { label: string | null, bic: string | null, iban: string | null }): boolean {
+    const filled = (v: string | null) => v !== null && v.trim() !== ''
+    return filled(rib.label) && filled(rib.bic) && filled(rib.iban)
+}
+
+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'), () => {
+        const removed = ribs.value[index]
+        if (removed?.id != null) removedRibIds.value.push(removed.id)
+        ribs.value.splice(index, 1)
+    })
+}
+
+/**
+ * Valide l'onglet Comptabilite : PATCH des scalaires (groupe client:write:accounting,
+ * exige accounting.manage cote back) PUIS DELETE/POST/PATCH des RIB sur la
+ * sous-ressource. Aucun champ main/information dans le payload (mode strict
+ * RG-1.28 : sinon 403 sur tout le payload).
+ */
+async function submitAccounting(): Promise<void> {
+    if (accountingReadonly.value || !canValidateAccounting.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        await api.patch(`/clients/${clientId}`, buildAccountingPayload(accounting, isBankRequired.value), { toast: false })
+
+        for (const id of removedRibIds.value) {
+            await api.delete(`/client_ribs/${id}`, {}, { toast: false })
+        }
+        removedRibIds.value = []
+
+        for (const rib of ribs.value) {
+            if (!ribIsComplete(rib)) continue
+            const body = buildRibPayload(rib)
+            if (rib.id === null) {
+                const created = await api.post<{ id: number }>(
+                    `/clients/${clientId}/ribs`,
+                    body,
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                rib.id = created.id
+            }
+            else {
+                await api.patch(`/client_ribs/${rib.id}`, body, { toast: false })
+            }
+        }
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    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
+}
+
+useHead({ title: headerTitle })
+
+onMounted(async () => {
+    // Referentiels en best-effort (echec non bloquant : l'embed alimente les
+    // libelles des valeurs courantes).
+    referentials.loadCommon().catch(() => {})
+    await load()
+    if (client.value) hydrate(client.value)
+})
+</script>

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/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__/clientEdit.spec.ts

@@ -0,0 +1,255 @@
+import { describe, expect, it } from 'vitest'
+import {
+    buildAccountingPayload,
+    buildAddressPayload,
+    buildContactPayload,
+    buildInformationPayload,
+    buildMainPayload,
+    buildRibPayload,
+    mapAccountingFormDraft,
+    mapInformationDraft,
+    mapMainDraft,
+    resolveTabEditability,
+    type AccountingFormDraft,
+    type InformationFormDraft,
+    type MainFormDraft,
+} from '../clientEdit'
+import type { ClientDetail } from '../clientConsultation'
+import type { AddressFormDraft, ContactFormDraft, RibFormDraft } from '~/modules/commercial/types/clientForm'
+
+// ── Fabriques de brouillons (valeurs distinctes pour reperer les fuites) ─────
+
+function mainDraft(overrides: Partial<MainFormDraft> = {}): MainFormDraft {
+    return {
+        companyName: 'ACME',
+        firstName: 'Jean',
+        lastName: 'Dupont',
+        email: 'jean@acme.fr',
+        phonePrimary: '05 49 11 22 33',
+        phoneSecondary: null,
+        hasSecondaryPhone: false,
+        categoryIris: ['/api/categories/1'],
+        relationType: null,
+        distributorIri: null,
+        brokerIri: null,
+        triageService: false,
+        ...overrides,
+    }
+}
+
+function informationDraft(overrides: Partial<InformationFormDraft> = {}): InformationFormDraft {
+    return {
+        description: 'desc',
+        competitors: 'concurrents',
+        foundedAt: '2010-05-01',
+        employeesCount: '42',
+        revenueAmount: '1000000',
+        profitAmount: '50000',
+        directorName: 'PDG',
+        ...overrides,
+    }
+}
+
+function accountingDraft(overrides: Partial<AccountingFormDraft> = {}): AccountingFormDraft {
+    return {
+        siren: '123456789',
+        accountNumber: 'C-001',
+        nTva: 'FR123',
+        tvaModeIri: '/api/tva_modes/1',
+        paymentDelayIri: '/api/payment_delays/1',
+        paymentTypeIri: '/api/payment_types/1',
+        bankIri: '/api/banks/1',
+        ...overrides,
+    }
+}
+
+// Champs de chaque groupe de serialisation (miroir back ClientProcessor).
+const MAIN_KEYS = [
+    'companyName', 'firstName', 'lastName', 'email', 'phonePrimary',
+    'phoneSecondary', 'categories', 'distributor', 'broker', 'triageService',
+]
+const INFORMATION_KEYS = [
+    'description', 'competitors', 'foundedAt', 'employeesCount',
+    'revenueAmount', 'profitAmount', 'directorName',
+]
+const ACCOUNTING_KEYS = ['siren', 'accountNumber', 'tvaMode', 'nTva', 'paymentDelay', 'paymentType', 'bank']
+
+describe('buildMainPayload — scoping strict groupe client:write:main', () => {
+    it('n\'expose QUE les champs du groupe main (aucune fuite information/accounting)', () => {
+        expect(Object.keys(buildMainPayload(mainDraft())).sort()).toEqual([...MAIN_KEYS].sort())
+    })
+
+    it('relation distributeur : renseigne distributor, force broker a null (RG-1.03)', () => {
+        const payload = buildMainPayload(mainDraft({
+            relationType: 'distributeur',
+            distributorIri: '/api/clients/9',
+            brokerIri: '/api/clients/7',
+        }))
+        expect(payload.distributor).toBe('/api/clients/9')
+        expect(payload.broker).toBeNull()
+    })
+
+    it('relation courtier : renseigne broker, force distributor a null (RG-1.03)', () => {
+        const payload = buildMainPayload(mainDraft({
+            relationType: 'courtier',
+            distributorIri: '/api/clients/9',
+            brokerIri: '/api/clients/7',
+        }))
+        expect(payload.broker).toBe('/api/clients/7')
+        expect(payload.distributor).toBeNull()
+    })
+
+    it('sans relation : distributor et broker a null', () => {
+        const payload = buildMainPayload(mainDraft({ relationType: null }))
+        expect(payload.distributor).toBeNull()
+        expect(payload.broker).toBeNull()
+    })
+
+    it('telephone secondaire non revele : envoie null meme si une valeur traine', () => {
+        const payload = buildMainPayload(mainDraft({ hasSecondaryPhone: false, phoneSecondary: '06 00 00 00 00' }))
+        expect(payload.phoneSecondary).toBeNull()
+    })
+})
+
+describe('buildInformationPayload — scoping strict groupe client:write:information', () => {
+    it('n\'expose QUE les champs du groupe information (aucune fuite main/accounting)', () => {
+        expect(Object.keys(buildInformationPayload(informationDraft())).sort()).toEqual([...INFORMATION_KEYS].sort())
+    })
+
+    it('convertit employeesCount en nombre et vide -> null', () => {
+        expect(buildInformationPayload(informationDraft({ employeesCount: '42' })).employeesCount).toBe(42)
+        expect(buildInformationPayload(informationDraft({ employeesCount: null })).employeesCount).toBeNull()
+        expect(buildInformationPayload(informationDraft({ employeesCount: '' })).employeesCount).toBeNull()
+    })
+
+    it('chaines vides normalisees en null', () => {
+        const payload = buildInformationPayload(informationDraft({ description: '', directorName: '' }))
+        expect(payload.description).toBeNull()
+        expect(payload.directorName).toBeNull()
+    })
+})
+
+describe('buildAccountingPayload — scoping strict groupe client:write:accounting', () => {
+    it('n\'expose QUE les champs du groupe accounting (aucune fuite main/information)', () => {
+        expect(Object.keys(buildAccountingPayload(accountingDraft(), true)).sort()).toEqual([...ACCOUNTING_KEYS].sort())
+    })
+
+    it('banque conservee si requise (Virement), forcee a null sinon (RG-1.12)', () => {
+        expect(buildAccountingPayload(accountingDraft(), true).bank).toBe('/api/banks/1')
+        expect(buildAccountingPayload(accountingDraft(), false).bank).toBeNull()
+    })
+})
+
+describe('buildContactPayload / buildAddressPayload / buildRibPayload', () => {
+    it('contact : telephone secondaire ignore si non revele', () => {
+        const contact: ContactFormDraft = {
+            id: 5, iri: '/api/client_contacts/5', firstName: 'A', lastName: 'B',
+            jobTitle: null, phonePrimary: '0549112233', phoneSecondary: '0600000000',
+            email: null, hasSecondaryPhone: false,
+        }
+        expect(buildContactPayload(contact).phoneSecondary).toBeNull()
+    })
+
+    it('adresse : email facturation conserve uniquement si requis (RG-1.11)', () => {
+        const address: AddressFormDraft = {
+            id: 3, isProspect: false, isDelivery: false, isBilling: true, country: 'France',
+            postalCode: '86100', city: 'Châtellerault', street: '1 rue X', streetComplement: null,
+            categoryIris: ['/api/categories/2'], siteIris: ['/api/sites/1'], contactIris: [],
+            billingEmail: 'facturation@acme.fr',
+        }
+        expect(buildAddressPayload(address, true).billingEmail).toBe('facturation@acme.fr')
+        expect(buildAddressPayload(address, false).billingEmail).toBeNull()
+    })
+
+    it('rib : label / bic / iban transmis tels quels', () => {
+        const rib: RibFormDraft = { id: 1, label: 'Compte principal', bic: 'BNPAFRPP', iban: 'FR76...' }
+        expect(buildRibPayload(rib)).toEqual({ label: 'Compte principal', bic: 'BNPAFRPP', iban: 'FR76...' })
+    })
+})
+
+describe('mapMainDraft — pre-remplissage bloc principal', () => {
+    it('formate les telephones, resout la relation et extrait les IRI', () => {
+        const client = {
+            '@id': '/api/clients/1', id: 1,
+            companyName: 'ACME', firstName: 'Jean', lastName: 'Dupont', email: 'jean@acme.fr',
+            phonePrimary: '0549112233', phoneSecondary: '0600000000', triageService: true,
+            categories: [{ '@id': '/api/categories/1', code: 'SECTEUR' }],
+            distributor: { '@id': '/api/clients/9', companyName: 'DISTRIB' },
+        } as ClientDetail
+
+        const draft = mapMainDraft(client)
+        expect(draft.phonePrimary).toBe('05 49 11 22 33')
+        expect(draft.phoneSecondary).toBe('06 00 00 00 00')
+        expect(draft.hasSecondaryPhone).toBe(true)
+        expect(draft.categoryIris).toEqual(['/api/categories/1'])
+        expect(draft.relationType).toBe('distributeur')
+        expect(draft.distributorIri).toBe('/api/clients/9')
+        expect(draft.brokerIri).toBeNull()
+        expect(draft.triageService).toBe(true)
+    })
+
+    it('gere les cles omises (skip_null_values) sans planter', () => {
+        const draft = mapMainDraft({ '@id': '/api/clients/2', id: 2 } as ClientDetail)
+        expect(draft.companyName).toBeNull()
+        expect(draft.hasSecondaryPhone).toBe(false)
+        expect(draft.categoryIris).toEqual([])
+        expect(draft.relationType).toBeNull()
+        expect(draft.triageService).toBe(false)
+    })
+})
+
+describe('mapInformationDraft — pre-remplissage onglet Information', () => {
+    it('tronque foundedAt en YYYY-MM-DD et stringifie employeesCount', () => {
+        const draft = mapInformationDraft({
+            '@id': '/api/clients/1', id: 1,
+            foundedAt: '2010-05-01T00:00:00+00:00', employeesCount: 42, revenueAmount: '1000000',
+        } as ClientDetail)
+        expect(draft.foundedAt).toBe('2010-05-01')
+        expect(draft.employeesCount).toBe('42')
+        expect(draft.revenueAmount).toBe('1000000')
+    })
+
+    it('cles omises -> null', () => {
+        const draft = mapInformationDraft({ '@id': '/api/clients/1', id: 1 } as ClientDetail)
+        expect(draft.foundedAt).toBeNull()
+        expect(draft.employeesCount).toBeNull()
+        expect(draft.description).toBeNull()
+    })
+})
+
+describe('mapAccountingFormDraft — pre-remplissage onglet Comptabilite', () => {
+    it('extrait les scalaires et les IRI des referentiels embarques', () => {
+        const draft = mapAccountingFormDraft({
+            '@id': '/api/clients/1', id: 1,
+            siren: '123456789', accountNumber: 'C-001', nTva: 'FR123',
+            tvaMode: { '@id': '/api/tva_modes/2', label: 'Normal' },
+            paymentType: '/api/payment_types/3',
+        } as ClientDetail)
+        expect(draft.siren).toBe('123456789')
+        expect(draft.tvaModeIri).toBe('/api/tva_modes/2')
+        expect(draft.paymentTypeIri).toBe('/api/payment_types/3')
+        expect(draft.bankIri).toBeNull()
+    })
+})
+
+describe('resolveTabEditability — gating par role (matrice § 2.7)', () => {
+    it('Admin : tout editable', () => {
+        expect(resolveTabEditability({ canManage: true, canAccountingView: true, canAccountingManage: true }))
+            .toEqual({ businessEditable: true, accountingVisible: true, accountingEditable: true })
+    })
+
+    it('Bureau / Commerciale (manage seul) : metier editable, Comptabilite masquee', () => {
+        expect(resolveTabEditability({ canManage: true, canAccountingView: false, canAccountingManage: false }))
+            .toEqual({ businessEditable: true, accountingVisible: false, accountingEditable: false })
+    })
+
+    it('Compta (accounting seul) : metier readonly, Comptabilite editable', () => {
+        expect(resolveTabEditability({ canManage: false, canAccountingView: true, canAccountingManage: true }))
+            .toEqual({ businessEditable: false, accountingVisible: true, accountingEditable: true })
+    })
+
+    it('Sans permission d\'edition : rien d\'editable', () => {
+        expect(resolveTabEditability({ canManage: false, canAccountingView: false, canAccountingManage: false }))
+            .toEqual({ businessEditable: false, accountingVisible: false, accountingEditable: 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/clientEdit.ts

@@ -0,0 +1,266 @@
+/**
+ * Helpers purs de l'ecran « Modification client » (M1 Commercial, 1.12).
+ *
+ * Deux responsabilites, toutes deux testables unitairement (cf. clientEdit.spec.ts) :
+ *  1. Pre-remplissage : mapper le payload `GET /api/clients/{id}` (embed
+ *     contacts/adresses/ribs + scalaires) vers les brouillons « plats » edites
+ *     par la page et les blocs reutilisables (mappers contacts/adresses/ribs/
+ *     comptabilite reutilises depuis clientConsultation).
+ *  2. Scoping STRICT des payloads PATCH (mode strict RG-1.28 / ERP-74) : chaque
+ *     onglet n'envoie QUE les champs de SON groupe de serialisation, jamais un
+ *     payload mixte — un champ hors-permission = 403 sur l'integralite cote back.
+ *
+ * Ces helpers ne touchent ni a l'API ni a l'etat reactif.
+ *
+ * NOTE RG-1.04 (Information obligatoire pour la Commerciale) : volontairement NON
+ * miroitee cote front (cf. clientFormRules.ts) — /api/me n'expose pas le code de
+ * role et Bureau partage les permissions de Commerciale. Le back l'applique de
+ * maniere fiable (422) ; on laisse remonter ce 422 en toast.
+ */
+
+import {
+    iriOf,
+    relationOf,
+    type ClientDetail,
+} from '~/modules/commercial/utils/clientConsultation'
+import type { AddressFormDraft, ContactFormDraft, RibFormDraft } from '~/modules/commercial/types/clientForm'
+import { formatPhoneFR } from '~/shared/utils/phone'
+
+/**
+ * Etat « plat » du bloc principal (groupe client:write:main). Distinct des
+ * brouillons Contact : ces champs vivent sur le Client lui-meme (companyName,
+ * contact principal, telephones, email, categories, relation, triage), pas sur
+ * une sous-ressource ClientContact.
+ */
+export interface MainFormDraft {
+    companyName: string | null
+    firstName: string | null
+    lastName: string | null
+    email: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+    /** UI : le 2e numero a ete revele (ou existait deja au chargement). */
+    hasSecondaryPhone: boolean
+    /** IRI des categories rattachees (M2M). */
+    categoryIris: string[]
+    relationType: 'distributeur' | 'courtier' | null
+    distributorIri: string | null
+    brokerIri: string | null
+    triageService: boolean
+}
+
+/** Etat « plat » de l'onglet Information (groupe client:write:information). */
+export interface InformationFormDraft {
+    description: string | null
+    competitors: string | null
+    /** Date de creation de l'entreprise au format YYYY-MM-DD (MalioDate). */
+    foundedAt: string | null
+    /** Nombre de salaries en chaine (saisie masquee), converti en number au PATCH. */
+    employeesCount: string | null
+    revenueAmount: string | null
+    profitAmount: string | null
+    directorName: string | null
+}
+
+/** Etat « plat » de l'onglet Comptabilite (groupe client:write:accounting). */
+export interface AccountingFormDraft {
+    siren: string | null
+    accountNumber: string | null
+    nTva: string | null
+    tvaModeIri: string | null
+    paymentDelayIri: string | null
+    paymentTypeIri: string | null
+    bankIri: string | null
+}
+
+/** Permissions de l'utilisateur courant pertinentes pour l'edition d'un client. */
+export interface ClientEditAbilities {
+    /** `commercial.clients.manage` : bloc principal + onglets metier. */
+    canManage: boolean
+    /** `commercial.clients.accounting.view` : visibilite de l'onglet Comptabilite. */
+    canAccountingView: boolean
+    /** `commercial.clients.accounting.manage` : edition de l'onglet Comptabilite. */
+    canAccountingManage: boolean
+}
+
+/** Editabilite resolue par zone d'onglet (deduite des permissions). */
+export interface TabEditability {
+    /** Bloc principal + onglets Information / Contact / Adresse editables. */
+    businessEditable: boolean
+    /** Onglet Comptabilite present (affiche). */
+    accountingVisible: boolean
+    /** Onglet Comptabilite editable. */
+    accountingEditable: boolean
+}
+
+// ── Pre-remplissage (GET detail -> brouillons) ──────────────────────────────
+
+/**
+ * Mappe le detail client vers le brouillon du bloc principal. Les telephones
+ * sont reformates XX XX XX XX XX (RG d'affichage). La relation Distributeur/
+ * Courtier est resolue par exclusivite (RG-1.03) et son IRI extrait de l'embed.
+ */
+export function mapMainDraft(client: ClientDetail): MainFormDraft {
+    const relation = relationOf(client)
+    const phoneSecondary = client.phoneSecondary ?? null
+
+    return {
+        companyName: client.companyName ?? null,
+        firstName: client.firstName ?? null,
+        lastName: client.lastName ?? null,
+        email: client.email ?? null,
+        phonePrimary: client.phonePrimary ? formatPhoneFR(client.phonePrimary) : null,
+        phoneSecondary: phoneSecondary ? formatPhoneFR(phoneSecondary) : null,
+        hasSecondaryPhone: phoneSecondary !== null && phoneSecondary !== '',
+        categoryIris: (client.categories ?? []).map(c => c['@id']),
+        relationType: relation.type,
+        distributorIri: iriOf(client.distributor),
+        brokerIri: iriOf(client.broker),
+        triageService: client.triageService === true,
+    }
+}
+
+/** Mappe le detail client vers le brouillon de l'onglet Information. */
+export function mapInformationDraft(client: ClientDetail): InformationFormDraft {
+    return {
+        description: client.description ?? null,
+        competitors: client.competitors ?? null,
+        // MalioDate attend strictement YYYY-MM-DD : on tronque l'ISO datetime.
+        foundedAt: client.foundedAt ? client.foundedAt.slice(0, 10) : null,
+        employeesCount: client.employeesCount != null ? String(client.employeesCount) : null,
+        revenueAmount: client.revenueAmount ?? null,
+        profitAmount: client.profitAmount ?? null,
+        directorName: client.directorName ?? null,
+    }
+}
+
+/** Mappe les champs comptables du detail vers le brouillon de l'onglet (scalaires + IRI). */
+export function mapAccountingFormDraft(client: ClientDetail): AccountingFormDraft {
+    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),
+    }
+}
+
+// ── Scoping strict des payloads PATCH ────────────────────────────────────────
+
+/**
+ * Payload du bloc principal — groupe client:write:main UNIQUEMENT. La relation
+ * Distributeur/Courtier est mutuellement exclusive (RG-1.03) : on ne renseigne
+ * que la FK correspondant au type choisi, l'autre est forcee a null.
+ */
+export function buildMainPayload(main: MainFormDraft): Record<string, unknown> {
+    return {
+        companyName: main.companyName,
+        firstName: main.firstName || null,
+        lastName: main.lastName || null,
+        email: main.email,
+        phonePrimary: main.phonePrimary || null,
+        phoneSecondary: main.hasSecondaryPhone ? (main.phoneSecondary || null) : null,
+        categories: main.categoryIris,
+        distributor: main.relationType === 'distributeur' ? main.distributorIri : null,
+        broker: main.relationType === 'courtier' ? main.brokerIri : null,
+        triageService: main.triageService,
+    }
+}
+
+/** Payload de l'onglet Information — groupe client:write:information UNIQUEMENT. */
+export function buildInformationPayload(information: InformationFormDraft): Record<string, unknown> {
+    return {
+        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,
+    }
+}
+
+/**
+ * Payload des scalaires de l'onglet Comptabilite — groupe client:write:accounting
+ * UNIQUEMENT (les RIB passent par la sous-ressource /clients/{id}/ribs). La banque
+ * n'a de sens que pour un Virement (RG-1.12) : forcee a null sinon.
+ */
+export function buildAccountingPayload(
+    accounting: AccountingFormDraft,
+    isBankRequired: boolean,
+): Record<string, unknown> {
+    return {
+        siren: accounting.siren || null,
+        accountNumber: accounting.accountNumber || null,
+        tvaMode: accounting.tvaModeIri,
+        nTva: accounting.nTva || null,
+        paymentDelay: accounting.paymentDelayIri,
+        paymentType: accounting.paymentTypeIri,
+        bank: isBankRequired ? accounting.bankIri : null,
+    }
+}
+
+/** Payload d'un contact (sous-ressource client_contact). */
+export function buildContactPayload(contact: ContactFormDraft): Record<string, unknown> {
+    return {
+        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,
+    }
+}
+
+/** Payload d'une adresse (sous-ressource client_address). */
+export function buildAddressPayload(
+    address: AddressFormDraft,
+    isBillingEmailRequired: boolean,
+): Record<string, unknown> {
+    return {
+        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.billingEmail || null) : null,
+    }
+}
+
+/** Payload d'un RIB (sous-ressource client_rib). */
+export function buildRibPayload(rib: RibFormDraft): Record<string, unknown> {
+    return {
+        label: rib.label,
+        bic: rib.bic,
+        iban: rib.iban,
+    }
+}
+
+// ── Gating par permission ────────────────────────────────────────────────────
+
+/**
+ * Resout l'editabilite par zone a partir des permissions (option 1 ERP-74,
+ * miroir UI du re-gating champ-par-champ du ClientProcessor) :
+ *  - bloc principal + Information/Contact/Adresse : editables ssi `manage` ;
+ *  - Comptabilite : visible ssi `accounting.view`, editable ssi `accounting.manage`.
+ *
+ * Produit le comportement attendu :
+ *  - Admin : tout editable.
+ *  - Bureau / Commerciale (manage, sans accounting) : metier editable, Compta masquee.
+ *  - Compta (accounting seul, sans manage) : metier readonly, Compta editable.
+ */
+export function resolveTabEditability(abilities: ClientEditAbilities): TabEditability {
+    return {
+        businessEditable: abilities.canManage,
+        accountingVisible: abilities.canAccountingView,
+        accountingEditable: abilities.canAccountingManage,
+    }
+}

src/Module/Catalog/CatalogModule.php

@@ -38,6 +38,11 @@ final class CatalogModule
         return [
             ['code' => 'catalog.categories.view', 'label' => 'Voir les categories'],
             ['code' => 'catalog.categories.manage', 'label' => 'Gerer les categories (creer, editer, supprimer)'],
+            // Lecture-referentiel transverse (ERP-102) : permet de LISTER les categories
+            // pour alimenter les selects des modules Tiers (clients, fournisseurs...),
+            // sans donner l'acces d'administration `.view` (qui ouvre la page Catalogue
+            // dans la sidebar). Accordee aux roles metier via la matrice RBAC § 2.7.
+            ['code' => 'catalog.categories.read_ref', 'label' => 'Lire le referentiel categories (transverse, lecture seule)'],
         ];
     }
 }

src/Module/Catalog/Domain/Entity/Category.php

@@ -42,13 +42,19 @@ use Symfony\Component\Validator\Constraints as Assert;
  */
 #[ApiResource(
     operations: [
+        // Lecture (liste + item) : permission d'administration `view` OU permission
+        // de lecture-referentiel transverse `read_ref` (ERP-102). Les referentiels
+        // categories sont consommes par les modules Tiers (selects creation/filtre
+        // client) : tout role qui gere des tiers doit pouvoir les lire sans porter
+        // l'acces admin du Catalogue. `read_ref` est une permission Catalog (pas un
+        // code d'un autre module) -> isolement inter-module preserve.
         new GetCollection(
-            security: "is_granted('catalog.categories.view')",
+            security: "is_granted('catalog.categories.view') or is_granted('catalog.categories.read_ref')",
             normalizationContext: ['groups' => ['category:read', 'default:read']],
             provider: CategoryProvider::class,
         ),
         new Get(
-            security: "is_granted('catalog.categories.view')",
+            security: "is_granted('catalog.categories.view') or is_granted('catalog.categories.read_ref')",
             normalizationContext: ['groups' => ['category:read', 'default:read']],
             provider: CategoryProvider::class,
         ),

src/Module/Core/Application/Rbac/RbacSeeder.php

@@ -62,6 +62,9 @@ final class RbacSeeder
             'permissions' => [
                 'commercial.clients.view',
                 'commercial.clients.manage',
+                // Lecture des referentiels transverses pour les selects client (ERP-102).
+                'catalog.categories.read_ref',
+                'sites.read_ref',
             ],
         ],
         self::ROLE_COMPTA => [
@@ -70,6 +73,9 @@ final class RbacSeeder
                 'commercial.clients.view',
                 'commercial.clients.accounting.view',
                 'commercial.clients.accounting.manage',
+                // Lecture des referentiels transverses pour les selects client (ERP-102).
+                'catalog.categories.read_ref',
+                'sites.read_ref',
             ],
         ],
         self::ROLE_COMMERCIALE => [
@@ -77,6 +83,9 @@ final class RbacSeeder
             'permissions' => [
                 'commercial.clients.view',
                 'commercial.clients.manage',
+                // Lecture des referentiels transverses pour les selects client (ERP-102).
+                'catalog.categories.read_ref',
+                'sites.read_ref',
             ],
         ],
         self::ROLE_USINE => [

src/Module/Sites/Domain/Entity/Site.php

@@ -40,13 +40,18 @@ use Symfony\Component\Validator\Constraints as Assert;
  */
 #[ApiResource(
     operations: [
+        // Lecture (liste + item) : permission d'administration `sites.view` OU
+        // permission de lecture-referentiel transverse `sites.read_ref` (ERP-102).
+        // Le referentiel sites alimente les selects d'adresse des modules Tiers :
+        // tout role qui gere des tiers doit pouvoir le lire sans porter l'acces
+        // admin des Sites.
         new GetCollection(
             normalizationContext: ['groups' => ['site:read']],
-            security: "is_granted('sites.view')",
+            security: "is_granted('sites.view') or is_granted('sites.read_ref')",
         ),
         new Get(
             normalizationContext: ['groups' => ['site:read']],
-            security: "is_granted('sites.view')",
+            security: "is_granted('sites.view') or is_granted('sites.read_ref')",
         ),
         new Post(
             normalizationContext: ['groups' => ['site:read']],

src/Module/Sites/Infrastructure/ApiPlatform/Extension/SiteCollectionScopedExtension.php

@@ -30,6 +30,8 @@ use function sprintf;
  *  - resource != Site::class          → no-op (les autres resources sont
  *                                        gerees par SiteScopedQueryExtension) ;
  *  - is_granted('sites.bypass_scope') → pas de filtre (admin / bypass) ;
+ *  - is_granted('sites.read_ref')     → pas de filtre (lecture-referentiel
+ *                                        transverse complet, ERP-102) ;
  *  - user non authentifie             → no-op (API Platform renvoie 401 avant) ;
  *  - user sans aucun site             → WHERE 1 = 0 (aucun acces) ;
  *  - cas normal                       → WHERE site.id IN (:allowedSites).
@@ -84,6 +86,16 @@ final class SiteCollectionScopedExtension implements QueryCollectionExtensionInt
             return;
         }
 
+        // 2bis) Lecture-referentiel transverse (ERP-102) : `sites.read_ref` donne
+        // acces a la LISTE COMPLETE des sites (selects d'adresse des modules Tiers).
+        // Sans ce bypass, le cloisonnement par site rattache reduirait le select
+        // aux seuls sites de l'utilisateur (voire a rien s'il n'en a aucun) et le
+        // referentiel ne serait plus "transverse". `read_ref` est une lecture seule :
+        // il ouvre la visibilite sans permettre la moindre ecriture.
+        if ($this->security->isGranted('sites.read_ref')) {
+            return;
+        }
+
         // 3) Pas d'user authentifie -> no-op (API Platform gere le 401 en amont).
         $user = $this->security->getUser();
         if (!$user instanceof User) {

src/Module/Sites/SitesModule.php

@@ -33,6 +33,11 @@ final class SitesModule
             ['code' => 'sites.view', 'label' => 'Voir les sites'],
             ['code' => 'sites.manage', 'label' => 'Gerer les sites (creer, editer, supprimer)'],
             ['code' => 'sites.bypass_scope', 'label' => 'Voir les donnees site-scoped de tous les sites (bypass du filtrage)'],
+            // Lecture-referentiel transverse (ERP-102) : permet de LISTER les sites
+            // pour alimenter les selects des modules Tiers (adresses client...), sans
+            // donner l'acces d'administration `.view` (qui ouvre la page Sites dans la
+            // sidebar). Accordee aux roles metier via la matrice RBAC § 2.7.
+            ['code' => 'sites.read_ref', 'label' => 'Lire le referentiel sites (transverse, lecture seule)'],
         ];
     }
 }

tests/Module/Commercial/Api/ClientRBACMatrixTest.php

@@ -6,6 +6,7 @@ namespace App\Tests\Module\Commercial\Api;
 
 use ApiPlatform\Symfony\Bundle\Test\Client;
 use App\Module\Core\Infrastructure\DataFixtures\RbacDemoFixtures;
+use App\Module\Sites\Domain\Entity\Site;
 use Symfony\Bundle\FrameworkBundle\Console\Application;
 use Symfony\Component\Console\Input\ArrayInput;
 use Symfony\Component\Console\Output\NullOutput;
@@ -272,6 +273,51 @@ final class ClientRBACMatrixTest extends AbstractCommercialApiTestCase
         self::assertResponseStatusCodeSame(200);
     }
 
+    public function testBusinessRolesCanReadCategoriesAndSitesReferentials(): void
+    {
+        // ERP-102 : /categories et /sites sont des referentiels TRANSVERSES.
+        // Tout role qui gere des clients (bureau / compta / commerciale) doit
+        // pouvoir les LISTER pour alimenter les selects de creation/filtre client,
+        // via la permission de lecture-referentiel dediee (catalog.categories.read_ref
+        // / sites.read_ref) attachee par la matrice § 2.7 — sans pour autant porter
+        // la permission d'administration `.view`. Usine, sans aucune permission,
+        // reste interdit.
+        // Le referentiel /sites est TRANSVERSE et COMPLET : le cloisonnement par
+        // site rattache (SiteCollectionScopedExtension) est neutralise par
+        // `sites.read_ref` (ERP-102). Les comptes demo ne sont rattaches qu'a un
+        // seul site (Chatellerault) alors que la base en compte plusieurs : on
+        // verifie donc que le role voit la TOTALITE du referentiel, pas son seul
+        // site rattache. Sans le bypass de scope, totalItems vaudrait 1.
+        $totalSites = $this->getEm()->getRepository(Site::class)->count([]);
+        self::assertGreaterThan(
+            1,
+            $totalSites,
+            'Pre-requis du test : la base doit contenir plusieurs sites pour distinguer scope et bypass.',
+        );
+
+        foreach (['bureau', 'compta', 'commerciale'] as $role) {
+            $client = $this->authAs($role);
+
+            $client->request('GET', '/api/categories', ['headers' => ['Accept' => self::LD]]);
+            self::assertResponseStatusCodeSame(200, sprintf('Le role %s doit pouvoir lister /categories', $role));
+
+            $response = $client->request('GET', '/api/sites', ['headers' => ['Accept' => self::LD]]);
+            self::assertResponseStatusCodeSame(200, sprintf('Le role %s doit pouvoir lister /sites', $role));
+            self::assertSame(
+                $totalSites,
+                $response->toArray()['totalItems'] ?? null,
+                sprintf('Le role %s doit voir tout le referentiel sites (%d), pas seulement son site rattache', $role, $totalSites),
+            );
+        }
+
+        // Usine : aucune permission -> reste a 403 sur les referentiels.
+        $usine = $this->authAs('usine');
+        $usine->request('GET', '/api/categories', ['headers' => ['Accept' => self::LD]]);
+        self::assertResponseStatusCodeSame(403, 'Usine ne doit pas pouvoir lister /categories');
+        $usine->request('GET', '/api/sites', ['headers' => ['Accept' => self::LD]]);
+        self::assertResponseStatusCodeSame(403, 'Usine ne doit pas pouvoir lister /sites');
+    }
+
     private function authAs(string $role): Client
     {
         return $this->authenticatedClient($role, self::PWD);

tests/Module/Sites/SitesModuleTest.php

@@ -16,17 +16,18 @@ use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
  */
 final class SitesModuleTest extends KernelTestCase
 {
-    public function testPermissionsSetContainsExactlyThreeCodes(): void
+    public function testPermissionsSetContainsExactlyFourCodes(): void
     {
         // Garde-fou : si quelqu'un ajoute une permission sans ajuster les
         // tests ou la doc, ce test casse explicitement. Si au contraire une
         // permission disparait (ex: bypass_scope retire par erreur), meme
-        // effet. Le set de 3 permissions est fige par ce test.
+        // effet. Le set de permissions est fige par ce test.
+        // `sites.read_ref` ajoutee en ERP-102 (lecture-referentiel transverse).
         $codes = array_column(SitesModule::permissions(), 'code');
         sort($codes);
 
         self::assertSame(
-            ['sites.bypass_scope', 'sites.manage', 'sites.view'],
+            ['sites.bypass_scope', 'sites.manage', 'sites.read_ref', 'sites.view'],
             $codes,
         );
     }