/* =========================================================================
   Scorelium Pro — Design system partagé (thème sombre sportif)
   Noir / gris très foncé · blanc · orange basketball · bleu · rouge alerte
   ========================================================================= */
:root {
  --bg: #08090b;
  --bg-2: #0e0f13;
  --panel: #14151a;
  --panel-2: #1b1d24;
  --panel-3: #23262f;
  --line: #2a2d38;
  --line-2: #383c49;
  --text: #f4f6f9;
  --muted: #8f95a3;
  --muted-2: #636a78;
  --orange: #ff7a18;
  --orange-2: #ff9a45;
  --blue: #2f7cf6;
  --blue-2: #5fa0ff;
  --red: #e8322f;
  --red-2: #ff5b57;
  --green: #22c55e;
  --amber: #ffb020;
  --home: var(--orange);
  --away: var(--blue);
  --accent: var(--orange);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
  --led: 'DS-Digital', 'DSEG7 Classic', 'DSEG7', 'Digital-7', 'Segment7', 'Share Tech Mono', ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Preserve native hidden semantics even when component rules set display. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body.no-scroll { overflow: hidden; height: 100vh; }
a { color: var(--blue-2); text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 800; letter-spacing: .01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
h3 { font-size: .95rem; }
p { margin: 0 0 .6em; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::selection { background: var(--orange); color: #000; }

/* --------------------------- Chiffres LED --------------------------- */
.led {
  font-family: var(--led);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .92;
  text-shadow: 0 0 .18em currentColor, 0 0 .55em rgba(255, 255, 255, .18);
}
.led--amber { color: #ffb020; }
.led--red { color: #ff3b30; }
.led--white { color: #fff; }
.mono { font-family: var(--led); font-variant-numeric: tabular-nums; }
.led-svg { display: block; }

/* --------------------------- Structure --------------------------- */
.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: linear-gradient(180deg, #101116, #0b0c10);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .06em; }
.brand__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.brand__name { font-size: 1.02rem; }
.brand__sub { font-size: .68rem; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 999px; border: 1px solid transparent;
  background: #191b22; color: var(--muted); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text); border-color: var(--line-2); }
.tab--language { min-width: 42px; color: var(--orange-2); font-weight: 900; letter-spacing: .06em; }
.tab.is-active { background: var(--orange); color: #100704; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(255, 122, 24, .28); }
.tab__badge { background: #00000044; border-radius: 999px; padding: 1px 7px; font-size: .72rem; }

.page { padding: 14px; max-width: 1500px; width: 100%; margin: 0 auto; }
.page--wide { max-width: none; }
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1 1 auto; }

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.panel--flush { padding: 0; overflow: hidden; }
.panel__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #12131a;
}
.panel__head h2, .panel__head h3 { margin: 0; }
.panel__body { padding: 14px; }
.panel__foot { padding: 10px 14px; border-top: 1px solid var(--line); background: #101116; }
.team-tint { position: relative; }
.team-tint::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint, transparent) 0%, transparent 55%);
  opacity: .18; pointer-events: none;
}

/* --------------------------- Boutons --------------------------- */
.btn {
  --btn-bg: var(--panel-3); --btn-fg: var(--text); --btn-line: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-line);
  font-family: var(--ui); font-weight: 800; font-size: .92rem; letter-spacing: .02em;
  cursor: pointer; user-select: none; touch-action: manipulation;
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { filter: brightness(1.14); }
.btn:active { transform: scale(.965); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; filter: none; transform: none; }
.btn--primary { --btn-bg: linear-gradient(180deg, var(--orange-2), var(--orange)); --btn-fg: #170a02; --btn-line: #ff8b2e; box-shadow: 0 6px 18px rgba(255, 122, 24, .26); }
.btn--blue { --btn-bg: linear-gradient(180deg, var(--blue-2), var(--blue)); --btn-fg: #04122b; --btn-line: #4b93ff; box-shadow: 0 6px 18px rgba(47, 124, 246, .24); }
.btn--green { --btn-bg: linear-gradient(180deg, #38d96f, #16a34a); --btn-fg: #04140a; --btn-line: #46e07d; }
.btn--red { --btn-bg: linear-gradient(180deg, var(--red-2), var(--red)); --btn-fg: #fff; --btn-line: #ff6b67; box-shadow: 0 6px 18px rgba(232, 50, 47, .24); }
.btn--amber { --btn-bg: linear-gradient(180deg, #ffc44d, var(--amber)); --btn-fg: #1c1200; --btn-line: #ffd070; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--muted); }
.btn--ghost:hover { --btn-fg: var(--text); --btn-bg: #1c1e26; }
.btn--dark { --btn-bg: #0c0d11; }
.btn--warn { --btn-bg: #2a1c1c; --btn-fg: #ff9d9a; --btn-line: #5b2b2a; }
.btn--lg { min-height: 62px; font-size: 1.08rem; padding: 12px 22px; border-radius: var(--radius); }
.btn--xl { min-height: 84px; font-size: 1.5rem; padding: 14px 26px; border-radius: var(--radius); }
.btn--sm { min-height: 34px; font-size: .78rem; padding: 6px 11px; }
.btn--block { width: 100%; }
.btn--icon { width: 38px; min-width: 38px; padding: 6px; display: inline-grid; place-items: center; }
.btn--icon svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.is-on { --btn-bg: linear-gradient(180deg, #38d96f, #16a34a); --btn-fg: #04140a; --btn-line: #46e07d; }
.btn-group { display: grid; gap: 8px; grid-auto-flow: column; grid-auto-columns: 1fr; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: #1e2028; border: 1px solid var(--line-2); font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.chip--orange { background: #2c1b0b; border-color: #6d3d13; color: var(--orange-2); }
.chip--blue { background: #0d1e39; border-color: #23508f; color: var(--blue-2); }
.chip--red { background: #2c1110; border-color: #6b2624; color: var(--red-2); }
.chip--green { background: #0d2a18; border-color: #24663c; color: #57e08a; }
.chip--amber { background: #2d2210; border-color: #6d5215; color: #ffcd6b; }
.chip--live { animation: pulseLive 1.6s infinite; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* --------------------------- Formulaires --------------------------- */
label.f, .field { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
input, select, textarea {
  font-family: var(--ui); font-size: .95rem; color: var(--text); background: #0c0d12;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 12px; width: 100%;
  font-weight: 600;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }
input[type="color"] { padding: 3px; height: 44px; cursor: pointer; }
input[type="date"], input[type="time"] { color-scheme: dark; min-height: 44px; }
.date-time-control { display: flex; align-items: stretch; gap: 8px; }
.date-time-control input { flex: 1 1 auto; min-width: 0; }
.date-time-control .btn { flex: 0 0 auto; gap: 7px; white-space: nowrap; }
.date-time-control .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .date-time-control { flex-wrap: wrap; }
  .date-time-control input { flex-basis: 100%; }
  .date-time-control .btn { width: 100%; justify-content: center; }
}
input[type="file"] { padding: 8px; font-size: .82rem; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--orange); cursor: pointer; }
.switch { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #0f1015; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .84rem; font-weight: 700; cursor: pointer; }
.switch input { width: 20px; height: 20px; }
.hint { font-size: .76rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.video-upload-progress { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0d0f14; }
.video-upload-progress__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text); font-size: .82rem; }
.video-upload-progress__meta strong { flex: 0 0 auto; color: var(--orange-2); font-variant-numeric: tabular-nums; }
.video-upload-progress__bar { display: block; width: 100%; height: 10px; margin-top: 8px; overflow: hidden; border: 0; border-radius: 999px; background: #292d37; accent-color: var(--orange); }
.video-upload-progress__bar::-webkit-progress-bar { border-radius: 999px; background: #292d37; }
.video-upload-progress__bar::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #ff9b44, #ff7417); transition: width .12s linear; }
.video-upload-progress__bar::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #ff9b44, #ff7417); }
.sep { height: 1px; background: var(--line); margin: 14px 0; border: 0; }

/* --------------------------- Tableaux --------------------------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tbl th {
  text-align: left; padding: 9px 10px; background: #101117; color: var(--muted);
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
table.tbl td { padding: 8px 10px; border-bottom: 1px solid #1c1e26; }
table.tbl tbody tr:hover { background: #171922; }
table.tbl .num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
table.tbl tr.is-out td { opacity: .45; }
table.tbl tr.is-court td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.table-wrap { max-height: 60vh; overflow: auto; }

/* Colonne d'actions figée : les boutons Modifier / Supprimer restent visibles
   en permanence, même lorsque le tableau défile horizontalement. */
table.tbl--actions th:last-child, table.tbl--actions td:last-child {
  position: sticky; right: 0; z-index: 3; white-space: nowrap;
  background: #14161c; box-shadow: -18px 0 20px -18px rgba(0, 0, 0, .95);
}
table.tbl--actions th:last-child { z-index: 4; border-left: 1px solid var(--line); }
table.tbl--actions td:last-child { border-left: 1px solid #1c1e26; }
table.tbl--actions tbody tr:hover td:last-child { background: #171922; }
table.tbl--actions tr.is-out td:last-child { opacity: .45; }

/* --------------------------- Modale --------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(3, 4, 6, .78); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
  animation: fadeIn .14s ease;
}
.modal {
  background: linear-gradient(180deg, #171922, #101117); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: 20px; width: min(560px, 100%); box-shadow: var(--shadow);
  max-height: 92vh; overflow: auto;
}
.modal--wide { width: min(900px, 100%); }
.modal h3 { font-size: 1.2rem; margin-bottom: 6px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* --------------------------- Toast --------------------------- */
.toasts { position: fixed; right: 14px; bottom: calc(14px + var(--safe-b)); z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 90vw); }
.toast {
  background: #191b23; border: 1px solid var(--line-2); border-left: 5px solid var(--orange);
  border-radius: var(--radius-sm); padding: 11px 14px; font-weight: 700; font-size: .88rem;
  box-shadow: var(--shadow); animation: slideInRight .18s ease;
}
.toast--error { border-left-color: var(--red); }
.toast--ok { border-left-color: var(--green); }
.toast--info { border-left-color: var(--blue); }

/* --------------------------- Animations --------------------------- */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes pulseLive { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes scorePop {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.22); filter: brightness(1.9); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes flashRed { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(232,50,47,0) } 50% { box-shadow: inset 0 0 60px 12px rgba(232,50,47,.75) } }
@keyframes bannerIn {
  0% { opacity: 0; transform: translateY(14px) scale(.9); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  82% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.97); }
}
@keyframes popIn { 0% { opacity: 0; transform: scale(.86) } 60% { transform: scale(1.02) } 100% { opacity: 1; transform: scale(1) } }
@keyframes glowPulse { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.4) } }
@keyframes tickerScroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes swish {
  0% { opacity: 0; transform: translateY(30%) scale(.7) rotate(-6deg); }
  20% { opacity: 1; transform: translateY(0) scale(1.08) rotate(0); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
@keyframes arrowSlideRight { from { transform: translateX(-12px); opacity: .2 } to { transform: translateX(0); opacity: 1 } }
@keyframes arrowSlideLeft { from { transform: translateX(12px); opacity: .2 } to { transform: translateX(0); opacity: 1 } }
@keyframes shimmer { 0% { background-position: -160% 0 } 100% { background-position: 260% 0 } }
@keyframes introRise { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: none } }

.anim-pop { animation: scorePop .55s cubic-bezier(.2, .9, .3, 1.2); }
.anim-flash-red { animation: flashRed .5s steps(2, end) 4; }
.anim-glow { animation: glowPulse 1.4s infinite; }

/* --------------------------- LED / affichage match (commun) --------------------------- */
.digits { display: flex; align-items: baseline; justify-content: center; }
.digits--score { font-size: clamp(3rem, 9vw, 6rem); }
.clock-big { font-size: clamp(2.4rem, 7vw, 5rem); }
.shot-big { font-size: clamp(2rem, 5vw, 3.4rem); }
.poss {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  font-weight: 900; letter-spacing: .1em; font-size: .86rem; text-transform: uppercase;
  border: 1px solid var(--line-2); background: #14161d; color: var(--muted);
}
.poss--home { background: linear-gradient(90deg, color-mix(in srgb, var(--home) 26%, #14161d), #14161d); border-color: var(--home); color: #fff; }
.poss--away { background: linear-gradient(270deg, color-mix(in srgb, var(--away) 26%, #14161d), #14161d); border-color: var(--away); color: #fff; }
.poss__arrow { font-size: 1.2em; line-height: 1; }
.poss.is-home .poss__arrow { animation: arrowSlideRight .5s ease; }
.poss.is-away .poss__arrow { animation: arrowSlideLeft .5s ease; }

.fouls { display: inline-flex; gap: 5px; }
.fouls i { width: 11px; height: 11px; border-radius: 3px; background: #2b2e38; display: block; }
.fouls i.on { background: var(--amber); box-shadow: 0 0 8px rgba(255, 176, 32, .7); }
.fouls.is-bonus i.on { background: var(--red); box-shadow: 0 0 10px rgba(232, 50, 47, .8); }
.tolights { display: inline-flex; gap: 6px; }
.tolights i { width: 13px; height: 13px; border-radius: 50%; background: #2b2e38; box-shadow: inset 0 0 4px #000; display: block; }
.tolights i.on { background: #35e07d; box-shadow: 0 0 10px rgba(53, 224, 125, .8); }
.tolights i.used { background: #3a3d47; }
.tolights.is-empty i.on { background: var(--red); }

/* --------------------------- Journal --------------------------- */
.log { max-height: 52vh; overflow: auto; }
.log__row { display: grid; grid-template-columns: 62px 46px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #1a1c24; font-size: .84rem; }
.log__row:hover { background: #171922; }
.log__time { font-family: var(--led); color: var(--muted); font-size: .82rem; }
.log__period { color: var(--muted); font-size: .72rem; font-weight: 800; }
.log__team { font-weight: 800; }
.log__team--home { color: var(--home); }
.log__team--away { color: var(--away); }

/* --------------------------- Utilitaires --------------------------- */
.u-muted { color: var(--muted); }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-sm { font-size: .8rem; }
.u-xs { font-size: .72rem; }
.u-bold { font-weight: 800; }
.u-upper { text-transform: uppercase; letter-spacing: .08em; }
.u-mt { margin-top: 14px; }
.u-mb { margin-bottom: 14px; }
.u-nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.only-desktop { display: initial; }
.only-mobile { display: none; }
.scroll-x { overflow-x: auto; }

/* --------------------------- Impression --------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .no-print, .btn { display: none !important; }
  .panel { border-color: #ccc; background: #fff; }
  table.tbl th { background: #eee; color: #000; }
}