/* ============================================================
   PAGE CONTACT — Caractère Libre (gabarit page-contact.php)
   Variante simple : intro + formulaire FluentForm, centrés.
   Harmonise FluentForm avec la charte (champs arrondis, bouton bleu).
   ============================================================ */

.contact__wrap {
  max-width:      720px;
  margin:         0 auto;
  padding-top:    calc(var(--space-8) + 30px); /* air sous le fil d'ariane (≥30px, cohérent toutes pages contenu) */
  padding-bottom: 160px;
}

.contact__titre {
  font-family:    var(--font-display);
  font-size:      30px;
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-blue);
  line-height:    var(--leading-tight);
  margin:         0 0 var(--space-6);
}

.contact__contenu {
  font-family: var(--font-body);
  font-size:   17px;
  line-height: 1.7;
  color:       var(--color-text);
}

.contact__contenu p { margin: 0 0 var(--space-6); }

.contact__contenu a {
  color:                 var(--color-blue);
  text-decoration:       underline;
  text-underline-offset: 2px;
}

/* ── FluentForm : harmonisation avec la charte ── */

.contact .fluentform { margin-top: var(--space-6); }

/* Étiquettes */
.contact .ff-el-input--label label {
  font-family: var(--font-body);
  font-size:   15px;
  font-weight: var(--weight-bold);
  color:       var(--color-text);
}

/* Champs texte, e-mail, textarea, select */
.contact .ff-el-form-control {
  width:         100%;
  padding:       12px 16px;
  border:        1px solid #d3d8e3;
  border-radius: 10px;
  background:    var(--color-white);
  font-family:   var(--font-body);
  font-size:     16px;
  color:         var(--color-text);
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing:    border-box;
}

.contact .ff-el-form-control:focus {
  outline:      none;
  border-color: var(--color-blue);
  box-shadow:   0 0 0 3px rgba(54, 52, 76, 0.08);
}

.contact textarea.ff-el-form-control { min-height: 140px; resize: vertical; }

/* Case à cocher RGPD */
.contact .ff-el-form-check-label,
.contact .ff-el-form-check label {
  font-size: 14px;
  color:     var(--color-text-secondary);
  line-height: 1.5;
}

/* Bouton d'envoi → pill bleu (surclasse le style inline du builder) */
.contact .ff-btn-submit {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         13px 34px;
  border:          none;
  border-radius:   999px;
  background:      var(--color-blue) !important;
  color:           var(--color-white) !important;
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     var(--weight-bold);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      opacity var(--transition-fast);
}
.contact .ff-btn-submit:hover { opacity: 0.85; }

/* Messages de succès / erreur */
.contact .ff-message-success {
  border:        none !important;     /* pas d'encadré autour du message de confirmation */
  background:    transparent !important;
  box-shadow:    none !important;     /* FluentForm ajoute une ombre 0 1px 5px → on la retire */
  border-radius: 0;
  padding:       0;
}

/* ── Responsive ── */

@media (max-width: 767px) {
  .contact__wrap { padding-bottom: 100px; }
  .contact__titre { font-size: 24px; }
  .contact__contenu { font-size: 16px; }
}