/* ============================================================
   assets/css/flash.css — Messages flash
   ============================================================ */

.flash-container {
    position: fixed;
    top: calc(var(--nav-height) + var(--sp-4));
    right: var(--sp-6);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 380px;
    width: calc(100% - var(--sp-8));
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid;
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    animation: flashIn 220ms cubic-bezier(.4,0,.2,1) forwards;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.flash::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.3;
    animation: flashBar 4s linear forwards;
}

@keyframes flashIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes flashBar {
    from { width: 100%; }
    to   { width: 0%; }
}

.flash--success { background: var(--clr-success-bg); border-color: var(--clr-success-border); color: var(--clr-success); }
.flash--danger  { background: var(--clr-danger-bg);  border-color: var(--clr-danger-border);  color: var(--clr-danger); }
.flash--warning { background: var(--clr-warning-bg); border-color: var(--clr-warning-border); color: var(--clr-warning); }
.flash--info    { background: var(--clr-info-bg);    border-color: var(--clr-info-border);    color: var(--clr-info); }

.flash__icon { flex-shrink: 0; font-size: 0.9rem; margin-top: 1px; }
.flash__msg  { flex: 1; color: var(--clr-text); }

.flash.is-closing {
    animation: flashOut 200ms ease forwards;
}
@keyframes flashOut {
    to { opacity: 0; transform: translateX(24px); max-height: 0; padding: 0; margin: 0; }
}

/* Panel : flash dans le contenu */
.flash-wrapper {
    padding: 0 var(--sp-6) var(--sp-2);
}
.flash-wrapper .flash {
    position: static;
    animation: flashInTop 220ms ease forwards;
}
@keyframes flashInTop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}