:root {
    --bg-deep: #050505;
    --bg-panel: #111111;
    --bg-glass: rgba(20, 20, 20, 0.9);
    --primary-orange: #ff6600;
    --primary-glow: rgba(255, 102, 0, 0.5);
    --text-main: #ffffff;
    --text-muted: #888888;
    --border-subtle: #333333;
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --sidebar-width: 260px;
    --mobile-nav-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    /* Empêche le scroll horizontal du body */
    display: flex;
    min-height: 100vh;
}

/* Texture de fond */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* --- SIDEBAR (DESKTOP) --- */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-subtle);
    padding: 30px 20px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--primary-orange);
    margin-bottom: 30px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 15px var(--primary-glow);
}

.group-title {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.nav-item {
    display: flex;
    align-items: center;
    color: var(--text-main);
    text-decoration: none;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(255, 102, 0, 0.1);
    color: var(--primary-orange);
}

.nav-item i {
    width: 25px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 0 8px #ff0000;
    animation: pulse 2s infinite;
}

/* ── Wallet Connect Widget ─────────────────────────────────────────── */
.wallet-connect-widget {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    position: relative;
}

/* -- Main button -- */
.wallet-main-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,102,0,.08);
    border: 1px solid rgba(255,102,0,.28);
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    color: #fff;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .03em;
    transition: background .18s, border-color .18s, box-shadow .18s;
    text-align: left;
}
.wallet-main-btn:hover {
    background: rgba(255,102,0,.15);
    border-color: rgba(255,102,0,.55);
    box-shadow: 0 0 14px rgba(255,102,0,.15);
}
.wallet-main-btn.wlt-connected {
    background: rgba(0,255,136,.06);
    border-color: rgba(0,255,136,.22);
}
.wallet-main-btn.wlt-connected:hover {
    background: rgba(0,255,136,.12);
    border-color: rgba(0,255,136,.45);
    box-shadow: 0 0 12px rgba(0,255,136,.12);
}

/* Solana logo pulse */
.wlt-sol-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg,#9945FF,#14F195);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-display);
}
.wlt-sol-icon.wlt-pulse {
    animation: wltPulse 1.5s ease-in-out infinite;
}
@keyframes wltPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(153,69,255,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(153,69,255,0); }
}

/* Text block */
.wlt-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wlt-label {
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.wlt-sub {
    font-size: .75rem;
    color: #14F195;
    font-family: var(--font-display);
    letter-spacing: .04em;
}

/* Chevron */
.wlt-chevron {
    font-size: .75rem;
    color: #555;
    transition: transform .2s;
    flex-shrink: 0;
}
.wlt-chevron.open { transform: rotate(180deg); }

/* Status dot */
.wlt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wlt-dot.disconnected { background: #555; }
.wlt-dot.connected    { background: #14F195; box-shadow: 0 0 6px #14F195; }
.wlt-dot.connecting   { background: #ff6600; animation: wltPulse 1s infinite; }

/* -- Dropdown -- */
.wallet-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 -8px 32px rgba(0,0,0,.6);
    z-index: 200;
    animation: wltDropIn .18s ease;
}
@keyframes wltDropIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

.wallet-dropdown-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #1a1a1a;
}
.wlt-addr-full {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    color: #888;
    word-break: break-all;
    margin-bottom: 6px;
    line-height: 1.5;
}
.wlt-balance-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
}
.wlt-balance-sol { color: #14F195; }
.wlt-balance-label { font-size: .7rem; color: #555; font-family: var(--font-body); }

.wallet-dropdown-actions { padding: 6px 0; }
.wlt-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: #aaa;
    font-family: var(--font-body);
    font-size: .87rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
}
.wlt-action:hover { background: rgba(255,255,255,.04); color: #fff; }
.wlt-action i { width: 16px; text-align: center; font-size: .85rem; }
.wlt-action.danger:hover { background: rgba(214,48,49,.08); color: #ff4444; }

.wlt-divider { height: 1px; background: #1a1a1a; margin: 4px 0; }

/* wallet select list (shown before connect) */
.wallet-picker {
    padding: 10px 0;
}
.wallet-picker-title {
    padding: 8px 16px 6px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #444;
}
.wallet-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: #ccc;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
}
.wallet-option:hover { background: rgba(255,255,255,.05); color: #fff; }
.wallet-option .wo-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
}
.wallet-option .wo-badge {
    margin-left: auto;
    font-size: .68rem;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(20,241,149,.12);
    color: #14F195;
    font-weight: 700;
}
.wallet-option .wo-badge.not-installed {
    background: rgba(255,255,255,.06);
    color: #555;
}

/* Copy toast */
.wlt-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #111;
    border: 1px solid #14F195;
    color: #14F195;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: .82rem;
    font-family: var(--font-body);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 9999;
}
.wlt-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- MAIN CONTENT --- */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-width: 0;
    /* CRITIQUE: empêche le flex item de dépasser l'écran */
    padding: 30px 50px;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    padding-bottom: 100px;
}

/* Header */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 15px;
}

.breadcrumbs {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highlight {
    color: var(--primary-orange);
    font-weight: bold;
}

.search-bar {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    width: 300px;
}

.search-bar input {
    background: transparent;
    border: none;
    color: white;
    margin-left: 10px;
    outline: none;
    width: 100%;
}

/* Hero Section */
.hero-section {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

.hero-card {
    flex: 2;
    background: linear-gradient(135deg, #2a1a0a 0%, #111 100%);
    border: 1px solid var(--primary-orange);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.hero-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--primary-orange);
    box-shadow: 0 0 20px var(--primary-orange);
}

.hero-card h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin: 10px 0;
    line-height: 1.1;
}

.status-badge {
    background: #ff0000;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Next race badge */
.status-badge--next {
    background: rgba(255, 107, 0, .15);
    border: 1px solid rgba(255, 107, 0, .5);
    color: #FF8C00;
}

/* Off season badge */
.status-badge--idle {
    background: rgba(255, 255, 255, .06);
    border: 1px solid #333;
    color: #555;
}

/* Countdown timer */
.countdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 52px;
}

.countdown-unit span {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.countdown-unit small {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #555;
    margin-top: 4px;
}

.countdown-sep {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #FF6B00;
    margin-bottom: 14px;
}

/* Hero card next-race accent color */
.hero-card--next {
    border-color: rgba(255, 107, 0, .4);
    background: linear-gradient(135deg, #1a0e00 0%, #111 100%);
}

.hero-card--next::after {
    background: #FF6B00;
    box-shadow: 0 0 20px #FF6B0066;
}


.progress-bar-container {
    width: 100%;
    height: 6px;
    background: #333;
    margin-top: 20px;
    border-radius: 3px;
}

.progress-bar {
    height: 100%;
    background: var(--primary-orange);
    border-radius: 3px;
    position: relative;
}

.hero-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item {
    background: var(--bg-panel);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-item .value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--primary-orange);
}

/* Drivers Carousel */
.drivers-section {
    margin-bottom: 60px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.controls {
    display: flex;
    gap: 10px;
}

.nav-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.panini-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 5px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.panini-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar Chrome */

.panini-card {
    flex: 0 0 auto;
    width: 200px;
    height: 280px;
    background: radial-gradient(circle at 50% 30%, #333 0%, #000 80%);
    border: 1px solid #444;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: white;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.panini-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-orange);
}

.panini-number {
    position: absolute;
    top: 10px;
    left: 15px;
    font-family: var(--font-display);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.1);
}

.panini-img {
    width: 100%;
    height: 70%;
    object-fit: cover;
    object-position: top;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.panini-info {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: -30px;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.panini-name {
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
}

.panini-team {
    color: var(--primary-orange);
    font-size: 0.7rem;
    display: block;
}

.panini-odds {
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.odds-value {
    color: var(--primary-orange);
    font-weight: bold;
}

/* Markets Grid */
.markets-grid {
    display: grid;
    /* Responsive Grid : Minimum 300px, sinon prend tout l'espace */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.market-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
}

.market-question {
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.binary-options {
    display: flex;
    gap: 10px;
}

.btn-option {
    flex: 1;
    background: #222;
    border: 1px solid #444;
    color: white;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.btn-option.yes:hover {
    background: #00b894;
    color: black;
    border-color: #00b894;
}

.btn-option.no:hover {
    background: #d63031;
    border-color: #d63031;
}

/* Filter Scroll */
.filter-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 25px;
    scrollbar-width: none;
}

.filter-scroll-container::-webkit-scrollbar {
    display: none;
}

.filter-tag {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0.85rem;
}

.filter-tag.active {
    background: var(--primary-orange);
    color: black;
    border-color: var(--primary-orange);
    font-weight: bold;
}

/* Market Meta */
.market-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meta-tag {
    color: var(--primary-orange);
    background: rgba(255, 102, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Button Load More */
.load-more-container {
    text-align: center;
    margin-top: 30px;
}

.btn-load-more {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-display);
}

/* --- NAVIGATION MOBILE (Hidden on Desktop) --- */
.mobile-nav {
    display: none;
    /* Caché par défaut */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--mobile-nav-height);
    background: var(--bg-panel);
    border-top: 1px solid var(--border-subtle);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    /* Pour iPhone X+ */
}

.mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    gap: 5px;
    width: 20%;
}

.mobile-item i {
    font-size: 1.2rem;
}

.mobile-item.active {
    color: var(--primary-orange);
}

.central-btn {
    width: 45px;
    height: 45px;
    background: var(--primary-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
    transform: translateY(-15px);
}

/* --- ANIMATIONS --- */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
}

.fade-in-delay-1 {
    animation: fadeInUp 0.8s ease 0.2s forwards;
    opacity: 0;
}

.fade-in-delay-2 {
    animation: fadeInUp 0.8s ease 0.4s forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (LE FIX)
   ========================================= */

@media (max-width: 900px) {

    /* Tablette : On réduit la sidebar ou on ajuste le padding */
    .sidebar {
        width: 80px;
        padding: 20px 10px;
    }

    .sidebar span {
        display: none;
    }

    /* Cache le texte */
    .brand span {
        display: none;
    }

    .brand {
        justify-content: center;
        margin-bottom: 30px;
    }

    .nav-item {
        justify-content: center;
        padding: 15px 0;
    }

    .nav-item i {
        margin: 0;
        font-size: 1.5rem;
    }

    .group-title,
    .user-info {
        display: none;
    }

    .user-profile {
        justify-content: center;
        border: none;
    }

    .main-content {
        margin-left: 80px;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    /* MOBILE : Gros changements */

    /* 1. On cache la sidebar desktop */
    .sidebar {
        display: none;
    }

    /* 2. On affiche la nav mobile */
    .mobile-nav {
        display: flex;
    }

    /* 3. Le contenu prend toute la largeur */
    .main-content {
        margin-left: 0;
        padding: 15px;
        width: 100%;
    }

    /* 4. Hero Section en colonne */
    .hero-section {
        flex-direction: column;
        gap: 15px;
    }

    .hero-card {
        width: 100%;
        padding: 20px;
    }

    .hero-card h1 {
        font-size: 1.8rem;
    }

    .hero-stats {
        flex-direction: row;
        gap: 10px;
    }

    .stat-item {
        flex: 1;
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
    }

    .stat-item .value {
        font-size: 1.2rem;
    }

    /* 5. Header ajusté */
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
    }

    .search-bar {
        width: 100%;
    }

    /* 6. Grille des marchés sur 1 colonne */
    .markets-grid {
        grid-template-columns: 1fr;
    }

    /* 7. Panini ajusté */
    .panini-card {
        width: 160px;
        height: 240px;
    }

    /* Cartes plus petites sur mobile */
}


/* =========================================
   DRIVER PROFILE PAGE CSS
   ========================================= */

/* --- 1. Header Profil (Asset Card) --- */
.profile-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.bg-number {
    position: absolute;
    left: -20px;
    bottom: -50px;
    font-size: 12rem;
    font-family: var(--font-display);
    color: rgba(255, 255, 255, 0.03);
    font-weight: 900;
    pointer-events: none;
    line-height: 1;
}

.profile-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    gap: 20px;
}

/* Partie Gauche (Identité) */
.profile-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.avatar-container {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.avatar-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-orange);
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
}

.team-mini-logo {
    position: absolute !important;
    bottom: 0;
    right: -5px;
    width: 30px !important;
    height: 30px !important;
    background: white;
    padding: 4px;
    border: 1px solid #111 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

.identity-text h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 5px;
}

.verified {
    color: #00b894;
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 5px;
}

.team-label {
    color: var(--primary-orange);
    font-size: 0.9rem;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    background: #333;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.badge.gold {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.badge.fire {
    color: #ff6600;
    background: rgba(255, 102, 0, 0.1);
    border: 1px solid rgba(255, 102, 0, 0.2);
}

/* Partie Droite (Market Data) */
.profile-right {
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: right;
}

.market-data-box {
    display: flex;
    flex-direction: column;
}

.market-data-box .label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: flex-end;
}

.price {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: white;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.trend.up {
    color: #00b894;
    font-weight: bold;
    font-size: 0.9rem;
    background: rgba(0, 184, 148, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-action {
    background: var(--primary-orange);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-display);
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
}

.btn-action:hover {
    background: white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* --- 2. Stats Grid Row --- */
.stats-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card-mini {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
}

.stat-card-mini:hover {
    border-color: var(--primary-orange);
    transform: translateY(-2px);
}

.stat-card-mini .icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-orange);
    font-size: 1.2rem;
}

.stat-card-mini .data {
    display: flex;
    flex-direction: column;
}

.stat-card-mini .val {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    color: white;
}

.stat-card-mini .lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* --- 3. Dashboard Split Layout --- */
.dashboard-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* 2/3 Gauche, 1/3 Droite */
    gap: 25px;
}

.content-box {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 25px;
    height: fit-content;
}

.box-title {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 1px solid #222;
    padding-bottom: 15px;
    color: var(--text-muted);
    font-weight: bold;
    letter-spacing: 1px;
}

/* CSS Charts */
.css-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 180px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 12%;
    height: 100%;
    justify-content: flex-end;
}

.bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    font-weight: bold;
    font-size: 0.75rem;
    color: black;
    transition: height 1s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.bar.h-100 {
    height: 100%;
}

.bar.h-80 {
    height: 70%;
}

.bar.win {
    background: var(--primary-orange);
}

.bar.podium {
    background: #e0e0e0;
}

.xaxis {
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: bold;
}

/* Data Table */
.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 300px;
}

.data-table th {
    text-align: left;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 12px 10px;
    border-bottom: 1px solid #333;
    text-transform: uppercase;
}

.data-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #222;
    font-size: 0.95rem;
}

.txt-green {
    color: #00b894;
    font-weight: bold;
}

.txt-silver {
    color: #ccc;
    font-weight: bold;
}

.txt-gold {
    color: #f1c40f;
    font-weight: bold;
}

.txt-silver {
    color: #a8a8b3;
    font-weight: bold;
}

.txt-green {
    color: #00b894;
}

/* ── Mini stats row ─────────────────────────────────────── */
.mini-stats-section {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 25px;
}

.mini-stats-section .stat-card-mini {
    flex: 1;
    min-width: 140px;
}

/* ── Bar chart group (css-chart children) ───────────────── */
.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
    gap: 6px;
}

.bar-group .bar {
    width: 70%;
    min-height: 6px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, var(--primary-orange), #FF8C00);
    transition: height .6s ease;
}

.bar-group .bar.points {
    background: linear-gradient(to top, #00b894, #00cec9);
}

.bar-group .bar.dnf {
    background: linear-gradient(to top, #444, #636e72);
    opacity: 0.5;
}

.bar-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: #ccc;
}

.bar-sub {
    font-size: 0.64rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 60px;
    word-break: break-word;
    line-height: 1.2;
}

/* Dynamic bar heights generated by PHP (h-10 → h-100 step 5) */
.bar.points {
    background: linear-gradient(to top, #00b894, #00cec9);
}

.bar.dnf {
    background: linear-gradient(to top, #636e72, #b2bec3);
    opacity: 0.5;
}

.bar.h-10 {
    height: 10%;
}

.bar.h-15 {
    height: 15%;
}

.bar.h-20 {
    height: 20%;
}

.bar.h-25 {
    height: 25%;
}

.bar.h-30 {
    height: 30%;
}

.bar.h-35 {
    height: 35%;
}

.bar.h-40 {
    height: 40%;
}

.bar.h-45 {
    height: 45%;
}

.bar.h-50 {
    height: 50%;
}

.bar.h-55 {
    height: 55%;
}

.bar.h-60 {
    height: 60%;
}

.bar.h-65 {
    height: 65%;
}

.bar.h-70 {
    height: 70%;
}

.bar.h-75 {
    height: 75%;
}

.bar.h-80 {
    height: 80%;
}

.bar.h-85 {
    height: 85%;
}

.bar.h-90 {
    height: 90%;
}

.bar.h-95 {
    height: 95%;
}

.bar.h-100 {
    height: 100%;
}


/* Compact Markets (Colonne Droite) */
.market-card.compact {
    padding: 20px;
    margin-bottom: 20px;
}

.market-card.compact .market-meta {
    margin-bottom: 10px;
}

.market-card.compact .market-question {
    font-size: 1rem;
    margin-bottom: 15px;
}

.market-card.compact .btn-option {
    padding: 10px;
    font-size: 0.9rem;
    justify-content: center;
}

/* =========================================
   RESPONSIVE OVERRIDES (DRIVER PAGE)
   À ajouter dans la section media queries
   ========================================= */

@media (max-width: 768px) {

    /* Profile Header Stack */
    .profile-content {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .profile-left {
        flex-direction: column;
        gap: 15px;
    }

    .badges {
        justify-content: center;
    }

    .profile-right {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        gap: 20px;
    }

    .price-row {
        justify-content: center;
    }

    .btn-action {
        width: 100%;
    }

    /* Stats Grid : 2 par ligne sur mobile */
    .stats-grid-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Dashboard Split : 1 colonne */
    .dashboard-split {
        grid-template-columns: 1fr;
    }

    /* Ajustement Chart */
    .css-chart {
        height: 150px;
    }
}


/* =========================================
   TEAM PROFILE SPECIFIC CSS
   ========================================= */

/* Header Ajustements pour Team */
.team-left {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 15px !important;
}

/* Container Voiture + Logo */
.car-display {
    position: relative;
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.team-logo-main {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: white;
    border-radius: 50%;
    padding: 5px;
    border: 1px solid #333;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.car-render {
    position: absolute;
    left: 40px;
    top: -20px;
    height: 180%;
    /* La voiture dépasse un peu pour le dynamisme */
    width: auto;
    max-width: 400px;
    object-fit: contain;
    z-index: 1;
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
}

.badge.blue {
    color: #00d2be;
    /* Couleur Mercedes/Petronas ou Cyan */
    background: rgba(0, 210, 190, 0.1);
    border: 1px solid rgba(0, 210, 190, 0.2);
}

/* Drivers Pair Section */
.drivers-pair {
    display: flex;
    gap: 20px;
}

.driver-mini-card {
    flex: 1;
    background: #151515;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.driver-mini-card:hover {
    border-color: var(--primary-orange);
    background: #1a1a1a;
}

.driver-mini-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-orange);
}

.d-info {
    display: flex;
    flex-direction: column;
}

.d-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: bold;
}

.d-pts {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.d-rank {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    font-family: var(--font-display);
}

/* Tech Specs List */
.tech-specs-list {
    list-style: none;
}

.tech-specs-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #222;
}

.tech-specs-list li:last-child {
    border-bottom: none;
}

.spec-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.spec-val {
    font-weight: bold;
    color: white;
    font-family: var(--font-display);
    text-align: right;
}

/* RESPONSIVE OVERRIDES SPECIFIC TO TEAM PAGE */
@media (max-width: 768px) {
    .car-render {
        position: relative;
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
    }

    .team-left {
        align-items: center !important;
    }

    .car-display {
        flex-direction: column;
        height: auto;
        margin-bottom: 20px;
    }

    .team-logo-main {
        margin-bottom: -30px;
        /* Chevauchement */
    }

    .drivers-pair {
        flex-direction: column;
    }
}

/* =========================================
   LIVE STREAM PAGE STYLES
   ========================================= */

/* Header Compact pour le Live */
.compact-header {
    margin-bottom: 20px !important;
}

.live-status-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.live-badge {
    background: #ff0000;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
}

.pulse-red {
    animation: pulseRed 2s infinite;
}

.live-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.live-viewers {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-left: auto;
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* GRID LAYOUT (Desktop: Video Left, Chat Right) */
.live-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    /* Video prend l'espace restant, Chat fixe 350px */
    gap: 20px;
    height: 70vh;
    /* Hauteur fixe pour le feeling "Desktop App" */
    margin-bottom: 30px;
}

/* VIDEO SECTION */
.video-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video-player {
    flex: 1;
    background: black;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #333;
}

.stream-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
}

.stream-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 102, 0, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 30px rgba(255, 102, 0, 0.5);
}

.play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--primary-orange);
}

.stream-overlay-info {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    border-left: 3px solid var(--primary-orange);
    display: flex;
    gap: 15px;
}

/* Actions sous la vidéo */
.stream-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.action-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    flex: 1;
    transition: 0.3s;
}

.action-btn:hover,
.action-btn.active {
    background: #222;
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

/* CHAT SECTION */
.chat-container {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    /* Prend toute la hauteur de la grille */
}

.chat-header {
    padding: 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.chat-header h3 {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    font-size: 0.9rem;
    scrollbar-width: thin;
    scrollbar-color: #444 #111;
}

.message {
    margin-bottom: 8px;
    line-height: 1.4;
    word-wrap: break-word;
}

.message.system {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8rem;
    margin: 10px 0;
    text-align: center;
}

.message .user {
    font-weight: bold;
    cursor: pointer;
}

.message .user:hover {
    text-decoration: underline;
}

.color-1 {
    color: #00b894;
}

.color-2 {
    color: #ff7675;
}

.color-3 {
    color: #74b9ff;
}

.message .text {
    color: #ddd;
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid #333;
    display: flex;
    gap: 10px;
}

.chat-input-area input {
    flex: 1;
    background: #222;
    border: 1px solid #444;
    color: white;
    padding: 10px;
    border-radius: 6px;
    outline: none;
}

.chat-input-area input:focus {
    border-color: var(--primary-orange);
}

.btn-send {
    background: var(--primary-orange);
    border: none;
    color: black;
    width: 40px;
    border-radius: 6px;
    cursor: pointer;
}

/* MARKETS LIVE (Spécifique) */
.section-title {
    margin-bottom: 20px;
    font-family: var(--font-display);
}

.live-card {
    border-left: 4px solid var(--primary-orange);
}

.market-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.75rem;
}

.tag-live {
    color: #ff0000;
    font-weight: bold;
    animation: pulse 1s infinite;
}

.live-odds-bar {
    display: flex;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 15px;
    cursor: pointer;
}

.odds-left {
    background: rgba(0, 184, 148, 0.2);
    border: 1px solid #00b894;
    color: #00b894;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    transition: 0.3s;
}

.odds-right {
    background: rgba(214, 48, 49, 0.2);
    border: 1px solid #d63031;
    color: #d63031;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    transition: 0.3s;
}

.live-odds-bar:hover .odds-left {
    background: #00b894;
    color: black;
}

.live-odds-bar:hover .odds-right {
    background: #d63031;
    color: white;
}

/* =========================================
   RESPONSIVE LIVE PAGE
   À ajouter dans la section media queries
   ========================================= */
@media (max-width: 900px) {

    /* Tablette : Chat passe en dessous */
    .live-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .video-container {
        height: auto;
        aspect-ratio: 16/9;
    }

    .chat-container {
        height: 400px;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    .live-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        margin-bottom: 10px;
    }

    .video-container {
        width: 100vw;
        margin-left: -15px;
        /* Pour coller aux bords sur mobile (padding parent annulé) */
        margin-right: -15px;
    }

    .video-player {
        border-radius: 0;
        border-left: none;
        border-right: none;
        aspect-ratio: 16/9;
    }

    .stream-actions {
        padding: 0 15px;
        overflow-x: auto;
        /* Scroll horizontal si les boutons dépassent */
    }

    .chat-container {
        height: 300px;
        /* Chat plus petit sur mobile */
        margin-top: 10px;
    }

    .compact-header {
        flex-direction: row;
        justify-content: space-between;
    }

    .live-title {
        display: none;
    }

    /* On cache le titre long sur mobile */
    .live-viewers {
        margin-left: 0;
    }
}

/* =========================================
   MARKET DETAIL PAGE STYLES
   ========================================= */

/* --- Header Detail --- */
.market-header-detail {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.market-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.market-icon img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
}

.market-title-group {
    flex: 1;
}

.market-title-group h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

.market-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    background: #222;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.volume-tag {
    color: var(--primary-orange);
    border: 1px solid rgba(255, 102, 0, 0.3);
}

.current-price-box {
    text-align: right;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
}

.cp-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cp-value {
    font-family: var(--font-display);
    font-size: 2rem;
    color: #00b894;
    font-weight: bold;
}

.cp-change {
    font-size: 0.9rem;
    font-weight: bold;
}

.cp-change.positive {
    color: #00b894;
}

/* --- GRID LAYOUT --- */
.market-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

/* --- CHART PANEL --- */
.chart-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.chart-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.time-filters {
    background: #222;
    border-radius: 6px;
    padding: 2px;
    display: inline-flex;
}

.t-btn {
    background: transparent;
    border: none;
    color: #888;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 4px;
}

.t-btn:hover,
.t-btn.active {
    background: #444;
    color: white;
}

.chart-container {
    flex: 1;
    position: relative;
}

/* --- HISTORY PANEL (TRANSACTIONS) --- */
.history-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
}

.panel-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #333;
    margin-bottom: 15px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding-bottom: 10px;
    cursor: pointer;
    font-size: 1rem;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: white;
    border-color: var(--primary-orange);
}

.trade-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.trade-table th {
    text-align: left;
    color: var(--text-muted);
    padding: 10px;
    border-bottom: 1px solid #333;
    font-size: 0.8rem;
}

.trade-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #222;
    color: #ddd;
}

.type-buy {
    color: #00b894;
}

.type-sell {
    color: #d63031;
}

.time {
    color: var(--text-muted);
    font-family: monospace;
}

/* --- TRADE BOX (INTERFACE) --- */
.trade-box {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.trade-tabs {
    display: flex;
    background: #222;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}

.trade-tab {
    flex: 1;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-family: var(--font-display);
}

.trade-tab.buy.active {
    background: #00b894;
    color: black;
}

.trade-tab.sell.active {
    background: #d63031;
    color: white;
}

.trade-tab {
    background: transparent;
    color: #888;
}

.outcome-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.outcome-option {
    flex: 1;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.outcome-option:hover {
    border-color: #888;
}

.outcome-option.selected {
    border-color: #00b894;
    background: rgba(0, 184, 148, 0.1);
}

.o-name {
    font-weight: bold;
}

.o-price {
    color: #00b894;
    font-family: var(--font-display);
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.input-wrapper {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.input-wrapper span {
    color: #888;
}

.input-wrapper input {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    padding: 12px;
    font-size: 1.1rem;
    outline: none;
    text-align: right;
    font-family: var(--font-display);
}

.trade-summary {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #ccc;
}

.trade-summary .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.highlight-green {
    color: #00b894;
    font-weight: bold;
}

.btn-execute {
    width: 100%;
    background: #00b894;
    color: black;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    font-family: var(--font-display);
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.3s;
}

.btn-execute:hover {
    background: #00a282;
    box-shadow: 0 0 15px rgba(0, 184, 148, 0.4);
}

/* --- ORDER BOOK --- */
.order-book-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
}

.order-book-panel h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.order-book-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 10px;
}

.order-book-content {
    display: flex;
    gap: 10px;
}

.ob-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ob-row {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    font-size: 0.85rem;
    position: relative;
    font-family: monospace;
}

.ob-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.2;
    z-index: 0;
}

.asks .ob-row {
    color: #d63031;
}

.asks .ob-bar {
    right: 0;
    background: #d63031;
}

.bids .ob-row {
    color: #00b894;
}

.bids .ob-bar {
    left: 0;
    background: #00b894;
}

.ob-price,
.ob-size {
    position: relative;
    z-index: 1;
}

/* =========================================
   RESPONSIVE MARKET PAGE
   ========================================= */
@media (max-width: 900px) {
    .market-grid-layout {
        grid-template-columns: 1fr;
    }

    /* Sur mobile/tablette, on met le trading APRES le chart */
    .col-right-market {
        order: 2;
    }

    .col-left-market {
        order: 1;
    }
}

@media (max-width: 768px) {
    .market-header-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .market-icon {
        width: 60px;
        height: 60px;
    }

    .market-title-group h1 {
        font-size: 1.4rem;
    }

    .current-price-box {
        align-self: stretch;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chart-panel {
        height: 300px;
    }

    .trade-box {
        order: 1;
    }

    /* Trade box en premier après le header sur mobile */
    .history-panel {
        order: 3;
    }

    .order-book-panel {
        order: 4;
    }
}


/* =========================================
   USER PROFILE PAGE STYLES
   ========================================= */

/* --- 1. User Header (Card) --- */
.user-header-style {
    background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
    /* On surcharge le padding du profile-header global si besoin */
    overflow: visible;
    /* Pour laisser dépasser le rank */
}

.bg-pattern {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.02);
    pointer-events: none;
}

.avatar-container.large {
    width: 120px;
    height: 120px;
    position: relative;
}

.avatar-container.large img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--bg-panel);
    /* Effet cutout */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.rank-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-orange);
    color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-family: var(--font-display);
    border: 3px solid var(--bg-panel);
    font-size: 1rem;
}

.join-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    display: block;
    margin-bottom: 10px;
}

.badge.purple {
    color: #a29bfe;
    background: rgba(162, 155, 254, 0.1);
    border: 1px solid rgba(162, 155, 254, 0.2);
}

.user-stats-right {
    display: flex;
    gap: 30px;
}

.stat-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-block.border-left {
    border-left: 1px solid #333;
    padding-left: 30px;
}

.stat-block .value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
}

.stat-block .sub-val {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
}

.pnl-green {
    color: #00b894;
    text-shadow: 0 0 10px rgba(0, 184, 148, 0.2);
}

.pnl-red {
    color: #d63031;
}

/* --- 2. Equity Chart --- */
.chart-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.chart-header-row {
    margin-bottom: 15px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
}

.chart-header-row h3 {
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.equity-chart-container {
    height: 250px;
    width: 100%;
    position: relative;
}

/* --- 3. Tabs & Tables --- */
.custom-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

.c-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.c-tab:hover {
    color: white;
}

.c-tab.active {
    color: white;
    border-color: var(--primary-orange);
    font-weight: bold;
}

.table-container {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

.portfolio-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* Force scroll on small mobile */
}

.portfolio-table th {
    text-align: left;
    background: #1a1a1a;
    padding: 15px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.portfolio-table td {
    padding: 15px;
    border-bottom: 1px solid #222;
    font-size: 0.95rem;
    vertical-align: middle;
}

.portfolio-table tr:last-child td {
    border-bottom: none;
}

.portfolio-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.market-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.market-cell img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.icon-cell {
    width: 30px;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.2rem;
}

.pos-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.pos-badge.yes {
    background: rgba(0, 184, 148, 0.15);
    color: #00b894;
    border: 1px solid rgba(0, 184, 148, 0.3);
}

.pos-badge.no {
    background: rgba(214, 48, 49, 0.15);
    color: #d63031;
    border: 1px solid rgba(214, 48, 49, 0.3);
}

.status-win {
    color: #00b894;
    font-weight: bold;
}

.status-loss {
    color: #d63031;
    font-weight: bold;
}

.date-col {
    color: var(--text-muted);
    font-family: monospace;
}

/* RESPONSIVE SPECIFIC FOR PROFILE */
@media (max-width: 768px) {
    .user-header-style .profile-content {
        flex-direction: column;
        text-align: center;
    }

    .user-header-style .profile-left {
        flex-direction: column;
        gap: 15px;
    }

    .user-stats-right {
        width: 100%;
        justify-content: space-around;
        border-top: 1px solid #333;
        padding-top: 20px;
    }

    .stat-block.border-left {
        border: none;
        padding: 0;
    }

    .table-container {
        overflow-x: auto;
    }

    /* Scroll horizontal pour la table */
}

/* =========================================
   LEADERBOARD PAGE STYLES
   ========================================= */

/* --- Filters (Pills) --- */
.timeframe-pills {
    background: #1a1a1a;
    border-radius: 30px;
    padding: 4px;
    display: inline-flex;
    border: 1px solid #333;
}

.tf-pill {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    transition: 0.3s;
}

.tf-pill.active {
    background: var(--primary-orange);
    color: black;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.3);
}

.tf-pill:hover:not(.active) {
    color: white;
}

/* --- PODIUM SECTION --- */
.podium-section {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 60px;
    height: 350px;
    /* Espace vertical pour le podium */
}

.podium-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 120px;
}

.step-1 {
    z-index: 3;
}

.step-2 {
    z-index: 2;
}

.step-3 {
    z-index: 1;
}

/* Avatars & Médailles */
.podium-avatar {
    position: relative;
    margin-bottom: 15px;
}

.podium-avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #333;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.podium-avatar.large img {
    width: 90px;
    height: 90px;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.medal {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-family: var(--font-display);
    color: black;
    font-size: 0.8rem;
    border: 2px solid #111;
}

.medal.gold {
    background: #ffd700;
}

.medal.silver {
    background: #c0c0c0;
}

.medal.bronze {
    background: #cd7f32;
}

.crown {
    color: #ffd700;
    font-size: 1.5rem;
    margin-bottom: 5px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Infos Joueur Podium */
.podium-info {
    text-align: center;
    margin-bottom: 10px;
}

.p-name {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.p-profit {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #00b894;
    font-weight: bold;
}

.text-gold {
    color: #ffd700;
}

/* Pedestals (Les marches) */
.pedestal {
    width: 100%;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center;
    padding-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.5));
}

.step-1 .pedestal {
    height: 160px;
    border-top: 4px solid #ffd700;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.8));
}

.step-2 .pedestal {
    height: 110px;
    border-top: 4px solid #c0c0c0;
}

.step-3 .pedestal {
    height: 80px;
    border-top: 4px solid #cd7f32;
}

.pedestal i {
    font-size: 3rem;
    color: rgba(255, 215, 0, 0.2);
}

/* --- LISTE CLASSEMENT (Table) --- */
.ranking-list {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 5px;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th {
    text-align: left;
    padding: 15px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
}

.leaderboard-table td {
    padding: 15px;
    border-bottom: 1px solid #222;
    font-size: 0.95rem;
}

.rank-num {
    font-weight: bold;
    font-family: var(--font-display);
    color: var(--text-muted);
    width: 50px;
    text-align: center;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: bold;
}

.user-cell img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.profit-pos {
    color: #00b894;
    font-weight: bold;
    font-family: var(--font-display);
}

.profit-neg {
    color: #d63031;
    font-weight: bold;
    font-family: var(--font-display);
}

/* --- MY RANK BAR (Sticky Bottom) --- */
.main-content.padding-bottom-extra {
    padding-bottom: 120px;
}

/* Espace pour la barre */

.my-rank-bar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    background: #1a1a1a;
    border-top: 2px solid var(--primary-orange);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 90;
    /* En dessous de la nav mobile si présente */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
}

.my-rank-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rank-box {
    background: #333;
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-weight: bold;
    font-family: var(--font-display);
}

.user-details {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.user-details img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--primary-orange);
}

.my-stats {
    display: flex;
    gap: 30px;
}

.stat-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-col .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stat-col .val {
    font-weight: bold;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.val.green {
    color: #00b894;
}

.slide-up {
    animation: slideUp 0.5s ease-out forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


/* RESPONSIVE SPECIFIC LEADERBOARD */
@media (max-width: 768px) {

    /* Ajustement Podium Mobile */
    .podium-section {
        gap: 5px;
        height: 300px;
        margin-top: 20px;
    }

    .podium-step {
        width: 30%;
    }

    .podium-avatar img {
        width: 50px;
        height: 50px;
    }

    .podium-avatar.large img {
        width: 70px;
        height: 70px;
    }

    .p-name {
        font-size: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .p-profit {
        font-size: 0.85rem;
    }

    /* Table ajustée */
    .col-roi,
    .col-win {
        display: none;
    }

    /* On cache des colonnes sur mobile */
    .leaderboard-table td:nth-child(4),
    .leaderboard-table td:nth-child(5) {
        display: none;
    }

    /* Sticky Bar Mobile */
    .my-rank-bar {
        left: 0;
        bottom: var(--mobile-nav-height);
        /* Au dessus de la nav mobile */
        padding: 10px 15px;
    }

    .desktop-only {
        display: none;
    }
}


/* =========================================
   AUTH / LOGIN PAGE STYLES
   ========================================= */

/* Override Body for Auth Page only */
.auth-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #050505;
    overflow: hidden;
    position: relative;
}

/* Background Effects */
.glow-spot {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    z-index: 0;
    animation: moveSpot 10s infinite alternate;
}

.spot-1 {
    background: var(--primary-orange);
    top: -100px;
    left: -100px;
}

.spot-2 {
    background: #00b894;
    bottom: -100px;
    right: -100px;
    animation-delay: 5s;
}

@keyframes moveSpot {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* Layout */
.auth-container {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

/* Brand Section */
.auth-brand {
    text-align: center;
}

.brand-icon {
    font-size: 3rem;
    color: var(--primary-orange);
    margin-bottom: 10px;
    filter: drop-shadow(0 0 15px var(--primary-orange));
}

.auth-brand h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 5px;
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Auth Card */
.auth-card {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.card-header {
    margin-bottom: 25px;
    text-align: center;
}

.card-header h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.card-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Wallet List */
.wallet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wallet-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    text-align: left;
    width: 100%;
    color: white;
}

.wallet-btn:hover {
    background: rgba(255, 102, 0, 0.1);
    border-color: var(--primary-orange);
    transform: translateX(5px);
}

.wallet-btn.recommended {
    border-color: rgba(255, 102, 0, 0.3);
    background: linear-gradient(90deg, rgba(255, 102, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

.w-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.w-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.w-icon i {
    font-size: 1.5rem;
}

.w-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.w-name {
    font-weight: bold;
    font-size: 1rem;
}

.w-status {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wallet-btn.recommended .w-status {
    color: var(--primary-orange);
    font-weight: bold;
}

.arrow {
    color: #555;
    transition: 0.3s;
}

.wallet-btn:hover .arrow {
    color: white;
    transform: translateX(3px);
}

/* Loading / Success States */
.wallet-btn.loading {
    justify-content: center;
    opacity: 0.8;
    cursor: wait;
}

.wallet-btn.success {
    background: #00b894;
    border-color: #00b894;
    color: black;
    justify-content: center;
}

/* Footer */
.auth-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.auth-footer a {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: bold;
}

.security-badge {
    margin-top: 15px;
    font-size: 0.75rem;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.security-badge i {
    color: #00b894;
}

/* Responsive Mobile Auth */
@media (max-width: 480px) {
    .auth-card {
        padding: 20px;
        border-radius: 16px;
    }

    .auth-brand h1 {
        font-size: 2rem;
    }
}


/* =========================================
   SETTINGS PAGE STYLES
   ========================================= */

/* Layout Grid (Sidebar Settings vs Content) */
.settings-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

/* --- Settings Sidebar --- */
.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s-menu-item {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 15px 20px;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
}

.s-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.s-menu-item.active {
    background: #1a1a1a;
    color: var(--primary-orange);
    border-left: 3px solid var(--primary-orange);
    font-weight: bold;
}

.danger-zone {
    margin-top: 30px;
    border-top: 1px solid #333;
    padding-top: 20px;
}

.btn-disconnect {
    background: rgba(214, 48, 49, 0.1);
    color: #d63031;
    border: 1px solid rgba(214, 48, 49, 0.2);
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}

.btn-disconnect:hover {
    background: rgba(214, 48, 49, 0.2);
}

/* --- Settings Form Content --- */
.settings-content .content-box {
    min-height: 500px;
}

.sub-header {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 5px;
}

#profile-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 600px;
}

/* Avatar Edit */
.avatar-edit-section {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 10px;
}

.current-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.current-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: 0.3s;
}

.current-avatar:hover .edit-overlay {
    opacity: 1;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.help-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Inputs */
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #ccc;
    font-weight: bold;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0 15px;
    transition: 0.3s;
}

.input-wrapper:focus-within {
    border-color: var(--primary-orange);
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.1);
}

.input-wrapper input,
.input-wrapper textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    padding: 12px 0;
    font-size: 1rem;
    outline: none;
    font-family: var(--font-body);
}

.input-wrapper textarea {
    resize: vertical;
    min-height: 80px;
    padding-top: 12px;
}

.input-icon {
    color: var(--text-muted);
    margin-right: 15px;
}

.char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Read Only State */
.input-wrapper.read-only {
    background: rgba(255, 255, 255, 0.03);
    border-color: #222;
    cursor: not-allowed;
}

.input-wrapper.read-only input {
    color: #888;
    cursor: not-allowed;
}

.copy-btn {
    background: transparent;
    border: none;
    color: var(--primary-orange);
    cursor: pointer;
    padding: 5px;
}

/* Buttons */
.btn-primary {
    background: var(--primary-orange);
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font-display);
    transition: 0.3s;
}

.btn-primary:hover {
    background: white;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid #444;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-secondary:hover {
    border-color: white;
}

.btn-text.delete {
    background: transparent;
    border: none;
    color: #d63031;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    padding: 0;
}

.btn-text.delete:hover {
    text-decoration: underline;
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #222;
}

/* RESPONSIVE SETTINGS */
@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .settings-layout {
        display: flex;
        flex-direction: column;
    }

    .settings-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        border-bottom: 1px solid #222;
        margin-bottom: 20px;
    }

    .s-menu-item {
        white-space: nowrap;
        padding: 10px 15px;
        background: #1a1a1a;
        border-radius: 20px;
        font-size: 0.9rem;
    }

    .s-menu-item.active {
        border-left: none;
        background: var(--primary-orange);
        color: black;
    }

    .danger-zone {
        display: none;
        /* On cache le bouton disconnect ici pour gagner de la place */
    }

    .avatar-edit-section {
        flex-direction: column;
        text-align: center;
    }

    .avatar-actions {
        align-items: center;
    }

    .form-actions {
        justify-content: space-between;
    }

    .btn-primary,
    .btn-secondary {
        flex: 1;
    }
}

/* --- FIX TEXTAREA --- */

/* 1. Ajustement du wrapper pour les zones de texte multi-lignes */
.input-wrapper.multi-line {
    height: auto;
    /* Enlève la hauteur fixe */
    align-items: flex-start;
    /* Aligne le texte en haut */
    padding: 0 15px;
    /* Garde le padding horizontal */
}

/* 2. Style spécifique du textarea */
.input-wrapper textarea {
    width: 100%;
    background: transparent;
    /* Fond transparent pour voir celui du wrapper */
    border: none;
    color: white;
    font-size: 1rem;
    font-family: var(--font-body);
    /* Force la police du site */
    outline: none;
    /* Enlève le contour bleu par défaut */
    padding: 15px 0;
    /* Espace interne haut/bas */
    resize: vertical;
    /* Autorise le redimensionnement vertical uniquement */
    min-height: 100px;
    /* Hauteur minimale */
    line-height: 1.5;
}

/* 3. Personalisation de la barre de resize (optionnel, pour Webkit) */
.input-wrapper textarea::-webkit-resizer {
    background-color: var(--primary-orange);
    border-radius: 4px;
}

/* Rappel : Assure-toi que le focus marche aussi sur le wrapper multi-line */
.input-wrapper.multi-line:focus-within {
    border-color: var(--primary-orange);
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.1);
}

/* =========================================
   EXPLORER / SEARCH PAGE STYLES
   ========================================= */

/* Layout Grid */
.explorer-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    /* Sidebar Filtres Fixe | Contenu */
    gap: 30px;
    align-items: start;
}

.search-bar.expanded {
    width: 100%;
    max-width: 600px;
}

/* --- Filters Panel --- */
.filters-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 20px;
    /* Sticky scroll */
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.filter-header h3 {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.reset-btn {
    background: transparent;
    border: none;
    color: var(--primary-orange);
    cursor: pointer;
    font-size: 0.8rem;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group h4 {
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    color: #ccc;
    font-size: 0.9rem;
}

.checkbox-row input {
    accent-color: var(--primary-orange);
}

.checkbox-row:hover {
    color: white;
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.f-tag {
    background: #222;
    border: 1px solid #333;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}

.f-tag:hover {
    border-color: #888;
}

.f-tag.active {
    background: var(--primary-orange);
    color: black;
    border-color: var(--primary-orange);
    font-weight: bold;
}

/* --- Results Panel --- */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.result-count {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.sort-dropdown select {
    background: #111;
    border: 1px solid #333;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    outline: none;
}

/* Vertical Market List */
.markets-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.market-list-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 15px;
    text-decoration: none;
    transition: 0.3s;
}

.market-list-item:hover {
    border-color: var(--primary-orange);
    transform: translateX(5px);
    background: #1a1a1a;
}

.m-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.m-icon img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.placeholder-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border-radius: 8px;
    font-size: 1.5rem;
    color: #555;
}

.m-info {
    flex: 1;
    min-width: 0;
    /* Pour que le text-overflow marche */
}

.m-info h4 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-meta {
    display: flex;
    gap: 15px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meta-badge {
    color: var(--primary-orange);
    background: rgba(255, 102, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.m-prices {
    display: flex;
    gap: 10px;
}

.price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 50px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.price-box.yes {
    background: rgba(0, 184, 148, 0.1);
    border: 1px solid #00b894;
    color: #00b894;
}

.price-box.no {
    background: rgba(214, 48, 49, 0.1);
    border: 1px solid #d63031;
    color: #d63031;
}

.price-box .val {
    font-weight: bold;
    font-size: 1rem;
}

/* RESPONSIVE EXPLORER */
@media (max-width: 900px) {
    .explorer-layout {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .explorer-layout {
        display: flex;
        flex-direction: column;
    }

    /* Filters deviennent un scroll horizontal en haut */
    .filters-panel {
        position: static;
        width: 100%;
        padding: 15px;
        display: flex;
        overflow-x: auto;
        gap: 20px;
        align-items: flex-start;
    }

    .filter-header {
        display: none;
    }

    .filter-group {
        min-width: 150px;
        margin-bottom: 0;
        border-right: 1px solid #333;
        padding-right: 15px;
    }

    .filter-group:last-child {
        border: none;
    }

    .market-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .m-info {
        width: 100%;
    }

    .m-prices {
        width: 100%;
    }

    .price-box {
        flex: 1;
        height: 40px;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 15px;
    }

    /* Cache l'icone sur mobile pour gagner de la place si besoin, ou on la garde */
    .m-icon {
        width: 40px;
        height: 40px;
    }
}

/* =========================================
   WALLET PAGE STYLES
   ========================================= */

/* Network Status Header */
.network-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #333;
    font-size: 0.85rem;
}

.dot-green {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 5px #2ecc71;
}

.gas-indicator {
    color: var(--text-muted);
    border-left: 1px solid #333;
    padding-left: 10px;
    margin-left: 5px;
}

/* 1. Net Worth Section */
.net-worth-section {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* Carte Bancaire Style */
.crypto-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    position: relative;
    overflow: hidden;
}

.crypto-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: var(--primary-orange);
    filter: blur(80px);
    opacity: 0.2;
}

.card-top {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.eth-logo {
    font-size: 1.5rem;
    color: #fff;
    opacity: 0.5;
}

.card-balance h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin: 10px 0 5px 0;
}

.trend.up {
    color: #00b894;
    font-size: 0.9rem;
    font-weight: bold;
}

.card-address {
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: monospace;
    color: #aaa;
}

.btn-copy {
    background: transparent;
    border: none;
    color: var(--primary-orange);
    cursor: pointer;
}

.card-actions {
    display: flex;
    gap: 10px;
}

.action-btn-light {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn-light:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Quick Stats */
.quick-stats-wallet {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qs-item {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qs-item.highlight {
    border-color: #00b894;
    background: rgba(0, 184, 148, 0.05);
}

.qs-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.qs-val {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: bold;
}

.text-green {
    color: #00b894;
}

/* 2. Redeem Section */
.redeem-section {
    margin-bottom: 40px;
}

.section-header h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.winning-card {
    background: linear-gradient(90deg, #1a1a1a 0%, #111 100%);
    border-left: 4px solid #00b894;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.wc-icon {
    position: relative;
    width: 50px;
    height: 50px;
}

.wc-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.wc-badge {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: #00b894;
    color: black;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}

.wc-info {
    flex: 1;
}

.wc-info h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.wc-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.wc-action {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}

.wc-value {
    font-family: var(--font-display);
    font-weight: bold;
    color: #00b894;
}

.btn-redeem {
    background: #00b894;
    color: black;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-redeem:hover {
    background: #00a282;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4);
}

/* 3. Split Assets & History */
.wallet-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
}

/* Asset List */
.asset-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #222;
}

.asset-item:last-child {
    border-bottom: none;
}

.ai-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.coin-icon {
    width: 35px;
    height: 35px;
}

.coin-name {
    font-weight: bold;
    display: block;
}

.coin-net {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ai-right {
    text-align: right;
}

.coin-bal {
    font-family: var(--font-display);
    font-weight: bold;
    display: block;
}

.coin-usd {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Tx Table */
.tx-table {
    width: 100%;
    border-collapse: collapse;
}

.tx-table th {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

.tx-table td {
    padding: 15px 0;
    border-bottom: 1px solid #222;
    font-size: 0.9rem;
}

.tx-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

.tx-icon.in {
    background: rgba(0, 184, 148, 0.1);
    color: #00b894;
}

.tx-icon.out {
    background: rgba(214, 48, 49, 0.1);
    color: #d63031;
}

.tx-icon.swap {
    background: rgba(255, 102, 0, 0.1);
    color: var(--primary-orange);
}

.tx-name {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
}

.tx-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-pill {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: #222;
    border: 1px solid #333;
    color: #aaa;
}

.status-pill.success {
    color: #00b894;
    border-color: rgba(0, 184, 148, 0.3);
}

/* RESPONSIVE WALLET */
@media (max-width: 900px) {
    .net-worth-section {
        grid-template-columns: 1fr;
    }

    .wallet-split {
        grid-template-columns: 1fr;
    }

    .winning-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .wc-action {
        align-items: flex-start;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .crypto-card {
        padding: 20px;
    }

    .card-balance h1 {
        font-size: 2rem;
    }

    .card-actions {
        flex-direction: column;
    }

    .quick-stats-wallet {
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
    }

    .qs-item {
        min-width: 140px;
    }
}

/* =========================================
   LIVE BROWSE PAGE STYLES (TWITCH STYLE)
   ========================================= */

/* --- 1. Featured Stream (Hero Section) --- */
.featured-stream {
    position: relative;
    width: 100%;
    min-height: 380px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.featured-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.featured-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dégradé sombre pour faire ressortir le texte */
    background: linear-gradient(to top, rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, 0.7) 40%, rgba(5, 5, 5, 0.1) 100%);
}

.featured-content {
    position: relative;
    z-index: 1;
    padding: 40px;
    width: 100%;
    max-width: 800px;
}

.f-badges {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.badge-live-pulse {
    background: #ff0000;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: pulseBg 2s infinite;
}

@keyframes pulseBg {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

.badge-viewers {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid #333;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
}

.featured-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.featured-desc {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 600px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.featured-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.featured-tags .tag {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.featured-tags .vol-tag {
    background: rgba(0, 184, 148, 0.2);
    color: #00b894;
    border: 1px solid #00b894;
}

.btn-watch-live {
    display: inline-block;
    background: var(--primary-orange);
    color: black;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: bold;
    font-family: var(--font-display);
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 5px 20px rgba(255, 102, 0, 0.4);
}

.btn-watch-live:hover {
    background: white;
    transform: translateY(-2px);
}

/* --- 2. Streams Grid (Twitch Style) --- */
.streams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* Grille adaptative */
    gap: 25px;
    margin-bottom: 60px;
}

.stream-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: white;
    transition: 0.3s;
}

.stream-card:hover {
    transform: translateY(-5px);
}

.stream-card:hover .stream-title {
    color: var(--primary-orange);
}

/* Vignette (Thumbnail) */
.stream-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: 0.3s;
}

.stream-card:hover .stream-thumbnail {
    border-color: var(--primary-orange);
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.2);
}

.stream-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.stream-card:hover .stream-thumbnail img {
    transform: scale(1.05);
}

/* Badges sur la vignette */
.thumb-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff0000;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

.thumb-viewers {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

/* Infos sous la vignette */
.stream-info-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.stream-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.stream-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #333;
}

.stream-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stream-title {
    font-size: 1rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.2s;
}

.stream-channel {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stream-channel .verified {
    color: #00b894;
    font-size: 0.8rem;
    margin-left: 3px;
}

.stream-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.s-tag {
    background: #222;
    color: #aaa;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.stream-card:hover .s-tag {
    background: #333;
    color: white;
}

/* RESPONSIVE SPECIFICS */
@media (max-width: 768px) {
    .featured-stream {
        min-height: 300px;
        border-radius: 12px;
    }

    .featured-content {
        padding: 25px 20px;
    }

    .featured-title {
        font-size: 1.5rem;
    }

    .featured-desc {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .featured-tags {
        display: none;
        /* Gain de place sur mobile */
    }

    .streams-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 1 colonne sur mobile */
}

/* =========================================
   TRACK MAP & TELEMETRY STYLES
   ========================================= */

/* --- 1. Track Conditions Bar --- */
.track-conditions {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.condition-box {
    flex: 1;
    min-width: 150px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.condition-box i {
    font-size: 1.5rem;
}

.icon-blue {
    color: #74b9ff;
}

.icon-orange {
    color: var(--primary-orange);
}

.icon-gray {
    color: #a4b0be;
}

.cond-info {
    display: flex;
    flex-direction: column;
}

.cond-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.cond-val {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: var(--font-display);
}

.status-green {
    border-color: #00b894;
    background: rgba(0, 184, 148, 0.05);
}

.status-green i {
    color: #00b894;
}

.status-green .cond-val {
    color: #00b894;
}

/* --- 2. Telemetry Grid Layout --- */
.telemetry-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
}

.box-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
}

.box-header-flex h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- 3. Interactive Track Map --- */
.track-map-wrapper {
    overflow: hidden;
}

.map-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: #0a0a0a;
    border-radius: 8px;
    border: 1px solid #222;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.circuit-svg-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    /* MAGIE CSS : Transforme une image noire sur fond transparent en blanc/gris clair */
    filter: invert(1) brightness(0.8) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    opacity: 0.7;
}

.drs-legend {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
}

.drs-zone {
    width: 20px;
    height: 4px;
    background: #00b894;
    display: inline-block;
    border-radius: 2px;
}

/* Pilotes sur la carte */
.driver-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px currentColor;
    z-index: 10;
    transition: all 1s ease-in-out;
    /* Animation de mouvement si gérée en JS */
}

.driver-dot::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.dot-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: bold;
    border: 1px solid #333;
}

/* Couleurs Écuries (Points) */
.driver-dot.ver {
    background-color: #0600ef;
    color: #0600ef;
}

/* Red Bull Blue */
.driver-dot.lec {
    background-color: #dc0000;
    color: #dc0000;
}

/* Ferrari Red */
.driver-dot.nor {
    background-color: #ff8700;
    color: #ff8700;
}

/* McLaren Orange */

/* Speed Trap Badge */
.speed-trap {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.speed-trap span {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
}

.speed-trap strong {
    font-family: var(--font-display);
    color: white;
}

/* --- 4. Live Timing Table --- */
.live-timing-wrapper {
    display: flex;
    flex-direction: column;
}

.timing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-family: var(--font-body);
}

.timing-table th {
    text-align: left;
    padding: 10px 5px;
    color: var(--text-muted);
    border-bottom: 1px solid #333;
}

.timing-table td {
    padding: 12px 5px;
    border-bottom: 1px solid #222;
    vertical-align: middle;
    color: white;
}

.timing-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.active-row {
    background: rgba(255, 102, 0, 0.05);
}

/* Team Colors Indicator */
.t-color {
    display: inline-block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

.t-color.rb {
    background: #0600ef;
}

.t-color.fer {
    background: #dc0000;
}

.t-color.mcl {
    background: #ff8700;
}

.t-color.mer {
    background: #00d2be;
}

/* Tires */
.tire {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.7rem;
    color: black;
}

.tire.soft {
    background: #d63031;
    color: white;
    border: 2px solid #ff7675;
}

.tire.medium {
    background: #f1c40f;
    border: 2px solid #f39c12;
}

.tire.hard {
    background: #ffffff;
    border: 2px solid #bdc3c7;
}

/* Sectors (F1 Telemetry Colors) */
.sector {
    font-family: monospace;
    font-weight: bold;
}

.sector.purple {
    color: #a29bfe;
}

/* Record Absolu */
.sector.green {
    color: #00b894;
}

/* Record Personnel */
.sector.yellow {
    color: #f1c40f;
}

/* Lent */

.interval {
    font-family: monospace;
    font-weight: bold;
}

.last-updated {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    padding-top: 15px;
}

.pulse-text {
    color: #ff0000;
    font-weight: bold;
    animation: opacityPulse 1.5s infinite;
}

@keyframes opacityPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* RESPONSIVE TRACK MAP */
@media (max-width: 1024px) {
    .telemetry-grid {
        grid-template-columns: 1fr;
    }

    .map-container {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .track-conditions {
        gap: 10px;
    }

    .condition-box {
        min-width: calc(50% - 5px);
        padding: 10px;
    }

    /* 2 par ligne sur mobile */
    .cond-val {
        font-size: 1rem;
    }

    .map-container {
        height: 250px;
    }

    .driver-dot {
        width: 10px;
        height: 10px;
    }

    .dot-label {
        font-size: 0.5rem;
        top: 12px;
    }

    .timing-table th:nth-child(5),
    .timing-table td:nth-child(5),
    .timing-table th:nth-child(6),
    .timing-table td:nth-child(6),
    .timing-table th:nth-child(7),
    .timing-table td:nth-child(7) {
        display: none;
        /* Cache les secteurs S1 S2 S3 sur mobile pour garder la lisibilité */
    }
}