/* Objectif de temps du jour en anneau autour de ses minutes (acts/dayGoal.js, _renderDayGoal ;
 * --goal-p = part de l'objectif déjà faite, en %). Sorti de course-hero-tab.css le 09/11/2026.
 * Affiché à droite du temps dans l'onglet de la fenêtre du player et dans la barre du haut du
 * chemin (Christophe, 09/11/2026), et dans le héros de la popup Premium du compteur
 * (acts/paidClockPopup.js, même jour ; ses textes 2684 / 2685 parlent de l'horloge et du
 * cercle). Ailleurs (en-tête du site), l'objectif reste « 06 | 15 » (ecoach_n.css). Sans
 * tuiles, filet ni cible. Couleurs et épaisseur par endroit, en variables : --ring-on (part
 * faite), --ring-off (reste), --ring-ink (chiffres), --ring-w (épaisseur, 2 px par défaut). */

/* ---------- Commun ---------- */
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0;
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal-sep {
  display: none;
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal-ring {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: conic-gradient(var(--ring-on) calc(var(--goal-p, 0) * 1%), var(--ring-off) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w, 2px)), #000 calc(100% - var(--ring-w, 2px) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w, 2px)), #000 calc(100% - var(--ring-w, 2px) + 0.5px));
}
/* Ni cible ni unité au-dessus des minutes : l'anneau suffit. */
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal .cf-unit {
  display: none;
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal .cf-digits {
  gap: 0;
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal .cf-tile {
  box-shadow: none;
  color: var(--ring-ink);
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal .cf-half {
  background: none;
  box-shadow: none;
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal.is-done .counter-goal-ring {
  -webkit-mask: none;
  mask: none;
}
:is(.lch-tab #counter, .cpath-head #counter, #newpop .iconpp--clock) .counter-goal.is-done .counter-goal-tiles {
  display: none;
}

/* ---------- Onglet de la fenêtre du player (fond vert) : 20 px, blanc. Atteint : disque blanc
   et coche verte. ---------- */
.lch-tab #counter .counter-goal {
  width: 20px;
  height: 20px;
  --cf-w: 5px;
  --cf-fs: 9px;
  --ring-on: #fff;
  --ring-off: rgba(255, 255, 255, 0.35);
  --ring-ink: #fff;
}
.lch-tab #counter .counter-goal.is-done .counter-goal-ring {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Barre du haut du chemin (fond clair) : à la hauteur des tuiles du temps (26 px),
   anneau vert. Atteint : disque vert et coche blanche. Mi-jour et nuit : couleurs du thème
   (path-themes/tokens.css). ---------- */
.cpath-head #counter .counter-goal {
  width: 26px;
  height: 26px;
  margin-inline-start: 2px;
  /* Calé sur les tuiles du temps, pas sur « min » au-dessus. */
  align-self: flex-end;
  --cf-w: 7px;
  --cf-fs: 11px;
  --ring-on: #1f8a4c;
  --ring-off: rgba(0, 0, 0, 0.12);
  --ring-ink: #4f5b64;
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-head #counter .counter-goal {
  --ring-on: var(--pt-accent, #1f8a4c);
  --ring-off: var(--pt-line, rgba(255, 255, 255, 0.2));
  --ring-ink: var(--pt-ink-2, currentColor);
}
.cpath-head #counter .counter-goal.is-done .counter-goal-ring {
  background: #1f8a4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
/* ---------- Héros de la popup Premium (fond vert #81a825) : à la hauteur des tuiles de
   l'horloge (--cf-h, 52 px ; 44 px sur mobile), anneau blanc de 5 px. Atteint : disque blanc et
   coche verte, comme l'onglet. Calé sur les tuiles, pas sur « min » au-dessus (sinon il montait
   de la hauteur de l'unité, Christophe 09/11). ---------- */
#newpop.pop-theme-locked .iconpp--clock .counter-goal {
  align-self: flex-end;
  width: var(--cf-h);
  height: var(--cf-h);
  margin-left: 14px;
  line-height: 1;
  --cf-w: 13px;
  --cf-fs: 20px;
  --ring-w: 5px;
  --ring-on: #fff;
  --ring-off: rgba(255, 255, 255, 0.35);
  --ring-ink: #fff;
}
/* ecoach_n.css affiche les unités de l'horloge du héros avec le même poids que la règle commune
   (« min » au-dessus des tuiles) : sans ce renfort, l'ordre de chargement déciderait. */
#newpop.pop-theme-locked .iconpp--clock .counter-goal .cf-unit {
  display: none;
}
#newpop.pop-theme-locked .iconpp--clock .counter-goal.is-done .counter-goal-ring {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 26px no-repeat;
}
@media (max-width: 480px) {
  #newpop.pop-theme-locked .iconpp--clock .counter-goal {
    margin-left: 10px;
    --cf-w: 11px;
    --cf-fs: 17px;
  }
}

/* Visiteur : #counter reste dnone hors du chemin (en-tête du site) ; la barre du chemin
   l'affiche, comme l'onglet (course-hero-tab.css). Rien au clic. */
.cpath-head #counter.dnone.counter--guest {
  display: flex !important;
}
.cpath-head #counter.counter--guest .counter-face {
  cursor: default;
}