/* =====================================================================
   app.pavapi.com — le système solaire des coffres.
   ===================================================================== */

.solar-hero{padding:24px 0 56px; border-top:none;}
.solar-title{
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; letter-spacing:-0.02em;
  margin:0 0 20px; text-align:center;
}
.solar-sub{
  color:var(--paper-dim); font-size:1rem; line-height:1.7;
  max-width:56ch; margin:0 auto; text-align:center;
}

/* Le badge de galaxie vit maintenant juste au-dessus du champ de planètes,
   pas au-dessus du titre : c'est CE groupe de planètes qu'il nomme, pas la
   page entière. Marge haute et basse généreuses pour bien le détacher du
   texte d'intro et de la première planète. */
.galaxy-tag{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper-dim); margin:56px 0 8px;
}
/* La première galaxie n'a rien au-dessus d'elle que le header : la marge de
   56px, pensée pour détacher une galaxie de la précédente, n'a plus lieu
   d'être une fois qu'il n'y a plus de titre de page entre les deux. */
.galaxy:first-child .galaxy-tag{margin-top:28px;}
.galaxy-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold);}

/* Une phrase sous le badge : ce qui distingue cette galaxie des autres. Sans
   elle, « Galaxie EURO » ne dirait que la monnaie, pas pourquoi ses taux sont
   plus bas — et un visiteur lirait l'écart avec le dollar comme une
   contre-performance de pavapi plutôt que comme un écart de taux directeur. */
.galaxy-note{
  display:block; max-width:52ch; margin:0 auto; text-align:center;
  color:var(--paper-faint); font-size:.86rem; line-height:1.6;
}

/* ---------------------------------------------------------------------
   Approcher une galaxie
   L'en-tête est un bouton : cliquer sur la galaxie fait avancer la caméra,
   les planètes grossissent, leurs satellites de chaîne deviennent lisibles
   et chaque étiquette découvre son détail. Rien n'est agrandi comme une
   image — le canevas est redessiné à l'échelle, et les liens HTML sont
   replacés sur les corps peints à chaque image (voir `placeNode`, root.js).
   --------------------------------------------------------------------- */
.galaxy-head{
  display:block; width:100%; background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer;
  border-radius:14px; transition:background .2s;
}
.galaxy-head:hover{background:rgba(242,237,230,.025);}
.galaxy-head:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}
.galaxy-hint{
  display:block; margin:10px auto 0; text-align:center;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--copper); opacity:.75; transition:opacity .2s;
}
.galaxy-head:hover .galaxy-hint{opacity:1;}

.solar-stage.zoomed{overflow:hidden; cursor:grab;}
.solar-stage.zoomed:active{cursor:grabbing;}
/* Un liseré pendant qu'on est « dedans » : on doit voir d'un coup d'œil
   qu'on regarde une galaxie de près, et non que la page a changé. */
.solar-stage.zoomed{
  border-radius:16px;
  box-shadow:inset 0 0 0 1px var(--line), inset 0 0 90px -30px rgba(228,183,103,.28);
}
.stage-exit{
  position:absolute; z-index:3; top:14px; left:14px;
  font-family:var(--mono); font-size:.74rem; cursor:pointer;
  background:rgba(20,17,15,.86); backdrop-filter:blur(6px);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 14px; color:var(--paper-dim);
  animation:exit-in .3s ease both;
}
.stage-exit:hover{color:var(--paper); border-color:var(--gold);}
@keyframes exit-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

/* Le détail : masqué de loin, découvert de près. */
.asset-node .pn-detail{
  display:none; flex-direction:column; align-items:center; gap:5px; margin-top:4px;
  animation:detail-in .35s ease both;
}
.solar-stage.zoomed .asset-node .pn-detail{display:flex;}
@keyframes detail-in{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.asset-node .pn-top{
  font-size:clamp(.66rem, calc(var(--size,120px) * .0085), .78rem);
  color:var(--paper-dim);
}
.asset-node .pn-chains{display:flex; gap:5px; align-items:center;}
.asset-node .pn-chain{width:16px; height:16px; display:inline-flex;}
.asset-node .pn-chain .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.asset-node .pn-chain .logo-img.glyph{border-radius:0; object-fit:contain; background:none;}
.asset-node .pn-chain svg{width:100%; height:100%; color:var(--paper-dim);}
.asset-node .pn-chain .logo-init{font-family:var(--mono); font-size:.5rem; color:var(--paper-faint);}

/* `.galaxy` est une <section>, qui porte par défaut (app.css) 70px de
   padding et un filet en haut — pensés pour les sections d'une page de
   coffre, pas pour un champ de planètes collé sous le header. On repart de
   zéro ici, puis chaque galaxie SAUF la première regagne un filet : de quoi
   voir qu'on change de famille d'actifs avant même de lire le badge, sans
   que la première n'en porte un contre le header.

   Le padding HORIZONTAL, lui, reste : `#galaxies` n'est pas posé dans un
   `.wrap` comme le reste du site (la scène a besoin de toute la largeur
   disponible, jusqu'à 1600px), donc rien d'autre ne tient `.solar-stage` à
   distance du bord de la fenêtre. Sans cette marge, une planète tirée près
   du bord de l'ellipse (voir `sampleInEllipse`, root.js) vient carrément
   toucher le bord de l'ÉCRAN, pas seulement le bord de sa scène — le système
   entier a alors l'air posé de travers plutôt que centré, sur toute fenêtre
   plus étroite que 1600px, donc la plupart des écrans réels. */
.galaxy{padding:0 32px; border-top:none;}
.galaxy + .galaxy{border-top:1px solid var(--line); padding-top:8px;}

.solar-stage{
  position:relative; width:100%; max-width:1600px; aspect-ratio:16/10;
  /* Marges nettement plus généreuses de tous les côtés : les planètes et
     leurs libellés ont besoin d'air pour ne pas se lire comme un tableau
     compact — un vrai système solaire respire. */
  margin:24px auto 88px;
}
.solar-stage canvas{position:absolute; inset:0; width:100%; height:100%;}

.planet-node{
  position:absolute; left:var(--px); top:var(--py); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:inherit;
}
/* Zone de clic généreuse SANS toucher au positionnement : un `padding` +
   `margin` négatif égal semblait ne rien changer visuellement, mais un
   élément positionné en absolu place `left`/`top` sur le bord de la MARGE,
   pas du contenu — la marge négative décalait donc silencieusement l'étiquette
   de 14 px vers le haut-gauche par rapport au corps peint sur le canevas.
   Invisible sur bureau (planètes très espacées), flagrant sur mobile (grille
   serrée) : le texte semblait appartenir à la planète voisine. Un pseudo-
   élément agrandi ne participe pas au calcul de position de son parent. */
.planet-node::before{
  content:''; position:absolute; inset:-14px; border-radius:50%;
}
.planet-node:focus-visible{outline:2px solid var(--gold); outline-offset:6px;}

.asset-node{
  --c:#5FB0E0;
  /* `--i` (0,72 → 1,35) suit l'intensité posée par root.js : la même valeur
     qui éclaire le système sur le canevas fait aussi respirer son étiquette —
     plus l'APY est haut, plus le halo ET le texte sont lumineux. */
  --i:1;
  transition:transform .18s ease;
}
.asset-node:hover, .asset-node:focus-visible{transform:translate(-50%,-50%) scale(1.05);}
/* Boîte invisible : elle ne dessine rien (le canevas s'en charge), elle
   donne au lien sa taille et son centre. Calée sur l'étendue RÉELLE du
   système (`--span` = 2 R), pas sur `--size` qui n'échelonne que le texte. */
.asset-node .pn-body{
  width:var(--span,60px); height:var(--span,60px);
  border-radius:50%;
}
/* Le logo EST le corps : la sphère a disparu, les marchés lui tournent
   autour en satellites. Sur un système à neuf actifs, celui qu'on cherche
   se reconnaît ainsi au premier coup d'œil, avant même de lire un nom.
   Même marque que partout ailleurs sur le site (`markContent`, ui/logo.js)
   — logo réel, sinon la marque dessinée, jamais un disque vide — à
   l'échelle de son système : il grandit avec l'APY, comme l'étiquette. */
.asset-node .pn-emblem{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  /* `--body` est le diamètre que le canevas RÉSERVE au logo au centre du
     système (LOGO_FRACTION du rayon, voir ui/planet.js) — surtout pas
     `--size`, qui sert le texte sur une plage volontairement plus large
     pour rester lisible quand le système est petit (mobile, deux colonnes).
     Un logo calé sur le texte mordrait sur la première orbite. */
  width:var(--body,44px); height:var(--body,44px);
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 calc(7px * var(--i)) rgba(0,0,0,.55));
  pointer-events:none;
}
.asset-node .pn-emblem .logo-img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
}
/* Un logo « glyphe » (sans fond propre, ex. USDe) flotte dans le disque au
   lieu de le remplir — même distinction que partout ailleurs. */
.asset-node .pn-emblem .logo-img.glyph{
  width:76%; height:76%; margin:auto; border-radius:0; object-fit:contain;
  background:none; box-shadow:none;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.7));
}
.asset-node .pn-emblem .logo-init{
  font-family:var(--mono); font-weight:600; color:var(--paper);
  font-size:clamp(.6rem, calc(var(--size,120px) * .014), 1.1rem);
}
/* L'étiquette est posée en absolu depuis le centre du système, JUSTE sous
   ses orbites (`--reach`). En la laissant dans le flux, sa hauteur entrait
   dans le calcul du centre du lien et décalait tout ; et calée sur `--size`,
   elle flottait loin sous un petit système, au point de sembler appartenir
   au voisin sur la grille mobile. */
.asset-node .pn-info{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, calc(var(--reach,24px) + 12px));
  display:flex; flex-direction:column; align-items:center; gap:1px;
  pointer-events:none; white-space:nowrap;
  max-width:38vw;
}
/* Typographie proportionnelle à la taille de la planète (donc à son APY) :
   un rendement faible n'affiche plus le même corps de texte qu'un rendement
   qui domine tout le système. `clamp()` garde chaque ligne lisible même à la
   plus petite planète, et raisonnable même à la plus grande. */
.asset-node .pn-sym{
  font-family:var(--mono); color:var(--c);
  /* Le terme en `--size` ne joue presque aucun rôle : sur toute la plage
     réelle de `--size` (72–168px), il reste bien en dessous du plancher —
     `clamp()` retombe donc toujours sur ce plancher. Il est monté ici plutôt
     que retiré, pour qu'un système exceptionnellement grand continue de
     pouvoir dépasser le plancher un jour sans qu'on touche à nouveau ce
     fichier. */
  font-size:clamp(.92rem, calc(var(--size,120px) * .0125), 1.05rem);
  display:flex; align-items:center; gap:6px;
}
.asset-node .pn-sym .pn-dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);}
.asset-node .pn-sym .pn-icon{
  width:clamp(16px, calc(var(--size,120px) * .0125), 18px);
  height:clamp(16px, calc(var(--size,120px) * .0125), 18px);
  border-radius:50%; flex-shrink:0;
}
.asset-node .pn-apy{
  font-family:var(--mono); color:var(--gold); line-height:1.15;
  font-size:clamp(1.2rem, calc(var(--size,120px) * .02), 2.05rem);
  /* La lueur derrière le chiffre grandit avec `--i` : le meilleur rendement
     du système ne se contente pas d'être écrit plus gros, il brille plus. */
  text-shadow:0 0 calc(10px * var(--i)) rgba(228,183,103, calc(.22 * var(--i)));
}
.asset-node .pn-meta{
  color:var(--paper-faint);
  font-size:clamp(.72rem, calc(var(--size,120px) * .009), .82rem);
}
.asset-node .pn-go{
  color:var(--copper); opacity:0; transition:opacity .15s;
  font-size:clamp(.62rem, calc(var(--size,120px) * .009), .82rem);
  margin-top:2px;
}
.asset-node:hover .pn-go, .asset-node:focus-visible .pn-go{opacity:1;}

/* ---------------------------------------------------------------------
   Mobile (≤640px) : les systèmes (logo + orbites) sont dessinés sur le
   canevas exactement comme sur grand écran — voir root.js pour la
   disposition « grille agitée » qui garantit l'absence de chevauchement
   même sur un plateau étroit. Seuls les réglages de mise en page changent
   ici : un plateau plus haut que large (`aspect-ratio` posé dynamiquement
   par root.js) et une étiquette un peu plus contrainte en largeur pour
   laisser chaque colonne respirer.
   --------------------------------------------------------------------- */
@media(max-width:640px){
  .galaxy{ padding:0 18px; }
  .solar-stage{ max-width:100%; margin:24px auto 56px; }
  /* Le nom et le rendement sont ce qu'on doit pouvoir lire d'un coup d'œil
     sur un téléphone — davantage de place et un corps de texte nettement
     plus grand que sur bureau, où l'œil est plus proche de l'écran. */
  .asset-node .pn-info{ max-width:36vw; }
  .asset-node .pn-sym{ font-size:.95rem; gap:6px; }
  .asset-node .pn-sym .pn-icon{ width:17px; height:17px; }
  .asset-node .pn-apy{ font-size:1.2rem; }
  .asset-node .pn-meta{ font-size:.68rem; }
}

/* ---------- pastille planète (miniature) pour les tableaux/listes ---------- */
.mini-planet{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 32% 28%, var(--c), rgba(0,0,0,.6) 72%);
  box-shadow:0 0 0 1px rgba(242,237,230,.12), 0 0 16px -4px var(--c);
}