/* ============================================================
   SUFFAYA — Page Vendre
Styles spécifiques à la page 'Devenez vendeur'
   ============================================================ */

/* ── Variables ─────────────────────────────────────── */
.sv2{
    --acc:#6C63FF;--acc2:#8b5cf6;--gold:#f59e0b;--ok:#22c55e;
    --tx:#f8fafc;--tx2:#94a3b8;--tx3:#4b5563;
    --bg:#070b14;--bg2:#0d1120;--bg3:#111827;
    --brd:rgba(255,255,255,.06);--brd2:rgba(108,99,255,.25);
    --card:#111827;--shadow:0 20px 60px rgba(0,0,0,.5);
    --r:14px;--r2:20px;
    font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
    color:var(--tx);overflow-x:hidden;
}

/* ── Reset/base ────────────────────────────────────── */
.sv2 *{box-sizing:border-box;margin:0;padding:0}
.sv2 h1,.sv2 h2,.sv2 h3{line-height:1.15;letter-spacing:-.02em}
.sv2 em{font-style:normal}
.sv2 a{text-decoration:none}

/* ── Helpers ───────────────────────────────────────── */
.sv2-container{max-width:1100px;margin:0 auto;padding:0 20px}
.sv2-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);color:#a5b4fc;font-size:.68rem;font-weight:700;padding:5px 16px;border-radius:99px;text-transform:uppercase;letter-spacing:.09em}
.sv2-tag svg{width:12px;height:12px;stroke:currentColor;fill:none}

/* ── HERO ───────────────────────────────────────────── */
.sv2-hero{
    background:linear-gradient(160deg,#05080f 0%,#0c1220 55%,#0e1428 100%);
    padding:80px 20px 60px;text-align:center;position:relative;overflow:hidden;
}
.sv2-hero::before{
    content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
    width:800px;height:500px;
    background:radial-gradient(ellipse,rgba(108,99,255,.18) 0%,transparent 65%);
    pointer-events:none;
}
.sv2-hero::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(108,99,255,.4),transparent);
}
/* Animated orbs */
.sv2-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.12;animation:sv2float 8s ease-in-out infinite}
.sv2-orb-1{width:300px;height:300px;background:#6C63FF;top:-80px;left:-60px;animation-delay:-3s}
.sv2-orb-2{width:250px;height:250px;background:#8b5cf6;bottom:-60px;right:-40px;animation-delay:0s}
@keyframes sv2float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

.sv2-hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.sv2-hero .sv2-tag{margin-bottom:26px;animation:sv2up .7s ease both}
.sv2-hero h1{
    font-size:clamp(2.1rem,6vw,3.6rem);font-weight:900;color:#f8fafc;
    margin-bottom:20px;animation:sv2up .7s .12s ease both;
}
.sv2-hero h1 em{
    background:linear-gradient(135deg,#6C63FF,#a78bfa);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sv2-hero-sub{
    font-size:1.05rem;color:#94a3b8;max-width:540px;margin:0 auto 36px;
    line-height:1.75;animation:sv2up .7s .24s ease both;
}
.sv2-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:sv2up .7s .36s ease both}
.sv2-btn-main{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--acc);color:#fff;padding:16px 34px;border-radius:12px;
    font-weight:800;font-size:.95rem;border:none;cursor:pointer;font-family:inherit;
    transition:all .25s;box-shadow:0 4px 28px rgba(108,99,255,.4);
}
.sv2-btn-main:hover{background:#5a52e0;transform:translateY(-2px);box-shadow:0 8px 36px rgba(108,99,255,.5)}
.sv2-btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;color:#94a3b8;padding:16px 28px;border-radius:12px;
    font-weight:600;font-size:.95rem;border:1.5px solid rgba(255,255,255,.1);
    transition:all .2s;
}
.sv2-btn-ghost:hover{border-color:rgba(108,99,255,.45);color:#c4b5fd}
.sv2-hero-note{color:rgba(108,99,255,.5);font-size:.77rem;margin-top:14px;animation:sv2up .7s .48s ease both}

/* Trust micro-badges */
.sv2-trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px;animation:sv2up .7s .6s ease both}
.sv2-trust-badge{display:flex;align-items:center;gap:6px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.15);color:#86efac;font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:99px}
.sv2-trust-badge svg{width:10px;height:10px;stroke:currentColor;fill:none;flex-shrink:0}

@keyframes sv2up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ── STATS BAR ──────────────────────────────────────── */
.sv2-stats{background:#0d1322;border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:28px 20px}
.sv2-stats-row{max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.sv2-stat-n{font-size:1.9rem;font-weight:900;color:var(--acc);line-height:1}
.sv2-stat-l{font-size:.72rem;color:var(--tx3);margin-top:5px;font-weight:500;letter-spacing:.03em}

/* ── SECTIONS ───────────────────────────────────────── */
.sv2-section{padding:72px 20px}
.sv2-section-dark{background:var(--bg2);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:72px 20px}
.sv2-section-head{text-align:center;margin-bottom:52px}
.sv2-section-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:900;color:var(--tx);margin-bottom:12px}
.sv2-section-head p{color:var(--tx2);font-size:.95rem;max-width:500px;margin:0 auto;line-height:1.7}

/* ── ÉTAPES ─────────────────────────────────────────── */
.sv2-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.sv2-steps::before{
    content:'';position:absolute;top:40px;left:calc(16.67% + 8px);right:calc(16.67% + 8px);
    height:2px;background:linear-gradient(90deg,transparent,var(--brd2),transparent);
    z-index:0;
}
.sv2-step{
    background:var(--card);border:1px solid var(--brd);border-radius:var(--r2);
    padding:32px 22px;text-align:center;position:relative;z-index:1;
    transition:border-color .25s,transform .25s,box-shadow .25s;
}
.sv2-step:hover{border-color:rgba(108,99,255,.4);transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.sv2-step-num{
    width:52px;height:52px;background:rgba(108,99,255,.12);border:2px solid rgba(108,99,255,.35);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;font-size:1.15rem;font-weight:900;color:#a5b4fc;
    transition:background .2s,border-color .2s;
}
.sv2-step:hover .sv2-step-num{background:rgba(108,99,255,.22);border-color:var(--acc)}
.sv2-step-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sv2-step-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.sv2-step h3{font-size:.95rem;font-weight:800;color:var(--tx);margin-bottom:9px}
.sv2-step p{font-size:.8rem;color:var(--tx3);line-height:1.65}
.sv2-step-time{display:inline-flex;align-items:center;gap:4px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18);color:#4ade80;font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:99px;margin-top:10px}

/* ── AVANTAGES ──────────────────────────────────────── */
.sv2-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sv2-benefit{
    background:var(--card);border:1px solid var(--brd);border-radius:var(--r2);
    padding:24px 20px;display:flex;flex-direction:column;gap:14px;
    transition:border-color .2s,transform .2s;
}
.sv2-benefit:hover{border-color:rgba(108,99,255,.35);transform:translateY(-3px)}
.sv2-benefit-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sv2-benefit-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.sv2-benefit h3{font-size:.9rem;font-weight:800;color:var(--tx)}
.sv2-benefit p{font-size:.78rem;color:var(--tx3);line-height:1.6}

/* ── TARIFS ─────────────────────────────────────────── */
.sv2-pricing-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:0 auto}
.sv2-plan{
    background:var(--card);border:1.5px solid var(--brd);border-radius:var(--r2);
    padding:36px 28px;text-align:center;transition:border-color .2s,transform .2s;
    position:relative;overflow:hidden;
}
.sv2-plan::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--brd2),transparent)}
.sv2-plan-featured{border-color:rgba(108,99,255,.4);background:linear-gradient(135deg,rgba(108,99,255,.08),var(--card))}
.sv2-plan-featured::before{background:linear-gradient(90deg,transparent,rgba(108,99,255,.6),transparent)}
.sv2-plan-badge{position:absolute;top:14px;right:14px;background:var(--acc);color:#fff;font-size:.62rem;font-weight:900;padding:3px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.sv2-plan-price{font-size:3.8rem;font-weight:900;color:var(--acc);line-height:1}
.sv2-plan-price span{font-size:1.2rem;color:var(--tx3);font-weight:600}
.sv2-plan-label{color:var(--tx3);font-size:.82rem;margin-top:6px;margin-bottom:22px}
.sv2-plan-feats{list-style:none;text-align:left;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.sv2-plan-feats li{display:flex;align-items:center;gap:8px;font-size:.81rem;color:var(--tx2)}
.sv2-plan-feats li svg{width:14px;height:14px;stroke:#22c55e;fill:none;stroke-width:2.5;flex-shrink:0}
.sv2-plan-note{color:var(--tx3);font-size:.75rem;line-height:1.55}
.sv2-plan-cta{display:block;width:100%;background:var(--acc);color:#fff;padding:13px;border-radius:10px;font-weight:800;font-size:.88rem;text-align:center;transition:all .2s;margin-top:20px}
.sv2-plan-cta:hover{background:#5a52e0;transform:translateY(-1px)}
.sv2-plan-cta-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.1);color:var(--tx2)}
.sv2-plan-cta-ghost:hover{border-color:rgba(108,99,255,.4);color:var(--acc)}

/* ── FAQ ─────────────────────────────────────────────── */
.sv2-faq{max-width:680px;margin:0 auto}
.sv2-faq-item{border:1px solid var(--brd);border-radius:13px;margin-bottom:9px;overflow:hidden;transition:border-color .2s}
.sv2-faq-item:hover{border-color:rgba(108,99,255,.25)}
.sv2-faq-item.open{border-color:rgba(108,99,255,.35)}
.sv2-faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;cursor:pointer;font-size:.88rem;font-weight:700;color:var(--tx);user-select:none;transition:background .15s}
.sv2-faq-q:hover{background:rgba(255,255,255,.02)}
.sv2-faq-q svg{width:16px;height:16px;stroke:var(--tx3);fill:none;flex-shrink:0;transition:transform .25s,stroke .2s}
.sv2-faq-item.open .sv2-faq-q svg{transform:rotate(45deg);stroke:var(--acc)}
.sv2-faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease,padding .25s}
.sv2-faq-item.open .sv2-faq-a{max-height:260px}
.sv2-faq-a p{padding:0 20px 18px;font-size:.82rem;color:var(--tx2);line-height:1.7;border-top:1px solid var(--brd)}
.sv2-faq-a p::before{content:'';display:block;height:14px}

/* ── TEMOIGNAGES ─────────────────────────────────────── */
.sv2-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sv2-testi{background:var(--card);border:1px solid var(--brd);border-radius:var(--r2);padding:22px 20px;transition:border-color .2s,transform .2s}
.sv2-testi:hover{border-color:rgba(108,99,255,.3);transform:translateY(-2px)}
.sv2-testi-stars{display:flex;gap:2px;margin-bottom:12px}
.sv2-testi-stars svg{width:14px;height:14px;fill:#f59e0b;stroke:none}
.sv2-testi-text{font-size:.81rem;color:var(--tx2);line-height:1.65;margin-bottom:16px;font-style:italic}
.sv2-testi-author{display:flex;align-items:center;gap:10px}
.sv2-testi-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0}
.sv2-testi-name{font-size:.82rem;font-weight:700;color:var(--tx)}
.sv2-testi-role{font-size:.7rem;color:var(--tx3)}

/* ── PAIEMENTS ──────────────────────────────────────── */
.sv2-payments{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.sv2-pay-badge{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 20px;font-size:.8rem;font-weight:700;color:var(--tx2);transition:all .2s}
.sv2-pay-badge:hover{border-color:rgba(108,99,255,.3);color:var(--tx);background:rgba(108,99,255,.06)}

/* ── CTA FINAL ──────────────────────────────────────── */
.sv2-cta{
    background:linear-gradient(135deg,#1a1060 0%,#0f0b2e 40%,#1a1060 100%);
    border-top:1px solid rgba(108,99,255,.2);
    padding:80px 20px;text-align:center;position:relative;overflow:hidden;
}
.sv2-cta::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(108,99,255,.15),transparent);
    pointer-events:none;
}
.sv2-cta-inner{position:relative;z-index:1;max-width:600px;margin:0 auto}
.sv2-cta h2{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:900;color:#fff;margin-bottom:14px}
.sv2-cta p{color:#818cf8;font-size:1.02rem;margin-bottom:36px;line-height:1.7}
.sv2-cta-note{color:rgba(108,99,255,.5);font-size:.78rem;margin-top:14px}
.sv2-cta-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px}
.sv2-cta-badge{display:flex;align-items:center;gap:5px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18);color:#4ade80;font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:99px}
.sv2-cta-badge svg{width:10px;height:10px;stroke:currentColor;fill:none}

/* ── Light mode ─────────────────────────────────────── */
[data-theme="light"] .sv2{
    --tx:#111827;--tx2:#4b5563;--tx3:#6b7280;
    --bg:#f1f5f9;--bg2:#e8edf5;--bg3:#fff;
    --brd:rgba(0,0,0,.09);--brd2:rgba(108,99,255,.3);
    --card:#fff;
}
[data-theme="light"] .sv2-hero{background:linear-gradient(160deg,#f0f3fa 0%,#e8edf5 100%)}
[data-theme="light"] .sv2-hero h1{color:#111827}
[data-theme="light"] .sv2-hero-sub{color:#4b5563}
[data-theme="light"] .sv2-stats{background:#e8edf5;border-color:#d1d5db}
[data-theme="light"] .sv2-stat-n{color:var(--acc)}
[data-theme="light"] .sv2-stat-l{color:#6b7280}
[data-theme="light"] .sv2-step,[data-theme="light"] .sv2-benefit,[data-theme="light"] .sv2-testi{background:#fff;border-color:#e5e7eb}
[data-theme="light"] .sv2-step h3,[data-theme="light"] .sv2-benefit h3,.sv2-step h3{color:#111827}
[data-theme="light"] .sv2-step p,[data-theme="light"] .sv2-benefit p{color:#6b7280}
[data-theme="light"] .sv2-faq-item{background:#fff;border-color:#e5e7eb}
[data-theme="light"] .sv2-faq-q{color:#111827}
[data-theme="light"] .sv2-faq-a p{color:#4b5563;border-top-color:#e5e7eb}
[data-theme="light"] .sv2-plan{background:#fff;border-color:#e5e7eb}
[data-theme="light"] .sv2-section-head h2{color:#111827}
[data-theme="light"] .sv2-section-head p{color:#4b5563}
[data-theme="light"] .sv2-pay-badge{background:#f8f9fc;border-color:#d1d5db;color:#374151}
[data-theme="light"] .sv2-btn-ghost{border-color:#d1d5db;color:#374151}
[data-theme="light"] .sv2-btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
[data-theme="light"] .sv2-benefits-bg{background:#e8edf5;border-color:#d1d5db}
[data-theme="light"] .sv2-testi-text{color:#4b5563}
[data-theme="light"] .sv2-testi-name{color:#111827}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:900px){
    .sv2-benefits{grid-template-columns:1fr 1fr}
    .sv2-testimonials{grid-template-columns:1fr}
}
@media(max-width:767px){
    .sv2-hero{padding:48px 16px 36px}
    .sv2-hero-cta{flex-direction:column;align-items:stretch}
    .sv2-btn-main,.sv2-btn-ghost{text-align:center;padding:14px 20px}
    .sv2-stats{padding:20px 16px}
    .sv2-stats-row{grid-template-columns:repeat(2,1fr);gap:16px}
    .sv2-stat-n{font-size:1.5rem}
    .sv2-section,.sv2-section-dark{padding:44px 16px}
    .sv2-section-head{margin-bottom:28px}
    .sv2-steps{grid-template-columns:1fr;gap:10px}
    .sv2-steps::before{display:none}
    .sv2-benefits{grid-template-columns:1fr}
    .sv2-pricing-wrap{grid-template-columns:1fr}
    .sv2-testimonials{grid-template-columns:1fr}
    .sv2-cta{padding:52px 16px}
}
@media(max-width:479px){
    .sv2-trust-row{gap:6px}
}
@media(min-width:1440px){
    .sv2-container{max-width:1300px}
    .sv2-section,.sv2-section-dark{padding:88px 24px}
}