.progress-container {
  width: 350px;
  max-width: 95%;
  margin-bottom: 20px;
}

svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- COULEURS --- */
/* Bleu : #002798 | Orange : #ff7f00 */

/* 1. Le contour BLEU (Couche du bas) */
.road-border {
  fill: none;
  stroke: #002798; /* BLEU */
  stroke-width: 65px;
  stroke-linecap: round;
}

/* 2. L'intérieur BLANC (Couche du milieu) */
.road-inner {
  fill: none;
  stroke: #f1f8ff;
  stroke-width: 55px;
  stroke-linecap: round;
}

/* 3. Les pas ORANGE (Couche du haut - Masquée) */
.footprints {
  fill: none;
  stroke: #ff7f00; /* ORANGE */
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-dasharray: 0 40;
}

/* --- STYLES DES ICONES FIXES --- */

/* Styles de Texte */
.text-label {
  font-family: sans-serif;
  font-weight: bold;
  color: #002798;
  fill: #002798; /* Texte en bleu */
  font-size: 24px;

  stroke: #f1f8ff;
  stroke-width: 10px; /* Épaisseur du fond */

  /* 2. On arrondit les angles pour faire joli */
  stroke-linejoin: round;

  /* 3. L'ASTUCE MAGIQUE : On dessine le contour (stroke) AVANT le remplissage (fill) */
  /* Cela permet au texte bleu de rester fin et net par-dessus le gros trait blanc */
  paint-order: stroke fill;
}

/* --- ANIMATION --- */
#scout-group {
  transition: transform 0.1s linear;
}

/* Contrôles */

@media screen and (max-width: 750px) {
  .projet {
    zoom: 55%;
  }

  .text-muted {
    font-size: 10px;
  }
}
.progress-container svg {
  pointer-events: none; /* Magie : les clics traversent le SVG */
}