:root {
    --login-bg: #f3f6fb; /* fond général très clair */
    --login-hero-start: #e5f0ff; /* bleu très clair */
    --login-hero-mid: #f9fbff;
    --login-hero-end: #cde9ff; /* bleu ciel */
    --login-border: rgba(148, 163, 184, 0.35);
    --login-text: #0f172a;
    --login-muted: #6b7280;
    --login-primary: #0ea5e9;
    --login-primary-dark: #0284c7;
}

/* Corps de la page */
.auth-body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    background: radial-gradient(
        circle at top left,
        #e0f2fe 0,
        var(--login-bg) 40%,
        #edf2ff 100%
    );
    color: var(--login-text);
}

/* Wrapper max-width */
.auth-wrapper {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* Panneau gauche (hero) */
.auth-hero {
    background: radial-gradient(
            circle at 0 0,
            rgba(14, 165, 233, 0.15) 0,
            transparent 45%
        ),
        radial-gradient(
            circle at 100% 0,
            rgba(148, 163, 184, 0.18) 0,
            transparent 40%
        ),
        linear-gradient(
            135deg,
            var(--login-hero-start),
            var(--login-hero-mid),
            var(--login-hero-end)
        );
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16),
        0 0 0 1px var(--login-border);
    color: var(--login-text);
}

/* Texte "blanc" réinterprété en gris doux sur ce fond clair */
.auth-hero .text-white-50,
.auth-hero .text-white-75 {
    color: var(--login-muted) !important;
}

/* Carte de login */
.auth-card {
    border-radius: 20px;
    border: 1px solid var(--login-border);
    background: linear-gradient(180deg, #ffffff 0, #f7f9ff 100%);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(148, 163, 184, 0.18);
    color: var(--login-text);
}

/* Champs */
.auth-input {
    background: #f9fbff;
    border-color: #cbd5e1;
    color: var(--login-text);
}

.auth-input::placeholder {
    color: rgba(148, 163, 184, 0.9);
}

.auth-input:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
    background: #ffffff;
}

/* Addon des champs (icône) */
.auth-input-addon {
    background: #edf2ff;
    color: var(--login-muted);
    border-color: #cbd5e1;
}

/* Bouton principal */
.btn-brand {
    background: var(--login-primary);
    border-color: var(--login-primary);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.35);
}

.btn-brand:hover {
    background: var(--login-primary-dark);
    border-color: var(--login-primary-dark);
}

/* Texte "text-white-50" sur fond clair → gris doux */
.text-white-50 {
    color: var(--login-muted) !important;
}

/* Classe custom utilisée dans le texte */
.text-white-75 {
    color: #4b5563 !important;
}

/* Logos */
.standard-logo-lg {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: block;
    object-fit: contain;
}

.standard-logo-sm {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    background: #ffffff;
}

/* Légères adaptations mobile */
@media (max-width: 767.98px) {
    .auth-card {
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16),
            0 0 0 1px rgba(148, 163, 184, 0.16);
    }
}