Feat: images responsives vignettes Play + composant ResponsivePicture

- Config: presets thumbnail + thumbnail-webp (170/255/355/510/710w)
- play.json.php: expose thumbnailSrcset + thumbnailWebp
- Nouveau composant ResponsivePicture.svelte (src, srcset, webp, sizes, alt, cls)
- Play.svelte: utilise ResponsivePicture dans le carousel
  sizes="clamp(170px, 18.41vw, 355px)"

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

src/components/ui/ResponsivePicture.svelte

@@ -0,0 +1,28 @@
+<script>
+  /**
+   * Image responsive avec support WebP via <picture>.
+   *
+   * @prop {string}  src    — URL fallback (format original)
+   * @prop {string}  srcset — srcset format original (ex: "200w ..., 400w ...")
+   * @prop {string}  webp   — srcset format WebP
+   * @prop {string}  sizes  — valeur de l'attribut sizes
+   * @prop {string}  [alt]  — texte alternatif
+   * @prop {string}  [cls]  — classe CSS à appliquer sur <img>
+   */
+  let { src, srcset, webp, sizes, alt = '', cls = '' } = $props()
+</script>
+
+<picture>
+  {#if webp}
+    <source type="image/webp" srcset={webp} {sizes} />
+  {/if}
+  <img
+    {src}
+    {srcset}
+    {sizes}
+    {alt}
+    class={cls}
+    loading="lazy"
+    decoding="async"
+  />
+</picture>

src/views/Play.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
+  import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
 
   let { data } = $props()
 
@@ -196,7 +197,13 @@
             onclick={() => selectGame(i)}
           >
             {#if game.thumbnail}
-              <img src={game.thumbnail} alt="" />
+              <ResponsivePicture
+                src={game.thumbnail}
+                srcset={game.thumbnailSrcset}
+                webp={game.thumbnailWebp}
+                sizes="clamp(170px, 18.41vw, 355px)"
+                alt=""
+              />
             {/if}
             <span class="play-carousel-title">{game.title}</span>
           </button>
@@ -360,7 +367,8 @@
     width: clamp(170px, 18.41vw, 355px);
   }
 
-  .play-carousel-item button img {
+  .play-carousel-item button img,
+  .play-carousel-item button :global(picture img) {
     object-fit: cover;
     transition: border-color 0.4s var(--ease-standard);
   }
@@ -371,7 +379,8 @@
     text-align: center;
   }
 
-  .play-carousel-item.active button img {
+  .play-carousel-item.active button img,
+  .play-carousel-item.active button :global(picture img) {
     border: 4px solid var(--color-primary);
     border-radius: 25%;
   }