/* =====================================================================
   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; }
}

/* bp509 — icones des facettes (memes que les tuiles "en un coup d'oeil" des fiches races) */
#races .facet-field label .facet-ico{
  color:#c79327; margin-right:4px; font-size:12px; width:15px; text-align:center;
}

/* bp510 — tri integre a la grille de facettes, DERNIER champ, couleur doree pour le
   distinguer (les facettes filtrent — vert ; le tri reordonne — or, comme les icones). */
#races .facet-field-sort label{ color:#a17417; }
#races .facet-field-sort select{
  width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#fdf9ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c79327'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 11px center;
  background-size:15px;
  border:1px solid #e3cf9a; border-radius:11px; padding:10px 34px 10px 13px;
  font-family:inherit; font-size:14px; color:#5b430e; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
#races .facet-field-sort select:hover{ border-color:#c79327; }
#races .facet-field-sort select:focus{ outline:none; border-color:#c79327; box-shadow:0 0 0 3px rgba(199,147,39,.18); }

/* bp519 — pastille trophee (race titree) : meme famille visuelle que .rp-eggs-pill (main.css l.1881,
   bas-gauche verte) mais HAUT-DROITE et doree ; parent deja en position:relative (pastille oeufs). */
/* bp912 — pastille « proposee par des revendeurs » : meme gabarit que la pastille trophee,
   posee a GAUCHE pour ne pas la recouvrir, en vert Elsanor. */
#races .rp-reseller-pill{
  position:absolute; top:10px; left:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px;
  background:rgba(15,93,45,.94); color:#fff; font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

#races .rp-trophy-pill{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px;
  background:rgba(199,147,39,.94); color:#fff; font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* bp1953 — PHOTO D'OEUF, quatrieme pastille de la vignette : bas-DROITE (la pastille oeufs/an
   est bas-gauche, trophee haut-droite, revendeur haut-gauche). Le PNG porte deja son detourage
   et son lisere (bp1952) ; le halo blanc le detache de la photo, comme l'ombre des autres. */
#races .rp-egg-pill{
  position:absolute; right:10px; bottom:10px;
  width:96px; height:96px; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  object-fit:cover; display:block;
}
/* bp1954 (retour MV sur bp1953) — +50 % (64 → 96 px, 72 → 108 sur mobile) et PLUS de halo blanc :
   le lisere noir incruste (bp1952) suffit a detacher l'oeuf de la photo ; l'ombre des pastilles reste. */
@media (max-width:575px){ #races .rp-egg-pill{ width:108px; height:108px; } }