Feat: images responsives mockup Portfolio via ResponsivePicture

- Config: presets mockup + mockup-webp (350/480/700/960w)
- portfolio.json.php: expose mockupSrcset + mockupWebp
- Portfolio.svelte: remplace <img> par ResponsivePicture
  sizes="(max-width: 700px) 90vw, 25vw"

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

site/config/config.php

@@ -108,6 +108,19 @@ return [
                 '600w' => ['width' => 600, 'format' => 'webp'],
                 '800w' => ['width' => 800, 'format' => 'webp'],
             ],
+            // Mockup portfolio — desktop ~25vw, mobile ~90vw
+            'mockup' => [
+                '350w' => ['width' => 350],
+                '480w' => ['width' => 480],
+                '700w' => ['width' => 700],
+                '960w' => ['width' => 960],
+            ],
+            'mockup-webp' => [
+                '350w' => ['width' => 350, 'format' => 'webp'],
+                '480w' => ['width' => 480, 'format' => 'webp'],
+                '700w' => ['width' => 700, 'format' => 'webp'],
+                '960w' => ['width' => 960, 'format' => 'webp'],
+            ],
             // Vignettes jeux — active: clamp(170px, 18.41vw, 355px), retina 2x → 710px
             'thumbnail' => [
                 '170w' => ['width' => 170],

site/templates/portfolio.json.php

@@ -15,6 +15,8 @@ $specificData = [
                             'webp'    => $f->srcset('gallery-webp'),
                           ])->values(),
       'mockup'                => $project->mockup()->toFile()?->url(),
+      'mockupSrcset'          => $project->mockup()->toFile()?->srcset('mockup'),
+      'mockupWebp'            => $project->mockup()->toFile()?->srcset('mockup-webp'),
       'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(),
       'keywords'       => $project->keywords()->toStructure()->map(fn($i) => [
                             'label' => $i->label()->value(),

src/views/Portfolio.svelte

@@ -3,6 +3,7 @@
   import { slides } from '@state/slides.svelte'
   import { createScrollNav } from '@composables/useScrollNav.svelte.js'
   import GalleryAnimation from '@components/ui/GalleryAnimation.svelte'
+  import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
 
   let { data } = $props()
 
@@ -101,7 +102,14 @@
 
     <!-- Mockup device (centre) -->
     <div class="portfolio-mockup">
-      <img src={currentProject.mockup} alt={currentProject.title} />
+      <ResponsivePicture
+        src={currentProject.mockup}
+        srcset={currentProject.mockupSrcset}
+        webp={currentProject.mockupWebp}
+        sizes="(max-width: 700px) 90vw, 25vw"
+        alt={currentProject.title}
+        cls="portfolio-mockup-img"
+      />
     </div>
 
     <!-- Infos projet (droite) -->
@@ -175,7 +183,8 @@
     justify-content: center;
   }
 
-  .portfolio-mockup img {
+  .portfolio-mockup :global(picture),
+  .portfolio-mockup :global(.portfolio-mockup-img) {
     width: 100%;
     height: 100%;
     object-fit: contain;