/* ============================================
   PERSONNALISATIONS / THÈMES DU SITE
   (ex : Noël, saisons, promotions, etc.)
   ============================================ */

/* === Bonnet de Noël sur le logo ================= */

.logo-noel {
    position: relative;
    display: inline-block;
}

/* Bonnet SVG positionné sur le nom */
.theme-noel .logo-noel::after {
    content: "";
    position: absolute;

    /* À ajuster selon la taille de ton logo */
    top: -1.6rem;
    left: 12.4rem;
    width: 3rem;
    aspect-ratio: 1 / 1;

    /* Chemin relatif depuis assets/css vers ton SVG */
    background-image: url("../img/pers/bonnet-noel.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;

    /* Ensemble du bonnet fixe */
    transform-origin: 50% 100%;
    animation: none;
}

/* Ajustement mobile : on colle le bonnet sur le nom malgré la largeur réduite */
@media (max-width: 768px) {
    .theme-noel .logo-noel::after {
        top: -1.2rem;
        left: auto;
        right: -0.35rem;
        width: 2.4rem;
    }
}

@media (max-width: 480px) {
    .theme-noel .logo-noel::after {
        top: -1.05rem;
        right: -0.25rem;
        width: 2.1rem;
    }
}

/* ================== FLOCONS DE NEIGE (EFFET DÉCORATIF) ================== */

.snow-container {
    display: none;
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    pointer-events: none; /* ne bloque jamais les clics */
    overflow: hidden;

    /* On le met tout en haut de la pile */
    z-index: 9999;
    --wind-offset: 0px;
    transform: translateX(var(--wind-offset));
    transition: transform 4s ease-in-out;
}

.theme-noel .snow-container {
    display: block;
}

/* Style de base des flocons */
.snowflake {
    position: absolute;
    top: -10%; /* départ au-dessus de l'écran */

    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    animation-name: snowfall; /* uniquement la chute verticale */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

.snowflake-inner {
    display: block;
    will-change: transform;
}

/* Animation de la chute verticale */
@keyframes snowfall {
    0% {
        transform: translate3d(0, -10vh, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 110vh, 0);
        opacity: 0;
    }
}

/* Oscillation horizontale subtile */
@keyframes sway-left {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-15px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sway-right {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(0);
    }
}

/* On combine la chute + l'oscillation */
.snowflake-inner[data-sway="sway-left"] {
    animation-name: sway-left;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.snowflake-inner[data-sway="sway-right"] {
    animation-name: sway-right;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Feux d'artifice Nouvel An (effet mortier) */
.theme-nouvel-an .logo-noel {
    position: relative;
    overflow: visible;
}

.logo-fireworks {
    position: absolute;
    left: 0;
    top: -2.4rem;
    width: 100%;
    height: 2.7rem;
    pointer-events: none;
    display: none;
}

.theme-nouvel-an .logo-fireworks {
    display: block;
}

.theme-nouvel-an .logo-firework {
    position: absolute;
    left: var(--fw-x);
    top: var(--fw-y);
    width: 0.1rem;
    height: 0.1rem;
    transform: translateX(-50%);
}

.theme-nouvel-an .logo-firework::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 0.14rem;
    height: 1.6rem;
    background: linear-gradient(to top, rgba(255, 214, 120, 0), rgba(255, 214, 120, 0.95));
    transform: translate(-50%, 1.7rem);
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(255, 196, 90, 0.6));
    animation: mortar-trail var(--fw-duration) ease-in infinite;
    animation-delay: var(--fw-delay);
}

.theme-nouvel-an .logo-firework::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            rgba(255, 214, 120, 0.95) 0 18deg,
            transparent 18deg 36deg,
            rgba(255, 214, 120, 0.95) 36deg 58deg,
            transparent 58deg 84deg,
            rgba(248, 186, 74, 0.9) 84deg 110deg,
            transparent 110deg 140deg,
            rgba(255, 214, 120, 0.95) 140deg 162deg,
            transparent 162deg 200deg,
            rgba(248, 186, 74, 0.9) 200deg 232deg,
            transparent 232deg 360deg
        );
    -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 46% 100%);
    mask: radial-gradient(circle, transparent 0 44%, #000 46% 100%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    filter: drop-shadow(0 0 8px rgba(255, 196, 90, 0.65));
    animation: mortar-burst var(--fw-duration) ease-out infinite;
    animation-delay: calc(var(--fw-delay) + 0.12s);
}

.theme-nouvel-an .logo-firework.fw-1 {
    --fw-x: 72%;
    --fw-y: 1.85rem;
    --fw-delay: -0.6s;
    --fw-duration: 2.9s;
}

.theme-nouvel-an .logo-firework.fw-2 {
    --fw-x: 45%;
    --fw-y: 1.45rem;
    --fw-delay: -1.8s;
    --fw-duration: 3.3s;
}

.theme-nouvel-an .logo-firework.fw-3 {
    --fw-x: 90%;
    --fw-y: 1.15rem;
    --fw-delay: -2.4s;
    --fw-duration: 2.6s;
}

@keyframes mortar-trail {
    0% {
        opacity: 0;
        transform: translate(-50%, 1.7rem);
    }
    15% {
        opacity: 1;
    }
    40% {
        opacity: 1;
        transform: translate(-50%, 0.3rem);
    }
    60%,
    100% {
        opacity: 0;
        transform: translate(-50%, -0.1rem);
    }
}

@keyframes mortar-burst {
    0%,
    35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    45% {
        opacity: 1;
    }
    70% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@media (max-width: 768px) {
    .logo-fireworks {
        top: -2.1rem;
        height: 2.4rem;
    }

    .theme-nouvel-an .logo-firework.fw-1 {
        --fw-x: 70%;
        --fw-y: 1.7rem;
    }

    .theme-nouvel-an .logo-firework.fw-2 {
        --fw-x: 40%;
        --fw-y: 1.35rem;
    }

    .theme-nouvel-an .logo-firework.fw-3 {
        --fw-x: 86%;
        --fw-y: 1.05rem;
    }
}

@media (max-width: 480px) {
    .logo-fireworks {
        top: -1.9rem;
        height: 2.2rem;
    }

    .theme-nouvel-an .logo-firework.fw-1 {
        --fw-x: 68%;
        --fw-y: 1.55rem;
    }

    .theme-nouvel-an .logo-firework.fw-2 {
        --fw-x: 38%;
        --fw-y: 1.2rem;
    }

    .theme-nouvel-an .logo-firework.fw-3 {
        --fw-x: 84%;
        --fw-y: 0.95rem;
    }
}

/* Badge coeur sur le logo (Saint-Valentin) */
.theme-valentin .logo-noel {
    position: relative;
}

.theme-valentin .logo-noel::after {
    content: "❤";
    position: absolute;
    top: -1.4rem;
    left: 12.6rem;
    font-size: 2rem;
    color: #ff1f5a;
    transform: rotate(-12deg);
    animation: heart-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

.theme-valentin .logo-noel::before {
    content: "❤";
    position: absolute;
    top: -0.9rem;
    left: 10.6rem;
    font-size: 1.4rem;
    color: #d90429;
    transform: rotate(10deg);
    animation: heart-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heart-pulse {
    0% { transform: scale(0.96) rotate(-6deg); }
    50% { transform: scale(1.1) rotate(6deg); }
    100% { transform: scale(0.96) rotate(-6deg); }
}

/* Badge lapin sur le logo (Pâques) */
.theme-paques .logo-noel {
    position: relative;
}

.theme-paques .logo-noel::after {
    content: "🐰";
    position: absolute;
    top: -1.6rem;
    left: 12.2rem;
    font-size: 2.1rem;
    transform: rotate(-8deg);
    pointer-events: none;
}

.theme-paques .logo-noel::before {
    content: "🥚";
    position: absolute;
    top: -0.8rem;
    left: 10.6rem;
    font-size: 1.3rem;
    transform: rotate(12deg);
    pointer-events: none;
}

/* Badge fleur sur le logo (Printemps) */
.theme-printemps .logo-noel {
    position: relative;
}

.theme-printemps .logo-noel::after {
    content: "🌸";
    position: absolute;
    top: -1.4rem;
    left: 12.4rem;
    font-size: 2rem;
    transform: rotate(-8deg);
    animation: flower-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

.theme-printemps .logo-noel::before {
    content: "🌼";
    position: absolute;
    top: -0.9rem;
    left: 10.5rem;
    font-size: 1.3rem;
    transform: rotate(10deg);
    animation: flower-pulse 2.1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flower-pulse {
    0% { transform: scale(0.92) rotate(-6deg); opacity: 0.8; }
    50% { transform: scale(1.08) rotate(6deg); opacity: 1; }
    100% { transform: scale(0.92) rotate(-6deg); opacity: 0.8; }
}