/*
 Theme Name: BWTV
 Theme URI: https://bwtv.local
 Author: BWTV
 Author URI: https://bwtv.local
 Description: Thème WordPress sur mesure pour la homepage BWTV (pixel-perfect).
 Version: 0.1.0
 Requires at least: 6.0
 Tested up to: 6.6
 Requires PHP: 7.4
 Text Domain: bwtv
*/

/* System fonts only – no external font loading for better performance and privacy */

:root {
  --bwtv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --bwtv-font-headings: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --bwtv-color-primary: #fcc600;
  --bwtv-color-text: #222;
  --bwtv-color-muted: #666;
  --bwtv-color-border: #e5e5e5;
  --bwtv-color-bg: #ffffff;
  --bwtv-color-link: #000000;
  --bwtv-color-link-hover: #000000;
  --bwtv-container-width: 1000px;
  --bwtv-gutter: 20px;
  /* Typography hierarchy - 3 font weights: 300, 400, 900 */
  --fs-h1: 55px; --lh-h1: 1.10; --ls-h1: -0.02em;
  --fs-h2: 48px; --lh-h2: 1.20; --ls-h2: -0.01em;
  --fs-h3: 28px; --lh-h3: 1.25;
  --fs-h4: 22px; --lh-h4: 1.30;
  --fs-h5: 18px; --lh-h5: 1.35;
  --fs-h6: 16px; --lh-h6: 1.40;
  --fs-lead: 24px; --lh-lead: 1.50;
  --fs-body-l: 20px; --lh-body-l: 1.65;
  --fs-body-m: 16px; --lh-body-m: 1.60;
  --fs-body-s: 14px; --lh-body-s: 1.55;
  --fs-nav: 15px;
  --fs-button: 14px;
  --fs-label: 12px;
  --fs-meta: 13px; --lh-meta: 1.45; --ls-meta: .02em;
  --fs-flag: 28px;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--bwtv-font);
  color: var(--bwtv-color-text);
  background: var(--bwtv-color-bg);
  line-height: 1.5;
}

.mobile-bottombar { display:none; }

/* Prevent unwanted horizontal scrollbar on pages */
html, body { overflow-x: hidden; }

img { max-width: 100%; height: auto; display: block; }

.container { width: min(100% - 2*var(--bwtv-gutter), var(--bwtv-container-width)); margin-inline: auto; }
/* Force header container to honor the site container width */
.site-header .container { width: min(100% - 2*var(--bwtv-gutter), var(--bwtv-container-width)) !important; }
/* Desktop: header fixed to 1200px */
@media (min-width: 1024px) {
  .site-header { --bwtv-container-width: 1200px; }
}
/* Remove any leftover caret arrow for language switcher */
.action-lang .caret { display:none !important; }

a { color: var(--bwtv-color-link); text-decoration: none; }
a:hover { color: var(--bwtv-color-link-hover); text-decoration: underline; }

/* Remove 300ms tap delay on touch devices without FastClick */
a, button, [role="button"],
input[type="button"], input[type="submit"], input[type="reset"],
label { touch-action: manipulation; }

.screen-reader-text { position:absolute; left:-9999px; }

/* Share dropdown fallback (ensure visible only on toggle even with minified CSS) */
.single-article .share-dropdown { position: relative; }
.single-article .share-toggle { cursor: pointer; }
.single-article .share-menu { position:absolute; right:0; top:calc(100% + 6px); min-width: 180px; background:#fff; border:1px solid #e5e5e5; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; display:none; z-index: 1000; }
.single-article .share-dropdown.open .share-menu { display:block; }
.single-article .share-item { display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; color:#000; font-size:14px; }
.single-article .share-item:hover { background:#f7f7f7; }

/* Lead paragraph style (fallback if main.min.css is active) */
.single-lead { color: var(--bwtv-color-text); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight:400; margin: 8px 0 14px; }

/* Stronger specificity to override main.min.css for article content font size */
.single-article .single-content { font-size: 25px; line-height: 1.8; }

@media (max-width: 640px) {
  .single-article .single-content { font-size: 25px; line-height: 1.75; }
}

/* Ensure tool buttons use weight 400 on single pages (override min.css) */
.single-article .tool-btn { font-weight: 400; }
.single-article .read-english .mlp-quicklinks-link { font-weight: 400; }

/* Typography hierarchy implementation */
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 900; font-family: var(--bwtv-font-headings); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 900; font-family: var(--bwtv-font-headings); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 900; font-family: var(--bwtv-font-headings); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 900; font-family: var(--bwtv-font-headings); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 900; font-family: var(--bwtv-font-headings); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: 900; font-family: var(--bwtv-font-headings); }

/* Body text variants */
.text-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 400; }
.text-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body-l); font-weight: 400; }
.text-body-m { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 400; }
.text-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 400; }

/* UI elements */
.text-nav { font-size: var(--fs-nav); font-weight: 900; text-transform: uppercase; font-family: var(--bwtv-font-headings); }
.text-button { font-size: var(--fs-button); font-weight: 400; font-family: var(--bwtv-font); }
.text-label { font-size: var(--fs-label); font-weight: 900; text-transform: uppercase; font-family: var(--bwtv-font-headings); }
.text-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); font-weight: 300; }
.text-flag { font-size: var(--fs-flag); font-weight: 900; text-transform: uppercase; font-family: var(--bwtv-font-headings); }

/* Breadcrumb on single article */
.single-breadcrumb { margin-bottom: 8px; font-size: var(--fs-meta); }
.single-breadcrumb .breadcrumb-list { list-style:none; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; column-gap:4px; row-gap:2px; }
.single-breadcrumb .breadcrumb-item { color:#777; }
.single-breadcrumb .breadcrumb-item a { color:#777; text-decoration:none; }
.single-breadcrumb .breadcrumb-item a:hover { text-decoration:underline; }
.single-breadcrumb .breadcrumb-item::after { content:'›'; margin: 0 4px; color:#aaa; }
.single-breadcrumb .breadcrumb-item.current { font-weight:600; color:#333; }
.single-breadcrumb .breadcrumb-item.current::after { content:''; margin:0; }

/* Content headings override with subtle horizontal lines */
.single-article .single-content h2 { 
  font-size: var(--fs-h2); 
  line-height: var(--lh-h2); 
  letter-spacing: var(--ls-h2); 
  font-weight: 900; 
  position: relative;
  padding-bottom: 2px;
  margin-bottom: 16px;
}
.single-article .single-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background-color: #ddd;
}
.single-article .single-content h3 { 
  font-size: var(--fs-h3); 
  line-height: var(--lh-h3); 
  font-weight: 900;
  position: relative;
  padding-bottom: 2px;
  margin-bottom: 14px;
}
.single-article .single-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background-color: #ddd;
}
.single-article .single-content h4 { 
  font-size: var(--fs-h4); 
  line-height: var(--lh-h4); 
  font-weight: 900;
  position: relative;
  padding-bottom: 2px;
  margin-bottom: 12px;
}
.single-article .single-content h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background-color: #ddd;
}
.single-article .single-content ul, .single-article .single-content ol { padding-left: 1.2em; margin: 0.8em 0 1.2em; }
.single-article .single-content li { margin: 0.4em 0; }

/* Comments UI weights to 400 (override minified rules) */
.single-article #comments-title { font-weight: 400; }
.single-article .cmt-btn { font-weight: 400; }
.single-article .cmt-tab { font-weight: 400; }
.single-article .cmt-item-author { font-weight: 400; }
.single-article .cmt-act { font-weight: 400; }
.single-article .cmt-authbox summary { font-weight: 400; }
.single-article .cmt-modal-titlebar { font-weight: 400; }
.single-article .cmt-modal-title { font-weight: 400; }
.single-article .cmt-label { font-weight: 400; }

/* Variant color tokens on body (fallback when main.min.css is used) */
.single-variant-news  { --bwtv-color-primary: #fcc600; }
.single-variant-people{ --bwtv-color-primary: #ff0090; }
.single-variant-sport { --bwtv-color-primary: #15803d; }
.single-variant-elle  { --bwtv-color-primary: #ff0000; }

/* High-specificity overrides to ensure dynamic colors even if main.min.css has hardcoded values */
body.single-article .single-kicker a { background: var(--bwtv-color-primary) !important; }
body.single-article .cmt-tab.active { background: var(--bwtv-color-primary) !important; color:#000 !important; }
body.single-article .cmt-btn.cmt-publish { background: var(--bwtv-color-primary) !important; border-color: var(--bwtv-color-primary) !important; }
body.single-article .cmt-btn-primary:hover { background: var(--bwtv-color-primary) !important; border-color: var(--bwtv-color-primary) !important; color:#000 !important; }
body.single-article .cmt-replybox { border-left-color: var(--bwtv-color-primary) !important; }

/* Subnav (high-specificity fallback to beat any minified CSS) */
body .subnav { display:block !important; background: var(--bwtv-color-primary) !important; color:#fff !important; border-top:2px solid #f4f4f4; }
body .subnav .container { padding: 6px 0; }
body .subnav .subnav-menu,
body .subnav .menu { list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; gap:22px; align-items:center; flex-wrap: nowrap !important; }
body .subnav .subnav-menu > li { margin:0; padding:0; }
body .subnav .menu > li { margin:0; padding:0; flex: 0 0 auto !important; }
body .subnav .subnav-menu > li > a { font-family: var(--bwtv-font); font-weight:400; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; color:#fff !important; padding:6px 0; white-space: nowrap !important; word-break: keep-all; hyphens: none; }
body .subnav .menu > li > a { font-family: var(--bwtv-font); font-weight:400; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; color:#fff !important; padding:6px 0; white-space: nowrap !important; word-break: keep-all; hyphens: none; }
/* Improve contrast on dark variants */
body.single-variant-sport .subnav, body.single-variant-sport .subnav a,
body.single-variant-elle .subnav,  body.single-variant-elle .subnav a { color:#fff !important; }
/* People variant: white text + heavy weight for stronger contrast */
body.single-variant-people .subnav, body.single-variant-people .subnav a { color:#fff !important; }
body.single-variant-people .subnav .subnav-menu > li > a { font-weight:900 !important; }
/* Also bump weight on Sport and Elle for parity */
body.single-variant-sport .subnav .subnav-menu > li > a,
body.single-variant-elle .subnav .subnav-menu > li > a { font-weight:900 !important; }

/* News variant: black text for optimal contrast on yellow */
body.single-variant-news .subnav, body.single-variant-news .subnav a { color:#000 !important; }
body.single-variant-news .subnav .subnav-menu > li > a,
body.single-variant-news .subnav .menu > li > a { color:#000 !important; font-weight:900 !important; }

/* Scroll snapping for a better horizontal scroll experience */
body .subnav .container { scroll-snap-type: x proximity; scroll-padding: 10px; }
body .subnav .subnav-menu > li,
body .subnav .menu > li { scroll-snap-align: start; }

/* Labels (kicker) text color per variant on single pages */
body.single-variant-people .single-kicker a,
body.single-variant-sport .single-kicker a,
body.single-variant-elle .single-kicker a { color:#fff !important; }
body.single-variant-news .single-kicker a { color:#000 !important; }

/* Other pills/labels that use the primary color as background */
body.single-variant-people .lf-pill,
body.single-variant-sport .lf-pill,
body.single-variant-elle .lf-pill { color:#fff !important; background: var(--bwtv-color-primary) !important; }
body.single-variant-news .lf-pill { color:#000 !important; background: var(--bwtv-color-primary) !important; }

/* Comments: tabs + publish button text color per variant */
body.single-variant-people .bwtv-comments .cmt-tab.active,
body.single-variant-sport .bwtv-comments .cmt-tab.active,
body.single-variant-elle  .bwtv-comments .cmt-tab.active { color:#fff !important; }
body.single-variant-news   .bwtv-comments .cmt-tab.active { color:#000 !important; }

body.single-variant-people .bwtv-comments .cmt-btn.cmt-publish,
body.single-variant-sport .bwtv-comments .cmt-btn.cmt-publish,
body.single-variant-elle  .bwtv-comments .cmt-btn.cmt-publish { color:#fff !important; }
body.single-variant-news   .bwtv-comments .cmt-btn.cmt-publish { color:#000 !important; }

/* Reading time icon: apply variant color to icon only (not text) */
body .reading-time::before {
  background: none !important;
  background-color: var(--bwtv-color-primary) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a1 1 0 0 1 1 1v2.586l1.707 1.707a1 1 0 1 1-1.414 1.414l-2-2A1 1 0 0 1 11 12V9a1 1 0 0 1 1-1zm0-6C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'/></svg>");
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a1 1 0 0 1 1 1v2.586l1.707 1.707a1 1 0 1 1-1.414 1.414l-2-2A1 1 0 0 1 11 12V9a1 1 0 0 1 1-1zm0-6C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'/></svg>");
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}

/* Hide footer when Présidentielle mode is active (page template or singles in cat 2447) */
body.no-footer-presidentielle .site-footer { display:none !important; }

/* Bookmark prompt (Lire plus tard) – match mockup: white header, rounded, orange CTA, centered text */
#bm-prompt-modal .cmt-modal-box { border:1px solid var(--bwtv-color-border); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.15); }
#bm-prompt-modal .cmt-modal-header { background:#fff; color:#000; padding:12px 16px; border-bottom:1px solid var(--bwtv-color-border); }
#bm-prompt-modal .cmt-modal-titlebar { font-weight:900; color:#000; letter-spacing:.02em; text-transform:none; }
#bm-prompt-modal .cmt-modal-close { color:#000; opacity:.8; }
#bm-prompt-modal .cmt-modal-close:hover { opacity:1; }
#bm-prompt-modal .cmt-modal-body { text-align:center; padding:18px 16px; }
#bm-prompt-modal .bm-msg { color: var(--bwtv-color-muted); font-size:16px; margin:8px 0 16px; }
#bm-prompt-modal .bm-msg strong { color:#000; font-weight:900; }
#bm-prompt-modal .bm-register { background:#ff9900; border-color:#ff9900; color:#fff; font-weight:900; padding:12px 16px; border-radius:999px; }
#bm-prompt-modal .bm-register:hover { filter: brightness(0.96); }
#bm-prompt-modal .cmt-small { margin-top:12px; color: var(--bwtv-color-muted); }
#bm-prompt-modal .bm-login { color: #1a73e8; }
#bm-prompt-modal .bm-login:hover { text-decoration: underline; }

/* ============================= */
/* Video Watch Page (mockup)     */
/* ============================= */
.video-watch-page { background:#000; color:#fff; /* System fonts only */
  --bwtv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
.video-watch-page .vwp-container { width: min(100% - 2*var(--bwtv-gutter), 1000px); margin-inline:auto; padding: 10px 0 24px; }
.video-watch-page a { color:#fff; }

.vwp-hero { display:grid; grid-template-columns: 1fr; gap: 18px; align-items:start; }
@media (min-width: 992px) {
  .vwp-hero { grid-template-columns: 700px 1fr; gap: 24px; }
}

.vwp-embed iframe, .vwp-embed video { width:100%; aspect-ratio:16/9; border-radius:10px; background:#000; display:block; }

.vwp-kicker { font-family:var(--bwtv-font-headings); text-transform:uppercase; letter-spacing:.02em; font-weight:700; color: var(--bwtv-color-primary); margin:6px 0 8px; }
.vwp-title { font-family:var(--bwtv-font-headings); font-weight:900; font-size: clamp(28px, 4vw, 40px); line-height:1.1; margin:6px 0 10px; color:#fff; }
.vwp-meta { display:flex; align-items:center; gap:10px; color:#bbb; font-size:14px; margin-bottom:12px; }
.vwp-pill { background: var(--bwtv-color-primary); color:#000; font-weight:900; border-radius:999px; padding:4px 10px; font-size:12px; letter-spacing:.02em; }
.vwp-desc { color:#d9d9d9; font-size:15.5px; line-height:1.6; }

.vwp-section-head { display:flex; align-items:center; gap:10px; margin:20px 0 10px; }
.vwp-section-title { font-family:var(--bwtv-font-headings); font-weight:900; color:#fff; margin:0; font-size:20px; }
.vwp-dot { width:8px; height:8px; background: var(--bwtv-color-primary); border-radius:999px; display:inline-block; }
.vwp-autoplay { margin-left:auto; font-size:12px; color:#ffcf33; font-weight:700; background: rgba(255,198,0,.12); padding:4px 8px; border-radius:999px; }
.vwp-autoplay { display:inline-flex; align-items:center; gap:10px; background:transparent; border:0; cursor:pointer; padding:0; color:#ffcf33; font-weight:700; }
.vwp-autoplay .vwp-toggle { width:44px; height:22px; border-radius:999px; background: rgba(255,255,255,0.15); position:relative; display:inline-block; }
.vwp-autoplay .vwp-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:999px; background:#fff; transition:left .2s ease; }
.vwp-autoplay.on .vwp-toggle { background: var(--bwtv-color-primary); }
.vwp-autoplay.on .vwp-knob { left:25px; }

.vwp-grid { display:grid; grid-auto-flow: column; grid-auto-columns: 260px; gap:14px; overflow-x:auto; padding:6px 2px 10px; scroll-snap-type: x proximity; }
/* Some global CSS may set grid-template-columns on generic grids. Cancel it here to avoid the first 4 items taking 1fr columns. */
.video-watch-page .vwp-grid { grid-template-columns: none !important; }
.vwp-progress { height:6px; background: rgba(255,255,255,0.1); border-radius:999px; margin: 8px 2px 0; overflow:hidden; }
.vwp-progress[aria-hidden="true"] { display:none; }
.vwp-progress-bar { width:0%; height:100%; background: var(--bwtv-color-primary); }
.vwp-card { scroll-snap-align: start; }
.vwp-thumb { position:relative; border-radius:10px; overflow:hidden; background:#111; }
.vwp-thumb img { width:100%; height:150px; object-fit:cover; display:block; transition: transform .25s ease; will-change: transform; }
.vwp-duration { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:3px 6px; border-radius:6px; font-weight:700; }
.vwp-card-kicker { margin-top:6px; font-size:12px; color:#bbb; }
.vwp-card-title { margin:2px 0 0; font-family:var(--bwtv-font-headings); font-weight:900; color:#fff; font-size:15px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; min-height:2.6em; transition: color .2s ease; }
.vwp-card-date { margin-top:6px; font-size:12px; color:#d0d0d0; }
.vwp-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.vwp-card-duration { background: var(--bwtv-color-primary); color:#000; font-weight:900; font-size:12px; padding:4px 8px; border-radius:8px; }

/* Play pulse overlay */
.vwp-play { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) scale(0.85); width:52px; height:52px; border-radius:999px; background: radial-gradient(circle at center, #ffbf00 0%, #ffb700 60%, #f5ab00 100%); box-shadow:0 4px 16px rgba(0,0,0,.35); display:none; }
.vwp-play::before { content:''; position:absolute; left:50%; top:50%; transform: translate(-42%, -50%); width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid #fff; }

/* Hover effects on card */
.vwp-card-link { display:block; border:1.5px solid transparent; border-radius:12px; padding:6px; transition: border-color .2s ease, background .2s ease, color .2s ease; background: transparent; }
.vwp-card-link:hover { border-color: var(--bwtv-color-primary); background: transparent; }
.vwp-card-link:hover .vwp-thumb { box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.vwp-card-link:hover .vwp-play { display:block; }
.vwp-card-link:hover .vwp-card-title { color: var(--bwtv-color-primary); }
.vwp-card-link:hover .vwp-thumb img { transform: scale(1.02); }
.vwp-card-link:focus-visible { outline: none; border-color: var(--bwtv-color-primary); }
.vwp-card-link:focus-visible .vwp-card-title { color: var(--bwtv-color-primary); }
.vwp-card-link.highlight { outline:2px solid var(--bwtv-color-primary); border-radius:12px; }
.vwp-card-link.highlight .vwp-card-title { color: var(--bwtv-color-primary); }

/* Watch scroller scrollbar styling */
/* Firefox */
.video-watch-page .vwp-grid { scrollbar-width: thin; scrollbar-color: var(--bwtv-color-primary) rgba(255,255,255,0.12); }
/* WebKit */
.video-watch-page .vwp-grid::-webkit-scrollbar { height: 10px; }
.video-watch-page .vwp-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); border-radius: 999px; }
.video-watch-page .vwp-grid::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ffe061, var(--bwtv-color-primary)); border-radius: 999px; border: 2px solid rgba(0,0,0,0.35); }
.video-watch-page .vwp-grid::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #ffe884, var(--bwtv-color-primary)); }
.video-watch-page .vwp-grid::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.video-watch-page .vwp-grid::-webkit-scrollbar-corner { background: transparent; }

/* Hide mobile bottom bar until JS initializes it (prevent flash) */
.mobile-bottombar { display: none; }

@media (max-width: 1024px) {
  .mobile-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid var(--bwtv-color-border);
    box-shadow: 0 -2px 6px rgba(0,0,0,.04);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: 1001;
    /* Will be shown by JS after height is measured */
  }

  .mobile-bottombar .mbb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #444;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding-top: 4px;
  }

  .mobile-bottombar .mbb-item:hover,
  .mobile-bottombar .mbb-item:active { color: #000; }

  .mobile-bottombar .mbb-ico { width: 22px; height: 22px; opacity: .85; }

  body.has-mobile-bb { padding-bottom: calc(var(--mobile-bb, 56px) + 12px); }
}

/* Header LIVE indicator */
.header-actions .live-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #ff0033;
}

.header-actions .live-text {
  display: inline-block;
  min-width: 2.5em;
  color: #fff;
}

.header-actions .live-link:hover .live-text {
  color: #ff0033;
}

.header-actions .live-indicator {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

.header-actions .live-indicator::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: .6;
  animation: live-pulse 1.4s ease-out infinite;
}

@keyframes live-pulse {
  0% { transform: scale(.6); opacity: .6; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.vwp-back a { color:#fff; }
.vwp-fallback { background:#111; color:#ddd; padding:18px; border-radius:10px; }

/* ============================= */
/* Home – Plus de news (mobile)  */
/* Force 2 columns on mobile     */
/* ============================= */
@media (max-width: 1024px) {
  body.home .tb-compact .tb2-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  body.home .tb-compact .tb2-grid { grid-template-columns: repeat(2, 1fr) !important; }
}