/* grille 6 colonnes, responsive et propre */
.tp-cats-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:32px 24px;
  align-items:start;
}
@media (max-width: 1399px){ .tp-cats-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (max-width: 1199px){ .tp-cats-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width: 991px) { .tp-cats-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px) { .tp-cats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .tp-cats-grid{ grid-template-columns:1fr; } }

/* carte catégorie */
.tp-cat{
  display:block; text-align:center; text-decoration:none;
  color:#111; transition:transform .15s ease;
}
.tp-cat:hover{ transform:translateY(-2px); }

/* vignette ronde */
.tp-cat__thumb{
  width:128px; height:128px; margin:0 auto 10px; border-radius:999px;
  background:#fafafa; position:relative; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px #eee;
}
.tp-cat__thumb img{ width:70%; height:70%; object-fit:contain; display:block; }
.tp-cat__thumb i{ font-size:42px; color:#9aa1a7; }

/* badge compteur */
.tp-cat__count{
  position:absolute; top:-6px; right:-6px;
  min-width:28px; height:28px; padding:0 7px; border-radius:999px;
  background:#ff5c00; color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(255,92,0,.25);
}

/* nom */
.tp-cat__name{
  display:block; margin-top:8px; font-size:15px;
  color:#333; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* on neutralise les traits verticaux hérités de .category-border si présents */
.category-border .tpcategory,
.category-border .tp-cat{ border-right:none !important; }

/* cible juste ce slider (adapte le parent si besoin) */
.tp-slider-area .swiper-slide{
  width: 100% !important;          /* prend toute la largeur du conteneur */
  height: auto !important;          /* laisse le navigateur calculer la hauteur */
  aspect-ratio: 828 / 526;          /* même proportion que 828×526 */
  overflow: hidden;
}

/* l’image remplit sans se déformer */
.tp-slider-area .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* taille mini/maxi pour le confort (optionnel) */
.tp-slider-area .swiper-slide{
  min-height: 240px;
  max-height: 560px;
}

/* test permissions  */