/* =============================================
   SYSTÈME SOLAIRE INTERACTIF – STYLE.CSS
   ============================================= */

/* --- Variables CSS Globales --- */
:root {
    /* Couleurs des planètes */
    --color-sun: #FDB813;
    --color-sun-glow-1: #ffaa00;
    --color-sun-glow-2: #ff7700;
    --color-sun-glow-3: #ff4400;
    
    --color-mercure: #b5b5b5;
    --color-mercure-light: #d9d9d9;
    --color-mercure-dark: #8a8a8a;
    
    --color-venus: #e8cda0;
    --color-venus-light: #f5e6d0;
    --color-venus-dark: #c4a06a;
    
    --color-terre: #4da6ff;
    --color-terre-light: #80c4ff;
    --color-terre-dark: #1a5fbf;
    --color-terre-land: #5cb85c;
    
    --color-mars: #c1440e;
    --color-mars-light: #e0553a;
    --color-mars-dark: #8b2a05;
    
    --color-jupiter: #c9b08b;
    --color-jupiter-light: #e8d5b8;
    --color-jupiter-dark: #a0845c;
    --color-jupiter-band: #b8976e;
    
    --color-saturne: #f4d59c;
    --color-saturne-light: #fae8c8;
    --color-saturne-dark: #d4b06a;
    --color-saturne-ring: #dcc8a0;
    
    --color-uranus: #7ec8e3;
    --color-uranus-light: #b3e0f0;
    --color-uranus-dark: #4a9eb8;
    
    --color-neptune: #3f54ba;
    --color-neptune-light: #6b7fd4;
    --color-neptune-dark: #1e2f7a;
    
    /* Tailles */
    --planet-min-size: 10px;
    
    /* Polices */
    --font-title: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    
    /* Couleurs UI */
    --text-light: #e0e0e0;
    --text-muted: #b0b0b0;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.5);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    background-color: #000005;
    color: var(--text-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Fond étoilé Canvas --- */
#stars-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --- Overlay sombre --- */
.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(5, 0, 30, 0.3) 0%, rgba(0, 0, 5, 0.85) 70%, #000005 100%);
    z-index: 1;
    pointer-events: none;
}

/* --- Conteneur principal --- */
.solar-system-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 20px;
}

.main-title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3.5vmin, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(180, 200, 255, 0.6), 0 0 60px rgba(140, 160, 255, 0.3);
    margin-bottom: 6px;
    text-align: center;
    user-select: none;
}

.subtitle {
    font-size: clamp(0.65rem, 1.2vmin, 0.95rem);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 3vmin;
    text-align: center;
    user-select: none;
}

/* --- Système Solaire --- */
.solar-system {
    position: relative;
    width: clamp(300px, 84vmin, 850px);
    height: clamp(300px, 84vmin, 850px);
    flex-shrink: 0;
}

/* --- Soleil --- */
.sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(36px, 6vmin, 70px);
    height: clamp(36px, 6vmin, 70px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 20;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sun-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7a0 0%, #ffcc00 20%, #ff9900 50%, #e07000 100%);
    box-shadow: 
        0 0 20px var(--color-sun-glow-1),
        0 0 50px var(--color-sun-glow-2),
        0 0 85px var(--color-sun-glow-3),
        0 0 130px rgba(255, 80, 0, 0.5),
        0 0 200px rgba(255, 50, 0, 0.25);
    animation: sunPulse 3s ease-in-out infinite;
}

.sun-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 180, 30, 0.4) 0%, rgba(255, 120, 10, 0.1) 40%, transparent 70%);
    pointer-events: none;
    animation: sunGlowPulse 3s ease-in-out infinite;
}

.sun-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(8px, 1vmin, 12px);
    color: #ffcc88;
    white-space: nowrap;
    letter-spacing: 0.08em;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 180, 50, 0.6);
    pointer-events: none;
}

.sun:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

.sun:hover .sun-core {
    box-shadow: 
        0 0 30px var(--color-sun-glow-1),
        0 0 65px var(--color-sun-glow-2),
        0 0 105px var(--color-sun-glow-3),
        0 0 160px rgba(255, 80, 0, 0.6),
        0 0 240px rgba(255, 50, 0, 0.35);
}

@keyframes sunPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px var(--color-sun-glow-1),
            0 0 50px var(--color-sun-glow-2),
            0 0 85px var(--color-sun-glow-3),
            0 0 130px rgba(255, 80, 0, 0.5),
            0 0 200px rgba(255, 50, 0, 0.25);
    }
    50% {
        box-shadow: 
            0 0 28px var(--color-sun-glow-1),
            0 0 60px var(--color-sun-glow-2),
            0 0 100px var(--color-sun-glow-3),
            0 0 150px rgba(255, 80, 0, 0.6),
            0 0 225px rgba(255, 50, 0, 0.35);
    }
}

@keyframes sunGlowPulse {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

/* --- Orbites --- */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--orbit-radius) * 2);
    height: calc(var(--orbit-radius) * 2);
    margin-top: calc(var(--orbit-radius) * -1);
    margin-left: calc(var(--orbit-radius) * -1);
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    animation: orbitSpin var(--orbit-duration) linear infinite;
    transform-origin: center center;
    z-index: 5;
    pointer-events: none;
}

.orbit::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: translateX(-50%);
}

/* --- Planètes (base) --- */
.planet {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.35s ease,
                filter 0.35s ease;
}

.planet:hover {
    z-index: 30;
    filter: brightness(1.3);
}

.planet-name {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(7px, 0.9vmin, 11px);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    letter-spacing: 0.05em;
    font-weight: 400;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.planet:hover .planet-name {
    opacity: 1;
}

/* --- Planètes spécifiques --- */

/* Mercure */
.planet.mercure {
    width: clamp(8px, 1.3vmin, 16px);
    height: clamp(8px, 1.3vmin, 16px);
    background: radial-gradient(circle at 30% 30%, var(--color-mercure-light), var(--color-mercure) 40%, var(--color-mercure-dark) 100%);
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.4), 0 0 8px rgba(180,180,180,0.3);
}
.planet.mercure:hover {
    transform: translate(-50%, -50%) scale(2.2);
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.4), 0 0 18px rgba(200,200,200,0.5);
}

/* Vénus */
.planet.venus {
    width: clamp(12px, 2vmin, 22px);
    height: clamp(12px, 2vmin, 22px);
    background: radial-gradient(circle at 30% 30%, var(--color-venus-light), var(--color-venus) 40%, var(--color-venus-dark) 100%);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35), 0 0 12px rgba(232,205,160,0.4);
}
.planet.venus:hover {
    transform: translate(-50%, -50%) scale(2);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35), 0 0 22px rgba(240,215,170,0.55);
}

/* Terre */
.planet.terre {
    width: clamp(13px, 2.2vmin, 24px);
    height: clamp(13px, 2.2vmin, 24px);
    background: radial-gradient(circle at 30% 30%, #80ccff, #3399dd 30%, #1a5fbf 60%, #0a3070 100%);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35), 0 0 15px rgba(70,160,255,0.5);
    position: relative;
}
.planet.terre::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 25%;
    background: rgba(90, 200, 90, 0.5);
    border-radius: 50%;
    transform: rotate(-15deg);
    pointer-events: none;
}
.planet.terre:hover {
    transform: translate(-50%, -50%) scale(1.9);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35), 0 0 25px rgba(80,180,255,0.6);
}

/* Mars */
.planet.mars {
    width: clamp(10px, 1.7vmin, 19px);
    height: clamp(10px, 1.7vmin, 19px);
    background: radial-gradient(circle at 30% 30%, var(--color-mars-light), var(--color-mars) 40%, var(--color-mars-dark) 100%);
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 10px rgba(200,70,20,0.4);
}
.planet.mars:hover {
    transform: translate(-50%, -50%) scale(2.1);
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 20px rgba(220,90,30,0.5);
}

/* Jupiter */
.planet.jupiter {
    width: clamp(28px, 5vmin, 50px);
    height: clamp(28px, 5vmin, 50px);
    background: radial-gradient(circle at 35% 35%, #f5e6cc, #d4b896 25%, #c9a87a 50%, #b8956a 70%, #8b6d4a 100%);
    box-shadow: inset -4px -4px 8px rgba(0,0,0,0.4), 0 0 18px rgba(200,180,140,0.35);
    position: relative;
    overflow: hidden;
}
.planet.jupiter::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 12%;
    background: rgba(180, 140, 90, 0.5);
    border-radius: 0;
    pointer-events: none;
}
.planet.jupiter::after {
    content: '';
    position: absolute;
    top: 48%;
    left: 0;
    width: 100%;
    height: 15%;
    background: rgba(170, 120, 70, 0.45);
    border-radius: 0;
    pointer-events: none;
}
.planet.jupiter:hover {
    transform: translate(-50%, -50%) scale(1.6);
    box-shadow: inset -4px -4px 8px rgba(0,0,0,0.4), 0 0 28px rgba(210,190,150,0.5);
}

/* Saturne */
.planet.saturne {
    width: clamp(24px, 4.2vmin, 42px);
    height: clamp(24px, 4.2vmin, 42px);
    background: radial-gradient(circle at 35% 35%, var(--color-saturne-light), var(--color-saturne) 40%, var(--color-saturne-dark) 100%);
    box-shadow: inset -3px -3px 7px rgba(0,0,0,0.35), 0 0 14px rgba(240,210,150,0.35);
    position: relative;
}
.rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170%;
    height: 35%;
    border-radius: 50%;
    border: 3px solid rgba(210, 190, 150, 0.5);
    border-top: 3px solid rgba(220, 200, 160, 0.6);
    border-bottom: 2px solid rgba(180, 160, 120, 0.3);
    transform: translate(-50%, -50%) rotateX(78deg);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(200, 170, 120, 0.3);
}
.planet.saturne:hover {
    transform: translate(-50%, -50%) scale(1.7);
    box-shadow: inset -3px -3px 7px rgba(0,0,0,0.35), 0 0 24px rgba(245,220,160,0.5);
}
.planet.saturne:hover .rings {
    border-color: rgba(230, 210, 170, 0.7);
    box-shadow: 0 0 14px rgba(210, 180, 130, 0.5);
}

/* Uranus */
.planet.uranus {
    width: clamp(16px, 2.8vmin, 28px);
    height: clamp(16px, 2.8vmin, 28px);
    background: radial-gradient(circle at 30% 30%, var(--color-uranus-light), var(--color-uranus) 40%, var(--color-uranus-dark) 100%);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35), 0 0 12px rgba(120,200,225,0.4);
}
.planet.uranus:hover {
    transform: translate(-50%, -50%) scale(1.9);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.35), 0 0 22px rgba(140,210,235,0.55);
}

/* Neptune */
.planet.neptune {
    width: clamp(15px, 2.6vmin, 26px);
    height: clamp(15px, 2.6vmin, 26px);
    background: radial-gradient(circle at 30% 30%, var(--color-neptune-light), var(--color-neptune) 40%, var(--color-neptune-dark) 100%);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.4), 0 0 12px rgba(60,80,185,0.4);
}
.planet.neptune:hover {
    transform: translate(-50%, -50%) scale(1.9);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.4), 0 0 22px rgba(80,100,200,0.55);
}

/* --- Animation orbite --- */
@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- MODALE --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 10, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 35px 30px 30px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    position: relative;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 20px 50px var(--glass-shadow), 0 0 0 1px rgba(255,255,255,0.05) inset;
    transform: translateY(30px) scale(0.92);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s, transform 0.3s;
    z-index: 5;
}
.modal-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

.modal-planet-visual {
    width: clamp(70px, 12vmin, 110px);
    height: clamp(70px, 12vmin, 110px);
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 0 30px rgba(255,255,255,0.2);
}

.modal-title {
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.5vmin, 2rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
    color: #fff;
}

.modal-info {
    text-align: left;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    gap: 15px;
}

.info-row:last-of-type {
    border-bottom: none;
}

.info-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.info-value {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 400;
    text-align: right;
}

.modal-description {
    margin-top: 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d0d0d0;
    font-style: italic;
}

/* --- Responsive ajustements --- */
@media (max-width: 600px) {
    .solar-system {
        width: 92vmin;
        height: 92vmin;
    }
    .modal-card {
        padding: 25px 20px 20px;
        border-radius: 20px;
    }
    .planet-name {
        display: none;
    }
    .subtitle {
        display: none;
    }
    .main-title {
        margin-bottom: 10px;
    }
}

@media (min-width: 1400px) {
    .solar-system {
        width: 75vmin;
        height: 75vmin;
    }
}