/* viewpoint de página */
.viewpoint{
	position:fixed;
	top:50%;
	right:4rem;
	z-index:150;
	display:flex;
	flex-direction:column;
	gap:0;
	margin:0;
	padding:0;
	transform:translateY(-50%);
}

.viewpoint a{
	position:relative;
	display:block;
	margin:0;
	padding:0;
	color:rgb(var(--b) / 1);
	font-family:"icomoon";
	font-size:1rem;
	line-height:1;
	text-decoration:none;
	transition:
		color .25s ease,
		transform .25s ease;
}

.viewpoint a::before{
	content:"\e906";
}
.viewpoint a:hover::before{
	content:"-";
}

.viewpoint a[data-tooltip]::after{
	content:attr(data-tooltip);
	position:absolute;
	top:50%;
	right:calc(100% + .75rem);
	z-index:1;
	width:max-content;
	max-width:min(24rem, calc(100vw - 8rem));
	padding:.55rem .75rem;
	border-radius:.25rem;
	background:rgb(var(--b) / .75);
	color:rgb(var(--n) / 1);
	font-size:.75rem;
	line-height:1.2;
	text-align:right;
white-space:pre-line;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translate(.5rem, -50%);
	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;
}

.viewpoint a[data-tooltip]:hover::after,
.viewpoint a[data-tooltip]:focus-visible::after{
	opacity:1;
	visibility:visible;
	transform:translate(0, -50%);
}

.viewpoint a:hover{
	color:rgb(var(--c2) / 1);
	transform:scale(1.15);
}

.viewpoint a.is-active{
	color:rgb(var(--c2) / 1);
	transform:scale(1.35);
}

@media (max-width:767px){
	.viewpoint{
		top: 100%;
		left: 0;
		background: #2ba;
		width: 1px;
		display: none;
	}

	.viewpoint a{
		font-size:.9rem;
	}
}