Remplacer les animations JS (IntersectionObserver) par des animations CSS pures

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

@@ -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>

src/middleware.ts

@@ -1 +0,0 @@
-export { onRequest } from '@storyblok/astro/middleware.ts';

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 */