/* --- VARIABLES DE COULEURS --- */
:root {
    --primary: #ff003c;
    --primary-dark: #80001e;
    --bg: #0a0a0c;
}

/* --- CONFIGURATION GÉNÉRALE --- */
body {
    background-color: var(--bg);
    color: white;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

.font-title { font-family: 'Syncopate', sans-serif; }

/* --- ANIMATION : GRILLE DE FOND (Perspective terrain RL) --- */
.grid-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(to right, rgba(255, 0, 60, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 0, 60, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: center top;
    z-index: -1;
    animation: moveGrid 20s linear infinite;
}

@keyframes moveGrid {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

/* --- EFFET VISUEL : GLITCH AU SURVOL --- */
.glitch {
    position: relative;
    display: inline-block;
}
.glitch:hover::before {
    content: attr(data-text);
    position: absolute;
    left: -2px; text-shadow: 2px 0 #ff003c;
    top: 0; color: white; background: var(--bg);
    overflow: hidden; clip: rect(0, 900px, 0, 0);
    animation: noise-1 2s infinite linear alternate-reverse;
}
@keyframes noise-1 {
    0% { clip: rect(10px, 9999px, 20px, 0); }
    100% { clip: rect(80px, 9999px, 90px, 0); }
}

/* --- CARTES JOUEURS : STYLE HUD (Angles coupés) --- */
.hud-card {
    clip-path: polygon(0 0, 90% 0, 100% 15%, 100% 100%, 10% 100%, 0 85%);
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--primary);
    transition: all 0.3s ease;
}
.hud-card:hover {
    background: rgba(255, 0, 60, 0.08);
    transform: translateY(-10px);
    border-left: 4px solid var(--primary);
}

/* --- ANIMATION : FLOTTEMENT (Image voiture) --- */
.float { animation: floating 3s ease-in-out infinite; }
@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* --- PERSONNALISATION DE LA BARRE DE DÉFILEMENT --- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0a0c; }
::-webkit-scrollbar-thumb { background: var(--primary); }