body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Fond d'écran */
    background: url('img/fond.jpg') no-repeat center center;
    background-size: cover; /* Adapte l'image à la taille de l'écran */
}
#content0 {
    position: fixed; /* Fixe le conteneur en haut de la page */
    top: 0; /* Place l'élément tout en haut */
    margin: 0; /* Supprime les marges par défaut */
    right: 0; /* Aligne à gauche */
    width: 50%; /* Prend toute la largeur */
    background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour un effet header */
    padding: 10px 10px; /* Espacement intérieur */
    border-radius: 15px; /* Arrondit les angles */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
    text-align: center; /* Centrage du texte */
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Légère bordure en bas */
    z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
    
}

#content {
    position: relative; /* Nécessaire pour positionner des éléments enfants absolument */
    background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
#position {
    font-size: 1.2em;
    margin-top: 10px;
}

#distance {
    margin-top: 10px;
    font-size: 1.5em;
}

/* Style des flèches */
.arrow {
    position: absolute;
    width: 100px;
    height: 100px;
    display: none; /* Masqué par défaut */
}

#arrow-approaching {
    bottom: 10px;
    left: 10px;
}

#arrow-moving-away {
    bottom: 10px;
    right: 10px;
}

/* Style de Avatar */
#avatar {
    position: absolute;
    width: 130px;
    height: 130px;
    background-color: rgba(27, 28, 29, 0.6); /* Couleur de remplissage interne */
    border-radius: 50%; /* Pour arrondir l'intérieur */
    box-shadow: 0 0 20px 10px rgba(27, 28, 29, 0.6); /* Halo par défaut */
    transition: all 0.5s ease-in-out; /* Transition douce pour les changements */
}
/* Conteneur de la flèche */
#arrow-container {
    position: relative;
    width: 100px; /* Taille de la boîte de la flèche */
    height: 100px;
    margin: 20px auto; /* Centre horizontalement dans le div #content */
}

/* Flèche noire */
#arrow-black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center; /* Centre de rotation */
    transform: rotate(0deg); /* Rotation initiale */
    transition: transform 0.1s linear; /* Animation fluide pour les rotations */
}
#user-avatar {
    position: absolute; /* Permet de positionner avec left et top */
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Cercle */
    object-fit: cover; /* Ajuste l'image */
    transition: left 0.2s ease, top 0.2s ease; /* Animation fluide */
}

[data-debug="true"] {
    display: none;
}

#user-name {
    font-weight: bold; /* Rend le texte en gras */
    margin: 0; /* Supprime les marges par défaut */
}

#challenge-number , #distance {
    margin: 0; /* Supprime les marges par défaut */
}

#arrow-approaching, #arrow-moving-away {
    position: fixed; /* Fixe le conteneur en haut de la page */
    bottom: 0; /* Place l'élément tout en haut */
    margin: 0; /* Supprime les marges par défaut */
    left: 0; /* Aligne à gauche */
    width: 25%; /* Prend toute la largeur */
    background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour un effet header */
    padding: 10px 10px; /* Espacement intérieur */
    border-radius: 15px; /* Arrondit les angles */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
    text-align: center; /* Centrage du texte */
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Légère bordure en bas */
    z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
    
    
}