Feat: page Portfolio avec galerie animée, navigation par scroll/touch/clavier

- Composable useScrollNav partagé entre Expertise et Portfolio (wheel/touch/clavier)
- GalleryAnimation : 3 colonnes CSS défilantes infinies avec décalage et delay
- Portfolio : golden grid, mockup centré, infos projet, sidebar vignettes navigables
- API portfolio.json.php alignée sur blueprint project.yml (catchphrase, images_gallery, mockup, keywords, external_links)
- Variable --ease-standard partagée dans variables.css
- Alias @composables ajouté dans vite.config.js
- Refactor Expertise pour utiliser le composable (comportement identique)

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

src/styles/gallery.css

@@ -0,0 +1,65 @@
+/* Gallery animation */
+:root {
+  --gallery-gap:      8px;
+  --gallery-duration: 24s;
+}
+
+.gallery-animation {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Vertical mode (Portfolio) */
+.gallery-animation--vertical {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gallery-gap);
+}
+
+.gallery-animation--vertical .gallery-animation__column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.gallery-animation--vertical .gallery-animation__track {
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track {
+  animation-name: galleryScrollDown;
+  animation-duration: var(--gallery-duration);
+}
+
+.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track {
+  animation-name: galleryScrollUp;
+  animation-duration: var(--gallery-duration);
+}
+
+.gallery-animation__image {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+@keyframes galleryScrollDown {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-50%); }
+}
+
+@keyframes galleryScrollUp {
+  from { transform: translateY(-50%); }
+  to   { transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gallery-animation__track {
+    animation: none;
+  }
+}

src/styles/index.css

@@ -6,3 +6,4 @@
 @import './buttons.css';
 @import './cursor.css';
 @import './utils.css';
+@import './gallery.css';

src/styles/variables.css

@@ -56,6 +56,9 @@
   --font-size-button-tablet: 12px;
   --font-size-caption-tablet: 11px;
 
+  /* Easing */
+  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
+
   /* Font sizes — expertise items */
   --font-size-expertise: 22px;
   --font-size-expertise-mobile: 18px;