.auth-bg {
	background: radial-gradient(ellipse at top left, #181A1B 60%, #101112 100%);
	min-height: 100vh;
}

.auth-main {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-card {
	background: #181A1B;
	border-radius: 18px;
	box-shadow: 0 4px 32px 0 rgba(34,196,99,0.08);
	border: 1.5px solid #232627;
	padding: 2.7rem 2.2rem 2.2rem 2.2rem;
	max-width: 30%;
	width: 100%;
}

.auth-logo {
	margin-bottom: 1.2rem;
}
.auth-brand {
	color: #22C463;
	font-size: 1.45rem;
	font-weight: 700;
	margin-bottom: 0.2rem;
}
.auth-sub {
	color: #bfc7d5;
	font-size: 1.05rem;
	margin-bottom: 0.7rem;
}

.auth-title {
	font-size: 1.45rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: .7rem;
	text-align: center;
}
.auth-desc {
	color: #bfc7d5;
	font-size: 1.05rem;
	text-align: center;
	margin-bottom: 1.2rem;
}

.auth-form .form-label {
	color: #fff;
	font-weight: 500;
	font-size: 1rem;
	margin-bottom: .2rem;
}
.auth-input, .auth-form .form-control, .auth-form .form-select {
	background: #232627;
	color: #fff;
	border-radius: 8px;
	border: none;
	font-size: 1.08rem;
	padding: 0.7rem 1.2rem;
	margin-bottom: 0.2rem;
}
.auth-input:focus {
	background: #232627;
	color: #fff;
	box-shadow: none;
	border: 1px solid #22C463;
}
.input-group-text.auth-eye {
	background: #232627;
	border: none;
	cursor: pointer;
	color: #bfc7d5;
}
.input-group-text.auth-eye:hover {
	color: #22C463;
}

.auth-form .form-check-input {
	border-radius: 4px;
	border: 1px solid #22C463;
	background: #232627;
}
.auth-form .form-check-input:checked {
	background-color: #22C463;
	border-color: #22C463;
}
.auth-form .form-check-label {
	color: #bfc7d5;
	font-size: .98rem;
}
.auth-link {
	color: #22C463;
	text-decoration: none;
	font-weight: 500;
}
.auth-link:hover { text-decoration: underline; color: #1fb55b; }

.auth-btn {
	background: #22C463;
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	padding: 0.7rem 1.6rem;
	font-size: 1.08rem;
	border: none;
	box-shadow: 0 2px 8px 0 rgba(34,196,99,0.08);
	transition: background .2s;
}
.auth-btn:hover,
.auth-btn:focus {
	background: #1fb55b;
	color: #fff;
}

.auth-status {
	text-align: center;
	font-size: 1rem;
	margin-top: 1rem;
	color: #bfc7d5;
}
.auth-status.success {
	color: #22C463;
}
.auth-status.error {
	color: #ff4d4f;
}
.auth-status.pending {
	color: #bfc7d5;
}

.auth-footer {
	color: #bfc7d5;
	font-size: .98rem;
}

/* Boutons sociaux */
.btn-auth-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.65rem 1rem;
	border: 1px solid #232627;
	text-decoration: none;
}
.btn-auth-social .svg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.btn-auth-social.w-100 { width: 100%; }
.btn-google {
	background: #ffffff;
	color: #111827;
	border-color: #e5e7eb;
}
.btn-google:hover { background: #f3f4f6; }
.btn-discord {
	background: #5865F2;
	color: #fff;
	border-color: #5865F2;
}
.btn-discord:hover {
	background: #4752C4;
	border-color: #4752C4;
}

/* Séparateur "ou" */
.auth-sep {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #bfc7d5;
	font-size: .95rem;
	margin: 12px 0 16px;
}
.auth-sep::before,
.auth-sep::after {
	content: "";
	height: 1px;
	background: #232627;
	flex: 1;
}
.auth-sep span { white-space: nowrap; }

/* Bouton œil à l'intérieur du champ */
.password-field .toggle-password {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: #bfc7d5;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.password-field .toggle-password:hover { color: #22C463; }
.password-field .toggle-password:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(34,196,99,.2);
}
.auth-input.has-toggle { padding-right: 48px; }

@media (max-width: 991.98px) {
	.auth-card {
		padding: 1.2rem 0.7rem 1rem 0.7rem;
		max-width: 98vw;
	}
	.auth-title {
		font-size: 1.15rem;
	}
	.auth-btn,
	.auth-input {
		font-size: 1rem;
		padding: 0.8rem 1.2rem;
	}
}

.alert-success { 
	background: var(--color-success);
    color: #ffffff;
    border-radius: 6px;
    padding: 10px;
    border: 0px;  
}
.alert-danger  { 
	background: var(--color-danger);
    color: #ffffff;
    border-radius: 6px;
    padding: 10px;
    border: 0px; 
}