/* Ciel numérique — thème visuel. Le contenu et les composants restent dans style.css. */
body.cosmic-theme {
    --sky-bg: #080d19;
    --sky-panel: rgba(16, 24, 42, 0.94);
    --sky-border: rgba(145, 187, 226, 0.18);
    --sky-cyan: #8addff;
    background: var(--sky-bg);
    color: #eef5ff;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.cosmic-sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    user-select: none;
}

.cosmic-theme nav {
    background: rgba(8, 13, 25, 0.91);
    border-bottom-color: rgba(138, 221, 255, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.cosmic-theme .brand-logo { filter: drop-shadow(0 0 8px rgba(138, 221, 255, 0.22)); }
.cosmic-theme .nav-brand { font-size: 17px; letter-spacing: -0.02em; }
.cosmic-theme .nav-links { gap: 22px; }
.cosmic-theme .nav-links a { font-size: 13px; color: #a5b5cd; }
.cosmic-theme .nav-links a:hover,
.cosmic-theme .nav-links a.active { color: #ecf9ff; }
.cosmic-theme .nav-links a::after { background: var(--sky-cyan); box-shadow: 0 0 9px rgba(138, 221, 255, 0.6); }

.cosmic-theme #home { margin-top: 0; max-width: none; }
.cosmic-theme .hero { padding: 110px 24px; }
.cosmic-theme .hero h1 {
    font-size: clamp(2.7rem, 7vw, 6rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
    background-image: linear-gradient(110deg, #eefaff 5%, #88d8ff 45%, #aba9ff 95%);
    text-shadow: 0 0 55px rgba(119, 197, 255, 0.12);
}
.cosmic-theme .hero p.hero-subtitle {
    color: #acc5df;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin: 18px 0 14px;
}
.cosmic-theme .hero > p:not(.hero-subtitle) {
    max-width: 620px;
    color: #b5c2d7;
    font-size: 1rem;
    line-height: 1.85;
}
.cosmic-theme .hero-buttons { gap: 12px; margin-top: 30px; }
.cosmic-theme .hero-btn {
    background: rgba(16, 25, 43, 0.86);
    border: 1px solid rgba(138, 221, 255, 0.24);
    color: #d9f2ff;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.cosmic-theme .hero-btn:hover {
    background: #172b42;
    border-color: rgba(138, 221, 255, 0.65);
    box-shadow: 0 0 24px rgba(85, 183, 242, 0.12);
}

.cosmic-theme section:not(#home)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 221, 255, 0.13), transparent);
    pointer-events: none;
}
.cosmic-theme :is(#formation, #bts, #projects, #skills, #veille) > h2,
.cosmic-theme .experience-heading > h2 {
    color: #eef7ff;
    text-shadow: 0 0 25px rgba(138, 221, 255, 0.12);
}
.cosmic-theme :is(#formation, #bts, #projects, #skills, #veille) > h2::after,
.cosmic-theme .experience-heading > h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin: 18px auto;
    background: var(--sky-cyan);
    box-shadow: 0 0 12px rgba(138, 221, 255, 0.6);
    border-radius: 2px;
}
.cosmic-theme p { color: #a7b7ce; }
.cosmic-theme :is(.content, .modern-exp-card, .veille-card, .skill-board) {
    background: var(--sky-panel);
    border: 1px solid var(--sky-border);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(224, 247, 255, 0.025);
}
.cosmic-theme .hover-card-bright {
    background: var(--sky-panel) !important;
    border-color: var(--sky-border) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(224, 247, 255, 0.025);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.cosmic-theme :is(.content, .modern-exp-card, .veille-card, .skill-board):hover,
.cosmic-theme .hover-card-bright:hover {
    border-color: rgba(138, 221, 255, 0.4) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), 0 0 32px rgba(77, 167, 234, 0.07);
}
.cosmic-theme .modern-exp-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.cosmic-theme .timeline::after { background: rgba(138, 221, 255, 0.22); }
.cosmic-theme .dot { background: var(--sky-cyan); box-shadow: 0 0 18px rgba(138, 221, 255, 0.4); }
.cosmic-theme .content hr { border-color: rgba(145, 187, 226, 0.13); }
.cosmic-theme :is(.box, .tool-card) {
    background: rgba(7, 13, 26, 0.65);
    border-color: rgba(145, 187, 226, 0.15);
}
.cosmic-theme :is(.carousel-btn, .carousel-pause-btn, .epoka-controls button) {
    background: #111f34;
    border: 1px solid rgba(138, 221, 255, 0.28);
    color: #d4f3ff;
}
.cosmic-theme :is(.btn-blue, .btn-violet) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* Une surface opaque dans les fenêtres pour garder les longues descriptions lisibles. */
.cosmic-theme .modal-overlay { background: rgba(3, 7, 15, 0.83); }
.cosmic-theme .modal-wrapper { background: #10192b; border-color: rgba(138, 221, 255, 0.22); }
.cosmic-theme .modal-header { border-bottom-color: rgba(145, 187, 226, 0.15); }

.sky-toggle {
    position: fixed;
    right: 24px;
    bottom: 20px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(138, 221, 255, 0.23);
    border-radius: 100px;
    background: rgba(8, 15, 29, 0.94);
    color: #b8d5e9;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s, color 0.2s;
}
.sky-toggle:hover { border-color: var(--sky-cyan); color: #eefaff; }
.sky-toggle[aria-pressed="true"] { color: #9daec6; }
.modal-open .sky-toggle { visibility: hidden; }
.sky-toggle svg { flex-shrink: 0; pointer-events: none; }
.cosmic-theme :is(a, button):focus-visible { outline: 2px solid var(--sky-cyan); outline-offset: 5px; }
.cosmic-theme ::selection { background: rgba(99, 186, 255, 0.3); color: #fff; }
.cosmic-theme ::-webkit-scrollbar-track { background: #080d19; }
.cosmic-theme ::-webkit-scrollbar-thumb { border-color: #080d19; }

/* Le menu reste centré sur grand écran, puis passe en bouton avant de toucher le logo. */
@media (min-width: 1400px) {
    .cosmic-theme .nav-links { width: max-content; white-space: nowrap; }
}
@media (max-width: 1399px) {
    .cosmic-theme nav { justify-content: space-between; padding: 12px 24px; }
    .cosmic-theme .menu-toggle { display: flex; }
    .cosmic-theme .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        transform: none;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 10px 20px 16px;
        background: rgba(8, 13, 25, 0.98);
        border-bottom: 1px solid rgba(138, 221, 255, 0.2);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
    }
    .cosmic-theme .nav-links.menu-open { display: flex; }
    .cosmic-theme .nav-links a { padding: 13px 8px; font-size: 15px; width: 100%; }
    .cosmic-theme .nav-links a::after { bottom: 6px; }
}
@media (max-width: 767px) {
    .cosmic-theme nav { padding: 12px 16px; }
    .cosmic-theme .hero { padding: 150px 24px 110px; }
    .cosmic-theme .hero > p:not(.hero-subtitle) { font-size: 0.95rem; line-height: 1.75; }
    .cosmic-theme .hero-buttons { gap: 10px; margin-top: 24px; }
    .cosmic-theme .hero-btn { padding: 11px 16px; }
    .sky-toggle { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); font-size: 11px; padding: 9px 12px; }
    .sky-toggle { width: 44px; padding: 0; }
    .sky-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .cosmic-theme .hero-btn, .cosmic-theme .fade-in, .sky-toggle { transition: none; }
}