/* ───────────────────────────────────────────────────────────
   ConSAP Academy — Global responsive + font safety
   Loaded after the per-page <style> on every HTML page.
   Handles the cross-page concerns:
    1. Cross-browser font weights (Inter variable + numeric fallbacks)
    2. Universal box-sizing + image safety
    3. Mobile-nav breakpoint raised to 1024px (was 768px) so tablets
       and small laptops don't get the cropped navbar
    4. Last-resort horizontal-overflow guard on <html>/<body>
   ─────────────────────────────────────────────────────────── */

/* ── 1. Box-sizing & image safety ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas, picture {
  max-width: 100%;
  height: auto;
}
/* SVG icons that ship with explicit width/height should keep them */
svg[width][height] { height: revert; }

/* ── 2. Typography baseline ─────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The pages use `font-variation-settings: 'wght' N` everywhere.
   Variable axes are honored in modern Chrome/Edge/Opera/Firefox/Safari,
   but a few engines (older Firefox, some embedded WebViews) ignore the
   axis until a matching `font-weight` is also set. Pair the two so every
   browser renders the intended weight even when the variation axis
   isn't applied. The CSS Fonts spec maps numeric `font-weight` to the
   weight axis automatically on variable fonts. */
[style*="'wght' 350"],[style*="\"wght\" 350"]      { font-weight: 350; }
[style*="'wght' 400"],[style*="\"wght\" 400"]      { font-weight: 400; }
[style*="'wght' 450"],[style*="\"wght\" 450"]      { font-weight: 450; }
[style*="'wght' 500"],[style*="\"wght\" 500"]      { font-weight: 500; }
[style*="'wght' 540"],[style*="\"wght\" 540"]      { font-weight: 540; }
[style*="'wght' 550"],[style*="\"wght\" 550"]      { font-weight: 550; }
[style*="'wght' 600"],[style*="\"wght\" 600"]      { font-weight: 600; }
[style*="'wght' 620"],[style*="\"wght\" 620"]      { font-weight: 620; }
[style*="'wght' 640"],[style*="\"wght\" 640"]      { font-weight: 640; }
[style*="'wght' 650"],[style*="\"wght\" 650"]      { font-weight: 650; }
[style*="'wght' 680"],[style*="\"wght\" 680"]      { font-weight: 680; }
[style*="'wght' 700"],[style*="\"wght\" 700"]      { font-weight: 700; }
[style*="'wght' 720"],[style*="\"wght\" 720"]      { font-weight: 720; }
[style*="'wght' 750"],[style*="\"wght\" 750"]      { font-weight: 750; }
[style*="'wght' 760"],[style*="\"wght\" 760"]      { font-weight: 760; }
[style*="'wght' 780"],[style*="\"wght\" 780"]      { font-weight: 780; }
[style*="'wght' 800"],[style*="\"wght\" 800"]      { font-weight: 800; }
[style*="'wght' 820"],[style*="\"wght\" 820"]      { font-weight: 820; }

/* Inputs, selects and buttons sometimes inherit a UA font instead of Inter. */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

/* ── 3. Navbar responsive layout ──────────────────────────
   Three viewport bands:
     <  1024 px  → hamburger + mobile drawer (no desktop nav fits)
     1024–1279   → compact desktop nav (shrunk paddings, condensed CTAs,
                   one secondary link folded into the mobile drawer)
     ≥  1280 px  → full desktop nav at default sizing

   Intrinsic widths of the full desktop nav at default sizing total
   ≈ 1250 px (logo+padding ≈ 100, nav links ≈ 794, right CTAs ≈ 356),
   so 1024–1279 needs the compact mode below to fit without cropping. */

/* (a) Below 1024 px → mobile layout. */
@media (max-width: 1023px) {
  .nav-desktop-wrap { display: none !important; }
  .nav-cta-wrap > *:not(.mob-menu-btn) { display: none !important; }
  .mob-menu-btn { display: flex !important; }
  .nav-cta-wrap { margin-left: auto !important; }
}

/* (b) 1024–1319 px → compact desktop nav. The full nav at default
   sizing is ~1250 px wide; the navbar's inner container has 24 px of
   padding on each side, so it needs at least 1298 px viewport (1250
   + 48) to render without cropping. Use the compact mode below 1320.
   Fold the longest secondary link (Offre Entreprise) into the
   hamburger drawer here — it stays reachable from the footer. */
@media (min-width: 1024px) and (max-width: 1319px) {
  /* Page-level body padding contributes to the navbar's container —
     tighten it so the nav has more room. */
  nav > div { padding: 0 16px !important; gap: 4px !important; }
  .nav-desktop-wrap { gap: 0 !important; }
  .nav-desktop-wrap .nav-btn,
  .nav-desktop-wrap .nav-link {
    padding: 8px 7px !important;
    font-size: 12.5px !important;
  }
  .nav-desktop-wrap .nav-link[data-i18n="nav.link.enterprise"] {
    display: none !important;
  }
  .nav-cta-wrap { gap: 6px !important; }
  .nav-cta-wrap .btn { padding: 7px 10px !important; font-size: 12px !important; }
  /* Hide the FR/EN label next to the language icon — flag still shows. */
  #lang-btn-label { display: none !important; }
  #lang-btn { gap: 2px !important; padding: 6px 8px !important; }
}

/* The mobile drawer is positioned `fixed; top: 64px`. It must respect
   the navbar height even when the navbar wraps onto a second line on
   the smallest phones — keep navbar single-line. */
nav > div {
  flex-wrap: nowrap;
  min-width: 0;
}

/* Logo column should shrink before the CTA column does on tiny phones. */
nav a img { flex-shrink: 1; }

/* ── 4. Horizontal-overflow safety ──────────────────────── */
html, body {
  max-width: 100vw;
  overflow-x: clip;            /* modern: clips without disabling sticky */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Sections sometimes contain absolutely-positioned decorative orbs that
   extend past the section edge. Each section already declares
   `overflow: hidden` inline, but reinforce as a fallback so a missed
   declaration on a future section doesn't break the page. */
section { position: relative; }

/* ── 5. RTL polish ──────────────────────────────────────── */
html[dir="rtl"] .nav-cta-wrap {
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* ──────────────────────────────────────────────────────────
   6. FAQ accordion (shared across all pages with an FAQ)
   ──────────────────────────────────────────────────────────
   Pages can theme the accent color by setting `--faq-accent`
   on a wrapping element. Default is the brand primary (cyan).
   Example: `<div style="--faq-accent: var(--purple);">…</div>`
   on the pricing page so the open icon turns purple.
─────────────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid #eef5f8; }
.faq-item:first-child { border-top: 1px solid #eef5f8; }
.faq-trigger {
  width: 100%; background: none; border: none; text-align: left;
  padding: 24px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: 'Inter', sans-serif;
}
.faq-trigger:hover .faq-q { color: var(--faq-accent, var(--primary, #2fb2de)); }
.faq-q {
  font-size: 16px; font-variation-settings: "wght" 640; color: var(--dark, #0f172a);
  line-height: 1.4; transition: color 0.2s;
}
.faq-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--light, #e0f6fd);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.faq-item.open .faq-icon {
  background: var(--faq-accent, var(--primary, #2fb2de));
  transform: rotate(45deg);
}
.faq-item.open .faq-icon svg { stroke: #fff; }
.faq-body {
  overflow: hidden; max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), padding 0.3s ease;
}
.faq-body-inner {
  font-size: 15px; color: #4b6775; line-height: 1.75;
  padding-bottom: 24px; padding-right: 48px;
}
/* Generous max-height so multi-paragraph answers don't get clipped */
.faq-item.open .faq-body { max-height: 800px; }
