/* Carrousel mobile générique : Loop Grid Elementor et conteneur flex */
:root {
    --st-carousel-gap: 16px;
    --st-carousel-item-width: 85vw;
    --st-carousel-img-height: 200px;
    --st-carousel-gutter: var(--st-margin-x, 20px);
    --st-carousel-dot: #F8EFE4;
    --st-carousel-dot-active: #C97953;
}

.st-carousel-dots { display: none; }

@media (max-width: 767px) {
    /* Pistes : la classe st-carousel-track est posée par le JS sur la piste réelle. */
    .st-mobile-carousel .elementor-loop-container,
    .st-mobile-carousel .st-carousel-track,
    .st-mobile-carousel.st-carousel-track,
    .st-mobile-carousel-flex > .e-con-inner.st-carousel-track {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        column-gap: var(--st-carousel-gap) !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: calc(100% + var(--st-carousel-gutter) + var(--st-carousel-gutter)) !important;
        margin-left: calc(0px - var(--st-carousel-gutter)) !important;
        padding-left: var(--st-carousel-gap) !important;
        padding-right: var(--st-carousel-gap) !important;
        scroll-padding-left: var(--st-carousel-gap);
        box-sizing: border-box;
        position: relative;
    }

    .st-mobile-carousel .elementor-loop-container::-webkit-scrollbar,
    .st-mobile-carousel .st-carousel-track::-webkit-scrollbar,
    .st-mobile-carousel.st-carousel-track::-webkit-scrollbar { display: none; }

    /* Les cartes sont les enfants directs de la piste, dans les deux modes. */
    .st-mobile-carousel .elementor-loop-container > :not(style):not(script),
    .st-mobile-carousel .st-carousel-track > :not(style):not(script),
    .st-mobile-carousel.st-carousel-track > :not(style):not(script) {
        flex: 0 0 var(--st-carousel-item-width);
        width: auto;
        max-width: none;
        min-width: 0;
        scroll-snap-align: start;
    }
    /* Le padding de piste permet au dernier item de se caler à gauche avec le même retrait,
       sans modifier sa largeur; le scroll-padding conserve l'alignement à gauche. */
    .st-mobile-carousel .elementor-loop-container > style,
    .st-mobile-carousel .elementor-loop-container > script { display: none !important; }

    /* Hauteur d'image sur mobile (surcharge le template si besoin). */
    .st-mobile-carousel .elementor-widget-image img {
        height: var(--st-carousel-img-height);
        width: 100%;
        object-fit: cover;
    }

    /* Pastilles, conservant les noms et styles d'origine. */
    .st-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;
    }
    .st-carousel-dots button {
        width: 10px;
        height: 10px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--st-carousel-dot);
        transition: width .25s, background .25s;
    }
    .st-carousel-dots button.is-active {
        width: 32px;
        background: var(--st-carousel-dot-active);
    }
}