/* ========================================================================== */
/*  ProbWin – app.css (rationalisé)                                           */
/*  - Design tokens                                                           */
/*  - Base + layout                                                           */
/*  - Navigation & hero                                                       */
/*  - Grids & cards                                                           */
/*  - Components (buttons, pills, badges, chips, tables)                      */
/*  - Games rail                                                              */
/*  - Footer & misc                                                           */
/*  - Glass utilities + transitions                                           */
/*  - Results page                                                            */
/* ========================================================================== */


/* ========== 1) DESIGN TOKENS ============================================== */

:root{
  /* Palette de base */
  --obsidian:#0B0F14;
  --slate-900:#111827; --slate-800:#1F2937;
  --border:#2A3748;

  --text:#E6EAF2; --muted:#94A3B8;
  --white:#FFF; --ink:#0B1220; --ink-muted:#475569;
  --card-border-light:#E2E8F0;

  --gold-600:#FFC73A; --amber-700:#FF8C1A;
  --success:#16A34A; --danger:#EF4444; --info:#A3B4CF;

  --gold-sweep:linear-gradient(45deg,#FFC73A,#FF8C1A);

  /* Ombres & rayons */
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --shadow-soft:0 6px 18px rgba(2,6,23,.08);
  --radius:14px; --radius-lg:18px;

  /* Anneaux glass */
  --ring-weak: rgba(255,255,255,.08);
  --ring:      rgba(255,255,255,.12);
  --ring-strong:rgba(255,255,255,.18);

  /* Layout */
  --container-max: 1200px;
  --stick-top: 76px;       /* hauteur topbar approx. pour filtres sticky */
}


/* ========== 2) BASE & LAYOUT ============================================= */

*{ box-sizing:border-box }

html,body{
  margin:0; padding:0; background:var(--obsidian); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold-600); outline-offset:2px }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 16px }
.home .container,.wide .container{ max-width:100% }
.row{ display:flex; gap:12px; align-items:center }


/* ========== 3) NAVIGATION & HERO ========================================= */

.offer{
  background:var(--gold-sweep); color:#141a22; text-align:center;
  padding:8px 12px; font-weight:700; letter-spacing:.2px;
}
.offer a{ color:#0b0f14; text-decoration:underline }

.topbar{
  position:sticky; top:0; z-index:999;
  background:linear-gradient(90deg,#0B0F14,#111827);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; gap:20px; height:64px }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px }
.logo img{ width:40px; height:40px; object-fit:contain }
.nav .spacer{ flex:1 }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  background: rgba(255,255,255,0.06);   /* ✅ ajout pour contraste */
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  transition: .2s;
}
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); }
.btn-primary {
  background: var(--gold-sweep);
  border-color: transparent;
  color: #0B0F14;
}


.hero{
  position:relative; padding:96px 0 60px; background:url('/assets/hero.jpg') center/cover no-repeat;
}
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(1200px 420px at 50% 20%,rgba(0,0,0,.55),transparent 55%),
    linear-gradient(180deg,rgba(11,15,20,.86) 0%,rgba(11,15,20,.94) 60%,rgba(11,15,20,1) 100%);
}
.hero .container{ position:relative; z-index:1; text-align:center }
.hero h1{ font-size:48px; line-height:1.12; margin:0 0 14px; text-shadow:0 4px 18px rgba(0,0,0,.35) }
.hero p{ color:#D7DFEA; max-width:960px; margin:0 auto 20px }


/* ========== 4) GRIDS & CARDS ============================================= */

.grid{ display:grid; gap:16px }
.grid.cards{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:20px 0 }

.card{
  background:var(--slate-800); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
}
.card.clickable{ cursor:pointer; transition:transform .05s ease-in, border-color .2s }
.card.clickable:hover{ transform:translateY(-1px); border-color:rgba(255,199,58,.35) }

.stage{
  max-width:var(--container-max); margin:18px auto 0;
  background:var(--slate-900); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}


/* ========== 5) COMPONENTS  =============================================== */

/* ————— Pills (base unique) ————— */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--border); background:var(--slate-900); color:var(--text);
}
.pill.lg{ font-size:13px; padding:4px 10px }
.pill.over{ border-color:rgba(22,163,74,.55); color:#166534; background:#E9F7EF }
.pill.under{ border-color:rgba(239,68,68,.55); color:#9F1239; background:#FDE8EC }

/* ————— Badges (générique + variantes) ————— */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.card.match .badge{
  background:#F1F5F9; border:1px solid var(--card-border-light); color:#1E293B;
}
.badge.edge-pos{ background:#E9F7EF; border:1px solid #86EFAC; color:#166534 }
.badge.edge-neg{ background:#FDE8EC; border:1px solid #FCA5A5; color:#9F1239 }

/* Badges probabilités / edges (déjà utilisés) */
.badge-prob{ color:#0b1020 }
.badge-prob.prob-low{ background:#ffd6d6 }
.badge-prob.prob-med{ background:#ffe8b3 }
.badge-prob.prob-high{ background:#e5f3c4 }
.badge-prob.prob-very-high{ background:#c8f5c8 }
.badge-prob.prob-unknown{ background:#e0e0e0 }

.badge-edge{ color:#0b1020 }
.badge-edge.edge-weak{ background:#ececf6 }
.badge-edge.edge-solid{ background:#dfe7ff }
.badge-edge.edge-strong{ background:#cfe4ff }
.badge-edge.edge-very-strong{ background:#b6e3ff }
.badge-edge.edge-elite{ background:#a1ffd6 }
.badge-edge.edge-unknown{ background:#e0e0e0 }

.badge-pick{ border:1px solid var(--border); padding:2px 6px; border-radius:10px; font-size:12px }
.badge-pick.f5{ background:#102a43; color:#8bd3ff }
.badge-pick.ft{ background:#2a1e3f; color:#d6b3ff }

/* ————— Chips résultat (WIN/LOSE/PUSH) ————— */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid rgba(255,255,255,.12) }
.chip-over{  background:#E9F7EF; color:#166534; border-color:#86EFAC }
.chip-under{ background:#FDE8EC; color:#9F1239; border-color:#FCA5A5 }

.pill.win{    border-color:rgba(22,163,74,.55);  color:#166534;  background:#E9F7EF }
.pill.lose{   border-color:rgba(239,68,68,.55); color:#9F1239;  background:#FDE8EC }
.pill.push{   border-color:rgba(148,163,184,.55); color:#0b1220; background:#E5E7EB }
.pill.neutral{border-color:rgba(148,163,184,.35); color:#cbd5e1; background:rgba(148,163,184,.12) }

/* ————— Tables ————— */
.table-responsive{ overflow:auto }
.table-glass{ width:100%; border-collapse:separate; border-spacing:0 }
.table-glass thead th{
  position:sticky; top:0; z-index:1;
  background:rgba(17,24,39,.60);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  text-align:left; font-weight:700; font-size:13px; padding:10px; border-bottom:1px solid var(--border);
}
.table-glass tbody td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.06) }
.table-glass tbody tr:hover{ background:rgba(255,255,255,.03) }
.table-glass .num{ text-align:right }
.mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" }

.matchcell .matchline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.matchcell .away,.matchcell .home{ font-weight:700 }
.matchcell .at{ color:var(--muted) }


/* ========== 6) GAMES RAIL ================================================= */

.gamesrail-wrap{
  background:linear-gradient(90deg,#0B0F14,#111827);
  border-bottom:1px solid var(--border); position:relative;
}
.gamesrail{ display:flex; gap:10px; align-items:stretch; overflow-x:auto; padding:12px 16px; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none }
.gamesrail::-webkit-scrollbar{ display:none }

.game-pill{
  min-width:400px; scroll-snap-align:start; background:var(--white); color:var(--ink);
  border:1px solid var(--card-border-light); border-radius:5px; padding:12px 14px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,auto) minmax(0,1fr);
  gap:10px; align-items:center; box-shadow:var(--shadow-soft)
}
.game-pill .team-col{ display:flex; flex-direction:column; align-items:center; gap:6px }
.game-pill .team-col .name{
  font-weight:800; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(12px,1.6vw,15px)
}
.game-pill .team-col .team-logo.sm{ width:50px; height:50px }
.game-pill .mid{ text-align:center; display:flex; flex-direction:column; gap:2px; line-height:1.2 }
.game-pill .mid .label{ color:var(--ink-muted); font-size:11px; margin-left:4px }

.rail-btn{
  position:absolute; top:58%; transform:translateY(-50%);
  background:#0F1A24; color:var(--text); border:1px solid rgba(255,199,58,.55);
  border-radius:999px; width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.45)
}
.rail-btn.left{ left:10px } .rail-btn.right{ right:10px }


/* ========== 7) FOOTER & MISC ============================================= */

.footer,.legalbar{ width:100%; margin:0 auto; text-align:center }
.footer{ border-top:1px solid var(--border); margin-top:40px; padding:16px 0; color:var(--muted); font-size:14px }
.legalbar{ background:var(--slate-900); border-top:1px solid var(--border); padding:10px 0; color:#B9C6DC; font-size:12px }

.team-logo{ width:28px; height:28px; object-fit:contain; display:inline-block; margin-right:6px; vertical-align:middle }
.logo-fallback{ width:28px; height:28px; line-height:28px; display:inline-grid; place-items:center; border-radius:50%; background:#16202f; color:#E9EEF8; font-weight:800; margin-right:6px; font-size:12px }

.avatar{ position:relative; margin-left:8px }
.avatar .bubble{ display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; font-weight:600; background:#444; color:#fff; font-size:13px }
.avatar .menu{ position:absolute; right:0; top:36px; background:#fff; border:1px solid #ddd; border-radius:6px; padding:8px; min-width:160px; box-shadow:0 6px 24px rgba(0,0,0,.12) }
.avatar .menu a{ display:block; padding:6px 8px; color:#222; text-decoration:none }
.avatar .menu a:hover{ background:#f6f6f6 }
.avatar .menu hr{ border:none; border-top:1px solid #eee; margin:6px 0 }


/* ========== 8) GLASS UTILITIES & TRANSITIONS ============================== */

:root{
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: var(--ring);
  --glass-border-strong: var(--ring-strong);
  --shadow-color: 0,0,0;
}
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 30px rgba(var(--shadow-color),0.35);
  border-radius:16px;
}
.glass-strong{
  background:var(--glass-bg-strong); border-bottom:1px solid var(--glass-border-strong);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
}
.glass-card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(var(--shadow-color),0.40);
}

.scale-in{ animation:scale-in 320ms ease-out both }
@keyframes scale-in{ from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }

.lift{ transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease }
.lift:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(var(--shadow-color),0.45) }

.transition-smooth{ transition:all 200ms ease }

.section-gradient{ position:relative; isolation:isolate }
.section-gradient::before{
  content:""; position:absolute; inset:-10% -20% -20% -20%;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(245,153,0,0.18), transparent 60%),
    radial-gradient(700px 400px at 120% 10%, rgba(22,28,56,0.35), transparent 50%),
    radial-gradient(600px 300px at -20% 20%, rgba(8,12,37,0.35), transparent 50%);
  filter:blur(20px); z-index:-1;
}
.gradient-ring{ position:relative }
.gradient-ring::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(245,153,0,0.55), rgba(255,255,255,0.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.hr-glass{ height:1px; background:linear-gradient(to right, transparent, rgba(255,255,255,0.14), transparent) }

.container-narrow{ max-width:56rem; margin-inline:auto; padding-inline:2rem }
.container-wide{   max-width:80rem; margin-inline:auto; padding-inline:2rem }


/* ========== 9) RESULTS PAGE ============================================== */

.results-header{ padding:16px 16px 8px; margin-top:12px }
.results-header .head-row{ display:flex; align-items:baseline; gap:12px }
.results-header .title{ margin:0 }
.results-header .sub{ font-size:14px }

.kpis-grid{ grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:12px }
.kpi{ padding:14px }
.kpi .kpi-value{ font-size:24px; font-weight:800; letter-spacing:.2px }

/* Filtres */
.filters{
  display:grid; gap:12px; padding:14px; align-items:center; grid-template-columns:1fr;
  margin-top:16px; /* séparation claire du header résultats */
}
.filters.sticky{ position:sticky; top:var(--stick-top); z-index:60 }

.seg-group{ display:grid; grid-template-columns:130px 1fr; align-items:center; gap:10px }
.seg-label{ font-size:13px }
.seg{ display:flex; flex-wrap:wrap; gap:8px }

.pill-toggle{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer }
.pill-toggle input{ display:none }
.pill-toggle.active, .pill-toggle:hover{ border-color:rgba(255,199,58,.45); background:rgba(255,255,255,.08) }

.filters-actions{ margin-left:auto }
@media (min-width:960px){ .filters{ grid-template-columns:1fr 1fr 1fr 1fr auto } }

/* Charts */
.results-charts{ grid-template-columns:1fr; gap:14px; margin:18px 0 }
.results-charts .twin{ grid-template-columns:1fr 1fr; gap:14px }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; padding:8px 12px }
.card-title, .card-head .muted{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Pas de lift sur charts (évite reflow Chart.js) */
.no-lift.lift:hover{ transform:none }
.chart-card{ overflow:hidden }

/* Hauteurs fixes graphiques */
.chart-fixed{ position:relative; width:100%; height:220px }
.chart-fixed.h-220{ height:220px }   /* Bankroll */
.chart-fixed.h-160{ height:160px }   /* Bar charts */
.chart-fixed canvas{ width:100%!important; height:100%!important; display:block }

/* Tableau */
.table-head{ display:flex; align-items:baseline; justify-content:space-between; padding:6px 6px 10px }
.small{ font-size:12px }

/* Mode densité réduite (optionnel) */
.results.dense .kpi{ padding:10px }
.results.dense .table-glass thead th{ padding:8px }
.results.dense .table-glass tbody td{ padding:8px }
.results.dense .chart-fixed.h-220{ height:180px }
.results.dense .chart-fixed.h-160{ height:140px }