/* ============================================================
   Concours Pronostics CDM 2026 — devillard
   Direction artistique : "broadcast sportif / scoreboard de stade"
   Thème sombre profond · jaune électrique devillard · typo Anton + Hanken Grotesk
   ============================================================ */

/* Polices hébergées en LOCAL (fonctionne hors-ligne, aucune dépendance Google).
   Hanken Grotesk = police variable : un seul fichier couvre les graisses 400→800. */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/hanken-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('../fonts/hanken-italic-latin.woff2') format('woff2');
}

:root{
  color-scheme: dark;

  /* Surfaces */
  --bg:#0a0b0e;
  --bg-2:#101218;
  --card:#15181f;
  --card-2:#1b1f28;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);

  /* Texte */
  --ink:#eef0f2;
  --muted:#8a909c;

  /* Accent (jaune devillard). branding.js réécrit --green/--green-d/--gold. */
  --gold:#f9d400;
  --gold-d:#d9b800;
  --green:#f9d400;     /* bouton primaire = accent */
  --green-d:#d9b800;   /* survol + texte d'accent doré */

  /* Sémantique */
  --good:#3ddc84;
  --warn:#ffb020;
  --bad:#ff5a5a;

  --radius:16px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5);
  --glow:0 0 0 3px rgba(249,212,0,.22);

  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}

html,body{background:var(--bg)}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(249,212,0,.12), transparent 60%),
    radial-gradient(760px 480px at 92% 4%, rgba(249,212,0,.05), transparent 55%),
    radial-gradient(900px 600px at 8% 18%, rgba(80,120,255,.05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* Texture fine de "lignes de terrain" */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 92px);
}
.hidden{display:none !important}

::selection{background:var(--gold);color:#111}

/* Barre de défilement */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box}

/* ============================================================
   En-tête (sticky, verre dépoli, liseré or)
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:.7rem 1.2rem;
  background:linear-gradient(180deg, rgba(16,18,24,.92), rgba(10,11,14,.82));
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(249,212,0,.35), 0 14px 30px -22px #000;
}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand .ball{font-size:2rem}
.brand h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:1.35rem;line-height:.96;letter-spacing:.02em;text-transform:uppercase;
}
.brand p{
  margin:.22rem 0 0;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:700;opacity:.9;
}

.nav{display:flex;align-items:center;gap:.4rem;flex:1}
.nav .spacer{flex:1}
.nav button{
  background:rgba(255,255,255,.05);color:var(--ink);border:1px solid transparent;
  padding:.5rem .95rem;border-radius:10px;cursor:pointer;
  font-family:var(--font-body);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  transition:background .18s, color .18s, border-color .18s, transform .12s;
}
.nav button:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.nav button.active{background:var(--gold);color:#0a0b0e;font-weight:800;box-shadow:0 6px 18px -8px rgba(249,212,0,.7)}
.nav button.ghost{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.nav button.ghost:hover{color:var(--ink);border-color:var(--ink)}
.who{font-size:.82rem;color:var(--muted);font-weight:600}
.who::before{content:"●";color:var(--good);margin-right:.35rem;font-size:.6rem;vertical-align:middle}

/* Bouton bascule de thème */
.theme-btn{
  margin-left:auto;flex:none;width:40px;height:40px;border-radius:11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--ink);
  transition:background .16s, transform .12s;
}
.theme-btn:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}

/* Variante claire (si headerStyle:'light' réactivé un jour) */
.topbar.brand-light{background:#f9d400;color:#111;box-shadow:var(--shadow)}
.topbar.brand-light .brand h1,.topbar.brand-light .who{color:#111}
.topbar.brand-light .brand p{color:#111;opacity:.7}
.topbar.brand-light .nav button{background:rgba(0,0,0,.08);color:#111}
.topbar.brand-light .nav button.active{background:#111;color:#f9d400}

/* Logos */
.logo-img{height:2.4rem;width:auto;max-width:140px;object-fit:contain;border-radius:8px;display:block;background:#fff;padding:3px 5px}
.wc-logo{height:2.9rem;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

main{max-width:940px;margin:0 auto;padding:1.6rem 1rem 5rem;position:relative;z-index:1}

/* ============================================================
   Titres & éléments génériques
   ============================================================ */
h2{
  margin:.2rem 0 1.1rem;font-family:var(--font-display);font-weight:400;
  font-size:2rem;line-height:1;letter-spacing:.01em;text-transform:uppercase;
}
h2::after{content:"";display:block;width:56px;height:4px;margin-top:.5rem;border-radius:4px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.muted{color:var(--muted)}

.card{
  background:linear-gradient(180deg, var(--card), var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;box-shadow:var(--shadow);
}
.card + .card{margin-top:1rem}

/* Boutons */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:.92rem;
  background:var(--gold);color:#0a0b0e;border:0;
  padding:.62rem 1.15rem;border-radius:11px;cursor:pointer;
  letter-spacing:.01em;
  box-shadow:0 8px 20px -10px rgba(249,212,0,.6);
  transition:transform .12s, box-shadow .18s, background .18s, filter .18s;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(249,212,0,.75)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.gold{background:var(--gold);color:#0a0b0e}
.btn.sm{padding:.4rem .72rem;font-size:.8rem;border-radius:9px;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--ink);box-shadow:none;border:1px solid var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,.1);filter:none}
.btn.danger{background:#2a1416;color:#ff8d8d;border:1px solid rgba(255,90,90,.35);box-shadow:none}
.btn.danger:hover{background:#3a181b;color:#ffb3b3;filter:none}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}

a.btn{display:inline-block;text-decoration:none}

/* Champs de formulaire */
input,select,textarea{
  font:inherit;font-family:var(--font-body);
  padding:.6rem .7rem;border:1px solid var(--line-2);border-radius:10px;
  background:#0e1015;color:var(--ink);width:100%;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder,textarea::placeholder{color:#5a606b}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--glow);background:#0c0e12}
input:disabled{opacity:.6;cursor:not-allowed}
label{display:block;font-size:.74rem;color:var(--muted);margin:.7rem 0 .25rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* Champ mot de passe avec bouton afficher/masquer */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:2.7rem}
.pw-eye{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;font-size:1.05rem;line-height:1;
  padding:.25rem .35rem;border-radius:7px;color:var(--muted);
}
.pw-eye:hover{background:rgba(255,255,255,.1)}
html.theme-light .pw-eye:hover{background:rgba(0,0,0,.07)}

/* ============================================================
   Authentification
   ============================================================ */
.auth-wrap{max-width:440px;margin:3.2rem auto;position:relative;overflow:hidden}
.auth-wrap::before{
  content:"⚽";position:absolute;top:-26px;right:-14px;font-size:8rem;opacity:.05;transform:rotate(-12deg);pointer-events:none
}
.tabs{display:flex;gap:.4rem;margin-bottom:1.2rem;background:#0d0f14;border:1px solid var(--line);border-radius:12px;padding:.3rem}
.tabs button{
  flex:1;padding:.6rem;border:0;background:transparent;border-radius:9px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;color:var(--muted);transition:.18s;letter-spacing:.02em;
}
.tabs button.active{background:var(--gold);color:#0a0b0e;box-shadow:0 6px 16px -8px rgba(249,212,0,.7)}
.err{background:rgba(255,90,90,.12);color:#ff9d9d;border:1px solid rgba(255,90,90,.3);padding:.6rem .8rem;border-radius:10px;font-size:.85rem;margin-top:.9rem}

/* ============================================================
   Barre de stats + filtres
   ============================================================ */
.stats-bar{
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card),var(--bg-2));border:1px solid var(--line);
  border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem;
}
.stats-bar b{color:var(--ink)}
.stats-bar .warn{color:var(--warn);font-weight:700}
.stats-bar .ok{color:var(--good);font-weight:700}
.stats-bar .credits{color:var(--gold)}

.filters{display:flex;gap:.45rem;margin-bottom:1rem;flex-wrap:wrap}
.filters button{
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--muted);
  padding:.42rem .95rem;border-radius:30px;cursor:pointer;font-size:.84rem;font-weight:600;
  transition:.16s;
}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button.active{background:var(--gold);color:#0a0b0e;border-color:var(--gold);font-weight:800}

/* ============================================================
   Carte vainqueur final
   ============================================================ */
.champ-card{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(249,212,0,.16), transparent 55%),
    linear-gradient(180deg,var(--card-2),var(--bg-2));
  border:1px solid rgba(249,212,0,.4);border-radius:14px;padding:1rem 1.15rem;margin-bottom:1rem;
  box-shadow:var(--shadow-sm);
}
.champ-card.locked{background:linear-gradient(180deg,var(--card),var(--bg-2));border-color:var(--line)}
.champ-card .champ-ico{font-size:1.8rem;filter:drop-shadow(0 0 10px rgba(249,212,0,.5))}
.champ-card b{color:var(--ink)}
.champ-card .spacer{flex:1}

/* ============================================================
   Matchs
   ============================================================ */
.phase-title{
  margin:1.8rem 0 .7rem;font-family:var(--font-display);font-weight:400;
  font-size:1.05rem;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;gap:.6rem;
}
.phase-title::before{content:"";width:5px;height:1.1rem;background:var(--gold);border-radius:3px;box-shadow:0 0 12px rgba(249,212,0,.6)}

.match{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line);border-radius:13px;padding:.8rem 1rem;margin-bottom:.6rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s, transform .12s;
}
.match:hover{border-color:var(--line-2);transform:translateY(-1px)}
.match.todo{border-left:3px solid var(--gold);box-shadow:0 0 0 1px rgba(249,212,0,.12), var(--shadow-sm)}
.match .ko{font-size:.72rem;color:var(--muted);width:100%;display:flex;justify-content:space-between;gap:.5rem}
.match .grp-badge{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;padding:.05rem .45rem;color:var(--ink);font-weight:600}
.team{flex:1;font-weight:700;display:flex;align-items:center;gap:.45rem;min-width:0;letter-spacing:.01em}
.team.away{justify-content:flex-end;text-align:right}
.flag{width:26px;height:19px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18);vertical-align:middle;flex:none}

/* Tuiles de score type tableau d'affichage */
.score-in{
  width:52px;text-align:center;padding:.35rem;flex:none;
  font-family:var(--font-display);font-size:1.25rem;font-weight:400;
  background:#0a0c10;border:1px solid var(--line-2);color:var(--gold);border-radius:9px;
  -moz-appearance:textfield;
}
.score-in::-webkit-outer-spin-button,.score-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.score-in:focus{border-color:var(--gold);box-shadow:var(--glow);color:var(--gold)}
.vs{color:var(--muted);font-size:.8rem;font-weight:700}
.result{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--ink);letter-spacing:.04em}

.pts{font-size:.74rem;padding:.15rem .55rem;border-radius:20px;background:rgba(255,255,255,.06);color:var(--muted);font-weight:700}
.pts.win{background:rgba(61,220,132,.16);color:var(--good)}
.locked-tag{font-size:.7rem;color:var(--warn);background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.25);padding:.12rem .5rem;border-radius:7px;font-weight:600}
.saved-tag{font-size:.72rem;color:var(--good);font-weight:600}

/* ============================================================
   Classement (tableaux)
   ============================================================ */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:.7rem .55rem;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,255,255,.025)}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums}
td b{color:var(--ink)}
.rank{font-family:var(--font-display);font-weight:400;font-size:1.05rem;width:2.4rem;text-align:center;color:var(--muted)}
.rank.r1{color:#ffd34d;text-shadow:0 0 14px rgba(255,211,77,.5)}
.rank.r2{color:#cfd6dd}
.rank.r3{color:#e0a878}
tr.me{background:linear-gradient(90deg, rgba(249,212,0,.14), transparent 70%);box-shadow:inset 3px 0 0 var(--gold)}
tr.me:hover{background:linear-gradient(90deg, rgba(249,212,0,.18), transparent 70%)}

/* ============================================================
   Admin
   ============================================================ */
.admin-match{display:grid;grid-template-columns:1fr 1fr auto;gap:.55rem;align-items:end;border-bottom:1px solid var(--line);padding:.7rem 0}
.row-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}

.dash-grid{display:flex;gap:.6rem;flex-wrap:wrap}
.dash-kpi{flex:1;min-width:120px;background:linear-gradient(180deg,var(--card-2),var(--bg-2));border:1px solid var(--line);border-radius:12px;padding:.9rem;text-align:center}
.dash-kpi b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.9rem;color:var(--gold);line-height:1}
.dash-kpi span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* Crédit ×2 */
.x2-btn{border:1px solid var(--gold);background:rgba(249,212,0,.08);color:var(--gold);font-family:var(--font-display);font-weight:400;border-radius:9px;padding:.32rem .6rem;cursor:pointer;font-size:.95rem;flex:none;transition:.15s}
.x2-btn:hover{background:rgba(249,212,0,.18)}
.x2-btn.on{background:var(--gold);color:#0a0b0e;box-shadow:0 0 0 3px rgba(249,212,0,.3)}
.x2-badge{display:inline-block;background:var(--gold);color:#0a0b0e;font-weight:800;border-radius:6px;padding:0 .35rem;font-size:.72rem;margin-left:.25rem;font-family:var(--font-body)}

/* ============================================================
   Questions bonus
   ============================================================ */
.bonus-card{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(80,140,255,.12), transparent 55%),
    linear-gradient(180deg,var(--card-2),var(--bg-2));
  border:1px solid rgba(120,170,255,.28);border-radius:13px;padding:.9rem 1.1rem;margin-bottom:.7rem;
  box-shadow:var(--shadow-sm);
}
.bonus-card.resolved{background:linear-gradient(180deg,var(--card),var(--bg-2));border-color:var(--line)}
.bonus-q{margin-bottom:.6rem;color:var(--ink)}
.bonus-q b{color:var(--ink)}
.bonus-opts{display:flex;gap:.5rem;flex-wrap:wrap}
.bonus-opt{
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);
  padding:.5rem 1rem;border-radius:30px;cursor:pointer;font-weight:700;font-size:.88rem;transition:.15s;
}
.bonus-opt:hover{border-color:var(--gold);color:var(--gold)}
.bonus-opt.sel{background:var(--gold);color:#0a0b0e;border-color:var(--gold);box-shadow:0 6px 16px -8px rgba(249,212,0,.7)}
.bonus-fb{font-size:.8rem;color:var(--good);margin-top:.45rem;min-height:1em;font-weight:600}
.admin-bonus{display:flex;gap:.55rem;align-items:end;flex-wrap:wrap}
.admin-bonus > div{flex:1;min-width:150px}

/* ============================================================
   Règles
   ============================================================ */
.rules h3{margin:1.4rem 0 .45rem;font-family:var(--font-display);font-weight:400;color:var(--gold);font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em}
.rules h3:first-of-type{margin-top:0}
.rules ul{margin:.35rem 0;padding-left:1.2rem}
.rules li{margin:.3rem 0}
.rules b{color:var(--ink)}
.rules table td{padding:.5rem .55rem}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(0);
  background:#15181f;color:var(--ink);border:1px solid var(--line-2);
  padding:.75rem 1.2rem;border-radius:12px;box-shadow:var(--shadow);z-index:50;font-size:.9rem;font-weight:600;
  border-left:4px solid var(--gold);
  animation:toastIn .25s ease;
}
.toast.err{border-left-color:var(--bad)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ============================================================
   Animations d'apparition
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card,.champ-card,.bonus-card,.stats-bar,.phase-title{animation:fadeUp .42s cubic-bezier(.2,.7,.2,1) both}
.match{animation:fadeUp .38s cubic-bezier(.2,.7,.2,1) both}
.match:nth-child(2){animation-delay:.03s}
.match:nth-child(3){animation-delay:.06s}
.match:nth-child(4){animation-delay:.09s}
.match:nth-child(5){animation-delay:.12s}
.match:nth-child(6){animation-delay:.15s}
.match:nth-child(7){animation-delay:.18s}
.match:nth-child(8){animation-delay:.21s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ============================================================
   THÈME CLAIR — bascule via le bouton ☀️/🌙 (mémorisé localStorage)
   Spécificité .theme-light .x (0,2,0) > base (0,1,0) → gagne toujours.
   ============================================================ */
html.theme-light{
  color-scheme:light;
  --bg:#eef1f6; --bg-2:#ffffff; --card:#ffffff; --card-2:#f6f8fc;
  --line:rgba(15,20,30,.1); --line-2:rgba(15,20,30,.18);
  --ink:#161a22; --muted:#5b6470;
  --shadow:0 12px 30px -16px rgba(20,28,45,.28);
  --shadow-sm:0 6px 16px -10px rgba(20,28,45,.22);
}
html.theme-light body{
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(249,212,0,.20), transparent 60%),
    radial-gradient(760px 480px at 92% 4%, rgba(249,212,0,.08), transparent 55%),
    var(--bg);
}
html.theme-light body::before{background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.022) 0 1px, transparent 1px 92px)}
html.theme-light *{scrollbar-color:rgba(0,0,0,.25) transparent}
html.theme-light *::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);background-clip:content-box}

html.theme-light .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,247,251,.84));
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(249,212,0,.55), 0 12px 26px -22px rgba(20,28,45,.4);
}
html.theme-light .nav button{background:rgba(0,0,0,.05);color:var(--ink)}
html.theme-light .nav button:hover{background:rgba(0,0,0,.09)}
html.theme-light .nav button.ghost{background:transparent;border-color:var(--line-2);color:var(--muted)}
html.theme-light .nav button.ghost:hover{color:var(--ink);border-color:var(--ink)}
html.theme-light .theme-btn{background:rgba(0,0,0,.05)}
html.theme-light .theme-btn:hover{background:rgba(0,0,0,.1)}

html.theme-light input,html.theme-light select,html.theme-light textarea{background:#fff;color:var(--ink)}
html.theme-light input::placeholder,html.theme-light textarea::placeholder{color:#9aa1ad}
html.theme-light input:focus,html.theme-light select:focus,html.theme-light textarea:focus{background:#fff}

html.theme-light .tabs{background:#e9edf3}
html.theme-light .score-in{background:#f1f3f7;color:var(--ink);border-color:var(--line-2)}
html.theme-light .score-in:focus{color:var(--ink)}
html.theme-light .result{color:var(--ink)}

html.theme-light .pts,html.theme-light .grp-badge{background:rgba(0,0,0,.05)}
html.theme-light .filters button{background:rgba(0,0,0,.03)}
html.theme-light .bonus-opt{background:rgba(0,0,0,.03)}
html.theme-light .btn.ghost{background:rgba(0,0,0,.05)}
html.theme-light tbody tr:hover{background:rgba(0,0,0,.03)}

html.theme-light .btn.danger{background:#fdecec;color:#c0392b;border:1px solid rgba(192,57,43,.3)}
html.theme-light .btn.danger:hover{background:#fbdcdc;color:#a02d22}

html.theme-light .toast{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:0 12px 30px -14px rgba(20,28,45,.3)}

/* ============================================================
   Responsive — finition mobile
   ============================================================ */
@media(max-width:560px){
  body{font-size:15px}
  .brand p{display:none}
  .brand h1{font-size:1.1rem}
  .wc-logo{height:2.3rem}
  .logo-img{height:2rem}
  h2{font-size:1.6rem}
  main{padding:1.1rem .7rem 4.5rem}
  .card{padding:1rem;border-radius:13px}
  .admin-match{grid-template-columns:1fr}
  .hide-sm{display:none}

  /* Navigation : défilement horizontal */
  .nav{flex-wrap:nowrap;overflow-x:auto;gap:.35rem;-webkit-overflow-scrolling:touch;padding-bottom:.1rem}
  .nav::-webkit-scrollbar{display:none}
  .nav button{flex:0 0 auto;padding:.55rem .85rem;font-size:.86rem}
  .nav .spacer{display:none}
  .who{order:3;width:100%;margin-top:.15rem}

  /* Cibles tactiles */
  .btn{padding:.72rem 1.15rem}
  .btn.sm{padding:.5rem .75rem;font-size:.82rem}
  .filters button,.bonus-opt{padding:.55rem 1.05rem}
  .x2-btn{padding:.5rem .75rem}

  /* Ligne de match empilée */
  .team{flex:1 1 100%;font-size:1rem}
  .team.away{justify-content:flex-start;text-align:left}
  .score-in{width:60px;height:48px;font-size:1.4rem}

  /* Formulaires admin : une colonne */
  .admin-bonus{flex-direction:column;align-items:stretch}
  .admin-bonus > div{min-width:0;width:100%}

  th,td{padding:.6rem .4rem}
}