/* ============================================================
    AUTH.CSS — Wokoli
    Bootstrap 5 CDN + variables.css
    ============================================================ */

    /* ---- Reset body pour layout plein écran ---- */
    body {
        background: var(--bg-root);
        min-height: 100vh;
    }

    /* Override du wrapper centré de auth_base */
    .d-flex.align-items-center.justify-content-center.min-vh-100.p-3 {
        display: block !important;
        padding: 0 !important;
        min-height: unset !important;
    }

    .auth-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* ============================================================
    FOND ANIMÉ
    ============================================================ */
    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    .bg-animation {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--bg-root);
        pointer-events: none;
    }

    /* ============================================================
    LAYOUT — 2 colonnes desktop
    ============================================================ */
    .wk-login-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 100vh;
    }

    /* ---- Colonne gauche ---- */
    .wk-login-left {
        position: relative;
        background: linear-gradient(145deg, #0f0d08 0%, #1a1200 50%, #0f0d08 100%);
        display: flex;
        flex-direction: column;
        padding: 3rem 3.5rem;
        overflow: hidden;
    }

    .wk-login-left::before {
        content: '';
        position: absolute;
        top: -180px;
        right: -180px;
        width: 560px;
        height: 560px;
        background: radial-gradient(circle, rgba(255, 126, 0, .09) 0%, transparent 65%);
        pointer-events: none;
    }

    .wk-login-left::after {
        content: '';
        position: absolute;
        bottom: -120px;
        left: -80px;
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, rgba(255, 61, 0, .06) 0%, transparent 65%);
        pointer-events: none;
    }

    /* Logo */
    .wk-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: auto;
    }

    .wk-brand__icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }

    .wk-brand__name {
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        color: var(--primary);
    }

    .wk-brand__name span {
        color: var(--primary);
    }

    /* Hero */
    .wk-login-hero {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 0 2rem;
        position: relative;
        z-index: 1;
    }

    .wk-login-hero__title {
        font-size: 2.4rem;
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.04em;
        line-height: 1.15;
        margin-bottom: 0.5rem;
    }

    .wk-login-hero__title .accent {
        color: var(--primary);
    }

    .wk-login-hero__sub {
        font-size: 0.95rem;
        color: var(--text-secondary);
        margin-bottom: 2.5rem;
        line-height: 1.6;
        max-width: 380px;
    }

    /* Features list */
    .wk-feature-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .wk-feature-item {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .wk-feature-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: rgba(255, 126, 0, 0.10);
        border: 1px solid rgba(255, 126, 0, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .wk-feature-text strong {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-primary);
        display: block;
        letter-spacing: -0.01em;
    }

    .wk-feature-text span {
        font-size: 0.78rem;
        color: var(--text-muted);
    }

    /* ---- Colonne droite ---- */
    .wk-login-right {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 2.5rem;
        background: var(--bg-root);
    }

    .wk-login-form-wrap {
        width: 100%;
        max-width: 420px;
        position: relative;
    }

    .wk-login-form-wrap>h1 {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.04em;
        margin-bottom: 4px;
    }

    .wk-subtitle {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 2rem;
    }

    /* ============================================================
    CHAMPS
    ============================================================ */
    .wk-field {
        margin-bottom: 1.1rem;
    }

    .wk-field label {
        display: block;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

    .wk-field .wk-input-wrap {
        position: relative;
    }

    .wk-field input {
        width: 100%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: var(--radius-xl);
        padding: .85rem 1.1rem;
        color: var(--text-primary);
        font-family: var(--font-main);
        font-size: .9rem;
        outline: none;
        transition: border-color var(--t-fast), box-shadow var(--t-fast);
        -webkit-appearance: none;
    }

    .wk-field input::placeholder {
        color: var(--text-muted);
    }

    .wk-field input:focus {
        border-color: var(--border-strong);
        box-shadow: 0 0 0 3px rgba(255, 126, 0, .12);
    }

    .wk-field input.is-invalid {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 3px rgba(231, 76, 60, .12);
    }

    .wk-field .toggle-pw {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 16px;
        padding: 0;
        transition: color var(--t-fast);
    }

    .wk-field .toggle-pw:hover {
        color: var(--primary);
    }

    .wk-field-error {
        display: block;
        color: var(--color-danger);
        font-size: 0.78rem;
        margin-top: 5px;
    }

    /* Mot de passe oublié */
    .wk-forgot {
        text-align: right;
        margin-top: -.5rem;
        margin-bottom: 1.5rem;
    }

    .wk-forgot a {
        font-size: .82rem;
        color: var(--primary);
        font-weight: 600;
        text-decoration: none;
        transition: color var(--t-fast);
    }

    .wk-forgot a:hover {
        color: var(--primary-light);
    }

    /* ============================================================
    BOUTON PRINCIPAL
    ============================================================ */
    .wk-btn-login {
        width: 100%;
        padding: .9rem;
        background: var(--primary);
        color: #0a0a0a;
        font-family: var(--font-main);
        font-size: 1rem;
        font-weight: 800;
        border: none;
        border-radius: var(--radius-pill);
        cursor: pointer;
        transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
        letter-spacing: -.01em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 0;
    }

    .wk-btn-login:hover:not(:disabled) {
        background: var(--primary-light);
        box-shadow: 0 6px 22px rgba(255, 126, 0, .38);
        transform: translateY(-1px);
        color: #0a0a0a;
    }

    .wk-btn-login:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: none;
    }

    .wk-btn-login:disabled {
        opacity: .7;
        cursor: not-allowed;
        transform: none;
    }

    /* Spinner dans le bouton */
    @keyframes wk-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .wk-spinner {
        width: 18px;
        height: 18px;
        border: 2px solid rgba(10, 10, 10, .25);
        border-top-color: #0a0a0a;
        border-radius: 50%;
        animation: wk-spin .7s linear infinite;
        display: none;
        flex-shrink: 0;
    }

    .wk-btn-login.loading .wk-spinner {
        display: block;
    }

    .wk-btn-login.loading .btn-label {
        display: none;
    }

    /* Bouton Google */
    .wk-btn-google {
        width: 100%;
        padding: .85rem;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: var(--radius-pill);
        color: var(--text-primary);
        font-family: var(--font-main);
        font-size: .9rem;
        font-weight: 700;
        cursor: pointer;
        transition: background var(--t-fast), border-color var(--t-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
    }

    .wk-btn-google:hover {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .16);
        color: var(--text-primary);
    }

    .wk-g-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Divider "ou" */
    .wk-sep {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 1.3rem 0;
    }

    .wk-sep::before,
    .wk-sep::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-default);
    }

    .wk-sep span {
        font-size: .78rem;
        color: var(--text-muted);
        font-weight: 600;
        letter-spacing: .04em;
    }

    /* ============================================================
    PIED DE FORMULAIRE
    ============================================================ */
    .wk-signup-cta {
        text-align: center;
        margin-top: 1.4rem;
        font-size: .875rem;
        color: var(--text-secondary);
        margin-bottom: 0;
    }

    .wk-signup-cta a {
        color: var(--primary);
        font-weight: 700;
        text-decoration: none;
    }

    .wk-signup-cta a:hover {
        text-decoration: underline;
    }

    /* ============================================================
    BLOCS INFO / ALERTE (password reset pages)
    ============================================================ */
    .wk-info-block {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        padding: .85rem 1rem;
        border-radius: var(--radius-md);
        font-size: .875rem;
        border-left: 3px solid transparent;
    }

    .wk-info-block i {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .wk-info-success {
        background: var(--color-success-bg);
        border-left-color: var(--color-success);
        color: var(--color-success);
    }

    .wk-info-danger {
        background: var(--color-danger-bg);
        border-left-color: var(--color-danger);
        color: var(--color-danger);
    }

    .wk-info-warning {
        background: var(--color-warning-bg);
        border-left-color: var(--color-warning);
        color: var(--color-warning);
    }

    .wk-info-info {
        background: var(--color-info-bg);
        border-left-color: var(--color-info);
        color: var(--color-info);
    }

    /* Alias pour rétrocompatibilité */
    .wk-alert {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        padding: .85rem 1rem;
        border-radius: var(--radius-md);
        font-size: .875rem;
        border-left: 3px solid transparent;
    }

    .wk-alert i {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .wk-alert-success {
        background: var(--color-success-bg);
        border-left-color: var(--color-success);
        color: var(--color-success);
    }

    .wk-alert-danger {
        background: var(--color-danger-bg);
        border-left-color: var(--color-danger);
        color: var(--color-danger);
    }

    .wk-alert-info {
        background: var(--color-info-bg);
        border-left-color: var(--color-info);
        color: var(--color-info);
    }

    /* ============================================================
    TEXTE D'AIDE
    ============================================================ */
    .wk-hint {
        font-size: .875rem;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    /* ============================================================
    INDICATEUR DE FORCE (password reset confirm)
    ============================================================ */
    .wk-strength {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    .wk-strength__bar {
        flex: 1;
        height: 4px;
        background: rgba(255, 255, 255, .08);
        border-radius: var(--radius-pill);
        overflow: hidden;
    }

    .wk-strength__fill {
        height: 100%;
        border-radius: var(--radius-pill);
        transition: width .3s ease, background .3s ease;
        width: 0%;
    }

    .wk-strength__label {
        font-size: .75rem;
        font-weight: 600;
        white-space: nowrap;
        min-width: 56px;
        text-align: right;
    }

    /* ============================================================
    LIEN RETOUR DESKTOP (fixe)
    ============================================================ */
    .wk-back-desktop {
        display: none;
        /* affiché via media query */
    }

    /* ============================================================
    MOBILE — version carte unique
    ============================================================ */
    @media (max-width: 791px) {
        .wk-login-layout {
            grid-template-columns: 1fr;
            min-height: 100vh;
        }

        .wk-login-left {
            display: none;
        }

        .wk-login-right {
            padding: 0;
            align-items: flex-start;
            background: var(--bg-root);
        }

        .wk-login-form-wrap {
            max-width: 100%;
            padding: 2rem 1.4rem;
        }

        /* Mobile top band */
        .wk-mobile-top {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .wk-back-link {
            font-size: .82rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
            transition: color var(--t-fast);
        }

        .wk-back-link:hover {
            color: var(--text-secondary);
        }

        .wk-mobile-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .wk-mobile-brand img {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
        }

        .wk-mobile-brand .name {
            font-size: 1.3rem;
            font-weight: 800;
            letter-spacing: -.04em;
            color: var(--text-primary);
        }

        .wk-mobile-brand .name span {
            color: var(--primary);
        }

        .wk-mobile-hero h1 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -.04em;
            line-height: 1.1;
            margin: 0 0 4px;
        }

        .wk-mobile-hero p {
            font-size: .875rem;
            color: var(--text-secondary);
            margin: 0;
        }

        /* Cache les éléments desktop dans la colonne droite */
        .wk-login-form-wrap>h1,
        .wk-login-form-wrap>.wk-subtitle {
            display: none;
        }
    }

    /* Desktop — cache le bandeau mobile */
    @media (min-width: 792px) {
        .wk-mobile-top {
            display: none;
        }

        .wk-back-desktop {
            display: flex;
            position: fixed;
            top: 1.5rem;
            left: 1.75rem;
            font-size: .82rem;
            color: var(--text-muted);
            align-items: center;
            gap: 5px;
            text-decoration: none;
            transition: color var(--t-fast);
            z-index: 10;
        }

        .wk-back-desktop:hover {
            color: var(--text-secondary);
        }
    }

    /* ============================================================
    TABLETTE intermédiaire
    ============================================================ */
    @media (min-width: 792px) and (max-width: 1100px) {
        .wk-login-left {
            padding: 2.5rem 2rem;
        }

        .wk-login-right {
            padding: 2.5rem 2rem;
        }

        .wk-login-hero__title {
            font-size: 2rem;
        }
    }