fonc(styles) étoffe les styles de l'en-tête et du menu des Catégories de Produits

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

@@ -4,70 +4,90 @@
   font-weight: 100;
   font-style: normal;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 100;
   font-style: italic;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 300;
   font-style: normal;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 300;
   font-style: italic;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 400;
   font-style: italic;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 700;
   font-style: normal;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 700;
   font-style: italic;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 900;
   font-style: normal;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
 }
 @font-face {
   font-family: Lato;
   font-weight: 900;
   font-style: italic;
   font-display: swap;
-  src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
+  src:
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"),
+    url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
 }
 @font-face {
   font-family: Myriad;
@@ -75,7 +95,9 @@
   font-style: normal;
   font-display: swap;
   font-stretch: 70% 110%;
-  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");
+  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");
 }
 @font-face {
   font-family: Myriad;
@@ -83,14 +105,16 @@
   font-style: italic;
   font-display: swap;
   font-stretch: 70% 110%;
-  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");
+  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");
 }
 :root {
   /* Couleurs */
-  --couleur-noir: #000;
   --couleur-gris: #eceaeb;
-  --couleur-jaune: #ebffb8;
   --couleur-bordeaux: #490918;
+  --couleur-jaune: #ebffb8;
+  --couleur-noir: #202020;
   /* Polices */
   --police-lato: "Lato", sans-serif;
   --police-myriad: "Myriad", sans-serif;
@@ -98,14 +122,14 @@
 
 /**
  * 1. Utilise un meilleur modèle de boîte.
- * 2. Rendu des polices pour Safari/iOS
+ * 2. Rendu spécifique du texte pour Safari/iOS.
- * 3. Rendu plus précis du texte
+ * 3. Rendu plus précis du texte.
  */
 html {
   box-sizing: border-box; /* 1 */
   -webkit-font-smoothing: antialiased; /* 2 */
   text-size-adjust: none; /* 2 */
-  text-rendering: geometricprecision;
+  text-rendering: geometricprecision; /* 3 */
 }
 
 /**
@@ -124,29 +148,56 @@ html {
 }
 
 /**
- * 1. Utilise une couleur d'arrière-plan définie
+ * 1. Utilise une couleur d'arrière-plan définie.
+ * 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur.
  */
 body {
+  min-height: 100vh; /* 2 */
   background: var(--couleur-gris); /* 1 */
 }
 
+/**
+ * Force l'héritage des styles pour ces éléments
+ */
+button, input, select, textarea {
+  font: inherit;
+}
+
 body {
-  font: 1rem/1.4 var(--police-lato) 0.5px;
+  font: 1rem/1.4 var(--police-myriad) 0.5px;
   color: var(--couleur-noir);
 }
 
 /**
- * 1. Désactive la bordure.
+ * 1. Facilite l'usages des images.
+ * 2. Empêche les images de dépasser leur conteneur.
+ */
+img, picture {
+  display: block; /* 1 */
+  max-width: 100%; /* 2 */
+}
+
+/**
+ * 1. Change la « bordure » de base.
  * 2. Ajoute un contour, qui sera colorisé au focus.
- * 3. Anime le changement de couleur du bordure et du contour.
+ * 3. Anime le changement de couleur des texte, bordure et contour.
  */
 a {
   /* Couleurs */
-  --lien-contour-couleur-focus: var(--couleur-noir);
+  --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */
-  text-decoration: none; /* 1 */
+  text-decoration: underline solid; /* 1 */
+  text-decoration-color: transparent; /* 1 */
+  text-decoration-skip-ink: auto; /* 1 */
   outline: 1px solid transparent; /* 2 */
   outline-offset: initial; /* 2 */
-  transition: 0.2s outline-color, 0.2s border-color; /* 3 */
+  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 */
+  text-decoration-skip: edges; /* 1 */
   /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
   /**
    * Lien ressemblant visuellement à un bouton.
@@ -157,7 +208,7 @@ a:focus, a:focus-visible {
 }
 a.lien-bouton {
   /* Marges */
-  --lien-bouton-marges-internes-bloc: 0.25rem;
+  --lien-bouton-marges-internes-bloc: 0.33rem;
   /* Couleurs */
   --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
   padding: var(--lien-bouton-marges-internes-bloc) 0;
@@ -202,7 +253,8 @@ 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(--liste-puce-cercle-puce-taille) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
+  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 */
 }
 
 #en-tete {
@@ -210,7 +262,7 @@ ul.avec-puce-cercle a {
   --en-tete-marges-internes-ligne: 2rem;
   --en-tete-marges-internes-bloc: 1rem;
   /* Dimensions */
-  --en-tete-hauteur: 90px;
+  --en-tete-hauteur: 80px;
   --en-tete-logo-longueur: 120px;
   display: flex;
   flex-flow: row nowrap;
@@ -245,7 +297,7 @@ ul.avec-puce-cercle a {
   display: flex;
   grid-column: 2;
   flex-flow: row nowrap;
-  gap: max(2rem, 8vw);
+  gap: max(2rem, 5vw);
   justify-content: space-between;
 }
 #en-tete .menu-navigation__entree {
@@ -257,6 +309,7 @@ ul.avec-puce-cercle a {
   --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
   /* Dispositions */
   --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
+  transition: 0.2s background;
 }
 #en-tete .menu-navigation__entree a {
   display: inline-block; /* 1 */
@@ -268,48 +321,91 @@ ul.avec-puce-cercle a {
     background: var(--nav-entree-arriere-plan-couleur);
   }
 }
-#en-tete .panier {
+#en-tete .compte-panier {
-  display: inline-flex;
+  display: flex;
   flex-flow: row nowrap;
-  place-content: center;
+  gap: max(1rem, 2vw);
   place-items: center;
   text-align: center;
+  /**
+   * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
+   */
 }
-#en-tete .panier__lien {
+#en-tete .compte-panier a {
-  min-width: 10ch;
+  min-width: 9ch; /* 1 */
+  text-transform: lowercase;
+}
+#en-tete .compte-panier a.lien-compte {
+  text-decoration: underline solid;
+  text-decoration-color: transparent;
+  text-decoration-skip-ink: auto;
+  border-color: transparent;
+  text-decoration-skip: edges;
+}
+@media (hover: hover) {
+  #en-tete .compte-panier a.lien-compte:hover {
+    text-decoration-color: var(--couleur-noir);
+  }
+}
+#en-tete .compte-panier a[data-contient-articles=true] {
+  background: var(--couleur-jaune);
 }
 
+#menu-categories-produits {
+  /* Dimensions */
+  --menu-entree-longueur-minimale: 13ch;
+  /* Marges */
+  --menu-entree-marges-internes-ligne: 1rem;
+  /**
+   * Liste des Catégories de Produits.
+   *
+   * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
+   * minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la
+   * ligne.
+   */
+}
 #menu-categories-produits ul {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
   place-items: center;
+  /**
+   * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
+   */
 }
 #menu-categories-produits ul li {
-  width: 100%;
+  width: 100%; /* 1 */
+  font-weight: 450;
   font-style: italic;
-  color: white;
+  color: var(--couleur-gris);
   text-align: center;
   text-transform: uppercase;
-  background: black;
+  letter-spacing: 1px;
+  background: var(--couleur-noir);
+  /**
+   * 1. Permet de créer des marges verticales.
+   * 2. Hérite de la longueur du conteneur.
+   * 3. Surchargement de styles pour les liens.
+   */
+}
+#menu-categories-produits ul li:active a {
+  font-weight: 500;
 }
 #menu-categories-produits ul li a {
-  display: inline-block;
+  display: inline-block; /* 1 */
-  width: inherit;
+  width: inherit; /* 2 */
-  padding: 1rem 0;
+  padding: var(--menu-entree-marges-internes-ligne) 0;
   border-right: 1px solid var(--couleur-gris);
   border-left: 1px solid var(--couleur-gris);
-  outline: initial;
+  outline: initial; /* 3 */
 }
 #menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {
   color: var(--couleur-jaune);
-  border-right-color: var(--couleur-jaune);
+  outline: initial; /* 3 */
-  border-left-color: var(--couleur-jaune);
-  outline: initial;
 }
 @media (hover: hover) {
   #menu-categories-produits ul li a:hover {
     color: var(--couleur-jaune);
-    outline: initial;
+    outline: initial; /* 3 */
   }
 }
 #menu-categories-produits ul li:first-of-type a {
@@ -319,4 +415,33 @@ ul.avec-puce-cercle a {
   border-right: initial;
 }
 
+#pied-de-page {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  place-items: center;
+  align-self: end;
+  min-width: 100vw;
+  padding: 1rem 2rem;
+  line-height: 1.5;
+  background: var(--couleur-jaune);
+  border: 1px solid var(--couleur-noir);
+}
+#pied-de-page .zone-menu-navigation-secondaire {
+  justify-self: start;
+  width: 100%;
+  height: 100%;
+  text-transform: lowercase;
+}
+#pied-de-page .zone-liens-reseaux-sociaux {
+  justify-items: end;
+  width: 100%;
+  height: 100%;
+  text-align: right;
+}
+@media (hover: hover) {
+  #pied-de-page a:hover {
+    text-decoration-color: var(--couleur-noir);
+  }
+}
+
 /*# sourceMappingURL=main.css.map */

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/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;ACPF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACjCF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;AC7CR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AChFJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAUA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;IACA;;;AAMJ;EACE;;AAKF;EACE","file":"main.css"}
+{"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/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;ACPF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;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;;;AC1CF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;ACNF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;ACvDR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAON;EACE;;;AC1GR;AACE;EACA;AAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;ACnER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIA;EACE;IACE","file":"main.css"}

web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss

@@ -2,10 +2,10 @@
 
 :root {
   /* Couleurs */
-  --couleur-noir: #000;
   --couleur-gris: #eceaeb;
-  --couleur-jaune: #ebffb8;
   --couleur-bordeaux: #490918;
+  --couleur-jaune: #ebffb8;
+  --couleur-noir: #202020;
 
   /* Polices */
   --police-lato: "Lato", sans-serif;

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

@@ -4,14 +4,14 @@
 
 /**
  * 1. Utilise un meilleur modèle de boîte.
- * 2. Rendu des polices pour Safari/iOS
+ * 2. Rendu spécifique du texte pour Safari/iOS.
- * 3. Rendu plus précis du texte
+ * 3. Rendu plus précis du texte.
  */
 html {
   box-sizing: border-box; /* 1 */
   -webkit-font-smoothing: antialiased; /* 2 */
   text-size-adjust: none; /* 2 */
-  text-rendering: geometricprecision;
+  text-rendering: geometricprecision; /* 3 */
 }
 
 /**
@@ -30,8 +30,17 @@ html {
 }
 
 /**
- * 1. Utilise une couleur d'arrière-plan définie
+ * 1. Utilise une couleur d'arrière-plan définie.
+ * 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur.
  */
 body {
+  min-height: 100vh; /* 2 */
   background: var(--couleur-gris); /* 1 */
 }
+
+/**
+ * Force l'héritage des styles pour ces éléments
+ */
+button, input, select, textarea {
+  font: inherit;
+}

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

@@ -1,6 +1,6 @@
 // Styles typographiques de base
 
 body {
-  font: 1rem/1.4 var(--police-lato) 0.5px;
+  font: 1rem/1.4 var(--police-myriad) 0.5px;
   color: var(--couleur-noir);
 }

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

@@ -0,0 +1,10 @@
+// Styles de base pour les images (<img>, <picture>).
+
+/**
+ * 1. Facilite l'usages des images.
+ * 2. Empêche les images de dépasser leur conteneur.
+ */
+img, picture {
+  display: block; /* 1 */
+  max-width: 100%; /* 2 */
+}

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

@@ -1,18 +1,28 @@
 // Styles de base pour les liens (<a>).
 
 /**
- * 1. Désactive la bordure.
+ * 1. Change la « bordure » de base.
  * 2. Ajoute un contour, qui sera colorisé au focus.
- * 3. Anime le changement de couleur du bordure et du contour.
+ * 3. Anime le changement de couleur des texte, bordure et contour.
  */
 a {
   /* Couleurs */
-  --lien-contour-couleur-focus: var(--couleur-noir);
+  --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */
 
-  text-decoration: none; /* 1 */
+  text-decoration: underline solid; /* 1 */
+  text-decoration-color: transparent; /* 1 */
+  text-decoration-skip-ink: auto; /* 1 */
   outline: 1px solid transparent; /* 2 */
   outline-offset: initial; /* 2 */
-  transition: 0.2s outline-color, 0.2s border-color; /* 3 */
+  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 */
+
+  text-decoration-skip: edges; /* 1 */
 
   /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
   &:focus, &:focus-visible {
@@ -24,7 +34,7 @@ a {
    */
   &.lien-bouton {
     /* Marges */
-    --lien-bouton-marges-internes-bloc: 0.25rem;
+    --lien-bouton-marges-internes-bloc: 0.33rem;
 
     /* Couleurs */
     --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);

web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss

@@ -6,7 +6,7 @@
   --en-tete-marges-internes-bloc: 1rem;
 
   /* Dimensions */
-  --en-tete-hauteur: 90px;
+  --en-tete-hauteur: 80px;
   --en-tete-logo-longueur: 120px;
 
   display: flex;
@@ -34,7 +34,7 @@
       display: flex;
       grid-column: 2;
       flex-flow: row nowrap;
-      gap: max(2rem, 8vw);
+      gap: max(2rem, 5vw);
       justify-content: space-between;
     }
 
@@ -59,6 +59,8 @@
       /* Dispositions */
       --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
 
+      transition: 0.2s background;
+
       a {
         display: inline-block; /* 1 */
         padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
@@ -73,15 +75,39 @@
     }
   }
 
-  .panier {
+  .compte-panier {
-    display: inline-flex;
+    display: flex;
     flex-flow: row nowrap;
-    place-content: center;
+    gap: max(1rem, 2vw);
     place-items: center;
     text-align: center;
 
-    &__lien {
+    /**
-      min-width: 10ch;
+     * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
+     */
+    a {
+      min-width: 9ch; /* 1 */
+      text-transform: lowercase;
+
+      &.lien-compte {
+        text-decoration: underline solid;
+        text-decoration-color: transparent;
+        text-decoration-skip-ink: auto;
+        border-color: transparent;
+        text-decoration-skip: edges;
+
+        @media (hover: hover) {
+          &:hover {
+            text-decoration-color: var(--couleur-noir);
+
+            // border-bottom-color: var(--couleur-noir);
+          }
+        }
+      }
+
+      &[data-contient-articles="true"] {
+        background: var(--couleur-jaune);
+      }
     }
   }
 }

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

@@ -1,60 +1,73 @@
 // Styles pour le menu des Catégories de Produits
 
 #menu-categories-produits {
+  /* Dimensions */
+  --menu-entree-longueur-minimale: 13ch;
+
+  /* Marges */
+  --menu-entree-marges-internes-ligne: 1rem;
+
+  /**
+   * Liste des Catégories de Produits.
+   *
+   * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
+   * minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la
+   * ligne.
+   */
   ul {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
     place-items: center;
 
+    /**
+     * 1. Force chaque entrée à occuper tout l'espace alloué par grid.
+     */
     li {
-      width: 100%;
+      width: 100%; /* 1 */
+      font-weight: 450;
       font-style: italic;
-      color: white;
+      color: var(--couleur-gris);
       text-align: center;
       text-transform: uppercase;
-      background: black;
+      letter-spacing: 1px;
+      background: var(--couleur-noir);
 
-      &:focus-within + li a {
+      &:active a {
-        // border-left-color: var(--couleur-jaune);
+        font-weight: 500;
-      }
-
-      &:has(+ li:focus-within) a {
-        // border-right-color: var(--couleur-jaune);
       }
 
+      /**
+       * 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 */
-        width: inherit;
+        width: inherit; /* 2 */
-        padding: 1rem 0;
+        padding: var(--menu-entree-marges-internes-ligne) 0;
         border-right: 1px solid var(--couleur-gris);
         border-left: 1px solid var(--couleur-gris);
-        outline: initial;
+        outline: initial; /* 3 */
 
         &:focus, &:focus-visible {
           color: var(--couleur-jaune);
-          border-right-color: var(--couleur-jaune);
+          outline: initial; /* 3 */
-          border-left-color: var(--couleur-jaune);
-          outline: initial;
         }
 
         @media (hover: hover) {
           &:hover {
             color: var(--couleur-jaune);
-            outline: initial;
+            outline: initial; /* 3 */
           }
         }
       }
 
-      &:first-of-type {
+      &:first-of-type a {
-        a {
+        border-left: initial;
-          border-left: initial;
-        }
       }
 
-      &:last-of-type {
+      &:last-of-type a {
-        a {
+        border-right: initial;
-          border-right: initial;
-        }
       }
     }
   }

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

@@ -8,6 +8,7 @@
 
 // 1.2 Éléments
 @use "base/elements/boutons" as boutons;
+@use "base/elements/images" as images;
 @use "base/elements/liens" as liens;
 @use "base/elements/listes" as listes;