/* ═══════════════════════════════════════════════════════════════
   NOS SOLUTIONS — API · Portail Web · Application Mobile
   Prefix: sp-ns-*
   ═══════════════════════════════════════════════════════════════ */

.sp-ns-section {
    padding: clamp(72px,9vw,112px) clamp(20px,5vw,48px);
    background: var(--sp-white);
    position: relative;
    overflow: hidden;
}

.sp-ns-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 700px 400px at 0% 50%, rgba(182,31,53,0.04) 0%, transparent 65%),
        radial-gradient(ellipse 600px 350px at 100% 30%, rgba(16,185,129,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.sp-ns-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }

/* Fade */
.sp-ns-fade { opacity:0; transform:translateY(24px); transition:opacity .58s cubic-bezier(.4,0,.2,1),transform .58s cubic-bezier(.4,0,.2,1); }
.sp-ns-fade.sp-ns-visible { opacity:1; transform:translateY(0); }

/* ── Header ── */
.sp-ns-header { text-align:center; margin-bottom:64px; }

.sp-ns-tag {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(182,31,53,0.08); border:1px solid rgba(182,31,53,0.18);
    border-radius:50px; padding:5px 16px;
    font-size:var(--sp-fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--sp-primary);
    margin-bottom:18px;
}
.sp-ns-tag svg { width:13px; height:13px; }

.sp-ns-title {
    font-family:'Inter',sans-serif; font-size:var(--sp-fs-3xl);
    font-weight:800; color:var(--sp-text-h); line-height:1.22; letter-spacing:-.025em; margin-bottom:14px;
}

.sp-ns-title span {
    background:linear-gradient(90deg,var(--sp-primary),var(--sp-primary-light));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.sp-ns-sub { font-size:var(--sp-fs-base); color:var(--sp-text-muted); line-height:1.68; max-width:580px; margin:0 auto; }

/* ── Tab strip ── */
.sp-ns-tabs {
    display:flex; justify-content:center; gap:8px; margin-bottom:52px; flex-wrap:wrap;
}

.sp-ns-tab {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 22px; border-radius:50px; border:1.5px solid rgba(148,163,184,0.22);
    background:var(--sp-off-white); font-size:14px; font-weight:600; color:var(--sp-text-muted);
    cursor:pointer; transition:background .24s,border-color .24s,color .24s,box-shadow .24s;
    font-family:'Inter',sans-serif;
}

.sp-ns-tab svg { width:16px; height:16px; }

.sp-ns-tab:hover { background:var(--sp-bg); border-color:rgba(182,31,53,0.24); color:var(--sp-primary); }

.sp-ns-tab.active {
    background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-dark)); border-color:transparent;
    color:#fff; box-shadow:0 6px 22px rgba(182,31,53,.28);
}

/* ── Solution panel ── */
.sp-ns-panel { display:none; }
.sp-ns-panel.active { display:grid; }

.sp-ns-panel--api,
.sp-ns-panel--portal { grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sp-ns-panel--mobile { grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

/* Text side */
.sp-ns-panel-eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    border-radius:50px; padding:4px 14px;
    font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    margin-bottom:16px;
}
.sp-ns-panel-eyebrow--blue  { background:rgba(182,31,53,0.09); border:1px solid rgba(182,31,53,.2); color:var(--sp-primary); }
.sp-ns-panel-eyebrow--green { background:rgba(5,150,105,0.09);  border:1px solid rgba(5,150,105,.2); color:#047857; }
.sp-ns-panel-eyebrow--violet{ background:rgba(124,58,237,0.09); border:1px solid rgba(124,58,237,.2); color:#6d28d9; }

.sp-ns-panel-title {
    font-family:'Inter',sans-serif; font-size:clamp(1.35rem,2.4vw,1.85rem);
    font-weight:800; color:var(--sp-text-h); line-height:1.25; letter-spacing:-.02em; margin-bottom:14px;
}

.sp-ns-panel-desc { font-size:15px; color:#475569; line-height:1.72; margin-bottom:28px; }

/* Feature chips */
.sp-ns-features { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }

.sp-ns-feature {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px;
    background:var(--sp-off-white); border:1px solid rgba(148,163,184,0.15); border-radius:12px;
    transition:background .22s, border-color .22s, transform .22s;
}

.sp-ns-feature:hover { background:var(--sp-bg); border-color:rgba(182,31,53,0.18); transform:translateX(4px); }

.sp-ns-feature-icon {
    width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sp-ns-feature-icon svg { width:16px; height:16px; }
.sp-ns-feature-icon--blue   { background:rgba(182,31,53,0.10); } .sp-ns-feature-icon--blue   svg { color:var(--sp-primary); }
.sp-ns-feature-icon--green  { background:rgba(5,150,105,0.10);  } .sp-ns-feature-icon--green  svg { color:#059669; }
.sp-ns-feature-icon--violet { background:rgba(124,58,237,0.10); } .sp-ns-feature-icon--violet svg { color:#7c3aed; }
.sp-ns-feature-icon--cyan   { background:rgba(6,182,212,0.10);  } .sp-ns-feature-icon--cyan   svg { color:#0891b2; }
.sp-ns-feature-icon--amber  { background:rgba(245,158,11,0.10); } .sp-ns-feature-icon--amber  svg { color:#d97706; }

.sp-ns-feature-label { font-size:14px; font-weight:600; color:var(--sp-text-h); flex:1; }
.sp-ns-feature-desc  { font-size:12px; color:var(--sp-text-muted); margin-top:1px; }
.sp-ns-feature-text  { display:flex; flex-direction:column; }

.sp-ns-panel-actions { display:flex; gap:12px; flex-wrap:wrap; }

.sp-ns-btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-dark)); color:#fff; border:none; border-radius:12px;
    padding:13px 24px; font-size:14.5px; font-weight:700; font-family:'Inter',sans-serif;
    text-decoration:none; cursor:pointer; transition:background .26s,transform .2s,box-shadow .26s;
    box-shadow:0 5px 20px rgba(182,31,53,.28);
}
.sp-ns-btn-primary:hover { background:linear-gradient(135deg,var(--sp-primary-light),var(--sp-primary)); transform:translateY(-2px); box-shadow:0 9px 28px rgba(182,31,53,.40); color:#fff; text-decoration:none; }
.sp-ns-btn-primary svg { width:16px; height:16px; }

.sp-ns-btn-ghost {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:#374151; border:1.5px solid rgba(148,163,184,0.35); border-radius:12px;
    padding:11px 22px; font-size:14.5px; font-weight:600; font-family:'Inter',sans-serif;
    text-decoration:none; cursor:pointer; transition:background .24s,border-color .24s,transform .2s;
}
.sp-ns-btn-ghost:hover { background:rgba(182,31,53,0.06); border-color:rgba(182,31,53,0.30); transform:translateY(-2px); color:var(--sp-primary); text-decoration:none; }
.sp-ns-btn-ghost svg { width:15px; height:15px; }

/* Visual side — code / dashboard / phone mockups */
.sp-ns-visual { position:relative; }

/* API code block */
.sp-ns-code-card {
    background:linear-gradient(145deg,#0f172a,#1e293b);
    border-radius:18px; border:1px solid rgba(255,255,255,0.07);
    overflow:hidden; box-shadow:0 24px 60px rgba(15,23,42,.30);
    animation:sp-ns-float 7s ease-in-out infinite;
}

@keyframes sp-ns-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.sp-ns-code-header {
    background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.07);
    padding:12px 18px; display:flex; align-items:center; gap:8px;
}
.sp-ns-code-dot { width:9px; height:9px; border-radius:50%; }
.sp-ns-code-dot:nth-child(1){background:#ef4444}
.sp-ns-code-dot:nth-child(2){background:#f59e0b}
.sp-ns-code-dot:nth-child(3){background:#22c55e}
.sp-ns-code-file { font-size:var(--sp-fs-xs); color:rgba(255,255,255,.4); margin-left:6px; letter-spacing:.04em; }

.sp-ns-code-body { padding:20px 22px; }

.sp-ns-code-line { display:flex; gap:14px; line-height:1.8; font-size:12.5px; font-family:'Courier New',monospace; }
.sp-ns-code-ln   { color:rgba(255,255,255,.2); min-width:16px; user-select:none; }
.sp-ns-code-text { flex:1; }

.sp-ns-c-key   { color:#7dd3fc; }
.sp-ns-c-str   { color:#86efac; }
.sp-ns-c-num   { color:#fca5a5; }
.sp-ns-c-punc  { color:rgba(255,255,255,.5); }
.sp-ns-c-com   { color:rgba(255,255,255,.3); font-style:italic; }
.sp-ns-c-kw    { color:#c4b5fd; }
.sp-ns-c-fn    { color:#fde68a; }

/* API badge */
.sp-ns-api-badge {
    position:absolute; top:-12px; right:-12px;
    background:linear-gradient(135deg,#10b981,#059669); color:#fff;
    border-radius:12px; padding:10px 14px; font-size:var(--sp-fs-xs); font-weight:700;
    box-shadow:0 8px 24px rgba(16,185,129,.32);
    display:flex; align-items:center; gap:6px;
    animation:sp-ns-float 5s ease-in-out infinite .8s;
}
.sp-ns-api-badge svg { width:14px; height:14px; }

/* Dashboard visual */
.sp-ns-dash-card {
    background:#fff; border-radius:18px; border:1px solid rgba(148,163,184,.15);
    box-shadow:0 20px 56px rgba(30,58,138,.10);
    overflow:hidden;
    animation:sp-ns-float 7s ease-in-out infinite;
}
.sp-ns-dash-topbar {
    background:linear-gradient(135deg,var(--sp-primary-dark),var(--sp-primary)); padding:16px 20px;
    display:flex; align-items:center; justify-content:space-between;
}
.sp-ns-dash-topbar-title { font-size:13px; font-weight:700; color:#fff; }
.sp-ns-dash-topbar-badge {
    background:rgba(255,255,255,.15); border-radius:50px; padding:3px 10px;
    font-size:10px; color:#fff; font-weight:600;
}
.sp-ns-dash-body { padding:18px; }
.sp-ns-dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.sp-ns-dash-kpi { background:var(--sp-off-white); border-radius:10px; padding:10px 12px; text-align:center; }
.sp-ns-dash-kpi-val { font-size:var(--sp-fs-base); font-weight:800; color:var(--sp-text-h); letter-spacing:-.02em; }
.sp-ns-dash-kpi-label { font-size:9.5px; color:#94a3b8; margin-top:2px; text-transform:uppercase; letter-spacing:.05em; }

.sp-ns-dash-row {
    display:flex; align-items:center; gap:10px; padding:9px 0;
    border-bottom:1px solid rgba(148,163,184,0.10);
}
.sp-ns-dash-row:last-child { border-bottom:none; }
.sp-ns-dash-dot2 { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sp-ns-dash-row-label { flex:1; font-size:12px; color:var(--sp-text-body); font-weight:500; }
.sp-ns-dash-row-val { font-size:12px; font-weight:700; }
.sp-ns-dash-row-val.up { color:#059669; }
.sp-ns-dash-row-val.down { color:#dc2626; }

/* Phone mockup for mobile panel */
.sp-ns-phone {
    width:230px; margin:0 auto;
    background:linear-gradient(145deg,#0f172a,#1e293b);
    border-radius:36px; border:6px solid #1e293b;
    box-shadow:0 28px 64px rgba(15,23,42,.32), 0 0 0 1px rgba(255,255,255,.06);
    overflow:hidden; position:relative;
    animation:sp-ns-float 7s ease-in-out infinite;
}
.sp-ns-phone-notch {
    width:80px; height:16px; background:#1e293b;
    border-radius:0 0 12px 12px; margin:0 auto 14px;
    position:relative; z-index:1;
}
.sp-ns-phone-screen { padding:4px 14px 20px; }
.sp-ns-phone-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:14px;
}
.sp-ns-phone-header-title { font-size:13px; font-weight:700; color:#f8fafc; }
.sp-ns-phone-avatar {
    width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-light));
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:800; color:#fff;
}
.sp-ns-phone-balance {
    background:linear-gradient(135deg,var(--sp-primary-dark),var(--sp-primary) 55%,var(--sp-primary-light));
    border-radius:14px; padding:14px; margin-bottom:12px;
    text-align:center;
}
.sp-ns-phone-balance-label { font-size:9px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.07em; }
.sp-ns-phone-balance-amount { font-size:20px; font-weight:800; color:#fff; letter-spacing:-.02em; margin-top:3px; }
.sp-ns-phone-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.sp-ns-phone-action { background:rgba(255,255,255,.06); border-radius:10px; padding:10px 6px; text-align:center; }
.sp-ns-phone-action svg { width:16px; height:16px; color:#60a5fa; }
.sp-ns-phone-action-label { font-size:8.5px; color:rgba(255,255,255,.5); margin-top:4px; }
.sp-ns-phone-tx { display:flex; flex-direction:column; gap:6px; }
.sp-ns-phone-tx-item {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.05); border-radius:8px; padding:7px 9px;
}
.sp-ns-phone-tx-icon {
    width:22px; height:22px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-size:7px; font-weight:800; color:#fff; flex-shrink:0;
}
.sp-ns-phone-tx-icon--a    { background:linear-gradient(135deg,#ef4444,#dc2626); }
.sp-ns-phone-tx-icon--o    { background:linear-gradient(135deg,#f97316,#ea580c); }
.sp-ns-phone-tx-icon--afm  { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.sp-ns-phone-tx-icon--card { background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-dark)); font-size:9px; }
.sp-ns-phone-tx-info { flex:1; }
.sp-ns-phone-tx-name { font-size:9.5px; font-weight:600; color:rgba(255,255,255,.8); }
.sp-ns-phone-tx-time { font-size:8px; color:rgba(255,255,255,.35); }
.sp-ns-phone-tx-amount { font-size:10px; font-weight:700; color:#34d399; }

/* Floating badge on phone */
.sp-ns-phone-notif {
    position:absolute; bottom:-10px; right:-24px;
    background:#fff; border-radius:10px; padding:8px 12px;
    box-shadow:0 8px 28px rgba(15,23,42,.16);
    font-size:var(--sp-fs-xs); font-weight:700; color:var(--sp-text-h);
    white-space:nowrap; display:flex; align-items:center; gap:7px;
    animation:sp-ns-float 5s ease-in-out infinite .6s;
}
.sp-ns-phone-notif svg { width:14px; height:14px; color:#10b981; }

/* ── Responsive ── */
@media (max-width:860px) {
    .sp-ns-panel--api,
    .sp-ns-panel--portal,
    .sp-ns-panel--mobile { grid-template-columns:1fr; gap:40px; }
    .sp-ns-code-card { font-size:var(--sp-fs-xs); }
    .sp-ns-phone { width:200px; }
}

@media (max-width:600px) {
    .sp-ns-tabs { gap:6px; }
    .sp-ns-tab  { padding:9px 16px; font-size:13px; }
    .sp-ns-panel-actions { flex-direction:column; }
    .sp-ns-btn-primary, .sp-ns-btn-ghost { width:100%; justify-content:center; }
}

@media (prefers-color-scheme:dark) {
    .sp-ns-section { background:#0a0f1e; }
    .sp-ns-title   { color:#f1f5f9; }
    .sp-ns-sub     { color:#94a3b8; }
    .sp-ns-panel-title { color:#f1f5f9; }
    .sp-ns-panel-desc  { color:#94a3b8; }
    .sp-ns-feature { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
    .sp-ns-feature-label { color:#f1f5f9; }
    .sp-ns-tab  { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); color:#94a3b8; }
    .sp-ns-tab:hover { background:rgba(182,31,53,.15); }
    .sp-ns-dash-card { background:#1e293b; border-color:rgba(255,255,255,.08); }
    .sp-ns-dash-kpi  { background:rgba(255,255,255,.05); }
    .sp-ns-dash-kpi-val { color:#f1f5f9; }
}

@media (prefers-reduced-motion:reduce) {
    .sp-ns-fade { opacity:1 !important; transform:none !important; transition:none !important; }
    .sp-ns-code-card, .sp-ns-dash-card, .sp-ns-phone, .sp-ns-api-badge, .sp-ns-phone-notif { animation:none !important; }
    .sp-ns-feature:hover { transform:none !important; }
}