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/pages/admin.vue

@@ -1,24 +1,25 @@
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Administration</h1>
-
-            <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
-                <nav class="flex gap-4 sm:gap-6">
-                    <button
-                        v-for="tab in visibleTabs"
-                        :key="tab.key"
-                        class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
-                        :class="activeTab === tab.key
-                            ? 'border-b-2 border-primary-500 text-primary-500'
-                            : 'text-neutral-500 hover:text-neutral-700'"
-                        @click="activeTab = tab.key"
-                    >
-                        {{ tab.label }}
-                    </button>
-                </nav>
-            </div>
-        </div>
+        <PageHeader>
+            Administration
+            <template #subheader>
+                <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
+                    <nav class="flex gap-4 sm:gap-6">
+                        <button
+                            v-for="tab in visibleTabs"
+                            :key="tab.key"
+                            class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
+                            :class="activeTab === tab.key
+                                ? 'border-b-2 border-primary-500 text-primary-500'
+                                : 'text-neutral-500 hover:text-neutral-700'"
+                            @click="activeTab = tab.key"
+                        >
+                            {{ tab.label }}
+                        </button>
+                    </nav>
+                </div>
+            </template>
+        </PageHeader>
 
         <div>
             <AdminWorkflowTab v-if="activeTab === 'workflows'" />

frontend/pages/documents.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('sharedFiles.title') }}</h1>
+        <PageHeader>{{ $t('sharedFiles.title') }}</PageHeader>
 
         <!-- Fil d'Ariane -->
-        <nav class="mt-4 flex flex-wrap items-center gap-1 text-sm text-neutral-500">
+        <nav class="flex flex-wrap items-center gap-1 text-sm text-neutral-500">
             <button class="hover:text-primary-500" @click="openPath('')">{{ $t('sharedFiles.root') }}</button>
             <template v-for="crumb in breadcrumb" :key="crumb.path">
                 <span>/</span>

frontend/pages/index.vue

@@ -506,39 +506,40 @@ const lineOptions = {
 
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('dashboard.title') }}</h1>
-
-            <!-- Filters -->
-            <div class="mt-4 flex flex-wrap gap-3">
-                <MalioSelect
-                    v-model="selectedPeriod"
-                    :options="periodOptions"
-                    :label="$t('dashboard.filters.period')"
-                    group-class="!w-48"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedProjectId"
-                    :options="projectOptions"
-                    :label="$t('dashboard.filters.project')"
-                    :empty-option-label="$t('dashboard.filters.allProjects')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedUserId"
-                    :options="userOptions"
-                    :label="$t('dashboard.filters.user')"
-                    :empty-option-label="$t('dashboard.filters.allUsers')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-            </div>
-        </div>
+        <PageHeader>
+            {{ $t('dashboard.title') }}
+            <template #subheader>
+                <!-- Filters -->
+                <div class="mt-4 flex flex-wrap gap-3">
+                    <MalioSelect
+                        v-model="selectedPeriod"
+                        :options="periodOptions"
+                        :label="$t('dashboard.filters.period')"
+                        group-class="!w-48"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedProjectId"
+                        :options="projectOptions"
+                        :label="$t('dashboard.filters.project')"
+                        :empty-option-label="$t('dashboard.filters.allProjects')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedUserId"
+                        :options="userOptions"
+                        :label="$t('dashboard.filters.user')"
+                        :empty-option-label="$t('dashboard.filters.allUsers')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
+            </template>
+        </PageHeader>
 
         <!-- Loading -->
         <div v-if="isLoading" class="mt-12 flex items-center justify-center">