/* Dark-mode for product pages loaded inside workspace iframe */ /* Applied when html has .in-iframe class */ /* === BASE === */ .in-iframe, .in-iframe body { background: #0b0d14 !important; color: #e2e8f0 !important; } .in-iframe section { background: transparent !important; } .in-iframe .hero { background: transparent !important; min-height: auto !important; } /* === TYPOGRAPHY === */ .in-iframe h1, .in-iframe h2, .in-iframe h3, .in-iframe h4 { color: #f1f5f9 !important; } .in-iframe h1 em, .in-iframe h2 em { color: #d4a843 !important; } .in-iframe p, .in-iframe li, .in-iframe span, .in-iframe label, .in-iframe small { color: #94a3b8 !important; } .in-iframe b, .in-iframe strong { color: #e2e8f0 !important; } .in-iframe a { color: #60a5fa !important; } .in-iframe .sub, .in-iframe [class*="sub"] { color: #64748b !important; } /* === BADGES === */ .in-iframe .badge { background: rgba(212,168,67,.1) !important; color: #d4a843 !important; border: 1px solid rgba(212,168,67,.2) !important; } /* === FORMS === */ .in-iframe input, .in-iframe textarea, .in-iframe select { background: #111827 !important; color: #e2e8f0 !important; border: 1px solid #1e293b !important; border-radius: 8px !important; } .in-iframe ::placeholder { color: #475569 !important; } /* === CARDS === */ .in-iframe .feat, .in-iframe .feature, .in-iframe [class*="feat"], .in-iframe .card, .in-iframe [class*="card"]:not(.dm-box), .in-iframe .plan-card, .in-iframe .pricing-card, .in-iframe .tier-card, .in-iframe [class*="plan"], .in-iframe [class*="tier"], .in-iframe [class*="pricing"], .in-iframe [class*="block"]:not(body), .in-iframe [class*="item"]:not(li):not(option) { background: linear-gradient(135deg, #111827, #0f172a) !important; border: 1px solid #1e293b !important; border-radius: 12px !important; color: #e2e8f0 !important; } /* === STATS === */ .in-iframe .stat, .in-iframe [class*="stat"] { background: rgba(255,255,255,.03) !important; border: 1px solid #1e293b !important; border-radius: 12px !important; } .in-iframe .stat-v, .in-iframe .stat b, .in-iframe [class*="stat-v"] { color: #d4a843 !important; } .in-iframe .stat-l, .in-iframe .stat small, .in-iframe [class*="stat-l"] { color: #64748b !important; } /* === BUTTONS === */ .in-iframe .btn-p, .in-iframe [class*="btn-p"], .in-iframe [class*="cta-btn"], .in-iframe button[class*="primary"], .in-iframe .btn-primary { background: linear-gradient(135deg, #d4a843, #b8942e) !important; color: #0a0d13 !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; } .in-iframe .btn-o, .in-iframe [class*="btn-o"], .in-iframe [class*="btn-n"], .in-iframe [class*="btn-secondary"], .in-iframe .btn-ghost { background: transparent !important; color: #94a3b8 !important; border: 1px solid #334155 !important; border-radius: 10px !important; } /* === TABLES === */ .in-iframe table { border-color: #1e293b !important; } .in-iframe th { background: #111827 !important; color: #94a3b8 !important; border-color: #1e293b !important; } .in-iframe td { border-color: #1e293b !important; color: #e2e8f0 !important; } .in-iframe tr:hover { background: rgba(129,140,248,.05) !important; } .in-iframe code, .in-iframe pre { background: #1e293b !important; color: #e2e8f0 !important; } .in-iframe hr { border-color: #1e293b !important; } /* ================================================================ */ /* === DEMO / COMPARATEUR / CHAT SECTIONS — THE MAIN FIX === */ /* ================================================================ */ /* Demo box - comparateur, test live sections */ .in-iframe .dm-box, .in-iframe #demo { background: linear-gradient(135deg, #111827, #0f172a) !important; border: 1px solid #1e293b !important; border-radius: 16px !important; padding: 24px !important; margin: 20px auto !important; max-width: 800px !important; color: #e2e8f0 !important; } .in-iframe .dm-box h3, .in-iframe #demo h3 { color: #d4a843 !important; } /* Demo input row */ .in-iframe .dm-row { display: flex !important; gap: 8px !important; margin: 12px 0 !important; } .in-iframe .dm-row input { flex: 1 !important; background: #0b0d14 !important; border: 1px solid #334155 !important; color: #e2e8f0 !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 14px !important; } .in-iframe .dm-row button { background: linear-gradient(135deg, #d4a843, #b8942e) !important; color: #0a0d13 !important; border: none !important; padding: 10px 20px !important; border-radius: 8px !important; font-weight: 700 !important; cursor: pointer !important; white-space: nowrap !important; } /* Demo output */ .in-iframe .dm-out { background: #0b0d14 !important; border: 1px solid #1e293b !important; border-radius: 12px !important; padding: 16px !important; margin-top: 12px !important; color: #94a3b8 !important; font-size: 13px !important; line-height: 1.6 !important; max-height: 400px !important; overflow-y: auto !important; } .in-iframe .dm-out b, .in-iframe .dm-out strong { color: #e2e8f0 !important; } .in-iframe .dm-out code { background: #1e293b !important; color: #60a5fa !important; padding: 2px 6px !important; border-radius: 4px !important; } /* Loading dots animation */ .in-iframe .dm-ld { display: inline-block !important; width: 6px !important; height: 6px !important; background: #d4a843 !important; border-radius: 50% !important; margin: 0 2px !important; animation: dmPulse 1.2s infinite !important; } @keyframes dmPulse { 0%,100%{opacity:.3} 50%{opacity:1} } /* === CTA / ESSAYER SECTIONS === */ .in-iframe .cta, .in-iframe #cta, .in-iframe [id*="cta"] { background: linear-gradient(135deg, rgba(212,168,67,.05), rgba(99,102,241,.03)) !important; border: 1px solid rgba(212,168,67,.15) !important; border-radius: 16px !important; max-width: 800px !important; margin: 24px auto !important; } .in-iframe .cta h2, .in-iframe #cta h2 { color: #f1f5f9 !important; } .in-iframe .cta p, .in-iframe #cta p { color: #94a3b8 !important; } /* === CHAT WIDGET SECTIONS === */ .in-iframe [class*="chat-container"], .in-iframe [class*="chatbox"], .in-iframe [class*="chat-widget"], .in-iframe [class*="chat-area"] { background: #111827 !important; border: 1px solid #1e293b !important; border-radius: 16px !important; max-width: 800px !important; margin: 0 auto !important; } .in-iframe [class*="chat-msg"], .in-iframe [class*="message"] { background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 12px !important; color: #e2e8f0 !important; } /* === HIDE IN IFRAME === */ .in-iframe nav, .in-iframe footer, .in-iframe .wv-links { display: none !important; } /* === FIX WHITE BACKGROUNDS (inline styles) === */ .in-iframe div[style*="background: #fff"], .in-iframe div[style*="background:#fff"], .in-iframe div[style*="background: white"], .in-iframe div[style*="background:white"], .in-iframe div[style*="background-color: #fff"], .in-iframe div[style*="background-color:#fff"], .in-iframe div[style*="background-color: white"], .in-iframe div[style*="background-color:white"], .in-iframe section[style*="background: #f"], .in-iframe section[style*="background:#f"], .in-iframe div[style*="background: #f"], .in-iframe div[style*="background:#f"] { background: #111827 !important; } /* === SCROLL === */ .in-iframe ::-webkit-scrollbar { width: 4px; } .in-iframe ::-webkit-scrollbar-track { background: #0b0d14; } .in-iframe ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } /* === CENTER ALL CONTENT === */ .in-iframe body > * { max-width: 100% !important; } .in-iframe section, .in-iframe div.container, .in-iframe [class*="container"] { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* ═══ DEMO LIVE SECTIONS — applies to ALL product pages ═══ */ .dm-box { background: linear-gradient(135deg, #111827, #0f172a) !important; border: 1px solid #1e293b !important; border-radius: 16px !important; padding: 28px 24px !important; margin: 24px 0 !important; max-width: 700px !important; } .dm-box h3 { font-size: 16px !important; font-weight: 700 !important; color: #f1f5f9 !important; margin-bottom: 14px !important; } .dm-row { display: flex !important; gap: 10px !important; margin-bottom: 12px !important; } .dm-row input { flex: 1 !important; padding: 12px 16px !important; background: #0b0d14 !important; border: 1px solid #1e293b !important; border-radius: 10px !important; color: #e2e8f0 !important; font-size: 14px !important; font-family: inherit !important; transition: border-color .2s !important; } .dm-row input:focus { outline: none !important; border-color: #d4a843 !important; } .dm-row input::placeholder { color: #475569 !important; } .dm-row button { padding: 12px 24px !important; background: linear-gradient(135deg, #d4a843, #b8942e) !important; color: #0a0d13 !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; transition: transform .15s, box-shadow .15s !important; font-family: inherit !important; white-space: nowrap !important; } .dm-row button:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(212,168,67,.25) !important; } .dm-out { padding: 16px !important; background: rgba(255,255,255,.02) !important; border: 1px solid #1e293b !important; border-radius: 10px !important; color: #94a3b8 !important; font-size: 13px !important; line-height: 1.6 !important; min-height: 60px !important; white-space: pre-wrap !important; } .dm-out b, .dm-out strong, .dm-out h4 { color: #e2e8f0 !important; } .dm-ld { display: inline-block !important; width: 8px !important; height: 8px !important; background: #d4a843 !important; border-radius: 50% !important; margin-right: 4px !important; animation: dmPulse 1.2s ease-in-out infinite !important; } .dm-ld:nth-child(2) { animation-delay: .2s !important; } .dm-ld:nth-child(3) { animation-delay: .4s !important; } @keyframes dmPulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } } /* ═══ CTA / ESSAYER sections ═══ */ .cta { background: linear-gradient(135deg, #111827, #0f172a) !important; border: 1px solid #1e293b !important; border-radius: 20px !important; padding: 48px 32px !important; } .cta h2, .cta h3 { color: #f1f5f9 !important; } .cta p { color: #64748b !important; } /* ═══ "Essayer maintenant" badge ═══ */ .in-iframe [style*="letter-spacing"] { color: #d4a843 !important; } /* Fix ghost/link buttons */ .btn-o{background:transparent!important;color:#94a3b8!important;border:1px solid #334155!important;border-radius:10px!important;padding:10px 22px!important;text-decoration:none!important;display:inline-block!important;transition:all .2s!important} .btn-o:hover{border-color:#d4a843!important;color:#d4a843!important} .btn-l{background:transparent!important;color:#d4a843!important;border:none!important;padding:10px 4px!important;text-decoration:none!important;display:inline-block!important;font-weight:600!important} .btn-l:hover{color:#e8c36a!important} .btn-n{background:rgba(255,255,255,.06)!important;color:#94a3b8!important;border:1px solid #1e293b!important;border-radius:10px!important;padding:10px 22px!important;text-decoration:none!important;display:inline-block!important} .btn-n:hover{background:rgba(255,255,255,.1)!important;color:#f1f5f9!important} .btns{display:flex!important;gap:12px!important;flex-wrap:wrap!important} /* Fix white sections in dark pages */ section[style*='background:#f'],section[style*='background: #f'], section[style*='background:white'],section[style*='background: white'], section[style*='background-color:#f'],section[style*='background-color: #f'], section[style*='background-color:white'],section[style*='background-color: white']{ background:transparent!important; } .alt,.light-section,[class*='light'],[class*='alt-bg']{ background:rgba(255,255,255,.02)!important; }