/* Panneau « du design au code » (.wd-code de la maquette). */

.hvl-wdcode {
	--hvl-wdcode-bg: var(--e-global-color-encre_profonde, #0f1017);
	--hvl-wdcode-ink: var(--e-global-color-brume_300, #c5d4e0);
	--hvl-wdcode-mute: var(--e-global-color-brume_400, #94a8b8);
	--hvl-wdcode-key: var(--e-global-color-azur_300, #6ec8e8);
	--hvl-wdcode-val: var(--e-global-color-azur_200, #a8ddf2);
	--hvl-wdcode-active: var(--e-global-color-brume_100, #eef4f8);
	--hvl-wdcode-radius: 24px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--hvl-wdcode-radius);
	background: var(--hvl-wdcode-bg);
	box-shadow: 0 30px 60px -36px rgba(8, 10, 16, 0.6);
}

.hvl-wdcode__tabs {
	display: flex;
	gap: 4px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hvl-wdcode__tabs span {
	border-radius: 7px;
	padding: 5px 10px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--hvl-wdcode-mute);
}

.hvl-wdcode__tabs span:first-child {
	color: var(--hvl-wdcode-active);
	background: rgba(255, 255, 255, 0.07);
}

.hvl-wdcode pre {
	margin: 0;
	overflow-x: auto;
	white-space: pre;
	padding: 18px 20px 22px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.7;
	color: var(--hvl-wdcode-ink);
	tab-size: 2;
}

.hvl-wdcode code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
}

.hvl-wdcode .k {
	color: var(--hvl-wdcode-key);
}

.hvl-wdcode .v {
	color: var(--hvl-wdcode-val);
}

.hvl-wdcode .c {
	color: var(--hvl-wdcode-mute);
}

.hvl-wdcode .sw {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 3px;
	vertical-align: -1px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.hvl-wdcode figcaption {
	font-style: normal;
	padding: 0 20px 18px;
	font-family: var(--e-global-typography-body-font-family, "Karla"), system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hvl-wdcode-mute);
}