/* INDEX — index4g.com. Source commentée : src/, hors ligne. */
html[data-season="halloween"] {
  --season: #ff7a1a;
  --gold:   #ff7a1a;
  --line:      rgba(255, 140, 60, .14);
  --line-soft: rgba(255, 140, 60, .08);
  --surface:   rgba(255, 140, 60, .05);
}
html[data-season="halloween"] ::selection { background: var(--season); color: #120a04; }

html[data-season="halloween"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 29; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(24, 4, 34, .55) 100%);
}

html[data-season="halloween"] :is(.hero__bg, .game__bg, .figure > img, .op img) {
  filter: url(#hw-night) brightness(.82);
}

html[data-season="halloween"] .deck__art { filter: url(#hw-night) brightness(.5); }
html[data-season="halloween"] .deck__card:is(:hover, :focus-visible) .deck__art { filter: url(#hw-night) brightness(.95); }
html[data-season="halloween"] .op:hover img { filter: url(#hw-night) brightness(1.05); }

html[data-season="halloween"] mark { background-image: linear-gradient(var(--season), var(--season)); }
html[data-season="halloween"] .rv.in mark { color: #140a04; }

html[data-season="halloween"] .game__veil::after,
html[data-season="halloween"] .hero__veil-x::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(60, 14, 96, .38) 0%, transparent 45%, rgba(255, 90, 20, .12) 100%);
}

html[data-season="halloween"] .hero__body,
html[data-season="halloween"] .proof { z-index: 1; }
.hw-fog {
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 58%;
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 55% at 18% 85%, rgba(205, 195, 225, .13), transparent 70%),
    radial-gradient(32% 48% at 52% 95%, rgba(205, 195, 225, .10), transparent 70%),
    radial-gradient(42% 58% at 86% 80%, rgba(205, 195, 225, .12), transparent 70%);
  animation: hw-drift 42s ease-in-out infinite alternate;
}
#hero .hw-fog { z-index: 0; height: 46%; }
@keyframes hw-drift { from { transform: translateX(-7%); } to { transform: translateX(7%); } }

html[data-season="halloween"] .kicker i { background: var(--season); }
html[data-season="halloween"] .kicker span { color: var(--season); }
.hw-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid var(--line);
  font-family: var(--mono); font-size: clamp(9px, .78vw, 11px); letter-spacing: .28em; color: var(--text);
}
.hw-kicker svg { width: 14px; height: 12px; flex: none; }

@media (max-width: 499px) {
  .hw-kicker { grid-column: 2; justify-self: start; padding-left: 0; border-left: 0; }
}

html[data-season="halloween"] :is(.hero__word, .ftr__logo) { position: relative; }
html[data-season="halloween"] :is(.hero__word, .ftr__logo)::before,
html[data-season="halloween"] :is(.hero__word, .ftr__logo)::after {
  content: 'INDEX'; position: absolute; left: 0; top: 0;
  pointer-events: none; opacity: 0;
  animation: 7s steps(1, end) 1.6s infinite;
}
html[data-season="halloween"] :is(.hero__word, .ftr__logo)::before { color: var(--season); animation-name: hw-tear-a; }
html[data-season="halloween"] :is(.hero__word, .ftr__logo)::after  { color: var(--text);   animation-name: hw-tear-b; }
html[data-season="halloween"] .ftr__logo::before,
html[data-season="halloween"] .ftr__logo::after { animation-delay: 4.1s; }

@keyframes hw-tear-a {
  0%, 92%  { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  92.6%    { opacity: 1; transform: translateX(-7px); clip-path: inset(10% 0 66% 0); }
  93.6%    { opacity: 1; transform: translateX(6px);  clip-path: inset(52% 0 26% 0); }
  94.6%    { opacity: 1; transform: translateX(-4px); clip-path: inset(30% 0 52% 0); }
  95.6%    { opacity: 1; transform: translateX(9px);  clip-path: inset(72% 0 6% 0); }
  96.6%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
}
@keyframes hw-tear-b {
  0%, 93%  { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  93.1%    { opacity: 1; transform: translateX(5px);  clip-path: inset(40% 0 44% 0); }
  94.6%    { opacity: 1; transform: translateX(-6px); clip-path: inset(18% 0 70% 0); }
  95.8%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
}

html[data-season="halloween"] .hdr__logo { animation: hw-shift 7s steps(1, end) 1.6s infinite; }
@keyframes hw-shift {
  0%, 92%, 96.6%, 100% { text-shadow: none; }
  92.6% { text-shadow: -2px 0 var(--season); }
  94.6% { text-shadow: 2px 0 var(--season); }
}

html[data-season="halloween"] .hero__grain { overflow: hidden; }
html[data-season="halloween"] .hero__grain::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(255, 122, 26, .06) 45%, rgba(255, 255, 255, .05) 55%, transparent);
  animation: hw-roll 9s linear infinite;
}
@keyframes hw-roll { from { transform: translateY(-140px); } to { transform: translateY(100vh); } }

.hw-eyes {
  position: absolute; z-index: 1; pointer-events: none;

  width: max-content; left: auto;
  display: flex; gap: 14px; opacity: 0;
  animation: hw-watch 13s ease-in-out infinite;
}
.hw-eyes i {
  width: 9px; height: 4px; background: #ff4a1a;
  box-shadow: 0 0 10px 2px rgba(255, 74, 26, .55);
  animation: hw-blink 13s steps(1, end) infinite;
}
.hw-eyes--1 { right: 12%; top: 22%; }
.hw-eyes--2 { right: 30%; top: 64%; gap: 10px; animation-delay: -5s; }
.hw-eyes--2 i { width: 7px; height: 3px; animation-delay: -5s; }
.hw-eyes--3 { right: 6%;  top: 78%; gap: 18px; animation-delay: -9s; }
.hw-eyes--3 i { animation-delay: -9s; }
@keyframes hw-watch { 0%, 30% { opacity: 0; } 38%, 70% { opacity: .9; } 78%, 100% { opacity: 0; } }
@keyframes hw-blink { 0%, 51% { transform: none; } 51.5% { transform: scaleY(.1); } 52.5%, 100% { transform: none; } }

.hw-moon {
  position: absolute; z-index: -1; pointer-events: none;
  right: 4%; top: 2%; width: clamp(240px, 28vw, 460px); aspect-ratio: 1;
  background:
    radial-gradient(6% 6% at 57% 43%, rgba(150, 110, 70, .34) 0 60%, transparent 100%),
    radial-gradient(4% 4% at 43% 58%, rgba(150, 110, 70, .28) 0 60%, transparent 100%),
    radial-gradient(3% 3% at 60% 61%, rgba(150, 110, 70, .24) 0 60%, transparent 100%),
    radial-gradient(28% 28% at 50% 50%, #fff4dc 0%, #f2d39a 62%, #dba862 96%, transparent 100%),
    radial-gradient(50% 50% at 50% 50%, rgba(255, 200, 130, .30) 0%, rgba(255, 122, 26, .10) 62%, transparent 100%);
}

.hw-bat {
  position: absolute; top: var(--y, 20%); left: 0; z-index: 3; pointer-events: none;
  width: calc(clamp(32px, 2vw, 52px) * var(--s, 1)); aspect-ratio: 2; height: auto;
  color: #0c0810; filter: drop-shadow(0 0 3px rgba(255, 122, 26, .6));
  animation: hw-fly var(--d, 9s) linear both;
}
.hw-bat--rtl { left: auto; right: 0; animation-name: hw-fly-rtl; }
.hw-bat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-bat__a { animation: hw-flap .3s steps(1, end) infinite; }
.hw-bat__b { animation: hw-flap .3s steps(1, end) infinite reverse; }
@keyframes hw-flap { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hw-fly {
  0%   { transform: translate(-80px, 0); }
  25%  { transform: translate(25vw, -22px); }
  50%  { transform: translate(50vw, 12px); }
  75%  { transform: translate(75vw, -16px); }
  100% { transform: translate(calc(100vw + 80px), 6px); }
}
@keyframes hw-fly-rtl {
  0%   { transform: translate(80px, 0); }
  25%  { transform: translate(-25vw, 18px); }
  50%  { transform: translate(-50vw, -14px); }
  75%  { transform: translate(-75vw, 10px); }
  100% { transform: translate(calc(-100vw - 80px), -6px); }
}

.hw-dark { position: fixed; inset: 0; z-index: 38; pointer-events: none; background: #050307; opacity: 0; }
.hw-dark.is-cut { animation: hw-cut .52s linear; }
@keyframes hw-cut { 0% { opacity: 0; } 4%, 21% { opacity: .62; } 25%, 52% { opacity: 0; } 56%, 70% { opacity: .5; } 74%, 100% { opacity: 0; } }

html[data-season="halloween"] :is(#jeux, #progression .sec__head) { position: relative; }
.hw-pk {
  position: absolute; z-index: 4;
  width: 30px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, .5));
  animation: hw-wobble 5s ease-in-out infinite;
  transition: transform .2s var(--ease), opacity .6s var(--ease);
}
.hw-pk svg { display: block; width: 100%; height: 100%; }
.hw-pk:hover { transform: scale(1.15); }
.hw-pk:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.hw-pk.is-found { animation: hw-pop .6s var(--ease) forwards; pointer-events: none; }
@keyframes hw-wobble { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -9deg; } 94% { rotate: 7deg; } }
@keyframes hw-pop { to { transform: translateY(-18px) scale(1.7); opacity: 0; } }

.hw-pk--about    { right: 16px; bottom: 52px; }
.hw-pk--jeux     { right: calc(var(--gutter) + 6px); top: 26%; }
.hw-pk--pursuit  { right: 9%;  bottom: 13%; }
.hw-pk--backdoor { right: 20%; top: 40%; }
.hw-pk--prog     { right: 0; top: -30px; }

.hw-pk--footer   { position: relative; display: inline-block; vertical-align: middle;
                   width: 24px; height: 21px; margin-left: 14px; top: -4px; }

@media (max-width: 640px) {
  .hw-pk--backdoor { right: var(--gutter); top: 10px; }
  .hw-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] :is(.hero__word, .ftr__logo)::before,
  html[data-season="halloween"] :is(.hero__word, .ftr__logo)::after,
  html[data-season="halloween"] .hdr__logo,
  html[data-season="halloween"] .hero__grain::after,
  .hw-fog, .hw-eyes, .hw-eyes i, .hw-pk { animation: none; }
  .hw-eyes { opacity: .8; }
}

.hw-garland { position: absolute; left: 0; right: 0; top: 0; height: clamp(64px, 4.4vw, 112px); z-index: 2; pointer-events: none; }
.hw-garland svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-garland path { fill: none; stroke: rgba(150, 128, 160, .5); stroke-width: clamp(1px, .08vw, 2px); }
.hw-garland i {
  position: absolute; width: clamp(7px, .48vw, 12px); height: clamp(10px, .7vw, 17px); translate: -50% 0;
  background: var(--c); border-top: clamp(3px, .2vw, 5px) solid #1a1320;
  animation: hw-twinkle 3s ease-in-out infinite;
}
.hw-garland i::after {
  content: ""; position: absolute; left: 50%; top: 60%; width: 480%; aspect-ratio: 1; height: auto; translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
}
@keyframes hw-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 55% { opacity: .95; } }

.hw-web { position: absolute; top: 0; z-index: 2; width: clamp(80px, 9vw, 220px); aspect-ratio: 1; pointer-events: none; }
.hw-web svg { width: 100%; height: 100%; overflow: visible; }
.hw-web path { fill: none; stroke: rgba(235, 228, 245, .26); stroke-width: 1; }
.hw-web--l { left: 0; }
.hw-web--r { right: 0; scale: -1 1; }

.hw-web--tl { left: 0; top: 0; }
.hw-web--tr { right: 0; left: auto; top: 0; scale: -1 1; }
.hw-web--bl { left: 0; top: auto; bottom: 0; scale: 1 -1; }
.hw-web--br { right: 0; left: auto; top: auto; bottom: 0; scale: -1 -1; }
.hw-web--xs { width: clamp(40px, 3.2vw, 80px); }
.hw-web--sm { width: clamp(56px, 4.6vw, 110px); }
.hw-web--md { width: clamp(80px, 7vw, 170px); }
.hw-web--xs path, .hw-web--sm path { stroke: rgba(235, 228, 245, .22); }
html[data-season="halloween"] :is(#backdoor .slot, #jeux .deck, #hub .ops, #progression .ladder, #rejoindre .join__routes, .ftr) { position: relative; }

#console .hw-web { z-index: 1; }

.hw-moon--hero { z-index: 0; right: 9%; top: 2%; width: clamp(220px, 22vw, 560px); mix-blend-mode: screen; opacity: .85; }

html[data-season="halloween"] .proof { overflow: visible; }

.hw-graves { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: clamp(52px, 5.625vw, 150px); pointer-events: none; }
.hw-graves path { fill: #07050a; }
.hw-decoy {
  position: absolute; bottom: calc(100% + 2px); z-index: 2; translate: -50% 0;
  width: clamp(30px, 2.1vw, 54px); aspect-ratio: 14 / 12; height: auto; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(255, 150, 40, .65));
  animation: hw-candle 2.4s steps(6, end) infinite;
}
.hw-decoy svg { display: block; width: 100%; height: 100%; }
.hw-decoy:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.hw-decoy.is-shake { animation: hw-shake .45s var(--ease); }
@keyframes hw-candle { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 150, 40, .65)); }
                       35% { filter: drop-shadow(0 0 6px rgba(255, 150, 40, .45)); }
                       70% { filter: drop-shadow(0 0 13px rgba(255, 170, 60, .75)); } }
@keyframes hw-shake { 20% { rotate: -14deg; } 45% { rotate: 11deg; } 70% { rotate: -6deg; } 100% { rotate: 0deg; } }

html[data-season="halloween"] .hold.hw-burning .hold__fill {
  box-shadow: 2px 0 0 #ff7a1a, 8px 0 16px 2px rgba(255, 122, 26, .85);
  animation: hw-flame .18s steps(2, end) infinite;
}
@keyframes hw-flame { 50% { box-shadow: 2px 0 0 #ffb347, 11px 0 22px 4px rgba(255, 140, 30, .95); } }
html[data-season="halloween"] .hold { border-color: color-mix(in srgb, var(--text) 70%, var(--season)); }
html[data-season="halloween"] .hold.is-granted { background: var(--season); }
html[data-season="halloween"] .hold.is-granted .hold__label { animation: hw-shift .5s steps(1, end) 2; }

.hw-spider { position: absolute; top: 0; left: 76%; z-index: 2; width: clamp(26px, 1.6vw, 42px); pointer-events: none; }
.hw-spider__t { position: absolute; left: 50%; top: 0; width: 1px; height: 170px; background: rgba(235, 228, 245, .35);
                transform-origin: top; animation: hw-thread 26s var(--ease) infinite; }
.hw-spider__b { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 13 / 9; animation: hw-drop 26s var(--ease) infinite; }
.hw-spider__b svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #0c0810;
                    filter: drop-shadow(0 0 3px rgba(255, 122, 26, .5)); }
.hw-spider__a { animation: hw-flap .5s steps(1, end) infinite; }
.hw-spider__c { animation: hw-flap .5s steps(1, end) infinite reverse; }
@keyframes hw-thread { 0%, 58% { transform: scaleY(0); } 68%, 80% { transform: scaleY(1); } 74% { transform: scaleY(.93); } 90%, 100% { transform: scaleY(0); } }
@keyframes hw-drop   { 0%, 58% { transform: translateY(-24px); } 68%, 80% { transform: translateY(166px); } 74% { transform: translateY(154px); } 90%, 100% { transform: translateY(-24px); } }

html[data-season="halloween"] .hero__word { width: fit-content; }
.hw-ghost {
  position: absolute; left: 100%; bottom: 14%; z-index: -1;
  width: .2em; height: .22em; margin-left: -.24em; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 .04em rgba(200, 180, 255, .6));
  animation: hw-peek 34s var(--ease) 8s infinite;
}
.hw-ghost svg { display: block; width: 100%; height: 100%; }
@keyframes hw-peek {
  0%, 82%  { opacity: 0; transform: translate(0, 0); }
  85%      { opacity: .92; transform: translate(.3em, -.02em); }
  88%      { opacity: .92; transform: translate(.3em, -.06em) scaleX(-1); }
  91%      { opacity: .92; transform: translate(.32em, -.02em); }
  95%, 100% { opacity: 0; transform: translate(0, 0); }
}

.hw-ember {
  position: absolute; bottom: 74px; z-index: 0; width: clamp(3px, .18vw, 5px); aspect-ratio: 1; height: auto; pointer-events: none;
  background: #ffb347; box-shadow: 0 0 6px 1px rgba(255, 122, 26, .8);
  opacity: 0; animation: hw-rise 12s linear infinite;
}
@keyframes hw-rise {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: .9; }
  50%  { transform: translate(var(--x, 20px), -32vh); }
  85%  { opacity: .5; }
  100% { opacity: 0; transform: translate(calc(var(--x, 20px) * -.5), -64vh) scale(.4); }
}

@media (max-width: 640px) {

  .game .hw-web { top: auto; bottom: 0; left: auto; right: 0; scale: -1 -1; width: 60px; }
  .hw-moon--hero { display: none; }
  .hw-graves { height: 52px; }
  .hw-decoy { width: 26px; }
  .hw-spider { left: 84%; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-garland i, .hw-decoy, html[data-season="halloween"] .hold__fill,
  html[data-season="halloween"] .hold.is-granted .hold__label { animation: none; }
}