/* Archive /circuits/ : filtres dynamiques et défilement continu (2026-10-19) */
.circuits-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 18px;
  align-items: end;
  margin: 40px 0 0;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.circuits-filtres__champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Phrase d'orientation et aide du filtre principal (2026-10-20) */
.circuits-filtres__intro {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}
.circuits-filtres__intro h2 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-ink);
}
.circuits-filtres__intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-muted);
}
/* [hidden] doit l'emporter sur le style global des boutons (display:inline-block, base.css) */
form.circuits-filtres [data-circuits-effacer][hidden] { display: none; }
.circuits-filtres__aide {
  font-size: 12px;
  font-style: normal;
  color: var(--color-muted);
  margin-top: -4px;
}
.circuits-filtres__champ--principal span { color: var(--color-primary); }
.circuits-filtres__champ span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-muted);
}
form.circuits-filtres .circuits-filtres__champ select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-neutral-dark);   /* --color-primary-border est transparent (CSS additionnel du site) */
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  height: auto;
  cursor: pointer;
}
form.circuits-filtres .circuits-filtres__champ select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.circuits-filtres__bilan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 42px;
  font-weight: 700;
  color: var(--color-ink);
}
/* Spécificité supérieure au style global button:not(...) de base.css */
form.circuits-filtres button.circuits-filtres__effacer,
p.circuits-vide button[data-circuits-effacer] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.circuits-vide { margin: 40px 0; text-align: center; color: var(--color-muted); }

/* Cartes écartées par un filtre ou pas encore révélées : [hidden] doit l'emporter sur display:flex */
.circuits-grid .circuit-card[hidden] { display: none; }

/* Apparition des cartes révélées par lots */
.circuits-grid .circuit-card.is-apparue { animation: circuit-apparition .45s ease both; }
@keyframes circuit-apparition {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .circuits-grid .circuit-card.is-apparue { animation: none; }
}
.circuits-suite { height: 1px; }

@media (max-width: 600px) {
  .circuits-filtres { grid-template-columns: 1fr 1fr; padding: 16px; margin-top: 24px; }
  .circuits-filtres__bilan { grid-column: 1 / -1; }
}