/* Visite des fonctionnalités — finition façon Circle (chargé en dernier) */

/* Fond bleu nuit avec halo derrière la fenêtre */
body.space-home-active .feature-hero {
  position:relative;
  padding:96px 28px 110px;
  background:
    radial-gradient(60% 42% at 50% 58%, rgba(63,109,245,.38) 0%, rgba(63,109,245,0) 70%),
    radial-gradient(40% 30% at 15% 20%, rgba(101,121,207,.18) 0%, rgba(101,121,207,0) 70%),
    linear-gradient(180deg, #17377c 0%, #0d1a4d 340px, #080c27 100%) !important;
}

/* Titre */
body.space-home-active .feature-tour-heading { margin:0 0 40px; gap:20px; }
body.space-home-active .feature-tour-heading h2 { font-size:clamp(34px,4.2vw,58px); font-weight:700; letter-spacing:-.05em; line-height:1.08; }
body.space-home-active #feature-play { padding:8px 14px; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:rgba(255,255,255,.75); }
body.space-home-active #feature-play:hover { color:#fff; border-color:rgba(255,255,255,.45); }

/* Onglets : texte léger, pilule de verre sur l'onglet actif */
body.space-home-active .feature-tabs { justify-content:center; gap:4px; padding:4px 0 6px; margin:0 0 34px; scrollbar-width:none; }
body.space-home-active .feature-tabs::-webkit-scrollbar { display:none; }
body.space-home-active .feature-tabs button { padding:11px 20px; border:1px solid transparent; color:rgba(255,255,255,.6); font-size:16px; font-weight:500; letter-spacing:-.01em; transition:color .15s, background .15s, border-color .15s; }
body.space-home-active .feature-tabs button:hover { color:#fff; background:rgba(255,255,255,.05); }
body.space-home-active .feature-tabs button[aria-selected="true"] { color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(3,6,30,.25); }
body.space-home-active .feature-tab-progress { left:20px; bottom:5px; max-width:calc(100% - 40px); height:2px; border-radius:2px; background:rgba(255,255,255,.55); }

/* Cadre en verre épais */
body.space-home-active .feature-window {
  border:12px solid rgba(255,255,255,.1);
  outline:1px solid rgba(255,255,255,.22);
  outline-offset:0;
  border-radius:28px;
  box-shadow:0 50px 120px rgba(2,5,25,.6), 0 0 0 1px rgba(255,255,255,.04);
}
body.space-home-active .feature-window-top { min-height:66px; padding:12px 24px; border-bottom:1px solid #eef0f4; }
body.space-home-active .feature-brand { font-size:28px; }
body.space-home-active .feature-brand > span { font-size:15px; font-weight:700; color:#0b0f1c; }
body.space-home-active .feature-workspace-label { padding:10px 22px; border:1px solid #eceef2; border-radius:10px; background:#f6f7f9; color:#8a90a0; font-size:14px; text-align:center; }
body.space-home-active .feature-user { width:36px; height:36px; background:#eef2fb; color:#4a5d8f; font-size:12px; }

/* Barre latérale */
body.space-home-active .feature-layout { grid-template-columns:230px minmax(0,1fr); }
body.space-home-active .feature-sidebar { padding:24px 16px; background:#fff; border-right:1px solid #eef0f4; }
body.space-home-active .feature-club { gap:12px; font-size:15px; font-weight:700; color:#0b0f1c; }
body.space-home-active .feature-club > span { width:40px; height:40px; border-radius:10px; background:#0b0f1c; font-size:18px; }
body.space-home-active .feature-club small { font-size:12px; color:#8a90a0; }
body.space-home-active .feature-sidebar h3 { margin:32px 10px 12px; font-size:13px; font-weight:700; color:#8a90a0; }
body.space-home-active .feature-sidebar #feature-subnav > span { padding:10px 12px; border-radius:8px; color:#4a5165; font-size:14px; font-weight:500; }
body.space-home-active .feature-sidebar #feature-subnav > .selected { background:#f2f4f8; color:#0b0f1c; font-weight:650; }
body.space-home-active .feature-sidebar-bottom { font-size:12px; color:#a0a6b4; }

/* Panneau : barre de défilement masquée */
body.space-home-active .feature-panel { padding:32px 36px; scrollbar-width:none; }
body.space-home-active .feature-panel::-webkit-scrollbar { display:none; }
body.space-home-active .feature-panel-heading { margin-bottom:24px; }
body.space-home-active .feature-panel-heading h2 { margin:0; font-size:30px; font-weight:750; letter-spacing:-.04em; line-height:1.15; color:#0b0f1c; }
body.space-home-active .feature-panel-heading p { margin-top:8px; font-size:15px; color:#6b7280; }
body.space-home-active .feature-action { padding:11px 18px; border-radius:10px; background:#0b0f1c; color:#fff; font-size:14px; font-weight:600; }
body.space-home-active .feature-action:hover { background:#2f62ee; color:#fff; }
body.space-home-active .feature-badge { padding:5px 10px; border-radius:999px; background:#f2f4f8; color:#5a6175; font-size:11px; font-weight:600; }

/* Cartes de chiffres */
body.space-home-active .feature-mini-stats { gap:14px; margin-bottom:20px; }
body.space-home-active .feature-mini-stats > span { display:flex; align-items:baseline; gap:8px; padding:18px 20px; border:1px solid #eceef3; border-radius:14px; background:#fff; color:#6b7280; font-size:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
body.space-home-active .feature-mini-stats strong { margin:0; font-size:30px; font-weight:750; letter-spacing:-.04em; color:#0b0f1c; }

/* Photo avec voile */
body.space-home-active .feature-banner { height:220px; border-radius:16px; background:#0b1433; }
body.space-home-active .feature-banner img { opacity:.85; }
body.space-home-active .feature-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,12,38,.78) 0%, rgba(8,12,38,.25) 55%, rgba(8,12,38,0) 100%); }
body.space-home-active .feature-banner > div { z-index:1; left:32px; top:auto; bottom:30px; }
body.space-home-active .feature-banner span { font-size:11px; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.75); }
body.space-home-active .feature-banner strong { margin-top:10px; font-size:32px; font-weight:750; letter-spacing:-.04em; line-height:1.1; }

/* Lignes 01 / 02 / 03 */
body.space-home-active .feature-list > div { gap:16px; padding:18px 4px; border-bottom:1px solid #f0f2f6; }
body.space-home-active .feature-list > div:last-child { border-bottom:0; }
body.space-home-active .feature-list-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:0; border-radius:12px; background:#f3f5f9; color:#5a6175; font-size:13px; font-weight:700; }
body.space-home-active .feature-list strong { font-size:16px; font-weight:650; color:#0b0f1c; letter-spacing:-.01em; }
body.space-home-active .feature-list small { margin-top:4px; font-size:14px; color:#8a90a0; }
body.space-home-active .feature-list-end { font-size:14px; font-weight:600; color:#4a5165; }

/* Autres écrans : tableau, discussion, cartes */
body.space-home-active .feature-table { font-size:14px; }
body.space-home-active .feature-table th { font-size:12px; color:#8a90a0; }
body.space-home-active .feature-table td { color:#4a5165; }
body.space-home-active .feature-table td:first-child { color:#0b0f1c; }
body.space-home-active .feature-role { border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600; }
body.space-home-active .feature-conversation strong { font-size:15px; color:#0b0f1c; }
body.space-home-active .feature-conversation p { padding:13px 16px; border-radius:4px 14px 14px 14px; background:#f4f6fa; color:#3b4256; font-size:15px; }
body.space-home-active .feature-event { border-radius:16px; border-color:#eceef3; }
body.space-home-active .feature-event h3 { font-size:22px; font-weight:750; letter-spacing:-.03em; color:#0b0f1c; }
body.space-home-active .feature-resource-grid article { border-radius:14px; border-color:#eceef3; background:#fafbfd; }
body.space-home-active .feature-resource-grid h3 { color:#0b0f1c; }
body.space-home-active .feature-offer-grid button { border:1px solid #eceef3; border-radius:14px; }
body.space-home-active .feature-offer-art { border-radius:10px; }
body.space-home-active .feature-payment-callout { border-radius:16px; background:linear-gradient(135deg,#eef3ff,#f3efff); }
body.space-home-active .feature-payment-callout h3 { color:#0b0f1c; font-weight:750; letter-spacing:-.035em; }
body.space-home-active .feature-api-flow { border-radius:16px; }

/* Explication sous la fenêtre */
body.space-home-active .feature-explainer { margin-top:44px; }
body.space-home-active #feature-step { color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.06em; }
body.space-home-active #feature-story-title { font-size:26px; font-weight:700; letter-spacing:-.03em; }
body.space-home-active #feature-story-copy { color:rgba(255,255,255,.72); font-size:16px; }
body.space-home-active #feature-story-points { color:rgba(255,255,255,.85); font-size:14px; }
body.space-home-active .feature-caption { color:rgba(255,255,255,.5); font-size:13px; }

@media (max-width:1000px) {
  body.space-home-active .feature-layout { grid-template-columns:190px minmax(0,1fr); }
  body.space-home-active .feature-panel { padding:24px; }
  body.space-home-active .feature-tabs { justify-content:flex-start; }
}
@media (max-width:650px) {
  body.space-home-active .feature-hero { padding:64px 16px 72px; }
  body.space-home-active .feature-tabs button { padding:9px 14px; font-size:14px; }
  body.space-home-active .feature-window { border-width:6px; border-radius:18px; }
  body.space-home-active .feature-layout { grid-template-columns:minmax(0,1fr); }
  body.space-home-active .feature-panel { padding:20px 16px; }
  body.space-home-active .feature-panel-heading h2 { font-size:22px; }
  body.space-home-active .feature-mini-stats > span { display:block; padding:12px; font-size:12px; }
  body.space-home-active .feature-mini-stats strong { display:block; font-size:22px; }
  body.space-home-active .feature-banner { height:180px; }
  body.space-home-active .feature-banner strong { font-size:24px; }
  body.space-home-active .feature-banner > div { left:20px; bottom:20px; }
}

/* Écrans plein cadre : Monétisation (paiement) et Lives (visio) */
body.space-home-active .feature-hero[data-screen="payments"] .feature-window-top,
body.space-home-active .feature-hero[data-screen="payments"] .feature-sidebar,
body.space-home-active .feature-hero[data-screen="events"] .feature-window-top,
body.space-home-active .feature-hero[data-screen="events"] .feature-sidebar { display:none; }
body.space-home-active .feature-hero[data-screen="payments"] .feature-layout,
body.space-home-active .feature-hero[data-screen="events"] .feature-layout { grid-template-columns:minmax(0,1fr); height:626px; }
body.space-home-active .feature-hero[data-screen="payments"] .feature-panel,
body.space-home-active .feature-hero[data-screen="events"] .feature-panel { padding:0; min-height:0; }
body.space-home-active .feature-hero[data-screen="events"] .feature-window { background:#18191d; }

/* Paiement */
body.space-home-active .fhc-pay { display:grid; grid-template-columns:1fr 1fr; min-height:100%; color:#0b0f1c; text-align:left; }
body.space-home-active .fhc-pay-left { padding:40px 48px; background:#f5f6f8; border-right:1px solid #eceef2; }
body.space-home-active .fhc-pay-right { padding:40px 48px; background:#fff; }
body.space-home-active .fhc-pay-brand { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
body.space-home-active .fhc-pay-brand span { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#0b0f1c; color:#fff; font-size:18px; font-weight:700; }
body.space-home-active .fhc-pay-brand strong { font-size:22px; font-weight:750; letter-spacing:-.03em; }
body.space-home-active .fhc-pay-card { padding:26px; border:1px solid #eceef2; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(16,24,40,.06); }
body.space-home-active .fhc-pay-card h3 { margin:0 0 6px; font-size:22px; font-weight:750; letter-spacing:-.03em; }
body.space-home-active .fhc-pay-card > p { margin:0 0 20px; font-size:14px; line-height:1.5; color:#5a6175; }
body.space-home-active .fhc-pay-options { border:1px solid #e6e9ef; border-radius:14px; overflow:hidden; }
body.space-home-active .fhc-pay-option { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; }
body.space-home-active .fhc-pay-option + .fhc-pay-option { border-top:1px solid #e6e9ef; }
body.space-home-active .fhc-pay-option.is-on { background:#f7f8fa; }
body.space-home-active .fhc-pay-option b { font-size:17px; font-weight:750; }
body.space-home-active .fhc-pay-option small { font-size:14px; color:#5a6175; }
body.space-home-active .fhc-pay-option em { margin-left:8px; padding:3px 8px; border-radius:6px; background:#e7f6ec; color:#15803d; font-style:normal; font-size:12px; font-weight:650; }
body.space-home-active .fhc-pay-option span { display:block; margin-top:4px; font-size:13px; color:#6b7280; }
body.space-home-active .fhc-radio { flex:none; width:18px; height:18px; margin-top:2px; border:1.5px solid #c5cad3; border-radius:50%; background:#fff; }
body.space-home-active .is-on > .fhc-radio { border:5px solid #0b0f1c; }
body.space-home-active .fhc-pay-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:22px; }
body.space-home-active .fhc-pay-total strong { font-size:16px; }
body.space-home-active .fhc-pay-total b { font-size:20px; font-weight:750; }
body.space-home-active .fhc-pay-card .fhc-pay-note { margin:10px 0 0; font-size:12px; color:#8a90a0; }
body.space-home-active .fhc-pay-right h4 { margin:0 0 12px; font-size:18px; font-weight:750; letter-spacing:-.02em; }
body.space-home-active .fhc-pay-right h4:not(:first-child) { margin-top:26px; }
body.space-home-active .fhc-pay-account { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #eceef2; border-radius:14px; }
body.space-home-active .fhc-pay-account strong { display:block; font-size:14px; }
body.space-home-active .fhc-pay-account small { font-size:13px; color:#5a6175; }
body.space-home-active .fhc-pay-account em { align-self:flex-start; margin-left:auto; font-style:normal; font-size:12px; color:#5a6175; }
body.space-home-active .fhc-pay-methods { border:1px solid #eceef2; border-radius:14px; overflow:hidden; }
body.space-home-active .fhc-pay-methods > div { display:flex; align-items:center; gap:12px; padding:13px 16px; font-size:14px; }
body.space-home-active .fhc-pay-methods > div:not(:first-child):not(.fhc-pay-saved) { border-top:1px solid #eceef2; }
body.space-home-active .fhc-pay-methods .fhc-pay-saved { margin:0 16px 12px; padding:10px 14px; border:1px solid #eceef2; border-radius:10px; color:#3b4256; box-shadow:0 2px 6px rgba(16,24,40,.04); }
body.space-home-active .fhc-card-icon { width:34px; height:22px; border-radius:5px; background:linear-gradient(135deg,#1a1f71,#2f62ee); }
body.space-home-active .fhc-pay-label { display:block; margin:22px 0 8px; font-size:14px; font-weight:650; }
body.space-home-active .fhc-pay-input { height:42px; border:1px solid #e1e4ea; border-radius:10px; }
body.space-home-active .fhc-pay-cta { display:flex; align-items:center; justify-content:center; height:48px; margin-top:22px; border-radius:999px; background:#0b0f1c; color:#fff; font-size:15px; font-weight:650; }

/* Live */
body.space-home-active .fhc-live { display:flex; flex-direction:column; gap:16px; min-height:100%; padding:22px 28px 28px; background:#18191d; color:#fff; text-align:left; }
body.space-home-active .fhc-live-top { display:flex; align-items:center; gap:16px; font-size:14px; }
body.space-home-active .fhc-live-top strong { font-size:15px; font-weight:800; }
body.space-home-active .fhc-live-top span { color:#d4d6dd; font-weight:600; }
body.space-home-active .fhc-live-top small { margin-left:auto; color:#9a9ca6; font-size:13px; }
body.space-home-active .fhc-live-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(239,68,68,.16); color:#f87171; font-style:normal; font-size:12px; font-weight:700; }
body.space-home-active .fhc-live-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#ef4444; }
body.space-home-active .fhc-live-thumbs { display:flex; justify-content:center; gap:10px; }
body.space-home-active .fhc-live-thumbs > div { position:relative; width:150px; height:88px; border:2px solid transparent; border-radius:12px; overflow:hidden; background:#26272d; }
body.space-home-active .fhc-live-thumbs > .is-speaking { border-color:#3f6df5; }
body.space-home-active .fhc-live-thumbs img { width:100%; height:100%; object-fit:cover; }
body.space-home-active .fhc-live-thumbs .fhc-pos-left { object-position:15% 40%; }
body.space-home-active .fhc-live-thumbs span { position:absolute; left:10px; bottom:8px; font-size:12px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); }
body.space-home-active .fhc-live-avatar { display:grid; place-items:center; }
body.space-home-active .fhc-live-avatar i { display:grid; place-items:center; width:42px; height:42px; margin-bottom:16px; border-radius:50%; background:#3f6df5; font-style:normal; font-size:14px; font-weight:700; }
body.space-home-active .fhc-live-avatar i.is-purple { background:#8b5cf6; }
body.space-home-active .fhc-live-stage { position:relative; flex:1; width:100%; max-width:880px; min-height:320px; margin:0 auto; border-radius:16px; overflow:hidden; }
body.space-home-active .fhc-live-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.space-home-active .fhc-live-stage span { position:absolute; left:16px; bottom:16px; padding:6px 12px; border-radius:8px; background:rgba(0,0,0,.55); font-size:13px; font-weight:600; }

@media (max-width:760px) {
  body.space-home-active .feature-hero[data-screen="payments"] .feature-layout,
  body.space-home-active .feature-hero[data-screen="events"] .feature-layout { height:560px; }
  body.space-home-active .fhc-pay { grid-template-columns:1fr; }
  body.space-home-active .fhc-pay-left, body.space-home-active .fhc-pay-right { padding:22px 18px; }
  body.space-home-active .fhc-live { padding:16px; }
  body.space-home-active .fhc-live-top small, body.space-home-active .fhc-live-top span { display:none; }
  body.space-home-active .fhc-live-thumbs > div { width:25%; height:64px; }
  body.space-home-active .fhc-live-thumbs span { display:none; }
  body.space-home-active .fhc-live-avatar i { margin:0; }
  body.space-home-active .fhc-live-stage { min-height:240px; }
}

/* Bloc sous la fenêtre masqué (explication + légende) */
body.space-home-active .feature-explainer,
body.space-home-active .feature-caption { display:none !important; }
body.space-home-active .feature-hero { padding-bottom:96px; }
@media (max-width:650px) { body.space-home-active .feature-hero { padding-bottom:64px; } }