/*
	Sommaire d'article — rendu des liens.

	Ce CSS vit dans le Shadow DOM du composant : les classes du site (toc_link, is-active)
	n'y entrent pas, seules les variables traversent. Il reprend donc les valeurs du kit,
	relevées sur .toc-nav a — source/article-scpi-ou-investissement-locatif.dc.html l. 277-280.

	Aucun fallback sur les var() : une variable absente doit se voir. Un fallback donnerait
	l'apparence du juste à un composant décroché du système de design.

	Le rail vertical (border-left) est porté par toc_nav CÔTÉ WEBFLOW : on ne le redessine pas.
*/

:host {
	display: block;
	width: 100%;
}

.sommaire {
	display: flex;
	flex-direction: column;
	/* pas d'overflow : le margin-left négatif des liens doit déborder sur le filet du parent */
}

.sommaire__lien {
	padding-top: var(--_espacement---space-2xs);
	padding-right: 0;
	padding-bottom: var(--_espacement---space-2xs);
	padding-left: var(--_espacement---space-sm);

	/* 2px = l'épaisseur du filet de toc_nav, que le lien actif vient recouvrir. Structure, pas token */
	margin-left: -2px;
	border-left: 2px solid transparent;

	font-size: var(--_typographie---text-xs);
	font-weight: var(--_typographie---w-semibold);
	line-height: var(--_typographie---lh-serre);
	color: var(--_couleurs---mute);

	text-decoration: none;
	cursor: pointer;
	transition: color 0.16s, border-color 0.16s;
}

.sommaire__lien:hover {
	color: var(--_couleurs---ink);
}

.sommaire__lien.is-active {
	color: var(--_couleurs---blue);
	border-left-color: var(--_couleurs---blue);
}

/* Reprend le :focus-visible global du kit — il ne traverse pas la frontière du shadow */
.sommaire__lien:focus-visible {
	outline: 3px solid var(--_couleurs---amber);
	outline-offset: 3px;
	border-radius: var(--_layout---radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.sommaire__lien {
		transition: none;
	}
}