feat: style and filter cat with image

css/style.css

@@ -0,0 +1,67 @@
+/* css/style.css */
+
+/* 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;
+}
+
+/* Nombre de colonnes dynamiques */
+.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
+.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
+.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
+.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
+.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
+.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
+
+/* 2) Chaque carte = conteneur relatif */
+.elementor-category-grid .category-card {
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
+  border-radius: 8px;
+}
+
+/* 3) Image pleine carte */
+.elementor-category-grid .category-card img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform .4s ease;
+}
+
+/* 4) Effet hover : léger zoom */
+.elementor-category-grid .category-card:hover img {
+  transform: scale(1.05);
+}
+
+/* 5) Titre centré en overlay */
+.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;
+  /* background: rgba(0, 0, 0, 0.4); */
+  border-radius: 4px;
+  transition: background .3s ease;
+}
+
+/* 6) Hover sur titre : fond un peu plus opaque */
+/* .elementor-category-grid .category-card:hover .category-card-name {
+  background: rgba(0, 0, 0, 0.6);
+} */