/* ==========================================================================
   Roue de la chance (inc/wheel.php, assets/js/wheel.js)
   Ivory / sand / black / burgundy slices, EB Garamond titles, black pill buttons.
   Popup: two columns from 768 px (wheel on ivory | text), bottom sheet below.
   Launcher: bottom right, above the WhatsApp button when there is one.
   ========================================================================== */

/* ---------- Launcher ---------- */
.wheel-fab {
	position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44;
	display: inline-flex; align-items: center; gap: 10px;
	height: 48px; padding: 0 20px 0 14px; border-radius: 999px;
	background: var(--ink); color: var(--white);
	font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
	box-shadow: 0 10px 28px rgba(20, 15, 15, .24);
	opacity: 0; transform: translateY(14px);
	transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, bottom .35s var(--ease), background-color .2s, color .2s;
}
.wheel-fab.is-in { opacity: 1; transform: none; }
/* theme.js "Floating launchers": away on the first screen and while it would cover the hero controls,
   the product's buy column / express form or the footer ("Haut de page"). */
.wheel-fab.is-away { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.wheel-fab:hover { background: #3a3535; }
.wheel-fab__icon { display: grid; place-items: center; flex: none; }
.wheel-fab__glyph { animation: wheel-fab-turn 14s linear infinite; }
.wheel-fab.is-won { background: var(--accent); }
.wheel-fab.is-won:hover { background: #5f1621; }
.wheel-fab.is-won .wheel-fab__glyph { animation: none; }
.wheel-fab__label { font-variant-numeric: tabular-nums; }
@keyframes wheel-fab-turn { to { transform: rotate(360deg); } }
body.is-locked .wheel-fab { opacity: 0; visibility: hidden; transform: scale(.85); }
/* Stacks above the WhatsApp button (56 px) and the product page's buy bar. */
body:has(.wa-float) .wheel-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* The buy bar only exists below 1024 px (theme.js sets .has-buybar at every width). */
@media (max-width: 1023px) { .has-buybar .wheel-fab { bottom: calc(88px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) {
	.wheel-fab { right: 24px; bottom: 24px; }
	body:has(.wa-float) .wheel-fab { bottom: 92px; }
}
@media (max-width: 767px) {
	.wheel-fab:not(.is-won) { width: 48px; padding: 0; justify-content: center; }
	.wheel-fab:not(.is-won) .wheel-fab__label { display: none; }
	.wheel-fab.is-won { height: 44px; padding: 0 16px 0 12px; font-size: 13px; }
}
/* Phones / tablets: the product page is mostly the express form (which shows the code itself).
   From 1024 px it stays, but theme.js keeps it away while the buy column is beside it. */
@media (max-width: 1023px) { .single-product:has(#fast-checkout-form) .wheel-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .wheel-fab, .wheel-fab.is-away { transform: none; } }

/* ---------- Dialog ---------- */
.wheel { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; }
.wheel[hidden] { display: none; }
.wheel__backdrop {
	position: absolute; inset: 0; background: rgba(20, 15, 15, .52);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .35s var(--ease);
}
.wheel__panel {
	position: relative; width: min(900px, 100%); max-height: calc(100svh - 48px); overflow: auto; overscroll-behavior: contain;
	display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	background: var(--white); border-radius: 12px; box-shadow: 0 30px 80px rgba(20, 15, 15, .3);
	opacity: 0; transform: translateY(18px) scale(.985);
	transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.wheel__panel:focus { outline: none; }
.wheel.is-open .wheel__backdrop { opacity: 1; }
.wheel.is-open .wheel__panel { opacity: 1; transform: none; }
.wheel__confetti { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

.wheel__tools { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 2px; }
.wheel__tool {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	color: var(--ink); transition: background-color .2s, opacity .2s;
}
.wheel__tool:hover { background: var(--soft); }
.wheel__sound-off, .wheel__tool.is-muted .wheel__sound-on { display: none; }
.wheel__tool.is-muted .wheel__sound-off { display: block; color: var(--muted); }
.wheel.is-spinning [data-wheel-close] { opacity: .3; pointer-events: none; }

/* ---------- Stage (wheel column) ---------- */
.wheel__stage-wrap {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
	padding: 56px 40px 30px;
	background: radial-gradient(circle at 50% 44%, #fbf8f3 0, var(--soft) 62%);
	border-radius: 12px 0 0 12px;
}
.wheel__stage { position: relative; width: 100%; max-width: min(360px, 54svh); aspect-ratio: 1; transition: max-width .5s var(--ease); }
.wheel__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel__frame { filter: drop-shadow(0 18px 26px rgba(20, 15, 15, .2)); }
.wheel__disc { will-change: transform; transform-origin: 50% 50%; }
.wheel__rim { fill: var(--ink); }
.wheel__edge { fill: none; stroke: rgba(246, 241, 234, .5); stroke-width: 1; }
.wheel__seg { transition: opacity .6s var(--ease); }
.wheel__seg--ivory { fill: var(--soft); }
.wheel__seg--sand { fill: var(--card); }
.wheel__seg--ink { fill: var(--ink); }
.wheel__seg--accent { fill: var(--accent); }
.wheel__txt { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; transition: opacity .6s var(--ease); }
.wheel__num { font-size: 31px; }
.wheel__pct { font-size: 18px; }
.wheel__txt--ship { font-size: 15px; letter-spacing: .01em; } /* "Livraison / offerte" on two lines */
.wheel__txt--ivory, .wheel__txt--sand { fill: var(--ink); }
.wheel__txt--ink, .wheel__txt--accent { fill: var(--soft); }
.wheel__disc.has-win .wheel__seg:not(.is-win), .wheel__disc.has-win .wheel__txt:not(.is-win) { opacity: .62; }
.wheel__flash {
	fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; pointer-events: none;
	filter: drop-shadow(0 0 4px rgba(122, 31, 43, .35));
}
.wheel__flash--dark { stroke: #f3e3bd; filter: drop-shadow(0 0 5px rgba(243, 227, 189, .85)); }
.wheel__flash.is-pulsing { animation: wheel-flash .42s ease-in-out 6 alternate; }
@keyframes wheel-flash { to { opacity: .2; } }

.wheel__hub-disc { fill: var(--white); stroke: var(--ink); stroke-width: 1.25; }
.wheel__hub-line { fill: none; stroke: var(--accent); stroke-width: .75; }
.wheel__hub-f { fill: none; stroke: var(--ink); stroke-width: 7.5; }

.wheel__bulb { fill: #f3e3bd; filter: drop-shadow(0 0 3px rgba(243, 227, 189, .9)); animation: wheel-bulb 1.8s steps(1) infinite; }
.wheel__bulb.is-odd { animation-delay: -.9s; }
.wheel.is-spinning .wheel__bulb { animation-duration: .26s; }
.wheel.is-spinning .wheel__bulb.is-odd { animation-delay: -.13s; }
.wheel.is-won .wheel__bulb { animation: wheel-bulb-all .32s steps(1) 8; animation-delay: 0s; }
@keyframes wheel-bulb { 50% { fill: #4a403b; filter: none; } }
@keyframes wheel-bulb-all { 50% { fill: #c98b8f; } }

.wheel__pointer {
	position: absolute; top: -16px; left: calc(50% - 16px); z-index: 3; width: 32px; height: 44px;
	transform-origin: 16px 16px; overflow: visible;
	filter: drop-shadow(0 3px 4px rgba(20, 15, 15, .32));
}
.wheel__pointer path { fill: var(--accent); stroke: var(--soft); stroke-width: 2; }
.wheel__pointer circle { fill: var(--soft); }

.wheel__legend {
	display: flex; align-items: center; gap: 12px;
	font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.wheel__legend::before, .wheel__legend::after { content: ""; width: 28px; height: 1px; background: var(--line-strong); }

/* ---------- Text column ---------- */
.wheel__body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 64px 48px 44px; }
.wheel__kicker { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.wheel__title {
	margin-bottom: 14px; font-family: var(--serif); font-weight: 400;
	font-size: clamp(36px, 4.2vw, 48px); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance;
}
.wheel__title:focus { outline: none; }
.wheel__title em { font-style: italic; color: var(--accent); }
.wheel__text { max-width: 36ch; margin-bottom: 28px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.wheel__form { display: grid; grid-template-columns: minmax(0, 1fr); }
.wheel__label { margin-bottom: 4px; font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.wheel__field {
	display: flex; align-items: center; gap: 12px; padding: 4px 0;
	border-bottom: 1px solid var(--ink); transition: border-color .2s, box-shadow .2s;
}
.wheel__field:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.wheel__prefix { font-size: 17px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wheel__field input {
	flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; outline: none;
	font-size: 20px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.wheel__field input::placeholder { color: var(--line-strong); letter-spacing: .06em; }
.wheel__field:has(input[aria-invalid="true"]) { border-bottom-color: var(--sale); }
.wheel__error { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--sale); }
.wheel__spin, .wheel__cta { width: 100%; min-height: 52px; margin-top: 22px; font-size: 15px; }
.wheel__spin[aria-disabled="true"] { opacity: .7; cursor: progress; }
.wheel__fine { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.wheel__fine strong { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

.wheel__code {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
	margin: 6px 0 12px; padding: 16px 18px;
	border: 1px dashed var(--ink); border-radius: var(--radius); background: var(--soft);
	transition: background-color .2s, border-color .2s;
}
.wheel__code:hover { background: var(--card); }
.wheel__code-value { font-size: 20px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.wheel__code-copy { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.wheel__code.is-copied { border-style: solid; border-color: var(--accent); }
.wheel__timer { font-size: 13px; color: var(--muted); }
.wheel__timer strong { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Result appears in a short cascade. */
.wheel.is-won [data-wheel-step="win"] > * { animation: wheel-rise .55s var(--ease) both; }
.wheel.is-won [data-wheel-step="win"] > :nth-child(2) { animation-delay: .07s; }
.wheel.is-won [data-wheel-step="win"] > :nth-child(3) { animation-delay: .14s; }
.wheel.is-won [data-wheel-step="win"] > :nth-child(4) { animation-delay: .21s; }
.wheel.is-won [data-wheel-step="win"] > :nth-child(n+5) { animation-delay: .28s; }
@keyframes wheel-rise { from { opacity: 0; transform: translateY(10px); } }

/* Touch screens keep :hover after a tap: the new button under the finger must not look pressed. */
@media (hover: none) { .wheel .btn--dark:hover { background: var(--ink); } }

/* Express form (product page): the code is tied to the number that won it. */
.fc-wheel-note { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; color: var(--accent); }

/* ---------- Tablet ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.wheel__stage-wrap { padding: 52px 28px 26px; }
	.wheel__body { padding: 60px 32px 36px; }
	.wheel__title { font-size: 38px; }
}

/* ---------- Phone: bottom sheet ---------- */
@media (max-width: 767px) {
	.wheel { align-items: end; padding: 0; }
	.wheel__panel {
		grid-template-columns: 1fr; width: 100%; max-height: calc(100svh - 12px);
		border-radius: 16px 16px 0 0; transform: translateY(48px);
	}
	.wheel__panel::before {
		content: ""; position: absolute; top: 8px; left: 50%; z-index: 4; width: 36px; height: 4px; margin-left: -18px;
		border-radius: 2px; background: var(--line-strong);
	}
	.wheel__tools { top: 10px; right: 8px; }
	.wheel__stage-wrap { gap: 12px; padding: 34px 16px 14px; border-radius: 16px 16px 0 0; }
	.wheel__stage { max-width: min(64vw, 32svh, 260px); }
	.wheel.is-result .wheel__stage { max-width: min(40vw, 20svh, 168px); }
	.wheel.is-result .wheel__legend { display: none; }
	.wheel__pointer { top: -12px; width: 26px; height: 36px; left: calc(50% - 13px); transform-origin: 13px 13px; }
	.wheel__body { padding: 20px 20px calc(22px + env(safe-area-inset-bottom)); text-align: center; }
	.wheel__kicker { margin-bottom: 8px; }
	.wheel__title { margin-bottom: 10px; font-size: 32px; }
	.wheel__text { margin: 0 auto 18px; font-size: 14px; }
	.wheel__field { justify-content: center; }
	.wheel__field input { flex: 0 1 8.6em; }
	.wheel__spin, .wheel__cta { margin-top: 18px; }
	.wheel__fine { margin-top: 12px; }
	.wheel__code { padding: 14px 16px; }
	.wheel__code-value { font-size: 18px; }
}
/* Short phones: keep the button on screen. */
@media (max-width: 767px) and (max-height: 700px) {
	.wheel__stage { max-width: min(54vw, 28svh, 220px); }
	.wheel__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wheel__bulb, .wheel.is-spinning .wheel__bulb, .wheel.is-won .wheel__bulb, .wheel-fab__glyph, .wheel__flash { animation: none; }
	.wheel.is-won [data-wheel-step="win"] > * { animation: none; }
}