/* ============================================================================
   LogiFlotte — pages d'authentification (login, register, forgot, reset).
   HTML : app/Views/layouts/auth.php
   Structure :
     <div class="auth-shell">
       <main class="auth-body">
         <section class="auth-card">
           <header class="auth-header">
             <div class="auth-brand">...</div>
             <h1 class="auth-section-title">Connexion</h1>
             <p class="auth-subtitle">...</p>
           </header>
           <p class="auth-lead">...</p>
           <form>...</form>
           <div class="auth-links">...</div>
           <footer class="auth-footer">...</footer>
         </section>
       </main>
     </div>
   ============================================================================ */

.auth-body {
    /* body.auth-body : fond dégradé plein écran */
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1a56db 100%);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.auth-brand img,
.auth-brand svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.auth-section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.auth-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.auth-lead {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin: 0;
}

.auth-form,
.auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.auth-form .btn,
.auth-card form .btn {
    margin-top: var(--space-2);
}

.auth-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
    font-size: var(--font-size-sm);
}

.auth-links a {
    color: var(--color-primary);
}

.auth-footer {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    padding-top: var(--space-4);
}

.auth-footer a { color: rgba(255, 255, 255, 0.85); }
.auth-footer a:hover { color: #fff; }

@media (max-width: 480px) {
    .auth-card { padding: var(--space-5) var(--space-4); }
}