/* ==========================================================================
   VOGUE OR NOT? — Styles
   Unités en px "design" sur une scène fixe 1080×1920 (ou 1920×1080),
   mise à l'échelle via `zoom` → rendu vectoriel net jusqu'en 4K.
   ========================================================================== */
:root {
  --y: #FFC72C;
  --y-deep: #f2b400;
  --ink: #111;
  --bk: #050505;
  --w: #fff;
  --fh: 'Saira', 'Arial Black', Impact, sans-serif;
  --fb: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16, .84, .24, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --top: 330px;
  --side: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body {
  display: grid; place-items: center;
  font-family: var(--fb); color: var(--w);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
html.no-cursor, html.no-cursor * { cursor: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; }

#stage { position: relative; overflow: hidden; background: var(--bk); flex: none; isolation: isolate; }
html.no-zoom #stage { position: absolute; left: 50%; top: 50%; transform-origin: center; }
#screens, .screen { position: absolute; inset: 0; }
#fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

/* ---------- Écrans & thèmes ---------- */
.screen { overflow: hidden; }
.screen.out { pointer-events: none; }
.theme-dark {
  background:
    radial-gradient(90% 55% at 50% 22%, rgba(255, 199, 44, .07), transparent 70%),
    radial-gradient(120% 80% at 50% 30%, #161616 0%, #070707 60%, #000 100%);
  color: var(--w);
}
.theme-yellow {
  background:
    radial-gradient(110% 70% at 50% 28%, #ffd85a 0%, var(--y) 55%, var(--y-deep) 100%);
  color: var(--ink);
}
/* grain léger */
.screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Transition "wipe" circulaire lors d'un changement de couleur de fond */
.screen.wipe { clip-path: circle(0px at var(--cx) var(--cy)); transition: clip-path 1s var(--ease-io); }
.screen.wipe.in { clip-path: circle(2400px at var(--cx) var(--cy)); }

.content {
  position: absolute; z-index: 3;
  inset: var(--top) var(--side) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.col-t, .col-b { display: flex; flex-direction: column; align-items: center; }

/* ---------- Animations d'entrée / sortie ---------- */
.a { opacity: 0; transform: translateY(48px); }
.screen.in .a {
  opacity: 1; transform: none;
  transition: opacity .7s ease calc(var(--i) * 85ms + 250ms), transform 1s var(--ease) calc(var(--i) * 85ms + 250ms);
}
.screen.out .a {
  opacity: 0; transform: translateY(-28px);
  transition: opacity .35s ease calc(var(--i) * 25ms), transform .45s var(--ease-io) calc(var(--i) * 25ms);
}

/* ---------- Typo ---------- */
.h {
  font-family: var(--fh); font-weight: 900; font-stretch: 100%;
  text-transform: uppercase; font-size: 188px; line-height: .86; letter-spacing: -.005em;
  color: var(--y);
}
.theme-yellow .h { color: var(--ink); }
.h .ln { display: block; overflow: hidden; padding: .08em .05em .02em; margin: -.08em 0 -.02em; }
.h .ln > span { display: inline-block; transform: translateY(110%) skewY(6deg); transform-origin: left bottom; }
.screen.in .h .ln > span {
  transform: none;
  transition: transform 1s var(--ease) calc(var(--i) * 90ms + 150ms);
}
.screen.out .h .ln > span {
  transform: translateY(-110%);
  transition: transform .5s var(--ease-io) calc(var(--i) * 40ms);
}
.h-xl { font-size: 196px; }

.eyebrow {
  font-family: var(--fh); font-stretch: 78%; font-weight: 700;
  font-size: 70px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 18px;
}
.sub {
  font-family: var(--fh); font-stretch: 78%; font-weight: 700;
  font-size: 62px; line-height: 1.08; text-transform: uppercase; margin-top: 48px;
}
.sub p + p { margin-top: 18px; }
.body { font-size: 38px; line-height: 1.45; color: #e7e7e7; max-width: 900px; margin-top: 44px; }
.body + .body { margin-top: 30px; }
.theme-yellow .body { color: #222; }
.body strong { color: var(--y); font-weight: 700; }
.lines { margin-top: 40px; }
.lines p { font-size: 40px; line-height: 1.32; font-weight: 500; }
.lines p + p { margin-top: 18px; }
.theme-dark .lines p { color: #e7e7e7; font-size: 36px; }
.cta {
  color: var(--y); font-weight: 800; font-size: 36px; letter-spacing: .07em;
  text-transform: uppercase; margin-top: 58px;
}
.earned { color: var(--y); font-weight: 700; font-size: 44px; margin-top: 50px; }
.legal { font-size: 24px; color: #9a9a9a; margin-top: 22px; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; margin-top: 74px; min-width: 520px; padding: 32px 76px;
  border-radius: 999px; background: var(--y); color: var(--ink);
  font-weight: 800; font-size: 44px; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 18px 50px -16px rgba(255, 199, 44, .6), inset 0 -5px 0 rgba(0, 0, 0, .12);
}
.btn.dark { background: #1b1b1b; color: #fff; box-shadow: 0 18px 50px -14px rgba(0, 0, 0, .55), inset 0 -5px 0 rgba(0, 0, 0, .4); }
.btn-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.btn-l { position: relative; }
.btn .rip { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); animation: rip .65s ease-out forwards; }
.btn.dark .rip { background: rgba(255, 199, 44, .45); }
@keyframes rip { to { transform: scale(1); opacity: 0; } }
.btn:active .btn-l { opacity: .85; }
.btn.pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  animation: pulse 2.2s var(--ease) infinite 1.6s;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .45); }
  100% { box-shadow: 0 0 0 46px rgba(17, 17, 17, 0); }
}

/* ---------- HUD (logo + progression) ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; padding-top: 88px;
}
#logo { width: 330px; color: #fff; pointer-events: auto; transition: color .7s ease .25s; }
#stage[data-theme="yellow"] #logo { color: #111; }
.logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
#progress { display: flex; gap: 18px; margin-top: 38px; opacity: 0; transform: translateY(-10px); transition: opacity .5s, transform .5s var(--ease); }
#progress.show { opacity: 1; transform: none; }
.pip { width: 96px; height: 14px; border-radius: 8px; border: 3px solid rgba(255, 255, 255, .28); transition: background .5s, border-color .5s, transform .5s var(--ease); }
.pip.cur { border-color: var(--y); animation: pipPulse 1.6s ease-in-out infinite; }
.pip.ok { background: var(--y); border-color: var(--y); }
.pip.ko { background: rgba(255, 255, 255, .28); border-color: transparent; }
.pip.pop { animation: pipPop .7s var(--ease) .5s both; }
@keyframes pipPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 199, 44, .2); } }
@keyframes pipPop { 0% { transform: scale(1); } 40% { transform: scale(1.35, 1.6); } 100% { transform: scale(1); } }

/* ---------- Routes ---------- */
.roads { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.road path { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.road .r-out { stroke: var(--y); stroke-width: 17; }
.road .r-in { stroke: #060606; stroke-width: 8; }
.road .r-glow { stroke: #fff6d2; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .035 .965; stroke-dashoffset: .035; opacity: 0; filter: drop-shadow(0 0 6px var(--y)) drop-shadow(0 0 16px var(--y)); }
.theme-yellow .road .r-out { stroke: #111; }
.theme-yellow .road .r-in { stroke: var(--y); }
.screen.in .road .r-out, .screen.in .road .r-in { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) cubic-bezier(.55, 0, .25, 1) var(--d); }
.screen.in .road .r-glow { opacity: 1; transition: opacity .4s calc(var(--d) + var(--dur) - 200ms); animation: run var(--run) linear calc(var(--d) + var(--dur) - 300ms) infinite; }
@keyframes run { from { stroke-dashoffset: .035; } to { stroke-dashoffset: -.965; } }
/* route épaisse (écran de confirmation) */
.road.thick .r-a { stroke: #111; stroke-width: 96; }
.road.thick .r-b { stroke: var(--y); stroke-width: 22; }
.road.thick .r-c { stroke: #111; stroke-width: 8; }
.screen.in .road.thick path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) cubic-bezier(.55, 0, .25, 1) var(--d); }
.screen.in .road.thick .r-b, .screen.in .road.thick .r-c { transition-delay: calc(var(--d) + 180ms); }
.screen.out .roads { opacity: 0; transition: opacity .5s; }

/* ---------- Accueil ---------- */
.tire-wrap {
  position: absolute; z-index: 2; left: 50%; bottom: -720px; width: 1340px; height: 1340px;
  transform: translate(-50%, 380px);
  filter: drop-shadow(0 -30px 60px rgba(0, 0, 0, .35));
}
.tire { width: 100%; height: 100%; display: block; }
.screen.in .tire-wrap { transform: translate(-50%, 0); transition: transform 1.6s var(--ease) .2s; }
.screen.out .tire-wrap { transform: translate(40%, 0); transition: transform 1s cubic-bezier(.5, 0, .9, .4); }

/* ---------- Manches ---------- */
.cards { display: flex; gap: 48px; margin-top: 48px; }
.card { width: 440px; display: block; }
.card-in {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  height: 400px; padding: 30px 26px;
  border: 4px solid var(--y); border-radius: 40px;
  background: linear-gradient(180deg, #1c1c1c, #0c0c0c);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
  transition: transform .6s var(--ease), box-shadow .6s, opacity .6s, filter .6s, background .6s;
}
.card:active .card-in { transform: scale(.96); }
.card-img { display: grid; place-items: center; width: 100%; height: 230px; }
.screen.in .card-img { animation: bob 4.2s ease-in-out infinite; }
.card:nth-child(2) .card-img { animation-delay: -2.1s; }
.card-img img, .card-img svg { max-width: 100%; max-height: 100%; display: block; }
.card-label { font-size: 36px; font-weight: 600; color: #fff; }
.card .wheel { transition: transform 1.2s var(--ease); }
.card.picked .card-in {
  transform: scale(1.07);
  background: linear-gradient(180deg, #2c2410, #110e04);
  box-shadow: 0 0 0 12px rgba(255, 199, 44, .22), 0 40px 90px -20px rgba(255, 199, 44, .55);
}
.card.picked .wheel { transform: rotate(540deg); }
.card.picked .card-img img { animation: drive 1s var(--ease) both; }
.card.dimmed .card-in { opacity: .22; transform: scale(.9); filter: grayscale(1) blur(1px); }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes drive { 30% { transform: translateX(-12px); } 100% { transform: translateX(0); } }

/* ---------- Révélations ---------- */
.reveal-head { display: flex; align-items: center; gap: 26px; margin-top: 20px; }
.reveal-head .h { text-align: left; }
.h-reveal { font-size: 172px; }
.check { width: 300px; height: 264px; flex: none; overflow: visible; }
.check path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.screen.in .check .ck-v { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io) .2s; }
.screen.in .check .ck-m { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.6, 0, .3, 1) .9s; }
.screen.in .check { animation: thump .6s var(--ease) 1.35s; }
@keyframes thump { 40% { transform: scale(1.12) rotate(-3deg); } }
.screen.in .h-no { animation: shake .7s ease 1s; }
@keyframes shake {
  15%, 55% { transform: translateX(-16px); }
  35%, 75% { transform: translateX(14px); }
  90% { transform: translateX(-4px); }
}
.takeaway { margin-top: 64px; }
.takeaway .sub { margin-top: 0; color: #fff; font-size: 60px; }
.tk { color: var(--y); font-weight: 800; font-size: 42px; line-height: 1.35; margin-top: 22px; }

/* ---------- Résultats ---------- */
.score { font-size: 78px; margin-top: 40px; }
.count { display: inline-block; color: var(--y); min-width: .6em; }
.count.bump { animation: thump .5s var(--ease); }

/* ---------- Formulaire + clavier ---------- */
.s-entry { --top: 300px; }
.h-entry { font-size: 160px; }
.s-entry .body { margin-top: 30px; font-size: 34px; }
.s-entry .btn { margin-top: 44px; }
.vk-form { width: 880px; display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.vk-field {
  position: relative; height: 116px; border-radius: 22px; background: #fff; color: #111;
  display: flex; align-items: flex-end; padding: 0 96px 12px 36px; text-align: left;
  border: 4px solid transparent; cursor: text;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.vk-field.active { border-color: var(--y); box-shadow: 0 0 0 9px rgba(255, 199, 44, .28); }
.vk-label {
  position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
  font-size: 36px; color: #8b8b8b; transition: all .3s var(--ease); pointer-events: none;
}
.vk-field.active .vk-label, .vk-field.filled .vk-label, .vk-field.err .vk-label { top: 14px; transform: none; font-size: 22px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #777; }
.vk-text { display: flex; align-items: center; flex: 1; min-width: 0; height: 48px; overflow: hidden; white-space: pre; font-size: 40px; font-weight: 500; }
.vk-val { flex: none; }
.vk-caret { flex: none; width: 4px; height: 44px; margin-left: 3px; background: #111; border-radius: 2px; opacity: 0; }
.vk-field.active .vk-caret { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.vk-field.typed .vk-val { animation: typed .18s ease; }
@keyframes typed { 50% { opacity: .75; } }
.vk-x {
  position: absolute; right: 22px; top: 50%; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%;
  background: #e8e8e8; color: #666; font-size: 40px; line-height: 1; opacity: 0; transform: scale(.6); transition: .25s var(--ease); pointer-events: none;
}
.vk-field.filled .vk-x { opacity: 1; transform: none; pointer-events: auto; }
.vk-msg { position: absolute; right: 100px; top: 20px; font-size: 22px; font-weight: 600; color: #e0362b; opacity: 0; transition: opacity .25s; }
.vk-field.err { border-color: #e0362b; box-shadow: 0 0 0 9px rgba(224, 54, 43, .22); }
.vk-field.err .vk-msg { opacity: 1; }
.vk-field.bump { animation: shake .45s ease; }

.vk {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 22px 22px 34px;
  background: linear-gradient(180deg, #1a1a1a, #0b0b0b);
  border-top: 3px solid var(--y);
  box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .8);
  transform: translateY(105%);
}
.screen.in .vk { transform: none; transition: transform .9s var(--ease) .55s; }
.screen.out .vk { transform: translateY(105%); transition: transform .45s var(--ease-io); }
.vk-row { display: flex; gap: 12px; }
.vk-row + .vk-row { margin-top: 13px; }
.vk-sp { display: block; }
.vk-key {
  position: relative; flex: 1; height: 108px; min-width: 0;
  border-radius: 18px; background: #2e2e2e; color: #fff;
  font-size: 46px; font-weight: 600; line-height: 1;
  display: grid; place-items: center;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .35), 0 2px 0 rgba(255, 255, 255, .04);
  transition: background .15s, color .15s, transform .08s;
}
.vk.shifted .vk-key.ch { text-transform: uppercase; }
.vk-key.fn { background: #444; font-size: 32px; font-weight: 700; letter-spacing: .05em; }
.vk-key.space { font-size: 28px; color: #bbb; font-weight: 600; text-transform: uppercase; }
.vk-key.go { background: var(--y); color: var(--ink); font-weight: 800; }
.vk-key.on { background: #fff; color: #111; }
.vk-key.on.caps { box-shadow: inset 0 -5px 0 var(--y); }
.vk-key.down { background: var(--y); color: #111; transform: translateY(3px); box-shadow: none; }
.vk-key.go.down { background: #fff; }
.vk-key.ch.down::before {
  content: attr(data-c); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  min-width: 120px; padding: 18px 26px; border-radius: 20px;
  background: var(--y); color: #111; font-size: 70px; font-weight: 800;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55); z-index: 2;
}
.vk[data-type="tel"] .vk-key.ch.down::before { display: none; }
.vk-num { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 13px 12px; max-width: 900px; margin: 0 auto; }
.vk-num .vk-key { height: 108px; font-size: 54px; }
.vk-num .vk-key.fn { font-size: 32px; }
.vk-num .tall { grid-row: span 2; height: auto; }

/* ---------- Inactivité ---------- */
#idle {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center;
  background: rgba(0, 0, 0, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
#idle.show { opacity: 1; pointer-events: auto; }
.idle-box { text-align: center; transform: scale(.9); transition: transform .5s var(--ease); }
#idle.show .idle-box { transform: none; }
.idle-ring { position: relative; width: 260px; height: 260px; margin: 0 auto 50px; }
.idle-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.idle-ring circle { fill: none; stroke: var(--y); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 1; }
#idle.show .idle-ring circle { animation: ring var(--cd, 10s) linear forwards; }
@keyframes ring { to { stroke-dashoffset: 1; } }
.idle-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fh); font-weight: 900; font-size: 120px; color: var(--y); }
#idle h2 { font-family: var(--fh); font-weight: 900; font-size: 120px; color: var(--y); line-height: .9; }
#idle p { font-size: 40px; margin-top: 30px; color: #ddd; }

/* ---------- Admin ---------- */
#admin { position: absolute; inset: 0; z-index: 10; display: none; place-items: center; background: rgba(0, 0, 0, .85); }
#admin.show { display: grid; }
.adm { width: 820px; background: #1a1a1a; border: 2px solid #333; border-radius: 28px; padding: 50px; font-size: 30px; }
.adm h3 { font-family: var(--fh); font-weight: 900; font-size: 64px; color: var(--y); margin-bottom: 30px; }
.adm dl { display: grid; grid-template-columns: 1fr auto; gap: 16px 30px; margin-bottom: 40px; }
.adm dt { color: #aaa; }
.adm dd { font-weight: 700; text-align: right; }
.adm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-btns button { padding: 26px; border-radius: 16px; background: #2c2c2c; font-weight: 700; font-size: 28px; }
.adm-btns .danger { background: #4a1714; color: #ffb3ad; }
.adm-btns .primary { background: var(--y); color: #111; grid-column: span 2; }

/* ==========================================================================
   Paysage 1920×1080 : titre à gauche, contenu à droite
   ========================================================================== */
[data-orient="landscape"] {
  --top: 210px;
  --side: 140px;
}
[data-orient="landscape"] #hud { padding-top: 56px; }
[data-orient="landscape"] #logo { width: 280px; }
[data-orient="landscape"] #progress { margin-top: 26px; }
[data-orient="landscape"] .content {
  bottom: 90px; flex-direction: row; align-items: center; justify-content: center; gap: 110px; text-align: left;
}
[data-orient="landscape"] .col-t { align-items: flex-start; flex: 0 1 auto; max-width: 820px; }
[data-orient="landscape"] .col-b { align-items: flex-start; flex: 0 1 auto; max-width: 860px; }
[data-orient="landscape"] .col-b > :first-child { margin-top: 0; }
[data-orient="landscape"] .h { font-size: 150px; }
[data-orient="landscape"] .h-xl { font-size: 180px; }
[data-orient="landscape"] .h-reveal { font-size: 128px; }
[data-orient="landscape"] .check { width: 220px; height: 194px; }
[data-orient="landscape"] .reveal-head { margin-top: 0; }
[data-orient="landscape"] .body { font-size: 34px; margin-top: 30px; }
[data-orient="landscape"] .sub { font-size: 54px; margin-top: 34px; }
[data-orient="landscape"] .cta { margin-top: 40px; }
[data-orient="landscape"] .btn { margin-top: 50px; min-width: 460px; padding: 26px 64px; font-size: 40px; }
[data-orient="landscape"] .takeaway { margin-top: 40px; }
[data-orient="landscape"] .takeaway .sub { font-size: 50px; }
[data-orient="landscape"] .tk { font-size: 36px; }
[data-orient="landscape"] .cards { margin-top: 0; gap: 40px; }
[data-orient="landscape"] .card { width: 400px; }
[data-orient="landscape"] .card-in { height: 380px; }
[data-orient="landscape"] .s-attract .content { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-left: 40px; top: 150px; }
[data-orient="landscape"] .s-attract .sub { margin-top: 30px; font-size: 50px; }
[data-orient="landscape"] .s-attract .lines { margin-top: 22px; }
[data-orient="landscape"] .s-attract .lines p { font-size: 32px; }
[data-orient="landscape"] .s-attract .lines p + p { margin-top: 8px; }
[data-orient="landscape"] .s-attract .btn { margin-top: 40px; }
[data-orient="landscape"] .s-attract .h-xl { font-size: 170px; }
[data-orient="landscape"] .tire-wrap { left: auto; right: -330px; bottom: -380px; width: 1180px; height: 1180px; transform: translate(0, 380px); }
[data-orient="landscape"] .screen.in .tire-wrap { transform: none; }
[data-orient="landscape"] .screen.out .tire-wrap { transform: translate(60%, 0); }
[data-orient="landscape"] .s-entry { --top: 165px; }
[data-orient="landscape"] .s-entry .content { bottom: 420px; align-items: flex-start; gap: 90px; }
[data-orient="landscape"] .h-entry { font-size: 130px; }
[data-orient="landscape"] .vk-form { width: 760px; margin-top: 0; gap: 14px; }
[data-orient="landscape"] .vk-field { height: 96px; padding-bottom: 8px; }
[data-orient="landscape"] .vk-field.active .vk-label, [data-orient="landscape"] .vk-field.filled .vk-label, [data-orient="landscape"] .vk-field.err .vk-label { top: 8px; }
[data-orient="landscape"] .vk-text { font-size: 36px; height: 44px; }
[data-orient="landscape"] .s-entry .btn { margin-top: 22px; padding: 22px 64px; }
[data-orient="landscape"] .vk { padding: 18px 260px 24px; }
[data-orient="landscape"] .vk-key { height: 80px; }
[data-orient="landscape"] .vk-num .vk-key { height: 80px; }
[data-orient="landscape"] .s-confirm .content { gap: 80px; }

/* Ajustements spécifiques */
#stage[data-theme="yellow"] { --logo-v: #fff; }
.s-confirm .h { font-size: 168px; white-space: nowrap; }

/* Accueil : le bouton ne doit jamais toucher le pneu */
.s-attract { --top: 300px; }
.s-attract .lines { margin-top: 30px; }
.s-attract .lines p + p { margin-top: 10px; }
.s-attract .btn { margin-top: 56px; }
.s-attract .tire-wrap { bottom: -860px; }
[data-orient="landscape"] .s-attract .tire-wrap { bottom: -380px; }

/* Choix de la borne */
.kiosk-list { display: flex; flex-direction: column; gap: 28px; margin-top: 70px; }
.kiosk-btn { margin-top: 0; min-width: 640px; }
.kiosk-btn small { display: block; font-size: 24px; font-weight: 600; letter-spacing: .08em; opacity: .55; margin-top: 4px; text-transform: none; }
[data-orient="landscape"] .kiosk-list { margin-top: 0; }