/* ── Layout ─────────────────────────────────── */
#nebulight-section {
    position: relative;
    padding: 6rem 0;
    min-height: 80vh;
    overflow: visible;
}

/* ── Star (absolute, ne perturbe pas le flow du texte) ── */
.nebulight-star {
    position: absolute;
    left: clamp(80px, 3vw, 10px);
    top: 30%;

    width: clamp(220px, 36vw, 500px);
    pointer-events: none;

    /* custom properties pilotées par JS */
    --star-py:    0px;
    --star-rot:  -12deg;
    --star-scale: 0.60;

    /* Le float CSS utilise `translate` (indépendant de `transform`) */
    transform: translateY(calc(-50% + var(--star-py)))
               rotate(var(--star-rot))
               scale(var(--star-scale));
    transform-origin: center center;
    will-change: transform, opacity;

    filter: drop-shadow(0 0 80px rgba(200, 80, 255, 0.22));

    opacity: 0;
    transition: opacity 0.9s ease;
}

.nebulight-star.star-in { opacity: 0.80; }

@keyframes star-float {
    0%, 100% { translate: 0 0; }
    50%       { translate: 0 -14px; }
}
.nebulight-star.star-float {
    animation: star-float 5s ease-in-out infinite;
}

/* ── Content — centré exactement comme avant ── */
#nebulight-section .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
}

#nebulight-section h2 {
    font-size: 2rem;
    max-width: 1080px;
    margin: 0 15px;
    text-align: center;
    line-height: 0.9;
}
@media (min-width: 1024px) {
    #nebulight-section h2 { font-size: 5rem; }
}

/* ── Body copy ──────────────────────────────── */
.nebulight-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 620px;
    text-align: center;
    color: var(--gray-light);
    font-weight: var(--fw-body);
    line-height: 1.6;
}

.nebulight-body strong {
    color: var(--white);
    font-weight: 500;
}


/* ── Mobile ─────────────────────────────────── */
@media (max-width: 768px) {
    #nebulight-section {
        padding: 4rem 1rem;
        min-height: unset;
    }

    /* Sur mobile l'étoile revient dans le flux normal, mais les animations JS restent actives */
    .nebulight-star {
        position: relative;
        left: unset;
        top: unset;
        width: clamp(180px, 60vw, 280px);
        margin: 0 auto 2rem;
        display: block;
        /* transform sans le -50% car l'étoile n'est plus en absolute */
        transform: translateY(var(--star-py)) rotate(var(--star-rot)) scale(var(--star-scale));
    }
}