/*------------------------------
TOAST / SNACKBAR
------------------------------*/

.snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333333E6;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px 25px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

.snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


/*------------------------------
TOOLTIP
------------------------------*/

/* Cible les attributs "data-tooltip" */

[data-tooltip] {
    position: relative;
}

[data-tooltip]:after {
    opacity: 0;
    font-size: var(--font-body-defaut);
    font-weight: 400;
    visibility: hidden;
    position: absolute;
    content: attr(data-tooltip);
    padding: 6px 10px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-18px);
    background: rgb(71, 71, 71);
    color: white;
    white-space: nowrap;
    z-index: 5;
    border-radius: 2px;
    transition: opacity 0.3s cubic-bezier(.64,.09,.08,1), transform 0.3s cubic-bezier(.64,.09,.08,1);
}
[data-tooltip]:hover::after {
    display: inline-block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

/* [data-tooltip]::before {
    content: '';
    width: 0;
    height: 0;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-top: solid 5px rgb(71, 71, 71);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: translateX(-50%) translateY(-18px);
    bottom: 85%;
    left: 50%;
    transition: opacity 0.3s cubic-bezier(.64,.09,.08,1), transform 0.3s cubic-bezier(.64,.09,.08,1);
    z-index: 5;
}
[data-tooltip]:hover::before {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
    
} */