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

   2026-04-10 [Chantier 3 — hygiène CSS] :
   - Suppression des !important sur max-width dans les blocs de contraintes
     par contexte (.home-top, .card-clock, .demo-clock-block, .hero).
     Les sélecteurs avec [data-dial-mode] ont une spécificité (0,2,1) qui
     bat déjà spm.css (0,2,0) sans avoir besoin de !important.
     Les pages peuvent désormais surcharger via leurs <style> inline normalement.
   - Les !important sur ::after (neutralisation halo) et overflow:visible
     sont conservés — ils combattent des règles extérieures légitimes.

   2026-04-09 [modularisation cadran] :
   - Ajout des contraintes de largeur pour le cadran STANDARD
     (data-dial-mode="standard"), qui n'avait jusqu'ici aucune contrainte
     hors de .card-clock. Conséquence : sur demo.php, le PNG natif (2127px)
     prenait toute la largeur de la page. Désormais le standard suit la
     même grille de tailles par contexte que le Premium.
   - Ajout d'une règle de base sur .dial-face pour qu'il occupe son wrapper.
*/

/* 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 Premium */
.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 Premium */
.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 Premium */
.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 Premium — positionnement par JS, taille/padding par CSS.
   Règle de base indépendante du contexte parent (index, demo, precision…).
   L'habillage visuel (couleurs, bordure) est posé par le thème actif.

   z-index 3 : au-dessus du cadran PNG (2) mais EN DESSOUS de l'aiguille (6)
   et du moyeu (7). C'est la réalité physique d'une vraie horloge : la
   fenêtre du coefficient est une découpe dans le cadran, l'aiguille passe
   par-dessus. */
.dial-wrapper.premiumDial .dial-coef{
    z-index: 3;
    position: absolute;
    display: none;                /* visible quand JS pose un coef */
    min-width: 2.2em;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    /* Couleurs par défaut — surchargées par le thème quand dispo */
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ────────────────────────────────────────────────────────────────────────
   Cadran STANDARD — base
   ────────────────────────────────────────────────────────────────────────
   Le PNG des cadrans standards est servi à sa taille naturelle (jusqu'à
   2127×2127 pour cadran.png). Sans la règle ci-dessous, l'image
   débordait du wrapper sur les pages où le wrapper n'avait pas de
   max-width (notamment demo.php avant ce patch). */
.dial-wrapper[data-dial-mode="standard"]{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.dial-wrapper[data-dial-mode="standard"] .dial-face{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 999px;
}

/* Aiguille du cadran standard — règle de base, applicable hors .card-clock
   (notamment .demo-clock-block où aucune règle n'existait). */
.dial-wrapper[data-dial-mode="standard"] .dial-hand{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 40%;
  background: rgba(20, 20, 20, 0.9);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  transform-origin: 50% 85%;
  transform: translate(-50%, -85%) rotate(0deg);
  z-index: 3;
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1);
}

.dial-wrapper[data-dial-mode="standard"] .dial-center{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.9);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  z-index: 4;
}

/* Badge coefficient du cadran standard — règle de base */
.dial-wrapper[data-dial-mode="standard"] .dial-coef{
  position: absolute;
  top: 50%;
  right: 16%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 5;
  display: none; /* visible quand JS pose un coef */
}

/* ── 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 — s'appliquent aux DEUX modes (premium ET standard)
   pour garantir une cohérence visuelle quel que soit le cadran choisi.
   ──────────────────────────────────────────────────────────────────────── */

/* index.php + demo.php : cadran principal — agrandi pour mieux occuper
   la hauteur disponible (2026-04-09 / 2026-04-10 option C) */
.home-top .dial-wrapper.premiumDial,
.home-top .dial-wrapper[data-dial-mode="premium"],
.home-top .dial-wrapper[data-dial-mode="standard"],
.card-clock .dial-wrapper.premiumDial,
.card-clock .dial-wrapper[data-dial-mode="premium"],
.card-clock .dial-wrapper[data-dial-mode="standard"],
.demo-clock-block .dial-wrapper.premiumDial,
.demo-clock-block .dial-wrapper[data-dial-mode="premium"],
.demo-clock-block .dial-wrapper[data-dial-mode="standard"] {
    max-width: min(540px, 100%);
}

/* demo.php : anciennement contraint à 240px — supprimé car le layout a été
   refondu en 2026-04-10 (grille carte|cadran au lieu de 3 blocs empilés).
   Cette règle reste présente dans les commentaires pour rappel historique. */

/* precision.php : hero — 2026-04-10 aligné sur index/demo (540px) */
.hero .dial-wrapper.premiumDial,
.hero .dial-wrapper[data-dial-mode="premium"],
.hero .dial-wrapper[data-dial-mode="standard"] {
    max-width: min(540px, 100%);
}