/*===================================================================*/
/*===================== ACCESS & AUTHENTICATION =====================*/
/*===================================================================*/

	.access { grid-area: access; }

	.access-contenu {
		position: absolute;
		top: 56px;
		left: 5%;
		width: 90%;
		height: calc(100% - 62px);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		z-index: 4; }

	.access-image {
		width: 100%;
		height: 46%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2px 0 5px 0;
		border-right: none;
		border-bottom: 1px solid rgba(150, 160, 165, 0.22); }

			.access-image img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain; }

			/*========== Rotation de l'image au survol ==========*/

			.access-image { position: relative; cursor: pointer; overflow: hidden; }

			.access-auth-image {
				cursor: pointer;
				transform-origin: center;
				transition: filter .25s ease; }

					.access-image:hover .access-auth-image {
						animation: accessSpin .62s ease forwards;
						filter: brightness(1.4); }

					@keyframes accessSpin {
						from { transform: rotate(0deg) scale(1); }
						to { transform: rotate(360deg) scale(1); } }


	.access-infos {
		width: 100%;
		padding: 4px 0 0 0; }

	.access-ok {
		color: var(--vert-fluo);
		text-shadow: 0 0 5px rgba(0, 255, 100, 0.45); }


	/*===== FORMULAIRE de CONNEXION =====*/

	.access-login {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 20;
		background: rgba(0, 10, 18, 0.88);
		align-items: center;
		justify-content: center; }

	.access.login-active .titre-bloc,
	.access.login-active .access-contenu { display: none; }

	.access.login-active .access-login { display: flex; }

	.access-login form {
		width: 75%;
		max-width: 420px; }

	.login-title {
		margin-bottom: 18px;
		color: var(--bleu-ciel);
		font-family: "Arial Narrow", Arial, sans-serif;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 1.5px;
		text-align: center; }

	.login-field { margin-bottom: 14px; }

			.login-field label {
				display: block;
				margin-bottom: 5px;
				color: var(--bleu-gris);
				font-family: "Arial Narrow", Arial, sans-serif;
				font-size: 11px;
				text-transform: uppercase; }

			.login-field input {
				width: 100%;
				padding: 9px 10px;
				border: 1px solid rgba(120, 220, 255, 0.45);
				outline: none;
				background: rgba(0, 0, 0, 0.45);
				color: var(--orange);
				font-family: "Courier New", monospace;
				font-size: 14px; }

			.login-field input:focus {
				border-color: var(--bleu-ciel);
				box-shadow: 0 0 8px rgba(120, 220, 255, 0.35); }

	.login-submit,
	.login-cancel {
		padding: 8px 14px;
		border: 1px solid rgba(120, 220, 255, 0.45);
		background: rgba(20, 45, 55, 0.65);
		font-family: "Arial Narrow", Arial, sans-serif;
		font-weight: bold;
		cursor: pointer; }

	.login-submit { color: var(--vert-fluo); }

	.login-buttons {
		display:flex;
		flex-wrap:nowrap;
		align-items:center;
		justify-content:center;
		gap:8px; }

			.login-buttons .login-submit,
			.login-buttons .login-cancel { margin:0; }

	.login-cancel {
		margin-left: 8px;
		color: var(--gris); }

			.login-back {
				min-width:38px;
				font-size:20px;
				line-height:1; }

	.login-submit:hover,
	.login-cancel:hover { background: rgba(120, 220, 255, 0.15); }

	.access-granted {
		position: absolute;
		inset: 56px 5% 6px;
		z-index: 5;
		color: #c2c8cc;
		font-family: "Arial Narrow", Arial, sans-serif; }
		
			.access-granted-title {
				margin-bottom: 14px;
				color: var(--vert-fluo);
				font-size: 15px;
				font-weight: normal;
				letter-spacing: 1.2px;
				text-align: center;
				text-shadow: 0 0 7px rgba(0, 255, 100, .5); }
				
	.access-member-line {
		margin-top: 7px;
		margin-left: 15px;
		color: #c2c8cc;
		text-align: left; }
	
	.auth-error {
		margin: 0 0 12px;
		color: #ff806f;
		font-size: 12px;
		text-align: center; }
	
	.status-control {
		margin: 15px 0;
		text-align: center; }
	
			.status-control label {
				margin: 0 8px;
				color: #c2c8cc; }
	
	.logout-form {
		margin-top: 15px;
		text-align: center; }
		
			.logout-form .login-cancel { margin-left: 0; }
	

	.create-member-link {
		display:block; margin-top:12px;
		color:var(--bleu-ciel);
		font-family:"Arial Narrow",Arial,sans-serif;
		font-size:12px;
		text-align:center;
		text-transform:uppercase;
		cursor:pointer;
		text-decoration:underline; }
		
	.access-account-form { display:none; }
	.access.account-mode .access-login > .login-form { display:none; }
	.access.account-mode .access-login > .access-account-form { display:block; }
	
	.account-message {
		margin:0 0 12px;
		color:var(--vert-fluo);
		font-size:12px;
		text-align:center; }