/* MyCBDream — thème Halloween (promotion de saison : boutique.promo de la fiche, theme « halloween »).
   Tout passe par la classe « halloween » sur <html>, posée entre le début et la fin de la promotion : sans elle, rien de ce
   fichier ne s'applique et ses blocs restent cachés (le site normal revient tout seul). Décor animé : halloween.js. */
.promo-b, .hw-hero, .hw-boutique { display: none; }

html.halloween {
  --foret: #1A0F2B; --foret-2: #2A1842; --lime: #FF7A1A; --soleil: #FFC14D; --vert: #C2410C; --vert-pale: #FFEEDB;
  --nuit: #120A1F; --citrouille: #FF7A1A; --poison: #A8FF3E;
  --araignee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%231A0F2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18 9 12 4 14M16 21 7 19 3 23M17 24 9 27 6 33M18 26 13 32 12 38M24 18 31 12 36 14M24 21 33 19 37 23M23 24 31 27 34 33M22 26 27 32 28 38'/%3E%3C/g%3E%3Cellipse cx='20' cy='17' rx='5' ry='4.6' fill='%231A0F2B'/%3E%3Cellipse cx='20' cy='26' rx='6.5' ry='7.5' fill='%231A0F2B'/%3E%3Ccircle cx='18.2' cy='16.4' r='1.2' fill='%23FF7A1A'/%3E%3Ccircle cx='21.8' cy='16.4' r='1.2' fill='%23FF7A1A'/%3E%3C/svg%3E");
  --fil: rgba(26,15,43,.45);
}
/* sur fond sombre, araignée et fil clairs */
html.halloween :is(.hero, .hw-hero, .zone, .pied, .promo-b) {
  --araignee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23EFE4FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18 9 12 4 14M16 21 7 19 3 23M17 24 9 27 6 33M18 26 13 32 12 38M24 18 31 12 36 14M24 21 33 19 37 23M23 24 31 27 34 33M22 26 27 32 28 38'/%3E%3C/g%3E%3Cellipse cx='20' cy='17' rx='5' ry='4.6' fill='%23EFE4FF'/%3E%3Cellipse cx='20' cy='26' rx='6.5' ry='7.5' fill='%23EFE4FF'/%3E%3Ccircle cx='18.2' cy='16.4' r='1.2' fill='%23FF7A1A'/%3E%3Ccircle cx='21.8' cy='16.4' r='1.2' fill='%23FF7A1A'/%3E%3C/svg%3E");
  --fil: rgba(239,228,255,.6);
}

/* Barre de la promotion (remplace le bandeau de livraison pendant Halloween) */
html.halloween .bandeau { display: none; }
html.halloween .promo-b { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; position: relative; overflow: hidden;
  background: radial-gradient(120% 260% at 50% 0%, #3B1D5E 0%, var(--nuit) 72%); color: #EFE4FF; font-size: 14px; letter-spacing: .02em; text-align: center; }
.promo-t { display: inline-flex; align-items: center; gap: 8px; }
.promo-t::before { content: ""; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.5C11.4 5 12 3.4 14 2.5' fill='none' stroke='%2384C441' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='14.5' rx='10' ry='7.5' fill='%23FF7A1A'/%3E%3Cpath d='M12 7c-2.6 0-3.6 3.6-3.6 7.5S9.4 22 12 22s3.6-3.6 3.6-7.5S14.6 7 12 7z' fill='%23FF9440'/%3E%3Cpath d='M6.8 13.2 8.6 11l1.6 2.2zM13.8 13.2 15.4 11l1.8 2.2z' fill='%232B1400'/%3E%3Cpath d='M7.4 16.2c1.3 1.6 7.9 1.6 9.2 0' fill='none' stroke='%232B1400' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.promo-t b { color: var(--soleil); font-weight: 800; }
.promo-c { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; border: 1px solid rgba(255,122,26,.55); background: rgba(255,122,26,.14); border-radius: 999px; padding: 3px 12px; }
.promo-go { background: linear-gradient(90deg, var(--soleil), var(--citrouille)); color: var(--nuit); font-weight: 800; border-radius: 999px; padding: 4px 14px; }
@media (max-width: 700px) { html.halloween .promo-b { font-size: 13px; gap: 6px 10px; } .promo-go { display: none; } }

/* Accueil : la promotion en tête */
html.halloween .hw-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; position: relative; isolation: isolate; overflow: hidden;
  margin: 8px 0 16px; padding: 64px; border-radius: 32px; color: #fff;
  background: radial-gradient(70% 80% at 15% 115%, rgba(168,255,62,.16), transparent 62%), linear-gradient(160deg, #2C1648 0%, var(--nuit) 58%, #0B0614 100%); }
.hw-hero::before { content: ""; position: absolute; z-index: -1; top: 34px; right: 44%; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #FFF4D1 0%, #FFD27A 55%, #F2A93B 100%); box-shadow: 0 0 60px 18px rgba(255,193,77,.28); }
.hw-hero::after { content: ""; position: absolute; z-index: -1; inset: auto -20% -40px -20%; height: 160px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220,205,255,.22), transparent), radial-gradient(40% 60% at 70% 60%, rgba(220,205,255,.16), transparent);
  filter: blur(8px); animation: hw-brume 14s ease-in-out infinite alternate; }
@keyframes hw-brume { to { transform: translateX(8%); } }
.hw-hero .kicker { color: var(--poison); }
.hw-hero h2 { font-size: clamp(60px, 8.4vw, 128px); line-height: .9; margin: 14px 0 18px; color: var(--soleil);
  background: linear-gradient(180deg, #FFD27A, var(--citrouille)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255,122,26,.45)); }
.hw-hero h2 em { display: block; margin-top: .14em; font-size: .42em; letter-spacing: -.02em; background: none; -webkit-text-fill-color: #fff; color: #fff; }
.hw-hero p { color: #DCD0EE; font-size: 17px; max-width: 520px; }
.hw-fin { margin-top: 26px; font-size: 13px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #BFAEDB !important; }
.rebours { display: flex; gap: 10px; margin: 10px 0 28px; }
.rebours div { min-width: 78px; padding: 10px 8px 8px; text-align: center; border-radius: 16px; border: 1px solid rgba(255,122,26,.45);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 24px rgba(255,122,26,.12); }
.rebours b { display: block; font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.rebours div:last-child b { color: var(--citrouille); }
.rebours small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #BFAEDB; }
.hw-hero .btn-lime { font-size: 17px; padding: 16px 30px; animation: hw-lueur 2.4s ease-in-out infinite; }
@keyframes hw-lueur { 50% { box-shadow: 0 0 0 6px rgba(255,122,26,.18), 0 12px 40px rgba(255,122,26,.55); } }
.hw-photos { position: relative; height: 460px; }
.hw-photos img { position: absolute; width: 54%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 18px; border: 6px solid #fff;
  box-shadow: 0 24px 50px rgba(0,0,0,.5); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.hw-photos img:nth-child(1) { left: 0; top: 40px; transform: rotate(-8deg); }
.hw-photos img:nth-child(2) { left: 24%; top: 0; z-index: 1; transform: rotate(2deg); }
.hw-photos img:nth-child(3) { right: 0; top: 70px; transform: rotate(9deg); }
@media (hover: hover) and (pointer: fine) { .hw-photos img:hover { z-index: 2; transform: rotate(0) scale(1.04); } }
@media (max-width: 1000px) {
  html.halloween .hw-hero { grid-template-columns: 1fr; padding: 40px 24px 28px; gap: 8px; border-radius: 24px; }
  .hw-hero::before { right: 22px; top: 22px; width: 64px; height: 64px; }
  .hw-photos { height: 250px; }
  .hw-photos img { width: 40%; }
  .hw-photos img:nth-child(2) { left: 30%; }
  .hw-volee { display: none; }
}
@media (max-width: 420px) { .rebours { gap: 6px; } .rebours div { min-width: 0; flex: 1; } .rebours b { font-size: 30px; } .hw-hero .btn-lime { width: 100%; } }

/* Accueil : la boutique déguisée (photos de la famille) */
html.halloween .hw-boutique { display: block; }
.hw-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hw-grille img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
@media (hover: hover) and (pointer: fine) { .hw-grille img:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 18px 40px rgba(255,122,26,.35); } }
@media (max-width: 1000px) { .hw-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hw-grille img { border-radius: 14px; } }

/* Cartes produit et prix */
html.halloween .p .tag.promo { background: linear-gradient(90deg, var(--soleil), var(--citrouille)); color: var(--nuit); font-weight: 800; }
html.halloween .p .prix { color: var(--vert); }
@media (hover: hover) and (pointer: fine) { html.halloween .p:hover { border-color: rgba(255,122,26,.6); box-shadow: 0 18px 40px rgba(255,122,26,.18); } }
html.halloween .btn-lime { box-shadow: 0 10px 26px rgba(255,122,26,.38); }

/* Boutons : une araignée descend sur son fil au survol */
html.halloween :is(.btn, .plus) { position: relative; }
html.halloween :is(.btn, .plus)::before { content: ""; position: absolute; left: 50%; top: -30px; width: 1px; height: 0; background: var(--fil); pointer-events: none;
  transition: height .38s cubic-bezier(.2,.8,.2,1); }
html.halloween :is(.btn, .plus)::after { content: ""; position: absolute; left: calc(50% - 10px); top: -34px; width: 20px; height: 20px; background: var(--araignee) center/contain no-repeat;
  opacity: 0; pointer-events: none; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .2s; }
@media (hover: hover) and (pointer: fine) {
  html.halloween :is(.btn, .plus):hover::before { height: 18px; }
  html.halloween :is(.btn, .plus):hover::after { opacity: 1; transform: translateY(18px); animation: hw-gigote .5s .38s ease-in-out infinite alternate; }
}
@keyframes hw-gigote { from { transform: translateY(18px) rotate(-8deg); } to { transform: translateY(18px) rotate(8deg); } }

/* Décor posé par halloween.js : araignées suspendues, toiles, chauves-souris, toile au clic */
.hw-pendu { position: absolute; top: 100%; width: 24px; pointer-events: none; }
.hw-pendu i { display: block; width: 1px; height: 26px; margin: 0 auto; background: var(--fil); animation: hw-descend 4.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.hw-pendu span { display: block; width: 24px; height: 24px; margin-top: -2px; background: var(--araignee) center/contain no-repeat; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9)); }
@keyframes hw-descend { 0%, 15% { height: 12px; } 100% { height: 46px; } }
@media (max-width: 700px) { .hw-pendu:not(.d) { display: none; } }
.hw-toile { position: absolute; pointer-events: none; color: currentColor; }
.hw-toile svg { display: block; width: 100%; height: 100%; }
.tete > .hw-toile { top: 0; width: 76px; height: 76px; color: rgba(26,15,43,.28); }
.tete > .hw-toile.g { left: 0; } .tete > .hw-toile.d { right: 0; transform: scaleX(-1); }
.hw-hero > .hw-toile { top: 0; left: 0; width: 190px; height: 190px; color: rgba(239,228,255,.22); }
.hw-chauve { position: fixed; z-index: 60; top: var(--y); left: 0; width: 48px; color: #1A0F2B; pointer-events: none; animation: hw-vol 7s linear forwards; }
.hw-chauve.retour { animation-direction: reverse; }
.hw-chauve svg, .hw-volee svg { display: block; width: 100%; fill: currentColor; animation: hw-ailes .16s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes hw-vol { 0% { transform: translate(-70px, 0); } 25% { transform: translate(25vw, -40px); } 50% { transform: translate(50vw, 20px); } 75% { transform: translate(75vw, -30px); } 100% { transform: translate(calc(100vw + 70px), 10px); } }
@keyframes hw-ailes { to { transform: scaleY(.35); } }
.hw-volee { position: absolute; z-index: -1; width: 34px; color: #0B0614; pointer-events: none; animation: hw-plane 3.2s ease-in-out infinite alternate; }
@keyframes hw-plane { to { translate: 14px -10px; } }
.hw-clic { position: fixed; z-index: 90; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: var(--citrouille); pointer-events: none; animation: hw-clic .65s cubic-bezier(.2,.8,.2,1) forwards; }
.hw-clic svg { display: block; width: 100%; height: 100%; }
@keyframes hw-clic { from { transform: scale(.2) rotate(-20deg); opacity: 1; } to { transform: scale(1.25) rotate(0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hw-hero::after, .hw-hero .btn-lime, .hw-pendu i, .hw-volee, .hw-volee svg { animation: none; }
  html.halloween :is(.btn, .plus):hover::after { animation: none; }
}