/**
 * WS Form GFV — Responsive mobile.
 *
 * Corrige l'affichage du formulaire de souscription sur mobile :
 * - Container pleine largeur
 * - Onglets steps compacts avec scroll horizontal
 * - Labels left empiles verticalement
 * - Inputs pleine largeur + anti-zoom iOS
 * - Radios/checkboxes inline wrappés
 * - Boutons navigation pleine largeur
 */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------
	 * 1. Container formulaire pleine largeur
	 * ------------------------------------------------ */
	.elementor-widget-ws-form .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.wsf-form.wsf-form-canvas {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ------------------------------------------------
	 * 2. Masquer les onglets steps natifs,
	 *    remplaces par la barre de progression JS
	 * ------------------------------------------------ */
	.wsf-group-tabs.wsf-steps {
		display: none !important;
	}

	/* Barre de progression mobile */
	.gfv-mobile-progress {
		margin-bottom: 16px;
	}

	.gfv-mobile-progress__track {
		height: 4px;
		background: #e0d5db;
		border-radius: 2px;
		overflow: hidden;
	}

	.gfv-mobile-progress__fill {
		height: 100%;
		background: #4f2540;
		border-radius: 2px;
		transition: width 0.3s ease;
	}

	.gfv-mobile-progress__label {
		margin-top: 8px;
		font-size: 13px;
		color: #4f2540;
		font-weight: 600;
		text-align: center;
	}

	/* ------------------------------------------------
	 * 3. Champs multi-colonnes : pleine largeur
	 * ------------------------------------------------ */
	.wsf-field-wrapper[class*="wsf-small-"],
	.wsf-field-wrapper[class*="wsf-medium-"],
	.wsf-field-wrapper[class*="wsf-large-"] {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* ------------------------------------------------
	 * 4. Labels left : empiler verticalement
	 *    33 champs (investissement, connaissances)
	 *    utilisent wsf-extra-small-6|8 pour le label
	 * ------------------------------------------------ */
	.wsf-grid.wsf-fields {
		display: flex !important;
		flex-direction: column !important;
	}

	.wsf-grid.wsf-fields > .wsf-label-wrapper,
	.wsf-grid.wsf-fields > .wsf-label-wrapper[class*="wsf-extra-small-"],
	.wsf-grid.wsf-fields > div[class*="wsf-extra-small-"] {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* ------------------------------------------------
	 * 5. Inputs pleine largeur + anti-zoom iOS
	 *    iOS zoom si font-size < 16px au focus
	 * ------------------------------------------------ */
	.wsf-field input[type="text"],
	.wsf-field input[type="email"],
	.wsf-field input[type="tel"],
	.wsf-field input[type="number"],
	.wsf-field input[type="date"],
	.wsf-field select,
	.wsf-field textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		font-size: 16px;
	}

	/* ------------------------------------------------
	 * 6. Radios/checkboxes inline : autoriser le retour a la ligne
	 * ------------------------------------------------ */
	[role="radiogroup"],
	.wsf-field .wsf-inline {
		display: inline !important;
	}

	/* ------------------------------------------------
	 * 7. Titre fieldset : plus petit sur mobile
	 * ------------------------------------------------ */
	.wsf-form fieldset legend,
	.wsf-form .wsf-legend {
		font-size: 18px;
	}

	/* ------------------------------------------------
	 * 8. Boutons navigation pleine largeur
	 * ------------------------------------------------ */
	.wsf-group-nav-next,
	.wsf-group-nav-previous {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		padding: 14px 24px;
		font-size: 16px;
	}

	/* ------------------------------------------------
	 * 9. reCAPTCHA badge : plus discret
	 * ------------------------------------------------ */
	.grecaptcha-badge {
		transform: scale(0.8);
		transform-origin: bottom right;
	}
}

/* ====================================================
 * Extra small (iPhone SE, etc.)
 * ==================================================== */

@media screen and (max-width: 390px) {

	.elementor-widget-ws-form .elementor-widget-container {
		padding: 0 12px;
	}

	.wsf-form fieldset legend,
	.wsf-form .wsf-legend {
		font-size: 16px;
	}
}