:root {
  --bg: #0b0f19;
  --panel: #12182a;
  --text: #e8ecf1;
  --muted: #97a3b6;
  --accent: #5dd1ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background: radial-gradient(1000px 500px at 70% -10%, #14203f 0%, var(--bg) 60%);
}
.nav{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
}
.brand{font-weight:700; letter-spacing:.4px}
.links a{color:var(--muted); text-decoration:none; margin-left:12px}
.links a:hover{color:var(--text)}
.wrap{max-width:960px; margin:0 auto; padding:28px 16px}
.hero{
  text-align:center; padding:48px 12px 36px;
}
.hero h1{font-size:clamp(38px,6vw,64px); margin:0 0 10px}
.hero p{color:var(--muted); margin:0 0 24px}
.cta{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700;
  background: linear-gradient(135deg, var(--accent), #7bffd1); color:#0a0a0a; text-decoration:none;
  box-shadow:0 6px 20px rgba(93,209,255,.35);
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.card{
  background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px;
}
.footer{color:var(--muted); text-align:center; padding:18px 12px; border-top:1px solid rgba(255,255,255,.08)}

/* === Matches block === */
.section{margin: 22px 0}
.section-head{display:flex; align-items:baseline; gap:10px; margin:0 0 12px}
.section-head h3{margin:0; font-size:20px; letter-spacing:.2px}
.section-head .muted{color:var(--muted); font-size:13px}

.empty{color:var(--muted); padding:10px 0}

.match-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.match-card{display:flex; flex-direction:column; gap:10px}

/* Teams line */
.match-card .teams{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; letter-spacing:.2px;
}
.match-card .teams .vs{
  color:var(--muted); font-weight:500; padding:0 6px; opacity:.9;
  font-size:12px; text-transform:uppercase; border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}

/* Meta (time + bookmaker) */
.match-card .match-meta{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--muted);
}

/* Odds triplet */
.match-card .odds{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.match-card .odd{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 8px;
  display:flex; align-items:center; justify-content:space-between;
}
.match-card .odd-label{
  font-size:12px; color:var(--muted); font-weight:600;
}
.match-card .odd-value{
  font-weight:800; font-variant-numeric: tabular-nums;
}

/* Hover polish */
.card.match-card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transform: translateY(-1px);
  transition: .15s ease;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle{
  border:1px solid rgba(0,0,0,.1);
  padding:6px 10px; border-radius:999px; cursor:pointer; background:transparent;
  font-size:14px; line-height:1;
}
body.theme-dark .theme-toggle{ border-color:rgba(255,255,255,.2); }

/* ===== SECTION LAYOUT ===== */
.section{margin:22px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px}
.section-head h3{margin:0; font-size:20px; letter-spacing:.2px}
.section-head .muted{color:var(--muted, #6b7280); font-size:13px}
.empty{color:var(--muted, #6b7280); padding:10px 0}

.grid.match-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card.match-card{display:flex; flex-direction:column; gap:10px}

/* Teams line */
.match-card .teams{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; letter-spacing:.2px;
}
.match-card .teams .vs{
  color:var(--muted, #6b7280); font-weight:500; padding:0 6px; opacity:.9;
  font-size:12px; text-transform:uppercase; border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
}
body.theme-dark .match-card .teams .vs{
  border-color: rgba(255,255,255,.12);
}

/* Meta (time) */
.match-card .match-meta{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--muted, #6b7280);
}

/* ===== POINTS (joyeux) ===== */
.match-card .points{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.match-card .point{
  border-radius:14px; padding:12px 10px;
  display:flex; align-items:center; justify-content:space-between;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  border:1px solid transparent;
}
.match-card .point .point-label{ font-size:12px; opacity:.85; font-weight:700; letter-spacing:.3px }
.match-card .point .point-value{ font-size:18px; font-weight:800 }

/* Light palette */
.match-card .point.home{ background:#e3f9e5; color:#14532d; border-color:#c8f2cd } /* vert pastel */
.match-card .point.draw{ background:#fff3bf; color:#92400e; border-color:#ffe79a } /* jaune miel */
.match-card .point.away{ background:#e7f0ff; color:#1e3a8a; border-color:#d6e4ff } /* bleu doux */

/* Dark palette */
body.theme-dark .match-card .point.home{ background:#0f3d2e; color:#a7f3d0; border-color:#145a43 }
body.theme-dark .match-card .point.draw{ background:#3d2f0f; color:#fde68a; border-color:#5a4516 }
body.theme-dark .match-card .point.away{ background:#0f1b3d; color:#93c5fd; border-color:#1b2d5a }

/* Hover polish */
.card.match-card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transform: translateY(-1px);
}
body.theme-dark .card.match-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
/* === Dropdown (Compétitions) === */
.menu{display:flex; gap:16px; align-items:center}
.menu .has-submenu{position:relative}
.menu .submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px; display:none; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:20;
}
.menu .submenu a{display:block; padding:10px 12px; border-radius:8px}
.menu .submenu a:hover{background:rgba(255,255,255,.06)}
.menu .has-submenu:hover .submenu{display:block}
.btn-admin{
  padding:10px 14px; border-radius:10px; background: linear-gradient(135deg, var(--accent), #7bffd1);
  color:#0a0a0a; font-weight:800; text-decoration:none; box-shadow:0 6px 16px rgba(123,255,209,.25);
}