diff --git a/src/App.svelte b/src/App.svelte
index 4fd9c5b..a0207ea 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from 'svelte'
+  import { onMount, untrack } from 'svelte'
   import { slides } from '@state/slides.svelte'
   import { slideTo } from '@router'
 
@@ -70,6 +70,19 @@
     if (activeTemplate) document.body.dataset.template = activeTemplate
   })
 
+  // Scroll to top of the new slide's scrollable container on navigation.
+  $effect(() => {
+    const idx = slides.activeIndex
+    const all = untrack(() => slides.all)
+    if (all.length === 0) return
+
+    const rafId = requestAnimationFrame(() => {
+      const section = document.querySelector(`[data-slide="${all[idx]?.id}"]`)
+      section?.querySelector('.page-scrollable')?.scrollTo(0, 0)
+    })
+    return () => cancelAnimationFrame(rafId)
+  })
+
   // Active la transition seulement après le premier paint à la bonne position.
   // Double rAF : le premier laisse passer un paint avec le bon translateX,
   // le second active is-animated — évite l'animation parasite au chargement.