/*
|--------------------------------------------------------------------------
| Modal public de connexion
|--------------------------------------------------------------------------
| Style ivoire, or et vert.
*/

.public-login-modal {
    --login-green: #285e50;
    --login-green-dark: #1f473d;
    --login-gold: #b89143;
    --login-gold-soft: #fff6df;
    --login-ivory: #fffdf8;
    --login-bg: #f7f1e7;
    --login-text: #2f3e38;
    --login-muted: #7d817c;
    --login-border: #e3d8c7;
    --login-danger: #b84b4b;
    --login-danger-soft: #fff0ef;
}

.public-login-modal .modal-dialog {
    width: min(94vw, 520px);
    max-width: 520px;
    margin-inline: auto;
}

.public-login-modal .modal-content {
    overflow: hidden;
    color: var(--login-text);
    background:
        radial-gradient(circle at 95% 0, rgba(184,145,67,.13), transparent 15rem),
        var(--login-ivory);
    border: 1px solid var(--login-border);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(62,48,28,.24);
}

.public-login-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: linear-gradient(145deg, #fffdf8, #f6ecd9);
    border-bottom: 1px solid var(--login-border);
}

.public-login-modal__heading {
    min-width: 0;
}

.public-login-modal__kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
    padding: .35rem .65rem;
    margin-bottom: .75rem;
    color: #876823;
    background: var(--login-gold-soft);
    border: 1px solid #ead7a8;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.public-login-modal__title {
    margin: 0;
    color: var(--login-green-dark);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 900;
    line-height: 1.2;
}

.public-login-modal__subtitle {
    margin: .45rem 0 0;
    color: var(--login-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.public-login-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--login-green-dark);
    background: rgba(255,255,255,.72);
    border: 1px solid var(--login-border);
    border-radius: 12px;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.public-login-modal__close:hover {
    color: var(--login-danger);
    background: #fff;
    border-color: #e6bcbc;
    transform: rotate(4deg);
}

.public-login-modal__body {
    padding: 1.5rem;
}

.public-login-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 1.25rem;
    color: var(--login-green);
    background: #eaf3ef;
    border: 1px solid #cfe1da;
    border-radius: 20px;
    font-size: 1.55rem;
}

.public-login-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem .95rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    font-size: .84rem;
    line-height: 1.5;
}

.public-login-alert--danger {
    color: var(--login-danger);
    background: var(--login-danger-soft);
    border: 1px solid #efc7c4;
}

.public-login-alert > i {
    margin-top: .18rem;
}

.public-login-form {
    display: grid;
    gap: 1rem;
}

.public-login-field .form-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .45rem;
    color: var(--login-green-dark);
    font-size: .82rem;
    font-weight: 800;
}

.public-login-field .form-label i {
    color: var(--login-gold);
}

.public-login-input-wrap {
    position: relative;
}

.public-login-input-icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9b8c74;
    transform: translateY(-50%);
    pointer-events: none;
}

.public-login-control {
    min-height: 50px;
    padding: .75rem 1rem .75rem 2.7rem;
    color: var(--login-text);
    background: #fff;
    border: 1px solid var(--login-border);
    border-radius: 12px;
    box-shadow: none;
}

.public-login-input-wrap--password .public-login-control {
    padding-right: 3rem;
}

.public-login-control::placeholder {
    color: #aaa69f;
}

.public-login-control:focus {
    color: var(--login-text);
    background: #fff;
    border-color: #91b7a9;
    box-shadow: 0 0 0 .22rem rgba(40,94,80,.12);
}

.public-login-control.is-invalid {
    border-color: #d87a73;
    background-image: none;
}

.public-login-password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--login-green);
    background: transparent;
    border: 0;
    border-radius: 9px;
    transform: translateY(-50%);
}

.public-login-password-toggle:hover {
    background: #eef5f2;
}

.public-login-modal .invalid-feedback {
    margin-top: .35rem;
    color: var(--login-danger);
    font-size: .76rem;
}

.public-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
}

.public-login-modal .form-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 0;
    margin: 0;
}

.public-login-modal .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border-color: #bba98c;
    box-shadow: none;
}

.public-login-modal .form-check-input:checked {
    background-color: var(--login-green);
    border-color: var(--login-green);
}

.public-login-modal .form-check-label {
    color: var(--login-muted);
    font-size: .82rem;
}

.public-login-forgot-link {
    color: var(--login-green);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
}

.public-login-forgot-link:hover {
    color: var(--login-green-dark);
    text-decoration: underline;
}

.public-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 50px;
    width: 100%;
    margin-top: .15rem;
    padding: .75rem 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--login-green), var(--login-green-dark));
    border: 1px solid var(--login-green-dark);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(40,94,80,.18);
    font-weight: 850;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.public-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(40,94,80,.25);
}

.public-login-modal__security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.15rem;
    color: var(--login-muted);
    font-size: .72rem;
    line-height: 1.45;
    text-align: center;
}

.public-login-modal__security-note i {
    color: var(--login-gold);
}

@media (max-width: 575.98px) {
    .public-login-modal .modal-dialog {
        width: calc(100% - 1rem);
        margin: .5rem auto;
    }

    .public-login-modal__header,
    .public-login-modal__body {
        padding: 1.15rem;
    }

    .public-login-modal__icon {
        width: 58px;
        height: 58px;
        border-radius: 17px;
        font-size: 1.35rem;
    }

    .public-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Le backdrop reste derrière le modal */
.modal-backdrop {
    z-index: 1050 !important;
}

/* Le modal de connexion reste au-dessus du backdrop */
#loginModal.public-login-modal {
    z-index: 1060 !important;
}

/* Le contenu doit recevoir les clics */
#loginModal .modal-dialog,
#loginModal .modal-content {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* Le modal masqué ne doit jamais bloquer la page */
#loginModal:not(.show) {
    pointer-events: none;
}

/* Le modal visible reçoit normalement les interactions */
#loginModal.show {
    pointer-events: auto;
}
/* Le modal crée lui-même son fond assombri */
#loginModal.public-login-modal {
    z-index: 999999 !important;
    background: rgba(20, 28, 25, .58);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Modal visible */
#loginModal.public-login-modal.show {
    display: block !important;
    pointer-events: auto !important;
}

/* Contenu entièrement cliquable */
#loginModal .modal-dialog,
#loginModal .modal-content,
#loginModal .public-login-modal__body,
#loginModal form,
#loginModal input,
#loginModal button,
#loginModal a {
    pointer-events: auto !important;
}

/* Aucun backdrop Bootstrap ne doit rester */
body:has(#loginModal.show) > .modal-backdrop {
    display: none !important;
    pointer-events: none !important;
}

.public-login-alert {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1rem;
    margin-bottom: 1.15rem;
    color: #a63f3f;
    background: #fff0ef;
    border: 1px solid #efc7c4;
    border-radius: 12px;
}

.public-login-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #b84b4b;
    background: #ffe2df;
    border-radius: 10px;
}

.public-login-alert__content {
    min-width: 0;
    flex: 1 1 auto;
}

.public-login-alert__content strong {
    display: block;
    color: #923c3c;
    font-size: .88rem;
    font-weight: 850;
}

.public-login-alert__content p {
    color: #a14a4a;
    font-size: .8rem;
    line-height: 1.5;
}