/* === RESET === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* === BASE === */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    color: rgb(253, 161, 249);
    font-family: Verdana, sans-serif;
    user-select: none;
}

/* === STARS CANVAS === */
#stars-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* === WORLD (scène défilante) === */
#world {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5000px;
    z-index: 1;
    will-change: transform;
    transition: transform 2s cubic-bezier(0.65, 0, 0.076, 1);
}

/* === SVG TRAJECTOIRE === */
#flight-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#path-line {
    animation: march 25s linear infinite;
}

@keyframes march {
    to { stroke-dashoffset: -200; }
}

/* === PLANÈTES (base) === */
.planet {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

/* Terre : centrée horizontalement, centre visuel en bas d'écran → seule la moitié sup est visible */
#planet-0 {
    transform: translate(-50%, calc(-50% + 50vh));
}
#planet-0 .planet-label {
    display: none;
}

.planet-body {
    display: block;
    object-fit: contain;
    /* Ressort au clic (spring cubic-bezier) */
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
}

/* Toutes les planètes grossissent au stop */
.planet.active .planet-body {
    transform: scale(1.25);
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.45));
}

.planet-label {
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0.5;
    white-space: nowrap;
    transition: opacity 0.4s ease;
}

.planet.active .planet-label {
    opacity: 1;
}

/* === TAILLES DES PLANÈTES === */
/* Terre : énorme, seule la moitié supérieure est visible à l'écran */
#planet-0 .planet-body { width: clamp(320px, 78vw, 580px); height: clamp(320px, 78vw, 580px); }
#planet-1 .planet-body { width: 148px; height: 148px; }
#planet-2 .planet-body { width: 138px; height: 138px; }
#planet-3 .planet-body { width: 132px; height: 132px; }
#planet-4 .planet-body { width: 155px; height: 155px; }

/* === ROTATION DE LA TERRE QUAND ACTIVE === */
#planet-0.active .planet-body {
    animation: terre-spin 10s linear infinite;
    transition: none;
}

@keyframes terre-spin {
    from { transform: scale(1.25) rotate(0deg); }
    to   { transform: scale(1.25) rotate(360deg); }
}

/* Pulsation sur "Votre projet" */
#planet-4 .planet-body {
    animation: planet4-pulse 3s ease-in-out infinite;
}
#planet-4.active .planet-body {
    animation: planet4-pulse-active 3s ease-in-out infinite;
    transition: none;
}

@keyframes planet4-pulse {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(253, 161, 249, 0.4)); }
    50%       { filter: drop-shadow(0 0 30px rgba(253, 161, 249, 0.8)); }
}
@keyframes planet4-pulse-active {
    0%, 100% { transform: scale(1.25); filter: drop-shadow(0 0 28px rgba(253, 161, 249, 0.75)); }
    50%       { transform: scale(1.25); filter: drop-shadow(0 0 50px rgba(253, 161, 249, 1)); }
}

/* === FUSÉE === */
#rocket-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    pointer-events: none;
    transition: transform 0.5s ease-in-out;
}

#rocket-static,
#rocket-moving {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: clamp(65px, 7vw, 110px);
    height: auto;
    transition: opacity 0.3s ease;
}

#rocket-moving {
    opacity: 0;
}

#rocket-wrap.moving #rocket-static { opacity: 0; }
#rocket-wrap.moving #rocket-moving { opacity: 1; }

/* === BULLE DE DIALOGUE === */
#speech-bubble {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    z-index: 20;
    max-width: 300px;
    background: rgba(12, 12, 18, 0.92);
    border: 1px solid rgba(253, 161, 249, 0.35);
    border-radius: 14px;
    padding: 20px 24px 20px 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 40px rgba(253, 161, 249, 0.1), 0 12px 40px rgba(0, 0, 0, 0.65);
}

#speech-bubble.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

#speech-bubble.side-right {
    left: calc(50% + 80px);
    right: auto;
}

#speech-bubble.side-left {
    right: calc(50% + 80px);
    left: auto;
}

/* Flèche de la bulle */
.bubble-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}

#speech-bubble.side-right .bubble-arrow {
    left: -9px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid rgba(253, 161, 249, 0.35);
}

#speech-bubble.side-left .bubble-arrow {
    right: -9px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid rgba(253, 161, 249, 0.35);
}

/* Contenu bulle */
#bubble-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(253, 161, 249, 0.4);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 5px;
    transition: color 0.2s ease;
}

#bubble-close:hover {
    color: rgb(253, 161, 249);
}

#bubble-title {
    font-size: 1.05rem;
    color: rgb(253, 161, 249);
    margin-bottom: 6px;
    letter-spacing: 1px;
}

#bubble-since {
    font-size: 0.7rem;
    color: rgba(253, 161, 249, 0.55);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

#bubble-desc {
    font-size: 0.8rem;
    color: rgba(215, 215, 235, 0.88);
    line-height: 1.65;
}

/* === PANEL NAV DROITE === */
.right-panel {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 30;
    background: rgba(23, 23, 27, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    margin-right: 1.35%;
    padding: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#navlist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#navlist li {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    margin-right: -270px;
    transition: transform 0.2s ease, background 0.2s ease, margin-right 0.2s ease;
}

#navlist li img {
    width: 40%;
    display: block;
    pointer-events: none;
}

#navlist li:hover {
    transform: scale(1.05);
    background: rgba(253, 161, 249, 0.08);
    margin-right: -245px;
}

#navlist li.active {
    background: rgba(253, 161, 249, 0.14);
    margin-right: -245px;
}

#navlist li:active {
    transform: scale(1.00);
}

/* === HINT SCROLL === */
#scroll-hint {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(253, 161, 249, 0.45);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

#scroll-hint.hidden {
    opacity: 0;
}

.hint-arrow {
    width: 14px;
    height: 14px;
    border-right: 2px solid rgba(253, 161, 249, 0.4);
    border-bottom: 2px solid rgba(253, 161, 249, 0.4);
    transform: rotate(45deg);
    animation: hint-bounce 1.6s ease-in-out infinite;
}

@keyframes hint-bounce {
    0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.4; }
    50%       { transform: rotate(45deg) translateY(5px); opacity: 1;   }
}

/* === ACCÈS ADMIN === */
#admin-access {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(23, 23, 27, 0.6);
    border: 1px solid rgba(253, 161, 249, 0.18);
    color: rgba(253, 161, 249, 0.35);
    font-size: 0.95rem;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

#admin-access:hover,
#admin-access:focus-visible {
    color: rgb(253, 161, 249);
    border-color: rgba(253, 161, 249, 0.5);
    background: rgba(23, 23, 27, 0.85);
    transform: scale(1.08);
}

/* === RESPONSIVE === */

/* Tablette large */
@media (max-width: 1024px) {
    #navlist li        { margin-right: -305px; }
    #navlist li:hover,
    #navlist li.active { margin-right: -285px; }
    #navlist li img    { width: 30%; }
    #speech-bubble     { max-width: 250px; }
}

/* Tablette portrait & mobile landscape :
   La fusée monte à 38% du haut pour laisser de la place à la bulle en bas.
   La bulle passe en panneau fixe en bas de l'écran. */
@media (max-width: 768px) {
    /* Fusée centrée horizontalement mais plus haute verticalement */
    #rocket-wrap {
        top: 38%;
    }

    /* Terre : offset recalculé pour que son centre reste en bas d'écran (100vh - 38vh = 62vh) */
    #planet-0 {
        transform: translate(-50%, calc(-50% + 62vh));
    }

    /* Bulle : panneau bas, pleine largeur */
    #speech-bubble,
    #speech-bubble.side-left,
    #speech-bubble.side-right {
        top: auto !important;
        bottom: 16px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(16px) scale(0.96) !important;
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
        border-radius: 14px;
    }
    #speech-bubble.visible {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
    .bubble-arrow { display: none; }

    /* Nav droite */
    #navlist li        { margin-right: -340px; }
    #navlist li:hover,
    #navlist li.active { margin-right: -322px; }
    #navlist li img    { width: 22%; }
}

/* Mobile portrait (iPhone, Android phones) */
@media (max-width: 480px) {
    #rocket-wrap {
        top: 36%;
    }

    /* Terre : offset recalculé (100vh - 36vh = 64vh) */
    #planet-0 {
        transform: translate(-50%, calc(-50% + 64vh));
    }

    /* Planètes adaptées mobile */
    #planet-0 .planet-body { width: clamp(260px, 92vw, 380px); height: clamp(260px, 92vw, 380px); }
    #planet-1 .planet-body { width: 100px; height: 100px; }
    #planet-2 .planet-body { width: 94px;  height: 94px;  }
    #planet-3 .planet-body { width: 90px;  height: 90px;  }
    #planet-4 .planet-body { width: 105px; height: 105px; }

    .planet-label { font-size: 0.62rem; letter-spacing: 1.5px; }

    /* Bulle plus compacte */
    #speech-bubble,
    #speech-bubble.side-left,
    #speech-bubble.side-right {
        bottom: 12px;
        padding: 16px 18px;
    }
    #bubble-title { font-size: 0.95rem; }
    #bubble-desc  { font-size: 0.76rem; }

    /* Nav droite */
    #navlist li        { margin-right: -350px; margin-bottom: 10%; }
    #navlist li:hover,
    #navlist li.active { margin-right: -334px; }
    #navlist li img    { width: 20%; }
}