From 54be7b7455a8a1d3c7025964445413be55523967 Mon Sep 17 00:00:00 2001
From: MrRaph_ <contact@mrraph.fr>
Date: Fri, 23 May 2025 16:18:09 +0000
Subject: [PATCH] feat: responsive style

---
 css/style.css                    | 46 ++++++++++++++++++--------------
 widgets/category-grid-widget.php | 12 +--------
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/css/style.css b/css/style.css
index e8ffd20..76cd25f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,69 +1,71 @@
 /* css/style.css */
+/* -------------------------------------------------- */
+/* Corrige le comportement “flex” sur mobile/tablette */
+/* -------------------------------------------------- */
+.e-con-inner {
+  display: block !important;
+}
 
 /* —————————————————————————————————————————— */
-/*  ZONES GLOBALES (overlay, cartes, images…)   */
+/* 0) Cartes, overlay et images                 */
 /* —————————————————————————————————————————— */
-
-/* 0) Cartes en conteneur relatif */
 .elementor-category-grid .category-card {
   position: relative;
   overflow: hidden;
+  /* ratio fixe 5:2 */
   height: 0;
-  padding-bottom: 40%; /* ratio 5:2 */
+  padding-bottom: 40%;
 }
 
-/* overlay via pseudo-élément */
 .elementor-category-grid .category-card::before {
   content: "";
   position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
+  inset: 0;
   background-color: transparent;
   transition: opacity .3s ease;
   pointer-events: none;
 }
 
-/* images pleines cartes */
 .elementor-category-grid .category-card img {
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
 }
 
-/* zoom au hover */
 .elementor-category-grid .category-card:hover img {
   transform: scale(1.05);
 }
 
-/* titre centré */
 .elementor-category-grid .category-card-name {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
-  margin: 0;
   padding: .5em 1em;
   font-size: 1.5rem;
   line-height: 1.2;
   text-align: center;
-  color: #ffffff;
+  color: #fff;
   white-space: pre-wrap;
   word-break: break-word;
   transition: font-size .3s ease, padding .3s ease;
 }
 
 /* —————————————————————————————————————————— */
-/*           DISPOSITION DE LA GRILLE           */
+/* 1) Grille responsive par défaut (desktop)     */
 /* —————————————————————————————————————————— */
-
-/* 1) Par défaut : auto-fit (desktop) */
 .elementor-category-grid {
   display: grid;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  /* auto-fit avec min 150px : plusieurs tuiles même sur petits écrans */
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }
 
-/* 2) Mobile (≤ 480px) → 1 colonne forcée */
+/* —————————————————————————————————————————— */
+/* 2) Mobile (≤ 480px) → 1 colonne               */
+/* —————————————————————————————————————————— */
 @media screen and (max-width: 480px) {
   .elementor-category-grid {
     grid-template-columns: repeat(1, 1fr) !important;
@@ -74,7 +76,9 @@
   }
 }
 
-/* 3) Tablette (481px–768px) → 2 colonnes */
+/* —————————————————————————————————————————— */
+/* 3) Tablette (481px–768px) → 2 colonnes fixes  */
+/* —————————————————————————————————————————— */
 @media screen and (min-width: 481px) and (max-width: 768px) {
   .elementor-category-grid {
     grid-template-columns: repeat(2, 1fr) !important;
@@ -84,7 +88,9 @@
   }
 }
 
-/* 4) Desktop (≥ 769px) → respect des classes columns-X */
+/* —————————————————————————————————————————— */
+/* 4) Desktop (≥ 769px) → respect des classes     */
+/* —————————————————————————————————————————— */
 @media screen and (min-width: 769px) {
   .elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
   .elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
diff --git a/widgets/category-grid-widget.php b/widgets/category-grid-widget.php
index f46f056..3a56b26 100644
--- a/widgets/category-grid-widget.php
+++ b/widgets/category-grid-widget.php
@@ -453,17 +453,7 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
 
         // Déterminer les catégories à afficher (inclure les sous-catégories si demandé).
         $category_ids_to_show = $selected_ids;
-        // if (!empty($settings['show_subcategories']) && $settings['show_subcategories'] === 'yes') {
-        //     // Ajouter les sous-catégories de chaque catégorie sélectionnée.
-        //     foreach ($selected_ids as $cat_id) {
-        //         $child_ids = get_term_children($cat_id, 'category');
-        //         if (is_array($child_ids) && !empty($child_ids)) {
-        //             $category_ids_to_show = array_merge($category_ids_to_show, $child_ids);
-        //         }
-        //     }
-        //     // Éliminer les doublons d'ID au cas où.
-        //     $category_ids_to_show = array_unique($category_ids_to_show);
-        // }
+        
         // 1) Cas : on veut les sous-catégories de la page actuelle
         if ('yes' === $settings['subcats_of_current']) {
             $queried = get_queried_object();