Tweak: ajustements style Portfolio

- Catchphrase en gradient-blue + Danzza Medium
- Titre en font-size-title-main + uppercase
- Description en font-size-subtitle
- Numéro nav après la vignette, align-items flex-start
- Vignette active scale(1.5) translateX(-20%)
- padding-right nav sidebar augmenté
- grid-area portfolio-text réduit d'une colonne

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

src/views/Portfolio.svelte

@@ -105,7 +105,7 @@
     <!-- Infos projet (droite) -->
     <div class="portfolio-text" aria-live="polite">
       <h2>{currentProject.title}</h2>
-      <h3 class="portfolio-catchphrase">{@html currentProject.catchphrase}</h3>
+      <h3 class="portfolio-catchphrase gradient-blue">{@html currentProject.catchphrase}</h3>
       <div class="portfolio-description">{@html currentProject.description}</div>
       <div class="portfolio-keywords">
         {#each currentProject.keywords as kw}
@@ -128,8 +128,8 @@
         class:active={i === currentIndex}
         onclick={() => { currentIndex = i; setAnchor(i) }}
       >
-        <span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
         <img src={project.thumbnail} alt={project.title} />
+        <span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
       </button>
     {/each}
   </nav>
@@ -170,7 +170,7 @@
   }
 
   .portfolio-text {
-    grid-area: 7/11 / span 6 / span 6;
+    grid-area: 7/11 / span 6 / span 5;
     z-index: var(--z-content);
     text-align: left;
     display: flex;
@@ -181,18 +181,20 @@
   }
 
   .portfolio-text h2 {
-    font-size: var(--font-size-title-section);
+    font-size: var(--font-size-title-main);
+    text-transform: uppercase;
     line-height: 1.1;
   }
 
   .portfolio-catchphrase {
+    font-family: "Danzza Medium", sans-serif;
     font-size: var(--font-size-subtitle);
+    font-weight: 600;
     color: var(--color-primary);
-    font-weight: normal;
   }
 
   .portfolio-description {
-    font-size: var(--font-size-paragraph-small);
+    font-size: var(--font-size-subtitle);
     line-height: 1.5;
     opacity: 0.8;
   }
@@ -215,6 +217,7 @@
   /* Sidebar navigation */
   .portfolio-nav {
     grid-area: 4/17 / span 14 / span 4;
+    padding-right: 8rem;
     z-index: var(--z-content);
     display: flex;
     flex-direction: column;
@@ -225,7 +228,7 @@
 
   .portfolio-nav-item {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0.5rem;
     background: none;
     border: none;
@@ -236,13 +239,13 @@
   }
 
   .portfolio-nav-item.active {
-    transform: scale(1.25) translateX(-50%);
+    transform: scale(1.5) translateX(-20%);
     opacity: 1;
   }
 
   .portfolio-nav-number {
     color: var(--color-text);
-    font-size: var(--font-size-caption);
+    font-size: .5rem;
   }
 
   .portfolio-nav-item img {