/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 28 2025 | 17:08:31 */
/* Variables */
:root{
  --beige-bg:#f4ecdf;
  --beige:#e9ddca;
  --beige-strong:#d2bea0;
  --ink:#1d1d1d;
}

/* Wrapper du carrousel */
.cats-carousel{
  width: min(1100px, 92vw);
  margin: 36px auto;
  padding: 4px 8px 38px;
}

/* Slide */
.cat-slide{
  background: var(--beige-bg);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cat-slide:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* Arches (inchangé) */
.arch-figure{
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 1000px 1000px 0 0 / 135% 135% 0 0;
}
.arch-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(.98) contrast(.95) brightness(.98);
  transition: transform .35s ease;
}
.cat-slide:hover .arch-figure img{ transform: scale(1.04); }

/* Corps */
.cat-body{
  text-align:center;
  padding: 14px 16px 18px;
}

/* Bouton */
.btn-outline{
  display:inline-block;
  padding:10px 16px;
  border:2px solid var(--beige-strong);
  background:#f6efe4;
  color:var(--ink);
  border-radius:999px;
  font-weight:600;
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}

/* Swiper corrections */
.swiper{ overflow: visible; }
.swiper-slide{ height:auto; }

/* FIX mobile : 1 slide → mais sans casser l’arche */
@media (max-width: 767px){
  #catsCarousel .swiper-slide{
    width: auto !important;
    max-width: 100% !important;
  }
}

/* On impose les couleurs Swiper dans le bloc */
.cats-carousel {
  --swiper-theme-color: #2b2b2b;        /* couleur des flèches & bullets */
  --swiper-navigation-color: #2b2b2b;
  --swiper-navigation-size: 18px;
}

/* Flèches dans ta charte (pastille beige, ombre douce) */
.cats-carousel .swiper-button-prev,
.cats-carousel .swiper-button-next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--beige);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.cats-carousel .swiper-button-prev::after,
.cats-carousel .swiper-button-next::after {
  font-size: 18px;
  color: #2b2b2b;  /* icône foncée */
}

/* Sur desktop : wrapper flex centré, 2 cartes */
@media (min-width: 768px) {
  #catsCarousel .swiper-wrapper {
    display: flex;
    justify-content: center;
    gap: 28px;
    transform: none !important; /* au cas où Swiper laisse un transform */
  }

  #catsCarousel .swiper-slide {
    flex: 0 0 auto;
    width: 360px; /* ajuste si tu veux un peu plus ou moins large */
  }
}

/* Quand Swiper n’est pas actif (desktop), on cache nav + bullets */
#catsCarousel:not(.is-mobile-slider) .swiper-button-prev,
#catsCarousel:not(.is-mobile-slider) .swiper-button-next,
#catsCarousel:not(.is-mobile-slider) .swiper-pagination {
  display: none !important;
}

/* --- MOBILE : on vire totalement le slider et on empile les cartes --- */
@media (max-width: 767px) {

  /* On désactive Swiper */
  #catsCarousel .swiper-wrapper {
    display: block !important;
    transform: none !important;
  }

  #catsCarousel .swiper-slide {
    width: 100% !important;
    margin-bottom: 26px;
  }

  /* On masque flèches + pagination */
  #catsCarousel .swiper-button-prev,
  #catsCarousel .swiper-button-next,
  #catsCarousel .swiper-pagination {
    display: none !important;
  }
}

/* --- DESKTOP : slider normal, rien ne change --- */
@media (min-width: 768px) {
  #catsCarousel .swiper-wrapper {
    display: flex;
  }
}