/*================================================================*/
/*===================== Portrait biométrique =====================*/
/*================================================================*/

.portrait {
	grid-area: portrait;
	position: relative;
	overflow: hidden;
	background: #000; }

		.portrait-img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover; }

		/*================ Léger voile ===============*/
		.portrait::before {
			content: "";
			position: absolute;
			inset: 0;
			background:
				linear-gradient(
					rgba(90, 220, 255, 0.03),
					rgba(90, 220, 255, 0.03) );
			pointer-events: none;
			z-index: 1; }

		/*============ Animation scan / effets au survol ============*/
		.scan {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 3px;
			background: rgba(100, 225, 255, 0.95);
			box-shadow:
				0 0 5px rgba(100, 225, 255, 1),
				0 0 12px rgba(100, 225, 255, 0.9),
				0 0 25px rgba(100, 225, 255, 0.7);
			z-index: 4; }

		/*============ Halo de la ligne ============*/
		.scan::after {
			content: "";
			position: absolute;
			left: 0;
			top: -20px;
			width: 100%;
			height: 42px;
			background: linear-gradient(
				to bottom,
				transparent,
				rgba(100, 225, 255, 0.10),
				rgba(100, 225, 255, 0.22),
				rgba(100, 225, 255, 0.10),
				transparent ); }

		/*============ Flashs / brouillage ============*/
		@keyframes scan-biometrique {
			from { top: 0; }
			to { top: calc(100% - 3px); } }

		.portrait::before,
		.portrait::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none; }

		/* Flash bleu au survol */
		.portrait::before {
			z-index: 5;
			opacity: 0;
			background:
				repeating-linear-gradient(
					0deg,
					transparent 0 3px,
					rgba(117,215,240,.18) 4px,
					transparent 5px),
				linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }

		/* Voile gris au clic */
		.portrait::after {
			z-index: 6;
			opacity: 0;
			background: rgba(120,120,120,.45);
			transition: opacity .15s ease; }

		.portrait:hover::before { animation: portraitflashintense .42s steps(1) infinite; }

		.portrait:hover .portrait-img {
			animation: portraitglitchhover .34s steps(1) infinite;
			filter: contrast(1.18) brightness(1.12) saturate(1.15); }

		.portrait.voile::after { opacity: 1; }
		.portrait.voile::before { animation: portraitflashclicked .22s steps(1) infinite; }

		.portrait.voile .portrait-img {
			animation: portraitglitchclick .16s steps(1) infinite;
			filter: contrast(1.35) brightness(1.18) saturate(.85); }

				@Keyframes portraitflashintense {
					0%, 100% { opacity: .05; transform: translatex(0); }
					18% { opacity: .65; transform: translatex(-2px); }
					24% { opacity: .10; }
					47% { opacity: .82; transform: translatex(3px); }
					53% { opacity: .08; }
					76% { opacity: .48; transform: translatex(-4px); }
					82% { opacity: .04; } }

				@Keyframes portraitflashclicked {
					0%, 100% { opacity: .18; transform: translate(0,0); }
					20% { opacity: .95; transform: translate(-5px,2px); }
					35% { opacity: .12; transform: translate(4px,-2px); }
					55% { opacity: .75; transform: translate(-3px,-1px); }
					75% { opacity: .20; transform: translate(5px,2px); } }

				@Keyframes portraitglitchhover {
					0%,100% { transform: translate(0,0) scale(1); clip-path: inset(0 0 0 0); }
					20% { transform: translate(-4px,1px) scale(1.012); clip-path: inset(4% 0 10% 0); }
					40% { transform: translate(5px,-1px) scale(1.015); clip-path: inset(28% 0 42% 0); }
					60% { transform: translate(-3px,2px) scale(1.01); clip-path: inset(62% 0 18% 0); }
					80% { transform: translate(3px,-2px) scale(1.014); clip-path: inset(12% 0 66% 0); } }

				@Keyframes portraitglitchclick {
					0%,100% { transform: translate(0,0) scale(1.015); clip-path: inset(0 0 0 0); }
					14% { transform: translate(-8px,3px) scale(1.025); clip-path: inset(3% 0 58% 0); }
					28% { transform: translate(7px,-4px) scale(1.03); clip-path: inset(38% 0 25% 0); }
					42% { transform: translate(-6px,-2px) scale(1.02); clip-path: inset(69% 0 8% 0); }
					58% { transform: translate(8px,4px) scale(1.028); clip-path: inset(20% 0 55% 0); }
					72% { transform: translate(-7px,1px) scale(1.024); clip-path: inset(52% 0 18% 0); }
					86% { transform: translate(5px,-3px) scale(1.03); clip-path: inset(8% 0 72% 0); } }

		.scan { animation: scan-biometrique 4s linear infinite alternate; }
		.portrait:hover .scan { animation: scan-biometrique-hover 1.25s linear infinite alternate; }

		.portrait.voile .scan {
			background: #ff7900;
			box-shadow:
				0 0 7px rgba(255,121,0,1),
				0 0 18px rgba(255,121,0,.95),
				0 0 35px rgba(255,121,0,.85);
			animation: scan-biometrique-click .72s linear infinite alternate; }

				@Keyframes scan-biometrique-hover {
					0% { top: 0%; transform: translatey(0); }
					10% { top: 10%; transform: translatey(7px); }
					13% { top: 7%; transform: translatey(-10px); }
					16% { top: 17%; transform: translatey(5px); }
					33% { top: 33%; transform: translatey(-4px); }
					36% { top: 42%; transform: translatey(12px); }
					39% { top: 34%; transform: translatey(-9px); }
					56% { top: 58%; transform: translatey(0); }
					60% { top: 68%; transform: translatey(10px); }
					63% { top: 57%; transform: translatey(-8px); }
					80% { top: 82%; transform: translatey(4px); }
					84% { top: 91%; transform: translatey(11px); }
					88% { top: 80%; transform: translatey(-7px); }
					100% { top: calc(100% - 3px); transform: translatey(0); } }

				@Keyframes scan-biometrique-click {
					0% { top: 0%; transform: translatey(0) scalex(1); }
					12% { top: 18%; transform: translatey(14px) scalex(1.03); }
					18% { top: 8%; transform: translatey(-13px) scalex(.97); }
					31% { top: 37%; transform: translatey(11px) scalex(1.04); }
					39% { top: 27%; transform: translatey(-12px) scalex(.96); }
					52% { top: 61%; transform: translatey(15px) scalex(1.05); }
					61% { top: 48%; transform: translatey(-13px) scalex(.96); }
					75% { top: 82%; transform: translatey(13px) scalex(1.04); }
					84% { top: 70%; transform: translatey(-12px) scalex(.97); }
					100% { top: calc(100% - 3px); transform: translatey(0) scalex(1); } }

		/*============ Second scan horizontal au clic ============*/
		.scan-horizontal {
			position: absolute;
			top: 0;
			left: 0;
			width: 3px;
			height: 100%;
			background: #ff7900;
			box-shadow:
				0 0 7px rgba(255,121,0,1),
				0 0 18px rgba(255,121,0,.95),
				0 0 35px rgba(255,121,0,.8);
			z-index: 7;
			opacity: 0; }

		.portrait.voile .scan-horizontal {
			opacity: 1;
			animation: scan-horizontal 1.15s linear infinite alternate; }

		@Keyframes scan-horizontal {
			0% { left: 0; transform: translatex(0); }
			35% { transform: translatex(8px); }
			40% { transform: translatex(-7px); }
			65% { transform: translatex(5px); }
			100% { left: calc(100% - 3px); transform: translatex(0); } }

		.scan-horizontal::after {
			content: "";
			position: absolute;
			top: 0;
			left: -20px;
			width: 42px;
			height: 100%;
			background: linear-gradient(
				to right,
				transparent,
				rgba(255,121,0,.10),
				rgba(255,121,0,.35),
				rgba(255,121,0,.10),
				transparent ); }


		/*============ Avertissement biométrique ============*/
		.portrait-warning {
			position: absolute;
			left: 50%;
			bottom: 8%;
			width: 92%;
			transform: translatex(-50%);
			z-index: 12;
			pointer-events: none;
			text-align: center;
			font-family: "courier new", monospace; }

		.portrait-warning-hover,
		.portrait-warning-critical { display: none; }

		.portrait:hover:not(.voile) .portrait-warning-hover { display: block; }
		.portrait.voile .portrait-warning-critical { display: block; }

		.portrait-warning-main,
		.portrait-warning-critical {
			position: relative;
			color: var(--vert-fluo);
			font-size: clamp(14px, 1.25vw, 21px);
			font-weight: bold;
			letter-spacing: 1px;
			text-shadow:
				0 0 4px rgba(0,255,102,.95),
				0 0 11px rgba(0,255,102,.55);
			animation: warningblink 1.15s steps(1) infinite; }

		.portrait-warning-sub {
			margin-top: 5px;
			color: rgba(0,255,102,.66);
			font-size: clamp(8px, .68vw, 11px);
			font-weight: normal;
			letter-spacing: .8px;
			text-shadow: 0 0 5px rgba(0,255,102,.28);
			animation: warningsubglitch .8s steps(1) infinite; }

		.portrait-warning-main::before,
		.portrait-warning-main::after,
		.portrait-warning-critical::before,
		.portrait-warning-critical::after {
			content: attr(data-text);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0; }

		.portrait:hover:not(.voile) .portrait-warning-main::before {
			opacity: .55;
			transform: translatex(-2px);
			clip-path: inset(0 0 55% 0);
			animation: warningglitchtop .34s steps(1) infinite; }

		.portrait:hover:not(.voile) .portrait-warning-main::after {
			opacity: .38;
			transform: translatex(2px);
			clip-path: inset(52% 0 0 0);
			animation: warningglitchbottom .41s steps(1) infinite; }

		.portrait.voile .portrait-warning-critical {
			font-size: clamp(15px, 1.4vw, 23px);
			animation: warningcriticalblink .42s steps(1) infinite; }

		.portrait.voile .portrait-warning-critical::before {
			opacity: .70;
			animation: warningcriticalglitch .18s steps(1) infinite; }

		.portrait.voile .portrait-warning-critical::after {
			opacity: .45;
			animation: warningcriticalglitch2 .23s steps(1) infinite; }

				@Keyframes warningblink {
					0%, 82%, 100% { opacity: 1; }
					86% { opacity: .35; }
					90% { opacity: .92; }
					94% { opacity: .55; } }

				@Keyframes warningsubglitch {
					0%, 70%, 100% { transform: translatex(0); opacity: .75; }
					73% { transform: translatex(-3px); opacity: .38; }
					76% { transform: translatex(2px); opacity: .85; }
					80% { transform: translatex(-1px); opacity: .55; } }

				@Keyframes warningglitchtop {
					0%, 100% { transform: translatex(-2px); }
					33% { transform: translatex(4px); }
					66% { transform: translatex(-5px); } }

				@Keyframes warningglitchbottom {
					0%, 100% { transform: translatex(2px); }
					40% { transform: translatex(-4px); }
					75% { transform: translatex(5px); } }

				@Keyframes warningcriticalblink {
					0%, 42%, 100% { opacity: 1; }
					43%, 54% { opacity: .18; }
					55%, 72% { opacity: .92; }
					73%, 79% { opacity: .30; } }

				@Keyframes warningcriticalglitch {
					0%,100% { transform: translate(0,0); clip-path: inset(0 0 60% 0); }
					25% { transform: translate(-6px,1px); clip-path: inset(18% 0 45% 0); }
					55% { transform: translate(5px,-1px); clip-path: inset(42% 0 30% 0); }
					80% { transform: translate(-3px,1px); clip-path: inset(68% 0 12% 0); } }

				@Keyframes warningcriticalglitch2 {
					0%,100% { transform: translate(0,0); clip-path: inset(55% 0 0 0); }
					35% { transform: translate(5px,0); clip-path: inset(62% 0 7% 0); }
					70% { transform: translate(-5px,1px); clip-path: inset(38% 0 28% 0); } }


		.portrait-online {
			display: none;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			z-index: 30;
			color: var(--vert-fluo);
			font-family: "Courier New", monospace;
			font-size: clamp(28px, 3vw, 52px);
			font-weight: 900;
			letter-spacing: 3px;
			text-shadow: 0 0 7px rgba(0,255,102,1), 0 0 24px rgba(0,255,102,.75); }

				body[data-comm-live="1"]:not([data-link-failure="1"]) .portrait .portrait-online {
					display: block;
					animation: portraitOnlineBlink .60s steps(1) infinite; }
					
						@keyframes portraitOnlineBlink { 0%, 58% { opacity: 1; } 59%, 100% { opacity: .22; } }

				body[data-target-offline="1"] .portrait .portrait-online {
					display:block !important;
					color:#ff3b30 !important;
					text-shadow:0 0 7px rgba(255,59,48,1), 0 0 20px rgba(255,59,48,.75);
					animation: portraitOfflineBlink .48s steps(1) infinite !important; }

						@keyframes portraitOfflineBlink {
							0%,52% { opacity:1; }
							53%,100% { opacity:.18; } }