/* ══════════════════════════════════════════════════════════
   Page Fun : la ROUE VIP (gains durables) et la ROUE DES TOURS BONUS.
   Classes fwh-, et réutilise les cartes, tableaux, compteurs et boutons de la machine (fsl-).
   Les roues sont des objets dorés / platine, identiques en thème clair et sombre : leurs couleurs
   sont écrites en dur. Animations : transform et opacity seulement.
   ══════════════════════════════════════════════════════════ */

.fwh{ margin-top:34px; }
.fwh-seule{ margin-top:0; padding-top:0; border-top:none; }
.fwh-boost{ font-size:12px; font-weight:800; padding:4px 11px; border-radius:20px; color:#1fa39a; border:1px solid #1fa39a; }

/* La scène : la grande roue, et à côté (ou dessous sur écran étroit) la roue des tours bonus */
.fwh-scene{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; justify-items:center;
  padding:26px 16px 18px; border-radius:20px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, rgba(242,201,76,.10), rgba(0,0,0,0) 55%),
             radial-gradient(ellipse at 80% 70%, rgba(90,140,255,.08), rgba(0,0,0,0) 55%),
             linear-gradient(180deg, #1a0f0a, #0d0806);
  box-shadow:inset 0 0 0 1px rgba(242,201,76,.18), inset 0 0 60px rgba(0,0,0,.6); }
.fwh-scene.fwh-avec-bonus{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
.fwh-principale{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; min-width:0; }

/* ── Une roue ── */
.fwh-roue-wrap{ position:relative; width:min(440px, 100%); aspect-ratio:1; margin-bottom:26px; }
.fwh-svg{ position:relative; z-index:1; display:block; width:100%; height:auto; filter:drop-shadow(0 18px 28px rgba(0,0,0,.6)); }
.fwh-disque{ will-change:transform; }
.fwh-off .fwh-svg{ filter:grayscale(.55) brightness(.7) drop-shadow(0 18px 28px rgba(0,0,0,.6)); }
/* Le halo de lumière derrière la roue (un projecteur) */
.fwh-halo{ position:absolute; inset:-14%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,215,110,.32) 0%, rgba(255,190,60,.12) 40%, rgba(255,190,60,0) 68%);
  animation:fwhHalo 3.2s ease-in-out infinite alternate; }
@keyframes fwhHalo{ from{ opacity:.65; transform:scale(.97); } to{ opacity:1; transform:scale(1.03); } }
.fwh-tourne .fwh-halo{ animation-duration:.6s; }

/* Textes des cases */
.fwh-val{ font-family:var(--font-head, inherit); font-weight:900; fill:#fff8e6; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:3px; letter-spacing:.3px; }
.fwh-val-or{ fill:#4a2e04; stroke:rgba(255,244,184,.6); }
.fwh-val-rien{ fill:#9a8566; stroke:none; font-weight:800; letter-spacing:3px; }
.fwh-nom{ fill:rgba(255,248,230,.75); font-weight:700; }

/* Les ampoules de la jante : une lueur qui court, plus vite pendant le tour, clignote au gain */
.fwh-ampoule{ animation:fwhAmpoule 1.6s linear infinite; animation-delay:calc(var(--i) * -1.6s / var(--n)); }
@keyframes fwhAmpoule{ 0%, 25%{ opacity:1; } 40%, 100%{ opacity:.3; } }
.fwh-tourne .fwh-ampoule{ animation-duration:.4s; animation-delay:calc(var(--i) * -.4s / var(--n)); }
.fwh-gagne .fwh-ampoule{ animation:fwhClignote .28s steps(1) infinite; animation-delay:calc(var(--i) % 2 * -.14s); }
@keyframes fwhClignote{ 0%{ opacity:1; } 50%{ opacity:.15; } }

/* L'aiguille : une grosse flèche d'or sertie d'un rubis, qui frétille pendant le tour */
.fwh-aiguille{ position:absolute; left:50%; top:-4.5%; z-index:4; width:13%; aspect-ratio:3 / 4; transform:translateX(-50%); transform-origin:50% 22%; }
.fwh-aiguille::before{ content:''; position:absolute; inset:0; clip-path:polygon(50% 100%, 6% 34%, 6% 14%, 24% 0, 76% 0, 94% 14%, 94% 34%);
  background:linear-gradient(90deg, #8a6210, #fff4b8 45%, #f2c94c 55%, #7a5208); }
.fwh-aiguille i{ position:absolute; left:50%; top:16%; width:38%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffd0d0, #e0202c 50%, #5c0710); box-shadow:0 0 10px rgba(255,60,60,.7); }
.fwh-tourne .fwh-aiguille{ animation:fwhFretille .11s ease-in-out infinite alternate; }
@keyframes fwhFretille{ from{ transform:translateX(-50%) rotate(-9deg); } to{ transform:translateX(-50%) rotate(6deg); } }

/* L'éclat sur la case gagnante (elle est sous l'aiguille, en haut) */
.fwh-eclat{ position:absolute; left:50%; top:3%; z-index:2; width:34%; height:44%; transform:translateX(-50%); pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,250,210,.75), rgba(255,220,120,.25) 45%, rgba(255,220,120,0) 70%);
  clip-path:polygon(50% 100%, 0 0, 100% 0); }
.fwh-gagne .fwh-eclat{ animation:fwhEclat .5s ease-in-out 6 alternate; }
@keyframes fwhEclat{ from{ opacity:.15; } to{ opacity:1; } }

/* Le moyeu : un médaillon d'or au rubis, c'est aussi le bouton « Tourner » */
.fwh-moyeu{ position:absolute; left:50%; top:50%; z-index:3; width:30%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  border:0; cursor:pointer; padding:0; font-family:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:radial-gradient(circle at 38% 30%, #ff7b7b 0%, #d61f29 42%, #7a0710 80%);
  box-shadow:0 0 0 5px #f2c94c, 0 0 0 9px #7a4e06, 0 0 0 11px #f7d774, 0 10px 22px rgba(0,0,0,.6), inset 0 4px 10px rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.4);
  transition:transform .14s; }
.fwh-moyeu small{ font-size:clamp(12px, 3vw, 18px); line-height:1; }
.fwh-moyeu span{ font-weight:900; font-size:clamp(11px, 2.6vw, 16px); letter-spacing:1.5px; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.5); }
.fwh-moyeu:hover:not(:disabled){ transform:translate(-50%,-50%) scale(1.06); }
.fwh-moyeu:active:not(:disabled){ transform:translate(-50%,-50%) scale(.95); }
.fwh-moyeu:disabled{ cursor:not-allowed; filter:grayscale(.6); }
.fwh-principale:not(.fwh-tourne) .fwh-roue-wrap:not(.fwh-off) .fwh-moyeu{ animation:fwhInvite 1.8s ease-in-out infinite; }
@keyframes fwhInvite{ 0%, 100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.05); } }

/* Le socle sous la roue */
.fwh-pied{ position:absolute; left:50%; bottom:-28px; z-index:0; width:46%; height:40px; transform:translateX(-50%);
  clip-path:polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background:linear-gradient(90deg, #4a3204, #f2c94c 35%, #fff4b8 50%, #b8860b 70%, #3a2703); }
.fwh-pied::after{ content:''; position:absolute; left:-10%; right:-10%; bottom:-6px; height:12px; border-radius:50%; background:rgba(0,0,0,.55); }

.fwh-raison{ font-size:13px; color:#e8d7b0; background:rgba(0,0,0,.35); border:1px dashed rgba(242,201,76,.35); border-radius:var(--r-sm); padding:8px 12px; text-align:center; }
.fwh-panneau{ display:flex; gap:9px; width:min(440px, 100%); padding:10px; border-radius:14px;
  background:linear-gradient(160deg,#fff4b8 0%,#f2c94c 18%,#b8860b 45%,#f7d774 62%,#8a6210 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.7); }
.fwh-res{ min-height:34px; display:flex; align-items:center; justify-content:center; }
.fwh-res-grand{ min-height:52px; }

/* ── La roue des tours bonus : son propre panneau, thème platine et saphir ── */
.fwh-bonus{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; min-width:0; padding:16px 14px 14px; border-radius:18px;
  background:linear-gradient(170deg, rgba(40,60,110,.45), rgba(10,14,30,.75)); box-shadow:inset 0 0 0 1px rgba(170,200,255,.35), 0 12px 30px rgba(0,0,0,.45); }
.fwh-bonus-tete{ display:flex; align-items:center; gap:10px; align-self:stretch; }
.fwh-bonus-ico{ width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(160deg, #d9e2ef, #8a96a8); box-shadow:inset 0 2px 0 rgba(255,255,255,.6); }
.fwh-bonus-tete b{ display:block; font-size:15px; color:#e6eef9; font-family:var(--font-head, inherit); }
.fwh-bonus-tete small{ display:block; font-size:12px; color:#a9b8d6; }
.fwh-platine{ width:min(340px, 100%); margin-bottom:6px; }
.fwh-platine .fwh-halo{ background:radial-gradient(circle, rgba(140,190,255,.30) 0%, rgba(120,160,255,.10) 40%, rgba(120,160,255,0) 68%); }
.fwh-platine .fwh-aiguille::before{ background:linear-gradient(90deg, #5a6476, #ffffff 45%, #d9e2ef 55%, #4a5262); }
.fwh-platine .fwh-aiguille i{ background:radial-gradient(circle at 35% 30%, #d6e8ff, #2d6fe0 50%, #0a2a66); box-shadow:0 0 10px rgba(90,150,255,.7); }
.fwh-platine .fwh-eclat{ background:radial-gradient(ellipse at 50% 30%, rgba(220,235,255,.75), rgba(140,190,255,.25) 45%, rgba(140,190,255,0) 70%); }
.fwh-moyeu-p{ cursor:default; width:28%;
  background:radial-gradient(circle at 38% 30%, #9cc4ff 0%, #2456c4 45%, #0a1d4d 85%);
  box-shadow:0 0 0 4px #e6eef9, 0 0 0 8px #5a6476, 0 0 0 10px #d9e2ef, 0 8px 18px rgba(0,0,0,.55), inset 0 4px 10px rgba(255,255,255,.35); }
.fwh-moyeu-p span{ font-size:clamp(9px, 2.2vw, 12px); }
.fwh-bonus.fwh-off .fwh-svg{ filter:grayscale(.7) brightness(.6); }

/* Les tableaux et les derniers gains, sous les roues */
.fwh-infos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:16px; }
.fwh-table .fsl-carte-titre{ background:linear-gradient(90deg,#3b1d5e,#5b2a86 50%,#3b1d5e); }

@media (max-width:900px){ .fwh-scene.fwh-avec-bonus{ grid-template-columns:minmax(0,1fr); } }
body.mobile-ui .fwh-scene.fwh-avec-bonus{ grid-template-columns:minmax(0,1fr); }
body.mobile-ui .fwh-scene{ padding:18px 8px 12px; }
@media (prefers-reduced-motion:reduce){ .fwh-ampoule, .fwh-aiguille, .fwh-halo, .fwh-moyeu{ animation:none !important; } }

/* ── Récompense normale : la fête sur la roue ── */
.fwh-fete{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer; }
.fwh-fete.fin{ animation:fwhFeteFin .5s ease-in forwards; }
@keyframes fwhFeteFin{ to{ opacity:0; transform:scale(.92); } }
.fwh-fete-rayons{ position:absolute; inset:-10%; border-radius:50%; pointer-events:none; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,226,140,.38) 0deg 9deg, rgba(255,226,140,0) 9deg 22deg);
  -webkit-mask-image:radial-gradient(circle, #000 25%, transparent 70%); mask-image:radial-gradient(circle, #000 25%, transparent 70%);
  animation:fwhRayonsIn .5s ease-out forwards, fwhRayonsTourne 9s linear infinite; }
@keyframes fwhRayonsIn{ to{ opacity:1; } }
@keyframes fwhRayonsTourne{ to{ transform:rotate(360deg); } }
.fwh-fete-gerbe{ position:absolute; left:50%; top:4%; width:0; height:0; pointer-events:none; }
.fwh-fete-gerbe i{ position:absolute; left:0; top:0; font-style:normal; opacity:0; animation:fwhGerbe 1.5s cubic-bezier(.15,.7,.3,1) var(--dl) forwards; }
@keyframes fwhGerbe{ 0%{ transform:translate(-50%,-50%) scale(.3) rotate(0); opacity:1; }
  70%{ opacity:1; } 100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) scale(1) rotate(var(--r)); opacity:0; } }
.fwh-fete-carte{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 26px 14px; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, #fff4b8, #f2c94c 45%, #b8860b); color:#3b2503; text-align:center;
  box-shadow:0 0 0 3px #7a4e06, 0 0 0 6px #fff4b8, 0 18px 40px rgba(0,0,0,.6), 0 0 50px rgba(255,210,90,.6);
  animation:fwhCarteIn .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes fwhCarteIn{ 0%{ transform:scale(.1) rotate(-12deg); opacity:0; } 100%{ transform:none; opacity:1; } }
.fwh-fete-carte img{ width:54px; height:54px; object-fit:contain; }
.fwh-fete-ico{ font-size:40px; line-height:1; animation:fwhIcoSaute .6s ease-in-out .5s 3 alternate; }
@keyframes fwhIcoSaute{ to{ transform:translateY(-6px) scale(1.12); } }
.fwh-fete-carte b{ font-family:var(--font-head, inherit); font-size:clamp(22px, 5vw, 32px); font-weight:900; line-height:1.05; }
.fwh-fete-carte small{ font-size:11.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.75; }
.fwh-fete-reflet{ position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); transform:skewX(-18deg);
  animation:fwhReflet 1.6s ease-in-out .5s 2; }
@keyframes fwhReflet{ from{ transform:translateX(0) skewX(-18deg); } to{ transform:translateX(420%) skewX(-18deg); } }

/* ── Récompense SECRÈTE : la révélation plein écran ── */
.fwh-secret{ position:fixed; inset:0; z-index:10060; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; overflow:hidden;
  background:radial-gradient(circle at 50% 45%, rgba(70,20,110,.88), rgba(8,2,18,.97) 70%); animation:fwhSecFond .5s ease-out; }
@keyframes fwhSecFond{ from{ opacity:0; } }
.fwh-sec-runes{ position:absolute; inset:0; pointer-events:none; }
.fwh-sec-runes i{ position:absolute; left:var(--x); bottom:-40px; font-style:normal; color:rgba(200,160,255,.55); text-shadow:0 0 10px rgba(180,120,255,.8);
  animation:fwhRune var(--d) linear var(--dl) infinite; }
@keyframes fwhRune{ from{ transform:translateY(0) rotate(0); opacity:0; } 15%{ opacity:1; } 85%{ opacity:.8; } to{ transform:translateY(-110vh) rotate(200deg); opacity:0; } }
.fwh-sec-rayons{ position:absolute; left:50%; top:46%; width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax; pointer-events:none; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,215,110,.28) 0deg 7deg, rgba(255,215,110,0) 7deg 18deg);
  animation:fwhSecRayons 1.8s ease-out 1.6s forwards, fwhRayonsTourne 16s linear infinite; }
@keyframes fwhSecRayons{ to{ opacity:.9; } }
.fwh-sec-titre{ position:relative; font-family:'Cinzel', var(--font-head), Georgia, serif; font-weight:900; font-size:clamp(20px, 4.4vw, 38px); letter-spacing:.18em;
  color:#e9d5ff; text-shadow:0 0 18px rgba(190,130,255,.9), 0 3px 0 #3b1466; animation:fwhSecTitre 1s ease-out; }
@keyframes fwhSecTitre{ from{ opacity:0; letter-spacing:.6em; } }
.fwh-sec-scene{ position:relative; width:220px; height:300px; perspective:900px; }
.fwh-sec-carte{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
  animation:fwhSecTremble 1.5s ease-in, fwhSecRetourne .9s cubic-bezier(.3,1.4,.5,1) 1.5s forwards; }
@keyframes fwhSecTremble{ 0%{ transform:rotate(0); } 20%{ transform:rotate(-2deg); } 30%{ transform:rotate(2deg); } 45%{ transform:rotate(-3deg) scale(1.02); }
  55%{ transform:rotate(3deg) scale(1.02); } 70%{ transform:rotate(-5deg) scale(1.05); } 80%{ transform:rotate(5deg) scale(1.05); } 90%{ transform:rotate(-6deg) scale(1.08); } 100%{ transform:rotate(0) scale(1.08); } }
@keyframes fwhSecRetourne{ from{ transform:rotateY(0) scale(1.08); } to{ transform:rotateY(180deg) scale(1); } }
.fwh-sec-face{ position:absolute; inset:0; border-radius:18px; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; }
.fwh-sec-dos{ background:radial-gradient(circle at 50% 40%, #6d28d9, #2e1065 70%); box-shadow:0 0 0 3px #c4b5fd, 0 0 40px rgba(167,139,250,.8); }
.fwh-sec-dos b{ font-family:Georgia, serif; font-size:120px; font-weight:900; color:#ede9fe; text-shadow:0 0 24px rgba(196,181,253,.95); }
.fwh-sec-cercle{ position:absolute; width:180px; height:180px; border-radius:50%; border:2px dashed rgba(221,214,254,.55); animation:fwhRayonsTourne 6s linear infinite; }
.fwh-sec-recto{ transform:rotateY(180deg); color:#3b2503; text-align:center; padding:16px;
  background:linear-gradient(160deg, #fff4b8, #f2c94c 45%, #b8860b); box-shadow:0 0 0 3px #7a4e06, 0 0 0 6px #fff4b8, 0 0 60px rgba(255,210,90,.85); }
.fwh-sec-recto img{ width:90px; height:90px; object-fit:contain; }
.fwh-sec-recto span{ font-size:70px; line-height:1; }
.fwh-sec-recto b{ font-family:var(--font-head, inherit); font-size:28px; font-weight:900; line-height:1.1; }
.fwh-sec-recto small{ font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.75; }
.fwh-sec-eclats{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.fwh-sec-eclats i{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; opacity:0;
  background:radial-gradient(circle, #fff, #ffd76a 50%, rgba(255,215,106,0) 70%); animation:fwhSecEclat 1.1s ease-out var(--dl) forwards; }
@keyframes fwhSecEclat{ 0%{ transform:translate(0,0) scale(.5); opacity:1; } 100%{ transform:translate(var(--dx), var(--dy)) scale(1.4); opacity:0; } }
.fwh-sec-flash{ position:absolute; inset:-60%; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,240,200,.4) 30%, rgba(255,240,200,0) 60%); animation:fwhSecFlash .7s ease-out 1.5s; }
@keyframes fwhSecFlash{ 0%{ opacity:0; transform:scale(.4); } 30%{ opacity:1; } 100%{ opacity:0; transform:scale(1.3); } }
.fwh-sec-gain{ position:relative; font-family:var(--font-head, inherit); font-size:clamp(22px, 5vw, 36px); font-weight:900; color:#fff; opacity:0;
  text-shadow:0 0 18px rgba(255,210,90,.9); animation:fwhSecGain .6s cubic-bezier(.2,1.5,.4,1) 2.2s forwards; }
@keyframes fwhSecGain{ from{ opacity:0; transform:translateY(14px) scale(.8); } to{ opacity:1; transform:none; } }
.fwh-sec-ok{ flex:none; padding:12px 34px; opacity:0; animation:fwhSecGain .5s ease-out 2.6s forwards; }
@media (prefers-reduced-motion:reduce){
  .fwh-fete *, .fwh-secret *{ animation-duration:.01s !important; animation-iteration-count:1 !important; }
}

/* ── « Rien » : le tampon qui claque ── */
.fwh-rien{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.fwh-rien.fin{ animation:fwhFeteFin .45s ease-in forwards; }
.fwh-rien-voile{ position:absolute; inset:4%; border-radius:50%; background:rgba(10,6,4,.55); animation:fwhVoile .35s ease-out; pointer-events:none; }
@keyframes fwhVoile{ from{ opacity:0; } }
.fwh-rien-tampon{ position:relative; display:flex; flex-direction:column; align-items:center; padding:10px 26px 8px; border-radius:12px;
  border:5px double rgba(200,60,60,.9); color:rgba(230,80,80,.95); background:rgba(30,10,10,.35); transform:rotate(-12deg);
  font-family:'Cinzel', var(--font-head), Georgia, serif; text-shadow:0 0 1px rgba(0,0,0,.5);
  animation:fwhTampon .42s cubic-bezier(.5,0,.75,0) both; }
.fwh-rien-tampon b{ font-size:clamp(34px, 8vw, 54px); font-weight:900; letter-spacing:.2em; line-height:1; }
.fwh-rien-tampon small{ font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; opacity:.85; margin-top:2px; }
@keyframes fwhTampon{ 0%{ transform:rotate(-12deg) scale(2.6); opacity:0; } 100%{ transform:rotate(-12deg) scale(1); opacity:1; } }
.fwh-rien-pouss{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.fwh-rien-pouss i{ position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(200,185,160,.7), rgba(200,185,160,0) 70%); animation:fwhPoussiere 1.1s ease-out .4s forwards; }
@keyframes fwhPoussiere{ 0%{ transform:translate(0,0) scale(.4); opacity:.9; } 100%{ transform:translate(var(--dx), var(--dy)) scale(1.8); opacity:0; } }
/* La roue tressaute quand le tampon tombe */
.fwh-secoue .fwh-svg{ animation:fwhSecoue .38s ease-out .38s; }
@keyframes fwhSecoue{ 0%, 100%{ transform:translate(0,0); } 20%{ transform:translate(-5px, 3px); } 45%{ transform:translate(4px, -2px); } 70%{ transform:translate(-2px, 1px); } }
.fwh-rien-petit .fwh-rien-tampon{ padding:6px 14px 5px; border-width:4px; }
.fwh-rien-petit .fwh-rien-tampon b{ font-size:28px; }
.fwh-rien-petit .fwh-rien-tampon small{ font-size:9px; }

/* La fête en version roue bonus (plus petite, en bleu) */
.fwh-fete-petite .fwh-fete-carte{ padding:10px 16px 9px; background:linear-gradient(160deg, #e6f0ff, #9cc4ff 45%, #2456c4); color:#071a3d;
  box-shadow:0 0 0 3px #1f4fa8, 0 0 0 5px #e6eef9, 0 12px 28px rgba(0,0,0,.55), 0 0 40px rgba(120,170,255,.6); }
.fwh-fete-petite .fwh-fete-carte b{ font-size:22px; }
.fwh-fete-petite .fwh-fete-ico{ font-size:28px; }
.fwh-fete-petite .fwh-fete-rayons{ background:repeating-conic-gradient(from 0deg, rgba(160,200,255,.35) 0deg 9deg, rgba(160,200,255,0) 9deg 22deg); }

/* Les tickets qui volent vers le compteur, et le compteur qui saute */
.fwh-ticket{ position:fixed; z-index:10040; font-style:normal; font-size:24px; pointer-events:none; margin:-12px 0 0 -12px; opacity:0;
  animation:fwhTicket 1s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes fwhTicket{ 0%{ transform:translate(0,0) scale(.5) rotate(0); opacity:0; } 10%{ opacity:1; }
  50%{ transform:translate(calc(var(--dx) * .5), calc(var(--dy) * .5 + var(--arc))) scale(1.2) rotate(180deg); }
  100%{ transform:translate(var(--dx), var(--dy)) scale(.6) rotate(360deg); opacity:.2; } }
.fwh-saute{ display:inline-block; animation:fwhSaute .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes fwhSaute{ 0%{ transform:scale(1); } 40%{ transform:scale(1.6); color:#fff; } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .fwh-rien *, .fwh-ticket{ animation-duration:.01s !important; } }