From 8dcec0e2c75b53bb54ab1e12c811c0b472d27297 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 5 Mar 2026 17:48:15 +0100
Subject: [PATCH 1/2] Fix: supprime la transition slides-wrapper pendant le
 redimensionnement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Classe is-resizing ajoutée sur resize, retirée 150ms après le dernier
événement — évite le glissement animé lors du resize de fenêtre.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.svelte | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index cb790cb..94ea24e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -33,7 +33,17 @@
   const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
   const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
 
+  let isResizing = $state(false)
+  let resizeTimer = null
+
   onMount(() => {
+    const handleResize = () => {
+      isResizing = true
+      clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => { isResizing = false }, 150)
+    }
+    window.addEventListener('resize', handleResize)
+
     const handleKeydown = (e) => {
       if (e.key === 'ArrowRight') {
         const next = slides.all[slides.activeIndex + 1]
@@ -44,7 +54,11 @@
       }
     }
     window.addEventListener('keydown', handleKeydown)
-    return () => window.removeEventListener('keydown', handleKeydown)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('keydown', handleKeydown)
+      clearTimeout(resizeTimer)
+    }
   })
 </script>
 
@@ -54,6 +68,7 @@
 <main class="main">
   <div
     class="slides-wrapper"
+    class:is-resizing={isResizing}
     style="width: {wrapperWidth}; transform: {wrapperTransform}"
   >
     {#each slides.all as slide}
@@ -109,6 +124,10 @@
     transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
   }
 
+  .slides-wrapper.is-resizing {
+    transition: none;
+  }
+
   .slide {
     width: 100vw;
     height: 100vh;

From 01adf70585ba9d9967b2d5bd2f7198dfa4de358f Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 5 Mar 2026 17:54:28 +0100
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20pas=20de=20slide=20anim=C3=A9=20au?=
 =?UTF-8?q?=20chargement=20initial=20sur=20une=20page=20autre=20qu'accueil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La transition n'est activée qu'après le premier paint à la bonne position
(requestAnimationFrame une fois slides.all initialisé).
Remplace is-resizing par is-animated pour unifier les deux cas.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 94ea24e..4967b2f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -33,9 +33,18 @@
   const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
   const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
 
+  let isReady    = $state(false)
   let isResizing = $state(false)
   let resizeTimer = null
 
+  // Active la transition seulement après le premier paint à la bonne position.
+  // Sans ça, un chargement sur /expertise slide depuis l'accueil.
+  $effect(() => {
+    if (slides.all.length > 0 && !isReady) {
+      requestAnimationFrame(() => { isReady = true })
+    }
+  })
+
   onMount(() => {
     const handleResize = () => {
       isResizing = true
@@ -68,7 +77,7 @@
 <main class="main">
   <div
     class="slides-wrapper"
-    class:is-resizing={isResizing}
+    class:is-animated={isReady && !isResizing}
     style="width: {wrapperWidth}; transform: {wrapperTransform}"
   >
     {#each slides.all as slide}
@@ -121,11 +130,10 @@
   .slides-wrapper {
     display: flex;
     height: 100%;
-    transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .slides-wrapper.is-resizing {
-    transition: none;
+  .slides-wrapper.is-animated {
+    transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
   }
 
   .slide {