/*******************************************
* FLOATING ELEMENTS MAKER - FRONTEND STYLES
*******************************************/

/* === VARIABLES CSS (définies via inline styles) === */
:root {
	--fem-position: right;
	--fem-spacing: 15px;
	--fem-icon-size: 30px;
	--fem-button-padding: 10px;
	--fem-border-radius: 50%;
	--fem-default-bg: #000000;
	--fem-default-bg-hover: #333333;
	--fem-default-icon: #ffffff;
	--fem-default-icon-hover: #ffffff;
}

/* === CONTAINER PRINCIPAL === */
.floating-container {
	position: fixed;
	display: flex;
	z-index: 9999;
	gap: var(--fem-spacing);
}

/* === POSITION DESKTOP === */
@media (min-width: 769px) {
	.floating-container {
		top: 50%;
		transform: translateY(-50%);
		flex-direction: column;
	}

	.floating-container[data-position="right"] {
		right: 20px;
	}

	.floating-container[data-position="left"] {
		left: 20px;
	}
}

/* === POSITION MOBILE === */
@media (max-width: 768px) {
	.floating-container {
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		flex-direction: row;
	}
}

/* === WRAPPER ÉLÉMENT === */
.floating-element-wrapper {
	/* Pas de position relative - la popup se positionne par rapport au container */
}

/* === BOUTON FLOTTANT === */
.floating-button {
	/* CORRECTION CRITIQUE : Pas de width/height fixe, juste padding */
	padding: var(--fem-button-padding);
	background-color: var(--fem-default-bg);
	border-radius: var(--fem-border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	position: relative;
	border: none;
	text-decoration: none;
}

.floating-button:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	background-color: var(--fem-default-bg-hover);
}

.floating-button svg {
	/* Le SVG prend la taille définie dans les paramètres */
	width: var(--fem-icon-size);
	height: var(--fem-icon-size);
	fill: var(--fem-default-icon);
	transition: fill 0.3s ease;
}

.floating-button:hover svg {
	fill: var(--fem-default-icon-hover);
}

/* === TOOLTIP === */
.floating-button::after {
	content: attr(data-tooltip);
	position: absolute;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1;
}

@media (min-width: 769px) {
	.floating-container[data-position="right"] .floating-button::after {
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%);
	}

	.floating-container[data-position="left"] .floating-button::after {
		left: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%);
	}
}

@media (max-width: 768px) {
	.floating-button::after {
		bottom: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%);
	}
}

.floating-button:hover::after {
	opacity: 1;
}

/* === POPUP === */
.floating-popup {
	position: absolute;
	display: none;
	z-index: 10000;
}

.floating-popup.active {
	display: block;
}

.floating-popup-content {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	max-width: 450px;
	width: 450px;
	max-height: 60vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* === POSITION POPUP DESKTOP === */
@media (min-width: 769px) {
	/* Boutons à DROITE → Popup à GAUCHE des boutons */
	.floating-container[data-position="right"] .floating-popup {
		right: calc(100% + 15px);
		top: 50%;
		transform: translateY(-50%);
	}

	/* Boutons à GAUCHE → Popup à DROITE des boutons */
	.floating-container[data-position="left"] .floating-popup {
		left: calc(100% + 15px);
		top: 50%;
		transform: translateY(-50%);
	}

	/* Animation desktop */
	.floating-popup-content {
		animation: popupFadeInDesktop 0.3s ease-out;
	}
}

/* === POSITION POPUP MOBILE === */
@media (max-width: 768px) {
	.floating-popup {
		bottom: calc(100% + 15px);
		left: 50%;
		transform: translateX(-50%);
	}

	.floating-popup-content {
		max-width: 90vw;
		width: 90vw;
		max-height: 70svh;
		animation: popupFadeInMobile 0.3s ease-out;
	}
}

/* === ANIMATIONS POPUP === */
/* Animation Desktop */
@keyframes popupFadeInDesktop {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Animation Mobile - juste opacity pour éviter conflit avec translateX */
@keyframes popupFadeInMobile {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.floating-popup-header {
	background: var(--fem-default-bg);
	color: #fff;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.floating-popup-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.floating-popup-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

.floating-popup-close:hover {
	opacity: 0.7;
}

.floating-popup-body {
	padding: 30px;
	overflow-y: auto;
	flex: 1;
}

/* === ANIMATIONS === */
/* Fade */
.floating-container.animation-fade .floating-button {
	animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Slide */
.floating-container.animation-slide .floating-button {
	animation: slideIn 0.5s ease-out;
}

@media (min-width: 769px) {
	@keyframes slideIn {
		from {
			transform: translateX(100px);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	.floating-container[data-position="left"].animation-slide .floating-button {
		animation: slideInLeft 0.5s ease-out;
	}

	@keyframes slideInLeft {
		from {
			transform: translateX(-100px);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}
}

@media (max-width: 768px) {
	@keyframes slideIn {
		from {
			transform: translateY(100px);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}

/* Bounce */
.floating-container.animation-bounce .floating-button {
	animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

/* === ÉTAT CACHÉ (pour apparition différée) === */
.floating-container {
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.floating-container.fem-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* === ALIGNEMENT MOBILE === */
@media (max-width: 768px) {
	/* Alignement gauche */
	.floating-container[data-mobile-align="left"] {
		left: 20px;
		transform: none;
	}

	/* Alignement gauche - Tooltip */
	.floating-container[data-mobile-align="left"] .floating-button::after {
		left: 0;
		transform: none;
	}

	/* Alignement gauche - Popup */
	.floating-container[data-mobile-align="left"] .floating-popup {
		left: 0;
		transform: none;
	}

	/* Alignement droite */
	.floating-container[data-mobile-align="right"] {
		left: auto;
		right: 20px;
		transform: none;
	}

	/* Alignement droite - Tooltip */
	.floating-container[data-mobile-align="right"] .floating-button::after {
		left: auto;
		right: 0;
		transform: none;
	}

	/* Alignement droite - Popup */
	.floating-container[data-mobile-align="right"] .floating-popup {
		left: auto;
		right: 0;
		transform: none;
	}

	/* Centre = comportement par défaut (left: 50%, transform: translateX(-50%)) */

	/* Masqué sur mobile */
	.floating-container[data-mobile-align="hidden"] {
		display: none !important;
	}
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
	.floating-popup-content {
		max-width: 95vw;
		width: 95vw;
	}

	.floating-popup-header {
		padding: 15px;
	}

	.floating-popup-body {
		padding: 20px;
	}
}