/* Accueil de la vitrine (gabarit A) — ce qui n'est qu'à cette page. */
.hero-cap { position: relative; width: max(100%, 860px) }
@media (max-width: 999.98px) {
  .hero-cap { width: 100% }
  /* Sur mobile, les cartes ne sortent plus de la gouttière. */
  .float-tl { left: -8px !important }
  .float-br { right: -8px !important }
}
/* Puces du hero : décoratives, la première seule mise en avant. */
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none }
.hero-pills li {
  height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(11, 10, 16, .12); font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: rgba(255, 255, 255, .6);
}
.hero-pills li.lead { border-color: rgba(124, 58, 237, .6); color: var(--ink); background: rgba(124, 58, 237, .07) }
.step { display: flex; flex-direction: column; gap: 32px; padding-top: 120px }
.step-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 36px }
.step-num { font-size: clamp(120px, 14vw, 180px); font-weight: 600; line-height: .8; letter-spacing: -.06em; color: rgba(124, 58, 237, .10) }
.step-txt { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; padding-bottom: 6px }
.step-txt .overline { font-weight: 400; letter-spacing: 0 }
.step-txt h2 { margin: 0; font-size: clamp(34px, 3.8vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em }
.collect-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 16px; align-items: center }
@media (max-width: 999.98px) {
  .collect-grid { grid-template-columns: minmax(0, 1fr) }
  .collect-arrow { justify-self: center; transform: rotate(90deg) }
}
.price-tag { position: absolute; left: 8px; top: -9px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px }