fix: autoplay vidéos mobile + remplacement background image

- Home : matchMedia pour ne jouer que la vidéo visible (desktop/mobile)
- Expertise : play-then-pause pour forcer le décodage frame 0
- App : remplacement image de fond scrollable-page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/App.svelte

@@ -164,7 +164,7 @@
     position: fixed;
     inset: 0;
     z-index: -1;
-    background-image: url('/assets/img/BACKGROUND2.52010fb6a490a17ef475.png');
+    background-image: url('/assets/img/scrollable-page-background.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

src/views/Expertise.svelte

@@ -159,6 +159,11 @@
         isReverse            = false
         if (videoRev) videoRev.currentTime = dur
         requestAnimationFrame(() => computeOffset())
+        // Force le décodage de la première frame (nécessaire sur mobile)
+        videoFwd.play().then(() => {
+          videoFwd.pause()
+          videoFwd.currentTime = 0
+        }).catch(() => {})
       }
       if (videoFwd?.duration) {
         init()

src/views/Home.svelte

@@ -7,6 +7,9 @@
 
   const currentLang = $derived(locale.current)
 
+  let videoDesktop = $state(null)
+  let videoMobile  = $state(null)
+
   function playWhenReady(video) {
     if (!video) return
 
@@ -33,8 +36,20 @@
   }
 
   onMount(() => {
-    playWhenReady(document.getElementById('home-video'))
+    const mql = window.matchMedia('(max-width: 1000px)')
-    playWhenReady(document.getElementById('home-video-mobile'))
+
+    function syncVideo(isMobile) {
+      const active   = isMobile ? videoMobile : videoDesktop
+      const inactive = isMobile ? videoDesktop : videoMobile
+      if (inactive) inactive.pause()
+      playWhenReady(active)
+    }
+
+    syncVideo(mql.matches)
+    const onChange = (e) => syncVideo(e.matches)
+    mql.addEventListener('change', onChange)
+
+    return () => mql.removeEventListener('change', onChange)
   })
 
   function handleExplore() {
@@ -46,24 +61,24 @@
   <div class="home-bg">
     <figure class="home-figure">
       <video
+        bind:this={videoDesktop}
         muted
         playsinline
         loop
         preload="auto"
         tabindex="-1"
-        id="home-video"
         class="home-video home-video-desktop"
         poster={data.backgroundVideoPoster ?? undefined}
       >
         <source src={data.backgroundVideo ?? '/assets/video/Website_version.mp4'} type="video/mp4" />
       </video>
       <video
+        bind:this={videoMobile}
         muted
         playsinline
         loop
         preload="auto"
         tabindex="-1"
-        id="home-video-mobile"
         class="home-video home-video-mobile"
         poster={data.backgroundVideoMobilePoster ?? undefined}
       >