/* Monsieur Menuiserie – Points chauds : styles front
   Variables surchargeables depuis le thème / Elementor :
   .mm-pc-block { --mm-pc-accent: #VotreCouleur; } */

.mm-pc-block {
	--mm-pc-accent: #2b2b7a;
	--mm-pc-accent-rgb: 43, 43, 122;
	--mm-pc-point-size: clamp( 16px, 1.5vw, 22px );
	--mm-pc-pop-bg: #ffffff;
	--mm-pc-pop-color: #1f2340;
	--mm-pc-pop-radius: 10px;
	--mm-pc-pop-max: 280px;
	--mm-pc-label-color: #1f2340;
	--mm-pc-label-desc-color: #6a6f82;
	--mm-pc-line-color: #c9ccd6;

	max-width: 1120px;
	margin: 0 auto;
}

/* En-tête */
.mm-pc-head {
	text-align: left;
	margin-bottom: 40px;
}
.mm-pc-block-title {
	margin: 0 0 0.4rem;
	color: var(--mm-pc-accent);
	font-size: 1.4rem;
	font-weight: 600;
}
.mm-pc-block-subtitle {
	margin: 0;
	color: #5a5f73;
}

/* Viewport : image au centre, colonnes d'étiquettes de part et d'autre (desktop) */
.mm-pc-viewport {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

/* Colonnes d'étiquettes : masquées par défaut (mobile), affichées en desktop */
.mm-pc-labels {
	display: none;
}

/* Figure (conteneur de référence pour les % et le popover) */
.mm-pc-figure {
	position: relative;
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	line-height: 0;
	flex: 0 1 600px;
}
.mm-pc-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Points
   Sélecteur préfixé + !important sur les propriétés critiques : Elementor et
   certains thèmes imposent border/padding/border-radius/min-* aux <button>,
   ce qui déforme la pastille. On verrouille la forme ronde et la taille. */
.mm-pc-block .mm-pc-point {
	position: absolute;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	transform: translate(-50%, -50%);
	width: var(--mm-pc-point-size) !important;
	height: var(--mm-pc-point-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--mm-pc-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.9 ),
		0 2px 6px rgba( 0, 0, 0, 0.25 );
	z-index: 2;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.mm-pc-point::before {
	/* halo animé */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba( var(--mm-pc-accent-rgb), 0.45 );
	animation: mm-pc-pulse 2.4s ease-out infinite;
}
.mm-pc-point-icon {
	position: relative;
	display: block;
	color: #fff;
	font-size: calc( var(--mm-pc-point-size) * 0.66 );
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
}
.mm-pc-block .mm-pc-point:hover,
.mm-pc-block .mm-pc-point:focus-visible,
.mm-pc-block .mm-pc-point.is-active {
	transform: translate(-50%, -50%) scale(1.12);
	box-shadow: 0 0 0 4px rgba( 255, 255, 255, 0.95 ),
		0 0 0 7px rgba( var(--mm-pc-accent-rgb), 0.35 ),
		0 4px 12px rgba( 0, 0, 0, 0.3 );
	outline: none;
}
.mm-pc-point.is-active::before {
	animation: none;
}

@keyframes mm-pc-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba( var(--mm-pc-accent-rgb), 0.45 );
	}
	70% {
		box-shadow: 0 0 0 14px rgba( var(--mm-pc-accent-rgb), 0 );
	}
	100% {
		box-shadow: 0 0 0 0 rgba( var(--mm-pc-accent-rgb), 0 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.mm-pc-point::before {
		animation: none;
	}
}

/* Popover */
.mm-pc-popover {
	position: absolute;
	z-index: 10;
	width: max-content;
	max-width: min( var(--mm-pc-pop-max), 80vw );
	padding: 14px 16px;
	background: var(--mm-pc-pop-bg);
	color: var(--mm-pc-pop-color);
	border-radius: var(--mm-pc-pop-radius);
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.18 );
	line-height: 1.45;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}
.mm-pc-popover.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Flèche du popover */
.mm-pc-popover::after {
	content: '';
	position: absolute;
	left: var(--mm-pc-arrow, 50%);
	width: 12px;
	height: 12px;
	background: var(--mm-pc-pop-bg);
	transform: translateX(-50%) rotate(45deg);
}
.mm-pc-popover[data-placement='top']::after {
	bottom: -6px;
	box-shadow: 3px 3px 6px rgba( 0, 0, 0, 0.06 );
}
.mm-pc-popover[data-placement='bottom']::after {
	top: -6px;
	box-shadow: -3px -3px 6px rgba( 0, 0, 0, 0.06 );
}

.mm-pc-content-title,
.mm-pc-popover-body .mm-pc-content-title {
	margin: 0 0 4px;
	font-size: 0.98rem;
	color: var(--mm-pc-accent);
}
.mm-pc-content-text,
.mm-pc-popover-body .mm-pc-content-text {
	margin: 0;
	font-size: 0.9rem;
}
.mm-pc-popover-body p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   DESKTOP : étiquettes latérales reliées aux points, pas de popover
   ---------------------------------------------------------------------- */
@media ( min-width: 900px ) {
	.mm-pc-labels {
		display: block;
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		/* Les traits débordent sur l'image : ils doivent passer au-dessus. */
		z-index: 3;
	}
	.mm-pc-figure {
		flex: 0 0 600px;
	}
	/* Desktop : tout est visible en permanence, le popover est désactivé. */
	.mm-pc-popover {
		display: none !important;
	}
	.mm-pc-block .mm-pc-point {
		cursor: default;
	}

	.mm-pc-label {
		position: absolute;
		left: 0;
		right: 0;
		transform: translateY( -50% );
		display: flex;
		align-items: center;
		line-height: 1.35;
	}
	.mm-pc-label-text {
		flex: 0 1 auto;
		max-width: 80%;
	}

	/* Trait de liaison : position/longueur calculées en pixels par front.js
	   pour atteindre exactement le bouton du point chaud (au-delà de l'image). */
	.mm-pc-label-line {
		position: absolute;
		top: 50%;
		height: 1px;
		background: var(--mm-pc-line-color);
		transform: translateY( -50% );
		pointer-events: none;
	}

	/* Colonne gauche : texte à gauche, trait vers la droite (l'image). */
	.mm-pc-labels--left {
		padding-right: 20px;
	}
	.mm-pc-labels--left .mm-pc-label {
		justify-content: flex-start;
		text-align: left;
	}

	/* Colonne droite : texte à droite, trait vers la gauche (l'image). */
	.mm-pc-labels--right {
		padding-left: 20px;
	}
	.mm-pc-labels--right .mm-pc-label {
		justify-content: flex-end;
		text-align: left;
	}

	.mm-pc-label-title {
		margin: 0 0 2px;
		font-size: 0.95rem;
		font-weight: 700;
		color: var(--mm-pc-label-color);
	}
	.mm-pc-label-desc {
		margin: 0;
		font-size: 0.82rem;
		color: var(--mm-pc-label-desc-color);
	}
	.mm-pc-label-desc p {
		margin: 0;
	}

	/* Surbrillance au survol (point <-> étiquette liés) */
	.mm-pc-label.is-active .mm-pc-label-title {
		color: var(--mm-pc-accent);
	}
}

/* Sur très petits écrans, on réduit le point. */
@media ( max-width: 480px ) {
	.mm-pc-block {
		--mm-pc-point-size: 20px;
		--mm-pc-pop-max: 240px;
	}
}