:root {
  --navy: #0a2540;
  --navy-2: #12355c;
  --court: #1f56b3;
  --ball: #d9f23a;
  --ball-line: #ffffff;
  --bg: #eef2f7;
  --card: #ffffff;
  --ink: #0d1b2a;
  --muted: #66758a;
  --line: #dde4ee;
  --chip: #eef2f7;
  --set: #eef2f7;
  --set-w-bg: #0a2540;
  --set-w-fg: #ffffff;
  --ok: #138a4b;
  --ok-bg: #e3f6eb;
  --warn: #a15c00;
  --warn-bg: #fff3dc;
  --err: #b42318;
  --err-bg: #fde7e5;
  --live: #e46c0a;
  --shadow: 0 1px 2px rgba(10, 37, 64, 0.06), 0 2px 8px rgba(10, 37, 64, 0.05);
  --radius: 14px;
  --tabbar-h: 62px;
  --f-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #07131f;
    --card: #0f1f30;
    --ink: #e8eef6;
    --muted: #8d9db2;
    --line: #1f3349;
    --chip: #17293d;
    --set: #17293d;
    --set-w-bg: #d9f23a;
    --set-w-fg: #0a2540;
    --ok-bg: #0f2e20;
    --ok: #5fd39a;
    --warn-bg: #33270f;
    --warn: #f4b860;
    --err-bg: #3a1714;
    --err: #ff8a7f;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #07131f;
  --card: #0f1f30;
  --ink: #e8eef6;
  --muted: #8d9db2;
  --line: #1f3349;
  --chip: #17293d;
  --set: #17293d;
  --set-w-bg: #d9f23a;
  --set-w-fg: #0a2540;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--f-body);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); letter-spacing: 0.01em; line-height: 1.1; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.ok { color: var(--ok); }
.ic { width: 22px; height: 22px; flex: none; }
.ic.sm { width: 17px; height: 17px; }
.ic.xs { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- En-tête ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--navy);
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand .ball { width: 30px; height: 30px; flex: none; }
.brand b { display: block; font: 800 20px/1 var(--f-display); letter-spacing: 0.04em; white-space: nowrap; }
.brand small { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.top-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who { font-size: 13px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-club .top { background: #0d1b2a; border-bottom: 3px solid var(--ball); }

/* ---------- Barre d'onglets ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  position: relative;
}
.tabbar a.on { color: var(--ink); }
.tabbar a.on::before {
  content: '';
  position: absolute;
  top: 0;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--court);
}
@media (prefers-color-scheme: dark) { .tabbar a.on::before { background: var(--ball); } }
@media (min-width: 760px) {
  .tabbar {
    left: 50%;
    right: auto;
    bottom: 14px;
    width: 520px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(10, 37, 64, 0.15);
    height: var(--tabbar-h);
    padding-bottom: 0;
  }
}

/* ---------- Structure ---------- */
main { max-width: 760px; margin: 0 auto; }
.sec { padding: 14px 16px; }
.sec.tight { padding-bottom: 4px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sec-h h2 { font-size: 22px; }
.sec-h a { font-size: 13px; font-weight: 600; color: var(--court); text-decoration: none; }
@media (prefers-color-scheme: dark) { .sec-h a { color: var(--ball); } }
.h1 { font-size: 30px; font-weight: 800; }
.h1.sm { font-size: 22px; }
.vs { color: var(--muted); font-size: 0.75em; padding: 0 4px; }
.lead { color: var(--muted); margin: 6px 0 0; }
.crumb { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.crumb a { color: inherit; }
.list { display: grid; gap: 10px; }
.day { font-size: 19px; margin: 18px 0 8px; }
.day:first-child { margin-top: 4px; }
.day small { font: 500 13px var(--f-body); color: var(--muted); margin-left: 6px; }
.champ { display: inline-flex; gap: 6px; align-items: center; margin: 8px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--ball); color: var(--navy); font-weight: 600; }

/* ---------- Héro ---------- */
.hero {
  position: relative;
  margin: 0;
  padding: 18px 16px 18px;
  color: #fff;
  background: linear-gradient(170deg, var(--navy) 0%, var(--navy-2) 55%, var(--court) 140%);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 14px -40px -60px 45%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(transparent 30%, rgba(255, 255, 255, 0.1) 30% calc(30% + 2px), transparent calc(30% + 2px));
  z-index: -1;
}
@media (min-width: 760px) { .hero { border-radius: 0 0 20px 20px; padding: 26px 24px; } }
.kicker { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ball); text-transform: capitalize; }
.hero h1 { font-size: 36px; font-weight: 800; text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.stats div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); }
.stats b { display: block; font: 800 28px/1 var(--f-display); }
.stats span { font-size: 12px; opacity: 0.8; }
.stats.dark div { background: var(--card); box-shadow: var(--shadow); }
.stats.dark span { color: var(--muted); opacity: 1; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 12px; background: #fff; color: var(--navy); }
.search input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--navy); }
.search.solo { margin-top: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.search.solo input { color: var(--ink); }

/* ---------- Cartes ---------- */
.card, .mc, .lc { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.card { padding: 14px; margin-bottom: 10px; }
.card h2 { font-size: 20px; margin-bottom: 10px; }
.card.big { padding: 16px; }
.card.link { display: block; text-decoration: none; }
.card.link small { display: block; color: var(--muted); font-size: 12px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--chip); color: var(--muted); }
.b-scheduled { background: #e5edff; color: #2449a8; }
.b-live { background: #ffeedd; color: var(--live); }
.b-done { background: var(--ok-bg); color: var(--ok); }
@media (prefers-color-scheme: dark) {
  .b-scheduled { background: #15284a; color: #9db8ff; }
  .b-live { background: #3a2410; color: #ffb36b; }
}

/* Carte de match */
.mc { display: block; padding: 11px 13px 12px; text-decoration: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mc-n { font-size: 12px; font-weight: 600; color: var(--muted); }
.mc-foot { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.mc-foot.warn { color: var(--warn); font-weight: 600; }
.mc.st-live { border-left: 4px solid var(--live); }
.mc.st-tbd { opacity: 0.85; }
.mc-bye { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; box-shadow: none; background: transparent; border-style: dashed; }
.mc-bye .names { flex-direction: row; flex-wrap: wrap; column-gap: 4px; font-size: 13.5px; }
.mc-bye .names span { font-weight: 600; font-size: 13.5px; }
.mc-bye .names span + span::before { content: '/ '; color: var(--muted); }
.byetag { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mc-empty { display: none; }
a.mc:active, a.lc:active, a.card:active { transform: scale(0.99); }

/* Grille des scores */
.grid { display: grid; align-items: center; column-gap: 10px; row-gap: 7px; }
.grid.c0 { grid-template-columns: minmax(0, 1fr); }
.grid.c1 { grid-template-columns: minmax(0, 1fr) auto; }
.grid.c2 { grid-template-columns: minmax(0, 1fr) auto auto; }
.grid.c3 { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.gh { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: -3px; }
.gt { display: flex; align-items: center; gap: 7px; min-width: 0; }
.names { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.names span { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.names.muted span { color: var(--muted); font-weight: 500; font-style: italic; }
.gt.lose .names span { color: var(--muted); font-weight: 500; }
.gt.win .names span { font-weight: 700; }
.q { flex: none; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--ball); color: var(--navy); }
.q svg { width: 12px; height: 12px; }
.sets { display: flex; gap: 3px; justify-content: center; }
.sets i {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 29px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--set);
  color: var(--muted);
  font: 700 18px/1 var(--f-display);
  font-style: normal;
}
.sets i.w { background: var(--set-w-bg); color: var(--set-w-fg); }
.sets.dec i { outline: 2px solid var(--ball); outline-offset: -2px; }

/* Carte d'une manche */
.lc { display: flex; gap: 12px; padding: 11px 13px; text-decoration: none; }
.lc-time { flex: none; width: 50px; padding-top: 2px; text-align: center; border-right: 1px solid var(--line); padding-right: 10px; }
.lc-time b { display: block; font: 800 20px/1 var(--f-display); }
.lc-time small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); line-height: 1.2; }
.lc.played .lc-time b { color: var(--ok); }
.lc-body { flex: 1; min-width: 0; }
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.lc-leg { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.lc-place { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* Pastilles / segments */
.pills { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills.wrap { flex-wrap: wrap; padding: 0; overflow: visible; }
.pills a { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.pills a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { .pills a.on { background: var(--ball); border-color: var(--ball); color: var(--navy); } }
[data-pills] { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 10; background: var(--bg); }
.seg { display: inline-flex; margin-top: 10px; padding: 3px; border-radius: 10px; background: var(--chip); }
.seg a { padding: 6px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--muted); }
.seg a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* Tableau (bracket) : un tour par écran sur mobile, glisser pour changer */
.bracket {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 4px 16px 16px;
  margin: 0 calc(50% - 50vw);
  scrollbar-width: thin;
  position: relative;
}
.round { flex: 0 0 min(88vw, 360px); scroll-snap-align: start; display: flex; flex-direction: column; }
.round-h { font-size: 18px; margin: 4px 0 10px; }
.round-h small { font: 600 12px var(--f-body); color: var(--muted); margin-left: 4px; }
.round-m { display: flex; flex-direction: column; gap: 10px; flex: 1; }
@media (min-width: 900px) {
  .bracket { padding-left: max(16px, calc(50vw - 600px)); }
  .round { flex-basis: 300px; }
  .round-m { justify-content: space-around; }
}

/* Page match */
.qual { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 14px; }
.qual.warn { background: var(--warn-bg); color: var(--warn); }
.leg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.leg-h h3 { font-size: 18px; }
.when { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.dec-score { margin: 0; font: 800 30px/1 var(--f-display); }
.actions { display: flex; gap: 10px; margin: 14px 0; }
.actions .btn { flex: 1; }

/* Boutons & formulaires */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 700 15px var(--f-body);
  text-decoration: none;
  cursor: pointer;
}
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { background: var(--ball); border-color: var(--ball); color: var(--navy); } }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.block { width: 100%; }
.form label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input, .form select, .team-f input, .team-f select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: 16px var(--f-body);
}
.form input:focus, .form select:focus { outline: 2px solid var(--court); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.fs { border: 1px solid var(--line); margin: 0 0 12px; padding: 12px 14px 4px; }
.fs legend { padding: 0 6px; font: 800 19px var(--f-display); color: var(--ink); }
.sc { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.sc th { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 0 2px 4px; }
.sc tbody th { text-transform: none; font-size: 13px; color: var(--ink); text-align: left; font-weight: 600; max-width: 120px; line-height: 1.2; padding-right: 6px; }
.sc td { padding: 3px; text-align: center; }
.form input.num { width: 52px; min-height: 50px; padding: 0; text-align: center; font: 800 24px var(--f-display); }
.inline { flex-direction: row !important; align-items: center; gap: 10px !important; }
.inline select { flex: 1; }
.radio { flex-direction: row !important; align-items: center; gap: 10px !important; color: var(--ink) !important; font-size: 14.5px !important; font-weight: 500 !important; }
.radio input { width: 22px; min-height: 22px; flex: none; accent-color: var(--court); }
.leg-out { margin: -2px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ok); min-height: 1em; }
[data-decider].need { border-color: var(--live); box-shadow: 0 0 0 3px rgba(228, 108, 10, 0.15); }
.savebar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px);
  display: flex;
  gap: 10px;
  padding: 10px;
  margin: 0 -6px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
}
.savebar .btn { flex: 1; }
@media (min-width: 760px) { .savebar { bottom: calc(var(--tabbar-h) + 22px); } }
.flash { margin: 10px 0; padding: 11px 13px; border-radius: 11px; background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 500; }
.flash.err { background: var(--err-bg); color: var(--err); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.pw { display: inline-block; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--card); color: var(--ink); font-size: 16px; user-select: all; }
.login { max-width: 420px; margin: 0 auto; padding-top: 28px; }

/* Listes club */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.log small { color: var(--muted); font-size: 12px; }
.users { list-style: none; margin: 0; padding: 0; }
.users li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.users li:first-child { border-top: 0; }
.users small { display: block; color: var(--muted); font-size: 12px; }
.teams { list-style: none; margin: 0; padding: 0; }
.team-f { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.team-f input { grid-column: 1 / -1; }
.team-f small { grid-column: 1 / -1; }
.report { margin: 0; padding-left: 18px; font-size: 13.5px; }
.report li { margin-bottom: 8px; }
.team-r { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.team-r small { font-size: 12.5px; font-weight: 600; }
.names-h { display: flex; flex-direction: column; }

.empty { padding: 26px 18px; border-radius: var(--radius); border: 1px dashed var(--line); text-align: center; color: var(--muted); }
.empty-t { margin: 0 0 4px; font: 700 19px var(--f-display); color: var(--ink); }
.empty p { margin: 0 0 6px; }
.empty .btn { margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .bracket { scroll-behavior: smooth; }
}
.team-r .chip { align-self: flex-start; }
@media (max-width: 440px) { .who { display: none; } }

/* Programme */
.day-empty { margin: 0 0 6px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); }
.next { display: block; padding: 9px 11px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 14px; line-height: 1.35; }
.next small { color: var(--ink); opacity: 0.75; font-size: 12.5px; }
.next.none { background: var(--chip); color: var(--muted); font-weight: 500; }
.next-card { margin-top: 12px; padding: 4px; }
.pills.days a { min-width: 64px; text-align: center; text-transform: capitalize; }
.jump { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px; }
.jump label { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.jump input { min-height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 15px var(--f-body); }
.prog { margin: 0; }
.prog-t { margin: 0 0 10px; font-size: 14.5px; line-height: 1.35; }
.prog-f { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
.prog-f input, .prog-f select { min-height: 42px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 15px var(--f-body); min-width: 0; }
.prog-f input[name='court'] { grid-column: 1; grid-column: span 1; }
.prog-a { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.prog-a a { color: var(--court); font-weight: 600; }
.linkbtn { border: 0; background: none; padding: 6px 0; color: var(--err); font: 600 13px var(--f-body); cursor: pointer; }
@media (max-width: 380px) { .tabbar a span { font-size: 10.5px; } }

/* Onglets des catégories (page Tableaux) */
.cat-tabs { display: flex; gap: 4px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs a { flex: none; padding: 8px 12px 10px; font: 700 17px/1 var(--f-display); letter-spacing: 0.02em; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cat-tabs a.on { color: var(--ink); border-bottom-color: var(--court); }
@media (prefers-color-scheme: dark) { .cat-tabs a.on { border-bottom-color: var(--ball); } }

/* Programme : 3 jours glissants */
.hero.slim { padding-bottom: 16px; }
.hero.slim h1 { margin-bottom: 0; }
.daytabs { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.daytabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.daytabs small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.daytabs a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.daytabs a.on small { color: var(--ball); }
@media (prefers-color-scheme: dark) { .daytabs a.on { background: var(--ball); border-color: var(--ball); color: var(--navy); } .daytabs a.on small { color: var(--navy); } }

/* Séparateurs dans les cartes et les tableaux */
.gsep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 1px 0; }
.sets.sep, .gh.sep { border-left: 1px solid var(--line); padding-left: 9px; }
.gh.sep { padding-left: 10px; }
.round-m { gap: 18px; }
.mg { display: flex; flex-direction: column; gap: 6px; position: relative; }
.mg.pair { padding-right: 12px; }
.mg.pair::after { content: ''; position: absolute; right: 0; top: 22px; bottom: 22px; width: 8px; border: 2px solid color-mix(in srgb, var(--muted) 45%, transparent); border-left: 0; border-radius: 0 10px 10px 0; }
.mg + .mg { padding-top: 16px; border-top: 1px dashed var(--line); }
@media (min-width: 900px) { .mg + .mg { border-top: 0; padding-top: 0; } }

/* Logos */
.brand-logo { width: 26px; height: 35px; object-fit: contain; flex: none; background: #fff; border-radius: 6px; padding: 2px; }
.clubs-vs { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.clubs-vs .cl { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.clubs-vs .cl:last-child { flex-direction: row-reverse; text-align: right; }
.clubs-vs img { width: 46px; height: 46px; flex: none; object-fit: contain; border-radius: 12px; background: #fff; padding: 3px; }
.clubs-vs b { font: 700 16px/1.1 var(--f-display); letter-spacing: 0.02em; }
.clubs-vs .x { font: 800 20px var(--f-display); color: var(--ball); }
.place { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.clogo { width: 18px; height: 18px; object-fit: contain; border-radius: 50%; background: #fff; flex: none; }
.sponsor { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 16px 8px; padding: 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.sponsor span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #66758a; }
.sponsor img { width: min(280px, 80%); height: auto; }

/* Place conditionnelle : « Vainqueur du match de 17h00 » */
.names.cond em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--live); }
.names.cond span { font-weight: 500; font-size: 13.5px; color: var(--muted); }
.names.cond i { font-style: normal; font-size: 12px; }

/* Signature */
.credit { margin: 6px 16px 12px; text-align: center; font-size: 11px; letter-spacing: 0.03em; color: var(--muted); opacity: 0.75; }

/* Programme groupé par club */
.venue + .venue { margin-top: 22px; }
.venue-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 21px; }
.venue-h img { width: 34px; height: 34px; object-fit: contain; border-radius: 9px; background: #fff; border: 1px solid var(--line); padding: 2px; }
.venue-h span { display: flex; flex-direction: column; }
.venue-h small { font: 500 12px var(--f-body); color: var(--muted); }

/* Logo du club en bas des cartes du programme */
.clogo.lg { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); padding: 1px; }