/* =====================================================================
   pavapi — feuille de style unique.
   Organisation : jetons → base → primitives → sections → composants.
   Aucune couleur en dur hors de la palette : tout passe par une variable.
   ===================================================================== */

/* ---------- 1. jetons ---------- */
:root{
  --ink:#14110F;
  --surface:#1C1815;
  --surface-2:#241F1A;
  --surface-3:#2C261F;
  --copper:#C97A3D;
  --gold:#E4B767;
  --teal:#4FA8A0;
  --usdc:#5FB0E0;
  /* Couleur de l'actif de la page, posée au démarrage depuis core/assets.js.
     La valeur ici n'est qu'un repli si le script ne tourne pas. */
  --asset:#5FB0E0;
  --paper:#F2EDE6;
  --paper-dim:#B0A79A;
  --paper-faint:#786F63;
  --line:rgba(242,237,230,0.10);
  --line-strong:rgba(242,237,230,0.20);
  --danger:#C1594A;
  --warn:#E4B767;
  --ok:#7ED6A5;
  --radius:10px;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box;}
/* Toute piste de grille destinée à du contenu est déclarée `minmax(0,…)`.
   Sans ce zéro explicite, une piste ne peut pas descendre sous la largeur
   min-content de son contenu et pousse la page en débordement horizontal —
   c'est la cause n°1 de casse sur mobile dans ce fichier. */
/* Une règle d'auteur avec `display` bat la feuille par défaut du navigateur :
   sans ceci, tout élément stylé en flex resterait visible malgré `hidden`. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Inter', system-ui, sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:500; letter-spacing:-0.015em;}
h2{font-size:clamp(1.6rem,3vw,2.15rem); margin:0 0 12px;}
h3{font-size:1.02rem; margin:0 0 6px;}
p{margin:0 0 10px;}
a{color:inherit;}
img,svg,canvas{display:block; max-width:100%;}
::selection{background:var(--copper); color:var(--ink);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}
.mono{font-family:var(--mono);}
.wrap{max-width:1220px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){ .wrap{padding:0 18px;} }
section{padding:70px 0; border-top:1px solid var(--line);}
.section-head{max-width:70ch; margin-bottom:34px;}
.section-head p{color:var(--paper-dim); font-size:0.95rem;}
.ta-r{text-align:right;}
.dim{color:var(--paper-dim);}
.faint{color:var(--paper-faint);}
.apy{color:var(--gold);}
.pos{color:var(--ok);}
.neg{color:var(--danger);}

/* ---------- 3. primitives ---------- */
.btn{
  font:500 0.9rem/1 'Inter',sans-serif; border:none; border-radius:8px; cursor:pointer;
  padding:12px 20px; transition:transform .12s, background .15s, border-color .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
}
.btn:active{transform:scale(.975);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--copper); color:var(--ink);}
.btn-primary:hover:not(:disabled){background:var(--gold);}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--paper-dim);}
.btn-wallet{background:var(--surface-2); color:var(--paper); border:1px solid var(--line-strong); font-family:var(--mono); font-size:.8rem; padding:9px 14px;}
.btn-cta{width:100%; padding:15px; font-size:.98rem; margin-top:14px;}
.pill{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); border-radius:999px; padding:3px 10px; font-size:.72rem; font-family:var(--mono);}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tag{display:inline-block; font-size:.66rem; font-family:var(--mono); border:1px solid var(--line-strong); border-radius:4px; padding:1px 5px; color:var(--paper-faint); white-space:nowrap;}
.tag.ok{color:var(--ok); border-color:rgba(126,214,165,.35);}
.tag.warn{color:var(--warn); border-color:rgba(228,183,103,.35);}
.tag.err{color:var(--danger); border-color:rgba(193,89,74,.4);}
/* Nature du rendement : prêter et staker ne sont pas la même chose, et la
   couleur le dit avant la lecture — bleu pour le prêt (une contrepartie
   emprunteuse en face), doré pour le staking (le protocole lui-même). */
.tag.kind-lending{color:#8FB8E8; border-color:rgba(143,184,232,.35);}
.tag.kind-staking{color:#D9B36A; border-color:rgba(217,179,106,.35);}
.tag.kind-unknown{color:var(--paper-faint);}

/* ---------- 4. nav ---------- */
/* La barre reste transparente tant qu'on n'a pas défilé — comme sur
   pavapi.com — puis se pose (fond, bordure) une fois `.scrolled` posée par
   le script de la page. Même hauteur que la vitrine (76px) pour que la
   bascule entre les deux domaines ne se voie pas au pixel près. */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(20,17,15,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
header.scrolled{background:rgba(20,17,15,.92); border-bottom-color:var(--line);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; flex-wrap:nowrap; min-width:0;}
.logo{display:flex; align-items:center; gap:9px; font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; text-decoration:none; flex-shrink:0;}
.logo .mark{width:24px;height:24px;flex-shrink:0;}
.logo-api{color:var(--gold);}
.logo-asset{font-family:var(--mono); font-size:.62rem; color:var(--asset); border:1px solid currentColor; border-radius:4px; padding:1px 5px; letter-spacing:.04em; opacity:.85;}
/* `flex-shrink:0` + `white-space:nowrap` sur ces trois blocs : sans eux, le
   sélecteur d'actif n'est pas seul à céder de la place quand la barre est
   trop étroite — le navigateur rétrécit aussi les liens et le badge « flux »,
   qui se mettent à passer à la ligne (texte cassé en plein milieu du header)
   au lieu que ce soit le sélecteur, seul prévu pour défiler, qui absorbe
   l'écart. */
.navlinks{display:flex; gap:26px; font-size:.86rem; color:var(--paper-dim); flex-shrink:0;}
.navlinks a{text-decoration:none; white-space:nowrap;} .navlinks a:hover{color:var(--paper);}
@media(max-width:1000px){ .navlinks{display:none;} }
.nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.live-pill{display:flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-family:var(--mono); font-size:.72rem; color:var(--paper-dim); cursor:pointer; white-space:nowrap;}
.live-pill:hover{border-color:var(--line-strong); color:var(--paper);}
@media(max-width:620px){ .live-pill{display:none;} }

/* ---------- 4b. sélecteur d'actif ---------- */
/* La liste des actifs est trop longue pour tenir dans la barre (huit jetons
   et plus à venir) : plutôt qu'un défilement manuel, un carrousel tourne
   tout seul, sans fin — la piste (`.as-track`) contient la liste dupliquée
   une fois et glisse en boucle de 0 à −50% de sa largeur ; comme les deux
   moitiés sont identiques, la boucle ne se voit pas. Le survol/focus met
   l'animation en pause pour rester cliquable sans viser une cible mobile. */
.asset-switch{
  display:flex; background:var(--surface-2); border-radius:8px; padding:3px;
  /* `flex:1 1 auto` + `min-width:0` : sans eux, un enfant flex ne peut pas
     descendre sous la largeur min-content de son contenu — le sélecteur
     pousserait alors toute la barre, et la page entière, en débordement
     horizontal. C'est aussi le SEUL bloc de la nav qui doit céder : les
     trois autres portent `flex-shrink:0` pour ne jamais passer à la ligne. */
  flex:1 1 auto; min-width:0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.as-track{
  display:flex; gap:4px; width:max-content;
  animation:as-scroll var(--as-dur,30s) linear infinite;
}
.asset-switch:hover .as-track, .asset-switch:focus-within .as-track{animation-play-state:paused;}
@keyframes as-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-1 * var(--as-w,50%)));}
}
@media(prefers-reduced-motion:reduce){ .as-track{animation:none;} }
.asset-switch a{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.02em; text-decoration:none;
  color:var(--paper-faint); padding:6px 12px; border-radius:6px; transition:color .15s, background .15s;
  flex-shrink:0;
}
.as-icon{width:16px; height:16px; border-radius:50%; flex-shrink:0;}
.asset-switch a:hover{color:var(--paper);}
.asset-switch a.on{background:var(--surface-3); color:var(--c, var(--paper));}
@media(max-width:560px){
  /* Sur mobile, la barre porte trois blocs : logo, sélecteur d'actif, compte.
     Le badge de l'actif dans le logo fait doublon avec le sélecteur — on le
     retire plutôt que de rétrécir tout le reste jusqu'à l'illisible. */
  .logo-asset{display:none;}
  .logo{font-size:1.05rem; flex-shrink:0;}
  .asset-switch{flex:1 1 auto; max-width:52vw;}
  .asset-switch a{padding:6px 8px; font-size:.72rem;}
  nav.wrap{gap:10px;}
  .btn-wallet{padding:8px 10px; font-size:.72rem; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}

.asset-notice{
  border:1px solid rgba(228,183,103,.3); border-left-width:3px; border-radius:8px;
  background:rgba(228,183,103,.06); color:var(--paper-dim);
  padding:14px 18px; font-size:.85rem; line-height:1.65; margin-bottom:24px;
}

/* ---------- 5. hero ---------- */
.hero{padding:76px 0 56px; border-top:none;}
/* `minmax(0,…)` est indispensable : sans lui, une piste de grille ne peut pas
   descendre sous la largeur min-content de son contenu, et la colonne pousse
   la page en débordement horizontal sur mobile. */
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:52px; align-items:center;}
@media(max-width:920px){ .hero-grid{grid-template-columns:minmax(0,1fr); gap:36px;} }
.eyebrow{color:var(--copper); font-family:var(--mono); font-size:.82rem; margin-bottom:16px;}
.hero-head{font-size:clamp(2.1rem,4.4vw,3.15rem); line-height:1.08; margin:0 0 20px; max-width:19ch;}
.hero-head .hl{color:var(--asset);}
.hero-sub{color:var(--paper-dim); font-size:1.02rem; max-width:56ch; margin-bottom:28px;}
.hero-sub b{color:var(--paper);}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;}
.hero-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px; max-width:640px;}
@media(min-width:700px){ .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));} }
.hero-stats .stat .num{font-family:var(--mono); font-size:1.35rem;}
.hero-stats .stat .label{font-size:.76rem; color:var(--paper-faint); margin-top:2px; max-width:20ch;}
.hero-side{display:flex; flex-direction:column; align-items:center; gap:12px;}
/* Le logo de l'actif au centre, ses marchés en orbite autour (canevas).
   Le logo reste un élément HTML plutôt qu'une image dessinée dans le
   canevas : vectoriel, net à toute résolution, et les orbites sont
   calculées pour ne jamais passer dessous (voir LOGO_FRACTION, ui/planet.js). */
.vault-orbit{position:relative; width:100%; max-width:260px; display:flex;}
@media(min-width:921px){
  /* Sur bureau, la colonne dédiée à la planète (.hero-side, ~.85fr de la
     grille) laisse largement plus de place que 260px : le plafond mobile,
     repris tel quel, ne servait qu'à faire paraître le coffre minuscule. */
  .vault-orbit{max-width:420px;}
}
.vault-visual{width:100%; aspect-ratio:1/1; touch-action:none;}
.vault-emblem{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  /* 2 × LOGO_FRACTION (0,36) × le rayon du système (0,40 du côté du canevas
     carré) = 28,8 % de sa largeur : exactement la place que le canevas
     laisse libre au centre. */
  width:28.8%; height:28.8%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.vault-emblem .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.vault-emblem .logo-img.glyph{
  width:76%; height:76%; margin:auto; border-radius:0; object-fit:contain;
  background:none; filter:drop-shadow(0 0 4px rgba(0,0,0,.7));
}
.vault-emblem .logo-init{font-family:var(--mono); font-weight:600; font-size:1.1rem; color:var(--paper);}
/* Deux repères sous le système : l'actif du coffre (fixe) et la chaîne du
   placement courant (change avec lui). Même langage que les satellites en
   orbite et les lignes du classement, pour que le site reste homogène. */
.hero-logos{display:flex; gap:9px; justify-content:center; flex-wrap:wrap;}
.hl-chip{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.74rem; color:var(--paper-dim);
  border:1px solid var(--line-strong); border-radius:999px; padding:4px 13px 4px 4px;
  background:rgba(28,24,21,.6);
  transition:border-color .18s, background .18s;
}
.hl-chip:hover{border-color:rgba(242,237,230,.32); background:rgba(28,24,21,.85);}
/* La marque : icône dessinée si on en a une pour cette entité, sinon ses
   initiales — voir ui/logo.js. Toujours le même disque dégradé que les
   points sur la planète et les lignes du classement (.lb-dot en hérite) :
   même lumière décentrée, même halo — la marque EST une mini-planète, pas
   une pastille plaquée dessus. */
.logo-mark{
  width:23px; height:23px; border-radius:50%; flex-shrink:0;
  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 14px -3px var(--c);
  color:var(--paper);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hl-chip:hover .logo-mark{transform:scale(1.14); box-shadow:0 0 0 1px rgba(242,237,230,.24), 0 0 20px -2px var(--c);}
/* Le trait de l'icône respire la même lumière que le limbe des planètes —
   une lueur douce plutôt qu'un pictogramme plat. */
.logo-mark svg, .lb-dot svg{filter:drop-shadow(0 0 2.5px currentColor);}
.logo-mark svg [stroke], .lb-dot svg [stroke]{stroke-linecap:round; stroke-linejoin:round;}
/* Le logo réel (voir ui/logo.js) : servi tel quel, détouré en disque pour
   qu'un logo sur fond carré — la plupart des logos de protocoles — reste une
   mini-planète comme les autres. Il remplit le disque plutôt que d'y flotter,
   sinon les marques colorées paraîtraient deux fois plus petites que les
   pictogrammes monochromes qu'elles remplacent. */
.logo-img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block; background:rgba(0,0,0,.25);
}
/* Un glyphe de chaîne n'a pas de fond à lui : il se pose dans le disque,
   à la même taille que le pictogramme dessiné qu'il remplace, et garde la
   même lueur douce que le limbe des planètes. */
.logo-img.glyph{
  width:70%; height:70%; border-radius:0; object-fit:contain;
  background:none; filter:drop-shadow(0 0 2.5px rgba(0,0,0,.55));
}
.tag .logo-cell .logo-img{background:none;}
.logo-init{font-family:var(--mono); font-weight:600; font-size:.6rem; letter-spacing:-.02em;}
.vault-caption{text-align:center;}
.vault-venue{font-size:.85rem; color:var(--paper-dim); margin-bottom:2px; min-height:1.3em;}
.vault-apy{font-size:2rem; color:var(--gold); line-height:1;}
.vault-lbl{font-size:.76rem; color:var(--paper-faint); margin-top:4px;}

.vault-swap{
  display:flex; justify-content:center; gap:1px; margin-bottom:14px;
  background:var(--line); border:1px solid var(--line); border-radius:999px; overflow:hidden;
  width:fit-content; margin-inline:auto;
}
.vault-swap-btn{
  border:none; background:var(--surface); color:var(--paper-dim); cursor:pointer;
  font-family:var(--mono); font-size:.72rem; padding:7px 16px; transition:background .15s,color .15s;
}
.vault-swap-btn.is-active{background:var(--gold); color:#14110F;}
.vault-swap-btn:not(.is-active):hover{color:var(--paper);}

/* ---------- 6. coffre / dépôt ---------- */
.dash{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:14px; margin-bottom:26px;}
.dash-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden;}
.dash-card .label{font-size:.74rem; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.06em;}
.dash-card .value{font-family:var(--mono); font-size:1.5rem; margin:6px 0 3px;}
.dash-card .sub{font-size:.76rem; color:var(--paper-dim);}
.dash-card .micro{font-size:.82rem; color:var(--paper-faint); letter-spacing:.02em;}
.dash-card .micro::before{content:'…';}
.dash-card.accent{border-color:rgba(228,183,103,.28);}
.deposit-panel{display:flex; justify-content:center;}
.deposit-form{width:100%; max-width:440px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.mode-switch{display:flex; gap:6px; background:var(--surface-2); border-radius:8px; padding:4px; margin-bottom:18px;}
.mode-btn{flex:1; background:transparent; border:none; color:var(--paper-dim); font:500 .86rem 'Inter',sans-serif; padding:9px; border-radius:6px; cursor:pointer;}
.mode-btn.active{background:var(--surface-3); color:var(--paper);}
.field-label{display:block; font-size:.76rem; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;}
.amount-row{display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:4px 14px; transition:border-color .15s;}
.amount-row:focus-within{border-color:var(--copper);}
.amount-row.error{border-color:var(--danger);}
.amount-row input{flex:1; background:none; border:none; color:var(--paper); font-family:var(--mono); font-size:1.5rem; padding:12px 0; width:100%;}
.amount-row input:focus{outline:none;}
.amount-row input::-webkit-outer-spin-button,.amount-row input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.token-pill{font-family:var(--mono); font-size:.82rem; color:var(--asset); border:1px solid currentColor; border-radius:6px; padding:4px 9px; opacity:.9;}
.preset-chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;}
.preset-chips button{background:var(--surface-2); border:1px solid var(--line); color:var(--paper-dim); font-family:var(--mono); font-size:.76rem; padding:6px 11px; border-radius:6px; cursor:pointer;}
.preset-chips button:hover{border-color:var(--line-strong); color:var(--paper);}
.wallet-avail{font-size:.78rem; color:var(--paper-dim); margin:12px 0 0;}
.trust-line{font-size:.75rem; color:var(--paper-faint); margin:12px 0 0; line-height:1.55;}

/* ---------- 6b. classement des rendements ---------- */
.lb-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.lb-row{
  display:grid; grid-template-columns:28px 32px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:15px 18px; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line); transition:background .12s;
}
.lb-row:last-child{border-bottom:none;}
.lb-row:hover{background:rgba(242,237,230,.03);}
.lb-row.current{background:rgba(228,183,103,.06);}
.lb-rank{font-family:var(--mono); color:var(--paper-faint); font-size:.85rem; text-align:center;}
.lb-row:nth-child(1) .lb-rank{color:var(--gold);}
.lb-dot{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--paper);
  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,.12), 0 0 14px -3px var(--c);
  transition:transform .18s ease, box-shadow .18s ease;
}
.lb-row:hover .lb-dot{transform:scale(1.1); box-shadow:0 0 0 1px rgba(242,237,230,.22), 0 0 20px -2px var(--c);}
.lb-dot .logo-init{font-size:.68rem;}
.lb-name{display:flex; flex-direction:column; gap:2px; min-width:0;}
.lb-proto{font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-tag{font-family:var(--mono); font-size:.64rem; color:var(--gold); border:1px solid rgba(228,183,103,.4); border-radius:4px; padding:1px 5px; margin-left:6px;}
.lb-sub{font-size:.76rem; color:var(--paper-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Le logo de la chaîne dans la ligne du classement : même gabarit que la
   pastille du comparateur, aligné sur la ligne de texte. */
.lb-chain{display:inline-flex; align-items:center; gap:4px;}
/* Nature du rendement et conditions de sortie, sur la même ligne que le
   marché : un taux sans ces deux mentions ne se compare pas honnêtement. */
.lb-terms{color:var(--paper-faint);}
.lb-note{font-size:.76rem; line-height:1.6; color:var(--paper-faint); margin:10px 2px 0;}
.lb-terms.locked{color:var(--warn);}
.lb-chain-mark{width:13px; height:13px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;}
.lb-chain-mark .logo-img{width:100%; height:100%;}
.lb-chain-mark .logo-img.glyph{filter:none;}
.lb-apy{font-family:var(--mono); font-size:1.35rem; color:var(--gold); white-space:nowrap;}
.lb-pct{font-size:.85rem; color:var(--paper-faint); margin-left:1px;}
.lb-empty{color:var(--paper-dim); font-size:.9rem; padding:24px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius);}
/* La suite du classement : même liste, simplement repliée. `display:flex` sur
   .lb-list l'emporterait sur l'attribut `hidden` — il faut le dire. */
.lb-list[hidden]{display:none;}
.lb-rest{border-top:none; border-radius:0 0 var(--radius) var(--radius); margin-top:-1px;}
.lb-expand{
  display:block; width:100%; margin-top:10px; padding:10px 14px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--copper); background:none; cursor:pointer;
  border:1px dashed var(--line); border-radius:var(--radius);
  transition:color .15s, border-color .15s;
}
.lb-expand:hover{color:var(--gold); border-color:rgba(228,183,103,.45);}
.lb-foot{display:flex; justify-content:center; align-items:center; margin-top:16px; font-size:.85rem;}
.lb-more{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em; white-space:nowrap;
  color:var(--paper-dim); background:none; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  transition:color .15s, border-color .15s;
}
.lb-more:hover{color:var(--paper); border-color:var(--line-strong);}
@media(max-width:560px){
  .lb-row{grid-template-columns:22px 30px minmax(0,1fr) auto; gap:10px; padding:13px 14px;}
  .lb-apy{font-size:1.15rem;}
}

/* ---------- 6c. « en savoir plus » — disclosure repliée par défaut ---------- */
.more-group{margin-top:8px;}
.more-block{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:10px; overflow:hidden;}
.more-block > summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; font-size:.95rem; color:var(--paper);
}
.more-block > summary::-webkit-details-marker{display:none;}
.more-block > summary .mb-arrow{color:var(--paper-faint); transition:transform .18s; font-size:.8rem;}
.more-block[open] > summary .mb-arrow{transform:rotate(90deg);}
.more-block > summary:hover{background:rgba(242,237,230,.02);}
.more-block-body{padding:0 22px 26px;}
.more-intro{padding:24px 0 4px; text-align:center;}
.more-intro h2{font-size:1.3rem; margin-bottom:6px;}
.more-intro p{color:var(--paper-faint); font-size:.85rem; max-width:56ch; margin:0 auto;}

/* ---------- 7. graphique ---------- */
.chart-toolbar{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:12px;}
.tabs{display:flex; gap:5px; background:var(--surface-2); border-radius:8px; padding:4px; max-width:100%; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{background:transparent; border:none; color:var(--paper-dim); font:500 .8rem 'Inter',sans-serif; padding:7px 13px; border-radius:6px; cursor:pointer; white-space:nowrap;}
.tabs button.active{background:var(--surface-3); color:var(--paper);}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem;}
.legend button{display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--paper-dim); cursor:pointer; font-size:.78rem; padding:2px 0;}
.legend button.off{opacity:.35; text-decoration:line-through;}
.legend i{width:14px; height:2.5px; border-radius:2px; display:block;}
.legend i.dashed{background-image:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px);}
.chart-frame{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 6px 4px; height:340px;}
.chart-foot{margin-top:12px; font-size:.78rem; color:var(--paper-faint); display:flex; gap:20px; flex-wrap:wrap;}

/* ---------- 7b. repères ---------- */
.bench-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
.bench-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line);}
.bench-lbl{font-size:.72rem; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.06em;}
.bench-venue{font-size:1.05rem; margin-top:4px;}
.bench-apy{font-size:2rem; color:var(--gold); line-height:1;}
.bench-verdict{margin:16px 0 20px; font-size:.88rem; line-height:1.6; border-left:2px solid var(--ok); padding-left:12px; color:var(--paper-dim);}
.bench-verdict.warn{border-left-color:var(--warn);}
.bench-verdict b{color:var(--paper);}
.bench-rows{display:flex; flex-direction:column;}
.bench-row{display:grid; grid-template-columns:10px minmax(0,1fr) auto 84px 78px; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line);}
.bench-row:last-child{border-bottom:none;}
.bench-dot{width:9px; height:9px; border-radius:50%;}
.bench-name{font-size:.88rem; min-width:0;}
.bench-name .why{font-size:.73rem; color:var(--paper-faint); line-height:1.45; margin-top:2px;}
.bench-meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; font-size:.7rem;}
.bench-val{text-align:right; font-size:.95rem;}
.bench-delta{text-align:right; font-size:.88rem;}
@media(max-width:760px){
  .bench-row{grid-template-columns:10px minmax(0,1fr) 74px;}
  .bench-meta{display:none;}
  .bench-delta{grid-column:2/4; text-align:left; padding-left:0;}
}

/* ---------- 8. moteur ---------- */
.engine{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
.eng-flow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; align-items:center;}
@media(max-width:760px){ .eng-flow{grid-template-columns:minmax(0,1fr);} .eng-arrow{transform:rotate(90deg);} }
.eng-node{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px;}
.eng-node .lbl{font-size:.72rem; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
.eng-node .val{font-size:.98rem;}
.eng-arrow{color:var(--paper-faint); font-size:1.3rem; text-align:center;}
.eng-state{display:inline-flex; align-items:center; gap:7px; margin-top:18px; border-radius:999px; padding:6px 14px; font-size:.82rem; font-family:var(--mono); border:1px solid var(--line-strong); color:var(--paper-dim);}
.eng-state.optimal{color:var(--ok); border-color:rgba(126,214,165,.4);}
.eng-state.arming,.eng-state.holding{color:var(--gold); border-color:rgba(228,183,103,.4);}
.eng-state.blocked,.eng-state.degraded{color:var(--danger); border-color:rgba(193,89,74,.4);}
.eng-why{margin-top:12px; font-size:.86rem; color:var(--paper-dim); max-width:80ch; line-height:1.65; border-left:2px solid var(--line-strong); padding-left:12px;}
.eng-meter{margin:20px 0 6px;}
.eng-meter-track{height:6px; background:var(--surface-3); border-radius:3px; overflow:hidden;}
.eng-meter-fill{height:100%; background:linear-gradient(90deg,var(--copper),var(--gold)); border-radius:3px; transition:width .5s cubic-bezier(.4,0,.2,1);}
.eng-meter-cap{font-size:.76rem; color:var(--paper-faint); margin-top:6px;}
.eng-params{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.eng-chip{font-size:.72rem; font-family:var(--mono); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:5px 10px; color:var(--paper-faint);}
.eng-chip b{color:var(--paper); font-weight:500;}
.eng-log-head{margin-top:26px; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--paper-faint); border-bottom:1px solid var(--line); padding-bottom:8px;}
.eng-log-row{display:grid; grid-template-columns:110px minmax(0,1fr) 80px; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.82rem; align-items:baseline;}
.eng-log-why{grid-column:1/-1; font-size:.75rem; color:var(--paper-faint); margin-top:-4px;}
@media(max-width:640px){ .eng-log-row{grid-template-columns:1fr;} }

/* ---------- 9. marchés ---------- */
.market-toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
.market-toolbar input[type=search]{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; color:var(--paper); font-size:.85rem; padding:9px 13px; min-width:220px; font-family:'Inter',sans-serif;}
.market-toolbar input[type=search]:focus{outline:none; border-color:var(--copper);}
/* Hauteur bornée avec défilement propre à elle : sans ça, une table de
   plusieurs centaines de lignes fait défiler toute la modale (en-tête et
   pied de tableau compris) sur une distance énorme avant d'atteindre quoi
   que ce soit — la table défile sur elle-même, le reste de la modale reste
   en place. */
.tscroll{
  overflow:auto; max-height:min(58vh,520px);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
table.mkt{width:100%; border-collapse:collapse; min-width:1040px; font-size:.83rem;}
table.mkt th{position:sticky; top:0; background:var(--surface-2); text-align:left; font:500 .72rem 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--paper-faint); padding:11px 12px; white-space:nowrap; cursor:pointer; border-bottom:1px solid var(--line); z-index:2;}
table.mkt th:hover{color:var(--paper);}
table.mkt th.sorted{color:var(--gold);}
table.mkt td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.mkt tr.excluded td{opacity:.5;}
table.mkt tr.current{background:rgba(228,183,103,.07);}
table.mkt tr:hover td{background:rgba(242,237,230,.03);}
/* En dessous de 1040px de large, les colonnes les moins essentielles à un
   premier coup d'œil (nature du rendement, conditions de sortie,
   ancienneté, sources) cèdent la place plutôt que de forcer un défilement
   horizontal en plus du vertical — la ligne rejoint ce que la largeur permet
   vraiment d'afficher confortablement. */
@container (max-width:1040px){
  table.mkt{min-width:0;}
  table.mkt th:nth-child(5), table.mkt td:nth-child(5),
  table.mkt th:nth-child(6), table.mkt td:nth-child(6),
  table.mkt th:nth-child(10), table.mkt td:nth-child(10),
  table.mkt th:nth-child(11), table.mkt td:nth-child(11){display:none;}
}
@container (max-width:640px){
  table.mkt{font-size:.76rem;}
  table.mkt th, table.mkt td{padding:8px 8px;}
  table.mkt th:nth-child(3), table.mkt td:nth-child(3),
  table.mkt th:nth-child(9), table.mkt td:nth-child(9){display:none;}
}
.proto{display:flex; align-items:center; gap:8px; white-space:nowrap;}
.proto i{width:8px; height:8px; border-radius:2px; flex-shrink:0;}
/* Le vrai logo du protocole dans le comparateur, au même endroit que la
   pastille de couleur qu'il remplace — même gabarit, donc aucune ligne ne
   bouge quand un protocole n'a pas de logo et retombe sur la pastille. */
.proto .logo-cell{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--paper);
  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,.12);
}
.proto .logo-cell .logo-init{font-size:.5rem;}
.tag .logo-cell{width:14px; height:14px; margin:0 5px 0 -1px; box-shadow:none; background:none;}
.tag .logo-cell .logo-img.glyph{width:100%; height:100%; filter:none;}
.tag.chain-tag{display:inline-flex; align-items:center;}
.why{font-size:.72rem; color:var(--paper-faint); max-width:34ch; line-height:1.45;}
.score{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.8rem;}
.score-bar{width:38px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden;}
.score-bar i{display:block; height:100%;}
.table-foot{font-size:.78rem; color:var(--paper-faint); margin-top:14px; line-height:1.65; max-width:100ch;}

/* ---------- 10. fiabilité ---------- */
.proof-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-bottom:18px; align-items:start;}
@media(max-width:900px){ .proof-grid{grid-template-columns:minmax(0,1fr);} }
.proof-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.proof-sub{font-size:.8rem; color:var(--paper-dim); margin-bottom:16px; line-height:1.6;}
.audit-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.audit-head .big{font-family:var(--mono); font-size:1.7rem; color:var(--ok);}
.audit-head .big.bad{color:var(--danger);}
.audit-row{display:grid; grid-template-columns:16px minmax(0,1fr) minmax(0,auto); gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.8rem; align-items:baseline;}
.audit-row:last-child{border-bottom:none;}
.audit-row .st{font-family:var(--mono);}
.audit-row .st.ok{color:var(--ok);} .audit-row .st.ko{color:var(--danger);}
.audit-row .det{font-size:.72rem; color:var(--paper-faint); text-align:right; max-width:30ch;}
.feed-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:10px; padding:11px 0; border-bottom:1px solid var(--line);}
.feed-row:last-child{border-bottom:none;}
.feed-name{display:flex; align-items:center; gap:8px; font-size:.86rem;}
.feed-role{font-size:.72rem; color:var(--paper-faint); margin-top:2px;}
.feed-metrics{font-family:var(--mono); font-size:.72rem; color:var(--paper-dim); text-align:right; white-space:nowrap;}
.kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.82rem;}
.kv:last-child{border-bottom:none;}
.kv span:first-child{color:var(--paper-faint);}
.kv span:last-child{font-family:var(--mono); text-align:right;}
.score-doc{font-size:.79rem;}
.score-doc .row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:6px 0; border-bottom:1px solid var(--line);}
.score-doc .row b{font-family:var(--mono); color:var(--gold); font-weight:500; white-space:nowrap;}
.score-doc .row span{color:var(--paper-dim); line-height:1.5;}

/* ---------- 11. méthode / sécurité / faq ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.step .idx{color:var(--copper); font-size:.78rem; margin-bottom:10px;}
.step p{color:var(--paper-dim); font-size:.85rem; margin:0; line-height:1.65;}
.sec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:16px;}
.sec-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.sec-item .n{color:var(--gold); font-family:var(--mono); font-size:.9rem; margin-bottom:7px;}
.sec-item .l{font-size:.83rem; color:var(--paper-dim); line-height:1.6;}
.foot-note{font-size:.78rem; color:var(--paper-faint); line-height:1.7; max-width:100ch;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; gap:16px; align-items:center; padding:17px 0; cursor:pointer; font-size:.95rem;}
.faq-q .plus{color:var(--copper); font-family:var(--mono); transition:transform .2s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; color:var(--paper-dim); font-size:.87rem; line-height:1.75; transition:max-height .3s ease, padding .3s ease;}
.faq-item.open .faq-a{max-height:520px; padding-bottom:18px;}

/* ---------- 12. footer / modales / toast ---------- */
footer{border-top:1px solid var(--line); padding:36px 0 46px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:18px;}
.foot-links{display:flex; gap:22px; font-size:.85rem; color:var(--paper-dim);}
.foot-links a{text-decoration:none;} .foot-links a:hover{color:var(--paper);}
.modal-overlay{position:fixed; inset:0; background:rgba(10,8,7,.78); backdrop-filter:blur(6px); z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:26px; width:100%; max-width:440px; max-height:88vh; overflow-y:auto;}
/* `container-type` : la table ci-dessous doit réagir à la largeur de LA
   MODALE (plafonnée à 960px), pas à celle de la fenêtre — une modale reste
   étroite même en plein écran sur un grand moniteur. */
.modal-wide{max-width:960px; container-type:inline-size;}
@media(max-width:720px){
  /* Sur téléphone, la modale prend quasiment tout l'écran : moins de marge
     perdue autour d'un tableau qui a déjà besoin de toute la largeur qu'on
     peut lui donner. */
  .modal-overlay{padding:10px;}
  .modal{padding:16px; max-height:94vh;}
}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.modal-head h3{margin:0; font-size:1.15rem;}
.modal-close{background:none; border:none; color:var(--paper-faint); font-size:1.05rem; cursor:pointer; padding:4px 8px;}
.modal .sub{color:var(--paper-dim); font-size:.83rem; line-height:1.65; margin-bottom:18px;}
.auth-opt{display:flex; align-items:center; gap:12px; width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-bottom:9px; color:var(--paper); font-size:.9rem; cursor:pointer; text-decoration:none; text-align:left;}
.auth-opt:hover{border-color:var(--line-strong);}
.auth-icon{width:26px; height:26px; border-radius:7px; flex-shrink:0;}
.auth-opt small{display:block; color:var(--paper-faint); font-size:.72rem; margin-top:2px;}
/* Le logo d'un wallet vient du wallet lui-même (EIP-6963 le transporte en
   data:URI) : on le pose tel quel, détouré comme les autres marques. */
img.auth-icon{object-fit:cover; background:rgba(0,0,0,.25);}
/* Deux familles de wallets, deux titres : sans eux, Phantom et MetaMask
   s'aligneraient dans la même liste comme s'ils menaient au même réseau. */
.auth-group{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:14px 2px 8px; font-family:var(--mono); font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--paper-dim);}
.auth-group:first-child{margin-top:0;}
.auth-group small{text-transform:none; letter-spacing:0; color:var(--paper-faint); font-size:.72rem;}
/* Le réseau se choisit AVANT de connecter : le wallet bascule alors tout seul
   au moment de la connexion, au lieu de laisser l'utilisateur découvrir après
   coup qu'il est sur la mauvaise chaîne. */
.auth-chains{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px;}
.auth-chains button{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px 6px 8px; color:var(--paper-dim); font-size:.78rem;}
.auth-chains button:hover{border-color:var(--line-strong); color:var(--paper);}
.auth-chains button.on{border-color:var(--gold); color:var(--paper); background:rgba(228,183,103,.10);}
.auth-chains .ac-mark{width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;}
.auth-chains .ac-mark .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.auth-chains .ac-mark .logo-img.glyph{border-radius:0; object-fit:contain; background:none;}
.modal-status{display:flex; align-items:center; gap:10px; color:var(--paper-dim); font-size:.85rem; padding:10px 0;}
.spinner{width:15px; height:15px; border:2px solid var(--line-strong); border-top-color:var(--copper); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.tx-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.8rem; align-items:baseline;}
.tx-list{max-height:250px; overflow-y:auto; margin-top:8px;}
.toast{position:fixed; bottom:24px; left:50%; transform:translate(-50%,90px); background:var(--surface-3); border:1px solid var(--line-strong); border-radius:10px; padding:13px 20px; display:flex; align-items:center; gap:10px; font-size:.85rem; z-index:200; opacity:0; transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s; max-width:min(92vw,560px);}
.toast.show{transform:translate(-50%,0); opacity:1;}
.toast-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.boot-error{position:fixed; inset:auto 20px 20px 20px; background:var(--danger); color:#fff; padding:16px 20px; border-radius:10px; font-size:.85rem; z-index:300; display:flex; flex-direction:column; gap:6px;}
.boot-error code{background:rgba(0,0,0,.25); padding:1px 5px; border-radius:4px; font-family:var(--mono);}

/* ---------- 13. accessibilité ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}