/* Règle */
#rule {
    position: fixed;
    z-index: 10;
    top: 50px;
    width: 80px; /* Ajusté pour inclure l'espace de la flèche */
    padding-top: 30px;
    padding-bottom: 30px;
    height: calc(100vh - 160px); /* Ajustable selon la marge */
    background: linear-gradient(to bottom, #ddd 10%, #eee 90%);
    border-left: 2px solid #444;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; /* Aligne les distances à droite */
    overflow: hidden;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Élément contenant une distance et sa flèche */
.distance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Occupe toute la largeur de la règle */
    position: relative;
    opacity: 1; /* Toutes les hauteurs visibles */
}

.distance-item p {
    font-weight: bold;
    margin-left: 5px;
}

/* Texte distance */
.distance {
    margin-right: auto; /* Le texte est aligné à gauche */
    font-size: 14px;
    color: #444;
    text-align: right;
}

/* Triangle de la flèche */
.triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #f00; /* Rouge pour la flèche */
    position: absolute;
    right: 5px; /* Positionnée à droite de la règle */
    display: none; /* Toutes les flèches sont masquées par défaut */
}

/* Flèche active */
.distance-item.active .triangle {
    display: block; /* Seule la flèche active est affichée */
}