From bd9fbe02191fd5a83d503654f6663519e12e5147 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 24 Jun 2026 17:47:35 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20refonte=20du=20bloc=20comptabilit?=
 =?UTF-8?q?=C3=A9=20=E2=80=94=20infos=20titr=C3=A9es=20+=20RIB=20s=C3=A9pa?=
 =?UTF-8?q?r=C3=A9s=20(ERP-196)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/i18n/locales/fr.json                 |  5 +++
 .../commercial/pages/clients/[id]/edit.vue    | 34 +++++++++++-------
 .../commercial/pages/clients/[id]/index.vue   | 15 +++++---
 .../modules/commercial/pages/clients/new.vue  | 36 +++++++++++--------
 .../commercial/pages/suppliers/[id]/edit.vue  | 34 +++++++++++-------
 .../commercial/pages/suppliers/[id]/index.vue | 15 +++++---
 .../commercial/pages/suppliers/new.vue        | 34 +++++++++++-------
 .../technique/pages/providers/[id]/edit.vue   | 34 +++++++++++-------
 .../technique/pages/providers/[id]/index.vue  | 15 +++++---
 .../modules/technique/pages/providers/new.vue | 34 +++++++++++-------
 10 files changed, 162 insertions(+), 94 deletions(-)

diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 76560f1..5b0bc25 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -183,6 +183,7 @@
                     "degraded": "Service d'adresse indisponible : saisie de la ville et de l'adresse en mode libre."
                 },
                 "accounting": {
+                    "infoTitle": "Informations",
                     "siren": "SIREN",
                     "accountNumber": "Numéro de compte",
                     "tvaMode": "Mode de TVA",
@@ -190,6 +191,7 @@
                     "paymentDelay": "Délai de règlement",
                     "paymentType": "Type de règlement",
                     "bank": "Banque",
+                    "ribTitle": "RIB {n}",
                     "ribLabel": "Libellé",
                     "ribBic": "BIC",
                     "ribIban": "IBAN",
@@ -350,6 +352,7 @@
                     "degraded": "Service d'adresse indisponible : saisie de la ville et de l'adresse en mode libre."
                 },
                 "accounting": {
+                    "infoTitle": "Informations",
                     "siren": "SIREN",
                     "accountNumber": "Numéro de compte",
                     "tvaMode": "Mode de TVA",
@@ -467,6 +470,7 @@
                     "degraded": "Service d'adresse indisponible : saisie de la ville et de l'adresse en mode libre."
                 },
                 "accounting": {
+                    "infoTitle": "Informations",
                     "siren": "SIREN",
                     "accountNumber": "Numéro de compte",
                     "tvaMode": "Mode de TVA",
@@ -474,6 +478,7 @@
                     "paymentDelay": "Délai de règlement",
                     "paymentType": "Type de règlement",
                     "bank": "Banque",
+                    "ribTitle": "RIB {n}",
                     "ribLabel": "Libellé",
                     "ribBic": "BIC",
                     "ribIban": "IBAN",
diff --git a/frontend/modules/commercial/pages/clients/[id]/edit.vue b/frontend/modules/commercial/pages/clients/[id]/edit.vue
index b75b2b0..a672600 100644
--- a/frontend/modules/commercial/pages/clients/[id]/edit.vue
+++ b/frontend/modules/commercial/pages/clients/[id]/edit.vue
@@ -246,8 +246,10 @@
                      editable uniquement si accounting.manage). -->
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
-                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                        <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.clients.form.accounting.infoTitle') }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="accounting.siren"
                                     :label="t('commercial.clients.form.accounting.siren')"
@@ -316,21 +318,27 @@
                             </div>
                         </div>
 
-                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-1.13). -->
+                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-1.13).
+                             Titre « RIB N » + poubelle, filet de separation sauf sous le dernier. -->
                         <div
                             v-for="(rib, index) in visibleRibs"
                             :key="rib.id ?? `new-${index}`"
-                            class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                            class="pb-[20px]"
+                            :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                         >
-                            <MalioButtonIcon
-                                v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
-                                icon="mdi:delete-outline"
-                                variant="ghost"
-                                button-class="absolute top-3 right-3"
-                                v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
-                                @click="askRemoveRib(index)"
-                            />
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <!-- En-tete : titre du bloc (noir) a gauche, poubelle a droite. -->
+                            <div class="flex items-center justify-between">
+                                <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.clients.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                                <MalioButtonIcon
+                                    v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
+                                    icon="mdi:delete-outline"
+                                    variant="ghost"
+                                    button-class="p-0"
+                                    v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
+                                    @click="askRemoveRib(index)"
+                                />
+                            </div>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="rib.label"
                                     :label="t('commercial.clients.form.accounting.ribLabel')"
diff --git a/frontend/modules/commercial/pages/clients/[id]/index.vue b/frontend/modules/commercial/pages/clients/[id]/index.vue
index d43f793..8e96b5b 100644
--- a/frontend/modules/commercial/pages/clients/[id]/index.vue
+++ b/frontend/modules/commercial/pages/clients/[id]/index.vue
@@ -185,8 +185,10 @@
                 <!-- Onglet Comptabilite (present uniquement si accounting.view). -->
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
-                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                        <div class="pb-[20px]" :class="{ 'border-b border-black': ribs.length > 0 }">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.clients.form.accounting.infoTitle') }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-if="isFilled(accounting.siren)"
                                     :model-value="accounting.siren"
@@ -241,13 +243,16 @@
                             </div>
                         </div>
 
-                        <!-- Blocs RIB (0..n), lecture seule. -->
+                        <!-- Blocs RIB (0..n), lecture seule.
+                             Titre « RIB N », filet de separation sauf sous le dernier. -->
                         <div
                             v-for="(rib, index) in ribs"
                             :key="rib.id ?? index"
-                            class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                            class="pb-[20px]"
+                            :class="{ 'border-b border-black': index !== ribs.length - 1 }"
                         >
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.clients.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-if="isFilled(rib.label)"
                                     :model-value="rib.label"
diff --git a/frontend/modules/commercial/pages/clients/new.vue b/frontend/modules/commercial/pages/clients/new.vue
index 53489c2..f402492 100644
--- a/frontend/modules/commercial/pages/clients/new.vue
+++ b/frontend/modules/commercial/pages/clients/new.vue
@@ -244,8 +244,10 @@
             <!-- Onglet Comptabilite (present uniquement si accounting.view) -->
             <template v-if="canAccountingView" #accounting>
                 <div class="mt-12 flex flex-col gap-6">
-                    <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                    <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                    <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                        <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.clients.form.accounting.infoTitle') }}</h2>
+                        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="accounting.siren"
                                 :label="t('commercial.clients.form.accounting.siren')"
@@ -314,22 +316,28 @@
                         </div>
                     </div>
 
-                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-1.13). -->
+                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-1.13).
+                         Titre « RIB N » + poubelle, filet de separation sauf sous le dernier. -->
                     <div
                         v-for="(rib, index) in visibleRibs"
                         :key="index"
-                        class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                        class="pb-[20px]"
+                        :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                     >
-                        <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
-                        <MalioButtonIcon
-                            v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
-                            icon="mdi:delete-outline"
-                            variant="ghost"
-                            button-class="absolute top-3 right-3"
-                            v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
-                            @click="askRemoveRib(index)"
-                        />
-                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- En-tete : titre du bloc (noir) a gauche, poubelle a droite. -->
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.clients.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                            <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+                            <MalioButtonIcon
+                                v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
+                                icon="mdi:delete-outline"
+                                variant="ghost"
+                                button-class="p-0"
+                                v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
+                                @click="askRemoveRib(index)"
+                            />
+                        </div>
+                        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="rib.label"
                                 :label="t('commercial.clients.form.accounting.ribLabel')"
diff --git a/frontend/modules/commercial/pages/suppliers/[id]/edit.vue b/frontend/modules/commercial/pages/suppliers/[id]/edit.vue
index f6e0927..32050cd 100644
--- a/frontend/modules/commercial/pages/suppliers/[id]/edit.vue
+++ b/frontend/modules/commercial/pages/suppliers/[id]/edit.vue
@@ -215,8 +215,10 @@
                      editable uniquement si accounting.manage). -->
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
-                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                        <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.suppliers.form.accounting.infoTitle') }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="accounting.siren"
                                     :label="t('commercial.suppliers.form.accounting.siren')"
@@ -285,21 +287,27 @@
                             </div>
                         </div>
 
-                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-2.08). -->
+                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-2.08).
+                             Titre « RIB N » + poubelle, filet de separation sauf sous le dernier. -->
                         <div
                             v-for="(rib, index) in visibleRibs"
                             :key="rib.id ?? `new-${index}`"
-                            class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                            class="pb-[20px]"
+                            :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                         >
-                            <MalioButtonIcon
-                                v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
-                                icon="mdi:delete-outline"
-                                variant="ghost"
-                                button-class="absolute top-3 right-3"
-                                v-bind="{ ariaLabel: t('commercial.suppliers.form.accounting.removeRib') }"
-                                @click="askRemoveRib(index)"
-                            />
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <!-- En-tete : titre du bloc (noir) a gauche, poubelle a droite. -->
+                            <div class="flex items-center justify-between">
+                                <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.suppliers.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                                <MalioButtonIcon
+                                    v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
+                                    icon="mdi:delete-outline"
+                                    variant="ghost"
+                                    button-class="p-0"
+                                    v-bind="{ ariaLabel: t('commercial.suppliers.form.accounting.removeRib') }"
+                                    @click="askRemoveRib(index)"
+                                />
+                            </div>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="rib.label"
                                     :label="t('commercial.suppliers.form.accounting.ribLabel')"
diff --git a/frontend/modules/commercial/pages/suppliers/[id]/index.vue b/frontend/modules/commercial/pages/suppliers/[id]/index.vue
index 6c43a33..35fc71a 100644
--- a/frontend/modules/commercial/pages/suppliers/[id]/index.vue
+++ b/frontend/modules/commercial/pages/suppliers/[id]/index.vue
@@ -166,8 +166,10 @@
                 <!-- Onglet Comptabilite (present uniquement si accounting.view). -->
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
-                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                        <div class="pb-[20px]" :class="{ 'border-b border-black': ribs.length > 0 }">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.suppliers.form.accounting.infoTitle') }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-if="isFilled(accounting.siren)"
                                     :model-value="accounting.siren"
@@ -222,13 +224,16 @@
                             </div>
                         </div>
 
-                        <!-- Blocs RIB (0..n), lecture seule. -->
+                        <!-- Blocs RIB (0..n), lecture seule.
+                             Titre « RIB N », filet de separation sauf sous le dernier. -->
                         <div
                             v-for="(rib, index) in ribs"
                             :key="rib.id ?? index"
-                            class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                            class="pb-[20px]"
+                            :class="{ 'border-b border-black': index !== ribs.length - 1 }"
                         >
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.suppliers.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-if="isFilled(rib.label)"
                                     :model-value="rib.label"
diff --git a/frontend/modules/commercial/pages/suppliers/new.vue b/frontend/modules/commercial/pages/suppliers/new.vue
index 40c63dd..ee7a695 100644
--- a/frontend/modules/commercial/pages/suppliers/new.vue
+++ b/frontend/modules/commercial/pages/suppliers/new.vue
@@ -212,8 +212,10 @@
             <!-- Onglet Comptabilite (present uniquement si accounting.view) -->
             <template v-if="canAccountingView" #accounting>
                 <div class="mt-12 flex flex-col gap-6">
-                    <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                    <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                    <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                        <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.suppliers.form.accounting.infoTitle') }}</h2>
+                        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="accounting.siren"
                                 :label="t('commercial.suppliers.form.accounting.siren')"
@@ -282,21 +284,27 @@
                         </div>
                     </div>
 
-                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-2.08). -->
+                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-2.08).
+                         Titre « RIB N » + poubelle, filet de separation sauf sous le dernier. -->
                     <div
                         v-for="(rib, index) in visibleRibs"
                         :key="index"
-                        class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                        class="pb-[20px]"
+                        :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                     >
-                        <MalioButtonIcon
-                            v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
-                            icon="mdi:delete-outline"
-                            variant="ghost"
-                            button-class="absolute top-3 right-3"
-                            v-bind="{ ariaLabel: t('commercial.suppliers.form.accounting.removeRib') }"
-                            @click="askRemoveRib(index)"
-                        />
-                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- En-tete : titre du bloc (noir) a gauche, poubelle a droite. -->
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('commercial.suppliers.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                            <MalioButtonIcon
+                                v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
+                                icon="mdi:delete-outline"
+                                variant="ghost"
+                                button-class="p-0"
+                                v-bind="{ ariaLabel: t('commercial.suppliers.form.accounting.removeRib') }"
+                                @click="askRemoveRib(index)"
+                            />
+                        </div>
+                        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="rib.label"
                                 :label="t('commercial.suppliers.form.accounting.ribLabel')"
diff --git a/frontend/modules/technique/pages/providers/[id]/edit.vue b/frontend/modules/technique/pages/providers/[id]/edit.vue
index 9e6d62a..a7cabdd 100644
--- a/frontend/modules/technique/pages/providers/[id]/edit.vue
+++ b/frontend/modules/technique/pages/providers/[id]/edit.vue
@@ -140,8 +140,10 @@
                 <!-- Onglet Comptabilite (present si accounting.view ; editable si manage). -->
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
-                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                        <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('technique.providers.form.accounting.infoTitle') }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="accounting.siren"
                                     :label="t('technique.providers.form.accounting.siren')"
@@ -210,21 +212,27 @@
                             </div>
                         </div>
 
-                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-3.08). -->
+                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-3.08).
+                             Titre « RIB N » + poubelle, filet de separation sauf sous le dernier. -->
                         <div
                             v-for="(rib, index) in visibleRibs"
                             :key="index"
-                            class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                            class="pb-[20px]"
+                            :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                         >
-                            <MalioButtonIcon
-                                v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
-                                icon="mdi:delete-outline"
-                                variant="ghost"
-                                button-class="absolute top-3 right-3"
-                                v-bind="{ ariaLabel: t('technique.providers.form.accounting.removeRib') }"
-                                @click="askRemoveRib(index)"
-                            />
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <!-- En-tete : titre du bloc (noir) a gauche, poubelle a droite. -->
+                            <div class="flex items-center justify-between">
+                                <h2 class="text-[20px] font-semibold text-black">{{ t('technique.providers.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                                <MalioButtonIcon
+                                    v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
+                                    icon="mdi:delete-outline"
+                                    variant="ghost"
+                                    button-class="p-0"
+                                    v-bind="{ ariaLabel: t('technique.providers.form.accounting.removeRib') }"
+                                    @click="askRemoveRib(index)"
+                                />
+                            </div>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText
                                     v-model="rib.label"
                                     :label="t('technique.providers.form.accounting.ribLabel')"
diff --git a/frontend/modules/technique/pages/providers/[id]/index.vue b/frontend/modules/technique/pages/providers/[id]/index.vue
index ead77bb..37d3692 100644
--- a/frontend/modules/technique/pages/providers/[id]/index.vue
+++ b/frontend/modules/technique/pages/providers/[id]/index.vue
@@ -112,8 +112,10 @@
                 <!-- Onglet Comptabilite (present uniquement si accounting.view). -->
                 <template v-if="canAccountingView" #accounting>
                     <div class="mt-12 flex flex-col gap-6">
-                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                        <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('technique.providers.form.accounting.infoTitle') }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText v-if="isFilled(accounting.siren)" :model-value="accounting.siren" :label="t('technique.providers.form.accounting.siren')" disabled />
                                 <MalioInputText v-if="isFilled(accounting.accountNumber)" :model-value="accounting.accountNumber" :label="t('technique.providers.form.accounting.accountNumber')" disabled />
                                 <MalioSelect v-if="isFilled(accounting.tvaModeIri)" :model-value="accounting.tvaModeIri" :options="tvaModeOptions" :label="t('technique.providers.form.accounting.tvaMode')" disabled empty-option-label="" />
@@ -124,13 +126,16 @@
                             </div>
                         </div>
 
-                        <!-- Blocs RIB (uniquement si type de reglement = LCR). -->
+                        <!-- Blocs RIB (uniquement si type de reglement = LCR).
+                             Titre « RIB N », filet de separation sauf sous le dernier. -->
                         <div
                             v-for="(rib, index) in visibleRibs"
                             :key="index"
-                            class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                            class="pb-[20px]"
+                            :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                         >
-                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('technique.providers.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                            <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                                 <MalioInputText v-if="isFilled(rib.label)" :model-value="rib.label" :label="t('technique.providers.form.accounting.ribLabel')" disabled />
                                 <MalioInputText v-if="isFilled(rib.bic)" :model-value="rib.bic" :label="t('technique.providers.form.accounting.ribBic')" disabled />
                                 <MalioInputText v-if="isFilled(rib.iban)" :model-value="rib.iban" :label="t('technique.providers.form.accounting.ribIban')" disabled />
diff --git a/frontend/modules/technique/pages/providers/new.vue b/frontend/modules/technique/pages/providers/new.vue
index d2a3d99..d3abdca 100644
--- a/frontend/modules/technique/pages/providers/new.vue
+++ b/frontend/modules/technique/pages/providers/new.vue
@@ -143,8 +143,10 @@
             <!-- Onglet Comptabilite (present uniquement si accounting.view ; editable si manage). -->
             <template v-if="canAccountingView" #accounting>
                 <div class="mt-12 flex flex-col gap-6">
-                    <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
-                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                    <!-- Bloc infos comptables : titre + filet bas (filet uniquement s'il y a des RIB en dessous). -->
+                    <div class="pb-[20px]" :class="{ 'border-b border-black': visibleRibs.length > 0 }">
+                        <h2 class="text-[20px] font-semibold text-black">{{ t('technique.providers.form.accounting.infoTitle') }}</h2>
+                        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="accounting.siren"
                                 :label="t('technique.providers.form.accounting.siren')"
@@ -214,21 +216,27 @@
                         </div>
                     </div>
 
-                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-3.08). -->
+                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-3.08).
+                         Titre « RIB N » + poubelle, filet de separation sauf sous le dernier. -->
                     <div
                         v-for="(rib, index) in visibleRibs"
                         :key="index"
-                        class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                        class="pb-[20px]"
+                        :class="{ 'border-b border-black': index !== visibleRibs.length - 1 }"
                     >
-                        <MalioButtonIcon
-                            v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
-                            icon="mdi:delete-outline"
-                            variant="ghost"
-                            button-class="absolute top-3 right-3"
-                            v-bind="{ ariaLabel: t('technique.providers.form.accounting.removeRib') }"
-                            @click="askRemoveRib(index)"
-                        />
-                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                        <!-- En-tete : titre du bloc (noir) a gauche, poubelle a droite. -->
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-[20px] font-semibold text-black">{{ t('technique.providers.form.accounting.ribTitle', { n: index + 1 }) }}</h2>
+                            <MalioButtonIcon
+                                v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
+                                icon="mdi:delete-outline"
+                                variant="ghost"
+                                button-class="p-0"
+                                v-bind="{ ariaLabel: t('technique.providers.form.accounting.removeRib') }"
+                                @click="askRemoveRib(index)"
+                            />
+                        </div>
+                        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
                             <MalioInputText
                                 v-model="rib.label"
                                 :label="t('technique.providers.form.accounting.ribLabel')"