/**
 * Yum Forms Styling — surcharge front.
 *
 * Feuille statique : toutes les valeurs personnalisables passent par des
 * variables `--yfs-*` définies en ligne par le plugin. Les valeurs ci-dessous
 * ne servent que de repli si le bloc en ligne est absent.
 *
 * Portée : cadrée par les classes body yfs-generic / yfs-gf / yfs-nf / yfs-cf7.
 */

:root {
	--yfs-text-color: rgba(30, 35, 40, 1);
	--yfs-bg: rgba(255, 255, 255, 1);
	--yfs-placeholder: rgba(120, 128, 135, 1);
	--yfs-font-size: 16px;
	--yfs-line-height: 1.5;
	--yfs-pad-y: 10px;
	--yfs-pad-x: 14px;
	--yfs-margin-bottom: 18px;
	--yfs-border-width: 1px;
	--yfs-border-style: solid;
	--yfs-border-color: rgba(200, 206, 212, 1);
	--yfs-radius: 8px;
	--yfs-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
	--yfs-select-arrow: rgba(90, 98, 105, 1);
	--yfs-select-arrow-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%235a6269%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206l4%204%204-4%22%2F%3E%3C%2Fsvg%3E");
	--yfs-focus-border-color: rgba(37, 99, 235, 1);
	--yfs-focus-bg: rgba(255, 255, 255, 1);
	--yfs-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
	--yfs-disabled-opacity: 0.6;
	--yfs-error-border-color: rgba(220, 38, 38, 1);
	--yfs-error-bg: rgba(254, 242, 242, 1);

	--yfs-panel-bg: rgba(255, 255, 255, 1);
	--yfs-panel-border-color: rgba(200, 206, 212, 1);
	--yfs-panel-border-width: 1px;
	--yfs-panel-radius: 8px;
	--yfs-panel-shadow: 0 8px 24px 0 rgba(15, 23, 42, 0.14);
	--yfs-panel-max-height: 260px;
	--yfs-option-color: rgba(30, 35, 40, 1);
	--yfs-option-bg: rgba(255, 255, 255, 0);
	--yfs-option-pad-y: 10px;
	--yfs-option-pad-x: 14px;
	--yfs-option-hover-color: rgba(255, 255, 255, 1);
	--yfs-option-hover-bg: rgba(37, 99, 235, 1);
	--yfs-option-selected-color: rgba(37, 99, 235, 1);
	--yfs-option-selected-bg: rgba(37, 99, 235, 0.1);

	--yfs-choice-size: 20px;
	--yfs-choice-border-width: 2px;
	--yfs-choice-border-color: rgba(160, 168, 175, 1);
	--yfs-choice-radius: 6px;
	--yfs-choice-bg: rgba(255, 255, 255, 1);
	--yfs-choice-checked-bg: rgba(37, 99, 235, 1);
	--yfs-choice-checked-border-color: rgba(37, 99, 235, 1);
	--yfs-choice-glyph: rgba(255, 255, 255, 1);
	--yfs-choice-focus-ring: rgba(37, 99, 235, 0.35);
	--yfs-choice-gap: 10px;
	--yfs-choice-label-color: rgba(30, 35, 40, 1);
}

/* -------------------------------------------------------------------------- *
 * Champs texte, zones de texte, listes fermées et bouton de la liste custom  *
 * -------------------------------------------------------------------------- */

.yfs-generic form :is(
	input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
	input[type="number"], input[type="password"], input[type="search"],
	input[type="date"], input[type="datetime-local"], input[type="month"],
	input[type="week"], input[type="time"], input:not([type])
),
.yfs-generic form textarea,
.yfs-generic form select,
.yfs-gf .gform_wrapper :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"]),
.yfs-gf .gform_wrapper textarea,
.yfs-gf .gform_wrapper select,
.yfs-nf .nf-form-cont :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"]),
.yfs-nf .nf-form-cont textarea,
.yfs-nf .nf-form-cont select,
.yfs-cf7 .wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"]),
.yfs-cf7 .wpcf7 textarea,
.yfs-cf7 .wpcf7 select,
.yfs-select__button {
	box-sizing: border-box;
	color: var(--yfs-text-color);
	background-color: var(--yfs-bg);
	font-size: var(--yfs-font-size);
	line-height: var(--yfs-line-height);
	padding: var(--yfs-pad-y) var(--yfs-pad-x);
	margin-bottom: var(--yfs-margin-bottom);
	border-width: var(--yfs-border-width);
	border-style: var(--yfs-border-style);
	border-color: var(--yfs-border-color);
	border-radius: var(--yfs-radius);
	box-shadow: var(--yfs-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	max-width: 100%;
}

/* Flèche des listes déroulantes (état fermé et bouton custom). */
.yfs-generic form select,
.yfs-gf .gform_wrapper select,
.yfs-nf .nf-form-cont select,
.yfs-cf7 .wpcf7 select,
.yfs-select__button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: calc(var(--yfs-pad-x) + 1.4em);
	background-image: var(--yfs-select-arrow-image);
	background-repeat: no-repeat;
	background-position: right var(--yfs-pad-x) center;
	background-size: 1em 1em;
}

/* Placeholder */
.yfs-generic form input::placeholder,
.yfs-generic form textarea::placeholder,
.yfs-gf .gform_wrapper input::placeholder,
.yfs-gf .gform_wrapper textarea::placeholder,
.yfs-nf .nf-form-cont input::placeholder,
.yfs-nf .nf-form-cont textarea::placeholder,
.yfs-cf7 .wpcf7 input::placeholder,
.yfs-cf7 .wpcf7 textarea::placeholder {
	color: var(--yfs-placeholder);
	opacity: 1;
}

/* Focus */
.yfs-generic form :is(input, textarea, select):focus,
.yfs-gf .gform_wrapper :is(input, textarea, select):focus,
.yfs-nf .nf-form-cont :is(input, textarea, select):focus,
.yfs-cf7 .wpcf7 :is(input, textarea, select):focus,
.yfs-select__button:focus-visible,
.yfs-select--open .yfs-select__button {
	outline: none;
	border-color: var(--yfs-focus-border-color);
	background-color: var(--yfs-focus-bg);
	box-shadow: var(--yfs-focus-shadow);
}

/* Champs désactivés */
.yfs-generic form :is(input, textarea, select):disabled,
.yfs-gf .gform_wrapper :is(input, textarea, select):disabled,
.yfs-nf .nf-form-cont :is(input, textarea, select):disabled,
.yfs-cf7 .wpcf7 :is(input, textarea, select):disabled {
	opacity: var(--yfs-disabled-opacity);
	cursor: not-allowed;
}

/* Erreurs */
.yfs-generic form :is(input, textarea, select)[aria-invalid="true"],
.yfs-generic form .yfs-pv-error,
.yfs-gf .gform_wrapper .gfield_error :is(input, textarea, select),
.yfs-gf .gform_wrapper :is(input, textarea, select).gfield_error,
.yfs-nf .nf-form-cont .nf-error :is(input, textarea, select),
.yfs-nf .nf-form-cont :is(input, textarea, select).nf-error,
.yfs-cf7 .wpcf7 .wpcf7-not-valid {
	border-color: var(--yfs-error-border-color);
	background-color: var(--yfs-error-bg);
}

/* Boutons d'envoi (option) */
.yfs-style-submit.yfs-generic form button[type="submit"],
.yfs-style-submit.yfs-generic form input[type="submit"],
.yfs-style-submit.yfs-gf .gform_wrapper input[type="submit"],
.yfs-style-submit.yfs-gf .gform_wrapper button.gform_button,
.yfs-style-submit.yfs-nf .nf-form-cont input[type="button"],
.yfs-style-submit.yfs-cf7 .wpcf7 input[type="submit"] {
	border-width: var(--yfs-border-width);
	border-style: var(--yfs-border-style);
	border-color: var(--yfs-border-color);
	border-radius: var(--yfs-radius);
	box-shadow: var(--yfs-shadow);
}

/* -------------------------------------------------------------------------- *
 * Cases à cocher et boutons radio (rendu natif restylé)                      *
 * -------------------------------------------------------------------------- */

.yfs-generic form input[type="checkbox"],
.yfs-generic form input[type="radio"],
.yfs-gf .gform_wrapper input[type="checkbox"],
.yfs-gf .gform_wrapper input[type="radio"],
.yfs-nf .nf-form-cont input[type="checkbox"],
.yfs-nf .nf-form-cont input[type="radio"],
.yfs-cf7 .wpcf7 input[type="checkbox"],
.yfs-cf7 .wpcf7 input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-grid;
	place-content: center;
	width: var(--yfs-choice-size);
	height: var(--yfs-choice-size);
	margin: 0 var(--yfs-choice-gap) 0 0;
	padding: 0;
	border: var(--yfs-choice-border-width) solid var(--yfs-choice-border-color);
	background: var(--yfs-choice-bg);
	cursor: pointer;
	vertical-align: middle;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.yfs-generic form input[type="checkbox"],
.yfs-gf .gform_wrapper input[type="checkbox"],
.yfs-nf .nf-form-cont input[type="checkbox"],
.yfs-cf7 .wpcf7 input[type="checkbox"] {
	border-radius: var(--yfs-choice-radius);
}

.yfs-generic form input[type="radio"],
.yfs-gf .gform_wrapper input[type="radio"],
.yfs-nf .nf-form-cont input[type="radio"],
.yfs-cf7 .wpcf7 input[type="radio"] {
	border-radius: 50%;
}

.yfs-generic form input[type="checkbox"]::before,
.yfs-generic form input[type="radio"]::before,
.yfs-gf .gform_wrapper input[type="checkbox"]::before,
.yfs-gf .gform_wrapper input[type="radio"]::before,
.yfs-nf .nf-form-cont input[type="checkbox"]::before,
.yfs-nf .nf-form-cont input[type="radio"]::before,
.yfs-cf7 .wpcf7 input[type="checkbox"]::before,
.yfs-cf7 .wpcf7 input[type="radio"]::before {
	content: "";
	width: 62%;
	height: 62%;
	background-color: var(--yfs-choice-glyph);
	transform: scale(0);
	transition: transform 0.12s ease-in-out;
}

.yfs-generic form input[type="checkbox"]::before,
.yfs-gf .gform_wrapper input[type="checkbox"]::before,
.yfs-nf .nf-form-cont input[type="checkbox"]::before,
.yfs-cf7 .wpcf7 input[type="checkbox"]::before {
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.yfs-generic form input[type="radio"]::before,
.yfs-gf .gform_wrapper input[type="radio"]::before,
.yfs-nf .nf-form-cont input[type="radio"]::before,
.yfs-cf7 .wpcf7 input[type="radio"]::before {
	width: 50%;
	height: 50%;
	border-radius: 50%;
}

.yfs-generic form input[type="checkbox"]:checked::before,
.yfs-generic form input[type="radio"]:checked::before,
.yfs-gf .gform_wrapper input[type="checkbox"]:checked::before,
.yfs-gf .gform_wrapper input[type="radio"]:checked::before,
.yfs-nf .nf-form-cont input[type="checkbox"]:checked::before,
.yfs-nf .nf-form-cont input[type="radio"]:checked::before,
.yfs-cf7 .wpcf7 input[type="checkbox"]:checked::before,
.yfs-cf7 .wpcf7 input[type="radio"]:checked::before {
	transform: scale(1);
}

.yfs-generic form input[type="checkbox"]:checked,
.yfs-generic form input[type="radio"]:checked,
.yfs-gf .gform_wrapper input[type="checkbox"]:checked,
.yfs-gf .gform_wrapper input[type="radio"]:checked,
.yfs-nf .nf-form-cont input[type="checkbox"]:checked,
.yfs-nf .nf-form-cont input[type="radio"]:checked,
.yfs-cf7 .wpcf7 input[type="checkbox"]:checked,
.yfs-cf7 .wpcf7 input[type="radio"]:checked {
	background: var(--yfs-choice-checked-bg);
	border-color: var(--yfs-choice-checked-border-color);
}

.yfs-generic form input[type="checkbox"]:focus-visible,
.yfs-generic form input[type="radio"]:focus-visible,
.yfs-gf .gform_wrapper input[type="checkbox"]:focus-visible,
.yfs-gf .gform_wrapper input[type="radio"]:focus-visible,
.yfs-nf .nf-form-cont input[type="checkbox"]:focus-visible,
.yfs-nf .nf-form-cont input[type="radio"]:focus-visible,
.yfs-cf7 .wpcf7 input[type="checkbox"]:focus-visible,
.yfs-cf7 .wpcf7 input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--yfs-choice-focus-ring);
}

/* Intitulé associé à une case / un bouton radio */
.yfs-generic form label:has(> input[type="checkbox"]),
.yfs-generic form label:has(> input[type="radio"]),
.yfs-gf .gform_wrapper .gfield_checkbox label,
.yfs-gf .gform_wrapper .gfield_radio label,
.yfs-cf7 .wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--yfs-choice-gap);
	color: var(--yfs-choice-label-color);
}

/* -------------------------------------------------------------------------- *
 * Liste déroulante personnalisée (remplacement JS accessible)               *
 * -------------------------------------------------------------------------- */

.yfs-select {
	position: relative;
	display: block;
	margin-bottom: var(--yfs-margin-bottom);
}

.yfs-select__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.yfs-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	margin-bottom: 0;
	text-align: left;
	cursor: pointer;
}

.yfs-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yfs-select__list {
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	max-height: var(--yfs-panel-max-height);
	overflow-y: auto;
	background: var(--yfs-panel-bg);
	border: var(--yfs-panel-border-width) solid var(--yfs-panel-border-color);
	border-radius: var(--yfs-panel-radius);
	box-shadow: var(--yfs-panel-shadow);
}

.yfs-select__list[hidden] {
	display: none;
}

.yfs-select--up .yfs-select__list {
	top: auto;
	bottom: 100%;
	margin: 0 0 4px;
}

.yfs-select--disabled .yfs-select__button {
	opacity: var(--yfs-disabled-opacity);
	cursor: not-allowed;
}

.yfs-select__option {
	padding: var(--yfs-option-pad-y) var(--yfs-option-pad-x);
	color: var(--yfs-option-color);
	background: var(--yfs-option-bg);
	border-radius: calc(var(--yfs-panel-radius) - 3px);
	cursor: pointer;
}

.yfs-select__option[aria-selected="true"] {
	color: var(--yfs-option-selected-color);
	background: var(--yfs-option-selected-bg);
	font-weight: 600;
}

.yfs-select__option.is-active,
.yfs-select__option:hover {
	color: var(--yfs-option-hover-color);
	background: var(--yfs-option-hover-bg);
}

.yfs-select__option[aria-disabled="true"] {
	opacity: var(--yfs-disabled-opacity);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------- *
 * Réduction des animations                                                   *
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.yfs-generic form :is(input, textarea, select),
	.yfs-gf .gform_wrapper :is(input, textarea, select),
	.yfs-nf .nf-form-cont :is(input, textarea, select),
	.yfs-cf7 .wpcf7 :is(input, textarea, select),
	.yfs-select__button,
	.yfs-select__option,
	[type="checkbox"]::before,
	[type="radio"]::before {
		transition: none !important;
	}
}