/* LP Halloween Sale 2026 (SPOOKY26), 4 langues. Préfixe hw-.
   Habillage repris de la bannière « satin » du hero du site (Downloads/KISSKISS-halloween-satin, copiée et recadrée dans
   assets/img/halloween/ ; voir briefs/halloween.md). Couleurs prélevées sur les masters PNG (PIL) :
   nuit #130C1C (fond), #1B1229 (fond clair), halo #271B3E, satin #432363 / #8A4BB3, orange #FF7A1A (sur-titre, pointillés,
   bouton), crème #FBF1E9 (« -15 % », titres, code), mention #B1A8A8. Texte sur orange : #130C1C (contraste > 7:1).
   Sur fond clair : orange foncé #C2410C pour les petits textes (contraste AA), crème #FBF1E9 / #FDF9F5 pour les fonds.
   Gris du live (#171717, #525252, #737373), étoiles du site. Police Inter (site). Ruptures : 768 px, 1280 px. */

/* ---------- ouverture : prolongement de la bannière ---------- */
.hw-hero { position: relative; overflow: hidden; color: #FBF1E9; background: #130C1C;
  background-image: radial-gradient(70% 45% at 50% 18%, #271B3E 0%, rgba(39,27,62,0) 75%), linear-gradient(180deg, #130C1C 0%, #1B1229 55%, #130C1C 100%); }
.hw-hero-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 330px; display: block; pointer-events: none; }
.hw-hero-bg img { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-56%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); }
.hw-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,12,28,.35) 0%, rgba(19,12,28,0) 60%, rgba(19,12,28,.3) 100%); }
@media (min-width: 768px) { .hw-hero-bg { height: 440px; } }
.hw-hero-in { position: relative; text-align: center; padding: 32px 0 250px; }
@media (min-width: 768px) { .hw-hero-in { max-width: 620px; margin: 0 auto; padding: 48px 0 300px; } }
@media (min-width: 1280px) {
  .hw-hero { background-image: radial-gradient(45% 70% at 22% 40%, #271B3E 0%, rgba(39,27,62,0) 75%), linear-gradient(90deg, #1B1229 0%, #130C1C 60%); }
  .hw-hero-bg { left: auto; top: 0; height: auto; width: 72%; }
  .hw-hero-bg img { left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0,0,0,.4) 32%, #000 58%); mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0,0,0,.4) 32%, #000 58%); }
  .hw-hero-bg::after { background: linear-gradient(0deg, rgba(19,12,28,.45) 0%, rgba(19,12,28,0) 30%); }
  .hw-hero-in { text-align: left; max-width: 720px; margin: 0; padding: 56px 0 60px; }
}
.hw-kicker { display: block; color: #FF7A1A; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: .38em; margin-right: -.38em;
  text-transform: uppercase; text-shadow: 0 0 18px rgba(255,122,26,.45); }
@media (min-width: 1280px) { .hw-kicker { font-size: 19px; line-height: 26px; margin-right: 0; } }
.hw-pct { display: block; margin-top: 6px; color: #FBF1E9; font-size: 112px; line-height: 104px; font-weight: 800; letter-spacing: -.045em;
  text-shadow: 0 0 60px rgba(138,75,179,.35); }
@media (min-width: 768px) { .hw-pct { font-size: 148px; line-height: 136px; } }
@media (min-width: 1280px) { .hw-pct { font-size: 168px; line-height: 152px; margin-left: -6px; } }
.hw-sub { display: block; margin-top: 4px; color: #FBF1E9; font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
@media (min-width: 768px) { .hw-sub { font-size: 40px; line-height: 44px; } }
@media (min-width: 1280px) { .hw-sub { font-size: 46px; line-height: 50px; } }
.hw-lead { margin: 14px auto 0; max-width: 520px; font-size: 16px; line-height: 24px; color: rgba(251,241,233,.82); }
@media (min-width: 1280px) { .hw-lead { margin-left: 0; } }
.hw-lead em { font-style: normal; font-weight: 600; color: #FF7A1A; }
.hw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* coupon (cadre en pointillés orange sur fond sombre, comme la bannière) + CTA */
.hw-offer { margin-top: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (min-width: 768px) { .hw-offer { flex-direction: row; flex-wrap: wrap; justify-content: center; } }
@media (min-width: 1280px) { .hw-offer { justify-content: flex-start; flex-wrap: nowrap; } }
.hw-coupon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 8px 8px 8px 16px; border: 2px dashed #FF7A1A;
  border-radius: 6px; background: rgba(18,12,27,.88); }
.hw-coupon-code { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
@media (max-width: 767px) { .hw-coupon { justify-content: center; padding: 12px; } .hw-coupon .hw-copy { width: 100%; } }
.hw-coupon-label { font-size: 16px; line-height: 20px; color: #FBF1E9; }
.hw-code { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: .08em; color: #FBF1E9; user-select: all; -webkit-user-select: all; }
@media (min-width: 768px) { .hw-code { font-size: 32px; line-height: 40px; } }

.hw-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 4px; cursor: pointer;
  font-size: 15px; line-height: 20px; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.hw-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.hw-copy-ghost { background: transparent; color: #FBF1E9; border: 1px solid rgba(251,241,233,.38); }
.hw-copy-ghost:hover { background: #FBF1E9; color: #130C1C; border-color: #FBF1E9; }
.hw-copy[data-hw-done] { background: #059669; border-color: #059669; color: #fff; }

.hw-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border-radius: 6px;
  background: #FF7A1A; color: #130C1C; border: 1px solid #FF7A1A; font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 32px rgba(255,122,26,.35); transition: background-color .2s, box-shadow .2s; }
.hw-cta:hover { background: #FF9443; box-shadow: 0 0 40px rgba(255,122,26,.55); }

.hw-fine { margin: 14px auto 0; max-width: 560px; font-size: 13px; line-height: 19px; color: #B1A8A8; }
@media (min-width: 1280px) { .hw-fine { margin-left: 0; max-width: 600px; } }

/* compte à rebours */
.hw-cd { margin: 22px auto 0; max-width: 440px; }
@media (min-width: 1280px) { .hw-hero .hw-cd { margin-left: 0; } }
.hw-cd-title { font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #FF7A1A; text-align: center; }
@media (min-width: 1280px) { .hw-hero .hw-cd-title { text-align: left; } }
.hw-cd-row { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hw-cd-box { border-radius: 8px; background: rgba(19,12,28,.72); border: 1px solid rgba(251,241,233,.16); padding: 8px 4px 6px; text-align: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hw-cd-box b { display: block; font-size: 30px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; color: #FBF1E9; }
.hw-cd-box span { display: block; font-size: 12px; line-height: 16px; color: #B1A8A8; }
@media (min-width: 1280px) { .hw-cd-box b { font-size: 34px; line-height: 42px; } }
.hw-cd-done { margin-top: 8px; padding: 14px 16px; border-radius: 8px; background: rgba(19,12,28,.72); border: 1px solid rgba(251,241,233,.16); text-align: center; font-weight: 600; color: #FBF1E9; }

.hw-ticks { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; line-height: 20px; color: rgba(251,241,233,.9); }
@media (min-width: 1280px) { .hw-ticks { justify-content: flex-start; } }
.hw-ticks span { display: inline-flex; align-items: center; gap: 8px; }
.hw-ticks svg { width: 16px; height: 16px; flex: none; }

/* bandeau défilant (piste dupliquée, translateX(-50 %) : boucle sans à-coup sur toute la largeur) */
.hw-band { overflow: hidden; background: #FF7A1A; color: #130C1C; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; }
.hw-band-track { display: flex; width: max-content; animation: hw-band 40s linear infinite; }
.hw-band span { flex: none; }
.hw-band i, .hw-band span::after { font-style: normal; color: #130C1C; opacity: .55; padding: 0 20px; }
.hw-band span::after { content: "·"; }
@keyframes hw-band { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hw-band { text-align: center; }
  .hw-band-track { animation: none; width: auto; display: block; }
  .hw-band span + span { display: none; }
  .hw-band span::after { content: none; }
}

/* sections claires */
.hw-sec { padding: 40px 0; }
@media (min-width: 1280px) { .hw-sec { padding: 64px 0; } }
.hw-soft { background: #FDF9F5; }
.hw-headline { max-width: 760px; margin-bottom: 24px; }
@media (min-width: 1280px) { .hw-headline { margin-bottom: 32px; } }
.hw-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #C2410C; }
.hw-h2 { margin-top: 8px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.025em; color: #130C1C; }
@media (min-width: 1280px) { .hw-h2 { font-size: 40px; line-height: 46px; } }
.hw-h2 em { font-style: normal; color: #C2410C; white-space: nowrap; }
.hw-h3 { margin-top: 40px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; color: #130C1C; }
.hw-lede { margin-top: 10px; font-size: 17px; line-height: 26px; color: #525252; }
.hw-chip { display: inline-flex; align-items: center; border: 2px dashed #FF7A1A; border-radius: 4px; padding: 0 8px; background: #130C1C;
  color: #FBF1E9; font-weight: 800; letter-spacing: .06em; font-size: 13px; line-height: 22px; white-space: nowrap; }

/* navigation rapide par catégories */
.hw-nav { padding: 28px 0 8px; }
@media (min-width: 1280px) { .hw-nav { padding: 40px 0 8px; } }
.hw-nav-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.hw-nav-head h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; color: #130C1C; }
.hw-nav-head p { font-size: 14px; line-height: 20px; color: #525252; }
.hw-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-cats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 768px) { .hw-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hw-cats li:last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 1280px) { .hw-cats { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } }
.hw-cats a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 10px 14px 10px 16px;
  border-radius: 8px; background: #130C1C; border: 1px solid #130C1C; color: #FBF1E9; font-size: 15px; line-height: 20px; font-weight: 600;
  transition: background-color .2s, color .2s, border-color .2s; }
.hw-cats a::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid #FF7A1A; border-right: 2px solid #FF7A1A; transform: rotate(45deg); margin-right: 4px; }
.hw-cats a:hover { background: #FF7A1A; border-color: #FF7A1A; color: #130C1C; }
.hw-cats a:hover::after { border-color: #130C1C; }

/* grille des meilleures ventes (cartes claires du live) */
.hw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .hw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) { .hw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.hw-grid > div { padding: 10px !important; background: #fff; }
.hw-grid img { min-width: 0 !important; min-height: 0 !important; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.hw-grid .text-m-bold { font-size: 14px; line-height: 20px; }
.hw-grid .hw-tag { margin-top: auto; }
.hw-tag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 6px 8px; border-radius: 4px;
  background: #FBF1E9; color: #9A3412; font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.hw-tag .hw-chip { font-size: 12px; line-height: 18px; padding: 0 6px; }
/* bouton panier : orange de la bannière, texte nuit, capitales (même bouton que « Profiter de l'offre ») */
.hw-add { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid #FF7A1A;
  background: #FF7A1A; color: #130C1C; font-size: 14px; line-height: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s; }
.hw-add:hover { background: #130C1C; border-color: #130C1C; color: #FBF1E9; }
.hw-grid .hw-add { margin-top: 8px; min-height: 42px; font-size: 13px; padding: 0 8px; }

/* avis */
.hw-reviews { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .hw-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hw-review { padding: 18px 20px; border-radius: 12px; background: #FDF9F5; border: 1px solid #F3E7DB; font-size: 15px; line-height: 22px; color: #171717; }
.hw-review b { display: block; margin: 8px 0 4px; }
.hw-review span { display: block; margin-top: 8px; font-size: 13px; line-height: 18px; color: #737373; }

/* calendriers : -15 % avec SPOOKY26 jusqu'au 31.10 (section sombre, halo violet de la bannière) */
.hw-cal { color: #FBF1E9; background: #130C1C; background-image: radial-gradient(60% 70% at 85% 0%, #432363 0%, rgba(67,35,99,0) 70%), radial-gradient(50% 60% at 0% 100%, #271B3E 0%, rgba(39,27,62,0) 70%); }
.hw-cal .hw-eyebrow { color: #FF7A1A; }
.hw-cal .hw-h2 { color: #FBF1E9; }
.hw-cal .hw-h2 em { color: #FF7A1A; }
.hw-cal .hw-lede { color: rgba(251,241,233,.84); }
.hw-cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .hw-cal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* deux calendriers (23.10.2026) : 2 colonnes, cartes en largeur (image à gauche) dès 1024 px */
@media (min-width: 768px) { .hw-cal-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .hw-cal-duo { gap: 24px; }
  .hw-cal-duo .hw-cal-card { flex-direction: row; }
  .hw-cal-duo .hw-cal-img { flex: 0 0 44%; aspect-ratio: auto; min-height: 280px; }
  .hw-cal-duo .hw-cal-body { justify-content: center; padding: 24px 24px 24px 20px; }
}
.hw-cal-card { display: flex; flex-direction: column; border-radius: 12px; background: #fff; color: #171717; overflow: hidden; box-shadow: 0 16px 36px -16px rgba(0,0,0,.6); }
.hw-cal-img { display: block; position: relative; background: radial-gradient(70% 70% at 50% 45%, #fff 0%, #fff 45%, #f5f5f5 100%); aspect-ratio: 4 / 3; }
.hw-cal-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.hw-cal-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.hw-cal-name { font-size: 18px; line-height: 24px; font-weight: 700; }
.hw-cal-name a:hover { color: #C2410C; }
.hw-cal-price { margin-top: 8px; font-size: 22px; line-height: 28px; font-weight: 700; color: #171717; }
.hw-cal-price s { margin-left: 8px; font-size: 16px; font-weight: 400; color: #737373; } /* prix normal barré (29.10 au 1.11) */
.hw-cal-body .hw-tag { margin-top: 10px; }
.hw-cal-body .hw-add { margin-top: 14px; }
.hw-cal-more { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14px; line-height: 20px; color: #B1A8A8; }
.hw-cal-more a { color: #FBF1E9; font-weight: 600; text-decoration: underline; text-decoration-color: #FF7A1A; text-underline-offset: 3px; }

/* étapes */
.hw-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .hw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hw-step { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; background: #fff; border: 1px solid #F3E7DB; }
.hw-step-n { flex: none; width: 48px; height: 48px; border-radius: 999px; background: #130C1C; color: #FBF1E9; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; }
.hw-step:last-child .hw-step-n { background: #FF7A1A; color: #130C1C; }
.hw-step h3 { font-size: 17px; line-height: 24px; font-weight: 700; color: #130C1C; }
.hw-step p { font-size: 14px; line-height: 20px; color: #525252; }

/* réassurance */
.hw-reas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; border-radius: 12px; background: #FDF9F5; }
@media (min-width: 768px) { .hw-reas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .hw-reas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 32px; } }
.hw-reas > div { display: flex; gap: 14px; align-items: flex-start; }
.hw-reas svg { width: 28px; height: 28px; flex: none; }

/* dernier appel : bannière en miniature */
.hw-final-sec { padding-bottom: 48px; } @media (min-width: 1280px) { .hw-final-sec { padding-bottom: 72px; } }
.hw-final { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; padding: 36px 20px; text-align: center; color: #FBF1E9; background: #130C1C;
  background-image: radial-gradient(70% 60% at 50% 0%, #271B3E 0%, rgba(39,27,62,0) 75%); }
@media (min-width: 1280px) { .hw-final { padding: 56px 40px; } }
.hw-final-bg { position: absolute; z-index: -1; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%); }
@media (min-width: 1280px) { .hw-final-bg { width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); } }
.hw-final h2 { color: #FBF1E9; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; }
@media (min-width: 1280px) { .hw-final h2 { font-size: 40px; line-height: 46px; } }
.hw-final p { margin-top: 8px; color: rgba(251,241,233,.84); font-size: 16px; line-height: 24px; }
.hw-final-code { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 16px; padding: 8px 8px 8px 16px; border-radius: 6px; max-width: 100%;
  border: 2px dashed #FF7A1A; background: rgba(18,12,27,.88); }
.hw-final-code b { color: #FBF1E9; font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
@media (min-width: 768px) { .hw-final-code b { font-size: 32px; line-height: 40px; } }
@media (max-width: 767px) { .hw-final-code { gap: 8px; padding: 6px 6px 6px 12px; } .hw-final-code .hw-coupon-label { display: none; } .hw-final-code b { font-size: 24px; line-height: 32px; } .hw-final-code .hw-copy { padding: 0 12px; } }
.hw-final .hw-cd { max-width: 420px; margin: 22px auto 0; }
.hw-cond { margin: 16px auto 0; max-width: 560px; font-size: 13px; line-height: 19px; color: #B1A8A8; }

/* barre collante mobile */
.hw-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #130C1C; border-top: 1px solid #432363; box-shadow: 0 -6px 18px rgba(0,0,0,.25);
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.hw-sticky[data-hw-show] { transform: none; visibility: visible; transition: transform .25s ease; }
.hw-sticky > * { flex: none; }
.hw-sticky .hw-chip { font-size: 15px; line-height: 40px; padding: 0 8px; }
.hw-sticky .hw-copy { padding: 0 12px; }
.hw-sticky .hw-cta { min-height: 44px; padding: 0 14px; font-size: 14px; margin-left: auto; box-shadow: none; }
@media (min-width: 1280px) { .hw-sticky { display: none; } }
@media (max-width: 1279px) { body { padding-bottom: 68px; } }

/* offre terminée : plus de bouton copier ni de barre collante */
[data-hw-ended] .hw-copy, [data-hw-ended] .hw-sticky { display: none; }
@media (prefers-reduced-motion: reduce) { .hw-sticky { transition: none; } }
.hw-final h2 sup { text-transform: none; }