/* ═══════════════════════════════════════════════════════════════════
   hero-dial.css — cadran 3D du hero (Three.js). Complète landing.css,
   ne redéfinit aucun sélecteur existant. #dial-canvas remplace
   visuellement .clock-svg (qui reste dans le DOM, caché, comme repli
   si WebGL est indisponible).
   ═══════════════════════════════════════════════════════════════════ */
.hero-clock { width: 100%; max-width: 500px; margin: 0 auto; }
.hero-clock-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
#dial-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab;
  /* Le rendu WebGL (bloom) sort opaque noir pur dans les zones vides,
     pas exactement la couleur du fond du site — plutôt que de chasser
     un match de couleur exact à travers le tone-mapping (fragile), le
     bord du canvas s'estompe via un masque CSS : le vrai fond de page
     (parfaitement fidèle, lui) prend le relais. */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 88%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 88%, transparent 100%);
}
#dial-canvas.dragging { cursor: grabbing; }
#dial-canvas.webgl-unavailable { display: none; }

/* Le SVG plat original reste caché tant que le canvas 3D fonctionne —
   c'est le repli si WebGL échoue (voir hero-dial.js). */
.hero-clock-stage .clock-svg { display: none; }
#dial-canvas.webgl-unavailable ~ .clock-svg { display: block; }

.webgl-fallback-note {
  display: none; text-align: center; font: 400 11px/1.5 var(--font-mono);
  color: var(--cream-mute); margin-top: 12px;
}
#dial-canvas.webgl-unavailable ~ .webgl-fallback-note { display: block; }

@media (prefers-reduced-motion: reduce) {
  #dial-canvas { cursor: default; }
}