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/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%;
   }