@charset "UTF-8";
/* ==================================================
   « Et si on prenait le temps d'échanger ? » (classes contact-info, adl-contact-form, adl-phone).
   Formulaire Fluent Forms n° 3 : champs sur 2 colonnes (1 sur smartphone), message et bouton sur toute
   la largeur. Couleurs du bouton : CSS personnalisé du formulaire (Fluent Forms > formulaire > Paramètres).
================================================== */
.adl-contact-form .frm-fluent-form {
  width: 100%;
  max-width: 100%;
}

.adl-contact-form form.frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.adl-contact-form form.frm-fluent-form .ff-el-group {
  margin-bottom: 18px;
}

.adl-contact-form form.frm-fluent-form .ff-el-group:has(textarea),
.adl-contact-form form.frm-fluent-form .ff_submit_btn_wrapper {
  grid-column: 1/-1;
}

/* Smartphone (moins de 600 px) : un champ par ligne ; à partir de 600 px (tablette, y compris l'aperçu
   « tablette » du personnalisateur, 720 px) : Nom / Prénom et E-mail / Téléphone côte à côte */
@media (max-width: 599px) {
  .adl-contact-form form.frm-fluent-form > fieldset {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Tablette / smartphone : rien sous le bouton « Envoyer mon message » ; l'écart avec le bloc téléphone
   (placé sous le formulaire) est réglé dans Elementor sur ce bloc, égal à l'écart au-dessus du bouton */
@media (max-width: 1024px) {
  .adl-contact-form.elementor-widget,
  .adl-contact-form form.frm-fluent-form,
  .adl-contact-form form.frm-fluent-form .ff_submit_btn_wrapper {
    margin-bottom: 0 !important;
  }
  .adl-contact-form .ff-btn-submit {
    vertical-align: top;
  }
}