/*
 * Rôle    : Style des notifications/messages flash/toasts.
 * Scope   : Global, partout où django.contrib.messages est rendu.
 * Charge  : main/templates/main/bases/base.html (ligne 137, via {% static %})
 * Dépend  : main/static/js/notifications.js (animations, dismissal)
 */

/* ------------------------------------------------------------------ */
/* Keyframes — animations d'entrée, de shimmer (effet brillant) et de  */
/* sortie. Couplées au cycle de vie déclenché côté JS (apparition à    */
/* l'arrivée du message, fade-out programmé ou au clic de fermeture).  */
/* ------------------------------------------------------------------ */

/* Entrée latérale rebondissante depuis la droite avec léger overshoot. */
@keyframes bounce-in {
    0% {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateX(-10%) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Reflet brillant qui traverse la notif en diagonale (bande oblique).  */
@keyframes shimmer {
    0% {
        transform: translateX(-150%) skewX(-12deg);
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        transform: translateX(150%) skewX(-12deg);
        opacity: 0;
    }
}

/* Disparition vers la droite avec scale down — symétrique de bounce-in. */
@keyframes fade-out {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
}

/* ------------------------------------------------------------------ */
/* Classes utilitaires — appliquées/retirées par notifications.js pour */
/* déclencher chaque keyframe au bon moment du cycle de vie.            */
/* ------------------------------------------------------------------ */

/* Appliquée à l'apparition de la notif. cubic-bezier overshoot pour    */
/* un effet rebond marqué.                                              */
.animate-bounce-in {
    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Boucle infinie sur l'élément réflecteur (typiquement un overlay      */
/* enfant de la notif) — tant que la notif est visible.                 */
.animate-shimmer {
    animation: shimmer 3s infinite;
}

/* `forwards` conserve l'état final (opacity 0) pour éviter un flash    */
/* avant suppression du DOM par le JS.                                  */
.animate-fade-out {
    animation: fade-out 0.4s ease-in-out forwards;
}

/* ------------------------------------------------------------------ */
/* Overlay de progression — barre/voile qui se rétracte avec le temps  */
/* restant avant auto-dismiss. Largeur/opacité pilotées par le JS.     */
/* z-index:5 pour passer au-dessus du fond mais sous le bouton close.  */
/* ------------------------------------------------------------------ */
.progress-overlay {
    border-radius: 0.5rem;
    z-index: 5;
}

/* ------------------------------------------------------------------ */
/* Interaction — zoom léger au survol pour signaler que la notif est   */
/* cliquable (fermeture/lien). Transition dupliquée sur le sélecteur   */
/* de base afin que le retour à scale(1) soit aussi animé au mouseout. */
/* ------------------------------------------------------------------ */
.notification-item:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease-out;
}

.notification-item {
    transition: transform 0.2s ease-out;
}