/* Conteneur pour la fumée */
#smoke-container {
    position: absolute;
    bottom: 19%; /* Ajustez la valeur pour placer la fumée légèrement plus haut */
    left: 57%; /* Ajustez la valeur pour déplacer légèrement à droite */
    transform: translateX(-50%);
    width: 200px;
    height: 300px;
    z-index: 500;
    pointer-events: none;
}


/* Style de la fumée */
.smoke {
    position: absolute;
    bottom: 0; /* Fait commencer la fumée depuis le bas du conteneur */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    animation: smokeRise linear infinite; /* Animation de montée uniquement */
}

/* Animation de la montée et de disparition de la fumée */
@keyframes smokeRise {
    0% {
        transform: translateX(0) translateY(0) scale(0.5); /* La fumée commence petite */
        opacity: 0.6;
    }
    50% {
        transform: translateX(3px) translateY(-150px) scale(1); /* La fumée grandit et se déplace légèrement à droite */
        opacity: 0.4;
    }
    100% {
        transform: translateX(15px) translateY(-300px) scale(1.8); /* La fumée monte plus haut et un peu plus à droite */
        opacity: 0;
    }
}
/* Style par défaut pour le conteneur de fumée */
#smoke-container {
    position: absolute;
    bottom: 10%; /* Ajusté pour le logo desktop */
    left: 65%;
    transform: translateX(-50%);
    width: 200px;
    height: 300px;
    z-index: 500;
    pointer-events: none;
}

/* Style pour les téléphones */
@media (max-width: 768px) {
    #smoke-container {
        bottom: 20%; /* Placer la fumée plus bas pour correspondre au logo plus petit */
        left: 55%;
        width: 100px; /* Réduction de la taille pour correspondre au petit logo */
        height: 150px;
    }

    .smoke {
        width: 40px; /* Réduire la taille des bouffées de fumée */
        height: 40px;
    }
}