Feat: breakpoints CSS en @custom-media via postcss-custom-media

- postcss.config.js: plugin postcss-custom-media
- variables.css: @custom-media --mobile / --tablet / --tablet-only
- Remplacement de tous les max-width: 700px et 912px hardcodés
  par @media (--mobile), (--tablet), (--tablet-only)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/layout/Header.svelte

@@ -166,7 +166,7 @@
   }
 
   /* Mobile — var(--breakpoint-mobile) = 700px */
-  @media screen and (max-width: 700px) {
+  @media (--mobile) {
     .navbar {
       min-height: 8vh;
       padding: 10vh 0 1vh;
@@ -179,7 +179,7 @@
   }
 
   /* Tablet — var(--breakpoint-tablet) = 912px */
-  @media screen and (min-width: 701px) and (max-width: 912px) {
+  @media (--tablet-only) {
     .navbar-item {
       font-size: var(--font-size-paragraph-tablet);
       padding: 1vmax 1.8vmax;

src/components/layout/Menu.svelte

@@ -244,7 +244,7 @@
   }
 
   /* Mobile — var(--breakpoint-mobile) = 700px */
-  @media screen and (max-width: 700px) {
+  @media (--mobile) {
     .menu-list {
       font-size: var(--font-size-subtitle-mobile);
       grid-area: 6/4 / span 8 / span 8;
@@ -269,7 +269,7 @@
   }
 
   /* Tablet — var(--breakpoint-tablet) = 912px */
-  @media screen and (min-width: 701px) and (max-width: 912px) {
+  @media (--tablet-only) {
     .menu-list {
       font-size: var(--font-size-title-section-tablet);
     }

src/styles/variables.css

@@ -1,3 +1,8 @@
+/* Custom media queries — utilisables dans @media (--mobile) / @media (--tablet) */
+@custom-media --mobile      (max-width: 700px);
+@custom-media --tablet      (max-width: 912px);
+@custom-media --tablet-only (min-width: 701px) and (max-width: 912px);
+
 /* CSS Variables */
 :root {
   /* Colors */
@@ -6,10 +11,6 @@
   --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;
 

src/views/Expertise.svelte

@@ -363,7 +363,7 @@
   }
 
   /* Mobile (≤ 700px) */
-  @media screen and (max-width: 700px) {
+  @media (--mobile) {
     .expertise-title {
       grid-area: 5/4 / span 1 / span 7;
       font-size: var(--font-size-title-main-mobile);
@@ -379,7 +379,7 @@
   }
 
   /* Tablet (701–912px) */
-  @media screen and (min-width: 701px) and (max-width: 912px) {
+  @media (--tablet-only) {
     .expertise-title {
       grid-area: 5/6 / span 4 / span 12;
       font-size: var(--font-size-title-main-tablet);

src/views/Home.svelte

@@ -175,7 +175,7 @@
     }
   }
 
-  @media screen and (min-width: 701px) and (max-width: 912px) {
+  @media (--tablet-only) {
     .home-subtitle {
       font-size: var(--font-size-subtitle-tablet);
       width: 70%;

src/views/Play.svelte

@@ -386,7 +386,7 @@
   }
 
   /* --- Mobile (≤ 700px) --- */
-  @media screen and (max-width: 700px) {
+  @media (--mobile) {
     .game-preview {
       display: none;
     }

src/views/Portfolio.svelte

@@ -291,7 +291,7 @@
   }
 
   /* Mobile (≤ 700px) */
-  @media screen and (max-width: 700px) {
+  @media (--mobile) {
     .portfolio-gallery {
       grid-area: 1/1 / span 20 / span 20;
       opacity: 0.3;