/* ─────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────── */

.btn {
	padding: .35rem .6rem;
}

.btn:hover {
	background: #FFE9DB;
	border-color: #FFD2B5;
}

a:focus {
	box-shadow: none;
}

.pagination .btn {
	font-size: var(--font-size-m);
}

/* ─── Simulator navigation buttons ─── */

.simulator-content .pagination .btn {
	font-family: var(--font-family-sofiapro-medium);
	border-radius: 12px;
	padding: 12px 24px;
	min-height: 48px;
	font-size: var(--font-size-l);
	text-transform: none;
	letter-spacing: 0;
	transition:
		box-shadow 0.2s ease,
		transform 0.15s ease,
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

/* Primary: Suivant / Voir mes résultats */
.simulator-content .pagination .btn-primary {
	background-color: var(--cerulean-blue);
	border-color: var(--cerulean-blue);
	color: var(--white);
	box-shadow: 0 2px 8px rgba(58, 90, 199, 0.35);
}

.simulator-content .pagination .btn-primary:hover {
	background-color: var(--cerulean-blue);
	border-color: var(--cerulean-blue);
	box-shadow: 0 4px 16px rgba(58, 90, 199, 0.45);
	transform: translateY(-1px);
}

.simulator-content .pagination .btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(58, 90, 199, 0.2);
}

/* Secondary ghost: Précédent */
.simulator-content .pagination .btn:not(.btn-primary) {
	background-color: transparent;
	border-color: transparent;
	color: #999;
	box-shadow: none;
}

.simulator-content .pagination .btn:not(.btn-primary):hover {
	background-color: rgba(58, 90, 199, 0.06);
	border-color: transparent;
	color: var(--gulf-blue);
	transform: none;
	box-shadow: none;
}

/* ─────────────────────────────────────────────
   Simulator layout
   ───────────────────────────────────────────── */

#results ~ .pagination {
	display: none !important;
}

.simulator-content {
	background-color: var(--romantic);
	margin: 0 auto;
	padding: 20px;
	height: 100%;
}

.simulator-content h1 {
	text-align: center;
	margin-bottom: 30px;
	font-size: var(--font-size-xl);
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	.simulator-content h1 {
		font-size: var(--font-size-l);
		margin-bottom: 36px;
	}
}

.simulator {
	border-radius: 20px;
	padding-top: 0;
	padding-bottom: 30px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--white);
	max-width: 1200px;
}

.simulator-header {
	display: flex;
	align-items: center;
	position: relative;
}

.simulator-header img {
	width: 80px;
	height: auto;
	margin-top: -30px;
	margin-left: auto;
	margin-right: auto;
}

.simulator-body {
	font-family: var(--font-family-sofiapro-medium);
	min-height: 420px;
}

/* ─────────────────────────────────────────────
   Zangdar wizard transitions
   ───────────────────────────────────────────── */

.zangdar__wizard > section {
	display: none;
}

.zangdar__wizard {
	display: block;
	position: relative;
}

.zangdar__wizard .zangdar__step {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
}

.zangdar__wizard .zangdar__step.zangdar__step__active {
	display: block;
	opacity: 1;
	z-index: 1;
	height: auto;
	width: auto;
	overflow: visible;
	transform: translateY(0);
	transition:
		opacity .5s ease-out,
		transform .5s ease-out;
}

/* ─────────────────────────────────────────────
   Progress bar
   ───────────────────────────────────────────── */

.simulator-progress {
	max-width: 600px;
	margin: 0 auto 20px;
	padding: 0 20px;
}

.simulator-progress__label {
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-m);
	color: #888;
	margin-bottom: 8px;
	text-align: center;
}

.progress-bar {
	height: 8px;
	background-color: #e8e8e8;
	border-radius: 4px;
	overflow: hidden;
}

.progress-bar__fill {
	height: 100%;
	background-color: var(--cerulean-blue);
	border-radius: 4px;
	transition: width 0.5s ease-out;
	width: 0%;
}

/* ─────────────────────────────────────────────
   Welcome step
   ───────────────────────────────────────────── */

.simulator-welcome {
	text-align: center;
	padding: 40px 20px;
	max-width: 600px;
	margin: 0 auto;
}

.simulator-welcome h2 {
	font-family: var(--font-family-rubik-bold);
	font-size: var(--font-size-xl);
	color: var(--gulf-blue);
	line-height: 1.2;
	margin-bottom: 16px;
}

.simulator-welcome p {
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-m);
	color: #666;
	line-height: 1.5;
	margin-bottom: 30px;
}

.simulator-cta {
	background-color: var(--coral) !important;
	border-color: var(--coral) !important;
	color: var(--white) !important;
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-l);
	padding: 14px 32px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(255, 124, 85, 0.3);
	transition: box-shadow 0.2s ease, transform 0.15s ease;
	white-space: normal;
	max-width: 100%;
}

.simulator-cta:hover {
	box-shadow: 0 6px 20px rgba(255, 124, 85, 0.4);
	transform: translateY(-1px);
	background-color: var(--coral) !important;
}

.trust-signals {
	list-style: none;
	padding: 0;
	margin: 30px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	width: fit-content;
}

.trust-signals li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #666;
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-l);
	text-align: left;
}

.trust-signals li svg {
	width: 20px;
	height: 20px;
	stroke: var(--cerulean-blue);
	fill: none;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   Trust logos (step 5 social proof)
   ───────────────────────────────────────────── */

.simulator-trust-logos {
	margin: 24px 0 8px;
	text-align: center;
}

.simulator-trust-logos__label {
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-s);
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}

.simulator-trust-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
}

.simulator-trust-logos__row img {
	height: 28px;
	width: auto;
	filter: grayscale(1) opacity(0.55);
	object-fit: contain;
}

/* ─────────────────────────────────────────────
   Step question title + subtitle
   ───────────────────────────────────────────── */

.step-question__title {
	font-family: var(--font-family-rubik-bold);
	font-size: var(--font-size-l);
	color: var(--gulf-blue);
	margin-bottom: 8px;
	line-height: 1.3;
}

.step-question__subtitle {
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-l);
	color: #888;
	margin-bottom: 16px;
	line-height: 1.4;
}

/* ─────────────────────────────────────────────
   Selectable card component
   ───────────────────────────────────────────── */

.selectable-cards-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.selectable-cards-group--inline {
	flex-direction: row;
}

.selectable-cards-group--inline .selectable-card__title {
	font-size: var(--font-size-m);
	white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Selectable cards — 2-column grid variant
   ───────────────────────────────────────────── */

.selectable-cards-group--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.selectable-cards-group--grid .selectable-card__title {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--font-size-m);
}

.selectable-cards-group--grid .selectable-card__description {
	font-size: 13px;
}

/* Override the icon-indent rule for grid layout */
.selectable-cards-group--grid .selectable-card__title:has(.selectable-card__icon) + .selectable-card__description {
	margin-left: 0;
}

/* ─────────────────────────────────────────────
   Selectable cards — vertical ordered scale variant
   ───────────────────────────────────────────── */

.selectable-cards-group--scale {
	/* default column layout from .selectable-cards-group already applies */
	gap: 10px;
}

.selectable-cards-group--scale .selectable-card {
	padding-right: 52px; /* room for the check icon only — pill sits inline in title */
}

.selectable-cards-group--scale .selectable-card__title {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	font-size: 18px;
}

.selectable-cards-group--scale .selectable-card__title-label {
	flex: 1;
	min-width: 0;
}

/* Description aligns with the icon-indented text on this variant too */
.selectable-cards-group--scale .selectable-card__description {
	margin-top: 4px;
	font-size: 13px;
}

/* ─────────────────────────────────────────────
   Selectable cards — slim radio-row variant
   ───────────────────────────────────────────── */

.selectable-cards-group--slim {
	gap: 8px;
}

.selectable-cards-group--slim .selectable-card {
	padding: 11px 16px;
}

.selectable-cards-group--slim .selectable-card__title {
	font-size: var(--font-size-m);
}

.selectable-card {
	position: relative;
	width: 100%;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 11px 44px 11px 16px;
	background: var(--white);
	cursor: pointer;
	text-align: left;
	font-family: var(--font-family-sofiapro-regular);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0;
	transform: translateY(20px);
	animation: cardFadeIn 0.3s ease forwards;
	animation-delay: var(--delay, 0s);
}

.selectable-card:hover {
	border-color: var(--cerulean-blue);
	box-shadow: 0 2px 8px rgba(58, 90, 199, 0.15);
	transform: scale(1.02);
}

.selectable-card:active {
	transform: scale(0.98);
}

.selectable-card.selected {
	border-color: var(--cerulean-blue);
	background-color: rgba(58, 90, 199, 0.07);
	box-shadow: 0 2px 12px rgba(58, 90, 199, 0.2);
}

.selectable-card.selected .selectable-card__icon {
	background-color: rgba(58, 90, 199, 0.18);
}

.selectable-card:focus {
	outline: 2px solid var(--cerulean-blue);
	outline-offset: 2px;
}

@keyframes cardFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.selectable-card__check {
	position: absolute;
	right: 12px;
	top: 50%;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: transparent;
	border: 2px solid #d0d5dd;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.selectable-card.selected .selectable-card__check {
	background-color: var(--cerulean-blue);
	border-color: var(--cerulean-blue);
}

.selectable-card__check svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--white);
	stroke-width: 3;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.selectable-card.selected .selectable-card__check svg {
	opacity: 1;
}

.selectable-card__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-l);
	color: var(--gulf-blue);
}

.selectable-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: rgba(58, 90, 199, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.selectable-card__icon svg {
	width: 22px;
	height: 22px;
	stroke: none;
	fill: var(--cerulean-blue);
	stroke-width: 0;
}

/* Phosphor duotone: secondary layer at reduced opacity */
.selectable-card__icon svg [opacity] {
	opacity: 0.25;
}

.selectable-card__description {
	margin-top: 6px;
	margin-left: 0;
	font-size: var(--font-size-m);
	color: #666;
	line-height: 1.4;
}

/* Indent only when the card has an icon in the title */
.selectable-card__title:has(.selectable-card__icon) + .selectable-card__description {
	margin-left: 52px;
}

/* ─────────────────────────────────────────────
   Input with euro suffix
   ───────────────────────────────────────────── */

.input-with-suffix {
	position: relative;
	display: flex;
	align-items: center;
}

.input-with-suffix .form-input {
	padding-right: 60px;
}

.input-suffix {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-m);
	pointer-events: none;
}

/* ─────────────────────────────────────────────
   Zip code inline validation
   ───────────────────────────────────────────── */

.form-input.is-error {
	border-color: #e85600;
}

/* ─────────────────────────────────────────────
   Non-IDF confirmation card (step 0)
   ───────────────────────────────────────────── */

.cp-confirm-card {
	margin-top: 16px;
	padding: 20px;
	background: var(--peach-cream);
	border-radius: 12px;
	color: var(--gulf-blue);
	font-family: var(--font-family-sofiapro-regular);
}

.cp-confirm-card__message {
	margin: 0 0 16px;
	line-height: 1.5;
	font-size: var(--font-size-m);
}

.cp-confirm-card__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.cp-confirm-card__actions .btn {
	font-family: var(--font-family-sofiapro-medium);
	border-radius: 12px;
	padding: 10px 20px;
	min-height: 44px;
	font-size: var(--font-size-m);
	text-transform: none;
	letter-spacing: 0;
}

.cp-confirm-card__actions .btn-primary {
	background-color: var(--cerulean-blue);
	border-color: var(--cerulean-blue);
	color: var(--white);
	box-shadow: 0 2px 8px rgba(58, 90, 199, 0.35);
}

.cp-confirm-card__actions .btn-primary:hover {
	background-color: var(--cerulean-blue);
	border-color: var(--cerulean-blue);
	box-shadow: 0 4px 16px rgba(58, 90, 199, 0.45);
	transform: translateY(-1px);
}

.cp-confirm-card__actions .btn:not(.btn-primary) {
	background-color: transparent;
	border-color: var(--cerulean-blue);
	color: var(--cerulean-blue);
}

.cp-confirm-card__actions .btn:not(.btn-primary):hover {
	background-color: rgba(58, 90, 199, 0.06);
	border-color: var(--cerulean-blue);
	color: var(--gulf-blue);
}

/* ─────────────────────────────────────────────
   Form radio (legacy, used in results page)
   ───────────────────────────────────────────── */

.form-radio input:checked + .form-icon {
	background: #3A5AC7;
	border-color: #3A5AC7;
}

/* ─────────────────────────────────────────────
   Tooltip
   ───────────────────────────────────────────── */

.table td, .table th {
	padding: .3rem .4rem;
}

span.tooltip::after {
	max-width: max-content;
}


/* ─────────────────────────────────────────────
   Results: verdict layout (Option C)
   ───────────────────────────────────────────── */

.result-nonidf-banner {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--peach-cream);
	border-radius: 8px;
	color: var(--gulf-blue);
	line-height: 1.5;
	font-size: var(--font-size-m);
}

.result-verdict {
	font-family: var(--font-family-sofiapro-regular);
	color: var(--gulf-blue);
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 4px;
}

/* ── Hero ── */

.result-verdict__hero {
	text-align: center;
	padding: 8px 0 28px;
}

.result-verdict__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-m);
	color: #2ea043;
	margin: 0 0 12px;
}

.result-verdict__eyebrow-icon {
	color: #2ea043;
	flex-shrink: 0;
}

.result-verdict__amount {
	font-family: var(--font-family-rubik-bold);
	font-size: 52px;
	line-height: 1.05;
	color: var(--gulf-blue);
	margin: 0 0 6px;
}

.result-verdict__amount-unit {
	font-family: var(--font-family-sofiapro-regular);
	font-size: 0.4em;
	color: #888;
	margin-left: 4px;
	vertical-align: middle;
}

.result-verdict__label {
	font-size: var(--font-size-l);
	color: #666;
	margin: 0 0 20px;
}

/* ── Comparison callout ── */

.result-comparison {
	max-width: 520px;
	margin: 16px auto 0;
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-m);
	line-height: 1.6;
	color: var(--gulf-blue);
	text-align: center;
}

.result-comparison strong {
	font-family: var(--font-family-rubik-bold);
	color: var(--coral);
	white-space: nowrap;
}

.result-estimate-note {
	max-width: 480px;
	margin: 12px auto 0;
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-s);
	line-height: 1.5;
	color: #666;
	font-style: italic;
	text-align: center;
}

/* ── Breakdown ── */

.result-breakdown {
	border-top: 1px solid #eaeaea;
	padding: 24px 8px;
}

.result-breakdown__title {
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-m);
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 16px;
}

.result-group {
	margin-bottom: 18px;
}

.result-group__title {
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-l);
	color: var(--gulf-blue);
	margin: 0 0 8px;
}

.result-group__list + .result-group__title {
	margin-top: 16px;
}

.result-group__list {
	list-style: none;
	padding: 0;
	margin: 0 0 4px;
}

.result-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 4px;
	font-size: var(--font-size-m);
	color: var(--gulf-blue);
}

.result-line__label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	row-gap: 0;
	color: #444;
}

.result-line__sublabel {
	flex-basis: 100%;
	margin-top: 2px;
	font-size: var(--font-size-s);
	font-weight: 400;
	color: #666;
}

.result-line__value {
	font-family: var(--font-family-sofiapro-medium);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.result-line__value--credit {
	color: #2ea043;
}

.result-line--with-includes {
	flex-wrap: wrap;
	row-gap: 0;
}

.result-line__includes {
	flex-basis: 100%;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--font-size-s);
	color: #666;
}

.result-line__includes li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	line-height: 1.4;
}

.result-line__includes-icon {
	color: #2ea043;
	flex-shrink: 0;
	margin-top: 2px;
}

.result-group__subtotal {
	border-top: 1px dashed #d0d5dd;
	padding: 6px 4px 0;
	text-align: right;
	font-family: var(--font-family-sofiapro-medium);
	font-variant-numeric: tabular-nums;
	color: var(--gulf-blue);
}

.result-group__subtotal--credit {
	color: #2ea043;
}

.result-info {
	background: none;
	border: 0;
	margin-left: 6px;
	padding: 0;
	cursor: help;
	color: #888;
	vertical-align: middle;
	position: relative;
	display: inline-flex;
	align-items: center;
}

.result-info:hover,
.result-info:focus-visible {
	color: var(--gulf-blue);
}

.result-info::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--gulf-blue);
	color: var(--white);
	padding: 8px 12px;
	border-radius: 6px;
	font-family: var(--font-family-sofiapro-regular);
	font-size: 12px;
	line-height: 1.4;
	white-space: normal;
	width: max-content;
	max-width: 240px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 10;
}

.result-info:hover::after,
.result-info:focus-visible::after {
	opacity: 1;
}

/* ── Stepper inline ── */

.result-stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.result-stepper__btn {
	background: transparent;
	border: 1px solid #d0d5dd;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cerulean-blue);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.result-stepper__btn:hover {
	background: rgba(58, 90, 199, 0.08);
	border-color: var(--cerulean-blue);
}

.result-stepper__btn:focus-visible {
	outline: 2px solid var(--cerulean-blue);
	outline-offset: 2px;
}

/* ── Final total ── */

.result-final {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 14px;
	padding: 14px 12px;
	background: var(--romantic);
	border-radius: 12px;
}

.result-final__label {
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-l);
	color: var(--gulf-blue);
}

.result-final__value {
	font-family: var(--font-family-rubik-bold);
	font-size: var(--font-size-xl);
	color: var(--coral);
	font-variant-numeric: tabular-nums;
}

.result-final__unit {
	font-family: var(--font-family-sofiapro-regular);
	font-size: 0.55em;
	color: var(--gulf-blue);
	margin-left: 4px;
}

/* ── Next steps timeline ── */

.result-next {
	border-top: 1px solid #eaeaea;
	padding: 24px 8px;
}

.result-next__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-l);
	color: var(--gulf-blue);
	margin: 0 0 16px;
}

.result-next__title-icon {
	color: var(--cerulean-blue);
}

.result-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: timeline;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.result-timeline__step {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--font-size-m);
	color: var(--gulf-blue);
}

.result-timeline__num {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(58, 90, 199, 0.1);
	color: var(--cerulean-blue);
	font-family: var(--font-family-rubik-bold);
	font-size: var(--font-size-m);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Trust logos ── */

.result-trust {
	border-top: 1px solid #eaeaea;
	padding: 20px 8px 8px;
	text-align: center;
}

.result-trust__label {
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-s);
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
}

.result-trust__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
}

.result-trust__row img {
	height: 32px;
	width: auto;
	filter: grayscale(1) opacity(0.55);
	object-fit: contain;
}

/* ── Responsive tweaks ── */

@media screen and (max-width: 540px) {
	.result-verdict__amount {
		font-size: 40px;
	}

	.result-comparison {
		font-size: var(--font-size-s);
	}

	.result-final__value {
		font-size: var(--font-size-l);
	}

	.result-line {
		flex-wrap: wrap;
	}
}

/* ─────────────────────────────────────────────
   Card selection error & shake
   ───────────────────────────────────────────── */

.card-error {
	color: #e85600;
	font-size: var(--font-size-m);
	margin-top: 8px;
	font-family: var(--font-family-sofiapro-regular);
}

.field-error {
	color: #e85600;
	font-size: var(--font-size-m);
	margin-top: 4px;
	font-family: var(--font-family-sofiapro-regular);
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-6px); }
	40%       { transform: translateX(6px); }
	60%       { transform: translateX(-4px); }
	80%       { transform: translateX(4px); }
}

.selectable-cards-group.shake {
	animation: shake 0.4s ease;
}

/* ─────────────────────────────────────────────
   Field hint (replaces CSS-only tooltip)
   ───────────────────────────────────────────── */

.field-hint {
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-m);
	color: #888;
	margin-top: 4px;
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   Fetch error in results step
   ───────────────────────────────────────────── */

.simulator-fetch-error {
	text-align: center;
	padding: 40px 20px;
	color: #e85600;
}

.simulator-fetch-error p {
	margin-bottom: 16px;
}

/* ─────────────────────────────────────────────
   No-services state (moved from inline <style>)
   ───────────────────────────────────────────── */

ul#steps-native {
	display: none;
}

div.no-services {
	color: #FF7C55;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	align-self: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

img.img-no-service {
	max-width: 404px;
	height: auto;
}

div.no-services .title {
	font-family: var(--font-family-rubik-bold);
	font-size: 34px;
}

div.no-services .subtitle {
	color: #3A5AC7;
	font-size: 20px;
}

div.no-services svg {
	width: 4em;
	height: auto;
}

/* ─────────────────────────────────────────────
   Form row spacing
   ───────────────────────────────────────────── */

.form-field {
	position: relative;
	margin-bottom: 16px;
}

@media (min-width: 768px) {
	.simulator-body .col-mx-auto {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}

.simulator-content .form-group {
	display: block;
	margin-bottom: 20px;
}

.simulator-content .form-group:last-child {
	margin-bottom: 0;
}

.simulator-content .form-field .form-label {
	position: absolute;
	top: 14px;
	left: 16px;
	padding: 0;
	margin: 0;
	pointer-events: none;
	color: #888;
	background: transparent;
	transition: top 0.15s ease-out, font-size 0.15s ease-out, color 0.15s ease-out;
	max-width: calc(100% - 32px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.simulator-content .form-field .form-input:focus ~ .form-label,
.simulator-content .form-field .form-input:not(:placeholder-shown) ~ .form-label,
.simulator-content .form-field .form-select:focus ~ .form-label,
.simulator-content .form-field .form-select:has(option:checked:not([value=""])) ~ .form-label,
.simulator-content .form-field textarea.form-input:focus ~ .form-label,
.simulator-content .form-field textarea.form-input:not(:placeholder-shown) ~ .form-label {
	top: 4px;
	transform: translateY(0);
	font-size: 12px;
	color: var(--cerulean-blue);
}

.simulator-content .form-field textarea.form-input {
	height: auto;
	min-height: 80px;
	padding-top: 18px;
}

.simulator-content .form-label--standalone {
	display: block;
	padding: 0 0 10px;
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-m);
	color: var(--gulf-blue);
	line-height: 1.4;
}

/* ─────────────────────────────────────────────
   Premium input / select / label overrides
   ───────────────────────────────────────────── */

.simulator-content .form-label {
	font-family: var(--font-family-sofiapro-medium);
	font-size: var(--font-size-m);
	color: var(--gulf-blue);
	line-height: 1.4;
	padding: 0;
}

.simulator-content .form-input,
.simulator-content .form-select {
	background: #fff;
	border: 1.5px solid #d0d5dd;
	border-radius: 10px;
	font-family: var(--font-family-sofiapro-regular);
	font-size: var(--font-size-l);
	height: 48px;
	padding: 18px 16px 4px;
	color: var(--gulf-blue);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.simulator-content .form-input:focus,
.simulator-content .form-select:focus {
	background: #fff;
	border-color: var(--cerulean-blue);
	box-shadow: 0 0 0 3px rgba(58, 90, 199, 0.15);
}

.simulator-content .form-input.is-error {
	border-color: #e85600;
	background: #fff;
}

.simulator-content .form-input::placeholder {
	color: #adb5bd;
	font-size: var(--font-size-l);
}

.simulator-content .form-select:not([multiple]):not([size]) {
	background-color: #fff;
	background-position: right .8rem center;
	padding-right: 2rem;
	height: 48px;
}

.input-with-suffix .form-input {
	padding-right: 72px;
}

/* ─────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────── */

/* Step section horizontal padding on mobile */
@media screen and (max-width: 767px) {
	.zangdar__wizard section[data-step]:not([data-step="Résultat"]) {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* Stack inline cards (Oui/Non) on very small screens */
@media screen and (max-width: 400px) {
	.selectable-cards-group--inline {
		flex-direction: column;
	}

	.selectable-cards-group--grid {
		grid-template-columns: 1fr;
	}
}

/* Minimum touch target for nav buttons */
.pagination .btn {
	min-height: 44px;
	min-width: 44px;
}

/* Push Suivant to the right, Précédent to the left */
.simulator-content .pagination {
	padding: 0;
	margin-top: 28px;
}

.simulator-content .pagination .page-next {
	display: flex;
	justify-content: flex-end;
}

/* Button icon (SVG arrow) */
.simulator-content .pagination .btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

@media screen and (min-width: 768px) {
	.pagination .btn {
		font-size: var(--font-size-l);
	}

	.btn {
		padding-left: 20px;
		padding-right: 20px;
	}

	.simulator-content h1 {
		margin-bottom: 65px;
	}

	.simulator-header img {
		width: 150px;
		margin-top: -50px;
	}

	.simulator-welcome h2 {
		font-size: var(--font-size-xxl);
	}

	.simulator-welcome p {
		font-size: var(--font-size-l);
	}

	.step-question__title {
		font-size: var(--font-size-xl);
	}

	.step-question__subtitle {
		font-size: var(--font-size-l);
	}

	.selectable-card__title {
		font-size: var(--font-size-xl);
	}

	.selectable-cards-group--grid .selectable-card__title,
	.selectable-cards-group--slim .selectable-card__title {
		font-size: var(--font-size-m);
	}

	.selectable-card__description {
		font-size: var(--font-size-l);
	}

	.selectable-cards-group--grid .selectable-card__description {
		font-size: 13px;
	}

	.simulator-content .form-label {
		font-size: var(--font-size-l);
	}

	.simulator-content .form-input,
	.simulator-content .form-select {
		font-size: var(--font-size-l);
		height: 48px;
	}

	.simulator-content .form-input::placeholder {
		font-size: var(--font-size-l);
	}

	.simulator-content .form-select:not([multiple]):not([size]) {
		height: 48px;
	}
}