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>

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;