@charset "UTF-8";
/* ============================================================================
   halloween.css — HABILLAGE « NUIT DES MORTS » (saisonnier)
   ----------------------------------------------------------------------------
   Chargé par header.php uniquement du 1er octobre au 2 novembre (ou avec
   ?halloween=1 pour prévisualiser). Ne modifie aucun fichier existant : il
   surcharge les jetons de couleur de style.css et habille les calques créés
   par halloween.js. Supprimer les deux fichiers suffit à tout retirer.
   ========================================================================== */

:root {
    --blood:  #A3121C;   /* sang frais au lieu de séché */
    --rust:   #FF7A1A;   /* orange citrouille pour les valeurs */
    --warn:   #FF8C1A;
    --khaki:  #5B2A7A;   /* violet nuit */
    --paper:  #E6DED0;
    --blood-dim: rgba(163, 18, 28, 0.22);
    --rust-dim:  rgba(255, 122, 26, 0.16);
    --khaki-dim: rgba(91, 42, 122, 0.22);
    --pumpkin:   #FF7A1A;
    --pumpkin-glow: rgba(255, 122, 26, 0.45);
    --font-horror: 'Creepster', 'Big Shoulders Display', Impact, sans-serif;
}

body { background-color: #07050A; }

/* --------------------------------------------------------- Titres hantés */
#hero .hero-content h1 {
    /* !important : style.css impose déjà sa police de titre avec !important */
    font-family: var(--font-horror) !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em;
    color: #F2E6D8;
    text-shadow:
        0 0 18px rgba(163, 18, 28, 0.55),
        0 0 42px rgba(255, 122, 26, 0.25),
        3px 3px 0 #2A0306;
    animation: hw-flicker 7s infinite;
}
.section-head h2 { text-shadow: 0 0 14px rgba(163, 18, 28, 0.35); }

@keyframes hw-flicker {
    0%, 91%, 100% { opacity: 1; }
    92% { opacity: 0.35; }
    93% { opacity: 1; }
    95% { opacity: 0.55; }
    96% { opacity: 1; }
}

/* ----------------------------------------------- Logo avec sa citrouille */
.logo .hw-pumpkin {
    display: inline-block;
    font-size: 1.15em;
    filter: drop-shadow(0 0 8px var(--pumpkin-glow));
    animation: hw-bob 3.2s ease-in-out infinite;
}
@keyframes hw-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }

/* --------------------------------------- Lueurs orange sur l'interactif */
.btn-primary, .cta-main, .btn-submit {
    box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.35), 0 0 22px rgba(163, 18, 28, 0.45) !important;
}
.server-card:hover, .channel:hover, .shop-card:hover, .mini-card:hover {
    box-shadow: 0 0 0 1px var(--pumpkin), 0 0 26px var(--pumpkin-glow) !important;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--pumpkin); }

/* ------------------------------------------------- Sang sous la barre */
.hw-drips {
    position: fixed;
    left: 0; right: 0;
    top: 84px;
    height: 46px;
    z-index: 998;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: 240px 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='46' viewBox='0 0 240 46'%3E%3Cpath fill='%23A3121C' d='M0 0h240v6c-8 0-10 4-12 10-2 7-6 9-9 2-2-5-3-9-9-9-7 0-7 22-12 22s-5-16-11-16-6 8-10 8-4-12-11-12-8 30-14 30-6-24-12-24-7 6-11 6-5-10-10-10-7 14-11 14-5-6-9-6-6 18-12 18-6-14-11-14-6 4-10 4-5-8-10-8-7 26-13 26-6-20-12-20-7 6-11 6-5-10-12-10Z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6));
    opacity: 0.92;
}

/* -------------------------------------------------- Bannière d'événement */
.hw-banner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    margin-top: 34px;
    background:
        linear-gradient(90deg, rgba(91, 42, 122, 0.55), rgba(163, 18, 28, 0.55), rgba(91, 42, 122, 0.55)),
        #0D0810;
    border-block: 1px solid rgba(255, 122, 26, 0.45);
    font-family: var(--font-hud);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper);
    text-align: center;
}
.hw-banner b { font-family: var(--font-horror); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.06em; color: var(--pumpkin); text-transform: none; }
.hw-banner a { color: var(--pumpkin); text-decoration: underline; text-underline-offset: 3px; }
.hw-banner a:hover, .hw-banner a:focus-visible { color: #FFFFFF; }

/* ------------------------------------------------------ Toiles d'araignée */
.hw-web {
    position: fixed;
    width: 190px; height: 190px;
    z-index: 997;
    pointer-events: none;
    opacity: 0.38;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23E6DED0' stroke-width='1.3'%3E%3Cpath d='M0 0L200 200M0 0L200 90M0 0L90 200M0 0L200 20M0 0L20 200'/%3E%3Cpath d='M0 40Q22 24 40 0M0 80Q48 58 80 0M0 125Q72 95 125 0M0 170Q98 132 170 0'/%3E%3Cpath d='M34 34Q60 20 74 8M20 74Q8 60 34 34'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
.hw-web--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.hw-web--br { right: 0; bottom: 0; transform: scale(-1, -1); }

.hw-spider {
    position: fixed;
    right: 72px;
    top: 0;
    z-index: 997;
    pointer-events: none;
    width: 2px;
    height: 150px;
    background: linear-gradient(rgba(230, 222, 208, 0), rgba(230, 222, 208, 0.55));
    transform-origin: top center;
    animation: hw-dangle 9s ease-in-out infinite;
}
.hw-spider::after {
    content: '🕷️';
    position: absolute;
    bottom: -18px; left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9));
}
@keyframes hw-dangle {
    0%, 100% { height: 150px; transform: rotate(2deg); }
    45% { height: 320px; transform: rotate(-3deg); }
    60% { height: 300px; transform: rotate(2deg); }
}

/* ----------------------------------------------------------------- Brume */
.hw-fog {
    position: fixed;
    left: -20%; right: -20%; bottom: -40px;
    height: 34vh;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 40% 60% at 20% 100%, rgba(150, 140, 170, 0.20), transparent 70%),
        radial-gradient(ellipse 35% 55% at 65% 100%, rgba(150, 140, 170, 0.16), transparent 70%),
        radial-gradient(ellipse 30% 50% at 95% 100%, rgba(150, 140, 170, 0.18), transparent 70%);
    animation: hw-drift 38s ease-in-out infinite alternate;
}
@keyframes hw-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* ------------------------------------------------------ Chauves-souris */
.hw-bat {
    position: fixed;
    z-index: 996;
    pointer-events: none;
    width: 46px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%23090509' d='M32 9c2-4 4-5 4-5l1 4c3-2 6-2 6-2-3 3-3 6-3 6 6-5 15-6 24-2-6 1-10 5-11 9-4-3-8-3-11 1-2-2-5-2-6 0 0-2-1-3-4-3s-4 1-4 3c-1-2-4-2-6 0-3-4-7-4-11-1-1-4-5-8-11-9 9-4 18-3 24 2 0 0 0-3-3-6 0 0 3 0 6 2l1-4s2 1 4 5z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 4px rgba(255, 122, 26, 0.35));
    animation: hw-flap 0.22s steps(2) infinite;
}
@keyframes hw-flap { 50% { transform: scaleY(0.55); } }

/* ----------------------------------------------------------------- Éclair */
.hw-flash {
    position: fixed;
    inset: 0;
    z-index: 1001;
    pointer-events: none;
    background: rgba(220, 225, 255, 0.0);
}
.hw-flash.is-on { animation: hw-lightning 0.9s ease-out 1; }
@keyframes hw-lightning {
    0% { background: rgba(220, 225, 255, 0); }
    6% { background: rgba(220, 225, 255, 0.22); }
    12% { background: rgba(220, 225, 255, 0.02); }
    20% { background: rgba(220, 225, 255, 0.16); }
    100% { background: rgba(220, 225, 255, 0); }
}

/* ------------------------------------------------------- Petits écrans */
@media (max-width: 760px) {
    .hw-web { width: 120px; height: 120px; }
    .hw-spider { right: 26px; }
    .hw-banner { margin-top: 26px; font-size: 0.72rem; }
    .hw-banner b { font-size: 1.15rem; }
}

/* ----------------------------------------------- Mouvement réduit demandé */
@media (prefers-reduced-motion: reduce) {
    #hero .hero-content h1, .logo .hw-pumpkin, .hw-spider, .hw-fog, .hw-bat { animation: none !important; }
    .hw-bat, .hw-flash { display: none !important; }
}