/* ============================================
   CrecyPlage — Filtres
   ============================================ */

.filters {
    background: var(--ecume, #FEFCF6);
    border: 1px solid color-mix(in srgb, var(--sable-mouille, #B8956A) 18%, transparent);
    border-radius: var(--radius-md, 16px);
    padding: 1.25rem;
    position: sticky; top: 90px;
}
.filters__row {
    display: grid; gap: 0.6rem;
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
}
.filters__search input,
.filters__period select {
    width: 100%; padding: 0.7em 1em;
    border: 1px solid color-mix(in srgb, var(--sable-mouille, #B8956A) 25%, transparent);
    border-radius: 999px;
    font-family: inherit; font-size: 0.95rem;
    background: var(--sable-clair, #FBF3DD);
    color: var(--nuit, #073B4C);
}
.filters__search input:focus,
.filters__period select:focus {
    outline: none; border-color: var(--eau-canal, #5BA3C8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eau-canal, #5BA3C8) 25%, transparent);
}

.filters__group { border: 0; padding: 0; margin: 0 0 1.2rem; }
.filters__group legend {
    font-family: var(--ff-script, cursive); font-size: 1.1rem;
    color: var(--corail, #E76F51); padding: 0;
    margin-bottom: 0.4em;
}
.filters__chips { display: flex; flex-wrap: wrap; gap: 0.4em; }

.filter-chip {
    display: inline-flex; align-items: center;
    padding: 0.45em 0.95em;
    background: var(--sable-clair, #FBF3DD); color: var(--nuit, #073B4C);
    border: 1px solid color-mix(in srgb, var(--sable-mouille, #B8956A) 18%, transparent);
    border-radius: 999px;
    font-family: inherit; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; transition: all .15s ease;
    line-height: 1;
}
.filter-chip:hover {
    background: color-mix(in srgb, var(--eau-ciel, #BEDCEF) 60%, transparent);
    border-color: var(--eau-canal, #5BA3C8);
}
.filter-chip.is-active {
    background: var(--eau-profonde, #1E5A7B); color: var(--ecume, #FEFCF6);
    border-color: var(--eau-profonde, #1E5A7B);
}

.filters__actions {
    display: flex; justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--sable-mouille, #B8956A) 25%, transparent);
}

/* Loading state */
#crecy-results.is-loading {
    opacity: 0.5; pointer-events: none;
    transition: opacity .2s;
}

@media (max-width: 920px) {
    .filters { position: static; }
}