fix(audit) : drawer footer style and filter icon

- bouton Filtres ouvrant un drawer dedie (icone mdi:equalizer)
- accordeons Malio : dates (MalioDateTime Du/Au), type d'entite (checkbox),
  action (radio), utilisateur (recherche texte)
- application des filtres uniquement au clic sur Voir les resultats (etat brouillon)
- Reinitialiser vide brouillon + filtres actifs et recharge
- i18n : audit.filters.title / apply / date_range

.gitea/workflows/pull-request.yml

@@ -0,0 +1,119 @@
+name: Pull Request — Quality gate
+
+# Lance les tests + lint + build sur chaque PR ciblant develop.
+# Deux jobs en parallele (backend / frontend) pour reduire le temps de feedback.
+# E2E volontairement hors scope (cf. regle d'or testing.md).
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+# Annule les runs obsoletes quand on repush sur la meme PR.
+concurrency:
+  group: pr-${{ gitea.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  backend:
+    name: Backend (PHP CS + PHPUnit)
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: postgres:16-alpine
+        env:
+          # Doivent matcher la DATABASE_URL ci-dessous. Le suffixe `_test`
+          # est applique automatiquement par Doctrine en APP_ENV=test.
+          POSTGRES_USER: app
+          POSTGRES_PASSWORD: '!ChangeMe!'
+          POSTGRES_DB: app
+        # Pas de `ports:` host mapping — le runner partage l'hote avec la
+        # prod (Postgres deja sur 5432) et les jobs Gitea Actions tournent
+        # en container sur un reseau Docker dedie : le service est joignable
+        # via son nom (`postgres`), pas via 127.0.0.1.
+        options: >-
+          --health-cmd "pg_isready -U app"
+          --health-interval 5s
+          --health-timeout 5s
+          --health-retries 10
+
+    env:
+      APP_ENV: test
+      APP_SECRET: ci-secret-not-used
+      APP_DEBUG: 0
+      DEFAULT_URI: http://localhost/
+      DATABASE_URL: postgresql://app:!ChangeMe!@postgres:5432/app?serverVersion=16&charset=utf8
+      JWT_SECRET_KEY: '%kernel.project_dir%/config/jwt/private.pem'
+      JWT_PUBLIC_KEY: '%kernel.project_dir%/config/jwt/public.pem'
+      JWT_PASSPHRASE: change_me_in_env_local
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP 8.4
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.4'
+          extensions: pdo, pdo_pgsql, intl, opcache, zip, mbstring, sodium
+          coverage: none
+          tools: composer:v2
+
+      - name: Cache Composer
+        uses: actions/cache@v4
+        with:
+          path: ~/.composer/cache
+          key: composer-${{ hashFiles('composer.lock') }}
+          restore-keys: |
+            composer-
+
+      - name: Install PHP dependencies
+        run: composer install --no-interaction --no-progress --prefer-dist
+
+      - name: Generate JWT keypair
+        run: php bin/console lexik:jwt:generate-keypair --skip-if-exists --no-interaction
+
+      - name: PHP CS Fixer (dry-run)
+        run: vendor/bin/php-cs-fixer fix --config=.php-cs-fixer.dist.php --allow-risky=yes --dry-run --diff
+
+      - name: Bootstrap test database
+        run: |
+          php bin/console doctrine:database:create --env=test --if-not-exists --no-interaction
+          php bin/console doctrine:migrations:migrate --env=test --no-interaction
+          php bin/console doctrine:schema:update --env=test --force --no-interaction
+          php bin/console doctrine:fixtures:load --env=test --no-interaction
+          php bin/console app:sync-permissions --env=test --no-interaction
+
+      - name: Run PHPUnit
+        run: php -d memory_limit=512M vendor/bin/phpunit
+
+  frontend:
+    name: Frontend (lint + Vitest + build)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install Node dependencies
+        run: npm ci
+
+      - name: ESLint
+        run: npm run lint
+
+      - name: Unit tests (Vitest)
+        run: npm run test
+
+      - name: Build production (nuxt build)
+        run: npm run build:dist

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.38'
+    app.version: '0.1.40'

docs/specs/M0-categories/spec-front.md

@@ -0,0 +1,113 @@
+---
+# === IDENTITÉ ===
+module: M0
+nom: "Gestion des catégories"
+ecran: gestion-categories
+owner_spec: Matthieu
+backup_spec: Tristan
+version: V0
+date_redaction: 2026-05-22
+
+# === LIENS ===
+maquette_figma: null                # pas de Figma — UI admin standard
+regles_metier: [RG-1.01, RG-1.02, RG-1.03, RG-1.04, RG-1.05, RG-1.06, RG-1.07, RG-1.08, RG-1.09, RG-1.10, RG-1.11, RG-1.12, RG-1.13]
+roles: [Admin, Bureau, Compta, Commerciale, Usine]
+lien_spec_back: ./spec-back.md
+
+# === VALIDATION CLIENT #1 ===
+client_validation_1:
+  statut: validee                   # V0 client validée le 22/05/2026
+  date: 2026-05-22
+  canal: ecrit
+  valide_par: "Matthieu (CP MALIO) — validation implicite, périmètre projet"
+  resume: "Module 0 — Gestion des catégories. Page admin (datatable + drawer). 2 champs (Nom + Type), 3 actions (Ajouter / Consulter / Modifier). Admin only."
+  trace_archivee: "uploads/c4ebb6b4-M0categories.docx (V0 d'origine .docx) — restitué ci-dessous en Markdown."
+
+# === LIEN LESSTIME ===
+lesstime_taskgroup_id: 22
+lesstime_project_id: 6              # ERP / Starseed
+statut_global: en_dev               # tickets créés en backlog Lesstime le 2026-05-26
+---
+
+# Module 0 — Gestion des catégories (V0 front)
+
+> **Origine** : spec front V0 livrée le 22/05/2026 (`c4ebb6b4-M0categories.docx` + `f665acfb-M0categoriesV0.pdf`). Restitution Markdown fidèle pour intégration au workflow MALIO. Le contenu original n'est pas modifié — toute reformulation et précision (en particulier côté back) vit dans [`spec-back.md`](./spec-back.md).
+
+## But
+
+Permettre à un administrateur Starseed de gérer un référentiel de **catégories** depuis l'interface admin du logiciel. Ces catégories seront utilisées plus tard pour classifier les tiers (clients, fournisseurs, prestataires).
+
+## Accès
+
+- **Depuis** : menu principal → **Administration** → entrée « Gestion des catégories »
+- **Rôles autorisés** : **Admin uniquement** (Bureau / Compta / Commerciale / Usine n'ont **aucun** accès, ni lecture ni écriture).
+
+## Navigation
+
+L'écran est la page d'entrée du Module **Administration**. Titre de la page : « **Gestion des catégories** ».
+
+- Affichage principal : un **datatable** listant toutes les catégories existantes.
+- **Clic sur une ligne** → ouverture d'un **drawer** latéral en mode **consultation / modification** (cf. § Action « Consulter »).
+- **Bouton « + Ajouter »** (en haut à droite du datatable) → ouverture d'un **drawer** en mode **création** (cf. § Action « Ajouter »).
+- Pas d'onglet, pas de pagination explicite (volumétrie cible faible).
+
+## Actions
+
+| Action | Déclencheur | Comportement |
+|---|---|---|
+| **Ajouter** | Clic sur le bouton « + Ajouter » | Ouvre le drawer en mode création, formulaire vide. Validation → POST → la catégorie apparaît dans le datatable. |
+| **Consulter** | Clic sur une ligne du datatable | Ouvre le drawer avec les champs pré-remplis en lecture (et passage en édition si l'utilisateur modifie un champ). |
+| **Modifier** | Modification d'un champ dans le drawer ouvert en consultation | Validation → PATCH → la ligne du datatable se met à jour. |
+
+> **Note V0** : la **suppression** n'était pas mentionnée dans la V0 client. Côté workflow MALIO, suite à la revue back (cf. `spec-back.md` § Q3), un soft delete est ajouté (corbeille logique). L'UI peut intégrer ce point lors d'une V1 — au M0 le bouton « Supprimer » n'est pas obligatoire, mais doit être facilement ajoutable.
+
+## Formulaire — Champs
+
+Le formulaire (drawer) contient **2 champs**, tous deux obligatoires :
+
+| Champ | Type | Obligatoire | Contenu / valeur par défaut | Règle |
+|---|---|---|---|---|
+| **Nom** | Texte libre | **Oui** | vide à la création | Pas de règle métier détaillée en V0. Détails côté back : RG-1.02 / RG-1.03 / RG-1.04 (obligatoire, trim, longueur 2–120). |
+| **Type de catégorie** | Select | **Oui** | vide à la création | Le contenu du Select n'était pas précisé en V0. Décision back : entité de référence `CategoryType` séparée (RG-1.05 / RG-1.06). Le référentiel sera alimenté plus tard (cf. HP-1 dans `spec-back.md`). |
+
+> **Note V0** : la V0 ne précisait ni si le `Type de catégorie` est un enum hardcodé ni si c'est une autre entité. Décision tranchée côté back avant découpe en tickets : **entité de référence** (`category_types`), table créée vide au M0.
+
+## Permissions par rôle
+
+| Rôle | Vue (`GET`) | Création (`POST`) | Édition (`PATCH`) | Suppression (`DELETE`) |
+|---|---|---|---|---|
+| **Admin** | ✅ | ✅ | ✅ | ✅ (soft delete — ajout post-V0) |
+| Bureau | ❌ | ❌ | ❌ | ❌ |
+| Compta | ❌ | ❌ | ❌ | ❌ |
+| Commerciale | ❌ | ❌ | ❌ | ❌ |
+| Usine | ❌ | ❌ | ❌ | ❌ |
+
+→ Les rôles non-Admin ne voient **pas** l'entrée de menu et reçoivent **403** sur toute requête vers les endpoints `/api/categories/*` (cf. RG-1.01 dans `spec-back.md`).
+
+## Composants UI à utiliser (Starseed / `@malio/layer-ui`)
+
+- **Datatable** : `<MalioDataTable>` (avec colonnes `Nom` + `Type` + actions, tri par défaut sur Nom).
+- **Drawer** : drawer latéral standard `@malio/layer-ui` (à confirmer côté front avec le composant exact).
+- **Input texte** : `<MalioInputText>` pour le champ Nom.
+- **Select** : `<MalioSelect>` pour le champ Type de catégorie, alimenté par `GET /api/category_types`.
+- **Bouton** : `<MalioButton>` (« + Ajouter », « Enregistrer », « Annuler »).
+- **Toasts succès / erreur** : standards via `useApi()`.
+
+## Points laissés ouverts par la V0 (résolus côté back)
+
+| # | Zone d'ombre V0 | Résolution (cf. `spec-back.md`) |
+|---|---|---|
+| 1 | Suppression non mentionnée | **Soft delete** ajouté (RG-1.12 + RG-1.13). UI peut ajouter le bouton plus tard. |
+| 2 | Unicité du nom non précisée | **Unicité sur `(name, type)` case-insensitive**, parmi non-soft-deleted (RG-1.07). |
+| 3 | Nature du `Type de catégorie` (enum vs entité) | **Entité de référence** `CategoryType` (table vide au M0, créée par migration). |
+| 4 | Volumétrie & pagination | **300 max** → pagination front (`<MalioDataTable>`), pas de pagination serveur. Tri serveur `name ASC` par défaut. |
+| 5 | Audit / traçabilité | Pattern `#[Auditable]` Starseed standard. Trace dans la table `audit_log` (qui / quoi / quand / diff). **Pas** de colonnes `created_by` / `updated_by` sur l'entité (cohérent avec User / Role dans Starseed). Historique consultable via `/api/audit-log?entityType=Category&entityId={id}`. |
+| 6 | Référencement par d'autres entités | **Aucune FK entrante au M0.** Les modules Tiers (M-Clients / M-Fournisseurs / M-Prestas) ajouteront leur propre `category_id` plus tard. |
+
+---
+
+## 📦 Tickets Lesstime générés
+
+**TaskGroup Lesstime** : `#22 — M0 — Gestion des catégories` (projet `ERP / Starseed`, projectId=6)
+
+> Détail complet, table des tickets et action manuelle dans Lesstime → voir [`spec-back.md § Tickets Lesstime générés`](./spec-back.md#-tickets-lesstime-générés).

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/i18n/locales/fr.json

@@ -90,7 +90,10 @@
             "load_more": "Voir plus"
         },
         "filters": {
+            "title": "Filtres",
+            "apply": "Voir les résultats",
             "reset": "Réinitialiser",
+            "date_range": "Date à date",
             "date_from": "Du",
             "date_to": "Au",
             "entity_type": "Type d'entité",

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>
-        <p class="mt-4 text-neutral-500">{{ $t('commercial.welcome') }}</p>
+        <PageHeader>{{ $t('commercial.title') }}</PageHeader>
+        <p class="text-neutral-500">{{ $t('commercial.welcome') }}</p>
     </div>
 </template>
 

frontend/modules/core/components/PermissionGroup.vue

@@ -1,66 +0,0 @@
-<template>
-    <div class="rounded-lg border border-neutral-200 overflow-hidden">
-        <!-- En-tete du groupe avec checkbox "tout selectionner" -->
-        <div class="flex items-center gap-3 bg-neutral-50 px-4 py-3 border-b border-neutral-200">
-            <MalioCheckbox
-                :id="`group-${module}`"
-                :label="moduleLabel"
-                :model-value="allSelected"
-                label-class="font-semibold text-sm text-neutral-700 capitalize"
-                @update:model-value="toggleAll"
-            />
-            <span class="ml-auto text-xs text-neutral-400">
-                {{ selectedCount }}/{{ permissions.length }}
-            </span>
-        </div>
-
-        <!-- Liste des permissions individuelles -->
-        <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-2">
-            <MalioCheckbox
-                v-for="perm in permissions"
-                :key="perm.id"
-                :id="`perm-${perm.id}`"
-                :label="perm.label"
-                :model-value="selectedIds.has(perm.id)"
-                label-class="text-sm text-neutral-600"
-                @update:model-value="(val: boolean) => togglePermission(perm.id, val)"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { Permission } from '~/shared/types/rbac'
-
-const props = defineProps<{
-    module: string
-    moduleLabel: string
-    permissions: Permission[]
-    selectedIds: Set<number>
-}>()
-
-const emit = defineEmits<{
-    toggle: [permissionId: number, selected: boolean]
-    toggleAll: [module: string, selected: boolean]
-}>()
-
-// Nombre de permissions selectionnees dans ce groupe
-const selectedCount = computed(() =>
-    props.permissions.filter(p => props.selectedIds.has(p.id)).length
-)
-
-// Vrai si toutes les permissions du groupe sont selectionnees
-const allSelected = computed(() =>
-    props.permissions.length > 0 && selectedCount.value === props.permissions.length
-)
-
-// Emet l'evenement de bascule pour une permission individuelle
-function togglePermission(id: number, selected: boolean) {
-    emit('toggle', id, selected)
-}
-
-// Emet l'evenement de bascule pour toutes les permissions du groupe
-function toggleAll(selected: boolean) {
-    emit('toggleAll', props.module, selected)
-}
-</script>

frontend/modules/core/components/RoleDrawer.vue

@@ -1,11 +1,17 @@
 <template>
     <MalioDrawer
         :model-value="modelValue"
-        :title="isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole')"
         drawer-class="w-full max-w-lg"
+        header-class="border-b border-black"
+        footer-class="justify-between border-t border-black p-6"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <form class="flex flex-col gap-6 p-4" @submit.prevent="handleSave">
+        <template #header>
+            <h2 class="text-[24px] font-bold">
+                {{ isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole') }}
+            </h2>
+        </template>
+        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
             <!-- Champs du role -->
             <MalioInputText
                 v-model="form.label"
@@ -44,45 +50,71 @@
                 <div v-else-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
                     {{ t('admin.roles.permissions.noPermissions') }}
                 </div>
-                <div class="flex flex-col gap-4">
-                    <PermissionGroup
+                <!-- Un panneau d'accordeon par module (mode multiple) ; le compteur
+                     selectionnees/total reste visible dans l'en-tete replie. -->
+                <MalioAccordion v-else v-model="openModules">
+                    <MalioAccordionItem
                         v-for="group in permissionsByModule"
                         :key="group.module"
-                        :module="group.module"
-                        :module-label="group.module"
-                        :permissions="group.permissions"
-                        :selected-ids="selectedPermissionIds"
-                        @toggle="handleTogglePermission"
-                        @toggle-all="handleToggleAll"
-                    />
-                </div>
+                        :value="group.module"
+                        :title="`${group.module} (${selectedCountFor(group)}/${group.permissions.length})`"
+                        header-class="capitalize"
+                    >
+                        <div class="flex flex-col gap-3">
+                            <!-- Tout selectionner pour ce module -->
+                            <MalioCheckbox
+                                :id="`role-group-${group.module}`"
+                                :label="t('admin.roles.permissions.selectAll')"
+                                :model-value="allSelectedFor(group)"
+                                label-class="font-semibold text-sm text-neutral-700"
+                                @update:model-value="(val: boolean) => handleToggleAll(group.module, val)"
+                            />
+                            <div class="flex flex-col gap-2">
+                                <MalioCheckbox
+                                    v-for="perm in group.permissions"
+                                    :id="`role-perm-${perm.id}`"
+                                    :key="perm.id"
+                                    :label="perm.label"
+                                    :model-value="selectedPermissionIds.has(perm.id)"
+                                    label-class="text-sm text-neutral-600"
+                                    @update:model-value="(val: boolean) => handleTogglePermission(perm.id, val)"
+                                />
+                            </div>
+                        </div>
+                    </MalioAccordionItem>
+                </MalioAccordion>
             </div>
 
-            <!-- Boutons -->
-            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
-                <MalioButton
-                    v-if="isEditMode"
-                    :label="t('common.delete')"
-                    variant="danger"
-                    icon-name="mdi:delete-outline"
-                    icon-position="left"
-                    :disabled="role?.isSystem"
-                    @click="emit('delete')"
-                />
-                <MalioButton
-                    v-else
-                    :label="t('common.cancel')"
-                    variant="tertiary"
-                    @click="emit('update:modelValue', false)"
-                />
-                <MalioButton
-                    :label="t('common.save')"
-                    variant="primary"
-                    :disabled="saving || permissionsLoadFailed"
-                    @click="handleSave"
-                />
-            </div>
         </form>
+
+        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
+             scrollable (shrink-0), donc reellement fige sans sticky. -->
+        <template #footer>
+            <MalioButton
+                v-if="isEditMode"
+                :label="t('common.delete')"
+                variant="danger"
+                icon-name="mdi:delete-outline"
+                icon-position="left"
+                button-class="w-[150px]"
+                :disabled="role?.isSystem"
+                @click="emit('delete')"
+            />
+            <MalioButton
+                v-else
+                :label="t('common.cancel')"
+                variant="tertiary"
+                button-class="w-[150px]"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.save')"
+                variant="primary"
+                button-class="w-[150px]"
+                :disabled="saving || permissionsLoadFailed"
+                @click="handleSave"
+            />
+        </template>
     </MalioDrawer>
 </template>
 
@@ -124,6 +156,19 @@ const form = ref({
 
 const selectedPermissionIds = ref(new Set<number>())
 
+// Modules ouverts dans l'accordeon des permissions (mode multiple)
+const openModules = ref<string[]>([])
+
+// Nombre de permissions selectionnees pour un module donne
+function selectedCountFor(group: PermissionModule): number {
+    return group.permissions.filter(p => selectedPermissionIds.value.has(p.id)).length
+}
+
+// Vrai si toutes les permissions du module sont selectionnees
+function allSelectedFor(group: PermissionModule): boolean {
+    return group.permissions.length > 0 && selectedCountFor(group) === group.permissions.length
+}
+
 const isEditMode = computed(() => props.role !== null)
 
 // Grouper les permissions par module

frontend/modules/core/components/UserRbacDrawer.vue

@@ -1,11 +1,17 @@
 <template>
     <MalioDrawer
         :model-value="modelValue"
-        :title="t('admin.users.drawer.title', { username: user?.username ?? '' })"
-        drawer-class="w-full max-w-lg"
+        drawer-class="w-full max-w-[450px]"
+        header-class="border-b border-black"
+        footer-class="justify-between border-t border-black p-6"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <div class="flex flex-col gap-6 p-4">
+        <template #header>
+            <h2 class="text-[24px] font-bold">
+                {{ t('admin.users.drawer.title', { username: user?.username ?? '' }) }}
+            </h2>
+        </template>
+        <div class="flex flex-col gap-4 py-4">
             <!-- Etat d'erreur de chargement des referentiels : bloque la
                  sauvegarde pour empecher un ecrasement silencieux des droits. -->
             <div
@@ -60,18 +66,39 @@
                 <div v-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
                     {{ t('admin.roles.permissions.noPermissions') }}
                 </div>
-                <div class="flex flex-col gap-4">
-                    <PermissionGroup
+                <!-- Un panneau d'accordeon par module (mode multiple) ; le compteur
+                     selectionnees/total reste visible dans l'en-tete replie. -->
+                <MalioAccordion v-else v-model="openDirectModules">
+                    <MalioAccordionItem
                         v-for="group in permissionsByModule"
                         :key="group.module"
-                        :module="group.module"
-                        :module-label="group.module"
-                        :permissions="group.permissions"
-                        :selected-ids="selectedDirectPermissionIds"
-                        @toggle="handleTogglePermission"
-                        @toggle-all="handleToggleAll"
-                    />
-                </div>
+                        :value="group.module"
+                        :title="`${group.module} (${directSelectedCount(group)}/${group.permissions.length})`"
+                        header-class="capitalize"
+                    >
+                        <div class="flex flex-col gap-3">
+                            <!-- Tout selectionner pour ce module -->
+                            <MalioCheckbox
+                                :id="`direct-group-${group.module}`"
+                                :label="t('admin.roles.permissions.selectAll')"
+                                :model-value="directAllSelected(group)"
+                                label-class="font-semibold text-sm text-neutral-700"
+                                @update:model-value="(val: boolean) => handleToggleAll(group.module, val)"
+                            />
+                            <div class="flex flex-col gap-2">
+                                <MalioCheckbox
+                                    v-for="perm in group.permissions"
+                                    :id="`direct-perm-${perm.id}`"
+                                    :key="perm.id"
+                                    :label="perm.label"
+                                    :model-value="selectedDirectPermissionIds.has(perm.id)"
+                                    label-class="text-sm text-neutral-600"
+                                    @update:model-value="(val: boolean) => handleTogglePermission(perm.id, val)"
+                                />
+                            </div>
+                        </div>
+                    </MalioAccordionItem>
+                </MalioAccordion>
             </div>
 
             <!-- Section Sites autorises (ticket 2 module Sites) -->
@@ -103,21 +130,25 @@
                 <EffectivePermissions :permissions="effectivePermissions" />
             </div>
 
-            <!-- Boutons -->
-            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
-                <MalioButton
-                    :label="t('common.cancel')"
-                    variant="tertiary"
-                    @click="emit('update:modelValue', false)"
-                />
-                <MalioButton
-                    :label="t('common.save')"
-                    variant="primary"
-                    :disabled="saving || loadFailed"
-                    @click="handleSave"
-                />
-            </div>
         </div>
+
+        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
+             scrollable (shrink-0), donc reellement fige sans sticky. -->
+        <template #footer>
+            <MalioButton
+                :label="t('common.cancel')"
+                variant="tertiary"
+                button-class="w-[150px]"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.save')"
+                variant="primary"
+                button-class="w-[150px]"
+                :disabled="saving || loadFailed"
+                @click="handleSave"
+            />
+        </template>
     </MalioDrawer>
 </template>
 
@@ -158,6 +189,19 @@ const selectedRoleIds = ref(new Set<number>())
 const selectedDirectPermissionIds = ref(new Set<number>())
 const selectedSiteIds = ref(new Set<number>())
 
+// Modules ouverts dans l'accordeon des permissions directes (mode multiple)
+const openDirectModules = ref<string[]>([])
+
+// Nombre de permissions directes selectionnees pour un module donne
+function directSelectedCount(group: PermissionModule): number {
+    return group.permissions.filter(p => selectedDirectPermissionIds.value.has(p.id)).length
+}
+
+// Vrai si toutes les permissions directes du module sont selectionnees
+function directAllSelected(group: PermissionModule): boolean {
+    return group.permissions.length > 0 && directSelectedCount(group) === group.permissions.length
+}
+
 // Detecter l'auto-edition
 const isSelfEdit = computed(() => props.user?.id === auth.user?.id)
 

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

@@ -1,95 +1,22 @@
 <template>
     <div>
-        <div class="flex items-center justify-between">
-            <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">
-            <!-- 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é -->
-            <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-5">
-                <!-- TODO(malio-ui): remplacer par un composant Malio quand la lib
-                     exposera un datetime picker. Cf. exception documentee dans
-                     CLAUDE.md (section "Composants formulaires"). -->
-                <div>
-                    <label class="mb-1 block text-xs font-medium text-gray-600">
-                        {{ t('audit.filters.date_from') }}
-                    </label>
-                    <input
-                        v-model="filters.performedAtAfter"
-                        type="datetime-local"
-                        class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
-                    >
-                </div>
-                <!-- TODO(malio-ui): idem ci-dessus. -->
-                <div>
-                    <label class="mb-1 block text-xs font-medium text-gray-600">
-                        {{ t('audit.filters.date_to') }}
-                    </label>
-                    <input
-                        v-model="filters.performedAtBefore"
-                        type="datetime-local"
-                        class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
-                    >
-                </div>
-                <div>
-                    <label class="mb-1 block text-xs font-medium text-gray-600">
-                        {{ t('audit.filters.entity_type') }}
-                    </label>
-                    <div class="[&>div>div]:!mt-0">
-                        <MalioSelectCheckbox
-                            v-model="selectedEntityTypes"
-                            :options="entityTypeOptions"
-                            :display-select-all="true"
-                            :display-tag="true"
-                            min-width="w-full"
-                            text-field="text-sm"
-                            text-value="text-sm"
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label class="mb-1 block text-xs font-medium text-gray-600">
-                        {{ t('audit.filters.user') }}
-                    </label>
-                    <MalioInputText
-                        v-model="performedByInput"
-                        icon-name="mdi:account-search"
-                        input-class="text-sm"
-                    />
-                </div>
-                <div>
-                    <label class="mb-1 block text-xs font-medium text-gray-600">
-                        {{ t('audit.filters.action') }}
-                    </label>
-                    <div class="[&>div>div]:!mt-0">
-                        <MalioSelect
-                            v-model="actionValue"
-                            :options="actionOptions"
-                            text-field="text-sm"
-                            text-value="text-sm"
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <div class="mt-3 flex justify-end">
+        <PageHeader>
+            {{ t('admin.auditLog.title') }}
+            <template #actions>
                 <MalioButton
                     variant="tertiary"
-                    :label="t('audit.filters.reset')"
-                    button-class="text-xs"
-                    @click="resetFilters"
+                    :label="t('audit.filters.title')"
+                    icon-name="mdi:tune"
+                    icon-position="left"
+                    iconSize="24"
+                    button-class="w-[184px] justify-start gap-4 text-black"
+                    @click="openFilters"
                 />
-            </div>
-        </section>
+            </template>
+        </PageHeader>
 
         <!-- Tableau -->
         <MalioDataTable
-            class="mt-4"
             :columns="columns"
             :items="rows"
             :total-items="totalItems"
@@ -123,12 +50,91 @@
             </template>
         </MalioDataTable>
 
+        <!-- Drawer de filtres : etat brouillon, applique uniquement au clic sur
+             "Voir les resultats". `body-class="p-0"` pour que l'accordeon aille
+             bord a bord (les items portent leur propre px-7). -->
+        <MalioDrawer
+            v-model="filterDrawerOpen"
+            drawer-class="max-w-[450px]"
+            body-class="p-0"
+            footer-class="justify-between border-t border-black p-6"
+        >
+            <template #header>
+                <h2 class="text-[24px] font-bold uppercase">{{ t('audit.filters.title') }}</h2>
+            </template>
+
+            <MalioAccordion>
+                <!-- Dates : deux champs date+heure Du / Au (champs datetime a l'origine) -->
+                <MalioAccordionItem :title="t('audit.filters.date_range')" value="dates">
+                    <div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
+                        <span>{{ t('audit.filters.date_from') }}</span>
+                        <MalioDateTime v-model="draftDateFrom" />
+                        <span>{{ t('audit.filters.date_to') }}</span>
+                        <MalioDateTime v-model="draftDateTo" />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Type d'entite : cases a cocher (multi-selection) -->
+                <MalioAccordionItem :title="t('audit.filters.entity_type')" value="entity">
+                    <div class="flex flex-col gap-4">
+                        <MalioCheckbox
+                            v-for="opt in entityTypeOptions"
+                            :id="`filter-entity-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftEntityTypes.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleEntity(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Action : boutons radio (selection unique, '' = toutes) -->
+                <MalioAccordionItem :title="t('audit.filters.action')" value="action">
+                    <MalioRadioButton
+                        v-for="opt in actionOptions"
+                        :key="opt.value"
+                        v-model="draftAction"
+                        name="audit-action"
+                        :value="opt.value"
+                        :label="opt.label"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Utilisateur : recherche texte (ILIKE partiel cote backend) -->
+                <MalioAccordionItem :title="t('audit.filters.user')" value="user">
+                    <MalioInputText
+                        v-model="draftPerformedBy"
+                        icon-name="mdi:account-search"
+                    />
+                </MalioAccordionItem>
+            </MalioAccordion>
+
+            <template #footer>
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('audit.filters.reset')"
+                    button-class="w-[150px]"
+                    @click="resetFilters"
+                />
+                <MalioButton
+                    variant="primary"
+                    :label="t('audit.filters.apply')"
+                    button-class="w-[170px]"
+                    @click="applyFilters"
+                />
+            </template>
+        </MalioDrawer>
+
         <!-- Drawer detail : diff courant + timeline complete de l'entite -->
         <MalioDrawer
             v-model="drawerOpen"
-            :title="drawerTitle"
             drawer-class="max-w-2xl"
         >
+            <template #header>
+                <h2 class="text-[24px] font-bold">
+                    {{ drawerTitle }}
+                </h2>
+            </template>
             <div v-if="selectedEntry">
                 <AuditLogDetail :entry="selectedEntry" />
                 <div class="mt-4 border-t border-gray-200 pt-3">
@@ -149,7 +155,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import type { AuditLogEntry, AuditLogFilters } from '~/shared/types'
 
 const { t, te } = useI18n()
@@ -173,8 +179,11 @@ if (!can('core.audit_log.view')) {
 
 useHead({ title: t('admin.auditLog.title') })
 
-// Etat des filtres : local uniquement, JAMAIS persiste dans l'URL (cf. regle
-// CLAUDE.md "Tableau : pas de persistance URL").
+// Etat des filtres APPLIQUES : pilote `loadEntries`. Local uniquement, JAMAIS
+// persiste dans l'URL (cf. regle CLAUDE.md "Tableau : pas de persistance URL").
+// `performedAtAfter`/`performedAtBefore` stockent une date+heure ISO naive
+// (`YYYY-MM-DDTHH:MM:00`, fournie par MalioDateTime), convertie en ISO UTC
+// au moment du fetch.
 const filters = reactive<AuditLogFilters>({
     performedAtAfter:  undefined,
     performedAtBefore: undefined,
@@ -185,26 +194,23 @@ const filters = reactive<AuditLogFilters>({
     itemsPerPage:      10,
 })
 
-// Multi-selection entity_type : bind dedie au MalioSelectCheckbox.
-// Attention : les composants Malio attendent `{ label, value }` (pas `{ text }`).
-const selectedEntityTypes = ref<(string | number)[]>([])
+// Etat BROUILLON du drawer de filtres : edite librement, recopie dans `filters`
+// uniquement au clic sur "Voir les resultats". Permet d'annuler une saisie en
+// fermant le drawer sans relancer de requete.
+const filterDrawerOpen = ref(false)
+const draftDateFrom = ref<string | null>(null)
+const draftDateTo = ref<string | null>(null)
+const draftEntityTypes = ref<string[]>([])
+const draftAction = ref<string>('')
+const draftPerformedBy = ref<string>('')
+
+// Liste des entity types (distincts) pour alimenter les cases a cocher.
 const entityTypes = ref<string[]>([])
-// On garde l'identifiant technique comme `value` pour l'envoi API, mais on
-// affiche le libelle traduit quand il existe (fallback: identifiant brut).
 const entityTypeOptions = computed(() =>
     entityTypes.value.map(type => ({ value: type, label: formatEntityType(type) })),
 )
 
-// Bind champ performedBy : MalioInputText attend `string | null`, on ne peut
-// pas binder directement un `string | undefined` reactive.
-const performedByInput = ref<string>('')
-
-// Action : '' = "toutes les actions". On declare l'option dans `actionOptions`
-// plutot que via `emptyOptionLabel` (qui n'inclut pas l'option vide dans
-// `props.options`, donc `selectedLabel` reste vide). On evite aussi `value: null`
-// car MalioSelect grise visuellement les options dont la valeur est `null`
-// (Select.vue:137) — on utilise donc une chaine vide comme sentinelle.
-const actionValue = ref<string>('')
+// Actions : '' = "toutes". Sert d'options aux boutons radio.
 const actionOptions = [
     { value: '',       label: t('audit.filters.all_actions') },
     { value: 'create', label: t('audit.action.create') },
@@ -259,29 +265,55 @@ const isFiltered = computed(() =>
 // (reseau lent) n'ecrase les resultats d'une requete ulterieure.
 let requestToken = 0
 
-// Pendant un reset, on suspend temporairement les watchers pour ne pas
-// declencher 4 fetchs paralleles (un par champ mute). Les watchers Vue 3
-// sont asynchrones (microtask) : il faut attendre un `nextTick` avant de
-// les relacher, sinon le flag est deja `false` au moment ou ils s'executent
-// et les fetchs partent quand meme. Un seul loadEntries() est appele
-// explicitement apres la liberation.
-let watchersSuspended = false
+// Ouvre le drawer en recopiant l'etat applique vers le brouillon, pour que la
+// reouverture reflete les filtres actifs.
+function openFilters(): void {
+    draftDateFrom.value = filters.performedAtAfter ?? null
+    draftDateTo.value = filters.performedAtBefore ?? null
+    draftEntityTypes.value = Array.isArray(filters.entityType)
+        ? [...filters.entityType]
+        : (filters.entityType ? [filters.entityType] : [])
+    draftAction.value = filters.action ?? ''
+    draftPerformedBy.value = filters.performedBy ?? ''
+    filterDrawerOpen.value = true
+}
+
+// Bascule un type d'entite dans le brouillon (multi-selection).
+function toggleEntity(value: string, selected: boolean): void {
+    const set = new Set(draftEntityTypes.value)
+    if (selected) set.add(value)
+    else set.delete(value)
+    draftEntityTypes.value = [...set]
+}
+
+// "Reinitialiser" : vide le brouillon ET les filtres actifs, puis recharge.
+// La remise a zero s'applique immediatement (la table revient a la liste
+// complete) ; le drawer reste ouvert pour montrer le formulaire vide.
+function resetFilters(): void {
+    draftDateFrom.value = null
+    draftDateTo.value = null
+    draftEntityTypes.value = []
+    draftAction.value = ''
+    draftPerformedBy.value = ''
 
-async function resetFilters(): Promise<void> {
-    watchersSuspended = true
     filters.performedAtAfter = undefined
     filters.performedAtBefore = undefined
     filters.entityType = undefined
-    filters.performedBy = undefined
     filters.action = undefined
+    filters.performedBy = undefined
     filters.page = 1
-    selectedEntityTypes.value = []
-    performedByInput.value = ''
-    actionValue.value = ''
-    // Les watchers mute de Vue 3 se planifient en microtask : on attend
-    // leur execution avec le flag `true`, puis on libere.
-    await nextTick()
-    watchersSuspended = false
+    loadEntries()
+}
+
+// "Voir les resultats" : applique le brouillon, recharge et ferme le drawer.
+function applyFilters(): void {
+    filters.performedAtAfter = draftDateFrom.value ?? undefined
+    filters.performedAtBefore = draftDateTo.value ?? undefined
+    filters.entityType = draftEntityTypes.value.length > 0 ? [...draftEntityTypes.value] : undefined
+    filters.action = draftAction.value === '' ? undefined : draftAction.value
+    filters.performedBy = draftPerformedBy.value.trim() === '' ? undefined : draftPerformedBy.value.trim()
+    filters.page = 1
+    filterDrawerOpen.value = false
     loadEntries()
 }
 
@@ -291,7 +323,8 @@ async function loadEntries(): Promise<void> {
     try {
         const data = await fetchLogsCached({
             ...filters,
-            // Convertit datetime-local (YYYY-MM-DDTHH:MM) en ISO pour l'API.
+            // MalioDateTime fournit une date+heure sans fuseau (heure locale) ;
+            // on la convertit en ISO UTC pour l'API (bornes exactes, intervalle inclusif).
             performedAtAfter:  filters.performedAtAfter ? toIso(filters.performedAtAfter) : undefined,
             performedAtBefore: filters.performedAtBefore ? toIso(filters.performedAtBefore) : undefined,
         })
@@ -315,14 +348,9 @@ async function loadEntries(): Promise<void> {
     }
 }
 
-// Debounce auto-importe depuis `frontend/shared/utils/debounce.ts` : evite
-// un refetch a chaque frappe sur le champ texte performedBy (reseau + SQL)
-// et laisse l'utilisateur finir sa saisie avant de lancer la requete.
-const debouncedReload = debounce(() => loadEntries(), 300)
-
 function toIso(localDateTime: string): string {
-    // datetime-local n'a pas de timezone : on assume heure locale et on
-    // laisse le navigateur generer l'ISO via Date().
+    // MalioDateTime emet une date+heure sans fuseau (heure murale locale) ;
+    // on laisse Date() generer l'ISO UTC correspondant pour l'API.
     return new Date(localDateTime).toISOString()
 }
 
@@ -368,43 +396,6 @@ function onPerPageChange(value: number): void {
     loadEntries()
 }
 
-// Sync MalioSelectCheckbox -> filters.entityType + reset page 1 + reload.
-watch(selectedEntityTypes, values => {
-    if (watchersSuspended) return
-    filters.entityType = values.length > 0 ? values.map(v => String(v)) : undefined
-    filters.page = 1
-    loadEntries()
-})
-
-// Sync MalioSelect action -> filters.action.
-watch(actionValue, value => {
-    if (watchersSuspended) return
-    filters.action = value === '' ? undefined : value
-    filters.page = 1
-    loadEntries()
-})
-
-// Sync performedBy : frappe utilisateur -> debounce 300ms pour eviter un
-// refetch par caractere. Le reset passe par debouncedReload egalement pour
-// coalescer si plusieurs watchers tirent en meme temps.
-watch(performedByInput, value => {
-    if (watchersSuspended) return
-    filters.performedBy = value === '' ? undefined : value
-    filters.page = 1
-    debouncedReload()
-})
-
-// Synchronisation reactive : tout changement de dates declenche un fetch +
-// reset de la pagination a la page 1.
-watch(
-    () => [filters.performedAtAfter, filters.performedAtBefore],
-    () => {
-        if (watchersSuspended) return
-        filters.page = 1
-        loadEntries()
-    },
-)
-
 onMounted(async () => {
     // Charge les entity types en parallele de la liste principale : un
     // echec du premier endpoint (ex: reseau flaky) ne doit pas empecher

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

@@ -1,22 +1,20 @@
 <template>
     <div>
-        <!-- En-tete -->
-        <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.roles.title') }}
-            </h1>
-            <MalioButton
-                v-if="can('core.roles.manage')"
-                :label="t('admin.roles.newRole')"
-                icon-name="mdi:add-bold"
-                icon-position="left"
-                @click="openCreateDrawer"
-            />
-        </div>
+        <PageHeader>
+            {{ t('admin.roles.title') }}
+            <template #actions>
+                <MalioButton
+                    v-if="can('core.roles.manage')"
+                    :label="t('admin.roles.newRole')"
+                    icon-name="mdi:add-bold"
+                    icon-position="left"
+                    @click="openCreateDrawer"
+                />
+            </template>
+        </PageHeader>
 
         <!-- 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 -->
-        <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>
+        <PageHeader>{{ t('admin.users.title') }}</PageHeader>
 
         <!-- 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>
-        <p class="mt-4 text-neutral-500">{{ $t('dashboard.welcome') }}</p>
+        <PageHeader>{{ $t('dashboard.title') }}</PageHeader>
+        <p class="text-neutral-500">{{ $t('dashboard.welcome') }}</p>
     </div>
 </template>
 

frontend/modules/sites/components/SiteDrawer.vue

@@ -1,11 +1,17 @@
 <template>
     <MalioDrawer
         :model-value="modelValue"
-        :title="isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite')"
         drawer-class="w-full max-w-lg"
+        header-class="border-b border-black"
+        footer-class="justify-between border-t border-black p-6"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <form class="flex flex-col gap-6 p-4" @submit.prevent="handleSave">
+        <template #header>
+            <h2 class="text-[24px] font-bold">
+                {{ isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite') }}
+            </h2>
+        </template>
+        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
             <MalioInputText
                 v-model="form.name"
                 :label="t('admin.sites.form.name')"
@@ -70,30 +76,35 @@
                 </p>
             </div>
 
-            <!-- Boutons -->
-            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
-                <MalioButton
-                    v-if="isEditMode"
-                    :label="t('common.delete')"
-                    variant="danger"
-                    icon-name="mdi:delete-outline"
-                    icon-position="left"
-                    @click="emit('delete')"
-                />
-                <MalioButton
-                    v-else
-                    :label="t('common.cancel')"
-                    variant="tertiary"
-                    @click="emit('update:modelValue', false)"
-                />
-                <MalioButton
-                    :label="t('common.save')"
-                    variant="primary"
-                    :disabled="saving || !isValidHex"
-                    @click="handleSave"
-                />
-            </div>
         </form>
+
+        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
+             scrollable (shrink-0), donc reellement fige sans sticky. -->
+        <template #footer>
+            <MalioButton
+                v-if="isEditMode"
+                :label="t('common.delete')"
+                variant="danger"
+                icon-name="mdi:delete-outline"
+                icon-position="left"
+                button-class="w-[150px]"
+                @click="emit('delete')"
+            />
+            <MalioButton
+                v-else
+                :label="t('common.cancel')"
+                variant="tertiary"
+                button-class="w-[150px]"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.save')"
+                variant="primary"
+                button-class="w-[150px]"
+                :disabled="saving || !isValidHex"
+                @click="handleSave"
+            />
+        </template>
     </MalioDrawer>
 </template>
 

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

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

frontend/package-lock.json

@@ -7,7 +7,7 @@
       "name": "starseed-frontend",
       "hasInstallScript": true,
       "dependencies": {
-        "@malio/layer-ui": "^1.5.0",
+        "@malio/layer-ui": "^1.7.1",
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -1866,9 +1866,9 @@
       "license": "MIT"
     },
     "node_modules/@malio/layer-ui": {
-      "version": "1.5.0",
-      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.5.0/layer-ui-1.5.0.tgz",
-      "integrity": "sha512-uVuG8kRakWgpWYQCMUf1LFD+gjx0iRFfNJn/jlqjxiZmZyGZMckcMW2qA9hGZBiheBsTJWw1pRR4ufuyAYPY0A==",
+      "version": "1.7.1",
+      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.1/layer-ui-1.7.1.tgz",
+      "integrity": "sha512-RYMMappWt/fgjD+BM7//h2O6kxD6WH9Fui8hoC29xtKySRQsqD61XKTdR7BRRkpktbxKmV39q/hblyAFBqV5yw==",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",

frontend/package.json

@@ -17,7 +17,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.5.0",
+    "@malio/layer-ui": "^1.7.1",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",

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>

makefile

@@ -70,6 +70,7 @@ help:
 	@printf "    \033[36m%-28s\033[0m %s\n" "install-e2e-deps"         "One-time : Chromium + libs systeme (sudo)"
 	@printf "\n  \033[1;33mQualite code\033[0m\n"
 	@printf "    \033[36m%-28s\033[0m %s\n" "php-cs-fixer-allow-risky" "Fix code style PHP (utilise par le pre-commit)"
+	@printf "    \033[36m%-28s\033[0m %s\n" "php-cs-fixer-check"       "Dry-run du fixer (CI / verif avant push)"
 	@printf "\n  Plus de details : \033[4mREADME.md\033[0m, \033[4mCLAUDE.md\033[0m\n\n"
 
 env-init:
@@ -258,6 +259,11 @@ php-cs-fixer-allow-risky:
 	@echo "Fixing files: $(FILES)"
 	$(EXEC_PHP_CS_FIXER) fix --config=.php-cs-fixer.dist.php --allow-risky=yes $(FILES)
 
+# Dry-run du fixer : echec si au moins un fichier n'est pas conforme.
+# Utilise par la CI (Gitea pull_request) et avant un push manuel.
+php-cs-fixer-check:
+	$(EXEC_PHP_CS_FIXER) fix --config=.php-cs-fixer.dist.php --allow-risky=yes --dry-run --diff $(FILES)
+
 test:
 	$(EXEC_PHP) php -d memory_limit="512M" vendor/bin/phpunit $(FILES)