diff --git a/data/jardin.db b/data/jardin.db
index 27edf8f..018fa4e 100644
Binary files a/data/jardin.db and b/data/jardin.db differ
diff --git a/data/jardin.db-shm b/data/jardin.db-shm
index fe9ac28..4486b98 100644
Binary files a/data/jardin.db-shm and b/data/jardin.db-shm differ
diff --git a/data/jardin.db-wal b/data/jardin.db-wal
index e69de29..f9e9d39 100644
Binary files a/data/jardin.db-wal and b/data/jardin.db-wal differ
diff --git a/frontend/src/views/PlanningView.vue b/frontend/src/views/PlanningView.vue
index 70efb75..f284551 100644
--- a/frontend/src/views/PlanningView.vue
+++ b/frontend/src/views/PlanningView.vue
@@ -1,40 +1,45 @@
 <template>
-  <div class="p-4 max-w-6xl mx-auto space-y-6">
+  <div class="max-w-6xl mx-auto">
 
-    <!-- ====== En-tête ====== -->
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-      <div>
-        <h1 class="text-3xl font-bold text-green tracking-tight">Planning</h1>
-        <p class="text-text-muted text-xs mt-1">Visualisez et planifiez vos interventions sur 4 semaines.</p>
+    <!-- ====== En-tête sticky ====== -->
+    <div class="sticky top-14 lg:top-0 z-20 bg-bg border-b border-bg-soft/60 px-4 pt-4 pb-3 space-y-3">
+      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-green tracking-tight">Planning</h1>
+          <p class="text-text-muted text-xs mt-1">Visualisez et planifiez vos interventions sur 4 semaines.</p>
+        </div>
+
+        <div class="flex items-center gap-2 flex-wrap">
+          <!-- Toggle Calendrier / Gantt -->
+          <div class="flex bg-bg-soft/30 border border-bg-soft rounded-xl p-1 gap-1">
+            <button
+              @click="viewMode = 'calendar'"
+              :class="['py-1.5 px-3 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
+                viewMode === 'calendar' ? 'bg-green/20 text-green border border-green/30' : 'text-text-muted hover:text-text']"
+            >📅 Calendrier</button>
+            <button
+              @click="viewMode = 'gantt'"
+              :class="['py-1.5 px-3 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
+                viewMode === 'gantt' ? 'bg-aqua/20 text-aqua border border-aqua/30' : 'text-text-muted hover:text-text']"
+            >📊 Gantt</button>
+          </div>
+
+          <!-- Navigateur -->
+          <div class="flex items-center gap-2 bg-bg-soft/30 p-1 rounded-xl border border-bg-soft">
+            <button @click="prevPeriod" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Préc.</button>
+            <button @click="goToday"   class="btn-primary !py-1.5 !px-4 text-xs !rounded-lg">Aujourd'hui</button>
+            <button @click="nextPeriod" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Suiv.</button>
+          </div>
+        </div>
       </div>
 
-      <div class="flex items-center gap-2 flex-wrap">
-        <!-- Toggle Calendrier / Gantt -->
-        <div class="flex bg-bg-soft/30 border border-bg-soft rounded-xl p-1 gap-1">
-          <button
-            @click="viewMode = 'calendar'"
-            :class="['py-1.5 px-3 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
-              viewMode === 'calendar' ? 'bg-green/20 text-green border border-green/30' : 'text-text-muted hover:text-text']"
-          >📅 Calendrier</button>
-          <button
-            @click="viewMode = 'gantt'"
-            :class="['py-1.5 px-3 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
-              viewMode === 'gantt' ? 'bg-aqua/20 text-aqua border border-aqua/30' : 'text-text-muted hover:text-text']"
-          >📊 Gantt</button>
-        </div>
-
-        <!-- Navigateur -->
-        <div class="flex items-center gap-2 bg-bg-soft/30 p-1 rounded-xl border border-bg-soft">
-          <button @click="prevPeriod" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Préc.</button>
-          <button @click="goToday"   class="btn-primary !py-1.5 !px-4 text-xs !rounded-lg">Aujourd'hui</button>
-          <button @click="nextPeriod" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Suiv.</button>
-        </div>
+      <div class="text-yellow font-bold text-sm tracking-widest uppercase bg-yellow/5 px-4 py-1 rounded-full border border-yellow/10 self-start inline-block">
+        {{ periodLabel }}
       </div>
     </div>
 
-    <div class="text-yellow font-bold text-sm tracking-widest uppercase bg-yellow/5 px-4 py-1 rounded-full border border-yellow/10 self-start">
-      {{ periodLabel }}
-    </div>
+    <!-- ====== Contenu scrollable ====== -->
+    <div class="p-4 space-y-6">
 
     <!-- ====== VUE CALENDRIER ====== -->
     <template v-if="viewMode === 'calendar'">
@@ -257,6 +262,7 @@
       </div>
     </template>
 
+    </div><!-- fin contenu scrollable -->
   </div>
 </template>