/* terrain.html has no h1/points styling of its own today — it renders
   with the browser's default h1 size and default disc bullets, since the
   page only loads base/layout/components.css (not home.css, which is
   where .hero__points is otherwise styled). Copied from home.css rather
   than shared, to keep each page file a self-contained thin override. */
.hero__points {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: 0.6rem;
}

.hero__points li {
  padding-left: 1.6rem;
  position: relative;
  font-weight: 600;
  color: var(--color-navy);
}

.hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

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

@media (max-width: 640px) {
  /* Conversion fix (2026-09-30): same issue found and fixed on
     demande.html — the hero h1 and #formulaire section both used an
     unreduced/default size and the desktop var(--space-6) padding on
     mobile, pushing the first form field well past one screen of scroll.
     Same treatment here: smaller h1, tighter section padding, and the
     formulaire intro paragraph (redundant with the h1) hidden. */
  .container--wide h1 {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
  }

  .section.container--wide {
    padding-block: var(--space-3);
  }

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

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

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