From 5d1cc09a49514f2a74de4e53a9913377c5574842 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 26 Jun 2026 15:57:55 +0200
Subject: [PATCH] style(directory) : style plat sans box-shadow sur les fiches
 (LST-72)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligne les fiches Client / Prospect / Prestataire sur le design Starseed :
- Onglet Information : grille plate (suppression box blanche + box-shadow)
- Blocs Contact & Adresse : à plat, séparés par un filet noir 1px
  (header titre + bouton supprimer, prop `last` sans bordure en bas)
Onglet Rapport inchangé.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/DirectoryAddressBlock.vue      |  30 +++--
 .../components/DirectoryContactBlock.vue      | 110 +++++++++---------
 .../pages/directory/clients/[id].vue          |   4 +-
 .../pages/directory/prestataires/[id].vue     |   4 +-
 .../pages/directory/prospects/[id].vue        |   4 +-
 5 files changed, 85 insertions(+), 67 deletions(-)

diff --git a/frontend/modules/directory/components/DirectoryAddressBlock.vue b/frontend/modules/directory/components/DirectoryAddressBlock.vue
index 54fafd8..c5f47dd 100644
--- a/frontend/modules/directory/components/DirectoryAddressBlock.vue
+++ b/frontend/modules/directory/components/DirectoryAddressBlock.vue
@@ -1,17 +1,20 @@
 <template>
-    <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
-        <h3 class="col-span-2 text-sm font-semibold text-neutral-700">
-            {{ title }}
-        </h3>
-        <MalioButtonIcon
-            v-if="removable && !readonly"
-            icon="mdi:delete-outline"
-            variant="ghost"
-            class="absolute right-3 top-3"
-            :aria-label="$t('common.delete')"
-            @click="$emit('remove')"
-        />
+    <!-- Bloc à plat (sans box-shadow) : un filet noir 1px le sépare du suivant
+         (pas de bordure sous le dernier bloc), comme sur Starseed. -->
+    <div class="pb-5" :class="{ 'border-b border-black': !last }">
+        <div class="flex items-center justify-between">
+            <h3 class="text-[20px] font-semibold text-black">{{ title }}</h3>
+            <MalioButtonIcon
+                v-if="removable && !readonly"
+                icon="mdi:delete-outline"
+                variant="ghost"
+                button-class="p-0"
+                :aria-label="$t('common.delete')"
+                @click="$emit('remove')"
+            />
+        </div>
 
+        <div class="mt-6 grid grid-cols-2 gap-x-[44px] gap-y-4">
         <MalioInputText
             class="col-span-2"
             :label="$t('directory.addresses.fields.label')"
@@ -79,6 +82,7 @@
             :readonly="readonly"
             @update:model-value="update('city', $event)"
         />
+        </div>
     </div>
 </template>
 
@@ -94,6 +98,8 @@ const props = defineProps<{
     title: string
     removable?: boolean
     readonly?: boolean
+    /** Dernier bloc de la liste : supprime le filet de séparation bas. */
+    last?: boolean
 }>()
 
 const emit = defineEmits<{
diff --git a/frontend/modules/directory/components/DirectoryContactBlock.vue b/frontend/modules/directory/components/DirectoryContactBlock.vue
index d34d828..3303fe1 100644
--- a/frontend/modules/directory/components/DirectoryContactBlock.vue
+++ b/frontend/modules/directory/components/DirectoryContactBlock.vue
@@ -1,57 +1,61 @@
 <template>
-    <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
-        <h3 class="col-span-2 text-sm font-semibold text-neutral-700">
-            {{ title }}
-        </h3>
-        <MalioButtonIcon
-            v-if="removable && !readonly"
-            icon="mdi:delete-outline"
-            variant="ghost"
-            class="absolute right-3 top-3"
-            :aria-label="$t('common.delete')"
-            @click="$emit('remove')"
-        />
+    <!-- Bloc à plat (sans box-shadow) : un filet noir 1px le sépare du suivant
+         (pas de bordure sous le dernier bloc), comme sur Starseed. -->
+    <div class="pb-5" :class="{ 'border-b border-black': !last }">
+        <div class="flex items-center justify-between">
+            <h3 class="text-[20px] font-semibold text-black">{{ title }}</h3>
+            <MalioButtonIcon
+                v-if="removable && !readonly"
+                icon="mdi:delete-outline"
+                variant="ghost"
+                button-class="p-0"
+                :aria-label="$t('common.delete')"
+                @click="$emit('remove')"
+            />
+        </div>
 
-        <MalioInputText
-            :label="$t('directory.contacts.fields.lastName')"
-            :model-value="modelValue.lastName ?? ''"
-            :readonly="readonly"
-            @update:model-value="update('lastName', $event)"
-        />
-        <MalioInputText
-            :label="$t('directory.contacts.fields.firstName')"
-            :model-value="modelValue.firstName ?? ''"
-            :readonly="readonly"
-            @update:model-value="update('firstName', $event)"
-        />
-        <MalioInputText
-            class="col-span-2"
-            :label="$t('directory.contacts.fields.jobTitle')"
-            :model-value="modelValue.jobTitle ?? ''"
-            :readonly="readonly"
-            @update:model-value="update('jobTitle', $event)"
-        />
-        <MalioInputText
-            :label="$t('directory.contacts.fields.email')"
-            :model-value="modelValue.email ?? ''"
-            :readonly="readonly"
-            :error="emailError"
-            @update:model-value="update('email', $event)"
-        />
-        <MalioInputText
-            :label="$t('directory.contacts.fields.phonePrimary')"
-            :model-value="modelValue.phonePrimary ?? ''"
-            :readonly="readonly"
-            :error="phonePrimaryError"
-            @update:model-value="update('phonePrimary', $event)"
-        />
-        <MalioInputText
-            :label="$t('directory.contacts.fields.phoneSecondary')"
-            :model-value="modelValue.phoneSecondary ?? ''"
-            :readonly="readonly"
-            :error="phoneSecondaryError"
-            @update:model-value="update('phoneSecondary', $event)"
-        />
+        <div class="mt-6 grid grid-cols-2 gap-x-[44px] gap-y-4">
+            <MalioInputText
+                :label="$t('directory.contacts.fields.lastName')"
+                :model-value="modelValue.lastName ?? ''"
+                :readonly="readonly"
+                @update:model-value="update('lastName', $event)"
+            />
+            <MalioInputText
+                :label="$t('directory.contacts.fields.firstName')"
+                :model-value="modelValue.firstName ?? ''"
+                :readonly="readonly"
+                @update:model-value="update('firstName', $event)"
+            />
+            <MalioInputText
+                class="col-span-2"
+                :label="$t('directory.contacts.fields.jobTitle')"
+                :model-value="modelValue.jobTitle ?? ''"
+                :readonly="readonly"
+                @update:model-value="update('jobTitle', $event)"
+            />
+            <MalioInputText
+                :label="$t('directory.contacts.fields.email')"
+                :model-value="modelValue.email ?? ''"
+                :readonly="readonly"
+                :error="emailError"
+                @update:model-value="update('email', $event)"
+            />
+            <MalioInputText
+                :label="$t('directory.contacts.fields.phonePrimary')"
+                :model-value="modelValue.phonePrimary ?? ''"
+                :readonly="readonly"
+                :error="phonePrimaryError"
+                @update:model-value="update('phonePrimary', $event)"
+            />
+            <MalioInputText
+                :label="$t('directory.contacts.fields.phoneSecondary')"
+                :model-value="modelValue.phoneSecondary ?? ''"
+                :readonly="readonly"
+                :error="phoneSecondaryError"
+                @update:model-value="update('phoneSecondary', $event)"
+            />
+        </div>
     </div>
 </template>
 
@@ -64,6 +68,8 @@ const props = defineProps<{
     title: string
     removable?: boolean
     readonly?: boolean
+    /** Dernier bloc de la liste : supprime le filet de séparation bas. */
+    last?: boolean
 }>()
 
 const emit = defineEmits<{
diff --git a/frontend/modules/directory/pages/directory/clients/[id].vue b/frontend/modules/directory/pages/directory/clients/[id].vue
index de6a28b..c3f7614 100644
--- a/frontend/modules/directory/pages/directory/clients/[id].vue
+++ b/frontend/modules/directory/pages/directory/clients/[id].vue
@@ -13,7 +13,7 @@
             <MalioTabList v-model="activeTab" :tabs="tabs">
                 <template #info>
                     <div class="flex flex-col gap-4 pt-6">
-                        <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
+                        <div class="grid grid-cols-2 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="info.name"
                                 class="col-span-2"
@@ -57,6 +57,7 @@
                             :model-value="contact"
                             :title="$t('directory.contacts.item', { n: i + 1 })"
                             :removable="contacts.length > 0"
+                            :last="i === contacts.length - 1"
                             @update:model-value="(v) => onContactInput(i, v)"
                             @remove="removeContact(i)"
                         />
@@ -87,6 +88,7 @@
                             :model-value="address"
                             :title="$t('directory.addresses.item', { n: i + 1 })"
                             :removable="addresses.length > 0"
+                            :last="i === addresses.length - 1"
                             @update:model-value="(v) => onAddressInput(i, v)"
                             @remove="removeAddress(i)"
                         />
diff --git a/frontend/modules/directory/pages/directory/prestataires/[id].vue b/frontend/modules/directory/pages/directory/prestataires/[id].vue
index 8d1e2b9..745d940 100644
--- a/frontend/modules/directory/pages/directory/prestataires/[id].vue
+++ b/frontend/modules/directory/pages/directory/prestataires/[id].vue
@@ -13,7 +13,7 @@
             <MalioTabList v-model="activeTab" :tabs="tabs">
                 <template #info>
                     <div class="flex flex-col gap-4 pt-6">
-                        <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
+                        <div class="grid grid-cols-2 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="info.name"
                                 class="col-span-2"
@@ -57,6 +57,7 @@
                             :model-value="contact"
                             :title="$t('directory.contacts.item', { n: i + 1 })"
                             :removable="contacts.length > 0"
+                            :last="i === contacts.length - 1"
                             @update:model-value="(v) => onContactInput(i, v)"
                             @remove="removeContact(i)"
                         />
@@ -87,6 +88,7 @@
                             :model-value="address"
                             :title="$t('directory.addresses.item', { n: i + 1 })"
                             :removable="addresses.length > 0"
+                            :last="i === addresses.length - 1"
                             @update:model-value="(v) => onAddressInput(i, v)"
                             @remove="removeAddress(i)"
                         />
diff --git a/frontend/modules/directory/pages/directory/prospects/[id].vue b/frontend/modules/directory/pages/directory/prospects/[id].vue
index 0bce0b6..9697253 100644
--- a/frontend/modules/directory/pages/directory/prospects/[id].vue
+++ b/frontend/modules/directory/pages/directory/prospects/[id].vue
@@ -13,7 +13,7 @@
             <MalioTabList v-model="activeTab" :tabs="tabs">
                 <template #info>
                     <div class="flex flex-col gap-4 pt-6">
-                        <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
+                        <div class="grid grid-cols-2 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="info.company"
                                 class="col-span-2"
@@ -72,6 +72,7 @@
                             :model-value="contact"
                             :title="$t('directory.contacts.item', { n: i + 1 })"
                             :removable="contacts.length > 0"
+                            :last="i === contacts.length - 1"
                             @update:model-value="(v) => onContactInput(i, v)"
                             @remove="removeContact(i)"
                         />
@@ -102,6 +103,7 @@
                             :model-value="address"
                             :title="$t('directory.addresses.item', { n: i + 1 })"
                             :removable="addresses.length > 0"
+                            :last="i === addresses.length - 1"
                             @update:model-value="(v) => onAddressInput(i, v)"
                             @remove="removeAddress(i)"
                         />