/*
 * Vision Future Cachan Média — Full-width navigation slider
 * Version 1.0.13 — top-aligned responsive slider images
 *
 * The slider remains full viewport width. Banner images keep their
 * natural proportions with object-fit: cover, but are now anchored to the
 * top edge so wide screens crop only the lower part of each photograph.
 */

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

/* Keep the raw slide markup invisible until Splide has mounted. This avoids
   the first banner image being painted as a full-page background on every
   navigation. The permanent page height is still reserved by .splide__slide. */
html.vfcm-loading .slider-area .splide:not(.vfcm-slider-ready) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.slider-area .splide.vfcm-slider-ready {
  opacity: 1;
  visibility: visible;
}

.slider-area,
.slider-area .splide,
.slider-area .splide__track {
  isolation: isolate;
  contain: paint;
}

/* Release only the main slider from the site's 1350px content limit. */
.slider-area {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.slider-area > .container-fluid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.slider-area > .container-fluid > .row {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.slider-area .splide,
.slider-area .splide__track,
.slider-area .splide__list,
.slider-area .splide__slide {
  width: 100%;
  max-width: 100%;
}

.slider-area .splide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.slider-area .splide__track {
  padding: 0 !important;
  overflow: hidden !important;
}

.slider-area .splide__slide {
  height: clamp(590px, 33.333vw, 750px);
  border-radius: 0 !important;
  overflow: hidden;
}

/* Stable and valid slide structure. */
.slider-area .vfcm-slider-slide,
.slider-area .vfcm-slider-media-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.slider-area .vfcm-slider-slide {
  overflow: hidden;
}

/* Dedicated selector: never confuses the banner with button icons. */
.slider-area img.vfcm-slider-image {
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover;
  /* Keep faces, heads and upper image content visible on every screen. */
  object-position: center top;
  aspect-ratio: auto !important;
  backface-visibility: visible;
  transform: none;
  will-change: auto;
}

/* The gradient must not block links or hide the image. */
.slider-area .splide__slide::after {
  pointer-events: none;
  z-index: 1;
}

/* Keep editorial content above the image and gradient. */
.slider-area .splide-slider-details-area {
  left: max(40px, calc((100vw - 1350px) / 2 + 40px));
  z-index: 5;
}

.slider-area .splide-slider-details-area a {
  position: relative;
  z-index: 6;
}

/* Navigation controls remain inside the viewport. */
.slider-area .splide__arrows,
.slider-area .splide__arrow {
  z-index: 8;
}

.slider-area .splide__arrow--prev {
  left: clamp(16px, 3vw, 64px) !important;
}

.slider-area .splide__arrow--next {
  right: clamp(16px, 3vw, 64px) !important;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .slider-area .splide__slide {
    height: clamp(440px, 48vw, 575px);
  }

  .slider-area .splide-slider-details-area {
    left: 32px;
  }
}

/* Mobile remains intentionally unchanged. Desktop, laptop and tablet
   use a banner height approximately one-third above the original size. */
@media only screen and (max-width: 767px) {
  .slider-area .splide__slide {
    height: clamp(230px, 52vw, 360px);
  }

  .slider-area img.vfcm-slider-image {
    object-position: center top;
  }

  .slider-area .splide-slider-details-area {
    left: 20px;
    right: 20px;
  }
}