From d30b83d093270f760a3c4fae4df4694d4fa2b003 Mon Sep 17 00:00:00 2001 From: gcch Date: Thu, 3 Jul 2025 11:50:08 +0200 Subject: [PATCH] 2025-07-03 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - étoffe le fichier `JOURNAL` avec les nouveaux changements majeurs. - propose une tâche _Justfile_ pour un rechargement à chaud primitif lors de changements CSS. - ne précompresse pas et ne propose plus de versions « legacy » des scripts JS en methodes développement. - appose correctement `aria-current` sur le lien de la page courante dans les deux menus de navigation. - remplace une image statique « Scroll down » avec une animation SVG reposant sur du texte et des chemins. - renomme moultes choses. --- cspell.json | 5 +- docs/JOURNAL.md | 36 ++++ docs/TODO.md | 9 +- ...25-06-13-informations-produit-en-grille.md | 9 - ...3-remaniement-defilement-photos-produit.md | 5 - eslint.config.js | 8 +- justfile | 31 ++-- vite.config.js | 63 +++---- .../haiku-atelier-2024/assets/css/main.css | 23 +-- .../assets/css/main.css.map | 2 +- .../assets/css/main.min.css | 2 +- .../assets/css/pages/page-accueil.css | 100 +++++++++-- .../assets/css/pages/page-accueil.css.map | 2 +- .../assets/css/pages/page-accueil.min.css | 2 +- .../haiku-atelier-2024/src/gleam/README.md | 25 +++ .../haiku-atelier-2024/src/gleam/gleam.toml | 11 ++ .../src/gleam/manifest.toml | 16 ++ .../src/gleam/src/haiku_gleam.gleam | 5 + .../gleam/src/intersection_observer.ffi.mjs | 16 ++ .../src/gleam/src/intersection_observer.gleam | 22 +++ .../src/gleam/test/haiku_gleam_test.gleam | 13 ++ .../src/sass/abstracts/_variables.scss | 1 + .../src/sass/base/_base.scss | 1 + .../src/sass/layouts/_en-tete.scss | 17 +- .../sass/layouts/_informations-produit.scss | 9 +- .../sass/layouts/_produits-similaires.scss | 5 +- .../src/sass/pages/page-accueil.scss | 121 +++++++++++-- .../src/scripts/constantes/dom.ts | 94 +++++----- .../scripts/{logging.ts => journalisation.ts} | 15 ++ .../haiku-atelier-2024/src/scripts/lib/dom.ts | 10 +- .../src/scripts/lib/erreurs.ts | 2 +- .../scripts-page-panier-adresses.ts | 2 +- .../scripts-page-panier-code-promo.ts | 6 +- .../scripts-page-panier-elements.ts | 80 ++++----- .../scripts-page-panier-evenement.ts | 2 +- .../scripts-page-panier-methodes-livraison.ts | 2 +- .../scripts-page-panier-panneau-produits.ts | 22 +-- .../src/scripts/scripts-bouton-panier.ts | 4 +- .../scripts/scripts-bouton-retour-sommet.ts | 9 +- .../src/scripts/scripts-menu-categories.ts | 6 +- .../src/scripts/scripts-menu-mobile.ts | 6 +- .../src/scripts/scripts-page-a-propos.ts | 12 +- .../src/scripts/scripts-page-accueil.ts | 129 ++++++++++---- .../src/scripts/scripts-page-boutique.ts | 8 +- .../src/scripts/scripts-page-panier.ts | 22 +-- .../src/scripts/scripts-page-produit.ts | 24 +-- .../haiku-atelier-2024/views/accueil.twig | 162 ++++++++++++++---- .../haiku-atelier-2024/views/boutique.twig | 2 +- .../views/parts/en-tete.twig | 11 +- 49 files changed, 830 insertions(+), 359 deletions(-) create mode 100644 docs/JOURNAL.md delete mode 100644 docs/travail/2025-06-13-informations-produit-en-grille.md delete mode 100644 docs/travail/2025-06-13-remaniement-defilement-photos-produit.md create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/README.md create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/gleam.toml create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/manifest.toml create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/src/haiku_gleam.gleam create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.ffi.mjs create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.gleam create mode 100644 web/app/themes/haiku-atelier-2024/src/gleam/test/haiku_gleam_test.gleam rename web/app/themes/haiku-atelier-2024/src/scripts/{logging.ts => journalisation.ts} (59%) diff --git a/cspell.json b/cspell.json index 6dcc082f..189dfeed 100644 --- a/cspell.json +++ b/cspell.json @@ -1 +1,4 @@ -{ "dictionaries": ["fr-fr", "en-gb"], "words": ["oxlint", "Vali", "mobily", "valibot", "GLITCHTIP"] } +{ + "dictionaries": ["fr-fr", "en-gb"], + "words": ["GLITCHTIP", "Vali", "fdir", "mobily", "oxlint", "valibot", "zstandard", "Eles", "logtape"] +} diff --git a/docs/JOURNAL.md b/docs/JOURNAL.md new file mode 100644 index 00000000..f294dbb4 --- /dev/null +++ b/docs/JOURNAL.md @@ -0,0 +1,36 @@ +# Journal de développement + +## 2025-06-13 + +### Informations produit sous forme de grille + +- L'idée est de réimplémenter les informations essentiels du produit (nom, prix), le sélecteur de variation, les textes de détail, de conditions et d'entretien, et le bouton d'ajout au Panier. +- Plutôt qu'un encart flottant, contenant tout, il n'y aurait qu'une barre pleine longueur comprenant nom, prix et sélecteur de variation (`.essentiel-produit`). +- Il flotterait en bas de l'écran jusqu'à ce se poser à la fin des photos. +- Une nouvelle section, statique elle et faisant suite à la fois aux photos et à la barre, s'afficherait en pleine longueur sous forme d'accordéon, avec les anciens onglets comme sections. +- Par défaut, la section « Détails » serait développée. +- `
` et `` sont aujourd'hui pris en charge par les navigateurs (niveau _Baseline_), mais l'attribut `name` permettant l'ouverture exclusive d'une section par accordéon (p. ex. le développement d'une ferme toutes les autres) n'a que récemment été implémentée (2024 pour _Firefox_). +- Une implémentation en _JavaScript_ est donc pour l'instant nécessaire. + +### Remaniement du défilement des photos de la page Produit + +- Les flèches de défilement sont supprimées. +- À la place, les photos ne s'affichent plus en pleine longueur. +- Elles le sont à ~93%, pour que l'on perçoive sur les bords la photo précédente/suivante et signale à l'Utilisateur qu'il est possible de défiler. + +## 2025-06-30 + +- Test de _LogTape_ comme librairie de journalisation. + +## 2025-07-03 + +- Création d'une animation SVG avec des `` défilants sur un ``. + - Le redimensionnement dynamique du conteneur de l'animation se fait via JavaScript. + - Le script récupère la longueur d'une image au redimensionnement de la vue. + - Il injecte un attribut CSS `inline-size` dans le HTML de la page correspondant à cette nouvelle longueur. + - Il n'est pas encore possible de mettre en pause l'animation au survol de la souris, qui est une bonne pratique pour ce style d'éléments visuels. + - Le `` doit être d'une longueur supérieure au conteneur (ici `120%`) pour que le texte disparaisse de façon progressive, qu'il ne soit pas « coupé » brutalement aux extrémités. +- Début de l'implémentation d'une classe `no-js` pour un affichage adapté en cas d'absence de JavaScript. +- 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. diff --git a/docs/TODO.md b/docs/TODO.md index 17ac508b..c1ff310b 100755 --- a/docs/TODO.md +++ b/docs/TODO.md @@ -12,16 +12,23 @@ - Champs - Utiliser un polyfill pour BroadcastChannel - PAGE SHOP - - [ ] Faire apparaître le menu des catégories de Produits quand on scroll vers le haut - PAGE PANIER - Erreur lorsque l'on ajoute deux variations d'un même produit et que l'on essaie d'en supprimer une. - Il semblerait que supprimer une variation supprime toutes les entrées du même produit. - MÉTHODES DE LIVRAISON - [ ] Proposer la livraison à domicile en Belgique et en France pour le coût unique de 8 euros, quel que soit le montant de la commande + - [ ] Proposer la livraison aux États-Unis. - PAGE PRODUIT - PIED DE PAGE - TOUTES LES PAGES - Trouver la source des bordures superflues. + - Sur Chromium : box-shadow sur
? + +- MODE VACANCES + - Pour l'été, superposer à la page SHOP un calque gris sur lequel défile une animation d'un texte indiquant que la boutique est en vacances. + - La page doit rester défilable. +- MODE NO JS + - Laisser la page normalement défilable avec les images les une après les autres quand _JavaScript_ n'est pas présent. --- diff --git a/docs/travail/2025-06-13-informations-produit-en-grille.md b/docs/travail/2025-06-13-informations-produit-en-grille.md deleted file mode 100644 index 13d8d6b3..00000000 --- a/docs/travail/2025-06-13-informations-produit-en-grille.md +++ /dev/null @@ -1,9 +0,0 @@ -# Informations produit sous forme de grille - -- L'idée est de réimplémenter les informations essentiels du produit (nom, prix), le sélecteur de variation, les textes de détail, de conditions et d'entretien, et le bouton d'ajout au Panier. -- Plutôt qu'un encart flottant, contenant tout, il n'y aurait qu'une barre pleine longueur comprenant nom, prix et sélecteur de variation (`.essentiel-produit`). -- Il flotterait en bas de l'écran jusqu'à ce se poser à la fin des photos. -- Une nouvelle section, statique elle et faisant suite à la fois aux photos et à la barre, s'afficherait en pleine longueur sous forme d'accordéon, avec les anciens onglets comme sections. -- Par défaut, la section « Détails » serait développée. -- `
` et `` sont aujourd'hui pris en charge par les navigateurs (niveau _Baseline_), mais l'attribut `name` permettant l'ouverture exclusive d'une section par accordéon (p. ex. le développement d'une ferme toutes les autres) n'a que récemment été implémentée (2024 pour _Firefox_). -- Une implémentation en _JavaScript_ est donc pour l'instant nécessaire. diff --git a/docs/travail/2025-06-13-remaniement-defilement-photos-produit.md b/docs/travail/2025-06-13-remaniement-defilement-photos-produit.md deleted file mode 100644 index 9a7cde30..00000000 --- a/docs/travail/2025-06-13-remaniement-defilement-photos-produit.md +++ /dev/null @@ -1,5 +0,0 @@ -# Remaniement du défilement des photos de la page Produit - -- Les flèches de défilement sont supprimées. -- À la place, les photos ne s'affichent plus en pleine longueur. -- Elles le sont à ~93%, pour que l'on perçoive sur les bords la photo précédente/suivante et signale à l'utilisteur qu'il est possible de défiler. diff --git a/eslint.config.js b/eslint.config.js index 01f59542..4b30e56e 100755 --- a/eslint.config.js +++ b/eslint.config.js @@ -46,12 +46,8 @@ export default tseslint.config( "@typescript-eslint/no-misused-promises": "off", /* Cette règle empêche l'usage de génériques précisant les types de retour de fonctions. */ "@typescript-eslint/no-unnecessary-type-parameters": "off", - "@typescript-eslint/no-unused-expressions": [ - "error", - { - allowTernary: true, - }, - ], + // Pour utiliser LogTape. + "@typescript-eslint/no-unused-expressions": "off", /* Cette règle est doublon avec les règles noUnused* de TypeScript. */ "@typescript-eslint/no-unused-vars": "off", /* Cette règle empêche de lever des erreurs génériques (p.ex. `E extends Error`). */ diff --git a/justfile b/justfile index d59e4d98..8236ad6b 100755 --- a/justfile +++ b/justfile @@ -9,18 +9,10 @@ stylelintCacheFile := "stylelintcache" list: @just --list --list-heading 'Recettes disponibles :'\n'' --unsorted -# Démarre le conteneur ddev -start: - ddev start - -# Arrête le conteneur ddev -stop: - ddev stop - # Met à jour les dépendances composer et npm update: composer update - bun update + bun update # Formatte avec Prettier et dprint format: @@ -76,10 +68,8 @@ build-css: # Compile le CSS à chaque changement de fichier watch-css: - bunx sass \ - --update \ - --watch \ - "web/app/themes/haiku-atelier-2024/src/sass":"web/app/themes/haiku-atelier-2024/assets/css" + @just dev + @watchexec -w "web/app/themes/haiku-atelier-2024/src/sass" -- just build-css reload-tab # Compile TypeScript en JavaScript build-js: @@ -112,8 +102,17 @@ lint-code-mort: squash-and-push: -jj squash --ignore-immutable && jj bookmark set principale -r @- --allow-backwards && jj git push -# Compile, analyse statiquement (avec corrections automatiques) et formate le CSS -build-lint-format-css: - -just build-css +# Analyse statiquement, compile et formate le CSS +lint-build-format-css: -just lint-css + -just build-css -just format + +dev: + @/opt/cromite/chrome --remote-debugging-address=127.0.0.1 --remote-debugging-port=9222 --profile-directory=Guest "https://haikuatelier.gcch.local" & + +reload-tab: + #!/usr/bin/fish + set -f WSURL (curl -s http://127.1:9222/json | fx '.[0].webSocketDebuggerUrl') + set -f REQUEST '{ "id": 2, "method": "Page.reload", "params": { "ignoreCache": true, "scriptToEvaluateOnLoad": "" } }' + echo $REQUEST | websocat $WSURL diff --git a/vite.config.js b/vite.config.js index 7f7fadd7..2f5a2707 100755 --- a/vite.config.js +++ b/vite.config.js @@ -17,13 +17,40 @@ const SRC_TYPESCRIPT_PATHS = new fdir() .crawl(`web/app/themes/${SLUG_THEME}/src/scripts`) .withPromise(); -/* Voir le fichier vite.env.d.ts */ +// Voir le fichier vite.env.d.ts. const SCHEMA_ENVIRONNEMENT = v.object({ VITE_GLITCHTIP_NSD: v.pipe(v.string(), v.url(), v.readonly()), VITE_MODE: v.pipe(v.string(), v.readonly()), VITE_URL: v.pipe(v.string(), v.nonEmpty(), v.url(), v.readonly()), }); +const basePlugins = [ + // Permet de valider les variables d'environnements définies à partir d'un schéma Valibot + valibot(SCHEMA_ENVIRONNEMENT), + manifestSRI({ algorithms: ["sha512"] }), + nodePolyfills({ + include: [], + protocolImports: true, + }), +]; +// Les extensions activées en production. +const prodPlugins = [ + legacy({ + modernPolyfills: true, + modernTargets: + "chrome >0 and last 3 years, edge >0 and last 3 years, safari >0 and last 3 years, firefox >0 and last 3 years, and_chr >0 and last 3 years, and_ff >0 and last 3 years, ios >0 and last 3 years", + renderLegacyChunks: true, + }), + compression({ + algorithms: [ + "brotliCompress", + "gzip", + "zstandard", + ], + threshold: 1000, + }), +]; + export default defineConfig(async ({ mode }) => { const env = loadEnv(mode, process.cwd(), "VITE"); @@ -32,9 +59,9 @@ export default defineConfig(async ({ mode }) => { build: { assetsDir: ".", emptyOutDir: true, - /* Génère un fichier manifeste dans outDir */ + // Génère un fichier manifeste dans outDir. manifest: true, - minify: env.VITE_MODE === "production", + minify: env["VITE_MODE"] === "production", outDir: resolve("./web/app/themes/haiku-atelier-2024/assets/js"), reportCompressedSize: true, rollupOptions: { @@ -42,39 +69,17 @@ export default defineConfig(async ({ mode }) => { output: { assetFileNames: "[name].[hash].[extname]", chunkFileNames: "[name].[hash].js", - compact: env.VITE_MODE === "production", + compact: env["VITE_MODE"] === "production", entryFileNames: "[name].js", validate: true, }, treeshake: true, }, - sourcemap: env.VITE_MODE === "production", + sourcemap: env["VITE_MODE"] === "production", target: "es2020", write: true, }, - mode: env.VITE_MODE ?? "production", - plugins: [ - // Permet de valider les variables d'environnements définies à partir d'un schéma Valibot - valibot(SCHEMA_ENVIRONNEMENT), - manifestSRI({ algorithms: ["sha512"] }), - nodePolyfills({ - include: [], - protocolImports: true, - }), - legacy({ - modernPolyfills: true, - modernTargets: - "chrome >0 and last 3 years, edge >0 and last 3 years, safari >0 and last 3 years, firefox >0 and last 3 years, and_chr >0 and last 3 years, and_ff >0 and last 3 years, ios >0 and last 3 years", - renderLegacyChunks: true, - }), - compression({ - algorithms: [ - "brotliCompress", - "gzip", - "zstandard", - ], - threshold: 1000, - }), - ], + mode: env["VITE_MODE"] ?? "production", + plugins: env["VITE_MODE"] === "production" ? [...basePlugins, ...prodPlugins] : [...basePlugins], }; }); diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.css b/web/app/themes/haiku-atelier-2024/assets/css/main.css index 1dd584d5..9f4e6041 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css @@ -52,6 +52,7 @@ --hauteur-ligne-compacte: 1.1; --hauteur-ligne-rapprochee: 1; /* Espacements entre les lettres */ + --espacement-inter-lettres-rapproche-m: -1px; --espacement-inter-lettres-rapproche-s: -0.5px; --espacement-inter-lettres-etendu-s: 0.5px; --espacement-inter-lettres-etendu-m: 1px; @@ -66,7 +67,7 @@ ); --contenu-page-hauteur-minimale-avec-categories: calc( 100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - - var(--menu-categories-produits-hauteur) + - var(--menu-categories-produits-hauteur) ); /* Espacements */ --espace-xs: 0.25rem; @@ -109,6 +110,7 @@ html { * 2. Utilise la couleur primaire du site. */ body { + overscroll-behavior: none; accent-color: var(--couleur-jaune); /* 2 */ background: var(--couleur-gris); /* 1 */ } @@ -688,14 +690,17 @@ body:has(#menu-mobile:not([aria-hidden=true])) { /* Dispositions */ --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 90% no-repeat; +} +#en-tete .menu-navigation__entree--courante { + background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto 90% no-repeat; +} #en-tete .menu-navigation__entree a { display: inline-block; /* 1 */ padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */ text-align: center; /* 4 */ } -#en-tete .menu-navigation__entree--courante { - background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto 90% no-repeat; -} @media (hover: hover) { #en-tete .menu-navigation__entree:hover { background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto 90% no-repeat; @@ -1230,9 +1235,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) { .details-produit__textes .section-textuelle:not(:last-of-type) { border-block-end: 1px solid var(--couleur-noir); } -.details-produit__textes .section-textuelle:has(button[aria-expanded=true]) button { - /* padding: initial; */ -} .details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu { display: none; } @@ -1263,7 +1265,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) { .details-produit__actions { --section-marges-internes: var(--espace-l); overflow: hidden; - border: 1px solid var(--couleur-noir); + border-block: 1px solid var(--couleur-noir); background: var(--couleur-jaune); transition: 0.2s background; } @@ -1286,6 +1288,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) { .produits-similaires { --carte-produit-longueur-minimale: 448px; --carte-produit-longueur-maximale: 1000px; + --en-tete-flottante-hauteur: calc(1rem + var(--espace-l) * 2 + 1px); position: relative; display: grid; grid-template-areas: "en-tete en-tete en-tete" "produits produits produits"; @@ -1297,10 +1300,10 @@ body:has(#menu-mobile:not([aria-hidden=true])) { .produits-similaires header { position: sticky; z-index: 10; - top: calc(1lh + var(--espace-l) + var(--espace-m)); + top: var(--en-tete-flottante-hauteur); grid-area: en-tete; width: 100%; - padding: var(--espace-l) 0 var(--espace-m); + padding: var(--espace-l) 0; color: var(--couleur-blanc); text-align: center; background: var(--couleur-noir); diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.css.map b/web/app/themes/haiku-atelier-2024/assets/css/main.css.map index 6bd0aaf2..383e435c 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.css.map +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_boutons.scss","../../src/sass/base/elements/_formulaires.scss","../../src/sass/base/elements/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_bandeau.scss","../../src/sass/layouts/_menu-mobile.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_colonnes-photos.scss","../../src/sass/layouts/_grille-produits.scss","../../src/sass/layouts/_informations-produit.scss","../../src/sass/layouts/_produits-similaires.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;EAQF,eACE;;AAmBJ;EACE;EACA;EACA;EACA;EACA,KACE;EAQF,eACE;;ACjDJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;ACjBJ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EAGA;EACA;AAAA;AAAA;EAGA;AAAA;AAAA;AAAA;AAKA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;AAAA;AAAA;AAGA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;IACE;IACA;IACA;;EAGF;IACE;;;AC3FJ;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AC1BA;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;EAEA;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;;AAIA;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;IACE;IACA;;;;AC9FV;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;AAwBA;AAAA;AAAA;;AAtBA;EACE;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;;AAKN;EACE;;AAMF;EACE;EACA;;AAGF;EACE;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;IACE;;;;AC7HN;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;EACA;;;ACZF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA,YACE,uIAM4B;EAE9B;AAEA;AAKA;AA8BA;AAiBA;;AAnDA;EACE;;AAIF;AACE;EACA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;AAMN;EACE;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAOJ;EACE;IACE;;;;AC/ER;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC9BxE;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAKN;EAEI;IACE;;;;AAMR;EACE;IACE;;EAGF;IACE;;;AC/CJ;EACE;EACA;;;AAGF;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAOV;EArEF;IAsEI;;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AC5FJ;EAEE;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA2BA;;AAzBA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;AAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE;EACA,yFAC2C;EAE3C;;AAGF;EACE;;AAIF;EACE;IACE;;;AAOJ;EADF;IAEI;;;AAKN;EACE;EACA;EACA;EACA;EACA;AAYA;AAAA;AAAA;;AAVA;EACE;;AAGA;EACE;EACA;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AC/IR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EAGA;EACA;EAIA;EACA;AAuCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AApCE;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIF;EApBF;IAqBI;;;AAWJ;EACE;EACA,uBACE;EAEF;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAgBA;AAAA;AAAA;AAAA;AAAA;;AAbE;EACE;EACA;EACA;;AAEA;EACE;IACE;;;AAWR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAMR;EA7DF;IA8DI;IAEA;IACA;IACA;;EAEA;IACE;IACA;;EAEA;IACE;IACA;;;AAMN;EAhFF;IAiFI;IACA;IACA;;EAEA;IACE;IACA;;;;ACtJR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EAEE;EAGA;EACA;AAAA;AAAA;EAGA;EAGA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAKF;EACE;EACA;;AAIF;EACE;EACA;;AAMN;EApDF;IAqDI;IACA;AAEA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAEA;IACE;IACA;;EAGF;IACE;;;;AC1GV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA,uBACE;EAEF;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAEA;IACE;;;;AAMR;EACE;IACE;;;AClJJ;AAAA;AAAA;AAAA;AAIA;EAEE;EAGA;EAGA;EAGA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;AAEA;AAyBA;;AAxBA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAIF;EACE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEI;IACE;IACA;;;AAKN;EAEI;IACE;IACA;;;AAOV;EACE;;AAIJ;EAnIF;IAoII;IACA;;;AAGF;EAxIF;IAyII;IACA;IACA;IACA;;;AAGF;EACE;IACE;IACA;;EAEA;IACE;;;;AAMR;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGE;EACE;;AAKA;AACE;;AAKJ;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAOR;EACE;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIE;EACE;IACE;;;;AC7PZ;EAEE;EACA;EAEA;EACA;EACA,qBACE;EAEF;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMR;EACE;IACE;;EAEA;IACE;;;;AChHV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_boutons.scss","../../src/sass/base/elements/_formulaires.scss","../../src/sass/base/elements/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_bandeau.scss","../../src/sass/layouts/_menu-mobile.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_colonnes-photos.scss","../../src/sass/layouts/_grille-produits.scss","../../src/sass/layouts/_informations-produit.scss","../../src/sass/layouts/_produits-similaires.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;EAQF,eACE;;AAmBJ;EACE;EACA;EACA;EACA;EACA,KACE;EAQF,eACE;;ACjDJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;ACjBJ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EAGA;EACA;AAAA;AAAA;EAGA;AAAA;AAAA;AAAA;AAKA;EACA;EACA;EACA;EACA;EACA;;;AChDF;AAAA;AAAA;AAGA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;IACE;IACA;IACA;;EAGF;IACE;;;AC5FJ;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AC1BA;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;EAEA;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;;AAIA;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;IACE;IACA;;;;AC9FV;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;AAwBA;AAAA;AAAA;;AAtBA;EACE;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;;AAKN;EACE;;AAMF;EACE;EACA;;AAGF;EACE;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;IACE;;;;AC7HN;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;EACA;;;ACZF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA,YACE,uIAM4B;EAE9B;AAEA;AAKA;AA8BA;AAiBA;;AAnDA;EACE;;AAIF;AACE;EACA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;AAMN;EACE;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAOJ;EACE;IACE;;;;AC/ER;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC9BxE;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAKN;EAEI;IACE;;;;AAMR;EACE;IACE;;EAGF;IACE;;;AC/CJ;EACE;EACA;;;AAGF;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAOV;EArEF;IAsEI;;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AC5FJ;EAEE;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA2BA;;AAzBA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;AAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;EACA;EACA;AAEA;EACA;;AAGA;EACE;;AAKF;EACE;;AAIF;EACE;EACA,yFAC2C;EAE3C;;AAGF;EACE;IACE;;;AAOJ;EADF;IAEI;;;AAKN;EACE;EACA;EACA;EACA;EACA;AAYA;AAAA;AAAA;;AAVA;EACE;;AAGA;EACE;EACA;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACtJR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EAGA;EACA;EAIA;EACA;AAuCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AApCE;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIF;EApBF;IAqBI;;;AAWJ;EACE;EACA;EAEA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAgBA;AAAA;AAAA;AAAA;AAAA;;AAbE;EACE;EACA;EACA;;AAEA;EACE;IACE;;;AAWR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAMR;EA5DF;IA6DI;IAEA;IACA;IACA;;EAEA;IACE;IACA;;EAEA;IACE;IACA;;;AAMN;EA/EF;IAgFI;IACA;IACA;;EAEA;IACE;IACA;;;;ACrJR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EAEE;EAGA;EACA;AAAA;AAAA;EAGA;EAGA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAKF;EACE;EACA;;AAIF;EACE;EACA;;AAMN;EApDF;IAqDI;IACA;AAEA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAEA;IACE;IACA;;EAGF;IACE;;;;AC1GV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAEA;IACE;;;;AAMR;EACE;IACE;;;ACjJJ;AAAA;AAAA;AAAA;AAIA;EAEE;EAGA;EAGA;EAGA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;AAEA;AAyBA;;AAxBA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAIF;EACE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEI;IACE;IACA;;;AAKN;EAEI;IACE;IACA;;;AAOV;EACE;;AAIJ;EAnIF;IAoII;IACA;;;AAGF;EAxIF;IAyII;IACA;IACA;IACA;;;AAGF;EACE;IACE;IACA;;EAEA;IACE;;;;AAMR;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGE;EACE;;AAIF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAOR;EACE;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIE;EACE;IACE;;;;ACtPZ;EAEE;EACA;EACA;EAEA;EACA;EACA,qBACE;EAEF;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMR;EACE;IACE;;EAEA;IACE;;;;ACjHV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css index da9e9229..7d92c3f1 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css @@ -1 +1 @@ -@font-face{font-family:Lato;font-weight:100 900;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2)format("woff2")tech(variations),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2)format("woff2-variations"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf)format("truetype");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-weight:100 900;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2)format("woff2")tech(variations),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2)format("woff2-variations"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf)format("truetype");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Myriad;font-weight:300 900;font-style:normal;font-display:swap;font-stretch:70% 110%;src:url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf)format("truetype")}@font-face{font-family:Myriad;font-weight:300 900;font-style:italic;font-display:swap;font-stretch:70% 110%;src:url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf)format("truetype")}:root{--couleur-blanc:#fff;--couleur-blanc-fond:#ffffffe6;--couleur-gris:#eceaeb;--couleur-gris-fonce:gray;--couleur-gris-fonce-fond:#808080cc;--couleur-bordeaux:#490918;--couleur-bordeaux-fond:#490918cc;--couleur-jaune:#defdb5;--couleur-jaune-fond:#ebffb8cc;--couleur-noir:#202020;--couleur-fond:#eceaebcc;--police-lato:"Lato",sans-serif;--hauteur-ligne-classique:1.5;--hauteur-ligne-moitie:1.2;--hauteur-ligne-compacte:1.1;--hauteur-ligne-rapprochee:1;--espacement-inter-lettres-rapproche-s:-.5px;--espacement-inter-lettres-etendu-s:.5px;--espacement-inter-lettres-etendu-m:1px;--espacement-inter-lettres-etendu-l:1.5px;--espacement-inter-lettres-etendu-xl:2px;--en-tete-hauteur:61px;--menu-categories-produits-hauteur:calc(var(--espace-m)*2 + 1rlh);--pied-de-page-hauteur:calc(.8rem*1.5*3 + var(--espace-m)*2);--contenu-page-hauteur-minimale-sans-categories:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));--contenu-page-hauteur-minimale-avec-categories:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--menu-categories-produits-hauteur));--espace-xs:.25rem;--espace-s:.5rem;--espace-m:1rem;--espace-l:1.25rem;--espace-xl:2rem}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit;font:inherit;color:inherit;outline-offset:-2px;outline:2px dashed #0000;margin:0;padding:0}@view-transition{navigation:auto}body{accent-color:var(--couleur-jaune);background:var(--couleur-gris)}button,input,select,textarea{font:inherit}::selection{background:var(--couleur-jaune)}[hidden]{display:none!important}:focus-visible{outline-color:var(--couleur-noir);transition:outline-color .2s}.visuellement-cache:not(:focus,:active,:focus-within){white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}[disabled]{cursor:not-allowed}@media (prefers-reduced-motion){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation-duration:0s!important}@view-transition{}}html{font:1rem/var(--hauteur-ligne-classique)Lato;font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;-webkit-font-smoothing:antialiased;color:var(--couleur-noir);text-decoration-skip-ink:auto;text-size-adjust:none;text-rendering:geometricprecision;letter-spacing:var(--espacement-inter-lettres-etendu-s)}strong{font-weight:600}em{font-style:italic}button{all:initial;cursor:pointer;box-sizing:border-box;text-align:center;letter-spacing:inherit;outline-offset:-2px;outline:2px dashed #0000;font-family:Lato;transition:background .2s,color .2s,outline-color .2s}button:not[disabled]:focus-visible{z-index:5;outline-color:var(--couleur-noir)}button:not[disabled]:active{color:var(--couleur-blanc)!important;background:var(--couleur-noir)!important}@media (hover:hover){button:not[disabled]:hover{color:var(--couleur-noir);background:var(--couleur-jaune)}}button:disabled,button[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px;outline-color:#0000}button.bouton-case-pleine{width:100%;height:100%}button.bouton-case-pleine.bouton-blanc-sur-noir{text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible{color:var(--couleur-noir);background:var(--couleur-jaune)}button.bouton-blanc-sur-noir{color:var(--couleur-blanc);background:var(--couleur-noir)}@media (hover:hover){button.bouton-fleche{background:initial}}button.bouton-retour-haut{right:var(--espace-xl);bottom:calc(var(--espace-l) + var(--pied-de-page-hauteur));padding:var(--espace-m);border:1px solid var(--couleur-noir);visibility:hidden;opacity:0;background:var(--couleur-fond);box-shadow:initial;border-radius:100%;transition:background .2s,opacity .2s,visibility .2s;position:fixed;transform:rotate(180deg)}button.bouton-retour-haut img{background:0 0;width:1rem;height:1rem}button.bouton-retour-haut[data-actif]{visibility:visible;opacity:.6}@media (hover:hover){button.bouton-retour-haut[data-actif]:hover{opacity:1;background:var(--couleur-jaune-fond)}}fieldset{all:initial;margin-top:var(--espace-l);font:inherit;flex-flow:column;display:flex}input,select,textarea{padding:var(--espace-xs);border:1px solid var(--couleur-noir);accent-color:var(--couleur-jaune);background:var(--couleur-gris);transition:background .2s}input:focus-visible,input:focus-within,input:active,select:focus-visible,select:focus-within,select:active,textarea:focus-visible,textarea:focus-within,textarea:active{z-index:10;outline:2px dashed var(--couleur-noir)}input:disabled,input[disabled],select:disabled,select[disabled],textarea:disabled,textarea[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px;outline-color:#0000}input:is([type=email],[type=text],[type=tel])::placeholder,textarea::placeholder{text-transform:lowercase;letter-spacing:var(--espacement-inter-lettres-etendu-s)}input:is([type=email],[type=text],[type=tel])::selection,textarea::selection{color:var(--couleur-blanc);background:var(--couleur-noir)}input:is([type=email],[type=text],[type=tel]):user-valid,textarea:user-valid{background:var(--couleur-jaune)}input:is([type=email],[type=text],[type=tel]):user-invalid,textarea:user-invalid{background:var(--couleur-gris)}input,label,select,textarea{cursor:pointer}input[type=checkbox],input[type=radio]{width:var(--espace-l);height:var(--espace-l);padding:initial;border:1px solid var(--couleur-noir);appearance:none;transition:background .2s}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--couleur-jaune)}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"x";position:relative;bottom:.1rem;left:.35rem}@media (hover:hover){input[type=checkbox]:checked:hover,input[type=radio]:checked:hover{color:var(--couleur-noir)}}input[type=checkbox]:not(:checked):user-valid,input[type=radio]:not(:checked):user-valid{background:initial}label:has(~input[type=checkbox],~input[type=radio]),input[type=checkbox]+label,input[type=radio]+label{padding-top:1px;font-size:.9rem}@media (hover:hover){input[type=checkbox]:hover,input[type=radio]:hover{background:var(--couleur-jaune)}}input[type=radio]{appearance:initial;border-radius:100%}input[type=radio]:checked{place-content:center;place-items:center;display:inline-flex}input[type=radio]:checked:before{content:" ";inset:initial;width:calc(var(--espace-l)/2);height:calc(var(--espace-l)/2);background:var(--couleur-noir);border-radius:100%;display:inline-block}@media (hover:hover){textarea:hover{color:var(--couleur-noir)}}img,picture{max-width:100%;display:block}img{object-fit:cover;background:var(--couleur-jaune)}a{--lien-contour-couleur-focus:var(--couleur-noir);text-decoration-skip-ink:auto;text-decoration-skip:edges;text-decoration:underline #0000;transition:background .2s,border-color .2s,color .2s,font-weight .2s,outline-color .2s,letter-spacing .2s,text-decoration-color .2s}a:focus-visible{outline-color:var(--lien-contour-couleur-focus)}a.lien-bouton{--lien-bouton-marges-internes-bloc:var(--espace-xs);--lien-bouton-marges-internes-ligne:var(--espace-m);--lien-bouton-arriere-plan-couleur-survol:var(--couleur-jaune);padding:var(--lien-bouton-marges-internes-bloc)var(--lien-bouton-marges-internes-ligne);border:1px solid var(--couleur-noir)}a.lien-bouton:focus-visible{background:var(--lien-bouton-arriere-plan-couleur-survol)}a.lien-bouton:active{border-color:var(--lien-bouton-arriere-plan-couleur-survol)}@media (hover:hover){a.lien-bouton:hover{background:var(--lien-bouton-arriere-plan-couleur-survol)}}a.lien-lien{text-decoration:underline}a.lien-lien:active{text-decoration-color:var(--couleur-jaune);background:var(--couleur-jaune)}@media (hover:hover){a.lien-lien:hover{text-decoration-color:var(--couleur-jaune);background:var(--couleur-jaune)}a:not([class]):hover{text-decoration-color:var(--couleur-noir)}}ul{list-style:none}ul.avec-puce-cercle{--liste-puce-cercle-lien-marges-internes-ligne-debut:2ch;--liste-puce-cercle-puce-position-horizontale:1ch;--liste-puce-cercle-puce-taille:1.25ex}ul.avec-puce-cercle a{padding-left:var(--liste-puce-cercle-lien-marges-internes-ligne-debut);background:no-repeat var(--liste-puce-cercle-puce-position-horizontale)center/var(--liste-puce-cercle-puce-taille)url(/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg)}.bandeau{column-gap:var(--espace-m);border-top:1px solid var(--couleur-noir);width:100%;color:var(--couleur-noir);text-transform:uppercase;white-space:nowrap;background:var(--couleur-jaune);font-style:italic;display:flex;overflow:hidden}.bandeau__conteneur{column-gap:var(--espace-m);flex-flow:row;animation:15s linear infinite both marquee;display:flex}.bandeau__conteneur ::selection{color:var(--couleur-jaune);background:var(--couleur-noir)}.bandeau__conteneur p{padding:var(--espace-s)0;display:inline-block}.bandeau__conteneur p strong{font-weight:600}@media (hover:hover){.bandeau:hover .bandeau__conteneur{animation-play-state:paused}}@keyframes marquee{0%{transform:translate(0%)}to{transform:translate(-100%)}}body:has(#menu-mobile:not([aria-hidden=true])){touch-action:none;overflow:hidden}#menu-mobile{--menu-mobile-hauteur:calc(100svh - var(--en-tete-hauteur));z-index:997;inset:var(--en-tete-hauteur)0 0 0;overscroll-behavior:contain;width:100vw;height:var(--menu-mobile-hauteur);transition:display .4s;transition:display .4s allow-discrete;-webkit-overflow-scrolling:none;display:flex;position:fixed;overflow:hidden}#menu-mobile[aria-hidden=true]{animation:.4s both fade-out;display:none}#menu-mobile[aria-hidden=true] .menu-modale__fond{animation:.4s both fade-out}#menu-mobile .menu-modale__fond{z-index:998;inset:var(--en-tete-hauteur)0 0 0;height:var(--menu-mobile-hauteur);opacity:0;background-color:var(--couleur-fond);animation:.4s both fade-in;position:fixed}#menu-mobile .menu-modale__conteneur{z-index:999;width:100%;height:fit-content;padding:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);opacity:0;background-color:var(--couleur-gris);flex-flow:column;animation:.4s .2s both fade-in;display:flex;position:relative}#menu-mobile .menu-modale__conteneur .menu-navigation{grid-template-columns:1fr}#menu-mobile .menu-modale__conteneur .menu-navigation ul{grid-column:initial;flex-flow:column;place-items:center}#menu-mobile .menu-modale__conteneur .menu-navigation ul>span{width:fit-content}#menu-mobile .menu-modale__conteneur .menu-navigation ul>span li a{padding-top:var(--espace-m);padding-bottom:var(--espace-m)}@media (width>1000px){#menu-mobile{display:none}}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes slide-in{to{transform:translateY(0)}}#en-tete{--en-tete-marges-internes-ligne:var(--espace-xl);--en-tete-marges-internes-bloc:var(--espace-m);--en-tete-section-hauteur:var(--en-tete-hauteur);--en-tete-logo-longueur:160px;z-index:60;min-width:100vw;max-width:100vw;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);flex-flow:row;justify-content:space-between;place-items:center;display:flex;position:fixed;top:0}#en-tete .logo{width:var(--en-tete-logo-longueur)}#en-tete .logo picture,#en-tete .logo img{background:0 0}#en-tete .logo img{object-fit:contain;width:100%;height:40px;image-rendering:crisp-edges;shape-rendering:geometricprecision;margin-left:-6px}#en-tete .logo button{align-content:center;width:100%;display:block}#en-tete .menu-navigation{text-align:center;text-transform:lowercase;flex:1;grid-template-columns:1fr auto 1fr;font-size:1.1rem;display:grid}#en-tete .menu-navigation ul{gap:var(--espace-m);flex-flow:row;grid-column:2;justify-content:space-between;display:flex}#en-tete .menu-navigation__entree{--nav-entree-marges-internes-bloc:var(--espace-xs);--nav-entree-marges-internes-ligne:3rem;--liste-puce-cercle-lien-marges-internes-ligne-debut:calc(var(--espace-m) + 1.5ch);--liste-puce-cercle-puce-position-horizontale:3.5ch}#en-tete .menu-navigation__entree a{padding:var(--nav-entree-marges-internes-bloc)var(--nav-entree-marges-internes-ligne);text-align:center;display:inline-block}#en-tete .menu-navigation__entree--courante{background:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg) 50%/auto 90% no-repeat}@media (hover:hover){#en-tete .menu-navigation__entree:hover{background:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg) 50%/auto 90% no-repeat}}@media (width<=1000px){#en-tete .menu-navigation#menu-navigation-en-tete{display:none}}#en-tete .compte-panier{text-align:center;flex-flow:row;place-items:center;gap:1rem;display:flex}#en-tete .compte-panier[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px}#en-tete .compte-panier[disabled] a:hover,#en-tete .compte-panier[disabled] a:active,#en-tete .compte-panier[disabled] a:focus-within{border:1px solid var(--couleur-noir);background:initial}#en-tete .compte-panier a{text-transform:lowercase;min-width:10ch;font-size:1.1rem}#en-tete .compte-panier a.lien-compte{border-color:#0000}#en-tete .compte-panier a[data-contient-articles=true]{background:var(--couleur-jaune)}#menu-categories-produits{--menu-entree-longueur-minimale:13ch;--menu-section-marges-bloc-debut:var(--en-tete-hauteur);--menu-entree-marges-internes-ligne:var(--espace-m);margin-top:var(--menu-section-marges-bloc-debut);position:relative}#menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type,#menu-categories-produits[data-entrees-presentes-fin] svg:last-of-type{opacity:1}#menu-categories-produits svg{pointer-events:none;opacity:0;mix-blend-mode:exclusion;width:.8rem;height:.8rem;shape-rendering:geometricprecision;transition:opacity .2s;position:absolute;bottom:calc(17.59px - .35rem)}#menu-categories-produits svg:first-of-type{left:var(--espace-xs)}#menu-categories-produits svg:last-of-type{right:var(--espace-xs)}@media (width>600px){#menu-categories-produits svg{visibility:hidden}}#menu-categories-produits ul{grid-template-columns:repeat(auto-fit,minmax(var(--menu-entree-longueur-minimale),1fr));place-items:center;gap:1px;display:grid}#menu-categories-produits ul li{width:100%;color:var(--couleur-gris);text-align:center;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);background:var(--couleur-noir);font-style:italic;font-weight:450}#menu-categories-produits ul li.categorie-courante a{color:var(--couleur-noir);background:var(--couleur-jaune);font-weight:600}@media (hover:hover){#menu-categories-produits ul li.categorie-courante a:hover{color:var(--couleur-noir)}}#menu-categories-produits ul li a{width:inherit;padding:var(--menu-entree-marges-internes-ligne)0;outline:initial;text-decoration:none;display:inline-block}#menu-categories-produits ul li a:focus-visible{color:var(--couleur-jaune);outline:initial}@media (hover:hover){#menu-categories-produits ul li a:hover{color:var(--couleur-noir);background:var(--couleur-jaune)}}@media (width<=1000px){#menu-categories-produits ul{--menu-entree-marges-internes-ligne:var(--espace-s);flex-flow:wrap;font-size:.8rem;display:flex}#menu-categories-produits ul li{flex-grow:1;width:min(140px,100%)}#menu-categories-produits ul li a{border:initial;width:100%}}@media (width<=600px){#menu-categories-produits ul{scrollbar-width:none;flex-flow:row;overflow-x:scroll}#menu-categories-produits ul li{width:initial;min-width:140px}}.photos-produit{--colonne-gauche-position-haut:var(--menu-categories-produits-hauteur);--colonne-gauche-photo-hauteur:calc(100svh - var(--menu-categories-produits-hauteur));--colonne-droite-photo-hauteur-minimale:calc(100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur));--colonne-photo-longueur-minimale:30rem;--section-marges-externes-bloc-fin:1rem;flex-flow:row;max-width:100%;display:flex;position:relative}.photos-produit .colonne{width:min(var(--colonne-photo-longueur-minimale),100%);flex-flow:column;flex-grow:1;display:flex;position:relative}.photos-produit .colonne.colonne-gauche{top:var(--colonne-gauche-position-haut);height:var(--colonne-gauche-photo-hauteur);position:sticky}.photos-produit .colonne.colonne-gauche figure,.photos-produit .colonne.colonne-gauche picture,.photos-produit .colonne.colonne-gauche img{height:100%}.photos-produit .colonne.colonne-droite img{width:100%;max-height:var(--colonne-droite-photo-hauteur-minimale)}.photos-produit .colonne.colonne-droite figure picture img:only-child{min-height:var(--colonne-droite-photo-hauteur-minimale);max-height:var(--colonne-droite-photo-hauteur-minimale)}@media (width<=60rem){.photos-produit{--colonne-droite-photo-hauteur-minimale:var(--photo-hauteur-maximum);--photo-longueur-maximum:calc(100% - var(--espace-xl));--photo-hauteur-maximum:calc(100svh - var(--en-tete-hauteur) - 87px);scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory;width:fit-content;max-width:initial;flex-flow:row;overflow-x:scroll}.photos-produit::-webkit-scrollbar{display:none}.photos-produit .colonne{scroll-snap-type:x mandatory;width:100%;min-width:100%}.photos-produit .colonne figure{scroll-snap-align:none center}.photos-produit .colonne img{max-height:var(--photo-hauteur-maximum)}.photos-produit .colonne.colonne-gauche{position:initial;min-width:var(--photo-longueur-maximum);height:initial}.photos-produit .colonne.colonne-droite{flex-flow:row}.photos-produit .colonne.colonne-droite figure{min-width:var(--photo-longueur-maximum);flex-grow:1}.photos-produit .colonne.colonne-droite:has(figure:only-child){min-width:var(--photo-longueur-maximum)}}.grille-produits{--grille-produits-hauteur-minimale:var(--contenu-page-hauteur-minimale-avec-categories);--aucun-produit-hauteur:var(--contenu-page-hauteur-minimale-avec-categories);--carte-produit-longueur-minimale:448px;--carte-produit-longueur-maximale:1000px;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(var(--carte-produit-longueur-minimale),1fr));min-height:var(--grille-produits-hauteur-minimale);gap:1px;display:grid}.grille-produits article{max-width:var(--carte-produit-longueur-maximale);box-shadow:0 0 0 1px var(--couleur-noir)}.grille-produits article figure{row-gap:var(--espace-xl);flex-flow:column;display:flex}.grille-produits article figure a{position:relative}@media (hover:hover){.grille-produits article figure a:hover .produit__illustration__survol{visibility:visible;opacity:1;transition:opacity .3s,visibility .3s}}.grille-produits article figure img{position:inherit;aspect-ratio:9/16;object-fit:cover;background:0 0;width:100%;max-height:70vh}.grille-produits article figure .produit__illustration__principale{display:block}.grille-produits article figure .produit__illustration__principale:before{content:"";z-index:-1;opacity:0;filter:opacity(20%);background-image:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg);background-position:50%;background-repeat:no-repeat;background-size:50%;width:100%;height:100%;animation:1.5s linear .5s infinite alternate both test;position:absolute;top:0;left:0}.grille-produits article figure .produit__illustration__principale img{opacity:0;transition:opacity 1s}.grille-produits article figure .produit__illustration__survol{visibility:hidden;opacity:0;width:100%;height:100%;transition:opacity .15s,visibility .15s;display:block;position:absolute;top:0;left:0}.grille-produits article figure .produit__illustration__survol img{background:var(--couleur-fond)}.grille-produits article figure figcaption{margin-bottom:var(--espace-xl);padding:var(--espace-m);flex-flow:row;justify-content:space-between;display:flex}.grille-produits article figure figcaption h3{letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}.grille-produits article figure figcaption p{letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:500}.grille-produits__aucun-produit{min-height:var(--aucun-produit-hauteur);text-align:center;grid-column:span 3;align-content:center}.grille-produits__aucun-produit p+p{margin-top:var(--espace-l);font-size:1.25rem}@media (width<=700px){.grille-produits{grid-template-columns:100%}.grille-produits article figure img{max-height:50svh}}@keyframes test{to{opacity:1}}.resume-produit{--resume-position-basse:0%;--section-marges-internes:var(--espace-l);--espace-inter-colonne:var(--espace-xl);--resume-police-graisse:500;--resume-police-style:italic;--resume-police-taille:var(--espace-l);--resume-police-nom-taille:1.33rem;--resume-police-selecteur-graisse:400;--resume-police-selecteur-taille:var(--espace-m);bottom:var(--resume-position-basse);position:sticky}.resume-produit .selecteur-produit{column-gap:var(--espace-inter-colonne);border-block:1px solid var(--couleur-noir);font-size:var(--resume-police-taille);font-weight:var(--resume-police-graisse);font-style:var(--resume-police-style);line-height:var(--hauteur-ligne-compacte);background:var(--couleur-blanc-fond);grid-template-columns:repeat(3,1fr);grid-auto-flow:column;place-items:center;display:grid;position:relative}.resume-produit .selecteur-produit>*{width:100%;height:100%;padding:var(--section-marges-internes);flex-flow:row;place-content:center;place-items:center;display:flex}.resume-produit .selecteur-produit>:nth-child(2){border-inline-start:1px solid var(--couleur-noir);border-inline-end:1px solid var(--couleur-noir)}.resume-produit .selecteur-produit__nom{font-size:var(--resume-police-nom-taille)}.resume-produit .selecteur-produit__selection-variation{font-size:var(--resume-police-selecteur-taille);font-weight:var(--resume-police-selecteur-graisse);text-transform:lowercase}.resume-produit .selecteur-produit__selection-variation label{margin-right:var(--espace-s)}.resume-produit .selecteur-produit__selection-variation select{padding:var(--espace-xs)var(--espace-l);border:1px solid var(--couleur-noir);text-align:center;letter-spacing:initial;appearance:none;background:var(--couleur-fond);position:relative}@supports selector(:user-valid){.resume-produit .selecteur-produit__selection-variation select:user-valid{background:var(--couleur-jaune-fond)}}.resume-produit .selecteur-produit__selection-variation option{background:var(--couleur-fond)}.resume-produit .selecteur-produit__selection-variation__selecteurs{position:relative}.resume-produit .selecteur-produit__selection-variation__selecteurs:after{pointer-events:none;content:" ";text-align:center;visibility:visible;opacity:1;background:url(/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg) no-repeat;width:.9rem;height:.9rem;transition:opacity .2s,visibility .2s;display:inline-block;position:absolute;top:10px;right:.4rem}@supports not selector(:user-valid){.resume-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid):after{visibility:hidden;opacity:0}}@supports selector(:user-valid){.resume-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid):after{visibility:hidden;opacity:0}}.resume-produit .selecteur-produit__prix{font-style:initial}@media (width<=800px){.resume-produit{--section-marges-internes:var(--espace-m);--espace-inter-colonne:var(--espace-m)}}@media (width<=700px){.resume-produit{--resume-police-taille:var(--espace-m);--resume-police-nom-taille:var(--espace-m);--section-marges-internes:var(--espace-m);--espace-inter-colonne:var(--espace-s)}}@media (width<=500px){.resume-produit .selecteur-produit__selection-variation{row-gap:var(--espace-inter-colonne);flex-flow:column}.resume-produit .selecteur-produit__selection-variation h3{flex-basis:100%}}.details-produit{--bouton-marges-internes-bloc:var(--espace-l);--espace-inter-lignes:var(--espace-l);--espace-inter-texte:var(--espace-m);--section-marges-internes:var(--espace-l);--textuel-marges-internes-ligne:calc(var(--espace-l)*2);background-color:var(--couleur-blanc)}.details-produit__textes{grid-template-columns:1fr;grid-auto-flow:row;display:grid}.details-produit__textes .section-textuelle:not(:last-of-type){border-block-end:1px solid var(--couleur-noir)}.details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu{display:none}.details-produit__textes .section-textuelle h3{line-height:var(--hauteur-ligne-rapprochee)}.details-produit__textes .section-textuelle h3 button{width:100%;min-block-size:1lh;padding:var(--section-marges-internes);text-align:start;display:inline-block}.details-produit__textes .section-textuelle .section-textuelle__contenu{padding-block-end:var(--section-marges-internes);padding-inline:var(--textuel-marges-internes-ligne)}.details-produit__textes .section-textuelle .section-textuelle__contenu ul{list-style:inside}.details-produit__textes .section-textuelle .section-textuelle__contenu a{text-decoration-color:var(--couleur-noir)}.details-produit__textes .section-textuelle .section-textuelle__contenu>*+*{margin-top:var(--espace-inter-texte)}.details-produit__actions{--section-marges-internes:var(--espace-l);border:1px solid var(--couleur-noir);background:var(--couleur-jaune);transition:background .2s;overflow:hidden}.details-produit__actions:has(button[disabled]){background:var(--couleur-fond)}.details-produit__actions button{height:initial;padding:var(--section-marges-internes);text-transform:uppercase;font-style:italic;transition:background .2s,font-weight .2s}@media (hover:hover){.details-produit__actions button:not([disabled]):hover{font-weight:600}}.produits-similaires{--carte-produit-longueur-minimale:448px;--carte-produit-longueur-maximale:1000px;grid-template-rows:1fr auto;grid-template-columns:repeat(3,1fr);grid-template-areas:"en-tete en-tete en-tete""produits produits produits";place-items:center;display:grid;position:relative}.produits-similaires header{z-index:10;top:calc(1lh + var(--espace-l) + var(--espace-m));width:100%;padding:var(--espace-l)0 var(--espace-m);color:var(--couleur-blanc);text-align:center;background:var(--couleur-noir);grid-area:en-tete;position:sticky}.produits-similaires header h2{font-style:italic;line-height:var(--hauteur-ligne-rapprochee);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m)}.produits-similaires .grille-produits-similaires{grid-area:produits;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(var(--carte-produit-longueur-minimale),1fr));gap:1px;width:100%;display:grid}.produits-similaires .grille-produits-similaires article{max-width:var(--carte-produit-longueur-maximale);box-shadow:0 0 0 1px var(--couleur-noir)}.produits-similaires .grille-produits-similaires article figure{row-gap:var(--espace-xl);flex-flow:column;display:flex}.produits-similaires .grille-produits-similaires article figure a{position:relative}@media (hover:hover){.produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol{visibility:visible;opacity:1;transition:opacity .3s,visibility .3s}}.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale{display:block}.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol{visibility:hidden;opacity:0;width:100%;height:100%;transition:opacity .15s,visibility .15s;display:block;position:absolute;top:0;left:0}.produits-similaires .grille-produits-similaires article figure img{aspect-ratio:9/16;object-fit:cover;width:100%;max-height:70svh}.produits-similaires .grille-produits-similaires article figure figcaption{margin-bottom:var(--espace-xl);padding:0 var(--espace-m);flex-flow:row;justify-content:space-between;display:flex}.produits-similaires .grille-produits-similaires article figure figcaption h3{letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}.produits-similaires .grille-produits-similaires article figure figcaption p{letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:500}@media (width<=700px){.produits-similaires .grille-produits-similaires{grid-template-columns:100%}.produits-similaires .grille-produits-similaires article figure img{max-height:50svh}}#pied-de-page{max-width:100vw;height:var(--pied-de-page-hauteur);padding:var(--espace-m);border-top:1px solid var(--couleur-noir);background:var(--couleur-jaune);grid-template-columns:1fr 1fr;place-items:center;font-size:.8rem;display:grid}#pied-de-page .zone-menu-navigation-secondaire{text-transform:lowercase;justify-self:start;width:100%;height:100%}#pied-de-page .zone-liens-reseaux-sociaux{text-align:right;justify-items:end;width:100%;height:100%} \ No newline at end of file +@font-face{font-family:Lato;font-weight:100 900;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2)format("woff2")tech(variations),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2)format("woff2-variations"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf)format("truetype");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-weight:100 900;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2)format("woff2")tech(variations),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2)format("woff2-variations"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf)format("truetype");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Myriad;font-weight:300 900;font-style:normal;font-display:swap;font-stretch:70% 110%;src:url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf)format("truetype")}@font-face{font-family:Myriad;font-weight:300 900;font-style:italic;font-display:swap;font-stretch:70% 110%;src:url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf)format("truetype")}:root{--couleur-blanc:#fff;--couleur-blanc-fond:#ffffffe6;--couleur-gris:#eceaeb;--couleur-gris-fonce:gray;--couleur-gris-fonce-fond:#808080cc;--couleur-bordeaux:#490918;--couleur-bordeaux-fond:#490918cc;--couleur-jaune:#defdb5;--couleur-jaune-fond:#ebffb8cc;--couleur-noir:#202020;--couleur-fond:#eceaebcc;--police-lato:"Lato",sans-serif;--hauteur-ligne-classique:1.5;--hauteur-ligne-moitie:1.2;--hauteur-ligne-compacte:1.1;--hauteur-ligne-rapprochee:1;--espacement-inter-lettres-rapproche-m:-1px;--espacement-inter-lettres-rapproche-s:-.5px;--espacement-inter-lettres-etendu-s:.5px;--espacement-inter-lettres-etendu-m:1px;--espacement-inter-lettres-etendu-l:1.5px;--espacement-inter-lettres-etendu-xl:2px;--en-tete-hauteur:61px;--menu-categories-produits-hauteur:calc(var(--espace-m)*2 + 1rlh);--pied-de-page-hauteur:calc(.8rem*1.5*3 + var(--espace-m)*2);--contenu-page-hauteur-minimale-sans-categories:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));--contenu-page-hauteur-minimale-avec-categories:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--menu-categories-produits-hauteur));--espace-xs:.25rem;--espace-s:.5rem;--espace-m:1rem;--espace-l:1.25rem;--espace-xl:2rem}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit;font:inherit;color:inherit;outline-offset:-2px;outline:2px dashed #0000;margin:0;padding:0}@view-transition{navigation:auto}body{overscroll-behavior:none;accent-color:var(--couleur-jaune);background:var(--couleur-gris)}button,input,select,textarea{font:inherit}::selection{background:var(--couleur-jaune)}[hidden]{display:none!important}:focus-visible{outline-color:var(--couleur-noir);transition:outline-color .2s}.visuellement-cache:not(:focus,:active,:focus-within){white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}[disabled]{cursor:not-allowed}@media (prefers-reduced-motion){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation-duration:0s!important}@view-transition{}}html{font:1rem/var(--hauteur-ligne-classique)Lato;font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;-webkit-font-smoothing:antialiased;color:var(--couleur-noir);text-decoration-skip-ink:auto;text-size-adjust:none;text-rendering:geometricprecision;letter-spacing:var(--espacement-inter-lettres-etendu-s)}strong{font-weight:600}em{font-style:italic}button{all:initial;cursor:pointer;box-sizing:border-box;text-align:center;letter-spacing:inherit;outline-offset:-2px;outline:2px dashed #0000;font-family:Lato;transition:background .2s,color .2s,outline-color .2s}button:not[disabled]:focus-visible{z-index:5;outline-color:var(--couleur-noir)}button:not[disabled]:active{color:var(--couleur-blanc)!important;background:var(--couleur-noir)!important}@media (hover:hover){button:not[disabled]:hover{color:var(--couleur-noir);background:var(--couleur-jaune)}}button:disabled,button[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px;outline-color:#0000}button.bouton-case-pleine{width:100%;height:100%}button.bouton-case-pleine.bouton-blanc-sur-noir{text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible{color:var(--couleur-noir);background:var(--couleur-jaune)}button.bouton-blanc-sur-noir{color:var(--couleur-blanc);background:var(--couleur-noir)}@media (hover:hover){button.bouton-fleche{background:initial}}button.bouton-retour-haut{right:var(--espace-xl);bottom:calc(var(--espace-l) + var(--pied-de-page-hauteur));padding:var(--espace-m);border:1px solid var(--couleur-noir);visibility:hidden;opacity:0;background:var(--couleur-fond);box-shadow:initial;border-radius:100%;transition:background .2s,opacity .2s,visibility .2s;position:fixed;transform:rotate(180deg)}button.bouton-retour-haut img{background:0 0;width:1rem;height:1rem}button.bouton-retour-haut[data-actif]{visibility:visible;opacity:.6}@media (hover:hover){button.bouton-retour-haut[data-actif]:hover{opacity:1;background:var(--couleur-jaune-fond)}}fieldset{all:initial;margin-top:var(--espace-l);font:inherit;flex-flow:column;display:flex}input,select,textarea{padding:var(--espace-xs);border:1px solid var(--couleur-noir);accent-color:var(--couleur-jaune);background:var(--couleur-gris);transition:background .2s}input:focus-visible,input:focus-within,input:active,select:focus-visible,select:focus-within,select:active,textarea:focus-visible,textarea:focus-within,textarea:active{z-index:10;outline:2px dashed var(--couleur-noir)}input:disabled,input[disabled],select:disabled,select[disabled],textarea:disabled,textarea[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px;outline-color:#0000}input:is([type=email],[type=text],[type=tel])::placeholder,textarea::placeholder{text-transform:lowercase;letter-spacing:var(--espacement-inter-lettres-etendu-s)}input:is([type=email],[type=text],[type=tel])::selection,textarea::selection{color:var(--couleur-blanc);background:var(--couleur-noir)}input:is([type=email],[type=text],[type=tel]):user-valid,textarea:user-valid{background:var(--couleur-jaune)}input:is([type=email],[type=text],[type=tel]):user-invalid,textarea:user-invalid{background:var(--couleur-gris)}input,label,select,textarea{cursor:pointer}input[type=checkbox],input[type=radio]{width:var(--espace-l);height:var(--espace-l);padding:initial;border:1px solid var(--couleur-noir);appearance:none;transition:background .2s}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--couleur-jaune)}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"x";position:relative;bottom:.1rem;left:.35rem}@media (hover:hover){input[type=checkbox]:checked:hover,input[type=radio]:checked:hover{color:var(--couleur-noir)}}input[type=checkbox]:not(:checked):user-valid,input[type=radio]:not(:checked):user-valid{background:initial}label:has(~input[type=checkbox],~input[type=radio]),input[type=checkbox]+label,input[type=radio]+label{padding-top:1px;font-size:.9rem}@media (hover:hover){input[type=checkbox]:hover,input[type=radio]:hover{background:var(--couleur-jaune)}}input[type=radio]{appearance:initial;border-radius:100%}input[type=radio]:checked{place-content:center;place-items:center;display:inline-flex}input[type=radio]:checked:before{content:" ";inset:initial;width:calc(var(--espace-l)/2);height:calc(var(--espace-l)/2);background:var(--couleur-noir);border-radius:100%;display:inline-block}@media (hover:hover){textarea:hover{color:var(--couleur-noir)}}img,picture{max-width:100%;display:block}img{object-fit:cover;background:var(--couleur-jaune)}a{--lien-contour-couleur-focus:var(--couleur-noir);text-decoration-skip-ink:auto;text-decoration-skip:edges;text-decoration:underline #0000;transition:background .2s,border-color .2s,color .2s,font-weight .2s,outline-color .2s,letter-spacing .2s,text-decoration-color .2s}a:focus-visible{outline-color:var(--lien-contour-couleur-focus)}a.lien-bouton{--lien-bouton-marges-internes-bloc:var(--espace-xs);--lien-bouton-marges-internes-ligne:var(--espace-m);--lien-bouton-arriere-plan-couleur-survol:var(--couleur-jaune);padding:var(--lien-bouton-marges-internes-bloc)var(--lien-bouton-marges-internes-ligne);border:1px solid var(--couleur-noir)}a.lien-bouton:focus-visible{background:var(--lien-bouton-arriere-plan-couleur-survol)}a.lien-bouton:active{border-color:var(--lien-bouton-arriere-plan-couleur-survol)}@media (hover:hover){a.lien-bouton:hover{background:var(--lien-bouton-arriere-plan-couleur-survol)}}a.lien-lien{text-decoration:underline}a.lien-lien:active{text-decoration-color:var(--couleur-jaune);background:var(--couleur-jaune)}@media (hover:hover){a.lien-lien:hover{text-decoration-color:var(--couleur-jaune);background:var(--couleur-jaune)}a:not([class]):hover{text-decoration-color:var(--couleur-noir)}}ul{list-style:none}ul.avec-puce-cercle{--liste-puce-cercle-lien-marges-internes-ligne-debut:2ch;--liste-puce-cercle-puce-position-horizontale:1ch;--liste-puce-cercle-puce-taille:1.25ex}ul.avec-puce-cercle a{padding-left:var(--liste-puce-cercle-lien-marges-internes-ligne-debut);background:no-repeat var(--liste-puce-cercle-puce-position-horizontale)center/var(--liste-puce-cercle-puce-taille)url(/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg)}.bandeau{column-gap:var(--espace-m);border-top:1px solid var(--couleur-noir);width:100%;color:var(--couleur-noir);text-transform:uppercase;white-space:nowrap;background:var(--couleur-jaune);font-style:italic;display:flex;overflow:hidden}.bandeau__conteneur{column-gap:var(--espace-m);flex-flow:row;animation:15s linear infinite both marquee;display:flex}.bandeau__conteneur ::selection{color:var(--couleur-jaune);background:var(--couleur-noir)}.bandeau__conteneur p{padding:var(--espace-s)0;display:inline-block}.bandeau__conteneur p strong{font-weight:600}@media (hover:hover){.bandeau:hover .bandeau__conteneur{animation-play-state:paused}}@keyframes marquee{0%{transform:translate(0%)}to{transform:translate(-100%)}}body:has(#menu-mobile:not([aria-hidden=true])){touch-action:none;overflow:hidden}#menu-mobile{--menu-mobile-hauteur:calc(100svh - var(--en-tete-hauteur));z-index:997;inset:var(--en-tete-hauteur)0 0 0;overscroll-behavior:contain;width:100vw;height:var(--menu-mobile-hauteur);transition:display .4s;transition:display .4s allow-discrete;-webkit-overflow-scrolling:none;display:flex;position:fixed;overflow:hidden}#menu-mobile[aria-hidden=true]{animation:.4s both fade-out;display:none}#menu-mobile[aria-hidden=true] .menu-modale__fond{animation:.4s both fade-out}#menu-mobile .menu-modale__fond{z-index:998;inset:var(--en-tete-hauteur)0 0 0;height:var(--menu-mobile-hauteur);opacity:0;background-color:var(--couleur-fond);animation:.4s both fade-in;position:fixed}#menu-mobile .menu-modale__conteneur{z-index:999;width:100%;height:fit-content;padding:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);opacity:0;background-color:var(--couleur-gris);flex-flow:column;animation:.4s .2s both fade-in;display:flex;position:relative}#menu-mobile .menu-modale__conteneur .menu-navigation{grid-template-columns:1fr}#menu-mobile .menu-modale__conteneur .menu-navigation ul{grid-column:initial;flex-flow:column;place-items:center}#menu-mobile .menu-modale__conteneur .menu-navigation ul>span{width:fit-content}#menu-mobile .menu-modale__conteneur .menu-navigation ul>span li a{padding-top:var(--espace-m);padding-bottom:var(--espace-m)}@media (width>1000px){#menu-mobile{display:none}}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes slide-in{to{transform:translateY(0)}}#en-tete{--en-tete-marges-internes-ligne:var(--espace-xl);--en-tete-marges-internes-bloc:var(--espace-m);--en-tete-section-hauteur:var(--en-tete-hauteur);--en-tete-logo-longueur:160px;z-index:60;min-width:100vw;max-width:100vw;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);flex-flow:row;justify-content:space-between;place-items:center;display:flex;position:fixed;top:0}#en-tete .logo{width:var(--en-tete-logo-longueur)}#en-tete .logo picture,#en-tete .logo img{background:0 0}#en-tete .logo img{object-fit:contain;width:100%;height:40px;image-rendering:crisp-edges;shape-rendering:geometricprecision;margin-left:-6px}#en-tete .logo button{align-content:center;width:100%;display:block}#en-tete .menu-navigation{text-align:center;text-transform:lowercase;flex:1;grid-template-columns:1fr auto 1fr;font-size:1.1rem;display:grid}#en-tete .menu-navigation ul{gap:var(--espace-m);flex-flow:row;grid-column:2;justify-content:space-between;display:flex}#en-tete .menu-navigation__entree{--nav-entree-marges-internes-bloc:var(--espace-xs);--nav-entree-marges-internes-ligne:3rem;--liste-puce-cercle-lien-marges-internes-ligne-debut:calc(var(--espace-m) + 1.5ch);--liste-puce-cercle-puce-position-horizontale:3.5ch}#en-tete .menu-navigation__entree:has(a[aria-current=page]),#en-tete .menu-navigation__entree--courante{background:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg) 50%/auto 90% no-repeat}#en-tete .menu-navigation__entree a{padding:var(--nav-entree-marges-internes-bloc)var(--nav-entree-marges-internes-ligne);text-align:center;display:inline-block}@media (hover:hover){#en-tete .menu-navigation__entree:hover{background:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg) 50%/auto 90% no-repeat}}@media (width<=1000px){#en-tete .menu-navigation#menu-navigation-en-tete{display:none}}#en-tete .compte-panier{text-align:center;flex-flow:row;place-items:center;gap:1rem;display:flex}#en-tete .compte-panier[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px}#en-tete .compte-panier[disabled] a:hover,#en-tete .compte-panier[disabled] a:active,#en-tete .compte-panier[disabled] a:focus-within{border:1px solid var(--couleur-noir);background:initial}#en-tete .compte-panier a{text-transform:lowercase;min-width:10ch;font-size:1.1rem}#en-tete .compte-panier a.lien-compte{border-color:#0000}#en-tete .compte-panier a[data-contient-articles=true]{background:var(--couleur-jaune)}#menu-categories-produits{--menu-entree-longueur-minimale:13ch;--menu-section-marges-bloc-debut:var(--en-tete-hauteur);--menu-entree-marges-internes-ligne:var(--espace-m);margin-top:var(--menu-section-marges-bloc-debut);position:relative}#menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type,#menu-categories-produits[data-entrees-presentes-fin] svg:last-of-type{opacity:1}#menu-categories-produits svg{pointer-events:none;opacity:0;mix-blend-mode:exclusion;width:.8rem;height:.8rem;shape-rendering:geometricprecision;transition:opacity .2s;position:absolute;bottom:calc(17.59px - .35rem)}#menu-categories-produits svg:first-of-type{left:var(--espace-xs)}#menu-categories-produits svg:last-of-type{right:var(--espace-xs)}@media (width>600px){#menu-categories-produits svg{visibility:hidden}}#menu-categories-produits ul{grid-template-columns:repeat(auto-fit,minmax(var(--menu-entree-longueur-minimale),1fr));place-items:center;gap:1px;display:grid}#menu-categories-produits ul li{width:100%;color:var(--couleur-gris);text-align:center;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);background:var(--couleur-noir);font-style:italic;font-weight:450}#menu-categories-produits ul li.categorie-courante a{color:var(--couleur-noir);background:var(--couleur-jaune);font-weight:600}@media (hover:hover){#menu-categories-produits ul li.categorie-courante a:hover{color:var(--couleur-noir)}}#menu-categories-produits ul li a{width:inherit;padding:var(--menu-entree-marges-internes-ligne)0;outline:initial;text-decoration:none;display:inline-block}#menu-categories-produits ul li a:focus-visible{color:var(--couleur-jaune);outline:initial}@media (hover:hover){#menu-categories-produits ul li a:hover{color:var(--couleur-noir);background:var(--couleur-jaune)}}@media (width<=1000px){#menu-categories-produits ul{--menu-entree-marges-internes-ligne:var(--espace-s);flex-flow:wrap;font-size:.8rem;display:flex}#menu-categories-produits ul li{flex-grow:1;width:min(140px,100%)}#menu-categories-produits ul li a{border:initial;width:100%}}@media (width<=600px){#menu-categories-produits ul{scrollbar-width:none;flex-flow:row;overflow-x:scroll}#menu-categories-produits ul li{width:initial;min-width:140px}}.photos-produit{--colonne-gauche-position-haut:var(--menu-categories-produits-hauteur);--colonne-gauche-photo-hauteur:calc(100svh - var(--menu-categories-produits-hauteur));--colonne-droite-photo-hauteur-minimale:calc(100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur));--colonne-photo-longueur-minimale:30rem;--section-marges-externes-bloc-fin:1rem;flex-flow:row;max-width:100%;display:flex;position:relative}.photos-produit .colonne{width:min(var(--colonne-photo-longueur-minimale),100%);flex-flow:column;flex-grow:1;display:flex;position:relative}.photos-produit .colonne.colonne-gauche{top:var(--colonne-gauche-position-haut);height:var(--colonne-gauche-photo-hauteur);position:sticky}.photos-produit .colonne.colonne-gauche figure,.photos-produit .colonne.colonne-gauche picture,.photos-produit .colonne.colonne-gauche img{height:100%}.photos-produit .colonne.colonne-droite img{width:100%;max-height:var(--colonne-droite-photo-hauteur-minimale)}.photos-produit .colonne.colonne-droite figure picture img:only-child{min-height:var(--colonne-droite-photo-hauteur-minimale);max-height:var(--colonne-droite-photo-hauteur-minimale)}@media (width<=60rem){.photos-produit{--colonne-droite-photo-hauteur-minimale:var(--photo-hauteur-maximum);--photo-longueur-maximum:calc(100% - var(--espace-xl));--photo-hauteur-maximum:calc(100svh - var(--en-tete-hauteur) - 87px);scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory;width:fit-content;max-width:initial;flex-flow:row;overflow-x:scroll}.photos-produit::-webkit-scrollbar{display:none}.photos-produit .colonne{scroll-snap-type:x mandatory;width:100%;min-width:100%}.photos-produit .colonne figure{scroll-snap-align:none center}.photos-produit .colonne img{max-height:var(--photo-hauteur-maximum)}.photos-produit .colonne.colonne-gauche{position:initial;min-width:var(--photo-longueur-maximum);height:initial}.photos-produit .colonne.colonne-droite{flex-flow:row}.photos-produit .colonne.colonne-droite figure{min-width:var(--photo-longueur-maximum);flex-grow:1}.photos-produit .colonne.colonne-droite:has(figure:only-child){min-width:var(--photo-longueur-maximum)}}.grille-produits{--grille-produits-hauteur-minimale:var(--contenu-page-hauteur-minimale-avec-categories);--aucun-produit-hauteur:var(--contenu-page-hauteur-minimale-avec-categories);--carte-produit-longueur-minimale:448px;--carte-produit-longueur-maximale:1000px;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(var(--carte-produit-longueur-minimale),1fr));min-height:var(--grille-produits-hauteur-minimale);gap:1px;display:grid}.grille-produits article{max-width:var(--carte-produit-longueur-maximale);box-shadow:0 0 0 1px var(--couleur-noir)}.grille-produits article figure{row-gap:var(--espace-xl);flex-flow:column;display:flex}.grille-produits article figure a{position:relative}@media (hover:hover){.grille-produits article figure a:hover .produit__illustration__survol{visibility:visible;opacity:1;transition:opacity .3s,visibility .3s}}.grille-produits article figure img{position:inherit;aspect-ratio:9/16;object-fit:cover;background:0 0;width:100%;max-height:70vh}.grille-produits article figure .produit__illustration__principale{display:block}.grille-produits article figure .produit__illustration__principale:before{content:"";z-index:-1;opacity:0;filter:opacity(20%);background-image:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg);background-position:50%;background-repeat:no-repeat;background-size:50%;width:100%;height:100%;animation:1.5s linear .5s infinite alternate both test;position:absolute;top:0;left:0}.grille-produits article figure .produit__illustration__principale img{opacity:0;transition:opacity 1s}.grille-produits article figure .produit__illustration__survol{visibility:hidden;opacity:0;width:100%;height:100%;transition:opacity .15s,visibility .15s;display:block;position:absolute;top:0;left:0}.grille-produits article figure .produit__illustration__survol img{background:var(--couleur-fond)}.grille-produits article figure figcaption{margin-bottom:var(--espace-xl);padding:var(--espace-m);flex-flow:row;justify-content:space-between;display:flex}.grille-produits article figure figcaption h3{letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}.grille-produits article figure figcaption p{letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:500}.grille-produits__aucun-produit{min-height:var(--aucun-produit-hauteur);text-align:center;grid-column:span 3;align-content:center}.grille-produits__aucun-produit p+p{margin-top:var(--espace-l);font-size:1.25rem}@media (width<=700px){.grille-produits{grid-template-columns:100%}.grille-produits article figure img{max-height:50svh}}@keyframes test{to{opacity:1}}.resume-produit{--resume-position-basse:0%;--section-marges-internes:var(--espace-l);--espace-inter-colonne:var(--espace-xl);--resume-police-graisse:500;--resume-police-style:italic;--resume-police-taille:var(--espace-l);--resume-police-nom-taille:1.33rem;--resume-police-selecteur-graisse:400;--resume-police-selecteur-taille:var(--espace-m);bottom:var(--resume-position-basse);position:sticky}.resume-produit .selecteur-produit{column-gap:var(--espace-inter-colonne);border-block:1px solid var(--couleur-noir);font-size:var(--resume-police-taille);font-weight:var(--resume-police-graisse);font-style:var(--resume-police-style);line-height:var(--hauteur-ligne-compacte);background:var(--couleur-blanc-fond);grid-template-columns:repeat(3,1fr);grid-auto-flow:column;place-items:center;display:grid;position:relative}.resume-produit .selecteur-produit>*{width:100%;height:100%;padding:var(--section-marges-internes);flex-flow:row;place-content:center;place-items:center;display:flex}.resume-produit .selecteur-produit>:nth-child(2){border-inline-start:1px solid var(--couleur-noir);border-inline-end:1px solid var(--couleur-noir)}.resume-produit .selecteur-produit__nom{font-size:var(--resume-police-nom-taille)}.resume-produit .selecteur-produit__selection-variation{font-size:var(--resume-police-selecteur-taille);font-weight:var(--resume-police-selecteur-graisse);text-transform:lowercase}.resume-produit .selecteur-produit__selection-variation label{margin-right:var(--espace-s)}.resume-produit .selecteur-produit__selection-variation select{padding:var(--espace-xs)var(--espace-l);border:1px solid var(--couleur-noir);text-align:center;letter-spacing:initial;appearance:none;background:var(--couleur-fond);position:relative}@supports selector(:user-valid){.resume-produit .selecteur-produit__selection-variation select:user-valid{background:var(--couleur-jaune-fond)}}.resume-produit .selecteur-produit__selection-variation option{background:var(--couleur-fond)}.resume-produit .selecteur-produit__selection-variation__selecteurs{position:relative}.resume-produit .selecteur-produit__selection-variation__selecteurs:after{pointer-events:none;content:" ";text-align:center;visibility:visible;opacity:1;background:url(/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg) no-repeat;width:.9rem;height:.9rem;transition:opacity .2s,visibility .2s;display:inline-block;position:absolute;top:10px;right:.4rem}@supports not selector(:user-valid){.resume-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid):after{visibility:hidden;opacity:0}}@supports selector(:user-valid){.resume-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid):after{visibility:hidden;opacity:0}}.resume-produit .selecteur-produit__prix{font-style:initial}@media (width<=800px){.resume-produit{--section-marges-internes:var(--espace-m);--espace-inter-colonne:var(--espace-m)}}@media (width<=700px){.resume-produit{--resume-police-taille:var(--espace-m);--resume-police-nom-taille:var(--espace-m);--section-marges-internes:var(--espace-m);--espace-inter-colonne:var(--espace-s)}}@media (width<=500px){.resume-produit .selecteur-produit__selection-variation{row-gap:var(--espace-inter-colonne);flex-flow:column}.resume-produit .selecteur-produit__selection-variation h3{flex-basis:100%}}.details-produit{--bouton-marges-internes-bloc:var(--espace-l);--espace-inter-lignes:var(--espace-l);--espace-inter-texte:var(--espace-m);--section-marges-internes:var(--espace-l);--textuel-marges-internes-ligne:calc(var(--espace-l)*2);background-color:var(--couleur-blanc)}.details-produit__textes{grid-template-columns:1fr;grid-auto-flow:row;display:grid}.details-produit__textes .section-textuelle:not(:last-of-type){border-block-end:1px solid var(--couleur-noir)}.details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu{display:none}.details-produit__textes .section-textuelle h3{line-height:var(--hauteur-ligne-rapprochee)}.details-produit__textes .section-textuelle h3 button{width:100%;min-block-size:1lh;padding:var(--section-marges-internes);text-align:start;display:inline-block}.details-produit__textes .section-textuelle .section-textuelle__contenu{padding-block-end:var(--section-marges-internes);padding-inline:var(--textuel-marges-internes-ligne)}.details-produit__textes .section-textuelle .section-textuelle__contenu ul{list-style:inside}.details-produit__textes .section-textuelle .section-textuelle__contenu a{text-decoration-color:var(--couleur-noir)}.details-produit__textes .section-textuelle .section-textuelle__contenu>*+*{margin-top:var(--espace-inter-texte)}.details-produit__actions{--section-marges-internes:var(--espace-l);border-block:1px solid var(--couleur-noir);background:var(--couleur-jaune);transition:background .2s;overflow:hidden}.details-produit__actions:has(button[disabled]){background:var(--couleur-fond)}.details-produit__actions button{height:initial;padding:var(--section-marges-internes);text-transform:uppercase;font-style:italic;transition:background .2s,font-weight .2s}@media (hover:hover){.details-produit__actions button:not([disabled]):hover{font-weight:600}}.produits-similaires{--carte-produit-longueur-minimale:448px;--carte-produit-longueur-maximale:1000px;--en-tete-flottante-hauteur:calc(1rem + var(--espace-l)*2 + 1px);grid-template-rows:1fr auto;grid-template-columns:repeat(3,1fr);grid-template-areas:"en-tete en-tete en-tete""produits produits produits";place-items:center;display:grid;position:relative}.produits-similaires header{z-index:10;top:var(--en-tete-flottante-hauteur);width:100%;padding:var(--espace-l)0;color:var(--couleur-blanc);text-align:center;background:var(--couleur-noir);grid-area:en-tete;position:sticky}.produits-similaires header h2{font-style:italic;line-height:var(--hauteur-ligne-rapprochee);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m)}.produits-similaires .grille-produits-similaires{grid-area:produits;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(var(--carte-produit-longueur-minimale),1fr));gap:1px;width:100%;display:grid}.produits-similaires .grille-produits-similaires article{max-width:var(--carte-produit-longueur-maximale);box-shadow:0 0 0 1px var(--couleur-noir)}.produits-similaires .grille-produits-similaires article figure{row-gap:var(--espace-xl);flex-flow:column;display:flex}.produits-similaires .grille-produits-similaires article figure a{position:relative}@media (hover:hover){.produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol{visibility:visible;opacity:1;transition:opacity .3s,visibility .3s}}.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale{display:block}.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol{visibility:hidden;opacity:0;width:100%;height:100%;transition:opacity .15s,visibility .15s;display:block;position:absolute;top:0;left:0}.produits-similaires .grille-produits-similaires article figure img{aspect-ratio:9/16;object-fit:cover;width:100%;max-height:70svh}.produits-similaires .grille-produits-similaires article figure figcaption{margin-bottom:var(--espace-xl);padding:0 var(--espace-m);flex-flow:row;justify-content:space-between;display:flex}.produits-similaires .grille-produits-similaires article figure figcaption h3{letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}.produits-similaires .grille-produits-similaires article figure figcaption p{letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:500}@media (width<=700px){.produits-similaires .grille-produits-similaires{grid-template-columns:100%}.produits-similaires .grille-produits-similaires article figure img{max-height:50svh}}#pied-de-page{max-width:100vw;height:var(--pied-de-page-hauteur);padding:var(--espace-m);border-top:1px solid var(--couleur-noir);background:var(--couleur-jaune);grid-template-columns:1fr 1fr;place-items:center;font-size:.8rem;display:grid}#pied-de-page .zone-menu-navigation-secondaire{text-transform:lowercase;justify-self:start;width:100%;height:100%}#pied-de-page .zone-liens-reseaux-sociaux{text-align:right;justify-items:end;width:100%;height:100%} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css index b3810eb3..08cb1440 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css @@ -1,45 +1,115 @@ +@charset "UTF-8"; #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); overflow: hidden; display: flex; flex-flow: column nowrap; - min-height: var(--hauteur-conteneur); - max-height: var(--hauteur-conteneur); + min-block-size: var(--hauteur-conteneur); + max-block-size: var(--hauteur-conteneur); margin-top: var(--page-marges-bloc-debut); } #page-accueil .storytelling { overflow-y: scroll; - place-items: center; - min-height: inherit; - max-height: inherit; + overscroll-behavior: none; + min-block-size: inherit; + max-block-size: inherit; } #page-accueil .storytelling__conteneur { + overscroll-behavior: inherit; display: flex; flex-flow: column nowrap; - min-height: calc(var(--hauteur-conteneur) * 13); - padding: 0 var(--espace-xl); + place-items: center; + min-block-size: calc(var(--hauteur-conteneur) * 13); + padding: 0 var(--conteneur-marges-internes-ligne); +} +#page-accueil .storytelling__animation { + --hauteur-animation: 90px; + --taille-police: calc(var(--espace-xl) * 2.5); + pointer-events: none; + position: absolute; + z-index: 3; + top: 0; + right: 0; + left: 0; + overflow: hidden; + display: grid; + place-content: center; + place-items: center; + block-size: 100%; + margin: auto; + visibility: visible; + opacity: 1; + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; + mask-image: linear-gradient(var(--mask-direction, to right), hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%) 20%, hsl(0, 0%, 0%) 80%, hsla(0, 0%, 0%, 0)); +} +#page-accueil .storytelling__animation[hidden] { + display: grid !important; + /* visibility: hidden; + opacity: 0; */ + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; +} +#page-accueil .storytelling__animation.no-js { + /* visibility: hidden; + opacity: 0; */ + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; +} +#page-accueil .storytelling__animation .animation-conteneur { + overflow: visible; + inline-size: 120%; + block-size: var(--hauteur-animation); +} +#page-accueil .storytelling__animation .animation-texte { + overflow: visible; + font-size: var(--taille-police); + font-weight: 600; + text-shadow: 4px 4px 0 var(--couleur-blanc); + text-transform: uppercase; + letter-spacing: var(--espacement-inter-lettres-rapproche-s); } #page-accueil .storytelling__image { position: sticky; top: 0; align-content: center; - width: 100%; - min-height: var(--hauteur-conteneur); - max-height: var(--hauteur-conteneur); + inline-size: max-content; + max-inline-size: 100%; + min-block-size: var(--hauteur-conteneur); + max-block-size: var(--hauteur-conteneur); } -#page-accueil .storytelling__image[data-cache] { - display: none; +#page-accueil .storytelling__image[data-caché] { + display: none !important; } #page-accueil .storytelling__image picture { - max-height: inherit; + max-block-size: inherit; } #page-accueil .storytelling__image img { - scale: 0.9; - max-height: inherit; + scale: 0.95; + max-block-size: inherit; margin: auto; object-fit: contain; background: transparent; } +@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); + } +} /*# sourceMappingURL=page-accueil.css.map */ diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map index 572f66ff..a2278b74 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map +++ b/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;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css index 31d5e7b9..1d5afbb7 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css +++ b/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);min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{min-height:inherit;max-height:inherit;place-items:center;overflow-y:scroll}#page-accueil .storytelling__conteneur{min-height:calc(var(--hauteur-conteneur)*13);padding:0 var(--espace-xl);flex-flow:column;display:flex}#page-accueil .storytelling__image{width:100%;min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-cache]{display:none}#page-accueil .storytelling__image picture{max-height:inherit}#page-accueil .storytelling__image img{max-height:inherit;object-fit:contain;background:0 0;margin:auto;scale:.9} \ No newline at end of file +#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)}} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/README.md b/web/app/themes/haiku-atelier-2024/src/gleam/README.md new file mode 100644 index 00000000..48c4c260 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/README.md @@ -0,0 +1,25 @@ +# haiku_gleam + +[![Package Version](https://img.shields.io/hexpm/v/haiku_gleam)](https://hex.pm/packages/haiku_gleam) +[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/haiku_gleam/) + +```sh +gleam add haiku_gleam@1 +``` + +```gleam +import haiku_gleam + +pub fn main() -> Nil { + // TODO: An example of the project in use +} +``` + +Further documentation can be found at . + +## Development + +```sh +gleam run # Run the project +gleam test # Run the tests +``` diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/gleam.toml b/web/app/themes/haiku-atelier-2024/src/gleam/gleam.toml new file mode 100644 index 00000000..efd5f7ef --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/gleam.toml @@ -0,0 +1,11 @@ +name = "haiku_gleam" +target = "javascript" +version = "0.0.1" + +[dependencies] +gleam_javascript = ">= 1.0.0 and < 2.0.0" +gleam_stdlib = ">= 0.44.0 and < 2.0.0" +plinth = ">= 0.6.1 and < 1.0.0" + +[dev-dependencies] +gleeunit = ">= 1.0.0 and < 2.0.0" diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/manifest.toml b/web/app/themes/haiku-atelier-2024/src/gleam/manifest.toml new file mode 100644 index 00000000..0462f043 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/manifest.toml @@ -0,0 +1,16 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_javascript", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "EF6C77A506F026C6FB37941889477CD5E4234FCD4337FF0E9384E297CB8F97EB" }, + { name = "gleam_json", version = "3.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "5BA154440B22D9800955B1AB854282FA37B97F30F409D76B0824D0A60C934188" }, + { name = "gleam_stdlib", version = "0.60.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "621D600BB134BC239CB2537630899817B1A42E60A1D46C5E9F3FAE39F88C800B" }, + { name = "gleeunit", version = "1.5.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "D33B7736CF0766ED3065F64A1EBB351E72B2E8DE39BAFC8ADA0E35E92A6A934F" }, + { name = "plinth", version = "0.6.1", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "02D6421A27795CDC5C3A452240E21D5D3CB8217219020BB247917132E36CC8F1" }, +] + +[requirements] +gleam_javascript = { version = ">= 1.0.0 and < 2.0.0" } +gleam_stdlib = { version = ">= 0.44.0 and < 2.0.0" } +gleeunit = { version = ">= 1.0.0 and < 2.0.0" } +plinth = { version = ">= 0.6.1 and < 1.0.0" } diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/src/haiku_gleam.gleam b/web/app/themes/haiku-atelier-2024/src/gleam/src/haiku_gleam.gleam new file mode 100644 index 00000000..5e1d9fb3 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/src/haiku_gleam.gleam @@ -0,0 +1,5 @@ +import gleam/io + +pub fn main() -> Nil { + io.println("Hello from haiku_gleam!") +} diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.ffi.mjs b/web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.ffi.mjs new file mode 100644 index 00000000..3cbf44bf --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.ffi.mjs @@ -0,0 +1,16 @@ +/** + * @param {IntersectionObserverInit} options + * @param {IntersectionObserverCallback} callback + * @returns {IntersectionObserver} + */ +export const new_intersection_observer = (options, callback) => { + return new IntersectionObserver(callback, options); +}; + +/** + * @param {IntersectionObserver} observer + * @param {Element} element + */ +export const observe_element = (observer, element) => { + observer.observe(element); +}; diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.gleam b/web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.gleam new file mode 100644 index 00000000..7b3a275e --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/src/intersection_observer.gleam @@ -0,0 +1,22 @@ +import gleam/option.{type Option} +import plinth/browser/document +import plinth/browser/element + +pub type IntersectionObserver + +pub type ObservableElement { + Element(element.Element) + Document(document.Document) +} + +pub type Threshold { + Threshold(values: List(Int)) +} + +pub type IntersectionObserverOptions { + IntersectionObserverOptions( + root: ObservableElement, + root_margin: Option(String), + threshold: Threshold, + ) +} diff --git a/web/app/themes/haiku-atelier-2024/src/gleam/test/haiku_gleam_test.gleam b/web/app/themes/haiku-atelier-2024/src/gleam/test/haiku_gleam_test.gleam new file mode 100644 index 00000000..fba3c887 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/gleam/test/haiku_gleam_test.gleam @@ -0,0 +1,13 @@ +import gleeunit + +pub fn main() -> Nil { + gleeunit.main() +} + +// gleeunit test functions end in `_test` +pub fn hello_world_test() { + let name = "Joe" + let greeting = "Hello, " <> name <> "!" + + assert greeting == "Hello, Joe!" +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss index 2d6e9aa3..220cdf42 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss @@ -24,6 +24,7 @@ --hauteur-ligne-rapprochee: 1; /* Espacements entre les lettres */ + --espacement-inter-lettres-rapproche-m: -1px; --espacement-inter-lettres-rapproche-s: -0.5px; --espacement-inter-lettres-etendu-s: 0.5px; --espacement-inter-lettres-etendu-m: 1px; diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss index d8a657d6..824c7a62 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss @@ -36,6 +36,7 @@ html { * 2. Utilise la couleur primaire du site. */ body { + overscroll-behavior: none; accent-color: var(--couleur-jaune); /* 2 */ background: var(--couleur-gris); /* 1 */ } diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss index c96fe70c..ce61fa02 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss @@ -85,6 +85,18 @@ /* Dispositions */ --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */ + // 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") + center/auto 90% no-repeat; + } + + // COMPAT001: Pour les navigateurs < 2023. + &--courante { + background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") + center/auto 90% no-repeat; + } + a { display: inline-block; /* 1 */ padding: var(--nav-entree-marges-internes-bloc) @@ -93,11 +105,6 @@ text-align: center; /* 4 */ } - &--courante { - background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") - center/auto 90% no-repeat; - } - @media (hover: hover) { &:hover { background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss index 488a6ec1..5231ae8a 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss @@ -182,13 +182,6 @@ border-block-end: 1px solid var(--couleur-noir); } - // La section est dépliée. - &:has(button[aria-expanded="true"]) { - button { - /* padding: initial; */ - } - } - // La section est fermée. &:has(button[aria-expanded="false"]) .section-textuelle__contenu { display: none; @@ -233,7 +226,7 @@ --section-marges-internes: var(--espace-l); overflow: hidden; - border: 1px solid var(--couleur-noir); + border-block: 1px solid var(--couleur-noir); background: var(--couleur-jaune); transition: 0.2s background; diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_produits-similaires.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_produits-similaires.scss index 3cf1946d..db291d2d 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_produits-similaires.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_produits-similaires.scss @@ -4,6 +4,7 @@ // Dimensions --carte-produit-longueur-minimale: 448px; --carte-produit-longueur-maximale: 1000px; + --en-tete-flottante-hauteur: calc(1rem + var(--espace-l) * 2 + 1px); position: relative; display: grid; @@ -18,10 +19,10 @@ header { position: sticky; z-index: 10; - top: calc(1lh + var(--espace-l) + var(--espace-m)); + top: var(--en-tete-flottante-hauteur); grid-area: en-tete; width: 100%; - padding: var(--espace-l) 0 var(--espace-m); + padding: var(--espace-l) 0; color: var(--couleur-blanc); text-align: center; background: var(--couleur-noir); diff --git a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss index 9a6fe937..792d3261 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss @@ -6,50 +6,141 @@ // Marges --page-marges-bloc-debut: var(--en-tete-hauteur); + --conteneur-marges-internes-ligne: var(--espace-xl); overflow: hidden; display: flex; flex-flow: column nowrap; - min-height: var(--hauteur-conteneur); - max-height: var(--hauteur-conteneur); + min-block-size: var(--hauteur-conteneur); + max-block-size: var(--hauteur-conteneur); margin-top: var(--page-marges-bloc-debut); .storytelling { overflow-y: scroll; - place-items: center; - min-height: inherit; - max-height: inherit; + overscroll-behavior: none; + min-block-size: inherit; + max-block-size: inherit; &__conteneur { + overscroll-behavior: inherit; display: flex; flex-flow: column nowrap; - min-height: calc(var(--hauteur-conteneur) * 13); - padding: 0 var(--espace-xl); + place-items: center; + min-block-size: calc(var(--hauteur-conteneur) * 13); + padding: 0 var(--conteneur-marges-internes-ligne); + } + + // Texte animé indiquant à l'Utilisateur de défiler vers le bas. + &__animation { + --hauteur-animation: 90px; + --taille-police: calc(var(--espace-xl) * 2.5); + + pointer-events: none; + position: absolute; + z-index: 3; + top: 0; + right: 0; + left: 0; + overflow: hidden; + display: grid; + place-content: center; + place-items: center; + block-size: 100%; + margin: auto; + visibility: visible; + opacity: 1; + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; + mask-image: linear-gradient( + var(--mask-direction, to right), + hsl(0deg 0% 0% / 0%), + hsl(0deg 0% 0% / 100%) 20%, + hsl(0deg 0% 0% / 100%) 80%, + hsl(0deg 0% 0% / 0%) + ); + + &[hidden] { + display: grid !important; + + /* visibility: hidden; + 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; */ + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; + } + + .animation-conteneur { + overflow: visible; + + // Nécessaire pour que les lettres apparaissent « en douceur » dans la vue. + inline-size: 120%; + block-size: var(--hauteur-animation); + } + + .animation-texte { + overflow: visible; + + // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium et FF ? + font-size: var(--taille-police); + font-weight: 600; + + // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium et FF ? + text-shadow: 4px 4px 0 var(--couleur-blanc); + text-transform: uppercase; + letter-spacing: var(--espacement-inter-lettres-rapproche-s); + } } &__image { position: sticky; top: 0; align-content: center; - width: 100%; - min-height: var(--hauteur-conteneur); - max-height: var(--hauteur-conteneur); + inline-size: max-content; + max-inline-size: 100%; + min-block-size: var(--hauteur-conteneur); + max-block-size: var(--hauteur-conteneur); - &[data-cache] { - display: none; + &[data-caché] { + display: none !important; } picture { - max-height: inherit; + max-block-size: inherit; } img { - scale: 0.9; - max-height: inherit; + scale: 0.95; + max-block-size: inherit; margin: auto; object-fit: contain; background: transparent; } } } + + // Désactive l'animation si JavaScript n'est pas disponible. + @media (scripting: none) { + .storytelling__animation { + visibility: hidden; + } + } + + @media (width <= 700px) { + --conteneur-marges-internes-ligne: var(--espace-l); + } + + @media (width <= 500px) { + --conteneur-marges-internes-ligne: var(--espace-m); + } +} + +// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande... +@supports (-moz-appearance: none) { + #page-accueil .storytelling__animation { + --taille-police: calc(var(--espace-xl) * 2.2); + } } diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/constantes/dom.ts b/web/app/themes/haiku-atelier-2024/src/scripts/constantes/dom.ts index 898a6d92..e0fc3b90 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/constantes/dom.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/constantes/dom.ts @@ -1,11 +1,11 @@ /** Constantes de valeurs pour la manipulation du DOM : sélecteurs et attributs. */ +export const ATTRIBUT_ACTIF = "data-actif"; export const ATTRIBUT_ARIA_CONTROLS = "aria-controls"; export const ATTRIBUT_ARIA_EXPANDED = "aria-expanded"; export const ATTRIBUT_ARIA_HIDDEN = "aria-hidden"; export const ATTRIBUT_ARIA_SELECTED = "aria-selected"; -export const ATTRIBUT_CACHE = "data-cache"; -export const ATTRIBUT_ACTIF = "data-actif"; +export const ATTRIBUT_CACHÉ = "data-caché"; export const ATTRIBUT_CHARGEMENT = "data-chargement"; export const ATTRIBUT_CLE_PANIER = "data-cle-panier"; export const ATTRIBUT_CODE_PROMO_PRESENT = "data-code-promo-present"; @@ -24,61 +24,61 @@ export const ATTRIBUT_PRIX = "data-prix"; export const ATTRIBUT_TABINDEX = "tabindex"; // En-tête -export const SELECTEUR_BOUTON_MENU_MOBILE = "#bouton-menu-mobile"; -export const SELECTEUR_BOUTON_PANIER = ".compte-panier a[rel='cart']"; -export const SELECTEUR_ENTREE_MENU_CATEGORIES_PRODUITS = "#menu-categories-produits ul li a"; -export const SELECTEUR_FLECHE_DROITE_CATEGORIES_PRODUITS = "#fleche-defilement-categories-produits-droite"; -export const SELECTEUR_FLECHE_GAUCHE_CATEGORIES_PRODUITS = "#fleche-defilement-categories-produits-gauche"; -export const SELECTEUR_MENU_CATEGORIES_PRODUITS = "#menu-categories-produits"; -export const SELECTEUR_MENU_MOBILE = "#menu-mobile"; +export const DOM_BOUTON_MENU_MOBILE = "#bouton-menu-mobile"; +export const DOM_BOUTON_PANIER = ".compte-panier a[rel='cart']"; +export const DOM_ENTREE_MENU_CATEGORIES_PRODUITS = "#menu-categories-produits ul li a"; +export const DOM_MENU_CATEGORIES_PRODUITS = "#menu-categories-produits"; +export const DOM_MENU_MOBILE = "#menu-mobile"; // Panier -export const SELECTEUR_BOUTON_ACTIONS_FORMULAIRE = "#panneau-informations-client .panneau__pied-de-page button"; -export const SELECTEUR_BOUTON_ADDITION_QUANTITE = "button.detail-produit__actions__addition"; -export const SELECTEUR_BOUTON_CODE_PROMO = "#panneau-panier #bouton-code-promo"; -export const SELECTEUR_BOUTON_SEPARATION_ADRESSES = "#separation-adresses"; -export const SELECTEUR_BOUTON_SOUSTRACTION_QUANTITE = "button.detail-produit__actions__soustraction"; -export const SELECTEUR_BOUTON_SUPPRESSION_PANIER = "button.detail-produit__actions__suppression"; -export const SELECTEUR_CHAMP_CODE_PROMO = "#panneau-panier #champ-code-promo"; -export const SELECTEUR_CHAMP_QUANTITE_LIGNE_PANIER = "input"; -export const SELECTEUR_CONTENEUR_METHODES_LIVRAISON = "#panneau-panier #choix-methode-livraison"; -export const SELECTEUR_ENSEMBLE_CODE_PROMO = "#panneau-panier #ensemble-code-promo"; -export const SELECTEUR_ENTREES_PANIER = "article"; -export const SELECTEUR_FORMULAIRE_FACTURATION = "#panneau-informations-client .panneau__formulaires__facturation"; -export const SELECTEUR_FORMULAIRE_LIVRAISON = "#panneau-informations-client .panneau__formulaires__livraison"; -export const SELECTEUR_FORMULAIRE_PANIER = "#panneau-informations-client form"; -export const SELECTEUR_INSTRUCTIONS_CLIENT = "#panneau-panier #instructions-client"; -export const SELECTEUR_MESSAGE_CODE_PROMO = "#panneau-panier .panneau__instructions-code-promo__code-promo__message"; -export const SELECTEUR_MESSAGE_FORMULAIRE_ADRESSES = "#panneau-informations-client #message-formulaire-adresses"; -export const SELECTEUR_PRIX_LIGNE_PANIER = ".detail-produit__nom-prix span"; -export const SELECTEUR_SOUS_TOTAL_LIVRAISON_COUT = "#panneau-panier #sous-total-livraison strong"; -export const SELECTEUR_SOUS_TOTAL_LIVRAISON_PRESTATAIRE = "#panneau-panier #sous-total-livraison span"; -export const SELECTEUR_SOUS_TOTAL_PRODUITS = "#panneau-panier #sous-total-produits strong"; -export const SELECTEUR_TOTAL_PANIER = "#panneau-panier .panneau__pied-de-page p span"; -export const SELECTEUR_TOTAL_REDUCTION = "#panneau-panier #sous-total-reduction"; -export const SELECTEUR_TOTAL_REDUCTION_VALEUR = "#panneau-panier #sous-total-reduction strong"; +export const DOM_BOUTON_ACTIONS_FORMULAIRE = "#panneau-informations-client .panneau__pied-de-page button"; +export const DOM_BOUTON_ADDITION_QUANTITE = "button.detail-produit__actions__addition"; +export const DOM_BOUTON_CODE_PROMO = "#panneau-panier #bouton-code-promo"; +export const DOM_BOUTON_SEPARATION_ADRESSES = "#separation-adresses"; +export const DOM_BOUTON_SOUSTRACTION_QUANTITE = "button.detail-produit__actions__soustraction"; +export const DOM_BOUTON_SUPPRESSION_PANIER = "button.detail-produit__actions__suppression"; +export const DOM_CHAMP_CODE_PROMO = "#panneau-panier #champ-code-promo"; +export const DOM_CHAMP_QUANTITE_LIGNE_PANIER = "input"; +export const DOM_CONTENEUR_METHODES_LIVRAISON = "#panneau-panier #choix-methode-livraison"; +export const DOM_ENSEMBLE_CODE_PROMO = "#panneau-panier #ensemble-code-promo"; +export const DOM_ENTREES_PANIER = "article"; +export const DOM_FORMULAIRE_FACTURATION = "#panneau-informations-client .panneau__formulaires__facturation"; +export const DOM_FORMULAIRE_LIVRAISON = "#panneau-informations-client .panneau__formulaires__livraison"; +export const DOM_FORMULAIRE_PANIER = "#panneau-informations-client form"; +export const DOM_INSTRUCTIONS_CLIENT = "#panneau-panier #instructions-client"; +export const DOM_MESSAGE_CODE_PROMO = "#panneau-panier .panneau__instructions-code-promo__code-promo__message"; +export const DOM_MESSAGE_FORMULAIRE_ADRESSES = "#panneau-informations-client #message-formulaire-adresses"; +export const DOM_PRIX_LIGNE_PANIER = ".detail-produit__nom-prix span"; +export const DOM_SOUS_TOTAL_LIVRAISON_COUT = "#panneau-panier #sous-total-livraison strong"; +export const DOM_SOUS_TOTAL_LIVRAISON_PRESTATAIRE = "#panneau-panier #sous-total-livraison span"; +export const DOM_SOUS_TOTAL_PRODUITS = "#panneau-panier #sous-total-produits strong"; +export const DOM_TOTAL_PANIER = "#panneau-panier .panneau__pied-de-page p span"; +export const DOM_TOTAL_REDUCTION = "#panneau-panier #sous-total-reduction"; +export const DOM_TOTAL_REDUCTION_VALEUR = "#panneau-panier #sous-total-reduction strong"; // Accueil -export const SELECTEUR_CONTENEUR_STORYTELLING = ".storytelling"; -export const SELECTEUR_IMAGES_STORYTELLING = ".storytelling__image"; +export const DOM_CONTENEUR_ANIMATION = ".storytelling__animation"; +export const DOM_CONTENEUR_STORYTELLING = ".storytelling"; +export const DOM_GARDE_FOU_JS = "no-js"; +export const DOM_IMAGES_STORYTELLING = ".storytelling__image"; // Boutique -export const SELECTEUR_BOUTON_PLUS_PRODUITS = "#page-boutique #bouton-plus-de-produits"; -export const SELECTEUR_GRILLE_PRODUITS = "#page-boutique .grille-produits"; +export const DOM_BOUTON_PLUS_PRODUITS = "#page-boutique #bouton-plus-de-produits"; +export const DOM_GRILLE_PRODUITS = "#page-boutique .grille-produits"; // À propos export const CLASS_BOITE_TEXTE = "boite-texte"; export const CLASS_BOUTON_FERMETURE_BOITE_TEXTE = "boite-texte__bouton-fermeture"; export const CLASS_EPINGLE = "epingle"; -export const SELECTEUR_BOITE_TEXTE = `.${CLASS_BOITE_TEXTE}`; -export const SELECTEUR_BOUTON_FERMETURE_BOITE_TEXTE = `.${CLASS_BOUTON_FERMETURE_BOITE_TEXTE}`; -export const SELECTEUR_CONTENEUR_STORYTELLING_A_PROPOS = ".storytelling__conteneur"; -export const SELECTEUR_EPINGLE = `.${CLASS_EPINGLE}`; +export const DOM_BOITE_TEXTE = `.${CLASS_BOITE_TEXTE}`; +export const DOM_BOUTON_FERMETURE_BOITE_TEXTE = `.${CLASS_BOUTON_FERMETURE_BOITE_TEXTE}`; +export const DOM_CONTENEUR_STORYTELLING_A_PROPOS = ".storytelling__conteneur"; +export const DOM_EPINGLE = `.${CLASS_EPINGLE}`; // Produit -export const SELECTEUR_BOUTON_AJOUT_PANIER = "#bouton-ajout-panier"; -export const SELECTEUR_CONTENEUR_PANIER = "#page-panier"; -export const SELECTEUR_PRIX_PRODUIT = ".selecteur-produit__prix"; -export const SELECTEUR_SELECTEUR_QUANTITE = "#selecteur-variation"; -export const SELECTEUR_BOUTONS_ACCORDEON = ".section-textuelle button"; -export const SELECTEUR_CONTENUS_ACCORDEON = ".section-textuelle__contenu"; +export const DOM_BOUTON_AJOUT_PANIER = "#bouton-ajout-panier"; +export const DOM_CONTENEUR_PANIER = "#page-panier"; +export const DOM_PRIX_PRODUIT = ".selecteur-produit__prix"; +export const DOM_DOM_QUANTITE = "#selecteur-variation"; +export const DOM_BOUTONS_ACCORDEON = ".section-textuelle button"; +export const DOM_CONTENUS_ACCORDEON = ".section-textuelle__contenu"; diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/logging.ts b/web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts similarity index 59% rename from web/app/themes/haiku-atelier-2024/src/scripts/logging.ts rename to web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts index 96922a82..c875d291 100644 --- a/web/app/themes/haiku-atelier-2024/src/scripts/logging.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts @@ -1,3 +1,4 @@ +import { configureSync, getConsoleSink, getLogger } from "@logtape/logtape"; import chalk from "chalk"; import log, { type Logger } from "loglevel"; import prefix from "loglevel-plugin-prefix"; @@ -19,3 +20,17 @@ prefix.apply(logger, { return `${chalk.gray(`[${timestamp}]`)} ${colors[level.toUpperCase()](level)}`; }, }); + +const HAIKU_ATELIER_LOGGER = "haiku-atelier"; +configureSync({ + loggers: [ + { + category: HAIKU_ATELIER_LOGGER, + lowestLevel: "debug", + sinks: ["console"], + }, + ], + sinks: { console: getConsoleSink() }, +}); + +export const nuLogger = getLogger(HAIKU_ATELIER_LOGGER); diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/lib/dom.ts b/web/app/themes/haiku-atelier-2024/src/scripts/lib/dom.ts index 1e76e58c..e67d309e 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/lib/dom.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/lib/dom.ts @@ -4,12 +4,12 @@ import { Either, identity, Left, Right } from "purify-ts"; import type { ParentElement } from "./types/dom.d.ts"; import { ATTRIBUT_CHARGEMENT, ATTRIBUT_DESACTIVE } from "../constantes/dom.ts"; -import { logger } from "../logging.ts"; +import { logger } from "../journalisation.ts"; import { lanceAnimationCycleLoading } from "./animations.ts"; import { BadRequestError, creeSyntaxError, - ERREUR_SELECTEUR_INEXISTANT, + ERREUR_DOM_INEXISTANT, ERREUR_SYNTAXE_INVALIDE, ForbiddenError, NotFoundError, @@ -26,9 +26,7 @@ export const recupereElementAvecSelecteur = // Transforme le Left en une erreur plus sympathique .mapLeft(_ => creeSyntaxError(ERREUR_SYNTAXE_INVALIDE(selecteur))) // Retourne une SyntaxError si l'Élément est null - .chain((e: E | null) => - G.isNotNullable(e) ? Right(e) : Left(creeSyntaxError(ERREUR_SELECTEUR_INEXISTANT(selecteur))) - ); + .chain((e: E | null) => G.isNotNullable(e) ? Right(e) : Left(creeSyntaxError(ERREUR_DOM_INEXISTANT(selecteur)))); export const getDOMElementsWithSelector = (parent: ParentElement) => (selecteur: string): Either> => @@ -38,7 +36,7 @@ export const getDOMElementsWithSelector = // Transforme le Left en une erreur plus sympathique .mapLeft(_ => creeSyntaxError(ERREUR_SYNTAXE_INVALIDE(selecteur))) // Retourne une SyntaxError si le tableau est vide - .chain((e: Array) => A.isEmpty(e) ? Left(creeSyntaxError(ERREUR_SELECTEUR_INEXISTANT(selecteur))) : Right(e)); + .chain((e: Array) => A.isEmpty(e) ? Left(creeSyntaxError(ERREUR_DOM_INEXISTANT(selecteur))) : Right(e)); export const recupereElementOuLeve = (elementOuErreur: Either): E => elementOuErreur.caseOf({ diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/lib/erreurs.ts b/web/app/themes/haiku-atelier-2024/src/scripts/lib/erreurs.ts index d4fa93ba..c5fc107a 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/lib/erreurs.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/lib/erreurs.ts @@ -11,7 +11,7 @@ import { ErreurAdresseInvalide } from "./erreurs/adresses"; /* Messages d'erreur */ export const ERREUR_SYNTAXE_INVALIDE = (selecteur: string): string => `Le selecteur "${selecteur}" est invalide`; -export const ERREUR_SELECTEUR_INEXISTANT = (selecteur: string): string => +export const ERREUR_DOM_INEXISTANT = (selecteur: string): string => `La requête "${selecteur}" n'a retourné aucun Élément.`; /* Création d'erreurs */ diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-adresses.ts b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-adresses.ts index f56ac369..8bc185af 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-adresses.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-adresses.ts @@ -40,7 +40,7 @@ import { WCStoreCartUpdateCustomerArgsSchema } from "../lib/schemas/api/cart-upd import { estWCAddressError } from "../lib/schemas/api/erreurs"; import { WCV3OrdersArgsSchema, WCV3OrderSchema } from "../lib/schemas/api/v3/orders"; import { safeSchemaParse } from "../lib/validation"; -import { logger } from "../logging"; +import { logger } from "../journalisation.ts"; import { E } from "./scripts-page-panier-elements"; import { getShippingRatesLS } from "./scripts-page-panier-local-storage"; diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-code-promo.ts b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-code-promo.ts index 49634135..9276ea1a 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-code-promo.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-code-promo.ts @@ -20,7 +20,7 @@ import { ATTRIBUT_CODE_PROMO_PRESENT, ATTRIBUT_DESACTIVE, ATTRIBUT_HIDDEN, - SELECTEUR_BOUTON_CODE_PROMO, + DOM_BOUTON_CODE_PROMO, } from "../constantes/dom"; import { NOM_CANAL_REVALIDATION_LIVRAISON } from "../constantes/messages"; import { lanceAnimationCycleLoading } from "../lib/animations"; @@ -59,7 +59,7 @@ export const initialiseElementsCodePromo = (): void => { .with( { cible: P.when((cible: EventTarget | null) => - targetMatchesSelector(cible, SELECTEUR_BOUTON_CODE_PROMO) + targetMatchesSelector(cible, DOM_BOUTON_CODE_PROMO) ), codePromoPresent: false, valeurCodePromo: P.string, @@ -170,7 +170,7 @@ export const initialiseElementsCodePromo = (): void => { // Un code promo est présent sous forme de chaîne .with( { - cible: P.when(cible => targetMatchesSelector(cible, SELECTEUR_BOUTON_CODE_PROMO)), + cible: P.when(cible => targetMatchesSelector(cible, DOM_BOUTON_CODE_PROMO)), codePromoPresent: true, valeurCodePromo: P.string, }, diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-elements.ts b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-elements.ts index e54422c3..a90c0955 100644 --- a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-elements.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-elements.ts @@ -1,48 +1,48 @@ import { - SELECTEUR_BOUTON_ACTIONS_FORMULAIRE, - SELECTEUR_BOUTON_CODE_PROMO, - SELECTEUR_BOUTON_SEPARATION_ADRESSES, - SELECTEUR_CHAMP_CODE_PROMO, - SELECTEUR_CONTENEUR_METHODES_LIVRAISON, - SELECTEUR_CONTENEUR_PANIER, - SELECTEUR_ENSEMBLE_CODE_PROMO, - SELECTEUR_ENTREES_PANIER, - SELECTEUR_FORMULAIRE_FACTURATION, - SELECTEUR_FORMULAIRE_PANIER, - SELECTEUR_INSTRUCTIONS_CLIENT, - SELECTEUR_MESSAGE_CODE_PROMO, - SELECTEUR_MESSAGE_FORMULAIRE_ADRESSES, - SELECTEUR_SOUS_TOTAL_LIVRAISON_COUT, - SELECTEUR_SOUS_TOTAL_PRODUITS, - SELECTEUR_TOTAL_PANIER, - SELECTEUR_TOTAL_REDUCTION, - SELECTEUR_TOTAL_REDUCTION_VALEUR, + DOM_BOUTON_ACTIONS_FORMULAIRE, + DOM_BOUTON_CODE_PROMO, + DOM_BOUTON_SEPARATION_ADRESSES, + DOM_CHAMP_CODE_PROMO, + DOM_CONTENEUR_METHODES_LIVRAISON, + DOM_CONTENEUR_PANIER, + DOM_ENSEMBLE_CODE_PROMO, + DOM_ENTREES_PANIER, + DOM_FORMULAIRE_FACTURATION, + DOM_FORMULAIRE_PANIER, + DOM_INSTRUCTIONS_CLIENT, + DOM_MESSAGE_CODE_PROMO, + DOM_MESSAGE_FORMULAIRE_ADRESSES, + DOM_SOUS_TOTAL_LIVRAISON_COUT, + DOM_SOUS_TOTAL_PRODUITS, + DOM_TOTAL_PANIER, + DOM_TOTAL_REDUCTION, + DOM_TOTAL_REDUCTION_VALEUR, } from "../constantes/dom"; import { mustGetEleInDocument, recupereElementsDocumentEither } from "../lib/dom"; export const E = { - BOUTON_ACTIONS_FORMULAIRE: mustGetEleInDocument(SELECTEUR_BOUTON_ACTIONS_FORMULAIRE), - BOUTON_CODE_PROMO: mustGetEleInDocument(SELECTEUR_BOUTON_CODE_PROMO), - BOUTON_SEPARATION_ADRESSES: mustGetEleInDocument(SELECTEUR_BOUTON_SEPARATION_ADRESSES), - CHAMP_CODE_PROMO: mustGetEleInDocument(SELECTEUR_CHAMP_CODE_PROMO), - CONTENEUR_METHODES_LIVRAISON: mustGetEleInDocument(SELECTEUR_CONTENEUR_METHODES_LIVRAISON), - CONTENEUR_PANIER: mustGetEleInDocument(SELECTEUR_CONTENEUR_PANIER), - ENSEMBLE_CODE_PROMO: mustGetEleInDocument(SELECTEUR_ENSEMBLE_CODE_PROMO), + BOUTON_ACTIONS_FORMULAIRE: mustGetEleInDocument(DOM_BOUTON_ACTIONS_FORMULAIRE), + BOUTON_CODE_PROMO: mustGetEleInDocument(DOM_BOUTON_CODE_PROMO), + BOUTON_SEPARATION_ADRESSES: mustGetEleInDocument(DOM_BOUTON_SEPARATION_ADRESSES), + CHAMP_CODE_PROMO: mustGetEleInDocument(DOM_CHAMP_CODE_PROMO), + CONTENEUR_METHODES_LIVRAISON: mustGetEleInDocument(DOM_CONTENEUR_METHODES_LIVRAISON), + CONTENEUR_PANIER: mustGetEleInDocument(DOM_CONTENEUR_PANIER), + ENSEMBLE_CODE_PROMO: mustGetEleInDocument(DOM_ENSEMBLE_CODE_PROMO), ENTREES_PANIER: recupereElementsDocumentEither( - SELECTEUR_ENTREES_PANIER, + DOM_ENTREES_PANIER, ), - FORMULAIRE_FACTURATION: mustGetEleInDocument(SELECTEUR_FORMULAIRE_FACTURATION), - FORMULAIRE_PANIER: mustGetEleInDocument(SELECTEUR_FORMULAIRE_PANIER), - INSTRUCTIONS_CLIENT: mustGetEleInDocument(SELECTEUR_INSTRUCTIONS_CLIENT), - MESSAGE_ADRESSES: mustGetEleInDocument(SELECTEUR_MESSAGE_FORMULAIRE_ADRESSES), - MESSAGE_CODE_PROMO: mustGetEleInDocument(SELECTEUR_MESSAGE_CODE_PROMO), - SOUS_TOTAL_LIVRAISON_VALEUR: mustGetEleInDocument(SELECTEUR_SOUS_TOTAL_LIVRAISON_COUT), - SOUS_TOTAL_PRODUITS: mustGetEleInDocument(SELECTEUR_SOUS_TOTAL_PRODUITS), - SOUS_TOTAL_PRODUITS_VALEUR: mustGetEleInDocument(SELECTEUR_SOUS_TOTAL_PRODUITS), - SOUS_TOTAL_REDUCTION: mustGetEleInDocument(SELECTEUR_TOTAL_REDUCTION_VALEUR), - SOUS_TOTAL_REDUCTION_VALEUR: mustGetEleInDocument(SELECTEUR_TOTAL_REDUCTION_VALEUR), - TOTAL_PANIER: mustGetEleInDocument(SELECTEUR_TOTAL_PANIER), - TOTAL_PANIER_VALEUR: mustGetEleInDocument(SELECTEUR_TOTAL_PANIER), - TOTAL_REDUCTION_LIGNE: mustGetEleInDocument(SELECTEUR_TOTAL_REDUCTION), - TOTAL_REDUCTION_VALEUR: mustGetEleInDocument(SELECTEUR_TOTAL_REDUCTION_VALEUR), + FORMULAIRE_FACTURATION: mustGetEleInDocument(DOM_FORMULAIRE_FACTURATION), + FORMULAIRE_PANIER: mustGetEleInDocument(DOM_FORMULAIRE_PANIER), + INSTRUCTIONS_CLIENT: mustGetEleInDocument(DOM_INSTRUCTIONS_CLIENT), + MESSAGE_ADRESSES: mustGetEleInDocument(DOM_MESSAGE_FORMULAIRE_ADRESSES), + MESSAGE_CODE_PROMO: mustGetEleInDocument(DOM_MESSAGE_CODE_PROMO), + SOUS_TOTAL_LIVRAISON_VALEUR: mustGetEleInDocument(DOM_SOUS_TOTAL_LIVRAISON_COUT), + SOUS_TOTAL_PRODUITS: mustGetEleInDocument(DOM_SOUS_TOTAL_PRODUITS), + SOUS_TOTAL_PRODUITS_VALEUR: mustGetEleInDocument(DOM_SOUS_TOTAL_PRODUITS), + SOUS_TOTAL_REDUCTION: mustGetEleInDocument(DOM_TOTAL_REDUCTION_VALEUR), + SOUS_TOTAL_REDUCTION_VALEUR: mustGetEleInDocument(DOM_TOTAL_REDUCTION_VALEUR), + TOTAL_PANIER: mustGetEleInDocument(DOM_TOTAL_PANIER), + TOTAL_PANIER_VALEUR: mustGetEleInDocument(DOM_TOTAL_PANIER), + TOTAL_REDUCTION_LIGNE: mustGetEleInDocument(DOM_TOTAL_REDUCTION), + TOTAL_REDUCTION_VALEUR: mustGetEleInDocument(DOM_TOTAL_REDUCTION_VALEUR), }; diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-evenement.ts b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-evenement.ts index 3dfb21fa..8368f27c 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-evenement.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-evenement.ts @@ -7,7 +7,7 @@ import { ADRESSES_MAJ, CODE_PROMO_MAJ, SHIPPING_RATES_UPDATED, TOTALS_UPDATED } import { reporteEtJournaliseErreur } from "../lib/erreurs"; import { formateEnEuros } from "../lib/nombres"; import { eitherSetSessionStorage } from "../lib/session-storage"; -import { logger } from "../logging"; +import { logger } from "../journalisation.ts"; import { E } from "./scripts-page-panier-elements"; import { generateShippingRatesHTML } from "./scripts-page-panier-methodes-livraison"; diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-methodes-livraison.ts b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-methodes-livraison.ts index 1e1fb02b..eeaa12bb 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-methodes-livraison.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-methodes-livraison.ts @@ -13,7 +13,7 @@ import { formateEnEuros } from "../lib/nombres"; import { find } from "../lib/safe-arrays"; import { WCStoreCartTotalsSchema } from "../lib/schemas/api/cart"; import { getSessionStorageByKey } from "../lib/session-storage"; -import { logger } from "../logging"; +import { logger } from "../journalisation.ts"; import { E } from "./scripts-page-panier-elements"; import { getShippingRatesLS } from "./scripts-page-panier-local-storage"; diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-panneau-produits.ts b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-panneau-produits.ts index fca9481d..48220373 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-panneau-produits.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-panneau-produits.ts @@ -16,10 +16,10 @@ import { ROUTE_API_MAJ_ARTICLE_PANIER, ROUTE_API_RETIRE_ARTICLE_PANIER } from ". import { ATTRIBUT_CLE_PANIER, ATTRIBUT_DESACTIVE, - SELECTEUR_BOUTON_ADDITION_QUANTITE, - SELECTEUR_BOUTON_SOUSTRACTION_QUANTITE, - SELECTEUR_BOUTON_SUPPRESSION_PANIER, - SELECTEUR_CHAMP_QUANTITE_LIGNE_PANIER, + DOM_BOUTON_ADDITION_QUANTITE, + DOM_BOUTON_SOUSTRACTION_QUANTITE, + DOM_BOUTON_SUPPRESSION_PANIER, + DOM_CHAMP_QUANTITE_LIGNE_PANIER, } from "../constantes/dom"; import { NOM_CANAL_REVALIDATION_LIVRAISON } from "../constantes/messages"; import { mustGetEleInParent } from "../lib/dom"; @@ -51,10 +51,10 @@ type CartEntryInteractiveElements = { const getCartEntryInteractiveEles = (entree: HTMLElement): CartEntryInteractiveElements => { const mustGetEle = mustGetEleInParent(entree); return { - additionButton: mustGetEle(SELECTEUR_BOUTON_ADDITION_QUANTITE), - deletionButton: mustGetEle(SELECTEUR_BOUTON_SUPPRESSION_PANIER), - quantityInput: mustGetEle(SELECTEUR_CHAMP_QUANTITE_LIGNE_PANIER), - substractionButton: mustGetEle(SELECTEUR_BOUTON_SOUSTRACTION_QUANTITE), + additionButton: mustGetEle(DOM_BOUTON_ADDITION_QUANTITE), + deletionButton: mustGetEle(DOM_BOUTON_SUPPRESSION_PANIER), + quantityInput: mustGetEle(DOM_CHAMP_QUANTITE_LIGNE_PANIER), + substractionButton: mustGetEle(DOM_BOUTON_SOUSTRACTION_QUANTITE), }; }; @@ -102,7 +102,7 @@ export const initialiseActionsEntreesPanier = (): void => { .with(P.nullish, () => console.error(event.target)) // Clic sur le Bouton d'addition .when( - (target: EventTarget) => (target as HTMLElement).matches(SELECTEUR_BOUTON_ADDITION_QUANTITE), + (target: EventTarget) => (target as HTMLElement).matches(DOM_BOUTON_ADDITION_QUANTITE), (): void => { void EitherAsync .liftEither( @@ -174,7 +174,7 @@ export const initialiseActionsEntreesPanier = (): void => { ) // Bouton de soustraction .when( - (cible: EventTarget) => (cible as HTMLElement).matches(SELECTEUR_BOUTON_SOUSTRACTION_QUANTITE), + (cible: EventTarget) => (cible as HTMLElement).matches(DOM_BOUTON_SOUSTRACTION_QUANTITE), (): void => { Maybe // Nécessaire pour que l'on ait une valeur à incrémenter @@ -258,7 +258,7 @@ export const initialiseActionsEntreesPanier = (): void => { ) // Bouton de suppression .when( - (cible: EventTarget) => (cible as HTMLElement).matches(SELECTEUR_BOUTON_SUPPRESSION_PANIER), + (cible: EventTarget) => (cible as HTMLElement).matches(DOM_BOUTON_SUPPRESSION_PANIER), (): void => { Maybe // TODO: Pourquoi ? diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-panier.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-panier.ts index edc57dd6..83b5748c 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-panier.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-panier.ts @@ -4,7 +4,7 @@ import type { MessageMajBoutonPanier } from "./lib/types/messages"; -import { ATTRIBUT_CONTIENT_ARTICLES, SELECTEUR_BOUTON_PANIER } from "./constantes/dom.ts"; +import { ATTRIBUT_CONTIENT_ARTICLES, DOM_BOUTON_PANIER } from "./constantes/dom.ts"; import { NOM_CANAL_BOUTON_PANIER } from "./constantes/messages.ts"; import { mustGetEleInDocument } from "./lib/dom.ts"; import { valideMessageMajBoutonPanier } from "./lib/messages.ts"; @@ -16,7 +16,7 @@ import { valideMessageMajBoutonPanier } from "./lib/messages.ts"; */ const initialiseBoutonPanier = (): void => { /** Le « Bouton » vers le Panier avec un indicateur de la quantité de Produits ajoutés. */ - const BOUTON_PANIER: HTMLAnchorElement = mustGetEleInDocument(SELECTEUR_BOUTON_PANIER); + const BOUTON_PANIER: HTMLAnchorElement = mustGetEleInDocument(DOM_BOUTON_PANIER); const CANAL_BOUTON_PANIER: BroadcastChannel = new BroadcastChannel(NOM_CANAL_BOUTON_PANIER); CANAL_BOUTON_PANIER.onmessage = (evenementMessage: MessageEvent): void => { diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-retour-sommet.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-retour-sommet.ts index c04bae8c..cf4c86a5 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-retour-sommet.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-bouton-retour-sommet.ts @@ -4,16 +4,11 @@ import { pipe } from "@mobily/ts-belt"; import { head as arrayHead } from "@mobily/ts-belt/Array"; import { tap as optionTap } from "@mobily/ts-belt/Option"; -import { - ATTRIBUT_ACTIF, - ATTRIBUT_ARIA_HIDDEN, - ATTRIBUT_TABINDEX, - SELECTEUR_BOUTON_MENU_MOBILE, -} from "./constantes/dom"; +import { ATTRIBUT_ACTIF, ATTRIBUT_ARIA_HIDDEN, ATTRIBUT_TABINDEX, DOM_BOUTON_MENU_MOBILE } from "./constantes/dom"; import { mustGetEleInDocument } from "./lib/dom"; const E = { - BOUTON_MENU_MOBILE: mustGetEleInDocument(SELECTEUR_BOUTON_MENU_MOBILE), + BOUTON_MENU_MOBILE: mustGetEleInDocument(DOM_BOUTON_MENU_MOBILE), BOUTON_RETOUR_SOMMET: mustGetEleInDocument("#bouton-retour-haut"), CORPS_HTML: mustGetEleInDocument("body"), IMAGE_BOUTON: mustGetEleInDocument("#bouton-retour-haut img"), diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-categories.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-categories.ts index 01f6e2ff..5935e8cd 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-categories.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-categories.ts @@ -3,13 +3,13 @@ import { A } from "@mobily/ts-belt"; import { match } from "ts-pattern"; -import { SELECTEUR_ENTREE_MENU_CATEGORIES_PRODUITS, SELECTEUR_MENU_CATEGORIES_PRODUITS } from "./constantes/dom.ts"; +import { DOM_ENTREE_MENU_CATEGORIES_PRODUITS, DOM_MENU_CATEGORIES_PRODUITS } from "./constantes/dom.ts"; import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts"; document.addEventListener("DOMContentLoaded", (): void => { - const MENU_CATEGORIES_PRODUITS: HTMLElement = mustGetEleInDocument(SELECTEUR_MENU_CATEGORIES_PRODUITS); + const MENU_CATEGORIES_PRODUITS: HTMLElement = mustGetEleInDocument(DOM_MENU_CATEGORIES_PRODUITS); const ENTREES_MENU_CATEGORIES_PRODUITS: Array = mustGetElesInDocument( - SELECTEUR_ENTREE_MENU_CATEGORIES_PRODUITS, + DOM_ENTREE_MENU_CATEGORIES_PRODUITS, ); A.forEachWithIndex( diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-mobile.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-mobile.ts index 17c4bf1f..db42994d 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-mobile.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-menu-mobile.ts @@ -5,14 +5,14 @@ import { A, O, pipe } from "@mobily/ts-belt"; import A11yDialog from "a11y-dialog"; -import { ATTRIBUT_MENU_MOBILE_ACTIVE, SELECTEUR_BOUTON_MENU_MOBILE, SELECTEUR_MENU_MOBILE } from "./constantes/dom.ts"; +import { ATTRIBUT_MENU_MOBILE_ACTIVE, DOM_BOUTON_MENU_MOBILE, DOM_MENU_MOBILE } from "./constantes/dom.ts"; import { mustGetEleInDocument } from "./lib/dom.ts"; // Éléments d'intérêt const E = { - BOUTON_MENU_MOBILE: mustGetEleInDocument(SELECTEUR_BOUTON_MENU_MOBILE), + BOUTON_MENU_MOBILE: mustGetEleInDocument(DOM_BOUTON_MENU_MOBILE), CORPS_HTML: mustGetEleInDocument("body"), - MENU_MOBILE: mustGetEleInDocument(SELECTEUR_MENU_MOBILE), + MENU_MOBILE: mustGetEleInDocument(DOM_MENU_MOBILE), }; const initialiseBoutonMenuMobile = (): void => { diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-a-propos.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-a-propos.ts index cc1554e3..885d0c53 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-a-propos.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-a-propos.ts @@ -9,20 +9,20 @@ import { ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE, CLASS_BOUTON_FERMETURE_BOITE_TEXTE, CLASS_EPINGLE, - SELECTEUR_BOITE_TEXTE, - SELECTEUR_CONTENEUR_STORYTELLING_A_PROPOS, - SELECTEUR_EPINGLE, + DOM_BOITE_TEXTE, + DOM_CONTENEUR_STORYTELLING_A_PROPOS, + DOM_EPINGLE, } from "./constantes/dom.ts"; import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts"; /** Le Conteneur des images du storytelling. */ const CONTENEUR_STORYTELLING = mustGetEleInDocument( - SELECTEUR_CONTENEUR_STORYTELLING_A_PROPOS, + DOM_CONTENEUR_STORYTELLING_A_PROPOS, ); /** */ -const EPINGLES = mustGetElesInDocument(SELECTEUR_EPINGLE); +const EPINGLES = mustGetElesInDocument(DOM_EPINGLE); /** */ -const BOITES_TEXTE = mustGetElesInDocument(SELECTEUR_BOITE_TEXTE); +const BOITES_TEXTE = mustGetElesInDocument(DOM_BOITE_TEXTE); /** */ const ENSEMBLES_EPINGLES_BOITES_TEXTE = new Map(); A.forEachWithIndex(EPINGLES, (index, epingle) => { diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts index cf89d4a8..d92ad51f 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts @@ -3,78 +3,131 @@ import { A, O, pipe } from "@mobily/ts-belt"; import { - ATTRIBUT_ARIA_HIDDEN, - ATTRIBUT_CACHE, - SELECTEUR_CONTENEUR_STORYTELLING, - SELECTEUR_IMAGES_STORYTELLING, + ATTRIBUT_CACHÉ, + ATTRIBUT_HIDDEN, + DOM_CONTENEUR_ANIMATION, + DOM_CONTENEUR_STORYTELLING, + DOM_GARDE_FOU_JS, + DOM_IMAGES_STORYTELLING, } from "./constantes/dom.ts"; +import { nuLogger } from "./journalisation.ts"; import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts"; import { estEntreDeuxNombres } from "./lib/nombres.ts"; -const initialiseScrollStorytelling = (): void => { - const E = { - /** Le conteneur des images du storytelling. */ - CONTENEUR_STORYTELLING: mustGetEleInDocument(".storytelling__conteneur"), - /** Les images du storytelling. */ - IMAGES_STORYTELLING: mustGetElesInDocument(SELECTEUR_IMAGES_STORYTELLING), - /** Le bloc contenant le storytelling. */ - STORYTELLING: mustGetEleInDocument(SELECTEUR_CONTENEUR_STORYTELLING), - }; +const E = { + /** Le bloc contenant l'animation. */ + CONTENEUR_ANIMATION: mustGetEleInDocument(DOM_CONTENEUR_ANIMATION), + /** Le conteneur des images du storytelling. */ + CONTENEUR_STORYTELLING: mustGetEleInDocument(".storytelling__conteneur"), + /** Les images du storytelling. */ + IMAGES_STORYTELLING: mustGetElesInDocument(DOM_IMAGES_STORYTELLING), + /** Le bloc contenant le storytelling. */ + STORYTELLING: mustGetEleInDocument(DOM_CONTENEUR_STORYTELLING), +}; +/** + * Retire la classe garde-fou `.js` cachant les éléments nécessitant JavaScript pour s'afficher/fonctionner correctement. + */ +const retireClasseGardeFouJs = (): void => { + E.CONTENEUR_ANIMATION.classList.remove(DOM_GARDE_FOU_JS); +}; + +const initDefilementStorytelling = (): void => { /** La hauteur d'une image du storytelling. */ - let hauteurImage = E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0; + let dimensionsImage = { + height: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0, + width: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().width ?? 0, + }; /** La position du défilement (en pixels) du Conteneur des images du storytelling. */ let positionDefilementConteneur = 0; + nuLogger.debug`initStorytellingScroll | dimensionsImages ${dimensionsImage.height}`; + /** - * TODO + * Bascule la visibilité d'une image en * @param image - * @param visible + * @param estVisible */ - const changeVisibiliteImage = (image: HTMLDivElement, visible: boolean) => { - image.toggleAttribute(ATTRIBUT_CACHE, visible); - image.toggleAttribute(ATTRIBUT_ARIA_HIDDEN, visible); + const basculeVisibilitéImage = (image: HTMLDivElement, estVisible: boolean) => { + image.toggleAttribute(ATTRIBUT_CACHÉ, estVisible); }; /** * TODO */ - const majDimensions = (): void => { - hauteurImage = pipe( - A.getBy(E.IMAGES_STORYTELLING, (i: HTMLDivElement) => !i.hasAttribute(ATTRIBUT_CACHE)), - O.map((i: HTMLDivElement) => i.getBoundingClientRect().height), - O.getWithDefault(0), + const majDimensionsStorytelling = (): void => { + dimensionsImage = pipe( + A.getBy(E.IMAGES_STORYTELLING, (i: HTMLDivElement) => !i.hasAttribute(ATTRIBUT_CACHÉ)), + O.map((i: HTMLDivElement) => ({ + height: i.getBoundingClientRect().height, + width: i.getBoundingClientRect().width, + })), + O.getWithDefault({ height: 0, width: 0 }), ); - E.CONTENEUR_STORYTELLING.style.minHeight = `${String(hauteurImage * E.IMAGES_STORYTELLING.length + 61)}px`; - E.CONTENEUR_STORYTELLING.style.maxHeight = `${String(hauteurImage * E.IMAGES_STORYTELLING.length + 61)}px`; + 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`; + + // Adapte la hauteur du conteneur des images pour un défilement « seamless ». + const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`; + E.CONTENEUR_STORYTELLING.style.minHeight = nouvelleHauteurMax; + E.CONTENEUR_STORYTELLING.style.maxHeight = nouvelleHauteurMax; + nuLogger.debug`majDimensions | nouvelleHauteurMax ${nouvelleHauteurMax}`; }; /** * TODO */ - const majImages = (): void => { - // Met à jour la position du défilement dans le Conteneur + const majVisibilitéImagesStorytelling = (): void => { + // Met à jour la position du défilement dans le Conteneur. positionDefilementConteneur = E.STORYTELLING.scrollTop; - // Met à jour l'attribut de visibilité des images en fonction du défilement + // Met à jour l'attribut de visibilité des images en fonction du défilement. E.IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => { - const debutYImage = hauteurImage * index; - const finYImage = hauteurImage * (index + 1); + const debutYImage = dimensionsImage.height * index; + const finYImage = dimensionsImage.height * (index + 1); - changeVisibiliteImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage)); + basculeVisibilitéImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage)); }); }; - // Initialise l'Observateur de Redimensionnement (ResizeObserver) + // Initialise l'Observateur de Redimensionnement (ResizeObserver). new ResizeObserver((): void => { - majDimensions(); - majImages(); + majDimensionsStorytelling(); + majVisibilitéImagesStorytelling(); }).observe(E.STORYTELLING); - // Initialise la mise à jour des images au défilement sur le Conteneur - E.STORYTELLING.addEventListener("scroll", (): void => majImages()); + // Initialise la mise à jour des images au défilement sur le Conteneur. + E.STORYTELLING.addEventListener("scroll", (): void => majVisibilitéImagesStorytelling()); +}; + +const initGestionAnimation = (): void => { + pipe( + A.at(E.IMAGES_STORYTELLING, 0), + O.tap(img => { + const options: IntersectionObserverInit = { + root: null, + rootMargin: "0px", + threshold: 0, + }; + const callback = (entries: Array) => { + A.forEach(entries, e => { + e.intersectionRatio === 1 + ? E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN) + : E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, ""); + + nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio === 1} | ${e}`; + }); + }; + + new IntersectionObserver(callback, options).observe(img); + }), + ); }; document.addEventListener("DOMContentLoaded", (): void => { - initialiseScrollStorytelling(); + retireClasseGardeFouJs(); + initDefilementStorytelling(); + initGestionAnimation(); }); diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts index f4764070..ec36f2c3 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts @@ -19,8 +19,8 @@ import { ATTRIBUT_HIDDEN, ATTRIBUT_ID_CATEGORIE_PRODUITS, ATTRIBUT_PAGE, - SELECTEUR_BOUTON_PLUS_PRODUITS, - SELECTEUR_GRILLE_PRODUITS, + DOM_BOUTON_PLUS_PRODUITS, + DOM_GRILLE_PRODUITS, } from "./constantes/dom.ts"; import { lanceAnimationCycleLoading } from "./lib/animations.ts"; import { html, mustGetEleInDocument } from "./lib/dom.ts"; @@ -43,8 +43,8 @@ const PRODUCTS_PER_PAGE = 12; // Éléments d'intérêt const E = { - BOUTON_PLUS_DE_PRODUITS: mustGetEleInDocument(SELECTEUR_BOUTON_PLUS_PRODUITS), - GRILLE_PRODUITS: mustGetEleInDocument(SELECTEUR_GRILLE_PRODUITS), + BOUTON_PLUS_DE_PRODUITS: mustGetEleInDocument(DOM_BOUTON_PLUS_PRODUITS), + GRILLE_PRODUITS: mustGetEleInDocument(DOM_GRILLE_PRODUITS), }; /** diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-panier.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-panier.ts index 69a1efb2..af0007ef 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-panier.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-panier.ts @@ -13,11 +13,11 @@ import { ATTRIBUT_CONTIENT_ARTICLES, ATTRIBUT_DESACTIVE, ATTRIBUT_HIDDEN, - SELECTEUR_BOUTON_ADDITION_QUANTITE, - SELECTEUR_BOUTON_SOUSTRACTION_QUANTITE, - SELECTEUR_BOUTON_SUPPRESSION_PANIER, - SELECTEUR_CHAMP_QUANTITE_LIGNE_PANIER, - SELECTEUR_PRIX_LIGNE_PANIER, + DOM_BOUTON_ADDITION_QUANTITE, + DOM_BOUTON_SOUSTRACTION_QUANTITE, + DOM_BOUTON_SUPPRESSION_PANIER, + DOM_CHAMP_QUANTITE_LIGNE_PANIER, + DOM_PRIX_LIGNE_PANIER, } from "./constantes/dom.ts"; import { NOM_CANAL_BOUTON_PANIER, NOM_CANAL_CONTENU_PANIER } from "./constantes/messages.ts"; import { getDOMElementsWithSelector, recupereElementAvecSelecteur, recupereElementOuLeve } from "./lib/dom.ts"; @@ -73,10 +73,10 @@ const majEtatsActivationBoutons = (entrees: Array): void => const recupereElementDansEntree = recupereElementDansEntreePanierOuLeve(entree); const elements: ElementsEntreePanier = { - boutonAddition: recupereElementDansEntree(SELECTEUR_BOUTON_ADDITION_QUANTITE), - boutonSoustraction: recupereElementDansEntree(SELECTEUR_BOUTON_SOUSTRACTION_QUANTITE), - boutonSuppression: recupereElementDansEntree(SELECTEUR_BOUTON_SUPPRESSION_PANIER), - champQuantite: recupereElementDansEntree(SELECTEUR_CHAMP_QUANTITE_LIGNE_PANIER), + boutonAddition: recupereElementDansEntree(DOM_BOUTON_ADDITION_QUANTITE), + boutonSoustraction: recupereElementDansEntree(DOM_BOUTON_SOUSTRACTION_QUANTITE), + boutonSuppression: recupereElementDansEntree(DOM_BOUTON_SUPPRESSION_PANIER), + champQuantite: recupereElementDansEntree(DOM_CHAMP_QUANTITE_LIGNE_PANIER), }; Number(elements.champQuantite?.value) === 1 @@ -115,9 +115,9 @@ const initialiseMajContenuPanier = (): void => { const recupereElementDansEntree = recupereElementDansEntreePanierOuLeve(entree); // Récupère les Éléments à mettre à jour - const prixLigne = recupereElementDansEntree(SELECTEUR_PRIX_LIGNE_PANIER); + const prixLigne = recupereElementDansEntree(DOM_PRIX_LIGNE_PANIER); const champQuantite = recupereElementDansEntree( - SELECTEUR_CHAMP_QUANTITE_LIGNE_PANIER, + DOM_CHAMP_QUANTITE_LIGNE_PANIER, ); // Met à jour les valeurs diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts index 9cea06b9..54a938b5 100755 --- a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts @@ -20,11 +20,11 @@ import { ATTRIBUT_DESACTIVE, ATTRIBUT_HIDDEN, ATTRIBUT_PRIX, - SELECTEUR_BOUTON_AJOUT_PANIER, - SELECTEUR_BOUTONS_ACCORDEON, - SELECTEUR_CONTENUS_ACCORDEON, - SELECTEUR_PRIX_PRODUIT, - SELECTEUR_SELECTEUR_QUANTITE, + DOM_BOUTON_AJOUT_PANIER, + DOM_BOUTONS_ACCORDEON, + DOM_CONTENUS_ACCORDEON, + DOM_PRIX_PRODUIT, + DOM_DOM_QUANTITE, } from "./constantes/dom.ts"; import { lanceAnimationCycleLoading } from "./lib/animations.ts"; import { mustGetEleInDocument, mustGetElesInDocument, recupereElementDocumentEither } from "./lib/dom.ts"; @@ -61,11 +61,11 @@ const deplieToutesSections = (ensembleLiensContenus: Array) // Éléments d'intérêt const E = { - BOUTON_AJOUT_PANIER: mustGetEleInDocument(SELECTEUR_BOUTON_AJOUT_PANIER), - BOUTONS_ACCORDEON: mustGetElesInDocument(SELECTEUR_BOUTONS_ACCORDEON), - CONTENUS_ACCORDEON: mustGetElesInDocument(SELECTEUR_CONTENUS_ACCORDEON), - PRIX_PRODUIT: mustGetEleInDocument(SELECTEUR_PRIX_PRODUIT), - SELECTEUR_VARIATION: recupereElementDocumentEither(SELECTEUR_SELECTEUR_QUANTITE), + BOUTON_AJOUT_PANIER: mustGetEleInDocument(DOM_BOUTON_AJOUT_PANIER), + BOUTONS_ACCORDEON: mustGetElesInDocument(DOM_BOUTONS_ACCORDEON), + CONTENUS_ACCORDEON: mustGetElesInDocument(DOM_CONTENUS_ACCORDEON), + PRIX_PRODUIT: mustGetEleInDocument(DOM_PRIX_PRODUIT), + DOM_VARIATION: recupereElementDocumentEither(DOM_DOM_QUANTITE), }; const gereAccordeonDetailsProduit = (): void => { @@ -99,7 +99,7 @@ const gereAccordeonDetailsProduit = (): void => { }); // Ajoute des Écouteurs d'Événements - E.SELECTEUR_VARIATION.ifRight((selecteur): void => + E.DOM_VARIATION.ifRight((selecteur): void => selecteur.addEventListener("change", (evenement: Event): void => { const cibleSelecteur: Maybe = Maybe .fromNullable(evenement.target) @@ -125,7 +125,7 @@ const gereAccordeonDetailsProduit = (): void => { const ajouteProduitAuPanier = (): void => { // Construis les arguments de la requête au backend const argsRequete: WCStoreCartAddItemArgs = { - id: E.SELECTEUR_VARIATION + id: E.DOM_VARIATION .map((selecteur: HTMLSelectElement): number => Number(selecteur.value)) // Récupère l'ID du Produit de la Page pour les Produits simples .orDefault(ETATS_PAGE.idProduit), diff --git a/web/app/themes/haiku-atelier-2024/views/accueil.twig b/web/app/themes/haiku-atelier-2024/views/accueil.twig index 32242e8d..68e19c9e 100755 --- a/web/app/themes/haiku-atelier-2024/views/accueil.twig +++ b/web/app/themes/haiku-atelier-2024/views/accueil.twig @@ -2,21 +2,117 @@ {% import "macros/images.twig" as images %} {% block contenu %} -
+
-
-
- {{ - images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll0", "", 903, 1080, "image-scroll0") - }} +