/* ============================================================================
   WANO FLIX - CHRISTMAS EDITION (FÉERIE DE NOËL ULTRA-IMMERSIVE 60/120 FPS)
   - Paysage anime féerique enneigé, aurores boréales cyan/violet
   - Tempête de neige scintillante et flocons légers
   - Guirlandes lumineuses festives et dorures royales
   - Père Noël animé interactif : fuit quand on le touche / vole les cadeaux
   ============================================================================ */

:root {
    --xmas-red: #e50914;
    --xmas-dark-red: #9e0c15;
    --xmas-green: #00e676;
    --xmas-gold: #ffd700;
    --xmas-aurora: #00e5ff;
    --xmas-night-bg: #060b14;
    --xmas-snow: #e6f7ff;
}

body.christmas-theme {
    background: #060b14 !important;
    color: #f0f8ff !important;
    overflow-x: hidden;
}

/* 1. Décor Enneigé Photoréaliste / Anime & Aurore Boréale */
.xmas-ambient-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transition: opacity 0.8s ease;
}

.xmas-landscape {
    position: absolute;
    inset: -20px;
    background: url('/images/christmas-landscape.jpg') center bottom / cover no-repeat;
    opacity: 0.55;
    filter: brightness(0.72) contrast(1.15) saturate(1.2);
    animation: xmas-landscape-drift 60s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes xmas-landscape-drift {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-15px, -10px); }
}

/* Aurore Boréale céleste animée */
.xmas-aurora-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45vh;
    background: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(0, 229, 255, 0.22), rgba(155, 48, 255, 0.18), transparent 75%);
    filter: blur(35px);
    animation: xmas-aurora-wave 12s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes xmas-aurora-wave {
    0% { opacity: 0.45; transform: scaleX(1) translateY(0); }
    50% { opacity: 0.8; transform: scaleX(1.15) translateY(15px); }
    100% { opacity: 0.55; transform: scaleX(0.95) translateY(-5px); }
}

/* Flocons de Neige Canvas */
.xmas-snow-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Guirlande lumineuse scintillante en haut de page */
.xmas-garland-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    pointer-events: none;
}

.xmas-garland-top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: xmas-garland-twinkle 1.8s infinite ease-in-out;
}

.xmas-garland-top span:nth-child(4n+1) { background: #ff2a2a; box-shadow: 0 0 10px #ff2a2a; animation-delay: 0s; }
.xmas-garland-top span:nth-child(4n+2) { background: #00ff66; box-shadow: 0 0 10px #00ff66; animation-delay: 0.45s; }
.xmas-garland-top span:nth-child(4n+3) { background: #ffd700; box-shadow: 0 0 10px #ffd700; animation-delay: 0.9s; }
.xmas-garland-top span:nth-child(4n+4) { background: #00e5ff; box-shadow: 0 0 10px #00e5ff; animation-delay: 1.35s; }

@keyframes xmas-garland-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* 2. Le Père Noël animé interactif (Sur le toit / dans la cheminée / vole les cadeaux) */
.xmas-santa-wrap {
    position: fixed;
    z-index: 900;
    width: 230px;
    height: 230px;
    left: 78vw;
    top: 26vh;
    pointer-events: none;
    animation: xmas-santa-patrol 34s ease-in-out infinite;
    will-change: left, top, transform;
}

@media (max-width: 768px) {
    .xmas-santa-wrap {
        width: 155px;
        height: 155px;
        animation-duration: 28s;
    }
}

@keyframes xmas-santa-patrol {
    0% { left: 92vw; top: 20vh; transform: scaleX(1) rotate(-2deg); }
    20% { left: 68vw; top: 32vh; transform: scaleX(1) rotate(3deg); }
    40% { left: 35vw; top: 18vh; transform: scaleX(1) rotate(-1deg); }
    55% { left: 8vw; top: 34vh; transform: scaleX(1) rotate(2deg); }
    59.9% { left: -25vw; top: 22vh; transform: scaleX(1) rotate(0deg); }
    60% { left: -25vw; top: 22vh; transform: scaleX(-1) rotate(0deg); }
    75% { left: 25vw; top: 16vh; transform: scaleX(-1) rotate(-2deg); }
    90% { left: 70vw; top: 28vh; transform: scaleX(-1) rotate(3deg); }
    97.9% { left: 115vw; top: 20vh; transform: scaleX(-1) rotate(0deg); }
    98% { left: 115vw; top: 20vh; transform: scaleX(1) rotate(0deg); }
    100% { left: 92vw; top: 20vh; transform: scaleX(1) rotate(-2deg); }
}

.xmas-santa-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.xmas-santa-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal !important;
    filter: drop-shadow(0 0 18px rgba(255, 40, 40, 0.45)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.35)) drop-shadow(0 14px 25px rgba(0, 0, 0, 0.85));
    transition: transform 0.25s ease, filter 0.25s ease;
    will-change: transform, filter;
    display: block;
}

.xmas-santa-container:hover .xmas-santa-img {
    filter: drop-shadow(0 0 28px rgba(255, 40, 40, 0.85)) drop-shadow(0 0 38px rgba(255, 215, 0, 0.75)) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.95)) brightness(1.15);
    transform: scale(1.08);
}

/* Poussière d'étoiles dorées sous le Père Noël */
.xmas-sparkles {
    position: absolute;
    bottom: 15%;
    left: 20%;
    right: 20%;
    height: 25px;
    pointer-events: none;
}

.xmas-sparkles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 8px #ffd700, 0 0 14px #ff5500;
    opacity: 0;
    animation: xmas-sparkle-trail 1.8s ease-out infinite;
}

.xmas-sparkles span:nth-child(1) { left: 15%; top: 5px; animation-delay: 0s; }
.xmas-sparkles span:nth-child(2) { left: 40%; top: 12px; animation-delay: 0.45s; }
.xmas-sparkles span:nth-child(3) { left: 65%; top: 4px; animation-delay: 0.9s; }
.xmas-sparkles span:nth-child(4) { left: 85%; top: 10px; animation-delay: 1.35s; }

@keyframes xmas-sparkle-trail {
    0% { transform: translateY(0) scale(1); opacity: 0.95; }
    100% { transform: translateY(25px) scale(0.2); opacity: 0; }
}

/* Bulle de dialogue du Père Noël */
.xmas-bubble {
    position: absolute;
    bottom: 102%;
    left: 50%;
    transform: translate(-50%, 8px) scale(0.9);
    min-width: 190px;
    max-width: 310px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(15, 22, 38, 0.96);
    border: 1.5px solid rgba(255, 215, 0, 0.75);
    color: #fff9e6;
    font-size: 13.5px;
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    z-index: 999;
}

.xmas-bubble.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* Panique du Père Noël lorsqu'on le touche ! */
.xmas-santa-wrap.xmas-panic {
    animation: none !important;
}

.xmas-panic .xmas-santa-container {
    animation: xmas-santa-panic-freak 0.08s linear infinite !important;
}

@keyframes xmas-santa-panic-freak {
    0% { transform: translate(-8px, 4px) rotate(-8deg) scale(0.96); }
    50% { transform: translate(8px, -4px) rotate(8deg) scale(1.04); }
    100% { transform: translate(-8px, 4px) rotate(-8deg) scale(0.96); }
}

.xmas-panic .xmas-santa-img {
    filter: drop-shadow(0 0 45px rgba(255, 30, 0, 1)) drop-shadow(0 0 70px rgba(255, 215, 0, 0.9)) brightness(1.35) !important;
}

/* Fuite ultra-rapide par la cheminée / ciel */
.xmas-santa-wrap.xmas-flee {
    animation: none !important;
}

.xmas-flee .xmas-santa-container {
    animation: xmas-santa-escape 1.6s cubic-bezier(.5, -0.2, .7, 1) forwards !important;
}

@keyframes xmas-santa-escape {
    0% { transform: translate(0, 0) scale(1); }
    15% { transform: translate(-30px, 20px) rotate(-15deg) scale(0.9); }
    100% { transform: translate(140vw, -110vh) rotate(35deg) scale(0.2); opacity: 0; }
}

/* Badge Festif Noël */
.badge-christmas {
    background: linear-gradient(135deg, #e50914, #00b050);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.5);
}

/* Boutons et éléments d'interface retravaillés Noël */
body.christmas-theme .btn-primary {
    background: linear-gradient(135deg, #e50914, #b30006) !important;
    border: 1px solid rgba(255, 215, 0, 0.55) !important;
    box-shadow: 0 4px 18px rgba(229, 9, 20, 0.45) !important;
}

body.christmas-theme .btn-primary:hover {
    box-shadow: 0 6px 26px rgba(229, 9, 20, 0.75), 0 0 15px rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-2px);
}

body.christmas-theme .navbar {
    background: linear-gradient(180deg, rgba(6, 11, 20, 0.98), rgba(6, 11, 20, 0.85) 75%, transparent) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.25) !important;
}

/* ============================================================================
   3. CHEMINÉE CHALEUREUSE ANIMÉE & FEU DE BOIS (COZY HEARTH)
   ============================================================================ */
.xmas-cozy-hearth {
    position: fixed;
    bottom: 0;
    right: 32px;
    z-index: 100;
    pointer-events: auto;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

@media (max-width: 992px) {
    .xmas-cozy-hearth {
        transform: scale(0.75);
        transform-origin: bottom right;
        right: 12px;
        bottom: 60px;
    }
}

.hearth-chimney {
    position: relative;
    width: 220px;
    background: #1a0f0d;
    border: 3px solid #3d211a;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 0 35px rgba(255, 100, 20, 0.3), 0 10px 40px rgba(0, 0, 0, 0.9);
    padding: 10px 14px 4px;
}

.hearth-mantel {
    position: relative;
    background: #4a2418;
    border-radius: 8px;
    height: 18px;
    margin-bottom: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.hearth-stockings {
    position: absolute;
    top: 14px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-around;
    z-index: 10;
}

.stocking {
    background: #d90429;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 3px 5px 12px;
    border-radius: 3px 3px 8px 12px;
    border-top: 5px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.25s ease;
    text-transform: uppercase;
}

.stocking:hover {
    transform: translateY(3px) scale(1.15) rotate(5deg);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.stocking.s-krystal { background: #9b30ff; }
.stocking.s-mickael { background: #00b050; }
.stocking.s-ace { background: #ff7700; }

.hearth-fireplace {
    position: relative;
    height: 90px;
    background: radial-gradient(circle at 50% 90%, #2b0c05, #080302);
    border-radius: 50px 50px 0 0;
    overflow: hidden;
    border: 2px solid #5a2e22;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hearth-fire {
    position: relative;
    width: 60px;
    height: 55px;
}

.flame {
    position: absolute;
    bottom: 0;
    border-radius: 50% 50% 20% 20%;
    filter: blur(1px);
    animation: xmas-flame-flicker 1.2s infinite alternate ease-in-out;
}

.flame.f-1 {
    width: 44px;
    height: 48px;
    left: 8px;
    background: radial-gradient(circle, #ffee55, #ff6600, transparent 75%);
    animation-duration: 0.8s;
}

.flame.f-2 {
    width: 32px;
    height: 40px;
    left: 14px;
    background: radial-gradient(circle, #ffffff, #ffaa00, transparent 70%);
    animation-duration: 0.65s;
    animation-delay: 0.2s;
}

.flame.f-3 {
    width: 22px;
    height: 30px;
    left: 19px;
    background: radial-gradient(circle, #ffffff, #ffee88, transparent 65%);
    animation-duration: 0.5s;
    animation-delay: 0.35s;
}

@keyframes xmas-flame-flicker {
    0% { transform: scale(1) translateY(0); opacity: 0.9; }
    50% { transform: scale(1.08, 0.92) translateY(-3px) rotate(2deg); opacity: 1; }
    100% { transform: scale(0.94, 1.05) translateY(-5px) rotate(-2deg); opacity: 0.85; }
}

.hearth-gifts {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

.gift-box {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}

.gift-box:hover {
    transform: scale(1.35) rotate(-8deg);
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}

/* Étoiles filantes célestes */
.xmas-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shooting-star {
    position: absolute;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, #ffffff, rgba(255, 215, 0, 0.8), transparent);
    transform: rotate(-35deg);
    opacity: 0;
    animation: xmas-shooting-star 1.4s ease-out forwards;
}

@keyframes xmas-shooting-star {
    0% { transform: translate(0, 0) rotate(-35deg); opacity: 1; }
    100% { transform: translate(-300px, 300px) rotate(-35deg); opacity: 0; }
}

/* Modale Surprise de Noël Ultra-Polie & 100% Responsive */
.christmas-surprise-card {
    background: linear-gradient(145deg, #0d1525 0%, #070a12 100%) !important;
    border: 2px solid rgba(255, 215, 0, 0.75) !important;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.35), 0 25px 60px rgba(0, 0, 0, 0.95) !important;
    border-radius: 22px !important;
    padding: 26px 22px !important;
    max-width: 660px !important;
    width: 92% !important;
    box-sizing: border-box !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
}

.christmas-surprise-header {
    text-align: center;
    margin-bottom: 18px;
}

.surprise-icon {
    font-size: 34px;
    display: block;
    margin-bottom: 6px;
    animation: xmas-gift-bounce 2s infinite ease-in-out;
}

@keyframes xmas-gift-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px) scale(1.08); }
}

.christmas-surprise-header h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #ffd700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 4px 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.surprise-subtitle {
    font-size: 0.85rem !important;
    color: #cbd5e1 !important;
    display: block !important;
}

.christmas-surprise-body {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    align-items: center !important;
}

.surprise-poster-wrap {
    flex-shrink: 0;
    width: 155px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 215, 0, 0.35);
    border: 2px solid rgba(255, 215, 0, 0.5);
    background: #000;
}

.surprise-poster {
    width: 100%;
    height: 225px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.surprise-poster:hover {
    transform: scale(1.04);
}

.surprise-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.95), rgba(158, 12, 21, 0.95));
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    padding: 4px 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.surprise-text-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.surprise-message {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #f1f5f9 !important;
    margin: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.surprise-message strong {
    color: #ffd700 !important;
}

.surprise-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.surprise-stats span {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    color: #ffd700;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.surprise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.btn-surprise-accept {
    flex: 1;
    min-width: 180px;
    background: linear-gradient(135deg, #d90429, #ff5500) !important;
    color: #fff !important;
    border: 1px solid #ffd700 !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(217, 4, 41, 0.5) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
}

.btn-surprise-accept:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 6px 26px rgba(217, 4, 41, 0.8), 0 0 16px rgba(255, 215, 0, 0.7) !important;
}

.btn-surprise-later {
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.btn-surprise-later:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}

/* Version Mobile et Petits Écrans (< 640px) */
@media (max-width: 640px) {
    .christmas-surprise-card {
        padding: 20px 16px !important;
        width: 95% !important;
        margin: 10px auto !important;
        border-radius: 18px !important;
    }
    .christmas-surprise-header h2 {
        font-size: 1.05rem !important;
    }
    .surprise-icon {
        font-size: 28px !important;
    }
    .christmas-surprise-body {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
    }
    .surprise-poster-wrap {
        width: 125px !important;
        margin: 0 auto !important;
    }
    .surprise-poster {
        height: 180px !important;
    }
    .surprise-stats {
        justify-content: center !important;
    }
    .surprise-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    .btn-surprise-accept, .btn-surprise-later {
        width: 100% !important;
    }
}

/* ============================================================================
   WANO FLIX - ASSISTANCE 24/7 & PÈRE NOËL IA (CLOUDFLARE AI ASSISTANT)
   ============================================================================ */
.wano-ai-fab {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 9995;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #101c2e, #090e17);
    border: 2px solid rgba(255, 215, 0, 0.7);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.35);
    border-radius: 999px;
    padding: 8px 18px 8px 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    font-family: inherit;
    touch-action: manipulation;
}

.wano-ai-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75), 0 0 24px rgba(255, 215, 0, 0.6);
    border-color: #ffd700;
}

.wano-ai-fab-avatar {
    font-size: 22px;
    display: inline-block;
    animation: xmas-gift-bounce 2.2s infinite ease-in-out;
}

.wano-ai-fab-text {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffd700;
    white-space: nowrap;
}

.wano-ai-fab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: xmas-garland-twinkle 1.5s infinite;
}

@media (max-width: 640px) {
    .wano-ai-fab {
        bottom: 16px;
        left: 14px;
        padding: 7px 14px 7px 8px;
    }
    .wano-ai-fab-text {
        font-size: 0.78rem;
    }
}

/* Modale / Panneau Flottant de l'IA */
.wano-ai-panel {
    position: fixed;
    bottom: 80px;
    left: 22px;
    width: 440px;
    max-width: calc(100vw - 32px);
    height: 580px;
    max-height: calc(100vh - 110px);
    background: linear-gradient(160deg, #0e1726 0%, #060911 100%);
    border: 2px solid rgba(255, 215, 0, 0.65);
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 215, 0, 0.3);
    z-index: 9996;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(16px);
    animation: wano-ai-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wano-ai-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .wano-ai-panel {
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        height: 90vh;
        max-height: 90vh;
        border-radius: 22px 22px 0 0;
        border-bottom: none;
    }
}

.wano-ai-header {
    background: rgba(14, 23, 38, 0.95);
    border-bottom: 1px solid rgba(255, 215, 0, 0.25);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wano-ai-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wano-ai-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wano-ai-title-wrap span.icon {
    font-size: 22px;
}

.wano-ai-title-wrap h3 {
    font-size: 0.96rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.wano-ai-title-wrap h3 span {
    color: #ffd700;
}

.wano-ai-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.wano-ai-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Commutateur de mode (Assistance vs Père Noël IA) */
.wano-ai-mode-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
}

.wano-ai-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.wano-ai-mode-btn.active {
    background: linear-gradient(135deg, #e50914, #ff5500);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5);
}

.wano-ai-mode-btn.active.santa-mode {
    background: linear-gradient(135deg, #00873e, #00b050);
    box-shadow: 0 2px 10px rgba(0, 176, 80, 0.5);
}

/* Zone des messages de conversation */
.wano-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.wano-ai-msg {
    display: flex;
    gap: 8px;
    max-width: 88%;
    animation: wano-ai-msg-fade 0.25s ease-out;
}

@keyframes wano-ai-msg-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.wano-ai-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.wano-ai-msg.bot {
    align-self: flex-start;
}

.wano-ai-msg-avatar {
    font-size: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wano-ai-msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wano-ai-msg.user .wano-ai-msg-bubble {
    background: linear-gradient(135deg, #e50914, #ff334b);
    color: #fff;
    border-bottom-right-radius: 3px;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.35);
}

.wano-ai-msg.bot .wano-ai-msg-bubble {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: #f1f5f9;
    border-bottom-left-radius: 3px;
}

.wano-ai-msg.bot.santa .wano-ai-msg-bubble {
    background: rgba(0, 135, 62, 0.15);
    border: 1px solid rgba(0, 230, 118, 0.35);
}

.wano-ai-msg-bubble strong {
    color: #ffd700;
}

/* Suggestions rapides (chips / pilules de prompt) */
.wano-ai-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 14px 10px 14px;
    scrollbar-width: none;
}

.wano-ai-chips::-webkit-scrollbar {
    display: none;
}

.wano-ai-chip {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #f8fafc;
    font-size: 0.74rem;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.wano-ai-chip:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    transform: translateY(-1px);
}

/* Barre de saisie */
.wano-ai-input-bar {
    padding: 10px 14px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 8px;
    background: rgba(8, 12, 19, 0.95);
}

.wano-ai-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.86rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wano-ai-input:focus {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.wano-ai-send-btn {
    background: linear-gradient(135deg, #e50914, #ff5500);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 15px;
    flex-shrink: 0;
}

.wano-ai-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 3px 12px rgba(229, 9, 20, 0.5);
}

.wano-ai-typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 8px 14px;
}

.wano-ai-typing span {
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    animation: wano-ai-bounce 1.2s infinite ease-in-out;
}

.wano-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.wano-ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wano-ai-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

/* ============================================================================
   BANNIÈRE VEDETTE : LE FILM DE NOËL DU JOUR (ACTUALISÉ CHAQUE MATIN)
   ============================================================================ */
.daily-xmas-banner {
    margin: 16px 4% 28px 4%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(255, 215, 0, 0.65);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 215, 0, 0.35);
    background: #090e18;
    min-height: 240px;
    display: flex;
    align-items: center;
}

.daily-xmas-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    filter: brightness(0.38) saturate(1.25) contrast(1.1);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.15) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.15) 100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.daily-xmas-banner:hover .daily-xmas-backdrop {
    transform: scale(1.03);
}

.daily-xmas-content {
    position: relative;
    z-index: 2;
    padding: 26px 32px;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daily-xmas-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e50914, #ff5500);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5);
    border: 1px solid #ffd700;
}

.daily-xmas-title {
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    line-height: 1.2;
}

.daily-xmas-overview {
    font-size: 0.92rem;
    color: #e2e8f0;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.daily-xmas-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #ffd700;
    font-weight: 600;
}

.daily-xmas-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-daily-play {
    background: linear-gradient(135deg, #e50914, #ff5500);
    color: #fff;
    border: 1px solid #ffd700;
    padding: 11px 22px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.94rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(229, 9, 20, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-daily-play:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 24px rgba(229, 9, 20, 0.7), 0 0 16px rgba(255, 215, 0, 0.6);
}

.btn-daily-info {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 11px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
    transition: background 0.2s;
}

.btn-daily-info:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 640px) {
    .daily-xmas-banner {
        margin: 12px 14px 20px 14px;
        min-height: auto;
    }
    .daily-xmas-content {
        padding: 20px 16px;
    }
    .daily-xmas-title {
        font-size: 1.35rem;
    }
    .daily-xmas-actions {
        flex-direction: column;
        width: 100%;
    }
    .btn-daily-play, .btn-daily-info {
        width: 100%;
        justify-content: center;
    }
}