2024-08-13

.prettierignore

@@ -1,20 +1,25 @@
+# Tout ce qui est traité par dprint
+*.css
+*.html
+*.js
+*.json
+*.jsonc
+*.md
+*.scss
+*.ts
+*.twig
+*.yml
+*.yaml
+
 # Tout sauf le thème
+.ddev
 web/app/*
 !web/app/themes
+web/app/themes/haiku-atelier-2024/assets
 web/app/languages
 web/app/plugins
 web/vendor
 
-# Tout .ddev sauf la configuration
-.ddev/*
-!.ddev/config.yaml
-
-# Composer
+# Dépendances
 composer.lock
-
-# pnpm
 pnpm-lock.yaml
-
-# Fichiers minifiés
-*.min.js
-*.min.css

biome.jsonc

@@ -1,7 +1,7 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
   "files": {
-    "ignore": ["*.min.js", "vendor", "web/wp"],
+    "ignore": ["*.min.js", "vendor", "web/app/plugins", "web/app/themes/haiku-atelier-2024/assets", "web/wp"],
     "ignoreUnknown": true,
   },
   "formatter": {

composer.lock

@@ -1725,12 +1725,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/Roave/SecurityAdvisories.git",
-                "reference": "fe2777b484817ebbbe50ad685af7525560198c59"
+                "reference": "a143e7459e3961149eb6a8eecc98dfa19799d02a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/fe2777b484817ebbbe50ad685af7525560198c59",
-                "reference": "fe2777b484817ebbbe50ad685af7525560198c59",
+                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/a143e7459e3961149eb6a8eecc98dfa19799d02a",
+                "reference": "a143e7459e3961149eb6a8eecc98dfa19799d02a",
                 "shasum": ""
             },
             "conflict": {
@@ -2219,6 +2219,7 @@
                 "pubnub/pubnub": "<6.1",
                 "pusher/pusher-php-server": "<2.2.1",
                 "pwweb/laravel-core": "<=0.3.6.0-beta",
+                "pxlrbt/filament-excel": "<2.3.3",
                 "pyrocms/pyrocms": "<=3.9.1",
                 "qcubed/qcubed": "<=3.1.1",
                 "quickapps/cms": "<=2.0.0.0-beta2",
@@ -2532,7 +2533,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-08-08T21:04:55+00:00"
+            "time": "2024-08-12T19:04:53+00:00"
         },
         {
             "name": "squizlabs/php_codesniffer",

dprint.json

@@ -1,5 +1,12 @@
 {
-  "excludes": ["**/node_modules", "**/pnpm-lock.yaml", "web/app/languages", "web/app/plugins", "web/vendor"],
+  "excludes": [
+    "**/node_modules",
+    "**/pnpm-lock.yaml",
+    "web/app/languages",
+    "web/app/plugins",
+    "web/app/themes/haiku-atelier-2024/assets",
+    "web/vendor"
+  ],
   "extends": "/home/gcch/.dprint.jsonc",
   "exec": {
     "cacheKey": 1,
@@ -20,7 +27,7 @@
     "https://plugins.dprint.dev/json-0.19.3.wasm",
     "https://plugins.dprint.dev/markdown-0.17.2.wasm",
     "https://plugins.dprint.dev/toml-0.6.2.wasm",
-    "https://plugins.dprint.dev/g-plane/malva-v0.8.0.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.9.0.wasm",
     "https://plugins.dprint.dev/g-plane/markup_fmt-v0.11.0.wasm",
     "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.4.0.wasm",
     "https://plugins.dprint.dev/exec-0.5.0.json@8d9972eee71fa1590e04873540421f3eda7674d0f1aae3d7c788615e7b7413d0"

justfile

@@ -25,9 +25,10 @@ update:
 # Formatte avec Prettier et dprint
 format:
     @echo "Formatage de l'ensemble du code avec Prettier et dprint."
-    pnpm prettier --cache \
+    pnpm prettier \
+        --cache \
         --cache-location "{{ cacheFolder }}/{{ prettierCacheFile }}" \
-        -u \
+        --ignore-unknown \
         --write \
         .
     dprint fmt
@@ -50,3 +51,12 @@ watch-css:
         --update \
         --watch \
         "web/app/themes/haiku-atelier-2024/src/sass":"web/app/themes/haiku-atelier-2024/assets/css"
+
+# Compile TypeScript en JavaScript
+build-js:
+    swc web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts \
+    -o web/app/themes/haiku-atelier-2024/assets/js/scripts-page-produit.js
+
+# Compile TypeScript à chaque changement de fichier
+watch-js:
+    watchexec -w web/app/themes/haiku-atelier-2024/src/scripts just build-js

package.json

@@ -16,9 +16,11 @@
     "@prettier/plugin-php": "^0.22.2",
     "@prettier/plugin-xml": "^3.4.1",
     "@swc/cli": "^0.4.0",
-    "@swc/core": "^1.7.9",
+    "@swc/core": "^1.7.10",
     "@zackad/prettier-plugin-twig": "^0.8.0",
     "browserslist": "^4.23.3",
+    "fdir": "^6.2.0",
+    "picomatch": "^4.0.2",
     "prettier": "^3.3.3",
     "prettier-plugin-pkg": "^0.18.1",
     "prettier-plugin-sh": "^0.14.0",
@@ -33,7 +35,8 @@
     "vite": "^5.4.0"
   },
   "browserslist": [
-    "last 5 major version",
+    "defaults",
+    "last 3 years",
     "not dead"
   ]
 }

prettier.config.js

@@ -21,18 +21,6 @@ export default {
         trailingCommaPHP: true,
       },
     },
-    // Pour les modèles Twig
-    {
-      files: ["*.twig"],
-      options: {
-        plugins: ["@zackad/prettier-plugin-twig"],
-        twigAlwaysBreakObjects: false,
-        twigFollowOfficialCodingStandards: true,
-        twigOutputEndblockName: true,
-        twigPrintWidth: 120,
-        twigSingleQuote: false,
-      },
-    },
     // Pour les fichiers XML
     {
       files: ["*.xml"],

stylelint.config.js

@@ -2,7 +2,7 @@
 
 import { propertyGroups } from "stylelint-config-clean-order";
 
-// TODO: Typer tout ça
+/** @type {Array<StylelintConfigCleanOrderPropertyGroup>} */
 const propertiesOrder = propertyGroups.map(properties => ({
   emptyLineBefore: "never",
   noEmptyLineBetween: true,

stylelint.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Définition d'un groupe de Propriétés _CSS_ du plugin `stylelint-config-clean-order` pour
+ * _Stylelint_.
+ */
+type StylelintConfigCleanOrderPropertyGroup = {
+  emptyLineBefore: "never" | "threshold";
+  noEmptyLineBetween: boolean;
+  properties: string | Array<string>;
+};

tsconfig.json

@@ -1,8 +1,26 @@
 {
   "compilerOptions": {
+    "allowArbitraryExtensions": true,
     "allowJs": true,
+    "allowSyntheticDefaultImports": true,
     "checkJs": true,
+    "downlevelIteration": false,
     "isolatedModules": true,
-    "strict": true
-  }
+    "lib": ["DOM", "ES2022"],
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "moduleResolution": "NodeNext",
+    "noEmit": true,
+    "noImplicitAny": false,
+    "noImplicitReturns": false,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedParameters": true,
+    "strict": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "target": "ES2022"
+  },
+  "exclude": ["vendor", "web/app/plugins", "web/wp"],
+  "include": ["web/app/themes/haiku-atelier-2024/src"]
 }

vite.config.js

@@ -1,16 +1,36 @@
+import { fdir } from "fdir";
+import { resolve } from "node:path";
 import { defineConfig } from "vite";
 
+const SRC_TYPESCRIPT_PATHS = new fdir()
+  .withBasePath()
+  .glob("**/*.ts")
+  .crawl("web/app/themes/haiku-atelier-2024/src/scripts")
+  .withPromise();
+
 export default defineConfig({
+  base: "",
   build: {
+    assetsDir: ".",
+    emptyOutDir: true,
     /* Génère un fichier manifeste dans outDir */
     manifest: true,
-    rollupOptions: {
-      input: import.meta.resolve("./web/app/themes/haiku-atelier-2024/src/main.js"),
-    },
-    outDir: import.meta.resolve("./web/app/themes/haiku-atelier-2024/assets/js"),
-    emptyOutDir: true,
-    target: "es2023",
     minify: true,
+    outDir: resolve("./web/app/themes/haiku-atelier-2024/assets/js"),
+    rollupOptions: {
+      input: await SRC_TYPESCRIPT_PATHS,
+      output: {
+        assetFileNames: "[name][extname]",
+        chunkFileNames: "[name][extname]",
+        entryFileNames: "[name].js",
+        compact: true,
+        minifyInternalExports: true,
+        validate: true,
+      },
+      treeshake: "recommended",
+    },
+    sourcemap: true,
+    target: "es2023",
     write: true,
   },
 });

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

@@ -4,90 +4,70 @@
   font-weight: 100;
   font-style: normal;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 100;
   font-style: italic;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 300;
   font-style: normal;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 300;
   font-style: italic;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 400;
   font-style: italic;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 700;
   font-style: normal;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 700;
   font-style: italic;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 900;
   font-style: normal;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 900;
   font-style: italic;
   font-display: swap;
-  src:
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Myriad;
@@ -95,9 +75,7 @@
   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");
+  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;
@@ -105,9 +83,7 @@
   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");
+  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 {
   /* Couleurs */
@@ -118,6 +94,14 @@
   /* Polices */
   --police-lato: "Lato", sans-serif;
   --police-myriad: "Myriad", sans-serif;
+  /* Dimensions */
+  --en-tete-hauteur: 60px;
+  --menu-categories-produits-hauteur: 54.39px;
+  /* Espacements */
+  --espace-xs: 0.25rem;
+  --espace-s: 0.5rem;
+  --espace-m: 1rem;
+  --espace-l: 2rem;
 }
 
 /**
@@ -139,7 +123,9 @@ html {
  * 2. Pas de marges par défaut.
  * 3. Hérite par défaut des styles de texte et de couleur.
  */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 2 */
@@ -159,24 +145,59 @@ body {
 /**
  * Force l'héritage des styles pour ces éléments
  */
-button, input, select, textarea {
+button,
+input,
+select,
+textarea {
   font: inherit;
 }
 
+/**
+ * Change la couleur d'arrière-plan à la sélection du texte.
+ */
+*::selection {
+  background: var(--couleur-jaune);
+}
+
 body {
-  font: 1rem/1.4 var(--police-myriad) 0.5px;
+  font: 1rem/1.4 Myriad;
   color: var(--couleur-noir);
+  letter-spacing: 0.5px;
+}
+
+/**
+ * Réinitialisation des styles des <button>.
+ */
+button {
+  all: initial;
+  cursor: pointer;
+  font: inherit;
+  text-align: center;
+}
+button.bouton-case-pleine {
+  width: 100%;
+  height: 100%;
+}
+button[disabled] {
+  cursor: not-allowed;
 }
 
 /**
  * 1. Facilite l'usages des images.
- * 2. Empêche les images de dépasser leur conteneur.
+ * 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.
+ * 3. Arrière-plan jaune en attendant le chargement de l'image.
  */
-img, picture {
+img,
+picture {
   display: block; /* 1 */
   max-width: 100%; /* 2 */
 }
 
+img {
+  object-fit: cover; /* 2 */
+  background: var(--couleur-jaune); /* 3 */
+}
+
 /**
  * 1. Change la « bordure » de base.
  * 2. Ajoute un contour, qui sera colorisé au focus.
@@ -190,13 +211,7 @@ a {
   text-decoration-skip-ink: auto; /* 1 */
   outline: 1px solid transparent; /* 2 */
   outline-offset: initial; /* 2 */
-  transition:
-    0.2s color,
-    0.2s font-weight,
-    0.2s background,
-    0.2s outline-color,
-    0.2s border-color,
-    0.2s text-decoration-color; /* 3 */
+  transition: 0.2s color, 0.2s font-weight, 0.2s background, 0.2s outline-color, 0.2s border-color, 0.2s text-decoration-color; /* 3 */
   text-decoration-skip: edges; /* 1 */
   /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
   /**
@@ -208,10 +223,11 @@ a:focus, a:focus-visible {
 }
 a.lien-bouton {
   /* Marges */
-  --lien-bouton-marges-internes-bloc: 0.33rem;
+  --lien-bouton-marges-internes-bloc: var(--espace-xs);
+  --lien-bouton-marges-internes-ligne: var(--espace-m);
   /* Couleurs */
   --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
-  padding: var(--lien-bouton-marges-internes-bloc) 0;
+  padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
   border: 1px solid var(--couleur-noir);
   /* Change la couleur de l'arrière-plan pour marquer le focus. */
   /* Change la couleur de la bordure pour qu'elle se fonde dans l'arrière-plan, donnant l'illusion que la bordure se déplace vers l'extérieur. */
@@ -228,6 +244,11 @@ a.lien-bouton:active {
     background: var(--lien-bouton-arriere-plan-couleur-survol);
   }
 }
+@media (hover: hover) {
+  a:not([class]):hover {
+    text-decoration-color: var(--couleur-noir);
+  }
+}
 
 /**
  * Réinitialise les styles des listes non ordonnées.
@@ -253,30 +274,37 @@ ul.avec-puce-cercle {
 }
 ul.avec-puce-cercle a {
   padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
-  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"); /* 2 */
+  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"); /* 2 */
 }
 
 #en-tete {
   /* Marges */
-  --en-tete-marges-internes-ligne: 2rem;
-  --en-tete-marges-internes-bloc: 1rem;
+  --en-tete-marges-internes-ligne: var(--espace-l);
+  --en-tete-marges-internes-bloc: var(--espace-m);
   /* Dimensions */
-  --en-tete-hauteur: 80px;
-  --en-tete-logo-longueur: 120px;
+  --en-tete-section-hauteur: var(--en-tete-hauteur);
+  --en-tete-logo-longueur: 80px;
+  position: fixed;
+  z-index: 20;
+  top: 0;
   display: flex;
   flex-flow: row nowrap;
   place-items: center;
   justify-content: space-between;
+  min-width: 100vw;
+  max-width: 100vw;
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
   background: var(--couleur-gris);
-  border: 1px solid var(--couleur-noir);
   /* TODO: Déplacer au sein d'un Composant ? */
 }
 #en-tete .logo {
   width: var(--en-tete-logo-longueur);
 }
+#en-tete .logo picture,
+#en-tete .logo img {
+  background: transparent;
+}
 #en-tete .menu-navigation {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -297,16 +325,16 @@ ul.avec-puce-cercle a {
   display: flex;
   grid-column: 2;
   flex-flow: row nowrap;
-  gap: max(2rem, 5vw);
+  gap: var(--espace-m);
   justify-content: space-between;
 }
 #en-tete .menu-navigation__entree {
   /* Couleurs */
   --nav-entree-arriere-plan-couleur: var(--couleur-jaune);
   /* Marges */
-  --nav-entree-marges-internes-bloc: 0.33rem;
+  --nav-entree-marges-internes-bloc: var(--espace-xs);
   --nav-entree-marges-internes-ligne: 3rem;
-  --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
+  --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */
   /* Dispositions */
   --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
   transition: 0.2s background;
@@ -324,7 +352,7 @@ ul.avec-puce-cercle a {
 #en-tete .compte-panier {
   display: flex;
   flex-flow: row nowrap;
-  gap: max(1rem, 2vw);
+  gap: 1rem;
   place-items: center;
   text-align: center;
   /**
@@ -336,26 +364,27 @@ ul.avec-puce-cercle a {
   text-transform: lowercase;
 }
 #en-tete .compte-panier a.lien-compte {
-  text-decoration: underline solid;
-  text-decoration-color: transparent;
-  text-decoration-skip-ink: auto;
   border-color: transparent;
-  text-decoration-skip: edges;
-}
-@media (hover: hover) {
-  #en-tete .compte-panier a.lien-compte:hover {
-    text-decoration-color: var(--couleur-noir);
-  }
 }
 #en-tete .compte-panier a[data-contient-articles=true] {
   background: var(--couleur-jaune);
 }
 
+/**
+ * Le menu avec les Catégories de Produits pour une navigation rapide.
+ *
+ * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
+ *    correctement.
+ */
 #menu-categories-produits {
   /* Dimensions */
   --menu-entree-longueur-minimale: 13ch;
+  --menu-section-hauteur: var(--menu-categories-produits-hauteur);
   /* Marges */
-  --menu-entree-marges-internes-ligne: 1rem;
+  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
+  --menu-entree-marges-internes-ligne: var(--espace-m);
+  height: var(--menu-section-hauteur);
+  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
   /**
    * Liste des Catégories de Produits.
    *
@@ -415,16 +444,399 @@ ul.avec-puce-cercle a {
   border-right: initial;
 }
 
+/**
+ * Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
+ * portées.
+ *
+ * La colonne de gauche ne contiendra qu'une photo, et restera fixe tout le long du défilement
+ * de la boîte. La colonne de droite contiendra plusieurs photos et défilera normalement, photo par * photo.
+ */
+.photos-produit {
+  /* Positions */
+  --colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);
+  /* Dimensions */
+  --colonne-gauche-photo-hauteur: calc(100vh - var(--menu-categories-produits-hauteur));
+  --colonne-droite-photo-hauteur-minimale: calc(
+    100vh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
+  );
+  /* Marges */
+  --section-marges-externes-bloc-fin: 1rem;
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 100%;
+}
+.photos-produit > section {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 50%;
+}
+.photos-produit > section.colonne-gauche {
+  position: sticky;
+  top: var(--colonne-gauche-position-haut);
+  height: var(--colonne-gauche-photo-hauteur);
+}
+.photos-produit > section.colonne-gauche figure, .photos-produit > section.colonne-gauche picture, .photos-produit > section.colonne-gauche img {
+  height: 100%;
+}
+.photos-produit > section.colonne-droite figure picture img:only-child {
+  min-height: var(--colonne-droite-photo-hauteur-minimale);
+}
+
+/**
+ * La Grille des Produits sous forme de Cartes.
+ *
+ * Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
+ * entièrement.
+ * Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci
+ * se dispose sur une nouvelle ligne.
+ *
+ * 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.
+ * 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border
+ * collapse »).
+ */
+.grille-produits {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
+  gap: 1px; /* 2 */
+  margin-bottom: 2rem;
+}
+.grille-produits article {
+  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+}
+.grille-produits article figure {
+  display: flex;
+  flex-flow: column nowrap;
+  row-gap: 2rem;
+  padding: 1rem;
+}
+.grille-produits article figure a {
+  position: relative;
+}
+@media (hover: hover) {
+  .grille-produits article figure a:hover .produit__illustration__survol {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.3s opacity, 0.3s visibility;
+  }
+}
+.grille-produits article figure .produit__illustration__principale {
+  display: block;
+}
+.grille-produits article figure .produit__illustration__survol {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.15s opacity, 0.15s visibility;
+}
+.grille-produits article figure img {
+  aspect-ratio: 9/16;
+  width: 100%;
+  max-height: 70vh;
+  object-fit: cover;
+}
+.grille-produits article figure figcaption {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+.grille-produits article figure figcaption h3 {
+  font-style: italic;
+  letter-spacing: 1px;
+}
+.grille-produits article figure figcaption p {
+  font-weight: 500;
+  letter-spacing: -0.5px;
+}
+
+.informations-produit {
+  position: sticky;
+  bottom: 1rem;
+  overflow: visible;
+  width: 0;
+  height: 0;
+  /* Nom du Produit, sélecteur de variation et prix du Produit */
+  /* Bouton « Ajouter au Panier » */
+}
+.informations-produit__conteneur {
+  transform: translate(calc(50vw - 35ch), -100%);
+  display: grid;
+  width: 70ch;
+  max-width: 70ch;
+  border: 1px solid var(--couleur-noir);
+}
+.informations-produit__conteneur > section {
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+}
+.informations-produit__conteneur > section + section {
+  border-top: 1px solid var(--couleur-noir);
+}
+.informations-produit .details-produit {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: 1fr min-content;
+  padding: initial;
+}
+.informations-produit .details-produit > section {
+  grid-column: span 3;
+  padding: 1rem;
+  font-weight: 350;
+}
+.informations-produit .details-produit > section[hidden] {
+  display: none;
+}
+.informations-produit .details-produit > section ul {
+  list-style: disc;
+  list-style-position: inside;
+}
+.informations-produit .details-produit > section > * + * {
+  margin-top: 1lh;
+}
+.informations-produit .details-produit > ul {
+  display: grid;
+  grid-column: span 3;
+  grid-row: 2;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  text-align: center;
+  text-transform: lowercase;
+  letter-spacing: 1px;
+}
+.informations-produit .details-produit > ul li {
+  width: 100%;
+}
+.informations-produit .details-produit > ul li a {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: var(--espace-xs) 0;
+  border-top: 1px solid var(--couleur-noir);
+  border-right: 1px solid var(--couleur-noir);
+  border-left: 1px solid var(--couleur-noir);
+}
+.informations-produit .details-produit > ul li a:first-of-type {
+  border-left: initial;
+}
+.informations-produit .details-produit > ul li a:last-of-type {
+  border-left: initial;
+}
+.informations-produit .details-produit > ul li a[aria-selected=true] {
+  border-top-color: transparent;
+}
+.informations-produit .selecteur-produit {
+  display: flex;
+  flex-flow: row nowrap;
+  column-gap: 2rem;
+  place-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 1;
+}
+.informations-produit .selecteur-produit__nom {
+  letter-spacing: 1px;
+}
+.informations-produit .selecteur-produit__selection-variation {
+  display: flex;
+  place-items: center;
+  font-weight: 400;
+  text-transform: lowercase;
+  /* Texte du sélecteur */
+  /* Conteneur des sélecteurs */
+  /* Sélecteur natif */
+  /* Sélecteur personnalisé */
+}
+.informations-produit .selecteur-produit__selection-variation label {
+  height: 100%;
+  margin-right: 1ch;
+}
+.informations-produit .selecteur-produit__selection-variation__selecteurs {
+  position: relative;
+  /* Icône de flèche descendante */
+}
+.informations-produit .selecteur-produit__selection-variation__selecteurs::after {
+  pointer-events: none;
+  content: " ";
+  position: absolute;
+  top: 10px;
+  right: 0.4rem;
+  display: inline-block;
+  width: 0.9rem;
+  height: 0.9rem;
+  text-align: center;
+  visibility: visible;
+  opacity: 1;
+  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+@supports not selector(:user-valid) {
+  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid)::after {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+@supports selector(:user-valid) {
+  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid)::after {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+.informations-produit .selecteur-produit__selection-variation select {
+  position: relative;
+  min-width: 4rem;
+  padding: 0.5rem 2rem;
+  text-align: center;
+  appearance: none;
+  background: rgba(236, 234, 235, 0.9);
+  border: 1px solid var(--couleur-noir);
+}
+@supports selector(:user-valid) {
+  .informations-produit .selecteur-produit__selection-variation select:user-valid {
+    background: rgba(235, 255, 184, 0.9);
+  }
+}
+.informations-produit .selecteur-produit__selection-variation option {
+  background: rgba(236, 234, 235, 0.9);
+}
+.informations-produit .selecteur-produit__prix {
+  font-style: initial;
+}
+.informations-produit .actions-produit {
+  overflow: hidden;
+  background: var(--couleur-jaune);
+}
+.informations-produit .actions-produit.desactive {
+  background: rgba(236, 234, 235, 0.9);
+}
+.informations-produit .actions-produit button {
+  font-variation-settings: "wght" 400;
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: 0.2s font-variation-settings;
+}
+@media (hover: hover) {
+  .informations-produit .actions-produit button :not([disabled]):hover {
+    font-variation-settings: "wght" 500;
+  }
+}
+
+@media (hover: hover) {
+  .selecteur-personnalise {
+    display: block !important;
+  }
+  .selecteur-natif:focus + .selecteur-personnalise {
+    display: none !important;
+  }
+}
+.produits-similaires {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr max-content;
+  place-items: center;
+  margin-top: 1rem;
+  /* En-tête de la section */
+}
+.produits-similaires header {
+  grid-column: span 3;
+  width: 100%;
+  padding: 1.25rem 0 var(--espace-m);
+  text-align: center;
+  border: 1px solid var(--couleur-noir);
+}
+.produits-similaires header h2 {
+  font-style: italic;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.produits-similaires .grille-produits-similaires {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column: span 3;
+  grid-row: 2;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+}
+.produits-similaires .grille-produits-similaires article {
+  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+}
+.produits-similaires .grille-produits-similaires article figure {
+  display: flex;
+  flex-flow: column nowrap;
+  row-gap: 2rem;
+  padding: 1rem;
+}
+.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: 0.3s opacity, 0.3s visibility;
+  }
+}
+.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale {
+  display: block;
+}
+.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.15s opacity, 0.15s visibility;
+}
+.produits-similaires .grille-produits-similaires article figure img {
+  aspect-ratio: 9/16;
+  width: 100%;
+  max-height: 70vh;
+  object-fit: cover;
+}
+.produits-similaires .grille-produits-similaires article figure figcaption {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+.produits-similaires .grille-produits-similaires article figure figcaption h3 {
+  font-style: italic;
+  letter-spacing: 1px;
+}
+.produits-similaires .grille-produits-similaires article figure figcaption p {
+  font-weight: 500;
+  letter-spacing: -0.5px;
+}
+
+/**
+ * Le pied de page du site.
+ */
 #pied-de-page {
+  /* Marges */
+  --pied-de-page-marges-internes-bloc: var(--espace-m);
+  --pied-de-page-marges-internes-ligne: var(--espace-l);
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-items: center;
-  align-self: end;
-  min-width: 100vw;
-  padding: 1rem 2rem;
+  max-width: 100vw;
+  padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);
   line-height: 1.5;
   background: var(--couleur-jaune);
-  border: 1px solid var(--couleur-noir);
+  border-top: 1px solid var(--couleur-noir);
 }
 #pied-de-page .zone-menu-navigation-secondaire {
   justify-self: start;
@@ -438,10 +850,5 @@ ul.avec-puce-cercle a {
   height: 100%;
   text-align: right;
 }
-@media (hover: hover) {
-  #pied-de-page a:hover {
-    text-decoration-color: var(--couleur-noir);
-  }
-}
 
 /*# sourceMappingURL=main.css.map */

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/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;ACPF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AC1CF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;ACNF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;ACvDR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAON;EACE;;;AC1GR;AACE;EACA;AAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;ACnER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIA;EACE;IACE","file":"main.css"}
+{"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/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.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;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;;;ACjBF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACtDF;EACE;EACA;EACA;;;ACHF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACfJ;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACbF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAMA;AAAA;AAAA;;AALA;EAEE;;AAMF;AACE;EACA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAMA;AAKA;;AAVA;EAEE;;AAIF;EACE;;AAIF;EACE;IACE;;;AAMJ;EACE;IACE;;;;AClER;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAWA;;AATA;EACE;;AAEA;AAAA;EAEE;;AAKJ;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACvGR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;AC/ER;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACE;EACA;AAEA;EACA;EACA;AAAA;AAAA;AAIA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAMF;EACE;;;AC5CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;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;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC9EV;EACE;EACA;EACA;EACA;EACA;AAoFA;AAyGA;;AA3LA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAQV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;AAEA;AAMA;AAwCA;AAqBA;;AAlEA;EACE;EACA;;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;;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAeJ;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;IACE;;;;AAQZ;EACE;IACE;;EAGF;IACE;;;ACnOJ;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;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;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC1FZ;AAAA;AAAA;AAGA;AACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"main.css"}