/* ========================================
   RÉINITIALISATION ET BASE
======================================== */

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden; /* Empêche le scroll */
    background: #0a0e27;
    color: white;
    height: 100vh;
}

/* ========================================
   FOND ÉTOILÉ (Canvas)
======================================== */

#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(ellipse at center, #1a1f3a 0%, #0a0e27 100%);
}


/* ========================================
   FOND ÉTOILÉ ANIMÉ - VERSION CORRIGÉE
======================================== */

/* Première couche d'étoiles (petites et rapides) */
.stars,
.stars::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    border-radius: 50%;
    /* Crée des petites étoiles blanches */
    box-shadow: 
        100px 50px white, 300px 100px white, 500px 150px white,
        700px 80px white, 900px 180px white, 1100px 120px white,
        1300px 90px white, 1500px 160px white, 200px 200px white,
        400px 250px white, 600px 300px white, 800px 280px white,
        1000px 320px white, 1200px 270px white, 1400px 350px white,
        150px 400px white, 350px 450px white, 550px 420px white,
        750px 480px white, 950px 440px white, 1150px 500px white,
        80px 550px white, 280px 580px white, 480px 620px white,
        680px 590px white, 880px 640px white, 1080px 610px white,
        1280px 670px white, 120px 700px white, 320px 730px white,
        520px 760px white, 720px 710px white, 920px 780px white;
    animation: animateStars 80s linear infinite;
}

/* Double les étoiles pour créer un effet continu */
.stars::after {
    content: "";
    position: fixed;
    top: 2000px;
}

/* Deuxième couche d'étoiles (moyennes, vitesse moyenne) */
.stars2,
.stars2::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 
        200px 100px white, 400px 150px white, 600px 200px white,
        800px 120px white, 1000px 250px white, 1200px 180px white,
        1400px 220px white, 250px 300px white, 450px 350px white,
        650px 320px white, 850px 380px white, 1050px 340px white,
        1250px 400px white, 180px 450px white, 380px 480px white,
        580px 520px white, 780px 490px white, 980px 540px white,
        1180px 510px white, 220px 600px white, 420px 630px white,
        620px 660px white, 820px 620px white, 1020px 680px white;
    animation: animateStars 100s linear infinite;
}

.stars2::after {
    content: "";
    position: fixed;
    top: 2000px;
}

/* Troisième couche d'étoiles (grandes et lentes) */
.stars3,
.stars3::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 
        300px 120px white, 500px 180px white, 700px 230px white,
        900px 160px white, 1100px 270px white, 1300px 200px white,
        350px 330px white, 550px 380px white, 750px 350px white,
        950px 410px white, 1150px 370px white, 280px 470px white,
        480px 510px white, 680px 480px white, 880px 540px white,
        1080px 500px white, 320px 610px white, 520px 650px white;
    animation: animateStars 150s linear infinite;
}

.stars3::after {
    content: "";
    position: fixed;
    top: 2000px;
}

/* Animation de déplacement des étoiles */
@keyframes animateStars {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-2000px);
    }
}


/* ========================================
   TITRE PRINCIPAL
======================================== */

.main-title {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 100;
    animation: fadeInDown 1s ease;
}

.main-title h1 {
    font-size: 3.5rem;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}

.main-title p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 2px;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   SYSTÈME SOLAIRE - CONTENEUR PRINCIPAL
======================================== */

.solar-system {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* ========================================
   ÉTOILE CENTRALE (SOLEIL)
======================================== */

.sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    z-index: 50;
}

/* Lueur extérieure du soleil */
.sun-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, 
        rgba(255, 200, 50, 0.4) 0%, 
        rgba(255, 150, 50, 0.2) 30%,
        transparent 70%
    );
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

/* Cœur du soleil */
.sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, 
        #FDB813 0%, 
        #FF8C00 50%, 
        #FF6347 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 60px rgba(255, 200, 50, 0.8),
        inset 0 0 30px rgba(255, 100, 50, 0.5);
    animation: rotate 20s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================
   ORBITES DES PLANÈTES
======================================== */

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    pointer-events: none;
}

.orbitlight {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

/* Tailles des orbites */
.orbit-1 {
    width: 300px;
    height: 300px;
    animation: orbitRotate 15s linear infinite;
}

.orbit-2 {
    width: 420px;
    height: 420px;
    animation: orbitRotate 22s linear infinite;
}

.orbit-3 {
    width: 540px;
    height: 540px;
    animation: orbitRotate 30s linear infinite;
}

.orbit-4 {
    width: 660px;
    height: 660px;
    animation: orbitRotate 38s linear infinite;
}

.orbit-5 {
    width: 780px;
    height: 780px;
    animation: orbitRotate 47s linear infinite;
}

.orbit-6 {
    width: 900px;
    height: 900px;
    animation: orbitRotate 55s linear infinite;
}

/* Animation de rotation des orbites */
@keyframes orbitRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================
   PLANÈTES
======================================== */

.planet {
    position: absolute;
    top: -30px; /* -30px = la moitié de 60px (taille de la planète) */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Contre-rotation pour garder la planète droite */
    animation: counterRotate 15s linear infinite;
}


/* Exemple avec des planètes de 80px */
.planet80 {
    width: 80px;
    height: 80px;
    top: -40px; /* 80px / 2 = 40px */
}

/* Exemple avec des planètes de 50px */
.planet50 {
    width: 50px;
    height: 50px;
    top: -25px; /* 50px / 2 = 25px */
}


/* Chaque planète a sa propre vitesse de contre-rotation */
.orbit-1 .planet { 
    pointer-events: auto;
    animation: counterRotate 15s linear infinite;
    top: -30px; /* Centre la planète sur l'orbite */
}

.orbit-2 .planet {
    pointer-events: auto; 
    animation: counterRotate 22s linear infinite;
    top: -30px;
}

.orbit-3 .planet {
    pointer-events: auto; 
    animation: counterRotate 30s linear infinite;
    top: -30px;
}

.orbit-4 .planet {
    pointer-events: auto; 
    animation: counterRotate 38s linear infinite;
    top: -30px;
}

.orbit-5 .planet {
    pointer-events: auto; 
    animation: counterRotate 47s linear infinite;
    top: -30px;
}

.orbit-6 .planet {
    pointer-events: auto;
    animation: counterRotate 55s linear infinite;
    top: -30px;
}

@keyframes counterRotate {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(-360deg); }
}

/* Surface de la planète */
.planet-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--planet-color, #4A90E2);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.3),
        inset -10px -10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Effet de relief sur la planète */
.planet-surface::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 50%
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, 10px); }
}


/* Couleurs des planètes (définies via JavaScript) */
.planet-1 .planet-surface { background: #F39C12; }
.planet-2 .planet-surface { background: #E24A90; }
.planet-3 .planet-surface { background: #50C878; }
.planet-4 .planet-surface { background: #FFB84D; }
.planet-5 .planet-surface { background: #9B59B6; }
.planet-6 .planet-surface { background: #4A90E2; }

/* ========================================
   LABELS DES PLANÈTES 
======================================== */

.planet-label {
    position: absolute;
    bottom: -35px; /* Position sous la planète */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 14, 39, 0.9);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1; /* Toujours visible */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 10;
    /* Animation d'apparition */
    animation: labelFadeIn 0.5s ease forwards;
}

@keyframes labelFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   EFFETS AU SURVOL DES PLANÈTES
========================================*/ 

.planet:hover {
    transform: translateX(-50%) scale(1.3);
    filter: brightness(1.3);
    z-index: 100;
}

.planet:hover .planet-label {
    opacity: 1;
    bottom: -40px;
    transform: translateX(-50%) scale(1.1);
    background: rgba(102, 126, 234, 0.95);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}

.planet:hover .planet-surface {
    box-shadow: 
        0 0 40px rgba(255, 255, 255, 0.6),
        inset -10px -10px 20px rgba(0, 0, 0, 0.5);
}

/* ========================================
   OVERLAY DE TRANSITION (Animation de plongée)
======================================== */

.transition-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        var(--transition-color, #4A90E2) 0%, 
        #0a0e27 100%
    );
    z-index: 9999;
    pointer-events: none;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Classe activée lors du clic */
.transition-overlay.active {
    transform: translate(-50%, -50%) scale(30);
}

/* ========================================
   INSTRUCTIONS EN BAS D'ÉCRAN
======================================== */

.instructions {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
    animation: bounce 2s ease-in-out infinite;
}

.instructions p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}
/* ========================================
   RESPONSIVE - VERSION CORRIGÉE
======================================== */

@media (max-width: 768px) {
    .main-title h1 {
        font-size: 2rem;
    }
    
    .orbit-1 { width: 200px; height: 200px; }
    .orbit-2 { width: 280px; height: 280px; }
    .orbit-3 { width: 360px; height: 360px; }
    .orbit-4 { width: 440px; height: 440px; }
    .orbit-5 { width: 520px; height: 520px; }
    .orbit-6 { width: 600px; height: 600px; }
    
    .planet {
        width: 40px;
        height: 40px;
        top: -20px; /* CORRECTION : 40px / 2 = 20px */
    }
    
    .sun-core {
        width: 80px;
        height: 80px;
    }
}