/*
 * VIP Belote redesign 2026: sitewide layer for the existing Divi pages and posts.
 * Only active when <body> has .vb-site (plugin switch: admins only / everyone).
 * Never loaded on homepage-redesign pages (those have their own sections).
 * Needs vb-base.css (font, tokens, header, footer).
 * Strategy: restyle Divi's own modules by class; never depend on numbered module classes.
 */

/* ------------------------------------------------------------------ */
/* 1. Page canvas + typography                                         */
/* ------------------------------------------------------------------ */
body.vb-site { background: var(--vb-soft) !important; background-image: none !important; color: var(--vb-text); font-family: var(--vb-font); -webkit-font-smoothing: antialiased; }
body.vb-site #page-container, body.vb-site #et-main-area { background: transparent !important; }
/* Navy band behind the transparent menu on every page, with or without a top bar (the old design relied on a dark body background image). */
body.vb-site #main-content { background: linear-gradient(160deg, #0a1a4a 0%, #0e2563 45%, #1b0f5c 100%) top center / 100% 340px no-repeat, var(--vb-soft) !important; }
/* Pages without a top bar: the first content section clears the fixed menu and its first card overlaps the band. */
body.vb-site #main-content .et_builder_inner_content > .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)):first-child { padding-top: 130px !important; }
body.vb-site #main-content .container::before { display: none !important; }
body.vb-site #main-content :is(p, li, h1, h2, h3, h4, h5, h6, a, td, th, input, textarea, select, button, blockquote, strong) { font-family: var(--vb-font); }
body.vb-site #main-content :is(h1, h2, h3, h4) { color: var(--vb-ink); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
body.vb-site #main-content .et_pb_text_inner :is(p, li) { font-size: 17px; line-height: 1.75; color: var(--vb-text); }
body.vb-site #main-content .et_pb_text_inner h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 1.4em; }
body.vb-site #main-content .et_pb_text_inner h3 { font-size: 1.3rem; margin-top: 1.2em; }
body.vb-site #main-content .et_pb_text_inner a:not(.et_pb_button) { color: var(--vb-blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 51, 204, .3); text-underline-offset: 3px; }
body.vb-site #main-content .et_pb_text_inner a:not(.et_pb_button):hover { color: var(--vb-violet); text-decoration-color: currentColor; }
body.vb-site #main-content .et_pb_text_inner ul:not(.toc_ul) li::marker { color: var(--vb-violet); }

/* ------------------------------------------------------------------ */
/* 2. Top bar = the section holding the online counter (global sections */
/*    #2241/#2275, per-page copies, TB bodies). NOT the .top-section    */
/*    class: Académie/Règles reuse it on content sections. + old         */
/*    fullwidth header (#890): navy band like the homepage hero        */
/* ------------------------------------------------------------------ */
body.vb-site .et_pb_section:has(.players-number),
body.vb-site #main-content .et_pb_fullwidth_header {
  position: relative;
  background: var(--vb-grad-hero) !important;
  padding: 118px 0 72px !important;
  margin: 0 !important;
}
body.vb-site .et_pb_section:has(.players-number) .et_pb_row { width: 90% !important; padding: 0 !important; }
body.vb-site .et_pb_section:has(.players-number) .et_pb_column { display: flex; flex-direction: column; align-items: center; gap: 16px; }
body.vb-site .et_pb_section:has(.players-number) .et_pb_module { margin: 0 !important; }
body.vb-site .et_pb_section:has(.players-number) .et_pb_image { max-width: none !important; }
/* Badge swapped in by the plugin for old wide logos (also inside old full-width headers) */
body.vb-site #main-content img.vb-top-badge { display: block; height: 240px !important; width: auto !important; max-width: 100%; margin: 0 auto 8px; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 18px 28px rgba(6, 15, 46, .45)); }
body.vb-site .et_pb_section:has(.players-number) .et_pb_image img { height: 240px !important; width: auto !important; max-width: 100%; filter: drop-shadow(0 18px 28px rgba(6, 15, 46, .45)); }

/* "XXXX joueurs en ligne": was absolutely positioned by the child theme */
body.vb-site .players-number {
  position: static !important; transform: none !important; left: auto !important; top: auto !important;
  display: inline-flex !important; align-items: center; gap: 10px; width: auto !important;
  padding: 10px 24px 10px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff !important; font-family: var(--vb-font); font-size: 15px !important; font-weight: 600;
}
body.vb-site .players-number::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vb-green); box-shadow: 0 0 0 4px rgba(124, 218, 36, .2); }
body.vb-site .players-number #players-online { font-size: 1.25rem !important; line-height: 1; margin: 0 4px 0 0 !important; font-weight: 800; color: var(--vb-green); font-variant-numeric: tabular-nums; }
body.vb-site .players-number #players-online + div { font-size: inherit !important; }
body.vb-site .players-number:has(#players-online:empty) { display: none !important; }

body.vb-site #main-content .et_pb_fullwidth_header :is(h1, h2, .et_pb_module_header) { color: #fff !important; font-family: var(--vb-font) !important; font-weight: 800 !important; }
body.vb-site #main-content .et_pb_fullwidth_header :is(p, .et_pb_header_content_wrapper, .et_pb_fullwidth_header_subhead) { color: rgba(255, 255, 255, .82) !important; font-family: var(--vb-font) !important; }

/* ------------------------------------------------------------------ */
/* 3. Content: white cards floating over the navy band                 */
/* ------------------------------------------------------------------ */
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) { background: transparent !important; background-image: none !important; padding: 0 0 56px !important; }
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) > .et_pb_row {
  width: min(1200px, 92%) !important; max-width: none !important;
  background: #fff !important; background-image: none !important; border: 0 !important; border-radius: 24px !important; box-shadow: var(--vb-shadow);
  padding: 44px 48px !important; margin: 24px auto 0 !important;
}
body.vb-site #main-content :is(.et_pb_section:has(.players-number), .et_pb_fullwidth_header) + .et_pb_section > .et_pb_row:first-child { margin-top: -44px !important; position: relative; z-index: 2; }
body.vb-site #main-content .et_pb_row_inner { border: 0 !important; max-width: 100% !important; }
body.vb-site #main-content .et_pb_image img { border-radius: 16px; }
body.vb-site .et_pb_section:has(.players-number) .et_pb_image img { border-radius: 0; }

/* Content images: up to their column width but never past their own size, and at most 640px tall (portrait sheets) */
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) .et_pb_image { max-width: none !important; width: 100%; text-align: center; }
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) .et_pb_image .et_pb_image_wrap { display: block; max-width: 820px; margin: 0 auto; }
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) .et_pb_image img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 640px; box-shadow: var(--vb-shadow); }
/* Images in half/third columns (e.g. Académie level cards) */
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) :is(.et_pb_column_1_2, .et_pb_column_1_3) .et_pb_image .et_pb_image_wrap { max-width: 440px; }

/* ------------------------------------------------------------------ */
/* Unified headings: same look on every page (overrides per-module    */
/* settings like uppercase / #1942b3 / 40px)                           */
/* ------------------------------------------------------------------ */
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) :is(.et_pb_text_inner h1, .et_pb_post_title .entry-title) {
  font-family: var(--vb-font) !important; font-size: clamp(2rem, 4vw, 2.9rem) !important; font-weight: 800 !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important; text-transform: none !important;
  color: var(--vb-ink) !important; padding-bottom: 8px !important; margin-bottom: .3em !important;
  background: none !important; text-shadow: none !important;
}
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) .et_pb_text_inner h2 {
  position: relative; font-family: var(--vb-font) !important; font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important; font-weight: 800 !important;
  line-height: 1.25 !important; letter-spacing: -.01em !important; text-transform: none !important; text-align: left !important;
  color: var(--vb-ink) !important; border-left: 0 !important; margin: 1.8em 0 .7em !important; padding: 0 0 0 20px !important;
  background: none !important; text-shadow: none !important; border-radius: 0 !important;
}
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) .et_pb_text_inner h2::before { content: "" !important; display: block !important; position: absolute; left: 0; top: .15em; bottom: .15em; width: 6px; border-radius: 6px; background: linear-gradient(180deg, var(--vb-gold-300), var(--vb-violet)); }
body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) .et_pb_text_inner :is(h3, h4) {
  font-family: var(--vb-font) !important; font-size: 1.3rem !important; font-weight: 800 !important; line-height: 1.3 !important;
  letter-spacing: -.01em !important; text-transform: none !important; color: var(--vb-ink) !important; padding-bottom: 6px !important;
  background: none !important; text-shadow: none !important;
}

/* Breadcrumbs (Yoast, first text module of posts) */
body.vb-site .et_pb_text:has(.breadcrumb_last) .et_pb_text_inner { font-size: .85rem !important; color: var(--vb-mute); }
body.vb-site .et_pb_text:has(.breadcrumb_last) a { color: var(--vb-blue) !important; text-decoration: none !important; font-weight: 600; }
body.vb-site .et_pb_text:has(.breadcrumb_last) strong { font-weight: 600; color: var(--vb-mute); }

/* Post title + featured image */
body.vb-site #main-content .et_pb_post_title .entry-title { font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important; line-height: 1.15 !important; color: var(--vb-ink) !important; font-weight: 800 !important; letter-spacing: -.02em; padding-bottom: 6px !important; }
body.vb-site #main-content .et_pb_post_title .et_pb_title_meta_container { font-size: .85rem; color: var(--vb-mute); }
body.vb-site #main-content .et_pb_title_featured_container img { border-radius: 20px; box-shadow: var(--vb-shadow); margin-top: 14px; }

/* Article headings (old: 15px blue left border) */
body.vb-site #main-content .blog-heading-border { position: relative; border-left: 0 !important; margin: 1.8em 0 .7em !important; padding: 0 0 0 20px !important; font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important; }
body.vb-site #main-content .blog-heading-border::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 6px; border-radius: 6px; background: linear-gradient(180deg, var(--vb-gold-300), var(--vb-violet)); }

/* Table of contents (old: black border box) */
/* Two TOC markups exist: posts wrap it in .toc_blog; Académie/Règles use a text module with
   <p>Table des matières</p> + .toc_ul directly. Both get the same box. */
body.vb-site #main-content :is(.toc_blog, .et_pb_text_inner:has(> .toc_ul)) { display: block !important; width: auto !important; height: auto !important; margin: 1.5em 0 2em !important; padding: 22px 26px !important; text-align: left !important; border: 1px solid var(--vb-line) !important; border-radius: 18px !important; background: var(--vb-soft) !important; }
body.vb-site #main-content :is(.toc_blog, .et_pb_text_inner:has(> .toc_ul)) > p { font-size: .78rem !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; text-align: left !important; color: var(--vb-blue) !important; padding: 0 0 8px !important; margin: 0; line-height: 1.4 !important; }
body.vb-site #main-content .toc_ul, body.vb-site #main-content .toc_ul ul { text-align: left !important; }
body.vb-site #main-content .toc_ul ul { padding: 0 !important; margin: 0 !important; list-style: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; font-size: 16px !important; }
body.vb-site #main-content .toc_ul ul li { padding: 0 !important; margin: 0 !important; border-radius: 10px; font-size: 16px !important; line-height: 1.4 !important; }
body.vb-site #main-content .toc_ul ul li::marker { content: none; }
body.vb-site #main-content .toc_ul li:hover { background: #fff !important; }
body.vb-site #main-content .toc_ul a, body.vb-site #main-content .toc_ul a[style] { display: block; padding: 8px 12px !important; background: none !important; text-transform: none !important; color: var(--vb-ink) !important; font-family: var(--vb-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-decoration: none !important; }
body.vb-site #main-content .toc_ul a:hover { color: var(--vb-blue) !important; }

/* ------------------------------------------------------------------ */
/* 4. Buttons (all Divi buttons → gold pill, like the homepage)        */
/* ------------------------------------------------------------------ */
body.vb-site #main-content :is(.et_pb_button, .et_pb_promo_button, .et_pb_contact_submit, .et_pb_pricing_table_button),
body.vb-site #main-content :is(.et_pb_button, .et_pb_promo_button, .et_pb_contact_submit, .et_pb_pricing_table_button):hover {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: auto !important; min-width: 0 !important;
  font-family: var(--vb-font) !important; font-weight: 800 !important; font-size: 1rem !important; line-height: 1 !important;
  letter-spacing: .01em !important; text-transform: none !important;
  padding: 17px 32px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--vb-grad-gold) !important; color: #3a2200 !important;
  box-shadow: 0 10px 24px rgba(243, 165, 34, .35), inset 0 -3px 0 rgba(0, 0, 0, .12) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
body.vb-site #main-content :is(.et_pb_button, .et_pb_promo_button, .et_pb_contact_submit, .et_pb_pricing_table_button):hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(243, 165, 34, .5), inset 0 -3px 0 rgba(0, 0, 0, .12) !important; }
body.vb-site #main-content :is(.et_pb_button, .et_pb_promo_button)::after { display: none !important; }
body.vb-site .et_pb_section:has(.players-number) .play-button { font-size: 1.05rem !important; padding: 18px 40px !important; }

/* ------------------------------------------------------------------ */
/* 5. Sidebar widgets (post sidebars)                                  */
/* ------------------------------------------------------------------ */
body.vb-site .et_pb_widget_area { border: 0 !important; padding-left: 0 !important; }
body.vb-site .et_pb_widget_area .et_pb_widget { width: 100%; background: var(--vb-soft); border: 1px solid var(--vb-line); border-radius: 18px; padding: 20px 18px; margin-bottom: 20px !important; }
body.vb-site .et_pb_widget_area .widgettitle { display: flex; align-items: center; gap: 8px; background: none !important; color: var(--vb-ink) !important; text-align: left !important; padding: 0 !important; margin: 0 0 10px !important; font-family: var(--vb-font); font-size: .78rem !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase; }
body.vb-site .et_pb_widget_area .widgettitle::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 3px; background: var(--vb-grad-gold); }
body.vb-site .et_pb_widget_area .et_pb_widget ul { padding: 0 !important; margin: 0 !important; list-style: none !important; }
body.vb-site .et_pb_widget_area .et_pb_widget ul li { padding: 0 !important; margin: 0 !important; border-top: 1px solid var(--vb-line); }
body.vb-site .et_pb_widget_area .et_pb_widget ul li:first-child { border-top: 0; }
body.vb-site .et_pb_widget_area .et_pb_widget ul li a { display: block; padding: 9px 2px; font-family: var(--vb-font); font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--vb-text) !important; transition: color .2s, padding .2s; }
body.vb-site .et_pb_widget_area .et_pb_widget ul li a:hover { color: var(--vb-blue) !important; padding-left: 6px; }

/* ------------------------------------------------------------------ */
/* 6. Other Divi modules found in the audit                            */
/* ------------------------------------------------------------------ */
body.vb-site #main-content .et_pb_divider::before { border-top-color: var(--vb-line) !important; }
body.vb-site #main-content .et_pb_video { border-radius: 18px; overflow: hidden; box-shadow: var(--vb-shadow); }

body.vb-site #main-content .et_pb_promo { border-radius: 22px; padding: 36px 40px !important; background: linear-gradient(120deg, #0033cc 0%, #4c14d6 55%, #8300e9 100%) !important; box-shadow: var(--vb-shadow); }
body.vb-site #main-content .et_pb_promo :is(h2, h3, .et_pb_module_header) { color: #fff !important; }
body.vb-site #main-content .et_pb_promo :is(p, .et_pb_promo_description) { color: rgba(255, 255, 255, .85) !important; }

body.vb-site #main-content .et_pb_testimonial { background: var(--vb-soft) !important; border: 1px solid var(--vb-line); border-radius: 20px; padding: 30px 32px !important; }
body.vb-site #main-content .et_pb_testimonial_author { color: var(--vb-ink); font-weight: 800; }

body.vb-site #main-content .et_pb_blurb .et_pb_module_header { color: var(--vb-ink); font-weight: 800; }
body.vb-site #main-content .et_pb_blurb .et-pb-icon { color: var(--vb-violet) !important; }

/* Blog module (Blog page, archives).
   Divi hides grid posts (opacity 0) until its Salvattore script builds columns.
   Use CSS grid instead so posts never depend on that script. */
body.vb-site #main-content .et_pb_blog_grid .et_pb_salvattore_content[data-columns] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
body.vb-site #main-content .et_pb_blog_grid .et_pb_salvattore_content[data-columns]:has(> .column) { display: flex; gap: 24px; }
body.vb-site #main-content .et_pb_blog_grid .et_pb_salvattore_content[data-columns] > .column { flex: 1; width: auto !important; margin: 0 !important; float: none !important; display: grid; gap: 24px; align-content: start; }
body.vb-site #main-content .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .et_pb_post { opacity: 1 !important; margin: 0 !important; }
body.vb-site #main-content .et_pb_blog_grid .et_pb_post { background: #fff; border: 0 !important; border-radius: 18px; overflow: hidden; box-shadow: var(--vb-shadow); padding: 0 0 20px !important; transition: transform .25s, box-shadow .25s; }
body.vb-site #main-content .et_pb_blog_grid .et_pb_post:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(14, 37, 99, .16); }
body.vb-site #main-content .et_pb_blog_grid .et_pb_image_container { margin: 0 0 14px !important; }
body.vb-site #main-content .et_pb_blog_grid .et_pb_image_container img { border-radius: 0; }
body.vb-site #main-content .et_pb_blog_grid :is(.entry-title, .post-meta, .post-content) { padding: 0 20px !important; }
body.vb-site #main-content .et_pb_blog_grid .entry-title { font-size: 1.05rem !important; line-height: 1.35 !important; }
body.vb-site #main-content .et_pb_blog_grid .entry-title a { color: var(--vb-ink) !important; }
body.vb-site #main-content .et_pb_blog_grid .post-meta { font-size: .8rem; color: var(--vb-mute) !important; }

/* Blog list module (category archives, e.g. /blog/category/nouvelles/) */
body.vb-site #main-content .et_pb_posts:not(.et_pb_blog_grid_wrapper) .et_pb_post { background: var(--vb-soft); border: 1px solid var(--vb-line); border-radius: 18px; padding: 22px 26px !important; margin-bottom: 16px !important; transition: transform .2s, box-shadow .2s; }
body.vb-site #main-content .et_pb_posts:not(.et_pb_blog_grid_wrapper) .et_pb_post:hover { transform: translateY(-2px); box-shadow: var(--vb-shadow); background: #fff; }
body.vb-site #main-content .et_pb_posts .et_pb_post .entry-title { font-size: 1.25rem !important; line-height: 1.3 !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; text-transform: none !important; text-shadow: none !important; text-align: left !important; }
body.vb-site #main-content .et_pb_posts .et_pb_post .entry-title a { color: var(--vb-ink) !important; }
body.vb-site #main-content .et_pb_posts .et_pb_post .entry-title a:hover { color: var(--vb-blue) !important; }
body.vb-site #main-content .et_pb_posts .post-meta, body.vb-site #main-content .et_pb_posts .post-meta a { font-size: .82rem !important; color: var(--vb-mute) !important; }
body.vb-site #main-content .et_pb_posts .post-content p { font-size: 15px !important; line-height: 1.6 !important; color: var(--vb-text) !important; margin-top: 8px; }
body.vb-site #main-content :is(.pagination, .wp-pagenavi) a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--vb-blue) !important; color: #fff !important; font-weight: 700; }

/* Pricing tables (club page) */
body.vb-site #main-content .et_pb_pricing_table { border: 1px solid var(--vb-line) !important; border-radius: 20px; overflow: hidden; box-shadow: var(--vb-shadow); background: #fff !important; }
body.vb-site #main-content .et_pb_pricing_heading { background: linear-gradient(135deg, var(--vb-blue), var(--vb-violet)) !important; }
body.vb-site #main-content .et_pb_pricing_heading :is(h2, .et_pb_pricing_title, span) { color: #fff !important; }

/* Contact form (affiliation page) */
body.vb-site #main-content .et_pb_contact_form :is(input, textarea, select) { font-family: var(--vb-font) !important; border-radius: 12px !important; background: var(--vb-soft) !important; border: 1px solid var(--vb-line) !important; color: var(--vb-ink) !important; }

/* ------------------------------------------------------------------ */
/* 7. Mascot call-to-action injected after posts and Académie pages    */
/* ------------------------------------------------------------------ */
.vbs-cta { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; width: min(1200px, 92%); margin: 24px auto 72px; padding: 36px 48px 36px 24px; border-radius: 28px; font-family: var(--vb-font); color: rgba(255, 255, 255, .85); background: var(--vb-navy); background-image: radial-gradient(600px 300px at 0% 100%, rgba(131, 0, 233, .5), transparent 70%), radial-gradient(500px 300px at 100% 0%, rgba(0, 51, 204, .7), transparent 70%); box-shadow: var(--vb-shadow-lg); box-sizing: border-box; }
.vbs-cta * { box-sizing: border-box; }
.vbs-cta__mascot { width: 100%; max-width: 220px; height: auto; margin: -96px 0 -36px; align-self: end; justify-self: center; filter: drop-shadow(0 20px 26px rgba(6, 15, 46, .4)); }
.vbs-cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vb-gold-300); }
.vbs-cta__eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--vb-grad-gold); }
body.vb-site .vbs-cta .vbs-cta__title { margin: 8px 0 8px; padding: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.2; color: #fff; }
body.vb-site .vbs-cta .vbs-cta__text { margin: 0 0 20px; padding: 0; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
body.vb-site .vbs-cta .vbs-cta__btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 32px; border-radius: 999px; background: var(--vb-grad-gold); color: #3a2200; font-weight: 800; font-size: 1rem; line-height: 1; text-decoration: none; box-shadow: 0 10px 24px rgba(243, 165, 34, .35), inset 0 -3px 0 rgba(0, 0, 0, .12); transition: transform .2s; }
body.vb-site .vbs-cta .vbs-cta__btn:hover { transform: translateY(-2px); color: #3a2200; }

/* ------------------------------------------------------------------ */
/* 8. Responsive                                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 980px) {
  body.vb-site .et_pb_section:has(.players-number), body.vb-site #main-content .et_pb_fullwidth_header { padding: 104px 0 64px !important; }
  body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) > .et_pb_row { padding: 30px 24px !important; }
  body.vb-site .et_pb_widget_area { margin-top: 24px; }
}
@media (max-width: 767px) {
  body.vb-site #main-content .et_pb_section:not(.et_pb_fullwidth_section, :has(.players-number)) > .et_pb_row { width: 94% !important; padding: 24px 16px !important; border-radius: 20px; }
  body.vb-site #main-content .et_pb_text_inner :is(p, li) { font-size: 16px; }
  body.vb-site .et_pb_section:has(.players-number) .et_pb_image img, body.vb-site #main-content img.vb-top-badge { height: 170px !important; }
  body.vb-site .et_pb_section:has(.players-number) .play-button { width: 100% !important; }
  .vbs-cta { grid-template-columns: 1fr; text-align: center; padding: 28px 20px 0; width: 94%; border-radius: 22px; }
  .vbs-cta__mascot { order: 2; max-width: 170px; margin: 8px auto 0; }
  body.vb-site .vbs-cta .vbs-cta__btn { width: 100%; }
}