/* Danslabox – roue de la chance (page d'accueil) */

.dlb-roue-lanceur[hidden], .dlb-roue-fond[hidden], .dlb-roue-gain[hidden], .dlb-roue-jeu[hidden] { display: none !important; }

/* ---------- Bouton flottant ---------- */
.dlb-roue-lanceur { position: fixed; z-index: 998; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: flex-start; transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); font-family: "Inter", system-ui, sans-serif; }
.dlb-roue-lanceur.dlb-roue-arrive { transform: none; }
.dlb-roue-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: #141414; color: #fff; font: 800 16px/1 "Inter Tight", "Inter", system-ui, sans-serif; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 12px 28px rgba(20, 20, 20, .28), inset 0 -3px 0 rgba(255, 255, 255, .08); }
.dlb-roue-bouton svg { color: #F7941D; flex: none; animation: dlb-roue-secoue 3.2s ease-in-out 1.2s infinite; }
.dlb-roue-bouton:hover, .dlb-roue-bouton:focus-visible { background: #000; }
.dlb-roue-bouton:focus-visible, .dlb-roue-masquer:focus-visible { outline: 3px solid #F7941D; outline-offset: 3px; }
.dlb-roue-masquer { width: 26px; height: 26px; margin: -8px 0 0 -10px; padding: 0; border: 2px solid #fff; border-radius: 999px; background: #F7941D; color: #141414; font: 800 15px/1 system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@keyframes dlb-roue-secoue { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-16deg); } 78% { transform: rotate(14deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(6deg); } }

/* ---------- Fenêtre ---------- */
html.dlb-roue-ouverte, html.dlb-roue-ouverte body { overflow: hidden; }
.dlb-roue-fond { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 20, 20, .55); opacity: 0; transition: opacity .2s ease; font-family: "Inter", system-ui, sans-serif; color: #22252A; }
.dlb-roue-fond.dlb-roue-visible { opacity: 1; }
.dlb-roue-fenetre { position: relative; box-sizing: border-box; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px 24px; border-radius: 28px; text-align: center; background-color: #FAFAF7; background-image: radial-gradient(circle at 50% 30%, rgba(247, 148, 29, .20), rgba(250, 250, 247, 0) 60%); box-shadow: 0 30px 80px rgba(20, 20, 20, .35); transform: translateY(16px) scale(.97); transition: transform .3s cubic-bezier(.2, .9, .3, 1.1); }
.dlb-roue-visible .dlb-roue-fenetre { transform: none; }
.dlb-roue-fenetre *, .dlb-roue-fenetre *::before { box-sizing: border-box; }
.dlb-roue-fermer { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; padding: 0; border: 1px solid #E4E2DC; border-radius: 999px; background: #fff; color: #141414; font: 400 24px/1 system-ui, sans-serif; cursor: pointer; }
.dlb-roue-confettis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.dlb-roue-etiquette { margin: 0 0 8px; font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 13px; letter-spacing: 1px; color: #5E626A; }
.dlb-roue-titre { margin: 0 0 8px; padding: 0 28px; font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; color: #141414; }
.dlb-roue-surligne { background: linear-gradient(transparent 58%, rgba(247, 148, 29, .45) 58%); white-space: nowrap; }
.dlb-roue-intro { margin: 0 0 18px; font-size: 16px; line-height: 1.45; color: #4A4E55; }

/* ---------- Roue ---------- */
.dlb-roue-zone { position: relative; width: min(300px, 74vw); aspect-ratio: 1; margin: 0 auto 16px; }
.dlb-roue-disque { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 18px 40px rgba(20, 20, 20, .25); transition: transform 4.6s cubic-bezier(.12, .72, .14, 1); }
.dlb-roue-case { font: 800 11.5px "Inter Tight", "Inter", system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; letter-spacing: -0.2px; }
.dlb-roue-case-gain { font-size: 14px; }
.dlb-roue-bord { fill: none; stroke: #141414; stroke-width: 6; }
.dlb-roue-ampoule { fill: #FFD08A; }
.dlb-roue-tourne .dlb-roue-ampoule { animation: dlb-roue-clignote .5s steps(2) infinite; }
@keyframes dlb-roue-clignote { 50% { fill: #fff; } }
.dlb-roue-pointe { position: absolute; z-index: 1; top: -10px; left: 50%; width: 30px; height: 38px; margin-left: -15px; background: #F7941D; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.dlb-roue-pointe::before { content: ""; position: absolute; top: 3px; left: 5px; right: 5px; height: 26px; background: #141414; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .12; }
.dlb-roue-lancer { position: absolute; top: 50%; left: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 4px solid #fff; border-radius: 50%; background: #F7941D; color: #141414; font: 800 15px/1 "Inter Tight", "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 16px rgba(20, 20, 20, .3); transition: transform .15s ease; }
.dlb-roue-lancer:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); }
.dlb-roue-lancer:disabled { cursor: default; }
.dlb-roue-lancer:focus-visible, .dlb-roue-copier:focus-visible, .dlb-roue-cta:focus-visible, .dlb-roue-fermer:focus-visible { outline: 3px solid #141414; outline-offset: 3px; }

.dlb-roue-essais { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 22px; margin: 0 0 6px; font-weight: 700; font-size: 15px; color: #141414; }
.dlb-roue-points { display: inline-flex; gap: 6px; }
.dlb-roue-points span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #141414; }
.dlb-roue-points .dlb-roue-plein { background: #F7941D; border-color: #F7941D; }
.dlb-roue-message { min-height: 24px; margin: 0; font-size: 16px; font-weight: 600; color: #8A4300; }

/* ---------- Gain ---------- */
.dlb-roue-gain { padding-top: 8px; }
.dlb-roue-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 12px 12px 12px 18px; background: #FFF6EA; border: 2px dashed #F7941D; border-radius: 16px; }
.dlb-roue-code-valeur { font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 22px; letter-spacing: 1px; color: #141414; user-select: all; overflow-wrap: anywhere; text-align: left; }
.dlb-roue-copier { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #141414; color: #fff; font: 700 15px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.dlb-roue-validite { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #141414; }
.dlb-roue-cumul { display: inline-block; margin: 0 0 8px; padding: 6px 12px; border-radius: 999px; background: #FDECEA; font-size: 14px; color: #B3261E; }
.dlb-roue-cumul strong { color: #B3261E; }
.dlb-roue-auto { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #4A4E55; }
.dlb-roue-cta { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: #F7941D; color: #141414 !important; font: 800 17px/1 "Inter Tight", "Inter", system-ui, sans-serif; text-decoration: none !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.dlb-roue-cta:hover { background: #FFA436; }

@media (max-width: 420px) {
	.dlb-roue-fenetre { padding: 24px 18px 20px; border-radius: 24px; }
	.dlb-roue-titre { font-size: 26px; }
	.dlb-roue-intro { font-size: 15px; margin-bottom: 14px; }
	.dlb-roue-code-valeur { font-size: 19px; }
	.dlb-roue-bouton { font-size: 15px; min-height: 48px; }
}
@media (max-height: 640px) {
	.dlb-roue-zone { width: min(230px, 64vw); }
	.dlb-roue-intro { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.dlb-roue-lanceur, .dlb-roue-fond, .dlb-roue-fenetre { transition: none; }
	.dlb-roue-disque { transition: transform .6s ease-out; }
	.dlb-roue-bouton svg, .dlb-roue-tourne .dlb-roue-ampoule { animation: none; }
}