/* ═══════════════════════════════════════════════════════════════════
   Module catalogue-filtres — panneau de filtres
   ═══════════════════════════════════════════════════════════════════
   Tout ce qui est ici disparaît avec le module. Les seules classes
   empruntées au thème sont .mc-btn (bouton du système de design) et
   les jetons de theme.json.

   Le panneau est une colonne sur grand écran et un panneau plein écran
   en dessous de 900px, le point de rupture où le thème passe le corps
   du catalogue en une seule colonne.
   ═══════════════════════════════════════════════════════════════════ */

.mc-filtres {
  flex: 0 0 250px;
  position: sticky;
  top: calc(var(--mc-header-height, 70px) + 1rem);
  align-self: flex-start;
  max-height: calc(100dvh - var(--mc-header-height, 70px) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* En-tête et pied ne servent qu'au panneau plein écran. */
.mc-filtres__entete,
.mc-filtres__pied {
  display: none;
}

.mc-filtres__corps {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4);
}

/* ── Filtres actifs ──────────────────────────────────────────────── */

.mc-filtres__actifs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block-end: var(--wp--preset--spacing--3);
  border-block-end: 1px solid var(--wp--preset--color--gris-moyen);
}

.mc-filtres__puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mc-filtres__puce {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  transition: background-color var(--wp--custom--transition--base);
}

.mc-filtres__puce:hover {
  background-color: var(--wp--preset--color--corail);
  color: var(--wp--preset--color--blanc);
}

.mc-filtres__puce-croix {
  width: 14px;
  height: 14px;
}

.mc-filtres__reset {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--gris-texte);
  text-decoration: underline;
}

.mc-filtres__reset:hover {
  color: var(--wp--preset--color--corail);
}

/* ── Groupes ─────────────────────────────────────────────────────── */

.mc-filtres__groupe + .mc-filtres__groupe {
  padding-block-start: var(--wp--preset--spacing--4);
  border-block-start: 1px solid var(--wp--preset--color--gris-moyen);
}

.mc-filtres__groupe-titre {
  margin: 0 0 0.75rem;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 900;
  font-variation-settings: "wght" 900;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--typography--tracking-wide);
  color: var(--wp--preset--color--teal-sombre);
}

.mc-filtres__liste {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mc-filtres__sous-liste {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-block-start: 0.125rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--wp--preset--color--gris-moyen);
}

/* ── Liens de catégorie ──────────────────────────────────────────── */

.mc-filtres__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--wp--custom--radius--sm);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--teal-sombre);
  text-decoration: none;
  transition: background-color var(--wp--custom--transition--base);
}

.mc-filtres__lien:hover {
  background-color: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--teal-sombre);
}

.mc-filtres__lien--actif {
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--wp--preset--color--teal);
}

/* ── Options à cocher ────────────────────────────────────────────── */

.mc-filtres__choix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--wp--custom--radius--sm);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--teal-sombre);
  text-decoration: none;
  transition: background-color var(--wp--custom--transition--base);
}

.mc-filtres__choix:hover {
  background-color: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--teal-sombre);
}

.mc-filtres__choix:focus-visible {
  outline: 2px solid var(--wp--preset--color--corail);
  outline-offset: 2px;
}

.mc-filtres__case {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--wp--preset--color--gris-moyen);
  border-radius: 5px;
  background-color: var(--wp--preset--color--blanc);
  transition:
    background-color var(--wp--custom--transition--base),
    border-color var(--wp--custom--transition--base);
}

.mc-filtres__choix--coche .mc-filtres__case {
  border-color: var(--wp--preset--color--teal);
  background-color: var(--wp--preset--color--teal);
  /* Coche dessinée en dégradé : deux traits ne valent pas une image. */
  background-image:
    linear-gradient(45deg, transparent 45%, var(--wp--preset--color--blanc) 45%, var(--wp--preset--color--blanc) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 45%, var(--wp--preset--color--blanc) 45%, var(--wp--preset--color--blanc) 58%, transparent 58%);
  background-position: 1px 4px, -2px 4px;
  background-size: 9px 9px, 9px 9px;
  background-repeat: no-repeat;
}

.mc-filtres__nom {
  flex: 1;
  min-width: 0;
}

.mc-filtres__choix--coche .mc-filtres__nom {
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

.mc-filtres__compte {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--gris-texte);
  font-variant-numeric: tabular-nums;
}

/* ── Tailles en pastilles ────────────────────────────────────────── */

.mc-filtres__liste--pastilles {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mc-filtres__liste--pastilles .mc-filtres__choix {
  min-width: 2.75rem;
  justify-content: center;
  padding: 0.4375rem 0.5rem;
  border: 1.5px solid var(--wp--preset--color--gris-moyen);
  border-radius: var(--wp--custom--radius--sm);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

.mc-filtres__liste--pastilles .mc-filtres__choix--coche {
  border-color: var(--wp--preset--color--teal);
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--blanc);
}

/* La case et le compte n'ont pas leur place dans une pastille : la
   couleur dit l'état, et l'aria-label porte le nombre. */
.mc-filtres__liste--pastilles .mc-filtres__case,
.mc-filtres__liste--pastilles .mc-filtres__compte {
  display: none;
}

/* ── Bouton d'ouverture (petit écran) ────────────────────────────── */

.mc-filtres__ouvrir {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--wp--preset--color--gris-moyen);
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--teal-sombre);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  cursor: pointer;
}

.mc-filtres__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--wp--preset--color--corail);
  color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--xs);
}

/* ── Chargement ──────────────────────────────────────────────────── */

/* Posé par le script du module sur la zone de résultats du thème
   pendant le remplacement. C'est un attribut standard, pas une classe
   du thème détournée. */
[data-mc-catalogue-resultats][aria-busy="true"] {
  opacity: 0.45;
  transition: opacity 150ms ease;
  pointer-events: none;
}

/* ── Panneau plein écran ─────────────────────────────────────────── */

@media (max-width: 900px) {

  .mc-filtres__ouvrir {
    display: inline-flex;
  }

  .mc-filtres {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: none;
    padding: 0;
    background-color: var(--wp--preset--color--blanc);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform var(--wp--custom--transition--base),
      visibility var(--wp--custom--transition--base);
  }

  .mc-filtres--ouvert {
    transform: translateX(0);
    visibility: visible;
  }

  .mc-filtres__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--wp--preset--spacing--3);
    border-block-end: 1px solid var(--wp--preset--color--gris-moyen);
  }

  .mc-filtres__titre {
    margin: 0;
    font-size: var(--wp--preset--font-size--md);
    font-weight: 900;
    font-variation-settings: "wght" 900;
  }

  .mc-filtres__fermer {
    display: inline-flex;
    padding: 0.5rem;
    border: none;
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--gris-clair);
    color: var(--wp--preset--color--teal-sombre);
    cursor: pointer;
  }

  .mc-filtres__corps {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--wp--preset--spacing--3);
  }

  .mc-filtres__pied {
    display: block;
    padding: var(--wp--preset--spacing--3);
    border-block-start: 1px solid var(--wp--preset--color--gris-moyen);
  }

  .mc-filtres__valider {
    width: 100%;
    justify-content: center;
  }
}

/* Blocage du défilement de la page derrière le panneau. */
:where(html).mc-filtres-verrou {
  overflow: hidden;
}