/* ============================================ */
/* BLOG FILTER - STYLE STORIES MOBILE          */
/* Fichier séparé - Supprimer pour revenir     */
/* ============================================ */

@media (max-width: 768px) {

    /* Wrapper pour positionner l'indicateur */
    .blog-header .container {
        position: relative;
    }

    /* Container des filtres - Style Stories */
    .blog-filter-nav {
        position: relative;
        display: flex;
        gap: 10px;
        padding: 15px 45px 15px 15px; /* Plus d'espace à droite pour la flèche */
        margin: 0;
        background: linear-gradient(180deg, rgba(11, 36, 62, 0.03) 0%, transparent 100%);
        border-radius: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .blog-filter-nav::-webkit-scrollbar {
        display: none;
    }

    /* Indicateur de scroll à droite - Flèche animée */
    .blog-filter-nav::after {
        content: '›';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 300;
        color: var(--aurum-gold, #C5A059);
        background: linear-gradient(90deg, transparent 0%, rgba(248, 249, 250, 0.95) 30%, rgba(248, 249, 250, 1) 100%);
        pointer-events: none;
        z-index: 10;
        animation: scrollHint 1.5s ease-in-out infinite;
    }

    /* Animation de la flèche pour attirer l'attention */
    @keyframes scrollHint {
        0%, 100% {
            transform: translateX(0);
            opacity: 1;
        }
        50% {
            transform: translateX(5px);
            opacity: 0.6;
        }
    }

    /* Dégradé à gauche (apparaît quand on scroll) */
    .blog-filter-nav::before {
        content: '‹';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 300;
        color: var(--aurum-gold, #C5A059);
        background: linear-gradient(-90deg, transparent 0%, rgba(248, 249, 250, 0.95) 30%, rgba(248, 249, 250, 1) 100%);
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Boutons style pill/stories */
    .filter-btn {
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
        border-radius: 25px;
        background: #FFFFFF;
        border: 1.5px solid rgba(197, 160, 89, 0.3);
        color: var(--aurum-blue, #0B243E);
        box-shadow: 0 2px 8px rgba(11, 36, 62, 0.08);
        transition: all 0.3s ease;
    }

    /* Animation d'indication au chargement */
    .filter-btn:first-child {
        animation: hintScroll 2s ease-out 0.5s;
    }

    @keyframes hintScroll {
        0% { transform: translateX(0); }
        15% { transform: translateX(-8px); }
        30% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }

    .filter-btn:hover,
    .filter-btn:focus {
        border-color: var(--aurum-gold, #C5A059);
        box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
    }

    /* Bouton actif - Style premium */
    .filter-btn.active {
        background: linear-gradient(135deg, var(--aurum-blue, #0B243E) 0%, #1a3a5c 100%);
        border-color: var(--aurum-gold, #C5A059);
        color: var(--aurum-gold, #C5A059);
        box-shadow: 0 4px 15px rgba(11, 36, 62, 0.25);
    }
}

/* Très petit écran - encore plus compact */
@media (max-width: 480px) {
    .blog-filter-nav {
        padding: 12px 40px 12px 12px;
        gap: 8px;
    }

    .filter-btn {
        padding: 8px 14px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .blog-filter-nav::after {
        font-size: 20px;
        width: 35px;
    }
}