Feat: couleur d'arrière-plan dynamique sur GalleryAnimation (galleryBackgroundColor)

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

src/components/ui/GalleryAnimation.svelte

@@ -4,7 +4,7 @@
    * @prop {Array<{src: string, srcset: string, webp: string}>} images
    * @prop {number} secondsPerImage — durée par image (défaut: 8s)
    */
-  let { images = [], secondsPerImage = 8 } = $props()
+  let { images = [], secondsPerImage = 8, backgroundColor = null } = $props()
 
   const columns = $derived.by(() => {
     const count    = images.length
@@ -29,7 +29,7 @@
 
 <div
   class="gallery-animation gallery-animation--vertical"
-  style="--gallery-duration: {columns[0]?.duration ?? 24}s"
+  style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}"
 >
   {#each columns as col}
     <div class="gallery-animation__column">
@@ -65,13 +65,14 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    background-color: var(--background-color, transparent);
   }
 
   /* Vertical mode (Portfolio) */
   .gallery-animation--vertical {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: 1rem;
   }
 
   .gallery-animation--vertical :global(.gallery-animation__column) {
@@ -84,6 +85,7 @@
   .gallery-animation--vertical :global(.gallery-animation__track) {
     display: flex;
     flex-direction: column;
+    row-gap: 1rem;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
   }

src/views/Portfolio.svelte

@@ -94,7 +94,7 @@
   {#if currentProject}
     <!-- Galerie animation (gauche) -->
     <div class="portfolio-gallery" aria-hidden="true">
-      <GalleryAnimation images={currentProject.images_gallery} />
+      <GalleryAnimation images={currentProject.images_gallery} backgroundColor={currentProject.gallery_background_color} />
     </div>
 
     <!-- Mockup device (centre) -->