/**
 * Renovexo — /devis/ page: promises strip under the hero, trade shortcuts, the form card (ViteUnDevis widget),
 * « comment ça marche » steps, preparation tips and FAQ. The devis band lives in site.css.
 */

/* Promises: a strip of three stickers just under the hero */
.rv-devis-promises {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rv-devis-promises--hero {
	max-width: calc(var(--rv-wide) + 2 * var(--rv-gutter));
	margin: 28px auto 0;
	padding-inline: var(--rv-gutter);
	box-sizing: border-box;
}
@media (min-width: 782px) { .rv-devis-promises--hero { grid-template-columns: repeat(3, 1fr); } }
.rv-devis-promises li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: var(--rv-border);
	border-radius: var(--rv-radius);
	background: var(--rv-white);
}
.rv-devis-promises__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--rv-blue);
	color: var(--rv-white);
	box-shadow: 0 0 0 3px var(--rv-white), 0 0 0 5px var(--rv-ink);
}
.rv-devis-promises__text { display: grid; line-height: 1.35; }
.rv-devis-promises__text strong { font-family: var(--rv-font-head); font-size: .98rem; font-weight: 600; }
.rv-devis-promises__text span { color: var(--rv-muted); font-size: .92rem; }

.rv-devis-section { padding-block: clamp(32px, 5vw, 56px) clamp(48px, 7vw, 88px); }
.rv-devis-container {
	display: grid;
	gap: clamp(28px, 4vw, 44px);
	max-width: 980px;
	margin-inline: auto;
	padding-inline: var(--rv-gutter);
}

/* Trade shortcuts */
.rv-devis-shortcuts__label { margin: 0 0 12px; font-weight: 700; }
.rv-devis-shortcuts__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-devis-pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: var(--rv-border);
	border-radius: 999px;
	background: var(--rv-white);
	color: var(--rv-ink);
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
}
.rv-devis-pill:hover { background: var(--rv-yellow-soft); color: var(--rv-ink); }
.rv-devis-pill.is-active { background: var(--rv-ink); color: var(--rv-white); }

/* Form card */
.rv-devis-card {
	overflow: hidden;
	border: var(--rv-border);
	border-radius: 18px;
	background: var(--rv-white);
	box-shadow: 0 6px 0 var(--rv-ink);
}
.rv-devis-card__header {
	padding: 22px clamp(20px, 4vw, 32px) 30px;
	position: relative;
	background: radial-gradient(ellipse 60% 90% at 90% 0%, rgba(128, 146, 255, .35), transparent 70%), linear-gradient(160deg, #2433B4 0%, var(--rv-blue) 60%, #3A4CD4 100%);
	color: var(--rv-white);
}
.rv-devis-card__header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-top: 2px solid var(--rv-ink); background: var(--rv-yellow); }
.rv-devis-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 3px 12px 3px 8px;
	border: 1.5px solid var(--rv-ink);
	border-radius: 999px;
	background: var(--rv-yellow);
	color: var(--rv-ink);
	font-size: .85rem;
	font-weight: 700;
}
.rv-devis-card__heading { margin: 0; color: var(--rv-white); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.rv-devis-card__sub { margin: 8px 0 0; color: var(--rv-calque); }
.rv-devis-card__body { padding: clamp(18px, 3vw, 28px); }

.rv-vud-box { min-height: 320px; }
.rv-vud-box__loading { display: grid; place-items: center; gap: 12px; min-height: 280px; color: var(--rv-muted); text-align: center; }
.rv-vud-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--rv-calque);
	border-top-color: var(--rv-blue);
	border-radius: 50%;
	animation: rv-spin .9s linear infinite;
}
@keyframes rv-spin { to { transform: rotate(360deg); } }

/* How it works + tips */
.rv-devis-guide { display: grid; gap: 24px; }
@media (min-width: 782px) { .rv-devis-guide { grid-template-columns: 1fr 1fr; } }
.rv-devis-guide__col {
	padding: clamp(20px, 3vw, 28px);
	border: var(--rv-border);
	border-radius: var(--rv-radius);
	background: var(--rv-white);
}
.rv-devis-guide__col h3 { margin: 0 0 18px; font-size: 1.15rem; }
.rv-devis-steps { counter-reset: rv-step; margin: 0; padding: 0; list-style: none; }
.rv-devis-steps li { position: relative; padding: 0 0 18px 56px; counter-increment: rv-step; }
.rv-devis-steps li::before {
	content: counter(rv-step);
	position: absolute;
	left: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: var(--rv-border);
	border-radius: 50%;
	background: var(--rv-yellow);
	font-family: var(--rv-font-head);
	font-weight: 800;
}
.rv-devis-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 38px;
	bottom: 0;
	border-left: 2px dashed var(--rv-ink);
	opacity: .35;
}
.rv-devis-steps strong { display: block; font-family: var(--rv-font-head); font-size: .98rem; font-weight: 600; }
.rv-devis-steps p { margin: 4px 0 0; color: #3A3F4B; font-size: .96rem; line-height: 1.55; }
.rv-devis-tips { margin: 0; padding: 0; list-style: none; }
.rv-devis-tips li { position: relative; padding: 0 0 14px 22px; font-size: .96rem; line-height: 1.55; }
.rv-devis-tips li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--rv-minium); }

/* FAQ */
.rv-devis-faq h3 { margin: 0 0 18px; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.rv-devis-faq__grid { display: grid; gap: 16px; }
@media (min-width: 782px) { .rv-devis-faq__grid { grid-template-columns: 1fr 1fr; } }
.rv-devis-faq__item { padding: 20px 22px; border: var(--rv-border); border-radius: var(--rv-radius); background: var(--rv-white); }
.rv-devis-faq__item h4 { margin: 0 0 8px; font-size: 1rem; line-height: 1.35; }
.rv-devis-faq__item p { margin: 0; color: #3A3F4B; font-size: .96rem; line-height: 1.6; }