/*
 * Public lists with filters, loaded only by these pages:
 * - the filters panel of .page-annonces (Services/ads_list.html.twig) and .page-disponibilities
 *   (Services/_dispo_filters.html.twig);
 * - the rest of the disponibilities page (Services/disponibilities.html.twig): results line, cards, members' card.
 *
 * details.list-filters > summary.list-filters__toggle + .a-filters
 * Below 992px the filters are folded behind a full-width toggle button (with the number of active filters),
 * so that the results come first. From 992px the panel is always shown and the toggle hidden:
 * js/list_filters.js opens the <details>, and browsers that support ::details-content show it without waiting.
 * Without JavaScript the toggle stays usable everywhere.
 */
:is(.page-annonces, .page-disponibilities) .list-filters { min-width: 0; }
:is(.page-annonces, .page-disponibilities) .list-filters__toggle { width: 100%; list-style: none; cursor: pointer; }
:is(.page-annonces, .page-disponibilities) .list-filters__toggle::-webkit-details-marker { display: none; }
:is(.page-annonces, .page-disponibilities) .list-filters__chevron { margin-left: auto; transition: transform var(--a-ease); }
:is(.page-annonces, .page-disponibilities) .list-filters[open] .list-filters__chevron { transform: rotate(180deg); }
:is(.page-annonces, .page-disponibilities) .list-filters[open] > .list-filters__toggle { margin-bottom: 16px; }

@media (min-width: 992px) {
    .js :is(.page-annonces, .page-disponibilities) .list-filters__toggle { display: none; }
    @supports selector(::details-content) {
        :is(.page-annonces, .page-disponibilities) .list-filters__toggle { display: none; }
        :is(.page-annonces, .page-disponibilities) .list-filters::details-content { display: block; content-visibility: visible; }
    }
}

/* Disponibilities: the filters go to the list on change with JavaScript (js/list_filters.js), the button is for the others (N10) */
.js .page-disponibilities [data-list-filters-submit] { display: none; }

/* Disponibilities: results line, as .annonces-results__count on the ads list (css/Services/annonces.css) */
.page-disponibilities .dispo-results__count { margin: 0; color: var(--a-ink-2); font-family: var(--a-font-body); font-size: var(--a-fs-field); font-weight: 600; line-height: var(--a-lh); }
.page-disponibilities .dispo-results__count b { color: var(--a-ink); font-weight: 800; }

/* Disponibility card: short chips ("3 places", "Dès sept. 2026") on one line; a free-text period may wrap */
.page-disponibilities .dispo-card .a-chip { padding: 5px 12px; font-size: var(--a-fs-xs); }
.page-disponibilities .dispo-card :is(.dispo-card__places, .dispo-card__period--date) { white-space: nowrap; }

/* Members' card: its button fits in the 320px aside on one line */
.page-disponibilities .dispo-form-card .btn { --bs-btn-padding-x: 16px; white-space: nowrap; }

/* Below 992px (one column): filters toggle, results, then the members' card (T17) */
@media (max-width: 991.98px) {
    .page-disponibilities .dispo-aside { display: contents; }
    .page-disponibilities .dispo-form-card { order: 1; }
}