/* css/style.css */
/* -------------------------------------------------- */
/* Corrige le comportement “flex” sur mobile/tablette */
/* -------------------------------------------------- */
.e-con-inner {
  display: block !important;
}

/* —————————————————————————————————————————— */
/* 1) Structure de la carte                    */
/* —————————————————————————————————————————— */
.elementor-category-grid .category-card {
  position: relative;
  overflow: hidden;
  /* 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;
  inset: 0;
  background-color: transparent;
  transition: opacity .3s ease;
  pointer-events: none;
}

/* Image plein cadre */
.elementor-category-grid .category-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.elementor-category-grid .category-card:hover img {
  transform: scale(1.05);
}

/* —————————————————————————————————————————— */
/* 2) Titre overlay                            */
/* —————————————————————————————————————————— */
.elementor-category-grid .category-card-name.overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: .5em 1em;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  transition: font-size .3s ease, padding .3s ease;
}

/* —————————————————————————————————————————— */
/* 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;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* —————————————————————————————————————————— */
/* 5) Mobile (≤ 480px) → 1 colonne               */
/* —————————————————————————————————————————— */
@media screen and (max-width: 480px) {
  .elementor-category-grid {
    grid-template-columns: 1fr !important;
  }
  .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;
  }
}

/* —————————————————————————————————————————— */
/* 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.overlay {
    font-size: 1.2rem;
  }
  .elementor-category-grid .category-card-name-below {
    font-size: 1.2rem;
    padding: .5em;
  }
}

/* —————————————————————————————————————————— */
/* 7) 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); }
  .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); }
}