/* ------------------------------------------------------------------
   Harmonisation Forminator avec le thème Spind
   Réplique EXACTE du style Gravity Forms du thème (extrait de styles.110817).
   À utiliser avec "Design Style : None" du formulaire (Forminator → Apparence).
   ------------------------------------------------------------------ */

/* Conteneur : 500px, centré dans la page (comme .gform_wrapper) */
.forminator-ui.forminator-custom-form {
  width: 500px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-family: 'Work Sans', sans-serif !important;
  color: #353b43 !important;
  line-height: 20px !important;
}

/* Titre éventuel */
.forminator-ui.forminator-custom-form .forminator-title {
  color: #353b43 !important;
  font-weight: 600 !important;
  margin: 0 0 24px !important;
}

/* Grille : chaque champ sur sa ligne, pleine largeur du conteneur */
.forminator-ui.forminator-custom-form .forminator-row {
  margin: 0 0 20px !important;
}
.forminator-ui.forminator-custom-form .forminator-col {
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

/* Champ = label à gauche, saisie à droite, centrés verticalement (comme .gfield).
   flex-wrap permet aux messages d'erreur de passer sous le champ. */
.forminator-ui.forminator-custom-form .forminator-field {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Messages de validation : sous le champ (pas à droite), style thème (rouge, petit).
   L'input en erreur passe en bordure rouge. */
.forminator-ui.forminator-custom-form .forminator-error-message {
  flex: 1 1 100% !important;
  width: 100% !important;
  order: 99 !important;
  margin: 8px 0 0 260px !important;
  color: #C80000 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
.forminator-ui.forminator-custom-form .forminator-has_error input.forminator-input,
.forminator-ui.forminator-custom-form .forminator-has_error textarea.forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-has_error select {
  border-color: #C80000 !important;
}

/* Label : hérite de la couleur du thème (#353b43), medium, line-height 1 */
.forminator-ui.forminator-custom-form .forminator-label {
  flex: 1 1 auto !important;
  margin-right: 0 !important;   /* neutralise le 'form label{margin-right:20px}' du thème */
}
.forminator-ui.forminator-custom-form .forminator-label .forminator-required,
.forminator-ui.forminator-custom-form .forminator-required-mark,
.forminator-ui.forminator-custom-form .forminator-label span[aria-hidden] {
  color: red !important;
  margin-left: 5px !important;
}

/* Saisies : valeurs exactes du thème (radius 5px, 36px, padding 0 16px…) */
.forminator-ui.forminator-custom-form input.forminator-input,
.forminator-ui.forminator-custom-form select {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border: 1px solid #e1e3e6 !important;
  border-radius: 5px !important;
  color: #353b43 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.forminator-ui.forminator-custom-form textarea.forminator-textarea {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: 125px !important;
  line-height: 1.5 !important;
  padding: 7px 16px 0 !important;
  background: #fff !important;
  border: 1px solid #e1e3e6 !important;
  border-radius: 5px !important;
  color: #353b43 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
}
.forminator-ui.forminator-custom-form input.forminator-input:focus,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:focus,
.forminator-ui.forminator-custom-form select:focus {
  border-color: #bfb588 !important;
}

/* Champ composite "Nom" (sous-champs Prénom + Nom empilés) : on neutralise la
   marge de la grille interne, on espace via gap, et on fixe l'ordre. */
.forminator-ui.forminator-custom-form .forminator-field-name > .forminator-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-field-name > .forminator-row > .forminator-col {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Ordre des sous-champs (1 = affiché en premier). Ici : Nom avant Prénom.
   Pour inverser, échange simplement les valeurs order (1 ↔ 2). */
.forminator-ui.forminator-custom-form .forminator-field-name > .forminator-row > .forminator-col:nth-child(1) {
  order: 2 !important;   /* Prénom → en 2e */
}
.forminator-ui.forminator-custom-form .forminator-field-name > .forminator-row > .forminator-col:nth-child(2) {
  order: 1 !important;   /* Nom → en 1er */
}

/* Champ RADIO : label à gauche (260px), options dans la colonne de droite, en
   ligne. Rond stylé façon thème (16px, bordure #e1e3e6, #bfb588 sélectionné). */
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field {
  display: flex !important;
  align-items: center !important;
}
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field > .forminator-label {
  flex: 0 0 260px !important;
  max-width: 260px !important;
}
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field > .forminator-required {
  color: red !important;
  margin-left: 5px !important;
}
.forminator-ui.forminator-custom-form label.forminator-radio {
  flex: 0 0 auto !important;
  width: auto;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 20px 0 0 !important;
  cursor: pointer;
  font-weight: 300 !important;
  color: #353b43 !important;
}
/* on masque le radio natif, on stylise le span "bullet" comme le thème */
.forminator-ui.forminator-custom-form label.forminator-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-radio-bullet {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  border: 2px solid #e1e3e6 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.forminator-ui.forminator-custom-form label.forminator-radio input[type="radio"]:checked ~ .forminator-radio-bullet {
  border-color: #bfb588 !important;
}
.forminator-ui.forminator-custom-form label.forminator-radio input[type="radio"]:checked ~ .forminator-radio-bullet:after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin: -4px 0 0 -4px !important;
  border-radius: 4px !important;
  background: #bfb588 !important;
}
.forminator-ui.forminator-custom-form .forminator-radio-label {
  font-weight: 300 !important;
}

/* Champ UPLOAD (natif en mode "None") : label à gauche (260px), l'input file
   dans la colonne de droite ; la liste des fichiers uploadés passe en dessous. */
.forminator-ui.forminator-custom-form .forminator-field-upload > .forminator-field {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.forminator-ui.forminator-custom-form .forminator-field-upload > .forminator-field > .forminator-label {
  flex: 0 0 260px !important;
  max-width: 260px !important;
}
.forminator-ui.forminator-custom-form .forminator-field-upload > .forminator-field > .forminator-multi-upload {
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-field-upload .forminator-multi-upload input[type="file"] {
  width: 100% !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 13px !important;
  color: #353b43 !important;
}
/* liste des fichiers uploadés : pleine largeur, sous la colonne de droite */
.forminator-ui.forminator-custom-form .forminator-field-upload .forminator-uploaded-files {
  flex: 1 1 100% !important;
  width: 100% !important;
  margin: 6px 0 0 260px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Captcha v2 VISIBLE (case "I'm not a robot") : aligné sous la colonne des
   saisies et réduit. ⚠️ scopé à :not(.recaptcha-invisible) — le transform ne
   doit JAMAIS s'appliquer au v3 invisible (il casserait le position:fixed du badge). */
.forminator-ui.forminator-custom-form .forminator-g-recaptcha:not(.recaptcha-invisible) {
  float: none !important;
  display: block !important;
  margin-left: 260px !important;
  transform: scale(.82);
  transform-origin: left top;
  margin-bottom: -14px !important;
}

/* Captcha v3 INVISIBLE : on GARDE le conteneur rendu (sinon le reCAPTCHA ne
   s'exécute pas et le badge disparaît), on masque seulement le libellé "CAPTCHA"
   vide et on retire la marge de la ligne. Le badge Google reste fixé au coin. */
.forminator-ui.forminator-custom-form .forminator-field-captcha:has(.recaptcha-invisible) .forminator-label {
  display: none !important;
}
.forminator-ui.forminator-custom-form .forminator-row:has(.recaptcha-invisible) {
  margin: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-captcha-left.recaptcha-invisible {
  transform: none !important;
  margin-left: 0 !important;
}

/* Bouton d'envoi = style .button du thème (compact, coins droits) */
.forminator-ui.forminator-custom-form .forminator-row-last .forminator-field {
  display: block !important;         /* pas de flex deux-colonnes ici */
}
.forminator-ui.forminator-custom-form .forminator-row-last .forminator-col {
  text-align: left !important;
}
.forminator-ui.forminator-custom-form button.forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 16px !important;
  background: #bfb588 !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: box-shadow .1s linear;
}
.forminator-ui.forminator-custom-form button.forminator-button-submit:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ---------- Mobile : label au-dessus, tout pleine largeur ---------- */
@media (max-width: 782px) {
  .forminator-ui.forminator-custom-form {
    width: 100% !important;
  }
  .forminator-ui.forminator-custom-form .forminator-field {
    display: block !important;
  }
  .forminator-ui.forminator-custom-form .forminator-label {
    padding: 0 0 6px 0 !important;
  }
  .forminator-ui.forminator-custom-form input.forminator-input,
  .forminator-ui.forminator-custom-form select,
  .forminator-ui.forminator-custom-form textarea.forminator-textarea {
    width: 100% !important;
    flex: none !important;
  }
  .forminator-ui.forminator-custom-form .forminator-field-captcha .forminator-g-recaptcha,
  .forminator-ui.forminator-custom-form .forminator-captcha-left {
    margin-left: 0 !important;
  }
}