Fix: champs camelCase + anglais, contact data, nettoyage debug

- Blueprint site.yml : renommage en camelCase (contactEmail, contactAddress, socialLinks, legalNotices)
- Controller site.php : mentionsLegales() → legalNotices(), fix (string) casts pour la sérialisation JSON
- state/site.svelte.js : ajout champ contact
- Menu.svelte : nouveau composant dialog pour le menu overlay
- Header.svelte : intégration Menu, animation hamburger CSS
- router/index.js : suppression des console.log de debug

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

site/blueprints/site.yml

@@ -14,19 +14,19 @@ columns:
         status: listed
   - width: 1/2
     fields:
-      contact_email:
+      contactEmail:
         label: Email
         type: email
         width: 1/2
         translate: false
-      contact_address:
+      contactAddress:
         label: Adresse
         type: writer
         buttons: false
         nodes: false
         width: 1/2
         placeholder: 33 rue Jean Dupont
-      social_links:
+      socialLinks:
         label: Liens réseaux sociaux
         type: structure
         translate: false
@@ -55,7 +55,7 @@ columns:
       contact:
         type: fields
         fields:
-          mentions_legales:
+          legalNotices:
             label: Mentions légales (PDF)
             type: files
             max: 1

site/controllers/site.php

@@ -24,6 +24,18 @@ return function ($page, $kirby, $site) {
           'name' => $l->name()
         ];
       })->values(),
+      'contact' => [
+        'email'       => (string)$site->contactEmail()->value(),
+        'address'     => (string)$site->contactAddress()->value(),
+        'socials'     => $site->socialLinks()->toStructure()->map(function($item) {
+          return [
+            'label' => (string)$item->label()->value(),
+            'url'   => (string)$item->url()->value(),
+            'picto' => (string)$item->picto()->value(),
+          ];
+        })->values(),
+        'legalNotice' => $site->legalNotices()->toFile()?->url(),
+      ],
       'navigation' => $navPages->map(function($p) use ($kirby) {
         $titles = [];
         foreach ($kirby->languages() as $lang) {

src/components/layout/Header.svelte

@@ -2,6 +2,7 @@
   import { navigation } from '@state/navigation.svelte'
   import { locale } from '@state/locale.svelte'
   import { slides } from '@state/slides.svelte'
+  import Menu from '@components/layout/Menu.svelte'
 
   const isMenuOpen = $derived(navigation.isMenuOpen)
   const currentLang = $derived(locale.current)
@@ -41,6 +42,7 @@
     onclick={toggleMenu}
     aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
     aria-expanded={isMenuOpen}
+    aria-controls="main-menu"
   >
     <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="7"  cy="7"  r="2" fill="white" class="dot dot-tl" />
@@ -53,6 +55,8 @@
   </button>
 </nav>
 
+<Menu />
+
 <style>
   .navbar {
     width: 100%;

src/components/layout/Menu.svelte

@@ -0,0 +1,273 @@
+<script>
+  import { navigation } from '@state/navigation.svelte'
+  import { locale } from '@state/locale.svelte'
+  import { slides } from '@state/slides.svelte'
+  import { site } from '@state/site.svelte'
+
+  const isMenuOpen = $derived(navigation.isMenuOpen)
+  const currentLang = $derived(locale.current)
+  const activeId = $derived(slides.active?.id ?? 'home')
+  const contact = $derived(site.contact)
+
+  let dialogEl = $state(null)
+
+  $effect(() => {
+    if (!dialogEl) return
+    if (isMenuOpen) {
+      dialogEl.showModal()
+    } else if (dialogEl.open) {
+      dialogEl.close()
+    }
+  })
+
+  function handleCancel() {
+    navigation.closeMenu()
+  }
+
+  function handleNavClick() {
+    navigation.closeMenu()
+    // La navigation elle-même est gérée par le router via le <a href>
+  }
+
+  function getTitle(slide) {
+    return slide.titles?.[currentLang] || slide.title || slide.id
+  }
+
+  const labels = {
+    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' },
+    legal:   { fr: 'MENTIONS LÉGALES', en: 'LEGAL NOTICE' },
+  }
+
+  function t(key) {
+    return labels[key]?.[currentLang] || labels[key]?.fr || key
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  id="main-menu"
+  class="menu golden-grid"
+  aria-label="Menu principal"
+  oncancel={handleCancel}
+>
+  <div class="vertical-line-start"></div>
+  <div class="vertical-line vertical-line-col8"></div>
+  <div class="vertical-line-center"></div>
+  <div class="vertical-line vertical-line-col14"></div>
+  <div class="vertical-line-end"></div>
+
+  <!-- Navigation -->
+  <nav class="menu-list font-face-terminal" aria-label="Navigation principale">
+    <p class="menu-title">{t('menu')}</p>
+    <ol class="menu-nav-list font-face-danzza-bold">
+      {#each slides.all as slide, i}
+        <li class="menu-nav-item">
+          <a
+            href={slide.path}
+            onclick={handleNavClick}
+            class="menu-nav-link"
+            class:active={activeId === slide.id}
+            aria-current={activeId === slide.id ? 'page' : undefined}
+          >
+            <span class="menu-nav-number font-face-danzza-medium">
+              {String(i + 1).padStart(2, '0')}
+            </span>
+            <span class="menu-nav-label">
+              {getTitle(slide)}
+            </span>
+          </a>
+        </li>
+      {/each}
+    </ol>
+  </nav>
+
+  <!-- Connect -->
+  <aside class="menu-connect" aria-label="Contact">
+    <p class="menu-connect-title">{t('connect')}</p>
+
+    {#if contact.address}
+      <p class="menu-connect-label">{t('address')}</p>
+      <p class="menu-connect-info">{@html contact.address}</p>
+    {/if}
+
+    {#if contact.email}
+      <p class="menu-connect-label">MAIL</p>
+      <a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
+        {contact.email}
+      </a>
+    {/if}
+
+    {#if contact.socials?.length}
+      <p class="menu-connect-label">{t('socials')}</p>
+      {#each contact.socials as social}
+        <a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
+          {social.label}
+        </a>
+      {/each}
+    {/if}
+
+    {#if contact.legalNotice}
+      <a
+        href={contact.legalNotice}
+        download
+        class="menu-connect-legal"
+      >
+        {t('legal')}
+      </a>
+    {/if}
+  </aside>
+</dialog>
+
+<style>
+  /* Dialog reset + full screen */
+  dialog.menu {
+    border: none;
+    padding: 0;
+    margin: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.9);
+    color: white;
+  }
+
+  dialog.menu::backdrop {
+    display: none;
+  }
+
+  /* Extra vertical lines positions */
+  .vertical-line-col8  { grid-area: 1 / 8  / span 20 / span 1; }
+  .vertical-line-col14 { grid-area: 1 / 14 / span 20 / span 1; }
+
+  /* Nav section */
+  .menu-list {
+    grid-area: 7/6 / span 8 / span 4;
+    color: white;
+    align-self: center;
+    text-align: left;
+  }
+
+  .menu-title {
+    font-size: var(--font-size-title-hero);
+    font-weight: bold;
+  }
+
+  .menu-nav-list {
+    list-style: none;
+    font-size: var(--font-size-title-main);
+    margin-top: 0.5em;
+  }
+
+  .menu-nav-item {
+    margin-bottom: 10px;
+  }
+
+  .menu-nav-link {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .menu-nav-number {
+    display: block;
+    font-size: var(--font-size-caption);
+    margin-left: -20px;
+  }
+
+  .menu-nav-label {
+    display: block;
+    position: relative;
+    z-index: 1;
+    text-transform: uppercase;
+    color: transparent;
+    -webkit-text-stroke: 0.5px white;
+    transition: color 0.2s, -webkit-text-stroke 0.2s;
+  }
+
+  .menu-nav-link.active .menu-nav-label,
+  .menu-nav-link:hover .menu-nav-label {
+    color: #04fea0;
+    -webkit-text-stroke: 0px;
+  }
+
+  /* Connect section */
+  .menu-connect {
+    grid-area: 9/14 / span 6 / span 4;
+    font-size: var(--font-size-paragraph);
+    text-align: left;
+    color: white;
+  }
+
+  .menu-connect-title {
+    font-family: "Danzza Bold", sans-serif;
+    font-size: var(--font-size-title-section);
+    font-weight: 700;
+    margin-bottom: 0.5em;
+  }
+
+  .menu-connect-label {
+    font-family: "Danzza Medium", sans-serif;
+    text-transform: uppercase;
+    margin-top: 0.8em;
+  }
+
+  .menu-connect-info,
+  .menu-connect-email,
+  .menu-connect-social {
+    display: block;
+    font-size: var(--font-size-paragraph-small);
+    color: white;
+    text-decoration: none;
+  }
+
+  .menu-connect-legal {
+    display: block;
+    margin-top: 1em;
+    font-family: "Danzza Medium", sans-serif;
+    font-size: var(--font-size-paragraph-small);
+    color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+
+  /* Mobile */
+  @media screen and (max-width: 700px) {
+    .menu-list {
+      font-size: var(--font-size-subtitle-mobile);
+      grid-area: 6/4 / span 8 / span 8;
+      align-self: start;
+    }
+
+    .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-title {
+      display: none;
+    }
+
+    .menu-nav-list {
+      font-size: var(--font-size-subtitle-mobile);
+    }
+  }
+
+  /* Tablet */
+  @media screen and (min-width: 701px) and (max-width: 912px) {
+    .menu-list {
+      font-size: var(--font-size-title-section-tablet);
+    }
+
+    .menu-connect {
+      font-size: var(--font-size-subtitle-tablet);
+    }
+  }
+</style>

src/router/index.js

@@ -16,29 +16,19 @@ async function loadSlide(path) {
     slides.setLoading(path, true);
   }
 
-  console.log(`[router] loadSlide: ${path}`);
-
   try {
     const response = await fetch(`${path}.json`);
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     const data = await response.json();
 
-    console.log(`[router] fetch ok: ${path}`, {
-      template: data.template,
-      hasSite: !!data.site,
-      navigation: data.site?.navigation,
-    });
-
     if (!siteInitialized && data.site) {
       site.set(data.site);
       locale.initialize(data.site.language, data.site.languages);
       slides.init(data.site.navigation);
       siteInitialized = true;
-      console.log(`[router] slides initialized:`, slides.all.map(s => s.path));
     }
 
     slides.setData(path, data);
-    console.log(`[router] setData done: ${path}, slides loaded:`, slides.all.map(s => `${s.path}=${s.loaded}`));
   } catch (error) {
     console.error(`[router] Failed to load slide ${path}:`, error);
     slides.setLoading(path, false);
@@ -72,12 +62,10 @@ export function slideTo(path, { skipHistory = false } = {}) {
 
 export async function initRouter() {
   const initialPath = normalizePath(window.location.pathname);
-  console.log(`[router] initRouter, initialPath: ${initialPath}`);
 
   await loadSlide(initialPath);
 
   const idx = slides.getIndexByPath(initialPath);
-  console.log(`[router] after initial load, idx=${idx}, slides.all.length=${slides.all.length}`);
   if (idx !== -1) {
     slides.setActiveIndex(idx);
   }

src/state/site.svelte.js

@@ -4,6 +4,7 @@ let language = $state('fr')
 let languages = $state([])
 let logo = $state(null)
 let navigation = $state([])
+let contact = $state({})
 
 export const site = {
   get title() { return title },
@@ -12,6 +13,7 @@ export const site = {
   get languages() { return languages },
   get logo() { return logo },
   get navigation() { return navigation },
+  get contact() { return contact },
 
   set: (data) => {
     title = data.title || ''
@@ -20,5 +22,6 @@ export const site = {
     languages = data.languages || []
     logo = data.logo || null
     navigation = data.navigation || []
+    contact = data.contact || {}
   }
 }