/* Page Contact : le grand 2 et son cadran, à droite de l'introduction */

.contact-hero { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 960px) {
  .contact-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
}

.dial-link { display: flex; align-items: center; gap: var(--s4); color: var(--ink); }
.dial { position: relative; flex: none; width: clamp(200px, 22vw, 290px); aspect-ratio: 1; display: grid; place-items: center; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial-ticks { stroke: var(--line); stroke-width: 2.25; stroke-linecap: round; }
.dial-ticks .on { stroke: var(--gres); }
.dial-num {
  font-family: var(--font-display);
  font-size: clamp(9rem, 16vw, 13.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background-image: var(--grad-gres);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dial-text { display: grid; gap: 0.35rem; justify-items: start; }
.dial-unit { font-family: var(--font-display); font-size: var(--fs-headline); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.dial-text strong { font-size: var(--fs-lead); font-weight: 500; color: var(--ink-2); }
.dial-text small { font-size: var(--fs-small); color: var(--muted); }
.dial-go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--gres); }
.dial-go .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .dial-link:hover .dial-go .icon { transform: translateX(4px); }
}

@media (max-width: 959px) {
  .dial-link { justify-content: center; }
}
@media (max-width: 559px) {
  .dial-link { flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
  .dial-text { justify-items: center; }
}