/* =============================================================================
   Flexdger Wallet — feuille de la maquette, peau Ledger Live
   -----------------------------------------------------------------------------
   Canevas de 923 px de large = un ecran iPhone de 393 pt a 2,3486x. Toutes les
   longueurs sont des pixels de CAPTURE : la maquette s'exporte donc a la
   resolution native d'un vrai screenshot, sans reechantillonnage.

   La mise en page est en FLUX, pas en positions absolues : le nombre de jetons,
   de sections et d'actions cotees est variable, tout doit se replacer seul.

   Preffixe `lw-` (ledger wallet) pour ne croiser aucune regle de `mockup.css`,
   qui porte l'autre peau et peut vivre dans la meme page.
   ============================================================================= */

.lw {
  /* ------------------------------------------------------------- palette */
  --lw-fond:      #000000;
  --lw-carte:     #141414;   /* releve sur les cartes d'action et les tuiles */
  --lw-carte2:    #1c1c1c;   /* ronds du haut, pastilles                     */
  --lw-encre:     #ffffff;
  --lw-gris:      #8a8a8e;   /* quantites, sous-titres                       */
  --lw-gris2:     #5c5c60;   /* les centimes du solde                        */
  --lw-haut:      #4cc38a;   /* variation positive                           */
  --lw-bas:       #e88a86;   /* variation negative — un rouge DOUX, pas vif  */
  --lw-accent:    #d4a0ff;
  --lw-trait:     #232323;
  --lw-carte3:    #2a2a2a;   /* carte sur carte : feuilles, onglet actif     */
  --lw-creux:     #0b0b0b;   /* un creux PLUS SOMBRE que le fond : l'echange */
  --lw-touche:    #2c2c2e;   /* les touches du clavier                       */
  /* LE COUPLE INVERSE : le bouton plein, qui prend la couleur opposee au
     fond. En sombre il est blanc sur noir, en clair noir sur blanc. Ecrit en
     dur (#fff sur #000), il restait blanc sur blanc des que le theme clair
     existait — c'est la raison d'etre de ces deux jetons. */
  --lw-inverse:     #ffffff;
  --lw-sur-inverse: #000000;
  /* Les surfaces translucides : un voile blanc a 9 % donne un gris sur du
     noir et ne donne RIEN sur du blanc. Elles changent donc de signe avec le
     theme, comme le dock, qui n'est pas une carte mais une barre flottante. */
  --lw-voile-1:     rgba(255, 255, 255, .09);
  --lw-voile-2:     rgba(255, 255, 255, .13);
  --lw-dock:        rgba(30, 30, 30, .86);
  --lw-sur-dock:    #ffffff;
  --lw-onglet-actif: rgba(255, 255, 255, .08);

  /* HAUTEUR FIXE, ET NON `min-height`. La colonne de l'accueil fait plus de
     4 000 px : avec une hauteur minimale, la boite GRANDIT avec son contenu, et
     tout ce qui est ancre en bas — la barre d'onglets, les feuilles — part se
     poser 4 000 px plus bas, hors de l'ecran. Le telephone, lui, fait toujours
     1999 px de haut : c'est `.lw-ecran` qui defile a l'interieur. */
  position: relative;
  width: 923px;
  height: 1999px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--lw-fond);
  color: var(--lw-encre);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 38px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------- theme clair

   LE STUDIO LE PROPOSAIT DEJA, LE MOTEUR NE LE DESSINAIT PAS. `app.html` offre
   « Dark / Light » depuis le premier jour (select data-cfg="theme") et
   `renderLedger` ecrit bien data-theme="light" sur le canevas : aucune regle ne
   repondait. Un abonne qui choisissait Light voyait un ecran noir (15/11/2026).

   Rien d'autre que la palette ne change : toute la mise en page est partagee.
   C'est pour ca que les couleurs ecrites en dur ont ete passees en jetons
   juste au-dessus — chacune d'elles serait restee sombre ici.

   Valeurs relevees sur le theme clair de l'application de reference : un fond
   blanc, des cartes d'un gris tres pale, une encre presque noire. Le vert et
   le rouge sont RABATTUS : #4cc38a et #e88a86 passent sur noir, pas sur blanc,
   ou ils perdent leur contraste. L'ile dynamique, elle, reste noire : c'est le
   telephone, pas la maquette. */
.lw[data-theme="light"] {
  --lw-fond:        #ffffff;
  --lw-carte:       #f3f3f4;
  --lw-carte2:      #e9e9ec;
  --lw-carte3:      #dedee2;
  --lw-creux:       #f7f7f8;
  --lw-touche:      #d6d6da;
  --lw-encre:       #0a0a0a;
  --lw-gris:        #6a6a70;
  --lw-gris2:       #a4a4ac;
  --lw-haut:        #1f9d5f;
  --lw-bas:         #c4453f;
  --lw-trait:       #e2e2e6;
  --lw-inverse:     #000000;
  --lw-sur-inverse: #ffffff;
  --lw-voile-1:     rgba(0, 0, 0, .06);
  --lw-voile-2:     rgba(0, 0, 0, .08);
  --lw-dock:        rgba(248, 248, 249, .86);
  --lw-sur-dock:    #0a0a0a;
  --lw-onglet-actif: rgba(0, 0, 0, .07);
}

.lw *, .lw *::before, .lw *::after { box-sizing: border-box; }

/* LE CADRE QUI PORTE LA MAQUETTE REDUITE. `transform-origin` par defaut vaut
   `center` : le canevas reduit se retrouverait centre dans sa boite de 1999 px
   et donc tres au-dessous du cadre. C'est `fitMockup` qui pose cette classe. */
.lw-cadre { position: relative; overflow: hidden; }
.lw-cadre > .lw { transform-origin: 0 0; }
/* LE RESET DES BOUTONS EST SANS POIDS, et c'est volontaire. Ecrit `.lw button`,
   il pese plus qu'une classe (un type en plus) : il gagnait contre
   `.lw-pilule-b { background:#fff }` et contre `.lw-gros`, et TOUS les boutons
   blancs de la maquette sortaient transparents. Dans `:where()`, le selecteur
   ne pese rien : la moindre classe le reprend. */
:where(.lw) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lw svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------- barre d'etat */

.lw-etat {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  height: 125px; padding: 0 74px 0 78px;
}

/* ELLE S'EFFACE DANS L'APPLI INSTALLEE (15/11/2026). Le moteur dessine
   toujours sa barre : c'est elle qui donne aux apercus de l'accueil, aux
   extraits et aux captures du kit leur tete de screenshot, et c'est ce que
   l'operateur a demande le 14/11. Mais lancee depuis l'ecran d'accueil, la
   page est DEJA sous la vraie barre du telephone : garder la notre donnait
   DEUX barres dans une meme image, avec deux heures et deux niveaux de
   batterie qui se contredisent. C'est exactement le defaut que /blog/
   iphone-screenshot-without-status-bar decrit, et que le site promet de ne pas
   avoir. `visibility` et non `display` : la bande garde ses 125 px, donc la
   geometrie du canevas (923 x 1999) et le reperage des gestes ne bougent pas. */
@media (display-mode: standalone) {
  .lw-etat { visibility: hidden; }
}
.lw-etat-h { font-size: 42px; font-weight: 600; letter-spacing: .3px; }
/* L'ILE DYNAMIQUE est un vrai trou noir : sur une capture elle ne laisse voir
   ni heure ni reseau, et c'est ce qui donne a l'export sa tete de screenshot. */
.lw-ile {
  position: absolute; left: 50%; top: 32px; transform: translateX(-50%);
  width: 252px; height: 76px; border-radius: 38px; background: #000;
}
.lw-etat-d { display: flex; align-items: center; gap: 14px; }
/* LA SPECIFICITE COMPTE ICI. `.lw svg { width:100% }` habille les glyphes
   poses DANS un conteneur dimensionne ; le wifi, lui, porte sa classe sur le
   `svg` lui-meme. A specificite egale la regle generale gagnait (elle vient
   apres), et le glyphe prenait toute la largeur de la barre d'etat. */
.lw .lw-wifi { width: 46px; height: 35px; }
/* La pile : coque claire, remplissage vert, pourcentage DANS la coque — le
   reglage « afficher le pourcentage » des captures de reference. */
.lw-pile {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 36px; border-radius: 11px; background: #3dd16a;
  overflow: hidden;
}
.lw-pile i { position: absolute; left: 0; top: 0; bottom: 0; background: #3dd16a; }
.lw-pile b { position: relative; font-size: 26px; font-weight: 600; color: #04210f; }
.lw-pile::after {
  content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 14px; border-radius: 0 3px 3px 0; background: #3dd16a;
}

/* ----------------------------------------------------------------- ecrans */

/* Tout ce qui defile vit ici, sous la barre d'etat et sous la barre d'onglets,
   comme dans une vraie app. La barre de defilement est masquee : elle n'est pas
   dans la capture de reference, et elle se retrouverait dans l'export. */
.lw-ecran {
  display: none; position: relative;
  height: calc(1999px - 125px);
  overflow-y: auto; overflow-x: hidden;
  padding-bottom: 60px;
  scrollbar-width: none;
}
.lw-ecran::-webkit-scrollbar { width: 0; height: 0; }
.lw[data-tab="0"] .lw-ecran--home,
.lw[data-tab="2"] .lw-ecran--earn,
.lw[data-tab="3"] .lw-ecran--card { display: block; }
/* L'ECRAN SWAP EST UNE COLONNE, pas un bloc : son bouton de devis est pose en
   BAS de l'ecran et non sous les cartes (capture de reference). Une marge
   fixe ne tiendrait pas — la hauteur du haut change avec le jeton choisi. */
.lw[data-tab="1"] .lw-ecran--swap { display: flex; flex-direction: column; }
.lw-ecran--swap .lw-gros { margin-top: auto; }

/* LE HALO TRAME DU HAUT. Deux lueurs (violette a droite, ambre a gauche)
   decoupees par un masque de points : c'est la trame de l'app de reference.
   Deux masques se croisent — la grille de points ET un degrade qui eteint le
   bas —, d'ou `mask-composite`. Un moteur qui ne connait pas la composition
   garde la grille seule : on perd l'extinction, pas la trame. */
.lw-halo {
  position: absolute; left: 0; right: 0; top: -125px; height: 900px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(62% 54% at 84% 34%, #8d35c4 0%, rgba(139, 68, 196, 0) 70%),
    radial-gradient(58% 50% at 8% 54%, #8a4a12 0%, rgba(138, 74, 18, 0) 68%);
  /* LA TAILLE DES POINTS SE REGLE A L'OEIL CONTRE LA CAPTURE, et elle est
     sensible : a 1,45 px de rayon sur une grille de 9 la trame couvre 8 % de
     sa surface et la lueur se lit grise ; a 2,1 px elle en couvre 17 % et
     mange l'ecran. 1,7 px, soit 11 %, donne la trame fine et sourde de la
     capture (releve du 15/11/2026, trois essais compares). */
  -webkit-mask-image: radial-gradient(circle, #000 1.7px, transparent 1.9px), linear-gradient(#000 34%, transparent 82%);
  -webkit-mask-size: 9px 9px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle, #000 1.7px, transparent 1.9px), linear-gradient(#000 34%, transparent 82%);
  mask-size: 9px 9px, 100% 100%;
  mask-composite: intersect;
}
/* LES TROIS AUTRES ONGLETS ont leur propre lueur, une seule et plus haute : la
   leur se pose derriere un titre, pas derriere un solde (captures du 15/11). */
.lw-halo--bleu   { background: radial-gradient(74% 62% at 60% 26%, #3f68d8 0%, rgba(47, 78, 168, 0) 70%); }
.lw-halo--vert   { background: radial-gradient(76% 64% at 54% 24%, #1d9c7c 0%, rgba(16, 112, 90, 0) 70%); }
.lw-halo--indigo { background: radial-gradient(76% 64% at 58% 24%, #7a55f0 0%, rgba(91, 63, 208, 0) 70%); }

/* ---------------------------------------------------------- ronds du haut */

/* EPINGLEE EN HAUT, ET FLOUTANT CE QUI PASSE DESSOUS. Sur les captures de
   reference, cette rangee ne bouge pas quand l'ecran defile : le solde, les
   sections et la trame passent DERRIERE elle, brouilles. En flux, elle partait
   avec le contenu et le haut de l'ecran se vidait (releve du 15/11/2026). */
.lw-ronds {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 22px;
  padding: 33px 38px 14px;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
}
.lw-rond {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--lw-voile-1);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lw-rond svg { width: 52px; height: 52px; }
.lw-rond--fin { margin-left: auto; }
/* La pastille rose de notification : 26 px, posee a cheval sur le bord. */
.lw-rond.a-point::after, .lw-carte-ic.a-point::after {
  content: ""; position: absolute; top: 2px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%; background: #ff5a7a;
}
.lw-emoji { font-size: 58px; line-height: 1; }

/* ------------------------------------------------- bande de rafraichissement

   Trois etats, portes par `data-maj` sur `.lw` :
     (absent)  au repos, hauteur nulle ;
     "tire"    le doigt la tient ouverte, hauteur ecrite par le geste ;
     "charge"  elle se cale a 150 px, la roue tourne ;
     "fini"    meme hauteur, la roue cede la place a la coche verte.

   LA HAUTEUR VIENT D'UNE VARIABLE, pas d'une classe par palier : pendant le
   geste elle suit le doigt au pixel, et une classe ne saurait pas le faire.
   Pendant le tire, la transition est coupee — sinon chaque pixel du doigt
   lancerait une animation de 320 ms et la bande traînerait derriere lui. */
.lw-maj {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  height: var(--lw-tire, 0px); overflow: hidden;
  font-size: 40px; font-weight: 500; letter-spacing: -.3px;
  transition: height .34s cubic-bezier(.32, .72, 0, 1);
}
.lw[data-maj="tire"] .lw-maj { transition: none; }
.lw[data-maj="charge"] .lw-maj,
.lw[data-maj="fini"] .lw-maj { height: 150px; }

.lw-maj-ic { position: relative; flex: none; width: 46px; height: 46px; }
.lw-maj-roue, .lw-maj-ok { position: absolute; inset: 0; }
.lw-maj-ok { opacity: 0; }
.lw[data-maj="fini"] .lw-maj-roue { opacity: 0; }
.lw[data-maj="fini"] .lw-maj-ok { opacity: 1; }
/* La roue ne tourne QUE pendant le chargement : une roue qui tourne sous une
   coche verte dit deux choses contraires en meme temps. */
.lw[data-maj="charge"] .lw-maj-roue { animation: lw-tourne 820ms linear infinite; }
@keyframes lw-tourne { to { transform: rotate(360deg); } }
/* Au tire, la roue suit le doigt au lieu de tourner toute seule : c'est le
   geste qui l'entraine, et on sait qu'on n'a pas encore lache. */
.lw[data-maj="tire"] .lw-maj-roue {
  transform: rotate(calc(var(--lw-tire, 0px) * 2.4));
  opacity: calc(var(--lw-tire, 0px) / 110px);
}
.lw[data-maj="tire"] .lw-maj-t { opacity: calc(var(--lw-tire, 0px) / 150px - .3); }

@media (prefers-reduced-motion: reduce) {
  .lw-maj { transition: none; }
  .lw[data-maj="charge"] .lw-maj-roue { animation: none; }
}

/* --------------------------------------------------------------- le solde */

.lw-solde {
  position: relative; z-index: 2;
  margin-top: 96px; text-align: center;
  font-size: 118px; font-weight: 700; letter-spacing: -3.2px;
}
.lw-solde-c { color: var(--lw-gris2); }

.lw-pilule {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  margin: 26px auto 0; padding: 0 30px 0 36px;
  height: 80px; border-radius: 40px;
  background: var(--lw-voile-2);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font-size: 40px; font-weight: 500;
  width: fit-content;
}
.lw-pilule svg { width: 34px; height: 34px; color: var(--lw-gris); }
.lw-pilule.est-bas  .lw-pilule-p { color: var(--lw-bas); }
.lw-pilule.est-haut .lw-pilule-p { color: var(--lw-haut); }

/* ----------------------------------------------------------- les actions */

.lw-actions {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 72px 38px 0;
}
.lw-actions--deux { grid-template-columns: repeat(2, 1fr); }
.lw-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  height: 167px; border-radius: 26px; background: var(--lw-carte);
}
.lw-act i { display: block; width: 48px; height: 48px; }
.lw-act span { font-size: 38px; font-weight: 600; }

/* ------------------------------------------------------------------ promo */

.lw-promo {
  position: relative; z-index: 2; overflow: hidden;
  display: flex; align-items: center;
  margin: 24px 38px 0; height: 164px; border-radius: 26px;
  background: var(--lw-carte); padding: 0 0 0 30px;
}
.lw-promo-t { font-size: 38px; font-weight: 700; }
.lw-promo-s { margin-top: 8px; font-size: 34px; color: var(--lw-gris); }
.lw-promo-img { position: absolute; right: -10px; top: -8px; width: 300px; height: 190px; }
.lw-points { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.lw-points i { width: 13px; height: 13px; border-radius: 50%; background: #3a3a3a; }
.lw-points i.est-la { background: #8a8a8e; }

/* --------------------------------------------------------------- sections */

.lw-sect { margin-top: 56px; }
.lw-sect-tete {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 38px 24px;
}
.lw-sect-t {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 46px; font-weight: 700; letter-spacing: -.6px;
}
.lw-sect-t svg { width: 30px; height: 30px; }
.lw-sect-t--nu { gap: 0; }
.lw-sect-f {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 40px; font-weight: 500; color: var(--lw-gris);
}
.lw-sect-f svg { width: 30px; height: 30px; }
.lw-sect-l {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 38px; font-weight: 600; color: var(--lw-accent);
}
.lw-sect-l svg { width: 32px; height: 32px; }

/* ------------------------------------------------------------ rail Market */

/* Le rail DEBORDE a droite : la derniere tuile est coupee par le bord de
   l'ecran, exactement comme sur la capture. Le rembourrage de fin garde le
   meme retrait que le reste quand on fait defiler. */
.lw-rail {
  display: flex; gap: 20px; overflow: hidden;
  padding: 0 38px; scroll-padding: 38px;
}
.lw-tuile {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; width: 226px; height: 250px; border-radius: 26px; background: var(--lw-carte);
}
.lw-tuile-ic { width: 94px; height: 94px; border-radius: 50%; overflow: hidden; }
.lw-jauge { width: 128px; height: 82px; }
.lw-tuile-n { font-size: 40px; font-weight: 600; }
.lw-tuile-p { font-size: 34px; font-weight: 500; }
.lw-tuile-p.est-bas  { color: var(--lw-bas); }
.lw-tuile-p.est-haut { color: var(--lw-haut); }

/* ------------------------------------------------------ lignes de jetons */

.lw-lignes { margin: 0 38px; }
.lw-ligne { display: flex; align-items: center; gap: 26px; min-height: 124px; padding: 10px 0; }
.lw-ligne-ic { flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; }
.lw-ligne-g { flex: 1; min-width: 0; }
.lw-ligne-n {
  display: flex; align-items: center; gap: 14px;
  font-size: 40px; font-weight: 600; letter-spacing: -.3px;
}
.lw-ligne-q { margin-top: 6px; font-size: 34px; color: var(--lw-gris); }
.lw-ligne-d { text-align: right; }
.lw-ligne-v { font-size: 40px; font-weight: 600; }
.lw-ligne-p { margin-top: 6px; font-size: 34px; }
.lw-ligne-p.est-bas  { color: var(--lw-bas); }
.lw-ligne-p.est-haut { color: var(--lw-haut); }
.lw-apy {
  padding: 4px 16px; border-radius: 10px;
  background: rgba(76, 195, 138, .16); color: var(--lw-haut);
  font-size: 30px; font-weight: 600;
}

/* ------------------------------------------------------- rail des actions */

.lw-grille { display: flex; flex-direction: column; gap: 18px; padding: 0 38px; overflow: hidden; }
.lw-grille-r { display: flex; gap: 18px; }
.lw-puce {
  flex: none; display: inline-flex; align-items: center; gap: 18px;
  height: 100px; padding: 0 34px 0 14px; border-radius: 50px;
  background: var(--lw-carte); font-size: 38px; font-weight: 600;
}
.lw-puce-ic { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; }

/* ----------------------------------------------------------- cartes larges */

.lw-carte {
  display: flex; align-items: center; gap: 26px;
  margin: 0 38px; min-height: 152px; padding: 0 30px;
  border-radius: 26px; background: var(--lw-carte);
}
.lw-carte--nue { margin-top: 24px; }
.lw-carte-ic {
  position: relative; flex: none; display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%; background: var(--lw-carte2);
}
.lw-carte-ic svg { width: 46px; height: 46px; }
.lw-carte-g { flex: 1; min-width: 0; }
.lw-carte-t { font-size: 40px; font-weight: 600; }
.lw-carte-s { margin-top: 6px; font-size: 34px; color: var(--lw-gris); }
.lw-carte-chev { flex: none; width: 32px; height: 32px; color: var(--lw-gris); }
.lw-carte-plus { flex: none; font-size: 46px; color: var(--lw-encre); letter-spacing: 2px; }
.lw-pilule-b {
  flex: none; height: 86px; padding: 0 42px; border-radius: 43px;
  background: var(--lw-inverse); color: var(--lw-sur-inverse); font-size: 38px; font-weight: 600;
}
/* La pile d'icones de la carte « Accounts » : elles se chevauchent de 40 %. */
.lw-pile-ic { flex: none; display: flex; }
.lw-pile-ic i { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; margin-left: -14px; border: 3px solid var(--lw-carte); }
.lw-pile-ic i:first-child { margin-left: 0; }
.lw-pile-ic .lw-pile-n {
  display: grid; place-items: center; background: var(--lw-inverse); color: var(--lw-sur-inverse);
  font-size: 26px; font-weight: 700; font-style: normal;
}

/* -------------------------------------------------------------- For you */

.lw-pourvous {
  position: relative; margin: 0 38px; height: 420px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, #e9e6f2 0%, #b9b3cc 42%, #2a2733 100%);
  padding: 34px;
}
.lw-pourvous-x { position: absolute; right: 30px; top: 30px; width: 46px; height: 46px; color: var(--lw-carte2); }
.lw-pourvous-eti {
  display: inline-block; padding: 10px 24px; border-radius: 12px;
  background: rgba(212,160,255, .9); color: #1a1030;
  font-size: 30px; font-weight: 600;
}
.lw-pourvous-t { position: absolute; left: 34px; bottom: 34px; font-size: 54px; font-weight: 700; letter-spacing: -1px; }

/* ------------------------------------------------------- onglets Swap/Earn */

.lw-titre {
  position: relative; z-index: 2;
  margin: 84px 54px 0; font-size: 86px; font-weight: 700;
  line-height: 1.07; letter-spacing: -2.4px; text-align: center;
}
.lw-titre--court { margin-top: 110px; }
.lw-sous {
  position: relative; z-index: 2;
  margin: 30px 54px 0; font-size: 38px; color: var(--lw-gris); text-align: center;
}
.lw-jauge-l {
  position: relative; z-index: 2; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  margin: 70px 38px 0; height: 150px; padding: 0 38px;
  border: 2px solid var(--lw-trait); border-radius: 26px;
  font-size: 38px; color: var(--lw-gris);
}
.lw-jauge-l b { font-size: 46px; font-weight: 700; color: var(--lw-encre); }
.lw-jauge-l i { font-style: normal; font-size: 38px; font-weight: 500; color: var(--lw-gris); }
.lw-jauge-b { position: absolute; left: 0; top: 0; width: var(--p, 40%); height: 3px; background: var(--lw-inverse); }

/* L'echange : deux cartes et le bouton d'inversion a cheval entre elles. */
.lw-echange { position: relative; z-index: 2; margin: 46px 38px 0; }
.lw-ech-carte { padding: 32px 34px; background: var(--lw-creux); border: 2px solid var(--lw-trait); }
.lw-ech-carte--haut { border-radius: 26px; }
.lw-ech-carte--bas { border-radius: 26px; margin-top: 30px; min-height: 260px; }
.lw-ech-tete { display: flex; align-items: center; justify-content: space-between; font-size: 40px; color: var(--lw-gris); }
.lw-max { height: 66px; padding: 0 28px; border-radius: 33px; background: var(--lw-carte); font-size: 34px; font-weight: 600; color: var(--lw-encre); }
.lw-ech-corps { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.lw-ech-montant { font-size: 78px; font-weight: 500; color: var(--lw-gris2); }
.lw-sel {
  display: inline-flex; align-items: center; gap: 14px;
  height: 92px; padding: 0 24px 0 12px; border-radius: 46px;
  background: var(--lw-carte); font-size: 40px; font-weight: 600;
}
.lw-sel svg { width: 30px; height: 30px; }
.lw-sel-ic { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; }
.lw-sel--vide { padding-left: 30px; }
.lw-sel--pt { height: 66px; font-size: 32px; padding: 0 20px 0 8px; }
.lw-sel--pt .lw-sel-ic { width: 48px; height: 48px; }
.lw-ech-pied { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; font-size: 34px; color: var(--lw-gris); }
.lw-ech-conv { display: inline-flex; align-items: center; gap: 10px; }
.lw-ech-conv svg { width: 30px; height: 30px; }
/* ANCRE A LA CARTE DU BAS. Il etait pose a 318 px du haut de l'echange, une
   hauteur qui supposait celle de la carte du dessus : des que celle-ci grandit
   (un nom de compte plus long, une quantite a huit decimales), le bouton
   tombait sur la ligne du solde et la coupait (releve du 15/11/2026). Ancre
   au haut de la SECONDE carte, il est a la jonction quoi qu'il arrive. */
.lw-ech-bascule {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; z-index: 2;
  width: 92px; height: 92px; border-radius: 26px;
  background: var(--lw-creux); border: 2px solid var(--lw-trait);
}
/* La carte du haut laisse la place au bouton : sans ce pied, sa derniere ligne
   passe sous lui. */
.lw-ech-carte--haut { padding-bottom: 62px; }
.lw-ech-carte--bas { position: relative; }
.lw-ech-bascule svg { width: 40px; height: 40px; }
.lw-gros {
  display: block; margin: 70px 38px 0; width: calc(100% - 76px);
  height: 118px; border-radius: 59px;
  background: var(--lw-inverse); color: var(--lw-sur-inverse); font-size: 42px; font-weight: 600;
}
.lw-gros--eteint { background: var(--lw-carte); color: var(--lw-gris2); }
.lw-cb { margin: 80px 38px 0; }

/* ------------------------------------------------------------ barre basse */

.lw-dock {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 6px;
  height: 116px; padding: 0 10px; border-radius: 58px;
  background: var(--lw-dock);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.lw-onglet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 198px; height: 96px; border-radius: 48px; color: var(--lw-gris);
}
.lw-onglet i { display: block; width: 44px; height: 44px; }
.lw-onglet span { font-size: 30px; font-weight: 500; }
.lw-onglet.est-actif { background: var(--lw-onglet-actif); color: var(--lw-sur-dock); }

/* --------------------------------------------------------------- feuilles */

.lw-voile {
  position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.lw[data-feuille="transfer"] .lw-voile { opacity: 1; pointer-events: auto; }

.lw-feuille {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 0 0 60px; border-radius: 40px 40px 0 0;
  background: var(--lw-carte);
  transform: translateY(102%); transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
.lw-feuille.est-ouverte { transform: translateY(0); }

.lw-poignee {
  display: block; width: 92px; height: 9px; border-radius: 5px;
  margin: 22px auto 0; background: #4a4a4a;
}
.lw-fe-x {
  position: absolute; right: 36px; top: 46px;
  display: grid; place-items: center;
  width: 86px; height: 86px; border-radius: 50%; background: var(--lw-carte2);
}
.lw-fe-x svg { width: 42px; height: 42px; }
.lw-fe-t { margin: 96px 38px 36px; font-size: 62px; font-weight: 700; letter-spacing: -1.2px; }
.lw-feuille .lw-carte { background: var(--lw-carte2); }
.lw-feuille .lw-carte-ic { background: var(--lw-carte3); }

/* L'ecran du profil est PLEIN, pas une feuille basse : il recouvre tout et
   revient par la fleche, comme une pile de navigation. */
/* L'ecran du profil commence SOUS la barre d'etat : la capture de reference la
   garde visible (heure, reseau, batterie) — c'est une pile de navigation dans
   l'app, pas un ecran plein qui mangerait le haut du telephone. */
.lw-feuille--plein {
  top: 125px; border-radius: 0; background: var(--lw-fond);
  overflow: hidden;
}
.lw-fe-barre { display: flex; align-items: center; justify-content: space-between; padding: 33px 38px 0; }
.lw-fe-r { display: grid; place-items: center; width: 70px; height: 70px; }
.lw-fe-r svg { width: 52px; height: 52px; }
.lw-fe-d { display: flex; gap: 22px; }
.lw-fe-d .lw-rond { width: 78px; height: 78px; background: none; }
.lw-fe-d .lw-rond svg { width: 50px; height: 50px; }
.lw-pr-ava {
  display: grid; place-items: center;
  width: 168px; height: 168px; margin: 70px auto 0;
  border-radius: 50%; background: var(--lw-carte);
}
.lw-pr-ava svg { width: 80px; height: 80px; }

/* ===========================================================================
   LES SIX ECRANS SECONDAIRES
   Marche, Analytics, Discover, Recherche, Historique, Trade perps.
   =========================================================================== */

/* Dans une feuille pleine, l'ecran defile sous sa barre de tete : sa hauteur
   est celle du telephone moins la barre d'etat et moins cette barre-la. */
.lw-ecran--pile { display: block; height: calc(1999px - 125px - 118px); }
.lw-fe-barre--titre { position: relative; padding-bottom: 24px; }
.lw-fe-titre {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 46px; font-weight: 700; letter-spacing: -.6px; white-space: nowrap;
}
.lw-h1 { margin: 10px 38px 0; font-size: 72px; font-weight: 700; letter-spacing: -1.8px; }
.lw-bloc { margin: 28px 38px 0; }
.lw-points-v { font-size: 46px; letter-spacing: 2px; }

/* Le champ de recherche. Actif, il prend le cadre violet et le curseur. */
.lw-champ {
  display: flex; align-items: center; gap: 20px;
  height: 108px; padding: 0 30px; border-radius: 22px;
  background: var(--lw-carte); color: var(--lw-gris); font-size: 40px;
}
.lw-champ-ic { flex: none; width: 44px; height: 44px; }
.lw-champ.est-actif { border: 3px solid var(--lw-accent); background: transparent; }
.lw-curseur { width: 3px; height: 48px; background: var(--lw-accent); }
.lw-champ.est-actif .lw-champ-t { margin-left: -12px; }

/* ------------------------------------------------------------------ Market */

.lw-rail--stats { margin-top: 30px; }
.lw-stat {
  flex: none; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  width: 404px; height: 170px; padding: 0 32px;
  border-radius: 26px; background: var(--lw-carte);
}
.lw-stat-l { font-size: 34px; color: var(--lw-gris); }
.lw-stat-v { font-size: 48px; font-weight: 700; letter-spacing: -.8px; }
.lw-stat-v--pt { font-size: 44px; }
.lw-stat-p { font-size: 34px; }
.lw-stat-p.est-bas { color: var(--lw-bas); }
.lw-stat-p.est-haut { color: var(--lw-haut); }
.lw-stat--humeur { position: relative; }
.lw-stat-j { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 150px; height: 96px; }
.lw-sect-tete--serre { margin-top: 44px; }
.lw-filtre { display: block; width: 46px; height: 46px; }
.lw-rang {
  display: inline-block; margin-left: 10px; padding: 2px 14px;
  border-radius: 9px; background: var(--lw-carte2);
  font-size: 28px; font-weight: 600; color: var(--lw-encre);
}

/* La bascule d'onglets en texte : l'actif prend une pastille, les autres non. */
.lw-bascule { display: flex; gap: 14px; overflow: hidden; padding: 0 38px; margin-top: 22px; }
.lw-bascule-o {
  flex: none; padding: 16px 32px; border-radius: 20px;
  font-size: 38px; font-weight: 500; color: var(--lw-gris);
}
.lw-bascule-o.est-actif { background: var(--lw-carte); color: var(--lw-encre); font-weight: 600; }
.lw-bascule--plages { margin: 40px 38px 0; padding: 8px; background: var(--lw-carte); border-radius: 24px; }
.lw-bascule--plages .lw-bascule-o { flex: 1; text-align: center; padding: 16px 0; }
.lw-bascule--plages .lw-bascule-o.est-actif { background: var(--lw-carte3); }
/* Discover ecrit ses categories en capitales espacees, et souligne l'active. */
.lw-bascule--maj .lw-bascule-o {
  padding: 10px 0; margin-right: 34px; border-radius: 0;
  font-size: 36px; letter-spacing: 1.2px;
}
.lw-bascule--maj .lw-bascule-o.est-actif { background: none; box-shadow: inset 0 -5px 0 var(--lw-encre); }

/* --------------------------------------------------------------- Analytics */

.lw-an-l { font-size: 38px; color: var(--lw-gris); }
.lw-solde--an { margin-top: 12px; text-align: left; font-size: 96px; }
.lw-an-var { margin-top: 14px; font-size: 38px; }
.lw-an-var.est-bas { color: var(--lw-bas); }
.lw-an-var.est-haut { color: var(--lw-haut); }
.lw-an-abs, .lw-an-q { color: var(--lw-gris); }

.lw-courbe { position: relative; margin: 54px 38px 0; height: 430px; }
.lw-courbe svg { width: 100%; height: 100%; }
.lw-marque {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-size: 30px; color: var(--lw-encre); white-space: nowrap;
}
.lw-marque i { font-style: normal; font-size: 22px; line-height: 1; }
/* Les deux etiquettes sont posees au point meme de l'extreme, en `top` calcule
   au rendu : la fleche doit toucher la courbe, pas le bord du cadre. */
.lw-marque--bas { flex-direction: column-reverse; }

.lw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 38px 0; }
.lw-duo-c {
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
  height: 164px; padding: 0 30px; border-radius: 26px; background: var(--lw-carte);
}
.lw-duo-l { font-size: 34px; color: var(--lw-gris); }
.lw-duo-v { font-size: 42px; font-weight: 600; }
.lw-duo-v.est-bas { color: var(--lw-bas); }
.lw-duo-v.est-haut { color: var(--lw-haut); }

.lw-anneau { display: flex; align-items: center; gap: 36px; margin: 24px 38px 0; }
.lw-anneau > svg { flex: none; width: 190px; height: 190px; }
.lw-legende { flex: 1; display: flex; flex-wrap: wrap; gap: 16px 40px; font-size: 36px; }
.lw-legende span { display: inline-flex; align-items: center; gap: 14px; }
.lw-legende i { width: 20px; height: 20px; border-radius: 50%; }
/* Le bouton pose au bas de l'ecran, au-dessus du contenu qui defile. */
.lw-gros--pose { position: absolute; left: 38px; right: 38px; bottom: 40px; width: auto; margin: 0; }
.lw-queue--gros { height: 260px; }

/* ---------------------------------------------------------------- Discover */

.lw-four { margin: 34px 38px 0; }
.lw-four-l { display: flex; align-items: center; gap: 30px; padding: 22px 24px; border-radius: 22px; }
.lw-four-l.est-vedette { background: linear-gradient(90deg, #3a3350, #262233); }
.lw-four-ic {
  flex: none; display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 22px; overflow: hidden;
}
.lw-four-ic svg { width: 56px; height: 56px; }
.lw-four-let { font-size: 48px; font-weight: 700; }
/* Le catalogue est ecrit en chasse FIXE, capitales comprises : c'est ce qui
   distingue cet ecran du reste de l'app. */
.lw-four-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 38px; font-weight: 500; letter-spacing: .4px;
}
.lw-four-u { margin-top: 8px; font-size: 32px; color: var(--lw-gris); }

/* --------------------------------------------------------------- Recherche */

.lw-fe-barre--rech { display: flex; align-items: center; gap: 24px; padding: 33px 38px 24px; }
.lw-fe-barre--rech .lw-champ { flex: 1; height: 100px; }
.lw-ligne--plate { min-height: 104px; }
.lw-ligne-ic--pt { width: 64px; height: 64px; }
.lw-ligne-d--plate { display: flex; align-items: center; gap: 18px; }
.lw-ligne-d--plate .lw-ligne-p { margin: 0; }
.lw-lignes--serre .lw-ligne { padding: 4px 0; }
/* Le clavier mange le bas de l'ecran : la liste s'arrete au-dessus. */
.lw-ecran--clavier { height: calc(1999px - 125px - 160px - 870px); }

.lw-clavier {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 12px 0; background: #1c1c1e;
  border-radius: 34px 34px 0 0;
}
.lw-clavier-sug { display: flex; justify-content: center; gap: 240px; height: 72px; align-items: center; }
.lw-clavier-sug i { width: 3px; height: 44px; background: #3a3a3c; }
.lw-clavier-r { display: flex; justify-content: center; gap: 14px; margin-bottom: 22px; }
.lw-clavier-r--2 { padding: 0 2px; }
.lw-clavier-r--3 { gap: 14px; }
.lw-t {
  display: grid; place-items: center;
  width: 80px; height: 108px; border-radius: 12px;
  background: #4a4a4c; font-size: 44px; font-weight: 400;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.lw-t svg { width: 44px; height: 44px; }
.lw-t--large { width: 118px; background: var(--lw-touche); }
.lw-t--num { width: 140px; background: var(--lw-touche); font-size: 36px; }
.lw-t--emo { width: 94px; background: var(--lw-touche); }
.lw-t--espace { position: relative; flex: 1; }
.lw-t--espace b { position: absolute; right: 24px; bottom: 14px; font-size: 26px; font-weight: 400; color: var(--lw-gris); }
.lw-clavier-pied { display: flex; justify-content: space-between; padding: 6px 30px 34px; }
.lw-clavier-pied span { display: block; width: 52px; height: 52px; }

/* -------------------------------------------------------------- Historique */

.lw-hi-date { margin: 48px 0 18px; font-size: 48px; font-weight: 700; letter-spacing: -.8px; }
.lw-hi-date:first-child { margin-top: 18px; }
.lw-ligne-ic--mvt { position: relative; overflow: visible; }
.lw-ligne-ic--mvt > svg,
.lw-ligne-ic--mvt > img { border-radius: 50%; overflow: hidden; }
.lw-mvt {
  position: absolute; right: -6px; top: -4px;
  display: block; width: 40px; height: 40px;
  border-radius: 50%; border: 4px solid var(--lw-fond);
}
.lw-ligne-v.est-haut { color: var(--lw-haut); }

/* ------------------------------------------------------------ Trade perps */

.lw-act.est-eteint { color: var(--lw-gris2); }
.lw-compte { font-weight: 500; color: var(--lw-gris); }
.lw-levier {
  display: inline-block; margin-left: 10px; padding: 3px 16px;
  border-radius: 9px; background: var(--lw-carte2);
  font-size: 28px; font-weight: 500; color: var(--lw-gris);
}

/* --------------------------------------------- la liste des comptes et la
   fiche d'un jeton. Toutes deux reprennent les blocs de l'accueil ; seules
   les pieces qui leur sont propres sont ici. */

.lw-ligne--compte { cursor: pointer; }
.lw-ligne--compte.est-actif .lw-ligne-n::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 14px; height: 14px; margin-left: 14px; border-radius: 50%;
  background: var(--lw-accent);
}
.lw-pile-ic--gros i { width: 72px; height: 72px; margin-left: -22px; border: 4px solid var(--lw-carte2); }
.lw-pile-ic--gros i:first-child { margin-left: 0; }
.lw-pile-vide { display: grid; place-items: center; background: var(--lw-carte2); color: var(--lw-gris); }
.lw-pile-vide svg { width: 36px; height: 36px; }
.lw-ajoute-compte { width: calc(100% - 76px); text-align: left; }

.lw-fj-tete { text-align: center; margin-top: 34px; }
.lw-fj-ic { display: block; width: 128px; height: 128px; margin: 0 auto 26px; border-radius: 50%; overflow: hidden; }
.lw-fj-q { font-size: 40px; color: var(--lw-gris); }
.lw-fj-v { margin-top: 12px; font-size: 86px; font-weight: 700; letter-spacing: -2px; }
.lw-fj-p { margin-top: 12px; font-size: 38px; }
.lw-fj-p.est-bas  { color: var(--lw-bas); }
.lw-fj-p.est-haut { color: var(--lw-haut); }
/* La couleur de la courbe vit dans SA PROPRE variable, posee sur la feuille au
   remplissage. Passee par `color`, elle etait heritee par tout le contenu :
   les libelles des trois boutons et le titre « Your accounts » viraient au
   rouge avec elle. */
.lw-fj-courbe { margin-top: 44px; height: 360px; }
.lw-fj-courbe svg { width: 100%; height: 100%; }
.lw-fj-trait { stroke: var(--lw-courbe, var(--lw-bas)); }
.lw-fj-s { stop-color: var(--lw-courbe, var(--lw-bas)); }

.lw-queue { height: 220px; }