Misc: ajustements i18n, menu et controller

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Feat: Portfolio mobile — background image + gallery animation + arrows/counter
2026-03-12 18:38:03 +01:00 · 2026-03-12 18:37:58 +01:00 · 2026-03-12 15:05:25 +01:00
9 changed files with 295 additions and 52 deletions
--- a/MOBILE.408a3a253492f65d39f8.png
+++ b/MOBILE.408a3a253492f65d39f8.png
--- a/site/controllers/site.php
+++ b/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(),
--- a/src/components/layout/Header.svelte
+++ b/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;
    }
--- a/src/components/layout/Menu.svelte
+++ b/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;
    }
--- a/src/i18n/index.js
+++ b/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' },
-  'link_copied':            { fr: 'Lien copié !',                         en: 'Link copied!' },
-  'copy_link':              { fr: 'Copier le lien',                       en: 'Copy link' },
-  'share_article':          { fr: 'Partager cet article',                 en: 'Share this article' },
-  'related':                { fr: 'Nos recommandations',                  en: 'Our recommendations' },
-  'share_whatsapp':         { fr: 'Partager sur WhatsApp',                en: 'Share on WhatsApp' },
-  'share_x':                { fr: 'Partager sur X',                       en: 'Share on X' },
-  'share_facebook':         { fr: 'Partager sur Facebook',                en: 'Share on Facebook' },
-  'share_linkedin':         { fr: 'Partager sur LinkedIn',                en: 'Share on LinkedIn' },
+  published_on: { fr: "Publié le", en: "Published on" },
+  link_copied: { fr: "Lien copié !", en: "Link copied!" },
+  copy_link: { fr: "Copier le lien", en: "Copy link" },
+  share_article: { fr: "Partager cet article", en: "Share this article" },
+  related: { fr: "Nos recommandations", en: "Our recommendations" },
+  share_whatsapp: { fr: "Partager sur WhatsApp", en: "Share on WhatsApp" },
+  share_x: { fr: "Partager sur X", en: "Share on X" },
+  share_facebook: { fr: "Partager sur Facebook", en: "Share on Facebook" },
+  share_linkedin: { fr: "Partager sur LinkedIn", en: "Share on LinkedIn" },
  // Blog
-  'loading':                { fr: 'Chargement…',                          en: 'Loading…' },
-  'read_article':           { fr: "Lire l'article",                       en: 'Read article' },
+  loading: { fr: "Chargement…", en: "Loading…" },
+  read_article: { fr: "Lire l'article", en: "Read article" },
  // Play
-  'play':                   { fr: 'Jouer',                                en: 'Play' },
-  'coming_soon':            { fr: 'Coming soon',                          en: 'Coming soon' },
+  play: { fr: "Jouer", en: "Play" },
+  coming_soon: { fr: "Coming soon", en: "Coming soon" },
  // Header
-  'close_menu':             { fr: 'Fermer le menu',                       en: 'Close menu' },
-  'open_menu':              { fr: 'Ouvrir le menu',                       en: 'Open menu' },
+  close_menu: { fr: "Fermer le menu", en: "Close menu" },
+  open_menu: { fr: "Ouvrir le menu", en: "Open menu" },
  // Footer
-  'location':               { fr: 'Adresse',                              en: 'Location' },
-  'contact':                { fr: 'Contact',                              en: 'Contact' },
-  'follow_us':              { fr: 'Réseaux',                              en: 'Follow us' },
-  'newsletter_heading':     { fr: 'Inscrivez-vous à notre newsletter !',  en: 'Subscribe to our newsletter!' },
-  'newsletter_placeholder': { fr: 'Votre email',                         en: 'Enter your email' },
-  'newsletter_submit':      { fr: "S'inscrire",                           en: 'Subscribe' },
-  'newsletter_success':     { fr: 'Merci pour votre inscription !',       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' },
+  location: { fr: "Adresse", en: "Location" },
+  contact: { fr: "Contactez-nous", en: "Contact" },
+  follow_us: { fr: "Suivez-nous", en: "Follow us" },
+  newsletter_heading: {
+    fr: "Inscrivez-vous à notre newsletter !",
+    en: "Subscribe to our newsletter!",
+  },
+  newsletter_placeholder: { fr: "Votre email", en: "Enter your email" },
+  newsletter_submit: { fr: "S'inscrire", en: "Subscribe" },
+  newsletter_success: {
+    fr: "Merci pour votre inscription !",
+    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' },
-  'connect':                { fr: 'CONNECT',                              en: 'CONNECT' },
-  'address':                { fr: 'ADRESSE',                              en: 'LOCATION' },
-  'mail':                   { fr: 'MAIL',                                 en: 'MAIL' },
-  'socials':                { fr: 'RÉSEAUX',                              en: 'SOCIALS' },
-}
+  menu: { fr: "MENU", en: "MENU" },
+  connect: { fr: "CONNECT", en: "CONNECT" },
+  address: { fr: "ADRESSE", en: "LOCATION" },
+  mail: { fr: "MAIL", en: "MAIL" },
+  socials: { fr: "RÉSEAUX", en: "SOCIALS" },
+};

 export function t(key, vars = {}) {
-  const lang = locale.current
-  let str = dict[key]?.[lang] ?? dict[key]?.fr ?? key
+  const lang = locale.current;
+  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;
 }
--- a/src/state/navigation.svelte.js
+++ b/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,
 }
--- a/src/styles/layout.css
+++ b/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;
+  }
+}
--- a/src/views/Expertise.svelte
+++ b/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);
    }
  }

--- a/src/views/Portfolio.svelte
+++ b/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) -->
-    <div class="portfolio-gallery" aria-hidden="true">
+    <!-- Galerie animation (gauche desktop / plein écran mobile) -->
+    <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;
-      opacity: 0.3;
+
+    .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);
    }
  }