/* Styles de la modale */

.devils-modal {
    background-color: var(--color-background);
    border: 3px solid var(--color-highlight);
    box-shadow: 0 10px 30px rgba(255, 85, 0, 0.3);

    .modal-header {
        background-color: var(--color-text);
        padding: 20px;
        text-align: center;

        .modal-title {
            color: var(--color-background) !important;
        }
    }

    .modal-body {
        padding: 30px;
        text-align: center;
        background-color: var(--color-background);
    }

    .modal-footer {
        border-top: none;
        background-color: var(--color-background);
        padding: 20px 30px;
        text-align: center;
    }

    .submit-btn {
        font-size: 1.5rem;
        padding: 12px 30px;
    }
}

.modal-logo {
    height: 60px;
    width: auto;
}

.modal-title {
    font-family: var(--font-tertiary);
    font-size: 2.5rem;
    color: var(--color-highlight);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.modal-message {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 15px;
}

.modal-tagline {
    font-family: var(--font-tertiary);
    font-size: 1rem;
    color: var(--color-highlight);
    font-style: italic;
}

/* Animation d'entrée */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translate(0, -50px) scale(0.95);
}

.modal.show .modal-dialog {
    transform: translate(0, 0) scale(1);
}