From ccc5d79c7e3965b870222ffd2e5c4329ab2fef41 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 23 Jun 2026 15:53:45 +0200
Subject: [PATCH] =?UTF-8?q?header=20:=20scale=20au=20scroll=20plut=C3=B4t?=
 =?UTF-8?q?=20que=20width/height=20(1.3=20=E2=86=92=200.8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/src/_header.scss            |  8 +++-----
 assets/js/characters/resizeOnScroll.js | 12 ++++++------
 site/snippets/header.php               |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/assets/css/src/_header.scss b/assets/css/src/_header.scss
index 66c9565..7d54285 100644
--- a/assets/css/src/_header.scss
+++ b/assets/css/src/_header.scss
@@ -26,11 +26,9 @@
       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;
+    li.characters {
+      scale: var(--char-scale);
+      transition: scale 0.1s linear;
     }
   }
   .top {
diff --git a/assets/js/characters/resizeOnScroll.js b/assets/js/characters/resizeOnScroll.js
index 3879327..b98ec29 100644
--- a/assets/js/characters/resizeOnScroll.js
+++ b/assets/js/characters/resizeOnScroll.js
@@ -1,16 +1,16 @@
-const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre la taille minimale
-const CHAR_SIZE_MIN = 60;     // taille minimale en px
+const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre l'échelle minimale
+const CHAR_SCALE_MIN = 0.8;
 
 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"));
+  // Échelle initiale (max) lue depuis le style inline — seule source de vérité
+  const charScaleMax = parseFloat(charactersItem.style.getPropertyValue("--char-scale"));
 
   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");
+    const charScale = charScaleMax - ratio * (charScaleMax - CHAR_SCALE_MIN);
+    charactersItem.style.setProperty("--char-scale", charScale);
   });
 }
diff --git a/site/snippets/header.php b/site/snippets/header.php
index b9b3938..6140bdb 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -15,7 +15,7 @@
           <li>
             <a href="<?= page('spectacles')->url() ?>"><?= page('spectacles')->title() ?></a>
           </li>
-          <li class="characters" style="--char-size: 150px">
+          <li class="characters" style="--char-scale: 1.3">
             <a href="<?= $site->url() ?>">
               <?= svg('assets/images/characters/characters-no-outfit.svg') ?>
             </a>