/* =========================================
    1. VARIABLES & FOND (GRID + NOISE)
    ========================================= */
    :root {
        --cyan: #00ffcc;
        --magenta: #ff00ff;
        --red: #ff4d4d;
        --bg: #030303;
        --glass: rgba(15, 15, 15, 0.95);
    }

    * { 
        box-sizing: border-box; 
        transition: 0.2s ease; 
    }

    body {
        margin: 0;
        background-color: var(--bg);
        background-image: 
            linear-gradient(rgba(0, 255, 204, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 204, 0.05) 1px, transparent 1px),
            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
        background-size: 30px 30px, 30px 30px, 100% 4px;
        color: white;
        font-family: 'Courier New', Courier, monospace;
        overflow-x: hidden;
        position: relative;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Noise_Texture.png');
        opacity: 0.08;
        pointer-events: none;
        z-index: 9999;
    }

    body::after {
        content: "";
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 8px;
        background: var(--cyan);
        box-shadow: 0 0 15px var(--cyan), 0 0 30px var(--cyan);
        animation: scanline 8s linear infinite, scanlineGlitch 0.15s linear infinite;
        pointer-events: none;
        z-index: 2;
    }

    @keyframes scanline {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100vh); }
    }

    @keyframes scanlineGlitch {
        0% { left: 0; opacity: 0.3; }
        10% { left: -20px; opacity: 0.7; }
        14% { left: 0; opacity: 0.3; }
    }

    /* =========================================
    3. HEADER & LOGO
    ========================================= */
    header {
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        /* On passe de 100px à 60px pour qu'il soit un peu plus à gauche */
        padding: 10px 5% 10px 60px; 
        border-bottom: 2px solid var(--cyan);
        background: rgba(0, 0, 0, 1);
        position: sticky; 
        top: 0; 
        z-index: 100;
    }

    #logout-btn {
        color: var(--red);
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-weight: bold;
        text-transform: uppercase;
    }

    .logo-link {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
    }

    .header-logo {
        height: 40px;
        filter: drop-shadow(0 0 5px var(--cyan));
    }

    h1 {
        margin: 0;
        font-size: 1.8rem;
        text-shadow: 0 0 10px var(--cyan);
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    /* =========================================
    4. CONTENU & HERO
    ========================================= */
    .container {
        max-width: 1200px;
        margin: 100px auto;
        text-align: center;
        position: relative;
        z-index: 10;
    }

    .hero-title {
        font-size: 3.5rem;
        text-shadow: 0 0 20px var(--cyan);
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .hero-subtitle {
        display: block;
        color: #666;
        font-size: 0.9rem;
        letter-spacing: 8px;
        text-transform: uppercase;
        margin-bottom: 40px;
    }

    /* =========================================
    5. BOUTONS & MODALES
    ========================================= */
    .btn {
        padding: 12px 20px; 
        cursor: pointer; 
        border: 2px solid;
        background: transparent; 
        font-family: inherit; 
        font-weight: bold;
        text-transform: uppercase;
        clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0% 30%);
        display: inline-block;
    }

    .btn-cyan { border-color: var(--cyan); color: var(--cyan); }
    .btn-cyan:hover { background: var(--cyan); color: black; box-shadow: 0 0 15px var(--cyan); }

    .btn-magenta {
        border-color: var(--magenta);
        color: var(--magenta);
        padding: 15px 40px;
    }

    .auth-box {
        width: 400px;  
        background: #000;
        border: 1px solid var(--cyan);
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;
        box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
    }

    .modal-overlay {
        display: none; 
        position: fixed; 
        inset: 0; 
        background: rgba(0,0,0,0.9); 
        justify-content: center; 
        align-items: center; 
        z-index: 1000;
    }

    input {
        width: 100%; 
        padding: 12px; 
        background: rgba(0,0,0,0.8); 
        border: 1px solid #333; 
        color: var(--cyan);
        font-family: inherit;
        margin-bottom: 5px;
    }

    input:focus {
        border-color: var(--cyan);
        outline: none;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
    }

    .auth-status {
        padding: 10px;
        font-size: 0.8rem;
        text-align: center;
        text-transform: uppercase;
        border: 1px solid var(--red);
        color: var(--red);
        background: rgba(255, 77, 77, 0.1);
        display: none;
    }

    #auth-toggle {
        display: block !important;
        margin-top: 5px;
        font-size: 0.75rem;
        color: #888;
        border-color: #444;
    }

    #auth-toggle:hover {
        color: white;
        border-color: white;
    }

    .otp-field {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .otp-inputs-container {
        display: flex;
        gap: 8px;
    }

    .otp-digit {
        width: 40px;
        height: 50px;
        background: #111;
        border: 1px solid var(--cyan);
        color: var(--cyan);
        font-size: 1.5rem;
        text-align: center;
    }
    /* --- CORRECTIF FINAL : LOGO, GLITCH FIXE & MAGENTA --- */

    /* On s'assure que le logo n'a pas de marge parasite */
    .logo-link {
        margin: 0 !important; 
    }

    /* Glitch SANS mouvement (Les lettres restent fixes) */
    .header-title:hover, .hero-title:hover {
        animation: glitchCouleur 0.2s infinite !important;
        transform: none !important;
        display: inline-block;
    }

    @keyframes glitchCouleur {
        0% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); }
        50% { text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan); }
        100% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); }
    }

    /* Retour du remplissage Magenta */
    .btn-magenta {
        transition: all 0.3s ease !important;
    }

    .btn-magenta:hover {
        background: var(--magenta) !important;
        color: white !important;
        box-shadow: 0 0 20px var(--magenta) !important;
    }