merge preprod

2026-03-08 17:51:45 +01:00 · 2026-03-08 17:51:45 +01:00 · 01b4a374cf
commit 01b4a374cf
parent c9aefe7ecf 86d48e415c
116 changed files with 16915 additions and 842 deletions
--- a/.forgejo/workflows/deploy-demo.yml
+++ b/.forgejo/workflows/deploy-demo.yml
@ -0,0 +1,53 @@
+name: Deploy Production
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy to Production
+    runs-on: docker
+    container:
+      image: forgejo-ci-node:latest
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch main https://forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Build frontend (production)
+        run: npm run build
+
+      - name: Install composer dependencies
+        run: |
+          cd dist
+          composer install --no-dev --optimize-autoloader
+
+      - name: Deploy via rsync
+        env:
+          USERNAME: ${{ secrets.DEMO_USERNAME }}
+          PASSWORD: ${{ secrets.DEMO_PASSWORD }}
+          HOST: ${{ secrets.DEMO_HOST }}
+        run: |
+          cd dist
+          lftp -c "
+          set ftp:ssl-allow no;
+          open -u $USERNAME,$PASSWORD $PRODUCTION_HOST;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            assets assets;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            -x 'accounts/' \
+            -x 'cache/' \
+            -x 'sessions/' \
+            site site;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            kirby kirby;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            vendor vendor;
+          put index.php -o index.php;
+          quit"
--- a/.forgejo/workflows/deploy-preprod.yml
+++ b/.forgejo/workflows/deploy-preprod.yml
@ -0,0 +1,64 @@
+name: Deploy Preprod
+
+on:
+  push:
+    branches:
+      - preprod
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy to Preprod
+    runs-on: docker
+    container:
+      image: forgejo-ci-node:latest
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch preprod https://forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Build frontend (preprod)
+        run: npm run build:preprod
+
+      - name: Install composer dependencies
+        run: |
+          cd dist
+          composer install --no-dev --optimize-autoloader
+
+      - name: Deploy via rsync
+        env:
+          USERNAME: ${{ secrets.USERNAME }}
+          PASSWORD: ${{ secrets.PASSWORD }}
+          HOST: ${{ secrets.HOST }}
+          PREPROD_PATH: ${{ secrets.PREPROD_PATH }}
+        run: |
+          cd dist
+
+          echo "Deploying site/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O --no-perms --no-owner --no-group \
+            --include 'accounts/' \
+            --exclude 'accounts/*' \
+            --include 'sessions/' \
+            --exclude 'sessions/*' \
+            --include 'cache/' \
+            --exclude 'cache/*' \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            site/ $USERNAME@$HOST:$PREPROD_PATH/site/
+
+          echo "Deploying vendor/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            vendor/ $USERNAME@$HOST:$PREPROD_PATH/vendor/
+
+          echo "Deploying kirby/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            kirby/ $USERNAME@$HOST:$PREPROD_PATH/kirby/
+
+          echo "Deploying assets/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            assets/ $USERNAME@$HOST:$PREPROD_PATH/assets/
--- a/.forgejo/workflows/deploy-prod.yml
+++ b/.forgejo/workflows/deploy-prod.yml
@ -0,0 +1,64 @@
+name: Deploy Production
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy to Production
+    runs-on: docker
+    container:
+      image: forgejo-ci-node:latest
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch main https://forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Build frontend (production)
+        run: npm run build
+
+      - name: Install composer dependencies
+        run: |
+          cd dist
+          composer install --no-dev --optimize-autoloader
+
+      - name: Deploy via rsync
+        env:
+          USERNAME: ${{ secrets.USERNAME }}
+          PASSWORD: ${{ secrets.PASSWORD }}
+          HOST: ${{ secrets.HOST }}
+          PROD_PATH: ${{ secrets.PROD_PATH }}
+        run: |
+          cd dist
+
+          echo "Deploying site/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            --exclude 'accounts/*' \
+            --exclude 'cache/*' \
+            --exclude 'sessions/*' \
+            --include 'accounts/' \
+            --include 'cache/' \
+            --include 'sessions/' \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            site/ $USERNAME@$HOST:$PROD_PATH/site/
+
+          echo "Deploying vendor/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            vendor/ $USERNAME@$HOST:$PROD_PATH/vendor/
+
+          echo "Deploying kirby/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            kirby/ $USERNAME@$HOST:$PROD_PATH/kirby/
+
+          echo "Deploying assets/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            assets/ $USERNAME@$HOST:$PROD_PATH/assets/
--- a/.gitignore
+++ b/.gitignore
@ -62,18 +62,21 @@ public/.idea

 public/site/cache/*
 !public/site/cache/index.html
+!public/site/cache/.gitkeep

 # Accounts
 # ---------------

 public/site/accounts/*
 !public/site/accounts/index.html
+!public/site/accounts/.gitkeep

 # Sessions
 # ---------------

 public/site/sessions/*
 !public/site/sessions/index.html
+!public/site/sessions/.gitkeep

 # License
 # ---------------
@ -91,3 +94,10 @@ public/vendor
 # Content
 # ---------------
 /public/content
+
+# Claude settings
+# ---------------
+.claude
+/.claude/*
+
+
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,344 @@
+# Design to Pack - Vue d'ensemble du projet
+
+Plateforme de gestion de projets de création de flacons de parfum pour Pochet du Courval.
+
+## Stack technique
+
+| Couche | Technologies |
+|--------|-------------|
+| **Backend** | Kirby CMS 4 (PHP), flat-file database |
+| **Frontend** | Vue 3 + Vite 7, Pinia, Vue Router 4, PrimeVue 4.0 |
+| **PDF** | @vue-pdf-viewer 2.5 |
+| **3D** | Three.js (vue interactive 360) |
+| **Déploiement** | GitLab CI/CD, rsync vers serveur |
+
+---
+
+## Structure du projet
+
+```
+design-to-pack/
+├── src/                          # App Vue.js
+│   ├── assets/css/               # Styles globaux
+│   ├── components/               # Composants réutilisables
+│   │   ├── comments/             # Système de commentaires
+│   │   ├── design-to-light/      # Feature DTL
+│   │   ├── inspirations/         # Galerie inspirations
+│   │   ├── notifications/        # Notifications
+│   │   └── project/              # Composants projet
+│   │       ├── cards/            # Cartes par type d'étape
+│   │       ├── brief/            # Brief client (moodboard)
+│   │       └── virtual-sample/   # Échantillon virtuel 3D
+│   ├── router/                   # Vue Router
+│   ├── stores/                   # Pinia stores
+│   ├── utils/                    # Utilitaires
+│   ├── views/                    # Pages principales
+│   ├── main.js                   # Point d'entrée
+│   └── App.vue                   # Composant racine
+│
+├── public/                       # Kirby CMS
+│   ├── content/                  # Données (flat-file)
+│   │   ├── projects/             # Pages projets
+│   │   ├── clients/              # Pages clients
+│   │   ├── design-to-light/      # Page DTL
+│   │   └── inspirations/         # Galerie inspirations
+│   ├── site/
+│   │   ├── blueprints/           # Schémas de données
+│   │   │   ├── pages/            # Blueprints des pages
+│   │   │   ├── users/            # Blueprints utilisateurs
+│   │   │   └── files/            # Blueprints fichiers
+│   │   ├── templates/            # Templates PHP + JSON
+│   │   ├── controllers/          # Contrôleurs
+│   │   ├── models/               # Modèles PHP (Project, Client)
+│   │   ├── plugins/              # Plugins custom
+│   │   ├── snippets/             # Fragments réutilisables
+│   │   └── config/               # Configuration + routes
+│   └── media/                    # Fichiers uploadés
+│
+├── package.json
+├── vite.config.js
+└── .gitlab-ci.yml
+```
+
+---
+
+## Plugins Kirby custom
+
+### 1. `classes/` - Classes partagées
+Classes de données utilisées par comments et notifications.
+
+| Classe | Rôle |
+|--------|------|
+| `Author` | Auteur (name, email, uuid, role) |
+| `Position` | Position x/y + pageIndex (marqueurs sur PDF) |
+| `Location` | Localisation (page, file, parent) |
+| `PageDetails` | Détails de page |
+| `FileDetails` | Détails de fichier |
+| `ProjectDetails` | Détails de projet |
+
+### 2. `comments/` - Système de commentaires
+Plugin `adrienpayet/kirby4-comments`
+
+**Classes:**
+- `BaseComment` - Classe de base
+- `Comment` - Commentaire avec replies
+- `Reply` - Réponse à un commentaire
+
+**Routes:**
+| Route | Fichier | Description |
+|-------|---------|-------------|
+| `POST /create-comment.json` | `routes/create.php` | Créer un commentaire |
+| `POST /update-comment.json` | `routes/update.php` | Modifier un commentaire |
+| `POST /delete-comment.json` | `routes/delete.php` | Supprimer un commentaire |
+| `POST /reply-comment.json` | `routes/reply.php` | Répondre à un commentaire |
+
+**Stockage:** Les commentaires sont stockés en YAML dans les métadonnées des fichiers.
+
+### 3. `notifications/` - Système de notifications
+Plugin `adrienpayet/pdc-notifications`
+
+**Classes:**
+- `Notification` - Notification (type, location, text, author, date, readby[])
+- `NotificationsPage` - Base pour pages avec notifications (extends Page)
+
+**Méthodes NotificationsPage:**
+- `createNotification($data)` - Créer une notification
+- `deleteNotification($id)` - Supprimer une notification
+- `readNotification($id)` - Marquer comme lue (ajoute userUuid à readby)
+- `readAllNotifications()` - Tout marquer comme lu
+
+**Routes:**
+| Route | Description |
+|-------|-------------|
+| `POST /read-notification.json` | Marquer une notification comme lue |
+| `POST /read-all-notifications.json` | Tout marquer comme lu |
+
+### 4. `user-projects/` - Projets autorisés par utilisateur
+Plugin `adrienpayet/pdc-authorized-projects`
+
+**User methods:**
+- `currentProjects()` - Projets actifs (listed) accessibles à l'utilisateur
+- `archivedProjects()` - Projets archivés (unlisted) accessibles
+
+Logique: Admin = tous les projets, autres = seulement projets assignés.
+
+### 5. `helpers/` - Fonctions utilitaires
+
+| Fonction | Description |
+|----------|-------------|
+| `getFileData($file, $preserveQuality)` | Normalise les données fichier (thumb webp, cover, comments) |
+| `getGlobalEvaluation($numberedGrade)` | Convertit note numérique en lettre A-E avec mention |
+| `processDTLProposals($page)` | Traite les propositions Design to Light |
+| `refreshProjectStepsCache($project, $steps)` | Rafraîchit le cache des étapes |
+
+### 6. `icons/` - Icônes custom panel
+Plugin `adrienpayet/pochet-icons` - Icônes personnalisées pour le panel Kirby.
+
+### 7. `kql/` - Kirby Query Language
+Plugin externe pour requêtes type GraphQL.
+
+### 8. `refresh-cache-button/` - Bouton refresh cache
+Plugin externe ajoutant un bouton de rafraîchissement du cache dans le panel.
+
+---
+
+## Modèles de données
+
+### Utilisateurs (3 rôles)
+
+| Rôle | Accès |
+|------|-------|
+| `admin` | Tous les projets, panel complet |
+| `pochet` | Projets assignés uniquement, panel limité |
+| `client` | Ses projets uniquement, pas de panel |
+
+### Projet (ProjectPage)
+Hérite de `NotificationsPage`.
+
+**Champs principaux:**
+- `title`, `status` (draft/listed/unlisted)
+- `client` - Lien vers ClientPage
+- `currentStep` - Étape courante
+- `isDTLEnabled` - Design to Light activé
+
+**Étapes (children):**
+1. `client-brief` - Brief client (PDF + moodboard)
+2. `proposal` - Proposition commerciale (PDFs)
+3. `extended-brief` - Brief étendu
+4. `industrial-ideation` - Idéation industrielle (optionnel)
+5. `virtual-sample` - Échantillon virtuel (pistes dynamiques + statiques)
+6. `physical-sample` - Échantillon physique (médias)
+
+### Client (ClientPage)
+- `logo`, `title`
+- `projects()` - Tous les projets
+- `projectsListed()` / `projectsUnlisted()` - Filtres par statut
+
+---
+
+## Stores Pinia
+
+| Store | Fichier | Rôle |
+|-------|---------|------|
+| `api` | `stores/api.js` | Communication API (fetch, post, comments, notifications) |
+| `user` | `stores/user.js` | Utilisateur courant, permissions |
+| `page` | `stores/page.js` | Données de la page courante |
+| `projects` | `stores/projects.js` | Liste des projets |
+| `dialog` | `stores/dialog.js` | État des modales (contenu, fichier, commentaires) |
+| `brief` | `stores/brief.js` | Gestion du brief client |
+| `designToLight` | `stores/designToLight.js` | Feature DTL |
+| `notifications` | `stores/notifications.js` | Notifications non lues |
+| `virtualSample` | `stores/virtualSample.js` | État échantillon virtuel |
+| `addImagesModal` | `stores/addImagesModal.js` | Modal ajout images |
+| `project` | `stores/project.js` | Utilitaires projet |
+
+---
+
+## Routes Vue
+
+| Path | Vue | Description |
+|------|-----|-------------|
+| `/` | `Home.vue` | Liste des projets |
+| `/login` | `Login.vue` | Authentification |
+| `/account` | `Account.vue` | Compte utilisateur |
+| `/notifications` | `Notifications.vue` | Centre de notifications |
+| `/inspirations` | `Inspirations.vue` | Galerie d'inspirations |
+| `/design-to-light` | `DesignToLight.vue` | Feature DTL |
+| `/projects/:id` | `Kanban.vue` | Détail projet (kanban) |
+| `/projects/:id/client-brief` | `Brief.vue` | Brief client |
+| `/projects/:id/extended-brief` | `Brief.vue` | Brief étendu |
+
+---
+
+## API Endpoints
+
+### Authentification
+- `POST /login.json` - Connexion (email, password)
+- `GET /logout` - Déconnexion
+
+### Pages (JSON)
+- `GET /{uri}.json` - Données page + user
+
+### Commentaires
+- `POST /create-comment.json`
+- `POST /update-comment.json`
+- `POST /delete-comment.json`
+- `POST /reply-comment.json`
+
+### Notifications
+- `POST /read-notification.json`
+- `POST /read-all-notifications.json`
+
+### Fichiers
+- `POST /upload-pdf.json`
+- `POST /upload-images.json`
+- `POST /remove-file.json`
+
+### Actions
+- `POST /save-page.json`
+- `POST /save-file.json`
+- `POST /validate-brief.json`
+- `POST /toggle-favorite.json`
+- `POST /request-project-creation.json`
+- `POST /request-optimization-appointment.json`
+
+---
+
+## Design to Light (DTL)
+
+Système d'évaluation avancée des designs de flacons.
+
+**Notation:**
+- Note globale : A (8-10), B (6-8), C (4-6), D (2-4), E (0-2)
+- Indicateurs : Design global, Bague, Épaule, Colonnes & Arêtes, Pied, Fond de Verre
+- Position : Complexité, Poids
+
+**Propositions DTL liées à:**
+- Proposition commerciale (PDF)
+- Idéation industrielle (PDF)
+- Échantillon virtuel - piste dynamique
+- Échantillon virtuel - piste statique
+
+---
+
+## Fichiers clés à connaître
+
+### Frontend
+- `src/main.js` - Init app
+- `src/router/router.js` - Guard + setup
+- `src/router/routes.js` - Définition routes
+- `src/stores/api.js` - Toute la comm API
+- `src/components/Menu.vue` - Navigation latérale
+- `src/components/project/DialogWrapper.vue` - Wrapper modales
+
+### Backend
+- `public/site/config/config.php` - Routes, hooks, config
+- `public/site/controllers/site.php` - Contrôleur principal
+- `public/site/models/project.php` - Logique projet
+- `public/site/plugins/helpers/index.php` - Fonctions utilitaires
+- `public/site/blueprints/pages/project.yml` - Structure projet
+
+---
+
+## Développement local
+
+```bash
+# Backend
+cd public
+composer install
+php -S localhost:8888 kirby/router.php
+
+# Frontend
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build          # Production
+npm run build:preprod  # Staging (avec sourcemaps)
+```
+
+---
+
+## Notes importantes
+
+1. **Cache**: Les étapes projet sont cachées. Invalidation automatique via hooks Kirby.
+2. **Permissions**: Filtrées côté serveur selon le rôle utilisateur.
+3. **Commentaires**: Positionnés en % (x, y) + pageIndex pour les PDFs multi-pages.
+4. **Notifications**: Stockées par projet, trackées par user UUID dans `readby[]`.
+5. **Virtual Sample**: Pistes dynamiques = pages enfants, pistes statiques = fichiers.
+
+---
+
+## Préférences de code et standards
+
+### Principes généraux
+
+**Clarté avant tout**
+- Privilégier des noms de variables et fonctions explicites
+- Éviter les commentaires sauf en cas de nécessité absolue
+- Le code doit être auto-documenté par des noms clairs
+
+**Organisation du code**
+- Factoriser le code en petites fonctions bien nommées
+- Éviter les blocs de code longs et complexes dans les hooks de lifecycle
+- Une fonction = une responsabilité claire
+
+**Ce qui est considéré comme "bricolage" (à éviter)**
+- Paramètres d'URL pour gérer des états applicatifs
+- Commentaires qui expliquent ce que fait le code au lieu de nommer correctement
+- Abstractions prématurées ou sur-ingénierie
+
+### Style de communication
+
+**Feedback direct**
+- Pas de politesses inutiles
+- Dire immédiatement si quelque chose ne va pas
+- Tester tout de suite et signaler les problèmes
+
+**Qualité attendue**
+- Standards élevés sur la qualité du code
+- Pas de code médiocre accepté
+- Exigence de clarté et d'explicité constante
--- a/package-lock.json
+++ b/package-lock.json
@ -19,6 +19,7 @@
        "three": "^0.168.0",
        "uniqid": "^5.4.0",
        "vue": "^3.5.6",
+        "vue-i18n": "^11.2.8",
        "vue-router": "^4.4.5"
      },
      "devDependencies": {
@ -542,6 +543,50 @@
        "@swc/helpers": "^0.5.0"
      }
    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.8.tgz",
+      "integrity": "sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.2.8",
+        "@intlify/shared": "11.2.8"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.8.tgz",
+      "integrity": "sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.2.8",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.8.tgz",
+      "integrity": "sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@ -1857,6 +1902,26 @@
        }
      }
    },
+    "node_modules/vue-i18n": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.8.tgz",
+      "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.2.8",
+        "@intlify/shared": "11.2.8",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue-router": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
--- a/package.json
+++ b/package.json
@ -21,6 +21,7 @@
    "three": "^0.168.0",
    "uniqid": "^5.4.0",
    "vue": "^3.5.6",
+    "vue-i18n": "^11.2.8",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
--- a/public/.user.ini
+++ b/public/.user.ini
@ -0,0 +1,2 @@
+; Augmentation temporaire de la limite mémoire pour le chargement des notifications
+memory_limit = 512M
--- a/public/site/accounts/.gitkeep
+++ b/public/site/accounts/.gitkeep
--- a/public/site/blueprints/pages/client-brief.yml
+++ b/public/site/blueprints/pages/client-brief.yml
@ -24,6 +24,18 @@ tabs:
            type: hidden
          isValidated:
            type: hidden
+          validatedBy:
+            type: hidden
+          validatedByName:
+            type: hidden
+          validatedByEmail:
+            type: hidden
+          validatedAt:
+            type: hidden
+          validationReadby:
+            type: hidden
+          validationDialogUri:
+            type: hidden
          pdf:
            label: PDF
            type: files
--- a/public/site/blueprints/pages/extended-brief.yml
+++ b/public/site/blueprints/pages/extended-brief.yml
@ -22,9 +22,34 @@ tabs:
        fields:
          stepName:
            type: hidden
+          isValidated:
+            type: hidden
+          # Champs pour notification "content" (brief validé)
+          validatedBy:
+            type: hidden
+          validatedByName:
+            type: hidden
+          validatedByEmail:
+            type: hidden
+          validatedAt:
+            type: hidden
+          validationReadby:
+            type: hidden
+          validationDialogUri:
+            type: hidden
          pdf:
            label: PDF
            type: files
            multiple: false
            uploads: pdf
+          description:
+            type: textarea
+            size: tiny
+            buttons: false
+          moodboard:
+            label: Images
+            type: files
+            template: image
+            layout: cards
+            size: medium
  files: tabs/files
--- a/public/site/blueprints/pages/project.yml
+++ b/public/site/blueprints/pages/project.yml
@ -21,6 +21,7 @@ tabs:
        fields:
          lastCacheUpdate:
            type: hidden
+          # Champs pour project-request
          isClientRequest:
            type: hidden
            default: "false"
@ -30,6 +31,32 @@ tabs:
            disabled: true
            when:
              isClientRequest: "true"
+          requestAuthor:
+            type: hidden
+          requestAuthorName:
+            type: hidden
+          requestAuthorEmail:
+            type: hidden
+          requestDate:
+            type: hidden
+          requestReadby:
+            type: hidden
+          # Champs pour appointment-request (DTL)
+          hasOptimizationRequest:
+            type: hidden
+            default: "false"
+          optimizationRequestDetails:
+            type: hidden
+          optimizationAuthor:
+            type: hidden
+          optimizationAuthorName:
+            type: hidden
+          optimizationAuthorEmail:
+            type: hidden
+          optimizationDate:
+            type: hidden
+          optimizationReadby:
+            type: hidden
          currentStep:
            label: Étape en cours
            type: radio
@ -58,6 +85,10 @@ tabs:
              query: page.logo.toFile
            layout: cardlets
            required: true
+          users:
+            label: Utilisateurs assignés
+            type: users
+            multiple: true

      - width: 2/3
        sections:
--- a/public/site/blueprints/users/client.yml
+++ b/public/site/blueprints/users/client.yml
@ -36,7 +36,7 @@ sections:
          fr: Projet(s) en cours
          en: Current project(s)
        link: https://designtopack.morphozbygroupepochet.com/
-        value: "{{ user.projects.toPages.count }}"
+        value: "{{ user.currentProjects.count }}"
        icon: folder
  content:
    label: ' '
@ -52,8 +52,3 @@ sections:
        layout: cardlets
        required: true
        width: 1/2
-      projects:
-        label: Projets
-        type: pages
-        query: page('projects').children
-        width: 1/2
--- a/public/site/blueprints/users/pochet.yml
+++ b/public/site/blueprints/users/pochet.yml
@ -14,8 +14,8 @@ fields:
      - Sales Manager
    default: Project Panager
    width: 1/4
-  projects:
-    label: Projets
+  hiddenProjects:
+    label: Projets masqués
    type: pages
    query: page('projects').children
    width: 3/4
--- a/public/site/cache/.gitkeep
+++ b/public/site/cache/.gitkeep
--- a/public/site/config/config.php
+++ b/public/site/config/config.php
@ -25,11 +25,14 @@ return [
    'css'      => 'assets/css/panel.css',
    'favicon'  => 'favicon.svg',
    'menu'     => require(__DIR__ . '/menu.php'),
+    'install' => 'true'
  ],
  'routes' => [
+    require(__DIR__ . '/routes/en-locale.php'),
    require(__DIR__ . '/routes/logout.php'),
    require(__DIR__ . '/routes/login.php'),
    require(__DIR__ . '/routes/toggle-favorite.php'),
+    require(__DIR__ . '/routes/toggle-hidden-project.php'),
    require(__DIR__ . '/routes/upload-images.php'),
    require(__DIR__ . '/routes/save-page.php'),
    require(__DIR__ . '/routes/save-file.php'),
@ -40,6 +43,8 @@ return [
    require(__DIR__ . '/routes/validate-brief.php'),
    require(__DIR__ . '/routes/request-project-creation.php'),
    require(__DIR__ . '/routes/request-optimization-appointment.php'),
+    require(__DIR__ . '/routes/migrate-notifications.php'),
+    require(__DIR__ . '/routes/migrate-user-projects.php'),
  ],
  'hooks' => [
    'page.create:after'  => require_once(__DIR__ . '/hooks/create-steps.php'),
--- a/public/site/config/hooks/file-update--regenerate-project-steps-cache.php
+++ b/public/site/config/hooks/file-update--regenerate-project-steps-cache.php
@ -3,7 +3,9 @@
 // file.update:after
 return function ($newFile, $oldFile) {
  $project = $newFile->parent()->template() == 'project' ? $newFile->parent() : $newFile->parent()->parents()->findBy('template', 'project');
-  if ($project) {    
-    $steps = $project->rebuildStepsCache();
+  if ($project) {
+    $project->rebuildStepsCache();
+    // Invalider aussi le cache des notifications (commentaires sur fichiers, etc.)
+    $project->invalidateNotificationsCache();
  }
 };
--- a/public/site/config/hooks/page-update--regenerate-project-steps-cache.php
+++ b/public/site/config/hooks/page-update--regenerate-project-steps-cache.php
@ -1,9 +1,11 @@
 <?php

 // page.update:after && page.changeStatus:after
-return function($newPage, $oldPage) {  
+return function($newPage, $oldPage) {
  $project = $newPage->template() == 'project' ? $newPage : $newPage->parents()->findBy('template', 'project');
  if ($project) {
-    $steps = $project->rebuildStepsCache();
+    $project->rebuildStepsCache();
+    // Invalider aussi le cache des notifications (briefs validés, etc.)
+    $project->invalidateNotificationsCache();
  }
 };
--- a/public/site/config/menu.php
+++ b/public/site/config/menu.php
@ -59,6 +59,15 @@ $menu = [
    }
  ],
  '-',
+  'analytics' => [
+    'label' => 'Analytics',
+    'icon'  => 'chart',
+    'link'  => 'pages/analytics',
+    'current' => function (string $current): bool {
+      $path = Kirby\Cms\App::instance()->path();
+      return Str::contains($path, 'pages/analytics');
+    }
+  ],
  '-',
  'users',
  'system'
--- a/public/site/config/routes/en-locale.php
+++ b/public/site/config/routes/en-locale.php
@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Route catch-all pour le préfixe /en/
+ * Permet d'accéder aux pages avec /en/... pour la version anglaise
+ */
+
+return [
+  'pattern' => 'en/(:all?)',
+  'action' => function ($uri = '') {
+    // Si l'URI se termine par .json, chercher la page et retourner le JSON
+    if (str_ends_with($uri, '.json')) {
+      $uri = str_replace('.json', '', $uri);
+      $page = page($uri);
+
+      if (!$page) {
+        // Si pas de page trouvée, essayer avec 'home'
+        if ($uri === '' || $uri === '/') {
+          $page = page('home');
+        } else {
+          return false; // 404
+        }
+      }
+
+      // Retourner la page pour que Kirby serve le template .json.php
+      return $page;
+    }
+
+    // Pour les URLs normales (sans .json), chercher la page
+    $page = page($uri);
+
+    if (!$page) {
+      // Si pas de page trouvée, essayer avec 'home'
+      if ($uri === '' || $uri === '/') {
+        $page = page('home');
+      } else {
+        return false; // 404
+      }
+    }
+
+    // Retourner la page pour que Kirby serve le template .php
+    return $page;
+  }
+];
--- a/public/site/config/routes/migrate-notifications.php
+++ b/public/site/config/routes/migrate-notifications.php
@ -0,0 +1,175 @@
+<?php
+
+/**
+ * Script de migration unique pour le système de notifications dérivées.
+ *
+ * Ce script copie les `readby[]` des anciennes notifications vers les sources de données.
+ * À exécuter une seule fois après le déploiement, puis à supprimer.
+ *
+ * Usage: POST /migrate-notifications.json
+ */
+
+return [
+  'pattern' => 'migrate-notifications.json',
+  'method' => 'POST',
+  'action' => function () {
+    $user = kirby()->user();
+
+    // Vérifier que l'utilisateur est admin
+    if (!$user || $user->role()->id() !== 'admin') {
+      return [
+        'status' => 'error',
+        'message' => 'Cette action nécessite les droits administrateur.'
+      ];
+    }
+
+    $migrated = [
+      'comments' => 0,
+      'replies' => 0,
+      'project-requests' => 0,
+      'appointment-requests' => 0,
+      'content' => 0,
+      'errors' => []
+    ];
+
+    $projects = page('projects')->children();
+
+    foreach ($projects as $project) {
+      // Récupérer les anciennes notifications
+      $notifications = $project->notifications()->yaml() ?? [];
+
+      if (empty($notifications)) {
+        continue;
+      }
+
+      foreach ($notifications as $notification) {
+        try {
+          $type = $notification['type'] ?? 'comment';
+          $id = $notification['id'] ?? null;
+          $readby = $notification['readby'] ?? [];
+
+          if (empty($id) || empty($readby)) {
+            continue;
+          }
+
+          switch ($type) {
+            case 'comment':
+            case 'comment-reply':
+              $fileUuid = $notification['location']['file']['uuid'] ?? null;
+              if (!$fileUuid) continue 2;
+
+              $file = kirby()->file($fileUuid);
+              if (!$file) continue 2;
+
+              $comments = Yaml::decode($file->comments()->value()) ?? [];
+              $updated = false;
+
+              foreach ($comments as &$comment) {
+                // Vérifier si c'est le commentaire principal
+                if ($comment['id'] === $id) {
+                  $existingReadby = $comment['readby'] ?? [];
+                  $comment['readby'] = array_values(array_unique(array_merge($existingReadby, $readby)));
+                  $updated = true;
+                  $migrated['comments']++;
+                  break;
+                }
+
+                // Vérifier dans les réponses
+                foreach ($comment['replies'] ?? [] as &$reply) {
+                  if ($reply['id'] === $id) {
+                    $existingReadby = $reply['readby'] ?? [];
+                    $reply['readby'] = array_values(array_unique(array_merge($existingReadby, $readby)));
+                    $updated = true;
+                    $migrated['replies']++;
+                    break 2;
+                  }
+                }
+              }
+
+              if ($updated) {
+                $file->update(['comments' => $comments]);
+              }
+              break;
+
+            case 'project-request':
+              $existingReadby = $project->requestReadby()->yaml() ?? [];
+              $newReadby = array_values(array_unique(array_merge($existingReadby, $readby)));
+
+              $updateData = ['requestReadby' => $newReadby];
+
+              // Migrer aussi les métadonnées si elles n'existent pas encore
+              if ($project->requestAuthor()->isEmpty() && isset($notification['author'])) {
+                $updateData['requestAuthor'] = $notification['author']['uuid'] ?? '';
+                $updateData['requestAuthorName'] = $notification['author']['name'] ?? '';
+                $updateData['requestAuthorEmail'] = $notification['author']['email'] ?? '';
+                $updateData['requestDate'] = $notification['date'] ?? '';
+              }
+
+              $project->update($updateData);
+              $migrated['project-requests']++;
+              break;
+
+            case 'appointment-request':
+              $existingReadby = $project->optimizationReadby()->yaml() ?? [];
+              $newReadby = array_values(array_unique(array_merge($existingReadby, $readby)));
+
+              $updateData = ['optimizationReadby' => $newReadby];
+
+              // Migrer aussi les métadonnées si elles n'existent pas encore
+              if ($project->optimizationAuthor()->isEmpty() && isset($notification['author'])) {
+                $updateData['optimizationAuthor'] = $notification['author']['uuid'] ?? '';
+                $updateData['optimizationAuthorName'] = $notification['author']['name'] ?? '';
+                $updateData['optimizationAuthorEmail'] = $notification['author']['email'] ?? '';
+                $updateData['optimizationDate'] = $notification['date'] ?? '';
+              }
+
+              $project->update($updateData);
+              $migrated['appointment-requests']++;
+              break;
+
+            case 'content':
+              $briefUri = $notification['location']['page']['uri'] ?? null;
+              if (!$briefUri) continue 2;
+
+              $brief = page($briefUri);
+              if (!$brief) continue 2;
+
+              $existingReadby = $brief->validationReadby()->yaml() ?? [];
+              $newReadby = array_values(array_unique(array_merge($existingReadby, $readby)));
+
+              $updateData = ['validationReadby' => $newReadby];
+
+              // Migrer aussi les métadonnées si elles n'existent pas encore
+              if ($brief->validatedBy()->isEmpty() && isset($notification['author'])) {
+                $updateData['validatedBy'] = $notification['author']['uuid'] ?? '';
+                $updateData['validatedByName'] = $notification['author']['name'] ?? '';
+                $updateData['validatedByEmail'] = $notification['author']['email'] ?? '';
+                $updateData['validatedAt'] = $notification['date'] ?? '';
+              }
+
+              $brief->update($updateData);
+              $migrated['content']++;
+              break;
+          }
+        } catch (\Throwable $th) {
+          $migrated['errors'][] = [
+            'project' => $project->title()->value(),
+            'notification_id' => $id ?? 'unknown',
+            'type' => $type ?? 'unknown',
+            'error' => $th->getMessage()
+          ];
+        }
+      }
+    }
+
+    $total = $migrated['comments'] + $migrated['replies'] +
+             $migrated['project-requests'] + $migrated['appointment-requests'] +
+             $migrated['content'];
+
+    return [
+      'status' => 'success',
+      'message' => "Migration terminée. $total notifications migrées.",
+      'details' => $migrated
+    ];
+  }
+];
--- a/public/site/config/routes/migrate-user-projects.php
+++ b/public/site/config/routes/migrate-user-projects.php
@ -0,0 +1,75 @@
+<?php
+
+/**
+ * Script de migration : inverse la relation User→Projects en Project→Users.
+ *
+ * Pour chaque user (non-admin) ayant un champ projects non vide,
+ * ajoute ce user dans le champ `users` du projet correspondant.
+ *
+ * Idempotent : pas de doublons si exécuté plusieurs fois.
+ * À supprimer après migration.
+ *
+ * Usage: POST /migrate-user-projects.json
+ */
+
+return [
+  'pattern' => 'migrate-user-projects.json',
+  'method' => 'POST',
+  'action' => function () {
+    $user = kirby()->user();
+
+    if (!$user || $user->role()->id() !== 'admin') {
+      return [
+        'status' => 'error',
+        'message' => 'Cette action nécessite les droits administrateur.'
+      ];
+    }
+
+    $migrated = [];
+    $errors = [];
+
+    $nonAdminUsers = kirby()->users()->filter(fn($u) => $u->role()->id() !== 'admin');
+
+    foreach ($nonAdminUsers as $u) {
+      if (!$u->projects()->exists() || $u->projects()->isEmpty()) {
+        continue;
+      }
+
+      $userProjects = $u->projects()->toPages();
+
+      foreach ($userProjects as $project) {
+        try {
+          $currentUsers = $project->users()->yaml();
+
+          $userUuid = $u->uuid()->toString();
+
+          if (in_array($userUuid, $currentUsers)) {
+            continue;
+          }
+
+          $currentUsers[] = $userUuid;
+          $project->update(['users' => $currentUsers]);
+
+          $migrated[] = [
+            'user' => $u->name()->value(),
+            'email' => $u->email(),
+            'project' => $project->title()->value(),
+          ];
+        } catch (\Throwable $th) {
+          $errors[] = [
+            'user' => $u->email(),
+            'project' => $project->title()->value(),
+            'error' => $th->getMessage()
+          ];
+        }
+      }
+    }
+
+    return [
+      'status' => 'success',
+      'message' => count($migrated) . ' assignations migrées.',
+      'migrated' => $migrated,
+      'errors' => $errors
+    ];
+  }
+];
--- a/public/site/config/routes/request-optimization-appointment.php
+++ b/public/site/config/routes/request-optimization-appointment.php
@ -7,37 +7,26 @@ return [
    $json = file_get_contents('php://input');
    $data = json_decode($json);

-    $user = kirby()->user();    
+    $user = kirby()->user();
    $project = page($data->projectUri);

+    $date = new DateTime();
+    $formattedDate = $date->format(DateTime::ISO8601);
+
    try {
-      $newProject = $project->update([
+      $project->update([
        "hasOptimizationRequest" => "true",
-        "optimizationRequestDetails" => esc("De la part de " . kirby()->user()->name() . " (" . kirby()->user()->email() . ") : \n\n" . "Objet : " . $data->subject . "\n" . $data->details)
+        "optimizationRequestDetails" => esc("De la part de " . $user->name() . " (" . $user->email() . ") : \n\n" . "Objet : " . $data->subject . "\n" . $data->details),
+        // Métadonnées pour le système de notifications dérivées
+        "optimizationAuthor" => (string) $user->uuid(),
+        "optimizationAuthorName" => (string) $user->name(),
+        "optimizationAuthorEmail" => (string) $user->email(),
+        "optimizationDate" => $formattedDate,
+        "optimizationReadby" => [],
      ]);
-    } catch (\Throwable $th) {
-      return [
-        "status" => "error",
-        "message" => "Can't update project " . $project->title()->value() . ". " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
-      ];
-    }

-    try {
-      $date = new DateTime();
-      $formattedDate = $date->format(DateTime::ISO8601);
-
-      $notificationData = [
-        "location" => [
-          "page" => $newProject
-        ],
-        "date" => (string) $formattedDate,
-        "text" => nl2br("Objet : " . $data->subject . "\n" .  esc($data->details)),
-        "author" => $user,
-        "id" => Str::uuid(),
-        "type" => "appointment-request",
-      ];
-
-      $newProject->createNotification($notificationData);
+      // Note: Les notifications sont maintenant dérivées.
+      // Plus besoin d'appeler createNotification().

      return [
        "status" => "success",
@ -45,7 +34,7 @@ return [
    } catch (\Throwable $th) {
      return [
        "status" => "error",
-        "message" => "Can't create notification. " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
+        "message" => "Can't update project " . $project->title()->value() . ". " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
      ];
    }
  }
--- a/public/site/config/routes/request-project-creation.php
+++ b/public/site/config/routes/request-project-creation.php
@ -11,15 +11,24 @@ return [

    $client = kirby()->user()->client()->toPage()->uuid();

+    $date = new DateTime();
+    $formattedDate = $date->format(DateTime::ISO8601);
+
    $projectData = [
      "slug" => esc(Str::slug($data->title)),
-      "template" => "project", 
+      "template" => "project",
      "content" => [
        "title" => esc($data->title),
-        "requestDetails" => esc("Demande de " . kirby()->user()->name() . " (" . kirby()->user()->email() . ") : \n\n" . $data->details),
+        "requestDetails" => esc("Demande de " . $user->name() . " (" . $user->email() . ") : \n\n" . $data->details),
        "client" => [$client],
        "isClientRequest" => "true",
-        "isDTLEnabled" => esc($data->isDTLEnabled)
+        "isDTLEnabled" => esc($data->isDTLEnabled),
+        // Métadonnées pour le système de notifications dérivées
+        "requestAuthor" => (string) $user->uuid(),
+        "requestAuthorName" => (string) $user->name(),
+        "requestAuthorEmail" => (string) $user->email(),
+        "requestDate" => $formattedDate,
+        "requestReadby" => [],
      ]
    ];

@ -27,21 +36,8 @@ return [
    try {
      $newProject = $projects->createChild($projectData);

-      $date = new DateTime();
-      $formattedDate = $date->format(DateTime::ISO8601);
-
-      $notificationData = [
-        "location" => [
-          "page" => $newProject
-        ],
-        "date" => (string) $formattedDate,
-        "text" => nl2br(esc($data->details)),
-        "author" => $user,
-        "id" => Str::uuid(),
-        "type" => "project-request",
-      ];
-
-      $newProject->createNotification($notificationData);
+      // Note: Les notifications sont maintenant dérivées.
+      // Plus besoin d'appeler createNotification().

      return [
        "status" => "success",
--- a/public/site/config/routes/toggle-hidden-project.php
+++ b/public/site/config/routes/toggle-hidden-project.php
@ -0,0 +1,60 @@
+<?php
+
+return [
+  'pattern' => '/toggle-hidden-project.json',
+  'method' => 'POST',
+  'action' => function() {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    try {
+      $user = kirby()->user();
+      $projectUuid = $data->projectUuid;
+
+      // Récupérer la collection des projets masqués actuels
+      $hiddenProjects = $user->hiddenProjects()->toPages();
+
+      // Trouver le projet à toggle
+      $projectPage = Find::page($projectUuid);
+
+      if (!$projectPage) {
+        throw new Exception('Projet introuvable');
+      }
+
+      // Toggle: ajouter ou retirer le projet de la collection
+      if ($hiddenProjects->has($projectPage)) {
+        $hiddenProjects->remove($projectPage);
+        $action = 'shown';
+      } else {
+        $hiddenProjects->add($projectPage);
+        $action = 'hidden';
+      }
+
+      // Convertir la collection en array puis en YAML
+      $array = $hiddenProjects->toArray();
+      $yaml = Data::encode($array, 'yaml');
+
+      // Mettre à jour l'utilisateur
+      $user->update([
+        'hiddenProjects' => $yaml
+      ]);
+
+      // Retourner les UUIDs pour le frontend
+      $hiddenProjectsUuids = [];
+      foreach ($hiddenProjects as $project) {
+        $hiddenProjectsUuids[] = $project->uuid();
+      }
+
+      return [
+        'status' => 'success',
+        'action' => $action,
+        'hiddenProjects' => $hiddenProjectsUuids
+      ];
+    } catch (\Throwable $th) {
+      return [
+        'status' => 'error',
+        'message' => 'Impossible de modifier les projets masqués : ' . $th->getMessage() . ' in file ' . $th->getFile() . ' line ' . $th->getLine()
+      ];
+    }
+  }
+];
--- a/public/site/config/routes/validate-brief.php
+++ b/public/site/config/routes/validate-brief.php
@ -9,27 +9,31 @@ return [

    $page = page($data->briefUri);
    $project = $page->parent();
-    
-    try {
-      $newPage = $page->update([
-        'isValidated' => 'true'
-      ]);
+    $user = kirby()->user();

+    try {
      $timezone = new DateTimeZone('Europe/Paris');
      $dateTime = new DateTime('now', $timezone);

-      $notification = [
-        'location' => [
-          'page' => $page,
-        ],
-        'date' => $dateTime->format('Y-m-d\TH:i:sP'),
-        'text' => "Nouveau brief", 
-        'author' => kirby()->user(),
-        'id' => Str::uuid(),
-        'type' => 'content'
+      $updateData = [
+        'isValidated' => 'true',
+        // Métadonnées pour le système de notifications dérivées
+        'validatedBy' => (string) $user->uuid(),
+        'validatedByName' => (string) $user->name(),
+        'validatedByEmail' => (string) $user->email(),
+        'validatedAt' => $dateTime->format('Y-m-d\TH:i:sP'),
+        'validationReadby' => [],
      ];

-      $project->createNotification($notification);
+      // Si un dialogUri est fourni (validation depuis PDF), le stocker
+      if (isset($data->dialogUri) && !empty($data->dialogUri)) {
+        $updateData['validationDialogUri'] = (string) $data->dialogUri;
+      }
+
+      $newPage = $page->update($updateData);
+
+      // Note: Les notifications sont maintenant dérivées.
+      // Plus besoin d'appeler createNotification().

      return [
        "success" => "'" . $project->title()->value() . "' brief validated."
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@ -27,15 +27,28 @@ return function ($page, $kirby, $site) {
      }
    }

-    if ($kirby->user()->projects()->exists() && $kirby->user()->projects()->isNotEmpty()) {
-      $userData['projects'] = $kirby->user()->projects()->toPages()->map(function ($project) {
+    $userProjects = $kirby->user()->currentProjects()->merge(
+      $kirby->user()->archivedProjects()
+    );
+
+    if ($userProjects->count() > 0) {
+      $userData['projects'] = $userProjects->map(function ($project) {
        return [
          "title" => (string) $project->title(),
          "uri" => (string) $project->uri(),
-          "step" => (string) $project->getStepLabel(),
+          "step" => (string) $project->currentStep(),
+          "uuid" => (string) $project->uuid(),
        ];
      })->data;
    }
+
+    if ($kirby->user()->hiddenProjects()->exists() && $kirby->user()->hiddenProjects()->isNotEmpty()) {
+      $userData['hiddenProjects'] = $kirby->user()->hiddenProjects()->toPages()->map(function ($project) {
+        return (string) $project->uuid();
+      })->values();
+    } else {
+      $userData['hiddenProjects'] = [];
+    }
  }


--- a/public/site/models/project.php
+++ b/public/site/models/project.php
@ -3,18 +3,62 @@
 use adrienpayet\notifications\NotificationsPage;

 class ProjectPage extends NotificationsPage {
-  public function getSteps() {    
+  public function getSteps() {
    $apiCache = kirby()->cache('api');
-    $stepsData = $apiCache?->get($this->slug() . '_' . 'steps');   
-    
+    $stepsData = $apiCache?->get($this->slug() . '_' . 'steps');
+
    if ($stepsData === null || count($stepsData) === 0) {
      $this->rebuildStepsCache();
    };
-    
-    $stepsData = $apiCache->get($this->slug() . '_' . 'steps');   
+
+    $stepsData = $apiCache->get($this->slug() . '_' . 'steps');

    return $stepsData;
  }
+
+  /**
+   * Récupère les notifications pour ce projet (version allégée avec cache).
+   * Cache par utilisateur pour inclure le isRead.
+   */
+  public function getNotificationsLight($user) {
+    if (!$user) {
+      return [];
+    }
+
+    $apiCache = kirby()->cache('api');
+    $cacheKey = $this->slug() . '_notifications_' . $user->uuid();
+    $notifications = $apiCache?->get($cacheKey);
+
+    // Si pas en cache, collecter et cacher
+    if ($notifications === null) {
+      $collector = kirby()->option('adrienpayet.pdc-notifications.collector');
+      if (!$collector) {
+        return [];
+      }
+
+      try {
+        $notifications = $collector->collectLight($this, $user);
+        $apiCache->set($cacheKey, $notifications);
+      } catch (\Throwable $e) {
+        error_log("Error caching notifications for {$this->slug()}: " . $e->getMessage());
+        return [];
+      }
+    }
+
+    return $notifications;
+  }
+
+  /**
+   * Invalide le cache des notifications de ce projet pour tous les utilisateurs.
+   */
+  public function invalidateNotificationsCache() {
+    $apiCache = kirby()->cache('api');
+    // Invalider pour tous les users
+    foreach (kirby()->users() as $user) {
+      $cacheKey = $this->slug() . '_notifications_' . $user->uuid();
+      $apiCache->remove($cacheKey);
+    }
+  }
  
  public function rebuildStepsCache() {    
    // Create steps
@ -55,7 +99,6 @@ class ProjectPage extends NotificationsPage {
    }

    return [
-      'label' => $child->title()->value(),
      'id' => $child->stepName()->value(),
      'slug' => $child->slug(),
      'index' => intval($child->stepIndex()->value()),
@ -98,19 +141,19 @@ class ProjectPage extends NotificationsPage {

    if ($child->hasChildren()) {
      $files['dynamic'] = [];
-      
+
      foreach ($child->children() as $key => $track) {
        $trackData = [
          'title' => (string) $track->title(),
          'slug' => (string) $track->slug(),
          'backgroundColor' => (string) $track->backgroundColor(),
          'files' => [],
-        ];        
-        
+        ];
+
        foreach ($track->views()->toFiles() as $view) {
          $trackData['files'][] = getFileData($view, true);
        }
-        
+
        if ($track->group()->isNotEmpty()) {
          $files['dynamic'][$track->group()->value()][] = $trackData;
        } else {
@ -118,12 +161,36 @@ class ProjectPage extends NotificationsPage {
        }
      }

+      // Récupérer l'ordre des groupes depuis le champ groups
+      $orderedGroups = $child->groups()->split();
+
+      // Réorganiser $files['dynamic'] selon l'ordre défini
+      if (!empty($orderedGroups)) {
+        $orderedDynamic = [];
+
+        foreach ($orderedGroups as $group) {
+          if (isset($files['dynamic'][$group])) {
+            $orderedDynamic[$group] = $files['dynamic'][$group];
+          }
+        }
+
+        // Ajouter les groupes non définis dans le champ à la fin
+        foreach ($files['dynamic'] as $group => $tracks) {
+          if (!isset($orderedDynamic[$group])) {
+            $orderedDynamic[$group] = $tracks;
+          }
+        }
+
+        $files['dynamic'] = $orderedDynamic;
+      }
+
+      // Toujours mettre "Autres pistes" à la fin
      if (isset($files['dynamic']['Autres pistes'])) {
        $others = $files['dynamic']['Autres pistes'];
        unset($files['dynamic']['Autres pistes']);
        $files['dynamic']['Autres pistes'] = $others;
      }
-    
+
    }

    if ($child->rawGlass()->isNotEmpty() || $child->finishedGlass()->isNotEmpty()) {
@ -133,7 +200,7 @@ class ProjectPage extends NotificationsPage {
    if ($child->rawGlass()->isNotEmpty()) {
      $files['static']['rawGlass'] = getFileData($child->rawGlass()->toFile());
    }
-    
+
    if ($child->finishedGlass()->isNotEmpty()) {
      $files['static']['finishedGlass'] = getFileData($child->finishedGlass()->toFile());
    }
@ -149,30 +216,18 @@ class ProjectPage extends NotificationsPage {
    }
  }

-  public function getStepLabel() {
-    $stepsLabel = [
-      "clientBrief" => "brief",
-      "proposal" => "offre commerciale",
-      "extendedBrief" => "brief enrichi",
-      "industrialIdeation" => "idéation industrielle",
-      "virtualSample" => "échantillon virtuel",
-      "physicalSample" => "échantillon physique",
-    ];
-
-    return $stepsLabel[$this->currentStep()->value()] ?? "brief";
-  }

  // public function printManagers() {
  //   return A::implode($this->managers()->toUsers()->pluck('name'), ', ');
  // }

  public function managers() {
-    return kirby()->users()->filter(function($user) {
-      if ($user->role() != 'admin' && $user->projects()->isEmpty()) {
-          return false;
-      }
-
-      return $user->role() == 'admin' || $user->projects()->toPages()->has($this);
+    if ($this->users()->isEmpty()) {
+      return kirby()->users()->filterBy('role', 'admin');
+    }
+    $projectUsers = $this->users()->toUsers();
+    return kirby()->users()->filter(function($user) use ($projectUsers) {
+      return $user->role() == 'admin' || $projectUsers->has($user);
    });
  }
 }
--- a/public/site/plugins/analytics/blueprints/pages/analytics.yml
+++ b/public/site/plugins/analytics/blueprints/pages/analytics.yml
@ -0,0 +1,18 @@
+title: Analytics
+icon: chart
+buttons: false
+options:
+  changeTitle: false
+
+status:
+  - unlisted
+
+columns:
+  - width: 1/1
+    sections:
+      dashboard:
+        type: fields
+        fields:
+          analytics:
+            type: analytics-dashboard
+            label: false
--- a/public/site/plugins/analytics/classes/AnalyticsPage.php
+++ b/public/site/plugins/analytics/classes/AnalyticsPage.php
@ -0,0 +1,37 @@
+<?php
+
+namespace adrienpayet\analytics;
+
+use Kirby\Cms\Page;
+
+class AnalyticsPage extends Page
+{
+    public function getAnalyticsData(array $filters = []): array
+    {
+        $user = kirby()->user();
+
+        if (!$user) {
+            return [];
+        }
+
+        if ($user->isAdmin()) {
+            return AnalyticsStore::getAggregatedData($filters);
+        }
+
+        $allowedProjects = $user->currentProjects();
+        $allowedEmails = [];
+        foreach ($allowedProjects as $project) {
+            $users = kirby()->users();
+            foreach ($users as $u) {
+                if ($u->currentProjects()->has($project)) {
+                    $allowedEmails[] = $u->email()->value();
+                }
+            }
+        }
+
+        $filters['emails'] = array_unique($allowedEmails);
+
+        return AnalyticsStore::getAggregatedData($filters);
+    }
+
+}
--- a/public/site/plugins/analytics/classes/AnalyticsStore.php
+++ b/public/site/plugins/analytics/classes/AnalyticsStore.php
@ -0,0 +1,159 @@
+<?php
+
+namespace adrienpayet\analytics;
+
+use Kirby\Data\Yaml;
+use Kirby\Toolkit\F;
+
+class AnalyticsStore
+{
+    private static function getFilePath(): string
+    {
+        return kirby()->root('content') . '/analytics/visits.yml';
+    }
+
+    private static function ensureFileExists(): void
+    {
+        $filePath = self::getFilePath();
+        $dirPath = dirname($filePath);
+
+        if (!is_dir($dirPath)) {
+            F::mkdir($dirPath, true);
+        }
+
+        if (!F::exists($filePath)) {
+            F::write($filePath, Yaml::encode(['visits' => []]));
+        }
+    }
+
+    public static function addVisit(Visit $visit): void
+    {
+        self::ensureFileExists();
+
+        $filePath = self::getFilePath();
+        $data = Yaml::decode(F::read($filePath));
+
+        $visits = $data['visits'] ?? [];
+        $visits[] = $visit->toArray();
+
+        // Limiter à 10000 visites max
+        if (count($visits) > 10000) {
+            $visits = array_slice($visits, -10000);
+        }
+
+        $data['visits'] = $visits;
+        F::write($filePath, Yaml::encode($data));
+    }
+
+    public static function getVisits(array $filters = []): array
+    {
+        self::ensureFileExists();
+
+        $filePath = self::getFilePath();
+        $data = Yaml::decode(F::read($filePath));
+        $visits = $data['visits'] ?? [];
+
+        // Convertir en objets Visit
+        $visits = array_map(fn($v) => Visit::fromArray($v), $visits);
+
+        // Filtrer par daterange
+        if (!empty($filters['startDate']) || !empty($filters['endDate'])) {
+            $visits = array_filter($visits, function($visit) use ($filters) {
+                $timestamp = strtotime($visit->timestamp);
+
+                if (!empty($filters['startDate'])) {
+                    $startDate = strtotime($filters['startDate'] . ' 00:00:00');
+                    if ($timestamp < $startDate) {
+                        return false;
+                    }
+                }
+
+                if (!empty($filters['endDate'])) {
+                    $endDate = strtotime($filters['endDate'] . ' 23:59:59');
+                    if ($timestamp > $endDate) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+        }
+
+        // Filtrer par projet
+        if (!empty($filters['project'])) {
+            $projectId = $filters['project'];
+            $visits = array_filter($visits, function($visit) use ($projectId) {
+                return str_contains($visit->pageUrl, "/projects/{$projectId}");
+            });
+        }
+
+        // Filtrer par email (permissions)
+        if (!empty($filters['emails'])) {
+            $allowedEmails = $filters['emails'];
+            $visits = array_filter($visits, function($visit) use ($allowedEmails) {
+                return in_array($visit->email, $allowedEmails);
+            });
+        }
+
+        // Filtrer par nom de page
+        if (!empty($filters['pageNames'])) {
+            $pageNames = $filters['pageNames'];
+            $visits = array_filter($visits, function($visit) use ($pageNames) {
+                $name = $visit->pageName ?: $visit->pageUrl;
+                return in_array($name, $pageNames);
+            });
+        }
+
+        return array_values($visits);
+    }
+
+    public static function getAggregatedData(array $filters = []): array
+    {
+        self::ensureFileExists();
+
+        // Visits sans filtre pageNames → pour construire la liste des pages (options)
+        $filtersWithoutPages = $filters;
+        unset($filtersWithoutPages['pageNames']);
+        $allVisits = self::getVisits($filtersWithoutPages);
+
+        $visitsByPage = [];
+        foreach ($allVisits as $visit) {
+            $page = $visit->pageName ?: $visit->pageUrl;
+            $visitsByPage[$page] = ($visitsByPage[$page] ?? 0) + 1;
+        }
+        arsort($visitsByPage);
+
+        // Visits avec tous les filtres → pour les stats affichées
+        $visits = !empty($filters['pageNames'])
+            ? self::getVisits($filters)
+            : $allVisits;
+
+        $visitsByDay = [];
+        foreach ($visits as $visit) {
+            $day = date('Y-m-d', strtotime($visit->timestamp));
+            $visitsByDay[$day] = ($visitsByDay[$day] ?? 0) + 1;
+        }
+        ksort($visitsByDay);
+
+        $uniqueSessions = count(array_unique(array_map(fn($v) => $v->sessionId, $visits)));
+
+        // Visites par jour par page (toutes les pages)
+        $visitsByDayByPage = [];
+        foreach ($visits as $visit) {
+            $page = $visit->pageName ?: $visit->pageUrl;
+            $day = date('Y-m-d', strtotime($visit->timestamp));
+            $visitsByDayByPage[$page][$day] = ($visitsByDayByPage[$page][$day] ?? 0) + 1;
+        }
+        foreach ($visitsByDayByPage as &$days) {
+            ksort($days);
+        }
+
+        return [
+            'totalVisits' => count($visits),
+            'uniqueSessions' => $uniqueSessions,
+            'visitsByDay' => $visitsByDay,
+            'visitsByPage' => array_slice($visitsByPage, 0, 10, true),
+            'visitsByDayByPage' => $visitsByDayByPage,
+        ];
+    }
+}
--- a/public/site/plugins/analytics/classes/Visit.php
+++ b/public/site/plugins/analytics/classes/Visit.php
@ -0,0 +1,46 @@
+<?php
+
+namespace adrienpayet\analytics;
+
+class Visit
+{
+    public string $id;
+    public string $email;
+    public ?string $country;
+    public string $timestamp;
+    public string $sessionId;
+    public string $pageUrl;
+    public string $pageType;
+    public ?string $pageName;
+
+    public function __construct(array $data)
+    {
+        $this->id = $data['id'] ?? uniqid('visit_', true);
+        $this->email = $data['email'];
+        $this->country = $data['country'] ?? null;
+        $this->timestamp = $data['timestamp'] ?? date('Y-m-d H:i:s');
+        $this->sessionId = $data['sessionId'];
+        $this->pageUrl = $data['pageUrl'];
+        $this->pageType = $data['pageType'];
+        $this->pageName = $data['pageName'] ?? null;
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'id' => $this->id,
+            'email' => $this->email,
+            'country' => $this->country,
+            'timestamp' => $this->timestamp,
+            'sessionId' => $this->sessionId,
+            'pageUrl' => $this->pageUrl,
+            'pageType' => $this->pageType,
+            'pageName' => $this->pageName,
+        ];
+    }
+
+    public static function fromArray(array $data): self
+    {
+        return new self($data);
+    }
+}
--- a/public/site/plugins/analytics/fields/dashboard.php
+++ b/public/site/plugins/analytics/fields/dashboard.php
@ -0,0 +1,18 @@
+<?php
+
+return [
+    'props' => [
+        'value' => function ($value = null) {
+            return null;
+        }
+    ],
+    'computed' => [
+        'analyticsData' => function () {
+            $page = $this->model();
+            if (method_exists($page, 'getAnalyticsData')) {
+                return $page->getAnalyticsData();
+            }
+            return [];
+        }
+    ]
+];
--- a/public/site/plugins/analytics/index.css
+++ b/public/site/plugins/analytics/index.css
@ -0,0 +1,123 @@
+
+.k-analytics-filters {
+  display: flex;
+  gap: 1rem;
+}
+.k-analytics-filters label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+.k-date-inputs-wrapper {
+  display: flex;
+  column-gap: 1rem;
+}
+.k-analytics-filters input[type='date'] {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--rounded);
+  font-size: 0.875rem;
+  background: var(--color-background);
+}
+.k-analytics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin: 3rem 0;
+}
+.k-analytics-user-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+.k-field-name-user,
+.k-field-name-page {
+  min-width: 15rem;
+}
+.k-field-name-top-pages {
+  margin-left: 1rem;
+}
+.k-analytics-page-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+.k-analytics-card {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+}
+.k-analytics-card h3 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-light);
+  margin: 0 0 0.5rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.k-analytics-metric {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1;
+}
+.k-analytics-chart-container {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+  margin-bottom: 1.5rem;
+}
+.k-analytics-chart-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.k-analytics-chart-header h3 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+.k-analytics-chart-container canvas {
+  max-height: 300px;
+}
+.k-analytics-empty {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+  padding: 3rem;
+  text-align: center;
+}
+.k-analytics-empty p {
+  margin: 0;
+  color: var(--color-text-light);
+}
+.k-analytics-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.k-analytics-list li {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.375rem 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.875rem;
+}
+.k-analytics-list li:last-child {
+  border-bottom: none;
+}
+.k-analytics-list-label {
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 1rem;
+}
+.k-analytics-list-value {
+  font-weight: 600;
+  color: var(--color-text);
+  flex-shrink: 0;
+}
--- a/public/site/plugins/analytics/index.js
+++ b/public/site/plugins/analytics/index.js
--- a/public/site/plugins/analytics/index.php
+++ b/public/site/plugins/analytics/index.php
@ -0,0 +1,27 @@
+<?php
+
+use adrienpayet\analytics\Visit;
+use adrienpayet\analytics\AnalyticsPage;
+use adrienpayet\analytics\AnalyticsStore;
+
+F::loadClasses([
+    "adrienpayet\\analytics\\Visit" => __DIR__ . "/classes/Visit.php",
+    "adrienpayet\\analytics\\AnalyticsPage" => __DIR__ . "/classes/AnalyticsPage.php",
+    "adrienpayet\\analytics\\AnalyticsStore" => __DIR__ . "/classes/AnalyticsStore.php",
+]);
+
+Kirby::plugin("adrienpayet/analytics", [
+    "pageModels" => [
+        "analytics" => AnalyticsPage::class,
+    ],
+    "blueprints" => [
+        "pages/analytics" => __DIR__ . "/blueprints/pages/analytics.yml",
+    ],
+    "routes" => [
+        require(__DIR__ . "/routes/track.php"),
+        require(__DIR__ . "/routes/get-data.php"),
+    ],
+    "fields" => [
+        "analytics-dashboard" => require(__DIR__ . "/fields/dashboard.php"),
+    ],
+]);
--- a/public/site/plugins/analytics/package-lock.json
+++ b/public/site/plugins/analytics/package-lock.json
@ -0,0 +1,30 @@
+{
+  "name": "analytics",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "chart.js": "^4.4.0"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    }
+  }
+}
--- a/public/site/plugins/analytics/package.json
+++ b/public/site/plugins/analytics/package.json
@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "dev": "npx -y kirbyup src/index.js --watch",
+    "build": "npx -y kirbyup src/index.js"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.0"
+  }
+}
--- a/public/site/plugins/analytics/routes/get-data.php
+++ b/public/site/plugins/analytics/routes/get-data.php
@ -0,0 +1,80 @@
+<?php
+
+return [
+    'pattern' => 'analytics-data.json',
+    'method' => 'GET',
+    'action' => function () {
+        $kirby = kirby();
+        $user = $kirby->user();
+
+        // Seuls les admins peuvent accéder aux données analytics
+        if (!$user || !$user->isAdmin()) {
+            return [
+                'status' => 'error',
+                'message' => 'Unauthorized'
+            ];
+        }
+
+        $analyticsPage = $kirby->page('analytics');
+
+        if (!$analyticsPage) {
+            return [
+                'status' => 'error',
+                'message' => 'Analytics page not found'
+            ];
+        }
+
+        $request = $kirby->request();
+        $filters = [];
+
+        if ($startDate = $request->query()->get('startDate')) {
+            $filters['startDate'] = $startDate;
+        }
+
+        if ($endDate = $request->query()->get('endDate')) {
+            $filters['endDate'] = $endDate;
+        }
+
+        if ($project = $request->query()->get('project')) {
+            $filters['project'] = $project;
+        }
+
+        if (!empty($_GET['emails'])) {
+            $filters['emails'] = explode(',', $_GET['emails']);
+        }
+
+        if (!empty($_GET['pageNames'])) {
+            $filters['pageNames'] = explode(',', $_GET['pageNames']);
+        }
+
+        $data = $analyticsPage->getAnalyticsData($filters);
+
+        $users = [];
+        foreach ($kirby->users() as $u) {
+            $email = (string) $u->email();
+            $name = $u->name()->isNotEmpty() ? (string) $u->name() : $email;
+            $label = $name;
+
+            $clientField = $u->content()->get('client');
+            if ($clientField && $clientField->isNotEmpty()) {
+                $clientPage = $clientField->toPage();
+                if ($clientPage) {
+                    $label .= ' (' . $clientPage->title() . ')';
+                }
+            }
+
+            $users[] = [
+                'email' => $email,
+                'label' => $label,
+            ];
+        }
+
+        usort($users, fn($a, $b) => strcasecmp($a['label'], $b['label']));
+
+        return [
+            'status' => 'success',
+            'data' => $data,
+            'users' => $users
+        ];
+    }
+];
--- a/public/site/plugins/analytics/routes/track.php
+++ b/public/site/plugins/analytics/routes/track.php
@ -0,0 +1,61 @@
+<?php
+
+use adrienpayet\analytics\Visit;
+use adrienpayet\analytics\AnalyticsStore;
+
+return [
+    'pattern' => 'track-visit.json',
+    'method' => 'POST',
+    'action' => function () {
+        $kirby = kirby();
+        $user = $kirby->user();
+
+        // Seuls les utilisateurs connectés peuvent tracker
+        if (!$user) {
+            return [
+                'status' => 'error',
+                'message' => 'Unauthorized'
+            ];
+        }
+
+        $data = $kirby->request()->body()->toArray();
+
+        // Détection du pays
+        $country = null;
+
+        // 1. Header Cloudflare
+        if (isset($_SERVER['HTTP_CF_IPCOUNTRY'])) {
+            $country = $_SERVER['HTTP_CF_IPCOUNTRY'];
+        }
+        // 2. Fallback : API ipapi.co (optionnel, peut être désactivé)
+        elseif (!empty($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] !== '127.0.0.1') {
+            try {
+                $ip = $_SERVER['REMOTE_ADDR'];
+                $response = @file_get_contents("https://ipapi.co/{$ip}/country/", false, stream_context_create([
+                    'http' => ['timeout' => 1]
+                ]));
+                if ($response) {
+                    $country = trim($response);
+                }
+            } catch (Exception $e) {
+                // Ignorer les erreurs de géolocalisation
+            }
+        }
+
+        $visit = new Visit([
+            'email' => (string) $user->email(),
+            'country' => $country,
+            'sessionId' => $data['sessionId'] ?? '',
+            'pageUrl' => $data['pageUrl'] ?? '',
+            'pageType' => $data['pageType'] ?? 'unknown',
+            'pageName' => $data['pageName'] ?? null,
+        ]);
+
+        AnalyticsStore::addVisit($visit);
+
+        return [
+            'status' => 'success',
+            'message' => 'Visit tracked'
+        ];
+    }
+];
--- a/public/site/plugins/analytics/src/components/AnalyticsDashboard.vue
+++ b/public/site/plugins/analytics/src/components/AnalyticsDashboard.vue
@ -0,0 +1,491 @@
+<template>
+  <div class="k-analytics-dashboard">
+    <div class="k-analytics-filters">
+      <div class="k-analytics-date-filter">
+        <header class="k-field-header">
+          <label class="k-label k-field-label" title="Filtrer par dates">
+            <span class="k-label-text">Filtrer par dates </span>
+          </label>
+        </header>
+        <div class="k-date-inputs-wrapper">
+          <label>
+            Du
+            <input type="date" v-model="startDate" @change="fetchData" />
+          </label>
+          <label>
+            Au
+            <input type="date" v-model="endDate" @change="fetchData" />
+          </label>
+        </div>
+      </div>
+      <div class="k-analytics-user-filter">
+        <k-multiselect-field
+          :options="userOptions"
+          :value="selectedEmails"
+          label="Filtrer par utilisateur(s)"
+          search="true"
+          name="user"
+          @input="onUserSelectionChange"
+        />
+      </div>
+      <div class="k-analytics-page-filter">
+        <k-multiselect-field
+          :options="pageOptions"
+          :value="selectedPages"
+          label="Filtrer par page(s)"
+          search="true"
+          name="page"
+          @input="onPageSelectionChange"
+        />
+      </div>
+    </div>
+
+    <div v-if="!hasData" class="k-analytics-empty">
+      <p>Aucune donnée à afficher</p>
+    </div>
+
+    <template v-else>
+      <div class="k-analytics-grid">
+        <div class="k-analytics-card">
+          <h3>Sessions uniques</h3>
+          <div class="k-analytics-metric">{{ data.uniqueSessions }}</div>
+        </div>
+        <div class="k-analytics-card">
+          <h3>Pages vues</h3>
+          <div class="k-analytics-metric">{{ data.totalVisits }}</div>
+        </div>
+        <div class="k-analytics-card">
+          <h3>Pages / session</h3>
+          <div class="k-analytics-metric">{{ pagesPerSession }}</div>
+        </div>
+      </div>
+
+      <div class="k-analytics-chart-container">
+        <div class="k-analytics-chart-header">
+          <h3>Visites par jour</h3>
+          <k-toggle-field
+            v-if="selectedPages.length === 0"
+            :value="showTopPagesOnly"
+            before="Moyenne"
+            after="Pages les + visitées"
+            text=" "
+            name="top-pages"
+            @input="onToggleTopPages"
+          />
+        </div>
+        <canvas ref="chartCanvas"></canvas>
+      </div>
+
+      <div
+        class="k-analytics-card"
+        v-if="data.visitsByPage && Object.keys(data.visitsByPage).length"
+      >
+        <h3>Pages les plus visitées</h3>
+        <ul class="k-analytics-list">
+          <li v-for="(count, page) in data.visitsByPage" :key="page">
+            <span class="k-analytics-list-label">{{ page }}</span>
+            <span class="k-analytics-list-value">{{ count }}</span>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  LineController,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Filler,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+Chart.register(
+  LineController,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Filler,
+  Tooltip,
+  Legend
+);
+
+const CHART_COLORS = [
+  '#4271ae',
+  '#c82829',
+  '#8959a8',
+  '#4d9a0f',
+  '#f5871f',
+  '#3e999f',
+  '#718c00',
+  '#a3685a',
+  '#525252',
+  '#eab700',
+];
+
+export default {
+  props: {
+    analyticsData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      startDate: '',
+      endDate: '',
+      data: this.analyticsData || {},
+      chart: null,
+      users: [],
+      selectedEmails: [],
+      selectedPages: [],
+      showTopPagesOnly: true,
+    };
+  },
+
+  computed: {
+    hasData() {
+      return this.data && this.data.totalVisits > 0;
+    },
+    pagesPerSession() {
+      if (!this.data?.uniqueSessions) return '0';
+      return (this.data.totalVisits / this.data.uniqueSessions).toFixed(1);
+    },
+    userOptions() {
+      return this.users.map((u) => ({ value: u.email, text: u.label }));
+    },
+    pageOptions() {
+      if (!this.data?.visitsByPage) return [];
+      return Object.keys(this.data.visitsByPage)
+        .map((p) => ({ value: p, text: p }))
+        .sort((a, b) => a.text.localeCompare(b.text));
+    },
+  },
+
+  watch: {
+    analyticsData(newVal) {
+      this.data = newVal || {};
+      this.renderChart();
+    },
+  },
+
+  mounted() {
+    this.setDefaultDates();
+    this.fetchData();
+  },
+
+  beforeUnmount() {
+    this.destroyChart();
+  },
+
+  methods: {
+    setDefaultDates() {
+      const now = new Date();
+      const thirtyDaysAgo = new Date(now);
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+      this.endDate = now.toISOString().split('T')[0];
+      this.startDate = thirtyDaysAgo.toISOString().split('T')[0];
+    },
+
+    onUserSelectionChange(emails) {
+      this.selectedEmails = emails;
+      this.fetchData();
+    },
+
+    onPageSelectionChange(pages) {
+      this.selectedPages = pages;
+      this.fetchData();
+    },
+
+    onToggleTopPages(value) {
+      this.showTopPagesOnly = value;
+      this.renderChart();
+    },
+
+    async fetchData() {
+      const params = new URLSearchParams();
+      if (this.startDate) params.set('startDate', this.startDate);
+      if (this.endDate) params.set('endDate', this.endDate);
+      if (this.selectedEmails.length) {
+        params.set('emails', this.selectedEmails.join(','));
+      }
+      if (this.selectedPages.length) {
+        params.set('pageNames', this.selectedPages.join(','));
+      }
+
+      try {
+        const response = await fetch(`/analytics-data.json?${params}`);
+        const json = await response.json();
+
+        console.log(json.data);
+
+        if (json.status === 'success') {
+          this.data = json.data;
+        }
+
+        if (json.users && !this.users.length) {
+          this.users = json.users;
+        }
+
+        this.renderChart();
+      } catch (e) {
+        console.error('Analytics fetch error:', e);
+        this.renderChart();
+      }
+    },
+
+    destroyChart() {
+      if (this.chart) {
+        this.chart.destroy();
+        this.chart = null;
+      }
+    },
+
+    formatDateFR(isoDate) {
+      const [y, m, d] = isoDate.split('-');
+      return `${d}/${m}/${y}`;
+    },
+
+    renderChart() {
+      this.destroyChart();
+
+      const canvas = this.$refs.chartCanvas;
+      if (!canvas || !this.data?.visitsByDay) return;
+
+      const allDays = Object.keys(this.data.visitsByDay);
+      if (!allDays.length) return;
+
+      const labels = allDays.map((d) => this.formatDateFR(d));
+      const showPerPage =
+        this.selectedPages.length === 0 &&
+        this.showTopPagesOnly &&
+        this.data.visitsByDayByPage;
+
+      let datasets;
+      let maxValue;
+
+      if (showPerPage) {
+        const topPages = this.data.visitsByPage
+          ? Object.keys(this.data.visitsByPage)
+          : [];
+        const pages = topPages.sort((a, b) => a.localeCompare(b));
+        datasets = pages.map((page, i) => {
+          const color = CHART_COLORS[i % CHART_COLORS.length];
+          const values = allDays.map(
+            (day) => this.data.visitsByDayByPage[page]?.[day] || 0
+          );
+          return {
+            label: page,
+            data: values,
+            borderColor: color,
+            backgroundColor: 'transparent',
+            fill: false,
+            tension: 0.3,
+            pointRadius: 2,
+            pointHoverRadius: 4,
+            borderWidth: 2,
+          };
+        });
+        maxValue = Math.max(...datasets.flatMap((ds) => ds.data));
+      } else {
+        const values = Object.values(this.data.visitsByDay);
+        datasets = [
+          {
+            label: 'Visites',
+            data: values,
+            borderColor: '#4271ae',
+            backgroundColor: 'rgba(66, 113, 174, 0.1)',
+            fill: true,
+            tension: 0.3,
+            pointRadius: 3,
+            pointHoverRadius: 5,
+          },
+        ];
+        maxValue = Math.max(...values);
+      }
+
+      this.chart = new Chart(canvas, {
+        type: 'line',
+        data: { labels, datasets },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            tooltip: {
+              mode: 'index',
+              intersect: false,
+            },
+            legend: {
+              display: showPerPage,
+              position: 'bottom',
+              labels: { boxWidth: 12, padding: 12 },
+            },
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              max: maxValue + 3,
+              ticks: { precision: 0 },
+            },
+          },
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+.k-analytics-filters {
+  display: flex;
+  gap: 1rem;
+}
+
+.k-analytics-filters label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.k-date-inputs-wrapper {
+  display: flex;
+  column-gap: 1rem;
+}
+
+.k-analytics-filters input[type='date'] {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--rounded);
+  font-size: 0.875rem;
+  background: var(--color-background);
+}
+
+.k-analytics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin: 3rem 0;
+}
+
+.k-analytics-user-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+
+.k-field-name-user,
+.k-field-name-page {
+  min-width: 15rem;
+}
+
+.k-field-name-top-pages {
+  margin-left: 1rem;
+}
+
+.k-analytics-page-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+
+.k-analytics-card {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+}
+
+.k-analytics-card h3 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-light);
+  margin: 0 0 0.5rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.k-analytics-metric {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1;
+}
+
+.k-analytics-chart-container {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+  margin-bottom: 1.5rem;
+}
+
+.k-analytics-chart-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.k-analytics-chart-header h3 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.k-analytics-chart-container canvas {
+  max-height: 300px;
+}
+
+.k-analytics-empty {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+  padding: 3rem;
+  text-align: center;
+}
+
+.k-analytics-empty p {
+  margin: 0;
+  color: var(--color-text-light);
+}
+
+.k-analytics-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.k-analytics-list li {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.375rem 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.875rem;
+}
+
+.k-analytics-list li:last-child {
+  border-bottom: none;
+}
+
+.k-analytics-list-label {
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 1rem;
+}
+
+.k-analytics-list-value {
+  font-weight: 600;
+  color: var(--color-text);
+  flex-shrink: 0;
+}
+</style>
--- a/public/site/plugins/analytics/src/index.js
+++ b/public/site/plugins/analytics/src/index.js
@ -0,0 +1,7 @@
+import AnalyticsDashboard from "./components/AnalyticsDashboard.vue";
+
+window.panel.plugin("adrienpayet/analytics", {
+    fields: {
+        "analytics-dashboard": AnalyticsDashboard
+    }
+});
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@ -46,6 +46,7 @@ return [
        'author' => kirby()->user(),
        'id'     => Str::uuid(),
        'type'   => 'comment',
+        'readby' => [], // Pour le système de notifications dérivées
      ];

      if (isset($data->position->pageIndex)) {
@ -62,11 +63,8 @@ return [

      echo json_encode(getFileData($newFile));

-      try {
-          $project->createNotification($commentData);
-      } catch (\Throwable $th) {
-          throw new Exception($th->getMessage() . '. line ' . $th->getLine() . ' in file ' . $th->getFile(), 1);
-      }
+      // Note: Les notifications sont maintenant dérivées des commentaires.
+      // Plus besoin d'appeler createNotification().

      exit;
  },
--- a/public/site/plugins/comments/routes/delete.php
+++ b/public/site/plugins/comments/routes/delete.php
@ -39,8 +39,8 @@ return [

      echo json_encode(getFileData($newFile));

-      $project = $page->parents()->findBy('template', 'project');
-      $project->deleteNotification($data->id);
+      // Note: Les notifications sont maintenant dérivées des commentaires.
+      // La suppression du commentaire supprime automatiquement la notification.

      exit;
  },
--- a/public/site/plugins/comments/routes/reply.php
+++ b/public/site/plugins/comments/routes/reply.php
@ -31,18 +31,19 @@ return [
              "author" => kirby()->user(),
              "id" => Str::uuid(),
              "type" => "comment-reply",
+              "readby" => [], // Pour le système de notifications dérivées
            ];
            $newReply = new Reply($replyData);
            $comment['replies'][] = $newReply->toArray();
        }
      }
-      
+
      $newFile = $file->update([
        'comments' => $comments
      ]);

-      $project = $page->parents()->findBy("template", "project");
-      $project->createNotification($replyData);
+      // Note: Les notifications sont maintenant dérivées des commentaires.
+      // Plus besoin d'appeler createNotification().

      return getFileData($newFile);
  }
--- a/public/site/plugins/helpers/index.php
+++ b/public/site/plugins/helpers/index.php
@ -94,7 +94,6 @@ function processDTLProposals($page) {
                    ],
                "path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
                "date" => $proposalFile->modified("d/MM/Y"),
-                "stepLabel" => "Proposition commerciale",
                ];
            }
        break;
@ -112,7 +111,6 @@ function processDTLProposals($page) {
                    ],
                    "path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation",
                    "date" => $proposalFile->modified("d/MM/Y"),
-                    "stepLabel" => "Idéation industrielle",
                ];
            }
        break;
@ -129,7 +127,6 @@ function processDTLProposals($page) {
                    ],
                    "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
                    "date" => $proposalPage->modified("d/MM/Y"),
-                    "stepLabel" => "Échantillon virtuel - piste dynamique",
                ];
            }
        break;
@ -147,7 +144,6 @@ function processDTLProposals($page) {
                    ],
                    "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
                    "date" => $proposalFile->modified("d/MM/Y"),
-                    "stepLabel" => "Échantillon virtuel - piste statique",
                ];
            }
        break;
--- a/public/site/plugins/notifications/index.php
+++ b/public/site/plugins/notifications/index.php
@ -1,27 +1,54 @@
 <?php

-load([
-  "ProjectPage" => "models/ProjectPage.php",
-], __DIR__);
+use adrienpayet\notifications\NotificationCollector;
+use adrienpayet\notifications\providers\CommentProvider;
+use adrienpayet\notifications\providers\ReplyProvider;
+use adrienpayet\notifications\providers\ProjectRequestProvider;
+use adrienpayet\notifications\providers\AppointmentRequestProvider;
+use adrienpayet\notifications\providers\ContentProvider;

+// Charger les classes
 F::loadClasses([
-  // Own classes
-  "adrienpayet\\notifications\\Notification" => __DIR__ . "/src/Notification.php",
-  "adrienpayet\\notifications\\NotificationsPage" => __DIR__ . "/src/NotificationsPage.php",
-  
-  // Shared classes
-  "adrienpayet\\D2P\\data\\Position" => __DIR__ . "/../classes/Position.php",
-  "adrienpayet\\D2P\data\Author" => __DIR__ . "/../classes/Author.php",
-  "adrienpayet\\D2P\\data\\location\\Location" => __DIR__ . "/../classes/location/Location.php",
-  "adrienpayet\\D2P\\data\\location\\PageDetails" => __DIR__ . "/../classes/location/PageDetails.php",
-  "adrienpayet\\D2P\\data\\location\\ProjectDetails" => __DIR__ . "/../classes/location/ProjectDetails.php",
-  "adrienpayet\\D2P\\data\\location\\FileDetails" => __DIR__ . "/../classes/location/FileDetails.php",
+    // Nouvelles classes - Système de providers
+    "adrienpayet\\notifications\\NotificationProvider" => __DIR__ . "/src/NotificationProvider.php",
+    "adrienpayet\\notifications\\NotificationCollector" => __DIR__ . "/src/NotificationCollector.php",
+    "adrienpayet\\notifications\\providers\\CommentProvider" => __DIR__ . "/src/providers/CommentProvider.php",
+    "adrienpayet\\notifications\\providers\\ReplyProvider" => __DIR__ . "/src/providers/ReplyProvider.php",
+    "adrienpayet\\notifications\\providers\\ProjectRequestProvider" => __DIR__ . "/src/providers/ProjectRequestProvider.php",
+    "adrienpayet\\notifications\\providers\\AppointmentRequestProvider" => __DIR__ . "/src/providers/AppointmentRequestProvider.php",
+    "adrienpayet\\notifications\\providers\\ContentProvider" => __DIR__ . "/src/providers/ContentProvider.php",
+
+    // Anciennes classes - Gardées pour rétro-compatibilité pendant migration
+    "adrienpayet\\notifications\\Notification" => __DIR__ . "/src/Notification.php",
+    "adrienpayet\\notifications\\NotificationsPage" => __DIR__ . "/src/NotificationsPage.php",
+
+    // Classes partagées
+    "adrienpayet\\D2P\\data\\Position" => __DIR__ . "/../classes/Position.php",
+    "adrienpayet\\D2P\\data\\Author" => __DIR__ . "/../classes/Author.php",
+    "adrienpayet\\D2P\\data\\location\\Location" => __DIR__ . "/../classes/location/Location.php",
+    "adrienpayet\\D2P\\data\\location\\PageDetails" => __DIR__ . "/../classes/location/PageDetails.php",
+    "adrienpayet\\D2P\\data\\location\\ProjectDetails" => __DIR__ . "/../classes/location/ProjectDetails.php",
+    "adrienpayet\\D2P\\data\\location\\FileDetails" => __DIR__ . "/../classes/location/FileDetails.php",
 ]);

+// Créer et configurer le collector
+$collector = new NotificationCollector();
+$collector->register(new CommentProvider());
+$collector->register(new ReplyProvider());
+$collector->register(new ProjectRequestProvider());
+$collector->register(new AppointmentRequestProvider());
+$collector->register(new ContentProvider());

 Kirby::plugin("adrienpayet/pdc-notifications", [
-  "routes" => [
-    require(__DIR__ . "/routes/readAll.php"),
-    require(__DIR__ . "/routes/read.php")
-  ],
+    "options" => [
+        "collector" => $collector
+    ],
+    "routes" => [
+        // Nouvelles routes
+        require(__DIR__ . "/routes/mark-as-read.php"),
+        require(__DIR__ . "/routes/mark-all-read.php"),
+        // Anciennes routes - Gardées pour rétro-compatibilité
+        require(__DIR__ . "/routes/readAll.php"),
+        require(__DIR__ . "/routes/read.php"),
+    ],
 ]);
--- a/public/site/plugins/notifications/routes/mark-all-read.php
+++ b/public/site/plugins/notifications/routes/mark-all-read.php
@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Route pour marquer toutes les notifications comme lues.
+ * Parcourt tous les projets accessibles à l'utilisateur.
+ */
+return [
+    'pattern' => '(:all)mark-all-notifications-read.json',
+    'method' => 'POST',
+    'action' => function () {
+        try {
+            $user = kirby()->user();
+            if (!$user) {
+                throw new Exception('User not authenticated');
+            }
+
+            $collector = kirby()->option('adrienpayet.pdc-notifications.collector');
+            if (!$collector) {
+                throw new Exception('NotificationCollector not initialized');
+            }
+
+            // Récupérer les projets selon le rôle
+            if ($user->role()->name() === 'admin') {
+                $projects = page('projects')->children()->toArray();
+            } else {
+                $projects = $user->currentProjects()->toArray();
+            }
+
+            $count = $collector->markAllAsRead($projects, $user);
+
+            return json_encode([
+                'status' => 'success',
+                'message' => "$count notifications marked as read"
+            ]);
+        } catch (\Throwable $th) {
+            return json_encode([
+                'status' => 'error',
+                'message' => $th->getMessage()
+            ]);
+        }
+    }
+];
--- a/public/site/plugins/notifications/routes/mark-as-read.php
+++ b/public/site/plugins/notifications/routes/mark-as-read.php
@ -0,0 +1,46 @@
+<?php
+
+/**
+ * Route pour marquer une notification comme lue.
+ * Délègue au bon provider selon le type de notification.
+ */
+return [
+    'pattern' => '(:all)mark-notification-read.json',
+    'method' => 'POST',
+    'action' => function () {
+        $json = file_get_contents('php://input');
+        $data = json_decode($json);
+
+        if (!$data || !isset($data->type) || !isset($data->id)) {
+            return json_encode([
+                'status' => 'error',
+                'message' => 'Missing required fields: type, id'
+            ]);
+        }
+
+        try {
+            $collector = kirby()->option('adrienpayet.pdc-notifications.collector');
+
+            if (!$collector) {
+                throw new Exception('NotificationCollector not initialized');
+            }
+
+            $success = $collector->markAsRead(
+                $data->type,
+                $data->id,
+                (array) $data,
+                kirby()->user()
+            );
+
+            return json_encode([
+                'status' => $success ? 'success' : 'error',
+                'message' => $success ? 'Notification marked as read' : 'Failed to mark notification as read'
+            ]);
+        } catch (\Throwable $th) {
+            return json_encode([
+                'status' => 'error',
+                'message' => $th->getMessage()
+            ]);
+        }
+    }
+];
--- a/public/site/plugins/notifications/src/NotificationCollector.php
+++ b/public/site/plugins/notifications/src/NotificationCollector.php
@ -0,0 +1,181 @@
+<?php
+
+namespace adrienpayet\notifications;
+
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+
+/**
+ * Collecteur de notifications qui agrège tous les providers.
+ *
+ * Permet de :
+ * - Enregistrer des providers de notifications
+ * - Collecter toutes les notifications de tous les providers
+ * - Déléguer le markAsRead au bon provider
+ */
+class NotificationCollector
+{
+    /** @var NotificationProvider[] */
+    private array $providers = [];
+
+    /**
+     * Enregistre un nouveau provider.
+     */
+    public function register(NotificationProvider $provider): void
+    {
+        $this->providers[$provider->getType()] = $provider;
+    }
+
+    /**
+     * Collecte toutes les notifications de tous les providers pour un projet.
+     *
+     * @param Page $project Le projet à scanner
+     * @param User $user L'utilisateur courant
+     * @return array Liste triée par date décroissante
+     */
+    public function collect(Page $project, User $user): array
+    {
+        $all = [];
+
+        foreach ($this->providers as $provider) {
+            try {
+                $notifications = $provider->collect($project, $user);
+                $all = array_merge($all, $notifications);
+            } catch (\Throwable $e) {
+                // Log l'erreur mais continue avec les autres providers
+                error_log("NotificationCollector: Error in {$provider->getType()}: " . $e->getMessage());
+            }
+        }
+
+        // Trier par date décroissante
+        usort($all, function ($a, $b) {
+            $dateA = strtotime($a['date'] ?? '0');
+            $dateB = strtotime($b['date'] ?? '0');
+            return $dateB - $dateA;
+        });
+
+        return $all;
+    }
+
+    /**
+     * Collecte uniquement les données minimales des notifications (version allégée pour listing).
+     * Retourne les champs nécessaires à l'affichage mais sans les détails lourds.
+     *
+     * @param Page $project Le projet à scanner
+     * @param User $user L'utilisateur courant
+     * @return array Liste triée par date décroissante
+     */
+    public function collectLight(Page $project, User $user): array
+    {
+        $all = [];
+
+        foreach ($this->providers as $provider) {
+            try {
+                $notifications = $provider->collect($project, $user);
+                // Garder les champs nécessaires au frontend
+                foreach ($notifications as $notification) {
+                    $light = [
+                        'id' => $notification['id'] ?? null,
+                        'type' => $notification['type'] ?? null,
+                        'isRead' => $notification['isRead'] ?? false,
+                        'date' => $notification['date'] ?? null,
+                        'text' => $notification['text'] ?? null,
+                        'author' => $notification['author'] ?? null,
+                        'location' => $notification['location'] ?? []
+                    ];
+
+                    // Garder les champs optionnels s'ils existent
+                    if (isset($notification['dialogUri'])) {
+                        $light['dialogUri'] = $notification['dialogUri'];
+                    }
+                    if (isset($notification['_briefUri'])) {
+                        $light['_briefUri'] = $notification['_briefUri'];
+                    }
+                    if (isset($notification['_file'])) {
+                        $light['_file'] = $notification['_file'];
+                    }
+                    if (isset($notification['_projectUri'])) {
+                        $light['_projectUri'] = $notification['_projectUri'];
+                    }
+
+                    $all[] = $light;
+                }
+            } catch (\Throwable $e) {
+                error_log("NotificationCollector: Error in {$provider->getType()}: " . $e->getMessage());
+            }
+        }
+
+        // Trier par date décroissante
+        usort($all, function ($a, $b) {
+            $dateA = strtotime($a['date'] ?? '0');
+            $dateB = strtotime($b['date'] ?? '0');
+            return $dateB - $dateA;
+        });
+
+        return $all;
+    }
+
+    /**
+     * Marque une notification comme lue en déléguant au bon provider.
+     *
+     * @param string $type Le type de notification
+     * @param string $id L'identifiant de la notification
+     * @param array $location Informations de localisation
+     * @param User $user L'utilisateur qui marque comme lu
+     * @return bool True si succès
+     */
+    public function markAsRead(string $type, string $id, array $location, User $user): bool
+    {
+        if (!isset($this->providers[$type])) {
+            error_log("NotificationCollector: Unknown notification type: $type");
+            return false;
+        }
+
+        try {
+            return $this->providers[$type]->markAsRead($id, $location, $user);
+        } catch (\Throwable $e) {
+            error_log("NotificationCollector: Error marking as read: " . $e->getMessage());
+            return false;
+        }
+    }
+
+    /**
+     * Marque toutes les notifications comme lues pour un utilisateur.
+     *
+     * @param Page[] $projects Liste des projets
+     * @param User $user L'utilisateur
+     * @return int Nombre de notifications marquées comme lues
+     */
+    public function markAllAsRead(array $projects, User $user): int
+    {
+        $count = 0;
+
+        foreach ($projects as $project) {
+            $notifications = $this->collect($project, $user);
+
+            foreach ($notifications as $notification) {
+                if (!($notification['isRead'] ?? false)) {
+                    $success = $this->markAsRead(
+                        $notification['type'],
+                        $notification['id'],
+                        $notification,
+                        $user
+                    );
+                    if ($success) {
+                        $count++;
+                    }
+                }
+            }
+        }
+
+        return $count;
+    }
+
+    /**
+     * Retourne la liste des types de notifications enregistrés.
+     */
+    public function getRegisteredTypes(): array
+    {
+        return array_keys($this->providers);
+    }
+}
--- a/public/site/plugins/notifications/src/NotificationProvider.php
+++ b/public/site/plugins/notifications/src/NotificationProvider.php
@ -0,0 +1,42 @@
+<?php
+
+namespace adrienpayet\notifications;
+
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+
+/**
+ * Interface pour les providers de notifications.
+ *
+ * Chaque type de notification (comment, project-request, etc.)
+ * a son propre provider qui sait :
+ * - Collecter les notifications depuis la source de données
+ * - Marquer une notification comme lue sur la source
+ */
+interface NotificationProvider
+{
+    /**
+     * Retourne le type de notification géré par ce provider.
+     * Ex: 'comment', 'comment-reply', 'project-request'
+     */
+    public function getType(): string;
+
+    /**
+     * Collecte toutes les notifications de ce type pour un projet et un utilisateur.
+     *
+     * @param Page $project Le projet à scanner
+     * @param User $user L'utilisateur courant (pour filtrer ses propres actions)
+     * @return array Liste des notifications au format standard
+     */
+    public function collect(Page $project, User $user): array;
+
+    /**
+     * Marque une notification comme lue.
+     *
+     * @param string $id L'identifiant de la notification
+     * @param array $location Informations de localisation (ex: _file, _projectUri)
+     * @param User $user L'utilisateur qui marque comme lu
+     * @return bool True si succès, false sinon
+     */
+    public function markAsRead(string $id, array $location, User $user): bool;
+}
--- a/public/site/plugins/notifications/src/providers/AppointmentRequestProvider.php
+++ b/public/site/plugins/notifications/src/providers/AppointmentRequestProvider.php
@ -0,0 +1,111 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "appointment-request".
+ * Dérivé depuis les champs du projet quand hasOptimizationRequest est true.
+ */
+class AppointmentRequestProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'appointment-request';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        // Pas de notification si pas de demande d'optimisation
+        if ($project->hasOptimizationRequest()->isFalse()) {
+            return [];
+        }
+
+        // Vérifier que les champs requis existent
+        if ($project->optimizationAuthor()->isEmpty()) {
+            return [];
+        }
+
+        $userUuid = (string) $user->uuid();
+        $authorUuid = $project->optimizationAuthor()->value();
+
+        // Ne pas notifier l'auteur de sa propre demande
+        if ($authorUuid === $userUuid) {
+            return [];
+        }
+
+        $readby = $project->optimizationReadby()->isNotEmpty()
+            ? Yaml::decode($project->optimizationReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        return [[
+            'id' => 'appointment-request-' . (string) $project->uuid(),
+            'type' => 'appointment-request',
+            'text' => $project->optimizationRequestDetails()->value() ?? '',
+            'author' => [
+                'uuid' => $authorUuid,
+                'name' => $project->optimizationAuthorName()->value() ?? '',
+                'email' => $project->optimizationAuthorEmail()->value() ?? '',
+                'role' => 'client',
+            ],
+            'date' => $project->optimizationDate()->value() ?? '',
+            'location' => [
+                'page' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                    'template' => 'project',
+                ],
+                'project' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                ]
+            ],
+            'readby' => $readby,
+            'isRead' => in_array($userUuid, $readby),
+            '_projectUri' => $project->uri(),
+        ]];
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $projectUri = $location['_projectUri'] ?? null;
+        if (!$projectUri) {
+            return false;
+        }
+
+        $project = page($projectUri);
+        if (!$project) {
+            return false;
+        }
+
+        $readby = $project->optimizationReadby()->isNotEmpty()
+            ? Yaml::decode($project->optimizationReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        $userUuid = (string) $user->uuid();
+
+        if (in_array($userUuid, $readby)) {
+            return true;
+        }
+
+        $readby[] = $userUuid;
+
+        $project->update([
+            'optimizationReadby' => array_unique($readby)
+        ]);
+
+        return true;
+    }
+}
--- a/public/site/plugins/notifications/src/providers/CommentProvider.php
+++ b/public/site/plugins/notifications/src/providers/CommentProvider.php
@ -0,0 +1,172 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "comment".
+ * Collecte les commentaires depuis les fichiers des étapes du projet.
+ */
+class CommentProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'comment';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        $notifications = [];
+        $userUuid = (string) $user->uuid();
+
+        // Parcourir toutes les étapes du projet
+        foreach ($project->children() as $step) {
+            // Parcourir tous les fichiers de chaque étape
+            foreach ($step->files() as $file) {
+                if ($file->comments()->isEmpty()) {
+                    continue;
+                }
+
+                $comments = Yaml::decode($file->comments()->value());
+                if (!is_array($comments)) {
+                    continue;
+                }
+
+                foreach ($comments as $comment) {
+                    // Ignorer les commentaires de type reply (gérés par ReplyProvider)
+                    if (($comment['type'] ?? 'comment') === 'comment-reply') {
+                        continue;
+                    }
+
+                    // Ne pas notifier l'auteur de son propre commentaire
+                    $authorUuid = $comment['author']['uuid'] ?? '';
+                    if ($authorUuid === $userUuid) {
+                        continue;
+                    }
+
+                    $readby = $comment['readby'] ?? [];
+
+                    $location = $comment['location'] ?? [];
+                    // Assurer que location.project existe toujours
+                    if (!isset($location['project'])) {
+                        $location['project'] = [
+                            'uri' => $project->uri(),
+                            'title' => (string) $project->title(),
+                        ];
+                    }
+
+                    $notifications[] = [
+                        'id' => $comment['id'],
+                        'type' => 'comment',
+                        'text' => $comment['text'] ?? '',
+                        'author' => $comment['author'] ?? [],
+                        'date' => $comment['date'] ?? '',
+                        'location' => $location,
+                        'position' => $comment['position'] ?? [],
+                        'readby' => $readby,
+                        'isRead' => in_array($userUuid, $readby),
+                        // Métadonnées pour markAsRead
+                        '_file' => (string) $file->uuid(),
+                        '_stepUri' => $step->uri(),
+                    ];
+                }
+            }
+
+            // Parcourir aussi les sous-pages (ex: tracks dans virtual-sample)
+            foreach ($step->children() as $subPage) {
+                foreach ($subPage->files() as $file) {
+                    if ($file->comments()->isEmpty()) {
+                        continue;
+                    }
+
+                    $comments = Yaml::decode($file->comments()->value());
+                    if (!is_array($comments)) {
+                        continue;
+                    }
+
+                    foreach ($comments as $comment) {
+                        if (($comment['type'] ?? 'comment') === 'comment-reply') {
+                            continue;
+                        }
+
+                        $authorUuid = $comment['author']['uuid'] ?? '';
+                        if ($authorUuid === $userUuid) {
+                            continue;
+                        }
+
+                        $readby = $comment['readby'] ?? [];
+
+                        $location = $comment['location'] ?? [];
+                        // Assurer que location.project existe toujours
+                        if (!isset($location['project'])) {
+                            $location['project'] = [
+                                'uri' => $project->uri(),
+                                'title' => (string) $project->title(),
+                            ];
+                        }
+
+                        $notifications[] = [
+                            'id' => $comment['id'],
+                            'type' => 'comment',
+                            'text' => $comment['text'] ?? '',
+                            'author' => $comment['author'] ?? [],
+                            'date' => $comment['date'] ?? '',
+                            'location' => $location,
+                            'position' => $comment['position'] ?? [],
+                            'readby' => $readby,
+                            'isRead' => in_array($userUuid, $readby),
+                            '_file' => (string) $file->uuid(),
+                            '_stepUri' => $subPage->uri(),
+                        ];
+                    }
+                }
+            }
+        }
+
+        return $notifications;
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $fileUuid = $location['_file'] ?? null;
+        if (!$fileUuid) {
+            return false;
+        }
+
+        // Trouver le fichier par UUID (peut être avec ou sans préfixe file://)
+        $fileUri = str_starts_with($fileUuid, 'file://') ? $fileUuid : 'file://' . $fileUuid;
+        $file = kirby()->file($fileUri);
+        if (!$file) {
+            return false;
+        }
+
+        $comments = Yaml::decode($file->comments()->value());
+        if (!is_array($comments)) {
+            return false;
+        }
+
+        $userUuid = (string) $user->uuid();
+        $updated = false;
+
+        foreach ($comments as &$comment) {
+            if ($comment['id'] === $id) {
+                $comment['readby'] = $comment['readby'] ?? [];
+                if (!in_array($userUuid, $comment['readby'])) {
+                    $comment['readby'][] = $userUuid;
+                    $updated = true;
+                }
+                break;
+            }
+        }
+
+        if ($updated) {
+            $file->update(['comments' => $comments]);
+        }
+
+        return $updated;
+    }
+}
--- a/public/site/plugins/notifications/src/providers/ContentProvider.php
+++ b/public/site/plugins/notifications/src/providers/ContentProvider.php
@ -0,0 +1,135 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "content".
+ * Dérivé depuis les briefs validés (isValidated = true).
+ */
+class ContentProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'content';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        $notifications = [];
+        $userUuid = (string) $user->uuid();
+
+        // Chercher les briefs validés (client-brief et extended-brief)
+        $briefTemplates = ['client-brief', 'extended-brief'];
+
+        foreach ($project->children() as $step) {
+            if (!in_array($step->intendedTemplate()->name(), $briefTemplates)) {
+                continue;
+            }
+
+            // Pas de notification si le brief n'est pas validé
+            if ($step->isValidated()->isFalse()) {
+                continue;
+            }
+
+            // Vérifier que les champs requis existent
+            if ($step->validatedBy()->isEmpty()) {
+                continue;
+            }
+
+            $authorUuid = $step->validatedBy()->value();
+
+            // Ne pas notifier l'auteur de sa propre validation
+            if ($authorUuid === $userUuid) {
+                continue;
+            }
+
+            $readby = $step->validationReadby()->isNotEmpty()
+                ? Yaml::decode($step->validationReadby()->value())
+                : [];
+
+            if (!is_array($readby)) {
+                $readby = [];
+            }
+
+            $stepLabel = $step->intendedTemplate()->name() === 'client-brief'
+                ? 'Brief client'
+                : 'Brief étendu';
+
+            $notification = [
+                'id' => 'content-' . (string) $step->uuid(),
+                'type' => 'content',
+                'text' => 'Nouveau ' . strtolower($stepLabel) . ' validé',
+                'author' => [
+                    'uuid' => $authorUuid,
+                    'name' => $step->validatedByName()->value() ?? '',
+                    'email' => $step->validatedByEmail()->value() ?? '',
+                    'role' => 'client',
+                ],
+                'date' => $step->validatedAt()->value() ?? '',
+                'location' => [
+                    'page' => [
+                        'uri' => $step->uri(),
+                        'title' => (string) $step->title(),
+                        'template' => $step->intendedTemplate()->name(),
+                    ],
+                    'project' => [
+                        'uri' => $project->uri(),
+                        'title' => (string) $project->title(),
+                    ]
+                ],
+                'readby' => $readby,
+                'isRead' => in_array($userUuid, $readby),
+                '_briefUri' => $step->uri(),
+            ];
+
+            // Ajouter le dialogUri si présent (validation depuis PDF)
+            if ($step->validationDialogUri()->isNotEmpty()) {
+                $notification['dialogUri'] = $step->validationDialogUri()->value();
+            }
+
+            $notifications[] = $notification;
+        }
+
+        return $notifications;
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $briefUri = $location['_briefUri'] ?? null;
+        if (!$briefUri) {
+            return false;
+        }
+
+        $brief = page($briefUri);
+        if (!$brief) {
+            return false;
+        }
+
+        $readby = $brief->validationReadby()->isNotEmpty()
+            ? Yaml::decode($brief->validationReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        $userUuid = (string) $user->uuid();
+
+        if (in_array($userUuid, $readby)) {
+            return true;
+        }
+
+        $readby[] = $userUuid;
+
+        $brief->update([
+            'validationReadby' => array_unique($readby)
+        ]);
+
+        return true;
+    }
+}
--- a/public/site/plugins/notifications/src/providers/ProjectRequestProvider.php
+++ b/public/site/plugins/notifications/src/providers/ProjectRequestProvider.php
@ -0,0 +1,111 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "project-request".
+ * Dérivé depuis les champs du projet quand isClientRequest est true.
+ */
+class ProjectRequestProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'project-request';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        // Pas de notification si ce n'est pas une demande client
+        if ($project->isClientRequest()->isFalse()) {
+            return [];
+        }
+
+        // Vérifier que les champs requis existent
+        if ($project->requestAuthor()->isEmpty()) {
+            return [];
+        }
+
+        $userUuid = (string) $user->uuid();
+        $authorUuid = $project->requestAuthor()->value();
+
+        // Ne pas notifier l'auteur de sa propre demande
+        if ($authorUuid === $userUuid) {
+            return [];
+        }
+
+        $readby = $project->requestReadby()->isNotEmpty()
+            ? Yaml::decode($project->requestReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        return [[
+            'id' => 'project-request-' . (string) $project->uuid(),
+            'type' => 'project-request',
+            'text' => $project->requestDetails()->value() ?? '',
+            'author' => [
+                'uuid' => $authorUuid,
+                'name' => $project->requestAuthorName()->value() ?? '',
+                'email' => $project->requestAuthorEmail()->value() ?? '',
+                'role' => 'client',
+            ],
+            'date' => $project->requestDate()->value() ?? '',
+            'location' => [
+                'page' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                    'template' => 'project',
+                ],
+                'project' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                ]
+            ],
+            'readby' => $readby,
+            'isRead' => in_array($userUuid, $readby),
+            '_projectUri' => $project->uri(),
+        ]];
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $projectUri = $location['_projectUri'] ?? null;
+        if (!$projectUri) {
+            return false;
+        }
+
+        $project = page($projectUri);
+        if (!$project) {
+            return false;
+        }
+
+        $readby = $project->requestReadby()->isNotEmpty()
+            ? Yaml::decode($project->requestReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        $userUuid = (string) $user->uuid();
+
+        if (in_array($userUuid, $readby)) {
+            return true; // Déjà lu
+        }
+
+        $readby[] = $userUuid;
+
+        $project->update([
+            'requestReadby' => array_unique($readby)
+        ]);
+
+        return true;
+    }
+}
--- a/public/site/plugins/notifications/src/providers/ReplyProvider.php
+++ b/public/site/plugins/notifications/src/providers/ReplyProvider.php
@ -0,0 +1,142 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "comment-reply".
+ * Collecte les réponses aux commentaires depuis les fichiers.
+ */
+class ReplyProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'comment-reply';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        $notifications = [];
+        $userUuid = (string) $user->uuid();
+
+        // Parcourir toutes les étapes du projet
+        foreach ($project->children() as $step) {
+            $this->collectFromPage($step, $project, $userUuid, $notifications);
+
+            // Parcourir aussi les sous-pages (ex: tracks)
+            foreach ($step->children() as $subPage) {
+                $this->collectFromPage($subPage, $project, $userUuid, $notifications);
+            }
+        }
+
+        return $notifications;
+    }
+
+    private function collectFromPage(Page $page, Page $project, string $userUuid, array &$notifications): void
+    {
+        foreach ($page->files() as $file) {
+            if ($file->comments()->isEmpty()) {
+                continue;
+            }
+
+            $comments = Yaml::decode($file->comments()->value());
+            if (!is_array($comments)) {
+                continue;
+            }
+
+            foreach ($comments as $comment) {
+                $replies = $comment['replies'] ?? [];
+
+                foreach ($replies as $reply) {
+                    // Ne pas notifier l'auteur de sa propre réponse
+                    $authorUuid = $reply['author']['uuid'] ?? '';
+                    if ($authorUuid === $userUuid) {
+                        continue;
+                    }
+
+                    $readby = $reply['readby'] ?? [];
+
+                    $location = $reply['location'] ?? $comment['location'] ?? [];
+                    // Assurer que location.project existe toujours
+                    if (!isset($location['project'])) {
+                        $location['project'] = [
+                            'uri' => $project->uri(),
+                            'title' => (string) $project->title(),
+                        ];
+                    }
+
+                    $notifications[] = [
+                        'id' => $reply['id'],
+                        'type' => 'comment-reply',
+                        'text' => $reply['text'] ?? '',
+                        'author' => $reply['author'] ?? [],
+                        'date' => $reply['date'] ?? '',
+                        'location' => $location,
+                        'position' => $reply['position'] ?? $comment['position'] ?? [],
+                        'readby' => $readby,
+                        'isRead' => in_array($userUuid, $readby),
+                        // Métadonnées pour markAsRead
+                        '_file' => (string) $file->uuid(),
+                        '_parentCommentId' => $comment['id'],
+                        '_stepUri' => $page->uri(),
+                    ];
+                }
+            }
+        }
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $fileUuid = $location['_file'] ?? null;
+        $parentCommentId = $location['_parentCommentId'] ?? null;
+
+        if (!$fileUuid) {
+            return false;
+        }
+
+        // Trouver le fichier par UUID (peut être avec ou sans préfixe file://)
+        $fileUri = str_starts_with($fileUuid, 'file://') ? $fileUuid : 'file://' . $fileUuid;
+        $file = kirby()->file($fileUri);
+        if (!$file) {
+            return false;
+        }
+
+        $comments = Yaml::decode($file->comments()->value());
+        if (!is_array($comments)) {
+            return false;
+        }
+
+        $userUuid = (string) $user->uuid();
+        $updated = false;
+
+        foreach ($comments as &$comment) {
+            // Si on a l'ID du parent, l'utiliser pour cibler
+            if ($parentCommentId && $comment['id'] !== $parentCommentId) {
+                continue;
+            }
+
+            $replies = &$comment['replies'] ?? [];
+
+            foreach ($replies as &$reply) {
+                if ($reply['id'] === $id) {
+                    $reply['readby'] = $reply['readby'] ?? [];
+                    if (!in_array($userUuid, $reply['readby'])) {
+                        $reply['readby'][] = $userUuid;
+                        $updated = true;
+                    }
+                    break 2;
+                }
+            }
+        }
+
+        if ($updated) {
+            $file->update(['comments' => $comments]);
+        }
+
+        return $updated;
+    }
+}
--- a/public/site/plugins/refresh-cache-button/index.js
+++ b/public/site/plugins/refresh-cache-button/index.js
@ -1 +1 @@
-(function(){"use strict";function f(n,e,a,t,r,c,s,u){var o=typeof n=="function"?n.options:n;return e&&(o.render=e,o.staticRenderFns=a,o._compiled=!0),{exports:n,options:o}}const l={__name:"RefreshCacheButton",props:{pageUri:String,pageStatus:String,lastCacheUpdate:String},setup(n){const{pageUri:e,pageStatus:a,lastCacheUpdate:t}=n,r=Vue.ref("Rafraîchir"),c=Vue.ref("refresh"),s=Vue.ref("aqua-icon"),u=Vue.computed(()=>(t==null?void 0:t.length)>0?"Dernière mise à jour : "+t:"Mettre à jour le cache front");async function o(){r.value="En cours…",c.value="loader",s.value="orange-icon";const m={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:e})},i=await(await fetch("/refresh-cache.json",m)).json();i.status==="error"?(console.error(i),r.value="Erreur",c.value="alert",s.value="red-icon"):(console.log(i),r.value="Terminé",c.value="check",s.value="green-icon",setTimeout(()=>{location.href=location.href},1500))}return{__sfc:!0,text:r,icon:c,theme:s,title:u,refreshCache:o}}};var h=function(){var e=this,a=e._self._c,t=e._self._setupProxy;return a("div",{attrs:{id:"refresh-cache-button"}},[e.pageStatus!=="draft"?a("k-button",{attrs:{theme:t.theme,variant:"dimmed",icon:t.icon,title:t.title},on:{click:function(r){return t.refreshCache()}}},[e._v(e._s(t.text))]):e._e()],1)},_=[],p=f(l,h,_);const d=p.exports;window.panel.plugin("adrienpayet/refresh-cache-button",{components:{"refresh-cache-button":d}})})();
+(function(){"use strict";function _(n,e,u,t,r,s,a,l){var c=typeof n=="function"?n.options:n;return e&&(c.render=e,c.staticRenderFns=u,c._compiled=!0),{exports:n,options:c}}const g={__name:"RefreshCacheButton",props:{pageUri:String,pageStatus:String,lastCacheUpdate:String},setup(n){const{pageUri:e,pageStatus:u,lastCacheUpdate:t}=n,r=Vue.ref("Rafraîchir"),s=Vue.ref("refresh"),a=Vue.ref("aqua-icon"),l=Vue.ref(!1),c=Vue.computed(()=>(t==null?void 0:t.length)>0?"Dernière mise à jour : "+t:"Mettre à jour le cache front");async function T(){l.value=!0,s.value="loader",a.value="orange-icon",e==="projects"?await d():await v()}async function d(){let f=0;const h=10;let i=!0,b=0;r.value="En cours 0%";try{for(;i;){const p={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:"projects",offset:f,limit:h})},o=await(await fetch("/refresh-cache.json",p)).json();if(o.status==="error")throw new Error(o.message);b=o.total,i=o.hasMore,f=o.nextOffset;const m=Math.round(o.processed/o.total*100);r.value=`En cours ${m}%`,console.log(`Batch terminé : ${o.processed}/${o.total} projets (${m}%)`)}r.value="Terminé",s.value="check",a.value="green-icon",setTimeout(()=>{location.href=location.href},2e3)}catch(p){console.error(p),r.value="Erreur",s.value="alert",a.value="red-icon",l.value=!1}}async function v(){r.value="En cours…";const f={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:e})};try{const i=await(await fetch("/refresh-cache.json",f)).json();if(i.status==="error")throw new Error(i.message);console.log(i),r.value="Terminé",s.value="check",a.value="green-icon",setTimeout(()=>{location.href=location.href},1500)}catch(h){console.error(h),r.value="Erreur",s.value="alert",a.value="red-icon",l.value=!1}}return{__sfc:!0,text:r,icon:s,theme:a,isProcessing:l,title:c,refreshCache:T,refreshAllProjects:d,refreshSingleProject:v}}};var j=function(){var e=this,u=e._self._c,t=e._self._setupProxy;return u("div",{attrs:{id:"refresh-cache-button"}},[e.pageStatus!=="draft"?u("k-button",{attrs:{theme:t.theme,variant:"dimmed",icon:t.icon,title:t.title,disabled:t.isProcessing},on:{click:function(r){return t.refreshCache()}}},[e._v(e._s(t.text))]):e._e()],1)},y=[],w=_(g,j,y);const S=w.exports;window.panel.plugin("adrienpayet/refresh-cache-button",{components:{"refresh-cache-button":S}})})();
--- a/public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue
+++ b/public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue
@ -7,6 +7,7 @@
      :icon="icon"
      :title="title"
      @click="refreshCache()"
+      :disabled="isProcessing"
      >{{ text }}</k-button
    >
  </div>
@ -24,6 +25,8 @@ const { pageUri, pageStatus, lastCacheUpdate } = defineProps({
 const text = ref("Rafraîchir");
 const icon = ref("refresh");
 const theme = ref("aqua-icon");
+const isProcessing = ref(false);
+
 const title = computed(() => {
  return lastCacheUpdate?.length > 0
    ? "Dernière mise à jour : " + lastCacheUpdate
@ -31,25 +34,91 @@ const title = computed(() => {
 });

 async function refreshCache() {
-  text.value = "En cours…";
+  isProcessing.value = true;
  icon.value = "loader";
  theme.value = "orange-icon";

+  // Pour les projets multiples (batch processing)
+  if (pageUri === 'projects') {
+    await refreshAllProjects();
+  } else {
+    await refreshSingleProject();
+  }
+}
+
+async function refreshAllProjects() {
+  let offset = 0;
+  const limit = 10; // 10 projets par batch
+  let hasMore = true;
+  let total = 0;
+
+  text.value = "En cours 0%";
+
+  try {
+    while (hasMore) {
+      const init = {
+        method: "POST",
+        "Content-Type": "application/json",
+        body: JSON.stringify({
+          pageUri: 'projects',
+          offset,
+          limit
+        }),
+      };
+
+      const res = await fetch("/refresh-cache.json", init);
+      const json = await res.json();
+
+      if (json.status === "error") {
+        throw new Error(json.message);
+      }
+
+      total = json.total;
+      hasMore = json.hasMore;
+      offset = json.nextOffset;
+
+      // Mise à jour de la progression dans le texte du bouton
+      const progress = Math.round((json.processed / json.total) * 100);
+      text.value = `En cours ${progress}%`;
+
+      console.log(`Batch terminé : ${json.processed}/${json.total} projets (${progress}%)`);
+    }
+
+    // Succès
+    text.value = "Terminé";
+    icon.value = "check";
+    theme.value = "green-icon";
+
+    setTimeout(() => {
+      location.href = location.href;
+    }, 2000);
+
+  } catch (error) {
+    console.error(error);
+    text.value = "Erreur";
+    icon.value = "alert";
+    theme.value = "red-icon";
+    isProcessing.value = false;
+  }
+}
+
+async function refreshSingleProject() {
+  text.value = "En cours…";
+
  const init = {
    method: "POST",
    "Content-Type": "application/json",
    body: JSON.stringify({ pageUri }),
  };

-  const res = await fetch("/refresh-cache.json", init);
-  const json = await res.json();
+  try {
+    const res = await fetch("/refresh-cache.json", init);
+    const json = await res.json();
+
+    if (json.status === "error") {
+      throw new Error(json.message);
+    }

-  if (json.status === "error") {
-    console.error(json);
-    text.value = "Erreur";
-    icon.value = "alert";
-    theme.value = "red-icon";
-  } else {
    console.log(json);
    text.value = "Terminé";
    icon.value = "check";
@ -58,6 +127,13 @@ async function refreshCache() {
    setTimeout(() => {
      location.href = location.href;
    }, 1500);
+
+  } catch (error) {
+    console.error(error);
+    text.value = "Erreur";
+    icon.value = "alert";
+    theme.value = "red-icon";
+    isProcessing.value = false;
  }
 }
 </script>
--- a/public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php
+++ b/public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php
@ -1,5 +1,5 @@
 <?php
-set_time_limit(0);
+set_time_limit(60);

 return [
  'pattern' => '/refresh-cache.json',
@ -10,17 +10,42 @@ return [

    if ($data->pageUri === 'projects') {
      $projects = page('projects')->children();
-      foreach ($projects as $project) {
-        $project->rebuildStepsCache();

-        $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT, 'Europe/Paris');
-        $project->update([
-          'lastCacheUpdate' => $formatter->format(time())
-        ]);
+      // Support du batch processing
+      $offset = isset($data->offset) ? intval($data->offset) : 0;
+      $limit = isset($data->limit) ? intval($data->limit) : 10; // 10 projets par batch par défaut
+      $total = $projects->count();
+
+      // Slice pour ne traiter qu'un batch
+      $batch = $projects->slice($offset, $limit);
+      $processed = 0;
+
+      foreach ($batch as $project) {
+        try {
+          $project->rebuildStepsCache();
+          $project->invalidateNotificationsCache();
+
+          $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT, 'Europe/Paris');
+          $project->update([
+            'lastCacheUpdate' => $formatter->format(time())
+          ]);
+          $processed++;
+        } catch (\Throwable $e) {
+          error_log("Error refreshing cache for project {$project->slug()}: " . $e->getMessage());
+        }
      }
+
+      $remaining = max(0, $total - ($offset + $processed));
+      $hasMore = $remaining > 0;
+
      return [
-        'satus' => 'success',
-        'message' => 'Données des pages projets rafraîchies avec succès.'
+        'status' => 'success',
+        'message' => "Batch terminé : $processed projets traités.",
+        'processed' => $offset + $processed,
+        'total' => $total,
+        'remaining' => $remaining,
+        'hasMore' => $hasMore,
+        'nextOffset' => $hasMore ? $offset + $limit : null
      ];
    } else {
      try {
@ -41,7 +66,7 @@ return [

      if (!$project) {
        return [
-          'satus' => 'error',
+          'status' => 'error',
          'message' => 'Impossible de rafraîchir les données de la page ' . $data->pageUri . '. Aucun projet correspondant.'
        ];
      }
@ -55,7 +80,7 @@ return [

      
      return [
-        'satus' => 'success',
+        'status' => 'success',
        'message' => 'Données de la page ' . $data->pageUri . ' rafraîchie avec succès.'
      ];
    }
--- a/public/site/plugins/user-projects/index.php
+++ b/public/site/plugins/user-projects/index.php
@ -3,18 +3,21 @@
 Kirby::plugin('adrienpayet/pdc-authorized-projects', [
  'userMethods' => [
    'currentProjects' => function() {
-      if ($this->role() == 'admin') {
-        return page('projects')->children()->listed();
-      } else {
-        return $this->projects()->toPages()->listed();
+      $listed = page('projects')->children()->listed();
+      if ($this->role() == 'admin' && $this->hasNoAssignedProjects()) {
+        return $listed;
      }
+      return $listed->filter(fn($project) => $project->users()->toUsers()->has($this));
    },
    'archivedProjects' => function() {
-      if ($this->role() == 'admin') {
-        return page('projects')->children()->unlisted();
-      } else {
-        return $this->projects()->toPages()->unlisted();
+      $unlisted = page('projects')->children()->unlisted();
+      if ($this->role() == 'admin' && $this->hasNoAssignedProjects()) {
+        return $unlisted;
      }
+      return $unlisted->filter(fn($project) => $project->users()->toUsers()->has($this));
+    },
+    'hasNoAssignedProjects' => function() {
+      return page('projects')->children()->filter(fn($p) => $p->users()->toUsers()->has($this))->isEmpty();
    },
  ]
 ]);
--- a/public/site/sessions/.gitkeep
+++ b/public/site/sessions/.gitkeep
--- a/public/site/templates/project.json.php
+++ b/public/site/templates/project.json.php
@ -1,5 +1,18 @@
 <?php

+// Récupérer le collector de notifications pour ce projet individuel
+$notificationCollector = $kirby->option('adrienpayet.pdc-notifications.collector');
+$notifications = [];
+
+if ($notificationCollector && $kirby->user()) {
+    try {
+        $notifications = $notificationCollector->collect($page, $kirby->user());
+    } catch (\Throwable $e) {
+        error_log("Error collecting notifications for project {$page->uri()}: " . $e->getMessage());
+        $notifications = [];
+    }
+}
+
 $project = [
    'title'    => $page->title()->value(),
    'url'      => $page->url(),
@ -11,7 +24,7 @@ $project = [
    'steps'                  => $page->getSteps(),
    'designToLight'          => $page->isDTLEnabled()->isTrue() ? processDTLProposals($page) : null,
    'hasOptimizationRequest' => $page->hasOptimizationRequest()->isTrue(),
-    'notifications'          => $page->notifications()->yaml(),
+    'notifications'          => $notifications,
 ];

 $pageData = array_merge($genericData, $project);
--- a/public/site/templates/projects.json.php
+++ b/public/site/templates/projects.json.php
@ -7,24 +7,32 @@ if (!$kirby->user()) {
  ]);
 }

-function getProjectData($project)
-{  
+function getProjectData($project, $user)
+{
+    // Utiliser getNotificationsLight() avec cache pour optimiser les performances
+    $notifications = [];
+    try {
+        $notifications = $project->getNotificationsLight($user);
+    } catch (\Throwable $e) {
+        error_log("Error getting notifications for project {$project->uri()}: " . $e->getMessage());
+        $notifications = [];
+    }

    $data = [
-    'title'                  => $project->title()->value(),
-    'url'                    => $project->url(),
-    'uri'                    => '/' . $project->uri(),
-    'modified'               => $project->modified('Y-MM-d'),
-    'currentStep'            => $project->currentStep()->value(),
-    'status'                 => $project->status(),
-    'logo'                   => $project->client()->toPage() ? $project->client()->toPage()->logo()->toFile()->url() : '',
-    'steps'                  => $project->getSteps(),
-    'notifications'          => Yaml::decode($project->notifications()->value),
-    'uuid'                   => (string) $project->uuid(),
-    'slug'                   => (string) $project->slug(),
-    'isDTLEnabled'           => $project->isDTLEnabled()->isTrue(),
-    'hasOptimizationRequest' => $project->hasOptimizationRequest()->isTrue(),
-  ];
+        'title'                  => $project->title()->value(),
+        'url'                    => $project->url(),
+        'uri'                    => '/' . $project->uri(),
+        'modified'               => $project->modified('Y-MM-d'),
+        'currentStep'            => $project->currentStep()->value(),
+        'status'                 => $project->status(),
+        'logo'                   => $project->client()->toPage() ? $project->client()->toPage()->logo()->toFile()->url() : '',
+        'steps'                  => $project->getSteps(),
+        'notifications'          => $notifications,
+        'uuid'                   => (string) $project->uuid(),
+        'slug'                   => (string) $project->slug(),
+        'isDTLEnabled'           => $project->isDTLEnabled()->isTrue(),
+        'hasOptimizationRequest' => $project->hasOptimizationRequest()->isTrue(),
+    ];

    if ($project->isDTLEnabled()) {
        $data['designToLight'] = processDTLProposals($project);
@ -33,8 +41,15 @@ function getProjectData($project)
    return $data;
 }

+$currentUser = $kirby->user();
+
 try {
-    $children = $kirby->user()->role() == 'admin' ? $page->childrenAndDrafts()->map(fn($project) => getProjectData($project))->values() : $kirby->user()->projects()->toPages()->map(fn($project) => getProjectData($project))->values();
+    if ($currentUser->role() == 'admin' && $currentUser->hasNoAssignedProjects()) {
+        $projectCollection = $page->childrenAndDrafts();
+    } else {
+        $projectCollection = $currentUser->currentProjects()->merge($currentUser->archivedProjects());
+    }
+    $children = $projectCollection->map(fn($project) => getProjectData($project, $currentUser))->values();
 } catch (\Throwable $th) {
    throw new Exception($th->getMessage() . ' line ' . $th->getLine() . ' in file ' . $th->getFile(), 1);
    $children = [];
--- a/src/assets/css/src/2.blocks.comments.css
+++ b/src/assets/css/src/2.blocks.comments.css
@ -20,7 +20,7 @@
 }

 .comments.empty::after {
-  content: "Partagez vos idées en ajoutant des commentaires";
+  content: attr(data-empty-message);
  height: 100%;
  display: grid;
  place-items: center;
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@ -29,7 +29,22 @@
  <div v-if="isExpanded" id="menu" class="flex | rounded-xl">
    <header class="w-full | flex">
      <!-- TODO: à dynamiser en récupérant le $site->title() -->
-      <p lang="en">Design to Pack</p>
+      <p :lang="currentLocale">Design to Pack</p>
+      <div class="lang-toggle">
+        <button
+          @click="switchLocale('fr')"
+          :class="{ active: currentLocale === 'fr' }"
+        >
+          FR
+        </button>
+        <span class="slash">/</span>
+        <button
+          @click="switchLocale('en')"
+          :class="{ active: currentLocale === 'en' }"
+        >
+          EN
+        </button>
+      </div>
    </header>
    <nav class="w-full | flow">
      <ul class="flex">
@ -51,25 +66,23 @@
            >{{ mainItem.title }}</router-link
          >
          <span
-            v-if="mainItem.title === 'Inspirations' && page?.newInspirations"
+            v-if="
+              mainItem.title === t('menu.inspirations') && page?.newInspirations
+            "
            class="pill pill--secondary"
-            >{{ 'Nouveautés' }}</span
+            >{{ t('menu.news') }}</span
          >
        </li>
      </ul>
      <details :class="{ skeleton: !currentProjects }" open>
-        <summary>Projets en cours</summary>
+        <summary>{{ t('menu.currentProjects') }}</summary>
        <ul v-if="currentProjects.length > 0">
          <li
            v-for="project in currentProjects"
            :class="{ active: isCurrent(project) }"
          >
            <router-link
-              :to="
-                isEmptyBrief(project)
-                  ? project.uri + '/client-brief'
-                  : project.uri
-              "
+              :to="getProjectPath(project)"
              :class="hasUnreadNotification(project) ? 'new' : undefined"
              :data-dtl="project.isDTLEnabled ? 'true' : undefined"
              @click="collapse()"
@ -79,13 +92,13 @@
        </ul>
      </details>
      <details v-if="archivedProjects.length">
-        <summary>Projets archivés</summary>
+        <summary>{{ t('menu.archivedProjects') }}</summary>
        <ul>
          <li
            v-for="project in archivedProjects"
            :class="{ active: isCurrent(project) }"
          >
-            <router-link :to="project.uri" @click="collapse()">{{
+            <router-link :to="getProjectPath(project)" @click="collapse()">{{
              project.title
            }}</router-link>
          </li>
@ -96,13 +109,19 @@
      <ul class="flex">
        <li data-icon="user">
          <a
-            :href="user.role === 'admin' ? '/panel/account' : '/account'"
+            :href="
+              user.role === 'admin'
+                ? '/panel/account'
+                : currentLocale === 'en'
+                ? '/en/account'
+                : '/account'
+            "
            @click="collapse()"
-            >Profil</a
+            >{{ t('menu.profile') }}</a
          >
        </li>
        <li data-icon="logout">
-          <a href="/logout" @click="collapse()">Déconnexion</a>
+          <a href="/logout" @click="collapse()">{{ t('menu.logout') }}</a>
        </li>
      </ul>
    </footer>
@ -113,17 +132,23 @@
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 import { useProjectsStore } from '../stores/projects';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '../stores/user';
 import { usePageStore } from '../stores/page';
 import { useProjectStore } from '../stores/project';
+import { useLocaleStore } from '../stores/locale';
+import { useI18n } from 'vue-i18n';

 const route = useRoute();
+const router = useRouter();
 const isExpanded = ref(true);
 const { user, notifications } = storeToRefs(useUserStore());
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
 const { isEmptyBrief } = useProjectStore();
 const { page } = storeToRefs(usePageStore());
+const localeStore = useLocaleStore();
+const { currentLocale } = storeToRefs(localeStore);
+const { t } = useI18n();

 const unreadNotificationsCount = computed(() => {
  if (!user.value) return 0;
@ -135,34 +160,37 @@ const unreadNotificationsCount = computed(() => {
  return count === 0 ? 0 : count;
 });

-const mainItems = [
-  {
-    title: 'Home',
-    path: '/',
-    icon: 'home',
-  },
-  {
-    title: 'Notifications',
-    path: '/notifications',
-    icon: 'megaphone',
-  },
-  {
-    title: 'Réunions',
-    path: '/reunions',
-    icon: 'calendar',
-    disabled: true,
-  },
-  {
-    title: 'Design to Light',
-    path: '/design-to-light',
-    icon: 'leaf',
-  },
-  {
-    title: 'Inspirations',
-    path: '/inspirations',
-    icon: 'inspiration',
-  },
-];
+const mainItems = computed(() => {
+  const prefix = currentLocale.value === 'en' ? '/en' : '';
+  return [
+    {
+      title: t('menu.home'),
+      path: prefix + '/',
+      icon: 'home',
+    },
+    {
+      title: t('menu.notifications'),
+      path: prefix + '/notifications',
+      icon: 'megaphone',
+    },
+    {
+      title: t('menu.meetings'),
+      path: prefix + '/reunions',
+      icon: 'calendar',
+      disabled: true,
+    },
+    {
+      title: t('menu.designToLight'),
+      path: prefix + '/design-to-light',
+      icon: 'leaf',
+    },
+    {
+      title: t('menu.inspirations'),
+      path: prefix + '/inspirations',
+      icon: 'inspiration',
+    },
+  ];
+});

 function toggleExpand() {
  isExpanded.value = !isExpanded.value;
@ -192,6 +220,33 @@ function collapse() {
    isExpanded.value = false;
  }
 }
+
+function switchLocale(newLocale) {
+  if (newLocale === currentLocale.value) return;
+
+  let newPath = route.path;
+
+  if (newLocale === 'en') {
+    if (!newPath.startsWith('/en')) {
+      newPath = '/en' + newPath;
+    }
+  } else {
+    if (newPath.startsWith('/en')) {
+      newPath = newPath.replace(/^\/en/, '') || '/';
+    }
+  }
+
+  localeStore.setLocale(newLocale);
+  router.push(newPath);
+}
+
+function getProjectPath(project) {
+  const prefix = currentLocale.value === 'en' ? '/en' : '';
+  const path = isEmptyBrief(project)
+    ? project.uri + '/client-brief'
+    : project.uri;
+  return prefix + path;
+}
 </script>

 <style>
@ -243,6 +298,25 @@ button[aria-controls='menu'][aria-expanded='false']
  overflow-y: auto;
 }

+/* Lang toggle */
+.lang-toggle {
+  font-family: var(--font-sans);
+  height: 1.65rem;
+}
+
+.lang-toggle button {
+  padding: 0;
+}
+
+.lang-toggle button.active {
+  background-color: transparent !important;
+  color: var(--color-primary);
+}
+
+.lang-toggle span.slash {
+  padding: 0 0.2rem;
+}
+
@media (max-width: 1023px) {
  button[aria-controls='menu'][aria-expanded='true'] {
    left: 0;
@ -285,6 +359,7 @@ button[aria-controls='menu'][aria-expanded='false']
  position: sticky;
  top: 0;
  z-index: 1;
+  column-gap: calc(var(--gutter) / 2);
 }
 #menu header::before {
  content: '';
--- a/src/components/ProjectRequestDialog.vue
+++ b/src/components/ProjectRequestDialog.vue
@ -5,12 +5,12 @@
    modal
    :draggable="false"
    :dismissableMask="true"
-    header="Demander la création d’un projet"
+    :header="t('dialogs.requestProject')"
    class="dialog"
    :closeOnEscape="true"
  >
    <template #header>
-      <h2 class="font-serif text-lg">Demander la création d’un projet</h2>
+      <h2 class="font-serif text-lg">{{ t('dialogs.requestProject') }}</h2>
    </template>

    <form
@ -18,24 +18,28 @@
      class="w-full h-full p-16 flex flex-col"
      style="--row-gap: 1rem"
    >
-      <label for="project-title" class="sr-only">Nom du projet</label>
+      <label for="project-title" class="sr-only">{{
+        t('forms.projectName')
+      }}</label>
      <input
        type="text"
        v-model="title"
        id="project-title"
-        placeholder="Nom du projet"
+        :placeholder="t('forms.projectName')"
        class="w-full rounded-md border border-grey-200 px-16 py-12"
        required
      />

-      <label for="project-details" class="sr-only">Détails du projet</label>
+      <label for="project-details" class="sr-only">{{
+        t('forms.projectDetails')
+      }}</label>
      <textarea
        id="project-details"
        name="details"
        v-model="details"
        cols="30"
        rows="10"
-        placeholder="Détails du projet…"
+        :placeholder="t('forms.projectDetailsPlaceholder')"
        class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
        required
      ></textarea>
@ -52,26 +56,24 @@
          class="flex font-medium mt-4"
          style="--column-gap: var(--space-4)"
        >
-          Créer avec
-          <span class="flex justify-center text-sm" data-icon="leaf"
-            >Design to Light</span
-          >
+          {{ t('dialogs.createWithDTL') }}
+          <span class="flex justify-center text-sm" data-icon="leaf">{{
+            t('dtl.title')
+          }}</span>
        </label>
        <p class="text-sm mt-8 mb-4">
-          Découvrez la note environnementale de votre projet et allégez l’impact
-          de votre projet grâce à nos expertises d’optimisation du poids de
-          flacon.
+          {{ t('dialogs.dtlDescription') }}
        </p>
-        <router-link to="/design-to-light" class="text-sm font-medium"
-          >En savoir plus</router-link
-        >
+        <router-link to="/design-to-light" class="text-sm font-medium">{{
+          t('dialogs.learnMore')
+        }}</router-link>
      </div>

      <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
        <button class="btn btn--black-10" @click="emits('close')">
-          Annuler
+          {{ t('buttons.cancel') }}
        </button>
-        <button class="btn" type="submit">Soumettre</button>
+        <button class="btn" type="submit">{{ t('buttons.submit') }}</button>
      </footer>
    </form>
  </Dialog>
@ -81,6 +83,9 @@
 import Dialog from 'primevue/dialog';
 import { ref, watch } from 'vue';
 import { useApiStore } from '../stores/api';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const title = ref('');
 const details = ref('');
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@ -1,6 +1,6 @@
 <template>
  <header class="flex">
-    <h2 id="tabslist" class="sr-only">Projets</h2>
+    <h2 id="tabslist" class="sr-only">{{ t('brief.projects') }}</h2>
    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
  </header>
  <section
@ -11,6 +11,7 @@
    :aria-label="tabs[0].label"
    class="flow"
    :class="{ skeleton: isProjectsLoading }"
+    :data-empty-text="t('projects.none')"
  >
    <Project
      v-for="project in currentProjects"
@ -25,6 +26,7 @@
    tabindex="0"
    :aria-label="tabs[1].label"
    class="flow"
+    :data-empty-text="t('projects.none')"
  >
    <Project
      v-for="project in archivedProjects"
@ -39,7 +41,9 @@ import Project from './project/Project.vue';
 import { useProjectsStore } from '../stores/projects';
 import { ref, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';

+const { t } = useI18n();
 const { projects, currentProjects, archivedProjects, isProjectsLoading } =
  storeToRefs(useProjectsStore());

@ -47,13 +51,13 @@ const currentTab = ref('currentProjects');
 const tabs = computed(() => {
  return [
    {
-      label: 'Projets en cours',
+      label: t('projects.current'),
      id: 'currentProjects',
      count: currentProjects.value.length,
      isActive: currentTab.value === 'currentProjects',
    },
    {
-      label: 'Projets archivés',
+      label: t('projects.archived'),
      id: 'archivedProjects',
      count: archivedProjects.value.length,
      isActive: currentTab.value === 'archivedProjects',
@ -72,7 +76,7 @@ section {
  min-height: calc(100vh - 8.5rem);
 }
 section:not(.skeleton):empty::after {
-  content: 'Aucun projet pour le moment';
+  content: attr(data-empty-text);
  position: absolute;
  inset: 0;
  display: grid;
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@ -12,7 +12,7 @@
      v-model="currentValue"
      :options="items"
      optionLabel="title"
-      :placeholder="'Sélectionnez une déclinaison'"
+      :placeholder="t('forms.selectVariation')"
      :maxSelectedLabels="3"
      class="font-serif"
      :class="{ active: currentValue }"
@ -45,7 +45,7 @@
        <p v-if="currentValue">
          {{ currentValue.title }}
        </p>
-        <p v-else>Sélectionnez une déclinaison</p>
+        <p v-else>{{ t('forms.selectVariation') }}</p>
      </template>

      <template #option="slotProps">
@ -65,6 +65,9 @@
 import { onBeforeMount, ref, watch, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useDialogStore } from '../stores/dialog';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 // Props
 const { items, label, isCompareModeEnabled, index } = defineProps({
@ -76,112 +79,149 @@ const { items, label, isCompareModeEnabled, index } = defineProps({

 // Local state
 const currentValue = ref(null);
-const syncing = ref(false); // empêche les réactions pendant les mises à jour programmatiques
+const syncing = ref(false);

-// Store
 const { activeTracks } = storeToRefs(useDialogStore());

-// Utils
-function isSame(a, b) {
-  if (!a || !b) return false;
-  if (a.slug && b.slug) return a.slug === b.slug;
-  return a.title === b.title;
+function normalizeSlug(slug) {
+  return slug.replace(/_/g, '-');
 }

-function toVariation(v) {
-  if (!v) return null;
-  return Array.isArray(v) ? v[v.length - 1] || null : v;
+function areVariationsEqual(variationA, variationB) {
+  if (!variationA || !variationB) return false;
+
+  if (variationA.slug && variationB.slug) {
+    return normalizeSlug(variationA.slug) === normalizeSlug(variationB.slug);
+  }
+
+  return variationA.title === variationB.title;
 }

-// Initialisation : remplir le 1er select localement ET initialiser le store
-onBeforeMount(() => {
+function extractVariation(value) {
+  if (!value) return null;
+  return Array.isArray(value) ? value[value.length - 1] || null : value;
+}
+
+function convertValueForCompareMode(value, shouldBeArray) {
+  if (shouldBeArray) {
+    return value && !Array.isArray(value) ? [value] : value;
+  } else {
+    return Array.isArray(value) ? value[0] || null : value;
+  }
+}
+
+function findMatchingVariationsInStore(storeVariations) {
+  return storeVariations.filter((storeVar) =>
+    items.some((item) => areVariationsEqual(item, storeVar))
+  );
+}
+
+function syncCurrentValueFromStore(storeVariations) {
  syncing.value = true;

-  if (index === 0) {
-    currentValue.value = items[0] || null;
-    // si le store est vide, initialiser avec la variation du premier sélecteur
-    if (!activeTracks.value || activeTracks.value.length === 0) {
-      const v = toVariation(items[0]);
-      if (v) activeTracks.value = [v];
-    }
+  const matchedVariations = findMatchingVariationsInStore(storeVariations);
+
+  if (isCompareModeEnabled) {
+    currentValue.value = matchedVariations.length ? [...matchedVariations] : [];
  } else {
-    // les autres ne forcent pas le store ; leur currentValue restera à null
-    currentValue.value = null;
+    currentValue.value = matchedVariations[0] || null;
  }

  nextTick(() => (syncing.value = false));
-});
+}
+
+function detectVariationChanges(newValues, oldValues) {
+  const newList = Array.isArray(newValues)
+    ? newValues
+    : newValues
+    ? [newValues]
+    : [];
+  const oldList = Array.isArray(oldValues)
+    ? oldValues
+    : oldValues
+    ? [oldValues]
+    : [];
+
+  const addedVariation = newList.find(
+    (n) => !oldList.some((o) => areVariationsEqual(o, n))
+  );
+  const removedVariation = oldList.find(
+    (o) => !newList.some((n) => areVariationsEqual(n, o))
+  );
+
+  return { addedVariation, removedVariation };
+}
+
+function handleVariationChange(newValue, oldValue) {
+  if (syncing.value) return;
+
+  const { addedVariation, removedVariation } = detectVariationChanges(
+    newValue,
+    oldValue
+  );
+
+  if (
+    addedVariation &&
+    items.some((item) => areVariationsEqual(item, addedVariation))
+  ) {
+    updateActiveTracks(addedVariation, 'add');
+  } else if (
+    removedVariation &&
+    items.some((item) => areVariationsEqual(item, removedVariation))
+  ) {
+    updateActiveTracks(removedVariation, 'remove');
+  }
+}

-// Quand on bascule compare mode (objet <-> tableau)
 watch(
  () => isCompareModeEnabled,
-  (flag) => {
+  (shouldBeArray) => {
    syncing.value = true;
-    if (flag) {
-      if (currentValue.value && !Array.isArray(currentValue.value)) {
-        currentValue.value = [currentValue.value];
-      }
-    } else {
-      if (Array.isArray(currentValue.value)) {
-        currentValue.value = currentValue.value[0] || null;
-      }
-    }
+    currentValue.value = convertValueForCompareMode(
+      currentValue.value,
+      shouldBeArray
+    );
    nextTick(() => (syncing.value = false));
  }
 );

-// Détection ajout / suppression dans le MultiSelect (côté composant)
-// On n'agit que si l'ajout/suppression concerne une variation appartenant à `items`
-watch(
-  currentValue,
-  (newVal, oldVal) => {
-    if (syncing.value) return;
+watch(currentValue, handleVariationChange, { deep: true });

-    const newItems = Array.isArray(newVal) ? newVal : newVal ? [newVal] : [];
-    const oldItems = Array.isArray(oldVal) ? oldVal : oldVal ? [oldVal] : [];
-
-    const added = newItems.find((n) => !oldItems.some((o) => isSame(o, n)));
-    const removed = oldItems.find((o) => !newItems.some((n) => isSame(n, o)));
-
-    if (added && items.some((it) => isSame(it, added))) {
-      selectTrack(added, 'add');
-    } else if (removed && items.some((it) => isSame(it, removed))) {
-      selectTrack(removed, 'remove');
-    }
-  },
-  { deep: true }
-);
-
-// Quand activeTracks change elsewhere -> synchroniser l'affichage local
-// Mais n'adopter que les variations qui appartiennent à ce Selector (`items`)
 watch(
  activeTracks,
-  (newVal) => {
-    syncing.value = true;
-
-    const storeList = Array.isArray(newVal) ? newVal : [];
-    // ne garder que les variations du store qui sont dans `items`
-    const matched = storeList.filter((av) =>
-      items.some((it) => isSame(it, av))
-    );
-
-    if (isCompareModeEnabled) {
-      currentValue.value = matched.length ? [...matched] : [];
-    } else {
-      currentValue.value = matched[0] || null;
-    }
-
-    nextTick(() => (syncing.value = false));
+  (storeVariations) => {
+    const variationsList = Array.isArray(storeVariations)
+      ? storeVariations
+      : [];
+    syncCurrentValueFromStore(variationsList);
  },
-  { deep: true }
+  { deep: true, immediate: true }
 );

-// Logique centrale de sélection (ajout / suppression)
-// Règles :
-// - mode normal -> activeTracks = [variation]
-// - mode comparaison -> conserver activeTracks[0] si possible; second élément ajouté/remplacé; suppression gère le cas de la suppression de la première
-function selectTrack(track, action = 'add') {
-  const variation = toVariation(track);
+function removeVariationFromActiveTracks(variation) {
+  activeTracks.value = activeTracks.value.filter(
+    (track) => !areVariationsEqual(track, variation)
+  );
+}
+
+function addVariationToActiveTracks(variation) {
+  const isAlreadyPresent = activeTracks.value.some((track) =>
+    areVariationsEqual(track, variation)
+  );
+
+  if (isAlreadyPresent) return;
+
+  if (activeTracks.value.length === 0) {
+    activeTracks.value = [variation];
+  } else if (activeTracks.value.length === 1) {
+    activeTracks.value = [activeTracks.value[0], variation];
+  } else {
+    activeTracks.value = [activeTracks.value[0], variation];
+  }
+}
+
+function updateActiveTracks(track, action = 'add') {
+  const variation = extractVariation(track);
  if (!variation) return;

  if (!isCompareModeEnabled) {
@ -190,34 +230,12 @@ function selectTrack(track, action = 'add') {
  }

  if (action === 'remove') {
-    const wasFirst =
-      activeTracks.value.length && isSame(activeTracks.value[0], variation);
-    activeTracks.value = activeTracks.value.filter(
-      (t) => !isSame(t, variation)
-    );
-
-    // si on a retiré la première et qu'il reste une piste, elle devient naturellement index 0
-    // pas d'action supplémentaire nécessaire ici (déjà assuré par le filter)
-    return;
-  }
-
-  // action === 'add'
-  if (activeTracks.value.some((t) => isSame(t, variation))) {
-    // déjà présent -> ignore
-    return;
-  }
-
-  if (activeTracks.value.length === 0) {
-    activeTracks.value = [variation];
-  } else if (activeTracks.value.length === 1) {
-    activeTracks.value = [activeTracks.value[0], variation];
+    removeVariationFromActiveTracks(variation);
  } else {
-    // remplacer le 2e
-    activeTracks.value = [activeTracks.value[0], variation];
+    addVariationToActiveTracks(variation);
  }
 }

-// Helpers pour affichage (inchangés)
 function getFrontViewUrl(item) {
  if (!item) return '';
  if (Array.isArray(item)) {
@ -231,8 +249,8 @@ function getFrontViewUrl(item) {
 }

 function setImage() {
-  return getFrontViewUrl(currentValue.value) 
-    ? '--image: url(\'' + getFrontViewUrl(currentValue.value) + '\')' 
+  return getFrontViewUrl(currentValue.value)
+    ? "--image: url('" + getFrontViewUrl(currentValue.value) + "')"
    : undefined;
 }
 </script>
@ -250,7 +268,8 @@ function setImage() {
  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
 }
 .selector-dropdown.has-image,
-.selector-dropdown.has-image :is(#selector-select, #selector-multiselect, [role='combobox']) {
+.selector-dropdown.has-image
+  :is(#selector-select, #selector-multiselect, [role='combobox']) {
  padding-left: var(--space-64);
 }
 .selector-dropdown.has-image:before {
@ -290,7 +309,9 @@ function setImage() {
  cursor: pointer;
 }
 [role='combobox'] p,
-.selector-dropdown [data-pc-section="labelcontainer"] > [data-pc-section='label'] {
+.selector-dropdown
+  [data-pc-section='labelcontainer']
+  > [data-pc-section='label'] {
  max-height: 1lh;
  overflow: hidden;
  text-overflow: ellipsis;
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@ -39,9 +39,7 @@

    <footer v-if="!comment.isEditMode" class="comment__replies">
      <p v-if="comment.replies?.length > 0">
-        {{ comment.replies.length }} réponse{{
-          comment.replies.length > 1 ? 's' : ''
-        }}
+        {{ comment.replies.length }} {{ comment.replies.length > 1 ? t('comments.replies') : t('comments.reply') }}
      </p>
      <div
        v-if="userStore.canEditComment(comment)"
@ -52,14 +50,14 @@
          data-icon="edit"
          @click="editComment($event)"
        >
-          <span class="sr-only">Éditer</span>
+          <span class="sr-only">{{ t('comments.edit') }}</span>
        </button>
        <button
          class="btn btn--transparent btn--icon btn--sm"
          data-icon="delete"
          @click="deleteComment($event)"
        >
-          <span class="sr-only">Supprimer</span>
+          <span class="sr-only">{{ t('buttons.delete') }}</span>
        </button>
      </div>
    </footer>
@ -68,11 +66,11 @@
      <input
        type="submit"
        class="btn btn--tranparent"
-        value="Sauvegarder"
+        :value="t('buttons.save')"
        @click="saveEditedComment($event)"
      />
      <button class="btn btn--white-10" @click="cancelEditComment($event)">
-        Annuler
+        {{ t('buttons.cancel') }}
      </button>
    </footer>
  </article>
@ -88,9 +86,11 @@ import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../stores/page';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';

 dayjs.locale('fr');

+const { t } = useI18n();
 const { comment, commentIndex } = defineProps({
  comment: Object,
  commentIndex: Number,
@ -125,11 +125,11 @@ function formatDate() {
  const dateNumber = parseInt(dayjs(comment.date).format('YYMMD'));

  if (dateNumber === todayNumber) {
-    return "Aujourd'hui";
+    return t('dates.today');
  }

  if (dateNumber === todayNumber - 1) {
-    return 'hier';
+    return t('dates.yesterday');
  }

  return dayjs(comment.date).format('D MMM YY');
@ -153,7 +153,7 @@ async function read() {
      page.value.uri
    );
  } catch (error) {
-    console.log('Erreur lors de la lecture de la notification : ', error);
+    console.log(t('errors.readNotificationFailed'), error);
  }
 }

--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@ -1,9 +1,10 @@
 <template>
  <aside id="comments-container" aria-labelledby="comments-label">
-    <h2 id="comments-label" class="sr-only">Commentaires</h2>
+    <h2 id="comments-label" class="sr-only">{{ t('comments.title') }}</h2>
    <div
      class="comments | flow"
      :class="{ empty: !comments || comments.length === 0 }"
+      :data-empty-message="t('comments.emptyMessage')"
    >
      <template v-if="comments">
        <template v-if="!openedComment">
@ -26,7 +27,7 @@
              isAddOpen = false;
            "
          >
-            <span>Retour à la liste</span>
+            <span>{{ t('buttons.backToList') }}</span>
          </button>
          <Comment
            :comment="openedComment"
@ -53,7 +54,7 @@
      class="btn btn--white-20 | w-full"
      @click="toggleCommentPositionMode(true)"
    >
-      Ajouter un commentaire
+      {{ t('buttons.addComment') }}
    </button>
    <button
      v-else-if="openedComment && !isAddOpen"
@ -61,7 +62,7 @@
      class="btn btn--white-20 | justify-start w-full | text-white-50"
      @click="isAddOpen = true"
    >
-      Répondre…
+      {{ t('buttons.reply') }}
    </button>
    <!-- TODO: afficher #new-comment une fois le bouton Ajouter un commentaire cliqué -->
    <div
@ -70,11 +71,10 @@
      class="bg-primary | text-sm text-white | rounded-lg | p-12"
    >
      <p class="flex justify-start | mb-12" data-icon="comment">
-        <strong>Nouveau commentaire</strong>
+        <strong>{{ t('comments.new') }}</strong>
      </p>
      <p>
-        Dans la zone du contenu, cliquez où vous souhaitez positionner le
-        commentaire
+        {{ t('comments.newInstruction') }}
      </p>
    </div>
    <form
@ -84,13 +84,13 @@
      class="flow | p-12 | rounded-xl"
      @submit="handleSubmit"
    >
-      <label class="sr-only" for="comment">Votre commentaire</label>
+      <label class="sr-only" for="comment">{{ t('comments.your') }}</label>
      <textarea
        v-model="draftComment.text"
        :disabled="isSubmitting ? true : undefined"
        name="comment"
        id="comment"
-        placeholder="Ajouter un commentaire…"
+        :placeholder="t('forms.commentPlaceholder')"
        rows="5"
        class="text-sm | rounded-lg bg-black p-12"
      ></textarea>
@ -99,11 +99,11 @@
          type="submit"
          class="btn"
          :class="{ submitting: isSubmitting }"
-          :value="isSubmitting ? 'En cours' : undefined"
+          :value="isSubmitting ? t('comments.inProgress') : undefined"
          :disabled="isSubmitting ? true : undefined"
        />
        <button class="btn btn--white-10" @click="isAddOpen = false">
-          Annuler
+          {{ t('buttons.cancel') }}
        </button>
      </footer>
    </form>
@ -122,9 +122,11 @@ import { useDialogStore } from '../../stores/dialog';
 import Comment from './Comment.vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';

 dayjs.locale('fr');

+const { t } = useI18n();
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
--- a/src/components/design-to-light/DTLButton.vue
+++ b/src/components/design-to-light/DTLButton.vue
@ -1,13 +1,16 @@
 <template>
-  <button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + (hasAlternatives ? 'New' : grade)" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
-    <span lang="en" class="sr-only">Design to Light</span>
-    <span v-if="hasAlternatives" lang="en" class="new">New</span>
+  <button id="dtl-btn" class="bg-black rounded-md p-4" :title="t('dtl.grade', { grade: hasAlternatives ? t('menu.news') : grade })" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
+    <span lang="en" class="sr-only">{{ t('dtl.title') }}</span>
+    <span v-if="hasAlternatives" lang="en" class="new">{{ t('menu.news') }}</span>
  </button>
 </template>
 <script setup>
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
 import { computed } from "vue";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { page } = storeToRefs(usePageStore());

--- a/src/components/design-to-light/DTLPanel.vue
+++ b/src/components/design-to-light/DTLPanel.vue
@ -17,8 +17,8 @@
          proposals.length === 1 && isDialogOpen
            ? activeProposal.title
              ? activeProposal.title
-              : 'Design to light'
-            : 'Design to light'
+              : t('dtl.title')
+            : t('dtl.title')
        }}
      </h2>
      <button
@ -27,7 +27,7 @@
        class="btn btn--icon btn--transparent | ml-auto"
        data-icon="close"
      >
-        <span class="sr-only">Fermer</span>
+        <span class="sr-only">{{ t('buttons.close') }}</span>
      </button>
    </header>
    <nav v-if="!isDialogOpen" class="tabs" role="tablist" tabindex="-1">
@ -42,8 +42,8 @@
          proposal.title
            ? proposal.title
            : index === 0
-            ? 'Proposition initiale'
-            : 'Alternative ' + index
+            ? t('dtl.initialProposal')
+            : t('dtl.alternative', { index })
        }}
      </button>
    </nav>
@ -67,12 +67,12 @@
          />
        </router-link>
        <p>
-          Données basées sur la proposition <br />du {{ activeProposal.date }}
-          <br />{{ activeProposal.stepLabel }}
+          {{ t('dtl.proposalBasedOn') }} <br />du {{ activeProposal.date }}
+          <br />{{ stepLabel }}
        </p>
      </div>
      <div id="note-globale" class="px-32 py-16 border-b flow">
-        <h3>Note globale</h3>
+        <h3>{{ t('dtl.globalScore') }}</h3>
        <div class="flex" style="--column-gap: 1rem">
          <p :data-grade="activeProposal.grades.global.letter">
            <strong class="sr-only">{{
@ -100,15 +100,15 @@
        </div>
      </div>
      <div id="positionnement" class="px-32 py-16 border-b flow">
-        <h3>Positionnement</h3>
+        <h3>{{ t('dtl.positioning') }}</h3>
        <dl>
-          <dt id="design">Design</dt>
+          <dt id="design">{{ t('dtl.design') }}</dt>
          <dd>
            <span class="sr-only">{{
              activeProposal.grades.position.complexity
            }}</span>
          </dd>
-          <dt id="poids">Poids</dt>
+          <dt id="poids">{{ t('dtl.weight') }}</dt>
          <dd>
            <span class="sr-only">{{
              activeProposal.grades.position.weight
@ -132,7 +132,7 @@
        </button>
      </div>
      <div id="indicateur" class="px-32 py-16 border-b flow">
-        <h3>Indicateur des composants impliqués</h3>
+        <h3>{{ t('dtl.indicators') }}</h3>
        <div class="grid">
          <template
            v-for="indicator in activeProposal.grades.indicators"
@ -170,8 +170,8 @@
        >
          {{
            page.hasOptimizationRequest
-              ? "Demande d'expertise en cours de traitement…"
-              : 'Demander une expertise d’optimisation'
+              ? t('dtl.requestPending')
+              : t('dtl.requestOptimization')
          }}
        </button>
      </footer>
@ -190,6 +190,7 @@ import { storeToRefs } from 'pinia';
 import { ref, onBeforeUnmount, computed } from 'vue';
 import { useDialogStore } from '../../stores/dialog';
 import { usePageStore } from '../../stores/page';
+import { useI18n } from 'vue-i18n';

 const { proposals } = defineProps({
  proposals: Array,
@ -197,6 +198,7 @@ const { proposals } = defineProps({

 const { page } = storeToRefs(usePageStore());
 const { openedFile, activeTracks } = storeToRefs(useDialogStore());
+const { t } = useI18n();

 const isDialogOpen = computed(() => {
  if (openedFile.value) {
@ -215,6 +217,17 @@ const emits = defineEmits(['close']);
 const activeProposal =
  proposals.length === 1 ? computed(() => proposals[0]) : ref(proposals[0]);

+const stepLabel = computed(() => {
+  const proposal = activeProposal.value || activeProposal;
+  const location = proposal.location;
+
+  if (location.step === 'virtualSample') {
+    return location.type === 'dynamic' ? t('dtl.dynamicTrack') : t('dtl.staticTrack');
+  }
+
+  return t('steps.' + location.step);
+});
+
 window.addEventListener('keyup', closeOnEscape);
 window.addEventListener('click', close);

--- a/src/components/design-to-light/OptimizationRequestDialog.vue
+++ b/src/components/design-to-light/OptimizationRequestDialog.vue
@ -5,15 +5,15 @@
    modal
    :draggable="false"
    :dismissableMask="true"
-    header="Demander un rendez-vous"
+    :header="t('dialogs.requestMeeting')"
    class="dialog"
    :closeOnEscape="true"
    @click="preventClose($event)"
  >
    <template #header>
-      <h2 class="font-serif text-lg">Demander un rendez-vous</h2>
+      <h2 class="font-serif text-lg">{{ t('dialogs.requestMeeting') }}</h2>
      <p class="flex justify-center text-sm" data-icon="leaf">
-        Design to Light
+        {{ t('dtl.title') }}
      </p>
    </template>

@ -22,7 +22,7 @@
      class="w-full h-full p-16 flex flex-col"
      style="--row-gap: 1rem"
    >
-      <label for="projects" class="sr-only">Projet</label>
+      <label for="projects" class="sr-only">{{ t('brief.projects') }}</label>
      <select
        name="projects"
        id="projects"
@ -30,7 +30,7 @@
        class="w-full rounded-md border border-grey-200 px-16 py-12"
        required
      >
-        <option value="">Sélectionnez le projet</option>
+        <option value="">{{ t('forms.selectVariation') }}</option>
        <option
          v-for="project in currentProjects"
          :key="project.uri"
@ -41,35 +41,37 @@
        </option>
      </select>

-      <label for="appointment-subject" class="sr-only"
-        >Objet du rendez-vous</label
-      >
+      <label for="appointment-subject" class="sr-only">{{
+        t('forms.meetingSubject')
+      }}</label>
      <input
        type="text"
        v-model="subject"
        id="appointment-subject"
-        placeholder="Objet du rendez-vous"
+        :placeholder="t('forms.meetingSubject')"
        class="w-full rounded-md border border-grey-200 px-16 py-12"
        required
      />

-      <label for="appointment-details" class="sr-only">Détails du projet</label>
+      <label for="appointment-details" class="sr-only">{{
+        t('forms.meetingDetails')
+      }}</label>
      <textarea
        id="appointment-details"
        name="details"
        v-model="details"
        cols="30"
        rows="10"
-        placeholder="Décrivez votre demande…"
+        :placeholder="t('forms.meetingDetailsPlaceholder')"
        class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
        required
      ></textarea>

      <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
        <button class="btn btn--black-10" @click="emits('close')">
-          Annuler
+          {{ t('buttons.cancel') }}
        </button>
-        <button class="btn" type="submit">Soumettre</button>
+        <button class="btn" type="submit">{{ t('buttons.submit') }}</button>
      </footer>
    </form>
  </Dialog>
@ -82,6 +84,9 @@ import { storeToRefs } from 'pinia';
 import { useProjectsStore } from '../../stores/projects';
 import { usePageStore } from '../../stores/page';
 import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { page } = storeToRefs(usePageStore());
 const { currentProjects } = storeToRefs(useProjectsStore());
--- a/src/components/inspirations/Image.vue
+++ b/src/components/inspirations/Image.vue
@ -3,7 +3,7 @@
    <!-- Favorite button -->
    <button
      class="favorite"
-      :aria-label="isFavorite ? 'Retirer des favoris' : 'Ajouter aux favoris'"
+      :aria-label="isFavorite ? t('inspirations.removeFromFavorites') : t('inspirations.addToFavorites')"
      :aria-pressed="isFavorite"
      @click="toggleFavorite"
    >
@ -34,6 +34,9 @@
 import { computed } from "vue";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 // Props
 const { item, inspirationUri } = defineProps({
@ -70,7 +73,7 @@ async function toggleFavorite() {
    // Update item favorite users list based on API response
    item.favoriteForUsers = newFavoriteUsers;
  } catch (error) {
-    console.error("Failed to toggle favorite:", error);
+    console.error(t('errors.toggleFavoriteFailed'), error);
    isFavorite.value = previousState; // Rollback on failure
  }
 }
--- a/src/components/notifications/AppointmentRequest.vue
+++ b/src/components/notifications/AppointmentRequest.vue
@ -10,12 +10,12 @@
        <strong
          class="notification__type | font-medium text-primary"
          data-icon="calendar"
-          >Demande de rendez-vous</strong
+          >{{ t('notifications.meetingRequest') }}</strong
        >
        <span class="notification__client | text-grey-700"
          >{{ notification.project.title }}
          {{
-            notification.project.status === "draft" ? "(brouillon)" : ""
+            notification.project.status === "draft" ? t('notifications.draft') : ""
          }}</span
        >
        <time
@ -29,7 +29,7 @@
      v-if="notification.type"
      class="notification__body | text-md font-medium | line-clamp"
      v-html="
-        'Auteur : ' +
+        t('notifications.author') + ' ' +
        (notification.author.name
          ? notification.author.name + ' (' + notification.author.email + ')'
          : notification.author.email) +
@ -44,6 +44,9 @@
 import { useNotificationsStore } from "../../stores/notifications";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { notification } = defineProps({ notification: Object });
 const { formatDate } = useNotificationsStore();
--- a/src/components/notifications/Content.vue
+++ b/src/components/notifications/Content.vue
@ -3,14 +3,14 @@
    class="notification | bg-white rounded-lg | p-16 | flow"
    data-type="content"
    @click="readNotification()"
-    title="Aller au contenu"
+    :title="t('notifications.goToContent')"
  >
    <header>
      <p class="flex">
        <strong
          class="notification__type | font-medium text-primary"
          data-icon="content"
-          >Contenu</strong
+          >{{ t('notifications.content') }}</strong
        >
        <span class="notification__client | text-grey-700">{{
          notification.project.title
@ -36,6 +36,9 @@ import { useRouter } from "vue-router";
 import { useNotificationsStore } from "../../stores/notifications";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const router = useRouter();
 const { notification } = defineProps({ notification: Object });
--- a/src/components/notifications/ProjectRequest.vue
+++ b/src/components/notifications/ProjectRequest.vue
@ -10,12 +10,12 @@
        <strong
          class="notification__type | font-medium text-primary"
          data-icon="document"
-          >Demande de création de projet</strong
+          >{{ t('notifications.projectRequest') }}</strong
        >
        <span class="notification__client | text-grey-700"
          >{{ notification.project.title }}
          {{
-            notification.project.status === "draft" ? "(brouillon)" : ""
+            notification.project.status === "draft" ? t('notifications.draft') : ""
          }}</span
        >
        <time
@ -29,7 +29,7 @@
      v-if="notification.type"
      class="notification__body | text-md font-medium | line-clamp"
      v-html="
-        'De la part de ' +
+        t('notifications.from') + ' ' +
        (notification.author.name
          ? notification.author.name + ' (' + notification.author.email + ')'
          : notification.author.email) +
@ -44,6 +44,9 @@
 import { useNotificationsStore } from "../../stores/notifications";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { notification } = defineProps({ notification: Object });
 const { formatDate } = useNotificationsStore();
--- a/src/components/project/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@ -14,9 +14,9 @@
    data-icon="comment"
    @click="isCommentsOpen = !isCommentsOpen"
  >
-    <span class="sr-only"
-      >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
-    >
+    <span class="sr-only">{{
+      isCommentsOpen ? t('buttons.hideComments') : t('buttons.showComments')
+    }}</span>
  </button>
  <a
    id="download-pdf"
@ -25,7 +25,7 @@
    :href="openedFile.url"
    download
  >
-    <span class="sr-only">Télécharger le fichier PDF</span>
+    <span class="sr-only">{{ t('buttons.downloadPdf') }}</span>
  </a>
  <Comments v-if="isCommentsOpen" />
 </template>
@ -36,6 +36,9 @@ import { ref, watch, computed, unref } from 'vue';
 import { useDialogStore } from '../../stores/dialog';
 import { storeToRefs } from 'pinia';
 import { VPdfViewer, useLicense } from '@vue-pdf-viewer/viewer';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const licenseKey =
  import.meta.env.VITE_VPV_LICENSE ??
--- a/src/components/project/Project.vue
+++ b/src/components/project/Project.vue
@ -15,12 +15,13 @@
        </router-link>
      </h3>
      <p>
-        Dernière mise à jour le
-        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
+        {{ t('dates.updatedOn') }}
+        <time :datetime="project.modified">{{ formattedModified }}</time>
      </p>
    </hgroup>
    <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
    <ol
+      v-if="Array.isArray(project.steps)"
      class="project-steps"
      :data-steps="project.steps.length"
      :style="'--steps:' + project.steps.length"
@ -31,7 +32,7 @@
        :data-status="setStatus(project.steps, project.currentStep, step)"
      >
        <span class="pill" :data-icon="step.id">
-          <span>{{ step.label }}</span>
+          <span>{{ t('steps.' + step.id) }}</span>
        </span>
      </li>
    </ol>
@ -41,15 +42,17 @@
 <script setup>
 import dayjs from 'dayjs';
 import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+import { computed } from 'vue';
 import { useProjectStore } from '../../stores/project';
-
-dayjs.locale('fr');
+import { useI18n } from 'vue-i18n';

 const { project } = defineProps({ project: Object });

-const frenchFormattedModified = dayjs(project.modified).format(
-  'dddd D MMMM YYYY'
-);
-
 const { stepsLabels, setStatus, isEmptyBrief } = useProjectStore();
+const { t, locale } = useI18n();
+
+const formattedModified = computed(() =>
+  dayjs(project.modified).locale(locale.value).format('dddd D MMMM YYYY')
+);
 </script>
--- a/src/components/project/ProjectStep.vue
+++ b/src/components/project/ProjectStep.vue
@ -5,7 +5,7 @@
    :data-status="setStatus(page.steps, page.content.currentstep, step)"
  >
    <h2 :id="step.id">
-      <span :data-icon="step.id">{{ step.label }}</span>
+      <span :data-icon="step.id">{{ t('steps.' + step.id) }}</span>
    </h2>
    <div
      ref="cards-node"
@ -23,21 +23,22 @@ import 'dayjs/locale/fr';
 import { usePageStore } from '../../stores/page';
 import { computed, onMounted, useTemplateRef } from 'vue';
 import { useProjectStore } from '../../stores/project';
-import ClientBrief from './cards/ClientBrief.vue';
+import Brief from './cards/Brief.vue';
 import MultipleDocuments from './cards/MultipleDocuments.vue';
 import SimpleDocument from './cards/SimpleDocument.vue';
 import VirtualSample from './cards/VirtualSample.vue';
 import PhysicalSample from './cards/PhysicalSample.vue';
 import { useUserStore } from '../../stores/user';
+import { useI18n } from 'vue-i18n';

 const { step } = defineProps({
  step: Object,
 });

 const cardsMap = {
-  clientBrief: ClientBrief,
+  clientBrief: Brief,
  proposal: MultipleDocuments,
-  extendedBrief: SimpleDocument,
+  extendedBrief: Brief,
  industrialIdeation: SimpleDocument,
  virtualSample: VirtualSample,
  physicalSample: PhysicalSample,
@ -49,6 +50,7 @@ const { page } = usePageStore();
 const { setStatus } = useProjectStore();
 const cardsNode = useTemplateRef('cards-node');
 const { user } = useUserStore();
+const { t } = useI18n();

 // Hooks
 onMounted(() => {
--- a/src/components/project/TitledPdfWrapper.vue
+++ b/src/components/project/TitledPdfWrapper.vue
@ -5,7 +5,7 @@
    modal
    :draggable="false"
    :dismissableMask="true"
-    header="Titre du PDF"
+    :header="t('dialogs.pdfTitle')"
    class="dialog"
    :class="[
      { 'with-comments': isCommentsOpen },
@ -16,13 +16,13 @@
    <template #header>
      <button
        v-if="
-          dialog.content.id === 'clientBrief' &&
+          ['clientBrief', 'extendedBrief'].includes(dialog.content.id) &&
          dialog.content.isValidated !== true
        "
        class="btn"
        @click="validate()"
      >
-        Valider et envoyer le brief
+        {{ t('buttons.validate') }}
      </button>
      <h2
        v-if="openedFile"
@ -52,7 +52,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useApiStore } from '../../stores/api';
 import { usePageStore } from '../../stores/page';
+import { useI18n } from 'vue-i18n';

+const { t } = useI18n();
 const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());

 const router = useRouter();
@ -91,7 +93,7 @@ const correspondingDTLProposal = computed(() => {
 // Functions
 async function validate() {
  const response = await api.validateBrief(
-    route.path + '/client-brief',
+    route.path + '/' + dialog.content.slug,
    route.fullPath
  );
  if (response.success) {
--- a/src/components/project/brief/Header.vue
+++ b/src/components/project/brief/Header.vue
@ -6,12 +6,12 @@
      <label
        for="project-description"
        class="flex | text-sm text-grey-700 | mb-8"
-        >Description du projet</label
+        >{{ t('forms.description') }}</label
      >
      <textarea
        name="project-description"
        id="project-description"
-        placeholder="Ajoutez une description générale de votre projet…"
+        :placeholder="t('forms.descriptionPlaceholder')"
        rows="2"
        class="border border-grey-200 | rounded-xl | p-16 | w-full"
        v-model="page.content.description"
@ -19,7 +19,7 @@
      ></textarea>
    </div>
    <fieldset class="project-details__filters | flex-1">
-      <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
+      <legend class="text-sm text-grey-700 | mb-8">{{ t('forms.filterByTags') }}</legend>
      <div class="flex" style="gap: var(--space-8)">
        <button
          class="btn btn--sm btn--grey"
@ -28,7 +28,7 @@
          role="switch"
          @click="clearTags()"
        >
-          Voir tout
+          {{ t('buttons.seeAll') }}
        </button>
        <template v-for="tag in page.tags" :key="tag">
          <input
@ -53,6 +53,9 @@ import { ref, watch } from "vue";
 import { usePageStore } from "../../../stores/page";
 import StringUtils from "../../../utils/string";
 import debounce from "lodash/debounce";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { selectedTags } = defineProps({
  selectedTags: Array,
@ -93,7 +96,7 @@ const saveDescription = debounce(() => {
        console.log(json);
      })
      .catch((error) => {
-        console.error("Erreur lors de la sauvegarde :", error);
+        console.error(t('errors.saveFailed'), error);
        isWaitingForSave.value = false;
      });
  }
--- a/src/components/project/brief/ImageDetailsModal.vue
+++ b/src/components/project/brief/ImageDetailsModal.vue
@ -3,7 +3,7 @@
    v-model:visible="isOpen"
    id="image-details"
    modal
-    header="Détails de l’image"
+    :header="t('dialogs.imageDetails')"
    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
  >
    <picture :style="'--image: url('+image.url+')'">
@ -11,7 +11,7 @@
    </picture>
    <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
      <fieldset class="image__tags">
-        <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
+        <legend class="text-sm text-grey-700 | mb-8">{{ t('forms.tags') }}</legend>
        <div class="flex" style="gap: var(--space-8)">
          <template v-for="(pageTag, index) in page.tags" :key="index">
            <input
@ -33,12 +33,12 @@
        <label
          for="image-description"
          class="flex | text-sm text-grey-700 | mb-8"
-          >Description de l’image</label
+          >{{ t('forms.imageDescription') }}</label
        >
        <textarea
          name="image-description"
          id="image-description"
-          placeholder="Ajoutez une description à l’image…"
+          :placeholder="t('forms.imageDescriptionPlaceholder')"
          class="border border-grey-200 | rounded-xl | p-16 | w-full"
          v-model="image.description"
          @input="saveDescription()"
@ -49,7 +49,7 @@
        class="btn btn--black-10 | ml-auto mt-auto"
        @click="remove()"
      >
-        Supprimer cette image
+        {{ t('buttons.deleteImage') }}
      </button>
    </div>
  </Dialog>
@ -61,6 +61,9 @@ import { usePageStore } from "../../../stores/page";
 import StringUtils from "../../../utils/string";
 import Dialog from "primevue/dialog";
 import debounce from "lodash/debounce";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { imageDetails } = defineProps({
  imageDetails: Object,
@ -97,7 +100,7 @@ function saveTags() {
      console.log(json);
    })
    .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
+      console.error(t('errors.saveFailed'), error);
    });
 }

@ -122,7 +125,7 @@ const saveDescription = debounce(() => {
      emit("");
    })
    .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
+      console.error(t('errors.saveFailed'), error);
    });
 }, 1000);

@ -142,7 +145,7 @@ function remove() {
      isOpen.value = false;
    })
    .catch((error) => {
-      console.error("Erreur lors de la suppression :", error);
+      console.error(t('errors.deleteFailed'), error);
    });
 }
 </script>
--- a/src/components/project/brief/Images.vue
+++ b/src/components/project/brief/Images.vue
@ -10,7 +10,7 @@
        class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
        @click="isAddImagesModalOpen = true"
      >
-        Ajouter une ou plusieurs images
+        {{ t('forms.addImages') }}
      </button>
      <template v-for="image in page.moodboard" :key="image.uri">
        <figure
@ -52,11 +52,13 @@
 import Header from "./Header.vue";
 import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import ImageDetailsModal from "./ImageDetailsModal.vue";
 import AddImagesModal from "./add-images-modal/AddImagesModal.vue";
 import { storeToRefs } from "pinia";

 const { page } = storeToRefs(usePageStore());
+const { t } = useI18n();

 const selectedTags = ref([]);
 const imageDetails = ref(null);
--- a/src/components/project/brief/Intro.vue
+++ b/src/components/project/brief/Intro.vue
@ -1,23 +0,0 @@
-<template>
-  <section class="h-full | grid-center">
-    <div
-      class="card | items-center | text-center | w-full max-w"
-      style="--row-gap: var(--space-32); --max-w: 27.5rem"
-    >
-      <h2 class="font-serif text-lg">Créez votre premier brief de projet !</h2>
-      <p class="text-grey-700">
-        Bienvenu à votre nouvel espace de projet. <br />Commencez par consulter
-        les inspirations <br />et partagez vos intentions !
-      </p>
-      <button
-        class="btn | w-full"
-        @click="emit('update:step', 'ModeSelection')"
-      >
-        Commencer
-      </button>
-    </div>
-  </section>
-</template>
-<script setup>
-const emit = defineEmits(["update:step"]);
-</script>
--- a/src/components/project/brief/ModeSelection.vue
+++ b/src/components/project/brief/ModeSelection.vue
@ -1,116 +0,0 @@
-<template>
-  <section
-    class="h-full | flex flex-col justify-center items-center | mx-auto | max-w"
-    style="--max-w: 42rem; --row-gap: var(--space-32)"
-  >
-    <div class="flex items-baseline">
-      <div
-        @click="emit('update:step', 'Images')"
-        class="card card--cta | flex-1 | h-full"
-        style="--padding: var(--space-32); --row-gap: var(--space-32)"
-      >
-        <svg
-          aria-hidden="true"
-          width="100"
-          height="100"
-          viewBox="0 0 100 100"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="currentColor"
-          stroke-width="5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M92.8571 46.4292H64.2857C62.3133 46.4292 60.7143 48.0282 60.7143 50.0006V92.8577C60.7143 94.8302 62.3133 96.4292 64.2857 96.4292H92.8571C94.8296 96.4292 96.4286 94.8302 96.4286 92.8577V50.0006C96.4286 48.0282 94.8296 46.4292 92.8571 46.4292Z"
-          />
-          <path
-            d="M92.8571 3.57202H64.2857C62.3133 3.57202 60.7143 5.171 60.7143 7.14345V21.5006C60.7143 23.473 62.3133 25.072 64.2857 25.072H92.8571C94.8296 25.072 96.4286 23.473 96.4286 21.5006V7.14345C96.4286 5.171 94.8296 3.57202 92.8571 3.57202Z"
-          />
-          <path
-            d="M35.7143 3.57202H7.14284C5.17039 3.57202 3.57141 5.171 3.57141 7.14345V50.0006C3.57141 51.973 5.17039 53.572 7.14284 53.572H35.7143C37.6867 53.572 39.2857 51.973 39.2857 50.0006V7.14345C39.2857 5.171 37.6867 3.57202 35.7143 3.57202Z"
-          />
-          <path
-            d="M35.7143 74.9291H7.14284C5.17039 74.9291 3.57141 76.5281 3.57141 78.5005V92.8577C3.57141 94.8301 5.17039 96.4291 7.14284 96.4291H35.7143C37.6867 96.4291 39.2857 94.8301 39.2857 92.8577V78.5005C39.2857 76.5281 37.6867 74.9291 35.7143 74.9291Z"
-          />
-        </svg>
-        <h2 class="font-serif text-lg">Créer via la plateforme</h2>
-        <p class="text-sm text-grey-700">
-          Ajouter différents éléments tels que des images et du texte sur la
-          plateforme afin de créer votre brief.
-        </p>
-      </div>
-
-      <div
-        class="card card--cta | flex-1 | h-full"
-        style="--padding: var(--space-32); --row-gap: var(--space-32)"
-      >
-        <svg
-          aria-hidden="true"
-          width="100"
-          height="100"
-          viewBox="0 0 100 100"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="currentColor"
-          stroke-width="5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M3.57153 75.0001V82.143C3.57153 85.9318 5.07663 89.5654 7.75572 92.2445C10.4348 94.9236 14.0684 96.4287 17.8572 96.4287H82.143C85.9318 96.4287 89.5654 94.9236 92.2445 92.2445C94.9236 89.5654 96.4287 85.9318 96.4287 82.143V75.0001M28.5715 28.5715L50.0001 3.57153M50.0001 3.57153L71.4287 28.5715M50.0001 3.57153V67.8573"
-          />
-        </svg>
-        <label class="font-serif text-lg" for="upload-pdf">
-          Ajouter un PDF
-          <input
-            id="upload-pdf"
-            type="file"
-            @change="addPdf($event, page.uri, true)"
-            accept="application/pdf"
-            ref="pdfInput"
-            hidden
-          />
-        </label>
-        <p class="text-sm text-grey-700">
-          Vous avez déjà constitué votre brief en amont et souhaitez directement
-          l’importer.
-        </p>
-      </div>
-    </div>
-
-    <div
-      class="card | bg-grey-200 | items-center | text-center | w-full"
-      style="--padding: var(--space-32); --row-gap: var(--space-16)"
-    >
-      <h2 class="font-serif text-lg">Qu’est ce que le brief ?</h2>
-      <p class="text-sm text-grey-700">
-        Le brief est un outil créatif qui permet de définir les perspectives
-        esthétiques de votre projet.
-      </p>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { usePageStore } from "../../../stores/page";
-import { storeToRefs } from "pinia";
-import { useBriefStore } from "../../../stores/brief";
-
-const emit = defineEmits("update:step");
-
-const { page } = storeToRefs(usePageStore());
-const { addPdf } = useBriefStore();
-const pdfInput = ref(null);
-</script>
-
-<style scoped>
-label[for="upload-pdf"]::after {
-  content: "";
-  display: block;
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-</style>
--- a/src/components/project/brief/add-images-modal/AddImagesModal.vue
+++ b/src/components/project/brief/add-images-modal/AddImagesModal.vue
@ -5,7 +5,7 @@
    :draggable="false"
    :dismissableMask="true"
    modal
-    header="Ajouter des images"
+    :header="t('dialogs.addImages')"
    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
  >
    <div class="with-sidebar | h-full">
@ -56,19 +56,18 @@
    id="delete-image"
    v-model:visible="deleteIsOpen"
    modal
-    header="Êtes-vous sûr de vouloir supprimer cette image ?"
+    :header="t('dialogs.deleteConfirm')"
    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | text-center | w-full max-w | p-16 pt-32"
    style="--row-gap: var(--space-32); --max-w: 40rem"
  >
    <p class="text-grey-700 | px-16">
-      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi
-      que toutes les informations qui lui sont attribuées.
+      {{ t('dialogs.deleteWarning') }}
    </p>
    <template #footer>
      <button class="btn btn--secondary | flex-1" @click="deleteIsOpen = false">
-        Annuler
+        {{ t('buttons.cancel') }}
      </button>
-      <button class="btn | flex-1" @click="">Supprimer</button>
+      <button class="btn | flex-1" @click="">{{ t('buttons.delete') }}</button>
    </template>
  </Dialog>
 </template>
@ -79,6 +78,9 @@ import ImagesEditPanel from './ImagesEditPanel.vue';
 import { ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAddImagesModalStore } from '../../../../stores/addImagesModal';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { isAddImagesModalOpen } = defineProps({
  isAddImagesModalOpen: Boolean,
--- a/src/components/project/brief/add-images-modal/ImagesEditPanel.vue
+++ b/src/components/project/brief/add-images-modal/ImagesEditPanel.vue
@ -26,7 +26,7 @@
            <textarea
              name="image-description"
              id="image-description"
-              placeholder="Ajoutez une description à cette image…"
+              :placeholder="t('forms.imageDescriptionPlaceholder')"
              rows="3"
              class="border border-grey-200 | rounded-xl | p-16 | w-full"
              v-model="image.description"
@ -34,7 +34,7 @@
          </div>
          <fieldset class="image-details__filters | flex-1">
            <legend class="text-sm text-grey-700 | mb-8">
-              Sélectionner un ou plusieurs tags
+              {{ t('forms.selectTags') }}
            </legend>
            <div class="flex" style="gap: var(--space-8)">
              <template v-for="tag in page.tags" :key="tag">
@ -95,7 +95,7 @@
      </template>
    </Accordion>
    <button class="btn | w-full | mt-auto" @click="addImagesToBrief()">
-      Ajouter les images sélectionnées
+      {{ t('buttons.addSelectedImages') }}
    </button>
  </div>
 </template>
@ -109,8 +109,10 @@ import StringUtils from "../../../../utils/string";
 import { storeToRefs } from "pinia";
 import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";

 const { page } = storeToRefs(usePageStore());
+const { t } = useI18n();

 const { activeTab } = storeToRefs(useAddImagesModalStore());

--- a/src/components/project/brief/add-images-modal/MyImages.vue
+++ b/src/components/project/brief/add-images-modal/MyImages.vue
@ -8,8 +8,8 @@
      :multiple="true"
      accept="image/*"
      :maxFileSize="1000000"
-      invalidFileSizeMessage="Fichier trop lourd"
-      chooseLabel="Ajouter une ou plusieurs images"
+      :invalidFileSizeMessage="t('errors.saveFailed')"
+      :chooseLabel="t('forms.addImages')"
      class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
      ref="uploadBtn"
    >
@ -38,7 +38,7 @@
          removeFileCallback,
        }"
      >
-        <div v-if="files.length > 0">Fichiers importés</div>
+        <div v-if="files.length > 0">{{ t('forms.uploadedFiles') }}</div>
      </template>
    </FileUpload>
    <figure
@ -71,6 +71,9 @@ import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
 import ArrayUtils from "../../../../utils/array";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const { page } = storeToRefs(usePageStore());
 const toast = useToast();
--- a/src/components/project/cards/ClientBrief.vue
+++ b/src/components/project/cards/ClientBrief.vue
@ -3,20 +3,20 @@
    v-if="images.length > 0"
    :step="step"
    :images="images"
-    :uri="'/' + step.uri"
+    :uri="addLocalePrefix(step.uri)"
  />
  <Document v-if="pdf" :step="step" :pdf="pdf" />

  <button
-    v-if="images.length === 0"
+    v-if="images.length === 0 && step.id === 'clientBrief'"
    class="btn | w-full"
    @click="goToImagesBrief()"
  >
-    Ajouter un brief via la plateforme
+    {{ t('brief.addPlatform') }}
  </button>
-  <div class="btn | w-full" v-if="!pdf">
+  <div class="btn | w-full" v-if="!pdf && step.id === 'clientBrief'">
    <label for="upload-pdf">
-      Ajouter un brief PDF
+      {{ t('brief.addPdf') }}
      <input
        id="upload-pdf"
        type="file"
@ -35,10 +35,13 @@ import Images from "./Images.vue";
 import Document from "./Document.vue";
 import { useBriefStore } from "../../../stores/brief";
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { addLocalePrefix } from "../../../utils/router";

 const { step } = defineProps({ step: Object });
 const { addPdf } = useBriefStore();
 const router = useRouter();
+const { t } = useI18n();

 const images = computed(() => {
  return step.files.filter((file) => file.type === "image");
@ -49,6 +52,6 @@ const pdf = computed(() => {
 });

 function goToImagesBrief() {
-  router.push(location.pathname + "/client-brief?step=images");
+  router.push(location.pathname + "/" + step.slug);
 }
 </script>
--- a/src/components/project/cards/DateTime.vue
+++ b/src/components/project/cards/DateTime.vue
@ -3,7 +3,7 @@
    <time
      class="card__date | text-grey-700"
      :datetime="dayjs(date).format('YYYY-M-DD')"
-      >{{ dayjs(date).format("DD MMMM YYYY") }}</time
+      >{{ dayjs(date).locale(locale).format("DD MMMM YYYY") }}</time
    >
  </div>
 </template>
@ -11,6 +11,9 @@
 <script setup>
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import "dayjs/locale/en";
+import { useI18n } from "vue-i18n";

 const { date } = defineProps({ date: String });
+const { locale } = useI18n();
 </script>
--- a/src/components/project/cards/Document.vue
+++ b/src/components/project/cards/Document.vue
@ -25,7 +25,7 @@
      v-if="pdf.comments?.length > 0"
      class="order-last | text-sm text-primary font-medium"
    >
-      <router-link :to="'/' + step.uri + '&comments=true'">
+      <router-link :to="addLocalePrefix(step.uri) + '&comments=true'">
        {{ pdf.comments.length }} commentaire{{
          pdf.comments.length > 1 ? "s" : ""
        }}
@ -39,6 +39,7 @@ import { useRoute } from "vue-router";
 import DateTime from "./DateTime.vue";
 import { computed } from "vue";
 import { useDesignToLightStore } from "../../../stores/designToLight";
+import { addLocalePrefix } from "../../../utils/router";

 const { step, pdf, index } = defineProps({
  step: Object,
--- a/src/components/project/cards/Images.vue
+++ b/src/components/project/cards/Images.vue
@ -2,7 +2,7 @@
  <article class="card">
    <hgroup class="order-last">
      <h3 class="card__title | font-serif | text-lg">
-        <router-link :to="uri" class="link-full">{{ step.label }}</router-link>
+        <router-link :to="uri" class="link-full">{{ t('steps.' + step.id) }}</router-link>
      </h3>
    </hgroup>
    <DateTime :date="step.modified" />
@ -42,6 +42,7 @@ import DateTime from './DateTime.vue';
 import { useDesignToLightStore } from '../../../stores/designToLight';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';

 const { images, step, uri } = defineProps({
  images: Array,
@ -51,13 +52,17 @@ const { images, step, uri } = defineProps({

 const { isDesignToLightStep } = useDesignToLightStore();
 const { allVariations } = useVirtualSampleStore();
+const { t } = useI18n();

 const commentsCount = computed(() => {
  let count = 0;

  if (Array.isArray(step.files)) {
+    // Ne compter que les commentaires des images, pas des documents (PDFs)
    for (const file of step.files) {
-      count += file?.comments?.length || 0;
+      if (file.type === 'image') {
+        count += file?.comments?.length || 0;
+      }
    }
  } else {
    if (step.files?.dynamic) {
--- a/src/components/project/cards/PhysicalSample.vue
+++ b/src/components/project/cards/PhysicalSample.vue
@ -5,7 +5,7 @@
      :style="'--cover: url(' + step.cover + ')'"
    >
      <h3 class="text-lg font-serif">
-        <router-link :to="'/' + step.uri" class="link-full">{{
+        <router-link :to="addLocalePrefix(step.uri)" class="link-full">{{
          step.title
        }}</router-link>
      </h3>
@ -27,6 +27,7 @@
 <script setup>
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import { addLocalePrefix } from "../../../utils/router";

 const { step } = defineProps({ step: Object });
 </script>
--- a/src/components/project/cards/VirtualSample.vue
+++ b/src/components/project/cards/VirtualSample.vue
@ -11,6 +11,7 @@ import Images from './Images.vue';
 import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { addLocalePrefix } from '../../../utils/router';

 const { step } = defineProps({ step: Object });

@ -27,7 +28,7 @@ const images = computed(() => {
  return allVariations.value.map((variation) => getFrontView(variation)) ?? [];
 });

-const uri = '/' + step.uri;
+const uri = addLocalePrefix(step.uri);

 function getFrontView(variation) {
  if (variation.files.length === 1) return variation.files[0];
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/src/components/project/virtual-sample/DynamicView.vue
@ -19,8 +19,8 @@
      >
        <span>{{
          isCompareModeEnabled
-            ? 'Quitter le mode comparer'
-            : 'Comparer les pistes'
+            ? t('buttons.exitCompare')
+            : t('buttons.compareTracks')
        }}</span>
      </button>
    </header>
@ -41,7 +41,7 @@
          :backgroundColor="activeTrack.backgroundColor"
        />
        <div v-else class="track-empty | bg-white rounded-xl w-full p-32">
-          <p>Contenu non disponible pour cette piste</p>
+          <p>{{ t('virtualSample.noContent') }}</p>
        </div>
      </template>

@ -49,7 +49,7 @@
        v-if="isCompareModeEnabled && activeTracks.length < 2"
        class="track-empty | bg-white rounded-xl w-full p-32"
      >
-        <p>Sélectionnez sur la piste que vous souhaitez comparer</p>
+        <p>{{ t('virtualSample.selectToCompare') }}</p>
      </div>
    </div>
  </div>
@ -61,13 +61,17 @@ import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
 import { useDialogStore } from '../../../stores/dialog';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import Interactive360 from './Interactive360.vue';
 import SingleImage from './SingleImage.vue';
 import Selector from '../../Selector.vue';
 import slugify from 'slugify';

+const { t } = useI18n();
+
 const route = useRoute();
+const router = useRouter();

 const { page } = storeToRefs(usePageStore());
 const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
@ -83,7 +87,7 @@ const tracks = computed(() => {

  for (const key in raw) {
    list.push({
-      title: key,
+      title: key === 'Autres pistes' ? t('virtualSample.otherTracks') : key,
      slug: slugify(key),
      variations: raw[key] || [],
    });
@ -92,41 +96,74 @@ const tracks = computed(() => {
  return list;
 });

-// ---------- INITIALISATION ----------
-// onBeforeMount : on initialise toujours activeTracks avec une VARIATION (jamais un track)
-onBeforeMount(() => {
-  // essayer la hash en priorité
-  let initialVariation = null;
+function normalizeSlug(slug) {
+  return slug.replace(/_/g, '-');
+}

+function getVariationSlug(variation) {
+  return variation.slug || (variation.title ? slugify(variation.title) : null);
+}
+
+function findVariationByHash(hashValue) {
+  const allVariations = tracks.value.flatMap((track) => track.variations || []);
+  const normalizedHash = normalizeSlug(hashValue);
+
+  return allVariations.find((variation) => {
+    const variationSlug = getVariationSlug(variation);
+    if (!variationSlug) return false;
+
+    const normalizedVariationSlug = normalizeSlug(variationSlug);
+    return normalizedVariationSlug === normalizedHash;
+  });
+}
+
+function getInitialVariation() {
  if (route?.hash && route.hash.length > 0) {
-    const variations = tracks.value.flatMap((t) => t.variations || []);
-    initialVariation =
-      variations.find((v) => v.slug === route.hash.substring(1)) || null;
+    const hashValue = route.hash.substring(1);
+    const variationFromHash = findVariationByHash(hashValue);
+    if (variationFromHash) return variationFromHash;
  }

-  // fallback : première variation du premier track
-  if (!initialVariation) {
-    initialVariation = tracks.value[0]?.variations?.[0] || null;
-  }
+  return tracks.value[0]?.variations?.[0] || null;
+}

-  if (initialVariation) {
-    activeTracks.value = [initialVariation];
-  } else {
-    activeTracks.value = []; // aucun contenu disponible
-  }
-});
+function initializeActiveTracks() {
+  const initialVariation = getInitialVariation();
+  activeTracks.value = initialVariation ? [initialVariation] : [];
+}

-// scroll si hash présent
-onMounted(() => {
-  if (route.query?.comments) isCommentsOpen.value = true;
+function normalizeUrlHash() {
+  if (route?.hash && route.hash.includes('_')) {
+    const normalizedHash = normalizeSlug(route.hash);
+    router.replace({ ...route, hash: normalizedHash });
+  }
+}
+
+function openCommentsIfRequested() {
+  if (route.query?.comments) {
+    isCommentsOpen.value = true;
+  }
+}
+
+function scrollToHashTarget() {
  if (!route?.hash || route.hash.length === 0) return;

-  const selector = route.hash.replace('#', '#track--');
-  const targetBtn = document.querySelector(selector);
-  if (targetBtn) targetBtn.scrollIntoView();
+  const selectorId = route.hash.replace('#', '#track--');
+  const targetButton = document.querySelector(selectorId);
+  if (targetButton) {
+    targetButton.scrollIntoView();
+  }
+}
+
+onBeforeMount(() => {
+  initializeActiveTracks();
 });

-// ---------- COMPUTED / WATCH ----------
+onMounted(() => {
+  openCommentsIfRequested();
+  normalizeUrlHash();
+  scrollToHashTarget();
+});

 const isSingleImage = computed(() => {
  return (
@ -139,38 +176,52 @@ const singleFile = computed(() => {
  return isSingleImage.value ? activeTracks.value[0].files[0] : null;
 });

-watch(
-  singleFile,
-  (newValue) => {
-    if (newValue) openedFile.value = newValue;
-  },
-  { immediate: true }
-);
-
-// gestion du mode comparaison : fermer les commentaires, etc.
-watch(isCompareModeEnabled, (newValue) => {
-  if (newValue) {
-    isCommentsOpen.value = false;
-    isCommentPanelEnabled.value = false;
-  } else {
-    isCommentPanelEnabled.value = true;
+function updateOpenedFile(file) {
+  if (file) {
+    openedFile.value = file;
  }
+}

-  // quand on quitte le mode comparaison on retire l'élément secondaire si nécessaire
-  if (!newValue && activeTracks.value.length === 2) {
+function enableCompareModeUI() {
+  isCommentsOpen.value = false;
+  isCommentPanelEnabled.value = false;
+}
+
+function disableCompareModeUI() {
+  isCommentPanelEnabled.value = true;
+
+  if (activeTracks.value.length === 2) {
    activeTracks.value.pop();
  }
+}
+
+function updateUrlHash(firstTrack) {
+  const trackSlug = getVariationSlug(firstTrack);
+  if (!trackSlug) return;
+
+  const currentHash = route.hash ? route.hash.substring(1) : '';
+  const normalizedTrackSlug = normalizeSlug(trackSlug);
+
+  if (currentHash !== normalizedTrackSlug) {
+    router.replace({ ...route, hash: '#' + normalizedTrackSlug });
+  }
+}
+
+watch(singleFile, updateOpenedFile, { immediate: true });
+
+watch(isCompareModeEnabled, (isEnabled) => {
+  isEnabled ? enableCompareModeUI() : disableCompareModeUI();
 });

-// ---------- UTIL / helper ----------
-function getCommentsCount(track) {
-  if (!track || !Array.isArray(track.files)) return undefined;
-  let count = 0;
-  for (const file of track.files) {
-    count += file?.comments?.length || 0;
-  }
-  return count > 0 ? count : undefined;
-}
+watch(
+  activeTracks,
+  (tracks) => {
+    if (tracks && tracks.length > 0) {
+      updateUrlHash(tracks[0]);
+    }
+  },
+  { deep: true }
+);
 </script>

 <style>
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@ -5,7 +5,7 @@
    modal
    :draggable="false"
    :dismissableMask="true"
-    header="Titre du rendu"
+    :header="t('dialogs.renderTitle')"
    class="dialog"
    :class="[
      { 'with-comments': isCommentsOpen },
@ -26,7 +26,7 @@
          aria-controls="dynamic"
          @click="activeTab = 'dynamic'"
        >
-          <span>Présentation dynamique</span>
+          <span>{{ t('virtualSample.dynamicPresentation') }}</span>
        </button>
        <button
          v-if="step.files.static"
@ -38,10 +38,10 @@
          :aria-pressed="activeTab === 'static' ? true : false"
          aria-controls="static"
        >
-          <span>Vue statique</span>
+          <span>{{ t('virtualSample.staticView') }}</span>
        </button>
      </div>
-      <h2 class="font-serif text-lg">Échantillon virtuel</h2>
+      <h2 class="font-serif text-lg">{{ t('virtualSample.title') }}</h2>
    </template>

    <DynamicView id="dynamic" v-if="activeTab === 'dynamic'" />
@ -66,8 +66,8 @@
      >
        <span>{{
          !isLoopAnimationEnabled
-            ? 'Animation en boucle'
-            : 'Arrêter l’animation'
+            ? t('buttons.loopAnimation')
+            : t('buttons.stopAnimation')
        }}</span>
      </button>
      <button
@ -79,7 +79,7 @@
        @click="isCommentsOpen = !isCommentsOpen"
      >
        <span class="sr-only"
-          >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
+          >{{ isCommentsOpen ? t('buttons.hideComments') : t('buttons.showComments') }}</span
        >
      </button>
    </template>
@ -103,7 +103,9 @@ import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useDialogStore } from '../../../stores/dialog';
 import { useRoute, useRouter } from 'vue-router';
 import { usePageStore } from '../../../stores/page';
+import { useI18n } from 'vue-i18n';

+const { t } = useI18n();
 const { file } = defineProps({
  file: Object,
 });
@ -141,12 +143,12 @@ watch(isOpen, (newValue) => {
 const downloadText = computed(() => {
  if (activeTab.value === 'dynamic') {
    if (activeTracks.value.length === 1) {
-      return "Télécharger l'image";
+      return t('buttons.downloadImage');
    } else {
-      return 'Télécharger les images';
+      return t('buttons.downloadImages');
    }
  } else {
-    return 'Télécharger le PDF';
+    return t('buttons.downloadPdf');
  }
 });

--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,201 @@
+{
+  "menu": {
+    "home": "Home",
+    "notifications": "Notifications",
+    "meetings": "Meetings",
+    "designToLight": "Design to Light",
+    "inspirations": "Inspirations",
+    "profile": "Profile",
+    "logout": "Logout",
+    "currentProjects": "Current projects",
+    "archivedProjects": "Archived projects",
+    "news": "New",
+    "show": "Show menu",
+    "hide": "Hide menu",
+    "newModifications": "New modifications"
+  },
+  "steps": {
+    "clientBrief": "Client brief",
+    "proposal": "Commercial proposal",
+    "extendedBrief": "Extended brief",
+    "industrialIdeation": "Industrial ideation",
+    "virtualSample": "Virtual sample",
+    "physicalSample": "Physical sample"
+  },
+  "dtl": {
+    "dynamicTrack": "Virtual sample - dynamic track",
+    "staticTrack": "Virtual sample - static track",
+    "title": "Design to Light",
+    "grade": "Design to Light: {grade}",
+    "globalScore": "Global score",
+    "positioning": "Positioning",
+    "design": "Design",
+    "weight": "Weight",
+    "indicators": "Component indicators",
+    "requestOptimization": "Request optimization expertise",
+    "requestPending": "Expertise request being processed…",
+    "initialProposal": "Initial proposal",
+    "alternative": "Alternative {index}",
+    "proposalBasedOn": "Data based on the proposal"
+  },
+  "buttons": {
+    "edit": "Edit",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "submit": "Submit",
+    "retry": "Retry",
+    "add": "Add",
+    "close": "Close",
+    "validate": "Validate and send the brief",
+    "validateMinimum": "Add at least one image",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "showProject": "Show project",
+    "hideProject": "Hide project",
+    "showComments": "Show comments",
+    "hideComments": "Hide comments",
+    "backToProject": "Back to project",
+    "backToList": "Back to list",
+    "addComment": "Add a comment",
+    "reply": "Reply…",
+    "seeAll": "See all",
+    "deleteImage": "Delete this image",
+    "downloadImage": "Download image",
+    "downloadImages": "Download images",
+    "downloadPdf": "Download PDF",
+    "update": "Update",
+    "requestMeeting": "Request a meeting",
+    "markAllAsRead": "Mark all as read",
+    "loopAnimation": "Loop animation",
+    "stopAnimation": "Stop animation",
+    "compareTracks": "Compare tracks",
+    "exitCompare": "Exit compare mode",
+    "addSelectedImages": "Add selected images"
+  },
+  "forms": {
+    "email": "Email",
+    "emailPlaceholder": "email{'@'}example.com",
+    "password": "Password",
+    "passwordPlaceholder": "Minimum 8 characters",
+    "newPassword": "New password",
+    "confirmPassword": "Confirm new password…",
+    "projectName": "Project name",
+    "projectDetails": "Project details",
+    "projectDetailsPlaceholder": "Project details…",
+    "meetingSubject": "Meeting subject",
+    "meetingDetails": "Project details",
+    "meetingDetailsPlaceholder": "Describe your request…",
+    "description": "Project description",
+    "descriptionPlaceholder": "Add a general description of your project…",
+    "imageDescription": "Image description",
+    "imageDescriptionPlaceholder": "Add a description to the image…",
+    "commentPlaceholder": "Add a comment…",
+    "filterByTags": "Filter by tags",
+    "tags": "Tags",
+    "selectVariation": "Select a variation",
+    "uploadedFiles": "Uploaded files",
+    "addImages": "Add one or more images",
+    "selectTags": "Select one or more tags"
+  },
+  "auth": {
+    "login": "Login",
+    "passwordShown": "Password shown",
+    "passwordHidden": "Password hidden",
+    "fillFields": "Please fill in the fields.",
+    "inProgress": "In progress…",
+    "updateSuccess": "Update successful",
+    "updateInProgress": "in progress…"
+  },
+  "account": {
+    "comments": "Comments",
+    "noClient": "No associated client",
+    "managedProjects": "Managed projects",
+    "myProjects": "My projects",
+    "currentStep": "Current step:",
+    "projectCount": "Number of projects",
+    "clientLogo": "{clientName} logo"
+  },
+  "brief": {
+    "addPlatform": "Add a brief via the platform",
+    "addPdf": "Add a PDF brief",
+    "projects": "Projects"
+  },
+  "comments": {
+    "title": "Comments",
+    "your": "Your comment",
+    "new": "New comment",
+    "newInstruction": "In the content area, click where you want to position the comment",
+    "reply": "reply",
+    "replies": "replies",
+    "edit": "Edit",
+    "inProgress": "In progress",
+    "emptyMessage": "Share your ideas by adding comments"
+  },
+  "dates": {
+    "today": "Today",
+    "yesterday": "yesterday",
+    "updatedOn": "Last updated on"
+  },
+  "projects": {
+    "none": "No projects at the moment",
+    "current": "Current projects",
+    "archived": "Archived projects"
+  },
+  "notifications": {
+    "title": "Notifications",
+    "none": "You have no new notifications",
+    "noneUnread": "You have no unread notifications",
+    "all": "All",
+    "unread": "Unread",
+    "projectRequest": "Project creation request",
+    "meetingRequest": "Meeting request",
+    "content": "Content",
+    "draft": "(draft)",
+    "from": "From",
+    "author": "Author:",
+    "goToContent": "Go to content"
+  },
+  "meetings": {
+    "none": "You have no scheduled meetings",
+    "upcoming": "Upcoming",
+    "past": "Past"
+  },
+  "inspirations": {
+    "title": "Inspirations",
+    "favorites": "My Favorites",
+    "addToFavorites": "Add to favorites",
+    "removeFromFavorites": "Remove from favorites",
+    "new": "New"
+  },
+  "dialogs": {
+    "requestProject": "Request project creation",
+    "requestMeeting": "Request a meeting",
+    "imageDetails": "Image details",
+    "addImages": "Add images",
+    "deleteConfirm": "Are you sure you want to delete this image?",
+    "deleteWarning": "If you delete this image, it will disappear from your brief along with all the information attributed to it.",
+    "pdfTitle": "PDF title",
+    "renderTitle": "Render title",
+    "createWithDTL": "Create with Design to Light",
+    "learnMore": "Learn more",
+    "dtlDescription": "Discover the environmental score of your project..."
+  },
+  "virtualSample": {
+    "title": "Virtual sample",
+    "dynamicPresentation": "Dynamic presentation",
+    "staticView": "Static view",
+    "noContent": "Content not available for this track",
+    "selectToCompare": "Select the track you want to compare",
+    "otherTracks": "Other tracks"
+  },
+  "errors": {
+    "saveFailed": "Save failed",
+    "deleteFailed": "Delete failed",
+    "toggleProjectFailed": "Failed to show/hide project",
+    "toggleFavoriteFailed": "Failed to toggle favorite",
+    "readNotificationFailed": "Failed to read notification:",
+    "readAllNotificationsFailed": "Could not read all notifications",
+    "markNotificationFailed": "Could not mark notification as read"
+  }
+}
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@ -0,0 +1,201 @@
+{
+  "menu": {
+    "home": "Home",
+    "notifications": "Notifications",
+    "meetings": "Réunions",
+    "designToLight": "Design to Light",
+    "inspirations": "Inspirations",
+    "profile": "Profil",
+    "logout": "Déconnexion",
+    "currentProjects": "Projets en cours",
+    "archivedProjects": "Projets archivés",
+    "news": "Nouveautés",
+    "show": "Afficher le menu",
+    "hide": "Masquer le menu",
+    "newModifications": "Nouvelles modifications"
+  },
+  "steps": {
+    "clientBrief": "Brief client",
+    "proposal": "Proposition commerciale",
+    "extendedBrief": "Brief enrichi",
+    "industrialIdeation": "Idéation industrielle",
+    "virtualSample": "Échantillon virtuel",
+    "physicalSample": "Échantillon physique"
+  },
+  "dtl": {
+    "dynamicTrack": "Échantillon virtuel - piste dynamique",
+    "staticTrack": "Échantillon virtuel - piste statique",
+    "title": "Design to Light",
+    "grade": "Design to Light: {grade}",
+    "globalScore": "Note globale",
+    "positioning": "Positionnement",
+    "design": "Design",
+    "weight": "Poids",
+    "indicators": "Indicateur des composants impliqués",
+    "requestOptimization": "Demander une expertise d'optimisation",
+    "requestPending": "Demande d'expertise en cours de traitement…",
+    "initialProposal": "Proposition initiale",
+    "alternative": "Alternative {index}",
+    "proposalBasedOn": "Données basées sur la proposition"
+  },
+  "buttons": {
+    "edit": "Modifier",
+    "cancel": "Annuler",
+    "save": "Sauvegarder",
+    "delete": "Supprimer",
+    "submit": "Soumettre",
+    "retry": "Réessayer",
+    "add": "Ajouter",
+    "close": "Fermer",
+    "validate": "Valider et envoyer le brief",
+    "validateMinimum": "Ajoutez au moins une image",
+    "showPassword": "Afficher le mot de passe",
+    "hidePassword": "Masquer le mot de passe",
+    "showProject": "Afficher le projet",
+    "hideProject": "Masquer le projet",
+    "showComments": "Afficher les commentaires",
+    "hideComments": "Masquer les commentaires",
+    "backToProject": "Retour au projet",
+    "backToList": "Retour à la liste",
+    "addComment": "Ajouter un commentaire",
+    "reply": "Répondre…",
+    "seeAll": "Voir tout",
+    "deleteImage": "Supprimer cette image",
+    "downloadImage": "Télécharger l'image",
+    "downloadImages": "Télécharger les images",
+    "downloadPdf": "Télécharger le PDF",
+    "update": "Mettre à jour",
+    "requestMeeting": "Demander un RDV",
+    "markAllAsRead": "Marquer tout comme lu",
+    "loopAnimation": "Animation en boucle",
+    "stopAnimation": "Arrêter l'animation",
+    "compareTracks": "Comparer les pistes",
+    "exitCompare": "Quitter le mode comparer",
+    "addSelectedImages": "Ajouter les images sélectionnées"
+  },
+  "forms": {
+    "email": "Email",
+    "emailPlaceholder": "mail{'@'}exemple.com",
+    "password": "Mot de passe",
+    "passwordPlaceholder": "Minimum 8 caractères",
+    "newPassword": "Nouveau mot de passe",
+    "confirmPassword": "Confirmez le nouveau mot de passe…",
+    "projectName": "Nom du projet",
+    "projectDetails": "Détails du projet",
+    "projectDetailsPlaceholder": "Détails du projet…",
+    "meetingSubject": "Objet du rendez-vous",
+    "meetingDetails": "Détails du projet",
+    "meetingDetailsPlaceholder": "Décrivez votre demande…",
+    "description": "Description du projet",
+    "descriptionPlaceholder": "Ajoutez une description générale de votre projet…",
+    "imageDescription": "Description de l'image",
+    "imageDescriptionPlaceholder": "Ajoutez une description à l'image…",
+    "commentPlaceholder": "Ajouter un commentaire…",
+    "filterByTags": "Filtrer par tags",
+    "tags": "Tags",
+    "selectVariation": "Sélectionnez une déclinaison",
+    "uploadedFiles": "Fichiers importés",
+    "addImages": "Ajouter une ou plusieurs images",
+    "selectTags": "Sélectionner un ou plusieurs tags"
+  },
+  "auth": {
+    "login": "Connexion",
+    "passwordShown": "Mot de passe affiché",
+    "passwordHidden": "Mot de passe masqué",
+    "fillFields": "Veuillez remplir les champs.",
+    "inProgress": "En cours…",
+    "updateSuccess": "Mise à jour réussie",
+    "updateInProgress": "en cours…"
+  },
+  "account": {
+    "comments": "Commentaires",
+    "noClient": "Pas de client associé",
+    "managedProjects": "Projets managés",
+    "myProjects": "Mes projets",
+    "currentStep": "Étape en cours :",
+    "projectCount": "Nombre de projets",
+    "clientLogo": "logo {clientName}"
+  },
+  "brief": {
+    "addPlatform": "Ajouter un brief via la plateforme",
+    "addPdf": "Ajouter un brief PDF",
+    "projects": "Projets"
+  },
+  "comments": {
+    "title": "Commentaires",
+    "your": "Votre commentaire",
+    "new": "Nouveau commentaire",
+    "newInstruction": "Dans la zone du contenu, cliquez où vous souhaitez positionner le commentaire",
+    "reply": "réponse",
+    "replies": "réponses",
+    "edit": "Éditer",
+    "inProgress": "En cours",
+    "emptyMessage": "Partagez vos idées en ajoutant des commentaires"
+  },
+  "dates": {
+    "today": "Aujourd'hui",
+    "yesterday": "hier",
+    "updatedOn": "Dernière mise à jour le"
+  },
+  "projects": {
+    "none": "Aucun projet pour le moment",
+    "current": "Projets en cours",
+    "archived": "Projets archivés"
+  },
+  "notifications": {
+    "title": "Notifications",
+    "none": "Vous n'avez pas de nouvelles notifications",
+    "noneUnread": "Vous n'avez pas de notifications non lues",
+    "all": "Tout",
+    "unread": "Non lu",
+    "projectRequest": "Demande de création de projet",
+    "meetingRequest": "Demande de rendez-vous",
+    "content": "Contenu",
+    "draft": "(brouillon)",
+    "from": "De la part de",
+    "author": "Auteur :",
+    "goToContent": "Aller au contenu"
+  },
+  "meetings": {
+    "none": "Vous n'avez aucune réunion programmée",
+    "upcoming": "À venir",
+    "past": "Passées"
+  },
+  "inspirations": {
+    "title": "Les Inspirations",
+    "favorites": "Mes Favoris",
+    "addToFavorites": "Ajouter aux favoris",
+    "removeFromFavorites": "Retirer des favoris",
+    "new": "Nouveauté"
+  },
+  "dialogs": {
+    "requestProject": "Demander la création d'un projet",
+    "requestMeeting": "Demander un rendez-vous",
+    "imageDetails": "Détails de l'image",
+    "addImages": "Ajouter des images",
+    "deleteConfirm": "Êtes-vous sûr de vouloir supprimer cette image ?",
+    "deleteWarning": "Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi que toutes les informations qui lui sont attribuées.",
+    "pdfTitle": "Titre du PDF",
+    "renderTitle": "Titre du rendu",
+    "createWithDTL": "Créer avec Design to Light",
+    "learnMore": "En savoir plus",
+    "dtlDescription": "Découvrez la note environnementale de votre projet..."
+  },
+  "virtualSample": {
+    "title": "Échantillon virtuel",
+    "dynamicPresentation": "Présentation dynamique",
+    "staticView": "Vue statique",
+    "noContent": "Contenu non disponible pour cette piste",
+    "selectToCompare": "Sélectionnez sur la piste que vous souhaitez comparer",
+    "otherTracks": "Autres pistes"
+  },
+  "errors": {
+    "saveFailed": "Erreur lors de la sauvegarde",
+    "deleteFailed": "Erreur lors de la suppression",
+    "toggleProjectFailed": "Erreur lors du masquage/affichage du projet",
+    "toggleFavoriteFailed": "Failed to toggle favorite",
+    "readNotificationFailed": "Erreur lors de la lecture de la notification :",
+    "readAllNotificationsFailed": "Could not read all notifications",
+    "markNotificationFailed": "Could not mark notification as read"
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@ -6,12 +6,30 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Select from 'primevue/select';
 import MultiSelect from 'primevue/multiselect';
-import { router } from './router/router.js';
+import { router, setI18nLocale } from './router/router.js';
+import { createI18n } from 'vue-i18n';
+import fr from './locales/fr.json';
+import en from './locales/en.json';
+import { setI18nInstance } from './stores/locale';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'fr',
+  fallbackLocale: 'fr',
+  messages: {
+    fr,
+    en,
+  },
+});
+
+// Donner l'instance i18n au store locale pour synchronisation immédiate
+setI18nInstance(i18n);

 const app = createApp(App);
 const pinia = createPinia();

 app.use(pinia);
+app.use(i18n);
 app.use(PrimeVue, {
  unstyled: true,
 });
@ -19,4 +37,7 @@ app.use(ToastService);
 app.use(router);
 app.component('Select', Select);
 app.component('MultiSelect', MultiSelect);
+
+setI18nLocale(i18n);
+
 app.mount('#app');
--- a/Show more
+++ b/Show more