wip

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

@@ -286,12 +286,6 @@ button:disabled {
   background: var(--arriere-plan-points);
   outline-color: transparent;
 }
-@media (hover: hover) {
-  button:hover {
-    color: var(--couleur-blanc);
-    background: var(--couleur-gris-fonce);
-  }
-}
 button {
   /* Particularismes. */
 }
@@ -355,6 +349,12 @@ button.bouton-retour-haut[data-actif] {
     background: var(--couleur-gris-fond);
   }
 }
+@media (hover: hover) {
+  button:hover {
+    color: var(--couleur-blanc);
+    background: var(--couleur-gris-fonce);
+  }
+}
 
 dialog {
   z-index: 999;
@@ -947,17 +947,14 @@ 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); /* 1 */
+  --menu-section-marges-bloc-debut: var(--en-tete-hauteur);
   --menu-entree-marges-internes-ligne: var(--espace-m);
   position: relative;
-  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
+  margin-top: var(--menu-section-marges-bloc-debut);
 }
 #menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
   opacity: 100%;
@@ -969,8 +966,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   pointer-events: none;
   position: absolute;
   bottom: calc(17.59px - 0.35rem);
-  width: 0.8rem;
+  inline-size: 0.8rem;
-  height: 0.8rem;
+  block-size: 0.8rem;
   opacity: 0%;
   mix-blend-mode: exclusion;
   shape-rendering: geometricprecision;
@@ -1002,13 +999,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
     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 {
-  width: 100%; /* 1 */
+  inline-size: 100%;
-  font-weight: 450;
+  font-weight: 500;
   font-style: italic;
   color: var(--couleur-gris);
   text-align: center;
@@ -1016,37 +1010,38 @@ 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.categorie-courante a {
+#menu-categories-produits ul li:hover {
-  font-weight: 600;
+  background: var(--couleur-gris);
-  color: var(--couleur-noir);
-  background: var(--couleur-gris-fonce);
-}
-@media (hover: hover) {
-  #menu-categories-produits ul li.categorie-courante a:hover {
-    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 */
+  display: inline-block;
-  width: inherit; /* 2 */
+  inline-size: inherit;
   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-color: var(--couleur-blanc);
-  outline: initial; /* 3 */
 }
 @media (hover: hover) {
   #menu-categories-produits ul li a:hover {
-    background: var(--couleur-gris-fonce);
+    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);
+}
+#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);
   }
 }
 @media (width <= 1000px) {
@@ -1058,10 +1053,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   }
   #menu-categories-produits ul li {
     flex-grow: 1;
-    width: min(140px, 100%);
+    inline-size: min(140px, 100%);
   }
   #menu-categories-produits ul li a {
-    width: 100%;
+    inline-size: 100%;
     border: initial;
   }
 }
@@ -1072,8 +1067,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
     flex-flow: row nowrap;
   }
   #menu-categories-produits ul li {
-    width: initial;
+    inline-size: initial;
-    min-width: 140px;
+    min-inline-size: 140px;
   }
 }
 

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

@@ -85,6 +85,7 @@ 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

@@ -29,13 +29,6 @@ button {
     outline-color: transparent;
   }
 
-  @media (hover: hover) {
-    &:hover {
-      color: var(--couleur-blanc);
-      background: var(--couleur-gris-fonce);
-    }
-  }
-
   /* Particularismes. */
 
   // Bouton prenant toute l'espace disponible.
@@ -111,4 +104,11 @@ button {
       }
     }
   }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--couleur-blanc);
+      background: var(--couleur-gris-fonce);
+    }
+  }
 }

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

@@ -2,22 +2,17 @@
 
 /*
  * 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); /* 1 */
+  --menu-section-marges-bloc-debut: var(--en-tete-hauteur);
   --menu-entree-marges-internes-ligne: var(--espace-m);
 
-  // height: var(--menu-section-hauteur);
-
   position: relative;
-  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
+  margin-top: var(--menu-section-marges-bloc-debut);
 
   &[data-entrees-presentes-debut] {
     svg:first-of-type {
@@ -35,8 +30,8 @@
     pointer-events: none;
     position: absolute;
     bottom: calc(35.18px / 2 - 0.35rem);
-    width: 0.8rem;
+    inline-size: 0.8rem;
-    height: 0.8rem;
+    block-size: 0.8rem;
     opacity: 0%;
     mix-blend-mode: exclusion;
     shape-rendering: geometricprecision;
@@ -71,12 +66,9 @@
     gap: 1px;
     place-items: center;
 
-    /*
-     * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
-     */
     li {
-      width: 100%; /* 1 */
+      inline-size: 100%;
-      font-weight: 450;
+      font-weight: 500;
       font-style: italic;
       color: var(--couleur-gris);
       text-align: center;
@@ -84,40 +76,45 @@
       letter-spacing: var(--espacement-inter-lettres-etendu-m);
       background: var(--couleur-noir);
 
+      &:hover {
+        background: var(--couleur-gris);
+      }
+
+      a {
+        display: inline-block;
+        inline-size: inherit;
+        padding: var(--menu-entree-marges-internes-ligne) 0;
+        text-decoration: none;
+
+        &:focus-visible {
+          outline-color: var(--couleur-blanc);
+        }
+
+        @media (hover: hover) {
+          &:hover {
+            color: var(--couleur-noir);
+            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(--couleur-gris-fonce);
+          background: var(--arriere-plan-points);
-
-          @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; /* 1 */
-        width: inherit; /* 2 */
-        padding: var(--menu-entree-marges-internes-ligne) 0;
-        text-decoration: none;
-        outline: initial; /* 3 */
 
           &:focus-visible {
-          color: var(--couleur-gris-fonce);
+            outline-color: var(--couleur-noir);
-          outline: initial; /* 3 */
           }
 
           @media (hover: hover) {
             &:hover {
-            background: var(--couleur-gris-fonce);
+              background: var(--arriere-plan-points);
+            }
           }
         }
       }
@@ -132,10 +129,10 @@
 
       li {
         flex-grow: 1;
-        width: min(140px, 100%);
+        inline-size: min(140px, 100%);
 
         a {
-          width: 100%;
+          inline-size: 100%;
           border: initial;
         }
       }
@@ -148,8 +145,8 @@
       flex-flow: row nowrap;
 
       li {
-        width: initial;
+        inline-size: initial;
-        min-width: 140px;
+        min-inline-size: 140px;
       }
     }
   }