/* premium_dial.css — cadrans photo Premium (Gold/Chrome) + aiguille CSS
   Version corrigée marees.org : max-width contraint par le conteneur parent */

/* Harmonisation gabarit Premium : ne plus forcer 660px, s'adapter au conteneur */
.dial-wrapper[data-dial-mode="premium"]{
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

/* Le conteneur réutilise aussi .dial-wrapper (halo objet) via spm.css */
.dial-wrapper.premiumDial{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

/* Neutraliser le ::after sur card-clock */
.card-clock .dial-wrapper.premiumDial::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Image de fond */
.premiumDial__bg{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 999px;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,0.55));
}

/* Aiguille */
.premiumDial__needle{
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--needle-w);
  height: var(--needle-l);
  background: var(--needle-color);
  border-radius: 999px;
  transform-origin: 50% 95%;
  transform: translate(-50%, -95%) rotate(calc(var(--needle-deg) + var(--zero-offset)));
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  z-index: 6;
}

/* Moyeu */
.premiumDial__hub{
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--hub-d);
  height: var(--hub-d);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: var(--needle-color);
  box-shadow: 0 2px 12px rgba(0,0,0,0.30);
  z-index: 7;
}

/* Coefficient */
.dial-wrapper.premiumDial .dial-coef{ z-index: 10; }

/* ── Conteneurs parents : autoriser le débordement visuel du halo ── */
.card-clock,
.card.card-clock,
.clock-stack,
.demo-clock-block,
.hero .hero-media,
.hero .clock-stack {
    overflow: visible !important;
}

/* ── Contraintes par contexte ── */

/* index.php : colonne droite */
.home-top .dial-wrapper.premiumDial,
.home-top .dial-wrapper[data-dial-mode="premium"],
.card-clock .dial-wrapper.premiumDial,
.card-clock .dial-wrapper[data-dial-mode="premium"] {
    max-width: min(420px, 100%) !important;
}

/* demo.php : bloc horloge étroit */
.demo-clock-block .dial-wrapper.premiumDial,
.demo-clock-block .dial-wrapper[data-dial-mode="premium"] {
    max-width: 240px !important;
}

/* precision.php : hero */
.hero .dial-wrapper.premiumDial,
.hero .dial-wrapper[data-dial-mode="premium"] {
    max-width: min(440px, 94%) !important;
}