/**
 * Liens d'archives connexes [artefact_archive_links] — boutons « pilules ».
 *
 * Style minimaliste : bord fin, coins pleinement arrondis, sur le canvas sombre
 * des archives. Même approche dual-surface que le fil d'Ariane : le composant
 * fixe sa propre encre (--afal-ink) plutôt que d'hériter d'une couleur illisible
 * sur fond sombre, et bascule sur l'encre du Design System dans .artefact-sheet.
 * Bord et fond de survol dérivés de l'encre / de l'accent bleu par color-mix
 * (repli automatique si non supporté), sans !important.
 */

.artefact-archive-links {
	--afal-ink: var(--artefact-site-on-dark, #e6e9ee); /* défaut : canvas sombre */

	font-family: var(--artefact-site-font, "Manrope", sans-serif);
}

/* Contexte surface claire : l'encre passe au texte foncé du Design System. */
.artefact-sheet .artefact-archive-links {
	--afal-ink: var(--artefact-site-text, #1f2328);
}

.artefact-archive-links .artefact-archive-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artefact-archive-links .artefact-archive-links__item {
	display: inline-flex;
	min-width: 0;
}

.artefact-archive-links .artefact-archive-links__link {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	font-size: 0.875rem;
	line-height: 1.2;
	color: color-mix(in srgb, var(--afal-ink) 85%, transparent);
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid color-mix(in srgb, var(--afal-ink) 28%, transparent);
	border-radius: 999px;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.artefact-archive-links .artefact-archive-links__link:hover,
.artefact-archive-links .artefact-archive-links__link:focus-visible {
	color: var(--afal-ink);
	border-color: var(--artefact-site-blue, #4fa3db);
	background-color: color-mix(in srgb, var(--artefact-site-blue, #4fa3db) 12%, transparent);
}