/* Variables pour les couleurs */
:root {
    --neon-green: #39ff14;
    /* Vert néon intense */
    --dark-green: rgba(0, 50, 0, 0.8);
    /* Fond vert sombre semi-transparent */
    --border-thickness: 3px;
}

body,
html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    /* Empêche le défilement et garde la vidéo en plein écran */
    font-family: 'Monospace', sans-serif;
    /* Police qui fait "écran de terminal" */
    color: var(--neon-green);
}

/* -------------------- Vidéo de Fond -------------------- */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Met la vidéo en arrière-plan */
    /* Assure une couverture complète de l'écran, peu importe la taille */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------- Pop-up d'Alerte -------------------- */
.alert-popup {
    /* Positionnement de la pop-up au centre */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    /* Le style par défaut (caché) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
    /* Transition rapide pour l'effet "glitch" */

    /* Taille de la pop-up */
    padding: 20px;
    max-width: 400px;
    width: 80%;
    background-color: var(--dark-green);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
    /* Lueur subtile */
}

/* Style de la bordure et du contenu */
.alert-content {
    border: var(--border-thickness) solid var(--neon-green);
    padding: 15px;
    text-align: center;
}

.alert-content p {
    margin: 5px 0;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    /* Effet d'ombre de texte pour renforcer l'effet néon */
    text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
}

/* Classe affichée par JS */
.is-visible {
    opacity: 1;
    visibility: visible;
    /* L'effet bluffant de pulsation de la bordure */
    animation: neon-pulse 1s infinite alternate;
}

/* Animation de pulsation de la bordure */
@keyframes neon-pulse {
    from {
        border-color: var(--neon-green);
        box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
    }

    to {
        border-color: #008000;
        /* Vert un peu plus sombre */
        box-shadow: 0 0 15px var(--neon-green), 0 0 25px rgba(57, 255, 20, 0.8);
    }
}