feat: Added an option to have titles displayed under cards

css/style.css

@@ -7,16 +7,30 @@
 }
 
 /* —————————————————————————————————————————— */
-/* 0) Cartes, overlay et images                 */
+/* 1) Structure de la carte                    */
 /* —————————————————————————————————————————— */
 .elementor-category-grid .category-card {
   position: relative;
   overflow: hidden;
-  /* ratio fixe 5:2 */
-  height: 0;
+  /* ratio fixe 5:2 pour l’image uniquement */
+}
+.elementor-category-grid .category-card.title-below {
+  /* autorise la hauteur auto quand titre en dessous */
+  height: auto !important;
+  padding-bottom: 0 !important;
+}
+.elementor-category-grid .category-card-image {
+  /* reprend l’ancien padding-bottom */
+  position: relative;
+  width: 100%;
+  padding-bottom: 40%; /* ratio 5:2 */
+}
+.elementor-category-grid .category-card.title-below .category-card-image {
+  /* si titre en dessous, on garde juste l’image */
   padding-bottom: 40%;
 }
 
+/* Overlay via pseudo */
 .elementor-category-grid .category-card::before {
   content: "";
   position: absolute;
@@ -26,20 +40,22 @@
   pointer-events: none;
 }
 
+/* Image plein cadre */
 .elementor-category-grid .category-card img {
   position: absolute;
   inset: 0;
-  width: 100%;
-  height: 100%;
+  width: 100%; height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
 }
-
 .elementor-category-grid .category-card:hover img {
   transform: scale(1.05);
 }
 
-.elementor-category-grid .category-card-name {
+/* —————————————————————————————————————————— */
+/* 2) Titre overlay                            */
+/* —————————————————————————————————————————— */
+.elementor-category-grid .category-card-name.overlay {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
@@ -54,42 +70,66 @@
 }
 
 /* —————————————————————————————————————————— */
-/* 1) Grille responsive par défaut (desktop)     */
+/* 3) Titre below                              */
+/* —————————————————————————————————————————— */
+.elementor-category-grid .category-card-name-below {
+  padding: .5em;
+  text-align: center;
+  font-size: 1.2rem;
+}
+.elementor-category-grid .category-card-name-below a {
+  color: inherit;
+  text-decoration: none;
+  transition: text-decoration .3s ease;
+}
+.elementor-category-grid .category-card-name-below a:hover {
+  text-decoration: underline;
+}
+
+/* —————————————————————————————————————————— */
+/* 4) Grille responsive par défaut (desktop)     */
 /* —————————————————————————————————————————— */
 .elementor-category-grid {
   display: grid;
   gap: 1rem;
-  /* 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               */
+/* 5) Mobile (≤ 480px) → 1 colonne               */
 /* —————————————————————————————————————————— */
 @media screen and (max-width: 480px) {
   .elementor-category-grid {
-    grid-template-columns: repeat(1, 1fr) !important;
+    grid-template-columns: 1fr !important;
   }
-  .elementor-category-grid .category-card-name {
+  .elementor-category-grid .category-card-name.overlay {
     font-size: 1rem;
     padding: .4em .8em;
   }
+  .elementor-category-grid .category-card-name-below {
+    font-size: 1rem;
+    padding: .4em;
+  }
 }
 
 /* —————————————————————————————————————————— */
-/* 3) Tablette (481px–768px) → 2 colonnes fixes  */
+/* 6) 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;
   }
-  .elementor-category-grid .category-card-name {
+  .elementor-category-grid .category-card-name.overlay {
     font-size: 1.2rem;
   }
+  .elementor-category-grid .category-card-name-below {
+    font-size: 1.2rem;
+    padding: .5em;
+  }
 }
 
 /* —————————————————————————————————————————— */
-/* 4) Desktop (≥ 769px) → respect des classes     */
+/* 7) Desktop (≥ 769px) → respect des classes     */
 /* —————————————————————————————————————————— */
 @media screen and (min-width: 769px) {
   .elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
@@ -98,4 +138,4 @@
   .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); }
-}
+}