/* ============================================================
   filtres-plats.css
   Styles de base pour les boutons de filtre.
   Surcharger dans le thème ou Bricks → Custom CSS selon charte.
   ============================================================ */

/* Conteneur global */
#filtres-plats {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* align-items: center; */
    gap: var(--space-2xs);
    align-items: flex-start;
}

/* Groupe par taxonomie */
.filtres-groupe {
    display: flex;
    gap: var(--space-2xs);
}

/* Label de groupe (allergène / régime) */
.filtres-groupe__label {
    display: inline-flex;
    align-items: center;
    padding: 0;
    white-space: nowrap;
}

/* Séparateur visuel avant chaque groupe */
/* .filtres-groupe::before {
    content: '';
    display: block;
    width: 1px;
    height: 35px;
    background: var(--dark);
    align-self: center;
} */

/* Bouton de filtre */
.filtre-btn {
    
}

.filtre-btn:hover {
    
}

#brx-content .filtre-btn.actif {
    background: var(--dark);
    border-color: var(--dark);
    color: white;
    opacity: 1;
}

/* Texte inversé quand bouton actif (currentColor trick) */
.filtre-btn.actif span,
.filtre-btn.actif {
    color: var(--filtres-btn-actif-color, #fff);
    border-color: transparent;
    background: var(--filtres-btn-actif-bg, #1a1a1a);
}

/* ── Transition des items ───────────────────────────────────── */

.plat-item {
    transition: opacity 0.2s ease;
}

.plat-item.fp-masque {
    display: none !important;
}

.plat-item.fp-fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
    #filtres-plats {
        gap: 6px;
    }

    .filtre-btn {
        font-size: 0.8rem;
        padding: 5px 11px;
    }

    .filtres-groupe__label {
        font-size: 0.7rem;
    }
}