/* V23 — Bloc "Comment ça marche" stable Safari / Firefox / Chrome
   Desktop: 4 cards sur une ligne. Mobile: slider horizontal premium. */
.home-steps-v23 .steps-mobile-shell{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.home-steps-v23 .steps-grid.steps-premium-slider{
  display:grid !important;
  width:100% !important;
  max-width:100% !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  overflow:visible !important;
  position:relative !important;
}
.home-steps-v23 .steps-grid.steps-premium-slider::before{
  display:block !important;
  left:calc(12.5% + 24px) !important;
  right:calc(12.5% + 24px) !important;
}
.home-steps-v23 .step-card{
  min-width:0 !important;
  width:auto !important;
  min-height:190px !important;
  box-sizing:border-box !important;
}
.home-steps-v23 .step-card h3{
  line-height:1.22 !important;
}
.home-steps-v23 .steps-slider-controls{
  display:none !important;
}

@media (max-width:1100px){
  .home-steps-v23 .steps-grid.steps-premium-slider{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .home-steps-v23 .steps-grid.steps-premium-slider::before{
    display:none !important;
  }
}

@media (max-width:720px){
  .home-steps-v23 .steps-mobile-shell{
    width:calc(100% + 40px) !important;
    max-width:none !important;
    margin-left:-20px !important;
    margin-right:-20px !important;
    overflow:hidden !important;
  }
  .home-steps-v23 .steps-grid.steps-premium-slider{
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch !important;
    padding:2px 20px 18px !important;
    scrollbar-width:none !important;
  }
  .home-steps-v23 .steps-grid.steps-premium-slider::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
  .home-steps-v23 .steps-grid.steps-premium-slider::before{
    display:none !important;
  }
  .home-steps-v23 .steps-premium-slider .step-card,
  .home-steps-v23 .step-card{
    flex:0 0 min(84vw,330px) !important;
    width:min(84vw,330px) !important;
    min-width:min(84vw,330px) !important;
    scroll-snap-align:center !important;
    min-height:205px !important;
    padding:24px 22px !important;
  }
  .home-steps-v23 .steps-slider-controls{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    margin-top:4px !important;
  }
  .home-steps-v23 .steps-slider-btn{
    width:38px !important;
    height:38px !important;
    border-radius:999px !important;
    border:1px solid rgba(171,139,214,.28) !important;
    background:rgba(255,255,255,.88) !important;
    color:#6f4f91 !important;
    box-shadow:0 10px 22px rgba(42,29,50,.08) !important;
    font-size:1.45rem !important;
    line-height:1 !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
  }
  .home-steps-v23 .steps-slider-btn:disabled{opacity:.35 !important;}
  .home-steps-v23 .steps-slider-dots{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
  }
  .home-steps-v23 .steps-dot{
    width:7px !important;
    height:7px !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(111,79,145,.22) !important;
    padding:0 !important;
  }
  .home-steps-v23 .steps-dot.active{
    width:22px !important;
    background:linear-gradient(135deg,#b994d6,#dfc08b) !important;
  }
}

/* === FIX 2026-05-04 — numéros des étapes non coupés ===
   Les badges 1,2,3,4 restent à l'intérieur des cartes sur desktop et mobile. */
.home-steps-v23 .steps-mobile-shell{
  overflow: visible !important;
}
.home-steps-v23 .steps-grid.steps-premium-slider{
  overflow: visible !important;
  padding-top: 0 !important;
}
.home-steps-v23 .steps-grid.steps-premium-slider::before{
  top: 47px !important;
}
.home-steps-v23 .step-card{
  position: relative !important;
  overflow: visible !important;
  padding-top: 28px !important;
}
.home-steps-v23 .step-number{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 2 !important;

  width: 42px !important;
  height: 42px !important;
  margin: 0 auto 18px !important;
  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  background: #fff !important;
  color: #7d5cad !important;
  font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 26px rgba(111,79,145,.12) !important;
}

@media (max-width: 720px){
  .home-steps-v23 .steps-mobile-shell{
    overflow: hidden !important;
  }
  .home-steps-v23 .steps-grid.steps-premium-slider{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-top: 0 !important;
  }
  .home-steps-v23 .steps-premium-slider .step-card,
  .home-steps-v23 .step-card{
    padding-top: 28px !important;
  }
  .home-steps-v23 .step-number{
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 16px !important;
    font-size: 1.08rem !important;
  }
}