:root { --yellow: #FFFF00; --black: #050505; --grey: #151515; --red: #ff0000; }
        
body, html { 
    margin: 0; 
    padding: 0; 
    height: 100dvh; /* Utilise le dynamic viewport height */
    background: var(--black); 
    color: var(--yellow); 
    font-family: 'Courier New', monospace; 
    overflow: hidden; 
}        
        #app { display: grid; grid-template-columns: 1fr 500px; grid-template-rows: auto 1fr 130px; height: 100dvh; }

        @media (max-width: 900px) {
            #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr 300px 110px; }
        }

        header { grid-column: 1 / span 2; border-bottom: 2px solid var(--yellow); background: var(--black); z-index: 1001; padding: 10px 20px; }
        .logo { color: var(--yellow); font-size: 1.5rem; font-weight: bold; letter-spacing: 3px; }
        #nav { display: flex; overflow-x: auto; padding: 10px 0; gap: 10px; }
        .day-btn { background: transparent; border: 1px solid var(--yellow); color: var(--yellow); padding: 6px 15px; cursor: pointer; font-weight: bold; flex-shrink: 0; }
        .day-btn.active { background: var(--yellow); color: var(--black); box-shadow: 0 0 10px var(--yellow); }

        #map-container { grid-row: 2; grid-column: 1; position: relative; background: #000; }
        #map { height: 100%; width: 100%; }
        .leaflet-tile-container { filter: grayscale(1) invert(1) brightness(0.4) contrast(1.5); }
        
        #impact-legend {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#impact-legend.hidden { opacity: 0; }

.legend-item {
    font-size: 0.6rem;
    color: #aaa;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Couleurs des pastilles */
.glass { background: #000000; border-color: #444; }
.airblast { background: #ffffff; }
.seismic { background: #00ffcc; }
.lethal { background: #ff6600; }

        /* MARKERS */
        .marker-msg, .marker-radio { background: var(--yellow); border: 2px solid #000; border-radius: 50%; color: #000; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 12px; }
        .marker-radio { background: var(--red); border-color: white; }
        
        .active-pulse { 
            animation: pulse-ring 1.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
            box-shadow: 0 0 0 15px rgba(255, 255, 0, 0);
            border: 2px solid white !important;
            z-index: 999 !important;
        }
        @keyframes pulse-ring { 
            0% { box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7); }
            100% { box-shadow: 0 0 0 20px rgba(255, 255, 0, 0); }
        }

        #side-panel { grid-row: 2; grid-column: 2; background: var(--grey); border-left: 2px solid var(--yellow); overflow-y: auto; z-index: 2; }
        @media (max-width: 900px) { #side-panel { grid-row: 3; grid-column: 1; border-left: none; border-top: 2px solid var(--yellow); } }
        
        .sidebar-header { background: var(--yellow); color: var(--black); padding: 12px; font-weight: bold; position: sticky; top: 0; z-index: 10; }
        .entry-card { background: #0a0a0a; border: 1px solid #333; padding: 15px; margin: 10px; cursor: pointer; border-left: 5px solid var(--yellow); }
        .entry-card.playing { border-left-color: #fff; background: #222; }

        footer { grid-column: 1 / span 2; border-top: 2px solid var(--yellow); display: flex; align-items: center; padding: 0 25px; background: #000; z-index: 1002; gap: 30px; }
        #track-info { width: 280px; flex-shrink: 0; overflow: hidden; }
        .player-main { flex-grow: 1; display: flex; align-items: center; gap: 20px; }
        .play-btn { background: var(--yellow); color: #000; border: none; padding: 12px 20px; font-weight: bold; cursor: pointer; min-width: 70px; }
        .timeline-box { display: flex; align-items: center; gap: 15px; flex-grow: 1; margin: 0 10px; }
        
        input[type=range] { -webkit-appearance: none; background: #222; height: 6px; cursor: pointer; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; background: var(--yellow); border-radius: 0; border: 1px solid #000; }

        .volume-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding-left: 20px; border-left: 1px solid #333; }
        .vol-slider-wrapper { height: 70px; width: 30px; display: flex; align-items: center; justify-content: center; position: relative; }
        .vol-slider { transform: rotate(-90deg); width: 60px !important; position: absolute; }
        .vol-label { font-size: 0.6rem; font-weight: bold; margin-top: 5px; }

        @media (max-width: 900px) {
            #track-info, .volume-container { display: none; }
            footer { padding: 10px; gap: 10px; }
        }



#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--black);
    color: var(--yellow);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

.podcast-container {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: fade-up 1s ease-out 1.2s both; /* Apparaît juste après la description */
}

.podcast-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    opacity: 0.7;
}

.podcast-links {
    display: flex;
    gap: 20px;
}

/* Force la couleur pour les liens d'icônes */
.podcast-icon {
    width: 32px;
    height: 32px;
    color: var(--yellow); /* Définit la couleur de base pour 'currentColor' */
    fill: var(--yellow);  /* Sécurité supplémentaire pour le remplissage */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Évite que le lien ne change de couleur s'il a été cliqué (visited) */
.podcast-icon:visited {
    color: var(--yellow);
}

.podcast-icon:hover {
    filter: drop-shadow(0 0 10px var(--yellow));
    transform: scale(1.1);
}

.podcast-icon svg {
    width: 100%;
    height: 100%;
}

/* --- EFFET DE SCANLINE (Lignes de balayage) --- */
.scanline {
    width: 100%;
    height: 100px;
    z-index: 10001;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 204, 0, 1) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 6s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% { bottom: 100%; }
    100% { bottom: -100px; }
}

/* --- ANIMATION DU CONTENU --- */
.splash-content {
    max-width: 600px;
    padding: 40px;
    border: 1px solid var(--yellow);
    text-align: center;
    background: rgba(5, 5, 5, 0.9);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.1);
    position: relative;
    /* Animation d'allumage de l'écran */
    animation: crt-power-on 0.5s ease-out both;
}

/* --- LE TITRE GLITCHÉ --- */
.splash-title {
    font-size: 5rem;
    margin: 0;
    letter-spacing: 15px;
    text-shadow: 2px 0px 5px var(--yellow);
    animation: flicker 0.1s infinite;
}

/* --- EFFET MACHINE À ÉCRIRE SUR LA DESCRIPTION --- */
.splash-desc {
    text-align: justify;
    line-height: 1.6;
    margin: 30px 0;
    /* Apparition en bloc pour le multi-ligne */
    animation: fade-up 1s ease-out 0.8s both;
}

/* --- BOUTON PULSATION --- */
#connect-btn {
    background: transparent;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    padding: 15px 30px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    animation: pulse 2s infinite;
}

#connect-btn:hover {
    background: var(--yellow);
    color: var(--black);
    box-shadow: 0 0 30px var(--yellow);
}

/* --- KEYFRAMES --- */

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--yellow) }
}

@keyframes flicker {
    0% { opacity: 0.98; }
    50% { opacity: 1; }
    100% { opacity: 0.99; }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 204, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); }
}

@keyframes crt-power-on {
    0% { transform: scaleY(0.005) scaleX(0); opacity: 0; }
    50% { transform: scaleY(0.005) scaleX(1); opacity: 1; }
    100% { transform: scaleY(1) scaleX(1); opacity: 1; }
}
.splash-subtitle {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--yellow);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.splash-author {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 30px;
}



/* Animation de sortie */
.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-out, visibility 1s;
}
#final-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    pointer-events: none;
    /* On ne met pas de transition ici pour garder le contrôle total via JS */
}

#generique-video {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #F1F1F3; /* Fond blanc derrière la vidéo au cas où */
}

/* État flashé : fond blanc et opacité totale */
.state-white {
    background-color: #F1F1F3 !important;
    opacity: 1 !important;
}

.flash-white { background-color: white !important; opacity: 1 !important; }