/* BP France Map — front-end styles */

.bpfm {
	--bpfm-max-width: 900px;
	--bpfm-rest: #1d2b36;
	--bpfm-text: #ffffff;
	--bpfm-title: #ffffff;
	--bpfm-accent: #5ab4d6;
	/* The subtitle always derives from the title colour, so a custom title
	   colour (or a theme mismatch) never leaves it unreadable. */
	--bpfm-muted: color-mix(in srgb, var(--bpfm-title) 72%, transparent);
	--bpfm-label-bg: #0b1824;
	--bpfm-label-text: #ffffff;
	--bpfm-outline: rgba(255, 255, 255, .35);
	--bpfm-rest-outline: rgba(255, 255, 255, .08);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--bpfm-max-width);
	margin: 0 auto;
	padding: 32px 16px 24px;
	color: var(--bpfm-text);
	font-family: inherit;
	overflow: hidden;
	border-radius: 24px;
}

.bpfm *,
.bpfm *::before,
.bpfm *::after {
	box-sizing: border-box;
}

/* ---- themes ---------------------------------------------------------- */

.bpfm--dark {
	background:
		radial-gradient(60% 55% at 50% 58%, rgba(36, 120, 150, .25) 0%, rgba(36, 120, 150, 0) 70%),
		radial-gradient(120% 90% at 50% 0%, #10212c 0%, #060c12 70%, #03070b 100%);
}

.bpfm--light {
	--bpfm-text: #1c2b4a;
	--bpfm-title: #1c2b4a;
	--bpfm-accent: #7fa6b8;
	--bpfm-rest: #d6dee5;
	--bpfm-outline: rgba(255, 255, 255, .9);
	--bpfm-rest-outline: rgba(0, 0, 0, .06);
	background: linear-gradient(180deg, #f7f9fb 0%, #e9eef2 100%);
}

.bpfm--transparent {
	background: transparent;
	border-radius: 0;
}

/* Softer shadow and highlight on a light background. */
.bpfm--light feDropShadow {
	flood-opacity: .18;
}

.bpfm--light .bpfm__zone:hover .bpfm__shape,
.bpfm--light .bpfm__zone:focus-visible .bpfm__shape,
.bpfm--light .bpfm__zone[data-active] .bpfm__shape {
	filter: brightness(1.25) saturate(1.15);
}

.bpfm--light .bpfm__label {
	box-shadow: 0 6px 18px rgba(16, 33, 44, .25);
}

/* ---- full-screen page (plugin template) ------------------------------ */

.bpfm-fullscreen {
	margin: 0;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	overflow-x: hidden;
	color: #fff;
	background:
		radial-gradient(60% 55% at 50% 58%, rgba(36, 120, 150, .25) 0%, rgba(36, 120, 150, 0) 70%),
		radial-gradient(120% 90% at 50% 0%, #10212c 0%, #060c12 70%, #03070b 100%) fixed;
	background-color: #060c12;
}

.bpfm-fullscreen--light {
	color: #10212c;
	background: linear-gradient(180deg, #f7f9fb 0%, #e9eef2 100%) fixed;
	background-color: #f0f3f6;
}

/* Explicit widths everywhere: the theme's own CSS must not narrow the map. */
.bpfm-fullscreen .bpfm-fullscreen__main {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 16px;
	/* Animations (rings, entrance) may poke out of the box: never let them
	   create a scrollbar. Nothing useful lives outside this box. */
	overflow: hidden;
}

.bpfm-fullscreen .bpfm-fullscreen__logo img {
	display: block;
	max-height: 44px;
	width: auto;
}

.bpfm-fullscreen .bpfm-fullscreen__content {
	max-width: 720px;
	text-align: center;
}

.bpfm-fullscreen .bpfm {
	width: 100%;
	max-width: none;
	padding: 0;
	overflow: visible;
}

.bpfm-fullscreen .bpfm__header {
	margin-bottom: 6px;
}

.bpfm-fullscreen .bpfm__title {
	font-size: clamp(22px, 2.6vw, 32px);
}

.bpfm-fullscreen .bpfm__subtitle {
	font-size: 14px;
}

.bpfm-fullscreen .bpfm__svg {
	width: 100%;
	max-width: none;
	height: auto;
}

/* The map is the page: on landscape screens its size follows the viewport
   height (logo + titles take about 170px), on portrait screens the width. */
.bpfm-fullscreen .bpfm__stage {
	width: 100%;
	max-width: none;
}

@media (min-aspect-ratio: 1/1) and (min-width: 720px) {
	.bpfm-fullscreen .bpfm__stage {
		width: clamp(320px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 170px), calc(100vw - 48px));
	}

	.bpfm-fullscreen .bpfm__label {
		font-size: clamp(13px, 1.6vh, 17px);
		padding: 7px 14px 7px 10px;
	}

	.bpfm-fullscreen .bpfm__dot {
		width: 11px;
		height: 11px;
	}
}

/* ---- header ---------------------------------------------------------- */

.bpfm__header {
	position: relative;
	z-index: 2;
	text-align: center;
	margin: 0 auto 28px;
	max-width: 720px;
}

.bpfm__eyebrow {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bpfm-accent);
}

.bpfm__title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--bpfm-title);
	text-wrap: balance;
}

.bpfm__subtitle {
	max-width: 520px;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bpfm-muted);
}

/* ---- map ------------------------------------------------------------- */

.bpfm__stage {
	position: relative;
	z-index: 1;
	width: min(100%, 640px);
	margin: 0 auto;
}

.bpfm__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bpfm__rest {
	fill: var(--bpfm-rest);
	stroke: var(--bpfm-rest-outline);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

.bpfm__zone {
	cursor: pointer;
	outline: none;
}

.bpfm__shape {
	fill: var(--bpfm-zone);
	stroke: var(--bpfm-outline);
	stroke-width: 1.6;
	stroke-linejoin: round;
	transition: filter .25s ease, transform .25s ease, fill .25s ease;
	transform-box: fill-box;
	transform-origin: center;
}

.bpfm__zone:hover .bpfm__shape,
.bpfm__zone:focus-visible .bpfm__shape,
.bpfm__zone[data-active] .bpfm__shape {
	filter: brightness(1.45) saturate(1.2);
	transform: translateY(-4px);
}

.bpfm__zone:focus-visible .bpfm__shape {
	stroke: #fff;
	stroke-width: 3;
}

/* ---- floating labels ------------------------------------------------- */

.bpfm__labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bpfm__label {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 9px;
	border-radius: 999px;
	background: var(--bpfm-label-bg);
	color: var(--bpfm-label-text) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
	pointer-events: auto;
	transition: transform .25s ease, box-shadow .25s ease;
}

.bpfm__label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--bpfm-label-bg);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
}

.bpfm__label:hover,
.bpfm__label[data-active] {
	transform: translate(-50%, calc(-50% - 4px));
	box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 2px var(--bpfm-zone);
}

.bpfm__num {
	display: none;
}

.bpfm__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bpfm-zone);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bpfm-zone) 35%, transparent);
	flex: none;
}

/* ---- list fallback (mobile / accessibility) -------------------------- */

.bpfm__list {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
}

.bpfm__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--bpfm-text) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background .2s ease, border-color .2s ease;
}

.bpfm__chip .bpfm__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bpfm-label-bg);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 0 0 2px var(--bpfm-accent);
}

.bpfm--light .bpfm__chip {
	background: rgba(28, 43, 74, .05);
	border-color: rgba(28, 43, 74, .14);
}

.bpfm__chip:hover,
.bpfm__chip[data-active] {
	background: color-mix(in srgb, var(--bpfm-zone) 28%, transparent);
	border-color: var(--bpfm-zone);
}

@media (min-width: 720px) {
	.bpfm__list {
		display: none;
	}

	/* Desktop: the zones themselves are keyboard-focusable, so the chip list
	   stays hidden unless a theme asks for it with the bpfm--show-list class. */
	.bpfm--show-list .bpfm__list {
		display: flex;
	}
}

@media (max-width: 719px) {
	.bpfm {
		padding: 24px 12px 20px;
		border-radius: 18px;
	}

	.bpfm__label {
		font-size: 11px;
		padding: 5px 10px 5px 7px;
		gap: 6px;
	}

	.bpfm__dot {
		width: 8px;
		height: 8px;
	}
}

/* Narrow screens: full names don't fit on the map, so each zone gets a
   numbered badge and the list below carries the names. */
@media (max-width: 479px) {
	.bpfm__label {
		padding: 0;
		border-radius: 50%;
		background: var(--bpfm-label-bg);
		box-shadow: 0 0 0 2px var(--bpfm-accent), 0 4px 10px rgba(0, 0, 0, .3);
		gap: 0;
	}

	.bpfm__label::after,
	.bpfm__label .bpfm__dot,
	.bpfm__label .bpfm__text {
		display: none;
	}

	.bpfm__label .bpfm__num {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		font-size: 13px;
		font-weight: 700;
		color: #fff;
	}

	.bpfm__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 16px;
	}

	.bpfm__chip {
		border-radius: 14px;
		padding: 8px 10px 8px 8px;
	}

	.bpfm__chip .bpfm__text {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/* On small screens the rings are as large as the map itself and read as a frame. */
@media (max-width: 719px) {
	.bpfm__pulse {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpfm__shape,
	.bpfm__label,
	.bpfm__chip {
		transition: none;
	}
}

/* ---- animations ------------------------------------------------------ */

/* Rings, pings and particles all derive from --bpfm-accent. */
.bpfm {
	--bpfm-ring: color-mix(in srgb, var(--bpfm-accent) 55%, transparent);
}

/* Stacking inside the stage: rings, then the map, then the labels. */
.bpfm__svg {
	position: relative;
	z-index: 1;
}

.bpfm__labels {
	z-index: 2;
}

.bpfm__dot {
	position: relative;
}

/* Particle field (canvas driven by bp-france-map.js). */
.bpfm__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.bpfm-fullscreen .bpfm__bg {
	position: fixed;
}

/* Sonar rings behind the map. */
.bpfm__pulse {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--bpfm-ring);
	transform: translate(-50%, -50%) scale(.6);
	opacity: 0;
	pointer-events: none;
}

.bpfm--anim .bpfm__pulse {
	animation: bpfm-pulse 9s ease-out infinite;
}

.bpfm--anim .bpfm__pulse--2 {
	animation-delay: 4.5s;
}

@keyframes bpfm-pulse {
	0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
	12% { opacity: .55; }
	70% { opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}

/* Entrance: the neutral mass first, then each zone, then its label. */
.bpfm--anim .bpfm__rest {
	animation: bpfm-fade 1.1s ease-out both;
}

.bpfm--anim .bpfm__zone {
	animation: bpfm-rise .9s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(.4s + var(--bpfm-i, 0) * .14s);
}

.bpfm--anim .bpfm__label {
	animation: bpfm-pop .55s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(1s + var(--bpfm-i, 0) * .14s);
}

@keyframes bpfm-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes bpfm-rise {
	from { opacity: 0; translate: 0 22px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes bpfm-pop {
	from { opacity: 0; scale: .8; }
	to { opacity: 1; scale: 1; }
}

/* Soft ping around each label dot. */
.bpfm--anim .bpfm__label .bpfm__dot::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--bpfm-accent);
	opacity: 0;
	animation: bpfm-ping 3.4s ease-out infinite;
	animation-delay: calc(1.8s + var(--bpfm-i, 0) * .6s);
}

@keyframes bpfm-ping {
	0% { transform: scale(.6); opacity: .9; }
	65% { transform: scale(2.3); opacity: 0; }
	100% { transform: scale(2.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bpfm--anim .bpfm__rest,
	.bpfm--anim .bpfm__zone,
	.bpfm--anim .bpfm__label,
	.bpfm--anim .bpfm__pulse,
	.bpfm--anim .bpfm__label .bpfm__dot::after {
		animation: none;
	}

	.bpfm__bg {
		display: none;
	}
}