Merge branch 'develop' into feature/ERP-41-mise-a-jour-malio-ui

# Conflicts:
#	config/reference.php

frontend/i18n/locales/fr.json

@@ -13,10 +13,12 @@
         "actions": "Actions"
     },
     "sidebar": {
-        "general": {
-            "section": "Général",
+        "administration": {
+            "section": "Administration"
+        },
+        "account": {
+            "section": "Mon compte",
             "dashboard": "Tableau de bord",
-            "admin": "Administration",
             "logout": "Déconnexion"
         },
         "commercial": {
@@ -26,7 +28,10 @@
         "core": {
             "roles": "Gestion des rôles",
             "users": "Utilisateurs",
-            "sites": "Sites"
+            "audit_log": "Journal d'audit"
+        },
+        "sites": {
+            "admin": "Sites"
         }
     },
     "dashboard": {
@@ -66,6 +71,40 @@
             "switchSuccess": "Site courant changé"
         }
     },
+    "audit": {
+        "action": {
+            "create": "Création",
+            "update": "Modification",
+            "delete": "Suppression"
+        },
+        "entity": {
+            "core_user":       "Utilisateur",
+            "core_role":       "Rôle",
+            "core_permission": "Permission",
+            "sites_site":      "Site"
+        },
+        "empty": "Aucune activité enregistrée",
+        "no_results": "Aucun résultat pour ces filtres",
+        "timeline": {
+            "empty": "Aucun historique",
+            "load_more": "Voir plus"
+        },
+        "filters": {
+            "reset": "Réinitialiser",
+            "date_from": "Du",
+            "date_to": "Au",
+            "entity_type": "Type d'entité",
+            "user": "Utilisateur",
+            "action": "Action",
+            "all_actions": "Toutes les actions"
+        },
+        "detail": {
+            "field": "Champ",
+            "old_value": "Ancienne valeur",
+            "new_value": "Nouvelle valeur"
+        },
+        "detail_title": "Détail de l'entrée"
+    },
     "success": {
         "auth": {
             "logout": "Deconnexion reussie"
@@ -102,7 +141,8 @@
             },
             "permissions": {
                 "selectAll": "Tout selectionner",
-                "noPermissions": "Aucune permission disponible"
+                "noPermissions": "Aucune permission disponible",
+                "loadFailed": "Impossible de charger le catalogue de permissions. L'enregistrement est désactivé pour éviter tout écrasement accidentel."
             }
         },
         "users": {
@@ -126,12 +166,28 @@
                 "noEffectivePermissions": "Aucune permission effective",
                 "sourceRole": "via {role}",
                 "sourceDirect": "Direct",
-                "lastAdminWarning": "Impossible de retirer le statut administrateur du dernier admin"
+                "lastAdminWarning": "Impossible de retirer le statut administrateur du dernier admin",
+                "loadFailed": "Impossible de charger les droits de cet utilisateur. L'enregistrement est désactivé pour éviter tout écrasement accidentel."
             },
             "toast": {
                 "updated": "Permissions mises à jour avec succès"
             }
         },
+        "auditLog": {
+            "title": "Journal d'audit",
+            "table": {
+                "performedAt": "Date",
+                "performedBy": "Utilisateur",
+                "entityType": "Entité",
+                "entityId": "ID",
+                "action": "Action",
+                "summary": "Résumé"
+            },
+            "pagination": {
+                "previous": "Précédent",
+                "next": "Suivant"
+            }
+        },
         "sites": {
             "title": "Gestion des sites",
             "newSite": "Nouveau site",

frontend/modules/core/components/RoleDrawer.vue

@@ -33,7 +33,15 @@
                 <h4 class="mb-3 text-sm font-semibold text-neutral-700">
                     {{ t('admin.roles.form.permissions') }}
                 </h4>
-                <div v-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
+                <!-- Etat d'erreur explicite : sans ce message, un drawer vide
+                     ressemblerait a un role legitimement sans permissions. -->
+                <div
+                    v-if="permissionsLoadFailed"
+                    class="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700"
+                >
+                    {{ t('admin.roles.permissions.loadFailed') }}
+                </div>
+                <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">
@@ -70,7 +78,7 @@
                 <MalioButton
                     :label="t('common.save')"
                     variant="primary"
-                    :disabled="saving"
+                    :disabled="saving || permissionsLoadFailed"
                     @click="handleSave"
                 />
             </div>
@@ -102,6 +110,11 @@ const emit = defineEmits<{
 
 const saving = ref(false)
 const allPermissions = ref<Permission[]>([])
+// Signale un echec de chargement du catalogue de permissions : on bloque
+// alors la sauvegarde pour eviter qu'un drawer ouvert avec zero permission
+// visible (cas d'un 403 ou d'une panne reseau) n'ecrase silencieusement
+// toutes les permissions du role.
+const permissionsLoadFailed = ref(false)
 
 const form = ref({
     label: '',
@@ -129,12 +142,21 @@ const permissionsByModule = computed<PermissionModule[]>(() => {
 
 // Charger les permissions au montage
 async function loadPermissions() {
-    const data = await api.get<{ member: Permission[] }>(
-        '/permissions',
-        { 'orphan': false, itemsPerPage: 999 },
-        { toast: false },
-    )
-    allPermissions.value = data.member
+    permissionsLoadFailed.value = false
+    try {
+        const data = await api.get<{ member: Permission[] }>(
+            '/permissions',
+            { 'orphan': false, itemsPerPage: 999 },
+            // `toast: true` : en cas d'echec (403, reseau, 500), l'utilisateur
+            // voit l'erreur remonter. Sans ce feedback, un catalogue vide
+            // ressemblerait a un role sans permissions disponibles.
+            { toast: true },
+        )
+        allPermissions.value = data.member
+    } catch {
+        allPermissions.value = []
+        permissionsLoadFailed.value = true
+    }
 }
 
 // Remplir le formulaire quand le role change

frontend/modules/core/components/UserRbacDrawer.vue

@@ -6,6 +6,16 @@
         @update:model-value="emit('update:modelValue', $event)"
     >
         <div class="flex flex-col gap-6 p-4">
+            <!-- Etat d'erreur de chargement des referentiels : bloque la
+                 sauvegarde pour empecher un ecrasement silencieux des droits. -->
+            <div
+                v-if="loadFailed"
+                class="flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800"
+            >
+                <Icon name="mdi:alert-circle-outline" class="size-5 shrink-0" />
+                {{ t('admin.users.drawer.loadFailed') }}
+            </div>
+
             <!-- Avertissement auto-edition -->
             <div
                 v-if="isSelfEdit"
@@ -103,7 +113,7 @@
                 <MalioButton
                     :label="t('common.save')"
                     variant="primary"
-                    :disabled="saving"
+                    :disabled="saving || loadFailed"
                     @click="handleSave"
                 />
             </div>
@@ -112,7 +122,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Permission, Role, UserListItem, EffectivePermission } from '~/shared/types/rbac'
+import type { Permission, Role, UserListItem, UserRbacDetail, EffectivePermission } from '~/shared/types/rbac'
 import type { Site } from '~/shared/types/sites'
 
 interface PermissionModule {
@@ -138,6 +148,10 @@ const saving = ref(false)
 const allRoles = ref<Role[]>([])
 const allPermissions = ref<Permission[]>([])
 const allSites = ref<Site[]>([])
+// Signale un echec de chargement des referentiels : on bloque alors la
+// sauvegarde pour eviter qu'un drawer ouvert sans donnees (403, reseau)
+// n'ecrase silencieusement l'etat RBAC du user (vidage roles/permissions/sites).
+const loadFailed = ref(false)
 
 const form = ref({ isAdmin: false })
 const selectedRoleIds = ref(new Set<number>())
@@ -206,39 +220,56 @@ const effectivePermissions = computed<EffectivePermission[]>(() => {
         .sort((a, b) => a.code.localeCompare(b.code))
 })
 
-// Charger roles, permissions et sites en parallele pour minimiser le TTFB
-// a l'ouverture du drawer.
-async function loadData() {
-    const [rolesData, permsData, sitesData] = await Promise.all([
-        api.get<{ member: Role[] }>('/roles', {}, { toast: false }),
-        api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 999 }, { toast: false }),
-        api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: false }),
-    ])
-    allRoles.value = rolesData.member
-    allPermissions.value = permsData.member
-    allSites.value = sitesData.member
+// Charger les referentiels (roles, permissions, sites) + le detail RBAC du user
+// en parallele pour minimiser le TTFB a l'ouverture du drawer.
+// Le detail RBAC est la seule source de verite pour l'etat initial du formulaire :
+// props.user vient de la liste /api/users qui n'expose pas les sites (groupe leger).
+async function loadData(userId: number) {
+    loadFailed.value = false
+    try {
+        const [rolesData, permsData, sitesData, userRbac] = await Promise.all([
+            // `toast: true` : en cas d'echec, l'utilisateur voit un toast
+            // d'erreur. Sans ce feedback, le drawer s'afficherait vide et la
+            // sauvegarde ecraserait silencieusement l'etat RBAC du user.
+            api.get<{ member: Role[] }>('/roles', {}, { toast: true }),
+            api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 999 }, { toast: true }),
+            api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: true }),
+            api.get<UserRbacDetail>(`/users/${userId}/rbac`, {}, { toast: true }),
+        ])
+        allRoles.value = rolesData.member
+        allPermissions.value = permsData.member
+        allSites.value = sitesData.member
+
+        form.value.isAdmin = userRbac.isAdmin
+        selectedRoleIds.value = new Set((userRbac.roles ?? []).map(iriToId))
+        selectedDirectPermissionIds.value = new Set((userRbac.directPermissions ?? []).map(iriToId))
+        selectedSiteIds.value = new Set((userRbac.sites ?? []).map(iriToId))
+    } catch {
+        loadFailed.value = true
+        allRoles.value = []
+        allPermissions.value = []
+        allSites.value = []
+        resetForm()
+    }
 }
 
-// Remplir le formulaire quand le user change
-watch(() => props.user, (user) => {
-    if (user) {
-        form.value.isAdmin = user.isAdmin
-        selectedRoleIds.value = new Set(user.roles.map(iriToId))
-        selectedDirectPermissionIds.value = new Set(user.directPermissions.map(iriToId))
-        selectedSiteIds.value = new Set((user.sites ?? []).map(iriToId))
-    } else {
-        form.value.isAdmin = false
-        selectedRoleIds.value = new Set()
-        selectedDirectPermissionIds.value = new Set()
-        selectedSiteIds.value = new Set()
+function resetForm() {
+    form.value.isAdmin = false
+    selectedRoleIds.value = new Set()
+    selectedDirectPermissionIds.value = new Set()
+    selectedSiteIds.value = new Set()
+}
+
+// Recharger a l'ouverture OU quand le user change pendant que le drawer est ouvert.
+// Le watch combine evite un double fetch si les deux changent dans le meme tick.
+watch([() => props.modelValue, () => props.user?.id], ([open, userId]) => {
+    if (open && userId) {
+        loadData(userId)
+    } else if (!open) {
+        resetForm()
     }
 }, { immediate: true })
 
-// Charger les donnees quand le drawer s'ouvre
-watch(() => props.modelValue, (open) => {
-    if (open) loadData()
-})
-
 function toggleRole(id: number, selected: boolean) {
     const ids = new Set(selectedRoleIds.value)
     if (selected) ids.add(id)

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

@@ -0,0 +1,422 @@
+<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. -->
+            <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"
+                        group-class="h-10"
+                    />
+                </div>
+                <!-- TODO(malio-ui): remplacer par MalioSelect quand la lib
+                     supportera de maniere fiable des options a valeur string
+                     (cf. note Lesstime CLAUDE.md). Exception documentee dans
+                     CLAUDE.md (section "Composants formulaires"). -->
+                <div>
+                    <label class="mb-1 block text-xs font-medium text-gray-600">
+                        {{ t('audit.filters.action') }}
+                    </label>
+                    <select
+                        v-model="actionValue"
+                        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"
+                    >
+                        <option value="">{{ t('audit.filters.all_actions') }}</option>
+                        <option v-for="opt in actionOptions" :key="opt.value" :value="opt.value">
+                            {{ opt.label }}
+                        </option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="mt-3 flex justify-end">
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('audit.filters.reset')"
+                    button-class="text-xs"
+                    @click="resetFilters"
+                />
+            </div>
+        </section>
+
+        <!-- Tableau -->
+        <MalioDataTable
+            class="mt-4"
+            :columns="columns"
+            :items="rows"
+            :total-items="totalItems"
+            :page="filters.page ?? 1"
+            :per-page="filters.itemsPerPage ?? 10"
+            :per-page-options="[10, 25, 50]"
+            :empty-message="isFiltered ? t('audit.no_results') : t('audit.empty')"
+            @update:page="onPageChange"
+            @update:per-page="onPerPageChange"
+            @row-click="onRowClick"
+        >
+            <template #cell-action="{ item }">
+                <span
+                    class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+                    :class="actionBadgeClass(item.action as string)"
+                >
+                    {{ t(`audit.action.${item.action}`) }}
+                </span>
+            </template>
+            <template #cell-entityType="{ item }">
+                <span
+                    class="text-xs"
+                    :title="item.entityType as string"
+                >{{ formatEntityType(item.entityType as string) }}</span>
+            </template>
+            <template #cell-entityId="{ item }">
+                <span class="font-mono text-xs">{{ item.entityId }}</span>
+            </template>
+            <template #cell-summary="{ item }">
+                <span class="text-xs text-gray-600">{{ item.summary }}</span>
+            </template>
+        </MalioDataTable>
+
+        <!-- Drawer detail : diff courant + timeline complete de l'entite -->
+        <MalioDrawer
+            v-model="drawerOpen"
+            :title="drawerTitle"
+            drawer-class="max-w-2xl"
+        >
+            <div v-if="selectedEntry">
+                <AuditLogDetail :entry="selectedEntry" />
+                <div class="mt-4 border-t border-gray-200 pt-3">
+                    <h3
+                        class="text-sm font-medium text-gray-700 mb-2"
+                        :title="selectedEntry.entityType"
+                    >
+                        {{ formatEntityType(selectedEntry.entityType) }} #{{ selectedEntry.entityId }}
+                    </h3>
+                    <AuditTimeline
+                        :entity-type="selectedEntry.entityType"
+                        :entity-id="selectedEntry.entityId"
+                    />
+                </div>
+            </div>
+        </MalioDrawer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import type { AuditLogEntry, AuditLogFilters } from '~/shared/types'
+
+const { t, te } = useI18n()
+const { can } = usePermissions()
+const { fetchLogsCached, fetchEntityTypes } = useAuditLog()
+
+// Traduit un identifiant `module.Entity` (ex: `core.User`, `sites.Site`) en
+// libelle lisible via la cle i18n `audit.entity.<module>_<entity>`. Si aucune
+// traduction n'existe, on retombe sur l'identifiant brut pour rester debug-friendly.
+function formatEntityType(type: string): string {
+    const key = `audit.entity.${type.toLowerCase().replace(/\./g, '_')}`
+    return te(key) ? t(key) : type
+}
+
+// Protection cote UI : le middleware `modules.global.ts` filtre deja les
+// routes desactivees, mais si quelqu'un atterit ici sans la permission on
+// renvoie une 403 plutot que de flasher un ecran vide.
+if (!can('core.audit_log.view')) {
+    throw createError({ statusCode: 403, statusMessage: 'Forbidden' })
+}
+
+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").
+const filters = reactive<AuditLogFilters>({
+    performedAtAfter:  undefined,
+    performedAtBefore: undefined,
+    entityType:        undefined,
+    performedBy:       undefined,
+    action:            undefined,
+    page:              1,
+    itemsPerPage:      10,
+})
+
+// Multi-selection entity_type : bind dedie au MalioSelectCheckbox.
+// Attention : les composants Malio attendent `{ label, value }` (pas `{ text }`).
+const selectedEntityTypes = ref<(string | number)[]>([])
+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 : MalioSelect ne gere pas fiablement des options a valeur string (cf.
+// note Lesstime CLAUDE.md). On utilise un `<select>` natif stylise comme les
+// inputs dates pour garder un look coherent. '' = "toutes les actions".
+const actionValue = ref<string>('')
+const actionOptions = [
+    { value: 'create', label: t('audit.action.create') },
+    { value: 'update', label: t('audit.action.update') },
+    { value: 'delete', label: t('audit.action.delete') },
+]
+
+const entries = ref<AuditLogEntry[]>([])
+const totalItems = ref(0)
+const loading = ref(false)
+
+const drawerOpen = ref(false)
+const selectedEntry = ref<AuditLogEntry | null>(null)
+
+const columns = [
+    { key: 'performedAt', label: t('admin.auditLog.table.performedAt') },
+    { key: 'performedBy', label: t('admin.auditLog.table.performedBy') },
+    { key: 'entityType',  label: t('admin.auditLog.table.entityType') },
+    { key: 'entityId',    label: t('admin.auditLog.table.entityId') },
+    { key: 'action',      label: t('admin.auditLog.table.action') },
+    { key: 'summary',     label: t('admin.auditLog.table.summary') },
+]
+
+// Transforme chaque AuditLogEntry en ligne compatible MalioDataTable.
+// On conserve `id` pour retrouver l'entry complete sur row-click.
+const rows = computed(() =>
+    entries.value.map(entry => ({
+        id: entry.id,
+        performedAt: formatDate(entry.performedAt),
+        performedBy: entry.performedBy,
+        entityType:  entry.entityType,
+        entityId:    entry.entityId,
+        action:      entry.action,
+        summary:     summarize(entry),
+    })),
+)
+
+const drawerTitle = computed(() =>
+    selectedEntry.value
+        ? `${formatEntityType(selectedEntry.value.entityType)} #${selectedEntry.value.entityId}`
+        : t('audit.detail_title'),
+)
+
+const isFiltered = computed(() =>
+    Boolean(filters.performedAtAfter || filters.performedAtBefore
+        || (Array.isArray(filters.entityType) ? filters.entityType.length : filters.entityType)
+        || filters.performedBy || filters.action),
+)
+
+// Anti-race : chaque fetch incremente un compteur ; seul le dernier en date
+// ecrit les resultats dans `entries`/`totalItems`. Evite qu'une reponse tardive
+// (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
+
+async function resetFilters(): Promise<void> {
+    watchersSuspended = true
+    filters.performedAtAfter = undefined
+    filters.performedAtBefore = undefined
+    filters.entityType = undefined
+    filters.performedBy = undefined
+    filters.action = 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()
+}
+
+async function loadEntries(): Promise<void> {
+    const token = ++requestToken
+    loading.value = true
+    try {
+        const data = await fetchLogsCached({
+            ...filters,
+            // Convertit datetime-local (YYYY-MM-DDTHH:MM) en ISO pour l'API.
+            performedAtAfter:  filters.performedAtAfter ? toIso(filters.performedAtAfter) : undefined,
+            performedAtBefore: filters.performedAtBefore ? toIso(filters.performedAtBefore) : undefined,
+        })
+        // Reponse obsolete (un fetch plus recent a ete lance entre-temps) :
+        // on ignore le resultat pour ne pas overwrite l'etat courant.
+        if (token !== requestToken) return
+        entries.value = data.member ?? []
+        totalItems.value = data.totalItems ?? 0
+    } catch {
+        // En cas d'echec (reseau, 403, 500...), on reset l'etat pour ne pas
+        // laisser l'utilisateur croire que les donnees affichees sont a jour.
+        // Le toast d'erreur est deja emis par `useApi()` via useAuditLog.
+        if (token === requestToken) {
+            entries.value = []
+            totalItems.value = 0
+        }
+    } finally {
+        if (token === requestToken) {
+            loading.value = false
+        }
+    }
+}
+
+// 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().
+    return new Date(localDateTime).toISOString()
+}
+
+function formatDate(iso: string): string {
+    return new Date(iso).toLocaleString('fr-FR', {
+        dateStyle: 'short',
+        timeStyle: 'short',
+    })
+}
+
+function actionBadgeClass(action: string): string {
+    switch (action) {
+        case 'create': return 'bg-green-100 text-green-800'
+        case 'update': return 'bg-yellow-100 text-yellow-800'
+        case 'delete': return 'bg-red-100 text-red-800'
+        default: return 'bg-gray-100 text-gray-800'
+    }
+}
+
+function summarize(entry: AuditLogEntry): string {
+    const keys = Object.keys(entry.changes)
+    if (keys.length === 0) return '—'
+    if (keys.length <= 3) return keys.join(', ')
+    return `${keys.slice(0, 3).join(', ')}… (+${keys.length - 3})`
+}
+
+function onRowClick(item: Record<string, unknown>): void {
+    const entry = entries.value.find(e => e.id === item.id)
+    if (entry) {
+        selectedEntry.value = entry
+        drawerOpen.value = true
+    }
+}
+
+function onPageChange(value: number): void {
+    filters.page = value
+    loadEntries()
+}
+
+function onPerPageChange(value: number): void {
+    filters.itemsPerPage = value
+    filters.page = 1
+    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 select action natif -> 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
+    // le tableau d'audit de s'afficher. En cas d'erreur, on laisse le
+    // filtre vide — l'utilisateur pourra quand meme consulter le journal.
+    try {
+        entityTypes.value = await fetchEntityTypes()
+    } catch {
+        entityTypes.value = []
+    }
+    await loadEntries()
+})
+</script>

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

@@ -114,6 +114,10 @@ async function loadRoles() {
             { toast: false },
         )
         roles.value = data.member
+    } catch {
+        // Reset sur echec pour ne pas afficher de donnees stale (ancienne
+        // requete reussie avant une perte reseau ou 403).
+        roles.value = []
     } finally {
         loading.value = false
     }

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

@@ -38,7 +38,6 @@
 
 <script setup lang="ts">
 import type { UserListItem } from '~/shared/types/rbac'
-import type { Site } from '~/shared/types/sites'
 
 const { t } = useI18n()
 const api = useApi()
@@ -49,24 +48,21 @@ useHead({ title: t('admin.users.title') })
 const canManage = computed(() => can('core.users.manage'))
 
 const users = ref<UserListItem[]>([])
-const sitesById = ref(new Map<number, Site>())
 const loading = ref(false)
 const drawerOpen = ref(false)
 const selectedUser = ref<UserListItem | null>(null)
 
+// La colonne "Sites" n'est plus affichee dans la liste : le detail des sites
+// rattaches est consulte/edite via le drawer (GET /users/{id}/rbac). Garder
+// un payload leger sur /api/users facilite la pagination et evite de fuiter
+// l'info cross-site aux users partageant juste un site avec l'appelant.
 const columns = [
     { key: 'username', label: t('admin.users.table.username') },
     { key: 'admin', label: t('admin.users.table.admin') },
     { key: 'roles', label: t('admin.users.table.roles') },
     { key: 'directPermissions', label: t('admin.users.table.directPermissions') },
-    { key: 'sites', label: t('admin.users.table.sites') },
 ]
 
-// Extraire l'id numerique depuis une IRI API Platform type `/api/sites/3`.
-function iriToId(iri: string): number {
-    return Number(iri.split('/').pop())
-}
-
 const userItems = computed(() =>
     users.value.map(user => ({
         id: user.id,
@@ -74,27 +70,19 @@ const userItems = computed(() =>
         admin: user.isAdmin,
         roles: user.roles.length,
         directPermissions: user.directPermissions.length,
-        // Affichage : liste des noms de sites separes par virgule. Les IRIs
-        // du payload /api/users (groupe user:list) sont resolues via la Map
-        // construite en parallele depuis /api/sites.
-        sites: (user.sites ?? [])
-            .map(iri => sitesById.value.get(iriToId(iri))?.name)
-            .filter((name): name is string => Boolean(name))
-            .join(', '),
     })),
 )
 
 async function loadUsers() {
     loading.value = true
     try {
-        // Chargement parallele : les sites alimentent la Map de resolution
-        // IRI→name pour la colonne "Sites" de la table.
-        const [usersData, sitesData] = await Promise.all([
-            api.get<{ member: UserListItem[] }>('/users', {}, { toast: false }),
-            api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: false }),
-        ])
+        const usersData = await api.get<{ member: UserListItem[] }>('/users', {}, { toast: false })
         users.value = usersData.member
-        sitesById.value = new Map(sitesData.member.map(s => [s.id, s]))
+    } catch {
+        // Reset sur echec pour ne pas afficher de donnees stale (ancienne
+        // requete reussie avant une perte reseau ou 403). Pas de toast par
+        // design ici : on laisse la liste vide parler d'elle-meme.
+        users.value = []
     } finally {
         loading.value = false
     }

frontend/modules/core/pages/logout.vue

@@ -11,6 +11,7 @@ const auth = useAuthStore()
 const { resetSidebar } = useSidebar()
 const { resetModules } = useModules()
 const { resetCurrentSite } = useCurrentSite()
+const { resetAuditLog } = useAuditLog()
 
 onMounted(async () => {
     try {
@@ -18,13 +19,14 @@ onMounted(async () => {
     } finally {
         // Les resets sont garantis meme si auth.logout() rejette : eviter
         // qu'un user suivant (connecte sur le meme onglet) voie l'etat de
-        // l'ancien. Les trois fonctions reset sont synchrones et ne
+        // l'ancien. Toutes les fonctions reset sont synchrones et ne
         // peuvent pas throw (juste des assignations reactives).
         // navigateTo est dans le finally pour garantir la redirection
         // meme si auth.logout() lance une exception (ex: reseau coupé).
         resetSidebar()
         resetModules()
         resetCurrentSite()
+        resetAuditLog()
         await navigateTo('/login')
     }
 })

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

@@ -118,6 +118,10 @@ async function loadSites() {
             { toast: false },
         )
         sites.value = data.member
+    } catch {
+        // Reset sur echec pour ne pas afficher de donnees stale (ancienne
+        // requete reussie avant une perte reseau ou 403).
+        sites.value = []
     } finally {
         loading.value = false
     }

frontend/package-lock.json

@@ -20,6 +20,7 @@
       },
       "devDependencies": {
         "@nuxt/eslint-config": "^1.9.0",
+        "@playwright/test": "^1.59.1",
         "@typescript-eslint/eslint-plugin": "^8.44.1",
         "@typescript-eslint/parser": "^8.44.1",
         "@vitejs/plugin-vue": "^6.0.6",
@@ -3929,6 +3930,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -13209,6 +13226,53 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pluralize": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",

frontend/package.json

@@ -12,7 +12,9 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@malio/layer-ui": "^1.5.0",
@@ -28,6 +30,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.9.0",
+    "@playwright/test": "^1.59.1",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
     "@vitejs/plugin-vue": "^6.0.6",

frontend/playwright.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Config Playwright pour les tests E2E de Coltura.
+ *
+ * Pre-requis avant de lancer :
+ *   1. Les containers Docker tournent (`make start`)
+ *   2. Le dev server Nuxt est lance (`make dev-nuxt`) sur le port 3004
+ *   3. Les personas E2E sont seedes (`make seed-e2e` — cf. SeedE2ECommand cote back)
+ *
+ * La baseURL cible le dev server Nuxt (HMR) en dev local ; surcharger avec
+ * PLAYWRIGHT_BASE_URL=http://localhost:8083 pour taper sur le build Nginx
+ * (au plus pres de la prod, utile en CI).
+ */
+export default defineConfig({
+    testDir: './tests/e2e',
+
+    // Interdit `test.only` en CI pour ne pas skipper involontairement la suite.
+    forbidOnly: !!process.env.CI,
+
+    // Pas de retry en local (bugs a reproduire), 2 retries en CI (flaky mitige).
+    retries: process.env.CI ? 2 : 0,
+
+    // Parallelisme : 1 worker local pour faciliter le debug, defaut en CI.
+    workers: process.env.CI ? undefined : 1,
+
+    reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
+
+    use: {
+        baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3004',
+        trace: 'on-first-retry',
+        screenshot: 'only-on-failure',
+        video: 'retain-on-failure',
+    },
+
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+    ],
+})

frontend/public/robots.txt

@@ -1,2 +1,2 @@
 User-Agent: *
-Disallow:
+Disallow: /

frontend/shared/components/audit/AuditLogDetail.vue

@@ -0,0 +1,100 @@
+<template>
+    <!--
+        Vue de detail d'une ligne d'audit : tableau field/old/new pour une
+        update, sinon snapshot complet sous forme de liste { cle: valeur }.
+    -->
+    <div class="text-sm">
+        <p class="text-xs text-gray-500 mb-2">
+            <span v-if="entry.ipAddress">IP: {{ entry.ipAddress }}</span>
+            <span v-if="entry.requestId" class="ml-3">Req: {{ entry.requestId }}</span>
+        </p>
+
+        <div v-if="entry.action === 'update'">
+            <!-- Tableau de comparaison field/old/new. MalioDataTable n'est
+                 pas adapte ici : cas presentationnel non-paginable (cf.
+                 exception documentee dans CLAUDE.md). -->
+            <table class="min-w-full border border-gray-200 text-xs">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.field') }}</th>
+                        <th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.old_value') }}</th>
+                        <th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.new_value') }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(diff, field) in updateDiff" :key="field" class="border-t border-gray-200">
+                        <td class="px-2 py-1 font-mono">{{ field }}</td>
+                        <td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
+                        <td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
+                    </tr>
+                    <!-- Modifications de collections to-many : shape different
+                         { added: [ids], removed: [ids] } → affiche + et - sur
+                         la meme ligne pour garder une colonne field unique. -->
+                    <tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
+                        <td class="px-2 py-1 font-mono">{{ field }}</td>
+                        <td class="px-2 py-1 text-red-700">
+                            <span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
+                            <span v-else class="text-gray-400">∅</span>
+                        </td>
+                        <td class="px-2 py-1 text-green-700">
+                            <span v-if="diff.added.length">+ {{ diff.added.join(', ') }}</span>
+                            <span v-else class="text-gray-400">∅</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div v-else class="space-y-1">
+            <div v-for="(value, key) in entry.changes" :key="key" class="flex gap-2">
+                <span class="font-mono text-xs text-gray-600">{{ key }}:</span>
+                <span class="text-xs">{{ formatValue(value) }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AuditLogEntry } from '~/shared/types'
+
+const props = defineProps<{ entry: AuditLogEntry }>()
+
+const { t } = useI18n()
+
+// Extrait les entrees au shape { old, new } pour les updates scalaires.
+const updateDiff = computed<Record<string, { old: unknown; new: unknown }>>(() => {
+    const out: Record<string, { old: unknown; new: unknown }> = {}
+    for (const [key, value] of Object.entries(props.entry.changes)) {
+        if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
+            out[key] = value as { old: unknown; new: unknown }
+        }
+    }
+    return out
+})
+
+// Extrait les entrees au shape { added, removed } pour les modifications
+// de collections to-many (cf. AuditListener::captureCollectionChange).
+const collectionDiff = computed<Record<string, { added: unknown[]; removed: unknown[] }>>(() => {
+    const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
+    for (const [key, value] of Object.entries(props.entry.changes)) {
+        if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
+            const diff = value as { added: unknown; removed: unknown }
+            out[key] = {
+                added:   Array.isArray(diff.added) ? diff.added : [],
+                removed: Array.isArray(diff.removed) ? diff.removed : [],
+            }
+        }
+    }
+    return out
+})
+
+function formatValue(value: unknown): string {
+    if (value === null || value === undefined) return '∅'
+    // Passe par i18n plutot qu'un hardcode FR : si une autre locale est
+    // ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
+    if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
+    if (typeof value === 'object') return JSON.stringify(value)
+    return String(value)
+}
+</script>

frontend/shared/components/audit/AuditTimeline.vue

@@ -0,0 +1,252 @@
+<template>
+    <!--
+        Garde permission : aucun rendu DOM ni appel API si l'utilisateur n'a
+        pas le droit. On wrappe le contenu dans un bloc v-if plutot qu'un div
+        vide pour eviter de polluer la layout quand le composant est embarque
+        dans une page qui rend deja sa propre structure.
+    -->
+    <div v-if="canView" class="audit-timeline">
+        <!-- Skeleton loader initial -->
+        <ul v-if="loading && entries.length === 0" class="space-y-3">
+            <li v-for="i in 3" :key="i" class="flex gap-3">
+                <div class="h-3 w-3 rounded-full bg-gray-200 animate-pulse mt-1.5" />
+                <div class="flex-1 space-y-2">
+                    <div class="h-3 w-1/3 rounded bg-gray-200 animate-pulse" />
+                    <div class="h-2 w-2/3 rounded bg-gray-100 animate-pulse" />
+                </div>
+            </li>
+        </ul>
+
+        <p
+            v-else-if="!loading && entries.length === 0"
+            class="text-sm text-gray-500 italic"
+        >
+            {{ t('audit.timeline.empty') }}
+        </p>
+
+        <ul v-else class="relative border-l-2 border-gray-200 pl-6 space-y-5">
+            <li
+                v-for="entry in entries"
+                :key="entry.id"
+                class="relative"
+            >
+                <!-- Dot sur la barre verticale. Couleur selon action. -->
+                <span
+                    class="absolute -left-[31px] top-1 h-3 w-3 rounded-full ring-2 ring-white"
+                    :class="dotClass(entry.action)"
+                />
+
+                <div class="flex items-start justify-between gap-4">
+                    <div class="flex-1 min-w-0">
+                        <p class="text-sm">
+                            <span class="font-medium">{{ entry.performedBy }}</span>
+                            <span class="text-gray-500"> — {{ t(`audit.action.${entry.action}`) }}</span>
+                        </p>
+
+                        <!-- Update : diff field-by-field. Create/Delete : liste des champs. -->
+                        <div v-if="entry.action === 'update'" class="mt-1 text-xs text-gray-600 space-y-0.5">
+                            <div v-for="(diff, field) in updateDiff(entry)" :key="field">
+                                <span class="font-medium">{{ field }}</span> :
+                                <span class="line-through text-red-600">{{ formatValue(diff.old) }}</span>
+                                <span class="mx-1">→</span>
+                                <span class="text-green-700">{{ formatValue(diff.new) }}</span>
+                            </div>
+                            <!-- Modifications de collections to-many. -->
+                            <div v-for="(diff, field) in collectionDiff(entry)" :key="`col-${field}`">
+                                <span class="font-medium">{{ field }}</span> :
+                                <span v-if="diff.removed.length" class="text-red-600">−{{ diff.removed.join(', ') }}</span>
+                                <span v-if="diff.removed.length && diff.added.length" class="mx-1"> </span>
+                                <span v-if="diff.added.length" class="text-green-700">+{{ diff.added.join(', ') }}</span>
+                            </div>
+                        </div>
+                        <div v-else class="mt-1 text-xs text-gray-600">
+                            {{ snapshotSummary(entry) }}
+                        </div>
+                    </div>
+
+                    <!-- Date relative FR + tooltip absolu -->
+                    <time
+                        :title="absoluteDate(entry.performedAt)"
+                        class="shrink-0 text-xs text-gray-500"
+                    >
+                        {{ relativeDate(entry.performedAt) }}
+                    </time>
+                </div>
+            </li>
+        </ul>
+
+        <!-- Lazy loading : bouton "Voir plus" si plus de pages. -->
+        <div v-if="hasMore" class="mt-4 flex justify-center">
+            <MalioButton
+                variant="tertiary"
+                :label="loading ? t('common.loading') : t('audit.timeline.load_more')"
+                :disabled="loading"
+                button-class="text-sm"
+                @click="loadMore"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import type { AuditLogEntry } from '~/shared/types'
+
+const props = defineProps<{
+    entityType: string
+    entityId: string | number
+}>()
+
+const { entityType, entityId } = toRefs(props)
+
+const { t, locale } = useI18n()
+const { can } = usePermissions()
+const { fetchEntityLogs } = useAuditLog()
+
+const canView = computed(() => can('core.audit_log.view'))
+
+const entries = ref<AuditLogEntry[]>([])
+const page = ref(1)
+const totalItems = ref(0)
+const loading = ref(false)
+
+// Lazy loading : 10 items par page cote UX. On aligne la pagination backend
+// (itemsPerPage=10 dans fetchEntityLogs) avec cette taille pour eviter de
+// slicer cote client — sinon les items 11-30 de chaque page etaient ignores.
+const PAGE_SIZE = 10
+
+// Anti-race : un utilisateur qui change rapidement d'entite affichee (ouvre
+// une ligne puis une autre dans le tableau admin) peut declencher deux fetchs
+// dont le premier repond en retard et ecrase l'etat de la seconde timeline.
+// On incremente un token a chaque fetch ; seule la derniere requete ecrit le
+// resultat. loadMore() est aussi protege : une reponse tardive append sur
+// une timeline dont l'entite a deja change serait visuellement confuse.
+let requestToken = 0
+
+const hasMore = computed(() => entries.value.length < totalItems.value)
+
+async function loadPage(targetPage: number, append: boolean): Promise<void> {
+    if (!canView.value) return
+
+    const token = ++requestToken
+    loading.value = true
+    try {
+        const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage, PAGE_SIZE)
+        if (token !== requestToken) return
+        const items = data.member ?? []
+        entries.value = append ? [...entries.value, ...items] : items
+        totalItems.value = data.totalItems ?? entries.value.length
+        page.value = targetPage
+    } catch {
+        if (token !== requestToken) return
+        // Erreur silencieuse (timeline secondaire) — useApi n'affiche pas de toast avec toast: false.
+        entries.value = append ? entries.value : []
+    } finally {
+        if (token === requestToken) {
+            loading.value = false
+        }
+    }
+}
+
+async function loadMore(): Promise<void> {
+    await loadPage(page.value + 1, true)
+}
+
+function dotClass(action: string): string {
+    switch (action) {
+        case 'create': return 'bg-green-500'
+        case 'update': return 'bg-yellow-500'
+        case 'delete': return 'bg-red-500'
+        default: return 'bg-gray-400'
+    }
+}
+
+// Relativise une date via Intl.RelativeTimeFormat. On selectionne l'unite
+// la plus grossiere possible (secondes < minutes < heures < jours < semaines
+// < mois < annees). La locale suit dynamiquement celle de l'app pour qu'un
+// switch de langue prenne effet sans nouveau mount (recomputed = cache
+// par-locale). Paliers mois/annee approximes (30.44j / 365.25j) : suffisant
+// pour un affichage humain, la tooltip absoluteDate garde la date exacte.
+const rtf = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
+
+function relativeDate(iso: string): string {
+    const diffMs = Date.now() - new Date(iso).getTime()
+    const diffSec = Math.round(diffMs / 1000)
+    const absSec = Math.abs(diffSec)
+    const sign = -Math.sign(diffSec)
+    const fmt = rtf.value
+
+    if (absSec < 60)       return fmt.format(sign * absSec, 'second')
+    if (absSec < 3600)     return fmt.format(sign * Math.round(absSec / 60), 'minute')
+    if (absSec < 86400)    return fmt.format(sign * Math.round(absSec / 3600), 'hour')
+    if (absSec < 604800)   return fmt.format(sign * Math.round(absSec / 86400), 'day')
+    if (absSec < 2629800)  return fmt.format(sign * Math.round(absSec / 604800), 'week')   // < ~30.44j
+    if (absSec < 31557600) return fmt.format(sign * Math.round(absSec / 2629800), 'month') // < ~365.25j
+    return fmt.format(sign * Math.round(absSec / 31557600), 'year')
+}
+
+function absoluteDate(iso: string): string {
+    // Meme logique : la locale de formatage suit celle de l'app.
+    return new Date(iso).toLocaleString(locale.value, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    })
+}
+
+function updateDiff(entry: AuditLogEntry): Record<string, { old: unknown; new: unknown }> {
+    // Format attendu: { champ: { old, new } }. On filtre defensivement les
+    // valeurs qui ne correspondent pas a ce shape (pas d'erreur runtime).
+    const out: Record<string, { old: unknown; new: unknown }> = {}
+    for (const [key, value] of Object.entries(entry.changes)) {
+        if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
+            const diff = value as { old: unknown; new: unknown }
+            out[key] = diff
+        }
+    }
+    return out
+}
+
+function collectionDiff(entry: AuditLogEntry): Record<string, { added: unknown[]; removed: unknown[] }> {
+    // Format to-many : { champ: { added: [ids], removed: [ids] } } produit
+    // par AuditListener::captureCollectionChange.
+    const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
+    for (const [key, value] of Object.entries(entry.changes)) {
+        if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
+            const diff = value as { added: unknown; removed: unknown }
+            out[key] = {
+                added:   Array.isArray(diff.added) ? diff.added : [],
+                removed: Array.isArray(diff.removed) ? diff.removed : [],
+            }
+        }
+    }
+    return out
+}
+
+function snapshotSummary(entry: AuditLogEntry): string {
+    const keys = Object.keys(entry.changes)
+    if (keys.length === 0) return '—'
+    if (keys.length <= 4) return keys.join(', ')
+    return `${keys.slice(0, 4).join(', ')}…`
+}
+
+function formatValue(value: unknown): string {
+    if (value === null || value === undefined) return '∅'
+    // Passe par i18n plutot qu'un hardcode FR : si une autre locale est
+    // ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
+    if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
+    if (typeof value === 'object') return JSON.stringify(value)
+    return String(value)
+}
+
+// Reload si l'entite affichee change.
+watch([entityType, entityId], () => {
+    entries.value = []
+    page.value = 1
+    totalItems.value = 0
+    loadPage(1, false)
+})
+
+onMounted(() => {
+    loadPage(1, false)
+})
+</script>

frontend/shared/composables/useAuditLog.ts

@@ -0,0 +1,144 @@
+import { ref } from 'vue'
+import type { AuditLogEntityTypes, AuditLogEntry, AuditLogFilters } from '~/shared/types'
+import type { HydraCollection } from '~/shared/utils/api'
+import { onAuthSessionCleared } from '~/shared/stores/auth'
+
+/**
+ * Cache module-level : evite un double-fetch si la page et le composant
+ * Timeline demandent la meme page simultanement. Volontairement minimaliste :
+ * on ne cache que le dernier resultat, pas un LRU par filtre — un CRM interne
+ * n'en a pas besoin et le cache complexe complique le reset.
+ *
+ * Un logout / 401 doit purger ce cache : on s'enregistre au callback
+ * `onAuthSessionCleared` expose par auth.ts.
+ */
+const lastCollection = ref<HydraCollection<AuditLogEntry> | null>(null)
+
+function resetAuditLog(): void {
+    lastCollection.value = null
+}
+
+// Auto-enregistrement singleton : si la session est invalidee (401,
+// logout) le cache est purge automatiquement, evitant qu'un autre user
+// connecte ensuite ne voit des donnees residuelles.
+onAuthSessionCleared(resetAuditLog)
+
+/**
+ * Traduit le modele front (camelCase) en query params API Platform
+ * (snake_case, avec la syntaxe performed_at[after] / [before]).
+ *
+ * @returns objet plat directement consommable par `useApi().get(url, query)`.
+ */
+function buildQuery(filters: AuditLogFilters | undefined): Record<string, string | number | string[]> {
+    const query: Record<string, string | number | string[]> = {}
+    if (!filters) return query
+
+    // `entity_type` : chaine simple ou liste pour un filtre multi-selection.
+    // Cote PHP, la syntaxe `entity_type[]=X&entity_type[]=Y` est requise pour
+    // que $_GET['entity_type'] soit un tableau (sinon "last wins").
+    if (Array.isArray(filters.entityType)) {
+        if (filters.entityType.length > 0) query['entity_type[]'] = filters.entityType
+    } else if (filters.entityType) {
+        query.entity_type = filters.entityType
+    }
+    if (filters.entityId) query.entity_id = filters.entityId
+    if (filters.action) query.action = filters.action
+    if (filters.performedBy) query.performed_by = filters.performedBy
+    if (filters.performedAtAfter) query['performed_at[after]'] = filters.performedAtAfter
+    if (filters.performedAtBefore) query['performed_at[before]'] = filters.performedAtBefore
+    if (filters.page) query.page = filters.page
+    if (filters.itemsPerPage) query.itemsPerPage = filters.itemsPerPage
+
+    return query
+}
+
+/**
+ * Composable partage entre la page globale d'audit (admin) et le composant
+ * Timeline. Expose des methodes de lecture + une fonction `resetAuditLog()`
+ * pour purger le cache (conforme a la regle CLAUDE.md sur les composables
+ * singletons, cf. `useSidebar.resetSidebar`).
+ */
+// Accept explicitement JSON-LD : API Platform 4 retourne un tableau PLAT (liste
+// d'items, sans envelope de pagination) sous `application/json`, et un objet
+// Hydra complet avec `member`, `totalItems` et `view` (first/last/next/previous)
+// sous `application/ld+json`. Pour obtenir `view` cote front — indispensable
+// a la pagination prev/next — on force donc ld+json.
+const JSONLD_HEADERS = { Accept: 'application/ld+json' } as const
+
+export function useAuditLog() {
+    const api = useApi()
+
+    async function fetchLogs(filters?: AuditLogFilters): Promise<HydraCollection<AuditLogEntry>> {
+        return api.get<HydraCollection<AuditLogEntry>>(
+            '/audit-logs',
+            buildQuery(filters),
+            { toast: false, headers: JSONLD_HEADERS },
+        )
+    }
+
+    /**
+     * Variante de `fetchLogs` qui met a jour le cache `lastCollection`.
+     * N'est utilisee que par la page admin — le composant Timeline appelle
+     * `fetchEntityLogs` qui bypass le cache pour ne pas polluer la reference
+     * page-level quand plusieurs timelines sont ouvertes.
+     */
+    async function fetchLogsCached(filters?: AuditLogFilters): Promise<HydraCollection<AuditLogEntry>> {
+        const data = await fetchLogs(filters)
+        lastCollection.value = data
+        return data
+    }
+
+    async function fetchLogById(id: string): Promise<AuditLogEntry> {
+        return api.get<AuditLogEntry>(`/audit-logs/${id}`, {}, { toast: false, headers: JSONLD_HEADERS })
+    }
+
+    /**
+     * Liste des valeurs distinctes de `entity_type` pour alimenter le filtre
+     * multi-selection. Alimente par un endpoint DBAL, aucune cache cote front
+     * (la liste peut evoluer a chaque nouvelle ecriture d'audit).
+     */
+    async function fetchEntityTypes(): Promise<string[]> {
+        const data = await api.get<AuditLogEntityTypes>(
+            '/audit-log-entity-types',
+            {},
+            { toast: false, headers: JSONLD_HEADERS },
+        )
+        return data.entityTypes ?? []
+    }
+
+    async function fetchEntityLogs(
+        entityType: string,
+        entityId: string | number,
+        page: number = 1,
+        itemsPerPage: number = 10,
+    ): Promise<HydraCollection<AuditLogEntry>> {
+        // Volontairement via `fetchLogs` (sans cache) pour ne pas ecraser
+        // `lastCollection` — la timeline peut etre rendue simultanement a
+        // la page globale et doit rester independante.
+        //
+        // Le backend pagine a 30 par defaut (paginationItemsPerPage) ; on
+        // passe explicitement itemsPerPage ici pour que la taille de page
+        // soit alignee avec l'UX timeline (10 items + bouton "Voir plus").
+        // Sans ce param, le client slice a 10 et rate 20 entrees par page.
+        return fetchLogs({
+            entityType,
+            entityId: String(entityId),
+            page,
+            itemsPerPage,
+        })
+    }
+
+    // API publique : on expose volontairement deux noms distincts pour les
+    // deux contrats (cache/no-cache). Aliaser `fetchLogs` vers la version
+    // cachee trompait les appelants : un consommateur qui destructurait
+    // `{ fetchLogs }` en pensant faire un appel neutre polluait en realite
+    // `lastCollection`, effet indetectable sans lire l'impl.
+    return {
+        lastCollection,
+        fetchLogsCached,
+        fetchLogById,
+        fetchEntityLogs,
+        fetchEntityTypes,
+        resetAuditLog,
+    }
+}

frontend/shared/composables/useModules.ts

@@ -2,14 +2,23 @@
  * Composable de lecture des modules actifs (source : `/api/modules`).
  *
  * State singleton au niveau module : `useSidebar` suit la meme convention.
- * Chargement idempotent via le flag `loaded`, reset explicite au logout
- * (voir pages/logout.vue).
+ * Chargement idempotent via le flag `loaded`, reset automatique au logout
+ * via `onAuthSessionCleared` (cf. CLAUDE.md : « composables avec state
+ * singleton doivent etre reinitialises au logout »).
  */
 import { ref } from 'vue'
+import { onAuthSessionCleared } from '~/shared/stores/auth'
 
 const activeModuleIds = ref<string[]>([])
 const loaded = ref(false)
 
+function resetModulesState(): void {
+    activeModuleIds.value = []
+    loaded.value = false
+}
+
+onAuthSessionCleared(resetModulesState)
+
 export function useModules() {
     async function loadModules() {
         try {
@@ -35,8 +44,7 @@ export function useModules() {
     }
 
     function resetModules() {
-        activeModuleIds.value = []
-        loaded.value = false
+        resetModulesState()
     }
 
     return {

frontend/shared/composables/useSidebar.ts

@@ -1,10 +1,23 @@
 import { ref } from 'vue'
 import type { SidebarSection } from '~/shared/types'
+import { onAuthSessionCleared } from '~/shared/stores/auth'
 
 const sections = ref<SidebarSection[]>([])
 const disabledRoutes = ref<string[]>([])
 const loaded = ref(false)
 
+function resetSidebarState(): void {
+    sections.value = []
+    disabledRoutes.value = []
+    loaded.value = false
+}
+
+// Auto-enregistrement singleton : purge la sidebar sur 401/logout pour
+// eviter qu'un nouvel utilisateur logue sur le meme onglet voie transitoirement
+// les items de l'ancienne session (cf. CLAUDE.md : « composables avec state
+// singleton doivent etre reinitialises au logout »).
+onAuthSessionCleared(resetSidebarState)
+
 export function useSidebar() {
     async function loadSidebar() {
         try {
@@ -31,9 +44,7 @@ export function useSidebar() {
     }
 
     function resetSidebar() {
-        sections.value = []
-        disabledRoutes.value = []
-        loaded.value = false
+        resetSidebarState()
     }
 
     return {

frontend/shared/types/index.ts

@@ -9,3 +9,44 @@ export interface SidebarSection {
     icon: string
     items: SidebarItem[]
 }
+
+/**
+ * Entree d'audit telle qu'elle est renvoyee par GET /api/audit-logs.
+ *
+ * `changes` est un payload libre dont le format depend de `action` :
+ *  - `create` / `delete` : snapshot complet { champ: valeur } ;
+ *  - `update`            : diff { champ: { old, new } }.
+ */
+export interface AuditLogEntry {
+    id: string
+    entityType: string
+    entityId: string
+    action: 'create' | 'update' | 'delete'
+    changes: Record<string, unknown>
+    performedBy: string
+    performedAt: string
+    ipAddress: string | null
+    requestId: string | null
+}
+
+/**
+ * Filtres combinables en query params (AND) pour GET /api/audit-logs.
+ * Les bornes de date utilisent la syntaxe API Platform `performed_at[after]` /
+ * `performed_at[before]`.
+ */
+export interface AuditLogFilters {
+    /** Chaine pour un seul type, liste pour un filtre multi-selection. */
+    entityType?: string | string[]
+    entityId?: string
+    action?: string
+    performedBy?: string
+    performedAtAfter?: string
+    performedAtBefore?: string
+    page?: number
+    itemsPerPage?: number
+}
+
+export interface AuditLogEntityTypes {
+    id: string
+    entityTypes: string[]
+}

frontend/shared/types/rbac.ts

@@ -21,7 +21,19 @@ export interface UserListItem {
     isAdmin: boolean
     roles: string[]
     directPermissions: string[]
-    /** IRIs des sites autorises (ticket 2 module Sites). */
+}
+
+/**
+ * Detail RBAC d'un user, renvoye par GET /api/users/{id}/rbac (groupe user:rbac:read).
+ * Utilise par UserRbacDrawer pour initialiser son formulaire avec l'etat complet
+ * (sites inclus). Le endpoint de liste /api/users reste volontairement leger et
+ * n'expose pas ces champs.
+ */
+export interface UserRbacDetail {
+    id: number
+    isAdmin: boolean
+    roles: string[]
+    directPermissions: string[]
     sites: string[]
 }
 

frontend/shared/utils/__tests__/debounce.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest'
+import { debounce } from '../debounce'
+
+describe('debounce', () => {
+    it('attend delay ms avant d\'appeler fn une seule fois apres plusieurs invocations rapides', () => {
+        vi.useFakeTimers()
+        const fn = vi.fn()
+        const debounced = debounce(fn, 100)
+
+        debounced()
+        debounced()
+        debounced()
+        expect(fn).not.toHaveBeenCalled()
+
+        vi.advanceTimersByTime(100)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.useRealTimers()
+    })
+
+    it('passe les arguments du dernier appel a fn', () => {
+        vi.useFakeTimers()
+        const fn = vi.fn<(a: string, b: number) => void>()
+        const debounced = debounce(fn, 50)
+
+        debounced('first', 1)
+        debounced('second', 2)
+        debounced('third', 3)
+        vi.advanceTimersByTime(50)
+
+        expect(fn).toHaveBeenCalledTimes(1)
+        expect(fn).toHaveBeenCalledWith('third', 3)
+
+        vi.useRealTimers()
+    })
+
+    it('autorise plusieurs executions espacees dans le temps', () => {
+        vi.useFakeTimers()
+        const fn = vi.fn()
+        const debounced = debounce(fn, 50)
+
+        debounced()
+        vi.advanceTimersByTime(50)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        debounced()
+        vi.advanceTimersByTime(50)
+        expect(fn).toHaveBeenCalledTimes(2)
+
+        vi.useRealTimers()
+    })
+})

frontend/shared/utils/api.ts

@@ -1,8 +1,33 @@
+/**
+ * Schemas Hydra / API Platform 4.
+ *
+ * Important : API Platform 4 abandonne le prefixe `hydra:` dans les noms de
+ * proprietes (compare a la version 3). Un GET /api/audit-logs renvoie :
+ *   { "@context": ..., "@id": ..., "@type": "...",
+ *     "member": [...],
+ *     "totalItems": 30,
+ *     "view": { "@id": ..., "@type": "...", "first": ..., "next": ..., ... } }
+ *
+ * En `application/json` (sans ld), API Platform retourne un simple tableau
+ * plat sans ces metadonnees — on doit donc explicitement demander
+ * `application/ld+json` (via l'option `headers: { Accept: ... }` de useApi)
+ * pour avoir acces a la pagination.
+ */
+export interface HydraView {
+    '@id'?: string
+    '@type'?: string
+    first?: string
+    last?: string
+    next?: string
+    previous?: string
+}
+
 export interface HydraCollection<T> {
-    'hydra:member': T[]
-    'hydra:totalItems': number
+    member: T[]
+    totalItems: number
+    view?: HydraView
 }
 
 export function extractHydraMembers<T>(collection: HydraCollection<T>): T[] {
-    return collection['hydra:member'] ?? []
+    return collection.member ?? []
 }

frontend/shared/utils/debounce.ts

@@ -0,0 +1,15 @@
+/**
+ * Utilitaire de debounce partage.
+ *
+ * Retarde l'execution d'une fonction : chaque appel reset un timer et
+ * l'execution reelle n'a lieu qu'apres `delay` ms sans nouvelle invocation.
+ * Utile pour eviter un spam d'appels reseau sur un champ de recherche
+ * (une requete par touche -> une seule requete apres la derniere frappe).
+ */
+export function debounce<T extends (...args: never[]) => void>(fn: T, delay: number): T {
+    let timer: ReturnType<typeof setTimeout> | null = null
+    return ((...args: Parameters<T>) => {
+        if (null !== timer) clearTimeout(timer)
+        timer = setTimeout(() => fn(...args), delay)
+    }) as T
+}

frontend/tests/e2e/_fixtures/personas.ts

@@ -0,0 +1,112 @@
+/**
+ * Definition des 6 personas utilises dans les tests E2E.
+ *
+ * Source de verite unique partagee entre :
+ *   - le seed backend (`bin/console app:seed-e2e`)
+ *   - les tests Playwright (via `loginAs`)
+ *
+ * Regle : chaque persona cible une case precise de la matrice RBAC.
+ * Si tu ajoutes une permission au domaine, tu NE crees pas un nouveau
+ * persona par reflexe — tu ajustes un persona existant si possible.
+ * L'objectif est de garder ce set petit et comprehensible a 6 mois.
+ *
+ * IMPORTANT : ces personas sont recrees a chaque `app:seed-e2e`. Ne jamais
+ * reutiliser les users dev (admin/alice/bob) dans les tests : ils evoluent
+ * au gre des fixtures de demo et casseraient la suite E2E.
+ */
+
+export type PersonaKey =
+    | 'super-admin'
+    | 'user-full'
+    | 'user-readonly'
+    | 'user-users-only'
+    | 'user-audit-only'
+    | 'user-nothing'
+
+export interface Persona {
+    key: PersonaKey
+    username: string
+    password: string
+    isAdmin: boolean
+    // Permissions directes attribuees en dur (on bypasse les roles pour
+    // garder le seed simple et la correspondance test<->permission directe).
+    permissions: string[]
+    // Contenu attendu de la sidebar (admin links). Utilise par le test
+    // sidebar-visibility pour driver la matrice. Les valeurs correspondent
+    // aux slugs de route (`/admin/<slug>`), volontairement stables quand
+    // la copie/i18n change.
+    expectedAdminLinks: Array<'users' | 'roles' | 'sites' | 'audit-log'>
+}
+
+const SHARED_PASSWORD = 'e2e-secret'
+
+export const personas: Record<PersonaKey, Persona> = {
+    'super-admin': {
+        key: 'super-admin',
+        username: 'e2e.super-admin',
+        password: SHARED_PASSWORD,
+        isAdmin: true,
+        permissions: [],
+        expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
+    },
+    'user-full': {
+        key: 'user-full',
+        username: 'e2e.user-full',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: [
+            'core.users.view',
+            'core.users.manage',
+            'core.roles.view',
+            'core.roles.manage',
+            'core.audit_log.view',
+            'sites.view',
+            'sites.manage',
+            'sites.bypass_scope',
+        ],
+        expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
+    },
+    'user-readonly': {
+        key: 'user-readonly',
+        username: 'e2e.user-readonly',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: [
+            'core.users.view',
+            'core.roles.view',
+            'core.audit_log.view',
+            'sites.view',
+        ],
+        expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
+    },
+    'user-users-only': {
+        key: 'user-users-only',
+        username: 'e2e.user-users-only',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: ['core.users.view', 'core.users.manage'],
+        expectedAdminLinks: ['users'],
+    },
+    'user-audit-only': {
+        key: 'user-audit-only',
+        username: 'e2e.user-audit-only',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: ['core.audit_log.view'],
+        expectedAdminLinks: ['audit-log'],
+    },
+    'user-nothing': {
+        key: 'user-nothing',
+        username: 'e2e.user-nothing',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: [],
+        expectedAdminLinks: [],
+    },
+}
+
+export function getPersona(key: PersonaKey): Persona {
+    return personas[key]
+}
+
+export const ALL_ADMIN_LINKS = ['users', 'roles', 'sites', 'audit-log'] as const

frontend/tests/e2e/auth/login.spec.ts

@@ -0,0 +1,65 @@
+import { expect, test } from '@playwright/test'
+import { LoginPage } from '../helpers/pages/LoginPage'
+import { getPersona } from '../_fixtures/personas'
+
+/**
+ * Tests du flow login/logout via l'UI.
+ *
+ * C'est le SEUL fichier qui traverse le formulaire pour de vrai. Les autres
+ * specs utilisent `loginAs()` qui pose directement le cookie BEARER via API,
+ * 10x plus rapide et decouple du form HTML.
+ */
+test.describe('Login', () => {
+    test('login valide pose le cookie BEARER et redirige vers /', async ({ page, context }) => {
+        const superAdmin = getPersona('super-admin')
+        const loginPage = new LoginPage(page)
+
+        await loginPage.goto()
+        await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
+
+        // La redirection se fait apres un `navigateTo('/')` dans login.vue.
+        await page.waitForURL('/')
+        await expect(page).toHaveURL('/')
+
+        // Le cookie BEARER (HTTP-only) doit etre pose par Symfony.
+        const cookies = await context.cookies()
+        const bearer = cookies.find(c => c.name === 'BEARER')
+        expect(bearer, 'Le cookie BEARER doit etre pose apres un login valide').toBeDefined()
+        expect(bearer?.httpOnly).toBe(true)
+    })
+
+    test('login invalide reste sur /login et n\'emet pas de cookie', async ({ page, context }) => {
+        const loginPage = new LoginPage(page)
+
+        await loginPage.goto()
+        await loginPage.fillAndSubmit('e2e.super-admin', 'wrong-password')
+
+        // On ne doit PAS etre redirige — le handleSubmit swallow la 401 via toast,
+        // le user reste sur /login pour corriger.
+        await page.waitForTimeout(500)
+        await expect(page).toHaveURL(/\/login$/)
+
+        const cookies = await context.cookies()
+        const bearer = cookies.find(c => c.name === 'BEARER')
+        expect(bearer, 'Aucun cookie BEARER ne doit etre pose apres un login invalide').toBeUndefined()
+    })
+
+    test('logout efface le cookie et redirige vers /login', async ({ page, context }) => {
+        const superAdmin = getPersona('super-admin')
+        const loginPage = new LoginPage(page)
+
+        // 1. Login d'abord
+        await loginPage.goto()
+        await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
+        await page.waitForURL('/')
+
+        // 2. Navigation vers /logout (il y a un lien "Deconnexion" dans la sidebar)
+        await page.goto('/logout')
+        await page.waitForURL(/\/login$/)
+
+        // 3. Le cookie BEARER doit avoir ete supprime par le firewall de logout
+        const cookies = await context.cookies()
+        const bearer = cookies.find(c => c.name === 'BEARER')
+        expect(bearer, 'Le cookie BEARER doit etre supprime apres logout').toBeUndefined()
+    })
+})

frontend/tests/e2e/helpers/loginAs.ts

@@ -0,0 +1,45 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import { type PersonaKey, getPersona } from '../_fixtures/personas'
+
+/**
+ * Login programmatique : pose le cookie BEARER via l'API sans passer par le
+ * formulaire de login.
+ *
+ * Utilise ce helper dans TOUS les tests qui ne testent pas le flow login
+ * lui-meme (sidebar visibility, route guards, etc.). Ca evite de payer 2s
+ * par test sur le form HTML et ca isole les tests : si le form login casse,
+ * seul `login.spec.ts` est rouge, pas toute la suite.
+ *
+ * Impl : on issue une requete POST /api/login_check avec les creds du persona.
+ * Nginx reecrit vers /login_check, Symfony pose le cookie BEARER sur le
+ * context du browser. Apres ca, n'importe quelle navigation est authentifiee.
+ */
+export async function loginAs(context: BrowserContext, persona: PersonaKey, baseURL?: string): Promise<void> {
+    const { username, password } = getPersona(persona)
+    const base = baseURL ?? 'http://localhost:3004'
+
+    const response = await context.request.post(`${base}/api/login_check`, {
+        data: { username, password },
+    })
+
+    if (!response.ok()) {
+        const body = await response.text()
+        throw new Error(
+            `loginAs(${persona}) a echoue : ${response.status()} ${body}. `
+            + 'Verifier que le backend tourne et que `make seed-e2e` a ete lance.',
+        )
+    }
+}
+
+/**
+ * Helper d'appoint quand on veut tester VIA l'UI (login.spec.ts uniquement).
+ * Passe par le formulaire rendu, clique sur le bouton. A ne PAS utiliser
+ * dans les autres tests — preferer `loginAs()`.
+ */
+export async function loginViaForm(page: Page, persona: PersonaKey): Promise<void> {
+    const { username, password } = getPersona(persona)
+    await page.goto('/login')
+    await page.getByLabel("Nom d'utilisateur").fill(username)
+    await page.getByLabel('Mot de passe').fill(password)
+    await page.getByRole('button', { name: 'Se connecter' }).click()
+}

frontend/tests/e2e/helpers/pages/LoginPage.ts

@@ -0,0 +1,32 @@
+import type { Locator, Page } from '@playwright/test'
+
+/**
+ * Page Object du formulaire de login (/login).
+ *
+ * Selecteurs : on s'appuie sur les labels/roles accessibles (stable vs les
+ * changements de CSS/Tailwind). Le jour ou on veut un selecteur plus dur,
+ * on ajoute des `data-testid` sur login.vue.
+ */
+export class LoginPage {
+    readonly page: Page
+    readonly usernameInput: Locator
+    readonly passwordInput: Locator
+    readonly submitButton: Locator
+
+    constructor(page: Page) {
+        this.page = page
+        this.usernameInput = page.getByLabel("Nom d'utilisateur")
+        this.passwordInput = page.getByLabel('Mot de passe')
+        this.submitButton = page.getByRole('button', { name: 'Se connecter' })
+    }
+
+    async goto(): Promise<void> {
+        await this.page.goto('/login')
+    }
+
+    async fillAndSubmit(username: string, password: string): Promise<void> {
+        await this.usernameInput.fill(username)
+        await this.passwordInput.fill(password)
+        await this.submitButton.click()
+    }
+}

frontend/tests/e2e/helpers/pages/SidebarComponent.ts

@@ -0,0 +1,33 @@
+import type { Locator, Page } from '@playwright/test'
+
+export type AdminLinkSlug = 'users' | 'roles' | 'sites' | 'audit-log'
+
+/**
+ * Page Object de la sidebar (MalioSidebar), scope sur les items "admin".
+ *
+ * Strategie selecteur : `a[href=...]` plutot que le texte i18n. Le slug de
+ * route ne change pas quand on retraduit ou renomme une entree — c'est le
+ * selecteur le plus stable pour cette suite.
+ *
+ * Si un jour la sidebar change et les slugs bougent, on met a jour CE
+ * fichier uniquement ; les specs continuent de passer.
+ */
+export class SidebarComponent {
+    readonly page: Page
+
+    constructor(page: Page) {
+        this.page = page
+    }
+
+    adminLink(slug: AdminLinkSlug): Locator {
+        return this.page.locator(`a[href="/admin/${slug}"]`)
+    }
+
+    accountDashboardLink(): Locator {
+        return this.page.locator('a[href="/"]').first()
+    }
+
+    logoutLink(): Locator {
+        return this.page.locator('a[href="/logout"]')
+    }
+}

frontend/tests/e2e/permissions/sidebar-visibility.spec.ts

@@ -0,0 +1,84 @@
+import { expect, test } from '@playwright/test'
+import { loginAs } from '../helpers/loginAs'
+import { SidebarComponent } from '../helpers/pages/SidebarComponent'
+import { ALL_ADMIN_LINKS, type PersonaKey, getPersona, personas } from '../_fixtures/personas'
+
+/**
+ * Test strategique : la matrice persona <-> liens admin visibles.
+ *
+ * Valide que `SidebarProvider` (back) + `useSidebar` (front) filtrent bien
+ * les items admin selon les permissions RBAC de chaque user.
+ *
+ * Regle d'evolution : ajouter une permission ou un persona = 1 ligne a
+ * modifier dans `personas.ts` et cote back (`SeedE2ECommand`) + `sidebar.php`.
+ * Ce fichier ne bouge pas.
+ */
+test.describe('Sidebar visibility', () => {
+    const personaKeys: PersonaKey[] = [
+        'super-admin',
+        'user-full',
+        'user-readonly',
+        'user-users-only',
+        'user-audit-only',
+        'user-nothing',
+    ]
+
+    for (const key of personaKeys) {
+        const persona = getPersona(key)
+
+        test(`${persona.key} ne voit que ses liens admin autorises`, async ({ page, context }) => {
+            await loginAs(context, persona.key)
+            await page.goto('/')
+
+            const sidebar = new SidebarComponent(page)
+
+            // Attente semantique : on ancre sur un lien toujours present pour
+            // tout user authentifie (Mon compte > Tableau de bord). Remplace
+            // `networkidle` qui est reconnu instable en CI (SPAs avec polling
+            // ou HMR peuvent ne jamais quitter cet etat).
+            await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
+
+            for (const link of ALL_ADMIN_LINKS) {
+                const locator = sidebar.adminLink(link)
+                const shouldBeVisible = persona.expectedAdminLinks.includes(link)
+
+                if (shouldBeVisible) {
+                    await expect(
+                        locator,
+                        `${persona.key} doit voir le lien /admin/${link}`,
+                    ).toBeVisible()
+                } else {
+                    await expect(
+                        locator,
+                        `${persona.key} ne doit PAS voir le lien /admin/${link}`,
+                    ).toHaveCount(0)
+                }
+            }
+        })
+    }
+
+    test('user-nothing voit toujours le dashboard et le logout (section Mon compte sans permission)', async ({
+        page,
+        context,
+    }) => {
+        // La section "Mon compte" n'est gardee par aucune permission : tout user
+        // authentifie voit le dashboard et peut se deconnecter. Ce test protege
+        // contre une regression qui mettrait un gate RBAC par inadvertance
+        // dessus — ca bloquerait le logout de users sans permissions.
+        await loginAs(context, 'user-nothing')
+        await page.goto('/')
+
+        const sidebar = new SidebarComponent(page)
+        // Meme strategie que ci-dessus : ancrage semantique plutot que
+        // `networkidle` pour eviter les faux timeouts en CI.
+        await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
+        await expect(sidebar.logoutLink()).toBeVisible()
+    })
+
+    test('la liste des personas dans personas.ts couvre toutes les combinaisons admin attendues', () => {
+        // Test meta : si quelqu'un ajoute un persona dans personas.ts sans le
+        // seeder cote back (SeedE2ECommand), le test sidebar pour ce persona
+        // echouera (loginAs 401). Ce test rappelle la coherence attendue.
+        expect(Object.keys(personas)).toEqual(personaKeys)
+    })
+})

frontend/vitest.config.ts

@@ -7,6 +7,10 @@ export default defineConfig({
     test: {
         environment: 'happy-dom',
         globals: true,
+        // Exclure les tests E2E Playwright : meme extension .spec.ts mais
+        // runtime different (navigateur vrai vs happy-dom). Playwright les
+        // ramasse via son propre testDir declare dans playwright.config.ts.
+        exclude: ['**/node_modules/**', '**/dist/**', 'tests/e2e/**'],
     },
     resolve: {
         alias: {