From 5f7891882ec1d8783ae9136f729855c36a632a82 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 23 Jun 2026 15:59:11 +0200
Subject: [PATCH] =?UTF-8?q?header=20:=20resize=20SVG=20r=C3=A9el=20via=20v?=
 =?UTF-8?q?iewBox=20+=20--char-size=20sur=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajout de viewBox="0 0 191 163" sur le SVG pour que width CSS
redimensionne vraiment le dessin. Passage de scale/--char-scale
à width/--char-size (191px → 80px min sur 250px de scroll).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/src/_header.scss                       |  7 ++++---
 assets/images/characters/characters-no-outfit.svg |  2 +-
 assets/js/characters/resizeOnScroll.js            | 12 ++++++------
 site/snippets/header.php                          |  2 +-
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/assets/css/src/_header.scss b/assets/css/src/_header.scss
index 7d54285..37d657b 100644
--- a/assets/css/src/_header.scss
+++ b/assets/css/src/_header.scss
@@ -26,9 +26,10 @@
       display: flex;
       align-items: center;
     }
-    li.characters {
-      scale: var(--char-scale);
-      transition: scale 0.1s linear;
+    li.characters svg {
+      width: var(--char-size);
+      height: auto;
+      transition: width 0.1s linear;
     }
   }
   .top {
diff --git a/assets/images/characters/characters-no-outfit.svg b/assets/images/characters/characters-no-outfit.svg
index e518614..e910bdb 100644
--- a/assets/images/characters/characters-no-outfit.svg
+++ b/assets/images/characters/characters-no-outfit.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="191px" height="163px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
+<svg width="191px" height="163px" viewBox="0 0 191 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
     <g transform="matrix(1,0,0,1,-379.932397,-101.861172)">
         <path d="M518.5,164.85C518.5,164.85 516.34,171.67 520.73,174.87C524.88,177.89 525.79,180.19 525.44,182.28C524.73,186.48 519.58,186.98 517.69,187.02" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
         <path d="M499.12,197.5C495.07,188.8 506.71,190.56 510.84,182.28" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
diff --git a/assets/js/characters/resizeOnScroll.js b/assets/js/characters/resizeOnScroll.js
index b98ec29..096b126 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 l'échelle minimale
-const CHAR_SCALE_MIN = 0.8;
+const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre la taille minimale
+const CHAR_SIZE_MIN = 80;     // taille minimale en px
 
 export function initCharactersResizeOnScroll() {
   const charactersItem = document.querySelector(".main-header nav .characters");
   if (!charactersItem) return;
 
-  // Échelle initiale (max) lue depuis le style inline — seule source de vérité
-  const charScaleMax = parseFloat(charactersItem.style.getPropertyValue("--char-scale"));
+  // Taille initiale (max) 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 charScale = charScaleMax - ratio * (charScaleMax - CHAR_SCALE_MIN);
-    charactersItem.style.setProperty("--char-scale", charScale);
+    const charSize = charSizeMax - ratio * (charSizeMax - CHAR_SIZE_MIN);
+    charactersItem.style.setProperty("--char-size", charSize + "px");
   });
 }
diff --git a/site/snippets/header.php b/site/snippets/header.php
index 6140bdb..c31a6f8 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-scale: 1.3">
+          <li class="characters" style="--char-size: 191px">
             <a href="<?= $site->url() ?>">
               <?= svg('assets/images/characters/characters-no-outfit.svg') ?>
             </a>