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>
2026-02-22 02:40:46 +01:00
parent 554602ad52
commit 837b5394fe
7 changed files with 391 additions and 102 deletions
--- a/app/assets/css/main.css
+++ b/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;
--- a/app/components/book/BookPlayer.vue
+++ b/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 -->
-              <div class="reader-shadow" :class="{ visible: isTurning }" />
+              <!-- Page turn shadow overlay (paginated only) -->
+              <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 }"
-                @click="prevPage"
-                aria-label="Page précédente"
+                :class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx <= 0 : (currentPage <= 0 && chapterIdx <= 0) }"
+                @click="isScrollMode ? prevChapter() : prevPage()"
+                :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 }"
-                @click="nextPage"
-                aria-label="Page suivante"
+                :class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx >= chapters.length - 1 : (currentPage >= totalPages - 1 && chapterIdx >= chapters.length - 1) }"
+                @click="isScrollMode ? nextChapter() : nextPage()"
+                :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>
-          <span class="md:hidden">{{ bpContent?.reader.hints.mobile }}</span>
+          <template v-if="isScrollMode">
+            <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(() => ({
-  columnWidth: colWidth.value + 'px',
-  columnGap: COL_GAP + 'px',
-  transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
-}))
+const contentStyle = computed(() => {
+  if (isScrollMode.value) return {}
+  return {
+    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() }
-  else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
-  else if (e.key === 'ArrowDown') { e.preventDefault(); if (chapterIdx.value < chapters.length - 1) goToChapter(chapterIdx.value + 1) }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); if (chapterIdx.value > 0) goToChapter(chapterIdx.value - 1) }
-  else if (e.key === 'Escape') close()
+  if (isScrollMode.value) {
+    // Scroll mode: left/right = chapters, up/down = natural scroll (no preventDefault)
+    if (e.key === 'ArrowRight') { e.preventDefault(); nextChapter() }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); prevChapter() }
+    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);
--- a/app/components/layout/TheFooter.vue
+++ b/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 -->
--- a/app/components/player/PlayerPersistent.vue
+++ b/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 class="container-content grid gap-4 p-4 md:grid-cols-2">
-            <PlayerVisualizer />
+        <div v-if="isExpanded" class="mini-panel">
+          <!-- Visualizer -->
+          <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) -->
-      <PlayerProgress />
-
-      <!-- Main player bar -->
-      <div class="container-content flex items-center gap-4 px-4 py-2">
-        <!-- Track info -->
-        <div class="flex-1 min-w-0">
-          <PlayerTrackInfo />
-        </div>
-
-        <!-- Controls -->
-        <div class="flex items-center gap-4">
-          <PlayerControls />
-        </div>
-
-        <!-- Right section: mode + volume + expand -->
-        <div class="hidden md:flex items-center gap-3 flex-shrink-0">
-          <PlayerModeToggle />
-
-          <!-- Volume -->
-          <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"
+      <!-- Compact pill (always visible) -->
+      <div class="mini-pill" @click="onPillClick">
+        <!-- SVG circular progress ring -->
+        <div class="mini-pill-ring">
+          <svg viewBox="0 0 40 40" class="mini-pill-svg">
+            <circle
+              cx="20" cy="20" r="18"
+              fill="none"
+              stroke="hsl(0 0% 100% / 0.1)"
+              stroke-width="2.5"
+            />
+            <circle
+              cx="20" cy="20" r="18"
+              fill="none"
+              stroke="hsl(12 76% 48%)"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              :stroke-dasharray="circumference"
+              :stroke-dashoffset="circumference - (circumference * store.progress / 100)"
+              class="mini-pill-progress"
+            />
+          </svg>
+          <!-- Cover image inside ring -->
+          <div class="mini-pill-cover">
+            <img
+              v-if="store.currentSong.coverImage"
+              :src="store.currentSong.coverImage"
+              :alt="store.currentSong.title"
+              class="h-full w-full object-cover"
            >
+            <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()
-const { setVolume } = useAudioPlayer()
+import { onClickOutside } from '@vueuse/core'
+
+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 {
-  transition: transform 0.3s var(--ease-out-expo);
+/* ═══════════════════════════════════════
+   MINI-PLAYER FLOATING WIDGET
+   ═══════════════════════════════════════ */
+.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,
-.player-slide-leave-to {
-  transform: translateY(100%);
-}
-
-.panel-expand-enter-active,
-.panel-expand-leave-active {
+/* ─── COMPACT PILL ─── */
+.mini-pill {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
+  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,
-.panel-expand-leave-to {
-  max-height: 0;
-  opacity: 0;
+.mini-panel-section {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
+}
+.mini-panel-section:last-child {
+  border-bottom: none;
 }

-.panel-expand-enter-to,
-.panel-expand-leave-from {
-  max-height: 400px;
-  opacity: 1;
+.mini-panel-row {
+  display: flex;
+  align-items: center;
+  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>
--- a/app/layouts/default.vue
+++ b/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 />
--- a/app/layouts/reading.vue
+++ b/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>
--- a/site/pages/book-player.yml
+++ b/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"