/* =====================================================================
   Tandem — Coach GPS : HUD holographique de casque high-tech
   Fond #000 · cyan #00E5FF (13,6:1) · bleu clair #4DA3FF (8,0:1) · blanc (21:1)
   Ambre #FFB300 = hors cible (11,4:1) · Rouge #FF3B30 = alertes (cadre / icône ;
   le texte d'alerte reste blanc sur noir pour garder 21:1).
   Pas de flou, pas de backdrop-filter, aucune animation continue.
   Polices incluses (SIL Open Font License, voir fonts/OFL-*.txt).
   ===================================================================== */
@font-face { font-family: 'Orbitron'; font-weight: 700; font-display: swap; src: url('fonts/orbitron-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-weight: 900; font-display: swap; src: url('fonts/orbitron-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 800; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-800-normal.woff2') format('woff2'); }

:root {
  --cg-bg: #000;
  --cg-ink: #fff;
  --cg-cyan: #00E5FF;
  --cg-blue: #4DA3FF;
  --cg-amber: #FFB300;
  --cg-red: #FF3B30;
  --cg-line: rgba(0, 229, 255, .55);
  --cg-line-2: rgba(0, 229, 255, .22);
  --cg-glow: 0 0 8px rgba(0, 229, 255, .55);
  --cg-lw: 1.5px;                     /* épaisseur des lignes d'interface */
  --cg-sec: var(--cg-blue);          /* couleur des infos secondaires */
  --cg-title: 'Orbitron', ui-monospace, 'SF Mono', Menlo, monospace;
  --cg-num: 'Barlow Semi Condensed', -apple-system, 'Arial Narrow', Arial, sans-serif;
}
/* Mode soleil : pas de halo, lignes épaissies, infos secondaires en blanc */
body.cg-sun { --cg-glow: none; --cg-lw: 3px; --cg-sec: #fff; --cg-line: #00E5FF; --cg-line-2: rgba(0, 229, 255, .6); }

body.route-coach .view { background: var(--cg-bg); }

/* Crochets d'angle fins (au lieu de cadres pleins) : 8 petits traits dessinés en fond */
.cg-br {
  --c: var(--cg-cyan); --l: 12px; --t: var(--cg-lw);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
}
/* libellés techniques */
.cg-k { display: block; font: 700 11px/1.2 var(--cg-title); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cg-cyan); }

/* =====================================================================
   Écran de préparation
   ===================================================================== */
.cg { color: var(--cg-ink); max-width: 720px; gap: 16px; font-family: var(--cg-num); font-weight: 600; font-size: 16px; }
.cg b { font-weight: 800; }
.cg code { font-family: var(--cg-num); color: var(--cg-cyan); font-weight: 800; }

.cg-head { position: relative; padding-bottom: 12px; border-bottom: var(--cg-lw) solid var(--cg-line-2); }
.cg-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 90px; height: var(--cg-lw); background: var(--cg-cyan); box-shadow: var(--cg-glow); }
.cg-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-title h2 { font: 900 20px var(--cg-title); letter-spacing: 3px; white-space: nowrap; color: var(--cg-cyan); text-shadow: var(--cg-glow); flex: 1; }
.cg-tick { width: 14px; height: 14px; border: var(--cg-lw) solid var(--cg-cyan); border-radius: 50%; position: relative; box-shadow: var(--cg-glow); }
.cg-tick::after { content: ''; position: absolute; inset: 3px; background: var(--cg-cyan); border-radius: 50%; }
.cg-head p { font-size: 16px; margin-top: 4px; color: var(--cg-sec); }
.cg-sunbtn { min-height: 40px; padding: 0 12px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); border-radius: 2px; font: 700 12px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.cg-sunbtn.on { background: var(--cg-cyan); color: #000; }

.cg-panel {
  position: relative; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 12px;
  background-color: #000;
  --c: var(--cg-cyan); --l: 16px; --t: var(--cg-lw);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size: var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l);
  background-repeat: no-repeat;
}
/* fine ligne de liaison diagonale en haut à droite des panneaux */
.cg-panel::after { content: ''; position: absolute; right: -10px; top: -10px; width: 14px; height: var(--cg-lw); background: var(--cg-line); transform: rotate(-45deg); transform-origin: left center; }
.cg-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cg-ph > span:first-child { font: 700 13px var(--cg-title); letter-spacing: 2px; color: var(--cg-cyan); text-shadow: var(--cg-glow); }
.cg-ph em { font-style: normal; color: var(--cg-sec); letter-spacing: 0; }
.cg-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cg-row-tight { gap: 14px; }
.cg-note { font-size: 15px; color: var(--cg-ink); line-height: 1.35; }
.cg-link { background: none; border: 0; color: var(--cg-cyan); font: 800 15px var(--cg-num); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; }

.cg-text {
  width: 100%; min-height: 220px; resize: vertical;
  background: #000; color: var(--cg-ink);
  border: var(--cg-lw) solid var(--cg-line-2); border-left: 3px solid var(--cg-cyan); border-radius: 0;
  padding: 12px; font: 600 16px/1.5 var(--cg-num); caret-color: var(--cg-cyan);
}
.cg-text:focus { outline: none; border-color: var(--cg-cyan); box-shadow: var(--cg-glow); }
.cg-help summary { cursor: pointer; color: var(--cg-cyan); font: 700 12px var(--cg-title); letter-spacing: 1px; }
.cg-help ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }

.cg-errors { border: 2px solid var(--cg-red); padding: 12px; font-size: 16px; }
.cg-errors b { color: #fff; }
.cg-errors b::before { content: '⚠ '; color: var(--cg-red); }
.cg-errors ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.cg-ln { font: 800 14px var(--cg-num); color: #fff; border: 1.5px solid var(--cg-red); padding: 0 6px; }

.cg-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cg-sum > div { border-left: var(--cg-lw) solid var(--cg-cyan); padding: 2px 0 2px 10px; }
.cg-sum b { font: 800 24px var(--cg-num); font-variant-numeric: tabular-nums; }

.cg-blocks { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cg-sep { font: 700 12px var(--cg-title); letter-spacing: 2px; color: var(--cg-cyan); padding: 10px 0 4px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--cg-line-2); }
.cg-sep .ic { width: 15px; height: 15px; }
.cg-trans { color: var(--cg-amber); letter-spacing: .5px; border-bottom: 0; }
.cg-block { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.cg-bmain { font-size: 16px; line-height: 1.3; }
.cg-bmain small { display: block; font-size: 14px; font-weight: 600; color: var(--cg-sec); margin-top: 1px; }

/* pastilles de zone : contour pour les zones calmes, plein pour les zones intenses */
.cg-z { flex: none; min-width: 58px; text-align: center; font: 700 12px var(--cg-title); padding: 5px 4px; border: var(--cg-lw) solid var(--cg-blue); color: var(--cg-blue); }
.cg-z.z2 { color: var(--cg-cyan); border-color: var(--cg-cyan); }
.cg-z.z3 { background: var(--cg-cyan); color: #000; border-color: var(--cg-cyan); }
.cg-z.z4 { background: #fff; color: #000; border-color: #fff; }
.cg-z.z5 { background: #fff; color: #000; border-color: var(--cg-red); box-shadow: inset 0 -4px 0 var(--cg-red); }

.cg-map { width: 100%; height: 240px; display: block; }
.cg-prof { width: 100%; height: 110px; display: block; }

.cg-btn {
  min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--cg-title); letter-spacing: 1px; cursor: pointer; border-radius: 0;
  background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line);
}
.cg-btn .ic { width: 16px; height: 16px; }
.cg-btn-ghost { background: #000; }

.cg-zgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cg-zgrid { grid-template-columns: 1fr; } }
.cg-ztab { width: 100%; border-collapse: collapse; }
.cg-ztab caption { text-align: left; font-weight: 800; font-size: 16px; padding-bottom: 6px; white-space: nowrap; }
.cg-ztab caption .ic { width: 15px; height: 15px; color: var(--cg-cyan); vertical-align: -2px; margin-right: 4px; }
.cg-ztab thead th { font: 700 10px var(--cg-title); letter-spacing: 1px; text-transform: uppercase; color: var(--cg-cyan); text-align: left; padding: 0 4px 4px; }
.cg-ztab td, .cg-ztab tbody th { padding: 3px 4px; text-align: left; }
.cg-ztab input {
  width: 100%; min-height: 42px; background: #000; color: var(--cg-ink);
  border: 0; border-bottom: var(--cg-lw) solid var(--cg-line); border-radius: 0; padding: 0 8px;
  font: 800 19px var(--cg-num); font-variant-numeric: tabular-nums;
}
.cg-ztab input::placeholder { color: var(--cg-sec); }
.cg-ztab input:focus { outline: none; border-bottom-color: var(--cg-cyan); box-shadow: 0 6px 8px -6px rgba(0, 229, 255, .6); }
.cg-zerr { color: #fff; font-weight: 800; font-size: 15px; border-left: 3px solid var(--cg-red); padding-left: 8px; }

.cg-go { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.cg-start {
  position: relative; min-height: 86px; border-radius: 0; cursor: pointer;
  background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-cyan);
  font: 900 26px var(--cg-title); letter-spacing: 8px;
  box-shadow: var(--cg-glow), inset 0 0 0 5px #000, inset 0 0 0 6px var(--cg-line-2);
}
.cg-start:active { background: var(--cg-cyan); color: #000; }
.cg-start:disabled { color: #fff; border-color: var(--cg-red); box-shadow: none; cursor: not-allowed; letter-spacing: 3px; font-size: 20px; }
.cg-go .cg-note { text-align: center; }
.cg-warnline { font-weight: 800; }

.cg-check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.cg-check input { width: 22px; height: 22px; flex: none; accent-color: var(--cg-cyan); margin-top: 1px; }
.cg-seg { display: inline-flex; flex-wrap: wrap; border: var(--cg-lw) solid var(--cg-line); }
.cg-seg button { min-width: 50px; min-height: 42px; padding: 0 10px; background: #000; color: var(--cg-cyan); border: 0; border-right: 1px solid var(--cg-line-2); font: 700 12px var(--cg-title); cursor: pointer; }
.cg-seg button:last-child { border-right: 0; }
.cg-seg button.on { background: var(--cg-cyan); color: #000; }
.cg-dim { opacity: 1; }
.cg-live { --c: var(--cg-red); }
.cg-live .cg-ph > span:first-child { color: #fff; text-shadow: none; }
.cg-live .cg-ph > span:first-child::before { content: '● '; color: var(--cg-red); }
.cg-grow { flex: 1; min-height: 64px; font-size: 20px; }

.cg-hist { display: flex; flex-direction: column; gap: 8px; }
.cg-hrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cg-line-2); padding-bottom: 8px; }
.cg-hrow small { display: block; color: var(--cg-sec); font-size: 14px; }

/* =====================================================================
   Écran de séance plein écran (HUD). Mis à jour 1 fois par seconde.
   Seules animations : démarrage (1,6 s) et éclat au changement de bloc.
   ===================================================================== */
body.cgx-open { overflow: hidden; }
.cgx {
  position: fixed; inset: 0; z-index: 2000;
  background: #000; color: var(--cg-ink);
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 4px) 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  overflow-y: auto; overscroll-behavior: contain;
  font-family: var(--cg-num); font-weight: 600;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
.cgx[hidden], .cgx [hidden] { display: none !important; }
.cgx b { font-weight: 800; }

.cgx-top { display: flex; align-items: center; gap: 5px; min-height: 40px; }
.cg-sun-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -4px; }
.cgx-offer .cg-sun-ic { color: var(--cg-cyan); }
.cgx-tbtn { white-space: nowrap; min-height: 38px; min-width: 38px; padding: 0 8px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 700 11px var(--cg-title); letter-spacing: .5px; cursor: pointer; }
.cgx-sq { font-size: 17px; padding: 0; }
body.cg-sun .cgx-tbtn[data-a=sun] { background: var(--cg-cyan); color: #000; }
.cgx-pill { font: 700 10px var(--cg-title); color: var(--cg-sec); border: 1px solid var(--cg-line-2); padding: 5px 5px; white-space: nowrap; }
.cgx-pill.cgx-bad { color: #fff; border: 1.5px solid var(--cg-red); }
.cgx-simtag { color: #000; background: var(--cg-cyan); border-color: var(--cg-cyan); }
.cgx-clock { margin-left: auto; white-space: nowrap; font: 800 20px var(--cg-num); font-variant-numeric: tabular-nums; }

/* alerte : texte blanc sur noir (21:1), cadre et icône rouges */
.cgx-warn { display: flex; gap: 8px; align-items: center; border: 2px solid var(--cg-red); color: #fff; font-weight: 800; font-size: 17px; padding: 5px 10px; line-height: 1.15; }
.cgx-warn i { font-style: normal; color: var(--cg-red); font-size: 20px; }

.cgx-block { display: flex; align-items: center; gap: 12px; padding: 6px 10px; }
.cgx-zbox b { display: block; font: 900 22px var(--cg-title); color: var(--cg-cyan); text-shadow: var(--cg-glow); white-space: nowrap; }
.cgx-btext { min-width: 0; }
.cgx-btext b { font-size: 22px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cgx-btext small { display: block; font: 700 10px var(--cg-title); color: var(--cg-sec); margin-top: 4px; letter-spacing: .8px; }

/* --- anneaux --- */
.cgx-gauge { position: relative; width: min(100%, 34vh, 320px); aspect-ratio: 300 / 256; margin: 0 auto; flex: none; }
.cgx-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cgx-rings { transform-origin: 150px 150px; }
.cgx-dial { fill: none; stroke: var(--cg-cyan); stroke-width: var(--cg-lw); filter: drop-shadow(0 0 3px rgba(0, 229, 255, .8)); }
.cgx-tk { stroke: var(--cg-blue); stroke-width: 1; }
.cgx-tkM { stroke: var(--cg-cyan); stroke-width: 2; }
.cgx-tl { fill: var(--cg-sec); font: 700 11px var(--cg-title); text-anchor: middle; dominant-baseline: middle; }
.cgx-band-bg { fill: none; stroke: rgba(0, 229, 255, .10); stroke-width: 10; }
.cgx-band { fill: none; stroke: var(--cg-cyan); stroke-width: 10; filter: drop-shadow(0 0 5px rgba(0, 229, 255, .8)); }
.cgx-val { fill: none; stroke: #fff; stroke-width: 2.5; }
.cgx-seg { fill: none; stroke: rgba(77, 163, 255, .28); stroke-width: 7; }
.cgx-seg.on { stroke: var(--cg-cyan); }
.cgx-ret { fill: none; stroke: var(--cg-line); stroke-width: 1.2; }
.cgx-lead { fill: none; stroke: var(--cg-line); stroke-width: 1; }
.cgx-inner { fill: none; stroke: var(--cg-line-2); stroke-width: 1; stroke-dasharray: 2 5; }
.cgx-ptr { fill: #fff; stroke: #000; stroke-width: 2; }
.cgx-scan { stroke: var(--cg-cyan); stroke-width: 2; opacity: 0; }
body.cg-sun .cgx-dial, body.cg-sun .cgx-band { filter: none; }
body.cg-sun .cgx-seg { stroke-width: 9; }
body.cg-sun .cgx-ret, body.cg-sun .cgx-lead, body.cg-sun .cgx-tk { stroke-width: 2; }
body.cg-sun .cgx-inner { display: none; }

.cgx-speed { position: absolute; inset: 0 0 -17.2% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
/* chiffres principaux : blanc pur, très épais, JAMAIS de halo */
.cgx-speed b { font: 800 clamp(96px, min(28vw, 15vh), 132px)/.86 var(--cg-num); font-variant-numeric: tabular-nums; letter-spacing: -2px; color: #fff; text-shadow: none; }
.cgx-speed span { font: 700 13px var(--cg-title); color: var(--cg-cyan); letter-spacing: 3px; margin-top: 2px; }
.cgx-speed em { font-style: normal; font: 700 13px var(--cg-title); letter-spacing: 1px; margin-top: 8px; padding: 5px 10px; }
.cgx.s-in .cgx-speed em { border: var(--cg-lw) solid var(--cg-cyan); color: var(--cg-cyan); }
.cgx.s-low .cgx-speed em, .cgx.s-high .cgx-speed em { background: var(--cg-amber); color: #000; }
.cgx.s-none .cgx-speed em { border: 1px solid var(--cg-line-2); color: var(--cg-sec); }
.cgx.s-low .cgx-val, .cgx.s-high .cgx-val { stroke: var(--cg-amber); }
.cgx.s-low .cgx-ptr, .cgx.s-high .cgx-ptr { fill: var(--cg-amber); }

/* animation de démarrage : anneaux qui se déploient + balayage (une seule fois, 1,6 s) */
.cgx.boot .cgx-rings { animation: cgx-deploy 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.cgx.boot .cgx-seg { animation: cgx-segin 1.4s steps(6) both; }
.cgx.boot .cgx-scan { animation: cgx-scan 1.1s .3s ease-in-out both; }
.cgx.boot .cgx-speed { animation: cgx-fade .5s 1s both; }
@keyframes cgx-deploy { from { transform: scale(.35) rotate(-120deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes cgx-segin { from { stroke: var(--cg-cyan); opacity: 0; } 50% { opacity: 1; } }
@keyframes cgx-scan { from { transform: translateY(8px); opacity: .9; } to { transform: translateY(250px); opacity: 0; } }
@keyframes cgx-fade { from { opacity: 0; } to { opacity: 1; } }
/* éclat de l'anneau au changement de bloc */
.cgx-gauge.flash .cgx-seg, .cgx-gauge.flash .cgx-band, .cgx-gauge.flash .cgx-dial { animation: cgx-flash .7s ease-out; }
@keyframes cgx-flash { 0% { stroke: #fff; stroke-width: 12; } 100% { } }
@media (prefers-reduced-motion: reduce) { .cgx.boot *, .cgx-gauge.flash * { animation: none !important; } }

.cgx-count { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.cgx-rem b { display: block; font: 800 72px/.92 var(--cg-num); font-variant-numeric: tabular-nums; letter-spacing: -1px; color: #fff; }
.cgx-next { padding: 6px 10px; min-width: 0; }
.cgx-next b { display: block; font-size: 21px; }
.cgx-next small { display: block; font-size: 16px; color: var(--cg-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cgx-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 8px; border-top: 1px solid var(--cg-line-2); }
.cgx-stats::before { content: ''; position: absolute; left: 0; top: -1px; width: 40px; height: var(--cg-lw); background: var(--cg-cyan); }
.cgx-stats > div { min-width: 0; }
.cgx-stats b { display: block; font-size: 25px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cgx-stats .cg-k { font-size: 10px; letter-spacing: 1px; }
@media (max-width: 380px) { .cgx-stats b { font-size: 21px; } }

.cgx-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cgx-nav, .cgx-relief { position: relative; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cgx-nav canvas, .cgx-relief canvas { width: 100%; height: 64px; display: block; }
.cgx-nav small, .cgx-relief small { font: 700 10px/1.3 var(--cg-title); color: var(--cg-sec); letter-spacing: .5px; }
.cgx-nav.off { --c: var(--cg-red); }
.cgx-nav.off small { color: #fff; }
.cgx-arrow { position: absolute; left: 50%; top: 14px; width: 74px; height: 74px; margin-left: -37px; }
.cgx-arrow svg { width: 100%; height: 100%; fill: var(--cg-red); stroke: #000; stroke-width: 4; }
.cgx-meteo { display: flex; gap: 8px; align-items: baseline; font: 800 17px var(--cg-num); }
.cgx-meteo .cg-k { display: inline; }
.cgx-say { font-size: 16px; min-height: 20px; color: var(--cg-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgx-offer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: var(--cg-lw) solid var(--cg-cyan); padding: 4px 4px 4px 10px; font-size: 16px; font-weight: 800; }
.cgx-offer button { min-height: 44px; padding: 0 10px; background: var(--cg-cyan); color: #000; border: 0; font: 700 11px var(--cg-title); cursor: pointer; }

.cgx-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.cgx-btns button {
  position: relative; overflow: hidden; min-height: 66px; cursor: pointer;
  background-color: #000; color: var(--cg-cyan); border: 1px solid var(--cg-line-2);
  font: 700 13px/1.15 var(--cg-title); letter-spacing: 1px;
}
.cgx-btns button small { font: 600 12px var(--cg-num); letter-spacing: 0; color: var(--cg-sec); }
.cgx-btns button:active { background-color: var(--cg-cyan); color: #000; }
.cgx.is-paused .cgx-btns [data-a=pause] { background-color: var(--cg-cyan); color: #000; }
.cgx-end { --c: var(--cg-red); color: #fff !important; }
.cgx-end span { position: relative; }
.cgx-end i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cg-red); }
.cgx-end.arming i { width: 100%; transition: width 1.5s linear; }

/* ---------- vue carte (bouton CARTE / CADRAN) ---------- */
.cgx-viewbtn { position: absolute; right: -4px; bottom: -6px; min-height: 44px; min-width: 64px; padding: 0 8px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 700 11px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.cgx.is-map .cgx-gauge, .cgx.is-map .cgx-count, .cgx.is-map .cgx-stats { display: none; }
.cgx-mapview { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.cgx-mini { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.cgx-mspd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cgx-mspd b { font: 800 96px/.85 var(--cg-num); font-variant-numeric: tabular-nums; letter-spacing: -2px; color: #fff; }
.cgx-mspd span { display: flex; align-items: center; gap: 8px; }
.cgx-mspd i { font: 700 12px var(--cg-title); font-style: normal; color: var(--cg-cyan); letter-spacing: 2px; }
.cgx-mspd em { font-style: normal; font: 700 10px/1.2 var(--cg-title); padding: 3px 6px; white-space: nowrap; }
.cgx.s-in .cgx-mspd em { border: var(--cg-lw) solid var(--cg-cyan); color: var(--cg-cyan); }
.cgx.s-low .cgx-mspd em, .cgx.s-high .cgx-mspd em { background: var(--cg-amber); color: #000; }
.cgx.s-none .cgx-mspd em { border: 1px solid var(--cg-line-2); color: var(--cg-sec); }
.cgx-mrem { text-align: right; }
.cgx-mrem b { display: block; font: 800 clamp(40px, 13vw, 60px)/.9 var(--cg-num); white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.cgx-bigmap { position: relative; flex: 1; min-height: 240px; padding: 3px; }
.cgx-bigmap canvas { width: 100%; height: 100%; display: block; }
.cgx-mapban { position: absolute; left: 56px; right: 8px; top: 8px; background: #000; border: var(--cg-lw) solid var(--cg-cyan); color: #fff; font: 800 17px/1.15 var(--cg-num); padding: 6px 10px; }
.cgx-mapban.alert { border: 2px solid var(--cg-red); }
.cgx-mapctl { position: absolute; right: 8px; bottom: 26px; display: flex; flex-direction: column; gap: 6px; }
.cgx-mapctl button { min-width: 48px; min-height: 48px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 800 22px var(--cg-num); cursor: pointer; }
.cgx-mapctl .cgx-mv { font: 700 10px var(--cg-title); letter-spacing: .5px; min-height: 44px; }
.cgx-minfo { position: absolute; left: 8px; bottom: 20px; background: #000; color: #fff; font: 800 14px var(--cg-num); padding: 3px 6px; border-left: 2px solid var(--cg-cyan); }
.cgx.is-map .cgx-btns { margin-top: 0; }

/* transition vélo → course : chrono au centre, énorme bouton DÉPART COURSE */
.cgx-transbtn {
  min-height: 104px; margin-top: auto; cursor: pointer;
  background: var(--cg-cyan); color: #000; border: 0;
  font: 900 24px var(--cg-title); letter-spacing: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: var(--cg-glow), inset 0 0 0 4px #000, inset 0 0 0 6px rgba(0, 0, 0, .35);
}
.cgx-transbtn small { font: 800 14px var(--cg-num); letter-spacing: 0; }
.cgx-transbtn:active { background: #fff; }
.cgx.is-trans .cgx-btns { margin-top: 0; }
.cgx.is-trans .cgx-zbox b { color: var(--cg-amber); text-shadow: none; }
.cgx.is-trans .cgx-speed span { color: var(--cg-amber); }
.cgx.is-trans .cgx-speed em { border: var(--cg-lw) solid var(--cg-amber); color: var(--cg-amber); background: none; }
.cgx.is-trans .cgx-band { opacity: 0; }
.cgx-trow td { color: var(--cg-amber); }

/* proposition du mode poche (10 s) */
.cgx-pocketoffer { border: 2px solid var(--cg-cyan); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cgx-pocketoffer b { font: 900 16px var(--cg-title); color: var(--cg-cyan); letter-spacing: 1px; }
.cgx-pocketoffer p { font-size: 15px; }
.cgx-pocketoffer div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cgx-pocketoffer button { min-height: 64px; font: 900 16px var(--cg-title); letter-spacing: 1px; cursor: pointer; background: #000; color: #fff; border: 2px solid #fff; }
.cgx-pocketoffer button[data-a=pkyes] { background: var(--cg-cyan); color: #000; border-color: var(--cg-cyan); }

/* mode poche : tout noir, rien n'est cliquable, appui long de 2 s pour sortir */
.cgx-pocket { position: fixed; inset: 0; z-index: 3000; background: #000; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cgx-pk-hold[hidden] { display: none; }
.cgx-pk-hold { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; display: grid; place-items: center; }
.cgx-pk-hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.cgx-pk-hold circle { fill: none; stroke: var(--cg-cyan); stroke-width: 5; stroke-dasharray: 277; stroke-dashoffset: 277; }
.cgx-pk-hold.go circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear; }
.cgx-pk-hold span { font: 700 12px var(--cg-title); color: #fff; letter-spacing: 1px; }

/* =====================================================================
   Rapport de séance et replay
   ===================================================================== */
.cgx-report, .cgx-replay { gap: 10px; }
.cgx-rtitle { font-size: 12px; }
.cgx-rname { font: 900 20px/1.2 var(--cg-title); color: var(--cg-cyan); text-shadow: var(--cg-glow); letter-spacing: 1px; }
.cgx-saved { font-size: 16px; }
.cgx-saved .cg-link { font-size: 15px; }
.cgx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cgx-kpis > div { padding: 8px 8px 6px; min-width: 0; }
.cgx-kpis b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cgx-kpis .cg-k { font-size: 9px; letter-spacing: .8px; }
@media (max-width: 380px) { .cgx-kpis b { font-size: 20px; } }
.cgx-rmap { width: 100%; height: 220px; display: block; flex: none; }
.cgx-sec { padding: 10px; }
.cgx-tab { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.cgx-tab th { font: 700 9px var(--cg-title); color: var(--cg-cyan); text-align: left; padding: 4px; letter-spacing: .8px; text-transform: uppercase; border-bottom: 1px solid var(--cg-line-2); }
.cgx-tab td { padding: 6px 4px; border-bottom: 1px solid rgba(0, 229, 255, .12); font-weight: 700; white-space: nowrap; }
.cgx-tab .cg-z { min-width: 50px; }
.cgx-tot td { border-top: var(--cg-lw) solid var(--cg-cyan); }
.cgx-wide { width: 55%; }
.cgx-pct { display: inline-block; width: 44px; height: 8px; border: 1px solid var(--cg-line); margin-right: 6px; vertical-align: middle; position: relative; }
.cgx-wide .cgx-pct { width: 100%; }
.cgx-pct i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cg-cyan); }
.cgx-btns-r { margin-top: 4px; }

.cgx-rcv { width: 100%; flex: 1; min-height: 360px; display: block; }
.cgx-scrub { width: 100%; accent-color: var(--cg-cyan); height: 32px; }
.cgx-rctl { display: flex; gap: 6px; align-items: stretch; }
.cgx-rctl > button { min-height: 60px; min-width: 56px; padding: 0 6px; background-color: #000; color: var(--cg-cyan); border: 1px solid var(--cg-line-2); font: 700 15px var(--cg-title); cursor: pointer; }
.cgx-rctl .cg-seg { flex: 1; flex-wrap: nowrap; }
.cgx-rctl .cg-seg button { flex: 1; min-height: 60px; font-size: 14px; }

/* son : test + mode */
.cg-sound { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cg-go .cg-sound .cg-note { text-align: left; color: var(--cg-sec); }