/* Variables globales */
:root {
    --neon-red: #FF4500;
    --neon-blue: #00CED1;
    --neon-gold: #FFD700;
    --neon-purple: #8A2BE2;
    --neon-green: #228B22;
    --dark-bg: #0d0d1a;
    --glitch-shadow: 0 0 10px rgba(255, 69, 0, 0.8), 0 0 20px rgba(0, 206, 209, 0.6);
    --3d-depth: 20px;
}
/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
}
    body {
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    perspective: 1000px;
    transition: all 0.5s ease;
}

/* Backgrounds Thèmes Uniques */
.lava-bg {
    background: radial-gradient(circle at 50% 50%, #ff4500, #ff1493 30%, #0d0d1a 70%);
    /* Pas de filter ni d'animation par défaut – statique et net */
}

.lava-bg.dark-plus {
    animation: lava-flow 10s infinite ease-in-out, wave-blur 3s infinite ease-out;
}

@keyframes lava-flow {
    0% { transform: scale(1) rotate(0deg); background-position: 0 0; }
    25% { transform: scale(1.1) rotate(5deg); background-position: 50px 50px; }
    50% { transform: scale(1) rotate(-5deg); background-position: 0 100px; }
    75% { transform: scale(1.1) rotate(5deg); background-position: -50px 50px; }
    100% { transform: scale(1) rotate(0deg); background-position: 0 0; }
}

@keyframes wave-blur {
    0% { filter: blur(0px) contrast(1.5); } /* Net au départ */
    50% { filter: blur(15px) contrast(2); } /* Pic de flou */
    100% { filter: blur(0px) contrast(1.5); } /* Retour net */
}

/* Sombre++ global ajuste juste la brightness et saturate */
.dark-plus {
    filter: brightness(0.7) contrast(1.5) saturate(2);
    animation: dark-pulse 3s infinite;
}

@keyframes dark-pulse {
    0%, 100% { filter: brightness(0.7) contrast(1.5) saturate(2); }
    50% { filter: brightness(0.5) contrast(2) saturate(3); }
}

        .matrix-theme {
            background: #000;
            animation: matrix-rain 4s infinite linear;
        }

        .matrix-theme::before {
            content: '';
            position: fixed;
            top: -100%;
            left: 0;
            width: 100%;
            height: 300%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMCIvPjx0ZXh0IHg9IjUiIHk9IjUwIiBmb250LWZhbWlseT0iQ291cmllciBOZXciIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiMwMEZGMDAiPjAxMTAwMTAwMDEwMTAxMDEwMTAxMDAxMDAxMDEwMTAxMDAxMDEwMDAxMDEwMTAxPC90ZXh0Pjwvc3ZnPg==') repeat;
            animation: rain-fall 8s infinite linear;
            filter: blur(1px);
            opacity: 0.7;
            z-index: -1;
        }

        @keyframes matrix-rain {
            0% { background-position: 0 0; }
            100% { background-position: 0 200px; }
        }

        @keyframes rain-fall {
            0% { transform: translateY(0); }
            100% { transform: translateY(100%); }
        }

        .cyberpunk-theme {
            background: conic-gradient(from 45deg at 50% 50%, #ff00ff, #00ffff, #ffff00, #ff00ff);
            animation: cyber-shift 6s infinite alternate;
            filter: saturate(2);
        }

        @keyframes cyber-shift {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.2); }
            100% { transform: rotate(360deg) scale(1); }
        }

        /* Animations */
        @keyframes glitch-text {
            0% { transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
            20% { transform: translate3d(-5px, 5px, var(--3d-depth)); clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); }
            40% { transform: translate3d(5px, -5px, calc(var(--3d-depth) * -1)); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%); }
            60% { transform: translate3d(-5px, -5px, var(--3d-depth)); clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%); }
            80% { transform: translate3d(5px, 5px, calc(var(--3d-depth) * -1)); clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 60%); }
            100% { transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
        }

        @keyframes neon-flicker {
            0%, 100% { opacity: 1; transform: translateZ(0); }
            50% { opacity: 0.7; text-shadow: var(--glitch-shadow); transform: translateZ(var(--3d-depth)); }
        }

        @keyframes warning-glow {
            0%, 100% { box-shadow: 0 0 10px var(--neon-red); transform: scale(1); }
            50% { box-shadow: 0 0 20px var(--neon-red), 0 0 30px rgba(255, 0, 0, 0.5); transform: scale(1.1); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1) translateZ(0); }
            50% { transform: scale(1.2) translateZ(var(--3d-depth)); }
        }

        @keyframes disintegrate {
            0% { opacity: 1; transform: scale(1) rotateX(0deg); }
            100% { opacity: 0; transform: scale(0) rotateX(90deg); }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0) translateZ(0); }
            50% { transform: translateY(-15px) translateZ(var(--3d-depth)); }
        }

        @keyframes sway {
            0% { transform: translateX(-10px) translateZ(0); }
            50% { transform: translateX(10px) translateZ(var(--3d-depth)); }
            100% { transform: translateX(-10px) translateZ(0); }
        }

        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(20px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
        }

        /* Éléments de base */
        h1 {
            font-size: 2.5em;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 5px;
            margin: 20px 0;
            animation: glitch-text 2s infinite;
            transform-style: preserve-3d;
        }

        p {
            font-size: 1.2em;
            text-align: center;
            padding: 10px;
        }

        /* Composants spécifiques */
        .lecon {
            font-size: 1.5em;
            font-weight: bold;
            padding: 20px;
            border: 2px solid var(--neon-red);
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.8);
            margin: 20px auto;
            max-width: 800px;
            box-shadow: var(--glitch-shadow);
            animation: neon-flicker 1.5s infinite;
            transform-style: preserve-3d;
            transition: transform 0.3s ease;
        }

        .lecon:hover {
            transform: scale(1.05) translateZ(var(--3d-depth));
            animation: bounce 0.5s ease;
        }

        .radar {
            color: var(--neon-green);
            font-size: 1.3em;
            transform-style: preserve-3d;
        }

        .threat-box {
            background: rgba(255, 0, 0, 0.2);
            border: 2px solid var(--neon-red);
            padding: 15px;
            margin: 20px auto;
            max-width: 600px;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
            animation: warning-glow 2s infinite;
            display: none;
            transform-style: preserve-3d;
        }

        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
            background: rgba(0, 0, 0, 0.9);
            border-top: 2px solid var(--neon-blue);
            z-index: 10;
            transform-style: preserve-3d;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
        }

        .neon-heart {
            color: var(--neon-red);
            animation: pulse 1s infinite;
        }

        .disintegrate {
            animation: disintegrate 1s forwards;
        }

        #qrcode {
            display: flex;
            justify-content: center;
            margin: 10px 0;
            transform-style: preserve-3d;
        }

        /* Emoji Pop */
        .emoji-pop {
            position: absolute;
            font-size: 2em;
            cursor: pointer;
            animation: pulse 1s infinite, bounce 2s infinite;
            transition: transform 0.3s ease;
            transform-style: preserve-3d;
            text-shadow: 0 0 10px var(--neon-purple);
        }

        .emoji-pop:hover {
            transform: scale(1.5) translateZ(var(--3d-depth));
        }

        /* Emoji Statiques Sombre++ */
        .emoji-static {
            position: fixed;
            font-size: 1.5em;
            animation: sway 3s infinite ease-in-out, pulse 1s infinite;
            text-shadow: 0 0 15px var(--neon-red), 0 0 30px var(--neon-blue);
            z-index: 5;
        }

        /* Cadre Indices */
        .hint-box {
            position: fixed;
            left: 10px;
            top: 20%;
            width: 250px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid var(--neon-purple);
            border-radius: 5px;
            box-shadow: var(--glitch-shadow);
            animation: neon-flicker 2s infinite;
            transform-style: preserve-3d;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .hint-box.active {
            opacity: 1;
        }

        .hint-box h3 {
            color: var(--neon-gold);
            margin-bottom: 10px;
        }

        .hint-box p {
            font-size: 0.9em;
            text-align: left;
        }

        /* Parallaxe */
        .parallax {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            opacity: 0.3;
            transform-style: preserve-3d;
        }

        .parallax-layer {
            position: absolute;
            width: 200%;
            height: 200%;
            animation: move 10s linear infinite;
        }

        @keyframes move {
            0% { transform: translateX(0) translateZ(0); }
            100% { transform: translateX(-50%) translateZ(var(--3d-depth)); }
        }

        /* Boutons */
        #dark-mode-toggle, #theme-select {
            position: fixed;
            top: 10px;
            right: 10px;
            background: var(--dark-bg);
            color: var(--neon-blue);
            border: 1px solid var(--neon-blue);
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            z-index: 10;
            transition: all 0.3s;
            transform-style: preserve-3d;
        }

        #theme-select {
            top: 40px;
        }

        #dark-mode-toggle:hover, #theme-select:hover {
            background: var(--neon-blue);
            color: var(--dark-bg);
            transform: scale(1.1) translateZ(var(--3d-depth));
        }

        /* Hacker Name */
        .hacker-id {
            margin: 10px auto;
            padding: 5px 10px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid var(--neon-green);
            border-radius: 5px;
            max-width: 400px;
            transition: transform 0.3s ease;
            transform-style: preserve-3d;
        }

        .hacker-id:hover {
            transform: rotate(2deg) translateZ(var(--3d-depth));
        }

        /* Notifications */
        .notification {
            position: fixed;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 206, 209, 0.8);
            color: #000;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            z-index: 100;
            display: none;
            animation: fadeInOut 4s ease-in-out;
            transform-style: preserve-3d;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translate(-50%, -20px) translateZ(0); }
            20%, 80% { opacity: 1; transform: translate(-50%, 0) translateZ(var(--3d-depth)); }
            100% { opacity: 0; transform: translate(-50%, -20px) translateZ(0); }
        }

        /* Mode Sombre++ */
        .dark-plus {
            filter: brightness(0.7) contrast(1.5) saturate(2);
            animation: dark-pulse 3s infinite;
        }

        @keyframes dark-pulse {
            0%, 100% { filter: brightness(0.7) contrast(1.5) saturate(2); }
            50% { filter: brightness(0.5) contrast(2) saturate(3); }
        }

        /* Liens sociaux */
        .social-link {
            color: var(--neon-blue);
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s;
        }

        .social-link:hover {
            color: var(--neon-red);
        }