/* ============================================================================
   form-page.css — Template unifie des pages de formulaire (2 colonnes)
   Pages : /nous-contacter, /diagnostic-conformite, /contact (demo).
   Form a gauche/haut + colonne droite empilee (infos -> reassurance).
   Pas d'eyebrow, titre decolle du header fixe.
   Reutilise .form-card / .form-card-title / .form-card-subtitle existants.
   ============================================================================ */

/* Conteneur page : espace genereux sous le header fixe (corrige le "colle au menu") */
.form-page {
  padding-top: clamp(104px, 11vh, 132px);
  padding-bottom: 80px;
  min-height: 80vh;
}
.form-page > .container { max-width: 1140px; }

/* Zone titre : H1 court + lead 1 ligne (PAS d'eyebrow) */
.form-page-head { max-width: 720px; margin: 0 0 36px; }
.form-page-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.form-page-title em { color: var(--green); font-style: normal; }
.form-page-lead { font-size: 17px; line-height: 1.55; color: var(--text-2); margin: 0; }

/* Split 2 colonnes : form (large) | aside */
.form-page-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}

/* Colonne droite : pile visuel -> infos -> reassurance */
.form-aside { display: flex; flex-direction: column; gap: 20px; }
.form-aside-visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 0;
}
.form-aside-visual img {
  display: block; width: 100%; height: 220px;
  object-fit: cover; object-position: center;
}
.form-aside-block {
  padding: 20px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.form-aside-block-title {
  font-size: 12px; font-family: var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; margin: 0;
}
/* Benefice : check vert + texte */
.form-benefit { display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.45; color: var(--text-2); }
.form-benefit svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--green); margin-top: 1px; }
.form-benefit strong { color: var(--text-1); font-weight: 600; }
/* Reassurance : picto + texte */
.form-reassure-item { display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: var(--text-2); }
.form-reassure-item svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--green); margin-top: 1px; }
.form-reassure-item strong { color: var(--text-1); }
.form-reassure-item a { color: var(--green); font-weight: 600; text-decoration: none; }
.form-reassure-item a:hover { text-decoration: underline; }
/* CTA alternatif optionnel */
.form-aside-cta { font-size: 13.5px; color: var(--text-3); margin: 0; }
.form-aside-cta a { color: var(--green); font-weight: 600; text-decoration: none; }
.form-aside-cta a:hover { text-decoration: underline; }

/* Responsive : 1 colonne, form AU-DESSUS de l'aside (ordre source = form d'abord) */
@media (max-width: 900px) { .form-page-split { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .form-page { padding-top: 92px; padding-bottom: 56px; }
  .form-aside-visual img { height: 180px; }
}