/**
 * Menu d’ancrage fiche (Description / Services / Localisation / …).
 * Remplace le simple filet noir (.kl-single__navs--item.active) par un repère
 * plus lisible : pilule + couleur marque (--highlight-color).
 *
 * Le conteneur reste le `.container.kl-max-w-xl-site-lg` du thème (aligné avec
 * le logo / header). Pas de max-width spécifique ici pour éviter le décalage horizontal.
 */

/* Aère la rangée du menu d’ancres (hauteur du bandeau) sans modifier padding / contour des liens. */
.kl-single__navs--wrapper {
	padding-top: 12px;
	padding-bottom: 12px;
	/* Bandeau gris très clair (maquette fiche restaurant / PJ1), commun aux deux marques */
	background: #f4f5f7 !important;
}

.kl-single__navs--items {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px 28px;
}

/* Mobile / tablette : une seule ligne, défilement horizontal (fiches hôtel & restaurant). */
@media (max-width: 991.98px) {
	.kl-single__navs--items {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		padding-bottom: 4px;
	}

	.kl-single__navs--items::-webkit-scrollbar {
		height: 4px;
	}

	.kl-single__navs--items::-webkit-scrollbar-thumb {
		background: rgba(41, 44, 61, 0.22);
		border-radius: 4px;
	}

	.kl-single__navs--item {
		flex: 0 0 auto;
	}
}

.kl-single__navs--item {
	border-bottom: none !important;
}

.kl-single__navs--item--link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	/* Pilule compacte : peu de marge verticale (cf. maquette trait rouge). */
	padding: 6px 16px !important;
	min-height: 32px;
	font-weight: 500 !important;
	font-size: 0.9375rem !important;
	line-height: 1.2;
	color: rgba(41, 44, 61, 0.68);
	text-decoration: none;
	transition:
		background-color 0.22s ease,
		color 0.22s ease,
		box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
	.kl-single__navs--item:not(.active) .kl-single__navs--item--link:hover {
		background: rgba(41, 44, 61, 0.06);
		color: #292c3d;
	}
}

.kl-single__navs--item.active .kl-single__navs--item--link {
	color: var(--highlight-color, #292c3d) !important;
	font-weight: 700 !important;
	background: #fff;
	/* Contour fin (1px) + léger relief — le padding du lien crée l’air autour du texte. */
	box-shadow:
		0 2px 8px rgba(41, 44, 61, 0.06),
		0 0 0 1px var(--highlight-color, #292c3d);
}

.kl-single__navs--item--link:focus-visible {
	outline: 1px solid var(--highlight-color, #292c3d);
	outline-offset: 5px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.kl-single__navs--item--link {
		transition: none;
	}
}