/* --- Layout général (idem inscription) --- */
.auth-page {
    position: relative;
    min-height: calc(100vh - 72px); /* adapte à ta navbar */
    color: #fff;
    overflow: hidden;
}

.auth-bg {
    position: fixed;
    inset: 0;
    background-image: url('/images/hero/dev-hero.jpg'); /* ⚠️ remplace par ton chemin d'image */
    background-size: cover;
    background-position: center;
    filter: brightness(0.45);
    z-index: -2;
}

.auth-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 0, 82, .5), transparent 55%), radial-gradient(circle at bottom right, rgba(0, 140, 255, .5), transparent 55%), linear-gradient(120deg, rgba(6, 7, 10, .95), rgba(6, 7, 10, .94));
    z-index: -1;
    mix-blend-mode: multiply;
}

.auth-container {
    position: relative;
    z-index: 1;
}

.auth-title {
    letter-spacing: 0.02em;
}

.text-gradient {
    background: linear-gradient(90deg, #ff4b5c, #ff9a62);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-danger-soft {
    background: rgba(220, 53, 69, .14);
    color: #ffc2c7;
    border: 1px solid rgba(220, 53, 69, .35);
}

.text-light-75 {
    color: rgba(255, 255, 255, .75) !important;
}

.text-light-60 {
    color: rgba(255, 255, 255, .6) !important;
}

.icon-bullet {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    font-size: .85rem;
}

/* --- Carte login --- */
.auth-card {
    background: rgba(10, 12, 20, .96);
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 1.75rem 1.5rem;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .65);
}

@media (min-width: 992px) {
    .auth-card {
        padding: 2rem 2rem;
    }
}

.auth-card-header .h4 {
    color: #fff;
}

.auth-card .form-label,
.auth-card .form-text,
.auth-card small,
.auth-card .text-muted {
    color: rgba(255, 255, 255, .75) !important;
}

.input-group-soft .input-group-text,
.form-select-soft,
.form-control-soft {
    background-color: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.auth-card .form-control {
    background-color: rgba(8, 9, 15, .85);
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: .75rem;
}

    .auth-card .form-control:focus {
        border-color: #ff4b5c;
        box-shadow: 0 0 0 .15rem rgba(255, 75, 92, .25);
        background-color: rgba(4, 5, 10, .95);
    }

.input-group-text {
    border-radius: .75rem 0 0 .75rem;
}

.input-group-soft .form-control {
    border-radius: 0 .75rem .75rem 0;
}

.auth-card .form-check-input {
    cursor: pointer;
}

/* Bouton principal gradient */
.btn-gradient-primary {
    border: none;
    border-radius: .9rem;
    background-image: linear-gradient(120deg, #ff4b5c, #ff9a62);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(255, 75, 92, .5);
}

    .btn-gradient-primary:hover {
        filter: brightness(1.05);
        box-shadow: 0 18px 40px rgba(255, 75, 92, .7);
        color: #fff;
    }

    .btn-gradient-primary:active {
        transform: translateY(1px);
        box-shadow: 0 8px 18px rgba(255, 75, 92, .6);
    }

.auth-card .alert-danger {
    background-color: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .35);
    color: #ffc2c7;
    border-radius: .9rem;
}