@charset "UTF-8";
/* =====================================================================
   SLIDER — Composant réutilisable — Coverpla-2.0
   Source SCSS — Le CSS déployé est assets/css/slider.css
   CSS custom properties définies par JS sur chaque instance :
     --slider-spv : slides per view (float, ex. 3.1 pour le peek)
     --slider-gap : gap entre slides en px (ex. 24px)
   ===================================================================== */
/* =====================================================================
   CORE
   ===================================================================== */
.slider {
  position: relative;
}
.slider__track {
  display: flex;
  gap: var(--slider-gap, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 12px;
  padding-inline-end: max(12px, var(--slider-track-bleed, 0px));
  padding-left: var(--slider-track-bleed, 0px);
  scroll-padding-left: var(--slider-track-bleed, 0px);
}
.slider__track::-webkit-scrollbar {
  display: none;
}
.slider__track.is-dragging {
  cursor: grabbing;
}
.slider__slide {
  flex: 0 0 calc((100% - (var(--slider-spv, 1) - 1) * var(--slider-gap, 1.5rem)) / var(--slider-spv, 1));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.slider__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

[data-slider][data-arrows=false] .slider__controls {
  display: none;
}

.slider__track-wrapper {
  margin-left: calc(-1 * var(--slider-track-bleed, 0px));
  width: calc(100% + 2 * var(--slider-track-bleed, 0px));
}

.slider--testimonials .slider__track-wrapper {
  width: 100vw;
  margin-left: calc(-1 * var(--slider-track-bleed, 0px));
}

.slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--neutralGrey, #B7B8BC);
  border-radius: 50%;
  background: var(--neutralWhite, #fff);
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}
.slider__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}
.slider__arrow:hover:not([disabled]) {
  border-color: var(--primaryColor, #222221);
}
.slider__arrow[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
.slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutralGrey, #B7B8BC);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.05s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.05s ease, border-radius 0.05s ease;
}
.slider__dot[aria-selected=true] {
  width: 24px;
  border-radius: 37px;
  background: var(--primaryColor, #222221);
}

/* =====================================================================
   VARIANT : slider--testimonials
   Contrôles alignés à droite avant le track
   Cards  : fond géré par .temoignage-card (pas de règle sur .slider__slide)
   ===================================================================== */
.slider--testimonials {
  background: var(--neutralWhite, #fff);
}
.slider--testimonials .slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.slider--testimonials .slider__title {
  flex: 1;
}
.slider--testimonials .slider__controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}
.slider--testimonials .slider__arrow {
  width: clamp(32px, 2.33vw, 45px);
  height: clamp(32px, 2.33vw, 45px);
  background-color: var(--neutralWhite, #fff);
  border: 1px solid var(--neutralGrey, #B7B8BC);
}
.slider--testimonials .slider__arrow svg {
  fill: var(--neutralGrey, #B7B8BC);
  width: 1.75rem;
  height: 1.75rem;
}
.slider--testimonials .slider__arrow:hover:not([disabled]) {
  background-color: var(--primaryColor, #222221);
  border-color: var(--primaryColor, #222221);
}
.slider--testimonials .slider__arrow:hover:not([disabled]) svg {
  fill: #ffffff;
}
.slider--testimonials .slider__pagination {
  margin-top: 2rem;
}
@media screen and (max-width: 1024px) {
  .slider--testimonials .slider__slide {
    flex: 0 0 calc((100% - 1.1 * var(--slider-gap, 1.5rem)) / 2.1);
  }
}
@media screen and (max-width: 768px) {
  .slider--testimonials .slider__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 568px) {
  .slider--testimonials .slider__slide {
    flex: 0 0 calc((100% - 0.15 * var(--slider-gap, 1.5rem)) / 1.15);
  }
}

/* =====================================================================
   VARIANT : slider--history-photos
   Section fond blanc, grandes cartes paysage
   Contrôles alignés en haut à droite avec le titre
   Pagination pill style — dot : 13px × 13px, pill active : 32px × 13px
   ===================================================================== */
.slider--history-photos {
  background: var(--neutralWhite, #fff);
}
.slider--history-photos .slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.slider--history-photos .slider__title {
  flex: 1;
}
.slider--history-photos .slider__controls {
  flex-shrink: 0;
}
.slider--history-photos .slider__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.slider--history-photos .slider__dot[aria-selected=true] {
  width: 32px;
  height: 13px;
  border-radius: 37px;
  background: var(--primaryColor, #222221);
}
@media screen and (max-width: 1024px) {
  .slider--history-photos .slider__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .slider--history-photos .slider__slide {
    flex: 0 0 calc((100% - 0.1 * var(--slider-gap, 1.5rem)) / 1.1);
  }
}
@media screen and (max-width: 568px) {
  .slider--history-photos .slider__slide {
    flex: 0 0 calc(100% - var(--slider-gap, 1.5rem));
  }
}

/* =====================================================================
   VARIANT : slider--history-catalogs
   Section fond #f6f6f6, cartes portrait
   Header titre gauche + flèches droite (même pattern que history-photos)
   border-radius 50px sur le track (spec Figma)
   Pagination dots en bas
   ===================================================================== */
.slider--history-catalogs {
  background: var(--neutralGreyShade4, #f6f6f6);
}
.slider--history-catalogs .slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.slider--history-catalogs .slider__title {
  flex: 1;
}
.slider--history-catalogs .slider__controls {
  flex-shrink: 0;
}
.slider--history-catalogs .slider__track {
  border-radius: 50px;
}
.slider--history-catalogs .slider__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.slider--history-catalogs .slider__dot[aria-selected=true] {
  width: 32px;
  height: 13px;
  border-radius: 37px;
  background: var(--primaryColor, #222221);
}
@media screen and (max-width: 1024px) {
  .slider--history-catalogs .slider__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .slider--history-catalogs .slider__slide {
    flex: 0 0 calc((100% - 1.1 * var(--slider-gap, 1.5rem)) / 2.1);
  }
}
@media screen and (max-width: 768px) {
  .slider--history-catalogs .slider__slide {
    flex: 0 0 calc((100% - 0.1 * var(--slider-gap, 1.5rem)) / 1.1);
  }
}
@media screen and (max-width: 568px) {
  .slider--history-catalogs .slider__slide {
    flex: 0 0 calc((100% - 0.15 * var(--slider-gap, 1.5rem)) / 1.15);
  }
  .slider--history-catalogs .slider__track {
    border-radius: 24px;
  }
}

/* =====================================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .slider__track {
    scroll-behavior: auto;
  }
  .slider__dot {
    transition: none;
  }
}

/*# sourceMappingURL=slider.css.map */