/* Snap Sections Nav — navigation latérale */

.ssn-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ssn-gap, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: auto;
}

.ssn-nav--right { right: var(--ssn-edge, 28px); }
.ssn-nav--left  { left:  var(--ssn-edge, 28px); }

.ssn-nav__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ssn-size, 14px);
	height: var(--ssn-size, 14px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	cursor: pointer;
	color: var(--ssn-item-color, var(--ssn-idle, rgba(255,255,255,.55)));
	transition: color .25s ease, transform .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ssn-nav__btn:hover,
.ssn-nav__btn:focus-visible {
	color: var(--ssn-hover, #fff);
	transform: scale(1.25);
	background: none;
}

.ssn-nav__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

.ssn-nav__btn.is-active {
	color: var(--ssn-item-active, var(--ssn-active, #fff));
	transform: scale(1.35);
}

.ssn-nav__btn svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ssn-nav__btn .dashicons {
	width: var(--ssn-size, 14px);
	height: var(--ssn-size, 14px);
	font-size: var(--ssn-size, 14px);
	line-height: 1;
}

.ssn-nav__num {
	font-size: calc(var(--ssn-size, 14px) * .8);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Infobulle */
.ssn-nav__label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--ssn-label-bg, #111);
	color: var(--ssn-label-color, #fff);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	pointer-events: none;
}

.ssn-nav--right .ssn-nav__label { right: calc(100% + 12px); }
.ssn-nav--left  .ssn-nav__label { left:  calc(100% + 12px); }

.ssn-nav__btn:hover .ssn-nav__label,
.ssn-nav__btn:focus-visible .ssn-nav__label {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.ssn-nav__btn,
	.ssn-nav__label { transition: none; }
	.ssn-nav__btn:hover,
	.ssn-nav__btn.is-active { transform: none; }
}