frontend/app/layouts/default.vue

@@ -4,6 +4,7 @@
             <MalioSidebar
                 v-model="ui.sidebarCollapsed"
                 :sections="translatedSections"
+                :sidebar-class="ui.sidebarCollapsed ? '' : 'w-[232px]'"
             >
                 <template #logo>
                     <img src="/LOGO_MALIO.png" alt="Malio"/>
@@ -16,10 +17,10 @@
             <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                 <SiteSelector v-if="showSiteSelector"/>
                 <main
-                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
+                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-[170px]">
                     <div
                         aria-hidden="true"
-                        class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12"/>
+                        class="pointer-events-none sticky top-0 z-30 h-[47px] flex-shrink-0 bg-white"/>
                     <slot/>
                 </main>
             </div>

frontend/modules/commercial/pages/commercial.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('commercial.title') }}</h1>
+        <PageHeader>{{ $t('commercial.title') }}</PageHeader>
-        <p class="mt-4 text-neutral-500">{{ $t('commercial.welcome') }}</p>
+        <p class="text-neutral-500">{{ $t('commercial.welcome') }}</p>
     </div>
 </template>
 

frontend/modules/core/pages/admin/audit-log.vue

@@ -1,13 +1,9 @@
 <template>
     <div>
-        <div class="flex items-center justify-between">
+        <PageHeader>{{ t('admin.auditLog.title') }}</PageHeader>
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.auditLog.title') }}
-            </h1>
-        </div>
 
         <!-- Filtres -->
-        <section class="mt-4 rounded border border-gray-200 bg-white p-4">
+        <section class="rounded border border-gray-200 bg-white p-4">
             <!-- Labels uniformes au-dessus : les composants Malio sont utilises sans
                  leur `label` flottant interne pour ne pas mixer deux patterns de label.
                  A revoir une fois le composant calendar Malio développé -->

frontend/modules/core/pages/admin/roles.vue

@@ -1,22 +1,20 @@
 <template>
     <div>
-        <!-- En-tete -->
+        <PageHeader>
-        <div class="flex items-center justify-between">
+            {{ t('admin.roles.title') }}
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
+            <template #actions>
-                {{ t('admin.roles.title') }}
+                <MalioButton
-            </h1>
+                    v-if="can('core.roles.manage')"
-            <MalioButton
+                    :label="t('admin.roles.newRole')"
-                v-if="can('core.roles.manage')"
+                    icon-name="mdi:add-bold"
-                :label="t('admin.roles.newRole')"
+                    icon-position="left"
-                icon-name="mdi:add-bold"
+                    @click="openCreateDrawer"
-                icon-position="left"
+                />
-                @click="openCreateDrawer"
+            </template>
-            />
+        </PageHeader>
-        </div>
 
         <!-- Table des roles -->
         <MalioDataTable
-            class="mt-6"
             :columns="columns"
             :items="roleItems"
             :total-items="roles.length"

frontend/modules/core/pages/admin/users.vue

@@ -1,15 +1,9 @@
 <template>
     <div>
-        <!-- En-tete -->
+        <PageHeader>{{ t('admin.users.title') }}</PageHeader>
-        <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.users.title') }}
-            </h1>
-        </div>
 
         <!-- Table des utilisateurs -->
         <MalioDataTable
-            class="mt-6"
             :columns="columns"
             :items="userItems"
             :total-items="users.length"

frontend/modules/core/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('dashboard.title') }}</h1>
+        <PageHeader>{{ $t('dashboard.title') }}</PageHeader>
-        <p class="mt-4 text-neutral-500">{{ $t('dashboard.welcome') }}</p>
+        <p class="text-neutral-500">{{ $t('dashboard.welcome') }}</p>
     </div>
 </template>
 

frontend/modules/sites/pages/admin/sites.vue

@@ -1,22 +1,20 @@
 <template>
     <div>
-        <!-- En-tete -->
+        <PageHeader>
-        <div class="flex items-center justify-between">
+            {{ t('admin.sites.title') }}
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
+            <template #actions>
-                {{ t('admin.sites.title') }}
+                <MalioButton
-            </h1>
+                    v-if="can('sites.manage')"
-            <MalioButton
+                    :label="t('admin.sites.newSite')"
-                v-if="can('sites.manage')"
+                    icon-name="mdi:add-bold"
-                :label="t('admin.sites.newSite')"
+                    icon-position="left"
-                icon-name="mdi:add-bold"
+                    @click="openCreateDrawer"
-                icon-position="left"
+                />
-                @click="openCreateDrawer"
+            </template>
-            />
+        </PageHeader>
-        </div>
 
         <!-- Table des sites -->
         <MalioDataTable
-            class="mt-6"
             :columns="columns"
             :items="siteItems"
             :total-items="sites.length"

frontend/shared/components/ui/PageHeader.vue

@@ -0,0 +1,12 @@
+<template>
+    <!-- Entete de page standard : source unique du style des titres.
+         Slot par defaut = texte du titre, slot #actions = boutons a droite. -->
+    <div class="mb-[44px] flex items-center justify-between gap-4">
+        <h1 class="text-[32px] font-semibold text-primary-500">
+            <slot/>
+        </h1>
+        <div v-if="$slots.actions" class="shrink-0">
+            <slot name="actions"/>
+        </div>
+    </div>
+</template>