From 5109b5f57ad9bd8e5acc8311fd1ff11d8c4ad52d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 17 Jun 2026 11:50:11 +0200
Subject: [PATCH] =?UTF-8?q?fix(transport)=20:=20tableau=20prix=20consultat?=
 =?UTF-8?q?ion=20=E2=80=94=20police/bordures/radius=20align=C3=A9s=20Malio?=
 =?UTF-8?q?DataTable,=20colonne=20groupe=20en=20=C3=A9pine=20(ERP-170)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../transport/pages/carriers/[id]/index.vue   | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/modules/transport/pages/carriers/[id]/index.vue b/frontend/modules/transport/pages/carriers/[id]/index.vue
index 1e3b4c0..2c57c57 100644
--- a/frontend/modules/transport/pages/carriers/[id]/index.vue
+++ b/frontend/modules/transport/pages/carriers/[id]/index.vue
@@ -102,17 +102,21 @@
                 <!-- Prix : tableau présentationnel regroupé par contenant + export. -->
                 <template #prices>
                     <div class="mt-12 flex flex-col gap-6">
-                        <table class="w-full border-collapse border border-m-muted/40 text-left text-sm">
+                        <!-- Tailles de police alignées sur MalioDataTable (header 16px /
+                             corps 14px). Colonne de groupe (Fond Mouvant / Benne) =
+                             épine de gauche continue : son en-tête (coin) reste blanc,
+                             pas dans le fond gris du header ; libellé fusionné (rowspan). -->
+                        <table class="w-full border-separate border-spacing-0 overflow-hidden rounded-malio border border-black text-left text-black">
                             <thead>
-                                <tr class="border-b border-black bg-m-muted/10">
-                                    <th class="px-3 py-2"></th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
-                                    <th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
+                                <tr>
+                                    <th class="border-r border-black px-3 py-3"></th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
+                                    <th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -120,27 +124,28 @@
                                     <tr
                                         v-for="(row, i) in group.rows"
                                         :key="`${gi}-${i}`"
-                                        :class="i === group.rows.length - 1 ? 'border-b border-black' : 'border-b border-m-muted/30'"
+                                        :class="i === group.rows.length - 1 ? '[&>td]:border-b [&>td]:border-black' : '[&>td]:border-b [&>td]:border-m-muted/30'"
                                     >
-                                        <!-- Cellule de groupe fusionnée (rowspan), centrée verticalement. -->
+                                        <!-- Cellule de groupe fusionnée (rowspan), centrée verticalement,
+                                             toujours séparateur noir en bas (entre groupes). -->
                                         <td
                                             v-if="i === 0"
                                             :rowspan="group.rows.length"
-                                            class="border-r border-black px-3 py-2 text-center align-middle font-medium"
+                                            class="!border-b-black border-r border-black px-3 text-center align-middle text-[14px] font-medium"
                                         >
                                             {{ group.label }}
                                         </td>
-                                        <td class="px-3 py-2">{{ headerTitle }}</td>
-                                        <td class="px-3 py-2">{{ row.apro }}</td>
-                                        <td class="px-3 py-2">{{ row.delivery }}</td>
-                                        <td class="px-3 py-2">{{ row.forfait }}</td>
-                                        <td class="px-3 py-2">{{ row.tonne }}</td>
-                                        <td class="px-3 py-2">{{ row.indexation }}</td>
-                                        <td class="px-3 py-2">{{ row.state }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ headerTitle }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ row.apro }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ row.delivery }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ row.forfait }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ row.tonne }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ row.indexation }}</td>
+                                        <td class="px-3 py-4 text-[14px]">{{ row.state }}</td>
                                     </tr>
                                 </template>
                                 <tr v-if="!hasPrices">
-                                    <td colspan="8" class="px-3 py-4 text-center text-m-muted">
+                                    <td colspan="8" class="px-3 py-4 text-center text-[14px] text-m-muted">
                                         {{ t('transport.carriers.consultation.price.empty') }}
                                     </td>
                                 </tr>