Perf: optimisation vidéos page d'accueil

- Vidéos recompressées (CRF 23, faststart, full res/fps) : 22MB → 5.8MB et 4.8MB
- Champs Kirby dynamiques pour vidéo desktop/mobile + posters
- Source vidéo dynamique via data.backgroundVideo (corrige le hardcode)
- Lecture déclenchée sur canplay plutôt qu'immédiatement (évite freeze)
- preload="auto" pour un buffering plus agressif

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

src/views/Home.svelte

@@ -7,36 +7,34 @@
 
   const currentLang = $derived(locale.current)
 
-  onMount(() => {
-    const playVideo = async (videoId) => {
-      const video = document.getElementById(videoId)
-      if (video) {
-        try {
-          video.muted = true
-          video.playsInline = true
-          const playPromise = video.play()
-          if (playPromise !== undefined) {
-            await playPromise
-          }
-        } catch (error) {
-          console.log(`Autoplay failed for ${videoId}:`, error)
-          const playOnInteraction = () => {
-            video.play().catch(e => console.log('Fallback play failed:', e))
-            document.removeEventListener('click', playOnInteraction)
-            document.removeEventListener('touchstart', playOnInteraction)
-          }
-          document.addEventListener('click', playOnInteraction)
-          document.addEventListener('touchstart', playOnInteraction)
+  function playWhenReady(video) {
+    if (!video) return
+
+    const attempt = () => {
+      video.muted = true
+      video.playsInline = true
+      video.play().catch(() => {
+        // Autoplay bloqué : on attend une interaction
+        const onInteraction = () => {
+          video.play().catch(() => {})
+          document.removeEventListener('click', onInteraction)
+          document.removeEventListener('touchstart', onInteraction)
         }
-      }
+        document.addEventListener('click', onInteraction)
+        document.addEventListener('touchstart', onInteraction)
+      })
     }
 
-    const timer = setTimeout(() => {
-      playVideo('home-video')
-      playVideo('home-video-mobile')
-    }, 100)
+    if (video.readyState >= 3) {
+      attempt()
+    } else {
+      video.addEventListener('canplay', attempt, { once: true })
+    }
+  }
 
-    return () => clearTimeout(timer)
+  onMount(() => {
+    playWhenReady(document.getElementById('home-video'))
+    playWhenReady(document.getElementById('home-video-mobile'))
   })
 
   function handleExplore() {
@@ -49,27 +47,25 @@
     <figure class="home-figure">
       <video
         muted
-        autoplay
         playsinline
         loop
-        controls={false}
-        preload="metadata"
+        preload="auto"
         id="home-video"
         class="home-video home-video-desktop"
+        poster={data.backgroundVideoPoster ?? undefined}
       >
-        <source src="/assets/video/Website_version.mp4" type="video/mp4" />
+        <source src={data.backgroundVideo ?? '/assets/video/Website_version.mp4'} type="video/mp4" />
       </video>
       <video
         muted
-        autoplay
         playsinline
         loop
-        controls={false}
-        preload="metadata"
+        preload="auto"
         id="home-video-mobile"
         class="home-video home-video-mobile"
+        poster={data.backgroundVideoMobilePoster ?? undefined}
       >
-        <source src="/assets/video/mobile_version_texte_fixe.mp4" type="video/mp4" />
+        <source src={data.backgroundVideoMobile ?? '/assets/video/mobile_version_texte_fixe.mp4'} type="video/mp4" />
       </video>
     </figure>
   </div>