#consent-badge {
    position: fixed;
    top: 7vh; /* Position verticale fixée */
    left: 50%; /* Centrage horizontal */
    transform: translate(-50%, -100%); /* Hors de l’écran, vers le haut */
    padding: 8px;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #FFF;
    color: #333;
    font-size: .875rem;
    font-weight: 500;
    font-family: 'Afacad', sans-serif;
    display: none;
    align-items: center;
    z-index: 999;
    opacity: 0;
}

/* Animation d’entrée : du haut vers le bas */
@keyframes badgeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Animation de sortie : vers le haut */
@keyframes badgeOut {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
}

/* Classe pour animation d’entrée */
#consent-badge.animate-in {
    display: flex;
    animation: badgeIn 0.6s ease-out forwards;
}

/* Classe pour animation de sortie */
#consent-badge.animate-out {
    animation: badgeOut 0.6s ease-in forwards;
}

/* État visible */
#consent-badge.show {
    display: flex;
    opacity: 1;
    transform: translate(-50%, 0);
}

/* État masqué */
#consent-badge.hide {
    opacity: 0;
    transform: translate(-50%, -100%);
}

/* Icônes par statut */
#consent-badge .icon {
    margin-right: 8px;
    font-family: 'Phosphor-Light', sans-serif !important;
    font-size: 16px;
}

body.cmplz-marketing.cmplz-statistics.cmplz-preferences #consent-badge .icon::before {
    content: '\E182';
}
body.cmplz-marketing.cmplz-statistics.cmplz-preferences #consent-badge .label::after {
    content: "  Consentement complet";
}

body.cmplz-statistics:not(.cmplz-marketing):not(.cmplz-preferences) #consent-badge .icon::before {
    content: "\E150";
}
body.cmplz-statistics:not(.cmplz-marketing):not(.cmplz-preferences) #consent-badge .label::after {
    content: "  Statistiques OK";
}

body.cmplz-functional:not(.cmplz-statistics):not(.cmplz-marketing):not(.cmplz-preferences) #consent-badge .icon::before {
    content: "\E270";
}
body.cmplz-functional:not(.cmplz-statistics):not(.cmplz-marketing):not(.cmplz-preferences) #consent-badge .label::after {
    content: "  Fonctionnels seulement";
}




@media screen and (max-width: 767px) {
    #consent-badge {
        top: 12vh;
        min-width: 80vw;
    }
}