/* =========================================================
   LOTOFOOT — THEME SPORT (sombre par défaut)
   ---------------------------------------------------------
   Vert pelouse + orange action + bleu match
   ========================================================= */

/* ---------- Thème sombre ---------- */
/* THEME CHAMPIONS LEAGUE */
/* Thème par défaut (sombre par ex.) */


:root {
  --bg:#0b0f1a;
  --fg:#e5e8f0;
  --muted:#a3a7b3;
  --card:#11162a;
  --card-bg:#11162a;      /* ajouté pour sticky */
  --border:#1e2745;
  --thbg:#161c33;

  --link:#5ea9ff;
  --primary:#f0c94d;      /* or clair */
  --primary-contrast:#000;
  --danger:#e0456d;
  --danger-contrast:#fff;

  --btn-bg:#151b2d;
  --btn-border:#28345c;

  --badge-grey-bg:#20263d;   --badge-grey-fg:#b9bdd0;   --badge-grey-bd:#333c57;
  --badge-orange-bg:#3a2d14; --badge-orange-fg:#ffd68a; --badge-orange-bd:#584621;
  --badge-green-bg:#142e24;  --badge-green-fg:#7ef0b1;  --badge-green-bd:#214737;
  --badge-purple-bg:#251c42; --badge-purple-fg:#bda3ff; --badge-purple-bd:#3b2d6e;
  --badge-blue-bg:#1a264b;   --badge-blue-fg:#8ec0ff;   --badge-blue-bd:#283b6e;

  --sep: rgba(127,127,127,.35); /* séparateur vertical */
  --shadow:0 8px 22px rgba(0,0,0,.35);
  /* Identité Lotofoot */
  --app-accent: #5ea9ff;   /* bleu */
  --app-accent-2: #f0c94d; /* doré */

  /* FAB Lotofoot */
  --fab-ring-a: var(--app-accent);
  --fab-ring-b: var(--app-accent-2);

  /* optionnel: un cœur plus sombre */
  --fab-core: rgba(0,0,0,0.18);
  --fab-border: rgba(255,255,255,0.18);
}

/* ---------- Thème clair ---------- */
.light {
  --bg:#ffffff;
  --fg:#222;
  --muted:#667479;
  --card:#ffffff;
  --card-bg:#ffffff;      /* ajouté pour sticky */
  --border:#e7ece8;
  --thbg:#f3f7f4;

  --link:#0a7f58;       /* vert foncé en clair */
  --primary:#ff8c00;    /* orange sport */
  --primary-contrast:#fff;
  --danger:#d6336c;
  --danger-contrast:#fff;

  --btn-bg:#f7faf7;
  --btn-border:#dfe7e2;

  --badge-grey-bg:#f1f5f2;  --badge-grey-fg:#40524a;  --badge-grey-bd:#dde6e0;
  --badge-orange-bg:#fff3e5;--badge-orange-fg:#c76711;--badge-orange-bd:#ffe0bf;
  --badge-green-bg:#e6fbf1; --badge-green-fg:#0c7a49; --badge-green-bd:#c8f4e1;
  --badge-purple-bg:#f5efff;--badge-purple-fg:#6a4dd9; --badge-purple-bd:#e5dcff;
  --badge-blue-bg:#eaf3ff;  --badge-blue-fg:#0b5ed7; --badge-blue-bd:#cfe1ff;

  --sep: rgba(0,0,0,.14); /* séparateur vertical */
  --shadow:0 6px 18px rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
html,body {
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:24px;
}
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- Barre du haut ---------- */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.topnav { display:flex; gap:10px; flex-wrap:wrap; }
.topnav a {
  padding:8px 12px;
  border:1px solid var(--btn-border);
  border-radius:10px;
  background:var(--btn-bg);
  color:var(--fg);
  text-decoration:none;
  transition:transform .05s ease, background .15s ease,border-color .15s ease;
}
.topnav a:hover { transform:translateY(-1px); }

/* boutons du menu */
.topnav a.nav-btn{
  padding:8px 12px;
  border:1px solid var(--btn-border);
  border-radius:10px;
  background:var(--btn-bg);
  color:var(--fg);
  text-decoration:none;
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.topnav a.nav-btn:hover{ transform:translateY(-1px); }

/* état actif (base) */
.topnav a.nav-btn.active{
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.25);
  border-color:transparent;
}

/* couleurs par page */
.topnav a.nav-btn.active.admin{ background:#ff8c00; }     /* orange (Administration) */
.topnav a.nav-btn.active.play{ background:#3b82f6; }      /* bleu (Grille en cours) */
.topnav a.nav-btn.active.standings{ background:#10b981; } /* vert (Résultats généraux) */

/* petit indicateur sous l'actif */
.topnav a.nav-btn.active::after{
  content:''; display:block; height:3px; margin-top:6px; border-radius:2px; background:rgba(255,255,255,.9);
}

/* ---------- Bouton thème ---------- */
.theme-toggle {
  padding:8px 12px;
  border:1px solid var(--btn-border);
  border-radius:10px;
  background:var(--btn-bg);
  color:var(--fg);
  cursor:pointer;
}
.theme-toggle:hover { transform:translateY(-1px); }

/* ---------- Cartes / Tableaux ---------- */
.card {
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  margin-bottom:16px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.table-wrap {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
table { border-collapse:collapse; width:100%; background:var(--card); }
th,td { border:1px solid var(--border); padding:8px 10px; text-align:center; }
th { background:var(--thbg); }

/* ---------- Badges / Légende ---------- */
.badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
}
/* Badge PRE-LIVE (pronostiques clos) */
/* Badge PRE-LIVE (pronostiques clos) — Orange moins flashy mais bien visible */
.badge-prelive {
    background: #f9c079;
    color: #7a3f00;
    border: 1px solid #e09d49;
}

/* Badge LIVE (orange plus soutenu) */
.badge-grey   { background:var(--badge-grey-bg); color:var(--badge-grey-fg); border-color:var(--badge-grey-bd); }
.badge-orange { background:var(--badge-orange-bg); color:var(--badge-orange-fg); border-color:var(--badge-orange-bd); }
.badge-green  { background:var(--badge-green-bg); color:var(--badge-green-fg); border-color:var(--badge-green-bd); }
.badge-purple { background:var(--badge-purple-bg); color:var(--badge-purple-fg); border-color:var(--badge-purple-bd); }
.badge-blue   { background:var(--badge-blue-bg); color:var(--badge-blue-fg); border-color:var(--badge-blue-bd); }

.status-wrap { display:flex; gap:8px; align-items:center; justify-content:flex-start; }
.legend { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0 4px; }
.legend .item { display:flex; align-items:center; gap:6px; }
.legend .label { font-size:13px; color:var(--muted); }

/* ---------- Boutons ---------- */
.btn {
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--btn-border);
  border-radius:10px;
  background:var(--btn-bg);
  color:var(--fg);
  cursor:pointer;
  transition:transform .05s ease, background .15s ease,border-color .15s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary {
  background:var(--primary);
  border-color:var(--primary);
  color:var(--primary-contrast);
}
.btn-danger {
  background:var(--danger);
  border-color:var(--danger);
  color:var(--danger-contrast);
}
.pill {
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--btn-bg);
}

/* ---------- Messages ---------- */
.error{
  background:#3a0d12; color:#ffd9de; border:1px solid #ff6b81; padding:10px; border-radius:10px; font-weight:600;
}
.light .error{
  background:#ffe5e9; color:#7a1020; border-color:#ff6b81;
}
.flash {
  background:rgba(126,240,177,.1);
  border:1px solid var(--badge-green-bd);
  color:var(--badge-green-fg);
  padding:10px;
  border-radius:10px;
}

/* ---------- Inputs / Select ---------- */
input[type="text"], input[type="number"], select {
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
}
select:disabled, input:disabled { opacity:.6; }

/* ---------- Titres ---------- */
h1,h2,h3 { margin:8px 0 10px; }
h1 { color:var(--link); text-shadow:0 0 6px rgba(126,240,177,.3); }

/* ---------- Dispositions ---------- */
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ======================= */
/*   VARIANTES DE PALETTE  */
/* ======================= */

/* SPORT (valeurs actuelles) */
html.theme-sport {
  --bg:#0f1411; --fg:#e9f6ee; --muted:#a7b5ad; --card:#131a16; --card-bg:#131a16; --border:#233127; --thbg:#18221c;
  --link:#7ef0b1; --primary:#ff8c00; --primary-contrast:#ffffff; --danger:#d6336c; --danger-contrast:#ffffff;
  --btn-bg:#15221b; --btn-border:#2a3a30;
  --badge-grey-bg:#1f2924; --badge-grey-fg:#b9c7be; --badge-grey-bd:#33443a;
  --badge-orange-bg:#2a1d10; --badge-orange-fg:#ffb266; --badge-orange-bd:#3f2a16;
  --badge-green-bg:#163023; --badge-green-fg:#7ef0b1; --badge-green-bd:#214737;
  --badge-purple-bg:#1d182a; --badge-purple-fg:#c7a6ff; --badge-purple-bd:#31284a;
  --badge-blue-bg:#132235; --badge-blue-fg:#8ec0ff; --badge-blue-bd:#1f3552;
  --ok:#84f0b0; --warn:#ffcf6e; --err:#ff9aa8; --sep:rgba(127,127,127,.35);
  --shadow:0 6px 18px rgba(0,0,0,.25);
}

/* CHAMPIONS (bleu nuit / or) */
html.theme-champions {
  --bg:#0b0f1a; --fg:#e5e8f0; --muted:#a3a7b3; --card:#11162a; --card-bg:#11162a; --border:#1e2745; --thbg:#161c33;
  --link:#5ea9ff; --primary:#f0c94d; --primary-contrast:#000; --danger:#e0456d; --danger-contrast:#fff;
  --btn-bg:#151b2d; --btn-border:#28345c;
  --badge-grey-bg:#20263d; --badge-grey-fg:#b9bdd0; --badge-grey-bd:#333c57;
  --badge-orange-bg:#3a2d14; --badge-orange-fg:#ffd68a; --badge-orange-bd:#584621;
  --badge-green-bg:#142e24; --badge-green-fg:#7ef0b1; --badge-green-bd:#214737;
  --badge-purple-bg:#251c42; --badge-purple-fg:#bda3ff; --badge-purple-bd:#3b2d6e;
  --badge-blue-bg:#1a264b; --badge-blue-fg:#8ec0ff; --badge-blue-bd:#283b6e;
  --sep: rgba(127,127,127,.35);
  --shadow:0 8px 22px rgba(0,0,0,.35);
}

/* STREET (urbain / vert fluo / rouge) */
html.theme-street {
  --bg:#121212; --fg:#f5f5f5; --muted:#aaa; --card:#1e1e1e; --card-bg:#1e1e1e; --border:#333; --thbg:#222;
  --link:#00ff88; --primary:#ff4444; --primary-contrast:#fff; --danger:#ff0066; --danger-contrast:#fff;
  --btn-bg:#1a1a1a; --btn-border:#444;
  --badge-grey-bg:#2a2a2a; --badge-grey-fg:#ccc; --badge-grey-bd:#444;
  --badge-orange-bg:#331c00; --badge-orange-fg:#ffb266; --badge-orange-bd:#553100;
  --badge-green-bg:#00331a; --badge-green-fg:#00ff88; --badge-green-bd:#00552d;
  --badge-purple-bg:#2a0044; --badge-purple-fg:#d88bff; --badge-purple-bd:#400066;
  --badge-blue-bg:#001f44; --badge-blue-fg:#66b2ff; --badge-blue-bd:#003366;
  --sep: rgba(127,127,127,.35);
  --shadow:0 8px 24px rgba(0,0,0,.5);
}

/* CAFE (clair / olive / terre cuite) */
html.theme-cafe {
  --bg:#faf8f2; --fg:#3a352f; --muted:#756c62; --card:#fffaf0; --card-bg:#fffaf0; --border:#ddd2b6; --thbg:#ede4d1;
  --link:#4b6a2a; --primary:#e47c34; --primary-contrast:#fff; --danger:#b03a48; --danger-contrast:#fff;
  --btn-bg:#f6eee1; --btn-border:#e2d2b8;
  --badge-grey-bg:#ece5d8; --badge-grey-fg:#5f574b; --badge-grey-bd:#d6cbb7;
  --badge-orange-bg:#fff2e6; --badge-orange-fg:#b56423; --badge-orange-bd:#f3dab8;
  --badge-green-bg:#f0f8ec; --badge-green-fg:#3a6b2e; --badge-green-bd:#d3e7cb;
  --badge-purple-bg:#f5f2fb; --badge-purple-fg:#7048a0; --badge-purple-bd:#e5dcff;
  --badge-blue-bg:#eef5fb; --badge-blue-fg:#296fa8; --badge-blue-bd:#d4e5f5;
  --sep: rgba(0,0,0,.14);
  --shadow:0 6px 12px rgba(0,0,0,.1);
}

/* ====== Brand / Logo ====== */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo {
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: radial-gradient(ellipse at 30% 30%, #ffffff 0 40%, rgba(255,255,255,0) 41%),
              radial-gradient(ellipse at 70% 70%, rgba(255,255,255,.25) 0 30%, rgba(255,255,255,0) 31%),
              linear-gradient(135deg, #0d6efd22, #ff8c0022);
  border:1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.25) inset;
}
.brand-logo svg { width:18px; height:18px; opacity:.95; }
.brand-text {
  font-weight:800; font-size:18px; letter-spacing:.5px;
  background: linear-gradient(90deg, var(--link), var(--primary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 10px rgba(0,0,0,.15);
}
.brand-sub { font-size:12px; color: var(--muted); margin-left:4px; }
.topbar .right { display:flex; gap:10px; align-items:center; }

/* Actions horizontales */
.actions { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.stack   { display:flex; flex-direction:column; align-items:flex-start; }
.note    { font-size:.85em; margin-top:4px; color:var(--badge-orange-fg); }
.align-top { align-self:flex-start; }

/* Debug status pills */
.pill.debug-on { background:#5a0b0b; color:#ffd9de; border:1px solid #ff6b81; }
.pill.debug-off{ background:#2d3436; color:#b2bec3; border:1px solid #636e72; }
.light .pill.debug-on { background:#ffe5e9; color:#7a1020; border-color:#ff6b81; }
.light .pill.debug-off{ background:#ecf0f1; color:#636e72; border-color:#95a5a6; }

/* Sticky actions (haut/bas) */
.sticky-top, .sticky-bottom {
  position: sticky; z-index: 20; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--card-bg); padding: 8px 10px;
}
.sticky-top   { top: 0; margin: -8px -10px 12px; border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.2) blur(2px); }
.sticky-bottom{ bottom: 0; margin: 12px -10px -8px; border-top: 1px solid var(--border); backdrop-filter: saturate(1.2) blur(2px); }
.card { overflow: visible; }
@supports(padding: max(0px)) { .sticky-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); } }

/* ======================================================
   AJOUTS FONCTIONNELS (séparateur, selects gris, résultat coloré)
   ====================================================== */

/* Séparateur vertical entre “Résultat” et 1er joueur */
.sep-col { border-left:2px solid var(--sep); }

/* Pronos non saisis visibles en lecture seule */
.pick-empty { color: var(--muted); font-weight:700; }

/* <select> visuellement grisé quand valeur vide “—” */
.pick-select.empty { color: var(--muted); opacity:.95; }

/* Tableaux compacts spécifiques */
.table-wrap.small table{ font-size:.85rem; }
.table-wrap.small th, .table-wrap.small td{ padding:3px 6px; }

table.live-table{ font-size:.9rem; }
table.live-table th, table.live-table td{ padding:5px 6px; }

/* Résultat coloré */
.result-cell{
  text-align:center; font-weight:700; border-radius:6px; padding:2px 6px;
  color:#fff; display:inline-block; min-width:1.8em;
}
.result-1{ background:#2ecc71; }   /* vert */
.result-N{ background:#f1c40f; color:#000; } /* jaune */
.result-2{ background:#e74c3c; }   /* rouge */
.result-G{ background:#3498db; }   /* bleu */
.result--{ background:#7f8c8d; }   /* gris */

.hint-badge{
  font-size:.72rem; font-weight:700; padding:2px 6px; border-radius:999px;
  background:var(--badge-grey-bg); color:var(--badge-grey-fg); border:1px solid var(--badge-grey-bd);
  margin-left:6px; white-space:nowrap;
}
/* ===== Médailles du classement (plus grandes et lisibles) ===== */
.rank-card .rank-cell {
  font-size: 1.6rem;       /* taille augmentée */
  text-align: center;
  padding: 4px 0;
  line-height: 1.2;
}

.rank-card .rank-cell.🥇,
.rank-card .rank-cell.🥈,
.rank-card .rank-cell.🥉 {
  filter: drop-shadow(0 0 3px rgba(255,255,255,.4));
}

.rank-card .rank-cell:has(> span[title*="🥇"]),
.rank-card .rank-cell:has(> span[title*="🥈"]),
.rank-card .rank-cell:has(> span[title*="🥉"]) {
  filter: brightness(1.3) drop-shadow(0 0 6px rgba(255,215,0,.5));
}
/* ===== Met en valeur toute la ligne des joueurs médaillés ===== */
.rank-card tr:has(.rank-cell:contains("🥇")),
.rank-card tr:has(.rank-cell:contains("🥈")),
.rank-card tr:has(.rank-cell:contains("🥉")) {
  font-weight: 600;
  font-size: 1.1rem;            /* légèrement plus grand */
  background: rgba(255,255,255,0.03);  /* un fond subtil */
  transition: background 0.3s ease;
}

.light .rank-card tr:has(.rank-cell:contains("🥇")),
.light .rank-card tr:has(.rank-cell:contains("🥈")),
.light .rank-card tr:has(.rank-cell:contains("🥉")) {
  background: rgba(0,0,0,0.03);
}

/* ===== Mise en valeur des lignes médaillées ===== */

/* 🥇 Or */
.rank-card tr:has(.rank-cell:contains("🥇")) {
  font-weight: 650;
  font-size: 1.15rem;
  background: linear-gradient(90deg, rgba(255,215,0,0.08), rgba(255,255,255,0.02));
  color: #ffeaa7;
}

/* 🥈 Argent */
.rank-card tr:has(.rank-cell:contains("🥈")) {
  font-weight: 600;
  font-size: 1.1rem;
  background: linear-gradient(90deg, rgba(200,200,200,0.07), rgba(255,255,255,0.015));
  color: #dfe6e9;
}

/* 🥉 Bronze */
.rank-card tr:has(.rank-cell:contains("🥉")) {
  font-weight: 600;
  font-size: 1.08rem;
  background: linear-gradient(90deg, rgba(205,133,63,0.08), rgba(255,255,255,0.02));
  color: #ffb48a;
}

/* Variante thème clair */
.light .rank-card tr:has(.rank-cell:contains("🥇")) {
  background: linear-gradient(90deg, rgba(255,215,0,0.18), rgba(255,255,255,0.05));
  color: #705a00;
}
.light .rank-card tr:has(.rank-cell:contains("🥈")) {
  background: linear-gradient(90deg, rgba(210,210,210,0.15), rgba(255,255,255,0.05));
  color: #555;
}
.light .rank-card tr:has(.rank-cell:contains("🥉")) {
  background: linear-gradient(90deg, rgba(205,133,63,0.15), rgba(255,255,255,0.05));
  color: #7a3e00;
}

/* Transition douce pour un effet plus fluide */
.rank-card tr:has(.rank-cell:contains("🥇")),
.rank-card tr:has(.rank-cell:contains("🥈")),
.rank-card tr:has(.rank-cell:contains("🥉")) {
  transition: background 0.4s ease, color 0.4s ease;
}
/* Taille des médailles */
.rank-card .rank-cell{
  font-size:1.6rem;
  text-align:center;
  line-height:1.1;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.25));
}

/* Mise en valeur de toute la ligne selon la médaille */
.rank-card tr.is-gold{
  font-weight:650;
  font-size:1.15rem;
  background: linear-gradient(90deg, rgba(255,215,0,0.10), rgba(255,255,255,0.03));
  color:#ffeaa7;
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.18), 0 2px 10px rgba(255,215,0,.08);
}
.rank-card tr.is-silver{
  font-weight:600;
  font-size:1.10rem;
  background: linear-gradient(90deg, rgba(210,210,210,0.08), rgba(255,255,255,0.02));
  color:#e8edf1;
  box-shadow: inset 0 0 0 1px rgba(210,210,210,.16), 0 2px 8px rgba(210,210,210,.06);
}
.rank-card tr.is-bronze{
  font-weight:600;
  font-size:1.08rem;
  background: linear-gradient(90deg, rgba(205,133,63,0.10), rgba(255,255,255,0.03));
  color:#ffc9a3;
  box-shadow: inset 0 0 0 1px rgba(205,133,63,.18), 0 2px 8px rgba(205,133,63,.06);
}

/* Thème clair (contrastes adaptés) */
.light .rank-card tr.is-gold{
  background: linear-gradient(90deg, rgba(255,215,0,0.18), rgba(0,0,0,0.02));
  color:#6c5200;
}
.light .rank-card tr.is-silver{
  background: linear-gradient(90deg, rgba(210,210,210,0.18), rgba(0,0,0,0.02));
  color:#555;
}
.light .rank-card tr.is-bronze{
  background: linear-gradient(90deg, rgba(205,133,63,0.18), rgba(0,0,0,0.02));
  color:#7a3e00;
}

/* Médailles et mise en valeur des lignes */
.medal { margin-right:6px; font-size:1.2rem; vertical-align:middle; }
.medal.gold   { filter: drop-shadow(0 0 6px rgba(255,215,0,.35)); }
.medal.silver { filter: drop-shadow(0 0 6px rgba(200,200,200,.25)); }
.medal.bronze { filter: drop-shadow(0 0 6px rgba(205,127,50,.25)); }

tr.has-medal td {
  font-size: 1.06rem;           /* un léger + pour mettre en valeur */
  font-weight: 600;
  line-height: 1.25;
}
/* --- Emphase des lignes médaillées (Classement Live) --- */
.table-wrap table.compact tr.has-medal td {
  font-size: 1.12rem !important;
  font-weight: 700;
  line-height: 1.3;
}

.table-wrap table.compact tr.has-medal td:first-child .medal {
  font-size: 1.6rem !important;   /* emoji plus gros */
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  transform: translateY(1px);
}

.medal.gold   { filter: drop-shadow(0 0 8px rgba(255,215,0,.45)); }
.medal.silver { filter: drop-shadow(0 0 6px rgba(200,200,200,.35)); }
.medal.bronze { filter: drop-shadow(0 0 6px rgba(205,127,50,.35)); }
/* Bouton désactivé bien lisible */
button[disabled], .btn[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(35%);
  box-shadow: none !important;
}
/* ===== Lignes médaillées brillantes ===== */
.table-wrap table.compact tr.has-medal td {
  font-size: 1.12rem !important;
  font-weight: 700;
  line-height: 1.3;
}

.table-wrap table.compact tr.has-medal td:first-child .medal {
  font-size: 1.6rem !important;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  transform: translateY(1px);
}

/* Glow de la médaille elle-même */
.medal.gold   { filter: drop-shadow(0 0 8px rgba(255,215,0,.45)); }
.medal.silver { filter: drop-shadow(0 0 6px rgba(200,200,200,.35)); }
.medal.bronze { filter: drop-shadow(0 0 6px rgba(205,127,50,.35)); }

/* Ruban de fond discret + liseré selon la médaille */
tr.medal-gold   td {
  background: linear-gradient(90deg, rgba(255,215,0,.07), rgba(255,215,0,0)) !important;
  box-shadow: inset 3px 0 0 rgba(255,215,0,.35);
}
tr.medal-silver td {
  background: linear-gradient(90deg, rgba(192,192,192,.08), rgba(192,192,192,0)) !important;
  box-shadow: inset 3px 0 0 rgba(192,192,192,.35);
}
tr.medal-bronze td {
  background: linear-gradient(90deg, rgba(205,127,50,.08), rgba(205,127,50,0)) !important;
  box-shadow: inset 3px 0 0 rgba(205,127,50,.35);
}

/* ===== Badges/Libellés — taille petite par défaut dans les en-têtes ===== */
.pill.sm { font-size:.8em; padding:1px 6px; vertical-align:baseline; }

h2 .pill, h3 .pill { font-size:.85em; padding:2px 6px; }
h2 .pill.sm, h3 .pill.sm { font-size:.8em; padding:1px 6px; }

.label-sm { font-size:.85em; color:var(--muted); }

/* ===== Sous-titres à côté des titres (uniformisation) ===== */
.section-title {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.section-title .small-muted {
  color: var(--muted);
  font-size: 0.8em;
  font-weight: normal;
  opacity: 0.8;
  margin-bottom: 2px;
}

/* ===== Effets visuels pour lignes médaillées ===== */
tr.rank-1 {
  background:
    linear-gradient(180deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(255,215,0,.25), inset 0 -1px 0 rgba(255,215,0,.15);
  border: 1px solid rgba(255,215,0,.25);
  font-weight: 700;
}
tr.rank-2 {
  background:
    linear-gradient(180deg, rgba(192,192,192,0.08), rgba(192,192,192,0.02)),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(192,192,192,.25), inset 0 -1px 0 rgba(192,192,192,.15);
  border: 1px solid rgba(192,192,192,.25);
  font-weight: 700;
}
tr.rank-3 {
  background:
    linear-gradient(180deg, rgba(205,127,50,0.10), rgba(205,127,50,0.03)),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(205,127,50,.25), inset 0 -1px 0 rgba(205,127,50,.15);
  border: 1px solid rgba(205,127,50,.25);
  font-weight: 700;
}

/* Un peu plus de présence visuelle sur ces lignes */
tr.rank-1 td, tr.rank-2 td, tr.rank-3 td {
  font-size: 1.03em;
}

/* La médaille elle-même un rien plus grande */
.rank-medal {
  font-size: 1.25em; /* déjà utilisé, je le laisse ici au cas où */
}

/* Pour les libellés compacts, partout */
.small-muted {
  font-size: .85em;
  color: var(--muted);
}
/* --- Brand header bigger --- */
.brand-text { font-size: 32px !important; }

/* --- More visual hierarchy for the "Information" card on competition_home --- */
.info-card{
  border:2px solid var(--badge-blue-bd);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  padding:18px;
}
.info-card h2{ font-size:1.25rem; margin-bottom:10px; }

/* --- Section breathing: contrast between headings and content --- */
.section-title { margin-bottom: 8px; }
.section-body { margin-top: 10px; display:flex; flex-direction:column; gap:10px; }
.group-row { padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); }
/* --- HOTFIX alignement 2 tableaux play.php --- */
.grid-left table, .grid-right table {
  table-layout: fixed;
}

.grid-left thead th, .grid-right thead th {
  height: 42px; line-height: 42px;
}

.grid-left tbody td, .grid-right tbody td {
  height: 38px; line-height: 38px;
}

/* Empêcher les retours à la ligne à gauche (évite les lignes plus hautes) */
.grid-left th, .grid-left td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hauteur des <select> calée sur la ligne */
.grid-right select.pick-select {
  height: 32px;
  line-height: 32px;
  display: block;
  width: 100%;
}

/* Le petit séparateur “#” suit la même hauteur */
.sep-col-th, .sep-col-td {
  height: 38px; line-height: 38px;
}
/* =========================================================
   PROFIL DESKTOP COMPACT (PC uniquement)
   ---------------------------------------------------------
   Objectif : ~8–12% plus compact sans casser la hiérarchie
   NB: n'affecte PAS le mobile (≥1024px uniquement)
   ========================================================= */
@media (min-width: 1024px) {
  html, body {
    font-size: 14.5px;      /* base -10% env. */
    margin: 20px;           /* était 24px */
  }

  /* Cartes / sections */
  .card {
    padding: 12px;          /* était 16px */
    margin-bottom: 12px;    /* était 16px */
    border-radius: 12px;    /* était 14px */
  }
  .section-title { gap: 8px; margin-bottom: 6px; }
  .section-body { gap: 8px; }
  .group-row { padding: 8px; border-radius: 8px; }

  /* Info-card (légèrement moins haute) */
  .info-card { padding: 14px; }
  .info-card h2 { font-size: 1.15rem; } /* était 1.25rem */
  .info-big { font-size: 1rem; }        /* était 1.05rem */

  /* Topbar / nav */
  .topbar { margin-bottom: 12px; }
  .topnav, .actions { gap: 8px; }
  .topnav a, .topnav a.nav-btn {
    padding: 6px 10px;      /* était 8px 12px */
    border-radius: 8px;     /* était 10px */
    font-size: .95em;
  }
  .brand-text { font-size: 28px !important; } /* était 32px */

  /* Boutons */
  .btn {
    padding: 6px 10px;      /* était 8px 12px */
    border-radius: 8px;
    font-size: .95em;
  }

  /* Badges / pills */
  .badge {
    font-size: 11px;        /* était 12px */
    padding: 1px 7px;
  }
  .pill { padding: 1px 7px; }
  .pill.sm { font-size: .78em; padding: 1px 5px; }

  /* Tables */
  .table-wrap { border-radius: 10px; }
  table { font-size: .95em; }               /* légère baisse globale */
  th, td { padding: 6px 8px; }              /* était 8px 10px */
  .table-wrap.small table { font-size: .82rem; }
  .table-wrap.small th, .table-wrap.small td { padding: 2px 5px; }
  table.live-table { font-size: .85rem; }   /* était .9rem */
  table.live-table th, table.live-table td { padding: 4px 6px; }

  /* Grille play.php : hauteurs de lignes + selects */
  .grid-left thead th, .grid-right thead th { height: 38px; line-height: 38px; } /* était 42 */
  .grid-left tbody td, .grid-right tbody td { height: 34px; line-height: 34px; } /* était 38 */
  .grid-right select.pick-select { height: 28px; line-height: 28px; }

  /* Résultat coloré (un poil plus fin) */
  .result-cell { padding: 1px 6px; border-radius: 5px; min-width: 1.6em; }

  /* Médailles / rangs – un cran en dessous pour l’ensemble */
  .rank-card .rank-cell { font-size: 1.4rem; }             /* était 1.6rem */
  tr.has-medal td { font-size: 1.02rem; }                  /* était 1.06rem */
  .rank-medal { font-size: 1.15em; }                       /* était 1.25em */

  /* Sticky zones légèrement plus fines */
  .sticky-top, .sticky-bottom { padding: 6px 8px; gap: 8px; }
}
/* ===============================
   MOBILE ULTRA-COMPACT (≤ 768px)
   =============================== */
@media (max-width: 768px) {

  html, body {
    margin: 8px;
    overflow-x: auto;           /* scroll horizontal page */
    -webkit-overflow-scrolling: touch;
  }

  /* Conteneur large calculé : min-width = gauche + (colonne joueur * nb joueurs) */
  .page-hscroll {
    /* 520px ~ bloc gauche + marges + séparateur;
       104px ~ largeur mini d'une colonne joueur (th.player) */
    --players: var(--players, 8);
    min-width: calc(520px + (104px * var(--players)));
  }

  /* Topbar et boutons compacts sur une seule ligne si possible */
  .topbar {
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
  }
  .brand-text { font-size: 18px !important; }
  .topbar .right { gap: 6px; flex-wrap: nowrap; }
  .btn { padding: 6px 8px; font-size: 12px; border-radius: 8px; }

  /* Cartes / titres / textes compacts */
  .card { padding: 10px; margin-bottom: 10px; border-radius: 10px; }
  h1, h2, h3 { margin: 6px 0 8px; }
  .section-title { gap: 6px; align-items: baseline; }
  .section-title .small-muted { font-size: .75em; }

  /* Tables plus denses */
  table { font-size: 12px; }
  th, td { padding: 4px 6px; }
  .table-wrap { border-radius: 10px; }

  /* Grille : forcer la page à scroller horizontalement */
  .grid-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible; /* laisse la page gérer le scroll X */
  }

  .grid-left {
    flex: 0 0 auto;
    min-width: 360px;         /* bloc matches compact mais lisible */
    max-width: none;
    border-right: 2px solid var(--sep);
  }
  .grid-left .col-num  { width: 2.6rem; }
  .grid-left .col-home { width: 140px; }
  .grid-left .col-away { width: 120px; }
  .grid-left .col-stat { width: 180px; }
  .grid-left .col-res  { width: 3.8rem; }

  .sep-col-th, .sep-col-td {
    width: 14px; min-width: 14px; max-width: 14px;
    font-size: .7rem;
  }

  .grid-right {
    flex: 0 0 auto;
    min-width: auto;
    overflow-x: visible;     /* on retire le scroll interne : la page scrolle */
  }
  .grid-right th.player {
    min-width: 104px;        /* base utilisée dans le calc ci-dessus */
    max-width: 104px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .grid-right td.pick-cell { padding: 2px 4px; }
  .grid-right select.pick-select { height: 28px; line-height: 28px; font-size: 12px; }

  /* Légende compacte sur une ligne (wrap si besoin) */
  .legend { gap: 8px; font-size: .86em; }
  .legend .dot { width: 12px; height: 12px; }

  /* Badges + pills plus petits */
  .badge { padding: 1px 6px; font-size: 11px; border-radius: 999px; }
  .pill, .pill.sm { font-size: .75em; padding: 1px 6px; }
}
/* =========================================================
   MODE MOBILE (no-wrap + compaction + scroll horizontal)
   S'applique < 900px, plus fort < 600px
   ========================================================= */
@media (max-width: 900px){
  html, body{
    font-size: 13px;              /* base plus petite */
    margin: 8px;                  /* bords rapprochés */
  }

  /* Conteneurs scrollables par section, pas toute la page */
  .topbar, .topnav, .actions, .legend,
  .card, .table-wrap, .grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Forcer tout sur une seule ligne par défaut */
  .topbar, .topnav, .actions, .legend,
  h1, h2, h3, h4, h5, h6,
  .btn, .badge, .pill, .label-sm, .small-muted,
  table, thead, tbody, tr, th, td,
  input[type="text"], input[type="number"], select, label,
  .section-title, .brand, .brand-text, .brand-sub {
    white-space: nowrap !important;
  }

  /* Cartes / paddings compacts */
  .card{ padding: 10px; border-radius: 12px; }

  /* Titres + sous-titres */
  h1{ font-size: 1.35rem; margin: 6px 0 8px; }
  h2{ font-size: 1.05rem; margin: 6px 0 6px; }
  .section-title{ gap:8px; }
  .section-title .small-muted{ font-size:.78em; margin-bottom:0; }

  /* Topbar compacte */
  .brand-text{ font-size: 20px !important; }
  .topbar .right{ gap:8px; }

  /* Boutons/badges plus fins et en une ligne */
  .btn{
    padding: 6px 8px;
    border-radius: 8px;
    font-size: .92rem;
  }
  .badge, .pill{ font-size: .78rem; padding: 2px 6px; }

  /* Tables : compacts + no-wrap + largeur auto-étirable */
  .table-wrap{
    border-radius: 10px;
    /* important: la table peut s'étirer et scroller horizontalement */
  }
  table{ table-layout: auto; width: max-content; }
  th, td{
    padding: 4px 6px;
    font-size: .92rem;
    text-overflow: clip;   /* pas d'ellipses, on laisse sortir horizontalement */
  }

  /* Inputs / selects plus bas */
  input[type="text"], input[type="number"], select{
    padding: 4px 6px;
    height: 30px;
    font-size: .92rem;
  }

  /* Légende compacte et sur 1 ligne */
  .legend{ gap:8px; font-size:.86rem; }
  .legend .dot{ width:12px; height:12px; }

  /* Badges de statut un poil plus petits */
  .status-wrap .badge{ font-size: .76rem; }

  /* === Spécifique à play.php : grille === */
  .grid-wrap{
    overflow-x: auto;
    border-radius: 10px;
  }
  .grid-left, .grid-right{
    min-width: max-content;
  }

  .grid-left .col-num{ width: 2.6rem; }
  .grid-left .col-home{ width: max-content; padding-right: 8px; }
  .grid-left .col-away{ width: max-content; padding-right: 8px; }
  .grid-left .col-stat{ width: max-content; }
  .grid-left .col-res{ width: 3.6rem; }

  .grid-right th.player{
    min-width: 140px;
    max-width: none;
    font-size: .95rem;
    white-space: nowrap !important;
    overflow: visible;
    text-overflow: clip;
  }

  .grid-right td.pick-cell{ padding: 3px 4px; }
  .grid-right select.pick-select{ height: 30px; }

  .grid-left thead th, .grid-right thead th{
    height: 34px;
    line-height: 1.1;
    padding: 4px 6px;
  }

  .small-muted{ font-size: .8em; }
}

@media (max-width: 600px){
  html, body{ font-size: 12px; margin: 6px; }

  .brand-text{ font-size: 18px !important; }
  .btn{ font-size: .9rem; padding: 5px 7px; }
  .badge, .pill{ font-size: .74rem; padding: 2px 6px; }

  th, td{ font-size: .9rem; padding: 3px 5px; }
  .grid-right th.player{ min-width: 130px; font-size: .9rem; }
  .grid-left .col-res{ width: 3.2rem; }
}
/* =========================================================
   CLASSEMENT GÉNÉRAL – largeur complète + adaptation mobile
   ========================================================= */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-ranking {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;     /* pour uniformiser les colonnes */
}

.table-ranking th,
.table-ranking td {
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;     /* évite les retours à la ligne */
}

/* colonnes plus lisibles sur desktop */
.table-ranking th:nth-child(1),
.table-ranking td:nth-child(1) { width: 60px; }    /* position */
.table-ranking th:nth-child(2),
.table-ranking td:nth-child(2) { text-align: left; } /* nom joueur */
.table-ranking th:nth-child(3),
.table-ranking td:nth-child(3) { width: 90px; }    /* points */
.table-ranking th:nth-child(4),
.table-ranking td:nth-child(4) { width: 90px; }    /* pronos corrects */
.table-ranking th:nth-child(5),
.table-ranking td:nth-child(5) { width: 90px; }    /* bonus, etc. */

/* mode mobile */
@media (max-width: 900px){
  .table-ranking{
    width: max-content;       /* autorise la table à s’étendre */
    min-width: 100%;          /* mais ne rétrécit jamais */
  }
  .table-ranking th,
  .table-ranking td{
    padding: 5px 6px;
    font-size: .9rem;
  }
}

/* =======================================================
   OVERRIDES & RATIONALISATION (à placer tout en bas)
   - Couleurs pronos solides (et <select> transparents)
   - Centrage du texte des selects
   - Taille de boutons uniformisée (un peu plus petite)
   ======================================================= */

:root {
  --btn-height: 28px;     /* hauteur cible des boutons (plus petit) */
  --btn-font: .90rem;     /* taille unifiée par défaut */
  /* Couleurs remplies pour les cases de prono */
  --prono-saved:   hsl(211 88% 50%);  /* bleu soutenu */
  --prono-unsaved: hsl( 41 95% 52%);  /* jaune/orange */
  --prono-good:    hsl(146 50% 42%);  /* vert */
  --prono-bad:     hsl(  4 75% 52%);  /* rouge */
  --prono-neutral: hsl(210 10% 56%);  /* gris bleuté */
}

/* Boutons : taille uniforme partout */
.btn,
.topnav a,
.topnav a.nav-btn,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--btn-height);
  padding: 4px 10px;
  font-size: var(--btn-font);
  line-height: 1;
  border-radius: 10px;
}

button[disabled], .btn[disabled],
.topnav a[aria-disabled="true"] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(35%);
  box-shadow: none !important;
}

/* Grille : cases prono toujours PLEINEMENT colorées */
.grid-table td.pick-cell {
  background: transparent !important;
  background-color: transparent !important;
}

.grid-table td.pick-cell.saved   { background-color: var(--prono-saved)   !important; color: #fff; }
.grid-table td.pick-cell.unsaved { background-color: var(--prono-unsaved) !important; color: #222; }
.grid-table td.pick-cell.good    { background-color: var(--prono-good)    !important; color: #fff; }
.grid-table td.pick-cell.bad     { background-color: var(--prono-bad)     !important; color: #fff; }
.grid-table td.pick-cell.neutral { background-color: var(--prono-neutral) !important; color: #fff; }

/* le <select> ne doit pas repeindre la cellule + centrage */
.grid-table td.pick-cell select {
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  text-align: center;
  text-align-last: center;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.grid-table td.pick-cell option { text-align: center; }

/* autres cellules gardent le fond “card” */
.grid-table td:not(.pick-cell), .grid-table th {
  background-color: var(--card);
}

/* Légende : carrés un poil plus petits */
.legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* En-têtes non gras (demande) */
table thead th { font-weight: 500; }

/* Visuel propre sous colonnes figées */
.grid-left { background: var(--card); }

/* Mobile : un peu d’air sous la barre d’actions */
@media (max-width: 768px) {
  .sticky-top { margin-bottom: 10px; }
}

/* Desktop compact : respecte hauteur unifiée */
@media (min-width: 1024px) {
  .btn,
  .topnav a,
  .topnav a.nav-btn,
  .theme-toggle {
    height: var(--btn-height);
    padding: 4px 10px;
    font-size: .92rem;
  }
}
/* ========== PRONOS : couleurs adoucies mais bien visibles ========== */
/* Remplace l'effet "plein flashy" par un fond teinté + liseré gauche */
.grid-table td.pick-cell {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit;
}
.grid-table td.pick-cell.saved{
  background-color: rgba(96, 140, 255, .22) !important;   /* bleu doux */
  border-left: 3px solid rgba(96, 140, 255, .55);
  color: #e7efff;
}
.grid-table td.pick-cell.unsaved{
  background-color: rgba(255, 193, 7, .22) !important;     /* jaune doux */
  border-left: 3px solid rgba(255, 193, 7, .55);
  color: #fff2cc;
}
.grid-table td.pick-cell.good{
  background-color: rgba(46, 204, 113, .24) !important;    /* vert doux */
  border-left: 3px solid rgba(46, 204, 113, .60);
  color: #e7ffef;
}
.grid-table td.pick-cell.bad{
  background-color: rgba(231, 76, 60, .24) !important;     /* rouge doux */
  border-left: 3px solid rgba(231, 76, 60, .60);
  color: #ffe3df;
}
.grid-table td.pick-cell.neutral{
  background-color: rgba(127, 140, 141, .20) !important;   /* gris doux */
  border-left: 3px solid rgba(127, 140, 141, .45);
  color: #eef1f2;
}
/* Le <select> reste centré et ne recolore pas la cellule */
.grid-table td.pick-cell select{
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  text-align: center;
  text-align-last: center;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ========== TITRES : sous-titre/label un cran plus grand ========== */
/* H1 principal (ex: "Grille — LF…") */
h1.section-title .small-muted{
  font-size: 1.05em;    /* +5% */
}
/* Titre de section “Grille” dans la carte + son petit label à droite */
.card h2.section-title .small-muted{
  font-size: .98em;     /* +3-4% très léger */
}
.card h2.section-title .badge{
  font-size: .95em;
  padding: 3px 8px;
}

/* (Optionnel) un tout petit peu plus d’air sous le h1 sur desktop */
@media (min-width: 1024px){
  h1.section-title{ margin-bottom: 16px; }
}
/* =========================================================
   AJUSTEMENTS SECTION GRILLE (play.php)
   ========================================================= */

/* --- 1️⃣ Titre de section “Grille” un peu plus grand --- */
.card h2.section-title {
  font-size: 1.25rem;   /* +10% */
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

/* --- 2️⃣ Suppression de la première colonne (numéro match) --- */
/* Cache proprement la colonne # (sans casser le reste du layout) */
.grid-left th.col-num,
.grid-left td.col-num {
  display: none !important;
}

/* --- 3️⃣ Police plus grande sur les 4 colonnes descriptives --- */
.grid-left td.col-home,
.grid-left td.col-away,
.grid-left td.col-stat,
.grid-left td.col-res {
  font-size: 1.05rem;        /* +1 cran de lisibilité */
  font-weight: 600;
  letter-spacing: 0.2px;
}

.grid-left th.col-home,
.grid-left th.col-away,
.grid-left th.col-stat,
.grid-left th.col-res {
  font-size: 1.05rem;
  font-weight: 700;
}

/* --- 4️⃣ Ajustements visuels pour conserver l’alignement --- */
.grid-left {
  min-width: calc(100% - 2px);
}
.grid-left table {
  table-layout: fixed;
  width: 100%;
}
.grid-left th, .grid-left td {
  text-align: center;
  padding: 6px 8px;
}

/* --- 5️⃣ Version mobile : police un peu plus grande encore --- */
@media (max-width: 768px) {
  .grid-left td.col-home,
  .grid-left td.col-away,
  .grid-left td.col-stat,
  .grid-left td.col-res {
    font-size: 1.15rem;  /* +10% supplémentaire sur mobile */
  }

  .card h2.section-title {
    font-size: 1.35rem;  /* bien visible même sur petit écran */
  }
}
/* =========================================================
   PC : fige les 5 premières colonnes (jusqu’à "Résultat")
   ========================================================= */

@media (min-width: 1024px) {
  /* Le conteneur global reste scrollable pour les pronostics */
  .grid-wrap {
    display: flex;
    overflow-x: auto;
    position: relative;
  }

  .grid-left {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--card);           /* fond opaque pour cacher le scroll */
    box-shadow: 4px 0 8px rgba(0,0,0,0.2); /* séparation visuelle */
  }

  /* Chaque colonne figée (jusqu’à "Résultat") */
  .grid-left th,
  .grid-left td {
    position: sticky;
    background: var(--card);
    z-index: 6;
  }

  /* Position horizontale de chaque colonne figée */
  .grid-left th.col-num,
  .grid-left td.col-num {
    left: 0;
    z-index: 7;
  }

  .grid-left th.col-home,
  .grid-left td.col-home {
    left: 60px; /* largeur estimée de la première colonne (#) */
  }

  .grid-left th.col-away,
  .grid-left td.col-away {
    left: 220px; /* largeur cumulative : # + domicile */
  }

  .grid-left th.col-stat,
  .grid-left td.col-stat {
    left: 380px; /* + extérieur */
  }

  .grid-left th.col-res,
  .grid-left td.col-res {
    left: 540px; /* + statut/score */
    border-right: 2px solid var(--sep);
  }

  /* S’assure que les pronostics passent sous les colonnes figées */
  .grid-right {
    z-index: 1;
  }

  /* Améliore le rendu visuel : les pronos ne glissent pas derrière */
  .grid-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    background: var(--sep);
    z-index: 8;
  }

  /* Petites améliorations d'espacement */
  .grid-left th, .grid-left td {
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
  }
}
/* ===========================
   GRILLE PLAY — FIXES (PC)
   =========================== */
@media (min-width: 1024px){
  /* Le bloc gauche reste collé et masque les pronos derrière */
  .grid-wrap { position: relative; }
  .grid-left {
    position: sticky;
    left: 0;
    z-index: 6;                  /* au-dessus du bloc pronos */
    background: var(--card-bg);  /* opaque pour éviter la transparence */
    box-shadow: 6px 0 12px rgba(0,0,0,.25); /* léger liseré à droite */
  }
  .grid-left th,
  .grid-left td {
    background: var(--card-bg);  /* renforce l’opacité cellule par cellule */
  }
  /* Le bloc pronos peut scroller sans passer “devant” */
  .grid-right { overflow-x: auto; position: relative; z-index: 1; }
}

/* ===========================
   GRILLE PLAY — MOBILE
   - cacher 1ère colonne
   - grossir 5 premières colonnes
   =========================== */
@media (max-width: 900px){
  /* 1) Cacher la colonne numéro (th & td) */
  .grid-left .col-num,
  .grid-left thead th.col-num,
  .grid-left tbody td.col-num {
    display: none !important;
  }

  /* 2) Grossir la police des 4 colonnes clés */
  .grid-left .col-home,
  .grid-left .col-away,
  .grid-left .col-stat,
  .grid-left .col-res {
    font-size: 1.14rem;          /* + net sans élargir les colonnes */
    font-weight: 600;
    letter-spacing: .1px;
  }

  /* Empêcher l'élargissement en jouant sur la hauteur plutôt que la largeur */
  .grid-left thead th.col-home,
  .grid-left thead th.col-away,
  .grid-left thead th.col-stat,
  .grid-left thead th.col-res,
  .grid-left tbody td.col-home,
  .grid-left tbody td.col-away,
  .grid-left tbody td.col-stat,
  .grid-left tbody td.col-res {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding-top: 6px;            /* on gagne en lisibilité par la hauteur */
    padding-bottom: 6px;
  }
}
/* Bouton Admin — version mobile plus discrète */
@media (max-width: 900px){
  .admin-cta{
    font-size: 11px;
    padding: 4px 8px;
    opacity: .85;
    border-radius: 999px;
    border: 1px dashed var(--btn-border);
    background: transparent;      /* visuel léger */
  }
  .admin-cta:hover{
    opacity: 1;
    background: var(--btn-bg);
    border-style: solid;
  }
}
/* Bouton Admin : bureau = normal, mobile = icône seule et compacte */
.admin-cta .icon { display: none; }
@media (max-width: 900px){
  .admin-cta{
    padding: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px dashed var(--btn-border);
    background: transparent;
    opacity: .9;
  }
  .admin-cta:hover{ opacity: 1; background: var(--btn-bg); border-style: solid; }
  .admin-cta .txt{ display: none; }
  .admin-cta .icon{ display: inline; font-size: 18px; line-height: 1; }
}
/* Bouton retour (flèche) à côté du bouton principal */
.back-btn {
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  margin-right: 6px;
  transition: all .2s ease-in-out;
}
.back-btn:hover {
  background: var(--btn-bg);
  transform: translateY(-1px);
}

/* Version mobile plus compacte */
@media (max-width: 900px){
  .back-btn{
    font-size: 16px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}
/* === FIX chevauchements mobile: Classement général + Grilles fermées === */
@media (max-width: 900px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Laisse le tableau s'étendre et scroller proprement */
  table.table-ranking,
  table.table-closed{
    width:max-content;
    min-width:100%;
    table-layout:auto;
  }

  /* Classement général */
  .table-ranking th, .table-ranking td{
    padding:6px 8px;
    white-space:nowrap;          /* évite la casse des petites cellules */
  }
  /* La colonne "Joueur" peut s'étaler/rentrer à la ligne */
  .table-ranking th:nth-child(2),
  .table-ranking td:nth-child(2){
    white-space:normal;
    max-width:240px;             /* évite qu’elle ne pousse les autres colonnes */
  }
  /* Points, Gains, Nb grilles: largeur mini pour ne pas se chevaucher */
  .table-ranking th:nth-child(3), .table-ranking td:nth-child(3){ min-width:84px; }   /* Points */
  .table-ranking th:nth-child(4), .table-ranking td:nth-child(4){ min-width:84px; }   /* Gains  */
  .table-ranking th:nth-child(5), .table-ranking td:nth-child(5){ min-width:150px; }  /* Nb grilles jouées */

  /* Grilles fermées: élargir Date et Accéder */
  .table-closed th:nth-child(1), .table-closed td:nth-child(1){ min-width:220px; }    /* Libellé + statut */
  .table-closed th:nth-child(2), .table-closed td:nth-child(2){
    min-width:150px; text-align:center;                                               /* Date */
  }
  .table-closed th:nth-child(3), .table-closed td:nth-child(3){ min-width:180px; }    /* Accéder */
  .table-closed td:last-child .btn{ padding:5px 10px; font-size:.92rem; border-radius:8px; }
}
/* === Patch anti-chevauchements / dérives horizontales === */

/* Le conteneur doit scroller proprement s'il manque de place */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Empêche un décalage visuel si un tableau essaye d'occuper "max-content" */
.table-wrap > table{
  margin:0;
  border-collapse:separate; /* évite des artefacts quand les cellules débordent */
  border-spacing:0;
}

/* Par défaut on autorise le retour à la ligne (on annulera cellule par cellule) */
.table-ranking th,
.table-ranking td{
  white-space:normal;
  word-break:keep-all;        /* pas de coupure au milieu d’un mot */
  overflow:hidden;            /* pas de dépassement visuel */
  text-overflow:ellipsis;     /* points de suspension si trop long */
}

/* ===== Classement général ===== */
@media (max-width: 900px){
  /* largeur totale extensible + scroll horizontal si besoin */
  .table-ranking{
    width:max-content;
    min-width:100%;
    table-layout:auto;        /* pas de layout fixe qui écrase tout */
  }

  /* # (col 1) reste compact et non coupé */
  .table-ranking th:nth-child(1),
  .table-ranking td:nth-child(1){
    white-space:nowrap;
    min-width:56px;
    text-align:center;
  }

  /* Joueur (col 2) peut se couper sur plusieurs lignes, mais on limite l'emprise */
  .table-ranking th:nth-child(2),
  .table-ranking td:nth-child(2){
    white-space:normal;
    max-width:260px;
  }

  /* Points (3) & Gains (4): non coupés + largeur mini */
  .table-ranking th:nth-child(3),
  .table-ranking td:nth-child(3){
    white-space:nowrap;
    min-width:88px;
    text-align:center;
  }
  .table-ranking th:nth-child(4),
  .table-ranking td:nth-child(4){
    white-space:nowrap;
    min-width:88px;
    text-align:center;
  }

  /* Nb grilles jouées (5): un peu plus large pour "X / Y" */
  .table-ranking th:nth-child(5),
  .table-ranking td:nth-child(5){
    white-space:nowrap;
    min-width:160px;
    text-align:center;
  }
}

/* ===== Grilles fermées ===== */
/* Ajoute "table-closed" dans le markup du tableau pour activer ces règles */
@media (max-width: 900px){
  table.table-closed{
    width:max-content;
    min-width:100%;
    table-layout:auto;
  }
  /* Col 1: libellé + badge */
  table.table-closed th:nth-child(1),
  table.table-closed td:nth-child(1){
    min-width:260px;
    white-space:normal;
  }
  /* Col 2: Date */
  table.table-closed th:nth-child(2),
  table.table-closed td:nth-child(2){
    min-width:150px;
    white-space:nowrap;
    text-align:center;
  }
  /* Col 3: Accéder (bouton) */
  table.table-closed th:nth-child(3),
  table.table-closed td:nth-child(3){
    min-width:200px;
    white-space:nowrap;
  }
  table.table-closed td:nth-child(3) .btn{
    padding:6px 10px;
    font-size:.92rem;
    border-radius:8px;
  }
}
/* === FIX: tableaux responsives sans chevauchements === */

/* Conteneur scrollable propre */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Tables – repasser en layout auto (pas de fixed qui écrase des colonnes) */
table.table-ranking,
table.table-closed{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;     /* << essentiel */
}

/* Cellules: autoriser les retours à la ligne; ne pas cacher le contenu */
.table-ranking th, .table-ranking td,
.table-closed  th, .table-closed  td{
  border:1px solid var(--border);
  padding:8px 10px;
  text-align:center;
  white-space:normal;     /* << on remet normal */
}

/* ===== Classement général (desktop par défaut) ===== */
.table-ranking th:nth-child(1), .table-ranking td:nth-child(1){ width:60px; white-space:nowrap; } /* # compact */
.table-ranking th:nth-child(2), .table-ranking td:nth-child(2){
  text-align:left;
  min-width:220px;       /* << garanti visible */
  max-width:480px;       /* limite pour éviter d’écraser le reste */
}

/* ===== Grilles fermées (desktop) ===== */
.table-closed  th:nth-child(1), .table-closed  td:nth-child(1){ text-align:left; min-width:280px; }
.table-closed  th:nth-child(2), .table-closed  td:nth-child(2){ min-width:150px; text-align:center; white-space:nowrap; }
.table-closed  th:nth-child(3), .table-closed  td:nth-child(3){ min-width:220px; white-space:nowrap; }

/* ===== Mobile ===== */
@media (max-width: 900px){
  /* Laisser le tableau s’étendre et scroller si besoin */
  .table-ranking, .table-closed{ width:max-content; min-width:100%; }

  .table-ranking th, .table-ranking td,
  .table-closed  th, .table-closed  td{
    padding:6px 7px;
    font-size:.92rem;
  }

  /* Joueur: garde de la place et coupe proprement */
  .table-ranking th:nth-child(2), .table-ranking td:nth-child(2){
    min-width:180px;      /* << visibilité garantie */
    max-width:260px;      /* << évite de tout prendre */
    white-space:normal;
    word-break:break-word;
  }

  /* Grilles fermées: largeur suffisante des colonnes */
  .table-closed  th:nth-child(1), .table-closed  td:nth-child(1){ min-width:260px; }
  .table-closed  th:nth-child(2), .table-closed  td:nth-child(2){ min-width:150px; }
  .table-closed  th:nth-child(3), .table-closed  td:nth-child(3){ min-width:200px; }
  .table-closed  td:nth-child(3) .btn{ padding:4px 8px; font-size:.9rem; border-radius:8px; }
}

/* Force la 2ᵉ colonne "Joueur" à rester visible et large */
.table-ranking{
  table-layout:auto !important;
}
.table-ranking th:nth-child(2),
.table-ranking td:nth-child(2){
  display:table-cell !important;
  visibility:visible !important;
  white-space:normal !important;
  word-break:break-word !important;
  min-width:220px !important;
  max-width:480px;
  text-align:left !important;
  overflow:visible !important;
}

/* Sécurise aussi les autres colonnes pour éviter l’écrasement */
.table-ranking th, .table-ranking td{
  white-space:normal;
}

/* Mobile : garde de la place pour "Joueur" et autorise le scroll horizontal */
@media (max-width:900px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-ranking{ width:max-content; min-width:100%; }
  .table-ranking th:nth-child(2),
  .table-ranking td:nth-child(2){
    min-width:180px !important;
    max-width:260px;
  }
}
/* Ajustement de la largeur de la première colonne ("Grille") */
.table-closed th:nth-child(1),
.table-closed td:nth-child(1){
  min-width: 180px;   /* au lieu de 260-280px précédemment */
  max-width: 220px;
  white-space: normal;
}
/* === Smaller section subtitles (h2) site-wide === */
h2.section-title{
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.15;
  margin: 12px 0 10px;
}
h2.section-title .small-muted{
  font-size: .9em;   /* keep subcaption subdued */
}
@media (min-width: 901px){
  h2.section-title{
    margin: 14px 0 12px;
  }
}
/* === [STAT ALT] Liseré coloré à gauche au lieu du point === */
.col-stat .sstat {
  position: relative;
  padding-left: 12px;            /* place pour le liseré */
  justify-content: flex-start;   /* texte à gauche */
  width: 100%;
}
.col-stat .sstat::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 70%;                   /* hauteur du liseré dans la cellule */
  width: 4px;                    /* épaisseur du liseré */
  border-radius: 3px;
  background: var(--sstat-color, #9aa6b2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
/* On cache l'ancien point coloré */
.col-stat .sstat-dot { display: none; }

/* === [LIVE RANK] Dévaloriser les colonnes "Live" & "Max. possible" === */
.table-wrap th.dimmed,
.table-wrap td.dimmed {
  color: var(--muted);
  opacity: .75;             /* un peu plus léger visuellement */
  font-weight: 500;         /* pas de gras excessif */
}

/* Police un peu plus petite que le reste du tableau */
.table-wrap th.dimmed { font-size: .95rem; }
.table-wrap td.dimmed { font-size: .98rem; }

/* Les en-têtes sur 2 lignes restent lisibles */
.table-wrap th { white-space: normal; line-height: 1.15; }
.subcap { display:block; font-size:.78em; color: var(--muted); margin-top:2px; }

/* === [LIVE RANK - Mobile] réduire la largeur des colonnes dimmed uniquement === */
@media (max-width: 900px){
  /* Min-width plus étroite que la règle générique (150px) */
  .table-wrap table thead th.dimmed { min-width: 110px; padding: 4px 6px; }
  .table-wrap td.dimmed { padding: 6px 6px; }

  /* Légère réduction globale de la typo du tableau de classement (pas la grille) */
  .table-wrap table { font-size: .96rem; }

  /* Les deux colonnes dimmed prennent moins de place en priorité */
  .table-wrap th.dimmed, .table-wrap td.dimmed {
    opacity: .7;            /* encore un cran plus léger sur mobile */
  }
}

/* === [LIVE RANK 2.0] Colonnes "Live" & "Max. possible" atténuées === */
.table-wrap th.dimmed,
.table-wrap td.dimmed {
  color: var(--muted);
  opacity: .75;
  font-weight: 500;
  font-size: .9rem; /* taille plus petite */
  background: color-mix(in srgb, var(--card) 85%, #000 5%); /* fond doux */
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); /* bordure subtile gauche */
  transition: background .25s ease, opacity .25s ease;
}

/* En-têtes à deux lignes harmonisés */
.table-wrap th.dimmed {
  font-size: .88rem;
  line-height: 1.15;
}
.table-wrap th { white-space: normal; line-height: 1.1; }
.subcap {
  display:block;
  font-size:.74em;
  color: var(--muted);
  margin-top:2px;
}

/* Légère séparation visuelle du bloc principal */
.table-wrap th.dimmed:first-of-type,
.table-wrap td.dimmed:first-of-type {
  border-left-width: 2px;
}

/* === [LIVE RANK - Mobile] encore plus léger et étroit === */
@media (max-width: 900px){
  .table-wrap table thead th.dimmed {
    min-width: 95px;
    padding: 3px 4px;
    font-size: .84rem;
  }
  .table-wrap td.dimmed {
    padding: 5px 4px;
    font-size: .88rem;
  }
  .table-wrap th.dimmed, .table-wrap td.dimmed {
    opacity: .7;
    background: color-mix(in srgb, var(--card) 90%, #000 8%);
    border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
}
/* === [LEGEND PASTEL] Harmoniser la légende avec les cases prono === */
/* Palette référente = celles des pick-cells (on les récupère ici) */
:root {
  --pick-good:    hsl(146 50% 46%); /* = .pick-cell.good    */
  --pick-bad:     hsl(  4 75% 52%); /* = .pick-cell.bad     */
  --pick-neutral: hsl(210 10% 56%); /* = .pick-cell.neutral */
  --pick-saved:   hsl(211 88% 50%); /* = .pick-cell.saved   */
  --pick-unsaved: hsl( 41 95% 50%); /* = .pick-cell.unsaved */
}

/* Base plus douce pour toutes les pastilles de légende */
.legend .dot {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  border: 1px solid color-mix(in hsl, var(--border) 70%, transparent);
}

/* Pastels harmonisés (mix avec la carte pour s’adapter au thème) */
.legend .dot.lg-good {
  background: color-mix(in hsl, var(--pick-good) 45%, var(--card));
  border-color: color-mix(in hsl, var(--pick-good) 35%, var(--border));
}
.legend .dot.lg-bad {
  background: color-mix(in hsl, var(--pick-bad) 45%, var(--card));
  border-color: color-mix(in hsl, var(--pick-bad) 35%, var(--border));
}
.legend .dot.lg-neutral {
  background: color-mix(in hsl, var(--pick-neutral) 35%, var(--card));
  border-color: color-mix(in hsl, var(--pick-neutral) 30%, var(--border));
}
.legend .dot.lg-saved {
  background: color-mix(in hsl, var(--pick-saved) 42%, var(--card));
  border-color: color-mix(in hsl, var(--pick-saved) 32%, var(--border));
}
.legend .dot.lg-unsaved {
  /* teinte volontairement plus douce que le jaune "live" des statuts */
  background: color-mix(in hsl, var(--pick-unsaved) 40%, var(--card));
  border-color: color-mix(in hsl, var(--pick-unsaved) 30%, var(--border));
}

/* Optionnel : un tout petit peu plus petits et arrondis, pour l’effet "pastille" */
.legend .dot { width: 11px; height: 11px; border-radius: 6px; }
/* === OVERRIDES ciblés competition_home === */

/* On verrouille la mise en page des deux tables */
.table-ranking,
.table-closed{
  table-layout: fixed !important;
}

/* --- Classement général : colonne "Joueur" compacte --- */
.table-ranking col.col-player{
  width: 200px !important;
  max-width: 200px !important;
}
@media (max-width: 900px){
  .table-ranking col.col-player{
    width: 150px !important;
    max-width: 150px !important;
  }
}

/* Empêche l’élargissement de la cellule "Joueur" */
.table-ranking td:nth-child(2),
.table-ranking th:nth-child(2){
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
}

/* Le contenu texte s’adapte vraiment à la largeur de la cellule */
.table-ranking td:nth-child(2) .rank-player{
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* --- Grilles fermées : colonne "Grille" plus étroite --- */
.table-closed col.col-grid{
  width: 200px !important;
  max-width: 200px !important;
}
@media (max-width: 900px){
  .table-closed col.col-grid{
    width: 160px !important;
    max-width: 160px !important;
  }
}

/* Empêche l’élargissement de la 1re colonne par son contenu */
.table-closed td:nth-child(1),
.table-closed th:nth-child(1){
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
}

/* Texte réellement contraint dans la 1re colonne */
.table-closed td:nth-child(1) .cl-grid-label{
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Le badge passe en dessous pour ne pas élargir la colonne */
.table-closed td:nth-child(1) .badge{
  display: block !important;
  margin-top: 4px !important;
}
/* === Ajustement du badge dans la colonne "Grille" (section grilles fermées) === */
.table-closed td:nth-child(1) .badge {
  display: inline-block !important;
  margin-top: 0 !important;
  margin-left: 6px !important;
  padding: 2px 6px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transform: translateY(-1px); /* petit recentrage vertical */
}

/* Optionnel : pour tous les badges de la page (harmonisation visuelle légère) */
.badge {
  border-radius: 6px !important;
  font-weight: 500 !important;
}
/* === Aligne le texte + badge sur une seule ligne dans la colonne "Grille" === */
.table-closed td:nth-child(1) {
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-grid-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.cl-grid-label {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Badge plus compact mais reste à côté du texte */
.cl-grid-wrap .badge {
  display: inline-block !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
@media (max-width: 900px){
  .table-ranking col.col-base,
  .table-ranking col.col-bonus {
    width:60px !important;
  }
.table-ranking col.col-player { width:130px !important; }
}
/* Rendre Base/Bonus discrets et compacts */
.th-substat,
.td-substat {
  font-size: .9em;
  color: var(--muted);
  white-space: nowrap;
}

/* Mettre en valeur l'entête Total (optionnel, même style que l'autre page) */
.th-total {
  background: rgba(0,0,0,.035);
  font-weight: 700;
  white-space: nowrap;
}
/* Couleur du "Gain Total" (override styles hérités) */
.finance-badge .money .value .net.ok  { color: #16a34a !important; font-weight: 800; }
.finance-badge .money .value .net.bad { color: #dc2626 !important; font-weight: 800; }

/* (optionnel) si tu n'as pas ces conteneurs exacts, la version large passe partout : */
.finance-badge .net.ok  { color: #16a34a !important; font-weight: 800; }
.finance-badge .net.bad { color: #dc2626 !important; font-weight: 800; }

/* En-tête du bloc Classement Général */
.rank-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; /* écart global entre titre+gains et tableau */
}
.rank-title{
  display:flex; align-items:center; gap:8px;
}
.rank-title .cup{ font-size:1.25em; line-height:1; }

/* Bloc financier */
.finance-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: 30px;     /* décale vers la droite */
  padding-top: 6px;      /* ✅ descend légèrement le cochon et le texte */
  padding-bottom: 8px;   /* espace avant le tableau */
}

.finance-top{
  display:flex; align-items:center; gap:8px; font-size:.95rem;
}
.finance-bottom{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
  font-size:.88rem; color:var(--muted);
}

/* Mobile */
@media (max-width:900px){
  .rank-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .finance-block{ align-items:flex-start; padding-right:0; }
}
/* Ligne du médaille d’or (🥇) */
tr.medal-gold {
  background: rgba(255, 215, 0, 0.20);   /* fond légèrement doré */
  font-size: 1.5em;                     /* texte un peu plus grand */
  line-height: 1.6em;                    /* plus d’espace vertical */
  border-width: 2px 0;                   /* souligne la ligne dorée */
  border-color: rgba(255, 215, 0, 0.4);
}
<style>
  /* Remonte le cochon (image/emoji) de 8px */
  .finance-top > span[aria-hidden="true"]{
    display:inline-block;
    transform: translateY(-8px);
  }
  /* Remonte le texte à côté de 16px */
  .finance-top .finance-net{
    display:inline-block;
    transform: translateY(-16px);
  }

  /* Optionnel : léger ajustement en mobile si tu veux conserver l’effet */
  @media (max-width: 900px){
    .finance-top > span[aria-hidden="true"]{ transform: translateY(-8px); }
    .finance-top .finance-net{ transform: translateY(-16px); }
  }
</style>
<style>
  /* 1) Monter le cochon (emoji ou image) de 8px */
  .finance-top > :is(span[aria-hidden="true"], img, svg){
    display: inline-block;
    transform: translateY(-12px);
  }

  /* 2) Monter le texte principal de 16px */
  .finance-top .finance-net{
    display: inline-block;
    transform: translateY(-12px);
  }

  /* 3) Monter le petit texte (ligne des détails) de 16px */
  .finance-bottom{
    transform: translateY(-12px);
  }

  /* Optionnel : conserver les offsets aussi en mobile */
  @media (max-width: 900px){
    .finance-top > :is(span[aria-hidden="true"], img, svg){ transform: translateY(-40px); }
    .finance-top .finance-net{ transform: translateY(-12px); }
    .finance-bottom{ transform: translateY(-12px); }
  }
</style>
/* Variables globales */
:root{
  /* Taille globale du titre de marque (topbar) — change juste cette valeur */
  --brand-size: 24px;     /* essaie 34px, 36px, 40px… */
  --brand-line-height: 1; /* garde le titre bien calé verticalement */
}

/* Titre de marque dans la topbar */
.brand-text{
  font-size: var(--brand-size);
  line-height: var(--brand-line-height);
  font-weight: 800;             /* optionnel : bien “ancré” */
  letter-spacing: 0.2px;        /* optionnel */
  white-space: nowrap;          /* évite les retours à la ligne */
}
/* Force une taille globale du libellé de marque, partout */
.topbar .brand .brand-text{
  font-size: 24px !important;   /* ajuste la valeur à ton goût */
  line-height: 1.1;
  letter-spacing: .3px;
}
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #007bff; /* bleu */
  color: white;
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
/* --- Tableau de résolution joueurs --- */
.resolve-table-wrap{
  overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--card);
}
.resolve-table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:720px;
}
.resolve-table thead th{
  text-align:left; padding:10px; font-weight:700; border-bottom:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 90%, #000 6%);
}
.resolve-table tbody td{
  padding:8px 10px; vertical-align:top; border-bottom:1px dashed var(--border);
}
.resolve-table tbody td + td{ border-left:1px solid var(--border); }
.resolve-table .cell-player{ white-space:nowrap; }
.resolve-table .cell-player .pill{ display:inline-block; }
.resolve-table .choice{
  display:flex; gap:8px; align-items:flex-start; line-height:1.25;
}
.resolve-table .choice label{
  display:flex; gap:8px; align-items:flex-start; cursor:pointer;
}
.resolve-table .hint{ color:var(--muted); font-size:.9em; margin-top:2px; }
.resolve-table select{ min-width:180px; }

/* sur mobile, force un width mini et autorise le scroll horizontal */
@media (max-width: 800px){
  .resolve-table{ min-width:680px; }
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Bouton rond type icône, cohérent avec .btn existant */
.btn-circle {
  border-radius: 999px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Un peu de “code couleur €” */
/* --- bouton argent (style comme ⚙️ mais jaune) --- */
/* Bouton "€" : même base que admin-cta mais en jaune */
.btn-money {
  border: 1px solid #eab308 !important;  /* contour jaune plein */
  color: #eab308 !important;             /* texte/icône jaune */
  background: transparent !important;    /* même fond que le bouton admin */
}

.btn-money .icon {
  color: inherit;                        /* pour être sûr que l'icône hérite bien du jaune */
}
:root{
  --fab-ring-a: #5ea9ff;   /* bleu */
  --fab-ring-b: #f0c94d;   /* doré */
  --fab-core: rgba(0,0,0,0.18);
  --fab-border: rgba(255,255,255,0.18);
}
/* ===== Mode Maison (override final, gagne contre tous les thèmes) ===== */
html{
  --bg: var(--house-bg3, #0b0b12) !important;
  --fg: var(--house-text, #f4f4ff) !important;
  --muted: var(--house-muted, rgba(244,244,255,.72)) !important;

  --card: var(--house-card, rgba(255,255,255,.06)) !important;
  --card-bg: var(--house-card, rgba(255,255,255,.06)) !important;
  --border: var(--house-card-border, rgba(255,255,255,.12)) !important;
  --sep: rgba(255,255,255,.18) !important;

  /* Identité Lotofoot */
  --app-accent: #5ea9ff !important;   /* bleu */
  --app-accent-2: #f0c94d !important; /* doré */

  /* si ton CSS utilise link/primary */
  --link: var(--app-accent) !important;
  --primary: var(--app-accent-2) !important;

  /* FAB (anneau bleu/doré) */
  --fab-ring-a: var(--app-accent) !important;
  --fab-ring-b: var(--app-accent-2) !important;
}
html, body{
  background:
    radial-gradient(1200px 800px at 20% 10%, var(--house-bg1, #2b2a6a), transparent 55%),
    linear-gradient(180deg, var(--house-bg2, #131320), var(--house-bg3, #0b0b12));
}
:root {
  --maison-blue: #5EA9FF;     /* cohérence maison */
  --loto-blue:   #1E3A8A;     /* bleu profond jeu */
  --loto-gold:   #E6B800;     /* doré lisible */
  --loto-gold-soft: #F5D96B; /* doré clair */
}