From 3521050b206e79e07885d4f7df7677793771bc34 Mon Sep 17 00:00:00 2001
From: gcch <contact@gcch.fr>
Date: Thu, 24 Oct 2024 21:46:59 +0200
Subject: [PATCH] =?UTF-8?q?fonc(produit)=20cr=C3=A9=C3=A9=20le=20design=20?=
 =?UTF-8?q?adaptatif?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- créé le design adaptatif du menu des catégories de Produits ;
- créé le design adaptatif de la grille de Produits ;
---
 .../haiku-atelier-2024/assets/css/main.css    | 152 ++++++++++++------
 .../assets/css/main.css.map                   |   2 +-
 .../assets/css/main.min.css                   | 109 +++++++++----
 .../assets/css/main.min.css.map               |   2 +-
 .../assets/css/pages/page-a-propos.min.css    |  69 ++++++--
 .../css/pages/page-a-propos.min.css.map       |   2 +-
 .../assets/css/pages/page-panier.css          |   4 +-
 .../assets/css/pages/page-panier.min.css.map  |   2 +-
 .../src/sass/abstracts/_variables.scss        |   1 +
 .../src/sass/base/_base.scss                  |  12 +-
 .../src/sass/base/_typographie.scss           |   2 +-
 .../src/sass/base/elements/_boutons.scss      |   2 +-
 .../src/sass/base/elements/_formulaires.scss  |   2 +-
 .../src/sass/base/elements/_images.scss       |   2 +-
 .../src/sass/base/elements/_listes.scss       |   4 +-
 .../src/sass/layouts/_colonnes-photos.scss    |   6 +-
 .../src/sass/layouts/_en-tete.scss            |   4 +-
 .../src/sass/layouts/_grille-produits.scss    |  38 +++--
 .../sass/layouts/_informations-produit.scss   |  38 ++---
 .../layouts/_menu-categories-produits.scss    |  38 +++--
 .../src/sass/layouts/_panneau-panier.scss     |   4 +-
 .../sass/layouts/_produits-similaires.scss    |  28 +++-
 .../src/sass/pages/page-panier.scss           |   2 +-
 23 files changed, 356 insertions(+), 169 deletions(-)

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 12fc92e9..e4bfcdae 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/main.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css
@@ -46,6 +46,7 @@
   --hauteur-ligne-classique: 1.5;
   --hauteur-ligne-rapprochee: 1;
   /* Espacements entre les lettres */
+  --espacement-inter-lettres-rapproche-s: -0.5px;
   --espacement-inter-lettres-etendu-s: 0.5px;
   --espacement-inter-lettres-etendu-m: 1px;
   --espacement-inter-lettres-etendu-l: 1.5px;
@@ -62,14 +63,14 @@
   --espace-xl: 2rem;
 }
 
-/* *
+/*
  * 1. Utilise un meilleur modèle de boîte.
  */
 html {
   box-sizing: border-box; /* 1 */
 }
 
-/* *
+/*
  * Réinitialise avec des styles par défaut plus simples.
  *
  * 1. Hérite du modèle de boîte du document par défaut.
@@ -84,7 +85,7 @@ html {
   color: inherit; /* 3 */
 }
 
-/* *
+/*
  * 1. Utilise une couleur d'arrière-plan définie.
  * 2. Utilise la couleur primaire du site.
  */
@@ -93,14 +94,14 @@ body {
   background: var(--couleur-gris); /* 1 */
 }
 
-/* *
+/*
  * 1. Force l'héritage des styles pour ces éléments.
  */
 button, input, select, textarea {
   font: inherit; /* 1 */
 }
 
-/* *
+/*
  * Change la couleur d'arrière-plan à la sélection du texte.
  */
 *::selection {
@@ -117,7 +118,7 @@ button, input, select, textarea {
   cursor: not-allowed;
 }
 
-/* *
+/*
  * Désactive les animations pour les Utilisateurs n'en souhaitant pas.
  */
 @media (prefers-reduced-motion) {
@@ -127,7 +128,7 @@ button, input, select, textarea {
     animation-duration: 0s !important;
   }
 }
-/* *
+/*
  * 2. Rendu spécifique du texte pour Safari/iOS.
  * 3. Rendu plus précis du texte.
  */
@@ -156,7 +157,7 @@ em {
 }
 
 /* Mixins Sass */
-/* *
+/*
  * Réinitialisation des styles des <button>.
  */
 button {
@@ -219,7 +220,7 @@ input[type=checkbox], input[type=radio] {
   appearance: none;
   border: 1px solid var(--couleur-noir);
   transition: 0.2s background;
-  /* *
+  /*
    * 1. Pour un alignement parfait du label avec la case à cocher.
    */
 }
@@ -237,7 +238,7 @@ label:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + l
   font-size: 0.9rem;
 }
 
-/* *
+/*
  * 1. Facilite l'usages des images.
  * 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.
@@ -317,14 +318,14 @@ a.lien-lien:active {
   }
 }
 
-/* *
+/*
  * Réinitialise les styles des listes non ordonnées.
  *
  * 1. Pas de puce.
  */
 ul {
   list-style: none; /* 1 */
-  /* *
+  /*
    * Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.
    *
    * 1. Ajoute de la marge interne pour que la puce ait de la place.
@@ -463,7 +464,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   flex: 1;
   text-align: center;
   text-transform: lowercase;
-  /* *
+  /*
    * Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au
    * survol soit possible.
    *
@@ -512,7 +513,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   gap: 1rem;
   place-items: center;
   text-align: center;
-  /* *
+  /*
    * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
    */
 }
@@ -527,7 +528,7 @@ body:has(#menu-mobile:not([aria-hidden=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
@@ -540,9 +541,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   /* Marges */
   --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.
    *
    * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
@@ -553,8 +553,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 #menu-categories-produits ul {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
+  gap: 1px;
   place-items: center;
-  /* *
+  /*
    * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
    */
 }
@@ -565,9 +566,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   color: var(--couleur-gris);
   text-align: center;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   background: var(--couleur-noir);
-  /* *
+  /*
    * 1. Permet de créer des marges verticales.
    * 2. Hérite de la longueur du conteneur.
    * 3. Surchargement de styles pour les liens.
@@ -583,8 +584,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   display: inline-block; /* 1 */
   width: inherit; /* 2 */
   padding: var(--menu-entree-marges-internes-ligne) 0;
-  border-right: 1px solid var(--couleur-gris);
-  border-left: 1px solid var(--couleur-gris);
   outline: initial; /* 3 */
 }
 #menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {
@@ -597,14 +596,24 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
     outline: initial; /* 3 */
   }
 }
-#menu-categories-produits ul li:first-of-type a {
-  border-left: initial;
-}
-#menu-categories-produits ul li:last-of-type a {
-  border-right: initial;
+@media (width <= 900px) {
+  #menu-categories-produits ul {
+    --menu-entree-marges-internes-ligne: var(--espace-s);
+    display: flex;
+    flex-flow: row wrap;
+    font-size: 0.9rem;
+  }
+  #menu-categories-produits ul li {
+    flex-grow: 1;
+    width: min(140px, 100%);
+  }
+  #menu-categories-produits ul li a {
+    width: 100%;
+    border: initial;
+  }
 }
 
-/* *
+/*
  * Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
  * portées.
  *
@@ -619,6 +628,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   --colonne-droite-photo-hauteur-minimale: calc(
     100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
   );
+  --colonne-photo-longueur-minimale: 30rem;
   /* Marges */
   --section-marges-externes-bloc-fin: 1rem;
   display: flex;
@@ -629,7 +639,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   position: relative;
   display: flex;
   flex-flow: column nowrap;
-  width: 50%;
+  flex-grow: 1;
+  width: min(var(--colonne-photo-longueur-minimale), 100%);
 }
 .photos-produit > section.colonne-gauche {
   position: sticky;
@@ -644,7 +655,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   max-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
@@ -657,9 +668,15 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
  * collapse »).
  */
 .grille-produits {
+  /* Dimensions */
+  --aucun-produit-hauteur: calc(
+    100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)
+      - var(--pied-de-page-hauteur)
+  );
+  --carte-produit-longueur-minimale: 448px;
   display: grid;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
+  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
   gap: 1px; /* 2 */
 }
 .grille-produits article {
@@ -668,8 +685,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 .grille-produits article figure {
   display: flex;
   flex-flow: column nowrap;
-  row-gap: 2rem;
-  padding: 1rem;
+  row-gap: var(--espace-xl);
+  padding: var(--espace-m);
 }
 .grille-produits article figure a {
   position: relative;
@@ -705,28 +722,36 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: var(--espace-xl);
 }
 .grille-produits article figure figcaption h3 {
   font-style: italic;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 .grille-produits article figure figcaption p {
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: var(--espacement-inter-lettres-rapproche-s);
 }
 .grille-produits__aucun-produit {
   grid-column: span 3;
   align-content: center;
-  min-height: calc(100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));
+  min-height: var(--aucun-produit-hauteur);
   text-align: 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;
+  }
+}
 
-/* *
+/*
  * Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le
  * Panier.
  *
@@ -734,7 +759,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
  * 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
  */
 .informations-produit {
-  /* Variables */
   --boite-couleur-fond: rgb(255 255 255 / 90%);
   --boite-position-basse: 1rem;
   --boite-longueur: 70ch;
@@ -753,7 +777,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   width: var(--boite-longueur);
   max-width: var(--boite-longueur);
   border: 1px solid var(--couleur-noir);
-  /* *
+  /*
    * Définis les apparence et comportement de toutes les sections de la boîte.
    */
 }
@@ -793,7 +817,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   text-align: center;
   text-transform: lowercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 .informations-produit .onglets-details-produit > ul li {
   width: 100%;
@@ -845,8 +869,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   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%;
@@ -886,7 +908,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 .informations-produit .selecteur-produit__selection-variation select {
   position: relative;
   min-width: 4rem;
-  padding: 0.5rem var(--espace-xl);
+  padding: var(--espace-s) var(--espace-xl);
   text-align: center;
   appearance: none;
   background: rgba(236, 234, 235, 0.9);
@@ -916,7 +938,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   font-variation-settings: "wght" 400;
   font-style: italic;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   transition: 0.2s font-variation-settings;
   /* Change la casse de la police au survol quand le Bouton n'est pas désactivé */
 }
@@ -925,6 +947,21 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
     font-variation-settings: "wght" 500;
   }
 }
+@media (width <= 700px) {
+  .informations-produit {
+    position: relative;
+    bottom: initial;
+    width: initial;
+    height: initial;
+  }
+  .informations-produit__conteneur {
+    transform: initial;
+    width: initial;
+    max-width: initial;
+    border-right: initial;
+    border-left: initial;
+  }
+}
 
 @media (hover: hover) {
   .selecteur-personnalise {
@@ -935,6 +972,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   }
 }
 .produits-similaires {
+  /* Dimensions */
+  --carte-produit-longueur-minimale: 448px;
   display: grid;
   grid-template-areas: "en-tete en-tete en-tete" "produits produits produits";
   grid-template-columns: repeat(3, 1fr);
@@ -947,25 +986,26 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   grid-area: en-tete;
   width: 100%;
   padding: var(--espace-l) 0 var(--espace-m);
+  color: var(--couleur-blanc);
   text-align: center;
-  border: 1px solid var(--couleur-noir);
+  background: var(--couleur-noir);
 }
 .produits-similaires header h2 {
   font-style: italic;
   line-height: var(--hauteur-ligne-rapprochee);
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 .produits-similaires .grille-produits-similaires {
   display: grid;
   grid-area: produits;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
   gap: 1px;
   width: 100%;
 }
 .produits-similaires .grille-produits-similaires article {
-  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+  box-shadow: 0 0 0 1px var(--couleur-noir);
 }
 .produits-similaires .grille-produits-similaires article figure {
   display: flex;
@@ -1000,7 +1040,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 .produits-similaires .grille-produits-similaires article figure img {
   aspect-ratio: 9/16;
   width: 100%;
-  max-height: 70vh;
+  max-height: 70svh;
   object-fit: cover;
 }
 .produits-similaires .grille-produits-similaires article figure figcaption {
@@ -1011,11 +1051,19 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 }
 .produits-similaires .grille-produits-similaires article figure figcaption h3 {
   font-style: italic;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 .produits-similaires .grille-produits-similaires article figure figcaption p {
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: var(--espacement-inter-lettres-rapproche-s);
+}
+@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 {
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 c0584b04..a6b3b53e 100644
--- 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/_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;EAEF,eACE;;AA6GJ;EACE;EACA;EACA;EACA;EACA,KACE;EAIF,eACE;;ACjIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;ACjBJ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;;AC/BF;AAAA;AAAA;AAGA;EACE;;;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;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;IACE;IACA;IACA;;;AChEJ;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AC7BA;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AClBN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;AAcA;AAAA;AAAA;;AAZA;EACE;;AAGA;EACE;EACA;EACA;EACA;;AAOJ;EACE;EACA;;;ACzEJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;EACA;;;ACZF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;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;;;;AChFR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC3BxE;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;;;AAQZ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;ACxFJ;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAeA;;AAbA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAKJ;EACE;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;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACxHR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA,uBACE;EACF;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;AAAA;AAAA;AAAA;AAAA;;AATE;EACE;;AAIJ;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;ACrFR;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;EACA;;;AC7CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EACE;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;;AAMR;EACE;EACA;EACA;EAIA;;AAEA;EACE;EACA;;;AC9FN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACE;EAEA;EAGA;EACA;EAGA;EAEA;EACA;EACA;EACA;EACA;AAmGA;AAyGA;;AA1MA;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;;AASN;EACE;;AAMN;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;EACA;AAEA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;;AAEE;EACE;IACE;;;;AAQZ;EACE;IACE;;EAGF;IACE;;;ACvQJ;EACE;EACA,qBACE;EAEF;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;;;AC5FZ;AACE;EACA;EACA;EAEA;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/_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;EAEF,eACE;;AA6GJ;EACE;EACA;EACA;EACA;EACA,KACE;EAIF,eACE;;ACjIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;ACjBJ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;;AChCF;AAAA;AAAA;AAGA;EACE;;;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;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;IACE;IACA;IACA;;;AChEJ;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AC7BA;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AClBN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;AAcA;AAAA;AAAA;;AAZA;EACE;;AAGA;EACE;EACA;EACA;EACA;;AAOJ;EACE;EACA;;;ACzEJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;EACA;;;ACZF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;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;;;;AChFR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC3BxE;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;;;AAQZ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;ACxFJ;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAeA;;AAbA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAKJ;EACE;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;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACxHR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;AAEA;EACA;EACA;EAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA,uBACE;EAEF;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;AAAA;AAAA;AAAA;AAAA;;AATE;EACE;;AAIJ;EACE;;AAQF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAMR;EACE;IACE;IAEA;IACA;IACA;;EAEA;IACE;IACA;;EAEA;IACE;IACA;;;;AC/FZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACE;EACA;AAEA;EACA;EACA;AAAA;AAAA;EAGA;AAEA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAMF;EACE;EACA;;;AC/CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACE;EACA;AAAA;AAAA;AAAA;EAIA;EAEA;EACA;EACA,uBACE;EAEF;;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;;AAMR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAEA;IACE;;;;AC7GR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EAEE;EAGA;EACA;EAGA;EAEA;EACA;EACA;EACA;EACA;AAmGA;AA6FA;;AA9LA;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;;AASN;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;AAEA;AAMA;;AALA;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;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;;AAEE;EACE;IACE;;;AAOV;EA5OF;IA6OI;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;;;AAKN;EACE;IACE;;EAGF;IACE;;;ACzQJ;AACE;EACA;EAEA;EACA,qBACE;EAEF;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;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;;AAMR;EACE;IACE;;EAEA;IACE;;;;AC3GV;AACE;EACA;EACA;EAEA;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 65690d0d..7812bd52 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css
@@ -45,6 +45,7 @@
   --police-myriad: "Myriad", sans-serif;
   --hauteur-ligne-classique: 1.5;
   --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;
@@ -385,7 +386,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   --en-tete-marges-internes-bloc: var(--espace-m);
   --en-tete-section-hauteur: var(--en-tete-hauteur);
   --en-tete-logo-longueur: 80px;
-  z-index: 20;
+  z-index: 60;
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
   background: var(--couleur-gris);
@@ -485,13 +486,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   --menu-section-hauteur: var(--menu-categories-produits-hauteur);
   --menu-section-marges-bloc-debut: var(--en-tete-hauteur);
   --menu-entree-marges-internes-ligne: var(--espace-m);
-  height: var(--menu-section-hauteur);
   margin-top: var(--menu-section-marges-bloc-debut);
 }
 
 #menu-categories-produits ul {
   grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr));
   place-items: center;
+  gap: 1px;
   display: grid;
 }
 
@@ -499,7 +500,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   color: var(--couleur-gris);
   text-align: center;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   background: var(--couleur-noir);
   width: 100%;
   font-style: italic;
@@ -517,8 +518,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 #menu-categories-produits ul li a {
   width: inherit;
   padding: var(--menu-entree-marges-internes-ligne) 0;
-  border-right: 1px solid var(--couleur-gris);
-  border-left: 1px solid var(--couleur-gris);
   outline: initial;
   display: inline-block;
 }
@@ -535,18 +534,30 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   }
 }
 
-#menu-categories-produits ul li:first-of-type a {
-  border-left: initial;
-}
+@media (width <= 900px) {
+  #menu-categories-produits ul {
+    --menu-entree-marges-internes-ligne: var(--espace-s);
+    flex-flow: wrap;
+    font-size: .9rem;
+    display: flex;
+  }
 
-#menu-categories-produits ul li:last-of-type a {
-  border-right: initial;
+  #menu-categories-produits ul li {
+    flex-grow: 1;
+    width: min(140px, 100%);
+  }
+
+  #menu-categories-produits ul li a {
+    border: initial;
+    width: 100%;
+  }
 }
 
 .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: wrap;
   max-width: 100%;
@@ -554,8 +565,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .photos-produit > section {
+  width: min(var(--colonne-photo-longueur-minimale), 100%);
   flex-flow: column;
-  width: 50%;
+  flex-grow: 1;
   display: flex;
   position: relative;
 }
@@ -576,8 +588,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .grille-produits {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  --aucun-produit-hauteur: calc(100svh - var(--menu-categories-produits-hauteur)  - var(--en-tete-hauteur)  - var(--pied-de-page-hauteur));
+  --carte-produit-longueur-minimale: 448px;
   grid-auto-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
   gap: 1px;
   display: grid;
 }
@@ -587,9 +601,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .grille-produits article figure {
+  row-gap: var(--espace-xl);
+  padding: var(--espace-m);
   flex-flow: column;
-  row-gap: 2rem;
-  padding: 1rem;
   display: flex;
 }
 
@@ -629,24 +643,24 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .grille-produits article figure figcaption {
+  margin-bottom: var(--espace-xl);
   flex-flow: row;
   justify-content: space-between;
-  margin-bottom: 2rem;
   display: flex;
 }
 
 .grille-produits article figure figcaption h3 {
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   font-style: italic;
 }
 
 .grille-produits article figure figcaption p {
-  letter-spacing: -.5px;
+  letter-spacing: var(--espacement-inter-lettres-rapproche-s);
   font-weight: 500;
 }
 
 .grille-produits__aucun-produit {
-  min-height: calc(100svh - var(--menu-categories-produits-hauteur)  - var(--en-tete-hauteur)  - var(--pied-de-page-hauteur));
+  min-height: var(--aucun-produit-hauteur);
   text-align: center;
   grid-column: span 3;
   align-content: center;
@@ -657,6 +671,16 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   font-size: 1.25rem;
 }
 
+@media (width <= 700px) {
+  .grille-produits {
+    grid-template-columns: 100%;
+  }
+
+  .grille-produits article figure img {
+    max-height: 50svh;
+  }
+}
+
 .informations-produit {
   --boite-couleur-fond: #ffffffe6;
   --boite-position-basse: 1rem;
@@ -714,7 +738,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 .informations-produit .onglets-details-produit > ul {
   text-align: center;
   text-transform: lowercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   grid-area: 2 / span 3;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   display: grid;
@@ -813,7 +837,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .informations-produit .selecteur-produit__selection-variation select {
-  padding: .5rem var(--espace-xl);
+  padding: var(--espace-s) var(--espace-xl);
   text-align: center;
   appearance: none;
   border: 1px solid var(--couleur-noir);
@@ -849,7 +873,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 .informations-produit .actions-produit button {
   font-variation-settings: "wght" 400;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   font-style: italic;
   transition: font-variation-settings .2s;
 }
@@ -858,7 +882,26 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   .informations-produit .actions-produit button:not([disabled]):hover {
     font-variation-settings: "wght" 500;
   }
+}
 
+@media (width <= 700px) {
+  .informations-produit {
+    bottom: initial;
+    width: initial;
+    height: initial;
+    position: relative;
+  }
+
+  .informations-produit__conteneur {
+    transform: initial;
+    width: initial;
+    max-width: initial;
+    border-right: initial;
+    border-left: initial;
+  }
+}
+
+@media (hover: hover) {
   .selecteur-personnalise {
     display: block !important;
   }
@@ -869,6 +912,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .produits-similaires {
+  --carte-produit-longueur-minimale: 448px;
   margin-top: var(--espace-m);
   grid-template-rows: 1fr auto;
   grid-template-columns: repeat(3, 1fr);
@@ -880,8 +924,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 
 .produits-similaires header {
   padding: var(--espace-l) 0 var(--espace-m);
+  color: var(--couleur-blanc);
   text-align: center;
-  border: 1px solid var(--couleur-noir);
+  background: var(--couleur-noir);
   grid-area: en-tete;
   width: 100%;
 }
@@ -890,13 +935,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   font-style: italic;
   line-height: var(--hauteur-ligne-rapprochee);
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 
 .produits-similaires .grille-produits-similaires {
   grid-area: produits;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-auto-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
   gap: 1px;
   width: 100%;
   display: grid;
@@ -945,7 +990,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   aspect-ratio: 9 / 16;
   object-fit: cover;
   width: 100%;
-  max-height: 70vh;
+  max-height: 70svh;
 }
 
 .produits-similaires .grille-produits-similaires article figure figcaption {
@@ -956,15 +1001,25 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 
 .produits-similaires .grille-produits-similaires article figure figcaption h3 {
-  letter-spacing: 1px;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
   font-style: italic;
 }
 
 .produits-similaires .grille-produits-similaires article figure figcaption p {
-  letter-spacing: -.5px;
+  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 {
   --pied-de-page-marges-internes-bloc: var(--espace-m);
   --pied-de-page-marges-internes-ligne: var(--espace-xl);
diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map
index 6a8a679f..ec88bd14 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map
+++ b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map
@@ -1 +1 @@
-{"version":3,"mappings":"AACA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;;;;AAWA;;;;;;;;AAYA;;;;;AAQA;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAOA;EACE;;;;;;;AAUF;;;;;;AAMA;;;;;;;;;;AAUA;;;;AAIA;;;;AAQA;;;;;;;AAMA;;;;;AAIA;;;;;;;;AAQA;;;;;;;;AAOA;;;;;AAIA;;;;;AAKA;;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;;;AAWA;;;;AAGA;;;;;;;AAMA;;;;;AAUA;;;;;AAKA;;;;;AAUA;;;;;;;;;;AAeA;;;;AAGA;;;;;;;;AAYA;;;;AAGA;;;;AAGA;EACE;;;;;AAIF;;;;AAGA;;;;;AAIA;EACE;;;;;EAMA;;;;;AAUF;;;;AASA;;;;;;AAQA;;;;;AAKA;;;;;AAKA;;;;;;;;;;;;;;;AAeA;;;;;AAIA;;;;AAGA;;;;;;;;;;AASA;;;;;;;;;;;;;;AAaA;;;;AAGA;;;;;;AAKA;;;;AAGA;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;AAuBA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;;;;AAgBA;;;;;;;;AAOA;;;;;;;AAQA;;;;;;AAKA;;;;AAGA;EACE;;;;;AAIF;EACE;;;;;AAIF;;;;;;;;AAUA;;;;;AAIA;;;;AAGA;;;;AAUA;;;;;;;;;AAiBA;;;;;;AAQA;;;;;;;;;;;AAeA;;;;AAGA;;;;AAGA;;;;;;;;;AAQA;;;;;AAIA;EACE;;;;;;AAKF;;;;AAGA;;;;AAWA;;;;;;;;;;AAcA;;;;;;;AAMA;;;;;;AAKA;;;;AAGA;;;;;AAiBA;;;;;;;AAMA;;;;AAGA;;;;;;;AAMA;;;;AAGA;EACE;;;;;;;AAMF;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;;AAIA;;;;;;;AAMA;;;;;AAYA;;;;;;;;;;;;AAcA;;;;;;;;AAUA;;;;;;;;AAOA;;;;AAGA;;;;;;;AAMA;;;;;;;AAMA;;;;AAIA;;;;AAGA;;;;;;;;;AASA;;;;AAGA;;;;;AAQA;;;;;;;;;;AAUA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;;;;;AAUA;;;;AAGA;;;;;;;AAUA;;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;AAeA;EACE;;;;;;AAKF;EACE;;;;;;AAKF;;;;;;;;;;AASA;EACE;;;;;AAIF;;;;AAGA;;;;AAGA;;;;;;AAMA;;;;AAGA;;;;;;;;AAQA;EACE;;;;EAMA;;;;EAGA;;;;;AAIF;;;;;;;;;;AASA;;;;;;;;AAOA;;;;;;;AAMA;;;;;;;;;AAQA;;;;AAGA;;;;;;;AAMA;;;;AAGA;EACE;;;;;;;AAMF;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;;AAKA;;;;;;;;;;;;;AAaA;;;;;;;AAMA","sources":["web/app/themes/haiku-atelier-2024/assets/css/main.css"],"sourcesContent":["@charset \"UTF-8\";\n@font-face {\n  font-family: Lato;\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n  src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.ttf\") format(\"truetype\");\n  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-0486, U+0488-0513, U+0E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;\n}\n@font-face {\n  font-family: Lato;\n  font-weight: 100 900;\n  font-style: italic;\n  font-display: swap;\n  src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.ttf\") format(\"truetype\");\n  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-0486, U+0488-0513, U+0E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;\n}\n@font-face {\n  font-family: Myriad;\n  font-weight: 300 900;\n  font-style: normal;\n  font-display: swap;\n  font-stretch: 70% 110%;\n  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\");\n}\n@font-face {\n  font-family: Myriad;\n  font-weight: 300 900;\n  font-style: italic;\n  font-display: swap;\n  font-stretch: 70% 110%;\n  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\");\n}\n:root {\n  /* Couleurs */\n  --couleur-blanc: #ffffff;\n  --couleur-gris: #eceaeb;\n  --couleur-bordeaux: #490918;\n  --couleur-jaune: #ebffb8;\n  --couleur-noir: #202020;\n  --couleur-fond: rgb(236 234 235 / 80%);\n  /* Polices */\n  --police-lato: \"Lato\", sans-serif;\n  --police-myriad: \"Myriad\", sans-serif;\n  /* Hauteurs de ligne */\n  --hauteur-ligne-classique: 1.5;\n  --hauteur-ligne-rapprochee: 1;\n  /* Espacements entre les lettres */\n  --espacement-inter-lettres-etendu-s: 0.5px;\n  --espacement-inter-lettres-etendu-m: 1px;\n  --espacement-inter-lettres-etendu-l: 1.5px;\n  --espacement-inter-lettres-etendu-xl: 2px;\n  /* Dimensions */\n  --en-tete-hauteur: 60px;\n  --menu-categories-produits-hauteur: 54.39px;\n  --pied-de-page-hauteur: calc(var(--espace-m) * 2 + 3lh);\n  /* Espacements */\n  --espace-xs: 0.25rem;\n  --espace-s: 0.5rem;\n  --espace-m: 1rem;\n  --espace-l: 1.25rem;\n  --espace-xl: 2rem;\n}\n\n/* *\n * 1. Utilise un meilleur modèle de boîte.\n */\nhtml {\n  box-sizing: border-box; /* 1 */\n}\n\n/* *\n * Réinitialise avec des styles par défaut plus simples.\n *\n * 1. Hérite du modèle de boîte du document par défaut.\n * 2. Pas de marges par défaut.\n * 3. Hérite par défaut des styles de texte et de couleur.\n */\n*, *::before, *::after {\n  box-sizing: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 2 */\n  font: inherit; /* 3 */\n  color: inherit; /* 3 */\n}\n\n/* *\n * 1. Utilise une couleur d'arrière-plan définie.\n * 2. Utilise la couleur primaire du site.\n */\nbody {\n  accent-color: var(--couleur-jaune); /* 2 */\n  background: var(--couleur-gris); /* 1 */\n}\n\n/* *\n * 1. Force l'héritage des styles pour ces éléments.\n */\nbutton, input, select, textarea {\n  font: inherit; /* 1 */\n}\n\n/* *\n * Change la couleur d'arrière-plan à la sélection du texte.\n */\n*::selection {\n  background: var(--couleur-jaune);\n}\n\n/* Cache tout élément avec l'attribut hidden */\n[hidden] {\n  display: none;\n}\n\n/* Utilise un curseur approprié pour les Éléments désactivés */\n[disabled] {\n  cursor: not-allowed;\n}\n\n/* *\n * Désactive les animations pour les Utilisateurs n'en souhaitant pas.\n */\n@media (prefers-reduced-motion) {\n  *, *::before, *::after {\n    scroll-behavior: auto !important;\n    transition: none !important;\n    animation-duration: 0s !important;\n  }\n}\n/* *\n * 2. Rendu spécifique du texte pour Safari/iOS.\n * 3. Rendu plus précis du texte.\n */\nhtml {\n  -webkit-font-smoothing: antialiased; /* 2 */\n  text-size-adjust: none; /* 2 */\n  text-rendering: geometricprecision; /* 3 */\n}\n\nbody {\n  font: 1rem/var(--hauteur-ligne-classique) Lato;\n  font-optical-sizing: auto;\n  font-kerning: normal;\n  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;\n  color: var(--couleur-noir);\n  text-decoration-skip-ink: auto;\n  letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\n\nstrong {\n  font-weight: 600;\n}\n\nem {\n  font-style: italic;\n}\n\n/* Mixins Sass */\n/* *\n * Réinitialisation des styles des <button>.\n */\nbutton {\n  all: initial;\n  cursor: pointer;\n  text-align: center;\n  letter-spacing: inherit;\n}\nbutton.bouton-case-pleine {\n  width: 100%;\n  height: 100%;\n}\nbutton.bouton-case-pleine--blanc-sur-noir {\n  font-style: italic;\n  color: var(--couleur-blanc);\n  text-transform: uppercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n  background: var(--couleur-noir);\n}\n\ninput, select, textarea {\n  padding: var(--espace-xs);\n  background: var(--couleur-gris);\n  border: 1px solid var(--couleur-noir);\n  outline: 1px solid transparent;\n  transition: 0.2s background, 0.2s outline;\n}\ninput:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible {\n  background: var(--couleur-jaune);\n  outline: 1px solid var(--couleur-noir);\n}\ninput:disabled, select:disabled, textarea:disabled {\n  cursor: not-allowed;\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\n}\n\ninput:is([type=email], [type=text], [type=tel])::placeholder, textarea::placeholder {\n  text-transform: lowercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\ninput:is([type=email], [type=text], [type=tel])::selection, textarea::selection {\n  color: var(--couleur-blanc);\n  background: var(--couleur-noir);\n}\ninput:is([type=email], [type=text], [type=tel]):user-valid, textarea:user-valid {\n  background: var(--couleur-jaune);\n}\ninput:is([type=email], [type=text], [type=tel]):user-invalid, textarea:user-invalid {\n  background: var(--couleur-gris);\n}\n\ninput, label, select, textarea {\n  cursor: pointer;\n}\n\ninput[type=checkbox], input[type=radio] {\n  width: var(--espace-l);\n  height: var(--espace-l);\n  padding: initial;\n  appearance: none;\n  border: 1px solid var(--couleur-noir);\n  transition: 0.2s background;\n  /* *\n   * 1. Pour un alignement parfait du label avec la case à cocher.\n   */\n}\ninput[type=checkbox]:checked, input[type=radio]:checked {\n  background: var(--couleur-jaune);\n}\ninput[type=checkbox]:checked::before, input[type=radio]:checked::before {\n  content: \"x\";\n  position: relative;\n  bottom: 15%;\n  left: 29%;\n}\nlabel:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + label, input[type=radio] + label {\n  padding-top: 1px; /* 1 */\n  font-size: 0.9rem;\n}\n\n/* *\n * 1. Facilite l'usages des images.\n * 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.\n * 3. Arrière-plan jaune en attendant le chargement de l'image.\n */\nimg, picture {\n  display: block; /* 1 */\n  max-width: 100%; /* 2 */\n}\n\nimg {\n  object-fit: cover; /* 2 */\n  background: var(--couleur-jaune); /* 3 */\n}\n\n/*\n * 1. Change la « bordure » de base.\n * 2. Ajoute un contour, qui sera colorisé au focus.\n * 3. Anime le changement de couleur des texte, bordure et contour.\n */\na {\n  /* Couleurs */\n  --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */\n  text-decoration: underline solid; /* 1 */\n  text-decoration-color: transparent; /* 1 */\n  text-decoration-skip-ink: auto; /* 1 */\n  outline: 1px solid transparent; /* 2 */\n  outline-offset: initial; /* 2 */\n  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 */\n  text-decoration-skip: edges; /* 1 */\n  /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */\n  /* Lien ressemblant visuellement à un bouton. */\n  /* Lien ressemblant à... un lien. */\n  /* Styles pour les liens par défaut */\n}\na:focus, a:focus-visible {\n  outline-color: var(--lien-contour-couleur-focus);\n}\na.lien-bouton {\n  /* Marges */\n  --lien-bouton-marges-internes-bloc: var(--espace-xs);\n  --lien-bouton-marges-internes-ligne: var(--espace-m);\n  /* Couleurs */\n  --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);\n  padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);\n  border: 1px solid var(--couleur-noir);\n  /* Change la couleur de l'arrière-plan pour marquer le focus. */\n  /* 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. */\n  /* Change la couleur de l'arrière-plan pour marquer le survol. */\n}\na.lien-bouton:focus, a.lien-bouton:focus-visible {\n  background: var(--lien-bouton-arriere-plan-couleur-survol);\n}\na.lien-bouton:active {\n  border-color: var(--lien-bouton-arriere-plan-couleur-survol);\n}\n@media (hover: hover) {\n  a.lien-bouton:hover {\n    background: var(--lien-bouton-arriere-plan-couleur-survol);\n  }\n}\na.lien-lien {\n  text-decoration: underline;\n}\na.lien-lien:active {\n  text-decoration-color: var(--couleur-jaune);\n  background: var(--couleur-jaune);\n}\n@media (hover: hover) {\n  a.lien-lien:hover {\n    text-decoration-color: var(--couleur-jaune);\n    background: var(--couleur-jaune);\n  }\n}\n@media (hover: hover) {\n  a:not([class]):hover {\n    text-decoration-color: var(--couleur-noir);\n  }\n}\n\n/* *\n * Réinitialise les styles des listes non ordonnées.\n *\n * 1. Pas de puce.\n */\nul {\n  list-style: none; /* 1 */\n  /* *\n   * Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.\n   *\n   * 1. Ajoute de la marge interne pour que la puce ait de la place.\n   * 2. Centre verticalement la puce et la dimensionne correctement.\n   */\n}\nul.avec-puce-cercle {\n  /* Marges */\n  --liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;\n  /* Dispositions */\n  --liste-puce-cercle-puce-position-horizontale: 1ch;\n  /* Tailles */\n  --liste-puce-cercle-puce-taille: 1.25ex;\n}\nul.avec-puce-cercle a {\n  padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */\n  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 */\n}\n\nbody:has(#menu-mobile:not([aria-hidden=true])) {\n  touch-action: none;\n  overflow: hidden;\n}\n\n#menu-mobile {\n  --menu-mobile-hauteur: calc(100svh - var(--en-tete-hauteur));\n  position: fixed;\n  z-index: 997;\n  inset: var(--en-tete-hauteur) 0 0 0;\n  overflow: hidden;\n  overscroll-behavior: none;\n  display: flex;\n  width: 100vw;\n  height: var(--menu-mobile-hauteur);\n  /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Pour les navigateurs incompatibles. */\n  transition: display 400ms;\n  transition: display 400ms allow-discrete;\n  -webkit-overflow-scrolling: none;\n}\n#menu-mobile[aria-hidden=true] {\n  display: none;\n  animation: fade-out 400ms both;\n}\n#menu-mobile[aria-hidden=true] .menu-modale__fond {\n  animation: fade-out 400ms both;\n}\n#menu-mobile .menu-modale__fond {\n  position: fixed;\n  z-index: 998;\n  inset: var(--en-tete-hauteur) 0 0 0;\n  height: var(--menu-mobile-hauteur);\n  opacity: 0;\n  background-color: var(--couleur-fond);\n  animation: fade-in 400ms both;\n}\n#menu-mobile .menu-modale__conteneur {\n  position: relative;\n  z-index: 999;\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: fit-content;\n  padding: var(--espace-xl);\n  opacity: 0;\n  background-color: var(--couleur-gris);\n  border-bottom: 1px solid var(--couleur-noir);\n  animation: fade-in 400ms 200ms both;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation {\n  grid-template-columns: 1fr;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation ul {\n  grid-column: initial;\n  flex-flow: column nowrap;\n  place-items: center;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation ul > span {\n  width: fit-content;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation ul > span li a {\n  padding-top: var(--espace-m);\n  padding-bottom: var(--espace-m);\n}\n\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n@keyframes slide-in {\n  to {\n    transform: translateY(0);\n  }\n}\n#en-tete {\n  /* Marges */\n  --en-tete-marges-internes-ligne: var(--espace-xl);\n  --en-tete-marges-internes-bloc: var(--espace-m);\n  /* Dimensions */\n  --en-tete-section-hauteur: var(--en-tete-hauteur);\n  --en-tete-logo-longueur: 80px;\n  position: fixed;\n  z-index: 20;\n  top: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  place-items: center;\n  justify-content: space-between;\n  min-width: 100vw;\n  max-width: 100vw;\n  height: var(--en-tete-hauteur);\n  padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);\n  font-size: 1.1rem;\n  background: var(--couleur-gris);\n  border-bottom: 1px solid var(--couleur-noir);\n  /* TODO: Déplacer au sein d'un Composant ? */\n}\n#en-tete .logo {\n  width: var(--en-tete-logo-longueur);\n}\n#en-tete .logo picture, #en-tete .logo img {\n  background: transparent;\n}\n#en-tete .logo button {\n  display: block;\n  align-content: center;\n}\n#en-tete .menu-navigation {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  flex: 1;\n  text-align: center;\n  text-transform: lowercase;\n  /* *\n   * Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au\n   * survol soit possible.\n   *\n   * 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.\n   * 2. Augmente les marges internes pour créer des liens plus imposants.\n   * 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.\n   * 4. Aligne le texte au centre.\n   */\n}\n#en-tete .menu-navigation ul {\n  display: flex;\n  grid-column: 2;\n  flex-flow: row nowrap;\n  gap: var(--espace-m);\n  justify-content: space-between;\n}\n#en-tete .menu-navigation__entree {\n  /* Marges */\n  --nav-entree-marges-internes-bloc: var(--espace-xs);\n  --nav-entree-marges-internes-ligne: 3rem;\n  --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */\n  /* Dispositions */\n  --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */\n}\n#en-tete .menu-navigation__entree a {\n  display: inline-block; /* 1 */\n  padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */\n  text-align: center; /* 4 */\n}\n#en-tete .menu-navigation__entree--courante {\n  background: url(\"/app/themes/haiku-atelier-2024/assets/img/icons/cloud.svg\") center/auto 90% no-repeat;\n}\n@media (hover: hover) {\n  #en-tete .menu-navigation__entree:hover {\n    background: url(\"/app/themes/haiku-atelier-2024/assets/img/icons/cloud.svg\") center/auto 90% no-repeat;\n  }\n}\n@media (width <= 1000px) {\n  #en-tete .menu-navigation#menu-navigation-en-tete {\n    display: none;\n  }\n}\n#en-tete .compte-panier {\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 1rem;\n  place-items: center;\n  text-align: center;\n  /* *\n   * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.\n   */\n}\n#en-tete .compte-panier a {\n  min-width: 10ch; /* 1 */\n  text-transform: lowercase;\n}\n#en-tete .compte-panier a.lien-compte {\n  border-color: transparent;\n}\n#en-tete .compte-panier a[data-contient-articles=true] {\n  background: var(--couleur-jaune);\n}\n\n/* *\n * Le menu avec les Catégories de Produits pour une navigation rapide.\n *\n * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher\n *    correctement.\n */\n#menu-categories-produits {\n  /* Dimensions */\n  --menu-entree-longueur-minimale: 13ch;\n  --menu-section-hauteur: var(--menu-categories-produits-hauteur);\n  /* Marges */\n  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */\n  --menu-entree-marges-internes-ligne: var(--espace-m);\n  height: var(--menu-section-hauteur);\n  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */\n  /* *\n   * Liste des Catégories de Produits.\n   *\n   * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur\n   * minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la\n   * ligne.\n   */\n}\n#menu-categories-produits ul {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */\n  place-items: center;\n  /* *\n   * 1. Force chaque entrée à occuper tout l'espace alloué par grid.\n   */\n}\n#menu-categories-produits ul li {\n  width: 100%; /* 1 */\n  font-weight: 450;\n  font-style: italic;\n  color: var(--couleur-gris);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  background: var(--couleur-noir);\n  /* *\n   * 1. Permet de créer des marges verticales.\n   * 2. Hérite de la longueur du conteneur.\n   * 3. Surchargement de styles pour les liens.\n   */\n}\n#menu-categories-produits ul li.categorie-courante a {\n  color: var(--couleur-jaune);\n}\n#menu-categories-produits ul li:active a {\n  font-weight: 500;\n}\n#menu-categories-produits ul li a {\n  display: inline-block; /* 1 */\n  width: inherit; /* 2 */\n  padding: var(--menu-entree-marges-internes-ligne) 0;\n  border-right: 1px solid var(--couleur-gris);\n  border-left: 1px solid var(--couleur-gris);\n  outline: initial; /* 3 */\n}\n#menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {\n  color: var(--couleur-jaune);\n  outline: initial; /* 3 */\n}\n@media (hover: hover) {\n  #menu-categories-produits ul li a:hover {\n    color: var(--couleur-jaune);\n    outline: initial; /* 3 */\n  }\n}\n#menu-categories-produits ul li:first-of-type a {\n  border-left: initial;\n}\n#menu-categories-produits ul li:last-of-type a {\n  border-right: initial;\n}\n\n/* *\n * Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos\n * portées.\n *\n * La colonne de gauche ne contiendra qu'une photo, et restera fixe tout le long du défilement\n * de la boîte. La colonne de droite contiendra plusieurs photos et défilera normalement, photo par * photo.\n */\n.photos-produit {\n  /* Positions */\n  --colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);\n  /* Dimensions */\n  --colonne-gauche-photo-hauteur: calc(100svh - var(--menu-categories-produits-hauteur));\n  --colonne-droite-photo-hauteur-minimale: calc(\n    100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)\n  );\n  /* Marges */\n  --section-marges-externes-bloc-fin: 1rem;\n  display: flex;\n  flex-flow: row wrap;\n  max-width: 100%;\n}\n.photos-produit > section {\n  position: relative;\n  display: flex;\n  flex-flow: column nowrap;\n  width: 50%;\n}\n.photos-produit > section.colonne-gauche {\n  position: sticky;\n  top: var(--colonne-gauche-position-haut);\n  height: var(--colonne-gauche-photo-hauteur);\n}\n.photos-produit > section.colonne-gauche figure, .photos-produit > section.colonne-gauche picture, .photos-produit > section.colonne-gauche img {\n  height: 100%;\n}\n.photos-produit > section.colonne-droite figure picture img:only-child {\n  min-height: var(--colonne-droite-photo-hauteur-minimale);\n  max-height: var(--colonne-droite-photo-hauteur-minimale);\n}\n\n/* *\n * La Grille des Produits sous forme de Cartes.\n *\n * Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper\n * entièrement.\n * Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci\n * se dispose sur une nouvelle ligne.\n *\n * 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.\n * 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border\n * collapse »).\n */\n.grille-produits {\n  display: grid;\n  grid-auto-rows: 1fr;\n  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */\n  gap: 1px; /* 2 */\n}\n.grille-produits article {\n  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */\n}\n.grille-produits article figure {\n  display: flex;\n  flex-flow: column nowrap;\n  row-gap: 2rem;\n  padding: 1rem;\n}\n.grille-produits article figure a {\n  position: relative;\n}\n@media (hover: hover) {\n  .grille-produits article figure a:hover .produit__illustration__survol {\n    visibility: visible;\n    opacity: 1;\n    transition: 0.3s opacity, 0.3s visibility;\n  }\n}\n.grille-produits article figure .produit__illustration__principale {\n  display: block;\n}\n.grille-produits article figure .produit__illustration__survol {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition: 0.15s opacity, 0.15s visibility;\n}\n.grille-produits article figure img {\n  aspect-ratio: 9/16;\n  width: 100%;\n  max-height: 70vh;\n  object-fit: cover;\n}\n.grille-produits article figure figcaption {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  margin-bottom: 2rem;\n}\n.grille-produits article figure figcaption h3 {\n  font-style: italic;\n  letter-spacing: 1px;\n}\n.grille-produits article figure figcaption p {\n  font-weight: 500;\n  letter-spacing: -0.5px;\n}\n.grille-produits__aucun-produit {\n  grid-column: span 3;\n  align-content: center;\n  min-height: calc(100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n  text-align: center;\n}\n.grille-produits__aucun-produit p + p {\n  margin-top: var(--espace-l);\n  font-size: 1.25rem;\n}\n\n/* *\n * Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le\n * Panier.\n *\n * 1. Flotte toujours en bas de la page et s'arrête avant les Produits de la même collection.\n * 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.\n */\n.informations-produit {\n  /* Variables */\n  --boite-couleur-fond: rgb(255 255 255 / 90%);\n  --boite-position-basse: 1rem;\n  --boite-longueur: 70ch;\n  --section-marges-internes: 1rem;\n  position: sticky; /* 1 */\n  bottom: var(--boite-position-basse); /* 1 */\n  overflow: visible;\n  width: 0; /* 2 */\n  height: 0; /* 2 */\n  /* Nom du Produit, sélecteur de variation et prix du Produit */\n  /* Bouton « Ajouter au Panier » */\n}\n.informations-produit__conteneur {\n  transform: translate(calc(50vw - var(--boite-longueur) / 2), -100%);\n  display: grid;\n  width: var(--boite-longueur);\n  max-width: var(--boite-longueur);\n  border: 1px solid var(--couleur-noir);\n  /* *\n   * Définis les apparence et comportement de toutes les sections de la boîte.\n   */\n}\n.informations-produit__conteneur > section {\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  padding: var(--section-marges-internes);\n  background: var(--boite-couleur-fond);\n}\n.informations-produit__conteneur > section + section {\n  border-top: 1px solid var(--couleur-noir);\n}\n.informations-produit .onglets-details-produit {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  grid-template-rows: auto min-content;\n  padding: initial;\n}\n.informations-produit .onglets-details-produit > section {\n  overflow-y: auto;\n  grid-column: span 3;\n  padding: var(--section-marges-internes);\n  font-weight: 350;\n}\n.informations-produit .onglets-details-produit > section ul {\n  list-style: disc;\n  list-style-position: inside;\n}\n.informations-produit .onglets-details-produit > section > * + * {\n  margin-top: 1lh;\n}\n.informations-produit .onglets-details-produit > ul {\n  display: grid;\n  grid-column: span 3;\n  grid-row: 2;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  text-align: center;\n  text-transform: lowercase;\n  letter-spacing: 1px;\n}\n.informations-produit .onglets-details-produit > ul li {\n  width: 100%;\n}\n.informations-produit .onglets-details-produit > ul li:first-of-type a {\n  border-right-color: transparent;\n  border-left-color: transparent;\n}\n.informations-produit .onglets-details-produit > ul li:last-of-type a {\n  border-right-color: transparent;\n  border-left-color: transparent;\n}\n.informations-produit .onglets-details-produit > ul li a {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n  padding: var(--espace-xs) 0;\n  border-top: 1px solid transparent;\n  border-right: 1px solid var(--couleur-noir);\n  border-left: 1px solid var(--couleur-noir);\n  /* Quand l'onglet est sélectionné */\n}\n.informations-produit .onglets-details-produit > ul li a[aria-selected=true] {\n  border-top-color: transparent;\n}\n.informations-produit .onglets-details-produit > ul li a:focus, .informations-produit .onglets-details-produit > ul li a:focus-visible {\n  outline-color: transparent;\n}\n.informations-produit .onglets-details-produit:has(section:not([hidden])) > ul li a:not([aria-selected=true]) {\n  border-top-color: var(--couleur-noir);\n}\n.informations-produit .selecteur-produit {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  place-items: center;\n  justify-content: space-between;\n  font-weight: 500;\n  font-style: italic;\n  line-height: var(--hauteur-ligne-rapprochee);\n}\n.informations-produit .selecteur-produit__nom {\n  letter-spacing: 1px;\n}\n.informations-produit .selecteur-produit__selection-variation {\n  display: flex;\n  place-items: center;\n  font-weight: 400;\n  text-transform: lowercase;\n  /* Texte du sélecteur */\n  /* Conteneur des sélecteurs */\n  /* Sélecteur natif */\n  /* Sélecteur personnalisé */\n}\n.informations-produit .selecteur-produit__selection-variation label {\n  height: 100%;\n  margin-right: 1ch;\n}\n.informations-produit .selecteur-produit__selection-variation__selecteurs {\n  position: relative;\n  /* Icône de flèche descendante */\n}\n.informations-produit .selecteur-produit__selection-variation__selecteurs::after {\n  pointer-events: none;\n  content: \" \";\n  position: absolute;\n  top: 10px;\n  right: 0.4rem;\n  display: inline-block;\n  width: 0.9rem;\n  height: 0.9rem;\n  text-align: center;\n  visibility: visible;\n  opacity: 1;\n  background: url(\"/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg\") no-repeat;\n  transition: opacity 0.2s, visibility 0.2s;\n}\n@supports not selector(:user-valid) {\n  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid)::after {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n@supports selector(:user-valid) {\n  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid)::after {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n.informations-produit .selecteur-produit__selection-variation select {\n  position: relative;\n  min-width: 4rem;\n  padding: 0.5rem var(--espace-xl);\n  text-align: center;\n  appearance: none;\n  background: rgba(236, 234, 235, 0.9);\n  border: 1px solid var(--couleur-noir);\n}\n@supports selector(:user-valid) {\n  .informations-produit .selecteur-produit__selection-variation select:user-valid {\n    background: rgba(235, 255, 184, 0.9);\n  }\n}\n.informations-produit .selecteur-produit__selection-variation option {\n  background: rgba(236, 234, 235, 0.9);\n}\n.informations-produit .selecteur-produit__prix {\n  font-style: initial;\n}\n.informations-produit .actions-produit {\n  overflow: hidden;\n  background: var(--couleur-jaune);\n  transition: 0.2s background;\n  /* Indique que le Bouton est désactivé en utilisant un fond gris */\n}\n.informations-produit .actions-produit:has(button[disabled]) {\n  background: rgba(236, 234, 235, 0.9);\n}\n.informations-produit .actions-produit button {\n  font-variation-settings: \"wght\" 400;\n  font-style: italic;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  transition: 0.2s font-variation-settings;\n  /* Change la casse de la police au survol quand le Bouton n'est pas désactivé */\n}\n@media (hover: hover) {\n  .informations-produit .actions-produit button:not([disabled]):hover {\n    font-variation-settings: \"wght\" 500;\n  }\n}\n\n@media (hover: hover) {\n  .selecteur-personnalise {\n    display: block !important;\n  }\n  .selecteur-natif:focus + .selecteur-personnalise {\n    display: none !important;\n  }\n}\n.produits-similaires {\n  display: grid;\n  grid-template-areas: \"en-tete en-tete en-tete\" \"produits produits produits\";\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 1fr auto;\n  place-items: center;\n  margin-top: var(--espace-m);\n  /* En-tête de la section */\n}\n.produits-similaires header {\n  grid-area: en-tete;\n  width: 100%;\n  padding: var(--espace-l) 0 var(--espace-m);\n  text-align: center;\n  border: 1px solid var(--couleur-noir);\n}\n.produits-similaires header h2 {\n  font-style: italic;\n  line-height: var(--hauteur-ligne-rapprochee);\n  text-transform: uppercase;\n  letter-spacing: 1px;\n}\n.produits-similaires .grille-produits-similaires {\n  display: grid;\n  grid-area: produits;\n  grid-auto-rows: 1fr;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 1px;\n  width: 100%;\n}\n.produits-similaires .grille-produits-similaires article {\n  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */\n}\n.produits-similaires .grille-produits-similaires article figure {\n  display: flex;\n  flex-flow: column nowrap;\n  row-gap: var(--espace-xl);\n  padding: var(--espace-m);\n}\n.produits-similaires .grille-produits-similaires article figure a {\n  position: relative;\n}\n@media (hover: hover) {\n  .produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol {\n    visibility: visible;\n    opacity: 1;\n    transition: 0.3s opacity, 0.3s visibility;\n  }\n}\n.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale {\n  display: block;\n}\n.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition: 0.15s opacity, 0.15s visibility;\n}\n.produits-similaires .grille-produits-similaires article figure img {\n  aspect-ratio: 9/16;\n  width: 100%;\n  max-height: 70vh;\n  object-fit: cover;\n}\n.produits-similaires .grille-produits-similaires article figure figcaption {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  margin-bottom: var(--espace-xl);\n}\n.produits-similaires .grille-produits-similaires article figure figcaption h3 {\n  font-style: italic;\n  letter-spacing: 1px;\n}\n.produits-similaires .grille-produits-similaires article figure figcaption p {\n  font-weight: 500;\n  letter-spacing: -0.5px;\n}\n\n#pied-de-page {\n  /* Marges */\n  --pied-de-page-marges-internes-bloc: var(--espace-m);\n  --pied-de-page-marges-internes-ligne: var(--espace-xl);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  place-items: center;\n  max-width: 100vw;\n  height: var(--pied-de-page-hauteur);\n  padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);\n  background: var(--couleur-jaune);\n  border-top: 1px solid var(--couleur-noir);\n}\n#pied-de-page .zone-menu-navigation-secondaire {\n  justify-self: start;\n  width: 100%;\n  height: 100%;\n  text-transform: lowercase;\n}\n#pied-de-page .zone-liens-reseaux-sociaux {\n  justify-items: end;\n  width: 100%;\n  height: 100%;\n  text-align: right;\n}\n\n/*# sourceMappingURL=main.css.map */\n"],"names":[]}
\ No newline at end of file
+{"version":3,"mappings":"AACA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;AAWA;;;;;;;;AAYA;;;;;AAQA;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAOA;EACE;;;;;;;AAUF;;;;;;AAMA;;;;;;;;;;AAUA;;;;AAIA;;;;AAQA;;;;;;;AAMA;;;;;AAIA;;;;;;;;AAQA;;;;;;;;AAOA;;;;;AAIA;;;;;AAKA;;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;;;AAWA;;;;AAGA;;;;;;;AAMA;;;;;AAUA;;;;;AAKA;;;;;AAUA;;;;;;;;;;AAeA;;;;AAGA;;;;;;;;AAYA;;;;AAGA;;;;AAGA;EACE;;;;;AAIF;;;;AAGA;;;;;AAIA;EACE;;;;;EAMA;;;;;AAUF;;;;AASA;;;;;;AAQA;;;;;AAKA;;;;;AAKA;;;;;;;;;;;;;;;AAeA;;;;;AAIA;;;;AAGA;;;;;;;;;;AASA;;;;;;;;;;;;;;AAaA;;;;AAGA;;;;;;AAKA;;;;AAGA;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;AAuBA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;;;;AAgBA;;;;;;;;AAOA;;;;;;;AAQA;;;;;;AAKA;;;;AAGA;EACE;;;;;AAIF;EACE;;;;;AAIF;;;;;;;;AAUA;;;;;AAIA;;;;AAGA;;;;AAUA;;;;;;;;AAgBA;;;;;;;AASA;;;;;;;;;;;AAeA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;AAIA;EACE;;;;;;AAKF;EACE;;;;;;;EAMA;;;;;EAIA;;;;;;AAaF;;;;;;;;;;;AAeA;;;;;;;;AAOA;;;;;;AAKA;;;;AAGA;;;;;AAiBA;;;;;;;;;AAYA;;;;AAGA;;;;;;;AAMA;;;;AAGA;EACE;;;;;;;AAMF;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;;AAIA;;;;;;;AAMA;;;;;AAIA;EACE;;;;EAGA;;;;;AAYF;;;;;;;;;;;;AAaA;;;;;;;;AAUA;;;;;;;;AAOA;;;;AAGA;;;;;;;AAMA;;;;;;;AAMA;;;;AAIA;;;;AAGA;;;;;;;;;AASA;;;;AAGA;;;;;AAQA;;;;;;;;;;AAUA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;;;;;AAUA;;;;AAGA;;;;;;;AAQA;;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;AAeA;EACE;;;;;;AAKF;EACE;;;;;;AAKF;;;;;;;;;;AASA;EACE;;;;;AAIF;;;;AAGA;;;;AAGA;;;;;;AAMA;;;;AAGA;;;;;;;;AAQA;EACE;;;;;AAIF;EACE;;;;;;;EAMA;;;;;;;;;AASF;EACE;;;;EAGA;;;;;AAIF;;;;;;;;;;;AAWA;;;;;;;;;AAQA;;;;;;;AAMA;;;;;;;;;AAQA;;;;AAGA;;;;;;;AAMA;;;;AAGA;EACE;;;;;;;AAMF;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;;AAIA;EACE;;;;EAGA;;;;;AAKF;;;;;;;;;;;;;AAaA;;;;;;;AAMA","sources":["web/app/themes/haiku-atelier-2024/assets/css/main.css"],"sourcesContent":["@charset \"UTF-8\";\n@font-face {\n  font-family: Lato;\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n  src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.ttf\") format(\"truetype\");\n  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-0486, U+0488-0513, U+0E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;\n}\n@font-face {\n  font-family: Lato;\n  font-weight: 100 900;\n  font-style: italic;\n  font-display: swap;\n  src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.ttf\") format(\"truetype\");\n  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-0486, U+0488-0513, U+0E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;\n}\n@font-face {\n  font-family: Myriad;\n  font-weight: 300 900;\n  font-style: normal;\n  font-display: swap;\n  font-stretch: 70% 110%;\n  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\");\n}\n@font-face {\n  font-family: Myriad;\n  font-weight: 300 900;\n  font-style: italic;\n  font-display: swap;\n  font-stretch: 70% 110%;\n  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\");\n}\n:root {\n  /* Couleurs */\n  --couleur-blanc: #ffffff;\n  --couleur-gris: #eceaeb;\n  --couleur-bordeaux: #490918;\n  --couleur-jaune: #ebffb8;\n  --couleur-noir: #202020;\n  --couleur-fond: rgb(236 234 235 / 80%);\n  /* Polices */\n  --police-lato: \"Lato\", sans-serif;\n  --police-myriad: \"Myriad\", sans-serif;\n  /* Hauteurs de ligne */\n  --hauteur-ligne-classique: 1.5;\n  --hauteur-ligne-rapprochee: 1;\n  /* Espacements entre les lettres */\n  --espacement-inter-lettres-rapproche-s: -0.5px;\n  --espacement-inter-lettres-etendu-s: 0.5px;\n  --espacement-inter-lettres-etendu-m: 1px;\n  --espacement-inter-lettres-etendu-l: 1.5px;\n  --espacement-inter-lettres-etendu-xl: 2px;\n  /* Dimensions */\n  --en-tete-hauteur: 60px;\n  --menu-categories-produits-hauteur: 54.39px;\n  --pied-de-page-hauteur: calc(var(--espace-m) * 2 + 3lh);\n  /* Espacements */\n  --espace-xs: 0.25rem;\n  --espace-s: 0.5rem;\n  --espace-m: 1rem;\n  --espace-l: 1.25rem;\n  --espace-xl: 2rem;\n}\n\n/*\n * 1. Utilise un meilleur modèle de boîte.\n */\nhtml {\n  box-sizing: border-box; /* 1 */\n}\n\n/*\n * Réinitialise avec des styles par défaut plus simples.\n *\n * 1. Hérite du modèle de boîte du document par défaut.\n * 2. Pas de marges par défaut.\n * 3. Hérite par défaut des styles de texte et de couleur.\n */\n*, *::before, *::after {\n  box-sizing: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 2 */\n  font: inherit; /* 3 */\n  color: inherit; /* 3 */\n}\n\n/*\n * 1. Utilise une couleur d'arrière-plan définie.\n * 2. Utilise la couleur primaire du site.\n */\nbody {\n  accent-color: var(--couleur-jaune); /* 2 */\n  background: var(--couleur-gris); /* 1 */\n}\n\n/*\n * 1. Force l'héritage des styles pour ces éléments.\n */\nbutton, input, select, textarea {\n  font: inherit; /* 1 */\n}\n\n/*\n * Change la couleur d'arrière-plan à la sélection du texte.\n */\n*::selection {\n  background: var(--couleur-jaune);\n}\n\n/* Cache tout élément avec l'attribut hidden */\n[hidden] {\n  display: none;\n}\n\n/* Utilise un curseur approprié pour les Éléments désactivés */\n[disabled] {\n  cursor: not-allowed;\n}\n\n/*\n * Désactive les animations pour les Utilisateurs n'en souhaitant pas.\n */\n@media (prefers-reduced-motion) {\n  *, *::before, *::after {\n    scroll-behavior: auto !important;\n    transition: none !important;\n    animation-duration: 0s !important;\n  }\n}\n/*\n * 2. Rendu spécifique du texte pour Safari/iOS.\n * 3. Rendu plus précis du texte.\n */\nhtml {\n  -webkit-font-smoothing: antialiased; /* 2 */\n  text-size-adjust: none; /* 2 */\n  text-rendering: geometricprecision; /* 3 */\n}\n\nbody {\n  font: 1rem/var(--hauteur-ligne-classique) Lato;\n  font-optical-sizing: auto;\n  font-kerning: normal;\n  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;\n  color: var(--couleur-noir);\n  text-decoration-skip-ink: auto;\n  letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\n\nstrong {\n  font-weight: 600;\n}\n\nem {\n  font-style: italic;\n}\n\n/* Mixins Sass */\n/*\n * Réinitialisation des styles des <button>.\n */\nbutton {\n  all: initial;\n  cursor: pointer;\n  text-align: center;\n  letter-spacing: inherit;\n}\nbutton.bouton-case-pleine {\n  width: 100%;\n  height: 100%;\n}\nbutton.bouton-case-pleine--blanc-sur-noir {\n  font-style: italic;\n  color: var(--couleur-blanc);\n  text-transform: uppercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n  background: var(--couleur-noir);\n}\n\ninput, select, textarea {\n  padding: var(--espace-xs);\n  background: var(--couleur-gris);\n  border: 1px solid var(--couleur-noir);\n  outline: 1px solid transparent;\n  transition: 0.2s background, 0.2s outline;\n}\ninput:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible {\n  background: var(--couleur-jaune);\n  outline: 1px solid var(--couleur-noir);\n}\ninput:disabled, select:disabled, textarea:disabled {\n  cursor: not-allowed;\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\n}\n\ninput:is([type=email], [type=text], [type=tel])::placeholder, textarea::placeholder {\n  text-transform: lowercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\ninput:is([type=email], [type=text], [type=tel])::selection, textarea::selection {\n  color: var(--couleur-blanc);\n  background: var(--couleur-noir);\n}\ninput:is([type=email], [type=text], [type=tel]):user-valid, textarea:user-valid {\n  background: var(--couleur-jaune);\n}\ninput:is([type=email], [type=text], [type=tel]):user-invalid, textarea:user-invalid {\n  background: var(--couleur-gris);\n}\n\ninput, label, select, textarea {\n  cursor: pointer;\n}\n\ninput[type=checkbox], input[type=radio] {\n  width: var(--espace-l);\n  height: var(--espace-l);\n  padding: initial;\n  appearance: none;\n  border: 1px solid var(--couleur-noir);\n  transition: 0.2s background;\n  /*\n   * 1. Pour un alignement parfait du label avec la case à cocher.\n   */\n}\ninput[type=checkbox]:checked, input[type=radio]:checked {\n  background: var(--couleur-jaune);\n}\ninput[type=checkbox]:checked::before, input[type=radio]:checked::before {\n  content: \"x\";\n  position: relative;\n  bottom: 15%;\n  left: 29%;\n}\nlabel:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + label, input[type=radio] + label {\n  padding-top: 1px; /* 1 */\n  font-size: 0.9rem;\n}\n\n/*\n * 1. Facilite l'usages des images.\n * 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.\n * 3. Arrière-plan jaune en attendant le chargement de l'image.\n */\nimg, picture {\n  display: block; /* 1 */\n  max-width: 100%; /* 2 */\n}\n\nimg {\n  object-fit: cover; /* 2 */\n  background: var(--couleur-jaune); /* 3 */\n}\n\n/*\n * 1. Change la « bordure » de base.\n * 2. Ajoute un contour, qui sera colorisé au focus.\n * 3. Anime le changement de couleur des texte, bordure et contour.\n */\na {\n  /* Couleurs */\n  --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */\n  text-decoration: underline solid; /* 1 */\n  text-decoration-color: transparent; /* 1 */\n  text-decoration-skip-ink: auto; /* 1 */\n  outline: 1px solid transparent; /* 2 */\n  outline-offset: initial; /* 2 */\n  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 */\n  text-decoration-skip: edges; /* 1 */\n  /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */\n  /* Lien ressemblant visuellement à un bouton. */\n  /* Lien ressemblant à... un lien. */\n  /* Styles pour les liens par défaut */\n}\na:focus, a:focus-visible {\n  outline-color: var(--lien-contour-couleur-focus);\n}\na.lien-bouton {\n  /* Marges */\n  --lien-bouton-marges-internes-bloc: var(--espace-xs);\n  --lien-bouton-marges-internes-ligne: var(--espace-m);\n  /* Couleurs */\n  --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);\n  padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);\n  border: 1px solid var(--couleur-noir);\n  /* Change la couleur de l'arrière-plan pour marquer le focus. */\n  /* 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. */\n  /* Change la couleur de l'arrière-plan pour marquer le survol. */\n}\na.lien-bouton:focus, a.lien-bouton:focus-visible {\n  background: var(--lien-bouton-arriere-plan-couleur-survol);\n}\na.lien-bouton:active {\n  border-color: var(--lien-bouton-arriere-plan-couleur-survol);\n}\n@media (hover: hover) {\n  a.lien-bouton:hover {\n    background: var(--lien-bouton-arriere-plan-couleur-survol);\n  }\n}\na.lien-lien {\n  text-decoration: underline;\n}\na.lien-lien:active {\n  text-decoration-color: var(--couleur-jaune);\n  background: var(--couleur-jaune);\n}\n@media (hover: hover) {\n  a.lien-lien:hover {\n    text-decoration-color: var(--couleur-jaune);\n    background: var(--couleur-jaune);\n  }\n}\n@media (hover: hover) {\n  a:not([class]):hover {\n    text-decoration-color: var(--couleur-noir);\n  }\n}\n\n/*\n * Réinitialise les styles des listes non ordonnées.\n *\n * 1. Pas de puce.\n */\nul {\n  list-style: none; /* 1 */\n  /*\n   * Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.\n   *\n   * 1. Ajoute de la marge interne pour que la puce ait de la place.\n   * 2. Centre verticalement la puce et la dimensionne correctement.\n   */\n}\nul.avec-puce-cercle {\n  /* Marges */\n  --liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;\n  /* Dispositions */\n  --liste-puce-cercle-puce-position-horizontale: 1ch;\n  /* Tailles */\n  --liste-puce-cercle-puce-taille: 1.25ex;\n}\nul.avec-puce-cercle a {\n  padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */\n  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 */\n}\n\nbody:has(#menu-mobile:not([aria-hidden=true])) {\n  touch-action: none;\n  overflow: hidden;\n}\n\n#menu-mobile {\n  --menu-mobile-hauteur: calc(100svh - var(--en-tete-hauteur));\n  position: fixed;\n  z-index: 997;\n  inset: var(--en-tete-hauteur) 0 0 0;\n  overflow: hidden;\n  overscroll-behavior: none;\n  display: flex;\n  width: 100vw;\n  height: var(--menu-mobile-hauteur);\n  /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Pour les navigateurs incompatibles. */\n  transition: display 400ms;\n  transition: display 400ms allow-discrete;\n  -webkit-overflow-scrolling: none;\n}\n#menu-mobile[aria-hidden=true] {\n  display: none;\n  animation: fade-out 400ms both;\n}\n#menu-mobile[aria-hidden=true] .menu-modale__fond {\n  animation: fade-out 400ms both;\n}\n#menu-mobile .menu-modale__fond {\n  position: fixed;\n  z-index: 998;\n  inset: var(--en-tete-hauteur) 0 0 0;\n  height: var(--menu-mobile-hauteur);\n  opacity: 0;\n  background-color: var(--couleur-fond);\n  animation: fade-in 400ms both;\n}\n#menu-mobile .menu-modale__conteneur {\n  position: relative;\n  z-index: 999;\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: fit-content;\n  padding: var(--espace-xl);\n  opacity: 0;\n  background-color: var(--couleur-gris);\n  border-bottom: 1px solid var(--couleur-noir);\n  animation: fade-in 400ms 200ms both;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation {\n  grid-template-columns: 1fr;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation ul {\n  grid-column: initial;\n  flex-flow: column nowrap;\n  place-items: center;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation ul > span {\n  width: fit-content;\n}\n#menu-mobile .menu-modale__conteneur .menu-navigation ul > span li a {\n  padding-top: var(--espace-m);\n  padding-bottom: var(--espace-m);\n}\n\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n@keyframes slide-in {\n  to {\n    transform: translateY(0);\n  }\n}\n#en-tete {\n  /* Marges */\n  --en-tete-marges-internes-ligne: var(--espace-xl);\n  --en-tete-marges-internes-bloc: var(--espace-m);\n  /* Dimensions */\n  --en-tete-section-hauteur: var(--en-tete-hauteur);\n  --en-tete-logo-longueur: 80px;\n  position: fixed;\n  z-index: 60;\n  top: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  place-items: center;\n  justify-content: space-between;\n  min-width: 100vw;\n  max-width: 100vw;\n  height: var(--en-tete-hauteur);\n  padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);\n  font-size: 1.1rem;\n  background: var(--couleur-gris);\n  border-bottom: 1px solid var(--couleur-noir);\n  /* TODO: Déplacer au sein d'un Composant ? */\n}\n#en-tete .logo {\n  width: var(--en-tete-logo-longueur);\n}\n#en-tete .logo picture, #en-tete .logo img {\n  background: transparent;\n}\n#en-tete .logo button {\n  display: block;\n  align-content: center;\n}\n#en-tete .menu-navigation {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  flex: 1;\n  text-align: center;\n  text-transform: lowercase;\n  /*\n   * Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au\n   * survol soit possible.\n   *\n   * 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.\n   * 2. Augmente les marges internes pour créer des liens plus imposants.\n   * 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.\n   * 4. Aligne le texte au centre.\n   */\n}\n#en-tete .menu-navigation ul {\n  display: flex;\n  grid-column: 2;\n  flex-flow: row nowrap;\n  gap: var(--espace-m);\n  justify-content: space-between;\n}\n#en-tete .menu-navigation__entree {\n  /* Marges */\n  --nav-entree-marges-internes-bloc: var(--espace-xs);\n  --nav-entree-marges-internes-ligne: 3rem;\n  --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */\n  /* Dispositions */\n  --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */\n}\n#en-tete .menu-navigation__entree a {\n  display: inline-block; /* 1 */\n  padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */\n  text-align: center; /* 4 */\n}\n#en-tete .menu-navigation__entree--courante {\n  background: url(\"/app/themes/haiku-atelier-2024/assets/img/icons/cloud.svg\") center/auto 90% no-repeat;\n}\n@media (hover: hover) {\n  #en-tete .menu-navigation__entree:hover {\n    background: url(\"/app/themes/haiku-atelier-2024/assets/img/icons/cloud.svg\") center/auto 90% no-repeat;\n  }\n}\n@media (width <= 1000px) {\n  #en-tete .menu-navigation#menu-navigation-en-tete {\n    display: none;\n  }\n}\n#en-tete .compte-panier {\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 1rem;\n  place-items: center;\n  text-align: center;\n  /*\n   * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.\n   */\n}\n#en-tete .compte-panier a {\n  min-width: 10ch; /* 1 */\n  text-transform: lowercase;\n}\n#en-tete .compte-panier a.lien-compte {\n  border-color: transparent;\n}\n#en-tete .compte-panier a[data-contient-articles=true] {\n  background: var(--couleur-jaune);\n}\n\n/*\n * Le menu avec les Catégories de Produits pour une navigation rapide.\n *\n * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher\n *    correctement.\n */\n#menu-categories-produits {\n  /* Dimensions */\n  --menu-entree-longueur-minimale: 13ch;\n  --menu-section-hauteur: var(--menu-categories-produits-hauteur);\n  /* Marges */\n  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */\n  --menu-entree-marges-internes-ligne: var(--espace-m);\n  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */\n  /*\n   * Liste des Catégories de Produits.\n   *\n   * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur\n   * minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la\n   * ligne.\n   */\n}\n#menu-categories-produits ul {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */\n  gap: 1px;\n  place-items: center;\n  /*\n   * 1. Force chaque entrée à occuper tout l'espace alloué par grid.\n   */\n}\n#menu-categories-produits ul li {\n  width: 100%; /* 1 */\n  font-weight: 450;\n  font-style: italic;\n  color: var(--couleur-gris);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n  background: var(--couleur-noir);\n  /*\n   * 1. Permet de créer des marges verticales.\n   * 2. Hérite de la longueur du conteneur.\n   * 3. Surchargement de styles pour les liens.\n   */\n}\n#menu-categories-produits ul li.categorie-courante a {\n  color: var(--couleur-jaune);\n}\n#menu-categories-produits ul li:active a {\n  font-weight: 500;\n}\n#menu-categories-produits ul li a {\n  display: inline-block; /* 1 */\n  width: inherit; /* 2 */\n  padding: var(--menu-entree-marges-internes-ligne) 0;\n  outline: initial; /* 3 */\n}\n#menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {\n  color: var(--couleur-jaune);\n  outline: initial; /* 3 */\n}\n@media (hover: hover) {\n  #menu-categories-produits ul li a:hover {\n    color: var(--couleur-jaune);\n    outline: initial; /* 3 */\n  }\n}\n@media (width <= 900px) {\n  #menu-categories-produits ul {\n    --menu-entree-marges-internes-ligne: var(--espace-s);\n    display: flex;\n    flex-flow: row wrap;\n    font-size: 0.9rem;\n  }\n  #menu-categories-produits ul li {\n    flex-grow: 1;\n    width: min(140px, 100%);\n  }\n  #menu-categories-produits ul li a {\n    width: 100%;\n    border: initial;\n  }\n}\n\n/*\n * Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos\n * portées.\n *\n * La colonne de gauche ne contiendra qu'une photo, et restera fixe tout le long du défilement\n * de la boîte. La colonne de droite contiendra plusieurs photos et défilera normalement, photo par * photo.\n */\n.photos-produit {\n  /* Positions */\n  --colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);\n  /* Dimensions */\n  --colonne-gauche-photo-hauteur: calc(100svh - var(--menu-categories-produits-hauteur));\n  --colonne-droite-photo-hauteur-minimale: calc(\n    100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)\n  );\n  --colonne-photo-longueur-minimale: 30rem;\n  /* Marges */\n  --section-marges-externes-bloc-fin: 1rem;\n  display: flex;\n  flex-flow: row wrap;\n  max-width: 100%;\n}\n.photos-produit > section {\n  position: relative;\n  display: flex;\n  flex-flow: column nowrap;\n  flex-grow: 1;\n  width: min(var(--colonne-photo-longueur-minimale), 100%);\n}\n.photos-produit > section.colonne-gauche {\n  position: sticky;\n  top: var(--colonne-gauche-position-haut);\n  height: var(--colonne-gauche-photo-hauteur);\n}\n.photos-produit > section.colonne-gauche figure, .photos-produit > section.colonne-gauche picture, .photos-produit > section.colonne-gauche img {\n  height: 100%;\n}\n.photos-produit > section.colonne-droite figure picture img:only-child {\n  min-height: var(--colonne-droite-photo-hauteur-minimale);\n  max-height: var(--colonne-droite-photo-hauteur-minimale);\n}\n\n/*\n * La Grille des Produits sous forme de Cartes.\n *\n * Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper\n * entièrement.\n * Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci\n * se dispose sur une nouvelle ligne.\n *\n * 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.\n * 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border\n * collapse »).\n */\n.grille-produits {\n  /* Dimensions */\n  --aucun-produit-hauteur: calc(\n    100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)\n      - var(--pied-de-page-hauteur)\n  );\n  --carte-produit-longueur-minimale: 448px;\n  display: grid;\n  grid-auto-rows: 1fr;\n  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */\n  gap: 1px; /* 2 */\n}\n.grille-produits article {\n  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */\n}\n.grille-produits article figure {\n  display: flex;\n  flex-flow: column nowrap;\n  row-gap: var(--espace-xl);\n  padding: var(--espace-m);\n}\n.grille-produits article figure a {\n  position: relative;\n}\n@media (hover: hover) {\n  .grille-produits article figure a:hover .produit__illustration__survol {\n    visibility: visible;\n    opacity: 1;\n    transition: 0.3s opacity, 0.3s visibility;\n  }\n}\n.grille-produits article figure .produit__illustration__principale {\n  display: block;\n}\n.grille-produits article figure .produit__illustration__survol {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition: 0.15s opacity, 0.15s visibility;\n}\n.grille-produits article figure img {\n  aspect-ratio: 9/16;\n  width: 100%;\n  max-height: 70vh;\n  object-fit: cover;\n}\n.grille-produits article figure figcaption {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  margin-bottom: var(--espace-xl);\n}\n.grille-produits article figure figcaption h3 {\n  font-style: italic;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n}\n.grille-produits article figure figcaption p {\n  font-weight: 500;\n  letter-spacing: var(--espacement-inter-lettres-rapproche-s);\n}\n.grille-produits__aucun-produit {\n  grid-column: span 3;\n  align-content: center;\n  min-height: var(--aucun-produit-hauteur);\n  text-align: center;\n}\n.grille-produits__aucun-produit p + p {\n  margin-top: var(--espace-l);\n  font-size: 1.25rem;\n}\n@media (width <= 700px) {\n  .grille-produits {\n    grid-template-columns: 100%;\n  }\n  .grille-produits article figure img {\n    max-height: 50svh;\n  }\n}\n\n/*\n * Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le\n * Panier.\n *\n * 1. Flotte toujours en bas de la page et s'arrête avant les Produits de la même collection.\n * 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.\n */\n.informations-produit {\n  --boite-couleur-fond: rgb(255 255 255 / 90%);\n  --boite-position-basse: 1rem;\n  --boite-longueur: 70ch;\n  --section-marges-internes: 1rem;\n  position: sticky; /* 1 */\n  bottom: var(--boite-position-basse); /* 1 */\n  overflow: visible;\n  width: 0; /* 2 */\n  height: 0; /* 2 */\n  /* Nom du Produit, sélecteur de variation et prix du Produit */\n  /* Bouton « Ajouter au Panier » */\n}\n.informations-produit__conteneur {\n  transform: translate(calc(50vw - var(--boite-longueur) / 2), -100%);\n  display: grid;\n  width: var(--boite-longueur);\n  max-width: var(--boite-longueur);\n  border: 1px solid var(--couleur-noir);\n  /*\n   * Définis les apparence et comportement de toutes les sections de la boîte.\n   */\n}\n.informations-produit__conteneur > section {\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  padding: var(--section-marges-internes);\n  background: var(--boite-couleur-fond);\n}\n.informations-produit__conteneur > section + section {\n  border-top: 1px solid var(--couleur-noir);\n}\n.informations-produit .onglets-details-produit {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  grid-template-rows: auto min-content;\n  padding: initial;\n}\n.informations-produit .onglets-details-produit > section {\n  overflow-y: auto;\n  grid-column: span 3;\n  padding: var(--section-marges-internes);\n  font-weight: 350;\n}\n.informations-produit .onglets-details-produit > section ul {\n  list-style: disc;\n  list-style-position: inside;\n}\n.informations-produit .onglets-details-produit > section > * + * {\n  margin-top: 1lh;\n}\n.informations-produit .onglets-details-produit > ul {\n  display: grid;\n  grid-column: span 3;\n  grid-row: 2;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  text-align: center;\n  text-transform: lowercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n}\n.informations-produit .onglets-details-produit > ul li {\n  width: 100%;\n}\n.informations-produit .onglets-details-produit > ul li:first-of-type a {\n  border-right-color: transparent;\n  border-left-color: transparent;\n}\n.informations-produit .onglets-details-produit > ul li:last-of-type a {\n  border-right-color: transparent;\n  border-left-color: transparent;\n}\n.informations-produit .onglets-details-produit > ul li a {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n  padding: var(--espace-xs) 0;\n  border-top: 1px solid transparent;\n  border-right: 1px solid var(--couleur-noir);\n  border-left: 1px solid var(--couleur-noir);\n  /* Quand l'onglet est sélectionné */\n}\n.informations-produit .onglets-details-produit > ul li a[aria-selected=true] {\n  border-top-color: transparent;\n}\n.informations-produit .onglets-details-produit > ul li a:focus, .informations-produit .onglets-details-produit > ul li a:focus-visible {\n  outline-color: transparent;\n}\n.informations-produit .onglets-details-produit:has(section:not([hidden])) > ul li a:not([aria-selected=true]) {\n  border-top-color: var(--couleur-noir);\n}\n.informations-produit .selecteur-produit {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  place-items: center;\n  justify-content: space-between;\n  font-weight: 500;\n  font-style: italic;\n  line-height: var(--hauteur-ligne-rapprochee);\n}\n.informations-produit .selecteur-produit__nom {\n  letter-spacing: 1px;\n}\n.informations-produit .selecteur-produit__selection-variation {\n  display: flex;\n  place-items: center;\n  font-weight: 400;\n  text-transform: lowercase;\n  /* Texte du sélecteur */\n  /* Conteneur des sélecteurs */\n}\n.informations-produit .selecteur-produit__selection-variation label {\n  height: 100%;\n  margin-right: 1ch;\n}\n.informations-produit .selecteur-produit__selection-variation__selecteurs {\n  position: relative;\n  /* Icône de flèche descendante */\n}\n.informations-produit .selecteur-produit__selection-variation__selecteurs::after {\n  pointer-events: none;\n  content: \" \";\n  position: absolute;\n  top: 10px;\n  right: 0.4rem;\n  display: inline-block;\n  width: 0.9rem;\n  height: 0.9rem;\n  text-align: center;\n  visibility: visible;\n  opacity: 1;\n  background: url(\"/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg\") no-repeat;\n  transition: opacity 0.2s, visibility 0.2s;\n}\n@supports not selector(:user-valid) {\n  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid)::after {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n@supports selector(:user-valid) {\n  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid)::after {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n.informations-produit .selecteur-produit__selection-variation select {\n  position: relative;\n  min-width: 4rem;\n  padding: var(--espace-s) var(--espace-xl);\n  text-align: center;\n  appearance: none;\n  background: rgba(236, 234, 235, 0.9);\n  border: 1px solid var(--couleur-noir);\n}\n@supports selector(:user-valid) {\n  .informations-produit .selecteur-produit__selection-variation select:user-valid {\n    background: rgba(235, 255, 184, 0.9);\n  }\n}\n.informations-produit .selecteur-produit__selection-variation option {\n  background: rgba(236, 234, 235, 0.9);\n}\n.informations-produit .selecteur-produit__prix {\n  font-style: initial;\n}\n.informations-produit .actions-produit {\n  overflow: hidden;\n  background: var(--couleur-jaune);\n  transition: 0.2s background;\n  /* Indique que le Bouton est désactivé en utilisant un fond gris */\n}\n.informations-produit .actions-produit:has(button[disabled]) {\n  background: rgba(236, 234, 235, 0.9);\n}\n.informations-produit .actions-produit button {\n  font-variation-settings: \"wght\" 400;\n  font-style: italic;\n  text-transform: uppercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n  transition: 0.2s font-variation-settings;\n  /* Change la casse de la police au survol quand le Bouton n'est pas désactivé */\n}\n@media (hover: hover) {\n  .informations-produit .actions-produit button:not([disabled]):hover {\n    font-variation-settings: \"wght\" 500;\n  }\n}\n@media (width <= 700px) {\n  .informations-produit {\n    position: relative;\n    bottom: initial;\n    width: initial;\n    height: initial;\n  }\n  .informations-produit__conteneur {\n    transform: initial;\n    width: initial;\n    max-width: initial;\n    border-right: initial;\n    border-left: initial;\n  }\n}\n\n@media (hover: hover) {\n  .selecteur-personnalise {\n    display: block !important;\n  }\n  .selecteur-natif:focus + .selecteur-personnalise {\n    display: none !important;\n  }\n}\n.produits-similaires {\n  /* Dimensions */\n  --carte-produit-longueur-minimale: 448px;\n  display: grid;\n  grid-template-areas: \"en-tete en-tete en-tete\" \"produits produits produits\";\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 1fr auto;\n  place-items: center;\n  margin-top: var(--espace-m);\n  /* En-tête de la section */\n}\n.produits-similaires header {\n  grid-area: en-tete;\n  width: 100%;\n  padding: var(--espace-l) 0 var(--espace-m);\n  color: var(--couleur-blanc);\n  text-align: center;\n  background: var(--couleur-noir);\n}\n.produits-similaires header h2 {\n  font-style: italic;\n  line-height: var(--hauteur-ligne-rapprochee);\n  text-transform: uppercase;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n}\n.produits-similaires .grille-produits-similaires {\n  display: grid;\n  grid-area: produits;\n  grid-auto-rows: 1fr;\n  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));\n  gap: 1px;\n  width: 100%;\n}\n.produits-similaires .grille-produits-similaires article {\n  box-shadow: 0 0 0 1px var(--couleur-noir);\n}\n.produits-similaires .grille-produits-similaires article figure {\n  display: flex;\n  flex-flow: column nowrap;\n  row-gap: var(--espace-xl);\n  padding: var(--espace-m);\n}\n.produits-similaires .grille-produits-similaires article figure a {\n  position: relative;\n}\n@media (hover: hover) {\n  .produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol {\n    visibility: visible;\n    opacity: 1;\n    transition: 0.3s opacity, 0.3s visibility;\n  }\n}\n.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale {\n  display: block;\n}\n.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition: 0.15s opacity, 0.15s visibility;\n}\n.produits-similaires .grille-produits-similaires article figure img {\n  aspect-ratio: 9/16;\n  width: 100%;\n  max-height: 70svh;\n  object-fit: cover;\n}\n.produits-similaires .grille-produits-similaires article figure figcaption {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  margin-bottom: var(--espace-xl);\n}\n.produits-similaires .grille-produits-similaires article figure figcaption h3 {\n  font-style: italic;\n  letter-spacing: var(--espacement-inter-lettres-etendu-m);\n}\n.produits-similaires .grille-produits-similaires article figure figcaption p {\n  font-weight: 500;\n  letter-spacing: var(--espacement-inter-lettres-rapproche-s);\n}\n@media (width <= 700px) {\n  .produits-similaires .grille-produits-similaires {\n    grid-template-columns: 100%;\n  }\n  .produits-similaires .grille-produits-similaires article figure img {\n    max-height: 50svh;\n  }\n}\n\n#pied-de-page {\n  /* Marges */\n  --pied-de-page-marges-internes-bloc: var(--espace-m);\n  --pied-de-page-marges-internes-ligne: var(--espace-xl);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  place-items: center;\n  max-width: 100vw;\n  height: var(--pied-de-page-hauteur);\n  padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);\n  background: var(--couleur-jaune);\n  border-top: 1px solid var(--couleur-noir);\n}\n#pied-de-page .zone-menu-navigation-secondaire {\n  justify-self: start;\n  width: 100%;\n  height: 100%;\n  text-transform: lowercase;\n}\n#pied-de-page .zone-liens-reseaux-sociaux {\n  justify-items: end;\n  width: 100%;\n  height: 100%;\n  text-align: right;\n}\n\n/*# sourceMappingURL=main.css.map */\n"],"names":[]}
\ No newline at end of file
diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css
index 3db7721b..9fa72d15 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css
@@ -6,15 +6,50 @@
 }
 
 #page-a-propos .storytelling {
-  padding: var(--espace-xl);
+  padding: var(--espace-xl) 0;
 }
 
 #page-a-propos .storytelling__conteneur {
-  border: 1px solid red;
-  width: 100%;
-  max-width: 60rem;
+  width: min(60rem, 100% - 4rem);
+  height: 2000px;
   margin: auto;
   position: relative;
+  overflow-x: hidden;
+}
+
+#page-a-propos .storytelling__section {
+  position: relative;
+}
+
+#page-a-propos .storytelling picture {
+  position: absolute;
+}
+
+#page-a-propos .storytelling picture#image-1 {
+  z-index: 20;
+  width: 40%;
+  left: 50%;
+}
+
+#page-a-propos .storytelling picture#image-2 {
+  z-index: 19;
+  width: 70%;
+  top: 8vmin;
+  scale: -1 1;
+}
+
+#page-a-propos .storytelling picture#image-3 {
+  z-index: 21;
+  width: 30%;
+  top: 54vmin;
+  left: 35%;
+}
+
+#page-a-propos .storytelling picture#image-4 {
+  z-index: 20;
+  width: 60%;
+  top: 60vmin;
+  left: 40%;
 }
 
 #page-a-propos .storytelling img {
@@ -22,21 +57,23 @@
   background: none;
   width: fit-content;
   height: auto;
-  position: relative;
 }
 
-#page-a-propos .storytelling img#image-1 {
-  z-index: 20;
-  width: 30%;
-  left: 60%;
-}
-
-#page-a-propos .storytelling img#image-2 {
-  z-index: 19;
-  width: 70%;
+#page-a-propos .storytelling .texte {
+  max-width: 15rem;
+  font-size: .9rem;
+  font-style: italic;
+  font-weight: 500;
   position: absolute;
-  top: 15%;
-  scale: -1 1;
+}
+
+#page-a-propos .storytelling .texte#texte-1 {
+  top: 42vmin;
+  right: 0;
+}
+
+#page-a-propos .storytelling .texte p + p {
+  margin-top: var(--espace-m);
 }
 
 /*# sourceMappingURL=web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css.map */
diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css.map
index 64927b9c..a7a3485c 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css.map
+++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css.map
@@ -1 +1 @@
-{"version":3,"mappings":"AAAA;;;;;;;AAOA;;;;AAGA;;;;;;;;AAOA;;;;;;;;AAOA;;;;;;AAKA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css"],"sourcesContent":["#page-a-propos {\n  /* Marges */\n  --page-marges-bloc-debut: var(--en-tete-hauteur);\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: var(--page-marges-bloc-debut);\n}\n#page-a-propos .storytelling {\n  padding: var(--espace-xl);\n}\n#page-a-propos .storytelling__conteneur {\n  position: relative;\n  width: 100%;\n  max-width: 60rem;\n  margin: auto;\n  border: 1px solid red;\n}\n#page-a-propos .storytelling img {\n  position: relative;\n  width: fit-content;\n  height: auto;\n  object-fit: contain;\n  background: transparent;\n}\n#page-a-propos .storytelling img#image-1 {\n  z-index: 20;\n  left: 60%;\n  width: 30%;\n}\n#page-a-propos .storytelling img#image-2 {\n  position: absolute;\n  z-index: 19;\n  top: 15%;\n  scale: -1 1;\n  width: 70%;\n}\n\n/*# sourceMappingURL=page-a-propos.css.map */\n"],"names":[]}
\ No newline at end of file
+{"version":3,"mappings":"AAAA;;;;;;;AAOA;;;;AAGA;;;;;;;;AAOA;;;;AAGA;;;;AAGA;;;;;;AAKA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;;AAOA;;;;;AAIA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css"],"sourcesContent":["#page-a-propos {\n  /* Marges */\n  --page-marges-bloc-debut: var(--en-tete-hauteur);\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: var(--page-marges-bloc-debut);\n}\n#page-a-propos .storytelling {\n  padding: var(--espace-xl) 0;\n}\n#page-a-propos .storytelling__conteneur {\n  position: relative;\n  overflow-x: hidden;\n  width: min(60rem, 100% - 4rem);\n  height: 2000px;\n  margin: auto;\n}\n#page-a-propos .storytelling__section {\n  position: relative;\n}\n#page-a-propos .storytelling picture {\n  position: absolute;\n}\n#page-a-propos .storytelling picture#image-1 {\n  z-index: 20;\n  left: 50%;\n  width: 40%;\n}\n#page-a-propos .storytelling picture#image-2 {\n  z-index: 19;\n  top: 8vmin;\n  scale: -1 1;\n  width: 70%;\n}\n#page-a-propos .storytelling picture#image-3 {\n  z-index: 21;\n  top: 54vmin;\n  left: 35%;\n  width: 30%;\n}\n#page-a-propos .storytelling picture#image-4 {\n  z-index: 20;\n  top: 60vmin;\n  left: 40%;\n  width: 60%;\n}\n#page-a-propos .storytelling img {\n  width: fit-content;\n  height: auto;\n  object-fit: contain;\n  background: transparent;\n}\n#page-a-propos .storytelling .texte {\n  position: absolute;\n  max-width: 15rem;\n  font-size: 0.9rem;\n  font-weight: 500;\n  font-style: italic;\n}\n#page-a-propos .storytelling .texte#texte-1 {\n  top: 42vmin;\n  right: 0;\n}\n#page-a-propos .storytelling .texte p + p {\n  margin-top: var(--espace-m);\n}\n\n/*# sourceMappingURL=page-a-propos.css.map */\n"],"names":[]}
\ No newline at end of file
diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css
index 4e0957b1..325cd73c 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css
@@ -57,7 +57,7 @@
   font-style: initial;
   border: 1px solid var(--couleur-noir);
   /* Bouton d'addition de quantité */
-  /* *
+  /*
    * 1. Cache les flèches d'augmentation/diminution sur Firefox.
    * 2. Cache les flèches d'augmentation/diminution sur Chrome/Edge/Safari.
    */
@@ -140,7 +140,7 @@
   padding: var(--espace-l) var(--espace-xl);
   text-align: center;
   border-bottom: 1px solid var(--couleur-noir);
-  /* *
+  /*
    * 1. Nécessaire pour ne pas qu'un espace vertical non souhaité apparaisse.
    * 2. Applique une marge entre les instructions et le code promo de notre choix.
    */
diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css.map
index 6e08da3e..f40ef011 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css.map
+++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css.map
@@ -1 +1 @@
-{"version":3,"mappings":"AACA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;;;AAMA;;;;;;AAKA;;;;;;AAKA;;;;;;;;;;AASA;;;;;;;;AAOA;;;;;AAIA;;;;;AAIA;;;;;;;;;AAeA;;;;AAGA;;;;;;AAKA;;;;;;;;;;AASA;;;;;AAIA;;;;;;AAKA;;;;;;;AAOA;EACE;;;;;;AAKF;;;;;;;;AAOA;;;;;AAIA;;;;;;AAKA;;;;;AAIA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAUA;;;;;;;;;;;;;AAYA;;;;;;;AAMA;;;;AAGA;;;;;;;;;AAQA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;;;;AAOA;;;;;;;;;;;;AAWA;;;;;AAKA;;;;;AAIA;;;;;;;;;AAQA;;;;;AAIA;;;;;;;;;;;AAUA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;;;;;;;;;AAYA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;;;;;AAOA;;;;;;AAKA;;;;;;;;AAOA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;AAUA;;;;;;;;;AAUA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;;;;;;;;;AAYA;;;;;;;;;AAQA;;;;;;;;AAOA;;;;AAGA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css"],"sourcesContent":["@charset \"UTF-8\";\n#panneau-panier {\n  border-right: 1px solid var(--couleur-noir);\n}\n#panneau-panier > div {\n  place-content: center;\n}\n#panneau-panier .panneau__grille-produits {\n  display: flex;\n  flex-flow: column nowrap;\n}\n#panneau-panier .panneau__grille-produits__produit {\n  display: grid;\n  grid-template-columns: max-content auto;\n  grid-template-rows: 1fr;\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__grille-produits__produit__illustratif {\n  padding: var(--espace-l);\n  text-align: center;\n  border-right: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__grille-produits__produit__illustratif img {\n  aspect-ratio: 1;\n  width: fit-content;\n  margin: auto;\n}\n#panneau-panier .panneau__grille-produits .detail-produit {\n  display: flex;\n  flex-flow: column nowrap;\n  place-content: center;\n  width: fit-content;\n  margin: auto;\n  padding: 0 var(--espace-xl);\n  font-style: italic;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__nom-prix {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  justify-content: space-between;\n  font-size: var(--espace-l);\n}\n#panneau-panier .panneau__grille-produits .detail-produit__nom-prix span {\n  font-weight: 600;\n  font-style: initial;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__description {\n  margin-bottom: var(--espace-l);\n  text-transform: lowercase;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions {\n  display: grid;\n  grid-template-columns: 0.25fr auto 0.25fr;\n  grid-template-rows: 1fr 1fr;\n  font-weight: 500;\n  font-style: initial;\n  border: 1px solid var(--couleur-noir);\n  /* Bouton d'addition de quantité */\n  /* *\n   * 1. Cache les flèches d'augmentation/diminution sur Firefox.\n   * 2. Cache les flèches d'augmentation/diminution sur Chrome/Edge/Safari.\n   */\n  /* Bouton de suppression de quantité */\n  /* Bouton de suppression du Produit du Panier */\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:disabled {\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:first-of-type {\n  grid-column: 1;\n  min-width: 3rem;\n  max-width: 3rem;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions input[type=number] {\n  grid-column: 2;\n  width: 100%;\n  text-align: center;\n  appearance: textfield; /* 1 */\n  border: initial;\n  border-right: 1px solid var(--couleur-noir);\n  border-left: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions input[type=number]::-webkit-outer-spin-button, #panneau-panier .panneau__grille-produits .detail-produit__actions input[type=number]::-webkit-inner-spin-button {\n  margin: 0; /* 2 */\n  appearance: none; /* 2 */\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:nth-of-type(2) {\n  grid-column: 3;\n  min-width: 3rem;\n  max-width: 3rem;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:last-of-type {\n  grid-column: span 3;\n  grid-row: 2;\n  padding: var(--espace-xs);\n  text-transform: lowercase;\n  border-top: 1px solid var(--couleur-noir);\n}\n@media (hover: hover) {\n  #panneau-panier .panneau__grille-produits .detail-produit__actions button:last-of-type:hover {\n    color: var(--couleur-blanc);\n    background: var(--couleur-noir);\n  }\n}\n#panneau-panier .panneau__emballages {\n  width: 100%;\n  padding: var(--espace-l) 0;\n  font-style: italic;\n  text-align: center;\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__emballages__conteneur {\n  width: fit-content;\n  margin: auto;\n}\n#panneau-panier .panneau__emballages__titre-prix p {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n}\n#panneau-panier .panneau__emballages__titre-prix p span {\n  font-weight: 600;\n  font-style: initial;\n}\n#panneau-panier .panneau__emballages__choix {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  text-transform: lowercase;\n}\n#panneau-panier .panneau__emballages__choix__ligne {\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 1ch;\n  place-items: center;\n}\n#panneau-panier .panneau__instructions-code-promo {\n  width: 100%;\n  padding: var(--espace-l) var(--espace-xl);\n  text-align: center;\n  border-bottom: 1px solid var(--couleur-noir);\n  /* *\n   * 1. Nécessaire pour ne pas qu'un espace vertical non souhaité apparaisse.\n   * 2. Applique une marge entre les instructions et le code promo de notre choix.\n   */\n}\n#panneau-panier .panneau__instructions-code-promo__instructions {\n  resize: vertical;\n  display: block; /* 1 */\n  width: 100%;\n  margin: auto; /* 1 */\n  margin-bottom: var(--espace-s); /* 2 */\n  padding: var(--espace-s);\n  font-size: 0.8rem;\n  font-weight: 450;\n  background: initial;\n  border: 1px solid transparent;\n}\n#panneau-panier .panneau__instructions-code-promo__code-promo {\n  display: flex;\n  flex-flow: row nowrap;\n  width: fit-content;\n  margin: auto;\n}\n#panneau-panier .panneau__instructions-code-promo__code-promo input {\n  width: 20rem;\n}\n#panneau-panier .panneau__instructions-code-promo__code-promo button {\n  padding: var(--espace-xs) var(--espace-xl);\n  color: var(--couleur-blanc);\n  text-transform: lowercase;\n  background: var(--couleur-noir);\n  border: 1px solid var(--couleur-noir);\n  border-left: initial;\n}\n#panneau-panier .panneau__sous-totaux {\n  width: min(30rem, 100%);\n  margin: auto;\n  padding: var(--espace-l) var(--espace-xl);\n  text-align: center;\n}\n#panneau-panier .panneau__sous-totaux__ligne {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  font-style: italic;\n}\n#panneau-panier .panneau__sous-totaux__ligne strong {\n  text-align: right;\n  text-transform: lowercase;\n}\n#panneau-panier .panneau__sous-totaux__ligne#sous-total-livraison p:last-of-type {\n  text-align: right;\n}\n#panneau-panier .panneau__sous-totaux__ligne#sous-total-livraison p:last-of-type span {\n  color: grey;\n}\n#panneau-panier .panneau__sous-totaux__conditions-livraison {\n  margin-top: var(--espace-l);\n  font-size: 0.8rem;\n  font-weight: 450;\n  color: grey;\n  letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\n#panneau-panier .panneau__pied-de-page {\n  align-content: center;\n  padding: var(--espace-l) 0;\n  font-size: 1.25rem;\n  font-style: italic;\n  color: var(--couleur-blanc);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  background: var(--couleur-noir);\n}\n#panneau-panier .panneau__pied-de-page span {\n  margin-left: var(--espace-l);\n  font-style: initial;\n}\n\n#panneau-informations-client > * {\n  align-content: center;\n  text-align: center;\n}\n#panneau-informations-client .panneau__paypal-express {\n  --hauteur-images-bouton: 18px;\n  --hauteur-bouton: calc(var(--hauteur-images-bouton) * 2);\n  --longueur-bouton: 250px;\n  --espacement-inter-images: var(--espace-xs);\n  padding: var(--espace-xl);\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#panneau-informations-client .panneau__paypal-express p {\n  margin-bottom: var(--espace-s);\n  font-style: italic;\n}\n#panneau-informations-client .panneau__paypal-express button {\n  display: flex;\n  column-gap: var(--espacement-inter-images);\n  place-content: center;\n  place-items: center;\n  width: var(--longueur-bouton);\n  height: var(--hauteur-bouton);\n  margin: auto;\n  background: var(--couleur-noir);\n}\n#panneau-informations-client .panneau__paypal-express button img {\n  height: var(--hauteur-images-bouton);\n  background: inherit;\n}\n#panneau-informations-client .panneau__paypal-express button img:first-of-type {\n  margin-top: -1px;\n}\n#panneau-informations-client .panneau__formulaires {\n  padding: var(--espace-xl) 0;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__separation-adresses {\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: 1ch;\n  place-items: center;\n  width: fit-content;\n  margin: auto;\n  margin-bottom: var(--espace-m);\n  font-size: 0.9rem;\n  font-style: italic;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__separation-adresses label {\n  text-transform: lowercase;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__paiement .formulaire__paiement__attente-renseignement-formulaires {\n  align-content: center;\n  width: 100%;\n  padding: 0;\n  text-align: center;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__paiement .formulaire__paiement__attente-renseignement-formulaires p {\n  font-style: italic;\n}\n#panneau-informations-client .formulaire {\n  margin: auto;\n  padding: 0 var(--espace-xl);\n}\n#panneau-informations-client .formulaire + .formulaire {\n  margin-top: var(--espace-xl);\n}\n#panneau-informations-client .formulaire .formulaire__titre {\n  margin-bottom: var(--espace-m);\n  font-size: 1.25rem;\n  font-weight: 600;\n  font-style: italic;\n  letter-spacing: 1px;\n}\n#panneau-informations-client .formulaire .formulaire__champs {\n  width: fit-content;\n  margin: auto;\n  text-align: left;\n}\n#panneau-informations-client .formulaire .formulaire__champs .formulaire__champs__champ {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  place-items: center;\n  justify-content: space-between;\n}\n#panneau-informations-client .formulaire .formulaire__champs .formulaire__champs__champ + .formulaire__champs__champ {\n  margin-top: var(--espace-l);\n}\n#panneau-informations-client .formulaire label {\n  font-weight: 400;\n  text-transform: lowercase;\n}\n#panneau-informations-client .formulaire label:has(+ :is(input:required, select:required)) {\n  font-weight: 600;\n}\n#panneau-informations-client .formulaire input {\n  width: 15rem;\n}\n#panneau-informations-client .panneau__pied-de-page {\n  align-content: center;\n  padding: var(--espace-l) 0;\n  font-size: 1.25rem;\n  font-style: italic;\n  color: var(--couleur-blanc);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  background: var(--couleur-noir);\n}\n#panneau-informations-client .panneau__pied-de-page button {\n  font: inherit;\n  color: inherit;\n  text-transform: inherit;\n}\n\n/* *\n * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher\n *    correctement.\n */\n#page-panier {\n  /* Dimensions */\n  --menu-section-hauteur: var(--menu-categories-produits-hauteur);\n  /* Marges */\n  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */\n  display: flex;\n  flex-flow: row wrap;\n  min-height: calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n  margin-top: var(--menu-section-marges-bloc-debut);\n}\n#page-panier[data-contient-articles=false] .panneau {\n  display: none;\n}\n#page-panier[data-contient-articles=false] .panier-vide {\n  display: block;\n}\n#page-panier .panneau {\n  flex: 1 1 30rem;\n  min-width: 30rem;\n  border-top: 1px solid var(--couleur-noir);\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#page-panier .panneau__en-tete {\n  position: sticky;\n  z-index: 2;\n  top: var(--menu-section-marges-bloc-debut);\n  display: block;\n  align-content: center;\n  min-height: var(--menu-categories-produits-hauteur);\n  max-height: var(--menu-categories-produits-hauteur);\n  color: var(--couleur-gris);\n  text-align: center;\n  background: var(--couleur-noir);\n}\n#page-panier .panneau__en-tete h2 {\n  font-weight: 450;\n  font-style: italic;\n  color: var(--couleur-gris);\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  background: var(--couleur-noir);\n}\n#page-panier .panier-vide {\n  display: none;\n  flex-basis: 100%;\n  align-content: center;\n  min-height: calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n  text-align: center;\n}\n#page-panier .panier-vide p {\n  font-size: 1.25rem;\n}\n#page-panier .panier-vide a {\n  display: inline-block;\n  margin-top: var(--espace-m);\n  font-size: initial;\n}\n\n/*# sourceMappingURL=page-panier.css.map */\n"],"names":[]}
\ No newline at end of file
+{"version":3,"mappings":"AACA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;;;AAMA;;;;;;AAKA;;;;;;AAKA;;;;;;;;;;AASA;;;;;;;;AAOA;;;;;AAIA;;;;;AAIA;;;;;;;;;AAeA;;;;AAGA;;;;;;AAKA;;;;;;;;;;AASA;;;;;AAIA;;;;;;AAKA;;;;;;;AAOA;EACE;;;;;;AAKF;;;;;;;;AAOA;;;;;AAIA;;;;;;AAKA;;;;;AAIA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAUA;;;;;;;;;;;;;AAYA;;;;;;;AAMA;;;;AAGA;;;;;;;;;AAQA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;;;;AAOA;;;;;;;;;;;;AAWA;;;;;AAKA;;;;;AAIA;;;;;;;;;AAQA;;;;;AAIA;;;;;;;;;;;AAUA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;;;;;;;;;AAYA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;;;;;AAOA;;;;;;AAKA;;;;;;;;AAOA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;AAUA;;;;;;;;;AAUA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;;;;;;;;;AAYA;;;;;;;;;AAQA;;;;;;;;AAOA;;;;AAGA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css"],"sourcesContent":["@charset \"UTF-8\";\n#panneau-panier {\n  border-right: 1px solid var(--couleur-noir);\n}\n#panneau-panier > div {\n  place-content: center;\n}\n#panneau-panier .panneau__grille-produits {\n  display: flex;\n  flex-flow: column nowrap;\n}\n#panneau-panier .panneau__grille-produits__produit {\n  display: grid;\n  grid-template-columns: max-content auto;\n  grid-template-rows: 1fr;\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__grille-produits__produit__illustratif {\n  padding: var(--espace-l);\n  text-align: center;\n  border-right: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__grille-produits__produit__illustratif img {\n  aspect-ratio: 1;\n  width: fit-content;\n  margin: auto;\n}\n#panneau-panier .panneau__grille-produits .detail-produit {\n  display: flex;\n  flex-flow: column nowrap;\n  place-content: center;\n  width: fit-content;\n  margin: auto;\n  padding: 0 var(--espace-xl);\n  font-style: italic;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__nom-prix {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  justify-content: space-between;\n  font-size: var(--espace-l);\n}\n#panneau-panier .panneau__grille-produits .detail-produit__nom-prix span {\n  font-weight: 600;\n  font-style: initial;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__description {\n  margin-bottom: var(--espace-l);\n  text-transform: lowercase;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions {\n  display: grid;\n  grid-template-columns: 0.25fr auto 0.25fr;\n  grid-template-rows: 1fr 1fr;\n  font-weight: 500;\n  font-style: initial;\n  border: 1px solid var(--couleur-noir);\n  /* Bouton d'addition de quantité */\n  /*\n   * 1. Cache les flèches d'augmentation/diminution sur Firefox.\n   * 2. Cache les flèches d'augmentation/diminution sur Chrome/Edge/Safari.\n   */\n  /* Bouton de suppression de quantité */\n  /* Bouton de suppression du Produit du Panier */\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:disabled {\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:first-of-type {\n  grid-column: 1;\n  min-width: 3rem;\n  max-width: 3rem;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions input[type=number] {\n  grid-column: 2;\n  width: 100%;\n  text-align: center;\n  appearance: textfield; /* 1 */\n  border: initial;\n  border-right: 1px solid var(--couleur-noir);\n  border-left: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions input[type=number]::-webkit-outer-spin-button, #panneau-panier .panneau__grille-produits .detail-produit__actions input[type=number]::-webkit-inner-spin-button {\n  margin: 0; /* 2 */\n  appearance: none; /* 2 */\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:nth-of-type(2) {\n  grid-column: 3;\n  min-width: 3rem;\n  max-width: 3rem;\n}\n#panneau-panier .panneau__grille-produits .detail-produit__actions button:last-of-type {\n  grid-column: span 3;\n  grid-row: 2;\n  padding: var(--espace-xs);\n  text-transform: lowercase;\n  border-top: 1px solid var(--couleur-noir);\n}\n@media (hover: hover) {\n  #panneau-panier .panneau__grille-produits .detail-produit__actions button:last-of-type:hover {\n    color: var(--couleur-blanc);\n    background: var(--couleur-noir);\n  }\n}\n#panneau-panier .panneau__emballages {\n  width: 100%;\n  padding: var(--espace-l) 0;\n  font-style: italic;\n  text-align: center;\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#panneau-panier .panneau__emballages__conteneur {\n  width: fit-content;\n  margin: auto;\n}\n#panneau-panier .panneau__emballages__titre-prix p {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n}\n#panneau-panier .panneau__emballages__titre-prix p span {\n  font-weight: 600;\n  font-style: initial;\n}\n#panneau-panier .panneau__emballages__choix {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  text-transform: lowercase;\n}\n#panneau-panier .panneau__emballages__choix__ligne {\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 1ch;\n  place-items: center;\n}\n#panneau-panier .panneau__instructions-code-promo {\n  width: 100%;\n  padding: var(--espace-l) var(--espace-xl);\n  text-align: center;\n  border-bottom: 1px solid var(--couleur-noir);\n  /*\n   * 1. Nécessaire pour ne pas qu'un espace vertical non souhaité apparaisse.\n   * 2. Applique une marge entre les instructions et le code promo de notre choix.\n   */\n}\n#panneau-panier .panneau__instructions-code-promo__instructions {\n  resize: vertical;\n  display: block; /* 1 */\n  width: 100%;\n  margin: auto; /* 1 */\n  margin-bottom: var(--espace-s); /* 2 */\n  padding: var(--espace-s);\n  font-size: 0.8rem;\n  font-weight: 450;\n  background: initial;\n  border: 1px solid transparent;\n}\n#panneau-panier .panneau__instructions-code-promo__code-promo {\n  display: flex;\n  flex-flow: row nowrap;\n  width: fit-content;\n  margin: auto;\n}\n#panneau-panier .panneau__instructions-code-promo__code-promo input {\n  width: 20rem;\n}\n#panneau-panier .panneau__instructions-code-promo__code-promo button {\n  padding: var(--espace-xs) var(--espace-xl);\n  color: var(--couleur-blanc);\n  text-transform: lowercase;\n  background: var(--couleur-noir);\n  border: 1px solid var(--couleur-noir);\n  border-left: initial;\n}\n#panneau-panier .panneau__sous-totaux {\n  width: min(30rem, 100%);\n  margin: auto;\n  padding: var(--espace-l) var(--espace-xl);\n  text-align: center;\n}\n#panneau-panier .panneau__sous-totaux__ligne {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  font-style: italic;\n}\n#panneau-panier .panneau__sous-totaux__ligne strong {\n  text-align: right;\n  text-transform: lowercase;\n}\n#panneau-panier .panneau__sous-totaux__ligne#sous-total-livraison p:last-of-type {\n  text-align: right;\n}\n#panneau-panier .panneau__sous-totaux__ligne#sous-total-livraison p:last-of-type span {\n  color: grey;\n}\n#panneau-panier .panneau__sous-totaux__conditions-livraison {\n  margin-top: var(--espace-l);\n  font-size: 0.8rem;\n  font-weight: 450;\n  color: grey;\n  letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\n#panneau-panier .panneau__pied-de-page {\n  align-content: center;\n  padding: var(--espace-l) 0;\n  font-size: 1.25rem;\n  font-style: italic;\n  color: var(--couleur-blanc);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  background: var(--couleur-noir);\n}\n#panneau-panier .panneau__pied-de-page span {\n  margin-left: var(--espace-l);\n  font-style: initial;\n}\n\n#panneau-informations-client > * {\n  align-content: center;\n  text-align: center;\n}\n#panneau-informations-client .panneau__paypal-express {\n  --hauteur-images-bouton: 18px;\n  --hauteur-bouton: calc(var(--hauteur-images-bouton) * 2);\n  --longueur-bouton: 250px;\n  --espacement-inter-images: var(--espace-xs);\n  padding: var(--espace-xl);\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#panneau-informations-client .panneau__paypal-express p {\n  margin-bottom: var(--espace-s);\n  font-style: italic;\n}\n#panneau-informations-client .panneau__paypal-express button {\n  display: flex;\n  column-gap: var(--espacement-inter-images);\n  place-content: center;\n  place-items: center;\n  width: var(--longueur-bouton);\n  height: var(--hauteur-bouton);\n  margin: auto;\n  background: var(--couleur-noir);\n}\n#panneau-informations-client .panneau__paypal-express button img {\n  height: var(--hauteur-images-bouton);\n  background: inherit;\n}\n#panneau-informations-client .panneau__paypal-express button img:first-of-type {\n  margin-top: -1px;\n}\n#panneau-informations-client .panneau__formulaires {\n  padding: var(--espace-xl) 0;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__separation-adresses {\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: 1ch;\n  place-items: center;\n  width: fit-content;\n  margin: auto;\n  margin-bottom: var(--espace-m);\n  font-size: 0.9rem;\n  font-style: italic;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__separation-adresses label {\n  text-transform: lowercase;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__paiement .formulaire__paiement__attente-renseignement-formulaires {\n  align-content: center;\n  width: 100%;\n  padding: 0;\n  text-align: center;\n}\n#panneau-informations-client .panneau__formulaires .panneau__formulaires__paiement .formulaire__paiement__attente-renseignement-formulaires p {\n  font-style: italic;\n}\n#panneau-informations-client .formulaire {\n  margin: auto;\n  padding: 0 var(--espace-xl);\n}\n#panneau-informations-client .formulaire + .formulaire {\n  margin-top: var(--espace-xl);\n}\n#panneau-informations-client .formulaire .formulaire__titre {\n  margin-bottom: var(--espace-m);\n  font-size: 1.25rem;\n  font-weight: 600;\n  font-style: italic;\n  letter-spacing: 1px;\n}\n#panneau-informations-client .formulaire .formulaire__champs {\n  width: fit-content;\n  margin: auto;\n  text-align: left;\n}\n#panneau-informations-client .formulaire .formulaire__champs .formulaire__champs__champ {\n  display: flex;\n  flex-flow: row nowrap;\n  column-gap: var(--espace-xl);\n  place-items: center;\n  justify-content: space-between;\n}\n#panneau-informations-client .formulaire .formulaire__champs .formulaire__champs__champ + .formulaire__champs__champ {\n  margin-top: var(--espace-l);\n}\n#panneau-informations-client .formulaire label {\n  font-weight: 400;\n  text-transform: lowercase;\n}\n#panneau-informations-client .formulaire label:has(+ :is(input:required, select:required)) {\n  font-weight: 600;\n}\n#panneau-informations-client .formulaire input {\n  width: 15rem;\n}\n#panneau-informations-client .panneau__pied-de-page {\n  align-content: center;\n  padding: var(--espace-l) 0;\n  font-size: 1.25rem;\n  font-style: italic;\n  color: var(--couleur-blanc);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  background: var(--couleur-noir);\n}\n#panneau-informations-client .panneau__pied-de-page button {\n  font: inherit;\n  color: inherit;\n  text-transform: inherit;\n}\n\n/* *\n * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher\n *    correctement.\n */\n#page-panier {\n  /* Dimensions */\n  --menu-section-hauteur: var(--menu-categories-produits-hauteur);\n  /* Marges */\n  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */\n  display: flex;\n  flex-flow: row wrap;\n  min-height: calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n  margin-top: var(--menu-section-marges-bloc-debut);\n}\n#page-panier[data-contient-articles=false] .panneau {\n  display: none;\n}\n#page-panier[data-contient-articles=false] .panier-vide {\n  display: block;\n}\n#page-panier .panneau {\n  flex: 1 1 30rem;\n  min-width: 30rem;\n  border-top: 1px solid var(--couleur-noir);\n  border-bottom: 1px solid var(--couleur-noir);\n}\n#page-panier .panneau__en-tete {\n  position: sticky;\n  z-index: 2;\n  top: var(--menu-section-marges-bloc-debut);\n  display: block;\n  align-content: center;\n  min-height: var(--menu-categories-produits-hauteur);\n  max-height: var(--menu-categories-produits-hauteur);\n  color: var(--couleur-gris);\n  text-align: center;\n  background: var(--couleur-noir);\n}\n#page-panier .panneau__en-tete h2 {\n  font-weight: 450;\n  font-style: italic;\n  color: var(--couleur-gris);\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  background: var(--couleur-noir);\n}\n#page-panier .panier-vide {\n  display: none;\n  flex-basis: 100%;\n  align-content: center;\n  min-height: calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));\n  text-align: center;\n}\n#page-panier .panier-vide p {\n  font-size: 1.25rem;\n}\n#page-panier .panier-vide a {\n  display: inline-block;\n  margin-top: var(--espace-m);\n  font-size: initial;\n}\n\n/*# sourceMappingURL=page-panier.css.map */\n"],"names":[]}
\ No newline at end of file
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 aeb683c9..a5d6ca9b 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss
@@ -18,6 +18,7 @@
   --hauteur-ligne-rapprochee: 1;
 
   /* Espacements entre les lettres */
+  --espacement-inter-lettres-rapproche-s: -0.5px;
   --espacement-inter-lettres-etendu-s: 0.5px;
   --espacement-inter-lettres-etendu-m: 1px;
   --espacement-inter-lettres-etendu-l: 1.5px;
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 2de62600..79302221 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss
@@ -2,14 +2,14 @@
 
 @use "../abstracts/variables" as variables;
 
-/* *
+/*
  * 1. Utilise un meilleur modèle de boîte.
  */
 html {
   box-sizing: border-box; /* 1 */
 }
 
-/* *
+/*
  * Réinitialise avec des styles par défaut plus simples.
  *
  * 1. Hérite du modèle de boîte du document par défaut.
@@ -24,7 +24,7 @@ html {
   color: inherit; /* 3 */
 }
 
-/* *
+/*
  * 1. Utilise une couleur d'arrière-plan définie.
  * 2. Utilise la couleur primaire du site.
  */
@@ -33,14 +33,14 @@ body {
   background: var(--couleur-gris); /* 1 */
 }
 
-/* *
+/*
  * 1. Force l'héritage des styles pour ces éléments.
  */
 button, input, select, textarea {
   font: inherit; /* 1 */
 }
 
-/* *
+/*
  * Change la couleur d'arrière-plan à la sélection du texte.
  */
 *::selection {
@@ -57,7 +57,7 @@ button, input, select, textarea {
   cursor: not-allowed;
 }
 
-/* *
+/*
  * Désactive les animations pour les Utilisateurs n'en souhaitant pas.
  */
 @media (prefers-reduced-motion) {
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss
index 2ebfc6e2..134e5716 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss
@@ -1,6 +1,6 @@
 // Styles typographiques de base
 
-/* *
+/*
  * 2. Rendu spécifique du texte pour Safari/iOS.
  * 3. Rendu plus précis du texte.
  */
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss
index 2554d247..1532dad5 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss
@@ -1,6 +1,6 @@
 // Styles pour les boutons (<button>, <a> avec rôle de boutons)
 
-/* *
+/*
  * Réinitialisation des styles des <button>.
  */
 button {
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
index 9625441a..ae5cf234 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
@@ -68,7 +68,7 @@ input[type="checkbox"], input[type="radio"] {
     }
   }
 
-  /* *
+  /*
    * 1. Pour un alignement parfait du label avec la case à cocher.
    */
   label:has(~ &), + label {
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss
index 6ab9630e..9f1728cb 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss
@@ -1,6 +1,6 @@
 // Styles de base pour les images (<img>, <picture>).
 
-/* *
+/*
  * 1. Facilite l'usages des images.
  * 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.
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_listes.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_listes.scss
index 44a2d191..0cf011ab 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_listes.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_listes.scss
@@ -1,6 +1,6 @@
 // Styles de base pour les lists (<ul>, <ol>, <li>)
 
-/* *
+/*
  * Réinitialise les styles des listes non ordonnées.
  *
  * 1. Pas de puce.
@@ -8,7 +8,7 @@
 ul {
   list-style: none; /* 1 */
 
-  /* *
+  /*
    * Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.
    *
    * 1. Ajoute de la marge interne pour que la puce ait de la place.
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss
index e3fee21d..e8d76412 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss
@@ -1,6 +1,6 @@
 // Styles pour les colonnes de photos d'une Page Produit
 
-/* *
+/*
  * Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
  * portées.
  *
@@ -16,6 +16,7 @@
   --colonne-droite-photo-hauteur-minimale: calc(
     100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
   );
+  --colonne-photo-longueur-minimale: 30rem;
 
   /* Marges */
   --section-marges-externes-bloc-fin: 1rem;
@@ -28,7 +29,8 @@
     position: relative;
     display: flex;
     flex-flow: column nowrap;
-    width: 50%;
+    flex-grow: 1;
+    width: min(var(--colonne-photo-longueur-minimale), 100%);
 
     &.colonne-gauche {
       position: sticky;
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 fb51eee9..a2c9522d 100644
--- 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
@@ -55,7 +55,7 @@
       justify-content: space-between;
     }
 
-    /* *
+    /*
      * Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au
      * survol soit possible.
      *
@@ -108,7 +108,7 @@
     place-items: center;
     text-align: center;
 
-    /* *
+    /*
      * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
      */
     a {
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss
index c68340ae..1326cbb9 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss
@@ -1,6 +1,6 @@
 // Styles pour la grille de Produits du Shop
 
-/* *
+/*
  * La Grille des Produits sous forme de Cartes.
  *
  * Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
@@ -13,9 +13,18 @@
  * collapse »).
  */
 .grille-produits {
+  /* Dimensions */
+  --aucun-produit-hauteur: calc(
+    100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)
+      - var(--pied-de-page-hauteur)
+  );
+  --carte-produit-longueur-minimale: 448px;
+
   display: grid;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
+  grid-template-columns:
+    repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
+
   gap: 1px; /* 2 */
 
   article {
@@ -24,8 +33,8 @@
     figure {
       display: flex;
       flex-flow: column nowrap;
-      row-gap: 2rem;
-      padding: 1rem;
+      row-gap: var(--espace-xl);
+      padding: var(--espace-m);
 
       a {
         position: relative;
@@ -68,16 +77,16 @@
         display: flex;
         flex-flow: row nowrap;
         justify-content: space-between;
-        margin-bottom: 2rem;
+        margin-bottom: var(--espace-xl);
 
         h3 {
           font-style: italic;
-          letter-spacing: 1px;
+          letter-spacing: var(--espacement-inter-lettres-etendu-m);
         }
 
         p {
           font-weight: 500;
-          letter-spacing: -0.5px;
+          letter-spacing: var(--espacement-inter-lettres-rapproche-s);
         }
       }
     }
@@ -86,10 +95,7 @@
   &__aucun-produit {
     grid-column: span 3;
     align-content: center;
-    min-height: calc(
-      100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)
-        - var(--pied-de-page-hauteur)
-    );
+    min-height: var(--aucun-produit-hauteur);
     text-align: center;
 
     p + p {
@@ -97,4 +103,14 @@
       font-size: 1.25rem;
     }
   }
+
+  @media (width <= 700px) {
+    & {
+      grid-template-columns: 100%;
+
+      article figure img {
+        max-height: 50svh;
+      }
+    }
+  }
 }
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 741ad4be..a1fa97bb 100644
--- 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
@@ -1,6 +1,6 @@
 // Styles pour la boîte flottante des Informations sur le Produit
 
-/* *
+/*
  * Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le
  * Panier.
  *
@@ -8,7 +8,6 @@
  * 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
  */
 .informations-produit {
-  /* Variables */
   // Couleurs
   --boite-couleur-fond: rgb(255 255 255 / 90%);
 
@@ -32,7 +31,7 @@
     max-width: var(--boite-longueur);
     border: 1px solid var(--couleur-noir);
 
-    /* *
+    /*
      * Définis les apparence et comportement de toutes les sections de la boîte.
      */
     > section {
@@ -77,7 +76,7 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
       text-align: center;
       text-transform: lowercase;
-      letter-spacing: 1px;
+      letter-spacing: var(--espacement-inter-lettres-etendu-m);
 
       li {
         width: 100%;
@@ -189,11 +188,10 @@
         }
       }
 
-      /* Sélecteur natif */
       select {
         position: relative;
         min-width: 4rem;
-        padding: 0.5rem var(--espace-xl);
+        padding: var(--espace-s) var(--espace-xl);
         text-align: center;
         appearance: none;
         background: rgb(236 234 235 / 90%);
@@ -209,17 +207,6 @@
       option {
         background: rgb(236 234 235 / 90%);
       }
-
-      /* Sélecteur personnalisé */
-      // .selecteur-personnalise {
-      //   position: absolute;
-      //   top: 0;
-      //   left: 0;
-      //   display: none;
-      //   min-width: 3rem;
-      //   min-height: var(--espace-xl);
-      //   background-color: red;
-      // }
     }
 
     &__prix {
@@ -242,7 +229,7 @@
       font-variation-settings: "wght" 400;
       font-style: italic;
       text-transform: uppercase;
-      letter-spacing: 1px;
+      letter-spacing: var(--espacement-inter-lettres-etendu-m);
       transition: 0.2s font-variation-settings;
 
       /* Change la casse de la police au survol quand le Bouton n'est pas désactivé */
@@ -255,6 +242,21 @@
       }
     }
   }
+
+  @media (width <= 700px) {
+    position: relative;
+    bottom: initial;
+    width: initial;
+    height: initial;
+
+    &__conteneur {
+      transform: initial;
+      width: initial;
+      max-width: initial;
+      border-right: initial;
+      border-left: initial;
+    }
+  }
 }
 
 @media (hover: hover) {
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss
index f565843a..d0a660c6 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss
@@ -1,6 +1,6 @@
 // Styles pour le menu des Catégories de Produits
 
-/* *
+/*
  * 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
@@ -15,10 +15,10 @@
   --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
   --menu-entree-marges-internes-ligne: var(--espace-m);
 
-  height: var(--menu-section-hauteur);
+  // height: var(--menu-section-hauteur);
   margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
 
-  /* *
+  /*
    * Liste des Catégories de Produits.
    *
    * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
@@ -29,9 +29,11 @@
     display: grid;
     grid-template-columns:
       repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
+
+    gap: 1px;
     place-items: center;
 
-    /* *
+    /*
      * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
      */
     li {
@@ -41,7 +43,7 @@
       color: var(--couleur-gris);
       text-align: center;
       text-transform: uppercase;
-      letter-spacing: 1px;
+      letter-spacing: var(--espacement-inter-lettres-etendu-m);
       background: var(--couleur-noir);
 
       &.categorie-courante {
@@ -54,7 +56,7 @@
         font-weight: 500;
       }
 
-      /* *
+      /*
        * 1. Permet de créer des marges verticales.
        * 2. Hérite de la longueur du conteneur.
        * 3. Surchargement de styles pour les liens.
@@ -63,8 +65,6 @@
         display: inline-block; /* 1 */
         width: inherit; /* 2 */
         padding: var(--menu-entree-marges-internes-ligne) 0;
-        border-right: 1px solid var(--couleur-gris);
-        border-left: 1px solid var(--couleur-gris);
         outline: initial; /* 3 */
 
         &:focus, &:focus-visible {
@@ -79,13 +79,25 @@
           }
         }
       }
+    }
 
-      &:first-of-type a {
-        border-left: initial;
-      }
+    @media (width <= 900px) {
+      & {
+        --menu-entree-marges-internes-ligne: var(--espace-s);
 
-      &:last-of-type a {
-        border-right: initial;
+        display: flex;
+        flex-flow: row wrap;
+        font-size: 0.9rem;
+
+        li {
+          flex-grow: 1;
+          width: min(140px, 100%);
+
+          a {
+            width: 100%;
+            border: initial;
+          }
+        }
       }
     }
   }
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-panier.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-panier.scss
index 392624fc..519310b5 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-panier.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-panier.scss
@@ -81,7 +81,7 @@
           max-width: 3rem;
         }
 
-        /* *
+        /*
          * 1. Cache les flèches d'augmentation/diminution sur Firefox.
          * 2. Cache les flèches d'augmentation/diminution sur Chrome/Edge/Safari.
          */
@@ -173,7 +173,7 @@
     text-align: center;
     border-bottom: 1px solid var(--couleur-noir);
 
-    /* *
+    /*
      * 1. Nécessaire pour ne pas qu'un espace vertical non souhaité apparaisse.
      * 2. Applique une marge entre les instructions et le code promo de notre choix.
      */
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 85b8bc9e..05316699 100644
--- 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
@@ -1,6 +1,9 @@
 // Styles pour la section des Produits similaires (de la même Collection)
 
 .produits-similaires {
+  /* Dimensions */
+  --carte-produit-longueur-minimale: 448px;
+
   display: grid;
   grid-template-areas:
     "en-tete en-tete en-tete"
@@ -15,14 +18,15 @@
     grid-area: en-tete;
     width: 100%;
     padding: var(--espace-l) 0 var(--espace-m);
+    color: var(--couleur-blanc);
     text-align: center;
-    border: 1px solid var(--couleur-noir);
+    background: var(--couleur-noir);
 
     h2 {
       font-style: italic;
       line-height: var(--hauteur-ligne-rapprochee);
       text-transform: uppercase;
-      letter-spacing: 1px;
+      letter-spacing: var(--espacement-inter-lettres-etendu-m);
     }
   }
 
@@ -30,12 +34,12 @@
     display: grid;
     grid-area: produits;
     grid-auto-rows: 1fr;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
     gap: 1px;
     width: 100%;
 
     article {
-      box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+      box-shadow: 0 0 0 1px var(--couleur-noir);
 
       figure {
         display: flex;
@@ -76,7 +80,7 @@
         img {
           aspect-ratio: 9 / 16;
           width: 100%;
-          max-height: 70vh;
+          max-height: 70svh;
           object-fit: cover;
         }
 
@@ -88,15 +92,25 @@
 
           h3 {
             font-style: italic;
-            letter-spacing: 1px;
+            letter-spacing: var(--espacement-inter-lettres-etendu-m);
           }
 
           p {
             font-weight: 500;
-            letter-spacing: -0.5px;
+            letter-spacing: var(--espacement-inter-lettres-rapproche-s);
           }
         }
       }
     }
+
+    @media (width <= 700px) {
+      & {
+        grid-template-columns: 100%;
+
+        article figure img {
+          max-height: 50svh;
+        }
+      }
+    }
   }
 }
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-panier.scss b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-panier.scss
index a26e8dd8..1785ed36 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-panier.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-panier.scss
@@ -3,7 +3,7 @@
 @forward "../layouts/panneau-panier";
 @forward "../layouts/panneau-informations-client";
 
-/* *
+/*
  * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
  *    correctement.
  */