From 52573cdc9fe41b8b458bbd0849a81c574a3ec571 Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Fri, 25 Sep 2026 12:29:05 +0200
Subject: [PATCH] =?UTF-8?q?Landing=20:=20visuel=20du=20hero=20ramen=C3=A9?=
 =?UTF-8?q?=20=C3=A0=20~1,3=20fois=20sa=20taille=20d'origine?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Débordement limité à 80 px à droite, hauteur 480 à 560 px.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 landing/src/App.jsx   | 2 +-
 landing/src/index.css | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/landing/src/App.jsx b/landing/src/App.jsx
index e5b75e5..314e12a 100644
--- a/landing/src/App.jsx
+++ b/landing/src/App.jsx
@@ -759,7 +759,7 @@ function HeroGraph({ className = '' }) {
     <div ref={containerRef} className={`relative w-full max-w-2xl mx-auto lg:mx-0 hero-graph ${className}`} data-reveal data-hero-galaxy>
       <canvas
         ref={canvasRef}
-        className="block w-full h-[40svh] sm:h-[clamp(420px,92vw,560px)] lg:h-[clamp(560px,46vw,700px)]"
+        className="block w-full h-[40svh] sm:h-[clamp(420px,92vw,560px)] lg:h-[clamp(480px,36vw,560px)]"
         aria-label="Arbre de famille animé"
       />
     </div>
diff --git a/landing/src/index.css b/landing/src/index.css
index 0508dda..f9a3a92 100644
--- a/landing/src/index.css
+++ b/landing/src/index.css
@@ -102,9 +102,9 @@ html.logo-intro .lk-nom { animation: lk-nom 700ms var(--ease-out) 380ms both; }
 .hero-txt { display: grid; gap: 24px; justify-items: start; }
 .hero-txt .t-d1 { max-width: 17ch; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; }
 .hero-txt .lede { max-width: 44ch; }
-/* Le visuel du hero déborde sur la marge droite, jamais au-delà de l'écran (24px de garde pour la barre de défilement) */
+/* Le visuel du hero gagne un peu de place sur la gouttière et la marge droite (80px au plus, 24px de garde pour la barre de défilement) */
 @media (min-width: 1024px) {
-  .hero-graph { max-width: none; margin-left: -40px; width: calc(100% + 40px + var(--gut) + max(0px, (100vw - 1200px) / 2) - 24px); }
+  .hero-graph { max-width: none; margin-left: -40px; width: calc(100% + 40px + min(80px, var(--gut) + max(0px, (100vw - 1200px) / 2) - 24px)); }
 }
 .ctas { display: flex; gap: 10px; flex-wrap: wrap; }