From 5d25de916645bfa92fe1967241cdcc4602b15427 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Sun, 5 Apr 2026 15:48:45 +0200
Subject: [PATCH] header

---
 src/components/Header.astro | 137 +++++-------------------------------
 src/pages/index.astro       |   2 +-
 src/styles/global.css       |   1 +
 3 files changed, 20 insertions(+), 120 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 6858712..fb7bcad 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,7 +2,7 @@
 const currentPath = Astro.url.pathname;
 const isHome = false; // hero is now white bg, no dark variant needed
 const nav = [
-  { label: 'projets', href: '/creations-evenement' },
+  { label: 'événement', href: '/creations-evenement' },
   { label: 'pérenne', href: '/realisations-perennes' },
   { label: 'processus', href: '/processus' },
   { label: 'contact', href: 'mailto:contact@aureliebarre.fr' },
@@ -24,44 +24,11 @@ const nav = [
       ))}
     </nav>
 
-    <button class="hd__burger" id="burger" aria-label="Menu" aria-expanded="false">
-      <span></span>
-      <span></span>
-    </button>
-  </div>
-
-  <!-- Mobile fullscreen -->
-  <div class="hd__mobile" id="mobile-nav" aria-hidden="true">
-    <nav class="hd__mobile-nav">
-      {nav.map((item, i) => (
-        <a href={item.href} class="hd__mobile-link" style={`--i:${i}`}>{item.label}</a>
-      ))}
-    </nav>
   </div>
 </header>
 
 <script>
-  const burger = document.getElementById('burger');
-  const mobile = document.getElementById('mobile-nav');
   const hd = document.getElementById('hd');
-
-  burger?.addEventListener('click', () => {
-    const open = burger.getAttribute('aria-expanded') === 'true';
-    burger.setAttribute('aria-expanded', String(!open));
-    mobile?.setAttribute('aria-hidden', String(open));
-    hd?.classList.toggle('is-open');
-    document.body.style.overflow = open ? '' : 'hidden';
-  });
-
-  document.querySelectorAll('.hd__mobile-link').forEach(l => {
-    l.addEventListener('click', () => {
-      burger?.setAttribute('aria-expanded', 'false');
-      mobile?.setAttribute('aria-hidden', 'true');
-      hd?.classList.remove('is-open');
-      document.body.style.overflow = '';
-    });
-  });
-
   let ticking = false;
   window.addEventListener('scroll', () => {
     if (!ticking) {
@@ -86,16 +53,16 @@ const nav = [
   /* ---- Default: dark text (inner pages) ---- */
   .hd__logo { color: var(--text); }
   .hd__link { color: var(--text-2); }
-  .hd__link:hover, .hd__link.is-active { color: var(--text); }
-  .hd__burger span { background: var(--text); }
+  .hd__link:hover { color: var(--text); }
+  .hd__link.is-active { color: var(--accent); }
+
 
   /* ---- Hero variant: white text on homepage ---- */
   .hd--hero .hd__logo { color: #fff; }
   .hd--hero .hd__link { color: rgba(255,255,255,0.6); }
-  .hd--hero .hd__link:hover,
-  .hd--hero .hd__link.is-active { color: #fff; }
-  .hd--hero .hd__link::after { background: #fff; }
-  .hd--hero .hd__burger span { background: #fff; }
+  .hd--hero .hd__link:hover { color: #fff; }
+  .hd--hero .hd__link.is-active { color: var(--accent); }
+  .hd--hero .hd__link::after { background: var(--accent); }
 
   /* ---- Scrolled: always white bg + dark text ---- */
   .hd.is-scrolled {
@@ -106,10 +73,9 @@ const nav = [
 
   .hd.is-scrolled .hd__logo { color: var(--text); }
   .hd.is-scrolled .hd__link { color: var(--text-2); }
-  .hd.is-scrolled .hd__link:hover,
-  .hd.is-scrolled .hd__link.is-active { color: var(--text); }
-  .hd.is-scrolled .hd__link::after { background: var(--text); }
-  .hd.is-scrolled .hd__burger span { background: var(--text); }
+  .hd.is-scrolled .hd__link:hover { color: var(--text); }
+  .hd.is-scrolled .hd__link.is-active { color: var(--accent); }
+  .hd.is-scrolled .hd__link::after { background: var(--accent); }
 
   .hd__in {
     display: flex;
@@ -133,8 +99,13 @@ const nav = [
 
   .hd__nav {
     display: flex;
-    gap: 2.5rem;
+    gap: clamp(1rem, 3vw, 2.5rem);
+    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding-bottom: 2px; /* For the stroke hover */
   }
+  .hd__nav::-webkit-scrollbar { display: none; }
 
   .hd__link {
     font-size: 0.7rem;
@@ -148,86 +119,14 @@ const nav = [
   .hd__link::after {
     content: '';
     position: absolute;
-    bottom: -2px; left: 0;
+    bottom: -4px; left: 0;
     width: 0; height: 1px;
-    background: var(--text);
+    background: var(--accent);
     transition: width 0.4s var(--ease);
   }
 
   .hd__link:hover::after,
   .hd__link.is-active::after { width: 100%; }
 
-  /* Burger */
-  .hd__burger {
-    display: none;
-    flex-direction: column;
-    gap: 5px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 8px;
-    z-index: 101;
-  }
 
-  .hd__burger span {
-    display: block;
-    width: 20px;
-    height: 1px;
-    transition: transform 0.4s var(--ease), opacity 0.2s, background 0.3s;
-  }
-
-  .is-open .hd__burger span:first-child { transform: translateY(3px) rotate(45deg); }
-  .is-open .hd__burger span:last-child { transform: translateY(-3px) rotate(-45deg); }
-
-  /* When menu is open, force dark burger (white bg behind) */
-  .is-open .hd__burger span { background: var(--text) !important; }
-
-  /* Mobile overlay */
-  .hd__mobile {
-    position: fixed;
-    inset: 0;
-    background: var(--bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s var(--ease), visibility 0.5s;
-    z-index: 99;
-  }
-
-  .is-open .hd__mobile {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .hd__mobile-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    text-align: center;
-  }
-
-  .hd__mobile-link {
-    font-family: var(--serif);
-    font-size: clamp(2rem, 6vw, 3rem);
-    color: var(--text);
-    text-decoration: none;
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.2s;
-  }
-
-  .is-open .hd__mobile-link {
-    opacity: 1;
-    transform: translateY(0);
-    transition-delay: calc(var(--i) * 80ms + 100ms);
-  }
-
-  .hd__mobile-link:hover { color: var(--text-2); }
-
-  @media (max-width: 768px) {
-    .hd__nav { display: none; }
-    .hd__burger { display: flex; }
-  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 906d2b1..2617f48 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -229,7 +229,7 @@ const allPerennes = getMockProjects('perenne');
     font-weight: 800;
     color: transparent;
     /* On utilise em pour que l'épaisseur s'adapte à la taille de l'écran */
-    -webkit-text-stroke: 0.02em #d45d3c; /* Un terracotta moderne et chaleureux */
+    -webkit-text-stroke: 0.02em var(--accent); /* Un terracotta moderne et chaleureux */
   }
 
   .hero__info {
diff --git a/src/styles/global.css b/src/styles/global.css
index 6fb6c02..b97374a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -8,6 +8,7 @@
   --text: #111;
   --text-2: #555;
   --text-3: #999;
+  --accent: #d45d3c;
   --border: #e0e0e0;
   --border-light: #f0f0f0;
   --serif: 'DM Serif Display', Georgia, serif;