:root {
    --orange: #FF8A1F;
    --orange-40: rgba(255, 138, 31, 0.4);
    --orange-16: rgba(255, 138, 31, 0.16);
    --cream: #F7EFE5;
    --cream-60: rgba(247, 239, 229, 0.6);
    --cream-12: rgba(247, 239, 229, 0.12);
    --live: #FF3B30;
    --neg: #FF6B4A;
    --glass: rgba(8, 16, 36, 0.8);
    --field: #0A1530;
    --sans: "Inter Tight", system-ui, sans-serif;
    --serif: "Instrument Serif", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-height: 100vh;
    font-family: var(--sans);
    color: var(--cream);
    background: #040A1A;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* Fond nuit : dégradé radial + quadrillage crème qui dérive + halo orange */
  .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background: radial-gradient(1300px 760px at 34% 44%, #12306A 0%, #091A3D 52%, #040A1A 100%); }
  .bg::before { content: ""; position: absolute; inset: -240px;
    background-image:
      linear-gradient(rgba(247,239,229,0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(247,239,229,0.055) 1px, transparent 1px);
    background-size: 120px 120px;
    animation: drift 40s linear infinite; }
  .bg::after { content: ""; position: absolute; width: 720px; height: 720px;
    left: 50%; top: 18%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--orange-16), transparent 65%); }
  @keyframes drift { to { transform: translate(120px, 120px); } }

  main { width: 100%; max-width: 600px; margin: 0 auto; padding: 28px 16px 48px; }

  .brand { display: flex; justify-content: center; margin-bottom: 28px; }
  .label { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--cream-60); display: inline-flex; align-items: center; gap: 10px; }
  .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

  /* Badge live */
  .live { display: flex; justify-content: center; margin-bottom: 30px; }
  .live-pill { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 14px;
    border-radius: 999px; background: var(--glass); border: 1px solid var(--orange-40);
    backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; }
  .dot { position: relative; width: 9px; height: 9px; flex: none; }
  .dot::before, .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); }
  .dot::before { animation: blink 1.4s ease-in-out infinite; }
  .dot::after { animation: ring 1.4s ease-out infinite; }
  @keyframes blink { 50% { opacity: 0.35; } }
  @keyframes ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
  .live-tag { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; color: var(--live); }
  .live-pill strong { font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
  .sep { width: 1px; height: 14px; background: var(--cream-12); }

  /* Hero */
  .hero { text-align: center; margin-bottom: 40px; }
  .amount { font-weight: 900; font-size: clamp(72px, 21vw, 128px); line-height: 0.9;
    letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .amount span { font-size: 0.42em; letter-spacing: -0.03em; margin-left: 0.12em; }
  .hero h1 { margin-top: 12px; font-weight: 800; font-size: clamp(28px, 7.4vw, 40px);
    letter-spacing: -0.045em; line-height: 1.05; }
  .hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange);
    font-size: 1.3em; letter-spacing: -0.01em; margin-left: 0.08em; }
  .hero p { margin: 16px auto 0; max-width: 420px; font-size: 16px; line-height: 1.5; color: var(--cream-60); }

  /* Étapes */
  .steps { display: grid; gap: 14px; }
  .step { position: relative; padding: 22px 20px; border-radius: 20px; background: var(--glass);
    border: 1px solid var(--cream-12); }
  .step.active { border-color: var(--orange-40); }
  .step-head { display: flex; align-items: baseline; gap: 14px; }
  .num { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--orange); flex: none; }
  .step h2 { font-weight: 800; font-size: 21px; letter-spacing: -0.035em; line-height: 1.15; }
  .step .desc { margin: 6px 0 0 41px; font-size: 14.5px; line-height: 1.5; color: var(--cream-60); }
  .step-body { margin: 16px 0 0 41px; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer;
    font-family: var(--sans); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; text-decoration: none;
    background: var(--orange); color: #1A0D00; transition: transform .15s ease, box-shadow .15s ease; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px var(--orange); }
  .btn:active { transform: translateY(0); }
  .btn:disabled { opacity: .6; cursor: progress; }
  .btn svg { width: 18px; height: 18px; }

  /* Formulaire */
  form { display: grid; gap: 12px; }
  .field label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px;
    font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-60); }
  .field label button { font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--orange);
    background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  input[type=text], input[type=email] { width: 100%; height: 50px; padding: 0 16px; border-radius: 12px;
    background: var(--field); border: 1px solid var(--cream-12); color: var(--cream);
    font: 500 16px var(--sans); outline: none; transition: border-color .15s; }
  input#uid { font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
  input::placeholder { color: rgba(247,239,229,0.3); }
  input:focus { border-color: var(--orange); }
  input.invalid { border-color: var(--neg); }
  .hint { display: none; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--field);
    font-size: 13.5px; line-height: 1.5; color: var(--cream-60); }
  .hint.open { display: block; }
  .hint b { color: var(--cream); font-weight: 600; }
  .legal { text-align: center; font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: 0.005em;
    color: var(--cream-60); text-wrap: pretty; }
  .legal a { color: var(--cream); text-underline-offset: 3px; }
  .error { min-height: 0; font-size: 13.5px; color: var(--neg); }
  .error:empty { display: none; }


  /* Compte à rebours */
  .countdown { display: flex; gap: 8px; }
  .cd { flex: 1; padding: 12px 6px 10px; border-radius: 12px; background: var(--field); text-align: center; }
  .cd b { display: block; font-weight: 900; font-size: 26px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
  .cd span { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-60); }

  /* Page « vérifie ta boîte mail » */
  .confirm { padding: 36px 24px 30px; border-radius: 24px; background: var(--glass);
    border: 1px solid var(--orange-40); text-align: center; }
  .mail-icon { width: 64px; height: 64px; margin: 0 auto 22px; display: grid; place-items: center;
    border-radius: 18px; background: var(--field); border: 1px solid var(--orange-40); color: var(--orange); }
  .mail-icon svg { width: 30px; height: 30px; }
  .confirm h1 { font-weight: 800; font-size: clamp(30px, 8vw, 40px); letter-spacing: -0.045em; line-height: 1.05; }
  .confirm h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange);
    font-size: 1.3em; letter-spacing: -0.01em; }
  .confirm .lead { margin: 16px auto 0; max-width: 400px; font-size: 16px; line-height: 1.55; color: var(--cream-60); }
  .confirm .lead b { color: var(--cream); font-weight: 600; overflow-wrap: anywhere; }
  .tips { margin-top: 26px; display: grid; gap: 10px; text-align: left; }
  .tip { display: flex; gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: var(--field);
    font-size: 14.5px; line-height: 1.5; color: var(--cream-60); }
  .tip .num { font-size: 12px; }
  .tip b { color: var(--cream); font-weight: 600; }
  .back { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--cream-60); text-underline-offset: 3px; }
  .back:hover { color: var(--cream); }

  footer { margin-top: 36px; text-align: center; font-size: 12px; line-height: 1.6; color: rgba(247,239,229,0.42); }
  footer a { color: inherit; }

  @media (max-width: 420px) {
    .step { padding: 20px 16px; }
    .step .desc, .step-body { margin-left: 0; }
    .live-pill { font-size: 13.5px; gap: 10px; padding: 9px 16px; white-space: nowrap; }
    .live-tag, .sep { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }