2025-07-04

bun.lock

@@ -13,7 +13,7 @@
         "loglevel": "^1.9.2",
         "loglevel-plugin-prefix": "^0.8.4",
         "optics-ts": "^2.4.1",
-        "purify-ts": "^2.1.2",
+        "purify-ts": "2.1.2",
         "ts-pattern": "^5.7.1",
         "valibot": "1.1.0",
       },
@@ -53,7 +53,7 @@
         "stylelint-plugin-logical-css": "^1.2.3",
         "typescript": "5.8.3",
         "typescript-eslint": "^8.35.1",
-        "vite": "^7.0.0",
+        "vite": "^7.0.1",
         "vite-plugin-compression2": "^2.2.0",
         "vite-plugin-manifest-sri": "^0.2.0",
         "vite-plugin-node-polyfills": "^0.23.0",
@@ -375,7 +375,7 @@
 
     "@keyv/serialize": ["@keyv/serialize@1.0.3", "", { "dependencies": { "buffer": "^6.0.3" } }, "sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g=="],
 
-    "@logtape/logtape": ["@logtape/logtape@1.0.1", "", {}, "sha512-5z/2Z4ZcZe4ZKKD2RUMv2GUk0JiyNhx+LNLZ5vh19QxobjkHY9VlEX9d03FbGf5U3SYyh6FOiaSPOV4gYq4QyQ=="],
+    "@logtape/logtape": ["@logtape/logtape@1.0.2", "", {}, "sha512-6EWfs4KyTAVsiAnXXSFpzEmUYI2k7qLJogqPv3JqwFd8S8Zr2iUBPv3pbIC+70cW4P6Zpq1l1hnX/jDVZwvc+Q=="],
 
     "@mobily/ts-belt": ["@mobily/ts-belt@4.0.0-rc.5", "", {}, "sha512-HLWJ8yKrfwdMzCvckRunrAL8Z+K5q31FdY6JzhkBp8o6uQsVuzf26KFyno1s6n6GB78OJEsjs57SaDk9plsJhA=="],
 
@@ -1537,7 +1537,7 @@
 
     "varint": ["varint@6.0.0", "", {}, "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg=="],
 
-    "vite": ["vite@7.0.0", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g=="],
+    "vite": ["vite@7.0.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw=="],
 
     "vite-plugin-compression2": ["vite-plugin-compression2@2.2.0", "", { "dependencies": { "@rollup/pluginutils": "^5.1.0", "tar-mini": "^0.2.0" } }, "sha512-7BZlU2mBHbqoBGy0ARkn3tv/7LC/2h8ewVDpG/cyH8iSzLw6E/yH6P4oBOEvchkQxNpl+B5W6rFR5fdSwfDhMA=="],
 
@@ -1559,7 +1559,7 @@
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
-    "wp-types": ["wp-types@4.68.0", "", { "dependencies": { "typescript": ">=4" } }, "sha512-b4E861y0BzNUJSWH2i1/ArTISI87qdadEO0qBJRocJ0L95P8gaa7r4RXQHMIfBpFnQy0NToMrnN8Qb3rWP2Vjg=="],
+    "wp-types": ["wp-types@4.68.1", "", { "dependencies": { "typescript": ">=4" } }, "sha512-PpyF5va7pxdBSV8cE3oao/Wfsrbx1gZKmBaijOd6/Q6RmuzCfUSPHtj8RzAtwDYD8dv7cga5lX63TvYTHdOIZA=="],
 
     "write-file-atomic": ["write-file-atomic@5.0.1", "", { "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" } }, "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw=="],
 

composer.lock

@@ -3673,12 +3673,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/Roave/SecurityAdvisories.git",
-                "reference": "d4ca0cc4c49ba3437778e201d35844715d9b1bd9"
+                "reference": "e798e1676cbc3fa2f63b439b844fe30645b1e052"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/d4ca0cc4c49ba3437778e201d35844715d9b1bd9",
+                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/e798e1676cbc3fa2f63b439b844fe30645b1e052",
-                "reference": "d4ca0cc4c49ba3437778e201d35844715d9b1bd9",
+                "reference": "e798e1676cbc3fa2f63b439b844fe30645b1e052",
                 "shasum": ""
             },
             "conflict": {
@@ -4356,7 +4356,8 @@
                 "spoonity/tcpdf": "<6.2.22",
                 "squizlabs/php_codesniffer": ">=1,<2.8.1|>=3,<3.0.1",
                 "ssddanbrown/bookstack": "<24.05.1",
-                "starcitizentools/citizen-skin": ">=2.4.2,<3.3.1",
+                "starcitizentools/citizen-skin": ">=1.9.4,<3.4",
+                "starcitizentools/short-description": ">=4,<4.0.1",
                 "starcitizentools/tabber-neue": ">=1.9.1,<2.7.2|>=3,<3.1.1",
                 "statamic/cms": "<=5.16",
                 "stormpath/sdk": "<9.9.99",
@@ -4619,7 +4620,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-06-27T21:05:09+00:00"
+            "time": "2025-07-03T22:05:19+00:00"
         },
         {
             "name": "squizlabs/php_codesniffer",
@@ -4711,12 +4712,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/szepeviktor/phpstan-wordpress.git",
-                "reference": "4edada80613f627fd320b56b762706a7d4a53b90"
+                "reference": "f9c2366c2e661f7323d882f7784ee64847d7d019"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/szepeviktor/phpstan-wordpress/zipball/4edada80613f627fd320b56b762706a7d4a53b90",
+                "url": "https://api.github.com/repos/szepeviktor/phpstan-wordpress/zipball/f9c2366c2e661f7323d882f7784ee64847d7d019",
-                "reference": "4edada80613f627fd320b56b762706a7d4a53b90",
+                "reference": "f9c2366c2e661f7323d882f7784ee64847d7d019",
                 "shasum": ""
             },
             "require": {
@@ -4766,7 +4767,7 @@
                 "issues": "https://github.com/szepeviktor/phpstan-wordpress/issues",
                 "source": "https://github.com/szepeviktor/phpstan-wordpress/tree/2.x"
             },
-            "time": "2025-06-21T06:23:15+00:00"
+            "time": "2025-07-03T13:31:50+00:00"
         }
     ],
     "aliases": [],

docs/JOURNAL.md

@@ -34,3 +34,26 @@
 - Développement d'un script `fish` qui lance un onglet Cromite en mode sans-tête avec profile Invité sur le site Haiku Atelier.
   - Il est possible, en utilisant le débogueur à distance Chromium, de rafraîchir un onglet via le terminal en passant par `fx` et `websocat` pour l'interface _WebSocket_.
   - Cela offre une forme primitive de « hot reload » (rechargement à chaud) pour éviter d'avoir manuellement taper F5 à chaque changement.
+
+## 2025-07-04
+
+- Problème de l'animation SVG s'affichant mal sur iOS.
+  - Ce serait du à un bogue de rendu du moteur _WebKit_.
+  - Pour le contourner, appliquer un `transform: translate3d` ou `transform: matrix` sur les éléments SVG.
+  - Installation d'un [débogueur distant pour iOS](https://git.gay/besties/ios-safari-remote-debug).
+    - Compilation de [ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy).
+    - Ensuite, avec un câble reliant l'iPhone à l'ordinateur :
+      - S'assurer que le démon `usbmuxd` tourne ;
+      - Ouvrir un onglet sur Safari et activer le _Web Inspector_ dans les préférences avancées ;
+      - Lancer `ios_webkit_debug_proxy` dans le terminal ;
+      - Compiler `ios-safari-remote-debug` (`./ios-safari-remote-debug build -t releases/Apple/Safari-17.5-macOS-14.5`) ;
+      - Lancer le serveur `ios-safari-remote-debug` (`./ios-safari-remote-debug serve`) ;
+      - Naviguer à son adresse, ouvrir les outils de développements normalement proposés.
+    - Cela devrait pouvoir faciliter la résolution du soucis de l'animation sur l'accueil pour Safari iOS.
+    - **Le fin de mot de l'histoire ?**
+      - Pour _iOS_, on ne peut pas (encore) spécifier de valeurs relatives en pourcentages pour les dimensions des _SVG_. Il faut utiliser des `vw`/`vi`.
+      - Pour les `<text>` au sein de SVG, le rendu de `font-size` peut différer de celui de Chromium/FF. Question de _PPI_ ?
+      - `IntersectionObserver` émettait un événement où `intersectionRatio` n'était pas 1, mais ~0.99874784. Vu que le script utilisait une valeur de 1 pour décider qu'un élément soit caché ou non, l'animation était cachée au chargement de la page.
+      - Utiliser un ratio supérieur à 0.9 corrige le soucisS.
+- Journalisation avec _LogTape_.
+  - Différenciation primaire du niveau minimum de journal en utilisant la variable d'environnement `VITE_ENV`.

dprint.json

@@ -12,7 +12,7 @@
     "cacheKey": "1",
     "commands": [
       { "command": "prettier --ignore-unknown --write --stdin-filepath {{file_path}}", "exts": ["php", "xml"] },
-      { "command": "just --dump", "fileNames": ["justfile"], "stdin": false }
+      { "command": "just --dump", "fileNames": ["justfile"], "stdin": true }
     ],
     "cwd": "${originConfigDir}",
     "indentWidth": 2,

justfile

@@ -1,20 +1,27 @@
 set shell := ["fish", "-c"]
+set unstable := true
 
 cacheFolder := ".cache"
 eslintCacheFile := "eslintcache"
 prettierCacheFile := "prettiercache"
 stylelintCacheFile := "stylelintcache"
 
+# Recette par défaut.
+default: dev
+
 # Liste toutes les recettes
 list:
     @just --list --list-heading 'Recettes disponibles :'\n'' --unsorted
 
-# Met à jour les dépendances composer et npm
+# Met à jour les dépendances composer et npm.
+[group('js')]
+[group('php')]
 update:
     composer update
     bun update
 
-# Formatte avec Prettier et dprint
+# Formatte avec Prettier et dprint.
+[group('qualité')]
 format:
     @echo "Formatage de l'ensemble du code avec Prettier et dprint."
     bunx prettier \
@@ -25,92 +32,112 @@ format:
         .
     dprint fmt
 
-# Compile, minifie et optimise Sass vers CSS
+# Compile, minifie et optimise Sass vers CSS.
+[group('css')]
 build-css:
-    bunx sass \
+    @bunx sass \
         --update \
         "web/app/themes/haiku-atelier-2024/src/sass":"web/app/themes/haiku-atelier-2024/assets/css"
-    bunx lightningcss \
+    @bunx lightningcss \
         --bundle \
         --minify \
         --output-file "web/app/themes/haiku-atelier-2024/assets/css/main.min.css" \
         -- "web/app/themes/haiku-atelier-2024/assets/css/main.css"
-    bunx lightningcss \
+    @bunx lightningcss \
         --bundle \
         --minify \
         --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css" \
         -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css"
-    bunx lightningcss \
+    @bunx lightningcss \
         --bundle \
         --minify \
         --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css" \
         -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css"
-    bunx lightningcss \
+    @bunx lightningcss \
         --bundle \
         --minify \
         --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.min.css" \
         -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css"
-    bunx lightningcss \
+    @bunx lightningcss \
         --bundle \
         --minify \
         --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css" \
         -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css"
-    bunx lightningcss \
+    @bunx lightningcss \
         --bundle \
         --minify \
         --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-modele-simple.min.css" \
         -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-modele-simple.css"
-    bunx lightningcss \
+    @bunx lightningcss \
-        --bundle \
+      --bundle \
-        --minify \
+      --minify \
-        --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.min.css" \
+      --output-file "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.min.css" \
-        -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.css"
+      -- "web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.css"
 
-# Compile le CSS à chaque changement de fichier
+# Compile le CSS à chaque changement de fichier.
+[group('css')]
 watch-css:
     @just dev
     @watchexec -w "web/app/themes/haiku-atelier-2024/src/sass" -- just build-css reload-tab
 
-# Compile TypeScript en JavaScript
+# Compile TypeScript en JavaScript.
+[group('js')]
 build-js:
-    bunx vite build
+    @bunx vite build
 
-# Compile tout
+# Compile tout.
+[group('css')]
+[group('js')]
 build-all:
-    just build-css
+    @just build-css
-    just build-js
+    @just build-js
+    @just format
 
-# Compile TypeScript à chaque changement de fichier
+# Compile TypeScript à chaque changement de fichier.
+[group('js')]
 watch-js:
     bunx vite build --watch
 
-# Vérifie le code TypeScript avec des analyseurs statiques
+# Vérifie le code TypeScript avec des analyseurs statiques.
+[group('js')]
+[group('qualité')]
 lint-js:
     -bunx eslint "web/app/themes/haiku-atelier-2024/src/scripts"
     -bunx biome check --reporter=summary "web/app/themes/haiku-atelier-2024/src/scripts"
     -bunx oxlint "web/app/themes/haiku-atelier-2024/src/scripts"
 
-# Vérifie le code Sass avec Stylelint
+# Vérifie le code Sass avec Stylelint.
+[group('css')]
+[group('qualité')]
 lint-css:
     -bunx stylelint "web/app/themes/haiku-atelier-2024/src/sass/" --fix
 
 # Vérifie le code TypeScript mort avec knip
+[group('js')]
+[group('qualité')]
 lint-code-mort:
     -bunx knip
 
-# Avec Jujetsu, fusionne tous les changements actuels dans le commit précédent et pousse sur le répertoire distant
+# Fusionne tous les changements actuels dans le commit précédent et pousse sur le répertoire distant avec Jujetsu.
+[group('vcs')]
 squash-and-push:
     -jj squash --ignore-immutable && jj bookmark set principale -r @- --allow-backwards && jj git push
 
 # Analyse statiquement, compile et formate le CSS
+[group('css')]
+[group('qualité')]
 lint-build-format-css:
     -just lint-css
     -just build-css
     -just format
 
+# Lance un navigateur de développement.
+[group('développement')]
 dev:
     @/opt/cromite/chrome --remote-debugging-address=127.0.0.1 --remote-debugging-port=9222 --profile-directory=Guest "https://haikuatelier.gcch.local" &
 
+# Recharge le premier onglet du navigateur de développement.
+[group('développement')]
 reload-tab:
     #!/usr/bin/fish
     set -f WSURL (curl -s http://127.1:9222/json | fx '.[0].webSocketDebuggerUrl')

package.json

@@ -9,7 +9,7 @@
   "keywords": [],
   "scripts": { "knip": "knip" },
   "dependencies": {
-    "@logtape/logtape": "^1.0.1",
+    "@logtape/logtape": "^1.0.2",
     "@mobily/ts-belt": "v4.0.0-rc.5",
     "@sentry/browser": "^9.34.0",
     "a11y-dialog": "^8.1.4",
@@ -58,13 +58,13 @@
     "stylelint-plugin-logical-css": "^1.2.3",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.0",
+    "vite": "^7.0.2",
     "vite-plugin-compression2": "^2.2.0",
     "vite-plugin-manifest-sri": "^0.2.0",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-valibot-env": "^1.0.1",
     "vite-tsconfig-paths": "^5.1.4",
-    "wp-types": "^4.68.0"
+    "wp-types": "^4.68.1"
   },
   "browserslist": [
     "chrome >0 and last 3 years",

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

@@ -46,18 +46,18 @@
 }
 #page-accueil .storytelling__animation[hidden] {
   display: grid !important;
-  /* visibility: hidden;
+  visibility: hidden;
-  opacity: 0; */
+  opacity: 0;
   transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
 }
 #page-accueil .storytelling__animation.no-js {
-  /* visibility: hidden;
+  visibility: hidden;
-  opacity: 0; */
+  opacity: 0;
   transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
 }
 #page-accueil .storytelling__animation .animation-conteneur {
   overflow: visible;
-  inline-size: 120%;
+  width: 120vw;
   block-size: var(--hauteur-animation);
 }
 #page-accueil .storytelling__animation .animation-texte {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAQA;EACE;AAEA;AAAA;EAEA;;AAIF;AACE;AAAA;EAEA;;AAGF;EACE;EAGA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAQA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"}

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

@@ -1 +1 @@
-#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur)*13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl)*2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right),#0000,#000 20%,#000 80%,#0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{inline-size:120%;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl)*2.2)}}
+#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur)*13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl)*2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right),#0000,#000 20%,#000 80%,#0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl)*2.2)}}

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

@@ -60,16 +60,15 @@
 
       &[hidden] {
         display: grid !important;
-
+        visibility: hidden;
-        /* 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;
+        visibility: hidden;
-        opacity: 0; */
+        opacity: 0;
         transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
       }
 
@@ -77,18 +76,19 @@
         overflow: visible;
 
         // Nécessaire pour que les lettres apparaissent « en douceur » dans la vue.
-        inline-size: 120%;
+        // Safari requiert des `vw` plutôt que des `%`.
+        width: 120vw;
         block-size: var(--hauteur-animation);
       }
 
       .animation-texte {
         overflow: visible;
 
-        // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium et FF ?
+        // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
         font-size: var(--taille-police);
         font-weight: 600;
 
-        // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium et FF ?
+        // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
         text-shadow: 4px 4px 0 var(--couleur-blanc);
         text-transform: uppercase;
         letter-spacing: var(--espacement-inter-lettres-rapproche-s);

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

@@ -3,6 +3,9 @@ import chalk from "chalk";
 import log, { type Logger } from "loglevel";
 import prefix from "loglevel-plugin-prefix";
 
+// Récupère les variables d'environnement au sein d'un objet.
+const environment = import.meta.env;
+
 const colors = {
   DEBUG: chalk.cyan,
   ERROR: chalk.red,
@@ -26,7 +29,7 @@ configureSync({
   loggers: [
     {
       category: HAIKU_ATELIER_LOGGER,
-      lowestLevel: "debug",
+      lowestLevel: environment.VITE_MODE === "production" ? "warning" : "debug",
       sinks: ["console"],
     },
   ],

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

@@ -67,7 +67,7 @@ const initDefilementStorytelling = (): void => {
     nuLogger.debug`majDimensions | dimensionsImage ${dimensionsImage}`;
 
     // Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image.
-    E.CONTENEUR_ANIMATION.style.inlineSize = `${String(dimensionsImage.width)}px`;
+    E.CONTENEUR_ANIMATION.style.width = `${String(dimensionsImage.width)}px`;
 
     // Adapte la hauteur du conteneur des images pour un défilement « seamless ».
     const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`;
@@ -113,11 +113,12 @@ const initGestionAnimation = (): void => {
       };
       const callback = (entries: Array<IntersectionObserverEntry>) => {
         A.forEach(entries, e => {
-          e.intersectionRatio === 1
+          e.intersectionRatio >= 0.9
             ? E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN)
             : E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, "");
 
-          nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio === 1} | ${e}`;
+          nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio >= 0.9} | ${e}`;
+          console.debug(e);
         });
       };
 

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

@@ -23,17 +23,23 @@
             xmlns="http://www.w3.org/2000/svg"
           >
             <svg
-              y="50%"
               class="animation-texte"
+              height="100%"
+              width="100%"
+              y="50%"
             >
               <path
                 d="m0 0c600-90 600 90 1200 0"
                 fill="transparent"
                 id="curve-1"
+                transform="translate3d(0,0,0)"
               />
 
               {# TODO: Créer une fonction pour générer les images #}
-              <text dominant-baseline="middle">
+              <text
+                dominant-baseline="middle"
+                transform="translate3d(0,0,0)"
+              >
                 <textPath
                   id="text-path-1"
                   xlink:href="#curve-1"
@@ -51,7 +57,10 @@
                 />
               </text>
 
-              <text dominant-baseline="middle">
+              <text
+                dominant-baseline="middle"
+                transform="translate3d(0,0,0)"
+              >
                 <textPath
                   id="text-path-2"
                   xlink:href="#curve-1"
@@ -69,7 +78,10 @@
                 />
               </text>
 
-              <text dominant-baseline="middle">
+              <text
+                dominant-baseline="middle"
+                transform="translate3d(0,0,0)"
+              >
                 <textPath
                   id="text-path-3"
                   xlink:href="#curve-1"
@@ -87,7 +99,10 @@
                 />
               </text>
 
-              <text dominant-baseline="middle">
+              <text
+                dominant-baseline="middle"
+                transform="translate3d(0,0,0)"
+              >
                 <textPath
                   id="text-path-4"
                   xlink:href="#curve-1"

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

@@ -21,17 +21,21 @@
 
     {# Bouton Revenir en haut #}
     <button
-      aria-hidden
+      aria-hidden="true"
+      aria-labelled-by="bouton-retour-haut-label"
       class="bouton-retour-haut"
       id="bouton-retour-haut"
       type="button"
     >
       <img
         alt="An arrow pointing to the top"
+        aria-hidden="true"
         src="{{ site.theme.link }}/assets/img/icons/arrow.svg"
-        aria-hidden
       >
-      <span class="visuellement-cache">Back to top</span>
+      <span
+        class="visuellement-cache"
+        id="bouton-retour-haut-label"
+      >Back to top</span>
     </button>
 
     {# Pied de page #}

web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig

@@ -1,7 +1,8 @@
 <header id="en-tete">
   {# Bouton (dés)activant le menu mobile #}
-  <section class="logo">
+  <div class="logo">
     <button
+      aria-label="Button to toggle the mobile navigation menu for small screen sizes"
       id="bouton-menu-mobile"
       type="button"
     >
@@ -14,7 +15,7 @@
         width="307"
       >
     </button>
-  </section>
+  </div>
 
   {# TODO: Utiliser un Menu WordPress ? #}
   <nav
@@ -79,7 +80,7 @@
   </nav>
 
   {# Bouton « Panier » avec l'indicateur de quantité de Produits #}
-  <section class="compte-panier">
+  <div class="compte-panier">
     <a
       class="lien-bouton"
       data-contient-articles="{{ articles_presents }}"
@@ -88,7 +89,7 @@
     >
       cart ({{ quantite_articles }})
     </a>
-  </section>
+  </div>
 
   {# Menu mobile #}
   <div

web/app/themes/haiku-atelier-2024/views/parts/pied-de-page.twig

@@ -2,7 +2,7 @@
   aria-label="Footer offering navigations links"
   id="pied-de-page"
 >
-  <section class="zone-menu-navigation-secondaire">
+  <div class="zone-menu-navigation-secondaire">
     <nav
       aria-label="Navigation for special pages"
       class="menu-navigation"
@@ -14,9 +14,9 @@
         {# <li><a href="">Shipping & Returns</a></li> #}
       </ul>
     </nav>
-  </section>
+  </div>
 
-  <section class="zone-liens-reseaux-sociaux">
+  <div class="zone-liens-reseaux-sociaux">
     <nav
       aria-label="Navigation for Haiku Atelier's social links"
       class="menu-navigation"
@@ -37,5 +37,5 @@
         {% endfor %}
       </ul>
     </nav>
-  </section>
+  </div>
 </footer>