/* =====================================================================
   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;
}

/* ---------------------------------------------------------------------
   En-tête de galaxie
   Un simple bandeau, pas un bouton : il n'y a plus de caméra à déclencher,
   chaque planète est déjà son propre lien vers son coffre.
   --------------------------------------------------------------------- */
.galaxy-head{ display:block; width:100%; }

/* Le détail : masqué au repos, découvert au survol ou au focus clavier —
   le remplaçant léger de l'ancien zoom, sans caméra ni geste à apprendre. */
.asset-node .pn-detail{
  display:none; flex-direction:column; align-items:center; gap:5px; margin-top:4px;
  animation:detail-in .35s ease both;
}
.asset-node:hover .pn-detail, .asset-node:focus-visible .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;}

/* `.galaxy-scene` porte le centrage et la largeur maximale que `.solar-stage`
   portait seul avant l'arrivée du bot : la scène ET le vaisseau doivent
   grandir et se centrer ensemble, pas l'un sans l'autre. */
.galaxy-scene{
  position:relative; display:flex; align-items:stretch; gap:28px;
  width:100%; max-width:1600px; margin:24px auto 88px;
}
.solar-stage{
  position:relative; flex:1 1 auto; min-width:0; aspect-ratio:16/10;
}
.solar-stage canvas{position:absolute; inset:0; width:100%; height:100%;}
/* Page de dépôt d'un bot (bot.js) : une scène sans corps ni canevas — le
   bot n'y tient jamais qu'UN actif à la fois, affiché en texte dans `.gbot`
   plutôt qu'en planète. Une lueur douce, à la teinte de l'actif tenu
   (`--asset`, mis à jour par `renderDepositTarget`), évite que la scène ne
   paraisse vide plutôt que délibérément sobre. */
html[data-galaxy] .solar-stage{
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--asset,#E4B767) 16%, transparent), transparent 68%);
}

/* ---------------------------------------------------------------------
   Le bot de dépôt — un panneau texte à côté de la scène, et un vaisseau qui
   vole EN PERMANENCE au-dessus de la planète qu'il tient, posé DANS le
   `.solar-stage` pour partager le système de coordonnées des planètes
   (`--px`/`--py`, voir `placeNode` dans root.js et `positionShip` dans
   ui/galaxybot.js). `left`/`top` transitionnent (le trajet, aussi rare qu'il
   ait lieu, quand le bot bascule de planète) ; `gbot-hover` fait le survol
   continu par-dessus, sur `transform` — les deux animations ne se marchent
   jamais dessus, chacune sa propriété.
   --------------------------------------------------------------------- */
.gbot-shipfloat{
  position:absolute; z-index:3; left:50%; top:50%;
  width:46px; height:46px; margin-left:-23px; margin-top:-23px;
  color:var(--gold); opacity:0; pointer-events:none;
  filter:drop-shadow(0 0 12px currentColor);
  transition:left .9s cubic-bezier(.3,.6,.2,1), top .9s cubic-bezier(.3,.6,.2,1);
}
.gbot-shipfloat svg{width:100%; height:100%;}
/* Deux animations, deux propriétés : `gbot-hover` fait voler le vaisseau
   (transform), `gbot-blink` le fait clignoter (opacity) — jamais la même
   image-clé pour les deux, sans quoi l'une écraserait l'autre. */
.gbot-shipfloat.on{animation:gbot-hover 3.6s ease-in-out infinite, gbot-blink 1.1s ease-in-out infinite;}
.gbot-shipfloat.paused{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){ .gbot-shipfloat.on{animation:gbot-hover-still 0s forwards;} }
@keyframes gbot-hover-still{ to{ opacity:1; transform:translate(calc(-50% + var(--off-x,30px)), calc(-50% + var(--off-y,-16px))); } }
@keyframes gbot-hover{
  0%,100%{transform:translate(calc(-50% + var(--off-x,30px)), calc(-50% + var(--off-y,-16px))) rotate(-7deg);}
  50%{transform:translate(calc(-50% + var(--off-x,30px)), calc(-50% + var(--off-y,-22px))) rotate(7deg);}
}
@keyframes gbot-blink{
  0%,100%{opacity:1;}
  50%{opacity:.45;}
}

.gbot{
  position:relative; z-index:1; flex:0 0 240px; align-self:center;
  display:flex; flex-direction:column; gap:12px;
  padding:18px; border:1px solid var(--line-strong); border-radius:16px;
  background:rgba(20,17,15,.55); backdrop-filter:blur(6px);
}
.gbot-head{display:flex; align-items:center; gap:10px;}
.gbot-ship{
  width:34px; height:34px; flex-shrink:0; color:var(--gold);
  filter:drop-shadow(0 0 8px rgba(228,183,103,.5));
}
.gbot-ship svg{width:100%; height:100%;}
.gbot-title{display:flex; flex-direction:column; gap:2px; min-width:0;}
.gbot-title b{font-size:.88rem;}
.gbot-sim{font-family:var(--mono); font-size:.62rem; letter-spacing:.03em; color:var(--paper-faint);}

.gbot-position{display:flex; align-items:center; gap:10px; min-height:32px;}
.gbot-position .faint{font-size:.8rem; color:var(--paper-faint);}
.gbot-mark{
  width:30px; height:30px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, var(--c), rgba(0,0,0,.62) 72%);
  box-shadow:0 0 0 1px rgba(242,237,230,.14), 0 0 12px -3px var(--c);
}
.gbot-mark .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.gbot-mark .logo-img.glyph{width:70%; height:70%; border-radius:0; object-fit:contain; background:none;}
.gbot-what{display:flex; flex-direction:column; gap:1px; font-size:.78rem; min-width:0;}
.gbot-what b{font-size:.86rem;}
.gbot-apy{font-family:var(--mono); color:var(--gold); font-size:.82rem;}

/* Mène à la même page qu'un clic sur la planète tenue (voir root.js) : le
   vrai dépôt, pas simulé, se fait là — ce bouton n'est qu'un raccourci. */
.gbot-deposit-btn{
  display:block; width:100%; text-align:center; box-sizing:border-box;
  padding:9px 14px; font-size:.82rem;
}

.gbot-reason{
  margin:0; font-size:.74rem; line-height:1.5; color:var(--paper-dim);
}

.gbot-fees{display:flex; flex-direction:column; gap:6px;}
.gbot-fees-lbl{font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--paper-faint); text-transform:uppercase;}
.gbot-fees-row{display:flex; flex-wrap:wrap; gap:6px;}
.gbot-fee{
  display:flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.66rem; color:var(--paper-dim);
  border:1px solid var(--line); border-radius:999px; padding:3px 8px 3px 3px;
}
.gbot-fee .logo-img, .gbot-fee svg{width:14px; height:14px; border-radius:50%;}
.gbot-fee.live{border-color:rgba(228,183,103,.4);}
.gbot-fee.live b{color:var(--gold);}

@media(max-width:900px){
  .galaxy-scene{flex-direction:column;}
  .solar-stage{aspect-ratio:16/10;}
  .gbot{flex-basis:auto; align-self:stretch;}
}

.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; }
  .galaxy-scene{ 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);
}