/* Carte Avez-vous lu — layered map + pins + tooltip */

.carte-avl {
	--avl-peach: #f4ddd2;
	--avl-blue: #1a3a6b;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 0 2rem;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--avl-blue);
	overflow: visible;
}

.elementor-widget-carte-avl,
.elementor-widget-carte-avl > .elementor-widget-container {
	overflow: visible;
}

.carte-avl__map {
	position: relative;
	display: grid;
	overflow: visible;
}

.carte-avl__scene,
.carte-avl__tooltips {
	grid-area: 1 / 1;
}

.carte-avl__scene {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	background: transparent;
	box-sizing: border-box;
}

.carte-avl__tooltips {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 80;
}

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

/* SceneLayer-style positioning (Anemoia, without parallax) */
.carte-avl__layer {
	position: absolute;
	left: var(--layer-center-left);
	top: var(--layer-center-top);
	transform: translate(-50%, -50%);
	width: var(--layer-width);
	height: var(--layer-height);
	max-width: none;
	max-height: none;
	object-fit: cover;
	opacity: var(--layer-opacity, 1);
	mix-blend-mode: var(--layer-blend, normal);
	pointer-events: none;
	user-select: none;
}

.carte-avl__missing {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 2rem;
	text-align: center;
}

/* —— Éditions filter (top right) —— */
.carte-avl__editions {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	border: 2px dashed var(--avl-blue);
	padding: 0.6rem 0.75rem;
	min-width: 9.5rem;
	box-shadow: 2px 2px 0 rgba(26, 58, 107, 0.15);
}

.carte-avl__editions-title {
	margin: 0 0 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.carte-avl__editions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.carte-avl__filter {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	padding: 0.2rem 0.15rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 0.75rem;
	color: var(--avl-blue);
	text-align: left;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.carte-avl__filter.is-active {
	opacity: 1;
}

@media (hover: hover) {
	.carte-avl__filter:hover {
		opacity: 1;
	}
}

.carte-avl__swatch {
	display: inline-block;
	width: 1rem;
	height: 0.85rem;
	border: 1px solid var(--avl-blue);
	flex-shrink: 0;
}

.carte-avl__swatch--all {
	background: #fff;
	border-style: dashed;
}

/* —— Event routes (dashed journey between partner events of a cohort) —— */
.carte-avl__routes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Matches the dashed paths in carte_SOURCES_final.psd (values in 1920px canvas units) */
.carte-avl__route path {
	fill: none;
	stroke: #706262;
	stroke-width: 4;
	stroke-linecap: butt;
	stroke-linejoin: round;
	stroke-dasharray: 24 6;
}

/* The map scales down with the screen, so the line gets thin on phones: thicker line, longer dashes. */
@media (max-width: 768px) {
	.carte-avl__route path {
		stroke-width: 10;
		stroke-dasharray: 50 14;
	}

	/* Mask must stay wider than the visible line */
	.carte-avl__routes .carte-avl__route-reveal {
		stroke-width: 28;
	}
}

.carte-avl__route.is-filtered-out {
	display: none;
}

/* Solid stroke inside the route mask; drawing it uncovers the dotted line (see setupReveal in JS). */
.carte-avl__route-reveal {
	fill: none;
	stroke: #fff;
	stroke-width: 14;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}

/* —— Pins —— */
.carte-avl__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.carte-avl__pin {
	position: absolute;
	transform: translate(-50%, -100%);
	pointer-events: auto;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.25));
	transition: transform 0.15s ease;
	z-index: 2;
}

.carte-avl__pin[aria-expanded="true"] {
	transform: translate(-50%, -100%) scale(1.12);
	z-index: 5;
}

.carte-avl__pin:active {
	transform: translate(-50%, -100%) scale(0.94);
}

/* Flags stand on the foot of their pole (x 2.5 of 31 in the icon), not on their centre. */
.carte-avl__pin--flag {
	transform: translate(-8%, -100%);
	transform-origin: 8% 100%;
}

.carte-avl__pin--flag[aria-expanded="true"] {
	transform: translate(-8%, -100%) scale(1.12);
}

.carte-avl__pin--flag:active {
	transform: translate(-8%, -100%) scale(0.94);
}

/* Without this, a tap leaves the hover scale stuck on touch screens. */
@media (hover: hover) {
	.carte-avl__pin:hover {
		transform: translate(-50%, -100%) scale(1.12);
		z-index: 5;
	}

	.carte-avl__pin--flag:hover {
		transform: translate(-8%, -100%) scale(1.12);
	}
}

/* Larger invisible touch target (~44px) around the icon. */
@media (pointer: coarse) {
	.carte-avl__pin::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 44px;
		height: 48px;
		transform: translate(-50%, -50%);
	}
}

.carte-avl__pin.is-filtered-out {
	display: none;
}

.carte-avl__pin-icon svg,
.carte-avl__flag-icon svg,
.carte-avl__flag-icon img {
	display: block;
}

.carte-avl__flag-icon img {
	width: 26px;
	height: 42px;
	object-fit: contain;
}

/* —— Tooltip —— */
.carte-avl__tooltip {
	position: absolute;
	left: 0;
	top: 0;
	transform: none;
	z-index: 60;
	width: min(520px, 78vw);
	max-height: min(70vh, 520px);
	overflow: auto;
	background: #fff;
	border: 2px dashed var(--avl-blue);
	padding: 2.5rem;
	box-shadow: 3px 3px 0 rgba(26, 58, 107, 0.12);
	pointer-events: auto;
	text-align: left;
}

.carte-avl__tooltip[hidden] {
	display: none !important;
}

.carte-avl__tooltip-close {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	border: 0;
	background: transparent;
	color: #c0392b;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.15rem 0.35rem;
}

.carte-avl__tooltip-title {
	margin: 0 0 0.5rem;
	padding-right: 1.5rem;
	font-size: 1.05rem;
	color: var(--avl-blue);
	font-weight: 700;
}

.carte-avl__tooltip-body {
	font-size: 0.85rem;
	line-height: 1.45;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
}

.carte-avl__tooltip-body p:last-child {
	margin-bottom: 0;
}

.carte-avl__tooltip-body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0.5rem 0;
}

.carte-avl__tooltip-body .wp-block-embed,
.carte-avl__tooltip-body .wp-video,
.carte-avl__tooltip-body .embed-container,
.carte-avl__tooltip-body iframe {
	max-width: 100%;
}

.carte-avl__tooltip-body iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 160px;
	border: 0;
}

.carte-avl__tooltip-body .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.carte-avl__tooltip-body .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.carte-avl__tooltip-link-wrap {
	margin: 0.75rem 0 0;
}

.carte-avl__tooltip-link {
	display: inline-block;
	color: var(--avl-blue);
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.carte-avl__tooltip-link:hover,
.carte-avl__tooltip-link:focus {
	color: #0d2244;
}

.carte-avl__legend-pin {
	display: inline-flex;
	line-height: 0;
}

/* —— Bottom legend —— */
.carte-avl__legend {
	margin-top: 1rem;
	padding: 0 0.5rem;
}

.carte-avl__legend-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
}

.carte-avl__legend-list li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.carte-avl__legend-pin svg,
.carte-avl__legend-flag svg,
.carte-avl__legend-flag img {
	display: block;
}

.carte-avl__legend-flag img {
	width: 15px;
	height: 24px;
	object-fit: contain;
}

/* —— Idle animations (subtle) —— */
@media (prefers-reduced-motion: no-preference) {
	.carte-avl__layer--canards,
	.carte-avl__layer--bateau,
	.carte-avl__layer--baleine {
		animation: carte-avl-float 4.5s ease-in-out infinite;
	}

	/* Staggered swell: each wave drifts + breathes on its own rhythm */
	[class*="carte-avl__layer--vague-"] {
		animation: carte-avl-wave 3.6s ease-in-out infinite;
		will-change: transform, opacity;
	}

	.carte-avl__layer--vague-1 {
		animation-delay: 0s;
		animation-duration: 3.2s;
	}
	.carte-avl__layer--vague-2 {
		animation-delay: 0.35s;
		animation-duration: 4.1s;
	}
	.carte-avl__layer--vague-3 {
		animation-delay: 0.7s;
		animation-duration: 3.5s;
	}
	.carte-avl__layer--vague-4 {
		animation-delay: 1.05s;
		animation-duration: 4.4s;
	}
	.carte-avl__layer--vague-5 {
		animation-delay: 0.2s;
		animation-duration: 3.8s;
	}
	.carte-avl__layer--vague-6 {
		animation-delay: 1.4s;
		animation-duration: 3.3s;
	}
	.carte-avl__layer--vague-7 {
		animation-delay: 0.55s;
		animation-duration: 4.2s;
	}
	.carte-avl__layer--vague-8 {
		animation-delay: 1.75s;
		animation-duration: 3.7s;
	}
	.carte-avl__layer--vague-9 {
		animation-delay: 0.9s;
		animation-duration: 4s;
	}
	.carte-avl__layer--vague-10 {
		animation-delay: 1.2s;
		animation-duration: 3.4s;
	}
	.carte-avl__layer--vague-11 {
		animation-delay: 0.15s;
		animation-duration: 4.5s;
	}
	.carte-avl__layer--vague-12 {
		animation-delay: 1.55s;
		animation-duration: 3.9s;
	}
}

@keyframes carte-avl-float {
	0%,
	100% {
		transform: translate(-50%, -50%);
	}
	50% {
		transform: translate(-50%, calc(-50% - 4px));
	}
}

@keyframes carte-avl-wave {
	0%,
	100% {
		transform: translate(-50%, -50%) translate(0, 0) scaleX(1) rotate(0deg);
		opacity: 0.72;
	}
	30% {
		transform: translate(-50%, -50%) translate(2px, -2px) scaleX(1.08) rotate(-2deg);
		opacity: 1;
	}
	55% {
		transform: translate(-50%, -50%) translate(-1px, -4px) scaleX(0.96) rotate(1.5deg);
		opacity: 0.88;
	}
	80% {
		transform: translate(-50%, -50%) translate(1px, -1px) scaleX(1.04) rotate(-1deg);
		opacity: 1;
	}
}

/* —— Mobile: filter chips above the map, tooltip as a bottom sheet —— */
html.carte-avl-sheet-open,
html.carte-avl-sheet-open body {
	overflow: hidden;
}

@media (max-width: 768px) {
	.carte-avl__map {
		grid-template-rows: auto auto;
	}

	.carte-avl__scene,
	.carte-avl__tooltips {
		grid-area: 2 / 1;
	}

	.carte-avl__editions {
		position: static;
		grid-area: 1 / 1;
		min-width: 0;
		margin: 0 0 0.75rem;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.carte-avl__editions-title {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.carte-avl__editions-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.carte-avl__editions-list li {
		flex: 0 0 auto;
	}

	.carte-avl__filter {
		width: auto;
		min-height: 40px;
		padding: 0.4rem 0.9rem;
		border: 1.5px solid var(--avl-blue);
		border-radius: 999px;
		background: #fff;
		font-size: 0.85rem;
		white-space: nowrap;
		opacity: 1;
	}

	.carte-avl__filter.is-active {
		background: var(--avl-blue);
		color: #fff;
	}

	.carte-avl__swatch {
		width: 0.85rem;
		height: 0.85rem;
		border-radius: 50%;
	}

	.carte-avl__filter.is-active .carte-avl__swatch {
		border-color: #fff;
	}

	/* Bottom sheet */
	.carte-avl__tooltip {
		position: fixed;
		left: 0 !important;
		right: 0;
		top: auto !important;
		bottom: 0;
		z-index: 10000;
		width: 100%;
		max-height: 85vh;
		max-height: 85dvh;
		padding: 0 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(26, 58, 107, 0.25);
		overscroll-behavior: contain;
		transform: none;
		transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	@starting-style {
		.carte-avl__tooltip {
			transform: translateY(100%);
		}
	}

	.carte-avl__tooltip.is-dragging {
		transition: none;
	}

	.carte-avl__tooltip-head {
		position: sticky;
		top: 0;
		z-index: 1;
		margin: 0 -1.25rem 0.75rem;
		padding: 1.4rem 3.75rem 0.75rem 1.25rem;
		background: #fff;
		border-bottom: 1px solid rgba(26, 58, 107, 0.12);
		touch-action: none;
	}

	.carte-avl__tooltip-head::before {
		content: "";
		position: absolute;
		top: 0.55rem;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: rgba(26, 58, 107, 0.25);
	}

	.carte-avl__tooltip-close {
		top: 0.6rem;
		right: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 1.75rem;
	}

	.carte-avl__tooltip-title {
		margin: 0;
		padding-right: 0;
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.carte-avl__tooltip-body {
		font-size: 1rem;
		line-height: 1.6;
	}

	/* Color set on the wrapper: host pages may force `a { color: inherit }`. */
	.carte-avl__tooltip-link-wrap {
		margin-top: 1.25rem;
		color: #fff;
	}

	.carte-avl__tooltip-link {
		display: block;
		padding: 0.8rem 1rem;
		border-radius: 999px;
		background: var(--avl-blue);
		color: #fff;
		font-size: 1rem;
		text-align: center;
		text-decoration: none;
	}

	/* .carte-avl__tooltips is a stacking context: raise it above the backdrop. */
	.carte-avl.is-tooltip-open .carte-avl__tooltips {
		z-index: 10000;
	}

	.carte-avl.is-tooltip-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba(26, 58, 107, 0.45);
		transition: opacity 0.3s ease;
	}

	@starting-style {
		.carte-avl.is-tooltip-open::after {
			opacity: 0;
		}
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.carte-avl__tooltip,
	.carte-avl.is-tooltip-open::after {
		transition: none;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}