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 42bdf927..0635d757 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/main.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css
@@ -141,18 +141,15 @@ button, input, select, textarea {
  * 3. Rendu plus précis du texte.
  */
 html {
-  -webkit-font-smoothing: antialiased; /* 2 */
-  text-size-adjust: none; /* 2 */
-  text-rendering: geometricprecision; /* 3 */
-}
-
-body {
   font: 1rem/var(--hauteur-ligne-classique) Lato;
   font-optical-sizing: auto;
   font-kerning: normal;
   font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
+  -webkit-font-smoothing: antialiased; /* 2 */
   color: var(--couleur-noir);
   text-decoration-skip-ink: auto;
+  text-size-adjust: none; /* 2 */
+  text-rendering: geometricprecision; /* 3 */
   letter-spacing: var(--espacement-inter-lettres-etendu-s);
 }
 
@@ -171,6 +168,7 @@ em {
 button {
   all: initial;
   cursor: pointer;
+  font-family: Lato;
   text-align: center;
   letter-spacing: inherit;
 }
@@ -454,7 +452,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   max-width: 100vw;
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
-  font-size: 1.1rem;
   background: var(--couleur-gris);
   border-bottom: 1px solid var(--couleur-noir);
   /* TODO: Déplacer au sein d'un Composant ? */
@@ -473,6 +470,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   flex: 1;
+  font-size: 1.1rem;
   text-align: center;
   text-transform: lowercase;
   /*
@@ -538,6 +536,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 }
 #en-tete .compte-panier a {
   min-width: 10ch; /* 1 */
+  font-size: 1.1rem;
   text-transform: lowercase;
 }
 #en-tete .compte-panier a.lien-compte {
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 c76a0cac..03dce7da 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;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;AAKA;EACA;EACA;EACA;EACA;EACA;;;ACxCF;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;;AAIJ;EACE;;;ACvBJ;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;AAaA;AAAA;AAAA;;AAXA;EACE;;AAGA;EACE;EACA;EACA;;AAOJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACnIR;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;EACA;EACA;EACA;EAEA;EACA;EACA,uBACE;EAEF;EACA;;AAEA;EACE;EACA;;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;;;;AC9GR;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;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AAEE;EACE;IACE;;;AAOV;EAhPF;IAiPI;IAEA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;;;AAKN;EACE;IACE;;EAGF;IACE;;;AC/QJ;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
+{"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;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;AAKA;EACA;EACA;EACA;EACA;EACA;;;ACxCF;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;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AC1BA;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;;ACxBJ;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;AAeA;;AAbA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE;EACA,yFAC2C;EAE3C;;AAGF;EACE;;AAIF;EACE;IACE;;;AAOJ;EADF;IAEI;;;AAKN;EACE;EACA;EACA;EACA;EACA;AAaA;AAAA;AAAA;;AAXA;EACE;;AAGA;EACE;EACA;EACA;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACpIR;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;EACA;EACA;EACA;EAEA;EACA;EACA,uBACE;EAEF;EACA;;AAEA;EACE;EACA;;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;;;;AC9GR;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;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AAEE;EACE;IACE;;;AAOV;EAhPF;IAiPI;IAEA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;;;AAKN;EACE;IACE;;EAGF;IACE;;;AC/QJ;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 8ffe6054..17830e6b 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
@@ -107,18 +107,15 @@ button, input, select, textarea {
 }
 
 html {
-  -webkit-font-smoothing: antialiased;
-  text-size-adjust: none;
-  text-rendering: geometricprecision;
-}
-
-body {
   font: 1rem / var(--hauteur-ligne-classique) Lato;
   font-optical-sizing: auto;
   font-kerning: normal;
   font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
+  -webkit-font-smoothing: antialiased;
   color: var(--couleur-noir);
   text-decoration-skip-ink: auto;
+  text-size-adjust: none;
+  text-rendering: geometricprecision;
   letter-spacing: var(--espacement-inter-lettres-etendu-s);
 }
 
@@ -135,6 +132,7 @@ button {
   cursor: pointer;
   text-align: center;
   letter-spacing: inherit;
+  font-family: Lato;
 }
 
 button.bouton-case-pleine {
@@ -405,7 +403,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   place-items: center;
   min-width: 100vw;
   max-width: 100vw;
-  font-size: 1.1rem;
   display: flex;
   position: fixed;
   top: 0;
@@ -429,6 +426,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   text-transform: lowercase;
   flex: 1;
   grid-template-columns: 1fr auto 1fr;
+  font-size: 1.1rem;
   display: grid;
 }
 
@@ -490,6 +488,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 #en-tete .compte-panier a {
   text-transform: lowercase;
   min-width: 10ch;
+  font-size: 1.1rem;
 }
 
 #en-tete .compte-panier a.lien-compte {
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 b9f6ac9c..dd82f671 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA;;;;AAWA;;;;;;;;AAYA;;;;;AAQA;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAOA;EACE;;;;;;;AAUF;;;;;;AAMA;;;;;;;;;;AAUA;;;;AAIA;;;;AAQA;;;;;;;AAMA;;;;;AAIA;;;;;;;;AAOA;;;;AAIA;;;;;;;;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;;;;AAGA;;;;;;AAKA;;;;;AAIA;;;;AAGA;;;;AAUA;;;;;;;;AAgBA;;;;;;;AASA;;;;;;;;;;;AAeA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;AAIA;EACE;;;;;;AAKF;EACE;;;;;;;EAMA;;;;;EAIA;;;;;;AAaF;;;;;;;;;;;AAeA;;;;;;;;AAOA;;;;;;AAKA;;;;AAGA;;;;;AAiBA;;;;;;;;;;;;AAYA;;;;;AAIA;;;;;;;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;;;;;;;;AAQA;;;;AAGA;;;;;;;;;;AAUA;EACE;;;;;AAIF;EACE;;;;;;;;EAOA;;;;;;;;;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-gris-fonce: #808080;\n  --couleur-gris-fonce-fond: rgb(128 128 128 / 80%);\n  --couleur-bordeaux: #490918;\n  --couleur-bordeaux-fond: rgb(73 9 24 / 80%);\n  --couleur-jaune: #ebffb8;\n  --couleur-jaune-fond: rgb(235 255 184 / 80%);\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  --contenu-page-hauteur-minimale: calc(\n    100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)\n      - var(--menu-categories-produits-hauteur)\n  );\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 !important;\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}\nbutton:disabled, button[disabled] {\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\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, input[disabled], select:disabled, select[disabled], textarea: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[disabled] {\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\n}\n#en-tete .compte-panier[disabled] a:hover, #en-tete .compte-panier[disabled] a:active, #en-tete .compte-panier[disabled] a:focus, #en-tete .compte-panier[disabled] a:focus-within {\n  background: initial;\n  border: 1px solid var(--couleur-noir);\n  outline: 1px solid transparent;\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  --grille-produits-hauteur-minimale: var(--contenu-page-hauteur-minimale);\n  --aucun-produit-hauteur: var(--contenu-page-hauteur-minimale);\n  --carte-produit-longueur-minimale: 448px;\n  --carte-produit-longueur-maximale: 900px;\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  min-height: var(--grille-produits-hauteur-minimale);\n}\n.grille-produits article {\n  max-width: var(--carte-produit-longueur-maximale);\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: var(--espace-m);\n  --boite-longueur: 70ch;\n  --section-marges-internes: var(--espace-m);\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  padding: initial;\n  background: var(--couleur-jaune);\n  border-top: initial;\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  height: initial;\n  padding: var(--section-marges-internes);\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    --section-marges-internes: var(--espace-xl);\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
+{"version":3,"mappings":"AACA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA;;;;AAWA;;;;;;;;AAYA;;;;;AAQA;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAOA;EACE;;;;;;;AAUF;;;;;;;;;;;;;AAaA;;;;AAIA;;;;AAQA;;;;;;;;AAOA;;;;;AAIA;;;;;;;;AAOA;;;;AAIA;;;;;;;;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;;;;;;;;;;;;;;;;;;;;AAsBA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;;;;;AAiBA;;;;;;;;AAOA;;;;;;;AAQA;;;;;;AAKA;;;;AAGA;EACE;;;;;AAIF;EACE;;;;;AAIF;;;;;;;;AAUA;;;;AAGA;;;;;;AAKA;;;;;;AAKA;;;;AAGA;;;;AAUA;;;;;;;;AAgBA;;;;;;;AASA;;;;;;;;;;;AAeA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;AAIA;EACE;;;;;;AAKF;EACE;;;;;;;EAMA;;;;;EAIA;;;;;;AAaF;;;;;;;;;;;AAeA;;;;;;;;AAOA;;;;;;AAKA;;;;AAGA;;;;;AAiBA;;;;;;;;;;;;AAYA;;;;;AAIA;;;;;;;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;;;;;;;;AAQA;;;;AAGA;;;;;;;;;;AAUA;EACE;;;;;AAIF;EACE;;;;;;;;EAOA;;;;;;;;;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-gris-fonce: #808080;\n  --couleur-gris-fonce-fond: rgb(128 128 128 / 80%);\n  --couleur-bordeaux: #490918;\n  --couleur-bordeaux-fond: rgb(73 9 24 / 80%);\n  --couleur-jaune: #ebffb8;\n  --couleur-jaune-fond: rgb(235 255 184 / 80%);\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  --contenu-page-hauteur-minimale: calc(\n    100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)\n      - var(--menu-categories-produits-hauteur)\n  );\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 !important;\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  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  -webkit-font-smoothing: antialiased; /* 2 */\n  color: var(--couleur-noir);\n  text-decoration-skip-ink: auto;\n  text-size-adjust: none; /* 2 */\n  text-rendering: geometricprecision; /* 3 */\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  font-family: Lato;\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}\nbutton:disabled, button[disabled] {\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\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, input[disabled], select:disabled, select[disabled], textarea: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  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  font-size: 1.1rem;\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[disabled] {\n  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;\n}\n#en-tete .compte-panier[disabled] a:hover, #en-tete .compte-panier[disabled] a:active, #en-tete .compte-panier[disabled] a:focus, #en-tete .compte-panier[disabled] a:focus-within {\n  background: initial;\n  border: 1px solid var(--couleur-noir);\n  outline: 1px solid transparent;\n}\n#en-tete .compte-panier a {\n  min-width: 10ch; /* 1 */\n  font-size: 1.1rem;\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  --grille-produits-hauteur-minimale: var(--contenu-page-hauteur-minimale);\n  --aucun-produit-hauteur: var(--contenu-page-hauteur-minimale);\n  --carte-produit-longueur-minimale: 448px;\n  --carte-produit-longueur-maximale: 900px;\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  min-height: var(--grille-produits-hauteur-minimale);\n}\n.grille-produits article {\n  max-width: var(--carte-produit-longueur-maximale);\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: var(--espace-m);\n  --boite-longueur: 70ch;\n  --section-marges-internes: var(--espace-m);\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  padding: initial;\n  background: var(--couleur-jaune);\n  border-top: initial;\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  height: initial;\n  padding: var(--section-marges-internes);\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    --section-marges-internes: var(--espace-xl);\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/src/sass/base/_typographie.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss
index 134e5716..d6f54f42 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
@@ -5,19 +5,16 @@
  * 3. Rendu plus précis du texte.
  */
 html {
-  -webkit-font-smoothing: antialiased; /* 2 */
-  text-size-adjust: none; /* 2 */
-  text-rendering: geometricprecision; /* 3 */
-}
-
-body {
   font: 1rem/var(--hauteur-ligne-classique) Lato;
   font-optical-sizing: auto;
   font-kerning: normal;
   font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
     contextual;
+  -webkit-font-smoothing: antialiased; /* 2 */
   color: var(--couleur-noir);
   text-decoration-skip-ink: auto;
+  text-size-adjust: none; /* 2 */
+  text-rendering: geometricprecision; /* 3 */
   letter-spacing: var(--espacement-inter-lettres-etendu-s);
 }
 
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 a9a1c443..7f69131f 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
@@ -6,6 +6,7 @@
 button {
   all: initial;
   cursor: pointer;
+  font-family: Lato;
   text-align: center;
   letter-spacing: inherit;
 
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 203c52fc..07ea89e5 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
@@ -22,7 +22,6 @@
   max-width: 100vw;
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
-  font-size: 1.1rem;
   background: var(--couleur-gris);
   border-bottom: 1px solid var(--couleur-noir);
 
@@ -44,6 +43,7 @@
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     flex: 1;
+    font-size: 1.1rem;
     text-align: center;
     text-transform: lowercase;
 
@@ -124,6 +124,7 @@
      */
     a {
       min-width: 10ch; /* 1 */
+      font-size: 1.1rem;
       text-transform: lowercase;
 
       &.lien-compte {