@layer components {
  /* Chaque groupe de filtres repliable */
  .views-exposed-form {
    details,
    fieldset {
      border-block-end: var(--bordure);
      display: block;
      width: 100%;
    }
  }

  .views-exposed-form summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding-block: var(--space-s);
    font-weight: var(--fw-semi);
    cursor: pointer;
    list-style: none; /* retire le triangle natif */

    &::-webkit-details-marker {
      display: none; /* idem pour Safari */
    }

    /* Chevron */
    &::after {
      content: "";
      flex-shrink: 0;
      inline-size: 0.5em;
      block-size: 0.5em;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform var(--duree-rapide) var(--easing);
    }

    &:hover {
      color: var(--couleur-mundi);
    }

    &:focus-visible {
      outline: 2px solid var(--couleur-focus);
      outline-offset: 2px;
    }
  }

  .views-exposed-form details[open] > summary::after {
    transform: rotate(-135deg);
  }

  /* Contenu du filtre */
  .views-exposed-form details .details-wrapper {
    padding-block-end: var(--space-m);
  }

  /* Ouverture animée (navigateurs récents, ignoré ailleurs) */
  .views-exposed-form details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--duree-normale) var(--easing),
                content-visibility var(--duree-normale) allow-discrete;
  }

  .views-exposed-form details[open]::details-content {
    block-size: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .views-exposed-form details::details-content,
    .views-exposed-form summary::after {
      transition: none;
    }
  }

  /* Chaque groupe de filtres (Classification, Couleurs, Sol…) */
  .views-exposed-form .fieldgroup {
    border: 0;
    padding: 0;
    margin: 0;
    border-block-end: var(--bordure);
    min-inline-size: 0; /* évite qu'un fieldset déborde de la sidebar */
  }

  .views-exposed-form legend {
    padding: 0;
    margin-block-end: var(--space-xs);
    padding-block: var(--space-s);
    font-weight: var(--fw-semi);
  }

  /* La liste des cases à cocher */
  .views-exposed-form .bef-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  /* Une ligne : case + libellé */
  .views-exposed-form .form-type-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    & input {
      flex-shrink: 0;
      inline-size: 1.1em;
      block-size: 1.1em;
      margin-block-start: 0.2em;
      accent-color: var(--couleur-mundi);
      cursor: pointer;
    }

    & label {
      font-size: var(--fs-s);
      line-height: var(--lh-titre);
      cursor: pointer;
    }

    /* Libellé de l'option cochée */
    &:has(input:checked) label {
      font-weight: var(--fw-semi);
      color: var(--couleur-mundi);
    }
  }

  /* Bouton Réinitialiser sur la ligne du titre du bloc.
     Le form et ses actions passent en display: contents pour que
     leurs enfants deviennent des cellules de la grille du bloc. */
  .block:has(> .bef-exposed-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    & > *,
    & .bef-exposed-form > * {
      grid-column: 1 / -1;
    }

    & > .block__title {
      grid-column: 1;
      grid-row: 1;
    }

    & .bef-exposed-form,
    & .bef-exposed-form > .form-actions {
      display: contents;
    }

    & .form-actions > [name="reset"] {
      grid-column: 2;
      grid-row: 1;
      margin-block-end: var(--space-m); /* aligné avec le titre et sa marge */
    }
  }
}