/* 
 * CSS pour les Saisons Dynamiques - Thème Premium
 * Effets subtils en arrière-plan et dans le menu latéral.
 */

/* Conteneur principal absolu pour ne pas déranger le flow */
#saisons-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Ne bloque pas les clics */
    z-index: 10; /* Au-dessus du background, mais souvent sous les modales */
    overflow: hidden;
}

/* =========================================
   HIVER (Flocons de neige doux)
   ========================================= */
.season-winter .snowflake {
    position: absolute;
    top: -5%;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(1px);
    animation: fall linear infinite, sway ease-in-out infinite alternate;
}

@keyframes fall {
    0% { transform: translateY(-10px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(105vh); opacity: 0; }
}
@keyframes sway {
    0% { margin-left: 0px; }
    100% { margin-left: 20px; }
}

/* =========================================
   AUTOMNE (Feuilles tombantes)
   ========================================= */
.season-autumn .leaf {
    position: absolute;
    top: -5%;
    width: 15px;
    height: 15px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d35400"><path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 7,15 7,15C7,15 11,10.35 17,8Z"/></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.3;
    animation: leaf-fall linear infinite, leaf-spin linear infinite;
}

@keyframes leaf-fall {
    0% { transform: translateY(-10px); }
    100% { transform: translateY(105vh); }
}
@keyframes leaf-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   PRINTEMPS (Pétales de fleurs)
   ========================================= */
.season-spring .petal {
    position: absolute;
    top: -5%;
    width: 10px;
    height: 10px;
    background: rgba(255, 182, 193, 0.4);
    border-radius: 10px 0 10px 0;
    animation: fall linear infinite, sway ease-in-out infinite alternate, leaf-spin linear infinite;
}

/* =========================================
   ÉTÉ (Particules de soleil / Lucioles)
   ========================================= */
.season-summer .sunmote {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 223, 0, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 223, 0, 0.8);
    animation: float ease-in-out infinite alternate, pulse linear infinite;
}

@keyframes float {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-50px) translateX(20px); }
}
@keyframes pulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.6; transform: scale(1.5); }
}