#car{
    position: absolute;
    bottom: var(--bottom-voiture);
    left: var(--left-voiture);
    /* right: 100%; */
    /* optimal */
    /* height: 160px;
    width: 300px; */
    z-index: 1000;
    height: var(--taille-voiture-hauteur);
    width: var(--taille-voiture-largeur);
    animation: moveCar var(--duree-move-voiture) infinite;
}


#arriere{
    position: absolute;
    bottom: var(--bottom-composant-voiture);
    height: var(--hauteur-arriere-voiture);
    width: var(--largeur-arriere-voiture);
    background-color: var(--couleur-voiture);

}
#milieu{
    bottom: var(--bottom-composant-voiture);
    left: var(--left-milieu-voiture);
    position: absolute;
    background-color: var(--couleur-voiture);
    height: var(--hauteur-milieu-voiture);

    width: var(--largeur-milieu-voiture);

    border-top-right-radius: 20px;
}
#avant{
    position: absolute;
    bottom: var(--bottom-composant-voiture);
    background-color: var(--couleur-voiture);
    left: var(--left-avant-voiture);
    height: var(--hauteur-avant-voiture);
    width: var(--largeur-avant-voiture);

}

/* vitre */
#milieu::after{ 
    content:"";
    position: absolute;
    width: 80%;
    height: 30%;
    background-color: var(--couleur-vitre-voiture);
    top: 5%;
    left: 50%;
    translate: -50%;
    border-top-right-radius: 15px;
}

.roue{
    position: absolute;
    /* width: 50px;
    height: 50px; */
    width: var(--taille-roue-voiture);
    height: var(--taille-roue-voiture);
    
    top:100%;
    translate: 0 -70% ;
    background-color: var(--couleur-roue-voiture);
    border-radius: 50%;
}

/* truc des roues */
/* .roue::after{
    content:"";
    position: absolute;
    width: 50px;
    height: 25px;
    background-color: green;
    border-top-left-radius:10000% ;
    border-top-right-radius: 10000%;
} */

#roueArriere{
    left: var(--position-roue-arriere);
}
#roueAvant{
    right: var(--position-roue-avant);
}



@keyframes moveCar {
    from{
        left: 0;
    }
    to{
        left: 100%;
    }
}