#snackbar-container {
    position: fixed;
    top: 70px;
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 2001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 520px; 
    max-width: 90%;
}

.snackbar {
    position: relative;
    padding-left: 50px; 
    padding-right: 50px; 
    padding-top: 15px;
    padding-bottom: 15px; 
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95em;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    overflow: hidden;

    /* MODIFICATION 2 : Centrer le texte horizontalement et le rendre flexible */
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre le contenu (le message) horizontalement */
    align-items: center; /* Centre verticalement si padding ou taille différente */
    text-align: center; /* Assure que le texte lui-même est centré si plusieurs lignes */

    /* Empêche les retours à la ligne pour le message principal (gère les messages courts/moyens) */
    white-space: nowrap; 
    
    /* Gérer l'overflow pour le texte */
    text-overflow: ellipsis; /* Ajouter des points de suspension si le texte est trop long */
    
    opacity: 0;
    transform: translateY(20px); 
    /*transition: all 1s 
    linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%
    50%
    , 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);; */
    animation: snackbarSlideDown 1s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%
    50%
    , 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);;
}

@keyframes snackbarSlideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes snackbarHide { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(0); } }

.snackbar span:first-child { 
    flex-grow: 1;
    text-align: center;
    overflow: hidden; 
    white-space: nowrap; 
}

.snackbar.show {
    opacity: 1;
    transform: translateY(0);
}

.snackbar.hide {
    animation: snackbarHide 2.5s ease-out;
}

/* Couleurs par type */
.snackbar-success {
    background-color: #34a853; /* Vert Google */
}
.snackbar-error {
    background-color: #ea4335; /* Rouge Google */
}
.snackbar-warning {
    background-color: #f9ab00; /* Jaune Google */
}
.snackbar-info {
    background-color: #1a73e8; /* Bleu Google */
}
/* 1. SUCCESS (Cercle vert avec un symbole de Coche (Nike) blanc) */
/* Styles de base pour toutes les icônes */
.snackbar::before {
    /* Nouvelle configuration pour Material Icons */
    font-family: 'Material Icons'; /* Spécifie la police des icônes */
    content: ''; /* Contenu par défaut (sera surchargé par type) */
    position: absolute;
    left: 15px; /* Positionner à gauche */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em; /* Taille légèrement plus grande pour l'icône */
    font-weight: normal; /* Important pour Material Icons */
    line-height: 1; 
    width: 30px; /* Espace réservé */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    z-index: 1; 
}

/* ------------------------------------------------------------- */
/* Définition des Icônes par Type */
/* ------------------------------------------------------------- */

/* 1. SUCCESS (Coche dans un cercle) */
.snackbar-success::before {
    /* Nom de l'icône Material : check_circle */
    content: 'check_circle'; 
    background: none; /* Pas de fond, l'icône est pleine */
    color: #fff; /* Couleur de l'icône en BLANC */
    font-size: 1.8em; /* Plus gros pour un meilleur impact */
    left: 10px;
}

/* 2. WARNING (Triangle d'avertissement) */
.snackbar-warning::before {
    /* Nom de l'icône Material : warning */
    content: 'warning'; 
    background: none; 
    color: #fff; /* Couleur de l'icône en BLANC */
    font-size: 1.8em;
    left: 10px;
}

/* 3. ERROR (Cercle avec un X) */
.snackbar-error::before {
    /* Nom de l'icône Material : highlight_off (ou 'cancel') */
    content: 'highlight_off'; 
    background: none; 
    color: #fff; /* Couleur de l'icône en BLANC */
    font-size: 1.8em;
    left: 10px;
}

/* 4. INFO (Cercle avec un 'i') */
.snackbar-info::before {
    /* Nom de l'icône Material : info */
    content: 'info';
    background: none;
    color: #fff;
    font-size: 1.8em;
    left: 10px;
}
/* Compteur de messages */
.snackbar-counter {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0,0,0,0.2);
    color: white;
    font-size: 11px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Barre de progression du minuteur */
.snackbar-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: rgba(255,255,255,0.5);
    width: 100%;
    animation: snackbarTimer 5s linear forwards;
}


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