.hvl-ct {
	--ct-ink: var(--e-global-color-text, #14161d);
	--ct-mute: var(--e-global-color-gris, #6a6f7d);
	--ct-brand: var(--e-global-color-primary, #08739f);
	--ct-surface: var(--e-global-color-blanc, #fff);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	letter-spacing: normal;
}

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

.hvl-ct table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.hvl-ct caption {
	caption-side: top;
	margin-bottom: 14px;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.55;
	text-align: left;
	color: var(--ct-mute);
}

.hvl-ct th,
.hvl-ct td {
	padding: 12px;
	border: 0;
	background: transparent;
	font-size: 14.5px;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

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

/* Le thème parent raye une ligne sur deux et la survole en gris, sur les
   cellules et non sur la ligne : sans cette remise à zéro le gris traverse
   aussi les cartes du mode empilé. */
.hvl-ct table thead tr > th,
.hvl-ct table tbody tr > th,
.hvl-ct table tbody tr > td,
.hvl-ct table tbody tr:hover > th,
.hvl-ct table tbody tr:hover > td {
	background-color: transparent;
}

.hvl-ct thead th {
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: normal;
	color: var(--ct-mute);
}

.hvl-ct tbody th,
.hvl-ct tbody td {
	color: var(--ct-mute);
}

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

.hvl-ct col:nth-child(1) {
	width: 23%;
}

.hvl-ct col:nth-child(2) {
	width: 26%;
}

.hvl-ct col:nth-child(3) {
	width: 14%;
}

.hvl-ct col:nth-child(4) {
	width: 19%;
}

.hvl-ct col:nth-child(5) {
	width: 18%;
}

.hvl-ct__role {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ct-ink);
}

.hvl-ct__note {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(20, 22, 29, 0.45);
}

@media (min-width: 800px) {
	.hvl-ct thead th {
		border-bottom: 1px solid rgba(20, 22, 29, 0.16);
		border-block-end: 1px solid rgba(20, 22, 29, 0.16);
	}

	.hvl-ct tbody tr + tr > * {
		border-top: 1px solid rgba(20, 22, 29, 0.08);
		border-block-start: 1px solid rgba(20, 22, 29, 0.08);
	}

	.hvl-ct table tbody tr:nth-child(odd) > th,
	.hvl-ct table tbody tr:nth-child(odd) > td {
		background-color: color-mix(in srgb, var(--ct-brand) 3.5%, transparent);
	}

	.hvl-ct td::before {
		content: none;
	}
}

/* Sous 800px le tableau passe en cartes empilées : display:block casse la
   sémantique native du tableau, les rôles ARIA explicites la rétablissent.
   Aucun défilement horizontal, chaque cellule porte son libellé. */
@media (max-width: 799px) {
	.hvl-ct table {
		display: block;
	}

	.hvl-ct caption {
		display: block;
		max-width: 56ch;
	}

	.hvl-ct thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hvl-ct tbody {
		display: grid;
		gap: 12px;
	}

	.hvl-ct tbody tr {
		display: block;
		border-radius: 18px;
		padding: 16px;
		background: var(--ct-surface);
		box-shadow: inset 0 0 0 1px rgba(20, 22, 29, 0.09);
	}

	.hvl-ct th,
	.hvl-ct td {
		display: block;
		padding: 0;
	}

	.hvl-ct tbody th[scope="row"] {
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(20, 22, 29, 0.1);
	}

	.hvl-ct tbody td {
		padding: 9px 0;
	}

	.hvl-ct tbody td + td {
		border-top: 1px dashed rgba(20, 22, 29, 0.09);
	}

	.hvl-ct tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 11px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: rgba(20, 22, 29, 0.42);
	}

	.hvl-ct__role {
		margin-top: 0;
		font-size: 15.5px;
	}
}