/* ═══════════════════════════════════════════════════════════════
   WIREFRAME-GLOBE.CSS — Version scoped pour intégration hero
   Lignes orange (#e8703a) — rotation verticale uniquement (scaleX)
   ═══════════════════════════════════════════════════════════════ */

   .wg-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
}

.wg-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---------- Lignes de l'étoile 3D — orange ---------- */
.wg-line {
    fill: none;
    stroke: #e8703a;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.wg-line--solid {
    stroke: #e8703a;
}

.wg-line--dashed {
    stroke: rgba(232, 112, 58, 0.35);
}

/* ---------- Axes en pointillés ---------- */
.wg-axis {
    stroke: rgba(232, 112, 58, 0.35);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

/* ---------- Point central ---------- */
.wg-node-dot {
    fill: #2b2b2b;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.wg-node-dot.wg-visible { opacity: 1; }

/* ---------- Groupe méridiens — rotation verticale (scaleX) ----------
   IMPORTANT : ne PAS mettre transform-box: fill-box ici, sinon
   chaque ellipse du groupe pivote autour de sa propre boîte englobante
   (qui diffère entre elles) au lieu du centre commun du globe (320,320),
   ce qui casse l'alignement de l'axe. */
.wg-meridians ellipse {
    transform-origin: 320px 320px;
}

.wg-line--dashed {
  transform-origin: 320px 320px;
}

/* ---------- Pills labels ---------- */
.wg-pill {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 14px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.wg-pill.wg-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.wg-pill--gray {
    background: #b9b9b9;
    color: #1a1a1a;
}
.wg-pill--dark {
    background: #2b2b2b;
    color: #ffffff;
}
.wg-pill--accent {
    background: #ffffff;
    color: #1a1a1a;
    border: 1.5px solid #1a1a1a;
}

.wg-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
.wg-square {
    width: 7px; height: 7px;
    background: currentColor;
    flex-shrink: 0;
}

/* ---------- Positionnement des pills ---------- */
.wg-pill--top    { top: 9%;  left: 50%; }
.wg-pill--left   { top: 50%; left: 8%; }
.wg-pill--right  { top: 50%; left: 92%; }
.wg-pill--bottom { top: 91%; left: 50%; }

@media (max-width: 1080px) {
    .wg-stage { max-width: 360px; }
    .wg-pill { font-size: 9px; padding: 5px 10px; }
}