Misc: ajustements i18n, menu et controller

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

site/controllers/site.php

@@ -26,7 +26,7 @@ return function ($page, $kirby, $site) {
       })->values(),
       'contact' => [
         'email'       => (string)$site->contactEmail()->value(),
-        'address'     => (string)$site->contactAddress()->value(),
+        'address'     => (string)$site->contactAddress()->nl2br(),
         'socials'     => $site->socialLinks()->toStructure()->map(function($item) {
           return [
             'label' => (string)$item->label()->value(),

src/components/layout/Header.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from 'svelte'
   import { navigation } from '@state/navigation.svelte'
   import { locale } from '@state/locale.svelte'
   import { slides } from '@state/slides.svelte'
@@ -9,6 +10,13 @@
   const currentLang = $derived(locale.current)
   const activeId = $derived(slides.active?.id ?? 'home')
   const menuItems = $derived(slides.all.filter(s => s.id !== 'home'))
+  const isScrolled = $derived(navigation.isScrolled)
+
+  // Reset scroll state when switching slides
+  $effect(() => {
+    void slides.activeIndex
+    navigation.setScrolled(false)
+  })
 
   function getTitle(slide) {
     return slide.titles?.[currentLang] || slide.title || slide.id
@@ -17,9 +25,19 @@
   function toggleMenu() {
     navigation.toggleMenu()
   }
+
+  onMount(() => {
+    function onScroll(e) {
+      if (e.target?.classList?.contains('page-scrollable')) {
+        navigation.setScrolled(e.target.scrollTop > 100)
+      }
+    }
+    window.addEventListener('scroll', onScroll, { capture: true })
+    return () => window.removeEventListener('scroll', onScroll, { capture: true })
+  })
 </script>
 
-<nav class="navbar" class:navbar--open={isMenuOpen}>
+<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" />
   </a>
@@ -64,6 +82,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
     z-index: var(--z-header);
     font-family: "Danzza";
     font-size: var(--font-size-paragraph);
@@ -100,6 +119,11 @@
     display: inline;
   }
 
+  .navbar--scrolled {
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(15px);
+  }
+
   .navbar--open {
     background-color: transparent;
     backdrop-filter: none;
@@ -174,6 +198,10 @@
       top: 0;
     }
 
+    .wg-logo {
+      height: 2rem;
+    }
+
     .navbar-item {
       display: none;
     }

src/components/layout/Menu.svelte

@@ -234,20 +234,40 @@
 
   /* Mobile — var(--breakpoint-mobile) = 700px */
   @media (max-width: 700px) {
+    .menu-title {
+      font-size: 1.75rem;
+      margin-bottom: 2.5rem;
+    }
     .menu-list {
       font-size: var(--font-size-subtitle-mobile);
       grid-area: 6/4 / span 8 / span 8;
       align-self: start;
     }
 
+    .menu-nav-number {
+      margin-left: -15px;
+    }
+    .menu-nav-label {
+      font-size: 1.25rem;
+    }
+
     .menu-connect {
-      font-size: var(--font-size-button-mobile);
       grid-area: 8/12 / span 8 / span 8;
       text-align: left;
       align-self: start;
       line-height: 1.4;
     }
 
+    .menu-connect-label {
+      font-size: var(--font-size-paragraph-small-mobile);
+    }
+
+    .menu-connect-info {
+      font-family: "Danzza Medium", sans-serif;
+      font-size: 14px;
+      line-height: 1.4;
+    }
+
     .menu-connect-title {
       display: none;
     }

src/i18n/index.js

@@ -1,51 +1,63 @@
-import { locale } from '@state/locale.svelte'
+import { locale } from "@state/locale.svelte";
 
 const dict = {
   // Article
-  'published_on':           { fr: 'Publié le',                            en: 'Published on' },
+  published_on: { fr: "Publié le", en: "Published on" },
-  'link_copied':            { fr: 'Lien copié !',                         en: 'Link copied!' },
+  link_copied: { fr: "Lien copié !", en: "Link copied!" },
-  'copy_link':              { fr: 'Copier le lien',                       en: 'Copy link' },
+  copy_link: { fr: "Copier le lien", en: "Copy link" },
-  'share_article':          { fr: 'Partager cet article',                 en: 'Share this article' },
+  share_article: { fr: "Partager cet article", en: "Share this article" },
-  'related':                { fr: 'Nos recommandations',                  en: 'Our recommendations' },
+  related: { fr: "Nos recommandations", en: "Our recommendations" },
-  'share_whatsapp':         { fr: 'Partager sur WhatsApp',                en: 'Share on WhatsApp' },
+  share_whatsapp: { fr: "Partager sur WhatsApp", en: "Share on WhatsApp" },
-  'share_x':                { fr: 'Partager sur X',                       en: 'Share on X' },
+  share_x: { fr: "Partager sur X", en: "Share on X" },
-  'share_facebook':         { fr: 'Partager sur Facebook',                en: 'Share on Facebook' },
+  share_facebook: { fr: "Partager sur Facebook", en: "Share on Facebook" },
-  'share_linkedin':         { fr: 'Partager sur LinkedIn',                en: 'Share on LinkedIn' },
+  share_linkedin: { fr: "Partager sur LinkedIn", en: "Share on LinkedIn" },
   // Blog
-  'loading':                { fr: 'Chargement…',                          en: 'Loading…' },
+  loading: { fr: "Chargement…", en: "Loading…" },
-  'read_article':           { fr: "Lire l'article",                       en: 'Read article' },
+  read_article: { fr: "Lire l'article", en: "Read article" },
   // Play
-  'play':                   { fr: 'Jouer',                                en: 'Play' },
+  play: { fr: "Jouer", en: "Play" },
-  'coming_soon':            { fr: 'Coming soon',                          en: 'Coming soon' },
+  coming_soon: { fr: "Coming soon", en: "Coming soon" },
   // Header
-  'close_menu':             { fr: 'Fermer le menu',                       en: 'Close menu' },
+  close_menu: { fr: "Fermer le menu", en: "Close menu" },
-  'open_menu':              { fr: 'Ouvrir le menu',                       en: 'Open menu' },
+  open_menu: { fr: "Ouvrir le menu", en: "Open menu" },
   // Footer
-  'location':               { fr: 'Adresse',                              en: 'Location' },
+  location: { fr: "Adresse", en: "Location" },
-  'contact':                { fr: 'Contact',                              en: 'Contact' },
+  contact: { fr: "Contactez-nous", en: "Contact" },
-  'follow_us':              { fr: 'Réseaux',                              en: 'Follow us' },
+  follow_us: { fr: "Suivez-nous", en: "Follow us" },
-  'newsletter_heading':     { fr: 'Inscrivez-vous à notre newsletter !',  en: 'Subscribe to our newsletter!' },
+  newsletter_heading: {
-  'newsletter_placeholder': { fr: 'Votre email',                         en: 'Enter your email' },
+    fr: "Inscrivez-vous à notre newsletter !",
-  'newsletter_submit':      { fr: "S'inscrire",                           en: 'Subscribe' },
+    en: "Subscribe to our newsletter!",
-  'newsletter_success':     { fr: 'Merci pour votre inscription !',       en: 'Thank you for subscribing!' },
+  },
-  'newsletter_error':       { fr: 'Une erreur est survenue.',             en: 'An error occurred.' },
+  newsletter_placeholder: { fr: "Votre email", en: "Enter your email" },
-  'copyright':              { fr: 'World Game © {year}. Tous droits réservés.', en: 'World Game © {year}. All rights reserved.' },
+  newsletter_submit: { fr: "S'inscrire", en: "Subscribe" },
-  'legal':                  { fr: 'Mentions légales',                     en: 'Legal notice' },
+  newsletter_success: {
-  'cookies':                { fr: 'Préférences cookies',                  en: 'Cookie preferences' },
+    fr: "Merci pour votre inscription !",
-  'privacy':                { fr: 'Confidentialité',                      en: 'Privacy' },
+    en: "Thank you for subscribing!",
+  },
+  newsletter_error: {
+    fr: "Une erreur est survenue.",
+    en: "An error occurred.",
+  },
+  copyright: {
+    fr: "World Game © {year}. Tous droits réservés.",
+    en: "World Game © {year}. All rights reserved.",
+  },
+  legal: { fr: "Mentions légales", en: "Legal notice" },
+  cookies: { fr: "Préférences cookies", en: "Cookie preferences" },
+  privacy: { fr: "Confidentialité", en: "Privacy" },
   // Menu
-  'menu':                   { fr: 'MENU',                                 en: 'MENU' },
+  menu: { fr: "MENU", en: "MENU" },
-  'connect':                { fr: 'CONNECT',                              en: 'CONNECT' },
+  connect: { fr: "CONNECT", en: "CONNECT" },
-  'address':                { fr: 'ADRESSE',                              en: 'LOCATION' },
+  address: { fr: "ADRESSE", en: "LOCATION" },
-  'mail':                   { fr: 'MAIL',                                 en: 'MAIL' },
+  mail: { fr: "MAIL", en: "MAIL" },
-  'socials':                { fr: 'RÉSEAUX',                              en: 'SOCIALS' },
+  socials: { fr: "RÉSEAUX", en: "SOCIALS" },
-}
+};
 
 export function t(key, vars = {}) {
-  const lang = locale.current
+  const lang = locale.current;
-  let str = dict[key]?.[lang] ?? dict[key]?.fr ?? key
+  let str = dict[key]?.[lang] ?? dict[key]?.fr ?? key;
   for (const [k, v] of Object.entries(vars)) {
-    str = str.replace(`{${k}}`, v)
+    str = str.replace(`{${k}}`, v);
   }
-  return str
+  return str;
 }

src/state/navigation.svelte.js

@@ -1,12 +1,15 @@
 let isMenuOpen = $state(false)
 let isLoading = $state(false)
+let isScrolled = $state(false)
 
 export const navigation = {
   get isMenuOpen() { return isMenuOpen },
   get isLoading() { return isLoading },
+  get isScrolled() { return isScrolled },
 
   toggleMenu: () => isMenuOpen = !isMenuOpen,
   openMenu: () => isMenuOpen = true,
   closeMenu: () => isMenuOpen = false,
-  setLoading: (value) => isLoading = value
+  setLoading: (value) => isLoading = value,
+  setScrolled: (value) => isScrolled = value,
 }

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/Expertise.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
+  import { navigation } from '@state/navigation.svelte'
   import { createScrollNav } from '@composables/useScrollNav.svelte.js'
 
   let { data } = $props()
@@ -32,6 +33,10 @@
   const items     = $derived(data?.items ?? [])
   const itemCount = $derived(items.length)
 
+  $effect(() => {
+    if (isActive) navigation.setScrolled(currentItem > 0)
+  })
+
   const segmentEnds = $derived(
     itemCount > 0 && videoDuration > 0
       ? Array.from({ length: itemCount }, (_, i) => videoDuration * (i + 1) / itemCount)
@@ -347,6 +352,7 @@
   /* Individual text items */
   .expertise-item {
     font-size: var(--font-size-expertise);
+    font-weight: 350;
     color: var(--color-text);
     text-align: left;
     line-height: 1.4;
@@ -375,6 +381,7 @@
 
     .expertise-item {
       font-size: var(--font-size-expertise-mobile);
+      transform: scale(0.75) translateX(2rem);
     }
   }
 

src/views/Portfolio.svelte

@@ -1,6 +1,7 @@
 <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'
@@ -17,6 +18,10 @@
   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)
 
@@ -79,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}')` : ''}
@@ -95,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>
 
@@ -111,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">
@@ -130,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}
@@ -149,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;
@@ -290,28 +316,160 @@
     border-radius: 8px;
   }
 
+  /* Arrows + counter */
+  .portfolio-arrows {
+    grid-area: 18/16 / span 2 / span 3;
+    z-index: var(--z-content);
+    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-gallery {
+
-      grid-area: 1/1 / span 20 / span 20;
+    .portfolio {
-      opacity: 0.3;
+      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);
     }
   }