/* =====================================================================
   XTRANUMERIK — COUCHE DE MARQUE « Crème · Mauve · Rouge »  (v3, full-site)
   ---------------------------------------------------------------------
   Override injecté en DERNIER dans <head> par le contrôleur
   (xtranumerik_pub_site_web), sur les pages marketing (PAS /controle).
   Re-skinne TOUT le site sans toucher aux pages : `!important` à haute
   spécificité qui bat les deux systèmes de tokens (main.css + variables.css)
   ET les couleurs codées en dur (blocs <style>, style="").

   RÉVERSIBLE : retirer l'injection = retour exact à l'or + mauve foncé.
   Worklist = scan exhaustif des 116 pages (298 sélecteurs résiduels),
   regroupés ci-dessous par RÔLE.

   Palette : crème #FAF7F2 · surface #FFFCF8 · aubergine #2E1A47
             mauve #7C3AED · magenta #C026D3 · rouge CTA #E11D48
   ===================================================================== */

:root {
  /* Re-mappe les DEUX systèmes de tokens (couvre les ~15 pages en var()) */
  --primary-color:#2E1A47 !important; --primary-violet:#2E1A47 !important;
  --primary-violet-light:#3a2358 !important;
  --accent-color:#E11D48 !important; --accent-gold:#E11D48 !important;
  --accent-gold-dark:#BE123C !important; --secondary-accent:#7C3AED !important;
  --text-dark:#2E1A47 !important; --text-muted:#5b4d6e !important;
  --background-light:#FAF7F2 !important; --background-dark:#2E1A47 !important;
  --gradient-primary:linear-gradient(135deg,#FAF7F2 0%,#F3ECE2 100%) !important;
  --gradient-hero:linear-gradient(135deg,#FAF7F2 0%,#EDE6F7 100%) !important;
  --gradient-accent:linear-gradient(135deg,#7C3AED 0%,#C026D3 55%,#E11D48 100%) !important;
  --artistic-gradient:linear-gradient(135deg,#7C3AED 0%,#C026D3 50%,#E11D48 100%) !important;
  /* Tokens de la couche */
  --xc-creme:#FAF7F2; --xc-creme-2:#F3ECE2; --xc-surface:#FFFCF8; --xc-line:#E7DECF;
  --xc-aubergine:#2E1A47; --xc-aubergine-2:#3a2358; --xc-ink-soft:#5b4d6e;
  --xc-mauve:#7C3AED; --xc-mauve-soft:#EDE6F7; --xc-magenta:#C026D3;
  --xc-rouge:#E11D48; --xc-rouge-dark:#BE123C;
  --xc-signature:linear-gradient(135deg,#7C3AED 0%,#C026D3 55%,#E11D48 100%);
  --xc-dark:linear-gradient(135deg,#2E1A47 0%,#3a2358 100%);
}

/* ---------- Canvas global ---------- */
html, body { background:var(--xc-creme) !important; }
body { color:var(--xc-aubergine) !important; }
::selection { background:var(--xc-mauve); color:#fff; }
a { color:var(--xc-mauve); }

/* =====================================================================
   1) TITRES EN DÉGRADÉ (clip:text) — étaient blanc/or, pensés fond sombre
   ===================================================================== */
.hero h1, .hero-title, .hero-section h1, .hero-section h2, .hero-section .hero-title,
.stats-grid .stat-number, .stat-number, .reservation-section .section-title,
.chart-section h2, .section-title, .cta-content-box h3, .section-heading,
.cta-title, .blog-content h2, .hero h1::after {
  background:var(--xc-signature) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* Barres décoratives (gradient mauve-foncé→or) -> dégradé signature */
.stat-card::before, .section-title::after, .digital-signage-section h2::after,
.avantages-section h2::after, .scroll-progress, .highlight::before,
.audience-card::before, .custom-header::before, .mobile-carousel-progress-bar,
.hamburger-line, .hamburger-line::before, .hamburger-line::after {
  background:var(--xc-signature) !important;
}

/* =====================================================================
   2) FONDS SOMBRES (héros + bandes) -> clair / mauve doux / aubergine
   ===================================================================== */
.hero, .hero-section, .blog-hero {
  background:linear-gradient(135deg,#FAF7F2 0%,#F3ECE2 60%,#EDE6F7 100%) !important;
  color:var(--xc-aubergine) !important;
}
.hero::before, .hero-section::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(124,58,237,.16), transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(225,29,72,.12), transparent 48%) !important;
  opacity:1 !important;
}
.hero::after { background:radial-gradient(circle at 30% 70%, rgba(124,58,237,.10) 0%, transparent 50%) !important; }
/* Bandes claires (texte aubergine) */
.partners-section, .solutions-section, .reservation-section, .category-header,
.highlight-box, .spontaneous, .audience-card::before,
section[style*="190544"], [style*="background: #190544"], [style*="background:#190544"] {
  background:var(--xc-mauve-soft) !important; color:var(--xc-aubergine) !important;
}
/* Bandes qui RESTENT sombres (data/ROI/plateforme) -> aubergine + texte clair */
.chart-section, .roi-section, .platform-highlight, .gradient-dark,
.media-kit-header, .cart-header, .mobile-modal-content, .mobile-nav-menu,
.leaflet-popup-content-wrapper, .leaflet-popup-tip, footer {
  background:var(--xc-dark) !important; color:#fff !important;
}
.page-loader { background:var(--xc-dark) !important; }
.chart-section h2 {
  background:linear-gradient(135deg,#ffffff 0%,#C9A6FF 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* Textes des bandes claires -> aubergine */
.partners-section h2, .partners-section p, .reservation-section .section-subtitle,
.reservation-section .step-description, .category-header h3, .category-header p,
.signage-content h3, .item-content h4, .section h2, .solutions-section h2,
.application-card h3, .applications-section h2, .audience-title, .detail-value,
.region-number, .example-title, .industries-section h2, .industry-card h3,
.modal-summary h3, .pdf-page-info, .benefit-title, .guarantees-heading,
.guarantee-item h4, .platform-title, .info-card h4, .benefit-item h4, .cta-heading,
.industry-features, .section-heading { color:var(--xc-aubergine) !important; }
.reservation-section .step-card { background:var(--xc-surface) !important; border:1px solid var(--xc-line) !important; }

/* =====================================================================
   3) BOUTONS / CTA pleins (or -> ROUGE, texte blanc)
   ===================================================================== */
.cta-button, .btn, .btn-primary, .btn-cta-primary, .btn-primary-cta,
.btn-order, .footer-nav a, .login-button, .mobile-nav-cta, .pdf-btn,
.pdf-download-btn, .floating-cart, .floating-add-to-cart, .nav-btn:hover,
.dot.active, .carousel-dots .dot.active, .ad-popup button, .faq-cta .cta-text,
.step-number, .reservation-section .step-number, .category-icon, .xtr-funnel-step-num,
.modal-actions button[type="submit"], .modal-actions button[type="button"].xtr-funnel-primary,
.map-control-btn, .btn-order, .hero-list li::before, .platform-features li::before,
.mobile-loading-dot, .mobile-carousel-dot.active {
  background:var(--xc-rouge) !important; color:#fff !important;
  border-color:transparent !important; box-shadow:0 8px 22px rgba(225,29,72,.26) !important;
}
.cta-button:hover, .btn:hover, .btn-primary:hover, .btn-cta-primary:hover,
.btn-primary-cta:hover, .btn-order:hover, .footer-nav a:hover, .login-button:hover,
.mobile-nav-cta:hover, .pdf-btn:hover, .pdf-download-btn:hover, .floating-cart:hover,
.floating-add-to-cart:hover, .map-control-btn:hover, .ad-popup button:hover,
.glass-button:hover {
  background:var(--xc-rouge-dark) !important; color:#fff !important;
}
/* step/category icon = pastille pleine (pas de clip texte) */
.step-number, .reservation-section .step-number, .category-icon, .xtr-funnel-step-num {
  -webkit-text-fill-color:#fff !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
}
/* "Boutons clairs" sur bandes colorées : pastilles blanches premium */
.cta-primary, .cta-button-light { background:#fff !important; color:var(--xc-aubergine) !important; border-color:transparent !important; }
.cta-primary:hover, .cta-button-light:hover { background:#FFFCF8 !important; color:var(--xc-rouge) !important; }

/* =====================================================================
   4) ACCENTS OR (texte / icônes / puces) -> MAUVE
   ===================================================================== */
.application-features li::before, .blog-content ul li::before, .audience-percentage,
.section-badge, .section-eyebrow, .text-gold, .xtr-auth-ic, .roi-percentage,
.hero-badge, .metric-value, .ad-popup h3, .visitors-count, .location-facing,
.pdf-loading, .pdf-viewer-header h3, .xtr-thumb__badge, .xtr-screen-link,
.glass-badge, .glass-button, .faq-icon, .certification-badge, .certification-badge.premium,
.platform-advantage h4, .stat-value, .step-title, .industry-features li::before,
.stat-card.highlight .stat-number, .nav-link:hover, .nav-button:hover,
.nav-menu .nav-link:hover, .nav-menu .dropdown-link:hover, .dropdown-signage:hover h3,
.footer-logo .footer-bottom a, .mobile-nav-close:hover, .mobile-nav-link:hover,
.mobile-nav-link:active, .mobile-dropdown-link:hover, .mobile-dropdown-link:active,
.mobile-lang-switch:hover, .mobile-modal-close:hover, .lang-button:hover,
.mobile-carousel-btn:hover, .roi-percentage {
  color:var(--xc-mauve) !important;
}
.pdf-viewer-header h3 { background:none !important; -webkit-text-fill-color:initial !important; }

/* =====================================================================
   5) BORDURES / OUTLINES OR -> MAUVE
   ===================================================================== */
.lang-toggle a:hover, .application-card:hover, .region-card, .location-item.selected,
.btn-secondary:hover, .platform-card:hover, .certification-badge.premium, .platform-note,
.benefit-metric, .mobile-lang-switch:hover, .mobile-menu-toggle, .mobile-menu-toggle:hover,
.mobile-menu-toggle:focus, .menu-toggle, .custom-header, .carousel-nav button,
.glass-button, .highlight, .nav-btn::before, .mobile-loading-spinner,
.solution-category:hover, .signage-container:hover, .avantage-item:hover,
.solution-item:hover, .nav-button:hover {
  border-color:var(--xc-mauve) !important;
}
*:focus { outline-color:var(--xc-mauve) !important; }
.highlight { background:var(--xc-mauve-soft) !important; }

/* =====================================================================
   6) HÉROS : sous-titres / labels / cartes de stats
   ===================================================================== */
.hero .subtitle, .hero-subtitle, .hero-section .hero-subtitle,
.stats-grid .stat-label, .hero-section p { color:var(--xc-ink-soft) !important; }
.hero .mission-list li::before, .hero .highlight { color:var(--xc-mauve) !important; }
.stats-grid { border-top:1px solid var(--xc-line) !important; }
.stats-grid .stat-card { background:var(--xc-surface) !important; border:1px solid var(--xc-line) !important; box-shadow:0 8px 24px rgba(46,26,71,.08) !important; }
.stats-grid .stat-card:hover { background:#fff !important; border-color:var(--xc-mauve) !important; }
.stats-section { background:linear-gradient(135deg,#FFFCF8 0%,#F3ECE2 100%) !important; }

/* =====================================================================
   7) FOOTER / HEADER / NAV
   ===================================================================== */
footer { color:#fff !important; }
.footer-nav a { background:var(--xc-rouge) !important; color:#fff !important; box-shadow:0 4px 10px rgba(225,29,72,.30) !important; }
.footer-nav a:hover { background:var(--xc-rouge-dark) !important; }
.footer-nav a.map-link::after { background:var(--xc-signature) !important; }
.footer-logo a:hover img { filter:brightness(1.05) drop-shadow(0 0 10px var(--xc-mauve)) !important; }
header, .header, #header-container > *, .site-header, .custom-header, .nav-buttons { background:var(--xc-aubergine) !important; }
.nav-button { color:#fff !important; border-color:rgba(255,255,255,.14) !important; }
.nav-button:hover { background:rgba(124,58,237,.18) !important; color:#fff !important; }
.login-button { background:var(--xc-signature) !important; color:#fff !important; border-color:transparent !important; }
.login-button:hover { filter:brightness(1.06); color:#fff !important; }
.nav-btn::before { border-top-color:var(--xc-mauve) !important; border-right-color:var(--xc-mauve) !important; }
.skip-link { background:var(--xc-aubergine) !important; color:#fff !important; }

/* =====================================================================
   8) BULLE / BOUTON DE LANGUE (badge « EN » or)
   ===================================================================== */
.lang-toggle, .lang-toggle a, .lang-button, .lang-bubble-link, .mobile-lang-switch,
.language-switcher a { background:var(--xc-aubergine) !important; color:#fff !important; border-color:rgba(255,255,255,.5) !important; }
.lang-toggle a:hover, .lang-button:hover, .lang-bubble-link:hover, .mobile-lang-switch:hover { background:var(--xc-mauve) !important; color:#fff !important; }

/* =====================================================================
   9) PAGE DIRECTION (splitter) : violet -> mauve de marque ; contrôle reste sombre
   ===================================================================== */
.side-left { background:linear-gradient(135deg,#2E1A47 0%,#7C3AED 55%,#2E1A47 100%) !important; }

/* =====================================================================
   10) TEXTES SOMBRES résiduels (#0f0b1f) -> aubergine
   ===================================================================== */
.benefit-title, .guarantee-item h4, .platform-title, .info-card h4, .benefit-item h4,
.cta-heading, .btn-primary-cta, .certification-badge.certified, .section-heading,
.platform-advantage, .btn-secondary-cta { color:var(--xc-aubergine) !important; }

/* =====================================================================
   11) QUEUE QA — correctifs ciblés (inline + classes spécifiques)
   ---------------------------------------------------------------------
   Reste de la passe QA exhaustive : ce qui échappait aux groupes 1-10
   (couleurs OR dans des attributs style="" inline, héros « industries »
   à classe propre, titres clip-text qui ignorent `color`).
   ===================================================================== */

/* 11a. Boutons OR EN INLINE (fond plein) -> rouge.
        Sûr : ne matche PAS les dégradés clip-text (qui sont `background:linear-gradient`). */
[style*="background: #ffa91a"], [style*="background:#ffa91a"],
[style*="background: #ff8f00"], [style*="background:#ff8f00"],
[style*="background-color: #ffa91a"], [style*="background-color:#ffa91a"] {
  background:var(--xc-rouge) !important; color:#fff !important; border-color:transparent !important;
}

/* 11b. Titres clip-text OR EN INLINE (blanc->or, pensés fond sombre) -> dégradé signature */
[style*="-webkit-background-clip: text"][style*="#ffa91a"],
[style*="background-clip: text"][style*="#ffa91a"] {
  background:var(--xc-signature) !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* 11c. Bandeau héros « industries » (classe propre .gradient-hero/.hero-industries,
        était #0f0b1f->or) -> crème clair, titre en signature lisible */
.gradient-hero, .hero-industries {
  background:linear-gradient(135deg,#FAF7F2 0%,#F3ECE2 60%,#EDE6F7 100%) !important;
  color:var(--xc-aubergine) !important;
}
.gradient-hero .hero-title, .hero-industries .hero-title,
.gradient-hero h1, .hero-industries h1 {
  background:var(--xc-signature) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.gradient-hero .hero-subtitle, .hero-industries .hero-subtitle { color:var(--xc-ink-soft) !important; }

/* 11d. Titres « Nos Partenaires » clip-text or (connexion `.partners-section h2`,
        et variantes `.partenaires-section`) : le -webkit-text-fill ignore `color`,
        donc on les repasse explicitement en clip-text signature. */
.partners-section h2, .partenaires-section h2, .partenaires-section .section-title {
  background:var(--xc-signature) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* Barre d'accent or->orange (connexion) -> signature */
.section-divider, .accent-bar, .partners-section h2::after { background:var(--xc-signature) !important; }

/* =====================================================================
   12) QUEUE QA (suite) — contraste CTA + cartes « glass » sur fond clair
   ===================================================================== */
/* 12a-bis. BANDE CTA bas-de-page -> aubergine sombre (titre blanc + bouton rouge
        ressortent = « corporatif qui vend »). Remplace l'ancien dark->or codé en dur. */
.final-cta, .cta-section, .reservation-cta, .cta-band {
  background:var(--xc-dark) !important; color:#fff !important;
}
.final-cta p, .cta-section p, .reservation-cta p { color:rgba(255,255,255,.85) !important; }

/* 12a. Titre clip-text DANS une bande CTA déjà en dégradé signature
        -> blanc plein (sinon mauve-sur-mauve = illisible). Bat le groupe 1. */
.final-cta .section-title, .final-cta h2, .final-cta h3, .final-cta .cta-title,
.cta-section .section-title, .cta-section h2, .reservation-cta h2 {
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important; color:#fff !important;
}

/* 12b. Cartes « glass » (verre translucide pensé pour fond SOMBRE) :
        sur nos sections claires elles devenaient blanc-sur-blanc (grand vide).
        -> surface pleine crème, texte aubergine. Sûr aussi sur fond sombre. */
.applications-section { background:linear-gradient(135deg,#FFFCF8 0%,#F3ECE2 100%) !important; }
.application-card, .glass-card, .application-card.glass-card {
  background:var(--xc-surface) !important; border:1px solid var(--xc-line) !important;
  box-shadow:0 10px 30px rgba(46,26,71,.08) !important; color:var(--xc-aubergine) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.application-card h3, .application-card h4, .glass-card h3, .glass-card h4 { color:var(--xc-aubergine) !important; -webkit-text-fill-color:var(--xc-aubergine) !important; }
.application-card p, .glass-card p { color:var(--xc-ink-soft) !important; }
.application-card:hover, .glass-card:hover { border-color:var(--xc-mauve) !important; box-shadow:0 16px 40px rgba(124,58,237,.14) !important; }
