/* ========================================================
   CONSTELLATION - Projets personnels
   Theme cosmique : ciel profond, étoiles, nébuleuses
   ======================================================== */

/* ========================================================
   VARIABLES DE THÈME COSMIQUE
   - Constellation (défaut) : violet / rose / bleu, accent doré
   - Blue / Green / Brown : variantes teintées
   ======================================================== */
body.constellation-page{
    /* Defaults = thème "constellation" */
    --cos-bg-deep: #04050f;
    --cos-bg-mid:  #08071a;
    --cos-bg-top:  #050616;
    --cos-nebula-1: 91, 73, 230;     /* violet */
    --cos-nebula-2: 230, 84, 167;    /* rose  */
    --cos-nebula-3: 72, 200, 255;    /* bleu  */
    --cos-nebula-4: 255, 191, 100;   /* or léger */
    --cos-accent:  #ffd57a;          /* étoiles, ✦, hover */
    --cos-accent-2:#ffcb6b;          /* liens */
    --cos-star-core: #ffffff;
    --cos-star-warm: #f6e6b3;
    --cos-line: rgba(200, 215, 255, 0.32);
    --cos-line-glow: rgba(140, 170, 255, .35);
    --cos-text: #d8e3ff;
    --cos-text-muted: #8896c8;
    --cos-card-bg: rgba(12, 14, 32, .55);
    --cos-card-border: rgba(180, 200, 255, .12);
    --cos-btn-grad: linear-gradient(135deg, #4a3a8a, #8a4a8a);
    --cos-btn-grad-hover: linear-gradient(135deg, #5a4a9a, #9a5a9a);
    --cos-nav-hover-bg: rgba(255, 215, 130, .12);
    --cos-nav-hover-border: rgba(255, 215, 130, .5);
    background: var(--cos-bg-deep);
    color: var(--cos-text);
    overflow-x: hidden;
}

/* Thème BLEU profond : bleu glacier / azur / cyan */
body.constellation-page[data-theme="blue"]{
    --cos-bg-deep: #02060f;
    --cos-bg-mid:  #061328;
    --cos-bg-top:  #050d1c;
    --cos-nebula-1: 30, 110, 240;
    --cos-nebula-2: 60, 200, 255;
    --cos-nebula-3: 120, 80, 220;
    --cos-nebula-4: 180, 230, 255;
    --cos-accent:  #7fd1ff;
    --cos-accent-2:#9fe2ff;
    --cos-star-warm: #cfeaff;
    --cos-line: rgba(160, 210, 255, .38);
    --cos-line-glow: rgba(100, 180, 255, .45);
    --cos-text: #d9ecff;
    --cos-text-muted: #7090c0;
    --cos-card-bg: rgba(8, 18, 36, .6);
    --cos-card-border: rgba(120, 180, 255, .18);
    --cos-btn-grad: linear-gradient(135deg, #1c3a78, #2a78c8);
    --cos-btn-grad-hover: linear-gradient(135deg, #2a4a88, #3a88d8);
    --cos-nav-hover-bg: rgba(127, 209, 255, .14);
    --cos-nav-hover-border: rgba(127, 209, 255, .55);
}

/* Thème VERT : forêt nocturne / aurores boréales */
body.constellation-page[data-theme="green"]{
    --cos-bg-deep: #02100a;
    --cos-bg-mid:  #051f15;
    --cos-bg-top:  #03150d;
    --cos-nebula-1: 30, 200, 130;
    --cos-nebula-2: 100, 220, 100;
    --cos-nebula-3: 40, 140, 100;
    --cos-nebula-4: 200, 255, 180;
    --cos-accent:  #8fffb0;
    --cos-accent-2:#b8ffc8;
    --cos-star-warm: #d8ffe0;
    --cos-line: rgba(170, 255, 200, .36);
    --cos-line-glow: rgba(100, 230, 150, .45);
    --cos-text: #d8ffe8;
    --cos-text-muted: #6fae88;
    --cos-card-bg: rgba(6, 24, 16, .62);
    --cos-card-border: rgba(140, 230, 170, .18);
    --cos-btn-grad: linear-gradient(135deg, #144a30, #2a8a4a);
    --cos-btn-grad-hover: linear-gradient(135deg, #1a5a3a, #38a25a);
    --cos-nav-hover-bg: rgba(143, 255, 176, .14);
    --cos-nav-hover-border: rgba(143, 255, 176, .55);
}

/* Thème MARRON : nuit ambrée, lueurs de bougies / soleil couchant */
body.constellation-page[data-theme="brown"]{
    --cos-bg-deep: #0a0604;
    --cos-bg-mid:  #1c0f06;
    --cos-bg-top:  #140a05;
    --cos-nebula-1: 230, 130, 50;
    --cos-nebula-2: 255, 170, 90;
    --cos-nebula-3: 180, 80, 30;
    --cos-nebula-4: 255, 220, 140;
    --cos-accent:  #ffb870;
    --cos-accent-2:#ffd49a;
    --cos-star-warm: #ffe6b8;
    --cos-line: rgba(255, 200, 140, .38);
    --cos-line-glow: rgba(255, 170, 90, .45);
    --cos-text: #ffe9d3;
    --cos-text-muted: #b08868;
    --cos-card-bg: rgba(28, 16, 8, .62);
    --cos-card-border: rgba(255, 180, 120, .18);
    --cos-btn-grad: linear-gradient(135deg, #6a2a0a, #b66d32);
    --cos-btn-grad-hover: linear-gradient(135deg, #7a3a1a, #d68d52);
    --cos-nav-hover-bg: rgba(255, 184, 112, .14);
    --cos-nav-hover-border: rgba(255, 184, 112, .55);
}

/* Ciel étoilé en arrière-plan (couches parallax) */
.cosmos{
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at 20% 18%, rgba(var(--cos-nebula-1), 0.22), transparent 55%),
        radial-gradient(ellipse at 78% 30%, rgba(var(--cos-nebula-2), 0.18), transparent 50%),
        radial-gradient(ellipse at 55% 82%, rgba(var(--cos-nebula-3), 0.16), transparent 55%),
        radial-gradient(ellipse at 90% 90%, rgba(var(--cos-nebula-4), 0.10), transparent 50%),
        linear-gradient(180deg, var(--cos-bg-top) 0%, var(--cos-bg-mid) 35%, var(--cos-bg-deep) 100%);
    overflow: hidden;
    transition: background .8s ease;
}
.cosmos::before, .cosmos::after{
    content: "";
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%),
        radial-gradient(1px 1px at 30% 42%, #cfe2ff, transparent 60%),
        radial-gradient(1.5px 1.5px at 47% 12%, #fff, transparent 60%),
        radial-gradient(1px 1px at 64% 36%, #ffe9c2, transparent 60%),
        radial-gradient(1.3px 1.3px at 82% 22%, #fff, transparent 60%),
        radial-gradient(1px 1px at 8% 70%, #d5e4ff, transparent 60%),
        radial-gradient(1.4px 1.4px at 25% 88%, #fff, transparent 60%),
        radial-gradient(1px 1px at 56% 64%, #ffd9ec, transparent 60%),
        radial-gradient(1.2px 1.2px at 75% 78%, #fff, transparent 60%),
        radial-gradient(1px 1px at 92% 58%, #c8f0ff, transparent 60%),
        radial-gradient(1px 1px at 38% 30%, #fff, transparent 60%),
        radial-gradient(1px 1px at 18% 50%, #fff, transparent 60%),
        radial-gradient(1px 1px at 70% 8%, #fff, transparent 60%),
        radial-gradient(1.1px 1.1px at 5% 30%, #fff, transparent 60%),
        radial-gradient(1px 1px at 95% 12%, #fff, transparent 60%);
    background-repeat: repeat;
    background-size: 100% 100%;
    animation: cosmos-twinkle 6s ease-in-out infinite alternate;
    will-change: transform, opacity;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cosmos::after{
    inset: -20%;
    background-image:
        radial-gradient(1px 1px at 14% 22%, #fff, transparent 60%),
        radial-gradient(.8px .8px at 33% 52%, #cfd8ff, transparent 60%),
        radial-gradient(1px 1px at 58% 18%, #fff, transparent 60%),
        radial-gradient(.8px .8px at 72% 48%, #fff, transparent 60%),
        radial-gradient(1px 1px at 88% 80%, #fff, transparent 60%),
        radial-gradient(.8px .8px at 10% 88%, #fff, transparent 60%),
        radial-gradient(1px 1px at 42% 76%, #fff, transparent 60%);
    opacity: .6;
    animation: cosmos-twinkle 4s ease-in-out infinite alternate-reverse;
}
@keyframes cosmos-twinkle{
    0%{opacity:.55}
    100%{opacity:1}
}

/* Lueurs nébuleuses douces */
.nebula{
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    z-index: -1;
    mix-blend-mode: screen;
}
.nebula.n1{ top: -8vh; left: -6vw; width: 50vw; height: 50vw; background: radial-gradient(circle, #6f5bff 0%, transparent 70%);}
.nebula.n2{ top: 30vh; right: -10vw; width: 45vw; height: 45vw; background: radial-gradient(circle, #ff5ba0 0%, transparent 70%); opacity: .45;}
.nebula.n3{ bottom: -15vh; left: 20vw; width: 60vw; height: 60vw; background: radial-gradient(circle, #2bb6ff 0%, transparent 70%); opacity: .4;}

/* ---- Layout général page ---- */
.constellation-page main{
    max-width: none;
    margin: 0;
    padding: 0;
}

.constellation-page h2.type-text{
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    letter-spacing: .12em;
    color: #f7f1e6;
    padding: 3.5rem 1rem 1.5rem;
    text-shadow: 0 0 30px rgba(255,230,180,.35), 0 0 60px rgba(120,130,255,.25);
}

.intro-line{
    text-align:center;
    color:#a6b3d8;
    font-size:.95rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:1rem;
}

/* ============== LA CARTE STELLAIRE ============== */
.starmap{
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 720px;
    margin: 0 auto 4rem;
    overflow: visible;
}

.starmap svg.lines{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.starmap svg.lines line{
    stroke: rgba(200, 215, 255, 0.32);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw-line 1.6s ease-out forwards;
    filter: drop-shadow(0 0 4px rgba(140, 170, 255, .35));
}
@keyframes draw-line{
    to{ stroke-dashoffset: 0; }
}

/* Étoile = bouton de projet */
.star{
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    opacity: 0;
    animation: star-pop .9s ease-out forwards;
}
@keyframes star-pop{
    0%{ opacity:0; transform: translate(-50%,-50%) scale(.3); }
    100%{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}

.star .dot{
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #fff 35%, #f6e6b3 55%, rgba(255,210,120,0) 75%);
    box-shadow:
        0 0 8px #fff,
        0 0 18px rgba(255, 230, 170, .9),
        0 0 38px rgba(255, 180, 120, .55),
        0 0 80px rgba(140, 170, 255, .35);
    animation: twinkle 3.4s ease-in-out infinite;
}
.star[data-size="lg"] .dot{ width: 20px; height: 20px; }
.star[data-size="sm"] .dot{ width: 10px; height: 10px; }

@keyframes twinkle{
    0%, 100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: .55; transform: scale(.78); }
}

/* Ray cross around star (shine) */
.star .dot::before, .star .dot::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform-origin: center;
    pointer-events: none;
}
.star .dot::before{
    width: 60px; height: 1px;
    transform: translate(-50%,-50%);
    opacity: .55;
}
.star .dot::after{
    width: 1px; height: 60px;
    transform: translate(-50%,-50%);
    opacity: .55;
}

/* Label sous l'étoile */
.star .label{
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .95rem;
    letter-spacing: .14em;
    color: #f3ebd6;
    text-shadow: 0 0 12px rgba(0,0,0,.8), 0 0 24px rgba(120,140,255,.35);
    text-transform: uppercase;
    pointer-events: none;
    transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}
.star .tag{
    display:block;
    text-align:center;
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .15em;
    color: #8896c8;
    text-transform: uppercase;
}

.star:hover .dot, .star:focus .dot{
    transform: scale(1.5);
    animation-play-state: paused;
    box-shadow:
        0 0 12px #fff,
        0 0 30px rgba(255, 230, 170, 1),
        0 0 60px rgba(255, 180, 120, .9),
        0 0 120px rgba(180, 200, 255, .7);
}
.star:hover .label, .star:focus .label{
    color: #fff;
    transform: translateX(-50%) translateY(2px);
    text-shadow: 0 0 18px rgba(255,230,170,.9);
}

/* Marquage de l'étoile active */
.star.is-active .dot{
    box-shadow:
        0 0 16px #fff,
        0 0 40px #ffd57a,
        0 0 90px rgba(255, 200, 120, .9);
}

/* ===== Tooltip details ===== */
.star-tooltip{
    position: absolute;
    transform: translate(-50%, calc(-100% - 28px));
    background: rgba(8, 10, 25, .92);
    border: 1px solid rgba(180, 200, 255, .25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #e8efff;
    padding: .7rem 1rem;
    border-radius: 10px;
    max-width: 240px;
    font-size: .85rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 10;
    box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 30px rgba(120,140,255,.18);
}
.star-tooltip strong{ color: #ffd986; letter-spacing: .1em; display:block; margin-bottom: .25rem;}
.star:hover + .star-tooltip, .star:focus + .star-tooltip{ opacity: 1; }

/* ===== Sections de projets - style cosmique ===== */
.constellation-page .project-section{
    max-width: 980px;
    margin: 0 auto 3rem;
    padding: 2rem 1.5rem;
    position: relative;
    scroll-margin-top: 80px;
}

.constellation-page .project-section h4{
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #fff;
    letter-spacing: .1em;
    margin: 0 0 .25rem;
    position: relative;
    padding-left: 1.5rem;
    text-shadow: 0 0 24px rgba(255, 220, 160, .35);
}
.constellation-page .project-section h4::before{
    content: "✦";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffd57a;
    font-size: .9em;
    text-shadow: 0 0 14px #ffd57a;
}

.constellation-page .project-section .section-card{
    background: rgba(12, 14, 32, .55);
    border: 1px solid rgba(180, 200, 255, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-top: 1rem;
    color: #d5dcf0;
    line-height: 1.7;
    box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.constellation-page .project-section .section-card p{ margin: .5em 0; color: #d5dcf0; }
.constellation-page .project-section .section-card a{ color: #ffcb6b; text-decoration: none; border-bottom: 1px dotted rgba(255, 203, 107, .4);}
.constellation-page .project-section .section-card a:hover{ color: #fff; border-bottom-color: #fff; text-decoration: none;}
.constellation-page .project-section .section-card b, .constellation-page .project-section .section-card strong{ color: #fff;}
.constellation-page .project-section .section-card ul{ padding-left: 1.2rem; }
.constellation-page .project-section .section-card li{ margin: .35em 0; }
.constellation-page .project-section .section-card pre{
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255, 200, 130, .25);
    border-radius: 10px;
    padding: 1rem;
    max-width: 100%;
    overflow-x: auto;
    box-shadow: none;
}
.constellation-page .project-section .section-card pre code{
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
}
.constellation-page .project-section .section-card img{
    max-width: 80%;
    border-radius: 10px;
    margin: .5rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.08);
}
.constellation-page .project-section .section-card .theme-btn{
    background: linear-gradient(135deg, #4a3a8a, #8a4a8a);
    color: #fff;
    border: 1px solid rgba(255,200,130,.35);
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    margin: .5rem 0;
}
.constellation-page .project-section .section-card .theme-btn:hover{
    background: linear-gradient(135deg, #5a4a9a, #9a5a9a);
    transform: translateY(-2px);
}

/* Bouton "remonter vers la carte" */
.back-to-map{
    display: inline-block;
    margin-top: 1rem;
    color: #8896c8 !important;
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    border: none !important;
    text-decoration: none !important;
}
.back-to-map:hover{ color: #ffd57a !important; }

/* Highlight quand on saute sur une section */
.project-section.flash .section-card{
    animation: section-flash 1.6s ease-out;
}
@keyframes section-flash{
    0%{ box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 0 rgba(255, 215, 130, .8); }
    50%{ box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 20px rgba(255, 215, 130, 0); }
    100%{ box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04); }
}

/* Header (nav) sombre cosmique */
.constellation-page header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5,6,16,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(180, 200, 255, .08);
    padding: .5rem 0;
}
.constellation-page nav>a{
    background: transparent !important;
    border: 1px solid rgba(180, 200, 255, .15) !important;
    color: #d8e3ff !important;
    font-weight: 500;
    letter-spacing: .08em;
    font-size: .9rem;
    text-transform: uppercase;
    transition: all .3s ease;
}
.constellation-page nav>a:hover{
    background: rgba(255, 215, 130, .12) !important;
    border-color: rgba(255, 215, 130, .5) !important;
    color: #ffd57a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 130, .2);
}

/* Footer cosmique */
.constellation-page footer{
    background: rgba(5,6,16,.85);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(180, 200, 255, .1);
    color: #d8e3ff;
    margin-top: 5rem;
}
.constellation-page footer a, .constellation-page footer a:visited{
    color: #ffcb6b !important;
}
.constellation-page footer .theme-btn{
    background: linear-gradient(135deg, #4a3a8a, #8a4a8a);
    color: #fff;
    border: 1px solid rgba(255,200,130,.3);
}

.constellation-page .copyright-note{
    text-align: center;
    padding: 1rem;
    color: #6f7aa5;
    font-size: .8rem;
    background: #03040a;
}

/* Étoile filante ! */
.shooting-star{
    position: fixed;
    top: -10px;
    left: 0;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff, 0 0 20px #fff;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}
.shooting-star::after{
    content:"";
    position: absolute;
    top: 0; left: 0;
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.9), transparent);
    transform-origin: left center;
    transform: rotate(180deg);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
    .starmap{ height: 110vh; min-height: 760px; }
    .star .label{ font-size: .8rem; }
    .star .tag{ font-size: .58rem; }
    .star .dot::before, .star .dot::after{ width: 36px; height: 1px;}
    .star .dot::after{ width: 1px; height: 36px;}
}
@media (max-width: 600px){
    .constellation-page nav{ flex-wrap: wrap; }
    .constellation-page nav>a{ width: calc(50% - .25rem); font-size: .75rem; padding: .6em 0;}
    .starmap{ height: 130vh; min-height: 900px; }
    .star .label{ font-size: .7rem; letter-spacing: .08em;}
    .star .tag{ display: none; }
}