/* swiper-accueil */

/* =========================================================   SWIPER - PAGE D'ACCUEIL UNIQUEMENT   Format maximum : 512 x 716 px   ========================================================= */

/* La double classe donne volontairement une priorité   supérieure au .swiper global de styles-swiper.css */

.swiper.swiper-accueil {
  width: 100%;
  max-width: 512px;
  aspect-ratio: 512 / 716;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--bs-dark);
}

/* Wrapper et slides */

.swiper-accueil .swiper-wrapper, .swiper-accueil .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Slide */

.swiper-accueil .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Images */

.swiper-accueil .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

/* =========================================================   MISE EN PAGE ACCUEIL   ========================================================= */

#accueil-principal .accueil-grid {
  display: grid;
  grid-template-columns: minmax(0, 512px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}

/* Colonne Swiper */

#accueil-principal .accueil-swiper {
  width: 100%;
  max-width: 512px;
  justify-self: center;
}

/* Colonne droite */

#accueil-principal .accueil-droite {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Texte */

#accueil-principal .accueil-texte {
  width: 100%;
}

/* Vidéo en bas */

#accueil-principal .accueil-video {
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
}

#accueil-principal .accueil-video iframe {
  display: block;
  border: 0;
}

/* =========================================================   RESPONSIVE   ========================================================= */

@media (max-width: 991.98px) {
  #accueil-principal .accueil-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  #accueil-principal .accueil-swiper {
    max-width: 512px;
    margin: 0 auto;
  }
}

@media (max-width: 991.98px) {
  #accueil-principal .accueil-video {
    margin-top: 2rem;
    padding-top: 0;
  }
}

div {
}

