/* =========================================================
   QR Informatique - Décor saisonnier Halloween
   Illustrations PNG détourées (transparentes).
   Léger, non intrusif (aucun clic intercepté).
   Activé automatiquement en octobre (voir header.php).
   ========================================================= */

.hw-decor,
.hw-decor-top,
.hw-decor *,
.hw-decor-top * {
    pointer-events: none;
}

/* Calque principal (sous le header) */
.hw-decor {
    position: fixed;
    inset: 0;
    z-index: 70;
    overflow: hidden;
}

/* Calque supérieur (au-dessus du header) : toiles d'angle + araignée */
.hw-decor-top {
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow: hidden;
}

/* ---------- Toiles d'araignée d'angle (image) ---------- */
.hw-web {
    position: absolute;
    top: 0;
    width: clamp(120px, 15vw, 200px);
    height: auto;
    opacity: 0.72;
}

.hw-web--left { left: 0; }
.hw-web--right { right: 0; transform: scaleX(-1); }

/* ---------- Chauves-souris (image) ---------- */
.hw-bat {
    position: absolute;
    top: var(--top, 12%);
    left: -16vw;
    width: var(--size, 70px);
    opacity: 0.9;
    will-change: transform;
    animation: hw-fly var(--dur, 22s) linear var(--delay, 0s) infinite;
}

.hw-bat img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: center top;
    animation: hw-flap 0.5s ease-in-out infinite;
}

/* ---------- Fantôme (image, côté droit) ---------- */
.hw-ghost {
    position: fixed;
    right: 2.5%;
    top: 44%;
    width: clamp(44px, 5vw, 64px);
    height: auto;
    z-index: 71;
    filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.18));
    animation: hw-ghost-sway 6.5s ease-in-out infinite;
}

/* ---------- Scène de cimetière (image, bas gauche) ---------- */
.hw-scene {
    position: fixed;
    left: 6px;
    bottom: 0;
    width: clamp(230px, 26vw, 360px);
    z-index: 71;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.22));
}

.hw-scene img {
    display: block;
    width: 100%;
    height: auto;
}

/* Lueur vacillante de la citrouille (superposée sur le jack-o'-lantern) */
.hw-scene::after {
    content: '';
    position: absolute;
    left: 56%;
    top: 74%;
    width: 24%;
    height: 20%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 224, 71, 0.6), rgba(251, 146, 60, 0.28) 55%, transparent 72%);
    filter: blur(6px);
    mix-blend-mode: screen;
    animation: hw-glow 2.6s ease-in-out infinite;
}

/* ---------- Animations ---------- */
@keyframes hw-fly {
    0%   { transform: translateX(0) translateY(0) rotate(-3deg); }
    25%  { transform: translateX(34vw) translateY(-26px) rotate(4deg); }
    50%  { transform: translateX(68vw) translateY(12px) rotate(-3deg); }
    75%  { transform: translateX(100vw) translateY(-18px) rotate(4deg); }
    100% { transform: translateX(132vw) translateY(0) rotate(-3deg); }
}

@keyframes hw-flap {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(0.68) scaleY(1.03); }
}

@keyframes hw-ghost-sway {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    50%      { transform: translate(-12px, -16px) rotate(5deg); }
}

@keyframes hw-glow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.14); }
}

/* ---------- Accessibilité : pas d'animation ---------- */
@media (prefers-reduced-motion: reduce) {
    .hw-bat { display: none; }
    .hw-ghost { animation: none; }
    .hw-scene::after { animation: none; opacity: 0.7; }
}

/* ---------- Adaptations écrans réduits ----------
   Tablette & mobile : pas de marge latérale libre -> on retire la scène
   de cimetière et le fantôme pour éviter tout chevauchement avec le texte. */
@media (max-width: 1024px) {
    .hw-ghost,
    .hw-scene { display: none; }
}

@media (max-width: 600px) {
    .hw-bat:nth-of-type(3) { display: none; }
    .hw-web { width: 110px; }
}