:root {
		--fw-bg: #fff;
		--fw-text: #111827;
		--fw-muted: #6b7280;
		--fw-border: #e5e7eb;
		--fw-ring: #99c248;
		--fw-card: #fff
	}

	.green{
		color: var(--fw-ring);
	}

	.center {
		text-align: center;
	}

	.contact-form {
		background-color: #fefefe;
		margin: 0;
		padding: 2.65em 2em;
		padding-bottom: .1em;
		position: relative;
	}

	.contact-form h2{
		color: var(--fw-text);
	}

	footer .info {
		margin-top: 0em;
		position: relative;
		width: 100%;
	}

	.fw-wrap {
		max-width: 980px;
		margin: 24px auto;
		border: 1px solid var(--fw-border);
		border-radius: 16px;
		background: var(--fw-card);
		box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
		padding: 20px
	}

	.fw-steps {
		display: flex;
		gap: 8px;
		margin: 0 0 14px;
		padding: 0;
		list-style: none;
		flex-wrap: wrap
	}

	.fw-step {
		padding: 6px 10px;
		border-radius: 0px;
		border: 1px solid var(--fw-border);
		color: var(--fw-muted);
		font-weight: 700
	}

	.fw-step.is-active {
		border-color: var(--fw-ring);
		color: var(--fw-card);
		background: var(--fw-ring)
	}

	.fw-section {
		display: none;
		border: 1px dashed var(--fw-border);
		border-radius: 12px;
		background: var(--fw-bg);
		padding: 16px;
		margin-bottom: 12px
	}

	.fw-section.is-active {
		display: block
	}

	.fw-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px
	}

	@media(min-width:768px) {
		.fw-grid--two {
			grid-template-columns: 1fr 1fr
		}

		.fw-grid--three {
			grid-template-columns: repeat(3, 1fr)
		}

		.fw-grid--one--two {
			grid-template-columns: 1fr 2fr
		}
	}

	.fw-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-top: 20px;
	}

	.fw-label {
		font-weight: 700;
		color: var(--fw-ring);
	}

	.fw-input,
	.fw-select {
		font-size: 16px;
		border: 1px solid var(--fw-border);
		border-radius: 10px;
		padding: 10px 12px;
		background: var(--fw-bg);
		color: var(--fw-text);
		outline: none
	}

	.fw-input:focus,
	.fw-select:focus {
		border-color: var(--fw-ring);
		box-shadow: 0 0 0 4px rgba(37, 99, 235, .12)
	}

	.fw-help {
		font-size: .76rem;
		color: var(--fw-muted)
	}

	.fw-actions {
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		margin-top: 12px
	}

	.fw-btn {
		border: 0;
		border-radius: 10px;
		padding: 12px 16px;
		font-weight: 900;
		cursor: pointer
	}

	.fw-btn[disabled] {
		opacity: .6;
		cursor: not-allowed
	}

	.fw-btn--ghost {
		background: #fff;
		border: 1px solid var(--fw-border)
	}

	.fw-btn--primary {
		background: #111827;
		color: #fff
	}

	.fw-segment {
		display: flex;
		gap: 8px;
		flex-wrap: wrap
	}

	.fw-seg {
		border: 1px solid var(--fw-border);
		background: var(--fw-bg);
		border-radius: 999px;
		padding: 8px 12px;
		cursor: pointer;
		font-weight: 800
	}

	.fw-seg.is-active {
		border-color: var(--fw-ring);
		box-shadow: 0 0 0 1px rgba(173, 235, 37, 0.18);
	}

	input[type=range] {
		width: 100%;
		accent-color: var(--fw-ring)
	}

	.fw-readout {
		margin-top: 4px;
		font-variant-numeric: tabular-nums
	}

	.fw-result {
		font-size: 16px;
		border: 1px solid var(--fw-border);
		border-radius: 0px;
		background: #fff;
		padding: 12px;

	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 1px solid var(--fw-border);
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(180deg, var(--fw-bg), var(--fw-card));
	box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
	margin-top: 16px
	}

	.fw-kpis {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px
	}

	@media(min-width:768px) {
		.fw-kpis {
			grid-template-columns: repeat(4, 1fr)
		}
	}

	.fw-kpi {
		border: 1px dashed var(--fw-border);
		border-radius: 10px;
		padding: 10px;
		background: var(--fw-card)
	}

	.fw-kpi .l {
		font-size: .85rem;
		color: var(--fw-muted)
	}

	.fw-kpi .v {
		font-weight: 900
	}

	.fw-msg {
		margin-top: 10px;
		padding: 10px;
		border-radius: 10px;
		border: 1px solid
	}

	.fw-msg.ok {
		background: #ecfdf5;
		border-color: #10b981;
		color: #065f46
	}

	.fw-msg.ko {
		background: #fef2f2;
		border-color: #ef4444;
		color: #7f1d1d
	}

	.fw-spinner {
		display: inline-block;
		width: 16px;
		height: 16px;
		border: 2px solid var(--fw-border);
		border-top-color: var(--fw-ring);
		border-radius: 50%;
		animation: spin .8s linear infinite;
		margin-right: 6px
	}

	@keyframes spin {
		to {
			transform: rotate(360deg)
		}
	}

	.fw-group {
		padding: 12px;
		border: 1px solid var(--fw-border);
		border-radius: 12px;
		background: #fff
	}

	.cgu,
	.politique_confidentialite {
		color: #646464;
		font-size: 14px;
		font-weight: normal;
	}

	.cgu a {
		color: var(--fc-ring);
		font-size: 14px;
		font-weight: bold;
		text-decoration: underline;
	}

	/* Cartes offres */
	.fc-proposals {
		display: grid;
		gap: 12px;
		font-size: small;
	}

	/*@media(min-width:768px){ .fc-proposals{ grid-template-columns:repeat(3,1fr); } }*/
	.fc-offer {
		border: 1px solid var(--fc-border);
		border-radius: 12px;
		background: var(--fc-bg);
		padding: 12px;
		cursor: pointer;
		transition: border-color .2s, box-shadow .2s;
	}

	.fc-offer__title {
		font-weight: 900;
		margin-bottom: 8px;
		font-size: 18px;
	}

	.fc-offer__row {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		padding: 4px 0;
		border-top: 1px dashed var(--fc-border);
	}

	.fc-offer__row:first-of-type {
		border-top: none;
	}

	.fc-offer.is-selected {
		border-color: var(--fc-ring);
		box-shadow: 0 0 0 3px rgba(164, 235, 37, 0.22);
	}

	.fc-offer.is-selected .fc-offer__title::after {
		content: "✓";
		float: right;
		font-weight: 900;
	}

	/* --- Centrage global des titres et de la mise en page --- */
	#fw .fw-steps {
		justify-content: center;
	}

	/* bulles d'étapes */
	#fw h3,
	#fw h4 {
		text-align: center;
		margin-top: 0;
	}

	/* titres sections */

	/* rétrécit le contenu de chaque étape et le centre */
	#fw .fw-section {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	/* groupe de boutons "Type de projet" */
	#fw .fw-segment {
		justify-content: center;
	}

	/* boutons d'action en bas des étapes */
	#fw .fw-actions {
		justify-content: center;
	}

	/* bloc résultat centré */
	#fw .fw-result {
		text-align: center;
	}

	#fw .fw-kpis {
		justify-items: center;
	}

	/* cartes KPI centrées */
	#fw .fw-kpi {
		text-align: center;
	}

	/* optionnel : centre visuellement les champs dans les grilles */
	#fw .fw-grid--two>.fw-field,
	#fw .fw-grid--three>.fw-field {
		justify-self: center;
		/* centre l'item dans la colonne */
		max-width: 520px;
		/* largeur agréable d’un champ */
		width: 100%;
	}

	/* Badge check automatique quand c’est ok (< 35%) */
	#fw .fc-offer__ratio {
		font-weight: 900;
		margin-bottom: 8px;
		font-size: 28px;
	}

	#fw .fc-offer__ratio .v[data-ok="true"] {
		color: var(--fw-ring);
		/* vert */
		position: relative;
		padding-right: 20px;
		font-weight: 900;
		margin-bottom: 8px;
		font-size: 42px;
	}


	#fw .fc-offer__ratio .v[data-ok="true"]::before {
		content: "Top Endettement !";
		position: absolute;
		left: 0;
		top: -5%;
		transform: translateY(-50%);
		font-size: 20px;
		font-weight: 900;
	}

	/*
	#fw .fc-offer__ratio .v[data-ok="true"]::after{
	  content:"✓";
	  position:absolute; right:0; top:50%; transform:translateY(-50%);
	  font-weight:900;
	}
	*/
	#fw .fc-offer__ratio .v[data-ok="false"] {
		color: var(--fw-ring);
		/* vert */
		position: relative;
		padding-right: 20px;
		font-weight: 900;
		margin-bottom: 8px;
		font-size: 42px;
	}

	#fw .fc-offer__ratio .v[data-ok="false"]::before {
		content: "Oups ! Endettement trop élevé. Modifie ta simulation";
		position: absolute;
		left: 0;
		top: -5%;
		transform: translateY(-50%);
		font-size: 18px;
		font-weight: 700;
	}

	/* ≥ 35% : rouge (déjà animé côté JS, mais on garde par cohérence) */
	#fw .fc-offer__ratio .v[data-ok="false"] {
		color: #b91c1c;
	}

	/* Carte CTA moderne */
	#fw .fw-cta {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		border: 1px solid var(--fw-border);
		border-radius: 14px;
		overflow: hidden;
		background: linear-gradient(180deg, var(--fw-bg), var(--fw-card));
		box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
		margin-top: 16px;
	}

	@media (min-width: 768px) {
		#fw .fw-cta {
			grid-template-columns: 0.9fr 1.6fr;
		}
	}

	#fw .fw-cta__img {
		position: relative;
		min-height: 90px;
		background: #eef2ff;
	}

	#fw .fw-cta__img img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#fw .fw-cta__body {
		display: grid;
		gap: 10px;
		/*align-content: center;*/
		padding: 18px 18px 20px;

	}

	#fw .fw-cta__title {
		margin: 0;
		font-weight: 900;
		font-size: 0.875rem;
		color: var(--fw-text);
	}

	#fw .fw-cta__text {
		margin: 0;
		color: var(--fw-muted);
		font-size: 0.95rem;
		line-height: 1.45;
		text-align: justify;
	}

	#fw .fw-cta__btn {
		justify-self: start;
		transition: transform .06s ease, box-shadow .2s ease;
	}

	#fw .fw-cta__btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
	}

	/* Option : centrer la carte dans la section (match ton centrage global) */
	#fw .fw-section .fw-cta {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Dark mode cohérent */
	@media (prefers-color-scheme:dark) {
		#fw .fw-cta {
			background: linear-gradient(180deg, #0b0f16, #0f172a);
			box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
		}

		#fw .fw-cta__img {
			background: #0f172a;
		}
	}

	/* Centre uniquement ce bouton */
	#fw .fw-cta-btn {
		display: flex;
		justify-content: center;
		margin: 16px 0 6px;
	}

	/* Option : confort du bouton (facultatif) */
	#fw .fw-cta-btn .fw-btn {
		padding: 14px 22px;
		font-size: 1rem;
		font-weight: 900;
	}

	/* Option mobile : bouton pleine largeur */
	@media (max-width:480px) {
		#fw .fw-cta-btn .fw-btn {
			width: 100%;
			text-align: center;
		}
	}

	/* centrer le conteneur */
	#fw .fw-cta-btn {
		display: flex;
		justify-content: center;
		margin: 16px 0 6px;
	}

	/* bouton en forme de flèche (pointe à droite) */
	#fw .fw-btn--arrow {
		--arrow-size: 18px;
		/* largeur de la pointe */
		display: inline-block;
		background: #111827;
		color: #fff;
		text-decoration: none;
		padding: 14px 28px 14px 22px;
		/* un peu plus de padding à droite */
		font-weight: 900;
		border: 0;
		/* La forme de flèche */
		/*clip-path: polygon(
		0 0, calc(100% - var(--arrow-size)) 0,
		100% 50%,
		calc(100% - var(--arrow-size)) 100%,
		0 100%, 0 0
	  );*/
		transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
	}

	#fw .fw-btn--arrow:hover {
		transform: translateY(-1px);
		box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
		filter: brightness(1.05);
	}

	/* option : pleine largeur sur mobile */
	@media (max-width:480px) {
		#fw .fw-cta-btn .fw-btn--arrow {
			width: 100%;
			text-align: center;
		}
	}

	/* mode sombre cohérent */
	@media (prefers-color-scheme:dark) {
		#fw .fw-btn--arrow {
			background: #2563eb;
		}
	}

	#fw a.is-disabled {
		pointer-events: none;
		opacity: .6;
		cursor: not-allowed;
	}