/* Thèmes */
:root[data-theme="dark"]{
  --bg:#0f1115; --card:#161a22; --accent:#3b82f6; --text:#e5e7eb; --muted:#9ca3af; --danger:#ef4444; --border:#232734; --input:#0e1117; --btn:#10141b;
  --icon-1: var(--accent);
  --icon-2: var(--muted);
}
:root[data-theme="light"]{
  --bg:#f6f7fb; --card:#ffffff; --accent:#3b82f6; --text:#111827; --muted:#6b7280; --danger:#b91c1c; --border:#e5e7eb; --input:#ffffff; --btn:#f3f4f6;
  --icon-1: var(--accent);
  --icon-2: var(--muted);
}

:root[data-theme="dark"] #logo {
  content: url("/static/logo-dark.png");
}

:root[data-theme="light"] #logo {
  content: url("/static/logo-light.png");
}

:root{ color-scheme: light dark; }
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Header : alignement logo gauche, titre centré, toggle droite */
.topbar{
  position:sticky; top:0; z-index:10;
  background:color-mix(in oklab, var(--bg) 90%, black 10%);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:980px; margin:0 auto; padding:10px 12px;
  display:grid;
  grid-template-columns: auto 1fr auto; /* gauche logo, milieu titre, droite toggle */
  align-items:center;
  column-gap:12px;
}
.left{ justify-self:start; }
.center{ justify-self:center; text-align:center; }
.right{ justify-self:end; }

.logo{height:48px; object-fit:contain}  /* ✅ logo plus grand */
.center h1{font-size:20px; margin:0}

/* Toggle thème ultra-compact à droite */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px; /* strict minimum */
  border:1px solid var(--border);
  background:transparent; color:var(--text);
  border-radius:10px; cursor:pointer;
}
.theme-icon{ width:20px; height:20px; display:block; }
.theme-icon .tone-1{ fill: var(--icon-1); }
.theme-icon .tone-2{ fill: var(--icon-2); }

/* Conteneurs */
.container{max-width:980px; margin:12px auto; padding:0 12px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* Quick block */
.quick-grid{display:block}
.group h3{margin:0 0 10px 0}
.centered{text-align:center}

/* Scores */
/* ✅ Champs score centrés */
/* Alias pour réutiliser le style des champs du bloc 2 */
.field-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  text-align: center; /* centré comme demandé */
}
.field-input.invalid { border-color: var(--danger); }


.score-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:8px;
}
@media (max-width:560px){ .score-row{grid-template-columns:1fr} }
.col .lbl{font-weight:700; margin-bottom:4px}

/* Boutons +/- + champ */
.btnrow{
  display:grid;
  grid-template-columns:56px 1fr 56px;
  gap:8px; align-items:center;
}
@media (max-width:560px){ .btnrow{grid-template-columns:48px 1fr 48px} }

.btn{
  width:100%;
  padding:12px 0;
  border:1px solid var(--border);
  background:var(--btn);
  color:var(--text);
  font-size:16px;
  border-radius:12px;
  cursor:pointer;
  text-align:center; /* ✅ centre le texte des boutons */
}
.btn:hover{border-color:var(--accent)}
.btn-danger{border-color:color-mix(in oklab, var(--danger) 30%, black 70%); background:color-mix(in oklab, var(--danger) 10%, var(--btn) 90%); color:inherit}

/* Inputs : tout centré */
.field{margin-bottom:10px; text-align:center;}        /* ✅ centre les labels par défaut */
.field label{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
.field input{
  width:100%;
  padding:12px 14px;
  font-size:16px;
  background:var(--input);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  text-align:center;                                   /* ✅ centre le texte des inputs */
}
.field input.invalid{border-color:var(--danger)}
.row{display:grid; grid-template-columns:56px 1fr 56px; gap:8px; align-items:center}
@media (max-width:560px){ .row{grid-template-columns:48px 1fr 48px} }

.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; justify-content:center} /* ✅ aligne les actions au centre */

/* Bloc 2 */
.set-bar{ margin-bottom:10px; }
.ab-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:8px;
}
@media (max-width:800px){ .ab-grid{grid-template-columns:1fr} }
.col-title{font-weight:700; margin-bottom:8px; text-align:center} /* ✅ centré */
.misc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width:800px){ .misc-grid{grid-template-columns:1fr} }

/* Footer */
.footer{ text-align:center; color:var(--muted); padding:14px 0; font-size:13px }


/* ===== VIDEO CARD ===== */

.video-card h3{ margin-top: 0; }
.video-wrap{
  width:100%;
  aspect-ratio:16/9;
  background: #000;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
}
.video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}
.video-controls{
  display:flex;
  grid-template-columns: 1fr auto auto;
  gap:12px;
  margin-top:10px;
  align-items:center;
  justify-content:center;
}
.video-controls input{
  padding:10px 12px;
  font-size:14px;
  background:var(--input);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
}
.video-controls select{
  padding:10px 12px;
  font-size:14px;
  background:var(--input);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
}

.video-controls .radio-row{
  display:flex; flex-wrap:wrap; gap:12px;
}

@media (max-width:720px){
  .video-controls{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .video-controls{ grid-template-columns:1fr; }
}
.small{ font-size:12px; }

/* Boutons icône unifiés (vidéo & thème) — même look/tailles côte à côte */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border:1px solid var(--border);
  background:transparent; color:var(--text);
  border-radius:10px; cursor:pointer;
  margin-left:8px;
}
.icon{ width:20px; height:20px; display:block; }
.icon .tone-1{ fill: var(--icon-1); }
.icon .tone-2{ fill: var(--icon-2); }


/* Ligne des 3 selects Ligue / Comité / Club */
.lcc-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 6px;
}
@media (max-width: 800px){
  .lcc-row{ grid-template-columns: 1fr; }
}
/* Le champ occupe toute la largeur du grid misc */
.misc-grid .field.fullspan {
  grid-column: 1 / -1;
}
/* La zone Équipe A / Équipe B doit être une grille à 2 colonnes */
.ab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; /* adapte si tu as déjà une variable de gap */
}

/* Un élément marqué .fullspan occupe toute la largeur de la grille */
.ab-grid .fullspan {
  grid-column: 1 / -1;
  width: 100%;
}

/* Confort: l'input prend toute la ligne */
.ab-grid .fullspan .field-input {
  width: 100%;
}