/* legacy-override.css — PONT DE MIGRATION scope: body:not(.sr-canon). Les pages MIGRÉES portent et échappent à ce pont. */ /* (canon SR clair, variante A 2026-06-11.) Remappe les variables inline des pages NON ENCORE migrées (--cream, --gold, --navy-deep…) vers le canon : les pages legacy étaient dessinées sombres (fond navy, texte cream) — l'inversion bg↔texte les fait basculer en clair en préservant les paires de contraste. CE FICHIER MEURT quand la dernière page contenu est migrée (voir site/design.md § Migration). Toute NOUVELLE page consomme les tokens de tokens.css directement — jamais ce pont. */ :root, html[data-variant="editorial"] { --cream: #1B2D3A !important; /* était le texte → devient l'encre navy */ --cream-light: #0F1C26 !important; /* texte fort → navy profond */ --cream-dark: #3D5263 !important; /* texte secondaire */ --navy: #E8D9C2 !important; /* fond de carte → cream-dark */ --navy-deep: #F0E4D0 !important; /* fond de page → cream */ --terracotta: #A65D37 !important; --terracotta-light: #8F4A24 !important; /* grade texte sur clair */ --gold: #8F4A24 !important; /* le gold ne vit pas sur cream → terracotta texte */ --gold-bright: #8F4A24 !important; --copper: #A65D37 !important; } /* Hide legacy chrome elements that duplicate with masthead/footer partials */ body:not(.sr-canon) > nav:not(.masthead) .nav-inner { display: none !important; } .kente-stripe { display: none !important; } .kente-divider { display: none !important; } body:not(.sr-canon) > nav .lang-switcher, body:not(.sr-canon) > nav .hamburger { display: none !important; } /* Legacy pages embed their own footer — hide it since partials/footer.html is injected */ body:not(.sr-canon) > footer:not(.page-footer) { display: none !important; } /* Legacy hero patterns (background radial gold glow etc.) → neutralize */ body:not(.sr-canon) .hero::before, body:not(.sr-canon) section.hero::before { display: none !important; } /* Bring body text color back in line */ body:not(.sr-canon) { color: var(--color-ink); background: var(--color-paper); } /* ============================================================ READABILITY BOOST for legacy SEO pages (micro-drama-apps, vertical-drama-guide, dramabox-revenue-2026, etc.) ============================================================ */ body:not(.sr-canon) main, body:not(.sr-canon) main.container, body:not(.sr-canon) .container, body:not(.sr-canon) .wrap { max-width: 920px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } body:not(.sr-canon) main p, body:not(.sr-canon) main li, body:not(.sr-canon) .container p, body:not(.sr-canon) .container li { font-size: 16px !important; line-height: 1.75 !important; max-width: 68ch !important; color: var(--color-ink) !important; margin-bottom: 20px !important; } body:not(.sr-canon) main p.lead, body:not(.sr-canon) main p.intro, body:not(.sr-canon) main p:first-of-type, body:not(.sr-canon) .container p.lead, body:not(.sr-canon) .container p.intro { font-size: 17px !important; line-height: 1.7 !important; color: var(--color-ink) !important; } body:not(.sr-canon) main h1, body:not(.sr-canon) .container h1 { font-size: clamp(2.2rem, 4vw, 3rem) !important; line-height: 1.1 !important; margin: 48px 0 16px !important; color: var(--color-ink) !important; letter-spacing: -0.02em !important; } body:not(.sr-canon) main h2, body:not(.sr-canon) .container h2 { font-size: clamp(1.5rem, 2.3vw, 1.9rem) !important; line-height: 1.2 !important; margin: 56px 0 16px !important; color: var(--color-ink) !important; padding-top: 24px !important; border-top: 1px solid var(--color-rule) !important; } body:not(.sr-canon) main h3, body:not(.sr-canon) .container h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem) !important; line-height: 1.3 !important; margin: 36px 0 12px !important; color: var(--color-accent-deep) !important; } body:not(.sr-canon) main ul, body:not(.sr-canon) main ol, body:not(.sr-canon) .container ul, body:not(.sr-canon) .container ol { padding-left: 24px !important; margin: 16px 0 24px !important; } body:not(.sr-canon) main ul li, body:not(.sr-canon) .container ul li { margin-bottom: 12px !important; list-style: none !important; position: relative; padding-left: 20px !important; } body:not(.sr-canon) main ul li::before, body:not(.sr-canon) .container ul li::before { content: "—" !important; color: var(--color-accent) !important; position: absolute; left: 0; top: 0; } body:not(.sr-canon) main ol li, body:not(.sr-canon) .container ol li { margin-bottom: 12px !important; } body:not(.sr-canon) main table, body:not(.sr-canon) .container table { width: 100% !important; border-collapse: collapse !important; margin: 24px 0 !important; font-size: 14px !important; } body:not(.sr-canon) main table th, body:not(.sr-canon) .container table th { text-align: left !important; padding: 12px 14px !important; background: var(--color-paper-2) !important; border-bottom: 2px solid var(--color-accent) !important; color: var(--color-accent-deep) !important; font-size: 12px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } body:not(.sr-canon) main table td, body:not(.sr-canon) .container table td { padding: 10px 14px !important; border-bottom: 1px solid var(--color-rule) !important; vertical-align: top !important; } body:not(.sr-canon) main table tr:nth-child(even) td, body:not(.sr-canon) .container table tr:nth-child(even) td { background: rgba(166, 93, 55, 0.05) !important; } /* Stats / KPI rows — legacy .stat-value spans (PAS .hero-stat : la section home du même nom appartient au nouveau système, shell.css) */ body:not(.sr-canon) main .stat-value { color: var(--color-accent-deep) !important; font-weight: 700 !important; } body:not(.sr-canon) main blockquote, body:not(.sr-canon) .container blockquote { border-left: 3px solid var(--color-accent) !important; background: var(--color-paper-2) !important; padding: 16px 20px !important; margin: 24px 0 !important; color: var(--color-ink) !important; max-width: 68ch !important; } body:not(.sr-canon) main .tldr, body:not(.sr-canon) main .summary-box, body:not(.sr-canon) main .key-takeaways, body:not(.sr-canon) .container .tldr { background: var(--color-paper-2) !important; border-left: 3px solid var(--color-accent) !important; padding: 20px 24px !important; margin: 32px 0 !important; max-width: 72ch !important; } body:not(.sr-canon) main .tldr p, body:not(.sr-canon) main .tldr li { max-width: none !important; } body:not(.sr-canon) main .card, body:not(.sr-canon) main .feature-card, body:not(.sr-canon) main .report-card, body:not(.sr-canon) .container .card { background: var(--color-paper-2) !important; border: 1px solid var(--color-rule) !important; border-radius: var(--radius) !important; padding: 24px !important; margin: 16px 0 !important; } body:not(.sr-canon) main code, body:not(.sr-canon) main pre { background: var(--color-paper-2) !important; border: 1px solid var(--color-rule) !important; border-radius: var(--radius) !important; padding: 2px 6px !important; font-size: 0.9em !important; color: var(--color-accent-deep) !important; } body:not(.sr-canon) main img, body:not(.sr-canon) main figure { max-width: 100% !important; height: auto !important; margin: 24px 0 !important; } body:not(.sr-canon) main strong, body:not(.sr-canon) main b { color: var(--color-ink) !important; font-weight: 700 !important; } body:not(.sr-canon) main em { color: var(--color-ink-2) !important; }