/* Accueil du modèle Neo (style Space) — fond étoilé bleu nuit, accents jaune et bleu, boutons
 * arrondis, défilement des réseaux. Tous les styles sont préfixés sp- et
 * limités à .sp-page pour ne rien toucher aux autres modèles. */

.sp-page {
    --sp-bg: #050b1f;
    --sp-bg-2: #0a1230;
    --sp-yellow: #f7c948;
    --sp-blue: #6b8cf0;
    --sp-blue-deep: #3d5bd6;
    --sp-text: #e8ecf8;
    --sp-dim: #aab4d4;
    --sp-line: rgba(107, 140, 240, 0.35);
    position: relative;
    min-height: 100vh;
    background-color: var(--sp-bg);
    background-image:
        radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 62%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 48% 28%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 86% 54%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 62% 80%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 51%),
        radial-gradient(ellipse at 75% 20%, rgba(61, 91, 214, 0.45), transparent 60%),
        linear-gradient(180deg, var(--sp-bg-2), var(--sp-bg) 70%);
    color: var(--sp-text);
    font-family: 'Montserrat', Inter, system-ui, sans-serif;
    overflow-x: hidden;
}
.sp-page * { box-sizing: border-box; }
.sp-page a { color: inherit; text-decoration: none; }
.sp-yellow { color: var(--sp-yellow); }
.sp-blue { color: var(--sp-blue); }

/* En-tête */
.sp-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 22px 6vw; flex-wrap: wrap;
}
.sp-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; }
.sp-logo-mark {
    width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); color: #111;
}
.sp-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-weight: 700; font-size: .95rem; }
.sp-nav a:hover { color: var(--sp-yellow); }
.sp-nav a:first-child { color: var(--sp-yellow); text-shadow: 0 0 12px rgba(247, 201, 72, .6); }
.sp-nav-cta {
    padding: 10px 20px; border-radius: 999px; background: var(--sp-blue); color: #fff !important;
    box-shadow: 0 8px 22px rgba(107, 140, 240, .35);
}
.sp-burger { display: none; background: none; border: 0; color: #fff; font-size: 1.3rem; }

/* Boutons */
.sp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 34px; border-radius: 999px; font-weight: 700; font-size: 1.05rem; border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sp-btn:hover { transform: translateY(-2px); }
.sp-btn-blue { background: var(--sp-blue); color: #fff; box-shadow: 0 12px 30px rgba(107, 140, 240, .4); }
.sp-btn-yellow { background: var(--sp-yellow); color: #111; box-shadow: 0 0 26px rgba(247, 201, 72, .45); }

/* Accroche */
.sp-hero {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 40px;
    padding: 36px 6vw 40px;
}
.sp-kicker { color: var(--sp-yellow); font-weight: 600; font-size: 1.05rem; }
.sp-hero h1 {
    margin: 14px 0 18px; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em;
}
.sp-sub { color: var(--sp-dim); max-width: 560px; font-size: 1.05rem; line-height: 1.6; margin: 0 0 28px; }
.sp-hero-art { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.sp-orbit {
    width: 300px; height: 300px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #ffe27a, #f7c948 35%, #3d5bd6 75%, transparent 76%);
    box-shadow: 0 0 80px rgba(107, 140, 240, .35), inset 0 0 40px rgba(255, 255, 255, .15);
    font-size: 5rem; color: #fff; text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Connexion */
.sp-login { padding: 8px 6vw 30px; }
.sp-login-form { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.sp-field {
    display: flex; align-items: center; gap: 14px; flex: 1 1 300px; max-width: 480px;
    background: rgba(5, 11, 31, .85); border: 1.5px solid var(--sp-yellow); border-radius: 999px;
    padding: 6px 22px 6px 6px; min-height: 64px;
}
.sp-field > i {
    width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-yellow); color: #111; flex-shrink: 0;
}
.sp-field input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 1rem;
}
.sp-field input::placeholder { color: #6b7394; }
.sp-login-form .sp-btn { min-width: 170px; }
.sp-login-links {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1000px; margin: 18px auto 0;
    color: var(--sp-dim); font-size: .95rem;
}
.sp-login-links a { font-weight: 700; }

/* Défilement des réseaux */
.sp-networks { overflow: hidden; padding: 30px 0 46px; }
.sp-network-track { display: flex; gap: 22px; width: max-content; animation: sp-scroll 28s linear infinite; padding: 0 22px; }
.sp-network {
    width: 190px; height: 170px; flex-shrink: 0; border-radius: 22px; border: 1px solid var(--sp-line);
    background: linear-gradient(160deg, rgba(20, 30, 70, .9), rgba(8, 14, 40, .95));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.sp-network i {
    font-size: 3.1rem; color: #fff; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 25%, var(--c1), var(--c2));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.sp-network span { color: var(--sp-dim); font-weight: 600; font-size: .9rem; }
@keyframes sp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Avantages */
.sp-features { padding: 40px 6vw 20px; text-align: center; }
.sp-features h2, .sp-cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin: 0 0 30px; }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.sp-card {
    background: linear-gradient(160deg, rgba(20, 30, 70, .75), rgba(8, 14, 40, .9)); border: 1px solid var(--sp-line);
    border-radius: 22px; padding: 30px 26px; text-align: left;
}
.sp-card-icon {
    width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); color: #111; font-size: 1.3rem; margin-bottom: 18px;
}
.sp-card h3 { margin: 0 0 10px; font-size: 1.15rem; }
.sp-card p { margin: 0; color: var(--sp-dim); line-height: 1.6; }

/* Appel final et pied de page */
.sp-cta { padding: 60px 6vw 30px; text-align: center; }
.sp-cta p { color: var(--sp-dim); margin: 0 0 26px; font-size: 1.05rem; }
.sp-contact-line { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 28px; color: var(--sp-dim); }
.sp-contact-line span:empty { display: none; }
.sp-contact-email::before, .sp-contact-phone::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--sp-yellow); margin-right: 8px; }
.sp-contact-email::before { content: '\f0e0'; }
.sp-contact-phone::before { content: '\f095'; }
.sp-footer {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
    padding: 26px 6vw; border-top: 1px solid var(--sp-line); color: var(--sp-dim); font-size: .9rem;
}
.sp-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.sp-footer-links a:hover { color: var(--sp-yellow); }

/* Mobile */
@media (max-width: 900px) {
    .sp-hero { grid-template-columns: 1fr; text-align: center; }
    .sp-sub { margin-left: auto; margin-right: auto; }
    .sp-hero-art { min-height: 200px; }
    .sp-orbit { width: 200px; height: 200px; font-size: 3.4rem; }
    .sp-cards { grid-template-columns: 1fr; }
    .sp-nav { display: none; }
    .sp-burger { display: block; }
    .sp-header { justify-content: space-between; }
}
@media (max-width: 560px) {
    .sp-field { flex-basis: 100%; }
    .sp-login-form .sp-btn { width: 100%; }
    .sp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-network-track { animation: none; }
}

/* Sections ajoutées : étapes, paiements, questions fréquentes */
.sp-steps { padding: 60px 6vw 20px; text-align: center; }
.sp-steps h2, .sp-payments h2, .sp-faq h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin: 0 0 30px; }
.sp-step-num {
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--sp-blue); color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(107, 140, 240, .4);
}
.sp-payments { padding: 50px 6vw 10px; text-align: center; }
.sp-dim { color: var(--sp-dim); max-width: 640px; margin: -16px auto 26px; line-height: 1.6; }
.sp-pay-list { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.sp-pay-list span {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
    border: 1px solid var(--sp-line); background: rgba(8, 14, 40, .8); font-weight: 700;
}
.sp-pay-list i { color: var(--sp-yellow); }
.sp-faq { padding: 50px 6vw 10px; max-width: 900px; margin: 0 auto; }
.sp-faq h2 { text-align: center; }
.sp-faq-item {
    border: 1px solid var(--sp-line); border-radius: 16px; background: rgba(8, 14, 40, .85);
    margin-bottom: 12px; padding: 4px 22px;
}
.sp-faq-item summary {
    cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary::after { content: '+'; color: var(--sp-yellow); font-size: 1.4rem; line-height: 1; }
.sp-faq-item[open] summary::after { content: '−'; }
.sp-faq-item p { margin: 0 0 16px; color: var(--sp-dim); line-height: 1.6; }

/* Sections v2 : services par réseau, engagements, pied de page complet */
.sp-services { padding: 60px 6vw 20px; text-align: center; }
.sp-services h2, .sp-guarantees h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin: 0 0 14px; }
.sp-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1100px; margin: 30px auto 34px; }
.sp-svc {
    display: block; text-align: left; padding: 26px; border-radius: 22px; border: 1px solid var(--sp-line);
    background: linear-gradient(160deg, rgba(20, 30, 70, .75), rgba(8, 14, 40, .9)); transition: transform .15s ease, border-color .15s ease;
}
.sp-svc:hover { transform: translateY(-3px); border-color: var(--sp-yellow); }
.sp-svc i { font-size: 2rem; margin-bottom: 14px; color: #fff; }
.sp-svc i.fa-ellipsis { color: var(--sp-yellow); }
.sp-svc h3 { margin: 0 0 8px; font-size: 1.1rem; }
.sp-svc p { margin: 0; color: var(--sp-dim); line-height: 1.5; font-size: .95rem; }
.sp-center { text-align: center; }
.sp-guarantees { padding: 50px 6vw 10px; text-align: center; }
.sp-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; }
.sp-footer { flex-direction: column; align-items: stretch; gap: 30px; }
.sp-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.sp-footer-col { display: flex; flex-direction: column; gap: 10px; }
.sp-footer-col h4 { margin: 0 0 4px; color: #fff; font-size: 1rem; }
.sp-footer-col a { color: var(--sp-dim); font-size: .95rem; }
.sp-footer-col a:hover { color: var(--sp-yellow); }
.sp-footer-brand { font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.sp-footer-brand i { color: var(--sp-yellow); }
.sp-footer-col .sp-dim { margin: 0; font-size: .92rem; }
.sp-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--sp-line); padding-top: 20px; color: var(--sp-dim); font-size: .88rem; }
@media (max-width: 900px) {
    .sp-svc-grid { grid-template-columns: 1fr 1fr; }
    .sp-cards-4 { grid-template-columns: 1fr 1fr; }
    .sp-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sp-svc-grid, .sp-cards-4, .sp-footer-cols { grid-template-columns: 1fr; }
}

/* ===== Responsive : barre, accroche, connexion, réseaux ===== */
.sp-page { --sp-pad: clamp(16px, 5vw, 6vw); }
.sp-header, .sp-hero, .sp-login, .sp-networks, .sp-features, .sp-steps, .sp-payments, .sp-faq, .sp-services, .sp-guarantees, .sp-cta, .sp-footer {
    padding-left: var(--sp-pad); padding-right: var(--sp-pad);
}
.sp-header { position: relative; }
.sp-logo-name { white-space: nowrap; }
.sp-hero h1 { font-size: clamp(2rem, 5.2vw, 3.8rem); }
.sp-sub { font-size: clamp(.95rem, 1.6vw, 1.05rem); }
.sp-orbit { width: clamp(150px, 26vw, 300px); height: clamp(150px, 26vw, 300px); font-size: clamp(2.4rem, 5vw, 5rem); }
.sp-hero-art { min-height: clamp(160px, 30vw, 320px); }
.sp-field input { font-size: clamp(.9rem, 1.6vw, 1rem); min-width: 0; }
.sp-network { width: clamp(150px, 16vw, 190px); height: auto; min-height: 150px; }
.sp-network i { width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px); font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
.sp-card, .sp-svc { min-width: 0; }
.sp-footer-cols > * { min-width: 0; }

/* Menu burger (mobile) */
@media (max-width: 900px) {
    .sp-header { flex-wrap: nowrap; }
    .sp-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--sp-pad) 18px;
        background: rgba(5, 11, 31, .97); border-bottom: 1px solid var(--sp-line); box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
    }
    .sp-header.sp-open .sp-nav { display: flex; }
    .sp-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(107, 140, 240, .15); font-size: 1rem; }
    .sp-nav a:last-child { border-bottom: 0; }
    .sp-nav-cta { margin-top: 12px; text-align: center; border-bottom: 0 !important; }
    .sp-burger {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
        border: 1px solid var(--sp-line); background: rgba(8, 14, 40, .8); cursor: pointer;
    }
    .sp-hero { grid-template-columns: 1fr; text-align: center; gap: 24px; padding-top: 16px; }
    .sp-sub { margin-left: auto; margin-right: auto; }
    .sp-hero .sp-btn { width: auto; }
    .sp-hero-art { order: -1; min-height: 0; }
    .sp-login-form { flex-direction: column; align-items: stretch; }
    .sp-field { flex: 1 1 auto; max-width: none; width: 100%; }
    .sp-login-form .sp-btn { width: 100%; min-width: 0; }
    .sp-login-links { flex-direction: column; align-items: center; text-align: center; }
    .sp-cards, .sp-cards-4 { grid-template-columns: 1fr; }
    .sp-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sp-header { padding-top: 14px; padding-bottom: 14px; }
    .sp-logo { font-size: 1.05rem; }
    .sp-logo-mark { width: 34px; height: 34px; }
    .sp-hero { padding-bottom: 20px; }
    .sp-hero h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
    .sp-kicker { font-size: .95rem; }
    .sp-btn { padding: 14px 24px; font-size: 1rem; }
    .sp-btn-blue, .sp-btn-yellow { width: 100%; }
    .sp-orbit { width: 140px; height: 140px; }
    .sp-network { width: 140px; min-height: 0; }
    .sp-network-track { gap: 14px; }
    .sp-svc-grid { grid-template-columns: 1fr; }
    .sp-pay-list span { padding: 10px 16px; font-size: .9rem; }
    .sp-faq-item summary { font-size: .95rem; }
    .sp-footer-cols { grid-template-columns: 1fr; }
    .sp-footer-bottom { flex-direction: column; text-align: center; }
    .sp-contact-line { flex-direction: column; align-items: center; gap: 10px; }
}
@media (min-width: 561px) and (max-width: 900px) {
    .sp-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ===== v4 : œil du mot de passe, en-tête collant, champs et icônes séparés ===== */
.sp-field > i { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-yellow); color: #111; flex-shrink: 0; }
.sp-field input { padding: 0; }
.sp-eye {
    margin-left: auto; flex-shrink: 0; background: transparent; border: 0; color: var(--sp-dim);
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.sp-eye:hover, .sp-eye[aria-pressed="true"] { color: var(--sp-yellow); }
.sp-eye:focus-visible { outline: 2px solid var(--sp-yellow); outline-offset: 2px; }
.sp-header { position: sticky; top: 0; z-index: 60; background: rgba(5, 11, 31, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sp-field:focus-within { box-shadow: 0 0 0 4px rgba(247, 201, 72, .18); }
.sp-login-form .sp-btn { white-space: nowrap; }
@media (max-width: 560px) {
    .sp-login-form .sp-btn { width: 100%; }
    .sp-field { min-height: 58px; }
    .sp-field > i { width: 42px; height: 42px; }
    .sp-login-links a, .sp-login-links span { font-size: .92rem; }
}

/* ===== v5 : points forts, titre des réseaux, double appel, barre mobile ===== */
.sp-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.sp-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--sp-dim); font-size: .95rem; font-weight: 600; }
.sp-trust i { color: var(--sp-yellow); font-size: .8rem; }
.sp-net-title { text-align: center; font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; margin: 0 0 22px; padding: 0 var(--sp-pad, 6vw); }
.sp-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sp-btn-ghost { background: transparent; color: var(--sp-text); border: 1.5px solid var(--sp-line); }
.sp-btn-ghost:hover { border-color: var(--sp-yellow); color: var(--sp-yellow); }
.sp-mobile-bar { display: none; }
.sp-btn:focus-visible, .sp-svc:focus-visible, .sp-faq-item summary:focus-visible, .sp-nav a:focus-visible {
    outline: 2px solid var(--sp-yellow); outline-offset: 3px;
}
@media (max-width: 560px) {
    .sp-trust { justify-content: center; }
    .sp-cta-actions { flex-direction: column; align-items: stretch; }
    .sp-cta-actions .sp-btn { width: 100%; }
    .sp-mobile-bar {
        display: block; position: sticky; bottom: 0; z-index: 55; padding: 12px var(--sp-pad, 16px);
        background: linear-gradient(180deg, rgba(5, 11, 31, 0), rgba(5, 11, 31, .96) 40%);
    }
    .sp-mobile-bar .sp-btn { width: 100%; padding: 14px 20px; box-shadow: 0 10px 26px rgba(107, 140, 240, .45); }
}

/* ===== v6 : page de connexion Neo (même univers que l'accueil) ===== */
.sp-auth { min-height: 100vh; display: flex; flex-direction: column; }
.sp-auth-top { justify-content: space-between; }
.sp-nav-back { font-weight: 700; color: var(--sp-dim); display: inline-flex; align-items: center; gap: 8px; }
.sp-nav-back:hover { color: var(--sp-yellow); }
.sp-auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px var(--sp-pad, 6vw) 48px; }
.sp-auth-card {
    width: 100%; max-width: 440px; padding: clamp(24px, 4vw, 38px);
    background: linear-gradient(160deg, rgba(20, 30, 70, .8), rgba(8, 14, 40, .94));
    border: 1px solid var(--sp-line); border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.sp-auth-card h1 { margin: 0 0 6px; font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 800; text-align: center; }
.sp-auth-sub { margin: 0 0 26px; text-align: center; color: var(--sp-dim); }
.sp-auth-form { display: flex; flex-direction: column; gap: 10px; }
.sp-auth-label { font-weight: 700; font-size: .92rem; color: var(--sp-text); margin-top: 6px; }
.sp-auth-form .sp-field { flex: none; max-width: none; width: 100%; }
.sp-auth-row { display: flex; justify-content: flex-end; font-size: .92rem; font-weight: 700; margin-top: 2px; }
.sp-btn-block { width: 100%; margin-top: 10px; }
.sp-auth-foot { margin: 22px 0 0; text-align: center; color: var(--sp-dim); }
.sp-auth-foot a, .sp-auth-row a { font-weight: 700; }
.sp-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: .92rem; font-weight: 600; margin-bottom: 14px; }
.sp-alert-ok { background: rgba(34, 197, 94, .12); color: #86efac; border: 1px solid rgba(34, 197, 94, .35); }
.sp-alert-err { background: rgba(248, 113, 113, .12); color: #fca5a5; border: 1px solid rgba(248, 113, 113, .35); }
@media (max-width: 560px) {
    .sp-auth-card { border-radius: 20px; }
    .sp-auth-wrap { padding-top: 8px; align-items: flex-start; }
    .sp-nav-back span { display: none; }
}

/* Le <body> reçoit .theme-scope (habillage "fenêtre de builder" : bordure, coins arrondis, fond gris)
   → on le retire quand la page Neo occupe déjà tout l'écran. */
body.theme-scope:has(.sp-page) { border: 0; border-radius: 0; margin: 0; max-width: none; background: var(--sp-bg); overflow: visible; }

/* ===== v7 : pages d'authentification Neo en plein écran (sans le cadre du site) ===== */
.sp-auth {
    position: fixed; inset: 0; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch;
    min-height: 0; background-attachment: fixed;
}
.sp-auth-top { position: sticky; top: 0; }

/* ===== v8 : catalogue des services Neo ===== */
.sp-svc-page { padding-bottom: 60px; }
.sp-svc-hero { padding: 40px var(--sp-pad, 6vw) 10px; text-align: center; }
.sp-svc-hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; margin: 10px 0 10px; }
.sp-svc-hero .sp-dim { margin: 0 auto 24px; }
.sp-svc-search { display: flex; gap: 12px; max-width: 760px; margin: 0 auto 18px; align-items: center; }
.sp-svc-search .sp-field { flex: 1; min-width: 0; }
.sp-svc-search .sp-btn { flex-shrink: 0; padding: 14px 26px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.sp-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .92rem;
    border: 1px solid var(--sp-line); background: rgba(8, 14, 40, .8); color: var(--sp-text);
}
.sp-chip:hover { border-color: var(--sp-yellow); color: var(--sp-yellow); }
.sp-chip.active { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; box-shadow: 0 8px 20px rgba(107, 140, 240, .35); }
.sp-svc-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: center; max-width: 900px; margin: 0 auto; }
.sp-svc-filters .sp-auth-label { margin: 0; }
.sp-select {
    background: rgba(5, 11, 31, .85); color: var(--sp-text); border: 1.5px solid var(--sp-line); border-radius: 999px;
    padding: 11px 18px; font: inherit; font-weight: 600; min-width: 180px;
}
.sp-select:focus { outline: none; border-color: var(--sp-yellow); }
.sp-svc-results { padding: 26px var(--sp-pad, 6vw) 0; }
.sp-svc-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.sp-svc-bar .sp-text { color: var(--sp-text); }
.sp-svc-links { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.sp-svc-card {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 22px; border: 1px solid var(--sp-line);
    background: linear-gradient(160deg, rgba(20, 30, 70, .8), rgba(8, 14, 40, .95)); transition: transform .15s ease, border-color .15s ease;
}
.sp-svc-card:hover { transform: translateY(-3px); border-color: var(--sp-yellow); }
.sp-svc-top { display: flex; align-items: flex-start; gap: 12px; }
.sp-svc-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); color: #111; font-size: 1.1rem; overflow: hidden;
}
.sp-svc-badges { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.sp-badge { padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(107, 140, 240, .18); color: #c7d2fe; }
.sp-badge-muted { background: rgba(255, 255, 255, .06); color: var(--sp-dim); }
.sp-fav-form { margin: 0; }
.sp-fav {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sp-line); background: transparent; color: var(--sp-dim); cursor: pointer;
}
.sp-fav.active, .sp-fav:hover { color: #f87171; border-color: #f87171; }
.sp-svc-card h3 { margin: 4px 0 0; font-size: 1.05rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.sp-svc-desc { margin: 0; color: var(--sp-dim); font-size: .92rem; line-height: 1.55; }
.sp-svc-sales { margin: 0; color: var(--sp-dim); font-size: .85rem; }
.sp-svc-price {
    display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 12px 14px; border-radius: 14px;
    background: rgba(5, 11, 31, .7); border: 1px solid var(--sp-line);
}
.sp-svc-price span { color: var(--sp-dim); font-size: .85rem; font-weight: 600; }
.sp-svc-price strong { color: var(--sp-yellow); font-size: 1.1rem; font-weight: 800; }
.sp-svc-card .sp-btn-block { margin-top: 2px; padding: 13px 20px; font-size: .98rem; }
.sp-empty { text-align: center; color: var(--sp-dim); padding: 40px 0; }
.sp-pager { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 560px) {
    .sp-svc-search { flex-direction: column; align-items: stretch; }
    .sp-svc-search .sp-btn { width: 100%; }
    .sp-svc-cards { grid-template-columns: 1fr; }
    .sp-select { flex: 1 1 100%; min-width: 0; }
    .sp-svc-filters .sp-btn { width: 100%; }
}

/* ===== v9 : en-tête du catalogue Neo (compact, recherche, réseaux, filtres) ===== */
.sp-svc-hero { padding: 26px var(--sp-pad, 6vw) 8px; text-align: left; }
.sp-svc-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.sp-svc-head h1 { margin: 2px 0 0; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sp-svc-head .sp-kicker { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.sp-svc-head .sp-svc-links { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-svc-search { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; }
.sp-svc-search-field {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px;
    border-radius: 16px; background: rgba(5, 11, 31, .85); border: 1.5px solid var(--sp-line); transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-svc-search-field:focus-within { border-color: var(--sp-yellow); box-shadow: 0 0 0 4px rgba(247, 201, 72, .15); }
.sp-svc-search-field i { color: var(--sp-yellow); }
.sp-svc-search-field input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--sp-text); font: inherit; font-size: 1rem;
}
.sp-svc-search-field input::placeholder { color: #6b7394; }
.sp-svc-search .sp-btn { height: 54px; padding: 0 26px; border-radius: 16px; }
.sp-chips {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 0 0 14px;
}
.sp-chip { padding: 9px 16px; font-size: .88rem; }
.sp-chip i.fab, .sp-chip i.fas { font-size: .95rem; }
.sp-svc-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; border-radius: 18px;
    background: rgba(8, 14, 40, .7); border: 1px solid var(--sp-line);
}
.sp-tool { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 180px; }
.sp-tool > span { font-size: .78rem; font-weight: 700; color: var(--sp-dim); text-transform: uppercase; letter-spacing: .06em; }
.sp-tool .sp-select { min-width: 0; width: 100%; border-radius: 12px; padding: 11px 14px; }
.sp-tool-go { height: 44px; padding: 0 24px; border-radius: 12px; }
.sp-svc-results { padding-top: 18px; }
.sp-svc-bar { margin-bottom: 14px; }
@media (max-width: 560px) {
    .sp-svc-hero { padding-top: 18px; }
    .sp-svc-head { align-items: flex-start; }
    .sp-svc-search { flex-direction: column; align-items: stretch; }
    .sp-svc-search .sp-btn { width: 100%; height: 50px; }
    .sp-svc-search-field { height: 50px; }
    .sp-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin-left: calc(-1 * var(--sp-pad, 16px)); margin-right: calc(-1 * var(--sp-pad, 16px)); padding-left: var(--sp-pad, 16px); padding-right: var(--sp-pad, 16px); }
    .sp-chips::-webkit-scrollbar { display: none; }
    .sp-chip { flex-shrink: 0; }
    .sp-svc-toolbar { flex-direction: column; align-items: stretch; }
    .sp-tool { flex: 1 1 auto; }
    .sp-tool-go { width: 100%; }
}

/* ===== v10 : en-tête connecté Neo (barre du haut + barre d'icônes), sur toutes les pages ===== */
body[data-structure-key="neo"] .real-header-logged {
    position: sticky; top: 0; z-index: 80; background: rgba(5, 11, 31, .9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sp-line);
}
body[data-structure-key="neo"] .real-top-bar { padding: 12px clamp(14px, 3vw, 28px); gap: 12px; max-width: none; }
body[data-structure-key="neo"] .real-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
body[data-structure-key="neo"] .real-brand-logo {
    width: 42px; height: 42px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(247, 201, 72, .3);
}
body[data-structure-key="neo"] .real-brand-name { font-weight: 800; color: var(--sp-text); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-structure-key="neo"] .real-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
body[data-structure-key="neo"] .real-btn-recharge, body[data-structure-key="neo"] .real-wallet-display {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px;
    font-weight: 800; font-size: .92rem; text-decoration: none; white-space: nowrap; border: 0; transition: transform .15s ease;
}
body[data-structure-key="neo"] .real-btn-recharge { background: var(--sp-yellow); color: #111; box-shadow: 0 8px 20px rgba(247, 201, 72, .3); }
body[data-structure-key="neo"] .real-wallet-display { background: var(--sp-blue); color: #fff; box-shadow: 0 8px 20px rgba(107, 140, 240, .3); }
body[data-structure-key="neo"] .real-btn-recharge:hover, body[data-structure-key="neo"] .real-wallet-display:hover { transform: translateY(-2px); }
body[data-structure-key="neo"] .real-menu-icon {
    width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sp-line); color: var(--sp-text); background: rgba(8, 14, 40, .8); text-decoration: none;
}
body[data-structure-key="neo"] .real-menu-icon:hover { border-color: var(--sp-yellow); color: var(--sp-yellow); }
/* Sélecteur de devise injecté par site-currency.js */
body[data-structure-key="neo"] .jobiz-cur-switch.inline {
    margin-left: 0; padding: 4px; border-radius: 999px; background: rgba(8, 14, 40, .9); border: 1px solid var(--sp-line); box-shadow: none;
}
body[data-structure-key="neo"] .jobiz-cur-switch.inline button { color: var(--sp-dim); font-weight: 800; padding: 7px 12px; border-radius: 999px; background: transparent; }
body[data-structure-key="neo"] .jobiz-cur-switch.inline button:hover { color: var(--sp-text); }
body[data-structure-key="neo"] .jobiz-cur-switch.inline button.active { background: var(--sp-yellow); color: #111; box-shadow: 0 4px 12px rgba(247, 201, 72, .35); }
/* Barre d'icônes */
body[data-structure-key="neo"] .real-nav-bar {
    background: transparent; border-top: 0; box-shadow: none; padding: 6px clamp(8px, 2vw, 20px) 12px;
    display: flex; justify-content: center; gap: clamp(6px, 1.4vw, 14px); overflow-x: auto; scrollbar-width: none;
}
body[data-structure-key="neo"] .real-nav-bar::-webkit-scrollbar { display: none; }
body[data-structure-key="neo"] .real-nav-item {
    position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--sp-dim); background: rgba(8, 14, 40, .7); border: 1px solid transparent; text-decoration: none; font-size: 1.05rem;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
body[data-structure-key="neo"] .real-nav-item:hover { color: var(--sp-yellow); border-color: var(--sp-line); transform: translateY(-2px); }
body[data-structure-key="neo"] .real-nav-item.current { background: var(--sp-blue); color: #fff; box-shadow: 0 10px 24px rgba(107, 140, 240, .4); }
body[data-structure-key="neo"] .real-nav-item .rn-badge { top: -4px; right: -4px; }
@media (max-width: 560px) {
    body[data-structure-key="neo"] .real-top-bar { padding: 10px 14px; }
    body[data-structure-key="neo"] .real-brand-name { display: none; }
    body[data-structure-key="neo"] .real-btn-recharge .rt-text { display: none; }
    body[data-structure-key="neo"] .real-btn-recharge, body[data-structure-key="neo"] .real-wallet-display { height: 40px; padding: 0 12px; font-size: .85rem; }
    body[data-structure-key="neo"] .real-nav-item { width: 44px; height: 44px; border-radius: 14px; }
    body[data-structure-key="neo"] .real-nav-bar { justify-content: flex-start; }
}

/* v10 : couleurs forcées pour l'en-tête Neo (les feuilles communes ajoutent fond et couleur transparents) */
body[data-structure-key="neo"] .real-btn-recharge { background: var(--sp-yellow) !important; color: #111 !important; }
body[data-structure-key="neo"] .real-wallet-display { background: var(--sp-blue) !important; color: #fff !important; }
body[data-structure-key="neo"] .jobiz-cur-switch.inline button { background-color: transparent !important; color: var(--sp-dim) !important; }
body[data-structure-key="neo"] .jobiz-cur-switch.inline button.active { background-color: var(--sp-yellow) !important; color: #111 !important; }
body[data-structure-key="neo"] .real-header-logged { background-color: rgba(5, 11, 31, .92) !important; }

/* v10 : variables Neo aussi au niveau du corps (la barre du haut est hors de .sp-page) */
body[data-structure-key="neo"] {
    --sp-bg: #050b1f;
    --sp-bg-2: #0a1230;
    --sp-yellow: #f7c948;
    --sp-blue: #6b8cf0;
    --sp-blue-deep: #3d5bd6;
    --sp-text: #e8ecf8;
    --sp-dim: #aab4d4;
    --sp-line: rgba(107, 140, 240, 0.35);
}

/* v11 : barre d'icônes plus aérée */
body[data-structure-key="neo"] .real-nav-bar { gap: clamp(14px, 3.2vw, 40px); padding-top: 10px; padding-bottom: 14px; }
body[data-structure-key="neo"] .real-nav-item { width: 52px; height: 52px; border-radius: 18px; font-size: 1.15rem; }
@media (max-width: 560px) {
    body[data-structure-key="neo"] .real-nav-bar { gap: 12px; }
    body[data-structure-key="neo"] .real-nav-item { width: 46px; height: 46px; }
}

/* v12 : catalogue Neo très responsive (320 px à 1440 px) */
.sp-svc-page { overflow-x: hidden; max-width: 100%; }
.sp-svc-hero, .sp-svc-results { min-width: 0; max-width: 100%; }
.sp-chips { max-width: 100%; }
.sp-svc-search-field input { min-width: 0; width: 100%; }
.sp-svc-cards > * { min-width: 0; }
@media (max-width: 600px) {
    .sp-svc-page { --sp-pad: 14px; }
    .sp-svc-hero { padding-top: 16px; }
    .sp-svc-head { margin-bottom: 14px; }
    .sp-svc-head h1 { font-size: 1.6rem; }
    .sp-svc-head .sp-svc-links { width: 100%; }
    .sp-svc-head .sp-svc-links .sp-chip { flex: 1 1 auto; justify-content: center; padding: 9px 12px; font-size: .84rem; }
    .sp-svc-search-field { padding: 0 14px; gap: 10px; }
    .sp-svc-search-field input { font-size: .95rem; }
    .sp-chip { padding: 8px 14px; font-size: .84rem; }
    .sp-svc-toolbar { padding: 12px; gap: 10px; }
    .sp-tool .sp-select { font-size: .95rem; padding: 10px 12px; }
    .sp-svc-card { padding: 16px; gap: 9px; border-radius: 18px; }
    .sp-svc-card h3 { font-size: 1rem; }
    .sp-svc-desc { font-size: .88rem; }
    .sp-svc-price { padding: 10px 12px; }
    .sp-svc-price strong { font-size: 1rem; }
    .sp-svc-card .sp-btn-block { padding: 12px 16px; font-size: .95rem; }
    .sp-svc-bar { justify-content: flex-start; }
    .sp-pager { gap: 8px; }
}
@media (max-width: 360px) {
    .sp-svc-search .sp-btn { font-size: .95rem; }
    .sp-svc-head .sp-svc-links { flex-direction: column; }
    .sp-svc-head .sp-svc-links .sp-chip { width: 100%; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .sp-svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-svc-toolbar { justify-content: space-between; }
}

/* v12 : barre du haut sur très petits écrans (pas de débordement à 320 px) */
@media (max-width: 380px) {
    body[data-structure-key="neo"] .real-top-bar { flex-wrap: wrap; row-gap: 10px; }
    body[data-structure-key="neo"] .real-brand-logo { width: 36px; height: 36px; border-radius: 12px; }
    body[data-structure-key="neo"] .real-top-actions { width: 100%; justify-content: space-between; gap: 6px; }
    body[data-structure-key="neo"] .real-wallet-display { padding: 0 10px; }
    body[data-structure-key="neo"] .jobiz-cur-switch.inline button { padding: 6px 8px; font-size: .78rem; }
    body[data-structure-key="neo"] .real-menu-icon { width: 38px; height: 38px; flex-shrink: 0; }
}
@media (max-width: 600px) {
    .sp-svc-search-field { height: auto; min-height: 50px; padding: 12px 14px; }
}

/* ===== v13 : page Nouvelle commande Neo ===== */
.sp-order-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 1180px; margin: 0 auto; min-height: 0; background-attachment: scroll; }
.sp-order-hero { margin-bottom: 22px; }
.sp-order-hero h1 { margin: 6px 0 8px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.sp-order-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sp-order-card {
    display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3vw, 30px); border-radius: 24px; min-width: 0;
    background: linear-gradient(160deg, rgba(20, 30, 70, .8), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.sp-order-card .sp-auth-label { margin-top: 8px; }
.sp-order-card .sp-auth-label:first-child { margin-top: 0; }
.sp-select-full { width: 100%; min-width: 0; border-radius: 14px; padding: 14px 16px; font-size: .98rem; }
.sp-order-card .sp-field { flex: none; max-width: none; width: 100%; }
.sp-order-card .sp-field input { font-size: 1rem; }
.sp-hint { margin: -2px 0 4px; font-size: .85rem; color: var(--sp-dim); }
.sp-receipt { margin-top: 10px; padding: 16px 18px; border-radius: 18px; background: rgba(5, 11, 31, .75); border: 1px solid var(--sp-line); display: flex; flex-direction: column; gap: 10px; }
.sp-receipt-row, .sp-receipt-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .95rem; color: var(--sp-dim); }
.sp-receipt-row strong { color: var(--sp-text); font-weight: 700; }
.sp-receipt-total { border-top: 1px dashed var(--sp-line); padding-top: 12px; color: var(--sp-text); font-weight: 700; }
.sp-receipt-total strong { color: var(--sp-yellow); font-size: 1.25rem; font-weight: 800; }
.sp-receipt-total strong.empty { color: var(--sp-dim); font-size: 1rem; font-weight: 600; }
.sp-wallet-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; color: var(--sp-dim); font-weight: 600; }
.sp-wallet-row strong { color: var(--sp-text); }
.sp-wallet-row i { color: var(--sp-blue); margin-right: 6px; }
.sp-order-card .sp-alert { margin: 0; }
.sp-order-card .sp-btn-block { margin-top: 6px; padding: 16px 22px; font-size: 1.05rem; }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sp-recharge-link { text-align: center; font-weight: 700; color: var(--sp-blue); margin-top: 2px; }
.sp-recharge-link:hover { color: var(--sp-yellow); }
.sp-order-aside {
    position: sticky; top: 110px; padding: 24px; border-radius: 22px; min-width: 0;
    background: rgba(8, 14, 40, .7); border: 1px solid var(--sp-line);
}
.sp-order-aside h3 { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; }
.sp-steps-mini { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-steps-mini li { display: flex; gap: 12px; align-items: flex-start; color: var(--sp-dim); line-height: 1.5; font-size: .95rem; }
.sp-steps-mini li span {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-blue); color: #fff; font-weight: 800; font-size: .85rem;
}
.sp-aside-note { margin: 0; font-size: .9rem; line-height: 1.5; }
.sp-order-success { max-width: 620px; margin: 30px auto 0; text-align: center; padding: clamp(24px, 4vw, 40px); border-radius: 26px; background: linear-gradient(160deg, rgba(20, 30, 70, .8), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line); }
.sp-order-success h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin: 14px 0 8px; }
.sp-order-success .sp-receipt { text-align: left; margin: 22px 0; }
.sp-success-icon {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(34, 197, 94, .15); color: #4ade80; font-size: 2.2rem; box-shadow: 0 0 40px rgba(34, 197, 94, .25);
}
.sp-order-success .sp-cta-actions { margin-top: 6px; }
@media (max-width: 900px) {
    .sp-order-grid { grid-template-columns: 1fr; }
    .sp-order-aside { position: static; }
}
@media (max-width: 560px) {
    .sp-order-page { padding-top: 16px; }
    .sp-order-card { border-radius: 20px; padding: 18px; }
    .sp-receipt { padding: 14px; }
    .sp-receipt-total strong { font-size: 1.1rem; }
}

/* ===== v14 : commande Neo (tableau de bord, grille de réseaux, formulaire + détails) ===== */
.sp-order-v2 { max-width: 1240px; }
.sp-order-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.sp-stat-card {
    display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 20px; min-width: 0; text-decoration: none; color: var(--sp-text);
    background: linear-gradient(160deg, rgba(20, 30, 70, .85), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
}
.sp-stat-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-dim); }
.sp-stat-value { font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.sp-stat-sub { font-size: .85rem; color: var(--sp-dim); }
.sp-stat-link { margin-top: 6px; font-weight: 700; color: var(--sp-yellow); font-size: .9rem; }
.sp-stat-link-card:hover { border-color: var(--sp-yellow); }
.sp-order-networks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sp-net-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; border-radius: 16px; min-width: 0;
    border: 1px solid var(--sp-line); background: rgba(8, 14, 40, .8); color: var(--sp-text); font-weight: 700; font-size: .92rem; text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.sp-net-btn i { color: var(--sp-yellow); font-size: 1.05rem; }
.sp-net-btn:hover { border-color: var(--sp-yellow); transform: translateY(-2px); }
.sp-net-btn.active { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; box-shadow: 0 10px 22px rgba(107, 140, 240, .35); }
.sp-net-btn.active i { color: #fff; }
.sp-order-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sp-order-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border-radius: 16px; background: rgba(5, 11, 31, .7); border: 1px solid var(--sp-line); margin-bottom: 6px; }
.sp-order-tab {
    flex: 1 1 auto; text-align: center; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: .92rem; color: var(--sp-dim); text-decoration: none;
}
.sp-order-tab.active { background: var(--sp-yellow); color: #111; }
a.sp-order-tab:hover { color: var(--sp-text); }
.sp-order-search { margin-top: 4px; }
.sp-order-v2 .sp-order-card .sp-select-full { font-size: .95rem; }
.sp-detail-card { position: sticky; top: 110px; }
.sp-detail-name { margin: 10px 0 6px; font-size: 1.2rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.sp-detail-desc { margin: 0 0 12px; line-height: 1.6; font-size: .95rem; }
.sp-detail-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-detail-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--sp-dim); font-size: .92rem; line-height: 1.5; }
.sp-detail-list i { color: var(--sp-yellow); width: 18px; margin-top: 3px; }
.sp-detail-note {
    display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; font-size: .88rem; line-height: 1.5;
    background: rgba(107, 140, 240, .1); border: 1px solid rgba(107, 140, 240, .3); color: #c7d2fe;
}
.sp-detail-note i { color: var(--sp-blue); margin-top: 2px; }
@media (max-width: 1000px) {
    .sp-order-layout { grid-template-columns: 1fr; }
    .sp-detail-card { position: static; }
}
@media (max-width: 600px) {
    .sp-order-stats { grid-template-columns: 1fr; gap: 12px; }
    .sp-stat-card { padding: 16px 18px; }
    .sp-stat-value { font-size: 1.15rem; }
    .sp-order-networks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sp-net-btn { padding: 12px 10px; font-size: .85rem; }
    .sp-order-tab { padding: 9px 10px; font-size: .86rem; }
}

/* v16 : retrait de la bande dégradée sous l'en-tête (pages connectées Neo) + boutons de l'en-tête plus petits */
body[data-structure-key="neo"] #previewContent[data-page-variant="banner"]::before { display: none; }
body[data-structure-key="neo"] #previewContent[data-page-variant="banner"] { padding-top: 0; }
body[data-structure-key="neo"] .real-top-actions { gap: 8px; }
body[data-structure-key="neo"] .real-btn-recharge, body[data-structure-key="neo"] .real-wallet-display {
    height: 34px; padding: 0 12px; gap: 6px; font-size: .8rem; box-shadow: none;
}
body[data-structure-key="neo"] .real-btn-recharge i, body[data-structure-key="neo"] .real-wallet-display i { font-size: .8rem; }
body[data-structure-key="neo"] .real-menu-icon { width: 36px; height: 36px; }
body[data-structure-key="neo"] .real-btn-recharge { box-shadow: 0 4px 12px rgba(247, 201, 72, .25); }
body[data-structure-key="neo"] .real-wallet-display { box-shadow: 0 4px 12px rgba(107, 140, 240, .25); }
@media (max-width: 380px) {
    body[data-structure-key="neo"] .real-btn-recharge, body[data-structure-key="neo"] .real-wallet-display { height: 32px; padding: 0 10px; font-size: .76rem; }
}

/* ===== v17 : page Notifications Neo ===== */
.sp-notif-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 980px; margin: 0 auto; min-height: 0; background-attachment: scroll; }
.sp-notif-hero { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.sp-notif-hero h1 { margin: 6px 0 4px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.sp-notif-hero p { margin: 0; }
.sp-notif-bulk { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-notif-bulk form { margin: 0; }
.sp-notif-bulk button { font: inherit; cursor: pointer; }
.sp-chip-danger { color: #fca5a5; border-color: rgba(248, 113, 113, .4); }
.sp-chip-danger:hover { border-color: #f87171; color: #fecaca; }
.sp-notif-filters { justify-content: flex-start; margin-bottom: 18px; }
.sp-notif-list { display: flex; flex-direction: column; gap: 12px; }
.sp-notif-card {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start;
    padding: 18px 18px 18px 20px; border-radius: 20px; min-width: 0;
    background: linear-gradient(160deg, rgba(20, 30, 70, .8), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
}
.sp-notif-card::before {
    content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: transparent;
}
.sp-notif-card.unread { border-color: rgba(247, 201, 72, .45); }
.sp-notif-card.unread::before { background: var(--sp-yellow); }
.sp-notif-icon {
    width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(107, 140, 240, .15); color: var(--sp-blue); font-size: 1rem;
}
.sp-notif-card.unread .sp-notif-icon { background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); color: #111; }
.sp-notif-body { min-width: 0; }
.sp-notif-body h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.sp-notif-body p { margin: 0 0 8px; color: var(--sp-dim); line-height: 1.55; font-size: .95rem; overflow-wrap: anywhere; }
.sp-notif-body a { color: var(--sp-yellow); }
.sp-notif-time { font-size: .82rem; color: var(--sp-dim); }
.sp-notif-actions { display: flex; gap: 6px; }
.sp-notif-actions form { margin: 0; }
.sp-icon-btn {
    width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--sp-line); background: rgba(8, 14, 40, .8);
    color: var(--sp-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.sp-icon-btn:hover { border-color: var(--sp-yellow); color: var(--sp-yellow); }
.sp-icon-btn.danger:hover { border-color: #f87171; color: #f87171; }
.sp-notif-empty { text-align: center; padding: 50px 20px; border-radius: 22px; border: 1px dashed var(--sp-line); }
.sp-notif-empty i { font-size: 2.2rem; color: var(--sp-blue); margin-bottom: 12px; }
.sp-notif-empty h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
.sp-page-info { font-size: .92rem; align-self: center; }
@media (max-width: 600px) {
    .sp-notif-card { grid-template-columns: auto minmax(0, 1fr); padding: 16px 14px 16px 16px; gap: 12px; }
    .sp-notif-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .sp-notif-hero { align-items: flex-start; }
}

/* v18 : pages connectées Neo sans boîte autour du contenu (ni bordure violette) */
body[data-structure-key="neo"] #previewContent[data-page-variant="banner"] .site-block {
    background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
}
body[data-structure-key="neo"] #previewContent[data-page-variant="banner"] { border-top: 0 !important; }
body[data-structure-key="neo"] #previewContent[data-page-variant="banner"]::after { display: none; }
body[data-structure-key="neo"] .sp-notif-page { background: transparent; }
.sp-notif-empty p { margin: 0; }
.sp-notif-empty h3 { margin: 8px 0 6px; }
.sp-notif-empty i { display: block; }

/* ===== v19 : page Commandes (transactions) Neo ===== */
.sp-tx-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 1040px; margin: 0 auto; min-height: 0; background: transparent; }
.sp-tx-hero { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.sp-tx-hero h1 { margin: 6px 0 4px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.sp-tx-hero p { margin: 0; }
.sp-tx-sync { padding: 11px 18px; font-size: .9rem; }
.sp-tx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sp-tx-stats .sp-stat-card { padding: 16px 18px; }
.sp-tone-ok .sp-stat-value { color: #4ade80; }
.sp-tone-warn .sp-stat-value { color: var(--sp-yellow); }
.sp-tone-bad .sp-stat-value { color: #f87171; }
.sp-tx-filters { justify-content: flex-start; margin-bottom: 18px; }
.sp-tx-list { display: flex; flex-direction: column; gap: 14px; }
.sp-tx-card {
    display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; min-width: 0;
    background: linear-gradient(160deg, rgba(20, 30, 70, .8), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
}
.sp-tx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-tx-plat {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); color: #111; font-size: 1.1rem;
}
.sp-tx-title { flex: 1; min-width: 0; }
.sp-tx-title h3 { margin: 0; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.sp-tx-title span { font-size: .85rem; }
.sp-tx-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: rgba(107, 140, 240, .15); color: #c7d2fe; white-space: nowrap;
}
.sp-tx-badge.success { background: rgba(34, 197, 94, .15); color: #86efac; }
.sp-tx-badge.warning { background: rgba(247, 201, 72, .15); color: #fde68a; }
.sp-tx-badge.danger { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.sp-tx-badge.info { background: rgba(107, 140, 240, .18); color: #c7d2fe; }
.sp-tx-badge.default { background: rgba(255, 255, 255, .07); color: var(--sp-dim); }
.sp-tx-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.sp-tx-provider { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--sp-dim); }
.sp-tx-error {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.5;
    background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35); color: #fecaca;
}
.sp-tx-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.sp-tx-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: .92rem; }
.sp-tx-meta a { color: var(--sp-blue); overflow-wrap: anywhere; font-weight: 600; }
.sp-tx-meta strong { overflow-wrap: anywhere; }
.sp-tx-foot { display: flex; justify-content: flex-end; }
.sp-tx-empty { text-align: center; padding: 50px 20px; border-radius: 22px; border: 1px dashed var(--sp-line); }
.sp-tx-empty i { font-size: 2.2rem; color: var(--sp-blue); margin-bottom: 12px; display: block; }
.sp-tx-empty h3 { margin: 8px 0 6px; font-size: 1.15rem; font-weight: 800; }
.sp-tx-empty p { margin: 0 0 18px; }
@media (max-width: 760px) {
    .sp-tx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .sp-tx-meta { grid-template-columns: 1fr; }
    .sp-tx-card { padding: 16px; }
    .sp-tx-head { align-items: flex-start; }
    .sp-tx-head .sp-tx-badge { order: 3; }
    .sp-tx-sync { width: 100%; justify-content: center; }
}

/* v20 : alignement de la page Commandes (texte à gauche, état vide centré) */
.sp-tx-page { text-align: left; }
.sp-tx-hero p { text-align: left; }
.sp-tx-empty { text-align: center; }
.sp-tx-empty i { margin: 0 auto 12px; }

/* ===== v21 : page Application Android Neo ===== */
.sp-app-page { min-height: 0; background: transparent; padding-bottom: 20px; }
.sp-app-hero { text-align: center; padding: 56px var(--sp-pad, 6vw) 30px; max-width: 880px; margin: 0 auto; }
.sp-app-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; margin: 12px 0 16px; letter-spacing: -.02em; }
.sp-app-hero .sp-sub { margin: 0 auto 22px; }
.sp-app-chips { justify-content: center; }
.sp-app-cta { margin-top: 28px; display: flex; justify-content: center; }
.sp-app-section { max-width: 1100px; margin: 0 auto; }
.sp-app-section h2 { margin-bottom: 26px; }
.sp-app-note { text-align: center; margin: 22px 0 0; font-size: .92rem; }
.sp-app-note i { color: var(--sp-yellow); margin-right: 6px; }
.sp-app-unavailable { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px; border-radius: 20px; border: 1px dashed var(--sp-line); max-width: 560px; margin: 0 auto; text-align: center; }
.sp-app-unavailable p { margin: 0; color: var(--sp-dim); line-height: 1.6; }
.sp-app-unavailable > p i { display: block; font-size: 2rem; color: var(--sp-blue); margin-bottom: 10px; }
.sp-app-page .sp-cta-actions { justify-content: center; }
.sp-app-page .sp-steps { padding-top: 40px; }
@media (max-width: 560px) {
    .sp-app-hero { padding-top: 34px; }
    .sp-app-cta .sp-btn, .sp-app-page .sp-cta-actions .sp-btn { width: 100%; }
}

/* ===== v22 : page Programme partenaire Neo ===== */
.sp-partner-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 1100px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-partner-hero { text-align: center; padding: 30px 0 10px; }
.sp-partner-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 800; line-height: 1.12; margin: 12px 0 14px; letter-spacing: -.02em; }
.sp-partner-hero .sp-sub { margin: 0 auto 24px; }
.sp-partner-section { margin-top: 44px; }
.sp-partner-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; text-align: center; margin: 0 0 22px; }
.sp-partner-intro { text-align: center; margin: -8px 0 22px; }
.sp-cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-cards-5 .sp-card { padding: 22px 18px; }
.sp-cards-5 .sp-card h3 { font-size: 1rem; }
.sp-cards-5 .sp-card p { font-size: .9rem; }
.sp-partner-cta { margin-top: 26px; }
.sp-partner-pay { text-align: center; }
.sp-partner-pay .sp-pay-list span { display: inline-flex; align-items: center; }
.sp-pay-logo { background: #fff; border-radius: 14px; padding: 8px 14px; display: inline-flex; align-items: center; }
.sp-pay-logo img { height: 34px; width: auto; display: block; }
@media (max-width: 1000px) { .sp-cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sp-cards-5 { grid-template-columns: 1fr; } .sp-partner-hero { padding-top: 14px; } }

/* ===== v23 : formulaire d'inscription partenaire Neo ===== */
.sp-apply-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 620px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-apply-hero { text-align: center; margin-bottom: 22px; }
.sp-apply-hero h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; margin: 10px 0 10px; letter-spacing: -.02em; }
.sp-apply-hero .sp-sub { margin: 0 auto; }
.sp-apply-card {
    padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: linear-gradient(160deg, rgba(20, 30, 70, .85), rgba(8, 14, 40, .95));
    border: 1px solid var(--sp-line); box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.sp-apply-card .sp-alert { margin-bottom: 12px; }
.sp-apply-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.sp-apply-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px;
    border: 1px solid var(--sp-line); background: rgba(5, 11, 31, .6);
}
.sp-apply-row.ok { border-color: rgba(34, 197, 94, .35); }
.sp-apply-row.missing { border-color: rgba(247, 201, 72, .45); }
.sp-apply-ico {
    width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(107, 140, 240, .15); color: var(--sp-blue);
}
.sp-apply-row.ok .sp-apply-ico { background: rgba(34, 197, 94, .15); color: #4ade80; }
.sp-apply-row.missing .sp-apply-ico { background: rgba(247, 201, 72, .15); color: var(--sp-yellow); }
.sp-apply-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-apply-txt strong { font-size: .92rem; font-weight: 700; }
.sp-apply-txt span { font-size: .88rem; color: var(--sp-dim); overflow-wrap: anywhere; }
.sp-apply-row a { font-weight: 700; font-size: .85rem; color: var(--sp-yellow); white-space: nowrap; }
.sp-apply-row a:hover { text-decoration: underline; }
.sp-apply-form { margin: 0; }
.sp-apply-form .sp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.sp-back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; color: var(--sp-dim); }
.sp-back-link:hover { color: var(--sp-yellow); }
@media (max-width: 560px) {
    .sp-apply-row { grid-template-columns: auto minmax(0, 1fr); }
    .sp-apply-row a { grid-column: 2; justify-self: start; }
}

/* ===== v24 : page Menu Neo ===== */
.sp-menu-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 760px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-menu-profile {
    display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; min-width: 0;
    background: linear-gradient(160deg, rgba(20, 30, 70, .85), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
}
.sp-menu-avatar {
    width: 56px; height: 56px; border-radius: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-yellow), #f59e0b); color: #111; font-weight: 800; font-size: 1.3rem;
}
.sp-menu-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-menu-who strong { font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.sp-menu-who span { font-size: .88rem; overflow-wrap: anywhere; }
.sp-menu-highlight {
    display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; border-radius: 20px; text-decoration: none; color: var(--sp-text);
    background: linear-gradient(135deg, rgba(247, 201, 72, .18), rgba(107, 140, 240, .18)); border: 1px solid rgba(247, 201, 72, .4);
}
.sp-menu-highlight:hover { border-color: var(--sp-yellow); }
.sp-menu-highlight > i:first-child { font-size: 1.3rem; color: var(--sp-yellow); }
.sp-menu-highlight span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-menu-highlight small { color: var(--sp-dim); font-size: .85rem; }
.sp-menu-highlight > i:last-child { color: var(--sp-dim); }
.sp-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.sp-menu-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 96px; padding: 14px 10px; border-radius: 18px;
    text-decoration: none; text-align: center; color: var(--sp-text); font-weight: 700; font-size: .9rem; min-width: 0;
    background: rgba(8, 14, 40, .8); border: 1px solid var(--sp-line); transition: border-color .15s ease, transform .15s ease;
}
.sp-menu-tile i { font-size: 1.3rem; color: var(--sp-yellow); }
.sp-menu-tile:hover { border-color: var(--sp-yellow); transform: translateY(-2px); }
.sp-menu-sections { display: flex; flex-direction: column; gap: 10px; }
.sp-menu-section {
    border-radius: 18px; background: rgba(8, 14, 40, .8); border: 1px solid var(--sp-line); overflow: hidden;
}
.sp-menu-section summary {
    list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 800; display: flex; align-items: center; gap: 12px; position: relative;
}
.sp-menu-section summary::-webkit-details-marker { display: none; }
.sp-menu-section summary i { color: var(--sp-blue); width: 20px; text-align: center; }
.sp-menu-section summary::after { content: '+'; margin-left: auto; color: var(--sp-yellow); font-size: 1.3rem; line-height: 1; }
.sp-menu-section[open] summary::after { content: '−'; }
.sp-menu-section a {
    display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 50px; text-decoration: none; color: var(--sp-dim); font-weight: 600; border-top: 1px solid var(--sp-line);
}
.sp-menu-section a i { color: var(--sp-yellow); width: 18px; text-align: center; }
.sp-menu-section a:hover { color: var(--sp-text); background: rgba(107, 140, 240, .08); }
.sp-menu-logout {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 15px; border-radius: 16px; text-decoration: none; font-weight: 800;
    color: #fca5a5; background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .35);
}
.sp-menu-logout:hover { background: rgba(248, 113, 113, .16); }
@media (max-width: 560px) {
    .sp-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-menu-tile { min-height: 84px; font-size: .85rem; }
}

/* ===== v25 : page Paramètres (gestion) Neo ===== */
.sp-settings-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 760px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-settings-hero { margin-bottom: 18px; }
.sp-settings-hero h1 { margin: 6px 0 4px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.sp-settings-hero p { margin: 0; overflow-wrap: anywhere; }
.sp-settings-card {
    padding: clamp(20px, 3vw, 28px); border-radius: 24px; margin-bottom: 18px;
    background: linear-gradient(160deg, rgba(20, 30, 70, .85), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
}
.sp-settings-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.1rem; font-weight: 800; }
.sp-settings-card h2 i { color: var(--sp-yellow); }
.sp-settings-form { display: flex; flex-direction: column; gap: 8px; }
.sp-settings-form .sp-auth-label { margin-top: 8px; }
.sp-settings-form .sp-auth-label:first-child { margin-top: 0; }
.sp-settings-form .sp-field { flex: none; max-width: none; width: 100%; }
.sp-settings-form .sp-field input[readonly] { opacity: .6; cursor: not-allowed; }
.sp-settings-form .sp-btn-block { margin-top: 12px; }
.sp-settings-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-settings-row > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-textarea {
    width: 100%; min-height: 96px; resize: vertical; border-radius: 16px; padding: 12px 14px; font: inherit; color: var(--sp-text);
    background: rgba(5, 11, 31, .85); border: 1.5px solid var(--sp-line);
}
.sp-textarea:focus { outline: none; border-color: var(--sp-yellow); }
.sp-counter { font-size: .8rem; color: var(--sp-dim); text-align: right; }
.sp-settings-form .sp-hint { margin: -4px 0 0; }
@media (max-width: 560px) {
    .sp-settings-row { grid-template-columns: 1fr; }
    .sp-settings-card { border-radius: 20px; }
}

/* v26 : carte profil du menu (nom et ligne ID/e-mail sans chevauchement) */
.sp-menu-who { display: block; min-width: 0; }
.sp-menu-who strong { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
.sp-menu-who span { display: block; font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; position: static; }

/* ===== v27 : espace partenaire approuvé Neo ===== */
.sp-pdash-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 1000px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-pdash-hero { margin-bottom: 18px; }
.sp-pdash-hero h1 { margin: 6px 0 6px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sp-pdash-hero p { margin: 0; }
.sp-text { color: var(--sp-text); }
.sp-pdash-tabs { justify-content: flex-start; margin-bottom: 18px; }
.sp-pdash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sp-pdash-card {
    padding: 20px; border-radius: 22px; margin-bottom: 14px; min-width: 0;
    background: linear-gradient(160deg, rgba(20, 30, 70, .85), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line);
}
.sp-withdraw summary {
    list-style: none; cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--sp-text);
}
.sp-withdraw summary::-webkit-details-marker { display: none; }
.sp-withdraw summary i { color: var(--sp-yellow); }
.sp-withdraw[open] summary { margin-bottom: 12px; }
.sp-withdraw p { margin: 0 0 12px; }
.sp-pdash-form { display: flex; flex-direction: column; gap: 8px; }
.sp-pdash-form .sp-auth-label { margin-top: 6px; }
.sp-pdash-form .sp-auth-label:first-child { margin-top: 0; }
.sp-pdash-form .sp-field { flex: none; max-width: none; width: 100%; }
.sp-pdash-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.sp-pdash-codes .sp-pdash-card { margin-bottom: 0; }
.sp-pdash-code-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.sp-code { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; color: var(--sp-yellow); overflow-wrap: anywhere; }
.sp-input {
    width: 100%; min-width: 0; border-radius: 14px; padding: 11px 14px; font: inherit; font-size: .9rem; color: var(--sp-text);
    background: rgba(5, 11, 31, .85); border: 1.5px solid var(--sp-line);
}
.sp-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(107, 140, 240, .18); color: #c7d2fe; white-space: nowrap; }
.sp-badge.ok { background: rgba(34, 197, 94, .15); color: #86efac; }
.sp-alert-warn { background: rgba(247, 201, 72, .12); color: #fde68a; border: 1px solid rgba(247, 201, 72, .4); }
.sp-empty-card { text-align: center; padding: 40px 20px; border-radius: 22px; border: 1px dashed var(--sp-line); margin-bottom: 14px; }
.sp-empty-card i { font-size: 2rem; color: var(--sp-blue); display: block; margin-bottom: 10px; }
.sp-empty-card p { margin: 0; }
.sp-pdash-list { display: flex; flex-direction: column; gap: 10px; }
.sp-pdash-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 18px; min-width: 0;
    background: rgba(8, 14, 40, .8); border: 1px solid var(--sp-line);
}
.sp-pdash-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-pdash-row-main strong, .sp-pdash-row-main span { overflow-wrap: anywhere; }
.sp-pdash-row-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; font-size: .85rem; }
@media (max-width: 600px) {
    .sp-pdash-row { grid-template-columns: 1fr; }
    .sp-pdash-stats { grid-template-columns: 1fr 1fr; }
}

/* ===== v30 : page Recharger Neo ===== */
.sp-recharge-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 620px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-recharge-hero { margin-bottom: 18px; }
.sp-recharge-hero h1 { margin: 6px 0 6px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.sp-recharge-hero p { margin: 0; }
.sp-recharge-card {
    padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: linear-gradient(160deg, rgba(20, 30, 70, .85), rgba(8, 14, 40, .95));
    border: 1px solid var(--sp-line); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 8px;
}
.sp-recharge-card .sp-auth-label { margin-top: 0; }
.sp-recharge-card .sp-field { flex: none; max-width: none; width: 100%; }
.sp-recharge-card .sp-field input { font-size: 1.1rem; font-weight: 700; min-width: 0; }
.sp-field-unit { font-weight: 800; color: var(--sp-yellow); padding-right: 6px; }
.sp-recharge-card .sp-hint { margin: 0 0 8px; }
.sp-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sp-amount-btn {
    padding: 12px 10px; border-radius: 14px; border: 1px solid var(--sp-line); background: rgba(5, 11, 31, .8); color: var(--sp-text);
    font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.sp-amount-btn:hover { border-color: var(--sp-yellow); transform: translateY(-2px); }
.sp-amount-btn.active { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; box-shadow: 0 10px 22px rgba(107, 140, 240, .35); }
.sp-recharge-card .sp-btn-block { margin-top: 6px; padding: 16px 22px; font-size: 1.05rem; }
.sp-recharge-card .sp-btn-block:disabled { opacity: .55; cursor: wait; transform: none; }
.sp-recharge-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.sp-recharge-step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(8, 14, 40, .7); border: 1px solid var(--sp-line); color: var(--sp-dim); font-size: .9rem; font-weight: 600; }
.sp-recharge-step span {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-blue); color: #fff; font-weight: 800; font-size: .8rem;
}
@media (max-width: 560px) {
    .sp-recharge-steps { grid-template-columns: 1fr; }
    .sp-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== v31 : page Portefeuille Neo ===== */
.sp-wallet-page { padding: 26px var(--sp-pad, 6vw) 60px; max-width: 760px; margin: 0 auto; min-height: 0; background: transparent; text-align: left; }
.sp-wallet-balance {
    padding: clamp(22px, 4vw, 32px); border-radius: 26px; display: flex; flex-direction: column; gap: 6px;
    background: linear-gradient(135deg, rgba(107, 140, 240, .25), rgba(8, 14, 40, .95)); border: 1px solid var(--sp-line); box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.sp-wallet-label { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-dim); }
.sp-wallet-label i { color: var(--sp-yellow); margin-right: 6px; }
.sp-wallet-amount { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: var(--sp-text); overflow-wrap: anywhere; }
.sp-wallet-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sp-wallet-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 16px; background: rgba(5, 11, 31, .6); border: 1px solid var(--sp-line); }
.sp-wallet-stats strong { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.sp-wallet-stats span { font-size: .78rem; }
.sp-wallet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 26px; }
.sp-wallet-actions .sp-btn { width: 100%; }
.sp-wallet-history h2 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 800; }
.sp-wallet-list { display: flex; flex-direction: column; gap: 10px; }
.sp-wallet-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; min-width: 0;
    background: rgba(8, 14, 40, .8); border: 1px solid var(--sp-line);
}
.sp-wallet-ico { width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.sp-wallet-ico.credit { background: rgba(34, 197, 94, .15); color: #4ade80; }
.sp-wallet-ico.debit { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.sp-wallet-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-wallet-info strong { overflow-wrap: anywhere; font-size: .95rem; }
.sp-wallet-info span { font-size: .82rem; }
.sp-wallet-amt { font-weight: 800; white-space: nowrap; }
.sp-wallet-amt.credit { color: #4ade80; }
.sp-wallet-amt.debit { color: #fca5a5; }
@media (max-width: 560px) {
    .sp-wallet-stats { grid-template-columns: 1fr; }
    .sp-wallet-actions { grid-template-columns: 1fr; }
    .sp-wallet-item { grid-template-columns: auto minmax(0, 1fr); }
    .sp-wallet-amt { grid-column: 2; }
}