.wc2026 {
  --wc-bg: #ffffff;
  --wc-fg: #1a1a2e;
  --wc-muted: #6b7280;
  --wc-accent: #0b6e4f;
  --wc-live: #d62828;
  --wc-today: #16a34a;
  --wc-border: #e5e7eb;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--wc-fg);
  background: var(--wc-bg);
  border: 1px solid var(--wc-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.wc2026 * { box-sizing: border-box; }
.wc2026-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 14px 16px; background: var(--wc-accent); color: #fff;
}
.wc2026-head h3 { margin: 0; font-size: 22px; }
.wc2026-meta { font-size: 12px; opacity: .9; }
.wc2026-stale {
  background: rgba(255,255,255,.25); padding: 1px 6px; border-radius: 6px; margin-left: 6px;
}
.wc2026-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--wc-border); }
.wc2026-tab {
  flex: 1 1 auto; padding: 10px 12px; border: 0; background: #f8fafc;
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--wc-muted); border-bottom: 2px solid transparent;
}
.wc2026-tab.wc2026-active { color: var(--wc-accent); border-bottom-color: var(--wc-accent); background: #fff; }
.wc2026-body { padding: 12px 16px; }
.wc2026-match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--wc-border);
}
.wc2026-match:last-child { border-bottom: 0; }
.wc2026-team { display: inline-flex; align-items: center; gap: 6px; }
.wc2026-team:last-child { justify-content: flex-end; }
/* Équipe extérieure (3e colonne d'un match) : drapeau À DROITE du nom, pour des drapeaux en symétrie. N'affecte pas les classements. text-align:right colle le nom à droite (sous le drapeau) même sur 2 lignes. */
.wc2026-match > .wc2026-team:last-child { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.wc2026-crest { width: 18px; height: 18px; object-fit: contain; }
.wc2026-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; }
.wc2026-score { font-weight: 700; text-align: center; white-space: nowrap; }
.wc2026-time { color: var(--wc-muted); font-size: 13px; text-align: center; white-space: nowrap; }
.wc2026-live { color: var(--wc-live); }
.wc2026-badge {
  background: var(--wc-live); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 6px; margin-left: 4px;
}
.wc2026-live-banner { background: #fff; border: 2px solid var(--wc-live); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 6px 12px; margin-bottom: 12px; }
.wc2026-live-banner h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: var(--wc-live); display: flex; align-items: center; gap: 6px; }
.wc2026-today-banner { background: #fff; border: 2px solid var(--wc-today); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 6px 12px; margin-bottom: 12px; }
.wc2026-today-banner h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: var(--wc-today); display: flex; align-items: center; gap: 6px; }
/* Neutralise la marge haute que certains thèmes (ex. prod) imposent aux h4 globalement. Scopé au widget pour ne pas toucher le reste du site. */
.wc2026 h4 { margin-top: 10px !important; }
.wc2026-live-dot, .wc2026-today-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.wc2026-live-dot { background: var(--wc-live); animation: wc2026-pulse 2s ease-in-out infinite; }
.wc2026-today-dot { background: var(--wc-today); }
@keyframes wc2026-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .wc2026-live-dot { animation: none; } }
.wc2026-day h4, .wc2026-group h4, .wc2026-round h4 {
  margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--wc-muted);
}
.wc2026-empty { color: var(--wc-muted); padding: 16px 0; text-align: center; }
.wc2026-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wc2026-table th, .wc2026-table td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--wc-border); }
.wc2026-table th.wc2026-l, .wc2026-table td.wc2026-l { text-align: left; }
.wc2026-table thead th { background: var(--wc-accent); color: #fff; border-bottom: 0; }
.wc2026-table thead th[data-tip] { position: relative; cursor: help; }
.wc2026-table thead th[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  z-index: 5; background: var(--wc-fg); color: #fff;
  font-weight: 400; font-size: 11px; line-height: 1.3; white-space: nowrap;
  padding: 3px 7px; border-radius: 4px; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.wc2026-table thead th[data-tip]:nth-last-child(-n+3):hover::after { left: auto; right: 0; transform: none; }
.wc2026-bracket { display: flex; gap: 16px; overflow-x: auto; }
.wc2026-round { min-width: 180px; }
.wc2026-cal { background: #f8fafc; margin: -12px -16px; padding: 12px 16px; }
.wc2026-cal .wc2026-day { background: #fff; border: 1px solid var(--wc-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 6px 12px; margin-bottom: 12px; }
.wc2026-cal .wc2026-day:last-child { margin-bottom: 0; }
.wc2026-cal .wc2026-day h4 { margin: 4px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--wc-muted); border-bottom: 1px solid var(--wc-border); padding-bottom: 6px; }
@media (max-width: 520px) {
  .wc2026-head { flex-direction: column; align-items: flex-start; }
  .wc2026-tab { flex-basis: 50%; }
  .wc2026-head h3 { font-size: 20px; }
}