/*
 * VIP Belote redesign 2026: shared base (font, tokens, Divi header + footer).
 * Loaded on redesigned pages (body.vb-redesign) and, when the sitewide layer is on, everywhere (body.vb-site).
 */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette (from the current vipbelote.fr) */
  --vb-navy-950: #060f2e;
  --vb-navy-900: #0a1a4a;
  --vb-navy: #0e2563;
  --vb-blue: #0033cc;
  --vb-blue-400: #3b6bff;
  --vb-sky: #b3c6ff;
  --vb-violet: #8300e9;
  --vb-purple: #660080;
  --vb-orchid: #c37cc6;
  --vb-gold: #f3a522;
  --vb-gold-300: #ffc94d;
  --vb-green: #7cda24;
  --vb-red: #e3343a;

  /* Neutrals */
  --vb-ink: #0b1433;
  --vb-text: #2a3358;
  --vb-mute: #5d6790;
  --vb-line: #e2e7f5;
  --vb-soft: #f3f6fd;
  --vb-white: #ffffff;

  /* System */
  --vb-font: "Montserrat", "Open Sans", Arial, sans-serif;
  --vb-radius: 20px;
  --vb-radius-sm: 12px;
  --vb-shadow: 0 10px 30px rgba(14, 37, 99, .10), 0 2px 6px rgba(14, 37, 99, .06);
  --vb-shadow-lg: 0 24px 60px rgba(6, 15, 46, .28);
  --vb-max: 1200px;
  --vb-grad-hero: radial-gradient(1200px 600px at 80% 20%, rgba(131, 0, 233, .55), transparent 60%),
                  radial-gradient(900px 500px at 10% 90%, rgba(0, 51, 204, .65), transparent 60%),
                  linear-gradient(160deg, #0a1a4a 0%, #0e2563 45%, #1b0f5c 100%);
  --vb-grad-vip: radial-gradient(800px 500px at 15% 30%, rgba(195, 124, 198, .35), transparent 60%),
                 linear-gradient(140deg, #2a0a5e 0%, #660080 55%, #8300e9 100%);
  --vb-grad-gold: linear-gradient(180deg, #ffc94d 0%, #f3a522 100%);
}

/* ------------------------------------------------------------------ */
/* Divi header + footer (homepage + sitewide)                           */
/* ------------------------------------------------------------------ */
body:is(.vb-redesign, .vb-site) #main-header { background: rgba(6, 15, 46, .35) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background .3s; }
body:is(.vb-redesign, .vb-site) #main-header.et-fixed-header { background: rgba(10, 26, 74, .92) !important; box-shadow: 0 8px 30px rgba(6, 15, 46, .3) !important; }
body:is(.vb-redesign, .vb-site) #top-menu li a { font-family: var(--vb-font) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .01em; color: rgba(255, 255, 255, .88) !important; }
body:is(.vb-redesign, .vb-site) #top-menu li a:hover { color: #fff !important; opacity: 1 !important; }
body:is(.vb-redesign, .vb-site) #top-menu li.current-menu-item:not(.menu-button) > a { color: var(--vb-gold-300) !important; }
body:is(.vb-redesign, .vb-site) #top-menu .menu-button a { background: var(--vb-grad-gold); border: 0 !important; color: #3a2200 !important; padding: 9px 20px !important; font-size: 14px !important; border-radius: 999px; box-shadow: 0 6px 16px rgba(243, 165, 34, .35); }
body:is(.vb-redesign, .vb-site) .mobile_nav, body:is(.vb-redesign, .vb-site) #main-header .et_mobile_menu { background-color: var(--vb-navy-900) !important; }
body:is(.vb-redesign, .vb-site) .et_mobile_menu li a { font-family: var(--vb-font); font-weight: 700; }
body:is(.vb-redesign, .vb-site) .mobile_menu_bar::before { color: #fff !important; }
/* Footer is the shared Divi Theme Builder footer: only swap the font (icons keep their icon fonts). */
body:is(.vb-redesign, .vb-site) footer.et-l--footer, body:is(.vb-redesign, .vb-site) footer.et-l--footer .et_pb_text_inner, body:is(.vb-redesign, .vb-site) footer.et-l--footer .et_pb_text_inner a { font-family: var(--vb-font); }