/* Avant / après de la section « Conversion » (.ba de la maquette). */

.hvl-wdba {
	--hvl-wdba-surface: var(--e-global-color-blanc, #fff);
	--hvl-wdba-brand: var(--e-global-color-primary, #08739f);
	--hvl-wdba-accent: var(--e-global-color-accent, #38b0db);
	--hvl-wdba-radius: 18px;
	--hvl-wdba-gap: 12px;
	margin: 0;
}

.hvl-wdba__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hvl-wdba-gap);
}

.hvl-wdba__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.hvl-wdba__lbl {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--e-global-color-gris, #6a6f7d);
}

.hvl-wdba__lbl b {
	font-weight: 500;
	color: var(--hvl-wdba-brand);
}

.hvl-wdba__screen {
	display: flex;
	flex-direction: column;
	gap: 8px;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: var(--hvl-wdba-radius);
	padding: 14px;
	background: var(--hvl-wdba-surface);
	box-shadow: 0 24px 40px -28px rgba(20, 22, 29, 0.45), inset 0 0 0 1px rgba(20, 22, 29, 0.08);
}

.hvl-wdba__screen i {
	display: block;
	flex: none;
	border-radius: 5px;
	background: rgba(20, 22, 29, 0.1);
}

.hvl-wdba__screen i.img {
	flex: 1 1 auto;
	min-height: 24px;
	border-radius: 8px;
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--hvl-wdba-brand) 18%, #fff),
		color-mix(in srgb, var(--hvl-wdba-accent) 16%, #fff)
	);
}

/* Ni la bannière ni les rangées de boutons ne portent flex: none dans la
   maquette : elles se compriment quand l'écran 5/6 est trop court (mobile). */
.hvl-wdba__banner {
	height: 30px;
	border-radius: 6px;
	background: repeating-linear-gradient(45deg, rgba(20, 22, 29, 0.08) 0 6px, rgba(20, 22, 29, 0.03) 6px 12px);
}

.hvl-wdba__btns {
	display: flex;
	gap: 5px;
	margin-top: 4px;
}

.hvl-wdba__btns i {
	flex: 1;
	height: 16px;
	border-radius: 5px;
	background: rgba(20, 22, 29, 0.14);
}

/* --- Avant --- */

.hvl-wdba__col--before i.t {
	height: 9px;
	width: 70%;
}

.hvl-wdba__col--before i.l {
	height: 6px;
	width: 92%;
	background: rgba(20, 22, 29, 0.07);
}

.hvl-wdba__col--before .hvl-wdba__screen i.img {
	flex: 0 0 26px;
	background: rgba(20, 22, 29, 0.08);
}

/* --- Après --- */

.hvl-wdba__col--after i.t {
	height: 16px;
	width: 86%;
	border-radius: 4px;
	background: rgba(20, 22, 29, 0.8);
}

.hvl-wdba__col--after i.t2 {
	height: 16px;
	width: 58%;
	border-radius: 4px;
	background: rgba(20, 22, 29, 0.8);
}

.hvl-wdba__col--after i.l {
	height: 6px;
	width: 78%;
	background: rgba(20, 22, 29, 0.12);
}

.hvl-wdba__col--after i.cta {
	height: 22px;
	width: 58%;
	margin-top: 6px;
	border-radius: 7px;
	background: var(--hvl-wdba-brand);
}

.hvl-wdba__trust {
	display: flex;
	gap: 5px;
	margin-top: auto;
}

.hvl-wdba__trust i {
	width: 22px;
	height: 8px;
	background: color-mix(in srgb, var(--hvl-wdba-accent) 40%, #fff);
}

/* --- Notes --- */

.hvl-wdba__notes {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--e-global-color-gris, #6a6f7d);
}

.hvl-wdba__notes li {
	display: flex;
	gap: 6px;
}

.hvl-wdba__notes li::before {
	content: "–";
	color: color-mix(in srgb, var(--e-global-color-text, #14161d) 35%, transparent);
}

.hvl-wdba__notes--after li::before {
	content: "+";
	font-weight: 600;
	color: var(--hvl-wdba-brand);
}

.hvl-wdba figcaption {
	font-style: normal;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--e-global-color-gris, #6a6f7d);
}