/* ===========================================================================
   KL Theme Manager — Volet connexion / inscription (drawer droit)
   Tokens Figma : Futura (UI), Snell Roundhand (titre), bouton noir, soulignés.
   =========================================================================== */

.kl-auth {
    --kl-black: #000;
    --kl-line: #111;
    --kl-muted: #8a8a8a;
    --kl-burgundy: #582432;
    --kl-font-ui: "Futura", "Futura PT", "Jost", "Century Gothic", "Avenir Next", sans-serif;
    --kl-font-script: "Snell Roundhand", "Snell BT", "Apple Chancery", "Segoe Script", cursive;

    position: fixed;
    inset: 0;
    z-index: 100000;
    font-family: var(--kl-font-ui);
    color: var(--kl-black);
}
.kl-auth[hidden] { display: none; }
.kl-auth *, .kl-auth *::before, .kl-auth *::after { box-sizing: border-box; }

/* Déclencheur de test invisible (coin bas-gauche) */
.kl-auth-test-trigger {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    z-index: 99999;
}

.kl-auth-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    opacity: 0;
    transition: opacity .3s ease;
}

.kl-auth-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 580px;
    max-width: 92vw;
    background: #fff;
    transform: translateX(100%);
    transition: transform .35s ease;
    overflow-y: auto;
    padding: 30px 34px 48px;
    display: flex;
    flex-direction: column;
}

.kl-auth.is-open .kl-auth-overlay { opacity: 1; }
.kl-auth.is-open .kl-auth-drawer { transform: translateX(0); }

/* ── Tête ────────────────────────────────────────────────────────────────── */

.kl-auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e3e3e3;
}
.kl-auth-title {
    font-family: var(--kl-font-script);
    font-size: 30px;
    line-height: 1;
    color: var(--kl-black);
}
.kl-auth-x {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--kl-black);
    line-height: 1;
    padding: 4px;
}
.kl-auth-x .material-icons { font-size: 22px; }

/* ── Vues (connexion / inscription) ──────────────────────────────────────── */

.kl-auth-view { display: none; }
.kl-auth-view.is-active { display: block; }

/* ── Champs ──────────────────────────────────────────────────────────────── */

.kl-auth .kl-field { position: relative; margin-bottom: 26px; }
.kl-auth .kl-field input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--kl-line);
    background: transparent;
    padding: 8px 0;
    font-family: var(--kl-font-ui);
    font-size: 16px;
    letter-spacing: .8px;
    color: var(--kl-black);
    border-radius: 0;
}
.kl-auth .kl-field input:focus { outline: none; border-bottom-color: var(--kl-burgundy); }
.kl-auth .kl-field input::placeholder { color: var(--kl-muted); }

.kl-auth .kl-field--password input { padding-right: 32px; }
.kl-auth .kl-eye {
    position: absolute;
    right: 0;
    top: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--kl-muted);
    line-height: 1;
}
.kl-auth .kl-eye .material-icons { font-size: 20px; }
.kl-auth .kl-eye:hover { color: var(--kl-black); }

.kl-auth .kl-genders { display: flex; gap: 34px; margin-bottom: 30px; }
.kl-auth .kl-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: .8px;
}
.kl-auth .kl-radio input { position: absolute; opacity: 0; pointer-events: none; }
.kl-auth .kl-radio-dot {
    width: 15px;
    height: 15px;
    border: 1px solid var(--kl-black);
    border-radius: 50%;
}
.kl-auth .kl-radio input:checked + .kl-radio-dot { background: var(--kl-black); box-shadow: inset 0 0 0 3px #fff; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.kl-auth .kl-btn {
    display: block;
    width: 100%;
    min-height: 72px;
    padding: 14px 24px;
    border: 1px solid var(--kl-black);
    background: var(--kl-black);
    color: #fff;
    font-family: var(--kl-font-ui);
    font-size: 16px;
    letter-spacing: .8px;
    text-align: left;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.kl-auth .kl-btn:hover { background: #fff; color: var(--kl-black); }
.kl-auth .kl-btn[disabled] { opacity: .55; cursor: default; }
.kl-auth .kl-auth-submit { margin-top: 16px; }
.kl-auth .kl-btn--ghost { background: transparent; color: var(--kl-black); margin-top: 14px; }
.kl-auth .kl-btn--ghost:hover { background: var(--kl-black); color: #fff; }

/* Messages d'erreur */
.kl-auth-errors {
    margin-bottom: 22px;
    padding: 12px 16px;
    border: 1px solid var(--kl-burgundy);
    background: #fbf4f5;
    color: var(--kl-burgundy);
    font-size: 14px;
    letter-spacing: .3px;
}
.kl-auth-errors p { margin: 3px 0; }

/* Plein écran sur mobile */
@media (max-width: 600px) {
    .kl-auth-drawer { width: 100vw; max-width: 100vw; padding: 22px 22px 40px; }
    .kl-auth .kl-btn { min-height: 64px; }
    .kl-auth-title { font-size: 32px; }
}