/* Facettes d'une Liste de contenus (bloc Filtres, cible « liste »).

   Design de base : propre sans thème, comme les autres blocs du builder. Tout
   passe par les jetons `--atb-facets-*`, déclarés sur la racine et dérivés des
   rôles du builder (primaire, neutre, rayons, surfaces) — un thème ou le CSS
   perso du bloc les redéfinit, rien d'autre à écraser.

   Les boutons (pastilles, onglets, groupe) gardent la peau du bloc Filtres
   (filters.css : atb-filters--badges|tabs|group) ; cases, radios, recherche,
   liste, puces et liens sont habillés ici. */

.atb-facets {
    --atb-facets-accent: var(--atb-filters-active-bg, var(--atb-primary, #0099DD));
    --atb-facets-on-accent: var(--atb-filters-active-color, var(--atb-light, #fff));
    --atb-facets-ink: var(--atb-neutral, #192743);
    --atb-facets-muted: var(--atb-text-grey, var(--atb-grey, #6C7993));
    --atb-facets-surface: var(--atb-card-bg, var(--atb-light, #fff));
    --atb-facets-hover: var(--atb-surface-soft, color-mix(in srgb, var(--atb-neutral, #192743) 5%, transparent));
    --atb-facets-border: color-mix(in srgb, var(--atb-neutral, #192743) 18%, transparent);
    --atb-facets-border-strong: color-mix(in srgb, var(--atb-neutral, #192743) 38%, transparent);
    --atb-facets-radius: var(--atb-radius-sm, 0.4rem);
    --atb-facets-field-radius: var(--atb-radius, 0.7rem);
    --atb-facets-field-height: 2.75rem;
    --atb-facets-gap: 1.5rem;
    --atb-facets-ring: 0 0 0 3px color-mix(in srgb, var(--atb-facets-accent) 22%, transparent);
    display: block;
}

.atb-facets__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--atb-facets-gap);
    margin: 0;
}

/* ------------------------------------------------------------------ groupes */

.atb-facets__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: opacity var(--atb-transition, 0.2s ease);
}

/* En barre (v2) : la recherche prend la place qui reste. (En grille, les
   colonnes sont verticales : une base de 16rem y deviendrait une hauteur.) */
.atb-facets:not(.atb-facets--grid) .atb-facets__group--search {
    flex: 1 1 16rem;
}

/* En barre (v2), titres alignés en haut ; recherche et tri (souvent sans titre)
   s'alignent sur le bas de la rangée. En grille, c'est la colonne qui décide. */
.atb-facets:not(.atb-facets--grid) .atb-facets__group--search,
.atb-facets:not(.atb-facets--grid) .atb-facets__group--sort {
    align-self: flex-end;
}

/* ------------------------------------------------------------ grille v3
   Lignes → colonnes. Une colonne prend sa part (span sur 12) et ne descend
   jamais sous sa largeur mini : quand la ligne ne peut plus les tenir, elle
   passe sous la précédente — sans point de rupture, dans n'importe quel
   conteneur. Flex et non grid : un mini en px ne sait pas replier une grid. */
.atb-facets--grid .atb-facets__form {
    display: block;
}

.atb-facets__grid {
    display: flex;
    flex-direction: column;
    gap: var(--atb-facets-row-gap, var(--atb-facets-gap));
}

.atb-facets__chips + .atb-facets__grid {
    margin-top: var(--atb-facets-row-gap, var(--atb-facets-gap));
}

.atb-facets__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--atb-facets-col-gap, var(--atb-facets-col-gap-set, var(--atb-facets-gap)));
}

.atb-facets__col {
    display: flex;
    flex-direction: column;
    gap: var(--atb-facets-gap);
    /* Variable publique d'abord (CSS perso), puis le réglage (`-set`, inline), puis
       le défaut : le CSS perso l'emporte sur l'atelier. */
    flex: 1 1 calc(var(--atb-facets-span, var(--atb-facets-span-set, 12)) / 12 * 100% - var(--atb-facets-col-gap, var(--atb-facets-col-gap-set, var(--atb-facets-gap))));
    /* Le mini de la colonne : c'est lui qui la fait passer sous la précédente. */
    min-inline-size: min(100%, var(--atb-facets-min, var(--atb-facets-min-set, 0px)));
}

/* « Idéalement » (réglage de la colonne dans l'atelier, cf. custom.css) : la colonne
   ne demande que son mini pour le passage à la ligne et prend en priorité la place
   libre ; dans sa ligne, les autres retirent leur part exacte des écarts. Pas dans
   la fenêtre mobile (colonnes empilées, `flex: none`, règle imprimée plus bas). */
.atb-facets__row > .atb-facets__col--ideal {
    flex: 1000 1 0%;
}

.atb-facets__row:not(.atb-facets__dialog .atb-facets__row):has(> .atb-facets__col--ideal) > .atb-facets__col:not(.atb-facets__col--ideal) {
    flex-basis: calc(var(--atb-facets-span, var(--atb-facets-span-set, 12)) / 12 * 100% - var(--atb-facets-col-gap, var(--atb-facets-col-gap-set, var(--atb-facets-gap))) * (12 - var(--atb-facets-span, var(--atb-facets-span-set, 12))) / 12);
}

.atb-facets__col--center {
    align-self: center;
}

.atb-facets__col--end {
    align-self: flex-end;
}

/* Une colonne étroite qui empile ses groupes : filets entre eux, comme la colonne latérale. */
.atb-facets--grid .atb-facets__col > .atb-facets__group:not([hidden]) ~ .atb-facets__group {
    padding-top: 1.25rem;
    border-top: 1px solid var(--atb-facets-border);
}

.atb-facets--grid .atb-facets__row .atb-facets__search input,
.atb-facets--grid .atb-facets__row .atb-facets__group select {
    max-width: none;
}

/* Cellule « nombre de résultats ». */
.atb-facets__total {
    margin: 0;
    font-weight: 600;
    color: var(--atb-facets-ink);
    font-variant-numeric: tabular-nums;
}

.atb-facets__reset--cell {
    align-self: flex-start;
    margin-inline-start: 0;
}

/* Les pastilles : aucun retrait de liste imposé par le thème. */
.atb-facets ul.atb-filters__list {
    margin: 0;
    padding: 0;
}

/* Légende flottante : sortie de la bordure du fieldset (sinon elle s'y loge,
   mange le filet du dessus et ajoute un espace fantôme). */
.atb-facets__title {
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--atb-facets-ink);
}

.atb-facets__title + * {
    clear: both;
}

.atb-facets__help {
    margin: -0.4rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--atb-facets-muted);
}

/* Colonne latérale : les groupes s'empilent, séparés d'un filet. */
.atb-facets--sidebar .atb-facets__form {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.atb-facets--sidebar .atb-facets__group {
    flex: none;
    width: 100%;
    padding-block: 1.25rem;
}

.atb-facets--sidebar .atb-facets__group:not([hidden]) ~ .atb-facets__group {
    border-top: 1px solid var(--atb-facets-border);
}

.atb-facets--sidebar .atb-facets__chips + .atb-facets__group,
.atb-facets--sidebar .atb-facets__group:first-of-type {
    padding-top: 0;
}

/* Groupe qui ne départage plus rien après un filtrage : il reste en place,
   grisé, pour ne pas faire sauter la mise en page (masqué au seul premier rendu). */
.atb-facets__group.is-idle {
    opacity: 0.55;
}

/* ------------------------------------------------------- cases et radios */

.atb-facets__options,
.atb-facets .atb-facets__options {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-width: 24rem; /* le compteur reste près du libellé dans une colonne large */
    margin: 0;
    padding: 0;
    list-style: none;
}

.atb-facets .atb-facets__option {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Aucune puce de thème devant les choix. */
.atb-facets .atb-facets__option::marker,
.atb-facets .atb-facets__option::before {
    content: none;
}

/* Arborescence : un filet guide les niveaux. */
.atb-facets .atb-facets__options .atb-facets__options {
    margin: 0.125rem 0 0.25rem 0.55rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--atb-facets-border);
}

.atb-facets__option label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.25rem;
    margin-inline: -0.5rem;
    padding: 0.35rem 0.5rem;
    line-height: 1.3;
    color: var(--atb-facets-ink);
    border-radius: var(--atb-facets-radius);
    cursor: pointer;
    transition: background-color var(--atb-transition, 0.2s ease);
}

.atb-facets__option label:hover {
    background-color: var(--atb-facets-hover);
}

.atb-facets__option label:has(input:checked) {
    font-weight: 600;
}

.atb-facets__option input[type="checkbox"],
.atb-facets__option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    background: var(--atb-facets-surface);
    border: 1.5px solid var(--atb-facets-border-strong);
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background-color var(--atb-transition, 0.2s ease), border-color var(--atb-transition, 0.2s ease);
}

.atb-facets__option input[type="radio"] {
    border-radius: 50%;
}

/* Coche : un angle tourné ; point : un disque. */
.atb-facets__option input[type="checkbox"]::before {
    content: "";
    width: 0.3rem;
    height: 0.6rem;
    margin-top: -0.12rem;
    border: solid var(--atb-facets-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.atb-facets__option input[type="radio"]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--atb-facets-accent);
    transform: scale(0);
    transition: transform 0.15s ease;
}

.atb-facets__option label:hover input:not(:checked):not([aria-disabled="true"]) {
    border-color: var(--atb-facets-accent);
}

.atb-facets__option input[type="checkbox"]:checked {
    background: var(--atb-facets-accent);
    border-color: var(--atb-facets-accent);
}

.atb-facets__option input[type="radio"]:checked {
    border-color: var(--atb-facets-accent);
}

.atb-facets__option input:checked::before {
    transform: rotate(45deg) scale(1);
}

.atb-facets__option input[type="radio"]:checked::before {
    transform: scale(1);
}

.atb-facets__option input:focus-visible {
    outline: 2px solid var(--atb-facets-accent);
    outline-offset: 2px;
}

/* Compteur : une pastille discrète, poussée à droite (dans une ligne) ou
   collée au libellé (dans un bouton). */
.atb-facets__count {
    flex: none;
    margin-inline-start: auto;
    min-width: 1.75rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--atb-facets-muted);
    background: color-mix(in srgb, var(--atb-facets-ink) 6%, transparent);
    border-radius: var(--atb-radius-pill, 100vw);
}

.atb-facets .atb-filters__btn .atb-facets__count {
    margin-inline-start: 0;
    min-width: 0;
    color: inherit;
    background: color-mix(in oklab, currentColor 12%, transparent);
}

.atb-facets .atb-filters__label {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Zéro résultat : effacé, non cliquable (reste lu). */
.atb-facets .is-zero > label,
.atb-facets .is-zero > .atb-filters__btn,
.atb-facets .atb-filters__btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.atb-facets .is-zero > label:hover {
    background: none;
}

/* ------------------------------------------------ recherche et liste de tri */

.atb-facets__search {
    position: relative;
}

/* La loupe : un masque, donc de la couleur du texte atténué. */
.atb-facets__search::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.9rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    background: var(--atb-facets-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.atb-facets__search input,
.atb-facets__group select {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 28rem;
    height: var(--atb-facets-field-height);
    margin: 0;
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--atb-facets-ink);
    background-color: var(--atb-facets-surface);
    border: 1px solid var(--atb-facets-border-strong);
    border-radius: var(--atb-facets-field-radius);
    box-shadow: none;
    transition: border-color var(--atb-transition, 0.2s ease), box-shadow var(--atb-transition, 0.2s ease);
}

.atb-facets__search input {
    padding-inline-start: 2.5rem;
}

.atb-facets__search input::placeholder {
    color: var(--atb-facets-muted);
    opacity: 1;
}

.atb-facets__group select {
    padding-inline-end: 2.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7993' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
}

.atb-facets__search input:hover,
.atb-facets__group select:hover {
    border-color: color-mix(in srgb, var(--atb-facets-ink) 55%, transparent);
}

.atb-facets__search input:focus,
.atb-facets__group select:focus {
    outline: none;
    border-color: var(--atb-facets-accent);
    box-shadow: var(--atb-facets-ring);
}

.atb-facets--sidebar .atb-facets__search input,
.atb-facets--sidebar .atb-facets__group select {
    max-width: none;
}

/* ------------------------------------------------ puces et liens d'action */

.atb-facets__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-basis: 100%;
}

.atb-facets--sidebar .atb-facets__chips {
    padding-bottom: 1.25rem;
}

.atb-facets__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem 0.25rem 0.8rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--atb-facets-ink);
    text-decoration: none;
    background: color-mix(in srgb, var(--atb-facets-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--atb-facets-accent) 30%, transparent);
    border-radius: var(--atb-radius-pill, 100vw);
    transition: border-color var(--atb-transition, 0.2s ease), background-color var(--atb-transition, 0.2s ease);
}

.atb-facets__chip > [aria-hidden="true"] {
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
    color: var(--atb-facets-muted);
}

.atb-facets__chip:hover,
.atb-facets__chip:focus-visible {
    color: var(--atb-facets-ink);
    background: color-mix(in srgb, var(--atb-facets-accent) 16%, transparent);
    border-color: var(--atb-facets-accent);
}

.atb-facets__chip:hover > [aria-hidden="true"] {
    color: var(--atb-facets-ink);
}

.atb-facets__chip:focus-visible,
.atb-facets__more:focus-visible,
.atb-facets__reset:focus-visible,
.atb-facets__restore:focus-visible {
    outline: 2px solid var(--atb-facets-accent);
    outline-offset: 2px;
}

.atb-facets__more,
.atb-facets__reset,
.atb-facets__restore {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--atb-facets-accent);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.atb-facets__more:hover,
.atb-facets__reset:hover,
.atb-facets__restore:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.atb-facets__more {
    margin-top: 0.5rem;
}

.atb-facets__more::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.2rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform var(--atb-transition, 0.2s ease);
}

.atb-facets__more[aria-expanded="true"]::after {
    margin-top: 0.2rem;
    transform: rotate(-135deg);
}

.atb-facets__reset,
.atb-facets__restore {
    margin-inline-start: 0.25rem;
}

/* « Voir plus » : les choix au-delà de la limite, masqués une fois le script là. */
.atb-facets.is-js .atb-facets__group:not(.is-expanded) .is-extra {
    display: none;
}

.atb-facets__submit {
    height: var(--atb-facets-field-height);
    padding: 0 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--atb-facets-on-accent);
    background: var(--atb-facets-accent);
    border: 0;
    border-radius: var(--atb-facets-field-radius);
    cursor: pointer;
}

.atb-facets__group[hidden],
.atb-facets__option[hidden],
.atb-facets__chips[hidden],
.atb-facets__chip[hidden],
.atb-facets__reset[hidden],
.atb-facets__restore[hidden],
.atb-facets__more[hidden],
.atb-filters__item[hidden] {
    display: none;
}

/* ------------------------------------------- état vide de la liste liée */

.atb-content-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--atb-neutral, #192743);
    background: var(--atb-surface-soft, color-mix(in srgb, var(--atb-neutral, #192743) 5%, transparent));
    border-radius: var(--atb-radius-lg, 1rem);
}

.atb-content-list__empty > p {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.atb-content-list__tips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.atb-content-list__drop {
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    background: var(--atb-light, #fff);
    border: 1px solid color-mix(in srgb, var(--atb-neutral, #192743) 22%, transparent);
    border-radius: var(--atb-radius-pill, 100vw);
    cursor: pointer;
    transition: border-color var(--atb-transition, 0.2s ease), color var(--atb-transition, 0.2s ease);
}

.atb-content-list__drop:hover,
.atb-content-list__drop:focus-visible {
    color: var(--atb-primary, #0099DD);
    border-color: var(--atb-primary, #0099DD);
}

/* Une diapositive ou un <li> qui porte l'état vide occupe toute la largeur. */
.atb-content-list__empty-slide,
.atb-content-list__empty-item {
    width: 100%;
    list-style: none;
    grid-column: 1 / -1;
}

/* ------------------------------------------------------------ transverse */

/* Doigt : des cibles de 44 px. */
@media (pointer: coarse) {
    .atb-facets__option label {
        min-height: 2.75rem;
    }

    .atb-facets__chip,
    .atb-facets__more,
    .atb-facets__reset,
    .atb-facets__restore,
    .atb-content-list__drop {
        min-height: 2.75rem;
    }
}

/* Texte pour lecteur d'écran, au cas où le thème ne le définit pas. */
.atb-facets .screen-reader-text,
.atb-content-list .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .atb-facets *,
    .atb-facets *::before,
    .atb-facets *::after,
    .atb-filters__btn {
        transition: none !important;
    }
}

/* -------------------------------------------------------- tiroir mobile
   Sous le seuil (largeur du bloc), le formulaire se range derrière un bouton ;
   il est déplacé dans la boîte de dialogue à l'ouverture. Sans script, rien
   de tout ça : les filtres restent dans la page. */
.atb-facets.is-drawer > .atb-facets__form {
    display: none;
}

.atb-facets__open {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--atb-facets-field-height);
    padding: 0 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--atb-facets-ink);
    background: var(--atb-facets-surface);
    border: 1px solid var(--atb-facets-border-strong);
    border-radius: var(--atb-facets-field-radius);
    cursor: pointer;
}

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

.atb-facets__open:hover,
.atb-facets__open:focus-visible {
    border-color: var(--atb-facets-accent);
}

.atb-facets__open:focus-visible {
    outline: none;
    box-shadow: var(--atb-facets-ring);
}

/* Icône « réglages » dessinée : trois traits de longueurs différentes. */
.atb-facets__open-icon {
    width: 1rem;
    height: .75rem;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 50% / 70% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 100% / 40% 2px no-repeat;
}

.atb-facets__open-count {
    min-width: 1.4rem;
    padding: 0 .4rem;
    font-size: .75rem;
    line-height: 1.4rem;
    text-align: center;
    color: var(--atb-facets-on-accent);
    background: var(--atb-facets-accent);
    border-radius: var(--atb-radius-pill, 100vw);
}

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

.atb-facets__dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(26rem, 92vw);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    color: var(--atb-facets-ink);
    background: var(--atb-facets-surface);
    border: 0;
    box-shadow: var(--atb-shadow-xl, 0 24px 56px rgba(0, 0, 0, .16));
}

.atb-facets__dialog[open] {
    display: flex;
    flex-direction: column;
    animation: atb-facets-drawer-in .25s ease;
}

.atb-facets__dialog::backdrop {
    background: color-mix(in srgb, var(--atb-neutral, #192743) 45%, transparent);
}

@keyframes atb-facets-drawer-in {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.atb-facets__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--atb-facets-border);
}

.atb-facets__dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--atb-facets-ink);
}

.atb-facets__dialog-close {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--atb-facets-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.atb-facets__dialog-close:hover,
.atb-facets__dialog-close:focus-visible {
    color: var(--atb-facets-ink);
    background: var(--atb-facets-hover);
}

.atb-facets__dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
}

/* Dans le tiroir, tout s'empile : ni barre ni colonnes côte à côte. */
.atb-facets__dialog .atb-facets__form,
.atb-facets__dialog .atb-facets__row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.atb-facets__dialog .atb-facets__col {
    flex: none;
    align-self: stretch;
    min-inline-size: 0;
}

.atb-facets__dialog .atb-facets__group,
.atb-facets__dialog .atb-facets__search input,
.atb-facets__dialog .atb-facets__group select {
    width: 100%;
    max-width: none;
}

.atb-facets__dialog-foot {
    display: flex;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--atb-facets-border);
    background: var(--atb-facets-surface);
}

.atb-facets__dialog-clear,
.atb-facets__dialog-apply {
    min-height: var(--atb-facets-field-height);
    padding: 0 1.1rem;
    font: inherit;
    font-weight: 600;
    border-radius: var(--atb-facets-field-radius);
    cursor: pointer;
}

.atb-facets__dialog-clear {
    color: var(--atb-facets-ink);
    background: none;
    border: 1px solid var(--atb-facets-border-strong);
}

.atb-facets__dialog-apply {
    flex: 1 1 auto;
    color: var(--atb-facets-on-accent);
    background: var(--atb-facets-accent);
    border: 1px solid var(--atb-facets-accent);
}

.atb-facets__dialog-clear:focus-visible,
.atb-facets__dialog-apply:focus-visible {
    outline: 2px solid var(--atb-facets-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .atb-facets__dialog[open] {
        animation: none;
    }
}

/* Ancre de la catégorie (`#cat-<parent>`) : sous l'en-tête collant. */
.atb-facets__anchor {
    display: block;
    height: 0;
    scroll-margin-top: var(--atb-header-offset, 100px);
}

/* ------------------------------------------------ icône, repli, en-tête */

.atb-facets__icon,
.atb-facets__heading-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-inline-end: .5rem;
    vertical-align: middle;
}

.atb-facets__icon .atgf-icon,
.atb-facets__icon svg,
.atb-facets__icon img {
    width: 1.1em;
    height: 1.1em;
}

/* Groupe repliable : le résumé porte l'icône, le titre et une flèche ; ses
   classes (at-btn…) viennent du réglage « Classes du résumé ». */
.atb-facets__summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    cursor: pointer;
    list-style: none;
}

.atb-facets__summary::-webkit-details-marker {
    display: none;
}

.atb-facets__summary:not([class*="at-btn"]) {
    padding: .5rem 0;
    font-weight: 700;
    color: var(--atb-facets-ink);
}

.atb-facets__summary .atb-facets__icon {
    margin-inline-end: 0;
}

.atb-facets__summary-label {
    flex: 1 1 auto;
    text-align: start;
}

.atb-facets__chevron {
    flex: none;
    width: .5rem;
    height: .5rem;
    margin-inline-end: .2rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: transform var(--atb-transition, .2s ease);
}

.atb-facets__group--accordion[open] > .atb-facets__summary .atb-facets__chevron {
    transform: rotate(45deg);
}

/* Icône de fin (réglage du filtre) : à la place de la flèche, un quart de tour
   à l'ouverture. L'icône de tête prend la couleur d'accent dans un bouton. */
.atb-facets__marker {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-inline-start: auto;
    transition: transform var(--atb-transition, .2s ease);
}

.atb-facets__group--accordion[open] > .atb-facets__summary .atb-facets__marker {
    transform: rotate(90deg);
}

.atb-facets__summary[class*="at-btn"] .atb-facets__icon {
    color: var(--atb-facets-accent);
}

.atb-facets__body {
    min-width: 0;
    margin: .75rem 0 0;
    padding: 0;
    border: 0;
}

.atb-facets__summary:focus-visible {
    outline: 2px solid var(--atb-facets-accent);
    outline-offset: 2px;
}

/* En-tête : la catégorie de la page, en capitales, son icône en couleur d'accent. */
.atb-facets__heading {
    display: flex;
    align-items: center;
    gap: var(--atb-space-4, 1rem);
}

.atb-facets__heading .atb-facets__heading-icon {
    margin-inline-end: 0;
    color: var(--atb-facets-accent);
}

.atb-facets__heading-title {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--atb-facets-heading, var(--atb-secondary, var(--atb-facets-ink)));
}

.atb-facets__heading-icon .atgf-icon,
.atb-facets__heading-icon svg,
.atb-facets__heading-icon img {
    width: 2.5rem;
    height: 2.5rem;
}

/* ------------------------------------------------ rendu « pastilles »
   Cases et radios en boutons arrondis, la case dessinée dans la pastille
   (réglage Rendu du filtre = Pastilles ; « Fabrication française » du catalogue).
   Ton : --atb-facets-pill (gris par défaut) ; cochée ou survolée, elle se remplit. */
.atb-facets .atb-facets__options--pill {
    gap: .5rem;
    max-width: none;
}

.atb-facets__options--pill .atb-facets__option label {
    --atb-facets-pill-tone: var(--atb-facets-pill, var(--atb-grey, #6C7993));
    gap: .75em;
    min-height: 0;
    margin: 0;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    color: var(--atb-facets-pill-tone);
    background: color-mix(in oklab, var(--atb-facets-pill-tone) 15%, var(--atb-light, #fff));
    border: 2px solid transparent;
    border-radius: var(--atb-radius-pill, 100vw);
    transition: background-color var(--atb-transition, .2s ease), color var(--atb-transition, .2s ease), scale var(--atb-transition, .2s ease);
}

.atb-facets__options--pill .atb-facets__option label:hover,
.atb-facets__options--pill .atb-facets__option label:has(input:checked) {
    scale: 1.02;
    color: color-mix(in oklab, var(--atb-facets-pill-tone) 10%, var(--atb-light, #fff));
    background: var(--atb-facets-pill-tone);
}

.atb-facets__options--pill .atb-facets__option label:has(input:checked) {
    font-weight: inherit;
}

.atb-facets__options--pill .atb-facets__option input[type="checkbox"],
.atb-facets__options--pill .atb-facets__option input[type="radio"],
.atb-facets__options--pill .atb-facets__option input:checked,
.atb-facets__options--pill .atb-facets__option label:hover input:not(:checked):not([aria-disabled="true"]) {
    width: 1rem;
    height: 1rem;
    background: transparent;
    border: 2px solid currentColor;
}

.atb-facets__options--pill .atb-facets__option input[type="checkbox"] {
    border-radius: 0;
}

.atb-facets__options--pill .atb-facets__option input[type="checkbox"]::before {
    border-color: currentColor;
}

.atb-facets__options--pill .atb-facets__option input[type="radio"]::before {
    background: currentColor;
}

/* ------------------------------------------------ panneau (atb-facets--panel)
   Classe du bloc : un fond teinté arrondi, des groupes sans filets, des boutons
   de repli neutres (le panneau du catalogue commons). Dans le tiroir mobile,
   le fond passe au corps de la boîte de dialogue. */
.atb-facets--panel {
    --atb-facets-gap: var(--atb-space-4, 1rem);
    --atb-facets-panel-bg: color-mix(in oklab, var(--atb-secondary, #3b3b3b) 5%, transparent);
    padding: 1.25rem 2rem;
    background: var(--atb-facets-panel-bg);
    border-radius: var(--atb-radius-lg, 1rem);
}

.atb-facets--panel.is-drawer {
    padding: 0;
    background: none;
}

.atb-facets--panel .atb-facets__dialog-body {
    background: var(--atb-facets-panel-bg);
}

.atb-facets--panel.atb-facets--grid .atb-facets__col > .atb-facets__group:not([hidden]) ~ .atb-facets__group,
.atb-facets--panel.atb-facets--sidebar .atb-facets__group:not([hidden]) ~ .atb-facets__group {
    padding-top: 0;
    border-top: 0;
}

.atb-facets--panel.atb-facets--sidebar .atb-facets__group {
    padding-block: 0;
}

.atb-facets--panel .atb-facets__summary[class*="at-btn"] {
    --at-btn-current: var(--atb-facets-button, var(--atb-grey, #6C7993));
}

.atb-facets--panel .atb-facets__body {
    margin-top: .6rem;
    padding-inline-start: 1rem;
}

.atb-facets--panel .atb-facets__reset--cell {
    margin-top: .5rem;
}