portfolio : decouple animation direction from mockup position

refs #44

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

site/blueprints/pages/project.yml

@@ -149,7 +149,7 @@ tabs:
       - width: 1/2
         fields:
           galleryAnimationMode:
-            label: Mode d'animation de la galerie
+            label: Sens de l'animation
             type: toggles
             default: vertical
             options:
@@ -160,6 +160,16 @@ tabs:
                 text: Horizontal
                 icon: arrow-left-right
             help: "Direction du défilement des images dans la galerie animée"
+          mockupPosition:
+            label: Position du mockup
+            type: toggles
+            default: center
+            options:
+              - value: center
+                text: Centre
+              - value: left
+                text: Gauche
+            help: "Position du mockup sur la page"
           secondsPerImage:
             label: Durée de l'animation
             type: range

site/templates/portfolio.json.php

@@ -21,6 +21,7 @@ $specificData = [
       'mockupSrcset'          => $mockupFile?->srcset('mockup'),
       'mockupWebp'            => $mockupFile?->srcset('mockup-webp'),
       'galleryAnimationMode'   => $project->galleryAnimationMode()->value() ?: 'vertical',
+      'mockupPosition'         => $project->mockupPosition()->value() ?: 'center',
       'secondsPerImage'        => $project->secondsPerImage()->isNotEmpty() ? (int) $project->secondsPerImage()->value() : 8,
       'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(),
       'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null,

src/views/Portfolio.svelte

@@ -187,7 +187,7 @@
       {/if}
 
       <!-- Mockup device (centre) — prioritaire -->
-      <div class="portfolio-mockup portfolio-mockup--{currentProject.galleryAnimationMode}" bind:this={mockupEl}>
+      <div class="portfolio-mockup portfolio-mockup--{currentProject.mockupPosition}" bind:this={mockupEl}>
         <ResponsivePicture
           src={currentProject.mockup}
           srcset={currentProject.mockupSrcset}
@@ -279,7 +279,7 @@
     transform: translateX(2vw);
   }
 
-  .portfolio-mockup--horizontal {
+  .portfolio-mockup--left {
     grid-area: 7/1 / span 12 / span 8;
     transform: none;
   }
@@ -480,7 +480,7 @@
       z-index: var(--z-content);
     }
 
-    .portfolio-mockup--horizontal {
+    .portfolio-mockup--left {
       grid-area: 8/4 / span 8 / span 14;
       scale: 1.2;
     }