/* ════════════════════════════════════════════════════
   GRIZZLY STREAM – BLIND TEST CSS
   blind-test.css
   ════════════════════════════════════════════════════ */

/* ─── VARIABLES (reprises de main.css) ─────────────── */
:root {
    --bg-primary:    #0a0a0a;
    --bg-secondary:  #141414;
    --bg-card:       #1a1a1a;
    --text-primary:  #ffffff;
    --text-secondary:#b3b3b3;
    --accent-bright: #e50914;
    --accent-gold:   #ffd700;
    /* Blind-test extras */
    --bt-glow:       rgba(229, 9, 20, 0.4);
    --bt-correct:    #22c55e;
    --bt-wrong:      #ef4444;
    --bt-neutral:    #3b82f6;
    --bt-border:     rgba(255,255,255,0.08);
}

/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Work Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* ════════════════════════════════════════════════════
   NAVBAR (copie exacte de main.css)
   ════════════════════════════════════════════════════ */
.navbar {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 60px; gap: 20px;
    transition: all 0.4s ease;
    background: transparent !important;
    backdrop-filter: none !important;
}
.navbar.scrolled {
    background: rgba(10,10,10,0.3) !important;
    backdrop-filter: blur(5px);
}
.logo {
    font-family: 'Bebas Neue', cursive;
    font-size: 38px; letter-spacing: 3px;
    color: var(--accent-bright); font-weight: 700;
    text-shadow: 2px 2px 10px rgba(229,9,20,0.6);
    cursor: pointer; text-decoration: none;
}
.nav-links { display:flex; gap:35px; list-style:none; }
.nav-links a {
    color: var(--text-primary); text-decoration:none;
    font-size:16px; font-weight:500;
    transition: all 0.3s ease; position:relative;
}
.nav-links a::after {
    content:''; position:absolute; bottom:-5px; left:0;
    width:0; height:2px; background:var(--accent-bright);
    transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.nav-active::after { width:100%; }
.nav-links a:hover, .nav-links a.nav-active { color:var(--accent-bright); }

.nav-right { display:flex; align-items:center; gap:15px; }
.search-container { position:relative; }
.search-wrapper { position:relative; }
.search-input {
    width:240px; padding:10px 40px 10px 40px;
    border-radius:25px; border:solid 1px rgba(255,255,255,0.2);
    background:#000 !important; color:white;
    transition:all .3s ease-in-out; outline:none;
    font-family:'Work Sans',sans-serif; font-size:14px;
}
.search-icon {
    position:absolute; top:50%; left:12px;
    transform:translateY(-50%); fill:rgba(255,255,255,0.7);
    width:18px; height:18px; transition:all 0.3s ease; pointer-events:none;
}
.search-clear {
    position:absolute; top:50%; right:12px;
    transform:translateY(-50%); background:transparent; border:none;
    color:rgba(255,255,255,0.7); font-size:20px; cursor:pointer;
    padding:0; width:20px; height:20px;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s ease;
}
.search-input:not(:placeholder-shown) + .search-icon + .search-clear { opacity:1; }
.search-clear:hover { color:white; }
.search-input:focus { border-color:rgba(255,255,255,0.4); }
.search-input:focus + .search-icon { fill:var(--accent-bright); }
.search-input::placeholder { color:rgba(255,255,255,0.6); }
.search-results {
    display:none; position:absolute; top:100%; left:0; width:100%;
    background:rgba(20,20,20,0.98); backdrop-filter:blur(20px);
    border-radius:0 0 10px 10px; margin-top:5px;
    box-shadow:0 10px 30px rgba(0,0,0,0.7);
    border:1px solid rgba(255,255,255,0.1); border-top:none;
    max-height:600px; overflow-y:auto; z-index:1001;
}
.search-results.active { display:block; }

/* ── Dropdown résultats navbar ── */
.search-results::-webkit-scrollbar { width:4px; }
.search-results::-webkit-scrollbar-track { background:transparent; }
.search-results::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }

.search-result-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    cursor:pointer;
    transition:background 0.2s ease;
}
.search-result-item:hover { background:rgba(255,255,255,0.05); }

.search-result-poster {
    width:42px;
    height:63px;
    object-fit:cover;
    border-radius:4px;
    flex-shrink:0;
}

.search-result-info {
    flex:1;
    min-width:0;
}

.search-result-title {
    font-size:14px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:4px;
}

.search-result-meta {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text-secondary, #b3b3b3);
    flex-wrap:nowrap;
}

.search-result-type { font-weight:700; }
.result-type-film   { color:#e50914 !important; }
.result-type-serie  { color:#2196f3 !important; }

.search-result-rating { color:#ffd700; font-weight:600; }
.search-result-year   { color:var(--text-secondary, #b3b3b3); }

.search-result-empty {
    padding:16px;
    text-align:center;
    color:#888;
    font-size:13px;
}

.search-show-all {
    padding:12px;
    text-align:center;
    color:var(--accent-bright, #e50914);
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    border-top:1px solid rgba(255,255,255,0.05);
    transition:background 0.2s ease;
}
.search-show-all:hover { background:rgba(229,9,20,0.08); }

.btn-connexion {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 16px; background:transparent; color:white;
    text-decoration:none; border-radius:50px;
    font-size:14px; font-weight:400; transition:all 0.3s ease;
    border:1px solid rgba(255,255,255,0.2); cursor:pointer; white-space:nowrap;
}
.connexion-icon {
    width:20px; height:20px;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>') no-repeat center;
    background-size:contain;
}
.connexion-text { margin-right:4px; }
.connexion-arrow { font-size:10px; opacity:0.7; margin-top:1px; }
.btn-connexion:hover { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.3); }

/* BURGER */
.burger {
    position:relative; width:40px; height:30px;
    background:transparent; cursor:pointer; display:none;
    flex-shrink:0; z-index:1001;
}
.burger input { display:none; }
.burger span {
    display:block; position:absolute; height:4px; width:100%;
    background:white; border-radius:9px; opacity:1; left:0;
    transform:rotate(0deg); transition:.25s ease-in-out;
    box-shadow:0 0 5px rgba(255,255,255,0.5);
}
.burger span:nth-of-type(1) { top:0px; transform-origin:left center; }
.burger span:nth-of-type(2) { top:50%; transform:translateY(-50%); transform-origin:left center; }
.burger span:nth-of-type(3) { top:100%; transform-origin:left center; transform:translateY(-100%); }
.burger input:checked ~ span:nth-of-type(1) { transform:rotate(45deg); top:0px; left:5px; }
.burger input:checked ~ span:nth-of-type(2) { width:0%; opacity:0; }
.burger input:checked ~ span:nth-of-type(3) { transform:rotate(-45deg); top:28px; left:5px; }

/* MENU MOBILE */
.mobile-menu {
    position:fixed; top:70px; left:0; right:0;
    background:rgba(10,10,10,0.98); backdrop-filter:blur(20px);
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:all 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
    z-index:999; border-bottom:1px solid rgba(255,255,255,0.1);
    max-height:calc(100vh - 70px); overflow-y:auto;
}
.mobile-menu.active { transform:translateY(0); opacity:1; visibility:visible; }
.mobile-menu nav { display:flex; flex-direction:column; padding:20px; }
.mobile-menu a {
    color:var(--text-primary); text-decoration:none; font-size:18px;
    font-weight:500; padding:15px 20px;
    border-bottom:1px solid rgba(255,255,255,0.05); transition:all 0.3s ease;
}
.mobile-menu a:hover { background:rgba(229,9,20,0.1); color:var(--accent-bright); padding-left:30px; }

/* RESPONSIVE NAVBAR */
@media(min-width:1801px) { .nav-links{display:flex!important;} .burger{display:none!important;} }
@media(max-width:1800px) {
    .navbar{padding:15px 20px;gap:15px;} .logo{font-size:28px;flex-shrink:0;}
    .nav-links{display:none!important;} .burger{display:block!important;}
    .search-input{width:220px;font-size:13px;padding:8px 35px 8px 35px;}
    .search-icon{width:16px;height:16px;left:10px;}
}
@media(max-width:480px) {
    .navbar{padding:12px 15px;gap:10px;} .logo{font-size:24px;}
    .search-input{width:100px;} .search-input:focus{width:150px;}
}

/* ════════════════════════════════════════════════════
   HERO BLIND TEST
   ════════════════════════════════════════════════════ */
.bt-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 120px 80px 80px;
    overflow: hidden;
    gap: 60px;
}

.bt-hero-bg {
    position: absolute; inset:0; z-index:0;
    background: radial-gradient(ellipse at 20% 50%, rgba(229,9,20,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(255,215,0,0.05) 0%, transparent 50%),
                var(--bg-primary);
}
.bt-hero-bg::after {
    content:'';
    position:absolute; inset:0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 80px,
        rgba(255,255,255,0.01) 80px, rgba(255,255,255,0.01) 81px
    ),
    repeating-linear-gradient(
        90deg, transparent, transparent 80px,
        rgba(255,255,255,0.01) 80px, rgba(255,255,255,0.01) 81px
    );
}

.bt-hero-particles {
    position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.bt-hero-particles .particle {
    position:absolute; border-radius:50%;
    background: var(--accent-bright);
    animation: particleFloat linear infinite;
    opacity:0;
}
@keyframes particleFloat {
    0%   { transform:translateY(100vh) scale(0); opacity:0; }
    10%  { opacity:0.6; }
    90%  { opacity:0.3; }
    100% { transform:translateY(-20px) scale(1); opacity:0; }
}

.bt-hero-content { position:relative; z-index:2; max-width:600px; }
.bt-hero-badge {
    display:inline-block;
    background: rgba(229,9,20,0.15);
    border: 1px solid rgba(229,9,20,0.4);
    color: var(--accent-bright);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 24px;
    animation: fadeSlideDown 0.8s ease both;
}
.bt-hero-title {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(60px, 8vw, 110px);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 24px;
    animation: fadeSlideDown 0.8s ease 0.1s both;
}
.bt-title-accent {
    color: var(--accent-bright);
    text-shadow: 0 0 40px rgba(229,9,20,0.6), 0 0 80px rgba(229,9,20,0.3);
}
.bt-hero-sub {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 48px;
    animation: fadeSlideDown 0.8s ease 0.2s both;
}
.bt-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    animation: fadeSlideDown 0.8s ease 0.3s both;
}
.bt-stat { text-align:center; }
.bt-stat-num {
    display: block;
    font-family: 'Bebas Neue', cursive;
    font-size: 42px;
    color: var(--accent-bright);
    line-height: 1;
}
.bt-stat-label { font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; }
.bt-stat-sep { width:1px; height:40px; background:rgba(255,255,255,0.15); }

@keyframes fadeSlideDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* VINYL */
.bt-hero-visual {
    position: relative; z-index:2;
    display: flex; flex-direction:column;
    align-items:center; gap:30px;
    flex-shrink:0;
}
.vinyl-record {
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, #1a1a1a 0%, #000 30%, #111 31%, #1a1a1a 40%,
        #000 41%, #111 50%, #1a1a1a 51%, #000 60%, #111 61%, #1a1a1a 70%, #000 100%);
    box-shadow: 0 0 60px rgba(229,9,20,0.3), 0 0 120px rgba(229,9,20,0.1);
    animation: vinylSpin 4s linear infinite paused;
    position: relative;
}
.vinyl-record.playing { animation-play-state:running; }
.vinyl-inner {
    position: absolute; top:50%; left:50%;
    width: 80px; height: 80px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background: radial-gradient(circle, #e50914 0%, #8b0000 50%, #300 100%);
    box-shadow:0 0 20px rgba(229,9,20,0.6);
}
.vinyl-dot {
    position:absolute; top:50%; left:50%;
    width:10px; height:10px; border-radius:50%;
    background:#fff; transform:translate(-50%,-50%);
}
@keyframes vinylSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* SOUND WAVES */
.sound-waves {
    display:flex; align-items:flex-end; gap:4px; height:50px;
}
.sound-waves span {
    display:block; width:6px; border-radius:3px;
    background: var(--accent-bright);
    animation: wave 1.2s ease-in-out infinite;
    min-height:6px;
}
.sound-waves span:nth-child(1){animation-delay:0s;     height:20px;}
.sound-waves span:nth-child(2){animation-delay:0.1s;   height:35px;}
.sound-waves span:nth-child(3){animation-delay:0.2s;   height:50px;}
.sound-waves span:nth-child(4){animation-delay:0.3s;   height:28px;}
.sound-waves span:nth-child(5){animation-delay:0.4s;   height:44px;}
.sound-waves span:nth-child(6){animation-delay:0.5s;   height:32px;}
.sound-waves span:nth-child(7){animation-delay:0.6s;   height:50px;}
.sound-waves span:nth-child(8){animation-delay:0.7s;   height:22px;}
.sound-waves span:nth-child(9){animation-delay:0.8s;   height:40px;}
.sound-waves span:nth-child(10){animation-delay:0.9s;  height:16px;}
@keyframes wave {
    0%,100% { transform:scaleY(0.3); opacity:0.4; }
    50%      { transform:scaleY(1);   opacity:1; }
}
.sound-waves.paused span { animation-play-state:paused; }

/* ════════════════════════════════════════════════════
   SECTIONS COMMUNES
   ════════════════════════════════════════════════════ */
.bt-section-title {
    font-family:'Bebas Neue',cursive;
    font-size:clamp(32px,4vw,52px);
    letter-spacing:3px;
    margin-bottom:12px;
}
.bt-section-title span { color:var(--accent-bright); }

/* ════════════════════════════════════════════════════
   CONFIGURATION
   ════════════════════════════════════════════════════ */
.bt-config { padding:80px 80px; background: var(--bg-secondary); }
.bt-config-inner { max-width:960px; margin:0 auto; }
.bt-config-group { margin-bottom:40px; }
.bt-config-label {
    font-size:14px; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; color:var(--text-secondary);
    margin-bottom:16px;
}

/* TOGGLES */
.bt-toggle-group { display:flex; flex-wrap:wrap; gap:12px; }
.bt-toggle {
    display:flex; align-items:center; gap:8px;
    padding:10px 20px; border-radius:50px;
    border:1px solid var(--bt-border);
    background: transparent; color:var(--text-secondary);
    font-size:14px; font-weight:600; cursor:pointer;
    transition:all 0.25s ease;
    font-family:'Work Sans',sans-serif;
}
.bt-toggle:hover { border-color:rgba(229,9,20,0.4); color:var(--text-primary); }
.bt-toggle.active {
    background:rgba(229,9,20,0.12);
    border-color:var(--accent-bright);
    color:var(--text-primary);
    box-shadow:0 0 15px rgba(229,9,20,0.2);
}
.bt-toggle-icon { font-size:18px; }

/* DIFFICULTÉ */
.bt-difficulty-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bt-diff-btn {
    padding:20px 16px; border-radius:12px;
    border:1px solid var(--bt-border);
    background:var(--bg-card); cursor:pointer;
    transition:all 0.25s ease; text-align:center;
    font-family:'Work Sans',sans-serif; color:var(--text-secondary);
}
.bt-diff-btn:hover { border-color:rgba(229,9,20,0.4); transform:translateY(-2px); }
.bt-diff-btn.active {
    border-color:var(--accent-bright);
    background:rgba(229,9,20,0.1);
    color:var(--text-primary);
    box-shadow:0 4px 20px rgba(229,9,20,0.2);
}
.bt-diff-icon { font-size:28px; margin-bottom:8px; }
.bt-diff-name { font-weight:700; font-size:16px; margin-bottom:4px; }
.bt-diff-desc { font-size:12px; color:var(--text-secondary); }

/* MODE D'AFFICHAGE */
.bt-mode-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bt-mode-card {
    padding:20px; border-radius:12px;
    border:1px solid var(--bt-border); background:var(--bg-card);
    cursor:pointer; transition:all 0.25s ease; text-align:center;
    display:block;
}
.bt-mode-card input[type="radio"] { display:none; }
.bt-mode-card:hover { border-color:rgba(229,9,20,0.4); transform:translateY(-2px); }
.bt-mode-card:has(input:checked), .bt-mode-card.active {
    border-color:var(--accent-bright);
    background:rgba(229,9,20,0.1);
    box-shadow:0 4px 20px rgba(229,9,20,0.2);
}
.bt-mode-icon { font-size:28px; margin-bottom:8px; }
.bt-mode-name { font-weight:700; font-size:15px; margin-bottom:4px; color:var(--text-primary); }
.bt-mode-desc { font-size:12px; color:var(--text-secondary); line-height:1.4; }

/* NB QUESTIONS */
.bt-questions-selector { display:flex; gap:12px; flex-wrap:wrap; }
.bt-qty-btn {
    width:60px; height:60px; border-radius:50%;
    border:1px solid var(--bt-border); background:var(--bg-card);
    font-size:18px; font-weight:700; cursor:pointer;
    color:var(--text-secondary); transition:all 0.25s ease;
    font-family:'Work Sans',sans-serif;
}
.bt-qty-btn:hover { border-color:rgba(229,9,20,0.4); color:var(--text-primary); }
.bt-qty-btn.active {
    background:var(--accent-bright); border-color:var(--accent-bright);
    color:white; box-shadow:0 0 20px rgba(229,9,20,0.4);
}

/* START BTN */
.bt-start-btn {
    width:100%; padding:20px 40px; margin-top:16px;
    background:var(--accent-bright); border:none; border-radius:12px;
    color:white; font-size:20px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:16px;
    transition:all 0.3s ease; font-family:'Work Sans',sans-serif;
    box-shadow:0 4px 30px rgba(229,9,20,0.4);
    letter-spacing:1px;
}
.bt-start-btn:hover {
    background:#c40812; transform:translateY(-2px);
    box-shadow:0 8px 40px rgba(229,9,20,0.6);
}
.bt-start-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.bt-start-icon { font-size:24px; }
.bt-start-count { font-size:14px; opacity:0.7; font-weight:400; }

.bt-no-tracks {
    text-align:center; padding:16px; margin-top:12px;
    background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
    border-radius:8px; color:#ef4444; font-size:14px;
}

/* ════════════════════════════════════════════════════
   JEU
   ════════════════════════════════════════════════════ */
.bt-game { padding:100px 40px 80px; min-height:100vh; }
.bt-game-inner { max-width:800px; margin:0 auto; }

/* HUD */
.bt-hud {
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:20px; margin-bottom:40px;
}
.bt-hud-right { display:flex; align-items:center; gap:16px; justify-content:flex-end; }
.bt-progress-wrap { display:flex; flex-direction:column; gap:6px; }
.bt-progress-bar {
    height:6px; background:rgba(255,255,255,0.1); border-radius:3px;
    overflow:hidden; width:200px;
}
.bt-progress-fill {
    height:100%; background:var(--accent-bright);
    border-radius:3px; transition:width 0.5s ease;
    box-shadow:0 0 10px rgba(229,9,20,0.5);
}
.bt-progress-text { font-size:13px; color:var(--text-secondary); }

/* TIMER */
.bt-timer { position:relative; width:70px; height:70px; }
.bt-timer-svg { width:70px; height:70px; transform:rotate(-90deg); }
.bt-timer-bg { fill:none; stroke:rgba(255,255,255,0.1); stroke-width:4; }
.bt-timer-ring {
    fill:none; stroke:var(--accent-bright); stroke-width:4;
    stroke-dasharray:163; stroke-dashoffset:0;
    stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke 0.3s ease;
}
.bt-timer-ring.warning { stroke:#fbbf24; }
.bt-timer-ring.danger  { stroke:#ef4444; }
.bt-timer-num {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:'Bebas Neue',cursive; font-size:22px; color:var(--text-primary);
}

.bt-score-display { text-align:right; }
.bt-score-label { display:block; font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; }
.bt-score-num {
    font-family:'Bebas Neue',cursive; font-size:32px;
    color:var(--accent-gold); line-height:1;
}
.bt-streak {
    display:flex; align-items:center; gap:4px;
    background:rgba(255,215,0,0.1); border:1px solid rgba(255,215,0,0.3);
    padding:4px 10px; border-radius:50px; font-size:14px; font-weight:700;
    color:var(--accent-gold);
}

/* LECTEUR */
.bt-player-area {
    background:var(--bg-card); border:1px solid var(--bt-border);
    border-radius:20px; padding:30px;
    margin-bottom:24px; text-align:center;
}
.bt-audio-visual {
    display:flex; align-items:center; justify-content:center;
    gap:40px; margin-bottom:24px;
}
.bt-audio-vinyl {
    width:120px; height:120px; border-radius:50%;
    background: radial-gradient(circle, #1a1a1a 0%, #000 30%, #111 31%, #1a1a1a 40%,
        #000 41%, #111 50%, #1a1a1a 51%, #000 60%, #111 61%, #1a1a1a 70%, #000 100%);
    box-shadow:0 0 30px rgba(229,9,20,0.3); position:relative;
    animation:vinylSpin 4s linear infinite paused;
}
.bt-audio-vinyl.playing { animation-play-state:running; }
.bt-audio-waves { display:flex; align-items:flex-end; gap:3px; height:40px; }
.bt-audio-waves span {
    display:block; width:4px; border-radius:2px; min-height:4px;
    background:var(--accent-bright);
    animation:wave 1.2s ease-in-out infinite;
}
.bt-audio-waves span:nth-child(1){height:16px;animation-delay:0s;}
.bt-audio-waves span:nth-child(2){height:28px;animation-delay:0.1s;}
.bt-audio-waves span:nth-child(3){height:40px;animation-delay:0.2s;}
.bt-audio-waves span:nth-child(4){height:22px;animation-delay:0.3s;}
.bt-audio-waves span:nth-child(5){height:36px;animation-delay:0.4s;}
.bt-audio-waves span:nth-child(6){height:18px;animation-delay:0.5s;}
.bt-audio-waves span:nth-child(7){height:40px;animation-delay:0.6s;}
.bt-audio-waves span:nth-child(8){height:26px;animation-delay:0.7s;}
.bt-audio-waves span:nth-child(9){height:32px;animation-delay:0.8s;}
.bt-audio-waves.paused span { animation-play-state:paused; }

.bt-audio-controls { display:flex; align-items:center; gap:16px; }
.bt-audio-btn {
    width:48px; height:48px; border-radius:50%;
    background:var(--accent-bright); border:none;
    color:white; font-size:18px; cursor:pointer;
    transition:all 0.2s ease; flex-shrink:0;
}
.bt-audio-btn:hover { background:#c40812; transform:scale(1.1); }
.bt-audio-progress { flex:1; }
.bt-audio-bar {
    height:6px; background:rgba(255,255,255,0.15); border-radius:3px; overflow:hidden;
}
.bt-audio-fill {
    height:100%; background:var(--accent-bright);
    border-radius:3px; width:0%;
    transition:width 0.3s ease;
}
.bt-video-player video { width:100%; border-radius:12px; max-height:400px; }

/* INDICE */
.bt-hint { margin-bottom:20px; min-height:36px; }
.bt-hint-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.bt-hint-tag {
    padding:4px 14px; border-radius:50px; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15);
    color:var(--text-secondary);
}
.bt-hint-tag.era { background:rgba(255,215,0,0.1); border-color:rgba(255,215,0,0.3); color:var(--accent-gold); }
.bt-hint-tag.genre { background:rgba(59,130,246,0.1); border-color:rgba(59,130,246,0.3); color:#93c5fd; }
.bt-hint-tag.type { background:rgba(229,9,20,0.1); border-color:rgba(229,9,20,0.3); color:#fca5a5; }

/* RÉPONSES */
.bt-answers {
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px;
}
.bt-answer-btn {
    padding:18px 20px; border-radius:12px;
    border:1px solid var(--bt-border); background:var(--bg-card);
    color:var(--text-primary); font-size:15px; font-weight:600;
    cursor:pointer; transition:all 0.2s ease; text-align:left;
    font-family:'Work Sans',sans-serif; line-height:1.4;
}
.bt-answer-btn:hover:not(:disabled) {
    border-color:rgba(229,9,20,0.5); background:rgba(229,9,20,0.08);
    transform:translateY(-2px);
}
.bt-answer-btn.correct {
    background:rgba(34,197,94,0.15); border-color:var(--bt-correct);
    color:var(--bt-correct); pointer-events:none;
}
.bt-answer-btn.wrong {
    background:rgba(239,68,68,0.15); border-color:var(--bt-wrong);
    color:var(--bt-wrong); pointer-events:none;
}
.bt-answer-btn.disabled { opacity:0.4; pointer-events:none; }
.bt-answer-letter {
    display:inline-block; width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,0.1); font-size:12px; font-weight:700;
    text-align:center; line-height:24px; margin-right:10px; flex-shrink:0;
}

/* MODE EXPERT */
.bt-expert-input {
    display:flex; gap:12px; margin-bottom:20px;
}
.bt-expert-field {
    flex:1; padding:16px 20px; border-radius:12px;
    border:1px solid var(--bt-border); background:var(--bg-card);
    color:var(--text-primary); font-size:16px;
    font-family:'Work Sans',sans-serif; outline:none; transition:all 0.2s ease;
}
.bt-expert-field:focus { border-color:var(--accent-bright); box-shadow:0 0 15px rgba(229,9,20,0.2); }
.bt-expert-submit {
    padding:16px 28px; background:var(--accent-bright); border:none;
    border-radius:12px; color:white; font-weight:700; cursor:pointer;
    font-family:'Work Sans',sans-serif; font-size:15px; transition:all 0.2s ease;
}
.bt-expert-submit:hover { background:#c40812; }

/* FEEDBACK */
.bt-feedback {
    position:fixed; inset:0; z-index:500;
    background:rgba(0,0,0,0.85); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
}
.bt-feedback-inner {
    background:var(--bg-card); border-radius:20px;
    padding:50px 40px; max-width:480px; width:90%;
    text-align:center; border:1px solid var(--bt-border);
    animation:feedbackPop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes feedbackPop {
    from{transform:scale(0.7);opacity:0;}
    to{transform:scale(1);opacity:1;}
}
.bt-feedback-icon { font-size:64px; margin-bottom:16px; }
.bt-feedback-title { font-family:'Bebas Neue',cursive; font-size:36px; margin-bottom:8px; letter-spacing:2px; }
.bt-feedback-detail { color:var(--text-secondary); font-size:15px; margin-bottom:28px; line-height:1.6; }
.bt-next-btn {
    padding:14px 36px; background:var(--accent-bright); border:none;
    border-radius:50px; color:white; font-size:16px; font-weight:700;
    cursor:pointer; font-family:'Work Sans',sans-serif; transition:all 0.2s ease;
}
.bt-next-btn:hover { background:#c40812; transform:scale(1.05); }

/* ════════════════════════════════════════════════════
   RÉSULTATS
   ════════════════════════════════════════════════════ */
.bt-results { padding:120px 40px 80px; min-height:100vh; text-align:center; }
.bt-results-inner { max-width:700px; margin:0 auto; }
.bt-results-medal { font-size:80px; margin-bottom:20px; animation:medalBounce 0.6s 0.2s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes medalBounce { from{transform:scale(0);} to{transform:scale(1);} }
.bt-results-title { font-family:'Bebas Neue',cursive; font-size:48px; letter-spacing:3px; margin-bottom:32px; }
.bt-results-score { margin-bottom:24px; }
.bt-results-big { font-family:'Bebas Neue',cursive; font-size:100px; color:var(--accent-bright); line-height:1; text-shadow:0 0 40px rgba(229,9,20,0.6); }
.bt-results-max { font-size:20px; color:var(--text-secondary); }
.bt-results-stars { display:flex; justify-content:center; gap:8px; font-size:36px; margin-bottom:40px; }
.bt-results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; }
.bt-results-stat {
    background:var(--bg-card); border-radius:12px; padding:20px;
    border:1px solid var(--bt-border);
}
.bt-rs-num { display:block; font-family:'Bebas Neue',cursive; font-size:36px; color:var(--accent-gold); }
.bt-rs-label { font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; }

/* Historique */
.bt-results-history { text-align:left; margin-bottom:40px; }
.bt-results-history h3 {
    font-family:'Bebas Neue',cursive; font-size:28px; letter-spacing:2px;
    margin-bottom:16px; color:var(--text-secondary);
}
.bt-history-list { display:flex; flex-direction:column; gap:8px; }
.bt-history-item {
    display:grid; grid-template-columns:auto 1fr auto auto;
    align-items:center; gap:12px; padding:12px 16px;
    background:var(--bg-card); border-radius:10px;
    border:1px solid var(--bt-border);
}
.bt-history-check { font-size:20px; }
.bt-history-title { font-weight:600; font-size:14px; }
.bt-history-origin { font-size:12px; color:var(--text-secondary); }
.bt-history-pts { font-family:'Bebas Neue',cursive; font-size:22px; color:var(--accent-gold); }

.bt-results-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.bt-action-btn {
    padding:16px 36px; border-radius:50px; font-size:16px; font-weight:700;
    cursor:pointer; font-family:'Work Sans',sans-serif; transition:all 0.3s ease;
    border:none;
}
.bt-action-replay { background:var(--accent-bright); color:white; box-shadow:0 4px 20px rgba(229,9,20,0.4); }
.bt-action-replay:hover { background:#c40812; transform:scale(1.05); }
.bt-action-config { background:var(--bg-card); color:var(--text-primary); border:1px solid var(--bt-border); }
.bt-action-config:hover { border-color:rgba(255,255,255,0.3); }

/* ════════════════════════════════════════════════════
   CATALOGUE
   ════════════════════════════════════════════════════ */
.bt-catalogue { padding:80px 80px 120px; background:var(--bg-primary); }
.bt-catalogue-inner { max-width:1400px; margin:0 auto; }
.bt-catalogue-sub { color:var(--text-secondary); margin-bottom:36px; font-size:16px; }

.bt-cat-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.bt-cat-filter {
    padding:8px 20px; border-radius:50px; font-size:14px; font-weight:600;
    border:1px solid var(--bt-border); background:transparent;
    color:var(--text-secondary); cursor:pointer; transition:all 0.2s ease;
    font-family:'Work Sans',sans-serif;
}
.bt-cat-filter:hover { border-color:rgba(229,9,20,0.4); color:var(--text-primary); }
.bt-cat-filter.active {
    background:var(--accent-bright); border-color:var(--accent-bright);
    color:white;
}

.bt-cat-search-wrap { margin-bottom:36px; }
.bt-cat-input {
    width:100%; max-width:480px; padding:14px 20px;
    border-radius:50px; border:1px solid var(--bt-border);
    background:var(--bg-card); color:var(--text-primary);
    font-size:15px; outline:none; font-family:'Work Sans',sans-serif;
    transition:all 0.3s ease;
}
.bt-cat-input:focus { border-color:var(--accent-bright); box-shadow:0 0 20px rgba(229,9,20,0.2); }
.bt-cat-input::placeholder { color:var(--text-secondary); }

.bt-cards-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:20px;
}
.bt-card {
    background:var(--bg-card); border-radius:16px; padding:20px;
    border:1px solid var(--bt-border); transition:all 0.25s ease;
    cursor:default; overflow:hidden; position:relative;
}
.bt-card:hover { transform:translateY(-4px); border-color:rgba(229,9,20,0.3); box-shadow:0 8px 30px rgba(229,9,20,0.15); }
.bt-card-thumb {
    width:100%; aspect-ratio:16/9; border-radius:10px; object-fit:cover;
    margin-bottom:14px; background:var(--bg-secondary);
    display:flex; align-items:center; justify-content:center; font-size:40px;
}
.bt-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.bt-card-title { font-weight:700; font-size:15px; line-height:1.3; }
.bt-card-origin { font-size:13px; color:var(--text-secondary); margin-bottom:12px; }
.bt-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.bt-card-tag {
    padding:3px 10px; border-radius:50px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px;
}
.bt-card-tag.generique { background:rgba(229,9,20,0.15); color:#fca5a5; }
.bt-card-tag.ost       { background:rgba(59,130,246,0.15); color:#93c5fd; }
.bt-card-tag.film      { background:rgba(168,85,247,0.15); color:#c4b5fd; }
.bt-card-tag.serie     { background:rgba(16,185,129,0.15); color:#6ee7b7; }
.bt-card-tag.anime     { background:rgba(251,191,36,0.15); color:#fde68a; }
.bt-card-tag.disney    { background:rgba(236,72,153,0.15); color:#f9a8d4; }

.bt-card-preview-btn {
    position:absolute; top:12px; right:12px; width:32px; height:32px;
    border-radius:50%; background:rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.2);
    color:white; font-size:14px; cursor:pointer; display:flex;
    align-items:center; justify-content:center; transition:all 0.2s ease;
    opacity:0;
}
.bt-card:hover .bt-card-preview-btn { opacity:1; }
.bt-card-preview-btn:hover { background:var(--accent-bright); border-color:var(--accent-bright); transform:scale(1.1); }

.bt-catalogue-empty { text-align:center; padding:80px 20px; }
.bt-empty-icon { font-size:60px; margin-bottom:16px; }

/* FOOTER */
.footer {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, #0a0a0a 15%);
    padding: 30px 30px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 100px;
}

.footer-main {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    margin-bottom: 20px;
    align-items: start;
}

.footer-left {
    padding-right: 40px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.footer-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
}

/* Grille des icônes (5 colonnes) */
.footer-icons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: center;
}

/* Style de base pour chaque icône */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: filter 0.2s ease;
}

/* Couleurs de survol spécifiques */
.social-icon.github:hover { background-color: #24292e; }
.social-icon.discord:hover { background-color: #5865F2; }
.social-icon.telegram:hover { background-color: #0088cc; }
.social-icon.link:hover { background-color: #666666; }
.social-icon.trustpilot:hover { background-color: #00B67A; }
.social-icon.coffee:hover { background-color: #FFDD00; }
.social-icon.beacons:hover { background-color: #8B5CF6; }
.social-icon.dmca:hover { background-color: #e50914; }
.social-icon.extension:hover { background-color: #FF7139; }
.social-icon.info:hover { background-color: #0078D7; }

/* Optionnel : rendre l'image blanche au survol */
.social-icon:hover img {
    filter: brightness(0) invert(1);
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 13px;
    opacity: 0.9;
}

.footer-author {
    color: var(--accent-bright);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 600;
}

.footer-author:hover {
    color: #ff0a16;
}

/* Responsive footer */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .footer-left {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 50px 25px 25px;
    }
    .footer-main {
        gap: 40px;
    }
    .footer-title {
        text-align: center;
    }
    .footer-text {
        text-align: center;
    }
    .footer-icons-grid {
        gap: 15px;
    }
}