/* ============================================
   MOBILE SLIDER — Helper réutilisable (CSS)
   Stories WL

   Toute grille [data-mobile-slider] devient un slider horizontal
   scroll-snap sous 768px. Au-dessus, ZERO effet : la grille garde
   son display/grid-template-columns d'origine.
   ============================================ */

@media (max-width: 767px) {
    .mobile-slider-wrap {
        margin: 0 -16px;
        width: calc(100% + 32px);
    }

    [data-mobile-slider].mobile-slider-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 16px 12px;
        gap: var(--space-md, 16px);
    }

    [data-mobile-slider].mobile-slider-track::-webkit-scrollbar {
        display: none;
    }

    [data-mobile-slider].mobile-slider-track:focus-visible {
        outline: 2px solid var(--red-bright, #FF1A3C);
        outline-offset: 2px;
    }

    .mobile-slider-track > .mobile-slider-item {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .mobile-slider-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm, 8px);
        padding: 0 16px 4px;
        max-width: 100%;
    }

    .mobile-slider-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        /* Garde-fou : même si trop de pastilles sont générées un jour, elles ne
           peuvent plus pousser la page en scroll horizontal (cf. bug annuaire 46
           entrées = 46 pastilles, QA nuit 14/10/2026). */
        max-width: 100%;
        overflow: hidden;
    }

    .mobile-slider-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: var(--glass-border-hover, rgba(255, 255, 255, 0.15));
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .mobile-slider-dot.is-active {
        background: var(--red-bright, #FF1A3C);
        transform: scale(1.3);
    }

    .mobile-slider-counter {
        font-size: 0.7rem;
        color: var(--text-tertiary, rgba(242, 242, 245, 0.4));
        letter-spacing: 0.02em;
        min-width: 3ch;
        text-align: center;
    }
}

/* Desktop / tablette (>= 768px) : neutralise tout, la grille d'origine reste maître */
@media (min-width: 768px) {
    .mobile-slider-footer {
        display: none !important;
    }

    .mobile-slider-wrap {
        margin: 0;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-mobile-slider].mobile-slider-track {
        scroll-behavior: auto;
    }

    .mobile-slider-dot {
        transition: none;
    }
}