/* =====================================================================
   Filtres à facettes /production#races — Patch V237b3h-58Zx-bp161
   HABILLAGE UNIQUEMENT. Les hooks JS (.js-facet / .js-facet-reset / .js-facet-empty)
   et le moteur Isotope (assets_production/js/main.js) sont INCHANGÉS.
   Chargé après main.css. Scopé sous #races. État actif via :has() (CSS pur, dégradation propre).
   ===================================================================== */

#races .facet-card{
  background:#ffffff; border:1px solid #e2ece5; border-radius:18px;
  padding:20px 22px; margin-bottom:28px;
  box-shadow:0 16px 38px -26px rgba(15,93,45,.32);
}

#races .facet-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:16px;
}
#races .facet-title{
  font-family:var(--heading-font); font-weight:700; font-size:18px; color:#0f5d2d;
  display:flex; align-items:center; gap:9px; margin:0;
}
#races .facet-title::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,#c79327,#16823f);
}

/* bouton "Toutes" = .js-facet-reset (la classe .active est pilotée par le JS du thème) */
#races .facet-reset{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:13px;
  padding:9px 18px; border-radius:30px;
  border:1px solid #cfe0d4; background:#ffffff; color:#0f5d2d;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
#races .facet-reset:hover{ transform:translateY(-2px); border-color:#16823f; }
#races .facet-reset.active{
  background:#0f5d2d; background:linear-gradient(135deg,#16823f,#0f5d2d);
  color:#ffffff; border-color:transparent;
  box-shadow:0 8px 18px -10px rgba(15,93,45,.7);
}

#races .facet-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr)); gap:14px;
}
#races .facet-field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#c79327; margin-bottom:6px;
}
#races .facet-field select{
  width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316823f'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 11px center;
  background-size:15px;
  border:1px solid #d8e4dc; border-radius:11px; padding:10px 34px 10px 13px;
  font-family:inherit; font-size:14px; color:#16261c; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
#races .facet-field select:hover{ border-color:#16823f; }
#races .facet-field select:focus{ outline:none; border-color:#16823f; box-shadow:0 0 0 3px rgba(22,130,63,.16); }

/* état actif : une valeur autre que "Indifférent" (value="*") est sélectionnée */
#races .facet-field select.js-facet:not(:has(option[value="*"]:checked)){
  border-color:#16823f; background-color:#f1faf4; color:#0f5d2d; font-weight:600;
}

@media (max-width:575px){
  #races .facet-card{ padding:16px; }
  #races .facet-grid{ grid-template-columns:1fr 1fr; }
}