/**
 * Styles pour la modal de messages techniques
 * Moderne et accessible
 */

/* ========================================
   Animation de la modal
   ======================================== */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: none;
}

/* ========================================
   Styles des messages
   ======================================== */
.msgcorps {
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Types de messages avec couleurs distinctes */
.alert-info {
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
    color: var(--bs-info);
}

.alert-warning {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning);
}

.alert-danger {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger);
}

.alert-success {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-success);
}

/* Images dans les alertes */
.alert img {
    flex-shrink: 0;
}

/* ========================================
   Footer de la modal
   ======================================== */
.modal-footer .text-muted {
    font-size: 0.875rem;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .alert {
        flex-direction: column;
        text-align: left;
    }

    .alert img {
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   Accessibilité
   ======================================== */
.modal:focus {
    outline: 2px solid transparent;
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem var(--bs-body-bg);
}

/* Amélioration du contraste pour WCAG AA */
.alert-info a,
.alert-warning a,
.alert-danger a,
.alert-success a {
    text-decoration: underline;
    font-weight: 500;
}

/* ========================================
   Animation du badge
   ======================================== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

#btn-messages-modal .badge {
    animation: pulse 2s infinite;
}