/* Guide chaussures trail — style.css */

/* ── FILTRES ─────────────────────────────────────── */
.filters-section {
  display: flex; flex-direction: column; gap: 1.25rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--ink-1); border-radius: var(--r-xl);
  border: 1px solid var(--rim-1);
}
.filters-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.filter-group { display: flex; flex-direction: column; gap: .5rem; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
  font-family: var(--mono); font-size: .65rem; font-weight: 500;
  letter-spacing: .04em; white-space: nowrap;
  color: var(--dim); background: var(--ink-2);
  border: 1px solid var(--rim-1); border-radius: var(--r-pill);
  padding: 4px 11px; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover  { color: var(--txt); border-color: var(--rim-2); }
.chip.active { color: var(--lime); background: var(--lime-lo); border-color: rgba(200,240,90,.3); }

.filters-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .75rem; border-top: 1px solid var(--rim-1);
}
.results-count {
  font-family: var(--mono); font-size: .72rem; color: var(--dim);
}
.results-count span { color: var(--lime); font-weight: 600; }
.reset-btn {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); background: none;
  border: 1px solid var(--rim-1); border-radius: var(--r-pill);
  padding: 4px 12px; cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base);
}
.reset-btn:hover { color: var(--txt); border-color: var(--rim-2); }

/* ── GRILLE DE CHAUSSURES ───────────────────────── */
.shoes-grid {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rim-1); border-radius: var(--r-xl);
  overflow: hidden;
}

.shoe-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.125rem;
  background: var(--ink-1);
  text-decoration: none; color: inherit;
  position: relative;
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  animation: pm-up 200ms ease both;
}
.shoe-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--lime); opacity: 0; transition: opacity var(--t-fast);
}
.shoe-card:hover { background: var(--ink-2); }
.shoe-card:hover::before { opacity: 1; }

/* Picto marque */
.shoe-brand-mark {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r-md); background: var(--ink-2);
  border: 1px solid var(--rim-1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  color: var(--dim); text-align: center; line-height: 1.2;
}
.shoe-brand-mark.salomon  { background: rgba(0,160,80,.08);  color: #00A050; border-color: rgba(0,160,80,.2); }
.shoe-brand-mark.hoka     { background: rgba(0,168,225,.08); color: #00A8E1; border-color: rgba(0,168,225,.2); }
.shoe-brand-mark.altra    { background: rgba(255,90,0,.08);  color: #FF5A00; border-color: rgba(255,90,0,.2); }
.shoe-brand-mark.lasport  { background: rgba(220,20,60,.08); color: #DC143C; border-color: rgba(220,20,60,.2); }
.shoe-brand-mark.asics    { background: rgba(0,100,200,.08); color: #0064C8; border-color: rgba(0,100,200,.2); }
.shoe-brand-mark.brooks   { background: rgba(0,80,160,.08);  color: #0050A0; border-color: rgba(0,80,160,.2); }
.shoe-brand-mark.scott    { background: rgba(255,190,0,.08); color: #FFBE00; border-color: rgba(255,190,0,.2); }
.shoe-brand-mark.inov8    { background: rgba(255,120,0,.08); color: #FF7800; border-color: rgba(255,120,0,.2); }
.shoe-brand-mark.nike     { background: rgba(200,20,20,.08); color: #C81414; border-color: rgba(200,20,20,.2); }

.shoe-body { flex: 1; min-width: 0; }
.shoe-name {
  font-size: .875rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--txt); margin-bottom: .25rem;
  display: flex; align-items: center; gap: .375rem; flex-wrap: wrap;
}
.shoe-meta {
  display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: .3rem;
}
.shoe-tag {
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .04em; padding: 2px 7px;
  border-radius: 3px; white-space: nowrap;
}
.shoe-tag--terrain  { background: rgba(200,240,90,.08);  color: #C8F05A; }
.shoe-tag--drop     { background: rgba(56,189,248,.08);  color: #38BDF8; }
.shoe-tag--amorti   { background: rgba(167,139,250,.08); color: #A78BFA; }
.shoe-tag--usage    { background: rgba(249,115,22,.08);  color: #F97316; }
.shoe-desc {
  font-size: .72rem; color: var(--dim); font-weight: 300; line-height: 1.4;
}

.shoe-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .375rem; flex-shrink: 0;
}
.shoe-score {
  font-family: var(--mono); font-size: .65rem;
  color: var(--lime);
}
.shoe-score-dots { letter-spacing: 1px; }

/* Badge top pick */
.badge-top {
  font-family: var(--mono); font-size: .55rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--lime); background: var(--lime-lo);
  border: 1px solid rgba(200,240,90,.25);
  border-radius: var(--r-pill); padding: 1px 6px;
}

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  font-size: .875rem; color: var(--dim);
  background: var(--ink-1); border-radius: var(--r-xl);
  border: 1px dashed var(--rim-1);
}

/* Desktop */
@media (min-width: 900px) {
  .filters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .shoe-card { padding: 1rem 1.5rem; }
  .shoe-brand-mark { width: 50px; height: 50px; }
  .shoe-name { font-size: .95rem; }
}