@font-face { font-family: Sora; src: url('./assets/fonts/Sora-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/fonts/Manrope-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/fonts/Manrope-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
/* Tokens repris de quizr-app/src/theme/tokens.ts (colors, logoTones), surfaces.ts et ranks.ts. */
:root {
  color-scheme: dark;
  --canvas: #111316; --inset: #101113; --surface: #1d1f22; --surface-raised: #25282d; --border: #34373d; --border-strong: #484c54;
  --text: #f5f5f2; --cream: #f2eee5; --secondary: #b4b7be; --muted: #777c86;
  --coral: #ff6b61; --blue: #61b5f5; --yellow: #ffd05a; --green: #67d69a; --error: #f37878;
  --logo-coral: #e27261; --logo-blue: #5888cf; --logo-yellow: #e8c368; --logo-green: #88b999; --anthracite: #7c818b;
  --emblem-canvas: #131922; --rank-gold: #e6bc55; --rank-platinum: #7fa7bd; --rank-diamond: #4daef0;
  --gutter: 20px; --row-height: 4.2rem;
  --topbar-h: 58px; --tabbar-h: 62px;
  --inset-top: 0px; --inset-bottom: 0px;
  --closing-lift: -30px; --closing-title-gap: -16px; --closing-sub-gap: 12px;
  --ease-out: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--cream); font-family: Manrope, sans-serif; font-weight: 600; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, .carousel:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 14px; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Fond AppBackground : base sombre + glyphes QUIZR (mouvement accentué = exception cockpit 2026-09-06). */
.app-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(149deg, #0f1114 0%, #111316 30%, #12151a 68%, #0f1114 100%); }
.confetti-pattern, .readability-veil { position: absolute; inset: 0; }
.readability-veil { background: rgba(5, 6, 7, .08); }
.glyph { position: absolute; transform: translate(-50%, -50%) rotate(var(--rotation)); }
.glyph svg { width: 100%; height: 100%; display: block; overflow: visible; stroke-width: 1.15; animation: float-in-air var(--duration) ease-in-out var(--delay) infinite alternate; }
.glyph svg.static { animation: none; }
.glyph svg { transition: opacity 280ms ease; }
.glyph.is-occluded svg { opacity: 0; }
@keyframes float-in-air { 0% { transform: perspective(300px) translate3d(0, 12px, 0) rotateX(-20deg) rotate(-9deg); } 45% { transform: perspective(300px) translate3d(var(--drift), -18px, 12px) rotateY(35deg) rotate(12deg); } 100% { transform: perspective(300px) translate3d(calc(var(--drift) * -.6), -46px, 0) rotateX(30deg) rotate(-17deg); } }
body[data-motion-paused='true'] *, body[data-motion-paused='true'] *::before, body[data-motion-paused='true'] *::after { animation-play-state: paused !important; }

/* ---------- Écran unique : en-tête (logo centré), zone animée + bloc d'inscription, pied de page ---------- */
.app { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 560px; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.masthead { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 8px var(--gutter) 0; position: relative; z-index: 3; }
.masthead-side--right { display: flex; justify-content: flex-end; }
.signature { display: block; transition: opacity 280ms ease; }
.signature[data-hidden='true'] { opacity: 0; pointer-events: none; }
.signature img { display: block; width: 116px; height: auto; }
.motion-toggle { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
.motion-toggle:hover { background: var(--surface); color: var(--secondary); }
.motion-toggle svg { width: 18px; height: 18px; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed='true'] .pause-icon { display: none; }
.motion-toggle[aria-pressed='true'] .play-icon { display: block; }
.layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; }
footer { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; padding: 0 var(--gutter) 6px; text-align: center; position: relative; z-index: 3; }
.disclaimer { margin: 0; color: var(--muted); font-size: .625rem; line-height: 1.4; }
footer a { display: inline-flex; align-items: center; min-height: 28px; color: var(--secondary); font-size: .625rem; text-underline-offset: 4px; text-decoration-color: var(--border-strong); }

/* Scènes de la zone animée : fondu enchaîné, la sortante disparaît avant que l'entrante n'apparaisse. */
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gutter); opacity: 0; visibility: hidden; transform: scale(.985); pointer-events: none; transition: opacity 320ms ease, transform 520ms var(--ease-out), visibility 0s linear 520ms; }
.stage[data-scene='hero'] .scene-hero, .stage[data-scene='ask'] .scene-ask, .stage[data-scene='duel'] .scene-duel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 460ms ease 260ms, transform 640ms var(--ease-out) 260ms, visibility 0s; }

/* ---------- Rouleau puis « UNIQUEMENT SUR QUIZR » ---------- */
.hero-block { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; transition: transform 680ms var(--ease-out); }
.scene-hero[data-phase='closing'] .hero-block { transform: translateY(var(--closing-lift)); }
h1 { margin: 0; display: flex; flex-direction: column; align-items: inherit; width: 100%; font-weight: 700; }
.stage-copy { display: grid; width: 100%; }
.headline, .closing-only { grid-area: 1 / 1; align-self: end; }
.headline { display: block; font: 700 clamp(2.45rem, 11.2vw, 3.6rem)/1.02 Sora, sans-serif; letter-spacing: -.062em; transition: opacity 320ms ease, transform 460ms var(--ease-out); }
.sur { display: block; margin-top: 14px; font: 700 .8125rem/1 Manrope, sans-serif; letter-spacing: .2em; color: var(--secondary); }
.closing-only { margin-bottom: 4px; font: 700 clamp(2.1rem, 9.4vw, 3.2rem)/1 Sora, sans-serif; letter-spacing: -.062em; color: var(--cream); white-space: nowrap; opacity: 0; transform: translateY(14px); transition: opacity 380ms ease, transform 520ms var(--ease-out); }
.scene-hero[data-phase='closing'] .headline { opacity: 0; transform: translateY(-14px); }
.scene-hero[data-phase='closing'] .closing-only { opacity: 1; transform: translateY(var(--closing-title-gap)); transition-delay: 140ms; }

/* Fenêtre d'une seule ligne : la ligne active seule est visible, bords adoucis pendant le mouvement. */
.theme-window { position: relative; display: block; width: 100%; height: var(--row-height); margin-top: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
.theme-track { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; backface-visibility: hidden; will-change: transform, filter; }
.theme-row { height: var(--row-height); flex: 0 0 var(--row-height); display: flex; justify-content: center; align-items: center; padding-inline: 2px; font: 700 clamp(1.95rem, 9.2vw, 3rem)/1 Sora, sans-serif; letter-spacing: -.05em; white-space: nowrap; }
.theme-row[data-long='true'] { font-size: clamp(1.55rem, 7.2vw, 2.45rem); }
.theme-row--logo img { height: 76%; width: auto; transform-origin: center; transition: transform 620ms cubic-bezier(.2,1.35,.4,1); }
.theme-window[data-state='finished'] .theme-track { will-change: auto; }
.scene-hero[data-phase='closing'] .theme-window { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.scene-hero[data-phase='closing'] .theme-row:not(.theme-row--logo) { visibility: hidden; }
.scene-hero[data-phase='closing'] .theme-row--logo img { transform: scale(1.42); }
.subtitle { margin: 26px 0 0; font: 700 1.0625rem/1.35 Sora, sans-serif; letter-spacing: -.01em; color: var(--cream); text-wrap: balance; transition: transform 680ms var(--ease-out); }
.replay-duel { margin-top: 14px; transition: transform 680ms var(--ease-out); }
.scene-hero[data-phase='closing'] .subtitle, .scene-hero[data-phase='closing'] .replay-duel { transform: translateY(var(--closing-sub-gap)); }

/* Retour après le duel : titre, wordmark, sous-titre puis « REJOUER » se reposent l'un après l'autre. */
.scene-hero.is-returning .closing-only { animation: return-rise 520ms var(--ease-out) 300ms both; }
.scene-hero.is-returning .theme-row--logo img { animation: return-pop 720ms cubic-bezier(.2,1.3,.4,1) 420ms both; }
.scene-hero.is-returning .subtitle { animation: return-rise 480ms var(--ease-out) 600ms both; }
.scene-hero.is-returning .replay-duel { animation: return-fade 420ms ease 760ms both; }
@keyframes return-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes return-pop { from { opacity: 0; transform: scale(1.1); } }
@keyframes return-fade { from { opacity: 0; } }

/* ---------- « TU VEUX ESSAYER ? » ---------- */
.ask { margin: 0; display: flex; flex-direction: column; align-items: center; font: 700 clamp(3.1rem, 15vw, 5.6rem)/.96 Sora, sans-serif; letter-spacing: -.065em; color: var(--cream); text-align: center; }
.ask-line { display: block; }
.ask-line--accent { white-space: nowrap; }
.ask-mark { display: inline-block; color: var(--coral); }
.scene-ask.is-live .ask-line { animation: ask-slam 620ms cubic-bezier(.2,1.35,.4,1) both; }
.scene-ask.is-live .ask-line--accent { animation-delay: 150ms; }
.scene-ask.is-live .ask-mark { animation: ask-mark 720ms cubic-bezier(.2,1.5,.4,1) 430ms both; }
@keyframes ask-slam { from { opacity: 0; transform: translateY(26px) scale(1.18); } 55% { opacity: 1; } }
@keyframes ask-mark { from { opacity: 0; transform: scale(.3) rotate(-24deg); } 60% { opacity: 1; transform: scale(1.12) rotate(6deg); } }
.stage:not([data-scene='ask']) .scene-ask { transform: scale(1.06); }

/* ---------- Bloc d'inscription : sans cadre, une seule ligne de statut ---------- */
.signup-panel { position: relative; z-index: 3; flex: 0 0 auto; display: grid; padding: 10px var(--gutter) 2px; }
.panel-view { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; transition: opacity 360ms ease, transform 480ms var(--ease-out), visibility 0s; }
.signup-panel[data-state='form'] .panel-thanks, .signup-panel[data-state='thanks'] .panel-form { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 240ms ease, transform 320ms ease, visibility 0s linear 320ms; }
.signup-panel[data-state='thanks'] .panel-thanks { transition-delay: 160ms; }
.availability { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 .75rem/1 Sora, sans-serif; letter-spacing: .1em; color: var(--cream); outline: none; }
.availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(103,214,154,.16); }
.availability--done { margin-bottom: 12px; }
.availability--under { margin: 10px 0 0; gap: 7px; font-size: .6875rem; }
.signup-title { margin: 0 0 10px; font: 700 1.125rem/1.1 Sora, sans-serif; letter-spacing: -.03em; color: var(--cream); }
.reassurance { margin: 5px 0 0; font: 600 .6875rem/1.3 Manrope, sans-serif; letter-spacing: .02em; color: var(--muted); }
.main-cta { width: min(100%, 300px); }
.availability--under i { width: 6px; height: 6px; }
.signup { width: min(100%, 340px); display: grid; gap: 10px; justify-items: center; }
.email-field { position: relative; width: 100%; }
.email-field > svg { width: 19px; height: 19px; position: absolute; left: 17px; top: 15.5px; color: var(--secondary); pointer-events: none; }
input { width: 100%; min-width: 0; height: 50px; border: 1px solid var(--border-strong); border-radius: 14px; background: rgba(29,31,34,.9); color: var(--text); padding: 12px 16px 12px 46px; outline: none; font-size: 1rem; transition: border-color 120ms ease; }
input::placeholder { color: var(--secondary); }
input:focus { border-color: var(--coral); outline: 1px solid var(--coral); }
input[aria-invalid='true'] { border-color: var(--error); }
.form-status { display: none; margin: -2px 0 0; font-size: .75rem; line-height: 1.4; color: var(--error); text-align: center; }
.form-status:not(:empty) { display: block; }

/* CTA signature : art officiel button-play-blank + libellé en couches (PlayButton.tsx SignatureLabel). */
.signature-cta { --chars: 17; position: relative; container-type: inline-size; display: block; width: min(100%, 256px); aspect-ratio: 780 / 211; padding: 0; border: 0; color: #ffd6be; background: url('./assets/game/button-play-blank.png') center / 100% 100% no-repeat; text-decoration: none; transition: transform 75ms ease-out; filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
.signature-cta .cta-face { position: absolute; inset: 0; }
.signature-cta .cta-label { position: absolute; left: 8%; right: 8%; top: 38.8%; transform: translateY(-50%); font: 700 min(9.66cqw, calc(120cqw / var(--chars)))/1 Sora, sans-serif; text-align: center; white-space: nowrap; color: #ffd6be;
  text-shadow: max(.6px, .258cqw) max(1px, .451cqw) 0 #b0341e, 0 calc(-1 * max(.5px, .193cqw)) 0 #30090c, calc(-1 * max(.5px, .193cqw)) 0 0 #30090c, max(1.1px, .451cqw) max(1px, .451cqw) 0 #30090c, max(.6px, .258cqw) max(1.5px, .644cqw) 0 #30090c, max(1.1px, .451cqw) max(1.5px, .644cqw) 0 #30090c; }
.signature-cta:active { transform: translateY(4px) scale(.98); transition-duration: 60ms; }
.signature-cta:disabled { cursor: wait; transform: translateY(3px) scale(.99); filter: saturate(.85) brightness(.92); }
.text-button { min-height: 44px; padding: 0 18px; border: 0; background: none; color: var(--secondary); font: 700 12px/1 Sora, sans-serif; letter-spacing: .9px; }
.text-button:hover { color: var(--cream); }

/* Lumière qui fait le tour des boutons de la Home (HomePlayPerimeterLed) : 3,4 s de course toutes les 5,6 s. */
.perimeter-led { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.perimeter-led path { fill: none; stroke-linecap: round; stroke-dasharray: 86 3300.65; opacity: 0; animation: perimeter-led 5600ms linear 2200ms infinite; }
.perimeter-led .led-coral { stroke: var(--coral); stroke-width: 7; }
.perimeter-led .led-cream { stroke: var(--cream); stroke-width: 2.5; }
@keyframes perimeter-led { 0% { stroke-dashoffset: 0; opacity: 0; } 6.07% { opacity: .72; } 51.6% { opacity: .72; } 60.71% { stroke-dashoffset: -3386.65; opacity: 0; } 100% { stroke-dashoffset: -3386.65; opacity: 0; } }
.master-button:disabled .perimeter-led { display: none; }
/* Wizz du CTA principal toutes les 6 s (même secousse que le Booster de l'app : 1, −1, 0,7, −0,5, 0). */
.main-cta { animation: cta-wizz 6000ms linear 6000ms infinite; }
@keyframes cta-wizz { 0%, 95.17% { translate: 0 0; rotate: 0deg; } 95.92% { translate: 1.3px 0; rotate: 1.4deg; } 97% { translate: -1.3px 0; rotate: -1.4deg; } 98% { translate: .9px 0; rotate: 1deg; } 99% { translate: -.65px 0; rotate: -.7deg; } 100% { translate: 0 0; rotate: 0deg; } }
.main-cta:disabled { animation: none; }

/* ---------- Démo : écran de l'app (barres réelles), puis flow du match classé ---------- */
.scene-duel { padding: 4px 12px 6px; }
.duel { position: relative; width: 100%; max-width: 402px; flex: 1 1 auto; min-height: 0; max-height: 720px; overflow: hidden; isolation: isolate; border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(149deg, #0f1114 0%, #111316 30%, #12151a 68%, #0f1114 100%); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.duel-glyphs { position: absolute; inset: 0; pointer-events: none; opacity: .75; }
.demo-caption { flex: 0 0 auto; margin: 6px 0 0; font: 600 .6875rem/1.3 Manrope, sans-serif; color: var(--muted); text-align: center; }
/* Cadre de téléphone : desktop et mobile ≤ 480 px (entre les deux, la démo reste sans cadre d'appareil). */
.device-holder, .device { display: contents; }
.device-buttons, .device-island, .device-status, .device-home { display: none; }

/* Barre du haut (QuizrMainHeader / QuizrTopBar) : cloche, Booster, aide « ? », wordmark centré, Fragments, réglages. */
.app-topbar { position: absolute; z-index: 4; top: var(--inset-top); left: 0; right: 0; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0; transition: opacity 220ms ease, transform 320ms var(--ease-out); }
.topbar-slot { display: contents; }
.topbar-wordmark { width: 78px; height: 34px; object-fit: contain; }
.topbar-icon { width: 22px; height: 44px; display: grid; place-items: center; color: var(--secondary); }
.topbar-icon svg, .tab svg, .theme-card-info svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.help-medallion { width: 26px; height: 44px; display: grid; place-items: center; }
.help-face { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-raised); box-shadow: 0 2px 0 var(--inset), 0 3px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14); color: var(--cream); font: 700 14px/17px Sora, sans-serif; padding-top: 1px; }
.topbar-fragments { display: flex; align-items: center; gap: 4px; padding: 0; color: var(--cream); font: 700 12px/1 Sora, sans-serif; letter-spacing: -.1px; }
.topbar-fragments img { width: 20px; height: 15px; }
/* MiniBooster (×2 disponibles) : bascule toutes les 4,5 s avec reflet, secousse toutes les 8,5 s. */
.mini-booster { position: relative; width: 24px; height: 44px; display: grid; place-items: center; }
.mini-booster-pack { position: relative; width: 24px; height: 41.5px; border-radius: 3px; overflow: hidden; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); animation: booster-tilt 4500ms ease-in-out infinite, booster-wizz 8490ms linear infinite; }
.mini-booster-pack svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-booster-shimmer { position: absolute; top: -6px; bottom: -6px; left: 0; width: 6px; background: rgba(255,255,255,.55); opacity: 0; animation: booster-shimmer 4500ms linear infinite; }
.mini-booster-count { position: absolute; top: 3px; right: -3px; min-width: 16px; height: 14px; padding: 0 3px; display: grid; place-items: center; border-radius: 7px; border: 1px solid rgba(245,245,242,.28); background: rgba(16,17,19,.92); color: var(--cream); font: 700 8px/1 Sora, sans-serif; letter-spacing: .2px; }
@keyframes booster-tilt { 0%, 75.56% { rotate: 0deg; } 81.67% { rotate: -6deg; } 90.22% { rotate: 4deg; } 100% { rotate: 0deg; } }
@keyframes booster-shimmer { 0%, 75.56% { opacity: 0; transform: translateX(-14px) rotate(18deg); } 80.44% { opacity: .7; } 92.67% { opacity: .5; } 100% { opacity: 0; transform: translateX(34px) rotate(18deg); } }
@keyframes booster-wizz { 0%, 96.58% { translate: 0 0; } 97.11% { translate: 1.3px 0; } 97.88% { translate: -1.3px 0; } 98.59% { translate: .9px 0; } 99.29% { translate: -.65px 0; } 100% { translate: 0 0; } }

/* Barre d'onglets (app/(tabs)/_layout.tsx) : Accueil actif en corail, autres onglets en gris. */
.app-tabbar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + var(--inset-bottom)); display: flex; padding: 7px 0 calc(4px + var(--inset-bottom)); border-top: 1px solid var(--border); background: rgba(16,17,19,.96); transition: opacity 220ms ease, transform 320ms var(--ease-out); }
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); }
.tab svg { width: 21px; height: 21px; }
.tab span { width: 100%; font: 700 8px/1.2 Manrope, sans-serif; letter-spacing: -.2px; text-align: center; white-space: nowrap; }
.tab--active { color: var(--coral); }
/* Comme dans l'app : le match plein écran n'a ni barre du haut ni onglets. */
.duel:not([data-phase='picker']) .app-topbar { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.duel:not([data-phase='picker']) .app-tabbar { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* Couches du flow : la sortante disparaît (200 ms) avant que l'entrante n'arrive — jamais deux écrans superposés. */
.duel-layer { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(14px + var(--inset-top)) 16px calc(14px + var(--inset-bottom)); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); transition: opacity 200ms ease, transform 300ms ease, visibility 0s linear 300ms; }
.duel[data-phase='picker'] .picker, .duel[data-phase='searching'] .lobby, .duel[data-phase='found'] .lobby,
.duel[data-phase='faceoff'] .faceoff, .duel[data-phase='countdown'] .countdown, .duel[data-phase='play'] .play, .duel[data-phase='result'] .result { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms ease 200ms, transform 480ms var(--ease-out) 200ms, visibility 0s; }

/* Écran d'accueil de la démo : carrousel de thèmes de la Home + JOUER. */
.picker { justify-content: center; align-items: center; gap: 18px; padding: calc(var(--topbar-h) + var(--inset-top) + 6px) 16px calc(var(--tabbar-h) + var(--inset-bottom) + 8px); }
.picker-header { width: 100%; min-height: 32px; display: flex; align-items: center; padding-inline: 4px; }
.picker-title { font: 700 15px/1.2 Sora, sans-serif; letter-spacing: -.35px; color: var(--cream); }
.picker-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
.play-button { position: relative; width: 84%; padding: 0; border: 0; background: none; transition: transform 75ms ease-out; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.play-button img { width: 100%; height: auto; display: block; }
.play-button:active { transform: translateY(4px) scale(.98); }

/* Carrousel (ThemeCarousel.tsx) : carte centrale 1,08, voisines 0,9 enfoncées de 6 pt et voilées, boucle, ressort. */
.carousel { position: relative; width: calc(100% + 32px); margin-inline: -16px; height: 226px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.carousel:active { cursor: grabbing; }
.carousel-card { position: absolute; top: 18px; width: 112px; height: 190px; will-change: transform; }
.carousel-scale { position: relative; width: 112px; height: 190px; transform-origin: center; }
.theme-card { position: relative; width: 112px; height: 190px; }
.theme-card-socle { position: absolute; left: 0; right: 0; top: 5px; height: 185px; border-radius: 16px; background: var(--inset); border: 1px solid rgba(0,0,0,.5); box-shadow: 0 6px 8px rgba(0,0,0,.35); }
.theme-card-face { position: absolute; left: 0; top: 0; width: 112px; height: 185px; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: transform 70ms ease-out; }
.carousel-card:active .theme-card-face { transform: translateY(3px); }
.theme-card-art { position: relative; flex: 0 0 106px; overflow: hidden; background: var(--emblem-canvas); }
.theme-card-art-inner { position: absolute; top: 0; bottom: 10px; left: -8px; right: -8px; display: grid; place-items: center; }
.theme-card-art-inner img { width: 112px; height: 100%; object-fit: contain; pointer-events: none; }
.theme-card-sheen { position: absolute; inset: 0 0 auto; height: 36px; background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,0)); }
.theme-card-fade { position: absolute; inset: auto 0 0; height: 26px; background: linear-gradient(rgba(29,31,34,0), var(--surface)); }
.theme-card-content { flex: 1; display: flex; flex-direction: column; padding: 1px 9px 7px; }
.theme-card-name { font: 700 12.5px/16px Sora, sans-serif; letter-spacing: -.35px; color: var(--cream); white-space: nowrap; }
.theme-card-universe { margin-top: 1px; font: 700 7px/1.3 Manrope, sans-serif; letter-spacing: .5px; color: var(--muted); }
.theme-card-status { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.theme-card-rank { height: 30px; display: flex; align-items: center; gap: 3px; margin: 0 -3px; padding: 0 3px 0 2px; border-radius: 9px; background: var(--inset); }
.theme-card-rank img { width: 18px; height: 18px; }
.theme-card-rank-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 700 9px/1 Sora, sans-serif; letter-spacing: 0; } /* app : 8,5 pt + adjustsFontSizeToFit ; script.js réduit la taille jusqu'à ce que le nom tienne en entier */
.theme-card-edge { position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: rgba(255,255,255,.1); }
.theme-card-info { position: absolute; top: 7px; left: 7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 11px; background: rgba(16,17,19,.6); color: var(--cream); }
.theme-card-info svg { width: 17px; height: 17px; }
.theme-card-shade { position: absolute; left: 0; right: 0; top: 0; bottom: 5px; border-radius: 16px; background: var(--inset); pointer-events: none; }
.theme-card-outline { position: absolute; display: none; border: 1.5px solid var(--secondary); pointer-events: none; }
.carousel-card[data-selected='true'] .theme-card-outline { display: block; animation: outline-breathe 5200ms ease-in-out infinite; }
@keyframes outline-breathe { 50% { border-color: var(--cream); } }

/* Rang : badge officiel + nom dans la couleur de famille + pastille de division (ranks.ts, DivisionPill). */
.rank-line { display: flex; align-items: center; gap: 5px; }
.rank-line img { width: 22px; height: 22px; }
.rank-line--mirrored { flex-direction: row-reverse; }
.rank-name { min-width: 0; overflow: hidden; white-space: nowrap; font: 700 12px/1 Sora, sans-serif; letter-spacing: .4px; }
.face-copy .rank-line { max-width: 100%; }
.rank-name--gold { color: var(--rank-gold); }
.rank-name--platinum { color: var(--rank-platinum); }
.rank-name--diamond { color: var(--rank-diamond); }
.division-pill { min-width: 20px; height: 16px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 6px; color: #fff; font: 700 10px/12px Sora, sans-serif; letter-spacing: .2px; }
.division-pill--gold { background: var(--rank-gold); }
.division-pill--platinum { background: var(--rank-platinum); }
.division-pill--diamond { background: var(--rank-diamond); }
.division-pill--sm { min-width: 16px; height: 14px; padding: 0 3px; }
.rank-line--icon { gap: 4px; }
.rank-line--icon img { width: 24px; height: 24px; }
.rank-line--icon .division-pill { min-width: 25px; height: 21px; }

/* Recherche (QuizrMatchmaking). L'état (recherche / trouvé) appartient à la couche, pas à la phase courante. */
.lobby { align-items: center; justify-content: space-between; padding-block: calc(36px + var(--inset-top)) calc(22px + var(--inset-bottom)); }
.lobby-identity { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.lobby-emblem { width: 208px; height: 176px; display: grid; place-items: center; }
.lobby-emblem img { width: 208px; height: 176px; object-fit: contain; }
.lobby.is-live .lobby-emblem img { animation: emblem-breath 680ms ease-in-out infinite alternate; }
@keyframes emblem-breath { to { transform: scale(1.035); } }
.lobby-theme { margin: 12px 0 0; font: 700 30px/1 Sora, sans-serif; letter-spacing: .8px; color: var(--cream); }
.lobby-type { margin: 0; font: 700 10px/1.4 Manrope, sans-serif; letter-spacing: 1.15px; color: var(--coral); }
.lobby-status { display: grid; place-items: center; min-height: 56px; }
.status-searching, .status-found { grid-area: 1 / 1; display: flex; align-items: center; }
.status-searching { flex-direction: column; gap: 12px; }
.status-found { gap: 12px; font: 700 15px/1.2 Sora, sans-serif; letter-spacing: .7px; color: var(--text); opacity: 0; }
/* Comme l'app (bloc à clé + FadeIn 160 ms) : la recherche disparaît d'un coup, « ADVERSAIRE TROUVÉ » apparaît en fondu. */
.lobby[data-status='found'] .status-searching { visibility: hidden; }
.lobby[data-status='found'] .status-found { opacity: 1; transition: opacity 160ms ease; }
.status-found i { width: 30px; height: 2px; border-radius: 1px; transform-origin: center; }
.lobby[data-status='found'] .status-found i { animation: found-line 420ms var(--ease-out) 60ms both; }
@keyframes found-line { from { transform: scaleX(0); } }
.lobby-status-text { margin: 0; font: 700 15px/1.2 Sora, sans-serif; letter-spacing: .7px; color: var(--text); }
.found-coral { background: var(--coral); }
.found-blue { background: var(--blue); }
.segments { display: flex; align-items: center; gap: 6px; }
.segments i { width: 18px; height: 4px; border-radius: 2px; opacity: .35; transform: scaleY(.8); }
.lobby.is-live .segments i, .slide-intermission.is-active .segments i { animation-name: segment-wave; animation-duration: 1480ms; animation-timing-function: cubic-bezier(.33,1,.68,1); animation-iteration-count: infinite; }
.segments i:nth-child(1) { background: var(--logo-coral); }
.segments i:nth-child(2) { background: var(--logo-blue); animation-delay: 180ms; }
.segments i:nth-child(3) { background: var(--logo-yellow); animation-delay: 360ms; }
.segments i:nth-child(4) { background: var(--logo-green); animation-delay: 540ms; }
@keyframes segment-wave { 0% { opacity: .35; transform: scaleY(.8); } 28% { opacity: 1; transform: scaleY(1); } 63%, 100% { opacity: .35; transform: scaleY(.8); } }
.lobby-actions { width: 100%; display: flex; justify-content: center; }
/* App : l'emplacement du bouton est conservé mais masqué dès « ADVERSAIRE TROUVÉ » (aucun saut de mise en page). */
.lobby[data-status='found'] .lobby-actions { opacity: 0; pointer-events: none; }
.signature-cta--compact { width: 76%; }

/* Face-à-face (DuelFaceoff / DuelIdentity) : avatar, pseudo, rang, pays ; médaillon wordmark au centre. */
.faceoff { justify-content: center; padding-inline: 16px; }
.face { display: flex; align-items: flex-start; gap: 16px; }
.face--opponent { justify-content: flex-end; }
.face-copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 12px; }
.face--opponent .face-copy { align-items: flex-end; }
.face-name { max-width: 100%; font: 700 24px/1.1 Sora, sans-serif; letter-spacing: -.3px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-country { display: flex; align-items: center; gap: 6px; font: 700 10px/1 Manrope, sans-serif; letter-spacing: .8px; color: var(--secondary); }
.face-country img { height: 10px; width: auto; border-radius: 2px; }
.face-divider { display: flex; align-items: center; height: 132px; margin: 20px -12px; }
.wing { flex: 1; height: 1.5px; opacity: .85; }
.wing--coral { background: var(--coral); }
.wing--blue { background: var(--blue); }
.faceoff.is-live .face--self { animation: from-left 480ms cubic-bezier(.33,1,.68,1) 200ms both; }
.faceoff.is-live .face--opponent { animation: from-right 480ms cubic-bezier(.33,1,.68,1) 320ms both; }
.faceoff.is-live .wing { animation: fade-in 420ms ease 420ms both; }
@keyframes from-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes medallion-in { from { opacity: 0; transform: scale(.6); } }
/* Médaillon : wordmark officiel dans un anneau argent fin, point de lumière en orbite (DuelMedallion). */
.medallion { position: relative; flex: 0 0 100px; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(236,240,247,.88); background: var(--emblem-canvas); box-shadow: 0 0 8px rgba(232,238,248,.25); }
.faceoff.is-live .medallion { animation: medallion-in 600ms cubic-bezier(.2,1.5,.45,1) 420ms both, medallion-glow 2200ms ease-in-out 1020ms infinite; }
@keyframes medallion-glow { 50% { box-shadow: 0 0 10px rgba(232,238,248,.35); } }
.medallion-inset { position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--border); }
.medallion img { width: 70%; height: auto; position: relative; }
.medallion-orbit { position: absolute; inset: 0; }
.faceoff.is-live .medallion-orbit { animation: orbit 2600ms linear 720ms infinite; }
.medallion-orbit i { position: absolute; left: calc(50% - 3px); top: -3px; width: 6px; height: 5px; border-radius: 3px; background: #fff; box-shadow: 0 0 6px #fff; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* Décompte (CountdownStep) : texte + chiffre synchronisés, même transition à chaque étape. */
.countdown { align-items: center; justify-content: center; }
.countdown-step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.countdown-label { margin: 0; font: 700 16px/1 Sora, sans-serif; letter-spacing: 2px; color: var(--cream); }
.countdown-count { margin: 0; font: 700 112px/1 Sora, sans-serif; color: var(--cream); font-variant-numeric: tabular-nums; }
.countdown-step.is-stepping { animation: count-step 420ms cubic-bezier(.33,1,.68,1) both; }
@keyframes count-step { from { opacity: 0; transform: scale(.86); } 62% { opacity: 1; } }

/* Avatar : canevas, fenêtre photo 70 %, rayon 12 % du canevas, anneau neutre 2 pt (avatarGeometry.ts). */
.avatar { --size: 52px; position: relative; flex: 0 0 var(--size); width: var(--size); height: var(--size); display: grid; place-items: center; }
.avatar-photo { width: 70%; height: 70%; display: block; object-fit: cover; border: 2px solid var(--anthracite); border-radius: calc(var(--size) * .12); background: var(--surface); }
.avatar-photo--empty { display: grid; place-items: center; color: var(--muted); }
.avatar-photo--empty svg { width: 58%; height: 58%; stroke-width: 1.6; }
.avatar-photo--brand { display: grid; place-items: center; overflow: hidden; background: var(--emblem-canvas); }
.avatar-photo--brand img { width: 82%; height: auto; }
.avatar--versus { --size: 112px; }
.avatar--result { --size: 80px; }
.avatar.is-locked .avatar-photo { animation: opponent-locked 700ms ease-out; }
@keyframes opponent-locked { 0% { box-shadow: 0 0 0 0 rgba(97,181,245,0); } 30% { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(97,181,245,.45), 0 0 8px rgba(97,181,245,.34); } 100% { box-shadow: 0 0 0 7px rgba(97,181,245,0); } }

/* Question (RankedDuelSurface) : HUD, question au centre, réponses dans la zone du pouce. Validé cockpit. */
.hud { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; position: relative; z-index: 2; padding-top: 4px; }
.hud-player { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hud-player--right { align-items: flex-end; }
.hud-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hud-player--right .hud-copy { align-items: flex-end; }
.hud-name { min-width: 0; font: 700 13px/1.2 Sora, sans-serif; letter-spacing: .1px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-score-row { display: flex; align-items: center; gap: 6px; min-height: 38px; margin-top: 8px; padding-inline: 6px; }
.hud-score { font: 700 28px/1 Sora, sans-serif; font-variant-numeric: tabular-nums; display: inline-block; }
.hud-score--coral { color: var(--coral); }
.hud-score--blue { color: var(--blue); }
.hud-score.is-bumping { animation: score-bump 480ms ease-out; }
@keyframes score-bump { 31% { transform: scale(1.16); } 60% { transform: scale(.97); } 100% { transform: scale(1); } }
.hud-gain { font: 700 17px/1 Sora, sans-serif; color: var(--green); opacity: 0; }
.hud-gain.is-showing { animation: gain-float 1500ms ease-out forwards; }
@keyframes gain-float { 0% { opacity: 0; transform: translateY(-8px); } 13% { opacity: 1; transform: none; } 79% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ring-timer { position: relative; width: 60px; height: 60px; display: grid; place-items: center; }
.ring-timer svg { position: absolute; inset: 0; width: 60px; height: 60px; transform: rotate(-90deg); }
.ring-track { fill: rgba(10,11,13,.55); stroke: rgba(245,245,242,.1); stroke-width: 4; }
.ring-progress { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; }
.ring-value { position: relative; font: 700 20px/1 Sora, sans-serif; color: var(--cream); font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.ring-value[data-idle='true'] { color: var(--muted); }
.ring-value[data-urgent='true'] { color: var(--coral); }
.hud-progress { font: 700 11px/1 Sora, sans-serif; letter-spacing: .6px; color: var(--secondary); }
.play-body { flex: 1; display: flex; flex-direction: column; margin-top: 12px; min-height: 0; }
.question-zone { position: relative; flex: 1; min-height: 110px; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 12px 0; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 280ms ease; }
.slide.is-active { opacity: 1; transform: none; transition: opacity 240ms ease 160ms, transform 360ms var(--ease-out) 160ms; }
.question { max-width: 360px; margin: 0; font: 700 25px/33px Sora, sans-serif; color: var(--cream); text-wrap: balance; }
.intermission-last { font: 700 11px/1 Manrope, sans-serif; letter-spacing: 1.4px; color: var(--coral); }
.intermission-title { font: 700 30px/1 Sora, sans-serif; letter-spacing: .6px; color: var(--cream); }
.feedback-slot { height: 36px; display: grid; place-items: center; }
.feedback { margin: 0; font: 700 13px/1 Sora, sans-serif; letter-spacing: 1.2px; opacity: 0; transition: opacity 160ms ease; }
.feedback.is-showing { opacity: 1; }
.feedback[data-tone='good'] { color: var(--green); }
.feedback[data-tone='bad'] { color: var(--coral); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 3%; height: 196px; opacity: 0; transform: translateY(-10px); transition: opacity 200ms ease, transform 200ms ease; }
.answers.is-visible { opacity: 1; transform: none; transition: opacity 220ms cubic-bezier(.33,1,.68,1), transform 220ms cubic-bezier(.33,1,.68,1); }
.answer { position: relative; height: 92px; display: grid; place-items: center; padding: 0 12px; border-radius: 14px; border: 2px solid transparent; background: var(--cream); color: var(--inset); transition: transform 70ms ease-out, opacity 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.answer:enabled:active { transform: scale(.96); }
.answer:disabled { cursor: default; }
.answer-text { font: 700 15px/20px Sora, sans-serif; text-align: center; }
.answer[data-state='pending'] { border-color: var(--coral); }
.answer[data-state='correct'], .answer[data-state='revealed-correct'] { background: var(--green); border-color: var(--green); }
.answer[data-state='wrong'] { background: var(--coral); border-color: var(--coral); }
.answer[data-state='dimmed'] { opacity: .32; }
.answer.is-pulsing { animation: reveal-pulse 880ms ease-in-out; }
@keyframes reveal-pulse { 23% { opacity: .55; transform: scale(1.035); } 50% { opacity: 1; transform: scale(1); } 73% { opacity: .55; transform: scale(1.035); } 100% { opacity: 1; transform: scale(1); } }

/* Résultat (RankedMatchResultView) : verdict, puis les deux scores comptent depuis 0. */
.result { justify-content: center; gap: 30px; padding-inline: 20px; }
.outcome { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--green); font: 700 42px/1 Sora, sans-serif; letter-spacing: .7px; }
.outcome[data-tone='draw'] { color: var(--cream); }
.outcome[data-tone='loss'] { color: var(--coral); }
.outcome.is-entering { animation: outcome-in 560ms cubic-bezier(.2,1.4,.42,1) 200ms both; }
@keyframes outcome-in { from { opacity: 0; transform: scale(.7); } 50% { opacity: 1; } }
.burst { width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.burst--left { transform: rotate(-8deg); }
.burst--right { transform: rotate(8deg); }
.result-players { display: flex; align-items: flex-start; justify-content: space-between; }
.result-player { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.result-name { max-width: 96%; font: 700 13px/1.2 Sora, sans-serif; letter-spacing: .3px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-score { font: 700 42px/1 Sora, sans-serif; font-variant-numeric: tabular-nums; }
.result-score--coral { color: var(--coral); }
.result-score--blue { color: var(--blue); }
.result-versus { margin-top: 30px; font: 700 18px/1 Sora, sans-serif; color: var(--muted); }
.result.is-live .result-players { animation: rise-in 320ms cubic-bezier(.33,1,.68,1) 300ms both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Écrans courts (navigateurs intégrés, petits iPhone) : on resserre la démo sans rien retirer. */
@media (max-width: 899px) and (max-height: 800px) {
  :root { --row-height: 3.8rem; --topbar-h: 54px; --tabbar-h: 58px; }
  .headline { font-size: clamp(2.2rem, 10vw, 3.1rem); }
  .subtitle { margin-top: 18px; }
}
/* Démo sans cadre (481–899 px). En dessous, la démo est dans le téléphone en points réels, comme sur desktop. */
@media (min-width: 481px) and (max-width: 899px) and (max-height: 800px) {
  .lobby { padding-block: 18px 14px; }
  .lobby-emblem, .lobby-emblem img { width: 190px; height: 150px; }
  .question { font-size: 21px; line-height: 28px; }
  .answers { height: 168px; }
  .answer { height: 78px; }
  .face-divider { height: 104px; margin-block: 10px; }
  .avatar--versus { --size: 92px; }
  .countdown-count { font-size: 96px; }
}
@media (min-width: 481px) and (max-width: 899px) {
  .picker { gap: 10px; padding-top: calc(var(--topbar-h) + 2px); padding-bottom: calc(var(--tabbar-h) + 4px); }
  .picker-header { min-height: 24px; }
  .carousel { height: 220px; }
  .carousel-card { top: 15px; }
  .play-button { width: 80%; }
  .picker-actions .text-button { min-height: 36px; }
}
@media (max-width: 350px) { :root { --gutter: 14px; } }
/* Desktop : bloc animé ancré à gauche, bloc d'inscription ancré à droite, un vrai vide entre les deux. */
@media (min-width: 900px) {
  :root { --gutter: 56px; --row-height: 6.2rem; --closing-lift: -64px; --closing-title-gap: -24px; --closing-sub-gap: 20px; }
  .masthead { height: 92px; padding-top: 18px; }
  .signature img { width: 156px; }
  .layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(48px, 1fr) minmax(0, 400px); align-items: center; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
  .stage { grid-column: 1; align-self: stretch; }
  .signup-panel { grid-column: 3; align-self: center; padding: 0; }
  .scene { padding: 0; align-items: flex-start; }
  .scene-hero { align-items: center; }
  .headline { font-size: clamp(3.6rem, 5.6vw, 5.4rem); }
  .closing-only { font-size: clamp(3rem, 4.6vw, 4.4rem); }
  .sur { margin-top: 22px; font-size: .9375rem; }
  .theme-row { font-size: 3.9rem; }
  .theme-row[data-long='true'] { font-size: 3.2rem; }
  .subtitle { font-size: 1.35rem; margin-top: 34px; }
  .ask { align-items: flex-start; text-align: left; font-size: clamp(4.4rem, 7.4vw, 7rem); }
  .scene-duel { padding: 0 0 10px; }
  .demo-caption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 9px; font-size: .75rem; }
  .panel-view { align-items: flex-start; }
  .availability { margin-bottom: 16px; font-size: .8125rem; }
  .availability--under { margin: 14px 0 0; font-size: .75rem; }
  .signup-title { margin-bottom: 18px; font-size: 1.875rem; letter-spacing: -.045em; }
  .reassurance { margin-top: 6px; font-size: .75rem; }
  /* Alignés sur la face du bouton (x = 54 / 1553 de l'art), pas sur son socle. */
  .availability--under, .reassurance { margin-left: calc(100% * 54 / 1553); }
  .main-cta { width: 100%; }
  .signup { width: 100%; gap: 14px; justify-items: stretch; }
  input { height: 56px; }
  .email-field > svg { top: 18.5px; }
  .signature-cta { width: 100%; }
  .signature-cta--compact { width: 76%; }
  .form-status { text-align: left; }
  footer { padding-bottom: 12px; }
  .disclaimer, footer a { font-size: .6875rem; }
}
/* Même téléphone sur desktop et sur mobile (≤ 480 px). */
@media (min-width: 900px), (max-width: 480px) {
  /* Cadre dessiné par QUIZR aux proportions du cadre iPhone 17 du Simulator (436 × 908 pt, écran 402 × 874 pt,
     bord 17 pt, rayon extérieur 80 pt, rayon d'écran 62 pt, boutons aux positions du Simulator). Mat, aucun
     fichier ni logo Apple. L'ensemble est dessiné en points réels puis mis à l'échelle (script.js : --device-scale). */
  .device-holder { display: block; position: relative; flex: 0 0 auto; width: calc(436px * var(--device-scale, .8)); height: calc(908px * var(--device-scale, .8)); }
  .device { display: block; position: absolute; left: 0; top: 0; width: 436px; height: 908px; transform: scale(var(--device-scale, .8)); transform-origin: 0 0; border-radius: 80px; background: #2a2d33; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 3px #1d2025, inset 0 0 0 17px #050506; }
  .device-buttons { display: block; }
  .device-buttons i { position: absolute; width: 4px; border-radius: 2px; background: #2f3238; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
  .device-buttons .btn-action { left: -3px; top: 160px; height: 34px; }
  .device-buttons .btn-vol-up { left: -3px; top: 221px; height: 64px; }
  .device-buttons .btn-vol-down { left: -3px; top: 300px; height: 64px; }
  .device-buttons .btn-power { right: -3px; top: 262px; height: 101px; }
  .device .duel { --inset-top: 62px; --inset-bottom: 34px; position: absolute; left: 17px; top: 17px; width: 402px; height: 874px; max-width: none; max-height: none; border: 0; border-radius: 62px; box-shadow: none; }
  /* Dynamic Island (126 × 37 pt à 11 pt du haut de l'écran), barre d'état et indicateur d'accueil, dessinés. */
  .device-island { display: block; position: absolute; z-index: 13; left: calc(17px + 201px - 63px); top: calc(17px + 11px); width: 126px; height: 37px; border-radius: 19px; background: #000; }
  .device-status { display: flex; position: absolute; z-index: 13; left: 17px; top: 17px; width: 402px; height: 59px; align-items: center; justify-content: space-between; padding: 0 0 0 0; color: #fff; pointer-events: none; }
  .status-time { width: 138px; text-align: center; padding-left: 6px; font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.2px; }
  .status-icons { width: 138px; display: flex; align-items: center; justify-content: center; gap: 6px; padding-right: 8px; }
  .status-icons svg { fill: #fff; stroke: #fff; stroke-width: 1; }
  .status-signal { width: 18px; height: 12px; stroke: none !important; }
  .status-wifi { width: 16px; height: 12px; stroke: none !important; }
  .status-battery { width: 27px; height: 13px; }
  .device-home { display: block; position: absolute; z-index: 13; left: calc(17px + 201px - 67px); top: calc(17px + 874px - 8px - 5px); width: 134px; height: 5px; border-radius: 3px; background: #fff; }
  /* Écrans de l'app en points réels, avec les marges de zone sûre de l'app (haut 62 pt, bas 34 pt) :
     QuizrTopBar (paddingTop = haut − 4, logo 34 pt, paddingBottom 12, icônes 44 pt à 8 pt du bas),
     onglets (bord 1 + 7 + 52 + bas), recherche / face-à-face (haut + 12, bas + 12), question (haut + 8, bas + 8 + 12),
     résultat (haut + 24, bas + 16). */
  .device .app-topbar { top: 0; height: calc(var(--inset-top) + 42px); align-items: flex-end; padding: 0 20px 8px; }
  .device .topbar-wordmark { margin-bottom: 4px; }
  .device .topbar-fragments { height: 44px; } /* centré dans l'emplacement de 44 pt, comme rightSlot */
  .device .app-tabbar { height: calc(1px + 7px + 52px + var(--inset-bottom)); padding: 7px 0 var(--inset-bottom); }
  .device .tab { min-height: 52px; }
  .device .picker { padding: calc(var(--inset-top) + 42px + 8px) 16px calc(1px + 7px + 52px + var(--inset-bottom) + 8px); }
  .device .lobby { padding: calc(var(--inset-top) + 12px + 64px) 16px calc(var(--inset-bottom) + 12px + 64px); }
  .device .faceoff { padding: calc(var(--inset-top) + 12px) 28px calc(var(--inset-bottom) + 12px); }
  .device .countdown { padding: 0; }
  .device .play { padding: calc(var(--inset-top) + 8px) 16px calc(var(--inset-bottom) + 8px + 12px); }
  .device .hud { padding-top: 8px; }
  .device .result { padding: calc(var(--inset-top) + 24px) 20px calc(var(--inset-bottom) + 16px); }
}
/* Mobile (≤ 480 px) : le téléphone entier tient à l'écran pendant la démo. Le bloc d'inscription glisse vers le bas
   hors de l'écran quand le téléphone apparaît et remonte au retour de « UNIQUEMENT SUR QUIZR ». La zone de la démo
   couvre aussi l'emplacement du bloc (script.js : --panel-h, --device-scale) : rien ne bouge ni ne défile. */
@media (max-width: 480px) {
  html, body { overscroll-behavior: none; } /* pas d'effet élastique iOS sur un écran qui ne défile pas */
  .layout { overflow: hidden; overflow: clip; }
  .scene-duel { bottom: calc(-1 * var(--panel-h, 0px)); }
  .device-holder { margin-bottom: 24px; }
  .demo-caption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 7px; }
  .signup-panel { transition: translate 560ms var(--ease-out) 200ms, opacity 420ms ease 240ms, visibility 0s; }
  /* Jamais pendant la saisie : un champ actif garde le bloc à l'écran (clavier ouvert compris). */
  .stage[data-scene='duel'] ~ .signup-panel:not(:focus-within) { translate: 0 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: translate 480ms cubic-bezier(.55,0,.45,1), opacity 360ms ease 120ms, visibility 0s linear 480ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-toggle { visibility: hidden; }
  .hud-gain.is-showing { opacity: 1; }
  .perimeter-led { display: none; }
}

/* --- SITE-WAITLIST-001 : inscription réelle + pied de page légal (e-mails en clair, liens vers les pages publiques). --- */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consent { margin: 0; max-width: 300px; font: 600 .6875rem/1.45 Manrope, sans-serif; color: var(--secondary); text-align: center; }
.consent a { color: var(--cream); text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.discord-link[hidden] { display: none; }
.site-footer { flex-direction: column; gap: 0; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.site-footer nav, .site-footer .footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin: 0; }
.site-footer a { min-height: 26px; font-size: .75rem; }
.site-footer .footer-contact a { color: var(--muted); }
@media (min-width: 900px) {
  /* Aligné sur la face du bouton, comme « places disponibles » et « iOS & Android ». */
  .consent { max-width: none; text-align: left; margin-left: calc(100% * 54 / 1553); }
}