/*
 * Divi Gravity Forms Enhanced — règles des options du module Gravity Forms.
 * Chaque bloc ne s'applique que si l'option correspondante est activée (classe posée sur le module).
 * Les couleurs viennent des options du module (variables --dgfe-*), avec des valeurs de repli.
 */

.et_pb_gravity_forms {
	--dgfe-accent-c: var(--dgfe-accent, #d0021b);
	--dgfe-ink-c: var(--dgfe-ink, #1b1b22);
	--dgfe-line-c: var(--dgfe-line, #e6e6e6);
	--dgfe-choice-border-c: var(--dgfe-choice-border, #d6d6d6);
}

/* ---------- Choix en boutons encadrés ---------- */

/* Sans disposition en colonnes : cartes à leur largeur naturelle. Une disposition en colonnes choisie dans
 * Gravity Forms (gf_list_2col, etc.) garde la main : les cartes prennent alors la largeur de leur colonne. */
.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gfield_radio,
.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Disposition en colonnes (gf_list_Ncol) : même écart que les colonnes des champs du formulaire (2 % de la
 * largeur dans le thème Gravity Forms), pour que les cartes s'alignent sur les champs du dessus.
 * Classe doublée : passe devant la règle gf_list_Ncol de Gravity Forms (même spécificité, qui met 2rem). */
.et_pb_gravity_forms.dgfe-choices-boxed.dgfe-choices-boxed .gform_wrapper .gfield[class*="gf_list_"] .gfield_radio,
.et_pb_gravity_forms.dgfe-choices-boxed.dgfe-choices-boxed .gform_wrapper .gfield[class*="gf_list_"] .gfield_checkbox {
	column-gap: 2%;
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gfield_radio .gchoice,
.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gfield_checkbox .gchoice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 96px;
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--dgfe-choice-border-c);
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice label {
	margin: 0;
	cursor: pointer;
}

/* Toute la carte est cliquable. */
.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice label::after {
	content: "";
	position: absolute;
	inset: 0;
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice:has(input:checked) {
	border-color: var(--dgfe-ink-c);
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice:has(input:checked) label {
	font-weight: 700;
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice:has(input:focus-visible) {
	outline: 2px solid var(--dgfe-accent-c);
	outline-offset: 2px;
}

/* Bouton radio : anneau, épais et coloré une fois choisi. */
.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 14px;
	height: 14px;
	margin: 0;
	border: 1px solid #8a8a93;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice input[type="radio"]:checked {
	border: 4px solid var(--dgfe-accent-c);
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice input[type="radio"]::before {
	display: none;
}

.et_pb_gravity_forms.dgfe-choices-boxed .gform_wrapper .gfield .gchoice input[type="checkbox"] {
	flex: none;
	margin: 0;
	accent-color: var(--dgfe-accent-c);
}

/* ---------- Barre de progression fine ---------- */

.et_pb_gravity_forms.dgfe-progress-thin .gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {
	margin: 0 0 10px;
}

.et_pb_gravity_forms.dgfe-progress-thin .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {
	height: 4px;
	padding: 0;
	border-radius: 0;
	background: var(--dgfe-line-c);
	box-shadow: none;
	overflow: hidden;
}

.et_pb_gravity_forms.dgfe-progress-thin .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
	height: 100%;
	border-radius: 0;
	background: var(--dgfe-accent-c);
}

.et_pb_gravity_forms.dgfe-progress-thin .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage span {
	display: none;
}

/* ---------- Barre segmentée : un segment par page ---------- */
/* Les pages remplies sont dessinées d'après --dgfe-page / --dgfe-pages ; le masque découpe les segments. */

.et_pb_gravity_forms.dgfe-progress-segments .gform_wrapper .gf_progressbar_wrapper[style*="--dgfe-pages"] .gf_progressbar {
	--dgfe-gap: 6px;
	--dgfe-period: calc((100% + var(--dgfe-gap)) / var(--dgfe-pages));
	background: linear-gradient(
		90deg,
		var(--dgfe-accent-c) 0 calc(var(--dgfe-period) * var(--dgfe-page)),
		var(--dgfe-line-c) 0
	);
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--dgfe-period) - var(--dgfe-gap)), transparent 0 var(--dgfe-period));
	mask: repeating-linear-gradient(90deg, #000 0 calc(var(--dgfe-period) - var(--dgfe-gap)), transparent 0 var(--dgfe-period));
}

.et_pb_gravity_forms.dgfe-progress-segments .gform_wrapper .gf_progressbar_wrapper[style*="--dgfe-pages"] .gf_progressbar .gf_progressbar_percentage {
	display: none;
}

/* ---------- Filet au-dessus des sections ---------- */

.et_pb_gravity_forms.dgfe-section-rule .gform_wrapper .gfield.gsection {
	padding: 18px 0 0;
	border-top: 2px solid var(--dgfe-ink-c);
	border-bottom: 0;
}

/* ---------- Pied de page : Précédent à gauche, Suivant / Envoyer à droite ---------- */

.et_pb_gravity_forms.dgfe-footer-split .gform_wrapper .gform_page_footer,
.et_pb_gravity_forms.dgfe-footer-split .gform_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--dgfe-line-c);
}

/* Sans bouton Précédent (première page, formulaire d'une page) : Suivant / Envoyer à droite. Pas de marge
 * automatique : le module Divi impose margin: 0 !important aux boutons. */
.et_pb_gravity_forms.dgfe-footer-split .gform_wrapper .gform_page_footer:not(:has(.gform_previous_button)),
.et_pb_gravity_forms.dgfe-footer-split .gform_wrapper .gform_footer:not(:has(.gform_previous_button)) {
	justify-content: flex-end;
}

/* ---------- Mention des champs obligatoires à droite de « Étape X sur Y » ---------- */
/* Seulement sans titre ni description affichés et avec une barre de progression, sinon la mention garde sa place. */

.et_pb_gravity_forms.dgfe-legend-inline .gform_wrapper:has(.gf_progressbar_wrapper) {
	position: relative;
}

.et_pb_gravity_forms.dgfe-legend-inline .gform_wrapper:has(.gf_progressbar_wrapper) > .gform_heading:not(:has(.gform_title, .gform_description:not(:empty))) {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	text-align: right;
	z-index: 1;
}

.et_pb_gravity_forms.dgfe-legend-inline .gform_wrapper:has(.gf_progressbar_wrapper) > .gform_heading:not(:has(.gform_title, .gform_description:not(:empty))) .gform_description:empty {
	display: none;
}

.et_pb_gravity_forms.dgfe-legend-inline .gform_wrapper:has(.gf_progressbar_wrapper) > .gform_heading:not(:has(.gform_title, .gform_description:not(:empty))) .gform_required_legend {
	margin: 0;
	font-size: 12px;
}

/* ---------- Champ Téléphone (d'office) ---------- */
/* Sous-libellés « Pays » / « Numéro de téléphone » : Gravity Forms leur impose 15 px par une règle propre au
 * champ Téléphone, plus forte que le réglage « Sous-étiquettes » du module. On reprend la taille réglée dans
 * le module ou son preset (variable posée par le plugin). */

.et_pb_gravity_forms[style*="--dgfe-sublabel-size"] .gform_wrapper .gfield--type-phone .gform-field-label--type-sub {
	font-size: var(--dgfe-sublabel-size);
}

/* Case pays séparée du numéro (8 px), numéro sur toute la largeur restante. */
.et_pb_gravity_forms .gform_wrapper .gfield--type-phone .gform-phone,
.et_pb_gravity_forms .gform_wrapper .gfield--type-phone .gform-phone__input-wrapper {
	width: 100%;
}

.et_pb_gravity_forms .gform_wrapper .gfield--type-phone .gform-phone__input-wrapper {
	gap: 8px;
}

.et_pb_gravity_forms .gform_wrapper .gfield--type-phone .ginput_phone_container .gform-phone__input {
	width: 100%;
}

/* Le module Divi applique au bouton pays la marge interne des champs, en !important : on réduit ses côtés. */
.et_pb_gravity_forms .et_pb_gravity_form_embed .gfield--type-phone button.gform-phone__country-selector {
	margin-inline-end: 0;
	padding-inline: 10px !important;
}

/* ---------- Listes liées (Chained Selects verticaux) en étapes numérotées ---------- */
/* Seules les listes visibles (.gfcs-column-section-input) sont numérotées : les colonnes masquées par
 * Chained Select Enhancer ne comptent pas. Sélecteurs longs : passent devant la mise en page de l'extension. */

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex {
	counter-reset: dgfe-step;
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input {
	counter-increment: dgfe-step;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 8px;
	align-items: center;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 !important; /* Chained Selects impose padding-block-end: 4px !important. */
}

/* Espace et trait vertical vers l'étape suivante (seulement si une liste visible suit). */
.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input:has(~ .gfcs-column-section-input) {
	padding-bottom: 28px !important;
	background: linear-gradient(var(--dgfe-line-c), var(--dgfe-line-c)) no-repeat 13px 34px / 2px calc(100% - 40px);
}

/* Pastille numérotée : à remplir (encre), remplie (couleur d'accent), en attente (grise). */
.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input::before {
	content: counter(dgfe-step);
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--dgfe-ink-c);
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input:has(> select option:checked:not([value=""]))::before {
	background: var(--dgfe-accent-c);
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input:has(> select:disabled)::before {
	color: #8a8a93;
	background: var(--dgfe-line-c);
}

/* Libellé au-dessus de la liste, comme un libellé de champ. */
.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input > label.gform-field-label--type-sub {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: var(--dgfe-label-size, 13px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--dgfe-ink-c);
	text-align: left;
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_contains_required .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input > label.gform-field-label--type-sub::after {
	content: " *";
	color: var(--dgfe-accent-c);
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input > select {
	grid-column: 2;
	grid-row: 2;
	width: 100%;
	max-width: none;
	margin: 0;
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input > select:not(:disabled),
.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input > select:not(:disabled):hover {
	background-color: var(--dgfe-field-bg, #fff) !important;
	border-color: var(--dgfe-field-border, #d6d6d6);
	box-shadow: none;
}

/* Étape en attente : libellé et liste grisés, indication sous la liste. */
.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input:has(> select:disabled) > label.gform-field-label--type-sub {
	color: #8a8a93;
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input > select:disabled {
	color: #9a9aa2;
	background-color: #f4f4f6;
	border-color: var(--dgfe-line-c);
	cursor: not-allowed;
	opacity: 1;
}

.et_pb_gravity_forms.dgfe-chained-steps .gform_wrapper.gravity-theme .gfield_chainedselect.ginput_chained_selects_container.vertical.ginput_complex .gform-grid-col.gfcs-column-section-input[data-dgfe-hint]:has(> select:disabled)::after {
	content: attr(data-dgfe-hint);
	grid-column: 2;
	grid-row: 3;
	font-size: var(--dgfe-sublabel-size, 11px);
	color: #8a8a93;
}

/* ---------- Listes déroulantes (d'office) ---------- */
/* Flèche native collée au bord droit : remplacée par un chevron à 14 px du bord, texte gardé à distance. */

.et_pb_gravity_forms .et_pb_gravity_form_embed .gform_wrapper select:not([multiple]) {
	-webkit-appearance: none;
	appearance: none;
	padding-inline-end: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231f1d26' stroke-width='1.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.et_pb_gravity_forms .et_pb_gravity_form_embed .gform_wrapper select:not([multiple]):disabled {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9aa2' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* ---------- Blocs de confirmation (à utiliser dans le message de confirmation Gravity Forms) ---------- */
/* <div class="dgfe-confirm">
 *   <p class="dgfe-confirm__lead"><span class="dgfe-confirm__check" aria-hidden="true">✓</span><span>Message…</span></p>
 *   <dl class="dgfe-confirm__list"><div><dt>Libellé</dt><dd>Valeur</dd></div>…</dl>
 *   <p class="dgfe-confirm__actions">[gravitypdf … class="dgfe-confirm__button"]</p>
 * </div>
 * Désactiver la mise en forme automatique de la confirmation (sinon Gravity Forms ajoute des <p> et <br>). */

.dgfe-confirm {
	color: var(--dgfe-ink-c, #1b1b22);
}

.dgfe-confirm .dgfe-confirm__lead {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	font-size: 17px;
	line-height: 1.55;
}

.dgfe-confirm .dgfe-confirm__check {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: 1px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--dgfe-accent-c, #d0021b);
}

.dgfe-confirm .dgfe-confirm__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dgfe-line-c, #e6e6e6);
}

.dgfe-confirm .dgfe-confirm__list > div {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 8px 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--dgfe-line-c, #e6e6e6);
}

.dgfe-confirm .dgfe-confirm__list dt {
	margin: 0;
	padding-top: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8a93;
}

.dgfe-confirm .dgfe-confirm__list dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

.dgfe-confirm .dgfe-confirm__actions {
	margin: 32px 0 0;
	padding: 0;
}

.dgfe-confirm a.dgfe-confirm__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	background: var(--dgfe-accent-c, #d0021b);
	transition: background-color 0.2s ease;
}

.dgfe-confirm a.dgfe-confirm__button:hover,
.dgfe-confirm a.dgfe-confirm__button:focus-visible {
	color: #fff;
	background: var(--dgfe-ink-c, #1b1b22);
}

@media (max-width: 640px) {
	.dgfe-confirm .dgfe-confirm__list > div {
		grid-template-columns: minmax(0, 1fr);
	}
}