/* ============================================================
   DOUDI & MOUMOUNE — Habillage HALLOWEEN v1.0.0
   Surcharge la palette du thème parent + décorations animées
   ============================================================ */

/* ── 1. PALETTE (mêmes noms de variables que le parent) ── */
:root {
  /* « rose » devient citrouille */
  --rose:         #FF6B1A;
  --rose-dark:    #D9480F;
  --rose-light:   #FF9A4D;
  --rose-pale:    #FFF1E6;

  /* « teal » devient vert potion */
  --teal:         #7AC943;
  --teal-dark:    #3F8A1C;
  --teal-light:   #C3F27F;
  --teal-pale:    #F2FCE6;

  /* « amber » devient flamme de bougie */
  --amber:        #FFC300;
  --amber-dark:   #E09A00;
  --amber-pale:   #FFF8DB;

  /* « purple » devient violet sorcière */
  --purple:       #8E3CCB;
  --purple-dark:  #5A189A;
  --purple-light: #C77DFF;
  --purple-pale:  #F6EEFF;

  --lime:         #A3E635;
  --lime-dark:    #65A30D;

  /* Neutres nuit */
  --dark:         #170B24;
  --dark2:        #2A1240;
  --dark3:        #6E5F80;
  --light:        #FFF8F1;
  --light2:       #FBEFE4;
  --light3:       #F0DFCF;

  /* Dégradés */
  --grad-main:    linear-gradient(135deg,#FF6B1A 0%,#8E3CCB 100%);
  --grad-warm:    linear-gradient(135deg,#FFC300 0%,#FF6B1A 100%);
  --grad-cool:    linear-gradient(135deg,#7AC943 0%,#5A189A 100%);
  --grad-hero:    radial-gradient(ellipse at 75% 20%,#3B1860 0%,#1C0B30 45%,#0B0514 100%);
  --grad-lime:    linear-gradient(135deg,#A3E635 0%,#7AC943 100%);

  --border:       rgba(142,60,203,.12);
  --border2:      rgba(142,60,203,.24);
  --shadow-rose:  0 8px 32px rgba(255,107,26,.35);
  --shadow-teal:  0 8px 32px rgba(122,201,67,.3);
  --shadow-purple:0 8px 32px rgba(142,60,203,.35);
}

::selection{background:var(--rose);color:#fff}

/* ── 2. COULEURS EN DUR DU PARENT ── */
.btn-primary:hover{box-shadow:0 14px 48px rgba(255,107,26,.45)}
.btn-teal:hover{box-shadow:0 14px 48px rgba(122,201,67,.4)}
.product-card:hover{border-color:rgba(255,107,26,.35);box-shadow:0 12px 44px rgba(255,107,26,.18),0 0 0 1px rgba(255,107,26,.15)}

.hp-hero__orb--1{background:radial-gradient(circle,rgba(142,60,203,.4),transparent 65%)}
.hp-hero__orb--2{background:radial-gradient(circle,rgba(122,201,67,.16),transparent 65%)}
.hp-hero__orb--3{background:radial-gradient(circle,rgba(255,107,26,.22),transparent 65%)}

/* Barre d'annonce : ruban qui ondule doucement */
.announce{
  background:linear-gradient(90deg,#5A189A,#FF6B1A,#8E3CCB,#FF6B1A,#5A189A);
  background-size:300% 100%;
  animation:hw-ribbon 14s linear infinite;
}
@keyframes hw-ribbon{to{background-position:300% 0}}

/* Logo : petite citrouille avant le nom */
.site-header .logo-main::after{content:' 🎃';-webkit-text-fill-color:initial;font-style:normal;font-size:.8em;display:inline-block;animation:hw-wobble 3.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes hw-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(0)}}

/* Lien « Promotions » : flamme qui vacille */
.nav-promo-dot{background:var(--grad-warm)!important;box-shadow:0 0 10px #FFC300;animation:hw-flicker 1.6s infinite}
@keyframes hw-flicker{0%,100%{opacity:1}45%{opacity:.55}50%{opacity:.9}55%{opacity:.4}}

/* Sur-titres de section : chauve-souris à la place du trait */
.section-eyebrow::before{
  width:22px;height:10px;border-radius:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M60 14c3-6 6-6 6-6l1 6c4 0 6 3 6 3 6-8 20-12 30-8-5 2-7 8-6 13-5-3-11-2-13 2-4-3-10-2-12 3-3-3-8-3-12 2-4-5-9-5-12-2-2-5-8-6-12-3-2-4-8-5-13-2 1-5-1-11-6-13 10-4 24 0 30 8 0 0 2-3 6-3l1-6s3 0 6 6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M60 14c3-6 6-6 6-6l1 6c4 0 6 3 6 3 6-8 20-12 30-8-5 2-7 8-6 13-5-3-11-2-13 2-4-3-10-2-12 3-3-3-8-3-12 2-4-5-9-5-12-2-2-5-8-6-12-3-2-4-8-5-13-2 1-5-1-11-6-13 10-4 24 0 30 8 0 0 2-3 6-3l1-6s3 0 6 6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Boutons principaux : léger halo citrouille qui « respire » */
.hp-hero .btn-primary{animation:hw-breathe 3s ease-in-out infinite}
@keyframes hw-breathe{0%,100%{box-shadow:0 8px 32px rgba(255,107,26,.35)}50%{box-shadow:0 8px 44px rgba(255,107,26,.65),0 0 0 6px rgba(255,107,26,.08)}}

/* Cartes produit : clin d'œil au survol */
.product-card{position:relative}
.product-card::after{
  content:'🕸️';position:absolute;top:-6px;right:-4px;font-size:30px;line-height:1;
  opacity:0;transform:scale(.4) rotate(-20deg);transition:var(--ease-spring);pointer-events:none;z-index:3
}
.product-card:hover::after{opacity:.85;transform:none}

/* Badge du hero */
.hp-hero__badge-dot{background:#FF6B1A!important;box-shadow:0 0 12px #FF6B1A}

/* ── 3. DÉCORATIONS ── */
.hw-layer{position:absolute;top:0;left:0;right:0;height:0;z-index:950;pointer-events:none}

/* Araignées suspendues qui se balancent */
.hw-spider{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:hw-swing 5s ease-in-out infinite}
.hw-spider__thread{width:1px;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.6));animation:hw-drop 9s ease-in-out infinite}
.hw-spider--1{left:16%;animation-duration:5.5s}
.hw-spider--1 .hw-spider__thread{height:118px}
.hw-spider--2{right:22%;animation-duration:4.4s;animation-delay:-2s}
.hw-spider--2 .hw-spider__thread{height:70px;animation-delay:-4s}
.hw-spider--2 svg{width:28px;height:28px}
@keyframes hw-swing{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
@keyframes hw-drop{0%,100%{transform:scaleY(1);transform-origin:top}50%{transform:scaleY(1.35)}}
.hw-spider__thread{transform-origin:top}
.hw-spider svg{margin-top:-4px;filter:drop-shadow(0 0 5px rgba(199,125,255,.9)) drop-shadow(0 0 1px #fff);animation:hw-follow 9s ease-in-out infinite}
.hw-spider--2 svg{animation-delay:-4s}
.hw-spider--1 svg{--d:41px}
.hw-spider--2 svg{--d:25px}
@keyframes hw-follow{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--d))}}

/* Héros : lune, fantôme, citrouilles, toile, brume */
.hw-hero-deco{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hw-moon{position:absolute;top:7%;right:6%;width:110px;height:110px;filter:drop-shadow(0 0 40px rgba(255,243,196,.55));animation:hw-moon 8s ease-in-out infinite}
.hw-moon svg{width:100%;height:100%}
@keyframes hw-moon{0%,100%{filter:drop-shadow(0 0 30px rgba(255,243,196,.45))}50%{filter:drop-shadow(0 0 60px rgba(255,243,196,.75))}}

.hw-ghost{position:absolute;top:18%;left:44%;width:72px;opacity:.85;animation:hw-float 7s ease-in-out infinite}
.hw-ghost svg{width:100%;height:auto}
@keyframes hw-float{
  0%  {transform:translate(0,0) rotate(-4deg)}
  25% {transform:translate(30px,-18px) rotate(3deg)}
  50% {transform:translate(60px,4px) rotate(-2deg);opacity:.55}
  75% {transform:translate(24px,16px) rotate(4deg)}
  100%{transform:translate(0,0) rotate(-4deg)}
}

.hw-pumpkins{position:absolute;bottom:14px;left:2%;display:flex;align-items:flex-end;gap:6px}
.hw-pumpkins span{display:block}
.hw-pumpkins span:nth-child(1){width:74px}
.hw-pumpkins span:nth-child(2){width:48px;animation-delay:-1.2s}
.hw-pumpkins svg{width:100%;height:auto;display:block}
.hw-glow{animation:hw-candle 2.2s infinite;filter:drop-shadow(0 0 4px #FFD43B)}
.hw-pumpkins span:nth-child(2) .hw-glow{animation-delay:-.9s}
@keyframes hw-candle{0%,100%{opacity:1}30%{opacity:.7}35%{opacity:.95}60%{opacity:.6}65%{opacity:1}}

.hw-web-corner{position:absolute;top:0;left:0;width:170px;color:rgba(255,255,255,.18)}
.hw-web-corner svg{width:100%;height:auto}

.hw-fog{position:absolute;left:0;bottom:-10px;width:200%;height:130px;opacity:.55;
  background:
    radial-gradient(ellipse 18% 55% at 10% 70%,rgba(220,200,255,.35),transparent 70%),
    radial-gradient(ellipse 22% 50% at 32% 80%,rgba(255,255,255,.25),transparent 70%),
    radial-gradient(ellipse 16% 60% at 55% 75%,rgba(220,200,255,.3),transparent 70%),
    radial-gradient(ellipse 24% 50% at 78% 80%,rgba(255,255,255,.22),transparent 70%);
  animation:hw-fog 38s linear infinite}
.hw-fog--2{animation-duration:55s;animation-direction:reverse;opacity:.4;bottom:-30px}
@keyframes hw-fog{to{transform:translateX(-50%)}}

/* Chauves-souris qui traversent l'écran (créées par halloween.js) */
.hw-bat{position:fixed;z-index:960;pointer-events:none;left:0;top:0;width:56px;will-change:transform}
.hw-bat svg{width:100%;height:auto;animation:hw-flap .22s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}

/* Toiles d'araignée dans les coins du pied de page + cimetière */
.site-footer{position:relative}
.hw-footer-top{position:absolute;left:0;right:0;bottom:100%;height:90px;color:var(--dark);pointer-events:none;line-height:0}
.hw-footer-top .hw-graveyard{width:100%;height:100%;display:block}
.hw-footer-top::before{content:'';position:absolute;left:12%;bottom:62px;width:4px;height:4px;border-radius:50%;background:#FFC300;box-shadow:0 0 8px 2px #FFC300,820px -6px 0 0 #FFC300,820px -6px 8px 2px #FFC300;animation:hw-flicker 2.4s infinite}
.site-footer .hw-web-corner{left:auto;right:0;transform:scaleX(-1);color:rgba(255,255,255,.08);width:220px}

/* Bouton pour couper les animations */
.hw-toggle{position:fixed;left:16px;bottom:16px;z-index:980;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(23,11,36,.35);border:2px solid rgba(255,107,26,.6);transition:var(--ease)}
.hw-toggle:hover{transform:scale(1.08) rotate(-8deg)}
.hw-toggle[aria-pressed="false"]{opacity:.55;border-color:rgba(255,255,255,.25)}
.hw-toggle[aria-pressed="false"]::after{content:'';position:absolute;width:30px;height:2px;background:#fff;transform:rotate(-45deg);border-radius:2px}

/* Animations coupées (bouton, Customizer ou préférence système) */
.hw-paused .hw-bat,
.hw-paused .hw-layer,
.hw-paused .hw-ghost,
.hw-paused .hw-fog{display:none}
.hw-paused .hw-spider,.hw-paused .hw-glow,.hw-paused .announce,.hw-paused .logo-main::after,.hw-paused .hp-hero .btn-primary{animation:none}
.hw-effects-disabled .hw-hero-deco .hw-ghost,.hw-effects-disabled .hw-fog{display:none}

@media (prefers-reduced-motion: reduce){
  .announce,.hw-spider,.hw-spider *,.hw-moon,.hw-ghost,.hw-glow,.hw-fog,.site-header .logo-main::after,.hp-hero .btn-primary,.nav-promo-dot{animation:none!important}
  .hw-bat{display:none}
}

/* ── 4. RESPONSIVE ── */
@media (max-width:1100px){
  .hw-spider--2{right:30%}
  .hw-ghost{left:auto;right:12%;top:auto;bottom:34%;width:56px}
}
@media (max-width:768px){
  .hw-spider--1 .hw-spider__thread{height:80px}
  .hw-spider--1 svg{--d:28px}
  .hw-spider--2{display:none}
  .hw-moon{width:70px;height:70px;top:4%;right:4%}
  .hw-ghost{width:46px;bottom:auto;top:30%;right:6%}
  .hw-pumpkins span:nth-child(1){width:52px}
  .hw-pumpkins span:nth-child(2){width:34px}
  .hw-web-corner{width:110px}
  .hw-footer-top{height:60px}
  .hw-footer-top::before{display:none}
  .hw-bat{width:40px}
  .hw-toggle{width:38px;height:38px;font-size:17px;left:12px;bottom:12px}
}