/* =====================================================================
   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:0;   /* plus aucun angle arrondi sur les panneaux : voir la couche pixel */
  --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:0;}
.mono{font-family:var(--mono);}
/* Deux largeurs, et elles ne disent pas la même chose.
   `--wrap` est la largeur de PAGE : ce que la mise en page a le droit
   d'occuper. `--read` est la largeur de LECTURE : ce qu'un tableau ou une
   colonne de texte a le droit d'occuper avant que l'œil ne perde le début de
   la ligne suivante. Sur un téléviseur, la première doit grandir beaucoup et
   la seconde un peu — les confondre donne soit une carte postale au milieu
   d'un mur, soit des lignes de trois mille pixels. */
:root{ --wrap:1220px; --read:1000px;
  /* La hauteur de la barre collante. Elle est lue par la vitrine, dont les
     scènes occupent la fenêtre MOINS cette barre (voir landing.css) : écrite
     deux fois, elle finit par décaler chaque accrochage de quelques pixels. */
  --nav-h:76px; }
.wrap{max-width:var(--wrap); 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;}
/* Lu par les lecteurs d'écran, invisible à l'œil. Sert à dire en toutes
   lettres ce qu'une animation dit visuellement — « chargement en cours »
   n'est pas une information optionnelle. `clip-path` plutôt que
   `display:none`, qui retirerait le texte de l'arbre d'accessibilité. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.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);}
.warn-text{color:var(--warn);}

/* ---------- 3. primitives ---------- */
.btn{
  font:500 0.9rem/1 'Inter',sans-serif; border:none; border-radius:0; cursor:pointer;
  padding:12px 20px; transition:transform .12s cubic-bezier(.25,.46,.45,.94), background .15s cubic-bezier(.25,.46,.45,.94), border-color .15s cubic-bezier(.25,.46,.45,.94);
  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-wallet{display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.btn-wallet .wb-icon{width:17px; height:17px; flex:none;}
.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:0; 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:.74rem; font-family:var(--mono); border:1px solid var(--line-strong); border-radius:0; 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); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s cubic-bezier(.25,.46,.45,.94), background .2s cubic-bezier(.25,.46,.45,.94);
}
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);}
/* LES DEUX SYLLABES DE LA MARQUE, AUX COULEURS DE L'ÉCRAN OUVERT.
   « pav » reste blanc partout — c'est le nom qui ne change pas — et « api »
   prend la teinte de l'écran où l'on se trouve. C'est le repère le plus
   permanent de la page : il est en haut à gauche, il ne défile pas, et il
   dit d'un coup d'œil, même sans lire, où l'on a atterri.
   La table doit couvrir tous les écrans qui portent ce mot : l'atelier y
   manquait, et son « api » restait doré au milieu d'un écran rose — un
   accent qui ne désignait plus rien. La VITRINE n'y est pas, et c'est
   voulu : son logo ne dit plus « pavapi » d'un bloc mais « pav » suivi du
   badge « api », comme les cinq autres écrans portent le leur. */
html[data-screen="app"]   .logo-api{color:#F2CC57;}
html[data-screen="track"] .logo-api{color:#7ED6A5;}
html[data-screen="swap"]  .logo-api{color:#A99BE6;}
html[data-screen="price"] .logo-api{color:#5BB6F0;}
html[data-screen="ai"]    .logo-api{color:#E37FB8;}
/* Le nom de l'ÉCHELLE, à droite de la marque : « apy » sur l'application des
   rendements, « track » sur track.pavapi.com. Le mot « pavapi » désigne le
   site entier et ramène toujours à sa vitrine ; c'est ce badge, et lui seul,
   qui dit où l'on se trouve. Il n'est pas un lien — un lien vers la page
   qu'on regarde déjà n'a nulle part où mener. La couleur vient de `--c`, que
   chaque échelle pose : le doré ici, le vert de Track chez lui. */
/* Le bouton qui mène à Track porte la couleur de Track, pas celle de cette
   page : on sait où l'on va avant d'avoir lu le libellé — et c'est déjà la
   couleur que le voile du passage posera à l'écran suivant. */

.logo-suffix{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c,var(--gold)); border:1px solid currentColor; border-radius:0;
  padding:2px 6px; opacity:.9; align-self:center; line-height:1;
}
.logo-asset{font-family:var(--mono); font-size:.72rem; color:var(--asset); border:1px solid currentColor; border-radius:0; padding:1px 5px; letter-spacing:.04em; opacity:.85;}
/* `flex-shrink:0` + `white-space:nowrap` sur ces deux 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 le badge « flux », qui se
   met à 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. */
.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:0; 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:0; 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; will-change:transform;
}
.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:0; transition:color .15s cubic-bezier(.25,.46,.45,.94), background .15s cubic-bezier(.25,.46,.45,.94);
  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;}
  /* Sur téléphone, l'icône seule : le mot poussait le logo hors de la barre. */
  .btn-wallet .wb-label{display:none;}
  .btn-wallet{padding:8px 10px; max-width:none;}
}

.asset-notice{
  border:1px solid rgba(228,183,103,.3); border-left-width:3px; border-radius:0;
  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:0; padding:4px 13px 4px 4px;
  background:rgba(28,24,21,.6);
  transition:border-color .18s cubic-bezier(.25,.46,.45,.94), background .18s cubic-bezier(.25,.46,.45,.94);
}
.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 cubic-bezier(.25,.46,.45,.94), box-shadow .18s cubic-bezier(.25,.46,.45,.94);
}
.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:.72rem; 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:0; 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:0; 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:0; padding:22px;}
.mode-switch{display:flex; gap:6px; background:var(--surface-2); border-radius:0; 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:0; 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:0; padding:4px 14px; transition:border-color .15s cubic-bezier(.25,.46,.45,.94);}
.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:0; 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:0; 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:0; 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 cubic-bezier(.25,.46,.45,.94), box-shadow .18s cubic-bezier(.25,.46,.45,.94);
}
.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:.75rem;}
.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:.73rem; color:var(--gold); border:1px solid rgba(228,183,103,.4); border-radius:0; 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:0;}
/* 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:0;
  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:0; padding:9px 18px;
  transition:color .15s, border-color .15s;
}
.lb-more:hover{color:var(--paper); border-color:var(--line-strong);}

/* « Vos réseaux » — les puces qui restreignent le classement (ui/marketfilter.js).
   Une seule rangée qui glisse au doigt plutôt que quatre rangées de puces
   empilées au-dessus de la liste sur un téléphone. */
.mf{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 12px;}
.mf-lbl{font:500 .74rem var(--mono); letter-spacing:.04em; color:var(--paper-faint); text-transform:uppercase;}
.mf-chips{display:flex; gap:6px; flex:1 1 320px; min-width:0; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px;}
.mf-chip{display:inline-flex; align-items:center; gap:6px; flex-shrink:0; min-height:36px; padding:0 11px; background:var(--surface); color:var(--paper-dim); border:1px solid var(--line); border-radius:0; font:500 .78rem 'Inter',sans-serif; cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s;}
.mf-chip i{font:400 .7rem var(--mono); font-style:normal; color:var(--paper-faint);}
.mf-chip:hover{color:var(--paper); border-color:var(--line-strong);}
.mf-chip.on{color:var(--paper); border-color:var(--c,var(--gold)); background:color-mix(in srgb, var(--c,var(--gold)) 12%, var(--surface));}
.mf-mark{width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;}
.mf-mark .logo-img{width:100%; height:100%;}
.mf-risk{min-height:36px; padding:0 12px; background:none; color:var(--paper-dim); border:1px dashed var(--line-strong); border-radius:0; font:500 .76rem 'Inter',sans-serif; cursor:pointer; white-space:nowrap;}
.mf-risk.on{color:#7ED6A5; border-style:solid; border-color:rgba(126,214,165,.55); background:rgba(126,214,165,.08);}
.lb-scope{margin:0 2px 8px; font-size:.78rem; color:var(--paper-faint);}
.lb-reset{display:block; margin:12px auto 0; min-height:36px; padding:0 14px; background:none; color:var(--gold); border:1px solid rgba(228,183,103,.45); border-radius:0; font:500 .8rem 'Inter',sans-serif; cursor:pointer;}
.gain-scope{display:block; font-size:.74rem; color:var(--paper-faint); margin-bottom:2px;}

/* L'alerte de rendement — le même bloc que les alertes de cours de Price. */
.yield-alert{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:18px 0 0; padding:10px 12px; border:1px solid var(--line); background:var(--surface-2);}
.ya-lbl{font:500 .78rem var(--mono); letter-spacing:.04em; color:var(--paper-dim);}
.ya-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.ya-row input{width:9.5em; min-height:40px; padding:0 10px; background:var(--surface); color:var(--paper); border:1px solid var(--line-strong); border-radius:0; font:400 .9rem var(--mono);}
.ya-row input:focus{border-color:var(--gold); outline:none;}
.ya-btn{min-height:40px; padding:0 12px; background:var(--surface); color:var(--paper-dim); border:1px solid var(--line-strong); border-radius:0; font:500 .78rem 'Inter',sans-serif; cursor:pointer; transition:border-color .16s, color .16s;}
.ya-btn:hover{border-color:var(--gold); color:var(--paper);}
.ya-list{flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px;}
.ya-list:empty{display:none;}
.ya-item{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 4px 0 10px; font:400 .76rem var(--mono); color:var(--paper); border:1px solid rgba(228,183,103,.45); background:rgba(228,183,103,.08);}
.ya-item button{width:36px; height:36px; background:none; border:0; color:var(--paper-faint); cursor:pointer; font-size:.9rem;}
.ya-item button:hover{color:var(--danger);}
.ya-note{flex-basis:100%; margin:0; font-size:.72rem; line-height:1.55; color:var(--paper-faint);}
/* Les outils du comparateur : exporter la vue courante. */
.mkt-export{min-height:36px; padding:0 14px; font:500 .76rem var(--mono); letter-spacing:.03em; color:var(--paper-dim); background:none; border:1px solid var(--line); border-radius:0; cursor:pointer; white-space:nowrap; transition:color .15s, border-color .15s;}
.mkt-export: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:0; 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;}

/* ---------- 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:0; 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:0; 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:0; display:block;}
.legend i.dashed{background-image:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px);}
/* Ligne ou bougies — le même choix que sur Price, retenu pour tout le site. */
.legend .chart-modes{display:inline-flex; margin-left:auto; border:1px solid var(--line); padding:2px; gap:2px;}
.legend .chart-modes button{padding:4px 10px; font-family:var(--mono); font-size:.72rem; color:var(--paper-faint);}
.legend .chart-modes button.is-on{background:color-mix(in srgb, var(--gold, #E4B767) 22%, transparent); color:var(--paper);}
.chart-frame{background:var(--surface); border:1px solid var(--line); border-radius:0; 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:0; 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:0; 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:0; 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:0; 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:0; overflow:hidden;}
.eng-meter-fill{height:100%; background:linear-gradient(90deg,var(--copper),var(--gold)); border-radius:0; transition:width .5s cubic-bezier(.25,.46,.45,.94);}
.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:0; 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:0; 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(70vh,660px);
  border:1px solid var(--line); border-radius:0; 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:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
/* La colonne « Statut » porte le motif d'exclusion, qui est une PHRASE. Sans
   largeur plancher, le navigateur la comprime à quelques caractères et le
   motif se lit en colonne, une lettre par ligne : une ligne de tableau montait
   à près de 400 px et l'onglet « Écartés » n'affichait plus qu'un marché à
   l'écran. Un plancher de largeur, et le motif retrouve une phrase. */
table.mkt td[data-c=status]{min-width:200px;}
/* Deux lignes suffisent à lire un motif ; au-delà, le texte complet reste
   disponible au survol (attribut `title`) plutôt que d'étirer la ligne. Un
   marché refusé pour six raisons ne doit pas coûter dix marchés à l'écran. */
table.mkt .why{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; line-height:1.35; margin-top:1px;
}
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);}
/* Quand la largeur manque, les colonnes cèdent la place par ordre d'utilité
   plutôt que de forcer un défilement horizontal en plus du vertical.
   L'ordre a son importance : la colonne « Statut » porte le motif d'exclusion,
   c'est-à-dire tout l'objet des onglets « Écartés » et « Tous » — elle se
   retrouvait rejetée hors écran, derrière un défilement, sur un portable de
   1440 px. Elle reste donc jusqu'au bout ; l'ancienneté et les sources partent
   les premières, la nature et les conditions de sortie ensuite. */
@container (max-width:1400px){
  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:1250px){
  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){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:0; 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:.72rem;}
.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:0; 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:0; 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:0; 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:0; 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 cubic-bezier(.25,.46,.45,.94);}
.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 cubic-bezier(.25,.46,.45,.94), padding .3s cubic-bezier(.25,.46,.45,.94);}
.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;}
.modal-overlay{position:fixed; inset:0; background:rgba(10,8,7,.78); -webkit-backdrop-filter:blur(6px); 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:0; 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;}
/* Le comparateur est le seul contenu du site plus large que 960 px : douze
   colonnes, dont une qui porte une phrase. À 960 px il défilait horizontalement
   ET verticalement en même temps. On lui laisse la largeur de l'écran quand il
   y en a, sans jamais dépasser ce que la table demande vraiment. */
#marketsModal .modal{max-width:min(1620px,96vw);}
@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:0; 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:0; 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:0;
  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{backface-visibility:hidden;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);}}
.toast{backface-visibility:hidden;position:fixed; bottom:24px; left:50%; transform:translate(-50%,90px); background:var(--surface-3); border:1px solid var(--line-strong); border-radius:0; padding:13px 20px; display:flex; align-items:center; gap:10px; font-size:.85rem; z-index:200; opacity:0; transition:transform .35s cubic-bezier(.25,.46,.45,.94), opacity .35s cubic-bezier(.25,.46,.45,.94); 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;}

/* ---------------------------------------------------------------------
   LE BOT MESSAGER (ui/botnote.js) — la bête de la page surgit du bas de
   l'écran, dit ce qu'il faut savoir dans sa bulle, et repart au clic.
   --------------------------------------------------------------------- */
.botnote{
  position:fixed; right:18px; bottom:18px; z-index:210;
  display:flex; align-items:flex-end; gap:10px;
  max-width:min(460px, calc(100vw - 24px));
  transform:translateY(calc(100% + 40px)); opacity:0; cursor:pointer;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  --c:#E4B767;
}
.botnote[hidden]{display:none;}
.botnote.is-in{transform:none; opacity:1;}
.botnote.is-out{transform:translateY(calc(100% + 40px)) rotate(-4deg); opacity:0;
  transition:transform .4s cubic-bezier(.55,0,.8,.4), opacity .4s ease;}
.botnote-pet{
  flex:0 0 76px; width:76px; height:72px; padding:0; margin:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c) 14%, rgba(14,12,11,.92));
  border:2px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 4px color-mix(in srgb, var(--c) 10%, transparent);
  animation:botPeek 3.2s ease-in-out infinite;
}
.botnote-pet canvas{display:block; width:62px; height:58px; image-rendering:pixelated;}
.botnote-bubble{
  position:relative; flex:1 1 auto; min-width:0;
  padding:12px 16px 13px; font-size:.86rem; line-height:1.55; color:var(--paper,#F2EDE6);
  background:color-mix(in srgb, var(--c) 9%, rgba(22,19,17,.96));
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transform-origin:100% 100%;
}
/* La queue de la bulle, vers la bête. */
.botnote-bubble::after{
  content:''; position:absolute; right:-7px; bottom:20px; width:12px; height:12px;
  background:inherit; border-right:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-top:1px solid color-mix(in srgb, var(--c) 45%, transparent); transform:rotate(45deg);
}
.botnote-bubble.is-new{animation:botPop .42s cubic-bezier(.34,1.56,.64,1);}
.botnote-who{
  display:inline-block; margin-right:8px; padding:2px 6px; vertical-align:1px;
  font:600 .7rem/1 var(--mono,monospace); letter-spacing:.09em; text-transform:uppercase;
  color:var(--c); border:1px solid currentColor;
}
.botnote-text{white-space:pre-line;}
.botnote-more{display:block; margin-top:6px; font-size:.72rem; color:var(--c); opacity:.9;}
.botnote-x{
  position:absolute; top:-18px; right:80px; width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; cursor:pointer;
  color:var(--paper-dim,#CFC7BC); background:rgba(14,12,11,.95); border:1px solid var(--line-strong,rgba(242,237,230,.2));
}
.botnote-x:hover, .botnote-x:focus-visible{color:var(--c); border-color:var(--c);}
.botnote.is-warn .botnote-bubble{border-color:#E0A458;}
.botnote.is-ok .botnote-who{color:var(--ok,#7ED6A5);}
.botnote:hover .botnote-pet{border-color:var(--c);}
@keyframes botPop{0%{transform:scale(.7); opacity:.2} 100%{transform:none; opacity:1}}
@keyframes botPeek{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@media (max-width:560px){
  .botnote{right:10px; bottom:10px; left:10px; max-width:none;}
  .botnote-pet{flex-basis:60px; width:60px; height:58px;}
  .botnote-pet canvas{width:50px; height:46px;}
  .botnote-bubble{font-size:.8rem; padding:10px 12px;}
  .botnote-x{right:64px;}
}
@media (prefers-reduced-motion:reduce){
  .botnote, .botnote.is-out{transition:none;}
  .botnote-pet, .botnote-bubble.is-new{animation:none;}
}

/* Deposit animation */
@keyframes depositPulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}
.deposit-animation {
  animation: depositPulse 0.6s cubic-bezier(.25,.46,.45,.94); will-change:transform,opacity;
}

/* Button feedback */
.btn:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.boot-error{position:fixed; inset:auto 20px 20px 20px; background:var(--danger); color:#fff; padding:16px 20px; border-radius:0; 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:0; 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;}
}

/* ================= ANALYSE DU RISQUE =================
   Deux notes côte à côte, jamais additionnées : détenir n'est pas prêter.
   Elles partagent volontairement la même pastille et la même échelle de
   couleur — deux échelles différentes sur le même écran se liraient de
   travers — mais chacune garde son en-tête, son verbe et son détail. */
.risk-pill{
  display:inline-flex; align-items:center; gap:6px;
  font:500 .78rem/1 'Inter',sans-serif; white-space:nowrap;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:color-mix(in srgb, var(--c) 10%, transparent);
  border-radius:0; padding:5px 11px;
}
.risk-pill.sm{font-size:.75rem; padding:3px 8px; font-family:var(--mono);}

.risk-axes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:18px; margin-bottom:26px;}
.risk-axis{
  background:var(--surface); border:1px solid var(--line); border-radius:0;
  padding:22px 24px; min-width:0;
}
.risk-axis-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px;}
.risk-axis-kind{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-faint); border:1px solid var(--line); border-radius:0; padding:3px 8px;
}
.risk-axis-head h3{flex:1 1 220px; margin:0; font-size:1.02rem; min-width:0;}
.risk-axis-note{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.risk-score{font-family:var(--mono); font-size:1.15rem; color:var(--paper);}
.risk-score i{font-style:normal; font-size:.7rem; color:var(--paper-faint);}
.risk-axis-lede{color:var(--paper-dim); font-size:.86rem; line-height:1.65; margin:0 0 16px;}
.risk-axis-foot{color:var(--paper-faint); font-size:.78rem; line-height:1.6; margin:16px 0 0;}

.risk-parts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.risk-part-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.risk-part-head b{font-size:.86rem; font-weight:500; color:var(--paper);}
.risk-part-pts{font-family:var(--mono); font-size:.76rem; color:var(--paper-faint);}
.risk-part-bar{display:block; height:3px; border-radius:0; background:var(--surface-3,rgba(255,255,255,.06)); margin:6px 0 6px; overflow:hidden;}
.risk-part-bar i{display:block; height:100%; background:var(--paper-faint); border-radius:0;}
.risk-part p{margin:0; font-size:.79rem; line-height:1.6; color:var(--paper-dim);}

.risk-distribution{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.risk-dist{display:flex; align-items:center; gap:12px;}
.risk-dist-bar{flex:1 1 auto; height:6px; border-radius:0; background:var(--surface-3,rgba(255,255,255,.06)); overflow:hidden; min-width:0;}
.risk-dist-bar i{display:block; height:100%; border-radius:0;}
.risk-dist-n{font-family:var(--mono); font-size:.72rem; color:var(--paper-faint); white-space:nowrap;}

/* L'explication du mécanisme : repliée, parce que c'est un texte à lire et
   non un tableau de bord à surveiller. */
.risk-doc{display:flex; flex-direction:column; gap:0;}
.risk-fold{border-top:1px solid var(--line);}
.risk-fold > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 2px; font-size:.94rem; color:var(--paper);
}
.risk-fold > summary::-webkit-details-marker{display:none;}
.risk-fold > summary:hover{color:var(--gold);}
.risk-fold-mark{
  flex-shrink:0; width:9px; height:9px; border-right:1.5px solid var(--paper-faint);
  border-bottom:1.5px solid var(--paper-faint); transform:translateY(-2px) rotate(45deg);
  transition:transform .2s cubic-bezier(.25,.46,.45,.94);
}
.risk-fold[open] > summary .risk-fold-mark{transform:translateY(2px) rotate(225deg);}
.risk-fold-body{padding:2px 2px 20px;}
.risk-fold-body p{color:var(--paper-dim); font-size:.86rem; line-height:1.7; margin:0 0 12px; max-width:78ch;}
.risk-fold-body p:last-child{margin-bottom:0;}
.risk-fold-body b{color:var(--paper); font-weight:500;}
.risk-cats{margin:0 0 14px; padding-left:18px; color:var(--paper-dim); font-size:.83rem; line-height:1.65;}
.risk-cats li{margin-bottom:6px;}
.risk-cats b{color:var(--paper);}

/* ---- le pourquoi d'un marché, sous sa ligne de classement ---- */
.lb-item{display:flex; flex-direction:column; border-bottom:1px solid var(--line);}
.lb-item:last-child{border-bottom:none;}
.lb-item .lb-row{border-bottom:none;}
.lb-why-btn{
  display:flex; align-items:center; gap:10px; align-self:flex-start;
  background:none; border:none; cursor:pointer; padding:0 20px 12px 68px;
  font:400 .72rem/1 var(--mono); color:var(--paper-faint);
}
.lb-why-open{text-decoration:underline; text-underline-offset:3px;}
.lb-why-btn:hover .lb-why-open{color:var(--paper);}
.lb-why-panel{padding:4px 20px 18px 68px; border-top:1px dashed var(--line);}
.lb-why-lede{margin:14px 0 12px; font-size:.8rem; color:var(--paper-dim); line-height:1.6;}
.lb-why-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.lb-why-list li{display:flex; gap:12px; align-items:baseline;}
.lb-why-pts{font-family:var(--mono); font-size:.72rem; color:var(--paper-dim); flex-shrink:0; min-width:52px;}
.lb-why-pts i{font-style:normal; color:var(--paper-faint);}
.lb-why-list li.weak .lb-why-pts{color:var(--warn);}
.lb-why-txt{font-size:.79rem; line-height:1.55; color:var(--paper-dim);}
.lb-why-soft{margin:12px 0 0; font-size:.76rem; color:var(--warn); line-height:1.55;}
@media(max-width:640px){
  .lb-why-btn{padding-left:14px;}
  .lb-why-panel{padding-left:14px; padding-right:14px;}
  .risk-axis{padding:18px 16px;}
}
/* Où mène le lien : rien quand c'est le guichet (le cas normal, qui n'a pas
   à se signaler), un mot discret quand ce n'est que l'application. */
.lb-gate{
  align-self:flex-start; margin:-6px 0 12px 68px;
  font:400 .75rem/1 var(--mono); color:var(--warn);
  border:1px solid rgba(228,183,103,.28); border-radius:0; padding:3px 7px; cursor:help;
}
@media(max-width:640px){ .lb-gate{margin-left:14px;} }

/* ---------- apparition au défilement ----------
   Posées ici plutôt que dans la feuille de Track, où elles vivaient seules :
   c'est le même mouvement sur tout le site, il n'a pas à être décrit deux
   fois. Voir ui/reveal.js pour ce qui pose et retire ces classes — elles ne
   survivent pas à l'animation, précisément pour ne jamais l'emporter sur le
   style propre d'un composant. */
.rv{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.25,.46,.45,.94) var(--rv-delay,0ms),
             transform .5s cubic-bezier(.25,.46,.45,.94) var(--rv-delay,0ms);
}
.rv.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none;}
}
/* Le risque pris, sous la courbe : la même pastille que dans l'analyse de
   risque et le classement — un seul barème, une seule teinte, partout. */
.chart-risk{display:inline-flex; align-items:center; gap:7px;}
.chart-risk-n{font-family:var(--mono); font-size:.7rem; color:var(--paper-faint); cursor:help;}

/* ================= LE PIED DE PAGE =================
   Il ne portait qu'un logo — sur trois des quatre écrans, la page se
   terminait sans dire ce qu'on venait de lire ni où aller ensuite. Track
   avait le sien, avec sa description ; c'est ce pied-là, généralisé.

   Les trois écrans y sont nommés comme dans la barre du haut : arrivé en bas
   d'une page, on ne devrait pas avoir à remonter pour changer d'échelle. */
.site-foot{
  border-top:1px solid var(--line); padding:44px 0 52px; margin-top:0;
}
.site-foot .wrap{display:flex; flex-direction:column; gap:26px;}
/* LE PIED DE PAGE, SUR ORDINATEUR.
   Il valait six cent quarante pixels de haut pour un logo et six liens : la
   colonne de gauche ne portait que la marque, celle de droite empilait six
   cartes hautes, et entre les deux s'ouvrait un vide que rien ne remplissait.
   Les écrans sont désormais une liste QUI SE DÉPLIE (voir fillFoot dans
   ui/screens.js) : le pied tient sur deux lignes, et s'ouvre en grille pleine
   largeur pour qui cherche une app. */
/* Le pied ne porte plus que la marque : elle se pose au centre, puisqu'il
   n'y a plus rien à aligner à côté d'elle. */
.foot-top{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;}
/* `flex:0 1 auto` et non `0 0` : sans le droit de rétrécir, la colonne de
   marque impose sa largeur INTRINSÈQUE — celle du paragraphe qui la suit,
   plafonné à 62 caractères — et pousse la page entière en débordement
   horizontal sur téléphone. Le `min-width:0` est ce qui rend ce droit
   effectif : un enfant flex ne descend pas sous son contenu sans lui. */
.foot-brand{flex:0 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:12px;}
.foot-brand .logo{font-size:1.1rem;}
.foot-desc{margin:0; max-width:62ch; font-size:.84rem; line-height:1.7; color:var(--paper-dim);}

/* Les écrans : repliés sur une ligne, dépliés en grille — mêmes marques et
   mêmes teintes que le tiroir de l'en-tête et que les badges de l'accueil. */
.foot-screens{flex:1 1 320px; min-width:0;}
.foot-fold{width:100%;}
.foot-fold-sum{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:9px 13px; border:1px solid var(--line); border-radius:0;
  background:var(--surface); width:fit-content; margin-left:auto;
  transition:border-color .15s var(--ease,ease);
}
.foot-fold-sum::-webkit-details-marker{display:none;}
.foot-fold-sum:hover{border-color:var(--line-strong);}
.foot-fold-sum:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.foot-screens-lbl{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--paper-faint);
}
/* L'écran courant, dit sur la ligne repliée : la liste fermée reste
   informative au lieu d'être un simple bouton. */
.foot-fold-here{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--c,var(--gold)); border:1px solid currentColor;
  border-radius:0; padding:2px 6px; line-height:1;
}
.foot-fold-chev{color:var(--paper-faint); font-size:.7rem; transition:transform .18s var(--ease,ease);}
.foot-fold[open] .foot-fold-chev{transform:rotate(180deg);}
.foot-fold-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:9px; margin-top:14px;
}
.foot-screen{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:8px 12px; border-radius:0;
  border:1px solid var(--line); border-left:3px solid var(--c,var(--line-strong));
  background:var(--surface); color:var(--paper-dim);
  transition:border-color .15s cubic-bezier(.25,.46,.45,.94), color .15s cubic-bezier(.25,.46,.45,.94), transform .15s cubic-bezier(.25,.46,.45,.94);
}
.foot-screen:hover{border-color:var(--line-strong); color:var(--paper); transform:translateX(3px);}
.foot-screen .scr-badge{flex-shrink:0;}
.foot-screen b{font-family:'Fraunces',serif; font-weight:500; font-size:.92rem; color:var(--paper);}
.foot-screen span{font-size:.72rem; color:var(--paper-faint);}
.foot-screen-txt{display:flex; flex-direction:column; gap:1px; min-width:0;}
/* L'écran où l'on est déjà reste listé — le retirer ferait croire qu'il
   n'existe pas — mais ne se présente pas comme une destination. */
.foot-screen.is-here{opacity:.6; pointer-events:none;}

.foot-legal{
  margin:0; padding-top:20px; border-top:1px solid var(--line);
  font-size:.75rem; line-height:1.65; color:var(--paper-faint); max-width:96ch;
}
@media(max-width:640px){
  .site-foot{padding:34px 0 40px;}
  .foot-top{gap:22px;}
  .foot-screens{width:100%;}
}


/* ---------- le tiroir des écrans ----------
   pavapi tient sur quatre écrans — la vitrine, les rendements, Track,
   l'échange — et la barre
   barre n'en nommait aucun : on ne changeait d'écran qu'en tombant, au fil du
   défilement, sur le bouton qui y menait. Le bouton ci-dessous les rassemble.

   Un tiroir, et non un menu déroulant : chaque écran a besoin d'une phrase
   pour qu'on sache ce qu'on y trouve, et une liste de trois mots secs
   (« apy », « track ») n'aurait rien dit à qui arrive pour la première fois. */
.nav-open{
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  font:500 .84rem/1 'Inter',sans-serif;
  background:transparent; color:var(--paper-dim);
  border:1px solid var(--line-strong); border-radius:0;
  padding:9px 16px; cursor:pointer;
  transition:border-color .15s var(--ease,ease), color .15s var(--ease,ease), background .15s var(--ease,ease);
}
.nav-open:hover{border-color:var(--paper-dim); color:var(--paper); background:rgba(255,255,255,.04);}
.nav-open-bars{display:flex; flex-direction:column; gap:4px; width:15px;}
.nav-open-bars i{display:block; height:1.5px; background:currentColor; border-radius:0; transform-origin:center; transition:transform .2s var(--ease,cubic-bezier(.25,.46,.45,.94)), opacity .2s var(--ease,cubic-bezier(.25,.46,.45,.94));}
.nav-open-bars i:last-child{width:66%;}
/* Ouvert : les deux traits se croisent en X. Le second barre l'inclinaison
   opposée du premier et s'élargit à pleine largeur. */
.nav-open.is-open .nav-open-bars{gap:0;}
.nav-open.is-open .nav-open-bars i{width:100%;}
.nav-open.is-open .nav-open-bars i:first-child{transform:translateY(1.5px) rotate(45deg);}
.nav-open.is-open .nav-open-bars i:last-child{transform:translateY(-1.5px) rotate(-45deg);}

/* Le voile n'est plus un rideau sombre plein écran : le menu se porte comme
   un déroulant ancré sous le bouton, et le seul rôle de cet élément est de
   capter le clic « ailleurs » pour refermer. Transparent, il ne couvre rien
   visuellement — la page reste lisible derrière. */
.nav-scrim{
  position:fixed; inset:0; z-index:80;
  background:transparent;
}

/* Le panneau est un MENU DÉROULANT, pas un tiroir : ancré sous le bouton par
   le script (top/right calculés depuis le rectangle du bouton), il descend
   de l'en-tête au lieu de glisser depuis le bord. Largeur bornée, hauteur
   bornée à l'écran, ombre douce : il flotte devant la page sans la recouvrir. */
.nav-panel{
  position:fixed; z-index:90;
  display:flex; flex-direction:column; gap:6px;
  width:min(240px, calc(100vw - 28px));
  max-height:calc(100vh - 90px); overflow-y:auto;
  padding:10px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:0;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
  transform:translateY(-10px) scale(.985); transform-origin:top right;
  opacity:0; visibility:hidden;
  transition:transform .2s var(--ease,cubic-bezier(.25,.46,.45,.94)),
             opacity .2s var(--ease,cubic-bezier(.25,.46,.45,.94)),
             visibility .2s var(--ease,cubic-bezier(.25,.46,.45,.94));
}
.nav-panel.in{transform:none; opacity:1; visibility:visible;}
@media(prefers-reduced-motion:reduce){
  .nav-panel{transition:none;}
}


/* Une carte par écran : la marque et le nom. */
.nav-card{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:0; text-decoration:none;
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--c,var(--line-strong));
  transition:border-color .16s var(--ease,ease), transform .16s var(--ease,ease), background .16s var(--ease,ease);
}
.nav-card:hover{border-color:var(--line-strong); background:var(--surface-3,var(--surface-2)); transform:translateX(3px);}
.nav-card-mark{width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.nav-card-mark svg{width:100%; height:100%;}
.nav-card-body{min-width:0;}
.nav-card-body b{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:'Fraunces',serif; font-size:.96rem; color:var(--paper); margin-bottom:0;}
.nav-card-tag{
  font-family:var(--mono); font-size:.72rem; font-weight:400; letter-spacing:.02em;
  color:var(--paper-faint); border:1px solid var(--line); border-radius:0; padding:1px 5px;
}
/* L'écran où l'on se trouve déjà reste listé — le retirer ferait croire qu'il
   n'existe pas — mais ne se présente pas comme une destination. */
.nav-card.is-here{opacity:.7;}
.nav-card.is-here:hover{transform:none;}
.nav-card.is-here .nav-card-tag{color:var(--c); border-color:color-mix(in srgb, var(--c) 45%, transparent);}


/* ------------------------------------------------------------------ *
 *  Les tout petits écrans — 320 px de large
 * ------------------------------------------------------------------ *
 *
 * Il en reste, et pas seulement de vieux téléphones : c'est aussi la largeur
 * d'une fenêtre posée à côté d'une autre, ou d'un navigateur dont on a
 * agrandi la police. En dessous de 360 px, la barre portait trois blocs
 * `flex-shrink:0` dont la somme dépassait la fenêtre, et TOUTE LA PAGE se
 * mettait à défiler de côté — chaque section, chaque tableau, décalé de
 * dix-sept pixels sous le doigt.
 *
 * Le mot du bouton part le premier : les deux traits disent déjà « menu »,
 * et c'est la seule chose ici dont on puisse se passer sans rien perdre.
 */
@media(max-width:359px){
  .nav-open-word{display:none;}
  .nav-open{padding:9px 12px;}
  nav.wrap{gap:12px;}
}

/* ------------------------------------------------------------------ *
 *  LA MARQUE ENCADRÉE — un seul badge pour tout le site
 * ------------------------------------------------------------------ *
 * L'accueil pose la marque de chaque section dans un carré teinté de son
 * accent (`.sec-mark`). Le tiroir de l'en-tête et le pied de page montraient
 * les MÊMES marques, nues : le même objet ne se présentait pas pareil selon
 * l'endroit où on le rencontrait, ce qui est exactement ce qu'un repère ne
 * doit pas faire. Une seule règle désormais, trois endroits.
 */
.scr-badge{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid color-mix(in srgb, var(--c, var(--gold)) 34%, transparent);
  border-radius:0;
  background:color-mix(in srgb, var(--c, var(--gold)) 8%, transparent);
  box-shadow:0 0 18px -10px var(--c, var(--gold));
}
.scr-badge svg{width:20px; height:20px; display:block;}
.nav-card-mark.scr-badge{width:34px; height:34px;}

/* Le bouton de langue — même monture que le bouton du tiroir, en plus étroit.
   Deux langues, donc un bouton et pas un menu. */
.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; padding:9px 11px; flex-shrink:0;
  font:600 .7rem/1 var(--mono); letter-spacing:.06em; text-decoration:none;
  color:var(--paper-dim); background:transparent;
  border:1px solid var(--line-strong); border-radius:0;
  transition:border-color .15s var(--ease,ease), color .15s var(--ease,ease);
}
.lang-btn:hover{border-color:var(--paper-dim); color:var(--paper);}
@media(max-width:359px){ .lang-menu{display:none;} }
/* Trois langues : le bouton déplie la liste. */
.lang-menu{position:relative; flex-shrink:0;}
.lang-menu > summary{list-style:none; cursor:pointer;}
.lang-menu > summary::-webkit-details-marker{display:none;}
.lang-menu[open] > summary{border-color:var(--paper-dim); color:var(--paper);}
.lang-list{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:150px;
  display:flex; flex-direction:column; padding:4px;
  background:var(--surface-2, #1c1815); border:1px solid var(--line-strong);
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
}
.lang-item{display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 10px;
  color:var(--paper-dim); text-decoration:none; font-size:.85rem;}
.lang-item b{font:600 .7rem/1 var(--mono); letter-spacing:.06em; min-width:22px; color:var(--paper-faint);}
a.lang-item:hover, a.lang-item:focus-visible{background:var(--surface-3, rgba(255,255,255,.05)); color:var(--paper);}
.lang-item.is-here{color:var(--paper);}
.lang-item.is-here b{color:var(--gold, #E4B767);}

/* Le pied, centré : la marque, puis les mentions. Les blocs de la liste des
   écrans restent définis plus haut — ils ne sont plus posés, mais une page
   ancienne mise en cache pourrait encore les porter le temps d'un
   rechargement, et un style orphelin ne coûte rien face à un pied cassé. */
.site-foot .foot-legal{text-align:center; margin-inline:auto; max-width:80ch;}
.site-foot .foot-desc{text-align:center; margin-inline:auto;}

/* La paire « langue + tiroir » : deux boutons qui vont ensemble, placés
   ensemble. Sans ce groupe, la barre justifiait trois éléments et laissait le
   bouton de langue seul au milieu sur les écrans étroits. */
.nav-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
@media(max-width:400px){ .nav-actions{gap:6px;} }

/* ══════════════════════════════════════════════════════════════════════
 *  LA COULEUR DE L'ÉCRAN, DANS LE TEXTE
 * ══════════════════════════════════════════════════════════════════════
 *
 * Chaque écran a sa teinte — or pour les rendements, vert pour Track, violet
 * pour l'échange, bleu pour les cours, rose pour l'atelier — et elle ne
 * vivait que dans trois endroits : la marque, le badge du logo et les
 * pastilles. Le corps de la page, lui, était identique partout. On pouvait
 * lire une page entière sans que rien ne rappelle où l'on se trouvait.
 *
 * `--scr` porte cette teinte sur TOUTE la page, et quelques éléments de texte
 * la prennent : le mot mis en italique d'un titre, le chiffre d'un
 * indicateur, les puces des listes, le soulignement d'un lien dans le corps
 * du texte. Des TOUCHES — pas un aplat : un écran entièrement teinté se lit
 * moins bien, et le papier du site est sa constante.
 */
html                      { --scr:#C97A3D; }   /* la vitrine — le cuivre */
html[data-screen="app"]   { --scr:#F2CC57; }
html[data-screen="track"] { --scr:#7ED6A5; }
html[data-screen="swap"]  { --scr:#A99BE6; }
html[data-screen="price"] { --scr:#5BB6F0; }
html[data-screen="ai"]    { --scr:#E37FB8; }

/* Le mot souligné d'un titre : c'est la promesse de la page, et c'est là
   qu'une couleur se voit le plus pour le moins de bruit. */
h1 em, h2 em, .section-head em{ color:var(--scr); font-style:italic; }

/* Les puces des listes de la page : un carré, pas un rond — la même forme
   franche que les cadres depuis que le site parle la langue de l'atelier. */
.site-foot li::marker,
.more-block li::marker,
.faq-item li::marker{ color:var(--scr); }

/* Un lien dans un paragraphe prend la teinte de son écran plutôt que l'or
   général : sur la page des cours, un lien bleu dit « tu es dans Price ». */
p a:not(.btn):not([class*="pr-"]):not(.dc-open),
li a:not(.btn):not([class*="pr-"]):not(.dc-open){
  color:var(--scr);
  text-decoration-color:color-mix(in srgb, var(--scr) 45%, transparent);
  text-underline-offset:3px;
}
p a:not(.btn):hover, li a:not(.btn):hover{ text-decoration-color:var(--scr); }

/* Les étiquettes en petites capitales (les en-têtes de bloc, les légendes de
   colonne) : elles quadrillent la page, et une teinte y suffit à la situer. */
.section-head .kicker,
.sec-kicker,
.pxbox-head,
.foot-screens-lbl{ color:var(--scr); }

/* Le trait de séparation d'une section prend une pointe de la teinte : on ne
   le remarque pas, et c'est exactement ce qu'on veut d'un liseré. */
.band, section + section{ --line-accent:color-mix(in srgb, var(--scr) 22%, var(--line)); }

/* Et la sélection de texte : le dernier endroit où le site restait neutre
   partout. */
::selection{ background:color-mix(in srgb, var(--scr) 32%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
 *  LES GRANDS ÉCRANS — ordinateur large, téléviseur, 4K
 * ══════════════════════════════════════════════════════════════════════
 *
 * Le site avait UNE largeur utile : 1220 px, quelle que soit la dalle. Sur
 * un écran de 3840 px, c'était une colonne occupant trente-deux pour cent de
 * la surface, avec du texte de seize pixels — soit, depuis un canapé, une
 * carte postale illisible au milieu d'un mur noir.
 *
 * Deux leviers, et ils vont ensemble :
 *
 *   — la LARGEUR UTILE s'élargit par paliers. Pas jusqu'au bord : une ligne
 *     de texte de trois mille pixels ne se lit pas non plus, l'œil perd le
 *     début de la ligne suivante. On vise la même densité de lecture, pas le
 *     remplissage ;
 *   — la TAILLE DE BASE augmente avec elle. Tout le site dimensionne ses
 *     textes en `rem`, donc relever la racine relève l'ensemble d'un coup,
 *     en gardant toutes les proportions. C'est ce qui fait qu'un téléviseur
 *     se lit de loin.
 *
 * Les paliers plutôt qu'une formule continue : un `clamp()` sur la racine
 * fait bouger toute la page pendant qu'on redimensionne une fenêtre, et
 * rend les tailles imprévisibles à l'auteur. Trois marches suffisent.
 */
@media(min-width:1700px){
  :root{ font-size:17px; --wrap:1400px; --read:1160px; }
}
@media(min-width:2200px){
  :root{ font-size:19px; --wrap:1720px; --read:1400px; }
  .wrap{ padding:0 40px; }
}
@media(min-width:3000px){
  :root{ font-size:22px; --wrap:2200px; --read:1800px; }
  .wrap{ padding:0 48px; }
}
/* Les scènes en canevas suivent la largeur utile : elles sont dimensionnées
   en pourcentage de leur conteneur, donc elles grandissent avec lui sans
   qu'aucune règle ne les nomme ici. */

/* ══════════════════════════════════════════════════════════════════════
 *  LES ÉCRANS TACTILES — ce qu'un doigt peut viser
 * ══════════════════════════════════════════════════════════════════════
 *
 * Un doigt couvre une quarantaine de pixels ; une cible plus petite se rate,
 * et une cible ratée se re-vise à l'aveugle. L'audit en a relevé plusieurs
 * centaines sous ce seuil — l'étoile des favoris (quatre cents lignes à
 * elle seule), les puces de réseau, les onglets, les boutons de la barre.
 *
 * `pointer:coarse` vise le doigt, pas la petite largeur : une tablette de
 * 1024 px se touche autant qu'un téléphone de 320, et une fenêtre étroite
 * sur un ordinateur se clique à la souris. C'est le MOYEN DE POINTAGE qui
 * décide, pas le nombre de pixels.
 *
 * Les liens DANS un paragraphe sont exclus : les agrandir découdrait le
 * texte, et la norme les excepte pour cette raison exacte.
 */
@media(pointer:coarse){
  .logo, .lang-btn, .nav-open, .btn, .chip, .sort, .tk-tab, .tk-ghost, .sw-tab,
  .pxbtn, .guide-q, .example-btn, .dc-copy, .dc-open, .pr-apy, .pr-range,
  .sc-gear, .sc-flip, .sc-max, .vault-swap-btn, .foot-screen, .nav-card,
  .as-track a, summary, select, input[type="search"], input[type="text"], input[type="number"]{
    min-height:44px;
  }
  /* Les boutons qui sont déjà des boîtes flex gardent leur contenu centré ;
     les autres reçoivent la hauteur par le padding vertical. */
  .logo, .lang-btn, .nav-open, .btn, .chip, .sort, .tk-tab, .tk-ghost, .sw-tab,
  .pxbtn, .guide-q, .example-btn, .dc-copy, .dc-open, .pr-apy, .pr-range,
  .vault-swap-btn, .as-track a{
    display:inline-flex; align-items:center; justify-content:center;
  }
  .as-track a{justify-content:flex-start;}

  /* Les boutons sans classe d'une barre d'outils comptent autant que les
     autres : ceux des suggestions de l'atelier, ceux de la légende d'un
     graphique. On les vise par leur conteneur. */
  .empty-tips button, .chart-toolbar button, .legend button, .seg button,
  .px-row button, .gauge button{ min-height:44px; }
  /* Un bouton peut être assez haut et trop étroit — le tri de Track faisait
     vingt-cinq pixels de large. */
  .sort, .chip, .tk-tab, .sw-tab, .pr-range{ min-width:44px; }

  /* L'ÉTOILE DES FAVORIS — quatre cents cibles de vingt pixels.
     Premier essai : étendre la zone sensible par un pseudo-élément. Le test
     de pointage l'a démenti — la cellule d'un tableau et le conteneur à
     défilement de la table le rognent, et la zone restait celle du bouton.
     On élargit donc la COLONNE, et le bouton la remplit : l'étoile garde sa
     taille dessinée, sa cible fait quarante-quatre pixels, et la table ne
     bouge que de douze pixels. */
  .pr-th-fav, .pr-fav{ width:46px; padding-left:2px; padding-right:0; }
  .pr-star{ width:44px; min-height:44px; padding:0; }

  /* Les planètes cliquables du système solaire. Même démenti : le nœud est
     posé en absolu et translaté de moitié, un pseudo-élément n'y ajoutait
     rien. Le `padding`, lui, agrandit la boîte SANS déplacer le centre —
     c'est la translation de −50 % qui s'en charge. */
  .planet-node{ padding:12px; }

  /* Une ligne de tableau se touche entière : inutile de viser la cellule. */
  .pr-row td{padding-top:15px; padding-bottom:15px;}
}

/* Les tout petits écrans, suite. Les cibles tactiles élargies (44 px) ont
   regonflé la barre : sur une dalle de 320 px, le bouton du tiroir, celui de
   la langue et celui du portefeuille ne tiennent plus côte à côte. Le mot du
   bouton part déjà sous 360 px ; sous 340 px, la barre resserre tout le
   reste. Une barre qui déborde fait défiler la PAGE de côté — c'est le seul
   défaut de mise en page qui se voit sur chaque section à la fois. */
@media(max-width:339px){
  nav.wrap{gap:8px; padding-left:12px; padding-right:12px;}
  .nav-open{padding:9px 10px;}
  .lang-btn{min-width:34px; padding:9px 7px;}
  .nav-actions, .nav-right{gap:5px;}
  /* Le logo cède en dernier, et il cède : c'est le seul élément de la barre
     dont on peut rogner la fin sans rien perdre — le mot « pavapi » reste
     lisible tronqué, un bouton coupé ne se clique plus. */
  .logo{font-size:1rem; flex-shrink:1; min-width:0; overflow:hidden;}
  .logo .mark{width:20px; height:20px;}
  .logo-suffix{padding:2px 4px;}
}

/* PAS DE `image-rendering:pixelated` SUR TOUS LES CANEVAS.
   La règle a existé, en face d'une toile réduite de moitié : les scènes
   gagnaient du grain et perdaient leurs étiquettes, illisibles. Les scènes se
   dessinent donc de nouveau à la définition de l'écran (voir ui/planet.js).
   Le rendu par blocs reste là où le dessin EST fait pixel par pixel — le rat
   de l'atelier et les bêtes des guides — et ces canevas-là portent la règle
   eux-mêmes (ai.css, landing.css). */

/* ==================================================================== *
 *  LE CHARGEMENT PIXELISÉ — une seule attente pour tout le site
 * ==================================================================== *
 * La marque de l'écran, en gros pixels, pivote comme une pièce d'arcade
 * (rotation par crans : c'est le crantage qui fait « pixel ») ; ses cases
 * scintillent en vague ; une barre de huit blocs avance dessous. Construit
 * par assets/js/ui/pixload.js. Tout est en CSS : rien ne tourne en script
 * pendant qu'on attend. */
.pxl{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:22px 12px; color:var(--paper-faint); text-align:center;
}
.pxl-coin{width:56px; height:56px; perspective:240px;}
.pxl-mark{
  width:100%; height:100%; display:block; image-rendering:pixelated;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--pxl) 45%, transparent));
  animation:pxlSpin 1.6s steps(12) infinite; transform-style:preserve-3d;
}
.pxl-mark rect{animation:pxlGlow 1.2s steps(3) infinite; animation-delay:var(--d,0ms);}
@keyframes pxlSpin{
  0%{transform:rotateY(0deg);}
  45%{transform:rotateY(180deg);}
  50%{transform:rotateY(180deg);}
  95%{transform:rotateY(360deg);}
  100%{transform:rotateY(360deg);}
}
@keyframes pxlGlow{ 0%,100%{opacity:1;} 50%{opacity:.55;} }
.pxl-bar{display:flex; gap:3px;}
.pxl-bar i{
  width:9px; height:9px; background:color-mix(in srgb, var(--pxl) 18%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--pxl) 30%, transparent) inset;
  animation:pxlStep 1.6s steps(1) infinite;
}
.pxl-bar i:nth-child(2){animation-delay:.2s;} .pxl-bar i:nth-child(3){animation-delay:.4s;}
.pxl-bar i:nth-child(4){animation-delay:.6s;} .pxl-bar i:nth-child(5){animation-delay:.8s;}
.pxl-bar i:nth-child(6){animation-delay:1s;}  .pxl-bar i:nth-child(7){animation-delay:1.2s;}
.pxl-bar i:nth-child(8){animation-delay:1.4s;}
@keyframes pxlStep{ 0%{background:var(--pxl);} 25%,100%{background:color-mix(in srgb, var(--pxl) 18%, transparent);} }
.pxl-txt{font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;}
.pxl-txt::after{content:''; animation:pxlDots 1.2s steps(4) infinite;}
@keyframes pxlDots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
.pxl-sm{flex-direction:row; padding:6px 0; gap:9px;}
.pxl-sm .pxl-coin{width:22px; height:22px;}
/* Par-dessus un conteneur : le voile garde la place, le chargement au centre. */
.pxl-over{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ink,#14110F) 72%, transparent);
  animation:pxlIn .2s ease;
}
@keyframes pxlIn{ from{opacity:0;} to{opacity:1;} }
@media(prefers-reduced-motion:reduce){
  .pxl-mark, .pxl-mark rect, .pxl-bar i, .pxl-txt::after, .pxl-over{animation:none;}
  .pxl-bar i:nth-child(-n+4){background:var(--pxl);}
}

/* L'ÉCHANGE PORTE UN BOUTON DE PLUS (le portefeuille) : à 360 points, la barre
   débordait de vingt-huit points et faisait défiler la page de côté. Le logo
   — seul élément qu'on peut rogner sans rien perdre — cède dès 400 points. */
@media(max-width:400px){
  html[data-screen="swap"] nav.wrap .logo{flex-shrink:1; min-width:0; overflow:hidden;}
}

/* ================= FLUIDITÉ =================
   Les retours au geste : un bouton qui répond au survol et à la pression, un
   volet qui se déplie au lieu d'apparaître, une ligne de table qui s'éclaire.
   Rien ici ne déplace la page ; tout s'éteint sous `prefers-reduced-motion`
   (règle générale plus haut). Les survols ne sont déclarés que sur les
   appareils qui en ont un : sur écran tactile, un survol collant reste peint
   après le doigt. */
.btn{transition:transform .16s cubic-bezier(.25,.46,.45,.94), background-color .18s, border-color .18s, color .18s, box-shadow .2s;}
@media(hover:hover){
  .btn:not(:disabled):hover{transform:translateY(-1px);}
  .btn-primary:not(:disabled):hover{box-shadow:0 8px 22px -10px var(--gold);}
  tbody tr{transition:background-color .15s;}
}
.mode-btn, .preset-chips button, .vault-swap-btn, .pv-select, .lang-btn, .nav-open, .pi-card, .dash-card{
  transition:background-color .18s, color .18s, border-color .18s, transform .12s cubic-bezier(.25,.46,.45,.94), box-shadow .2s;
}
.preset-chips button:active, .mode-btn:active, .vault-swap-btn:active{transform:scale(.95);}
.more-block[open] > .more-block-body{animation:mbIn .28s cubic-bezier(.25,.46,.45,.94) both;}
@keyframes mbIn{from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:none;}}
input[type="number"], input[type="search"], input[type="text"], select{transition:border-color .18s, box-shadow .18s, background-color .18s;}
input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);}

/* ================= LEXIQUE =================
   Un mot marqué se reconnaît à son pointillé et à sa petite marque ; il ne
   change ni de taille ni de place quand on l'ouvre. La bulle est unique et
   posée par le script sous le mot (ou au-dessus s'il manque de place). */
[data-term]{
  text-decoration:underline dotted color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset:3px; text-decoration-thickness:1px;
  cursor:help; -webkit-tap-highlight-color:transparent;
  /* Zone de toucher agrandie sans bouger la ligne : le rembourrage d'un
     élément en ligne ne pousse pas ses voisins. */
  padding:8px 0; margin:-8px 0;
}
[data-term]::after{
  content:"?"; display:inline-block; margin-left:5px;
  width:14px; height:14px; line-height:14px; text-align:center;
  font:600 9px/14px var(--mono); color:var(--ink);
  background:color-mix(in srgb, var(--gold) 82%, transparent); border-radius:50%;
  vertical-align:2px; opacity:.85;
}
[data-term]:hover::after, [data-term]:focus-visible::after{opacity:1;}
.lex-pop{
  position:fixed; z-index:120; box-sizing:border-box;
  padding:12px 14px; background:var(--surface-2); color:var(--paper);
  border:1px solid var(--line-strong); border-top:2px solid var(--gold);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  font-size:.82rem; line-height:1.55;
  opacity:0; transform:translateY(-4px);
  transition:opacity .16s cubic-bezier(.25,.46,.45,.94), transform .16s cubic-bezier(.25,.46,.45,.94);
  pointer-events:none;
}
.lex-pop.in{opacity:1; transform:none; pointer-events:auto;}
.lex-pop.is-above{transform:translateY(4px); border-top:1px solid var(--line-strong); border-bottom:2px solid var(--gold);}
.lex-pop.is-above.in{transform:none;}
.lex-pop b{display:block; font:600 .72rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:7px;}
.lex-pop p{margin:0; color:var(--paper-dim);}
.lex-pop::before{
  content:""; position:absolute; left:var(--ax,50%); top:-6px; margin-left:-5px;
  border:5px solid transparent; border-bottom-color:var(--gold); border-top:0;
}
.lex-pop.is-above::before{top:auto; bottom:-6px; border-bottom:0; border-top:5px solid var(--gold);}

.nav-card-lex{width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; margin-top:4px; --c:var(--gold);}
.nav-card-lex .nav-card-mark{font:600 .9rem/1 var(--mono); color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius:50%; width:24px; height:24px;}
.nav-card-sub{display:block; font-size:.72rem; color:var(--paper-faint); margin-top:1px;}
.modal-lex{max-width:560px;}
.lex-search{
  width:100%; box-sizing:border-box; height:40px; margin:0 0 14px; padding:0 12px;
  background:var(--surface-2); color:var(--paper); border:1px solid var(--line-strong); border-radius:0;
  font:400 .9rem 'Inter',sans-serif;
}
.lex-list{margin:0; display:grid; gap:4px;}
.lex-item{padding:10px 12px; border:1px solid var(--line); background:var(--surface-2);}
.lex-item dt{font:600 .74rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.lex-item dd{margin:0; font-size:.84rem; line-height:1.55; color:var(--paper-dim);}
.lex-none{color:var(--paper-faint); font-size:.85rem; text-align:center; padding:14px 0 4px;}

/* ================= SIMULATEUR DE GAINS ================= */
.sim{margin-top:26px; max-width:440px;}
.sim-label{display:block; font-size:.8rem; color:var(--paper-dim); margin-bottom:8px;}
.sim-chips{margin-top:8px;}
.sim-chips button{min-height:36px; padding:8px 14px;}
.sim-chips button.on{border-color:var(--gold); color:var(--gold);}
@media(pointer:coarse){ .pr-chart-close{width:40px; height:40px;} }
.gain-preview{
  margin:12px 0 0; padding:10px 12px; font-size:.8rem; line-height:1.55; color:var(--paper-dim);
  background:color-mix(in srgb, var(--ok) 8%, var(--surface-2)); border-left:3px solid var(--ok);
  animation:mbIn .24s cubic-bezier(.25,.46,.45,.94) both;
}
.gain-preview b{color:var(--paper); font-family:var(--mono); font-weight:500;}
.gain-preview .faint{display:block; margin-top:3px; color:var(--paper-faint); font-size:.74rem;}

/* ================= PARTAGER · RETOUR EN HAUT ================= */
.btn-share{display:inline-flex; align-items:center; gap:8px;}
.btn-share svg{flex:none;}
.to-top{
  position:fixed; right:16px; bottom:18px; z-index:95;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--paper); border:1px solid var(--line-strong); border-radius:0;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.6); cursor:pointer;
  opacity:0; transform:translateY(10px);
  transition:opacity .2s cubic-bezier(.25,.46,.45,.94), transform .2s cubic-bezier(.25,.46,.45,.94), border-color .18s, background-color .18s;
}
.to-top.in{opacity:1; transform:none;}
/* La flèche prend la couleur de l'ÉCRAN (`--scr`) : l'or d'Apy, le vert de
   Track, le bleu de Price, le violet de l'échange, le rose de l'atelier. */
.to-top{color:var(--scr,var(--gold)); border-color:color-mix(in srgb, var(--scr,#E4B767) 55%, transparent);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.6), 0 0 0 3px color-mix(in srgb, var(--scr,#E4B767) 10%, transparent);}
.to-top:hover{background:var(--scr,var(--gold)); border-color:var(--scr,var(--gold)); color:var(--ink);}
.to-top:focus-visible{outline:2px solid var(--scr,var(--gold)); outline-offset:2px;}
/* Pendant que la bête de la page parle, elle occupe ce coin : la flèche s'efface. */
html:has(.botnote.is-in) .to-top{opacity:0; pointer-events:none;}
/* Le toast et le bouton partagent le bas de l'écran : le bouton s'écarte. */
@media(max-width:640px){ .to-top{right:12px; bottom:14px;} }

/* Un chiffre qui n'est pas encore là respire, au lieu de rester un tiret mort. */
.is-wait{color:var(--paper-faint) !important; animation:waitPulse 1.6s ease-in-out infinite;}
@keyframes waitPulse{0%,100%{opacity:.45;} 50%{opacity:1;}}

/* ================= LIEN D'ÉVITEMENT =================
   Invisible tant qu'on ne le prend pas au clavier : premier Tab de la page,
   il saute la barre et mène au contenu. */
.skip-link{position:absolute; left:12px; top:-60px; z-index:300; padding:10px 14px; background:var(--gold); color:var(--ink); font:600 .85rem 'Inter',sans-serif; text-decoration:none; transition:top .15s;}
.skip-link:focus{top:12px; outline:2px solid var(--paper); outline-offset:2px;}

/* ================= SOMMAIRE =================
   Une rangée de puces sous le héros des longues pages ; celle qu'on lit est
   marquée. Elle glisse de côté sur téléphone plutôt que de se replier. */
.sommaire{display:flex; gap:6px; margin:-8px auto 22px; padding-bottom:4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.sommaire::-webkit-scrollbar{display:none;}
.sommaire a{flex:none; display:inline-flex; align-items:center; min-height:36px; padding:7px 13px; font:500 .78rem 'Inter',sans-serif; color:var(--paper-dim); text-decoration:none; background:var(--surface); border:1px solid var(--line); transition:border-color .16s, color .16s, background-color .16s;}
.sommaire a:hover{border-color:var(--line-strong); color:var(--paper);}
.sommaire a.is-here{border-color:var(--gold); color:var(--gold); background:color-mix(in srgb, var(--gold) 10%, transparent);}

/* ================= RECHERCHE ================= */
.rch-modal{align-items:flex-start; padding-top:min(12vh,90px);}
.modal-rch{max-width:600px; padding:0; max-height:min(76vh,640px); display:flex; flex-direction:column;}
.rch-bar{display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-bottom:1px solid var(--line); color:var(--paper-faint);}
.rch-input{flex:1 1 auto; min-width:0; height:40px; background:none; border:0; color:var(--paper); font:400 1rem 'Inter',sans-serif; outline:none;}
.rch-input::-webkit-search-cancel-button{-webkit-appearance:none;}
.rch-list{overflow-y:auto; padding:6px;}
.rch-head{padding:10px 10px 4px; font:600 .68rem var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--paper-faint);}
.rch-item{display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px 10px; text-align:left; text-decoration:none; color:var(--paper); background:none; border:0; border-left:3px solid transparent; font:inherit; cursor:pointer;}
.rch-item.is-on{background:var(--surface-2); border-left-color:var(--gold);}
.rch-mark{flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--gold);}
.rch-mark svg{width:100%; height:100%;}
.rch-mark img{width:18px; height:18px; border-radius:50%;}
.rch-mark-lex{font:600 .8rem var(--mono); border:1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius:50%; width:22px; height:22px;}
.rch-mark-chip{font:600 .56rem/1 var(--mono); letter-spacing:.02em; color:var(--c,var(--paper-dim)); border:1px solid color-mix(in srgb, var(--c,#B0A79A) 45%, transparent); width:26px; height:22px; overflow:hidden;}
.rch-mark-logo{background:#F2EDE6;}
.rch-mark-logo img{border-radius:0;}
.rch-body{min-width:0; display:flex; flex-direction:column; gap:1px;}
.rch-body b{font-weight:600; font-size:.92rem;}
.rch-body span{font-size:.74rem; color:var(--paper-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rch-none{margin:0; padding:18px; text-align:center; color:var(--paper-faint); font-size:.86rem;}
.nav-card-rch{margin-top:6px;}

/* =====================================================================
   LA COUCHE DE MOUVEMENT (ui/motion.js) — partagée par toutes les pages.
   ===================================================================== */
html{scrollbar-color:color-mix(in srgb, var(--scr,#C97A3D) 45%, #2C261F) var(--ink);}
.read-bar{
  position:fixed; left:0; top:0; right:0; height:2px; z-index:400; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, color-mix(in srgb, var(--scr,#C97A3D) 40%, transparent), var(--scr,#C97A3D));
  box-shadow:0 0 10px color-mix(in srgb, var(--scr,#C97A3D) 60%, transparent);
}
/* La lueur qui suit le pointeur : un halo doux, à la couleur de la page. */
.is-glow{position:relative; isolation:isolate;}
.is-glow::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--scr,#C97A3D) 13%, transparent), transparent 70%);
  animation:glowIn .25s ease;
}
@keyframes glowIn{from{opacity:0} to{opacity:1}}
/* L'ENTRÉE D'UNE PAGE. Le titre, puis sa phrase, puis les boutons : trois
   temps courts, pour que l'œil lise dans l'ordre plutôt que tout d'un bloc. */
main h1{animation:heroIn .8s cubic-bezier(.22,.8,.3,1) both;}
main h1 em{display:inline-block; animation:heroEm 1s .15s cubic-bezier(.22,.8,.3,1) both;}
.tk-lede, .price-lede > p, .hero-lede, .hero .lede{animation:heroIn .8s .12s cubic-bezier(.22,.8,.3,1) both;}
.tk-hero-cta, .hero-cta, .price-markets{animation:heroIn .8s .24s cubic-bezier(.22,.8,.3,1) both;}
@keyframes heroIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes heroEm{from{opacity:0; transform:translateY(10px) skewX(-6deg); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}
/* Un onglet qui s'ouvre glisse et apparaît : on voit qu'on a changé de vue. */
[role="tabpanel"]:not([hidden]){animation:panelIn .42s cubic-bezier(.25,.46,.45,.94);}
@keyframes panelIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* Le bouton principal : un reflet passe au survol. */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); transition:left .6s cubic-bezier(.25,.46,.45,.94);
}
.btn-primary:hover::after{left:130%;}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985);}
@media (prefers-reduced-motion:reduce){
  main h1, main h1 em, .tk-lede, .price-lede > p, .hero-lede, .hero .lede, .tk-hero-cta, .hero-cta, .price-markets,
  [role="tabpanel"]:not([hidden]){animation:none;}
  .btn-primary::after{display:none;}
}

/* =====================================================================
   SOUTENIR PAVAPI, DANS LE PIED DE PAGE — sur toutes les pages
   (ui/donate.js). Le pied entier tient en un écran, téléphone compris :
   l'adresse, le bouton qui la copie et la mise en garde se lisent d'un
   seul regard. Les cartes se lisent comme les lignes d'actif : une marque,
   un titre, une action. L'adresse est en monospace, entière et
   sélectionnable — qui envoie de l'argent doit pouvoir la VÉRIFIER
   caractère par caractère.
   ===================================================================== */
.site-foot{padding:26px 0 30px;}
.site-foot .wrap{gap:16px;}
.site-foot .foot-legal{padding-top:14px; font-size:.72rem; line-height:1.6;}
.foot-donate{
  display:flex; flex-direction:column; align-items:center; gap:12px; width:100%;
  padding:16px 0 2px; border-top:1px solid var(--line);
  background:radial-gradient(90% 80% at 50% 0%, rgba(228,183,103,.07), transparent 70%);
}
.fd-title{margin:0; font-family:'Fraunces',serif; font-weight:500; text-align:center;
  font-size:clamp(1.15rem, 2vw, 1.45rem); line-height:1.2;}
.fd-note{margin:0; max-width:78ch; text-align:center; font-size:.72rem; line-height:1.55; color:var(--paper-faint);}
.foot-donate .sec-guide{margin:0; width:100%;}

.foot-donate .donate-grid{
  display:grid; gap:10px; width:100%; max-width:1180px;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr) minmax(0,1fr);
}
/* Une carte ou deux (une adresse pas encore renseignée) : la grille se
   resserre plutôt que de laisser une colonne vide. */
.foot-donate .donate-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:820px;}
.foot-donate .donate-grid:has(> :only-child){grid-template-columns:minmax(0, 420px); justify-content:center;}
.donate-card{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  border:1px solid var(--line); border-radius:0; background:var(--surface);
  padding:12px 14px; text-decoration:none; color:inherit;
  transition:border-color .15s var(--ease,ease), transform .15s var(--ease,ease);
}
.donate-card:hover{border-color:var(--line-strong);}
/* La carte PayPal est un <button> : on lui rend l'apparence d'une carte,
   que le navigateur lui retire par défaut. */
button.donate-card{font:inherit; cursor:pointer; appearance:none;}
.donate-paypal{align-items:center; justify-content:center; text-align:center;}
.donate-paypal .dc-head{flex-direction:column; gap:6px;}
.donate-paypal:hover{transform:translateY(-1px);}
.dc-head{display:flex; align-items:center; gap:10px; min-width:0;}
.dc-head b{display:block; font-size:.92rem; line-height:1.3;}
.dc-head small{display:block; color:var(--paper-faint); font-size:.72rem; margin-top:1px;}
.dc-mark{width:30px; height:30px; flex-shrink:0;}
.dc-chains{display:flex; flex-shrink:0;}
.dc-chain{width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
/* Trois réseaux, une adresse : les marques se chevauchent comme une pile. */
.dc-chains.is-many .dc-chain + .dc-chain{margin-left:-7px;}
.dc-chains.is-many .dc-chain{border-radius:50%; box-shadow:0 0 0 2px var(--surface);}
.dc-chain .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.dc-chain .logo-img.glyph{border-radius:0; object-fit:contain; background:none;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6));}
.dc-chain svg{width:100%; height:100%; color:var(--paper-dim);}
/* L'adresse tient en entier, quitte à passer à la ligne : une adresse
   tronquée par des points de suspension ne se vérifie pas. */
.dc-addr{
  font-family:var(--mono); font-size:.72rem; line-height:1.5; color:var(--paper-dim);
  background:var(--surface-2); border:1px solid var(--line); border-radius:0;
  padding:6px 9px; word-break:break-all; user-select:all;
}
.dc-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.dc-copy,.dc-open{
  display:inline-flex; align-items:center; gap:5px; min-height:36px;
  font-family:var(--mono); font-size:.72rem; cursor:pointer; text-decoration:none;
  background:var(--surface-2); border:1px solid var(--line); border-radius:0;
  padding:5px 10px; color:var(--paper-dim); white-space:nowrap;
}
.dc-copy:hover,.dc-open:hover{border-color:var(--line-strong); color:var(--paper);}
.dc-copy.ok{color:var(--ok); border-color:rgba(126,214,165,.4);}
.dc-chain-s{width:14px; height:14px;}
.dc-links{display:contents;}
.dc-name{min-width:0;}
.dc-copy-i{width:13px; height:13px; flex-shrink:0;}
.dc-copy.ok .dc-copy-i{color:var(--ok);}
.dc-go{font-family:var(--mono); font-size:.78rem; color:var(--copper);}
.donate-paypal:hover .dc-go{color:var(--gold);}

/* Sous 1280 points, les liens de wallet gardent leur marque et perdent leur
   nom : l'en-tête de la carte nomme déjà les réseaux, dans le même ordre, et
   la rangée tient sur une ligne au lieu de deux. */
@media (max-width: 1280px){
  .dc-open .dc-net{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .dc-open{min-width:44px; justify-content:center; gap:3px;}
}
/* Tablette : PayPal sur toute la largeur, les deux adresses dessous. */
@media (max-width: 980px){
  .foot-donate .donate-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .foot-donate .donate-paypal{grid-column:1 / -1; flex-direction:row; justify-content:space-between; text-align:left;}
  .foot-donate .donate-paypal .dc-head{flex-direction:row; gap:10px;}
}
/* Téléphone : une colonne, chaque adresse sur sa ligne. Les liens de
   wallet gardent leur marque et perdent leur nom — l'en-tête de la carte
   nomme déjà les réseaux, dans le même ordre. */
@media (max-width: 640px){
  .site-foot{padding:14px 0 16px;}
  .site-foot .wrap{gap:10px;}
  /* PayPal monte sur la ligne du titre : un bouton, pas une carte — son
     détail (le QR code, l'adresse e-mail) est dans la fenêtre qu'il ouvre.
     Une ligne de moins, et le pied tient jusqu'aux téléphones de 640 points. */
  .foot-donate{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center;
    column-gap:10px; row-gap:7px; padding-top:10px;}
  .foot-donate > *{grid-column:1 / -1;}
  .foot-donate .donate-grid{display:contents;}
  .foot-donate .fd-title{grid-column:1; grid-row:1; font-size:1.12rem; text-align:left;}
  .foot-donate .donate-paypal{grid-column:2; grid-row:1; flex-direction:row; align-items:center;
    gap:8px; padding:4px 10px; min-height:40px;}
  .foot-donate .donate-paypal .dc-head{flex-direction:row; gap:6px;}
  .foot-donate .donate-paypal small{display:none;}
  .foot-donate .donate-paypal .dc-go{font-size:.72rem;}
  .foot-donate .dc-crypto{grid-column:1 / -1;}
  .donate-card{padding:8px 10px; gap:6px;}
  .dc-mark{width:22px; height:22px;}
  /* LA CARTE CRYPTO EN DEUX LIGNES. En haut, les réseaux et leurs liens de
     wallet — la marque de chaque réseau, et plus son nom : l'en-tête le dit
     déjà, dans le même ordre. En bas, l'adresse entière et le bouton qui la
     copie. Trois lignes de moins par carte, rien de retiré. */
  .dc-crypto{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:8px; row-gap:6px;}
  .dc-crypto .dc-head{grid-column:1; grid-row:1;}
  .dc-crypto .dc-chains{display:none;}
  .dc-crypto .dc-actions{display:contents;}
  .dc-crypto .dc-links{display:flex; gap:5px; grid-column:2; grid-row:1;}
  .dc-crypto .dc-addr{grid-column:1; grid-row:2; align-self:stretch; display:flex; align-items:center;}
  .dc-crypto .dc-copy{grid-column:2; grid-row:2; align-self:stretch; justify-content:center; min-width:44px;}
  .dc-copy-t, .dc-open .dc-net{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .dc-copy-i{width:16px; height:16px;}
  .dc-open{padding:4px 7px; min-width:40px; min-height:40px; justify-content:center; gap:3px;}
  .dc-chain-s{width:18px; height:18px;}
  .dc-head b{font-size:.86rem;}
  .dc-head small{font-size:.7rem;}
  .dc-addr{font-size:.7rem; line-height:1.45; padding:4px 7px;}
  .site-foot .foot-legal{font-size:.7rem; line-height:1.45; padding-top:8px;}
  .fd-note{font-size:.7rem; line-height:1.45;}
  /* Le guide de la vitrine reste sur les grands écrans : sur téléphone, le
     pied entier tient en un écran, et c'est l'adresse qui compte. */
  .foot-donate .sec-guide{display:none;}
}

/* Les téléphones les plus étroits : quelques points d'interligne et d'air,
   jamais un corps sous le plancher de lisibilité. */
@media (max-width: 380px){
  .site-foot .wrap{gap:8px;}
  .foot-donate{row-gap:6px;}
  .site-foot .foot-legal, .fd-note{line-height:1.4;}
  .donate-card{padding:7px 9px;}
}

/* ---------------------------------------------------------------------
   La fenêtre PayPal — QR code et adresse e-mail
   Le QR est le seul élément de la page dont la LISIBILITÉ MACHINE compte :
   il garde son fond blanc d'origine (un QR sombre sur fond sombre ne se
   scanne pas) et une largeur suffisante pour être lu à l'écran comme au
   téléphone.
   --------------------------------------------------------------------- */
.pp-modal{position:fixed; inset:0; z-index:80; display:flex;
  align-items:center; justify-content:center; padding:20px;}
.pp-modal[hidden]{display:none;}
.pp-back{position:absolute; inset:0; background:rgba(6,8,14,.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.pp-box{
  position:relative; z-index:1; width:min(360px, 100%);
  max-height:calc(100vh - 40px); overflow:auto;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:0;
  padding:24px 22px 22px; text-align:center;
}
.pp-box h3{margin:0; font-size:1.05rem;}
.pp-close{
  position:absolute; top:4px; right:4px; line-height:1; min-width:44px; min-height:44px;
  background:none; border:0; color:var(--paper-faint); font-size:1.5rem; cursor:pointer;
}
.pp-close:hover{color:var(--paper);}
.pp-qr{width:100%; height:auto; border-radius:0; background:#fff; display:block;}
.pp-lead{margin:0; font-size:.82rem; color:var(--paper-dim); line-height:1.6;}
.pp-mail{
  font-family:var(--mono); font-size:.86rem; color:var(--paper);
  background:var(--surface-2); border:1px solid var(--line); border-radius:0;
  padding:9px 12px; word-break:break-all; user-select:all; width:100%;
}
.pp-copy{
  font-family:var(--mono); font-size:.75rem; cursor:pointer; min-height:36px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:0;
  padding:7px 14px; color:var(--paper-dim);
}
.pp-copy:hover{border-color:var(--line-strong); color:var(--paper);}
.pp-copy.ok{color:var(--ok); border-color:rgba(126,214,165,.4);}
.pp-site{font-family:var(--mono); font-size:.75rem; color:var(--copper); text-decoration:none;}
.pp-site:hover{color:var(--gold);}
/* Le fond ne défile pas derrière la fenêtre PayPal : sur mobile, un scroll
   qui traverse la modale donne l'impression que le clic n'a rien ouvert. */
body.modal-open{overflow:hidden;}