/* ===================================================================
   PAGE DE CONNEXION — composition premium à deux volets, sans glassmorphism.
   Volet gauche: identité institutionnelle (vert profond + motif géométrique
   discret inspiré du palmier). Volet droit: formulaire clair sur papier ivoire.
   =================================================================== */

.auth-body { margin: 0; background: var(--paper-50); min-height: 100vh; }

.auth-shell { display: flex; min-height: 100vh; }

.auth-visual {
    flex: 1.1;
    background: var(--brand-green-900);
    color: #fff;
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--space-7) var(--space-7);
    overflow: hidden;
}
.auth-visual::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 46px);
    opacity: 0.5;
}
.auth-visual::after {
    content: "";
    position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px;
    border: 90px solid rgba(255,255,255,0.045); border-radius: 50%;
}
.auth-visual-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.auth-visual-top img { width: 56px; height: 56px; border-radius: 50%; background: #fff; }
.auth-visual-top .avt-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; }
.auth-visual-top .avt-sigle { color: var(--brand-gold-600); font-size: 12px; letter-spacing: 0.05em; margin-top: 2px; }

.auth-visual-mid { position: relative; z-index: 1; max-width: 440px; }
.auth-visual-mid h1 {
    font-size: 32px; color: #fff; line-height: 1.25; margin-bottom: var(--space-4);
}
.auth-visual-mid p { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.6; }
.auth-verses {
    display: flex; gap: var(--space-5); margin-top: var(--space-6);
    font-family: var(--font-display); font-style: italic; color: var(--brand-gold-600); font-size: 14px;
}

.auth-visual-bottom { position: relative; z-index: 1; color: rgba(255,255,255,0.45); font-size: 12.5px; }

.auth-form-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: var(--space-6) var(--space-5);
}
.auth-form-card { width: 100%; max-width: 400px; }
.auth-form-card .afc-header { margin-bottom: var(--space-6); }
.auth-form-card .afc-header h2 { font-size: 24px; margin-bottom: 6px; }
.auth-form-card .afc-header p { color: var(--ink-500); font-size: 14px; }

.auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: var(--space-6); }
.auth-mobile-brand img { width: 44px; height: 44px; border-radius: 50%; }
.auth-mobile-brand .amb-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--brand-green-800); }
.auth-mobile-brand .amb-sigle { font-size: 11px; color: var(--brand-terracotta-600); }

.auth-links-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); font-size: 13px; }
.auth-flash { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: var(--space-5); }
.auth-flash.success { background: var(--state-success-bg); color: var(--state-success); }
.auth-flash.error { background: var(--state-danger-bg); color: var(--state-danger); }

.auth-footer-note { margin-top: var(--space-6); font-size: 12px; color: var(--ink-400); text-align: center; }

@media (max-width: 900px) {
    .auth-visual { display: none; }
    .auth-mobile-brand { display: flex; }
    .auth-form-wrap { padding-top: var(--space-7); }
}