/* =============================================================
   arbusteo — orbital diagram (Promesse: "Une seule maison")
   The five steps orbit the central garden element, auto-rotating.
   Click a node → rotation pauses, the node lights up, a spoke
   draws to it, and the centre morphs to reveal that step.
   Vanilla JS drives positions (js/orbit.js); this is the skin.
   ============================================================= */
.orbit {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 480px;
  margin: 0 auto; --ring: cubic-bezier(0.2, 0, 0, 1);
  touch-action: manipulation;
}

/* decorative rings */
.orbit-rings { position: absolute; inset: 0; pointer-events: none; }
.orbit-ring {
  position: absolute; top: 50%; left: 50%; width: 80%; height: 80%;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--olive) 48%, transparent);
}
.orbit-ring--2 {
  width: 56%; height: 56%; border-style: solid;
  border-color: color-mix(in srgb, var(--olive) 20%, transparent);
}

/* spoke from centre to the active node */
.orbit-spoke {
  position: absolute; top: 50%; left: 50%; height: 2px; width: var(--r-px, 40%);
  transform-origin: 0 50%; transform: rotate(0deg) scaleX(0);
  background: linear-gradient(90deg, var(--olive), color-mix(in srgb, var(--olive) 10%, transparent));
  opacity: 0; transition: opacity .3s ease, transform .5s var(--ring); z-index: 2;
  border-radius: 2px;
}
.orbit.has-active .orbit-spoke { opacity: .85; }

/* ---- centre ----------------------------------------------------------- */
.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 39%; min-width: 132px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 14px;
  background: var(--olive-light); border: 2px solid var(--olive);
  box-shadow: var(--shadow-2); z-index: 6; cursor: pointer; font-family: inherit;
  transition: width .5s var(--ring), aspect-ratio .5s var(--ring),
              border-radius .5s var(--ring), background .35s ease, box-shadow .35s ease;
}
.orbit.has-active .orbit-core {
  width: 56%; aspect-ratio: auto; min-height: 134px; border-radius: 26px;
  background: var(--paper); box-shadow: var(--shadow-3);
}
.orbit-core:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }

.oc-default, .oc-detail {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  transition: opacity .3s ease;
}
.oc-default .material-symbols-outlined { font-size: 38px; color: var(--green-deep); }
.oc-default .lbl { font-size: 14px; font-weight: 700; color: var(--green-title); line-height: 1.2; }

.oc-detail { opacity: 0; pointer-events: none; padding: 6px 8px; }
.orbit.has-active .oc-default { opacity: 0; }
.orbit.has-active .oc-detail { opacity: 1; }
.oc-num {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--olive);
}
.oc-name { font-size: 15.5px; font-weight: 700; color: var(--green-title); line-height: 1.18; text-wrap: balance; }
.oc-benefit { font-size: 12.5px; line-height: 1.42; color: var(--ink-soft); margin-top: 3px; text-wrap: pretty; }
.oc-hint {
  margin-top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--olive); display: inline-flex; align-items: center; gap: 4px; opacity: .8;
}
.oc-hint .material-symbols-outlined { font-size: 13px; }

/* ---- orbiting nodes --------------------------------------------------- */
.orbit-stage { position: absolute; inset: 0; z-index: 3; }
.onode {
  position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  /* transform set by JS: translate(calc(-50% + Xpx), calc(-50% + Ypx)) */
  transition: opacity .4s ease;
}
.onode-dot {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--paper); color: var(--olive);
  border: 2px solid color-mix(in srgb, var(--olive) 42%, transparent);
  box-shadow: var(--shadow-1); display: grid; place-items: center;
  transition: background .3s ease, border-color .3s ease, color .3s ease,
              transform .3s var(--ring), box-shadow .3s ease;
}
.onode-dot .material-symbols-outlined { font-size: 24px; }
.onode-lbl {
  position: absolute; top: 57px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--green-dark);
  transition: opacity .3s ease, color .3s ease; pointer-events: none;
}
.onode:hover .onode-dot { border-color: var(--olive); transform: scale(1.08); }
.onode.is-active .onode-dot {
  background: var(--green-deep); color: var(--cream-light); border-color: var(--green-deep);
  transform: scale(1.18); box-shadow: var(--shadow-2);
}
.onode.is-active .onode-lbl { color: var(--green-deep); font-weight: 700; }

/* hidden source text for the centre detail (localised via data-i18n) */
.onode-data { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 860px) {
  .promesse-grid { grid-template-columns: 1fr; }
  .promesse-text .h2 { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-core, .onode, .onode-dot, .orbit-spoke { transition: none; }
}