/* site technologiques carte vs */
#sitetech-maps-ctn {
	min-width: 500px;
}
#sites-anchor {
	overflow-x: clip;
}
/* Container paramter ================================================================ */
.site-tech-card-ctn {
	scroll-behavior: smooth;
	display: flex;
	flex-wrap: nowrap;
	overflow-y: visible;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	cursor: grab;
	max-width: 100% !important;
}
.site-tech-card-ctn::-webkit-scrollbar {
	display: none;
}

/* pin parameter ===================================================================== */
.sitetech-map-pin {
	cursor: pointer;
	position: absolute;
	display: flex;
	translate: -50% -50%;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
	transition: scale 0.3s ease-out;
	& .sitetech-map-label {
		display: flex;
		flex-direction: column;
		gap: 0px;
		align-items: center;
	}
	& .sitetech-map-city {
		font-size: var(--text-s);
		line-height: 125%;
		font-weight: bold;
		transition: text-shadow 0.3s ease-out;
	}
	& .sitetech-map-name {
		font-size: var(--text-xs);
		line-height: 110%;
		text-align: center;
	}
}
.sitetech-map-pin svg {
	width: 2.925rem;
	height: 3.65625rem;
	fill: white;
	transition: fill 0.3s ease-out;
}
.sitetech-map-pin.active,
.has-hover .sitetech-map-pin:hover {
	scale: 1.05;
	& .sitetech-map-city {
		text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
	}
	& svg {
		fill: var(--primary-color);
		animation: bounce 0.8s ease-in-out infinite;
	}
}
@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}
/* positionning des pins */
#sitetech-map-pin-monthey {
	top: 52%;
	left: 9%;
}
#sitetech-map-pin-martigny {
	top: 68%;
	left: 16%;
}
#sitetech-map-pin-chable {
	top: 78%;
	left: 24%;
}
#sitetech-map-pin-conthey {
	top: 60%;
	left: 34%;
}
#sitetech-map-pin-sion {
	top: 56%;
	left: 43%;
}
#sitetech-map-pin-sierre {
	top: 50%;
	left: 53%;
}
#sitetech-map-pin-viege {
	top: 53%;
	left: 67%;
}

/* layout card ======================================================================= */
@property --colorsiteTechCard1 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --colorsiteTechCard2 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --siteTechCardPourcent1 {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: true;
}
@property --siteTechCardPourcent2 {
	syntax: "<percentage>";
	initial-value: 75%;
	inherits: true;
}

.site-tech-card {
	margin: 0px 0.5rem;
	position: relative;
	user-select: none;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	height: 29rem;
	min-width: 19.25rem;
	border-radius: 1rem;
	display: flex;
	padding: 1rem;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0.75rem;
	border: 1px solid var(--bg-color);
	transition: all ease-out 0.3s;
	& h5 {
		line-height: 150%;
	}
	& .bg-site-tech-card {
		left: 0px;
		top: 0px;
		border-radius: 1rem;
		position: absolute;
		height: 100%;
		width: 100%;
		--colorsiteTechCard1: rgba(23, 73, 222, 0.1);
		--colorsiteTechCard2: rgba(27, 6, 54, 0.8);
		--siteTechCardPourcent1: 0%;
		--siteTechCardPourcent2: 75%;
		transition: --colorsietTechCard1 0.6s ease-out,
			--colorsiteTechCard2 0.6s ease-out, --siteTechCardPourcent1 1s ease-out,
			--siteTechCardPourcent2 1s ease-out;
		background: linear-gradient(
			202deg,
			var(--colorsiteTechCard1) var(--siteTechCardPourcent1),
			var(--colorsiteTechCard2) var(--siteTechCardPourcent2)
		);
		z-index: 1;
		pointer-events: none;
	}
}
.site-tech-card.disabled {
	opacity: 0.4 !important;
}

.site-tech-card:has(a:hover),
.site-tech-card.active {
	border: 1px solid var(--primary-light-color);
	box-shadow: 0px 4px 45px 0px rgba(138, 38, 255, 0.3);
	& .bg-site-tech-card {
		--colorsiteTechCard1: rgba(52, 7, 110, 0);
		--colorsiteTechCard2: rgba(52, 7, 110, 0.88);
		--siteTechCardPourcent1: 10%;
		--siteTechCardPourcent2: 60%;
	}
	& .brxe-button {
		text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
	}
	& .brxe-button svg {
		rotate: 90deg;
	}
}
@media screen and (max-width: 768px) {
	.site-tech-card {
		scroll-snap-align: center;
	}
	.sitetech-map-name {
		display: none;
	}
	.sitetech-map-pin svg {
		width: 1.8rem;
		height: auto;
	}
	.sitetech-map-city {
		font-size: 10px;
	}
}