2025-11-04

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

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Le modèle de la Page 404.
  */
@@ -9,19 +10,23 @@ use Timber\Timber;
 
 // Contexte et modèles
 $contexte = Timber::context();
-$modeles = ["404.twig"];
+$modeles = ['404.twig'];
 
 // Charge les scripts et styles de la page
 function charge_scripts_styles_page_404(): void {
-  wp_enqueue_style(
-    handle: "haiku-atelier-2024-styles-page-a-propos",
-    src: get_template_directory_uri() . "/assets/css/pages/page-modele-simple.css",
-    deps: [],
-    ver: filemtime(get_template_directory() . "/assets/css/pages/page-modele-simple.css"),
-    media: "all",
-  );
+    wp_enqueue_style(
+        handle: 'haiku-atelier-2024-styles-page-a-propos',
+        src: get_template_directory_uri() . '/assets/css/pages/page-modele-simple.css',
+        deps: [],
+        ver: filemtime(get_template_directory() . '/assets/css/pages/page-modele-simple.css'),
+        media: 'all',
+    );
 }
-add_action("wp_enqueue_scripts", "charge_scripts_styles_page_404");
+
+add_action('wp_enqueue_scripts', 'charge_scripts_styles_page_404');
 
 // Rendu
-Timber::render(filenames: $modeles, data: $contexte);
+Timber::render(
+    filenames: $modeles,
+    data: $contexte,
+);

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

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Le modèle de la Page Boutique (« E-Shop »).
  */
@@ -7,48 +8,56 @@ declare(strict_types=1);
 
 use Timber\Timber;
 
-require_once __DIR__ . "/src/inc/TraitementInformations.php";
+require_once __DIR__ . '/src/inc/TraitementInformations.php';
 
 // Contexte et modèles
 $contexte = Timber::context();
-$modeles = ["boutique.twig"];
+$modeles = ['boutique.twig'];
 
 /** @var array<WC_Product> $informations_produits Les informations brutes des Produits. */
 $informations_produits = wc_get_products([
-  "limit" => 12,
-  "order" => "DESC",
-  "orderby" => "date",
-  "status" => "publish",
+    'limit' => 12,
+    'order' => 'DESC',
+    'orderby' => 'date',
+    'status' => 'publish',
 ]);
+
 /** @var InformationsProduitShop $produits Les informations strictement nécessaires pour la grille des Produits. */
-$produits = array_map(callback: "recupere_informations_produit_shop", array: $informations_produits);
-$contexte["produits"] = $produits;
+$produits = array_map(
+    callback: 'recupere_informations_produit_shop',
+    array: $informations_produits,
+);
+$contexte['produits'] = $produits;
 
 /**
  * Charge les Scripts nécessaires pour la page Boutique.
  */
 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.css",
-    deps: [],
-    ver: filemtime(get_template_directory() . "/assets/css/pages/page-boutique.css"),
-    media: "all",
-  );
-  wp_enqueue_script_module(
-    id: "haiku-atelier-2024-scripts-page-boutique",
-    src: get_template_directory_uri() . "/assets/js/scripts-page-boutique.js",
-    deps: [],
-    version: filemtime(get_template_directory() . "/assets/js/scripts-page-boutique.js"),
-  );
-  wp_enqueue_script_module(
-    id: "haiku-atelier-2024-scripts-menu-categories",
-    src: get_template_directory_uri() . "/assets/js/scripts-menu-categories.js",
-    deps: [],
-    version: filemtime(get_template_directory() . "/assets/js/scripts-menu-categories.js"),
-  );
+    wp_enqueue_style(
+        handle: 'haiku-atelier-2024-styles-page-boutique',
+        src: get_template_directory_uri() . '/assets/css/pages/page-boutique.css',
+        deps: [],
+        ver: filemtime(get_template_directory() . '/assets/css/pages/page-boutique.css'),
+        media: 'all',
+    );
+    wp_enqueue_script_module(
+        id: 'haiku-atelier-2024-scripts-page-boutique',
+        src: get_template_directory_uri() . '/assets/js/scripts-page-boutique.js',
+        deps: [],
+        version: filemtime(get_template_directory() . '/assets/js/scripts-page-boutique.js'),
+    );
+    wp_enqueue_script_module(
+        id: 'haiku-atelier-2024-scripts-menu-categories',
+        src: get_template_directory_uri() . '/assets/js/scripts-menu-categories.js',
+        deps: [],
+        version: filemtime(get_template_directory() . '/assets/js/scripts-menu-categories.js'),
+    );
 }
-add_action("wp_enqueue_scripts", "charge_scripts_page_boutique");
+
+add_action('wp_enqueue_scripts', 'charge_scripts_page_boutique');
 
 // Rendu
-Timber::render(filenames: $modeles, data: $contexte);
+Timber::render(
+    filenames: $modeles,
+    data: $contexte,
+);

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);