/* ==========================================================================
   Thème Halloween (promo datée du site, SitePromo / config/promo.php)
   Chargé par blocks/header.php seulement pendant la promo, rangé sous
   body.promo-halloween. Aucune règle ne touche aux prix ni aux formulaires.

   Ambiance complète (choix de Ben, 23 oct. 2026) : bandeau nuit et citrouille,
   le rouge du header qui dégouline sur le bandeau, araignée suspendue,
   chauves-souris au chargement, pleine lune sur les photos des héros et
   bouton principal du héros en orange. Le décor qui s'accroche au bandeau ne
   sort qu'avec lui (body.promo-bar-on) : rien de tout ça sur le checkout.
   ========================================================================== */

.promo-halloween {
  --hw-night: #150a22;
  --hw-purple: #2b1140;
  --hw-pumpkin: #ff8a1f;
  --hw-pumpkin-deep: #e8620c;
  --hw-bone: #fff3e0;
}

/* ---------- Bandeau de la promo, sous le header ---------- */

.promo-bar--halloween {
  position: relative;
  z-index: 150;
  background:
    radial-gradient(ellipse at 50% 130%, rgba(255, 138, 31, 0.22) 0%, transparent 60%),
    linear-gradient(90deg, var(--hw-night) 0%, var(--hw-purple) 50%, var(--hw-night) 100%);
  color: var(--hw-bone);
  font-family: 'Montserrat', sans-serif;
}

.promo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.promo-bar__icon {
  flex-shrink: 0;
  line-height: 0;
  filter: drop-shadow(0 0 6px rgba(255, 138, 31, 0.5));
}

.promo-bar__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 10px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: center;
}

.promo-bar__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hw-pumpkin);
}

.promo-bar__offer {
  font-weight: 700;
  color: #fff;
}

.promo-bar__when {
  color: rgba(255, 243, 224, 0.75);
}

.promo-bar__spotlight {
  color: rgba(255, 243, 224, 0.75);
}

.promo-bar__spotlight a {
  color: var(--hw-bone);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 31, 0.7);
  text-underline-offset: 3px;
}

.promo-bar__spotlight a:hover,
.promo-bar__spotlight a:focus {
  color: var(--hw-pumpkin);
}

/* Même bouton rouge que le reste du site : la marque passe avant le thème */
.promo-bar__cta {
  flex-shrink: 0;
  padding: 7px 18px;
  border-radius: 50px;
  background: #ed1b24;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.promo-bar__cta:hover,
.promo-bar__cta:focus {
  background: #c8101a;
  color: #fff;
  text-decoration: none;
}

/* Téléphone : l'offre et le bouton seulement, le jeu mis en avant se retrouve dans la liste */
@media (max-width: 575px) {
  .promo-bar__inner {
    gap: 10px;
    padding: 8px 12px;
  }

  .promo-bar__text {
    justify-content: flex-start;
    gap: 0 8px;
    font-size: 0.82rem;
    text-align: left;
  }

  .promo-bar__spotlight {
    display: none;
  }

  .promo-bar__cta {
    padding: 6px 14px;
    font-size: 0.75rem;
  }
}

/* ---------- Header : le rouge de la marque dégouline sur le bandeau ---------- */

.promo-bar-on .hdr-nav::after,
.promo-bar-on .hdr-drip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath fill='%23ed1b24' d='M0 0h160v3c-5 0-7 1-7.5 5s-1.2 9-3.5 9-3-4-3.2-8S144 3 139 3h-31c-3 0-4 1.2-4.3 3.6S102.4 10 101 10s-2.4-1.3-2.7-3.4S96.6 3 93 3H62c-4 0-5.3 1.6-5.7 5.6S54.4 18 52 18s-3.6-5.4-4-9.4S46.4 3 42 3H20c-3.4 0-4.4 1.5-4.7 4.5S13.6 12 12 12s-2.6-1.5-3-4.5S7.4 3 4 3H0z'/%3E%3C/svg%3E") repeat-x left top;
  background-size: 160px 18px;
  pointer-events: none;
  /* Au-dessus du bandeau (z-index 150) */
  z-index: 160;
}

/* Les en-têtes sans position (téléphone) : les coulures se placent sous eux. Pas de
   z-index ici : il ferait passer l'en-tête par-dessus le hamburger (nav-mobile.php) */
.promo-bar-on .hdr-drip {
  position: relative;
}

/* Place pour les coulures en haut du bandeau */
.promo-bar-on .promo-bar__inner {
  padding-top: 24px;
}

/* ---------- Araignée suspendue au bandeau ---------- */

/* Le cadre coupe ce qui dépasse au-dessus : l'araignée sort de sous le bandeau
   sans jamais passer sur son texte */
.hw-spider {
  position: absolute;
  top: 100%;
  left: 6%;
  width: 70px;
  height: 150px;
  margin-left: -15px;
  overflow: hidden;
  pointer-events: none;
}

.hw-spider__body {
  position: absolute;
  top: 0;
  left: 15px;
  width: 40px;
  transform-origin: 50% 0;
  animation: hwSpiderDrop 2.2s cubic-bezier(.3, 1.4, .6, 1) 1.2s both, hwSpiderSway 5s ease-in-out 3.4s infinite;
}

/* Le fil, de la base du bandeau à la tête de l'araignée */
.hw-spider__body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 102px;
  background: linear-gradient(180deg, rgba(255, 243, 224, 0.15), rgba(255, 243, 224, 0.7));
}

.hw-spider svg {
  display: block;
  margin-top: 88px;
  filter: drop-shadow(0 0 3px rgba(255, 243, 224, 0.6));
}

@keyframes hwSpiderDrop {
  from { transform: translateY(-130px); }
  to { transform: translateY(0); }
}

@keyframes hwSpiderSway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

@media (max-width: 575px) {
  .hw-spider {
    left: auto;
    right: 7%;
    height: 90px;
    margin-left: 0;
    margin-right: -15px;
  }

  .hw-spider__body {
    left: 23px;
    width: 24px;
  }

  .hw-spider__body::before {
    height: 50px;
  }

  .hw-spider svg {
    width: 24px;
    height: 24px;
    margin-top: 40px;
  }
}

/* ---------- Chauves-souris : traversent l'écran une fois au chargement ---------- */

.hw-bats {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1000;
}

.hw-bat {
  position: absolute;
  left: 0;
  width: 62px;
  opacity: 0;
  color: var(--hw-night);
  animation: hwFly 7s ease-in-out both;
}

.hw-bat svg {
  display: block;
  width: 100%;
  fill: currentColor;
  filter: drop-shadow(0 0 6px rgba(255, 138, 31, 0.55));
  animation: hwFlap 0.22s ease-in-out infinite alternate;
  transform-origin: 50% 40%;
}

.hw-bat--1 { top: 130px; animation-delay: 0.6s; }
.hw-bat--2 { top: 210px; width: 46px; animation-delay: 1.3s; animation-duration: 8s; }
.hw-bat--3 { top: 100px; width: 34px; animation-delay: 2.4s; animation-duration: 9s; }

@keyframes hwFly {
  0% { opacity: 0; transform: translate(-60px, 40px) rotate(-6deg); }
  8% { opacity: 1; }
  30% { transform: translate(28vw, -20px) rotate(4deg); }
  55% { transform: translate(55vw, 50px) rotate(-4deg); }
  80% { transform: translate(82vw, 0) rotate(5deg); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(100vw + 60px), -40px) rotate(-6deg); }
}

@keyframes hwFlap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.35); }
}

/* ---------- Héros : nuit de pleine lune, lueur de citrouille au sol ---------- */

.promo-halloween .hero-overlay,
.promo-halloween .dispatch-hero-overlay {
  background:
    radial-gradient(circle at 84% 20%, #fff3d6 0, #ffe6b0 44px, rgba(255, 214, 150, 0.35) 47px, rgba(255, 190, 110, 0.12) 110px, transparent 170px),
    linear-gradient(180deg, rgba(30, 8, 50, 0.62) 0%, rgba(12, 4, 22, 0.55) 55%, rgba(70, 24, 0, 0.6) 100%);
}

.promo-halloween .hero-overlay::after,
.promo-halloween .dispatch-hero-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 120, 20, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .promo-halloween .hero-overlay,
  .promo-halloween .dispatch-hero-overlay {
    background:
      radial-gradient(circle at 82% 14%, #fff3d6 0, #ffe6b0 26px, rgba(255, 214, 150, 0.35) 28px, rgba(255, 190, 110, 0.1) 70px, transparent 110px),
      linear-gradient(180deg, rgba(30, 8, 50, 0.62) 0%, rgba(12, 4, 22, 0.55) 55%, rgba(70, 24, 0, 0.6) 100%);
  }
}

/* Bouton principal du héros en orange citrouille */
.promo-halloween .btn-hero-primary,
.promo-halloween .btn-dispatch-hero {
  background: linear-gradient(135deg, var(--hw-pumpkin) 0%, var(--hw-pumpkin-deep) 100%);
  box-shadow: 0 6px 30px rgba(255, 138, 31, 0.5);
}

.promo-halloween .btn-hero-primary:hover,
.promo-halloween .btn-dispatch-hero:hover {
  box-shadow: 0 10px 40px rgba(255, 138, 31, 0.65);
}

/* ---------- Pastille du rabais sur les affiches (blocks/game-selection.php) ---------- */

.promo-halloween .game-item-promo {
  background: var(--hw-night);
  color: var(--hw-pumpkin);
}

/* ---------- Prix de la fiche jeu (game.php, base dans game.css) ---------- */

.promo-halloween .gp-promo {
  border-color: rgba(255, 138, 31, 0.45);
  background:
    radial-gradient(ellipse at 50% 130%, rgba(255, 138, 31, 0.2) 0%, transparent 65%),
    linear-gradient(135deg, var(--hw-night) 0%, var(--hw-purple) 100%);
}

.promo-halloween .gp-promo-label {
  color: var(--hw-pumpkin);
}

.promo-halloween .gp-promo-price {
  color: #fff;
}

.promo-halloween .gp-promo-note {
  color: rgba(255, 243, 224, 0.8);
}

/* ---------- Checkout : phrase de la promo (organize.php) ---------- */

.promo-halloween .quantity-hint--promo {
  color: var(--hw-pumpkin-deep);
  font-weight: 600;
}

/* ---------- Mouvement réduit : décor immobile ---------- */

@media (prefers-reduced-motion: reduce) {
  .hw-bats {
    display: none;
  }

  .hw-spider__body {
    animation: none;
  }
}