@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #000;
  --fg: #fff;
  --warm: #ffe5b4;
  --dim: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pad: max(24px, env(safe-area-inset-left));
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fond de scène : très léger halo chaud derrière le cube */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 46%, #1c1a17 0%, #0a0a0a 55%, #000 100%);
}

#stage {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1;
  display: block; touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: 0; transition: opacity 0.8s ease;
}
#stage.on { opacity: 1; }
#stage.out { opacity: 0; transition-duration: 0.5s; }

.screen {
  position: fixed; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--pad);
  animation: in 0.9s var(--ease) both;
}
@keyframes in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Écran cube ---------- */
#screen-cube { justify-content: space-between; padding: max(28px, env(safe-area-inset-top)) var(--pad) max(36px, env(safe-area-inset-bottom)); pointer-events: none; }
.eyebrow {
  font-weight: 300; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim);
}
.hint {
  pointer-events: auto; background: none; border: 0; color: var(--fg); font: inherit;
  font-weight: 300; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 14px 18px; cursor: pointer; opacity: 0; transition: opacity 1s ease;
}
.hint.on { opacity: 0.85; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.35; } }

.sound {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right));
  pointer-events: auto; background: none; border: 0; color: var(--dim); font: inherit; font-weight: 300;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; padding: 14px; cursor: pointer; transition: color 0.25s;
}
.sound:hover, .sound:focus-visible { color: var(--fg); outline: none; }

/* ---------- Vidéo ---------- */
#screen-video { background: #000; padding: 0; }
#intro-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.skip {
  position: absolute; right: var(--pad); bottom: max(28px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; color: var(--fg);
  font: inherit; font-weight: 300; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 11px 20px; cursor: pointer; transition: border-color 0.3s, background 0.3s;
}
.skip:hover, .skip:focus-visible { border-color: var(--fg); background: rgba(0, 0, 0, 0.6); }

/* ---------- Questionnaire ---------- */
.eyebrow.top { position: absolute; top: max(26px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; }
#screen-form { background: #000; align-items: stretch; justify-content: center; }
.progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--warm); transition: width 0.7s var(--ease); }

#rsvp { width: min(720px, 100%); margin: 0 auto; position: relative; padding-top: 56px; }
.back {
  position: absolute; top: 0; left: -6px; background: none; border: 0; color: var(--dim);
  font: inherit; font-size: 24px; padding: 8px 10px; cursor: pointer; transition: color 0.2s, opacity 0.2s;
}
.back:hover, .back:focus-visible { color: var(--fg); }
.back[hidden] { display: none; }
.count { font-weight: 300; font-size: 12px; letter-spacing: 0.3em; color: var(--warm); margin-bottom: 22px; }

.q { animation: q-in 0.6s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.q label, .q .label {
  display: block; font-weight: 300; font-size: clamp(30px, 6.4vw, 60px); line-height: 1.1; letter-spacing: -0.01em;
}
.q input[type="text"], .q input[type="email"] {
  display: block; width: 100%; margin-top: 34px; padding: 10px 0 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none;
  color: var(--fg); font: inherit; font-weight: 500; font-size: clamp(22px, 4.6vw, 36px);
  caret-color: var(--warm); transition: border-color 0.3s;
}
.q input:focus { border-bottom-color: var(--warm); }
.q input::placeholder { color: rgba(255, 255, 255, 0.22); font-weight: 300; }

.choices { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.choice {
  flex: 1 1 180px; padding: 22px 26px; background: none; color: var(--fg);
  border: 1px solid var(--line); border-radius: 2px; font: inherit; font-weight: 300;
  font-size: clamp(18px, 3.6vw, 24px); letter-spacing: 0.02em; text-align: left; cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.choice:hover, .choice:focus-visible { border-color: var(--warm); outline: none; }
.choice[aria-pressed="true"] { background: var(--warm); color: #000; border-color: var(--warm); }

.error { min-height: 22px; margin-top: 16px; font-size: 14px; font-weight: 300; color: #ff9b8a; }
.enter-hint { margin-top: 10px; font-size: 12px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (pointer: coarse) { .enter-hint { display: none; } }

.next {
  margin-top: 28px; padding: 18px 34px; background: var(--fg); color: #000; border: 0; border-radius: 2px;
  font: inherit; font-weight: 500; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.next:hover, .next:focus-visible { background: var(--warm); outline: none; }
.next:active { transform: scale(0.98); }
.next[disabled] { opacity: 0.5; cursor: progress; }

/* ---------- Écran final ---------- */
.done { max-width: 640px; text-align: left; width: 100%; }
.done .name { margin-top: 26px; font-weight: 300; font-size: clamp(22px, 4.4vw, 34px); letter-spacing: -0.01em; color: var(--warm); }
.done h1 { font-weight: 300; font-size: clamp(36px, 8vw, 76px); line-height: 1.04; letter-spacing: -0.02em; margin: 14px 0 28px; }
.done .lead { font-weight: 300; font-size: clamp(16px, 2.6vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 34em; }
.done .meta { margin-top: 38px; font-size: 13px; font-weight: 300; letter-spacing: 0.14em; line-height: 1.9; text-transform: uppercase; color: var(--warm); }

/* ---------- Fallback sans WebGL ---------- */
.lockup { font-weight: 300; font-size: clamp(24px, 6vw, 44px); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; line-height: 1.5; }
.lockup b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}