feat: add more customizations

css/style.css

@@ -1,11 +1,20 @@
 /* css/style.css */
+.elementor-category-grid .category-card {
+  position: relative;
+  overflow: hidden;
+}
+
+/* pseudo-élément overlay */
+.elementor-category-grid .category-card::before {
+  content: "";
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background-color: transparent;
+  transition: opacity .3s ease;
+  pointer-events: none; /* laisse passer le clic */
+}
 
 /* 1) Mise en place de la grille */
-/* .elementor-category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-} */
 .elementor-category-grid {
   display: grid;
   gap: 1rem;
@@ -25,7 +34,7 @@
   overflow: hidden;
   height: 0;
   padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
-  border-radius: 8px;
+  /* border-radius: 8px; */
 }
 
 /* 3) Image pleine carte */

widgets/category-grid-widget.php

@@ -3,6 +3,10 @@ if (!defined('ABSPATH')) {
     exit; // Empêche l'accès direct.
 }
 
+use Elementor\Controls_Manager;
+use Elementor\Group_Control_Typography;
+use Elementor\Group_Control_Box_Shadow;
+
 /**
  * Classe Elementor_Category_Grid_Widget.
  *
@@ -61,6 +65,205 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
     {
         return ['category', 'catégorie', 'grid', 'grille'];
     }
+    protected function register_style_controls()
+    {
+        // 1) Styles de la grille (espacement)
+        $this->start_controls_section(
+            'section_style_grid',
+            [
+                'label' => esc_html__('Grille', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+        $this->add_responsive_control(
+            'grid_gap',
+            [
+                'label' => esc_html__('Espacement (gap)', 'category-grid-widget'),
+                'type' => Controls_Manager::SLIDER,
+                'size_units' => ['px', 'em', '%'],
+                'range' => [
+                    'px' => ['min' => 0, 'max' => 100],
+                    'em' => ['min' => 0, 'max' => 10],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .elementor-category-grid' => 'gap: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+        $this->end_controls_section();
+
+        // 2) Styles des cartes (fond, bordure, ombre)
+        $this->start_controls_section(
+            'section_style_card',
+            [
+                'label' => esc_html__('Carte', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+        $this->add_control(
+            'card_bg_color',
+            [
+                'label' => esc_html__('Fond de la carte', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card' => 'background-color: {{VALUE}};',
+                ],
+            ]
+        );
+        $this->add_group_control(
+            Group_Control_Typography::get_type(),
+            [
+                'name' => 'card_title_typography',
+                'label' => esc_html__('Typographie du titre', 'category-grid-widget'),
+                'selector' => '{{WRAPPER}} .category-card-name',
+            ]
+        );
+        $this->add_control(
+            'card_border_radius',
+            [
+                'label' => esc_html__('Border radius', 'category-grid-widget'),
+                'type' => Controls_Manager::DIMENSIONS,
+                'size_units' => ['px', '%'],
+                'selectors' => [
+                    '{{WRAPPER}} .category-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
+                ],
+            ]
+        );
+        $this->add_group_control(
+            \Elementor\Group_Control_Box_Shadow::get_type(),
+            [
+                'name' => 'card_box_shadow',
+                'label' => esc_html__('Ombre de la carte', 'category-grid-widget'),
+                'selector' => '{{WRAPPER}} .category-card',
+            ]
+        );
+        $this->end_controls_section();
+
+        // 3) Styles du titre (couleur, arrière-plan du badge)
+        $this->start_controls_section(
+            'section_style_title',
+            [
+                'label' => esc_html__('Titre', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+
+        // 3.1) Switcher pour désactiver le fond
+        $this->add_control(
+            'disable_title_bg',
+            [
+                'label' => esc_html__('Désactiver le fond du titre', 'category-grid-widget'),
+                'type' => Controls_Manager::SWITCHER,
+                'label_on' => esc_html__('Oui', 'category-grid-widget'),
+                'label_off' => esc_html__('Non', 'category-grid-widget'),
+                'return_value' => 'yes',
+                'default' => 'no',
+                'selectors' => [
+                    // Quand activé => on rend le fond totalement transparent
+                    '{{WRAPPER}} .category-card-name' => 'background-color: transparent !important;',
+                ],
+            ]
+        );
+
+        // 3.2) Couleur du texte
+        $this->add_control(
+            'title_text_color',
+            [
+                'label' => esc_html__('Couleur du texte', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffffff',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card-name' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        // 3.3) Couleur de fond du titre, **uniquement si** le fond n'est pas désactivé
+        $this->add_control(
+            'title_bg_color',
+            [
+                'label' => esc_html__('Fond du titre', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => 'rgba(0,0,0,0.4)',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card-name' => 'background-color: {{VALUE}};',
+                ],
+                'condition' => [
+                    // n'affiche ce picker que si disable_title_bg != 'yes'
+                    'disable_title_bg!' => 'yes',
+                ],
+            ]
+        );
+
+        // 3.4) Typographie du titre
+        $this->add_group_control(
+            Group_Control_Typography::get_type(),
+            [
+                'name' => 'card_title_typography',
+                'label' => esc_html__('Typographie du titre', 'category-grid-widget'),
+                'selector' => '{{WRAPPER}} .category-card-name',
+            ]
+        );
+
+        $this->end_controls_section();
+
+        // 4) Section Hover
+        $this->start_controls_section(
+            'section_style_hover',
+            [
+                'label' => esc_html__('Hover', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+
+        // 4.1) Couleur de l'overlay
+        $this->add_control(
+            'hover_overlay_color',
+            [
+                'label' => esc_html__('Couleur de l’overlay', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => 'rgba(0,0,0,0.3)',
+                'selectors' => [
+                    // sur l’élément ::before (défini en CSS ci-dessous)
+                    '{{WRAPPER}} .category-card::before' => 'background-color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        // 4.2) Opacité de l'overlay
+        $this->add_control(
+            'hover_overlay_opacity',
+            [
+                'label' => esc_html__('Opacité de l’overlay', 'category-grid-widget'),
+                'type' => Controls_Manager::SLIDER,
+                'size_units' => ['%'],
+                'range' => [
+                    '%' => ['min' => 0, 'max' => 100],
+                ],
+                'default' => ['size' => 30],
+                'selectors' => [
+                    '{{WRAPPER}} .category-card::before' => 'opacity: 0;',
+                    '{{WRAPPER}} .category-card:hover::before' => 'opacity: {{SIZE}}%;',
+                ],
+            ]
+        );
+
+        // 4.3) Couleur du titre au hover
+        $this->add_control(
+            'title_hover_color',
+            [
+                'label' => esc_html__('Couleur du titre au hover', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffffff',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card:hover .category-card-name' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        $this->end_controls_section();
+    }
 
     /**
      * Enregistrer les contrôles du widget (champs configurables dans Elementor).
@@ -198,6 +401,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         );
 
         $this->end_controls_section();
+
+        $this->register_style_controls();
     }
 
     /**