/* Styles pour le système de notifications multiples */

.notifications-container {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 999;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column-reverse; /* Empile les notifications de bas en haut */
    gap: 0.75rem; /* Espacement entre les notifications */
    pointer-events: none; /* Permet de cliquer à travers le conteneur */
}

.notification {
    position: relative;
    padding: 1rem 1.5rem;
    border-style: solid;
    border-width: 4px;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 0h8v8H0V0zm0 0h4v4H0V0zm4 4h4v4H4V4z' fill='%23ff4500'/%3E%3C/svg%3E") 2 stretch;
    image-rendering: pixelated;
    font-size: 0.9rem;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    animation: notification-slide-in 0.3s ease-out forwards;
    display: flex;
    align-items: center;
    pointer-events: auto; /* Réactive les événements de pointeur */
    max-width: 100%;
    transform: translateX(0); /* Pour l'animation */
}

.notification::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 1.2rem;
}

.alert_error {
    background-color: rgba(204, 41, 54, 0.9);
    color: var(--light-color);
    border-color: var(--danger-color);
}

.alert_error::before {
    content: '\f06a';
    color: var(--light-color);
}

.alert_success {
    background-color: rgba(42, 157, 74, 0.9);
    color: var(--light-color);
    border-color: var(--success-color);
}

.alert_success::before {
    content: '\f058';
    color: var(--light-color);
}

.alert_warning {
    background-color: rgba(255, 183, 0, 0.9);
    color: var(--dark-color);
    border-color: var(--accent-color);
}

.alert_warning::before {
    content: '\f071';
    color: var(--dark-color);
}

/* Animation d'entrée */
@keyframes notification-slide-in {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation de sortie */
@keyframes notification-slide-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100px);
        opacity: 0;
    }
}

/* Adaptation pour les écrans mobiles */
@media (max-width: 768px) {
    .notifications-container {
        width: 95%;
        max-width: none;
        left: 0.5rem;
        bottom: 0.5rem;
    }
    
    .notification {
        padding: 0.8rem 1.2rem;
        font-size: 0.8rem;
    }
}