/* ranking.css — Page "Leaderboard" publique.
   Reprend la palette et la typographie de landing.css pour rester cohérent
   avec l'accueil : fond crème, encre sombre, accents or, police Fraunces. */

:root {
  --rk-bg: #F8F4EC;
  --rk-surface: #FFFDF8;
  --rk-ink: #211D18;
  --rk-muted: #6F675C;
  --rk-line: #E9E1D3;
  --rk-gold: #C79A30;
  --rk-gold-soft: #D8AD55;
  --rk-silver: #9AA3AC;
  --rk-bronze: #B5835A;
  --rk-navy: #263544;
  --rk-radius: 10px;
  --rk-seric: 'Fraunces', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--rk-bg);
  color: var(--rk-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

a { color: inherit; }

::selection { background: var(--rk-gold); color: #FFFDF8; }

.rk-main {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 88px) clamp(20px, 5vw, 56px) 80px;
}

/* ---------- En-tête de page ---------- */

.rk-hero {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.rk-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border: 1px solid var(--rk-gold-soft);
  border-radius: 999px;
  color: var(--rk-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rk-title {
  margin: 0;
  font-family: var(--rk-seric);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.rk-subtitle {
  margin: 16px 0 0;
  color: var(--rk-muted);
  font-size: 1.05rem;
}

/* ---------- Podium (top 3) ---------- */

.rk-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 16px;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.rk-podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px 22px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rk-podium-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(24, 40, 58, 0.08);
}

.rk-podium-card--1 { border-color: var(--rk-gold); padding-top: 44px; }
.rk-podium-card--2 { padding-top: 30px; }
.rk-podium-card--3 { padding-top: 24px; }

.rk-medal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(24, 40, 58, 0.16);
}

.rk-podium-card--1 .rk-medal { background: var(--rk-gold); }
.rk-podium-card--2 .rk-medal { background: var(--rk-silver); }
.rk-podium-card--3 .rk-medal { background: var(--rk-bronze); }

.rk-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--rk-seric);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--rk-ink);
  background: #F1EADB;
  border: 1px solid var(--rk-line);
}

.rk-podium-card--1 .rk-avatar {
  width: 74px;
  height: 74px;
  background: #FBF0D9;
  border-color: var(--rk-gold-soft);
}

.rk-podium-name {
  margin: 0;
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rk-podium-points {
  margin: 0;
  color: var(--rk-gold);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.rk-podium-label {
  color: var(--rk-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Liste complète ---------- */

.rk-list {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  overflow: hidden;
}

.rk-list-head {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rk-line);
  color: var(--rk-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rk-list-head .rk-list-points { text-align: right; }

.rk-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rk-line);
  transition: background 0.15s ease;
}

.rk-row:last-child { border-bottom: 0; }

.rk-row:hover { background: #FBF6EC; }

.rk-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--rk-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.rk-row--top .rk-rank {
  color: #fff;
  background: var(--rk-navy);
}

.rk-row--gold .rk-rank { background: var(--rk-gold); }
.rk-row--silver .rk-rank { background: var(--rk-silver); }
.rk-row--bronze .rk-rank { background: var(--rk-bronze); }

.rk-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rk-user-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--rk-seric);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rk-ink);
  background: #F1EADB;
}

.rk-user-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rk-points {
  color: var(--rk-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rk-points strong {
  color: var(--rk-ink);
  font-weight: 700;
}

/* ---------- États ---------- */

.rk-empty,
.rk-error {
  margin: 0;
  padding: 48px 20px;
  text-align: center;
  color: var(--rk-muted);
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
}

.rk-error { color: #B42318; }

/* ---------- Pied ---------- */

.rk-footer {
  text-align: center;
  margin-top: 40px;
}

.rk-back {
  display: inline-block;
  color: var(--rk-gold);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.rk-back:hover { border-color: var(--rk-gold); }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .rk-podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .rk-podium-card--1 { order: -1; padding-top: 28px; }
  .rk-podium-card--2 { padding-top: 24px; }
  .rk-podium-card--3 { padding-top: 24px; }
  .rk-list-head,
  .rk-row { grid-template-columns: 48px 1fr auto; gap: 12px; padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rk-podium-card { transition: none; }
}