refactor(front) : composant PageHeader unifié + standardisation des titres

- Nouveau composant ui/PageHeader.vue : source unique du style des titres
  (30px / semi-bold / bleu malio), sticky avec masquage du scroll, slots
  #actions et #subheader (barres de filtres/onglets collées au titre)
- Layout : marges <main> réduites (sm:px-6 lg:px-12 xl:px-11) + suppression
  du bloc-spacer sticky devenu inutile
- ~17 pages migrées vers <PageHeader>, un seul pattern partout
- Espacement titre -> contenu uniforme (30px), porté par le composant

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/modules/directory/pages/directory/clients/[id].vue

@@ -1,10 +1,13 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center gap-3 pt-4">
-            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
-            <h1 class="text-2xl font-bold text-neutral-900">{{ client?.name ?? '…' }}</h1>
-        </div>
+    <div>
+        <PageHeader>
+            <span class="inline-flex items-center gap-3">
+                <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+                {{ client?.name ?? '…' }}
+            </span>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="client">
             <MalioTabList v-model="activeTab" :tabs="tabs">
@@ -111,6 +114,7 @@
                 </template>
             </MalioTabList>
         </template>
+        </div>
     </div>
 </template>
 

frontend/modules/directory/pages/directory/index.vue

@@ -1,9 +1,10 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <h1 class="text-2xl font-bold text-neutral-900">
+    <div>
+        <PageHeader>
             {{ $t('directory.title') }}
-        </h1>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <MalioTabList v-model="activeTab" :tabs="tabs">
             <!-- Clients -->
             <template #clients>
@@ -171,6 +172,7 @@
             :message="deleteModalMessage"
             @confirm="confirmDelete"
         />
+        </div>
     </div>
 </template>
 

frontend/modules/directory/pages/directory/prestataires/[id].vue

@@ -1,10 +1,13 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center gap-3 pt-4">
-            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
-            <h1 class="text-2xl font-bold text-neutral-900">{{ prestataire?.name ?? '…' }}</h1>
-        </div>
+    <div>
+        <PageHeader>
+            <span class="inline-flex items-center gap-3">
+                <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+                {{ prestataire?.name ?? '…' }}
+            </span>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="prestataire">
             <MalioTabList v-model="activeTab" :tabs="tabs">
@@ -111,6 +114,7 @@
                 </template>
             </MalioTabList>
         </template>
+        </div>
     </div>
 </template>
 

frontend/modules/directory/pages/directory/prospects/[id].vue

@@ -1,10 +1,13 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center gap-3 pt-4">
-            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
-            <h1 class="text-2xl font-bold text-neutral-900">{{ prospect?.company ?? '…' }}</h1>
-        </div>
+    <div>
+        <PageHeader>
+            <span class="inline-flex items-center gap-3">
+                <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+                {{ prospect?.company ?? '…' }}
+            </span>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="prospect">
             <MalioTabList v-model="activeTab" :tabs="tabs">
@@ -126,6 +129,7 @@
                 </template>
             </MalioTabList>
         </template>
+        </div>
     </div>
 </template>