/* Front styles for Mairie - Bouton contact flottant */
.mcf-float{
	position: fixed;
	right: 12px;
	z-index: 99999;
	text-decoration: none;
	outline: none;
}

.mcf-inner{
	display: inline-flex;
	align-items: center;
	gap: 12px;

	/* Closed state pill */
	width: var(--mcf-collapsed-width, 78px);
	padding: 12px 18px;
	overflow: hidden;

	border-radius: 999px;
	background: var(--mcf-bg-color, #ffffff);
	border: 2px solid var(--mcf-border-color, #651906);
	box-shadow: 0 6px 18px rgba(0,0,0,.12);

	/* Center icon when closed, left-align when open via class */
	justify-content: center;

	/* Keep other transitions; width animated by jQuery for consistency */
	transition: transform .18s ease,
				background-color .2s ease,
				box-shadow .25s ease;
}

.mcf-float.mcf-open .mcf-inner{
	justify-content: flex-start;
	box-shadow: 0 10px 26px rgba(0,0,0,.16);
	background: var(--mcf-hover-bg-color, #ffffff);
}

.mcf-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	color: var(--mcf-icon-color, #651906);
}

.mcf-label{
	white-space: nowrap;
	overflow: hidden;

	/* label must not push icon out when closed */
	max-width: 0;
	opacity: 0;
	transform: translateX(-10px);

	color: var(--mcf-text-color, #651906);
	font-weight: 600;

	transition: max-width .45s ease,
				opacity .2s ease,
				transform .45s ease;
}

.mcf-float.mcf-open .mcf-label{
	max-width: 260px;
	opacity: 1;
	transform: translateX(0);
}

.mcf-float:active .mcf-inner{
	transform: scale(.98);
}

@media (prefers-reduced-motion: reduce){
	.mcf-inner, .mcf-label{ transition: none; }
}