From d44c886e8c0d8380263c3f6119db1f1950156186 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 19 Feb 2026 14:38:06 +0100
Subject: [PATCH] Feat: responsive header mobile + variables breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- variables.css : --breakpoint-mobile (700px) et --breakpoint-tablet (912px)
- Header : .navbar-item { display: none } en dessous de 700px
- Header/Menu : annotation des media queries avec les variables de référence

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/layout/Header.svelte | 5 +++--
 src/components/layout/Menu.svelte   | 4 ++--
 src/styles/variables.css            | 7 +++++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index c780726..31c33c8 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -168,13 +168,14 @@
     transition-delay: 0.1s;
   }
 
+  /* Mobile — var(--breakpoint-mobile) = 700px */
   @media screen and (max-width: 700px) {
     .navbar-item {
-      font-size: var(--font-size-paragraph-mobile);
-      padding: 1vmax 1.5vmax;
+      display: none;
     }
   }
 
+  /* Tablet — var(--breakpoint-tablet) = 912px */
   @media screen and (min-width: 701px) and (max-width: 912px) {
     .navbar-item {
       font-size: var(--font-size-paragraph-tablet);
diff --git a/src/components/layout/Menu.svelte b/src/components/layout/Menu.svelte
index be87401..ac08a0e 100644
--- a/src/components/layout/Menu.svelte
+++ b/src/components/layout/Menu.svelte
@@ -243,7 +243,7 @@
     text-transform: uppercase;
   }
 
-  /* Mobile */
+  /* Mobile — var(--breakpoint-mobile) = 700px */
   @media screen and (max-width: 700px) {
     .menu-list {
       font-size: var(--font-size-subtitle-mobile);
@@ -268,7 +268,7 @@
     }
   }
 
-  /* Tablet */
+  /* Tablet — var(--breakpoint-tablet) = 912px */
   @media screen and (min-width: 701px) and (max-width: 912px) {
     .menu-list {
       font-size: var(--font-size-title-section-tablet);
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 1f87eeb..4905b5d 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -6,6 +6,13 @@
   --color-background: #000;
   --color-text: #fff;
 
+  /* BREAKPOINTS (référence — non utilisables directement dans @media)
+   * --breakpoint-mobile : 700px
+   * --breakpoint-tablet : 912px
+   */
+  --breakpoint-mobile: 700px;
+  --breakpoint-tablet: 912px;
+
   /* Z-INDEX SCALE
    * --z-base     : éléments décoratifs (lignes verticales, bg)
    * --z-content  : contenu de slides (textes, overlays légers)