.slider-container {
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg, #0c0e0b);
  z-index: 2;
  transition: width .5s ease, height .5s ease, left .5s ease, top .5s ease;
  backface-visibility: hidden;
  perspective: 1000px;
}
#slider {
  position: relative;
  height: 100%;
}
.animating {
  transition: transform .5s;
  will-change: transform;
}
.animating .slide__bg.activeBg {
  transition: transform .5s;
  will-change: transform;
}
.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slide__bg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  will-change: transform;
  cursor: grab;
}
/* Fondu haut/bas d'image pour asseoir la timeline et le texte (ambiance Cards) */
.slide__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,14,11,.55) 0%, rgba(12,14,11,0) 30%),
    linear-gradient(to bottom, rgba(12,14,11,.5) 0%, rgba(12,14,11,0) 24%);
}
/* Pas de voile sur l'accueil (slide 0) pour garder le logo net */
.slide-0 .slide__bg::after { display: none; }

.slide__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#slider, .slide, .slide__bg {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

[class^="slide-"] {
  display: none;
}