/* Statistiques du club. Écrit mobile d'abord : le tableau des membres s'y lit
   en cartes empilées, et ne redevient un vrai tableau qu'en grand écran. */

.stats-totals { margin-bottom: 8px; }

.stats-podium { display: grid; gap: 10px; margin-top: 20px; }
.stats-podium-card {
  display: grid;
  gap: 9px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
}
.stats-podium-card strong { font-size: .88rem; }
.stats-podium-card b { color: var(--gold); font-size: 1.5rem; font-weight: 900; letter-spacing: -.04em; }
.stats-podium-card b small { margin-left: 5px; color: var(--muted); font-size: .42em; font-weight: 800; letter-spacing: 0; }
.stats-podium-card.is-empty { background: rgba(255, 255, 255, .02); }

/* ---- Avis likés ---- */

.stats-beloved { display: grid; gap: 10px; }
.stats-beloved-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(229, 9, 20, .5);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}
.stats-beloved-poster { display: block; overflow: hidden; border-radius: 5px; background: #252830; aspect-ratio: 2 / 3; }
.stats-beloved-poster img { width: 100%; height: 100%; object-fit: cover; }
.stats-beloved-poster .poster-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted-2); font-size: .8rem; font-weight: 900; }
.stats-beloved-body { min-width: 0; display: grid; gap: 7px; align-content: start; }
.stats-beloved-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.stats-beloved-head b { color: var(--gold); font-size: 1.05rem; font-weight: 900; letter-spacing: -.03em; }
.stats-beloved-head b small { color: var(--muted); font-size: .5em; font-weight: 800; }
.stats-beloved-body p { margin: 0; color: #d9d9dc; font-size: .74rem; line-height: 1.5; }
.stats-beloved-body p.muted-review { color: var(--muted-2); font-style: italic; }
.stats-beloved-foot { display: flex; justify-content: flex-end; }

/* ---- Tableau des membres ---- */

.stats-board { display: grid; gap: 9px; }
.stats-board-head { display: none; }
/* Un en-tête qui trie doit se voir cliquable sans crier plus fort que la donnée
   qu'il coiffe : il ne s'allume qu'au survol, et reste marqué une fois actif. */
.stats-board-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}
.stats-board-sort:hover { color: #fff; }
.stats-board-sort.is-active { color: var(--red-soft); }
.stats-board-sort i { font-size: .8em; font-style: normal; }
.stats-board-sort:focus-visible { outline: 2px solid rgba(255, 103, 111, .9); outline-offset: 3px; border-radius: 3px; }
.stats-board-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}
.stats-board-member { grid-column: 1 / -1; }
.stats-board-row > span:not(.stats-board-member) { display: grid; gap: 2px; }
.stats-board-row > span[data-label]::before {
  content: attr(data-label);
  color: var(--muted-2);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.stats-board-row b { color: #fff; font-size: .95rem; font-weight: 900; letter-spacing: -.02em; }
.stats-board-row small { color: var(--muted-2); font-size: .56rem; }
.stats-board-genre { overflow: hidden; font-size: .74rem !important; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Films clivants et consensuels ---- */

.stats-movie-list { display: grid; gap: 8px; }
.stats-movie-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.stats-movie-row:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.stats-movie-row:focus-visible { outline: 2px solid rgba(255, 103, 111, .9); outline-offset: 2px; }
.stats-movie-row.is-divisive { border-left: 3px solid rgba(229, 9, 20, .55); }
.stats-movie-row.is-consensual { border-left: 3px solid rgba(56, 201, 139, .55); }
.stats-movie-poster { display: block; overflow: hidden; border-radius: 5px; background: #252830; aspect-ratio: 2 / 3; }
.stats-movie-poster img { width: 100%; height: 100%; object-fit: cover; }
.stats-movie-poster .poster-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted-2); font-size: .8rem; font-weight: 900; }
.stats-movie-copy { min-width: 0; display: grid; gap: 3px; }
.stats-movie-copy strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.stats-movie-copy small { color: var(--muted); font-size: .58rem; }
.stats-movie-values { display: grid; justify-items: end; gap: 1px; }
.stats-movie-values b { color: var(--gold); font-size: 1.05rem; font-weight: 900; letter-spacing: -.03em; }
.stats-movie-values small { color: var(--muted-2); font-size: .55rem; font-weight: 800; }

/* ---- Duos ---- */

.stats-pairs { display: grid; gap: 10px; }
.stats-pair {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.stats-pair.is-close { border-color: rgba(56, 201, 139, .3); background: rgba(56, 201, 139, .07); }
.stats-pair.is-far { border-color: rgba(96, 150, 255, .3); background: rgba(96, 150, 255, .07); }
.stats-pair-members { display: flex; }
.stats-pair-members .member-avatar:last-child { margin-left: -12px; border: 2px solid var(--panel); }
.stats-pair strong { font-size: .88rem; }
.stats-pair b { color: #fff; font-size: 1.3rem; font-weight: 900; letter-spacing: -.03em; }
.stats-pair b small { margin-left: 5px; color: var(--muted); font-size: .42em; font-weight: 800; letter-spacing: 0; }
.stats-pair > span { color: var(--muted-2); font-size: .6rem; }

@media (min-width: 561px) {
  .stats-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-beloved { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-board-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 981px) {
  /* Huit titres : quatre colonnes les rangent en deux rangées pleines. */
  .stats-podium { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-board { gap: 0; }
  .stats-board-head, .stats-board-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, .7fr)) repeat(3, minmax(0, .95fr)) minmax(0, 1.3fr);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .stats-board-head { color: var(--muted-2); font-size: .54rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .stats-board-row:hover { background: rgba(255, 255, 255, .03); }
  .stats-board-member { grid-column: auto; }
  .stats-board-row > span[data-label]::before { content: none; }
  .stats-board-row > span:not(.stats-board-member) { gap: 1px; }
}