/* Ballistat light interface — neutral data surfaces, restrained brand color. */
:root {
  color-scheme: light;
  --blue: #315d9b; --blue-d: #315d9b;
  --violet: #594c8f; --violet-d: #594c8f; --indigo: #315d9b;
  --bg: #f4f6f8; --bg2: #eef1f4; --card: #fff; --card2: #fff;
  --fg: #18212b; --mut: #596675; --line: #d9dfe6; --muted: #edf1f5;
  --pri: #315d9b; --on-pri: #fff; --ring: #245b9a;
  --bad: #a63131; --ok: #276749; --gold: #8a5a00;
  --warn-bg: #fff5dc; --warn-fg: #563d0b;
  --h: #315d9b; --d: #596675; --a: #594c8f;
  --grad: #315d9b; --r: 12px;
  --shadow: 0 1px 3px rgba(24,33,43,.07);
}
html, body { background: var(--bg); color: var(--fg); }
body { background-image: none; }
/* .bgfx : fonds animés rétablis (voir brand.css, bg.css) */
#top { background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(24,33,43,.05); -webkit-backdrop-filter:none; backdrop-filter:none; }
#top .brand img, .fbrand img { height: 34px; }
#side { background: var(--chrome); border:1px solid var(--line); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
#side nav a { color: var(--fg); }
#side nav a[aria-current="page"] { color: var(--blue-700); background:#eaf0f7; box-shadow:inset 2px 0 #315d9b; }
#side .sgroup { border-color: var(--line); }
.search, .drop { background: var(--card); border-color:var(--line); color:var(--fg); }
main { color:var(--fg); }
a { color: var(--link); }
.mut, small.mut { color: var(--fg); }
.eyebrow { color: var(--link); }
.card, .kpi, .plan, .ticket, .lg, .faq details, .mkt, .fixture-item, .home-feature, .home-callout, .sport-link {
  background: var(--card); border-color: var(--line); box-shadow:var(--shadow); color:var(--fg);
}
.card:hover, .plan:hover, .ticket:hover, .matchcard:hover, .sport-link:hover, .kpi:hover { transform:translateY(-1px); border-color: var(--line); box-shadow:0 3px 10px rgba(24,33,43,.08); }
button, .btn { background:#315d9b; color:#fff; box-shadow:none; }
button:hover:not(:disabled), .btn:hover { background:#244c7d; box-shadow:none; transform:translateY(-1px); }
button.sec, .btn.sec, .langbtn, .daychip, .sportchip, .tab { background: var(--card); color: var(--fg); border: 1px solid var(--line); box-shadow:none; }
button.sec:hover:not(:disabled), .btn.sec:hover, .langbtn:hover, .daychip:hover, .sportchip:hover, .tab:hover { background: var(--card); border-color:#aab8c7; }
.sportchip.on, .daychip.on, .tab.on { color: var(--blue-700); background:#eaf1f8; border-color:#9eb4cb; }
input, select, textarea { background: var(--field); color: var(--fg); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--fg); }
table { color:var(--fg); }
th { color: var(--fg); background: var(--card); }
td, th { border-color: var(--line); }
.fixture-item, .matchcard.fixture-card { background: var(--card); border-color: var(--line); }
.fixture-vs { background: var(--card); border-color: var(--line); color: var(--fg); }
.fixture-selection { background: var(--card); border-color: var(--line); }
.pill, .badge { color: var(--link); background: var(--card); }
.demo-badge { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:2px 7px; border: 1px solid var(--line); border-radius:999px; background: var(--card); color: var(--fg); font-size:.72rem; font-weight:600; line-height:1.35; white-space:normal; }
.livepill { color: #ffd0d4; background: rgba(251, 113, 133, 0.24); }
.empty { color:var(--fg); background: var(--card); border: 1px dashed var(--line); border-radius:12px; padding:24px; }
.msg.info { color: var(--link); background: var(--card); border-color: var(--line); }
#banner:not(:empty) { background:var(--warn-bg); color:var(--warn-fg); border-color: var(--line); }
#foot { background: var(--chrome); border-top:1px solid var(--line); color:var(--fg); }
.fbottom { border-color:var(--line); }
.hero.home-hero { background: var(--muted); color: var(--fg); border: 1px solid var(--line); box-shadow:none; }
.hero.home-hero p.lead { color: var(--link); }
.hero.home-hero .btn.sec { color: var(--fg); }
:focus-visible { outline:3px solid #245b9a; outline-offset:3px; }
::selection { background: var(--muted); color: var(--fg); }
@media (max-width:719px) {
  #top { background: var(--chrome); }
  .bnav { background: var(--chrome); border-top:1px solid var(--line); box-shadow:0 -2px 8px rgba(24,33,43,.05); }
  .bnav a { color: var(--fg); }
  .bnav a[aria-current="page"] { color: var(--blue-700); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* Apply the light surfaces after legacy page-specific rules. */
body .plans .plan, body .quota-card, body .auth-panel, body .mhero,
body .payment-quote-row, body .coupon-shop-card, body .prediction-probability,
body .password-control, body .scroll, body [role="tablist"] {
  background: var(--card) !important; color: var(--fg); border-color: var(--line) !important;
  box-shadow:var(--shadow); -webkit-backdrop-filter:none; backdrop-filter:none;
}
body .plans .plan:nth-child(n), body .plans .plan-selected { background: var(--card) !important; color: var(--fg); }
body .prediction-probability .mut, body .auth-panel .mut { color: var(--fg); }
body .coupon-shop-card .paybtn { background:#315d9b !important; color:#fff !important; }
body .sports button.on, body .days button.on, body .tabs button.on { background:#eaf1f8 !important; color: var(--blue-700) !important; border-color:#9eb4cb !important; }
body .filters, body .lg, body .fixture-item, body .fixture-card, body .home-feature,
body .home-step, body .home-cta, body .empty, body .admin-panel { background: var(--card) !important; color: var(--fg); border-color: var(--line); }
body .fixture-meta, body .fixture-selection > span:first-child { color: var(--fg); }
body .fixture-item a, body .fixture-card a { color: var(--link); }
body .boot { background: var(--card); color: var(--fg); }
body .msg.err { color: #ffd0d4; background: var(--card); border-color:#dfaaa5; }
body .msg.err h2, body .msg.err .err { color: #ffd0d4; }
body .msg.ok { color: #b8f5cf; background: var(--card); border-color: var(--line); }
body .boot { background: var(--card); }
body[data-page="login"] .auth-panel form > label:not(.inline),
body[data-page="signup"] .auth-panel form > label:not(.inline) { color: var(--fg) !important; }
body[data-page="login"] .auth-heading .eyebrow,
body[data-page="signup"] .auth-heading .eyebrow,
body[data-page="login"] .strength-label,
body[data-page="signup"] .strength-label,
body[data-page="login"] .password-hint,
body[data-page="signup"] .password-hint { color: var(--fg) !important; }
body[data-page="login"] .auth-panel form > p:last-child a,
body[data-page="signup"] .auth-panel form > p:last-child a { color: var(--link) !important; }
body[data-page="login"] .auth-panel::before,
body[data-page="signup"] .auth-panel::before,
body[data-page="login"] .auth-heading p::after,
body[data-page="signup"] .auth-heading p::after,
body[data-page="signup"] .auth-heading h1::after { display:none !important; }

/* Route-specific surfaces override the historical dark page rules above. */
body.has-side #side,
body.has-side #side .upsell { background: var(--card) !important; color: var(--fg); border-color: var(--line); }
body[data-page="matches"] .lg,
body[data-page="matches"] .fixture-item,
body[data-page="matches"] .filters,
body[data-page="live"] .fixture-item,
body[data-page="favorites"] .fixture-item { background: var(--card) !important; color: var(--fg); border-color: var(--line); }
body[data-page="matches"] .lg-h strong,
body[data-page="live"] .lg-h strong,
body[data-page="favorites"] .lg-h strong,
body[data-page="matches"] .fixture-side strong,
body[data-page="matches"] .pick-value,
body[data-page="live"] .pick-value,
body[data-page="favorites"] .pick-value,
body[data-page="live"] .fixture-side strong,
body[data-page="favorites"] .fixture-side strong { color: var(--fg) !important; }
body[data-page="matches"] .fixture-competition,
body[data-page="live"] .fixture-competition,
body[data-page="favorites"] .fixture-competition,
body[data-page="matches"] .fixture-vs,
body[data-page="live"] .fixture-vs,
body[data-page="favorites"] .fixture-vs { color: var(--fg) !important; }
body[data-page="matches"] .crest.ini,
body[data-page="live"] .crest.ini,
body[data-page="favorites"] .crest.ini { color: var(--fg) !important; background: var(--card) !important; border-color: var(--line) !important; }
body[data-page="matches"] .fixture-selection > span:first-child,
body[data-page="live"] .fixture-selection > span:first-child,
body[data-page="favorites"] .fixture-selection > span:first-child { color: var(--fg) !important; }
body[data-page="matches"] .fixture-meta .fixture-competition,
body[data-page="live"] .fixture-meta .fixture-competition,
body[data-page="favorites"] .fixture-meta .fixture-competition { color: var(--fg) !important; font-weight:650; }
body[data-page="matches"] .fixture-selection,
body[data-page="matches"] .fixture-vs,
body[data-page="live"] .fixture-vs,
body[data-page="favorites"] .fixture-vs { background: var(--card) !important; color: var(--fg) !important; border-color: var(--line) !important; }
body[data-page="matches"] .fixture-item .crest.ini,
body[data-page="live"] .fixture-item .crest.ini,
body[data-page="favorites"] .fixture-item .crest.ini { display:inline-grid !important; place-items:center; flex:none; width:38px; height:38px; border: 1px solid var(--line) !important; border-radius:50%; background: var(--card) !important; color: var(--fg) !important; font-weight:700; opacity:1 !important; }
body[data-page="matches"] .filters { padding:12px 14px; }
body[data-page="match"] .mhero { background: var(--card) !important; color: var(--fg) !important; border-color: var(--line) !important; box-shadow:var(--shadow); }
body[data-page="match"] .mhero .ctx,
body[data-page="match"] .mhero .when,
body[data-page="match"] .mhero .side { color: var(--fg) !important; }
body[data-page="match"] .mhero .vsx { color: var(--fg) !important; background: var(--card); border-color: var(--line); }
body[data-page="home"] .hero.home-hero { background: var(--muted) !important; color: var(--fg) !important; border-color: var(--line) !important; box-shadow:none !important; }
body[data-page="home"] .hero.home-hero p.lead { color: var(--link) !important; }
body[data-page="home"] .home-feature { background: var(--card) !important; color: var(--fg) !important; border-color: var(--line) !important; }
body[data-page="home"] .home-steps .home-step { background: var(--card) !important; color: var(--fg) !important; border-color: var(--line) !important; }
body .prediction-probability strong, body .coupon-confidence strong,
body .plans .plan .price, body .plan li::marker { color: var(--fg) !important; text-shadow:none !important; }
body .quota-card strong { color: var(--fg) !important; }
body .password-control:focus-within { outline:3px solid #245b9a !important; outline-offset:2px; }
main:focus-visible { outline:3px solid #245b9a; outline-offset:-3px; }
body .plan-crown { color: #ffe9b0; background: var(--card); border-color: var(--line); }
body[data-page="coupons"] main > [role="tablist"] { background:transparent !important; border:0; }
body[data-page="coupons"] .coupon-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }

/* Match discovery keeps the search visible and tucks secondary filters away. */
.filters { display:block; padding:12px 14px; border: 1px solid var(--line); border-radius:12px; background: var(--card) !important; }
.filters-primary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filters-primary > input[type="search"] { flex:1 1 220px; min-width:0; }
.filter-advanced { position:relative; }
.filter-advanced > summary { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 13px; border: 1px solid var(--line); border-radius:9px; background: var(--card); color: var(--fg); cursor:pointer; list-style:none; }
.filter-advanced > summary::-webkit-details-marker { display:none; }
.filter-advanced > summary::after { content:"⌄"; font-size:.9rem; }
.filter-advanced[open] > summary::after { content:"⌃"; }
.filter-count { display:inline-grid; min-width:21px; min-height:21px; place-items:center; border-radius:50%; background: var(--card); color: var(--link); font-size:.78rem; font-weight:700; }
.filter-advanced-fields { position:absolute; z-index:20; top:calc(100% + 7px); right:0; display:grid; grid-template-columns:minmax(150px,1fr); gap:8px; width:min(300px,calc(100vw - 40px)); padding:12px; border: 1px solid var(--line); border-radius:12px; background: var(--card); box-shadow:0 8px 24px rgba(24,33,43,.12); }
.filter-advanced-fields select { width:100%; min-width:0; }
.filter-advanced-fields .linkbtn { justify-self:start; min-height:40px; padding:0 8px; background:transparent; color: var(--link); box-shadow:none; }
.coupon-tabs { border:0; background:transparent; }
.coupon-tabs a[aria-current="page"] { background:#315d9b; color:#fff; }
.coupon-tabs a:not([aria-current="page"]) { background: rgba(76, 92, 205, 0.95); color: #fff; border: 1px solid var(--line); }
.tabs { overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.tabs > * { flex:0 0 auto; }
.scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
table { min-width:100%; }
.bnav a, #side nav a, .coupon-tabs a, .filter-advanced > summary { min-height:44px; }
.compare-form { display:grid; gap:12px; max-width:920px; }
.compare-form > label { display:grid; gap:6px; color: var(--fg); font-size:.86rem; font-weight:650; }
.compare-form .row { align-items:center; }
.compare-form .row input { flex:1 1 240px; min-width:0; }
.compare-team-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.compare-team-selects select { width:100%; min-width:0; }
.compare-form > button[type="submit"] { justify-self:start; min-width:150px; }
.admin-field { display:grid; flex:1 1 180px; min-width:160px; gap:6px; color: var(--fg); font-size:.84rem; font-weight:650; }
.admin-field input { width:100%; min-width:0; }
@media (max-width:719px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  body { padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  #layout, main { width:100%; min-width:0; max-width:100%; }
  main { padding-left:16px; padding-right:16px; }
  body[data-page="login"] main, body[data-page="signup"] main { display:flex !important; flex-direction:column; align-items:center; justify-content:center; width:100% !important; min-width:0; max-width:100% !important; margin:0; padding:14px 16px 30px; }
  body[data-page="login"] .auth-panel, body[data-page="signup"] .auth-panel { width:100% !important; max-width:430px; min-width:0; margin:0; padding:18px 16px; }
  .auth-panel form, .auth-panel form > *, .password-control, .password-control input { min-width:0; max-width:100%; }
  #top { width:100% !important; max-width:100%; min-width:0; gap:7px; padding-left:10px; padding-right:10px; }
  body:not(.has-side) #top { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; }
  #top .brand { flex:0 0 auto; margin-right:auto; }
  body:not(.has-side) #top .brand { margin-right:0; }
  #top > .grow { display:none; }
  #top .brand img { height:30px; }
  #top > .btn { min-width:0; min-height:40px; padding:0 10px; font-size:.78rem; }
  #top > .langbtn { min-width:38px; min-height:40px; padding:0 8px; }
  body[data-page="login"] #top > a[href="#/login"],
  body[data-page="signup"] #top > a[href="#/signup"] { display:none; }
  #top .bnav { background: var(--chrome) !important; border-color: var(--line); }
  #top .bnav { left:0; right:0; width:auto; max-width:none; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; }
  #top .bnav a { min-width:0; overflow:hidden; }
  #top .bnav a { color: var(--fg); }
  #top .bnav a[aria-current="page"] { color: var(--blue-700); background:#edf2f7; }
  .filters-primary { align-items:stretch; }
  .filters-primary > input[type="search"] { flex-basis:calc(100% - 110px); }
  .filters-primary > button[type="submit"] { flex:0 0 auto; padding:0 14px; }
  .filter-advanced { flex:1 0 100%; }
  .filter-advanced > summary { justify-content:flex-start; }
  .filter-advanced-fields { position:static; width:100%; margin-top:8px; box-shadow:none; }
  .coupon-tabs { overflow-x:auto; flex-wrap:nowrap; padding:2px 0 8px; }
  .coupon-tabs a { flex:0 0 auto; }
  .compare-form .row { align-items:stretch; }
  .compare-team-selects { grid-template-columns:minmax(0,1fr); }
  .coupon-tabs { scrollbar-width:thin; }
}
@media (max-width:380px) {
  main { padding-left:12px; padding-right:12px; }
  .filters-primary > input[type="search"] { flex-basis:100%; }
  .filters-primary > button[type="submit"] { flex:1; }
}