/* CSS spécifique page index */

/* On force la section parente à ne pas limiter le swiper */
.elementor-element-4eae55f {
    overflow: visible !important;
}

/* La fenêtre d'affichage (Le container Elementor) */
.main-hero-swiper.swiper {
    overflow-x: hidden !important; /* Cache à gauche et à droite */
    overflow-y: visible !important; /* Ne coupe pas le haut/bas */
    position: relative;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Le wrapper force les sections à s'aligner horizontalement */
.main-hero-swiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
}

/* Chaque slide prend toute la largeur */
.main-hero-swiper .swiper-slide {
    width: 100% !important;
    flex-shrink: 0;
}

/* --- Flèches sur les bords --- */
.hero-next, .hero-prev {
    color: #CD2E25 !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 100;
    width: 50px !important;
}

.hero-next { right: 20px !important; }
.hero-prev { left: 20px !important; }

/* --- Bullets en dessous --- */
.hero-dots {
    position: absolute !important;
    bottom: 20px !important;
    z-index: 100;
}

.hero-dots .swiper-pagination-bullet {
	background: #fff !important;
	width: 12px;
	height: 12px;
	opacity: 0.5;
	border: 1px solid #CD2E25;
}
.hero-dots .swiper-pagination-bullet-active {
    background: #CD2E25 !important;
    opacity: 1;
}