Feat: responsive header mobile + variables breakpoints

- 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/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)