/** Leadcraft Marketing — Knowledge Graph */

.kg {
  position: relative;
  width: 100%;
  height: 90vmin;
  max-height: 800px;
  min-height: 420px;
  overflow: visible;
}

/** All lists and items are zero-size absolute anchors.
    kg.js sets left/top on each <li> to place it on the orbit circle. */
.kg ul {
  list-style: none;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

.kg li {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/** NODE PILLS */
.kg h2 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(var(--s, 0.4));
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, .35);
  opacity: var(--o, 0);
  pointer-events: none;
  transition:
    opacity   340ms cubic-bezier(.34, 1.56, .64, 1),
    transform 340ms cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 200ms ease;
}

.kg li.open > h2 {
  --o: 1;
  --s: 1;
  pointer-events: auto;
}

.kg li.active > h2 {
  --o: 1;
  --s: 1.08;
  pointer-events: auto;
}

.kg li.open > ul > li > h2,
.kg li.active > ul > li > h2 {
  --o: 1;
  --s: 1;
  pointer-events: auto;
}

/** Link lines (line mode — <svg> injected by kg.js) */
.kg svg g {
  transition: opacity 340ms cubic-bezier(.34, 1.56, .64, 1);
}

.kg svg line {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
}

/** Orbit ring: ::after on the h2, sized by --orbit set by kg.js */
.kg h2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width:  calc(var(--orbit, 0px) * 2);
  height: calc(var(--orbit, 0px) * 2);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .40);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 500ms cubic-bezier(.34, 1.4, .64, 1),
    opacity   380ms ease;
}

.kg li.open > h2::after,
.kg li.active > h2::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/** LEVEL 0 — Sun */
.kg li.node-0 {
  position: absolute;
  top: 50%;
  left: 50%;
}

.kg li.node-0 > h2 {
  --o: 1;
  --s: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 10px 22px;
  background: #112638;
  border-color: transparent;
  box-shadow:
    0 0 28px 8px  rgba(240, 120, 35, .45),
    0 0 70px 20px rgba(240, 120, 35, .18);
  pointer-events: auto;
  z-index: 4;
}

.kg li.node-0.active > h2 {
  --s: 1.06;
  box-shadow:
    0 0 44px 16px rgba(240, 120, 35, .65),
    0 0 110px 50px rgba(240, 120, 35, .28);
}

.kg li.node-0 > h2 .kg-lead  { color: #f0f8ff; }
.kg li.node-0 > h2 .kg-craft { color: #f07823; }

/** LEVEL 1 — Planets */
.kg li.node-1 > h2 {
  --o: 1;
  --s: 1;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 14px;
  z-index: 8;
  pointer-events: auto;
}

/** Planètes — orange uniforme */
.kg li.node-1 > h2 { background: rgba(240, 120, 35, .12); color: #f07823; border-color: rgba(240, 120, 35, .45); }

.kg li.node-1 li.node-2 > h2,
.kg li.node-1 li.node-3 > h2 { color: #f07823; border-color: rgba(240, 120, 35, .3); }

.kg li.node-1.active > h2 {
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, .18);
}

/** LEVEL 2 — Moons */
.kg li.node-2 > h2 {
  font-size: 14px;
  font-weight: 400;
  padding: 4px 10px;
  color: rgba(255, 255, 255, .78);
  background: #1a2035;
  border-color: rgba(255, 255, 255, .14);
  z-index: 12;
}

.kg li.node-2.active > h2 {
  box-shadow: 0 0 12px rgba(255, 255, 255, .20);
}

/** LEVEL 3 — Moonlets */
.kg li.node-3 > h2 {
  font-size: clamp(7px, 0.9vmin, 11px);
  font-weight: 400;
  padding: clamp(3px, 0.5vmin, 7px) clamp(6px, 1.1vmin, 13px);
  color: rgba(255, 255, 255, .55);
  background: #111827;
  border-color: rgba(255, 255, 255, .08);
  z-index: 16;
}

.kg li.node-3.active > h2 {
  box-shadow: 0 0 8px rgba(255, 255, 255, .12);
}

/** ZOOM MODE */
.kg.kg--zoomed li.node-0 > h2 {
  opacity: .45;
  filter: brightness(.7);
  box-shadow: none;
}

/** Suppress ::after orbit rings on node-1 and node-2 — static rings serve that role */
.kg.kg--zoomed li.node-1.open > h2::after,
.kg.kg--zoomed li.node-1.active > h2::after,
.kg.kg--zoomed li.node-2.open > h2::after,
.kg.kg--zoomed li.node-2.active > h2::after {
  opacity: 0;
  animation: none;
}


/** INTRO ANIMATIONS */

@keyframes kg-pulse {
  0%, 100% { box-shadow: 0 0  0px  0px rgba(255, 255, 255, .0); }
  50%       { box-shadow: 0 0 22px 10px rgba(255, 255, 255, .28); }
}

@keyframes kg-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/** Static concentric rings shown before hover (one per depth level) */
.kg-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 500ms ease, border-color 400ms ease;
}

/** ring--1: gray at rest, transparent after any interaction, planet color when zoomed */
.kg-orbit-ring--1 { border-color: rgba(240, 120, 35, .6); }

.kg.kg--awakened .kg-orbit-ring--1 { border-color: transparent; animation: none; }

.kg.kg--zoomed .kg-orbit-ring--1,
.kg.kg--circle.kg--awakened.kg--zoomed .kg-orbit-ring--1 {
  border-style: dashed;
  border-color: var(--zoom-color);
  animation: ring-spin 12s linear infinite;
}

@keyframes ring-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.kg-orbit-ring--2 { border-color: rgba(253, 232, 208, .6); }

/** Pulse node-1 pills 3× after the sun is first hovered */
.kg.kg--awakened li.node-1 > h2 {
  animation: kg-pulse 1.4s ease-in-out 3 both;
  animation-delay: 0.4s;
}

/** Spinning dashed orbit ring on root node (line mode only — circle mode uses the static ring) */
.kg:not(.kg--circle) li.node-0.open > h2::after,
.kg:not(.kg--circle) li.node-0.active > h2::after {
  border-style: dashed;
  border-color: rgba(240, 120, 35, .6);
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: kg-spin 12s linear infinite;
}


/** Base: compact sizes for mobile */
.kg li.node-0 > h2 { font-size: 13px; padding: 7px 14px; }
.kg li.node-1 > h2 { font-size: 12px; padding: 4px 9px; }
.kg li.node-2 > h2 { font-size: 11px; padding: 3px 7px; }

@media (min-width: 640px) {
  .kg li.node-0 > h2 { font-size: 16px; padding: 10px 22px; }
  .kg li.node-1 > h2 { font-size: 16px; padding: 6px 14px; }
  .kg li.node-2 > h2 { font-size: 14px; padding: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kg h2, .kg h2::after { transition: none; animation: none; }
}

/** OUTER RING - animated service labels (nav mode) */
.kg-outer-node {
  position: absolute;
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(240, 120, 35, .07);
  color: rgba(240, 120, 35, .75);
  border: 1px solid rgba(240, 120, 35, .25);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: opacity 400ms ease;
}

@media (min-width: 640px) {
  .kg-outer-node { font-size: 12px; padding: 4px 10px; }
}

/* ── Desktop: wrappers sont transparents pour la mise en page ── */
.sol-header     { display: contents; }
.sol-body-inner { display: contents; }
.sol-chevron    { display: none; }

/* ── Orbit adapté mobile (< 640 px) ── */
@media (max-width: 639px) {
  /* Orbit plus compact pour tenir dans l'écran */
  .kg {
    height: 56vmin;
    min-height: 260px;
  }

  /* Pills node-1 : zone de tap agrandie */
  .kg li.node-1 > h2 {
    font-size: 13px;
    padding: 7px 13px;
  }
}