From bc2ee7aac0ab075b32bd365c975d9a2d46c82fc9 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 10:47:15 +0200
Subject: [PATCH] style(front) : ajustements layout blocs contact/adresse
 (ERP-63)

- Bloc Contact aligne sur le bloc Adresse : carte ombree en grille, bouton
  supprimer en absolute haut-droite (mdi:delete-outline).
- Bloc Adresse : champs Adresse et Adresse complementaire sur 2 colonnes
  (col-span-2 via wrapper, car les inputs Malio renvoient class sur l'input
  interne) ; cellule vide pour renvoyer Categorie a la ligne suivante.
- Grilles alignees (grid-cols-4, gaps homogenes).
---
 .../components/ClientAddressBlock.vue         |  66 +++++-----
 .../components/ClientContactBlock.vue         | 113 +++++++++---------
 .../modules/commercial/pages/clients/new.vue  |   4 +-
 3 files changed, 95 insertions(+), 88 deletions(-)

diff --git a/frontend/modules/commercial/components/ClientAddressBlock.vue b/frontend/modules/commercial/components/ClientAddressBlock.vue
index 22d3591..53a93da 100644
--- a/frontend/modules/commercial/components/ClientAddressBlock.vue
+++ b/frontend/modules/commercial/components/ClientAddressBlock.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-5 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
         <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
         <MalioButtonIcon
             v-if="removable && !readonly"
@@ -35,6 +35,10 @@
             @update:model-value="(v: boolean) => toggleFlag('isBilling', v)"
         />
 
+        <!-- Cellule vide : laisse un trou en position 4 (ligne 1) pour que
+             Categorie reparte au debut de la ligne suivante. -->
+        <div aria-hidden="true" />
+
         <MalioSelectCheckbox
             :model-value="model.categoryIris"
             :options="categoryOptions"
@@ -79,33 +83,41 @@
             @update:model-value="(v: string) => update('city', v)"
         />
 
-        <!-- Adresse : saisie assistee (BAN) ou libre en mode degrade. -->
-        <MalioInputAutocomplete
-            v-if="!degraded"
-            :model-value="model.street"
-            :options="addressOptions"
-            :loading="addressLoading"
-            :min-search-length="3"
-            :label="t('commercial.clients.form.address.street')"
-            :readonly="readonly"
-            @update:model-value="(v: string | number | null) => update('street', v === null ? null : String(v))"
-            @search="onAddressSearch"
-            @select="onAddressSelect"
-        />
-        <MalioInputText
-            v-else
-            :model-value="model.street"
-            :label="t('commercial.clients.form.address.street')"
-            :readonly="readonly"
-            @update:model-value="(v: string) => update('street', v)"
-        />
+        <!-- Adresse + Adresse complementaire sur 2 colonnes : on wrappe car
+             MalioInputText/Autocomplete (inheritAttrs:false) renvoient `class`
+             sur l'input interne, pas sur la cellule de grille. Le wrapper porte
+             le col-span-2, le champ le remplit (w-full). -->
+        <div class="col-span-2">
+            <!-- Adresse : saisie assistee (BAN) ou libre en mode degrade. -->
+            <MalioInputAutocomplete
+                v-if="!degraded"
+                :model-value="model.street"
+                :options="addressOptions"
+                :loading="addressLoading"
+                :min-search-length="3"
+                :label="t('commercial.clients.form.address.street')"
+                :readonly="readonly"
+                @update:model-value="(v: string | number | null) => update('street', v === null ? null : String(v))"
+                @search="onAddressSearch"
+                @select="onAddressSelect"
+            />
+            <MalioInputText
+                v-else
+                :model-value="model.street"
+                :label="t('commercial.clients.form.address.street')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('street', v)"
+            />
+        </div>
 
-        <MalioInputText
-            :model-value="model.streetComplement"
-            :label="t('commercial.clients.form.address.streetComplement')"
-            :readonly="readonly"
-            @update:model-value="(v: string) => update('streetComplement', v)"
-        />
+        <div class="col-span-2">
+            <MalioInputText
+                :model-value="model.streetComplement"
+                :label="t('commercial.clients.form.address.streetComplement')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('streetComplement', v)"
+            />
+        </div>
 
         <!-- Sites Starseed : cases a cocher inline (>= 1 obligatoire, RG-1.10). -->
         <div class="flex justify-between">
diff --git a/frontend/modules/commercial/components/ClientContactBlock.vue b/frontend/modules/commercial/components/ClientContactBlock.vue
index cc0c493..23c2bfd 100644
--- a/frontend/modules/commercial/components/ClientContactBlock.vue
+++ b/frontend/modules/commercial/components/ClientContactBlock.vue
@@ -1,64 +1,59 @@
 <template>
-    <div class="rounded-md border border-neutral-200 bg-white p-6">
-        <div class="mb-4 flex items-center justify-between">
-            <h3 class="text-lg font-bold">{{ title }}</h3>
-            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee
-                 si non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule. -->
-            <!-- ariaLabel passe via v-bind objet : la prop du composant est
-                 camelCase (aria-* serait traite en attribut HTML, jamais en prop). -->
-            <MalioButtonIcon
-                v-if="removable && !readonly"
-                icon="mdi:trash-can-outline"
-                variant="ghost"
-                v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
-                @click="$emit('remove')"
-            />
-        </div>
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+             non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
+             ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:delete-outline"
+            variant="ghost"
+            button-class="absolute top-3 right-3"
+            v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
+            @click="$emit('remove')"
+        />
 
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <MalioInputText
-                :model-value="model.lastName"
-                :label="t('commercial.clients.form.contact.lastName')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('lastName', v)"
-            />
-            <MalioInputText
-                :model-value="model.firstName"
-                :label="t('commercial.clients.form.contact.firstName')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('firstName', v)"
-            />
-            <MalioInputText
-                :model-value="model.jobTitle"
-                :label="t('commercial.clients.form.contact.jobTitle')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('jobTitle', v)"
-            />
-            <MalioInputEmail
-                :model-value="model.email"
-                :label="t('commercial.clients.form.contact.email')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('email', v)"
-            />
-            <MalioInputPhone
-                :model-value="model.phonePrimary"
-                :label="t('commercial.clients.form.contact.phonePrimary')"
-                :mask="PHONE_MASK"
-                :readonly="readonly"
-                :addable="!model.hasSecondaryPhone && !readonly"
-                :add-button-label="t('commercial.clients.form.contact.addPhone')"
-                @update:model-value="(v: string) => update('phonePrimary', v)"
-                @add="revealSecondaryPhone"
-            />
-            <MalioInputPhone
-                v-if="model.hasSecondaryPhone"
-                :model-value="model.phoneSecondary"
-                :label="t('commercial.clients.form.contact.phoneSecondary')"
-                :mask="PHONE_MASK"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('phoneSecondary', v)"
-            />
-        </div>
+        <MalioInputText
+            :model-value="model.lastName"
+            :label="t('commercial.clients.form.contact.lastName')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('lastName', v)"
+        />
+        <MalioInputText
+            :model-value="model.firstName"
+            :label="t('commercial.clients.form.contact.firstName')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('firstName', v)"
+        />
+        <MalioInputText
+            :model-value="model.jobTitle"
+            :label="t('commercial.clients.form.contact.jobTitle')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('jobTitle', v)"
+        />
+        <MalioInputEmail
+            :model-value="model.email"
+            :label="t('commercial.clients.form.contact.email')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('email', v)"
+        />
+        <MalioInputPhone
+            :model-value="model.phonePrimary"
+            :label="t('commercial.clients.form.contact.phonePrimary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :addable="!model.hasSecondaryPhone && !readonly"
+            :add-button-label="t('commercial.clients.form.contact.addPhone')"
+            @update:model-value="(v: string) => update('phonePrimary', v)"
+            @add="revealSecondaryPhone"
+        />
+        <MalioInputPhone
+            v-if="model.hasSecondaryPhone"
+            :model-value="model.phoneSecondary"
+            :label="t('commercial.clients.form.contact.phoneSecondary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('phoneSecondary', v)"
+        />
     </div>
 </template>
 
diff --git a/frontend/modules/commercial/pages/clients/new.vue b/frontend/modules/commercial/pages/clients/new.vue
index b7768ea..f651225 100644
--- a/frontend/modules/commercial/pages/clients/new.vue
+++ b/frontend/modules/commercial/pages/clients/new.vue
@@ -16,7 +16,7 @@
              Sans validation de ce bloc, les onglets restent inaccessibles. Au
              succes du POST, les champs passent en lecture seule et on bascule
              automatiquement sur l'onglet Information. -->
-        <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-5">
+        <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')"
@@ -105,7 +105,7 @@
         <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
             <!-- Onglet Information -->
             <template #information>
-                <div class="mt-12 grid grid-cols-3 gap-x-[80px] gap-y-5 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
                     <!-- pt-1 : aligne le bord superieur du textarea sur celui des
                          inputs (centres dans un conteneur h-12, soit ~4px de retrait haut). -->
                     <MalioInputTextArea