/*==========================================================================*/
/*========================== TRANSPORTER PLATFORM ==========================*/
/*==========================================================================*/

	.transporter-image-row {
		position:absolute;
		left:4%;
		right:4%;
		top:74px;
		bottom:12px;
		display:flex;
		flex-wrap:nowrap;
		align-items:center;
		justify-content:center;
		gap:10px;
		overflow:hidden;
		z-index:4; }

			.transporter-image-row .destination-item {
				position:relative;
				flex:1 1 0;
				min-width:0;
				height:100%;
				display:flex;
				align-items:center;
				justify-content:center; }

			.transporter-image-row .destination-item > a {
				width:100%;
				height:100%;
				display:flex;
				align-items:center;
				justify-content:center; }
			
			/* N'affiche que 7 images au départ */
			.transporter-image-row .destination-item:nth-child(n+8) { display:none; }
			/* Affiche les autres dans la galerie */
			main.websites-expanded .transporter-image-row .destination-item:nth-child(n+8) { display:flex; }

			.transporter-image-row img {
				display:block;
				width:100%;
				height:100%;
				min-width:0;
				object-fit:contain;
				cursor: pointer;
				transition: transform 0.3s ease, filter 0.3s ease; }

					.transporter-image-row img:hover {
						transform: scale(1.10);
						filter: brightness(1.4) drop-shadow(0 0 8px rgba(120, 220, 255, 0.8)); }


	/*========== SURVOL ==========*/

	.destination-survol {
		--survol-x:-50%;
		position:absolute;
		left:50%;
		top:50%;
		padding:10px 5px;
		background:#000;
		color:#fff;
		opacity:0;
		z-index:7;
		pointer-events:none;
		font-family:"Courier New", monospace;
		font-size:12px;
		font-weight:bold;
			transform:translate(var(--survol-x), -50%) scale(0);
			transform-origin: left center;
		white-space:nowrap;
		text-align:center; }
		
		/* Pour condenser un peu le texte */
		.destination-survol span {
			display:inline-block;
			transform:scaleX(0.8); }

			@media (hover: hover) and (pointer: fine) {
				.destination-item:hover .destination-survol {
					animation:transporterCalloutZoom 1.5s ease .30s forwards; } }
			.destination-item.destination-armed .destination-survol {
				animation:transporterCalloutZoom 1.5s ease .30s forwards; }

			/* Bulle centrée sur l'image, mais maintenue dans la zone aux extrémités */
			.transporter-image-row .destination-item:first-child .destination-survol {
				--survol-x:0%;
				left:0; }

			.transporter-image-row .destination-item:nth-child(7) .destination-survol {
				--survol-x:0%;
				left:auto;
				right:0;
				transform-origin:right center; }

			@keyframes transporterCalloutZoom {
				from { transform:translate(var(--survol-x), -50%) scale(0); opacity:0; }
				to   { transform:translate(var(--survol-x), -50%) scale(1.5); opacity:1; } }

			.destination-action {
				display:flex;
				align-items:center;
				justify-content:center;
				gap:7px;
				margin-top:7px;
				color:var(--vert-fluo);
				font-size:13px; }

			.destination-pointer {
				font-size:20px;
				line-height:1; }

			.destination-pointer-touch { display:none; }
	
	/*-- L'icône du titre clignote/s'illumine en même temps que les images sont survolées --*/
	.transporter:has(.destination-item > a:hover) #transporter-websites-toggle {
			animation:transporterTitleBlink .45s steps(1) infinite; }
		@keyframes transporterTitleBlink {
			0%, 49% {
				opacity:1;
				transform:scale(1.10);
				filter:brightness(1.4) drop-shadow(0 0 8px rgba(120, 220, 255, 0.8)); }
			50%, 100% {
				opacity:.15;
				transform:scale(1);
				filter:none; } }
			
			
	/*========== LIEN VERS GALERIE (autres destinations) ==========*/
	/*== (seulement sur mobiles) ==*/
	
	@media (max-width: 700px) {
	
	.mobile-title-link {
		display:inline-block;
		margin-left:auto;
		color:var(--orange);
		font-family:"Courier New",monospace;
		font-size:14px;
		font-weight:normal;
		text-decoration:none;
		text-transform:none;
		white-space:nowrap; } }
		

	/* -------------- Galerie des destinations -------------- */
	
	.transporter-websites-prompt {
		display:none;
		margin-left:auto;
		margin-right:11px;
		color:var(--orange);		
		font-weight:bold;
		letter-spacing: -1px;
		font-family:"Courier New", monospace; font-size:20px;
		font-weight:normal;
		line-height:1.5;
		text-transform:none;
		white-space:nowrap; }
		
			.transporter-websites-prompt.visible { display:block; }
	
			.transporter-websites-prompt a {
				color:inherit;
				text-decoration:none;
				font-weight:normal; }

					.transporter-websites-prompt:hover a { font-weight: bold; }			
					.transporter-websites-prompt.ready a { animation:voiceFailedBlink .45s steps(1) infinite; }
					.transporter-websites-prompt.ready .type-cursor { display:none; }

	.transporter-websites-close {
		display:none;
		margin-left:auto;
		padding:0 8px;
		border:0;
		background:none;
		color:var(--orange);
		font-size:28px;
		line-height:1;
		cursor:pointer; }

	main.websites-expanded .skill,
	main.websites-expanded .biometric,
	main.websites-expanded .activity { display:none; }
	
	main.websites-expanded .transporter { grid-column:4; grid-row:1 / 7; z-index:20; }
	main.websites-expanded .transporter-websites-prompt { display:none; }
	main.websites-expanded .transporter-websites-close { display:block; }
	
			main.websites-expanded .transporter-image-row {
				flex-wrap:wrap;
				align-content:flex-start;
				align-items:flex-start;
				justify-content:flex-start;
				overflow-y:auto; }
			
			main.websites-expanded .transporter-image-row .destination-item {
				display:flex;
				flex:0 0 calc((100% - 30px) / 4);
				min-width:0;
				height:150px; }

			main.websites-expanded .transporter-image-row .destination-item > a {
				width:100%;
				height:100%;
				display:flex;
				align-items:center;
				justify-content:center; }
				
			main.websites-expanded .transporter-image-row img {
				width:auto;
				max-width:100%;
				height:100%; }

	main.websites-expanded .destination-survol {
		--survol-x:-50%;
		left:50%;
		right:auto;
		top:50%; }

	/* Galerie sur 4 colonnes : maintient les bulles des colonnes extrêmes dans la zone */
	main.websites-expanded .destination-item:nth-child(4n+1) .destination-survol {
		--survol-x:0%;
		left:0; }
	
	main.websites-expanded .destination-item:nth-child(4n) .destination-survol {
		--survol-x:0%;
		left:auto;
		right:0;
		transform-origin:right center; }
	
	.destination-energize {
		display:inline-flex;
		align-items:center;
		gap:8px;
		padding:3px 12px 3px 30px;
		position:relative;
		background:var(--vert-fluo);
		color:#000;
		text-decoration:none;
		border-radius:4px;
		line-height:1;
		perspective:100px;
		pointer-events:none; }

	.destination-energize img {
		position:absolute;
		left:5px;
		top:50%;
		width:24px;
		height:24px;
		transform:translateY(-50%);
		object-fit:contain;
		filter:brightness(.25);
		animation:energizeIcon 1.8s linear infinite; }

			@keyframes energizeIcon {
				0% { transform:translateY(-50%) rotateY(0deg);
					 filter:brightness(.25) drop-shadow(0 0 0 rgba(255,255,255,0)); }
				50% { transform:translateY(-50%) rotateY(180deg);
					  filter:brightness(1.2) drop-shadow(0 0 6px rgba(255,255,255,.9)); }
				100% { transform:translateY(-50%) rotateY(360deg);
					   filter:brightness(.25) drop-shadow(0 0 0 rgba(255,255,255,0)); } }

			.destination-item.destination-armed .destination-energize { pointer-events:auto; }