.cm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cm-svg text { font-family: var(--f-corps); letter-spacing: -.004em; }

.cm-piste { fill: none; stroke: color-mix(in srgb, var(--encre) 8%, transparent); }
.cm-trait { fill: none; stroke: var(--anneau-logo); }
.cm-sep { stroke: var(--lumiere); stroke-width: 1; }
.cm-moment { fill: var(--lumiere); font-weight: 500; }
.cm-moment--num { font-family: var(--f-chiffre); font-weight: 600; }

.cm-num { font: 600 var(--fs-3)/1 var(--f-chiffre); fill: var(--encre); opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-num.est-vu { opacity: 1; }
.cm-num.est-vif { font-weight: 800; }

.cm-pointe { fill: none; stroke: var(--lumiere); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-pointe.est-vue { opacity: 1; }

.cm-zone { fill: var(--froid-voile); }
.cm-sys { fill: none; stroke: var(--froid); stroke-width: 1.5; }
.cm-app { opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-app.est-la { opacity: 1; }
.cm-app__fond { fill: var(--cyc); stroke: color-mix(in srgb, var(--froid) 40%, transparent); stroke-width: 1; transition: stroke var(--t-passage) var(--e-doux), stroke-width var(--t-passage) var(--e-doux); }
.cm-app__icone, .cm-app__nom { transition: opacity var(--t-passage) var(--e-doux); }

.cm-app__nom { font-weight: 500; fill: var(--encre); }
.cm-app.est-vive .cm-app__fond { stroke: var(--froid); stroke-width: 2.5; }
.cm-app.est-vive .cm-app__nom { font-weight: 600; }
.cm-app.est-sourde .cm-app__icone { opacity: .38; }

.cm-app.est-sourde .cm-app__nom { opacity: .7; }
.cm-repere { font-size: var(--fs-2); font-weight: 600; fill: var(--froid); opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-repere--centre { font-size: var(--fs-4); }
.cm-repere.est-vu { opacity: 1; }

.cm-disque { fill: var(--froid); }
.cm-seuil { fill: none; stroke: var(--encre); stroke-width: 1.4; stroke-dasharray: 3.5 3.5; opacity: 0; transition: opacity var(--t-passage) var(--e-doux), stroke-width var(--t-reponse) var(--e-doux); }
.cm-seuil.est-vu { opacity: 1; }
.cm-seuil.est-franchi { stroke-dasharray: none; stroke-width: 2.5; }
.cm-seuil--clair { stroke: var(--lumiere); stroke-width: 1.6; }
.cm-mots { opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-mots.est-vu { opacity: 1; }
.cm-mot { font-size: var(--fs-3); font-weight: 500; fill: var(--encre); }
.cm-mot--seuil { fill: var(--encre-2); }
.cm-rappel { stroke: color-mix(in srgb, var(--encre) 55%, transparent); stroke-width: 1; }

.cm-fil { fill: none; stroke: var(--froid); stroke-width: 1.75; stroke-linecap: round; }
.cm-fil__coureur { fill: var(--froid); opacity: 0; transition: opacity var(--t-reponse) var(--e-doux); }
.cm-fil__coureur.est-vu { opacity: 1; }
.cm-fil__mot { font-size: var(--fs-2); font-weight: 500; fill: var(--froid); opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-fil__mot.est-vu { opacity: 1; }
.cm-resultat { opacity: 0; transition: opacity var(--t-passage) var(--e-doux); }
.cm-resultat.est-vu { opacity: 1; }
.cm-resultat__rond { fill: var(--cyc); stroke: var(--froid); stroke-width: 2.5; }
.cm-resultat__mot { font-weight: 600; fill: var(--froid); }
.cm-app.est-reliee .cm-app__fond { stroke: var(--froid); stroke-width: 2; }

.cm-svg.est-fin .cm-app__nom { opacity: 0; }
.cm-svg.est-fin.cm-noms-fin .cm-app.est-reliee .cm-app__nom { opacity: 1; }

.cm-jauge { transition: opacity var(--t-passage) var(--e-doux); }
.cm-svg.est-fin:not(.cm-fin-a) .cm-jauge { opacity: 0; }
.cm-svg.est-fin .cm-app:not(.est-reliee) .cm-app__icone { opacity: .38; }

@media (forced-colors: active) {
  .cm-trait, .cm-piste, .cm-sys, .cm-app__fond, .cm-seuil, .cm-pointe, .cm-rappel, .cm-fil, .cm-resultat__rond { stroke: CanvasText; }
  .cm-num, .cm-app__nom, .cm-repere, .cm-mot, .cm-fil__mot, .cm-resultat__mot { fill: CanvasText; }
  .cm-disque, .cm-fil__coureur { fill: CanvasText; }
  
  .cm-zone, .cm-moment { fill: Canvas; }
}