/* Tiroir de télémétrie : coulisse depuis la droite, ouvert par la languette fléchée */
:root { --tele-w:390px; --topbar-h:56px; }
.tele-drawer {
  position:fixed; top:var(--topbar-h); right:0; bottom:0; width:var(--tele-w); max-width:92vw; z-index:15;
  display:flex; flex-direction:column; background:rgba(15,19,24,.97); backdrop-filter:blur(10px);
  border-left:1px solid var(--line); box-shadow:-16px 0 40px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.22,.8,.25,1), visibility 0s .38s; visibility:hidden;
}
body.in-room .tele-drawer { visibility:visible; transition:transform .38s cubic-bezier(.22,.8,.25,1); }
body.tele-open .tele-drawer { transform:none; }
body:not(.in-room) .tele-drawer { display:none; }
.tele-toggle {
  position:absolute; left:-36px; top:50%; translate:0 -50%; width:36px; height:104px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--line); border-right:0; border-radius:12px 0 0 12px; background:var(--panel); color:var(--text);
}
.tele-toggle:hover { border-color:var(--cyan); color:var(--cyan); filter:none; }
.tele-toggle svg { width:16px; height:16px; transition:transform .38s cubic-bezier(.22,.8,.25,1); }
body.tele-open .tele-toggle svg { transform:rotate(180deg); }
.tele-toggle span { writing-mode:vertical-rl; transform:rotate(180deg); font:700 9px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.tele-head { padding:14px 18px; border-bottom:1px solid var(--line); font:800 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.tele-cards { flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:12px; }
.tele-empty { margin:24px 8px; color:var(--muted); font-size:13px; text-align:center; }
@media (min-width:901px) {
  .page { transition:margin-right .38s cubic-bezier(.22,.8,.25,1); }
  body.tele-open .page { margin-right:var(--tele-w); }
}

/* --- fiche sportif --- */
.tcard { padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); display:flex; flex-direction:column; gap:14px; }
.tc-head { display:flex; align-items:center; gap:8px; }
.tc-head b { font-size:15px; font-weight:800; overflow-wrap:anywhere; }
.tc-role { padding:1px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.tc-role:empty { display:none; }
.tc-live { margin-left:auto; width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .3s, box-shadow .3s; }
.tc-live.on { background:var(--ok); box-shadow:0 0 0 4px rgba(61,220,151,.18); }
.tc-label { margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.tc-block { min-width:0; }

/* carte */
.tc-map { position:relative; height:190px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2); }
.tc-nogps { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; text-align:center; padding:0 12px; }
.tc-coords { margin-top:6px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.tc-map .leaflet-container { width:100%; height:100%; background:var(--bg-2); font:inherit; }
.tc-map .leaflet-tile-pane { filter:invert(1) hue-rotate(195deg) brightness(.88) contrast(.92) saturate(.55); }
.tc-map .leaflet-control-attribution { background:rgba(9,11,14,.7); color:var(--muted); font-size:9px; }
.tc-map .leaflet-control-attribution a { color:var(--muted); }
.tc-pin { background:none; border:0; }
.tc-pin .pin-pulse { position:absolute; inset:0; border-radius:50%; background:rgba(24,171,248,.35); animation:pinpulse 1.8s ease-out infinite; }
.tc-pin .pin-arrow { position:absolute; left:50%; top:50%; width:0; height:0; margin:-9px 0 0 -7px; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:18px solid var(--cyan); filter:drop-shadow(0 0 3px #000); transform-origin:7px 9px; }
@keyframes pinpulse { from { transform:scale(.4); opacity:1; } to { transform:scale(1.7); opacity:0; } }

/* cardio */
.tc-hr { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.tc-heart { width:34px; height:34px; fill:var(--muted); flex:none; transform-origin:center; }
.tc-heart.beat { animation:heartbeat 1s ease-in-out infinite; }
@keyframes heartbeat { 0%,100% { scale:1; } 12% { scale:1.28; } 28% { scale:1; } 40% { scale:1.14; } 55% { scale:1; } }
.tc-bpm { display:flex; align-items:baseline; gap:5px; }
.tc-bpm strong { font-size:40px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.tc-bpm small, .tc-speed small, .tc-ringtxt small, .tc-alt small { color:var(--muted); font-size:11px; font-weight:600; }
.tc-zone { margin-left:auto; padding:3px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.04em; }
.tc-hr-chart { display:block; width:100%; height:86px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); }

/* vitesse */
.tc-gauge { position:relative; max-width:300px; margin:0 auto; }
.tc-gauge svg { display:block; width:100%; }
.g-track, .g-val { fill:none; stroke-width:13; stroke-linecap:round; }
.g-track { stroke:var(--line); }
.g-val { transition:stroke-dasharray .22s linear; }
.g-needle { transform-origin:100px 100px; transition:transform .22s linear; }
.g-needle circle { fill:var(--text); stroke:var(--panel); stroke-width:3; }
.g-t { fill:var(--muted); font:600 10px var(--font); }
.tc-speed { position:absolute; left:0; right:0; bottom:2px; text-align:center; display:flex; flex-direction:column; align-items:center; line-height:1; }
.tc-speed strong { font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.tc-stats { display:flex; justify-content:center; gap:22px; margin-top:6px; color:var(--muted); font-size:11px; }
.tc-stats b { color:var(--text); font-weight:700; margin-left:4px; }

/* cadence, altitude, cap */
.tc-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.tc-mini { min-width:0; padding:10px 8px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); display:flex; flex-direction:column; align-items:center; text-align:center; }
.tc-mini .tc-label { align-self:flex-start; }
.tc-ringwrap { position:relative; width:64px; height:64px; }
.tc-ring { width:100%; height:100%; }
.r-track, .r-val { fill:none; stroke-width:6; stroke-linecap:round; }
.r-track { stroke:var(--line); }
.r-val { stroke:var(--cyan); transition:stroke-dasharray .22s linear; }
.tc-ringtxt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.tc-ringtxt strong { font-size:16px; font-weight:800; }
.tc-ringtxt small { font-size:9px; }
.tc-alt { display:flex; align-items:baseline; gap:4px; margin-top:6px; }
.tc-alt strong { font-size:22px; font-weight:800; }
.tc-alt-chart { width:100%; height:32px; margin-top:4px; }
.tc-compass { width:64px; height:64px; }
.tc-compass circle { fill:none; stroke:var(--line); stroke-width:2; }
.tc-compass text { fill:var(--muted); font:700 9px var(--font); }
.c-needle { transform-origin:32px 32px; transition:transform .22s linear; }
.c-needle polygon { fill:var(--cyan); }
.tc-dir { margin-top:2px; color:var(--text); font-size:11px; font-weight:700; }