/* === Compact bar : fixed top, fade in/out via opacity+transform (GPU only) ===
   Approche zéro-tressaut : la barre compacte est un élément SÉPARÉ du
   banner expanded. Les deux ne partagent aucune transition de layout. */

.featured-events-compact.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

@media (max-width: 600px) {
    .featured-events-compact .container {
        gap: 0.5rem !important;
    }
    .featured-events-compact a {
        padding: 0.4rem 0.9rem !important;
        font-size: 0.7rem !important;
    }
}

/* Responsive pour la bannière featured events */
@media (max-width: 768px) {
    .featured-single {
        flex-direction: column !important;
        text-align: center !important;
    }

    .featured-single .featured-content {
        min-width: auto !important;
    }

    .featured-single .featured-action {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .featured-carousel {
        grid-template-columns: 1fr !important;
    }

    .featured-events-banner h2 {
        font-size: 1.5rem !important;
    }

    .featured-events-banner .featured-content h2 {
        font-size: 1.6rem !important;
    }

    .featured-events-banner {
        margin-top: 80px !important;
    }
}

@media (max-width: 480px) {
    .featured-events-banner {
        padding: 1.5rem 0 !important;
        margin-top: 80px !important;
    }

    .featured-card {
        padding: 1rem !important;
    }
}