diff --git a/static/script-bon.js b/static/script-bon.js
index d4da35f..87cf859 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -1,138 +1,149 @@
+async function setupPage() {
+
 // Checks if the user enabled prefers-reduced-motion
-const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 // Dictionary to keep track of animation intervals
-let animationIntervals = {};
+  let animationIntervals = {};
 // Dictionary to keep track of delay count for each animation
-let delays = {};
+  let delays = {};
 // Dictionary to keep track of frame for each animation
-let frames = {};
+  let frames = {};
 // dictionary to keep track of frame count for each animation
-let frameCounts = {};
+  let frameCounts = {};
 
-const illustrationAccueil = document.getElementById('illustration-accueil');
-const rennes = document.getElementById('rennes');
-const orsay = document.getElementById('orsay');
-const parterre = document.getElementById('parterre');
+  const illustrationAccueil = document.getElementById('illustration-accueil');
+  const rennes = document.getElementById('rennes');
+  const orsay = document.getElementById('orsay');
+  const parterre = document.getElementById('parterre');
 
 // Update ARIA live attributes based on prefers-reduced-motion
-function updateARIALiveAttributes() {
-  if (prefersReducedMotion) {
-    illustrationAccueil.setAttribute('aria-live', 'off');
-    rennes.setAttribute('aria-live', 'off');
-    orsay.setAttribute('aria-live', 'off');
-    parterre.setAttribute('aria-live', 'off');
-  } else {
-    illustrationAccueil.setAttribute('aria-live', 'polite');
-    rennes.setAttribute('aria-live', 'polite');
-    orsay.setAttribute('aria-live', 'polite');
-    parterre.setAttribute('aria-live', 'polite');
-  }
-}
-
-
-function animate(id, delay) {
-
-  // get the container and frames for the amination
-  const container = document.getElementById(id);
-  const framesList = container.children;
-
-  // set up the frame counter
-  frameCounts[id] = 0;
-
-  // hide all frames except for the first
-  framesList[0].style.display = "flex";
-  for (let i = 1; i < framesList.length; i++) {
-    framesList[i].style.display = "none";
+  function updateARIALiveAttributes() {
+    if (prefersReducedMotion) {
+      illustrationAccueil.setAttribute('aria-live', 'off');
+      rennes.setAttribute('aria-live', 'off');
+      orsay.setAttribute('aria-live', 'off');
+      parterre.setAttribute('aria-live', 'off');
+    } else {
+      illustrationAccueil.setAttribute('aria-live', 'polite');
+      rennes.setAttribute('aria-live', 'polite');
+      orsay.setAttribute('aria-live', 'polite');
+      parterre.setAttribute('aria-live', 'polite');
+    }
   }
 
-  // Stock frames and delay in dictionaries
-  frames[id] = framesList;
-  delays[id] = delay;
 
-  // Update ARIA live attributes
-  updateARIALiveAttributes();
+  function animate(id, delay) {
 
-  // Start the animation if prefers-reduced-motion is not enabled
-  if (!prefersReducedMotion) {
-    animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
+    // get the container and frames for the amination
+    const container = document.getElementById(id);
+    const framesList = container.children;
+
+    // set up the frame counter
+    frameCounts[id] = 0;
+
+    // hide all frames except for the first
+    framesList[0].style.display = "flex";
+    for (let i = 1; i < framesList.length; i++) {
+      framesList[i].style.display = "none";
+    }
+
+    // Stock frames and delay in dictionaries
+    frames[id] = framesList;
+    delays[id] = delay;
+
+    // Update ARIA live attributes
+    updateARIALiveAttributes();
+
+    // Start the animation if prefers-reduced-motion is not enabled
+    if (!prefersReducedMotion) {
+      animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
+    }
   }
-}
 
-function updateAnimation(id, framesList, totalFrames) {
+  function updateAnimation(id, framesList, totalFrames) {
 
-  // increment the frame counter for the given id
-  frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
+    // increment the frame counter for the given id
+    frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
 
-  // show the next frame
-  framesList[frameCounts[id]].style.display = "flex";
+    // show the next frame
+    framesList[frameCounts[id]].style.display = "flex";
 
-  // hide the previous frame
-  if (frameCounts[id] === 0) {
-    framesList[totalFrames - 1].style.display = "none";
-  } else {
-    framesList[frameCounts[id] - 1].style.display = "none";
+    // hide the previous frame
+    if (frameCounts[id] === 0) {
+      framesList[totalFrames - 1].style.display = "none";
+    } else {
+      framesList[frameCounts[id] - 1].style.display = "none";
+    }
   }
-}
 
-animate("illustration-accueil", 500);
-animate("rennes", 1000);
-animate("orsay", 2000);
-animate("parterre", 1500);
+  animate("illustration-accueil", 500);
+  animate("rennes", 1000);
+  animate("orsay", 2000);
+  animate("parterre", 1500);
 
-document.addEventListener('DOMContentLoaded', function() {
-  const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
-  toggleableElements.forEach(function(element) {
-    element.addEventListener('click', function() {
-      toggleAnimation();
+    const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
+    toggleableElements.forEach(function (element) {
+      element.addEventListener('click', function () {
+        toggleAnimation();
+      });
     });
+
+  function toggleAnimation() {
+    const toggleable = document.querySelector('.toggleable');
+    const imgTopToggleable = document.querySelector('.img_top_toggleable');
+    // Play the animations
+    if (toggleable.style.display === 'none') {
+      illustrationAccueil.setAttribute('aria-live', 'polite');
+      rennes.setAttribute('aria-live', 'polite');
+      orsay.setAttribute('aria-live', 'polite');
+      parterre.setAttribute('aria-live', 'polite');
+      toggleable.style.display = 'block';
+      imgTopToggleable.style.display = 'none';
+      Object.keys(animationIntervals).forEach(id => {
+        animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
+      });
+    } else {  // Pause the animations
+      illustrationAccueil.setAttribute('aria-live', 'off');
+      rennes.setAttribute('aria-live', 'off');
+      orsay.setAttribute('aria-live', 'off');
+      parterre.setAttribute('aria-live', 'off');
+      toggleable.style.display = 'none';
+      imgTopToggleable.style.display = 'block';
+      Object.keys(animationIntervals).forEach(id => {
+        clearInterval(animationIntervals[id]);
+      });
+    }
+  }
+
+  let lastScrollTop = 0;
+  let isScrolling = false;
+
+  window.addEventListener("scroll", function() {
+    if (!isScrolling) {
+      window.requestAnimationFrame(function() {
+        let currentPosition = window.scrollY || document.documentElement.scrollTop;
+        const toggleButton = document.querySelectorAll('.toggleButton');
+
+        if (currentPosition > lastScrollTop) {
+          // Scroll down
+          toggleButton.forEach(button => {
+            button.style.display = "none";
+          });
+        } else {
+          // Scroll up
+          toggleButton.forEach(button => {
+            button.style.display = "block";
+          });
+        }
+
+        lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
+        isScrolling = false;
+      });
+
+      isScrolling = true;
+    }
   });
-});
-
-function toggleAnimation() {
-  const toggleable = document.querySelector('.toggleable');
-  const imgTopToggleable = document.querySelector('.img_top_toggleable');
-  // Play the animations
-  if (toggleable.style.display === 'none') {
-    illustrationAccueil.setAttribute('aria-live', 'polite');
-    rennes.setAttribute('aria-live', 'polite');
-    orsay.setAttribute('aria-live', 'polite');
-    parterre.setAttribute('aria-live', 'polite');
-    toggleable.style.display = 'block';
-    imgTopToggleable.style.display = 'none';
-    Object.keys(animationIntervals).forEach(id => {
-      animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
-    });
-  } else {  // Pause the animations
-    illustrationAccueil.setAttribute('aria-live', 'off');
-    rennes.setAttribute('aria-live', 'off');
-    orsay.setAttribute('aria-live', 'off');
-    parterre.setAttribute('aria-live', 'off');
-    toggleable.style.display = 'none';
-    imgTopToggleable.style.display = 'block';
-    Object.keys(animationIntervals).forEach(id => {
-      clearInterval(animationIntervals[id]);
-    });
-  }
 }
 
-let lastScrollTop = 0; // Last position of the scroll
-
-window.addEventListener("scroll", function() {
-  let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
-  const toggleButton = document.querySelectorAll('.toggleButton');
-
-  if (currentPosition > lastScrollTop) {
-    // Scroll down
-    toggleButton.forEach(button => {
-      button.style.display = "none";
-    });
-  } else {
-    // Scroll up
-    toggleButton.forEach(button => {
-      button.style.display = "block";
-    });
-  }
-  lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
-}, false);
-
+// Loads the script once the document is ready
+document.addEventListener('DOMContentLoaded', setupPage);