/* =====================================================================
   pavapi.com — page vitrine.
   Réutilise les jetons de assets/css/app.css ; n'ajoute que ce que la
   vitrine a en propre.
   ===================================================================== */

/*
 * `clip`, et surtout PAS `hidden`.
 *
 * `overflow-x:hidden` sur le corps de page en fait un conteneur de
 * défilement. Le `position:sticky` de la barre se met alors à se référer à ce
 * conteneur plutôt qu'à la fenêtre, et cesse de coller sur les navigateurs
 * qui appliquent la règle à la lettre — Safari et iOS en tête. La barre
 * d'apy remontait donc avec la page au lieu de rester en haut, quand celle
 * des pages de rendement, qui ne porte pas cette classe, tenait très bien.
 *
 * `overflow-x:clip` découpe exactement pareil sans créer de conteneur de
 * défilement : la barre reste collée. Sur un navigateur qui ne connaît pas
 * `clip`, la règle est ignorée et rien n'est découpé — ce qui ne coûte rien
 * ici, aucune page ne débordant horizontalement (vérifié sur les 32).
 */
.site{overflow-x:clip;}

/* ---------- en-tête ---------- */
.site-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(20,17,15,0.72); 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);
}
.site-nav.scrolled{border-bottom-color:var(--line); background:rgba(20,17,15,0.92);}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;}
.site-links{display:flex; gap:30px; font-size:.88rem; color:var(--paper-dim);}
.site-links a{text-decoration:none;} .site-links a:hover{color:var(--paper);}
@media(max-width:860px){ .site-links{display:none;} }

/* ---------- hero ---------- */
/* Titre centré au-dessus, puis une rangée où la planète — grande — occupe
   le milieu de l'écran, avec les deux chiffres qui comptent posés à sa
   droite. Colonnes symétriques (1fr / auto / 1fr) : la première reste vide
   exprès, pour que la planète se retrouve au centre plutôt que poussée par
   le contenu de la colonne de droite. */
.hero-globe{ position:relative; border-top:none; padding:56px 0; }

.hero-copy{
  max-width:60ch; margin:0 auto; text-align:center;
}

.hero-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.76rem; color:var(--paper-dim);
  border:1px solid var(--line-strong); border-radius:999px; padding:7px 15px;
  margin-bottom:26px; background:rgba(28,24,21,.6); backdrop-filter:blur(6px);
}
h1.site-head{
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.05; letter-spacing:-0.02em;
  margin:0 0 26px; max-width:20ch; margin-inline:auto;
}
h1.site-head em{font-style:italic; font-weight:400; color:var(--gold);}
.site-cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center;}
.btn-lg{padding:15px 28px; font-size:.98rem; border-radius:10px;}

.hero-stage-row{
  display:grid;
  /* Un plancher sur les colonnes de chiffres : sans lui, la colonne centrale
     (dimensionnée sur le contenu de la planète, pas sur l'espace restant)
     pouvait réclamer sa pleine largeur en `vw` et écraser les deux 1fr à
     rien — un bug qui ne se voyait qu'aux largeurs de bureau courantes
     (~1000-1400px), jamais en plein écran sur un grand moniteur. */
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center; gap:32px; margin-top:20px;
}
@media(max-width:980px){
  /* Les deux chiffres passent au-dessus de la planète, empilés pleine
     largeur — sinon, empilés après un globe qui occupe une bonne partie de
     l'écran, ils se perdent en bas de page et on croit qu'ils n'existent
     pas. Jamais côte à côte en dessous de 980px : à moitié de l'écran
     chacune, les cartes ne montrent plus un chiffre, mais un mot par ligne. */
  .hero-stage-row{
    grid-template-columns:1fr;
    grid-template-areas:"ml" "mr" "globe";
    justify-items:center; gap:14px;
  }
  .hero-metric-left{ grid-area:ml; }
  .hero-metric-right{ grid-area:mr; }
  .globe-stage{ grid-area:globe; margin-top:12px; }
}

.globe-stage{ display:flex; justify-content:center; min-width:0; }
.globe-wrap{
  /* Nettement plus grande qu'en colonne : libérée du texte, elle peut
     prendre toute la place disponible en hauteur sans déborder l'écran.
     Le facteur `vw` reste modeste : il mesure la largeur de la FENÊTRE, pas
     celle qui reste après les deux cartes de chiffres — trop haut, la
     planète les repousse à rien avant même que le plancher ci-dessus
     n'intervienne. */
  width:min(50vw,76vh,760px); aspect-ratio:1;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55));
}
@media(max-width:980px){ .globe-wrap{width:min(92vw,76vh,620px);} }

.hero-metric{ display:flex; min-width:0; }
.hero-metric-left{ justify-content:flex-end; }
.hero-metric-right{ justify-content:flex-start; }
.hero-metric .cell{
  width:min(400px,100%); text-align:center;
  background:rgba(28,24,21,.82); border:1px solid var(--line); border-radius:12px;
  padding:26px 34px; backdrop-filter:blur(6px);
}
.hero-metric .n{font-family:var(--mono); font-size:clamp(1.3rem,2.1vw,1.7rem); color:var(--paper); line-height:1.1; white-space:nowrap;}
.hero-metric .l{font-size:.76rem; color:var(--paper-dim); margin-top:7px; line-height:1.5;}
@media(max-width:980px){
  .hero-metric{ justify-content:center; width:100%; }
  .hero-metric .cell{ width:min(400px,100%); padding:22px 26px; }
  .hero-metric .n{ white-space:normal; }
}

/* ---------- liste des actifs ---------- */
.asset-table{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);}
.asset-row{
  display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:18px; align-items:center; padding:20px 24px;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
  transition:background .15s cubic-bezier(.25,.46,.45,.94);
}
.asset-row:last-child{border-bottom:none;}
.asset-row:hover{background:rgba(242,237,230,.028);}
.asset-row.head{background:var(--surface-2); padding:12px 24px; font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--paper-faint); cursor:default;}
.asset-row.head:hover{background:var(--surface-2);}
/* ---------------------------------------------------------------------
   Onglets de galaxie — fermés par défaut
   Le pli n'est pas une astuce d'encombrement : quatorze lignes déroulées
   d'emblée demandaient de comparer un rendement dollar à un rendement euro
   avant même d'avoir choisi sa monnaie. Fermé, l'onglet pose la question ;
   ouvert, il répond.

   L'ouverture est animée par `grid-template-rows: 0fr → 1fr` : c'est la
   seule façon d'animer une hauteur INCONNUE (le nombre d'actifs change) sans
   la mesurer en JavaScript à chaque image.
   --------------------------------------------------------------------- */
.galaxy-panel{backface-visibility:hidden;border-bottom:1px solid var(--line);}
.galaxy-panel:last-child{border-bottom:none;}

.galaxy-tab{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:18px; width:100%;
  padding:20px 24px; background:var(--surface-2); border:0; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
  transition:background .18s cubic-bezier(.25,.46,.45,.94);
}
.galaxy-tab:hover{background:rgba(242,237,230,.04);}
.galaxy-tab:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}

/* Le signe de la monnaie : dollar ou euro, en un caractère, avant tout texte. */
.gt-sign{
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.15rem; color:var(--gold);
  background:radial-gradient(circle at 34% 28%, rgba(228,183,103,.22), rgba(228,183,103,.05) 70%);
  box-shadow:inset 0 0 0 1px rgba(228,183,103,.35);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s cubic-bezier(.25,.46,.45,.94);
}
.galaxy-panel.open .gt-sign{transform:scale(1.06); box-shadow:inset 0 0 0 1px rgba(228,183,103,.6), 0 0 18px -6px var(--gold);}

.gt-label{
  display:block; font-family:var(--mono); font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--paper);
}
.gt-sub{display:block; font-size:.74rem; color:var(--paper-faint); margin-top:4px; line-height:1.5;}
.gt-title .gt-sub{max-width:52ch;}
.gt-figures{text-align:right;}
.gt-apy{font-family:var(--mono); font-size:1.15rem; color:var(--gold);}
.gt-figures .gt-sub{margin-top:2px;}
.gt-chev{
  color:var(--copper); font-size:1rem; line-height:1;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.galaxy-panel.open .gt-chev{transform:rotate(180deg);}

.galaxy-body{
  display:grid; grid-template-rows:0fr;
  /* `visibility` retardée à la fin du repli : pendant l'animation le contenu
     doit rester visible, une fois replié il ne doit plus être atteignable au
     clavier — un lien focusable dans un onglet fermé ferait défiler la page
     vers du vide. */
  visibility:hidden;
  transition:grid-template-rows .45s cubic-bezier(.25,.46,.45,.94), visibility 0s linear .45s;
}
.galaxy-panel.open .galaxy-body{
  grid-template-rows:1fr; visibility:visible;
  transition:grid-template-rows .45s cubic-bezier(.25,.46,.45,.94), visibility 0s;
}
.galaxy-inner{overflow:hidden; min-height:0;}
.galaxy-panel .asset-row:first-child{border-top:1px solid var(--line);}
.galaxy-panel .asset-row:last-child{border-bottom:none;}

/* Les lignes arrivent l'une après l'autre (`--d`, posé par landing.js). */
.galaxy-panel.open .asset-row{animation:row-in .45s cubic-bezier(.25,.46,.45,.94) both; will-change:opacity,transform; animation-delay:var(--d,0ms);}
@keyframes row-in{
  from{opacity:0; transform:translateY(-10px);}
  to{opacity:1; transform:none;}
}

@media(max-width:820px){
  .galaxy-tab{grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:16px 18px;}
  .galaxy-tab .gt-chev{display:none;}
  .gt-title .gt-sub{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .galaxy-body{transition:none;}
  .galaxy-panel.open .asset-row{animation:none;}
  .gt-sign,.gt-chev{transition:none;}
}
.ar-id{display:flex; align-items:center; gap:14px; min-width:0;}
/* Le logo de l'actif, seul : plus de pastille colorée derrière. Le logo porte
   déjà sa marque et sa couleur — le disque n'ajoutait rien et le rapetissait.
   Reste une lueur, à la couleur de l'actif, pour l'asseoir sur le fond. */
.ar-mark{width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--c) 45%, transparent));}
.ar-mark .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
/* Un glyphe n'a pas de fond à lui : il se pose dans un disque sombre teinté,
   sinon il flotterait sur le papier du tableau. */
.ar-mark .logo-img.glyph{width:100%; height:100%; border-radius:50%; object-fit:contain;
  padding:6px; background:color-mix(in srgb, var(--c) 22%, #14110F);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);}
.ar-mark svg{width:64%; height:64%; color:var(--c);}
.ar-mark .logo-init{font-family:var(--mono); font-weight:600; font-size:.8rem; color:var(--c);}

/* Les réseaux où le coffre travaille : la même marque que partout ailleurs,
   en petit, sous le nombre de marchés retenus. */
.ar-chains{display:flex; align-items:center; gap:5px; margin-top:7px; flex-wrap:wrap;}
.ar-chain{width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.ar-chain .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.ar-chain .logo-img.glyph{border-radius:0; object-fit:contain; background:none;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));}
.ar-chain svg{width:100%; height:100%; color:var(--paper-dim);}
.ar-chain .logo-init{font-size:.5rem; font-family:var(--mono); color:var(--paper-faint);}
.ar-chain-more{font-family:var(--mono); font-size:.68rem; color:var(--paper-faint);}
.ar-sym{display:block; font-family:var(--mono); font-size:1.02rem;}
.ar-name{display:block; font-size:.76rem; color:var(--paper-faint); margin-top:2px;}
.ar-apy{display:block; font-family:var(--mono); font-size:1.35rem; color:var(--gold);}
/* Sous-libellés toujours sur leur propre ligne : en flux, ils s'intercalaient
   dans la valeur et la rendaient illisible. */
.ar-sub{display:block; font-size:.72rem; color:var(--paper-faint); margin-top:3px; line-height:1.4;}
.ar-num{display:block; font-family:var(--mono); font-size:.95rem;}
.ar-venue{font-size:.84rem; min-width:0; line-height:1.45;}
.ar-go{color:var(--copper); font-size:1.1rem;}
@media(max-width:820px){
  .asset-row{grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; padding:18px;}
  .asset-row.head{display:none;}
  .ar-apy-cell{text-align:right;}
  .ar-num-cell,.ar-venue{grid-column:1/-1; font-size:.78rem; color:var(--paper-dim);}
  .ar-go{display:none;}
}

/* ---------- bandes ---------- */
.band{border-top:1px solid var(--line); padding:84px 0;}
.band-head{max-width:62ch; margin-bottom:38px;}
.band-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:14px;}
.band-head p{color:var(--paper-dim); font-size:1rem; line-height:1.7;}

.tri{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:18px;}
.tri .cell,.stack .cell{backface-visibility:hidden;border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--surface);}
.tri .cell .k,.stack .cell .k{font-family:var(--mono); color:var(--copper); font-size:.78rem; margin-bottom:12px;}
.tri .cell h3,.stack .cell h3{font-size:1.05rem; margin-bottom:9px;}
.tri .cell p,.stack .cell p{color:var(--paper-dim); font-size:.87rem; line-height:1.7; margin:0;}

/* ---------------------------------------------------------------------
   Cartes empilées au défilement
   Trois cartes côte à côte se lisent dans n'importe quel ordre, donc dans
   aucun. Collées les unes sous les autres, elles imposent leur ordre : la
   carte suivante monte par-dessus la précédente, qui recule (échelle,
   opacité, flou) au lieu de disparaître d'un coup — on garde le contexte de
   ce qu'on vient de lire.

   `--p` (0 → 1) est le taux de recouvrement, calculé au défilement par
   `bindStacks()` (landing.js) : le CSS ne sait pas mesurer la distance entre
   deux cartes, mais il sait tout faire du chiffre une fois posé.
   --------------------------------------------------------------------- */
.stack{
  /* La marge du bas d'une carte EST la course de défilement pendant laquelle
     la suivante vient la recouvrir. Trop courte, l'animation passe
     inaperçue ; trop longue, la section devient un tunnel. */
  --stack-gap:8vh;
  --stack-top:104px;
  display:block; padding-bottom:8px;
}
.stack .cell{backface-visibility:hidden;
  position:sticky;
  /* Toutes les cartes se calent au MÊME point : recouvrement total, sans
     bord de la précédente qui dépasse derrière. */
  top:var(--stack-top);
  /* Ordre de superposition explicite : la carte suivante recouvre la
     précédente. Sans lui, la transparence du flou et de l'opacité laisse
     transparaître le texte de la carte du dessous à travers celle du
     dessus — deux paragraphes lus l'un dans l'autre. */
  z-index:calc(var(--i,0) + 1);
  margin-bottom:var(--stack-gap);
  /* Ancrage en HAUT : une carte qui rétrécit doit reculer dans la pile, pas
     s'écarter de son bord collé. */
  transform-origin:top center;
  opacity:calc(1 - .42 * var(--p,0));
  transform:translateY(calc(-6px * var(--p,0))) scale(calc(1 - .05 * var(--p,0)));
  filter:blur(calc(1.6px * var(--p,0)));
  will-change:transform,opacity;
}
/* La dernière carte garde, elle aussi, sa marge pleine. C'est de la
   géométrie, pas de l'esthétique : une carte collée ne le reste que tant que
   sa BOÎTE DE MARGE tient dans son parent. Marge en moins sous la dernière,
   parent plus court d'autant — et la première carte se décolle avant même
   que la troisième soit arrivée, c'est-à-dire exactement quand la pile
   devait se former. */
/* Entrée : la carte monte à l'écran quand elle y arrive vraiment
   (IntersectionObserver), pas au chargement de la page. */
.stack .cell:not(.in){opacity:0; transform:translateY(42px);}
.stack .cell.in{transition:opacity .55s cubic-bezier(.25,.46,.45,.94), transform .55s cubic-bezier(.25,.46,.45,.94); will-change:opacity,transform;}

@media(max-width:820px){
  .stack{--stack-gap:22vh; --stack-top:88px;}
  .stack .cell{backface-visibility:hidden;padding:22px;}
}
/* Une carte plus haute que l'écran ne peut pas « coller » : sur les écrans
   courts on retombe sur un empilement normal, sans recouvrement. */
@media(max-height:620px), (prefers-reduced-motion:reduce){
  .stack .cell{backface-visibility:hidden;
    position:static; margin-bottom:16px;
    opacity:1; transform:none; filter:none; transition:none;
  }
  .stack .cell:not(.in){opacity:1; transform:none;}
}

.cta-band{padding:96px 0;}
.cta-band h2{font-size:clamp(1.9rem,4vw,2.9rem); max-width:18ch; margin:0 0 18px;}
.cta-band p{color:var(--paper-dim); max-width:52ch; margin:0 0 30px; line-height:1.7;}


/* ---------------------------------------------------------------------
   Soutenir pavapi — dons PayPal et cryptomonnaie.
   Les cartes se lisent comme les lignes d'actif : une marque, un titre, une
   action. L'adresse est en monospace et sélectionnable — quand on demande à
   quelqu'un d'envoyer de l'argent, le premier devoir est qu'il puisse
   VÉRIFIER caractère par caractère ce qu'il copie.
   --------------------------------------------------------------------- */
.donate-intro{max-width:62ch;}
.donate-intro{color:var(--paper-dim); line-height:1.7; margin-top:0; margin-bottom:22px;}

/* ---------- footer, page d'accueil ---------- */
footer .foot-row{justify-content:center;}
footer .foot-note{max-width:62ch; margin:0 auto; text-align:center;}
/* Borne haute sur la colonne : sans elle, une carte seule (PayPal en attente
   d'adresses crypto, par exemple) s'étirerait sur toute la largeur de la page
   et n'aurait plus l'air d'une carte.
   Cette carte seule est collée à droite plutôt que perdue au centre d'une
   ligne vide — mais dès qu'une deuxième carte arrive (une adresse crypto
   configurée), la grille se remplit et DOIT au contraire revenir au centre :
   collée à droite, elle laisse un vide béant sous le texte d'intro, à
   gauche, comme si la moitié de la section avait disparu. */
.donate-grid{display:grid; gap:14px; justify-content:end;
  grid-template-columns:repeat(auto-fit, minmax(290px, 420px));}
.donate-grid:has(> :nth-child(2)){justify-content:center;}
/* La carte PayPal prend la largeur de deux colonnes sur desktop, pour
   aligner la grille plutôt que de laisser une carte seule sur sa ligne. */
.donate-paypal{ align-items:center; text-align:center; }
.donate-paypal .dc-head{flex-direction:column; gap:8px;}
@media(min-width:660px){
  .donate-paypal{ grid-column:span 2; }
}
.donate-card{
  display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:18px; text-decoration:none; color:inherit; min-width:0;
}
.donate-card:hover{border-color:var(--line-strong);}
.dc-head{display:flex; align-items:center; gap:12px;}
.dc-head b{display:block; font-size:.98rem;}
.dc-head small{display:block; color:var(--paper-faint); font-size:.75rem; margin-top:2px;}
.dc-mark{width:34px; height:34px; flex-shrink:0;}
.dc-chain{width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.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 doit tenir 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:.74rem; line-height:1.6; color:var(--paper-dim);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; word-break:break-all; user-select:all;
}
.dc-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.dc-copy,.dc-open{
  font-family:var(--mono); font-size:.75rem; cursor:pointer; text-decoration:none;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; color:var(--paper-dim);
}
.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-go{font-family:var(--mono); font-size:.8rem; color:var(--copper);}
.donate-paypal:hover .dc-go{color:var(--gold);}
/* La carte PayPal est devenue un <button> : on lui rend l'apparence d'une
   carte, que le navigateur lui retire par défaut (fond, bordure, alignement
   du texte, police héritée). */
button.donate-card{font:inherit; text-align:left; cursor:pointer; appearance:none;}

/* ---------------------------------------------------------------------
   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-back{position:absolute; inset:0; background:rgba(6,8,14,.78); 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:16px;
  padding:24px 22px 22px; text-align:center;
}
.pp-box h3{margin:0; font-size:1.05rem;}
.pp-close{
  position:absolute; top:8px; right:10px; line-height:1;
  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:12px; 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:8px;
  padding:9px 12px; word-break:break-all; user-select:all; width:100%;
}
.pp-copy{
  font-family:var(--mono); font-size:.75rem; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  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;}

/* ---------- Section Track ----------
   La section reprend le bandeau, le titre et la paire de chiffres des
   rendements : ce sont deux vues d'un même sujet, et deux mises en page sans
   rapport les feraient passer pour deux produits. La SCÈNE, elle, diffère
   exprès — une sphère pour « où poser », une ceinture qui tourne pour « où
   ça circule ». C'est la seule divergence voulue ; toute autre est un
   défaut. */
.hero-track{
  /* NI CADRE, NI PANNEAU.
     Cette section portait un aplat bleuté et un filet en haut : deux traits
     qui, ensemble, la découpaient de la page comme une fenêtre posée dessus —
     et le champ d'astéroïdes se retrouvait encadré alors qu'on venait
     justement d'effacer le cadre de son canevas. Un dégradé radial qui
     s'éteint avant les bords remplace l'aplat : il donne à la section sa
     teinte propre sans jamais dessiner de limite, et le filet disparaît. */
  background:radial-gradient(120% 90% at 50% 0%, rgba(126,214,165,.06) 0%, transparent 60%);
  border-top:none;
}

/* LE PASSAGE D'UNE COULEUR À L'AUTRE.
   Les deux modules de la vitrine ont chacun leur teinte — le doré des
   rendements, le vert de Track — et ils se touchaient sans transition : la
   page changeait de couleur d'un bloc à l'autre, comme deux images collées.
   Ce voile enjambe la jointure et fait le fondu, doré en haut, vert en bas,
   éteint aux deux extrémités pour ne dessiner aucune limite. Il déborde au
   delà de la largeur du texte (`left/right:-50vw`) : une bande qui s'arrête
   au bord du contenu se verrait finir, ce qui reviendrait à tracer le trait
   qu'on cherche justement à effacer. */
.hero-track::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; width:100vw; transform:translateX(-50%);
  top:-190px; height:380px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(228,183,103,.07) 26%,
    rgba(150,200,140,.08) 50%,
    rgba(126,214,165,.10) 74%,
    transparent 100%);
}
/* Le contenu repasse devant le voile — sans quoi le dégradé se poserait
   par-dessus le titre et les chiffres. */
.hero-track > .wrap{position:relative; z-index:1;}
.hero-track .site-head{
  font-size:clamp(1.8rem,3.8vw,2.8rem);
  color:var(--paper);
}
.hero-track .hero-kicker{
  color:var(--paper-dim);
}
.hero-track .site-head em{font-style:italic; font-weight:400; color:#7ED6A5;}
/* Le bouton porte la couleur de la destination, pas celle de la page : c'est
   ce qui fait qu'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. */
.hero-track .btn-primary{background:#7ED6A5; color:var(--ink);}
.hero-track .btn-primary:hover{background:#9BE3BB;}
.hero-track .hero-sub{color:var(--paper-dim); max-width:64ch; margin:0 auto 18px; font-size:.96rem;}
.hero-track .hero-copy{max-width:70ch; margin:0 auto; text-align:center;}

/* La scène de la ceinture : une bande pleine largeur. Le globe des
   rendements, juste au-dessus, tient entre ses deux chiffres ; une pluie,
   non — elle a besoin de toute la largeur. Ses chiffres passent dessous.
   Le masque aux deux bords fait entrer et sortir les rochers sans qu'on voie
   la coupe : c'est ce qui rend la boucle invisible. */
.hero-track .belt-stage{
  position:relative; width:100%; margin-top:24px;
  aspect-ratio:26/9; max-height:min(42vh,380px);
  /* LE CHAMP N'A PAS DE BORD — DEUX MASQUES, UN PAR AXE.
     La version précédente posait une ellipse dont les rayons étaient des
     POURCENTAGES DE LA BOÎTE : `82% 82%` sur une bande de 1156 × 420 donnait
     un rayon vertical de 344 px là où le bord n'est qu'à 210. Le dégradé
     n'atteignait donc jamais zéro en haut ni en bas, et s'y coupait net —
     mesuré : une marche de 5 sur 255, invisible à l'analyse mais bien réelle
     à l'œil, et c'était le cadre qui restait.
     Deux dégradés LINÉAIRES croisés n'ont pas ce défaut : chacun va de bord à
     bord sur son axe, donc chacun atteint zéro là où il faut, par
     construction. `intersect` ne garde que ce que les deux laissent passer.
     `-webkit-` en premier : Safari ne comprend `mask-image` que préfixé. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 83%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 83%, transparent 100%);
          mask-composite:intersect;
}
.hero-track .belt-stage canvas{width:100%; height:100%; display:block; cursor:crosshair;}
@media(max-width:720px){ .hero-track .belt-stage{aspect-ratio:16/11;} }

.track-metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px; margin-top:26px;
}
.track-metrics .cell{
  text-align:center; padding:22px 26px; border-radius:12px;
  background:rgba(28,24,21,.88); border:1px solid var(--line-strong);
}
.track-metrics .n{
  font-family:var(--mono); font-size:clamp(1.3rem,2.1vw,1.7rem);
  color:#7ED6A5; line-height:1.1;
}
.track-metrics .l{font-size:.78rem; color:var(--paper-dim); margin-top:7px; line-height:1.5;}

/* La légende de la ceinture : une pastille par famille, et son effectif.
   Sans elle le champ est décoratif — une nuance ne veut rien dire tant que
   la page n'a pas pris la peine de la nommer. */
.track-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
  margin:26px auto 0; max-width:80ch;
}
.tl-item{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; color:var(--paper-dim);}
.tl-item b{font-weight:500; color:var(--paper);}
.tl-item i{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--c); box-shadow:inset 0 0 0 1.5px var(--r,var(--c));
}
.tl-item.alert i{box-shadow:inset 0 0 0 1.5px var(--r), 0 0 9px -1px var(--r);}
.tl-item > span{font-family:var(--mono); font-size:.7rem; color:var(--paper-faint);}

/* Le tiroir des écrans a déménagé dans assets/css/app.css : il n'est plus
   propre à la vitrine, les quatre écrans le portent. app.css est la seule
   feuille chargée par les quatre — landing.css ne l'est pas par Track ni par
   les pages de coffre, et le tiroir y serait resté sans style. */

/* ---------- LE TROISIÈME MODULE : l'échange ----------
   Même grammaire que les deux précédents — un titre centré, une phrase, un
   bouton à la couleur de la destination — et le même fondu qui enjambe la
   jointure, vert en haut (Track), violet en bas (l'échange). Rompre ici la
   règle posée entre les rendements et Track ferait réapparaître exactement
   le raccord net qu'on venait d'effacer. */
.hero-swap{
  position:relative; padding:90px 0 100px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(169,155,230,.06) 0%, transparent 60%);
}
.hero-swap::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; width:100vw; transform:translateX(-50%);
  top:-190px; height:380px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(126,214,165,.07) 26%,
    rgba(148,186,200,.07) 50%,
    rgba(169,155,230,.10) 74%,
    transparent 100%);
}
.hero-swap > .wrap{position:relative; z-index:1;}
.hero-swap .hero-copy{max-width:70ch; margin:0 auto; text-align:center;}
.hero-swap .site-head{font-size:clamp(1.8rem,3.8vw,2.8rem); color:var(--paper);}
.hero-swap .site-head em{font-style:italic; font-weight:400; color:#A99BE6;}
.hero-swap .hero-kicker{color:var(--paper-dim);}
.hero-swap .hero-sub{color:var(--paper-dim); max-width:64ch; margin:0 auto 18px; font-size:.96rem;}
.hero-swap .btn-primary{background:#A99BE6; color:var(--ink);}
.hero-swap .btn-primary:hover{background:#C0B4F0;}

/* Trois cartes plutôt qu'une scène animée : les deux modules précédents en
   ont chacun une, une troisième ferait une page qui bouge en continu. Elles
   disent ce qui est comparé, ce qui est dit, et ce qui n'est PAS fait — ce
   dernier point étant celui qu'on doit lire avant de cliquer. */
.swap-teaser{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px; margin-top:34px;
}
.st-card{
  display:flex; flex-direction:column; gap:6px;
  padding:18px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  border-top:2px solid rgba(169,155,230,.5);
}
.st-lbl{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper-faint);
}
.st-card b{font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; color:var(--paper);}
.st-card > span:last-child{font-size:.82rem; line-height:1.6; color:var(--paper-dim);}