/* ==========================================================================
   Gravity Forms
   CSS Class Name: "bmd-gf" or "bmd-gf bmd-gf--separators"
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Tokens
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf{
  /* Typography */
  --bmd-gf-font: var(--e-global-typography-text-font-family), Sans-serif;
  --bmd-gf-font-size: 16px;
  --bmd-gf-font-weight: var(--e-global-typography-text-font-weight);
  --bmd-gf-line-height: var(--e-global-typography-text-line-height);
  --bmd-gf-letter-spacing: var(--e-global-typography-text-letter-spacing);

  /* Labels */
  --bmd-gf-label-font: var(--e-global-typography-d3fa855-font-family), Sans-serif;
  --bmd-gf-label-size: var(--e-global-typography-d3fa855-font-size);
  --bmd-gf-label-weight: var(--e-global-typography-d3fa855-font-weight);
  --bmd-gf-label-line-height: var(--e-global-typography-d3fa855-line-height);
  --bmd-gf-label-color: var(--e-global-color-primary);
  --bmd-gf-label-gap: 9px;

  /* Required asterisk */
  --bmd-gf-required-color: var(--e-global-color-primary);
  --bmd-gf-required-size: 1em;
  --bmd-gf-required-gap: 0px;
  --bmd-gf-required-opacity: 0.8;

  /* Placeholder */
  --bmd-gf-placeholder-size: 16px;
  --bmd-gf-placeholder-weight: var(--bmd-gf-label-weight);
  --bmd-gf-placeholder-line-height: var(--bmd-gf-label-line-height);
  --bmd-gf-placeholder-letter-spacing: 0.04em;
  --bmd-gf-placeholder-color: rgba(17, 35, 55, 0.45);
  --bmd-gf-placeholder-transform: uppercase;

  /* Colors */
  --bmd-gf-text: var(--e-global-color-text);
  --bmd-gf-primary: var(--e-global-color-primary);
  --bmd-gf-bg: transparent;

  /* Field UI */
  --bmd-gf-border-width: 1px;
  --bmd-gf-radius: 0px;
  --bmd-gf-field-pad-y: 2px;
  --bmd-gf-field-pad-x: 10px;
  --bmd-gf-textarea-pad-y: 10px;

  /* IMPORTANT: only for inputs/selects (NOT textarea) */
  --bmd-gf-input-min-height: 38px;

  /* Spacing */
  --bmd-gf-gap: 20px;
  --bmd-gf-row-gap: 10px;

  /* Textarea sizing (Foundation uses min-block-size on textarea.large) */
  --bmd-gf-textarea-min-block-size: 10rem;

  /* Separators (option) */
  --bmd-gf-sep: rgba(17, 35, 55, 0.12);
  --bmd-gf-sep-pad: 38px;

  font-family: var(--bmd-gf-font) !important;
  color: var(--bmd-gf-text) !important;
}

/* --------------------------------------------------------------------------
   2) Heading / required legend (IMPORTANT: outside <form>)
   -------------------------------------------------------------------------- */

.gform_wrapper .gform_required_legend{
  display: none !important;
}

/* --------------------------------------------------------------------------
   3) Labels / legends
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf .gfield_label,
.gform_wrapper form.bmd-gf legend.gform-field-label{
  font-family: var(--bmd-gf-label-font) !important;
  font-size: var(--bmd-gf-label-size) !important;
  font-weight: var(--bmd-gf-label-weight) !important;
  line-height: var(--bmd-gf-label-line-height) !important;
  color: var(--bmd-gf-label-color) !important;

  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--bmd-gf-label-gap) 0 !important;
}

/* Required asterisk */
.gform_wrapper form.bmd-gf .gfield_required,
.gform_wrapper form.bmd-gf .gfield_required .gfield_required_custom,
.gform_wrapper form.bmd-gf .gfield_required_custom{
  font-family: var(--bmd-gf-label-font) !important;
  font-size: var(--bmd-gf-required-size) !important;
  line-height: 1 !important;
  color: var(--bmd-gf-required-color) !important;

  position: static;
  margin-left: var(--bmd-gf-required-gap);
  opacity: var(--bmd-gf-required-opacity);
  white-space: nowrap;
}

.gform_wrapper form.bmd-gf .gfield_required{
  padding-left: 0 !important;
}
.gform_wrapper form.bmd-gf .gfield_required_asterisk{
  margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   4) Placeholder
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf ::placeholder{
  font-family: var(--bmd-gf-font) !important;
  font-size: var(--bmd-gf-placeholder-size) !important;
  font-weight: var(--bmd-gf-placeholder-weight) !important;
  line-height: var(--bmd-gf-placeholder-line-height) !important;
  letter-spacing: var(--bmd-gf-placeholder-letter-spacing) !important;
  color: var(--bmd-gf-placeholder-color) !important;
  text-transform: var(--bmd-gf-placeholder-transform);
}

/* --------------------------------------------------------------------------
   5) Inputs / selects / textarea (base styles)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf input[type="text"],
.gform_wrapper form.bmd-gf input[type="email"],
.gform_wrapper form.bmd-gf input[type="tel"],
.gform_wrapper form.bmd-gf input[type="url"],
.gform_wrapper form.bmd-gf input[type="number"],
.gform_wrapper form.bmd-gf input[type="password"],
.gform_wrapper form.bmd-gf select,
.gform_wrapper form.bmd-gf textarea{
  font-family: var(--bmd-gf-font) !important;
  font-size: var(--bmd-gf-font-size) !important;
  font-weight: var(--bmd-gf-font-weight) !important;
  line-height: var(--bmd-gf-line-height) !important;
  letter-spacing: var(--bmd-gf-letter-spacing) !important;

  color: var(--bmd-gf-text) !important;
  background: var(--bmd-gf-bg) !important;

  border: var(--bmd-gf-border-width) solid var(--bmd-gf-primary) !important;
  border-radius: var(--bmd-gf-radius) !important;

  padding: var(--bmd-gf-field-pad-y) var(--bmd-gf-field-pad-x) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Min-height ONLY for inputs + select (does NOT touch textarea) */
.gform_wrapper form.bmd-gf input[type="text"],
.gform_wrapper form.bmd-gf input[type="email"],
.gform_wrapper form.bmd-gf input[type="tel"],
.gform_wrapper form.bmd-gf input[type="url"],
.gform_wrapper form.bmd-gf input[type="number"],
.gform_wrapper form.bmd-gf input[type="password"],
.gform_wrapper form.bmd-gf select{
  min-height: var(--bmd-gf-input-min-height) !important;
}

.gform_wrapper form.bmd-gf input[type="text"]:focus,
.gform_wrapper form.bmd-gf input[type="email"]:focus,
.gform_wrapper form.bmd-gf input[type="tel"]:focus,
.gform_wrapper form.bmd-gf input[type="url"]:focus,
.gform_wrapper form.bmd-gf input[type="number"]:focus,
.gform_wrapper form.bmd-gf input[type="password"]:focus,
.gform_wrapper form.bmd-gf select:focus,
.gform_wrapper form.bmd-gf textarea:focus{
  border-color: var(--bmd-gf-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Textarea height (GF Foundation uses min-block-size on textarea.large) */
.gform_wrapper form.bmd-gf textarea.large{
  min-block-size: var(--bmd-gf-textarea-min-block-size) !important;
}

.gform_wrapper form.bmd-gf textarea{
  padding-top: var(--bmd-gf-textarea-pad-y) !important;
  padding-bottom: var(--bmd-gf-textarea-pad-y) !important;
}

/* Hide number spinners */
.gform_wrapper form.bmd-gf input[type="number"],
.gform_wrapper form.bmd-gf input[type="number"]:hover,
.gform_wrapper form.bmd-gf input[type="number"]:focus{
  -webkit-appearance: none !important;
  appearance: none !important;
}
.gform_wrapper form.bmd-gf input[type="number"]::-webkit-inner-spin-button,
.gform_wrapper form.bmd-gf input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
.gform_wrapper form.bmd-gf input[type="number"]{
  -moz-appearance: textfield !important;
}

/* Hide auto instructions like: "Please enter a number from 1 to 20" */
.gform_wrapper form.bmd-gf .gfield_description.instruction{
  display: none !important;
}

/* --------------------------------------------------------------------------
   6) Layout spacing (GF grid)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf .gform_fields{
  gap: var(--bmd-gf-gap) !important;
  row-gap: var(--bmd-gf-row-gap) !important;
}

/* --------------------------------------------------------------------------
   7) Radios / checkboxes
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf input[type="radio"],
.gform_wrapper form.bmd-gf input[type="checkbox"]{
  accent-color: var(--bmd-gf-primary) !important;
}

.gform_wrapper form.bmd-gf .gfield_radio,
.gform_wrapper form.bmd-gf .gfield_checkbox{
  row-gap: 6px !important;
}

.gform_wrapper form.bmd-gf .gfield_radio .gchoice,
.gform_wrapper form.bmd-gf .gfield_checkbox .gchoice{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

.gform_wrapper form.bmd-gf .gfield_radio input[type="radio"],
.gform_wrapper form.bmd-gf .gfield_checkbox input[type="checkbox"]{
  margin: 0 !important;
}

.gform_wrapper form.bmd-gf .gfield_radio label,
.gform_wrapper form.bmd-gf .gfield_checkbox label{
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--bmd-gf-font) !important;
  font-size: var(--bmd-gf-font-size) !important;
  font-weight: var(--bmd-gf-font-weight) !important;
  line-height: 1.25 !important;
  letter-spacing: var(--bmd-gf-letter-spacing) !important;
  color: var(--bmd-gf-text) !important;
}

/* --------------------------------------------------------------------------
   8) Buttons (submit + multipage)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf .gform_button,
.gform_wrapper form.bmd-gf .gform_page_footer .button,
.gform_wrapper form.bmd-gf input[type="submit"]{
  background-color: var(--e-global-color-63659a9) !important;

  padding: 6px 30px 5px 30px !important;

  font-family: var(--e-global-typography-d3fa855-font-family), Sans-serif !important;
  font-size: var(--e-global-typography-d3fa855-font-size) !important;
  font-weight: var(--e-global-typography-d3fa855-font-weight) !important;
  line-height: var(--e-global-typography-d3fa855-line-height) !important;

  color: var(--e-global-color-primary) !important;

  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--e-global-color-primary) !important;
  border-radius: 0 !important;

  box-shadow: 0 0 10px rgba(0,0,0,0) !important;
  transition: filter .2s ease, transform .2s ease;
}

/* Hover = négatif (inversion fond / texte) */
.gform_wrapper form.bmd-gf .gform_button:hover,
.gform_wrapper form.bmd-gf .gform_button:focus,
.gform_wrapper form.bmd-gf .gform_page_footer .button:hover,
.gform_wrapper form.bmd-gf .gform_page_footer .button:focus,
.gform_wrapper form.bmd-gf input[type="submit"]:hover,
.gform_wrapper form.bmd-gf input[type="submit"]:focus{
  background-color: var(--e-global-color-primary) !important;      /* fond */
  color: #fff !important;                                         /* texte */
  border-color: var(--e-global-color-primary) !important;
}

/* --------------------------------------------------------------------------
   9) Confirmation / validation messages
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf .gform_confirmation_message,
.gform_wrapper form.bmd-gf .gfield_validation_message,
.gform_wrapper form.bmd-gf .validation_message{
  font-family: var(--bmd-gf-font) !important;
}

/* ==========================================================================
   [OPTION] Separators between questions
   Activate by adding: bmd-gf--separators (in GF CSS Class Name)
   ========================================================================== */

.gform_wrapper form.bmd-gf--separators .gform_fields > .gfield:not(.gfield_visibility_hidden):not(.gfield--type-section){
  border-bottom: 1px solid var(--bmd-gf-sep);
  padding-bottom: var(--bmd-gf-sep-pad);
  margin-bottom: 0 !important;
}

.gform_wrapper form.bmd-gf--separators .gform_fields > .gfield:not(.gfield_visibility_hidden):not(.gfield--type-section):last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   [OPTION] Layout 2 colonnes
   Form setting: bmd-gf bmd-gf--two-cols
   Champ textarea > Class Name:  bmd-gf-col-right
   ========================================================================== */

.gform_wrapper form.bmd-gf--two-cols{
  --bmd-gf-two-cols-gap: 30px;     /* espace entre colonnes */
  --bmd-gf-right-footer-h: 75px;   /* hauteur réservée au footer (bouton) */

  position: relative;
}

/* Colonne gauche : tous les champs SAUF le message */
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield:not(.bmd-gf-col-right){
  max-width: calc(50% - (var(--bmd-gf-two-cols-gap) / 2));
}

/* Colonne droite : Message en absolu, et en flex-column */
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right{
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--bmd-gf-right-footer-h);
  width: calc(50% - (var(--bmd-gf-two-cols-gap) / 2));

  margin: 0 !important;

  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Le container input doit pouvoir grandir */
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right .ginput_container{
  flex: 1;
  display: flex;
  min-height: 0; /* très important pour éviter les débordements en flex */
}

/* ✅ Neutralise le min-height GF Foundation et fait "stretch" proprement */
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right textarea,
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right textarea.large{
  flex: 1;
  min-height: 0 !important;        /* override de min-block-size:18rem */
  min-block-size: 0 !important;    /* idem, selon navigateur */
  height: auto;                    /* pas de !important ici */
}

/* Footer (bouton) : absolu en bas à droite */
.gform_wrapper form.bmd-gf--two-cols .gform_footer{
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(50% - (var(--bmd-gf-two-cols-gap) / 2));

  height: var(--bmd-gf-right-footer-h);
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 2;
}

/* Mobile : retour au layout normal */
@media (max-width: 768px){
  .gform_wrapper form.bmd-gf--two-cols{
    --bmd-gf-two-cols-gap: 0px;
    --bmd-gf-right-footer-h: 0px;
  }

  .gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield:not(.bmd-gf-col-right){
    max-width: 100%;
  }

  .gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right,
  .gform_wrapper form.bmd-gf--two-cols .gform_footer{
    position: static;
    width: auto;
    height: auto;
  }

  /* Espace entre textarea Message et bouton en mobile */
  .gform_wrapper form.bmd-gf--two-cols .gform_footer{
    margin-top: 16px !important; /* ajuste 12–24px */
  }

  /* Sur mobile on remet un min-height lisible */
  .gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right textarea,
  .gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right textarea.large{
    flex: 0 0 auto;
    min-block-size: var(--bmd-gf-textarea-min-block-size, 10rem) !important;
    min-height: unset !important;
  }
}