/* ================================================================
   css/auth.css v7 — Pages d'authentification — Responsive
   Typographie : Inter (montants) + Outfit (UI)
   ================================================================ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --bg:      #070d07;
    --bg2:     #0e180e;
    --bg3:     #162016;
    --border:  #1e2e1e;
    --green:   #22c55e;
    --gold:    #f59e0b;
    --blue:    #38bdf8;
    --red:     #f87171;
    --text:    #e8f0e8;
    --text2:   #8fa88f;
    --text3:   #4a644a;
    --radius:  12px;
   

    /* Montants financiers : chiffres, KPIs */
    --font-ui:  'DM Sans', sans-serif;
    --font-num: 'DM Mono', monospace;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.auth-wrapper {
    width: 100%;
    max-width: 480px;
}

/* ── Logo ────────────────────────────────────────────────────── */
.auth-logo {
    text-align: center;
    margin-bottom: 28px;
}
.auth-logo-icon {
    font-size: 44px;
    display: block;
    margin-bottom: 10px;
}
.auth-logo-name {
    font-family: var(--font-ui);
    font-size: 34px;
    font-weight: 700;
    color: var(--green);
    line-height: 1;
}
.auth-logo-sub {
    font-size: 12px;
    color: var(--text3);
    margin-top: 6px;
}

/* ── Card ────────────────────────────────────────────────────── */
.auth-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 32px 28px;
}

/* ── Onglets connexion / inscription ─────────────────────────── */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: var(--bg3);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 26px;
}
.auth-tab {
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text3);
    background: transparent;
    transition: all .2s;
    text-align: center;
}
.auth-tab:hover  { color: var(--text2); }
.auth-tab.active { background: var(--green); color: #000; }

/* ── Titres de formulaire ────────────────────────────────────── */
.form-title {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.2;
    letter-spacing: -.2px;
}
.form-sub {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 22px;
    line-height: 1.6;
}

/* ── Champs de formulaire ────────────────────────────────────── */
.fg {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.fg label {
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.fg input,
.fg select {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    outline: none;
}
.fg input:focus,
.fg select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,197,94,.1);
}
.fg input::placeholder { color: var(--text3); }

/* ── Input avec bouton œil ───────────────────────────────────── */
.input-wrap {
    position: relative;
}
.input-wrap input {
    padding-right: 40px;
}
.input-wrap .toggle-pwd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    font-size: 15px;
    padding: 4px;
    line-height: 1;
    transition: color .15s;
}
.input-wrap .toggle-pwd:hover { color: var(--text2); }

/* ── Indicateur force mot de passe ──────────────────────────── */
.pwd-strength {
    margin-top: 6px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg3);
    overflow: hidden;
}
.pwd-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width .3s ease, background .3s ease;
}
.pwd-strength-label {
    font-size: 10px;
    color: var(--text3);
    margin-top: 4px;
    font-weight: 500;
}

/* ── Messages d'erreur et succès ─────────────────────────────── */
.form-errors {
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.3);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--red);
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 14px;
}
.form-errors.hidden { display: none; }

.form-success {
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--green);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 14px;
}
.form-success.hidden { display: none; }

/* ── Bouton principal ────────────────────────────────────────── */
.btn-auth {
    width: 100%;
    padding: 12px 16px;
    background: var(--green);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, transform .1s;
    margin-top: 6px;
    text-align: center;
    display: block;
    text-decoration: none;
}
.btn-auth:hover   { background: #16a34a; }
.btn-auth:active  { transform: scale(.98); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; }

/* ── Lien mot de passe oublié ────────────────────────────────── */
.forgot-link {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--text3);
    text-decoration: none;
    margin-top: -8px;
    margin-bottom: 16px;
    transition: color .15s;
}
.forgot-link:hover { color: var(--green); }

/* ── Règles de mot de passe ──────────────────────────────────── */
.rules-box {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--text2);
    line-height: 2;
    margin-bottom: 14px;
}
.rules-box strong { color: var(--text); }

/* ── Pied de page ────────────────────────────────────────────── */
.auth-footer {
    text-align: center;
    margin-top: 22px;
    font-size: 11px;
    color: var(--text3);
}

/* ── Page reset password : lien retour ───────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text3);
    text-decoration: none;
    margin-bottom: 22px;
    transition: color .15s;
}
.back-link:hover { color: var(--green); }

/* ── Grille 2 colonnes inscription (responsive) ──────────────── */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* ── Classe utilitaire hidden ────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive mobile ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    body { padding: 16px 12px; }

    .auth-card {
        padding: 22px 18px;
        border-radius: 12px;
    }
    .auth-logo-name { font-size: 28px; }
    .auth-logo-icon { font-size: 36px; }

    .form-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .auth-card  { padding: 18px 14px; }
    .form-title { font-size: 20px; }
}

/* ================================================================
   LANDING PAGE — Layout 2 colonnes
   ================================================================ */

body.has-landing {
    padding: 0;
    align-items: stretch;
    min-height: 100vh;
}

.landing-layout {
    display: grid;
    grid-template-columns: 1fr 480px;
    min-height: 100vh;
    width: 100%;
}

/* ── Colonne gauche ────────────────────────────────────────── */
.landing-left {
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    position: relative;
    overflow: hidden;
}

/* Fond décoratif */
.landing-left::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,197,94,.06) 0%, transparent 70%);
    pointer-events: none;
}
.landing-left::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,.05) 0%, transparent 70%);
    pointer-events: none;
}

.landing-inner {
    max-width: 540px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Logo landing (masqué, on a déjà auth-logo dans le formulaire) */
.landing-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}
.landing-logo-icon { font-size: 28px; }
.landing-logo-name {
    font-family: var(--font-num);
    font-size: 24px;
    font-weight: 700;
    color: var(--green);
}

/* Headline */
.landing-title {
    font-family: var(--font-num);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 16px;
}
.landing-title em {
    color: var(--green);
    font-style: italic;
}

.landing-desc {
    font-size: 14px;
    color: var(--text2);
    line-height: 1.8;
    margin-bottom: 28px;
    max-width: 440px;
}

/* Features list */
.landing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.landing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: fadeUp .4s ease both;
}
.landing-features li:nth-child(1) { animation-delay: .05s; }
.landing-features li:nth-child(2) { animation-delay: .1s; }
.landing-features li:nth-child(3) { animation-delay: .15s; }
.landing-features li:nth-child(4) { animation-delay: .2s; }

.feat-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}
.landing-features li div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.landing-features li strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.landing-features li span {
    font-size: 12px;
    color: var(--text3);
    line-height: 1.5;
}

/* Illustration SVG */
.landing-illustration {
    margin-bottom: 24px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    animation: fadeUp .5s ease both;
    animation-delay: .25s;
}
.landing-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Stats rapides */
.landing-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    animation: fadeUp .5s ease both;
    animation-delay: .3s;
}
.landing-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.stat-num {
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 700;
    color: var(--green);
    line-height: 1;
}
.stat-lbl {
    font-size: 10px;
    color: var(--text3);
    text-align: center;
}
.landing-stat-sep {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

/* ── Colonne droite ────────────────────────────────────────── */
.landing-right {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
    overflow-y: auto;
}
.landing-right .auth-wrapper {
    max-width: 420px;
    width: 100%;
}

/* ================================================================
   BOOTSTRAP DARK THEME OVERRIDES (landing page)
   ================================================================ */
body.has-landing { display: block; padding: 0; }
.form-control, .form-select {
    background: var(--bg3); border-color: var(--border); color: var(--text);
}
.form-control:focus, .form-select:focus {
    background: var(--bg3); color: var(--text);
    border-color: var(--green); box-shadow: 0 0 0 2px rgba(34,197,94,.15);
}

/* ================================================================
   RESPONSIVE landing — Bootstrap-aligned
   ================================================================ */
@media (max-width: 1199.98px) {
    .landing-layout { grid-template-columns: 1fr 420px; }
    .landing-title  { font-size: 34px; }
    .landing-left   { padding: 32px 32px; }
}

@media (max-width: 991.98px) {
    .landing-layout { grid-template-columns: 1fr 380px; }
    .landing-title  { font-size: 30px; }
    .landing-left   { padding: 28px 24px; }
    .landing-desc   { font-size: 13px; }
}

@media (max-width: 767.98px) {
    .landing-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .landing-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 28px 20px;
    }
    .landing-title    { font-size: 28px; }
    .landing-features { gap: 10px; }
    .landing-illustration { display: none; }
    .landing-stats    { gap: 0; }
    .landing-right    { padding: 24px 16px; }
    /* Auth form */
    .auth-wrapper { max-width: 100%; }
}

@media (max-width: 575.98px) {
    .landing-left     { padding: 20px 14px; }
    .landing-title    { font-size: 24px; }
    .landing-desc     { font-size: 13px; }
    .stat-num         { font-size: 18px; }
    .landing-stats    { padding: 10px 12px; flex-wrap: wrap; }
    .landing-stat     { min-width: 60px; }
    .landing-features li { gap: 8px; }
    .feat-icon { width: 32px; height: 32px; font-size: 15px; }
}

@media (max-width: 380px) {
    .landing-title { font-size: 20px; }
    .landing-left  { padding: 16px 10px; }
    .landing-right { padding: 16px 10px; }
    .auth-tabs button { font-size: 12px; padding: 10px; }
}