/* Slider du hero : les sections Elementor #bw-slide-1, #bw-slide-2… sont empilées et défilent en fondu */
.bw-slider {
    position: relative;
    display: grid;
    overflow: hidden;
}

.bw-slider > .bw-hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s;
}

.bw-slider > .bw-hero-slide.bw-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Avant l'initialisation, seul le premier slide est visible (affiché tout de suite, sans fondu) */
.bw-slider > #bw-slide-1:not(.bw-ready) {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: none;
}

[id^="bw-slide-"]:not(#bw-slide-1):not(.bw-ready) {
    display: none;
}

.bw-dots {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 5;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.bw-dots { gap: 2px; }
/* zone tactile de 24 px (accessibilité), le point visible est dessiné à l'intérieur */
.bw-dots button {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    background: none;
    cursor: pointer;
}
.bw-dots button::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
}
.bw-dots button.on::before {
    width: 32px;
    border-radius: 8px;
    border-color: var(--e-global-color-accent, var(--bw-orange));
    background: var(--e-global-color-accent, var(--bw-orange));
}

.bw-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bw-ivory, var(--bw-ivory));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    color: #111;
    font-size: 26px;
    line-height: 44px;
    cursor: pointer;
    transform: translateY(-50%);
}

.bw-prev {
    left: 18px;
}

.bw-next {
    right: 18px;
}

/* Le van arrive en roulant depuis la droite, freine, puis reste légèrement en mouvement */
.bw-hero-slide.bw-active .bw-van img {
    animation:
        bw-drive-in 1.6s cubic-bezier(0.22, 0.9, 0.3, 1) both,
        bw-idle 3.5s ease-in-out 1.9s infinite;
}

@keyframes bw-drive-in {
    0% {
        opacity: 0;
        transform: translateX(45%) rotate(0deg);
        filter: blur(6px);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    80% {
        transform: translateX(-2%) rotate(-0.8deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes bw-idle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bw-hero-slide.bw-active .bw-van img {
        animation: none;
    }
}

/* ------------------------------------------------------------------
   Mobile : photo en haut (coins arrondis), sujet (chameau / van) qui
   déborde sur le bas de la photo, texte lisible sur fond blanc dessous.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .bw-arrow {
        display: none;
    }

    .bw-slider {
        background: var(--bw-ivory, var(--bw-ivory));
    }

    .bw-hero-slide {
        padding: 0 !important;
        min-height: 0 !important;
    }

    .bw-hero-slide > .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Photo */
    .bw-hero-slide .bw-media {
        position: relative !important;
        inset: auto !important;
        order: -1;
        width: 100% !important;
        height: min(56vh, 430px) !important;
        min-height: 320px !important;
        margin: 0 !important;
        border-radius: 0 0 32px 32px;
        background-size: cover !important;
        background-position: center !important;
        overflow: visible !important;
    }

    .bw-hero-slide .bw-media > .e-con {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 0 32px 32px;
        overflow: hidden;
    }

    .bw-hero-slide .bw-media > .e-con > .elementor-widget,
    .bw-hero-slide .bw-media > .e-con > .elementor-widget > .elementor-widget-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .bw-hero-slide .bw-media > .e-con img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover;
    }

    .bw-hero-slide .bw-media .elementor-shape {
        display: none;
    }

    /* Voile clair en haut pour le logo et le menu */
    .bw-hero-slide .bw-media::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 34%;
        z-index: 1;
        background: linear-gradient(180deg, color-mix(in srgb, var(--bw-ivory) 88%, transparent), color-mix(in srgb, var(--bw-ivory) 0%, transparent));
        pointer-events: none;
    }

    /* Chameau / van */
    .bw-hero-slide .bw-media .bw-subject {
        display: block !important;
        position: absolute !important;
        right: 5%;
        bottom: -44px;
        z-index: 3;
        width: 46% !important;
        max-width: none !important;
        margin: 0 !important;
        filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.18));
    }

    .bw-hero-slide .bw-media .bw-subject.bw-van {
        right: 50%;
        bottom: -52px;
        width: 86% !important;
        transform: translateX(50%);
    }

    .bw-hero-slide .bw-media .bw-subject img {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
    }

    /* Texte */
    .bw-hero-slide .bw-text {
        width: 100% !important;
        padding: 68px 22px 76px !important;
        gap: 14px !important;
        background: var(--bw-ivory, var(--bw-ivory));
    }

    .bw-hero-slide .bw-text > .elementor-widget {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .bw-hero-slide .bw-text .elementor-heading-title {
        font-size: 32px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.01em;
    }

    .bw-hero-slide .bw-text .elementor-widget-text-editor {
        color: #5b5b5b !important;
        font-size: 15.5px !important;
        line-height: 1.6 !important;
    }

    .bw-hero-slide .bw-text .elementor-widget-text-editor p {
        margin: 0;
    }

    /* Boutons pleine largeur */
    .bw-hero-slide .bw-text > .e-con {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 6px !important;
    }

    .bw-hero-slide .bw-text > .e-con > .elementor-widget {
        width: 100% !important;
        margin: 0 !important;
    }

    .bw-hero-slide .bw-text .elementor-button {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
    }

    .bw-hero-slide .bw-text .elementor-widget-togo-icon-list a,
    .bw-hero-slide .bw-text .elementor-widget-togo-icon-list li {
        justify-content: center;
        width: 100%;
        white-space: nowrap;
    }

    .bw-hero-slide .bw-text .elementor-widget-togo-icon-list ul {
        width: 100%;
    }

    /* bouton téléphone : numéro centré dans toute la largeur */
    .bw-hero-slide .bw-text .togo-icon-list {
        justify-content: center;
        width: 100%;
    }

    .bw-hero-slide .bw-text .togo-icon-list-item {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Points de navigation */
    .bw-dots {
        bottom: 26px;
    }

    .bw-dots button::before {
        border-color: #cfcfcf;
        background: #e6e6e6;
    }
    .bw-dots button.on::before {
        border-color: var(--e-global-color-accent, var(--bw-orange));
        background: var(--e-global-color-accent, var(--bw-orange));
    }
}