2024-08-13

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

@@ -4,90 +4,70 @@
   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;
@@ -95,9 +75,7 @@
   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;
@@ -105,9 +83,7 @@
   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 */
@@ -118,6 +94,14 @@
   /* Polices */
   --police-lato: "Lato", sans-serif;
   --police-myriad: "Myriad", sans-serif;
+  /* Dimensions */
+  --en-tete-hauteur: 60px;
+  --menu-categories-produits-hauteur: 54.39px;
+  /* Espacements */
+  --espace-xs: 0.25rem;
+  --espace-s: 0.5rem;
+  --espace-m: 1rem;
+  --espace-l: 2rem;
 }
 
 /**
@@ -139,7 +123,9 @@ html {
  * 2. Pas de marges par défaut.
  * 3. Hérite par défaut des styles de texte et de couleur.
  */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 2 */
@@ -159,24 +145,59 @@ body {
 /**
  * Force l'héritage des styles pour ces éléments
  */
-button, input, select, textarea {
+button,
+input,
+select,
+textarea {
   font: inherit;
 }
 
+/**
+ * Change la couleur d'arrière-plan à la sélection du texte.
+ */
+*::selection {
+  background: var(--couleur-jaune);
+}
+
 body {
-  font: 1rem/1.4 var(--police-myriad) 0.5px;
+  font: 1rem/1.4 Myriad;
   color: var(--couleur-noir);
+  letter-spacing: 0.5px;
+}
+
+/**
+ * Réinitialisation des styles des <button>.
+ */
+button {
+  all: initial;
+  cursor: pointer;
+  font: inherit;
+  text-align: center;
+}
+button.bouton-case-pleine {
+  width: 100%;
+  height: 100%;
+}
+button[disabled] {
+  cursor: not-allowed;
 }
 
 /**
  * 1. Facilite l'usages des images.
- * 2. Empêche les images de dépasser leur conteneur.
+ * 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.
+ * 3. Arrière-plan jaune en attendant le chargement de l'image.
  */
-img, picture {
+img,
+picture {
   display: block; /* 1 */
   max-width: 100%; /* 2 */
 }
 
+img {
+  object-fit: cover; /* 2 */
+  background: var(--couleur-jaune); /* 3 */
+}
+
 /**
  * 1. Change la « bordure » de base.
  * 2. Ajoute un contour, qui sera colorisé au focus.
@@ -190,13 +211,7 @@ a {
   text-decoration-skip-ink: auto; /* 1 */
   outline: 1px solid transparent; /* 2 */
   outline-offset: initial; /* 2 */
-  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 */
+  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. */
   /**
@@ -208,10 +223,11 @@ a:focus, a:focus-visible {
 }
 a.lien-bouton {
   /* Marges */
-  --lien-bouton-marges-internes-bloc: 0.33rem;
+  --lien-bouton-marges-internes-bloc: var(--espace-xs);
+  --lien-bouton-marges-internes-ligne: var(--espace-m);
   /* Couleurs */
   --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
-  padding: var(--lien-bouton-marges-internes-bloc) 0;
+  padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
   border: 1px solid var(--couleur-noir);
   /* Change la couleur de l'arrière-plan pour marquer le focus. */
   /* 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. */
@@ -228,6 +244,11 @@ a.lien-bouton:active {
     background: var(--lien-bouton-arriere-plan-couleur-survol);
   }
 }
+@media (hover: hover) {
+  a:not([class]):hover {
+    text-decoration-color: var(--couleur-noir);
+  }
+}
 
 /**
  * Réinitialise les styles des listes non ordonnées.
@@ -253,30 +274,37 @@ 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 {
   /* Marges */
-  --en-tete-marges-internes-ligne: 2rem;
-  --en-tete-marges-internes-bloc: 1rem;
+  --en-tete-marges-internes-ligne: var(--espace-l);
+  --en-tete-marges-internes-bloc: var(--espace-m);
   /* Dimensions */
-  --en-tete-hauteur: 80px;
-  --en-tete-logo-longueur: 120px;
+  --en-tete-section-hauteur: var(--en-tete-hauteur);
+  --en-tete-logo-longueur: 80px;
+  position: fixed;
+  z-index: 20;
+  top: 0;
   display: flex;
   flex-flow: row nowrap;
   place-items: center;
   justify-content: space-between;
+  min-width: 100vw;
+  max-width: 100vw;
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
   background: var(--couleur-gris);
-  border: 1px solid var(--couleur-noir);
   /* TODO: Déplacer au sein d'un Composant ? */
 }
 #en-tete .logo {
   width: var(--en-tete-logo-longueur);
 }
+#en-tete .logo picture,
+#en-tete .logo img {
+  background: transparent;
+}
 #en-tete .menu-navigation {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -297,16 +325,16 @@ ul.avec-puce-cercle a {
   display: flex;
   grid-column: 2;
   flex-flow: row nowrap;
-  gap: max(2rem, 5vw);
+  gap: var(--espace-m);
   justify-content: space-between;
 }
 #en-tete .menu-navigation__entree {
   /* Couleurs */
   --nav-entree-arriere-plan-couleur: var(--couleur-jaune);
   /* Marges */
-  --nav-entree-marges-internes-bloc: 0.33rem;
+  --nav-entree-marges-internes-bloc: var(--espace-xs);
   --nav-entree-marges-internes-ligne: 3rem;
-  --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
+  --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */
   /* Dispositions */
   --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
   transition: 0.2s background;
@@ -324,7 +352,7 @@ ul.avec-puce-cercle a {
 #en-tete .compte-panier {
   display: flex;
   flex-flow: row nowrap;
-  gap: max(1rem, 2vw);
+  gap: 1rem;
   place-items: center;
   text-align: center;
   /**
@@ -336,26 +364,27 @@ ul.avec-puce-cercle a {
   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);
 }
 
+/**
+ * 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-hauteur: var(--menu-categories-produits-hauteur);
   /* Marges */
-  --menu-entree-marges-internes-ligne: 1rem;
+  --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
+  --menu-entree-marges-internes-ligne: var(--espace-m);
+  height: var(--menu-section-hauteur);
+  margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
   /**
    * Liste des Catégories de Produits.
    *
@@ -415,16 +444,399 @@ ul.avec-puce-cercle a {
   border-right: initial;
 }
 
+/**
+ * Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
+ * portées.
+ *
+ * La colonne de gauche ne contiendra qu'une photo, et restera fixe tout le long du défilement
+ * de la boîte. La colonne de droite contiendra plusieurs photos et défilera normalement, photo par * photo.
+ */
+.photos-produit {
+  /* Positions */
+  --colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);
+  /* Dimensions */
+  --colonne-gauche-photo-hauteur: calc(100vh - var(--menu-categories-produits-hauteur));
+  --colonne-droite-photo-hauteur-minimale: calc(
+    100vh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
+  );
+  /* Marges */
+  --section-marges-externes-bloc-fin: 1rem;
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 100%;
+}
+.photos-produit > section {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 50%;
+}
+.photos-produit > section.colonne-gauche {
+  position: sticky;
+  top: var(--colonne-gauche-position-haut);
+  height: var(--colonne-gauche-photo-hauteur);
+}
+.photos-produit > section.colonne-gauche figure, .photos-produit > section.colonne-gauche picture, .photos-produit > section.colonne-gauche img {
+  height: 100%;
+}
+.photos-produit > section.colonne-droite figure picture img:only-child {
+  min-height: var(--colonne-droite-photo-hauteur-minimale);
+}
+
+/**
+ * La Grille des Produits sous forme de Cartes.
+ *
+ * Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
+ * entièrement.
+ * Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci
+ * se dispose sur une nouvelle ligne.
+ *
+ * 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.
+ * 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border
+ * collapse »).
+ */
+.grille-produits {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
+  gap: 1px; /* 2 */
+  margin-bottom: 2rem;
+}
+.grille-produits article {
+  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+}
+.grille-produits article figure {
+  display: flex;
+  flex-flow: column nowrap;
+  row-gap: 2rem;
+  padding: 1rem;
+}
+.grille-produits article figure a {
+  position: relative;
+}
+@media (hover: hover) {
+  .grille-produits article figure a:hover .produit__illustration__survol {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.3s opacity, 0.3s visibility;
+  }
+}
+.grille-produits article figure .produit__illustration__principale {
+  display: block;
+}
+.grille-produits article figure .produit__illustration__survol {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.15s opacity, 0.15s visibility;
+}
+.grille-produits article figure img {
+  aspect-ratio: 9/16;
+  width: 100%;
+  max-height: 70vh;
+  object-fit: cover;
+}
+.grille-produits article figure figcaption {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+.grille-produits article figure figcaption h3 {
+  font-style: italic;
+  letter-spacing: 1px;
+}
+.grille-produits article figure figcaption p {
+  font-weight: 500;
+  letter-spacing: -0.5px;
+}
+
+.informations-produit {
+  position: sticky;
+  bottom: 1rem;
+  overflow: visible;
+  width: 0;
+  height: 0;
+  /* Nom du Produit, sélecteur de variation et prix du Produit */
+  /* Bouton « Ajouter au Panier » */
+}
+.informations-produit__conteneur {
+  transform: translate(calc(50vw - 35ch), -100%);
+  display: grid;
+  width: 70ch;
+  max-width: 70ch;
+  border: 1px solid var(--couleur-noir);
+}
+.informations-produit__conteneur > section {
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+}
+.informations-produit__conteneur > section + section {
+  border-top: 1px solid var(--couleur-noir);
+}
+.informations-produit .details-produit {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: 1fr min-content;
+  padding: initial;
+}
+.informations-produit .details-produit > section {
+  grid-column: span 3;
+  padding: 1rem;
+  font-weight: 350;
+}
+.informations-produit .details-produit > section[hidden] {
+  display: none;
+}
+.informations-produit .details-produit > section ul {
+  list-style: disc;
+  list-style-position: inside;
+}
+.informations-produit .details-produit > section > * + * {
+  margin-top: 1lh;
+}
+.informations-produit .details-produit > ul {
+  display: grid;
+  grid-column: span 3;
+  grid-row: 2;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  text-align: center;
+  text-transform: lowercase;
+  letter-spacing: 1px;
+}
+.informations-produit .details-produit > ul li {
+  width: 100%;
+}
+.informations-produit .details-produit > ul li a {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: var(--espace-xs) 0;
+  border-top: 1px solid var(--couleur-noir);
+  border-right: 1px solid var(--couleur-noir);
+  border-left: 1px solid var(--couleur-noir);
+}
+.informations-produit .details-produit > ul li a:first-of-type {
+  border-left: initial;
+}
+.informations-produit .details-produit > ul li a:last-of-type {
+  border-left: initial;
+}
+.informations-produit .details-produit > ul li a[aria-selected=true] {
+  border-top-color: transparent;
+}
+.informations-produit .selecteur-produit {
+  display: flex;
+  flex-flow: row nowrap;
+  column-gap: 2rem;
+  place-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 1;
+}
+.informations-produit .selecteur-produit__nom {
+  letter-spacing: 1px;
+}
+.informations-produit .selecteur-produit__selection-variation {
+  display: flex;
+  place-items: center;
+  font-weight: 400;
+  text-transform: lowercase;
+  /* Texte du sélecteur */
+  /* Conteneur des sélecteurs */
+  /* Sélecteur natif */
+  /* Sélecteur personnalisé */
+}
+.informations-produit .selecteur-produit__selection-variation label {
+  height: 100%;
+  margin-right: 1ch;
+}
+.informations-produit .selecteur-produit__selection-variation__selecteurs {
+  position: relative;
+  /* Icône de flèche descendante */
+}
+.informations-produit .selecteur-produit__selection-variation__selecteurs::after {
+  pointer-events: none;
+  content: " ";
+  position: absolute;
+  top: 10px;
+  right: 0.4rem;
+  display: inline-block;
+  width: 0.9rem;
+  height: 0.9rem;
+  text-align: center;
+  visibility: visible;
+  opacity: 1;
+  background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+@supports not selector(:user-valid) {
+  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid)::after {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+@supports selector(:user-valid) {
+  .informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid)::after {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+.informations-produit .selecteur-produit__selection-variation select {
+  position: relative;
+  min-width: 4rem;
+  padding: 0.5rem 2rem;
+  text-align: center;
+  appearance: none;
+  background: rgba(236, 234, 235, 0.9);
+  border: 1px solid var(--couleur-noir);
+}
+@supports selector(:user-valid) {
+  .informations-produit .selecteur-produit__selection-variation select:user-valid {
+    background: rgba(235, 255, 184, 0.9);
+  }
+}
+.informations-produit .selecteur-produit__selection-variation option {
+  background: rgba(236, 234, 235, 0.9);
+}
+.informations-produit .selecteur-produit__prix {
+  font-style: initial;
+}
+.informations-produit .actions-produit {
+  overflow: hidden;
+  background: var(--couleur-jaune);
+}
+.informations-produit .actions-produit.desactive {
+  background: rgba(236, 234, 235, 0.9);
+}
+.informations-produit .actions-produit button {
+  font-variation-settings: "wght" 400;
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: 0.2s font-variation-settings;
+}
+@media (hover: hover) {
+  .informations-produit .actions-produit button :not([disabled]):hover {
+    font-variation-settings: "wght" 500;
+  }
+}
+
+@media (hover: hover) {
+  .selecteur-personnalise {
+    display: block !important;
+  }
+  .selecteur-natif:focus + .selecteur-personnalise {
+    display: none !important;
+  }
+}
+.produits-similaires {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr max-content;
+  place-items: center;
+  margin-top: 1rem;
+  /* En-tête de la section */
+}
+.produits-similaires header {
+  grid-column: span 3;
+  width: 100%;
+  padding: 1.25rem 0 var(--espace-m);
+  text-align: center;
+  border: 1px solid var(--couleur-noir);
+}
+.produits-similaires header h2 {
+  font-style: italic;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.produits-similaires .grille-produits-similaires {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column: span 3;
+  grid-row: 2;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+}
+.produits-similaires .grille-produits-similaires article {
+  box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+}
+.produits-similaires .grille-produits-similaires article figure {
+  display: flex;
+  flex-flow: column nowrap;
+  row-gap: 2rem;
+  padding: 1rem;
+}
+.produits-similaires .grille-produits-similaires article figure a {
+  position: relative;
+}
+@media (hover: hover) {
+  .produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.3s opacity, 0.3s visibility;
+  }
+}
+.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale {
+  display: block;
+}
+.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.15s opacity, 0.15s visibility;
+}
+.produits-similaires .grille-produits-similaires article figure img {
+  aspect-ratio: 9/16;
+  width: 100%;
+  max-height: 70vh;
+  object-fit: cover;
+}
+.produits-similaires .grille-produits-similaires article figure figcaption {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+.produits-similaires .grille-produits-similaires article figure figcaption h3 {
+  font-style: italic;
+  letter-spacing: 1px;
+}
+.produits-similaires .grille-produits-similaires article figure figcaption p {
+  font-weight: 500;
+  letter-spacing: -0.5px;
+}
+
+/**
+ * Le pied de page du site.
+ */
 #pied-de-page {
+  /* Marges */
+  --pied-de-page-marges-internes-bloc: var(--espace-m);
+  --pied-de-page-marges-internes-ligne: var(--espace-l);
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-items: center;
-  align-self: end;
-  min-width: 100vw;
-  padding: 1rem 2rem;
+  max-width: 100vw;
+  padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);
   line-height: 1.5;
   background: var(--couleur-jaune);
-  border: 1px solid var(--couleur-noir);
+  border-top: 1px solid var(--couleur-noir);
 }
 #pied-de-page .zone-menu-navigation-secondaire {
   justify-self: start;
@@ -438,10 +850,5 @@ ul.avec-puce-cercle a {
   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/_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"}
+{"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/_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/_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;;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;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;;;ACjBF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACtDF;EACE;EACA;EACA;;;ACHF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACfJ;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACbF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAMA;AAAA;AAAA;;AALA;EAEE;;AAMF;AACE;EACA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAMA;AAKA;;AAVA;EAEE;;AAIF;EACE;;AAIF;EACE;IACE;;;AAMJ;EACE;IACE;;;;AClER;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;EACA;EACA;EACA;EACA;AAWA;;AATA;EACE;;AAEA;AAAA;EAEE;;AAKJ;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;;AAGF;EACE;;;ACvGR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;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;EAEE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;AC/ER;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACE;EACA;AAEA;EACA;EACA;AAAA;AAAA;AAIA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAMF;EACE;;;AC5CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EACE;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;;;AC9EV;EACE;EACA;EACA;EACA;EACA;AAoFA;AAyGA;;AA3LA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAQV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;AAEA;AAMA;AAwCA;AAqBA;;AAlEA;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;;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAeJ;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;IACE;;;;AAQZ;EACE;IACE;;EAGF;IACE;;;ACnOJ;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;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;;;AC1FZ;AAAA;AAAA;AAGA;AACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"main.css"}