/* 	===========================
  	1. STYLES GÉNÉRAUX DU BODY
  	=========================== */
body {
	margin: 0;
   	padding: 0;
   	font-family: 'Courier New', monospace;
   	background-image: url("../images/bgdarkblueclair.png");
   	background-size: cover;
   	background-position: center;
   	background-repeat: no-repeat;
   	height: 100vh;
   	display: flex;
   	align-items: center;
   	justify-content: center;
}

/* 	===========================
  	2. BOÎTE DE CONNEXION
  	=========================== */
.login-box {
   	background: rgba(255, 255, 255, 0.1);
   	backdrop-filter: blur(8px);
   	border-radius: 20px;
   	padding: 30px 40px;
   	width: 370px;
   	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
   	height: auto;
}

/* 	===========================
  	3. EN-TÊTE DE CONNEXION
  	=========================== */
.login-header {
   	position: relative;
   	top : -30px;
   	left: -40px;
   	display: flex;
   	align-items: center;
   	gap: 16px;
   	background-color: rgb(255, 255, 255, 0.55); /* fond léger */
   	padding: 15px 20px;
   	width: 410px;
   	padding-bottom: 15px;
   	border-radius: 20px;
}

.logo {
   	width: 80px;
   	height: 80px;
   	object-fit: cover;
   	border-radius: 50%;
}

.titre-connexion {
   	color: rgba(0, 49, 126); /* bleu foncé */
   	font-family: 'JetBrains Mono', monospace;
   	font-size: 40px;
   	margin: 0;
   	position: relative;
   	left : 30px;
}

/* 	===========================
  	4. FORMULAIRE & CHAMPS INPUT
  	=========================== */
.input-container {
  	display: flex;
  	flex-direction: column;
  	margin-bottom: 20px;
  	font-family: 'Courier New', monospace;
}

.input-container label {
  	color: white;
  	margin-bottom: 8px;
  	font-size: 20px;
}

.input-wrapper {
  	display: flex;
  	align-items: center;
  	border: 1px solid white;
  	border-radius: 4px;
  	background-color: transparent;
}

.input-icon {
  	width: 40px; 
  	height: 55px;
  	margin-right: 10px;
}

.input-wrapper input {
  	background-color: transparent;
  	border: none;
  	outline: none;
  	color: white;
  	font-size: 20px;
  	flex: 1;
}

.input-wrapper input::placeholder {
  	color: #ddd;
}

/* 	===========================
  	5. MESSAGES D'ERREUR & SUCCÈS
  	=========================== */
.error-message {
  	background-color: #F8D7DA;
  	color: #721C24;
  	padding: 12px;
  	border-radius: 4px;
  	font-family: 'Courier New', monospace;
  	font-weight: bold;
  	font-size: 20px;
  	margin-top: 5px;
  	margin-bottom: 15px;
  	text-align: center;
  	backdrop-filter: blur(2px);
  	border: 1px solid rgba(255, 100, 100, 0.3);
}

.success-message {
  	background-color: #D4EDDA;
  	color: #155724;
  	padding: 12px;
  	border-radius: 4px;
  	font-family: 'Courier New', monospace;
  	font-weight: bold;
  	font-size: 20px;
  	margin-top: 5px;
  	margin-bottom: 15px;
  	text-align: center;
  	backdrop-filter: blur(2px);
  	border: 1px solid rgba(100, 255, 100, 0.3);
}

/* 	===========================
  	6. BOUTON DE CONNEXION
  	=========================== */
.connect-button{
   	width: 190px;
   	padding: 12px;
   	margin-top: 20px;
   	background-color: rgb(255, 255, 255, 0.55); /* fond léger */
   	border: none;
   	border-radius: 4px;
   	font-size: 16px;
   	font-family: 'Courier New', monospace;
   	cursor: pointer;
   	position: relative;
   	left: 90px;
}

.login-form button:hover {
   	background-color: #b3d1f0;
}

/* 	===========================
  	7. MESSAGE D'INFORMATION
  	=========================== */
.info-message {
  	background-color: rgba(209, 236, 255, 0.2);
  	color: white;
  	padding: 14px;
  	border-radius: 4px;
  	font-family: 'Courier New', monospace;
  	font-size: 20px;
  	line-height: 1.4;
  	margin-bottom: 20px;
  	text-align: center;
  	backdrop-filter: blur(2px);
  	border: 1px solid rgba(183, 229, 255, 0.3);
}

.info-message p {
  	margin: 5px 0;
}

.email-mask {
  	font-weight: bold;
  	color: #b3d1f0;
}

/* 	===========================
  	8. CONTENEUR DE BOUTONS D'ACTION
  	=========================== */
.button-container {
   	display: flex;
   	justify-content: space-between;
   	margin-top: 20px;
   	width: 100%;
}

/* 	===========================
  	9. BOUTONS D'ACTION
  	=========================== */
.action-button {
   	width: 45%;
   	padding: 12px;
   	background-color: rgba(255, 255, 255, 0.55);
   	border: none;
   	border-radius: 4px;
   	font-size: 16px;
   	font-family: 'Courier New', monospace;
   	cursor: pointer;
   	transition: background-color 0.2s;
}

.action-button:hover {
   	background-color: #b3d1f0;
}