From 0788de3c05877f633c687e9011439ddbe48f88d4 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Sat, 7 Mar 2026 01:49:47 +0100
Subject: [PATCH] Remplacer les animations JS (IntersectionObserver) par des
 animations CSS pures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les animations fade-up/fade-right/fade-scale utilisaient un IntersectionObserver pour ajouter une classe .visible au scroll. Après un remplacement du DOM par le live preview StoryBlok, les nouveaux éléments n'étaient jamais observés et restaient invisibles (opacity: 0). Remplacé par des @keyframes CSS qui s'exécutent sans JS. Supprimé le middleware manuel (auto-enregistré par l'intégration @storyblok/astro quand livePreview est activé).
---
 src/layouts/Layout.astro | 17 -----------------
 src/middleware.ts        |  1 -
 src/styles/global.css    | 32 +++++++++++++-------------------
 3 files changed, 13 insertions(+), 37 deletions(-)
 delete mode 100644 src/middleware.ts

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1edce4f..457cb51 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -26,22 +26,5 @@ const { title = 'Compagnie AspiRêves' } = Astro.props;
     <Footer />
     <ThemeSwitcher />
 
-    <script>
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              entry.target.classList.add('visible');
-              observer.unobserve(entry.target);
-            }
-          });
-        },
-        { threshold: 0.1, rootMargin: '-50px' }
-      );
-
-      document.querySelectorAll('.fade-up, .fade-right, .fade-scale').forEach((el) => {
-        observer.observe(el);
-      });
-    </script>
   </body>
 </html>
diff --git a/src/middleware.ts b/src/middleware.ts
deleted file mode 100644
index 176c3fd..0000000
--- a/src/middleware.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { onRequest } from '@storyblok/astro/middleware.ts';
diff --git a/src/styles/global.css b/src/styles/global.css
index 490db20..39bada9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -54,39 +54,33 @@ body {
   animation-delay: 4s;
 }
 
-/* Scroll-triggered animations (Intersection Observer) */
+/* Entrance animations */
 
 .fade-up {
-  opacity: 0;
-  transform: translateY(2rem);
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  animation: fadeUp 0.6s ease both;
 }
 
-.fade-up.visible {
-  opacity: 1;
-  transform: translateY(0);
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(2rem); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .fade-right {
-  opacity: 0;
-  transform: translateX(2rem);
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  animation: fadeRight 0.6s ease both;
 }
 
-.fade-right.visible {
-  opacity: 1;
-  transform: translateX(0);
+@keyframes fadeRight {
+  from { opacity: 0; transform: translateX(2rem); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
 .fade-scale {
-  opacity: 0;
-  transform: scale(0.9);
-  transition: opacity 1s ease, transform 1s ease;
+  animation: fadeScale 1s ease both;
 }
 
-.fade-scale.visible {
-  opacity: 1;
-  transform: scale(1);
+@keyframes fadeScale {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
 }
 
 /* Page entrance animation */