/**
 * ============================================================
 * TEXT CONTRAST FIXES - MOBILE LIGHT & DARK MODE
 * ============================================================
 * Version: 1.0.0
 * Date: 2025-12-13
 *
 * Ce fichier corrige tous les problèmes de visibilité de texte
 * sur mobile pour les modes light et dark.
 *
 * WCAG 2.1 AA Compliance: Minimum 4.5:1 contrast ratio
 * ============================================================
 */

/* ============================================================
   SECTION 1: CSS VARIABLES - COULEURS DE TEXTE OPTIMISEES
   ============================================================ */

:root {
  /* Light Mode - Texte lisible */
  --text-primary-light: #1f2937;       /* Titres principaux */
  --text-secondary-light: #374151;      /* Texte corps */
  --text-muted-light: #6b7280;          /* Texte secondaire */
  --text-accent-light: #1e5a3e;         /* Accent vert */

  /* Dark Mode - Texte lisible */
  --text-primary-dark: #f9fafb;         /* Titres principaux */
  --text-secondary-dark: #e5e7eb;       /* Texte corps */
  --text-muted-dark: #9ca3af;           /* Texte secondaire */
  --text-accent-dark: #4ade80;          /* Accent vert */
}

/* ============================================================
   SECTION 2: LIGHT MODE - CORRECTIONS GLOBALES MOBILE
   ============================================================ */

@media (max-width: 1023px) {

  /* --- Titres globaux --- */
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary-light) !important;
    text-shadow: none !important;
  }

  /* Titres sur fond clair */
  .section-title,
  .section-title-premium,
  .card-title,
  .product-card-title,
  .benefit-title-premium,
  [class*="title"] {
    color: var(--text-accent-light) !important;
  }

  /* --- Paragraphes et texte corps --- */
  p, li, span, div {
    color: var(--text-secondary-light);
  }

  /* Texte sur fond blanc/gris clair */
  .bg-white p,
  .bg-gray-50 p,
  .bg-gray-100 p,
  .card p,
  .product-card p,
  section p {
    color: var(--text-secondary-light) !important;
  }

  /* --- Texte muted/secondaire --- */
  .text-gray-500,
  .text-gray-600,
  .text-gray-700,
  .text-muted,
  .section-subtitle,
  .section-subtitle-premium {
    color: #4b5563 !important; /* Plus foncé pour meilleure lisibilité */
  }

  /* --- Links --- */
  a:not(.btn):not(.cta-btn-primary):not(.cta-btn-secondary) {
    color: var(--text-accent-light) !important;
  }

  /* --- Cards et containers --- */
  .card-body,
  .product-card-content,
  .benefit-desc-premium,
  .faq-answer {
    color: var(--text-secondary-light) !important;
  }

  /* --- Hero sections --- */
  .hero-section h1,
  .hero-section h2,
  [class*="hero"] h1,
  [class*="hero"] h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  }

  .hero-section p,
  [class*="hero"] p {
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
  }

  /* --- Sections avec fond vert --- */
  .bg-brand-green h1,
  .bg-brand-green h2,
  .bg-brand-green h3,
  .bg-brand-green p,
  .bg-brand-green span,
  [style*="background: #1e5a3e"] h1,
  [style*="background: #1e5a3e"] h2,
  [style*="background: #1e5a3e"] p,
  [style*="background: linear-gradient"] h1,
  [style*="background: linear-gradient"] h2 {
    color: #ffffff !important;
  }

  /* --- FAQ Section --- */
  .faq-item summary,
  .faq-item .question-text {
    color: var(--text-accent-light) !important;
    font-weight: 700 !important;
  }

  .faq-item .faq-answer {
    color: #4b5563 !important;
  }

  /* --- Testimonials --- */
  .testimonial-card-premium p,
  .testimonial-content {
    color: var(--text-secondary-light) !important;
  }

  .testimonial-author,
  .testimonial-name {
    color: var(--text-primary-light) !important;
    font-weight: 600 !important;
  }

  /* --- Benefits Section --- */
  .benefit-card-premium .benefit-title-premium {
    color: #ffffff !important;
  }

  .benefit-card-premium .benefit-desc-premium {
    color: rgba(255,255,255,0.9) !important;
  }

  /* --- Stats --- */
  .stat-number,
  .stat-value,
  [class*="stat"] strong {
    color: var(--text-accent-light) !important;
    font-weight: 800 !important;
  }

  .stat-label,
  .stat-text {
    color: var(--text-secondary-light) !important;
  }

  /* --- Badges --- */
  .section-badge,
  .badge,
  [class*="badge"] {
    color: var(--text-accent-light) !important;
    background: rgba(30, 90, 62, 0.1) !important;
  }

  /* --- Forms --- */
  .form-label,
  label {
    color: var(--text-primary-light) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #9ca3af !important;
  }

  /* --- Footer --- */
  .site-footer p,
  .site-footer span,
  .footer-widget p {
    color: rgba(255,255,255,0.8) !important;
  }

  .site-footer h3,
  .site-footer h4,
  .footer-widget-title {
    color: #ffffff !important;
  }

  /* --- Footer Navigation Links (Light Mode) - FIX VISIBILITY --- */
  .site-footer a,
  .site-footer nav a,
  .site-footer nav ul li a,
  .site-footer .menu-item a,
  .site-footer .text-text-medium,
  .site-footer .footer-columns nav ul li a {
    color: rgba(255,255,255,0.85) !important;
  }

  .site-footer a:hover,
  .site-footer a:active,
  .site-footer nav a:hover,
  .site-footer nav ul li a:hover,
  .site-footer nav ul li a:active {
    color: #fbbf24 !important;
  }

  /* Footer Logo SVG text */
  .site-footer svg text,
  .site-footer svg tspan {
    fill: #ffffff !important;
  }

  .site-footer svg tspan[fill="#006241"] {
    fill: #fbbf24 !important;
  }
}

/* ============================================================
   SECTION 3: DARK MODE - CORRECTIONS COMPLETES MOBILE
   ============================================================ */

@media (max-width: 1023px) {

  /* --- Base Body --- */
  html.dark body {
    background-color: #0f172a !important;
    color: var(--text-secondary-dark) !important;
  }

  /* --- Titres globaux Dark --- */
  html.dark h1,
  html.dark h2,
  html.dark h3,
  html.dark h4,
  html.dark h5,
  html.dark h6 {
    color: var(--text-primary-dark) !important;
    text-shadow: none !important;
  }

  html.dark .section-title,
  html.dark .section-title-premium,
  html.dark .card-title,
  html.dark [class*="title"]:not([class*="subtitle"]) {
    color: var(--text-primary-dark) !important;
  }

  /* --- Paragraphes Dark --- */
  html.dark p,
  html.dark li,
  html.dark span:not(.icon):not([class*="badge"]) {
    color: var(--text-secondary-dark) !important;
  }

  /* --- Texte muted Dark --- */
  html.dark .text-gray-500,
  html.dark .text-gray-600,
  html.dark .text-gray-700,
  html.dark .text-gray-800,
  html.dark .text-muted,
  html.dark .section-subtitle,
  html.dark .section-subtitle-premium {
    color: #a1a1aa !important;
  }

  /* --- Links Dark --- */
  html.dark a:not(.btn):not(.cta-btn-primary):not(.cta-btn-secondary) {
    color: #60a5fa !important;
  }

  html.dark a:not(.btn):hover {
    color: #93c5fd !important;
  }

  /* --- Backgrounds Dark --- */
  html.dark .bg-white,
  html.dark .bg-gray-50,
  html.dark .bg-gray-100 {
    background-color: #1e293b !important;
  }

  html.dark section:not([class*="hero"]):not([class*="cta"]) {
    background-color: #0f172a !important;
  }

  /* --- Cards Dark --- */
  html.dark .card,
  html.dark .product-card,
  html.dark .testimonial-card-premium,
  html.dark .benefit-card-premium,
  html.dark .faq-item,
  html.dark [class*="card"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: var(--text-secondary-dark) !important;
  }

  html.dark .card p,
  html.dark .product-card p,
  html.dark [class*="card"] p {
    color: #d1d5db !important;
  }

  html.dark .card h3,
  html.dark .product-card h3,
  html.dark [class*="card"] h3 {
    color: var(--text-primary-dark) !important;
  }

  /* --- Benefits Dark (fond vert) --- */
  html.dark .benefit-card-premium {
    background: linear-gradient(135deg, #1e3a2f 0%, #0f2920 100%) !important;
    border-color: #22543d !important;
  }

  html.dark .benefit-card-premium .benefit-title-premium {
    color: #ffffff !important;
  }

  html.dark .benefit-card-premium .benefit-desc-premium {
    color: #d1fae5 !important;
  }

  html.dark .benefit-card-premium:hover {
    border-color: #fbbf24 !important;
  }

  /* --- FAQ Dark --- */
  html.dark .faq-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark .faq-item summary,
  html.dark .faq-item .question-text {
    color: var(--text-primary-dark) !important;
  }

  html.dark .faq-item[open] {
    border-color: var(--text-accent-dark) !important;
  }

  html.dark .faq-item[open] summary {
    color: var(--text-accent-dark) !important;
  }

  html.dark .faq-answer {
    color: #d1d5db !important;
    border-top-color: #334155 !important;
  }

  html.dark .faq-answer strong {
    color: #ffffff !important;
  }

  /* --- Testimonials Dark --- */
  html.dark .testimonial-card-premium {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark .testimonial-card-premium p,
  html.dark .testimonial-content {
    color: #d1d5db !important;
  }

  html.dark .testimonial-author,
  html.dark .testimonial-name {
    color: var(--text-primary-dark) !important;
  }

  html.dark .testimonial-role {
    color: var(--text-accent-dark) !important;
  }

  /* --- Stats Dark --- */
  html.dark .stat-number,
  html.dark .stat-value,
  html.dark [class*="stat"] strong {
    color: #fbbf24 !important;
  }

  html.dark .stat-label,
  html.dark .stat-text {
    color: #d1d5db !important;
  }

  /* --- Badges Dark --- */
  html.dark .section-badge,
  html.dark .badge,
  html.dark [class*="badge"]:not(.icon) {
    color: var(--text-accent-dark) !important;
    background: rgba(74, 222, 128, 0.15) !important;
  }

  /* --- Hero sections Dark --- */
  html.dark .hero-section,
  html.dark [class*="hero"] {
    background: linear-gradient(135deg, #0f172a 0%, #14532d 50%, #0f172a 100%) !important;
  }

  html.dark .hero-section h1,
  html.dark .hero-section h2,
  html.dark [class*="hero"] h1,
  html.dark [class*="hero"] h2 {
    color: #ffffff !important;
  }

  html.dark .hero-section p,
  html.dark [class*="hero"] p {
    color: #e2e8f0 !important;
  }

  /* --- CTA Sections Dark --- */
  html.dark .cta-section,
  html.dark [class*="cta-section"],
  html.dark .cta-final-section {
    background: linear-gradient(135deg, #14532d 0%, #0f172a 100%) !important;
  }

  html.dark .cta-section h2,
  html.dark .cta-section p {
    color: #ffffff !important;
  }

  /* --- Forms Dark --- */
  html.dark .form-label,
  html.dark label {
    color: var(--text-primary-dark) !important;
  }

  html.dark input,
  html.dark textarea,
  html.dark select {
    background-color: #0f172a !important;
    color: var(--text-primary-dark) !important;
    border-color: #334155 !important;
  }

  html.dark input::placeholder,
  html.dark textarea::placeholder {
    color: #6b7280 !important;
  }

  html.dark input:focus,
  html.dark textarea:focus,
  html.dark select:focus {
    border-color: var(--text-accent-dark) !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2) !important;
  }

  /* --- Avantages cards (page affiliation) Dark --- */
  html.dark .avantage-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark .avantage-card h3 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .avantage-card p {
    color: #d1d5db !important;
  }

  /* --- Guide section Dark --- */
  html.dark .guide-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  }

  html.dark .guide-section h2,
  html.dark .guide-section h3 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .guide-section p,
  html.dark .guide-section li {
    color: #d1d5db !important;
  }

  /* --- Blog posts Dark --- */
  html.dark .blog-card,
  html.dark .post-card,
  html.dark article.post {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark .blog-card h3,
  html.dark .post-card h3,
  html.dark article.post h2 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .blog-card p,
  html.dark .post-card p,
  html.dark article.post p {
    color: #d1d5db !important;
  }

  html.dark .post-meta,
  html.dark .entry-meta {
    color: #9ca3af !important;
  }

  /* --- Category pages Dark --- */
  html.dark .category-header {
    background: linear-gradient(135deg, #0f172a 0%, #14532d 100%) !important;
  }

  html.dark .category-header h1 {
    color: #ffffff !important;
  }

  html.dark .category-description {
    color: #e2e8f0 !important;
  }

  /* --- Product pages Dark --- */
  html.dark .product-info h1,
  html.dark .product-title {
    color: var(--text-primary-dark) !important;
  }

  html.dark .product-description,
  html.dark .product-info p {
    color: #d1d5db !important;
  }

  html.dark .product-price {
    color: #fbbf24 !important;
  }

  /* --- Footer Dark --- */
  html.dark .site-footer {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
  }

  html.dark .site-footer h3,
  html.dark .site-footer h4,
  html.dark .footer-widget-title {
    color: var(--text-primary-dark) !important;
  }

  html.dark .site-footer p,
  html.dark .site-footer span,
  html.dark .footer-widget p {
    color: #d1d5db !important;
  }

  html.dark .site-footer a {
    color: #93c5fd !important;
  }

  html.dark .site-footer a:hover {
    color: #60a5fa !important;
  }

  /* --- Navigation Dark --- */
  html.dark .site-header-mobile {
    background-color: #1e293b !important;
  }

  html.dark .site-header-mobile svg {
    stroke: #e2e8f0 !important;
  }

  html.dark .flp-logo span {
    color: #e2e8f0 !important;
  }

  /* --- Inline styles overrides Dark --- */
  html.dark [style*="color: #333"],
  html.dark [style*="color: #374151"],
  html.dark [style*="color: #4b5563"],
  html.dark [style*="color: #6b7280"],
  html.dark [style*="color: #1e5a3e"],
  html.dark [style*="color: rgb(30, 90, 62)"] {
    color: #e2e8f0 !important;
  }

  html.dark [style*="color: #1f2937"],
  html.dark [style*="color: rgb(31, 41, 55)"] {
    color: #f3f4f6 !important;
  }

  /* --- Tables Dark --- */
  html.dark table {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark th {
    background-color: #0f172a !important;
    color: var(--text-primary-dark) !important;
    border-color: #334155 !important;
  }

  html.dark td {
    color: #d1d5db !important;
    border-color: #334155 !important;
  }

  /* --- Accordions Dark --- */
  html.dark details {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark details summary {
    color: var(--text-primary-dark) !important;
  }

  html.dark details[open] summary {
    color: var(--text-accent-dark) !important;
  }

  html.dark details > div,
  html.dark details > p {
    color: #d1d5db !important;
  }

  /* --- Blockquotes Dark --- */
  html.dark blockquote {
    background-color: #1e293b !important;
    border-left-color: var(--text-accent-dark) !important;
    color: #d1d5db !important;
  }

  html.dark blockquote p {
    color: #d1d5db !important;
  }

  /* --- Alerts/Notices Dark --- */
  html.dark .alert,
  html.dark .notice,
  html.dark [class*="alert"],
  html.dark [class*="notice"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #d1d5db !important;
  }

  /* --- Buttons Dark text visibility --- */
  html.dark .btn-outline,
  html.dark button.btn-outline {
    color: var(--text-accent-dark) !important;
    border-color: var(--text-accent-dark) !important;
  }

  html.dark .btn-outline:hover {
    background-color: var(--text-accent-dark) !important;
    color: #0f172a !important;
  }
}

/* ============================================================
   SECTION 4: FIXES SPECIFIQUES PAR PAGE - MOBILE
   ============================================================ */

@media (max-width: 1023px) {

  /* --- Page Affiliation --- */
  html.dark .affiliation-hero h1,
  html.dark .affiliation-hero h2 {
    color: #ffffff !important;
  }

  html.dark .affiliation-hero p {
    color: #e2e8f0 !important;
  }

  /* Stats dans hero affiliation */
  html.dark .affiliation-hero .stat-value {
    color: #fbbf24 !important;
  }

  /* --- Page A Propos --- */
  html.dark .about-section h2,
  html.dark .about-content h2 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .about-section p,
  html.dark .about-content p {
    color: #d1d5db !important;
  }

  /* --- Page Contact --- */
  html.dark .contact-info h3 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .contact-info p,
  html.dark .contact-info span {
    color: #d1d5db !important;
  }

  /* --- Page Blog/Category --- */
  html.dark .blog-categories-section h2 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .category-card h3 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .category-card p {
    color: #d1d5db !important;
  }

  /* --- Page Produit Single --- */
  html.dark .single-product h1 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .product-short-description,
  html.dark .product-description {
    color: #d1d5db !important;
  }

  html.dark .product-meta span,
  html.dark .product-meta p {
    color: #9ca3af !important;
  }

  /* --- Homepage Sections --- */
  html.dark .homepage-section h2,
  html.dark .home-section h2 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .homepage-section p,
  html.dark .home-section p {
    color: #d1d5db !important;
  }

  /* Featured products */
  html.dark .featured-products-section h2 {
    color: var(--text-primary-dark) !important;
  }

  /* Sustainability section */
  html.dark .sustainability-section {
    background-color: #0f172a !important;
  }

  html.dark .sustainability-section h2 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .sustainability-section p {
    color: #d1d5db !important;
  }

  /* Business opportunity */
  html.dark .business-opportunity-section h2 {
    color: var(--text-primary-dark) !important;
  }

  html.dark .business-opportunity-section p {
    color: #d1d5db !important;
  }
}

/* ============================================================
   SECTION 5: IMPORTANT OVERRIDES POUR INLINE STYLES
   ============================================================ */

@media (max-width: 1023px) {

  /* Dark mode - Override tous les inline styles de couleur sombre */
  html.dark *[style*="color: #333333"],
  html.dark *[style*="color: #1f2937"],
  html.dark *[style*="color: #374151"],
  html.dark *[style*="color: #4b5563"],
  html.dark *[style*="color: #6b7280"],
  html.dark *[style*="color: rgb(51, 51, 51)"],
  html.dark *[style*="color: rgb(31, 41, 55)"],
  html.dark *[style*="color: rgb(55, 65, 81)"],
  html.dark *[style*="color: rgb(75, 85, 99)"],
  html.dark *[style*="color: rgb(107, 114, 128)"] {
    color: #e2e8f0 !important;
  }

  /* Dark mode - Backgrounds inline */
  html.dark *[style*="background: #ffffff"],
  html.dark *[style*="background: #f9fafb"],
  html.dark *[style*="background: #f3f4f6"],
  html.dark *[style*="background-color: #ffffff"],
  html.dark *[style*="background-color: #f9fafb"],
  html.dark *[style*="background-color: #f3f4f6"],
  html.dark *[style*="background: white"],
  html.dark *[style*="background-color: white"] {
    background-color: #1e293b !important;
  }

  /* Ensure strong/bold text is always visible */
  html.dark strong,
  html.dark b,
  html.dark .font-bold,
  html.dark .font-semibold {
    color: #ffffff !important;
  }

  /* Ensure all span text inside paragraphs is visible */
  html.dark p span,
  html.dark li span {
    color: inherit !important;
  }

  /* Gold/accent text stays gold in dark mode */
  html.dark .text-brand-gold,
  html.dark [class*="gold"],
  html.dark [style*="color: #c4a66a"],
  html.dark [style*="color: #fbbf24"] {
    color: #fbbf24 !important;
  }
}

/* ============================================================
   SECTION 6: ACCESSIBILITY - HIGH CONTRAST MODE
   ============================================================ */

@media (prefers-contrast: high) {
  h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
  }

  p, li, span {
    color: #1a1a1a !important;
  }

  a {
    color: #0000ee !important;
    text-decoration: underline !important;
  }

  html.dark h1, html.dark h2, html.dark h3,
  html.dark h4, html.dark h5, html.dark h6 {
    color: #ffffff !important;
  }

  html.dark p, html.dark li, html.dark span {
    color: #f0f0f0 !important;
  }

  html.dark a {
    color: #99ccff !important;
  }
}

/* ============================================================
   FIN DU FICHIER
   ============================================================ */