/* ============================================================
   charte-syaga-audit.css — Alignement syaga.fr sur la charte SYAGA Audit (thème CLAIR)
   Lié EN DERNIER dans chaque page -> remappe les variables existantes
   (--navy/--blue/--green/--orange/--gray/--dark/--light/--white...) vers la
   charte claire, + corrige les surfaces sombres (héros, en-têtes, footers).
   Source de vérité unique pour les 22 pages. 24/06/2026.
   ============================================================ */

:root {
  /* Charte SYAGA Audit (clair) */
  --vg-bg:       #f6f8fb;
  --vg-surface:  #ffffff;
  --vg-ink:      #0f172a;
  --vg-body:     #334155;
  --vg-muted:    #64748b;
  --vg-line:     #e6e9f0;
  --vg-graphite: #111827;
  --vg-graphite-h:#1f2937;
  --vg-teal:     #0d9488;
  --vg-teal-d:   #0f766e;
  --vg-danger:   #e5484d;
  --vg-warn:     #f59e0b;
  --vg-ok:       #12805c;

  /* Remap du schéma historique syaga.fr -> charte claire */
  --navy:     #0f172a;
  --dark:     #0f172a;
  --blue:     #0d9488;
  --ms-blue:  #0d9488;
  --green:    #0d9488;
  --teal:     #0d9488;
  --purple:   #0d9488;
  --orange:   #f59e0b;
  --amber:    #f59e0b;
  --red:      #e5484d;
  --crimson:  #e5474d;
  --red-light:#fdecec;
  --gray:     #64748b;
  --light:    #f6f8fb;
  --white:    #ffffff;
}

/* Base claire */
html, body { background: var(--vg-bg) !important; color: var(--vg-body); }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

/* En-têtes / barres sombres -> graphite */
.top-bar, header.dark, .navbar-dark { background: var(--vg-graphite) !important; }
header { background: var(--vg-surface); }
.logo, .brand { color: var(--vg-ink) !important; }

/* Héros : neutralise les dégradés sombres -> clair, texte encre, accent teal */
.hero, .hero-section, [class*="hero"] {
  background: linear-gradient(135deg, #ffffff 0%, #f6f8fb 55%, #eef2f7 100%) !important;
  color: var(--vg-ink) !important;
}
.hero h1, .hero h2, .hero-section h1 { color: var(--vg-ink) !important; }
.hero h1 span, .hero .accent { color: var(--vg-teal) !important; }
.hero p, .hero-section p { color: var(--vg-body) !important; opacity: 1 !important; }
.hero-badge, .badge-hero { background: #f0fdf9 !important; border: 1px solid #99f6e4 !important; color: var(--vg-teal-d) !important; }
.hero-kpi .val, .kpi .val { color: var(--vg-ink) !important; }
.hero-kpi .lbl, .kpi .lbl { color: var(--vg-muted) !important; }

/* Boutons : primaire = graphite, secondaire = contour clair */
.btn-primary, .btn-header, .btn-cta, button.primary {
  background: var(--vg-graphite) !important; color: #fff !important; border: none !important;
}
.btn-primary:hover, .btn-header:hover, .btn-cta:hover { background: var(--vg-graphite-h) !important; }
.btn-secondary, .btn-ghost, .btn-outline {
  background: transparent !important; color: var(--vg-ink) !important; border: 2px solid #cbd5e1 !important;
}
.btn-secondary:hover, .btn-ghost:hover { background: #f1f5f9 !important; color: var(--vg-ink) !important; }

/* Titres de sections, sous-titres */
.section-title, h2.section-title { color: var(--vg-ink) !important; }
.section-sub, .section-subtitle { color: var(--vg-muted) !important; }
.section-alt, .section-light { background: var(--vg-surface) !important; }

/* Cartes / surfaces */
.card, .service-card, .price-card, .report-card, .feature-card {
  background: var(--vg-surface) !important; border: 1px solid var(--vg-line) !important;
}
.service-card .icon, .feature-card .icon { background: #f0fdf9 !important; color: var(--vg-teal) !important; }
.card h3, .card h4, .service-card h4, .step h4 { color: var(--vg-ink) !important; }

/* Étapes / numéros */
.step-num, .badge-num { background: var(--vg-teal) !important; color: #fff !important; }

/* Tables */
.comparison th, table thead th { background: var(--vg-graphite) !important; color: #fff !important; }

/* Footer : graphite clair-lisible */
footer, .footer, .cta-section {
  background: var(--vg-graphite) !important; color: #e6e9f0 !important;
}
footer a, .footer a { color: rgba(255,255,255,.78) !important; }
footer a:hover { color: #fff !important; }
.cta-section { background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important; }

/* Liens accent */
a.accent, .link-accent { color: var(--vg-teal) !important; }


/* ============================================================
   CONTINUITE SYAGA Audit — neutralisation des classes criardes syaga.fr
   Calque les composants sur le systeme SYAGA Audit clair (site/syaga-audit-site.css) :
   boutons graphite/ghost, cartes blanches radius 14, pills #eef2f7, accent teal.
   Ajout 24/06/2026 — objectif : continuite totale syaga.fr <-> SYAGA Audit.
   ============================================================ */

/* ---- HERO : fond clair, surlignages teal ---- */
.hero { background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%) !important; color: var(--vg-body) !important; border-bottom: 1px solid var(--vg-line); }
.hl-blue, .hl-green { color: var(--vg-teal) !important; background: none !important; -webkit-text-fill-color: var(--vg-teal) !important; }
.hero-kpi-value { color: var(--vg-ink) !important; }
.hero-kpi-label { color: var(--vg-muted) !important; }

/* ---- EN-TETES DE CARTES : tous les degrades -> aplat blanc + texte encre ---- */
.product-card-header,
.product-card-header.blue-grad, .product-card-header.purple-grad, .product-card-header.orange-grad,
.product-card-header.crimson-grad, .product-card-header.red-grad, .product-card-header.navy-grad,
.product-card-header.green-grad, .product-card-header[style] {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--vg-line) !important;
}
.product-card-header h3 { color: var(--vg-ink) !important; }
.product-card-header p { color: var(--vg-muted) !important; }

/* ---- CARTES : surface blanche, fine barre teal en haut, ombre douce ---- */
.product-card,
.product-card.purple-accent, .product-card.orange-accent, .product-card.crimson-accent,
.product-card.red-accent, .product-card.green-accent, .product-card.navy-accent {
  background: var(--vg-surface) !important;
  border: 1px solid var(--vg-line) !important;
  border-top: 3px solid var(--vg-teal) !important;
  border-radius: var(--vg-radius, 14px) !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.08) !important;
}
.product-card:hover { box-shadow: 0 10px 30px rgba(16,24,40,.08) !important; transform: translateY(-4px); }
.product-mini-kpi { background: #eef2f7 !important; color: var(--vg-body) !important; border: none !important; }

/* ---- BADGES CATEGORIE + pilules diverses -> pill SYAGA Audit ---- */
.category-badge, .category-badge.audit, .category-badge.docs, .category-badge.protect,
.standard-badge, .badge-coming {
  background: #eef2f7 !important; color: var(--vg-body) !important;
  border: 1px solid var(--vg-line) !important; border-radius: 99px !important;
}
.category-line { background: var(--vg-line) !important; }

/* ---- BOUTONS : .btn-green = action forte (graphite) ; reste = ghost ---- */
.btn-green {
  background: var(--vg-graphite) !important; color: #ffffff !important;
  border: 1px solid transparent !important; box-shadow: 0 1px 3px rgba(16,24,40,.08) !important;
}
.btn-green:hover { background: var(--vg-graphite-h) !important; }
.btn-blue, .btn-purple, .btn-orange, .btn-navy, .btn-crimson, .btn-red,
.btn-outline, .btn-white-outline {
  background: var(--vg-surface) !important; color: var(--vg-ink) !important;
  border: 1px solid var(--vg-border-strong, #cbd5e1) !important; box-shadow: none !important;
}
.btn-blue:hover, .btn-purple:hover, .btn-orange:hover, .btn-navy:hover,
.btn-crimson:hover, .btn-red:hover, .btn-outline:hover, .btn-white-outline:hover {
  border-color: var(--vg-teal) !important; color: var(--vg-teal-d) !important;
}

/* ---- SECTION SOUVERAINETE : sombre -> claire ---- */
.souv-teaser { background: var(--vg-surface) !important; color: var(--vg-body) !important;
  border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
.souv-teaser h2, .souv-teaser strong { color: var(--vg-ink) !important; }
.souv-teaser p, .souv-score-txt { color: var(--vg-muted) !important; }
.souv-score-num, .souv-kpi-val { color: var(--vg-teal) !important; }
.souv-kpi-lbl { color: var(--vg-muted) !important; }
.souv-table { color: var(--vg-body) !important; }
.souv-table th { background: #f1f5f9 !important; color: var(--vg-ink) !important; }
.souv-table td { border-color: var(--vg-line) !important; }
.s-check { color: var(--vg-ok, #12805c) !important; }
.s-cross { color: var(--vg-muted) !important; }

/* ---- AVATARS EQUIPE : pastilles couleur -> teal discret ---- */
.team-avatar, .team-avatar.av-blue, .team-avatar.av-green, .team-avatar.av-orange {
  background: #f0fdf9 !important; color: var(--vg-teal-d) !important;
}

/* ---- LOGO : "365" / accents en teal (continuite marque) ---- */
.logo b, .brand b { color: var(--vg-teal) !important; }

/* ============================================================
   SIGNATURE DE MARQUE sous le logo — declinaison site-wide (24/06)
   1 regle => apparait sur toutes les pages liant cette charte
   (toute page avec header .logo). Triple-consensus IA.
   ============================================================ */
header .logo, .header-content .logo { flex-wrap: wrap; align-items: baseline; }
header .logo::after, .header-content .logo::after {
  content: "La preuve avant la parole.";
  display: block; width: 100%;
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--vg-muted) !important; margin-top: 2px;
  text-transform: none; white-space: nowrap;
}

/* ============================================================
   TYPOGRAPHIE AMPLE — montee en gamme "classe mondiale" (24/06)
   Cible les classes partagees (hero / titres de section).
   ============================================================ */
.hero h1 { font-size: clamp(38px, 5vw, 60px) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; font-weight: 700 !important; }
.hero-subtitle { font-size: 18px !important; line-height: 1.6 !important; max-width: 680px; margin-left: auto !important; margin-right: auto !important; color: var(--vg-body) !important; }
.section-title { font-size: clamp(28px, 3.4vw, 38px) !important; line-height: 1.15 !important; letter-spacing: -0.012em !important; color: var(--vg-ink) !important; }
.section-subtitle { font-size: 17px !important; line-height: 1.6 !important; color: var(--vg-muted) !important; max-width: 720px; margin-left: auto; margin-right: auto; }
.section { padding-top: 72px !important; padding-bottom: 72px !important; }
.hero { padding-top: 64px !important; padding-bottom: 84px !important; }

/* ============================================================
   HARMONISATION PROFONDE (25/06) — classes produit non couvertes
   Aligne cartes & boutons restants sur le rendu accueil.
   ============================================================ */

/* Cartes additionnelles -> meme surface blanche / bord / radius / ombre */
.feature-box, .problem-card, .brick-card, .doc-card, .pillar-card, .step-card, .formula-card {
  background: var(--vg-surface) !important;
  border: 1px solid var(--vg-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.05) !important;
}
.feature-box h3, .feature-box h4, .problem-card h3, .problem-card h4,
.brick-card h4, .doc-card h3, .pillar-card h3 { color: var(--vg-ink) !important; }
.feature-box p, .problem-card p, .brick-card p, .doc-card p, .pillar-card p { color: var(--vg-muted) !important; }
.pillar-card { border-top: 3px solid var(--vg-teal) !important; }
.pillar-icon, .feature-box .icon, .problem-card .icon, .brick-num {
  background: #f0fdf9 !important; color: var(--vg-teal-d) !important;
}

/* Cartes de prix : surface blanche, palier mis en avant = bord teal */
.price-card, .formula-card { border-radius: 14px !important; box-shadow: 0 1px 3px rgba(16,24,40,.05) !important; }
.price-card.featured, .formula-card.featured, .price-card.popular, .price-card.highlight {
  border-top: 3px solid var(--vg-teal) !important;
}
.price-amount, .formula-price { color: var(--vg-ink) !important; }

/* Boutons de prix -> meme systeme : principal graphite, autres ghost clair */
.btn-price-primary { background: var(--vg-graphite) !important; color: #fff !important; border: none !important; }
.btn-price-primary:hover { background: var(--vg-graphite-h) !important; }
.btn-price:not(.btn-price-primary) {
  background: var(--vg-surface) !important; color: var(--vg-ink) !important; border: 1px solid #cbd5e1 !important;
}
.btn-price:not(.btn-price-primary):hover { border-color: var(--vg-teal) !important; color: var(--vg-teal-d) !important; }

/* Rayon + graisse uniformes sur TOUS les boutons */
.btn, .btn-primary, .btn-secondary, .btn-green, .btn-price, .btn-price-primary,
.btn-submit, .btn-header, .btn-cta, .btn-outline {
  border-radius: 10px !important; font-weight: 600 !important;
}