/*================================================================*/
/*================== TRICORDER - BIOMETRIC DATA ==================*/
/*================================================================*/

.biometric { grid-area: biometric; }

.biometric-contenu {
	position: absolute;
	top: 68px;
	left: 2.5%;
	width: 95%;
	height: calc(100% - 76px);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	z-index: 4; }

		.biometric-item {
			min-width: 0;
			min-height: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 8px;
			border-right: 1px solid rgba(150, 160, 165, 0.25); }

		.biometric-item:last-child { border-right: none; }

		.biometric-titre {
			width: 100%;
			margin-top: 6px;
			margin-bottom: 6px;
			color: var(--bleu-ciel);
			font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
			font-size: 10px;
			font-weight: normal;
			text-align: center;
			text-transform: uppercase;
			line-height: 1; }

		.biometric-item img {
			display: block;
			margin-bottom: 10px;
			width: 100%;
			height: calc(100% - 30px);
			object-fit: contain; }


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

.fingerprint, .retinal, .DNA, .voiceprint, .mutation {
	cursor: pointer;
	transition: transform 0.3s ease, filter 0.3s ease; }

.fingerprint:hover, .retinal:hover, .DNA:hover, .voiceprint:hover, .mutation:hover,
.biometric.tricorder-hover-active .fingerprint,
.biometric.tricorder-hover-active .retinal,
.biometric.tricorder-hover-active .DNA,
.biometric.tricorder-hover-active .voiceprint,
.biometric.tricorder-hover-active .mutation {
	transform: scale(1.10);
	filter: brightness(1.4) drop-shadow(0 0 8px rgba(120, 220, 255, 0.8)); }


/*=================== SCANS BIOMETRIQUES =========================*/

	/* Fingerprint, DNA et Mutation utilisent le même panneau et la même animation. */
	.biometric-contenu.standard-scan-active .biometric-item,
	.biometric-contenu.retinal-active .biometric-item { display: none; }

	.standard-scan-result, .retinal-result {
		display: none;
		position: absolute;
		inset: 0;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.35); }

	.biometric-contenu.standard-scan-active .standard-scan-result,
	.biometric-contenu.retinal-active .retinal-result {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; }

	/*============= SCAN VISUEL COMMUN =============*/
	.standard-scan-line {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 3px;
		opacity: 0;
		background: var(--bleu-ciel);
		box-shadow:
			0 0 7px var(--bleu-ciel),
			0 0 18px rgba(120, 220, 255, 0.8);
		z-index: 4; }

	.standard-scan-result.scan-start .standard-scan-line {
		opacity: 1;
		animation: standardBiometricScan 1.6s linear 2 alternate; }

			@keyframes standardBiometricScan {
				from { top: 0; }
				to { top: calc(100% - 3px); } }

	/*============= RÉSULTAT COMMUN =============*/
	.standard-scan-status, .retinal-status {
		display: none;
		color: var(--vert-fluo);
		font-family: "Courier New", monospace;
		font-size: 32px;
		font-weight: bold;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;
		z-index: 5; }

	.standard-scan-result.show-match .standard-scan-status,
	.retinal-result.show-retinal-status .retinal-status {
		display: block;
		animation: matchBlink 0.55s steps(1) infinite; }

			@keyframes matchBlink {
				0%, 45% { opacity: 1; }
				46%, 100% { opacity: 0.15; } }

	/*============== TEXTE MACHINE À ÉCRIRE =============*/
	.standard-scan-text, .retinal-text {
		display: none;
		width: 85%;
		margin-top: 0;
		color: var(--orange);
		font-family: "Courier New", monospace;
		font-size: 18px;
		line-height: 1.3;
		text-align: left;
		z-index: 5; }

	.retinal-text, .retinal-status {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 85%;
		margin: 0;
		transform: translate(-50%, -50%); }

	.standard-scan-result.show-text .standard-scan-text,
	.retinal-result.show-retinal-text .retinal-text { display: block; }

	.type-cursor, .retinal-cursor {
		color: var(--bleu-ciel);
		animation: cursorBlink 0.7s steps(1) infinite; }

			@keyframes cursorBlink {
				0%, 50% { opacity: 1; }
				51%, 100% { opacity: 0; } }



	/*============ BOUTONS D'INTERRUPTION & FERMETURE DES SCANS ===========*/
	.biometric-titlebar { position: absolute; }

	.biometric-scan-interrupt {
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 8;
		padding: 7px 18px;
		border: 1px solid var(--bleu-ciel);
		background: rgba(5, 22, 34, .94);
		color: var(--bleu-ciel);
		font: bold 13px "Courier New", monospace;
		letter-spacing: 1px;
		text-transform: uppercase;
		cursor: pointer;
		box-shadow: 0 0 7px rgba(120, 220, 255, .8), 0 0 15px rgba(120, 220, 255, .55), inset 0 0 8px rgba(120, 220, 255, .18); }

			.biometric-scan-interrupt.visible { display: block; }

	.biometric-scan-interrupt.scan-close {
		width: 30px;
		height: 30px;
		min-width: 30px;
		min-height: 30px;
		left: auto;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		padding: 0;
		border: 2px solid #ffb0b0;
		border-radius: 50%;
		background: #c90000;
		color: #fff;
		font: bold 21px/1 Arial, sans-serif;
		letter-spacing: 0;
		text-transform: none;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 7px rgba(255, 30, 30, 1), 0 0 16px rgba(255, 0, 0, .95), 0 0 26px rgba(255, 0, 0, .6);
		animation: biometricCloseBlink .7s steps(1) infinite; }

			.biometric-scan-interrupt.scan-close.visible { display: flex; }

			@keyframes biometricCloseBlink {
				0%, 49% { opacity: 1; box-shadow: 0 0 8px rgba(255, 50, 50, 1), 0 0 18px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, .7); }
				50%, 100% { opacity: .48; box-shadow: 0 0 3px rgba(255, 50, 50, .7), 0 0 8px rgba(255, 0, 0, .6); } }

	.process-interrupted-message {
		display: none;
		color: var(--vert-fluo);
		font-weight: bold;
		animation: biometricProcessInterrupted .48s steps(1) infinite; }

			.process-interrupted-message.visible { display: inline; }

			@keyframes biometricProcessInterrupted {
				0%, 49% { opacity: 1; }
				50%, 100% { opacity: .18; } }


	/*========================= RETINAL SCAN =========================*/

		/*============= MIRE CENTRALE =============*/
		.retinal-target {
			position: relative;
			width: 150px;
			height: 150px;
			opacity: 0;
			transition: opacity .25s ease; }

				.retinal-result.target-active .retinal-target {
					opacity: 1;
					animation: retinalPulse 0.8s ease-in-out infinite alternate; }

		.retinal-circle {
			position: absolute;
			top: 50%;
			left: 50%;
			border: 1px solid var(--bleu-ciel);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			box-shadow:
				0 0 6px rgba(120, 220, 255, 0.6),
				inset 0 0 6px rgba(120, 220, 255, 0.4); }

		.retinal-circle-1 { width: 145px; height: 145px; }
		.retinal-circle-2 { width: 100px; height: 100px; }
		.retinal-circle-3 { width: 48px; height: 48px; }

		/*========== Aspect pupille au centre ==========*/
		.retinal-pupil {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 32px;
			height: 32px;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			z-index: 2;
			background: radial-gradient(circle at center, rgba(0, 0, 0, .95) 0 25%, rgba(20, 80, 95, .85) 28%, rgba(117, 215, 240, .35) 45%, rgba(10, 45, 55, .65) 62%, transparent 70%);
			box-shadow: 0 0 5px rgba(117, 215, 240, .65), 0 0 12px rgba(117, 215, 240, .25), inset 0 0 7px rgba(0, 0, 0, .9); }

				/* Texture irrégulière rappelant un iris */
				.retinal-pupil::before {
					content: "";
					position: absolute;
					inset: -8px;
					border-radius: 50%;
					background: repeating-conic-gradient(from 4deg, rgba(117, 215, 240, .30) 0deg 2deg, transparent 2deg 9deg);
					opacity: .55; }


		.retinal-cross {
			position: absolute;
			top: 50%;
			left: 50%;
			background: rgba(120, 220, 255, 0.65); }

				.retinal-cross-h { width: 170px; height: 1px; transform: translate(-50%, -50%); }
				.retinal-cross-v { width: 1px; height: 170px; transform: translate(-50%, -50%); }

		.retinal-rotor {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 125px;
			height: 125px;
			border-radius: 50%;
			border-top: 3px solid var(--orange);
			border-right: 1px solid transparent;
			border-bottom: 3px solid var(--bleu-ciel);
			border-left: 1px solid transparent;
			transform: translate(-50%, -50%);
			animation: retinalRotate 1.2s linear infinite; }

				@keyframes retinalRotate {
					from { transform: translate(-50%, -50%) rotate(0deg); }
					to { transform: translate(-50%, -50%) rotate(360deg); } }

				@keyframes retinalPulse {
					from { transform: scale(0.96); filter: brightness(0.9); }
					to { transform: scale(1.04); filter: brightness(1.4); } }



	/*=========================== DNA STATUS =========================*/

		.dna-result.target-active .dna-visual {
			opacity: 1;
			animation: dnaVisualPulse .8s ease-in-out infinite alternate; }

		.dna-helix {
			width: 148px;
			height: 148px;
			overflow: visible;
			filter: drop-shadow(0 0 5px rgba(117,215,240,.72)) drop-shadow(0 0 12px rgba(117,215,240,.25)); }

		.dna-helix-2 { animation-delay: -.55s; transform: scaleX(-1); }

		.dna-strand {
			fill: none;
			stroke-linecap: round;
			stroke-width: 3.2;
			stroke-dasharray: 18 8;
			animation: dnaFlow 1.2s linear infinite; }

		.dna-strand-a { stroke: var(--bleu-ciel); }
		.dna-strand-b {
			stroke: var(--orange);
			animation-direction: reverse; }

		.dna-core-line {
			stroke: rgba(201,225,245,.52);
			stroke-width: 1;
			stroke-dasharray: 2 4;
			animation: dnaCoreShift .8s linear infinite; }

		.dna-core-node {
			fill: url(#dnaTexture1);
			stroke: rgba(117,215,240,.85);
			stroke-width: 1;
			transform-box: fill-box;
			transform-origin: center;
			animation: dnaNodePulse .65s ease-in-out infinite alternate; }

		.dna-helix-2 .dna-core-node { fill: url(#dnaTexture2); }

				@keyframes dnaFlow {
					from { stroke-dashoffset: 0; }
					to { stroke-dashoffset: -52; } }

				@keyframes dnaCoreShift {
					from { stroke-dashoffset: 0; opacity: .35; }
					to { stroke-dashoffset: -12; opacity: .9; } }

				@keyframes dnaNodePulse {
					from { transform: scale(.82); filter: brightness(.8); }
					to { transform: scale(1.18); filter: brightness(1.6); } }

				@keyframes dnaVisualPulse {
					from { transform: scale(.97); filter: brightness(.9); }
					to { transform: scale(1.035); filter: brightness(1.35); } }


		.dna-result.iris-close .retinal-iris { animation: irisClose 1.2s ease-in forwards; }


	/*================== MUTATION MARKERS (tracé ECG) ==================*/

	.standard-scan-ecg {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 4;
		pointer-events: none; }

			.standard-scan-result.mutation-scan.scan-start .standard-scan-line { display: none; }
			.standard-scan-result.mutation-scan.scan-start .standard-scan-ecg { display: block; }

	.standard-scan-ecg polyline {
		fill: none;
		stroke: var(--bleu-ciel);
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
		filter: drop-shadow(0 0 4px var(--bleu-ciel)) drop-shadow(0 0 9px rgba(120, 220, 255, .8));
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
		animation: mutationEcgDraw 3.2s linear forwards; }

			@keyframes mutationEcgDraw { to { stroke-dashoffset: 0; } }


	/*========================== VOICE PRINT ==========================*/

		.voiceprint-wrap {
			position: relative;
			width: 100%;
			height: calc(100% - 22px);
			overflow: hidden;
			cursor: pointer; }

		.voiceprint-wrap .voiceprint {
			width: 100%;
			height: 100%;
			object-fit: contain; }

		/*--- Effet lumineux pendant lecture audio ---*/
		.voiceprint-wrap::after {
			content: "";
			position: absolute;
			top: 0;
			left: -35%;
			width: 25%;
			height: 100%;
			pointer-events: none;
			opacity: 0;
			background: linear-gradient(
				90deg,
				transparent,
				rgba(117,215,240,.25),
				rgba(255,255,255,.95),
				rgba(117,215,240,.25),
				transparent );
			filter: blur(3px); }

				.voiceprint-wrap.voice-playing::after {
					opacity: 1;
					animation: voiceScan 1.2s linear infinite; }

				.voiceprint-wrap.voice-playing .voiceprint {
					filter:
						brightness(1.25)
						drop-shadow(0 0 5px rgba(117,215,240,.8)); }

				@keyframes voiceScan {
					from { left: -35%; }
					to   { left: 110%; } }


	/*===================== TEMOINS LUMINEUX =====================*/

		.biometric-controls-toggle {
			cursor: pointer;
			transition:
				transform .25s ease,
				filter .25s ease; }

				.biometric-controls-toggle:hover {
					transform: scale(1.15);
					filter:
						brightness(1.5)
						drop-shadow(0 0 7px rgba(117,215,240,.9)); }

		.biometric-lights {
			display: none;
			align-items: center;
			gap: 11px;
			margin-left: auto;
			margin-right: 12px; }

				.biometric.controls-visible .biometric-lights { display: flex; }

				.biometric.controls-visible .biometric-light { animation: commLightsChaos .85s ease-in-out infinite; }
				.biometric.controls-visible .biometric-light:nth-child(2) { animation-delay: -.28s; }
				.biometric.controls-visible .biometric-light:nth-child(3) { animation-delay: -.56s; }

		.biometric-light, .comm-light {
			position: relative;
			width: 14px;
			height: 14px;
			padding: 0;
			border: 1px solid rgba(255,255,255,.40);
			border-radius: 50%;
			cursor: pointer;
			transform: scale(1);
			transition:
				transform .20s ease,
				filter .20s ease,
				box-shadow .20s ease; }

					.biometric-light::after, .comm-light::after {
						content: "";
						position: absolute;
						top: 2px;
						left: 3px;
						width: 4px;
						height: 3px;
						border-radius: 50%;
						background: rgba(255,255,255,.9);
						filter: blur(.3px); }

			.biometric-light-red, .comm-light-red {
				background:
					radial-gradient(circle at 35% 30%,
						#fff 0,
						#ff9b9b 13%,
						#ff2424 36%,
						#8b0000 75%);
				box-shadow:
					0 0 4px #ff2222,
					0 0 10px rgba(255,0,0,.85),
					0 0 18px rgba(255,0,0,.45); }

			.biometric-light-orange, .comm-light-orange {
				background:
					radial-gradient(circle at 35% 30%,
						#fff 0,
						#ffe0a0 13%,
						#ff9800 38%,
						#994700 75%);
				box-shadow:
					0 0 4px #ff9800,
					0 0 10px rgba(255,152,0,.85),
					0 0 18px rgba(255,121,0,.50); }

			.biometric-light-green, .comm-light-green {
				background:
					radial-gradient(circle at 35% 30%,
						#fff 0,
						#afffc8 13%,
						#00ff66 38%,
						#006b2b 75%);
				box-shadow:
					0 0 4px #00ff66,
					0 0 10px rgba(0,255,102,.90),
					0 0 18px rgba(0,255,102,.50);
				cursor: pointer; }

		/* zoom brillant au survol */
		.biometric-light:hover, .comm-light:hover {
			transform: scale(1.45);
			filter: brightness(1.6); }

				.biometric-light-red:hover, .comm-light-red:hover {
					box-shadow:
						0 0 6px #fff,
						0 0 13px #ff2222,
						0 0 26px rgba(255,0,0,.90); }

				.biometric-light-orange:hover, .comm-light-orange:hover {
					box-shadow:
						0 0 6px #fff,
						0 0 13px #ff9800,
						0 0 26px rgba(255,152,0,.90); }

				.biometric-light-green:hover, .comm-light-green:hover {
					box-shadow:
						0 0 6px #fff,
						0 0 13px #00ff66,
						0 0 26px rgba(0,255,102,.90); }