/* D1274-light-converted-20260525-200753: palette dark→light for Yacine workspace 80 modules light cohérence (FOND BLANC doctrine). GOLD preserved. */
/* D1273-prefix-fix-20260525-195558: prefixed .dm-box, .cta, .btn-o rules with .in-iframe to scope properly (was leaking globally) */
/* Dark-mode for product pages loaded inside workspace iframe */
/* Applied when html has .in-iframe class */

/* === BASE === */
.in-iframe, .in-iframe body { background: #FFFFFF !important; color: #1B1B1F !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: #1B1B1F !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: #5A6480 !important; }
.in-iframe b, .in-iframe strong { color: #1B1B1F !important; }
.in-iframe a { color: #60a5fa !important; }
.in-iframe .sub, .in-iframe [class*="sub"] { color: #5A6480 !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: #FFFFFF !important; color: #1B1B1F !important; 
  border: 1px solid #E8E2D9 !important; border-radius: 8px !important;
}
.in-iframe ::placeholder { color: #9CA3AF !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, #FFFFFF, #F7F5F0) !important;
  border: 1px solid #E8E2D9 !important; border-radius: 12px !important;
  color: #1B1B1F !important;
}

/* === STATS === */
.in-iframe .stat, .in-iframe [class*="stat"] { 
  background: rgba(0,0,0,.03) !important; 
  border: 1px solid #E8E2D9 !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: #5A6480 !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: #FFFFFF !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: #5A6480 !important;
  border: 1px solid #E8E2D9 !important; border-radius: 10px !important;
}

/* === TABLES === */
.in-iframe table { border-color: #E8E2D9 !important; }
.in-iframe th { background: #FFFFFF !important; color: #5A6480 !important; border-color: #E8E2D9 !important; }
.in-iframe td { border-color: #E8E2D9 !important; color: #1B1B1F !important; }
.in-iframe tr:hover { background: rgba(129,140,248,.05) !important; }
.in-iframe code, .in-iframe pre { background: #E8E2D9 !important; color: #1B1B1F !important; }
.in-iframe hr { border-color: #E8E2D9 !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, #FFFFFF, #F7F5F0) !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin: 20px auto !important;
  max-width: 800px !important;
  color: #1B1B1F !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: #FFFFFF !important;
  border: 1px solid #E8E2D9 !important;
  color: #1B1B1F !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: #FFFFFF !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: #FFFFFF !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: 12px !important;
  color: #5A6480 !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: #1B1B1F !important; }
.in-iframe .dm-out code { background: #E8E2D9 !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: #1B1B1F !important; }
.in-iframe .cta p, .in-iframe #cta p { color: #5A6480 !important; }

/* === CHAT WIDGET SECTIONS === */
.in-iframe [class*="chat-container"], .in-iframe [class*="chatbox"],
.in-iframe [class*="chat-widget"], .in-iframe [class*="chat-area"] {
  background: #FFFFFF !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 16px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}
.in-iframe [class*="chat-msg"], .in-iframe [class*="message"] {
  background: #F7F5F0 !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 12px !important;
  color: #1B1B1F !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: #FFFFFF !important;
}

/* === SCROLL === */
.in-iframe ::-webkit-scrollbar { width: 4px; }
.in-iframe ::-webkit-scrollbar-track { background: #FFFFFF; }
.in-iframe ::-webkit-scrollbar-thumb { background: #E8E2D9; 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 ═══ */
.in-iframe .dm-box {
  background: linear-gradient(135deg, #FFFFFF, #F7F5F0) !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  margin: 24px 0 !important;
  max-width: 700px !important;
}
.in-iframe .dm-box h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1B1B1F !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: #FFFFFF !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 10px !important;
  color: #1B1B1F !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: #9CA3AF !important;
}
.dm-row button {
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #d4a843, #b8942e) !important;
  color: #FFFFFF !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(0,0,0,.02) !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 10px !important;
  color: #5A6480 !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: #1B1B1F !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 ═══ */
.in-iframe .cta {
  background: linear-gradient(135deg, #FFFFFF, #F7F5F0) !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 20px !important;
  padding: 48px 32px !important;
}
.cta h2, .cta h3 {
  color: #1B1B1F !important;
}
.cta p {
  color: #5A6480 !important;
}

/* ═══ "Essayer maintenant" badge ═══ */
.in-iframe [style*="letter-spacing"] {
  color: #d4a843 !important;
}

/* Fix ghost/link buttons */
.in-iframe .btn-o{background:transparent!important;color:#5A6480!important;border:1px solid #E8E2D9!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(0,0,0,.06)!important;color:#5A6480!important;border:1px solid #E8E2D9!important;border-radius:10px!important;padding:10px 22px!important;text-decoration:none!important;display:inline-block!important}
.btn-n:hover{background:rgba(0,0,0,.08)!important;color:#1B1B1F!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(0,0,0,.02)!important;
}

/* === D228B_SHORT_VAR_OVERRIDES — Opus systemic fix (2026-05-25) === */
html.in-iframe {
  --c: #ffffff !important;
  --b: #E8E2D9 !important;
  --t: #1B1B1B !important;
  --s: #ffffff !important;
  --d: #5A6480 !important;
  --bg: #faf7f5 !important;
  --bg2: #ffffff !important;
  --void: #faf7f5 !important;
  --depth: #faf7f5 !important;
  --surface: #ffffff !important;
  --panel: #ffffff !important;
  --card: #ffffff !important;
}
html.in-iframe .c-comment { color: #5A6480 !important; font-style: italic !important; }
html.in-iframe .c-string  { color: #047857 !important; }
html.in-iframe .c-key     { color: #3730A3 !important; }
html.in-iframe .c-keyword { color: #3730A3 !important; }
html.in-iframe .c-num     { color: #B91C1C !important; }
html.in-iframe .btn { color: #1B1B1B !important; }
html.in-iframe .btn.btn-p, html.in-iframe .btn-p { color: #ffffff !important; }
/* === END D228B === */

/* === D228C_DARK_PANELS_OVERRIDE — Opus systemic === */
/* Pages hardcode dark transparent backgrounds on preview/console panels. */
/* Force light bg in iframe context for readability. */
html.in-iframe .api-preview,
html.in-iframe .api-show,
html.in-iframe .api-frame,
html.in-iframe [class*="code-preview"],
html.in-iframe [class*="terminal"],
html.in-iframe [class*="console"]:not(button) {
  background: #ffffff !important;
  border: 1px solid #E8E2D9 !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}
/* Syntax tokens — force readable colors over white in iframe (override !!important chain) */
html.in-iframe .api-code .c-key,
html.in-iframe .c-key { color: #3730A3 !important; }
html.in-iframe .api-code .c-str,
html.in-iframe .c-str { color: #047857 !important; }
html.in-iframe .api-code .c-num,
html.in-iframe .c-num { color: #B91C1C !important; }
html.in-iframe .api-code .c-comment,
html.in-iframe .c-comment { color: #6B7280 !important; font-style: italic !important; }
html.in-iframe .api-code span,
html.in-iframe .api-preview span:not([class*="c-"]) { color: #1B1B1B !important; }
/* === END D228C === */

/* === D228D_BTN_FORCE — Opus high-specificity button overrides === */
html.in-iframe a[class*="btn-s"],
html.in-iframe button[class*="btn-s"],
html.in-iframe .btn.btn-s {
  background: #ffffff !important;
  background-image: none !important;
  color: #1B1B1B !important;
  border: 1px solid #E8E2D9 !important;
}
html.in-iframe a[class*="btn-p"],
html.in-iframe button[class*="btn-p"],
html.in-iframe .btn.btn-p {
  background: #3730A3 !important;
  background-image: linear-gradient(135deg, #3730A3, #6366F1) !important;
  color: #ffffff !important;
  border: none !important;
}
/* === END D228D === */

/* === D228F_FIXED_BARS — Opus hide JS-injected dark bars in iframe context === */
html.in-iframe div[style*="position:fixed"][style*="bottom:0"][style*="z-index:999"],
html.in-iframe div[style*="position:fixed"][style*="bottom:0"][style*="rgba(5,8,15"],
html.in-iframe div[style*="position:fixed"][style*="bottom:0"][style*="rgba(5, 8, 15"],
html.in-iframe div[style*="WEVAL Products"],
html.in-iframe .wv-bottom-bar,
html.in-iframe .signup-promo-bar {
  display: none !important;
  visibility: hidden !important;
}
/* === END D228F === */

/* === D228G_ULTRA_SPEC — Opus chained :not() to beat d812-max-priority cascade === */
/* d812 has html body a:not(.fc *):not(.cd *):not(.kpi *) = (0,4,3). We chain 4 more :not() for (0,6+,X) */
html.in-iframe a[class*="btn-p"]:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5),
html.in-iframe a[class*="btn-f"]:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5),
html.in-iframe a[class*="cta"]:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5),
html.in-iframe button[class*="btn-p"]:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5),
html.in-iframe button[class*="btn-f"]:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5),
html.in-iframe .hero button:not([class]):not(.x1):not(.x2):not(.x3):not(.x4),
html.in-iframe section button:not([class]):not(.x1):not(.x2):not(.x3):not(.x4) {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3730A3, #6366F1) !important;
  background-color: #3730A3 !important;
  border: none !important;
}
/* === END D228G === */