/* Chronomètres réellement épinglés à la fenêtre.
   timer-pin.js déplace uniquement leur élément visuel hors du conteneur animé.
   Le calcul du temps reste entièrement géré par learner.js / exam.js. */
#timer,
#examTimer {
  position: fixed;
  top: 88px;
  z-index: 30;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(0, 59, 74, .16);
  pointer-events: none;
}

#timer {
  right: max(16px, calc((100vw - 620px) / 2 + 20px));
}

#examTimer {
  right: max(16px, calc((100vw - 780px) / 2 + 20px));
}

.timer-pin-placeholder {
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
}

.timer-pin-placeholder + .exam-answered {
  display: block;
  margin-top: 5px;
  text-align: center;
}

@media (max-width: 560px) {
  #timer,
  #examTimer {
    top: 72px;
    right: 14px;
  }

  .timer-pin-placeholder {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
}