/* Padel Score — tablette, thème sombre lisible de loin */
@font-face { font-family: "Inter"; src: local("Inter"), local("Inter Regular"); }
:root {
  --bg: #0d1016; --panel: #161a22; --panel2: #1e232d; --line: #2a303b;
  --ink: #f2f3f5; --ink2: #b9c0cc; --muted: #7d8696;
  --accent: #e6ff00; --t1: #3987e5; --t2: #e53935; --good: #3fbf3f; --bad: #e66767;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input, select { font: inherit; color: var(--ink); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; width: 100%; font-size: 18px; }
input:focus, select:focus { outline: 2px solid var(--t1); outline-offset: 1px; }
h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.01em; }
h3 { margin: 18px 0 8px; font-size: 14px; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.muted { color: var(--muted); font-size: 14px; }
.hidden { display: none !important; }
.screen { min-height: 100%; }

/* ---------- barres */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: #0b0e13; position: sticky; top: 0; z-index: 2; }
.bar-actions { display: flex; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.ball { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); position: relative; display: inline-block; }
.ball::after { content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border-left: 2px solid #0d1016; border-right: 2px solid #0d1016; }
.ghost { background: transparent; padding: 10px 14px; border-radius: 10px; color: var(--ink2); font-weight: 600; }
.ghost:active { background: var(--panel2); }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); margin-left: 6px; }
.pill.ok { background: #183a1c; color: #8be08b; }

/* ---------- préparation */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card.narrow { max-width: 760px; margin: 18px auto; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.team { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.team legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.team.t1 { border-left: 4px solid var(--c0); } .team.t2 { border-left: 4px solid var(--c1); }
.round { width: 48px; height: 48px; border-radius: 50%; background: var(--panel2); font-size: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip .x { margin-left: 6px; color: var(--muted); }
.lieu-row { display: flex; gap: 8px; align-items: stretch; }
.lieu-row input { flex: 1; min-width: 0; }
.lieu-row button { flex: none; white-space: nowrap; padding: 8px 14px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.lieu-row button:disabled { opacity: .5; }
.lieu-info { margin: 6px 0 0; font-size: 14px; }
.lieu-info small { opacity: .7; }
.lieu-chips { margin-top: 6px; }
.lieu-chips .chip { cursor: pointer; }
.lieu-chips .chip.on { border-color: var(--accent, #e6ff00); }
.lieu-chips .chip i { font-style: normal; color: var(--muted); margin-left: 4px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.seg button { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 6px; font-weight: 600; }
.seg button.on { background: var(--accent); color: #0d1016; border-color: var(--accent); }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.rules label { display: grid; gap: 6px; font-size: 14px; color: var(--ink2); }
label.check { display: flex !important; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); padding: 6px 0; }
label.check input { width: 22px; height: 22px; }
label.inline { display: flex; align-items: center; gap: 12px; color: var(--ink2); margin-top: 8px; }
label.inline select { width: auto; }
.summary { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel2); color: var(--ink2); font-size: 14px; }
.start-row { display: flex; gap: 12px; justify-content: flex-end; align-items: center; padding: 16px 20px 0; flex-wrap: wrap; }
.primary { background: var(--accent); color: #0d1016; font-weight: 800; border-radius: 12px; padding: 14px 22px; }
.primary.big { font-size: 22px; padding: 18px 34px; }
.secondary { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; font-weight: 600; }
.danger { background: #3a1a1a; color: #ffb4b4; border-radius: 12px; padding: 14px 20px; font-weight: 600; }
.error { color: var(--bad); margin: 0 auto 0 0; }

/* ---------- télécommande */
.maprow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.maprow .keys { color: var(--ink2); font-family: ui-monospace, monospace; font-size: 14px; }
.maprow.learning { background: rgba(230, 255, 0, .06); }
.test { margin: 16px 0; }

/* ---------- match */
/* fixé sur l'écran visible : jamais de défilement, même quand la barre d'adresse (Android) apparaît ou disparaît */
#match { display: flex; flex-direction: column; position: fixed; inset: 0; height: auto; overflow: hidden; }
html.in-match, html.in-match body { overflow: hidden; overscroll-behavior: none; }
.mbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.2vh 2vw; gap: 2vw; }
.mtitle { font-weight: 700; color: var(--ink2); font-size: clamp(14px, 2.2vh, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mclock { display: flex; gap: 2.4vw; font-variant-numeric: tabular-nums; color: var(--ink2); }
.mclock .ck { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.mclock small { font-size: clamp(9px, 1.4vh, 14px); font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.mclock b { font-size: clamp(16px, 3.2vh, 32px); font-weight: 800; }
.mactions { display: flex; gap: 8px; justify-content: flex-end; }
.chip-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1vh 1.6vw;
  font-weight: 700; font-size: clamp(13px, 2vh, 20px); }
.chip-btn.done { border-color: var(--good); color: #8be08b; }
.board { touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; flex: 1; display: grid; grid-template-rows: 1fr auto 1fr; padding: 0 2vw; gap: 0; min-height: 0; }
.row { display: grid; grid-template-columns: 4vw minmax(0, 1fr) auto auto 13vw 19vw; align-items: center; gap: 1.5vw;
  background: var(--panel); border: 2px solid var(--line); border-radius: 2.2vh; padding: 0 0 0 2vw;
  text-align: left; overflow: hidden; position: relative; transition: transform .08s; min-height: 0; }
.row:active { transform: scale(.995); }
.row:focus, .row:focus-visible { outline: none; }
.row.t1 { --team: var(--c0); } .row.t2 { --team: var(--c1); }
.row { border-left: 1.2vw solid var(--team); }
.row.enjeu { box-shadow: 0 0 0 3px var(--accent) inset; }
.row .srv { width: 7.5vh; height: 7.5vh; max-width: 4.6vw; max-height: 4.6vw; justify-self: center; opacity: 0;
  transform: scale(.4); transition: opacity .25s, transform .25s; }
.row .srv svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .6vh 1.2vh rgba(0,0,0,.55)); }
.row .srv.on { opacity: 1; transform: none; animation: srvbounce 2.4s ease-in-out infinite; }
.row .srv.new { animation: srvin .7s cubic-bezier(.3,1.6,.5,1), srvbounce 2.4s ease-in-out .7s infinite; }
@keyframes srvbounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.9vh) rotate(25deg); } }
@keyframes srvin { 0% { transform: translateY(-6vh) scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.row .names span.serving { color: var(--ink-strong); }
.row .names span.receiving { color: var(--ink2); }
.row .names .mini { display: inline-block; width: .62em; height: .62em; margin-left: .25em; vertical-align: .05em; }
.row .names .mini svg { width: 100%; height: 100%; display: block; }
.row.serve { background: linear-gradient(90deg, rgba(215, 242, 58, .10), var(--panel) 45%); }
.row .names { display: flex; flex-direction: column; justify-content: center; line-height: 1.04; min-width: 0; }
.row .names span { font-size: clamp(22px, 8.2vh, 110px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .prev { display: flex; gap: 1.2vw; font-size: clamp(18px, 6vh, 70px); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.row .prev .w { color: var(--ink); }
.row .games { font-size: clamp(30px, 13vh, 170px); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--panel2); height: 100%; display: flex; align-items: center; justify-content: center; }
.row .pts { font-size: clamp(34px, 16vh, 210px); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--pts); height: 100%; display: flex; align-items: center; justify-content: center; letter-spacing: -.03em; }
.row.flash .pts { animation: flash 0.9s ease-out; }
.row.flash { animation: rowflash 0.9s ease-out; }
@keyframes flash { 0% { background: var(--accent); color: #0d1016; } 100% { background: var(--pts); color: var(--ink); } }
@keyframes rowflash { 0% { border-color: var(--accent); } 100% { border-color: var(--line); } }
.tagline { height: 9vh; display: flex; align-items: center; justify-content: center; }
.tagline span { background: var(--accent); color: #0d1016; font-weight: 900; letter-spacing: .06em;
  font-size: clamp(14px, 4.4vh, 48px); padding: .6vh 2.4vw; border-radius: 999px; }
.tagline span:empty { display: none; }
.mfoot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2vw; padding: 1.4vh 2vw 2vh; }
.undo { background: var(--panel2); border: 1px solid var(--line); border-radius: 1.6vh; padding: 1.6vh 3vw;
  font-weight: 800; font-size: clamp(16px, 3.2vh, 32px); }
#last, #sync-info { font-size: clamp(12px, 2vh, 18px); }
#sync-info { text-align: right; }

/* cartes (fin de jeu / set / match) */
.card-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 10, .55); z-index: 5; animation: fadein .25s ease-out; }
.card-overlay .box { background: var(--panel); border: 2px solid var(--accent); border-radius: 3vh; padding: 4vh 5vw;
  text-align: center; min-width: 50vw; }
.card-overlay .kicker { color: var(--accent); font-weight: 900; letter-spacing: .14em; font-size: clamp(16px, 4vh, 40px); }
.card-overlay .big { font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 9vh, 110px); margin: 1vh 0; line-height: 1.05; }
.card-overlay .sets { font-size: clamp(20px, 6vh, 70px); font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; }
.card-overlay .durs { margin-top: 1.4vh; color: var(--muted); font-weight: 700; font-size: clamp(13px, 2.6vh, 26px); white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.card-overlay .actions { display: flex; gap: 12px; justify-content: center; margin-top: 3vh; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* menu */
.menu { position: fixed; inset: 0; background: rgba(5, 7, 10, .7); display: flex; align-items: center; justify-content: center; z-index: 6; }
.menu-box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; width: min(520px, 92vw); }

/* historique */
.hitem { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.hitem b { font-size: 17px; }
.hitem .acts { display: flex; gap: 6px; }
.hitem .acts button { padding: 10px 12px; }

.toast { position: fixed; left: 50%; top: 9vh; transform: translateX(-50%); background: #222a36; border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 12px; z-index: 9; font-weight: 700; font-size: clamp(15px, 2.6vh, 26px); }

/* portrait : noms un peu plus petits */
@media (orientation: portrait) {
  .row { grid-template-columns: 6vw 1fr auto 16vw 22vw; }
  .row .names span { font-size: clamp(20px, 4.4vh, 70px); }
  .row .games { font-size: clamp(28px, 7vh, 110px); }
  .row .pts { font-size: clamp(30px, 8.5vh, 130px); }
  .row .prev { font-size: clamp(16px, 3.4vh, 50px); }
}

/* plateforme */
label.stack { display: block; margin: 12px 0; color: var(--muted); font-size: 14px; }
label.stack input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pill.wait { background: #3a2f12; color: #ffd36b; }
.pill.bad { background: #3a1616; color: #ff9b9b; }
.pill.err { background: #3a1616; color: #ff8f8f; }
.sent { font-size: 12px; margin-left: 6px; }
.sent.ok { color: #8be08b; } .sent.wait { color: #ffd36b; }

/* glisser pour annuler / rétablir */
.swipe-hint { position: fixed; top: 50%; transform: translateY(-50%); z-index: 4; pointer-events: none; opacity: 0;
  font-weight: 900; font-size: clamp(16px, 3.6vh, 36px); padding: 1.6vh 2.4vw; border-radius: 999px;
  background: var(--panel2); border: 2px solid var(--line); color: var(--ink2); white-space: nowrap; }
.swipe-hint.left { right: 3vw; } .swipe-hint.right { left: 3vw; }
.swipe-hint.ready { background: var(--accent); border-color: var(--accent); color: #0d1016; }
.board.settle { transition: transform .22s ease-out; }

/* bandeau Annuler */
.snack { position: fixed; left: 50%; bottom: 2.2vh; transform: translateX(-50%); z-index: 7; display: flex; align-items: center;
  gap: 2vw; background: var(--snack); color: var(--ink); border: 1px solid var(--line); border-radius: 1.8vh; padding: .8vh .8vh .8vh 2.4vw;
  box-shadow: 0 1vh 3vh rgba(0,0,0,.45); animation: snackin .2s ease-out; overflow: hidden; }
.snack span { font-weight: 700; font-size: clamp(14px, 2.6vh, 26px); white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.snack button { background: var(--accent); color: #0d1016; font-weight: 900; border-radius: 1.3vh;
  padding: 1.4vh 2.6vw; font-size: clamp(15px, 2.8vh, 28px); white-space: nowrap; }
.snack::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent);
  animation: snackbar var(--snack-ms, 5s) linear forwards; }
@keyframes snackin { from { opacity: 0; transform: translate(-50%, 2vh); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes snackbar { from { width: 100%; } to { width: 0; } }
.undo.hidden { display: none; }

/* ================================================================ thèmes de couleurs (écran de match) */
#match { --pts: #2b3240; --snack: #222a36; --ink-strong: #fff; --accent-ink: var(--accent);
  --cond: "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "DejaVu Sans Condensed", sans-serif;
  background: var(--bg); color: var(--ink); }
#match.th-marine { --bg: #071230; --panel: #0e1e4a; --panel2: #13285e; --line: #1d3470; --pts: #182f6a; --snack: #112459;
  --ink: #f4f6fb; --ink2: #b9c5e2; --muted: #7c8bb3; --t1: #4b9ef2; --t2: #ef4747; }
#match.th-clair { color-scheme: light; --bg: #e8ecf1; --panel: #ffffff; --panel2: #f2f5f8; --line: #cdd5df; --pts: #e1e7ee;
  --snack: #ffffff; --ink: #0d1016; --ink2: #3a4350; --muted: #6a7482; --ink-strong: #000; --accent: #d8f000;
  --accent-ink: #5a6a00; --t1: #1f6fd1; --t2: #d32f2f; }
#match.th-clair .chip-btn, #match.th-clair .undo { color: var(--ink); }
#match.th-clair .row.serve { background: linear-gradient(90deg, rgba(150, 180, 0, .16), var(--panel) 45%); }
.menu-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.seg.tpl button { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seg.tpl svg { width: 70px; height: 42px; }

/* ================================================================ modèle « Face à face » */
#match.tpl-face .board { grid-template-rows: 1fr; grid-template-columns: 1fr minmax(6vw, auto) 1fr; padding: 0; }
#match.tpl-face .row { grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr auto;
  grid-template-areas: "names names names" "pts pts pts" "prev games ."; gap: 0 2.4vw; padding: 3vh 3vw;
  border: 0; border-radius: 0; background: linear-gradient(165deg, var(--panel2), var(--panel)); align-items: stretch; }
#match.tpl-face .row.side-l { border-left: 4.5vw solid var(--team); }
#match.tpl-face .row.side-r { border-right: 4.5vw solid var(--team); grid-template-columns: 1fr auto auto;
  grid-template-areas: "names names names" "pts pts pts" ". prev games"; }
#match.tpl-face .row.serve.side-l { background: linear-gradient(100deg, rgba(215, 242, 58, .10), var(--panel) 40%); }
#match.tpl-face .row.serve.side-r { background: linear-gradient(260deg, rgba(215, 242, 58, .10), var(--panel) 40%); }
#match.tpl-face .row .names { grid-area: names; }
#match.tpl-face .row.side-r .names { align-items: flex-end; text-align: right; }
#match.tpl-face .row .names span { font-family: var(--cond); font-weight: 800; font-size: clamp(22px, 7.5vh, 90px); line-height: .98; letter-spacing: 0; }
#match.tpl-face .row .pts { grid-area: pts; background: transparent; font-family: var(--cond); font-style: italic; font-weight: 900;
  font-size: min(44vh, 21vw); color: var(--ink-strong); letter-spacing: -.02em; height: auto; transform: skewX(-4deg); }
#match.tpl-face .row .games, #match.tpl-face .row .prev { font-family: var(--cond); font-weight: 800; font-size: clamp(26px, 11vh, 130px);
  background: transparent; height: auto; align-self: end; line-height: 1; }
#match.tpl-face .row .games { grid-area: games; color: var(--accent-ink); justify-content: flex-start; }
#match.tpl-face .row .prev { grid-area: prev; color: var(--muted); gap: 2vw; }
#match.tpl-face .row .prev .w { color: var(--ink); }
#match.tpl-face .row .srv { position: absolute; top: 3vh; width: 8vh; height: 8vh; max-width: none; max-height: none; }
#match.tpl-face .row.side-l .srv { right: 2.4vw; } #match.tpl-face .row.side-r .srv { left: 2.4vw; }
#match.tpl-face .row.flash .pts { animation: flashtxt .9s ease-out; }
#match.tpl-face .row.flash { animation: none; }
@keyframes flashtxt { 0% { color: var(--accent-ink); transform: skewX(-4deg) scale(1.06); } 100% { color: var(--ink-strong); transform: skewX(-4deg); } }
#match.tpl-face .row.enjeu { box-shadow: 0 0 0 .5vh var(--accent) inset; }
#match.tpl-face .tagline { height: auto; padding: 0 .6vw; background: var(--bg); }
#match.tpl-face .tagline span { writing-mode: vertical-rl; transform: rotate(180deg); background: transparent; color: var(--accent-ink);
  font-family: var(--cond); font-size: clamp(16px, 5.4vh, 60px); letter-spacing: .14em; padding: 0; border-radius: 0; }
@media (orientation: portrait) {
  #match.tpl-face .board { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  #match.tpl-face .row { padding: 1.6vh 4vw; }
  #match.tpl-face .row .pts { font-size: min(17vh, 40vw); }
  #match.tpl-face .row .names span { font-size: clamp(18px, 4.4vh, 70px); }
  #match.tpl-face .row .games, #match.tpl-face .row .prev { font-size: clamp(22px, 6.5vh, 90px); }
  #match.tpl-face .row .srv { width: 6vh; height: 6vh; top: 1.6vh; }
  #match.tpl-face .tagline { height: 7vh; }
  #match.tpl-face .tagline span { writing-mode: horizontal-tb; transform: none; }
}

/* ================================================================ modèle « Géant » (lisible de loin) */
#match.tpl-geant .mtitle, #match.tpl-geant #last, #match.tpl-geant #sync-info { visibility: hidden; }
#match.tpl-geant .board { padding: 0 1.4vw; }
#match.tpl-geant .row { grid-template-columns: 7vh minmax(0, 1fr) 22vw 36vw; grid-template-rows: 1fr auto auto;
  grid-template-areas: "srv names games pts" "srv prev games pts" "srv side games pts"; gap: 0 1.2vw; padding-left: 1.2vw; }
#match.tpl-geant .row .srv { grid-area: srv; width: 6.5vh; height: 6.5vh; max-width: none; max-height: none; }
#match.tpl-geant .row .names { grid-area: names; justify-content: flex-end; }
#match.tpl-geant .row .names span { font-size: clamp(16px, 5.4vh, 64px); font-family: var(--cond); }
#match.tpl-geant .row .prev { grid-area: prev; font-size: clamp(16px, 5.4vh, 60px); padding-bottom: 2vh; font-family: var(--cond); }
#match.tpl-geant .row .games { grid-area: games; font-size: clamp(40px, 26vh, 300px); font-family: var(--cond); }
#match.tpl-geant .row .pts { grid-area: pts; font-size: clamp(50px, 34vh, 400px); font-family: var(--cond); letter-spacing: -.01em; }
#match.tpl-geant .tagline { height: 7vh; }

/* inversion gauche / droite (ou haut / bas) */
#match.swap #row0 { order: 3; } #match.swap .tagline { order: 2; } #match.swap #row1 { order: 1; }

/* scanner de QR code */
.scan-btn { width: 100%; margin: 10px 0 4px; padding: 16px; font-size: 18px; font-weight: 800; }
.scanner { position: fixed; inset: 0; background: #000; z-index: 20; display: flex; align-items: center; justify-content: center; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; width: min(60vw, 60vh); aspect-ratio: 1; border: 4px solid var(--accent); border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
.scan-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 18px 22px; background: rgba(13, 16, 22, .85); color: #fff; font-weight: 700; }

/* annonce vocale */
.voice-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 6px 0; }
.voice-row label.inline select { width: auto; max-width: 280px; }
.voice-row button { padding: 10px 16px; border-radius: 10px; }

/* ================================================================ modèle « Blocs couleur » */
#match.tpl-blocs .board { grid-template-rows: 1fr 1fr; padding: 0 1.6vw; position: relative; gap: 0; }
#match.tpl-blocs .tagline { position: absolute; left: 3vw; top: 50%; transform: translateY(-50%); height: auto; z-index: 2; pointer-events: none; }
#match.tpl-blocs .tagline span { font-size: clamp(13px, 3vh, 30px); }
#match.tpl-blocs .row { grid-template-columns: minmax(0, 1fr) 15vw 38vw; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "names games pts" "side games pts"; gap: 0 1.6vw; padding: 0; border: 0; border-radius: 0;
  background: var(--panel); overflow: visible; }
#match.tpl-blocs .row.side-l { border-radius: 2.4vh 2.4vh 0 0; border-bottom: 1px solid var(--line); }
#match.tpl-blocs .row.side-r { border-radius: 0 0 2.4vh 2.4vh; }
#match.tpl-blocs .row.serve { background: var(--panel); }
#match.tpl-blocs .row .srv { display: none; }
#match.tpl-blocs .row .names { align-self: center; border-left: .7vw solid var(--team); margin-left: 2.4vw; padding-left: 2.4vw; }
#match.tpl-blocs .row .names span { font-size: clamp(20px, 7vh, 84px); letter-spacing: .02em; line-height: 1.25; }
.row .names u { text-decoration: none; }
#match.tpl-blocs .row .names span { font-weight: 900; }
#match.tpl-blocs .row .names span.serving u { text-decoration: underline; text-decoration-thickness: .5vh; text-underline-offset: .9vh;
  text-decoration-color: var(--muted); }
#match.tpl-blocs .row .names span.receiving { color: var(--ink); }
#match.tpl-blocs .row .names .mini { margin: 0 .35em 0 0; width: .6em; height: .6em; vertical-align: .1em; }
#match.tpl-blocs .row .prev { position: absolute; left: 4.2vw; bottom: 2vh; font-size: clamp(14px, 3.4vh, 34px); gap: 1.4vw; }
#match.tpl-blocs .row.side-l .prev { bottom: auto; top: 2vh; }
#match.tpl-blocs .row .games { background: var(--panel2); font-size: clamp(34px, 20vh, 240px); position: relative; }
#match.tpl-blocs .row.side-l .games { border-radius: 2.4vh 2.4vh 0 0; padding-top: 4vh; }
#match.tpl-blocs .row.side-r .games { border-radius: 0 0 2.4vh 2.4vh; }
#match.tpl-blocs .row.side-l .games::before { content: attr(data-set); position: absolute; top: 2vh; left: 0; right: 0; text-align: center;
  font-size: clamp(11px, 2.4vh, 24px); font-weight: 800; letter-spacing: .2em; color: var(--muted); }
#match.tpl-blocs .row .pts { background: var(--team); color: #fff; font-size: clamp(50px, 30vh, 360px); font-weight: 900; letter-spacing: -.01em; }
#match.tpl-blocs .row.side-l .pts { border-radius: 0 2.4vh 0 0; }
#match.tpl-blocs .row.side-r .pts { border-radius: 0 0 2.4vh 0; }
#match.tpl-blocs .row.flash { animation: none; }
#match.tpl-blocs .row.flash .pts { animation: flashblk .8s ease-out; }
@keyframes flashblk { 0% { filter: brightness(1.6); transform: scale(1.03); } 100% { filter: none; transform: none; } }
#match.tpl-blocs .row.enjeu { box-shadow: none; }
#match.tpl-blocs .row.enjeu .pts { box-shadow: 0 0 0 .6vh var(--accent) inset; }
@media (orientation: portrait) {
  #match.tpl-blocs .row { grid-template-columns: minmax(0, 1fr) 18vw 34vw; }
  #match.tpl-blocs .row .pts { font-size: clamp(40px, 13vh, 200px); }
  #match.tpl-blocs .row .games { font-size: clamp(30px, 10vh, 150px); }
  #match.tpl-blocs .row .names span { font-size: clamp(18px, 3.6vh, 50px); }
}

/* montre / téléphone */
#watch-card { margin-top: 18px; }
.watch-grid { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.watch-qr svg { width: 220px; height: 220px; border-radius: 12px; display: block; }
.watch-code { font-size: 44px; font-weight: 900; letter-spacing: .22em; color: var(--accent); font-variant-numeric: tabular-nums; }
.watch-steps { padding-left: 20px; line-height: 1.6; margin: 10px 0; }
@media (max-width: 700px) { .watch-grid { grid-template-columns: 1fr; } }

/* langue */
.lang-sel { width: auto; padding: 8px 10px; font-size: 14px; font-weight: 700; }
.hub-user { color: var(--accent); font-weight: 800; }
.stack { display: block; margin: 12px 0; color: var(--muted); font-size: 14px; }
.token-box { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 16px; border-radius: 12px;
  background: var(--panel2); border: 1px solid var(--line); }
.token-box .token-ic { font-size: 20px; }
.token-box .hub-user { flex: 1; min-width: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-box .hub-user.none { color: var(--muted); font-weight: 600; }
/* détail d'un match (horodatage des points) */
.detail-overlay { position: fixed; inset: 0; background: rgba(5, 7, 10, .75); z-index: 15; display: flex; align-items: center; justify-content: center; }
.detail-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: min(980px, 94vw); max-height: 90vh;
  display: flex; flex-direction: column; padding: 18px 20px; }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail-head h2 { margin: 0; font-size: 19px; }
.det-scroll { overflow: auto; margin-top: 8px; }
#det-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#det-table th, #det-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
#det-table th { color: var(--muted); position: sticky; top: 0; background: var(--panel); }
#det-table .tm0 { color: var(--c0); } #det-table .tm1 { color: var(--c1); }

/* couleur de chaque équipe (bleu / rouge, inversable) */
:root, .screen, .detail-overlay { --c0: var(--t1); --c1: var(--t2); }
.colors-swap, .screen.colors-swap, .detail-overlay.colors-swap { --c0: var(--t2); --c1: var(--t1); }
.colors-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; flex-wrap: wrap; }
.colors-row .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin: 0 4px 0 0; }
.colors-row .d0 { background: var(--c0); } .colors-row .d1 { background: var(--c1); }
.colors-row button { padding: 8px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; }

/* à propos */
.about { max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; }
.about-head { text-align: center; padding: 22px 0 8px; }
.about-logo { font-size: 46px; }
.about-name { color: var(--accent); font-size: 32px; font-weight: 900; letter-spacing: -.01em; }
.about .small, .small { font-size: 12px; }
.about h3 { margin-top: 22px; }
.about .card p { margin: 6px 0 10px; line-height: 1.5; }
.about .wide { width: 100%; margin: 4px 0 14px; padding: 14px; font-size: 17px; }
.about .outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); border-radius: 12px; font-weight: 800; }
.about-list { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }

/* ---------- « Qui sert ? » au début de chaque set */
.srv-hint { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink2); font-size: 15px; line-height: 1.4; }
.srv-hint .ball { flex: none; }
.srv-hint b { color: var(--ink); }
.serve-dlg { position: fixed; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 2.5vh 2.5vw;
  background: rgba(6, 8, 12, .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein .25s ease-out; }
.sv-box { width: min(1160px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  padding: clamp(18px, 4vh, 34px) clamp(18px, 3.4vw, 44px) clamp(16px, 3.6vh, 32px); display: flex; flex-direction: column; gap: clamp(12px, 2.6vh, 22px);
  animation: svin .35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes svin { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.sv-hl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-over { font-size: 15px; font-weight: 800; letter-spacing: .14em; color: var(--accent-ink, var(--accent)); }
.sv-head h2 { margin: 0; font-size: clamp(30px, 5.6vh, 46px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.sv-sub { margin: 6px 0 0; font-size: 18px; color: var(--ink2); }
.sv-change { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 8px 8px 14px; border-radius: 12px;
  background: rgba(230, 255, 0, .09); border: 1px solid rgba(230, 255, 0, .35); font-size: 17px; flex-wrap: wrap; }
.sv-change svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-ink, var(--accent)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-change button { font-size: 15px; font-weight: 700; color: #0d1016; background: var(--accent); border-radius: 9px; padding: 8px 12px; min-height: 40px; }
.sv-recap { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--line); font-size: 16px; color: var(--ink2); white-space: nowrap; }
.sv-vs { color: var(--muted); }
.sv-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.sv-dot.c0 { background: var(--c0); } .sv-dot.c1 { background: var(--c1); }
.sv-court { position: relative; border-radius: 24px; background: var(--bg); border: 2px solid var(--line);
  padding: clamp(14px, 2.6vh, 22px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(36px, 5vw, 64px); }
.sv-court > i, .sv-net-lbl { position: absolute; pointer-events: none; }
.sv-tint { top: 0; bottom: 0; width: 50%; opacity: .08; }
.sv-tint.c0 { left: 0; border-radius: 22px 0 0 22px; background: var(--c0); }
.sv-tint.c1 { right: 0; border-radius: 0 22px 22px 0; background: var(--c1); }
.sv-line { background: var(--line); }
.sv-line.l { left: 30%; top: 0; bottom: 0; width: 2px; } .sv-line.r { right: 30%; top: 0; bottom: 0; width: 2px; }
.sv-line.m { left: 30%; right: 30%; top: 50%; height: 2px; }
.sv-net { left: calc(50% - 3px); top: -8px; bottom: -8px; width: 6px; border-radius: 3px; background: var(--ink2); box-shadow: 0 0 0 3px var(--bg); }
.sv-net-lbl { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-size: 11px; font-weight: 800; letter-spacing: .3em;
  color: var(--bg); background: var(--ink2); padding: 2px 8px; border-radius: 4px; }
.sv-half { position: relative; display: flex; flex-direction: column; gap: clamp(10px, 2.2vh, 18px); }
.sv-pl { position: relative; width: 100%; min-height: clamp(84px, 16.5vh, 132px); box-sizing: border-box; border-radius: 20px; padding: 10px 22px 10px 18px;
  display: flex; align-items: center; gap: 18px; text-align: left; background: var(--panel); border: 2px solid var(--line);
  transition: transform .15s, border-color .15s, box-shadow .2s, background .2s; }
.sv-pl:active { transform: scale(.98); }
.sv-pl.planned { border: 2px dashed rgba(230, 255, 0, .55); }
.sv-pl.on { background: linear-gradient(rgba(230, 255, 0, .1), rgba(230, 255, 0, .1)), var(--panel); border: 3px solid var(--accent);
  box-shadow: 0 0 0 7px rgba(230, 255, 0, .13), 0 20px 44px rgba(0, 0, 0, .45); }
#match.th-clair .sv-pl.on { border-color: var(--accent-ink); box-shadow: 0 0 0 7px rgba(150, 180, 0, .18), 0 14px 30px rgba(0, 0, 0, .12); }
#match.th-clair .sv-pl.planned { border-color: rgba(90, 106, 0, .5); }
.sv-pl.drawn { animation: svdraw .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes svdraw { 0% { transform: scale(.9) rotate(-2deg); } 100% { transform: none; } }
.sv-av { width: clamp(44px, 7.4vh, 58px); height: clamp(44px, 7.4vh, 58px); flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 3vh, 24px); font-weight: 800; border: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 18%, transparent); }
.sv-pl.c0 { --tc: var(--c0); } .sv-pl.c1 { --tc: var(--c1); }
.sv-nm { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sv-nm b { font-size: clamp(24px, 4.8vh, 38px); font-weight: 900; letter-spacing: -.01em; line-height: 1; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-nm small { font-size: 15px; font-weight: 500; color: var(--ink2); }
.sv-tag { font-size: 14px; font-weight: 900; letter-spacing: .12em; color: #0d1016; background: var(--accent); border-radius: 8px; padding: 6px 10px; }
.sv-tag.ghost { background: transparent; color: var(--accent-ink, var(--accent)); border: 2px dashed currentColor; padding: 4px 9px; font-weight: 800; }
.sv-ball { width: clamp(38px, 6.8vh, 54px); height: clamp(38px, 6.8vh, 54px); flex: none; animation: srvbounce 2.4s ease-in-out infinite; }
.sv-ball svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .5vh 1vh rgba(0, 0, 0, .45)); }
.sv-order { display: flex; align-items: center; gap: 14px; min-height: 52px; flex-wrap: wrap; }
.sv-lbl { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.sv-seq { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.sv-step { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px; font-size: 18px; font-weight: 700;
  white-space: nowrap; background: var(--panel2); border: 1px solid var(--line); }
.sv-step small { font-size: 13px; opacity: .7; }
.sv-step.first { background: var(--accent); color: #0d1016; border-color: var(--accent); }
.sv-step .sv-dot { box-shadow: 0 0 0 2px var(--panel2); } .sv-step.first .sv-dot { box-shadow: 0 0 0 2px #0d1016; }
.sv-arrow { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sv-opp, .sv-sec { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--panel2); font-weight: 600;
  border-radius: 12px; padding: 0 14px; min-height: 48px; white-space: nowrap; font-size: 15px; }
.sv-opp svg, .sv-sec svg, .sv-ghost svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sv-sec svg .f { fill: currentColor; }
.sv-noorder { font-size: 16px; color: var(--muted); }
.sv-foot { margin-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sv-ghost { display: flex; align-items: center; gap: 10px; background: transparent; color: var(--ink2); font-size: 18px; font-weight: 600;
  border-radius: 12px; padding: 0 14px; min-height: 56px; }
.sv-ghost:active { background: var(--panel2); }
.sv-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.sv-sec { font-size: 19px; font-weight: 700; border-radius: 16px; padding: 0 22px; min-height: 68px; }
.sv-cta { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(18px, 3vh, 23px); font-weight: 800; border-radius: 18px;
  padding: 0 30px; min-height: clamp(58px, 9vh, 72px); min-width: 320px; background: var(--accent); color: #0d1016;
  box-shadow: 0 12px 30px rgba(230, 255, 0, .18); }
.sv-cta svg { width: 32px; height: 32px; color: #0d1016; }
.sv-cta:disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: default; }
.sv-cta:not(:disabled):active { transform: scale(.98); }
@media (max-width: 1000px) {
  .sv-foot { flex-direction: column-reverse; align-items: stretch; }
  .sv-actions { justify-content: stretch; }
  .sv-actions > * { flex: 1; justify-content: center; }
  .sv-cta { min-width: 0; flex: 2 !important; }
  .sv-ghost { align-self: flex-start; }
}
@media (max-width: 700px) {
  .sv-court { grid-template-columns: 1fr; row-gap: 14px; }
  .sv-court > i, .sv-net-lbl { display: none; }
  .sv-head { flex-direction: column; }
  .sv-recap { white-space: normal; }
}

/* ---------- côté de service (mini-terrain + À DROITE / À GAUCHE / AU CHOIX) */
.row .side { display: flex; align-items: center; gap: 1vw; min-width: 0; }   /* toujours dans la grille (vide = largeur 0) */
.row .side:empty { display: block; width: 0; }
.row .side svg { height: min(18vh, 150px); width: auto; aspect-ratio: 110 / 170; flex: none; overflow: visible; }
.side .ct { fill: rgba(255, 255, 255, .03); stroke: var(--muted); stroke-width: 2.5; }
.side .cl { fill: none; stroke: var(--muted); stroke-width: 2; }
.side .net { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.side .tg { fill: rgba(230, 255, 0, .22); stroke: var(--accent-ink); stroke-width: 2.5; }
.side .tg.q { fill: rgba(230, 255, 0, .10); stroke-dasharray: 5 4; }
.side .ar { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; animation: sddash 1.2s linear infinite; }
.side .ah { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.side .sp { fill: #d4ec2a; stroke: var(--bg); stroke-width: 2; }
.side .qd { fill: var(--accent); }
.side .qt { font-size: 15px; font-weight: 900; fill: #0d1016; text-anchor: middle; }
@keyframes sddash { to { stroke-dashoffset: -22; } }
.side .sd-txt { display: flex; flex-direction: column; gap: .5vh; min-width: 0; }
.side .sd-txt small { font-size: clamp(10px, 1.8vh, 15px); letter-spacing: .14em; font-weight: 800; color: var(--muted); white-space: nowrap; }
.side .sd-txt b { font-size: clamp(16px, 4.8vh, 46px); font-weight: 900; color: var(--accent-ink); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.side .sd-txt em { display: none; font-style: normal; font-size: clamp(11px, 2.1vh, 17px); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }
.side .sd-pick { display: flex; gap: .8vw; margin-top: .6vh; }
.side .sd-pick span { display: flex; align-items: center; min-height: 44px; padding: 0 1.6vw; border-radius: 1.2vh; background: var(--panel2);
  border: 2px solid var(--line); font-weight: 800; font-size: clamp(14px, 2.6vh, 24px); color: var(--ink); }
.side .sd-pick span.on { background: var(--accent); color: #0d1016; border-color: var(--accent); }
.row .side.pop { animation: sdpop .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes sdpop { from { transform: scale(.85); opacity: .3; } }
#match.tpl-geant .row .side { grid-area: side; padding-bottom: 1.6vh; }
#match.tpl-geant .row .side svg { height: min(11vh, 90px); }
#match.tpl-geant .row .side .sd-txt b { font-size: clamp(14px, 4vh, 36px); }
#match.tpl-blocs .row .names { grid-area: names; }
#match.tpl-blocs .row .games { grid-area: games; } #match.tpl-blocs .row .pts { grid-area: pts; }
#match.tpl-blocs .row .side { grid-area: side; justify-self: end; margin: 0 1.6vw 1.8vh 0; }
#match.tpl-blocs .row .side svg { height: min(12vh, 100px); }
#match.tpl-blocs .row .side .sd-txt b { font-size: clamp(14px, 4vh, 36px); }
#match.tpl-face .row .side { position: absolute; top: 12vh; z-index: 1; }
#match.tpl-face .row.side-l .side { right: 2.4vw; } #match.tpl-face .row.side-r .side { left: 2.4vw; }
#match.tpl-face .row .side svg { height: min(16vh, 130px); }
@media (orientation: portrait) {
  .row .side svg { height: min(12vh, 120px); }
  .row .side small { display: none; }
}
/* l'équipe au service passe en haut : courte transition pour que le changement se voie */
.board.reorder .row { animation: rowin .5s cubic-bezier(.2, 1, .3, 1); }
@keyframes rowin { from { opacity: .25; transform: translateY(1.5vh) scale(.985); } }
@media (min-width: 1500px) and (orientation: landscape) { #match:not(.tpl-face):not(.tpl-geant) .row .side .sd-txt em { display: block; } }
#hub-msg:empty { display: none; }

/* ================================================================ modèles « Terrain » (P1 / P2), basés sur le Face à face :
   chaque moitié = le demi-terrain d'une équipe ; gros points, petits noms, rectangle jaune au fond = côté du service */
#match:not([class*="tpl-terrain"]) #terrain { display: none; }
#match[class*="tpl-terrain"] .board { display: none; }
.terrain { position: relative; flex: 1; min-height: 0; display: flex; align-items: stretch; padding: 0 1.6vw .6vh; user-select: none; -webkit-user-select: none; }
/* proportions d'un vrai terrain (20 m × 10 m) : la hauteur ne dépasse pas ~la moitié de la largeur ; terrain centré */
@media (orientation: landscape) {
  .terrain { container-type: size; align-items: center; }
  .ft-half, .ft-net { height: min(100cqh, 52cqw); }
}
.ft-net { width: max(6px, .8vw); flex: none; background: var(--ink, #f2f3f5); border-radius: 3px; }
.ft-half { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow: hidden; cursor: pointer; background: var(--panel, #171b23);
  border: 3px solid rgba(242, 243, 245, .42); }
.ft-half.l { border-right: 0; border-radius: 16px 0 0 16px; }
.ft-half.r { flex-direction: row-reverse; border-left: 0; border-radius: 0 16px 16px 0; }
.ft-half.c0 { --tc: var(--c0); } .ft-half.c1 { --tc: var(--c1); }
.ft-half:active { filter: brightness(1.12); }
.ft-bar { width: max(10px, 1.1vw); flex: none; background: var(--tc); }
.ft-back { width: 8.6vw; min-width: 64px; flex: none; display: flex; flex-direction: column; container-type: size; }
.ft-half.l .ft-back { border-right: 3px solid rgba(242, 243, 245, .22); }
.ft-half.r .ft-back { border-left: 3px solid rgba(242, 243, 245, .22); }
.ft-zone { flex: 1; margin: 8px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ft-zone.on { background: #e6ff00; color: #0d1016; }
.ft-zone.on span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; line-height: 1; white-space: nowrap; text-transform: uppercase; }
button.ft-zone { padding: 0; font: inherit; border: 3px dashed #e6ff00; background: rgba(230, 255, 0, .08); cursor: pointer; }
/* toutes les tailles suivent la place réellement disponible dans la moitié (unités cqh / cqw), pas la hauteur de l'écran :
   rien n'est coupé quand la barre du navigateur ou un bandeau prend de la place */
.ft-svc { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; container-type: size; }
.ft-cl { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: rgba(242, 243, 245, .1); pointer-events: none; }
.ft-nm { height: 13cqh; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: clamp(13px, 5.4cqh, 28px); font-weight: 800;
  color: var(--ink2, #c9ced8); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-nm.srv { color: #e6ff00; font-size: clamp(17px, 9.5cqh, 46px); font-weight: 900; }
.ft-mid { flex: 1; min-height: 0; display: flex; align-items: center; }
.ft-half.r .ft-mid { flex-direction: row-reverse; }
.ft-pts { flex: 1; min-width: 0; text-align: center; font-size: min(50cqh, 60cqw); font-weight: 900; font-style: italic; line-height: .8; letter-spacing: -.06em;
  color: var(--ink-strong, #fff); font-variant-numeric: tabular-nums; }
.ft-gs { width: 15cqw; min-width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2.4cqh; }
.ft-g, .ft-s { display: flex; flex-direction: column; align-items: center; gap: .2vh; }
.ft-gs small { font-size: clamp(9px, 2.2cqh, 13px); font-weight: 800; letter-spacing: .14em; color: var(--muted, #8b93a3); }
.ft-g b { font-size: clamp(22px, 11cqh, 62px); font-weight: 900; line-height: 1; color: var(--accent-ink, #e6ff00); }
.ft-s b { display: flex; gap: .8vw; font-size: clamp(15px, 5.6cqh, 32px); font-weight: 900; line-height: 1.1; color: #6f7787; }
.ft-s b .w { color: var(--ink, #f2f3f5); }
/* P2 : jeux et sets sur une ligne, sous les points ; le nom du serveur en jaune dans sa case */
.terrain.p2 .ft-mid, .terrain.p2 .ft-half.r .ft-mid { flex-direction: column; justify-content: center; gap: 2.6cqh; }
.terrain.p2 .ft-pts { flex: none; font-size: min(48cqh, 78cqw); }
.terrain.p2 .ft-gs { width: auto; flex-direction: row; align-items: baseline; gap: 2.4vw; }
.terrain.p2 .ft-g, .terrain.p2 .ft-s { flex-direction: row; align-items: baseline; gap: .8vw; }
.terrain.p2 .ft-g b { font-size: clamp(20px, 8.5cqh, 50px); }
.ft-tag { position: absolute; top: .6vh; left: 50%; transform: translateX(-50%); z-index: 3; padding: .7vh 1.4vw; border-radius: 999px; background: #e6ff00;
  color: #0d1016; font-size: clamp(12px, 2.2vh, 19px); font-weight: 900; letter-spacing: .06em; white-space: nowrap; pointer-events: none; }
#match.th-clair .ft-half { border-color: rgba(13, 16, 22, .25); }
#match.th-clair .ft-zone.on, #match.th-clair .ft-nm.srv { background: #e6ff00; color: #0d1016; }
#match.th-clair .ft-nm.srv { background: none; color: #4f5d00; }
@media (orientation: portrait) {
  .ft-back { width: 12vw; }
}
/* « Qui sert ? » : inverser gauche / droite d'une équipe */
.sv-half { position: relative; }
.sv-swap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--panel2); color: var(--ink);
  font-size: 14px; font-weight: 700; white-space: nowrap; }
.sv-nm small strong { color: var(--ink); font-weight: 700; }
#tpl-choice { grid-template-columns: repeat(3, 1fr); }
/* dessin du terrain (préparation) */
.tr-floor { fill: #10202e; }
.tr-half { opacity: .12; } .tr-half.c0 { fill: var(--c0); } .tr-half.c1 { fill: var(--c1); }
.tr-wall { fill: none; stroke: rgba(242, 243, 245, .7); stroke-width: 3; }
.tr-line { fill: none; stroke: rgba(242, 243, 245, .45); stroke-width: 2.5; }
.tr-net { fill: #f2f3f5; }
/* Préparation : les noms se saisissent directement sur le terrain */
.scourt { position: relative; width: 100%; aspect-ratio: 2 / 1; margin: 4px 0 2px; }
.scourt > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-team { position: absolute; top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #f2f3f5;
  padding: 3px 9px; border-radius: 999px; background: var(--tc); }
.sc-team.c0 { --tc: var(--c0); left: 8px; } .sc-team.c1 { --tc: var(--c1); right: 8px; }
.sc-slot { position: absolute; transform: translate(-50%, -50%); width: 44%; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px;
  border-radius: 12px; background: #161a22; border: 2px solid var(--tc); transition: top .35s cubic-bezier(.2, 1, .3, 1); z-index: 1; }
.sc-slot.c0 { --tc: var(--c0); } .sc-slot.c1 { --tc: var(--c1); }
.sc-slot:focus-within { box-shadow: 0 0 0 3px rgba(230, 255, 0, .45); }
.sc-slot .tr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); flex: none; }
.sc-slot > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sc-slot input { width: 100%; min-width: 0; border: 0; background: transparent; color: #f2f3f5; font: inherit; font-size: 17px; font-weight: 800; padding: 2px 0; outline: none; }
.sc-slot input::placeholder { color: #8b93a3; font-weight: 600; }
.sc-slot small { font-size: 12px; font-weight: 700; color: #b9c0cc; white-space: nowrap; }
.sc-teams { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #f2f3f5; background: #0d1016; color: #f2f3f5; font-size: 20px; font-weight: 800; cursor: pointer; }
.sc-swap { position: absolute; top: 50%; transform: translate(-50%, -50%); height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(13, 16, 22, .88); color: #f2f3f5; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ================================================================ plein écran : ni barre du haut, ni barre du bas ;
   le temps de jeu reste visible en haut au centre, le menu est un petit bouton en haut à gauche */
#match.fs .mfoot { display: none; }
#match.fs .mbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: 0 .8vw; pointer-events: none; }
#match.fs .mtitle, #match.fs #sync { display: none; }
#match.fs .mclock { grid-column: 2; grid-row: 1; justify-self: center; pointer-events: none; gap: 1.6vw; padding: .3vh 1.4vw .5vh; border-radius: 0 0 12px 12px;
  background: rgba(13, 16, 22, .85); border: 1px solid var(--line); border-top: 0; }
#match.fs .mclock b { font-size: clamp(14px, 2.6vh, 24px); }
#match.fs .mclock small { font-size: clamp(8px, 1.2vh, 12px); }
#match.fs .mactions { grid-column: 1; grid-row: 1; justify-content: flex-start; }
#match.fs #menu-btn { pointer-events: auto; margin-top: .6vh; opacity: .6; min-width: 44px; min-height: 40px; }
#match.fs .board, #match.fs .terrain { padding-top: .6vh; }
#match.fs .terrain { padding-bottom: 1.2vh; }
#match.fs .ft-tag { top: auto; bottom: 2vh; }
#match.th-clair.fs .mclock { background: rgba(255, 255, 255, .9); }

/* ================================================================ téléphone (écran étroit) : tout tient dans la largeur */
html { overflow-x: clip; }   /* jamais de défilement de côté (sans créer de zone de défilement) */
html, body { overscroll-behavior-y: none; }   /* Android : pas de « tirer pour rafraîchir » (rechargement involontaire) */
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; padding: 8px 10px; gap: 6px 8px; }
  .brand { font-size: 16px; }
  .bar-actions { order: 3; width: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; justify-content: space-between; }
  .bar-actions::-webkit-scrollbar { display: none; }
  .bar-actions .ghost { padding: 8px 7px; font-size: 13px; white-space: nowrap; flex: none; }
  .bar-actions .pill { font-size: 10px; padding: 1px 6px; margin-left: 3px; }
  .lang-sel { padding: 6px 8px; min-height: 0; }
  .setup-grid { padding: 10px; gap: 10px; }
  .card { padding: 14px 12px; }
  .card.narrow { margin: 10px; }
  h2 { font-size: 19px; }
  /* terrain de la préparation */
  .scourt { margin: 2px 0; }
  .sc-slot { width: 45%; padding: 4px 6px 4px 8px; gap: 5px; border-radius: 10px; }
  .sc-slot input { font-size: 15px; }
  .sc-team { font-size: 9px; top: 5px; padding: 2px 6px; }
  .sc-team.c0 { left: 5px; } .sc-team.c1 { right: 5px; }
  .sc-swap { height: 30px; padding: 0 9px; font-size: 13px; }
  .sc-swap span { display: none; }
  .sc-teams { width: 34px; height: 34px; font-size: 16px; }
  /* options */
  label.check { font-size: 14px; }
  .voice-row label.inline { flex-wrap: wrap; gap: 6px 10px; }
  .voice-row label.inline select, label.inline select { max-width: 100%; }
  .rules { grid-template-columns: 1fr; }
  .seg button { padding: 10px 4px; font-size: 13px; }
  .start-row { padding: 10px 10px 0; gap: 8px; }
  .start-row .primary.big, #start { width: 100%; font-size: 20px; padding: 16px 20px; }
  .start-row #resume { width: 100%; }
}
@media (max-width: 640px) {
  /* « Qui sert ? » sur une colonne */
  .serve-dlg { padding: 8px; }
  .sv-box { padding: 14px 12px; border-radius: 18px; gap: 10px; }
  .sv-head { gap: 10px; }
  .sv-over { font-size: 12px; }
  .sv-head h2 { font-size: 26px; }
  .sv-sub { font-size: 14px; margin-top: 2px; }
  .sv-recap { white-space: normal; font-size: 13px; border-radius: 12px; padding: 6px 10px; gap: 6px; }
  .sv-change { font-size: 14px; }
  .sv-court { grid-template-columns: 1fr; row-gap: 12px; column-gap: 0; padding: 10px; border-radius: 16px; }
  .sv-court > i, .sv-court > .sv-net-lbl { display: none; }
  .sv-half { gap: 8px; }
  .sv-pl { min-height: 62px; padding: 8px 12px; gap: 10px; border-radius: 14px; }
  .sv-av { width: 36px; height: 36px; font-size: 15px; border-width: 2px; }
  .sv-nm b { font-size: 21px; }
  .sv-nm small { font-size: 12px; }
  .sv-tag { font-size: 11px; padding: 4px 7px; }
  .sv-ball { width: 30px; height: 30px; }
  .sv-swap { position: static; transform: none; align-self: center; height: 34px; font-size: 13px; padding: 0 12px; }
  .sv-order { gap: 8px; min-height: 0; }
  .sv-step { height: 36px; font-size: 14px; padding: 0 10px; }
}
/* téléphone en portrait : le terrain du match est vertical (une équipe en haut, l'autre en bas, filet au milieu) */
@media (orientation: portrait) and (max-width: 640px) {
  .terrain { flex-direction: column; padding: 2px 8px 8px; }
  .ft-net { width: 100%; height: 6px; }
  .ft-half { flex-direction: column !important; border: 3px solid rgba(242, 243, 245, .42) !important; }
  .ft-half.l { border-bottom: 0 !important; border-radius: 16px 16px 0 0; }
  .ft-half.r { flex-direction: column-reverse !important; border-top: 0 !important; border-radius: 0 0 16px 16px; }
  .ft-bar { width: 100%; height: 8px; }
  .ft-back { width: 100%; height: 13%; min-width: 0; flex-direction: row-reverse; border: 0 !important; }
  .ft-half.l .ft-back { border-bottom: 3px solid rgba(242, 243, 245, .22) !important; }
  .ft-half.r .ft-back { border-top: 3px solid rgba(242, 243, 245, .22) !important; }
  .ft-zone { margin: 6px; }
  .ft-zone.on span { writing-mode: horizontal-tb; transform: none; font-size: clamp(16px, 55cqh, 30px) !important; }
  .ft-svc { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ft-half.r .ft-svc { grid-template-rows: minmax(0, 1fr) auto; }
  .ft-svc > .ft-nm { height: auto; padding: 1.2vh 6px; font-size: 15px; }
  .ft-svc > .ft-nm:first-child { grid-column: 2; grid-row: 1; }
  .ft-svc > .ft-nm:nth-child(3) { grid-column: 1; grid-row: 1; }
  .ft-half.r .ft-svc > .ft-nm { grid-row: 2; }
  .ft-svc > .ft-mid { grid-column: 1 / -1; grid-row: 2; }
  .ft-half.r .ft-svc > .ft-mid { grid-row: 1; }
  .ft-nm.srv { font-size: 19px; }
  .ft-cl { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .ft-pts { font-size: min(62cqh, 50cqw); }
  .terrain.p2 .ft-pts { font-size: min(52cqh, 60cqw); }
  .ft-half.r .ft-mid { flex-direction: row; }
  .ft-gs { width: 22cqw; }
}
@media (max-width: 640px) {
  .sv-foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .sv-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .sv-actions > button, .sv-cta { width: 100%; min-width: 0 !important; justify-content: center; }
  .sv-cta { font-size: 18px; min-height: 56px; }
  .sv-foot .sv-ghost { justify-content: center; }
  .ft-svc > .ft-nm { font-size: 14px; }
}
@media (max-width: 640px) {
  .bar-actions { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; align-items: center; }
  .bar-actions .ghost { white-space: normal; text-align: center; line-height: 1.15; padding: 6px 2px; font-size: 12px; min-height: 44px; }
  .bar-actions .ghost .pill { display: block; width: max-content; max-width: 100%; margin: 3px auto 0; font-size: 9px; padding: 1px 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-actions .ghost .pill:empty { display: none; }
}
/* logo Kourt Point */
.brand-logo { height: 40px; width: auto; display: block; }
.about-logo img { width: 72px; height: 72px; display: block; margin: 0 auto; }
@media (max-width: 640px) { .brand-logo { height: 32px; } }