/* ---------------------------------------------------------------------------
   Bloc Filtres (blocs_filters)

   Trois rendus, choisis dans le champ « Rendu » du bloc et posés en classe
   modificatrice sur la racine :

     .atb-filters--none    le reset de liste, rien d'autre (habillage à la main)
     .atb-filters--badges  pastilles arrondies, la pastille active est pleine
     .atb-filters--tabs    rangée d'onglets soulignés
     .atb-filters--group   groupe de boutons (segmented control) : un cadre
                           arrondi, des boutons à largeur égale, l'actif plein

   Tout se règle par variables, surchargeables depuis le CSS perso du bloc
   (la racine est déjà ciblée : écrire `--atb-filters-active-bg: red;`) :

     --atb-filters-gap            espace entre les choix
     --atb-filters-color          couleur du texte des choix inactifs
     --atb-filters-active-color   couleur du texte du choix actif
     --atb-filters-active-bg      fond (badges) / trait (tabs) du choix actif
     --atb-filters-radius         arrondi des badges et du groupe de boutons
     --atb-filters-group-bg       fond du cadre du groupe de boutons (défaut : --atb-light)

   Le masquage des éléments filtrés est une CLASSE (.atb-filters-hidden), jamais
   un style inline : elle cohabite avec la visibilité par appareil
   (data-atb-device, display:none !important en @media) sans écraser quoi que
   ce soit — l'une ou l'autre suffit à masquer.
   --------------------------------------------------------------------------- */

.atb-filters {
    --atb-filters-gap: var(--atb-space-2, 0.5rem);
    --atb-filters-color: inherit;
    --atb-filters-active-color: var(--atb-light, #fff);
    --atb-filters-active-bg: var(--atb-primary, #0099DD);
    --atb-filters-radius: var(--atb-radius-pill, 100vw);
}

.atb-filters__list {
    list-style: none !important;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--atb-filters-gap);
}

.atb-filters__item {
    margin: 0;
    padding: 0;
}

/* Reset complet du bouton : il hérite tout du contexte (police, couleur),
   comme un lien. Le focus clavier reste visible. */
.atb-filters__btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: var(--atb-leading-tight, 1.2);
    color: var(--atb-filters-color);
    text-align: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--atb-space-2, 0.5rem);
    transition:
        color var(--atb-transition, 0.2s ease),
        background-color var(--atb-transition, 0.2s ease),
        border-color var(--atb-transition, 0.2s ease),
        opacity var(--atb-transition, 0.2s ease);

    &:focus-visible {
        outline: 2px solid var(--atb-filters-active-bg);
        outline-offset: 2px;
    }

    /* L'icône suit la taille du texte du bouton. */
    .atb-icon {
        font-size: 1em;
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
    }
}

.atb-filters__label {
    white-space: nowrap;
}

/* --- Barre de recherche --------------------------------------------------- */

.atb-filters__search {
    margin-bottom: var(--atb-space-3, 0.75rem);
}

.atb-filters__search-input {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--atb-filters-search-width, 24rem);
    margin: 0;
    padding: 0.5em 0.9em;
    font: inherit;
    line-height: var(--atb-leading-tight, 1.2);
    color: inherit;
    background: transparent;
    border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
    border-radius: var(--atb-filters-radius);
    transition: border-color var(--atb-transition, 0.2s ease);

    &::placeholder {
        color: inherit;
        opacity: 0.55;
    }

    &:focus {
        outline: none;
        border-color: var(--atb-filters-active-bg);
    }

    &:focus-visible {
        outline: 2px solid var(--atb-filters-active-bg);
        outline-offset: 2px;
    }
}

/* Onglets : un champ souligné, dans l'esprit des tabs. */
.atb-filters--tabs .atb-filters__search-input {
    border-width: 0 0 2px;
    border-radius: 0;
    padding-inline: 0.25em;
}

/* Compteur (réglage « Compter les choix ») : posé par filters.js. */
.atb-filters__count {
    font-size: 0.8em;
    line-height: 1;
    padding: 0.15em 0.5em;
    border-radius: var(--atb-radius-pill, 100vw);
    background-color: color-mix(in oklab, currentColor 12%, transparent);
    font-variant-numeric: tabular-nums;
}

/* Un choix qui ne correspond à aucun élément reste cliquable, mais s'efface. */
.atb-filters__btn.is-empty {
    opacity: 0.5;
}

/* Message « aucun résultat » : affiché par filters.js quand un filtrage ne
   laisse rien ; l'attribut hidden fait le reste. */
.atb-filters__empty {
    margin: var(--atb-space-4, 1rem) 0 0;
    font-style: italic;
    opacity: 0.8;
}

.atb-filters__empty[hidden] {
    display: none;
}

/* --- Rendu « none » : rien de plus que le reset ---------------------------- */

.atb-filters--none .atb-filters__btn {
    &:hover:not(.is-active),
    &:focus-visible:not(.is-active) {
        opacity: 0.7;
    }

    &.is-active {
        font-weight: 700;
    }
}

/* --- Rendu « badges » ------------------------------------------------------ */

.atb-filters--badges .atb-filters__btn {
    padding: 0.35em 0.9em;
    border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
    border-radius: var(--atb-filters-radius);

    &:hover:not(.is-active),
    &:focus-visible:not(.is-active) {
        border-color: var(--atb-filters-active-bg);
        color: var(--atb-filters-active-bg);
    }

    &.is-active {
        background-color: var(--atb-filters-active-bg);
        border-color: var(--atb-filters-active-bg);
        color: var(--atb-filters-active-color);
    }
}

/* --- Rendu « tabs » -------------------------------------------------------- */

.atb-filters--tabs .atb-filters__list {
    /* Une seule rangée : les onglets défilent horizontalement dans un
       conteneur étroit plutôt que de passer à la ligne. */
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent);
}

.atb-filters--tabs .atb-filters__item {
    flex: 0 0 auto;
}

.atb-filters--tabs .atb-filters__btn {
    padding: 0.6em 1em;
    /* Le trait actif recouvre la bordure de la liste. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    opacity: 0.75;

    &:hover,
    &:focus-visible {
        opacity: 1;
    }

    &.is-active {
        opacity: 1;
        color: var(--atb-filters-active-bg);
        border-bottom-color: var(--atb-filters-active-bg);
        font-weight: 700;
    }
}

/* --- Rendu « group » (segmented control) ---------------------------------- */

.atb-filters--group .atb-filters__list {
    gap: 0.25rem;
    padding: 0.25rem;
    background-color: var(--atb-filters-group-bg, var(--atb-light, #fff));
    border: 1px solid color-mix(in oklab, currentColor 15%, transparent);
    border-radius: var(--atb-filters-radius);
    box-shadow: var(--atb-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* Largeur égale entre les choix ; en conteneur étroit ils passent à la ligne
   (flex-wrap hérité de la liste) sans perdre leur forme. */
.atb-filters--group .atb-filters__item {
    flex: 1 1 auto;
    min-width: max-content;
}

.atb-filters--group .atb-filters__btn {
    width: 100%;
    justify-content: center;
    padding: 0.6em 1.2em;
    border-radius: var(--atb-filters-radius);
    font-weight: 700;
    opacity: 0.8;

    &:hover:not(.is-active),
    &:focus-visible:not(.is-active) {
        opacity: 1;
        background-color: color-mix(in oklab, var(--atb-filters-active-bg) 10%, transparent);
    }

    &.is-active {
        opacity: 1;
        background-color: var(--atb-filters-active-bg);
        color: var(--atb-filters-active-color);
    }
}

/* Le fond du cadre est clair : le compteur reste lisible sur un choix actif. */
.atb-filters--group .atb-filters__btn.is-active .atb-filters__count {
    background-color: color-mix(in oklab, var(--atb-filters-active-color) 20%, transparent);
}

/* --- Éléments filtrés ------------------------------------------------------ */

.atb-filters-hidden {
    display: none !important;
}

/* Léger fondu à chaque (ré)apparition. La classe est reposée par filters.js
   à chaque changement, donc l'animation rejoue. */
.atb-filters-shown {
    animation: atb-filters-in 0.25s ease;
}

@keyframes atb-filters-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atb-filters-shown {
        animation: none;
    }
}