/* =====================================================================
   JEUX, COMPTE JOUEUR & PAIEMENTS — feuille de style complémentaire
   Chargée après site.css : réutilise les variables du thème actif
   (couleurs, polices, arrondis, ombres) en clair comme en sombre.
   Les « scènes » de jeu (roue, carte à gratter, coffres) sont posées
   sur une arène sombre forêt & or, identique dans les deux thèmes.
   ===================================================================== */

/* ---------- 0. Variables & utilitaires ---------- */
:root {
  --gm-gold: var(--c-accent, #c9a96e);
  --gm-gold-rgb: var(--c-accent-rgb, 201, 169, 110);
  --gm-gold-light: #f3e3b5;
  --gm-deep: var(--c-secondary, #0a3d2e);
  --gm-forest: #1a6b4b;
  --gm-arena: radial-gradient(ellipse at 50% 30%, rgba(var(--gm-gold-rgb), .2), transparent 62%), radial-gradient(ellipse at 10% 100%, rgba(74, 198, 132, .14), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--gm-deep) 92%, #fff), color-mix(in srgb, var(--gm-deep) 72%, #000));
  --gm-ok: var(--c-success-2, #15803d);
  --gm-ko: var(--c-danger-2, #e11d48);
  --gm-warn: var(--c-warning-2, #d97706);
}
.muted { color: var(--c-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono, code.hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
code.hash { display: block; margin: .35rem 0; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text); font-size: .78rem; line-height: 1.5; word-break: break-all; overflow-wrap: anywhere; }
body.has-overlay { overflow: hidden; }
/* L'attribut hidden doit l'emporter sur les display définis ci-dessous */
.game-stage [hidden], .pay-modal[hidden], .pay-modal [hidden], .pay-status-card [hidden], .acc-main [hidden], .raffle-stage [hidden], .quiz-stage [hidden] { display: none !important; }
.btn .btn-sub { display: inline-flex; align-items: center; padding: .18em .55em; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .74rem; font-weight: 700; letter-spacing: .01em; }
.btn-ghost .btn-sub { background: var(--c-primary-soft); }
@keyframes gm-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes gm-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes gm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gm-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gm-gold-rgb), .55), 0 18px 40px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 0 0 12px rgba(var(--gm-gold-rgb), 0), 0 18px 40px rgba(0, 0, 0, .35); } }
@keyframes gm-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* ---------- 1. En-tête : langue, compte, solde ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin-inline: .15rem; border-radius: 999px; border: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-surface) 70%, transparent); }
.lang-switch a { min-width: 2.15rem; height: 2.15rem; display: grid; place-items: center; padding: 0 .45rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--c-muted); transition: background-color .2s, color .2s; }
.lang-switch a:hover { color: var(--c-primary-text, var(--c-primary)); background: var(--c-primary-soft); }
.lang-switch a.is-active { background: var(--c-btn, var(--c-primary)); color: var(--c-on-primary); box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), .28); }
[data-header-style="transparent"].is-home .site-header:not(.is-scrolled):not(.nav-open) .lang-switch { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
[data-header-style="transparent"].is-home .site-header:not(.is-scrolled):not(.nav-open) .lang-switch a:not(.is-active) { color: rgba(255, 255, 255, .85); }
@media (max-width: 420px) {
  /* Petit écran : seule l'autre langue est proposée, en un bouton */
  .lang-switch { padding: 0; border: 0; background: none; margin: 0; }
  .lang-switch a.is-active { display: none; }
  .lang-switch a { min-width: 2.5rem; height: 2.5rem; color: var(--c-text); }
}
.account-btn.is-logged { color: var(--c-primary-text, var(--c-primary)); }
.account-btn .acc-badge { position: absolute; top: -.15rem; right: -.5rem; min-width: 1.35rem; height: 1.2rem; padding: 0 .32rem; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light)); color: var(--gm-deep); font-size: .62rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--c-bg), 0 3px 8px rgba(0, 0, 0, .18); white-space: nowrap; pointer-events: none; }
[data-balance].bump, [data-balance-badge].bump { animation: gm-bump .55s var(--anim-ease, ease); }
[data-balance] { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- 2. Liste des jeux (cartes) ---------- */
.games-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .games-grid, .games-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .games-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .games-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.game-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); overflow: hidden; transition: transform .45s var(--anim-ease), box-shadow .45s var(--anim-ease), border-color .3s; }
.game-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(var(--gm-gold-rgb), .55); }
.gc-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gm-deep); }
.gc-media img, .gc-media picture { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--anim-ease); }
.game-card:hover .gc-media img { transform: scale(1.07); }
.gc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .55)); pointer-events: none; }
.gc-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gm-gold-light); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gc, var(--c-primary)) 70%, #fff) 0, transparent 55%), linear-gradient(145deg, var(--gc, var(--c-primary)), var(--gm-deep)); }
.gc-art::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(var(--gm-gold-rgb), .45); animation: spin 40s linear infinite; }
.gc-art .icon { position: relative; width: 4.2rem; height: 4.2rem; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)); transition: transform .6s var(--anim-ease); }
.game-card:hover .gc-art .icon { transform: scale(1.12) rotate(-6deg); }
.gc-badge { position: absolute; z-index: 1; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); }
.gc-badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.gc-badge.is-open { background: rgba(21, 128, 61, .92); }
.gc-badge.is-open::before { background: #a7f3c4; box-shadow: 0 0 0 3px rgba(167, 243, 196, .35); animation: pulse-dot 2s ease-in-out infinite; }
.gc-badge.is-test { background: rgba(217, 119, 6, .94); }
.gc-badge.is-soon { background: rgba(0, 0, 0, .58); color: var(--gm-gold-light); }
.gc-type { position: absolute; z-index: 1; left: .8rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.gc-body { display: flex; flex-direction: column; flex: 1; gap: .45rem; padding: 1.25rem 1.3rem 1.2rem; }
.gc-body h3 { margin: 0; font-size: 1.22rem; }
.gc-body h3 a { color: var(--c-text); }
.gc-body h3 a::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.game-card:hover .gc-body h3 a { color: var(--c-primary-text, var(--c-primary)); }
.gc-sub { margin: 0; font-size: .9rem; font-weight: 650; color: color-mix(in srgb, var(--gm-gold) 70%, var(--c-text)); }
.gc-text { margin: 0; color: var(--c-muted); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gc-meta { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--c-primary-text, var(--c-primary)); }
.gc-foot { position: relative; z-index: 1; margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-top: 1px dashed var(--c-border); }
.gc-price, .side-price { display: grid; line-height: 1.15; }
.gp-credits { font-weight: 800; color: var(--c-text); }
.gp-money { font-size: .78rem; font-weight: 550; color: var(--c-muted); font-family: var(--font-body); letter-spacing: 0; }
.chip .gp-money { color: inherit; opacity: .8; margin-left: .35rem; font-size: .9em; }
.chip .gp-credits { color: inherit; }

/* ---------- 3. Bandeaux d'état, mentions légales ---------- */
.games-notice { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-surface); }
.games-notice > .icon { flex: none; width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: .9rem; }
.games-notice strong { display: block; font-family: var(--font-heading); font-size: 1.08rem; margin-bottom: .2rem; }
.games-notice p { margin: 0 0 .6rem; color: var(--c-muted); font-size: .94rem; }
.games-notice p:last-child { margin-bottom: 0; }
.games-notice.is-test { border-color: rgba(217, 119, 6, .35); background: linear-gradient(120deg, rgba(217, 119, 6, .1), transparent 70%), var(--c-surface); }
.games-notice.is-test > .icon { background: rgba(217, 119, 6, .16); color: var(--gm-warn); }
.games-notice.is-closed { border: 0; color: #fff; background: radial-gradient(ellipse at 100% 0, rgba(var(--gm-gold-rgb), .28), transparent 55%), linear-gradient(135deg, var(--gm-deep), color-mix(in srgb, var(--gm-deep) 65%, var(--gm-forest))); box-shadow: var(--shadow); }
.games-notice.is-closed strong { color: #fff; }
.games-notice.is-closed p { color: rgba(255, 255, 255, .85); }
.games-notice.is-closed > .icon { background: rgba(var(--gm-gold-rgb), .2); color: var(--gm-gold-light); }
.games-legal { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--c-border); display: grid; gap: .5rem; font-size: .84rem; color: var(--c-muted); }
.games-legal p { display: flex; gap: .5rem; align-items: flex-start; margin: 0; }
.games-legal .icon { color: var(--c-primary-text, var(--c-primary)); margin-top: .15rem; }
.games-legal a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 4. Page d'un jeu : en-tête, mise en page, carte latérale ---------- */
.game-hero:not(.has-image) { background: radial-gradient(ellipse at 12% 0, color-mix(in srgb, var(--gc, var(--c-primary)) 22%, transparent), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(var(--gm-gold-rgb), .2), transparent 50%), var(--c-surface); }
.game-hero .hero-chips .chip { font-size: .84rem; padding: .55em .95em; }
.game-layout { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
@media (min-width: 1000px) { .game-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); } }
.game-stage-wrap { min-width: 0; }
.game-side .side-card { padding: 1.6rem; border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); display: grid; gap: .9rem; }
.side-balance { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 .4rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--gm-deep), color-mix(in srgb, var(--gm-deep) 70%, var(--gm-forest))); color: #fff; }
.side-balance span { grid-column: 1 / -1; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .72); }
.side-balance strong { font-family: var(--font-heading); font-size: 2rem; line-height: 1.1; color: var(--gm-gold-light); }
.side-balance small { color: rgba(255, 255, 255, .75); font-weight: 600; justify-self: start; }
.side-warn { display: flex; gap: .55rem; margin: 0; padding: .75rem .85rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 550; background: rgba(217, 119, 6, .1); color: var(--c-warning); border: 1px solid rgba(217, 119, 6, .25); }
.side-warn .icon { flex: none; margin-top: .1rem; }
.game-info { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.game-info > .prose { max-width: 72ch; }
.steps-game { grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 640px) { .steps-game { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps-game { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.steps-game .step { padding: 1.6rem 1.2rem 1.4rem; border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); }
.steps-game .step-icon { width: 4.2rem; height: 4.2rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gm-forest) 60%, #fff), var(--gm-deep)); color: var(--gm-gold-light); box-shadow: 0 0 0 5px rgba(var(--gm-gold-rgb), .18); }
.steps-game .step-icon .icon { width: 1.7rem; height: 1.7rem; }
.steps-game .step-num { position: absolute; top: 1rem; left: 1rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light)); color: var(--gm-deep); font-weight: 800; font-size: .85rem; }
.steps-game .step p { margin: 0; color: var(--c-muted); font-size: .94rem; }
.game-rules { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); overflow: hidden; }
.game-rules summary { display: flex; align-items: center; gap: .6rem; min-height: 3.4rem; padding: .9rem 1.2rem; cursor: pointer; font-weight: 700; list-style: none; }
.game-rules summary::-webkit-details-marker { display: none; }
.game-rules summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--c-primary-text, var(--c-primary)); transition: transform .3s var(--anim-ease); }
.game-rules[open] summary::after { transform: rotate(45deg); }
.game-rules summary .icon { color: var(--c-primary-text, var(--c-primary)); }
.game-rules .prose { padding: 0 1.2rem 1.3rem; font-size: .96rem; }

/* ---------- 5. Lots, chances, gagnants ---------- */
.prize-table-wrap h2, .winners h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem); }
.prize-table-wrap > p { margin: 0 0 1rem; }
.prize-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .94rem; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg); }
.prize-table th { text-align: left; padding: .8rem .9rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-2); font-weight: 700; }
.prize-table td { padding: .85rem .9rem; border-top: 1px solid var(--c-border); vertical-align: top; }
.prize-table th.num, .prize-table td.num { text-align: right; white-space: nowrap; }
.prize-table td .icon { color: var(--gm-gold); }
.prize-table tbody tr:hover { background: var(--c-primary-soft); }
@media (max-width: 560px) {
  .prize-table { font-size: .86rem; }
  .prize-table th, .prize-table td { padding: .65rem .55rem; }
  .prize-table th:nth-child(2), .prize-table td:nth-child(2) { display: none; }
}
.prize-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 760px) { .prize-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prize-rank li { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--c-bg); border: 1px solid var(--c-border); }
.prize-rank li > .icon { flex: none; width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: .85rem; background: rgba(var(--gm-gold-rgb), .16); color: color-mix(in srgb, var(--gm-gold) 75%, var(--c-text)); }
.prize-rank li div { display: grid; gap: .15rem; }
.prize-rank small { color: var(--c-muted); }
.winners ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 760px) { .winners ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.winners li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "i n d" "i p d"; gap: 0 .75rem; align-items: center; padding: .75rem 1rem; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-border); }
.winners li > .icon { grid-area: i; color: var(--gm-gold); width: 1.5rem; height: 1.5rem; }
.winners li strong { grid-area: n; }
.winners li span { grid-area: p; color: var(--c-muted); font-size: .88rem; }
.winners li small { grid-area: d; font-size: .78rem; white-space: nowrap; }

/* ---------- 6. Scène de jeu (commune) ---------- */
.game-stage { position: relative; display: grid; justify-items: center; gap: 1.4rem; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3.5vw, 2.25rem); border-radius: calc(var(--radius-lg) * 1.15); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.game-stage.stage-wheel, .game-stage.stage-scratch, .game-stage.stage-chests { background: var(--gm-arena); color: #fff; border-color: rgba(var(--gm-gold-rgb), .35); box-shadow: 0 30px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); }
.game-stage.stage-wheel::before, .game-stage.stage-scratch::before, .game-stage.stage-chests::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.5px), radial-gradient(rgba(var(--gm-gold-rgb), .6) 1px, transparent 1.5px);
  background-size: 90px 90px, 140px 140px; background-position: 0 0, 40px 70px;
}
.game-stage.stage-raffle, .game-stage.stage-quiz { justify-items: stretch; background: var(--c-bg); }
.stage-wheel .btn-ghost, .stage-scratch .btn-ghost, .stage-chests .btn-ghost { --b-fg: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .07); }
.stage-wheel .btn-ghost:hover, .stage-scratch .btn-ghost:hover, .stage-chests .btn-ghost:hover { --b-fg: #fff; background: rgba(255, 255, 255, .16); border-color: #fff; }
.stage-wheel .btn:not(.btn-ghost), .stage-scratch .btn:not(.btn-ghost) { --b-bg: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light) 55%, var(--gm-gold)); --b-fg: var(--gm-deep); box-shadow: 0 12px 30px rgba(var(--gm-gold-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.stage-wheel .btn:not(.btn-ghost) .btn-sub, .stage-scratch .btn:not(.btn-ghost) .btn-sub { background: rgba(10, 61, 46, .14); }
.play-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; width: 100%; }
.play-bar .btn { white-space: normal; text-align: center; }
@media (max-width: 520px) { .play-bar .btn { width: 100%; } }
.play-help { margin: 0; text-align: center; font-weight: 600; opacity: .9; }
.play-msg { flex-basis: 100%; min-height: 1.4em; margin: 0; text-align: center; font-size: .92rem; font-weight: 600; }
.play-msg:empty { min-height: 0; }
.play-msg.is-error { color: var(--gm-ko); }
.play-msg.is-success { color: var(--gm-ok); }
.play-msg.is-warning { color: var(--gm-warn); }
.stage-wheel .play-msg.is-error, .stage-scratch .play-msg.is-error, .stage-chests .play-msg.is-error { color: #fda4af; }
.stage-wheel .play-msg.is-success, .stage-scratch .play-msg.is-success, .stage-chests .play-msg.is-success { color: #86efac; }
.stage-wheel .play-msg, .stage-scratch .play-msg, .stage-chests .play-msg { color: rgba(255, 255, 255, .88); }

/* ---------- 7. Roue de la fortune ---------- */
.wheel-wrap { position: relative; width: min(100%, 28rem); aspect-ratio: 1; margin: 1.2rem auto .4rem; }
.wheel-wrap::before { content: ""; position: absolute; inset: -6%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gm-gold-rgb), .35), transparent 68%); opacity: .55; transition: opacity .6s ease; }
.wheel-wrap.is-spinning::before { opacity: 1; animation: gm-wheel-aura 1.4s ease-in-out infinite; }
@keyframes gm-wheel-aura { 50% { transform: scale(1.04); } }
.wheel-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .45)); }
.wheel-rotor { transform-box: view-box; transform-origin: 200px 200px; will-change: transform; }
.wheel-svg text { font-family: var(--font-body); paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 2px; letter-spacing: .01em; pointer-events: none; }
.wheel-bulb { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.wheel-wrap.is-spinning .wheel-bulb { animation: gm-bulb .5s steps(2, jump-none) infinite; }
.wheel-wrap.is-spinning .wheel-bulb:nth-of-type(2n) { animation-delay: .25s; }
@keyframes gm-bulb { 0% { fill: #fff; } 100% { fill: var(--gm-gold); } }
.wheel-pointer { position: absolute; z-index: 2; top: -4.5%; left: 50%; width: 11%; aspect-ratio: 3 / 4; translate: -50% 0; background: linear-gradient(180deg, var(--gm-gold-light), var(--gm-gold) 60%, color-mix(in srgb, var(--gm-gold) 70%, #000)); clip-path: polygon(50% 100%, 0 28%, 12% 0, 88% 0, 100% 28%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); transform-origin: 50% 20%; }
.wheel-pointer::after { content: ""; position: absolute; left: 50%; top: 16%; width: 34%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--gm-deep); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.wheel-wrap.is-spinning .wheel-pointer { animation: gm-tick .16s ease-in-out infinite alternate; }
@keyframes gm-tick { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
.wheel-hub { position: absolute; z-index: 2; left: 50%; top: 50%; width: 23%; min-width: 3.25rem; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; padding: .4rem; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); background: radial-gradient(circle at 35% 30%, var(--gm-gold-light), var(--gm-gold) 55%, color-mix(in srgb, var(--gm-gold) 65%, #000)); color: var(--gm-deep); font-family: var(--font-heading); font-weight: 800; font-size: clamp(.68rem, 2.6vw, .95rem); line-height: 1.05; text-align: center; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .6); transition: transform .25s var(--anim-ease), box-shadow .25s; animation: gm-glow 2.6s ease-in-out infinite; }
.wheel-hub .icon { width: 42%; height: 42%; }
.wheel-hub:hover { transform: scale(1.07); }
.wheel-hub:active { transform: scale(.95); }
.wheel-hub:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 50%; }
.wheel-wrap.is-spinning .wheel-hub { animation: none; pointer-events: none; }

/* ---------- 8. Carte à gratter ---------- */
.scratch-wrap { display: grid; justify-items: center; gap: .9rem; width: 100%; }
.scratch-card { position: relative; width: min(100%, 24rem); aspect-ratio: 1; padding: 4.5%; border-radius: calc(var(--radius-lg) * 1.1); background: linear-gradient(145deg, var(--gm-gold-light), var(--gm-gold) 45%, color-mix(in srgb, var(--gm-gold) 70%, #000)); box-shadow: 0 26px 50px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.scratch-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4%; padding: 4%; border-radius: var(--radius); background: color-mix(in srgb, var(--gm-deep) 85%, #000); }
.scratch-cell { display: grid; place-items: center; border-radius: calc(var(--radius-sm) + 2px); background: radial-gradient(circle at 50% 35%, #fffdf6, #f1e7cf); color: var(--gm-deep); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); transition: transform .35s var(--anim-ease), background .35s, box-shadow .35s; }
.scratch-cell .icon { width: 52%; height: 52%; stroke-width: 1.7; }
.scratch-cell .sym-emoji { font-size: clamp(1.6rem, 9vw, 2.6rem); line-height: 1; }
.scratch-cell.is-match { background: radial-gradient(circle at 50% 35%, #fff7d6, var(--gm-gold)); color: var(--gm-deep); box-shadow: 0 0 0 3px #fff, 0 0 24px rgba(var(--gm-gold-rgb), .9); animation: gm-pop .6s var(--anim-ease) both; }
.scratch-canvas { position: absolute; inset: 4.5%; width: 91%; height: 91%; border-radius: var(--radius); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; z-index: 2; }
.scratch-canvas:active { cursor: grabbing; }
.scratch-idle { position: absolute; inset: 4.5%; z-index: 3; display: grid; place-content: center; justify-items: center; gap: .7rem; padding: 1.2rem; border-radius: var(--radius); text-align: center; color: var(--gm-deep); font-weight: 750; font-size: clamp(.92rem, 3.6vw, 1.08rem); line-height: 1.35;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 10px, transparent 10px 20px), linear-gradient(110deg, var(--gm-gold) 20%, var(--gm-gold-light) 40%, var(--gm-gold) 60%); background-size: auto, 200% 100%; animation: gm-shimmer 4s linear infinite; }
.scratch-idle .icon { width: 3rem; height: 3rem; padding: .6rem; border-radius: 50%; background: rgba(10, 61, 46, .12); }
.scratch-hint { margin: 0; font-weight: 700; letter-spacing: .02em; color: var(--gm-gold-light); text-align: center; }

/* ---------- 9. Coffres mystères ---------- */
.chests-wrap { width: 100%; display: grid; justify-items: center; gap: 1rem; }
.chests-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); color: var(--gm-gold-light); text-align: center; }
.chests-grid { width: min(100%, 40rem); display: grid; gap: clamp(.7rem, 2.6vw, 1.4rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chests-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; }
.chests-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .chests-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chest { position: relative; width: 100%; min-height: 44px; aspect-ratio: 1 / .92; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; -webkit-tap-highlight-color: transparent; transition: transform .35s var(--anim-ease), opacity .4s, filter .4s; }
.chest:hover:not([disabled]) { transform: translateY(-5px); }
.chest:focus-visible { outline: 3px solid var(--gm-gold-light); outline-offset: 4px; border-radius: 14px; }
.chest-box { position: absolute; left: 6%; right: 6%; bottom: 4%; height: 54%; border-radius: 6px 6px 14px 14px;
  background: linear-gradient(90deg, transparent 44%, rgba(var(--gm-gold-rgb), .95) 44% 56%, transparent 56%), linear-gradient(180deg, rgba(var(--gm-gold-rgb), .95) 0 9%, transparent 9% 88%, rgba(var(--gm-gold-rgb), .9) 88%), linear-gradient(180deg, #8a5a2b, #5c3a1a);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .2), 0 14px 24px rgba(0, 0, 0, .4); }
.chest-lid { position: absolute; z-index: 2; left: 4%; right: 4%; top: 12%; height: 34%; border-radius: 48% 48% 8px 8px / 70% 70% 8px 8px; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1);
  background: linear-gradient(90deg, transparent 44%, rgba(var(--gm-gold-rgb), .95) 44% 56%, transparent 56%), linear-gradient(180deg, #a06a36, #6d4520);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(var(--gm-gold-rgb), .9), 0 6px 12px rgba(0, 0, 0, .3); }
.chest-lock { position: absolute; left: 50%; top: -14%; translate: -50% 0; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 30%; background: linear-gradient(180deg, var(--gm-gold-light), var(--gm-gold)); color: #5c3a1a; box-shadow: 0 3px 6px rgba(0, 0, 0, .35); z-index: 3; transition: opacity .3s; }
.chest-lock .icon { width: 60%; height: 60%; }
.chest-num { position: absolute; z-index: 4; left: 50%; bottom: -2%; translate: -50% 50%; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; display: grid; place-items: center; border-radius: 999px; background: var(--gm-deep); border: 1.5px solid rgba(var(--gm-gold-rgb), .7); color: var(--gm-gold-light); font-size: .74rem; font-weight: 800; }
.chest-content { position: absolute; z-index: 3; left: 50%; top: 30%; width: 116%; translate: -50% -50%; display: grid; justify-items: center; gap: .3rem; opacity: 0; transform: scale(.4) translateY(30%); transition: opacity .35s ease .2s, transform .55s cubic-bezier(.3, 1.5, .5, 1) .2s; pointer-events: none; }
.cc-icon { width: clamp(2.3rem, 9vw, 3.2rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gm-gold-light)); color: var(--gm-deep); box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 8px 18px rgba(0, 0, 0, .35); }
.cc-icon .icon { width: 55%; height: 55%; }
.cc-name { max-width: 100%; padding: .2rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: clamp(.64rem, 2.3vw, .78rem); font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.chest.is-open .chest-lid { transform: rotateX(-118deg); }
.chest.is-open .chest-lock { opacity: 0; }
.chest.is-open .chest-content { opacity: 1; transform: scale(1) translateY(-18%); }
.chest.is-open .chest-box { background: radial-gradient(ellipse at 50% 0, rgba(255, 236, 170, .75), transparent 60%), linear-gradient(90deg, transparent 44%, rgba(var(--gm-gold-rgb), .95) 44% 56%, transparent 56%), linear-gradient(180deg, #8a5a2b, #5c3a1a); }
.chest.is-chosen { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 0 16px rgba(var(--gm-gold-rgb), .55)); }
.chest.is-shaking { animation: gm-shake .5s ease-in-out infinite; }
@keyframes gm-shake { 0%, 100% { transform: translateY(-6px) rotate(0); } 20% { transform: translateY(-6px) rotate(-5deg); } 40% { transform: translateY(-8px) rotate(5deg); } 60% { transform: translateY(-6px) rotate(-3deg); } 80% { transform: translateY(-7px) rotate(3deg); } }
.chest.is-win { filter: drop-shadow(0 0 22px rgba(var(--gm-gold-rgb), .95)); }
.chest.is-win .cc-icon { animation: gm-glow 1.8s ease-in-out infinite; }
.chest.is-other { opacity: .62; transform: scale(.94); filter: saturate(.6); cursor: default; }
.chest.is-other .cc-icon { background: rgba(255, 255, 255, .78); }
.chests-wrap.is-finished .chest:not(.is-other) { cursor: pointer; }
.chest[disabled] { cursor: default; }

/* ---------- 10. Tombola ---------- */
.raffle-stage { display: grid; gap: 1.5rem; width: 100%; }
.raffle-head { text-align: center; }
.raffle-head h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); margin-bottom: 1rem; }
.raffle-head > p { margin: 1rem 0 0; font-size: .92rem; }
.raffle-countdown { flex-wrap: nowrap; gap: clamp(.4rem, 1.6vw, 1rem); }
.raffle-countdown > div { flex: 1 1 0; min-width: 0; max-width: 6.4rem; padding: clamp(.75rem, 2vw, 1.1rem) .5rem; display: grid; justify-items: center; gap: .25rem; border-radius: var(--radius); background: linear-gradient(160deg, var(--gm-deep), color-mix(in srgb, var(--gm-deep) 70%, #000)); border: 1px solid rgba(var(--gm-gold-rgb), .4); box-shadow: var(--shadow-sm); }
.raffle-countdown strong { font-family: var(--font-heading); font-size: clamp(1.5rem, 1.1rem + 2.6vw, 2.8rem); line-height: 1; color: var(--gm-gold-light); font-variant-numeric: tabular-nums; }
.raffle-countdown span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .72); }
.raffle-buy { display: grid; justify-items: center; gap: .8rem; padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.raffle-buy > label { font-weight: 700; }
.raffle-buy .qty input { width: 3.6rem; }
.raffle-total { display: flex; align-items: baseline; gap: .6rem; }
.raffle-total span { color: var(--c-muted); font-size: .9rem; }
.raffle-total strong { font-family: var(--font-heading); font-size: 1.5rem; color: var(--c-text); }
.raffle-mine h3, .raffle-results h3, .quiz-board h3 { font-size: 1.1rem; margin-bottom: .75rem; }
.ticket-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ticket-pill { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--gm-deep);
  background: radial-gradient(circle at 0 50%, var(--c-bg) .38rem, transparent .4rem), radial-gradient(circle at 100% 50%, var(--c-bg) .38rem, transparent .4rem), linear-gradient(135deg, var(--gm-gold-light), var(--gm-gold));
  box-shadow: 0 3px 10px rgba(var(--gm-gold-rgb), .3); }
.ticket-pill .icon { opacity: .8; }
.ticket-pill.is-new { animation: gm-pop .6s var(--anim-ease) both; }
.acc-list .ticket-pill { background: radial-gradient(circle at 0 50%, var(--c-surface) .38rem, transparent .4rem), radial-gradient(circle at 100% 50%, var(--c-surface) .38rem, transparent .4rem), linear-gradient(135deg, var(--gm-gold-light), var(--gm-gold)); }
.fair-box { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px dashed rgba(var(--c-primary-rgb), .35); background: var(--c-primary-soft); font-size: .9rem; }
.fair-box > .icon { flex: none; width: 2.2rem; height: 2.2rem; color: var(--c-primary-text, var(--c-primary)); }
.fair-box > div { min-width: 0; flex: 1; }
.fair-box p { margin: .2rem 0 0; color: var(--c-muted); }
.fair-box a { font-weight: 650; font-size: .86rem; }
.raffle-results { padding-top: 1.25rem; border-top: 1px solid var(--c-border); }
.raffle-winners { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.raffle-winners li { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "r t n" "r p p"; gap: .1rem .75rem; align-items: center; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); }
.raffle-winners .rank { grid-area: r; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--gm-deep); color: var(--gm-gold-light); font-weight: 800; font-size: .9rem; }
.raffle-winners li:first-child .rank { background: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light)); color: var(--gm-deep); }
.raffle-winners strong { grid-area: t; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.raffle-winners span { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raffle-winners small { grid-area: p; color: var(--c-muted); }

/* ---------- 11. Quiz ---------- */
.quiz-stage { display: grid; gap: 1.5rem; width: 100%; }
.quiz-intro { display: grid; justify-items: center; text-align: center; gap: .4rem; }
.quiz-badge { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; border-radius: 50%; font-size: 2.1rem; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gm-forest) 55%, #fff), var(--gm-deep)); color: var(--gm-gold-light); box-shadow: 0 0 0 6px rgba(var(--gm-gold-rgb), .2), var(--shadow); margin-bottom: .4rem; }
.quiz-badge .icon { width: 2rem; height: 2rem; }
.quiz-facts { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.quiz-facts li { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: .88rem; font-weight: 600; }
.quiz-facts .icon { color: var(--c-primary-text, var(--c-primary)); }
.quiz-intro > p { max-width: 36rem; font-size: .93rem; }
.quiz-play { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); animation: gm-rise .4s var(--anim-ease); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .86rem; font-weight: 700; color: var(--c-muted); letter-spacing: .04em; text-transform: uppercase; }
.quiz-score { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(var(--gm-gold-rgb), .18); color: color-mix(in srgb, var(--gm-gold) 60%, var(--c-text)); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.quiz-score b { font-variant-numeric: tabular-nums; }
.quiz-timer { height: .55rem; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.quiz-timer span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gm-forest), #4ac684); transition: width .1s linear, background-color .3s; }
.quiz-timer span.is-low { background: linear-gradient(90deg, var(--gm-ko), var(--gm-warn)); animation: gm-blink .5s ease-in-out infinite alternate; }
@keyframes gm-blink { to { opacity: .55; } }
.quiz-q { margin: .4rem 0 .2rem; font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); line-height: 1.3; }
.quiz-answers { display: grid; gap: .65rem; }
@media (min-width: 700px) { .quiz-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quiz-answer { display: flex; align-items: center; gap: .8rem; min-height: 3.6rem; width: 100%; padding: .7rem 1rem; border-radius: var(--radius); border: 1.5px solid var(--c-border); background: var(--c-bg); color: var(--c-text); text-align: left; font-weight: 600; line-height: 1.35; transition: border-color .2s, background-color .2s, transform .2s var(--anim-ease), box-shadow .2s; }
.quiz-answer:hover:not([disabled]) { border-color: rgba(var(--c-primary-rgb), .55); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quiz-answer[disabled] { cursor: default; }
.qa-key { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .65rem; background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)); font-weight: 800; font-size: .9rem; transition: background-color .2s, color .2s; }
.quiz-answer.is-picked { border-color: var(--c-primary); background: var(--c-primary-soft); }
.quiz-answer.is-correct { border-color: var(--gm-ok); background: rgba(22, 163, 74, .12); animation: gm-pop .45s var(--anim-ease); }
.quiz-answer.is-correct .qa-key { background: var(--gm-ok); color: #fff; }
.quiz-answer.is-wrong { border-color: var(--gm-ko); background: rgba(225, 29, 72, .1); animation: gm-shake-x .4s ease; }
.quiz-answer.is-wrong .qa-key { background: var(--gm-ko); color: #fff; }
@keyframes gm-shake-x { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.quiz-feedback { min-height: 1.5rem; }
.quiz-feedback:empty { min-height: 0; }
.quiz-feedback strong { display: block; font-size: 1.02rem; }
.quiz-feedback .ok { color: var(--gm-ok); }
.quiz-feedback .ko { color: var(--gm-ko); }
.quiz-feedback p { margin: .35rem 0 0; color: var(--c-muted); font-size: .92rem; }
.quiz-done { animation: gm-rise .45s var(--anim-ease); }
.quiz-final { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 0, rgba(var(--gm-gold-rgb), .22), transparent 60%), var(--c-surface); border: 1px solid rgba(var(--gm-gold-rgb), .4); }
.quiz-final h2 { margin: .3rem 0 0; }
.quiz-final p { margin: 0; }
.quiz-big { font-family: var(--font-heading); font-size: clamp(2.6rem, 2rem + 3vw, 4rem); font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, var(--gm-forest), var(--gm-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quiz-big small { font-size: .35em; letter-spacing: .1em; text-transform: uppercase; -webkit-text-fill-color: var(--c-muted); color: var(--c-muted); }
.quiz-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; counter-reset: qb; }
.quiz-board li { counter-increment: qb; display: grid; grid-template-columns: 2rem 1fr auto auto; gap: .75rem; align-items: center; padding: .6rem .85rem; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); font-size: .92rem; }
.quiz-board li::before { content: counter(qb); width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); font-weight: 800; font-size: .82rem; }
.quiz-board li:nth-child(-n+3)::before { background: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light)); color: var(--gm-deep); }
.quiz-board li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-board li span { font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-board li small { color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* ---------- 12. Fenêtre de résultat & confettis ---------- */
.result-modal { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 1rem; animation: gm-fade-in .25s ease; }
.result-modal.is-out { opacity: 0; transition: opacity .25s ease; }
.rm-backdrop { position: absolute; inset: 0; background: rgba(4, 20, 14, .72); backdrop-filter: blur(6px); }
.rm-dialog { position: relative; width: min(100%, 28rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.2rem, 4vw, 2rem); border-radius: calc(var(--radius-lg) * 1.2); background: var(--c-bg); color: var(--c-text); text-align: center; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); animation: gm-rise .45s cubic-bezier(.3, 1.4, .5, 1); }
.rm-dialog h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: .2rem 0 .5rem; }
.rm-dialog p { margin: 0 0 .5rem; }
.rm-dialog .btn-row-center { margin-top: 1.4rem; }
.rm-icon { width: 5.4rem; height: 5.4rem; margin: 0 auto .6rem; display: grid; place-items: center; border-radius: 50%; font-size: 2.6rem; line-height: 1; background: var(--c-surface-2); }
.result-modal.is-win .rm-dialog { background: radial-gradient(ellipse at 50% -10%, rgba(var(--gm-gold-rgb), .35), transparent 60%), var(--c-bg); border: 1px solid rgba(var(--gm-gold-rgb), .55); }
.result-modal.is-win .rm-icon { background: radial-gradient(circle at 35% 30%, #fff8dc, var(--gm-gold)); box-shadow: 0 0 0 8px rgba(var(--gm-gold-rgb), .2); animation: gm-pop .7s var(--anim-ease) both, gm-glow 2.2s ease-in-out .7s infinite; }
.rm-prize { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); font-weight: 800; color: color-mix(in srgb, var(--gm-gold) 55%, var(--c-text)); }
.rm-test { display: inline-block; margin-top: .4rem !important; padding: .3rem .75rem; border-radius: 999px; background: rgba(217, 119, 6, .14); color: var(--c-warning); font-size: .8rem; font-weight: 700; }
.rm-ref { font-size: .78rem; color: var(--c-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.confetti-box { position: fixed; inset: 0; z-index: 2700; overflow: hidden; pointer-events: none; }
.result-modal .confetti-box { position: absolute; }
.confetti-box i { position: absolute; top: -12px; width: 9px; height: 15px; border-radius: 2px; opacity: .95; animation-name: gm-confetti; animation-timing-function: cubic-bezier(.25, .6, .4, 1); animation-fill-mode: forwards; }
.confetti-box i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
.confetti-box i:nth-child(4n) { width: 5px; height: 18px; }
@keyframes gm-confetti { 0% { translate: 0 -5vh; rotate: 0deg; opacity: 1; } 70% { opacity: 1; } 100% { translate: 6vw 108vh; rotate: 900deg; opacity: 0; } }
.confetti-box i:nth-child(2n) { animation-name: gm-confetti-l; }
@keyframes gm-confetti-l { 0% { translate: 0 -5vh; rotate: 0deg; opacity: 1; } 70% { opacity: 1; } 100% { translate: -7vw 108vh; rotate: -760deg; opacity: 0; } }

/* ---------- 13. Fenêtre de paiement ---------- */
.pay-modal { position: fixed; inset: 0; z-index: 2500; display: grid; align-items: end; justify-items: center; }
@media (min-width: 640px) { .pay-modal { align-items: center; padding: 1.5rem; } }
.pay-backdrop { position: absolute; inset: 0; background: rgba(4, 20, 14, .66); backdrop-filter: blur(5px); animation: gm-fade-in .25s ease; }
.pay-dialog { position: relative; width: min(100%, 32rem); max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem clamp(1.1rem, 4vw, 1.8rem) calc(1.4rem + env(safe-area-inset-bottom)); border-radius: calc(var(--radius-lg) * 1.2) calc(var(--radius-lg) * 1.2) 0 0; background: var(--c-bg); color: var(--c-text); box-shadow: 0 -20px 60px rgba(0, 0, 0, .35); animation: gm-sheet .35s var(--anim-ease); }
@media (min-width: 640px) { .pay-dialog { border-radius: calc(var(--radius-lg) * 1.2); padding-bottom: 1.6rem; box-shadow: 0 40px 90px rgba(0, 0, 0, .4); animation: gm-rise .35s var(--anim-ease); } }
@keyframes gm-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pay-dialog::before { content: ""; display: block; width: 2.6rem; height: 4px; margin: -.6rem auto .9rem; border-radius: 4px; background: var(--c-border); }
@media (min-width: 640px) { .pay-dialog::before { display: none; } }
.pay-dialog h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem); margin: 0 2.6rem .9rem 0; }
.pay-dialog .eyebrow { margin-bottom: .6rem; }
.pay-dialog .qr-close { z-index: 1; width: 2.75rem; height: 2.75rem; color: var(--c-text); }
.pay-dialog form { display: flex; flex-direction: column; gap: 1rem; }
.pay-dialog form > .field { grid-column: auto; }
.pay-test { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: rgba(217, 119, 6, .12); color: var(--c-warning); font-size: .86rem; font-weight: 650; }
.pay-methods { display: grid; gap: .55rem; }
.pay-methods > .muted { margin: 0; padding: .9rem; text-align: center; border-radius: var(--radius); background: var(--c-surface); animation: gm-blink .8s ease-in-out infinite alternate; }
.pay-method { position: relative; display: block; cursor: pointer; }
.pay-method input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 3.9rem; padding: .7rem .95rem; border-radius: var(--radius); border: 1.5px solid var(--c-border); background: var(--c-surface); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.pay-method:hover .pm-card { border-color: rgba(var(--c-primary-rgb), .45); }
.pay-method input:checked + .pm-card { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.pay-method input:focus-visible + .pm-card { outline: 2.5px solid var(--c-primary); outline-offset: 2px; }
.pm-card img { width: 2.6rem; height: 2.6rem; object-fit: contain; border-radius: .6rem; background: #fff; padding: .2rem; }
.pm-ico { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .7rem; background: var(--c-bg); font-size: 1.3rem; border: 1px solid var(--c-border); }
.pm-txt { display: grid; min-width: 0; line-height: 1.25; }
.pm-txt strong { overflow: hidden; text-overflow: ellipsis; }
.pm-txt small { color: var(--c-muted); font-size: .78rem; }
.pm-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-method input:checked + .pm-card .pm-amount { color: var(--c-primary-text, var(--c-primary)); }
.pay-empty { margin: 0; padding: 1rem; border-radius: var(--radius); background: rgba(217, 119, 6, .1); color: var(--c-warning); font-size: .9rem; font-weight: 550; }
.pay-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 1.1rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--gm-deep), color-mix(in srgb, var(--gm-deep) 70%, var(--gm-forest))); color: rgba(255, 255, 255, .8); font-weight: 600; }
.pay-summary strong { font-family: var(--font-heading); font-size: 1.5rem; color: var(--gm-gold-light); font-variant-numeric: tabular-nums; }
.pay-legal { margin: 0; font-size: .76rem; color: var(--c-muted); text-align: center; line-height: 1.5; }
.pay-dialog .play-msg { min-height: 0; }

/* ---------- 14. Suivi du paiement, simulation ---------- */
.pay-status-card { display: grid; justify-items: center; gap: .4rem; padding: clamp(1.8rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.4rem); border-radius: calc(var(--radius-lg) * 1.15); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); text-align: center; }
.pay-status-card h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin: .5rem 0 .2rem; }
.pay-status-card > p { max-width: 34rem; margin: 0 0 .6rem; }
.ps-icon { position: relative; width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)); animation: gm-pop .55s var(--anim-ease) both; }
.ps-icon .icon { width: 2.4rem; height: 2.4rem; }
.ps-icon.st-succeeded { background: rgba(22, 163, 74, .14); color: var(--gm-ok); box-shadow: 0 0 0 8px rgba(22, 163, 74, .07); }
.ps-icon.st-failed, .ps-icon.st-cancelled { background: rgba(225, 29, 72, .12); color: var(--gm-ko); }
.ps-icon.st-expired { background: rgba(217, 119, 6, .14); color: var(--gm-warn); }
.ps-icon.st-refunded { background: var(--c-surface-2); color: var(--c-muted); }
.ps-icon.st-pending, .ps-icon.st-created { background: rgba(var(--gm-gold-rgb), .18); color: color-mix(in srgb, var(--gm-gold) 60%, var(--c-text)); }
.ps-spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3.5px solid rgba(var(--gm-gold-rgb), .3); border-top-color: var(--gm-gold); animation: spin .9s linear infinite; }
.ps-icon.st-pending::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(var(--gm-gold-rgb), .35); animation: gm-ring 1.6s ease-out infinite; }
@keyframes gm-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.ps-details { width: 100%; max-width: 30rem; margin: 1rem 0 .4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; text-align: left; }
.ps-details > div { padding: .7rem .85rem; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); min-width: 0; }
.ps-details dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--c-muted); }
.ps-details dd { margin: .15rem 0 0; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .ps-details { grid-template-columns: 1fr; } }
.pay-status-card .btn-row-center { margin-top: 1.2rem; }
.sim-card { border: 2px dashed rgba(217, 119, 6, .45); background: repeating-linear-gradient(-45deg, rgba(217, 119, 6, .04) 0 14px, transparent 14px 28px), var(--c-bg); }
.sim-card form.btn-row-center { margin-top: 1rem; }
/* Pastilles de statut (paiements, gains, parties) */
.pay-status { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--c-surface-2); color: var(--c-muted); }
.pay-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pay-status.st-succeeded, .pay-status.st-delivered, .pay-status.st-credited { background: rgba(22, 163, 74, .12); color: var(--c-success); }
.pay-status.st-pending, .pay-status.st-created, .pay-status.st-contacted, .pay-status.st-scheduled { background: rgba(217, 119, 6, .13); color: var(--c-warning); }
.pay-status.st-failed, .pay-status.st-cancelled { background: rgba(225, 29, 72, .1); color: var(--c-danger-3); }
.pay-status.st-expired, .pay-status.st-refunded { background: var(--c-surface-2); color: var(--c-muted); }

/* ---------- 15. Vérification d'un tirage ---------- */
.verify-table { width: 100%; border-collapse: collapse; margin: 0 0 2rem; font-size: .93rem; }
.verify-table th, .verify-table td { padding: .75rem .8rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.verify-table th { width: 38%; font-weight: 650; color: var(--c-muted); font-size: .86rem; }
.verify-table code.hash { margin: 0; }
@media (max-width: 560px) { .verify-table th, .verify-table td { display: block; width: auto; border: 0; padding: .3rem 0; } .verify-table tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--c-border); } }
.verify-tool { display: grid; gap: 1rem; justify-items: start; margin: 1.5rem 0 2rem; padding: 1.3rem; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.verify-out { width: 100%; }
.verify-out:empty { display: none; }
.verify-out pre { margin: 0; padding: 1rem 1.1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--gm-deep) 92%, #000); color: #d1fae5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.7; white-space: pre-wrap; word-break: break-all; max-height: 26rem; overflow: auto; animation: gm-rise .35s var(--anim-ease); }

/* ---------- 16. Espace joueur : connexion, inscription ---------- */
.acc-auth { background: radial-gradient(ellipse at 0 0, var(--c-primary-soft), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(var(--gm-gold-rgb), .14), transparent 50%), var(--c-surface); }
.acc-auth .container-narrow { max-width: 36rem; }
.acc-auth-card { padding: clamp(1.5rem, 5vw, 2.6rem); border-radius: calc(var(--radius-lg) * 1.15); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); }
.acc-auth-head { display: grid; justify-items: center; text-align: center; gap: .3rem; margin-bottom: 1.6rem; }
.acc-auth-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); margin: .4rem 0 0; }
.acc-auth-head p { margin: 0; color: var(--c-muted); max-width: 30rem; }
.acc-auth-icon { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1.3rem; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gm-forest) 55%, #fff), var(--gm-deep)); color: var(--gm-gold-light); box-shadow: 0 0 0 6px rgba(var(--gm-gold-rgb), .16); }
.acc-auth-icon .icon { width: 1.8rem; height: 1.8rem; }
.acc-form { gap: 1rem; }
.acc-form .check { align-items: flex-start; gap: .65rem; }
/* Cases à cocher natives (le balisage du compte n'utilise pas .check-box) */
.acc-form .check input[type="checkbox"] { position: static; opacity: 1; flex: none; width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; accent-color: var(--c-primary); cursor: pointer; }
.acc-form .check > span { color: var(--c-muted); }
.acc-form .check a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.acc-row { justify-items: end; margin-top: -.4rem; font-size: .88rem; font-weight: 600; }
.acc-row-end { align-content: end; }
.acc-switch { margin: 1.4rem 0 0; text-align: center; color: var(--c-muted); font-size: .94rem; }
.acc-switch a:not(.btn) { font-weight: 700; }

/* ---------- 17. Espace joueur : en-tête, navigation, cartes ---------- */
.acc-hero { position: relative; padding: clamp(2.2rem, 5vw, 3.5rem) 0; color: #fff; background: radial-gradient(ellipse at 90% 0, rgba(var(--gm-gold-rgb), .3), transparent 50%), linear-gradient(135deg, var(--gm-deep), color-mix(in srgb, var(--gm-deep) 60%, var(--gm-forest))); overflow: hidden; }
.acc-hero::after { content: ""; position: absolute; right: -4rem; bottom: -6rem; width: 18rem; height: 18rem; border-radius: 50%; border: 1px solid rgba(var(--gm-gold-rgb), .25); pointer-events: none; }
.acc-hero h1 { color: #fff; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); margin: .2rem 0 .3rem; }
.acc-hero .muted { color: rgba(255, 255, 255, .78); margin: 0; }
.acc-hero .eyebrow { color: var(--gm-gold-light); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.acc-hero .chip-time { background: rgba(251, 191, 36, .2); color: #fde68a; }
.acc-hero-inner { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 800px) { .acc-hero-inner { grid-template-columns: 1fr auto; } }
.acc-balance { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .1rem .6rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); min-width: min(100%, 17rem); }
.acc-balance > span { grid-column: 1 / -1; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .7); }
.acc-balance strong { font-family: var(--font-heading); font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem); line-height: 1.05; color: var(--gm-gold-light); }
.acc-balance small { color: rgba(255, 255, 255, .75); font-size: .8rem; }
.acc-balance .btn { grid-column: 1 / -1; justify-self: start; margin-top: .6rem; --b-bg: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light)); --b-fg: var(--gm-deep); }
.acc-layout { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 900px) { .acc-layout { grid-template-columns: 15.5rem minmax(0, 1fr); } }
.acc-nav { display: flex; gap: .4rem; overflow-x: auto; padding: .35rem; margin-inline: -.35rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.acc-nav::-webkit-scrollbar { display: none; }
.acc-nav form { display: contents; }
.acc-nav-link { flex: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); font-size: .9rem; font-weight: 600; white-space: nowrap; text-align: left; transition: background-color .2s, color .2s, border-color .2s; }
.acc-nav-link .icon { color: var(--c-muted); transition: color .2s; }
.acc-nav-link:hover { color: var(--c-primary-text, var(--c-primary)); border-color: rgba(var(--c-primary-rgb), .4); }
.acc-nav-link:hover .icon { color: inherit; }
.acc-nav-link.is-active { background: var(--c-btn, var(--c-primary)); border-color: var(--c-btn, var(--c-primary)); color: var(--c-on-primary); }
.acc-nav-link.is-active .icon { color: inherit; }
button.acc-nav-link { cursor: pointer; }
@media (min-width: 900px) {
  .acc-nav { position: sticky; top: calc(var(--header-h, 4.75rem) + 1.25rem); flex-direction: column; overflow: visible; margin: 0; padding: .6rem; border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); }
  .acc-nav-link { width: 100%; border-radius: var(--radius-sm); border-color: transparent; background: transparent; }
  .acc-nav-link.is-active { background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)); border-color: transparent; box-shadow: inset 3px 0 0 var(--c-primary); }
  .acc-nav button.acc-nav-link { margin-top: .4rem; border-top: 1px solid var(--c-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--c-muted); }
}
.acc-main { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); min-width: 0; }
.acc-card { padding: clamp(1.2rem, 3.5vw, 1.9rem); border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); min-width: 0; }
.acc-card > h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin-bottom: .8rem; }
.acc-card > .muted { margin-top: -.3rem; font-size: .93rem; }
.acc-card-danger { border-color: rgba(225, 29, 72, .28); background: linear-gradient(135deg, rgba(225, 29, 72, .05), transparent 60%), var(--c-bg); }
.acc-sub { font-size: 1.08rem; margin: 1.6rem 0 .7rem; }
.acc-help { display: flex; gap: .5rem; align-items: center; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--c-border); font-size: .9rem; color: var(--c-muted); }
.acc-alert { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px solid; }
.acc-alert > .icon { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
.acc-alert strong { display: block; }
.acc-alert p { margin: .2rem 0 .6rem; font-size: .92rem; }
.acc-alert-warning { background: rgba(217, 119, 6, .09); border-color: rgba(217, 119, 6, .3); color: var(--c-text); }
.acc-alert-warning > .icon { color: var(--gm-warn); }
.acc-alert-danger { background: rgba(225, 29, 72, .07); border-color: rgba(225, 29, 72, .28); }
.acc-alert-danger > .icon { color: var(--gm-ko); }
.acc-stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.acc-stat { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i v" "i l"; gap: 0 .8rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); }
.acc-stat > .icon { grid-area: i; width: 2.7rem; height: 2.7rem; padding: .6rem; border-radius: .9rem; background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)); }
.acc-stat:nth-child(2) > .icon { background: rgba(var(--gm-gold-rgb), .18); color: color-mix(in srgb, var(--gm-gold) 65%, var(--c-text)); }
.acc-stat strong { grid-area: v; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acc-stat span { grid-area: l; font-size: .8rem; color: var(--c-muted); font-weight: 600; }
.acc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.acc-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .7rem .85rem; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); }
.acc-list li small { margin-left: auto; }
.game-mini-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.game-mini { display: grid; justify-items: center; gap: .35rem; padding: 1.1rem .8rem; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); text-align: center; transition: transform .3s var(--anim-ease), border-color .2s, box-shadow .3s; }
.game-mini > .icon { width: 2.8rem; height: 2.8rem; padding: .65rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gm-forest) 55%, #fff), var(--gm-deep)); color: var(--gm-gold-light); }
.game-mini span { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.game-mini small { color: var(--c-muted); font-size: .78rem; }
.game-mini:hover { color: var(--c-text); transform: translateY(-3px); border-color: rgba(var(--gm-gold-rgb), .6); box-shadow: var(--shadow); }

/* ---------- 18. Espace joueur : packs de crédits ---------- */
.pack-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); margin-top: 1rem; }
.pack { position: relative; display: grid; justify-items: center; align-content: start; gap: .35rem; width: 100%; padding: 1.6rem 1rem 1.2rem; border-radius: var(--radius-lg); border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-text); text-align: center; cursor: pointer; transition: transform .35s var(--anim-ease), border-color .25s, box-shadow .35s; }
.pack:hover { transform: translateY(-5px); border-color: rgba(var(--c-primary-rgb), .5); box-shadow: var(--shadow); }
.pack.is-featured { border-color: var(--gm-gold); background: radial-gradient(ellipse at 50% 0, rgba(var(--gm-gold-rgb), .22), transparent 65%), var(--c-bg); box-shadow: 0 16px 40px rgba(var(--gm-gold-rgb), .22); }
.pack-badge { position: absolute; top: -.75rem; left: 50%; translate: -50% 0; padding: .3rem .8rem; border-radius: 999px; background: linear-gradient(135deg, var(--gm-gold), var(--gm-gold-light)); color: var(--gm-deep); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 14px rgba(var(--gm-gold-rgb), .35); }
.pack-credits { display: grid; font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.pack-credits small { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-top: .3rem; }
.pack-bonus { padding: .2rem .6rem; border-radius: 999px; background: rgba(22, 163, 74, .12); color: var(--c-success); font-size: .76rem; font-weight: 700; }
.pack-price { margin-top: .4rem; font-weight: 800; font-size: 1.1rem; }
.pack-cta { margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .5rem 1.2rem; border-radius: var(--btn-radius, 999px); background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)); font-weight: 700; font-size: .9rem; transition: background-color .2s, color .2s; }
.pack:hover .pack-cta, .pack.is-featured .pack-cta { background: var(--c-btn, var(--c-primary)); color: var(--c-on-primary); }

/* ---------- 19. Espace joueur : tableaux, gains ---------- */
.acc-table-wrap { overflow-x: auto; margin-inline: calc(clamp(1.2rem, 3.5vw, 1.9rem) * -1); padding-inline: clamp(1.2rem, 3.5vw, 1.9rem); -webkit-overflow-scrolling: touch; }
.acc-table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .9rem; }
.acc-table th { text-align: left; padding: .6rem .7rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); font-weight: 700; border-bottom: 1.5px solid var(--c-border); white-space: nowrap; }
.acc-table td { padding: .75rem .7rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.acc-table tbody tr:hover { background: var(--c-surface); }
.acc-table th.num, .acc-table td.num { text-align: right; white-space: nowrap; }
.acc-table td.pos { color: var(--c-success); font-weight: 800; }
.acc-table td.neg { color: var(--c-danger-3); font-weight: 700; }
.acc-table small { font-size: .8rem; }
.prize-list { display: grid; gap: .8rem; }
.prize-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1rem; align-items: start; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-border); }
.prize-item > .pay-status { grid-column: 2; justify-self: start; }
@media (min-width: 640px) { .prize-item { grid-template-columns: auto minmax(0, 1fr) auto; } .prize-item > .pay-status { grid-column: auto; justify-self: end; } }
.prize-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 1rem; background: radial-gradient(circle at 35% 30%, #fff8dc, var(--gm-gold)); color: var(--gm-deep); box-shadow: 0 6px 16px rgba(var(--gm-gold-rgb), .3); }
.prize-icon .icon { width: 1.5rem; height: 1.5rem; }
.prize-body h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.prize-body p { margin: 0 0 .3rem; font-size: .88rem; }
.prize-claim { padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-text); font-size: .88rem; }

/* ---------- 20. Thème sombre : ajustements ---------- */
html[data-theme="dark"] .gc-sub { color: var(--gm-gold-light); }
html[data-theme="dark"] .ticket-pill { color: #10261c; }
html[data-theme="dark"] .quiz-score, html[data-theme="dark"] .prize-rank li > .icon, html[data-theme="dark"] .acc-stat:nth-child(2) > .icon, html[data-theme="dark"] .ps-icon.st-pending, html[data-theme="dark"] .ps-icon.st-created { color: var(--gm-gold-light); }
html[data-theme="dark"] .rm-prize { color: var(--gm-gold-light); }
html[data-theme="dark"] .rm-backdrop, html[data-theme="dark"] .pay-backdrop { background: rgba(0, 0, 0, .75); }
html[data-theme="dark"] .pm-card img { background: #fff; }
html[data-theme="dark"] .quiz-big { background: linear-gradient(135deg, #4ac684, var(--gm-gold-light)); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .pack-bonus { color: var(--c-success); }
html[data-theme="dark"] .side-balance, html[data-theme="dark"] .pay-summary { border: 1px solid rgba(var(--gm-gold-rgb), .25); }
html[data-theme="dark"] .game-card:hover { border-color: rgba(var(--gm-gold-rgb), .45); }

/* ---------- 21. Mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
  .wheel-hub, .wheel-wrap.is-spinning::before, .wheel-wrap.is-spinning .wheel-bulb, .wheel-wrap.is-spinning .wheel-pointer, .scratch-idle, .gc-art::before, .chest.is-shaking, .chest.is-win .cc-icon, .result-modal.is-win .rm-icon, .quiz-timer span.is-low, .ps-icon.st-pending::after, .pay-methods > .muted, .gc-badge.is-open::before { animation: none !important; }
  .confetti-box { display: none; }
  .game-card:hover, .pack:hover, .game-mini:hover, .chest:hover:not([disabled]), .quiz-answer:hover:not([disabled]) { transform: none; }
  .chest-lid, .chest-content { transition-duration: .01s; }
}
html.reduce-motion .confetti-box { display: none; }

/* ---------- 22. Impression ---------- */
@media print {
  .pay-modal, .result-modal, .confetti-box, .play-bar, .acc-nav, .lang-switch, .account-btn { display: none !important; }
  .game-stage, .acc-hero { background: none !important; color: #000 !important; box-shadow: none !important; }
}

/* ---- Correctifs : cartes de jeu sur fond sombre, colonne contact du pied de page ---- */
.game-card { color: var(--c-text); }
.game-card .gc-body p, .game-card .gc-body .muted { color: var(--c-muted); }

/* ---- En-tête mobile : le bouton menu reste toujours visible ---- */
@media (max-width: 520px) {
  .site-header .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .site-header .brand-text { display: block; font-size: clamp(1rem, 4.6vw, 1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-header .brand img { max-width: 42vw; height: auto; }
  .header-tools { flex: none; }
  .header-tools .theme-toggle { display: none; }
}
@media (max-width: 360px) { .header-tools [data-search-open] { display: none; } }