/* Fond sombre */
body {
    background-color: #121212;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #eee;
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    min-height: 100vh;
    position: relative;
}

	/* Mot en violet sans glow */
	.neon-highlight {
   		color: #a366ff;
    		text-shadow: none;
	}

/* Navbar container */
.topnav {
    display: flex;
    flex-wrap: wrap; /* Permet aux liens de passer à la ligne si nécessaire */
    justify-content: center; /* Centre horizontalement sur desktop et mobile */
    margin-bottom: 30px;
}

/* Liens de la navbar */
.topnav a {
    color: #aaa;
    text-decoration: none;
    margin: 5px 10px; /* marge adaptée pour mobile */
    font-weight: 600;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Liens actifs ou hover */
.topnav a.active,
.topnav a:hover {
    background-color: #7a5cff;
    color: white;
}

/* Adaptation mobile avec media query */
@media (max-width: 500px) {
    .topnav a {
        flex: 1 1 100%; /* chaque lien prend toute la largeur disponible */
        text-align: center;
        margin: 5px 0;
    }
}

/* Titre principal */
h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Carte service */
.card.service {
    background-color: #222;
    padding: 30px 25px;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
    transition: transform 0.3s ease;
}

.card.service:hover {
    transform: translateY(-8px);
}

.card.service h2 {
    color: #b49cff;
    margin-bottom: 12px;
    cursor: pointer;
}

.info-box {
    background-color: #341a70;
    color: #d1c9fc;
    padding: 20px 30px;
    margin: 0 auto 50px auto;
    border-radius: 8px;
    max-width: 600px;
    font-size: 1.2rem;
    font-weight: 500;
    box-shadow: none;
}


/* ---------- Lumières floues ---------- */
.light-blur {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.6;
    pointer-events: none;
}

.light1 { background: rgba(163, 102, 255, 0.6); top: 15%; left: 20%; }
.light2 { background: rgba(203, 163, 255, 0.5); top: 60%; left: 65%; }
.light3 { background: rgba(102, 163, 255, 0.4); top: 40%; left: 80%; }
.light4 { background: rgba(145, 102, 255, 0.5); top: 30%; left: 75%; }
.light5 { background: rgba(180, 140, 255, 0.4); top: 75%; left: 25%; }
.light6 { background: rgba(90, 130, 255, 0.45); top: 85%; left: 70%; }

/* Animations pour les lumières (facultatif) */
@keyframes moveLight1 {0%{transform:translate(0,0)}50%{transform:translate(40px,30px)}100%{transform:translate(0,0)}}
@keyframes moveLight2 {0%{transform:translate(0,0)}50%{transform:translate(-35px,25px)}100%{transform:translate(0,0)}}
@keyframes moveLight3 {0%{transform:translate(0,0)}50%{transform:translate(-30px,-40px)}100%{transform:translate(0,0)}}
@keyframes moveLight4 {0%{transform:translate(0,0)}50%{transform:translate(45px,-20px)}100%{transform:translate(0,0)}}
@keyframes moveLight5 {0%{transform:translate(0,0)}50%{transform:translate(-40px,35px)}100%{transform:translate(0,0)}}
@keyframes moveLight6 {0%{transform:translate(0,0)}50%{transform:translate(38px,-38px)}100%{transform:translate(0,0)}}

.light1 { animation: moveLight1 6s ease-in-out infinite; }
.light2 { animation: moveLight2 7s ease-in-out infinite; }
.light3 { animation: moveLight3 5.5s ease-in-out infinite; }
.light4 { animation: moveLight4 6.5s ease-in-out infinite; }
.light5 { animation: moveLight5 6.8s ease-in-out infinite; }
.light6 { animation: moveLight6 6.2s ease-in-out infinite; }