form {
	display: flex;
	gap: 24px;
	flex-direction: column;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

form label,
span.label,
.radio-grid-group__legend {
	font-size: 18px;
	line-height: 22px;
	font-weight: 800;
}

select {
	position: relative;
	width: 100%;
	appearance: none;
	background-color: var(--color-white);
}

select::before {
	content: '\0704';
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: 'Tribee Icons';
	font-weight: normal;
}

select::-ms-expand {
	display: none;
}

select,
input {
	--computed-padding-right: calc(var(--padding-right, 0px) + var(--counter-size, 0px) + var(--icon-size, 0px));
	border-radius: 50px;
	position: relative;
}

textarea {
	border-radius: 16px;
	min-height: 224px;
	resize: vertical;
}

input,
select,
textarea {
	--padding-right: 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	padding: 16px var(--computed-padding-right, 16px) 16px 24px;
	color: var(--color-praline);
	border-color: var(--color-praline);
	border-width: 1px;
	border-style: solid;
}

input[type="date"] {
	/* to manage ios default grey bg */
	background-color: white;
}

input:not([type="date"]):not(:placeholder-shown),
input[type="date"]:valid,
select,
textarea:not(:placeholder-shown) {
	border-color: var(--color-mandarin);
	border-width: 2px;
	color: var(--color-carbone);
}

input:focus,
textarea:focus,
select:focus {
	border-width: 1px;
	border-color: var(--color-mandarin);
	outline: 3px solid var(--color-eggshell);
	color: var(--color-carbone);
}

input,
input::placeholder,
textarea {
	color: var(--color-praline);
	font-family: var(--body-regular-xl-ff);
	font-weight: var(--body-regular-xl-fw);
	line-height: var(--body-regular-xl-lh);
	text-rendering: var(--body-regular-xl-tr);
	letter-spacing: var(--body-regular-xl-ls);
	font-size: var(--body-regular-xl-fs);
}

.input-money::placeholder {
	font-family: var(--title-m-ff);
	font-size: var(--title-m-fs);
	line-height: var(--title-m-lh);
	letter-spacing: var(--title-m-ls);
	font-weight: var(--weight-body);
}

.input-group-error.input-group-error input,
.input-group-error.input-group-error select,
.input-group-error.input-group-error textarea {
	border-color: var(--color-raspberry);
	outline: 3px solid var(--color-blush);
}

.input-error-list {
	color: var(--color-raspberry);
	font-size: 11px;
	line-height: 18px;
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-weight: 600;
}

.error-alert {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--color-blush);
	border: 2px solid var(--color-raspberry);
	border-radius: 50px;
	padding: 15px 28px;
	margin: 28px 0 28px;
}

.error-alert.hidden {
	display: none;
}

.error-alert .error-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-raspberry);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
}

.error-alert .error-msg {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-carbone);
	margin: 0;
}

input[disabled],
textarea[disabled],
form button[disabled],
form select[disabled] {
	background-color: var(--color-eggshell);
	border-color: var(--color-caramel) !important;
	cursor: not-allowed;
}

input[disabled]::placeholder,
textarea[disabled]::placeholder {
	color: var(--color-caramel);
}


label.toggle {
	display: flex;
	flex-direction: column;
}

input[type=checkbox] {
	opacity: 0;
	width: 0;
	height: 0;
	user-select: none;
	aspect-ratio: 1;
}

input[type=checkbox]~span {
	position: relative;
	pointer-events: initial;
	display: inline-block;
	background-color: var(--color-eggshell);
	width: 54px;
	height: 32px;
	border-radius: 32px;
}

input[type=checkbox]~span:after {
	content: '';
	font-family: "Tribee Icons";
	width: 24px;
	height: 24px;
	border-radius: 16px;
	position: absolute;
	top: 4px;
	left: 4px;
	background-color: var(--color-white);
	color: var(--color-white);
	line-height: 1.8;
	text-align: center;
	font-size: 14px;
	transition: 0.3s;
}

input[type=checkbox]:checked~span:after {
	font-family: "Tribee Icons";
	content: '\0703';
	font-weight: normal;
	border-radius: 16px;
	position: absolute;
	color: var(--color-raspberry);
	transform: translateX(21px);
}

input[type=checkbox]:checked~span {
	background-color: var(--color-raspberry);
}



input[type=checkbox].checkbox {
	opacity: 1;
	display: inline-block;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-caramel);
	outline: none;
	border-radius: 4px;
	background-color: var(--color-white);
}

input[type=checkbox].checkbox:checked::before {
	content: '\0703';
	font-family: "Tribee Icons";
	color: var(--color-raspberry);
	position: absolute;
	transform: translate(25%, -15%);
}

input[type=checkbox].checkbox:checked {
	border: 2px solid var(--color-raspberry);
}

.input-box {
	position: relative;
	display: flex;
	flex-direction: column;
}

.input-left-toolbox {
	display: flex;
	position: absolute;
	padding: 0 16px;
	height: 100%;
}

.input-left-toolbox.eye {
	max-height: 60px;
}

.input-left-toolbox:not(.eye) {
	pointer-events: none;
}

select~.input-left-toolbox,
input~.input-left-toolbox {
	align-items: center;
	top: 0;
	right: 0;
}

textarea~.input-left-toolbox {
	align-items: center;
	bottom: 16px;
	right: 24px;
	padding: 0;
	right: 16px;
	height: auto
}

.reveal-password {
	font-size: 1.6em;
	color: var(--color-caramel);
	padding-left: 8px;
}

.input-box:has(.reveal-password) {
	--icon-size: 21px;
}

.word-count {
	order: -1;
	color: var(--color-chestnut);
	font-family: var(--body-regular-s-ff);
	font-size: var(--body-regular-s-fs);
	font-weight: var(--body-regular-s-fw);
	line-height: var(--body-regular-s-lh);
	text-rendering: var(--body-regular-s-tr);
	letter-spacing: var(--body-regular-s-ls);
}

.input-box:has(.word-count) {
	--counter-size: 54px;
}

.select-chevron {
	font-size: 1.6em;
	color: var(--color-praline);
}

button[type="submit"],
input[type="submit"] {
	margin-top: 16px;
}

small {
	text-align: left;
	color: var(--color-praline);
	font-family: var(--body-regular-l-ff);
	font-weight: var(--body-regular-l-fw);
	line-height: var(--body-regular-l-lh);
	text-rendering: var(--body-regular-l-tr);
	letter-spacing: var(--body-regular-l-ls);
	font-size: var(--body-regular-l-fs);
}


.input-box:has(.input-money) {
	width: 216px;
}

.input-money,
.input-money-symbol {
	font-family: var(--title-m-ff);
	font-weight: var(--title-m-fw);
	line-height: var(--title-m-lh);
	text-rendering: var(--title-m-tr);
	letter-spacing: var(--title-m-ls);
	font-size: var(--title-m-fs);
}

.input-money-symbol {
	padding-right: 9px;
}

/* === Range commons === */
/* === https://codepen.io/ShadowShahriar/pen/zYPPYrQ === */
.tips-range-container {
	width: 100%;
}

.tips-range.tips-range.tips-range {
	position: relative;
	width: 100%;
	padding: 0;
	border: none;
	overflow: hidden;
	border-radius: 0;
	color: var(--color-raspberry);
	--thumb-height: 46px;
	--track-height: 8px;
	--track-color: var(--color-eggshell);
	--brightness-hover: 180%;
	--brightness-down: 80%;
	--clip-edges: 0.125em;
	--image: url("../../images/components/tips-range/tips-range-cursor-T3MTpk3.png");
}

.tips-range:active {
	cursor: grabbing;
}

.tips-range.tips-range.tips-range:disabled {
	--image: url("../../images/components/tips-range/tips-range-cursor-disabled-IKhzPQe.png");
	color: var(--color-eggshell);
	background: none;
	cursor: not-allowed;
	pointer-events: none;
}

/* === WebKit specific styles === */
.tips-range,
.tips-range::-webkit-slider-runnable-track,
.tips-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: var(--thumb-height);
}

.tips-range::-webkit-slider-runnable-track,
.tips-range::-webkit-slider-thumb {
	position: relative;
}

.tips-range::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

	width: var(--thumb-width, var(--thumb-height));
	background: var(--image);
	background-position: center;
	background-size: auto var(--thumb-height);
	background-repeat: no-repeat;
	box-shadow: var(--box-fill);

	filter: brightness(100%);
	clip-path: polygon(100% -1px,
			var(--clip-edges) -1px,
			1px var(--clip-top),
			-100vmax var(--clip-top),
			-100vmax var(--clip-bottom),
			1px var(--clip-bottom),
			var(--clip-edges) 100%,
			var(--clip-further) var(--clip-further));
}

.tips-range:hover::-webkit-slider-thumb {
	filter: brightness(var(--brightness-hover));
	cursor: grab;
}

.tips-range:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down));
	cursor: grabbing;
}

.tips-range::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

.tips-range:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

/* === Firefox specific styles === */
.tips-range,
.tips-range::-moz-range-track,
.tips-range::-moz-range-thumb {
	appearance: none;
	height: var(--thumb-height);
}

.tips-range::-moz-range-track,
.tips-range::-moz-range-thumb,
.tips-range::-moz-range-progress {
	background: #fff0;
}

.tips-range::-moz-range-thumb {
	background: var(--image);
	background-position: center;
	background-size: auto var(--thumb-height);
	background-repeat: no-repeat;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	cursor: grab;
}

.tips-range:active::-moz-range-thumb {
	cursor: grabbing;
}

.tips-range::-moz-range-track {
	width: 100%;
	background: var(--track-color);
}

.tips-range::-moz-range-progress {
	appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

.tips-range::-moz-range-track,
.tips-range::-moz-range-progress {
	height: calc(var(--track-height) + 1px);
	border-radius: var(--track-height);
}

.tips-range::-moz-range-thumb,
.tips-range::-moz-range-progress {
	filter: brightness(100%);
}

.tips-range:hover::-moz-range-thumb,
.tips-range:hover::-moz-range-progress {
	filter: brightness(var(--brightness-hover));
}

.tips-range:active::-moz-range-thumb,
.tips-range:active::-moz-range-progress {
	filter: brightness(var(--brightness-down));
}

.tips-range:disabled::-moz-range-thumb {
	cursor: not-allowed;
}

.tips-range-container__minmax {
	display: flex;
	justify-content: space-between;
	font-family: var(--title-xxs-ff);
	font-weight: var(--title-xxs-fw);
	line-height: var(--title-xxs-lh);
	text-rendering: var(--title-xxs-tr);
	letter-spacing: var(--title-xxs-ls);
	font-size: var(--title-xxs-fs);
	transform: translateY(-10px);
}

.tips-range:focus {
	outline: none;
}

@media screen and (min-width: 720px) {
	input[type="date"] {
		width: fit-content;
	}
}

span.checkbox-container input[type="checkbox"]:checked~.help-text .not-checked {
	display: none;
}

.checkbox-container input[type="checkbox"]:not(:checked)~.help-text .checked {
	display: none;
}

span.checkbox-container input[type=checkbox]:checked~span.slider {
	background-color: var(--color-raspberry);
}

span.checkbox-container input[type=checkbox]:checked~span.slider:after {
	font-family: "Tribee Icons";
	content: '\0703';
	border-radius: 16px;
	position: absolute;
	color: var(--color-raspberry);
	transform: translateX(21px);
}

span.checkbox-container input[type=checkbox] {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 1;
}

span.checkbox-container span.slider {
	pointer-events: initial;
	display: inline-block;
	background-color: var(--color-caramel);
	border-radius: 32px;
	min-width: 54px;
	height: 32px;
}

span.checkbox-container span.slider:after {
	content: '\0708';
	font-family: "Tribee Icons";
	width: 24px;
	height: 24px;
	border-radius: 16px;
	position: absolute;
	top: 4px;
	left: 4px;
	background-color: var(--color-white);
	color: var(--color-caramel);
	line-height: 1.8;
	text-align: center;
	transition: 0.3s;
}

.suggestions-is-active {
	z-index: 4;
}


input.suggestions-input {
	z-index: 3;
}

.suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 2;
	/* Ensure it's above other elements */
	/* Hidden by default */
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.suggestions::before {
	content: '';
	width: 100%;
	height: 30px;
	position: absolute;
	top: -30px;
	background-color: #fff;
}

.suggestions li {
	cursor: pointer;
	list-style: none;
	padding: 10px 24px;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
}

.suggestions li:hover {
	background-color: #f0f0f0;
}

.suggestions-loader {
	margin: 8px auto;
}

form .toggle-input-group {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

form .toggle-input-group label {
	flex: 1 100%
}

form .toggle-input-group .input-box {
	width: 100%;
}

form .toggle-input-group .checkbox-container {
	flex: 1;
	display: flex;
	flex-direction: row-reverse;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
}

form .toggle-input-group .input-box input[type=checkbox] {
	cursor: pointer;
}

.phone-container {
	flex-grow: 1;
}

.phone-prefix-container {
	position: relative;
	width: 100px;

}

.number-phone-input {
	display: flex;
	column-gap: 10px;
}

.phone-input {
	width: 100%;
	box-sizing: border-box;
}

.phone-prefix-select {
	font-size: 12px;
	padding-left: 40px;
	background-position: 10px center;
	background-size: 24px 18px;
	background-repeat: no-repeat;
}

@media screen and (min-width: 720px) {
	.phone-prefix-container {
		width: 140px;

	}
}

input.border-red {
	border: 2px solid red !important;
}

.center-submit {
	margin: auto;
}

/* ============================================================================
   Groupe radio « carte » : chaque option est un <label> picto + titre
   (+ sous-titre optionnel), sélectionné via la bordure et la pastille de check.

   Tout passe par les tokens --color-* : surcharger --color-raspberry sur un
   conteneur suffit à reteinter le composant sans toucher à ces règles.

   Markup attendu (input + label adjacents, variantes --stack / --bare / --top) :
     <div class="radio-grid">
       <input type="radio" id="b0" name="ben">
       <label for="b0">
         <span class="radio-grid__icon radio-grid__icon--account" aria-hidden="true"></span>
         <span class="radio-grid__text">
           <span class="radio-grid__title">Moi</span>
           <span class="radio-grid__sub">Je reçois la cagnotte</span>   (optionnel)
         </span>
       </label>
     </div>
   ========================================================================== */
.radio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* input masqué mais focusable — flèches + Tab conservés */
.radio-grid input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* la carte = le <label> */
.radio-grid input[type="radio"]+label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 18px 20px;
	box-sizing: border-box;
	background: var(--color-white);
	border: 2px solid var(--color-eggshell);
	border-radius: 16px;
	box-shadow: 6px 6px 0 0 var(--color-eggshell);
	cursor: pointer;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* picto : SVG recolorable via mask + couleur token */
.radio-grid__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--color-creme, #FFF3E7);
	transition: background-color 140ms ease;
}

.radio-grid__icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background: var(--color-raspberry);
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
	transition: background-color 140ms ease;
}

/* jeu d'icônes disponible (l'URL vit dans le CSS — pas d'asset() dans le Twig) */
.radio-grid__icon--account {
	--ic: url("../../images/icons/account-zjygPtk.svg");
}

.radio-grid__icon--heart {
	--ic: url("../../images/icons/heart-Z9k_9gv.svg");
}

/* Bénéficiaire : les jars sont des illustrations couleur détaillées, pas des
   glyphes monochromes. On les peint comme image (jamais de mask) et on les
   dimensionne plus grand que la pastille pour qu'elles débordent du rond. */
.radio-grid__icon--jar-solo {
	--illustration: url("../../images/icons/jar-solo-KzT8sas.png");
}

.radio-grid__icon--jar-couple {
	--illustration: url("../../images/icons/jar-couple-BtXE8R8.png");
}

/* Pas de pastille pour les jars : l'illustration est affichée seule, agrandie
   à 135 % du gabarit d'icône, et jamais recolorée ni masquée. */
.radio-grid__icon.radio-grid__icon--jar-solo,
.radio-grid__icon.radio-grid__icon--jar-couple {
	background: none;
}

.radio-grid__icon.radio-grid__icon--jar-solo::before,
.radio-grid__icon.radio-grid__icon--jar-couple::before {
	width: 135%;
	height: 135%;
	-webkit-mask: none;
	mask: none;
	background: var(--illustration) center / contain no-repeat;
}

/* Sélection : on ne touche pas à l'illustration (ni pastille, ni inversion).
   L'état sélectionné reste porté par la bordure de la carte et le badge de
   check. La double classe passe devant les règles `:checked` génériques
   (même spécificité) sans dépendre de l'ordre. */
.radio-grid input[type="radio"]:checked+label .radio-grid__icon.radio-grid__icon--jar-solo,
.radio-grid input[type="radio"]:checked+label .radio-grid__icon.radio-grid__icon--jar-couple {
	background: none;
}

.radio-grid input[type="radio"]:checked+label .radio-grid__icon.radio-grid__icon--jar-solo::before,
.radio-grid input[type="radio"]:checked+label .radio-grid__icon.radio-grid__icon--jar-couple::before {
	background: var(--illustration) center / contain no-repeat;
}

.radio-grid__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.radio-grid__title {
	font: 800 16px/20px "Inter", system-ui, sans-serif;
	color: var(--color-carbone);
}

.radio-grid__sub {
	font: 400 13px/17px "Inter", system-ui, sans-serif;
	color: var(--color-praline);
}

/* hover — bordure accent (l'ombre eggshell ne bouge pas) */
.radio-grid input[type="radio"]:not(:checked):not(:disabled)+label:hover {
	border-color: var(--color-raspberry);
}

/* sélectionné — bordure accent + picto inversé + pastille check */
.radio-grid input[type="radio"]:checked+label {
	border-color: var(--color-raspberry);
}

.radio-grid input[type="radio"]:checked+label .radio-grid__icon {
	background: var(--color-raspberry);
}

.radio-grid input[type="radio"]:checked+label .radio-grid__icon::before {
	background: var(--color-white);
}

.radio-grid input[type="radio"]:checked+label::after {
	content: "";
	position: absolute;
	top: -9px;
	right: -9px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-raspberry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% no-repeat;
	box-shadow: 0 0 0 3px var(--color-white);
	animation: rg-pop 160ms ease-out;
}

/* focus clavier */
.radio-grid input[type="radio"]:focus-visible+label {
	outline: 2px solid var(--color-raspberry);
	outline-offset: 2px;
}

/* désactivé */
.radio-grid input[type="radio"]:disabled+label {
	opacity: .5;
	cursor: not-allowed;
}

/* variante : picto au-dessus du texte */
.radio-grid--top input[type="radio"]+label {
	flex-direction: column;
	align-items: flex-start;
}

/* variante : sans picto (texte seul) — sélection portée par bordure + check */
.radio-grid--bare input[type="radio"]+label {
	min-height: 60px;
}

/* option : forcer 1 colonne en permanence */
.radio-grid--stack {
	grid-template-columns: 1fr;
}

/* responsive — repli auto en 1 colonne <= 719px */
@media (max-width: 719px) {
	.radio-grid {
		grid-template-columns: 1fr;
	}
}

@keyframes rg-pop {
	from {
		transform: scale(0);
		opacity: 0;
	}

	60% {
		transform: scale(1.15);
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* fieldset + legend wrapper hosting a .radio-grid question */
.radio-grid-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.radio-grid-group__legend {
	padding: 0;
	margin: 0 0 14px;
}