:root {
    --accent: #00d4ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

/* FOND SPLIT */
.split-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; z-index: -2;
}
.left-side { width: 50%; background-color: #000; }
.right-side { width: 50%; background-color: #fff; }

#canvas-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}

header {
    background: #000; padding: 1.2rem 5%; position: sticky; top: 0; z-index: 100;
}

.logo { font-family: 'Orbitron', sans-serif; color: #fff; font-size: 1.5rem; }
.logo span { color: var(--accent); }

nav { display: flex; justify-content: space-between; align-items: center; }
.nav-links { display: flex; list-style: none; }
.nav-links li a {
    color: #888; text-decoration: none; margin-left: 2rem;
    font-family: 'Orbitron', sans-serif; font-size: 0.8rem; transition: 0.3s;
}
.nav-links li a.active { color: var(--accent); }

.container { padding: 4rem 5%; display: flex; justify-content: center; }
.content-page { display: none; width: 100%; max-width: 800px; }
.content-page.active { display: block; animation: slideUp 0.5s ease; }

/* CARTES GÉNÉRIQUES */
.glass-card {
    padding: 3rem; border: 10px solid var(--accent);
    background: linear-gradient(to right, #000 50%, #fff 50%);
    text-align: center;
}
.glass-card h1, .glass-card h2, .glass-card p {
    background: linear-gradient(to right, #fff 50%, #000 50%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* SECTION FORMULAIRE (LA DERNIÈRE PAGE) */
.form-container {
    background: #fff; /* Fond blanc pour une lisibilité maximale */
    padding: 3rem; border: 8px solid #000;
    box-shadow: 15px 15px 0px var(--accent);
    color: #000;
}

.form-subtitle { margin-bottom: 2rem; font-weight: 300; color: #666; }

.input-group {
    margin-bottom: 1.5rem; text-align: left;
}

.input-group label {
    display: block; font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem; margin-bottom: 8px; color: #000;
}

.input-group input, .input-group textarea {
    width: 100%; padding: 12px; border: 3px solid #000;
    font-family: 'Inter', sans-serif; font-size: 1rem; outline: none;
}

.input-group input:focus { border-color: var(--accent); }

.btn {
    width: 100%; background: #000; color: #fff; border: none;
    padding: 18px; font-family: 'Orbitron'; cursor: pointer; transition: 0.3s;
}
.btn:hover { background: var(--accent); color: #000; }

#feedback { margin-top: 15px; font-weight: bold; color: var(--accent); }

.tag { background: var(--accent); color: #000; padding: 4px 10px; font-family: 'Orbitron'; font-size: 0.7rem; }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }