/* ============================================================
   rs1/form — mise en page propre
   Titre, introduction, présentation « carte ».
   Les champs, le bouton et la mention d'envoi sont stylés pour
   tous les formulaires dans assets/css/mp-global.css (§ 10) ; le
   message de confirmation est le composant .mp-confirmation
   (assets/css/mp-tokens.css).
   ============================================================ */

.mp-formulaire{ scroll-margin-top: calc(var(--computed-main-header-height, 5rem) + 1.5rem) }

.mp-formulaire__titre{
  margin: 0 0 .6rem;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
}

.mp-formulaire__intro{
  margin: 0 0 1.75rem;
  max-width: 60ch;
  font-size: var(--mp-t-base);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
}

/* ── Présentation « carte » : le formulaire domine la page ── */
.mp-formulaire--carte{
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--mp-blanc);
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r);
  box-shadow: var(--mp-sh-2);
}

@media (max-width: 600px){
  .mp-formulaire--carte{ padding: 1.35rem 1.1rem }
}