Fix: Play mobile layout adjustments

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

site/blueprints/pages/game.yml

@@ -55,6 +55,7 @@ columns:
           - strike
           - clear
           - link
+        maxlength: 200
       playLink:
         label: Lien(s) pour jouer
         help: Laissez vide pour afficher "à venir / coming soon"

src/components/layout/Header.svelte

@@ -26,9 +26,11 @@
     navigation.toggleMenu()
   }
 
+  const scrollableSlides = new Set(['about', 'blog'])
+
   onMount(() => {
     function onScroll(e) {
-      if (e.target?.classList?.contains('page-scrollable')) {
+      if (e.target?.classList?.contains('page-scrollable') && scrollableSlides.has(slides.active?.id)) {
         navigation.setScrolled(e.target.scrollTop > 100)
       }
     }
@@ -37,6 +39,7 @@
   })
 </script>
 
+<header>
   <nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
     <a href="/" class="navbar-logo">
       <img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
@@ -75,6 +78,7 @@
   </nav>
 
   <Menu />
+</header>
 
 <style>
   .navbar {

src/views/Play.svelte

@@ -438,11 +438,21 @@
     }
 
     .play-featured {
-      grid-area: 3/2 / span 12 / span 18;
+      grid-area: 6/4/span 12/span 18;
+      justify-content: flex-start;
+      padding: 0 10px;
+      gap: 0;
+    }
+
+    .play-description {
+      margin-top: .8rem;
+      font-size: var(--font-size-paragraph-mobile);
+      line-height: 1.6;
+      font-weight: 400;
     }
 
     .play-carousel {
-      grid-area: 16/2 / span 3 / span 18;
+      grid-area: 14/4 / span 3 / span 13;
     }
   }
 

src/views/Portfolio.svelte

@@ -1,7 +1,6 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
-  import { navigation } from '@state/navigation.svelte'
   import { createScrollNav } from '@composables/useScrollNav.svelte.js'
   import GalleryAnimation from '@components/ui/GalleryAnimation.svelte'
   import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
@@ -18,10 +17,6 @@
   const backgroundImage   = $derived(data?.backgroundImage ?? null)
   const currentProject = $derived(projects[currentIndex] ?? null)
 
-  $effect(() => {
-    if (isActive) navigation.setScrolled(currentIndex > 0)
-  })
-
   // Capture du hash synchrone avant que tout effect puisse le modifier
   const initialHash = window.location.hash.slice(1)
 
@@ -241,10 +236,11 @@
     color: var(--color-primary);
   }
 
-  .portfolio-description {
-    font-size: var(--font-size-subtitle);
-    line-height: 1.5;
+  .portfolio-description :global(p) {
+    font-size: var(--font-size-paragraph-mobile);
+    line-height: 1.4;
     opacity: 0.8;
+    letter-spacing: -2%;
   }
 
   .portfolio-keywords {