/* Constellation Elementor — rendu frontend */

.cst-root {
	width: 100%;
}

.cst-stage {
	--cst-ratio: 1.21;
	--cst-spread: 1;
	--cst-size-scale: 1;
	--cst-bg: #256a9b;
	--cst-border: rgba(0, 0, 0, 0);
	--cst-border-w: 0px;
	--cst-name: #ffffff;
	--cst-desc: #c3d0db;
	--cst-cat: #e4a33c;
	--cst-name-ratio: 0.088;
	--cst-desc-ratio: 0.063;
	--cst-cat-ratio: 0.058;
	--cst-name-min: 12px;
	--cst-desc-min: 11px;
	--cst-cat-min: 11px;
	--cst-pad: 13%;
	--cst-gap: 5px;
	--cst-hover: 1.06;
	--cst-float-amp: 7px;
	--cst-bubble-opacity: 1;
	--cst-text-scale: 1;
	--cst-start-scale: 0.7;
	--cst-dur: 850ms;
	--cst-delay-step: 110ms;

	position: relative;
	width: 100%;
	aspect-ratio: var(--cst-ratio);
	container-type: inline-size;
}

.cst-item {
	--cst-local-text: 1;
	position: absolute;
	left: calc(50% + (var(--cst-x) - 50%) * var(--cst-spread));
	top: calc(50% + (var(--cst-y) - 50%) * var(--cst-spread));
	width: calc(var(--cst-d) * 1cqw * var(--cst-size-scale));
	height: calc(var(--cst-d) * 1cqw * var(--cst-size-scale));
	transform: translate(-50%, -50%);
}

.cst-item--main {
	z-index: 3;
}

.cst-item:hover {
	z-index: 9;
}

.cst-node {
	width: 100%;
	height: 100%;
}

.cst-stage--float .cst-node {
	animation: cst-float var(--cst-float-dur, 8s) ease-in-out infinite;
	animation-delay: var(--cst-float-delay, 0s);
}

@keyframes cst-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(0, calc(var(--cst-float-amp) * -1), 0);
	}
}

.cst-reveal {
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(var(--cst-start-scale));
	transition: opacity var(--cst-dur) cubic-bezier(0.16, 1, 0.3, 1),
		transform var(--cst-dur) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--cst-i) * var(--cst-delay-step));
}

.cst-stage.is-visible .cst-reveal,
.cst-stage.no-reveal .cst-reveal {
	opacity: 1;
	transform: scale(1);
}

.cst-bubble {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cst-gap);
	width: 100%;
	height: 100%;
	padding: var(--cst-pad);
	border: var(--cst-border-w) solid var(--cst-border);
	border-radius: 50%;
	background-color: var(--cst-bg);
	opacity: var(--cst-bubble-opacity);
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.cst-item:hover .cst-bubble {
	transform: scale(var(--cst-hover));
}

a.cst-bubble:focus-visible {
	outline: 2px solid var(--cst-cat);
	outline-offset: 4px;
}

.cst-name,
.cst-desc,
.cst-cat {
	display: block;
	max-width: 100%;
	line-height: 1.28;
	overflow-wrap: break-word;
	hyphens: auto;
}

.cst-name {
	color: var(--cst-name);
	font-weight: 500;
	font-size: max(
		var(--cst-name-min),
		calc(var(--cst-d) * 1cqw * var(--cst-size-scale) * var(--cst-name-ratio) * var(--cst-text-scale) * var(--cst-local-text))
	);
}

.cst-desc {
	color: var(--cst-desc);
	font-size: max(
		var(--cst-desc-min),
		calc(var(--cst-d) * 1cqw * var(--cst-size-scale) * var(--cst-desc-ratio) * var(--cst-text-scale) * var(--cst-local-text))
	);
}

.cst-cat {
	color: var(--cst-cat);
	font-weight: 500;
	font-size: max(
		var(--cst-cat-min),
		calc(var(--cst-d) * 1cqw * var(--cst-size-scale) * var(--cst-cat-ratio) * var(--cst-text-scale) * var(--cst-local-text))
	);
}

@media (prefers-reduced-motion: reduce) {
	.cst-stage .cst-node {
		animation: none !important;
	}
	.cst-reveal,
	.cst-bubble {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}