.suivi-cards-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2rem 1rem;
}
.suivi-cards-container .statut-atteint {
  color: #16a34a;
  font-weight: 700;
}
.suivi-cards-container .statut-depasse {
  color: #16a34a;
  font-weight: 700;
}
.suivi-cards-container .montant-report {
  color: #f59f0a;
  font-weight: 600;
}
.suivi-cards-container .suivi-card {
  margin: 0 auto;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 320px;
          flex: 0 0 320px;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1019607843);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.1019607843);
  text-align: center;
  scroll-snap-align: center;
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}
.suivi-cards-container .suivi-card:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1333333333);
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.1333333333);
}
.suivi-cards-container .suivi-card.current {
  border: 2px solid #001f7c;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  background-color: hsla(210, 100%, 20%, 0.05);
}
.suivi-cards-container .suivi-card.current h3 {
  color: hsl(210, 100%, 20%);
  font-weight: 700;
}
.suivi-cards-container .suivi-card.current:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1333333333);
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.1333333333);
}
.suivi-cards-container .suivi-chart .circle svg {
  width: 100px;
  height: 100px;
}
.suivi-cards-container .suivi-chart .circle svg .bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3;
}
.suivi-cards-container .suivi-chart .circle svg .progress-collecte,
.suivi-cards-container .suivi-chart .circle svg .progress-prev,
.suivi-cards-container .suivi-chart .circle svg .progress-total {
  fill: none;
  stroke-width: 3;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.suivi-cards-container .suivi-chart .circle svg .percentage {
  font-size: 0.5rem;
  font-weight: 600;
  text-anchor: middle;
  fill: #333;
}
.suivi-cards-container .suivi-chart .circle svg .progress-collecte {
  stroke: #003366;
}
.suivi-cards-container .suivi-chart .circle svg .progress-prev {
  stroke: #b3804d;
}
.suivi-cards-container .suivi-chart .circle svg .progress-total {
  stroke: #fad736;
}
.suivi-cards-container .suivi-card-body p {
  margin-top: 10px;
}
.suivi-cards-container .suivi-card-body .montant-prev {
  color: #b3804d;
  font-weight: 500;
}

@media (max-width: 992px) {
  .suivi-card {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 320px;
            flex: 0 0 320px;
  }
}
@media (max-width: 768px) {
  .suivi-card {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 320px;
            flex: 0 0 320px;
  }
}
.suivi-cards-container:focus {
  outline: 2px solid #001f7c;
  outline-offset: 5px;
}