.demande-hero {
  padding: var(--space-6) 0 var(--space-5);
  background: linear-gradient(180deg, var(--color-primary-tint) 0%, var(--color-bg) 100%);
  text-align: center;
}

.demande-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.demande-hero h1 {
  font-size: 2.5rem;
  margin: 0 0 var(--space-3);
}

.demande-hero__highlight {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.demande-hero__lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  /* Conversion fix (2026-09-30, round 2): the first pass (smaller padding
     only) still left the first field below the fold once Safari's real
     chrome (address bar + toolbar) is accounted for — confirmed on an
     iPhone simulator, not just a browser-devtools viewport. The lead
     paragraph and the formulaire intro paragraph both just restate what
     the h1 already says, so they're cut on mobile rather than shrunk
     further, which is what actually gets the first field on screen. */
  .demande-hero {
    padding: var(--space-3) 0 var(--space-2);
  }

  .demande-hero h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .demande-hero__lead {
    display: none;
  }

  #formulaire {
    padding-block: var(--space-3);
  }

  #formulaire > .container > h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
  }

  #formulaire > .container > h2 + p {
    display: none;
  }
}