/* Explain: Base reset, typography defaults, and cosmic background effects. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); }

/* Le contenu reste toujours contenu dans son cadre */
body { overflow-wrap: break-word; }

.sa-panel img,
.sa-panel video,
.sa-panel iframe,
.sa-panel canvas {
    max-width: 100%;
}

::selection {
    background: var(--primary-color);
    color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0518; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--primary-color), var(--gold-color));
    border-radius: 10px;
}

.sa-starfield {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(2px 2px at 42% 68%, rgba(232,196,122,.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 74%, rgba(255,255,255,.8), transparent 60%),
        radial-gradient(1.5px 1.5px at 24% 88%, rgba(196,181,253,.8), transparent 60%),
        radial-gradient(1px 1px at 62% 32%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1px 1px at 8% 60%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1px 1px at 34% 8%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,.5), transparent 60%);
    animation: sa-twinkle 7s ease-in-out infinite alternate;
}

.sa-nebula {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 12% -10%, rgba(139,92,246,.28), transparent 65%),
        radial-gradient(50vw 50vw at 95% 10%, rgba(232,196,122,.14), transparent 60%),
        radial-gradient(70vw 70vw at 50% 120%, rgba(76,29,149,.30), transparent 70%);
}

/* Fond stellaire animé (canvas) — couche de base */
.sa-cosmos-canvas {
    position: fixed;
    inset: 0;
    z-index: -3;
    display: block;
    pointer-events: none;
}

@keyframes sa-twinkle {
    from { opacity: .55; }
    to { opacity: 1; }
}

/* Mouvement réduit : expérience calme et rapide */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto; }
}