/**
 * ================================================================
 * FROGGY NETWORK — CHARTE V2.1 THEME PACK
 * Overlay qui remappe les tokens v1 sur les tokens v2.1 officiels
 * (Geist + JetBrains Mono, palette ink/green/cyan, 3 rayons, WCAG AA)
 *
 * Source : charte-froggy-v2.1.pdf § 14 (Tokens CSS)
 * A inclure APRES froggy-tokens.css et guardian.css
 * ================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     TOKENS V2.1 OFFICIELS (§ 14 charte)
     ============================================================ */

  /* Encre & fonds */
  --ink:            #0a1f14;
  --ink-2:          #1e3a2a;
  --ink-3:          #4a6b58;
  --ink-on-dark:    #f4faf6;
  --ink-on-dark-2:  #c8dfd2;
  --ink-on-dark-3:  #7e9c8b;
  --bg:             #f4faf6;
  --bg-card:        #ffffff;
  --bg-dark:        #0a1f14;

  /* Vert Froggy */
  --green:          #22c55e;
  --green-2:        #15803d;
  --green-3:        #4ade80;
  --green-soft:     #dcfce7;
  --green-glow:     rgba(34,197,94,.35);

  /* Cyan */
  --cyan:           #6ec1e4;
  --cyan-2:         #0ea5e9;
  --cyan-soft:      #cffafe;

  /* Filets */
  --rule:           rgba(10,31,20,.10);
  --rule-strong:    rgba(10,31,20,.22);
  --rule-on-dark:   rgba(244,250,246,.10);

  /* Ombres */
  --shadow-sm:  0 1px 2px rgba(10,31,20,.04);
  --shadow-md:  0 1px 2px rgba(10,31,20,.04), 0 8px 24px rgba(10,31,20,.06);
  --shadow-lg:  0 1px 2px rgba(10,31,20,.04), 0 12px 30px -14px rgba(10,31,20,.12);
  --shadow-cta: 0 22px 54px -20px rgba(34,197,94,.545),
                inset 0 1px 0 rgba(255,255,255,.125);
  --shadow-dark: 0 18px 40px -22px rgba(0,0,0,.7),
                 inset 0 1px 0 rgba(255,255,255,.06);

  /* Rayons v2.1 : 3 rayons + pill */
  --r-sm:   8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-pill: 999px;

  /* Typos v2.1 : 2 familles */
  --f-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* ============================================================
     REMAPPING DES TOKENS V1 SUR LES TOKENS V2.1
     Permet aux styles existants (froggy-components.css, guardian.css)
     de rendre avec la nouvelle charte sans réécriture.
     ============================================================ */

  --fn-navy:          var(--ink);
  --fn-navy-dark:     #061a0d;
  --fn-navy-light:    var(--ink-2);
  --fn-navy-alpha10:  rgba(10,31,20,.10);
  --fn-navy-alpha20:  rgba(10,31,20,.20);
  --fn-navy-alpha50:  rgba(10,31,20,.50);

  --fn-teal:          var(--green);
  --fn-teal-dark:     var(--green-2);
  --fn-teal-mid:      var(--green-3);
  --fn-teal-light:    var(--green-soft);
  --fn-teal-alpha10:  rgba(34,197,94,.10);
  --fn-teal-alpha20:  rgba(34,197,94,.20);

  --fn-body:          var(--ink);
  --fn-gray:          var(--ink-3);
  --fn-gray-light:    #7e9c8b;
  --fn-white:         var(--bg-card);
  --fn-off-white:     var(--bg);
  --fn-border:        var(--rule);

  --fn-critique:      #ef4444;
  --fn-eleve:         #f59e0b;
  --fn-moyen:         #d4ac0d;
  --fn-ok:            var(--green-2);
  --fn-info:          var(--cyan-2);

  --fn-surface-bg:      var(--bg-card);
  --fn-surface-card:    var(--bg-card);
  --fn-surface-subtle:  var(--bg);
  --fn-surface-border:  var(--rule);
  --fn-text-primary:    var(--ink);
  --fn-text-secondary:  var(--ink-3);

  --fn-font-display:  var(--f-display);
  --fn-font-body:     var(--f-sans);
  --fn-font-mono:     var(--f-mono);
  --fn-font-spinc:    var(--f-display);
  --fn-font-segoe:    var(--f-sans);
  --fn-font-noto:     var(--f-mono);

  --g-font-display:   var(--f-display);

  --fn-shadow-sm:     var(--shadow-sm);
  --fn-shadow-md:     var(--shadow-md);
  --fn-shadow-lg:     var(--shadow-lg);
}

/* ============================================================
   RESET GLOBAL FONT + COLOR
   ============================================================ */
html, body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Force Geist partout (les composants v1 utilisent DM Sans/Fraunces) */
body, p, li, td, th, a, span, label, input, select, textarea, button {
  font-family: var(--f-sans);
}

h1, h2, h3, h4, h5, h6,
.g-hero-title, .g-hero-title .g-accent,
.fn-section-title, .fn-hero-title {
  font-family: var(--f-display) !important;
  letter-spacing: -0.4px;
  font-weight: 600;
}
h1, .g-hero-title { letter-spacing: -1.5px; font-weight: 500; }

.g-hero-title .g-accent { color: var(--green-3) !important; }

/* Petits labels/eyebrows en mono */
.fn-section-tag, .g-eyebrow, [class*="eyebrow"],
.g-tab-num, .g-sla-card-name, .g-kit-cat, .g-price-num {
  font-family: var(--f-mono);
}

/* ============================================================
   MOTIF DOT-GRID SIGNATURE (fond sombre)
   ============================================================ */
.fn-hero, .g-hero-cinematic, .fn-cta-section, .g-panel-hero {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(34,197,94,.15) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(110,193,228,.10) 0, transparent 40%),
    radial-gradient(circle, rgba(110,193,228,.35) 1.5px, transparent 2px);
  background-size: auto, auto, 24px 24px;
  background-color: var(--ink);
}

/* ============================================================
   BOUTONS V2.1
   ============================================================ */
.fn-btn {
  font-family: var(--f-sans);
  font-weight: 600;
  border-radius: var(--r-pill) !important;
  border: 0;
  transition: transform .15s, box-shadow .15s;
  letter-spacing: 0;
}
.fn-btn-primary {
  background: var(--green) !important;
  color: #061a0d !important;
  box-shadow: var(--shadow-cta);
}
.fn-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 26px 60px -20px rgba(34,197,94,.7), inset 0 1px 0 rgba(255,255,255,.2);
  background: var(--green) !important;
}
.fn-btn-secondary {
  background: var(--ink) !important;
  color: var(--ink-on-dark) !important;
  border-radius: 12px !important;
}
.fn-btn-secondary:hover { background: var(--ink-2) !important; color: var(--ink-on-dark) !important; }
.fn-btn-white {
  background: var(--bg-card) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  border: 1px solid var(--rule-strong);
}
.fn-btn-white:hover { background: var(--bg) !important; }

/* ============================================================
   NAVIGATION + CARDS
   ============================================================ */
.fn-nav {
  background: rgba(244,250,246,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.fn-nav a { color: var(--ink); font-family: var(--f-sans); }
.fn-nav a.active, .fn-nav a:hover { color: var(--green-2); }

.fn-card, .g-panel, .g-sla-card, .g-kit-card, .g-pillar-card, .g-partner-card, .g-usecase-card, .g-price-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
/* Textes hérités dans les cards : reset explicite si section parent est dark */
.g-pillars-section .g-pillar-card,
.g-pillars-section .g-pillar-card .g-pillar-title,
.g-pillars-section .g-pillar-card .g-pillar-desc,
.g-pillars-section .fn-card,
.g-pillars-section .fn-card .fn-card-title,
.g-pillars-section .fn-card .fn-card-body {
  color: var(--ink);
}

/* Sections light (seulement les sections neutres, pas les grandes sections v1 dark) */
.g-content-section, main {
  background: var(--bg);
}
/* Toutes les autres sections gardent leur background d'origine v1.
   On force juste les sections neutres non-hero à avoir un fond clair par défaut si aucun override. */
section.fn-section:not([style*="background"]):not(.fn-hero):not(.g-hero-cinematic):not(.fn-cta-section):not(.g-panel-hero):not(.g-page-hero):not(.g-final-cta-section) {
  background: var(--bg);
}

/* Heros et CTA sombres v1 (garder fond navy) */
.g-page-hero {
  background: var(--ink) !important;
  color: var(--ink-on-dark);
}
.g-final-cta-section {
  background: var(--ink) !important;
  color: var(--ink-on-dark);
}
.g-final-cta-section .g-final-cta-title,
.g-page-hero .g-page-hero-title,
.g-page-hero .g-hero-eyebrow {
  color: var(--ink-on-dark) !important;
}
.g-final-cta-section .g-final-cta-desc {
  color: var(--ink-on-dark-2) !important;
}

/* ============================================================
   BADGES / PILLS V2.1
   ============================================================ */
.fn-badge, .g-badge, .g-status-badge {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.g-badge-up, .fn-badge-ok { background: rgba(34,197,94,.14); color: var(--green-2); }
.g-badge-warn { background: rgba(245,158,11,.14); color: #b45309; }
.g-badge-down { background: rgba(239,68,68,.14); color: #b91c1c; }
.g-chip { background: var(--green-soft); color: var(--green-2); text-transform: none; font-family: var(--f-sans); font-size: 13px; }

/* ============================================================
   METRICS / KPI CARDS
   ============================================================ */
.g-kpi-value, .g-metric-value, .g-sla-card-metric {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.g-kpi-label, .g-metric-label {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}

/* ============================================================
   TABLES
   ============================================================ */
.g-price-table th, .fn-table th {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 500;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 14px 22px;
  text-align: left;
}
.g-price-table td { border-bottom: 1px solid var(--rule); padding: 14px 22px; }
.g-price-num { font-family: var(--f-mono); color: var(--green-2); font-weight: 500; }

/* ============================================================
   TABS DASHBOARD (business plateforme)
   ============================================================ */
.g-tabs { gap: 6px; border-bottom: 1px solid var(--rule); }
.g-tab {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
}
.g-tab:hover { color: var(--ink); background: var(--bg); }
.g-tab.active { color: var(--green-2); border-bottom-color: var(--green); background: var(--green-soft); }
.g-tab-num {
  font-family: var(--f-mono) !important;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-right: 6px;
  letter-spacing: .05em;
}
.g-tab.active .g-tab-num { color: var(--green-2); }

/* ============================================================
   ACCESSIBILITÉ CTA (WCAG AA, ratio 7.94:1 sur #22C55E, AAA)
   ============================================================ */
.btn-primary, .fn-btn-primary { color: #061a0d; }

/* ============================================================
   FOOTER v2.1
   ============================================================ */
footer, .fn-footer {
  background: var(--ink);
  color: var(--ink-on-dark-2);
  background-image: radial-gradient(circle, rgba(110,193,228,.15) 1.5px, transparent 2px);
  background-size: 24px 24px;
}
footer a, .fn-footer a { color: var(--ink-on-dark); }
footer a:hover, .fn-footer a:hover { color: var(--green-3); }

/* ============================================================
   BADGE VERSION v2.1
   ============================================================ */
.g-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green-2);
  background: var(--green-soft);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.g-version-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}