corvée(images) optimise les images

mago.toml

@@ -67,7 +67,6 @@ threads     = 0
     disjunction-complexity-threshold = 8192
     formula-size-threshold           = 1024
     integer-combination-threshold    = 256
-    loop-assignment-depth-threshold  = 2
     negation-complexity-threshold    = 8192
     saturation-complexity-threshold  = 16384
     string-combination-threshold     = 256

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

@@ -4,66 +4,16 @@
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
-  src:
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format(woff2) tech(variations), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format("woff2-variations"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf") format("truetype");
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    format(woff2) tech(variations),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
-    format("woff2-variations"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
-    format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf")
-    format("truetype");
-  unicode-range:
-    U+0000-00FF,
-    U+0131,
-    U+0152-0153,
-    U+02BB-02BC,
-    U+02C6,
-    U+02DA,
-    U+02DC,
-    U+2000-206F,
-    U+2074,
-    U+20AC,
-    U+2122,
-    U+2191,
-    U+2193,
-    U+2212,
-    U+2215,
-    U+FEFF,
-    U+FFFD;
 }
 @font-face {
   font-family: Lato;
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
-  src:
+  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format(woff2) tech(variations), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format("woff2-variations"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf") format("truetype");
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    format(woff2) tech(variations),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
-    format("woff2-variations"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
-    format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf")
-    format("truetype");
-  unicode-range:
-    U+0000-00FF,
-    U+0131,
-    U+0152-0153,
-    U+02BB-02BC,
-    U+02C6,
-    U+02DA,
-    U+02DC,
-    U+2000-206F,
-    U+2074,
-    U+20AC,
-    U+2122,
-    U+2191,
-    U+2193,
-    U+2212,
-    U+2215,
-    U+FEFF,
-    U+FFFD;
 }
 @font-face {
   font-family: Myriad;
@@ -71,10 +21,7 @@
   font-style: normal;
   font-display: swap;
   font-stretch: 70% 110%;
-  src:
+  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");
-    url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf")
-    format("truetype");
 }
 @font-face {
   font-family: Myriad;
@@ -82,11 +29,7 @@
   font-style: italic;
   font-display: swap;
   font-stretch: 70% 110%;
-  src:
+  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");
-    url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2")
-    format("woff2"),
-    url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf")
-    format("truetype");
 }
 :root {
   /* Couleurs */
@@ -235,8 +178,7 @@ button, input, select, textarea {
 html {
   font: 1rem/var(--hauteur-ligne-classique) Lato;
   font-optical-sizing: auto;
-  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
+  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
-    contextual;
   font-kerning: normal;
   color: var(--couleur-noir);
   text-decoration-skip-ink: auto;
@@ -293,12 +235,6 @@ button.bouton-case-pleine {
   width: 100%;
   height: 100%;
 }
-@media (hover: hover) {
-  button.bouton-case-pleine:hover {
-    color: var(--couleur-noir);
-    background: var(--arriere-plan-points);
-  }
-}
 button.bouton-inverse {
   color: var(--couleur-blanc);
   background: var(--couleur-noir);
@@ -316,7 +252,7 @@ button.bouton-inverse:disabled {
 @media (hover: hover) {
   button.bouton-inverse:hover {
     color: var(--couleur-noir);
-    background: var(--arriere-plan-points);
+    background: var(--couleur-gris);
   }
 }
 button.bouton-retour-haut {
@@ -415,12 +351,7 @@ input, select, textarea {
   background: var(--couleur-gris);
   transition: 0.2s background;
 }
-input:focus-visible,
+input:focus-visible, input:focus-within, select:focus-visible, select:focus-within, textarea:focus-visible, textarea:focus-within {
-input:focus-within,
-select:focus-visible,
-select:focus-within,
-textarea:focus-visible,
-textarea:focus-within {
   z-index: 10;
   outline: 2px dashed var(--couleur-noir);
 }
@@ -432,20 +363,20 @@ input:disabled, select:disabled, textarea:disabled {
   outline-color: transparent;
 }
 
-input:is([type="email"], [type="text"], [type="tel"])::placeholder, textarea::placeholder {
+input:is([type=email], [type=text], [type=tel])::placeholder, textarea::placeholder {
   text-transform: lowercase;
   letter-spacing: var(--espacement-inter-lettres-etendu-s);
 }
-input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::selection {
+input:is([type=email], [type=text], [type=tel])::selection, textarea::selection {
   color: var(--couleur-blanc);
   background: var(--couleur-noir);
 }
-input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid {
+input:is([type=email], [type=text], [type=tel]):user-valid, textarea:user-valid {
   font-weight: 500;
   color: var(--couleur-noir);
   background: var(--arriere-plan-points);
 }
-input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid {
+input:is([type=email], [type=text], [type=tel]):user-invalid, textarea:user-invalid {
   background: var(--couleur-gris);
 }
 
@@ -453,7 +384,7 @@ input, label, select, textarea {
   cursor: pointer;
 }
 
-input[type="checkbox"], input[type="radio"] {
+input[type=checkbox], input[type=radio] {
   width: var(--espace-l);
   height: var(--espace-l);
   padding: initial;
@@ -461,51 +392,49 @@ input[type="checkbox"], input[type="radio"] {
   appearance: none;
   transition: 0.2s background;
 }
-input[type="checkbox"]:checked, input[type="radio"]:checked {
+input[type=checkbox]:checked, input[type=radio]:checked {
   color: var(--couleur-blanc);
   background: var(--couleur-gris-fonce);
 }
-input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
+input[type=checkbox]:checked::before, input[type=radio]:checked::before {
   content: "x";
   position: relative;
   bottom: 0.1rem;
   left: 0.35rem;
 }
 @media (hover: hover) {
-  input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover {
+  input[type=checkbox]:checked:hover, input[type=radio]:checked:hover {
     color: var(--couleur-noir);
   }
 }
-input[type="checkbox"]:not(:checked):user-valid, input[type="radio"]:not(:checked):user-valid {
+input[type=checkbox]:not(:checked):user-valid, input[type=radio]:not(:checked):user-valid {
   background: initial;
 }
-input[type="checkbox"], input[type="radio"] {
+input[type=checkbox], input[type=radio] {
   /*
    * 1. Pour un alignement parfait du label avec la case à cocher.
    */
 }
-label:has(~ input[type="checkbox"], ~ input[type="radio"]),
+label:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + label, input[type=radio] + label {
-input[type="checkbox"] + label,
-input[type="radio"] + label {
   padding-top: 1px; /* 1 */
   font-size: 0.9rem;
 }
 @media (hover: hover) {
-  input[type="checkbox"]:hover, input[type="radio"]:hover {
+  input[type=checkbox]:hover, input[type=radio]:hover {
     background: var(--couleur-gris-fonce);
   }
 }
 
-input[type="radio"] {
+input[type=radio] {
   border-radius: 100%;
   appearance: initial;
 }
-input[type="radio"]:checked {
+input[type=radio]:checked {
   display: inline-flex;
   place-content: center;
   place-items: center;
 }
-input[type="radio"]:checked::before {
+input[type=radio]:checked::before {
   content: " ";
   inset: initial;
   display: inline-block;
@@ -547,14 +476,7 @@ a {
   text-decoration: underline; /* 1 */
   text-decoration-color: transparent; /* 1 */
   text-decoration-skip-ink: auto; /* 1 */
-  transition:
+  transition: 0.2s background, 0.2s border-color, 0.2s color, 0.2s font-weight, 0.2s outline-color, 0.2s letter-spacing, 0.2s text-decoration-color; /* 3 */
-    0.2s background,
-    0.2s border-color,
-    0.2s color,
-    0.2s font-weight,
-    0.2s outline-color,
-    0.2s letter-spacing,
-    0.2s text-decoration-color; /* 3 */
   text-decoration-skip: edges; /* 1 */
   /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
 }
@@ -640,9 +562,7 @@ ul.avec-puce-cercle {
 }
 ul.avec-puce-cercle a {
   padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
-  background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(
+  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 */
-    --liste-puce-cercle-puce-taille
-  ) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
 }
 
 video {
@@ -698,7 +618,7 @@ video {
     transform: translateX(-100%);
   }
 }
-body:has(#menu-mobile:not([aria-hidden="true"])) {
+body:has(#menu-mobile:not([aria-hidden=true])) {
   touch-action: none;
   overflow: hidden;
 }
@@ -718,11 +638,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   transition: display 400ms allow-discrete;
   -webkit-overflow-scrolling: none;
 }
-#menu-mobile[aria-hidden="true"] {
+#menu-mobile[aria-hidden=true] {
   display: none;
   animation: fade-out 400ms both;
 }
-#menu-mobile[aria-hidden="true"] .menu-modale__fond {
+#menu-mobile[aria-hidden=true] .menu-modale__fond {
   animation: fade-out 400ms both;
 }
 #menu-mobile .menu-modale__fond {
@@ -855,13 +775,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   /* Dispositions */
   --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
 }
-#en-tete .menu-navigation__entree:has(a[aria-current="page"]) {
+#en-tete .menu-navigation__entree:has(a[aria-current=page]) {
-  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
+  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat;
-    bottom/auto 90% no-repeat;
 }
 #en-tete .menu-navigation__entree--courante {
-  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
+  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat;
-    bottom/auto 90% no-repeat;
 }
 #en-tete .menu-navigation__entree a {
   display: inline-block; /* 1 */
@@ -870,8 +788,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 @media (hover: hover) {
   #en-tete .menu-navigation__entree:hover {
-    background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
+    background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat;
-      bottom/auto 90% no-repeat;
   }
 }
 @media (width <= 1000px) {
@@ -892,9 +809,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 #en-tete .compte-panier[disabled] {
   background: var(--arriere-plan-points);
 }
-#en-tete .compte-panier[disabled] a:hover,
+#en-tete .compte-panier[disabled] a:hover, #en-tete .compte-panier[disabled] a:active, #en-tete .compte-panier[disabled] a:focus-within {
-#en-tete .compte-panier[disabled] a:active,
-#en-tete .compte-panier[disabled] a:focus-within {
   border: 1px solid var(--couleur-noir);
 }
 #en-tete .compte-panier a {
@@ -903,7 +818,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   text-transform: lowercase;
   background: transparent;
 }
-#en-tete .compte-panier a[data-contient-articles="true"] {
+#en-tete .compte-panier a[data-contient-articles=true] {
   background: var(--couleur-gris-fond);
 }
 #en-tete .compte-panier a:hover, #en-tete .compte-panier a:focus-within {
@@ -947,14 +862,17 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 
 /*
  * Le menu avec les Catégories de Produits pour une navigation rapide.
+ *
+ * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
+ *    correctement.
  */
 #menu-categories-produits {
   /* Dimensions */
   --menu-entree-longueur-minimale: 13ch;
-  --menu-section-marges-bloc-debut: var(--en-tete-hauteur);
+  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
   --menu-entree-marges-internes-ligne: var(--espace-m);
   position: relative;
-  margin-top: var(--menu-section-marges-bloc-debut);
+  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
 }
 #menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
   opacity: 100%;
@@ -966,8 +884,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   pointer-events: none;
   position: absolute;
   bottom: calc(17.59px - 0.35rem);
-  inline-size: 0.8rem;
+  width: 0.8rem;
-  block-size: 0.8rem;
+  height: 0.8rem;
   opacity: 0%;
   mix-blend-mode: exclusion;
   shape-rendering: geometricprecision;
@@ -995,14 +913,16 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 #menu-categories-produits ul {
   display: grid;
-  grid-template-columns:
+  grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
-    repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
   gap: 1px;
   place-items: center;
+  /*
+   * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
+   */
 }
 #menu-categories-produits ul li {
-  inline-size: 100%;
+  width: 100%; /* 1 */
-  font-weight: 500;
+  font-weight: 450;
   font-style: italic;
   color: var(--couleur-gris);
   text-align: center;
@@ -1010,38 +930,37 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   letter-spacing: var(--espacement-inter-lettres-etendu-m);
   background: var(--couleur-noir);
 }
-#menu-categories-produits ul li:hover {
-  background: var(--couleur-gris);
-}
-#menu-categories-produits ul li a {
-  display: inline-block;
-  inline-size: inherit;
-  padding: var(--menu-entree-marges-internes-ligne) 0;
-  text-decoration: none;
-}
-#menu-categories-produits ul li a:focus-visible {
-  outline-color: var(--couleur-blanc);
-}
-@media (hover: hover) {
-  #menu-categories-produits ul li a:hover {
-    color: var(--couleur-noir);
-    background: var(--arriere-plan-points);
-  }
-}
-#menu-categories-produits ul li.categorie-courante {
-  background: var(--couleur-gris);
-}
 #menu-categories-produits ul li.categorie-courante a {
   font-weight: 600;
   color: var(--couleur-noir);
-  background: var(--arriere-plan-points);
+  background: var(--couleur-gris-fonce);
-}
-#menu-categories-produits ul li.categorie-courante a:focus-visible {
-  outline-color: var(--couleur-noir);
 }
 @media (hover: hover) {
   #menu-categories-produits ul li.categorie-courante a:hover {
-    background: var(--arriere-plan-points);
+    color: var(--couleur-noir);
+  }
+}
+#menu-categories-produits ul li {
+  /*
+   * 1. Permet de créer des marges verticales.
+   * 2. Hérite de la longueur du conteneur.
+   * 3. Surchargement de styles pour les liens.
+   */
+}
+#menu-categories-produits ul li a {
+  display: inline-block; /* 1 */
+  width: inherit; /* 2 */
+  padding: var(--menu-entree-marges-internes-ligne) 0;
+  text-decoration: none;
+  outline: initial; /* 3 */
+}
+#menu-categories-produits ul li a:focus-visible {
+  color: var(--couleur-gris-fonce);
+  outline: initial; /* 3 */
+}
+@media (hover: hover) {
+  #menu-categories-produits ul li a:hover {
+    background: var(--couleur-gris-fonce);
   }
 }
 @media (width <= 1000px) {
@@ -1053,10 +972,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   }
   #menu-categories-produits ul li {
     flex-grow: 1;
-    inline-size: min(140px, 100%);
+    width: min(140px, 100%);
   }
   #menu-categories-produits ul li a {
-    inline-size: 100%;
+    width: 100%;
     border: initial;
   }
 }
@@ -1067,8 +986,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
     flex-flow: row nowrap;
   }
   #menu-categories-produits ul li {
-    inline-size: initial;
+    width: initial;
-    min-inline-size: 140px;
+    min-width: 140px;
   }
 }
 
@@ -1104,9 +1023,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   top: var(--colonne-gauche-position-haut);
   height: var(--colonne-gauche-photo-hauteur);
 }
-.photos-produit .colonne.colonne-gauche figure,
+.photos-produit .colonne.colonne-gauche figure, .photos-produit .colonne.colonne-gauche picture, .photos-produit .colonne.colonne-gauche img {
-.photos-produit .colonne.colonne-gauche picture,
-.photos-produit .colonne.colonne-gauche img {
   height: 100%;
 }
 .photos-produit .colonne.colonne-droite img {
@@ -1181,8 +1098,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   --carte-produit-longueur-maximale: 1000px;
   display: grid;
   grid-auto-rows: 1fr;
-  grid-template-columns:
+  grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
-    repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
   gap: 1px; /* 2 */
   min-height: var(--grille-produits-hauteur-minimale);
 }
@@ -1424,9 +1340,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 .details-produit__textes .section-textuelle:not(:last-of-type) {
   border-block-end: 1px solid var(--couleur-noir);
 }
-.details-produit__textes
+.details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu {
-  .section-textuelle:has(button[aria-expanded="false"])
-  .section-textuelle__contenu {
   display: none;
 }
 .details-produit__textes .section-textuelle h3 {
@@ -1535,10 +1449,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   position: relative;
 }
 @media (hover: hover) {
-  .produits-similaires
+  .produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol {
-    .grille-produits-similaires
-    article figure a:hover
-    .produit__illustration__survol {
     visibility: visible;
     opacity: 100%;
     transition: 0.3s opacity, 0.3s visibility;
@@ -1611,4 +1522,4 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   text-align: right;
 }
 
-/* # sourceMappingURL=main.css.map */
+/*# sourceMappingURL=main.css.map */

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

@@ -7,9 +7,6 @@
   height: initial;
   margin: auto;
   padding: var(--espace-xl) 0;
-  font-style: italic;
-  text-transform: uppercase;
-  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 
 /* # sourceMappingURL=page-boutique.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA","file":"page-boutique.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA","file":"page-boutique.css"}

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

@@ -1 +1 @@
-#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);margin:auto;font-style:italic}
+#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;margin:auto}

web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss

@@ -85,7 +85,6 @@ button, input, select, textarea {
 /*
  * Désactive les animations pour les Utilisateurs n'en souhaitant pas.
  */
-
 /* @media (prefers-reduced-motion) {
   *, *::before, *::after {
     scroll-behavior: auto !important;

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss

@@ -35,13 +35,6 @@ button {
   &.bouton-case-pleine {
     width: 100%;
     height: 100%;
-
-    @media (hover: hover) {
-      &:hover {
-        color: var(--couleur-noir);
-        background: var(--arriere-plan-points);
-      }
-    }
   }
 
   // Bouton avec les couleurs inversées.
@@ -65,7 +58,7 @@ button {
     @media (hover: hover) {
       &:hover {
         color: var(--couleur-noir);
-        background: var(--arriere-plan-points);
+        background: var(--couleur-gris);
       }
     }
   }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss

@@ -27,7 +27,6 @@
   gap: 1px; /* 2 */
   min-height: var(--grille-produits-hauteur-minimale);
 
-  // Carte d'un Produit.
   article {
     max-width: var(--carte-produit-longueur-maximale);
     box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */

web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss

@@ -2,17 +2,22 @@
 
 /*
  * Le menu avec les Catégories de Produits pour une navigation rapide.
+ *
+ * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
+ *    correctement.
  */
 #menu-categories-produits {
   /* Dimensions */
   --menu-entree-longueur-minimale: 13ch;
 
   // Marges
-  --menu-section-marges-bloc-debut: var(--en-tete-hauteur);
+  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
   --menu-entree-marges-internes-ligne: var(--espace-m);
 
+  // height: var(--menu-section-hauteur);
+
   position: relative;
-  margin-top: var(--menu-section-marges-bloc-debut);
+  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
 
   &[data-entrees-presentes-debut] {
     svg:first-of-type {
@@ -30,8 +35,8 @@
     pointer-events: none;
     position: absolute;
     bottom: calc(35.18px / 2 - 0.35rem);
-    inline-size: 0.8rem;
+    width: 0.8rem;
-    block-size: 0.8rem;
+    height: 0.8rem;
     opacity: 0%;
     mix-blend-mode: exclusion;
     shape-rendering: geometricprecision;
@@ -66,9 +71,12 @@
     gap: 1px;
     place-items: center;
 
+    /*
+     * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
+     */
     li {
-      inline-size: 100%;
+      width: 100%; /* 1 */
-      font-weight: 500;
+      font-weight: 450;
       font-style: italic;
       color: var(--couleur-gris);
       text-align: center;
@@ -76,45 +84,40 @@
       letter-spacing: var(--espacement-inter-lettres-etendu-m);
       background: var(--couleur-noir);
 
-      &:hover {
+      &.categorie-courante {
-        background: var(--couleur-gris);
+        a {
+          font-weight: 600;
+          color: var(--couleur-noir);
+          background: var(--couleur-gris-fonce);
+
+          @media (hover: hover) {
+            &:hover {
+              color: var(--couleur-noir);
+            }
+          }
+        }
       }
 
+      /*
+       * 1. Permet de créer des marges verticales.
+       * 2. Hérite de la longueur du conteneur.
+       * 3. Surchargement de styles pour les liens.
+       */
       a {
-        display: inline-block;
+        display: inline-block; /* 1 */
-        inline-size: inherit;
+        width: inherit; /* 2 */
         padding: var(--menu-entree-marges-internes-ligne) 0;
         text-decoration: none;
+        outline: initial; /* 3 */
 
         &:focus-visible {
-          outline-color: var(--couleur-blanc);
+          color: var(--couleur-gris-fonce);
+          outline: initial; /* 3 */
         }
 
         @media (hover: hover) {
           &:hover {
-            color: var(--couleur-noir);
+            background: var(--couleur-gris-fonce);
-            background: var(--arriere-plan-points);
-          }
-        }
-      }
-
-      // Entrée de la Catégorie courante.
-      &.categorie-courante {
-        background: var(--couleur-gris);
-
-        a {
-          font-weight: 600;
-          color: var(--couleur-noir);
-          background: var(--arriere-plan-points);
-
-          &:focus-visible {
-            outline-color: var(--couleur-noir);
-          }
-
-          @media (hover: hover) {
-            &:hover {
-              background: var(--arriere-plan-points);
-            }
           }
         }
       }
@@ -129,10 +132,10 @@
 
       li {
         flex-grow: 1;
-        inline-size: min(140px, 100%);
+        width: min(140px, 100%);
 
         a {
-          inline-size: 100%;
+          width: 100%;
           border: initial;
         }
       }
@@ -145,8 +148,8 @@
       flex-flow: row nowrap;
 
       li {
-        inline-size: initial;
+        width: initial;
-        min-inline-size: 140px;
+        min-width: 140px;
       }
     }
   }

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

@@ -10,9 +10,6 @@
       height: initial;
       margin: auto;
       padding: var(--espace-xl) 0;
-      font-style: italic;
-      text-transform: uppercase;
-      letter-spacing: var(--espacement-inter-lettres-etendu-m);
     }
   }
 }

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

@@ -24,7 +24,7 @@ const _etats = {
 
     <div class="actions">
       <button
-        {{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine"
+        {{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine bouton-inverse"
         id="bouton-plus-de-produits" type="button"
       >
         Show more