fix(directory) : persist contacts/addresses on explicit save instead of on blur

Hold contact/address block edits in memory and persist them via explicit
saveContacts/saveAddresses on click (with saving guards), matching the task
forms. Keep immediate deletion. Minor restyle of blocks and action buttons.

frontend/modules/directory/components/CommercialReportTab.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-col gap-6 pt-6">
         <!-- Formulaire d'ajout / édition -->
-        <div v-if="isAdmin" class="grid grid-cols-2 gap-x-8 gap-y-3 rounded bg-white p-4 shadow">
+        <div v-if="isAdmin" class="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)]">
             <MalioInputText
                 class="col-span-2"
                 :label="$t('directory.reports.fields.subject')"
@@ -50,8 +50,8 @@
                     </p>
                 </div>
                 <div v-if="isAdmin" class="flex gap-2">
-                    <MalioButtonIcon icon="mdi:pencil-outline" :aria-label="$t('common.edit')" @click="edit(report)" />
-                    <MalioButtonIcon icon="mdi:trash-can-outline" button-class="!text-red-600" :aria-label="$t('common.delete')" @click="remove(report.id)" />
+                    <MalioButtonIcon icon="mdi:pencil-outline" variant="ghost" :aria-label="$t('common.edit')" @click="edit(report)" />
+                    <MalioButtonIcon icon="mdi:delete-outline" variant="ghost" :aria-label="$t('common.delete')" @click="remove(report.id)" />
                 </div>
             </div>
             <p v-if="report.body" class="mt-2 whitespace-pre-wrap text-sm text-neutral-700">{{ report.body }}</p>