/* =============================================================================
   My Larp Wallet — moteur de rendu de maquette
   -----------------------------------------------------------------------------
   Canevas de 923 px de large = un écran iPhone de 393 pt à 2,3486x. Toutes les
   longueurs sont donc des pixels de capture, ce qui rend la maquette exportable
   à la résolution native d'un vrai screenshot.

   Contrairement au prototype d'origine, la mise en page est ici en FLUX et non
   en positions absolues : le nombre de jetons est variable, tout doit se
   replacer tout seul.
   ============================================================================= */

.mw {
  /* --- palette (surchargeable par le configurateur) --- */
  --mw-bg:        #000000;
  --mw-card:      #181818;
  --mw-pill:      #1c1c1c;
  --mw-accent:    rgb(179, 165, 248);
  --mw-accent-ink:#000000;
  --mw-text:      #efefef;
  --mw-dim:       #b3b3b3;
  --mw-up:        rgb(13, 234, 80);
  --mw-down:      rgb(255, 2, 42);
  --mw-chip:      #1f1f1f;

  /* --- métriques typographiques, résolues sur des captures réelles ---
     (SF Pro bascule de Text à Display au-dessus de ~27 px : ces valeurs
     tiennent compte de la bascule, ne pas les « arrondir ») */
  --mw-f-tab:     38.5px;  --mw-ls-tab:      0.6px;
  --mw-f-wallet:  42px;    --mw-ls-wallet:   0px;
  --mw-f-balance: 111px;   --mw-ls-balance:  0.4px;
  --mw-f-delta:   38.5px;  --mw-ls-delta:    1.4px;
  --mw-f-badge:   36px;    --mw-ls-badge:    1px;
  --mw-f-head:    55px;    --mw-ls-head:     0.3px;
  --mw-f-tname:   42px;    --mw-ls-tname:   -0.4px;
  --mw-f-tsub:    36.4px;  --mw-ls-tsub:     0.8px;
  --mw-f-tval:    41px;    --mw-ls-tval:    -2.1px;
  --mw-f-tchg:    37.4px;  --mw-ls-tchg:    -0.5px;
  --mw-f-search:  41.3px;  --mw-ls-search:   0.3px;
  /* Cartes Perps. Ces trois-la etaient UTILISEES sans etre definies : une
     var() sans valeur ni repli rend la declaration invalide, le font-size
     retombait donc a l'herite (16px) et « BTC 40x -3,30% » s'affichait en
     minuscule au lieu de la taille de la capture. */
  --mw-f-pname:   46px;    --mw-ls-pname:   -0.4px;
  --mw-f-plev:    34px;    --mw-ls-plev:     0px;
  --mw-f-pchg:    38px;    --mw-ls-pchg:    -0.3px;
  /* Meme cause pour le « Live » des predictions, qui sortait en blanc herite
     au lieu du rouge. Le wallet n'a qu'un rouge : celui des pertes. */
  --mw-red:       var(--mw-down);

  position: relative;
  width: 923px;
  /* Hauteur FIXE, pas min-height : c'est un écran, pas un document. Le contenu
     qui dépasse est masqué et défile ; sinon `.mw` s'étire à la hauteur du
     contenu et le dock, ancré en bas, part au milieu de nulle part. */
  height: 2000px;
  background: var(--mw-bg);
  color: var(--mw-text);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: normal;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mw *, .mw *::before, .mw *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Thème clair : on ne redéfinit que ce qui change de rôle. */
.mw[data-theme="light"] {
  --mw-bg:   #ffffff;
  --mw-card: #f2f2f4;
  --mw-pill: #ececef;
  --mw-text: #0d0d0f;
  --mw-dim:  #6a6a72;
  --mw-chip: #e4e4e8;
  --mw-accent-ink: #000000;
}

/* ------------------------------------------------------------ barre d'état */
/* Reproduite pour l'export : une maquette destinée à l'App Store en a besoin. */
/* Fond opaque et z-index propres : la barre d'état ne comptait que sur le voile
   pour masquer le contenu qui défile derrière elle. Deux protections valent
   mieux qu'une seule qui s'arrondit mal. */
/* La barre d'état DESSINÉE est retirée : sur un vrai téléphone, c'est l'iPhone
   qui affiche l'heure, le réseau et la batterie. En dessiner une seconde les
   faisait apparaître en double, avec 9:41 et 82% figés qui contredisaient les
   vraies valeurs juste au-dessus.
   La HAUTEUR, elle, reste : c'est elle qui empêche le contenu de glisser sous
   la barre du système. La retirer aurait remonté tout l'écran de 140px. */
.mw-status { position: relative; height: 140px; flex: 0 0 auto;
             background: var(--mw-bg); z-index: 3; }
/* `.mw-status .r` plus bas est plus spécifique et remettait le groupe réseau en
   flex : on masque par le sélecteur le plus fort plutôt qu'en espérant l'ordre. */
.mw-status > .t, .mw-status > .r { display: none !important; }
/* Positions mesurées sur une capture native : heure à x=117 / y=54, groupe de
   droite terminant à 77 du bord, écarts de 18, tout aligné sur une base à 82. */
.mw-status .t {
  position: absolute; left: 117px; top: 48px;
  font-size: 41px; font-weight: 600; line-height: 1;
  letter-spacing: -0.4px; color: var(--mw-text);
}
.mw-status .r {
  position: absolute; right: 77px; top: 52px;
  display: flex; align-items: flex-end; gap: 18px;
}
.mw-status svg { display: block; }
.mw-status .sig, .mw-status .wifi { margin-bottom: 1.5px; }
.mw-status .batt { position: relative; }
.mw-status .batt .pct {
  position: absolute; left: 0; top: 0; width: 59.5px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 650; letter-spacing: -0.6px; line-height: 1;
  color: var(--mw-bg);
}

/* -------------------------------------------------------------------- tabs */
/* Le fondu est porte par la BANDE et non par son enveloppe : le rond de
   profil vit dans l'enveloppe, en dehors de la bande, et ne doit donc pas
   etre attenue quand les onglets glissent sous lui. */
.mw-tabs-wrap { position: relative; margin-top: 17px; }
.mw-tabs-wrap > .mw-tab.is-avatar { position: absolute; left: 47px; top: 0; z-index: 2; }
.mw-tabs {
  --fade: linear-gradient(to right, #000 0, #000 92.6%, rgba(0,0,0,.80) 93.8%,
                          rgba(0,0,0,.62) 95.9%, rgba(0,0,0,.50) 98%, rgba(0,0,0,.48) 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
  position: relative;                 /* repere de offsetLeft pour cadreOnglet */
  display: flex; align-items: center; gap: 19px;
  /* 160 = 47 de marge + 94 de rond + 19 d'ecart : les onglets tombent
     exactement ou ils tombaient quand le rond etait le premier d'entre eux. */
  padding: 0 47px 0 160px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  scroll-behavior: smooth;
}
.mw-tabs::-webkit-scrollbar { display: none; }
/* Bande poussee a fond : le fondu passe a gauche, la ou le contenu sort.
   Il court jusqu'a 15,2% (soit 140px, la fin du rond de profil) et non sur
   quelques pixels : l'onglet qui glisse dessous doit etre attenue sur TOUTE
   la largeur du rond, sinon il ressort en pleine opacite juste a cote et les
   deux pastilles, de meme couleur, se confondent en une seule forme. */
.mw[data-tab="3"] .mw-tabs {
  --fade: linear-gradient(to right, rgba(0,0,0,.40) 0, rgba(0,0,0,.52) 5.1%,
                          rgba(0,0,0,.78) 10.4%, #000 15.2%, #000 100%);
}
.mw-tab {
  flex: 0 0 auto; height: 94px; border-radius: 47px;
  background: var(--mw-pill); color: var(--mw-dim);
  font-size: var(--mw-f-tab); font-weight: 500; letter-spacing: var(--mw-ls-tab);
  display: flex; align-items: center; justify-content: center;
  padding: 0 33px; white-space: nowrap;
}
.mw-tab.is-active { background: var(--mw-accent); color: var(--mw-accent-ink); font-weight: 600; }
.mw-tab.is-avatar {
  width: 94px; padding: 0; overflow: hidden;
  font-size: 52px; line-height: 1; background: var(--mw-pill);
}
.mw-tab.is-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------- roue de rafraîchissement */
/* Hauteur nulle et position absolue : la roue se superpose au blanc qui sépare
   la barre d'onglets du nom de portefeuille, sans jamais déplacer une seule
   ligne de la maquette. `opacity:0` par défaut — voir le commentaire de ROUE
   dans mockup.js : l'export ne doit pas la contenir. */
.mw-refresh {
  position: relative; height: 0; z-index: 2; opacity: 0; pointer-events: none;
}
.mw-refresh > span {
  position: absolute; left: 50%; top: 18px;
  width: 72px; height: 72px; margin-left: -36px;
  /* Un pas par rai, et non une rotation continue : c'est ce saut qui donne le
     mouvement caractéristique. DOUZE pas pour douze rais — les deux nombres
     doivent rester d'accord, sinon la roue glisse au lieu de sauter. */
  animation: mw-roue 1s steps(12, end) infinite;
}
/* Proportions relevées sur la capture de référence fournie par l'exploitant,
   et non déduites : 6 de large sur 24 de long dans une boîte de 72.

   LA LARGEUR EST BORNÉE PAR LA SÉPARATION, et c'est ce qui fixe le chiffre.
   Douze rais se partagent l'arc du trou central : à un rayon interne de 12, cet
   arc vaut 2·pi·12/12 = 6,3 px par rai. Un trait de 8 s'y chevauchait et la
   roue devenait un disque plein ; à 6, les rais restent distincts. Épaissir
   davantage exigerait d'agrandir le trou, donc de raccourcir les traits — ce
   qui ramènerait l'astérisque.

   Ce qui avait été raté deux fois de suite, et qu'il faut retenir : ce sont la
   LONGUEUR du trait et la petitesse du TROU CENTRAL qui font reconnaître la
   roue iOS. Le trait couvre presque les trois quarts du rayon (26 sur 36),
   il ne s'arrête pas à la moitié. Des traits courts autour d'un grand trou
   donnent un astérisque ; des traits longs autour d'un petit trou donnent une
   roue. */
.mw-refresh i {
  position: absolute; left: 50%; top: 0;
  width: 6px; height: 24px; margin-left: -3px;
  border-radius: 3px; background: var(--mw-dim);
  transform-origin: 3px 36px;
}
/* L'extinction n'est pas linéaire. Une rampe régulière donne une étoile figée
   où toutes les branches se valent ; ce qu'on veut, c'est une comète — une tête
   franche et une traîne qui s'efface vite. */
.mw-refresh i:nth-child(1){ transform: rotate(0deg); opacity: 0.13; }
.mw-refresh i:nth-child(2){ transform: rotate(30deg); opacity: 0.15; }
.mw-refresh i:nth-child(3){ transform: rotate(60deg); opacity: 0.20; }
.mw-refresh i:nth-child(4){ transform: rotate(90deg); opacity: 0.25; }
.mw-refresh i:nth-child(5){ transform: rotate(120deg); opacity: 0.32; }
.mw-refresh i:nth-child(6){ transform: rotate(150deg); opacity: 0.40; }
.mw-refresh i:nth-child(7){ transform: rotate(180deg); opacity: 0.48; }
.mw-refresh i:nth-child(8){ transform: rotate(210deg); opacity: 0.57; }
.mw-refresh i:nth-child(9){ transform: rotate(240deg); opacity: 0.67; }
.mw-refresh i:nth-child(10){ transform: rotate(270deg); opacity: 0.77; }
.mw-refresh i:nth-child(11){ transform: rotate(300deg); opacity: 0.88; }
.mw-refresh i:nth-child(12){ transform: rotate(330deg); opacity: 1.00; }
@keyframes mw-roue { to { transform: rotate(360deg); } }
/* quelqu'un qui a demandé moins d'animations n'a pas à subir une roue qui tourne */
@media (prefers-reduced-motion: reduce) {
  .mw-refresh > span { animation: none; }
}

/* ------------------------------------------------------------------ entête */
.mw-wallet {
  display: flex; align-items: center; gap: 14px;
  margin: 79px 0 0 48px;
  font-size: var(--mw-f-wallet); font-weight: 500; letter-spacing: var(--mw-ls-wallet);
  line-height: 1; color: var(--mw-dim);
}
.mw-wallet svg { display: block; position: relative; top: 2px; }

.mw-balance {
  margin: 18px 0 0 47px;
  font-size: var(--mw-f-balance); font-weight: 700; line-height: 1;
  letter-spacing: var(--mw-ls-balance); color: var(--mw-text);
  white-space: nowrap;
}

.mw-delta { display: flex; align-items: center; gap: 20px; margin: 25px 0 0 48px; }
.mw-delta .abs {
  font-size: var(--mw-f-delta); font-weight: 600; line-height: 1;
  letter-spacing: var(--mw-ls-delta);
}
.mw-delta .pct {
  height: 51px; border-radius: 18px; color: #050000;
  font-size: var(--mw-f-badge); font-weight: 600;
  letter-spacing: var(--mw-ls-badge); line-height: 1;
  display: flex; align-items: center; padding: 0 13px;
}
.mw-delta.is-up   .abs { color: var(--mw-up); }
.mw-delta.is-up   .pct { background: var(--mw-up); }
.mw-delta.is-down .abs { color: var(--mw-down); }
.mw-delta.is-down .pct { background: var(--mw-down); color: #050000; }

/* ------------------------------------------------------ liseré des cartes */
/* Mesuré sur l'app de référence : le bord est plus clair que le fond, en
   dégradé — +8 en haut, +5 sur les côtés, +2 en bas. Un filet de 1 px écran
   vaut 2,3 px de canevas. */
.mw-card { position: relative; background: var(--mw-card); }
.mw-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 2.3px; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(255,255,255,.036) 0%,
              rgba(255,255,255,.022) 45%,
              rgba(255,255,255,.009) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.mw[data-theme="light"] .mw-card::before {
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
}

/* --------------------------------------------------------------- carte Cash */
.mw-cash {
  margin: 64px 47px 0; height: 164px; border-radius: 52px;
  display: flex; align-items: center; padding: 0 49px 0 66px;
}
.mw-cash .ic { flex: 0 0 57px; width: 57px; height: 40.4px; display: block; }
.mw-cash .lb {
  flex: 1 1 auto; margin-left: 45px;
  font-size: 43px; font-weight: 600; letter-spacing: -.3px; line-height: 1;
}
.mw-cash .val { font-size: 42px; font-weight: 600; letter-spacing: -1.6px; line-height: 1; }

/* ----------------------------------------------------------------- section */
.mw-section { margin-top: 59px; }
.mw-section-head {
  display: flex; align-items: center; gap: 20px;
  padding-left: 47px; height: 70px;
  font-size: var(--mw-f-head); font-weight: 700;
  letter-spacing: var(--mw-ls-head); line-height: 1;
}
.mw-section-head svg { display: block; color: var(--mw-dim); position: relative; top: 2px; }

/* -------------------------------------------------------------- ligne jeton */
.mw-tokens { padding: 0 47px; margin-top: 32px; }
.mw-token {
  display: flex; align-items: center;
  height: 160px; border-radius: 52px; padding: 0 47px;
}
.mw-token + .mw-token { margin-top: 19px; }
.mw-token .icon {
  flex: 0 0 94px; width: 94px; height: 94px; border-radius: 50%;
  overflow: hidden; margin-right: 29px; display: block; background: var(--mw-chip);
}
.mw-token .icon svg, .mw-token .icon img { display: block; width: 100%; height: 100%; }
.mw-token .main { flex: 1 1 auto; min-width: 0; }
.mw-token .side { flex: 0 0 auto; text-align: right; position: relative; top: 1px; }

.mw-token .name {
  font-size: var(--mw-f-tname); font-weight: 600;
  letter-spacing: var(--mw-ls-tname); line-height: 1; color: var(--mw-text);
}
.mw-token .sub {
  font-size: var(--mw-f-tsub); font-weight: 400;
  letter-spacing: var(--mw-ls-tsub); line-height: 1; color: var(--mw-dim); margin-top: 15px;
}
.mw-token .val {
  font-size: var(--mw-f-tval); font-weight: 600;
  letter-spacing: var(--mw-ls-tval); line-height: 1; color: var(--mw-text);
  margin-right: 2.1px; /* compense l'approche sur un texte aligné à droite */
}
.mw-token .chg {
  font-size: var(--mw-f-tchg); font-weight: 600;
  letter-spacing: var(--mw-ls-tchg); line-height: 1; margin-top: 16px;
}
.mw-token .chg.up   { color: var(--mw-up); }
.mw-token .chg.down { color: var(--mw-down); }


/* ------------------------------------------------------ défilement interne */
/* Le contenu passe SOUS l'entête. Ordre de superposition, du fond vers le
   dessus : contenu (auto), puis voile du haut (2), puis barre d'état et
   onglets (3).
   NB : jamais de chevron ouvrant dans ces commentaires — la feuille est
   inlinée dans un SVG à l'export, où il serait lu comme une balise. */
/* Defilement natif. `.mw` est un ecran (hauteur fixe, overflow:hidden) : le
   conteneur de contenu est donc pose en absolu par-dessus toute sa surface et
   c'est LUI qui defile, pendant que la barre d'etat, les onglets et le dock —
   qui vivent en dehors — restent fixes.
   Le padding de 251px n'est pas un reglage a l'oeil : c'est le bas mesure de
   la barre d'onglets. Le passer a 330 (ou commencait le contenu) le decalait
   de 79px, parce que la marge haute de .mw-wallet s'echappait du conteneur
   par fusion de marges tant qu'il n'avait ni padding ni bordure ; le padding
   bloque cette fusion, la marge s'ajoute donc au lieu de se confondre.
   Le contenu passe SOUS la barre en defilant, comme dans une vraie app, et le
   voile du haut l'estompe. */
.mw-scroll{
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  padding-top: 251px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* l'indicateur iOS reste, lui */
  will-change: transform;
}
.mw-scroll::-webkit-scrollbar{ width: 0; height: 0; }
.mw-tail{ height: 260px; }          /* respiration sous la dernière carte */

.mw-topveil{
  /* Opaque jusqu'en dessous des onglets (qui finissent à 268), puis fondu :
     84% de 338px depuis -8 place la fin de l'opacité à 276. Plus court, un
     filet de contenu réapparaissait sous la barre pendant le défilement. */
  /* Déborde VOLONTAIREMENT de 8px au-dessus et sur les côtés. La maquette est
     mise à l'échelle par un facteur fractionnaire (≈0,3369) et posée à une
     position fractionnaire : le contenu défilant, promu sur sa propre couche
     par `will-change:transform`, s'arrondit alors au pixel indépendamment du
     voile, et une ligne de contenu réapparaît tout en haut. Un voile qui
     dépasse le bord ne peut plus laisser de couture ; `.mw` étant en
     overflow:hidden, ce débord ne se voit jamais. */
  position: absolute; left: -8px; right: -8px; top: -8px; height: 338px; z-index: 2;
  background: linear-gradient(to bottom, var(--mw-bg) 0%, var(--mw-bg) 84%,
              rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.mw[data-theme="light"] .mw-topveil{
  background: linear-gradient(to bottom, var(--mw-bg) 0%, var(--mw-bg) 84%,
              rgba(255,255,255,0) 100%);
}
.mw-status{ position: relative; z-index: 3; }
.mw-tabs-wrap{ position: relative; z-index: 3; }

/* Pastille discrète quand une valeur vient de changer (démo animée). */
.mw-flash{ animation: mw-flash 1.5s ease-out; }
@keyframes mw-flash{
  /* Éclat discret : à 2,1 le chiffre « sautait » à chaque révision, ce qui
     accentuait l'impression de vitesse. */
  0%   { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}


/* =============================================================================
   Sections basses — Perps, Predictions, Watchlist, Explore, Support
   -----------------------------------------------------------------------------
   Reprises telles quelles du prototype vérifié au pixel, avec deux adaptations :
   les sélecteurs sont portés par `.mw` (le moteur peut être instancié plusieurs
   fois sur une page) et les variables reprennent le préfixe `--mw-`.
   Elles sont toujours rendues : ce sont elles qui donnent de la matière au
   défilement. Le drapeau `showSections` qui les conditionnait a été supprimé —
   il n'avait aucun réglage dans le panneau, et une configuration enregistrée
   avant ce changement l'aurait gardé à faux, privant définitivement ce
   compte-là des sections.
   ============================================================================= */
/* ------------------------------------------------------------------- rails */
.mw .rail{
  display:flex; gap:19px; padding:0 47px;
  overflow-x:auto; scrollbar-width:none;
}
.mw .rail::-webkit-scrollbar{ display:none; }
.mw .rail > *{ flex:0 0 auto; }
.mw .rail--perps{ margin-top:32px; margin-right:10px; }
.mw .rail--preds{ margin-top:30px; gap:38px; }

.mw .perp{
  width:376px; height:338px;
  background:var(--mw-card); border-radius:52px;
  padding:48px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.mw .perp-icon{
  width:111px; height:111px; border-radius:50%;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.mw .perp-icon svg{ display:block; }
.mw .perp-icon--eth svg{ margin:-2px 4px 0 0; }
.mw .perp-icon--hype{ align-items:flex-start; justify-content:flex-start; }
.mw .perp-icon--hype i{ display:block; width:59px; height:59px; border-radius:50%;
                    background:#97fce4; margin:29px 0 0 -3px; }
.mw .perp-foot{ margin-bottom:3px; }
.mw .perp-row{ display:flex; align-items:center; gap:15px; }
.mw .perp-name{ font-size:var(--mw-f-pname); font-weight:700; letter-spacing:var(--mw-ls-pname); line-height:1; color:var(--mw-text); }
.mw .perp-lev{
  height:48px; border-radius:16px; background:var(--mw-chip);
  color:var(--mw-text); font-size:var(--mw-f-plev); font-weight:600;
  letter-spacing:var(--mw-ls-plev); line-height:1;
  display:flex; align-items:center; padding:0 14px;
}
.mw .perp-chg{ font-size:var(--mw-f-pchg); font-weight:500; letter-spacing:var(--mw-ls-pchg); line-height:1; margin-top:16px; }
/* Le marquage neg/pos etait pose dans le HTML depuis le debut mais aucune
   regle ne le lisait : les variations des cartes Perps sortaient en blanc
   herite alors qu'elles sont rouges sur la capture. Mesure : rgb(239,239,239). */
.mw .perp-chg.pos{ color: var(--mw-up); }
.mw .perp-chg.neg{ color: var(--mw-down); }

/* ------------------------------------------------------- carte prédiction */
.mw .pred{
  width:554px; height:319px;
  background:var(--mw-card); border-radius:38px;
  padding:39px 31px 0;
  position:relative;
}
.mw .pred-icon{ width:108px; height:108px; border-radius:50%; overflow:hidden; display:block; }
.mw .pred-icon svg{ display:block; width:100%; height:100%; }
.mw .pred-live{
  position:absolute; right:39px; top:47px;
  display:flex; align-items:center; gap:12px;
  color:var(--mw-red); font-size:37px; font-weight:600; line-height:1;
}
.mw .pred-live::before{ content:""; width:13px; height:13px; border-radius:50%; background:var(--mw-red); display:block; }
.mw .pred-title{
  position:absolute; left:31px; top:181px;
  font-size:40px; font-weight:600; letter-spacing:-.2px; line-height:1; color:var(--mw-text);
  white-space:nowrap;
}
.mw .pred-sub{
  position:absolute; left:31px; top:238px;
  font-size:37px; font-weight:400; letter-spacing:.2px; line-height:1; color:var(--mw-dim);
  white-space:nowrap;
}
.mw .pred-tickets{ position:absolute; left:38px; top:34px; width:150px; height:120px; }
.mw .pred-tickets svg{ display:block; }

/* ------------------------------------------------------------- watchlist */
.mw .watch{ padding:0 47px; margin-top:26px; }
.mw .wrow{ display:flex; align-items:center; height:164px; }
.mw .wrow-icon{
  flex:0 0 92px; width:92px; height:92px; border-radius:50%;
  overflow:hidden; margin-right:24px; display:block;
}
.mw .wrow-icon svg{ display:block; width:100%; height:100%; }
.mw .wrow-main{ flex:1 1 auto; min-width:0; }
.mw .wrow-name{ display:flex; align-items:center; gap:11px; }
.mw .wrow-sym{ font-size:42px; font-weight:700; letter-spacing:-.3px; line-height:1; color:var(--mw-text); }
.mw .wrow-mc{ font-size:37px; font-weight:400; letter-spacing:.3px; line-height:1; color:var(--mw-dim); margin-top:16px; }
.mw .wrow-side{ flex:0 0 auto; text-align:right; }
.mw .wrow-px{ font-size:41px; font-weight:600; letter-spacing:-1.4px; line-height:1; color:var(--mw-text); }
.mw .wrow-chg{ font-size:37px; font-weight:500; letter-spacing:-.4px; line-height:1; margin-top:16px; }

/* --------------------------------------------------------------- explore */
.mw .explore{ padding:0 47px; margin-top:54px; }
.mw .erow{
  display:flex; align-items:center;
  height:127px; background:var(--mw-card); border-radius:38px;
  padding-left:47px;
}
.mw .erow + .erow{ margin-top:47px; }
.mw .erow-icon{ flex:0 0 79px; width:79px; height:79px; display:flex; align-items:center; justify-content:center; margin-right:65px; }
.mw .erow-icon svg{ display:block; }
.mw .erow-title{ font-size:42px; font-weight:600; letter-spacing:-.2px; line-height:1; color:var(--mw-text); }
.mw .erow-sub{ font-size:37px; font-weight:400; letter-spacing:.2px; line-height:1; color:var(--mw-dim); margin-top:22px; }

/* --------------------------------------------------------------- support */
.mw .support-link{
  /* Étaient en absolu dans le prototype, où la section l'était aussi. En flux,
     elles s'échappaient vers le haut de l'écran : on garde les mêmes écarts. */
  margin:47px 0 0 47px;
  display:flex; align-items:center; gap:17px;
  font-size:42px; font-weight:700; letter-spacing:-.2px; line-height:1; color:var(--mw-text);
}
.mw .support-link svg{ display:block; color:var(--mw-text); position:relative; top:1px; }
.mw .disclose{
  margin:86px 0 0 47px;
  display:flex; align-items:center; gap:14px;
  font-size:36px; font-weight:400; letter-spacing:.2px; line-height:1; color:#8b8b8b;
}
.mw .disclose svg{ display:block; flex:0 0 auto; }

.mw .perp--cta{
  width:705px; padding:0; position:relative;
}
.mw .perp-cta-icon{ position:absolute; left:50px; top:47px; display:block; }
.mw .perp-cta-title{
  position:absolute; left:50px; top:196px;
  font-size:42px; font-weight:600; letter-spacing:-.2px; line-height:1; color:var(--mw-text); white-space:nowrap;
}
.mw .perp-cta-sub{
  position:absolute; left:50px; top:252px;
  font-size:37px; font-weight:400; letter-spacing:.2px; line-height:1; color:var(--mw-dim); white-space:nowrap;
}
.mw .perp-icon--hype{ overflow:visible; align-items:center; justify-content:flex-start; }
.mw .perp-icon--hype svg{ margin-left:-4px; }

.mw .support-link + .support-link{ margin-top:66px; }

/* -------------------------------------------------------------------- dock */
.mw-dock {
  position: absolute; left: 0; right: 0; bottom: 80px; height: 112px;
  display: flex; align-items: center; gap: 22px; padding: 0 47px; z-index: 4;
}
.mw-search {
  flex: 1 1 auto; height: 112px; border-radius: 56px;
  /* Nettement plus transparente qu'avant : sur la capture, la lueur orange de
     l'icone qui passe derriere traverse la pilule. A .72 elle etait bouchee. */
  background: rgba(32,32,32,.56);
  -webkit-backdrop-filter: blur(44px) saturate(170%);
          backdrop-filter: blur(44px) saturate(170%);
  display: flex; align-items: center; padding: 0 40px; gap: 24px;
  font-size: var(--mw-f-search); letter-spacing: var(--mw-ls-search);
  color: #8b8b8b; font-weight: 400;
}
.mw[data-theme="light"] .mw-search { background: rgba(0,0,0,.06); color: #77777f; }
.mw-search svg { display: block; flex: 0 0 auto; }
.mw-plus {
  flex: 0 0 112px; width: 112px; height: 112px; border-radius: 50%;
  background: var(--mw-accent); display: flex; align-items: center; justify-content: center;
  /* La croix heritait de --mw-text, donc blanche. Sur le lavande c'est l'encre
     sombre qui s'applique — exactement celle de l'onglet actif, qui est deja
     du noir sur ce meme lavande. */
  color: var(--mw-accent-ink);
}
.mw-plus svg { display: block; }

/* Voile sous le dock. Il ETEINT le contenu, il ne le supprime pas : sur la
   capture de reference on distingue encore les formes des cartes sous la barre
   de recherche, floutees et tres assombries — pas du noir plein. Je l'avais
   rendu opaque en corrigeant l'inverse (du texte restait lisible dessous) ;
   c'etait une surcorrection, le flou est ce qui manquait.

   Le fondu passe par mask-image et non par le degrade de fond : un
   backdrop-filter s'applique a toute la boite d'un coup, et sans masque le
   flou commencerait net sur une ligne horizontale visible. Le masque fait
   entrer flou ET assombrissement ensemble.

   Repli sans backdrop-filter : le fond masque seul, soit le contenu assombri a
   18% — degrade, pas casse. */
.mw-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: 3;
  background: rgba(0,0,0,.82);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
          backdrop-filter: blur(24px) saturate(120%);
  --mw-fondu: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 42%,
              rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: var(--mw-fondu); mask-image: var(--mw-fondu);
  pointer-events: none;
}
.mw[data-theme="light"] .mw-veil { background: rgba(255,255,255,.85); }



/* ------------------------------------------------------------- conteneur mis
   à l'échelle : le canevas garde ses 923 px, seul le zoom change. */
.mw-frame { position: relative; overflow: hidden; }
.mw-frame > .mw { transform-origin: top left; }

/* =============================================================================
   Tiroir de profil
   -----------------------------------------------------------------------------
   Il vit DERRIERE l'ecran. Ce n'est pas un panneau qui arrive par-dessus :
   c'est l'application qui glisse a droite et se retrecit, exactement comme sur
   la capture ou la bande de wallet reste visible a droite, arrondie.
   ============================================================================= */
.mw-app {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--mw-bg); z-index: 2;
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.32,.72,0,1),
              border-radius .34s cubic-bezier(.32,.72,0,1);
}
.mw[data-drawer="1"] .mw-app {
  transform: translateX(710px) scale(.9);
  border-radius: 62px;
  box-shadow: -40px 0 90px -20px rgba(0,0,0,.75);
}
/* Double role : il assombrit l'application ecartee — sur la capture, la bande
   de wallet visible est nettement eteinte, son solde n'est plus blanc — et il
   recoit la touche qui referme. En opacite plutot qu'en display, pour qu'il
   s'eteigne au meme rythme que le glissement ; pointer-events le rend inerte
   tiroir ferme, sinon il avalerait les touches destinees au wallet. */
.mw-app-voile {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .34s cubic-bezier(.32,.72,0,1);
}
.mw[data-drawer="1"] .mw-app-voile { opacity: 1; pointer-events: auto; }

.mw-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 710px; z-index: 1;
  padding: 185px 55px 0;
  display: flex; flex-direction: column;
  color: var(--mw-text);
}
.mw-dr-top { display: flex; align-items: center; justify-content: space-between; }
.mw-dr-ava, .mw-dr-copie {
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--mw-pill); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; line-height: 1; overflow: hidden;
}
.mw-dr-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-dr-copie { color: var(--mw-text); }

.mw-dr-handle {
  margin-top: 46px;
  font-size: 62px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw-dr-x {
  margin-top: 38px; display: flex; align-items: center; gap: 18px;
  color: var(--mw-accent); font-size: 38px; font-weight: 600; letter-spacing: -.2px;
}
.mw-dr-x svg { flex: 0 0 auto; }

.mw-dr-wallet {
  margin-top: 128px; display: flex; align-items: center; gap: 22px;
}
.mw-dr-badge {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600; letter-spacing: .4px;
}
.mw-dr-nom { font-size: 46px; font-weight: 600; letter-spacing: -.4px; }
.mw-dr-wallet svg { color: var(--mw-text); flex: 0 0 auto; margin-left: 4px; }

/* 44 et non 96 : mesure sur la capture, l'ecart entre le centre de la ligne
   de portefeuille et celui de « Profile » est de 152px, soit exactement un
   pas de menu. */
.mw-dr-nav { margin-top: 44px; }
.mw-dr-item {
  display: flex; align-items: center; gap: 48px; height: 152px;
  font-size: 46px; font-weight: 600; letter-spacing: -.4px; color: var(--mw-text);
}
.mw-dr-item svg { flex: 0 0 auto; }
/* Pousse le bloc bas contre le bord : « auto » sur la marge haute est ce qui
   fait le vide de la capture entre History et Settings, quel que soit le
   nombre d'entrees au-dessus. */
.mw-dr-bas { margin-top: auto; padding-bottom: 118px; }

.mw[data-theme="light"] .mw-dr-ava,
.mw[data-theme="light"] .mw-dr-copie,
.mw[data-theme="light"] .mw-dr-badge { background: rgba(0,0,0,.07); }

/* =============================================================================
   Ecran Trade
   -----------------------------------------------------------------------------
   Les deux ecrans coexistent dans le DOM et c'est le CSS qui montre l'un ou
   l'autre : basculer d'onglet ne redessine rien, donc chacun garde sa position
   de defilement, comme dans une vraie app.
   ============================================================================= */
/* visibility et non display : un conteneur passe en display:none perd son
   scrollTop, remis a zero par le navigateur. Mesure — l'ecran Trade defile a
   1200, on repasse sur l'accueil, on revient : 0. Avec visibility l'ecran
   reste dispose, donc il garde sa position, et il ne recoit ni les clics ni le
   focus tant qu'il est cache. */
.mw-ecran { visibility: hidden; }
.mw[data-tab="0"] .mw-ecran--home,
.mw[data-tab="1"] .mw-ecran--trade,
.mw[data-tab="2"] .mw-ecran--predict,
.mw[data-tab="3"] .mw-ecran--explore { visibility: visible; }
/* Pendant un glissement d'onglet, les DEUX écrans concernés sont visibles : le
   sortant et l'entrant se déplacent ensemble sous le doigt. Placée après les
   règles ci-dessus et à spécificité égale, celle-ci gagne. */
.mw .mw-ecran[data-glisse] { visibility: visible; }

/* ------------------------------------------------------------------ chips */
.mw .tk-chips {
  display: flex; gap: 19px; padding: 0 47px; margin-top: 61px;
  overflow-x: auto; scrollbar-width: none;
}
.mw .tk-chips::-webkit-scrollbar { display: none; }
.mw .chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 15px;
  height: 82px; padding: 0 30px; border-radius: 41px;
  background: var(--mw-pill); color: var(--mw-text);
  font-size: 40px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap;
}
.mw .chip svg { flex: 0 0 auto; }
.mw .chip--menu { gap: 8px; padding: 0 26px 0 30px; height: 74px; border-radius: 37px;
                  font-weight: 500; color: var(--mw-text); }

/* ------------------------------------------------------------------- swap */
/* Colonne, pour que le bouton d'inversion vive DANS l'ecart entre les deux
   cartes. Il etait pose en absolu au centre du bloc, ce qui ne tombe sur la
   couture que si les deux cartes ont la meme hauteur — elles n'en ont pas.
   Et l'ecart lui-meme avait disparu : la regle .swap-carte + .swap-carte ne
   s'appliquait plus depuis que le bouton s'etait glisse entre elles. */
.mw .swap { padding: 0 47px; margin-top: 46px; display: flex; flex-direction: column; }
.mw .swap-carte {
  background: var(--mw-card); border-radius: 44px; padding: 44px 42px 38px;
}

.mw .swap-tete {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 42px; font-weight: 500; color: var(--mw-dim); letter-spacing: -.2px;
}
.mw .swap-regl {
  width: 74px; height: 74px; border-radius: 50%; background: var(--mw-pill);
  display: flex; align-items: center; justify-content: center; color: var(--mw-text);
}
.mw .swap-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 34px;
}
.mw .swap-val { font-size: 72px; font-weight: 500; line-height: 1; color: #5c5c5c; }
.mw .swap-jeton {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  height: 74px; padding: 0 18px 0 8px; border-radius: 37px;
  background: var(--mw-pill); color: var(--mw-text);
  font-size: 44px; font-weight: 600; letter-spacing: -.4px;
}
.mw .swap-jeton-ic {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  background: #0e0e0e; display: block; flex: 0 0 auto;
}
.mw .swap-jeton-ic svg { display: block; width: 100%; height: 100%; }
.mw .swap-jeton-ic--cash { background: var(--mw-accent); padding: 9px; }
.mw .swap-pied {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 30px; color: var(--mw-dim);
  font-size: 40px; font-weight: 400; letter-spacing: .2px;
}
.mw .swap-pied--droite { justify-content: flex-end; }
/* 88 de haut avec -18 de marge en haut et en bas : sa contribution nette a la
   colonne est de 88-36 = 52px, soit exactement l'ecart voulu entre les cartes,
   et son centre tombe au milieu de cet ecart quelles que soient leurs
   hauteurs. */
.mw .swap-inverse {
  align-self: center; position: relative; margin: -18px 0;
  width: 88px; height: 88px; border-radius: 50%; z-index: 2;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------- liste des jetons */
.mw .tk-titre {
  padding: 0 47px; margin-top: 100px;
  font-size: 55px; font-weight: 700; letter-spacing: var(--mw-ls-head); line-height: 1;
}
.mw .tk-filtres { display: flex; gap: 19px; padding: 0 47px; margin-top: 46px; }
.mw .tk-liste { margin-top: 2px; }
.mw .tk-icon { position: relative; overflow: visible; }
.mw .tk-icon > svg { border-radius: 50%; }
/* Deux jetons de la capture ne sont pas ronds mais carres a coins adoucis :
   leur illustration remplit le carre. Ces regles arrivent apres celles de
   .wrow-icon, a specificite egale — c'est ce qui leur permet de gagner. */
.mw .tk-icon--carre, .mw .tk-icon--carre > svg { border-radius: 18px; }
.mw .tk-rang {
  position: absolute; left: -4px; bottom: -4px; width: 40px; height: 40px;
  display: block;
}
.mw .tk-rang svg { display: block; width: 100%; height: 100%; }
.mw .tk-verif { flex: 0 0 auto; }
.mw .wrow-chg.pos { color: var(--mw-up); }
.mw .wrow-chg.neg { color: var(--mw-down); }

/* =============================================================================
   Ecran Predict
   ============================================================================= */
.mw .pr-titre {
  display: flex; align-items: center; gap: 14px;
  padding: 0 47px; margin-top: 62px;
  font-size: 55px; font-weight: 700; letter-spacing: var(--mw-ls-head); line-height: 1;
  color: var(--mw-text);
}
.mw .pr-titre svg { flex: 0 0 auto; }
.mw .pr-h2 {
  padding: 0 47px; margin-top: 96px;
  font-size: 55px; font-weight: 700; letter-spacing: var(--mw-ls-head); line-height: 1;
}

/* ------------------------------------------------------------- Up or Down */
.mw .pr-ud {
  margin: 44px 47px 0; background: var(--mw-card); border-radius: 44px;
  padding: 44px 40px 40px;
}
.mw .pr-ud-tete { display: flex; align-items: flex-start; gap: 26px; }
.mw .pr-ud-ic { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.mw .pr-ud-ic svg { display: block; width: 100%; height: 100%; }
.mw .pr-ud-txt { flex: 1 1 auto; min-width: 0; }
.mw .pr-ud-px { font-size: 50px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.mw .pr-ud-px sup { font-size: .68em; vertical-align: super; letter-spacing: -.5px; }
.mw .pr-ud-cible { margin-top: 16px; font-size: 42px; color: var(--mw-dim); letter-spacing: -.2px; }
.mw .pr-ud-chrono { flex: 0 0 auto; font-size: 44px; font-weight: 500; letter-spacing: -.4px; }

.mw .pr-ud-graph { height: 250px; margin-top: 42px; }
.mw .pr-ud-graph svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Le seuil : trait pointille sur toute la largeur, le chevron pose dessus au
   centre et l'etiquette du prix cible calee a droite. Le trait passe DERRIERE,
   d'ou le fond de carte repris sur les deux elements poses dessus. */
.mw .pr-ud-seuil {
  position: relative; height: 62px; margin-top: 26px;
  display: flex; align-items: center; justify-content: flex-end;
}
.mw .pr-ud-seuil::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 4px dashed #4a4a4a;
}
.mw .pr-ud-chev {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: var(--mw-card); padding: 0 14px; box-sizing: content-box;
}
.mw .pr-ud-etiq {
  position: relative; background: #d9d9d9; color: #101010;
  font-size: 40px; font-weight: 500; letter-spacing: -.3px;
  padding: 12px 26px; border-radius: 999px;
}

.mw .pr-ud-boutons { display: flex; gap: 26px; margin-top: 34px; }
.mw .pr-ud-b {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 16px;
  height: 84px; border-radius: 42px; background: var(--mw-pill);
  font-size: 44px; font-weight: 500; letter-spacing: -.4px; color: var(--mw-text);
}

/* --------------------------------------------------------- 5 Minute Markets */
.mw .pr-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 0 47px; margin-top: 46px;
}
.mw .pr-mini { background: var(--mw-card); border-radius: 36px; padding: 38px 36px 36px; }
.mw .pr-mini-ic {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: block;
  background: #0b0b0b;
}
.mw .pr-mini-ic svg { display: block; width: 100%; height: 100%; }
.mw .pr-mini-ic--eth { background: #6f7bf0; padding: 18px 24px; }
.mw .pr-mini-sym { margin-top: 38px; font-size: 46px; font-weight: 700; letter-spacing: -.4px; }
.mw .pr-mini-sub { margin-top: 18px; font-size: 40px; color: var(--mw-dim); }

/* ------------------------------------------------------- cartes de marche */
.mw .pr-marche {
  margin: 40px 47px 0; background: var(--mw-card); border-radius: 40px; padding: 38px 34px 34px;
}
.mw .pr-m-tete { display: flex; align-items: center; gap: 26px; }
.mw .pr-m-tete--nu { display: block; }
.mw .pr-m-titre {
  /* 42 et non 44 : a 44, « Nasdaq 100 Year-End 2026 Close » passait a la
     ligne alors qu'il tient sur une seule sur la capture. */
  font-size: 42px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; color: var(--mw-text);
}
.mw .pr-ic {
  width: 76px; height: 76px; border-radius: 20px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.mw .pr-ic svg { width: 62%; height: 62%; display: block; }

.mw .pr-opt { display: flex; align-items: center; gap: 26px; height: 126px; }
.mw .pr-ava {
  width: 68px; height: 68px; border-radius: 18px; overflow: hidden; flex: 0 0 auto; display: block;
}
.mw .pr-ava--rond { border-radius: 50%; }
.mw .pr-ava svg { display: block; width: 100%; height: 100%; }
.mw .pr-opt-nom {
  flex: 1 1 auto; min-width: 0; font-size: 44px; font-weight: 500; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw .pr-pct {
  flex: 0 0 auto; min-width: 148px; text-align: center;
  background: var(--mw-pill); color: var(--mw-dim);
  font-size: 40px; font-weight: 500; padding: 16px 0; border-radius: 22px;
}
.mw .pr-plus {
  margin-top: 16px; height: 84px; border-radius: 42px; background: var(--mw-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 600; letter-spacing: -.3px;
}

.mw .pr-avis {
  padding: 0 47px; margin-top: 74px;
  font-size: 40px; line-height: 1.42; color: var(--mw-dim); letter-spacing: -.2px;
}
.mw .pr-avis a { color: var(--mw-accent); }

/* =============================================================================
   Ecran Explore
   ============================================================================= */
.mw .ex-cat { display: flex; gap: 22px; padding: 0 47px; margin-top: 62px;
              overflow-x: auto; scrollbar-width: none; }
.mw .ex-cat::-webkit-scrollbar { display: none; }
.mw .ex-chip { height: 102px; border-radius: 51px; padding: 0 34px 0 17px; gap: 22px; font-size: 44px; }
.mw .ex-cat-ic {
  width: 68px; height: 68px; border-radius: 20px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.mw .ex-cat-ic svg { width: 64%; height: 64%; display: block; }

.mw .ex-carte {
  margin: 40px 47px 0; background: var(--mw-card); border-radius: 40px; padding: 0 34px;
}

/* ------------------------------------------------------- What's Happening */
.mw .ex-newsbloc { padding: 0 47px; margin-top: 44px; }
.mw .ex-news + .ex-news { margin-top: 56px; }
.mw .ex-news-src { font-size: 40px; color: var(--mw-dim); letter-spacing: -.2px; }
.mw .ex-news-titre {
  margin-top: 26px; font-size: 40px; font-weight: 500; line-height: 1.32;
  letter-spacing: -.4px; color: var(--mw-text);
}
.mw .ex-marque { margin-top: 26px; display: flex; align-items: center; gap: 22px;
                 font-size: 42px; font-weight: 700; color: var(--mw-down); }
.mw .ex-var { font-weight: 600; }

/* ------------------------------------------------------------- Top Traders */
.mw .ex-trow, .mw .ex-srow, .mw .ex-lrow { display: flex; align-items: center; height: 168px; }
.mw .ex-trow-ic, .mw .ex-srow-ic, .mw .ex-lrow-ic {
  position: relative; flex: 0 0 92px; width: 92px; height: 92px; margin-right: 26px;
  display: block;
}
.mw .ex-trow-ic > svg, .mw .ex-srow-ic > svg, .mw .ex-lrow-ic > svg,
.mw .ex-ava { display: block; width: 100%; height: 100%; border-radius: 50%; }
.mw .ex-srow-ic > svg { border-radius: 26px; }
.mw .ex-ava--lettre {
  background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 500;
}
.mw .ex-trow-main, .mw .ex-srow-main { flex: 1 1 auto; min-width: 0; }
.mw .ex-trow-nom { font-size: 44px; font-weight: 700; letter-spacing: -.4px; }
.mw .ex-trow-pct { margin-top: 14px; font-size: 44px; font-weight: 500; color: var(--mw-up); letter-spacing: -.4px; }
.mw .ex-follow {
  flex: 0 0 auto; height: 76px; padding: 0 38px; border-radius: 38px;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: flex; align-items: center; font-size: 40px; font-weight: 600;
}

/* ---------------------------------------------------------- Trending Sites */
.mw .ex-srow-nom { font-size: 46px; font-weight: 600; letter-spacing: -.4px; }
.mw .ex-srow-cat { margin-top: 14px; font-size: 42px; color: var(--mw-dim); }
.mw .ex-lien {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 22px;
  background: var(--mw-pill); color: var(--mw-text);
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ Learn */
.mw .ex-lrow-titre { font-size: 46px; font-weight: 600; letter-spacing: -.4px; }
.mw .ex-lrow-sub { margin-top: 14px; font-size: 42px; color: var(--mw-dim); }

/* =============================================================================
   Feuilles du tiroir — Profile, Chats, Watchlist, History
   -----------------------------------------------------------------------------
   Sorties de l'ecran par translation, jamais en display:none : un conteneur
   retire du flux perd son scrollTop, et une feuille qu'on rouvre doit se
   retrouver ou on l'avait laissee.
   ============================================================================= */
.mw-feuille {
  position: absolute; inset: 0; z-index: 6;
  background: var(--mw-bg); color: var(--mw-text);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  overscroll-behavior: contain;
  transform: translateY(100%); visibility: hidden;
  transition: transform .36s cubic-bezier(.32,.72,0,1), visibility 0s .36s;
}
.mw-feuille::-webkit-scrollbar { width: 0; }
.mw[data-feuille="profile"]   .mw-feuille[data-feuille="profile"],
.mw[data-feuille="chats"]     .mw-feuille[data-feuille="chats"],
.mw[data-feuille="watchlist"] .mw-feuille[data-feuille="watchlist"],
.mw[data-feuille="history"]   .mw-feuille[data-feuille="history"],
.mw[data-feuille="tokens"]    .mw-feuille[data-feuille="tokens"],
.mw[data-feuille="token"]     .mw-feuille[data-feuille="token"],
.mw[data-feuille="perps"]     .mw-feuille[data-feuille="perps"],
.mw[data-feuille="search"]    .mw-feuille[data-feuille="search"],
.mw[data-feuille="cash"]      .mw-feuille[data-feuille="cash"],
.mw[data-feuille="comptes"]   .mw-feuille[data-feuille="comptes"],
.mw[data-feuille="gerer"]     .mw-feuille[data-feuille="gerer"],
.mw[data-feuille="avatar"]    .mw-feuille[data-feuille="avatar"] {
  transform: none; visibility: visible;
  transition: transform .36s cubic-bezier(.32,.72,0,1), visibility 0s;
}
/* Plein ecran (Profile, Chats) : la croix remplace la poignee. */
.mw .fe--plein { padding: 150px 47px 0; }
/* Demi-feuille (Watchlist, History, Comptes) : poignee en haut, comme une
   feuille iOS.

   LE DEGAGEMENT DU HAUT N'EST PAS DECORATIF. Ces feuilles couvrent tout l'ecran
   (`inset: 0` sur .mw-feuille), pas seulement le bas : sans padding, la poignee
   se retrouvait a 34 px du bord et l'en-tete a 77 — c'est-a-dire SOUS la barre
   d'etat de l'iPhone, la croix collee a l'heure. Les onglets de l'accueil, eux,
   commencent a 157. On aligne donc l'en-tete sur cette meme ligne, et la
   poignee se pose juste au-dessus. */
.mw .fe--sheet { padding: 80px 47px 0; }
.mw .fe--sheet .fe-tete { margin-top: 30px; }

.mw .fe-poignee {
  display: block; width: 78px; height: 9px; border-radius: 5px;
  background: #4a4a4a; margin: 34px auto 0;
}
.mw .fe-tete { display: flex; align-items: center; gap: 30px; }
.mw .fe-tete-txt { display: flex; flex-direction: column; gap: 6px; }
.mw .fe-tete-sub { font-size: 40px; color: var(--mw-dim); letter-spacing: -.2px; }
.mw .fe-x {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--mw-pill); color: var(--mw-text);
  display: flex; align-items: center; justify-content: center;
}
.mw .fe-titre-l { font-size: 50px; font-weight: 700; letter-spacing: -.8px; }
.mw .fe-titre {
  margin-top: 34px; font-size: 74px; font-weight: 800; letter-spacing: -1.6px; line-height: 1.05;
}
.mw .fe-titre--haut { margin-top: 78px; }
.mw .fe-chapo {
  margin-top: 26px; font-size: 45px; line-height: 1.34; color: var(--mw-text);
  letter-spacing: -.4px;
}
.mw .fe-rond {
  width: 110px; height: 110px; border-radius: 50%; margin-top: 58px;
  background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
}
.mw .fe-h2 { margin-top: 78px; font-size: 55px; font-weight: 700; letter-spacing: -.6px; }
.mw .fe-h2--serre { margin-top: 44px; }

/* ------------------------------------------------------------------ profil */
.mw .fe-moi { display: flex; align-items: center; gap: 36px; margin-top: 44px; }
.mw .fe-ava {
  flex: 0 0 152px; width: 152px; height: 152px; border-radius: 50%;
  background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; font-weight: 500;
}
.mw .fe-ava--av { font-size: 84px; overflow: hidden; }
.mw .fe-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw .fe-stats { flex: 1 1 auto; display: flex; justify-content: space-between; gap: 24px; }
.mw .fe-stats > div { display: flex; flex-direction: column; gap: 14px; }
.mw .fe-stat-l { font-size: 40px; color: var(--mw-dim); letter-spacing: -.2px; }
.mw .fe-stat-v { font-size: 46px; font-weight: 600; letter-spacing: -.4px; }
.mw .fe-boutons { display: flex; gap: 26px; margin-top: 52px; }
.mw .fe-bouton {
  flex: 1 1 0; height: 104px; border-radius: 52px; background: var(--mw-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 600; letter-spacing: -.4px;
}
.mw .fe-act { margin-top: 44px; }
.mw .fe-act-tete { display: flex; align-items: flex-start; gap: 22px; }
.mw .fe-act-n {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%;
  background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 600;
}
.mw .fe-act-txt { flex: 1 1 auto; min-width: 0; }
.mw .fe-act-l { font-size: 44px; line-height: 1.28; letter-spacing: -.4px; }
.mw .fe-act-l b { font-weight: 700; }
.mw .fe-act-h { display: block; margin-top: 10px; font-size: 40px; color: var(--mw-dim); }
.mw .fe-act-plus { flex: 0 0 auto; font-size: 46px; color: var(--mw-dim); line-height: .6; }
.mw .fe-carte {
  margin-top: 26px; background: var(--mw-card); border-radius: 40px; padding: 34px 30px 26px;
}
.mw .fe-carte-tete { display: flex; align-items: center; gap: 26px; }
.mw .fe-carte-ic { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.mw .fe-carte-ic svg { display: block; width: 100%; height: 100%; }
.mw .fe-carte-nom { flex: 1 1 auto; font-size: 46px; font-weight: 700; letter-spacing: -.4px; }
.mw .fe-buy {
  flex: 0 0 auto; height: 80px; padding: 0 42px; border-radius: 40px;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: flex; align-items: center; font-size: 42px; font-weight: 600;
}
.mw .fe-vide {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 46px 40px 40px; text-align: center;
  font-size: 42px; line-height: 1.32; color: var(--mw-dim);
}
.mw .fe-carte-pied {
  display: flex; gap: 34px; padding-top: 18px; color: var(--mw-dim);
}

/* ------------------------------------------------------------------- chats */
.mw .fe-rail { display: flex; gap: 26px; margin-top: 30px; }
.mw .fe-carte--tend { flex: 0 0 88%; margin-top: 0; padding: 8px 30px; }
.mw .fe-carte--coupee { flex: 0 0 88%; height: 100px; }
.mw .fe-trow { display: flex; align-items: center; gap: 26px; height: 156px; }
.mw .fe-trow-ic { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; }
.mw .fe-trow-ic svg { display: block; width: 100%; height: 100%; }
.mw .fe-trow-main { flex: 1 1 auto; min-width: 0; }
.mw .fe-trow-nom { font-size: 46px; font-weight: 700; letter-spacing: -.4px; }
.mw .fe-trow-mc { margin-top: 12px; font-size: 42px; font-weight: 600; }
.mw .fe-trow-mc span { color: var(--mw-dim); font-weight: 400; }
.mw .fe-gens {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  font-size: 44px; font-weight: 600; color: var(--mw-text);
}
.mw .fe-gens svg { color: var(--mw-dim); }
.mw .fe-neant {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  margin-top: 96px; font-size: 44px; color: var(--mw-dim);
}

/* --------------------------------------------------------- watchlist / historique */
.mw .fe-chips { display: flex; gap: 22px; margin-top: 40px; overflow-x: auto; scrollbar-width: none; }
.mw .fe-chips::-webkit-scrollbar { display: none; }
.mw .fe-chip { height: 88px; padding: 0 36px; border-radius: 44px; font-size: 44px; font-weight: 600; }
.mw .fe-chip.is-on { background: #f2f2f2; color: #101010; }
.mw .fe-chip--actif { background: var(--mw-accent); color: var(--mw-accent-ink); }
.mw .fe-watch { padding: 0; margin-top: 26px; }
.mw .fe-mois { margin-top: 46px; font-size: 50px; font-weight: 700; letter-spacing: -.6px; }
.mw .fe-hist { margin-top: 18px; }
.mw .fe-hrow { display: flex; align-items: center; gap: 26px; height: 152px; }
.mw .fe-hrow-ic { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; }
.mw .fe-hrow-ic svg { display: block; width: 100%; height: 100%; }
.mw .fe-hrow-main { flex: 1 1 auto; min-width: 0; }
.mw .fe-hrow-t { font-size: 46px; font-weight: 600; letter-spacing: -.4px; }
.mw .fe-hrow-s { margin-top: 12px; font-size: 42px; color: var(--mw-dim); }
.mw .fe-hrow-v { flex: 0 0 auto; font-size: 44px; font-weight: 600; color: var(--mw-up); }

/* ------------------------------------------ feuille « Tokens » et fiche jeton */
.mw .fe-barre { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
.mw .fe-barre .fe-titre-l { flex: 1 1 auto; }
.mw .fe-regl {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--mw-pill); color: var(--mw-text);
  display: flex; align-items: center; justify-content: center;
}
.mw .fe-tot {
  margin-top: 44px; font-size: var(--mw-f-balance); font-weight: 700;
  letter-spacing: var(--mw-ls-balance); line-height: 1;
}
.mw .fe-tot-delta {
  display: flex; align-items: center; gap: 26px; margin-top: 30px;
  font-size: var(--mw-f-delta); font-weight: 600; letter-spacing: var(--mw-ls-delta);
}
.mw .fe-tot-delta .pct { padding: 10px 18px; border-radius: 14px; color: var(--mw-accent-ink); }
.mw .fe-tot-delta.is-up   { color: var(--mw-up); }
.mw .fe-tot-delta.is-down { color: var(--mw-down); }
.mw .fe-tot-delta.is-up   .pct { background: var(--mw-up); }
.mw .fe-tot-delta.is-down .pct { background: var(--mw-down); }
.mw .fe-liste { margin-top: 46px; }

/* ------------------------------------------------------------- fiche jeton */
/* Deux couleurs INDEPENDANTES : la courbe suit le sens de la plage tracee, la
   variation suit son propre signe. Les lier peignait « +0,91% » en rouge parce
   que la courbe des 24 dernieres heures descendait. */
.mw .je-graph { color: var(--mw-up); }
.mw .je-graph.est-bas { color: var(--mw-down); }
.mw .fe-barre--jeton .je-ic {
  flex: 1 1 auto; width: 92px; height: 92px; max-width: 92px;
  border-radius: 50%; overflow: hidden; margin-right: auto;
}
.mw .fe-barre--jeton .je-ic svg, .mw .fe-barre--jeton .je-ic img { display: block; width: 100%; height: 100%; }
.mw .je-nom {
  display: flex; align-items: center; gap: 18px; margin-top: 40px;
  font-size: 74px; font-weight: 800; letter-spacing: -1.6px; line-height: 1;
  color: var(--mw-text);
}
.mw .je-nom svg { color: var(--mw-dim); }
.mw .je-px {
  margin-top: 18px; font-size: 74px; font-weight: 800;
  letter-spacing: -1.6px; line-height: 1; color: var(--mw-text);
}
.mw .je-var { margin-top: 22px; font-size: 46px; font-weight: 600; letter-spacing: -.4px;
              color: var(--mw-up); }
.mw .je-var.est-bas { color: var(--mw-down); }

.mw .je-graph { height: 300px; margin: 66px 0 0; }
.mw .je-graph svg { display: block; width: 100%; height: 100%; overflow: visible; }

.mw .je-plages { display: flex; align-items: center; gap: 12px; margin-top: 62px; }
.mw .je-plage {
  flex: 1 1 0; justify-content: center; height: 78px; padding: 0;
  border-radius: 39px; background: none; color: var(--mw-dim);
  font-size: 42px; font-weight: 600; letter-spacing: .4px;
}
.mw .je-plage.is-on { background: #f2f2f2; color: #101010; }
.mw .je-bougies { flex: 0 0 auto; padding-left: 10px; color: var(--mw-text); display: flex; }

.mw .je-h2 { margin-top: 74px; color: var(--mw-text); }
.mw .je-pos { display: flex; align-items: center; gap: 26px; height: 164px; color: var(--mw-text); }
.mw .je-pos-ic { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; }
.mw .je-pos-ic svg, .mw .je-pos-ic img { display: block; width: 100%; height: 100%; }
.mw .je-pos-main { flex: 1 1 auto; min-width: 0; }
.mw .je-pos-t { display: flex; align-items: baseline; gap: 14px; font-size: 46px; letter-spacing: -.4px; }
.mw .je-pos-t b { font-weight: 700; }
.mw .je-pos-t span { color: var(--mw-dim); font-weight: 400; }
.mw .je-pos-q { margin-top: 12px; font-size: 42px; color: var(--mw-dim); }
.mw .je-pos-side { flex: 0 0 auto; text-align: right; }
.mw .je-pos-v { font-size: 46px; font-weight: 600; letter-spacing: -.6px; }
.mw .je-pos-d { margin-top: 12px; font-size: 42px; font-weight: 500; color: var(--mw-up); }
.mw .je-pos-d.est-bas { color: var(--mw-down); }
.mw .je-pos > svg { color: var(--mw-dim); flex: 0 0 auto; }

.mw .je-chat { display: flex; align-items: center; margin-top: 46px; color: var(--mw-text); }
.mw .je-chat-t {
  flex: 1 1 auto; display: flex; align-items: center; gap: 14px;
  font-size: 55px; font-weight: 700; letter-spacing: -.6px;
}
.mw .je-chat-n { flex: 0 0 auto; font-size: 44px; font-weight: 500; color: var(--mw-up); }
.mw .je-tail { height: 220px; }

/* Barre d'action collée en bas de la fiche, comme sur la capture. */
.mw .je-pied {
  position: sticky; bottom: 0; margin: 0 -47px;
  display: flex; align-items: center; gap: 26px;
  padding: 22px 47px calc(52px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--mw-bg) 34%);
}
.mw .je-cap {
  flex: 1 1 auto; height: 112px; border-radius: 56px; background: var(--mw-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 600; color: var(--mw-text); letter-spacing: -.4px;
}
.mw .je-cap span { color: var(--mw-dim); font-weight: 400; margin-left: 12px; }
.mw .je-trade {
  flex: 0 0 auto; height: 112px; padding: 0 62px; border-radius: 56px;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: flex; align-items: center; font-size: 46px; font-weight: 700;
}

/* ------------------------------------------------------------ feuille Perps */
.mw .pe-tot { margin-top: 40px; }
.mw .pe-carte { margin-top: 46px; background: var(--mw-card); border-radius: 40px; padding: 34px 30px; }
.mw .pe-fonds {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 46px; font-weight: 500; letter-spacing: -.4px; color: var(--mw-text);
}
.mw .pe-fonds svg { color: var(--mw-dim); vertical-align: -4px; margin-left: 8px; }
.mw .pe-fonds-v { font-weight: 600; }
.mw .pe-add {
  display: flex; align-items: center; justify-content: center;
  height: 96px; margin-top: 30px; border-radius: 48px;
  background: var(--mw-pill); color: var(--mw-text);
  font-size: 46px; font-weight: 600; letter-spacing: -.4px;
}
.mw .pe-promo { position: relative; display: flex; align-items: center; gap: 20px; padding: 40px 30px 34px; }
.mw .pe-promo-x { position: absolute; right: 30px; top: 30px; color: var(--mw-dim); }
.mw .pe-promo-txt { flex: 1 1 auto; min-width: 0; }
.mw .pe-promo-k {
  font-size: 36px; font-weight: 700; letter-spacing: 2px; color: var(--mw-dim);
}
.mw .pe-promo-t {
  margin-top: 18px; font-size: 50px; font-weight: 600; line-height: 1.24;
  letter-spacing: -.5px; color: var(--mw-text); max-width: 86%;
}
.mw .pe-promo-l {
  margin-top: 26px; display: flex; align-items: center; gap: 12px;
  font-size: 46px; font-weight: 600; color: var(--mw-accent);
}
.mw .pe-promo-ill { flex: 0 0 200px; width: 200px; align-self: center; margin-right: -8px; }

.mw .pe-titre { margin-top: 74px; }
/* DEUX rangees qui defilent lateralement, pas un retour a la ligne libre :
   sur la capture la quatrieme pastille de chaque rangee est coupee par le
   bord, ce qui n'arrive qu'avec un defilement horizontal. En flex-wrap on
   obtenait trois rangees completes, ce qui n'est pas la meme mise en page. */
.mw .pe-chips {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  justify-content: start; gap: 20px; margin-top: 36px;
  overflow-x: auto; scrollbar-width: none;
}
.mw .pe-chips::-webkit-scrollbar { display: none; }
.mw .pe-chip { height: 86px; padding: 0 30px; border-radius: 43px; gap: 16px; font-size: 44px; }

.mw .pe-liste { margin-top: 22px; }
.mw .pe-row { display: flex; align-items: center; height: 158px; }
.mw .pe-row-ic {
  position: relative; flex: 0 0 92px; width: 92px; height: 92px; margin-right: 26px;
  display: block; overflow: visible;
}
.mw .pe-row-ic > svg, .mw .pe-row-ic > img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.mw .pe-row-main { flex: 1 1 auto; min-width: 0; }
.mw .pe-row-t { display: flex; align-items: center; gap: 18px; }
.mw .pe-row-s { font-size: 46px; font-weight: 700; letter-spacing: -.4px; }
.mw .pe-lev {
  height: 52px; padding: 0 16px; border-radius: 16px; background: var(--mw-chip);
  display: flex; align-items: center; font-size: 36px; font-weight: 600;
}
.mw .pe-row-v { margin-top: 14px; font-size: 42px; color: var(--mw-dim); }
.mw .pe-row-side { flex: 0 0 auto; text-align: right; }
.mw .pe-tail { height: 240px; }

/* Long / Short collés en bas, comme sur la capture. */
.mw .pe-pied {
  position: sticky; bottom: 0; margin: 0 -47px;
  display: flex; gap: 26px; padding: 22px 47px calc(52px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--mw-bg) 34%);
}
.mw .pe-long, .mw .pe-short {
  flex: 1 1 0; height: 112px; border-radius: 56px;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 700; letter-spacing: -.4px;
}

/* --------------------------------------------------------------- recherche */
/* Un vrai champ, pas un texte : sans lui aucun clavier ne s'ouvre. Il est
   dessine pour se confondre avec la pastille qui l'entoure. */
.mw .mw-search-champ {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: none; border: 0; outline: none; padding: 0;
  color: var(--mw-text); font: inherit; letter-spacing: inherit;
  -webkit-appearance: none; appearance: none;
}
.mw .mw-search-champ::placeholder { color: #8b8b8b; opacity: 1; }
.mw .mw-search-champ::-webkit-search-cancel-button { display: none; }

/* Le « + » devient une croix : c'est la MEME pastille tournee d'un quart de
   tour, donc le passage de l'une a l'autre se fait sans a-coup. */
.mw-fermer-recherche {
  flex: 0 0 112px; width: 112px; height: 112px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.mw-fermer-recherche svg { transform: rotate(45deg); }
.mw[data-feuille="search"] .mw-plus { display: none; }
.mw[data-feuille="search"] .mw-fermer-recherche { display: flex; }

/* Le dock passe AU-DESSUS de la feuille pendant la recherche : sur la capture
   le champ flotte sur la liste, il n'est pas recouvert par elle. */
.mw[data-feuille="search"] .mw-dock { z-index: 8; }
.mw[data-feuille="search"] .mw-veil { z-index: 7; }
/* Remonte avec le clavier. La variable est posee par le script, qui seul
   connait la hauteur reellement occupee — elle varie avec la langue, la barre
   de suggestions et le clavier choisi. */
.mw .mw-dock, .mw .mw-veil { transition: transform .22s ease-out; }
.mw[data-feuille="search"] .mw-dock,
.mw[data-feuille="search"] .mw-veil { transform: translateY(calc(var(--mw-clavier, 0px) * -1)); }

.mw .fe--recherche { padding-top: 0; }
.mw .re-bloc { margin-top: 54px; }
.mw .re-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.mw .re-h2 { margin-top: 0; }
.mw .re-vider { font-size: 46px; font-weight: 500; color: var(--mw-dim); letter-spacing: -.4px; }
.mw .re-liste { margin-top: 10px; }
.mw .re-row { height: 156px; }
/* De quoi ne jamais laisser la derniere ligne sous le champ de recherche. */
.mw .re-tail { height: 300px; }

/* Etat vide de la courbe, salon et « About » de la fiche. */
.mw .je-vide {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  height: 300px; justify-content: center; margin-top: 66px;
  font-size: 42px; color: var(--mw-dim); text-align: center;
}
.mw .je-vide[hidden], .mw .je-graph[hidden],
.mw .je-pos[hidden], .mw .je-pos-titre[hidden] { display: none; }
.mw .je-sym {
  font-size: 46px; font-weight: 500; color: var(--mw-dim);
  letter-spacing: -.4px; margin-left: 16px;
}
.mw .je-sym:empty { display: none; }
.mw .je-bulle {
  display: flex; align-items: center; gap: 26px; margin-top: 30px;
  background: var(--mw-card); border-radius: 36px; padding: 30px 34px;
}
.mw .je-bulle-a {
  flex: 0 0 66px; width: 66px; height: 66px; border-radius: 50%;
  background: var(--mw-pill); display: flex; align-items: center;
  justify-content: center; font-size: 34px;
}
.mw .je-bulle-t {
  min-width: 0; font-size: 44px; color: var(--mw-text); letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw .je-about {
  display: flex; align-items: center; gap: 12px; margin-top: 56px;
  font-size: 55px; font-weight: 700; letter-spacing: -.6px; color: var(--mw-text);
}
.mw .je-about b { font-weight: 700; }

/* ------------------------------------------------------------- feuille Cash */
.mw .ca-vide { flex: 1 1 auto; }
.mw .ca-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-top: 62px; }
.mw .ca-txt { min-width: 0; }
.mw .ca-titre, .mw .ca-solde {
  font-size: 86px; font-weight: 800; letter-spacing: -2px; line-height: 1.06;
}
.mw .ca-carte { flex: 0 0 258px; width: 258px; height: 164px; display: block; }
.mw .ca-h2 { margin-top: 96px; font-size: 62px; font-weight: 800; letter-spacing: -1px; }
.mw .ca-liste { margin-top: 26px; }
.mw .ca-row { display: flex; align-items: center; gap: 30px; height: 150px; }
.mw .ca-row-ic {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--mw-card); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
}
.mw .ca-row-t { font-size: 50px; font-weight: 600; letter-spacing: -.5px; }
.mw .ca-row-s { margin-top: 12px; font-size: 44px; color: var(--mw-dim); letter-spacing: -.2px; }

/* --------------------------------------------------------- feuille Comptes */
.mw .co-liste { margin-top: 34px; display: flex; flex-direction: column; gap: 26px; }
.mw .co-row {
  display: flex; align-items: center; gap: 26px;
  background: var(--mw-card); border-radius: 40px; padding: 26px 26px 26px 30px;
}
.mw .co-ini {
  position: relative; flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%;
  background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 500; letter-spacing: .6px;
}
/* La coche est un BADGE pose sur la pastille, pas une icone dedans : cadree
   plus au centre elle mordait sur les initiales et les deux devenaient
   illisibles. L'anneau de la couleur de la carte la detache du disque. */
.mw .co-coche {
  position: absolute; right: -6px; bottom: -6px; width: 38px; height: 38px;
  border-radius: 50%; background: var(--mw-accent); color: #0b0b0d;
  box-shadow: 0 0 0 6px var(--mw-card);
  display: flex; align-items: center; justify-content: center;
}
.mw .co-coche svg { width: 62%; height: 62%; display: block; }
.mw .co-main { flex: 1 1 auto; min-width: 0; }
.mw .co-nom { font-size: 50px; font-weight: 700; letter-spacing: -.5px; }
.mw .co-tot { margin-top: 12px; font-size: 46px; font-weight: 500; color: var(--mw-text); }
.mw .co-act {
  flex: 0 0 88px; width: 88px; height: 88px; border-radius: 26px;
  background: var(--mw-pill); color: var(--mw-text);
  display: flex; align-items: center; justify-content: center;
}


/* =============================================================================
   Feuille « Manage Profile »
   -----------------------------------------------------------------------------
   Seul l'avatar y est vivant ; les deux cartes de lignes sont decoratives comme
   le reste de la maquette. Elles reprennent donc la carte des feuilles
   existantes (.fe-carte) plutot qu'un nouveau fond.
   ============================================================================= */
/* Contrairement a tous les autres ronds d'avatar du fichier, celui-ci n'est PAS
   en overflow:hidden : le badge crayon deborde volontairement du disque et un
   overflow le rognerait. C'est donc l'image elle-meme qui porte son arrondi. */
.mw .gp-ava {
  position: relative; width: 240px; height: 240px; border-radius: 50%;
  margin: 56px auto 0; background: var(--mw-pill); color: var(--mw-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 132px; line-height: 1;
}
.mw .gp-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* Meme construction que .co-coche : un badge POSE sur la pastille, detache par
   un anneau — de la couleur du fond de la feuille, pas d'une carte. Il chevauche
   le bord du disque, d'ou l'ancrage a 2px et non a l'interieur. */
.mw .gp-crayon {
  position: absolute; right: 2px; bottom: 2px; width: 72px; height: 72px;
  border-radius: 50%; background: var(--mw-accent); color: var(--mw-accent-ink);
  box-shadow: 0 0 0 8px var(--mw-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1;
}
.mw .gp-crayon svg { display: block; width: 52%; height: 52%; }

.mw .gp-carte {
  margin-top: 26px; background: var(--mw-card); border-radius: 40px; padding: 0 34px;
}
.mw .gp-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  height: 122px; font-size: 46px; font-weight: 500; letter-spacing: -.4px;
}
/* Le filet ne separe QUE deux lignes voisines : pose sur la premiere, il
   doublerait le bord arrondi de la carte. */
.mw .gp-ligne + .gp-ligne { border-top: 3px solid rgba(255,255,255,.08); }
.mw[data-theme="light"] .gp-ligne + .gp-ligne { border-top-color: rgba(0,0,0,.10); }
.mw .gp-lib {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw .gp-val {
  flex: 0 1 auto; min-width: 0; color: var(--mw-dim); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw .gp-ligne svg { flex: 0 0 auto; color: var(--mw-dim); }
/* .fe--sheet pose un padding en raccourci qui met le bas a zero ; cette
   longhand doit donc rester APRES lui dans la feuille. Sans elle, la derniere
   carte colle au bord bas de l'ecran. */
.mw .fe--gerer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* =============================================================================
   Feuille « Select Avatar »
   ============================================================================= */
/* Colonne flexible pour que « Save » se pose au BAS de la feuille quel que soit
   le nombre d'emojis : la feuille est en position absolue inset:0, sa hauteur
   est donc connue et margin-top:auto absorbe tout le vide restant.
   Les enfants sont figes en flex:0 0 auto — sinon, le jour ou la grille
   depasserait la hauteur de l'ecran, flex les comprimerait au lieu de laisser
   defiler. */
.mw .fe--avatar {
  display: flex; flex-direction: column;
  padding-bottom: calc(62px + env(safe-area-inset-bottom));
}
.mw .fe--avatar > * { flex: 0 0 auto; }

/* Le chevron reprend exactement la pastille de la croix : c'est la meme place
   dans l'en-tete. Classe a part parce que la croix, elle, est cablee sur la
   fermeture de toute feuille — ici on veut seulement revenir en arriere. */
.mw .av-retour {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--mw-pill); color: var(--mw-text);
  display: flex; align-items: center; justify-content: center;
}
.mw .av-apercu {
  width: 300px; height: 300px; border-radius: 50%; margin: 62px auto 0;
  background: var(--mw-pill); color: var(--mw-dim); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 162px; line-height: 1;
}
.mw .av-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 7 colonnes en 1fr : sur les 829 px utiles il reste ~96 px par case, soit des
   cibles tactiles tres au-dessus du minimum. aspect-ratio plutot qu'une hauteur
   ecrite en dur, pour que les cases restent carrees si la marge laterale de la
   feuille bouge un jour. */
.mw .av-grille {
  /* 62 et non 86 : avec neuf rangees, la feuille depassait de 14 px et se
     mettait a defiler pour rien. Ce qu'on rogne ici, le vide sous la grille le
     rend en ecart avant « Save ». */
  margin: 62px 0 70px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 26px;
}
.mw .av-emo {
  aspect-ratio: 1; border-radius: 28px; background: var(--mw-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; line-height: 1;
}
/* Le lavande plein, comme l'onglet actif. Sur un emoji — glyphe en couleur —
   une couleur de texte ne changerait rien : seul le fond peut dire lequel est
   choisi. */
.mw .av-emo.est-choisi { background: var(--mw-accent); }

/* margin-top:auto colle le bouton en bas ; la marge basse de la grille garantit
   l'ecart minimal le jour ou il n'y a plus de vide a absorber. */
.mw .av-save {
  margin-top: auto; height: 112px; border-radius: 56px;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 700; letter-spacing: -.4px;
}