/* Custom CSS Overrides for Bloc Slider (Triptyque 3 colonnes) */

.slider-wrapper > .row {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: 0;
}

/* Configuration 3 colonnes égales sur écran desktop */
@media (min-width: 992px) {
    .slider-wrapper {
        overflow: visible !important;
    }
    .slider-wrapper .univers {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
        height: 100%;
        position: relative;
    }
}

/* Responsive mobile & tablette (< 992px) : Slider 1 par 1 */
@media (max-width: 991px) {
    .slider-wrapper {
        height: 75vh !important;
        min-height: 480px;
        position: relative;
        overflow: hidden;
    }
    
    .slider-wrapper > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch;
        height: 100% !important;
        margin: 0 !important;
        scrollbar-width: none;
    }
    
    .slider-wrapper > .row::-webkit-scrollbar {
        display: none;
    }

    .slider-wrapper .univers {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        position: relative;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    /* Permettre le swipe sur mobile sans que le bloc titre central fasse obstacle */
    .slider-wrapper .slider-meta {
        pointer-events: none;
    }
    .slider-wrapper .slider-meta a,
    .slider-wrapper .slider-meta button {
        pointer-events: auto;
    }
}

/* Adaptations spécifiques par colonne */
.slider-wrapper .univers:nth-child(1) {
    position: relative;
}
.slider-wrapper .univers:nth-child(1) .meta {
    bottom: 0;
    left: 0;
    right: auto;
    background: #ffffff;
}
.slider-wrapper .univers:nth-child(1) .meta .arrow {
    background-image: url(../../images/icons/arrow/down/brown.svg);
}

.slider-wrapper .univers:nth-child(2) {
    position: relative;
    z-index: 9;
}
.slider-wrapper .univers:nth-child(2) .meta {
    bottom: 0;
    left: 0;
    background: #735749; /* couleur secondaire du thème */
}
.slider-wrapper .univers:nth-child(2) .meta .arrow {
    background-image: url(../../images/icons/arrow/down/white.svg);
}
.slider-wrapper .univers:nth-child(2) .meta * {
    color: #ffffff !important;
}

.slider-wrapper .univers:nth-child(3) {
    position: relative;
    z-index: 9;
}
.slider-wrapper .univers:nth-child(3) .meta {
    bottom: 0;
    left: 0;
    background: rgba(160, 122, 77, 0.85); /* couleur bronze/kaki extraite de Figma (rgba(160, 122, 77)) */
}
.slider-wrapper .univers:nth-child(3) .meta .arrow {
    background-image: url(../../images/icons/arrow/down/white.svg);
}
.slider-wrapper .univers:nth-child(3) .meta * {
    color: #ffffff !important;
}

/* Centrage du titre principal */
.slider-wrapper .slider-meta {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    max-width: 700px;
}

/* Alignement à gauche du h3 exclusivement dans les boîtes meta */
.slider-wrapper .meta .h3,
.slider-wrapper .meta h3,
.block-particulier-professionnel .meta .h3,
.block-particulier-professionnel .meta h3 {
    text-align: left !important;
}

/* Flèches de navigation mobile (1-by-1 slider) */
.slider-nav-btn {
    display: none;
}

@media (max-width: 991px) {
    .slider-nav-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        z-index: 20;
        width: 44px;
        height: 44px;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0;
        cursor: pointer;
        padding: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .slider-nav-btn:active {
        transform: translateY(-50%) scale(0.9);
        opacity: 0.7;
    }

    .slider-nav-btn::before {
        content: '';
        width: 16px;
        height: 16px;
        display: block;
        background-image: url(../../images/icons/arrow/right/white.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .slider-nav-prev {
        left: 12px;
    }
    .slider-nav-prev::before {
        transform: rotate(180deg);
    }

    .slider-nav-next {
        right: 12px;
    }
}

/* Style de la mention "Cliquer pour en savoir plus" (affichée uniquement en mobile < 992px) */
.slider-wrapper .meta .click-more {
    font-size: 0.82rem;
    font-style: italic;
    opacity: 0.85;
    margin-top: 2px;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}

@media (min-width: 992px) {
    .slider-wrapper .meta .click-more {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .slider-wrapper .meta .click-more {
        display: block !important;
    }
}

/* Animation d'ouverture douce pour les blocs d'univers */
@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.univers-maison.active,
.univers-espace.active,
.univers-confort.active {
    display: block !important;
    animation: fadeInSlideDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 991px) {
    .univers-maison,
    .univers-espace,
    .univers-confort {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .univers-maison:not(.active),
    .univers-espace:not(.active),
    .univers-confort:not(.active) {
        display: none !important;
    }
}