From 7ea19e2247924c25d1311905ea9e589ac34d953b Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Sat, 28 Feb 2026 17:46:38 +0100
Subject: [PATCH] Viewer PDF.js mode livre avec signets, fix hydratation SSR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Viewer PDF.js mode livre : double page côte à côte, navigation prev/next visuelle et clavier
- Panneau signets (outline) avec tout déplier/replier, highlight du spread courant
- Page 1 = couverture seule, puis paires 2-3, 4-5, etc.
- Navigation clavier : flèches, espace, Home/End
- Redimensionnement auto des canvas au resize
- Fix hydratation SSR : bookData.init() sans await dans ChapterHeader et SongBadges
- BookPdfReader : iframe vers /pdfjs/viewer.html au lieu du viewer natif
- Script postinstall pour copier pdf.min.mjs depuis node_modules

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .gitignore                            |   4 +
 app/components/book/BookPdfReader.vue |   7 +-
 app/components/book/ChapterHeader.vue |  11 +-
 app/components/book/ChapterToc.vue    | 159 ++++++++
 app/components/song/SongBadges.vue    |   2 +-
 app/pages/admin/book/index.vue        |   2 +-
 package.json                          |   3 +-
 pnpm-lock.yaml                        | 141 +++++++
 public/pdfjs/viewer.html              | 546 ++++++++++++++++++++++++++
 scripts/copy-pdfjs.sh                 |  12 +
 10 files changed, 874 insertions(+), 13 deletions(-)
 create mode 100644 app/components/book/ChapterToc.vue
 create mode 100644 public/pdfjs/viewer.html
 create mode 100755 scripts/copy-pdfjs.sh

diff --git a/.gitignore b/.gitignore
index 4453835..529aa28 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,10 @@ logs
 .fleet
 .idea
 
+# PDF.js (copié depuis node_modules par postinstall)
+public/pdfjs/pdf.min.mjs
+public/pdfjs/pdf.worker.min.mjs
+
 # Sources originales (PDF, JPG — pas servies par l'appli)
 sources/
 
diff --git a/app/components/book/BookPdfReader.vue b/app/components/book/BookPdfReader.vue
index 646a527..cf52c7c 100644
--- a/app/components/book/BookPdfReader.vue
+++ b/app/components/book/BookPdfReader.vue
@@ -50,10 +50,9 @@ const isOpen = computed({
 
 const pdfUrl = computed(() => {
   const base = bookData.getPdfUrl()
-  const fragments: string[] = []
-  if (props.page) fragments.push(`page=${props.page}`)
-  fragments.push('pagemode=bookmarks')
-  return `${base}#${fragments.join('&')}`
+  const viewerBase = `/pdfjs/viewer.html?file=${encodeURIComponent(base)}`
+  if (props.page) return `${viewerBase}#page=${props.page}`
+  return viewerBase
 })
 
 function close() {
diff --git a/app/components/book/ChapterHeader.vue b/app/components/book/ChapterHeader.vue
index 2a145dd..32b2293 100644
--- a/app/components/book/ChapterHeader.vue
+++ b/app/components/book/ChapterHeader.vue
@@ -15,8 +15,9 @@
       {{ description }}
     </p>
 
+    <!-- Songs + PDF actions row -->
+    <div class="mt-4 flex flex-wrap items-center gap-2">
     <!-- Associated songs badges -->
-    <div v-if="songs.length > 0" class="mt-4 flex flex-wrap gap-2">
       <button
         v-for="song in songs"
         :key="song.id"
@@ -26,18 +27,16 @@
         <div class="i-lucide-music h-3 w-3" />
         {{ song.title }}
       </button>
-    </div>
 
     <!-- PDF button -->
-    <div v-if="pdfPage" class="mt-3">
-      <button class="pdf-btn" @click="showPdf = true">
+      <button v-if="pdfPage" class="pdf-btn" @click="showPdf = true">
         <div class="i-lucide-book-open h-3.5 w-3.5" />
         <span>Lire dans le PDF</span>
         <span class="pdf-page-badge">p.{{ pdfPage }}</span>
       </button>
     </div>
 
-    <BookPdfReader v-model="showPdf" :page="pdfPage" />
+    <LazyBookPdfReader v-if="showPdf" v-model="showPdf" :page="pdfPage" />
   </header>
 </template>
 
@@ -55,7 +54,7 @@ const props = defineProps<{
 const bookData = useBookData()
 const { loadAndPlay } = useAudioPlayer()
 
-await bookData.init()
+bookData.init()
 
 const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
 const pdfPage = computed(() => bookData.getChapterPage(props.chapterSlug))
diff --git a/app/components/book/ChapterToc.vue b/app/components/book/ChapterToc.vue
new file mode 100644
index 0000000..791f6e6
--- /dev/null
+++ b/app/components/book/ChapterToc.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="chapter-toc" ref="tocRoot">
+    <button class="toc-toggle" @click="open = !open" :aria-expanded="open">
+      <div class="i-lucide-list h-4 w-4" />
+      <span>Sommaire</span>
+      <div class="i-lucide-chevron-down h-3.5 w-3.5 toc-chevron" :class="{ 'toc-chevron--open': open }" />
+    </button>
+
+    <Transition name="toc-dropdown">
+      <div v-if="open" class="toc-panel">
+        <nav>
+          <a
+            v-for="item in headings"
+            :key="item.id"
+            :href="`#${item.id}`"
+            class="toc-item"
+            :class="{ 'toc-item--h2': item.level === 2 }"
+            @click="open = false"
+          >
+            {{ item.text }}
+          </a>
+        </nav>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface TocHeading {
+  id: string
+  text: string
+  level: number
+}
+
+const open = ref(false)
+const headings = ref<TocHeading[]>([])
+const tocRoot = ref<HTMLElement>()
+
+function extractHeadings() {
+  const article = document.querySelector('.prose-lyrics')
+  if (!article) return
+
+  const nodes = article.querySelectorAll('h1, h2')
+  headings.value = Array.from(nodes)
+    .filter(el => el.id)
+    .map(el => ({
+      id: el.id,
+      text: el.textContent?.trim() ?? '',
+      level: parseInt(el.tagName[1]),
+    }))
+}
+
+// Close on click outside
+function onClickOutside(e: MouseEvent) {
+  if (tocRoot.value && !tocRoot.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => {
+  // Wait for content to render
+  nextTick(() => {
+    extractHeadings()
+    // Retry after a short delay in case content loads async
+    setTimeout(extractHeadings, 500)
+  })
+  document.addEventListener('click', onClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside)
+})
+</script>
+
+<style scoped>
+.chapter-toc {
+  position: relative;
+  display: inline-block;
+}
+
+.toc-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  background: hsl(20 8% 10%);
+  border: 1px solid hsl(20 8% 18%);
+  color: hsl(20 8% 60%);
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toc-toggle:hover {
+  border-color: hsl(20 8% 30%);
+  color: white;
+}
+
+.toc-chevron {
+  transition: transform 0.2s;
+}
+
+.toc-chevron--open {
+  transform: rotate(180deg);
+}
+
+.toc-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  z-index: 30;
+  min-width: 280px;
+  max-width: 400px;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background: hsl(20 8% 8%);
+  border: 1px solid hsl(20 8% 16%);
+  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.4);
+}
+
+.toc-item {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.8rem;
+  color: hsl(20 8% 65%);
+  text-decoration: none;
+  transition: all 0.15s;
+  line-height: 1.3;
+}
+
+.toc-item:hover {
+  background: hsl(20 8% 12%);
+  color: white;
+}
+
+.toc-item--h2 {
+  padding-left: 1.5rem;
+  font-size: 0.75rem;
+  color: hsl(20 8% 50%);
+}
+
+/* Dropdown transition */
+.toc-dropdown-enter-active {
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toc-dropdown-leave-active {
+  transition: all 0.15s ease-in;
+}
+.toc-dropdown-enter-from,
+.toc-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/app/components/song/SongBadges.vue b/app/components/song/SongBadges.vue
index 05a8863..851c84b 100644
--- a/app/components/song/SongBadges.vue
+++ b/app/components/song/SongBadges.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
 }>()
 
 const bookData = useBookData()
-await bookData.init()
+bookData.init()
 
 const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
 </script>
diff --git a/app/pages/admin/book/index.vue b/app/pages/admin/book/index.vue
index 53c3f45..219721c 100644
--- a/app/pages/admin/book/index.vue
+++ b/app/pages/admin/book/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex items-center justify-between mb-6">
-      <h1 class="font-display text-2xl font-bold text-white">Chapitres</h1>
+      <h1 class="font-display text-2xl font-bold text-white">Livre &amp; chapitres</h1>
       <AdminSaveButton :saving="saving" :saved="saved" @save="saveOrder" />
     </div>
 
diff --git a/package.json b/package.json
index 4a7445d..6a8388e 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare && sh scripts/copy-pdfjs.sh"
   },
   "dependencies": {
     "@nuxt/content": "^3.11.2",
@@ -17,6 +17,7 @@
     "@vueuse/nuxt": "^14.2.1",
     "better-sqlite3": "^12.6.2",
     "nuxt": "^4.3.1",
+    "pdfjs-dist": "^5.4.624",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4",
     "yaml": "^2.8.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e123a0d..28efa5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       nuxt:
         specifier: ^4.3.1
         version: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.3)(@vue/compiler-sfc@3.5.28)(better-sqlite3@12.6.2)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.3)(magicast@0.5.2)(rollup@4.57.1)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.3)(jiti@2.6.1)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
+      pdfjs-dist:
+        specifier: ^5.4.624
+        version: 5.4.624
       vue:
         specifier: ^3.5.28
         version: 3.5.28(typescript@5.9.3)
@@ -598,6 +601,81 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@napi-rs/canvas-android-arm64@0.1.95':
+    resolution: {integrity: sha512-SqTh0wsYbetckMXEvHqmR7HKRJujVf1sYv1xdlhkifg6TlCSysz1opa49LlS3+xWuazcQcfRfmhA07HxxxGsAA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@0.1.95':
+    resolution: {integrity: sha512-F7jT0Syu+B9DGBUBcMk3qCRIxAWiDXmvEjamwbYfbZl7asI1pmXZUnCOoIu49Wt0RNooToYfRDxU9omD6t5Xuw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@0.1.95':
+    resolution: {integrity: sha512-54eb2Ho15RDjYGXO/harjRznBrAvu+j5nQ85Z4Qd6Qg3slR8/Ja+Yvvy9G4yo7rdX6NR9GPkZeSTf2UcKXwaXw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.95':
+    resolution: {integrity: sha512-hYaLCSLx5bmbnclzQc3ado3PgZ66blJWzjXp0wJmdwpr/kH+Mwhj6vuytJIomgksyJoCdIqIa4N6aiqBGJtJ5Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.95':
+    resolution: {integrity: sha512-J7VipONahKsmScPZsipHVQBqpbZx4favaD8/enWzzlGcjiwycOoymL7f4tNeqdjK0su19bDOUt6mjp9gsPWYlw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.95':
+    resolution: {integrity: sha512-PXy0UT1J/8MPG8UAkWp6Fd51ZtIZINFzIjGH909JjQrtCuJf3X6nanHYdz1A+Wq9o4aoPAw1YEUpFS1lelsVlg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.95':
+    resolution: {integrity: sha512-2IzCkW2RHRdcgF9W5/plHvYFpc6uikyjMb5SxjqmNxfyDFz9/HB89yhi8YQo0SNqrGRI7yBVDec7Pt+uMyRWsg==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.95':
+    resolution: {integrity: sha512-OV/ol/OtcUr4qDhQg8G7SdViZX8XyQeKpPsVv/j3+7U178FGoU4M+yIocdVo1ih/A8GQ63+LjF4jDoEjaVU8Pw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.95':
+    resolution: {integrity: sha512-Z5KzqBK/XzPz5+SFHKz7yKqClEQ8pOiEDdgk5SlphBLVNb8JFIJkxhtJKSvnJyHh2rjVgiFmvtJzMF0gNwwKyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.95':
+    resolution: {integrity: sha512-aj0YbRpe8qVJ4OzMsK7NfNQePgcf9zkGFzNZ9mSuaxXzhpLHmlF2GivNdCdNOg8WzA/NxV6IU4c5XkXadUMLeA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.95':
+    resolution: {integrity: sha512-GA8leTTCfdjuHi8reICTIxU0081PhXvl3lzIniLUjeLACx9GubUiyzkwFb+oyeKLS5IAGZFLKnzAf4wm2epRlA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@0.1.95':
+    resolution: {integrity: sha512-lkg23ge+rgyhgUwXmlbkPEhuhHq/hUi/gXKH+4I7vO+lJrbNfEYcQdJLIGjKyXLQzgFiiyDAwh5vAe/tITAE+w==}
+    engines: {node: '>= 10'}
+
   '@napi-rs/wasm-runtime@1.1.1':
     resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
 
@@ -3336,6 +3414,9 @@ packages:
   node-mock-http@1.0.4:
     resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
 
+  node-readable-to-web-readable-stream@0.4.2:
+    resolution: {integrity: sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ==}
+
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
@@ -3496,6 +3577,10 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pdfjs-dist@5.4.624:
+    resolution: {integrity: sha512-sm6TxKTtWv1Oh6n3C6J6a8odejb5uO4A4zo/2dgkHuC0iu8ZMAXOezEODkVaoVp8nX1Xzr+0WxFJJmUr45hQzg==}
+    engines: {node: '>=20.16.0 || >=22.3.0'}
+
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -5214,6 +5299,54 @@ snapshots:
       - encoding
       - supports-color
 
+  '@napi-rs/canvas-android-arm64@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.95':
+    optional: true
+
+  '@napi-rs/canvas@0.1.95':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 0.1.95
+      '@napi-rs/canvas-darwin-arm64': 0.1.95
+      '@napi-rs/canvas-darwin-x64': 0.1.95
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.95
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.95
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.95
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.95
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.95
+      '@napi-rs/canvas-linux-x64-musl': 0.1.95
+      '@napi-rs/canvas-win32-arm64-msvc': 0.1.95
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.95
+    optional: true
+
   '@napi-rs/wasm-runtime@1.1.1':
     dependencies:
       '@emnapi/core': 1.8.1
@@ -8512,6 +8645,9 @@ snapshots:
 
   node-mock-http@1.0.4: {}
 
+  node-readable-to-web-readable-stream@0.4.2:
+    optional: true
+
   node-releases@2.0.27: {}
 
   nopt@8.1.0:
@@ -8855,6 +8991,11 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  pdfjs-dist@5.4.624:
+    optionalDependencies:
+      '@napi-rs/canvas': 0.1.95
+      node-readable-to-web-readable-stream: 0.4.2
+
   perfect-debounce@1.0.0: {}
 
   perfect-debounce@2.1.0: {}
diff --git a/public/pdfjs/viewer.html b/public/pdfjs/viewer.html
new file mode 100644
index 0000000..38a238a
--- /dev/null
+++ b/public/pdfjs/viewer.html
@@ -0,0 +1,546 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>PDF Viewer</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #1a1a1a;
+  color: #e0e0e0;
+}
+
+.viewer-layout {
+  display: flex;
+  height: 100%;
+}
+
+/* Outline panel */
+.outline-panel {
+  width: 260px;
+  min-width: 260px;
+  background: #111;
+  border-right: 1px solid #2a2a2a;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.25s, min-width 0.25s;
+}
+
+.outline-panel.collapsed {
+  width: 0;
+  min-width: 0;
+  border-right: none;
+}
+
+.outline-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid #2a2a2a;
+  flex-shrink: 0;
+}
+
+.outline-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.outline-actions { display: flex; gap: 0.25rem; }
+
+.outline-btn {
+  background: none;
+  border: 1px solid #2a2a2a;
+  border-radius: 4px;
+  color: #777;
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.65rem;
+  transition: all 0.15s;
+}
+
+.outline-btn:hover { border-color: #555; color: #ccc; }
+
+.outline-tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.4rem;
+}
+
+.outline-tree::-webkit-scrollbar { width: 4px; }
+.outline-tree::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
+
+.outline-node { user-select: none; }
+
+.outline-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.2rem;
+  padding: 0.3rem 0.4rem;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #aaa;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  transition: background 0.1s;
+}
+
+.outline-item:hover { background: #1e1e1e; color: #fff; }
+.outline-item.active { background: #1a1207; color: #e8a040; }
+
+.outline-item .toggle {
+  flex-shrink: 0;
+  width: 14px; height: 14px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.6rem; color: #555; cursor: pointer;
+  transition: transform 0.15s; margin-top: 1px;
+}
+
+.outline-item .toggle.open { transform: rotate(90deg); }
+.outline-item .toggle.empty { visibility: hidden; }
+.outline-item .label { flex: 1; min-width: 0; }
+
+.outline-children { padding-left: 0.85rem; overflow: hidden; }
+.outline-children.hidden { display: none; }
+
+.outline-empty {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  color: #444;
+  font-size: 0.8rem;
+}
+
+/* Main area */
+.main-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Book spread */
+.book-spread {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 1rem;
+  background: #2a2a2a;
+  overflow: hidden;
+  position: relative;
+}
+
+.book-spread canvas {
+  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+  background: white;
+  display: block;
+}
+
+.page-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-height: 100%;
+}
+
+.page-slot.empty {
+  visibility: hidden;
+}
+
+/* Navigation bar */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 0.6rem 1rem;
+  background: #141414;
+  border-top: 1px solid #2a2a2a;
+  flex-shrink: 0;
+}
+
+.nav-btn {
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #aaa;
+  cursor: pointer;
+  padding: 0.4rem 0.8rem;
+  font-size: 0.85rem;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.nav-btn:hover:not(:disabled) { background: #2a2a2a; color: #fff; border-color: #555; }
+.nav-btn:disabled { opacity: 0.25; cursor: default; }
+
+.nav-info {
+  font-size: 0.75rem;
+  color: #777;
+  font-variant-numeric: tabular-nums;
+  min-width: 6rem;
+  text-align: center;
+}
+
+.sidebar-btn {
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 2rem;
+  background: transparent;
+  border: none;
+  color: #555;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.15s;
+  z-index: 5;
+}
+
+.sidebar-btn:hover { background: rgba(255,255,255,0.03); color: #aaa; }
+.sidebar-btn.hidden { display: none; }
+
+/* Loading */
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #555;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+  .outline-panel { width: 200px; min-width: 200px; }
+  .book-spread { padding: 0.5rem; }
+}
+
+@media (max-width: 480px) {
+  .outline-panel { position: absolute; z-index: 20; height: 100%; }
+  .outline-panel.collapsed { display: none; }
+}
+</style>
+</head>
+<body>
+
+<div class="viewer-layout">
+  <div class="outline-panel" id="outlinePanel">
+    <div class="outline-header">
+      <span class="outline-title">Sommaire</span>
+      <div class="outline-actions">
+        <button class="outline-btn" onclick="expandAll()">Déplier</button>
+        <button class="outline-btn" onclick="collapseAll()">Replier</button>
+        <button class="outline-btn" onclick="toggleSidebar()">&#10005;</button>
+      </div>
+    </div>
+    <div class="outline-tree" id="outlineTree">
+      <div class="loading">Chargement…</div>
+    </div>
+  </div>
+
+  <div class="main-area">
+    <div class="book-spread" id="bookSpread">
+      <button class="sidebar-btn hidden" id="sidebarBtn" onclick="toggleSidebar()">&#9776;</button>
+      <div class="loading" id="loadingMsg">Chargement du PDF…</div>
+      <div class="page-slot" id="slotLeft"></div>
+      <div class="page-slot" id="slotRight"></div>
+    </div>
+
+    <div class="nav-bar">
+      <button class="nav-btn" id="prevBtn" onclick="prevSpread()" disabled>&#9664; Précédent</button>
+      <span class="nav-info" id="pageInfo"></span>
+      <button class="nav-btn" id="nextBtn" onclick="nextSpread()" disabled>Suivant &#9654;</button>
+    </div>
+  </div>
+</div>
+
+<script type="module">
+import * as pdfjsLib from '/pdfjs/pdf.min.mjs';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs/pdf.worker.min.mjs';
+
+const params = new URLSearchParams(location.search);
+const hash = location.hash.slice(1);
+const hashParams = new URLSearchParams(hash);
+
+const fileUrl = params.get('file') || '/pdf/une-economie-du-don.pdf';
+const targetPage = parseInt(hashParams.get('page') || params.get('page') || '1', 10);
+
+let pdfDoc = null;
+let currentSpread = 0; // index into spreads[]
+let spreads = [];       // [[1], [2,3], [4,5], ...] — page 1 alone (cover), then pairs
+let pageCanvasCache = new Map();
+let outlinePageMap = []; // [{item, pageNum}] for highlighting
+
+function buildSpreads(numPages) {
+  spreads = [];
+  // Page 1 = couverture seule
+  spreads.push([1]);
+  // Ensuite par paires : 2-3, 4-5, etc.
+  for (let i = 2; i <= numPages; i += 2) {
+    if (i + 1 <= numPages) {
+      spreads.push([i, i + 1]);
+    } else {
+      spreads.push([i]);
+    }
+  }
+}
+
+function getSpreadForPage(pageNum) {
+  return spreads.findIndex(s => s.includes(pageNum));
+}
+
+async function renderPageCanvas(pageNum) {
+  if (pageCanvasCache.has(pageNum)) return pageCanvasCache.get(pageNum);
+
+  const page = await pdfDoc.getPage(pageNum);
+  const spread = document.getElementById('bookSpread');
+  const availH = spread.clientHeight - 32;
+  const availW = (spread.clientWidth - 40) / 2;
+
+  const rawViewport = page.getViewport({ scale: 1 });
+  const scaleH = availH / rawViewport.height;
+  const scaleW = availW / rawViewport.width;
+  const scale = Math.min(scaleH, scaleW, 2.5);
+
+  const viewport = page.getViewport({ scale });
+
+  const canvas = document.createElement('canvas');
+  canvas.width = viewport.width;
+  canvas.height = viewport.height;
+  canvas.dataset.page = pageNum;
+
+  const ctx = canvas.getContext('2d');
+  await page.render({ canvasContext: ctx, viewport }).promise;
+
+  pageCanvasCache.set(pageNum, canvas);
+  return canvas;
+}
+
+async function showSpread(index) {
+  if (index < 0 || index >= spreads.length) return;
+  currentSpread = index;
+
+  const pages = spreads[index];
+  const slotLeft = document.getElementById('slotLeft');
+  const slotRight = document.getElementById('slotRight');
+
+  slotLeft.innerHTML = '';
+  slotRight.innerHTML = '';
+  slotLeft.className = 'page-slot';
+  slotRight.className = 'page-slot';
+
+  if (pages.length === 1) {
+    // Single page (cover or last odd page) — centered
+    const canvas = await renderPageCanvas(pages[0]);
+    slotLeft.appendChild(canvas);
+    slotRight.className = 'page-slot empty';
+  } else {
+    const [left, right] = await Promise.all([
+      renderPageCanvas(pages[0]),
+      renderPageCanvas(pages[1]),
+    ]);
+    slotLeft.appendChild(left);
+    slotRight.appendChild(right);
+  }
+
+  updateNav();
+  highlightOutline();
+}
+
+function updateNav() {
+  const pages = spreads[currentSpread];
+  const info = document.getElementById('pageInfo');
+  const prevBtn = document.getElementById('prevBtn');
+  const nextBtn = document.getElementById('nextBtn');
+
+  if (pages.length === 1) {
+    info.textContent = `Page ${pages[0]} / ${pdfDoc.numPages}`;
+  } else {
+    info.textContent = `Pages ${pages[0]}–${pages[1]} / ${pdfDoc.numPages}`;
+  }
+
+  prevBtn.disabled = currentSpread <= 0;
+  nextBtn.disabled = currentSpread >= spreads.length - 1;
+}
+
+function prevSpread() { showSpread(currentSpread - 1); }
+function nextSpread() { showSpread(currentSpread + 1); }
+
+function goToPage(pageNum) {
+  const idx = getSpreadForPage(pageNum);
+  if (idx >= 0) showSpread(idx);
+}
+
+// Keyboard navigation
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    prevSpread();
+  } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
+    e.preventDefault();
+    nextSpread();
+  } else if (e.key === 'Home') {
+    e.preventDefault();
+    showSpread(0);
+  } else if (e.key === 'End') {
+    e.preventDefault();
+    showSpread(spreads.length - 1);
+  }
+});
+
+// Resize handling
+let resizeTimer;
+window.addEventListener('resize', () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    pageCanvasCache.clear();
+    showSpread(currentSpread);
+  }, 200);
+});
+
+// Outline
+async function renderOutline() {
+  const outlineTree = document.getElementById('outlineTree');
+  const outline = await pdfDoc.getOutline();
+
+  if (!outline || outline.length === 0) {
+    outlineTree.innerHTML = '<div class="outline-empty">Aucun signet dans ce PDF</div>';
+    return;
+  }
+
+  outlineTree.innerHTML = '';
+  outlinePageMap = [];
+  const tree = await buildOutlineTree(outline);
+  outlineTree.appendChild(tree);
+}
+
+async function buildOutlineTree(items) {
+  const frag = document.createDocumentFragment();
+
+  for (const item of items) {
+    const node = document.createElement('div');
+    node.className = 'outline-node';
+
+    const row = document.createElement('div');
+    row.className = 'outline-item';
+
+    // Resolve page number for this item
+    let pageNum = null;
+    try {
+      let dest = item.dest;
+      if (typeof dest === 'string') dest = await pdfDoc.getDestination(dest);
+      if (dest) {
+        const ref = dest[0];
+        pageNum = (await pdfDoc.getPageIndex(ref)) + 1;
+      }
+    } catch {}
+
+    const toggle = document.createElement('span');
+    toggle.className = 'toggle' + (item.items && item.items.length > 0 ? ' open' : ' empty');
+    toggle.textContent = '▶';
+    if (item.items && item.items.length > 0) {
+      toggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const children = node.querySelector('.outline-children');
+        if (children) {
+          const isHidden = children.classList.toggle('hidden');
+          toggle.classList.toggle('open', !isHidden);
+        }
+      });
+    }
+    row.appendChild(toggle);
+
+    const label = document.createElement('span');
+    label.className = 'label';
+    label.textContent = item.title;
+    row.appendChild(label);
+
+    if (pageNum !== null) {
+      const pg = pageNum;
+      row.addEventListener('click', () => goToPage(pg));
+      outlinePageMap.push({ row, pageNum: pg });
+    }
+
+    node.appendChild(row);
+
+    if (item.items && item.items.length > 0) {
+      const children = document.createElement('div');
+      children.className = 'outline-children';
+      children.appendChild(await buildOutlineTree(item.items));
+      node.appendChild(children);
+    }
+
+    frag.appendChild(node);
+  }
+
+  return frag;
+}
+
+function highlightOutline() {
+  const pages = spreads[currentSpread];
+  for (const { row, pageNum } of outlinePageMap) {
+    row.classList.toggle('active', pages.includes(pageNum));
+  }
+}
+
+// Load
+async function init() {
+  const loadingTask = pdfjsLib.getDocument(fileUrl);
+  pdfDoc = await loadingTask.promise;
+
+  buildSpreads(pdfDoc.numPages);
+  await renderOutline();
+
+  document.getElementById('loadingMsg').remove();
+
+  const startSpread = getSpreadForPage(targetPage);
+  await showSpread(startSpread >= 0 ? startSpread : 0);
+}
+
+init().catch(err => {
+  document.getElementById('loadingMsg').textContent = `Erreur : ${err.message}`;
+  document.getElementById('loadingMsg').style.color = '#c44';
+  console.error(err);
+});
+
+// Expose globals
+window.prevSpread = prevSpread;
+window.nextSpread = nextSpread;
+
+window.expandAll = function() {
+  const tree = document.getElementById('outlineTree');
+  tree.querySelectorAll('.outline-children.hidden').forEach(el => el.classList.remove('hidden'));
+  tree.querySelectorAll('.toggle:not(.empty)').forEach(el => el.classList.add('open'));
+};
+
+window.collapseAll = function() {
+  const tree = document.getElementById('outlineTree');
+  tree.querySelectorAll('.outline-children').forEach(el => el.classList.add('hidden'));
+  tree.querySelectorAll('.toggle:not(.empty)').forEach(el => el.classList.remove('open'));
+};
+
+window.toggleSidebar = function() {
+  const panel = document.getElementById('outlinePanel');
+  const btn = document.getElementById('sidebarBtn');
+  panel.classList.toggle('collapsed');
+  btn.classList.toggle('hidden', !panel.classList.contains('collapsed'));
+  // Recalc on sidebar toggle
+  setTimeout(() => {
+    pageCanvasCache.clear();
+    showSpread(currentSpread);
+  }, 300);
+};
+</script>
+</body>
+</html>
diff --git a/scripts/copy-pdfjs.sh b/scripts/copy-pdfjs.sh
new file mode 100755
index 0000000..2d91d0c
--- /dev/null
+++ b/scripts/copy-pdfjs.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+# Copie les fichiers PDF.js nécessaires depuis node_modules vers public/pdfjs/
+set -e
+
+DEST="public/pdfjs"
+SRC="node_modules/pdfjs-dist/build"
+
+mkdir -p "$DEST"
+cp "$SRC/pdf.min.mjs" "$DEST/pdf.min.mjs"
+cp "$SRC/pdf.worker.min.mjs" "$DEST/pdf.worker.min.mjs"
+
+echo "[copy-pdfjs] OK"