:root {
	--mlc-wa-color: #25d366;
	--mlc-wa-color-hover: #1da851;
	--mlc-wa-icon: #ffffff;
	--mlc-wa-size: 56px;
	--mlc-wa-offset: 24px;
	/* z-index élevé pour passer au-dessus des overlays (Flatsome, sliders, modales) */
	--mlc-wa-zindex: 99999;
}

/* Bouton flottant */
.mlc-whatsapp-fab {
	position: fixed;
	bottom: var(--mlc-wa-offset);
	right: var(--mlc-wa-offset);
	z-index: var(--mlc-wa-zindex);
	width: var(--mlc-wa-size);
	height: var(--mlc-wa-size);
	border-radius: 50%;
	background-color: var(--mlc-wa-color);
	color: var(--mlc-wa-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, background-color 0.15s ease;
	text-decoration: none !important;
	/* Permet au tooltip d'être visible sans être coupé par un overflow parent */
	overflow: visible;
	/* Contexte 3D pour les animations flip / zoom (perspective) */
	perspective: 600px;
}

.mlc-whatsapp-fab:hover,
.mlc-whatsapp-fab:focus {
	background-color: var(--mlc-wa-color-hover);
	transform: scale(1.06);
}

.mlc-whatsapp-fab:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--mlc-wa-color);
}

/* Bulle d'animation (tooltip) — format paysage (pilule horizontale) */
.mlc-whatsapp-tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	transform: translateY(-50%);
	background-color: #ffffff;
	color: #1f2937;
	/* Padding généreux sur l'axe horizontal pour un look pilule/bannière */
	padding: 12px 22px;
	/* border-radius élevé = rendu pilule, parfait pour un format paysage */
	border-radius: 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	/* Largeur paysage : on autorise une seule ligne tant que ça tient.
	   max-width large pour desktop, le navigateur fait le wrap si besoin. */
	max-width: 360px;
	text-align: left;
	pointer-events: none;
	/* Le tooltip doit être au-dessus de tout dans le contexte du bouton
	   (le bouton est en z-index 99999, on reste en stacking context local) */
	z-index: 1;
	/* Sécurité contre les overflow cachés sur certains thèmes */
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	white-space: nowrap;
	/* Texte sur une seule ligne (white-space: nowrap) → pas de scrollbar.
	   overflow: hidden évite tout débordement éventuel sans afficher de barre. */
	overflow: hidden;
	text-overflow: ellipsis;
	/* Optimisations GPU pour les animations */
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

.mlc-whatsapp-tooltip::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY(-50%);
	border-width: 6px 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
}

/* Alignement vertical selon la position du bouton :
   - Bouton en bas → tooltip aligné en bas (vers le centre de l'écran)
   - Bouton en haut → tooltip aligné en haut
   Cela évite que le tooltip soit coupé par le bord de l'écran.
   On annule le centrage par défaut (top:50%/transform) et on
   colle le tooltip au bord correspondant du bouton. */
.mlc-whatsapp-fab[data-pos-desktop="bottom-right"] .mlc-whatsapp-tooltip,
.mlc-whatsapp-fab[data-pos-desktop="bottom-left"] .mlc-whatsapp-tooltip {
	top: auto;
	bottom: 0;
	transform: none;
}

/* Flèche : on la positionne par rapport au bas du tooltip.
   Le centre vertical du bouton est à (--mlc-wa-size / 2) depuis le bas.
   La flèche fait 12px de haut, donc son centre doit être à (size/2)
   depuis le bas → son bord bas doit être à (size/2 - 6px) du bas du tooltip.
   Comme le tooltip a son bas aligné avec le bas du bouton, ça marche
   pour TOUTES les tailles de bouton (56/52/48 px). */
.mlc-whatsapp-fab[data-pos-desktop="bottom-right"] .mlc-whatsapp-tooltip::after,
.mlc-whatsapp-fab[data-pos-desktop="bottom-left"] .mlc-whatsapp-tooltip::after {
	top: auto;
	bottom: calc(var(--mlc-wa-size) / 2 - 6px);
	transform: none;
}

.mlc-whatsapp-fab[data-pos-desktop="top-right"] .mlc-whatsapp-tooltip,
.mlc-whatsapp-fab[data-pos-desktop="top-left"] .mlc-whatsapp-tooltip {
	top: 0;
	bottom: auto;
	transform: none;
}

/* Flèche : quand le tooltip est collé en haut, la flèche doit aussi
   pointer sur le centre vertical du bouton → (size/2 - 6px) depuis le haut. */
.mlc-whatsapp-fab[data-pos-desktop="top-right"] .mlc-whatsapp-tooltip::after,
.mlc-whatsapp-fab[data-pos-desktop="top-left"] .mlc-whatsapp-tooltip::after {
	top: calc(var(--mlc-wa-size) / 2 - 6px);
	bottom: auto;
	transform: none;
}

/* Tooltip à droite quand le bouton est à gauche */
.mlc-whatsapp-fab[data-pos-desktop="bottom-left"] .mlc-whatsapp-tooltip,
.mlc-whatsapp-fab[data-pos-desktop="top-left"] .mlc-whatsapp-tooltip {
	right: auto;
	left: calc(100% + 12px);
}

.mlc-whatsapp-fab[data-pos-desktop="bottom-left"] .mlc-whatsapp-tooltip::after,
.mlc-whatsapp-fab[data-pos-desktop="top-left"] .mlc-whatsapp-tooltip::after {
	right: auto;
	left: -6px;
	border-width: 6px 6px 6px 0;
	border-color: transparent #ffffff transparent transparent;
}

@media (min-width: 481px) and (max-width: 1024px) {
	.mlc-whatsapp-fab[data-pos-tablet="bottom-right"] .mlc-whatsapp-tooltip,
	.mlc-whatsapp-fab[data-pos-tablet="bottom-left"] .mlc-whatsapp-tooltip {
		top: auto;
		bottom: 0;
		transform: none;
	}

	/* Flèche : on utilise la variable --mlc-wa-size (52px en tablette)
	   pour pointer sur le centre vertical du bouton. */
	.mlc-whatsapp-fab[data-pos-tablet="bottom-right"] .mlc-whatsapp-tooltip::after,
	.mlc-whatsapp-fab[data-pos-tablet="bottom-left"] .mlc-whatsapp-tooltip::after {
		top: auto;
		bottom: calc(var(--mlc-wa-size) / 2 - 6px);
		transform: none;
	}

	.mlc-whatsapp-fab[data-pos-tablet="top-right"] .mlc-whatsapp-tooltip,
	.mlc-whatsapp-fab[data-pos-tablet="top-left"] .mlc-whatsapp-tooltip {
		top: 0;
		bottom: auto;
		transform: none;
	}

	.mlc-whatsapp-fab[data-pos-tablet="top-right"] .mlc-whatsapp-tooltip::after,
	.mlc-whatsapp-fab[data-pos-tablet="top-left"] .mlc-whatsapp-tooltip::after {
		top: calc(var(--mlc-wa-size) / 2 - 6px);
		bottom: auto;
		transform: none;
	}

	.mlc-whatsapp-fab[data-pos-tablet="bottom-left"] .mlc-whatsapp-tooltip,
	.mlc-whatsapp-fab[data-pos-tablet="top-left"] .mlc-whatsapp-tooltip {
		right: auto;
		left: calc(100% + 12px);
	}

	.mlc-whatsapp-fab[data-pos-tablet="bottom-left"] .mlc-whatsapp-tooltip::after,
	.mlc-whatsapp-fab[data-pos-tablet="top-left"] .mlc-whatsapp-tooltip::after {
		right: auto;
		left: -6px;
		border-width: 6px 6px 6px 0;
		border-color: transparent #ffffff transparent transparent;
	}
}

/* NOTE : la media query mobile qui suit (ligne ~340 dans le fichier
   final) regroupe toutes les règles responsives mobile : alignement
   du tooltip, centrage de la flèche via --mlc-wa-size, format paysage,
   max-height + scroll. On évite les doublons de media queries. */

/* ============================================================
   Animations premium de la bulle
   Timeline (durée totale ~5s) :
     0%   → 12%  : apparition
     12%  → 80%  : maintien visible
     80%  → 100% : disparition
   Chaque animation utilise un cubic-bezier distinctif pour un
   rendu fluide, élégant et professionnel.
   ============================================================ */

/* 1) SLIDE : glissement doux de la droite vers la gauche,
   avec léger flou à l'apparition qui se résout (effet premium). */
@keyframes mlc-wa-anim-slide {
	0%   { opacity: 0; transform: translateX(24px); filter: blur(4px); }
	12%  { opacity: 1; transform: translateX(0);    filter: blur(0); }
	80%  { opacity: 1; transform: translateX(0);    filter: blur(0); }
	100% { opacity: 0; transform: translateX(-24px); filter: blur(2px); }
}

/* 2) FADE : fondu doux + micro-scale + léger flou pour la profondeur. */
@keyframes mlc-wa-anim-fade {
	0%   { opacity: 0; transform: scale(0.96); filter: blur(3px); }
	12%  { opacity: 1; transform: scale(1);    filter: blur(0); }
	80%  { opacity: 1; transform: scale(1);    filter: blur(0); }
	100% { opacity: 0; transform: scale(0.98); filter: blur(2px); }
}

/* 3) BOUNCE : rebond élastique (cubic-bezier spring) + scale progressif. */
@keyframes mlc-wa-anim-bounce {
	0%   { opacity: 0; transform: translateX(24px) scale(0.4); }
	8%   { opacity: 1; }
	18%  { transform: translateX(0) scale(1.08); }
	28%  { transform: translateX(0) scale(0.97); }
	36%  { transform: translateX(0) scale(1.02); }
	44%  { transform: translateX(0) scale(1); }
	80%  { opacity: 1; transform: translateX(0) scale(1); }
	100% { opacity: 0; transform: translateX(-24px) scale(0.85); }
}

/* 4) ZOOM : zoom 3D avec perspective + micro-rotation pour la profondeur. */
@keyframes mlc-wa-anim-zoom {
	0%   { opacity: 0; transform: scale(0.4) rotate(-3deg); }
	14%  { opacity: 1; transform: scale(1.04) rotate(1.5deg); }
	22%  { transform: scale(0.99) rotate(-0.5deg); }
	32%  { transform: scale(1) rotate(0deg); }
	80%  { opacity: 1; transform: scale(1) rotate(0deg); }
	100% { opacity: 0; transform: scale(0.5) rotate(2deg); }
}

/* 5) FLIP : retournement 3D sur l'axe Y (plus naturel que rotateX). */
@keyframes mlc-wa-anim-flip {
	0%   { opacity: 0; transform: rotateY(-90deg); }
	14%  { opacity: 1; transform: rotateY(8deg); }
	22%  { transform: rotateY(-4deg); }
	30%  { transform: rotateY(0deg); }
	80%  { opacity: 1; transform: rotateY(0deg); }
	100% { opacity: 0; transform: rotateY(90deg); }
}

.mlc-whatsapp-tooltip {
	animation-duration: 5s;
	/* ease-in-out par défaut, les animations spécifiques peuvent l'override */
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-iteration-count: 1;
}

.mlc-whatsapp-tooltip[data-animation="slide"]  { animation-name: mlc-wa-anim-slide;  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.mlc-whatsapp-tooltip[data-animation="fade"]   { animation-name: mlc-wa-anim-fade;   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.mlc-whatsapp-tooltip[data-animation="bounce"] { animation-name: mlc-wa-anim-bounce; animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.mlc-whatsapp-tooltip[data-animation="zoom"]   { animation-name: mlc-wa-anim-zoom;   animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.mlc-whatsapp-tooltip[data-animation="flip"]   { animation-name: mlc-wa-anim-flip;   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
	.mlc-whatsapp-tooltip {
		animation: none !important;
		opacity: 0;
		filter: none !important;
	}
}

/* Positions desktop (défaut) */
.mlc-whatsapp-fab[data-pos-desktop="bottom-left"] {
	right: auto;
	left: var(--mlc-wa-offset);
}

.mlc-whatsapp-fab[data-pos-desktop="top-right"] {
	bottom: auto;
	top: var(--mlc-wa-offset);
}

.mlc-whatsapp-fab[data-pos-desktop="top-left"] {
	bottom: auto;
	right: auto;
	top: var(--mlc-wa-offset);
	left: var(--mlc-wa-offset);
}

.mlc-whatsapp-fab[data-pos-desktop="hidden"] {
	display: none !important;
}

/* Safe area iOS (uniquement avant les positions top pour ne pas interférer) */
@supports (padding: max(0px)) {
	.mlc-whatsapp-fab {
		bottom: max(var(--mlc-wa-offset), env(safe-area-inset-bottom));
	}
}

/* Tablette */
@media (min-width: 481px) and (max-width: 1024px) {
	.mlc-whatsapp-fab[data-pos-tablet="bottom-right"] {
		right: var(--mlc-wa-offset);
		left: auto;
		top: auto;
		bottom: var(--mlc-wa-offset);
	}

	.mlc-whatsapp-fab[data-pos-tablet="bottom-left"] {
		right: auto;
		left: var(--mlc-wa-offset);
		top: auto;
		bottom: var(--mlc-wa-offset);
	}

	.mlc-whatsapp-fab[data-pos-tablet="top-right"] {
		bottom: auto;
		top: var(--mlc-wa-offset);
		right: var(--mlc-wa-offset);
		left: auto;
	}

	.mlc-whatsapp-fab[data-pos-tablet="top-left"] {
		bottom: auto;
		top: var(--mlc-wa-offset);
		right: auto;
		left: var(--mlc-wa-offset);
	}

	.mlc-whatsapp-fab[data-pos-tablet="hidden"] {
		display: none !important;
	}
}

/* Mobile : tooltip en bannière horizontale AU-DESSUS du bouton
   (pattern FAB classique, format paysage garanti).
   - Une seule ligne (white-space: nowrap)
   - Ancré au-dessus du bouton (bottom: calc(100% + 10px))
   - Calé sur le côté correspondant du bouton (right: 0 ou left: 0)
     pour ne jamais déborder du viewport, peu importe la taille d'écran
   - Flèche vers le bas, centrée sur le bouton (26px = size/2)
   - max-width adaptatif : ne dépasse jamais l'écran */
@media (max-width: 480px) {
	.mlc-whatsapp-fab {
		--mlc-wa-size: 52px;
		--mlc-wa-offset: 16px;
	}

	/* Reset des positions latérales héritées du desktop :
	   on veut un tooltip centré verticalement par défaut sur mobile,
	   mais ce sera surchargé par les règles data-pos-mobile ci-dessous. */
	.mlc-whatsapp-tooltip {
		right: auto;
		left: auto;
		/* Format paysage : pilule horizontale, une seule ligne */
		max-width: calc(100vw - 32px);
		font-size: 13px;
		padding: 10px 18px;
		border-radius: 20px;
		white-space: nowrap;
		/* Pas de scrollbar : texte sur une seule ligne. */
		overflow: hidden;
	}

	.mlc-whatsapp-fab[data-pos-mobile="bottom-right"] {
		right: var(--mlc-wa-offset);
		left: auto;
		top: auto;
		bottom: var(--mlc-wa-offset);
	}

	.mlc-whatsapp-fab[data-pos-mobile="bottom-left"] {
		right: auto;
		left: var(--mlc-wa-offset);
		top: auto;
		bottom: var(--mlc-wa-offset);
	}

	.mlc-whatsapp-fab[data-pos-mobile="top-right"] {
		bottom: auto;
		top: var(--mlc-wa-offset);
		right: var(--mlc-wa-offset);
		left: auto;
	}

	.mlc-whatsapp-fab[data-pos-mobile="top-left"] {
		bottom: auto;
		top: var(--mlc-wa-offset);
		right: auto;
		left: var(--mlc-wa-offset);
	}

	/* ============================================================
	   Positionnement bannière : tooltip AU-DESSUS du bouton
	   (pour les 4 positions mobiles, c'est le comportement uniforme
	   qui garantit le format paysage)
	   - Bouton en bas → tooltip au-dessus
	   - Bouton en haut → tooltip en-dessous (logique miroir)
	   - Calé sur le côté correspondant du bouton (right/left: 0)
	     pour ne jamais déborder du viewport
	   ============================================================ */

	/* Bouton en bas à droite : tooltip au-dessus, calé à droite */
	.mlc-whatsapp-fab[data-pos-mobile="bottom-right"] .mlc-whatsapp-tooltip {
		top: auto;
		right: 0;
		bottom: calc(100% + 10px);
		left: auto;
		transform: none;
	}

	/* Bouton en bas à gauche : tooltip au-dessus, calé à gauche */
	.mlc-whatsapp-fab[data-pos-mobile="bottom-left"] .mlc-whatsapp-tooltip {
		top: auto;
		right: auto;
		bottom: calc(100% + 10px);
		left: 0;
		transform: none;
	}

	/* Bouton en haut à droite : tooltip en-dessous, calé à droite */
	.mlc-whatsapp-fab[data-pos-mobile="top-right"] .mlc-whatsapp-tooltip {
		bottom: auto;
		right: 0;
		top: calc(100% + 10px);
		left: auto;
		transform: none;
	}

	/* Bouton en haut à gauche : tooltip en-dessous, calé à gauche */
	.mlc-whatsapp-fab[data-pos-mobile="top-left"] .mlc-whatsapp-tooltip {
		bottom: auto;
		right: auto;
		top: calc(100% + 10px);
		left: 0;
		transform: none;
	}

	/* ============================================================
	   Flèche : pointe vers le bouton (vers le bas si bouton en bas,
	   vers le haut si bouton en haut), centrée horizontalement
	   sur le bouton (offset = --mlc-wa-size / 2 depuis le côté
	   correspondant du tooltip, qui est calé sur le bouton).
	   ============================================================ */

	/* Bouton en bas à droite : flèche en bas, décalée de 26px à droite */
	.mlc-whatsapp-fab[data-pos-mobile="bottom-right"] .mlc-whatsapp-tooltip::after {
		top: auto;
		right: 26px; /* = --mlc-wa-size / 2 = 52/2 = 26 */
		bottom: -6px;
		left: auto;
		transform: none;
		border-width: 6px 6px 0 6px;
		border-color: #ffffff transparent transparent transparent;
	}

	/* Bouton en bas à gauche : flèche en bas, décalée de 26px à gauche */
	.mlc-whatsapp-fab[data-pos-mobile="bottom-left"] .mlc-whatsapp-tooltip::after {
		top: auto;
		right: auto;
		bottom: -6px;
		left: 26px;
		transform: none;
		border-width: 6px 6px 0 6px;
		border-color: #ffffff transparent transparent transparent;
	}

	/* Bouton en haut à droite : flèche en haut, décalée de 26px à droite */
	.mlc-whatsapp-fab[data-pos-mobile="top-right"] .mlc-whatsapp-tooltip::after {
		bottom: auto;
		right: 26px;
		top: -6px;
		left: auto;
		transform: none;
		border-width: 0 6px 6px 6px;
		border-color: transparent transparent #ffffff transparent;
	}

	/* Bouton en haut à gauche : flèche en haut, décalée de 26px à gauche */
	.mlc-whatsapp-fab[data-pos-mobile="top-left"] .mlc-whatsapp-tooltip::after {
		bottom: auto;
		right: auto;
		top: -6px;
		left: 26px;
		transform: none;
		border-width: 0 6px 6px 6px;
		border-color: transparent transparent #ffffff transparent;
	}

	.mlc-whatsapp-fab[data-pos-mobile="hidden"] {
		display: none !important;
	}
}

@media print {
	.mlc-whatsapp-fab {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlc-whatsapp-fab {
		transition: none;
	}

	.mlc-whatsapp-fab:hover,
	.mlc-whatsapp-fab:focus {
		transform: none;
	}
}

/* Bouton inline (shortcode) */
.mlc-whatsapp-inline-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.65em 1.1em;
	background-color: var(--mlc-wa-color);
	color: var(--mlc-wa-icon);
	border-radius: 4px;
	text-decoration: none !important;
	font-weight: 600;
	transition: background-color 0.15s ease;
}

.mlc-whatsapp-inline-btn:hover,
.mlc-whatsapp-inline-btn:focus {
	background-color: var(--mlc-wa-color-hover);
	color: var(--mlc-wa-icon);
}

.mlc-whatsapp-inline-btn svg {
	flex-shrink: 0;
}

/* Bouton produit WooCommerce */
.mlc-whatsapp-product-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-top: 0.75em;
	width: 100%;
}

.mlc-whatsapp-product-btn svg {
	flex-shrink: 0;
}

/* Bouton loop WooCommerce */
.mlc-whatsapp-loop-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.5em;
}

/* Bouton header Flatsome */
.mlc-whatsapp-header-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: inherit;
	text-decoration: none;
}

.mlc-whatsapp-header-btn:hover {
	opacity: 0.8;
}

.mlc-whatsapp-header-label {
	font-size: 0.9em;
}