/* 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 */