/* Charte VideoLog (portal.videolog.app) : thème sombre, cyan #18abf8 */
  :root {
    --bg:#090b0e; --bg-2:#0f1318; --panel:#151a21; --line:#232b35;
    --text:#eef2f6; --muted:#98a3b0; --cyan:#18abf8; --blue:#3a8fd6; --rec:#e5373a; --ok:#3ddc97;
    --radius:14px; --font:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
  }
  * { box-sizing:border-box; }
  html { background:var(--bg); }
  body {
    margin:0; min-height:100vh; color:var(--text); font:14px/1.45 var(--font);
    background-color:var(--bg);
    background-image:linear-gradient(rgba(35,43,53,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(35,43,53,.35) 1px, transparent 1px);
    background-size:64px 64px;
  }

  /* --- barre du haut --- */
  .topbar {
    position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px;
    padding:8px 16px; background:rgba(9,11,14,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.1em; font-size:15px; }
  .brand img { height:36px; width:auto; display:block; }
  .brand em { font-style:normal; font-weight:600; letter-spacing:.04em; font-size:12px; color:var(--muted); padding-left:10px; border-left:1px solid var(--line); }
  #room[hidden], #login[hidden] { display:none; }
  #room:not([hidden]) { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
  #roomTitle { margin:0 0 8px; font-size:13px; font-weight:700; color:var(--cyan); letter-spacing:.04em; }
  #participants { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
  #participants li { display:flex; align-items:center; gap:7px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-size:12px; }
  .dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; }
  .dot.speaking { background:var(--cyan); box-shadow:0 0 0 3px rgba(24,171,248,.25); }
  .you { color:var(--muted); font-size:11px; }
  #room label { display:inline-flex; align-items:center; gap:7px; margin:0; color:var(--muted); font-size:12px; font-weight:500; }
  #room .spacer { flex:1; }
  #room details { flex-basis:100%; margin:0; font-size:12px; }
  #room summary { cursor:pointer; color:var(--muted); }
  #room summary:hover { color:var(--text); }
  #dataFilter { width:100%; box-sizing:border-box; margin:8px 0 0; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); color:var(--text); font:12px var(--font); }
  .data-bar { display:flex; gap:10px; align-items:center; margin-top:10px; }
  .data-bar #dataFilter { flex:1; min-width:0; margin:0; }
  #dataClear { padding:6px 12px; font-size:12px; white-space:nowrap; }
  .data-wrap { position:relative; margin-top:12px; }
  #dataJump { position:absolute; right:14px; bottom:14px; padding:4px 10px; font-size:11px; background:rgba(9,11,14,.92); }
  #dataJump[hidden] { display:none; }
  #dataFilterInfo { margin-top:8px; color:var(--muted); font-size:11px; }
  #dataFilterInfo:empty { display:none; }
  #dataLog { max-height:220px; overflow:auto; margin:8px 0 4px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--muted); font:11px/1.4 ui-monospace, Consolas, monospace; white-space:pre-wrap; word-break:break-all; }
  #bands .tr { margin:0 0 12px; padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
  #room #postureBox { margin:0; font-size:12px; color:var(--muted); }
  #room #postureBox * { margin:0; padding:0; border:0; display:inline; }

  /* --- formulaires et boutons --- */
  label { display:block; margin:14px 0 6px; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
  input:not([type=checkbox]), select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--text); font:inherit; }
  #room select { width:auto; padding:5px 10px; font-size:12px; }
  input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
  input[type=checkbox] { accent-color:var(--cyan); width:15px; height:15px; margin:0; }
  button { padding:9px 16px; border:1px solid transparent; border-radius:10px; background:var(--cyan); color:#04141f; font:inherit; font-weight:700; cursor:pointer; transition:filter .15s, border-color .15s; }
  button:hover { filter:brightness(1.1); }
  button:disabled { opacity:.5; cursor:default; }
  button.secondary { background:transparent; color:var(--text); border-color:var(--line); }
  button.secondary:hover { border-color:var(--cyan); filter:none; }
  #room button { padding:6px 12px; font-size:12px; }
  #leave:hover { border-color:var(--rec); color:var(--rec); }
  #status { min-height:0; margin:0 0 6px; font-size:12px; color:var(--muted); }
  #status:empty { display:none; }
  .ok { color:var(--ok) !important; } .err { color:var(--rec) !important; }

  /* --- connexion --- */
  .page { padding:12px 16px 20px; width:100%; }
  #login { max-width:420px; margin:9vh auto 0; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
  #login h1 { margin:0; font-size:22px; font-weight:800; }
  #login p { margin:6px 0 4px; color:var(--muted); font-size:13px; }
  #login button { width:100%; margin-top:22px; padding:12px; }
  label.check { display:flex; align-items:center; gap:10px; margin:18px 0 0; color:var(--text); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; }
  #login .hint { margin:6px 0 0 25px; font-size:11px; }
  /* aperçu de ma propre webcam (en miroir) */
  #selfView { position:fixed; left:16px; bottom:16px; z-index:25; width:200px; aspect-ratio:4 / 3; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#000; box-shadow:0 8px 28px rgba(0,0,0,.45); }
  #selfView[hidden] { display:none; }
  #selfView { cursor:grab; touch-action:none; user-select:none; }
  #selfView.dragging { cursor:grabbing; box-shadow:0 12px 36px rgba(0,0,0,.6); }
  #selfView video { display:block; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  #selfView span { position:absolute; left:8px; top:8px; padding:2px 9px; border:1px solid var(--line); border-radius:999px; background:rgba(9,11,14,.75); font:700 10px/1.3 var(--font); letter-spacing:.1em; text-transform:uppercase; }

  /* --- une ligne par sportif : télémétrie + 3 panneaux --- */
  #videos { display:flex; flex-direction:column; gap:12px; }
  .video-card { padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:0; }
  .telemetry-field { display:flex; align-items:baseline; gap:6px; padding:3px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); min-width:0; }
  .telemetry-field small { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
  .telemetry-field strong { font-size:13px; font-weight:700; overflow-wrap:anywhere; }
  .video-posture { flex-basis:100%; margin:0; color:var(--muted); font-size:11px; }
  .vwrap { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows:minmax(0, 1fr); gap:10px; }
  .vwrap > * { min-width:0; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
  .video-stage, .avatar-babylon { position:relative; height:100%; }
  .vwrap video { display:block; width:100%; height:100%; background:#000; object-fit:contain; }
  .video-stage .overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  /* Effet miroir : la vidéo et le squelette dessiné dessus sont retournés ensemble */
  body.mirror-video .video-stage video, body.mirror-video .video-stage .overlay { transform:scaleX(-1); }
  .avatar-babylon iframe { display:block; width:100%; height:100%; border:0; }
  /* étiquettes des panneaux */
  .video-stage::before, .panel-title {
    position:absolute; z-index:2; top:10px; left:10px; padding:3px 10px; border:1px solid var(--line); border-radius:999px;
    background:rgba(9,11,14,.75); color:var(--text); font:700 10px/1.3 var(--font); letter-spacing:.1em; text-transform:uppercase; pointer-events:none;
  }
  .video-stage::before { content:"Vidéo · 33 points"; }
  .panel-title { left:auto; right:10px; }
  .avatar-babylon .avatar-credit { z-index:2; max-width:70%; }
  .avatar-credit { position:absolute; z-index:1; left:10px; bottom:8px; color:var(--muted); font:500 9px/1.2 var(--font); }
  .avatar-credit a { color:inherit; }
  body.no-avatar .avatar-babylon, body.no-avatar .glb-label { display:none !important; }
  body.no-avatar .vwrap, .video-card.avatar-off .vwrap { grid-template-columns:minmax(0, 1fr); }
  .video-card.avatar-off .avatar-babylon { display:none; }
  /* la carte grandit avec le bandeau du sportif (micro, réseau) ; la zone vidéo + avatar garde une hauteur confortable */
  @media (min-width:901px) { .video-card { height:auto; } .vwrap { flex:none; height:max(400px, calc(100vh - 380px)); } }
  @media (max-width:900px) {
    .vwrap { grid-template-columns:minmax(0, 1fr); grid-template-rows:none; }
    .video-stage, .avatar-babylon { height:auto; aspect-ratio:3 / 4; max-height:70vh; }
    .telemetry-field { flex-direction:column; gap:0; }
  }