/* ------------------------------------------------------------------
   schema-core.css — le quatrième plan : la constellation et ses mots.
   Onze nœuds (huit neutres qui respirent, trois dorés : les passages,
   jamais légendés), des liens qui s'évanouissent aux deux bouts, un trajet
   à peine visible. Un seul texte dans le panneau, « Le Relevage ».
   Tel quel — sans script, ou sous prefers-reduced-motion — tout est entier et
   immobile, nœuds dorés allumés. Les particules et les réactions sont
   ajoutées par schema-flow.js ; l'entrée en scène par schema-scene.js.
   ------------------------------------------------------------------ */

.heart-wrap {
  position: relative;
}

/* « Le Relevage », précédé d'un point d'or qui pulse */
.heart-name {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 0,7 : 4,55:1 sur le verre — juste au-dessus du seuil AA, ne pas descendre */
  color: rgb(var(--gold-rgb) / 0.7);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

.heart-name::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgb(var(--gold-rgb) / 0.8);
}

/* Le SVG ignore le pointeur : son titre ne s'affiche jamais en infobulle */
.heart-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.heart-tall {
  display: none;
}

/* Les liens : 0,75 px, un dégradé qui s'évanouit aux bouts (stops posés par outils/coeur.py) */
.hl {
  fill: none;
  stroke-width: 0.75;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hl-mid { stop-color: rgb(var(--soft-rgb) / 0.22); }
.hl-end { stop-color: rgb(var(--soft-rgb) / 0.04); }

.heart-route {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hr-strong { stop-color: rgb(var(--gold-rgb) / 0.18); }
.hr-faint { stop-color: rgb(var(--gold-rgb) / 0.04); }

/* 0,45 au repos ; la respiration fait osciller cette même opacité entre 0,3 et 0,62 */
.ns {
  fill: var(--soft);
  opacity: 0.45;
}

/* Les trois passages : or, 0,85 au repos, un anneau fin autour */
.gnode {
  opacity: 0.85;
}

.ng {
  fill: var(--gold);
}

.ng-ring,
.ng-pulse {
  fill: none;
  stroke: rgb(var(--gold-rgb) / 0.3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ng-pulse {
  opacity: 0;
}

.particle {
  fill: var(--gold-bright);
}

/* --- Les trois passages, nommés sous le panneau, chacun à la verticale de son nœud --- */
.heart-steps {
  position: relative;
  height: 48px;
  color: var(--soft);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.hs {
  position: absolute;
  top: 28px;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 180ms ease-out;
}

/* Le trait de 20 px qui relie le mot à son nœud */
.hs::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 1px;
  height: 20px;
  background: rgb(var(--gold-rgb) / 0.2);
  /* --grow : posé par schema-scene.js pour dessiner le trait avec son nœud ; 1 sans script */
  transform: scaleY(var(--grow, 1));
  transform-origin: top;
}

.hs.is-lit {
  color: var(--gold-bright);
}

/* Les points médians dorés, à mi-chemin entre deux mots */
.heart-steps::before,
.heart-steps::after {
  content: "";
  position: absolute;
  top: 32px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold);
}

/* Positions en % du SVG large (640) : nœuds dorés à 168, 338 et 486 */
.hs-1 { left: 26.25%; }
.hs-2 { left: 52.8125%; }
.hs-3 { left: 75.9375%; }
.heart-steps::before { left: 39.53%; }
.heart-steps::after { left: 64.375%; }

/* --- Sous 768 px : le panneau pivote, les mots passent à droite de leur nœud --- */
@media (max-width: 767px) {
  .heart-wide {
    display: none;
  }

  .heart-tall {
    display: block;
  }

  .heart-steps {
    position: absolute;
    inset: 0;
    z-index: 2;
    height: auto;
  }

  .heart-steps::before,
  .heart-steps::after {
    content: none;
  }

  .hs {
    top: auto;
    padding-left: 26px;
    transform: translateY(-50%);
  }

  .hs::before {
    top: 50%;
    bottom: auto;
    left: 0;
    width: 20px;
    height: 1px;
    transform: scaleX(var(--grow, 1));
    transform-origin: left;
  }

  /* Positions en % du SVG haut (320 × 460) : nœuds à (92, 110), (128, 232), (88, 352) */
  .hs-1 { top: 23.913%; left: 31.25%; }
  .hs-2 { top: 50.435%; left: 42.5%; }
  .hs-3 { top: 76.522%; left: 30%; }
}

/* --- Respiration des nœuds neutres : chacun son rythme, jamais ensemble --- */
@media (prefers-reduced-motion: no-preference) {
  .ns {
    animation: node-breathe var(--breath) ease-in-out var(--lag) infinite alternate;
  }

  .ns-1 { --breath: 3.2s; --lag: -1.3s; }
  .ns-2 { --breath: 4.7s; --lag: -3.9s; }
  .ns-3 { --breath: 5.8s; --lag: -0.4s; }
  .ns-4 { --breath: 3.9s; --lag: -2.6s; }
  .ns-5 { --breath: 5.1s; --lag: -4.4s; }
  .ns-6 { --breath: 4.2s; --lag: -1.9s; }
  .ns-7 { --breath: 3.5s; --lag: -3.1s; }
  .ns-8 { --breath: 5.5s; --lag: -0.9s; }

  .heart-name::before {
    animation: breathe 2.6s ease-in-out infinite alternate;
  }
}

@keyframes node-breathe {
  from { opacity: 0.3; }
  to { opacity: 0.62; }
}

/* Sans mouvement, les trois passages restent allumés en permanence */
@media (prefers-reduced-motion: reduce) {
  .gnode {
    opacity: 1;
  }

  .hs {
    transition: none;
  }
}