/* Badge numéroté élégant (1–10) */
.step-badge{
  --size: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size);
  height:var(--size);
  font-weight:700;
  font-size:14px;
  line-height:1;
  border-radius:999px;
  background: radial-gradient(120% 120% at 30% 30%, #fff 0%, #e9f3ff 40%, #d6e9ff 70%, #c2dbff 100%);
  color:#0b5ed7; /* proche bootstrap primary */
  border:1px solid rgba(13,110,253,.25);
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    inset 0 0 0 2px rgba(255,255,255,.6);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

/* Carte : hover subtil (lift + glow léger) */
.card-hover{
  border:1px solid rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.card-hover:hover{
  transform: translateY(-4px);
  border-color: rgba(13,110,253,.25);
  box-shadow: 0 8px 22px rgba(13,110,253,.10), 0 2px 6px rgba(0,0,0,.06);
}

/* Icône qui “respire” au hover */
.card-hover .fa-solid{
  transition: transform .25s ease;
}
.card-hover:hover .fa-solid{
  transform: translateY(-2px) scale(1.05);
}

/* Le numéro pulse légèrement au hover pour renforcer la progression */
.card-hover:hover .step-badge{
  transform: scale(1.06);
  box-shadow:
    0 4px 12px rgba(13,110,253,.25),
    inset 0 0 0 2px rgba(255,255,255,.7);
}