2025-11-04

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

@@ -61,7 +61,7 @@
   /* Dimensions */
   --en-tete-hauteur: 61px;
   --menu-categories-produits-hauteur: calc(var(--espace-m) * 2 + 1rlh);
-  --pied-de-page-hauteur: calc(0.8rem * 1.5 * 3 + var(--espace-m) * 2);
+  --pied-de-page-hauteur: calc(0.8rem * 1.5 * 3 + var(--espace-s) * 2);
   --contenu-page-hauteur-minimale-sans-categories: calc(
     100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)
   );
@@ -70,6 +70,7 @@
       - var(--menu-categories-produits-hauteur)
   );
   /* Espacements */
+  --espace-2xs: 0.1rem;
   --espace-xs: 0.25rem;
   --espace-s: 0.5rem;
   --espace-m: 1rem;
@@ -649,12 +650,12 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   border-bottom: 1px solid var(--couleur-noir);
   background: var(--couleur-gris);
 }
+#en-tete picture, #en-tete img {
+  background: transparent;
+}
 #en-tete .logo {
   width: var(--en-tete-logo-longueur);
 }
-#en-tete .logo picture, #en-tete .logo img {
-  background: transparent;
-}
 #en-tete .logo img {
   width: 100%;
   height: 40px;
@@ -664,11 +665,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   image-rendering: crisp-edges;
   shape-rendering: geometricprecision;
 }
-#en-tete .logo button {
-  display: block;
-  align-content: center;
-  width: 100%;
-}
 #en-tete {
   /* TODO: Déplacer au sein d'un Composant ? */
 }
@@ -741,15 +737,10 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   border: 1px solid var(--couleur-noir);
   background: initial;
 }
-#en-tete .compte-panier {
-  /*
-   * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
-   */
-}
 #en-tete .compte-panier a {
-  min-width: 10ch; /* 1 */
-  font-size: 1.1rem;
   text-transform: lowercase;
+  padding-block: var(--espace-2xs);
+  padding-inline: var(--espace-s);
 }
 #en-tete .compte-panier a.lien-compte {
   border-color: transparent;
@@ -757,6 +748,31 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 #en-tete .compte-panier a[data-contient-articles=true] {
   background: var(--couleur-jaune);
 }
+#en-tete .conteneur {
+  display: flex;
+  column-gap: var(--espace-m);
+}
+#en-tete .bouton-menu-mobile {
+  --hauteur-bouton-menu: 22px;
+  display: none;
+  align-content: center;
+}
+#en-tete .bouton-menu-mobile img {
+  height: var(--hauteur-bouton-menu);
+  object-fit: contain;
+  image-rendering: crisp-edges;
+  shape-rendering: geometricprecision;
+}
+@media (width <= 1000px) {
+  #en-tete .bouton-menu-mobile {
+    display: block;
+  }
+}
+@media (width <= 600px) {
+  #en-tete {
+    --en-tete-marges-internes-ligne: var(--espace-l);
+  }
+}
 
 /*
  * Le menu avec les Catégories de Produits pour une navigation rapide.
@@ -1415,7 +1431,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   place-items: center;
   max-width: 100vw;
   height: var(--pied-de-page-hauteur);
-  padding: var(--espace-m);
+  padding: var(--espace-s) var(--espace-m);
   border-top: 1px solid var(--couleur-noir);
   font-size: 0.8rem;
   background: var(--couleur-jaune);