/* ============================================================================
   Pages d'authentification (login / mot de passe oublié / réinitialisation).
   Layout « app » : hero de marque en haut + feuille de formulaire en bas.
   Responsive : carte centrée sur desktop. Couleur pilotée par --brand/--brand-2
   (définies inline par chaque page depuis le branding .env).
   ============================================================================ */
* { box-sizing: border-box; }

body {
    margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh;
    background: #f3f4f6;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #181b20; -webkit-font-smoothing: antialiased;
}

.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.auth-hero {
    background: linear-gradient(155deg, var(--brand, #2563eb), var(--brand-2, #1e40af));
    color: #fff; text-align: center;
    padding: calc(54px + env(safe-area-inset-top)) 28px 46px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.auth-logo {
    width: 78px; height: 78px; border-radius: 20px;
    background: rgba(255, 255, 255, .16);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.auth-logo img { max-width: 54px; max-height: 54px; }
.auth-logo i { font-size: 33px; color: #fff; }
.auth-hero h1 { font-size: 25px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.auth-hero p { opacity: .88; margin: .45rem 0 0; font-size: 14px; }

.auth-sheet {
    flex: 1; background: #fff; margin-top: -24px;
    border-radius: 24px 24px 0 0; padding: 32px 24px 40px;
    box-shadow: 0 -10px 30px rgba(16, 24, 40, .06);
}
.auth-sheet h2 { font-size: 18px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.01em; }
.auth-sheet .sheet-sub { color: #646b76; font-size: 14px; margin: 0 0 22px; }

.auth .form-label { font-weight: 550; font-size: 13.5px; margin-bottom: .4rem; color: #374151; }
.auth .input-group-text {
    background: #f8f9fb; border: 1px solid #d7dbe2; border-right: 0;
    color: #6b7280; border-radius: 11px 0 0 11px;
}
.auth .form-control {
    border: 1px solid #d7dbe2; border-left: 0; border-radius: 0 11px 11px 0;
    padding: .8rem .9rem; font-size: 16px;
}
.auth .form-control:focus { box-shadow: none; border-color: var(--brand, #2563eb); }
.auth .input-group:focus-within .input-group-text { border-color: var(--brand, #2563eb); }
/* Champ sans icône (réinitialisation) */
.auth .form-control.solo { border-left: 1px solid #d7dbe2; border-radius: 11px; }

.btn-login {
    width: 100%; background: var(--brand, #2563eb); color: #fff; border: 0;
    border-radius: 13px; padding: .92rem; font-size: 16px; font-weight: 600;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--brand, #2563eb) 55%, transparent);
    transition: transform .12s ease, filter .12s ease;
}
.btn-login:active { transform: translateY(1px); filter: brightness(.96); }
.btn-login:disabled { opacity: .6; }

.forgot { color: var(--brand, #2563eb); font-size: 13.5px; text-decoration: none; font-weight: 500; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; color: #646b76; font-size: 14px; text-decoration: none; font-weight: 500; }
.auth-back:hover { color: #181b20; }
.auth-foot { text-align: center; color: #9aa1ab; font-size: 12px; margin-top: 24px; line-height: 1.6; }

.auth .alert { border-radius: 12px; font-size: 14px; }

@media (min-width: 768px) {
    body { display: flex; align-items: center; justify-content: center; padding: 24px; }
    .auth {
        min-height: auto; width: 100%; max-width: 410px;
        border-radius: 24px; overflow: hidden; background: #fff;
        box-shadow: 0 24px 64px -22px rgba(16, 24, 40, .35);
    }
    .auth-hero { padding: 46px 32px 38px; }
    .auth-sheet { flex: none; margin-top: 0; border-radius: 0; box-shadow: none; padding: 30px 32px 34px; }
}