/* PRO HD — CAMPAGNES : HABILLAGE « HALLOWEEN »
   Fichier GÉNÉRÉ par halloween-2026/module/batir-habillage.py à partir de la maquette
   validée (maquette/hw.css). Retoucher la maquette, puis relancer le script. */
/* ==========================================================================
   HABILLAGE HALLOWEEN PRO HD — MAQUETTE DU 05/10/2026
   Trois temps : prep (19-25/10), fete (26/10-1/11), apres (2-6/11).
   Tout est dessiné en SVG ou en CSS : aucune image à produire.
   Charte : bleu Pro HD #0C5DA2, bleu clair #67C6E7, encre #22303F, Rubik.
   L'orange est le complémentaire du bleu : c'est lui qui fait « Halloween »
   sans sortir de la charte (pas de violet, contrairement à Raja et Würth).
   ========================================================================== */

:root {
  --hw-nuit: #071a31;
  --hw-nuit-2: #0c2a4d;
  --hw-nuit-3: #12406f;
  --hw-bleu: #0C5DA2;
  --hw-ciel: #67C6E7;
  --hw-orange: #ff7a1a;
  --hw-orange-2: #ffa24a;
  --hw-jaune: #ffd45c;
  --hw-encre: #22303F;
  --hw-sil: #04101f;
  --hw-toile: #9fb4c9;
}

/* ---------- Généralités ---------- */
.hw-deco { position: absolute; pointer-events: none; z-index: 4; }
.hw-deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hw-cache .hw-deco, .hw-cache .hw-slide, .hw-cache .hw-annonce { opacity: 0 !important; }
.hw-deco, .hw-slide, .hw-annonce { transition: opacity .9s ease; }

/* ---------- Le tremblement et la coupure de courant ---------- */
@keyframes hw-tremble {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-7px, 2px) rotate(-.5deg); }
  20% { transform: translate(6px, -3px) rotate(.45deg); }
  30% { transform: translate(-6px, 3px) rotate(-.35deg); }
  40% { transform: translate(5px, -2px) rotate(.3deg); }
  50% { transform: translate(-4px, 2px) rotate(-.2deg); }
  60% { transform: translate(3px, -1px) rotate(.15deg); }
  75% { transform: translate(-2px, 1px) rotate(0); }
  90% { transform: translate(1px, 0) rotate(0); }
}
.hw-tremble { animation: hw-tremble .85s cubic-bezier(.36,.07,.19,.97) both; }

#hw-nuit {
  position: fixed; inset: 0; z-index: 2147480000; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(7,26,49,.55), rgba(2,8,18,.92));
}
/* Une seule baisse de lumière, pas de clignotement (seuil des trois flashs par seconde). */
@keyframes hw-coupure { 0% { opacity: 0; } 22% { opacity: .82; } 55% { opacity: .82; } 100% { opacity: 0; } }
#hw-nuit.-actif { animation: hw-coupure 1.5s ease-in-out both; }

/* ---------- Toiles d'araignée ---------- */
.hw-toile { color: var(--hw-toile); }
.hw-toile.-claire { color: rgba(255,255,255,.75); }
.hw-toile path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hw-tisse .hw-toile path { animation: hw-tisse 2.6s ease-out both; }
@keyframes hw-tisse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hw-toile.-hd { transform: scaleX(-1); }
.hw-toile.-bg { transform: scaleY(-1); }
.hw-toile.-bd { transform: scale(-1, -1); }

/* ---------- Araignée au bout de son fil ---------- */
.hw-araignee { width: 26px; }
.hw-araignee .hw-fil { position: absolute; left: 50%; bottom: 30px; width: 1px; height: 600px; background: rgba(159,180,201,.9); }
.hw-araignee.-claire .hw-fil { background: rgba(255,255,255,.8); }
.hw-araignee svg { width: 26px; height: 32px; position: relative; }
@keyframes hw-yoyo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(46px); } }
.hw-araignee { animation: hw-yoyo 7s ease-in-out infinite; }

/* ---------- Citrouilles ---------- */
.hw-citrouille.-allumee { filter: drop-shadow(0 0 10px rgba(255,140,40,.55)); }
@keyframes hw-flamme { 0%, 100% { opacity: 1; } 40% { opacity: .78; } 60% { opacity: .95; } 80% { opacity: .82; } }
.hw-citrouille.-allumee .hw-visage { animation: hw-flamme 2.8s infinite; }
@keyframes hw-pop { 0% { transform: scale(.2) translateY(30px); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.hw-tisse .hw-citrouille { animation: hw-pop .7s cubic-bezier(.2,.9,.3,1.3) both; }

/* ---------- Yeux dans le noir (préparation) ---------- */
.hw-yeux span { position: absolute; width: 9px; height: 6px; border-radius: 50%; background: var(--hw-jaune);
  box-shadow: 0 0 8px 2px rgba(255,212,92,.7); animation: hw-cligne 5s infinite; }
.hw-yeux span + span { left: 15px; }
@keyframes hw-cligne { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.hw-yeux.-b span { animation-delay: 1.7s; background: #ff9b4a; box-shadow: 0 0 8px 2px rgba(255,155,74,.7); }

/* ---------- Chauves-souris ---------- */
.hw-vol { position: fixed; z-index: 2147470000; pointer-events: none; top: 0; left: 0; width: 68px; height: 35px; }
.hw-vol .hw-cs { width: 100%; height: 100%; animation: hw-onde 1.1s ease-in-out infinite alternate; }
.hw-vol svg { animation: hw-bat .22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes hw-bat { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes hw-onde { from { transform: translateY(-14px); } to { transform: translateY(14px); } }

/* ---------- Brume ---------- */
.hw-brume { left: 0; right: 0; bottom: 0; height: 46%;
  background:
    radial-gradient(ellipse 30% 60% at 20% 100%, rgba(214,228,240,.55), transparent 70%),
    radial-gradient(ellipse 35% 55% at 60% 100%, rgba(214,228,240,.45), transparent 70%),
    radial-gradient(ellipse 30% 60% at 95% 100%, rgba(214,228,240,.5), transparent 70%);
  background-size: 200% 100%; animation: hw-derive 26s linear infinite alternate; }
@keyframes hw-derive { from { background-position: 0 0; } to { background-position: -60% 0; } }

/* ---------- Guirlande de fanions (fête) ---------- */
.hw-guirlande { left: 0; right: 0; top: 0; height: 34px; z-index: 7; }

/* ---------- Bandeau d'annonce (en haut de page) ---------- */
html[data-hw] .o-header__announce { position: relative; overflow: hidden; }
html[data-hw] .o-header__announce:not(.-bienvenue) .m-header__announceInner { display: none !important; }
html[data-hw] .o-header__announce.-bienvenue .hw-annonce { display: none; }
@keyframes hw-entre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html[data-hw] .o-header__announce > .m-header__announceInner, html[data-hw] .o-header__announce > .hw-annonce { animation: hw-entre .5s ease both; }
.hw-annonce { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding: 0 16px;
  font: 500 14px/1.3 Rubik, sans-serif; color: #fff; letter-spacing: .01em; position: relative; z-index: 2; text-align: center; }
.hw-annonce strong { color: var(--hw-orange-2); font-weight: 700; }
.hw-annonce .hw-compte { font-variant-numeric: tabular-nums; background: rgba(255,255,255,.12); border-radius: 999px; padding: 3px 10px; font-weight: 600; white-space: nowrap; }
.hw-annonce .-court { display: none; }
.hw-seul-tel { display: none; }
html[data-hw="prep"] .o-header__announce:not(.-bienvenue),
html[data-hw="fete"] .o-header__announce:not(.-bienvenue) { background: linear-gradient(90deg, var(--hw-nuit), var(--hw-nuit-2) 50%, var(--hw-nuit)) !important; }
html[data-hw="apres"] .o-header__announce:not(.-bienvenue) { background: linear-gradient(90deg, #fbd9b4, #dff1f9 55%, #fbd9b4) !important; }
html[data-hw="apres"] .hw-annonce { color: var(--hw-encre); }
html[data-hw="apres"] .hw-annonce strong { color: #c4540c; }
html[data-hw="apres"] .hw-code, .-apres .hw-code { color: var(--hw-encre); border-color: #e0782a; }

/* Bouton code (bandeau et diapositive) */
.hw-code { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 6px;
  border: 1.5px dashed var(--hw-orange-2); color: #fff; font: 700 14px/1 Rubik, sans-serif; letter-spacing: .08em; white-space: nowrap; }
.hw-code span { font: 600 11px/1 Rubik, sans-serif; letter-spacing: .02em; text-transform: uppercase; background: var(--hw-orange); color: var(--hw-nuit); border-radius: 4px; padding: 5px 7px; }
.hw-code:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Bandes d'arguments sous l'en-tête ---------- */
html[data-hw="fete"] .o-argBand.-reward { background: var(--hw-nuit-2) !important; box-shadow: 0 0 0 100vmax var(--hw-nuit-2) !important; }
html[data-hw="fete"] .o-argBand.-reward .a-argBand__figure,
html[data-hw="fete"] .o-argBand.-reward .a-argBand__nb { color: var(--hw-orange-2) !important; }
html[data-hw="fete"] .o-argBand:not(.-reward) .a-argBand__figure,
html[data-hw="fete"] .o-argBand:not(.-reward) .a-argBand__nb { color: #d9600f !important; }
html[data-hw="prep"] .o-argBand.-reward { background: #0a3a6b !important; box-shadow: 0 0 0 100vmax #0a3a6b !important; }

/* ---------- La diapositive Halloween du carrousel ---------- */
.hw-slide { position: absolute; inset: 0; z-index: 5; overflow: hidden; container-type: size; font-family: Rubik, sans-serif; }
.hw-slide[hidden] { display: none; }
.hw-slide .-court { display: none; }
.hw-slide__ciel { position: absolute; inset: 0; }
.-prep .hw-slide__ciel { background: radial-gradient(ellipse 60% 90% at 78% 30%, #123a63 0%, #0a223f 45%, #050f1e 100%); }
.-fete .hw-slide__ciel { background: radial-gradient(ellipse 55% 95% at 76% 22%, #1d5b93 0%, #0e3460 38%, #071a31 72%, #040e1c 100%); }
.-apres .hw-slide__ciel { background: linear-gradient(180deg, #cfeaf6 0%, #eaf6fb 45%, #fde6cc 100%); }
.hw-etoiles { position: absolute; inset: 0; background-image:
  radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 9%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 48% 30%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 88% 40%, #fff, transparent), radial-gradient(1px 1px at 92% 8%, #fff, transparent),
  radial-gradient(1px 1px at 25% 42%, #fff, transparent), radial-gradient(1.3px 1.3px at 72% 46%, #fff, transparent);
  opacity: .7; }
.hw-lune { position: absolute; right: 21%; top: 9%; width: 30cqh; height: 30cqh; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe8 0%, #fdf1c4 45%, #f2dc94 100%);
  box-shadow: 0 0 40px 12px rgba(253,241,196,.35), 0 0 120px 40px rgba(253,241,196,.12); }
.hw-lune::before, .hw-lune::after { content: ""; position: absolute; border-radius: 50%; background: rgba(214,190,120,.35); }
.hw-lune::before { width: 18%; height: 18%; left: 55%; top: 30%; }
.hw-lune::after { width: 11%; height: 11%; left: 30%; top: 62%; }
.-prep .hw-lune { opacity: .35; filter: blur(1px); }
.hw-soleil { position: absolute; right: 18%; bottom: -18cqh; width: 46cqh; height: 46cqh; border-radius: 50%;
  background: radial-gradient(circle, #ffe7b0 0%, #ffd27a 50%, rgba(255,210,122,0) 72%); }
.hw-slide__scene { position: absolute; right: 0; bottom: 0; width: 64%; height: 78%; }
.hw-slide__img { position: absolute; inset: 0; background-size: cover; background-position: right center; background-repeat: no-repeat; }
.hw-slide__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,26,49,.72) 0%, rgba(7,26,49,.42) 38%, rgba(7,26,49,0) 58%); }
.hw-slide__anim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hw-slide__anim > * { position: absolute; aspect-ratio: 1; }
.hw-slide__anim .hw-trace svg { width: 100%; height: 100%; display: block; }
.-apres.-image .hw-slide__voile { background: linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.36) 40%, rgba(255,255,255,0) 60%); }
.hw-slide__scene svg { width: 100%; height: 100%; display: block; }

.hw-slide__pres { position: absolute; left: max(64px, 4.2%); top: 50%; transform: translateY(-50%); width: min(50%, 640px); z-index: 3; color: #fff; }
.hw-slide__pill { color: #fff !important; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 3.5cqh; padding: 1.3cqh 3cqh; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(4,14,28,.35);
  font-size: clamp(10px, 3.6cqh, 13px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hw-slide__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hw-orange); box-shadow: 0 0 6px var(--hw-orange); }
.hw-slide__titre { margin: 0 0 2.5cqh; font-size: clamp(19px, 13.2cqh, 50px); line-height: 1.04; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.hw-slide__titre em { font-style: normal; color: var(--hw-orange-2); }
.hw-slide__offre { margin: 0 0 4.5cqh; font-size: clamp(12px, 5.2cqh, 19px); line-height: 1.35; color: rgba(255,255,255,.9); }
.hw-slide__offre strong { color: var(--hw-orange-2); font-weight: 800; }
.hw-slide__actions { display: flex; align-items: center; gap: 3cqh; flex-wrap: wrap; }
.hw-slide__cta { display: inline-flex; align-items: center; gap: 8px; padding: 2.6cqh 5cqh; border-radius: 999px; background: var(--hw-orange); color: var(--hw-nuit) !important;
  font-size: clamp(12px, 4.2cqh, 15px); font-weight: 700; text-decoration: none !important; box-shadow: 0 6px 20px rgba(255,122,26,.35); }
.hw-slide__cta:hover { background: var(--hw-orange-2); }
.hw-slide .hw-code { font-size: clamp(12px, 4.4cqh, 16px); padding: 1.2cqh 1.2cqh 1.2cqh 3cqh; }
.hw-slide__compte { display: inline-flex; gap: 1.6cqh; margin: 0 0 4cqh; }
.hw-slide__compte b { display: grid; place-items: center; min-width: 13cqh; padding: 1.6cqh 1cqh; border-radius: 8px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); font-size: clamp(14px, 7.5cqh, 28px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hw-slide__compte small { display: block; margin-top: .8cqh; font-size: clamp(8px, 2.6cqh, 10px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.-apres .hw-slide__pres { color: var(--hw-encre); }
.-apres .hw-slide__titre { color: var(--hw-encre); }
.-apres .hw-slide__titre em { color: #c4540c; }
.-apres .hw-slide__offre { color: #45586A; }
.-apres .hw-slide__offre strong { color: var(--hw-bleu); }
.-apres .hw-slide__pill { color: var(--hw-encre) !important; border-color: rgba(34,48,63,.25); background: rgba(255,255,255,.6); }
.-apres .hw-slide__cta { background: var(--hw-bleu); color: #fff !important; box-shadow: 0 6px 20px rgba(12,93,162,.3); }
.-apres .hw-slide__cta:hover { background: #0a4f8a; }

/* ---------- Après la fête : les traces à nettoyer ---------- */
.hw-trace { pointer-events: auto !important; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30'%3E%3Crect x='2' y='8' width='30' height='18' rx='5' fill='%23ffd45c' stroke='%23c79a1f' stroke-width='1.5'/%3E%3Crect x='2' y='4' width='30' height='7' rx='3' fill='%230C5DA2'/%3E%3Ccircle cx='10' cy='17' r='1.6' fill='%23c79a1f'/%3E%3Ccircle cx='19' cy='20' r='1.3' fill='%23c79a1f'/%3E%3Ccircle cx='25' cy='15' r='1.5' fill='%23c79a1f'/%3E%3C/svg%3E") 17 15, pointer;
  transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.hw-trace.-propre { opacity: 0 !important; transform: scale(.85); filter: blur(3px); pointer-events: none !important; }
.hw-eclat { position: absolute; pointer-events: none; z-index: 9; width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.hw-eclat i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--hw-ciel);
  animation: hw-eclat .7s ease-out forwards; }
@keyframes hw-eclat { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.hw-pt { position: absolute; width: 34px; height: 46px; }

.hw-menage { position: fixed; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 2147471000; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: #fff; color: var(--hw-encre); box-shadow: 0 8px 28px rgba(7,26,49,.22);
  font: 500 14px/1.3 Rubik, sans-serif; max-width: calc(100vw - 32px); }
.hw-menage b { color: var(--hw-bleu); font-variant-numeric: tabular-nums; }
.hw-menage .hw-jauge { width: 90px; height: 6px; border-radius: 3px; background: #EEF2F3; overflow: hidden; }
.hw-menage .hw-jauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hw-ciel), var(--hw-bleu)); transition: width .4s; }
.hw-menage a { color: #fff !important; background: var(--hw-bleu); border-radius: 999px; padding: 7px 12px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }

/* ---------- Renforts du 05/10 : présents dans toute la page ---------- */
.hw-coin-fixe { position: fixed; bottom: 0; width: 130px; height: 130px; z-index: 2147468500; opacity: .9; }
.hw-coin-fixe.-discret { width: 90px; height: 90px; opacity: .45; }
.hw-brume-sol { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 2147468000; pointer-events: none; opacity: .6;
  background:
    radial-gradient(ellipse 22% 80% at 15% 100%, rgba(200,214,228,.7), transparent 70%),
    radial-gradient(ellipse 25% 70% at 50% 100%, rgba(200,214,228,.55), transparent 70%),
    radial-gradient(ellipse 22% 80% at 88% 100%, rgba(200,214,228,.7), transparent 70%);
  background-size: 200% 100%; animation: hw-derive 30s linear infinite alternate; }
.hw-chute { position: fixed; z-index: 2147469500; width: 36px; height: 380px; overflow: hidden; pointer-events: none; }
.hw-chute__a { position: absolute; left: 0; top: 0; width: 36px; transform: translateY(-40px); }
.hw-chute__a .hw-fil { position: absolute; left: 50%; bottom: 42px; width: 1px; height: 600px; background: rgba(110,132,154,.85); }
.hw-chute__a svg { width: 36px; height: 44px; position: relative; display: block; }
.hw-coucou { position: absolute; left: 0; top: 0; width: 70px; animation: hw-coucou 9s ease-in-out infinite; transform: translateY(72px); }
.hw-coucou svg { width: 70px; height: 92px; display: block; filter: drop-shadow(0 2px 4px rgba(7,26,49,.18)); }
@keyframes hw-coucou { 0%, 8% { transform: translateY(72px); } 18%, 62% { transform: translateY(6px); } 68% { transform: translateY(11px) rotate(-4deg); } 74% { transform: translateY(6px) rotate(3deg); } 86%, 100% { transform: translateY(72px); } }
@media (prefers-reduced-motion: reduce) { .hw-coucou { animation: none; transform: translateY(14px); } }

/* ---------- Habillage latéral (ordinateur) et frises (petits écrans) ---------- */
.hw-cote { position: fixed; z-index: 9000; overflow: hidden; pointer-events: none; display: none;
}
.hw-cote.-g { left: 0; }
.hw-cote.-d { right: 0; }
.hw-cote__in { position: absolute; left: 0; right: 0; border-radius: 0; }
.hw-cote__in > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hw-cote .hw-trace { z-index: 2; }
.hw-cote__img { position: absolute; inset: 0; background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.hw-cote__anim { position: absolute; inset: 0; }
.hw-cote__anim > * { position: absolute; }
.hw-lueur { border-radius: 50%; background: radial-gradient(circle, rgba(var(--c, 255,170,60), .55) 0%, rgba(var(--c, 255,170,60), .18) 40%, rgba(var(--c, 255,170,60), 0) 70%);
  mix-blend-mode: screen; animation: hw-lueur 3.2s ease-in-out infinite; }
.hw-lueur.-bleue { --c: 103,198,231; animation-duration: 5s; }
@keyframes hw-lueur { 0%, 100% { opacity: .55; transform: scale(.94); } 35% { opacity: 1; transform: scale(1.04); } 55% { opacity: .7; } 75% { opacity: .95; } }
.hw-orbite { animation: hw-orbite 9s ease-in-out infinite; }
.hw-orbite .hw-cs { width: 100%; height: 50%; }
.hw-orbite svg { width: 100%; height: 100%; display: block; animation: hw-bat .22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes hw-orbite { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(160%, -70%); } 50% { transform: translate(40%, -150%); } 75% { transform: translate(-130%, -60%); } }
.hw-pendue .hw-araignee svg { width: 100%; height: auto; }
.hw-cligne i { position: absolute; top: 40%; width: 22%; height: 16%; border-radius: 50%; background: #ffd45c; box-shadow: 0 0 8px 3px rgba(255,212,92,.7); animation: hw-cligne 5s infinite; }
.hw-cligne i:first-child { left: 18%; } .hw-cligne i + i { left: 52%; }
.hw-cote__anim .hw-trace svg { width: 100%; height: 100%; display: block; }
.hw-vapeur i { position: absolute; left: 30%; bottom: 0; width: 40%; height: 40%; border-radius: 50%; background: rgba(235,242,248,.55); filter: blur(2px);
  animation: hw-vapeur 5s ease-out infinite; }
.hw-vapeur i:nth-child(2) { animation-delay: -1.7s; } .hw-vapeur i:nth-child(3) { animation-delay: -3.4s; }
@keyframes hw-vapeur { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(-60%, -220%) scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hw-vapeur i { animation: none; opacity: 0; } }
.hw-balance { transform-box: fill-box; transform-origin: 50% 0; animation: hw-balance 4.6s ease-in-out infinite alternate; }
@keyframes hw-balance { from { rotate: -5deg; } to { rotate: 5deg; } }
.hw-flotte { animation: hw-flotte 4s ease-in-out infinite alternate; }
@keyframes hw-flotte { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
.hw-oeil { transform-box: fill-box; transform-origin: center; animation: hw-cligne 5s infinite; }
.hw-fen { animation: hw-flamme 3.4s infinite; }
.hw-frise { display: none; height: 48px; margin: 6px 0 2px; background-repeat: repeat-x; background-position: center bottom; background-size: 400px 48px; pointer-events: none; }
html.hw-sans-cotes .hw-frise { display: block; }
.hw-frise.-image { width: 100vw; margin: 10px 0 4px calc(50% - 50vw); height: min(calc(100vw / 3.9), 230px); aspect-ratio: auto;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
html.hw-sans-cotes body { overflow-x: clip; }
@media (max-width: 767px) { .hw-frise:not(.-image) { height: 36px; background-size: 300px 36px; } }
@media (prefers-reduced-motion: reduce) { .hw-balance, .hw-flotte, .hw-oeil, .hw-fen, .hw-lueur, .hw-orbite, .hw-orbite svg { animation: none !important; } }

/* ---------- Le bouton « revenir au site classique » ---------- */
#hw-retour { all: unset; box-sizing: border-box; position: fixed; left: 14px; bottom: 14px; z-index: 2147482000; cursor: pointer;
  display: flex; align-items: center; gap: 0; height: 64px; padding: 0 7px; border-radius: 999px; background: var(--hw-nuit);
  box-shadow: 0 6px 20px rgba(7,26,49,.35); color: #fff; font: 600 13px/1 Rubik, sans-serif; overflow: hidden; max-width: 126px; padding-right: 12px; gap: 6px;
  transition: max-width .35s ease, gap .35s ease, padding .35s ease; }
#hw-retour .hw-retour__ico { flex: 0 0 50px; height: 42px; display: grid; place-items: center; }
#hw-retour .hw-retour__ico svg { width: 50px; height: 42px; }
#hw-retour:focus-visible { outline: 2px solid var(--hw-orange); outline-offset: 3px; }
#hw-retour.-sans { background: #fff; color: var(--hw-encre); box-shadow: 0 6px 20px rgba(7,26,49,.2); }
#hw-retour.-sans .hw-retour__ico svg { filter: grayscale(.2); }
/* l'interrupteur, à droite de la citrouille : orange et bouton à droite = allumé ; gris et bouton à gauche = éteint */
#hw-retour .hw-interrupteur { position: relative; flex: 0 0 48px; height: 28px; border-radius: 999px; background: var(--hw-orange);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); transition: background .25s ease; }
#hw-retour .hw-interrupteur i { position: absolute; top: 3px; left: 23px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .25s ease; }
#hw-retour.-sans .hw-interrupteur { background: #b9c4ce; box-shadow: inset 0 0 0 2px rgba(7,26,49,.08); }
#hw-retour.-sans .hw-interrupteur i { left: 3px; }
@media (max-width: 767px) { #hw-retour { left: 10px; bottom: 10px; height: 56px; max-width: 112px; padding: 0 10px 0 5px; } #hw-retour .hw-retour__ico { flex-basis: 46px; } #hw-retour .hw-interrupteur { flex-basis: 44px; height: 26px; } #hw-retour .hw-interrupteur i { width: 20px; height: 20px; left: 21px; } #hw-retour.-sans .hw-interrupteur i { left: 3px; } }

/* ---------- Demandes du 06/10 ---------- */
/* plus gros : les traces du mini-jeu, les araignées pendues, les chauves-souris des bandes */
.hw-trace:not(.-propre) { scale: 1.35; }
.hw-araignee { width: 34px; }
.hw-araignee svg { width: 34px; height: 42px; }
.hw-araignee .hw-fil { bottom: 40px; }
.hw-orbite { scale: 1.4; }
/* un voile qui assombrit légèrement tout le site, plus fort sur les bords */
.hw-voile-nuit { position: fixed; inset: 0; z-index: 2147400000; pointer-events: none; mix-blend-mode: multiply; }
.hw-voile-nuit.-prep { background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(20,40,80,.07) 0%, rgba(20,40,80,.12) 55%, rgba(8,20,45,.30) 100%); }
.hw-voile-nuit.-fete { background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(20,40,80,.12) 0%, rgba(20,40,80,.18) 55%, rgba(8,20,45,.40) 100%); }
/* les personnages du méga-menu : derrière le panneau, ils en sortent quand il s'ouvre */
/* la scène du méga-menu : par-dessus le panneau (z 60), dans sa zone vide ; ce qui dépasse de ses bords est coupé,
   d'où l'effet « ils sortent du bord » */
.o-header__families .hw-menu-scene { position: absolute; z-index: 61; pointer-events: none; overflow: hidden; display: none; }
.hw-menu-perso { position: absolute; transition: transform .6s cubic-bezier(.2,.9,.3,1.15), opacity .3s ease; opacity: 0; }
.hw-menu-perso svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 6px 10px rgba(7,26,49,.22)); }
/* la faucheuse et le « Cri » montent du bord inférieur ; le fantôme entre par le bord droit ; l'araignée descend du bord supérieur */
.hw-menu-perso.-faucheuse { left: 4%; bottom: -10px; transform: translateY(105%); }
.hw-menu-perso.-cri { left: 40%; bottom: -12px; transform: translateY(110%); }
.hw-menu-perso.-fantome { right: 3%; top: 14%; transform: translateX(140%); }
.hw-menu-perso.-araignee { right: 34%; top: 0; width: 34px; transform: translateY(-100%); }
.hw-menu-perso.-araignee svg { width: 34px; height: 42px; }
.hw-menu-perso.-araignee .hw-fil { position: absolute; left: 50%; bottom: 40px; width: 1px; height: 400px; background: rgba(110,132,154,.85); }
.hw-menu-scene.-sorti .hw-menu-perso { opacity: 1; }
.hw-menu-scene.-sorti .-faucheuse { transform: translateY(0) rotate(-3deg); transition-delay: .05s; animation: hw-balaie 2.4s ease-in-out .8s infinite alternate; transform-origin: 50% 100%; }
.hw-menu-scene.-sorti .-cri { transform: translateY(0); transition-delay: .3s; animation: hw-cri 1.8s ease-in-out 1s infinite; transform-origin: 50% 100%; }
.hw-menu-scene.-sorti .-fantome { transform: translateX(0); transition-delay: .5s; animation: hw-flotte-perso 3s ease-in-out 1.2s infinite alternate; }
.hw-menu-scene.-sorti .-araignee { transform: translateY(70px); transition: transform 1.4s cubic-bezier(.3,1.4,.5,1) .2s, opacity .2s; }
@keyframes hw-balaie { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(0) rotate(3deg); } }
@keyframes hw-cri { 0%, 70%, 100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-6px) scale(1.04, .97); } 86% { transform: translateY(0) scale(.98, 1.03); } }
@keyframes hw-flotte-perso { from { transform: translate(0, 0); } to { transform: translate(-8px, -12px); } }
/* zone moyenne : la faucheuse, le fantôme et l'araignée ; zone étroite : le fantôme et l'araignée */
.hw-menu-scene.-moyen .-cri, .hw-menu-scene.-etroit .-cri, .hw-menu-scene.-etroit .-faucheuse { display: none; }
.hw-menu-scene.-moyen .-araignee { display: none; }
/* sous le panneau : le fantôme descend du bord inférieur du panneau, l'araignée à côté */
.hw-menu-scene.-dessous .-cri, .hw-menu-scene.-dessous .-faucheuse { display: none; }
.hw-menu-scene.-dessous .-fantome { right: 8%; top: -6px; transform: translateY(-105%); }
.hw-menu-scene.-dessous.-sorti .-fantome { transform: translateY(0); animation: none; }
.hw-menu-scene.-dessous .-fantome svg { filter: drop-shadow(0 0 2px rgba(7,26,49,.5)) drop-shadow(0 6px 10px rgba(7,26,49,.3)); }
.hw-menu-scene.-dessous .-araignee { right: auto; left: 10%; }
.hw-menu-scene.-etroit .-fantome { right: 10%; top: auto; bottom: 10%; }
.hw-menu-scene.-etroit .-araignee { right: auto; left: 12%; }
@media (max-width: 991px) { .hw-menu-scene { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hw-menu-scene .hw-menu-perso { transition: none; animation: none !important; } }
html.hw-menu-ouvert .hw-chute { display: none; }
/* la ligne basse de la barre des familles : les personnages passent la tête dessous, la tête en bas */
.o-header__families .hw-lisiere { position: absolute; left: 0; right: 0; top: 100%; height: 120px; overflow: hidden; pointer-events: none; z-index: 58; }
html.hw-menu-ouvert .hw-lisiere { display: none; }
.hw-lis-perso { position: absolute; top: 0; transform: translateX(-50%); }
.hw-lis-tete { animation: hw-lis 3.2s cubic-bezier(.3,1.3,.5,1) both; transform: translateY(-105%); }
.hw-lis-tete svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 4px 6px rgba(7,26,49,.35)); }
.hw-lis-tete.-fantome { width: 66px; }
.hw-lis-tete.-fantome svg, .hw-lis-tete.-cri svg { transform: rotate(180deg); }
.hw-lis-tete.-cri { width: 56px; }
.hw-lis-tete.-chauve { width: 34px; }
.hw-lis-tete.-araignee { position: relative; width: 38px; }
.hw-lis-tete.-araignee svg { width: 38px; height: 47px; }
.hw-lis-tete.-araignee .hw-fil { position: absolute; left: 50%; bottom: 44px; width: 1.5px; height: 120px; background: rgba(200,212,224,.95); box-shadow: 0 0 1px rgba(7,26,49,.6); }
/* elle descend, regarde (un petit balancement), et remonte */
@keyframes hw-lis {
  0% { transform: translateY(-105%); }
  22% { transform: translateY(-6%); }
  32% { transform: translateY(-14%) rotate(-7deg); }
  44% { transform: translateY(-8%) rotate(6deg); }
  56%, 70% { transform: translateY(-10%) rotate(0deg); }
  100% { transform: translateY(-105%); }
}
.hw-lis-tete.-araignee { animation-name: hw-lis-fil; }
@keyframes hw-lis-fil { 0% { transform: translateY(-105%); } 30%, 70% { transform: translateY(30px); } 45% { transform: translateY(18px); } 100% { transform: translateY(-105%); } }
@media (max-width: 991px) { .hw-lisiere { display: none; } }


/* ---------- Pied de page ---------- */
.hw-horizon-bande.-image { position: relative; height: clamp(120px, calc(70px + 100vw / 12), 230px); background-size: auto 125%; background-position: center 80%;
  background-repeat: repeat-x; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
html[data-hw] #footer { position: relative; }
.hw-horizon { left: 0; right: 0; top: -92px; height: 92px; z-index: 3; }

/* ---------- Bulle de confirmation (code copié) ---------- */
#hw-toast { position: fixed; left: 50%; top: 20px; transform: translate(-50%, -20px); opacity: 0; z-index: 2147483001; background: var(--hw-encre); color: #fff;
  padding: 10px 16px; border-radius: 10px; font: 500 13px/1.3 Rubik, sans-serif; transition: .3s; pointer-events: none; }
#hw-toast.-vu { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Écrans étroits ---------- */
@media (max-width: 1299px) { .hw-gouttiere { display: none !important; } }
/* tablette : les fanions du creux du fil recouvraient la pastille des diapositives, à 25 px du haut (06/10) */
@media (max-width: 991px) { .hw-guirlande { height: 22px; } }
@media (max-width: 991px) {
  .hw-slide__scene { width: 58%; }
  .hw-horizon { top: -60px; height: 60px; }
}
@media (max-width: 767px) {
  .hw-annonce { font-size: 12.5px; gap: 8px; }
  .hw-annonce .-long { display: none; }
  .hw-annonce .-court { display: inline; }
  .hw-annonce .hw-code { font-size: 12px; }
  .hw-slide__pres { left: 16px; width: 66%; }
  .hw-slide.-image .hw-slide__pres { width: 56%; }
  .hw-slide.-image .hw-slide__voile { background: linear-gradient(90deg, rgba(7,26,49,.82) 0%, rgba(7,26,49,.6) 45%, rgba(7,26,49,0) 66%); }
  .hw-slide.-apres.-image .hw-slide__voile { background: linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 66%); }
  .hw-slide__pill { display: none; }
  .hw-slide__titre { font-size: 20px; margin-bottom: 5px; }
  .hw-slide__offre { font-size: 12.5px; margin-bottom: 10px; }
  .hw-slide__actions { gap: 8px; }
  .hw-slide__cta { padding: 8px 13px; font-size: 12.5px; }
  .hw-slide .hw-code { font-size: 12px; padding: 4px 4px 4px 9px; }
  .hw-slide .hw-code span { padding: 4px 5px; font-size: 10px; }
  .hw-slide .hw-code { display: none; }   /* sur téléphone, le code est déjà dans le bandeau du haut */
  .hw-slide__compte { margin-bottom: 8px; gap: 5px; }
  .hw-slide__compte b { min-width: 36px; padding: 5px 3px; font-size: 16px; }
  .hw-slide__compte small { font-size: 8px; margin-top: 2px; }
  .hw-slide__scene { width: 62%; height: 70%; right: -14%; }
  .hw-slide .-long { display: none; }
  .hw-slide .-court { display: inline; }
  .hw-lune { right: 8%; }
  .hw-guirlande { height: 12px; }   /* la pastille des diapositives n'est qu'à 13 px du haut (mesuré le 06/10) */
  /* à droite et non au centre : centré, il passait sous l'interrupteur de la citrouille (112 px depuis le 06/10) */
  .hw-menage { bottom: 14px; left: auto; right: 10px; transform: none; font-size: 12.5px; padding: 8px 10px; gap: 8px; }
  .hw-menage .hw-jauge { display: none; }
  .hw-horizon { top: -44px; height: 44px; }
  .hw-mobile-non { display: none !important; }
  .hw-coin-fixe { width: 72px; height: 72px; }
  .hw-coin-fixe.-discret { width: 56px; height: 56px; }
  .hw-brume-sol { height: 50px; }
  .hw-seul-tel { display: inline; }
}

/* ---------- Mouvement réduit : rien ne bouge, tout reste lisible ---------- */
@media (prefers-reduced-motion: reduce) {
  .hw-tremble, #hw-nuit.-actif, .hw-araignee, .hw-brume, .hw-brume-sol, .hw-vol, .hw-citrouille .hw-visage, .hw-yeux span,
  .hw-tisse .hw-toile path, .hw-tisse .hw-citrouille { animation: none !important; }
  .hw-vol, .hw-chute { display: none; }
}

/* ---------- Propre au site (module) ---------- */
/* le bandeau de campagne n'existe à l'écran que lorsque l'habillage est posé : visiteur qui a éteint le thème,
   ou attente du tremblement, et c'est la barre habituelle qui se montre */
html:not([data-hw]) .hw-annonce { display: none !important; }
/* la barre de franco pendant la campagne (07/10, le responsable) : une citrouille avance au bout du
   remplissage, comme le camion d'autrefois ; elle passe SOUS les ronds des jalons (déclarés après dans la
   page) pour ne jamais masquer un palier au moment où il est atteint */
html[data-hw] .pf-franco__plein { overflow: visible !important; }
/* la barre ENTIÈREMENT orange pendant la campagne (07/10, l'utilisateur : « pas de bleu ») : le dégradé du remplissage,
   les ronds des paliers atteints et leur coche ; le montant de la phrase en orange foncé (contraste 5,4 sur blanc) */
html[data-hw] .pf-franco { --pf-debut: #FFC48A !important; --pf-milieu: #E0600C !important; --pf-fin: #C4540C !important; }
html[data-hw] .pf-franco__txt strong { color: #A84607 !important; }
html[data-hw] .pf-franco__plein::after { content: ""; position: absolute; right: -17px; top: 50%; width: 34px; height: 31px; margin-top: -18px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NCA0MCc+PHBhdGggZD0nTTIxIDhjMC00IDItNyA2LThsMSAyYy0zIDEtNCAzLTQgNnonIGZpbGw9JyM0ZDdhMmEnLz48ZWxsaXBzZSBjeD0nMTMnIGN5PScyNCcgcng9JzExJyByeT0nMTQnIGZpbGw9JyNkOTU5MGEnLz48ZWxsaXBzZSBjeD0nMzEnIGN5PScyNCcgcng9JzExJyByeT0nMTQnIGZpbGw9JyNkOTU5MGEnLz48ZWxsaXBzZSBjeD0nMjInIGN5PScyNCcgcng9JzEyJyByeT0nMTUuNScgZmlsbD0nI2ZmN2ExYScvPjxwYXRoIGQ9J00xMyAyMWw0LjUtNSAzLjUgNXpNMjMgMjFsNC41LTUgMy41IDV6JyBmaWxsPScjZmZkNDVjJy8+PHBhdGggZD0nTTEyIDI4cTEwIDggMjAgMGwtMyAuNS0yIDIuNS0yLTIuNS0yIDIuNS0yLTIuNS0yIDIuNS0yLTIuNXonIGZpbGw9JyNmZmQ0NWMnLz48cGF0aCBkPSdNMTMgMjFsNC41LTUgMy41IDV6TTIzIDIxbDQuNS01IDMuNSA1ek0xMiAyOHExMCA4IDIwIDBsLTMgLjUtMiAyLjUtMi0yLjUtMiAyLjUtMi0yLjUtMiAyLjUtMi0yLjV6JyBmaWxsPSdub25lJyBzdHJva2U9JyM3YTJlMDUnIHN0cm9rZS13aWR0aD0nLjgnLz48L3N2Zz4=") center / contain no-repeat; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 2px rgba(7,26,49,.3));
  animation: hw-citrouille-roule 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes hw-citrouille-roule { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { html[data-hw] .pf-franco__plein::after { animation: none; } }
@media (max-width: 767px) { html[data-hw] .pf-franco__plein::after { width: 28px; height: 26px; right: -14px; margin-top: -15px; } }
/* la remise automatique expliquée dans le panier et la commande (07/10) */
.hw-remise { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: #fff7ef;
  border: 1px solid #ffd9b5; border-left: 5px solid #c4540c; font-family: Rubik, sans-serif; color: #22303F; }
.hw-remise[hidden] { display: none; }
.hw-remise__ico { flex: 0 0 36px; height: 31px; }
.hw-remise__ico svg { width: 100%; height: 100%; display: block; }
.hw-remise__txt { flex: 1; min-width: 0; }
.hw-remise__titre { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.hw-remise__titre strong { color: #c4540c; font-weight: 800; }
.hw-remise__suite { margin: 0; font-size: 14.5px; }
.hw-remise__suite strong { color: #c4540c; }
.hw-remise__jauge { position: relative; height: 8px; margin: 26px 0 8px; border-radius: 999px; background: #ffe2c7; }
.hw-remise__jauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #ff9b4a, #c4540c); }
.hw-remise__repere { position: absolute; top: -5px; width: 2px; height: 18px; margin-left: -1px; background: #e8c7a6; }
.hw-remise__repere b { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #a86a3c; white-space: nowrap; }
.hw-remise__repere.-atteint { background: #c4540c; }
.hw-remise__repere.-atteint b { color: #c4540c; }
.hw-remise__note { margin: 4px 0 0; font-size: 12.5px; color: #5b6b7a; line-height: 1.4; }
@media (max-width: 767px) { .hw-remise { padding: 12px; gap: 10px; } .hw-remise__ico { flex-basis: 28px; height: 24px; } .hw-remise__titre { font-size: 15px; } .hw-remise__suite { font-size: 14px; } }
/* les rouleaux de papier toilette de l'« après » : plus petits sur tablette et téléphone (07/10 : trop gros sur mobile) */
@media (max-width: 991px) { .hw-tp { width: 46px !important; height: auto !important; } .hw-tp svg { width: 100%; height: auto; display: block; } }
@media (max-width: 767px) { .hw-tp { width: 30px !important; } }
/* l'image de la page de sélection : en haut de la colonne des produits, au-dessus du texte (06/10) ;
   le titre à gauche, sur la partie calme de l'image ; rapport 4,2:1 sur ordinateur, 3:1 tablette, 2,2:1 téléphone */
.hw-selection { position: relative; overflow: hidden; aspect-ratio: 4.2 / 1; margin: 0 15px 22px; border-radius: 14px; background: #0c2a4d; font-family: Rubik, sans-serif;
  box-shadow: 0 10px 28px rgba(7,26,49,.18); }
.hw-selection__img { position: absolute; inset: 0; background: var(--hw-pc) right 62% / cover no-repeat; }
.hw-selection.-propre .hw-selection__img { background-position: center; }
/* l'image générée a déjà son ciel calme à gauche : un voile plus léger suffit sous le titre */
.hw-selection.-propre .hw-selection__voile { background: linear-gradient(90deg, rgba(7,26,49,.55) 0%, rgba(7,26,49,.25) 30%, rgba(7,26,49,0) 48%); }
.hw-selection.-propre.-apres .hw-selection__voile { background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 30%, rgba(255,255,255,0) 48%); }
.hw-selection__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,26,49,.82) 0%, rgba(7,26,49,.5) 34%, rgba(7,26,49,0) 58%); }
.hw-selection.-apres .hw-selection__voile { background: linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.5) 36%, rgba(255,255,255,0) 60%); }
.hw-selection__pres { position: relative; height: 100%; padding: 0 5.5%; display: flex; align-items: center; }
.hw-selection__titre { margin: 0; max-width: 48%; color: #fff; font-size: clamp(24px, 2.9vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.hw-selection__titre em { font-style: normal; color: var(--hw-orange-2); display: block; }
.hw-selection.-apres .hw-selection__titre { color: var(--hw-encre); }
.hw-selection.-apres .hw-selection__titre em { color: #c4540c; }
@media (max-width: 991px) { .hw-selection { aspect-ratio: 3 / 1; } .hw-selection__img { background-image: var(--hw-tab, var(--hw-pc)); } .hw-selection__titre { font-size: 26px; max-width: 55%; } }
/* l'image générée, large, cadrée à droite sur tablette : le chariot et l'étal restent entiers, le ciel garde la moitié gauche */
@media (max-width: 991px) { .hw-selection.-propre .hw-selection__img { background-image: var(--hw-pc); background-size: auto 100%; background-position: right center; } }
@media (max-width: 767px) { .hw-selection { aspect-ratio: 2.2 / 1; margin: 0 0 16px; border-radius: 12px; }
  .hw-selection__img { background-image: var(--hw-mob, var(--hw-tab, var(--hw-pc))); background-position: 72% 60%; }
  .hw-selection.-propre .hw-selection__img { background-image: var(--hw-pc); background-size: auto 100%; background-position: 68% center; }
  .hw-selection__voile { background: linear-gradient(90deg, rgba(7,26,49,.86) 0%, rgba(7,26,49,.62) 50%, rgba(7,26,49,.1) 100%); }
  .hw-selection.-apres .hw-selection__voile { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.66) 50%, rgba(255,255,255,.15) 100%); }
  .hw-selection__titre { font-size: 23px; max-width: 62%; } }
/* le bandeau mène à la sélection (06/10) : le texte est cliquable sans changer d'aspect ; après le code,
   « Voir la sélection → » dit qu'on peut cliquer (la flèche seule sur téléphone) */
html[data-hw] .hw-annonce a.hw-annonce__lien, html[data-hw] .hw-annonce a.hw-annonce__voir { color: inherit !important; text-decoration: none !important; }
html[data-hw] .hw-annonce a.hw-annonce__lien:hover span, html[data-hw] .hw-annonce a.hw-annonce__lien:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
html[data-hw] .hw-annonce a.hw-annonce__voir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; padding: 4px 2px; }
html[data-hw] .hw-annonce a.hw-annonce__voir:hover .hw-mobile-non, html[data-hw] .hw-annonce a.hw-annonce__voir:focus-visible .hw-mobile-non { text-decoration: underline; text-underline-offset: 3px; }
.hw-annonce__fleche { font-weight: 700; color: var(--hw-orange-2); transition: transform .2s ease; }
html[data-hw="apres"] .hw-annonce__fleche { color: #c4540c; }
.hw-annonce a.hw-annonce__voir:hover .hw-annonce__fleche { transform: translateX(3px); }
/* sous 1 200 px, la flèche seule : sur tablette, le libellé poussait le texte du bandeau sur 9 lignes (182 px, mesuré le 06/10) */
@media (max-width: 1199px) { html[data-hw] .hw-annonce a.hw-annonce__voir > .hw-mobile-non { display: none !important; } html[data-hw] .hw-annonce a.hw-annonce__voir { font-size: 16px; padding: 4px 6px; } }
/* l'image de la diapositive : un fichier par format, seul celui de l'écran se télécharge */
.hw-slide__img { background-image: var(--hw-pc); }
@media (max-width: 991px) { .hw-slide__img { background-image: var(--hw-tab, var(--hw-pc)); } }
@media (max-width: 767px) { .hw-slide__img { background-image: var(--hw-mob, var(--hw-tab, var(--hw-pc))); } }
/* le rose du site passe à l'orange pendant toute la campagne (décision du 06/10) : #C4540C garde le contraste
   du rose avec un texte blanc (4,5 contre 4,7) ; l'orange vif des décors serait illisible sous un texte blanc */
/* 14/10 : plus de --prohdcta-* ici. Ils supposaient un bouton blanc à texte rose ; réglé au back-office en fond
   rose et texte blanc, « Connectez-vous » devenait orange sur orange. Le repeint convertit la règle :root du
   module (prohdcta-reglages) quelle qu'elle soit, rose → orange, blanc laissé blanc. */
html[data-hw] { --clr-pink: #C4540C; --prohd-rose-fonce: #A84607; --prohdrech-panier: #C4540C; --prohdrech-panier-survol: #A84607; --prohddecl-accent: #C4540C; }
/* le méga-menu en couleur (ESSAI, réglable au back-office) : un lever de soleil, comme l'après */
html.hw-menu-degrade .o-header__families { background: linear-gradient(90deg, #fff3d6 0%, #ffe0ad 50%, #fff3d6 100%) !important; }
html.hw-menu-degrade .m-header__famPanel { background: linear-gradient(180deg, #fffaf0 0%, #fff0d4 100%) !important; }
/* les éléments éteints au back-office */
.o-hero.hw-hors-campagne .hw-tp { visibility: hidden; }
html.hw-non-bandes .hw-cote, html.hw-non-frises .hw-frise, html.hw-non-pied .hw-horizon-bande, html.hw-non-jeu .hw-trace, html.hw-non-jeu .hw-menage { display: none !important; }
/* l'aperçu privé */
#hw-apercu { position: fixed; bottom: 14px; right: 14px; z-index: 2147483001; background: #DF1576; color: #fff; font: 600 12.5px/1 Rubik, sans-serif;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(7,26,49,.3); white-space: nowrap; }
#hw-apercu a { color: #fff; text-decoration: underline; margin-left: 8px; }
@media (max-width: 767px) { #hw-apercu { bottom: 80px; right: 10px; font-size: 11.5px; } }
/* la pop-up : la page ne défile pas derrière */
html.hw-pop-ouvert, html.hw-pop-ouvert body { overflow: hidden !important; }
/* 14/10 : la pastille des produits Numatic au panier et sur /commande (remise limitée à −10 %) */
/* 14/10 : les produits hors remise (Numatic sous 300 € HT) : leur vignette et leur ligne du panier, en gris */
.hw-hors-remise { display: block; width: max-content; max-width: 100%; margin: 4px 0 2px; padding: 1px 7px; border-radius: 6px;
  background: #eef1f4; border: 1px solid #c3ccd5; color: #46525e; font: 600 11px/1.5 Rubik, sans-serif; white-space: normal; }
.hw-plafond.-exclu { background: #eef1f4; border-color: #c3ccd5; color: #46525e; }
/* 14/10 : la livraison offerte de la pop-up, à part des paliers */
.hw-pop__livraison { margin-top: 12px !important; font-size: 13px; font-weight: 600; color: var(--pop-texte); }
/* 15/10 : sous chaque case, ce que le palier donne à Numatic : une ligne discrète, pas une pastille de cadeau */
.hw-pop__paliers .hw-pop__bonus { margin-top: 4px; padding: 0; border-radius: 0; background: none; color: var(--pop-texte-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.hw-pop__lienRemises { color: inherit; text-decoration: underline; font-weight: 600; }
@media (max-width: 767px) { .hw-pop__paliers .hw-pop__bonus { font-size: 9.5px; padding: 0; } }
/* 15/10 : l'encart « Comment fonctionnent les remises ? » de la page de la sélection (texte de la catégorie) */
.hw-remises { margin: 22px 0 8px; padding: 18px 20px; border: 1px solid #f1b27a; border-radius: 14px; background: #fff8f1; color: #22303f; scroll-margin-top: 140px; }
.hw-remises h3 { margin: 0 0 8px !important; font-size: 20px !important; line-height: 1.3 !important; color: #c4540c !important; text-align: left; }
.hw-remises { text-align: left; }
.hw-intro-ouverte .m-catIntro__corps { max-height: none !important; }
.hw-intro-ouverte::after, .hw-intro-ouverte .a-catIntro__bouton { display: none !important; }
.hw-remises p { margin: 0 0 10px; }
.hw-remises table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0 16px; font-size: 14px; background: #fff; border: 1px solid #f1d2b4; border-radius: 10px; overflow: hidden; }
.hw-remises th, .hw-remises td { padding: 9px 12px; text-align: center; border-bottom: 1px solid #f6e3cf; }
.hw-remises tr:last-child td { border-bottom: 0; }
.hw-remises th { background: #fff1e3; color: #8a3a06; font-weight: 700; }
.hw-remises td:first-child, .hw-remises th:first-child { text-align: left; }
.hw-remises td strong { color: #c4540c; font-size: 16px; }
/* les exemples en formules : vignettes + montants, « = total », « → remises » */
.hw-remises .hw-remises__titre2 { margin: 18px 0 10px !important; font-size: 18px !important; color: #0c5da2 !important; }
.hw-remises__ex { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #f1d2b4; }
.hw-remises__formule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hw-remises__article { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 10px; background: #f5f8fb; border: 1px solid #dfe7ee; }
.hw-remises__article.-numatic { background: #eef5fc; border-color: #b9d3ec; }
.hw-remises__article img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; }
.hw-remises__nom { font-size: 13px; line-height: 1.3; font-weight: 600; color: #22303f; max-width: 150px; }
.hw-remises__nom em { font-style: normal; color: #4c6376; font-weight: 700; }
.hw-remises__prix { margin-left: 2px; font-size: 14px; font-weight: 800; color: #22303f; white-space: nowrap; }
.hw-remises__op { font-size: 22px; font-weight: 800; color: #c4540c; line-height: 1; }
.hw-remises__total { padding: 6px 12px; border-radius: 10px; background: #22303f; color: #fff; font-size: 16px; font-weight: 800; white-space: nowrap; }
.hw-remises__resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.hw-remises__fleche { font-size: 22px; font-weight: 800; color: #c4540c; line-height: 1; }
.hw-remises__pct { padding: 5px 12px; border-radius: 999px; background: #c4540c; color: #fff; font-size: 14px; font-weight: 800; }
.hw-remises__pct.-numatic { background: #0c5da2; }
.hw-remises__visiteur { display: none; margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #0c5da2; }
.hw-remises.-visiteur .hw-remises__prix { display: none; }
.hw-remises.-visiteur .hw-remises__visiteur { display: block; }
@media (max-width: 767px) {
  /* 15/10 (le client) : sur téléphone, la formule se lit de haut en bas, symboles et total centrés,
     la flèche tournée vers le bas au-dessus des remises */
  .hw-remises__formule { flex-direction: column; align-items: center; gap: 4px; }
  .hw-remises__article { width: 100%; max-width: 320px; box-sizing: border-box; }
  .hw-remises__article .hw-remises__prix { margin-left: auto; }
  .hw-remises__nom { max-width: none; flex: 1; }
  .hw-remises__op { text-align: center; }
  .hw-remises__total { margin-top: 2px; }
  .hw-remises__resultat { flex-direction: column; align-items: center; gap: 6px; }
  .hw-remises__fleche { display: inline-block; transform: rotate(90deg); }
  .hw-remises__pct { text-align: center; }
  .hw-remises__ex { padding: 10px; }
  .hw-remises__article img { width: 40px; height: 40px; }
  .hw-remises__nom { max-width: 110px; font-size: 12px; }
  .hw-remises__total { font-size: 15px; }
  .hw-remises__pct { font-size: 13px; }
}
.hw-remises .hw-remises__cas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hw-remises .hw-remises__cas li { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #f1d2b4; font-size: 14px; line-height: 1.45; }
.hw-remises .hw-remises__cas li b { display: block; margin-bottom: 4px; color: #0c5da2; }
.hw-remises .hw-remises__note { margin: 12px 0 0; font-size: 13px; color: #4c6376; }
@media (max-width: 767px) {
  .hw-remises { padding: 14px 12px; }
  .hw-remises table { font-size: 13px; }
  .hw-remises th, .hw-remises td { padding: 7px 6px; }
  .hw-remises .hw-remises__cas { grid-template-columns: 1fr; }
}
@media (max-width: 767px) { .hw-pop__livraison { font-size: 12px; margin-top: 10px !important; } }
/* 14/10 : le palier déjà acquis dans la phrase de la barre de franco */
.hw-acquis { color: #15803d; font-weight: 700; white-space: nowrap; }
.hw-plafond { display: block; width: max-content; max-width: 100%; margin: 4px 0 2px; padding: 2px 7px; border-radius: 6px;
  background: #fff1e3; border: 1px solid #f1b27a; color: #8a3a06; font: 600 11px/1.5 Rubik, sans-serif; white-space: normal; }
/* 16/10 : « Comprendre vos remises » (barre de franco, récapitulatif, fiches ; bouton en haut de la sélection) */
.hw-comprendre { display: inline-flex; align-items: center; gap: 4px; color: #c4540c !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; cursor: pointer; }
.hw-comprendre:hover, .hw-comprendre:focus { color: #a84607 !important; }
.hw-comprendre__ico { font-weight: 800; text-decoration: none; display: inline-block; }
.hw-comprendre-haut { margin: 14px 0 6px; text-align: center; }
.hw-comprendre.-bouton { gap: 8px; padding: 10px 20px; border-radius: 999px; background: #fff1e3; border: 1px solid #f1b27a; color: #8a3a06 !important;
  font: 700 15px/1.2 Rubik, sans-serif; text-decoration: none; box-shadow: 0 2px 8px rgba(196,84,12,.12); }
.hw-comprendre.-bouton:hover, .hw-comprendre.-bouton:focus { background: #ffe3c7; color: #8a3a06 !important; text-decoration: none; }
.hw-comprendre.-bouton .hw-comprendre__ico { color: #c4540c; font-size: 17px; }
.hw-comprendre.-franco { font-size: inherit; }
.hw-comprendre-panier { margin: 2px 0 8px; text-align: right; font: 13px/1.4 Rubik, sans-serif; }
.hw-comprendre-pastille { display: block; margin: 0 0 4px; font: 12px/1.4 Rubik, sans-serif; }
.hw-remises.-bas { margin: 32px 0 16px; }
/* l'en-tête fixe du grand écran descend à 192 px : l'encart (et la liste, pour le retour) s'arrêtent dessous */
@media (min-width: 992px) { .hw-remises, html[data-hw] section#products { scroll-margin-top: 215px; } }
.hw-remises__retour { margin: 14px 0 0 !important; text-align: center; font-size: 14px; }
/* la fiche d'une marque à remise propre (Numatic) et ses vignettes */
.hw-marque-fiche { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 6px; padding: 9px 12px; border-radius: 10px;
  background: #eef5fc; border: 1px solid #b9d3ec; color: #22303f; font: 500 13.5px/1.45 Rubik, sans-serif; text-align: left; }
/* l'en-tête de la fiche est une grille (titre | favori, puis marque et référence) : la pastille prend sa rangée */
.m-product__headerContent > .hw-marque-fiche { grid-column: 1; grid-row: 3; min-width: 0; margin: 8px 0 0; }
.hw-marque-fiche__ico { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #0c5da2; color: #fff;
  display: grid; place-items: center; font: 700 12px/1 Rubik, sans-serif; }
.hw-marque-fiche__txt strong { color: #0c5da2; font-weight: 700; }
.hw-marque-fiche .hw-comprendre { margin-left: 6px; }
.hw-marque-vignette { display: block; width: max-content; max-width: 100%; margin: 4px 0 2px; padding: 2px 7px; border-radius: 6px; box-sizing: border-box;
  background: #eef5fc; border: 1px solid #b9d3ec; color: #22303f; font: 500 11px/1.4 Rubik, sans-serif; white-space: normal; text-align: left; }
.hw-marque-vignette b { color: #0c5da2; font-weight: 700; }
@media (max-width: 767px) {
  .hw-marque-fiche { font-size: 13px; }
  .hw-comprendre.-bouton { font-size: 14px; padding: 9px 16px; }
}
/* 27/10 (le client) : sur ordinateur, le texte de la diapositive est centré dans l'espace libre, entre le bord gauche et
   la mairie (qui commence vers 67 % de l'image, la même pour les trois temps) ; plus de grand vide au milieu */
@media (min-width: 992px) { .hw-slide.-image:not(.-bonbons):not(.-paliers) .hw-slide__pres { left: max(64px, calc(33.5% - min(25%, 320px))); } }
/* 27/10 (le client, « bug prioritaire ») : les personnages pendus sous le menu (.hw-lisiere, z-index 58) tombaient sur
   l'encadré « Recommandez en un clic » (prohdcompte, posé sous le menu depuis le 21/10) : l'encadré passe devant */
html[data-hw] .pca { position: relative; z-index: 59; }
/* 27/10 (le patron, puis le client) : l'interrupteur de la musique, à droite de la citrouille, en gris */
#hw-musique { all: unset; box-sizing: border-box; position: fixed; left: 147px; bottom: 14px; z-index: 2147482000; cursor: pointer;
  display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 12px 0 16px; border-radius: 999px; background: #4a5560; color: #fff;
  box-shadow: 0 6px 20px rgba(7,26,49,.3); }
#hw-musique[hidden] { display: none; }
#hw-musique:focus-visible { outline: 2px solid var(--hw-orange); outline-offset: 3px; }
#hw-musique .hw-musique__ico { display: grid; place-items: center; width: 26px; height: 26px; }
#hw-musique .hw-interrupteur { position: relative; flex: 0 0 48px; height: 28px; border-radius: 999px; background: #aeb8c2; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
#hw-musique .hw-interrupteur i { position: absolute; top: 3px; left: 23px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
#hw-musique.-coupee { background: #fff; color: #4a5560; box-shadow: 0 6px 20px rgba(7,26,49,.2); }
#hw-musique.-coupee .hw-interrupteur { background: #d5dbe1; }
#hw-musique.-coupee .hw-interrupteur i { left: 3px; }
@media (max-width: 767px) { #hw-musique { left: 128px; bottom: 10px; height: 56px; padding: 0 10px 0 12px; gap: 6px; } #hw-musique .hw-interrupteur { flex-basis: 44px; height: 26px; } #hw-musique .hw-interrupteur i { width: 20px; height: 20px; left: 21px; } #hw-musique.-coupee .hw-interrupteur i { left: 3px; } }
/* la diapositive « bonbons » (13/10) au ciel du matin : le sous-titre tombait sur le pavé bleu foncé du décor */
.hw-slide.-apres.-bonbons .hw-slide__voile { background: linear-gradient(90deg, rgba(255,250,243,.94) 0%, rgba(255,250,243,.86) 38%, rgba(255,250,243,.55) 52%, rgba(255,250,243,0) 64%); }
.hw-slide.-apres.-bonbons .hw-slide__offre { color: #22303F; font-weight: 500; }
@media (max-width: 767px) { .hw-slide.-apres.-bonbons .hw-slide__voile { background: linear-gradient(90deg, rgba(255,250,243,.95) 0%, rgba(255,250,243,.85) 50%, rgba(255,250,243,0) 70%); } }

/* ==========================================================================
   La pop-up de la campagne (Halloween 2026) : une par temps, la même pour tous.
   Feuille candidate : elle rejoindra campagne.css une fois l'aperçu validé.
   Vocabulaire repris de la diapositive : pastille à point orange, titre 800
   dont la fin passe en orange, bouton pilule, compte à rebours en cases.
   ========================================================================== */
.hw-popVoile { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(4,16,31,.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: hwPopVoile .25s ease both; }
.hw-pop { --pop-fond: #0c2a4d; --pop-fond-2: #071a31; --pop-texte: #fff; --pop-texte-2: rgba(255,255,255,.82); --pop-accent: #ffa24a;
  --pop-case: rgba(255,255,255,.06); --pop-case-bord: rgba(255,255,255,.16);
  position: relative; display: flex; flex-direction: column; width: min(600px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--pop-fond) 0%, var(--pop-fond-2) 100%); color: var(--pop-texte);
  font-family: Rubik, system-ui, sans-serif; box-shadow: 0 24px 60px rgba(4,16,31,.45); animation: hwPopEntree .35s cubic-bezier(.2,.9,.3,1.15) both; }
.hw-pop * { box-sizing: border-box; }
.hw-pop p { margin: 0; }

/* la fermeture : 40 px, sur l'image, toujours visible */
.hw-pop__fermer { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(4,16,31,.55); color: #fff; }
.hw-pop__fermer::before, .hw-pop__fermer::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.hw-pop__fermer::after { transform: rotate(-45deg); }
.hw-pop__fermer:hover { background: rgba(4,16,31,.8); }
.hw-pop__fermer:focus-visible, .hw-pop__cta:focus-visible, .hw-pop__lien:focus-visible { outline: 3px solid #ffd45c; outline-offset: 2px; }

/* la scène : l'image du temps à droite, la pastille et le compte à rebours à gauche */
.hw-pop__scene { position: relative; flex: none; aspect-ratio: 3.5 / 1; min-height: 120px; background: var(--hw-pop-img) right center / cover no-repeat #0c2a4d; }
.hw-pop__scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,26,49,.9) 0%, rgba(7,26,49,.62) 34%, rgba(7,26,49,0) 60%); }
.hw-pop__scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(12,42,77,0), var(--pop-fond)); }
.hw-pop__haut { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 22px 20px; max-width: 62%; }
.hw-pop__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(4,14,28,.4); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hw-pop__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff7a1a; box-shadow: 0 0 6px #ff7a1a; }
.hw-pop__compte { display: flex; flex-direction: column; gap: 5px; }
.hw-pop__compteTitre { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.hw-pop__cases { display: flex; gap: 6px; }
.hw-pop__cases b { display: grid; place-items: center; min-width: 46px; padding: 6px 4px 5px; border-radius: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.hw-pop__cases small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }

/* le corps : défile seul si l'écran est vraiment trop bas, le bouton reste en bas */
.hw-pop__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 26px 4px; text-align: center; }
.hw-pop__titre { font-size: 26px; line-height: 1.08; font-weight: 800; letter-spacing: -.01em; color: var(--pop-texte); }
.hw-pop__titre em { font-style: normal; color: var(--pop-accent); }
.hw-pop__texte { margin-top: 10px !important; font-size: 15px; line-height: 1.45; color: var(--pop-texte-2); }
.hw-pop__texte strong { color: var(--pop-accent); font-weight: 700; }

/* les trois paliers */
.hw-pop__paliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.hw-pop__paliers li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 86px; padding: 10px 6px; border-radius: 12px;
  background: var(--pop-case); border: 1px solid var(--pop-case-bord); }
.hw-pop__paliers li.-max { background: rgba(255,122,26,.16); border-color: rgba(255,162,74,.7); }
.hw-pop__pct { font-size: 28px; line-height: 1; font-weight: 800; color: var(--pop-accent); white-space: nowrap; }
.hw-pop__seuil { font-size: 13px; font-weight: 500; color: var(--pop-texte); white-space: nowrap; }
.hw-pop__bonus { margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: #ffd45c; color: #3a2a00; font-size: 11px; font-weight: 700; line-height: 1.4; }
.hw-pop__note { margin-top: 10px !important; font-size: 12px; color: var(--pop-texte-2); }

/* les actions */
.hw-pop__actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 26px 16px; }
.hw-pop__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: 999px;
  background: #ff7a1a; color: #071a31 !important; font-size: 16px; font-weight: 700; text-decoration: none !important; box-shadow: 0 6px 20px rgba(255,122,26,.35); }
.hw-pop__cta:hover { background: #ffa24a; }
.hw-pop__lien { min-height: 36px; padding: 6px 12px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--pop-texte-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- après la fête : le matin, en clair ---------- */
.hw-pop.-apres { --pop-fond: #fffaf3; --pop-fond-2: #fff3e6; --pop-texte: #22303F; --pop-texte-2: #45586A; --pop-accent: #c4540c;
  --pop-case: #fff; --pop-case-bord: #f1d2b4; }
.hw-pop.-apres .hw-pop__scene::before { background: linear-gradient(90deg, rgba(255,250,243,.92) 0%, rgba(255,250,243,.62) 34%, rgba(255,250,243,0) 60%); }
.hw-pop.-apres .hw-pop__scene::after { background: linear-gradient(180deg, rgba(255,250,243,0), var(--pop-fond)); }
.hw-pop.-apres .hw-pop__pill { color: #22303F; border-color: rgba(34,48,63,.25); background: rgba(255,255,255,.7); }
.hw-pop.-apres .hw-pop__compteTitre { color: #22303F; }
.hw-pop.-apres .hw-pop__cases b { color: #22303F; background: rgba(255,255,255,.75); border-color: rgba(34,48,63,.16); }
.hw-pop.-apres .hw-pop__texte strong { color: #0C5DA2; }
.hw-pop.-apres .hw-pop__paliers li.-max { background: #fff1e3; border-color: #e0600c; }
.hw-pop.-apres .hw-pop__cta { background: #0C5DA2; color: #fff !important; box-shadow: 0 6px 20px rgba(12,93,162,.3); }
.hw-pop.-apres .hw-pop__cta:hover { background: #0a4f8a; }
.hw-pop.-apres .hw-pop__fermer { background: rgba(34,48,63,.55); }

/* ---------- tablette et téléphone ---------- */
@media (max-width: 560px) {
  .hw-popVoile { padding: 10px; }
  .hw-pop { border-radius: 14px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .hw-pop__scene { aspect-ratio: auto; height: 112px; min-height: 0; background-position: 78% center; }
  .hw-pop__scene::before { background: linear-gradient(90deg, rgba(7,26,49,.92) 0%, rgba(7,26,49,.7) 45%, rgba(7,26,49,.1) 85%); }
  .hw-pop.-apres .hw-pop__scene::before { background: linear-gradient(90deg, rgba(255,250,243,.94) 0%, rgba(255,250,243,.72) 45%, rgba(255,250,243,.1) 85%); }
  .hw-pop__haut { max-width: 78%; padding: 10px 14px 14px; gap: 7px; }
  .hw-pop__pill { font-size: 10px; padding: 4px 9px; letter-spacing: .1em; }
  .hw-pop__compteTitre { font-size: 11px; }
  .hw-pop__cases { gap: 4px; }
  .hw-pop__cases b { min-width: 38px; font-size: 16px; padding: 5px 3px 4px; }
  .hw-pop__cases small { font-size: 7.5px; }
  .hw-pop__corps { padding: 4px 16px 2px; }
  .hw-pop__titre { font-size: 21px; }
  .hw-pop__texte { font-size: 14px; margin-top: 8px !important; }
  .hw-pop__paliers { gap: 6px; margin-top: 12px; }
  .hw-pop__paliers li { min-height: 74px; padding: 8px 3px; border-radius: 10px; }
  .hw-pop__pct { font-size: 22px; }
  .hw-pop__seuil { font-size: 11.5px; }
  .hw-pop__bonus { font-size: 9.5px; padding: 2px 5px; white-space: nowrap; }
  .hw-pop__note { font-size: 11px; margin-top: 8px !important; }
  .hw-pop__actions { padding: 12px 16px 10px; gap: 2px; }
  .hw-pop__cta { width: 100%; font-size: 15px; padding: 11px 16px; }
}
/* écran très bas (portable zoomé, téléphone en paysage) : la scène se tasse */
@media (max-height: 620px) and (min-width: 561px) {
  .hw-pop__scene { aspect-ratio: auto; height: 118px; }
  .hw-pop__titre { font-size: 23px; }
  .hw-pop__paliers li { min-height: 76px; }
  .hw-pop__actions { padding-top: 12px; padding-bottom: 10px; }
}
@media (max-height: 600px) and (max-width: 560px) {
  .hw-pop__scene { height: 92px; }
  .hw-pop__compte { display: none; }
}

@keyframes hwPopVoile { from { opacity: 0; } }
@keyframes hwPopEntree { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .hw-popVoile, .hw-pop { animation: none; } }

/* le bloc « bonbons offerts » (13/10, aperçu validé) : les vrais sachets + la formule, sous les paliers ; jamais de prix */
.hw-pop__bonbons { display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px 10px 8px;
  border-radius: 12px; background: rgba(255,122,26,.10); border: 1px dashed rgba(255,162,74,.65); text-align: left; }
.hw-pop__bonbons img { display: block; width: 100%; height: auto; }
.hw-pop__bonbonsTitre { font-size: 15.5px; line-height: 1.2; font-weight: 800; color: var(--pop-texte); }
.hw-pop__bonbonsTitre em { font-style: normal; color: var(--pop-accent); }
.hw-pop__bonbonsTexte { margin-top: 5px !important; font-size: 13px; line-height: 1.4; color: var(--pop-texte-2); }
.hw-pop__bonbonsTexte strong { color: var(--pop-accent); }
.hw-pop.-apres .hw-pop__bonbons { background: #fff; border-color: #f1d2b4; }
@media (max-width: 479px) { .hw-pop__bonbons { grid-template-columns: 1fr; text-align: center; padding: 10px 12px; } .hw-pop__bonbons img { max-width: 300px; margin: 0 auto; } }

/* 1.20.7 (27/10, le client) : le texte revient à gauche et les paliers de la remise deviennent des cartes au milieu,
   dans l'espace libre entre le texte et la mairie (vers 72 % de la largeur) ; sur tablette et téléphone, la mairie
   occupe le milieu : les paliers passent en pastilles sous le titre. Le compte à rebours est à côté du bouton. */
.hw-paliers { display: flex; align-items: flex-end; gap: 5px; margin: 0 0 7px; }
.hw-palier { text-align: center; color: #fff; background: rgba(7,26,49,.62); border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  padding: 3px 6px 4px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hw-palier.-top { border-color: rgba(255,162,74,.75); background: linear-gradient(180deg, rgba(255,122,26,.22), rgba(7,26,49,.7));
  box-shadow: 0 0 0 1px rgba(255,162,74,.25), 0 0 16px rgba(255,122,26,.3); }
.hw-palier i, .hw-palier small { display: none; }
.hw-palier b { display: block; font: 800 14px/1 Rubik, sans-serif; color: var(--hw-orange-2); white-space: nowrap; }
.hw-palier span { display: block; margin-top: 1px; font: 600 8.5px/1.2 Rubik, sans-serif; white-space: nowrap; }
.hw-palier sup { font-size: .7em; }
.hw-slide.-paliers .hw-slide__actions .hw-slide__compte { margin: 0; }
.hw-slide.-paliers:not(.-apres) .hw-slide__offre strong { color: #fff; }
.hw-slide.-apres .hw-palier { background: rgba(255,255,255,.75); border-color: rgba(34,48,63,.16); color: var(--hw-encre); }
.hw-slide.-apres .hw-palier b { color: #c4540c; }
.hw-slide.-apres .hw-palier.-top { border-color: rgba(196,84,12,.6); background: linear-gradient(180deg, rgba(255,162,74,.28), rgba(255,255,255,.82)); }
@media (max-width: 767px) {
  .hw-slide.-paliers .hw-slide__titre { font-size: 19px; margin-bottom: 6px; }
  .hw-slide.-paliers .hw-slide__offre { display: none; }
  .hw-slide.-paliers .hw-slide__actions { flex-wrap: wrap; gap: 6px; }
  .hw-slide.-paliers .hw-slide__compte b { min-width: 32px; padding: 3px 2px; font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hw-slide.-paliers .hw-slide__pres { width: 60cqw; }
  .hw-slide.-paliers .hw-slide__pill { margin-bottom: 2.5cqh; }
  .hw-slide.-paliers .hw-slide__titre { font-size: clamp(19px, 10.5cqh, 40px); margin-bottom: 2cqh; }
  .hw-slide.-paliers .hw-slide__offre { font-size: 13px; margin-bottom: 3cqh; }
  .hw-paliers { gap: 7px; margin-bottom: 3.5cqh; }
  .hw-palier { padding: 5px 10px 6px; border-radius: 10px; }
  .hw-palier b { font-size: 20px; }
  .hw-palier span { font-size: 11px; margin-top: 3px; }
}
@media (min-width: 768px) { .hw-slide.-paliers .hw-slide__actions { flex-wrap: nowrap; gap: 4cqh; } }
@media (min-width: 992px) {
  .hw-slide.-paliers .hw-slide__pres { left: max(64px, 4.2%); width: min(40cqw, 600px); }
  .hw-slide.-paliers .hw-slide__titre { font-size: clamp(19px, 11.2cqh, 46px); }
  .hw-slide.-paliers .hw-slide__offre { margin-bottom: 5cqh; font-size: clamp(12px, 4.9cqh, 18px); }
  /* .hw-slide__pres est décalé par transform : il sert de repère, 100 % = sa largeur */
  .hw-paliers { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; justify-content: center; gap: 1cqw;
    width: min(26cqw, 450px); left: calc(100% + max(2.5cqw, (72cqw - max(64px, 4.2cqw) - 100% - min(26cqw, 450px)) / 2)); }
  .hw-palier { flex: 1 1 0; max-width: 150px; padding: 2.2cqh 1cqw 2.6cqh; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
  .hw-palier.-top { box-shadow: 0 0 0 1px rgba(255,162,74,.25), 0 0 34px rgba(255,122,26,.35); }
  .hw-slide.-apres .hw-palier { box-shadow: 0 10px 26px rgba(34,48,63,.16); }
  .hw-palier i { display: block; margin: 0 auto 1.4cqh; width: calc(var(--t, 1) * 17cqh); aspect-ratio: 1.2; }
  .hw-palier i svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
  .hw-palier.-top i svg { filter: drop-shadow(0 0 12px rgba(255,212,92,.55)); }
  .hw-palier b { font-size: clamp(18px, 10cqh, 40px); }
  .hw-palier span { margin-top: 1.4cqh; font-size: clamp(10px, 4.2cqh, 15px); }
  .hw-palier small { display: block; margin-top: 1cqh; font: 500 clamp(9px, 3.2cqh, 12px)/1.2 Rubik, sans-serif; opacity: .6; white-space: nowrap; }
}