/* Toast Notification Design */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: white;
    padding: 16px 24px;
    border-radius: 18px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid #2563eb;
    transform: translateX(120%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.show {
    transform: translateX(0);
}

/* Style de la bannière principale */
.hero-banner { 
    position: relative; 
    background: white; 
    border-radius: 24px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    min-height: 220px; 
    border: 1px solid #e2e8f0; 
}

/* Style de l'image des lutteurs */
.hero-image { 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 70%; 
    background-image: url('https://4appuistv.com/4appuistv/images/lutteurs.png'); 
    background-size: cover; 
    background-position: right top; 
    opacity: 0.85; 
    z-index: 1;
    /* Création du fondu transparent vers la gauche */
    -webkit-mask-image: linear-gradient(to left, black 40%, transparent 100%);
    mask-image: linear-gradient(to left, black 40%, transparent 100%);
}

/* Force le contenu à passer devant l'image */
.hero-content {
    position: relative;
    z-index: 10;
}

.toast-success { border-left-color: #10b981; }
.toast-error { border-left-color: #ef4444; }