.hb-halloween,
.hb-fil,
.hb-sang,
.hb-citrouille-hero {
  pointer-events: none;
}


@media not all and (hover: hover) and (min-width: 1024px) {
  .hb-halloween:not(.hb-mobile) { display: none; }
}

.hb-halloween {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  contain: strict;
}


.hb-halloween div > svg {
  display: block;
  width: 100%;
  height: 100%;
}


.hb-toile {
  position: absolute;
  top: 0;
  width: 270px;
  height: 270px;
  opacity: 0.75;
}

.hb-toile-gauche { left: 0; }
.hb-toile-droite { right: 0; transform: scaleX(-1); }

.hb-toile path {
  fill: none;
  stroke: #ddd8e8;
  stroke-width: 0.7;
}


.hb-araignee-toile {
  position: absolute;
  top: 40%;
  left: 37%;
  width: 46px;
  height: 46px;
  transform: rotate(-45deg);
}

.hb-complet .hb-araignee-toile {
  animation: hb-guet 9s ease-in-out infinite;
}

.hb-toile-droite .hb-araignee-toile { animation-delay: -4.5s; }

@keyframes hb-guet {
  0%, 55%   { transform: rotate(-45deg) translateY(0); }
  58%       { transform: rotate(-45deg) translateY(30px); }
  60%       { transform: rotate(-41deg) translateY(30px); }
  62%       { transform: rotate(-49deg) translateY(30px); }
  64%, 80%  { transform: rotate(-45deg) translateY(30px); }
  92%, 100% { transform: rotate(-45deg) translateY(0); }
}

.hb-halloween:not(.hb-complet) .hb-toile {
  width: 160px;
  height: 160px;
  opacity: 0.5;
}

.hb-halloween:not(.hb-complet) .hb-araignee-toile {
  width: 30px;
  height: 30px;
}


.hb-scene {
  position: absolute;
  bottom: 0;
  width: 230px;
  height: 168px;
  display: none;
}

@media (min-width: 1280px) and (min-height: 700px) {
  .hb-scene { display: block; }
}

.hb-scene-gauche { left: 0; }
.hb-scene-droite { right: 0; }

.hb-halloween:not(.hb-complet) .hb-scene {
  width: 184px;
  height: 134px;
  opacity: 0.8;
}

.hb-sol { fill: #231a2e; }
.hb-arbre { fill: #2f2442; }
.hb-tombe { fill: #3d3152; stroke: #5d4c78; stroke-width: 1; }
.hb-rip { fill: #8a79a8; font: 700 8px Georgia, serif; }

.hb-tige { fill: #5d7f2c; }
.hb-cotes { fill: #d0661a; }
.hb-citrouille { fill: #f08a26; stroke: #c25a12; stroke-width: 0.8; }
.hb-visage { fill: #ffd25e; }


.hb-complet .hb-visage,
.hb-citrouille-hero .hb-visage {
  animation: hb-flamme 2.6s ease-in-out infinite;
}

.hb-scene-droite svg svg:nth-of-type(2) .hb-visage { animation-delay: -0.9s; }
.hb-scene-droite svg svg:nth-of-type(3) .hb-visage { animation-delay: -1.7s; }

@keyframes hb-flamme {
  0%, 100% { opacity: 1; }
  30%      { opacity: 0.55; }
  45%      { opacity: 0.9; }
  70%      { opacity: 0.65; }
}


.hb-vol {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-90px, 0);
  animation: hb-traverse 17s linear infinite;
}

.hb-vol-1 { top: 70px;  animation-duration: 17s; animation-delay: 1s; }
.hb-vol-2 { top: 160px; animation-duration: 21s; animation-delay: 6s; animation-direction: reverse; }
.hb-vol-3 { top: 40px;  animation-duration: 26s; animation-delay: 11s; }
.hb-vol-4 { top: 230px; animation-duration: 31s; animation-delay: 16s; animation-direction: reverse; }

.hb-chauve-souris {
  width: 64px;
  height: 32px;
}

.hb-vol-2 .hb-chauve-souris,
.hb-vol-4 .hb-chauve-souris {
  width: 48px;
  height: 24px;
}

.hb-chauve-souris svg { overflow: visible; }

.hb-aile {
  fill: #7b58a6;
  transform-box: fill-box;
  transform-origin: 100% 45%;
  animation: hb-battement 0.2s ease-in-out infinite alternate;
}

.hb-chauve-souris .hb-corps { fill: #5e4282; }
.hb-oeil { fill: #ffb347; }

@keyframes hb-traverse {
  0%   { transform: translate(-90px, 0); }
  8%   { transform: translate(25vw, 26px); }
  16%  { transform: translate(50vw, -8px); }
  24%  { transform: translate(75vw, 30px); }
  32%  { transform: translate(calc(100vw + 90px), 4px); }
  100% { transform: translate(calc(100vw + 90px), 4px); }
}

@keyframes hb-battement {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.35); }
}


.hb-nuee {
  position: absolute;
  left: 0;
  top: 0;
  width: 220px;
  height: 140px;
  transform: translate(-240px, 60vh);
  animation: hb-nuee 40s linear infinite;
  animation-delay: 8s;
}

.hb-nuee .hb-chauve-souris {
  position: absolute;
  width: 40px;
  height: 20px;
}

.hb-nuee .hb-chauve-souris:nth-child(1) { left: 0;     top: 50px; }
.hb-nuee .hb-chauve-souris:nth-child(2) { left: 40px;  top: 10px; width: 48px; height: 24px; }
.hb-nuee .hb-chauve-souris:nth-child(3) { left: 70px;  top: 80px; }
.hb-nuee .hb-chauve-souris:nth-child(4) { left: 110px; top: 35px; width: 52px; height: 26px; }
.hb-nuee .hb-chauve-souris:nth-child(5) { left: 140px; top: 100px; width: 34px; height: 17px; }
.hb-nuee .hb-chauve-souris:nth-child(6) { left: 170px; top: 0; width: 36px; height: 18px; }
.hb-nuee .hb-chauve-souris:nth-child(7) { left: 185px; top: 60px; }

.hb-nuee .hb-chauve-souris:nth-child(2n) .hb-aile { animation-delay: -0.07s; }
.hb-nuee .hb-chauve-souris:nth-child(3n) .hb-aile { animation-delay: -0.13s; animation-duration: 0.17s; }

@keyframes hb-nuee {
  0%   { transform: translate(-240px, 60vh); }
  6%   { transform: translate(30vw, 38vh); }
  12%  { transform: translate(60vw, 26vh); }
  20%  { transform: translate(calc(100vw + 40px), 4vh); }
  100% { transform: translate(calc(100vw + 40px), 4vh); }
}


.hb-fantome {
  position: absolute;
  top: 100%;
  width: 54px;
  height: 70px;
  opacity: 0;
  animation: hb-fantome 34s ease-in-out infinite;
}

.hb-fantome-gauche { left: 3.5vw; animation-delay: 4s; }
.hb-fantome-droite { right: 4vw; animation-duration: 41s; animation-delay: 21s; }

.hb-drap { fill: #eeeaf6; }
.hb-yeux { fill: #241b30; }

@keyframes hb-fantome {
  0%   { transform: translate(0, 0); opacity: 0; }
  4%   { opacity: 0.8; }
  10%  { transform: translate(22px, -35vh); }
  18%  { transform: translate(-18px, -70vh); opacity: 0.8; }
  24%  { transform: translate(10px, calc(-100vh - 90px)); opacity: 0; }
  100% { transform: translate(10px, calc(-100vh - 90px)); opacity: 0; }
}


.hb-fil {
  position: absolute;
  top: 0;
  right: 9%;
  width: 36px;
  height: 136px;
  overflow: hidden;
  z-index: 1;
}

.hb-descente {
  position: absolute;
  inset: 0;
  transform: translateY(-72px);
  animation: hb-descente 11s ease-in-out infinite;
}

.hb-trait {
  position: absolute;
  top: 0;
  left: 17px;
  width: 1px;
  height: 104px;
  background: rgba(216, 212, 226, 0.55);
}

.hb-araignee {
  position: absolute;
  top: 98px;
  left: 0;
  width: 35px;
  height: 35px;
}

.hb-fil svg,
.hb-citrouille-hero svg { display: block; width: 100%; height: 100%; }

.hb-pattes-contour { fill: none; stroke: #6f5d8c; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.hb-pattes { fill: none; stroke: #140d1c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-araignee .hb-corps,
.hb-araignee-toile .hb-corps { fill: #140d1c; stroke: #6f5d8c; stroke-width: 0.9; }
.hb-sablier { fill: #d4141f; }
.hb-crochets { stroke: #b9a8d6; stroke-width: 1; stroke-linecap: round; }
.hb-lueur { fill: #ff2020; opacity: 0.22; }
.hb-araignee .hb-oeil,
.hb-araignee-toile .hb-oeil { fill: #ff2a2a; }

@keyframes hb-descente {
  0%, 12%   { transform: translateY(-72px); }
  40%, 62%  { transform: translateY(0); }
  90%, 100% { transform: translateY(-72px); }
}


.hb-citrouille-hero {
  position: absolute;
  right: 16px;
  bottom: 10px;
  width: 52px;
  height: 48px;
  z-index: 1;
}


.hb-zombie {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: 40px;
  height: 64px;
  transform: translateX(64px);
  animation: hb-ronde 30s linear infinite;
}

.hb-zombie-pas {
  width: 100%;
  height: 100%;
  animation: hb-clopin 0.9s ease-in-out infinite alternate;
}

.hb-zombie svg { display: block; width: 100%; height: 100%; overflow: visible; }

.hb-z-peau { fill: #7fa36a; }
.hb-z-habit { fill: #4d4063; }
.hb-z-jambe { fill: #3a3150; transform-box: fill-box; transform-origin: 50% 0; animation: hb-jambe 0.9s ease-in-out infinite alternate; }
.hb-z-jambe-2 { animation-direction: alternate-reverse; }
.hb-z-bras { fill: #4d4063; }
.hb-z-cheveux { fill: #2b2235; }
.hb-z-oeil { fill: #ffe066; }
.hb-z-bouche { stroke: #2b2235; stroke-width: 1.2; }

@keyframes hb-ronde {
  0%   { transform: translateX(64px) scaleX(1); }
  44%  { transform: translateX(180px) scaleX(1); }
  50%  { transform: translateX(180px) scaleX(-1); }
  94%  { transform: translateX(64px) scaleX(-1); }
  100% { transform: translateX(64px) scaleX(1); }
}

@keyframes hb-clopin {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-2px) rotate(4deg); }
}

@keyframes hb-jambe {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(16deg); }
}


.hb-terre {
  position: absolute;
  left: 58px;
  bottom: 36px;
  width: 18px;
  height: 28px;
  overflow: hidden;
}

.hb-main {
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  animation: hb-main 13s ease-in-out infinite;
  animation-delay: 3s;
}

.hb-main svg { display: block; width: 100%; height: 100%; }

@keyframes hb-main {
  0%, 30%  { transform: translateY(100%) rotate(0); }
  40%      { transform: translateY(0) rotate(-8deg); }
  46%      { transform: translateY(0) rotate(8deg); }
  52%      { transform: translateY(0) rotate(-8deg); }
  58%      { transform: translateY(0) rotate(0); }
  70%, 100% { transform: translateY(100%) rotate(0); }
}


.hb-sorciere {
  position: absolute;
  top: 110px;
  left: 0;
  width: 100px;
  height: 62px;
  transform: translate(-120px, 0);
  animation: hb-sorciere 30s linear infinite;
  animation-delay: 12s;
}

.hb-sorciere svg { display: block; width: 100%; height: 100%; }
.hb-silhouette, .hb-paille { fill: #33264a; stroke: #b9a8d6; stroke-width: 0.7; }
.hb-balai { stroke: #8a6a45; stroke-width: 2.4; stroke-linecap: round; }

@keyframes hb-sorciere {
  0%   { transform: translate(-120px, 40px) rotate(-4deg); }
  12%  { transform: translate(30vw, 0) rotate(-2deg); }
  24%  { transform: translate(60vw, 30px) rotate(-6deg); }
  36%  { transform: translate(calc(100vw + 120px), -10px) rotate(-3deg); }
  100% { transform: translate(calc(100vw + 120px), -10px) rotate(-3deg); }
}


.hb-yeux-noir {
  position: absolute;
  display: flex;
  gap: 7px;
  animation: hb-regard 9s ease-in-out infinite;
}

.hb-yeux-noir-1 { left: 14px; top: 76vh; }
.hb-yeux-noir-2 { right: 18px; top: 50vh; animation-duration: 13s; animation-delay: -5s; }

.hb-yeux-noir i {
  display: block;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: #ffd84a;
  animation: hb-cligne 9s linear infinite;
}

.hb-yeux-noir-2 i { background: #ff5a3c; animation-duration: 13s; animation-delay: -5s; }

@keyframes hb-regard {
  0%, 20%   { opacity: 0; }
  28%, 70%  { opacity: 0.9; }
  78%, 100% { opacity: 0; }
}

@keyframes hb-cligne {
  0%, 44%, 47%, 60%, 62%, 100% { transform: scaleY(1); }
  45.5%, 61% { transform: scaleY(0.1); }
}


.hb-eclair {
  position: absolute;
  width: 46px;
  height: 124px;
  opacity: 0;
  animation: hb-eclair 23s linear infinite;
  animation-delay: 5s;
}

.hb-eclair-1 { left: 5vw; top: 14vh; }
.hb-eclair-2 { right: 6vw; top: 24vh; animation-duration: 31s; animation-delay: 17s; transform: scaleX(-1); }

.hb-eclair svg { display: block; width: 100%; height: 100%; }
.hb-eclair path { fill: #f4f0ff; stroke: #b9a8ff; stroke-width: 2; stroke-linejoin: round; }

.hb-voile {
  position: absolute;
  inset: 0;
  background: #d8d0ff;
  opacity: 0;
  animation: hb-voile 23s linear infinite;
  animation-delay: 5s;
}

@keyframes hb-eclair {
  0%, 94%    { opacity: 0; }
  94.4%      { opacity: 1; }
  95.4%      { opacity: 0.15; }
  96.4%      { opacity: 0.9; }
  98%, 100%  { opacity: 0; }
}

@keyframes hb-voile {
  0%, 94%    { opacity: 0; }
  94.4%      { opacity: 0.07; }
  95.4%      { opacity: 0; }
  96.4%      { opacity: 0.05; }
  98%, 100%  { opacity: 0; }
}


.hb-sang {
  position: absolute;
  top: 0;
  left: 3%;
  width: 300px;
  height: 60px;
  z-index: 1;
}

.hb-sang svg { display: block; width: 100%; height: 100%; }
.hb-sang-coulure { fill: #8e0f1b; }


.hb-goutte {
  position: absolute;
  left: 167px;
  top: 41px;
  width: 6px;
  height: 8px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #8e0f1b;
  transform: scale(0);
  animation: hb-goutte 7s ease-in infinite;
}

@keyframes hb-goutte {
  0%       { transform: translateY(0) scale(0); opacity: 1; }
  55%, 62% { transform: translateY(0) scale(1); opacity: 1; }
  80%      { transform: translateY(70px) scale(1); opacity: 0; }
  100%     { transform: translateY(70px) scale(0); opacity: 0; }
}



.hb-halloween.hb-mobile .hb-toile {
  width: 92px;
  height: 92px;
  opacity: 0.55;
}

.hb-halloween.hb-mobile .hb-araignee-toile {
  width: 20px;
  height: 20px;
}

.hb-mobile .hb-vol-1 {
  top: 64px;
  animation-duration: 30s;
  animation-delay: 4s;
}

.hb-mobile .hb-chauve-souris {
  width: 40px;
  height: 20px;
}

@media (max-width: 700px) {
  .hb-sang { width: 210px; height: 42px; }
  .hb-goutte { left: 116px; top: 28px; width: 5px; height: 7px; }
  .hb-fil { right: 6%; transform: scale(0.8); transform-origin: top right; }
  .hb-citrouille-hero { width: 36px; height: 33px; right: 10px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-vol, .hb-nuee, .hb-fantome, .hb-sorciere, .hb-eclair, .hb-voile, .hb-goutte, .hb-terre { display: none; }
  .hb-visage, .hb-zombie, .hb-zombie-pas, .hb-z-jambe, .hb-yeux-noir, .hb-yeux-noir i { animation: none !important; }
  .hb-descente { animation: none; transform: translateY(-30px); }
}