/* 1. Reset & Structure de base */
.main_slider_wrapper {
    width: 100%;
    height: 550px;
    position: relative;
}
.main_slider_wrapper .single-slide{
	height: 100%;
}
/* On force Splide à prendre toute la hauteur */
.splide, .splide__track, .splide__list {
    height: 100% !important;
}

.slide-item {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex !important; /* Splide utilise display: block par défaut */
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.slide-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Equivalent de background-size: cover */
    object-position: center; /* Equivalent de background-position: center */
    z-index: 0;
    pointer-events: none;
}

/* 2. Overlay & Contenu */
ul.splide__list{
	padding: 0px;
	margin: 0px;
}
.splide__slide img{
	width: 100%;
}
.slide-overlay {
    position: absolute;
    inset: 0; /* Raccourci pour top/left/width/height 100% */
    z-index: 1;
    background: #000;
    opacity: .4;
    pointer-events: none;
}

.slide-container {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
    text-align: center;
}

.slide-content.two_col {
    text-align: left;
    flex: 2;
}
.
.slide-extra-image {
    flex: 1;
    z-index: 5;
}
.slide-content  a.button{
	background-color: transparent !important;
    border-radius: 0;
    color: var(--main-color) !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    position: relative;
    padding-left: 0;
    padding-top: 0;
    font-weight: 600 !important;
    width: fit-content;
    font-size: 14px;
}
/* 3. Typographie */
.slide-content .slide-title {
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0px 0px 8px rgba(0,0,0,0.76);
    font-size: 1.5rem; /* Un peu plus grand pour la HP */
    font-weight: 300 !important;
    margin-bottom: 15px;
}

.slide-content .slide-text {
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    margin-bottom: 20px;
}

/* 4. Adaptation des DOTS (Pagination Splide) */
.splide__pagination {
    bottom: 20px !important; /* Position en bas */
    gap: 0px;
}

/* État initial : caché et décalé vers le bas */
.slide-title, .slide-text, .slide-content a.button, .slide-extra-image {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}
.slide-extra-image{
	flex:1.5 !important;
}
/* État quand la slide est active : on affiche tout */
h2.slide-title{
	margin-top: 0px;
}

.slide-item.is-active .slide-title,
.slide-item.is-active .slide-text,
.slide-item.is-active a.button,
.slide-item.is-active .slide-extra-image {
    opacity: 1;
    transform: translateY(0);
}

/* Optionnel : décalage (delay) pour un effet cascade */
.slide-item.is-active .slide-title { transition-delay: 0.2s; }
.slide-item.is-active .slide-text  { transition-delay: 0.4s; }
.slide-item.is-active .button     { transition-delay: 0.6s; }
.slide-item.is-active .slide-extra-image { transition-delay: 0.5s; }

.splide__pagination__page {
    width: 8px !important;
    height: 8px !important;
    background: #FFF !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer;
    opacity: 0.5;
    transition: transform 0.25s, opacity 0.25s;
    padding: 0;
}

.splide__pagination__page.is-active {
    opacity: 1 !important;
    transform: scale(1.2); /* Petit effet de zoom sur le point actif */
    background: #FFF !important;
}

/* 5. Responsive rapide */
@media (max-width: 768px) {
    .slide-container {
        flex-direction: column-reverse;
        padding: 0 20px;
        gap: 30px;
    }
    .slide-extra-image {
        display: block;
        max-width: 250px;
        margin: auto;
    }
    .slide-content.two_col {
        text-align: center;
    }
}