.hvl-cmp {
	--cmp-surface: var(--e-global-color-blanc, #fff);
	--cmp-ink: var(--e-global-color-text, #14161d);
	--cmp-mute: var(--e-global-color-gris, #6a6f7d);
	--cmp-brand: var(--e-global-color-primary, #08739f);
	--cmp-line: rgba(20, 22, 29, 0.08);
	--cmp-radius: 24px;
	--cmp-cell-x: 20px;
	--cmp-cell-y: 16px;
	--cmp-first: auto;
	overflow: hidden;
	border-radius: var(--cmp-radius);
	background: var(--cmp-surface);
	box-shadow: inset 0 0 0 1px var(--cmp-line);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	letter-spacing: normal;
}

.hvl-cmp *,
.hvl-cmp *::before {
	box-sizing: border-box;
}

.hvl-cmp table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}

.hvl-cmp caption.hvl-cmp__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hvl-cmp table tbody tr > th,
.hvl-cmp table tbody tr > td,
.hvl-cmp table thead tr > th {
	background: transparent;
}

.hvl-cmp table th,
.hvl-cmp table td {
	padding: var(--cmp-cell-y) var(--cmp-cell-x);
	border: 0;
	border-block: 0;
	border-inline: 0;
	background: transparent;
	line-height: 1.45;
	text-align: left;
	vertical-align: top;
}

/* Le filet haut des tableaux du thème utilise border-block-start avec deux
   pseudo-classes : il faut une spécificité supérieure pour le neutraliser. */
.hvl-cmp.hvl-cmp table thead tr:first-child th,
.hvl-cmp.hvl-cmp table tbody tr:first-child > * {
	border-block-start: 0;
	border-top: 0;
}

.hvl-cmp table thead th:first-child {
	width: var(--cmp-first);
}

.hvl-cmp table thead th {
	font-size: 13px;
	font-weight: 600;
	color: var(--cmp-mute);
	border-bottom: 1px solid color-mix(in srgb, var(--cmp-ink) 10%, transparent);
	border-block-end: 1px solid color-mix(in srgb, var(--cmp-ink) 10%, transparent);
}

.hvl-cmp table tbody th {
	font-weight: 600;
	color: var(--cmp-ink);
}

.hvl-cmp table tbody td {
	color: color-mix(in srgb, var(--cmp-ink) 68%, transparent);
}

.hvl-cmp table tbody tr + tr > * {
	border-top: 1px solid color-mix(in srgb, var(--cmp-ink) 7%, transparent);
	border-block-start: 1px solid color-mix(in srgb, var(--cmp-ink) 7%, transparent);
}

.hvl-cmp table tbody tr > .hvl-cmp__us,
.hvl-cmp table .hvl-cmp__us {
	color: var(--cmp-ink);
	background: color-mix(in srgb, var(--cmp-brand) 6%, transparent);
}

.hvl-cmp table thead tr > .hvl-cmp__us,
.hvl-cmp table thead .hvl-cmp__us {
	color: var(--cmp-brand);
	background: color-mix(in srgb, var(--cmp-brand) 6%, transparent);
}

.hvl-cmp table tbody td.hvl-cmp__us {
	font-weight: 500;
}

@media (max-width: 699px) {
	.hvl-cmp {
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.hvl-cmp table,
	.hvl-cmp tbody,
	.hvl-cmp tr,
	.hvl-cmp th,
	.hvl-cmp td {
		display: block;
	}

	.hvl-cmp thead {
		display: none;
	}

	.hvl-cmp table tbody {
		display: grid;
		gap: 10px;
	}

	.hvl-cmp table tbody tr {
		overflow: hidden;
		border-radius: 18px;
		background: var(--cmp-surface);
		box-shadow: inset 0 0 0 1px var(--cmp-line);
	}

	.hvl-cmp table tbody tr + tr > * {
		border-top: 0;
		border-block-start: 0;
	}

	.hvl-cmp table tbody th {
		padding: 14px 16px 6px;
		font-size: 16px;
	}

	.hvl-cmp table tbody td {
		display: grid;
		grid-template-columns: 96px 1fr;
		gap: 12px;
		padding: 8px 16px;
	}

	.hvl-cmp table tbody td:last-child {
		padding-bottom: 14px;
	}

	.hvl-cmp table tbody td::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.8;
		color: var(--cmp-mute);
	}

	.hvl-cmp table tbody td.hvl-cmp__us::before {
		color: var(--cmp-brand);
	}
}