/* ==============================
   MODALE INACTIVITÉ
============================== */

#inactivityModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;

    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
}

/* Conteneur */

#inactivityModal .modal-dialog {
    width: 100%;
    max-width: 440px;
    margin: auto;
}

/* Carte */

#inactivityModal .modal-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 28px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);

    border: 1px solid #e8e8e8;

    animation: inactivityAppear 0.25s ease-out;
}

/* En-tête */

#inactivityModal .modal-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}

#inactivityModal .modal-title {
    font-size: 19px;
    font-weight: 600;
    color: #333333;
    margin: 0;
}

/* Corps */

#inactivityModal .modal-body {
    padding-top: 18px;
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
}

#inactivityModal .modal-body p {
    margin: 0 0 12px;
}

/* Compte à rebours */

#inactivityModal #countdown {
    display: inline-block;
    min-width: 24px;

    font-size: 18px;
    font-weight: 700;
    color: #dc6b35;

    text-align: center;
}

/* Bouton */

#inactivityModal #stayConnectedBtn {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 20px;

    background: #315f8c;
    color: #ffffff;

    border: none;
    border-radius: 5px;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
    transition: background 0.2s ease;
}

#inactivityModal #stayConnectedBtn:hover {
    background: #244969;
}

#inactivityModal #stayConnectedBtn:focus-visible {
    outline: 3px solid rgba(49, 95, 140, 0.3);
    outline-offset: 3px;
}

/* Animation */

@keyframes inactivityAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */

@media (max-width: 480px) {

    #inactivityModal {
        padding: 15px;
    }

    #inactivityModal .modal-content {
        padding: 20px;
    }

}