/* ══ LUMENS - la pièce quotidienne ═══════════════════════════
   Tout est dimensionné en --cp (côté de la pièce) calculé sur min(vw, vh) :
   la scène occupe l'écran et garde ses proportions du téléphone au grand écran. */

.lum-scene{
  position:fixed; inset:0; z-index:4000;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:radial-gradient(ellipse at 50% 45%, #241a06 0%, #0d0a04 55%, #000 100%);
  overflow:hidden; opacity:0; transition:opacity .45s ease;
  --cp: clamp(140px, min(46vw, 46vh), 420px);
  --or: #f5c451; --or2: #ffeaa0; --or3: #a9751c;
  --ep: calc(var(--cp) * .085);   /* epaisseur de la piece */
}
.lum-scene.on{ opacity:1; }
.lum-scene.fond{ background-size:cover; background-position:center; }
/* Voile sombre par-dessus une image de fond : la pièce doit rester le sujet */
.lum-scene.fond::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(20,14,4,.55) 0%, rgba(0,0,0,.86) 70%); }

/* Halo qui respire derrière la pièce */
.lum-halo{ position:absolute; width:calc(var(--cp) * 2.6); height:calc(var(--cp) * 2.6);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(245,196,81,.30) 0%, rgba(245,196,81,.10) 38%, transparent 68%);
  animation:lumRespire 3.4s ease-in-out infinite; }
@keyframes lumRespire{ 0%,100%{ transform:scale(.92); opacity:.75 } 50%{ transform:scale(1.06); opacity:1 } }

/* Anneaux de lumière qui tournoient (les « traits » dorés de la référence) */
.lum-anneau{ position:absolute; border-radius:50%; border:1px solid rgba(245,196,81,.35);
  pointer-events:none; animation:lumOrbite 7s linear infinite; }
.lum-anneau.a1{ width:calc(var(--cp) * 1.7); height:calc(var(--cp) * 1.7); }
.lum-anneau.a2{ width:calc(var(--cp) * 2.1); height:calc(var(--cp) * 2.1); animation-duration:11s; animation-direction:reverse; border-color:rgba(255,234,160,.22); }
.lum-anneau.a3{ width:calc(var(--cp) * 2.6); height:calc(var(--cp) * 2.6); animation-duration:16s; border-color:rgba(169,117,28,.3); }
@keyframes lumOrbite{ from{ transform:rotateX(74deg) rotateZ(0) } to{ transform:rotateX(74deg) rotateZ(360deg) } }

/* ── La pièce : deux faces dos à dos dans un espace 3D ── */
.lum-piece-wrap{ perspective:1400px; width:var(--cp); height:var(--cp); position:relative; }
.lum-piece{ width:100%; height:100%; position:relative; transform-style:preserve-3d;
  transform:rotateX(8deg); }
.lum-face{
  position:absolute; inset:0; border-radius:50%; backface-visibility:hidden; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* Le jonc, la bande gravée et les étoiles sont dessinés dans l'ornement SVG (.lum-orn) :
     la face ne porte plus que le halo et le fond du champ central. */
  background:radial-gradient(circle at 38% 30%, #33406a 0%, #1b2340 55%, #0d1226 100%);
  box-shadow:
    0 0 calc(var(--cp) * .12) rgba(245,196,81,.75),
    0 0 calc(var(--cp) * .40) rgba(245,196,81,.35);
}
/* ── Les couches d'une face ──
   neutre (fond) < image personnalisée (champ central) < ornement (dessus).
   La pièce de secours attend, cachée, qu'une image tombe en panne. */
.lum-neutre, .lum-ornement, .lum-secours{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; pointer-events:none; }
/* Les trois visuels sont des carrés contenant la pièce : même ajustement pour qu'ils
   restent concentriques, quelle que soit leur définition. */
.lum-neutre{ object-fit:contain; }
/* Montée en couches sans image personnalisée : la pièce nue suffit, l'emoji ferait tache sur l'or */
.lum-face.en-couches:not(.a-image) .lum-embleme{ display:none; }
.lum-ornement{ z-index:1; }
.lum-secours{ display:none; z-index:2; }
/* L'image n'a pas chargé : la pièce entière de secours prend toute la place */
.lum-face.en-panne .lum-neutre,
.lum-face.en-panne .lum-ornement,
.lum-face.en-panne .lum-orn,
.lum-face.en-panne .lum-embleme{ display:none; }
.lum-face.en-panne .lum-secours{ display:block; }
/* Montée en couches : le fond bleu nuit de la face ne doit pas percer sous l'or */
.lum-face.en-couches{ background:transparent; }

/* L'ornement couvre toute la face, par-dessus l'image */
.lum-orn{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* Le champ central est transparent quand une image est fournie : elle doit rester visible */
.lum-face.a-image .lum-orn-champ{ fill:transparent; }
/* Les deux faces sont ECARTEES de l'epaisseur : la piece a un volume, pas une feuille. */
.lum-face{ transform:translateZ(calc(var(--ep) / 2)); }
.lum-face.dos{ transform:rotateY(180deg) translateZ(calc(var(--ep) / 2)); }
/* La face arriere recoit moins de lumiere */
.lum-face.dos{ filter:brightness(.88); }

/* ── La TRANCHE : un cylindre fait de segments tangents ──
   Chaque segment est tourne autour de Z puis bascule a 90 degres : mis bout a bout,
   ils forment le bord de la piece. C'est lui qu'on voit quand elle se met de profil. */
.lum-tranche{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.lum-tranche i{ position:absolute; left:50%; top:50%; display:block;
  background:linear-gradient(90deg, var(--or3), var(--or) 28%, var(--or2) 50%, var(--or) 72%, var(--or3));
  box-shadow:inset 0 0 calc(var(--ep) * .5) rgba(120,78,10,.6); }
/* Stries de frappe sur le bord, comme une vraie piece */
.lum-tranche i:nth-child(odd){ filter:brightness(1.12); }
/* L'image occupe le champ central (r = 79,5 sur 100), pas le cadre */
.lum-face .lum-centre{ position:absolute; left:50%; top:50%; width:79.5%; height:79.5%;
  transform:translate(-50%,-50%); border-radius:50%; object-fit:cover; display:block; }
/* Pas d'image : un emblème au centre, sur le bleu nuit de la référence */
.lum-face .lum-embleme{ position:absolute; font-size:calc(var(--cp) * .30); line-height:1; z-index:1;
  filter:drop-shadow(0 0 calc(var(--cp) * .07) rgba(245,196,81,.95)); }
/* (le liseré ciselé est désormais tracé dans l'ornement SVG) */
/* ── Reflet qui balaie la pièce ──
   Le voile épouse EXACTEMENT la pièce (inset:0) et ne bouge pas : ses coins carrés tombent
   hors du cercle et sont découpés par le parent, aucune arête droite ne peut apparaître.
   C'est le dégradé qui voyage : deux fois plus grand que le voile, il glisse d'un bord à
   l'autre, donc la bande de lumière traverse toute la pièce avant d'en sortir. */
.lum-face::before{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  z-index:2; mix-blend-mode:screen;
  background:linear-gradient(115deg,
    transparent 24%,
    rgba(255,255,255,.10) 38%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.10) 62%,
    transparent 76%);
  background-size:200% 200%; background-repeat:no-repeat;
  animation:lumReflet 3s ease-in-out infinite; }
@keyframes lumReflet{
  0%,100% { background-position:0% 0%; }       /* la bande attend d'un côté */
  50%     { background-position:100% 100%; }   /* elle est ressortie de l'autre */
}

/* ── Le ballet : chute, rebonds, rotation qui accélère puis ralentit ──
   Deux animations superposées : la hauteur sur le conteneur, la rotation sur la pièce.
   Elles sont indépendantes pour que la pièce continue de tourner après avoir touché le sol. */
.lum-piece-wrap.joue{ animation:lumChute 2.1s cubic-bezier(.4,0,.75,1) forwards; }
@keyframes lumChute{
  0%   { transform:translateY(-125vh) scale(.5); }
  26%  { transform:translateY(0) scale(1); }                      /* impact */
  29%  { transform:translateY(2%) scaleX(1.12) scaleY(.88); }     /* écrasement */
  34%  { transform:translateY(-34%) scaleX(.94) scaleY(1.08); }   /* 1er rebond, haut */
  45%  { transform:translateY(0) scaleX(1.06) scaleY(.95); }
  54%  { transform:translateY(-16%) scale(1); }                   /* 2e rebond */
  64%  { transform:translateY(0) scaleX(1.03) scaleY(.98); }
  72%  { transform:translateY(-6%) scale(1); }
  80%  { transform:translateY(0) scaleX(1.01) scaleY(.99); }
  87%  { transform:translateY(-2%); }
  100% { transform:translateY(0) scale(1); }
}
/* La pièce tourne 7 tours en 6,2 s, mais SURTOUT : les deux derniers tours prennent
   la moitié du temps. C'est là qu'on lit les visuels de pile et de face, l'un après
   l'autre, au lieu d'un éclair doré illisible. Le timing est dans les étapes, pas dans
   une courbe : on maîtrise exactement la vitesse à chaque tour. */
.lum-piece.tourne{ animation:lumRotation 6.2s linear forwards; }
@keyframes lumRotation{
  0%   { transform:rotateX(18deg) rotateY(0deg)    scale(.97); }
  8%   { transform:rotateX(14deg) rotateY(360deg); }     /* lancé */
  20%  { transform:rotateX(10deg) rotateY(1080deg); }    /* plein régime : 2 tours */
  34%  { transform:rotateX(6deg)  rotateY(1800deg); }
  48%  { transform:rotateX(4deg)  rotateY(2160deg); }    /* ça ralentit */
  64%  { transform:rotateX(5deg)  rotateY(2520deg); }    /* 1 tour lisible */
  82%  { transform:rotateX(7deg)  rotateY(2700deg); }    /* un demi-tour, bien lent */
  94%  { transform:rotateX(9deg)  rotateY(2510deg) scale(1.03); }  /* léger retour, comme une pièce qui se pose */
  100% { transform:rotateX(8deg)  rotateY(2520deg) scale(1); }     /* 7 tours : face PILE */
}
/* Variante : la pièce s'arrête sur l'autre face (un demi-tour de plus) */
@keyframes lumRotationFace{
  0%   { transform:rotateX(18deg) rotateY(0deg)    scale(.97); }
  8%   { transform:rotateX(14deg) rotateY(360deg); }
  20%  { transform:rotateX(10deg) rotateY(1080deg); }
  34%  { transform:rotateX(6deg)  rotateY(1800deg); }
  48%  { transform:rotateX(4deg)  rotateY(2160deg); }
  64%  { transform:rotateX(5deg)  rotateY(2520deg); }
  82%  { transform:rotateX(7deg)  rotateY(2880deg); }
  94%  { transform:rotateX(9deg)  rotateY(2690deg) scale(1.03); }
  100% { transform:rotateX(8deg)  rotateY(2700deg) scale(1); }   /* 7 tours + un demi : face FACE */
}

/* Impact : l'onde de choc au sol */
.lum-onde{ position:absolute; width:calc(var(--cp) * 1.1); height:calc(var(--cp) * .26);
  border-radius:50%; background:radial-gradient(ellipse, rgba(245,196,81,.55), transparent 70%);
  opacity:0; pointer-events:none; animation:lumOnde 1.6s ease-out forwards; animation-delay:.55s; }
@keyframes lumOnde{ 0%{ opacity:.9; transform:scale(.2) } 60%{ opacity:.35; transform:scale(2.4) } 100%{ opacity:0; transform:scale(3.2) } }

/* Éclats projetés à l'impact */
.lum-eclat{ position:absolute; width:calc(var(--cp) * .035); height:calc(var(--cp) * .035);
  border-radius:50%; background:var(--or2); pointer-events:none; opacity:0;
  box-shadow:0 0 calc(var(--cp) * .06) var(--or);
  animation:lumEclat 1.25s cubic-bezier(.1,.7,.3,1) forwards; animation-delay:.55s; }
@keyframes lumEclat{ 0%{ opacity:1; transform:translate(0,0) scale(1) } 100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(.2) } }

/* ── Le panneau de récupération ── */
.lum-panneau{ position:relative; margin-top:calc(var(--cp) * .18); text-align:center;
  opacity:0; transform:translateY(22px); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.3); max-width:min(92vw, 520px); }
.lum-panneau.on{ opacity:1; transform:none; pointer-events:auto; }
.lum-titre{ font-family:var(--font-head), Georgia, serif; font-size:clamp(20px, 4.4vw, 34px);
  font-weight:800; letter-spacing:2px; text-transform:uppercase;
  background:linear-gradient(180deg, var(--or2), var(--or) 55%, var(--or3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(245,196,81,.45)); }
.lum-gain{ font-family:var(--font-head), Georgia, serif; font-size:clamp(34px, 9vw, 64px);
  font-weight:900; color:var(--or2); line-height:1.05; margin:4px 0 2px;
  text-shadow:0 0 24px rgba(245,196,81,.75); }
.lum-sous{ font-size:clamp(12px, 2.6vw, 14px); color:#d9c79b; margin-bottom:4px; }
.lum-rattrap{ display:inline-block; margin-top:8px; padding:5px 14px; border-radius:999px;
  background:rgba(245,196,81,.14); border:1px solid rgba(245,196,81,.45);
  color:var(--or2); font-size:clamp(11px, 2.4vw, 13px); font-weight:700; }
.lum-btn{ display:block; margin:18px auto 0; padding:13px 34px; border-radius:999px; cursor:pointer;
  font-family:var(--font-head), Georgia, serif; font-size:clamp(14px, 3.2vw, 18px);
  font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#2a1c02;
  background:linear-gradient(180deg, var(--or2), var(--or) 60%, var(--or3));
  border:1px solid rgba(255,234,160,.8);
  box-shadow:0 6px 24px rgba(245,196,81,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .14s, box-shadow .14s; }
.lum-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(245,196,81,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.lum-btn:active{ transform:translateY(0); }
.lum-btn[disabled]{ opacity:.6; cursor:default; transform:none; }
.lum-passer{ display:block; margin:12px auto 0; background:none; border:none; cursor:pointer;
  color:#8d7c57; font-size:12px; font-family:inherit; }
.lum-passer:hover{ color:#d9c79b; }
.lum-face-sortie{ font-size:clamp(11px, 2.4vw, 13px); color:#8d7c57; margin-top:10px; font-style:italic; }

/* (l'ancienne pluie de pièces est remplacée par la gerbe, plus bas) */

/* Mouvement réduit : on garde la pièce et le résultat, sans le ballet */
@media (prefers-reduced-motion:reduce){
  .lum-piece-wrap.joue, .lum-piece.tourne, .lum-halo, .lum-anneau,
  .lum-face::before, .lum-onde, .lum-eclat{ animation:none !important; }
  .lum-piece{ transform:rotateY(180deg); }
}

/* ── Pastille de solde, posée dans la page du projet ── */
.lum-solde{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(245,196,81,.18), rgba(169,117,28,.14));
  border:1px solid rgba(245,196,81,.45); color:#f0d79a; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; }
.lum-solde:hover{ background:rgba(245,196,81,.28); }
.lum-solde b{ font-variant-numeric:tabular-nums; }

/* ══ RÉCUPÉRATION ════════════════════════════════════════════
   L'ancienne version se contentait de remplacer du texte et de faire tomber des emojis.
   Ici c'est une vraie séquence : la pièce se charge, part vers l'écran dans un éclair,
   explose en une pluie de pièces, et le solde se met à défiler jusqu'à son nouveau total. */

/* 1. La pièce se ramasse, puis fonce vers le spectateur et se dissout dans la lumière */
.lum-piece-wrap.envol{ animation:lumEnvol 1.05s cubic-bezier(.5,-0.4,.3,1) forwards !important; }
@keyframes lumEnvol{
  0%   { transform:translateY(0) scale(1); opacity:1; }
  22%  { transform:translateY(7%) scale(.84) rotateZ(-6deg); }   /* elle se charge */
  46%  { transform:translateY(-6%) scale(1.25) rotateZ(3deg); }
  100% { transform:translateY(-18%) scale(3.4) rotateZ(10deg); opacity:0; }
}

/* 2. L'éclair : tout l'écran se remplit d'or une fraction de seconde */
.lum-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; z-index:3;
  background:radial-gradient(circle at 50% 42%, rgba(255,245,210,.95) 0%, rgba(245,196,81,.55) 25%, transparent 62%);
  animation:lumFlash .72s ease-out forwards; animation-delay:.42s; }
@keyframes lumFlash{ 0%{ opacity:0; transform:scale(.4) } 18%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(1.5) } }

/* 3. L'onde de choc dorée qui part du centre */
.lum-choc{ position:absolute; top:50%; left:50%; width:var(--cp); height:var(--cp);
  margin:calc(var(--cp) / -2) 0 0 calc(var(--cp) / -2); border-radius:50%;
  border:calc(var(--cp) * .018) solid rgba(255,234,160,.9); opacity:0; pointer-events:none; z-index:3;
  animation:lumChoc 1.15s cubic-bezier(.1,.75,.25,1) forwards; animation-delay:.46s; }
.lum-choc.c2{ animation-delay:.60s; border-color:rgba(245,196,81,.55); }
.lum-choc.c3{ animation-delay:.74s; border-color:rgba(245,196,81,.3); }
@keyframes lumChoc{ 0%{ opacity:1; transform:scale(.3) } 100%{ opacity:0; transform:scale(3.4) } }

/* 4. La gerbe : des pièces projetées en arc, qui retombent et roulent sur elles-mêmes.
      Chaque pièce porte sa propre trajectoire en variables (--dx, --dy, --rot, --tour). */
.lum-gerbe{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
.lum-jet{ position:absolute; top:46%; left:50%; font-size:calc(var(--cp) * .17); line-height:1;
  opacity:0; will-change:transform, opacity;
  filter:drop-shadow(0 0 calc(var(--cp) * .05) rgba(245,196,81,.8));
  animation:lumJet var(--duree, 1.6s) cubic-bezier(.22,.68,.5,1) forwards; animation-delay:var(--retard, 0s); }
@keyframes lumJet{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(0deg); }
  12%  { opacity:1; }
  45%  { transform:translate(calc(-50% + var(--dx) * .72), calc(-50% + var(--dy))) scale(1.08) rotate(calc(var(--tour) * .5)); }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 62vh)) scale(.7) rotate(var(--tour)); }
}

/* 5. Le panneau d'arrivée : le gain claque, puis le solde défile */
.lum-panneau.gagne{ animation:lumPanneauGagne .6s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes lumPanneauGagne{ 0%{ opacity:0; transform:translateY(26px) scale(.9) } 100%{ opacity:1; transform:none } }
.lum-gain.claque{ animation:lumClaque .75s cubic-bezier(.2,.9,.25,1.6) both; animation-delay:.1s; }
@keyframes lumClaque{
  0%   { transform:scale(.2); opacity:0; filter:blur(8px) }
  45%  { transform:scale(1.22); opacity:1; filter:blur(0) }
  70%  { transform:scale(.96) }
  100% { transform:scale(1) }
}
/* Le compteur du solde, qui défile */
.lum-solde-roule{ display:inline-block; font-variant-numeric:tabular-nums; font-weight:900;
  color:var(--or2); text-shadow:0 0 14px rgba(245,196,81,.6); }

/* Quelques étincelles qui montent du panneau */
.lum-etincelle{ position:absolute; width:calc(var(--cp) * .025); height:calc(var(--cp) * .025);
  border-radius:50%; background:var(--or2); opacity:0; pointer-events:none;
  box-shadow:0 0 calc(var(--cp) * .05) var(--or);
  animation:lumEtincelle 1.5s ease-out forwards; animation-delay:var(--retard, 0s); }
@keyframes lumEtincelle{
  0%   { opacity:0; transform:translateY(0) scale(.4) }
  20%  { opacity:1; transform:translateY(-14vh) scale(1) }
  100% { opacity:0; transform:translateY(-40vh) scale(.2) }
}

@media (prefers-reduced-motion:reduce){
  .lum-piece-wrap.envol, .lum-flash, .lum-choc, .lum-jet,
  .lum-panneau.gagne, .lum-gain.claque, .lum-etincelle{ animation:none !important; opacity:1 !important; }
  .lum-piece-wrap.envol{ opacity:0 !important; }
}