/* ============================================================
   VISITE BADGE  –  shortcut header + drawer vers visite virtuelle 360°
   ============================================================ */

.wc-visite-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	width: 4.5rem;
	height: 4.5rem;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: var(--br-circle);
	background-color: var(--c-primary);
	border: 2px solid var(--c-primary);
	color: var(--c-text-inverse);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	scale: 1;
	transition: scale var(--tr-base), background-color var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base);
	-webkit-tap-highlight-color: transparent;

	&:hover,
	&:focus,
	&:focus-visible,
	&:active {
		background-color: var(--c-primary-hover) !important;
		border-color: var(--c-primary-hover) !important;
		color: var(--c-text-inverse) !important;
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
		scale: 1.06;
		outline: none;
	}

	&:focus-visible {
		outline: 2px solid var(--c-primary-light);
		outline-offset: 3px;
	}
}

.wc-visite-badge__ring {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: wc-spin 3s linear infinite;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.wc-visite-badge__arrow {
	width: 2.25rem;
	height: 2.25rem;
}

.wc-visite-badge__text {
	font-size: 0.75rem;
	font-weight: var(--fw-black);
	letter-spacing: 0.0375em;
	line-height: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	.wc-visite-badge__ring {
		animation: none;
	}
}

/* ---- Variante header (absolute dans .site-header, à gauche, miroir du burger) ---- */

.wc-visite-badge--header {
	position: absolute;
	top: 50%;
	left: var(--s-ld);
	translate: 0 -50%;
	z-index: 2;
	width: 3.75rem;
	height: 3.75rem;
	gap: 0;
}

.wc-visite-badge--header .wc-visite-badge__ring,
.wc-visite-badge--header .wc-visite-badge__arrow {
	width: 1.75rem;
	height: 1.75rem;
}

.wc-visite-badge--header .wc-visite-badge__text {
	font-size: 0.625rem;
}

.site-header.is-scrolled .wc-visite-badge--header {
	width: 3rem;
	height: 3rem;
}

.site-header.is-scrolled .wc-visite-badge--header .wc-visite-badge__ring,
.site-header.is-scrolled .wc-visite-badge--header .wc-visite-badge__arrow {
	width: 1.375rem;
	height: 1.375rem;
}

.site-header.is-scrolled .wc-visite-badge--header .wc-visite-badge__text {
	font-size: 0.5625rem;
}

@media (max-width: 768px) {
	.wc-visite-badge--header {
		width: 2.5rem;
		height: 2.5rem;
		left: var(--s-md);
	}

	.wc-visite-badge--header .wc-visite-badge__ring,
	.wc-visite-badge--header .wc-visite-badge__arrow {
		width: 1.125rem;
		height: 1.125rem;
	}

	.wc-visite-badge--header .wc-visite-badge__text {
		font-size: 0.5rem;
	}
}

/* ---- Variante drawer (gros badge centré, au-dessus de la liste de liens) ---- */

.wc-visite-badge--drawer {
	width: 4.5rem;
	height: 4.5rem;
	margin: var(--s-xl) auto 0;
	gap: 0.125rem;
}

.wc-visite-badge--drawer .wc-visite-badge__ring,
.wc-visite-badge--drawer .wc-visite-badge__arrow {
	width: 2rem;
	height: 2rem;
}

.wc-visite-badge--drawer .wc-visite-badge__text {
	font-size: 0.75rem;
}