/* ============================================================
   NOIA THEME V11 — GLOBAL SEMANTIC LIGHT / DARK SYSTEM
   2026-09-11

   SOURCE OF TRUTH: Noia brand guide
   Light  = cream / paper dominant + dark ink
   Dark   = deep brown dominant + warm ivory
   Terracotta remains an accent, never a page background default.
   ============================================================ */

html[data-theme="light"] {
  color-scheme: light;
  --nt-bg: #F6F2EA;
  --nt-bg-alt: #F2E9DD;
  --nt-surface: #F5EFE5;
  --nt-surface-strong: #FFFDF8;
  --nt-text: #211D1A;
  --nt-muted: #655B53;
  --nt-line: rgba(33,29,26,.18);
  --nt-line-strong: rgba(33,29,26,.34);
  --nt-accent: #C95135;
  --nt-accent-strong: #AE412C;
  --nt-kicker: #AE412C;
  --nt-on-accent: #F5EFE5;
  --nt-media-text: #211D1A;
  --nt-media-muted: #655B53;
  --nt-media-kicker: #AE412C;
  --nt-shadow: rgba(33,29,26,.10);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --nt-bg: #211C18;
  --nt-bg-alt: #211D1A;
  --nt-surface: #211D1A;
  --nt-surface-strong: #5A3C2C;
  --nt-text: #F5EFE5;
  --nt-muted: #CFC5BA;
  --nt-line: rgba(245,239,229,.18);
  --nt-line-strong: rgba(245,239,229,.34);
  --nt-accent: #C95135;
  --nt-accent-strong: #AE412C;
  --nt-kicker: #C5AB8B;
  --nt-on-accent: #F5EFE5;
  --nt-media-text: #F5EFE5;
  --nt-media-muted: #CFC5BA;
  --nt-media-kicker: #C5AB8B;
  --nt-shadow: rgba(0,0,0,.28);
}

/* Smooth, short theme transition. */
html.noia-theme-ready body,
html.noia-theme-ready main,
html.noia-theme-ready section,
html.noia-theme-ready article,
html.noia-theme-ready .site-footer,
html.noia-theme-ready .noia-header,
html.noia-theme-ready .noia-mobile-overlay {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.noia-theme-ready body,
  html.noia-theme-ready main,
  html.noia-theme-ready section,
  html.noia-theme-ready article,
  html.noia-theme-ready .site-footer,
  html.noia-theme-ready .noia-header,
  html.noia-theme-ready .noia-mobile-overlay { transition: none !important; }
}

/* ============================================================
   1. PAGE FOUNDATION — the whole site follows the selected mode
   ============================================================ */
html[data-theme] body,
html[data-theme] body main,
html[data-theme] body #contenu {
  background-color: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}

/* Any normal top-level content section follows the theme.
   Media heroes / CTA imagery / project-next media are handled separately. */
html[data-theme] body main > :is(section, article):not(.hero-v10):not(.cta-v3):not(.project-next-v3) {
  background-color: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}

/* Alternate surface rhythm: still LIGHT in Light mode and DARK in Dark mode. */
html[data-theme] body :is(
  .section-alt,
  .section-green,
  .theme-dark,
  .typologies-v3,
  .expertise-v3,
  .projects-showcase-v3,
  .agency-v3,
  .project-facts-v2,
  .project-plan-reveal,
  .project-gallery-v2,
  .np-conversion,
  .np-dark,
  .contact-workspace,
  .contact-direct,
  .ed-hero,
  .ed-gallery
) {
  background-color: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}

html[data-theme] body :is(
  .theme-light,
  .manifesto-v3,
  .seo-local-v3,
  .process-section,
  .agency-method-v2,
  .testimonials-v3,
  .faq-v3,
  .project-manifesto-v2,
  .project-story-v2,
  .project-note-v2,
  .contact-intro,
  .contact-prep,
  .ed-cta,
  .ed-article-hero,
  .ed-related,
  .np-section
) {
  background-color: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}

/* Legacy generic sections also follow the selected mode. */
html[data-theme] body :is(.section,.section-sm) { color: var(--nt-text) !important; }
html[data-theme] body .section-alt,
html[data-theme] body .section-green { background-color: var(--nt-bg-alt) !important; }

/* ============================================================
   2. TYPOGRAPHY CONTRACT — no more dark-on-dark / light-on-light
   ============================================================ */
html[data-theme] body main > :is(section, article):not(.hero-v10):not(.cta-v3):not(.project-next-v3)
  :is(h1,h2,h3,h4,h5,h6,.display-sans,.title-display,.project-story-v2__heading,.project-note-v2__title,.project-plan-reveal__heading,.ed-lead,summary) {
  color: var(--nt-text) !important;
}
html[data-theme] body main > :is(section, article):not(.hero-v10):not(.cta-v3):not(.project-next-v3)
  :is(h1,h2,h3,h4,h5,h6,.display-sans,.title-display) em {
  color: var(--nt-text) !important;
}
html[data-theme] body main > :is(section, article):not(.hero-v10):not(.cta-v3):not(.project-next-v3)
  :is(p,li,dd,dt,small,.lead,.muted,.section-head-v3 p,.projects-showcase-aside p,.ed-article-meta,.contact-index,.np-feature-copy) {
  color: var(--nt-muted) !important;
}
html[data-theme] body main > :is(section, article):not(.hero-v10):not(.cta-v3):not(.project-next-v3)
  :is(.micro-label,.eyebrow,.np-eyebrow,.ed-kicker,.contact-kicker,.brand-guide-index,.guide-card-label) {
  color: var(--nt-kicker) !important;
}
html[data-theme] body main > :is(section, article):not(.hero-v10):not(.cta-v3):not(.project-next-v3)
  :is(.text-link,.np-text-link,.ed-text-link) {
  color: var(--nt-text) !important;
  border-color: currentColor !important;
}

/* ============================================================
   3. CARDS / PANELS / FORMS — every UI surface changes mode
   ============================================================ */
html[data-theme] body :is(
  .card,
  .quote,
  .meta-item,
  .stat,
  .form,
  .contact-form-card,
  .contact-prep__item,
  .ed-card,
  .ed-note,
  .ed-toc,
  .guide-card,
  .accessibility-item,
  .channel-card,
  .brand-lab,
  .component-playground
) {
  background-color: var(--nt-surface) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme] body :is(
  .card,
  .quote,
  .meta-item,
  .stat,
  .form,
  .contact-form-card,
  .contact-prep__item,
  .ed-card,
  .ed-note,
  .ed-toc,
  .guide-card,
  .accessibility-item,
  .channel-card,
  .brand-lab,
  .component-playground
) :is(h1,h2,h3,h4,h5,h6,strong,summary) {
  color: var(--nt-text) !important;
}
html[data-theme] body :is(
  .card,
  .quote,
  .meta-item,
  .stat,
  .form,
  .contact-form-card,
  .contact-prep__item,
  .ed-card,
  .ed-note,
  .ed-toc,
  .guide-card,
  .accessibility-item,
  .channel-card,
  .brand-lab,
  .component-playground
) :is(p,li,small,span:not(.mosaic-v3-arrow)) {
  color: var(--nt-muted) !important;
}

html[data-theme] body :is(input,textarea,select) {
  background: var(--nt-surface) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line-strong) !important;
  caret-color: var(--nt-accent) !important;
}
html[data-theme] body :is(input,textarea)::placeholder {
  color: var(--nt-muted) !important;
  opacity: 1 !important;
}
html[data-theme] body label { color: var(--nt-text) !important; }

/* Buttons: only brand-guide palette colors. */
html[data-theme] body :is(.btn-primary,.contact-submit,.ed-button,.np-btn:not(.np-btn--outline),.noia-header-cta) {
  background: var(--nt-accent-strong) !important;
  border-color: var(--nt-accent-strong) !important;
  color: var(--nt-on-accent) !important;
}
html[data-theme] body :is(.btn-primary,.contact-submit,.ed-button,.np-btn:not(.np-btn--outline),.noia-header-cta):hover {
  background: #5A3C2C !important;
  border-color: #5A3C2C !important;
  color: #F5EFE5 !important;
}
html[data-theme] body :is(.btn-secondary,.btn-light,.np-btn--outline,.ed-filter) {
  background: transparent !important;
  border-color: var(--nt-line-strong) !important;
  color: var(--nt-text) !important;
}
html[data-theme] body :is(.btn-secondary,.btn-light,.np-btn--outline,.ed-filter):hover {
  background: var(--nt-surface) !important;
  border-color: var(--nt-text) !important;
  color: var(--nt-text) !important;
}

/* ============================================================
   4. MEDIA SURFACES — photographs stay photographs.
   Their text remains warm-light in BOTH modes for readability.
   ============================================================ */
html[data-theme] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-detail-page .hero-small,
  .project-hero-v2,
  .project-next-v3,
  .project-next-v3__card,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art,
  .ed-card--with-cover .ed-card-cover
) {
  --media-text: var(--nt-media-text);
  --media-muted: var(--nt-media-muted);
  --media-kicker: var(--nt-media-kicker);
}
html[data-theme] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-detail-page .hero-small,
  .project-hero-v2,
  .project-next-v3,
  .project-next-v3__card,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art
) :is(h1,h2,h3,h4,h5,h6,.display-sans,.title-display,.mosaic-v3-copy h3,.project-type-title,.project-next-v3__identity) {
  color: var(--media-text) !important;
}
html[data-theme] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-detail-page .hero-small,
  .project-hero-v2,
  .project-next-v3,
  .project-next-v3__card,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art
) :is(p,.lead,.mosaic-v3-copy p,.project-meta,.project-next-v3__meta,.application-art-meta) {
  color: var(--media-muted) !important;
}
html[data-theme] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-detail-page .hero-small,
  .project-hero-v2,
  .project-next-v3,
  .project-next-v3__card,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art
) :is(.micro-label,.eyebrow,.np-eyebrow,.application-art-kicker) {
  color: var(--media-kicker) !important;
}
html[data-theme] body :is(.hero-v10,.cta-v3) :is(.hero-v10-btn,.btn-line,.btn-line--light) {
  color: #F5EFE5 !important;
  border-color: rgba(245,239,229,.64) !important;
}

/* ============================================================
   5. MODERN HEADER / MOBILE MENU — fully themed
   ============================================================ */
html[data-theme] .noia-header.site-header,
html[data-theme] .noia-header.site-header.is-scrolled {
  background: color-mix(in srgb, var(--nt-bg) 91%, transparent) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line) !important;
  box-shadow: 0 6px 28px var(--nt-shadow) !important;
}
html[data-theme] .noia-header :is(.noia-header-brand,.noia-header-phone,.noia-header-nav a,.noia-menu-toggle) {
  color: var(--nt-text) !important;
}
html[data-theme] .noia-header .noia-header-nav {
  background: color-mix(in srgb, var(--nt-surface) 78%, transparent) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme] .noia-header .noia-header-phone {
  background: color-mix(in srgb, var(--nt-surface) 72%, transparent) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme] .noia-header .noia-header-nav a:is(.is-active,[aria-current="page"]) {
  background: var(--nt-text) !important;
  color: var(--nt-bg) !important;
}
html[data-theme] .noia-mobile-overlay {
  background: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}
html[data-theme] .noia-mobile-overlay :is(.noia-mobile-nav a,.noia-mobile-footer a) {
  color: var(--nt-text) !important;
}

/* Stable theme switch. */
.noia-theme-toggle {
  --nt-toggle-track: var(--nt-surface);
  --nt-toggle-border: var(--nt-line-strong);
  --nt-toggle-thumb: var(--nt-text);
  --nt-toggle-icon-active: var(--nt-bg);
  --nt-toggle-icon-muted: var(--nt-muted);
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--nt-toggle-border) !important;
  border-radius: 999px !important;
  background: var(--nt-toggle-track) !important;
  color: var(--nt-text) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  isolation: isolate;
}
.noia-theme-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nt-toggle-thumb);
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.22,1,.36,1), background-color .22s ease;
}
html[data-theme="dark"] .noia-theme-toggle::before { transform: translateX(22px); }
.noia-theme-toggle__icon { position:relative!important; z-index:1; display:block!important; width:48px!important; height:24px!important; pointer-events:none; }
.noia-theme-toggle__icon svg { position:absolute!important; top:4px!important; width:16px!important; height:16px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.7!important; stroke-linecap:round!important; stroke-linejoin:round!important; }
.noia-theme-toggle__sun { left:4px!important; color:var(--nt-toggle-icon-active)!important; }
.noia-theme-toggle__moon { right:4px!important; color:var(--nt-toggle-icon-muted)!important; }
html[data-theme="dark"] .noia-theme-toggle__sun { color:var(--nt-toggle-icon-muted)!important; }
html[data-theme="dark"] .noia-theme-toggle__moon { color:var(--nt-toggle-icon-active)!important; }
.noia-theme-toggle__label { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.noia-theme-toggle:focus-visible { outline:2px solid var(--nt-accent)!important; outline-offset:3px!important; }
@media (max-width:1024px) {
  .noia-theme-toggle--mobile { flex-basis:100%!important; width:100%!important; max-width:180px!important; justify-content:flex-start!important; }
}

/* ============================================================
   6. FOOTER — Light footer in Light, Dark footer in Dark
   ============================================================ */
html[data-theme] .site-footer {
  background: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme] .site-footer :is(.footer-heading,.footer-title,.footer-links a,.footer-contact-link strong,.footer-back-to-top,.footer-bottom,.footer-legal-links a) {
  color: var(--nt-text) !important;
}
html[data-theme] .site-footer :is(.footer-description,.footer-link-label,.eyebrow) {
  color: var(--nt-muted) !important;
}
html[data-theme] .site-footer .footer-brand-logo { color: var(--nt-accent-strong) !important; }
html[data-theme] .site-footer a:hover { color: var(--nt-accent-strong) !important; }

/* ============================================================
   7. CONTACT / CONSEILS — remove fixed light/dark islands
   ============================================================ */
html[data-theme] body.contact-editorial-page {
  --contact-paper: var(--nt-bg);
  --contact-sand: var(--nt-bg-alt);
  --contact-ink: var(--nt-text);
  --contact-ink-2: var(--nt-text);
  --contact-white: var(--nt-text);
  --contact-accent: var(--nt-accent);
}
html[data-theme] body.noia-editorial {
  --ed-paper: var(--nt-bg);
  --ed-ink: var(--nt-text);
  --ed-muted: var(--nt-muted);
  --ed-red: var(--nt-accent);
  --ed-rule: var(--nt-line);
  background: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}
html[data-theme] .noia-editorial .ed-card {
  --tile-bg: var(--nt-surface) !important;
  --tile-text: var(--nt-text) !important;
  --tile-rule: var(--nt-line) !important;
}
html[data-theme] .noia-editorial .ed-filter[aria-pressed="true"] {
  background: var(--nt-text) !important;
  color: var(--nt-bg) !important;
  border-color: var(--nt-text) !important;
}
html[data-theme] .noia-editorial .ed-body-copy,
html[data-theme] .noia-editorial .ed-body-copy :is(h2,h3),
html[data-theme] .noia-editorial .ed-lead { color: var(--nt-text) !important; }
html[data-theme] .noia-editorial :is(.ed-reference p,.ed-toc a,.ed-article-meta) { color: var(--nt-muted) !important; }

/* ============================================================
   8. PROJECT DETAIL — all chapters invert with the selected mode
   ============================================================ */
html[data-theme] .project-facts-v2,
html[data-theme] .project-plan-reveal,
html[data-theme] .project-gallery-v2,
html[data-theme] .project-story-v2,
html[data-theme] .project-note-v2,
html[data-theme] .project-manifesto-v2 {
  color: var(--nt-text) !important;
}
html[data-theme] .project-fact-v2,
html[data-theme] .project-story-v2__feature,
html[data-theme] .project-note-v2__body {
  border-color: var(--nt-line) !important;
}

/* ============================================================
   9. BRAND GUIDE — the guide itself follows Light / Dark globally
   Demo swatches/logo backgrounds remain untouched by design.
   ============================================================ */
html[data-theme] body.np-page--brand-guide {
  --guide-line: var(--nt-line);
  --guide-line-dark: var(--nt-line);
  --guide-cream: var(--nt-bg);
  --guide-paper: var(--nt-bg-alt);
  --guide-ivory: var(--nt-surface);
  --guide-ink: var(--nt-text);
  --guide-ink-2: var(--nt-text);
  --guide-terra: var(--nt-accent);
  --guide-terra-hover: var(--nt-accent-strong);
  --guide-muted: var(--nt-muted);
  --guide-light: var(--nt-text);
  --guide-light-muted: var(--nt-muted);
  background: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}
html[data-theme] body.np-page--brand-guide :is(.brand-manifesto,.brand-guide-nav,.brand-guide-wrap,.brand-guide-section) {
  background-color: var(--nt-bg) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme] body.np-page--brand-guide .brand-guide-nav {
  background: color-mix(in srgb, var(--nt-bg) 95%, transparent) !important;
}
html[data-theme] body.np-page--brand-guide .brand-guide-nav a { color: var(--nt-muted) !important; }
html[data-theme] body.np-page--brand-guide .brand-guide-nav a:is(:hover,.is-active) {
  background: var(--nt-accent) !important;
  color: #F5EFE5 !important;
}
html[data-theme] body.np-page--brand-guide .brand-guide-section :is(h1,h2,h3,h4,h5,h6,.brand-guide-head h2,.type-display,.type-editorial,.type-label) {
  color: var(--nt-text) !important;
}
html[data-theme] body.np-page--brand-guide .brand-guide-section :is(p,li,.brand-guide-intro,.guide-muted,.type-body,.format-studio-head p,.format-stage-ruler) {
  color: var(--nt-muted) !important;
}
html[data-theme] body.np-page--brand-guide .brand-guide-section :is(.brand-guide-index,.guide-card-label,.type-kicker,.component-demo-label) {
  color: var(--nt-kicker) !important;
}
/* Preserve intentionally colored demonstration canvases in the brand guide. */
html[data-theme] body.np-page--brand-guide :is(
  .palette-tile,.palette-strip,.brand-logo-mosaic-card,.logo-preview,.logo-lab-stage,
  .application-art,.format-stage,.brand-photo-gallery .mosaic-v3-card
) {
  forced-color-adjust: none;
}

/* ============================================================
   10. ACCESSIBILITY / FOCUS
   ============================================================ */
html[data-theme] body :focus-visible {
  outline-color: var(--nt-accent-strong) !important;
}
html[data-theme] ::selection {
  background: var(--nt-accent) !important;
  color: #F5EFE5 !important;
}

/* ============================================================
   11. HARDENED COMPONENT OVERRIDES — remove residual fixed-dark islands
   ============================================================ */
/* The Projects showcase used an opaque dark texture/gradient. In Light it must
   become a light editorial surface; in Dark it becomes a clean deep-brown surface. */
html[data-theme] body .projects-showcase-v3 {
  background-image: none !important;
  background-color: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}
html[data-theme] body .projects-showcase-v3 :is(.section-head-v3 .display-sans,.section-head-v3 .display-sans em,.projects-showcase-aside .text-link) {
  color: var(--nt-text) !important;
}
html[data-theme] body .projects-showcase-v3 .projects-showcase-aside p { color: var(--nt-muted) !important; }
html[data-theme] body .projects-showcase-v3 .section-head-v3 .micro-label { color: var(--nt-kicker) !important; }

/* Expertise controls must invert too; the image frame itself stays photographic. */
html[data-theme] body .expertise-v3 :is(.expertise-v3-top,.expertise-v3-grid,.expertise-v3-list,.expertise-v3-item) {
  border-color: var(--nt-line) !important;
}
html[data-theme] body .expertise-v3 .expertise-pill {
  background: transparent !important;
  border-color: var(--nt-line-strong) !important;
  color: var(--nt-muted) !important;
}
html[data-theme] body .expertise-v3 .expertise-pill:is(:hover,.is-active) {
  background: var(--nt-text) !important;
  border-color: var(--nt-text) !important;
  color: var(--nt-bg) !important;
}
html[data-theme] body .expertise-v3 .expertise-v3-item h3 { color: var(--nt-text) !important; }
html[data-theme] body .expertise-v3 .expertise-v3-item p,
html[data-theme] body .expertise-v3 .expertise-v3-icon,
html[data-theme] body .expertise-v3 .expertise-v3-caption { color: var(--nt-muted) !important; }

/* Agency: in Light, the wood becomes a subtle material texture instead of a dark
   full-bleed background. In Dark, it remains visible but under a deep-brown veil. */
html[data-theme] body .agency-v3 {
  background-color: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme="light"] body .agency-v3::before { opacity: .055 !important; filter: saturate(.8) contrast(1) !important; }
html[data-theme="light"] body .agency-v3::after {
  background: linear-gradient(90deg, rgba(246,242,234,.90), rgba(246,242,234,.82), rgba(246,242,234,.90)) !important;
}
html[data-theme="dark"] body .agency-v3::before { opacity: .34 !important; filter: saturate(.82) contrast(1.02) !important; }
html[data-theme="dark"] body .agency-v3::after {
  background: linear-gradient(90deg, rgba(33,28,24,.80), rgba(33,28,24,.66), rgba(33,28,24,.82)) !important;
}
html[data-theme] body .agency-v3 :is(.agency-v3-copy,.agency-v3-copy .display-sans,.agency-v3-lead,.agency-proof strong,.agency-v3-copy .btn-line) { color: var(--nt-text) !important; }
html[data-theme] body .agency-v3 :is(.agency-v3-copy p,.agency-proof span) { color: var(--nt-muted) !important; }
html[data-theme] body .agency-v3 :is(.agency-proof,.agency-proof>div) { border-color: var(--nt-line) !important; }
html[data-theme] body .agency-v3-tag { background: color-mix(in srgb,var(--nt-surface) 88%,transparent) !important; color: var(--nt-text) !important; border-color: var(--nt-line) !important; }

/* Project navigation is a split surface, not a full-photo card. The image remains
   photographic; the surrounding section and content panel invert with the mode. */
html[data-theme] body .project-next-v3 {
  background: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}
html[data-theme] body .project-next-v3__card {
  background: var(--nt-surface) !important;
  color: var(--nt-text) !important;
  border-color: var(--nt-line) !important;
}
html[data-theme] body .project-next-v3__content { border-color: var(--nt-line) !important; }
html[data-theme] body .project-next-v3 :is(.project-next-v3__all,.project-next-v3__meta,.project-next-v3__identity h2,.project-next-v3__footer) { color: var(--nt-text) !important; }
html[data-theme] body .project-next-v3 .project-next-v3__identity p { color: var(--nt-muted) !important; }
html[data-theme] body .project-next-v3 :is(.project-next-v3__top,.project-next-v3__footer) { border-color: var(--nt-line) !important; }
html[data-theme] body .project-next-v3__arrow { color: var(--nt-text) !important; border-color: var(--nt-line-strong) !important; }
html[data-theme] body .project-next-v3__progress { background: var(--nt-line) !important; }
html[data-theme] body .project-next-v3__progress span { background: var(--nt-accent) !important; }

/* Contact fixed-light/fixed-dark microcopy. */
html[data-theme] body.contact-editorial-page .contact-direct :is(.contact-direct__row>span:first-child,.contact-direct__row .contact-arrow,.contact-direct__foot) {
  color: var(--nt-muted) !important;
}
html[data-theme] body.contact-editorial-page .contact-direct :is(h2,.contact-direct__row a,.contact-direct__row address) {
  color: var(--nt-text) !important;
}
html[data-theme] body.contact-editorial-page .contact-direct__row,
html[data-theme] body.contact-editorial-page .contact-direct__top,
html[data-theme] body.contact-editorial-page .contact-direct__foot { border-color: var(--nt-line) !important; }

/* Brand guide: no chapter is permanently dark anymore. The selected global mode
   controls every chapter surface. */
html[data-theme] body.np-page--brand-guide #np-content > .brand-guide-section {
  background: var(--nt-bg) !important;
  color: var(--nt-text) !important;
}
html[data-theme] body.np-page--brand-guide #np-content > .brand-guide-section:nth-of-type(even) {
  background: var(--nt-bg-alt) !important;
}

/* Legacy hero / section cards use the same semantic contrast. */
html[data-theme] body .hero-small {
  background-color: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}
html[data-theme] body .hero-small :is(h1,h2,h3,.lead,.breadcrumb) { color: var(--nt-text) !important; }
html[data-theme] body .hero-small::after { border-color: var(--nt-accent) !important; }


/* ============================================================
   12. FULL MODE PROPAGATION — even photo overlays / CTA / preloaders
   Every visual layer reacts to the selected mode. The photographs themselves
   are never filtered: only the readable overlay and foreground colors invert.
   ============================================================ */

/* HERO + photograph overlays: warm-light veil + dark copy in Light;
   deep-brown veil + warm-ivory copy in Dark. */
html[data-theme="light"] body .hero-v10-gradient {
  background:
    linear-gradient(90deg, rgba(246,242,234,.96) 0%, rgba(246,242,234,.84) 18%, rgba(246,242,234,.58) 40%, rgba(246,242,234,.20) 66%, rgba(246,242,234,0) 84%),
    linear-gradient(180deg, rgba(246,242,234,.08) 0%, rgba(246,242,234,.12) 44%, rgba(246,242,234,.54) 78%, rgba(246,242,234,.86) 100%) !important;
}
html[data-theme="dark"] body .hero-v10-gradient {
  background:
    linear-gradient(90deg, rgba(33,28,24,.96) 0%, rgba(33,28,24,.86) 18%, rgba(33,28,24,.62) 40%, rgba(33,28,24,.24) 66%, rgba(33,28,24,0) 84%),
    linear-gradient(180deg, rgba(33,28,24,.08) 0%, rgba(33,28,24,.14) 44%, rgba(33,28,24,.56) 78%, rgba(33,28,24,.90) 100%) !important;
}

html[data-theme="light"] body .mosaic-v3-overlay,
html[data-theme="light"] body .project-type-media::after {
  background: linear-gradient(0deg, rgba(246,242,234,.96) 0%, rgba(246,242,234,.80) 25%, rgba(246,242,234,.46) 50%, rgba(246,242,234,.14) 74%, rgba(246,242,234,0) 100%) !important;
}
html[data-theme="dark"] body .mosaic-v3-overlay,
html[data-theme="dark"] body .project-type-media::after {
  background: linear-gradient(0deg, rgba(33,28,24,.96) 0%, rgba(33,28,24,.80) 25%, rgba(33,28,24,.46) 50%, rgba(33,28,24,.14) 74%, rgba(33,28,24,0) 100%) !important;
}

/* Legacy / alternate project heroes. */
html[data-theme="light"] body .projects-hero::before,
html[data-theme="light"] body .projects-hero-brutalist::after {
  background: linear-gradient(90deg, rgba(246,242,234,.94), rgba(246,242,234,.58) 48%, rgba(246,242,234,.16) 78%, rgba(246,242,234,0)) !important;
}
html[data-theme="dark"] body .projects-hero::before,
html[data-theme="dark"] body .projects-hero-brutalist::after {
  background: linear-gradient(90deg, rgba(33,28,24,.94), rgba(33,28,24,.58) 48%, rgba(33,28,24,.16) 78%, rgba(33,28,24,0)) !important;
}
html[data-theme] body :is(.projects-hero,.projects-hero-brutalist) :is(h1,h2,h3,p,.lead,.breadcrumb,.projects-hero-copy,.projects-hero-footer,.projects-hero-text) {
  color: var(--nt-media-text) !important;
}

/* Project detail hero keeps its photo while its veil/copy follows the mode. */
html[data-theme="light"] body.project-detail-page .hero-small {
  background-image:
    linear-gradient(180deg, rgba(246,242,234,.12) 0%, rgba(246,242,234,.24) 34%, rgba(246,242,234,.68) 72%, rgba(246,242,234,.92) 100%),
    var(--project-hero-image) !important;
}
html[data-theme="dark"] body.project-detail-page .hero-small {
  background-image:
    linear-gradient(180deg, rgba(33,28,24,.12) 0%, rgba(33,28,24,.24) 34%, rgba(33,28,24,.68) 72%, rgba(33,28,24,.92) 100%),
    var(--project-hero-image) !important;
}
html[data-theme="light"] body.project-detail-page .hero-small::after { background: linear-gradient(90deg, rgba(246,242,234,.76), rgba(246,242,234,.30) 54%, transparent) !important; }
html[data-theme="dark"] body.project-detail-page .hero-small::after { background: linear-gradient(90deg, rgba(33,28,24,.76), rgba(33,28,24,.30) 54%, transparent) !important; }
html[data-theme] body.project-detail-page .hero-small :is(h1,h2,h3,.lead,.breadcrumb) { color: var(--nt-media-text) !important; }

/* Brand-guide photography and application simulator follow the same rule. */
html[data-theme="light"] body.np-page--brand-guide #photo .photo-direction::before { background: rgba(246,242,234,.12) !important; }
html[data-theme="light"] body.np-page--brand-guide #photo .photo-direction::after {
  background: linear-gradient(0deg, rgba(246,242,234,.96) 0%, rgba(246,242,234,.78) 28%, rgba(246,242,234,.42) 52%, rgba(246,242,234,.12) 76%, transparent 100%) !important;
}
html[data-theme="dark"] body.np-page--brand-guide #photo .photo-direction::before { background: rgba(33,28,24,.12) !important; }
html[data-theme="dark"] body.np-page--brand-guide #photo .photo-direction::after {
  background: linear-gradient(0deg, rgba(33,28,24,.96) 0%, rgba(33,28,24,.78) 28%, rgba(33,28,24,.42) 52%, rgba(33,28,24,.12) 76%, transparent 100%) !important;
}
html[data-theme] body.np-page--brand-guide #photo .photo-direction :is(h2,h3,p,span) { color: var(--nt-media-text) !important; }
html[data-theme="light"] body.np-page--brand-guide .application-art-shade { background: linear-gradient(0deg, rgba(246,242,234,.96), rgba(246,242,234,.62) 52%, rgba(246,242,234,.10)) !important; }
html[data-theme="dark"] body.np-page--brand-guide .application-art-shade { background: linear-gradient(0deg, rgba(33,28,24,.96), rgba(33,28,24,.62) 52%, rgba(33,28,24,.10)) !important; }

/* CTA image sections are no longer a permanently dark island. */
html[data-theme] body .cta-v3 {
  background-color: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}
html[data-theme="light"] body .cta-v3-bg-shade {
  background: linear-gradient(90deg, rgba(246,242,234,.94), rgba(246,242,234,.78) 48%, rgba(246,242,234,.50)) !important;
}
html[data-theme="dark"] body .cta-v3-bg-shade {
  background: linear-gradient(90deg, rgba(33,28,24,.94), rgba(33,28,24,.78) 48%, rgba(33,28,24,.50)) !important;
}
html[data-theme] body .cta-v3 :is(h1,h2,h3,.display-sans,.cta-v3-title,.cta-v3-heading) { color: var(--nt-text) !important; }
html[data-theme] body .cta-v3 :is(p,.lead,.cta-v3-copy,.cta-v3-text) { color: var(--nt-muted) !important; }
html[data-theme] body .cta-v3 :is(.micro-label,.eyebrow) { color: var(--nt-kicker) !important; }
html[data-theme] body .cta-v3 :is(.hero-v10-btn,.btn-line,.btn-line--light) { color: var(--nt-text) !important; border-color: var(--nt-line-strong) !important; }

/* SEO/local reveal background also follows the active mode. */
html[data-theme="light"] body .seo-local-bg-shade {
  background: linear-gradient(90deg, rgba(246,242,234,.98), rgba(246,242,234,.90) 34%, rgba(246,242,234,.56) 68%, rgba(246,242,234,.18)) !important;
}
html[data-theme="dark"] body .seo-local-bg-shade {
  background: linear-gradient(90deg, rgba(33,28,24,.98), rgba(33,28,24,.90) 34%, rgba(33,28,24,.56) 68%, rgba(33,28,24,.18)) !important;
}

/* Transition and preloader use the SAME theme as the destination page. */
html[data-theme] .page-transition-overlay.page-transition-overlay--wipe {
  background: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}
html[data-theme] .page-transition-overlay--wipe .noia-transition-brand { color: var(--nt-text) !important; }
html[data-theme] .page-transition-overlay--wipe .noia-transition-edge { background: var(--nt-accent) !important; }
html[data-theme] .noia-preloader {
  background: var(--nt-bg-alt) !important;
  color: var(--nt-text) !important;
}
html[data-theme] .noia-preloader.is-ready { background: transparent !important; }
html[data-theme] .noia-preloader-doorway { box-shadow: 0 0 0 100vmax var(--nt-bg-alt) !important; }
html[data-theme] .noia-preloader-signature { color: var(--nt-text) !important; text-shadow: 0 1px 16px var(--nt-shadow) !important; }
html[data-theme] .noia-preloader-enter {
  background: color-mix(in srgb, var(--nt-surface) 92%, transparent) !important;
  border-color: var(--nt-line-strong) !important;
  color: var(--nt-text) !important;
}
html[data-theme] .noia-preloader-enter:is(:hover,:focus-visible) {
  background: var(--nt-accent-strong) !important;
  border-color: var(--nt-accent-strong) !important;
  color: #F5EFE5 !important;
}

/* Tables, rules, code, navigation and utility surfaces also invert. */
html[data-theme] body :is(table,thead,tbody,tr,th,td,.spec-table,.code-block,pre,code) { border-color: var(--nt-line) !important; }
html[data-theme] body :is(.code-block,pre) { background: var(--nt-surface) !important; color: var(--nt-text) !important; }
html[data-theme] body :is(th,td) { color: var(--nt-text) !important; }
html[data-theme] body hr { border-color: var(--nt-line) !important; background: var(--nt-line) !important; }

/* ============================================================
   NOIA THEME V12 — LIGHT MODE MEDIA + CTA CONTRAST PASS
   2026-09-11
   Goal: lighter photo veils in Light mode, while keeping every
   button, CTA, project fact and editorial card explicitly legible.
   Palette only uses the Noia brand-guide colors.
   ============================================================ */

/* 1) LIGHT MODE — reduce photo veils without removing text support. */
html[data-theme="light"] body .hero-v10-gradient {
  background:
    linear-gradient(90deg,
      rgba(246,242,234,.76) 0%,
      rgba(246,242,234,.54) 22%,
      rgba(246,242,234,.28) 42%,
      rgba(246,242,234,.08) 62%,
      rgba(246,242,234,0) 78%),
    linear-gradient(180deg,
      rgba(246,242,234,.02) 0%,
      rgba(246,242,234,.04) 48%,
      rgba(246,242,234,.18) 76%,
      rgba(246,242,234,.48) 100%) !important;
}

html[data-theme="light"] body .mosaic-v3-card > .mosaic-v3-overlay,
html[data-theme="light"] body .project-type-media::after {
  background: linear-gradient(0deg,
    rgba(246,242,234,.74) 0%,
    rgba(246,242,234,.44) 24%,
    rgba(246,242,234,.18) 46%,
    rgba(246,242,234,.05) 66%,
    rgba(246,242,234,0) 82%) !important;
}

html[data-theme="light"] body .cta-v3-bg-shade {
  background: linear-gradient(90deg,
    rgba(246,242,234,.78) 0%,
    rgba(246,242,234,.58) 46%,
    rgba(246,242,234,.28) 72%,
    rgba(246,242,234,.08) 100%) !important;
}

html[data-theme="light"] body .seo-local-bg-shade {
  background: linear-gradient(90deg,
    rgba(246,242,234,.84) 0%,
    rgba(246,242,234,.64) 34%,
    rgba(246,242,234,.30) 66%,
    rgba(246,242,234,.06) 100%) !important;
}

html[data-theme="light"] body.np-page--brand-guide #photo .photo-direction::before {
  background: rgba(246,242,234,.05) !important;
}
html[data-theme="light"] body.np-page--brand-guide #photo .photo-direction::after {
  background: linear-gradient(0deg,
    rgba(246,242,234,.72) 0%,
    rgba(246,242,234,.42) 28%,
    rgba(246,242,234,.16) 54%,
    rgba(246,242,234,.03) 78%,
    transparent 100%) !important;
}
html[data-theme="light"] body.np-page--brand-guide .application-art-shade {
  background: linear-gradient(0deg,
    rgba(246,242,234,.72) 0%,
    rgba(246,242,234,.36) 50%,
    rgba(246,242,234,.04) 100%) !important;
}

/* 2) PHOTO COPY — dark ink in Light mode, warm-light in Dark mode. */
html[data-theme="light"] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-hero-v2,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art
) :is(h1,h2,h3,h4,h5,h6,.display-sans,.title-display,.hero-v10-title-main,.hero-v10-title-accent,.mosaic-v3-copy h3,.project-type-title) {
  color: #211D1A !important;
  text-shadow: none !important;
}
html[data-theme="light"] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-hero-v2,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art
) :is(p,.lead,.hero-v10-subtitle,.hero-v10-lead,.mosaic-v3-copy p,.project-meta,.application-art-meta) {
  color: #655B53 !important;
  text-shadow: none !important;
}
html[data-theme="light"] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-hero-v2,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art
) :is(.micro-label,.eyebrow,.np-eyebrow,.application-art-kicker) {
  color: #AE412C !important;
}

/* 3) HERO / MEDIA BUTTONS — never transparent-on-photo in Light mode. */
html[data-theme="light"] body .hero-v10 .hero-v10-actions .hero-v10-btn,
html[data-theme="light"] body .project-hero-v2 .hero-v10-actions .hero-v10-btn {
  background: rgba(255,253,248,.94) !important;
  color: #211D1A !important;
  border-color: rgba(33,29,26,.42) !important;
  box-shadow: 0 8px 28px rgba(33,29,26,.10) !important;
  text-shadow: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-theme="light"] body .hero-v10 .hero-v10-actions .hero-v10-btn:first-child,
html[data-theme="light"] body .project-hero-v2 .hero-v10-actions .hero-v10-btn:first-child {
  background: #AE412C !important;
  color: #F5EFE5 !important;
  border-color: #AE412C !important;
}
html[data-theme="light"] body .hero-v10 .hero-v10-actions .hero-v10-btn:first-child:is(:hover,:focus-visible),
html[data-theme="light"] body .project-hero-v2 .hero-v10-actions .hero-v10-btn:first-child:is(:hover,:focus-visible) {
  background: #5A3C2C !important;
  color: #F5EFE5 !important;
  border-color: #5A3C2C !important;
}
html[data-theme="light"] body .hero-v10 .hero-v10-actions .hero-v10-btn:not(:first-child):is(:hover,:focus-visible),
html[data-theme="light"] body .project-hero-v2 .hero-v10-actions .hero-v10-btn:not(:first-child):is(:hover,:focus-visible) {
  background: #FFFDF8 !important;
  color: #211D1A !important;
  border-color: #211D1A !important;
}

/* 4) ALL HIGH-INTENT CTAs — brand-deep terracotta is the accessible action color. */
html[data-theme="light"] body :is(
  .btn-primary,
  .contact-submit,
  .ed-button,
  .np-btn:not(.np-btn--outline),
  .noia-header-cta,
  .header-cta,
  .footer-cta,
  .process-cta,
  .demo-button--primary
) {
  background: #AE412C !important;
  color: #F5EFE5 !important;
  border-color: #AE412C !important;
  text-shadow: none !important;
}
html[data-theme="light"] body :is(
  .btn-primary,
  .contact-submit,
  .ed-button,
  .np-btn:not(.np-btn--outline),
  .noia-header-cta,
  .header-cta,
  .footer-cta,
  .process-cta,
  .demo-button--primary
):is(:hover,:focus-visible) {
  background: #5A3C2C !important;
  color: #F5EFE5 !important;
  border-color: #5A3C2C !important;
}

html[data-theme="light"] body :is(
  .btn-secondary,
  .btn-light,
  .np-btn--outline,
  .ed-filter,
  .filter-btn,
  .demo-button--secondary,
  .cta-v3 .btn-line,
  .cta-v3 .btn-line--light
) {
  background: #FFFDF8 !important;
  color: #211D1A !important;
  border-color: rgba(33,29,26,.42) !important;
  text-shadow: none !important;
}
html[data-theme="light"] body :is(.ed-filter,.filter-btn,.np-filter):is(.active,[aria-pressed="true"]) {
  background: #211D1A !important;
  color: #F6F2EA !important;
  border-color: #211D1A !important;
}
html[data-theme="light"] body :is(
  .btn-secondary,
  .btn-light,
  .np-btn--outline,
  .ed-filter,
  .filter-btn,
  .demo-button--secondary,
  .cta-v3 .btn-line,
  .cta-v3 .btn-line--light
):is(:hover,:focus-visible) {
  background: #F2E9DD !important;
  color: #211D1A !important;
  border-color: #211D1A !important;
}

/* CTA image block: solid controls + explicit foreground hierarchy in Light. */
html[data-theme="light"] body .cta-v3 :is(h1,h2,h3,.display-sans,.cta-v3-title,.cta-v3-heading,.display-sans em) {
  color: #211D1A !important;
}
html[data-theme="light"] body .cta-v3 :is(p,.lead,.cta-v3-copy,.cta-v3-text) {
  color: #655B53 !important;
}
html[data-theme="light"] body .cta-v3 :is(.micro-label,.eyebrow) {
  color: #AE412C !important;
}

/* 5) PROJECT DETAIL — "LE PROJET EN BREF" fields explicitly invert. */
html[data-theme="light"] body.project-showcase-page .project-facts-v2 {
  background: #F2E9DD !important;
  color: #211D1A !important;
}
html[data-theme="light"] body.project-showcase-page .project-facts-v2 :is(.display-sans,.display-sans em,#facts-title) {
  color: #211D1A !important;
}
html[data-theme="light"] body.project-showcase-page .project-facts-v2 .micro-label {
  color: #AE412C !important;
}
html[data-theme="light"] body.project-showcase-page .project-facts-v2 .section-head-v3 p {
  color: #655B53 !important;
}
html[data-theme="light"] body.project-showcase-page .project-facts-v2__grid {
  border-color: rgba(33,29,26,.22) !important;
}
html[data-theme="light"] body.project-showcase-page .project-fact-v2 {
  border-color: rgba(33,29,26,.22) !important;
}
html[data-theme="light"] body.project-showcase-page .project-fact-v2 > span {
  color: #655B53 !important;
}
html[data-theme="light"] body.project-showcase-page .project-fact-v2 > strong {
  color: #211D1A !important;
}
html[data-theme="light"] body.project-showcase-page .project-fact-v2 > strong small {
  color: #655B53 !important;
}

/* 6) CONSEILS — photo cards had hard-coded white copy + black veil.
      In Light mode they now use a lighter cream veil + dark copy. */
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-overlay.ed-card-shade {
  background: linear-gradient(0deg,
    rgba(246,242,234,.76) 0%,
    rgba(246,242,234,.48) 26%,
    rgba(246,242,234,.20) 50%,
    rgba(246,242,234,.05) 70%,
    rgba(246,242,234,0) 86%) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top .ed-number,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy h3,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-action {
  color: #211D1A !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy p,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-meta,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-meta * {
  color: #655B53 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top > span:not(.ed-number) {
  color: #AE412C !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-arrow {
  color: #211D1A !important;
  border-color: rgba(33,29,26,.42) !important;
  background: rgba(255,253,248,.88) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover:is(:hover,:focus-visible) > .mosaic-v3-arrow {
  color: #F5EFE5 !important;
  border-color: #211D1A !important;
  background: #211D1A !important;
}

html[data-theme="light"] body.noia-editorial .ed-hero :is(h1,.ed-lead,.ed-breadcrumb,.ed-text-link) {
  color: #211D1A !important;
}
html[data-theme="light"] body.noia-editorial .ed-hero h1 em,
html[data-theme="light"] body.noia-editorial .ed-hero .ed-kicker {
  color: #AE412C !important;
}
html[data-theme="light"] body.noia-editorial .ed-hero .ed-hero-intro {
  color: #655B53 !important;
}

/* 7) PROJECTS PAGE — filters and photo cards remain readable after lighter veil. */
html[data-theme="light"] body.np-page--portfolio .np-filter {
  background: #FFFDF8 !important;
  color: #211D1A !important;
  border-color: rgba(33,29,26,.34) !important;
}
html[data-theme="light"] body.np-page--portfolio .np-filter:is(.active,[aria-pressed="true"],:hover) {
  background: #211D1A !important;
  color: #F6F2EA !important;
  border-color: #211D1A !important;
}
html[data-theme="light"] body.np-page--portfolio .mosaic-v3-copy h3 { color:#211D1A !important; }
html[data-theme="light"] body.np-page--portfolio .mosaic-v3-copy p { color:#655B53 !important; }
html[data-theme="light"] body.np-page--portfolio .mosaic-v3-copy .micro-label { color:#AE412C !important; }
html[data-theme="light"] body.np-page--portfolio .mosaic-v3-arrow {
  color:#211D1A !important;
  border-color:rgba(33,29,26,.42) !important;
  background:rgba(255,253,248,.80) !important;
}

/* V12 — project/detail completeness + legacy media light pass. */
html[data-theme="light"] body .project-facts-v2 {
  background:#F2E9DD !important;
  color:#211D1A !important;
}
html[data-theme="light"] body .project-facts-v2 .project-fact-v2 > span,
html[data-theme="light"] body .project-facts-v2 .project-fact-v2 > strong small,
html[data-theme="light"] body .project-facts-v2 .section-head-v3 p {
  color:#655B53 !important;
}
html[data-theme="light"] body .project-facts-v2 .project-fact-v2 > strong,
html[data-theme="light"] body .project-facts-v2 .display-sans,
html[data-theme="light"] body .project-facts-v2 .display-sans em {
  color:#211D1A !important;
}
html[data-theme="light"] body .project-facts-v2 .micro-label { color:#AE412C !important; }
html[data-theme="light"] body .project-facts-v2__grid,
html[data-theme="light"] body .project-facts-v2 .project-fact-v2 { border-color:rgba(33,29,26,.22) !important; }

html[data-theme="light"] body .project-plan-reveal {
  background:#F2E9DD !important;
  color:#211D1A !important;
}
html[data-theme="light"] body .project-plan-reveal :is(.display-sans,.display-sans em,.project-plan-reveal__hint) {
  color:#211D1A !important;
}
html[data-theme="light"] body .project-plan-reveal__intro { border-color:rgba(33,29,26,.22) !important; }
html[data-theme="light"] body .project-plan-reveal__intro p { color:#655B53 !important; }
html[data-theme="light"] body .project-plan-reveal__hint > span { color:#AE412C !important; }

html[data-theme="light"] body .project-gallery-v2 {
  background:#F6F2EA !important;
  color:#211D1A !important;
}
html[data-theme="light"] body .project-gallery-v2 :is(.display-sans,.display-sans em) { color:#211D1A !important; }
html[data-theme="light"] body .project-gallery-v2 .micro-label { color:#AE412C !important; }
html[data-theme="light"] body .project-gallery-v2 .section-head-v3 p { color:#655B53 !important; }

html[data-theme="light"] body .project-contact-v2 {
  background:#F2E9DD !important;
  color:#211D1A !important;
}
html[data-theme="light"] body .project-contact-v2 .display-sans,
html[data-theme="light"] body .project-contact-v2 .display-sans em { color:#211D1A !important; }
html[data-theme="light"] body .project-contact-v2__aside p { color:#655B53 !important; }

/* Legacy project hero variants also get a lighter Light veil. */
html[data-theme="light"] body .projects-hero::before,
html[data-theme="light"] body .projects-hero-brutalist::after {
  background:linear-gradient(90deg,
    rgba(246,242,234,.72) 0%,
    rgba(246,242,234,.42) 42%,
    rgba(246,242,234,.14) 70%,
    rgba(246,242,234,0) 100%) !important;
}
html[data-theme="light"] body.project-detail-page .hero-small {
  background-image:
    linear-gradient(180deg,
      rgba(246,242,234,.03) 0%,
      rgba(246,242,234,.06) 38%,
      rgba(246,242,234,.22) 70%,
      rgba(246,242,234,.56) 100%),
    var(--project-hero-image) !important;
}
html[data-theme="light"] body.project-detail-page .hero-small::after {
  background:linear-gradient(90deg,
    rgba(246,242,234,.54) 0%,
    rgba(246,242,234,.22) 48%,
    rgba(246,242,234,0) 78%) !important;
}

/* Small icon arrows inside accessible Light CTAs inherit the button foreground. */
html[data-theme="light"] body :is(
  .btn-primary,.contact-submit,.ed-button,.np-btn:not(.np-btn--outline),
  .noia-header-cta,.header-cta,.footer-cta,.process-cta,.agency-method-v2__cta,
  .demo-button--primary
) :is(span,svg,path) {
  color:inherit !important;
  stroke:currentColor;
}

/* ============================================================
   V12C — PAGE PROJETS / COUVERTURES — LIGHT THEME
   2026-09-11
   Corrige la priorite de noia-pages.css qui conservait le voile brun.
   ============================================================ */
html[data-theme="light"] body.noia-interior-page.np-page--portfolio
  .np-portfolio-section.np-portfolio-section--home
  .np-project-card.mosaic-v3-card.project-type-media::after {
  content: "" !important;
  display: block !important;
  background: linear-gradient(to top,
    rgba(246,242,234,.72) 0%,
    rgba(246,242,234,.46) 20%,
    rgba(246,242,234,.22) 40%,
    rgba(246,242,234,.08) 56%,
    rgba(246,242,234,0) 72%) !important;
  background-image: linear-gradient(to top,
    rgba(246,242,234,.72) 0%,
    rgba(246,242,234,.46) 20%,
    rgba(246,242,234,.22) 40%,
    rgba(246,242,234,.08) 56%,
    rgba(246,242,234,0) 72%) !important;
}
html[data-theme="light"] body.noia-interior-page.np-page--portfolio
  .np-portfolio-section.np-portfolio-section--home .np-project-card .mosaic-v3-copy h3 {
  color:#211D1A !important;
  text-shadow:none !important;
}
html[data-theme="light"] body.noia-interior-page.np-page--portfolio
  .np-portfolio-section.np-portfolio-section--home .np-project-card .mosaic-v3-copy p {
  color:#655B53 !important;
  text-shadow:none !important;
}

/* ============================================================
   V13 — CONSEILS / COUVERTURES ARTICLES — CONTRASTE PHOTO
   2026-09-11
   En Light, les photos restent naturelles mais le texte pose sur photo
   conserve une palette claire. Le voile devient sombre, localise en bas,
   moins intense que le Dark et sans gradient lateral.
   ============================================================ */
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-overlay.ed-card-shade {
  background: linear-gradient(to top,
    rgba(33,28,24,.82) 0%,
    rgba(33,28,24,.72) 20%,
    rgba(33,28,24,.54) 38%,
    rgba(33,28,24,.32) 54%,
    rgba(33,28,24,.14) 68%,
    rgba(33,28,24,.04) 78%,
    rgba(33,28,24,0) 86%) !important;
  background-image: linear-gradient(to top,
    rgba(33,28,24,.82) 0%,
    rgba(33,28,24,.72) 20%,
    rgba(33,28,24,.54) 38%,
    rgba(33,28,24,.32) 54%,
    rgba(33,28,24,.14) 68%,
    rgba(33,28,24,.04) 78%,
    rgba(33,28,24,0) 86%) !important;
}

html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top .ed-number,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy h3,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy p,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-meta,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-meta *,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-action {
  color:#F5EFE5 !important;
  opacity:1 !important;
}

html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy h3 {
  color:#FFFDF8 !important;
  text-shadow:0 2px 18px rgba(33,28,24,.48),0 1px 2px rgba(33,28,24,.66) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy p,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-meta,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-meta * {
  color:#F5EFE5 !important;
  text-shadow:0 1px 10px rgba(33,28,24,.44) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top > span,
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .ed-card-top > span:not(.ed-number) {
  color:#C5AB8B !important;
  text-shadow:0 1px 10px rgba(33,28,24,.46) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-copy .ed-card-action {
  color:#FFFDF8 !important;
  border-bottom-color:rgba(255,253,248,.72) !important;
  text-shadow:0 1px 10px rgba(33,28,24,.42) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-arrow {
  color:#FFFDF8 !important;
  border-color:rgba(255,253,248,.78) !important;
  background:rgba(33,28,24,.38) !important;
  box-shadow:0 2px 14px rgba(33,28,24,.16) !important;
}
html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover:is(:hover,:focus-visible) > .mosaic-v3-arrow {
  color:#211D1A !important;
  border-color:#FFFDF8 !important;
  background:#FFFDF8 !important;
}

@media(max-width:700px) {
  html[data-theme="light"] body.noia-editorial .ed-card.ed-card--with-cover > .mosaic-v3-overlay.ed-card-shade {
    background: linear-gradient(to top,
      rgba(33,28,24,.88) 0%,
      rgba(33,28,24,.78) 24%,
      rgba(33,28,24,.60) 44%,
      rgba(33,28,24,.36) 60%,
      rgba(33,28,24,.16) 73%,
      rgba(33,28,24,.04) 82%,
      rgba(33,28,24,0) 90%) !important;
    background-image: linear-gradient(to top,
      rgba(33,28,24,.88) 0%,
      rgba(33,28,24,.78) 24%,
      rgba(33,28,24,.60) 44%,
      rgba(33,28,24,.36) 60%,
      rgba(33,28,24,.16) 73%,
      rgba(33,28,24,.04) 82%,
      rgba(33,28,24,0) 90%) !important;
  }
}


/* ============================================================
   NOIA THEME V14 — CONTRAST GUARD — 2026-09-24
   Light surface = dark copy. Dark surface = light copy.
   ============================================================ */
html[data-theme="light"] {
  --nt-on-light:#211D1A;
  --nt-on-light-muted:#5A514A;
  --nt-on-dark:#FFFDF8;
  --nt-on-dark-muted:#E7DDD2;
}
html[data-theme="dark"] {
  --nt-on-light:#211D1A;
  --nt-on-light-muted:#5A514A;
  --nt-on-dark:#FFFDF8;
  --nt-on-dark-muted:#D8CEC3;
}

html[data-theme] body :is(
  .card,.quote,.meta-item,.stat,.form,.contact-form-card,.contact-prep__item,
  .ed-card:not(.ed-card--with-cover),.ed-note,.ed-toc,.guide-card,
  .accessibility-item,.channel-card,.brand-lab,.component-playground,
  .project-next-v3__card
) {
  background:var(--nt-surface)!important;
  color:var(--nt-text)!important;
  border-color:var(--nt-line)!important;
}
html[data-theme] body :is(
  .card,.quote,.meta-item,.stat,.form,.contact-form-card,.contact-prep__item,
  .ed-card:not(.ed-card--with-cover),.ed-note,.ed-toc,.guide-card,
  .accessibility-item,.channel-card,.brand-lab,.component-playground,
  .project-next-v3__card
) :is(h1,h2,h3,h4,h5,h6,strong,a,summary,label) {
  color:var(--nt-text)!important;
}
html[data-theme] body :is(
  .card,.quote,.meta-item,.stat,.form,.contact-form-card,.contact-prep__item,
  .ed-card:not(.ed-card--with-cover),.ed-note,.ed-toc,.guide-card,
  .accessibility-item,.channel-card,.brand-lab,.component-playground,
  .project-next-v3__card
) :is(p,li,small,dd,dt,.muted) {
  color:var(--nt-muted)!important;
}

html[data-theme] body.contact-editorial-page :is(
  .contact-booking,.contact-booking__calendar,.contact-booking__frame,
  .contact-booking__placeholder
) {
  background:var(--nt-bg-alt)!important;
  color:var(--nt-text)!important;
  border-color:var(--nt-line)!important;
}
html[data-theme] body.contact-editorial-page .contact-booking__copy :is(h2,h2 em,strong),
html[data-theme] body.contact-editorial-page .contact-booking__placeholder :is(strong,a) {
  color:var(--nt-text)!important;
}
html[data-theme] body.contact-editorial-page .contact-booking :is(
  .contact-index,.contact-booking__intro,.contact-booking__details span
),
html[data-theme] body.contact-editorial-page .contact-booking__placeholder :is(
  p,.contact-booking__placeholder-label
) {
  color:var(--nt-muted)!important;
}
html[data-theme] body.contact-editorial-page .contact-booking__details span,
html[data-theme] body.contact-editorial-page .contact-booking__placeholder a {
  border-color:var(--nt-line-strong)!important;
}
html[data-theme] body.contact-editorial-page .contact-booking__placeholder a:hover {
  background:var(--nt-text)!important;
  color:var(--nt-bg)!important;
  border-color:var(--nt-text)!important;
}

html[data-theme="light"] body :is(
  .hero-v10,.projects-hero,.projects-hero-brutalist,.project-detail-page .hero-small,
  .project-hero-v2,.project-type-media,.mosaic-v3-card,.photo-direction,
  .application-art,.cta-v3
) {
  --media-text:var(--nt-on-light);
  --media-muted:var(--nt-on-light-muted);
  --media-kicker:#8F3829;
}
html[data-theme="dark"] body :is(
  .hero-v10,.projects-hero,.projects-hero-brutalist,.project-detail-page .hero-small,
  .project-hero-v2,.project-type-media,.mosaic-v3-card,.photo-direction,
  .application-art,.cta-v3
) {
  --media-text:var(--nt-on-dark);
  --media-muted:var(--nt-on-dark-muted);
  --media-kicker:#E4CDB5;
}
html[data-theme] body :is(
  .hero-v10,.projects-hero,.projects-hero-brutalist,.project-detail-page .hero-small,
  .project-hero-v2,.project-type-media,.mosaic-v3-card,.photo-direction,
  .application-art,.cta-v3
) :is(h1,h2,h3,h4,h5,h6,.display-sans,.title-display,.mosaic-v3-copy h3,.project-type-title) {
  color:var(--media-text)!important;
}
html[data-theme] body :is(
  .hero-v10,.projects-hero,.projects-hero-brutalist,.project-detail-page .hero-small,
  .project-hero-v2,.project-type-media,.mosaic-v3-card,.photo-direction,
  .application-art,.cta-v3
) :is(p,.lead,.mosaic-v3-copy p,.project-meta,.application-art-meta) {
  color:var(--media-muted)!important;
}
html[data-theme] body :is(
  .hero-v10,.projects-hero,.projects-hero-brutalist,.project-detail-page .hero-small,
  .project-hero-v2,.project-type-media,.mosaic-v3-card,.photo-direction,
  .application-art,.cta-v3
) :is(.micro-label,.eyebrow,.np-eyebrow,.application-art-kicker) {
  color:var(--media-kicker)!important;
}

html[data-theme] body.noia-editorial .ed-card.ed-card--with-cover,
html[data-theme] body.noia-editorial .ed-card.ed-card--with-cover :is(
  h1,h2,h3,h4,h5,h6,p,span,time,strong,.ed-card-meta,.ed-card-action,.ed-number
) {
  color:#FFFDF8!important;
  -webkit-text-fill-color:#FFFDF8!important;
}

html[data-theme] body :is(
  .btn-primary,.contact-submit,.ed-button,.np-btn:not(.np-btn--outline),.noia-header-cta
) {
  background:#AE412C!important;
  color:#FFFDF8!important;
  border-color:#AE412C!important;
}
html[data-theme] body :is(
  .btn-primary,.contact-submit,.ed-button,.np-btn:not(.np-btn--outline),.noia-header-cta
):is(:hover,:focus-visible) {
  background:#5A3C2C!important;
  color:#FFFDF8!important;
  border-color:#5A3C2C!important;
}
html[data-theme] body :is(input,textarea,select) {
  background-color:var(--nt-surface)!important;
  color:var(--nt-text)!important;
  border-color:var(--nt-line-strong)!important;
}
html[data-theme="light"] body select option { background:#FFFDF8!important; color:#211D1A!important; }
html[data-theme="dark"] body select option { background:#211D1A!important; color:#FFFDF8!important; }

html[data-theme="light"] body :is(.micro-label,.eyebrow,.np-eyebrow,.ed-kicker,.contact-kicker) {
  color:#9E3A29!important;
}
html[data-theme="dark"] body :is(.micro-label,.eyebrow,.np-eyebrow,.ed-kicker,.contact-kicker) {
  color:#D7B99B!important;
}
html[data-theme] body :is(
  .hero-v10,.projects-hero,.projects-hero-brutalist,.project-detail-page .hero-small,
  .project-hero-v2,.project-type-media,.mosaic-v3-card,.photo-direction,
  .application-art,.cta-v3
) :is(.micro-label,.eyebrow,.np-eyebrow,.application-art-kicker) {
  color:var(--media-kicker)!important;
}

/* ============================================================
   NOIA THEME V15 — ADAPTIVE LINK CONTRAST — 2026-09-24
   Every textual link gets an explicit foreground per theme.
   ============================================================ */
html[data-theme="light"] {
  --nt-link: #8F3829;
  --nt-link-hover: #5A3C2C;
  --nt-link-underline: rgba(143,56,41,.42);
  --nt-link-subtle: #5A514A;
}

html[data-theme="dark"] {
  --nt-link: #E4CDB5;
  --nt-link-hover: #FFFDF8;
  --nt-link-underline: rgba(228,205,181,.48);
  --nt-link-subtle: #D8CEC3;
}

/* Inline editorial links: paragraphs, lists, prose and SEO/local copy. */
html[data-theme] body main :is(
  p, li, dd, dt, blockquote,
  .prose, .np-prose-copy,
  .seo-local-v3-body,
  .ed-body-copy, .ed-reference,
  .contact-consent,
  .contact-direct__row,
  .project-story-v2__copy,
  .project-note-v2__body
) a:not(.btn-primary):not(.btn-secondary):not(.btn-line):not(.btn-light):not(.np-btn):not(.ed-button) {
  color: var(--nt-link) !important;
  text-decoration-color: var(--nt-link-underline) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

html[data-theme] body main :is(
  p, li, dd, dt, blockquote,
  .prose, .np-prose-copy,
  .seo-local-v3-body,
  .ed-body-copy, .ed-reference,
  .contact-consent,
  .contact-direct__row,
  .project-story-v2__copy,
  .project-note-v2__body
) a:not(.btn-primary):not(.btn-secondary):not(.btn-line):not(.btn-light):not(.np-btn):not(.ed-button):is(:hover,:focus-visible) {
  color: var(--nt-link-hover) !important;
  text-decoration-color: currentColor !important;
}

/* Explicitly neutralise browser default visited purple/blue. */
html[data-theme] body main :is(
  p, li, dd, dt, blockquote,
  .prose, .np-prose-copy,
  .seo-local-v3-body,
  .ed-body-copy, .ed-reference,
  .contact-consent,
  .contact-direct__row,
  .project-story-v2__copy,
  .project-note-v2__body
) a:visited {
  color: var(--nt-link) !important;
}

/* Structural text links: they still look like part of the layout, but adapt. */
html[data-theme] body :is(
  .text-link,
  .np-text-link,
  .ed-text-link,
  .expertise-topic-links a,
  .expertise-v3-item h3 a,
  .testimonial-google-source,
  .ed-breadcrumb a,
  .np-breadcrumb a,
  .breadcrumb a,
  .project-hero-v2__breadcrumb a,
  .contact-consent a
) {
  color: var(--nt-link) !important;
  border-color: currentColor !important;
  text-decoration-color: var(--nt-link-underline) !important;
}

html[data-theme] body :is(
  .text-link,
  .np-text-link,
  .ed-text-link,
  .expertise-topic-links a,
  .expertise-v3-item h3 a,
  .testimonial-google-source,
  .ed-breadcrumb a,
  .np-breadcrumb a,
  .breadcrumb a,
  .project-hero-v2__breadcrumb a,
  .contact-consent a
):is(:hover,:focus-visible) {
  color: var(--nt-link-hover) !important;
  text-decoration-color: currentColor !important;
}

/* Links placed on photographic/dark-media surfaces use the media foreground,
   not the page link token. */
html[data-theme] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-detail-page .hero-small,
  .project-hero-v2,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art,
  .cta-v3,
  .sitewide-cta
) a:not(.btn-primary):not(.noia-header-cta) {
  color: var(--media-text, #FFFDF8) !important;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent) !important;
}

html[data-theme] body :is(
  .hero-v10,
  .projects-hero,
  .projects-hero-brutalist,
  .project-detail-page .hero-small,
  .project-hero-v2,
  .mosaic-v3-card,
  .project-type-media,
  .photo-direction,
  .application-art,
  .cta-v3,
  .sitewide-cta
) a:not(.btn-primary):not(.noia-header-cta):is(:hover,:focus-visible) {
  color: var(--media-text, #FFFDF8) !important;
  opacity: .82;
}

/* Footer links are normal text links for the active theme. */
html[data-theme] .site-footer :is(
  .footer-links a,
  .footer-contact-link,
  .footer-legal-links a,
  .footer-back-to-top
) {
  color: var(--nt-text) !important;
}
html[data-theme] .site-footer :is(
  .footer-links a,
  .footer-contact-link,
  .footer-legal-links a,
  .footer-back-to-top
):is(:hover,:focus-visible) {
  color: var(--nt-link) !important;
}

/* Expertise inactive rows must remain readable in both modes. */
html[data-theme] body .expertise-v3-item { opacity: .78 !important; }
html[data-theme] body .expertise-v3-item:is(.is-active,:hover,:focus-visible) { opacity: 1 !important; }

/* The methodology timeline keeps hierarchy without dropping below readable contrast. */
html[data-theme] body .agency-method-v2__step { opacity: .58 !important; }
html[data-theme] body .agency-method-v2__step.is-active { opacity: 1 !important; }

/* ============================================================
   NOIA THEME V16 — LIGHT HERO PARAGRAPH CONTRAST — 2026-09-24
   Renforce uniquement la zone droite des hero en mode clair.
   ============================================================ */
html[data-theme="light"] body .hero-v10-gradient {
  background:
    linear-gradient(270deg,
      rgba(246,242,234,.92) 0%,
      rgba(246,242,234,.76) 18%,
      rgba(246,242,234,.42) 34%,
      rgba(246,242,234,.12) 50%,
      rgba(246,242,234,0) 62%),
    linear-gradient(90deg,
      rgba(246,242,234,.94) 0%,
      rgba(246,242,234,.76) 18%,
      rgba(246,242,234,.46) 40%,
      rgba(246,242,234,.16) 66%,
      rgba(246,242,234,0) 84%),
    linear-gradient(180deg,
      rgba(246,242,234,.08) 0%,
      rgba(246,242,234,.12) 44%,
      rgba(246,242,234,.54) 78%,
      rgba(246,242,234,.88) 100%) !important;
}

html[data-theme="light"] body .hero-v10 .hero-v10-lead,
html[data-theme="light"] body .project-hero-v2 .hero-v10-lead {
  color: #211D1A !important;
  font-weight: 600 !important;
  text-shadow:
    0 1px 0 rgba(255,253,248,.96),
    0 0 20px rgba(255,253,248,.88) !important;
}

html[data-theme="light"] body.noia-interior-page .np-hero--light .np-hero-lead {
  color: #211D1A !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] body .hero-v10-gradient {
    background:
      linear-gradient(180deg,
        rgba(246,242,234,.22) 0%,
        rgba(246,242,234,.12) 28%,
        rgba(246,242,234,.72) 70%,
        rgba(246,242,234,.96) 100%),
      linear-gradient(270deg,
        rgba(246,242,234,.72) 0%,
        rgba(246,242,234,.36) 48%,
        rgba(246,242,234,0) 78%) !important;
  }
}

/* ============================================================
   NOIA THEME V17 — METHODE CTA TRANSPARENT — 2026-09-24
   Le CTA "Demarrer mon projet" reste un lien editorial sans fond.
   ============================================================ */
html[data-theme] body .agency-method-v2__cta,
html[data-theme] body .agency-method-v2__cta:is(:hover,:focus-visible) {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body .agency-method-v2__cta {
  color: var(--nt-text) !important;
  border-color: var(--nt-line-strong) !important;
}

html[data-theme] body .agency-method-v2__cta:is(:hover,:focus-visible) {
  color: var(--nt-accent) !important;
  border-color: var(--nt-accent) !important;
}


/* ============================================================
   NOIA THEME V18 — METHODE CTA STRICTEMENT SANS FOND — 2026-09-24
   Neutralise toute regle globale de bouton sur le lien editorial.
   ============================================================ */
body .agency-method-v2__cta,
body .agency-method-v2__cta:is(:hover,:focus-visible) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .agency-method-v2__cta {
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  color: var(--method-ink, var(--nt-text, #211D1A)) !important;
}

body .agency-method-v2__cta:is(:hover,:focus-visible) {
  color: var(--method-terra, #C95135) !important;
}

body .agency-method-v2__cta::before,
body .agency-method-v2__cta::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ============================================================
   NOIA THEME V19 — CHARTE / COMPOSANTS EN SITUATION — 2026-09-24
   Le contraste de la démonstration dépend de sa surface locale,
   jamais du thème global de la page.
   ============================================================ */
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface="dark"] {
  --component-bg: #171310;
  --component-fg: #F5EFE5;
  --component-muted: #CFC5BA;
  --component-line: rgba(245,239,229,.22);
  --component-label: #E8876F;
  background: var(--component-bg) !important;
  color: var(--component-fg) !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface="light"] {
  --component-bg: #F6F2EA;
  --component-fg: #211C18;
  --component-muted: #655B53;
  --component-line: rgba(33,28,24,.22);
  --component-label: #9E3A29;
  background: var(--component-bg) !important;
  color: var(--component-fg) !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .component-demo-block,
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-details,
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-details:last-child {
  border-color: var(--component-line) !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface]
:is(.demo-button--secondary,.demo-text-link,.demo-details summary,.demo-details summary span,.demo-details p,.demo-field,.demo-field input) {
  color: var(--component-fg) !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface]
:is(.component-demo-label,.demo-field > span) {
  color: var(--component-label) !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-button--primary {
  background: #AE412C !important;
  border-color: #AE412C !important;
  color: #FFFDF8 !important;
}
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-button--primary:is(:hover,:focus-visible) {
  background: #5A3C2C !important;
  border-color: #5A3C2C !important;
  color: #FFFDF8 !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-button--secondary {
  background: transparent !important;
  color: var(--component-fg) !important;
  border-color: var(--component-line) !important;
}
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface="dark"] .demo-button--secondary:is(:hover,:focus-visible) {
  background: #F5EFE5 !important;
  color: #211C18 !important;
  border-color: #F5EFE5 !important;
}
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface="light"] .demo-button--secondary:is(:hover,:focus-visible) {
  background: #FFFDF8 !important;
  color: #211C18 !important;
  border-color: #211C18 !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-text-link {
  background: transparent !important;
  color: var(--component-fg) !important;
  border-color: currentColor !important;
  text-decoration-color: currentColor !important;
}
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-text-link:is(:hover,:focus-visible) {
  color: var(--component-label) !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-field input {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--component-fg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--component-line) !important;
  caret-color: #C95135 !important;
  -webkit-text-fill-color: var(--component-fg) !important;
}
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-field input::placeholder {
  color: var(--component-muted) !important;
  -webkit-text-fill-color: var(--component-muted) !important;
  opacity: 1 !important;
}
html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-field input:is(:focus,:focus-visible) {
  border-bottom-color: #C95135 !important;
}

html[data-theme] body.np-page--brand-guide .component-playground-preview[data-component-surface] .demo-details p {
  color: var(--component-muted) !important;
  opacity: 1 !important;
}