Feat: Portfolio mobile — background image + gallery animation + arrows/counter

- Background fixe mobile (BG GAME MOBILE.png, position bottom)
- GalleryAnimation en plein écran sur mobile (position fixed, opacité 0.8)
- Arrows + compteur 01/05 ajoutés (desktop grid-area 18/16, mobile 18/15)
- Layout mobile : mockup centré, texte par-dessus, keywords masqués, nav horizontale 75px
- Séparation desktop-only / mobile-only pour la galerie

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

src/styles/layout.css

@@ -53,3 +53,18 @@
   grid-area: 1/16 / span 20 / span 1;
   height: 150%;
 }
+
+@media screen and (min-width: 700px) {
+  .mobile-only {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .mobile-only {
+    display: inherit;
+  }
+  .desktop-only {
+    display: none;
+  }
+}

src/views/Portfolio.svelte

@@ -84,6 +84,10 @@
   })
 </script>
 
+<div class="portfolio-gallery mobile-only" aria-hidden="true">
+  <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
+</div>
+
 <section
   class="portfolio golden-grid"
   style={backgroundImage ? `--background-image: url('${backgroundImage}')` : ''}
@@ -100,8 +104,8 @@
   <div class="vertical-line-end"                 aria-hidden="true"></div>
 
   {#if currentProject}
-    <!-- Galerie animation (gauche) -->
+    <!-- Galerie animation (gauche desktop / plein écran mobile) -->
-    <div class="portfolio-gallery" aria-hidden="true">
+    <div class="portfolio-gallery desktop-only" aria-hidden="true">
       <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
     </div>
 
@@ -116,6 +120,7 @@
         cls="portfolio-mockup-img"
       />
     </div>
+    <img class="content-background mobile-only" src="/assets/img/BG GAME MOBILE.408a3a253492f65d39f8.png" alt="">
 
     <!-- Infos projet (droite) -->
     <div class="portfolio-text" aria-live="polite">
@@ -135,7 +140,7 @@
     </div>
   {/if}
 
-  <!-- Sidebar navigation (extrême droite) -->
+  <!-- Sidebar navigation -->
   <nav class="portfolio-nav" aria-label="Projets">
     <ul role="list">
       {#each projects as project, i}
@@ -154,11 +159,27 @@
       {/each}
     </ul>
   </nav>
+
+  <!-- Arrows + counter -->
+  <div class="portfolio-arrows font-face-danzza" aria-label="Navigation projets">
+    <button
+      class="portfolio-arrow portfolio-arrow--up"
+      aria-label="Projet précédent"
+      disabled={currentIndex === 0}
+      onclick={() => { if (currentIndex > 0) { currentIndex--; setAnchor(currentIndex) } }}
+    ></button>
+    <button
+      class="portfolio-arrow portfolio-arrow--down"
+      aria-label="Projet suivant"
+      disabled={currentIndex >= projects.length - 1}
+      onclick={() => { if (currentIndex < projects.length - 1) { currentIndex++; setAnchor(currentIndex) } }}
+    ></button>
+    <span class="portfolio-counter">{String(currentIndex + 1).padStart(2, '0')}/{String(projects.length).padStart(2, '0')}</span>
+  </div>
 </section>
 
 <style>
   .portfolio {
-    background-color: #000;
     background-image: var(--background-image, none);
     background-position: center;
     background-repeat: no-repeat;
@@ -295,28 +316,160 @@
     border-radius: 8px;
   }
 
-  /* Mobile (≤ 700px) */
+  /* Arrows + counter */
-  @media (max-width: 700px) {
+  .portfolio-arrows {
-    .portfolio-gallery {
+    grid-area: 18/16 / span 2 / span 3;
-      grid-area: 1/1 / span 20 / span 20;
+    z-index: var(--z-content);
-      opacity: 0.3;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    color: white;
+    font-size: var(--font-size-caption);
+    letter-spacing: 1px;
   }
 
+  .portfolio-arrow {
+    width: 13px;
+    min-width: 13px;
+    height: 13px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding: 0;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+  }
+
+  .portfolio-arrow:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .portfolio-arrow--up {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 8L6 4L10 8'/%3E%3C/svg%3E");
+    margin-right: 2px;
+  }
+
+  .portfolio-arrow--down {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 4L6 8L10 4'/%3E%3C/svg%3E");
+    margin-right: 5px;
+  }
+
+  .portfolio-counter {
+    white-space: nowrap;
+  }
+
+  /* Mobile (≤ 700px) */
+  @media (max-width: 700px) {
+
+    .portfolio {
+      background: transparent;
+    }
+
+    /* Gallery over background, under content */
+    .portfolio-gallery {
+      position: fixed;
+      transform: translateX(-10vw);
+      width: 120vw;
+      opacity: 0.8;
+      z-index: 1;
+    }
+
+    .content-background {
+      position: fixed;
+      top: -7rem;
+      width: 100vw;
+      height: auto;
+      z-index: 5;
+    }
+
+    /* Mockup — centered top, behind text */
     .portfolio-mockup {
-      grid-area: 3/4 / span 8 / span 14;
+      grid-area: 4/4 / span 8 / span 14;
       z-index: var(--z-content);
     }
 
+    .portfolio-mockup :global(.portfolio-mockup-img) {
+      height: auto;
+    }
+
+    /* Text — over mockup, centered */
     .portfolio-text {
-      grid-area: 9/3 / span 6 / span 16;
+      grid-area: 9/3 / span 7 / span 16;
       z-index: var(--z-content);
       text-align: center;
     }
 
+    .portfolio-text h2 {
+      font-family: "Danzza Bold";
+      font-size: var(--font-size-title-section-mobile);
+    }
+
+    .portfolio-catchphrase {
+      font-size: var(--font-size-subtitle-mobile);
+    }
+
+    .portfolio-description {
+      font-size: var(--font-size-paragraph-mobile);
+    }
+
+    /* Hide keywords on mobile */
+    .portfolio-keywords {
+      display: none;
+    }
+
+    /* Nav thumbnails — horizontal, compact */
     .portfolio-nav {
-      grid-area: 17/4 / span 2 / span 14;
+      grid-area: 17/4 / span 1 / span 14;
       flex-direction: row;
       justify-content: center;
+      padding-right: 0;
+      height: 75px;
+      align-items: center;
+      overflow: hidden;
+    }
+
+    .portfolio-nav-item:not(:last-child) {
+      margin-bottom: 0;
+    }
+
+    .portfolio-nav-item button {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .portfolio-nav-item.active button {
+      transform: scale(1.15);
+    }
+
+    .portfolio-nav-item:hover button {
+      transform: scale(1.1);
+    }
+
+    .portfolio-nav-item img {
+      width: 45px;
+      height: 50px;
+    }
+
+    .portfolio-nav-number {
+      display: none;
+    }
+
+    /* Arrows — bottom right */
+    .portfolio-arrows {
+      grid-area: 18/15 / span 1 / span 3;
+      font-size: var(--font-size-caption-mobile, 11px);
+    }
+  }
+
+  /* Tablet (701px–912px) */
+  @media (min-width: 701px) and (max-width: 912px) {
+    .portfolio-text h2 {
+      font-size: var(--font-size-title-main-tablet);
     }
   }