/* mobylette.css */

/* --- LE CONTENEUR FIXE --- */
#mob-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    z-index: 9999;
    pointer-events: none; /* Laisse passer les clics */
}

/* --- LA MOBYLETTE --- */
.mobylette {
    position: absolute;
    bottom: 0px;
    left: -300px;
    width: 120px;
    max-width: 15vw;
    height: auto;
    z-index: 10;
}

.mobylette.en-route {
    animation: traverser 12s linear forwards, vibration 0.1s infinite;
}

/* --- LE BOUTON REVOIR --- */
.btn-revoir {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 120px;
    height: auto;
    z-index: 100;
    cursor: pointer;
    display: none;
    pointer-events: auto; /* Bouton cliquable */
    transition: transform 0.2s;
}

.btn-revoir:hover {
    transform: scale(1.1);
}

/* --- LA FUMÉE --- */
.smoke-particle {
    position: absolute;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.8) 0%, rgba(60, 60, 60, 0) 80%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    filter: blur(2px);
    animation: evaporer 2s forwards;
}

/* --- ANIMATIONS --- */
@keyframes traverser {
    0% { left: -300px; }
    100% { left: 100vw; }
}

@keyframes vibration {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-1px); }
    100% { transform: translateY(0px); }
}

@keyframes evaporer {
    0% { 
        transform: scale(1); 
        opacity: 0.7; 
    }
    100% { 
        /* --- MODIFICATION HAUTEUR --- */
        /* Avant: translateY(-80px). Maintenant: -30px (monte moins haut) */
        /* Scale(4) fait grossir la fumée au fur et à mesure */
        transform: scale(5) translateY(-20px); 
        opacity: 0; 
    }
}