/* Décor d'Halloween : feuille chargée seulement pendant la période (SiteOptions.EstHalloween).
   Mêmes couleurs que le site ; rien ici ne gêne la lecture ni les clics.
   Les mouvements sont pilotés par GSAP (js/halloween.js) : cette feuille ne pose que le décor, immobile. */

:root { --hw-brume: rgba(120, 138, 150, .22); --hw-fil: rgba(15, 34, 48, .3); --hw-silhouette: #0f2230; --hw-lune: #f0d9a4; }
:root[data-theme="dark"] { --hw-brume: rgba(190, 212, 224, .1); --hw-fil: rgba(241, 236, 226, .3); --hw-silhouette: #f1ece2; --hw-lune: #e6bb5f; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { --hw-brume: rgba(190, 212, 224, .1); --hw-fil: rgba(241, 236, 226, .3); --hw-silhouette: #f1ece2; --hw-lune: #e6bb5f; }
}

.hw-decor { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
@media print { .hw-decor, .hw-citrouille, .hw-lune, .hw-clin { display: none !important; } }

/* ---- Toiles d'araignées ---- */
/* Le conteneur peut être secoué par GSAP ; le dessin, lui, garde sa symétrie sans qu'on y touche. */
.hw-toile { position: absolute; top: 68px; width: clamp(90px, 12vw, 180px); aspect-ratio: 1; }
.hw-toile span { display: block; width: 100%; height: 100%; background: var(--hw-fil);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M0 0L300 0M0 0L288 83M0 0L252 163M0 0L193 230M0 0L112 278M0 0L0 300M70 0Q55 8 67 19M67 19Q51 23 59 38M59 38Q42 37 45 54M45 54Q29 48 26 65M26 65Q11 55 0 70M125 0Q99 14 120 34M120 34Q91 41 105 68M105 68Q75 66 80 96M80 96Q52 86 47 116M47 116Q19 98 0 125M180 0Q143 20 173 50M173 50Q131 60 151 98M151 98Q108 95 116 138M116 138Q74 123 67 167M67 167Q27 141 0 180M235 0Q186 26 226 65M226 65Q171 78 197 128M197 128Q141 125 151 180M151 180Q97 161 88 218M88 218Q36 185 0 235M290 0Q230 32 279 80M279 80Q211 96 243 158M243 158Q174 154 186 222M186 222Q119 199 109 269M109 269Q44 228 0 290' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M0 0L300 0M0 0L288 83M0 0L252 163M0 0L193 230M0 0L112 278M0 0L0 300M70 0Q55 8 67 19M67 19Q51 23 59 38M59 38Q42 37 45 54M45 54Q29 48 26 65M26 65Q11 55 0 70M125 0Q99 14 120 34M120 34Q91 41 105 68M105 68Q75 66 80 96M80 96Q52 86 47 116M47 116Q19 98 0 125M180 0Q143 20 173 50M173 50Q131 60 151 98M151 98Q108 95 116 138M116 138Q74 123 67 167M67 167Q27 141 0 180M235 0Q186 26 226 65M226 65Q171 78 197 128M197 128Q141 125 151 180M151 180Q97 161 88 218M88 218Q36 185 0 235M290 0Q230 32 279 80M279 80Q211 96 243 158M243 158Q174 154 186 222M186 222Q119 199 109 269M109 269Q44 228 0 290' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hw-toile-g { left: 0; }
.hw-toile-d { right: 0; }
.hw-toile-d span { transform: scaleX(-1); }

.carte { position: relative; }
.carte::after {
    content: ""; position: absolute; top: 0; right: 0; width: 62px; height: 62px; background: var(--hw-fil); opacity: 0;
    transform: scaleX(-1); transition: opacity .25s; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M0 0L300 0M0 0L288 83M0 0L252 163M0 0L193 230M0 0L112 278M0 0L0 300M70 0Q55 8 67 19M67 19Q51 23 59 38M59 38Q42 37 45 54M45 54Q29 48 26 65M26 65Q11 55 0 70M125 0Q99 14 120 34M120 34Q91 41 105 68M105 68Q75 66 80 96M80 96Q52 86 47 116M47 116Q19 98 0 125M180 0Q143 20 173 50M173 50Q131 60 151 98M151 98Q108 95 116 138M116 138Q74 123 67 167M67 167Q27 141 0 180M235 0Q186 26 226 65M226 65Q171 78 197 128M197 128Q141 125 151 180M151 180Q97 161 88 218M88 218Q36 185 0 235M290 0Q230 32 279 80M279 80Q211 96 243 158M243 158Q174 154 186 222M186 222Q119 199 109 269M109 269Q44 228 0 290' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M0 0L300 0M0 0L288 83M0 0L252 163M0 0L193 230M0 0L112 278M0 0L0 300M70 0Q55 8 67 19M67 19Q51 23 59 38M59 38Q42 37 45 54M45 54Q29 48 26 65M26 65Q11 55 0 70M125 0Q99 14 120 34M120 34Q91 41 105 68M105 68Q75 66 80 96M80 96Q52 86 47 116M47 116Q19 98 0 125M180 0Q143 20 173 50M173 50Q131 60 151 98M151 98Q108 95 116 138M116 138Q74 123 67 167M67 167Q27 141 0 180M235 0Q186 26 226 65M226 65Q171 78 197 128M197 128Q141 125 151 180M151 180Q97 161 88 218M88 218Q36 185 0 235M290 0Q230 32 279 80M279 80Q211 96 243 158M243 158Q174 154 186 222M186 222Q119 199 109 269M109 269Q44 228 0 290' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.carte:hover::after { opacity: 1; }

/* ---- Araignée ---- */
.hw-araignee { position: absolute; top: 68px; right: clamp(70px, 13vw, 190px); display: flex; flex-direction: column; align-items: center; color: var(--hw-silhouette); }
.hw-fil { display: block; width: 1px; height: clamp(90px, 20vh, 190px); background: var(--hw-silhouette); opacity: .55; }
.hw-araignee button { pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; width: 38px; color: inherit; margin-top: -2px; }
.hw-araignee button svg { display: block; width: 100%; overflow: visible; }

/* ---- Fantôme : invisible tant que GSAP ne le fait pas surgir (rien sans animation) ---- */
.hw-fantome { position: absolute; left: clamp(16px, 6vw, 90px); bottom: 0; width: clamp(62px, 7vw, 92px); visibility: hidden; filter: drop-shadow(0 2px 6px rgba(15, 34, 48, .18)); }
.hw-fantome svg { display: block; width: 100%; overflow: visible; }

/* ---- Chauves-souris ---- */
.hw-chauve-souris { position: absolute; left: 0; top: 0; width: clamp(48px, 5.5vw, 74px); color: var(--hw-silhouette); will-change: transform; }
.hw-chauve-souris svg { display: block; width: 100%; overflow: visible; }

/* ---- Accueil : pleine lune derrière les tours ---- */
.hw-lune {
    position: absolute; right: clamp(40px, 11vw, 190px); top: 34px; width: clamp(110px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%;
    background: var(--hw-lune); opacity: .55; pointer-events: none;
    box-shadow: inset -14px -10px 0 rgba(15, 34, 48, .05), 0 0 60px color-mix(in srgb, var(--hw-lune) 55%, transparent);
}
.hero::before { z-index: 1; opacity: .16; }
.hw-lune-cible:focus { outline: none; }
.hw-clin { font-family: var(--titre); font-style: italic; font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--rouille); margin: 0 0 .7rem; }
.hw-mot { display: inline-block; white-space: nowrap; }
.hw-mot span { display: inline-block; }

/* ---- Zone cliquable de la lune : transparente et au-dessus du texte, pour ne jamais le teinter ---- */
.hw-lune-cible { position: absolute; z-index: 2; right: clamp(40px, 11vw, 190px); top: 34px; width: clamp(110px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; cursor: pointer; }
.hw-astuce { font-family: var(--titre); font-style: italic; font-size: .95rem; color: var(--discret); margin: -1.4rem 0 1.6rem; }

/* ---- Brume, particules, éclair ---- */
.hw-brume { position: absolute; left: -10%; right: -10%; bottom: -30px; height: 130px; pointer-events: none; opacity: .75;
    background: radial-gradient(ellipse 34% 60% at 28% 70%, var(--hw-brume), transparent 72%), radial-gradient(ellipse 30% 50% at 72% 80%, var(--hw-brume), transparent 72%); }
.hw-brume-2 { bottom: -46px; opacity: .55; background: radial-gradient(ellipse 28% 55% at 52% 75%, var(--hw-brume), transparent 72%), radial-gradient(ellipse 22% 45% at 12% 85%, var(--hw-brume), transparent 72%); }
.hw-particule { position: absolute; left: 0; top: 0; width: 34px; color: var(--hw-silhouette); }
.hw-particule svg { display: block; width: 100%; overflow: visible; }
.hw-etincelle { width: 9px; height: 9px; border-radius: 50%; background: #e3a83b; box-shadow: 0 0 10px 2px rgba(227, 168, 59, .7); }
.hw-eclair { position: fixed; inset: 0; z-index: 45; background: #e8eef5; opacity: 0; pointer-events: none; }

/* ---- Mots magiques ---- */
.hw-bouh { position: fixed; left: 50%; top: 50%; z-index: 60; width: min(46vw, 300px); pointer-events: none; text-align: center; }
.hw-bouh svg { display: block; width: 100%; }
.hw-bouh strong { display: block; margin-top: .3rem; font-family: var(--titre); font-style: italic; font-size: clamp(2rem, 7vw, 4rem); color: var(--rouille); line-height: 1; }
.hw-pluie { position: absolute; left: 0; top: 0; width: 52px; }
.hw-pluie svg { display: block; width: 100%; }
.hw-araignee.hw-renfort { top: 0; }
.hw-renfort button { pointer-events: none; cursor: default; }

/* ---- Yeux dans le noir ---- */
.hw-regard { position: absolute; display: flex; gap: 9px; opacity: 0; pointer-events: none; }
.hw-regard i { display: block; width: 8px; height: 12px; border-radius: 50%; background: #e3a83b; box-shadow: 0 0 8px rgba(227, 168, 59, .7); }

/* ---- Citrouille sur le pied de page ---- */
.pied { position: relative; }
.hw-citrouille { position: absolute; right: clamp(16px, 8vw, 120px); top: -58px; width: 76px; cursor: pointer; }
.hw-citrouille svg { display: block; width: 100%; }

@media (max-width: 560px) {
    .hw-araignee { right: 34px; }
    .hw-araignee button { width: 30px; }
    .hw-citrouille { width: 58px; top: -44px; }
}