/* === HERO METRICS : 1 seule ligne alignée === */
.hero-metrics{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;

  /* garde le bloc centré */
  max-width: 900px;
  margin-inline: auto;

  /* force 1 ligne */
  flex-wrap: nowrap;
}

.metric{
  flex: 0 0 auto;          /* ne se rétrécit pas n’importe comment */
  min-width: 170px;        /* ajuste si tu veux plus/moins large */
  text-align: center;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.22);
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

@media (max-width: 575.98px){
  /* sur mobile : soit on wrap, soit on scroll (au choix) */
  .hero-metrics{
    flex-wrap: wrap;       /* option 1: wrap propre */
    /* option 2 (si tu préfères une seule ligne): 
       flex-wrap: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       padding-bottom: 6px;
    */
  }
  .metric{ min-width: 0; flex: 1 1 100%; } /* si wrap: pleine largeur */
}