/* Styles CSS de base pour la page */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Empêche les barres de défilement du navigateur */
    background: #e0f7fa; /* Couleur ciel par défaut */
    font-family: sans-serif;
}

/* Conteneur principal de la scène */
#scene {
    position: relative;
    width: 100%;
    height: 100vh;
    /*background-color: #b3e5fc; /* Ciel bleu clair */
    /*background-image: url('images/fond.jpg');*/
    background-image: url('/images/ca2.jpg');
    background-position: left top;
}

/* --- ÉLÉMENTS D'ARRIÈRE-PLAN --- */

/* 1. La Route (qui bouge vite) - Image intégrée directement */
.road {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Une section au bas de l'écran */
    /* Image de route générée par l'IA et intégrée en Base64 pour la route */
    background-image: url('/images/road5.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%; /* La hauteur de l'image remplit la zone */
    background-position: bottom;
    z-index: 2;
    /*box-shadow: 0 -10px 20px rgba(0,0,0,0.2);*/
}

/* --- ÉLÉMENT DU VAN FIXED --- */

/* Conteneur principal du van (fixe au centre) */
#van-container {
    position: absolute;
    bottom: 5%; /* Ajusté pour se poser sur la route */
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal parfait */
    width: 1000px; /* Largeur d'origine du van complet pour référence */
    height: 485px; /* Hauteur approximative du van */
    z-index: 10;
}

/* Le corps du van (fixe, pas d'arrière-plan) - Image Base64 de image_5.png (version simplifiée) */
#van-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 485px;
    /* Version Base64 simplifiée de l'image_5.png */
    background-image: url('/images/vanT6.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Pour que le van "corps seul" soit visible, nous utilisons une version bicolore simple ici */
    background-color: transparent;
    border-radius: 20px; /* Juste pour donner une forme si l'image Base64 échoue */
}

/* Version bicolore simple en CSS au cas où l'image Base64 est trop complexe */
#van-body-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 485px;
    /*background: linear-gradient(to bottom, #ffffff 50%, #d32f2f 50%);*/
    background-image: url('/images/vanT6_sansroue2.png');
    border-radius: 15px 15px 5px 5px;
    overflow: hidden;

}
#van-frein{
    position: absolute;
    top: 210px;
    left: 0;
    width: 87px;
    height: 109px;
    background-image: url('/images/frein.png');
    z-index:1005;
    display:none
}

/* --- ROUES SÉPARÉES --- */

.wheel {
    position: absolute;
    bottom: 22px; /* Ajustement vertical précis pour correspondre aux passages de roue */
    width: 140px; /* Taille précise d'une roue */
    height: 140px;
    /* Image Base64 de la roue image_7.png */
    background-image: url('/images/roue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center center; /* Le point de rotation est le centre */
    transition: transform 0.05s linear; /* Rotation très réactive */
    z-index: 11;
    /* Fallback visuel si l'image Base64 échoue */
    /*border: 5px solid #555;
    border-radius: 50%;
    background-color: #f5f5f5;*/
}
.pierre{
    position: absolute;
    bottom:22px;
    background-image: url('/images/pierre.png');
    background-size: contain;
    width: 40px; /* Taille précise d'une roue */
    height: 30px;
    z-index: 1001;
}

/* Positionnement de la roue avant */
.wheel-front {
    left: 730px; /* Position horizontale pour le passage de roue avant */
}

/* Positionnement de la roue arrière */
.wheel-back {
    left: 140px; /* Position horizontale pour le passage de roue arrière */
}

/* Panneau d'instructions */
#instructions {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 25px;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 100;
    text-align: center;
}

#instructions h3 { margin: 0 0 5px 0; color: #333; }
#instructions p { margin: 0; color: #666; font-size: 14px; }