/* Formulaires Gravity Forms #3 (pre-qualification ERP) et #4 (contact) de la page ERP.
   Repris a l'identique du widget HTML Elementor d'origine (post 1922). */
/* ============================================================================
   Form #3 - Maisons ECC / Simulation pré-qualification ERP
   ----------------------------------------------------------------------------
   Scope strict : #gform_wrapper_3 (cible uniquement ce form précis)
   Marque : Maisons ECC - palette rouge #E94642 + noir #000 + texte #333
   Police : Inter 400/700
   Form paginé (2 pages, saut de page entre projet et identité+consentements).
   À coller dans un widget HTML Elementor ou un Custom CSS au-dessus du form.
   ============================================================================ */

/* 1. Conteneur principal (la carte blanche)
   Match exactement le pattern HTML d'origine .simu-card :
   border 1px solid #e7e3e1, border-radius 16px, padding 26px, box-shadow douce */
html body #gform_wrapper_3 {
  background-color: white !important;
  padding: 26px !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e7e3e1 !important;
  box-sizing: border-box !important;
}

/* 2. Reset padding sur les champs */
html body #gform_wrapper_3 .gfield {
  padding: 0px !important;
}

/* 3. Labels principaux (match HTML d'origine : 12.5px, 600 weight, INK #0c0c0c) */
html body #gform_wrapper_3 .gfield_label {
  color: #0c0c0c !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: inter;
  margin: 0 0 6px 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* 4. Astérisque "requis" */
html body #gform_wrapper_3 .gfield_required {
  color: #E94642 !important;
  font-size: 10px;
  font-weight: 500 !important;
  padding-left: 4px;
}

/* 5. Sous-labels (Prénom, Nom dans un bloc Name) - même taille que les labels principaux */
html body #gform_wrapper_3 .gform-field-label--type-sub {
  font-size: 12.5px !important;
  color: #0c0c0c !important;
  font-weight: 600 !important;
  font-family: inter;
  margin: 0 0 6px 0 !important;
}

/* 6. Champs de saisie standards (match HTML d'origine : padding 11/13, font-size 14.5px,
   line-height 1.55, pas de height fixe → hauteur naturelle par contenu)
   Note : on retire `height: 40px` qui forçait le texte à se coller en haut sur les
   <select>. La hauteur est maintenant déterminée par padding + font-size + line-height. */
html body #gform_wrapper_3 input[type='text'],
html body #gform_wrapper_3 input[type='email'],
html body #gform_wrapper_3 input[type='tel'],
html body #gform_wrapper_3 input[type='number'],
html body #gform_wrapper_3 textarea,
html body #gform_wrapper_3 select {
  width: 100% !important;
  padding: 11px 13px !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  background-color: #fff !important;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) !important;
  color: #333333 !important;
  border: 1px solid #dddddd !important;
  border-radius: 9px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 42px !important;
  font-family: inter;
}

html body #gform_wrapper_3 input:focus,
html body #gform_wrapper_3 select:focus,
html body #gform_wrapper_3 textarea:focus {
  border-color: #E94642 !important;
  box-shadow: 0 0 0 3px rgba(233, 70, 66, 0.2) !important;
}

/* S'assurer que tous les inputs/textarea/select restent interactifs (résidus
   pointer-events:none, cursor not-allowed, user-select:none, etc. à override). */
html body #gform_wrapper_3 input,
html body #gform_wrapper_3 textarea,
html body #gform_wrapper_3 select,
html body #gform_wrapper_3 .gfield,
html body #gform_wrapper_3 .gfield *,
html body #gform_wrapper_3 .gfield_visibility_visible,
html body #gform_wrapper_3 .gfield_visibility_visible *,
html body #gform_wrapper_3 fieldset,
html body #gform_wrapper_3 .ginput_container,
html body #gform_wrapper_3 .ginput_container * {
  pointer-events: auto !important;
}

html body #gform_wrapper_3 input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
html body #gform_wrapper_3 textarea,
html body #gform_wrapper_3 select {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* 7. Grille (gap entre champs côte à côte) */
html body #gform_wrapper_3 .gform-grid-row {
  display: flex !important;
  gap: 15px !important;
}

/* 8. Section consentement (checkboxes + texte) */
html body #gform_wrapper_3 .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 1px !important;
  font-family: inter;
}

/* La case à cocher (carré custom) */
html body #gform_wrapper_3 .ginput_container_consent input[type='checkbox'] {
  /* 1. Taille stricte */
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
  /* 2. Neutralisation */
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin-bottom: 0px !important;
  /* 3. Forme */
  border-radius: 3px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  flex-shrink: 0 !important;
  /* 4. Couleurs */
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  cursor: pointer !important;
  /* 5. Préparation pour la coche */
  display: grid !important;
  place-content: center !important;
  box-sizing: border-box !important;
  /* 6. Pas d'outline navigateur au focus, et transition douce */
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}

html body #gform_wrapper_3 .ginput_container_consent input[type='checkbox']:focus,
html body #gform_wrapper_3 .ginput_container_consent input[type='checkbox']:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(233, 70, 66, 0.2) !important;
}

/* État coché : la case devient ENTIÈREMENT rouge ECC (background + border) avec une coche
   blanche (SVG checkmark) au centre. Plus de carré interne 10×10, on remplit tout. */
html body #gform_wrapper_3 .ginput_container_consent input[type='checkbox']:checked {
  background-color: #E94642 !important;
  border-color: #E94642 !important;
}

html body #gform_wrapper_3 .ginput_container_consent input[type='checkbox']::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(0);
  transition: 0.12s transform ease-in-out;
}

html body #gform_wrapper_3 .ginput_container_consent input[type='checkbox']:checked::before {
  transform: scale(1);
}

/* Le texte à côté de la checkbox - FORCER wrap pour que le texte long passe sur
   plusieurs lignes au lieu d'être tronqué par overflow:hidden ou white-space:nowrap */
html body #gform_wrapper_3 .gfield_consent_label {
  font-size: 11px !important;
  color: #000000 !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 9. Bouton submit final (page 2 du form paginé OU form non-paginé)
   Sur un form paginé, GF met le submit dans .gform_page_footer (pas .gform_footer).
   On cible les 2 cas pour être robuste. */
html body #gform_wrapper_3 .gform_footer,
html body #gform_wrapper_3 .gform_page_footer {
  padding: 0px !important;
}

html body #gform_wrapper_3 .gform_footer input[type='submit'],
html body #gform_wrapper_3 .gform_page_footer input[type='submit'],
html body #gform_wrapper_3 .gform_button[type='submit'],
html body #gform_wrapper_3 input.gform_button {
  background-color: #E94642 !important;
  color: #ffffff !important;
  padding: 16px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background-color 0.2s !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-top: 10px !important;
  font-family: inter;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body #gform_wrapper_3 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_3 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_3 .gform_button[type='submit']:hover,
html body #gform_wrapper_3 input.gform_button:hover {
  background-color: #EA3834 !important;
}

/* Pas d'outline navigateur sur les boutons au focus / click */
html body #gform_wrapper_3 .gform_footer input[type='submit']:focus,
html body #gform_wrapper_3 .gform_footer input[type='submit']:focus-visible,
html body #gform_wrapper_3 .gform_page_footer input[type='submit']:focus,
html body #gform_wrapper_3 .gform_page_footer input[type='submit']:focus-visible,
html body #gform_wrapper_3 .gform_button:focus,
html body #gform_wrapper_3 .gform_button:focus-visible,
html body #gform_wrapper_3 .gform_next_button:focus,
html body #gform_wrapper_3 .gform_next_button:focus-visible,
html body #gform_wrapper_3 .gform_previous_button:focus,
html body #gform_wrapper_3 .gform_previous_button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(233, 70, 66, 0.15) !important;
}

/* Sur la DERNIÈRE page d'un form paginé, .gform_page_footer contient à la fois
   le bouton Précédent ET le submit final - les mettre côte à côte avec MÊME
   largeur (50/50). Override du width:100% du submit. */
html body #gform_wrapper_3 .gform_page_footer input[type='submit'] {
  width: auto !important;
  flex: 1 1 0 !important;
  margin-top: 0 !important;
}
html body #gform_wrapper_3 .gform_page_footer .gform_previous_button {
  flex: 1 1 0 !important;
}
html body #gform_wrapper_3 .gform_page_footer .gform_next_button {
  flex: 1 1 0 !important;
}

/* 9bis. Boutons de pagination (Suivant / Précédent entre les pages) */
html body #gform_wrapper_3 .gform_page_footer {
  padding: 0 !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  align-items: center !important;
}

html body #gform_wrapper_3 .gform_next_button,
html body #gform_wrapper_3 .gform_previous_button {
  padding: 16px 28px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s !important;
  text-transform: uppercase !important;
  font-family: inter;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Bouton "Suivant" (rouge plein, full width) */
html body #gform_wrapper_3 .gform_next_button {
  background-color: #E94642 !important;
  color: #ffffff !important;
  border: none !important;
  flex: 1 !important;
}
html body #gform_wrapper_3 .gform_next_button:hover {
  background-color: #EA3834 !important;
}

/* Bouton "Précédent" (outline rouge, plus petit) */
html body #gform_wrapper_3 .gform_previous_button {
  background-color: #ffffff !important;
  color: #E94642 !important;
  border: 1px solid #E94642 !important;
}
html body #gform_wrapper_3 .gform_previous_button:hover {
  background-color: #fff5f4 !important;
}

/* 9ter. Barre de progression (si activée dans les paramètres du form GF) */
html body #gform_wrapper_3 .gf_progressbar_wrapper {
  margin-bottom: 24px !important;
}
html body #gform_wrapper_3 .gf_progressbar_title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  font-family: inter;
  margin-bottom: 8px !important;
}
html body #gform_wrapper_3 .gf_progressbar {
  background-color: #f6f4f3 !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden !important;
}
html body #gform_wrapper_3 .gf_progressbar_percentage {
  background-color: #E94642 !important;
  height: 100% !important;
  transition: width 0.3s ease !important;
}

/* 10. Liens dans le texte HTML */
html body #gform_wrapper_3 .gfield_html a {
  color: #E94642 !important;
  text-decoration: underline !important;
  font-family: inter;
}

/* 11. Texte du bloc HTML (mentions légales bas de page) */
html body #gform_wrapper_3 .gfield_html {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: #000000 !important;
  font-weight: 400;
  font-family: inter;
}

/* 12. Layout des champs : en thème Legacy, simple display: block suffit
   (chaque .gfield prend sa ligne). Le bug Orbital de superposition n'existe
   plus en Legacy donc on peut revenir à un block flow standard, qui permet
   en plus d'utiliser inline-block sur certains champs pour les mettre côte à côte. */
html body #gform_wrapper_3 .gform-body,
html body #gform_wrapper_3 .gform_fields {
  display: block !important;
  width: 100% !important;
  font-size: 0 !important; /* annule le whitespace entre inline-block */
}

html body #gform_wrapper_3 .gform_fields > .gfield {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  grid-column: unset !important;
  grid-row: unset !important;
  font-size: 14px !important; /* restaure la taille de base à l'intérieur des .gfield */
}

/* Si Gravity Forms utilise .gform-grid-row pour les champs côte à côte, on
   garde flex-row à l'intérieur. Les .gform-grid-row sont des enfants directs
   de .gform_fields qu'on flex-column. */
html body #gform_wrapper_3 .gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
  width: 100% !important;
}

html body #gform_wrapper_3 .gform-grid-row > .gfield,
html body #gform_wrapper_3 .gform-grid-row > .gform-grid-col {
  flex: 1 1 0 !important;
  width: 50% !important;
}

/* Anti-position-absolute sur TOUS les labels et textes de consent (GF peut
   avoir un mode "floating label" qui les place en absolute - on force static
   partout, sur tous les sélecteurs label possibles). Critique sinon tous les
   labels du form remontent superposés en haut de la carte. */
html body #gform_wrapper_3 .gfield > label,
html body #gform_wrapper_3 .gfield label,
html body #gform_wrapper_3 .gfield_label,
html body #gform_wrapper_3 .gform-field-label,
html body #gform_wrapper_3 .gform-field-label--type-sub,
html body #gform_wrapper_3 .gfield_consent_label,
html body #gform_wrapper_3 .ginput_container_consent label {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  pointer-events: auto !important;
  float: none !important;
  clip: auto !important;
  clip-path: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Cas spécifique du consent label : reste à côté de la checkbox, pas en bloc */
html body #gform_wrapper_3 .ginput_container_consent .gfield_consent_label {
  display: inline-block !important;
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Désactiver les modes floating de GF si le form est configuré comme tel */
html body #gform_wrapper_3 .gfield--floating-label,
html body #gform_wrapper_3 .gfield .gform-field-label--floating,
html body #gform_wrapper_3 .gfield .gform-field-label--float {
  position: static !important;
  transform: none !important;
}

/* 13. Espace pour les champs de texte */
html body #gform_wrapper_3 .gfield:not(.gfield--type-consent) {
  margin-bottom: 20px !important;
  padding-bottom: 0px !important;
}

/* 14. Espace pour les checkboxes (consentement) */
html body #gform_wrapper_3 .gfield.gfield--type-consent {
  margin-bottom: 12px !important;
  margin-top: 0px !important;
  padding-bottom: 0px !important;
}

/* 15. Séparation entre dernier champ et première checkbox */
html body #gform_wrapper_3 .gfield.gfield--type-consent:first-of-type {
  margin-top: 10px !important;
}

/* 15bis. Champ Name (Prénom + Nom)
   - Cacher le gros label principal "Nom" en haut (le label .gfield_label du champ Name)
   - Inverser l'ordre des inputs et sous-labels (par défaut : input puis sous-label EN DESSOUS,
     on veut sous-label EN HAUT puis input) via flex-direction: column-reverse */
html body #gform_wrapper_3 .gfield--type-name > .gfield_label {
  display: none !important;
}

html body #gform_wrapper_3 .ginput_complex.ginput_container_name,
html body #gform_wrapper_3 .ginput_container_name {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_3 .ginput_complex.ginput_container_name .name_first,
html body #gform_wrapper_3 .ginput_complex.ginput_container_name .name_last,
html body #gform_wrapper_3 .ginput_container_name > span {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  width: 50% !important;
}

/* Sous-labels Prénom/Nom : style identique aux labels principaux (12.5px) */
html body #gform_wrapper_3 .ginput_complex .gform-field-label,
html body #gform_wrapper_3 .ginput_complex label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0c0c0c !important;
  font-family: inter;
  margin: 0 0 6px 0 !important;
  display: block !important;
}

/* 15ter. Email + Téléphone côte à côte
   GF peut nommer les classes de plusieurs façons selon la version, on cible
   large : --type-email/phone (par type de champ) ET --input-type-email/phone
   (par type d'input HTML5). */
html body #gform_wrapper_3 .gfield--type-email,
html body #gform_wrapper_3 .gfield--type-phone,
html body #gform_wrapper_3 .gfield[class*="--type-email"],
html body #gform_wrapper_3 .gfield[class*="--type-phone"],
html body #gform_wrapper_3 .gfield[class*="input-type-email"],
html body #gform_wrapper_3 .gfield[class*="input-type-phone"] {
  width: calc(50% - 8px) !important;
  display: inline-block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

html body #gform_wrapper_3 .gfield--type-email,
html body #gform_wrapper_3 .gfield[class*="--type-email"],
html body #gform_wrapper_3 .gfield[class*="input-type-email"] {
  margin-right: 16px !important;
}

/* =================================================================
   16. Responsive mobile
   ================================================================= */
@media only screen and (max-width: 768px) {
  /* Le bloc intermédiaire */
  html body #gform_wrapper_3 .gform_fields {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Le conteneur principal */
  html body #gform_wrapper_3 {
    width: 100% !important;
    margin: 20px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* Les inputs */
  html body #gform_wrapper_3 input:not([type='checkbox']),
  html body #gform_wrapper_3 textarea,
  html body #gform_wrapper_3 select {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
    min-width: 100% !important;
  }

  /* Gestion des checkbox */
  html body #gform_wrapper_3 .ginput_container_consent {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body #gform_wrapper_3 .gfield_html {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 0px;
  }

  /* Pagination mobile : boutons en colonne */
  html body #gform_wrapper_3 .gform_page_footer {
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body #gform_wrapper_3 .gform_next_button,
  html body #gform_wrapper_3 .gform_previous_button {
    width: 100% !important;
  }

  /* Bouton submit reste rouge en mobile (ne pas basculer en noir comme form #10) */
  html body #gform_wrapper_3 .gform_footer input[type='submit'] {
    margin-top: 0px !important;
  }
}

/* ============================================================================
   Bouton submit : animation hover (élévation douce + shadow)
   ============================================================================ */

html body #gform_wrapper_3 .gform_footer input[type='submit'],
html body #gform_wrapper_3 .gform_page_footer input[type='submit'],
html body #gform_wrapper_3 .gform_next_button {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

html body #gform_wrapper_3 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_3 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_3 .gform_next_button:hover {
  background-color: #EA3834 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(233, 70, 66, 0.28) !important;
}

html body #gform_wrapper_3 .gform_footer input[type='submit']:active,
html body #gform_wrapper_3 .gform_page_footer input[type='submit']:active,
html body #gform_wrapper_3 .gform_next_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(233, 70, 66, 0.20) !important;
}

/* ============================================================================
   FIX FORCED : sublabel above + progress bar hidden
   ----------------------------------------------------------------------------
   GF Orbital ignore subLabelPlacement="above" sur certains rendus.
   On force visuellement via flex-direction: column-reverse sur les wrappers de
   sub-fields (.name_first, .name_last). Le DOM reste <input>+<label>, mais
   visuellement le label remonte au-dessus.
   ============================================================================ */

html body #gform_wrapper_3 .ginput_complex .name_first,
html body #gform_wrapper_3 .ginput_complex .name_last,
html body #gform_wrapper_3 .ginput_container_name > span,
html body #gform_wrapper_3 .ginput_container_name .gform-grid-col {
  display: flex !important;
  flex-direction: column !important;
}

/* Espace entre le label (qui est maintenant au-dessus) et l'input en-dessous */
html body #gform_wrapper_3 .ginput_complex .gform-field-label--type-sub {
  margin: 0 0 6px 0 !important;
  order: 0 !important;
}

/* Cacher la barre de progression GF (Étape 1 sur 2 / pourcentage) */
html body #gform_wrapper_3 .gf_progressbar_wrapper,
html body #gform_wrapper_3 .gf_progressbar,
html body #gform_wrapper_3 .gf_progressbar_title,
html body #gform_wrapper_3 .gform_page_steps,
html body #gform_wrapper_3 .gf_page_steps {
  display: none !important;
}

/* ============================================================================
   FIX FORCE v2 : sublabel above sur le bloc Name (Prénom/Nom)
   ----------------------------------------------------------------------------
   Le sélecteur précédent a manqué certaines variantes Orbital. On élargit
   pour couvrir tous les enfants directs des wrappers .ginput_container_name
   et .ginput_complex, peu importe leur tag (span, div).
   ============================================================================ */

html body #gform_wrapper_3 .ginput_complex,
html body #gform_wrapper_3 .ginput_complex.ginput_container,
html body #gform_wrapper_3 .ginput_container_name,
html body #gform_wrapper_3 .ginput_container_name.gform-grid-row {
  /* Le row reste flex-row pour avoir Prénom | Nom côte à côte */
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_3 .ginput_complex > span,
html body #gform_wrapper_3 .ginput_complex > div,
html body #gform_wrapper_3 .ginput_container_name > span,
html body #gform_wrapper_3 .ginput_container_name > div,
html body #gform_wrapper_3 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_3 .name_first,
html body #gform_wrapper_3 .name_last {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  width: 50% !important;
  min-width: 0 !important;
}

/* Le label sub (Prénom / Nom) se retrouve au-dessus avec margin-bottom */
html body #gform_wrapper_3 .ginput_complex .gform-field-label--type-sub,
html body #gform_wrapper_3 .ginput_complex label[for*="_first"],
html body #gform_wrapper_3 .ginput_complex label[for*="_last"],
html body #gform_wrapper_3 .ginput_container_name label {
  margin: 0 0 6px 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0c0c0c !important;
  font-family: inter !important;
  display: block !important;
}

/* ============================================================================
   FIX FINAL : DOM rend déjà label-puis-input (subLabelPlacement=above côté GF),
   donc on FORCE flex-direction: column (pas reverse). Annule l'ancien tweak
   column-reverse qui faisait l'inverse de ce qu'on voulait.
   ============================================================================ */

html body #gform_wrapper_3 .ginput_complex,
html body #gform_wrapper_3 .ginput_complex.ginput_container,
html body #gform_wrapper_3 .ginput_container_name,
html body #gform_wrapper_3 .ginput_container_name.gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_3 .ginput_complex > span,
html body #gform_wrapper_3 .ginput_complex > div,
html body #gform_wrapper_3 .ginput_container_name > span,
html body #gform_wrapper_3 .ginput_container_name > div,
html body #gform_wrapper_3 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_3 .name_first,
html body #gform_wrapper_3 .name_last {
  display: flex !important;
  flex-direction: column !important; /* pas column-reverse - le DOM est déjà bon */
  flex: 1 1 0 !important;
  width: 50% !important;
  min-width: 0 !important;
}


/* ========= FORM #4 CONTACT ========= */
/* ============================================================================
   Form #4 - Maisons ECC / Contact
   ----------------------------------------------------------------------------
   Scope strict : #gform_wrapper_4 (cible uniquement ce form précis)
   Marque : Maisons ECC - palette rouge #E94642 + noir #000 + texte #333
   Police : Inter 400/700
   Form non paginé : champs en une seule page. Adapté au form #3 mais en plus simple.
   À coller dans un widget HTML Elementor ou un Custom CSS au-dessus du form.
   ============================================================================ */

/* 1. Conteneur principal (la carte blanche)
   Match exactement le pattern HTML d'origine .simu-card :
   border 1px solid #e7e3e1, border-radius 16px, padding 26px, box-shadow douce */
html body #gform_wrapper_4 {
  background-color: white !important;
  padding: 26px !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e7e3e1 !important;
  box-sizing: border-box !important;
}

/* 2. Reset padding sur les champs */
html body #gform_wrapper_4 .gfield {
  padding: 0px !important;
}

/* 3. Labels principaux (match HTML d'origine : 12.5px, 600 weight, INK #0c0c0c) */
html body #gform_wrapper_4 .gfield_label {
  color: #0c0c0c !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: inter;
  margin: 0 0 6px 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* 4. Astérisque "requis" */
html body #gform_wrapper_4 .gfield_required {
  color: #E94642 !important;
  font-size: 10px;
  font-weight: 500 !important;
  padding-left: 4px;
}

/* 5. Sous-labels (Prénom, Nom dans un bloc Name) - même taille que les labels principaux */
html body #gform_wrapper_4 .gform-field-label--type-sub {
  font-size: 12.5px !important;
  color: #0c0c0c !important;
  font-weight: 600 !important;
  font-family: inter;
  margin: 0 0 6px 0 !important;
}

/* 6. Champs de saisie standards (match HTML d'origine : padding 11/13, font-size 14.5px,
   line-height 1.55, pas de height fixe → hauteur naturelle par contenu)
   Note : on retire `height: 40px` qui forçait le texte à se coller en haut sur les
   <select>. La hauteur est maintenant déterminée par padding + font-size + line-height. */
html body #gform_wrapper_4 input[type='text'],
html body #gform_wrapper_4 input[type='email'],
html body #gform_wrapper_4 input[type='tel'],
html body #gform_wrapper_4 input[type='number'],
html body #gform_wrapper_4 textarea,
html body #gform_wrapper_4 select {
  width: 100% !important;
  padding: 11px 13px !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  background-color: #fff !important;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) !important;
  color: #333333 !important;
  border: 1px solid #dddddd !important;
  border-radius: 9px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 42px !important;
  font-family: inter;
}

html body #gform_wrapper_4 input:focus,
html body #gform_wrapper_4 select:focus,
html body #gform_wrapper_4 textarea:focus {
  border-color: #E94642 !important;
  box-shadow: 0 0 0 3px rgba(233, 70, 66, 0.2) !important;
}

/* S'assurer que tous les inputs/textarea/select restent interactifs (résidus
   pointer-events:none, cursor not-allowed, user-select:none, etc. à override). */
html body #gform_wrapper_4 input,
html body #gform_wrapper_4 textarea,
html body #gform_wrapper_4 select,
html body #gform_wrapper_4 .gfield,
html body #gform_wrapper_4 .gfield *,
html body #gform_wrapper_4 .gfield_visibility_visible,
html body #gform_wrapper_4 .gfield_visibility_visible *,
html body #gform_wrapper_4 fieldset,
html body #gform_wrapper_4 .ginput_container,
html body #gform_wrapper_4 .ginput_container * {
  pointer-events: auto !important;
}

html body #gform_wrapper_4 input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
html body #gform_wrapper_4 textarea,
html body #gform_wrapper_4 select {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* 7. Grille (gap entre champs côte à côte) */
html body #gform_wrapper_4 .gform-grid-row {
  display: flex !important;
  gap: 15px !important;
}

/* 8. Section consentement (checkboxes + texte) */
html body #gform_wrapper_4 .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 1px !important;
  font-family: inter;
}

/* La case à cocher (carré custom) */
html body #gform_wrapper_4 .ginput_container_consent input[type='checkbox'] {
  /* 1. Taille stricte */
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
  /* 2. Neutralisation */
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin-bottom: 0px !important;
  /* 3. Forme */
  border-radius: 3px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  flex-shrink: 0 !important;
  /* 4. Couleurs */
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  cursor: pointer !important;
  /* 5. Préparation pour la coche */
  display: grid !important;
  place-content: center !important;
  box-sizing: border-box !important;
  /* 6. Pas d'outline navigateur au focus, et transition douce */
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}

html body #gform_wrapper_4 .ginput_container_consent input[type='checkbox']:focus,
html body #gform_wrapper_4 .ginput_container_consent input[type='checkbox']:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(233, 70, 66, 0.2) !important;
}

/* État coché : la case devient ENTIÈREMENT rouge ECC (background + border) avec une coche
   blanche (SVG checkmark) au centre. Plus de carré interne 10×10, on remplit tout. */
html body #gform_wrapper_4 .ginput_container_consent input[type='checkbox']:checked {
  background-color: #E94642 !important;
  border-color: #E94642 !important;
}

html body #gform_wrapper_4 .ginput_container_consent input[type='checkbox']::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(0);
  transition: 0.12s transform ease-in-out;
}

html body #gform_wrapper_4 .ginput_container_consent input[type='checkbox']:checked::before {
  transform: scale(1);
}

/* Le texte à côté de la checkbox - FORCER wrap pour que le texte long passe sur
   plusieurs lignes au lieu d'être tronqué par overflow:hidden ou white-space:nowrap */
html body #gform_wrapper_4 .gfield_consent_label {
  font-size: 11px !important;
  color: #000000 !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 9. Bouton submit final (page 2 du form paginé OU form non-paginé)
   Sur un form paginé, GF met le submit dans .gform_page_footer (pas .gform_footer).
   On cible les 2 cas pour être robuste. */
html body #gform_wrapper_4 .gform_footer,
html body #gform_wrapper_4 .gform_page_footer {
  padding: 0px !important;
}

html body #gform_wrapper_4 .gform_footer input[type='submit'],
html body #gform_wrapper_4 .gform_page_footer input[type='submit'],
html body #gform_wrapper_4 .gform_button[type='submit'],
html body #gform_wrapper_4 input.gform_button {
  background-color: #E94642 !important;
  color: #ffffff !important;
  padding: 16px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background-color 0.2s !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-top: 10px !important;
  font-family: inter;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body #gform_wrapper_4 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_4 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_4 .gform_button[type='submit']:hover,
html body #gform_wrapper_4 input.gform_button:hover {
  background-color: #EA3834 !important;
}

/* Pas d'outline navigateur sur les boutons au focus / click */
html body #gform_wrapper_4 .gform_footer input[type='submit']:focus,
html body #gform_wrapper_4 .gform_footer input[type='submit']:focus-visible,
html body #gform_wrapper_4 .gform_page_footer input[type='submit']:focus,
html body #gform_wrapper_4 .gform_page_footer input[type='submit']:focus-visible,
html body #gform_wrapper_4 .gform_button:focus,
html body #gform_wrapper_4 .gform_button:focus-visible,
html body #gform_wrapper_4 .gform_next_button:focus,
html body #gform_wrapper_4 .gform_next_button:focus-visible,
html body #gform_wrapper_4 .gform_previous_button:focus,
html body #gform_wrapper_4 .gform_previous_button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(233, 70, 66, 0.15) !important;
}

/* Sur la DERNIÈRE page d'un form paginé, .gform_page_footer contient à la fois
   le bouton Précédent ET le submit final - les mettre côte à côte avec MÊME
   largeur (50/50). Override du width:100% du submit. */
html body #gform_wrapper_4 .gform_page_footer input[type='submit'] {
  width: auto !important;
  flex: 1 1 0 !important;
  margin-top: 0 !important;
}
html body #gform_wrapper_4 .gform_page_footer .gform_previous_button {
  flex: 1 1 0 !important;
}
html body #gform_wrapper_4 .gform_page_footer .gform_next_button {
  flex: 1 1 0 !important;
}

/* 9bis. Boutons de pagination (Suivant / Précédent entre les pages) */
html body #gform_wrapper_4 .gform_page_footer {
  padding: 0 !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  align-items: center !important;
}

html body #gform_wrapper_4 .gform_next_button,
html body #gform_wrapper_4 .gform_previous_button {
  padding: 16px 28px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s !important;
  text-transform: uppercase !important;
  font-family: inter;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Bouton "Suivant" (rouge plein, full width) */
html body #gform_wrapper_4 .gform_next_button {
  background-color: #E94642 !important;
  color: #ffffff !important;
  border: none !important;
  flex: 1 !important;
}
html body #gform_wrapper_4 .gform_next_button:hover {
  background-color: #EA3834 !important;
}

/* Bouton "Précédent" (outline rouge, plus petit) */
html body #gform_wrapper_4 .gform_previous_button {
  background-color: #ffffff !important;
  color: #E94642 !important;
  border: 1px solid #E94642 !important;
}
html body #gform_wrapper_4 .gform_previous_button:hover {
  background-color: #fff5f4 !important;
}

/* 9ter. Barre de progression (si activée dans les paramètres du form GF) */
html body #gform_wrapper_4 .gf_progressbar_wrapper {
  margin-bottom: 24px !important;
}
html body #gform_wrapper_4 .gf_progressbar_title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  font-family: inter;
  margin-bottom: 8px !important;
}
html body #gform_wrapper_4 .gf_progressbar {
  background-color: #f6f4f3 !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden !important;
}
html body #gform_wrapper_4 .gf_progressbar_percentage {
  background-color: #E94642 !important;
  height: 100% !important;
  transition: width 0.3s ease !important;
}

/* 10. Liens dans le texte HTML */
html body #gform_wrapper_4 .gfield_html a {
  color: #E94642 !important;
  text-decoration: underline !important;
  font-family: inter;
}

/* 11. Texte du bloc HTML (mentions légales bas de page) */
html body #gform_wrapper_4 .gfield_html {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: #000000 !important;
  font-weight: 400;
  font-family: inter;
}

/* 12. Layout des champs : en thème Legacy, simple display: block suffit
   (chaque .gfield prend sa ligne). Le bug Orbital de superposition n'existe
   plus en Legacy donc on peut revenir à un block flow standard, qui permet
   en plus d'utiliser inline-block sur certains champs pour les mettre côte à côte. */
html body #gform_wrapper_4 .gform-body,
html body #gform_wrapper_4 .gform_fields {
  display: block !important;
  width: 100% !important;
  font-size: 0 !important; /* annule le whitespace entre inline-block */
}

html body #gform_wrapper_4 .gform_fields > .gfield {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  grid-column: unset !important;
  grid-row: unset !important;
  font-size: 14px !important; /* restaure la taille de base à l'intérieur des .gfield */
}

/* Si Gravity Forms utilise .gform-grid-row pour les champs côte à côte, on
   garde flex-row à l'intérieur. Les .gform-grid-row sont des enfants directs
   de .gform_fields qu'on flex-column. */
html body #gform_wrapper_4 .gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
  width: 100% !important;
}

html body #gform_wrapper_4 .gform-grid-row > .gfield,
html body #gform_wrapper_4 .gform-grid-row > .gform-grid-col {
  flex: 1 1 0 !important;
  width: 50% !important;
}

/* Anti-position-absolute sur TOUS les labels et textes de consent (GF peut
   avoir un mode "floating label" qui les place en absolute - on force static
   partout, sur tous les sélecteurs label possibles). Critique sinon tous les
   labels du form remontent superposés en haut de la carte. */
html body #gform_wrapper_4 .gfield > label,
html body #gform_wrapper_4 .gfield label,
html body #gform_wrapper_4 .gfield_label,
html body #gform_wrapper_4 .gform-field-label,
html body #gform_wrapper_4 .gform-field-label--type-sub,
html body #gform_wrapper_4 .gfield_consent_label,
html body #gform_wrapper_4 .ginput_container_consent label {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  pointer-events: auto !important;
  float: none !important;
  clip: auto !important;
  clip-path: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Cas spécifique du consent label : reste à côté de la checkbox, pas en bloc */
html body #gform_wrapper_4 .ginput_container_consent .gfield_consent_label {
  display: inline-block !important;
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Désactiver les modes floating de GF si le form est configuré comme tel */
html body #gform_wrapper_4 .gfield--floating-label,
html body #gform_wrapper_4 .gfield .gform-field-label--floating,
html body #gform_wrapper_4 .gfield .gform-field-label--float {
  position: static !important;
  transform: none !important;
}

/* 13. Espace pour les champs de texte */
html body #gform_wrapper_4 .gfield:not(.gfield--type-consent) {
  margin-bottom: 20px !important;
  padding-bottom: 0px !important;
}

/* 14. Espace pour les checkboxes (consentement) */
html body #gform_wrapper_4 .gfield.gfield--type-consent {
  margin-bottom: 12px !important;
  margin-top: 0px !important;
  padding-bottom: 0px !important;
}

/* 15. Séparation entre dernier champ et première checkbox */
html body #gform_wrapper_4 .gfield.gfield--type-consent:first-of-type {
  margin-top: 10px !important;
}

/* 15bis. Champ Name (Prénom + Nom)
   - Cacher le gros label principal "Nom" en haut (le label .gfield_label du champ Name)
   - Inverser l'ordre des inputs et sous-labels (par défaut : input puis sous-label EN DESSOUS,
     on veut sous-label EN HAUT puis input) via flex-direction: column-reverse */
html body #gform_wrapper_4 .gfield--type-name > .gfield_label {
  display: none !important;
}

html body #gform_wrapper_4 .ginput_complex.ginput_container_name,
html body #gform_wrapper_4 .ginput_container_name {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_4 .ginput_complex.ginput_container_name .name_first,
html body #gform_wrapper_4 .ginput_complex.ginput_container_name .name_last,
html body #gform_wrapper_4 .ginput_container_name > span {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  width: 50% !important;
}

/* Sous-labels Prénom/Nom : style identique aux labels principaux (12.5px) */
html body #gform_wrapper_4 .ginput_complex .gform-field-label,
html body #gform_wrapper_4 .ginput_complex label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0c0c0c !important;
  font-family: inter;
  margin: 0 0 6px 0 !important;
  display: block !important;
}

/* 15ter. Email + Téléphone côte à côte
   GF peut nommer les classes de plusieurs façons selon la version, on cible
   large : --type-email/phone (par type de champ) ET --input-type-email/phone
   (par type d'input HTML5). */
html body #gform_wrapper_4 .gfield--type-email,
html body #gform_wrapper_4 .gfield--type-phone,
html body #gform_wrapper_4 .gfield[class*="--type-email"],
html body #gform_wrapper_4 .gfield[class*="--type-phone"],
html body #gform_wrapper_4 .gfield[class*="input-type-email"],
html body #gform_wrapper_4 .gfield[class*="input-type-phone"] {
  width: calc(50% - 8px) !important;
  display: inline-block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

html body #gform_wrapper_4 .gfield--type-email,
html body #gform_wrapper_4 .gfield[class*="--type-email"],
html body #gform_wrapper_4 .gfield[class*="input-type-email"] {
  margin-right: 16px !important;
}

/* =================================================================
   16. Responsive mobile
   ================================================================= */
@media only screen and (max-width: 768px) {
  /* Le bloc intermédiaire */
  html body #gform_wrapper_4 .gform_fields {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Le conteneur principal */
  html body #gform_wrapper_4 {
    width: 100% !important;
    margin: 20px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* Les inputs */
  html body #gform_wrapper_4 input:not([type='checkbox']),
  html body #gform_wrapper_4 textarea,
  html body #gform_wrapper_4 select {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
    min-width: 100% !important;
  }

  /* Gestion des checkbox */
  html body #gform_wrapper_4 .ginput_container_consent {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body #gform_wrapper_4 .gfield_html {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 0px;
  }

  /* Pagination mobile : boutons en colonne */
  html body #gform_wrapper_4 .gform_page_footer {
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body #gform_wrapper_4 .gform_next_button,
  html body #gform_wrapper_4 .gform_previous_button {
    width: 100% !important;
  }

  /* Bouton submit reste rouge en mobile (ne pas basculer en noir comme form #10) */
  html body #gform_wrapper_4 .gform_footer input[type='submit'] {
    margin-top: 0px !important;
  }
}


/* ============================================================================
   17. Spécificités form #4 : textarea Message
   ============================================================================ */

/* Textarea Message : hauteur compacte ~2× un input (= 84px), pas plus.
   L'utilisateur peut toujours agrandir via le coin resize. */
html body #gform_wrapper_4 textarea {
  min-height: 84px !important;
  height: 84px !important;
  resize: vertical !important;
  padding: 11px 13px !important;
  line-height: 1.5 !important;
}

/* ============================================================================
   Bouton submit : animation hover (élévation douce + shadow)
   ============================================================================ */

html body #gform_wrapper_4 .gform_footer input[type='submit'],
html body #gform_wrapper_4 .gform_page_footer input[type='submit'],
html body #gform_wrapper_4 .gform_next_button {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

html body #gform_wrapper_4 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_4 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_4 .gform_next_button:hover {
  background-color: #EA3834 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(233, 70, 66, 0.28) !important;
}

html body #gform_wrapper_4 .gform_footer input[type='submit']:active,
html body #gform_wrapper_4 .gform_page_footer input[type='submit']:active,
html body #gform_wrapper_4 .gform_next_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(233, 70, 66, 0.20) !important;
}

/* ============================================================================
   FIX FORCED : sublabel above + progress bar hidden
   ----------------------------------------------------------------------------
   GF Orbital ignore subLabelPlacement="above" sur certains rendus.
   On force visuellement via flex-direction: column-reverse sur les wrappers de
   sub-fields (.name_first, .name_last). Le DOM reste <input>+<label>, mais
   visuellement le label remonte au-dessus.
   ============================================================================ */

html body #gform_wrapper_4 .ginput_complex .name_first,
html body #gform_wrapper_4 .ginput_complex .name_last,
html body #gform_wrapper_4 .ginput_container_name > span,
html body #gform_wrapper_4 .ginput_container_name .gform-grid-col {
  display: flex !important;
  flex-direction: column !important;
}

/* Espace entre le label (qui est maintenant au-dessus) et l'input en-dessous */
html body #gform_wrapper_4 .ginput_complex .gform-field-label--type-sub {
  margin: 0 0 6px 0 !important;
  order: 0 !important;
}

/* Cacher la barre de progression GF (Étape 1 sur 2 / pourcentage) */
html body #gform_wrapper_4 .gf_progressbar_wrapper,
html body #gform_wrapper_4 .gf_progressbar,
html body #gform_wrapper_4 .gf_progressbar_title,
html body #gform_wrapper_4 .gform_page_steps,
html body #gform_wrapper_4 .gf_page_steps {
  display: none !important;
}

/* ============================================================================
   FIX FORCE v2 : sublabel above sur le bloc Name (Prénom/Nom)
   ----------------------------------------------------------------------------
   Le sélecteur précédent a manqué certaines variantes Orbital. On élargit
   pour couvrir tous les enfants directs des wrappers .ginput_container_name
   et .ginput_complex, peu importe leur tag (span, div).
   ============================================================================ */

html body #gform_wrapper_4 .ginput_complex,
html body #gform_wrapper_4 .ginput_complex.ginput_container,
html body #gform_wrapper_4 .ginput_container_name,
html body #gform_wrapper_4 .ginput_container_name.gform-grid-row {
  /* Le row reste flex-row pour avoir Prénom | Nom côte à côte */
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_4 .ginput_complex > span,
html body #gform_wrapper_4 .ginput_complex > div,
html body #gform_wrapper_4 .ginput_container_name > span,
html body #gform_wrapper_4 .ginput_container_name > div,
html body #gform_wrapper_4 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_4 .name_first,
html body #gform_wrapper_4 .name_last {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  width: 50% !important;
  min-width: 0 !important;
}

/* Le label sub (Prénom / Nom) se retrouve au-dessus avec margin-bottom */
html body #gform_wrapper_4 .ginput_complex .gform-field-label--type-sub,
html body #gform_wrapper_4 .ginput_complex label[for*="_first"],
html body #gform_wrapper_4 .ginput_complex label[for*="_last"],
html body #gform_wrapper_4 .ginput_container_name label {
  margin: 0 0 6px 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0c0c0c !important;
  font-family: inter !important;
  display: block !important;
}

/* ============================================================================
   FIX FINAL : DOM rend déjà label-puis-input (subLabelPlacement=above côté GF),
   donc on FORCE flex-direction: column (pas reverse). Annule l'ancien tweak
   column-reverse qui faisait l'inverse de ce qu'on voulait.
   ============================================================================ */

html body #gform_wrapper_4 .ginput_complex,
html body #gform_wrapper_4 .ginput_complex.ginput_container,
html body #gform_wrapper_4 .ginput_container_name,
html body #gform_wrapper_4 .ginput_container_name.gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_4 .ginput_complex > span,
html body #gform_wrapper_4 .ginput_complex > div,
html body #gform_wrapper_4 .ginput_container_name > span,
html body #gform_wrapper_4 .ginput_container_name > div,
html body #gform_wrapper_4 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_4 .name_first,
html body #gform_wrapper_4 .name_last {
  display: flex !important;
  flex-direction: column !important; /* pas column-reverse - le DOM est déjà bon */
  flex: 1 1 0 !important;
  width: 50% !important;
  min-width: 0 !important;
}