wip

bun.lock

@@ -24,7 +24,7 @@
         "@sentry/core": "^10.50.0",
         "@types/bun": "^1.3.13",
         "@types/node": "^25.6.0",
-        "@typescript/native-preview": "7.0.0-dev.20260423.1",
+        "@typescript/native-preview": "7.0.0-dev.20260425.1",
         "@vitejs/plugin-legacy": "^8.0.1",
         "better-typescript-lib": "^2.12.0",
         "browserslist": "^4.28.2",
@@ -37,7 +37,7 @@
         "fdir": "^6.5.0",
         "globals": "^17.5.0",
         "jiti": "^2.6.1",
-        "knip": "^6.6.2",
+        "knip": "^6.6.3",
         "lightningcss": "^1.32.0",
         "lightningcss-cli": "^1.32.0",
         "oxlint": "^1.61.0",
@@ -659,21 +659,21 @@
 
     "@typescript/lib-webworker": ["@better-typescript-lib/webworker@2.12.0", "", { "peerDependencies": { "typescript": ">=4.5.2" } }, "sha512-YktWJCUYdrRORhd4NgnPZCEzElDglPZzVnfkxGNmEhPpFE1W6ThKDQqkvMZapf3T+0xGeDqJx9V4xhFNnv56Xw=="],
 
-    "@typescript/native-preview": ["@typescript/native-preview@7.0.0-dev.20260423.1", "", { "optionalDependencies": { "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260423.1", "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260423.1", "@typescript/native-preview-linux-arm": "7.0.0-dev.20260423.1", "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260423.1", "@typescript/native-preview-linux-x64": "7.0.0-dev.20260423.1", "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260423.1", "@typescript/native-preview-win32-x64": "7.0.0-dev.20260423.1" }, "bin": { "tsgo": "bin/tsgo.js" } }, "sha512-9WD7TJJlGvt9PQqJI/+44dVP4oqGQFIkYrpXt7nlQ0WgNIErN52x/XhxmJ4nWft06qejgPiUbPo4aYRNOmIHXg=="],
+    "@typescript/native-preview": ["@typescript/native-preview@7.0.0-dev.20260425.1", "", { "optionalDependencies": { "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260425.1", "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260425.1", "@typescript/native-preview-linux-arm": "7.0.0-dev.20260425.1", "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260425.1", "@typescript/native-preview-linux-x64": "7.0.0-dev.20260425.1", "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260425.1", "@typescript/native-preview-win32-x64": "7.0.0-dev.20260425.1" }, "bin": { "tsgo": "bin/tsgo.js" } }, "sha512-qhSVDT9DsoKPBeEm777eUUkiCDjBFlF7wwjfMvcPctZFVHfD6b1O1icpfCdQHPqzjrSXWu2YaNiY0DXbljTmgw=="],
 
-    "@typescript/native-preview-darwin-arm64": ["@typescript/native-preview-darwin-arm64@7.0.0-dev.20260423.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-wbLr6o5fROaCYt6cOpFhbe92FJAOdhAHwm/s8I/IyN5HbL1ULgel/wHaZiR+ws+27rgruNUiCENzTUg9vSz2bA=="],
+    "@typescript/native-preview-darwin-arm64": ["@typescript/native-preview-darwin-arm64@7.0.0-dev.20260425.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-vM7O+PlxHRUT4Dv0VkxEmU3N2uyWeSFrhu57O7s3SE9TX1ENljwQlCFG0oQdBGLBRo+SZSoedxKL5jOGlD1eiw=="],
 
-    "@typescript/native-preview-darwin-x64": ["@typescript/native-preview-darwin-x64@7.0.0-dev.20260423.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-13MpNT+4MgkgrfiW2u03rnER5aB3yz9fA0bWEYh6IH3rIqA2AR3Dntp3QXW4sQrZf0SriXqHe2R7X3HCT5xmqA=="],
+    "@typescript/native-preview-darwin-x64": ["@typescript/native-preview-darwin-x64@7.0.0-dev.20260425.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-EiikklZSuEvMhZEeN0VRb0vmedhLgtKwz5p4Oz9e8hlJ4lLrslgvX7Z7JWb2YSKlhm14dUlRMvdoe+6t+56rSA=="],
 
-    "@typescript/native-preview-linux-arm": ["@typescript/native-preview-linux-arm@7.0.0-dev.20260423.1", "", { "os": "linux", "cpu": "arm" }, "sha512-CxUA15qbPQRvz2nanBpiv1h4tgXTCJJwqOtgKMSdIuPkow8dyYW3ba5oLoH/jZhS4792XislX659hlFrfiU6CQ=="],
+    "@typescript/native-preview-linux-arm": ["@typescript/native-preview-linux-arm@7.0.0-dev.20260425.1", "", { "os": "linux", "cpu": "arm" }, "sha512-9eWInaHqhfTu1Mt/1M85p5M+HlSStahAQkqYaW9rJzUWRe+AcVUKsN6I7U7iwxbkCT8gFZsMCRqABcwBUWw3kg=="],
 
-    "@typescript/native-preview-linux-arm64": ["@typescript/native-preview-linux-arm64@7.0.0-dev.20260423.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-ICIkJDTqmn0R4Vs811+Ht2RYTk1OCrAhHCu0JthmhR216T1Tqgi5DWRoCprp3RL1qU6fLnxxrIpEbNlNN7XFYA=="],
+    "@typescript/native-preview-linux-arm64": ["@typescript/native-preview-linux-arm64@7.0.0-dev.20260425.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-5KJ++prl1dscJtxnkE7Cb6rjud4T3nO4mcnKhkCfYcQaFtFrvcZhBtDobwcpSzHbfsW0MeM+QCy1UfWoK4gjUQ=="],
 
-    "@typescript/native-preview-linux-x64": ["@typescript/native-preview-linux-x64@7.0.0-dev.20260423.1", "", { "os": "linux", "cpu": "x64" }, "sha512-cWLFS4R8dOU1YuUJ/2VLeGMVIjgI3GGb/f9rRY5MbWHq5l3NNZh8y1QwAOrTh3+g3q6+znArfxVnD2hZHUz8Mw=="],
+    "@typescript/native-preview-linux-x64": ["@typescript/native-preview-linux-x64@7.0.0-dev.20260425.1", "", { "os": "linux", "cpu": "x64" }, "sha512-a/E/8UL2x6nWmIJwrrbEvLz938RMcrFfm5hLRKaPMjCE32bgwesBZEG5jRn8fzQes+4HICRXKEaL544jtb/Syg=="],
 
-    "@typescript/native-preview-win32-arm64": ["@typescript/native-preview-win32-arm64@7.0.0-dev.20260423.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-OWaGUI4+dHqYZv+k6sITx9Y27FNy3XzNFk4OrOiYtBkIO/xrb9TPMP4A5XI4n5zwRLIv3xne9g039xgRbaeyoQ=="],
+    "@typescript/native-preview-win32-arm64": ["@typescript/native-preview-win32-arm64@7.0.0-dev.20260425.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-BZ7jEnaNZHkHbq9LWuqqIgYMmMb2E2NReMybjOyl3ASFmJHYekDnytXIT3Zbp4dyPLJV55faGzLqMw2MMS81NA=="],
 
-    "@typescript/native-preview-win32-x64": ["@typescript/native-preview-win32-x64@7.0.0-dev.20260423.1", "", { "os": "win32", "cpu": "x64" }, "sha512-5MQjO/qdLwXpjW7Dy/1lNv7Vtpvo6bhCkbjan4PoRN5/eeyqEqDWxdf8AGE4btLmHqyIjEHRuYf7kp2tlAr6lQ=="],
+    "@typescript/native-preview-win32-x64": ["@typescript/native-preview-win32-x64@7.0.0-dev.20260425.1", "", { "os": "win32", "cpu": "x64" }, "sha512-/iwK50mO31lKr1KVDRCqW5xGyKArZuq9jQr2b/PJ3e0xEuV6hoJ4Kok11LA1lhx1uctqr3UXKmfwQF3HWqcZTQ=="],
 
     "@vitejs/plugin-legacy": ["@vitejs/plugin-legacy@8.0.1", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-dynamic-import": "^7.27.1", "@babel/plugin-transform-modules-systemjs": "^7.29.0", "@babel/preset-env": "^7.29.2", "babel-plugin-polyfill-corejs3": "^0.14.2", "babel-plugin-polyfill-regenerator": "^0.6.8", "browserslist": "^4.28.1", "browserslist-to-esbuild": "^2.1.1", "core-js": "^3.49.0", "magic-string": "^0.30.21", "regenerator-runtime": "^0.14.1", "systemjs": "^6.15.1" }, "peerDependencies": { "terser": "^5.16.0", "vite": "^8.0.0" } }, "sha512-8zeDeuNPqXd49rIVgFgluQYB8vQICHR7l+W2I3CxYK4gTjTorajVr0wLvSjALIwEwLRxBn68EgNVyGP4j6hP7w=="],
 
@@ -1111,7 +1111,7 @@
 
     "kind-of": ["kind-of@6.0.3", "", {}, "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="],
 
-    "knip": ["knip@6.6.2", "", { "dependencies": { "fdir": "^6.5.0", "formatly": "^0.3.0", "get-tsconfig": "4.14.0", "jiti": "^2.6.0", "minimist": "^1.2.8", "oxc-parser": "^0.127.0", "oxc-resolver": "^11.19.1", "picomatch": "^4.0.4", "smol-toml": "^1.6.1", "strip-json-comments": "5.0.3", "tinyglobby": "^0.2.16", "unbash": "^3.0.0", "yaml": "^2.8.2", "zod": "^4.1.11" }, "bin": { "knip": "bin/knip.js", "knip-bun": "bin/knip-bun.js" } }, "sha512-ma2p+SvgIs1GZZLUV9QJrLkb9gGNBQHk7fcrtt3aVhiW2XEXH/yfMOU88F7ZdriYuBYkB53djPNYMWb2pKVl/g=="],
+    "knip": ["knip@6.6.3", "", { "dependencies": { "fdir": "^6.5.0", "formatly": "^0.3.0", "get-tsconfig": "4.14.0", "jiti": "^2.6.0", "minimist": "^1.2.8", "oxc-parser": "^0.127.0", "oxc-resolver": "^11.19.1", "picomatch": "^4.0.4", "smol-toml": "^1.6.1", "strip-json-comments": "5.0.3", "tinyglobby": "^0.2.16", "unbash": "^3.0.0", "yaml": "^2.8.2", "zod": "^4.1.11" }, "bin": { "knip": "bin/knip.js", "knip-bun": "bin/knip-bun.js" } }, "sha512-7HSf5bLx6r66+sjXwSvSiDEE9RjRzHuAkrEFLE6XXHqaPDY97tdzNvyRVF9DeusbiV72kStAFiNnhj72rxJNGQ=="],
 
     "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="],
 
@@ -1717,11 +1717,13 @@
 
     "stylelint/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
+    "stylelint-scss/mdn-data": ["mdn-data@2.28.0", "", {}, "sha512-uy9AS1yt+wW5eUEefgE3lOpqPghanUttycV0GXKbiXyBjwvbeE8XPj4u1C+voRfz7dEjwU4NDHTMfZ/s/JtZrQ=="],
+
     "supports-hyperlinks/has-flag": ["has-flag@5.0.1", "", {}, "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA=="],
 
     "supports-hyperlinks/supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
 
-    "table/ajv": ["ajv@8.18.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A=="],
+    "table/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
 
     "table/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 

cfg/stylelint.config.ts

@@ -27,11 +27,15 @@ const stylelintConfig: stylelint.Config = {
     "@stylistic/function-parentheses-space-inside": undefined,
     "@stylistic/selector-list-comma-newline-after": undefined,
     "@stylistic/string-quotes": undefined,
+    "alpha-value-notation": ["percentage"],
+    "color-function-notation": "modern",
+    "color-no-hex": true,
     "custom-property-pattern": undefined,
     "declaration-block-no-duplicate-custom-properties": true,
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": true,
     "declaration-block-no-shorthand-property-overrides": true,
+    "function-disallowed-list": ["rgba", "hsla", "rgb", "hsl"],
     "max-nesting-depth": undefined,
     "no-descending-specificity": undefined,
     "no-duplicate-selectors": [

composer.lock

@@ -5215,12 +5215,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/Roave/SecurityAdvisories.git",
-                "reference": "3901f65a6ee5585978c60ee579f23c7f848ec6a2"
+                "reference": "08cd07f04fb07fb4d316e956801d57b700cf7096"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/3901f65a6ee5585978c60ee579f23c7f848ec6a2",
+                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/08cd07f04fb07fb4d316e956801d57b700cf7096",
-                "reference": "3901f65a6ee5585978c60ee579f23c7f848ec6a2",
+                "reference": "08cd07f04fb07fb4d316e956801d57b700cf7096",
                 "shasum": ""
             },
             "conflict": {
@@ -5243,6 +5243,7 @@
                 "alextselegidis/easyappointments": "<=1.5.2",
                 "alexusmai/laravel-file-manager": "<=3.3.1",
                 "algolia/algoliasearch-magento-2": "<=3.16.1|>=3.17.0.0-beta1,<=3.17.1",
+                "almirhodzic/nova-toggle-5": "<1.3",
                 "alt-design/alt-redirect": "<1.6.4",
                 "altcha-org/altcha": "<1.3.1",
                 "alterphp/easyadmin-extension-bundle": ">=1.2,<1.2.11|>=1.3,<1.3.1",
@@ -5637,7 +5638,7 @@
                 "kelvinmo/simplexrd": "<3.1.1",
                 "kevinpapst/kimai2": "<1.16.7",
                 "khodakhah/nodcms": "<=3.4.1",
-                "kimai/kimai": "<=2.53",
+                "kimai/kimai": "<2.54",
                 "kitodo/presentation": "<3.2.3|>=3.3,<3.3.4",
                 "klaviyo/magento2-extension": ">=1,<3",
                 "knplabs/knp-snappy": "<=1.4.2",
@@ -6081,7 +6082,7 @@
                 "twig/twig": "<3.11.2|>=3.12,<3.14.1|>=3.16,<3.19",
                 "typicms/core": "<16.1.7",
                 "typo3/cms": "<9.5.29|>=10,<10.4.35|>=11,<11.5.23|>=12,<12.2",
-                "typo3/cms-backend": "<4.1.14|>=4.2,<4.2.15|>=4.3,<4.3.7|>=4.4,<4.4.4|>=7,<=7.6.50|>=8,<=8.7.39|>=9,<9.5.55|>=10,<=10.4.54|>=11,<=11.5.48|>=12,<=12.4.40|>=13,<=13.4.22|>=14,<=14.0.1",
+                "typo3/cms-backend": "<4.1.14|>=4.2,<4.2.15|>=4.3,<4.3.7|>=4.4,<4.4.4|>=7,<=7.6.50|>=8,<=8.7.39|>=9,<9.5.55|>=10,<=10.4.54|>=11,<=11.5.48|>=12,<=12.4.40|>=13,<=13.4.22|>=14,<=14.0.1|==14.2",
                 "typo3/cms-belog": ">=10,<=10.4.47|>=11,<=11.5.41|>=12,<=12.4.24|>=13,<=13.4.2",
                 "typo3/cms-beuser": ">=9,<9.5.55|>=10,<10.4.54|>=11,<11.5.48|>=12,<12.4.37|>=13,<13.4.18",
                 "typo3/cms-core": "<=8.7.56|>=9,<9.5.55|>=10,<=10.4.54|>=11,<=11.5.48|>=12,<=12.4.40|>=13,<=13.4.22|>=14,<=14.0.1",
@@ -6263,7 +6264,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-04-23T22:17:39+00:00"
+            "time": "2026-04-24T17:22:29+00:00"
         },
         {
             "name": "sebastian/diff",
@@ -7575,5 +7576,5 @@
         "php": ">=8.5"
     },
     "platform-dev": {},
-    "plugin-api-version": "2.9.0"
+    "plugin-api-version": "2.6.0"
 }

package.json

@@ -31,7 +31,7 @@
     "@sentry/core": "^10.50.0",
     "@types/bun": "^1.3.13",
     "@types/node": "^25.6.0",
-    "@typescript/native-preview": "7.0.0-dev.20260423.1",
+    "@typescript/native-preview": "7.0.0-dev.20260425.1",
     "@vitejs/plugin-legacy": "^8.0.1",
     "better-typescript-lib": "^2.12.0",
     "browserslist": "^4.28.2",
@@ -44,7 +44,7 @@
     "fdir": "^6.5.0",
     "globals": "^17.5.0",
     "jiti": "^2.6.1",
-    "knip": "^6.6.2",
+    "knip": "^6.6.3",
     "lightningcss": "^1.32.0",
     "lightningcss-cli": "^1.32.0",
     "oxlint": "^1.61.0",

web/app/themes/haiku-atelier-2024/assets/css/main.css

@@ -90,17 +90,14 @@
 }
 :root {
   /* Couleurs */
-  --couleur-blanc: #ffffff;
+  --couleur-blanc: oklch(100% 0 0deg / 100%);
-  --couleur-blanc-fond: rgb(255 255 255 / 90%);
+  --couleur-blanc-fond: olkch(1 0 0 / 90%);
-  --couleur-gris: #eceaeb;
+  --couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
-  --couleur-gris-fonce: #808080;
+  --couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
-  --couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
+  --couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%);
-  --couleur-bordeaux: #490918;
+  --couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
-  --couleur-bordeaux-fond: rgb(73 9 24 / 80%);
+  --couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
-  --couleur-jaune: #defdb5;
+  --couleur-noir: oklch(24.35% 0 0deg / 100%);
-  --couleur-jaune-fond: rgb(235 255 184 / 80%);
-  --couleur-noir: #202020;
-  --couleur-fond: rgb(236 234 235 / 80%);
   /* Polices */
   --police-lato: "Lato", sans-serif;
   /* Hauteurs de ligne */
@@ -169,7 +166,7 @@ html {
  */
 body {
   overscroll-behavior: none;
-  accent-color: var(--couleur-jaune); /* 2 */
+  accent-color: var(--couleur-gris-fonce); /* 2 */
   background: var(--couleur-gris); /* 1 */
 }
 
@@ -184,7 +181,7 @@ button, input, select, textarea {
  * Change la couleur d'arrière-plan à la sélection du texte.
  */
 *::selection {
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 
 /* Cache tout élément avec l'attribut hidden */
@@ -283,7 +280,7 @@ button:not[disabled]:active {
 @media (hover: hover) {
   button:not[disabled]:hover {
     color: var(--couleur-noir);
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
   }
 }
 button:disabled, button[disabled] {
@@ -302,7 +299,7 @@ button.bouton-case-pleine.bouton-blanc-sur-noir {
 }
 button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible {
   color: var(--couleur-noir);
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 button.bouton-blanc-sur-noir {
   color: var(--couleur-blanc);
@@ -323,8 +320,8 @@ button.bouton-retour-haut {
   border: 1px solid var(--couleur-noir);
   border-radius: 100%;
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
-  background: var(--couleur-fond);
+  background: var(--couleur-gris-fond);
   box-shadow: initial;
   transition: 0.2s background, 0.2s opacity, 0.2s visibility;
 }
@@ -335,11 +332,11 @@ button.bouton-retour-haut img {
 }
 button.bouton-retour-haut[data-actif] {
   visibility: visible;
-  opacity: 0.6;
+  opacity: 60%;
 }
 @media (hover: hover) {
   button.bouton-retour-haut[data-actif]:hover {
-    opacity: 1;
+    opacity: 100%;
     background: var(--couleur-jaune-fond);
   }
 }
@@ -349,8 +346,8 @@ dialog {
   flex-flow: column nowrap;
   place-self: center center;
   padding: var(--espace-l);
-  opacity: 0;
+  opacity: 0%;
-  background: white;
+  background: var(--couleur-blanc);
   transition: display 0.3s, opacity 0.3s, overlay 0.3s;
   transition-behavior: allow-discrete;
 }
@@ -361,10 +358,10 @@ dialog::backdrop {
 }
 dialog:open {
   display: flex;
-  opacity: 1;
+  opacity: 100%;
 }
 dialog:open::backdrop {
-  background-color: var(--couleur-fond);
+  background-color: var(--couleur-gris-fond);
 }
 dialog * + * {
   margin-block-start: var(--espace-m);
@@ -380,7 +377,7 @@ dialog button {
 
 @starting-style {
   dialog:open {
-    opacity: 0;
+    opacity: 0%;
   }
 }
 @starting-style {
@@ -399,7 +396,7 @@ fieldset {
 input, select, textarea {
   padding: var(--espace-xs);
   border: 1px solid var(--couleur-noir);
-  accent-color: var(--couleur-jaune);
+  accent-color: var(--couleur-gris-fonce);
   background: var(--couleur-gris);
   transition: 0.2s background;
 }
@@ -435,7 +432,7 @@ input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::sele
   background: var(--couleur-noir);
 }
 input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid {
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid {
   background: var(--couleur-gris);
@@ -454,7 +451,7 @@ input[type="checkbox"], input[type="radio"] {
   transition: 0.2s background;
 }
 input[type="checkbox"]:checked, input[type="radio"]:checked {
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
   content: "x";
@@ -483,7 +480,7 @@ input[type="radio"] + label {
 }
 @media (hover: hover) {
   input[type="checkbox"]:hover, input[type="radio"]:hover {
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
   }
 }
 
@@ -524,7 +521,7 @@ img, picture {
 
 img {
   object-fit: cover; /* 2 */
-  background: var(--couleur-jaune); /* 3 */
+  background: var(--couleur-gris-fonce); /* 3 */
 }
 
 /*
@@ -560,7 +557,7 @@ a.lien-bouton {
   --lien-bouton-marges-internes-bloc: var(--espace-xs);
   --lien-bouton-marges-internes-ligne: var(--espace-m);
   /* Couleurs */
-  --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
+  --lien-bouton-arriere-plan-couleur-survol: var(--couleur-gris-fonce);
   padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
   border: 1px solid var(--couleur-noir);
   /* Change la couleur de l'arrière-plan pour marquer le focus. */
@@ -589,13 +586,13 @@ a.lien-lien {
   text-decoration: underline;
 }
 a.lien-lien:active {
-  text-decoration-color: var(--couleur-jaune);
+  text-decoration-color: var(--couleur-gris-fonce);
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 @media (hover: hover) {
   a.lien-lien:hover {
-    text-decoration-color: var(--couleur-jaune);
+    text-decoration-color: var(--couleur-gris-fonce);
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
   }
 }
 a {
@@ -656,7 +653,7 @@ video {
   color: var(--couleur-noir);
   text-transform: uppercase;
   white-space: nowrap;
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 .bandeau__conteneur {
   display: flex;
@@ -665,7 +662,7 @@ video {
   animation: marquee linear 15s infinite both;
 }
 .bandeau__conteneur *::selection {
-  color: var(--couleur-jaune);
+  color: var(--couleur-gris-fonce);
   background: var(--couleur-noir);
 }
 .bandeau__conteneur p {
@@ -721,8 +718,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   z-index: 998;
   inset: var(--en-tete-hauteur) 0 0 0;
   height: var(--menu-mobile-hauteur);
-  opacity: 0;
+  opacity: 0%;
-  background-color: var(--couleur-fond);
+  background-color: var(--couleur-gris-fond);
   animation: fade-in 400ms both;
 }
 #menu-mobile .menu-modale__conteneur {
@@ -734,7 +731,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   height: fit-content;
   padding: var(--espace-xl);
   border-bottom: 1px solid var(--couleur-noir);
-  opacity: 0;
+  opacity: 0%;
   background-color: var(--couleur-gris);
   animation: fade-in 400ms 200ms both;
 }
@@ -761,12 +758,12 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 
 @keyframes fade-in {
   to {
-    opacity: 1;
+    opacity: 100%;
   }
 }
 @keyframes fade-out {
   to {
-    opacity: 0;
+    opacity: 0%;
   }
 }
 @keyframes slide-in {
@@ -791,7 +788,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
   border-bottom: 1px solid var(--couleur-noir);
-  background: var(--couleur-gris);
+  background: var(--couleur-gris-fond-extra);
+  backdrop-filter: brightness(125%) blur(6px);
 }
 #en-tete picture, #en-tete img {
   background: transparent;
@@ -846,12 +844,12 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
 }
 #en-tete .menu-navigation__entree:has(a[aria-current="page"]) {
-  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto
+  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
-    90% no-repeat;
+    bottom/auto 90% no-repeat;
 }
 #en-tete .menu-navigation__entree--courante {
-  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto
+  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
-    90% no-repeat;
+    bottom/auto 90% no-repeat;
 }
 #en-tete .menu-navigation__entree a {
   display: inline-block; /* 1 */
@@ -860,8 +858,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 @media (hover: hover) {
   #en-tete .menu-navigation__entree:hover {
-    background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto
+    background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
-      90% no-repeat;
+      bottom/auto 90% no-repeat;
   }
 }
 @media (width <= 1000px) {
@@ -876,6 +874,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   place-items: center;
   text-align: center;
 }
+#en-tete .compte-panier a:hover,
+#en-tete .compte-panier a:active,
+#en-tete .compte-panier a:focus-within {
+  background: var(--couleur-gris-fond) !important;
+}
 #en-tete .compte-panier[disabled] {
   background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
     0.5px/2px 2px;
@@ -890,12 +893,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   padding-block: var(--espace-2xs);
   padding-inline: var(--espace-s);
   text-transform: lowercase;
+  background: var(--couleur-gris);
 }
 #en-tete .compte-panier a.lien-compte {
   border-color: transparent;
 }
 #en-tete .compte-panier a[data-contient-articles="true"] {
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 #en-tete .conteneur {
   display: flex;
@@ -938,10 +942,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
 }
 #menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
-  opacity: 1;
+  opacity: 100%;
 }
 #menu-categories-produits[data-entrees-presentes-fin] svg:last-of-type {
-  opacity: 1;
+  opacity: 100%;
 }
 #menu-categories-produits svg {
   pointer-events: none;
@@ -949,7 +953,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   bottom: calc(17.59px - 0.35rem);
   width: 0.8rem;
   height: 0.8rem;
-  opacity: 0;
+  opacity: 0%;
   mix-blend-mode: exclusion;
   shape-rendering: geometricprecision;
   transition: 0.2s opacity;
@@ -997,7 +1001,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 #menu-categories-produits ul li.categorie-courante a {
   font-weight: 600;
   color: var(--couleur-noir);
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 @media (hover: hover) {
   #menu-categories-produits ul li.categorie-courante a:hover {
@@ -1019,13 +1023,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   outline: initial; /* 3 */
 }
 #menu-categories-produits ul li a:focus-visible {
-  color: var(--couleur-jaune);
+  color: var(--couleur-gris-fonce);
   outline: initial; /* 3 */
 }
 @media (hover: hover) {
   #menu-categories-produits ul li a:hover {
     color: var(--couleur-noir);
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
   }
 }
 @media (width <= 1000px) {
@@ -1185,7 +1189,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 @media (hover: hover) {
   .grille-produits article figure a:hover .produit__illustration__survol {
     visibility: visible;
-    opacity: 1;
+    opacity: 100%;
     transition: 0.3s opacity, 0.3s visibility;
   }
 }
@@ -1208,7 +1212,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   left: 0;
   width: 100%;
   height: 100%;
-  opacity: 0;
+  opacity: 0%;
   background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
   background-repeat: no-repeat;
   background-position: center;
@@ -1217,7 +1221,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   animation: 1.5s 0.5s test infinite alternate both linear;
 }
 .grille-produits article figure .produit__illustration__principale img {
-  opacity: 0;
+  opacity: 0%;
   transition: opacity 1s;
 }
 .grille-produits article figure .produit__illustration__survol {
@@ -1228,11 +1232,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   width: 100%;
   height: 100%;
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
   transition: 0.15s opacity, 0.15s visibility;
 }
 .grille-produits article figure .produit__illustration__survol img {
-  background: var(--couleur-fond);
+  background: var(--couleur-gris-fond);
 }
 .grille-produits article figure figcaption {
   display: flex;
@@ -1270,7 +1274,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 
 @keyframes test {
   to {
-    opacity: 1;
+    opacity: 100%;
   }
 }
 /*
@@ -1340,7 +1344,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   text-align: center;
   letter-spacing: initial;
   appearance: none;
-  background: var(--couleur-fond);
+  background: var(--couleur-gris-fond);
 }
 @supports selector(:user-valid) {
   .resume-produit .selecteur-produit__attribut-variation select:user-valid {
@@ -1348,7 +1352,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   }
 }
 .resume-produit .selecteur-produit__attribut-variation option {
-  background: var(--couleur-fond);
+  background: var(--couleur-gris-fond);
 }
 .resume-produit .selecteur-produit__attribut-variation {
   /* Conteneur des sélecteurs */
@@ -1368,20 +1372,20 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   height: 0.9rem;
   text-align: center;
   visibility: visible;
-  opacity: 1;
+  opacity: 100%;
   background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
   transition: opacity 0.2s, visibility 0.2s;
 }
 @supports not selector(:user-valid) {
   .resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:valid)::after {
     visibility: hidden;
-    opacity: 0;
+    opacity: 0%;
   }
 }
 @supports selector(:user-valid) {
   .resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:user-valid)::after {
     visibility: hidden;
-    opacity: 0;
+    opacity: 0%;
   }
 }
 .resume-produit .selecteur-produit__prix {
@@ -1464,11 +1468,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   --section-marges-internes: var(--espace-l);
   overflow: hidden;
   border-block: 1px solid var(--couleur-noir);
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
   transition: 0.2s background;
 }
 .details-produit__actions:has(button[disabled]) {
-  background: var(--couleur-fond);
+  background: var(--couleur-gris-fond);
 }
 .details-produit__actions button {
   height: initial;
@@ -1538,7 +1542,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
     article figure a:hover
     .produit__illustration__survol {
     visibility: visible;
-    opacity: 1;
+    opacity: 100%;
     transition: 0.3s opacity, 0.3s visibility;
   }
 }
@@ -1553,7 +1557,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   width: 100%;
   height: 100%;
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
   transition: 0.15s opacity, 0.15s visibility;
 }
 .produits-similaires .grille-produits-similaires article figure img {

web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css

@@ -40,7 +40,7 @@
   block-size: 100%;
   margin: auto;
   visibility: visible;
-  opacity: 1;
+  opacity: 100%;
   mask-image: linear-gradient(
     var(--mask-direction, to right),
     hsla(0, 0%, 0%, 0),
@@ -53,12 +53,12 @@
 #page-a-propos .storytelling__animation[hidden] {
   display: grid !important;
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
   transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
 }
 #page-a-propos .storytelling__animation.no-js {
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
   transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
 }
 #page-a-propos .storytelling__animation .animation-conteneur {

web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css

@@ -176,7 +176,7 @@
   text-align: right;
 }
 #panneau-panier .panneau__sous-totaux__ligne#sous-total-livraison p:last-of-type span {
-  color: grey;
+  color: var(--couleur-gris-fonce);
 }
 #panneau-panier .panneau__sous-totaux__choix-methode-livraison {
   flex-flow: row wrap;
@@ -189,7 +189,7 @@
   cursor: revert;
   flex-basis: 100%;
   margin-bottom: var(--espace-xs);
-  color: grey;
+  color: var(--couleur-gris-fonce);
   text-align: center;
   text-transform: lowercase;
 }
@@ -203,7 +203,7 @@
   margin-top: var(--espace-l);
   font-size: 0.8rem;
   font-weight: 450;
-  color: grey;
+  color: var(--couleur-gris-fonce);
   letter-spacing: var(--espacement-inter-lettres-etendu-s);
 }
 #panneau-panier .panneau__pied-de-page {
@@ -318,7 +318,7 @@
   padding: 0;
   font-size: 0.8rem;
   font-weight: 450;
-  color: grey;
+  color: var(--couleur-gris-fonce);
   text-align: center;
 }
 #panneau-informations-client

web/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.433 9.473 85.134 70.17">
+  <path
+    fill="transparent" stroke="oklch(59.99% 0 0deg / 100%)"
+    stroke-width="2px" d="M84.857 38.272c-2.238-3.079-6.335-4.365-11.182-3.978 6.131-6.94 8.302-14.885 4.751-19.772-4.576-6.298-16.933-5.12-27.595 2.63-2.749 1.998-5.11 4.235-7.031 6.565l-.041-.06c-4.577-6.299-16.937-5.12-27.597 2.632C5.498 34.041.565 45.429 5.143 51.729c2.068 2.845 5.73 4.16 10.101 4.038-5.506 6.701-7.337 14.156-3.945 18.821 4.577 6.3 16.935 5.12 27.596-2.63 2.666-1.939 4.974-4.103 6.866-6.36.147.255.303.504.478.745 4.578 6.301 16.935 5.121 27.596-2.628 10.667-7.755 15.599-19.146 11.022-25.443"
+  />
+</svg>

web/app/themes/haiku-atelier-2024/assets/site.webmanifest

@@ -15,6 +15,6 @@
   ],
   "name": "Haiku Atelier",
   "short_name": "Haiku Atelier",
-  "theme_color": "#E7FFB4",
+  "theme_color": "#ECEAEB",
   "start_url": "https://haikuatelier.fr.ddev.site"
 }

web/app/themes/haiku-atelier-2024/front-page.php

@@ -17,6 +17,10 @@ $context = Timber::context();
 $templates = ['accueil.twig'];
 
 add_action('wp_enqueue_scripts', function (): void {
+  Resource::enqueue_script_module_file(
+    id: 'haiku-atelier-2024-scripts-page-accueil',
+    path: '/assets/js/scripts-page-accueil.js',
+  );
   Resource::enqueue_style_file(
     handle: 'haiku-atelier-2024-styles-page-accueil',
     path: '/assets/css/pages/page-accueil.css',

web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss

@@ -2,17 +2,14 @@
 
 :root {
   /* Couleurs */
-  --couleur-blanc: #ffffff;
+  --couleur-blanc: oklch(100% 0 0deg / 100%);
-  --couleur-blanc-fond: rgb(255 255 255 / 90%);
+  --couleur-blanc-fond: olkch(1 0 0 / 90%);
-  --couleur-gris: #eceaeb;
+  --couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
-  --couleur-gris-fonce: #808080;
+  --couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
-  --couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
+  --couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%);
-  --couleur-bordeaux: #490918;
+  --couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
-  --couleur-bordeaux-fond: rgb(73 9 24 / 80%);
+  --couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
-  --couleur-jaune: #defdb5;
+  --couleur-noir: oklch(24.35% 0 0deg / 100%);
-  --couleur-jaune-fond: rgb(235 255 184 / 80%);
-  --couleur-noir: #202020;
-  --couleur-fond: rgb(236 234 235 / 80%);
 
   /* Polices */
   --police-lato: "Lato", sans-serif;

web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss

@@ -37,7 +37,7 @@ html {
  */
 body {
   overscroll-behavior: none;
-  accent-color: var(--couleur-jaune); /* 2 */
+  accent-color: var(--couleur-gris-fonce); /* 2 */
   background: var(--couleur-gris); /* 1 */
 }
 
@@ -52,7 +52,7 @@ button, input, select, textarea {
  * Change la couleur d'arrière-plan à la sélection du texte.
  */
 *::selection {
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 }
 
 /* Cache tout élément avec l'attribut hidden */

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss

@@ -28,7 +28,7 @@ button {
     @media (hover: hover) {
       &:hover {
         color: var(--couleur-noir);
-        background: var(--couleur-jaune);
+        background: var(--couleur-gris-fonce);
       }
     }
   }
@@ -51,7 +51,7 @@ button {
 
       &:focus-visible {
         color: var(--couleur-noir);
-        background: var(--couleur-jaune);
+        background: var(--couleur-gris-fonce);
       }
     }
   }
@@ -77,8 +77,8 @@ button {
     border: 1px solid var(--couleur-noir);
     border-radius: 100%;
     visibility: hidden;
-    opacity: 0;
+    opacity: 0%;
-    background: var(--couleur-fond);
+    background: var(--couleur-gris-fond);
     box-shadow: initial;
     transition: 0.2s background, 0.2s opacity, 0.2s visibility;
 
@@ -90,11 +90,11 @@ button {
 
     &[data-actif] {
       visibility: visible;
-      opacity: 0.6;
+      opacity: 60%;
 
       @media (hover: hover) {
         &:hover {
-          opacity: 1;
+          opacity: 100%;
           background: var(--couleur-jaune-fond);
         }
       }

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss

@@ -3,8 +3,8 @@ dialog {
   flex-flow: column nowrap;
   place-self: center center;
   padding: var(--espace-l);
-  opacity: 0;
+  opacity: 0%;
-  background: white;
+  background: var(--couleur-blanc);
   transition: display 0.3s, opacity 0.3s, overlay 0.3s;
   transition-behavior: allow-discrete;
 
@@ -16,10 +16,10 @@ dialog {
 
   &:open {
     display: flex;
-    opacity: 1;
+    opacity: 100%;
 
     &::backdrop {
-      background-color: var(--couleur-fond);
+      background-color: var(--couleur-gris-fond);
     }
   }
 
@@ -40,7 +40,7 @@ dialog {
 
 @starting-style {
   dialog:open {
-    opacity: 0;
+    opacity: 0%;
   }
 }
 

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss

@@ -11,7 +11,7 @@ fieldset {
 input, select, textarea {
   padding: var(--espace-xs);
   border: 1px solid var(--couleur-noir);
-  accent-color: var(--couleur-jaune);
+  accent-color: var(--couleur-gris-fonce);
   background: var(--couleur-gris);
   transition: 0.2s background;
 
@@ -39,7 +39,7 @@ input:is([type="email"], [type="text"], [type="tel"]), textarea {
   }
 
   &:user-valid {
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
   }
 
   &:user-invalid {
@@ -65,7 +65,7 @@ input[type="checkbox"], input[type="radio"] {
   transition: 0.2s background;
 
   &:checked {
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
 
     // TODO: Utiliser un SVG plutôt qu'un « x » ?
     &::before {
@@ -96,7 +96,7 @@ input[type="checkbox"], input[type="radio"] {
 
   @media (hover: hover) {
     &:hover {
-      background: var(--couleur-jaune);
+      background: var(--couleur-gris-fonce);
     }
   }
 }

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss

@@ -12,5 +12,5 @@ img, picture {
 
 img {
   object-fit: cover; /* 2 */
-  background: var(--couleur-jaune); /* 3 */
+  background: var(--couleur-gris-fonce); /* 3 */
 }

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss

@@ -35,7 +35,7 @@ a {
     --lien-bouton-marges-internes-ligne: var(--espace-m);
 
     /* Couleurs */
-    --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
+    --lien-bouton-arriere-plan-couleur-survol: var(--couleur-gris-fonce);
 
     padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
     border: 1px solid var(--couleur-noir);
@@ -63,14 +63,14 @@ a {
     text-decoration: underline;
 
     &:active {
-      text-decoration-color: var(--couleur-jaune);
+      text-decoration-color: var(--couleur-gris-fonce);
-      background: var(--couleur-jaune);
+      background: var(--couleur-gris-fonce);
     }
 
     @media (hover: hover) {
       &:hover {
-        text-decoration-color: var(--couleur-jaune);
+        text-decoration-color: var(--couleur-gris-fonce);
-        background: var(--couleur-jaune);
+        background: var(--couleur-gris-fonce);
       }
     }
   }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_bandeau.scss

@@ -10,7 +10,7 @@
   color: var(--couleur-noir);
   text-transform: uppercase;
   white-space: nowrap;
-  background: var(--couleur-jaune);
+  background: var(--couleur-gris-fonce);
 
   &__conteneur {
     display: flex;
@@ -19,7 +19,7 @@
     animation: marquee linear 15s infinite both;
 
     *::selection {
-      color: var(--couleur-jaune);
+      color: var(--couleur-gris-fonce);
       background: var(--couleur-noir);
     }
 

web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss

@@ -23,7 +23,8 @@
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
   border-bottom: 1px solid var(--couleur-noir);
-  background: var(--couleur-gris);
+  background: var(--couleur-gris-fond-extra);
+  backdrop-filter: brightness(125%) blur(6px);
 
   picture, img {
     background: transparent;
@@ -81,14 +82,14 @@
 
       // BASELINE001: Marchera seulement pour les navigateurs > 2023.
       &:has(a[aria-current="page"]) {
-        background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg")
+        background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
-          center/auto 90% no-repeat;
+          bottom/auto 90% no-repeat;
       }
 
       // COMPAT001: Pour les navigateurs < 2023.
       &--courante {
-        background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg")
+        background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
-          center/auto 90% no-repeat;
+          bottom/auto 90% no-repeat;
       }
 
       a {
@@ -101,8 +102,8 @@
 
       @media (hover: hover) {
         &:hover {
-          background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg")
+          background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
-            center/auto 90% no-repeat;
+            bottom/auto 90% no-repeat;
         }
       }
     }
@@ -121,6 +122,10 @@
     place-items: center;
     text-align: center;
 
+    a:hover, a:active, a:focus-within {
+      background: var(--couleur-gris-fond) !important;
+    }
+
     &[disabled] {
       background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
         0.5px / 2px 2px;
@@ -135,13 +140,14 @@
       padding-block: var(--espace-2xs);
       padding-inline: var(--espace-s);
       text-transform: lowercase;
+      background: var(--couleur-gris);
 
       &.lien-compte {
         border-color: transparent;
       }
 
       &[data-contient-articles="true"] {
-        background: var(--couleur-jaune);
+        background: var(--couleur-gris-fonce);
       }
     }
   }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss

@@ -23,7 +23,6 @@
   grid-auto-rows: 1fr;
   grid-template-columns:
     repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
-
   gap: 1px; /* 2 */
   min-height: var(--grille-produits-hauteur-minimale);
 
@@ -43,7 +42,7 @@
           &:hover {
             .produit__illustration__survol {
               visibility: visible;
-              opacity: 1;
+              opacity: 100%;
               transition: 0.3s opacity, 0.3s visibility;
             }
           }
@@ -70,7 +69,7 @@
           left: 0;
           width: 100%;
           height: 100%;
-          opacity: 0;
+          opacity: 0%;
           background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
           background-repeat: no-repeat;
           background-position: center;
@@ -80,7 +79,7 @@
         }
 
         img {
-          opacity: 0;
+          opacity: 0%;
           transition: opacity 1s;
         }
       }
@@ -93,11 +92,11 @@
         width: 100%;
         height: 100%;
         visibility: hidden;
-        opacity: 0;
+        opacity: 0%;
         transition: 0.15s opacity, 0.15s visibility;
 
         img {
-          background: var(--couleur-fond);
+          background: var(--couleur-gris-fond);
         }
       }
 
@@ -146,6 +145,6 @@
 
 @keyframes test {
   to {
-    opacity: 1;
+    opacity: 100%;
   }
 }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss

@@ -79,7 +79,7 @@
         text-align: center;
         letter-spacing: initial;
         appearance: none;
-        background: var(--couleur-fond);
+        background: var(--couleur-gris-fond);
 
         @supports selector(:user-valid) {
           &:user-valid {
@@ -89,7 +89,7 @@
       }
 
       option {
-        background: var(--couleur-fond);
+        background: var(--couleur-gris-fond);
       }
 
       /* Conteneur des sélecteurs */
@@ -108,7 +108,7 @@
           height: 0.9rem;
           text-align: center;
           visibility: visible;
-          opacity: 1;
+          opacity: 100%;
           background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
           transition: opacity 0.2s, visibility 0.2s;
         }
@@ -117,7 +117,7 @@
           &:has(select:valid) {
             &::after {
               visibility: hidden;
-              opacity: 0;
+              opacity: 0%;
             }
           }
         }
@@ -126,7 +126,7 @@
           &:has(select:user-valid) {
             &::after {
               visibility: hidden;
-              opacity: 0;
+              opacity: 0%;
             }
           }
         }
@@ -230,12 +230,12 @@
 
     overflow: hidden;
     border-block: 1px solid var(--couleur-noir);
-    background: var(--couleur-jaune);
+    background: var(--couleur-gris-fonce);
     transition: 0.2s background;
 
     // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
     &:has(button[disabled]) {
-      background: var(--couleur-fond);
+      background: var(--couleur-gris-fond);
     }
 
     button {

web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss

@@ -21,13 +21,13 @@
 
   &[data-entrees-presentes-debut] {
     svg:first-of-type {
-      opacity: 1;
+      opacity: 100%;
     }
   }
 
   &[data-entrees-presentes-fin] {
     svg:last-of-type {
-      opacity: 1;
+      opacity: 100%;
     }
   }
 
@@ -37,7 +37,7 @@
     bottom: calc(35.18px / 2 - 0.35rem);
     width: 0.8rem;
     height: 0.8rem;
-    opacity: 0;
+    opacity: 0%;
     mix-blend-mode: exclusion;
     shape-rendering: geometricprecision;
     transition: 0.2s opacity;
@@ -67,7 +67,6 @@
     display: grid;
     grid-template-columns:
       repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
-
     gap: 1px;
     place-items: center;
 
@@ -88,7 +87,7 @@
         a {
           font-weight: 600;
           color: var(--couleur-noir);
-          background: var(--couleur-jaune);
+          background: var(--couleur-gris-fonce);
 
           @media (hover: hover) {
             &:hover {
@@ -111,14 +110,14 @@
         outline: initial; /* 3 */
 
         &:focus-visible {
-          color: var(--couleur-jaune);
+          color: var(--couleur-gris-fonce);
           outline: initial; /* 3 */
         }
 
         @media (hover: hover) {
           &:hover {
             color: var(--couleur-noir);
-            background: var(--couleur-jaune);
+            background: var(--couleur-gris-fonce);
           }
         }
       }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-mobile.scss

@@ -37,8 +37,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
     z-index: 998;
     inset: var(--en-tete-hauteur) 0 0 0;
     height: var(--menu-mobile-hauteur);
-    opacity: 0;
+    opacity: 0%;
-    background-color: var(--couleur-fond);
+    background-color: var(--couleur-gris-fond);
     animation: fade-in 400ms both;
   }
 
@@ -51,7 +51,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
     height: fit-content;
     padding: var(--espace-xl);
     border-bottom: 1px solid var(--couleur-noir);
-    opacity: 0;
+    opacity: 0%;
     background-color: var(--couleur-gris);
     animation: fade-in 400ms 200ms both;
 
@@ -82,13 +82,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 
 @keyframes fade-in {
   to {
-    opacity: 1;
+    opacity: 100%;
   }
 }
 
 @keyframes fade-out {
   to {
-    opacity: 0;
+    opacity: 0%;
   }
 }
 

web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-informations-client.scss

@@ -79,7 +79,7 @@
         padding: 0;
         font-size: 0.8rem;
         font-weight: 450;
-        color: grey;
+        color: var(--couleur-gris-fonce);
         text-align: center;
 
         p {

web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-panier.scss

@@ -193,7 +193,7 @@
           text-align: right;
 
           span {
-            color: grey;
+            color: var(--couleur-gris-fonce);
           }
         }
       }
@@ -210,7 +210,7 @@
         cursor: revert;
         flex-basis: 100%;
         margin-bottom: var(--espace-xs);
-        color: grey;
+        color: var(--couleur-gris-fonce);
         text-align: center;
         text-transform: lowercase;
       }
@@ -229,7 +229,7 @@
       margin-top: var(--espace-l);
       font-size: 0.8rem;
       font-weight: 450;
-      color: grey;
+      color: var(--couleur-gris-fonce);
       letter-spacing: var(--espacement-inter-lettres-etendu-s);
     }
   }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_produits-similaires.scss

@@ -59,7 +59,7 @@
             &:hover {
               .produit__illustration__survol {
                 visibility: visible;
-                opacity: 1;
+                opacity: 100%;
                 transition: 0.3s opacity, 0.3s visibility;
               }
             }
@@ -78,7 +78,7 @@
           width: 100%;
           height: 100%;
           visibility: hidden;
-          opacity: 0;
+          opacity: 0%;
           transition: 0.15s opacity, 0.15s visibility;
         }
 

web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss

@@ -48,7 +48,7 @@
       block-size: 100%;
       margin: auto;
       visibility: visible;
-      opacity: 1;
+      opacity: 100%;
       mask-image: linear-gradient(
         var(--mask-direction, to right),
         hsl(0deg 0% 0% / 0%),
@@ -61,14 +61,14 @@
       &[hidden] {
         display: grid !important;
         visibility: hidden;
-        opacity: 0;
+        opacity: 0%;
         transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
       }
 
       // N'affiche rien si JavaScript n'est pas activé.
       &.no-js {
         visibility: hidden;
-        opacity: 0;
+        opacity: 0%;
         transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
       }
 

web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/api.ts

@@ -30,6 +30,20 @@ class APIResponseError extends Schema.TaggedErrorClass<APIResponseError>()("APIR
 
 type APIError = APIRequestError | APIResponseError;
 
+class WooCommerceErrorBody extends Schema.Class<WooCommerceErrorBody>("WooCommerceErrorBody")({
+  code: Schema.String,
+  data: Schema.Struct({
+    status: Schema.Int,
+  }),
+  message: Schema.String,
+}) {}
+class WooCommerceError extends Schema.Class<WooCommerceError>("WooCommerceError")({
+  body: WooCommerceErrorBody,
+  status: Schema.Number,
+}) {}
+
+type APIResponse<T> = T | WooCommerceError;
+
 /** Client `fetch` contenant les options et en-têtes de Requêtes pré-renseignées. */
 const APIFetchClient = FetchHttpClient.layer.pipe(
   Layer.provide(
@@ -96,7 +110,7 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
       });
 
     const AddProductToCart = Effect.fn("AppClient.AddProductToCart")(
-      function*(nonce: string, productToAdd: CartProduct): Effect.fn.Return<WooCommerceCart, APIError> {
+      function*(nonce: string, productToAdd: CartProduct): Effect.fn.Return<APIResponse<WooCommerceCart>, APIError> {
         const request = pipe(
           HttpClientRequest.post(`/wp-json/wc/store/cart/add-item`),
           HttpClientRequest.setHeader("Nonce", nonce),
@@ -109,6 +123,9 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
           Effect.flatMap(HttpClientResponse.schemaBodyJson(WooCommerceCart)),
           Effect.mapError(error => matchAPIError(error)),
           Effect.tapError(error => printErrorAsSuccinctMessage(error)),
+          // Effect.catchTag("APIResponseError", error => {
+          //   if (error.cause.)
+          // }),
         );
 
         return response;

web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts

@@ -0,0 +1,9 @@
+document.addEventListener("DOMContentLoaded", (): void => {
+  // TODO: Si la lecture automatique est désactivée, ajouter un bouton de lecture.
+  console.debug(navigator.getAutoplayPolicy("mediaelement"));
+});
+
+/**
+ * background-color: rgba(236, 234, 235, 0.52)
+ * backdrop-filter: contrast(50%) blur(3px)
+ */

web/app/themes/haiku-atelier-2024/views/accueil.twig

@@ -5,8 +5,9 @@
   <main id="page-accueil">
     <video
       autoplay disablepictureinpicture
-      id="intro-video" preload="auto"
+      id="intro-video" loop
-      loop muted
+      muted playsinline
+      preload="auto" webkit-playsinline
     >
       <source
         media="(width >= 600px)" src="{{ site.theme.link }}/assets/video/intro-desktop.m4v"