/* Sélecteur de course (vue analyse) */

.race-picker {
  margin-top: 24px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 18px;
  background: rgba(13, 27, 22, .92);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  position: sticky;
  top: calc(var(--topbar-h) + 64px);
  z-index: 9;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.race-picker .eyebrow { margin-bottom: 4px; }
.race-picker label { font-size: 17px; font-weight: 800; font-family: var(--font-display); }

.race-picker select {
  width: 100%;
  appearance: none;
  background-color: var(--panel-3);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 13px 42px 13px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lime) 50%),
    linear-gradient(135deg, var(--lime) 50%, transparent 50%);
  background-position: calc(100% - 19px) 19px, calc(100% - 13px) 19px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.race-picker select:hover { border-color: var(--lime); }

/* Rangée de chips : défilement horizontal avec fondu en bord */

.race-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 540px;
  padding: 2px;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent);
}

.race-nav::-webkit-scrollbar { height: 5px; }

.race-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 9px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}

.race-chip:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-1px); }

.race-chip.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-dark);
  box-shadow: var(--glow-lime);
}

.race-changing { animation: raceFade .35s ease; }

@keyframes raceFade {
  from { opacity: .3; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 850px) {
  .race-picker {
    grid-template-columns: 1fr;
    position: relative;
    top: auto;
  }
  .race-nav { max-width: none; }
}