/* ===========================================
   STYLES DE BASE - Christmas Playlist
   =========================================== */

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

/* Corps */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg-dark);
    color: var(--color-text-primary);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== PAYSAGE HIVERNAL ===== */
.winter-landscape {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Collines enneigées */
.snow-hills {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.5);
}

.snow-hills::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 30%;
    height: 60px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 100%
    );
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
}

/* Sapins */
.pine-trees {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.pine-tree {
    position: relative;
    opacity: 0.15;
}

.pine-tree::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 60px solid var(--color-green-pine);
}

.pine-tree::after {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 50px solid var(--color-green-pine);
}

.pine-tree.small::before {
    border-left-width: 15px;
    border-right-width: 15px;
    border-bottom-width: 40px;
}

.pine-tree.small::after {
    bottom: 25px;
    border-left-width: 12px;
    border-right-width: 12px;
    border-bottom-width: 35px;
}

.pine-tree.large::before {
    border-left-width: 35px;
    border-right-width: 35px;
    border-bottom-width: 80px;
}

.pine-tree.large::after {
    bottom: 55px;
    border-left-width: 28px;
    border-right-width: 28px;
    border-bottom-width: 65px;
}

/* Troisième niveau pour les grands sapins */
.pine-tree.large .tree-top {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 50px solid var(--color-green-pine);
}

/* ===== ÉTOILES SCINTILLANTES ===== */
.stars-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkleStar 3s ease-in-out infinite;
}

.star.bright {
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
}

@keyframes twinkleStar {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Variation des délais d'animation */
.star:nth-child(odd) {
    animation-duration: 4s;
}

.star:nth-child(3n) {
    animation-duration: 2.5s;
}

.star:nth-child(5n) {
    animation-duration: 5s;
}

/* Liens */
a {
    color: var(--color-gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-gold-light);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Boutons */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Inputs */
input {
    font-family: inherit;
    font-size: 1rem;
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* Glass card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: var(--glass-shadow);
}

/* Container */
.app-container {
    position: relative;
    z-index: var(--z-content);
    min-height: 100vh;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-dark);
}

/* Selection */
::selection {
    background: var(--color-gold);
    color: var(--color-bg-dark);
}