/* --- VARIABLES ET RESET --- */
        :root {
            --primary: #ff8c00; /* Orange Nitro */
            --glass: rgba(255, 255, 255, 0.1);
            --dark-bg: rgba(0, 0, 0, 0.75);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

    body {
        height: 100%;
		font-family: 'Roboto', sans-serif;
        color: white;
        min-height: 100vh;
        background: linear-gradient(var(--dark-bg), var(--dark-bg)), url("ROBOT.png");
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
		text-align: center;
    }

    header {
        padding: 40px 20px;
        text-align: center;
	}
	
	#zoneCode {
		display: none;
		margin-top: 30px;
	}

	#codeDisplay {
		font-size: 32px;
		letter-spacing: 14px;
		margin-bottom: 25px;
		font-weight: bold;
	}

	.keypad {
		display: grid;
		grid-template-columns: repeat(3, 80px);
		gap: 15px;
		justify-content: center;
	}

	.keypad button {
		height: 70px;
		font-size: 22px;
		border: none;
		border-radius: 16px;
		cursor: pointer;
		background: linear-gradient(145deg, #f2f2f2, #cfcfcf);

	}

	.keypad button:active {
		transform: scale(0.95);

	}

	.keypad .danger {
		background: linear-gradient(145deg, #ff6b6b, #e74c3c);
		color: white;
	}

	.keypad .enter {
		background: linear-gradient(145deg, #1e90ff, #3742fa);
		color: white;
	}

	#message {
		color: #e74c3c;
		font-weight: bold;
		min-height: 20px;
		margin-top: 10px;
	}

	.main-btn {
		padding: 8px 22px;
		font-size: 18px;
		border-radius: 10px;
		border: none;
		cursor: pointer;
		background-color: #4a90e2;
		color: white;
		margin-left: 400px;
		margin-right: 400px;
	}
	
	input {
		font-size: 18px;
		text-align: center;
		width: 90px;
	}

    .logo-group {
        display: absolute;
        align-items: center;
		text-align: center;
        gap: 10px;
        margin-bottom: 25px;

    }

    #logo {
        width: 40px;
        filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
		margin-top: 3px;
    }

    h1 {
        font-family: 'Orbitron', sans-serif;
        color: var(--primary);
        font-size: clamp(2rem, 8vw, 2.5rem);
        text-transform: uppercase;
		text-align: center;
        letter-spacing: 4px;
    }

	/* --- EN-TÊTE --- */
    header {
        padding: 40px 20px;
        text-align: center;
    }
	
	#content {
		padding: 0px 0px -200px;
		flex-grow: 1;
	}

	#zoneCode {
		display: none;
		margin-top: 20px;
		text-align: center;	
        align-items: center;
	}
       
		
	#valider {
        background: white;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.1);
        padding: 10px;
        border-radius: 20px;
		color: green;
		flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
		margin-left: 652px;
		cursor: pointer;
       }
	   
	p {
		color: white;
	}
	   
	nav {
        background: black;
        display: inline-flex;
        gap: 20px;
        padding: 5px 30px;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    nav a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
        font-size: 0.9rem;
        transition: color 0.3s;
    }

    nav a:hover {
        color: var(--primary);
    }