:root{
  --ss-bg:#000;
  --ss-panel-bg:rgba(255,255,255,0.08);
  --ss-panel-border:rgba(255,255,255,0.12);
  --ss-text:#fff;
  --ss-muted:rgba(255,255,255,0.72);
  --ss-radius:28px;
  --ss-shadow:0 24px 70px rgba(0,0,0,0.38);
  --ss-slide-w:min(1100px, 88vw);
  --ss-dur-main:850ms;
  --ss-dur-text:780ms;
  --ss-text-delay:220ms;
  --ss-ease:cubic-bezier(0.22, 1, 0.36, 1);
  --ss-text-offset:72px;
}

.ss-slider,
.ss-slider *{box-sizing:border-box}

.ss-slider{
  position:relative;
  overflow:hidden;
  user-select:none;
  color:var(--ss-text);
  border-radius:var(--ss-radius);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.ss-slider__viewport {
  /* Utilisation de clip-path comme alternative au border-radius */
  clip-path: inset(0 round var(--ss-radius));
}

.ss-slider__viewport{
  /* border-radius:var(--ss-radius); */
  position:relative;
  width:var(--ss-slide-w);
  aspect-ratio:16 / 9;
  margin:0 auto;
  overflow:hidden;
}

.ss-slider__stage{
  position:relative;
  width:100%;
  height:100%;
}

.ss-slider__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(100%);
  transition:
    transform var(--ss-dur-main) var(--ss-ease),
    opacity var(--ss-dur-main) var(--ss-ease);
  pointer-events:none;
}

.ss-slider__slide.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  z-index:3;
}

.ss-slider__slide.is-next{
  opacity:1;
  transform:translateX(100%);
  z-index:2;
}

.ss-slider__slide.is-prev{
  opacity:0;
  transform:translateX(-100%);
  z-index:1;
}

.ss-slider__media{
  position:relative;
  width:100%;
  height:100%;
  /* Suppression du border-radius ici pour éviter les problèmes de rendu */
  overflow:hidden;
  background:#111;
  box-shadow:var(--ss-shadow);
}

.ss-slider__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
}

.ss-slider__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.64) 0%,
      rgba(0,0,0,0.38) 28%,
      rgba(0,0,0,0.14) 55%,
      rgba(0,0,0,0.02) 100%
    );
  pointer-events:none;
}

.ss-slider__text{
  position:absolute;
  left:clamp(18px, 3vw, 40px);
  right:clamp(18px, 3vw, 40px);
  bottom:clamp(18px, 3vw, 34px);
  max-width:min(52%, 520px);
  z-index:2;
  color:var(--ss-text-color, #fff);
  opacity:0;
  transform:translateX(var(--ss-text-x, 0));
  transition:
    transform var(--ss-dur-text) var(--ss-ease) var(--ss-text-delay),
    opacity var(--ss-dur-text) var(--ss-ease) var(--ss-text-delay);
  will-change:transform, opacity;
  pointer-events:none;
}

.ss-slider__text.is-right{
  left:auto;
  text-align:left;
}

.ss-slider__text.is-left{
  text-align:left;
}

.ss-slider__eyebrow{
  margin:0 0 10px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.74;
  font-weight:700;
}

.ss-slider__title{
  margin:0 0 12px;
  font-size:clamp(1.8rem, 3.1vw, 3.8rem);
  line-height:.96;
  letter-spacing:-.05em;
  font-weight:700;
}

.ss-slider__desc{
  margin:0;
  font-size:clamp(1rem, 1.12vw, 1.14rem);
  line-height:1.5;
  opacity:.94;
  max-width:46ch;
}

.ss-slider__controls{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.ss-slider__dots{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:var(--ss-panel-bg);
  border:1px solid var(--ss-panel-border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.ss-slider__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  padding:0;
  cursor:pointer;
  background:rgba(255,255,255,0.25);
  transition:
    transform 280ms ease,
    background 280ms ease;
}

.ss-slider__dot:hover{
  background:rgba(255,255,255,0.55);
}

.ss-slider__dot.is-active{
  background:#fff;
  transform:scale(1.35);
}

@media (max-width: 900px){
  .ss-slider__text{
    max-width:70%;
  }

  .ss-slider__title{
    font-size:clamp(1.35rem, 4vw, 2.3rem);
  }

  .ss-slider__desc{
    font-size:.96rem;
  }
}

@media (max-width: 680px){
  .ss-slider__viewport{
    width:92vw;
  }

  .ss-slider__text{
    max-width:none;
    right:18px;
  }

  .ss-slider__title{
    font-size:clamp(1.3rem, 5.4vw, 2rem);
  }

  .ss-slider__desc{
    font-size:.93rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .ss-slider__slide,
  .ss-slider__text,
  .ss-slider__dot{
    transition:none !important;
  }
}