/* ==========================================================================
   whatsapp.css — Bouton flottant WhatsApp, position fixed bas droite/gauche.
   Activé depuis Paramètres Ombre > WhatsApp.
   ========================================================================== */

.ombre-whatsapp {
	--ombre-wa-green: #25D366;
	--ombre-wa-green-dark: #1da851;
	--ombre-wa-size: 60px;

	position: fixed;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ombre-wa-size);
	height: var(--ombre-wa-size);
	padding: 0;
	background: var(--ombre-wa-green);
	color: #ffffff;
	border-radius: 50%;
	text-decoration: none;
	box-shadow:
		0 4px 14px rgba(37, 211, 102, 0.35),
		0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 90;
	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.ombre-whatsapp--right { right: 24px; }
.ombre-whatsapp--left { left: 24px; }

.ombre-whatsapp:hover,
.ombre-whatsapp:focus-visible {
	background: var(--ombre-wa-green-dark);
	transform: scale(1.08);
	box-shadow:
		0 8px 22px rgba(37, 211, 102, 0.5),
		0 3px 8px rgba(0, 0, 0, 0.35);
	outline: none;
}

.ombre-whatsapp:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.ombre-whatsapp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	position: relative;
	z-index: 2;
}

/* Pulse ring around the button — gentle attention loop */
.ombre-whatsapp__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--ombre-wa-green);
	opacity: 0.6;
	z-index: 1;
	animation: ombre-whatsapp-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes ombre-whatsapp-pulse {
	0%   { transform: scale(1);    opacity: 0.55; }
	70%  { transform: scale(1.7);  opacity: 0; }
	100% { transform: scale(1.7);  opacity: 0; }
}

/* Tooltip (desktop only — apparaît au survol à gauche du bouton) */
.ombre-whatsapp__tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	background: #0d0d0d;
	color: #ffffff;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.25s ease,
		visibility 0s linear 0.2s;
}

.ombre-whatsapp__tooltip::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #0d0d0d;
}

.ombre-whatsapp--left .ombre-whatsapp__tooltip {
	right: auto;
	left: calc(100% + 12px);
	transform: translateY(-50%) translateX(-8px);
}

.ombre-whatsapp--left .ombre-whatsapp__tooltip::after {
	right: auto;
	left: -5px;
	border-left: none;
	border-right: 5px solid #0d0d0d;
}

@media (hover: hover) and (pointer: fine) {
	.ombre-whatsapp:hover .ombre-whatsapp__tooltip,
	.ombre-whatsapp:focus-visible .ombre-whatsapp__tooltip {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
		transition-delay: 0s;
	}
}

/* Mobile : taille réduite + offset moindre */
@media (max-width: 600px) {
	.ombre-whatsapp {
		--ombre-wa-size: 52px;
		bottom: 16px;
	}
	.ombre-whatsapp--right { right: 16px; }
	.ombre-whatsapp--left { left: 16px; }

	.ombre-whatsapp__icon svg {
		width: 24px;
		height: 24px;
	}

	.ombre-whatsapp__tooltip { display: none; }
}

.ombre-whatsapp--hide-mobile {
	display: inline-flex;
}

@media (max-width: 599px) {
	.ombre-whatsapp--hide-mobile {
		display: none !important;
	}
}

/* Évite que le bouton chevauche la popup de devis quand celle-ci est ouverte */
body.has-quote-popup-open .ombre-whatsapp {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* Reduced motion : désactive le pulse */
@media (prefers-reduced-motion: reduce) {
	.ombre-whatsapp__pulse {
		animation: none;
	}
	.ombre-whatsapp:hover,
	.ombre-whatsapp:focus-visible {
		transform: none;
	}
}