/* Harvest – formulaire de devis Gravity Forms au rendu de l'ancien tableau Addify (Request a Quote).
 * Chargé après les styles Gravity Forms (thème « gravity-theme », intitulés à gauche). */

.ts-devis .gform_wrapper.gravity-theme { margin: 0; }
.ts-devis .gform_wrapper.gravity-theme .gform_required_legend,
.ts-devis .gform_wrapper.gravity-theme .gfield_label .gfield_required { display: none; }

/* Le tableau : une ligne par champ, intitulé à gauche (30 %), saisie à droite (70 %) */
.ts-devis .gform_wrapper.gravity-theme .gform_fields {
	display: block;
	margin: 0;
	background: #fff;
}
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield:not(.gfield--type-hidden):not(.gfield--type-captcha):not(.gfield--type-honeypot) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
/* Filet entre les lignes à partir de 800 px seulement, comme Addify */
@media only screen and (min-width: 800px) {
	.ts-devis .gform_wrapper.gravity-theme .gform_fields { padding-top: 1px; }
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield:not(.gfield--type-hidden):not(.gfield--type-captcha):not(.gfield--type-honeypot) { border-bottom: 1px solid #f2f2f2; }
}
/* Une ligne visible sur deux en gris très clair, à partir de « Pour un épandage »
   (« of » : le champ caché et l'anti-spam, placé où Gravity Forms veut, ne comptent pas) */
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield:nth-child(odd of .gfield:not(.gfield--type-hidden):not(.gfield--type-captcha):not(.gfield--type-honeypot)) { background: #fcfcfc; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield .gfield_label,
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield legend.gfield_label {
	position: static;
	float: left;
	box-sizing: border-box;
	width: 30%;
	margin: 0;
	padding: 10px;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: #747474;
}
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield .ginput_container {
	box-sizing: border-box;
	width: 70%;
	margin: 0;
	padding: 10px;
}
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield input:not([type=checkbox]):not([type=hidden]),
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield textarea {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 10px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: rgba(0, 0, 0, .04);
	box-shadow: none;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #555;
}
/* Zone de texte en ligne, comme dans l'ancien tableau (la ligne garde l'espace sous la ligne de base) */
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield textarea { display: inline-block; vertical-align: baseline; height: 72px; resize: both; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield .ginput_container_textarea { font-size: 14px; line-height: 30px; padding-bottom: 10px; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield.gfield_contains_required input:not([type=checkbox]):not([type=hidden]),
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield.gfield_contains_required textarea { border-left-color: #ca1010; }

/* Cases « Pour un épandage » / « Pour une livraison » : la case seule */
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield--type-checkbox .gfield_checkbox { margin: 0; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield--type-checkbox .gchoice { display: block; margin: 0; line-height: 32px; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield--type-checkbox input[type=checkbox] {
	appearance: auto;
	width: 13px;
	height: 13px;
	margin: 3px 3px 3px 4px;
	vertical-align: baseline;
}
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield--type-checkbox .gchoice label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* reCAPTCHA puis bouton « Déposer un devis » (taille et couleur : style.css du thème enfant) */
/* (Addify : tableau, marge de 20, puis reCAPTCHA et bouton à 10 l'un de l'autre) */
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield--type-captcha { margin: 30px 0 0; padding: 0; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield.gfield--type-captcha .gfield_label { display: none; }
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield.gfield--type-captcha .ginput_container { float: none; width: 100%; margin: 0; padding: 0; }
.ts-devis .gform_wrapper.gravity-theme .gform_footer { display: block; margin: 10px 0 0; padding: 0; }
.ts-devis .gform_wrapper.gravity-theme .gform_footer .addify_checkout_place_quote { margin: 0; color: #fff; border-radius: 0; }

/* Erreurs de saisie : texte rouge sous la saisie, dans la colonne de droite */
.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error .validation_message {
	flex: 0 0 100%;
	box-sizing: border-box;
	margin: -6px 0 0;
	padding: 0 10px 10px calc(30% + 10px);
	border: 0;
	background: none;
	color: #ca1010;
	font-size: 14px;
	line-height: 20px;
}
/* Mobile : intitulé au-dessus de la saisie, comme les th/td passés en bloc d'Addify */
@media only screen and (max-width: 740px) {
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield:not(.gfield--type-hidden):not(.gfield--type-captcha):not(.gfield--type-honeypot) {
		display: block;
		padding-top: 20px;
	}
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield .gfield_label,
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield legend.gfield_label {
		float: none;
		width: 100%;
	}
	/* une légende non flottante se colle au bord haut du fieldset, malgré le padding */
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield legend.gfield_label { float: left; }
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield .ginput_container { float: none; clear: both; width: 100%; }
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield--type-checkbox .gchoice { line-height: 30px; }
	.ts-devis .gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error .validation_message { padding: 0 10px 10px; }
}
