/* ==========================================================================
   B&G Ingénierie — Design Tokens
   Analyse · Conseil · Stratégie
   ========================================================================== */

/* Inter est chargé via <link rel="preconnect"> + <link> dans chaque page HTML
   (plus rapide qu'un @import en cascade depuis cette feuille). */

:root {
  /* ---------------------------------------------------------------
     COLORS — Brand
     Drawn from the logo. The wordmark uses a deep navy → sky-blue
     vertical gradient, with an orange accent on the slogan and the
     rising arrow ribbon.
     --------------------------------------------------------------- */

  /* Primary — Blues */
  --bg-navy-900:      #0E2A6B;  /* Deepest blue — "INGENIERIE" base */
  --bg-navy-800:      #1B3A8A;  /* Navy primary — headings, buttons */
  --bg-blue-700:      #1E5BC6;  /* Mid brand blue */
  --bg-blue-600:      #2E86E0;  /* Linkable blue */
  --bg-sky-500:       #2BB7E8;  /* Top of "B&G" gradient */
  --bg-sky-400:       #5CCDF2;  /* Light cyan accent */

  /* Accent — Orange (the upward arrow + slogan) */
  --bg-orange-700:    #D85A1A;
  --bg-orange-600:    #EE7126;  /* Brand orange — slogan color */
  --bg-orange-500:    #F4933D;
  --bg-orange-300:    #FBC68C;
  --bg-orange-100:    #FFEBD6;

  /* Neutrals — cool greys, public-sector serious */
  --bg-ink:           #0B1530;  /* Near-black, slightly blue */
  --bg-graphite:      #1F2A44;
  --bg-slate-700:     #3A4661;
  --bg-slate-500:     #6B7591;
  --bg-slate-400:     #9AA3BC;
  --bg-slate-300:     #C5CCDD;
  --bg-slate-200:     #E2E6F0;
  --bg-slate-100:     #F1F4FA;
  --bg-paper:         #F8FAFD;
  --bg-white:         #FFFFFF;

  /* Warm editorial surfaces — the live built palette (cream direction).
     These are the values actually used across the pages; the cool
     --bg-paper above is kept for token-system reference only. */
  --bg-cream:         #FBF8F2;  /* page background (editorial) */
  --bg-cream-soft:    #FAF7F0;  /* alt cream panel */
  --bg-border-warm:   #ECE5D6;  /* hairlines on cream surfaces */
  --bg-orange-deep:   #C2540A;  /* dark orange — emphasis text, dots */

  /* Semantic */
  --bg-success:       #1F8A5B;
  --bg-warning:       #E0A100;
  --bg-danger:        #C53030;
  --bg-info:          var(--bg-blue-600);

  /* Brand gradients */
  --bg-gradient-brand:
    linear-gradient(180deg, #2BB7E8 0%, #1E5BC6 55%, #0E2A6B 100%);
  --bg-gradient-brand-h:
    linear-gradient(90deg, #0E2A6B 0%, #1E5BC6 55%, #2BB7E8 100%);
  --bg-gradient-orange:
    linear-gradient(135deg, #F4933D 0%, #EE7126 60%, #D85A1A 100%);
  --bg-gradient-soft:
    linear-gradient(180deg, #F8FAFD 0%, #E2E6F0 100%);

  /* Foreground / background semantic */
  --fg1:              var(--bg-ink);          /* primary text */
  --fg2:              var(--bg-slate-700);    /* secondary text */
  --fg3:              var(--bg-slate-500);    /* tertiary / captions */
  --fg-on-brand:      #FFFFFF;
  --fg-link:          var(--bg-blue-700);
  --fg-accent:        var(--bg-orange-600);

  --surface-1:        var(--bg-white);        /* cards */
  --surface-2:        var(--bg-cream);        /* page bg (editorial cream) */
  --surface-3:        var(--bg-cream-soft);   /* subtle panels */
  --surface-brand:    var(--bg-navy-800);     /* dark/brand panels */
  --surface-overlay:  rgba(11, 21, 48, 0.55);

  --border-1:         var(--bg-border-warm);  /* hairlines on cream */
  --border-2:         var(--bg-slate-300);
  --border-strong:    var(--bg-slate-500);

  /* ---------------------------------------------------------------
     TYPOGRAPHY
     Display + headings: Georgia (classic serif, matches the live
     Elementor settings — institutional weight). Body: Inter for screen
     legibility at long reading lengths.
     --------------------------------------------------------------- */
  --font-display:  'Georgia', 'Times New Roman', Cambria, serif;            /* Headings (Elementor: Titres) */
  --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;             /* Body copy */
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Elementor type scale (verified against the live site) */
  --titre-1: 48px;   --titre-1-lh: 1.4em;
  --titre-2: 38px;   --titre-2-lh: 1.3em;
  --titre-3: 30px;   --titre-3-lh: 1.3em;
  --titre-4: 24px;   --titre-4-lh: 1.2em;
  --titre-5: 21px;   --titre-5-lh: 1.2em;
  --titre-6: 17px;   --titre-6-lh: 1.25em;

  /* Type scale (1.25 minor third, public-sector calm) */
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   38px;
  --text-5xl:   48px;
  --text-6xl:   60px;
  --text-7xl:   76px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* slogan-style */

  /* ---------------------------------------------------------------
     SPACING (4px base)
     --------------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Radii — moderate, professional */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows — subtle, never flashy */
  --shadow-xs: 0 1px 2px rgba(14, 42, 107, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 42, 107, 0.08);
  --shadow-md: 0 6px 18px rgba(14, 42, 107, 0.10);
  --shadow-lg: 0 16px 40px rgba(14, 42, 107, 0.14);
  --shadow-brand: 0 12px 32px rgba(30, 91, 198, 0.28);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================== */

.bg-display, .bg-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--titre-1);
  line-height: var(--titre-1-lh);
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.bg-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--titre-2);
  line-height: var(--titre-2-lh);
  color: var(--fg1);
}

.bg-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--titre-3);
  line-height: var(--titre-3-lh);
  color: var(--fg1);
}

.bg-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--titre-4);
  line-height: var(--titre-4-lh);
  color: var(--fg1);
}

.bg-h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--titre-5);
  line-height: var(--titre-5-lh);
  color: var(--fg1);
}

.bg-h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--titre-6);
  line-height: var(--titre-6-lh);
  color: var(--fg1);
}

.bg-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bg-orange-600);
}

.bg-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bg-orange-600);
}

.bg-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.bg-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.bg-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.bg-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--fg3);
}

.bg-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Brand gradient text — for hero "B&G" treatment */
.bg-grad-text {
  background: var(--bg-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}