header : animation de taille des personnages au scroll

Taille des SVG dans le menu contrôlée par la variable CSS inline
--char-size, mise à jour au scroll dans resizeOnScroll.js.
Clampée entre la taille initiale (max, lue depuis l'inline style)
et CHAR_SIZE_MIN. CSS nettoyé : .characters dans le contexte nav.

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

assets/css/src/_header.scss

@@ -19,14 +19,6 @@
     display: none;
   }
 
-  &.small {
-    .characters {
-      margin-top: -6.3em;
-      padding-bottom: 1em;
-      transition-duration: var(--transition-duration);
-    }
-  }
-
   nav ul {
     display: flex;
     justify-content: space-between;
@@ -34,6 +26,12 @@
       display: flex;
       align-items: center;
     }
+    li.characters svg {
+      width: var(--char-size);
+      height: var(--char-size);
+      overflow: visible;
+      transition: width 0.1s linear, height 0.1s linear;
+    }
   }
   .top {
     display: flex;
@@ -43,22 +41,6 @@
     position: relative;
   }
 
-  .characters {
-    scale: var(--scale);
-    margin-top: 1em;
-    transition-duration: var(--transition-duration);
-
-    svg {
-      overflow: visible;
-      height: 5em;
-      #left-character-background,
-      #right-character-background path,
-      [id*="pupil"] circle {
-        fill: var(--color-beige) !important;
-      }
-    }
-  }
-
   .logo {
     width: calc(100% - (2 * var(--space-body)));
     display: none;
@@ -93,12 +75,6 @@
     .logo {
       transition: transform 0.5s var(--curve);
     }
-    .characters {
-      transition: margin-top 0.5s var(--curve);
-      svg {
-        transition: width 0.5s var(--curve), height 0.5s var(--curve);
-      }
-    }
   }
 
   .header-menu {
@@ -154,18 +130,11 @@
       transition-duration: 1s;
       border-bottom: 0;
       border-radius: 0;
-      .logo,
-      .characters {
+      .logo {
         padding-top: 5vh;
         margin-top: inherit;
         display: block;
       }
-      .characters {
-        svg {
-          height: auto;
-          margin-top: 3.5em;
-        }
-      }
       .card {
         height: 100%;
       }

assets/js/characters/resizeOnScroll.js

@@ -0,0 +1,16 @@
+const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre la taille minimale
+const CHAR_SIZE_MIN = 60;     // taille minimale en px
+
+export function initCharactersResizeOnScroll() {
+  const charactersItem = document.querySelector(".main-header nav .characters");
+  if (!charactersItem) return;
+
+  // Taille maximale lue depuis le style inline — seule source de vérité
+  const charSizeMax = parseFloat(charactersItem.style.getPropertyValue("--char-size"));
+
+  window.addEventListener("scroll", () => {
+    const ratio = Math.min(1, window.scrollY / SCROLL_THRESHOLD);
+    const charSize = charSizeMax - ratio * (charSizeMax - CHAR_SIZE_MIN);
+    charactersItem.style.setProperty("--char-size", charSize + "px");
+  });
+}

assets/js/script.js

@@ -1,5 +1,6 @@
 import { initCharacterJump } from "./characters/jump.js";
 import { initPupilTracking } from "./characters/pupilTracking.js";
+import { initCharactersResizeOnScroll } from "./characters/resizeOnScroll.js";
 import { initEventFilters } from "./filters.js";
 import { Slideshow } from "./slideshow.js";
 import { initRollOutfit } from "./characters/roll.js";
@@ -53,6 +54,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   initCharacterJump();
   if (svg) initPupilTracking(svg);
+  initCharactersResizeOnScroll();
   initEventFilters();
   initRollOutfit();
   const gallery = new Slideshow(".gallery");

site/snippets/header.php

@@ -15,7 +15,7 @@
           <li>
             <a href="<?= page('spectacles')->url() ?>"><?= page('spectacles')->title() ?></a>
           </li>
-          <li>
+          <li class="characters" style="--char-size: 150px">
             <a href="<?= $site->url() ?>">
               <?= svg('assets/images/characters/characters-no-outfit.svg') ?>
             </a>