/* races-list.css — Page /races/ */
:root {
  --bg-base:#061818;--bg-dark:#030d0d;--bg-card:rgba(255,255,255,0.04);--bg-card-hover:rgba(255,255,255,0.07);
  --gold:#d4a843;--gold-light:#e8c060;--gold-pale:#cac293;--gold-brand:#7f6846;
  --text-white:#ffffff;--text-muted:rgba(255,255,255,0.55);--text-faint:rgba(255,255,255,0.25);
  --border-subtle:rgba(255,255,255,0.07);--border-gold:rgba(212,168,67,0.18);
  --font-display:'DM Serif Display',Georgia,serif;--font-body:'DM Sans',-apple-system,sans-serif;
  --radius:10px;--t:0.2s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-white);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 15% 20%, #1a4040 0%, transparent 55%), radial-gradient(ellipse 50% 45% at 85% 80%, #163030 0%, transparent 52%)}
a{text-decoration:none;color:inherit}
.none{display:none!important}

/* WRAP */
.rl-wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* HEADER */
.hdr{padding:20px 0;border-bottom:0.5px solid var(--border-subtle);background:var(--bg-base);position:sticky;top:0;z-index:100}
.hdr__inner{display:flex;align-items:center}
.hdr__logo-full{display:block}

/* HERO */
.rl-hero{padding:56px 0 40px;border-bottom:0.5px solid var(--border-subtle)}
.rl-hero__eyebrow{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px}
.rl-hero__title{font-family:var(--font-display);font-size:clamp(36px,4vw,56px);font-weight:400;line-height:1.08;margin-bottom:12px}
.rl-hero__title em{font-style:italic;color:var(--gold)}
.rl-hero__sub{font-size:14px;color:var(--text-muted)}

/* ── BARRE DE FILTRES ───────────────────────────────────────────────────── */
.rl-filters-bar{
  position:sticky;top:95px;z-index:90;
  background:var(--bg-base);
  border-bottom:0.5px solid var(--border-subtle);
  padding:12px 0;
}
.rl-filters-bar .rl-wrap{display:flex;flex-direction:column;gap:10px}

/* Ligne search + toggle */
.rl-filters-row--search{display:flex;align-items:center;gap:10px}
.rl-search-wrap{position:relative;flex:1;max-width:320px}
.rl-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none}
.rl-search{
  width:100%;background:var(--bg-card);
  border:0.5px solid var(--border-subtle);border-radius:8px;
  padding:8px 12px 8px 34px;font-size:14px;
  color:var(--text-white);font-family:var(--font-body);
  transition:border-color var(--t);
}
.rl-search::placeholder{color:var(--text-faint)}
.rl-search:focus{outline:none;border-color:var(--border-gold)}

/* Bouton toggle filtres (mobile) */
.rl-filters-toggle{
  display:none;align-items:center;gap:6px;
  padding:7px 13px;border-radius:8px;
  border:0.5px solid var(--border-subtle);
  background:transparent;color:var(--text-muted);
  font-size:13px;font-family:var(--font-body);
  cursor:pointer;transition:all var(--t);white-space:nowrap;
}
.rl-filters-toggle:hover,.rl-filters-toggle.active{border-color:var(--border-gold);color:var(--text-white)}
.rl-filters-toggle__count{
  background:var(--gold);color:#061818;
  border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;
}

/* Ligne chips */
.rl-filters-row--chips{display:flex;flex-direction:column;gap:8px}

/* Bloc filtre (label + chips) */
.rl-filter-block{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rl-filter-label{
  font-size:10px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:0.09em;
  white-space:nowrap;margin-right:2px;
}
.rl-filter-group{display:flex;flex-wrap:wrap;gap:5px}

/* CHIPS */
.rl-chip{
  padding:5px 12px;border-radius:20px;
  font-size:12px;font-family:var(--font-body);
  border:0.5px solid var(--border-subtle);
  background:transparent;color:var(--text-muted);
  cursor:pointer;transition:all var(--t);white-space:nowrap;
}
.rl-chip:hover{border-color:var(--border-gold);color:var(--text-white)}
.rl-chip.active{background:rgba(212,168,67,0.12);border-color:var(--border-gold);color:var(--gold)}
.rl-chip--tag{border-style:dashed}
.rl-chip--tag.active{background:rgba(212,168,67,0.12);border-style:solid;border-color:var(--border-gold);color:var(--gold)}

/* COMPTEUR */
.rl-count{font-size:12px;color:var(--text-faint);padding:14px 0 0;min-height:34px}

/* ── GROUPES ────────────────────────────────────────────────────────────── */
.rl-groupe{margin-bottom:48px}
.rl-groupe__title{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--font-display);font-size:clamp(20px,2vw,26px);font-weight:400;
  margin-bottom:20px;padding-bottom:10px;
  border-bottom:0.5px solid var(--border-subtle);
}
.rl-groupe__num{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;font-family:var(--font-body);flex-shrink:0}
.rl-groupe.none{display:none!important}

/* ── GRILLE ─────────────────────────────────────────────────────────────── */
.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}

/* ── CARD ───────────────────────────────────────────────────────────────── */
.rl-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);border:0.5px solid var(--border-subtle);
  border-radius:var(--radius);overflow:hidden;
  transition:all var(--t);cursor:pointer;
}
.rl-card:hover{background:var(--bg-card-hover);border-color:var(--border-gold);transform:translateY(-2px)}
.rl-card.rl-card--hidden{display:none}

/* Card incomplète : légèrement atténuée */
.rl-card--incomplete{}
.rl-card--incomplete:hover{}

/* IMAGE */
.rl-card__img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(255,255,255,0.03)}
.rl-card__img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform 0.4s ease}
.rl-card__img--hero{object-position:center center}
.rl-card:hover .rl-card__img{transform:scale(1.04)}
.rl-card__placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:48px;color:var(--text-faint);
}

/* Overlay fiche incomplète */
.rl-card__incomplete-overlay{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  padding:5px 8px;gap:5px;
  background:rgba(3,13,13,0.75);
  backdrop-filter:blur(2px);
}
.rl-card__incomplete-overlay svg{color:#f87171;flex-shrink:0}
.rl-card__incomplete-overlay span{
  font-size:10px;color:#f87171;
  text-transform:uppercase;letter-spacing:0.08em;font-weight:600;
}

/* BODY */
.rl-card__body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.rl-card__nom{font-size:13px;font-weight:500;line-height:1.3;color:var(--text-white)}
.rl-card__meta{font-size:11px;color:var(--text-faint)}
.rl-card__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rl-card__tag{font-size:10px;padding:2px 6px;border-radius:4px;background:rgba(212,168,67,0.08);color:var(--gold-pale);border:0.5px solid rgba(212,168,67,0.15)}

/* ── ÉTAT VIDE ──────────────────────────────────────────────────────────── */
.rl-empty{text-align:center;padding:80px 24px;color:var(--text-muted);position:relative;z-index:1}
.rl-empty p{font-size:16px;margin-bottom:20px}
.rl-empty__reset{
  background:transparent;border:0.5px solid var(--border-gold);
  color:var(--gold);border-radius:8px;padding:10px 22px;
  font-size:14px;font-family:var(--font-body);cursor:pointer;transition:all var(--t);
}
.rl-empty__reset:hover{background:rgba(212,168,67,0.1)}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.rl-footer{border-top:0.5px solid var(--border-subtle);padding:32px 0;margin-top:48px}
.rl-footer .rl-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.rl-footer__text{font-size:12px;color:var(--text-faint)}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .rl-filters-toggle{display:flex}
  .rl-search-wrap{max-width:none;flex:1}

  /* Panel collapsé par défaut sur mobile */
  .rl-filters-row--chips{
    display:none;
    background:rgba(255,255,255,0.02);
    border:0.5px solid var(--border-subtle);
    border-radius:var(--radius);
    padding:14px;
    gap:12px;
  }
  .rl-filters-row--chips.open{display:flex}

  .rl-filter-block{flex-direction:column;align-items:flex-start}
  .rl-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .rl-hero{padding:32px 0 24px}
  
}

@media(max-width:400px){
  .rl-grid{grid-template-columns:repeat(2,1fr)}
}