:root { 
    --neon: #FFFFFF; 
    --bg: #000000; 
    --dark-gray: #111111; /* Fond de la timeline */
    --accent: #333333;
    --glitch-red: rgba(255, 0, 0, 0.3);
    --glitch-blue: rgba(0, 255, 255, 0.3);
}
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* { box-sizing: border-box; font-family: 'Share+Tech+Mono', monospace; text-transform: uppercase; }
body, html { 
    background: var(--bg); color: var(--neon); 
    margin: 0; padding: 0; height: 100dvh; overflow: hidden; 
    /* Effet Scanlines CRT */
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
}

p {
    max-width:600px;
    width: 80%;
    text-align: center;
    margin-bottom: 2rem;
}

.mini-logo {
    height: 100%;
    max-height: 30px;
}

.container { display: flex; flex-direction: column; height: 100vh; }
.hidden { display: none !important; }

header { padding: 5px; border-bottom: 1px solid var(--neon); font-weight: bold; letter-spacing: 2px; }
main { flex: 1; display: flex; overflow: hidden; }
.logo {
    width: 250px;
}

/* Container des icônes */
.podcast-links {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espace entre les deux icônes */
    margin-top: 2.5rem;
}

/* Style des icônes */
.podcast-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    color: #666; /* Couleur par défaut (discrète) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.podcast-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor; /* Permet de changer la couleur via le CSS */
}

/* Effet au survol (Néon) */
.podcast-icon:hover {
    color: var(--blue-neon); /* Devient bleu néon */
    transform: translateY(-5px); /* Petit saut vers le haut */
    filter: drop-shadow(0 0 10px var(--blue-neon)); /* Halo lumineux */
}

/* Grille des Participants */
#grid { flex: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; padding: 20px; overflow-y: auto; }
.user-card { opacity:0.4; border: 1px solid var(--accent); padding: 15px; background: rgba(255, 255, 255, 0.02); height: 150px; display: flex; flex-direction: column; }
.user-card.active { opacity:1; border: 1px solid var(--neon); box-shadow: 0 0 15px rgba(255,255,255,0.2); }
.user-card canvas { width: 100%; height: 80px; margin-top: auto; filter: brightness(1.5); }

/* Sidebar et Timeline avec couleur de fond */
#sidebar { flex: 1; border-left: 1px solid var(--neon); display: flex; flex-direction: column; min-width: 400px; background: var(--bg); }
.sidebar-header { padding: 10px; border-bottom: 1px solid var(--neon); text-align: center; font-weight: bold; background: var(--bg); }
#list { overflow-y: auto; flex: 1; background: var(--dark-gray); } /* Fond de la timeline */

.date-separator { background: var(--neon); color: var(--bg); padding: 5px 15px; font-weight: bold; font-size: 0.8rem; position: sticky; top: 0; z-index: 10; }
.timeline-item { opacity: 0.5; padding: 15px; border-bottom: 1px solid var(--accent); cursor: pointer; transition: 0.2s; background: var(--dark-gray); }
.timeline-item:hover { opacity: 0.9; background: var(--accent); }
.timeline-item.active { opacity:1; border-left: 5px solid var(--neon); background: rgba(255, 255, 255, 0.15); }

/* Footer et Sliders avec couleur de fond pleine */
footer { height: 100px; border-top: 1px solid var(--neon); display: flex; align-items: center; padding: 0 20px; gap: 30px; background: var(--bg); }
.progress-zone { flex: 1; display: flex; align-items: center; gap: 15px;         margin-bottom: 0.5rem;}

#progress-bar {
    width: 100%;
}

input[type=range] {
    -webkit-appearance: none; /* Désactive le style système pour Chrome/Safari */
    appearance: none;         /* Standard */
    width: 100%;
    background: transparent;  /* Évite un fond gris par défaut sur l'input */
    cursor: pointer;
}

/* Chrome, Safari, Edge */
input[type=range]::-webkit-slider-runnable-track { 
    -webkit-appearance: none; /* Crucial pour Chrome/Safari */
    background: var(--accent); 
    height: 10px; 
    width: 100%;
}

    /* Firefox */
    input[type=range]::-moz-range-track { 
        background: var(--accent); 
        height: 10px; 
        width: 100%;
    }

/* Le fond (track) est maintenant en blanc plein (var(--neon)) */
input[type=range]::-webkit-slider-runnable-track { 
    background: var(--neon); 
    height: 10px; 
    border: 1px solid var(--bg); 
}
    /* Firefox */
    input[type=range]::-moz-range-track { 
        background: var(--neon); 
        height: 10px; 
    }


input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; /* Désactive le rond bleu par défaut */
    background: grey; 
    height: 16px; 
    width: 10px;
    margin-top: -4px; /* Ajustement pour centrer verticalement sur la track */ 
}

    /* Firefox */
    input[type=range]::-moz-range-thumb { 
        background: grey; 
        height: 16px; 
        width: 10px;
        margin-top: -8px; 
        border: none; /* Firefox ajoute souvent une bordure par défaut */
        border-radius: 0; /* Pour garder la forme rectangulaire */
    }

#gain-slider {
    margin-bottom: 0.5rem;
}

/* --- SPLASH SCREEN ANIMÉ --- */

#splash {
    position: fixed; 
    inset: 0; 
    background: var(--bg); 
    z-index: 1000; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    overflow: hidden;
}

/* Effet de grain/static très léger en fond */
#splash::before {
    content: "";
    position: absolute;
    inset: -100%; /* Plus large pour permettre le mouvement */
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Noise_Texture.png");
    opacity: 0.03; /* Très subtil */
    z-index: -1;
    animation: noise-drift 0.2s infinite steps(4);
}

/* Effet de respiration lumineuse (vignette) */
#splash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    z-index: -1;
    animation: breathing-glow 4s ease-in-out infinite;
}

/* --- NOUVELLES ANIMATIONS --- */

/* Fait sauter le grain pour simuler le bruit vidéo */
@keyframes noise-drift {
    0% { transform: translate(0,0); }
    25% { transform: translate(5px, 10px); }
    50% { transform: translate(-10px, 5px); }
    75% { transform: translate(2px, -7px); }
    100% { transform: translate(0,0); }
}

/* Simulation de la pulsation du tube cathodique */
@keyframes breathing-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Animation de flottement pour le logo et le texte */
#splash .logo, #splash h1 {
    z-index: 2;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.glitch-text { animation: glitch 0.4s infinite; text-align: center; }

/* --- ÉCRAN FINAL GLITCHÉ --- */

.blackout {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: none; /* Flex quand actif via JS */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden; /* Important pour contenir les effets */
    /* Animation globale du conteneur : tremblement et distorsion */
    animation: terminal-failure 0.2s infinite;
    /* Force la couleur du texte en blanc néon pour le contraste */
    color: var(--neon) !important; 
}

/* Le texte du titre */
.blackout h1.glitch-text {
    font-size: 3rem;
    /* On garde ton animation de texte existante, mais on la rend plus rapide */
    animation: glitch 0.2s infinite reverse; 
    z-index: 2; /* Au-dessus des effets de fond */
    width: 80%;
}

/* COUCHE 1 : Scanlines défilantes (Fond animé) */
.blackout::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 51%
    );
    background-size: 100% 4px; /* Taille des lignes */
    animation: scanline-scroll 6s linear infinite;
    opacity: 0.6;
}

/* COUCHE 2 : Stroboscope et Flashs RGB (Effet d'interférence) */
.blackout::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 3; /* Par-dessus le texte par moments */
    background: rgba(255, 0, 0, 0.2); /* Teinte rouge de base */
    mix-blend-mode: screen; /* Mode de fusion agressif */
    opacity: 0;
    animation: rgb-strobe 0.3s steps(3) infinite;
}

/* --- KEYFRAMES DES NOUVELLES ANIMATIONS --- */

/* Tremblement violent et déformation de l'écran entier */
@keyframes terminal-failure {
    0% { transform: translate(0px, 0px) skewX(0deg); filter: brightness(1); }
    10% { transform: translate(-3px, 1px) skewX(2deg); filter: brightness(1.5); }
    30% { transform: translate(2px, -2px) skewX(-1deg); }
    50% { transform: translate(-1px, 3px) skewX(0.5deg); filter: brightness(0.8) contrast(2); }
    70% { transform: translate(4px, -1px) skewX(-2deg); }
    90% { transform: translate(-2px, 2px) skewX(1deg); }
    100% { transform: translate(0px, 0px) skewX(0deg); }
}

/* Défilement des scanlines */
@keyframes scanline-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; /* Défile sur toute la hauteur */ }
}

/* Flashs de couleurs stroboscopiques */
@keyframes rgb-strobe {
    0% { opacity: 0; }
    10% { opacity: 1; background: rgba(255, 0, 0, 0.3); transform: translateX(-5px); }
    50% { opacity: 0; }
    60% { opacity: 1; background: rgba(0, 255, 255, 0.3); transform: translateX(5px); }
    100% { opacity: 0; }
}

@keyframes glitch { 
    0% { transform: translate(0); text-shadow: 1px 1px var(--glitch-red), -1px -1px var(--glitch-blue); }
    50% { transform: scale(1.01); opacity: 0.8; }
    100% { transform: translate(0); }
}

/* État final : Mort du signal */
.blackout.dead {
    animation: none !important;
    background: #000 !important;
}

/* On supprime les scanlines et les flashs RGB */
.blackout.dead::before, 
.blackout.dead::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* Le message final reste propre et fixe */
.final-signal {
    font-family: 'Share Tech Mono', monospace;
    color: var(--neon);
    font-size: 1.2rem;
    letter-spacing: 5px;
    opacity: 0.8;
}

.final-signal::after {
    content: "_";
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

.play-btn { background: transparent; color: var(--neon); border: 1px solid var(--neon); padding: 10px 25px; font-weight: bold; cursor: pointer; }
.play-btn:hover { background: var(--neon); color: var(--bg); }

.start-btn { background: transparent; 
padding: 15px 70px;    font-size: 1rem;
    color: var(--neon); border: 1px solid var(--neon); font-weight: bold; cursor: pointer; }
.start-btn:hover { background: var(--neon); color: var(--bg); }
#hidden-reset { position: absolute; bottom: 5px; right: 5px; width: 15px; height: 15px; cursor: crosshair; opacity: 0.05; }

.infos {
    flex-grow: 1;
}
/* --- CONFIGURATION MOBILE --- */
@media (max-width: 768px) {
    /* Désactivation du défilement global pour garder les zones fixes */
    body, html { overflow: hidden; }
    
    .container { height: 100dvh; }

    /* Le titre reste en haut */
    header {
        padding: 10px;
        font-size: 0.9rem;
        height: 45px;
    }

    /* Organisation verticale : Participants en haut, Timeline en bas */
    main {
        flex-direction: column;
        height: calc(100dvh - 45px - 100px); /* Hauteur restante entre header et footer */
    }

    /* Grille des participants compacte (Partie Haute) */
    #grid {
        flex: 1; /* Prend l'espace disponible au-dessus de la timeline */
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour gagner de la place */
        gap: 8px;
        padding: 10px;
        overflow-y: auto;
        border-bottom: 1px solid var(--neon);
    }

    /* Cartes participants version mini */
    .user-card {
        height: 55px; /* Hauteur réduite */
        padding: 5px;
        font-size: 0.6rem;
    }

    /* Waveform en version mini */
    .user-card canvas {
        height: 30px; 
        margin-top: 5px;
    }

    /* Timeline occupant 50% du bas de l'écran (Partie Basse) */
    #sidebar {
        flex: none;
        height: 50%;
        width: 100%;
        border-left: none;
        min-width: 100%;
    }

    .sidebar-header {
        padding: 5px;
        font-size: 0.7rem;
    }

    .timeline-item {
        padding: 10px;
        font-size: 0.75rem;
    }

    .date-separator {
        padding: 3px 10px;
        font-size: 0.7rem;
    }

    /* --- LECTEUR AUDIO (FOOTER) --- */
    footer {
        height: 100px;
        padding: 10px;
        gap: 10px;
        flex-wrap: wrap; /* Permet l'alignement sur deux lignes si besoin */
        justify-content: flex-start;
    }

    /* Alignement à gauche du bouton et des infos */
    .footer-left {
        justify-content: flex-start;
        gap: 10px;
    }

    .play-btn {
        padding: 8px 15px;
        font-size: 0.8rem;
        width: 100%;
    }

    .start-btn {
        padding: 15px;
        font-size: 1rem;
        width: 80%;
    }

    .status-info {
        font-size: 0.65rem;
        text-align: left;
    }

    /* Barre de progression adaptée */
    .progress-zone {
        width: 100%;
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }

    /* Suppression du volume (Gain) sur mobile */
    .gain-control {
        display: none;
    }

    /* Le reset caché reste accessible dans le coin */
    #hidden-reset {
        display: block;
        opacity: 0.2;
    }

.blackout h1.glitch-text {
font-size: 1.8rem;
}
}