/* ==============================
   Comment ça marche — OF
   ============================== */

.ic{ width:20px; height:20px; display:block; color: rgba(255,255,255,0.92); }

.how-hero{
  margin-top: var(--sp-6);
  display:grid;
  gap: var(--sp-6);
  align-items:start;
}

.how-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  background: rgba(47,128,255,0.12);
  border: 1px solid rgba(47,128,255,0.28);
  margin-bottom: var(--sp-3);
}
.how-pill-ic{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.how-hero h1{
  font-size: var(--fs-xxl);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing:-0.02em;
  margin: 0 0 var(--sp-3);
}

.how-sub{
  font-size: var(--fs-sm);
  line-height: 1.7;
  opacity: .92;
  margin: 0 0 var(--sp-4);
}

.how-actions{
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-3);
}

.how-hero-card{
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at top left,
      rgba(47,128,255,0.18) 0,
      rgba(4,16,28,0.92) 42%,
      rgba(0,0,0,0.85) 100%);
  box-shadow: var(--shadow-medium);
  padding: var(--sp-5);
}

.how-card-top{ display:flex; gap: 12px; align-items:center; margin-bottom: 10px; }
.how-card-ic{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.how-card-title{ font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.how-card-sub{ font-size: var(--fs-xxs); opacity:.75; }
.how-card-p{ margin: 0 0 12px; opacity:.9; line-height:1.65; }
.how-card-btn{ width: 100%; }

.how-section{ margin-top: var(--sp-7); }
.how-head h2{ margin:0 0 6px; font-size: var(--fs-lg); }
.how-head p{ margin:0; opacity:.84; line-height:1.6; }

.how-flow{
  margin-top: var(--sp-4);
  display:grid;
  gap: 12px;
}
.how-step{
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--shadow-soft);
  padding: 14px 14px;
}
.how-step-ic{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}
.how-step h3{ margin:0 0 6px; font-size: var(--fs-md); }
.how-step p{ margin:0; opacity:.86; line-height:1.6; }

.how-grid{
  margin-top: var(--sp-4);
  display:grid;
  gap: 12px;
}
.how-card{
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.16);
  padding: 14px 14px;
}
.how-card-ic2{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}
.how-card h3{ margin:0 0 6px; font-size: var(--fs-md); }
.how-card p{ margin:0; opacity:.86; line-height:1.6; }

.how-final{
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at top left, rgba(6,193,103,0.16), rgba(0,0,0,0.22));
}
.how-final h2{ margin:0 0 6px; }
.how-final p{ margin:0 0 12px; opacity:.86; line-height:1.6; }
.how-final-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); }

@media (min-width: 900px){
  .how-hero{ grid-template-columns: 1.35fr 0.85fr; gap: var(--sp-7); }
  .how-flow{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .how-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}