:root {
  --fv-green: #0fa451;
  --fv-green-dark: #0b6b37;
  --fv-panel: #0c3d24;
  --fv-panel-2: #0e4a2b;
  --fv-orange: #f2a93b;
  --fv-orange-dark: #d98f22;
  --fv-wheel-dark: #13592c;
  --fv-wheel-light: #5fc65a;
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,0.72);
  --error: #e0432c;
  --radius: 14px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #05070d;
  color: var(--ink);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--fv-green); }

/* The hero is a single-screen composition, like the Figma "Desktop FV first"
   frame: the astronaut/wheel/moon artwork fills it, the header sits centred at
   the top, and a two-column row holds the prize teasing (left) and the form
   (right). Keeping the hero at ~one viewport tall (legal text lives in its own
   section below) means `cover` fills it without the extreme zoom-crop that used
   to push the wheel under the form panel. */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #05070d;
}

/* Full-bleed cover of the combined artwork (astronaut + wheel + prize card +
   glasses, already composited). Anchored to the left so the scene sits on the
   left side, clear of the form panel; the empty moon/sky on the image's right
   is what gets cropped. */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(5,7,13,0.10) 0%, rgba(5,7,13,0.20) 45%, rgba(5,7,13,0.45) 100%),
    url("assets/newCOmbined.png");
  background-size: cover, cover;
  background-position: center, 40% bottom;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: 1512px;
  margin: 0 auto;
  padding: 28px 48px 40px;
  display: flex;
  flex-direction: column;
}

.hero-header {
  text-align: center;
  margin-bottom: 18px;
}

.logo {
  display: inline-block;
  width: 160px;
  height: auto;
  margin-bottom: 10px;
}

.hero-header h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 1px;
}
.hero-header h1 .amp { color: var(--fv-green); }

.dates {
  margin: 6px 0 0;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

.badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.badge {
  background: rgba(255,255,255,0.94);
  color: #14181f;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
}
.badge-alt {
  background: var(--fv-green);
  color: #fff;
}

/* Prize sub-line under the badges (Figma): "ou une carte carburant de 125 €". */
.badges-sub {
  margin: 12px 0 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Column split matches the Figma "Desktop FV first" frame: the panel's left
   edge sits at ~57% of the frame width. The stage flexes to fill the hero
   below the header, so the prize teasing (left) and form (right) both begin
   near the top of that row, as in the mockup. */
.stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 56% 44%;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

.scene {
  position: relative;
}

.wheel-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,4,8,0.88);
  backdrop-filter: blur(3px);
}
.wheel-overlay[hidden] { display: none; }

.wheel-zone {
  position: relative;
  width: 260px;
  height: 260px;
  transition: width 0.4s ease, height 0.4s ease;
}
.wheel-zone.enlarged {
  width: 380px;
  height: 380px;
}
@media (max-width: 480px) {
  .wheel-zone.enlarged { width: 88vw; height: 88vw; }
}

.wheel-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid #f4c453;
  z-index: 3;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.4));
}

.wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.light-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #f4c453;
  box-shadow: 0 0 4px 1px rgba(244,196,83,0.8);
}

.wheel {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    conic-gradient(from -30deg,
      var(--fv-wheel-dark) 0deg 60deg,
      var(--fv-wheel-light) 60deg 120deg,
      var(--fv-wheel-dark) 120deg 180deg,
      var(--fv-wheel-light) 180deg 240deg,
      var(--fv-wheel-dark) 240deg 300deg,
      var(--fv-wheel-light) 300deg 360deg
    );
  box-shadow: 0 4px 18px rgba(0,0,0,0.5) inset;
  will-change: transform;
}

.wheel-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  z-index: 4;
  background: #fff;
  border: 4px solid var(--fv-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  color: var(--fv-green);
  font-size: 0.75rem;
  z-index: 2;
  padding: 8%;
}
.wheel-center img {
  width: 100%;
  height: auto;
}

.wheel-label {
  position: absolute;
  width: 34%;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.wheel-label .icon { display: block; font-size: 1rem; margin-bottom: 2px; }
/* PERDU segments are bright green, so their labels/icons are dark for contrast. */
.wheel-label.perdu { color: var(--fv-wheel-dark); text-shadow: none; }

/* ---------- Form panel ---------- */

.panel {
  background: var(--fv-panel);
  border-radius: 18px;
  padding: 26px 28px 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.panel-intro {
  margin: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.civility {
  display: flex;
  gap: 22px;
  margin-bottom: 14px;
}
.chk-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.chk-radio input { width: 16px; height: 16px; accent-color: var(--fv-green); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.input-wrap {
  position: relative;
}

.input-wrap input {
  width: 100%;
  padding: 10px 34px 10px 12px;
  border-radius: 8px;
  border: none;
  font-size: 0.85rem;
  background: #fff;
  color: #14181f;
}
.input-wrap input:focus {
  outline: 2px solid var(--fv-green);
}

.input-wrap .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  display: none;
}
.input-wrap .ok { color: var(--fv-green); }
.input-wrap .err { color: var(--error); }

.field.valid .input-wrap .ok { display: inline; }
.field.invalid .input-wrap .err { display: inline; }
.field.invalid .input-wrap input { box-shadow: 0 0 0 2px var(--error) inset; }

.error-msg {
  display: none;
  color: #ffb4a8;
  font-size: 0.72rem;
  margin: 4px 0 0;
}
.field.invalid .error-msg { display: block; }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-dim);
  margin: 14px 0 2px;
  cursor: pointer;
}
.consent input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--fv-green); flex-shrink: 0; }

.consent-note {
  margin: 6px 0 0 25px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--ink-dim);
}
.consent-note a { color: var(--fv-green); }

.prefs-toggle {
  display: block;
  width: 100%;
  margin: 14px 0;
  padding: 10px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-transform: uppercase;
}
.prefs-toggle:hover { background: rgba(255,255,255,0.14); }

.prefs-panel {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Respect the `hidden` attribute the toggle sets — otherwise display:flex
   keeps the preferences permanently expanded, inflating the panel. */
.prefs-panel[hidden] { display: none; }
.chk-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.72rem;
  color: var(--ink-dim);
  cursor: pointer;
}
.chk-line input { margin-top: 2px; accent-color: var(--fv-green); }

.submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--fv-green);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.submit-btn:hover { background: var(--fv-green-dark); }
.submit-btn:active { transform: scale(0.98); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.form-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(224, 67, 44, 0.15);
  border: 1px solid var(--error);
  color: #ffb4a8;
  font-size: 0.8rem;
  line-height: 1.4;
}
.form-notice[hidden] { display: none; }

/* Test-mode outcome selector (only shown when the server reports test mode). */
.test-panel {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: rgba(10, 14, 21, 0.92);
  border: 1px solid var(--fv-green);
  border-radius: 10px;
  font-size: 0.72rem;
  color: #fff;
}
.test-panel[hidden] { display: none; }
.test-panel-title { font-weight: 800; color: var(--fv-green); margin-bottom: 2px; }
.test-panel label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.test-panel input { accent-color: var(--fv-green); }

/* ---------- Footer / legal ---------- */

.legal {
  background: #99959b; /* Figma: grey footer band */
  padding: 20px 48px 32px;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #000; /* Figma: black text on the grey band */
  position: relative;
}
.legal > * {
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}
.legal a { color: #000; text-decoration: underline; }
.rules-link { text-align: right; margin-top: 8px; }
.rules-link a { color: #000; }

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,4,8,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }

/* Wraps the result card so the desktop cat can sit against the card's right
   edge without being clipped by the card's overflow:hidden. */
.modal-shell {
  position: relative;
  width: min(460px, 100%);
}
.modal-shell .modal-card { width: 100%; z-index: 1; }

.modal-card {
  position: relative;
  width: min(460px, 100%);
  background: #fff;
  color: #14181f;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  text-align: left;
}

/* Desktop only (Figma): astronaut cat on the RIGHT of the modal — head above
   the card top, body tucked behind the card's right edge (Figma node 135x460,
   overhanging ~16px above/below the card). Mobile uses #modalCat on the left. */
.modal-cat-desktop {
  display: block;
  position: absolute;
  left: 100%;
  top: -16px;
  height: calc(100% + 32px);
  width: auto;
  margin-left: -14px;
  pointer-events: none;
}
.modal-cat-desktop[hidden] { display: none; }
.modal-card h3 {
  margin: 0;
  padding: 20px 46px 16px 22px;
  font-size: 1.05rem;
  color: #fff;
}
/* Desktop (Figma): win title text is bright green on the dark-green header;
   lose title is black on the mint header. On mobile the win title is white
   (overridden in the max-width:880px block below). */
.modal-card.win h3 { background: #163029; color: #00ff91; }
.modal-card.lose h3 { background: #00ff91; color: #000; }
.modal-card.info h3 { background: #14181f; }

.modal-card > p {
  margin: 0;
  padding: 18px 22px 22px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.modal-prize {
  display: block;
  margin: 4px auto 10px;
  width: 62%;
  max-width: 240px;
  height: auto;
}
.modal-prize[hidden] { display: none; }

/* Astronaut cat peeking beside the win/lose modal — mobile only (Figma). */
.modal-cat { display: none; }

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

.modal-btn {
  display: block;
  margin: 0 auto 22px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: #14181f;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.modal-btn:hover { background: #000; }

/* ---------- Cookie / tracker consent banner ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: #0b0e15;
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner p {
  margin: 0;
  flex: 1 1 420px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.cookie-banner a { color: var(--fv-green); }

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  cursor: pointer;
  background: var(--fv-green);
  color: #fff;
}
.cookie-btn:hover { background: var(--fv-green-dark); }
.cookie-btn.ghost {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid rgba(255,255,255,0.3);
}
.cookie-btn.ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  /* Mobile (Figma "FV mobile"): single stacked column — header, centered
     badges, then the form panel full width, then the legal footer. */
  .hero { min-height: auto; }
  .hero-inner { min-height: auto; padding: 24px 20px 32px; }
  .stage { grid-template-columns: 1fr; margin-top: 16px; gap: 16px; }
  .scene { min-height: 0; }
  .badges { align-items: center; }
  .badges-sub { text-align: center; }
  /* Mobile (Figma): win title is white on the dark-green header (desktop uses green). */
  .modal-card.win h3 { color: #fff; }
  .hero-header h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .field-row { grid-template-columns: 1fr; }
  .legal { padding: 20px; }
  /* Dev-only test selector: move to the bottom so it doesn't cover the header. */
  .test-panel { top: auto; bottom: 12px; }

  /* Win/lose astronaut cat, mobile only. Figma mobile (390x844): the cat sits
     high on the upper-left — head near the top, body grazing the modal's top
     edge — in front of the card (not anchored to the screen bottom).
     Figma node: top 73px (~8.6vh), height 310px (~37vh), left -19px (~-5vw). */
  .modal-cat {
    display: block;
    position: fixed;
    left: -5vw;
    top: 8.5vh;
    height: 37vh;
    width: auto;
    z-index: 70;
    pointer-events: none;
  }
  .modal-cat[hidden] { display: none; }
  /* Desktop right-side cat is hidden on mobile (mobile uses the left cat above). */
  .modal-cat-desktop { display: none; }
}

@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-actions { justify-content: flex-end; }
}