.ssv {
  --ssv-bg: #FFFFFF;
  --ssv-paper: #FFFFFF;
  --ssv-ink: #000000;
  --ssv-muted: #586273;
  --ssv-accent: #FE5716;
  --ssv-accent-2: #FE5716;
  --ssv-line: #e7edf3;
  --ssv-shadow: 0 10px 30px rgba(10,30,50,.06);
  --ssv-shadow-strong: 0 12px 40px rgba(10,30,50,.10);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ssv-ink);
  background: linear-gradient(180deg, #FFFFFF, var(--ssv-bg));
}

.ssv * { box-sizing: border-box }

/* Wrapper */
.ssv-wrap {
  max-width: 1080px;
  margin: clamp(24px, 5vw, 56px) auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

/* Header */
.ssv-head { text-align: center; margin-bottom: clamp(16px, 4vw, 28px); }
.ssv-eyebrow {
  display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ssv-accent);
  background: #fddcd2; border: 1px solid #fcd1c7; padding: .35rem .6rem; border-radius: 999px;
}
.ssv-title {
  font-family: Georgia, "Times New Roman", serif; font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
  margin: .6rem 0 .3rem; letter-spacing: .2px;
}
.ssv-subtitle { color: var(--ssv-muted); max-width: 72ch; margin: 0 auto; }

/* Grid des étapes */
.ssv-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px) clamp(14px, 2.4vw, 24px);
  align-items: start;
  margin-top: clamp(12px, 2vw, 18px);
}
@media (max-width: 900px){
  .ssv-steps { grid-template-columns: 1fr; }
}

/* Carte étape */
.ssv-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
@media (max-width: 520px){
  .ssv-item { grid-template-columns: 54px 1fr; gap: 10px; }
}

/* Badge numéro */
.ssv-badge {
  position: relative; width: 64px; height: 64px;
  display: grid; place-items: center; border-radius: 16px;
  background: radial-gradient(120px 120px at 30% 20%, #ffffff 0%, #fff4f2 60%, #ffeae6 100%);
  box-shadow: var(--ssv-shadow); border: 1px solid #fce4e0;
}
.ssv-badge::after{
  content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--ssv-accent) 0%, var(--ssv-accent-2) 70%);
  box-shadow: 0 0 0 6px #fff2f0; border:2px solid #fff;
}
.ssv-num {
  font-family: Georgia, "Times New Roman", serif; font-weight: 800; font-size: 22px;
  color: var(--ssv-accent);
}

/* Card */
.ssv-card {
  background: var(--ssv-paper);
  border: 1px solid #edf2f7;
  border-left: 6px solid var(--ssv-accent);
  padding: clamp(14px, 2.2vw, 22px);
  border-radius: 18px;
  box-shadow: var(--ssv-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: center;
}
.ssv-card:hover { transform: translateY(-2px); box-shadow: var(--ssv-shadow-strong); border-left-color: var(--ssv-accent-2); }
.ssv-card h3 {
  margin: 0 0 6px;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.25rem);
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .2px;
}
.ssv-card p { margin: 0; color: var(--ssv-muted); }

/* CTA */
.ssv-cta { display: flex; justify-content: center; margin-top: clamp(18px, 3vw, 28px); }
.ssv-btn {
  appearance: none; display: inline-flex; align-items: center; gap: .6rem;
  border-radius: 999px; padding: .9rem 1.2rem; border: 2px solid var(--ssv-accent);
  color: var(--ssv-accent); background: #fff; font-weight: 800; text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}
.ssv-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg,#ffffff 0%, #fffafa 100%); color:#FE5716; border-color:#FE5716; box-shadow: 0 10px 24px rgba(254,87,22,.18); }
.ssv-btn svg { transition: transform .2s ease }
.ssv-btn:hover svg { transform: translateX(3px); }

/* Micro-compact */
@media (max-width: 420px){
  .ssv-wrap { padding-left: 14px; padding-right: 14px; }
  .ssv-item { gap: 10px; }
}