:root {
	--border-radius: 12px;
	--gap-grid: 15px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	margin: 0;
	background: #f0f2f5 url('assets/background-page.jpg') center/cover no-repeat fixed;
	color: #333;
	overflow-x: hidden;
}

/* Conteneur principal qui centre la boîte */
.auth-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px;
	/* Le fond (body) est déjà défini par le style du calendrier */
}

/* La "carte" de connexion */
.auth-box {
	/* Style "moderne" : flou, fond blanc translucide */
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	border-radius: var(--border-radius);
	padding: 40px;
	width: 100%;
	max-width: 450px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	text-align: center;
}

.cf-turnstile
{
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

.auth-logo {
	height: 45px;
	width: auto;
	margin-bottom: 20px;
}

.auth-box h2 {
	margin-top: 0;
	margin-bottom: 10px;
	color: #333;
}

.auth-box p {
	margin-bottom: 30px;
	font-size: 0.95em;
	color: #555;
}

/* Style du formulaire */
.auth-box form {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.auth-box label {
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 5px;
	color: #444;
}

.auth-box input[type="email"] {
	padding: 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 1em;
	margin-bottom: 20px;
	background: #fff;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.auth-box input[type="email"]:focus {
	outline: none;
	border-color: #FF6B6B; /* Couleur "thème" */
	box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
}

/* Ciblage spécifique du champ mot de passe dans la box auth */
.auth-box input[type="password"] {
	padding: 16px 20px; /* Plus de hauteur pour un effet "bouton" */
	font-size: 1.3rem;  /* Texte plus gros */
	font-family: monospace; /* Police à chasse fixe (optionnel, fait plus "code") */
	font-weight: bold;
	
	text-align: center; /* Centre le code, très élégant pour un mot de passe */
	letter-spacing: 4px; /* Espacement large entre les points/caractères */
	
	color: #333;
	background-color: #f8f9fa; /* Fond gris très léger */
	border: 2px solid #e9ecef; /* Bordure plus épaisse */
	border-radius: 12px; /* Arrondi moderne */
	
	transition: all 0.3s ease; /* Animation fluide */
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.03); /* Légère ombre interne */
}

/* Au survol ou au focus (quand on tape) */
.auth-box input[type="password"]:focus {
	background-color: #fff;
	border-color: #FF6B6B; /* Couleur de la marque */
	box-shadow: 0 8px 20px rgba(255, 107, 107, 0.15); /* Belle ombre portée */
	outline: none;
	transform: translateY(-2px); /* Léger soulèvement */
}

/* Style du placeholder (le texte "Ex: NOEL-1234") */
.auth-box input[type="password"]::placeholder {
	color: #bbb;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Retour à police normale */
	font-size: 0.9rem;
	letter-spacing: normal; /* Pas d'espacement pour l'instruction */
	font-weight: normal;
	text-transform: none;
}

/* Au survol ou au focus (quand on tape) */
.auth-box input[type="token_hash"]:focus {
	background-color: #fff;
	border-color: #FF6B6B; /* Couleur de la marque */
	box-shadow: 0 8px 20px rgba(255, 107, 107, 0.15); /* Belle ombre portée */
	outline: none;
	transform: translateY(-2px); /* Léger soulèvement */
}

/* Style du placeholder (le texte "Ex: NOEL-1234") */
.auth-box input[type="token_hash"]::placeholder {
	color: #bbb;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Retour à police normale */
	font-size: 0.9rem;
	letter-spacing: normal; /* Pas d'espacement pour l'instruction */
	font-weight: normal;
	text-transform: none;
}

.auth-box button[type="submit"] {
	padding: 15px;
	border: none;
	border-radius: 8px;
	background: #2c3e50;
	color: white;
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.auth-box button[type="submit"]:hover {
	background: #34495e;
}

/* Style des messages de feedback */
.feedback {
	margin-top: 20px;
	padding: 12px;
	border-radius: 8px;
	font-size: 0.9em;
}
.feedback.success {
	background: #e0f8e9;
	color: #34a853;
}
.feedback.error {
	background: #fdecea;
	color: #ea4335;
}

/* --- AJOUT POUR LE MESSAGE DE MODE AUTH --- */
.auth-mode-info {
	font-size: 0.9em;
	font-style: italic;
	color: #666;
	background: #f0f0f0;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 20px !important; /* Force l'espacement */
	margin-top: -15px; /* Le rapproche du titre */
}