/* ==========================================================================
   Quelle heure ? — le cadran.
   Tout est en SVG : net à toutes les tailles, et les aiguilles ne sont que
   deux lignes qu'on fait tourner.
   ========================================================================== */

.hr-horloge{
  width:min(74vw, 44vh, 340px);
  height:auto;
  display:block;
  touch-action:none;            /* sinon glisser une aiguille fait défiler la page */
  -webkit-tap-highlight-color:transparent;
}
.hr-fond{
  fill:var(--surface);
  stroke:var(--c-jeu);
  stroke-width:4;
}
.hr-trait{stroke:var(--ink-soft);stroke-width:1.4;opacity:.45}
.hr-trait.gros{stroke:var(--ink-soft);stroke-width:3.2;opacity:.9}
.hr-chiffre{
  fill:var(--ink);
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:15.5px;font-weight:600;
  text-anchor:middle;dominant-baseline:central;
  user-select:none;
}
.hr-aig{stroke-linecap:round}
.hr-aig.heure{stroke:var(--ink);stroke-width:8}
.hr-aig.minute{stroke:var(--c-jeu);stroke-width:5}
.hr-axe{fill:var(--ink)}

/* cadran manipulable : on doit voir tout de suite qu'on peut y toucher */
.hr-horloge.actif{cursor:grab}
.hr-horloge.actif:active{cursor:grabbing}
.hr-horloge.actif .hr-aig.heure{stroke-width:9}
.hr-horloge.actif .hr-aig.minute{stroke-width:6}

.hr-lu{font-size:1.05rem}
.hr-lu b{color:var(--c-jeu)}

@media (min-width:720px){
  .hr-chiffre{font-size:14px}
}
.hr-aide{font-size:.88rem;opacity:.75}