From e3fbd06e7185115eb8f94a6863c89bdf4c201760 Mon Sep 17 00:00:00 2001
From: Thomas Fransolet <tfransolet@thelis.be>
Date: Sat, 9 May 2026 00:22:28 +0200
Subject: [PATCH] Wip most of things, 95% done

---
 .gitignore                                    |   2 +
 BUGS.md                                       |  37 +-
 next.config.ts                                |   1 +
 package-lock.json                             | 384 +++++++++++++++++-
 package.json                                  |   4 +-
 .../[configId]/sections/[sectionId]/page.tsx  |  10 +-
 src/app/[slug]/page.tsx                       |  14 +-
 src/app/api/pdf/route.ts                      |  33 ++
 src/components/ConfigurationGrid.tsx          |   3 -
 src/components/FeaturedEvent.tsx              |  79 ----
 src/components/HomeHero.tsx                   | 117 ++++++
 src/components/QRScannerButton.tsx            |  27 +-
 src/components/SectionList.tsx                |  11 +-
 src/components/sections/AgendaSection.tsx     |  92 +++--
 src/components/sections/ArticleSection.tsx    |   6 +-
 src/components/sections/EventSection.tsx      |  10 +-
 src/components/sections/GameSection.tsx       |   8 +-
 src/components/sections/MapSection.tsx        |   8 +-
 src/components/sections/MenuSection.tsx       |   6 +-
 src/components/sections/PdfSection.tsx        |  15 +-
 src/components/sections/QuizSection.tsx       | 342 +++++++++++-----
 src/components/sections/SliderSection.tsx     |  15 +-
 src/components/sections/VideoSection.tsx      |   6 +-
 src/components/sections/WeatherSection.tsx    |   8 +-
 src/components/sections/WebSection.tsx        |   6 +-
 src/components/sections/game/PuzzleGame.tsx   |   3 +-
 src/components/sections/map/LeafletMap.tsx    |   2 +-
 src/components/sections/pdf/PdfViewer.tsx     |  66 +++
 src/components/ui/AppBar.tsx                  | 107 +----
 src/components/ui/LanguageSelector.tsx        |  93 +++++
 src/hooks/useBack.ts                          |  20 +
 src/lib/api/client.ts                         |  24 +-
 src/lib/api/types.ts                          |   5 +-
 src/lib/i18n.ts                               |  21 +-
 34 files changed, 1190 insertions(+), 395 deletions(-)
 create mode 100644 src/app/api/pdf/route.ts
 delete mode 100644 src/components/FeaturedEvent.tsx
 create mode 100644 src/components/HomeHero.tsx
 create mode 100644 src/components/sections/pdf/PdfViewer.tsx
 create mode 100644 src/components/ui/LanguageSelector.tsx
 create mode 100644 src/hooks/useBack.ts

diff --git a/.gitignore b/.gitignore
index 75692fe..a620e4b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates
\ No newline at end of file
diff --git a/BUGS.md b/BUGS.md
index 5f43e16..e6f0b58 100644
--- a/BUGS.md
+++ b/BUGS.md
@@ -1,34 +1,17 @@
 # Bugs & problèmes connus — visitapp-web
 
-## Sections — données non récupérées
+## Bugs fixés — suivi / actions restantes
 
-> **Fix appliqué** : le backend retourne un JSON plat (toutes les DTOs héritent de SectionDTO),
-> mais le TypeScript attendait une structure imbriquée (`section.map.points` etc.).
-> `normalizeSectionDTO()` dans `client.ts` restructure la réponse. À valider en prod.
+- [x] **manager-app — Sauvegarde section Event (500)** — `StartDate`/`EndDate` stockés comme `DateTime.MinValue` (0001-01-01), renvoyés à Flutter qui les convertissait en UTC année 0000, rejeté par Newtonsoft.Json. Fix : dates rendues nullable dans `SectionEvent` + `SectionEventDTO`, désérialisation tolérante, sanitisation côté Flutter dans `event_config.dart`.
+  - **⚠️ Migration encore à faire** : `dotnet ef migrations add MakeEventDatesNullable` dans `manager-service`
 
-- [x] **Section Carte** — fix normalization + `CategorieDTO.label` (était `name`)
-- [x] **Section Slider** — fix normalization
-- [x] **Section Menu** — fix normalization (récursif pour les sous-sections)
-- [x] **Section Quiz** — fix normalization
-- [x] **Section Agenda** — fix normalization
-- [x] **Section Météo** — fix normalization
+## À implémenter plus tard
 
-## Affichage
+- [ ] **Section Event** — page de détail à créer dans visitapp-web (type `SectionType.Event`). Dispatcher par type dans `sections/[sectionId]/page.tsx` à brancher. Voir l'équivalent Flutter dans `mymuseum-visitapp`.
 
-- [x] **Section Agenda — visuel des cartes** — liste horizontale minimaliste remplacée par une grille 2 colonnes avec image pleine largeur + badge date (calquée sur Flutter `event_list_item.dart`)
-- [x] **Section PDF** — remplacé `<iframe>` par `<embed type="application/pdf">` avec `#toolbar=0&navpanes=0` pour masquer la barre Adobe/Chrome
-- [ ] **Contrastes section detail** — les titres et le bouton "back" sont peu visibles (contraste insuffisant)
-- [x] **Bouton scanner** dans une configuration detail — ombre renforcée + anneau blanc semi-transparent pour contraster quel que soit le fond
+## À tester
 
-## Section Menu
-
-- [ ] **Images non affichées** — les images des items du menu ne s'affichent pas
-- [ ] **Clic sur un enfant → 404** — la navigation vers une sous-section du menu aboutit à une page 404
-
-## Section Quiz
-
-- [ ] **Questions non affichées** — aucune question n'apparaît dans la section Quiz
-
-## UX
-
-- [ ] **Puzzle** — l'auto-assignation des pièces manque d'aide visuelle pour l'utilisateur ; ajouter des indications / guides pour faciliter la prise en main
+- [ ] **Section Agenda — images** — sync `SyncedImageUrl` via Hangfire + vérifier que les images s'affichent bien dans les cartes (web + Flutter)
+- [ ] **Section Agenda — filtrage par langue** — vérifier que le fetch `?language=XX` retourne bien uniquement les events de la bonne langue, et que changer de langue re-fetche correctement
+- [ ] **Section Agenda — tri et events passés** — vérifier que les events sont bien triés par date et que les events passés n'apparaissent plus
+- [ ] **Flutter — langue agenda** — régénérer le client API, passer `language` dans `sectionAgendaGetUpcomingEvents`, vérifier le filtre strict (pas de fallback FR)
diff --git a/next.config.ts b/next.config.ts
index de33a8d..1659975 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  allowedDevOrigins: ['192.168.31.228'],
   reactCompiler: true,
   turbopack: {
     root: __dirname,
diff --git a/package-lock.json b/package-lock.json
index 8165a06..7dae34f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "qr-scanner": "^1.4.2",
         "react": "19.2.4",
         "react-dom": "19.2.4",
-        "react-leaflet": "^5.0.0"
+        "react-leaflet": "^5.0.0",
+        "react-pdf": "^10.4.1"
       },
       "devDependencies": {
         "@hey-api/openapi-ts": "^0.95.0",
@@ -731,6 +732,256 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+      "integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-x64": "0.1.100",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.100",
+        "@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+      "integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+      "integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+      "integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+      "integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+      "integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+      "integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+      "integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+      "integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+      "integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+      "integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+      "integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@next/env": {
       "version": "16.2.4",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.4.tgz",
@@ -1198,7 +1449,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1350,6 +1601,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -1412,7 +1672,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/default-browser": {
@@ -1465,6 +1725,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
@@ -1635,6 +1904,12 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
     "node_modules/js-yaml": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
@@ -1915,6 +2190,18 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1925,6 +2212,41 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/make-cancellable-promise": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-2.0.0.tgz",
+      "integrity": "sha512-3SEQqTpV9oqVsIWqAcmDuaNeo7yBO3tqPtqGRcKkEo0lrzD3wqbKG9mkxO65KoOgXqj+zH2phJ2LiAsdzlogSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
+      }
+    },
+    "node_modules/make-event-props": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-2.0.0.tgz",
+      "integrity": "sha512-G/hncXrl4Qt7mauJEXSg3AcdYzmpkIITTNl5I+rH9sog5Yw0kK6vseJjCaPfOXqOqQuPUP89Rkhfz5kPS8ijtw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
+    "node_modules/merge-refs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-2.0.0.tgz",
+      "integrity": "sha512-3+B21mYK2IqUWnd2EivABLT7ueDhb0b8/dGK8LoFQPrU61YITeCMn14F7y7qZafWNZhUEKb24cJdiT5Wxs3prg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -2101,6 +2423,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pdfjs-dist": {
+      "version": "5.4.296",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
+      "integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20.16.0 || >=22.3.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.80"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
@@ -2223,6 +2557,35 @@
         "react-dom": "^19.0.0"
       }
     },
+    "node_modules/react-pdf": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-10.4.1.tgz",
+      "integrity": "sha512-kS/35staVCBqS29verTQJQZXw7RfsRCPO3fdJoW1KXylcv7A9dw6DZ3vJXC2w+bIBgLw5FN4pOFvKSQtkQhPfA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "dequal": "^2.0.3",
+        "make-cancellable-promise": "^2.0.0",
+        "make-event-props": "^2.0.0",
+        "merge-refs": "^2.0.0",
+        "pdfjs-dist": "5.4.296",
+        "tiny-invariant": "^1.0.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
@@ -2400,6 +2763,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyexec": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.1.tgz",
@@ -2437,6 +2806,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index de86d76..7196d21 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev:https": "next dev --experimental-https",
     "build": "next build",
     "start": "next start"
   },
@@ -15,7 +16,8 @@
     "qr-scanner": "^1.4.2",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-leaflet": "^5.0.0"
+    "react-leaflet": "^5.0.0",
+    "react-pdf": "^10.4.1"
   },
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.95.0",
diff --git a/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx b/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx
index 81b2d41..c1c3deb 100644
--- a/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx
+++ b/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx
@@ -35,8 +35,10 @@ export default async function SectionPage({
     notFound()
   }
 
-  const section: SectionDTO | undefined = sections.find((s) => s.id === sectionId)
-  if (!section || section.isActive === false) notFound()
+  const section: SectionDTO | undefined =
+    sections.find((s) => s.id === sectionId) ??
+    sections.flatMap((s) => s.menu?.sections ?? []).find((s) => s.id === sectionId)
+if (!section || section.isActive === false) notFound()
 
   // For Map sections, eagerly load the guided paths server-side and merge into the DTO
   if (section.type === 'Map' && section.map) {
@@ -52,7 +54,7 @@ export default async function SectionPage({
   if (section.type === 'Game' && section.gameType === 'Escape') {
     try {
       const paths = await getGuidedPathsForGame(section.id, instance.publicApiKey!)
-      section.game = { ...section.game, guidedPaths: paths }
+      section.guidedPaths = paths
     } catch {
       // Silently ignore
     }
@@ -68,7 +70,7 @@ export default async function SectionPage({
     }
   }
 
-  const props = { section, slug, configId, languages: config.languages ?? ['FR'] }
+  const props = { section, slug, configId, languages: config.languages ?? ['FR'], apiKey: instance.publicApiKey! }
 
   let content: React.ReactNode
   switch (section.type) {
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
index f1e16bf..87e73a5 100644
--- a/src/app/[slug]/page.tsx
+++ b/src/app/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import { getInstanceBySlug, getConfigurations } from '@/lib/api/client'
 import { notFound } from 'next/navigation'
 import ConfigurationGrid from '@/components/ConfigurationGrid'
-import FeaturedEvent from '@/components/FeaturedEvent'
+import HomeHero from '@/components/HomeHero'
 import QRScannerButton from '@/components/QRScannerButton'
 
 export default async function HomePage({
@@ -20,15 +20,17 @@ export default async function HomePage({
   }
 
   const featuredEvent = instance.sectionEventDTO
-  // The featured event is rendered inside its parent configuration's context
-  const featuredConfigId = featuredEvent?.configurationId
-
   const languages = [...new Set(configurations.flatMap((c) => c.languages ?? []))]
 
   return (
     <>
-      {featuredEvent && featuredConfigId && (
-        <FeaturedEvent event={featuredEvent} slug={slug} configurationId={featuredConfigId} />
+      {(featuredEvent || instance.mainImageUrl) && (
+        <HomeHero
+          featuredEvent={featuredEvent ?? undefined}
+          mainImageUrl={instance.mainImageUrl}
+          slug={slug}
+          configurationId={featuredEvent?.configurationId ?? undefined}
+        />
       )}
       <ConfigurationGrid configurations={configurations} slug={slug} languages={languages} />
       <QRScannerButton slug={slug} />
diff --git a/src/app/api/pdf/route.ts b/src/app/api/pdf/route.ts
new file mode 100644
index 0000000..6a81db5
--- /dev/null
+++ b/src/app/api/pdf/route.ts
@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const ALLOWED_HOSTS = [
+  'firebasestorage.googleapis.com',
+  'storage.googleapis.com',
+]
+
+export async function GET(req: NextRequest) {
+  const url = req.nextUrl.searchParams.get('url')
+  if (!url) return new NextResponse('Missing url', { status: 400 })
+
+  let parsed: URL
+  try {
+    parsed = new URL(url)
+  } catch {
+    return new NextResponse('Invalid url', { status: 400 })
+  }
+
+  if (!ALLOWED_HOSTS.includes(parsed.hostname)) {
+    return new NextResponse('Forbidden', { status: 403 })
+  }
+
+  const res = await fetch(url)
+  if (!res.ok) return new NextResponse('Upstream error', { status: res.status })
+
+  const body = await res.arrayBuffer()
+  return new NextResponse(body, {
+    headers: {
+      'Content-Type': 'application/pdf',
+      'Cache-Control': 'public, max-age=3600',
+    },
+  })
+}
diff --git a/src/components/ConfigurationGrid.tsx b/src/components/ConfigurationGrid.tsx
index 860b816..b54467e 100644
--- a/src/components/ConfigurationGrid.tsx
+++ b/src/components/ConfigurationGrid.tsx
@@ -6,7 +6,6 @@ import Image from 'next/image'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import type { ConfigurationDTO } from '@/lib/api/types'
-import AppBar from '@/components/ui/AppBar'
 
 interface Props {
   configurations: ConfigurationDTO[]
@@ -22,8 +21,6 @@ export default function ConfigurationGrid({ configurations, slug, languages }: P
 
   return (
     <main className="min-h-screen" style={{ background: 'var(--color-background)' }}>
-      <AppBar />
-
       <div className="p-4 columns-2 gap-3">
         {active.map((config) => (
           <Link
diff --git a/src/components/FeaturedEvent.tsx b/src/components/FeaturedEvent.tsx
deleted file mode 100644
index cfa32b0..0000000
--- a/src/components/FeaturedEvent.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import Image from 'next/image'
-import { useVisitor } from '@/context/VisitorContext'
-import { t, tPlain } from '@/lib/i18n'
-import type { SectionDTO } from '@/lib/api/types'
-
-interface Props {
-  event: SectionDTO
-  slug: string
-  configurationId: string
-}
-
-function formatDateRange(start?: string, end?: string, locale: string = 'fr'): string {
-  if (!start) return ''
-  const d1 = new Date(start)
-  const d2 = end ? new Date(end) : null
-  const opt: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'short' }
-  if (!d2 || d1.toDateString() === d2.toDateString()) {
-    return d1.toLocaleDateString(locale, opt)
-  }
-  return `${d1.toLocaleDateString(locale, opt)} → ${d2.toLocaleDateString(locale, opt)}`
-}
-
-export default function FeaturedEvent({ event, slug, configurationId }: Props) {
-  const { language } = useVisitor()
-  const start = event.event?.startDate
-  const end = event.event?.endDate
-  const dateLabel = formatDateRange(start, end, language.toLowerCase())
-
-  return (
-    <Link
-      href={`/${slug}/${configurationId}/sections/${event.id}`}
-      className="block relative rounded-3xl overflow-hidden m-3"
-      style={{
-        height: 220,
-        boxShadow: '0 6px 18px rgba(0,0,0,0.25)',
-      }}
-    >
-      {event.imageSource ? (
-        <Image
-          src={event.imageSource}
-          alt={tPlain(event.title, language)}
-          fill
-          className="object-cover"
-          sizes="100vw"
-          priority
-        />
-      ) : (
-        <div className="absolute inset-0" style={{ background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))' }} />
-      )}
-      <div className="absolute inset-0" style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%)' }} />
-
-      <div
-        className="absolute top-3 left-3 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider"
-        style={{ background: 'rgba(255,255,255,0.95)', color: 'var(--color-primary)' }}
-      >
-        À la une
-      </div>
-
-      <div className="absolute bottom-3 left-4 right-4 flex flex-col gap-2">
-        {dateLabel && (
-          <span
-            className="self-start px-2.5 py-1 rounded-full text-xs font-bold"
-            style={{ background: 'var(--color-primary)', color: 'var(--color-on-primary)' }}
-          >
-            {dateLabel}
-          </span>
-        )}
-        <h2
-          className="text-white text-lg font-bold leading-tight [&_p]:m-0 line-clamp-2"
-          style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
-          dangerouslySetInnerHTML={{ __html: t(event.title, language) || 'Événement' }}
-        />
-      </div>
-    </Link>
-  )
-}
diff --git a/src/components/HomeHero.tsx b/src/components/HomeHero.tsx
new file mode 100644
index 0000000..1938218
--- /dev/null
+++ b/src/components/HomeHero.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { useVisitor } from '@/context/VisitorContext'
+import { t, tPlain } from '@/lib/i18n'
+import type { SectionDTO } from '@/lib/api/types'
+import LanguageSelector from '@/components/ui/LanguageSelector'
+
+interface Props {
+  featuredEvent?: SectionDTO
+  mainImageUrl?: string
+  slug: string
+  configurationId?: string
+}
+
+function formatDateRange(start?: string, end?: string, locale: string = 'fr'): string {
+  if (!start) return ''
+  const d1 = new Date(start)
+  const d2 = end ? new Date(end) : null
+  const opt: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'short' }
+  if (!d2 || d1.toDateString() === d2.toDateString()) {
+    return d1.toLocaleDateString(locale, opt)
+  }
+  return `${d1.toLocaleDateString(locale, opt)} → ${d2.toLocaleDateString(locale, opt)}`
+}
+
+export default function HomeHero({ featuredEvent, mainImageUrl, slug, configurationId }: Props) {
+  const { language } = useVisitor()
+  const heroRef = useRef<HTMLDivElement>(null)
+  const [opacity, setOpacity] = useState(1)
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (!heroRef.current) return
+      const heroHeight = heroRef.current.offsetHeight
+      setOpacity(Math.max(0, 1 - window.scrollY / heroHeight))
+    }
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  const imageUrl = featuredEvent?.imageSource ?? mainImageUrl
+  const isClickable = !!featuredEvent && !!configurationId
+
+  const dateLabel = formatDateRange(
+    featuredEvent?.event?.startDate,
+    featuredEvent?.event?.endDate,
+    language.toLowerCase()
+  )
+
+  const inner = (
+    <div
+      className="relative w-full overflow-hidden rounded-b-3xl"
+      style={{
+        height: '50vh',
+        minHeight: 200,
+        boxShadow: '0 4px 16px rgba(0,0,0,0.35)',
+      }}
+    >
+      {imageUrl ? (
+        <Image
+          src={imageUrl}
+          alt={featuredEvent ? tPlain(featuredEvent.title, language) : ''}
+          fill
+          className="object-cover"
+          sizes="100vw"
+          priority
+        />
+      ) : (
+        <div
+          className="absolute inset-0"
+          style={{ background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))' }}
+        />
+      )}
+
+      <div
+        className="absolute inset-0"
+        style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.08) 55%)' }}
+      />
+
+      {featuredEvent && (
+        <div className="absolute bottom-4 left-4 right-12 flex flex-col gap-2">
+          <h2
+            className="text-white text-xl font-bold leading-tight [&_p]:m-0 line-clamp-2"
+            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
+            dangerouslySetInnerHTML={{ __html: t(featuredEvent.title, language) || '' }}
+          />
+          {dateLabel && (
+            <span
+              className="self-start px-2.5 py-1 rounded-full text-xs font-bold"
+              style={{ background: 'var(--color-primary)', color: 'var(--color-on-primary)' }}
+            >
+              {dateLabel}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div ref={heroRef} style={{ opacity, position: 'relative' }}>
+      {isClickable ? (
+        <Link href={`/${slug}/${configurationId}/sections/${featuredEvent!.id}`} className="block">
+          {inner}
+        </Link>
+      ) : (
+        inner
+      )}
+      <div className="absolute top-3 right-3 z-10">
+        <LanguageSelector overlay />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/QRScannerButton.tsx b/src/components/QRScannerButton.tsx
index 5b7094d..8c21965 100644
--- a/src/components/QRScannerButton.tsx
+++ b/src/components/QRScannerButton.tsx
@@ -11,19 +11,21 @@ interface Props {
 }
 
 // Parses a QR payload and returns a navigation path within the current app, or null.
-// Accepts:
-//   https://app.myinfomate.be/{slug}
-//   https://app.myinfomate.be/{slug}/{configId}
-//   https://app.myinfomate.be/{slug}/{configId}/sections/{sectionId}
-//   /{slug}/...   (relative)
+// Flutter generates URLs as: https://web.myinfomate.be/{slug}/{configId}/{sectionId}
+// Next.js routing expects:                              /{slug}/{configId}/sections/{sectionId}
 function parseQrToPath(payload: string): string | null {
   try {
-    const m = payload.match(/(?:https?:\/\/[^/]+)?(\/[A-Za-z0-9_-]+(?:\/[A-Za-z0-9_-]+)*(?:\/sections\/[A-Za-z0-9_-]+)?)/)
-    if (m && m[1]) return m[1]
+    const m = payload.match(/(?:https?:\/\/[^/]+)?(\/[A-Za-z0-9_-]+(?:\/[A-Za-z0-9_-]+)*)/)
+    if (!m?.[1]) return null
+    const parts = m[1].split('/').filter(Boolean)
+    // 3 segments without "sections" = Flutter format → rewrite to Next.js route
+    if (parts.length === 3 && parts[1] !== 'sections') {
+      return `/${parts[0]}/${parts[1]}/sections/${parts[2]}`
+    }
+    return m[1]
   } catch {
-    // ignore
+    return null
   }
-  return null
 }
 
 export default function QRScannerButton({ slug, configurationId }: Props) {
@@ -47,7 +49,12 @@ export default function QRScannerButton({ slug, configurationId }: Props) {
           videoRef.current,
           (result) => {
             const payload = typeof result === 'string' ? result : result.data
-            const path = parseQrToPath(payload)
+            let path = parseQrToPath(payload)
+            // QR codes from Flutter encode the instanceId (ObjectId), not the webSlug.
+            // Replace it with the known slug so Next.js routing resolves correctly.
+            if (path && instanceId) {
+              path = path.replace(new RegExp(`^/${instanceId}/`), `/${slug}/`)
+            }
             if (instanceId) {
               trackEvent({
                 instanceId,
diff --git a/src/components/SectionList.tsx b/src/components/SectionList.tsx
index 69cc14e..8778edc 100644
--- a/src/components/SectionList.tsx
+++ b/src/components/SectionList.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain, stripHtml } from '@/lib/i18n'
 import type { SectionDTO, TranslationDTO } from '@/lib/api/types'
@@ -22,7 +22,7 @@ export default function SectionList({
   sections, slug, configId, configTitle, configImageSource, configPrimaryColor, languages,
 }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
   const [search, setSearch] = useState('')
   const [searchNumber, setSearchNumber] = useState('')
 
@@ -51,11 +51,12 @@ export default function SectionList({
         )}
         {/* Back button */}
         <button
-          onClick={() => router.back()}
+          onClick={back}
           className="absolute flex items-center justify-center"
           style={{
-            top: 44, left: 10, width: 50, height: 50,
-            background: primaryColor,
+            top: 44, left: 10, width: 44, height: 44,
+            background: 'rgba(0,0,0,0.35)',
+            backdropFilter: 'blur(8px)',
             borderRadius: '50%',
           }}
         >
diff --git a/src/components/sections/AgendaSection.tsx b/src/components/sections/AgendaSection.tsx
index c872d98..78ce819 100644
--- a/src/components/sections/AgendaSection.tsx
+++ b/src/components/sections/AgendaSection.tsx
@@ -3,12 +3,13 @@
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
-import { t, tPlain } from '@/lib/i18n'
+import { t, tPlain, ui } from '@/lib/i18n'
 import type { SectionDTO, EventAgendaDTO } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
 import { trackEvent } from '@/lib/stats'
+import { getAgendaEvents } from '@/lib/api/client'
 
 const EventMiniMap = dynamic(() => import('./agenda/EventMiniMap'), {
   ssr: false,
@@ -24,6 +25,7 @@ interface Props {
   slug: string
   configId: string
   languages: string[]
+  apiKey: string
 }
 
 function formatMonthHeader(year: number, month: number, lang: string): string {
@@ -60,25 +62,29 @@ function youtubeEmbedUrl(idOrUrl: string): string {
   return `https://www.youtube.com/embed/${idOrUrl}`
 }
 
-export default function AgendaSection({ section, configId, languages }: Props) {
+export default function AgendaSection({ section, configId, languages, apiKey }: Props) {
   const { language, setAvailableLanguages, instanceId } = useVisitor()
-  const router = useRouter()
-  const events = section.agenda?.events ?? []
+  const back = useBack()
+  const [events, setEvents] = useState<EventAgendaDTO[]>([])
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
+  useEffect(() => {
+    getAgendaEvents(section.id, language, apiKey).then(setEvents).catch(() => setEvents([]))
+  }, [section.id, language, apiKey])
+
   const now = new Date()
   const [selectedMonth, setSelectedMonth] = useState(now.getMonth())
   const [selectedYear, setSelectedYear] = useState(now.getFullYear())
   const [selected, setSelected] = useState<EventAgendaDTO | null>(null)
 
-  useEffect(() => { console.log('[Agenda] events:', events.map(e => ({ id: e.id, label: e.label, resourceId: e.resourceId, resource: e.resource }))) }, [events])
-
-  const filtered = events.filter((e) => {
-    if (!e.dateFrom) return false
-    const d = new Date(e.dateFrom)
-    return d.getMonth() === selectedMonth && d.getFullYear() === selectedYear
-  })
+  const filtered = events
+    .filter((e) => {
+      if (!e.dateFrom) return false
+      const d = new Date(e.dateFrom)
+      return d.getMonth() === selectedMonth && d.getFullYear() === selectedYear
+    })
+    .sort((a, b) => new Date(a.dateFrom!).getTime() - new Date(b.dateFrom!).getTime())
 
   function prevMonth() {
     if (selectedMonth === 0) { setSelectedMonth(11); setSelectedYear(y => y - 1) }
@@ -91,7 +97,7 @@ export default function AgendaSection({ section, configId, languages }: Props) {
 
   return (
     <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
-      <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+      <AppBar title={tPlain(section.title, language)} onBack={back} />
 
       {/* Month selector */}
       <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--color-border)' }}>
@@ -114,7 +120,7 @@ export default function AgendaSection({ section, configId, languages }: Props) {
       <main className="flex-1 overflow-y-auto p-3">
         {filtered.length === 0 ? (
           <p className="text-center py-12 text-sm" style={{ color: 'var(--color-text-muted)' }}>
-            Aucun événement ce mois-ci
+            {ui('noEventsThisMonth', language)}
           </p>
         ) : (
           <div className="grid grid-cols-2 gap-3">
@@ -189,6 +195,11 @@ function EventDetail({
   language: string
   onClose: () => void
 }) {
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    return () => { document.body.style.overflow = '' }
+  }, [])
+
   const img = eventImage(event)
   const coords = eventCoords(event)
   const address = fullAddress(event)
@@ -197,24 +208,55 @@ function EventDetail({
   const videoResource = event.videoResource?.url
 
   return (
-    <div className="fixed inset-0 z-50 flex flex-col" style={{ background: 'var(--color-background)' }}>
-      <AppBar title={tPlain(event.label, language)} onBack={onClose} />
-      <div className="flex-1 overflow-y-auto">
+    <div className="fixed inset-0 z-50" style={{ background: 'var(--color-background)' }}>
+      <div className="h-full overflow-y-auto">
+        <AppBar title={img ? '' : tPlain(event.label, language)} onBack={onClose} overlay={!!img} />
         {img && (
-          <div className="relative w-full" style={{ height: 220 }}>
+          <div className="relative w-full" style={{ height: 300, marginTop: -56 }}>
             <Image src={img} alt="" fill className="object-cover" sizes="100vw" />
+            <div
+              className="absolute inset-0"
+              style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 45%, transparent 55%, rgba(0,0,0,0.55) 100%)' }}
+            />
+            <div className="absolute bottom-0 left-0 right-0 px-5 pb-5">
+              <h1 className="text-2xl font-bold text-white" style={{ textShadow: '0 2px 10px rgba(0,0,0,0.7)' }}>
+                {tPlain(event.label, language)}
+              </h1>
+            </div>
           </div>
         )}
-        <div className="p-4 flex flex-col gap-4">
+        <div className="p-5 flex flex-col gap-6">
+          {!img && (
+            <h1 className="text-xl font-bold" style={{ color: 'var(--color-text)' }}>
+              {tPlain(event.label, language)}
+            </h1>
+          )}
           {event.dateFrom && (
             <div
-              className="self-start px-3 py-1.5 rounded-full text-xs font-bold"
-              style={{ background: 'var(--color-primary-light)', color: 'var(--color-primary)' }}
+              className="flex items-center gap-3 p-3 rounded-xl"
+              style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}
             >
-              {new Date(event.dateFrom).toLocaleDateString(language.toLowerCase(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
-              {event.dateTo && event.dateTo !== event.dateFrom && (
-                <> → {new Date(event.dateTo).toLocaleDateString(language.toLowerCase(), { day: 'numeric', month: 'long' })}</>
-              )}
+              <div
+                className="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center"
+                style={{ background: 'var(--color-primary-light)' }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--color-primary)' }}>
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                  <line x1="16" y1="2" x2="16" y2="6" />
+                  <line x1="8" y1="2" x2="8" y2="6" />
+                  <line x1="3" y1="10" x2="21" y2="10" />
+                </svg>
+              </div>
+              <div>
+                <div className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
+                  {new Date(event.dateFrom).toLocaleDateString(language.toLowerCase(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
+                </div>
+                {event.dateTo && event.dateTo !== event.dateFrom && (
+                  <div className="text-xs mt-0.5" style={{ color: 'var(--color-text-muted)' }}>
+                    → {new Date(event.dateTo).toLocaleDateString(language.toLowerCase(), { day: 'numeric', month: 'long', year: 'numeric' })}
+                  </div>
+                )}
+              </div>
             </div>
           )}
 
diff --git a/src/components/sections/ArticleSection.tsx b/src/components/sections/ArticleSection.tsx
index f53ee45..35a6213 100644
--- a/src/components/sections/ArticleSection.tsx
+++ b/src/components/sections/ArticleSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import ResourceViewer from '@/components/ui/ResourceViewer'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
@@ -18,7 +18,7 @@ interface Props {
 
 export default function ArticleSection({ section, configId, languages }: Props) {
   const { language, setAvailableLanguages, instanceId } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
   const article = section.article
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
@@ -70,7 +70,7 @@ export default function ArticleSection({ section, configId, languages }: Props)
 
   return (
     <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
-      <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+      <AppBar title={tPlain(section.title, language)} onBack={back} />
 
       <main ref={scrollRef} className="flex-1 overflow-y-auto pb-24">
         {/* Carousel images */}
diff --git a/src/components/sections/EventSection.tsx b/src/components/sections/EventSection.tsx
index 70b4586..25c8bf2 100644
--- a/src/components/sections/EventSection.tsx
+++ b/src/components/sections/EventSection.tsx
@@ -2,9 +2,11 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import dynamic from 'next/dynamic'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
+import LanguageSelector from '@/components/ui/LanguageSelector'
 import type { SectionDTO, ProgrammeBlock, MapAnnotationDTO, GuidedPathDTO } from '@/lib/api/types'
 
 const EventMap = dynamic(() => import('./event/EventMap'), {
@@ -42,8 +44,9 @@ function formatTime(iso?: string): string {
 export default function EventSection({ section, slug, configId, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
   const router = useRouter()
+  const back = useBack()
 
-  useEffect(() => { setAvailableLanguages([]) }, [languages])
+  useEffect(() => { setAvailableLanguages(languages) }, [languages])
 
   const event = section.event
   const programme = useMemo(
@@ -102,9 +105,9 @@ export default function EventSection({ section, slug, configId, languages }: Pro
         )}
         <div className="absolute inset-0" style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.7) 100%)' }} />
 
-        <div className="relative z-10 flex items-center px-3 py-3" style={{ paddingTop: 'max(env(safe-area-inset-top), 12px)' }}>
+        <div className="relative z-10 flex items-center justify-between px-3 py-3" style={{ paddingTop: 'max(env(safe-area-inset-top), 12px)' }}>
           <button
-            onClick={() => router.back()}
+            onClick={back}
             className="w-10 h-10 rounded-full flex items-center justify-center"
             style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)' }}
             aria-label="Retour"
@@ -113,6 +116,7 @@ export default function EventSection({ section, slug, configId, languages }: Pro
               <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
             </svg>
           </button>
+          <LanguageSelector overlay />
         </div>
 
         <div className="absolute bottom-5 left-5 right-5 flex flex-col gap-2">
diff --git a/src/components/sections/GameSection.tsx b/src/components/sections/GameSection.tsx
index 968ba1b..90f5b73 100644
--- a/src/components/sections/GameSection.tsx
+++ b/src/components/sections/GameSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import type { SectionDTO, TranslationDTO } from '@/lib/api/types'
@@ -30,7 +30,7 @@ function detectKind(raw?: string): GameKind {
 
 export default function GameSection({ section, configId, languages }: Props) {
   const { language, setAvailableLanguages, instanceId } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
@@ -93,7 +93,7 @@ export default function GameSection({ section, configId, languages }: Props) {
 
         <div className="relative z-10 flex items-center gap-2 px-3 py-3" style={{ paddingTop: 'max(env(safe-area-inset-top), 12px)' }}>
           <button
-            onClick={() => router.back()}
+            onClick={back}
             className="w-10 h-10 rounded-full flex items-center justify-center"
             style={{ background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(8px)' }}
             aria-label="Retour"
@@ -216,7 +216,7 @@ export default function GameSection({ section, configId, languages }: Props) {
         }
         onClose={restart}
         primaryAction={{ label: 'Recommencer', onClick: restart }}
-        secondaryAction={{ label: 'Retour', onClick: () => router.back() }}
+        secondaryAction={{ label: 'Retour', onClick: back }}
       />
     </div>
   )
diff --git a/src/components/sections/MapSection.tsx b/src/components/sections/MapSection.tsx
index 8c461d3..6d09922 100644
--- a/src/components/sections/MapSection.tsx
+++ b/src/components/sections/MapSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import dynamic from 'next/dynamic'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
@@ -34,7 +34,7 @@ type Mode = 'map' | 'list'
 
 export default function MapSection({ section, configId, languages }: Props) {
   const { language, setAvailableLanguages, instanceId } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
@@ -186,7 +186,7 @@ export default function MapSection({ section, configId, languages }: Props) {
           className="absolute top-0 left-0 right-0 flex items-center gap-2 px-3 py-2 z-[1000]"
           style={{ background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))', color: 'var(--color-on-primary)' }}
         >
-          <button onClick={() => router.back()} className="w-10 h-10 rounded-full flex items-center justify-center" aria-label="Retour">
+          <button onClick={back} className="w-10 h-10 rounded-full flex items-center justify-center" aria-label="Retour">
             <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
               <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
             </svg>
@@ -247,7 +247,7 @@ export default function MapSection({ section, configId, languages }: Props) {
         }}
       >
         <button
-          onClick={() => router.back()}
+          onClick={back}
           className="w-10 h-10 rounded-full flex items-center justify-center"
           style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)' }}
           aria-label="Retour"
diff --git a/src/components/sections/MenuSection.tsx b/src/components/sections/MenuSection.tsx
index 0a0f515..1f7a0d6 100644
--- a/src/components/sections/MenuSection.tsx
+++ b/src/components/sections/MenuSection.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import type { SectionDTO } from '@/lib/api/types'
@@ -19,7 +19,7 @@ interface Props {
 
 export default function MenuSection({ section, slug, configId, languages }: Props) {
   const { language, setAvailableLanguages, instanceId } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
   const [search, setSearch] = useState('')
 
   function handleItemClick(sub: SectionDTO) {
@@ -45,7 +45,7 @@ export default function MenuSection({ section, slug, configId, languages }: Prop
 
   return (
     <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
-      <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+      <AppBar title={tPlain(section.title, language)} onBack={back} />
 
       {/* Search */}
       <div className="px-4 pt-3 pb-2">
diff --git a/src/components/sections/PdfSection.tsx b/src/components/sections/PdfSection.tsx
index 8e36034..1503e32 100644
--- a/src/components/sections/PdfSection.tsx
+++ b/src/components/sections/PdfSection.tsx
@@ -1,12 +1,15 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import dynamic from 'next/dynamic'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { tPlain } from '@/lib/i18n'
 import type { SectionDTO, OrderedTranslationAndResourceDTO } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
 
+const PdfViewer = dynamic(() => import('./pdf/PdfViewer'), { ssr: false })
+
 interface Props {
   section: SectionDTO
   slug: string
@@ -16,7 +19,7 @@ interface Props {
 
 export default function PdfSection({ section, slug, configId, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
@@ -35,7 +38,7 @@ export default function PdfSection({ section, slug, configId, languages }: Props
 
   return (
     <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--color-background)' }}>
-      <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+      <AppBar title={tPlain(section.title, language)} onBack={back} />
 
       {pdfs.length > 1 && (
         <div className="flex gap-2 px-4 py-2 overflow-x-auto shrink-0">
@@ -62,11 +65,7 @@ export default function PdfSection({ section, slug, configId, languages }: Props
             Aucun PDF à afficher
           </div>
         ) : (
-          <embed
-            src={`${currentUrl}#toolbar=0&navpanes=0`}
-            type="application/pdf"
-            style={{ width: '100%', height: '100%', display: 'block' }}
-          />
+          <PdfViewer url={currentUrl} />
         )}
       </div>
     </div>
diff --git a/src/components/sections/QuizSection.tsx b/src/components/sections/QuizSection.tsx
index 43d9e62..3df6348 100644
--- a/src/components/sections/QuizSection.tsx
+++ b/src/components/sections/QuizSection.tsx
@@ -1,12 +1,14 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
+import Image from 'next/image'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import { trackEvent } from '@/lib/stats'
-import type { SectionDTO, QuestionDTO } from '@/lib/api/types'
+import type { SectionDTO, TranslationAndResourceDTO, ResourceDTO } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
+import ResourceViewer from '@/components/ui/ResourceViewer'
 
 interface Props {
   section: SectionDTO
@@ -17,9 +19,24 @@ interface Props {
 
 type Phase = 'quiz' | 'result' | 'review'
 
+function isAudio(r: ResourceDTO) {
+  const t = r.type as string | number | undefined
+  return t === 'Audio' || t === 4
+}
+
+function isVideo(r: ResourceDTO) {
+  const t = r.type as string | number | undefined
+  return t === 'Video' || t === 'VideoUrl' || t === 1 || t === 3
+}
+
+function isImage(r: ResourceDTO) {
+  const t = r.type as string | number | undefined
+  return t === 'Image' || t === 'ImageUrl' || t === 0 || t === 2
+}
+
 export default function QuizSection({ section, configId, languages }: Props) {
   const { language, setAvailableLanguages, instanceId } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
@@ -29,12 +46,13 @@ export default function QuizSection({ section, configId, languages }: Props) {
   const [phase, setPhase] = useState<Phase>('quiz')
   const [currentIndex, setCurrentIndex] = useState(0)
   const [answers, setAnswers] = useState<Record<number, number>>({})
+  const [modalResource, setModalResource] = useState<ResourceDTO | null>(null)
   const trackedRef = useRef(false)
 
   if (questions.length === 0) {
     return (
       <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
-        <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+        <AppBar title={tPlain(section.title, language)} onBack={back} />
         <div className="flex-1 flex items-center justify-center text-sm p-8 text-center" style={{ color: 'var(--color-text-muted)' }}>
           Aucune question disponible.
         </div>
@@ -89,9 +107,8 @@ export default function QuizSection({ section, configId, languages }: Props) {
     const levelText = t(getLevel(), language)
     return (
       <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
-        <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+        <AppBar title={tPlain(section.title, language)} onBack={back} />
         <div className="flex-1 flex flex-col items-center justify-center p-6 gap-6">
-          {/* Score */}
           <div
             className="flex flex-col items-center justify-center rounded-full"
             style={{
@@ -108,7 +125,6 @@ export default function QuizSection({ section, configId, languages }: Props) {
             </span>
           </div>
 
-          {/* Level text */}
           {levelText && (
             <div
               className="w-full rounded-2xl px-5 py-4 text-sm text-center [&_p]:m-0"
@@ -121,7 +137,6 @@ export default function QuizSection({ section, configId, languages }: Props) {
             />
           )}
 
-          {/* Buttons */}
           <div className="flex flex-col gap-3 w-full">
             <button
               onClick={restart}
@@ -155,106 +170,238 @@ export default function QuizSection({ section, configId, languages }: Props) {
   const canGoNext = isReview || chosen !== undefined
   const isLast = currentIndex === totalQuestions - 1
 
+  const questionEntry = getLabelEntry(question.label, language)
+  const questionText = questionEntry?.value ?? ''
+  const questionResource = questionEntry?.resource
+
   return (
-    <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
-      <AppBar
-        title={isReview ? tPlain(section.title, language) : undefined}
-        onBack={isReview ? () => { setCurrentIndex(0); setPhase('result') } : () => router.back()}
-      />
+    <>
+      <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
+        <AppBar
+          title={isReview ? tPlain(section.title, language) : undefined}
+          onBack={isReview ? () => { setCurrentIndex(0); setPhase('result') } : back}
+        />
 
-      {/* Question card */}
-      <div className="flex-1 flex flex-col relative overflow-hidden">
-        {/* Background image */}
-        {question.imageBackgroundResourceUrl && (
-          <div
-            className="absolute inset-0"
-            style={{
-              backgroundImage: `url(${question.imageBackgroundResourceUrl})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              opacity: 0.35,
-            }}
-          />
-        )}
+        <div className="flex-1 flex flex-col relative overflow-hidden">
+          {/* Background image */}
+          {question.imageBackgroundResourceUrl && (
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundImage: `url(${question.imageBackgroundResourceUrl})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                opacity: 0.35,
+              }}
+            />
+          )}
 
-        <div className="relative z-10 flex flex-col h-full p-4 gap-3">
-          {/* Question text */}
-          <div
-            className="rounded-2xl px-4 py-4 text-sm font-medium text-center [&_p]:m-0"
-            style={{
-              background: 'white',
-              color: '#1a1a1a',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
-              minHeight: 80,
-            }}
-            dangerouslySetInnerHTML={{ __html: t(question.label, language) }}
-          />
-
-          {/* Answer buttons */}
-          <div className="flex flex-col gap-2 flex-1">
-            {sortedResponses.map((response, i) => {
-              const isSelected = chosen === i
-              const bg = getAnswerBg(isReview, isSelected, response.isCorrect)
-              const textColor = isSelected || (isReview && response.isCorrect) ? 'white' : '#1a1a1a'
-
-              return (
+          <div className="relative z-10 flex flex-col h-full p-4 gap-3">
+            {/* Question media */}
+            {questionResource?.url && (
+              isAudio(questionResource) ? (
+                <div style={{ background: 'white', borderRadius: 12, padding: '12px 16px', boxShadow: '0 2px 8px rgba(0,0,0,0.08)' }}>
+                  <audio controls src={questionResource.url} style={{ width: '100%' }} />
+                </div>
+              ) : isVideo(questionResource) ? (
                 <button
-                  key={response.id}
-                  onClick={() => !isReview && chosen === undefined && selectAnswer(currentIndex, i)}
-                  className="w-full rounded-2xl px-4 py-3 text-sm font-medium text-left [&_p]:m-0 transition-colors"
-                  style={{
-                    background: bg,
-                    color: textColor,
-                    boxShadow: '0 1px 4px rgba(0,0,0,0.1)',
-                    cursor: isReview || chosen !== undefined ? 'default' : 'pointer',
-                    minHeight: 52,
-                  }}
-                  dangerouslySetInnerHTML={{ __html: t(response.label, language) }}
-                />
+                  onClick={() => setModalResource(questionResource)}
+                  style={{ height: 160, borderRadius: 12, overflow: 'hidden', border: 'none', cursor: 'pointer', flexShrink: 0, padding: 0, display: 'block', width: '100%' }}
+                >
+                  <VideoPreview resource={questionResource} height={160} playSize={52} />
+                </button>
+              ) : (
+                <button
+                  onClick={() => setModalResource(questionResource)}
+                  style={{ position: 'relative', height: 160, borderRadius: 12, overflow: 'hidden', border: 'none', cursor: 'pointer', flexShrink: 0 }}
+                >
+                  <Image src={questionResource.url} alt="" fill className="object-contain" sizes="100vw" />
+                  <div style={{ position: 'absolute', bottom: 8, right: 8, background: 'rgba(0,0,0,0.45)', borderRadius: 8, padding: '3px 7px', backdropFilter: 'blur(4px)' }}>
+                    <ZoomIcon />
+                  </div>
+                </button>
               )
-            })}
-          </div>
+            )}
 
-          {/* Counter + navigation */}
-          <div className="flex items-center justify-between pt-1">
-            <button
-              onClick={() => currentIndex > 0 && setCurrentIndex(currentIndex - 1)}
-              disabled={currentIndex === 0}
-              className="w-10 h-10 rounded-full flex items-center justify-center transition-opacity"
-              style={{
-                background: 'var(--color-primary)',
-                opacity: currentIndex === 0 ? 0.3 : 1,
-              }}
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-              </svg>
-            </button>
+            {/* Question text */}
+            {questionText && (
+              <div
+                className="rounded-2xl px-4 py-4 text-sm font-medium text-center [&_p]:m-0"
+                style={{
+                  background: 'white',
+                  color: '#1a1a1a',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
+                  minHeight: 72,
+                }}
+                dangerouslySetInnerHTML={{ __html: questionText }}
+              />
+            )}
 
-            <span className="text-2xl font-bold" style={{ color: 'var(--color-text)' }}>
-              {currentIndex + 1}/{totalQuestions}
-            </span>
+            {/* Answer buttons */}
+            <div className="flex flex-col gap-2 flex-1">
+              {sortedResponses.map((response, i) => {
+                const isSelected = chosen === i
+                const bg = getAnswerBg(isReview, isSelected, response.isCorrect)
+                const textColor = isSelected || (isReview && response.isCorrect) ? 'white' : '#1a1a1a'
+                const responseEntry = getLabelEntry(response.label, language)
+                const responseText = responseEntry?.value ?? ''
+                const responseResource = responseEntry?.resource
 
-            <button
-              onClick={() => canGoNext && !isLast && setCurrentIndex(currentIndex + 1)}
-              disabled={!canGoNext || isLast}
-              className="w-10 h-10 rounded-full flex items-center justify-center transition-opacity"
-              style={{
-                background: 'var(--color-primary)',
-                opacity: !canGoNext || isLast ? 0.3 : 1,
-              }}
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-              </svg>
-            </button>
+                return (
+                  <button
+                    key={response.id ?? i}
+                    onClick={() => !isReview && chosen === undefined && selectAnswer(currentIndex, i)}
+                    className="w-full rounded-2xl px-4 py-3 text-sm font-medium text-left [&_p]:m-0 transition-colors"
+                    style={{
+                      background: bg,
+                      color: textColor,
+                      boxShadow: '0 1px 4px rgba(0,0,0,0.1)',
+                      cursor: isReview || chosen !== undefined ? 'default' : 'pointer',
+                      minHeight: 52,
+                    }}
+                  >
+                    {responseResource?.url && (
+                      isAudio(responseResource) ? (
+                        <div
+                          onClick={(e) => e.stopPropagation()}
+                          style={{ marginBottom: responseText ? 8 : 0 }}
+                        >
+                          <audio controls src={responseResource.url} style={{ width: '100%' }} />
+                        </div>
+                      ) : isVideo(responseResource) ? (
+                        <div
+                          onClick={(e) => { e.stopPropagation(); setModalResource(responseResource) }}
+                          style={{ height: 90, borderRadius: 8, overflow: 'hidden', marginBottom: responseText ? 8 : 0, cursor: 'pointer' }}
+                        >
+                          <VideoPreview resource={responseResource} height={90} playSize={38} />
+                        </div>
+                      ) : (
+                        <div
+                          onClick={(e) => { e.stopPropagation(); setModalResource(responseResource) }}
+                          style={{ position: 'relative', height: 80, borderRadius: 8, overflow: 'hidden', marginBottom: responseText ? 8 : 0, cursor: 'pointer' }}
+                        >
+                          <Image src={responseResource.url} alt="" fill className="object-contain" sizes="100vw" />
+                        </div>
+                      )
+                    )}
+                    {responseText && (
+                      <div dangerouslySetInnerHTML={{ __html: responseText }} />
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* Counter + navigation */}
+            <div className="flex items-center justify-between pt-1">
+              <button
+                onClick={() => currentIndex > 0 && setCurrentIndex(currentIndex - 1)}
+                disabled={currentIndex === 0}
+                className="w-10 h-10 rounded-full flex items-center justify-center transition-opacity"
+                style={{ background: 'var(--color-primary)', opacity: currentIndex === 0 ? 0.3 : 1 }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                </svg>
+              </button>
+
+              <span className="text-2xl font-bold" style={{ color: 'var(--color-text)' }}>
+                {currentIndex + 1}/{totalQuestions}
+              </span>
+
+              <button
+                onClick={() => canGoNext && !isLast && setCurrentIndex(currentIndex + 1)}
+                disabled={!canGoNext || isLast}
+                className="w-10 h-10 rounded-full flex items-center justify-center transition-opacity"
+                style={{ background: 'var(--color-primary)', opacity: !canGoNext || isLast ? 0.3 : 1 }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                </svg>
+              </button>
+            </div>
+
+            {/* Restart button (review only) */}
+            {isReview && (
+              <button
+                onClick={restart}
+                className="w-full py-3 rounded-2xl font-semibold text-sm"
+                style={{ background: 'var(--color-primary)', color: 'var(--color-on-primary)' }}
+              >
+                Recommencer
+              </button>
+            )}
           </div>
         </div>
       </div>
+
+      {/* Media modal */}
+      {modalResource && (
+        <div
+          style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(0,0,0,0.93)', display: 'flex', flexDirection: 'column' }}
+          onClick={() => setModalResource(null)}
+        >
+          <div style={{ display: 'flex', justifyContent: 'flex-end', padding: 16, flexShrink: 0 }}>
+            <button
+              onClick={() => setModalResource(null)}
+              style={{ width: 40, height: 40, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.15)', color: 'white', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+              </svg>
+            </button>
+          </div>
+          <div
+            style={{ flex: 1, minHeight: 0, position: 'relative' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <ResourceViewer resource={modalResource} objectFit="contain" />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+function youtubeThumbnail(url: string): string | null {
+  const match = url.match(/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/)
+  return match?.[1] ? `https://img.youtube.com/vi/${match[1]}/mqdefault.jpg` : null
+}
+
+function VideoPreview({ resource, height, playSize }: { resource: ResourceDTO; height: number; playSize: number }) {
+  const thumbnail = resource.url ? youtubeThumbnail(resource.url) : null
+  return (
+    <div style={{ position: 'relative', width: '100%', height, background: thumbnail ? '#000' : 'linear-gradient(135deg, #1c1c2e 0%, #2d2d44 100%)' }}>
+      {thumbnail && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={thumbnail} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />
+      )}
+      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.32)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <PlayIcon size={playSize} />
+      </div>
     </div>
   )
 }
 
+function PlayIcon({ size = 48 }: { size?: number }) {
+  const r = size / 2
+  return (
+    <div style={{ width: size, height: size, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid rgba(255,255,255,0.4)' }}>
+      <svg width={r} height={r} viewBox="0 0 24 24" fill="white">
+        <path d="M8 5v14l11-7z"/>
+      </svg>
+    </div>
+  )
+}
+
+function ZoomIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="white">
+      <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    </svg>
+  )
+}
+
 function getAnswerBg(isReview: boolean, isSelected: boolean, isCorrect?: boolean): string {
   if (!isReview) {
     return isSelected ? 'var(--color-primary)' : 'white'
@@ -263,3 +410,12 @@ function getAnswerBg(isReview: boolean, isSelected: boolean, isCorrect?: boolean
   if (isSelected) return '#f44336'
   return '#f5f5f5'
 }
+
+function getLabelEntry(labels: TranslationAndResourceDTO[] | undefined, lang: string) {
+  if (!labels || labels.length === 0) return null
+  return (
+    labels.find((l) => l.language === lang) ??
+    labels.find((l) => l.language === 'FR') ??
+    labels[0]
+  )
+}
diff --git a/src/components/sections/SliderSection.tsx b/src/components/sections/SliderSection.tsx
index 279f249..45902a3 100644
--- a/src/components/sections/SliderSection.tsx
+++ b/src/components/sections/SliderSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import type { SectionDTO } from '@/lib/api/types'
@@ -17,7 +17,7 @@ interface Props {
 
 export default function SliderSection({ section, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
   const [index, setIndex] = useState(0)
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
@@ -28,21 +28,24 @@ export default function SliderSection({ section, languages }: Props) {
   if (contents.length === 0) {
     return (
       <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--color-background)' }}>
-        <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+        <AppBar title={tPlain(section.title, language)} onBack={back} />
         <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: 'var(--color-text-muted)' }}>
           Aucun contenu à afficher
         </div>
       </div>
     )
+
   }
 
   const current = contents[index]
 
   return (
-    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--color-background)' }}>
-      <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+    <div style={{ position: 'fixed', inset: 0, background: 'var(--color-background)' }}>
+      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
+        <AppBar title={tPlain(section.title, language)} onBack={back} overlay />
+      </div>
 
-      <main style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <main style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
         {/* Image zone — ~75% of remaining height */}
         <div style={{ flex: 3, minHeight: 0, position: 'relative' }}>
           {current?.resource && (
diff --git a/src/components/sections/VideoSection.tsx b/src/components/sections/VideoSection.tsx
index 0d5f2b1..8e0947b 100644
--- a/src/components/sections/VideoSection.tsx
+++ b/src/components/sections/VideoSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { tPlain } from '@/lib/i18n'
 import type { SectionDTO } from '@/lib/api/types'
@@ -36,7 +36,7 @@ function vimeoEmbedUrl(url: string): string {
 
 export default function VideoSection({ section, slug, configId, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
@@ -55,7 +55,7 @@ export default function VideoSection({ section, slug, configId, languages }: Pro
         }}
       >
         <button
-          onClick={() => router.back()}
+          onClick={back}
           style={{
             width: 36, height: 36, borderRadius: '50%',
             background: 'rgba(255,255,255,0.15)',
diff --git a/src/components/sections/WeatherSection.tsx b/src/components/sections/WeatherSection.tsx
index 11eb418..088c5e3 100644
--- a/src/components/sections/WeatherSection.tsx
+++ b/src/components/sections/WeatherSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { tPlain } from '@/lib/i18n'
 import type { SectionDTO, WeatherData, WeatherForecast } from '@/lib/api/types'
@@ -220,7 +220,7 @@ function TempChart({ forecasts }: { forecasts: WeatherForecast[] }) {
 
 export default function WeatherSection({ section, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
   const [selectedDay, setSelectedDay] = useState(0)
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
@@ -237,7 +237,7 @@ export default function WeatherSection({ section, languages }: Props) {
   if (!weatherData || days.length === 0) {
     return (
       <div className="h-dvh flex flex-col" style={{ background: 'var(--color-background)' }}>
-        <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+        <AppBar title={tPlain(section.title, language)} onBack={back} />
         <div className="flex-1 flex items-center justify-center text-sm" style={{ color: 'var(--color-text-muted)' }}>
           Aucune donnée météo
         </div>
@@ -252,7 +252,7 @@ export default function WeatherSection({ section, languages }: Props) {
 
   return (
     <div className="h-dvh flex flex-col overflow-hidden" style={{ background: '#E8F4FD' }}>
-      <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
+      <AppBar title={tPlain(section.title, language)} onBack={back} />
 
       <main className="flex-1 flex flex-col overflow-y-auto pb-6 gap-3 pt-3">
 
diff --git a/src/components/sections/WebSection.tsx b/src/components/sections/WebSection.tsx
index b60215f..9572c48 100644
--- a/src/components/sections/WebSection.tsx
+++ b/src/components/sections/WebSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
+import { useBack } from '@/hooks/useBack'
 import { useVisitor } from '@/context/VisitorContext'
 import { tPlain } from '@/lib/i18n'
 import type { SectionDTO } from '@/lib/api/types'
@@ -15,7 +15,7 @@ interface Props {
 
 export default function WebSection({ section, slug, configId, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
-  const router = useRouter()
+  const back = useBack()
 
   useEffect(() => { setAvailableLanguages([]) }, [languages])
 
@@ -38,7 +38,7 @@ export default function WebSection({ section, slug, configId, languages }: Props
         }}
       >
         <button
-          onClick={() => router.back()}
+          onClick={back}
           style={{
             width: 36, height: 36, borderRadius: '50%',
             background: 'rgba(255,255,255,0.15)',
diff --git a/src/components/sections/game/PuzzleGame.tsx b/src/components/sections/game/PuzzleGame.tsx
index d027108..fbb1eb5 100644
--- a/src/components/sections/game/PuzzleGame.tsx
+++ b/src/components/sections/game/PuzzleGame.tsx
@@ -119,7 +119,8 @@ export default function PuzzleGame({ imageUrl, rows, cols, showHint, onWin }: Pr
         const targetY = p.row * ph
         const dx = p.x - targetX
         const dy = p.y - targetY
-        if (Math.abs(dx) < 18 && Math.abs(dy) < 18) {
+        const snapThreshold = Math.min(pw, ph) * 0.35
+        if (Math.abs(dx) < snapThreshold && Math.abs(dy) < snapThreshold) {
           return { ...p, x: targetX, y: targetY, placed: true, z: 0 }
         }
         return p
diff --git a/src/components/sections/map/LeafletMap.tsx b/src/components/sections/map/LeafletMap.tsx
index 1bcf645..c6f9d18 100644
--- a/src/components/sections/map/LeafletMap.tsx
+++ b/src/components/sections/map/LeafletMap.tsx
@@ -88,7 +88,7 @@ function FitToTargets({ target, fitBounds }: { target: [number, number] | null;
     }
     if (target) {
       const current = map.getZoom()
-      map.flyTo(target, current < 16 ? 17 : current, { duration: 1.2 })
+      map.flyTo(target, Math.max(current, 15), { duration: 1.2 })
     }
   }, [target, fitBounds, map])
   return null
diff --git a/src/components/sections/pdf/PdfViewer.tsx b/src/components/sections/pdf/PdfViewer.tsx
new file mode 100644
index 0000000..1d06bc0
--- /dev/null
+++ b/src/components/sections/pdf/PdfViewer.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Document, Page, pdfjs } from 'react-pdf'
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+import 'react-pdf/dist/Page/TextLayer.css'
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url,
+).toString()
+
+interface Props {
+  url: string
+}
+
+function proxyUrl(url: string): string {
+  return `/api/pdf?url=${encodeURIComponent(url)}`
+}
+
+export default function PdfViewer({ url }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [numPages, setNumPages] = useState(0)
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const ro = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width))
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+
+  return (
+    <div ref={containerRef} style={{ height: '100%', overflowY: 'auto', background: '#e5e7eb' }}>
+      <Document
+        file={proxyUrl(url)}
+        onLoadSuccess={({ numPages }) => setNumPages(numPages)}
+        loading={
+          <div className="h-full flex items-center justify-center">
+            <div
+              className="w-8 h-8 rounded-full border-2 border-t-transparent animate-spin"
+              style={{ borderColor: 'var(--color-primary)', borderTopColor: 'transparent' }}
+            />
+          </div>
+        }
+        error={
+          <div style={{ padding: 32, textAlign: 'center', color: 'var(--color-text-muted)' }}>
+            Impossible de charger le PDF
+          </div>
+        }
+      >
+        {Array.from({ length: numPages }, (_, i) => (
+          <div key={i + 1} style={{ marginBottom: 8, display: 'flex', justifyContent: 'center' }}>
+            <Page
+              pageNumber={i + 1}
+              width={containerWidth || undefined}
+              renderTextLayer={false}
+              renderAnnotationLayer={false}
+            />
+          </div>
+        ))}
+      </Document>
+    </div>
+  )
+}
diff --git a/src/components/ui/AppBar.tsx b/src/components/ui/AppBar.tsx
index 21ef1c2..5ca15b2 100644
--- a/src/components/ui/AppBar.tsx
+++ b/src/components/ui/AppBar.tsx
@@ -1,119 +1,52 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
-import { useVisitor } from '@/context/VisitorContext'
-
-const FLAG: Record<string, string> = {
-  FR: '🇫🇷', NL: '🇧🇪', EN: '🇬🇧', DE: '🇩🇪',
-  IT: '🇮🇹', ES: '🇪🇸', PL: '🇵🇱', CN: '🇨🇳', AR: '🇸🇦', UK: '🇺🇦',
-}
-
-const LABEL: Record<string, string> = {
-  FR: 'Français', NL: 'Nederlands', EN: 'English', DE: 'Deutsch',
-  IT: 'Italiano', ES: 'Español', PL: 'Polski', CN: '中文', AR: 'العربية', UK: 'Українська',
-}
+import { useRouter } from 'next/navigation'
+import LanguageSelector from '@/components/ui/LanguageSelector'
 
 interface Props {
   title?: string
   onBack?: () => void
+  overlay?: boolean
 }
 
-export default function AppBar({ title, onBack }: Props) {
-  const { language, setLanguage, availableLanguages } = useVisitor()
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [open])
-
-  const showSelector = availableLanguages.length > 1
-
+export default function AppBar({ title, onBack, overlay }: Props) {
   return (
     <header
       className="flex items-center justify-between px-4 sticky top-0 z-50"
       style={{
-        background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))',
+        background: overlay ? 'transparent' : 'var(--color-surface)',
         minHeight: 56,
-        color: 'var(--color-on-primary)',
+        color: overlay ? 'white' : 'var(--color-text)',
+        boxShadow: overlay ? 'none' : '0 1px 0 var(--color-border)',
       }}
     >
       <div className="flex items-center gap-3 flex-1 min-w-0">
         {onBack && (
           <button
             onClick={onBack}
-            className="shrink-0 p-1 rounded-full hover:opacity-70 transition-opacity"
+            className="shrink-0 flex items-center justify-center rounded-full hover:opacity-80 transition-opacity"
+            style={overlay
+              ? { background: 'rgba(0,0,0,0.35)', backdropFilter: 'blur(8px)', padding: 6 }
+              : { background: 'var(--color-primary-light)', color: 'var(--color-primary)', padding: 6 }
+            }
             aria-label="Retour"
           >
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
               <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
             </svg>
           </button>
         )}
-        <span className="text-base font-semibold truncate" style={{ textShadow: '0 1px 3px rgba(0,0,0,0.4)' }}>
+        <span
+          className="text-base font-semibold truncate"
+          style={overlay ? { textShadow: '0 1px 6px rgba(0,0,0,0.8)', color: 'white' } : undefined}
+        >
           {title ?? 'MyInfoMate'}
         </span>
       </div>
 
-      {showSelector && (
-        <div ref={ref} className="relative shrink-0 ml-3">
-          <button
-            onClick={() => setOpen((o) => !o)}
-            className="flex items-center gap-1.5 rounded-xl px-3 py-1.5 transition-all"
-            style={{ background: 'rgba(255,255,255,0.18)', color: 'var(--color-on-primary)' }}
-          >
-            <span className="text-lg leading-none">{FLAG[language] ?? language}</span>
-            <span className="text-xs font-semibold tracking-wide">{language}</span>
-            <svg
-              width="14" height="14" viewBox="0 0 24 24" fill="currentColor"
-              style={{ transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'rotate(0deg)', opacity: 0.8 }}
-            >
-              <path d="M7 10l5 5 5-5z"/>
-            </svg>
-          </button>
-
-          {open && (
-            <div
-              className="absolute right-0 mt-1 rounded-2xl overflow-hidden"
-              style={{
-                background: 'white',
-                boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
-                minWidth: 160,
-                zIndex: 100,
-              }}
-            >
-              {availableLanguages.map((lang) => {
-                const active = lang === language
-                return (
-                  <button
-                    key={lang}
-                    onClick={() => { setLanguage(lang); setOpen(false) }}
-                    className="w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors"
-                    style={{
-                      background: active ? 'var(--color-primary-light)' : 'transparent',
-                      color: active ? 'var(--color-primary)' : '#333',
-                      fontWeight: active ? 600 : 400,
-                    }}
-                  >
-                    <span className="text-xl leading-none">{FLAG[lang] ?? '🌐'}</span>
-                    <span className="text-sm">{LABEL[lang] ?? lang}</span>
-                    {active && (
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="ml-auto" style={{ color: 'var(--color-primary)' }}>
-                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-                      </svg>
-                    )}
-                  </button>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      )}
+      <div className="ml-3">
+        <LanguageSelector overlay={overlay} />
+      </div>
     </header>
   )
 }
diff --git a/src/components/ui/LanguageSelector.tsx b/src/components/ui/LanguageSelector.tsx
new file mode 100644
index 0000000..23d469b
--- /dev/null
+++ b/src/components/ui/LanguageSelector.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { useVisitor } from '@/context/VisitorContext'
+
+const FLAG: Record<string, string> = {
+  FR: '🇫🇷', NL: '🇧🇪', EN: '🇬🇧', DE: '🇩🇪',
+  IT: '🇮🇹', ES: '🇪🇸', PL: '🇵🇱', CN: '🇨🇳', AR: '🇸🇦', UK: '🇺🇦',
+}
+
+const LABEL: Record<string, string> = {
+  FR: 'Français', NL: 'Nederlands', EN: 'English', DE: 'Deutsch',
+  IT: 'Italiano', ES: 'Español', PL: 'Polski', CN: '中文', AR: 'العربية', UK: 'Українська',
+}
+
+interface Props {
+  overlay?: boolean
+}
+
+export default function LanguageSelector({ overlay }: Props) {
+  const { language, setLanguage, availableLanguages } = useVisitor()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  if (availableLanguages.length <= 1) return null
+
+  return (
+    <div ref={ref} className="relative shrink-0">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-1.5 rounded-xl px-3 py-1.5 transition-all"
+        style={overlay
+          ? { background: 'rgba(0,0,0,0.35)', backdropFilter: 'blur(8px)', color: 'white' }
+          : { background: 'var(--color-primary-light)', color: 'var(--color-primary)' }
+        }
+      >
+        <span className="text-lg leading-none">{FLAG[language] ?? language}</span>
+        <span className="text-xs font-semibold tracking-wide">{language}</span>
+        <svg
+          width="14" height="14" viewBox="0 0 24 24" fill="currentColor"
+          style={{ transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'rotate(0deg)', opacity: 0.8 }}
+        >
+          <path d="M7 10l5 5 5-5z"/>
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 mt-1 rounded-2xl overflow-hidden"
+          style={{
+            background: 'white',
+            boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
+            minWidth: 160,
+            zIndex: 100,
+          }}
+        >
+          {availableLanguages.map((lang) => {
+            const active = lang === language
+            return (
+              <button
+                key={lang}
+                onClick={() => { setLanguage(lang); setOpen(false) }}
+                className="w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors"
+                style={{
+                  background: active ? 'var(--color-primary-light)' : 'transparent',
+                  color: active ? 'var(--color-primary)' : '#333',
+                  fontWeight: active ? 600 : 400,
+                }}
+              >
+                <span className="text-xl leading-none">{FLAG[lang] ?? '🌐'}</span>
+                <span className="text-sm">{LABEL[lang] ?? lang}</span>
+                {active && (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="ml-auto" style={{ color: 'var(--color-primary)' }}>
+                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                  </svg>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/hooks/useBack.ts b/src/hooks/useBack.ts
new file mode 100644
index 0000000..176cdca
--- /dev/null
+++ b/src/hooks/useBack.ts
@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter, useParams } from 'next/navigation'
+
+export function useBack() {
+  const router = useRouter()
+  const params = useParams<{ slug?: string; configId?: string; sectionId?: string }>()
+
+  return () => {
+    if (params.slug && params.configId && params.sectionId) {
+      router.push(`/${params.slug}/${params.configId}`)
+    } else if (params.slug && params.configId) {
+      router.push(`/${params.slug}`)
+    } else if (params.slug) {
+      router.push(`/${params.slug}`)
+    } else {
+      router.back()
+    }
+  }
+}
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index bc74509..da3f578 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -2,13 +2,13 @@ import type { ApplicationInstanceDTO, ConfigurationDTO, SectionDTO, GuidedPathDT
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL
 
-async function apiFetch<T>(path: string, apiKey?: string): Promise<T> {
+async function apiFetch<T>(path: string, apiKey?: string, cache?: RequestCache): Promise<T> {
   const headers: Record<string, string> = { 'Content-Type': 'application/json' }
   if (apiKey) headers['X-Api-Key'] = apiKey
 
   const res = await fetch(`${BASE_URL}${path}`, {
     headers,
-    next: { revalidate: 60 },
+    ...(cache ? { cache } : { next: { revalidate: 60 } }),
   })
   if (!res.ok) throw new Error(`API error ${res.status}: ${path}`)
   return res.json()
@@ -133,7 +133,15 @@ function normalizeSectionDTO(raw: any): SectionDTO {
 }
 
 export async function getInstanceBySlug(slug: string): Promise<ApplicationInstanceDTO> {
-  return apiFetch(`/api/instance/slug/${slug}`)
+  const raw = await apiFetch<any>(`/api/instance/slug/${slug}`)
+  const webInstance = raw.applicationInstanceDTOs?.find((i: any) => i.appType === 'Web') ?? {}
+  return {
+    ...webInstance,
+    id: raw.id,
+    publicApiKey: raw.publicApiKey,
+    webSlug: raw.webSlug,
+    label: raw.name,
+  }
 }
 
 export async function getConfigurations(instanceId: string, apiKey: string): Promise<ConfigurationDTO[]> {
@@ -145,10 +153,18 @@ export async function getConfiguration(configId: string, apiKey: string): Promis
 }
 
 export async function getSections(configId: string, apiKey: string): Promise<SectionDTO[]> {
-  const raw: any[] = await apiFetch(`/api/Section/configuration/${configId}/detail`, apiKey)
+  const raw: any[] = await apiFetch(`/api/Section/configuration/${configId}/detail`, apiKey, 'no-store')
   return raw.map(normalizeSectionDTO)
 }
 
+export async function getAgendaEvents(sectionId: string, language: string, apiKey: string): Promise<any[]> {
+  const res = await fetch(`${BASE_URL}/api/SectionAgenda/${sectionId}/events/upcoming?language=${encodeURIComponent(language)}`, {
+    headers: { 'Content-Type': 'application/json', 'X-Api-Key': apiKey },
+  })
+  if (!res.ok) throw new Error(`API error ${res.status}`)
+  return res.json()
+}
+
 export async function getGuidedPaths(sectionMapId: string, apiKey: string): Promise<GuidedPathDTO[]> {
   return apiFetch(`/api/SectionMap/${sectionMapId}/GuidedPath`, apiKey)
 }
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index fcbd3f3..2cc9436 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -146,14 +146,14 @@ export interface MenuDTO {
 
 export interface QuestionResponseDTO {
   id: number
-  label?: TranslationDTO[]
+  label?: TranslationAndResourceDTO[]
   isCorrect?: boolean
   order?: number
 }
 
 export interface QuestionDTO {
   id: number
-  label?: TranslationDTO[]
+  label?: TranslationAndResourceDTO[]
   responses?: QuestionResponseDTO[]
   imageBackgroundResourceUrl?: string
   order?: number
@@ -278,6 +278,7 @@ export interface AgendaDTO {
 
 export interface TranslationAndResourceDTO {
   language?: string
+  value?: string
   resourceId?: string
   resource?: ResourceDTO
 }
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
index ad392ce..bdc4b4a 100644
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -1,6 +1,6 @@
-import type { TranslationDTO } from './api/types'
+type AnyTranslation = { language?: string; value?: string }
 
-export function t(translations: TranslationDTO[] | undefined, lang: string): string {
+export function t(translations: AnyTranslation[] | undefined, lang: string): string {
   if (!translations || translations.length === 0) return ''
   return (
     translations.find((t) => t.language === lang)?.value ||
@@ -10,10 +10,25 @@ export function t(translations: TranslationDTO[] | undefined, lang: string): str
   )
 }
 
+const UI_STRINGS: Record<string, Record<string, string>> = {
+  noEventsThisMonth: {
+    FR: 'Aucun événement ce mois-ci',
+    NL: 'Geen evenementen deze maand',
+    EN: 'No events this month',
+    DE: 'Keine Veranstaltungen diesen Monat',
+    ES: 'No hay eventos este mes',
+    IT: 'Nessun evento questo mese',
+  },
+}
+
+export function ui(key: keyof typeof UI_STRINGS, lang: string): string {
+  return UI_STRINGS[key]?.[lang] ?? UI_STRINGS[key]?.['FR'] ?? key
+}
+
 export function stripHtml(html: string): string {
   return html.replace(/<[^>]*>/g, '').trim()
 }
 
-export function tPlain(translations: TranslationDTO[] | undefined, lang: string): string {
+export function tPlain(translations: AnyTranslation[] | undefined, lang: string): string {
   return stripHtml(t(translations, lang))
 }