/* --- Variables Globales (Custom Properties) --- */
:root {
    --background-color: #0B0C10; /* Noir spatial profond */
    --primary-text-color: #C5C6C7;
    --accent-color: #66FCF1;
    --accent-darker: #45A29E;
    --secondary-text-color: #1F2833;
}

body {
    /* --- Styles de base pour le corps de la page --- */
    margin: 0;
    font-family: 'Sora', sans-serif;
    background-color: var(--background-color);
    color: var(--primary-text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    cursor: none;
    position: relative;
}

/* --- Header et Navigation --- */
/* Le header est positionné de manière relative pour que le z-index fonctionne */
header {
    padding: 1.5rem 2rem;
    position: relative;
    z-index: 10;
}

nav {
    display: flex;
    justify-content: flex-end;
    max-width: 1200px;
    margin: 0 auto;
}

.login-button {
    /* Style du bouton principal (qui devient "Devenir un Architecte") */
    font-weight: 600;
    color: var(--background-color);
    background-color: var(--accent-color);
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 252, 241, 0.2);
}

.login-button:hover {
    /* Effet au survol du bouton */
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 252, 241, 0.3);
}

/* --- Contenu Principal --- */
.main-content {
    /* Conteneur pour le texte d'accueil et le bouton */
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    position: relative; 
    z-index: 5;
    /* pointer-events est retiré pour que le bouton contact soit cliquable */
}

.main-content .contact-button {
    pointer-events: auto; /* Rend le bouton cliquable */
    margin-top: 1.5rem;
    display: inline-block; /* Empêche le bouton de prendre toute la largeur */
    padding: 8px 20px; /* Padding réduit pour un bouton plus petit */
    font-size: 0.9rem; /* Taille de police légèrement réduite */
}

/* --- Carte de Contact Spécifique --- */
#contact-card-container {
    /* Style de la carte qui apparaît au survol du bouton "Devenir un Architecte" */
    position: fixed; /* Changé pour se centrer sur l'écran */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Ajusté pour un centrage parfait */
    transform-origin: center center; /* L'animation part du centre */
    z-index: 300; /* S'assure qu'elle est au-dessus de tout */
    
    /* Effets visuels pour un look "flottant" et high-tech */
    background-color: rgba(31, 40, 51, 0.9);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.3);
    backdrop-filter: blur(5px);
    
    width: 90%;
    max-width: 450px;
    padding: 20px 25px;
    
    text-align: left;
    color: var(--primary-text-color);
    
    /* Gère l'apparition/disparition de la carte */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

#contact-card-container.visible {
    /* Classe ajoutée par JS pour rendre la carte visible */
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

#contact-card-container h3 { color: var(--accent-color); margin-top: 0; }
#contact-card-container dt { font-weight: 600; margin-bottom: 5px; }
#contact-card-container dd { margin-left: 0; margin-bottom: 15px; font-size: 0.9rem; line-height: 1.6; }
#contact-card-container .contact-card-link {
    display: inline-block;
    text-decoration: none;
    color: #0B0C10;
    background-color: var(--accent-color);
    padding: 8px 15px;
    border-radius: 20px;
}

.container {
    /* Conteneur interne pour le texte principal, avec une animation d'apparition */
    width: 80%;
    animation: fadeIn 1.5s ease-out;
}

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

/* Classe utilitaire pour masquer le contenu principal au début */
.content-hidden {
    opacity: 0;
    pointer-events: none; /* Empêche toute interaction */
}

h1 {
    /* Style du titre principal "Transmission Interceptée..." */
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

h1 .highlight {
    color: var(--accent-color);
}

p {
    /* Style du paragraphe de description */
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 300;
    margin: 1.5rem auto 2.5rem auto;
    line-height: 1.7;
}

/* --- Scène d'arrière-plan --- */
#background-scene {
    /* Conteneur global pour tous les éléments animés en fond */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
/* Classe ajoutée lorsque la fiche d'info est visible, pour créer un effet de "focus" */
#background-scene.focus-active {
    transform: scale(0.95);
    opacity: 0.5;
}

/* --- Toile pour la scène 3D --- */
#three-canvas {
    /* La toile où Three.js dessine la Terre et les satellites */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Au-dessus des étoiles et planètes 2D (-1) mais sous l'UI */
}
#planets-container {
    /* Conteneur pour les orbes d'énergie 2D (les "planètes") */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Les événements passent à travers le conteneur */
    z-index: -2; /* Placé derrière les étoiles et la scène 3D */
}
.stars, .stars2 {
    /* Deux couches d'étoiles pour un effet de parallaxe et de profondeur */
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    display: block;
    background-repeat: repeat;
}
.stars {
    background-image: radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)), radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
    background-size: 200px 200px;
    z-index: -3;
    animation: twinkle 5s infinite linear;
}
.stars2 {
    background-image: radial-gradient(1px 1px at 10px 90px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 80px 30px, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 120px 180px, #ddd, rgba(0,0,0,0));
    background-size: 300px 300px;
    z-index: -3;
    animation: twinkle 7s infinite linear;
}
.stars3 {
    /* Étoiles plus grosses et plus proches */
    background-image: radial-gradient(2px 2px at 50px 50px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 100px 150px, #ddd, rgba(0,0,0,0));
    background-size: 250px 250px;
    z-index: -4; /* Encore plus en arrière-plan */
    animation: twinkle 10s infinite linear;
}
.stars4 {
    /* Étoiles les plus grosses et les plus proches, donc les plus lentes */
    background-image: radial-gradient(3px 3px at 150px 100px, #fff, rgba(0,0,0,0));
    background-size: 400px 400px;
    z-index: -5; /* La couche la plus profonde */
    animation: twinkle 15s infinite linear;
}

@keyframes twinkle {
    /* Animation de scintillement pour les étoiles */
    0% { opacity: 0.8; }
    50% { opacity: 0.4; }
    100% { opacity: 0.8; }
}

.planet {
    position: absolute;
    /* Style de base pour les orbes d'énergie (planètes 2D) */
    border-radius: 50%;
    /* --- Energy Orb Style --- */
    /* The --orb-color is set by JavaScript */
    background-color: var(--orb-color, #45A29E); /* Ajout de la couleur de base */
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 60%); /* Changé de 'background' à 'background-image' */
    box-shadow: inset 0 0 15px 5px rgba(255, 255, 255, 0.2), /* Inner glow */
                0 0 15px 5px var(--orb-color, #45A29E), /* Main aura, more subtle */
                0 0 30px 10px rgba(102, 252, 241, 0.1); /* Fainter outer glow */
    opacity: var(--orb-opacity, 0.8); /* Utilise l'opacité définie par JS */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: orb-pulse 5s infinite ease-in-out;
}
@keyframes orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* --- Depth Effect Classes --- */
/* Classes pour simuler la profondeur (flou et vitesse de pulsation) */
.orb-far {
    filter: blur(1.5px);
    animation-duration: 8s; /* Slower pulse for distant orbs */
}
.orb-mid {
    filter: blur(0.5px);
    animation-duration: 6s;
}
.orb-near {
    filter: blur(0); /* No blur for near orbs */
}

/* --- Specific Planet Type Styles --- */
/* Styles uniques pour donner une personnalité visuelle à chaque type de planète */
.planet.twilight-world { /* For Kepler-186f */
    background-image: radial-gradient(circle at 20% 20%, #ff9a78 0%, #c1440e 50%, transparent 70%);
}

.planet.ocean-world { /* For Kepler-22b */
    background-image: radial-gradient(circle at 70% 30%, #fff 0%, #87ceeb 30%, #3e54e8 60%, #00008b 90%);
    animation: orb-pulse 8s infinite ease-in-out, ocean-swirl 20s infinite linear;
}
@keyframes ocean-swirl {
    from { background-position-x: 0%; }
    to { background-position-x: 200%; }
}

.planet.drained {
    /* Style pour une planète "drainée" de son énergie */
    opacity: 0.2 !important; /* Force une faible opacité */
    box-shadow: none !important; /* Supprime toute lueur */
    animation: none !important; /* Arrête l'animation de pulsation */
    filter: grayscale(80%) blur(2px); /* La rend grise et floue */
}

.planet.terminator-world { /* For Gliese 581g */
    /* A world with a hot and a cold side */
    background-image: linear-gradient(to right, #ff4500 0%, #d8caaf 50%, #a6d5e3 100%);
}

.planet.hot-world { /* For Wolf 1061c */
    box-shadow: 0 0 15px 8px #ffdead, 0 0 30px 15px #ff8c00, 0 0 50px 25px rgba(255, 69, 0, 0.5);
    animation-duration: 3s;
}

.planet.rocky-world { /* For TRAPPIST-1e */
    background-image: radial-gradient(circle at 25% 25%, #e0e0e0 0%, #a6d5e3 40%, #888 80%);
}

.planet.fortress-world { /* For LHS 1140 b */
    /* Effet d'atmosphère épaisse */
    box-shadow: inset 0 0 25px 10px rgba(255, 255, 255, 0.3), 
                0 0 15px 5px var(--orb-color, #c3b59b), 
                0 0 40px 20px rgba(195, 181, 155, 0.3);
}

.planet.calm-world { /* For TOI 700 d */
    background-image: radial-gradient(circle at 25% 25%, #ffefd5 0%, #d2691e 60%, #8b4513 90%);
}

.planet.hidden-gem-world { /* For Kepler-1649c */
    /* A subtle, almost hidden look */
    background-color: #4a4a4a;
    background-image: radial-gradient(circle at 50% 50%, #e6e6e6 5%, transparent 40%);
    box-shadow: inset 0 0 20px 5px #000, 
                0 0 10px 2px #e6e6e6;
    animation-duration: 10s;
}

.planet.violent-world { /* For Proxima Centauri b */
    /* Effet d'éruptions stellaires */
    box-shadow: 0 0 10px 4px #E06C75, 0 0 25px 12px rgba(224, 108, 117, 0.5);
    animation: orb-pulse 2s infinite alternate, violent-flare 7s infinite ease-in-out;
}
@keyframes violent-flare {
     0%, 100% { box-shadow: 0 0 10px 4px #E06C75, 0 0 25px 12px rgba(224, 108, 117, 0.5); }
     50% { box-shadow: 0 0 15px 8px #fff, 0 0 40px 20px #E06C75; }
}

/* --- Style pour le "Navigateur Stellaire" --- */
.stellar-navigator {
    /* Le conteneur du curseur personnalisé */
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* --- Essaim de Nanites --- */
.nanite {
    /* Style pour chaque particule de l'essaim qui forme le curseur */
    position: absolute;
    border-radius: 50%;
    transition: transform 0.1s linear, opacity 0.2s linear;
    will-change: transform; /* Optimisation pour le GPU */
    animation: nanite-pulse 3s infinite ease-in-out;
}

@keyframes nanite-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.trail-particle {
    /* Style pour les particules de la traînée du curseur */
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.swarm-ship {
    position: absolute;
    /* Le noyau central du curseur */
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 10px #FFD700);
    transition: transform 0.3s ease-out;
}
.swarm-ship.moving {
    transform: translate(-50%, -50%) scale(1.2);
}
.core-sphere {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    animation: core-rotate 10s linear infinite;
}
.core-layer-1, .core-layer-2 {
    position: absolute;
    border: 1px solid; /* La couleur est gérée par JS */
}
.core-sphere {
    border: 1px solid; /* La couleur est gérée par JS */
    background-color: rgba(255, 215, 0, 0.1);
    border-radius: 50%;
}
.core-layer-1 {
    /* Couche intermédiaire - Blanche et plus petite */
    width: 80%; 
    height: 80%;
    top: 10%; 
    left: 10%;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: core-morph 6s -2s ease-in-out infinite alternate;
}
.core-layer-2 {
    /* Couche interne - Cyan et encore plus petite */
    width: 50%; 
    height: 50%;
    top: 25%; 
    left: 25%;
    border-radius: 60% 40% 30% 70% / 50% 60% 50% 40%;
    animation: core-morph 8s ease-in-out infinite alternate;
}
@keyframes core-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes core-morph {
    from { border-width: 1px; opacity: 0.7; transform: rotate(0deg) scale(1); }
    to { 
        border-width: 2px; 
        opacity: 1;
        transform: rotate(180deg) scale(0.8); 
    }
}

/* --- Style pour la comète (Chasse aux trésors) --- */
#comet {
    /* Style de la comète qui traverse l'écran périodiquement */
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #FFDDBA;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    box-shadow: 
        0 0 15px 5px rgba(102, 252, 241, 0.4), /* Aura bleutée externe */
        0 0 30px 10px rgba(255, 172, 72, 0.3), /* Halo orangé plus large */
        0 0 5px 2px #fff inset; /* Coeur blanc intense */
    z-index: 1;
    animation: comet-morph 7s ease-in-out infinite alternate, comet-pulse 3s ease-in-out infinite alternate;
}
.comet-particle {
    /* Particules de la queue de la comète */
    position: absolute;
    border-radius: 50%;
    animation: fade-out 4s ease-out forwards;
}
.dust-particle { /* Queue de poussière orangée */
    background-color: #FFAC48;
}
.ion-particle { /* Queue d'ions bleutée */
    background-color: #93f0ff;
    box-shadow: 0 0 5px #66FCF1;
}
@keyframes fade-out {
    to {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes comet-morph {
    from { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    to { border-radius: 30% 70% 60% 40% / 70% 60% 40% 30%; }
}
@keyframes comet-pulse {
    from { box-shadow: 0 0 15px 5px rgba(102, 252, 241, 0.4), 0 0 30px 10px rgba(255, 172, 72, 0.3), 0 0 5px 2px #fff inset; }
    to { box-shadow: 0 0 25px 10px rgba(102, 252, 241, 0.6), 0 0 50px 15px rgba(255, 172, 72, 0.4), 0 0 8px 4px #fff inset; }
}

/* --- Bouton pour le son --- */
#sound-toggle {
    /* Style du bouton pour activer/désactiver la musique */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(31, 40, 51, 0.7);
    border: 1px solid var(--accent-darker);
    border-radius: 50%;
    color: var(--accent-color);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Curseur normal pour cet élément */
    z-index: 250;
}
/* --- Styles pour le Cartographe Stellaire --- */
#cartography-container {
    /* Conteneur pour les étoiles et constellations créées au clic */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}
.created-star {
    /* Style pour une étoile créée par l'utilisateur */
    position: absolute;
    width: 4px; height: 4px;
    background-color: #E06C75; /* Rouge discret */
    border-radius: 50%;
    box-shadow: 0 0 8px #E06C75;
    animation: star-fade-in-out 30s ease-out forwards;
}
@keyframes star-fade-in-out {
    0% { opacity: 0; transform: scale(0.5); }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}
.constellation-line {
    /* Style pour la ligne qui relie deux étoiles créées */
    position: absolute;
    background-color: rgba(224, 108, 117, 0.5); /* Rouge discret avec transparence */
    transform-origin: 0 50%;
    animation: line-fade-out 20s ease-out forwards;
}
@keyframes line-fade-out {
    0% { opacity: 0.5; }
    80% { opacity: 0.5; }
    100% { opacity: 0; }
}
#scan-ui {
    /* Conteneur pour l'interface de scan qui apparaît près du curseur */
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
    background-color: rgba(45, 35, 25, 0.75); /* Fond bronze/marron */
    border: 1px solid #D2691E; /* Bordure "chocolat" / ambre */
    border-radius: 6px;
    padding: 8px 12px;
    backdrop-filter: blur(3px);
}
#scan-ui.visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
#scan-ui.scan-complete {
    background-color: rgba(25, 45, 35, 0.75); /* Fond vert foncé */
    border-color: #39FF14; /* Bordure vert néon */
}
#scan-ui.scan-complete p { color: #ADFF2F; } /* Texte vert clair */
#scan-ui.scan-complete .scanner-ring-1 { border-color: #008000; } /* Vert foncé */
#scan-ui.scan-complete .scanner-ring-2 { border-color: #32CD32; } /* Vert lime */
#scan-ui.scan-complete .scanner-ring-3 { border-color: #ADFF2F; } /* Vert clair */
#scan-ui p {
    animation: text-blink 1.5s infinite ease-in-out;
    color: #FFDEAD; /* Orange clair "Navajo White" */
}
@keyframes text-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --- Scanner Holographique --- */
.holographic-scanner {
    /* Conteneur pour les anneaux animés du scanner */
    position: relative;
    width: 50px;
    height: 50px;
    margin: 10px auto 0 auto;
}
.scanner-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    /* Chaque anneau a sa propre animation et couleur */
}
.scanner-ring-1 {
    border-top-color: #CD853F; /* Bronze */
    border-bottom-color: #CD853F;
    animation: rotate-scanner 2s linear infinite;
}
.scanner-ring-2 {
    width: 80%; height: 80%;
    top: 10%; left: 10%;
    border-left-color: #D2691E; /* Ambre */
    border-right-color: #D2691E;
    animation: rotate-scanner-reverse 3s linear infinite;
}
.scanner-ring-3 {
    width: 60%; height: 60%;
    top: 20%; left: 20%;
    border: 1px dashed #FFA500; /* Orange vif */
    opacity: 0.5;
    animation: rotate-scanner 5s linear infinite;
}
@keyframes rotate-scanner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes rotate-scanner-reverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}