Add BookPlayer scroll reading mode and floating mini-player widget

Replace paginated-only reading with a toggle between paginated (CSS columns)
and continuous vertical scroll modes. Replace the full-width fixed footer
player bar with a compact floating pill in the bottom-right corner,
expandable to show full controls, visualizer, and playlist.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/assets/css/main.css

@@ -12,7 +12,7 @@
   --color-text-muted: 0 0% 100% / 0.6;
 
   --header-height: 4rem;
-  --player-height: 5rem;
+  --player-height: 0rem;
   --sidebar-width: 280px;
 
   --font-display: 'Syne', sans-serif;

app/components/book/BookPlayer.vue

@@ -39,12 +39,21 @@
               >
                 <div class="i-lucide-list h-5 w-5" />
               </button>
+              <button
+                class="reader-bar-btn"
+                @click="toggleReadingMode"
+                :aria-label="isScrollMode ? 'Mode paginé' : 'Mode défilement'"
+                :title="isScrollMode ? 'Mode paginé' : 'Mode défilement'"
+              >
+                <div :class="isScrollMode ? 'i-lucide-book-open' : 'i-lucide-scroll-text'" class="h-5 w-5" />
+              </button>
               <div class="reader-bar-title">
                 <span class="reader-bar-num">{{ chapterIdx + 1 }}.</span>
                 {{ chapters[chapterIdx].title }}
               </div>
               <span class="reader-bar-pages">
-                {{ currentPage + 1 }}<span class="op-40">/</span>{{ totalPages }}
+                <template v-if="isScrollMode">{{ scrollPercent }}%</template>
+                <template v-else>{{ currentPage + 1 }}<span class="op-40">/</span>{{ totalPages }}</template>
               </span>
             </div>
 
@@ -68,25 +77,31 @@
             </Transition>
 
             <!-- Content viewport -->
-            <div class="reader-viewport" ref="viewportEl">
+            <div
+              class="reader-viewport"
+              :class="{ 'reader-viewport--scroll': isScrollMode }"
+              ref="viewportEl"
+              @scroll="onViewportScroll"
+            >
               <div
                 class="reader-columns prose"
+                :class="{ 'reader-columns--scroll': isScrollMode }"
                 ref="contentEl"
                 :style="contentStyle"
               >
                 <ContentRenderer v-if="activeChapter" :value="activeChapter" />
               </div>
-              <!-- Page turn shadow overlay -->
+              <!-- Page turn shadow overlay (paginated only) -->
-              <div class="reader-shadow" :class="{ visible: isTurning }" />
+              <div v-if="!isScrollMode" class="reader-shadow" :class="{ visible: isTurning }" />
             </div>
 
             <!-- Bottom navigation -->
             <div class="reader-nav">
               <button
                 class="reader-nav-btn"
-                :class="{ 'reader-nav-btn--hidden': currentPage <= 0 && chapterIdx <= 0 }"
+                :class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx <= 0 : (currentPage <= 0 && chapterIdx <= 0) }"
-                @click="prevPage"
+                @click="isScrollMode ? prevChapter() : prevPage()"
-                aria-label="Page précédente"
+                :aria-label="isScrollMode ? 'Chapitre précédent' : 'Page précédente'"
               >
                 <div class="i-lucide-chevron-left h-5 w-5" />
               </button>
@@ -103,9 +118,9 @@
 
               <button
                 class="reader-nav-btn"
-                :class="{ 'reader-nav-btn--hidden': currentPage >= totalPages - 1 && chapterIdx >= chapters.length - 1 }"
+                :class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx >= chapters.length - 1 : (currentPage >= totalPages - 1 && chapterIdx >= chapters.length - 1) }"
-                @click="nextPage"
+                @click="isScrollMode ? nextChapter() : nextPage()"
-                aria-label="Page suivante"
+                :aria-label="isScrollMode ? 'Chapitre suivant' : 'Page suivante'"
               >
                 <div class="i-lucide-chevron-right h-5 w-5" />
               </button>
@@ -114,8 +129,14 @@
 
         <!-- Hint -->
         <p class="bp-hint">
-          <span class="hidden md:inline">{{ bpContent?.reader.hints.desktop }}</span>
+          <template v-if="isScrollMode">
-          <span class="md:hidden">{{ bpContent?.reader.hints.mobile }}</span>
+            <span class="hidden md:inline">{{ bpContent?.reader.hints.desktopScroll ?? '← → chapitres · Défilement libre · Esc fermer' }}</span>
+            <span class="md:hidden">{{ bpContent?.reader.hints.mobileScroll ?? 'Défilez pour lire' }}</span>
+          </template>
+          <template v-else>
+            <span class="hidden md:inline">{{ bpContent?.reader.hints.desktop }}</span>
+            <span class="md:hidden">{{ bpContent?.reader.hints.mobile }}</span>
+          </template>
         </p>
       </div>
     </Transition>
@@ -146,6 +167,31 @@ const colWidth = ref(500)
 const showSommaire = ref(false)
 const isTurning = ref(false)
 
+// ── Reading mode ──
+const readingMode = ref<'paginated' | 'scroll'>('paginated')
+const isScrollMode = computed(() => readingMode.value === 'scroll')
+const scrollPercent = ref(0)
+
+function toggleReadingMode() {
+  readingMode.value = readingMode.value === 'paginated' ? 'scroll' : 'paginated'
+}
+
+// When switching back to paginated, recalc pages
+watch(readingMode, async (mode) => {
+  if (mode === 'paginated') {
+    await nextTick()
+    await nextTick()
+    setTimeout(recalcPages, 100)
+  }
+})
+
+function onViewportScroll() {
+  if (!isScrollMode.value || !viewportEl.value) return
+  const el = viewportEl.value
+  const max = el.scrollHeight - el.clientHeight
+  scrollPercent.value = max > 0 ? Math.round((el.scrollTop / max) * 100) : 0
+}
+
 const { init: initBookData, getSongs, getPrimarySong, getPlaylistOrder } = useBookData()
 const audioPlayer = useAudioPlayer()
 const playerStore = usePlayerStore()
@@ -213,13 +259,17 @@ const chapterSong = computed(() => {
 })
 
 // ── CSS columns pagination ──
-const contentStyle = computed(() => ({
+const contentStyle = computed(() => {
-  columnWidth: colWidth.value + 'px',
+  if (isScrollMode.value) return {}
-  columnGap: COL_GAP + 'px',
+  return {
-  transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
+    columnWidth: colWidth.value + 'px',
-}))
+    columnGap: COL_GAP + 'px',
+    transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
+  }
+})
 
 function recalcPages() {
+  if (isScrollMode.value) return
   if (!contentEl.value || !viewportEl.value) return
   colWidth.value = viewportEl.value.offsetWidth
   const sw = contentEl.value.scrollWidth
@@ -256,11 +306,27 @@ function goToChapter(idx: number) {
   chapterIdx.value = idx
   currentPage.value = 0
   showSommaire.value = false
+  // Scroll to top in scroll mode
+  if (isScrollMode.value && viewportEl.value) {
+    viewportEl.value.scrollTop = 0
+  }
   // Play chapter song
   const song = getPrimarySong(chapters[idx].slug)
   if (song) audioPlayer.loadAndPlay(song)
 }
 
+function nextChapter() {
+  if (chapterIdx.value < chapters.length - 1) {
+    goToChapter(chapterIdx.value + 1)
+  }
+}
+
+function prevChapter() {
+  if (chapterIdx.value > 0) {
+    goToChapter(chapterIdx.value - 1)
+  }
+}
+
 function nextPage() {
   if (currentPage.value < totalPages.value - 1) {
     triggerTurn()
@@ -306,11 +372,20 @@ function close() {
 }
 
 function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowRight') { e.preventDefault(); nextPage() }
+  if (isScrollMode.value) {
-  else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
+    // Scroll mode: left/right = chapters, up/down = natural scroll (no preventDefault)
-  else if (e.key === 'ArrowDown') { e.preventDefault(); if (chapterIdx.value < chapters.length - 1) goToChapter(chapterIdx.value + 1) }
+    if (e.key === 'ArrowRight') { e.preventDefault(); nextChapter() }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); if (chapterIdx.value > 0) goToChapter(chapterIdx.value - 1) }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); prevChapter() }
-  else if (e.key === 'Escape') close()
+    else if (e.key === 'Escape') close()
+  }
+  else {
+    // Paginated mode: left/right = pages, up/down = chapters
+    if (e.key === 'ArrowRight') { e.preventDefault(); nextPage() }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); nextChapter() }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); prevChapter() }
+    else if (e.key === 'Escape') close()
+  }
 }
 
 // ── Touch / swipe ──
@@ -321,6 +396,8 @@ function onTouchStart(e: TouchEvent) {
 }
 
 function onTouchEnd(e: TouchEvent) {
+  // Disable page-swipe in scroll mode (vertical scroll is native)
+  if (isScrollMode.value) return
   const diff = touchStartX - (e.changedTouches[0]?.screenX ?? 0)
   if (Math.abs(diff) > 50) {
     if (diff > 0) nextPage()
@@ -389,7 +466,7 @@ onUnmounted(() => {
   align-items: center;
   outline: none;
   overflow: hidden;
-  padding-bottom: 4.5rem;
+  padding-bottom: 1rem;
   transition: --scene-h1 1.6s ease, --scene-h2 1.6s ease;
 }
 
@@ -492,7 +569,7 @@ onUnmounted(() => {
 /* ─── HINT ─── */
 .bp-hint {
   position: absolute;
-  bottom: 5rem;
+  bottom: 0.5rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
@@ -678,6 +755,16 @@ onUnmounted(() => {
   max-width: none;
 }
 
+/* ─── Scroll mode overrides ─── */
+.reader-viewport--scroll {
+  overflow-y: auto;
+}
+.reader-columns--scroll {
+  height: auto;
+  column-fill: unset;
+  transition: none;
+}
+
 /* Tighten prose for column context */
 .reader-columns :deep(h1) {
   font-size: clamp(1.5rem, 3.5vw, 2rem);

app/components/layout/TheFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="border-t border-white/8 bg-surface-600 pb-[var(--player-height)]">
+  <footer class="border-t border-white/8 bg-surface-600">
     <div class="container-content px-4 py-8">
       <div class="flex flex-col items-center gap-4 md:flex-row md:justify-between">
         <!-- Credits -->

app/components/player/PlayerPersistent.vue

@@ -2,81 +2,129 @@
   <Transition name="player-slide">
     <div
       v-if="store.currentSong"
-      class="player-bar fixed inset-x-0 bottom-0 z-70 border-t border-white/8 bg-surface-600/80 backdrop-blur-xl"
+      ref="widgetRef"
+      class="mini-player"
     >
-      <!-- Expanded panel -->
+      <!-- Expanded panel (above the pill) -->
       <Transition name="panel-expand">
-        <div v-if="store.isExpanded" class="border-b border-white/8">
+        <div v-if="isExpanded" class="mini-panel">
-          <div class="container-content grid gap-4 p-4 md:grid-cols-2">
+          <!-- Visualizer -->
-            <PlayerVisualizer />
+          <div class="mini-panel-section">
+            <KeepAlive>
+              <PlayerVisualizer />
+            </KeepAlive>
+          </div>
+
+          <!-- Progress bar + controls -->
+          <div class="mini-panel-section">
+            <PlayerProgress />
+            <div class="mt-3 flex items-center justify-center">
+              <PlayerControls />
+            </div>
+          </div>
+
+          <!-- Volume + mode + time -->
+          <div class="mini-panel-section mini-panel-row">
+            <PlayerModeToggle />
+            <div class="flex items-center gap-2">
+              <button class="btn-ghost !p-1" @click="toggleMute">
+                <div :class="volumeIcon" class="h-4 w-4" />
+              </button>
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                :value="store.volume"
+                class="volume-slider w-20"
+                @input="handleVolumeChange"
+              >
+            </div>
+            <span class="font-mono text-xs text-white/40">
+              {{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
+            </span>
+          </div>
+
+          <!-- Playlist -->
+          <div class="mini-panel-playlist">
             <PlayerPlaylist />
           </div>
         </div>
       </Transition>
 
-      <!-- Progress bar (top of player) -->
+      <!-- Compact pill (always visible) -->
-      <PlayerProgress />
+      <div class="mini-pill" @click="onPillClick">
-
+        <!-- SVG circular progress ring -->
-      <!-- Main player bar -->
+        <div class="mini-pill-ring">
-      <div class="container-content flex items-center gap-4 px-4 py-2">
+          <svg viewBox="0 0 40 40" class="mini-pill-svg">
-        <!-- Track info -->
+            <circle
-        <div class="flex-1 min-w-0">
+              cx="20" cy="20" r="18"
-          <PlayerTrackInfo />
+              fill="none"
-        </div>
+              stroke="hsl(0 0% 100% / 0.1)"
-
+              stroke-width="2.5"
-        <!-- Controls -->
+            />
-        <div class="flex items-center gap-4">
+            <circle
-          <PlayerControls />
+              cx="20" cy="20" r="18"
-        </div>
+              fill="none"
-
+              stroke="hsl(12 76% 48%)"
-        <!-- Right section: mode + volume + expand -->
+              stroke-width="2.5"
-        <div class="hidden md:flex items-center gap-3 flex-shrink-0">
+              stroke-linecap="round"
-          <PlayerModeToggle />
+              :stroke-dasharray="circumference"
-
+              :stroke-dashoffset="circumference - (circumference * store.progress / 100)"
-          <!-- Volume -->
+              class="mini-pill-progress"
-          <div class="flex items-center gap-2">
+            />
-            <button class="btn-ghost !p-1" @click="toggleMute">
+          </svg>
-              <div :class="volumeIcon" class="h-4 w-4" />
+          <!-- Cover image inside ring -->
-            </button>
+          <div class="mini-pill-cover">
-            <input
+            <img
-              type="range"
+              v-if="store.currentSong.coverImage"
-              min="0"
+              :src="store.currentSong.coverImage"
-              max="1"
+              :alt="store.currentSong.title"
-              step="0.01"
+              class="h-full w-full object-cover"
-              :value="store.volume"
-              class="volume-slider w-20"
-              @input="handleVolumeChange"
             >
+            <div v-else class="i-lucide-music h-4 w-4 text-primary" />
           </div>
-
-          <!-- Time display -->
-          <span class="font-mono text-xs text-white/40 w-24 text-center">
-            {{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
-          </span>
-
-          <!-- Expand toggle -->
-          <button
-            class="btn-ghost !p-2"
-            :aria-label="store.isExpanded ? 'Réduire' : 'Développer'"
-            @click="store.toggleExpanded()"
-          >
-            <div :class="store.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
-          </button>
         </div>
+
+        <!-- Title -->
+        <span class="mini-pill-title">{{ store.currentSong.title }}</span>
+
+        <!-- Play/Pause -->
+        <button
+          class="mini-pill-btn"
+          :aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
+          @click.stop="togglePlayPause"
+        >
+          <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-4 w-4" />
+        </button>
+
+        <!-- Expand chevron -->
+        <button
+          class="mini-pill-btn"
+          :aria-label="isExpanded ? 'Réduire' : 'Développer'"
+          @click.stop="toggleExpanded"
+        >
+          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
+        </button>
       </div>
     </div>
   </Transition>
 </template>
 
 <script setup lang="ts">
-const store = usePlayerStore()
+import { onClickOutside } from '@vueuse/core'
-const { setVolume } = useAudioPlayer()
+
+const store = usePlayerStore()
+const { setVolume, togglePlayPause } = useAudioPlayer()
 
-// Initialize media session
 useMediaSession()
 
+const widgetRef = ref<HTMLElement>()
+const isExpanded = ref(false)
 let previousVolume = 0.8
 
+const circumference = 2 * Math.PI * 18 // r=18
+
 const volumeIcon = computed(() => {
   if (store.volume === 0) return 'i-lucide-volume-x'
   if (store.volume < 0.3) return 'i-lucide-volume'
@@ -98,37 +146,145 @@ function toggleMute() {
     setVolume(previousVolume)
   }
 }
+
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value
+}
+
+function onPillClick() {
+  isExpanded.value = !isExpanded.value
+}
+
+// Close expanded panel on click outside
+onClickOutside(widgetRef, () => {
+  if (isExpanded.value) isExpanded.value = false
+})
 </script>
 
 <style scoped>
-.player-slide-enter-active,
+/* ═══════════════════════════════════════
-.player-slide-leave-active {
+   MINI-PLAYER FLOATING WIDGET
-  transition: transform 0.3s var(--ease-out-expo);
+   ═══════════════════════════════════════ */
+.mini-player {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-width: 360px;
 }
 
-.player-slide-enter-from,
+/* ─── COMPACT PILL ─── */
-.player-slide-leave-to {
+.mini-pill {
-  transform: translateY(100%);
+  display: flex;
-}
+  align-items: center;
-
+  gap: 0.5rem;
-.panel-expand-enter-active,
+  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
-.panel-expand-leave-active {
+  border-radius: 9999px;
+  background: hsl(20 8% 8% / 0.9);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid hsl(0 0% 100% / 0.1);
+  cursor: pointer;
   transition: all 0.3s var(--ease-out-expo);
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
+}
+.mini-pill:hover {
+  border-color: hsl(12 76% 48% / 0.3);
+  box-shadow: 0 4px 32px hsl(12 76% 48% / 0.15);
+}
+
+.mini-pill-ring {
+  position: relative;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+}
+.mini-pill-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.mini-pill-progress {
+  transition: stroke-dashoffset 0.3s ease;
+}
+.mini-pill-cover {
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(20 8% 12%);
+}
+
+.mini-pill-title {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 140px;
+}
+
+.mini-pill-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  color: hsl(0 0% 100% / 0.7);
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+.mini-pill-btn:hover {
+  color: white;
+  background: hsl(0 0% 100% / 0.1);
+}
+
+/* ─── EXPANDED PANEL ─── */
+.mini-panel {
+  width: 340px;
+  margin-bottom: 0.5rem;
+  border-radius: 1rem;
+  background: hsl(20 8% 6% / 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid hsl(0 0% 100% / 0.08);
+  box-shadow: 0 8px 40px hsl(0 0% 0% / 0.5);
   overflow: hidden;
 }
 
-.panel-expand-enter-from,
+.mini-panel-section {
-.panel-expand-leave-to {
+  padding: 0.75rem 1rem;
-  max-height: 0;
+  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
-  opacity: 0;
+}
+.mini-panel-section:last-child {
+  border-bottom: none;
 }
 
-.panel-expand-enter-to,
+.mini-panel-row {
-.panel-expand-leave-from {
+  display: flex;
-  max-height: 400px;
+  align-items: center;
-  opacity: 1;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
+.mini-panel-playlist {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+/* ─── VOLUME SLIDER ─── */
 .volume-slider {
   -webkit-appearance: none;
   appearance: none;
@@ -137,7 +293,6 @@ function toggleMute() {
   border-radius: 2px;
   outline: none;
 }
-
 .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -147,7 +302,6 @@ function toggleMute() {
   border-radius: 50%;
   cursor: pointer;
 }
-
 .volume-slider::-moz-range-thumb {
   width: 12px;
   height: 12px;
@@ -156,4 +310,50 @@ function toggleMute() {
   border-radius: 50%;
   cursor: pointer;
 }
+
+/* ─── TRANSITIONS ─── */
+.player-slide-enter-active,
+.player-slide-leave-active {
+  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo);
+}
+.player-slide-enter-from,
+.player-slide-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.panel-expand-enter-active,
+.panel-expand-leave-active {
+  transition: all 0.3s var(--ease-out-expo);
+  overflow: hidden;
+}
+.panel-expand-enter-from,
+.panel-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(8px);
+}
+.panel-expand-enter-to,
+.panel-expand-leave-from {
+  max-height: 600px;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ─── MOBILE ─── */
+@media (max-width: 768px) {
+  .mini-player {
+    right: 0.75rem;
+    left: 0.75rem;
+    max-width: none;
+    align-items: stretch;
+  }
+  .mini-panel {
+    width: auto;
+  }
+  .mini-pill-title {
+    max-width: none;
+    flex: 1;
+  }
+}
 </style>

app/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-layout grid grid-cols-1 min-h-dvh">
     <LayoutTheHeader />
-    <main class="pb-[var(--player-height)]">
+    <main>
       <slot />
     </main>
     <LayoutTheFooter />

app/layouts/reading.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-layout grid grid-cols-1 min-h-dvh">
     <LayoutTheHeader />
-    <div class="reading-layout pb-[var(--player-height)]">
+    <div class="reading-layout">
       <aside class="chapter-sidebar hidden lg:block">
         <BookChapterNav />
       </aside>

site/pages/book-player.yml

@@ -8,7 +8,9 @@ reader:
   sommaireTitle: "Sommaire"
   hints:
     desktop: "← → pages · ↑ ↓ chapitres · Esc fermer"
+    desktopScroll: "← → chapitres · Défilement libre · Esc fermer"
     mobile: "Glissez pour naviguer"
+    mobileScroll: "Défilez pour lire"
     default: "Esc pour fermer"
 pdf:
   barTitle: "Une économie du don — enfin concevable"