Fix: portfolio mobile layout adjustments

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

site/blueprints/pages/project.yml

@@ -47,6 +47,7 @@ columns:
               - strike
               - clear
               - link
+            maxlength: 500
             help: Description complète du projet
 
       images:

src/App.svelte

@@ -83,8 +83,8 @@
     class:is-animated={isReady && !isResizing}
     style="width: {wrapperWidth}; transform: {wrapperTransform}"
   >
-    {#each slides.all as slide}
-      <section class="slide" data-slide={slide.id}>
+    {#each slides.all as slide, i}
+      <section class="slide" class:active={i === slides.activeIndex} data-slide={slide.id}>
         {#if slide.loaded}
           <svelte:component
             this={templates[slide.template] ?? Default}

src/styles/fonts.css

@@ -20,6 +20,13 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "Danzza Light";
+  src: local("Danzza Light"),
+    url("/assets/fonts/Danzza%20Light.otf") format("opentype");
+  font-display: swap;
+}
+
 @font-face {
   font-family: "Danzza Bold";
   src: local("Danzza Bold"),
@@ -36,9 +43,8 @@
   font-family: "Danzza";
 }
 
-/* Danzza Light n'existe pas — pointe vers Regular */
 .font-face-danzza-light {
-  font-family: "Danzza";
+  font-family: "Danzza Light";
 }
 
 .font-face-danzza-medium {

src/views/Portfolio.svelte

@@ -174,7 +174,7 @@
       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>
+    <output class="portfolio-counter">{String(currentIndex + 1).padStart(2, '0')}/{String(projects.length).padStart(2, '0')}</output>
   </div>
 </section>
 
@@ -270,7 +270,7 @@
 
   .portfolio-nav {
     grid-area: 4/17 / span 14 / span 4;
-    padding-right: 8rem;
+    margin-right: 7vw;
     z-index: var(--z-content);
     display: flex;
     flex-direction: column;
@@ -350,12 +350,13 @@
   }
 
   .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");
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACxSURBVChT7dExDgFBFMbxF4RKolC5ABGRuIIjqJQu4ATiDE6hcQKNhsJGi4YLqBQ6jfF/k53Js8YNfMkvb9/Mm8lmV5xzRTVsMDZrXkm+U8EQA9/ZFE7PYHND3Lc3T9DC1nciVxyg611dCKfq0EyhvWaE8LyAv3mFB/pYogFNO689dPDS4Qt2OOKOKjShnrHGPryG1YRmjo+91Kf7mf+wTWq4nNfwJ2NSw09kOPkuRuQNVDyfOxATXhEAAAAASUVORK5CYII=");
+    transform: rotate(180deg);
     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");
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACxSURBVChT7dExDgFBFMbxF4RKolC5ABGRuIIjqJQu4ATiDE6hcQKNhsJGi4YLqBQ6jfF/k53Js8YNfMkvb9/Mm8lmV5xzRTVsMDZrXkm+U8EQA9/ZFE7PYHND3Lc3T9DC1nciVxyg611dCKfq0EyhvWaE8LyAv3mFB/pYogFNO689dPDS4Qt2OOKOKjShnrHGPryG1YRmjo+91Kf7mf+wTWq4nNfwJ2NSw09kOPkuRuQNVDyfOxATXhEAAAAASUVORK5CYII=");
     margin-right: 5px;
   }
 
@@ -368,20 +369,23 @@
 
     .portfolio {
       background: transparent;
+      width: 100vw;
+      height: auto;
+      overflow: hidden;
     }
 
     /* Gallery over background, under content */
-    .portfolio-gallery {
+    .portfolio-gallery.mobile-only {
       position: fixed;
-      transform: translateX(-10vw);
-      width: 120vw;
       opacity: 0.8;
       z-index: 1;
+      transform: translateX(0vw);
+      width: 100vw;
     }
 
     .content-background {
       position: fixed;
-      top: -7rem;
+      bottom: 0;
       width: 100vw;
       height: auto;
       z-index: 5;
@@ -399,8 +403,9 @@
 
     /* Text — over mockup, centered */
     .portfolio-text {
-      grid-area: 9/3 / span 7 / span 16;
+      grid-area: 8/4/span 8/span 14;
       z-index: var(--z-content);
+      gap: .5rem;
       text-align: center;
     }
 
@@ -414,7 +419,10 @@
     }
 
     .portfolio-description {
+      font-family: "Danzza Light", sans-serif;
       font-size: var(--font-size-paragraph-mobile);
+      font-weight: 600;
+      line-height: 1.34;
     }
 
     /* Hide keywords on mobile */
@@ -422,6 +430,11 @@
       display: none;
     }
 
+    .portfolio-links {
+      margin-top: .5rem;
+      justify-content: center;
+    }
+
     /* Nav thumbnails — horizontal, compact */
     .portfolio-nav {
       grid-area: 17/4 / span 1 / span 14;
@@ -431,6 +444,7 @@
       height: 75px;
       align-items: center;
       overflow: hidden;
+      margin-right: 0;
     }
 
     .portfolio-nav-item:not(:last-child) {
@@ -451,8 +465,8 @@
     }
 
     .portfolio-nav-item img {
-      width: 45px;
-      height: 50px;
+      width: 3.75rem;
+      height: 3.75rem;
     }
 
     .portfolio-nav-number {
@@ -464,6 +478,10 @@
       grid-area: 18/15 / span 1 / span 3;
       font-size: var(--font-size-caption-mobile, 11px);
     }
+
+    .portfolio-counter {
+      font-size: 0.8125rem;
+    }
   }
 
   /* Tablet (701px–912px) */