/* Gabarit ERP MDFL : page + formulaires 13 et 14. Genere par build_css.py (page-css.css + reprise a l'identique du CSS des deux widgets HTML Elementor, filtre sur les seuls formulaires 13 et 14). */

/* ============================================================================
   Page ERP MDFL (gabarit page-erp-mdfl.php) : mise en forme des blocs.
   DA de reference : la page ERP Elementor du 2026-08-11 (post 3473), reprise a l'identique.
   Charte : anthracite #22293A / #3E3E40, vert sauge #9DB299 (stabilo), beige #FAF6EF,
   filet #E5DCC8, periwinkle #7084D3 (picto des engagements, hors charte mais dans la DA reelle).
   Typo : Bricolage Grotesque (importee par header.php), JetBrains Mono pour les libelles de contact.
   Pas de pilule : boutons rectangulaires, stabilo rectangulaire.
   Tout est prefixe .me- et scope sous .mdfl-erp (le theme pose ses propres regles sur p, h1-h3, a).
   ============================================================================ */

.mdfl-erp {
  font-family: "Bricolage Grotesque", sans-serif;
  color: #3E3E40;
  -webkit-font-smoothing: antialiased;
}
.mdfl-erp *,
.mdfl-erp *::before,
.mdfl-erp *::after {
  box-sizing: border-box;
}
.mdfl-erp [hidden] { display: none !important; }

/* --- Sections ---------------------------------------------------------- */
.mdfl-erp .me-s {
  padding: 110px 32px;
  scroll-margin-top: 100px;
}
.mdfl-erp .me-in {
  max-width: 1140px;
  margin: 0 auto;
}
.mdfl-erp .me-hero,
.mdfl-erp .me-solutions,
.mdfl-erp .me-etapes { background: #FFFFFF; }
.mdfl-erp .me-engagements,
.mdfl-erp .me-formulaire,
.mdfl-erp .me-faq { background: #FAF6EF; }
.mdfl-erp .me-contact { background: #FFFFFF; }
.mdfl-erp .me-hero,
.mdfl-erp .me-engagements,
.mdfl-erp .me-solutions,
.mdfl-erp .me-etapes,
.mdfl-erp .me-faq { border-bottom: 1px solid #E5DCC8; }
.mdfl-erp .me-hero { padding-top: 100px; padding-bottom: 100px; }
.mdfl-erp .me-formulaire { padding: 80px 24px; }

/* Sections a pile verticale : 20px entre le titre et ce qui suit (espacement par defaut des conteneurs d'origine). */
.mdfl-erp .me-engagements .me-in,
.mdfl-erp .me-formulaire .me-in,
.mdfl-erp .me-etapes .me-in,
.mdfl-erp .me-faq .me-in {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Titres, stabilo --------------------------------------------------- */
.mdfl-erp .me-h1,
.mdfl-erp .me-h2,
.mdfl-erp .me-h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  text-transform: none;
  margin: 0;
  padding: 0;
}
.mdfl-erp .me-h1 {
  font-size: 64px;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #22293A;
}
.mdfl-erp .me-h2 {
  font-size: 44px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #22293A;
  max-width: 935px;
  margin: 0 0 70px;
}
.mdfl-erp .me-h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #22293A;
}
.mdfl-erp .me-h1 em,
.mdfl-erp .me-h2 em {
  font-style: normal;
  font-weight: inherit;
  background: #9DB299;
  color: #22293A;
  padding: 0 6px;
}
.mdfl-erp .me-h1 em { padding: 0 8px; }

/* --- Boutons : rectangulaires, jamais de pilule ------------------------- */
.mdfl-erp .me-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.mdfl-erp .me-btn,
.mdfl-erp .me-btn:visited {
  display: inline-block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}
.mdfl-erp .me-btn--plein,
.mdfl-erp .me-btn--plein:visited {
  background: #000000;
  color: #FAF6EF;
  border: 0;
  padding: 13px 22px;
}
.mdfl-erp .me-btn--plein:hover,
.mdfl-erp .me-btn--plein:focus {
  color: #FAF6EF;
  text-decoration: none;
  transform: translateY(-8px);
}
.mdfl-erp .me-btn--contour,
.mdfl-erp .me-btn--contour:visited {
  background: transparent;
  color: #22293A;
  border: 1px solid #22293A;
}
.mdfl-erp .me-btn--contour:hover,
.mdfl-erp .me-btn--contour:focus {
  color: #22293A;
  text-decoration: none;
}
.mdfl-erp .me-btn:focus-visible { outline: 2px solid #22293A; outline-offset: 3px; }

/* --- Textes ------------------------------------------------------------- */
.mdfl-erp .me-txt p {
  font-family: "Bricolage Grotesque", sans-serif;
  margin: 0;
  padding: 0;
  text-transform: none;
}
.mdfl-erp .me-txt--hero p { font-size: 16px; line-height: 1.6; color: #3E3E40; margin-bottom: 28px; }
.mdfl-erp .me-txt--carte p { font-size: 14px; line-height: 1.55; color: #3E3E40; }
.mdfl-erp .me-txt--clair p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.mdfl-erp .me-txt--centre { width: 50%; margin: 0 auto 26px; }
.mdfl-erp .me-txt--centre p { font-size: 15px; line-height: 1.6; color: #6E6E72; text-align: center; }
.mdfl-erp .me-txt--etape p { font-size: 14.5px; line-height: 1.55; color: #3E3E40; }
.mdfl-erp .me-txt--faq p { font-size: 15.5px; line-height: 1.7; color: #3E3E40; }
.mdfl-erp .me-txt--carte-contact p { font-size: 15.5px; line-height: 1.6; color: #3E3E40; max-width: 380px; margin-bottom: 12px; }
.mdfl-erp .me-txt--carte-contact p:last-child { margin-bottom: 24px; }

/* --- Introduction ------------------------------------------------------- */
.mdfl-erp .me-hero__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  padding: 10px;
}
.mdfl-erp .me-hero__titre { padding: 10px; }
.mdfl-erp .me-hero__txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid #E5DCC8;
  padding: 0 0 0 24px;
}
.mdfl-erp .me-hero__img {
  position: relative;
  min-height: 560px;
  margin-top: 80px;
  overflow: hidden;
}
.mdfl-erp .me-hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* --- Engagements -------------------------------------------------------- */
.mdfl-erp .me-cartes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  padding: 10px;
}
.mdfl-erp .me-carte {
  padding-top: 24px;
  border-top: 1px solid #E5DCC8;
}
.mdfl-erp .me-ico {
  display: block;
  width: 32px;
  height: 32px;
  color: #7084D3;
  margin-bottom: 18px;
}
.mdfl-erp .me-ico svg { display: block; width: 26px; height: 26px; flex: 0 0 auto; }
.mdfl-erp .me-carte .me-h3 { margin-bottom: 8px; }

/* --- Solutions (panneau vert) ------------------------------------------- */
.mdfl-erp .me-panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 60px;
  background: #9DB299;
  border-radius: 24px;
  overflow: hidden;
}
.mdfl-erp .me-panneau__txt { min-width: 0; padding: 10px; }
.mdfl-erp .me-panneau__img {
  min-width: 0;
  min-height: 440px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.mdfl-erp .me-panneau__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mdfl-erp .me-h2--clair {
  font-size: 42px;
  color: #FFFFFF;
  margin-bottom: 36px;
}
.mdfl-erp .me-h2--clair em { background: #FFFFFF; color: #9DB299; padding: 0 8px; }
.mdfl-erp .me-rubs { display: flex; flex-direction: column; gap: 24px; padding: 10px; }
.mdfl-erp .me-rub { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.mdfl-erp .me-h3--clair { font-size: 17px; letter-spacing: 0.005em; color: #FFFFFF; margin-bottom: 6px; }

/* --- Formulaire (simulateur) -------------------------------------------- */
.mdfl-erp .me-h2--centre {
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: none;
  margin: 0 0 8px;
}
.mdfl-erp .me-gf--13 { width: 60%; margin: 40px auto 0; } /* 40px = les deux widgets HTML (style, script) de la page d'origine, qui prenaient chacun un cran d'espacement */
/* Champ piege a robots de Gravity Forms : doit rester invisible. Sur la page Elementor il s'affichait (libelle
   « LinkedIn » / « Name » et sa description) parce que le CSS de base de Gravity Forms n'est pas charge sur ce site. */
html body #gform_wrapper_13 .gform_fields > .gfield.gform_validation_container,
html body #gform_wrapper_14 .gform_fields > .gfield.gform_validation_container { display: none !important; }

/* --- Etapes ------------------------------------------------------------- */
.mdfl-erp .me-etapes .me-h2 { max-width: 720px; }
.mdfl-erp .me-etapes__rang {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.mdfl-erp .me-etape { padding: 10px; }
.mdfl-erp .me-etape__num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 88px;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: #D9D2BD;
  margin: 0 0 -20px;
}
.mdfl-erp .me-h3--etape { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.mdfl-erp .me-etapes__bt { margin-left: 10px; }

/* --- FAQ ---------------------------------------------------------------- */
.mdfl-erp .me-faq .me-h2 { max-width: 720px; margin-bottom: 50px; }
.mdfl-erp .me-faq__liste { max-width: 1100px; margin: 0 auto; }
.mdfl-erp .me-faq__item { border-top: 1px solid #E5DCC8; }
.mdfl-erp .me-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}
.mdfl-erp .me-faq__item summary::-webkit-details-marker { display: none; }
.mdfl-erp .me-faq__item summary:focus-visible { outline: 2px solid #22293A; outline-offset: -2px; }
.mdfl-erp .me-faq__q {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #52504F;
  margin: 0;
  padding: 0;
}
.mdfl-erp .me-faq__ico {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #1F2124;
  margin-right: 2px;
}
.mdfl-erp .me-faq__item[open] .me-faq__ico {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #1F2124;
  border-bottom: 0;
}
.mdfl-erp .me-faq__rep {
  padding: 10px 10px 16px;
  border: 1px solid #D5D8DC;
}

/* --- Contact ------------------------------------------------------------ */
.mdfl-erp .me-contact__rang {
  display: grid;
  grid-template-columns: minmax(0, 563fr) minmax(0, 513fr);
  align-items: stretch;
  gap: 28px 32px;
  padding-left: 32px; /* cran laisse par le widget HTML (style) qui ouvrait la rangee d'origine */
}
.mdfl-erp .me-contact__carte {
  min-width: 0;
  padding: 48px 44px;
  background: #FAF6EF;
  border: 1px solid #E5DCC8;
  border-radius: 24px;
}
.mdfl-erp .me-contact__rang > .me-gf { min-width: 0; }
.mdfl-erp .me-h2--carte {
  font-size: 40px;
  font-weight: 500;
  color: #000000;
  max-width: 360px;
  margin: 0 0 18px;
}
.mdfl-erp .me-h2--carte em { color: #000000; padding: 0 8px; }
.mdfl-erp .me-coord {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 10px 0;
}
.mdfl-erp .me-coord:first-child { border-top: 1px solid #E5DCC8; }
.mdfl-erp .me-coord__lib {
  flex: 0 0 100px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #000000;
}
.mdfl-erp .me-coord__val {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #22293A;
}

/* --- Tablette ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mdfl-erp .me-cartes,
  .mdfl-erp .me-etapes__rang { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .mdfl-erp .me-s { padding: 70px 20px; }
  .mdfl-erp .me-hero { padding-top: 60px; padding-bottom: 60px; }
  .mdfl-erp .me-formulaire { padding: 60px 20px; }
  .mdfl-erp .me-h1 { font-size: 40px; }
  .mdfl-erp .me-h2 { font-size: 30px; }
  .mdfl-erp .me-h2--clair,
  .mdfl-erp .me-h2--centre { font-size: 28px; }
  .mdfl-erp .me-hero__row { grid-template-columns: 1fr; gap: 40px; }
  .mdfl-erp .me-hero__img { min-height: 380px; }
  .mdfl-erp .me-hero__img img { object-position: right center; }
  .mdfl-erp .me-cartes { grid-template-columns: 1fr; padding: 0; }
  .mdfl-erp .me-engagements .me-h2 { margin-bottom: 0; }
  .mdfl-erp .me-panneau { grid-template-columns: minmax(0, 1fr); padding: 40px 28px; }
  .mdfl-erp .me-panneau__img { display: none; }
  .mdfl-erp .me-txt--centre { width: 100%; }
  .mdfl-erp .me-gf--13 { width: 100%; }
  .mdfl-erp .me-etapes__rang { grid-template-columns: 1fr; gap: 20px; }
  .mdfl-erp .me-etape__num { font-size: 56px; margin-bottom: -15px; }
  .mdfl-erp .me-faq__liste { max-width: none; }
  .mdfl-erp .me-contact__rang { grid-template-columns: minmax(0, 1fr); padding: 28px 0 0; }
  .mdfl-erp .me-h2--carte { font-size: 30px; }
}

/* ============================================================================
   Formulaire 13 (simulateur ERP), reprise a l'identique du CSS Elementor
   ============================================================================ */
/* ============================================================================
   Form #13 - Maisons d'en Flandre / Simulation pré-qualification ERP
   ----------------------------------------------------------------------------
   Scope strict : #gform_wrapper_13 (cible uniquement ce form précis)
   Marque : Maisons d'en Flandre - palette pervenche #7084D3 + noir #000 + texte #333
   Police : Inter 400/700
   Form paginé (2 pages, saut de page entre projet et identité+consentements).
   ============================================================================ */



/* 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_13 {
  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_13 .gfield {
  padding: 0px !important;
}

/* 3. Labels principaux (match HTML d'origine : 12.5px, 600 weight, INK #0c0c0c) */
html body #gform_wrapper_13 .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_13 .gfield_required {
  color: #7084D3 !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_13 .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_13 input[type='text'],
html body #gform_wrapper_13 input[type='email'],
html body #gform_wrapper_13 input[type='tel'],
html body #gform_wrapper_13 input[type='number'],
html body #gform_wrapper_13 textarea,
html body #gform_wrapper_13 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_13 input:focus,
html body #gform_wrapper_13 select:focus,
html body #gform_wrapper_13 textarea:focus {
  border-color: #7084D3 !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 211, 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_13 input,
html body #gform_wrapper_13 textarea,
html body #gform_wrapper_13 select,
html body #gform_wrapper_13 .gfield,
html body #gform_wrapper_13 .gfield *,
html body #gform_wrapper_13 .gfield_visibility_visible,
html body #gform_wrapper_13 .gfield_visibility_visible *,
html body #gform_wrapper_13 fieldset,
html body #gform_wrapper_13 .ginput_container,
html body #gform_wrapper_13 .ginput_container * {
  pointer-events: auto !important;
}

html body #gform_wrapper_13 input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
html body #gform_wrapper_13 textarea,
html body #gform_wrapper_13 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_13 .gform-grid-row {
  display: flex !important;
  gap: 15px !important;
}

/* 8. Section consentement (checkboxes + texte) */
html body #gform_wrapper_13 .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_13 .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_13 .ginput_container_consent input[type='checkbox']:focus,
html body #gform_wrapper_13 .ginput_container_consent input[type='checkbox']:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 211, 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_13 .ginput_container_consent input[type='checkbox']:checked {
  background-color: #7084D3 !important;
  border-color: #7084D3 !important;
}

html body #gform_wrapper_13 .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_13 .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_13 .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_13 .gform_footer,
html body #gform_wrapper_13 .gform_page_footer {
  padding: 0px !important;
}

html body #gform_wrapper_13 .gform_footer input[type='submit'],
html body #gform_wrapper_13 .gform_page_footer input[type='submit'],
html body #gform_wrapper_13 .gform_button[type='submit'],
html body #gform_wrapper_13 input.gform_button {
  background-color: #9DB299 !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_13 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_13 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_13 .gform_button[type='submit']:hover,
html body #gform_wrapper_13 input.gform_button:hover {
  background-color: #3F4F8F !important;
}

/* Pas d'outline navigateur sur les boutons au focus / click */
html body #gform_wrapper_13 .gform_footer input[type='submit']:focus,
html body #gform_wrapper_13 .gform_footer input[type='submit']:focus-visible,
html body #gform_wrapper_13 .gform_page_footer input[type='submit']:focus,
html body #gform_wrapper_13 .gform_page_footer input[type='submit']:focus-visible,
html body #gform_wrapper_13 .gform_button:focus,
html body #gform_wrapper_13 .gform_button:focus-visible,
html body #gform_wrapper_13 .gform_next_button:focus,
html body #gform_wrapper_13 .gform_next_button:focus-visible,
html body #gform_wrapper_13 .gform_previous_button:focus,
html body #gform_wrapper_13 .gform_previous_button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 211, 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_13 .gform_page_footer input[type='submit'] {
  width: auto !important;
  flex: 1 1 0 !important;
  margin-top: 0 !important;
}
html body #gform_wrapper_13 .gform_page_footer .gform_previous_button {
  flex: 1 1 0 !important;
}
html body #gform_wrapper_13 .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_13 .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_13 .gform_next_button,
html body #gform_wrapper_13 .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_13 .gform_next_button {
  background-color: #9DB299 !important;
  color: #ffffff !important;
  border: none !important;
  flex: 1 !important;
}
html body #gform_wrapper_13 .gform_next_button:hover {
  background-color: #3F4F8F !important;
}

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

/* 9ter. Barre de progression (si activée dans les paramètres du form GF) */
html body #gform_wrapper_13 .gf_progressbar_wrapper {
  margin-bottom: 24px !important;
}
html body #gform_wrapper_13 .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_13 .gf_progressbar {
  background-color: #f6f4f3 !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden !important;
}
html body #gform_wrapper_13 .gf_progressbar_percentage {
  background-color: #7084D3 !important;
  height: 100% !important;
  transition: width 0.3s ease !important;
}

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

/* 11. Texte du bloc HTML (mentions légales bas de page) */
html body #gform_wrapper_13 .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_13 .gform-body,
html body #gform_wrapper_13 .gform_fields {
  display: block !important;
  width: 100% !important;
  font-size: 0 !important; /* annule le whitespace entre inline-block */
}

html body #gform_wrapper_13 .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_13 .gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
  width: 100% !important;
}

html body #gform_wrapper_13 .gform-grid-row > .gfield,
html body #gform_wrapper_13 .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_13 .gfield > label,
html body #gform_wrapper_13 .gfield label,
html body #gform_wrapper_13 .gfield_label,
html body #gform_wrapper_13 .gform-field-label,
html body #gform_wrapper_13 .gform-field-label--type-sub,
html body #gform_wrapper_13 .gfield_consent_label,
html body #gform_wrapper_13 .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_13 .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_13 .gfield--floating-label,
html body #gform_wrapper_13 .gfield .gform-field-label--floating,
html body #gform_wrapper_13 .gfield .gform-field-label--float {
  position: static !important;
  transform: none !important;
}

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

/* 14. Espace pour les checkboxes (consentement) */
html body #gform_wrapper_13 .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_13 .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_13 .gfield--type-name > .gfield_label {
  display: none !important;
}

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

html body #gform_wrapper_13 .ginput_complex.ginput_container_name .name_first,
html body #gform_wrapper_13 .ginput_complex.ginput_container_name .name_last,
html body #gform_wrapper_13 .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_13 .ginput_complex .gform-field-label,
html body #gform_wrapper_13 .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_13 .gfield--type-email,
html body #gform_wrapper_13 .gfield--type-phone,
html body #gform_wrapper_13 .gfield[class*="--type-email"],
html body #gform_wrapper_13 .gfield[class*="--type-phone"],
html body #gform_wrapper_13 .gfield[class*="input-type-email"],
html body #gform_wrapper_13 .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_13 .gfield--type-email,
html body #gform_wrapper_13 .gfield[class*="--type-email"],
html body #gform_wrapper_13 .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_13 .gform_fields {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

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

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

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

  html body #gform_wrapper_13 .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_13 .gform_page_footer {
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body #gform_wrapper_13 .gform_next_button,
  html body #gform_wrapper_13 .gform_previous_button {
    width: 100% !important;
  }

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

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

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

html body #gform_wrapper_13 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_13 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_13 .gform_next_button:hover {
  background-color: #3F4F8F !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(112, 132, 211, 0.28) !important;
}

html body #gform_wrapper_13 .gform_footer input[type='submit']:active,
html body #gform_wrapper_13 .gform_page_footer input[type='submit']:active,
html body #gform_wrapper_13 .gform_next_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(112, 132, 211, 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_13 .ginput_complex .name_first,
html body #gform_wrapper_13 .ginput_complex .name_last,
html body #gform_wrapper_13 .ginput_container_name > span,
html body #gform_wrapper_13 .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_13 .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_13 .gf_progressbar_wrapper,
html body #gform_wrapper_13 .gf_progressbar,
html body #gform_wrapper_13 .gf_progressbar_title,
html body #gform_wrapper_13 .gform_page_steps,
html body #gform_wrapper_13 .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_13 .ginput_complex,
html body #gform_wrapper_13 .ginput_complex.ginput_container,
html body #gform_wrapper_13 .ginput_container_name,
html body #gform_wrapper_13 .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_13 .ginput_complex > span,
html body #gform_wrapper_13 .ginput_complex > div,
html body #gform_wrapper_13 .ginput_container_name > span,
html body #gform_wrapper_13 .ginput_container_name > div,
html body #gform_wrapper_13 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_13 .name_first,
html body #gform_wrapper_13 .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_13 .ginput_complex .gform-field-label--type-sub,
html body #gform_wrapper_13 .ginput_complex label[for*="_first"],
html body #gform_wrapper_13 .ginput_complex label[for*="_last"],
html body #gform_wrapper_13 .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_13 .ginput_complex,
html body #gform_wrapper_13 .ginput_complex.ginput_container,
html body #gform_wrapper_13 .ginput_container_name,
html body #gform_wrapper_13 .ginput_container_name.gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_13 .ginput_complex > span,
html body #gform_wrapper_13 .ginput_complex > div,
html body #gform_wrapper_13 .ginput_container_name > span,
html body #gform_wrapper_13 .ginput_container_name > div,
html body #gform_wrapper_13 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_13 .name_first,
html body #gform_wrapper_13 .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 d'en Flandre / Contact
   ----------------------------------------------------------------------------
   Marque : Maisons d'en Flandre - palette pervenche #7084D3 + noir #000 + texte #333
   Police : Inter 400/700
   Form non paginé : champs en une seule page. Adapté au form #3 mais en plus simple.
   ============================================================================ */



/* 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 */

/* 2. Reset padding sur les champs */

/* 3. Labels principaux (match HTML d'origine : 12.5px, 600 weight, INK #0c0c0c) */

/* 4. Astérisque "requis" */

/* 5. Sous-labels (Prénom, Nom dans un bloc Name) - même taille que les labels principaux */

/* 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. */


/* S'assurer que tous les inputs/textarea/select restent interactifs (résidus
   pointer-events:none, cursor not-allowed, user-select:none, etc. à override). */


/* 7. Grille (gap entre champs côte à côte) */

/* 8. Section consentement (checkboxes + texte) */

/* La case à cocher (carré custom) */


/* É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. */



/* 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 */

/* 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. */



/* Pas d'outline navigateur sur les boutons au focus / click */

/* 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. */

/* 9bis. Boutons de pagination (Suivant / Précédent entre les pages) */


/* Bouton "Suivant" (rouge plein, full width) */

/* Bouton "Précédent" (outline rouge, plus petit) */

/* 9ter. Barre de progression (si activée dans les paramètres du form GF) */

/* 10. Liens dans le texte HTML */

/* 11. Texte du bloc HTML (mentions légales bas de page) */

/* 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. */


/* 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. */


/* 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. */

/* Cas spécifique du consent label : reste à côté de la checkbox, pas en bloc */

/* Désactiver les modes floating de GF si le form est configuré comme tel */

/* 13. Espace pour les champs de texte */

/* 14. Espace pour les checkboxes (consentement) */

/* 15. Séparation entre dernier champ et première checkbox */

/* 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 */



/* Sous-labels Prénom/Nom : style identique aux labels principaux (12.5px) */

/* 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). */


/* =================================================================
   16. Responsive mobile
   ================================================================= */


/* ============================================================================
   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. */

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




/* ============================================================================
   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.
   ============================================================================ */


/* Espace entre le label (qui est maintenant au-dessus) et l'input en-dessous */

/* Cacher la barre de progression GF (Étape 1 sur 2 / pourcentage) */

/* ============================================================================
   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).
   ============================================================================ */



/* Le label sub (Prénom / Nom) se retrouve au-dessus avec margin-bottom */

/* ============================================================================
   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.
   ============================================================================ */




/* ============================================================================
   Override messages d'erreur Gravity Forms - palette MDFL
   ============================================================================ */
#gform_wrapper_13 .gform_validation_errors,
.gform_wrapper#gform_wrapper_13 .gform_validation_errors {
  background-color: #FFF6F6 !important;
  border: 1px solid #E21317 !important;
  color: #B31114 !important;
  border-radius: 8px !important;
}
#gform_wrapper_13 .gform_validation_errors h2,
#gform_wrapper_13 .gform_validation_errors .gform-icon {
  color: #B31114 !important;
}
#gform_wrapper_13 .gfield_validation_message,
#gform_wrapper_13 .validation_message {
  background-color: #FFF6F6 !important;
  border: 1px solid #E21317 !important;
  color: #B31114 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-top: 6px !important;
}
#gform_wrapper_13 .gfield_required,
#gform_wrapper_13 .gfield_required_text {
  color: #7084D3 !important;
}
#gform_wrapper_13 .gfield_error input,
#gform_wrapper_13 .gfield_error select,
#gform_wrapper_13 .gfield_error textarea {
  border-color: #E21317 !important;
  box-shadow: 0 0 0 3px rgba(226, 19, 23, 0.12) !important;
}

/* ============================================================================
   Formulaire 14 (contact ERP), reprise a l'identique du CSS Elementor
   ============================================================================ */
/* ============================================================================
   Form #14 - Maisons d'en Flandre / Contact ERP
   ----------------------------------------------------------------------------
   Scope strict : #gform_wrapper_14 (cible uniquement ce form précis)
   Marque : Maisons d'en Flandre - palette pervenche #7084D3 + noir #000 + texte #333
   Police : Inter 400/700
   Form paginé (2 pages, saut de page entre projet et identité+consentements).
   ============================================================================ */



/* 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_14 {
  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_14 .gfield {
  padding: 0px !important;
}

/* 3. Labels principaux (match HTML d'origine : 12.5px, 600 weight, INK #0c0c0c) */
html body #gform_wrapper_14 .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_14 .gfield_required {
  color: #7084D3 !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_14 .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_14 input[type='text'],
html body #gform_wrapper_14 input[type='email'],
html body #gform_wrapper_14 input[type='tel'],
html body #gform_wrapper_14 input[type='number'],
html body #gform_wrapper_14 textarea,
html body #gform_wrapper_14 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_14 input:focus,
html body #gform_wrapper_14 select:focus,
html body #gform_wrapper_14 textarea:focus {
  border-color: #7084D3 !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 211, 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_14 input,
html body #gform_wrapper_14 textarea,
html body #gform_wrapper_14 select,
html body #gform_wrapper_14 .gfield,
html body #gform_wrapper_14 .gfield *,
html body #gform_wrapper_14 .gfield_visibility_visible,
html body #gform_wrapper_14 .gfield_visibility_visible *,
html body #gform_wrapper_14 fieldset,
html body #gform_wrapper_14 .ginput_container,
html body #gform_wrapper_14 .ginput_container * {
  pointer-events: auto !important;
}

html body #gform_wrapper_14 input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
html body #gform_wrapper_14 textarea,
html body #gform_wrapper_14 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_14 .gform-grid-row {
  display: flex !important;
  gap: 15px !important;
}

/* 8. Section consentement (checkboxes + texte) */
html body #gform_wrapper_14 .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_14 .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_14 .ginput_container_consent input[type='checkbox']:focus,
html body #gform_wrapper_14 .ginput_container_consent input[type='checkbox']:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 211, 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_14 .ginput_container_consent input[type='checkbox']:checked {
  background-color: #7084D3 !important;
  border-color: #7084D3 !important;
}

html body #gform_wrapper_14 .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_14 .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_14 .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_14 .gform_footer,
html body #gform_wrapper_14 .gform_page_footer {
  padding: 0px !important;
}

html body #gform_wrapper_14 .gform_footer input[type='submit'],
html body #gform_wrapper_14 .gform_page_footer input[type='submit'],
html body #gform_wrapper_14 .gform_button[type='submit'],
html body #gform_wrapper_14 input.gform_button {
  background-color: #7084D3 !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_14 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_14 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_14 .gform_button[type='submit']:hover,
html body #gform_wrapper_14 input.gform_button:hover {
  background-color: #3F4F8F !important;
}

/* Pas d'outline navigateur sur les boutons au focus / click */
html body #gform_wrapper_14 .gform_footer input[type='submit']:focus,
html body #gform_wrapper_14 .gform_footer input[type='submit']:focus-visible,
html body #gform_wrapper_14 .gform_page_footer input[type='submit']:focus,
html body #gform_wrapper_14 .gform_page_footer input[type='submit']:focus-visible,
html body #gform_wrapper_14 .gform_button:focus,
html body #gform_wrapper_14 .gform_button:focus-visible,
html body #gform_wrapper_14 .gform_next_button:focus,
html body #gform_wrapper_14 .gform_next_button:focus-visible,
html body #gform_wrapper_14 .gform_previous_button:focus,
html body #gform_wrapper_14 .gform_previous_button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 211, 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_14 .gform_page_footer input[type='submit'] {
  width: auto !important;
  flex: 1 1 0 !important;
  margin-top: 0 !important;
}
html body #gform_wrapper_14 .gform_page_footer .gform_previous_button {
  flex: 1 1 0 !important;
}
html body #gform_wrapper_14 .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_14 .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_14 .gform_next_button,
html body #gform_wrapper_14 .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_14 .gform_next_button {
  background-color: #7084D3 !important;
  color: #ffffff !important;
  border: none !important;
  flex: 1 !important;
}
html body #gform_wrapper_14 .gform_next_button:hover {
  background-color: #3F4F8F !important;
}

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

/* 9ter. Barre de progression (si activée dans les paramètres du form GF) */
html body #gform_wrapper_14 .gf_progressbar_wrapper {
  margin-bottom: 24px !important;
}
html body #gform_wrapper_14 .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_14 .gf_progressbar {
  background-color: #f6f4f3 !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden !important;
}
html body #gform_wrapper_14 .gf_progressbar_percentage {
  background-color: #7084D3 !important;
  height: 100% !important;
  transition: width 0.3s ease !important;
}

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

/* 11. Texte du bloc HTML (mentions légales bas de page) */
html body #gform_wrapper_14 .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_14 .gform-body,
html body #gform_wrapper_14 .gform_fields {
  display: block !important;
  width: 100% !important;
  font-size: 0 !important; /* annule le whitespace entre inline-block */
}

html body #gform_wrapper_14 .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_14 .gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
  width: 100% !important;
}

html body #gform_wrapper_14 .gform-grid-row > .gfield,
html body #gform_wrapper_14 .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_14 .gfield > label,
html body #gform_wrapper_14 .gfield label,
html body #gform_wrapper_14 .gfield_label,
html body #gform_wrapper_14 .gform-field-label,
html body #gform_wrapper_14 .gform-field-label--type-sub,
html body #gform_wrapper_14 .gfield_consent_label,
html body #gform_wrapper_14 .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_14 .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_14 .gfield--floating-label,
html body #gform_wrapper_14 .gfield .gform-field-label--floating,
html body #gform_wrapper_14 .gfield .gform-field-label--float {
  position: static !important;
  transform: none !important;
}

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

/* 14. Espace pour les checkboxes (consentement) */
html body #gform_wrapper_14 .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_14 .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_14 .gfield--type-name > .gfield_label {
  display: none !important;
}

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

html body #gform_wrapper_14 .ginput_complex.ginput_container_name .name_first,
html body #gform_wrapper_14 .ginput_complex.ginput_container_name .name_last,
html body #gform_wrapper_14 .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_14 .ginput_complex .gform-field-label,
html body #gform_wrapper_14 .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_14 .gfield--type-email,
html body #gform_wrapper_14 .gfield--type-phone,
html body #gform_wrapper_14 .gfield[class*="--type-email"],
html body #gform_wrapper_14 .gfield[class*="--type-phone"],
html body #gform_wrapper_14 .gfield[class*="input-type-email"],
html body #gform_wrapper_14 .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_14 .gfield--type-email,
html body #gform_wrapper_14 .gfield[class*="--type-email"],
html body #gform_wrapper_14 .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_14 .gform_fields {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

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

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

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

  html body #gform_wrapper_14 .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_14 .gform_page_footer {
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body #gform_wrapper_14 .gform_next_button,
  html body #gform_wrapper_14 .gform_previous_button {
    width: 100% !important;
  }

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

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

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

html body #gform_wrapper_14 .gform_footer input[type='submit']:hover,
html body #gform_wrapper_14 .gform_page_footer input[type='submit']:hover,
html body #gform_wrapper_14 .gform_next_button:hover {
  background-color: #3F4F8F !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(112, 132, 211, 0.28) !important;
}

html body #gform_wrapper_14 .gform_footer input[type='submit']:active,
html body #gform_wrapper_14 .gform_page_footer input[type='submit']:active,
html body #gform_wrapper_14 .gform_next_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(112, 132, 211, 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_14 .ginput_complex .name_first,
html body #gform_wrapper_14 .ginput_complex .name_last,
html body #gform_wrapper_14 .ginput_container_name > span,
html body #gform_wrapper_14 .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_14 .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_14 .gf_progressbar_wrapper,
html body #gform_wrapper_14 .gf_progressbar,
html body #gform_wrapper_14 .gf_progressbar_title,
html body #gform_wrapper_14 .gform_page_steps,
html body #gform_wrapper_14 .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_14 .ginput_complex,
html body #gform_wrapper_14 .ginput_complex.ginput_container,
html body #gform_wrapper_14 .ginput_container_name,
html body #gform_wrapper_14 .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_14 .ginput_complex > span,
html body #gform_wrapper_14 .ginput_complex > div,
html body #gform_wrapper_14 .ginput_container_name > span,
html body #gform_wrapper_14 .ginput_container_name > div,
html body #gform_wrapper_14 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_14 .name_first,
html body #gform_wrapper_14 .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_14 .ginput_complex .gform-field-label--type-sub,
html body #gform_wrapper_14 .ginput_complex label[for*="_first"],
html body #gform_wrapper_14 .ginput_complex label[for*="_last"],
html body #gform_wrapper_14 .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_14 .ginput_complex,
html body #gform_wrapper_14 .ginput_complex.ginput_container,
html body #gform_wrapper_14 .ginput_container_name,
html body #gform_wrapper_14 .ginput_container_name.gform-grid-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
}

html body #gform_wrapper_14 .ginput_complex > span,
html body #gform_wrapper_14 .ginput_complex > div,
html body #gform_wrapper_14 .ginput_container_name > span,
html body #gform_wrapper_14 .ginput_container_name > div,
html body #gform_wrapper_14 .gform-grid-row > .gform-grid-col,
html body #gform_wrapper_14 .name_first,
html body #gform_wrapper_14 .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 d'en Flandre / Contact
   ----------------------------------------------------------------------------
   Marque : Maisons d'en Flandre - palette pervenche #7084D3 + noir #000 + texte #333
   Police : Inter 400/700
   Form non paginé : champs en une seule page. Adapté au form #3 mais en plus simple.
   ============================================================================ */



/* 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 */

/* 2. Reset padding sur les champs */

/* 3. Labels principaux (match HTML d'origine : 12.5px, 600 weight, INK #0c0c0c) */

/* 4. Astérisque "requis" */

/* 5. Sous-labels (Prénom, Nom dans un bloc Name) - même taille que les labels principaux */

/* 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. */


/* S'assurer que tous les inputs/textarea/select restent interactifs (résidus
   pointer-events:none, cursor not-allowed, user-select:none, etc. à override). */


/* 7. Grille (gap entre champs côte à côte) */

/* 8. Section consentement (checkboxes + texte) */

/* La case à cocher (carré custom) */


/* É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. */



/* 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 */

/* 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. */



/* Pas d'outline navigateur sur les boutons au focus / click */

/* 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. */

/* 9bis. Boutons de pagination (Suivant / Précédent entre les pages) */


/* Bouton "Suivant" (rouge plein, full width) */

/* Bouton "Précédent" (outline rouge, plus petit) */

/* 9ter. Barre de progression (si activée dans les paramètres du form GF) */

/* 10. Liens dans le texte HTML */

/* 11. Texte du bloc HTML (mentions légales bas de page) */

/* 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. */


/* 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. */


/* 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. */

/* Cas spécifique du consent label : reste à côté de la checkbox, pas en bloc */

/* Désactiver les modes floating de GF si le form est configuré comme tel */

/* 13. Espace pour les champs de texte */

/* 14. Espace pour les checkboxes (consentement) */

/* 15. Séparation entre dernier champ et première checkbox */

/* 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 */



/* Sous-labels Prénom/Nom : style identique aux labels principaux (12.5px) */

/* 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). */


/* =================================================================
   16. Responsive mobile
   ================================================================= */


/* ============================================================================
   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. */

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




/* ============================================================================
   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.
   ============================================================================ */


/* Espace entre le label (qui est maintenant au-dessus) et l'input en-dessous */

/* Cacher la barre de progression GF (Étape 1 sur 2 / pourcentage) */

/* ============================================================================
   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).
   ============================================================================ */



/* Le label sub (Prénom / Nom) se retrouve au-dessus avec margin-bottom */

/* ============================================================================
   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.
   ============================================================================ */




/* ============================================================================
   Override messages d'erreur Gravity Forms - palette MDFL
   ============================================================================ */
#gform_wrapper_14 .gform_validation_errors,
.gform_wrapper#gform_wrapper_14 .gform_validation_errors {
  background-color: #FFF6F6 !important;
  border: 1px solid #E21317 !important;
  color: #B31114 !important;
  border-radius: 8px !important;
}
#gform_wrapper_14 .gform_validation_errors h2,
#gform_wrapper_14 .gform_validation_errors .gform-icon {
  color: #B31114 !important;
}
#gform_wrapper_14 .gfield_validation_message,
#gform_wrapper_14 .validation_message {
  background-color: #FFF6F6 !important;
  border: 1px solid #E21317 !important;
  color: #B31114 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-top: 6px !important;
}
#gform_wrapper_14 .gfield_required,
#gform_wrapper_14 .gfield_required_text {
  color: #7084D3 !important;
}
#gform_wrapper_14 .gfield_error input,
#gform_wrapper_14 .gfield_error select,
#gform_wrapper_14 .gfield_error textarea {
  border-color: #E21317 !important;
  box-shadow: 0 0 0 3px rgba(226, 19, 23, 0.12) !important;
}