/* ==========================================================================
   Jura-Start - devenir-membre.css
   ========================================================================== */

.js-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; margin-top: 44px; }
.js-step { position: relative; padding: 32px 28px; background: var(--js-white); border: 1px solid var(--js-line); border-radius: var(--js-radius); display: flex; flex-direction: column; gap: 10px; }
.js-step-num { font-family: var(--js-font-display); font-size: 2.4rem; line-height: 1; color: var(--js-amber); }
.js-step-title { font-size: 1.3rem; }
.js-step-desc { color: var(--js-ink-soft); font-size: 0.96rem; margin: 0; }

/* Avantages (fond sombre) */
.js-adv-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.js-adv-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 1.15rem; color: var(--js-paper); }
.js-adv-check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--js-amber-glow); color: var(--js-amber); }
.js-adv-check svg { width: 18px; height: 18px; }

@media (max-width: 700px) {
  .js-adv-list { grid-template-columns: 1fr; }
}