/* Carrousel à flèches desktop/tablette : Loop Grid Elementor */
:root {
    --st-arrows-gap: 24px;           /* espace entre les cartes */
    --st-arrows-visible: 4;          /* nombre de cartes visibles (surchargé ci-dessous) */
    --st-arrows-size: 60px;          /* diamètre des flèches */
    --st-arrows-offset: 80px;        /* marge latérale réservée aux flèches */
    --st-arrows-color: var(--st-color-brun, #4A3A31);
}

/* Flèches masquées par défaut (mobile inclus) */
.st-arrows-btn { display: none; }

@media (min-width: 768px) {

    /* Nombre de cartes visibles : tablette = 3 pour les deux variantes */
    .st-desktop-arrows { --st-arrows-visible: 3; }

    /* Marge latérale pour loger les flèches à l'extérieur des cartes */
    .st-desktop-arrows {
        position: relative;
        padding-left: var(--st-arrows-offset);
        padding-right: var(--st-arrows-offset);
        box-sizing: border-box;
    }

    /* Piste : grille Elementor -> flex scrollable avec snap */
    .st-desktop-arrows .elementor-loop-container {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        column-gap: var(--st-arrows-gap) !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .st-desktop-arrows .elementor-loop-container::-webkit-scrollbar { display: none; }

    /* Cartes : largeur = (100% - gaps) / nombre visible */
    .st-desktop-arrows .elementor-loop-container > :not(style):not(script) {
        flex: 0 0 calc( (100% - (var(--st-arrows-visible) - 1) * var(--st-arrows-gap)) / var(--st-arrows-visible) );
        width: auto;
        max-width: none;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Flèches */
    .st-desktop-arrows .st-arrows-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: var(--st-arrows-top, 40%);   /* ajusté en JS au centre des visuels */
        transform: translateY(-50%);
        width: var(--st-arrows-size);
        height: var(--st-arrows-size);
        padding: 0;
        border-radius: 50%;
        border: 1px solid var(--st-arrows-color);
        background: transparent;          /* flèche gauche : contour */
        color: var(--st-arrows-color);
        cursor: pointer;
        z-index: 5;
        transition: background .25s, color .25s, opacity .25s;
    }
    .st-desktop-arrows .st-arrows-prev { left: calc( (var(--st-arrows-offset) - var(--st-arrows-size)) / 2 ); }
    .st-desktop-arrows .st-arrows-next {
        right: calc( (var(--st-arrows-offset) - var(--st-arrows-size)) / 2 );
        background: var(--st-arrows-color);  /* flèche droite : pleine */
        color: var(--ft-color-pierre-claire);
    }
    body .st-arrows-btn.st-arrows-next:hover, body .st-desktop-arrows.st-arrows-next:hover {
        background:transparent;
        border: 1px solid var(--st-arrows-color);
    } 
    .st-desktop-arrows .st-arrows-btn svg { width: 20px; height: 20px; }

    /* Inactive : atténuée (extrémités) */
    .st-desktop-arrows .st-arrows-btn:disabled {
        opacity: .3;
        cursor: default;
        pointer-events: none;
    }

    /* Focus clavier visible */
    .st-desktop-arrows .st-arrows-btn:focus-visible {
        outline: 2px solid var(--st-arrows-color);
        outline-offset: 3px;
    }
}

/* Desktop : 4 ou 5 cartes */
@media (min-width: 1025px) {
    .st-desktop-arrows.st-arrows-4 { --st-arrows-visible: 4; }
    .st-desktop-arrows.st-arrows-5 { --st-arrows-visible: 5; }
}