/* css/style.css */

/* —————————————————————————————————————————— */
/*  ZONES GLOBALES (overlay, cartes, images…)   */
/* —————————————————————————————————————————— */

/* 0) Cartes en conteneur relatif */
.elementor-category-grid .category-card {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 40%; /* ratio 5:2 */
}

/* overlay via pseudo-élément */
.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;
}

/* images pleines cartes */
.elementor-category-grid .category-card img {
  position: absolute;
  top: 0; left: 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;
  white-space: pre-wrap;
  word-break: break-word;
  transition: font-size .3s ease, padding .3s ease;
}

/* —————————————————————————————————————————— */
/*           DISPOSITION DE LA GRILLE           */
/* —————————————————————————————————————————— */

/* 1) Par défaut : auto-fit (desktop) */
.elementor-category-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 2) Mobile (≤ 480px) → 1 colonne forcée */
@media screen and (max-width: 480px) {
  .elementor-category-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .elementor-category-grid .category-card-name {
    font-size: 1rem;
    padding: .4em .8em;
  }
}

/* 3) Tablette (481px–768px) → 2 colonnes */
@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 {
    font-size: 1.2rem;
  }
}

/* 4) Desktop (≥ 769px) → respect des classes columns-X */
@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); }
}