/**
 * Toasts / flash messages — style aligné play-toast
 * Mobile / tablette portrait : carte en bas (inchangé).
 * Desktop + tablette paysage : bannière pleine largeur sur la nav.
 */

.toast-container .toast,
.play-toasts .play-toast {
    display: none;
}

.toast-container .toast.is-visible,
.play-toasts .play-toast.is-visible {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    column-gap: 0.6rem;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.25;
    box-shadow: var(--shadow-card);
    pointer-events: auto;
    animation: toast-in 0.3s ease;
}

.toast-container .toast[data-type="success"],
.play-toasts .play-toast--success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.toast-container .toast[data-type="error"],
.play-toasts .play-toast--error {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.toast-container .toast[data-type="info"],
.play-toasts .play-toast--info {
    background: var(--color-secondary-deep);
    border-color: var(--color-secondary-deep);
    color: #fff;
}

.toast-container .toast[data-type] .toast__close,
.play-toasts .play-toast--success .play-toast__close,
.play-toasts .play-toast--error .play-toast__close,
.play-toasts .play-toast--info .play-toast__close {
    color: rgba(255, 255, 255, 0.85);
}

.toast-container .toast .toast__icon,
.play-toasts .play-toast__icon {
    grid-column: 2;
    justify-self: center;
    line-height: 1;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-container .toast .toast__text,
.play-toasts .play-toast__text {
    grid-column: 3;
    justify-self: center;
    text-align: center;
}

.toast-container .toast .toast__close,
.play-toasts .play-toast__close {
    grid-column: 4;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
}

.toast-container .toast .toast__close:active,
.play-toasts .play-toast__close:active {
    transform: scale(0.95);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop + tablette paysage : bannière nav */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
    .toast-container,
    .play-toasts {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: none;
        height: 3.5rem;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        gap: 0;
    }

    .toast-container .toast.is-visible,
    .play-toasts .play-toast.is-visible {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        padding: 0 1rem;
        align-items: center;
        border-radius: 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: var(--shadow);
        animation: toast-in-banner 0.3s ease;
    }

}

@keyframes toast-in-banner {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}