.sommaire{ position:sticky; top:8px; z-index:20; }
html{ scroll-behavior:smooth; }

.badge-place{
  display:inline-block; min-width:34px; text-align:center;
  padding:3px 8px; border-radius:999px; margin-right:8px; margin-left:0;
  font-weight:800; font-size:12px;
}
.badge-place.p1{ background:#22c55e; color:#0b0f14 }
.badge-place.p2{ background:#eab308; color:#0b0f14 }
.badge-place.p3{ background:#f97316; color:#0b0f14 }
td.col-score{ text-align:right; font-weight:800; letter-spacing:.3px; }


  /* compacter */
.table-wrap table thead th{ padding:9px 8px; font-size:11.5px; }
.table-wrap table tbody td{ padding:9px 8px; }

/* limiter la hauteur des lignes très hautes */
td, th { line-height: 1.25; }

  .podium{padding:10px 14px}
.podium ol{margin:8px 0 0 20px; padding:0}
.podium li{margin:6px 0; font-weight:800}
.podium li span{font-weight:600; color:var(--muted)}
.podium li:first-child{color:#22c55e} /* 1er en vert */

  .match-done  td{ background: rgba(124,58,237,.16) }
.match-todo  td{ background: rgba(255,255,255,.04); color: var(--muted) }
.badge-mini{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px;
  font-weight:700; letter-spacing:.2px;
  border:1px solid transparent; margin-left:8px;
}
.match-done .badge-mini{
  background:#22c55e;   /* vert franc */
  color:#0b0f14;        /* texte foncé lisible */
  border-color:#22c55e;
}
.match-todo .badge-mini{
  background:#6b7280;   /* gris soutenu */
  color:#fff;
  border-color:#6b7280;
}

  .subhead{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,rgba(124,58,237,.10),transparent);
  border-bottom:1px solid var(--border);
}
.subgrid{ display:grid; gap:10px; padding:10px }
@media (min-width: 900px){ .subgrid{ grid-template-columns: 1fr 1fr } }
.subcard{
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
}
.subcard h3{
  margin:0; padding:10px 12px; font-size:14px; text-transform:uppercase;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff;
}
  /* sur mobile : 1 colonne, puis 2 au-dessus de 920px */
@media (max-width: 919px){ .subgrid{ grid-template-columns: 1fr } }
@media (min-width: 920px){ .subgrid{ grid-template-columns: 1fr 1fr } }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#f5f7fb; --panel:#fff; --panel-2:#f7fafc; --text:#0a1220; --muted:#5a6a85;
      --border:#e5ecf5; --accent:#7c3aed; --accent-2:#6d28d9; --shadow:0 10px 20px rgba(15,30,60,.08)
    }
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    background:radial-gradient(1200px 800px at 20% -10%,rgba(124,58,237,.18),transparent 40%),
               radial-gradient(1000px 600px at 110% 10%,rgba(167,139,250,.12),transparent 40%),
               var(--bg);
    color:var(--text);
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  }
  .wrap{max-width:1200px;margin:32px auto;padding:0 16px}
  .hero{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px}
  .title{font-size:clamp(24px,3.2vw,36px);font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;color:transparent}
  .meta{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
  .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:8px 12px;border-radius:999px;box-shadow:var(--shadow)}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
  .ring{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .grid{display:grid;gap:18px}
  @media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}}
  .card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .card h2{margin:0;padding:14px 16px;font-size:18px;font-weight:800;background:linear-gradient(90deg,rgba(124,58,237,.12),transparent);border-bottom:1px solid var(--border)}
  .notice{padding:16px;display:grid;gap:10px}
  .notice .line{display:flex;gap:10px;align-items:flex-start}
  .ico{width:18px;height:18px;border-radius:4px;background:var(--accent);display:inline-block;margin-top:2px;box-shadow:0 0 8px var(--accent)}
  .ico.warn{background:#f59e0b;box-shadow:0 0 6px #f59e0b}
  .ico.info{background:#3b82f6;box-shadow:0 0 6px #3b82f6}
  .line strong{font-weight:800}
  table{width:100%;border-collapse:separate;border-spacing:0}
  thead th{background:linear-gradient(90deg, rgba(124,58,237,.85), rgba(124,58,237,.55));color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:12px;padding:11px 10px;border-bottom:1px solid var(--border)}
  tbody td{padding:10px 10px;color:var(--text);border-bottom:1px solid var(--border)}
  tbody tr:nth-child(odd) td{background: rgba(124,58,237,.07)}
  tbody tr:hover td{background: rgba(124,58,237,.13)}
  .pill{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:12px;box-shadow:0 0 6px var(--accent)}
  .pool-card{margin-top:8px}
  .pool-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,rgba(124,58,237,.18),transparent)}
  .pool-title{font-weight:800}
  .muted{color:var(--muted)}
  .error{color:#fff;background:linear-gradient(180deg,#3a0b0b,#250606);border:1px solid #5a1a1a;padding:12px 14px;border-radius:12px;margin:12px 0}
  .empty{color:var(--muted);padding:12px 16px}
  .hidden{display:none}
  .sommaire{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:8px;
  margin:8px 0 18px;
}
.sommaire a{
  text-align:center;
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  padding:8px 12px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:var(--shadow);
  transition:.2s;
}
.sommaire a:hover{opacity:.85; transform:translateY(-2px)}

/* ====== MOBILE (≤640px) — cartes match compactes ====== */
@media (max-width: 640px){
  .matches thead{
    position:absolute; left:-9999px; top:-9999px;
    height:0; width:0; overflow:hidden;
  }

  .matches, .matches tbody, .matches tr, .matches td{ display:block; width:100% }

  /* Carte match = grille compacte : gauche = joueurs + détails, droite = score */
  .matches tr{
    display:grid;
    grid-template-areas:
      "j1 score"
      "j2 score"
      "meta score";
    grid-template-columns: 1fr auto;
    row-gap: 10px; column-gap: 12px;
    align-items:center;

    background:#0f1520;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:12px; margin:10px 0;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }

  .matches td{
    padding:0; background:transparent; border:0;
    color:#e8eef7; font-size:15px; line-height:1.24;
    white-space:normal; word-break:break-word;
  }

  .matches td.col-j1{ grid-area:j1; font-weight:800; }
  .matches td.col-j2{ grid-area:j2; }
  .matches td.col-meta{ grid-area:meta; display:flex; gap:8px; flex-wrap:wrap; }

  .matches td.col-score{
    grid-area:score;
    justify-self:end;
    text-align:right;
    font-size:22px;
    font-weight:900;
    letter-spacing:.5px;
    padding-left:8px;
  }

  /* petites pastilles (table / heure) */
  .matches .tag{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 8px; border-radius:999px; font-size:12px; font-weight:800;
    background:#eef1ff; color:#1f2a63; border:1px solid #dee6ff;
  }
  .matches .tag b{ font-weight:900 }

  /* états */
  .match-done  { background: #121830; }
  .match-todo  { opacity:.9; }

  /* Rendre les tableaux scrollables sur mobile */
.table-wrap.seed {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* inertie iOS */
}

.table-wrap.seed table {
  min-width: 700px; /* largeur mini pour forcer le scroll */
  border-collapse: separate;
  border-spacing: 0;
}
}
.topbar{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.homebtn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.0));
  transition: transform .15s ease, border-color .15s ease, background .2s ease;
}
.homebtn:hover{ transform: translateY(-1px); border-color: var(--accent2); }
.homebtn:focus{ outline: 3px solid #94a3b8; outline-offset: 2px; }
.homebtn svg{ opacity: .9; }