/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 17 2025 | 18:03:56 */
/* ==== CARROUSEL DE CONTENU TEXTE ==== */
/* Centrer le slider et forcer 1 slide visible */
.slider-custom-swiper {
  max-width: 100%;
  overflow: visible;
  position: relative;
}

/* Flèches positionnées à l'extérieur */
.slider-custom-swiper .swiper-button-next,
.slider-custom-swiper .swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  color: var(--bleu-profond); /* adapte à ta charte */
}

/* Position exacte */
.slider-custom-swiper .swiper-button-prev {
  left: 0px; /* Ajuste si besoin */
}

.slider-custom-swiper .swiper-button-next {
  right: 0px; /* Ajuste si besoin */
}

/* Icône flèche */
.slider-custom-swiper .swiper-button-next::after,
.slider-custom-swiper .swiper-button-prev::after {
  font-size: 16px;
  font-weight: bold;
}

.slider-custom {overflow: hidden;}
.slide-application {
	background-color: white;
	border-radius: clamp(12px, 3vw, 25px);
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}




/* === CARROUSEL DE PRODUITS SELON L'ATTRIBUT === */
/* ----- Reset Woo dans le slider ----- */
.attr-slider ul.produits-filtrés.slick-initialized { margin: 0; padding: 0; }
.attr-slider ul.produits-filtrés.slick-initialized li.product { float: none !important; }

/* === Carrousel "produits_par_attribut" — scope unique === */
.attr-slider{ position:relative; padding:0 56px; }
.attr-slider .slick-list{ overflow:hidden !important; }      /* pas de scroll horizontal */
.attr-slider ul.produits-filtrés.slick-initialized{ margin:0; padding:0; }
.attr-slider ul.produits-filtrés li.product{ float:none !important; }

/* Flèches : cercle, taille, centrage, z-index élevé */
.attr-slider .slick-prev.custom-arrow,
.attr-slider .slick-next.custom-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:44px !important; height:44px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 2px 10px rgba(0,0,0,.08) !important;
  display:grid !important; place-items:center !important;
  color:#0f172a !important;        /* couleur du chevron */
  z-index:50 !important;
  font-size:0 !important; line-height:0 !important;
  padding:0 !important;
}
.attr-slider .slick-prev.custom-arrow{ left:-28px !important; }
.attr-slider .slick-next.custom-arrow{ right:-28px !important; }
.attr-slider .slick-prev.custom-arrow svg,
.attr-slider .slick-next.custom-arrow svg{ width:20px; height:20px; }
.attr-slider .slick-prev.custom-arrow:hover,
.attr-slider .slick-next.custom-arrow:hover{ background:#f8fafc !important; }
.attr-slider .custom-arrow.slick-disabled{ opacity:.4 !important; cursor:default !important; }

/* Dots compacts et centrés */
.attr-slider .slick-dots{
  position:relative; width:100%;
  display:flex !important; justify-content:center; gap:6px;
  margin:16px 0 0;
}
.attr-slider .slick-dots li{ margin:0 !important; }
.attr-slider .slick-dots li button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:#9aa3af; opacity:.7;
  font-size:0; line-height:0; color:transparent;
  transition:transform .15s ease, opacity .15s ease;
}
.attr-slider .slick-dots li.slick-active button{
  background:#0f172a; opacity:1; transform:scale(1.15);
}
.attr-slider .slick-dots li button:before{ content:none !important; }

/* Responsive : rapprocher/rentrer un peu les flèches */
@media (max-width: 991px){
  .attr-slider{ padding:0 40px; }
  .attr-slider .slick-prev.custom-arrow{ left:-16px !important; }
  .attr-slider .slick-next.custom-arrow{ right:-16px !important; }
}
@media (max-width: 575px){
  .attr-slider{ padding:0 16px; }
  /* si tu veux cacher les flèches en mobile :
  .attr-slider .custom-arrow{ display:none !important; } */
}




/* ---- Supprimer les dots ---- */
ul.produits-filtrés .slick-dots {
  display: none !important;
}

/* ---- Flèches arrondies à l'intérieur du slider ---- */
ul.produits-filtrés .custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  z-index: 20;
  cursor: pointer;
  transition: background 0.2s ease;
}

ul.produits-filtrés .custom-arrow:hover {
  background: #f8fafc;
}

ul.produits-filtrés .custom-arrow.slick-disabled {
  opacity: 0.4;
  cursor: default;
}

/* Gauche/Droite : position collée à l’intérieur du conteneur */
ul.produits-filtrés .slick-prev {
  left: 8px;   /* espace interne */
}
ul.produits-filtrés .slick-next {
  right: 8px;  /* espace interne */
}

/* Mobile : rapprocher un peu les flèches */
@media (max-width: 991px) {
  ul.produits-filtrés .slick-prev { left: 4px; }
  ul.produits-filtrés .slick-next { right: 4px; }
}

@media (max-width: 575px) {
  /* Optionnel : masquer les flèches et garder swipe */
  /* ul.produits-filtrés .custom-arrow { display:none !important; } */
}

