/* Alignement et conteneur de la barre de réassurance */
.hero-trust-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;
  margin-top: 2rem !important;
  width: 100% !important;
}

/* Alignement du texte + icône */
.hero-trust-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.9rem !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Réduction de la taille des SVG (icônes) */
.hero-trust-row svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
}

/* Couleurs spécifiques par icône */
.hero-trust-row .ic-check {
  color: #22c55e !important; /* Vert */
}

.hero-trust-row .ic-bolt {
  color: #eab308 !important; /* Jaune / Orange */
}

.hero-trust-row .ic-shield {
  color: #ff7a1a !important; /* Bleu */
}
/* Permet de cliquer à travers le fond bloquant si la modale reste ouverte */
.search-overlay,
.search-backdrop,
div[class*="backdrop"] {
  pointer-events: auto;
}

/* Force le curseur et la possibilité de cliquer autour pour fermer */
body:has(.search-input:focus) {
  overflow: auto !important;
}
/*───────────────────────────────────────────────
  ETOILES FRACTIONNAIRES  (snippets/stars.njk)

  Deux rangees superposees : la base creuse donne la forme, la rangee pleine
  est rognee a la largeur exacte de la note. Le rognage doit reveler une
  fraction d'etoile, jamais retrecir les icones — d'ou le `flex: 0 0 auto` sur
  les <svg>, sans quoi le conteneur etroit les comprimerait toutes.

  Pose ici et non dans le fragment : celui-ci est rendu des dizaines de fois
  par page, un <style> embarque le serait autant.
───────────────────────────────────────────────*/
.rv-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
  --rv-star: #fbbf24;
}
.rv-stars__row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 0;
}
.rv-stars__row > svg { flex: 0 0 auto; }
.rv-stars .rv-stars__base svg { color: rgba(255, 255, 255, 0.17); }
.rv-stars .rv-stars__fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.rv-stars .rv-stars__fill svg { color: var(--rv-star); }

/*───────────────────────────────────────────────
  CARTE D'AVIS  (snippets/review-card.njk)

  Partagee par la page Avis et la page Produit : elle vit donc ici plutot que
  dans le <style> d'un composant.
───────────────────────────────────────────────*/
.rv-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease,
              box-shadow 0.3s ease, background-color 0.3s ease;
}
.rv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 26, 0.45);
  box-shadow: 0 18px 50px -24px rgba(255, 122, 26, 0.6);
}

/* Filet d'accent en haut, revele au survol. */
.rv-card__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff7a1a, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rv-card:hover .rv-card__line { opacity: 1; }

/* ── Tete : note a gauche, produit a droite ── */
.rv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.rv-card__stars { display: inline-flex; flex-shrink: 0; }

/* Le produit devient une pastille : c'est une etiquette, pas une phrase. */
.rv-card__tag {
  display: inline-flex;
  align-items: center;
  max-width: 60%;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa0ae;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Le message : c'est lui qu'on vient lire ── */
.rv-card__text {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: #e7e9f0;
  margin: 0 0 16px;
  word-wrap: break-word;
}

.rv-card__img {
  margin: 0 0 16px;
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.rv-card__img img { display: block; width: 100%; height: auto; }

.rv-card__reply {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 0.7rem;
  background: rgba(255, 122, 26, 0.07);
  border: 1px solid rgba(255, 122, 26, 0.18);
}
.rv-card__reply-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fdba74;
}
.rv-card__reply p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #a4a9b7; }

/* ── Bas de carte : tout le reste, sur une seule ligne discrete ──
   Une seule ligne, jamais deux. En `flex-wrap: wrap`, « View » basculait sous
   la date des que la carte se resserrait — donc sur certaines cartes de la
   grille et pas leurs voisines, ce qui desalignait les hauteurs. La ligne ne
   se coupe plus : c'est le libelle « Verified purchase », seul element
   vraiment compressible, qui cede en premier. */
.rv-card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #9aa0ae;
  white-space: nowrap;
}
.rv-card__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
}
.rv-card__verified {
  font-weight: 600;
  color: rgba(245, 247, 255, 0.72);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Le separateur appartient au libelle, donc il s'efface avec lui. */
.rv-card__verified::after {
  content: '·';
  margin-left: 7px;
  color: rgba(255, 255, 255, 0.22);
}
.rv-card__sep { color: rgba(255, 255, 255, 0.22); flex-shrink: 0; }
.rv-card__date { color: #6b7280; flex-shrink: 0; }

/* La mesure porte sur la carte, pas sur la fenetre : c'est la largeur de
   colonne qui contraint, et elle ne suit pas la fenetre lineairement. */
.rv-cell { container-type: inline-size; }
@container (max-width: 320px) {
  .rv-card__verified-x { display: none; }
}
@container (max-width: 264px) {
  .rv-card__verified { display: none; }
}

/* L'avatar ne sert que lorsqu'un vrai pseudo existe : petit, en bas. */
.rv-card__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}
.rv-card__name { font-weight: 600; color: rgba(245, 247, 255, 0.8); }

/* « View » pousse a droite ; la fleche avance au survol. */
.rv-card__view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  color: #9aa0ae;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.rv-card__view svg { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.rv-card__view:hover { color: #fdba74; }
.rv-card__view:hover svg { transform: translateX(3px); }

/*───────────────────────────────────────────────
  HALLOWEEN

  Tout le theme saisonnier vit ici : palette, decor et barre promo 5 %.
  `html:root` l'emporte sur le <style id="theme-styles"> du layout, qui est
  charge apres ce fichier — la couleur reste orange meme si le tableau de
  bord renvoie encore l'ancien bleu.
  Le balisage est dans layouts/master.njk, le comportement dans custom.js.
───────────────────────────────────────────────*/
html:root {
  --cl-accent: #ff7a1a;
  --cl-accent-rgb: 255, 122, 26;
  --cl-background-primary: #0a0510;
  --cl-background-primary-rgb: 10, 5, 16;
  --bs-font-sans-serif: 'Inter', 'Poppins', sans-serif;
  --hw-cream: #f6ece0;
  --hw-lavender: #c9a3ff;
  --hw-orange: #ff7a1a;
  --hw-orange-deep: #ea580c;
  --hw-purple: #8b5cf6;
  --hw-purple-rgb: 139, 92, 246;
  --hw-green: #a3e635;
}

body {
  background-color: var(--cl-background-primary);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(var(--hw-purple-rgb), 0.10), transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(255, 122, 26, 0.07), transparent 70%);
  background-attachment: fixed;
}

::selection { background: rgba(255, 122, 26, 0.35); color: #fff; }

.btn-primary {
  background: linear-gradient(135deg, var(--hw-orange), var(--hw-orange-deep)) !important;
  border-color: var(--hw-orange-deep) !important;
  color: #1a0b02 !important;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(255, 122, 26, 0.7);
}
.btn-primary:hover { filter: brightness(1.08); }

/* ── Decor fixe : jamais cliquable, toujours sous le contenu ──
   z-index negatif plutot qu'un z-index pose sur .flex-wrapper : ce dernier
   ferait de #app un contexte d'empilement, et les modales Bootstrap qui y
   vivent (connexion, recherche) passeraient SOUS leur voile, pose sur
   <body>. Resultat : un ecran sombre ou plus aucun clic ne porte. */
.hw-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hw-glow {
  position: absolute;
  left: 50%;
  bottom: -30vh;
  width: 120vw;
  height: 50vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(var(--hw-purple-rgb), 0.12), transparent 65%);
  filter: blur(20px);
  animation: hwFog 14s ease-in-out infinite alternate;
}
@keyframes hwFog {
  from { transform: translateX(-55%) scale(1); opacity: 0.7; }
  to   { transform: translateX(-45%) scale(1.1); opacity: 1; }
}

/* Toiles d'araignee dans les coins, en pur CSS. */
.hw-web {
  position: absolute;
  top: 0;
  width: 190px;
  height: 190px;
  opacity: 0.16;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 22px, rgba(255,255,255,0.9) 22px 23px),
    repeating-conic-gradient(from 90deg at 0 0, rgba(255,255,255,0.9) 0 0.6deg, transparent 0.6deg 15deg);
  -webkit-mask: radial-gradient(circle at 0 0, #000 40%, transparent 72%);
          mask: radial-gradient(circle at 0 0, #000 40%, transparent 72%);
}
.hw-web--left { left: 0; }
.hw-web--right { right: 0; transform: scaleX(-1); }

/* Araignee suspendue a son fil. */
.hw-spider {
  position: absolute;
  top: 0;
  right: 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  transform-origin: top center;
  animation: hwSpider 6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(var(--hw-purple-rgb), 0.6));
}
.hw-spider::before {
  content: '';
  width: 1px;
  height: 120px;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.35));
}
.hw-spider i { color: #2a2238; -webkit-text-stroke: 1px rgba(196, 181, 253, 0.55); }
@keyframes hwSpider {
  0%, 100% { transform: translateY(-40px) rotate(2deg); }
  50%      { transform: translateY(10px) rotate(-2deg); }
}

/* Chauves-souris : traversent l'ecran de gauche a droite en battant des ailes. */
.hw-bat {
  position: absolute;
  left: -80px;
  width: 64px;
  height: 32px;
  color: #4a3470;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.45)) drop-shadow(0 0 2px rgba(var(--hw-purple-rgb), 0.9));
  animation: hwFly 22s linear infinite, hwFlap 0.32s ease-in-out infinite alternate;
}
.hw-bat--0 { top: 14%; animation-delay: 0s, 0s;       animation-duration: 24s, 0.30s; }
.hw-bat--1 { top: 28%; animation-delay: -8s, -0.1s;   animation-duration: 30s, 0.36s; width: 46px; height: 23px; }
.hw-bat--2 { top: 46%; animation-delay: -15s, -0.2s;  animation-duration: 26s, 0.28s; }
.hw-bat--3 { top: 62%; animation-delay: -4s, -0.05s;  animation-duration: 34s, 0.40s; width: 40px; height: 20px; }
.hw-bat--4 { top: 20%; animation-delay: -20s, -0.15s; animation-duration: 28s, 0.33s; width: 54px; height: 27px; }
.hw-bat--5 { top: 75%; animation-delay: -11s, -0.25s; animation-duration: 38s, 0.38s; width: 36px; height: 18px; }
@keyframes hwFly {
  0%   { translate: 0 0; }
  25%  { translate: 30vw -40px; }
  50%  { translate: 60vw 20px; }
  75%  { translate: 90vw -30px; }
  100% { translate: calc(100vw + 160px) 0; }
}
@keyframes hwFlap {
  from { scale: 1 1; }
  to   { scale: 1 0.6; }
}

/* ── Barre promo 5 % : bas de l'ecran, a droite ── */
.hw-promo {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1040;   /* sous le voile des modales (1050) et le panier (1090) */
  display: flex;
  align-items: center;
  font-family: var(--bs-font-sans-serif);
  animation: hwPromoIn 0.6s cubic-bezier(.2,.8,.2,1) both;
}
.hw-promo[hidden] { display: none; }
@keyframes hwPromoIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.hw-promo__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  border: 1px solid rgba(255, 122, 26, 0.55);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 122, 26, 0.20), rgba(var(--hw-purple-rgb), 0.20)),
    rgba(14, 9, 20, 0.94);
  color: #fff;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -10px rgba(255, 122, 26, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), border-color 0.25s ease;
  animation: hwPulse 2.8s ease-in-out infinite;
}
.hw-promo__btn:hover { transform: translateY(-2px); border-color: var(--hw-orange); }
.hw-promo__btn:focus-visible { outline: 2px solid var(--hw-orange); outline-offset: 3px; }
@keyframes hwPulse {
  0%, 100% { box-shadow: 0 14px 40px -10px rgba(255, 122, 26, 0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%      { box-shadow: 0 14px 52px -6px rgba(255, 122, 26, 0.85), inset 0 1px 0 rgba(255,255,255,0.08); }
}

.hw-promo__icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 122, 26, 0.16);
  font-size: 24px;
  line-height: 1;
  animation: hwWobble 2.4s ease-in-out infinite;
}
@keyframes hwWobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg) scale(1.06); }
}

.hw-promo__text { display: flex; flex-direction: column; line-height: 1.2; }
.hw-promo__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdba74;
}
.hw-promo__title { font-size: 15px; font-weight: 500; color: #f5f3ff; white-space: nowrap; }
.hw-promo__title strong { color: var(--hw-orange); font-weight: 800; }

.hw-promo__code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding: 7px 10px;
  border: 1px dashed rgba(253, 186, 116, 0.7);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.hw-promo__code i { font-size: 12px; color: #fdba74; }
.hw-promo.is-copied .hw-promo__code { border-style: solid; border-color: var(--hw-green); color: var(--hw-green); }
.hw-promo.is-copied .hw-promo__code i { color: var(--hw-green); }

.hw-promo__close {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: #1a1324;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.hw-promo__close:hover { color: #fff; background: #2a1f38; }

@media (max-width: 576px) {
  .hw-promo { left: 12px; right: 12px; bottom: 12px; }
  .hw-promo__btn { width: 100%; gap: 10px; }
  .hw-promo__code { margin-left: auto; }
  .hw-promo__title { font-size: 14px; }
  /* La notification d'achat monte au-dessus de la barre. */
  body.has-hw-promo #recent-purchase-notification { bottom: 90px; }
  .hw-web { width: 120px; height: 120px; }
  .hw-spider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-spider, .hw-glow, .hw-promo, .hw-promo__btn, .hw-promo__icon { animation: none !important; }
  .hw-bat { display: none; }
}

/*───────────────────────────────────────────────
  HALLOWEEN — SCENE

  Coulure sous le menu, ciel du hero (lune, etoiles, brume, braises),
  cimetiere aux citrouilles, bandeau defilant, fantomes, et typographie
  des titres : Inter tres gras, fin de phrase en Creepster.
───────────────────────────────────────────────*/

/* ── Typographie : titres serres, couleur creme ── */
#app section h2:not(.accordion-header) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--hw-cream) !important;
}
.hw-accent {
  display: inline-block;
  padding: 0 0.04em 0.06em;
  font-family: 'Creepster', 'Inter', cursive;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #ffc46b 0%, #ff8a1f 48%, #c2410c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 122, 26, 0.35));
}
.hero .hw-accent { font-size: 1.04em; }

/* ── Sur-titres : orange, majuscules espacees, chauve-souris devant ── */
.eyebrow, .demo-eyebrow, .section__eyebrow, .ps-eyebrow, .page-head__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: #ff8a1f !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}
.eyebrow::before, .section__eyebrow::before, .ps-eyebrow::before, .page-head__eyebrow::before {
  content: '';
  width: 22px;
  height: 11px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 9c-1.6-3.4-3.8-5.6-3.8-5.6l-.9 4.6C21.4 2.6 11.6 1.6 0 6.6c6.2 2 9.4 6.2 9.2 11.6 4-3.2 8.4-3.2 11.6 1 .8-4 4.6-6.2 8-5.2L32 18l3.2-4c3.4-1 7.2 1.2 8 5.2 3.2-4.2 7.6-4.2 11.6-1-.2-5.4 3-9.6 9.2-11.6-11.6-5-21.4-4-27.3 1.4l-.9-4.6S33.6 5.6 32 9z'/%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 64 32'%3E%3Cpath d='M32 9c-1.6-3.4-3.8-5.6-3.8-5.6l-.9 4.6C21.4 2.6 11.6 1.6 0 6.6c6.2 2 9.4 6.2 9.2 11.6 4-3.2 8.4-3.2 11.6 1 .8-4 4.6-6.2 8-5.2L32 18l3.2-4c3.4-1 7.2 1.2 8 5.2 3.2-4.2 7.6-4.2 11.6-1-.2-5.4 3-9.6 9.2-11.6-11.6-5-21.4-4-27.3 1.4l-.9-4.6S33.6 5.6 32 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Coulure orange sous le menu ── */
.hw-drip {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  margin-top: -1px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='22' viewBox='0 0 240 22'%3E%3Cpath fill='%23ff7a1a' d='M0 0h240v3H0zM16 3h4v5a2 2 0 0 1-4 0zM50 3h5v11a2.5 2.5 0 0 1-5 0zM88 3h3v3a1.5 1.5 0 0 1-3 0zM124 3h6v15a3 3 0 0 1-6 0zM166 3h4v7a2 2 0 0 1-4 0zM200 3h5v9a2.5 2.5 0 0 1-5 0zM228 3h3v4a1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E") repeat-x top left / 240px 22px;
  filter: drop-shadow(0 0 5px rgba(255, 122, 26, 0.85)) drop-shadow(0 0 14px rgba(255, 122, 26, 0.35));
  transition: left 0.5s cubic-bezier(.22,.61,.36,1), right 0.5s cubic-bezier(.22,.61,.36,1);
}
.navbar.nav-scrolled .hw-drip { left: 36px; right: 36px; }
.hw-drop {
  position: absolute;
  top: 6px;
  left: var(--x);
  width: 5px;
  height: 7px;
  border-radius: 50% 50% 55% 55% / 40% 40% 60% 60%;
  background: #ff8a1f;
  opacity: 0;
  animation: hwDrop 4.6s cubic-bezier(.55, 0, 1, .45) infinite;
  animation-delay: var(--d);
}
@keyframes hwDrop {
  0%, 55% { transform: translateY(0) scale(0.4); opacity: 0; }
  62%     { transform: translateY(4px) scale(1); opacity: 1; }
  100%    { transform: translateY(70px) scale(0.9); opacity: 0; }
}

/* ── Ciel du hero ── */
.hw-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hw-stars {
  position: absolute;
  inset: 0 0 35% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 12%, #ffe9c4 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 38%, #e9d5ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 79% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 10%, #ffe9c4 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 58%, #fff 50%, transparent 51%);
  animation: hwTwinkle 5s ease-in-out infinite alternate;
}
@keyframes hwTwinkle { from { opacity: 0.45; } to { opacity: 1; } }

.hw-moon {
  position: absolute;
  top: 9%;
  right: 7%;
  width: clamp(96px, 13vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffaf0 0%, #f6e7bf 42%, #e0c98f 72%, #bb9f62 100%);
  box-shadow:
    0 0 40px 6px rgba(255, 238, 190, 0.45),
    0 0 120px 40px rgba(255, 200, 120, 0.16),
    inset -14px -10px 30px rgba(120, 90, 40, 0.35);
  animation: hwMoon 8s ease-in-out infinite alternate;
}
.hw-moon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 62%, rgba(150, 118, 66, 0.38) 0 9%, transparent 10%),
    radial-gradient(circle at 63% 28%, rgba(150, 118, 66, 0.32) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 66%, rgba(150, 118, 66, 0.28) 0 12%, transparent 13%),
    radial-gradient(circle at 44% 22%, rgba(150, 118, 66, 0.22) 0 4%, transparent 5%),
    radial-gradient(circle at 52% 82%, rgba(150, 118, 66, 0.2) 0 5%, transparent 6%);
}
@keyframes hwMoon {
  from { box-shadow: 0 0 40px 6px rgba(255, 238, 190, 0.4), 0 0 120px 40px rgba(255, 200, 120, 0.12), inset -14px -10px 30px rgba(120, 90, 40, 0.35); }
  to   { box-shadow: 0 0 56px 10px rgba(255, 238, 190, 0.55), 0 0 160px 56px rgba(255, 200, 120, 0.2), inset -14px -10px 30px rgba(120, 90, 40, 0.35); }
}
.hw-moon__bat {
  position: absolute;
  left: 26%;
  top: 40%;
  width: 46%;
  height: 23%;
  color: #140b1f;
  animation: hwFlap 0.34s ease-in-out infinite alternate, hwMoonBat 7s ease-in-out infinite;
}
@keyframes hwMoonBat {
  0%, 100% { translate: -6% 0; }
  50%      { translate: 10% -14%; }
}

.hw-fog {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 34%;
  bottom: 4%;
  background:
    radial-gradient(ellipse 30% 50% at 20% 60%, rgba(201, 163, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 25% 45% at 55% 50%, rgba(255, 255, 255, 0.08), transparent 70%),
    radial-gradient(ellipse 30% 55% at 85% 60%, rgba(201, 163, 255, 0.12), transparent 70%);
  filter: blur(10px);
  animation: hwDrift 26s ease-in-out infinite alternate;
}
.hw-fog--2 { bottom: 12%; opacity: 0.7; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes hwDrift {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

.hw-ember {
  position: absolute;
  bottom: 12%;
  left: var(--x);
  width: var(--z);
  height: var(--z);
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 6px 2px rgba(255, 140, 30, 0.8);
  opacity: 0;
  animation: hwEmber var(--t) ease-in infinite;
  animation-delay: var(--d);
}
@keyframes hwEmber {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(18px, -28vh); }
  100% { transform: translate(-12px, -62vh); opacity: 0; }
}

/* ── Cimetiere : pied du hero et haut du footer ── */
.hw-graveyard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: clamp(110px, 14vw, 200px);
  pointer-events: none;
}
.hw-graveyard__ground { display: block; width: 100%; height: 100%; }
.hw-graveyard--footer {
  position: relative;
  margin-top: 40px;
  margin-bottom: -1px;
  height: clamp(90px, 11vw, 160px);
}
.hw-graveyard--footer .hw-graveyard__ground { opacity: 0.9; }

.hw-pumpkin {
  position: absolute;
  width: clamp(30px, 3.4vw, 48px);
  height: clamp(26px, 3vw, 42px);
  filter: drop-shadow(0 0 10px rgba(255, 140, 30, 0.75)) drop-shadow(0 0 26px rgba(255, 100, 0, 0.35));
  animation: hwFlicker 3.2s ease-in-out infinite;
}
.hw-pumpkin--1 { left: 14%; bottom: 14%; }
.hw-pumpkin--2 { left: 41%; bottom: 20%; animation-delay: -1.1s; width: clamp(24px, 2.6vw, 38px); height: clamp(21px, 2.3vw, 33px); }
.hw-pumpkin--3 { left: 64%; bottom: 13%; animation-delay: -2.2s; }
.hw-pumpkin--4 { left: 88%; bottom: 17%; animation-delay: -0.6s; width: clamp(26px, 2.8vw, 40px); height: clamp(23px, 2.5vw, 35px); }
@keyframes hwFlicker {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 140, 30, 0.75)) drop-shadow(0 0 26px rgba(255, 100, 0, 0.35)); }
  45%      { filter: drop-shadow(0 0 6px rgba(255, 140, 30, 0.55)) drop-shadow(0 0 16px rgba(255, 100, 0, 0.2)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 160, 40, 0.95)) drop-shadow(0 0 34px rgba(255, 100, 0, 0.45)); }
}

/* ── Bandeau defilant ── */
.hw-ticker {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding: 15px 0;
  background: #0a0510;
  border-top: 1px solid rgba(255, 122, 26, 0.16);
  border-bottom: 1px solid rgba(255, 122, 26, 0.16);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hw-ticker__track {
  display: flex;
  width: max-content;
  animation: hwMarquee 42s linear infinite;
}
.hw-ticker:hover .hw-ticker__track { animation-play-state: paused; }
.hw-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--hw-cream);
  white-space: nowrap;
}
.hw-ticker__item svg { width: 18px; height: 16px; filter: drop-shadow(0 0 5px rgba(255, 140, 30, 0.6)); }
@keyframes hwMarquee { to { transform: translateX(-50%); } }

/* ── Fantomes ── */
.hw-ghost {
  position: absolute;
  width: 56px;
  height: 67px;
  opacity: 0.16;
  filter: drop-shadow(0 0 18px rgba(201, 163, 255, 0.6));
  animation: hwGhost 9s ease-in-out infinite;
}
.hw-ghost--1 { left: 4%; top: 58%; }
.hw-ghost--2 { right: 5%; top: 38%; width: 44px; height: 53px; animation-delay: -4.5s; animation-duration: 11s; }
@keyframes hwGhost {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: 0.1; }
  50%      { transform: translate(14px, -26px) rotate(4deg); opacity: 0.22; }
}

/* ── Cartes : lueur de citrouille au survol ── */
a.card.product-card,
.rv-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
a.card.product-card:hover {
  border-color: rgba(255, 122, 26, 0.5) !important;
  box-shadow: 0 22px 60px -24px rgba(255, 122, 26, 0.6), 0 0 0 1px rgba(255, 122, 26, 0.2) !important;
}

@media (max-width: 768px) {
  .hw-ghost { display: none; }
  .hw-moon { top: 18px; right: 18px; width: 72px; opacity: 0.9; }
  .hw-ticker__item { font-size: 13px; padding: 0 20px; }
}

/* Sur telephone, la lune garde le haut du hero pour elle seule. */
@media (max-width: 576px) {
  .hero .container { padding-top: 6.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-drop, .hw-ember, .hw-ghost { display: none; }
  .hw-stars, .hw-moon, .hw-moon__bat, .hw-fog, .hw-pumpkin, .hw-ticker__track { animation: none !important; }
}