/* Grandes cartes produit — finition façon Circle (chargé en dernier) */ #space-product-stack .spc-card { --spc-tint:#eef2ff; --spc-deep:#c9d6fb; --spc-accent:#3f5fd8; padding:56px; border-color:#eceef3; border-radius:24px; box-shadow:0 1px 2px rgba(16,24,40,.04); } #space-product-stack .spc-card[data-tone="mint"] { --spc-tint:#eefaf6; --spc-deep:#c3eadc; --spc-accent:#0f9d7a; } #space-product-stack .spc-card[data-tone="peach"] { --spc-tint:#fff5ee; --spc-deep:#f8d6c2; --spc-accent:#df6f34; } #space-product-stack .spc-card[data-tone="lavender"] { --spc-tint:#f5f1ff; --spc-deep:#dacdf7; --spc-accent:#7656d6; } #space-product-stack .spc-card[data-tone="sky"] { --spc-tint:#eef8fd; --spc-deep:#c4e2f2; --spc-accent:#1c8cc2; } /* Titre de carte */ #space-product-stack .spc-heading h3 { margin:0 0 20px; color:#0b0f1c; font-size:clamp(44px,5.6vw,80px); font-weight:750; line-height:1; letter-spacing:-.055em; } #space-product-stack .spc-heading > p { max-width:820px; color:#2b3142; font-size:clamp(18px,1.6vw,22px); line-height:1.5; letter-spacing:-.01em; } /* Onglets */ #space-product-stack .spc-tabs { gap:6px; margin:44px 0 28px; scrollbar-width:none; } #space-product-stack .spc-tabs::-webkit-scrollbar { display:none; } #space-product-stack .spc-tabs button { padding:12px 22px; color:#6b7280; font-size:18px; font-weight:500; transition:color .15s, background .15s; } #space-product-stack .spc-tabs button:hover { color:#0b0f1c; } #space-product-stack .spc-tabs button[aria-selected="true"] { background:var(--spc-deep); color:#0b0f1c; font-weight:600; } /* Panneau : texte à gauche, fenêtre qui déborde à droite */ #space-product-stack .spc-panel { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch; gap:0; min-height:540px; padding:0; border-radius:24px; overflow:hidden; background:linear-gradient(135deg, var(--spc-tint) 0%, var(--spc-deep) 100%); } #space-product-stack .spc-copy { align-self:center; padding:56px 40px 56px 52px; } #space-product-stack .spc-copy h4 { margin:0 0 16px; color:#0b0f1c; font-size:clamp(24px,2.3vw,30px); font-weight:550; line-height:1.3; letter-spacing:-.025em; } #space-product-stack .spc-copy > p { margin:0 0 28px; color:#3b4256; font-size:17px; line-height:1.65; } #space-product-stack .spc-copy ul { gap:14px; } #space-product-stack .spc-copy li { padding-left:36px; color:#0b0f1c; font-size:19px; line-height:1.5; } #space-product-stack .spc-copy li::before { content:""; left:0; top:3px; width:24px; height:24px; border-radius:50%; background:var(--spc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; } #space-product-stack .spc-preview { display:flex; flex-direction:column; min-width:0; padding:56px 0 0 8px; } #space-product-stack .spc-window { flex:1; border:1px solid rgba(255,255,255,.9); border-right:0; border-bottom:0; border-radius:18px 0 0 0; box-shadow:0 30px 70px rgba(30,45,110,.16); } /* Fenêtre */ #space-product-stack .spc-window-bar { min-height:64px; padding:14px 26px; color:#0b0f1c; font-size:16px; } #space-product-stack .spc-window-bar strong { font-weight:700; } #space-product-stack .spc-window-logo { width:32px; height:32px; border-radius:9px; background:#0b0f1c; color:#fff; font-size:15px; } #space-product-stack .spc-window-body { padding:30px 32px; } #space-product-stack .spc-mini-label { color:#8a90a0; font-size:12px; letter-spacing:.12em; } #space-product-stack .spc-window h4 { margin:10px 0 18px; color:#0b0f1c; font-size:28px; font-weight:700; letter-spacing:-.035em; } #space-product-stack .spc-row { padding:18px 0; border-bottom-color:#f0f2f6; } #space-product-stack .spc-row strong, #space-product-stack .spc-person strong { color:#0b0f1c; font-size:16px; font-weight:650; } #space-product-stack .spc-row small, #space-product-stack .spc-person small { margin-top:4px; color:#6b7280; font-size:14px; } #space-product-stack .spc-chip { padding:6px 12px; border-radius:999px; background:var(--spc-tint); color:#2b3142; font-size:13px; font-weight:600; } #space-product-stack .spc-message { gap:14px; padding:18px 0; border-bottom-color:#f0f2f6; } #space-product-stack .spc-avatar { width:44px; height:44px; font-size:14px; font-weight:700; } #space-product-stack .spc-message strong { color:#0b0f1c; font-size:16px; } #space-product-stack .spc-message strong small { font-size:14px; } #space-product-stack .spc-message p, #space-product-stack .spc-soft-copy { margin-top:6px; color:#3b4256; font-size:16px; line-height:1.55; } #space-product-stack .spc-compose { margin-top:22px; padding:16px 18px; border-radius:12px; color:#8a90a0; font-size:15px; } #space-product-stack .spc-event-cover { padding:30px; border-radius:16px; background:linear-gradient(135deg,#2f62ee,#7b5cff); color:#fff; } #space-product-stack .spc-event-cover span { color:rgba(255,255,255,.75); font-size:11px; letter-spacing:.14em; } #space-product-stack .spc-event-cover strong { font-size:30px; font-weight:750; } #space-product-stack .spc-plan { padding:26px; border-color:#e6eaf0; border-radius:16px; } #space-product-stack .spc-plan > strong { color:#0b0f1c; font-size:22px; font-weight:750; } #space-product-stack .spc-plan p, #space-product-stack .spc-plan li { color:#4a5165; font-size:15px; } #space-product-stack .spc-price { color:#0b0f1c; font-size:30px; font-weight:750; } #space-product-stack .spc-price small { font-size:15px; } #space-product-stack .spc-stats { gap:12px; } #space-product-stack .spc-stats > div { padding:16px 18px; border-color:#eceef3; border-radius:14px; } #space-product-stack .spc-stats small { color:#6b7280; font-size:13px; } #space-product-stack .spc-stats strong { margin-top:6px; color:#0b0f1c; font-size:28px; font-weight:750; letter-spacing:-.03em; } #space-product-stack .spc-empty-chart { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:14px; margin-top:20px; padding:20px; border:1px solid #eceef3; border-radius:14px; color:#3b4256; font-size:14px; } #space-product-stack .spc-empty-chart > span { grid-column:1/-1; color:#0b0f1c; font-weight:650; } #space-product-stack .spc-empty-chart > div { border:0; border-radius:8px 8px 4px 4px; background:var(--spc-accent); } #space-product-stack .spc-empty-chart > div:nth-of-type(1) { height:56px; opacity:.4; } #space-product-stack .spc-empty-chart > div:nth-of-type(2) { height:88px; opacity:.7; } #space-product-stack .spc-empty-chart > div:nth-of-type(3) { height:120px; opacity:1; } #space-product-stack .spc-empty-chart > small { grid-column:1/-1; margin:0; color:#8a90a0; font-size:13px; } #space-product-stack .spc-mail-fields p { padding:12px 0; font-size:15px; } #space-product-stack .spc-mail-fields span { min-width:52px; } #space-product-stack .spc-letter > p { color:#3b4256; font-size:15px; } #space-product-stack .spc-letter-link { padding:14px; border-radius:999px; background:#0b0f1c; color:#fff; font-size:14px; font-weight:600; } #space-product-stack .spc-person { padding:18px 0; } @media (max-width:900px) { #space-product-stack .spc-card { padding:32px 26px; } #space-product-stack .spc-panel { grid-template-columns:1fr; min-height:0; } #space-product-stack .spc-copy { padding:32px 26px 8px; } #space-product-stack .spc-preview { padding:24px 0 0 20px; } #space-product-stack .spc-window { min-height:360px; } } @media (max-width:760px) { #space-product-stack .spc-card { padding:22px 18px; } #space-product-stack .spc-heading h3 { font-size:clamp(38px,11vw,52px); } #space-product-stack .spc-tabs button { padding:10px 16px; font-size:15px; } #space-product-stack .spc-copy li { font-size:16px; } #space-product-stack .spc-window-body { padding:22px 20px; } #space-product-stack .spc-window h4 { font-size:22px; } #space-product-stack .spc-stats strong { font-size:22px; } } /* Intro et en-têtes enrichis */ #space-product-stack .spc-intro { padding:120px 20px 80px; } #space-product-stack .spc-intro h2 { margin:0 auto 22px; max-width:1000px; color:#0b0f1c; font-size:clamp(40px,5.6vw,80px); font-weight:750; line-height:1.02; letter-spacing:-.055em; } #space-product-stack .spc-intro > p { max-width:640px; margin:0 auto; color:#4a5165; font-size:clamp(18px,1.7vw,22px); line-height:1.5; } #space-product-stack .spc-heading { position:relative; } #space-product-stack .spc-heading h3 { padding-right:200px; } #space-product-stack .spc-pills { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none; } #space-product-stack .spc-pills li { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--spc-deep); border-radius:999px; background:var(--spc-tint); color:#2b3142; font-size:14px; font-weight:600; } #space-product-stack .spc-pills li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--spc-accent); } #space-product-stack .spc-more { position:absolute; top:12px; right:0; display:inline-flex; align-items:center; height:46px; padding:0 22px; border-radius:999px; background:#0b0f1c; color:#fff; font-size:15px; font-weight:600; text-decoration:none; transition:background .15s; } #space-product-stack .spc-more:hover { background:var(--spc-accent); color:#fff; } @media (max-width:760px) { #space-product-stack .spc-intro { padding:72px 4px 48px; } #space-product-stack .spc-heading h3 { padding-right:0; } #space-product-stack .spc-more { position:static; margin-top:20px; height:42px; } #space-product-stack .spc-pills li { font-size:13px; padding:7px 12px; } } /* Studio : vraies interfaces (tuiles, tableau, graphique) */ #space-product-stack .spx-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #space-product-stack .spx-kpis > div { padding:16px 18px; border:1px solid #eceef3; border-radius:14px; } #space-product-stack .spx-kpis small { display:block; color:#6b7280; font-size:13px; } #space-product-stack .spx-kpis strong { display:block; margin-top:6px; color:#0b0f1c; font-size:28px; font-weight:750; letter-spacing:-.03em; } #space-product-stack .spx-kpis em { color:#16a34a; font-size:13px; font-style:normal; font-weight:650; } #space-product-stack .spx-card { margin-top:14px; padding:18px; border:1px solid #eceef3; border-radius:14px; } #space-product-stack .spx-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } #space-product-stack .spx-card-head strong { color:#0b0f1c; font-size:15px; } #space-product-stack .spx-chip, #space-product-stack .spx-filters span { padding:6px 12px; border:1px solid #e3e6ec; border-radius:8px; background:#fff; color:#2b3142; font-size:13px; font-weight:500; } #space-product-stack .spx-bars { display:flex; align-items:flex-end; gap:10px; height:110px; } #space-product-stack .spx-bars i { flex:1; border-radius:6px 6px 3px 3px; background:var(--spc-accent); } #space-product-stack .spx-bars i:nth-child(1) { height:45%; opacity:.55; } #space-product-stack .spx-bars i:nth-child(2) { height:62%; opacity:.65; } #space-product-stack .spx-bars i:nth-child(3) { height:38%; opacity:.5; } #space-product-stack .spx-bars i:nth-child(4) { height:80%; opacity:.8; } #space-product-stack .spx-bars i:nth-child(5) { height:70%; opacity:.75; } #space-product-stack .spx-bars i:nth-child(6) { height:95%; opacity:1; } #space-product-stack .spx-bars i:nth-child(7) { height:55%; opacity:.6; } #space-product-stack .spx-table { font-size:14px; } #space-product-stack .spx-tr { display:grid; grid-template-columns:1.6fr 1.1fr .9fr .9fr; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid #f0f2f6; color:#3b4256; } #space-product-stack .spx-tr:last-child { border-bottom:0; } #space-product-stack .spx-th { padding-top:0; color:#8a90a0; font-size:12px; font-weight:650; } #space-product-stack .spx-who { display:flex; align-items:center; gap:10px; color:#0b0f1c; font-weight:650; } #space-product-stack .spx-av { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; color:#fff; font-size:12px; font-style:normal; font-weight:700; } #space-product-stack .spx-av-1 { background:#2f62ee; } #space-product-stack .spx-av-2 { background:#7c5cd6; } #space-product-stack .spx-av-3 { background:#f59e0b; } #space-product-stack .spx-av-4 { background:#10b981; } #space-product-stack .spx-av-5 { background:#ec4899; } #space-product-stack .spx-role { display:inline-block; padding:4px 10px; border-radius:999px; background:#f1f3f8; color:#3b4256; font-size:12px; font-weight:650; } #space-product-stack .spx-role-owner { background:#e8eeff; color:#2f4fd0; } #space-product-stack .spx-role-mod { background:#ede7ff; color:#6941c6; } #space-product-stack .spx-status { display:inline-flex; align-items:center; gap:6px; color:#8a90a0; } #space-product-stack .spx-status::before { content:""; width:8px; height:8px; border-radius:50%; background:#c5cad3; } #space-product-stack .spx-status.is-on { color:#0b0f1c; } #space-product-stack .spx-status.is-on::before { background:#22c55e; } #space-product-stack .spx-chart-card h5 { margin:0 0 14px; color:#0b0f1c; font-size:26px; font-weight:750; letter-spacing:-.03em; } #space-product-stack .spx-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; } #space-product-stack .spx-chart { display:block; width:100%; height:auto; } #space-product-stack .spx-chart line { stroke:#eef0f4; stroke-width:1; } #space-product-stack .spx-chart text { fill:#8a90a0; font-family:inherit; font-size:11px; } #space-product-stack .spx-chart path { fill:none; stroke-width:3; stroke-linecap:round; } #space-product-stack .spx-chart .s1 { stroke:#7c5cd6; } #space-product-stack .spx-chart .s2 { stroke:#22c55e; } #space-product-stack .spx-chart .s3 { stroke:#3b82f6; } #space-product-stack .spx-legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; color:#2b3142; font-size:14px; } #space-product-stack .spx-legend span { display:inline-flex; align-items:center; gap:8px; } #space-product-stack .spx-legend span::before { content:""; width:9px; height:9px; border-radius:50%; } #space-product-stack .spx-legend .c1::before { background:#7c5cd6; } #space-product-stack .spx-legend .c2::before { background:#22c55e; } #space-product-stack .spx-legend .c3::before { background:#3b82f6; } @media (max-width:760px) { #space-product-stack .spx-kpis strong { font-size:22px; } #space-product-stack .spx-tr { grid-template-columns:1.6fr 1fr 1fr; } #space-product-stack .spx-tr > span:nth-child(3) { display:none; } #space-product-stack .spx-chart-card h5 { font-size:21px; } } /* Communauté : vrais écrans */ #space-product-stack .scm-feed { display:grid; gap:14px; } #space-product-stack .scm-post { padding:18px 20px; border:1px solid #eceef3; border-radius:14px; background:#fff; } #space-product-stack .scm-post-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; } #space-product-stack .scm-post-head strong { display:block; color:#0b0f1c; font-size:15px; } #space-product-stack .scm-post-head small { color:#8a90a0; font-size:13px; } #space-product-stack .scm-post h6 { margin:0 0 6px; color:#0b0f1c; font-size:18px; font-weight:700; letter-spacing:-.02em; } #space-product-stack .scm-post p { margin:0 0 14px; color:#3b4256; font-size:15px; line-height:1.55; } #space-product-stack .scm-post-foot { display:flex; align-items:center; gap:16px; margin-top:8px; color:#6b7280; font-size:13px; font-weight:600; } #space-product-stack .scm-stack { display:inline-flex; align-items:center; margin-left:auto; } #space-product-stack .scm-stack .spx-av { width:28px; height:28px; margin-left:-8px; border:2px solid #fff; font-size:10px; } #space-product-stack .scm-stack .spx-av:first-child { margin-left:0; } #space-product-stack .scm-stack b { margin-left:8px; color:#3b4256; font-size:13px; } #space-product-stack .spc-window.scm-dm { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } #space-product-stack .scm-dm-list { padding-top:18px; border-right:1px solid #eef0f4; } #space-product-stack .scm-dm-head { display:flex; align-items:center; justify-content:space-between; padding:0 20px 12px; } #space-product-stack .scm-dm-head strong { color:#0b0f1c; font-size:17px; font-weight:700; } #space-product-stack .scm-dm-thread .scm-dm-head { padding:18px 22px 14px; border-bottom:1px solid #eef0f4; } #space-product-stack .scm-online { width:9px; height:9px; border-radius:50%; background:#22c55e; } #space-product-stack .scm-dm-tabs { display:flex; gap:16px; padding:0 20px; border-bottom:1px solid #eef0f4; color:#6b7280; font-size:14px; } #space-product-stack .scm-dm-tabs span { padding:8px 0 10px; } #space-product-stack .scm-dm-tabs .is-on { color:#0b0f1c; font-weight:650; box-shadow:inset 0 -2px 0 #0b0f1c; } #space-product-stack .scm-search { margin:12px 16px; padding:10px 14px; border:1px solid #e3e6ec; border-radius:10px; color:#8a90a0; font-size:14px; } #space-product-stack .scm-dm-item { display:flex; gap:12px; padding:12px 20px; } #space-product-stack .scm-dm-item.is-unread { background:#f5f7fb; } #space-product-stack .scm-dm-item > div { flex:1; min-width:0; } #space-product-stack .scm-dm-item strong { display:flex; justify-content:space-between; gap:8px; color:#0b0f1c; font-size:14px; } #space-product-stack .scm-dm-item small { color:#8a90a0; font-size:12px; font-weight:400; } #space-product-stack .scm-dm-item span { display:block; margin-top:3px; overflow:hidden; color:#6b7280; font-size:13px; white-space:nowrap; text-overflow:ellipsis; } #space-product-stack .scm-msg { display:flex; gap:12px; padding:14px 22px; } #space-product-stack .scm-msg strong { color:#0b0f1c; font-size:14px; } #space-product-stack .scm-msg small { margin-left:6px; color:#8a90a0; font-size:12px; font-weight:400; } #space-product-stack .scm-msg p { margin:4px 0 0; color:#3b4256; font-size:14px; line-height:1.5; } #space-product-stack .scm-thread { display:inline-flex; margin-top:8px; padding:5px 12px; border:1px solid #e3e6ec; border-radius:999px; color:#2b3142; font-size:12px; font-weight:650; } #space-product-stack .scm-event { overflow:hidden; border:1px solid #eceef3; border-radius:16px; } #space-product-stack .scm-event-cover { position:relative; height:150px; } #space-product-stack .scm-event-cover img { width:100%; height:100%; object-fit:cover; } #space-product-stack .scm-date { position:absolute; top:14px; left:14px; display:grid; place-items:center; align-content:center; width:52px; height:56px; border-radius:12px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.15); } #space-product-stack .scm-date b { color:#0b0f1c; font-size:20px; line-height:1; } #space-product-stack .scm-date small { margin-top:3px; color:#ef4444; font-size:11px; font-weight:700; } #space-product-stack .scm-event-cover em { position:absolute; top:14px; right:14px; padding:5px 10px; border-radius:999px; background:rgba(11,15,28,.7); color:#fff; font-size:12px; font-style:normal; font-weight:650; } #space-product-stack .scm-event-body { padding:16px 18px; } #space-product-stack .scm-event-body h6 { margin:0 0 4px; color:#0b0f1c; font-size:18px; font-weight:750; } #space-product-stack .scm-event-body p { margin:0 0 14px; color:#6b7280; font-size:14px; } #space-product-stack .scm-event-foot { display:flex; align-items:center; justify-content:space-between; } #space-product-stack .scm-event-foot .scm-stack { margin-left:0; } #space-product-stack .scm-cta { padding:9px 16px; border-radius:999px; background:#0b0f1c; color:#fff; font-size:13px; font-weight:650; } #space-product-stack .scm-ev-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #f0f2f6; } #space-product-stack .scm-ev-row:last-child { border-bottom:0; } #space-product-stack .scm-ev-row .scm-date-sm { position:static; width:46px; height:50px; background:#f3f5f9; box-shadow:none; } #space-product-stack .scm-ev-row > div strong { display:block; color:#0b0f1c; font-size:15px; } #space-product-stack .scm-ev-row > div small { color:#6b7280; font-size:13px; } #space-product-stack .spc-window.scm-live-win { display:flex; flex-direction:column; border-color:rgba(255,255,255,.15); background:#18191d; } #space-product-stack .scm-live-win .fhc-live { flex:1; } #space-product-stack .scm-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } #space-product-stack .scm-chips span { padding:7px 14px; border:1px solid #e3e6ec; border-radius:999px; color:#3b4256; font-size:13px; font-weight:600; } #space-product-stack .scm-chips .is-on { border-color:#0b0f1c; background:#0b0f1c; color:#fff; } #space-product-stack .scm-res-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #space-product-stack .scm-res { padding:10px 10px 14px; border:1px solid #eceef3; border-radius:14px; } #space-product-stack .scm-res-cover { display:flex; align-items:flex-end; height:84px; margin-bottom:12px; padding:10px; border-radius:10px; } #space-product-stack .scm-res-cover span { padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:#0b0f1c; font-size:11px; font-weight:700; } #space-product-stack .scm-res-1 .scm-res-cover { background:linear-gradient(135deg,#2f62ee,#7b5cff); } #space-product-stack .scm-res-2 .scm-res-cover { background:linear-gradient(135deg,#f59e0b,#ec4899); } #space-product-stack .scm-res-3 .scm-res-cover { background:linear-gradient(135deg,#10b981,#0e7490); } #space-product-stack .scm-res-4 .scm-res-cover { background:linear-gradient(135deg,#38bdf8,#2f62ee); } #space-product-stack .scm-res strong { display:block; padding:0 4px; color:#0b0f1c; font-size:14px; line-height:1.35; } #space-product-stack .scm-res small { display:block; padding:4px 4px 0; color:#8a90a0; font-size:12px; } #space-product-stack .scm-dir .scm-search { margin:0 0 12px; } #space-product-stack .scm-people { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #space-product-stack .scm-person { display:flex; flex-direction:column; align-items:center; padding:16px 10px; border:1px solid #eceef3; border-radius:14px; text-align:center; } #space-product-stack .scm-person .spx-av { width:48px; height:48px; margin-bottom:10px; font-size:15px; } #space-product-stack .scm-person strong { color:#0b0f1c; font-size:14px; } #space-product-stack .scm-person small { margin-top:3px; color:#6b7280; font-size:12px; } #space-product-stack .scm-person span { margin-top:8px; padding:3px 10px; border-radius:999px; background:#f3f5f9; color:#3b4256; font-size:11px; font-weight:600; } #space-product-stack .scm-brand-preview { overflow:hidden; margin-bottom:16px; border:1px solid #eceef3; border-radius:16px; } #space-product-stack .scm-brand-banner { height:84px; background:linear-gradient(120deg,#2f62ee,#7b5cff 60%,#ec4899); } #space-product-stack .scm-brand-id { display:flex; align-items:flex-end; gap:12px; margin-top:-24px; padding:0 18px 16px; } #space-product-stack .scm-brand-logo { display:grid; place-items:center; width:52px; height:52px; border:3px solid #fff; border-radius:14px; background:#0b0f1c; color:#fff; font-size:20px; font-weight:800; } #space-product-stack .scm-brand-id strong { display:block; color:#0b0f1c; font-size:16px; } #space-product-stack .scm-brand-id small { color:#6b7280; font-size:13px; } #space-product-stack .scm-settings { border:1px solid #eceef3; border-radius:14px; } #space-product-stack .scm-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; color:#0b0f1c; font-size:14px; font-weight:600; } #space-product-stack .scm-setting + .scm-setting { border-top:1px solid #eef0f4; } #space-product-stack .scm-swatches { display:flex; gap:8px; } #space-product-stack .scm-swatches i { width:24px; height:24px; border-radius:50%; } #space-product-stack .scm-swatches i:nth-child(1) { background:#2f62ee; } #space-product-stack .scm-swatches i:nth-child(2) { background:#7c5cd6; } #space-product-stack .scm-swatches i:nth-child(3) { background:#10b981; } #space-product-stack .scm-swatches i:nth-child(4) { background:#f59e0b; } #space-product-stack .scm-swatches i:nth-child(5) { background:#0b0f1c; } #space-product-stack .scm-swatches .is-on { box-shadow:0 0 0 2px #fff, 0 0 0 4px #0b0f1c; } #space-product-stack .scm-file { display:flex; align-items:center; gap:10px; } #space-product-stack .scm-file em { padding:6px 12px; border:1px solid #e3e6ec; border-radius:8px; color:#2b3142; font-size:13px; font-style:normal; } #space-product-stack .scm-brand-logo.scm-mini { width:30px; height:30px; border:0; border-radius:8px; font-size:13px; } @media (max-width:760px) { #space-product-stack .spc-window.scm-dm { grid-template-columns:1fr; } #space-product-stack .scm-dm-thread { display:none; } #space-product-stack .scm-people { grid-template-columns:repeat(2,minmax(0,1fr)); } #space-product-stack .scm-post-foot .scm-stack { display:none; } } /* Paiements : vrais écrans */ #space-product-stack .spy-toggle { display:inline-flex; margin-bottom:18px; padding:4px; border-radius:999px; background:#f1f3f8; } #space-product-stack .spy-toggle span { padding:7px 14px; border-radius:999px; color:#6b7280; font-size:13px; font-weight:600; } #space-product-stack .spy-toggle .is-on { background:#fff; color:#0b0f1c; box-shadow:0 1px 3px rgba(16,24,40,.12); } #space-product-stack .spy-toggle b { margin-left:4px; color:#16a34a; } #space-product-stack .spy-plan h6 { margin:0 0 6px; color:#0b0f1c; font-size:22px; font-weight:750; letter-spacing:-.03em; } #space-product-stack .spy-plan > p { margin:0 0 16px; color:#4a5165; font-size:15px; line-height:1.55; } #space-product-stack .spy-price { display:flex; align-items:baseline; gap:6px; margin-bottom:16px; } #space-product-stack .spy-price strong { color:#0b0f1c; font-size:40px; font-weight:800; letter-spacing:-.04em; } #space-product-stack .spy-price span { color:#6b7280; font-size:16px; } #space-product-stack .spy-feats { display:grid; gap:10px; margin:0 0 20px; padding:16px 0 0; border-top:1px solid #f0f2f6; list-style:none; } #space-product-stack .spy-feats li { position:relative; padding-left:28px; color:#0b0f1c; font-size:15px; } #space-product-stack .spy-feats li::before { content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--spc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; } #space-product-stack .spy-join { display:flex; align-items:center; justify-content:space-between; gap:12px; } #space-product-stack .spy-join .scm-stack { margin-left:0; } #space-product-stack .spy-tx { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f6; } #space-product-stack .spy-tx:last-child { border-bottom:0; padding-bottom:0; } #space-product-stack .spy-tx > div { flex:1; min-width:0; } #space-product-stack .spy-tx strong { display:block; color:#0b0f1c; font-size:14px; } #space-product-stack .spy-tx small { color:#6b7280; font-size:13px; } #space-product-stack .spy-tx > b { color:#0b0f1c; font-size:15px; } /* Emails : vrais écrans */ #space-product-stack .spe-mail { overflow:hidden; margin-top:16px; border:1px solid #eceef3; border-radius:14px; } #space-product-stack .spe-mail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #f0f2f6; } #space-product-stack .spe-brand { display:flex; align-items:center; gap:10px; } #space-product-stack .spe-brand b { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#0b0f1c; color:#fff; font-size:13px; } #space-product-stack .spe-brand strong { color:#0b0f1c; font-size:14px; } #space-product-stack .spe-mail-head small { color:#8a90a0; font-size:12px; } #space-product-stack .spe-mail > img { display:block; width:100%; height:120px; object-fit:cover; } #space-product-stack .spe-mail-body { padding:18px; } #space-product-stack .spe-mail-body h6 { margin:0 0 6px; color:#0b0f1c; font-size:20px; font-weight:750; letter-spacing:-.03em; } #space-product-stack .spe-mail-body > p { margin:0 0 14px; color:#4a5165; font-size:14px; line-height:1.55; } #space-product-stack .spe-box { margin-bottom:16px; padding:12px 14px; border-radius:12px; background:var(--spc-tint); } #space-product-stack .spe-box > span { display:block; margin-bottom:6px; color:var(--spc-accent); font-size:12px; font-weight:750; letter-spacing:.04em; } #space-product-stack .spe-box > div { padding:6px 0; } #space-product-stack .spe-box strong { display:block; color:#0b0f1c; font-size:14px; } #space-product-stack .spe-box small { color:#6b7280; font-size:12px; } #space-product-stack .spe-cta { display:flex; justify-content:center; } #space-product-stack .spe-table { margin-top:14px; } #space-product-stack .spe-st { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:650; } #space-product-stack .spe-st-sent { background:#e7f6ec; color:#15803d; } #space-product-stack .spe-st-auto { background:#e8eeff; color:#2f4fd0; } #space-product-stack .spe-st-sched { background:#fff1e6; color:#c2410c; } #space-product-stack .spe-st-draft { background:#f1f3f8; color:#5a6175; } #space-product-stack .spe-seg-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } #space-product-stack .spe-seg-head strong { color:#0b0f1c; font-size:18px; font-weight:750; } #space-product-stack .spe-seg { display:grid; grid-template-columns:minmax(0,1fr) 120px; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid #f0f2f6; } #space-product-stack .spe-seg:last-child { border-bottom:0; } #space-product-stack .spe-seg strong { display:block; color:#0b0f1c; font-size:15px; } #space-product-stack .spe-seg small { color:#6b7280; font-size:13px; } #space-product-stack .spe-seg i { display:block; height:8px; border-radius:99px; background:#f1f3f8; overflow:hidden; } #space-product-stack .spe-seg i b { display:block; height:100%; border-radius:99px; background:var(--spc-accent); } #space-product-stack .spe-seg:nth-of-type(2) i b { width:100%; } #space-product-stack .spe-seg:nth-of-type(3) i b { width:26%; } #space-product-stack .spe-seg:nth-of-type(4) i b { width:11%; } #space-product-stack .spe-seg:nth-of-type(5) i b { width:7%; } /* Marketplace : vrais écrans */ #space-product-stack .spk-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #space-product-stack .spk-svc { overflow:hidden; border:1px solid #eceef3; border-radius:14px; } #space-product-stack .spk-cover { display:flex; align-items:flex-end; height:78px; padding:10px; } #space-product-stack .spk-cover span { padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:#0b0f1c; font-size:11px; font-weight:700; } #space-product-stack .spk-cover-1 { background:linear-gradient(135deg,#7656d6,#ec4899); } #space-product-stack .spk-cover-2 { background:linear-gradient(135deg,#2f62ee,#38bdf8); } #space-product-stack .spk-cover-3 { background:linear-gradient(135deg,#10b981,#0e7490); } #space-product-stack .spk-cover-4 { background:linear-gradient(135deg,#f59e0b,#df6f34); } #space-product-stack .spk-svc-body { padding:12px; } #space-product-stack .spk-who { display:flex; align-items:center; gap:8px; color:#3b4256; font-size:13px; font-weight:600; } #space-product-stack .spk-who .spx-av { width:24px; height:24px; font-size:9px; } #space-product-stack .spk-svc strong { display:block; margin:8px 0 6px; color:#0b0f1c; font-size:14px; line-height:1.35; } #space-product-stack .spk-svc em { color:#0b0f1c; font-size:14px; font-style:normal; font-weight:750; } #space-product-stack .spk-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; } #space-product-stack .spk-head strong { color:#0b0f1c; font-size:18px; font-weight:750; } #space-product-stack .spk-opp { padding:16px 0; border-bottom:1px solid #f0f2f6; } #space-product-stack .spk-opp:last-child { border-bottom:0; } #space-product-stack .spk-opp-top { display:flex; align-items:center; gap:10px; } #space-product-stack .spk-opp-top small { color:#6b7280; font-size:13px; } #space-product-stack .spk-opp > strong { display:block; margin:8px 0 10px; color:#0b0f1c; font-size:16px; } #space-product-stack .spk-opp-foot { display:flex; align-items:center; justify-content:space-between; } #space-product-stack .spk-opp-foot small { color:#6b7280; font-size:13px; font-weight:600; } #space-product-stack .spk-profile { padding:18px; border:1px solid #eceef3; border-radius:14px; } #space-product-stack .spk-profile-id { display:flex; align-items:center; gap:12px; } #space-product-stack .spk-profile-id .spx-av { width:56px; height:56px; font-size:17px; } #space-product-stack .spk-profile-id strong { display:block; color:#0b0f1c; font-size:18px; font-weight:750; } #space-product-stack .spk-profile-id small { color:#6b7280; font-size:13px; } #space-product-stack .spk-profile > p { margin:14px 0; color:#3b4256; font-size:14px; line-height:1.55; } #space-product-stack .spk-actions { display:flex; gap:10px; } #space-product-stack .spk-ghost { padding:9px 16px; border:1px solid #d9dde6; border-radius:999px; color:#0b0f1c; font-size:13px; font-weight:650; } #space-product-stack .spk-recent { margin-top:16px; } #space-product-stack .spk-recent > span { display:block; color:#8a90a0; font-size:12px; font-weight:700; letter-spacing:.04em; } @media (max-width:760px) { #space-product-stack .spk-head .scm-cta { display:none; } }