@font-face { font-family: 'Inter'; font-weight: 400 800; font-display: swap; src: url(fonts/inter.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 800; font-display: swap; src: url(fonts/jetbrains-mono.woff2) format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-weight: 400; font-display: swap; src: url(fonts/dm-serif-display.woff2) format('woff2'); }
:root {
  --ink: #1A1410; --gold: #E8B547; --gold-hi: #F2CB58; --gold-deep: #B88A1F;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --wall:
    radial-gradient(55% 45% at 80% 6%, rgba(255,247,226,.95), rgba(255,247,226,0) 70%),
    radial-gradient(70% 60% at 50% 118%, rgba(255,226,170,.9), rgba(255,226,170,0) 70%),
    conic-gradient(from 200deg at 16% 118%, #F7DCA8 0deg, #F2BA66 26deg, #E6915A 50deg, #C9686A 74deg, #8F5E8F 98deg, #6577BE 124deg, #F0C47A 170deg, #F7DCA8 360deg);
  color-scheme: light;
}
html, body, .stage { height: 100%; margin: 0; }
body { overflow: hidden; font-family: var(--sans); }
.stage { position: relative; }
/* La forme vient du cadre de la landing ; la caméra s'y ajuste. */
.screen { position: relative; container-type: inline-size; height: 100%; overflow: hidden; isolation: isolate; }
.desk { position: absolute; inset: 0; transform-origin: 0 0; transition: opacity .5s ease; }
.wall { position: absolute; inset: 0; background: var(--wall); }
.wall::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 200deg at 16% 118%, rgba(255,255,255,.10) 0deg 2.5deg, rgba(255,255,255,0) 2.5deg 8deg); mix-blend-mode: soft-light; }
.menubar { position: absolute; inset: 0 0 auto; height: 2.6cqw; display: flex; align-items: center; gap: 1.2cqw; padding-inline: 1.6cqw; background: rgba(255,250,240,.28); backdrop-filter: blur(10px); color: rgba(40,26,14,.8); font-size: 1.05cqw; font-weight: 600; }
.menubar svg { height: 1.4cqw; width: auto; display: block; }
.menubar .sp { flex: 1; }
.win { position: absolute; left: 10cqw; top: 3.6cqw; width: 80cqw; border-radius: 1.1cqw; overflow: hidden; background: #EFE8DC; box-shadow: 0 0 0 1px rgba(26,20,16,.10), 0 2.4cqw 6cqw rgba(60,30,10,.35), 0 .5cqw 1.4cqw rgba(60,30,10,.18); }
.win-bar { position: relative; height: 2.3cqw; display: flex; align-items: center; gap: .55cqw; padding-inline: 1cqw; }
.win-bar i { width: .85cqw; height: .85cqw; border-radius: 50%; }
.win-bar i:nth-child(1) { background: #FF5F57; } .win-bar i:nth-child(2) { background: #FEBC2E; } .win-bar i:nth-child(3) { background: #28C840; }
.win-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .95cqw; font-weight: 600; color: rgba(26,20,16,.55); pointer-events: none; }
.win-body { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: hidden; background: #FBF7F0; }
#app { all: initial; position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; pointer-events: none; }
.dock { position: absolute; left: 50%; bottom: 1.4cqw; transform: translateX(-50%); display: flex; align-items: flex-end; gap: .8cqw; padding: .6cqw .8cqw; border-radius: 1.6cqw; background: rgba(255,250,240,.32); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 .6cqw 2cqw rgba(60,30,10,.18); }
.dock i { position: relative; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 .2cqw .5cqw rgba(60,30,10,.18); }
.dock i:nth-child(1) { background: linear-gradient(160deg, #FDFBF6, #E7DFD1); }
.dock i:nth-child(2) { background: linear-gradient(160deg, #A9C2F0, #5F7FD0); }
.dock i:nth-child(3) { background: linear-gradient(160deg, #FBE3B0, #E9A84F); }
.dock i:nth-child(4) { background: linear-gradient(160deg, #B9E3C9, #4FA77A); }
.dock i:nth-child(5) { background: linear-gradient(160deg, #1F1812, #3A2D22); }
.dock i:nth-child(5)::after { content: ""; position: absolute; bottom: -.55cqw; width: .32cqw; height: .32cqw; border-radius: 50%; background: rgba(40,26,14,.7); }
.dock i:nth-child(6) { background: linear-gradient(160deg, #F4EFE6, #D9D0C2); }
.dock svg { width: 70%; height: 70%; }
.spot { position: absolute; z-index: 25; border-radius: 1.3cqw; pointer-events: none; opacity: 0; box-shadow: 0 0 0 200cqw rgba(26,20,16,.42), 0 0 0 .25cqw rgba(232,181,71,.9), 0 0 2.4cqw .6cqw rgba(232,181,71,.55); transition: opacity .45s ease; }
.spot.on { opacity: 1; }
.cursor { position: absolute; left: 50%; top: 80%; width: 1.7cqw; z-index: 30; opacity: 0; transform: translate(-21%, -10%); transition-property: left, top, opacity; transition-timing-function: cubic-bezier(.45,0,.25,1); pointer-events: none; filter: drop-shadow(0 .15cqw .3cqw rgba(0,0,0,.35)); }
.cursor svg { display: block; width: 100%; transition: transform .12s ease; transform-origin: 20% 10%; }
.cursor.down svg { transform: scale(.82); }
.cursor .xh, .cursor.cross svg:first-child { display: none; }
.cursor.cross .xh { display: block; }
.cursor.cross { transform: translate(-50%, -50%); }
.ripple { position: absolute; z-index: 29; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw 0 0 -1.3cqw; border-radius: 50%; border: .18cqw solid rgba(232,181,71,.95); pointer-events: none; animation: rip .5s ease-out forwards; }
@keyframes rip { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.ctl { position: absolute; inset: 0; z-index: 40; pointer-events: none; color: #fff; }
.big { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: linear-gradient(180deg, #F4CF5C, var(--gold) 50%, var(--gold-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 30px rgba(26,20,16,.35); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease; }
.big svg { width: 28px; height: 28px; margin-left: 4px; }
.held .big { opacity: 1; transform: none; pointer-events: auto; }
.bar { position: absolute; inset: auto 0 0; padding: 30px 12px 6px; background: linear-gradient(to top, rgba(26,20,16,.66), rgba(26,20,16,0)); pointer-events: auto; transition: opacity .3s ease; }
.idle .bar { opacity: 0; }
.idle { cursor: none; }
.row { display: flex; align-items: center; gap: 2px; }
.row .sp { flex: 1; }
.row button { flex: none; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border: 0; border-radius: 10px; color: #fff; background: transparent; font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.row svg { width: 20px; height: 20px; }
#tc { margin-left: 6px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(255,255,255,.9); }
#seek { --p: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
#seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255,255,255,.32) var(--p)); }
#seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255,255,255,.32) var(--p)); }
#seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.35); transform: scale(0); transition: transform .15s ease; }
#seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.35); transform: scale(0); transition: transform .15s ease; }
#seek:focus-visible::-webkit-slider-thumb { transform: none; }
#seek:focus-visible::-moz-range-thumb { transform: none; }
/* Au doigt, :hover colle après le tap. */
@media (hover: hover) and (pointer: fine) {
  .row button:hover { background: rgba(255,255,255,.14); }
  .bar:hover #seek::-webkit-slider-thumb { transform: none; }
  .bar:hover #seek::-moz-range-thumb { transform: none; }
}
@media (hover: none) { #seek::-webkit-slider-thumb { transform: none; } #seek::-moz-range-thumb { transform: none; } }
.ctl button:focus-visible, #seek:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.compact .big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.compact .big svg { width: 22px; height: 22px; }
.compact .bar { padding: 16px 6px 2px; }
html.pfs, html.pfs body { overflow: hidden; }
.stage.fs { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #120D0A; }
.stage.fs .screen { height: auto; aspect-ratio: 16 / 10; }
.stage.fs .screen.compact { aspect-ratio: 800 / 523; }
.stage.fs.rot .screen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }