feat(front) : refonte à plat des blocs Information (commercial) et Prix (transporteur) (#146)

Complète la refonte **ERP-196** (blocs de formulaire à plat : sans box-shadow, titre noir, filet noir 1px) qui avait oublié deux blocs.

## Blocs concernés
- **Bloc « Information »** (Client + Fournisseur, écrans consultation / édition / création — 6 fichiers) : suppression du fond blanc, du box-shadow et du padding latéral → grille à plat pleine largeur. Pas de titre ajouté (le bloc est seul dans son onglet « Information », comme le bloc du haut du ticket de pesée).
- **Bloc « Prix » du transporteur** (`CarrierPriceBlock`) : aligné sur les blocs contact / adresse — à plat, en-tête « Prix N » en noir + poubelle (`button-class="p-0"`), filet noir 1px entre blocs (sauf le dernier via la prop `last`). Câblage `title`/`last` dans les écrans Ajouter / Modifier + clé i18n `carriers.form.price.title`.

## Hors périmètre
La table de **consultation** des prix (lecture seule, avec export) n'est pas un bloc de formulaire et garde sa présentation actuelle.

## Vérifications
- Vitest : suite complète verte (667/667).
- ESLint : clean sur l'ensemble du projet.
- Aucune modif back.

> Pas de numéro de ticket fourni — branche nommée descriptivement, à renommer/rattacher si besoin.

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

frontend/i18n/locales/fr.json

@@ -663,6 +663,7 @@
                     "confirm": "Supprimer"
                 },
                 "price": {
+                    "title": "Prix {n}",
                     "direction": "Sens",
                     "directionClient": "Client",
                     "directionSupplier": "Fournisseur",

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

@@ -93,7 +93,7 @@
             <MalioTabList v-model="activeTab" :tabs="tabs" :max-visible-tabs="5" :max-width="1100" 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)]">
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4">
                         <!-- pt-1/pb-1 alignent le textarea (h-full) en haut ET en bas
                              sur les inputs (champ 40px centre dans un h-12 -> ~4px de
                              coussin de chaque cote). -->

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

@@ -96,7 +96,7 @@
             <MalioTabList v-if="visibleTabKeys.length" v-model="activeTab" :tabs="tabs" :max-visible-tabs="5" :max-width="1100" 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)]">
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4">
                         <!-- pt-1/pb-1 alignent le textarea (h-full) en haut ET en bas
                              sur les inputs (champ 40px centre dans un h-12 -> ~4px de
                              coussin de chaque cote). -->

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

@@ -87,7 +87,7 @@
         <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)]">
+                <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4">
                     <!-- pt-1/pb-1 alignent le textarea (h-full) sur les inputs, dont
                          le champ de 40px est centre dans un conteneur h-12 (~4px de
                          coussin en HAUT et en BAS). Sans pb-1, le textarea descend ~4px

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

@@ -56,7 +56,7 @@
             <MalioTabList v-model="activeTab" :tabs="tabs" :max-visible-tabs="5" :max-width="1100" 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)]">
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4">
                         <!-- pt-1/pb-1 alignent le textarea (h-full) sur les inputs. -->
                         <MalioInputTextArea
                             v-model="information.description"

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

@@ -71,7 +71,7 @@
             <MalioTabList v-if="visibleTabKeys.length" v-model="activeTab" :tabs="tabs" :max-visible-tabs="5" :max-width="1100" 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)]">
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4">
                         <!-- pt-1/pb-1 alignent le textarea (h-full) en haut ET en bas
                              sur les inputs (champ 40px centre dans un h-12). -->
                         <MalioInputTextArea

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

@@ -51,7 +51,7 @@
         <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)]">
+                <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4">
                     <MalioInputTextArea
                         v-model="information.description"
                         :label="t('commercial.suppliers.form.information.description')"

frontend/modules/transport/components/CarrierPriceBlock.vue

@@ -1,190 +1,199 @@
 <template>
-    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-        <!-- Suppression : modal de confirmation côté parent. -->
-        <MalioButtonIcon
-            v-if="removable && !readonly && !disabled"
-            icon="mdi:delete-outline"
-            variant="ghost"
-            button-class="absolute top-3 right-3"
-            v-bind="{ ariaLabel: t('transport.carriers.form.price.remove') }"
-            @click="$emit('remove')"
-        />
-
-        <!-- RG-4.09 : sens du prix (CLIENT / FOURNISSEUR) en colonne 1 / ligne 1, radios
-             EN LIGNE (horizontaux), centrés sur la hauteur de champ (h-12) comme la
-             case « Affréter ». Pas de label de groupe. -->
-        <div>
-            <div class="flex h-12 items-center gap-6">
-                <MalioRadioButton
-                    :model-value="model.direction"
-                    :name="`price-direction-${uid}`"
-                    value="CLIENT"
-                    :label="t('transport.carriers.form.price.directionClient')"
-                    :disabled="readonly || disabled"
-                    group-class="mt-0"
-                    @update:model-value="onDirectionChange"
-                />
-                <MalioRadioButton
-                    :model-value="model.direction"
-                    :name="`price-direction-${uid}`"
-                    value="FOURNISSEUR"
-                    :label="t('transport.carriers.form.price.directionSupplier')"
-                    :disabled="readonly || disabled"
-                    group-class="mt-0"
-                    @update:model-value="onDirectionChange"
-                />
-            </div>
-            <p v-if="errors?.direction" class="ml-[2px] text-xs text-m-danger">{{ errors.direction }}</p>
+    <!-- Bloc a plat (sans box-shadow) : un filet noir 1px le separe du suivant
+         (pas de bordure sous le dernier bloc), aligne sur les blocs contact / adresse. -->
+    <div class="pb-[20px]" :class="{ 'border-b border-black': !last }">
+        <!-- En-tete : titre du bloc (noir) a gauche, poubelle de suppression a droite. -->
+        <div class="flex items-center justify-between">
+            <h2 class="text-[20px] font-semibold text-black">{{ title }}</h2>
+            <!-- Suppression : modal de confirmation côté parent. -->
+            <MalioButtonIcon
+                v-if="removable && !readonly && !disabled"
+                icon="mdi:delete-outline"
+                variant="ghost"
+                button-class="p-0"
+                v-bind="{ ariaLabel: t('transport.carriers.form.price.remove') }"
+                @click="$emit('remove')"
+            />
         </div>
 
-        <!-- Branche CLIENT (RG-4.10). -->
-        <template v-if="model.direction === 'CLIENT'">
-            <MalioSelect
-                :model-value="model.clientIri"
-                :options="clientOptions"
-                :label="t('transport.carriers.form.price.client')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.client"
-                @update:model-value="onClientChange"
-            />
-            <MalioSelect
-                :model-value="model.clientDeliveryAddressIri"
-                :options="clientAddressOptions"
-                :label="t('transport.carriers.form.price.clientDeliveryAddress')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.clientDeliveryAddress"
-                @update:model-value="(v: string | number | null) => update('clientDeliveryAddressIri', v === null ? null : String(v))"
-            />
-            <MalioSelect
-                :model-value="model.departureSiteIri"
-                :options="siteOptions"
-                :label="t('transport.carriers.form.price.departureSite')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.departureSite"
-                @update:model-value="(v: string | number | null) => update('departureSiteIri', v === null ? null : String(v))"
-            />
-        </template>
-
-        <!-- Branche FOURNISSEUR (RG-4.11). -->
-        <template v-else-if="model.direction === 'FOURNISSEUR'">
-            <MalioSelect
-                :model-value="model.supplierIri"
-                :options="supplierOptions"
-                :label="t('transport.carriers.form.price.supplier')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.supplier"
-                @update:model-value="onSupplierChange"
-            />
-            <MalioSelect
-                :model-value="model.supplierSupplyAddressIri"
-                :options="supplierAddressOptions"
-                :label="t('transport.carriers.form.price.supplierSupplyAddress')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.supplierSupplyAddress"
-                @update:model-value="(v: string | number | null) => update('supplierSupplyAddressIri', v === null ? null : String(v))"
-            />
-            <MalioSelect
-                :model-value="model.deliverySiteIri"
-                :options="siteOptions"
-                :label="t('transport.carriers.form.price.deliverySite')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.deliverySite"
-                @update:model-value="(v: string | number | null) => update('deliverySiteIri', v === null ? null : String(v))"
-            />
-        </template>
-
-        <!-- Communs (visibles dès qu'un sens est choisi). -->
-        <template v-if="model.direction !== null">
-            <!-- Contenant : Benne / Fond mouvant (radios centrés h-12, pas de label). -->
+        <!-- Grille 4 colonnes des champs du prix. -->
+        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
+            <!-- RG-4.09 : sens du prix (CLIENT / FOURNISSEUR) en colonne 1 / ligne 1, radios
+                 EN LIGNE (horizontaux), centrés sur la hauteur de champ (h-12) comme la
+                 case « Affréter ». Pas de label de groupe. -->
             <div>
-                <div class="flex h-12 items-center gap-4">
+                <div class="flex h-12 items-center gap-6">
                     <MalioRadioButton
-                        :model-value="model.containerType"
-                        :name="`price-container-${uid}`"
-                        value="BENNE"
-                        :label="t('transport.carriers.containerType.BENNE')"
+                        :model-value="model.direction"
+                        :name="`price-direction-${uid}`"
+                        value="CLIENT"
+                        :label="t('transport.carriers.form.price.directionClient')"
                         :disabled="readonly || disabled"
                         group-class="mt-0"
-                        @update:model-value="(v: string | number | boolean | null) => update('containerType', v === null ? null : String(v))"
+                        @update:model-value="onDirectionChange"
                     />
                     <MalioRadioButton
-                        :model-value="model.containerType"
-                        :name="`price-container-${uid}`"
-                        value="FOND_MOUVANT"
-                        :label="t('transport.carriers.containerType.FOND_MOUVANT')"
+                        :model-value="model.direction"
+                        :name="`price-direction-${uid}`"
+                        value="FOURNISSEUR"
+                        :label="t('transport.carriers.form.price.directionSupplier')"
                         :disabled="readonly || disabled"
                         group-class="mt-0"
-                        @update:model-value="(v: string | number | boolean | null) => update('containerType', v === null ? null : String(v))"
+                        @update:model-value="onDirectionChange"
                     />
                 </div>
-                <p v-if="errors?.containerType" class="ml-[2px] text-xs text-m-danger">{{ errors.containerType }}</p>
+                <p v-if="errors?.direction" class="ml-[2px] text-xs text-m-danger">{{ errors.direction }}</p>
             </div>
 
-            <!-- Tarification : Forfait / Tonne (radios centrés h-12, pas de label). -->
-            <div>
-                <div class="flex h-12 items-center gap-4">
-                    <MalioRadioButton
-                        :model-value="model.pricingUnit"
-                        :name="`price-unit-${uid}`"
-                        value="FORFAIT"
-                        :label="t('transport.carriers.form.price.pricingForfait')"
-                        :disabled="readonly || disabled"
-                        group-class="mt-0"
-                        @update:model-value="(v: string | number | boolean | null) => update('pricingUnit', v === null ? null : String(v))"
-                    />
-                    <MalioRadioButton
-                        :model-value="model.pricingUnit"
-                        :name="`price-unit-${uid}`"
-                        value="TONNE"
-                        :label="t('transport.carriers.form.price.pricingTonne')"
-                        :disabled="readonly || disabled"
-                        group-class="mt-0"
-                        @update:model-value="(v: string | number | boolean | null) => update('pricingUnit', v === null ? null : String(v))"
-                    />
+            <!-- Branche CLIENT (RG-4.10). -->
+            <template v-if="model.direction === 'CLIENT'">
+                <MalioSelect
+                    :model-value="model.clientIri"
+                    :options="clientOptions"
+                    :label="t('transport.carriers.form.price.client')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.client"
+                    @update:model-value="onClientChange"
+                />
+                <MalioSelect
+                    :model-value="model.clientDeliveryAddressIri"
+                    :options="clientAddressOptions"
+                    :label="t('transport.carriers.form.price.clientDeliveryAddress')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.clientDeliveryAddress"
+                    @update:model-value="(v: string | number | null) => update('clientDeliveryAddressIri', v === null ? null : String(v))"
+                />
+                <MalioSelect
+                    :model-value="model.departureSiteIri"
+                    :options="siteOptions"
+                    :label="t('transport.carriers.form.price.departureSite')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.departureSite"
+                    @update:model-value="(v: string | number | null) => update('departureSiteIri', v === null ? null : String(v))"
+                />
+            </template>
+
+            <!-- Branche FOURNISSEUR (RG-4.11). -->
+            <template v-else-if="model.direction === 'FOURNISSEUR'">
+                <MalioSelect
+                    :model-value="model.supplierIri"
+                    :options="supplierOptions"
+                    :label="t('transport.carriers.form.price.supplier')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.supplier"
+                    @update:model-value="onSupplierChange"
+                />
+                <MalioSelect
+                    :model-value="model.supplierSupplyAddressIri"
+                    :options="supplierAddressOptions"
+                    :label="t('transport.carriers.form.price.supplierSupplyAddress')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.supplierSupplyAddress"
+                    @update:model-value="(v: string | number | null) => update('supplierSupplyAddressIri', v === null ? null : String(v))"
+                />
+                <MalioSelect
+                    :model-value="model.deliverySiteIri"
+                    :options="siteOptions"
+                    :label="t('transport.carriers.form.price.deliverySite')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.deliverySite"
+                    @update:model-value="(v: string | number | null) => update('deliverySiteIri', v === null ? null : String(v))"
+                />
+            </template>
+
+            <!-- Communs (visibles dès qu'un sens est choisi). -->
+            <template v-if="model.direction !== null">
+                <!-- Contenant : Benne / Fond mouvant (radios centrés h-12, pas de label). -->
+                <div>
+                    <div class="flex h-12 items-center gap-4">
+                        <MalioRadioButton
+                            :model-value="model.containerType"
+                            :name="`price-container-${uid}`"
+                            value="BENNE"
+                            :label="t('transport.carriers.containerType.BENNE')"
+                            :disabled="readonly || disabled"
+                            group-class="mt-0"
+                            @update:model-value="(v: string | number | boolean | null) => update('containerType', v === null ? null : String(v))"
+                        />
+                        <MalioRadioButton
+                            :model-value="model.containerType"
+                            :name="`price-container-${uid}`"
+                            value="FOND_MOUVANT"
+                            :label="t('transport.carriers.containerType.FOND_MOUVANT')"
+                            :disabled="readonly || disabled"
+                            group-class="mt-0"
+                            @update:model-value="(v: string | number | boolean | null) => update('containerType', v === null ? null : String(v))"
+                        />
+                    </div>
+                    <p v-if="errors?.containerType" class="ml-[2px] text-xs text-m-danger">{{ errors.containerType }}</p>
                 </div>
-                <p v-if="errors?.pricingUnit" class="ml-[2px] text-xs text-m-danger">{{ errors.pricingUnit }}</p>
-            </div>
 
-            <MalioInputAmount
-                :model-value="model.price"
-                :label="t('transport.carriers.form.price.price')"
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.price"
-                @update:model-value="(v: string) => update('price', v)"
-            />
+                <!-- Tarification : Forfait / Tonne (radios centrés h-12, pas de label). -->
+                <div>
+                    <div class="flex h-12 items-center gap-4">
+                        <MalioRadioButton
+                            :model-value="model.pricingUnit"
+                            :name="`price-unit-${uid}`"
+                            value="FORFAIT"
+                            :label="t('transport.carriers.form.price.pricingForfait')"
+                            :disabled="readonly || disabled"
+                            group-class="mt-0"
+                            @update:model-value="(v: string | number | boolean | null) => update('pricingUnit', v === null ? null : String(v))"
+                        />
+                        <MalioRadioButton
+                            :model-value="model.pricingUnit"
+                            :name="`price-unit-${uid}`"
+                            value="TONNE"
+                            :label="t('transport.carriers.form.price.pricingTonne')"
+                            :disabled="readonly || disabled"
+                            group-class="mt-0"
+                            @update:model-value="(v: string | number | boolean | null) => update('pricingUnit', v === null ? null : String(v))"
+                        />
+                    </div>
+                    <p v-if="errors?.pricingUnit" class="ml-[2px] text-xs text-m-danger">{{ errors.pricingUnit }}</p>
+                </div>
 
-            <MalioSelect
-                :model-value="model.priceState"
-                :options="priceStateOptions"
-                :label="t('transport.carriers.form.price.priceState')"
-                empty-option-label=""
-                :required="true"
-                :readonly="readonly"
-                :disabled="disabled"
-                :error="errors?.priceState"
-                @update:model-value="(v: string | number | null) => update('priceState', v === null ? null : String(v))"
-            />
-        </template>
+                <MalioInputAmount
+                    :model-value="model.price"
+                    :label="t('transport.carriers.form.price.price')"
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.price"
+                    @update:model-value="(v: string) => update('price', v)"
+                />
+
+                <MalioSelect
+                    :model-value="model.priceState"
+                    :options="priceStateOptions"
+                    :label="t('transport.carriers.form.price.priceState')"
+                    empty-option-label=""
+                    :required="true"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :error="errors?.priceState"
+                    @update:model-value="(v: string | number | null) => update('priceState', v === null ? null : String(v))"
+                />
+            </template>
+        </div>
     </div>
 </template>
 
@@ -200,6 +209,10 @@ interface SelectOption {
 const props = defineProps<{
     /** Brouillon du prix (v-model). */
     modelValue: CarrierPriceFormDraft
+    /** Titre du bloc (ex: « Prix 1 »). */
+    title: string
+    /** Dernier bloc de la liste : supprime le filet de separation bas. */
+    last?: boolean
     /** Clients disponibles (IRI en value). */
     clientOptions: SelectOption[]
     /** Fournisseurs disponibles (IRI en value). */

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

@@ -182,10 +182,12 @@
                             v-for="(price, index) in prices"
                             :key="index"
                             :model-value="price"
+                            :title="t('transport.carriers.form.price.title', { n: index + 1 })"
                             :client-options="clientOptions"
                             :supplier-options="supplierOptions"
                             :site-options="siteOptions"
                             removable
+                            :last="index === prices.length - 1"
                             :errors="priceErrors[index]"
                             @update:model-value="(v) => prices[index] = v"
                             @remove="askRemovePrice(index)"

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

@@ -244,11 +244,13 @@
                         v-for="(price, index) in prices"
                         :key="index"
                         :model-value="price"
+                        :title="t('transport.carriers.form.price.title', { n: index + 1 })"
                         :client-options="clientOptions"
                         :supplier-options="supplierOptions"
                         :site-options="siteOptions"
                         :removable="!isValidated('prices')"
                         :disabled="isValidated('prices')"
+                        :last="index === prices.length - 1"
                         :errors="priceErrors[index]"
                         @update:model-value="(v) => prices[index] = v"
                         @remove="askRemovePrice(index)"