/* ui.css — companion to public/js/ui.js */

/* Loading bar that appears at the top of the page during navigations */
.ui-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        #E30613,
        #ff6b6b,
        #E30613,
        transparent);
    background-size: 200% 100%;
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 100;
    pointer-events: none;
    animation: ui-loading-bar-progress 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               ui-loading-bar-shimmer 1.2s linear infinite;
}
.ui-loading-bar.ui-loading-bar-done {
    animation: ui-loading-bar-finish 200ms ease-out forwards;
}
@keyframes ui-loading-bar-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(0.85); }
}
@keyframes ui-loading-bar-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@keyframes ui-loading-bar-finish {
    from { transform: scaleX(0.85); opacity: 1; }
    to   { transform: scaleX(1);    opacity: 0; }
}

/* Toast enter/leave */
.ui-toast {
    animation: ui-toast-enter 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-toast-leaving {
    animation: ui-toast-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes ui-toast-enter {
    from { opacity: 0; transform: translateX(2rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ui-toast-leave {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(2rem); }
}
/* Mobile : le toast monte depuis la barre d'onglets au lieu d'arriver par la droite */
@media (max-width: 1023px) {
    @keyframes ui-toast-enter {
        from { opacity: 0; transform: translateY(1rem); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes ui-toast-leave {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(1rem); }
    }
}
@keyframes ui-toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Modal enter/leave */
.ui-modal-backdrop {
    animation: ui-modal-fade-in 150ms ease-out;
}
.ui-modal-wrap > .ui-modal-card {
    animation: ui-modal-pop-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-modal-leaving {
    animation: ui-modal-fade-out 150ms ease-in forwards;
}
@keyframes ui-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ui-modal-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes ui-modal-pop-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
/* Mobile : la boîte de confirmation est une feuille qui glisse depuis le bas */
@media (max-width: 639px) {
    .ui-modal-wrap > .ui-modal-card {
        animation: ui-modal-slide-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
    }
}
@keyframes ui-modal-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}