feat : refonte des blocs contact — 4 colonnes, titre noir, separateurs (ERP-196)

frontend/i18n/locales/fr.json

@@ -441,6 +441,7 @@
                     "categoryRequired": "Sélectionnez au moins une catégorie."
                 },
                 "contact": {
+                    "title": "Contact {n}",
                     "lastName": "Nom",
                     "firstName": "Prénom",
                     "jobTitle": "Fonction",
@@ -637,6 +638,7 @@
                     "degraded": "Service d'adresse indisponible : saisie de la ville et de l'adresse en mode libre."
                 },
                 "contact": {
+                    "title": "Contact {n}",
                     "lastName": "Nom",
                     "firstName": "Prénom",
                     "jobTitle": "Fonction",

frontend/modules/commercial/components/ClientContactBlock.vue

@@ -1,84 +1,93 @@
 <template>
-    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+    <!-- Bloc a plat (sans box-shadow) : un filet noir 1px le separe du suivant
-        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+         (pas de bordure sous le dernier bloc). -->
-             non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
+    <div class="pb-[20px]" :class="{ 'border-b border-black': !last }">
-             ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+        <!-- En-tete : titre du bloc (noir) a gauche, poubelle de suppression a droite. -->
-        <MalioButtonIcon
+        <div class="flex items-center justify-between">
-            v-if="removable && !readonly && !disabled"
+            <h2 class="text-[20px] font-semibold text-black">{{ title }}</h2>
-            icon="mdi:delete-outline"
+            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
-            variant="ghost"
+                 non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
-            button-class="absolute top-3 right-3"
+                 ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
-            v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
+            <MalioButtonIcon
-            @click="$emit('remove')"
+                v-if="removable && !readonly && !disabled"
-        />
+                icon="mdi:delete-outline"
-
+                variant="ghost"
-        <MalioInputText
+                button-class="p-0"
-            v-if="!hideEmpty || isFilled(model.lastName)"
+                v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
-            :model-value="model.lastName"
+                @click="$emit('remove')"
-            :label="t('commercial.clients.form.contact.lastName')"
+            />
-            :mask="PERSON_NAME_MASK"
+        </div>
-            :readonly="readonly"
+
-            :disabled="disabled"
+        <!-- Grille 4 colonnes des champs du contact. -->
-            :error="errors?.lastName"
+        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
-            @update:model-value="(v: string) => update('lastName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.lastName)"
-        <MalioInputText
+                :model-value="model.lastName"
-            v-if="!hideEmpty || isFilled(model.firstName)"
+                :label="t('commercial.clients.form.contact.lastName')"
-            :model-value="model.firstName"
+                :mask="PERSON_NAME_MASK"
-            :label="t('commercial.clients.form.contact.firstName')"
+                :readonly="readonly"
-            :mask="PERSON_NAME_MASK"
+                :disabled="disabled"
-            :readonly="readonly"
+                :error="errors?.lastName"
-            :disabled="disabled"
+                @update:model-value="(v: string) => update('lastName', v)"
-            :error="errors?.firstName"
+            />
-            @update:model-value="(v: string) => update('firstName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.firstName)"
-        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
+                :model-value="model.firstName"
-             (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
+                :label="t('commercial.clients.form.contact.firstName')"
-             cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
+                :mask="PERSON_NAME_MASK"
-        <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                :readonly="readonly"
-            <MalioInputText
+                :disabled="disabled"
-                :model-value="model.jobTitle"
+                :error="errors?.firstName"
-                :label="t('commercial.clients.form.contact.jobTitle')"
+                @update:model-value="(v: string) => update('firstName', v)"
-                :mask="FREE_TEXT_MASK"
+            />
-                :readonly="readonly"
+            <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
-                :disabled="disabled"
+                 (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
-                :error="errors?.jobTitle"
+                 cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
-                @update:model-value="(v: string) => update('jobTitle', v)"
+            <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                <MalioInputText
+                    :model-value="model.jobTitle"
+                    :label="t('commercial.clients.form.contact.jobTitle')"
+                    :mask="FREE_TEXT_MASK"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.jobTitle"
+                    @update:model-value="(v: string) => update('jobTitle', v)"
+                />
+            </div>
+            <MalioInputEmail
+                v-if="!hideEmpty || isFilled(model.email)"
+                :model-value="model.email"
+                :label="t('commercial.clients.form.contact.email')"
+                :readonly="readonly"
+                :disabled="disabled"
+                :lowercase="true"
+                :error="errors?.email"
+                @update:model-value="(v: string) => update('email', v)"
+            />
+            <MalioInputPhone
+                v-if="!hideEmpty || isFilled(model.phonePrimary)"
+                :model-value="model.phonePrimary"
+                :label="t('commercial.clients.form.contact.phonePrimary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phonePrimary"
+                :addable="!model.hasSecondaryPhone && !readonly"
+                :add-button-label="t('commercial.clients.form.contact.addPhone')"
+                @update:model-value="(v: string) => update('phonePrimary', v)"
+                @add="revealSecondaryPhone"
+            />
+            <MalioInputPhone
+                v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
+                :model-value="model.phoneSecondary"
+                :label="t('commercial.clients.form.contact.phoneSecondary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phoneSecondary"
+                @update:model-value="(v: string) => update('phoneSecondary', v)"
             />
         </div>
-        <MalioInputEmail
-            v-if="!hideEmpty || isFilled(model.email)"
-            :model-value="model.email"
-            :label="t('commercial.clients.form.contact.email')"
-            :readonly="readonly"
-            :disabled="disabled"
-            :lowercase="true"
-            :error="errors?.email"
-            @update:model-value="(v: string) => update('email', v)"
-        />
-        <MalioInputPhone
-            v-if="!hideEmpty || isFilled(model.phonePrimary)"
-            :model-value="model.phonePrimary"
-            :label="t('commercial.clients.form.contact.phonePrimary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phonePrimary"
-            :addable="!model.hasSecondaryPhone && !readonly"
-            :add-button-label="t('commercial.clients.form.contact.addPhone')"
-            @update:model-value="(v: string) => update('phonePrimary', v)"
-            @add="revealSecondaryPhone"
-        />
-        <MalioInputPhone
-            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
-            :model-value="model.phoneSecondary"
-            :label="t('commercial.clients.form.contact.phoneSecondary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phoneSecondary"
-            @update:model-value="(v: string) => update('phoneSecondary', v)"
-        />
     </div>
 </template>
 
@@ -98,6 +107,8 @@ const props = defineProps<{
     title: string
     /** Affiche l'icone de suppression (1er bloc non supprimable, RG-1.14). */
     removable?: boolean
+    /** Dernier bloc de la liste : supprime le filet de separation bas. */
+    last?: boolean
     /** Bloc en lecture seule (onglet valide). */
     readonly?: boolean
     /** Bloc desactive (champs grises, consultation — distinct de readonly). */

frontend/modules/commercial/components/SupplierContactBlock.vue

@@ -1,83 +1,92 @@
 <template>
-    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+    <!-- Bloc a plat (sans box-shadow) : un filet noir 1px le separe du suivant
-        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+         (pas de bordure sous le dernier bloc). -->
-             non supprimable (1er bloc, RG-2.13) ou en lecture seule. -->
+    <div class="pb-[20px]" :class="{ 'border-b border-black': !last }">
-        <MalioButtonIcon
+        <!-- En-tete : titre du bloc (noir) a gauche, poubelle de suppression a droite. -->
-            v-if="removable && !readonly && !disabled"
+        <div class="flex items-center justify-between">
-            icon="mdi:delete-outline"
+            <h2 class="text-[20px] font-semibold text-black">{{ title }}</h2>
-            variant="ghost"
+            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
-            button-class="absolute top-3 right-3"
+                 non supprimable (1er bloc, RG-2.13) ou en lecture seule. -->
-            v-bind="{ ariaLabel: t('commercial.suppliers.form.contact.remove') }"
+            <MalioButtonIcon
-            @click="$emit('remove')"
+                v-if="removable && !readonly && !disabled"
-        />
+                icon="mdi:delete-outline"
-
+                variant="ghost"
-        <MalioInputText
+                button-class="p-0"
-            v-if="!hideEmpty || isFilled(model.lastName)"
+                v-bind="{ ariaLabel: t('commercial.suppliers.form.contact.remove') }"
-            :model-value="model.lastName"
+                @click="$emit('remove')"
-            :label="t('commercial.suppliers.form.contact.lastName')"
+            />
-            :mask="PERSON_NAME_MASK"
+        </div>
-            :readonly="readonly"
+
-            :disabled="disabled"
+        <!-- Grille 4 colonnes des champs du contact. -->
-            :error="errors?.lastName"
+        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
-            @update:model-value="(v: string) => update('lastName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.lastName)"
-        <MalioInputText
+                :model-value="model.lastName"
-            v-if="!hideEmpty || isFilled(model.firstName)"
+                :label="t('commercial.suppliers.form.contact.lastName')"
-            :model-value="model.firstName"
+                :mask="PERSON_NAME_MASK"
-            :label="t('commercial.suppliers.form.contact.firstName')"
+                :readonly="readonly"
-            :mask="PERSON_NAME_MASK"
+                :disabled="disabled"
-            :readonly="readonly"
+                :error="errors?.lastName"
-            :disabled="disabled"
+                @update:model-value="(v: string) => update('lastName', v)"
-            :error="errors?.firstName"
+            />
-            @update:model-value="(v: string) => update('firstName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.firstName)"
-        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
+                :model-value="model.firstName"
-             (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
+                :label="t('commercial.suppliers.form.contact.firstName')"
-             cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
+                :mask="PERSON_NAME_MASK"
-        <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                :readonly="readonly"
-            <MalioInputText
+                :disabled="disabled"
-                :model-value="model.jobTitle"
+                :error="errors?.firstName"
-                :label="t('commercial.suppliers.form.contact.jobTitle')"
+                @update:model-value="(v: string) => update('firstName', v)"
-                :mask="FREE_TEXT_MASK"
+            />
-                :readonly="readonly"
+            <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
-                :disabled="disabled"
+                 (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
-                :error="errors?.jobTitle"
+                 cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
-                @update:model-value="(v: string) => update('jobTitle', v)"
+            <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                <MalioInputText
+                    :model-value="model.jobTitle"
+                    :label="t('commercial.suppliers.form.contact.jobTitle')"
+                    :mask="FREE_TEXT_MASK"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.jobTitle"
+                    @update:model-value="(v: string) => update('jobTitle', v)"
+                />
+            </div>
+            <MalioInputEmail
+                v-if="!hideEmpty || isFilled(model.email)"
+                :model-value="model.email"
+                :label="t('commercial.suppliers.form.contact.email')"
+                :readonly="readonly"
+                :disabled="disabled"
+                :lowercase="true"
+                :error="errors?.email"
+                @update:model-value="(v: string) => update('email', v)"
+            />
+            <MalioInputPhone
+                v-if="!hideEmpty || isFilled(model.phonePrimary)"
+                :model-value="model.phonePrimary"
+                :label="t('commercial.suppliers.form.contact.phonePrimary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phonePrimary"
+                :addable="!model.hasSecondaryPhone && !readonly"
+                :add-button-label="t('commercial.suppliers.form.contact.addPhone')"
+                @update:model-value="(v: string) => update('phonePrimary', v)"
+                @add="revealSecondaryPhone"
+            />
+            <MalioInputPhone
+                v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
+                :model-value="model.phoneSecondary"
+                :label="t('commercial.suppliers.form.contact.phoneSecondary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phoneSecondary"
+                @update:model-value="(v: string) => update('phoneSecondary', v)"
             />
         </div>
-        <MalioInputEmail
-            v-if="!hideEmpty || isFilled(model.email)"
-            :model-value="model.email"
-            :label="t('commercial.suppliers.form.contact.email')"
-            :readonly="readonly"
-            :disabled="disabled"
-            :lowercase="true"
-            :error="errors?.email"
-            @update:model-value="(v: string) => update('email', v)"
-        />
-        <MalioInputPhone
-            v-if="!hideEmpty || isFilled(model.phonePrimary)"
-            :model-value="model.phonePrimary"
-            :label="t('commercial.suppliers.form.contact.phonePrimary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phonePrimary"
-            :addable="!model.hasSecondaryPhone && !readonly"
-            :add-button-label="t('commercial.suppliers.form.contact.addPhone')"
-            @update:model-value="(v: string) => update('phonePrimary', v)"
-            @add="revealSecondaryPhone"
-        />
-        <MalioInputPhone
-            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
-            :model-value="model.phoneSecondary"
-            :label="t('commercial.suppliers.form.contact.phoneSecondary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phoneSecondary"
-            @update:model-value="(v: string) => update('phoneSecondary', v)"
-        />
     </div>
 </template>
 
@@ -96,6 +105,8 @@ const props = defineProps<{
     title: string
     /** Affiche l'icone de suppression (1er bloc non supprimable, RG-2.13). */
     removable?: boolean
+    /** Dernier bloc de la liste : supprime le filet de separation bas. */
+    last?: boolean
     /** Bloc en lecture seule (onglet valide). */
     readonly?: boolean
     /** Bloc desactive (champs grises, consultation — distinct de readonly). */

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

@@ -178,6 +178,7 @@
                             :model-value="contact"
                             :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
                             :removable="isRowRemovable(contacts, index)"
+                            :last="index === contacts.length - 1"
                             :disabled="businessReadonly"
                             :errors="contactErrors[index]"
                             @update:model-value="(v) => contacts[index] = v"

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

@@ -156,6 +156,7 @@
                             :key="contact.id ?? index"
                             :model-value="contact"
                             :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
+                            :last="index === contacts.length - 1"
                             disabled
                             hide-empty
                         />

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

@@ -177,6 +177,7 @@
                         :model-value="contact"
                         :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
                         :removable="isRowRemovable(contacts, index)"
+                        :last="index === contacts.length - 1"
                         :disabled="isValidated('contact')"
                         :errors="contactErrors[index]"
                         @update:model-value="(v) => contacts[index] = v"

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

@@ -147,6 +147,7 @@
                             :model-value="contact"
                             :title="t('commercial.suppliers.form.contact.title', { n: index + 1 })"
                             :removable="isRowRemovable(contacts, index)"
+                            :last="index === contacts.length - 1"
                             :disabled="businessReadonly"
                             :errors="contactErrors[index]"
                             @update:model-value="(v) => contacts[index] = v"

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

@@ -137,6 +137,7 @@
                             :key="contact.id ?? index"
                             :model-value="contact"
                             :title="t('commercial.suppliers.form.contact.title', { n: index + 1 })"
+                            :last="index === contacts.length - 1"
                             disabled
                             hide-empty
                         />

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

@@ -145,6 +145,7 @@
                         :model-value="contact"
                         :title="t('commercial.suppliers.form.contact.title', { n: index + 1 })"
                         :removable="isRowRemovable(contacts, index)"
+                        :last="index === contacts.length - 1"
                         :disabled="isValidated('contacts')"
                         :errors="contactErrors[index]"
                         @update:model-value="(v) => contacts[index] = v"

frontend/modules/technique/components/ProviderContactBlock.vue

@@ -1,84 +1,93 @@
 <template>
-    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+    <!-- Bloc a plat (sans box-shadow) : un filet noir 1px le separe du suivant
-        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+         (pas de bordure sous le dernier bloc). -->
-             non supprimable (1er bloc) ou en lecture seule. -->
+    <div class="pb-[20px]" :class="{ 'border-b border-black': !last }">
-        <MalioButtonIcon
+        <!-- En-tete : titre du bloc (noir) a gauche, poubelle de suppression a droite. -->
-            v-if="removable && !readonly && !disabled"
+        <div class="flex items-center justify-between">
-            icon="mdi:delete-outline"
+            <h2 class="text-[20px] font-semibold text-black">{{ title }}</h2>
-            variant="ghost"
+            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
-            button-class="absolute top-3 right-3"
+                 non supprimable (1er bloc) ou en lecture seule. -->
-            v-bind="{ ariaLabel: t('technique.providers.form.contact.remove') }"
+            <MalioButtonIcon
-            @click="$emit('remove')"
+                v-if="removable && !readonly && !disabled"
-        />
+                icon="mdi:delete-outline"
-
+                variant="ghost"
-        <MalioInputText
+                button-class="p-0"
-            v-if="!hideEmpty || isFilled(model.lastName)"
+                v-bind="{ ariaLabel: t('technique.providers.form.contact.remove') }"
-            :model-value="model.lastName"
+                @click="$emit('remove')"
-            :label="t('technique.providers.form.contact.lastName')"
+            />
-            :mask="PERSON_NAME_MASK"
+        </div>
-            :readonly="readonly"
+
-            :disabled="disabled"
+        <!-- Grille 4 colonnes des champs du contact. -->
-            :error="errors?.lastName"
+        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
-            @update:model-value="(v: string) => update('lastName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.lastName)"
-        <MalioInputText
+                :model-value="model.lastName"
-            v-if="!hideEmpty || isFilled(model.firstName)"
+                :label="t('technique.providers.form.contact.lastName')"
-            :model-value="model.firstName"
+                :mask="PERSON_NAME_MASK"
-            :label="t('technique.providers.form.contact.firstName')"
+                :readonly="readonly"
-            :mask="PERSON_NAME_MASK"
+                :disabled="disabled"
-            :readonly="readonly"
+                :error="errors?.lastName"
-            :disabled="disabled"
+                @update:model-value="(v: string) => update('lastName', v)"
-            :error="errors?.firstName"
+            />
-            @update:model-value="(v: string) => update('firstName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.firstName)"
-        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
+                :model-value="model.firstName"
-             (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
+                :label="t('technique.providers.form.contact.firstName')"
-             cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
+                :mask="PERSON_NAME_MASK"
-        <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                :readonly="readonly"
-            <MalioInputText
+                :disabled="disabled"
-                :model-value="model.jobTitle"
+                :error="errors?.firstName"
-                :label="t('technique.providers.form.contact.jobTitle')"
+                @update:model-value="(v: string) => update('firstName', v)"
-                :mask="FREE_TEXT_MASK"
+            />
-                :readonly="readonly"
+            <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
-                :disabled="disabled"
+                 (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
-                :error="errors?.jobTitle"
+                 cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
-                @update:model-value="(v: string) => update('jobTitle', v)"
+            <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                <MalioInputText
+                    :model-value="model.jobTitle"
+                    :label="t('technique.providers.form.contact.jobTitle')"
+                    :mask="FREE_TEXT_MASK"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.jobTitle"
+                    @update:model-value="(v: string) => update('jobTitle', v)"
+                />
+            </div>
+            <MalioInputEmail
+                v-if="!hideEmpty || isFilled(model.email)"
+                :model-value="model.email"
+                :label="t('technique.providers.form.contact.email')"
+                :readonly="readonly"
+                :disabled="disabled"
+                :lowercase="true"
+                :error="errors?.email"
+                @update:model-value="(v: string) => update('email', v)"
+            />
+            <MalioInputPhone
+                v-if="!hideEmpty || isFilled(model.phonePrimary)"
+                :model-value="model.phonePrimary"
+                :label="t('technique.providers.form.contact.phonePrimary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phonePrimary"
+                :addable="!model.hasSecondaryPhone && !readonly"
+                :add-button-label="t('technique.providers.form.contact.addPhone')"
+                @update:model-value="(v: string) => update('phonePrimary', v)"
+                @add="revealSecondaryPhone"
+            />
+            <!-- 2e numero : revele a la demande (max 2 telephones par contact). -->
+            <MalioInputPhone
+                v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
+                :model-value="model.phoneSecondary"
+                :label="t('technique.providers.form.contact.phoneSecondary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phoneSecondary"
+                @update:model-value="(v: string) => update('phoneSecondary', v)"
             />
         </div>
-        <MalioInputEmail
-            v-if="!hideEmpty || isFilled(model.email)"
-            :model-value="model.email"
-            :label="t('technique.providers.form.contact.email')"
-            :readonly="readonly"
-            :disabled="disabled"
-            :lowercase="true"
-            :error="errors?.email"
-            @update:model-value="(v: string) => update('email', v)"
-        />
-        <MalioInputPhone
-            v-if="!hideEmpty || isFilled(model.phonePrimary)"
-            :model-value="model.phonePrimary"
-            :label="t('technique.providers.form.contact.phonePrimary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phonePrimary"
-            :addable="!model.hasSecondaryPhone && !readonly"
-            :add-button-label="t('technique.providers.form.contact.addPhone')"
-            @update:model-value="(v: string) => update('phonePrimary', v)"
-            @add="revealSecondaryPhone"
-        />
-        <!-- 2e numero : revele a la demande (max 2 telephones par contact). -->
-        <MalioInputPhone
-            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
-            :model-value="model.phoneSecondary"
-            :label="t('technique.providers.form.contact.phoneSecondary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phoneSecondary"
-            @update:model-value="(v: string) => update('phoneSecondary', v)"
-        />
     </div>
 </template>
 
@@ -93,8 +102,12 @@ const PHONE_MASK = '## ## ## ## ##'
 const props = defineProps<{
     /** Brouillon du contact (v-model). */
     modelValue: ProviderContactFormDraft
+    /** Titre du bloc (ex: « Contact 1 »). */
+    title: string
     /** Affiche l'icone de suppression (1er bloc non supprimable). */
     removable?: boolean
+    /** Dernier bloc de la liste : supprime le filet de separation bas. */
+    last?: boolean
     /** Bloc en lecture seule (onglet valide). */
     readonly?: boolean
     /** Bloc desactive (champs grises, consultation — distinct de readonly). */

frontend/modules/technique/components/__tests__/ProviderContactBlock.spec.ts

@@ -29,6 +29,7 @@ function mountBlock(errors?: Record<string, string>) {
     return mount(ProviderContactBlock, {
         props: {
             modelValue: emptyProviderContact(),
+            title: 'Contact 1',
             ...(errors ? { errors } : {}),
         },
         global: {

frontend/modules/technique/pages/providers/[id]/edit.vue

@@ -72,7 +72,9 @@
                             v-for="(contact, index) in contacts"
                             :key="index"
                             :model-value="contact"
+                            :title="t('technique.providers.form.contact.title', { n: index + 1 })"
                             :removable="isRowRemovable(contacts, index)"
+                            :last="index === contacts.length - 1"
                             :disabled="businessReadonly"
                             :errors="contactErrors[index]"
                             @update:model-value="(v) => contacts[index] = v"

frontend/modules/technique/pages/providers/[id]/index.vue

@@ -81,6 +81,8 @@
                             v-for="(contact, index) in contacts"
                             :key="index"
                             :model-value="contact"
+                            :title="t('technique.providers.form.contact.title', { n: index + 1 })"
+                            :last="index === contacts.length - 1"
                             disabled
                             hide-empty
                         />

frontend/modules/technique/pages/providers/new.vue

@@ -73,7 +73,9 @@
                         v-for="(contact, index) in contacts"
                         :key="index"
                         :model-value="contact"
+                        :title="t('technique.providers.form.contact.title', { n: index + 1 })"
                         :removable="isRowRemovable(contacts, index)"
+                        :last="index === contacts.length - 1"
                         :disabled="isValidated('contact')"
                         :errors="contactErrors[index]"
                         @update:model-value="(v) => contacts[index] = v"

frontend/modules/transport/components/CarrierContactBlock.vue

@@ -1,84 +1,93 @@
 <template>
-    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+    <!-- Bloc a plat (sans box-shadow) : un filet noir 1px le separe du suivant
-        <!-- Suppression : ouvre une modal de confirmation côté parent. Masquée si
+         (pas de bordure sous le dernier bloc). -->
-             non supprimable (1er bloc) ou en lecture seule. -->
+    <div class="pb-[20px]" :class="{ 'border-b border-black': !last }">
-        <MalioButtonIcon
+        <!-- En-tete : titre du bloc (noir) a gauche, poubelle de suppression a droite. -->
-            v-if="removable && !readonly && !disabled"
+        <div class="flex items-center justify-between">
-            icon="mdi:delete-outline"
+            <h2 class="text-[20px] font-semibold text-black">{{ title }}</h2>
-            variant="ghost"
+            <!-- Suppression : ouvre une modal de confirmation côté parent. Masquée si
-            button-class="absolute top-3 right-3"
+                 non supprimable (1er bloc) ou en lecture seule. -->
-            v-bind="{ ariaLabel: t('transport.carriers.form.contact.remove') }"
+            <MalioButtonIcon
-            @click="$emit('remove')"
+                v-if="removable && !readonly && !disabled"
-        />
+                icon="mdi:delete-outline"
-
+                variant="ghost"
-        <MalioInputText
+                button-class="p-0"
-            v-if="!hideEmpty || isFilled(model.lastName)"
+                v-bind="{ ariaLabel: t('transport.carriers.form.contact.remove') }"
-            :model-value="model.lastName"
+                @click="$emit('remove')"
-            :label="t('transport.carriers.form.contact.lastName')"
+            />
-            :mask="PERSON_NAME_MASK"
+        </div>
-            :readonly="readonly"
+
-            :disabled="disabled"
+        <!-- Grille 4 colonnes des champs du contact. -->
-            :error="errors?.lastName"
+        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
-            @update:model-value="(v: string) => update('lastName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.lastName)"
-        <MalioInputText
+                :model-value="model.lastName"
-            v-if="!hideEmpty || isFilled(model.firstName)"
+                :label="t('transport.carriers.form.contact.lastName')"
-            :model-value="model.firstName"
+                :mask="PERSON_NAME_MASK"
-            :label="t('transport.carriers.form.contact.firstName')"
+                :readonly="readonly"
-            :mask="PERSON_NAME_MASK"
+                :disabled="disabled"
-            :readonly="readonly"
+                :error="errors?.lastName"
-            :disabled="disabled"
+                @update:model-value="(v: string) => update('lastName', v)"
-            :error="errors?.firstName"
+            />
-            @update:model-value="(v: string) => update('firstName', v)"
+            <MalioInputText
-        />
+                v-if="!hideEmpty || isFilled(model.firstName)"
-        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText (inheritAttrs:false)
+                :model-value="model.firstName"
-             renvoie `class` sur l'input interne, pas sur la cellule de grille. -->
+                :label="t('transport.carriers.form.contact.firstName')"
-        <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                :mask="PERSON_NAME_MASK"
-            <MalioInputText
+                :readonly="readonly"
-                :model-value="model.jobTitle"
+                :disabled="disabled"
-                :label="t('transport.carriers.form.contact.jobTitle')"
+                :error="errors?.firstName"
-                :mask="FREE_TEXT_MASK"
+                @update:model-value="(v: string) => update('firstName', v)"
-                :readonly="readonly"
+            />
-                :disabled="disabled"
+            <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText (inheritAttrs:false)
-                :error="errors?.jobTitle"
+                 renvoie `class` sur l'input interne, pas sur la cellule de grille. -->
-                @update:model-value="(v: string) => update('jobTitle', v)"
+            <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
+                <MalioInputText
+                    :model-value="model.jobTitle"
+                    :label="t('transport.carriers.form.contact.jobTitle')"
+                    :mask="FREE_TEXT_MASK"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.jobTitle"
+                    @update:model-value="(v: string) => update('jobTitle', v)"
+                />
+            </div>
+            <MalioInputEmail
+                v-if="!hideEmpty || isFilled(model.email)"
+                :model-value="model.email"
+                :label="t('transport.carriers.form.contact.email')"
+                :readonly="readonly"
+                :disabled="disabled"
+                :lowercase="true"
+                :error="errors?.email"
+                @update:model-value="(v: string) => update('email', v)"
+            />
+            <!-- Téléphone principal + bouton « + » révélant le 2e numéro (max 2). -->
+            <MalioInputPhone
+                v-if="!hideEmpty || isFilled(model.phonePrimary)"
+                :model-value="model.phonePrimary"
+                :label="t('transport.carriers.form.contact.phonePrimary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phonePrimary"
+                :addable="!model.hasSecondaryPhone && !readonly"
+                :add-button-label="t('transport.carriers.form.contact.addPhone')"
+                @update:model-value="(v: string) => update('phonePrimary', v)"
+                @add="revealSecondaryPhone"
+            />
+            <!-- 2e numéro : révélé à la demande (max 2 téléphones — RG-4.08). -->
+            <MalioInputPhone
+                v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
+                :model-value="model.phoneSecondary"
+                :label="t('transport.carriers.form.contact.phoneSecondary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :disabled="disabled"
+                :error="errors?.phoneSecondary"
+                @update:model-value="(v: string) => update('phoneSecondary', v)"
             />
         </div>
-        <MalioInputEmail
-            v-if="!hideEmpty || isFilled(model.email)"
-            :model-value="model.email"
-            :label="t('transport.carriers.form.contact.email')"
-            :readonly="readonly"
-            :disabled="disabled"
-            :lowercase="true"
-            :error="errors?.email"
-            @update:model-value="(v: string) => update('email', v)"
-        />
-        <!-- Téléphone principal + bouton « + » révélant le 2e numéro (max 2). -->
-        <MalioInputPhone
-            v-if="!hideEmpty || isFilled(model.phonePrimary)"
-            :model-value="model.phonePrimary"
-            :label="t('transport.carriers.form.contact.phonePrimary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phonePrimary"
-            :addable="!model.hasSecondaryPhone && !readonly"
-            :add-button-label="t('transport.carriers.form.contact.addPhone')"
-            @update:model-value="(v: string) => update('phonePrimary', v)"
-            @add="revealSecondaryPhone"
-        />
-        <!-- 2e numéro : révélé à la demande (max 2 téléphones — RG-4.08). -->
-        <MalioInputPhone
-            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
-            :model-value="model.phoneSecondary"
-            :label="t('transport.carriers.form.contact.phoneSecondary')"
-            :mask="PHONE_MASK"
-            :readonly="readonly"
-            :disabled="disabled"
-            :error="errors?.phoneSecondary"
-            @update:model-value="(v: string) => update('phoneSecondary', v)"
-        />
     </div>
 </template>
 
@@ -93,8 +102,12 @@ const PHONE_MASK = '## ## ## ## ##'
 const props = defineProps<{
     /** Brouillon du contact (v-model). */
     modelValue: CarrierContactFormDraft
+    /** Titre du bloc (ex: « Contact 1 »). */
+    title: string
     /** Affiche l'icône de suppression (1er bloc non supprimable). */
     removable?: boolean
+    /** Dernier bloc de la liste : supprime le filet de separation bas. */
+    last?: boolean
     /** Bloc en lecture seule (onglet validé). */
     readonly?: boolean
     /** Bloc desactive (champs grises, consultation — distinct de readonly). */

frontend/modules/transport/pages/carriers/[id]/edit.vue

@@ -160,7 +160,9 @@
                             v-for="(contact, index) in contacts"
                             :key="index"
                             :model-value="contact"
+                            :title="t('transport.carriers.form.contact.title', { n: index + 1 })"
                             :removable="isRowRemovable(contacts, index)"
+                            :last="index === contacts.length - 1"
                             :errors="contactErrors[index]"
                             @update:model-value="(v) => contacts[index] = v"
                             @remove="askRemoveContact(index)"

frontend/modules/transport/pages/carriers/[id]/index.vue

@@ -136,6 +136,8 @@
                             v-for="(contact, index) in contacts"
                             :key="index"
                             :model-value="contact"
+                            :title="t('transport.carriers.form.contact.title', { n: index + 1 })"
+                            :last="index === contacts.length - 1"
                             disabled
                             hide-empty
                         />

frontend/modules/transport/pages/carriers/new.vue

@@ -207,7 +207,9 @@
                         v-for="(contact, index) in contacts"
                         :key="index"
                         :model-value="contact"
+                        :title="t('transport.carriers.form.contact.title', { n: index + 1 })"
                         :removable="isRowRemovable(contacts, index)"
+                        :last="index === contacts.length - 1"
                         :disabled="isValidated('contacts')"
                         :errors="contactErrors[index]"
                         @update:model-value="(v) => contacts[index] = v"