/*
  Garmin Global — refonte « application » (handoff design_handoff_refonte_app).

  Un seul thème, sombre : le design n'a pas décliné de variante claire, et
  l'application vit dans une pièce d'entraînement. La bascule responsive tient
  en UN breakpoint (880 px) : au-dessus, rail latéral fixe ; en dessous,
  en-tête collant + barre d'onglets basse. Tout le reste est fluide, en
  grilles auto-fit — pas d'autres media queries de mise en page.

  Les classes g-*, carte-*, coureur-*, jauge-*, anneau-* sont le contrat des
  modules de dessin (graphique.js, parcours.js, app.js) : elles changent de
  peau ici, jamais de nom.
*/

/* ================================================================ tokens */

:root {
  --fond: #0d1022;
  --fond-rail: #101430;
  --fond-carte: #171b33;
  --fond-encart: #121631;
  --fond-actif: #26305f;
  --fond-jauge: #232849;

  --bord: #262c4d;
  --bord-fort: #303764;
  --bord-accent: #3b4383;
  --halo: #3d8bff33;

  --texte: #eef0ff;
  --texte-doux: #9aa3c7;
  --texte-actif: #8fb7ff;
  --lien: #5ea0ff;

  --accent: #3d8bff;
  --violet: #7c5cff;
  --violet-forme: #a78bfa;
  --degrade: linear-gradient(135deg, #3d8bff, #7c5cff);
  --degrade-barre: linear-gradient(90deg, #3d8bff, #7c5cff);

  --ok: #4ade80;
  --ok-pastille: #35c77f;
  --danger: #f85149;
  --alerte: #d29922;
  --trace: #ff8a3d;
  --record-fond: #ffd166;
  --record-texte: #3a2a00;

  --zone-1: #6e7681;
  --zone-2: #3fb950;
  --zone-3: #d29922;
  --zone-4: #f0883e;
  --zone-5: #f85149;
}

/* ================================================================ base */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Outfit", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--lien); }
a:hover { color: var(--texte-actif); }
::selection { background: #7c5cff44; }

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* Les classes posent souvent un display explicite (flex, grid) qui, sans ce
   garde-fou, écraserait l'attribut hidden — et des cartes « cachées »
   resteraient à l'écran. */
[hidden] { display: none !important; }

body.fige { overflow: hidden; }

/* ================================================================ coquille */

.coquille { min-height: 100vh; display: flex; }
.colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.vue {
  flex: 1; width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 26px 30px 40px;
}

/* -- rail latéral (≥ 880 px) -- */

.rail {
  width: 216px; flex: 0 0 216px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 12px;
  border-right: 1px solid var(--bord); background: var(--fond-rail);
}

.rail-logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; }
.logo-pastille {
  width: 34px; height: 34px; border-radius: 10px; background: var(--degrade);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: #fff;
}
.logo-pastille svg { width: 20px; height: 20px; }
.rail-titre { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.rail-sous-titre { font-size: 11px; color: var(--texte-doux); }

.rail .onglet {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-radius: 12px;
  color: var(--texte-doux); padding: 12px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
}
.rail .onglet.actif { background: var(--fond-actif); color: var(--texte-actif); }
.rail .onglet svg { width: 20px; height: 20px; flex: 0 0 auto; }

.rail-ressort { flex: 1; }

.rail-etat {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border-radius: 12px; background: var(--fond-carte); border: 1px solid var(--bord);
}
.rail-etat-ligne {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--texte-doux); background: none; border: none; padding: 2px 0;
  cursor: pointer; text-align: left;
}
.rail-etat-ligne[data-voyant="serveur"] { cursor: default; }

/* « il y a 20 min » sous le nom : le rail est étroit, la date passe à la ligne
   plutôt que de pousser le voyant hors du panneau. */
.rail-etat-ligne .rail-etat-texte { display: flex; flex-direction: column; line-height: 1.3; }
.rail-etat-ligne .rail-etat-texte small { font-size: 10.5px; opacity: 0.75; }
.rail-etat-ligne:disabled { cursor: progress; }

.point-etat {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  flex: 0 0 auto; transition: background 0.3s;
}
.ok > .point-etat { background: var(--ok-pastille); }
.attente > .point-etat { background: var(--alerte); animation: pulser 1.1s ease-in-out infinite; }

@keyframes pulser { 50% { opacity: 0.35; } }

/* -- en-tête mobile (< 880 px) -- */

.entete-mobile {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--bord); background: rgba(13, 16, 34, 0.92);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 30;
}
.entete-mobile-gauche { display: flex; align-items: center; gap: 9px; min-width: 0; }
.entete-mobile-gauche .logo-pastille { width: 28px; height: 28px; border-radius: 8px; }
.entete-mobile-gauche .logo-pastille svg { width: 17px; height: 17px; }
.entete-titre {
  font-weight: 700; font-size: 15.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entete-mobile-droite { display: flex; align-items: center; gap: 7px; }

.pilule-voyant {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--texte-doux); background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: 999px; padding: 5px 9px;
  cursor: pointer;
}
.pilule-voyant .point-etat { width: 7px; height: 7px; }
.pilule-voyant:disabled { opacity: 0.7; }
#voyant-serveur { cursor: default; }

/* CINQ voyants plus le bouton Réglages depuis que Zwift a le sien : sur un
   téléphone étroit, la rangée déborderait et pousserait le titre de l'écran
   hors de vue. Sous 520 px — le seuil monte avec le cinquième — les pilules
   tombent à la pastille seule : la couleur est ce qu'on lit en passant, le nom
   est dans l'infobulle et dans le rail. */
@media (max-width: 520px) {
  .entete-mobile-droite { gap: 5px; }
  /* Le nom disparaît, pas la cible : 34 px de côté, parce qu'on vise ça
     debout sur un tapis en mouvement. Réduire le bouton à la taille de sa
     pastille donnait 22 px, soit un raté sur deux. */
  .pilule-voyant {
    font-size: 0; gap: 0; padding: 0;
    min-width: 34px; min-height: 34px; justify-content: center;
  }
  .pilule-voyant .point-etat { width: 9px; height: 9px; }
}

/* Et sous 390 px, cinq cibles de 34 px ne tiennent plus à côté du titre :
   34 x 5 + 4 gaps + le bouton Réglages dépasse la largeur d'un téléphone
   étroit. On resserre plutôt que de laisser le titre disparaître. */
@media (max-width: 390px) {
  .entete-mobile-droite { gap: 3px; }
  .pilule-voyant { min-width: 30px; min-height: 30px; }
}

.bouton-rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: 999px; color: var(--texte-doux);
  cursor: pointer; padding: 0;
}
.bouton-rond svg { width: 17px; height: 17px; }

/* -- barre d'onglets basse (< 880 px) -- */

.barre-onglets {
  display: none; position: sticky; bottom: 0; z-index: 30;
  justify-content: space-around; gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bord); background: rgba(13, 16, 34, 0.94);
  backdrop-filter: blur(12px);
}
.barre-onglets .onglet {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--texte-doux);
  padding: 6px 10px; cursor: pointer; min-width: 56px; min-height: 48px;
}
.barre-onglets .onglet.actif { color: var(--texte-actif); }
.barre-onglets .onglet svg { width: 22px; height: 22px; }
.barre-onglets .onglet span { font-size: 10.5px; font-weight: 600; }

/* Pendant une séance, la navigation ne mène nulle part : la vue séance
   occupe tout. On la gèle plutôt que de la cacher, pour ne pas faire
   « sauter » la coquille. */
body.en-seance .onglet { pointer-events: none; opacity: 0.4; }

@media (max-width: 880px) {
  .rail { display: none; }
  .entete-mobile { display: flex; }
  .barre-onglets { display: flex; }
  .vue { padding: 18px 16px 28px; }
}

/* ================================================================ écrans */

.panneau { display: none; }
.panneau.actif { display: block; }

.entete-ecran {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.titre-ecran { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.sous-titre-ecran { color: var(--texte-doux); font-size: 14px; margin-top: 2px; }

.libelle-section {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-doux);
}

.lien-texte {
  background: none; border: none; color: var(--lien); font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 6px;
}
.lien-texte:hover { color: var(--texte-actif); }

/* ================================================================ cartes */

.carte {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 18px; padding: 20px; margin-bottom: 14px;
}
.carte h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.carte-bloc { position: static; overflow: visible; }

.entete-section {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.entete-section h2 { margin-bottom: 0; }

.encart {
  background: var(--fond-encart); border: 1px solid var(--bord);
  border-radius: 14px; padding: 12px 10px 6px;
}

.aide { color: var(--texte-doux); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.aide code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* Navigation entre les propositions du coach, dans l'en-tête de la modale. */
.nav-proposition { display: flex; align-items: center; gap: 8px; }
.nav-proposition .bouton-rond {
  width: 32px; height: 32px; font-size: 19px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-proposition .bouton-rond:disabled { opacity: 0.35; cursor: default; }
.nav-proposition .libelle-section { min-width: 46px; text-align: center; }

/* Ouvrir sur la tablette : QR code + adresse. */
.reseau-partage { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.reseau-details { flex: 1 1 200px; min-width: 0; }

/* Plaque blanche assumée, dans une interface sombre : un QR clair sur fond
   foncé n'est pas décodé par une bonne partie des lecteurs, et la marge fait
   partie du symbole. C'est le seul endroit de l'interface qui échappe au
   thème, parce qu'ici la lisibilité par une caméra prime sur l'harmonie. */
.reseau-qr {
  background: #fff; border-radius: 12px; padding: 8px; line-height: 0;
  flex: 0 0 auto;
}
.reseau-qr svg { display: block; width: 152px; height: 152px; }

.reseau-adresse {
  display: inline-block; font-family: ui-monospace, Consolas, monospace;
  font-size: 15px; font-weight: 600; word-break: break-all;
}
.reseau-partage.absent .reseau-qr { display: none; }

@media (max-width: 420px) {
  .reseau-qr svg { width: 128px; height: 128px; }
}

.repli { margin-top: 12px; }
.repli > summary {
  cursor: pointer; color: var(--texte-doux); font-size: 13px; font-weight: 600;
  user-select: none;
}
.repli > summary:hover { color: var(--texte); }

/* ================================================================ boutons */

.bouton {
  background: var(--fond-carte); border: 1px solid var(--bord-fort);
  border-radius: 12px; color: var(--texte); padding: 12px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px;
  font-variant-numeric: tabular-nums;
}
.bouton:hover { filter: brightness(1.15); }
.bouton:disabled { opacity: 0.5; cursor: default; filter: none; }

.bouton.primaire {
  background: var(--degrade); border: none; color: #fff; font-weight: 700;
  padding: 12px 22px; font-size: 14.5px; min-height: 46px;
}
.bouton.discret {
  background: var(--fond-encart); font-size: 13.5px; padding: 11px 15px;
  border-radius: 11px;
}
.bouton.pointille {
  background: none; border: 1px dashed var(--bord-fort); color: var(--texte-doux);
  border-radius: 12px; padding: 12px; font-size: 13px;
}
.bouton.danger { background: var(--danger); border: none; color: #fff; font-weight: 700; }
.bouton.grand { flex: 1; padding: 16px; font-size: clamp(16px, 3vw, 20px);
  font-weight: 700; min-height: 60px; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.bouton.petit { padding: 8px 12px; font-size: 12.5px; min-height: 36px; border-radius: 10px; }
.bouton.minuscule { padding: 4px 9px; font-size: 11.5px; min-height: 0; border-radius: 8px; }
.bouton.pleine-largeur { width: 100%; padding: 14px; font-size: 16px; min-height: 52px; }

.rangee-boutons { display: flex; gap: 9px; flex-wrap: wrap; }

/* Chenillard des commandes longues : le bouton dit qu'il travaille. */
.bouton.occupe { position: relative; color: transparent; pointer-events: none; }
.bouton.occupe::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 25%, #ffffff2e 50%, transparent 75%);
  background-size: 200% 100%; animation: chenillard 1.1s linear infinite;
}
@keyframes chenillard { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ================================================================ pilules, badges */

.badge {
  background: var(--fond-encart); border: 1px solid var(--bord);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--texte-doux);
  white-space: nowrap;
}
.badge:empty { display: none; }

.badge-type {
  border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.badge-type.badge-libre { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge-type.badge-programme { background: color-mix(in srgb, var(--alerte) 14%, transparent); color: var(--alerte); }

.badge-record {
  background: var(--record-fond); color: var(--record-texte); border-radius: 999px;
  padding: 1.5px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  white-space: nowrap;
}

.etiquette-reco {
  background: var(--record-fond); color: var(--record-texte); border-radius: 999px;
  padding: 2.5px 9px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}

.puce-garmin {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 10px;
  white-space: nowrap;
}
.puce-garmin.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.puce-garmin.ko { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }

.puce-etat {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--texte-doux); background: var(--fond-encart);
  border: 1px solid var(--bord-accent); border-radius: 999px; padding: 6px 12px;
}
.puce-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-pastille); }
.puce-etat.ko::before { background: var(--danger); }

/* ================================================================ formulaires */

.grille-champs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; align-items: end; margin-bottom: 12px;
}
.grille-champs label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--texte-doux);
}
.grille-champs small { font-size: 11px; color: var(--texte-doux); }
.grille-champs select { width: 100%; }

input[type="number"], input[type="text"], input[type="search"], select {
  background: var(--fond-encart); border: 1px solid var(--bord-fort);
  border-radius: 11px; padding: 11px 12px; color: var(--texte);
  font-size: 16px; font-variant-numeric: tabular-nums; width: 100%;
  min-height: 44px;
}
select { font-size: 14px; width: auto; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
#adresse-capteurs, #adresse-tapis { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }

.case {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 13.5px; color: var(--texte-doux); cursor: pointer;
}
.case input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--accent); flex: 0 0 auto; min-height: 0; }

/* ================================================================ accueil */

.grille-heros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.grille-heros .carte { margin-bottom: 0; display: flex; flex-direction: column; gap: 14px; }
.grille-heros .carte-jour { gap: 12px; }

.carte-jour {
  background: linear-gradient(150deg, #2a2560, var(--fond-carte) 60%);
  border-color: #4b3f96;
}
.carte-jour .libelle-section { color: var(--texte-actif); }
.carte-jour-nom { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.carte-jour-meta { color: var(--texte-doux); font-size: 13.5px; margin-top: 4px; }
.carte-jour .rangee-boutons { margin-top: auto; }
.carte-jour .bouton.primaire { flex: 1; padding: 13px 18px; font-size: 15px; min-height: 48px; }

.mini-profil { width: 100%; height: auto; display: block; }

.forme-ligne { display: flex; align-items: center; gap: 18px; }
.anneau-forme { position: relative; width: 104px; flex: 0 0 auto; }
.anneau-forme svg { width: 100%; display: block; }
.anneau-forme-fond { fill: none; stroke: var(--fond-jauge); stroke-width: 9; }
.anneau-forme-arc {
  fill: none; stroke: var(--forme-couleur, var(--violet-forme)); stroke-width: 9;
  stroke-linecap: round; transition: stroke-dashoffset 0.7s ease;
}
.anneau-forme-centre {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.anneau-forme-centre b {
  font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em; line-height: 1;
}
.anneau-forme-centre small { font-size: 11px; color: var(--texte-doux); }

.forme-niveau { font-size: 19px; font-weight: 700; color: var(--ok); text-transform: capitalize; }
.forme-conseil { color: var(--texte-doux); font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.forme-conseil b { color: var(--texte); }

.sparkline-titre { font-size: 11px; color: var(--texte-doux); margin-bottom: 4px; }
.sparkline { width: 100%; height: auto; display: block; }
.sparkline-aire { fill: color-mix(in srgb, var(--violet-forme) 15%, transparent); }
.sparkline-ligne {
  fill: none; stroke: var(--violet-forme); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.sparkline-ligne.bleue { stroke: var(--accent); }
.sparkline-ligne.orange { stroke: var(--zone-4); }

.tuiles-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.tuile-stat {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 14px; padding: 14px 16px;
}
.tuile-stat-etiquette {
  font-size: 11px; color: var(--texte-doux); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tuile-stat-valeur {
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; margin-top: 3px;
}
.tuile-stat-delta { font-size: 11.5px; color: var(--ok); margin-top: 1px; }
.tuile-stat-delta.negatif { color: var(--texte-doux); }

.grille-deux {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.grille-deux .carte { margin-bottom: 0; padding: 18px 20px; }

/* -- lignes-boutons à minicarte (accueil, activités Garmin) -- */

.lignes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.ligne-carte {
  display: block; background: var(--fond-encart); border: 1px solid var(--bord);
  border-radius: 12px; padding: 11px 13px; cursor: pointer; color: inherit;
  font: inherit; text-align: left; width: 100%; transition: border-color 0.2s;
}
.ligne-carte.deplie, .ligne-carte:hover { border-color: var(--bord-accent); }
.ligne-carte.inerte { cursor: default; }
.ligne-carte.inerte:hover { border-color: var(--bord); }

.ligne-corps { display: flex; align-items: center; gap: 12px; }
.vignette-mini {
  display: block; flex: 0 0 76px; border: 1px solid var(--bord);
  border-radius: 8px; overflow: hidden;
}
.vignette-grande {
  display: block; border: 1px solid var(--bord); border-radius: 10px;
  overflow: hidden; margin-bottom: 9px;
}
.ligne-texte { flex: 1; min-width: 0; }
.ligne-nom {
  display: block; font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ligne-meta { display: block; color: var(--texte-doux); font-size: 12px; margin-top: 1px; }
.ligne-valeur { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; white-space: nowrap; }
.ligne-valeur.douce { color: var(--texte-doux); font-weight: 400; font-size: 12px; }

/* -- minicartes OSM -- */

.minicarte { width: 100%; display: block; background: var(--fond-encart); }
.minicarte-tuile { filter: brightness(0.62) saturate(0.75) contrast(1.05); }
.minicarte-ombre {
  fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 7;
  stroke-linejoin: round; stroke-linecap: round;
}
.minicarte-ligne {
  fill: none; stroke: var(--trace); stroke-width: 4;
  stroke-linejoin: round; stroke-linecap: round;
}
.minicarte-depart { fill: var(--texte); stroke: var(--fond); stroke-width: 2.5; }
.minicarte-credit { fill: #cbd4df; font-size: 13px; text-anchor: end; opacity: 0.8; }
.minicarte-attente { display: block; background: var(--fond-encart); border-radius: 10px; }

/* -- panneau déplié (survol, ou premier appui au doigt) -- */

.panneau-survol {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--bord);
}
.panneau-survol .libelle-panneau {
  display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-doux); margin-bottom: 5px;
}
.panneau-survol .encart-profil + .libelle-panneau { margin-top: 9px; }
.encart-profil {
  display: block; background: var(--fond-encart); border: 1px solid var(--bord);
  border-radius: 9px; padding: 3px 0;
}
.profil-mini { width: 100%; height: 58px; display: block; }
.profil-mini-aire { fill: color-mix(in srgb, var(--trace) 13%, transparent); }
.profil-mini-ligne { fill: none; stroke: var(--trace); stroke-width: 1.6; stroke-linejoin: round; }
.profil-mini-borne { fill: var(--texte-doux); font-size: 10px; }

.ligne-entrainement {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 3px 0; font-variant-numeric: tabular-nums;
}
.ligne-entrainement .quand { color: var(--texte-doux); flex: 0 0 76px; }
.ligne-entrainement .temps { font-weight: 700; }
.ligne-entrainement .detail {
  color: var(--texte-doux); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jamais-couru { color: var(--texte-doux); font-size: 12.5px; }

/* ================================================================ coach */

.forme-entete { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.forme-texte { flex: 1; min-width: 220px; }
.resume { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; }
.resume div { font-size: 12px; color: var(--texte-doux); }
.resume b {
  display: block; font-size: 17px; color: var(--texte);
  font-variant-numeric: tabular-nums; font-weight: 700;
}

.raisons { list-style: none; display: grid; gap: 5px; margin: 0 0 14px; }
.raisons li { font-size: 13px; color: var(--texte-doux); padding-left: 14px; position: relative; }
.raisons li::before { content: "·"; position: absolute; left: 3px; }
.raisons li.alerte { color: var(--alerte); }
.raisons li.alerte::before { content: "⚠"; font-size: 11px; }

.liste { display: grid; gap: 8px; }
#propositions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 14px;
}
.item-proposition {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 16px; padding: 16px 18px; transition: border-color 0.2s;
}
.item-proposition:hover, .item-proposition.deplie { border-color: var(--bord-accent); outline: 1px solid var(--halo); }
.item-proposition.recommande { border-color: var(--bord-accent); }
.item-proposition.echec { opacity: 0.6; }
.item-proposition .objectif {
  font-size: 11px; color: var(--texte-doux); text-transform: uppercase;
  letter-spacing: 0.05em; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.item-proposition .titre { font-weight: 700; font-size: 15.5px; margin-top: 5px; }
.item-proposition .meta { color: var(--texte-doux); font-size: 12.5px; margin-top: 2px; }
.actions-proposition { display: flex; gap: 7px; margin-top: 12px; }
.actions-proposition .bouton {
  flex: 1; background: var(--fond-encart); border-radius: 10px;
  padding: 9px; font-size: 13px; min-height: 40px;
}
.actions-proposition .bouton.envoyer {
  flex: 1.4; background: var(--fond-actif); border-color: var(--bord-accent);
  color: var(--texte-actif);
}

.lignes-blocs { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.ligne-bloc-mini {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ligne-bloc-mini .libelle { flex: 1; font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-bloc-mini .duree { color: var(--texte-doux); }
.ligne-bloc-mini .cible { color: var(--texte-doux); flex: 0 0 92px; text-align: right; }

/* ================================================================ séances */

.segmente {
  display: inline-flex; background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 16px;
}
.segmente button {
  background: transparent; border: none; border-radius: 9px;
  color: var(--texte-doux); padding: 9px 18px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; min-height: 40px;
}
.segmente button.actif { background: var(--fond-actif); color: var(--texte-actif); }

.sous-panneau { display: none; }
.sous-panneau.actif { display: block; }

.grille-seances {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.grille-seances > .carte { margin-bottom: 0; align-self: start; }

.item-seance {
  display: flex; align-items: center; gap: 10px;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 14px; padding: 14px 16px; cursor: pointer; color: inherit;
  font: inherit; width: 100%; text-align: left; transition: border-color 0.2s;
}
.item-seance:hover { border-color: var(--bord-accent); }
.item-seance.actif { background: var(--fond-actif); border-color: var(--bord-accent); }
.item-seance .corps { flex: 1; min-width: 0; }
.item-seance .titre { font-weight: 600; font-size: 14.5px; display: block; }
.item-seance .meta { color: var(--texte-doux); font-size: 12px; margin-top: 2px; display: block; }
.item-seance::after {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="%239aa3c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.blocs { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bloc-ligne {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px;
  align-items: center; padding: 10px 13px; background: var(--fond-encart);
  border-radius: 11px; border-left: 3px solid var(--zone-couleur, var(--bord-fort));
}
.bloc-ligne .numero { color: var(--texte-doux); font-size: 12px; font-variant-numeric: tabular-nums; }
.bloc-ligne .nom { font-size: 13.5px; font-weight: 600; }
.bloc-ligne .sous { color: var(--texte-doux); font-size: 11.5px; margin-top: 1px; }
.bloc-ligne .droite { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }

.zones { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.zone-puce {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 13px; border-radius: 11px; background: var(--fond-encart);
  border: 1px solid var(--bord); border-left: 3px solid var(--zone-couleur, var(--bord-fort));
  flex: 1 1 105px; color: var(--texte); min-height: 44px;
}
.zone-puce b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.zone-puce span { color: var(--texte-doux); font-size: 11.5px; }
.zone-puce.cliquable { cursor: pointer; }
.zone-puce.cliquable:hover { border-color: var(--bord-accent); }

/* ================================================================ parcours */

.filtres { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtres input[type="search"] {
  flex: 1 1 200px; min-width: 0; background: var(--fond-carte); font-size: 14px;
}
.filtres select {
  background: var(--fond-carte); font-size: 13.5px;
  /* Ils peuvent rétrécir et se serrer à plusieurs par ligne : sur un
     téléphone, la rangée faisait 285 px de haut et repoussait les parcours
     sous la ligne de flottaison. */
  flex: 1 1 auto; min-width: 0; max-width: 100%;
}
.filtres .aide { margin: 0; flex-basis: 100%; }

/* Le sens du tri : une flèche, large de la même hauteur que les selects pour
   que la rangée ne se dandine pas quand elle change de glyphe. */
.bouton-sens {
  min-width: 34px; padding-left: 0; padding-right: 0;
  font-variant-numeric: tabular-nums; line-height: 1;
}

.grille-parcours {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.carte-parcours {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 16px; padding: 14px; cursor: pointer; color: inherit;
  font: inherit; text-align: left; width: 100%; transition: border-color 0.2s;
}
.carte-parcours:hover, .carte-parcours.actif, .carte-parcours.deplie {
  border-color: var(--bord-accent); outline: 1px solid var(--halo);
}
.carte-parcours .cadre-mini {
  display: block; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden;
}
.carte-parcours .nom {
  display: block; font-weight: 700; font-size: 14.5px; margin-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carte-parcours .ligne-meta {
  display: flex; justify-content: space-between; gap: 8px;
  color: var(--texte-doux); font-size: 12px; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* Seconde ligne de méta : ce que le parcours raconte de mes sorties. Plus
   discrète que la première, qui porte les chiffres du terrain. */
.carte-parcours .ligne-meta + .ligne-meta {
  margin-top: 2px; font-size: 11.5px; opacity: 0.78;
}
.carte-parcours .erreur { color: var(--danger); font-size: 12px; }

.parcours-double {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.grille-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.adversaires { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.adversaire {
  display: flex; align-items: center; gap: 10px; background: var(--fond-encart);
  border: 1px solid var(--bord); border-radius: 12px; padding: 11px 13px;
  font-size: 13.5px; cursor: pointer; margin: 0;
}
.adversaire:has(input:checked) { border-color: var(--bord-accent); }
.adversaire.inactif { opacity: 0.55; }
.adversaire .vitesse { width: 4.4rem; text-align: center; min-height: 36px; padding: 6px; }
.adversaire .allure-equiv { color: var(--texte-doux); font-size: 12px; font-variant-numeric: tabular-nums; }
.adversaire .retirer { margin-left: auto; }
.puce-coureur {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: var(--coureur, #f778ba);
}

/* ================================================================ historique */

.lignes-histo { display: flex; flex-direction: column; gap: 8px; }
.ligne-histo {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px;
  align-items: center; background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 14px; padding: 13px 15px; cursor: pointer; color: inherit;
  font: inherit; text-align: left; width: 100%; transition: border-color 0.2s;
}
.ligne-histo:hover { border-color: var(--bord-accent); }
.ligne-histo .corps { min-width: 0; }
.ligne-histo .nom {
  display: block; font-weight: 600; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ligne-histo .meta {
  display: block; color: var(--texte-doux); font-size: 12px; margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.ligne-histo .duree { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }

@media (max-width: 520px) {
  .ligne-histo { grid-template-columns: 1fr auto auto; }
  .ligne-histo .badge-type { display: none; }
}

.stats-graphiques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px; margin: 12px 0 14px;
}
.titre-bloc {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-doux); margin-bottom: 6px;
}
.g-stat-barre { fill: #26315e; stroke: #3d8bff55; }
.g-stat-barre.courante { fill: var(--accent); stroke: none; }
.g-stat-barre-val { fill: var(--texte-doux); font-size: 12px; text-anchor: middle; font-family: inherit; }

/* ================================================================ tableaux restants */

.tableau-cadre { overflow-x: auto; margin: 6px 0; border-radius: 12px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th, .tableau td { padding: 9px 10px; text-align: left; white-space: nowrap; }
.tableau thead th {
  position: sticky; top: 0; background: var(--fond-carte); z-index: 1;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texte-doux);
}
.tableau th[data-tri] { cursor: pointer; user-select: none; }
.tableau th[data-tri]:hover { color: var(--texte); }
.tableau th[data-tri]::after { content: " ↕"; opacity: 0.25; }
.tableau th.tri-asc::after { content: " ↑"; opacity: 1; }
.tableau th.tri-desc::after { content: " ↓"; opacity: 1; }
.tableau tbody tr { border-top: 1px solid var(--bord); }
.tableau tbody tr[tabindex] { cursor: pointer; }
.tableau tbody tr:hover { background: var(--fond-encart); }
.tableau tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tableau tbody tr.actif { background: var(--fond-actif); }
.tableau tbody tr.record td { color: var(--record-fond); }
.tableau td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau td.nom { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.tableau td.actions { text-align: right; }

/* Passages tous les 500 m, dans le détail de l'historique. */
.tableau-passages td { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-passages th { text-align: right; }
.tableau-passages td:first-child, .tableau-passages th:first-child { text-align: left; }
.tableau-passages tr.partiel td { color: var(--texte-doux); }

/* Notes de séance : bilan de tour et détail de l'historique. */
.bloc-notes { margin-top: 14px; display: grid; gap: 8px; }
.zone-notes {
  width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical;
  background: var(--fond-encart); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 10px;
  padding: 10px 12px; font-size: 15px; line-height: 1.4;
}
.zone-notes:focus { outline: none; border-color: var(--bord-accent); }
.bloc-notes .bouton { justify-self: start; }
.tableau td.actions .bouton { margin-left: 4px; }

/* ================================================================ vue séance */

#vue-seance { display: flex; flex-direction: column; gap: 14px; }
#vue-seance[hidden] { display: none; }

.bandeau-reel {
  background: color-mix(in srgb, var(--danger) 16%, var(--fond-carte));
  border: 1px solid var(--danger); border-radius: 12px; padding: 8px 14px;
  text-align: center; font-size: 13px; font-weight: 600;
}

/* Le bandeau du pilotage Zwift. Il cohabite avec celui du mode réel : deux
   bandeaux rouges empilés ne se distinguent plus l'un de l'autre, et celui-ci
   dit une chose différente — où est la coupure physique. */
/* Le seuil lactique : un trait, pas une bande. Une bande de plus dans un
   graphique qui en porte déjà — les fourchettes des blocs — se confondrait
   avec elles ; le trait dit « frontière », ce qu'il est. */
.g-seuil {
  stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 6 4;
  opacity: 0.8;
}
.g-seuil-texte { fill: var(--danger); font-size: 10.5px; opacity: 0.9; }

.bandeau-zwift {
  background: color-mix(in srgb, var(--accent) 16%, var(--fond-carte));
  border-color: var(--accent);
}

/* Compteurs ouvrables et tiroir de commandes.

   Quatre accordéons empilés occupaient l'écran en permanence pour des réglages
   qu'on ne touche que par moments — et sur un téléphone posé sur le tapis,
   chaque centimètre pris aux chiffres est un chiffre qu'on ne lit plus. Les
   commandes vivent donc dans UN tiroir, ouvert depuis le compteur auquel elles
   se rapportent, une seule à la fois. */
.ouvrable { cursor: pointer; position: relative; }
.ouvrable::after {
  content: "⌃"; position: absolute; top: 6px; right: 8px;
  font-size: 11px; color: var(--texte-doux); opacity: 0.55;
  transform: rotate(180deg);
}
.ouvrable:hover { border-color: var(--bord-accent); }
.ouvrable.ouvert { border-color: var(--accent); }
.ouvrable.ouvert::after { transform: none; opacity: 1; color: var(--accent); }
.ouvrable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Le panneau de commande, DANS le compteur. Il pousse le compteur vers le bas
   au lieu d'ouvrir un tiroir ailleurs : le réglage reste sous le chiffre qu'il
   règle, et l'œil n'a pas à faire l'aller-retour. */
.commande-integree {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--bord);
  width: 100%; cursor: default;
}
.commande-integree .console-corps { padding: 0; }
.commande-integree .console-groupe { margin-bottom: 8px; }
.commande-integree .console-rangee { justify-content: center; }

/* Le compteur « Dans les pas » : le pourcentage domine, parce que c'est ce
   qu'on pilote. En veille il s'éteint, sans disparaître — le faire disparaître
   rendrait le lièvre irrécupérable en pleine séance. */
#cadran-lievre.veille { opacity: 0.6; }
#cadran-lievre.veille .cadran-valeur { font-size: 22px; }

.bandeau-bloc { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bandeau-bloc #s-bloc-position { color: var(--texte-doux); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bloc-titre { font-size: clamp(20px, 4vw, 28px); font-weight: 800; letter-spacing: -0.02em; }

.scene { display: grid; grid-template-columns: 1fr; gap: 12px; }

.cadrans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: stretch;
}
@media (max-width: 620px) {
  .cadrans { grid-template-columns: 1fr 1fr; }
  #cadran { grid-column: 1 / -1; }
  /* Séance libre : pas d'anneau de progression — le cadran vitesse prend
     toute la rangée plutôt que de laisser une case vide à sa droite. */
  .cadrans:has(#cadran-progression[hidden]) .cadran:not(#cadran) { grid-column: 1 / -1; }
}

.cadran {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 22px; padding: clamp(14px, 2.5vw, 22px) 14px;
  text-align: center; display: flex; flex-direction: column;
  justify-content: center; position: relative;
  transition: border-color 0.4s, background 0.4s;
}
#cadran { border-color: var(--bord-accent); }
/* Où en est le cœur, lisible du fond de la pièce : VERT dedans, BLEU en
   dessous, ORANGE au-dessus — des fonds francs, pas des nuances. */
.cadran.dedans { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 26%, var(--fond-carte)); }
.cadran.dessous { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--fond-carte)); }
.cadran.dessus { border-color: var(--zone-4); background: color-mix(in srgb, var(--zone-4) 28%, var(--fond-carte)); }
.cadran.dessous .cadran-cible { color: var(--accent); }
.cadran.dessus .cadran-cible { color: var(--zone-4); }

.jauge-fc { width: min(82%, 300px); margin: 0 auto; }
/* PAS d'overflow visible : le viewBox 200×115 coupe les pieds des arcs, c'est
   lui qui fait le demi-cadran. */
.jauge-svg { width: 100%; height: auto; display: block; }
.jauge-fond { fill: none; stroke: var(--fond-jauge); stroke-width: 13; }
.jauge-zone { fill: none; stroke-width: 13; }
.jauge-graduation {
  fill: var(--texte-doux); font-size: 9.5px; text-anchor: middle;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.jauge-aiguille {
  fill: var(--texte);
  transform-origin: 100px 104px;
  transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.35, 1);
}
.jauge-vitesse-rempli { fill: none; stroke: var(--accent); stroke-width: 13; }
/* Le repère de cible : l'arc vert au-dessus de l'échelle, là où il faut être. */
.jauge-cible { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; }

.cadran-valeur {
  font-size: clamp(28px, 4.5vw, 46px); font-weight: 800; line-height: 0.92;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  margin-top: clamp(-40px, -4.5vw, -22px); position: relative; z-index: 1;
}
@media (max-width: 620px) {
  .cadran:not(#cadran) .cadran-valeur { margin-top: -12px; }
}
.cadran-unite { font-size: clamp(13px, 2vw, 16px); color: var(--texte-doux); margin-top: 3px; }
.cadran-cible {
  font-size: clamp(12px, 1.8vw, 14px); margin-top: 7px; min-height: 1.1em;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texte-doux);
}
.cadran.dedans .cadran-cible { color: var(--ok); }

.anneau-hote { position: relative; width: min(72%, 210px); margin: 0 auto; }
.anneau-hote svg { width: 100%; height: auto; display: block; }
.anneau-centre {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.anneau-pct {
  font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.anneau-fond { fill: none; stroke: var(--fond-jauge); stroke-width: 13; }
.anneau-reste {
  fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tuile {
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 16px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 2px;
  justify-content: center;
}
.tuile-etiquette {
  font-size: 11px; color: var(--texte-doux); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tuile-valeur {
  font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tuile-appoint, .tuile-detail { font-size: 11.5px; color: var(--texte-doux); }

.jauge {
  height: 10px; background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 999px; overflow: hidden;
}
.jauge-remplissage {
  height: 100%; width: 0%; background: var(--degrade-barre);
  border-radius: 999px; transition: width 1s linear;
}

.suivant, .message { text-align: center; font-size: 13.5px; color: var(--texte-doux); min-height: 1.1em; }
.message { font-size: 12.5px; }

.bandeau-parcours {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--texte-doux);
}
.bandeau-parcours #p-nom { font-weight: 600; color: var(--texte); }
.bandeau-parcours.caracteristiques { margin-top: 6px; }

/* ================================================================ console */

.console {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 16px; padding: 8px 16px 4px; margin-bottom: 0;
}
.console > summary {
  cursor: pointer; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-doux); padding: 8px 0;
  user-select: none; list-style: none;
}
.console > summary::-webkit-details-marker { display: none; }
.console > summary::before { content: "▸ "; }
.console[open] > summary::before { content: "▾ "; }
.console-valeur {
  float: right; color: var(--texte-actif); font-weight: 700;
  font-variant-numeric: tabular-nums; text-transform: none; font-size: 12px;
}
.console-valeur:empty { display: none; }

.console-corps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; padding: 6px 0 12px;
}
/* Les blocs de PREMIER niveau du tiroir tiennent toute la largeur.
   `.console-corps` est une grille `auto-fit minmax(210px, 1fr)` : tant qu'un
   seul enfant direct était visible, les pistes vides s'effondraient et
   personne ne voyait rien. Dès qu'un deuxième apparaît — le bouton d'armement
   ou celui de retrait, sortis de #pente-relief — le tiroir se retrouverait
   écrasé sur une demi-largeur au-delà de 432 px : invisible sur téléphone,
   bien réel sur la tablette posée sur le tapis. */
#pente-directe, #pente-relief,
#groupe-zwift-armer, #groupe-zwift-retirer { grid-column: 1 / -1; }

/* Douze pixels et un filet entre un réglage courant et un geste de sécurité :
   huit, c'est trop peu pour un pouce en course. */
#groupe-zwift-retirer {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bord);
}

.console-groupe { display: flex; flex-direction: column; gap: 9px; }
.console-groupe.pleine-largeur { grid-column: 1 / -1; }
.console-titre {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-doux);
}
.console-rangee { display: flex; gap: 5px; flex-wrap: wrap; }
.console-rangee .bouton {
  flex: 1 1 42px; min-width: 42px; background: var(--fond-encart);
  border: 1px solid var(--bord-fort); border-radius: 10px; padding: 10px 5px;
  font-size: 14px; font-weight: 700; min-height: 48px;
}
.console-rangee .bouton.console-pas {
  font-size: 16px; min-height: 52px; padding: 12px 6px; border-radius: 11px;
}
.console-rangee .bouton.active {
  background: var(--accent); border-color: var(--accent); color: #06130c;
}
.console-rangee .bouton.console-zone { border-left: 3px solid var(--zone-couleur, var(--accent)); }
.console-rangee .bouton.console-zone.active {
  background: var(--zone-couleur); border-color: var(--zone-couleur);
  color: var(--fond);
}

.commandes {
  display: flex; gap: 10px; position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10;
}

/* ================================================================ graphiques */

.cadre-graphique {
  background: var(--fond-encart); border: 1px solid var(--bord);
  border-radius: 14px; padding: 12px 10px 6px; margin: 10px 0;
  overflow-x: auto;
}
.cadre-graphique.compact { margin: 6px 0; padding: 8px 6px 2px; }
.graphique { width: 100%; height: auto; display: block; }

.g-grille line { stroke: var(--bord-fort); stroke-width: 1; stroke-dasharray: 3 4; }
.g-axe-y { fill: var(--texte-doux); font-size: 12px; text-anchor: end; font-family: inherit; }
.g-axe-y2 { fill: var(--texte-doux); font-size: 11px; font-family: inherit; }
.g-axe-x { fill: var(--texte-doux); font-size: 12px; text-anchor: middle; font-family: inherit; }
.g-socle-pente { fill: var(--bord); fill-opacity: 0.25; }
.g-pente { fill: var(--texte-doux); fill-opacity: 0.3; stroke: var(--texte-doux); stroke-opacity: 0.55; stroke-width: 1; }
.g-fc { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.g-vitesse { fill: none; stroke: var(--texte-doux); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.8; }
/* L'echelle de la vitesse, a droite : meme gris que sa courbe, pour qu'on
   ne prenne pas ces chiffres pour des battements. */
.g-axe-vitesse { fill: var(--texte-doux); font-size: 11px; text-anchor: start; font-family: inherit; }
.g-tiret-vitesse { stroke: var(--texte-doux); stroke-opacity: 0.55; stroke-width: 1; }
.g-cible { fill: color-mix(in srgb, var(--ok) 9%, transparent); }
.g-curseur { stroke: var(--texte); stroke-width: 1.5; opacity: 0.55; }
.g-point { fill: var(--texte); stroke: var(--fond-carte); stroke-width: 2; }
.g-repere { stroke: var(--texte); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.g-marqueur { fill: var(--texte); stroke: var(--fond-carte); stroke-width: 2; pointer-events: none; }
.g-capteur { cursor: crosshair; touch-action: pan-y; }
.g-relief path { stroke: none; }
.g-crete { fill: none; stroke: var(--trace); stroke-width: 1.6; opacity: 0.9; }
.g-parcouru { fill: var(--texte); opacity: 0.09; }

.legende { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 8px 6px 3px; }
.legende-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texte-doux); }
.legende-puce { width: 13px; height: 10px; border-radius: 2px; background: var(--c); display: inline-block; }
.legende-puce.carre { border-radius: 2px; }
.legende-puce.ligne { height: 3px; border-radius: 2px; }
.legende-puce.ligne-pointillee {
  height: 0; border-radius: 0; background: none;
  border-top: 3px dashed var(--c);
}
.legende-puce.aire { opacity: 0.45; }

.graphique-hote { position: relative; }
.infobulle {
  position: absolute; top: 6px;
  background: var(--fond-carte); border: 1px solid var(--bord-fort);
  border-radius: 9px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45;
  color: var(--texte); pointer-events: none; max-width: min(88vw, 300px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); z-index: 5;
}
@media (max-width: 640px) {
  .infobulle { top: 100%; margin-top: 6px; }
}
.infobulle[hidden] { display: none; }
.infobulle b { font-variant-numeric: tabular-nums; }
.infobulle i { color: var(--texte-doux); font-style: normal; font-size: 11.5px; }
.ib-bloc { color: var(--c); font-weight: 600; }
.ib-mesure {
  display: inline-block; margin-top: 2px; padding-top: 4px;
  border-top: 1px solid var(--bord); font-variant-numeric: tabular-nums;
}

/* ================================================================ carte OSM */

/* dessinerCarte pose la classe .carte sur son conteneur : ces ids reprennent
   la main sur le gabarit de carte-panneau (padding, fond) pour redevenir des
   fenêtres cartographiques. */
#carte-fond.carte, #histo-carte.carte, #seance-carte.carte {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--bord); background: var(--fond-encart);
  margin: 10px 0; padding: 0;
}
.carte-tuiles { position: absolute; inset: 0; }
.carte-tuile {
  position: absolute; width: 256px; height: 256px; user-select: none;
  filter: brightness(0.62) saturate(0.75) contrast(1.05);
}
.carte-trace { position: absolute; inset: 0; pointer-events: none; }
.trace-ombre { fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.trace-ligne { fill: none; stroke: var(--trace); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.trace-depart { fill: var(--texte); stroke: var(--fond); stroke-width: 2.5; }
.trace-position { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.trace-halo { fill: var(--accent); opacity: 0.3; }
.carte-credit {
  position: absolute; right: 6px; bottom: 3px; font-size: 10.5px;
  color: #cbd4df; opacity: 0.8; pointer-events: none;
}

/* -- coureurs (course contre soi) -- */

.coureur-ombre, .coureur-point, .coureur-rang,
.trace-halo, .trace-position, .g-point, .g-curseur, .g-parcouru {
  transition: cx 1s linear, cy 1s linear, x 1s linear, y 1s linear,
              x1 1s linear, x2 1s linear, width 1s linear;
}
.coureur-ombre { fill: var(--fond); opacity: 0.85; }
.coureur-point { fill: var(--coureur, #f778ba); }
.coureur-rang {
  fill: #0d1022; font-size: 9px; font-weight: 700; text-anchor: middle;
  font-family: inherit; pointer-events: none;
  paint-order: stroke; stroke: var(--coureur, #f778ba);
  stroke-width: 2.5px; stroke-linejoin: round;
}
.coureur.arrive { opacity: 0.55; }
.coureur-profil .coureur-ombre { fill: var(--fond); opacity: 0.9; }
.coureur-profil .coureur-point { fill: var(--coureur, #f778ba); stroke: var(--fond); stroke-width: 0.8; }
.coureur-profil.arrive { opacity: 0.5; }

.classement { display: flex; flex-direction: column; gap: 6px; }
/* LISIBLE DEPUIS LE TAPIS. Olivier, le 15/09 : « c'est écrit trop petit, je
   n'y vois rien ». Le classement se lit à un mètre et demi, en courant : les
   mesures étaient en 12 px gris. Tout passe en 16-22 px, en couleur pleine. */
.rang {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px;
  align-items: center; background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 12px; padding: 11px 15px; font-size: 17px;
  border-left: 5px solid var(--coureur, var(--bord));
}
.rang.moi { background: var(--fond-actif); border-color: var(--bord-accent); }
.rang.arrive { opacity: 0.75; }
.rang-position { font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.rang.moi .rang-position { color: var(--texte-actif); }
.rang-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rang-mesures {
  font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600;
  color: var(--texte); white-space: nowrap;
}
.rang.arrive .rang-mesures { color: var(--texte); font-weight: 700; }
.rang-ecart { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; white-space: nowrap; }
.rang-ecart .devant { color: var(--danger); }
.rang-ecart .derriere { color: var(--ok); }
/* Sur un téléphone, quatre colonnes en 17 px ne tiennent pas : les mesures
   passent sous le nom, le rang et l'écart occupent les deux lignes. */
@media (max-width: 640px) {
  .rang { grid-template-columns: auto 1fr auto; row-gap: 2px; }
  .rang-position { grid-column: 1; grid-row: 1 / span 2; }
  .rang-nom { grid-column: 2; grid-row: 1; }
  .rang-mesures { grid-column: 2; grid-row: 2; }
  .rang-ecart { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
}

/* ================================================================ vignettes */

.vignette { margin: 0; }
.vignette > figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-doux); margin-bottom: 6px;
}
.bouton-loupe {
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 8px;
  color: var(--texte-doux); font-size: 13px; padding: 4px 9px; cursor: pointer;
}
.bouton-loupe:hover { color: var(--texte); border-color: var(--bord-accent); }

.vignette.plein-ecran {
  position: fixed; inset: 0; z-index: 60; background: var(--fond);
  padding: 14px; margin: 0; display: flex; flex-direction: column;
}
.vignette.plein-ecran > figcaption { font-size: 13px; margin-bottom: 10px; }
.vignette.plein-ecran .bouton-loupe { font-size: 17px; padding: 6px 12px; }
.vignette.plein-ecran > div { flex: 1; min-height: 0; }
.vignette.plein-ecran #seance-carte { display: block; }
.vignette.plein-ecran .cadre-graphique { height: 100%; margin: 0; overflow: auto; }
.vignette.plein-ecran .cadre-graphique .graphique { width: max(100%, 1400px); }

#video-parcours { width: 100%; max-height: 300px; border-radius: 14px; background: #000; display: block; }
.vignette.plein-ecran #video-parcours { max-height: none; height: 100%; }

/* ================================================================ modale */

.modale { position: fixed; inset: 0; z-index: 70; }
.modale[hidden] { display: none; }
.modale-fond { position: absolute; inset: 0; background: rgba(5, 7, 18, 0.72); }
.modale-boite {
  position: relative; max-width: 760px; margin: 4vh auto; max-height: 92vh;
  overflow-y: auto; background: var(--fond); border: 1px solid var(--bord-fort);
  border-radius: 18px; padding: 20px;
}
@media (max-width: 640px) {
  .modale-boite { margin: 0; max-height: none; height: 100%; border-radius: 0; border: none; }
}

/* ================================================================ répartition zones */

.repartition {
  display: flex; height: 26px; border-radius: 8px; overflow: hidden;
  margin: 4px 0 8px; background: var(--fond-encart);
}
.repartition-part {
  background: var(--c); display: flex; align-items: center; justify-content: center;
  min-width: 2px; transition: flex 0.4s;
}
.repartition-part span { font-size: 11px; font-weight: 700; color: #0d1022; }
.repartition-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }

/* ================================================================ divers */

.etat-materiel { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: var(--fond-carte);
  border: 1px solid var(--bord-fort); border-radius: 14px; padding: 12px 18px;
  font-size: 13.5px; max-width: min(90vw, 520px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); z-index: 90;
}
@media (min-width: 880.02px) { .toast { bottom: 24px; } }
.toast[hidden] { display: none; }
.toast.erreur { border-color: var(--danger); }

/* Paysage court (téléphone couché sur le tapis) : les cadrans ne doivent pas
   pousser la console hors de l'écran. */
@media (orientation: landscape) and (max-height: 620px) {
  .cadran-valeur { font-size: clamp(22px, 7vh, 34px); }
  .jauge-fc { width: min(70%, 210px); }
  .anneau-hote { width: min(58%, 160px); }
  .cadran { padding: 10px; }
  .vue { padding-top: 10px; }
  #vue-seance { gap: 8px; }
  .tuile-valeur { font-size: clamp(18px, 4vh, 26px); }
}

/* Un utilisateur qui demande moins d'animation ne veut ni aiguille amortie,
   ni glissement de points, ni chenillard. */
@media (prefers-reduced-motion: reduce) {
  .jauge-aiguille, .anneau-reste, .anneau-forme-arc, .jauge-remplissage,
  .coureur-ombre, .coureur-point, .coureur-rang,
  .trace-halo, .trace-position, .g-point, .g-curseur, .g-parcouru {
    transition: none;
  }
  .bouton.occupe::after { animation: none; background: #ffffff1e; }
  .attente > .point-etat { animation: none; }
}

/* -- fenêtres flottantes de compteurs -------------------------------------
   Un compteur se détache en CLONE dans une fenêtre par-dessus la page
   (position: fixed), déplaçable par sa barre de titre — au doigt ou à la
   souris — et posable n'importe où : sur la carte, en bas, ailleurs.
   z-index 45 : au-dessus du bandeau collant (30), sous les modales (70). */
.fenetre-compteur {
  position: fixed; z-index: 45; width: 244px;
  background: var(--fond-carte); border: 1px solid var(--bord-accent);
  border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.fenetre-barre {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 6px 5px 12px; font-size: 12px; color: var(--texte-doux);
  border-bottom: 1px solid var(--bord);
  cursor: grab; touch-action: none; user-select: none;
}
.fenetre-barre:active { cursor: grabbing; }
.fenetre-fermer {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.fenetre-fermer:hover { background: var(--fond-encart); }
.fenetre-corps { padding: 4px; }
/* Le clone garde l'habit du compteur, sans son cadre : la fenêtre l'a déjà. */
.fenetre-corps .cadran, .fenetre-corps .tuile {
  border: none; box-shadow: none; outline: none; cursor: default;
}

/* Le bouton de détachement, dans le coin de chaque compteur. Toujours
   visible — la tablette n'a pas de survol — mais discret. */
.cadran, .tuile { position: relative; }
.detacher {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  background: none; border: none; color: var(--texte-doux); opacity: 0.4;
  font-size: 13px; line-height: 1; padding: 4px 6px; cursor: pointer;
  border-radius: 7px;
}
.detacher:hover { opacity: 0.9; background: var(--fond-encart); }