/* Filtres ——————————————————————— */
.filters {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-end: var(--space-12);
  margin-inline-start: var(--space-12);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;

  @media (width > 720px) {
    width: auto;
  }
}

.filter label {
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Cadre visuel pour un .section-heading contenant des filtres */
.section-heading--framed {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin: var(--space-8) var(--space-12);
  padding-block: var(--space-12) 0;
}

/* Filtre groupé : un label partagé au-dessus de plusieurs selects côte à côte */
.filter__selects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.filter--group select {
  width: auto;
}

.filter select {
  width: 100%;
  appearance: none;
  background-color: var(--color-clear-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230A1952' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--space-8) center;
  background-repeat: no-repeat;
  background-size: 16px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--ff-primary);
  font-size: var(--fs-small);
  padding: var(--space-4) var(--space-32) var(--space-4) var(--space-8);
}