:root {
    --fond:#0f1020; --carte:#191a2e; --bord:rgba(255,255,255,.10);
    --texte:#eceaff; --doux:#a8a6c8; --faible:#6f6d8e;
    --accent:#6c63ff; --accent-clair:#9d97ff; --danger:#e05b5b; --ok:#22c55e;
    /* Le marqueur EN COURS est vert ; celui qui ARRIVE est orange. Le coach lit
       la couleur avant de lire le mot : orange = prépare-toi, vert = annonce.
       (--mm reste la teinte des marqueurs importés de MixMeister.) */
    --marqueur:#22c55e; --suivant:#f59e0b; --mm:#e16c40;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { height:100%; }
  body {
    margin:0; background:var(--fond); color:var(--texte);
    font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    /* Pas de rebond élastique : en salle, un doigt qui glisse ne doit pas
       faire sauter l'écran. */
    overscroll-behavior:none;
  }
  .page { max-width:560px; margin:0 auto; padding:24px 18px 40px; }
  header { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
  header b { font-size:19px; font-weight:700; letter-spacing:.2px; }
  header span { color:var(--faible); font-size:13px; }

  h1 { font-size:20px; margin:0 0 6px; font-weight:650; }
  p.aide { color:var(--doux); margin:0 0 20px; font-size:14px; }

  label { display:block; font-size:13px; color:var(--doux); margin:0 0 6px; }
  input {
    width:100%; padding:14px 16px; font-size:17px; color:var(--texte);
    background:var(--carte); border:1px solid var(--bord); border-radius:10px;
  }
  input:focus { outline:2px solid var(--accent); outline-offset:1px; }
  input.code { letter-spacing:.35em; text-align:center; font-size:22px; }

  button {
    width:100%; margin-top:14px; padding:14px 16px; font-size:16px; font-weight:600;
    color:#fff; background:var(--accent); border:0; border-radius:10px; cursor:pointer;
    min-height:48px;
  }
  button:disabled { opacity:.55; cursor:default; }
  button.discret { background:transparent; color:var(--doux); border:1px solid var(--bord); }

  .msg { margin-top:14px; padding:12px 14px; border-radius:9px; font-size:14px; display:none; }
  .msg.vu { display:block; }
  .msg.err { background:rgba(224,91,91,.12); color:#ffb4b4; border:1px solid rgba(224,91,91,.3); }
  .msg.ok  { background:rgba(34,197,94,.10); color:#9ff0bd; border:1px solid rgba(34,197,94,.28); }

  .compte { display:flex; align-items:center; justify-content:space-between; gap:10px;
            font-size:13px; color:var(--doux); margin-bottom:18px; }
  .compte button { width:auto; margin:0; padding:8px 12px; font-size:13px; min-height:0; }

  .ride {
    display:flex; align-items:center; gap:14px; padding:16px; width:100%; text-align:left;
    background:var(--carte); border:1px solid var(--bord); border-radius:12px; margin:0 0 10px;
    color:var(--texte); font:inherit; min-height:0;
  }
  .ride .nom { font-weight:600; margin-bottom:3px; display:block; }
  .ride .meta { font-size:13px; color:var(--faible); }
  .ride .ens { font-size:12px; font-weight:600; display:block; margin-bottom:2px; }
  /* Un trait de couleur plutôt qu'une icône : il se voit de loin et ne prend
     pas la place du titre sur un téléphone. */
  .ride .pastille { flex-shrink:0; width:5px; align-self:stretch; border-radius:3px; min-height:40px; }
  .ride .ico { font-size:22px; flex-shrink:0; }
  /* L'enseignement, dans le lecteur : même couleur, en petit, près du titre. */
  .ens-lecteur { font-size:12px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap; }
  .vide { text-align:center; color:var(--faible); padding:36px 10px; font-size:14px; }
  .chargement { text-align:center; color:var(--faible); padding:30px; }

  /* ── LE LECTEUR ──────────────────────────────────────────────────────── */
  #ecran-lecteur { padding:14px 16px 24px; max-width:760px; margin:0 auto; }
  .barre-haut { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .barre-haut button { width:auto; margin:0; padding:8px 12px; font-size:13px; min-height:0; }
  .titre-ride { font-size:13px; color:var(--faible); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Le temps RESTANT est le chiffre que l'instructeur cherche du regard :
     c'est lui qui est en grand, comme sur l'écran externe. */
  .restant { text-align:center; margin:6px 0 2px; }
  .restant b { font-size:clamp(52px, 17vw, 96px); font-weight:800; line-height:1; color:var(--accent-clair);
               font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .restant span { display:block; font-size:13px; color:var(--faible); letter-spacing:.14em; text-transform:uppercase; }
  .ecoule { text-align:center; color:var(--doux); font-size:14px; font-variant-numeric:tabular-nums; margin-bottom:12px; }

  .marqueurs { display:flex; gap:10px; margin:0 0 14px; }
  .marq { flex:1; background:var(--carte); border:1px solid var(--bord); border-radius:11px;
          padding:11px 13px; min-width:0; display:flex; align-items:center; gap:11px; }
  .marq > div:last-child { min-width:0; }
  /* Le SIGNE de la technique : c'est lui que l'instructeur reconnaît d'un coup
     d'œil, avant même de lire le libellé. Il s'efface avec le marqueur suivant,
     qui n'est qu'une annonce. */
  .sigle { flex-shrink:0; width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
  .sigle svg { width:52px; height:52px; display:block; }
  /* Le sigle du suivant reste lisible — c'est lui qu'on reconnaît de loin —
     mais plus petit que celui en cours. */
  .marq.suivant .sigle { opacity:.8; width:42px; height:42px; }
  .marq.suivant .sigle svg { width:42px; height:42px; }
  .marq .quand { font-size:12px; color:var(--faible); font-variant-numeric:tabular-nums; }
  /* Le libellé peut tenir sur DEUX lignes plutôt que d'être coupé : « Seated
     Flat » tronqué en « Seated … » ne dit plus quelle technique annoncer. */
  .marq .quoi { font-weight:650; font-size:16px; line-height:1.2; overflow:hidden;
                display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  /* Le suivant s'annonce en orange, et reste un peu plus discret que celui en
     cours : c'est une préparation, pas une consigne. */
  .marq.suivant { border-color:rgba(245,158,11,.30); }
  .marq.suivant .quoi { color:var(--suivant); font-weight:600; }
  .marq.suivant .quand { color:rgba(245,158,11,.75); }

  .piste { background:var(--carte); border:1px solid var(--bord); border-radius:13px; padding:14px; margin-bottom:12px; }
  .piste .rang { font-size:12px; color:var(--faible); letter-spacing:.1em; text-transform:uppercase; }
  .piste .nom { font-size:clamp(19px, 5.2vw, 26px); font-weight:700; line-height:1.2; margin:3px 0 8px; }
  .piste .bas { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .bpm { background:rgba(108,99,255,.18); color:var(--accent-clair); border-radius:8px;
         padding:5px 11px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
  canvas { display:block; width:100%; height:64px; margin-top:10px; border-radius:7px; }

  .suivant-piste { display:flex; align-items:center; justify-content:space-between; gap:12px;
                   font-size:14px; color:var(--doux); padding:0 4px 14px; }
  .suivant-piste .etq { color:var(--faible); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
  .suivant-piste .nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

  .prog { height:8px; background:rgba(255,255,255,.08); border-radius:5px; overflow:hidden; margin-bottom:16px; cursor:pointer; }
  .prog i { display:block; height:100%; background:var(--accent); width:0; }

  .transport { display:flex; gap:12px; align-items:center; }
  .transport button { margin:0; min-height:62px; font-size:22px; }
  .transport .principal { flex:2; }
  .transport .cote { flex:1; }

/* ── Remplacements des attributs `style=` en ligne ──────────────────────────
   La page n'en contient plus aucun : la politique de sécurité peut donc
   interdire tout style en ligne (`style-src 'self'`), ce qui ferme une des
   portes classiques de l'injection sur une page qui détient une session. */
.bandeau-ride { display:flex; align-items:center; gap:9px; min-width:0; }
.zone-piste { color:var(--faible); font-size:13px; }
.bpm.petit { font-size:13px; }