/* WEVAL CONTRAST SYSTEM v1
 * Doctrine D-CONTRAST-PATTERN — Single source of truth pour fix les patterns clair-sur-clair
 * et sombre-sur-sombre sur tout le site (statique + SPA React).
 *
 * RADIE: pattern "badge tinted" color=brand on bg=rgba(brand,0.1) → ratio 1.0 invisible.
 * SOURCE: c'est PAS les overrides D5xx/D7xx (qui ciblaient h1/h2/p) — c'est le design pattern
 *          appliqué inline par les composants React et les <style> inline des pages HTML.
 *
 * Stratégie: 
 *   1. Override par classe générique (.tag, .badge, .kpi-pill, .live-indicator, .nav-links a.active)
 *   2. Override par attr selector pour inline styles React (.wr-case-badge avec style="color:#xxx")
 *   3. Couleurs darker validées WCAG AA (≥ 4.5) sur les fonds tintés correspondants
 *
 * Date: 2026-05-10
 * Autorité: après ce fichier, INTERDICTION de créer un nouveau d-contrast-*.css ou *-readability-*.css
 */

/* === Variables canoniques === */
:root {
  --wcs-purple-on-tint: #4338ca;
  --wcs-teal-on-tint: #0f766e;
  --wcs-cyan-on-tint: #0e7490;
  --wcs-indigo-on-tint: #4338ca;
  --wcs-amber-on-tint: #92400e;
  --wcs-green-on-tint: #047857;
  --wcs-coral-on-tint: #b91c1c;
  --wcs-text-primary: #1f2937;
}

/* === Override par classe (fix le pattern .tag/.badge/.pill/etc.) === */
/* Note: chaque classe ci-dessous a un bg rgba tinté par construction de design.
 * On force le color à une variante DARKER pour passer 4.5:1.
 */

.tag,
.card .tag,
span.tag,
div.tag {
  color: var(--wcs-purple-on-tint) !important;
}

.kpi-pill,
.kpi-pill[class] {
  color: var(--wcs-cyan-on-tint) !important;
}

.live-indicator,
.live-indicator[class] {
  color: var(--wcs-teal-on-tint) !important;
}

/* Nav active state (.nav-links a.active and similar) */
.nav-links a.active,
.nav-links a:hover,
nav .active,
.topnav .active {
  color: var(--wcs-purple-on-tint) !important;
}

/* === Override par attribute selector pour inline styles React === */
/* Matche quand un composant React applique style="color: #xxx" en inline (badge tinted) */

[style*="color:#6f5cff"], [style*="color: #6f5cff"],
[style*="color:#6F5CFF"], [style*="color: #6F5CFF"],
[style*="color: rgb(111, 92, 255)"], [style*="color:rgb(111,92,255)"] {
  color: var(--wcs-purple-on-tint) !important;
}

[style*="color:#0d9488"], [style*="color: #0d9488"],
[style*="color: rgb(13, 148, 136)"], [style*="color:rgb(13,148,136)"] {
  color: var(--wcs-teal-on-tint) !important;
}

[style*="color:#22d3ee"], [style*="color: #22d3ee"],
[style*="color: rgb(34, 211, 238)"] {
  color: var(--wcs-cyan-on-tint) !important;
}

[style*="color:#00c9a7"], [style*="color: #00c9a7"],
[style*="color:#00C9A7"], [style*="color: rgb(0, 201, 167)"] {
  color: var(--wcs-green-on-tint) !important;
}

[style*="color:#818cf8"], [style*="color: #818cf8"],
[style*="color: rgb(129, 140, 248)"] {
  color: var(--wcs-indigo-on-tint) !important;
}

[style*="color:#6366f1"], [style*="color: #6366f1"],
[style*="color: rgb(99, 102, 241)"] {
  color: var(--wcs-indigo-on-tint) !important;
}

[style*="color:#f59e0b"], [style*="color: #f59e0b"],
[style*="color: rgb(245, 158, 11)"] {
  color: var(--wcs-amber-on-tint) !important;
}

[style*="color:#fbbf24"], [style*="color: #fbbf24"] {
  color: var(--wcs-amber-on-tint) !important;
}

[style*="color:#dc3e3e"], [style*="color: #dc3e3e"] {
  color: var(--wcs-coral-on-tint) !important;
}

/* === Cas spécifique: white text sur white-tinted (.featured .badge "À LA UNE") === */
/* Ce cas casse complètement: text white sur rgba(white,0.12) sur fond clair = invisible.
 * Stratégie: forcer le bg à un opaque foncé pour que le white text reste lisible.
 */
.featured .badge,
.featured > div > .badge {
  background: rgba(67, 56, 202, 0.95) !important;  /* indigo-700 opaque pour contraste */
  color: #ffffff !important;
}

/* === Hero gradient text fix (P44 - garde la regle existante) === */
html body .hero-title,
html body h1.hero-title,
html body section .hero-title,
html body .hero-slogan-section .hero-title,
html body .hero-slogan-container .hero-title {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* === @supports fallback pour text-fill-color: transparent (D574) === */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  [style*="-webkit-text-fill-color"],
  .hero-title,
  h1[class*="gradient"], h2[class*="gradient"], h3[class*="gradient"] {
    -webkit-text-fill-color: var(--wcs-text-primary) !important;
    color: var(--wcs-text-primary) !important;
  }
}


/* === DARK-ON-DARK FIX (D-CONTRAST-PATTERN extension) === 
 * Sections hero sombres de la home: composant React applique un bg dark indigo/slate
 * mais oublie d'overrider color text qui herite du body clair (slate-800).
 * Force text light sur ces sections specifiques.
 * Date: 2026-05-10
 */

/* Excellence hero (dark indigo bg) */
.excellence-hero-background h1, .excellence-hero-background h2, .excellence-hero-background h3,
.excellence-hero-content h1, .excellence-hero-content h2, .excellence-hero-content h3,
.excellence-hero-background p, .excellence-hero-content p,
.excellence-main-title,
.excellence-section h1, .excellence-section h2, .excellence-section h3,
.excellence-section p,
.excellence-section .section-content p {
  color: #1B1B1B !important;
}

/* Partners section */
.partners-section .partners-title,
.partners-section h1, .partners-section h2, .partners-section h3,
.partners-section p {
  color: #1B1B1B !important;
}

/* Services section (dark indigo bg #1a1575) */
#our-services .services-title,
#our-services .services-subtitle,
#our-services .services-subtitle p,
#our-services h1, #our-services h2, #our-services h3,
#our-services p,
.services-section .services-title,
.services-section h1, .services-section h2, .services-section h3 {
  color: #1B1B1B !important;
}

/* Solutions detail dark section */
#solutions-detail h1, #solutions-detail h2, #solutions-detail h3,
#solutions-detail p,
#solutions-detail .service-detail-text h1,
#solutions-detail .service-detail-text h2,
#solutions-detail .service-detail-text h3,
#solutions-detail .service-detail-text p {
  color: #1B1B1B !important;
}
.marketplace-button {
  color: #ffffff !important;
  background: #3730A3 !important;
  border: 1px solid #3730A3 !important;
}
.marketplace-button:hover {
  background: #1e1b6e !important;
  border-color: #1e1b6e !important;
}

/* Recrutement detail dark section */
#recrutement-detail h1, #recrutement-detail h2, #recrutement-detail h3,
#recrutement-detail p,
#recrutement-detail .service-detail-text h1,
#recrutement-detail .service-detail-text h2,
#recrutement-detail .service-detail-text h3,
#recrutement-detail .service-detail-text p {
  color: #1B1B1B !important;
}
#recrutement-detail .nav-button,
.navigation-buttons .nav-button {
  color: #ffffff !important;
  background: #3730A3 !important;
  border: 1px solid #3730A3 !important;
}
#recrutement-detail .nav-button:hover,
.navigation-buttons .nav-button:hover {
  background: #1e1b6e !important;
  border-color: #1e1b6e !important;
}


/* === DARK-ON-DARK STRENGTHENING (high specificity) === */
#root section#main .partners-section .partners-title,
#root section#main .partners-section h2 { color: #1B1B1B !important; }

#root div#our-services .services-title,
#root div#our-services .services-section .services-title,
#root div#our-services .services-section h3,
#root div#our-services .services-subtitle,
#root div#our-services .services-subtitle p,
#root div#our-services p { color: #1B1B1B !important; }

#root section#solutions-detail .service-detail-text h1,
#root section#solutions-detail .service-detail-text h2,
#root section#solutions-detail .service-detail-text h3,
#root section#solutions-detail .service-detail-text p,
#root section#solutions-detail .marketplace-button { color: #1B1B1B !important; }
#root section#solutions-detail .marketplace-button {
  background: #3730A3 !important;
  border: 1px solid #3730A3 !important;
  color: #ffffff !important;
}

#root section#recrutement-detail .service-detail-text h1,
#root section#recrutement-detail .service-detail-text h2,
#root section#recrutement-detail .service-detail-text h3,
#root section#recrutement-detail .service-detail-text p:not(.navigation-text),
#root section#recrutement-detail .navigation-buttons .nav-button,
#root section#recrutement-detail .nav-button { color: #ffffff !important; }
#root section#recrutement-detail .navigation-buttons .nav-button {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}

#root .excellence-hero-background h1, #root .excellence-hero-background h2,
#root .excellence-hero-background h3, #root .excellence-hero-background p,
#root .excellence-hero-content h1, #root .excellence-hero-content h2,
#root .excellence-hero-content h3, #root .excellence-hero-content p,
#root .excellence-hero-content .excellence-section h1,
#root .excellence-hero-content .excellence-section h2,
#root .excellence-hero-content .excellence-section h3,
#root .excellence-hero-content .excellence-section p,
#root h2.excellence-main-title,
#root .excellence-main-title { color: #1B1B1B !important; }


/* === LIGHT-ON-LIGHT FIX (sections lavande clair) ===
 * Sur fond lavande tres clair (rgb(234,234,248) ou rgb(237,237,249)),
 * forcer text DARK pour passer 4.5:1.
 */
.service-intro-text,
.service-marketplace-note,
.use-cases-title,
.service-detail-text .service-intro-text,
.service-detail-text .service-marketplace-note,
[class*="service-intro"],
[class*="service-marketplace"] {
  color: #1f2937 !important;
}

/* marketplace-button et nav-button quand sur fond lavande clair (light section) */
.service-detail-text:not([data-section-theme="dark"]) .marketplace-button,
.service-detail-text:not([data-section-theme="dark"]) .nav-button {
  color: #1f2937 !important;
  background: rgba(67, 56, 202, 0.95) !important;
  color: #ffffff !important;
}


/* D815-PARTNERS-EYEBROW-WEVAL */
/* Override the legacy dark-theme rules: partners/services titles should be WEVAL indigo eyebrow style */
.partners-section .partners-title,
#root section#main .partners-section .partners-title,
#root section#main .partners-section h2,
#our-services .services-title,
#root div#our-services .services-title,
#root div#our-services .services-section .services-title,
.services-section .services-title,
.use-cases-section .use-cases-title {
  color: #3730A3 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* But the actual h2/h3 main titles of sections should be dark, not eyebrow */
.partners-section h2:not(.partners-title),
.partners-section h3:not(.partners-title),
.partners-section p,
#our-services h2:not(.services-title),
#our-services h3:not(.services-title),
#our-services .services-subtitle,
#our-services .services-subtitle p,
#our-services p,
.services-section h2:not(.services-title),
.services-section h3:not(.services-title),
.excellence-section h1,
.excellence-section h2,
.excellence-section h3,
.excellence-section p,
.excellence-section .section-content p,
.excellence-main-title {
  color: #1B1B1B !important;
}
/* End D815-PARTNERS-EYEBROW-WEVAL */

/* ============================================================
   WEVIA CONTRAST GUARD — D-UXAUDIT 2026-07-10
   Verified-selector fixes from Playwright effective-bg audit.
   WCAG 2.1 AA (4.5:1 body / 3:1 large). Additive, class-scoped.
   Owner: Director UX pass. No _v2 file — appended to canonical guard.
   ============================================================ */

/* --- P1: .tag badges — indigo-on-indigo 1.75:1 (nos-solutions, actualites) --- */
/* Fix: dark purple text on pale purple fill -> ~12:1 */
span.tag,
.tag {
  color: #26215c !important;              /* purple-900 */
  background-color: #eeedfe !important;    /* purple-50 */
}
/* active nav pill same bug */
.nav-link.active,
.navlink.active,
a.active.tag,
.active.tag {
  color: #26215c !important;
  background-color: #eeedfe !important;
}

/* --- P2: .status-pill "We Recommend" — blue-on-blue 1:1 (technology-radar) --- */
.status-pill {
  color: #042c53 !important;               /* blue-900 */
  background-color: #e6f1fb !important;     /* blue-50 */
}

/* --- P3: Trust Center badge — green-on-green 1:1 --- */
.badge[style*="16"],
.trust .badge,
.badge.badge-trust {
  color: #04342c !important;               /* teal-900 */
  background-color: #e1f5ee !important;     /* teal-50 */
}

/* --- P4: use-cases category chips — text == bg color 1:1 --- */
/* These chips set color and background to the SAME hex. Force white text
   on the colored fill (fills are already saturated 600-level colors). */
.uc-tag, .case-tag, .sector-chip, .badge-sector,
[class*="chip"][style*="background"] {
  color: #ffffff !important;
}

/* --- P5: avatar initials — white on light gray 1.11:1 --- */
.avatar, .ceo-avatar, .author-avatar, .d492-ceo-avatar {
  color: #1e1b4b !important;               /* indigo-950 on light circle */
  background-color: #e0e7ff !important;     /* indigo-100 */
  font-weight: 600 !important;
}

/* --- P6: md-intro-badge — near-white on cream 1.06:1 --- */
.md-intro-badge {
  color: #26215c !important;
  background-color: #eeedfe !important;
}

/* --- P7: lang toggle buttons — white on cream 1.07:1 --- */
.weval-ml-btn, .lang-toggle, .btn-lang {
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

/* --- P8: CTA buttons — white on indigo #6366f1 (4.47:1, just under) --- */
/* Darken the indigo fill to indigo-800 -> ~8:1 white text */
.service-button, .d497-cta, .d492-ceo-cta,
a.cta-primary, button.cta-primary,
.cta-btn-primary, .btn-primary-indigo {
  background-color: #312e81 !important;    /* indigo-900 */
  color: #ffffff !important;
}
/* audit / demo CTA anchors that were flagged white-on-white by parser:
   ensure the indigo fill is present and text white */
a[href*="audit"].btn,
a[href*="diagnostic"].btn {
  background-color: #312e81 !important;
  color: #ffffff !important;
}

/* --- P9: indigo link text on white (4.47:1 -> 7:1) --- */
.footer-nav-link, .contact-value, .d497-dept, .d492-ceo-role,
.p29-3d-count, a.link-indigo {
  color: #4338ca !important;               /* indigo-700, passes on white */
}

/* --- P10: .flag-tag FLAGSHIP eyebrow (4.04:1 -> 7:1) --- */
.flag-tag, .stag {
  color: #4338ca !important;               /* indigo-700 */
}

/* --- P11: suite count chips white-on-mid (3.1-3.7:1) --- */
/* Darken the chip backgrounds one step; text stays white */
.suite-cnt {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.suite-cnt[style*="184"], .suite-cnt[style*="b88a2e"] { background-color:#8a5a00 !important; } /* amber darker */
.suite-cnt[style*="13, 148"], .suite-cnt[style*="0d9488"] { background-color:#0f5132 !important; } /* teal darker */
.suite-cnt[style*="220"], .suite-cnt[style*="dc3e3e"] { background-color:#991b1b !important; } /* red darker */

/* --- P12: muted grays just under threshold (author/office/subtitle) --- */
.author-context, .office-meta, .subtitle, .sd, .sub {
  color: #475569 !important;               /* slate-600, 7:1 on white */
}
.p29-3d-name, em.hero-em, .md-muted {
  color: #64748b !important;               /* slate-500, passes at 3:1 large */
}
/* office chips on gradient bg -> force readable */
.office {
  color: #f8fafc !important;
}

/* --- P13: Trust Center dark-bg headings reading dark (1.35:1) --- */
/* Page bg is #0a0a0c; these headings were dark slate. Force light. */
.trust h1, .trust h2, .trust-center h1, .trust-center h2,
body[data-page="trust"] h1, body[data-page="trust"] h2 {
  color: #f1f5f9 !important;
}

/* --- P14: category buttons on radar (3:1 -> 4.5:1) --- */
.cat-btn { color: #475569 !important; }
.cat-btn.active { color: #ffffff !important; }
.stats-val { color: #0f172a !important; }

/* --- P15: advisory footer links teal-on-dark (2.34:1) --- */
.advisory-footer a, footer .hover\:text-teal-400 {
  color: #5dcca5 !important;               /* teal-200 on dark */
}

/* ============================================================
   SPRINT3 A11Y — D-UXAUDIT 2026-07-11
   Touch targets >=44px (UI controls only; prose links WCAG-exempt),
   min font 12px on identified classes, skip-link focus styling.
   ============================================================ */

/* --- T1: nav & footer links — 44px hit area via padding --- */
.nav-link, .footer-nav-link, .lk, .contact-value,
a.hover\:text-teal-400, .text-gray-700 a, footer a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* --- T2: demo-agents & CEO controls --- */
.d497-cta, .d497-filter-btn, .d492-ceo-cta, .et, .db,
.cat-btn, button.tag, .weval-ml-btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- T3: carousel dots — keep visual size, expand hit area --- */
.carousel-3d-dot { position: relative !important; }
.carousel-3d-dot::before {
  content: '';
  position: absolute;
  inset: -16px;
}

/* --- T4: form selects --- */
select { min-height: 44px !important; }

/* --- F1: min 12px font on badge/meta classes (radar + demo + products + solutions) --- */
.tag, .suite-tag, .suite-cnt, .kpi-l, .flag-tag, .stag,
.status-pill, .card-stars-label, .card-lang, .card-license,
.replaces-badge, .d497-meta-item, .d497-dept, .gp,
.md-intro-badge, .badge {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
/* demo-agents CTA text was <12 too */
.d497-cta { font-size: 13px !important; }

/* --- S1: skip-link visible & contrasted on focus --- */
a[href="#main"], a[href="#content"], .skip-link {
  position: absolute;
  left: -9999px;
}
a[href="#main"]:focus, a[href="#content"]:focus, .skip-link:focus {
  position: fixed !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 99999 !important;
  background: #1e1b4b !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}

/* --- SPRINT3-R2 2026-07-11: remaining identified selectors --- */
/* demo-agents: strong has own smaller rule, override explicitly */
.d497-meta-item strong, .d492-ceo-meta strong,
.dc-erp, .dc-m, .d492-ceo-role, .d492-ceo-meta,
.p29-3d-count, .p28-case-result-lbl,
.d453-scenario-btn .role, .d453-scenario-btn .ttl, .d453-scenario-btn .gain {
  font-size: 12px !important;
}
/* technology-radar legend */
.legend-count, .legend-title, .mono { font-size: 12px !important; }
/* service template footer link columns (44px hit area) */
.footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 8px 0 !important;
}
.logo { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }

/* SPRINT3-R3: last identified classes (min-size bump, low-risk) */
.role, .ttl, .gain, .p36-partner-label { font-size: 12px !important; }

/* ============================================================
   D-REGRESSFIX 2026-07-11 — html body specificity beats late overrides
   Root cause: post-d979c CSS nuked button backgrounds on SPA pages;
   d812 (old protector) disabled by prior session. Charte d949 colors.
   ============================================================ */
html body .service-button, html body .wr-service-link,
html body .contact-button, html body .services-button {
  background-color: #6d28d9 !important;
  background-image: linear-gradient(135deg,#6d28d9,#7c3aed) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .office, html body .office span { color: #f8fafc !important; }
html body nav .active, html body header .active,
html body .tag.active, html body .nav-link.active {
  color: #26215c !important;
  background-color: #eeedfe !important;
}

/* D-CAROUSEL-GHOST 2026-07-11: cartes 3D non-actives = texte fantome qui bave
   sur fond clair. On attenue fortement les cartes de profil (effet 3D garde),
   la carte .active reste pleine. */
html body .carousel-3d-card:not(.active) {
  opacity: 0.18 !important;
  filter: saturate(0.4) !important;
  transition: opacity .3s ease, filter .3s ease !important;
}
html body .carousel-3d-card:not(.active) .service-button,
html body .carousel-3d-card:not(.active) a,
html body .carousel-3d-card:not(.active) button {
  pointer-events: none !important;
}

/* D-LANGDOUBLON 2026-07-11 (Director): 2 boutons langue simultanes
   (#weval-lang-toggle "EN" + #weval-ml-btn multilingue). On garde le
   selecteur multilingue complet, on cache le toggle binaire doublon. */
html body #weval-lang-toggle { display: none !important; }

/* D-KILL-REVEAL 2026-07-11 (arbitrage council 5/6 SUPPRIMER, valide Directrice)
   .carousel-3d-* EXCLU volontairement (ordre Directrice: 3D garde). */
html body .wv-reveal, html body .weval-aos, html body [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}