/**
 * FantasyLap — Page Classement (leaderboard)
 * Aesthetic: Racing telemetry / pit wall display
 * Mobile-first, dark F1 theme
 */

 @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;900&family=Barlow+Condensed:wght@400;500;600;700;900&display=swap');

 /* ─── Variables locales ─────────────────────────────────────────────── */
 .page-leaderboard {
     --lb-gold:    #f5c842;
     --lb-silver:  #b0b8c8;
     --lb-bronze:  #cd7f32;
     --lb-bg-card: rgba(255, 255, 255, 0.04);
     --lb-border:  rgba(255, 255, 255, 0.08);
     --lb-accent:  var(--accent, #e10600);
     --lb-font-display: 'Barlow Condensed', sans-serif;
     --lb-font-body:    'Exo 2', sans-serif;
     --lb-radius:  6px;
 }
 
 /* ─── Wrapper ───────────────────────────────────────────────────────── */
 .page-leaderboard {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 1rem 3rem;
     font-family: var(--font-body);
 }
 
 /* ─── Header ────────────────────────────────────────────────────────── */
 .lb-header {
     padding: 2rem 0 0;
 }
 
 .lb-header__title {
     font-family: var(--font-title-bold);
     font-size: clamp(1.65rem, 5vw, 2.3rem);
     font-weight: 900;
     letter-spacing: -0.01em;
     line-height: 1;
     color: var(--text, #fff);
     margin: 0 0 0.3rem;
 }
 
 .lb-header__subtitle {
     font-family: var(--font-body);
     font-size: clamp(0.9rem, 2.5vw, 1.1rem);
     font-weight: 500;
     color: var(--text-muted, #888);
     letter-spacing: 0.05em;
     margin: 0 0 1.25rem;
 }
 
 .lb-header__divider {
     height: 1px;
     background: linear-gradient(90deg, var(--lb-accent) 0%, rgba(225,6,0,0.2) 40%, transparent 100%);
     margin-bottom: 0;
 }
 
 /* ─── Contrôles ─────────────────────────────────────────────────────── */
 .lb-controls {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
     justify-content: space-between;
     padding: 1.25rem 0 1.5rem;
 }
 
 .lb-controls__season-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     font-family: var(--font-body);
     font-size: 0.82rem;
     font-weight: 600;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     text-decoration: none;
     padding: 0.55rem 1.1rem;
     border: 1px solid var(--lb-border);
     border-radius: var(--lb-radius);
     background: var(--lb-bg-card);
     color: var(--text-muted, #aaa);
     transition: color 0.18s, border-color 0.18s, background 0.18s;
     white-space: nowrap;
 }
 
 .lb-controls__season-btn:hover,
 .lb-controls__season-btn--active {
     color: var(--lb-accent);
     border-color: var(--lb-accent);
     background: rgba(225, 6, 0, 0.08);
 }
 
 .lb-controls__season-btn--active {
     box-shadow: 0 0 0 1px rgba(225,6,0,0.2);
 }
 
 .lb-controls__select-wrap {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     flex-wrap: wrap;
 }
 
 .lb-controls__select-label {
     font-family: var(--font-body);
     font-size: 0.78rem;
     font-weight: 500;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--text-muted, #888);
     white-space: nowrap;
 }
 
 .lb-select {
     padding: 0.55rem 2.2rem 0.55rem 0.85rem;
     min-width: 200px;
     font-family: var(--font-body);
     font-size: 0.88rem;
     font-weight: 500;
     background-color: var(--bg-card, #1e1e2e);
     color: var(--text, #eee);
     border: 1px solid var(--lb-border);
     border-radius: var(--lb-radius);
     cursor: pointer;
     -webkit-appearance: none;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23e10600' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 0.75rem center;
     transition: border-color 0.18s;
 }
 
 .lb-select:focus,
 .lb-select:hover {
     border-color: var(--lb-accent);
     outline: none;
 }
 
 /* ─── Podium (top 3) ────────────────────────────────────────────────── */
 .lb-podium {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 0.75rem;
     margin-bottom: 1.25rem;
 }
 
 .lb-podium__card {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 1.25rem 0.75rem 1rem;
     border-radius: var(--lb-radius);
     border: 1px solid var(--lb-border);
     background: var(--lb-bg-card);
     overflow: hidden;
     animation: lb-fade-up 0.5s ease both;
 }
 
 .lb-podium__card[data-pos="1"] {
     border-color: rgba(245, 200, 66, 0.35);
     background: linear-gradient(160deg, rgba(245,200,66,0.09) 0%, transparent 60%);
     animation-delay: 0.05s;
 }
 .lb-podium__card[data-pos="2"] {
     border-color: rgba(176, 184, 200, 0.3);
     background: linear-gradient(160deg, rgba(176,184,200,0.07) 0%, transparent 60%);
     animation-delay: 0.1s;
 }
 .lb-podium__card[data-pos="3"] {
     border-color: rgba(205, 127, 50, 0.3);
     background: linear-gradient(160deg, rgba(205,127,50,0.07) 0%, transparent 60%);
     animation-delay: 0.15s;
 }
 
 .lb-podium__pos {
     font-family: var(--font-body);
     font-size: 1.4rem;
     font-weight: 900;
     line-height: 1;
     margin-bottom: 0.55rem;
     letter-spacing: 0.02em;
 }
 .lb-podium__card[data-pos="1"] .lb-podium__pos { color: var(--lb-gold); }
 .lb-podium__card[data-pos="2"] .lb-podium__pos { color: var(--lb-silver); }
 .lb-podium__card[data-pos="3"] .lb-podium__pos { color: var(--lb-bronze); }
 
 /* Avatar générique (initiales) ou image */
 .lb-podium__avatar,
 .lb-podium__avatar-placeholder {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     margin-bottom: 0.65rem;
     flex-shrink: 0;
 }
 
 .lb-podium__avatar {
     object-fit: cover;
     border: 2px solid var(--lb-border);
 }
 .lb-podium__card[data-pos="1"] .lb-podium__avatar { border-color: var(--lb-gold); }
 .lb-podium__card[data-pos="2"] .lb-podium__avatar { border-color: var(--lb-silver); }
 .lb-podium__card[data-pos="3"] .lb-podium__avatar { border-color: var(--lb-bronze); }
 
 .lb-podium__avatar-placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-body);
     font-weight: 800;
     font-size: 1.1rem;
     border: 2px solid var(--lb-border);
     background: rgba(255,255,255,0.05);
     color: var(--text-muted, #aaa);
     text-transform: uppercase;
 }
 .lb-podium__card[data-pos="1"] .lb-podium__avatar-placeholder { border-color: var(--lb-gold); color: var(--lb-gold); background: rgba(245,200,66,0.1); }
 .lb-podium__card[data-pos="2"] .lb-podium__avatar-placeholder { border-color: var(--lb-silver); color: var(--lb-silver); background: rgba(176,184,200,0.1); }
 .lb-podium__card[data-pos="3"] .lb-podium__avatar-placeholder { border-color: var(--lb-bronze); color: var(--lb-bronze); background: rgba(205,127,50,0.1); }
 
 .lb-podium__name {
     font-family: var(--font-medium);
     font-size: clamp(0.8rem, 2vw, 1rem);
     font-weight: 700;
     letter-spacing: 0.02em;
     color: var(--text, #eee);
     margin-bottom: 0.3rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
     text-decoration: none;
     display: block;
 }
 .lb-podium__name:hover { color: var(--lb-accent); }
 
 .lb-podium__points {
     font-family: var(--font-title-bold);
     font-size: clamp(1.5rem, 3vw, 1.8rem);
     font-weight: 900;
     color: var(--color-gold);
     line-height: 1;
 }
 
 .lb-podium__pts-label {
     font-size: 0.62rem;
     font-weight: 600;
     color: var(--text-muted, #888);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-top: 0.1rem;
 }
 
 .lb-podium__compare {
     display: inline-flex;
     align-items: center;
     margin-top: 0.75rem;
     font-family: var(--font-body);
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 0.28rem 0.6rem;
     border: 1px solid var(--lb-border);
     border-radius: 3px;
     color: var(--text-muted, #888);
     text-decoration: none;
     transition: color 0.15s, border-color 0.15s;
 }
 .lb-podium__compare:hover { color: var(--lb-accent); border-color: var(--lb-accent); }
 
 /* ─── Liste (rang 4+) ────────────────────────────────────────────────── */
 .lb-list {
     background: var(--lb-bg-card);
     border: 1px solid var(--lb-border);
     border-radius: var(--lb-radius);
     overflow: hidden;
 }
 
 .lb-list__header {
     display: grid;
     grid-template-columns: 52px 1fr 80px;
     padding: 0.45rem 1rem;
     background: rgba(255,255,255,0.03);
     border-bottom: 1px solid var(--lb-border);
 }
 
 .lb-list__header-cell {
     font-family: var(--font-body);
     font-size: 0.63rem;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--text-muted, #888);
 }
 .lb-list__header-cell:last-child { text-align: right; }
 
 .lb-list__row {
     display: grid;
     grid-template-columns: 52px 1fr 80px;
     align-items: center;
     min-height: 52px;
     padding: 0.6rem 1rem;
     border-bottom: 1px solid var(--lb-border);
     transition: background 0.14s;
     animation: lb-fade-up 0.4s ease both;
 }
 .lb-list__row:last-child { border-bottom: none; }
 .lb-list__row:hover { background: rgba(255,255,255,0.04); }
 
 /* Stagger */
 .lb-list__row:nth-child(1)  { animation-delay: 0.20s; }
 .lb-list__row:nth-child(2)  { animation-delay: 0.23s; }
 .lb-list__row:nth-child(3)  { animation-delay: 0.26s; }
 .lb-list__row:nth-child(4)  { animation-delay: 0.29s; }
 .lb-list__row:nth-child(5)  { animation-delay: 0.32s; }
 .lb-list__row:nth-child(6)  { animation-delay: 0.35s; }
 .lb-list__row:nth-child(7)  { animation-delay: 0.38s; }
 .lb-list__row:nth-child(8)  { animation-delay: 0.41s; }
 .lb-list__row:nth-child(n+9) { animation-delay: 0.44s; }
 
 .lb-list__rank {
     font-family: var(--font-body);
     font-size: 1rem;
     font-weight: 700;
     color: var(--text-muted, #666);
     text-align: right;
     padding-right: 0.85rem;
     font-variant-numeric: tabular-nums;
 }
 
 .lb-list__player {
     display: flex;
     align-items: center;
     gap: 0.65rem;
     min-width: 0;
 }
 
 .lb-list__avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
     border: 1px solid var(--lb-border);
 }
 
 .lb-list__avatar-placeholder {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-body);
     font-weight: 700;
     font-size: 0.8rem;
     flex-shrink: 0;
     background: rgba(255,255,255,0.05);
     color: var(--text-muted, #aaa);
     border: 1px solid var(--lb-border);
     text-transform: uppercase;
 }
 
 .lb-list__info {
     display: flex;
     flex-direction: column;
     min-width: 0;
 }
 
 .lb-list__name {
     font-family: var(--font-body);
     font-size: 0.92rem;
     font-weight: 600;
     color: var(--text, #eee);
     text-decoration: none;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     transition: color 0.15s;
 }
 .lb-list__name:hover { color: var(--lb-accent); }
 
 .lb-list__compare {
     font-size: 0.65rem;
     font-family: var(--font-body);
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--text-muted, #666);
     text-decoration: none;
     margin-top: 0.15rem;
     transition: color 0.14s;
 }
 .lb-list__compare:hover { color: var(--lb-accent); }
 
 .lb-list__points {
     text-align: right;
     font-family: var(--font-body);
     font-size: 0.97rem;
     font-weight: 700;
     font-variant-numeric: tabular-nums;
     color: var(--text, #eee);
 }
 
 .lb-list__pts-label {
     display: block;
     font-size: 0.6rem;
     font-weight: 600;
     color: var(--text-muted, #888);
     letter-spacing: 0.09em;
     text-transform: uppercase;
     margin-top: 0.1rem;
 }
 
 /* ─── État vide ──────────────────────────────────────────────────────── */
 .lb-empty {
     text-align: center;
     padding: 3rem 1.5rem;
     border: 1px dashed var(--lb-border);
     border-radius: var(--lb-radius);
     color: var(--text-muted, #888);
 }
 .lb-empty__icon {
     font-size: 2rem;
     margin-bottom: 0.75rem;
     opacity: 0.45;
     display: block;
 }
 .lb-empty p { margin: 0.5rem 0; font-size: 0.9rem; }
 
 /* ─── Footer ─────────────────────────────────────────────────────────── */
 .lb-footer {
     margin-top: 1.75rem;
     display: flex;
     justify-content: flex-start;
 }
 
 /* ─── Bannière test ──────────────────────────────────────────────────── */
 .lb-test-banner {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.9rem;
     margin-bottom: 1rem;
     background: var(--lb-gold);
     color: #111;
     font-family: var(--font-body);
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     border-radius: var(--lb-radius);
 }
 
 /* ─── Animation ──────────────────────────────────────────────────────── */
 @keyframes lb-fade-up {
     from { opacity: 0; transform: translateY(8px); }
     to   { opacity: 1; transform: translateY(0); }
 }
 
 /* ─── Responsive ─────────────────────────────────────────────────────── */
 @media (max-width: 520px) {
     .lb-podium { gap: 0.5rem; }
     .lb-podium__card { padding: 1rem 0.5rem 0.8rem; }
     .lb-podium__avatar,
     .lb-podium__avatar-placeholder { width: 40px; height: 40px; }
     .lb-podium__compare { display: none; }
 
     .lb-controls {
         flex-direction: column;
         align-items: stretch;
     }
     .lb-controls__season-btn { justify-content: center; }
     .lb-controls__select-wrap { flex-direction: column; align-items: flex-start; }
     .lb-select { min-width: 0; width: 100%; }
 
     .lb-list__compare { display: none; }
 }
 
 @media (max-width: 360px) {
     .lb-list__header,
     .lb-list__row {
         grid-template-columns: 38px 1fr 64px;
         padding: 0.5rem 0.65rem;
     }
 }