/**
 * L'Aire Bête — Bouton mute/unmute des sons d'ambiance (Phase 3.6)
 *
 * Petit cercle sarcelle fixé en haut à droite. État par défaut = muet
 * (icône haut-parleur barré). Au clic, bascule vers actif (icône
 * haut-parleur + ondes) et persiste l'état dans sessionStorage.
 */

.lb-sound-toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 200; /* au-dessus de Lulu (z:100) et de la fontaine */
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--lb-sarcelle);
	color: var(--lb-blanc-casse);
	cursor: pointer;
	box-shadow: var(--lb-shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

.lb-sound-toggle:hover {
	/* v1.49.4 — Pattern unifié : luminosité dorée seule */
	filter: drop-shadow(0 8px 24px rgba(255, 215, 100, 0.65));
}

.lb-sound-toggle:focus-visible {
	outline: 3px solid var(--lb-or-clair);
	outline-offset: 3px;
}

.lb-sound-toggle:active {
	transform: scale(0.96);
}

.lb-sound-toggle svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none; /* clics passent au bouton, pas au SVG */
}

/* Bascule des deux icônes selon l'état :
   - défaut (muet)        → icône "off" visible
   - .is-active (sons on) → icône "on" visible */
.lb-sound-icon-on  { display: none; }
.lb-sound-icon-off { display: block; }

.lb-sound-toggle.is-active .lb-sound-icon-on  { display: block; }
.lb-sound-toggle.is-active .lb-sound-icon-off { display: none; }

/* Pulse subtil au passage actif → muet pour signaler le toggle */
.lb-sound-toggle.is-active {
	animation: lb-sound-pulse 0.4s ease-out;
}

@keyframes lb-sound-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(212, 175, 55, 0.6); }
	100% { box-shadow: 0 0 0 16px rgba(212, 175, 55, 0); }
}

/* === Mobile ============================================================ */

@media (max-width: 768px) {
	.lb-sound-toggle {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}
	.lb-sound-toggle svg {
		width: 20px;
		height: 20px;
	}
}

/* === Reduced motion ==================================================== */

@media (prefers-reduced-motion: reduce) {
	.lb-sound-toggle,
	.lb-sound-toggle:hover,
	.lb-sound-toggle:active {
		transition: none;
		transform: none;
	}
	.lb-sound-toggle.is-active {
		animation: none;
	}
}