fix: corrige divers soucis

web/app/themes/haiku-atelier-2024/archive-product.php

@@ -30,9 +30,9 @@ $contexte["produits"] = $produits;
 function charge_scripts_page_boutique(): void {
   wp_enqueue_style(
     handle: "haiku-atelier-2024-styles-page-boutique",
-    src: get_template_directory_uri() . "/assets/css/pages/page-boutique.min.css",
+    src: get_template_directory_uri() . "/assets/css/pages/page-boutique.css",
     deps: [],
-    ver: filemtime(get_template_directory() . "/assets/css/pages/page-boutique.min.css"),
+    ver: filemtime(get_template_directory() . "/assets/css/pages/page-boutique.css"),
     media: "all",
   );
   wp_enqueue_script_module(

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

@@ -739,11 +739,32 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   opacity: 0;
   transition: 0.15s opacity, 0.15s visibility;
 }
+.grille-produits article figure picture {
+  position: relative;
+}
+.grille-produits article figure picture::before {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  filter: opacity(0%);
+  animation: 1s test infinite alternate both linear;
+}
 .grille-produits article figure img {
+  position: inherit;
+  z-index: 3;
   aspect-ratio: 9/16;
   width: 100%;
   max-height: 70vh;
   object-fit: cover;
+  background: transparent;
 }
 .grille-produits article figure figcaption {
   display: flex;
@@ -778,6 +799,11 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   }
 }
 
+@keyframes test {
+  to {
+    filter: opacity(30%);
+  }
+}
 /*
  * Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le
  * Panier.

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

@@ -15,7 +15,26 @@
   width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
   margin: auto;
 }
+#page-a-propos .storytelling picture {
+  position: relative;
+}
+#page-a-propos .storytelling picture::before {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
+  background-repeat: space;
+  background-position: center;
+  background-size: contain;
+  filter: opacity(0%);
+  animation: 1s test infinite alternate both linear;
+}
 #page-a-propos .storytelling img {
+  position: inherit;
   width: max-content;
   height: auto;
   object-fit: contain;
@@ -162,4 +181,10 @@
   }
 }
 
+@keyframes test {
+  to {
+    filter: opacity(30%);
+  }
+}
+
 /*# sourceMappingURL=page-a-propos.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAKN;EAEI;IACE;;EAGF;IACE;;;AAKN;EAnOF;IAoOI;;;;AAIJ;EACE;IACE","file":"page-a-propos.css"}

web/app/themes/haiku-atelier-2024/functions.php

@@ -50,9 +50,9 @@ add_action("wp_enqueue_scripts", "charge_scripts_haiku_atelier_2024");
 function charge_styles_haiku_atelier_2024(): void {
   wp_enqueue_style(
     handle: "haiku-atelier-2024-styles",
-    src: get_template_directory_uri() . "/assets/css/main.min.css",
+    src: get_template_directory_uri() . "/assets/css/main.css",
     deps: [],
-    ver: filemtime(get_template_directory() . "/assets/css/main.min.css"),
+    ver: filemtime(get_template_directory() . "/assets/css/main.css"),
     media: "all",
   );
 }

web/app/themes/haiku-atelier-2024/page-about.php

@@ -11,16 +11,16 @@ use Timber\Timber;
 $contexte = Timber::context();
 $modeles = ["a-propos.twig"];
 
-$dimensions_image = getimagesize(filename: get_template_directory_uri() . "/assets/img/about/haikuabout-petit.png");
+$dimensions_image = getimagesize(filename: get_template_directory_uri() . "/assets/img/about/haikuabout.png");
 $contexte["dimensions_image"] = $dimensions_image;
 
 // Charge les scripts et styles de la page
 function charge_scripts_styles_page_a_propos(): void {
   wp_enqueue_style(
     handle: "haiku-atelier-2024-styles-page-a-propos",
-    src: get_template_directory_uri() . "/assets/css/pages/page-a-propos.min.css",
+    src: get_template_directory_uri() . "/assets/css/pages/page-a-propos.css",
     deps: [],
-    ver: filemtime(get_template_directory() . "/assets/css/pages/page-a-propos.min.css"),
+    ver: filemtime(get_template_directory() . "/assets/css/pages/page-a-propos.css"),
     media: "all",
   );
   wp_enqueue_script_module(

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

@@ -67,11 +67,34 @@
         transition: 0.15s opacity, 0.15s visibility;
       }
 
+      picture {
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          z-index: 2;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+          filter: opacity(0%);
+          animation: 1s test infinite alternate both linear;
+        }
+      }
+
       img {
+        position: inherit;
+        z-index: 3;
         aspect-ratio: 9 / 16;
         width: 100%;
         max-height: 70vh;
         object-fit: cover;
+        background: transparent;
       }
 
       figcaption {
@@ -115,3 +138,9 @@
     }
   }
 }
+
+@keyframes test {
+  to {
+    filter: opacity(30%);
+  }
+}

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

@@ -22,8 +22,28 @@
       margin: auto;
     }
 
+    picture {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
+        background-repeat: space;
+        background-position: center;
+        background-size: contain;
+        filter: opacity(0%);
+        animation: 1s test infinite alternate both linear;
+      }
+    }
+
     // Image du storytelling
     img {
+      position: inherit;
       width: max-content;
       height: auto;
       object-fit: contain;
@@ -210,3 +230,9 @@
     --images-marges-ligne: var(--espace-m);
   }
 }
+
+@keyframes test {
+  to {
+    filter: opacity(30%);
+  }
+}

web/app/themes/haiku-atelier-2024/views/a-propos.twig

@@ -7,7 +7,7 @@
     <div class="storytelling">
       <div class="storytelling__conteneur">
         {{
-          images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout-petit", "", dimensions_image[0], dimensions_image[1], "")
+          images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout", "", dimensions_image[0], dimensions_image[1], "")
         }}
 
         <div