/* =========================
   Gravity Forms – UI Global
   ========================= */

/* Variables (facile à maintenir) */
.gform_wrapper{
  --gf-white: #fff;
  --gf-accent: #23BBE5;
  --gf-border: rgba(255,255,255,.9);
  --gf-text-soft: rgba(255,255,255,.9);
  --gf-field-bg: rgba(255,255,255,.20);
}

/* ===== Titres de champs (labels + legends) ===== */
.gform_wrapper .gfield_label,
.gform_wrapper fieldset legend{
  color: var(--gf-white)!important;
  font-size: 24px!important;
  font-weight: 600!important;
  margin: 0 0 16px!important;
  padding: 0!important;
}

/* Required */
.gform_wrapper .gfield_required{
  color: var(--gf-white);
  opacity: .9;
  margin-left: 6px;
}

/* ===== Progress bar ===== */
.gform_wrapper .gf_progressbar_wrapper{
  margin: 0 0 12px;
}

.gform_wrapper .gf_progressbar_title{
  color: var(--gf-white)!important;
  font-weight: 600!important;
  font-size: 18px!important;
  margin: 0 0 8px!important;
}

.gform_wrapper .gf_progressbar{
  background: transparent!important;
  border: 1px solid var(--gf-border)!important;
  border-radius: 999px!important;
  height: 24px!important;
  overflow: hidden!important;
  box-shadow: none!important;
}

.gform_wrapper .gf_progressbar_percentage{
  background: var(--gf-accent)!important;
  height: 100%!important;
  border-radius: 999px!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-width: 64px!important;
  padding: 0 12px!important;
  box-shadow: none!important;
}

.gform_wrapper .gf_progressbar_percentage span{
  color: var(--gf-white)!important;
  font-weight: 500!important;
  font-size: 13px!important;
  line-height: 1!important;
}

/* ===== Radios (2 lignes) ===== */
.gform_wrapper .gfield--type-radio input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gform_wrapper .gfield--type-radio .gfield_radio label{
  position: relative;
  padding-left: 44px;
  cursor: pointer;
  color: var(--gf-white);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  display: inline-block;
}

.gform_wrapper .gfield--type-radio .gfield_radio label span{
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 14px;
  opacity: .9;
  line-height: 1.25;
}

/* cercle extérieur */
.gform_wrapper .gfield--type-radio .gfield_radio label:before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--gf-white);
  background: transparent;
}

/* rempli quand coché */
.gform_wrapper .gfield--type-radio .gfield_radio input[type="radio"]:checked + label:after{
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--gf-accent);
}

/* ===== Checkboxes en switch (2 lignes) ===== */
.gform_wrapper .gfield--type-checkbox input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gform_wrapper .gfield--type-checkbox .gfield_checkbox label{
  position: relative;
  padding-left: 62px;
  cursor: pointer;
  color: var(--gf-white);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  line-height: 1.1;
  display: inline-block;
  text-transform: uppercase;
}

.gform_wrapper .gfield--type-checkbox .gfield_checkbox label span{
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  opacity: .9;
  line-height: 1.35;
}

/* piste */
.gform_wrapper .gfield--type-checkbox .gfield_checkbox label:before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0);
  border: 1px solid var(--gf-white);
}

/* bouton */
.gform_wrapper .gfield--type-checkbox .gfield_checkbox label:after{
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--gf-accent);
  transition: transform .18s ease;
}

/* checked */
.gform_wrapper .gfield--type-checkbox .gfield_checkbox input[type="checkbox"]:checked + label:after{
  transform: translateX(20px);
}

.gform_wrapper .gfield--type-checkbox .gfield_checkbox input[type="checkbox"]:checked + label:before{
  background: rgba(255,255,255,.95);
}

/* ===== Inputs / Select / Textarea ===== */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select{
  width: 100%;
  background: var(--gf-field-bg)!important;
  border: 1px solid var(--gf-border)!important;
  border-radius: 0!important;
  color: var(--gf-white)!important;
  font-size: 16px!important;
  padding: 18px 18px!important;
  line-height: 1.2!important;
  box-shadow: none!important;
  outline: none!important;
}

/* Placeholder */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{
  color: var(--gf-text-soft);
  opacity: 1;
}

/* Focus */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus{
  border-color: var(--gf-accent);
  outline: none;
  box-shadow: none;
	color:#000000;
}

/* Nettoyage margin GF */
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select{
  margin: 0;
}

/* Autofill Chrome */
.gform_wrapper input:-webkit-autofill,
.gform_wrapper textarea:-webkit-autofill,
.gform_wrapper select:-webkit-autofill{
  -webkit-text-fill-color: var(--gf-white);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px transparent inset !important;
}

/* ===== Bouton =====*/
/* Aligner Précédent à gauche et Suivant à droite */
.gform_wrapper .gform_page_footer{
  display: flex;
  align-items: center;
	justify-content: space-between;
}


.gform_wrapper .gform_page_footer .gform_previous_button,
.gform_wrapper .gform_page_footer .gform_next_button,
.gform_wrapper .gform_page_footer .gform_button{
	border: 2px solid rgba(255,255,255,0.9)!important;
	font-size: 14px!important;
  	font-weight: 700!important;
  	text-transform: uppercase!important;
  	padding: 14px 28px!important;
	border-radius: 0!important;
	display: inline-flex!important;
  	align-items: center!important;
}

/* Bouton RETOUR */
.gform_wrapper .gform_previous_button{
  background: transparent!important;
  color: #ffffff!important;
}

/* Bouton SUIVANT / ENVOYER */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button{
  background-color: #ffffff!important;
  color: #8207C5!important;
  border-color: #ffffff!important;
}

/* Hover */
.gform_wrapper .gform_previous_button:hover{
  background: rgba(255,255,255,0.1)!important;
}

.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover{
  background-color: #8207C5!important;
	color:#ffffff!important;
	border-color: #8207C5!important;
}

/* Désactiver styles Gravity Forms par défaut */
.gform_wrapper .gform_button:focus,
.gform_wrapper .gform_next_button:focus,
.gform_wrapper .gform_previous_button:focus{
  outline: none!important;
  box-shadow: none!important;
}

/* Mobile */
@media (max-width: 768px){
  .gform_wrapper .gform_page_footer{
    flex-direction: column-reverse;
    gap: 16px;
  }
  .gform_wrapper .gform_page_footer .gform_previous_button,
  .gform_wrapper .gform_page_footer .gform_next_button,
  .gform_wrapper .gform_page_footer .gform_button{
    width: 100%;
    justify-content: center;
  }
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .gform_wrapper .gfield_label,
  .gform_wrapper fieldset legend{
    font-size: 20px;
    margin-bottom: 12px;
  }

  .gform_wrapper .gfield--type-radio .gfield_radio label{
    font-size: 16px;
    padding-left: 40px;
  }
  .gform_wrapper .gfield--type-radio .gfield_radio label:before{
    width: 20px;
    height: 20px;
  }
  .gform_wrapper .gfield--type-radio .gfield_radio input[type="radio"]:checked + label:after{
    left: 2px;
    top: 4px;
    width: 16px;
    height: 16px;
  }

  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="number"],
  .gform_wrapper input[type="url"],
  .gform_wrapper input[type="password"],
  .gform_wrapper textarea,
  .gform_wrapper select{
    padding: 14px 14px;
    font-size: 16px;
  }
}