Fix: remplacer custom media queries par valeurs en dur, retirer postcss-custom-media

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

package-lock.json

@@ -17,99 +17,7 @@
       },
       "devDependencies": {
         "fs-extra": "^11.3.3",
-        "postcss": "^8.5.8",
+        "postcss": "^8.5.8"
-        "postcss-custom-media": "^12.0.1"
-      }
-    },
-    "node_modules/@csstools/cascade-layer-name-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-3.0.0.tgz",
-      "integrity": "sha512-/3iksyevwRfSJx5yH0RkcrcYXwuhMQx3Juqf40t97PeEy2/Mz2TItZ/z/216qpe4GgOyFBP8MKIwVvytzHmfIQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.19.0"
-      },
-      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^4.0.0",
-        "@csstools/css-tokenizer": "^4.0.0"
-      }
-    },
-    "node_modules/@csstools/css-parser-algorithms": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
-      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.19.0"
-      },
-      "peerDependencies": {
-        "@csstools/css-tokenizer": "^4.0.0"
-      }
-    },
-    "node_modules/@csstools/css-tokenizer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
-      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.19.0"
-      }
-    },
-    "node_modules/@csstools/media-query-list-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz",
-      "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.19.0"
-      },
-      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^4.0.0",
-        "@csstools/css-tokenizer": "^4.0.0"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -1281,35 +1189,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-custom-media": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-12.0.1.tgz",
-      "integrity": "sha512-66syE14+VeqkUf0rRX0bvbTCbNRJF132jD+ceo8th1dap2YJEAqpdh5uG98CE3IbgHT7m9XM0GIlOazNWqQdeA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^3.0.0",
-        "@csstools/css-parser-algorithms": "^4.0.0",
-        "@csstools/css-tokenizer": "^4.0.0",
-        "@csstools/media-query-list-parser": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=20.19.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
     "node_modules/regexparam": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz",

package.json

@@ -25,7 +25,6 @@
   },
   "devDependencies": {
     "fs-extra": "^11.3.3",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.8"
-    "postcss-custom-media": "^12.0.1"
   }
 }

postcss.config.js

@@ -1,5 +1,3 @@
-import customMedia from 'postcss-custom-media'
-
 export default {
-  plugins: [customMedia()]
+  plugins: []
 }

src/components/layout/Header.svelte

@@ -166,7 +166,7 @@
   }
 
   /* Mobile — var(--breakpoint-mobile) = 700px */
-  @media (--mobile) {
+  @media (max-width: 700px) {
     .navbar {
       min-height: 8vh;
       padding: 10vh 0 1vh;
@@ -179,7 +179,7 @@
   }
 
   /* Tablet — var(--breakpoint-tablet) = 912px */
-  @media (--tablet-only) {
+  @media (min-width: 701px) and (max-width: 912px) {
     .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 (--mobile) {
+  @media (max-width: 700px) {
     .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 (--tablet-only) {
+  @media (min-width: 701px) and (max-width: 912px) {
     .menu-list {
       font-size: var(--font-size-title-section-tablet);
     }

src/styles/variables.css

@@ -1,8 +1,3 @@
-/* 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 */

src/views/Article.svelte

@@ -231,7 +231,7 @@
   }
 
   /* --- Mobile --- */
-  @media (--mobile) {
+  @media (max-width: 700px) {
     .article {
       padding: 3rem 1.25rem 4rem;
     }
@@ -250,7 +250,7 @@
   }
 
   /* --- Tablet --- */
-  @media (--tablet-only) {
+  @media (min-width: 701px) and (max-width: 912px) {
     .article-title {
       font-size: var(--font-size-title-main-tablet);
     }

src/views/Blog.svelte

@@ -308,7 +308,7 @@
   }
 
   /* --- Mobile --- */
-  @media (--mobile) {
+  @media (max-width: 700px) {
     .blog-header {
       padding: 4rem 0 2rem;
     }
@@ -342,7 +342,7 @@
   }
 
   /* --- Tablet --- */
-  @media (--tablet-only) {
+  @media (min-width: 701px) and (max-width: 912px) {
     .blog-header :global(h1) {
       font-size: var(--font-size-title-main-tablet);
     }

src/views/Expertise.svelte

@@ -363,7 +363,7 @@
   }
 
   /* Mobile (≤ 700px) */
-  @media (--mobile) {
+  @media (max-width: 700px) {
     .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 (--tablet-only) {
+  @media (min-width: 701px) and (max-width: 912px) {
     .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 (--tablet-only) {
+  @media (min-width: 701px) and (max-width: 912px) {
     .home-subtitle {
       font-size: var(--font-size-subtitle-tablet);
       width: 70%;

src/views/Play.svelte

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

src/views/Portfolio.svelte

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