.csm-hd {
	--csm-hd-couleur: #4c4f8e;
	--csm-hd-piste: #ececf3;
	--csm-hd-texte: #2b2b33;
	--csm-hd-texte-doux: #6b6b78;
	margin: 0 0 1.5em;
	max-width: 900px;
	color: var(--csm-hd-texte);
	font-size: 15px;
	line-height: 1.3;
}

.csm-hd-titre {
	font-weight: 700;
	font-size: 1.15em;
	margin-bottom: .75em;
}

.csm-hd .csm-hd-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
}

.csm-hd .csm-hd-table td,
.csm-hd .csm-hd-table th {
	border: 0;
	padding: 3px 0;
	vertical-align: middle;
	background: none;
	text-align: left;
	font-weight: 400;
}

.csm-hd .csm-hd-col-rang { width: 2.6em; }
.csm-hd .csm-hd-col-nom { width: 36%; }

.csm-hd .csm-hd-rang {
	padding-right: .4em;
	text-align: right;
	color: var(--csm-hd-texte-doux);
	font-variant-numeric: tabular-nums;
	font-size: .85em;
}

.csm-hd .csm-hd-nom {
	padding-right: .75em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csm-hd-code {
	display: inline-block;
	min-width: 2.2em;
	color: var(--csm-hd-texte-doux);
	font-variant-numeric: tabular-nums;
}

.csm-hd .csm-hd-valeur {
	position: relative;
	white-space: nowrap;
}

.csm-hd-barre {
	display: inline-block;
	vertical-align: middle;
	height: 14px;
	min-width: 2px;
	max-width: calc(100% - 5em);
	background: var(--csm-hd-couleur);
	border-radius: 0 4px 4px 0;
	transition: opacity .15s;
}

.csm-hd-nombre {
	display: inline-block;
	vertical-align: middle;
	margin-left: .5em;
	font-variant-numeric: tabular-nums;
	font-size: .9em;
}

.csm-hd-ligne:hover .csm-hd-barre { opacity: .75; }
.csm-hd-ligne:hover .csm-hd-nom { font-weight: 700; }

.csm-hd-extra .csm-hd-barre { background: var(--csm-hd-texte-doux); }
.csm-hd-ligne:not(.csm-hd-extra) + .csm-hd-extra td,
.csm-hd-ligne:not(.csm-hd-extra) + .csm-hd-extra th {
	border-top: 1px solid #d6d6de;
	padding-top: 8px;
}

.csm-hd-maj {
	margin-top: .75em;
	font-size: .85em;
	color: var(--csm-hd-texte-doux);
}

@media (max-width: 600px) {
	.csm-hd { font-size: 13px; }
	.csm-hd .csm-hd-col-rang { width: 2em; }
	.csm-hd .csm-hd-col-nom { width: 46%; }
	.csm-hd .csm-hd-nom { white-space: normal; }
}