/* Container global */
.progress-container {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}

/* Label */
.progress-label {
  margin-bottom: 6px;
  font-weight: 500;
  color: #555;
}

/* Barre externe */
.progress-bar-outer {
  background: #eee;
  border-radius: 8px;
  height: 28px;
  width: 100%;
  overflow: hidden;
}

/* Barre interne */
.progress-bar {
  height: 100%;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  line-height: 28px;
  color: #fff;
  transition: width 0.4s ease; /* animation fluide */
}

/* Couleurs par défaut */
.progress-bar.green {
  background: #28a745;
}

.progress-bar.yellow {
  background: #ffc107;
}

.progress-bar.red {
  background: #dc3545;
}

/* Responsive */
@media (max-width: 600px) {
  .progress-label {
    font-size: 12px;
  }
  .progress-bar-outer {
    height: 22px;
  }
  .progress-bar {
    font-size: 11px;
    line-height: 22px;
  }
}