/*
 * LVF — Estimateur (page Création de sites).
 * Parcours en 2 étapes (type de site en vedette, puis options), total « à partir de » live.
 * Réutilise les tokens --lvf-* du design system (style.css). 2 couleurs, Bricolage/Inter,
 * espacement 8px, aplats francs, pas d'ombre lourde / dégradé / effet de verre.
 * Tout est scopé sous .lvf-devis pour ne rien toucher d'autre.
 */

.lvf-devis {
	background: var(--lvf-color-surface);
	color: var(--lvf-color-text-on-light);
	padding: var(--lvf-space-6) var(--lvf-gutter);
	font-family: var(--lvf-font-body);
}

.lvf-devis *,
.lvf-devis *::before,
.lvf-devis *::after { box-sizing: border-box; }

.lvf-devis [hidden] { display: none !important; }

.lvf-devis__inner {
	max-width: 760px;
	margin: 0 auto;
}

/* ---- En-tête ---- */
.lvf-devis__head { text-align: center; margin-bottom: var(--lvf-space-4); }

.lvf-devis__eyebrow {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-semibold);
	font-size: var(--lvf-fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lvf-color-text-muted-light);
	margin: 0 0 var(--lvf-space-1);
}

.lvf-devis__title {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-bold);
	font-size: var(--lvf-fs-h2);
	line-height: var(--lvf-lh-heading);
	color: var(--lvf-color-navy);
	margin: 0 0 var(--lvf-space-2);
}

.lvf-devis__lead {
	font-size: var(--lvf-fs-lead);
	line-height: var(--lvf-lh-body);
	color: var(--lvf-color-text-muted-light);
	max-width: var(--lvf-reading-width);
	margin: 0 auto;
}

/* ---- Carte ---- */
.lvf-devis__app {
	background: var(--lvf-color-white);
	border: var(--lvf-border);
	border-radius: var(--lvf-radius);
	padding: var(--lvf-space-4);
}
@media (max-width: 600px) {
	.lvf-devis__app { padding: var(--lvf-space-3) var(--lvf-space-2); }
	.lvf-devis { padding: var(--lvf-space-5) var(--lvf-gutter); }
}

/* ---- Barre de progression ---- */
.lvf-devis__progress { margin-bottom: var(--lvf-space-3); }
.lvf-devis:not(.is-enhanced) .lvf-devis__progress { display: none; }
.lvf-devis__progress-track {
	height: 6px;
	background: rgba(12, 37, 48, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.lvf-devis__progress-bar {
	display: block;
	height: 100%;
	width: 50%;
	background: var(--lvf-color-mint);
	border-radius: 999px;
	transition: width var(--lvf-transition);
}
.lvf-devis__progress-label {
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	margin: var(--lvf-space-1) 0 0;
}

/* ---- Étapes ---- */
.lvf-devis__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.lvf-devis.is-enhanced .lvf-devis__step { display: none; }
.lvf-devis.is-enhanced .lvf-devis__step.is-active { display: block; }
.lvf-devis:not(.is-enhanced) .lvf-devis__step + .lvf-devis__step { margin-top: var(--lvf-space-4); }

.lvf-devis__q {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-semibold);
	font-size: var(--lvf-fs-h3);
	line-height: var(--lvf-lh-heading);
	color: var(--lvf-color-navy);
	padding: 0;
	margin: 0 0 var(--lvf-space-1);
}
.lvf-devis__help {
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	margin: 0 0 var(--lvf-space-3);
}

/* ---- Choix du site (radios) ---- */
.lvf-devis__options { display: grid; gap: var(--lvf-space-2); }

.lvf-devis__opt {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--lvf-space-2);
	padding: var(--lvf-space-2) var(--lvf-space-3);
	border: var(--lvf-border);
	border-radius: var(--lvf-radius);
	cursor: pointer;
	background: var(--lvf-color-white);
	transition: border-color var(--lvf-transition), background var(--lvf-transition);
}
.lvf-devis__opt:hover { border-color: rgba(2, 195, 154, 0.6); }

/* La pastille (radio personnalisé) */
.lvf-devis__opt-mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	border: 2px solid rgba(12, 37, 48, 0.25);
	border-radius: 50%;
	transition: border-color var(--lvf-transition);
	position: relative;
}
.lvf-devis__opt-mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--lvf-color-mint);
	transform: scale(0);
	transition: transform var(--lvf-transition);
}

.lvf-devis__opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lvf-devis__opt-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lvf-space-1) var(--lvf-space-2);
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-semibold);
	color: var(--lvf-color-navy);
	font-size: var(--lvf-fs-body);
}
.lvf-devis__opt-price {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-semibold);
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-navy);
	white-space: nowrap;
}
.lvf-devis__opt-price--quote { color: var(--lvf-color-text-muted-light); }
.lvf-devis__opt-desc {
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	line-height: 1.45;
}

/* ---- Carte vedette (le site vitrine) ---- */
.lvf-devis__opt--feature {
	padding: var(--lvf-space-3);
	border-width: 2px;
}
.lvf-devis__opt--feature .lvf-devis__opt-label {
	font-size: var(--lvf-fs-h3);
	font-weight: var(--lvf-weight-title-bold);
}
.lvf-devis__opt--feature .lvf-devis__opt-price {
	font-size: var(--lvf-fs-body);
	color: var(--lvf-color-mint);
}
.lvf-devis__opt--feature .lvf-devis__opt-desc { font-size: var(--lvf-fs-body); }

.lvf-devis__includes-label {
	font-size: var(--lvf-fs-small);
	font-weight: var(--lvf-weight-body-medium);
	color: var(--lvf-color-text-on-light);
	margin-top: var(--lvf-space-2);
}
.lvf-devis__includes {
	list-style: none;
	margin: var(--lvf-space-1) 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.lvf-devis__includes li {
	position: relative;
	padding-left: 26px;
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-on-light);
	line-height: 1.4;
}
.lvf-devis__includes li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 5px;
	height: 9px;
	border: solid var(--lvf-color-mint);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.lvf-devis__opt-perk {
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	line-height: 1.5;
	margin-top: var(--lvf-space-2);
}

/* ---- Alternative sobre (boutique sur devis) ---- */
.lvf-devis__opt--muted { padding: var(--lvf-space-2) var(--lvf-space-3); }
.lvf-devis__opt--muted .lvf-devis__opt-label { font-size: var(--lvf-fs-body); }

/* Le vrai input radio : invisible mais focusable (accessibilité). */
.lvf-devis__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.lvf-devis__opt:has(.lvf-devis__radio:focus-visible) {
	outline: 2px solid var(--lvf-color-mint);
	outline-offset: 2px;
}
.lvf-devis__opt:has(.lvf-devis__radio:checked) {
	border-color: var(--lvf-color-mint);
	background: rgba(2, 195, 154, 0.06);
}
.lvf-devis__opt:has(.lvf-devis__radio:checked) .lvf-devis__opt-mark { border-color: var(--lvf-color-mint); }
.lvf-devis__opt:has(.lvf-devis__radio:checked) .lvf-devis__opt-mark::after { transform: scale(1); }

/* ---- Options (cases à cocher + compteurs) ---- */
.lvf-devis__addons { display: grid; gap: var(--lvf-space-2); }

.lvf-devis__addon {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--lvf-space-2);
	padding: var(--lvf-space-2) var(--lvf-space-3);
	border: var(--lvf-border);
	border-radius: var(--lvf-radius);
	background: var(--lvf-color-white);
	transition: border-color var(--lvf-transition), background var(--lvf-transition);
}
label.lvf-devis__addon { cursor: pointer; }
label.lvf-devis__addon:hover { border-color: rgba(2, 195, 154, 0.6); }

.lvf-devis__addon-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lvf-devis__addon-label {
	font-weight: var(--lvf-weight-body-medium);
	color: var(--lvf-color-text-on-light);
	font-size: var(--lvf-fs-body);
}
.lvf-devis__addon-desc {
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	line-height: 1.45;
}
.lvf-devis__addon-price {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-semibold);
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-navy);
	white-space: nowrap;
}
.lvf-devis__addon > .lvf-devis__addon-price { margin-left: auto; margin-top: 2px; }
.lvf-devis__addon-body .lvf-devis__addon-price { margin-top: 2px; color: var(--lvf-color-text-muted-light); }

/* Case carrée (checkbox personnalisé) */
.lvf-devis__addon-mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 2px solid rgba(12, 37, 48, 0.25);
	border-radius: 6px;
	position: relative;
	transition: border-color var(--lvf-transition), background var(--lvf-transition);
}
.lvf-devis__addon-mark::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid var(--lvf-color-on-mint);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--lvf-transition);
}
.lvf-devis__check {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.lvf-devis__addon:has(.lvf-devis__check:focus-visible) {
	outline: 2px solid var(--lvf-color-mint);
	outline-offset: 2px;
}
.lvf-devis__addon:has(.lvf-devis__check:checked) {
	border-color: var(--lvf-color-mint);
	background: rgba(2, 195, 154, 0.06);
}
.lvf-devis__addon:has(.lvf-devis__check:checked) .lvf-devis__addon-mark {
	border-color: var(--lvf-color-mint);
	background: var(--lvf-color-mint);
}
.lvf-devis__addon:has(.lvf-devis__check:checked) .lvf-devis__addon-mark::after { transform: rotate(45deg) scale(1); }

/* ---- Option groupée : une case à cocher + le compteur qui en dépend ---- */
/* La carte passe sur le groupe, la case et le compteur deviennent deux zones d'une
   même offre (un blog et ses articles, par exemple). */
.lvf-devis__group {
	border: var(--lvf-border);
	border-radius: var(--lvf-radius);
	background: var(--lvf-color-white);
	transition: border-color var(--lvf-transition), background var(--lvf-transition);
}
.lvf-devis__group:hover { border-color: rgba(2, 195, 154, 0.6); }
.lvf-devis__group:has(.lvf-devis__check:checked) {
	border-color: var(--lvf-color-mint);
	background: rgba(2, 195, 154, 0.06);
}
.lvf-devis__group > .lvf-devis__addon,
.lvf-devis__group > .lvf-devis__addon:has(.lvf-devis__check:checked) {
	border: 0;
	background: transparent;
}

/* Le compteur n'apparaît que si la case du groupe est cochée. */
.lvf-devis__group:not(:has(.lvf-devis__check:checked)) .lvf-devis__addon--child { display: none; }

.lvf-devis__group > .lvf-devis__addon--child {
	border-top: var(--lvf-border);
	border-radius: 0;
	/* aligné sous le libellé : retrait de la case (22px) + son écart */
	padding-left: calc(var(--lvf-space-3) + 22px + var(--lvf-space-2));
}
.lvf-devis__group:has(.lvf-devis__check:checked) .lvf-devis__addon--child {
	border-top-color: rgba(2, 195, 154, 0.35);
}

/* ---- Compteur + / - ---- */
.lvf-devis__stepper {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: stretch;
	align-self: center;
	border: 1px solid rgba(12, 37, 48, 0.2);
	border-radius: var(--lvf-radius-sm);
	overflow: hidden;
	background: var(--lvf-color-white);
}
.lvf-devis__step-btn {
	appearance: none;
	border: 0;
	background: transparent;
	width: 40px;
	height: 40px;
	font-size: 20px;
	line-height: 1;
	color: var(--lvf-color-navy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--lvf-transition);
}
.lvf-devis__step-btn:hover { background: rgba(2, 195, 154, 0.12); }
.lvf-devis__step-btn:focus-visible { outline: 2px solid var(--lvf-color-mint); outline-offset: -2px; }
.lvf-devis__qty {
	width: 48px;
	border: 0;
	border-left: 1px solid rgba(12, 37, 48, 0.14);
	border-right: 1px solid rgba(12, 37, 48, 0.14);
	text-align: center;
	font-family: var(--lvf-font-body);
	font-weight: var(--lvf-weight-body-medium);
	font-size: var(--lvf-fs-body);
	color: var(--lvf-color-navy);
	background: var(--lvf-color-white);
	-moz-appearance: textfield;
}
.lvf-devis.is-enhanced .lvf-devis__qty::-webkit-outer-spin-button,
.lvf-devis.is-enhanced .lvf-devis__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lvf-devis__qty:focus-visible { outline: 2px solid var(--lvf-color-mint); outline-offset: -2px; }

/* ---- Sous-total (étape options) ---- */
.lvf-devis__subtotal {
	margin: var(--lvf-space-3) 0 0;
	padding-top: var(--lvf-space-2);
	border-top: 1px solid rgba(12, 37, 48, 0.1);
	text-align: right;
	font-size: var(--lvf-fs-body);
	color: var(--lvf-color-text-muted-light);
}
.lvf-devis__subtotal strong {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-bold);
	color: var(--lvf-color-navy);
	white-space: nowrap;
}

/* ---- Navigation ---- */
.lvf-devis__nav {
	display: flex;
	align-items: center;
	gap: var(--lvf-space-2);
	margin-top: var(--lvf-space-4);
}
.lvf-devis__nav-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lvf-space-2);
	margin-left: auto;
}
.lvf-devis:not(.is-enhanced) .lvf-devis__nav { display: none; }

@media (max-width: 520px) {
	.lvf-devis__nav { flex-direction: column; align-items: stretch; }
	.lvf-devis__nav-actions { flex-direction: column; margin-left: 0; }
	.lvf-devis__nav .lvf-devis__btn { width: 100%; }
}

.lvf-devis__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lvf-space-1);
	font-family: var(--lvf-font-body);
	font-weight: var(--lvf-weight-body-medium);
	font-size: var(--lvf-fs-body);
	line-height: 1;
	padding: 14px var(--lvf-space-3);
	border-radius: var(--lvf-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--lvf-transition), border-color var(--lvf-transition), opacity var(--lvf-transition);
}
.lvf-devis__btn--primary {
	background: var(--lvf-color-mint);
	color: var(--lvf-color-on-mint);
}
.lvf-devis__btn--primary:hover { background: #02b48f; }
.lvf-devis__btn--ghost {
	background: transparent;
	color: var(--lvf-color-navy);
	border-color: rgba(12, 37, 48, 0.2);
}
.lvf-devis__btn--ghost:hover { border-color: var(--lvf-color-navy); }

/* ---- Résultat / estimation ---- */
.lvf-devis__result { text-align: center; }
.lvf-devis__result-eyebrow {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-semibold);
	font-size: var(--lvf-fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lvf-color-text-muted-light);
	margin: 0 0 var(--lvf-space-2);
}

.lvf-devis__price {
	margin: 0 0 var(--lvf-space-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.lvf-devis__price-prefix {
	font-size: var(--lvf-fs-body);
	color: var(--lvf-color-text-muted-light);
}
.lvf-devis__price-amount {
	font-family: var(--lvf-font-title);
	font-weight: var(--lvf-weight-title-bold);
	font-size: var(--lvf-fs-display);
	line-height: var(--lvf-lh-tight);
	color: var(--lvf-color-navy);
}

.lvf-devis__quote-msg {
	font-size: var(--lvf-fs-lead);
	line-height: var(--lvf-lh-body);
	color: var(--lvf-color-navy);
	max-width: var(--lvf-reading-width);
	margin: 0 auto var(--lvf-space-3);
}

.lvf-devis__recap {
	list-style: none;
	padding: var(--lvf-space-3);
	margin: 0 0 var(--lvf-space-3);
	text-align: left;
	background: var(--lvf-color-surface);
	border-radius: var(--lvf-radius);
	display: grid;
	gap: var(--lvf-space-1);
}
.lvf-devis__recap li {
	display: flex;
	justify-content: space-between;
	gap: var(--lvf-space-2);
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-on-light);
	padding-bottom: var(--lvf-space-1);
	border-bottom: 1px solid rgba(12, 37, 48, 0.08);
}
.lvf-devis__recap li:last-child { border-bottom: 0; padding-bottom: 0; }
.lvf-devis__recap-q { color: var(--lvf-color-text-muted-light); }
.lvf-devis__recap-a { font-weight: var(--lvf-weight-body-medium); text-align: right; white-space: nowrap; }

.lvf-devis__notinc,
.lvf-devis__disclaimer {
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	line-height: 1.5;
	max-width: var(--lvf-reading-width);
	margin: 0 auto var(--lvf-space-2);
}
.lvf-devis__disclaimer { margin-bottom: var(--lvf-space-3); }

.lvf-devis__result-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lvf-space-2);
}
.lvf-devis__cta { min-width: 240px; }

.lvf-devis__aside {
	margin: var(--lvf-space-4) auto 0;
	padding-top: var(--lvf-space-3);
	border-top: var(--lvf-border);
	max-width: var(--lvf-reading-width);
	font-size: var(--lvf-fs-small);
	color: var(--lvf-color-text-muted-light);
	line-height: 1.5;
}

@media (max-width: 480px) {
	.lvf-devis__addon { flex-wrap: wrap; }
	.lvf-devis__addon .lvf-devis__stepper { margin-left: auto; }
	.lvf-devis__group > .lvf-devis__addon--child { padding-left: var(--lvf-space-3); }
}

@media (prefers-reduced-motion: reduce) {
	.lvf-devis__progress-bar,
	.lvf-devis__opt,
	.lvf-devis__opt-mark::after,
	.lvf-devis__addon,
	.lvf-devis__group,
	.lvf-devis__addon-mark,
	.lvf-devis__addon-mark::after,
	.lvf-devis__step-btn,
	.lvf-devis__btn { transition: none; }
}