/* ============================================================================
   Landing ZIC Wall Street dédiée (wall-street.zic.fi + alias wallstreet) —
   portage CSS du gabarit React « ZIC Wall Street » (7 oct 2026 : `App()`,
   `Ticker`, `Board`, `Spark`, `FriendQuote`, « Comment ça marche », « Le
   reste de ZIC »). Préfixe `wsl-` (DOM + classes), tokens `--wsl-*` sur
   html.zh-wallstreet-page. Chargé APRÈS landing-home.css (nav / footer fixe /
   launcher « + » / tokens --zh-* / .zh-chip-ic / .zh-chrono), auth-modal.css
   et landing-multivalue.css (composant MultiValue+ du héro `#cote` et de la
   carte « pote » `#ami`), AVANT les CSS de modules. Même architecture que
   landing-multishop-page.css (chrome re-scopé, bloc miroir du FAB chat
   mobile, rail des modules, toast). Contrat DOM : templates/wallstreet/*
   (contrat d'états en tête de _board.html et _row_macro.html).

   Mapping gabarit → tokens : V.text → --zh-text, V.muted → --zh-muted,
   V.purple → --zh-purple, V.bg1 → --wsl-bg, V.bg3 → --zh-bg3, V.line →
   --wsl-line, dégradé + halo du héro → --wsl-hero / --wsl-halo, #16A34A
   (courbes, pastilles, remplissages) → --wsl-up, #DC2626 → --wsl-down,
   #E11D48 (CTA) → --wsl-red, #4ADE80 (hausse du ticker sur fond sombre) →
   --wsl-tk-up ; la baisse du ticker passe de #F87171 (3,5:1 sous le halo) à
   #fca5a5 (--wsl-tk-down, 5,1:1).

   Variables INLINE (jamais définies ici) : `--wsl-net` (couleur de marque
   d'un réseau : icônes de ligne, ticker, puces du filtre) et `--wsl-mod`
   (couleur d'un module du rail), posées par les gabarits.

   Contraste (WCAG AA 4,5:1, recalculé par tests/test_wallstreet_landing_css.py
   depuis les déclarations réelles) : le vert de TEXTE est --wsl-up-ink
   #15803d (5,0:1 sur blanc ; le #16a34a du gabarit n'atteint que 3,3:1 et ne
   sert qu'aux traits et remplissages) ; sur les fonds lavande (#annuaire
   #ede9fe, #comment #f0ebff) #15803d tombe à 4,3-4,4:1 → kickers en
   --wsl-up-ink-d #166534 (5,9:1). Badge « TOI », pastille « Séance ouverte »
   et bouton « Voir ma ligne » sur fond plein --wsl-up-ink (blanc 5,0:1).
   Baisse #dc2626 sur blanc 4,8:1. Textes posés DIRECTEMENT sur le héro
   sombre (ligne « barème » du composant) : blanc 78 % et lien #86efac, calculés
   sur le stop le plus clair du dégradé sous le halo vert. Bordures de champs
   (recherche, tri) en --wsl-line-d (3,7:1, WCAG 1.4.11) ; --wsl-line (1,4:1)
   reste aux séparateurs décoratifs.

   Empilement (racine) : footer fixe 90 (landing-home.css) < nav / FAB chat
   100 < toast du composant MultiValue+ 1600 < toast de page `.wsl-toast` 5000
   < modale d'auth 9999. Aucun autre z-index ≥ 100 ici. Le héro n'a AUCUN
   overflow:hidden (les halos vivent dans .wsl-hero-bg) : ombres des cartes
   MultiValue+ et scroll-margin de #cote non clippés.

   Chrome re-scopé (règles de landing-home.css scopées body.zh-home-page, que
   cette page n'a PAS) : réserve basse `.zh-page` = footer fixe
   (`--wsl-ft-h`, mesuré par le JS de page : `document.documentElement.style
   .setProperty("--wsl-ft-h", …)`), FAB chat au-dessus du footer, FAB masqué
   dock ouvert (`body.zh-fl-open`), bloc FAB mobile miroir de la home. Le
   `svg{height:auto}` de mobile.css écrase les attributs : chaque svg est
   dimensionné par classe. Survols sous `@media (hover: hover)`, mouvement
   neutralisé sous prefers-reduced-motion (le `*` de mobile.css ne suffit pas :
   une seule itération quasi instantanée ferait sauter le ticker).

   Nav et footer FIXES réservés par `scroll-padding-top` / `-bottom` sur
   html.zh-wallstreet-page (WCAG 2.4.11 : un élément focalisé au clavier, un
   `scrollIntoView` ou une ancre ne finissent jamais sous l'une ou l'autre) ;
   les `scroll-margin-top` ne portent donc que l'air au-delà de la nav :
   #cote / #multivalue arrivent à nav + 16 px, les sections à nav + 18 px.

   Points de rupture : ≥ 1100 tableau à 7 colonnes (`table-layout: fixed`,
   aucun défilement horizontal) ; 901-1099 statut dans la cellule compte,
   courbe 72 px, « Suivre » en icône seule (nom accessible gardé) ; 601-900
   lignes en grille à 4 pistes (rang | compte | cote + variation + mini courbe
   | actions), en-têtes de tri masqués visuellement (révélés au focus clavier)
   et menu de tri affiché ; ≤ 768 héro 152 px + safe-area (comme la home),
   cibles ≥ 44 px, champs à 16 px ; ≤ 600 cartes empilées ; ≤ 430 chiffres en
   2 colonnes, h1 30 px.

   Crochets d'état posés par landing-wallstreet-page.js et stylés ici :
   `tr.wsl-row[data-flash="up|down"]` (1,6 s après une relecture LIVE),
   `.wsl-row.is-me`, `.wsl-ticker.is-paused` (en plus de `aria-pressed` du
   bouton pause), `.wsl-live[aria-pressed]`, `[aria-checked]` des puces,
   `.wsl-chip--fav[aria-pressed]`, `th[aria-sort]` + `.wsl-sort-btn.is-active`,
   `.wsl-fav[aria-pressed|aria-busy]`, `li.wsl-page-gap` et
   `button.wsl-page-num[aria-current="page"]` créés dans `ol.wsl-pages`,
   `.wsl-board[data-state|data-stale|aria-busy]`, `.wsl-toast[role=alert]`.
   ============================================================================ */

html.zh-wallstreet-page {
  /* Héro : dégradé et halo vert du gabarit. */
  --wsl-hero: linear-gradient(160deg, #0f0725 0%, #1a0840 45%, #0f2a1c 100%);
  --wsl-halo: radial-gradient(circle, rgba(22, 163, 74, 0.3), transparent 70%);
  /* Vert : remplissages / traits (3,3:1, jamais du texte), texte sur blanc
     (5,0:1), texte sur lavande (5,9:1), fonds teintés et bordure. */
  --wsl-up: #16a34a;
  --wsl-up-ink: #15803d;
  --wsl-up-ink-d: #166534;
  --wsl-up-l: #f1fbf5;
  --wsl-up-t: #dcfce7;
  --wsl-up-b: #bbf7d0;
  /* Baisse : texte / trait (4,8:1 sur blanc), encre sur teinte, teinte. */
  --wsl-down: #dc2626;
  --wsl-down-ink: #b91c1c;
  --wsl-down-l: #fee2e2;
  /* Stable / nouveau : trait de la courbe (3,7:1). */
  --wsl-flat: #8b7bb8;
  /* Ticker sur le héro sombre (≥ 4,5:1 même sous le halo vert). */
  --wsl-tk-up: #4ade80;
  --wsl-tk-down: #fca5a5;
  /* Texte et lien posés directement sur le héro sombre. */
  --wsl-on-dark: rgba(255, 255, 255, 0.78);
  --wsl-link-dark: #86efac;
  --wsl-line: #dcd2f5;
  --wsl-line-d: #8b7bb8;
  --wsl-bg: #ede9fe;
  --wsl-shade: #fafafc;
  --wsl-red: #e11d48;
  --wsl-red-h: #be123c;
  --wsl-nav-h: 62px;
  /* Hauteur du footer fixe : valeur de repli, mesurée puis posée inline par
     le JS de page. */
  --wsl-ft-h: 67px;
  /* Air des ancres AU-DELÀ de la nav (réservée par scroll-padding-top). */
  --wsl-anchor: 18px;
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: var(--wsl-nav-h);
  scroll-padding-bottom: var(--wsl-ft-h);
}
@media (max-width: 768px) {
  html.zh-wallstreet-page {
    --wsl-nav-h: 60px;
    --wsl-ft-h: calc(43px + env(safe-area-inset-bottom, 0px));
  }
}

body.zh-wallstreet-page {
  font-family: "DM Sans", sans-serif;
  color: var(--zh-text);
  background: var(--wsl-bg);
  overflow-x: hidden;
}
.wsl-root {
  display: block;
  min-width: 0;
}
.wsl-root button,
.wsl-root input,
.wsl-root select,
.wsl-toast {
  font-family: "DM Sans", sans-serif;
}

/* Garde `hidden` : beaucoup d'éléments ont un display de classe (flex /
   grid / inline-flex : ticker, blocs d'état, barre « Ta cote », boutons de
   ligne, courbe…) qui l'emporterait sur le display:none UA. Scopée à la page
   et au toast — jamais globale. */
.wsl-root [hidden],
.wsl-toast[hidden],
.wsl-toast [hidden] {
  display: none !important;
}

.wsl-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Chrome re-scopé ─────────────────────────────────────────────────────── */
/* Réserve basse = footer fixe ; fond sombre limité à la réserve (pas de bande
   claire entre la dernière section et le footer). */
body.zh-wallstreet-page .zh-page {
  padding-bottom: var(--wsl-ft-h);
  background: linear-gradient(#0f0722, #0f0722) no-repeat bottom / 100% var(--wsl-ft-h);
}
/* FAB chat au-dessus du footer (desktop 67 + 11 = 78 px, comme la home ; ≤768
   --wsl-ft-h porte déjà la safe-area). Spécificité (0,1,2) >
   `.zic-chat-fab-wrap` (0,1,0) de landing-chat-fab.css, chargé après. */
body.zh-wallstreet-page .zic-chat-fab-wrap {
  bottom: calc(var(--wsl-ft-h) + 11px);
}
/* FAB masqué pendant que le dock « + » est ouvert (z 100 > footer 90) ; les
   boutons du wrap remettent pointer-events:auto → règle descendante. */
body.zh-wallstreet-page.zh-fl-open .zic-chat-fab-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
body.zh-wallstreet-page.zh-fl-open .zic-chat-fab-wrap * {
  pointer-events: none;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
/* Défilement sans couture : la piste porte DEUX listes identiques (la
   seconde aria-hidden), -50 % = exactement une liste. */
@keyframes wsl-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes wsl-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes wsl-shimmer {
  from {
    background-position: 150% 0, 0 0;
  }
  to {
    background-position: -50% 0, 0 0;
  }
}
@keyframes wsl-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Clignotement d'une ligne mise à jour par le LIVE : seul le `from` est
   déclaré, l'animation revient au fond réel de la ligne (blanc, survol ou
   surlignage « TOI »). */
@keyframes wsl-flash-up {
  from {
    background-color: rgba(22, 163, 74, 0.2);
  }
}
@keyframes wsl-flash-down {
  from {
    background-color: rgba(220, 38, 38, 0.16);
  }
}
@keyframes wsl-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Primitives partagées ────────────────────────────────────────────────── */
.wsl-section-in {
  max-width: 1100px;
  margin: 0 auto;
}
.wsl-section-head {
  margin-bottom: 40px;
}
.wsl-section-head--center {
  text-align: center;
}
/* Kicker vert foncé : lisible sur blanc (7,1:1) ET sur les fonds lavande
   (5,9:1). Le rail des modules garde le violet du gabarit. */
.wsl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wsl-up-ink-d);
  margin: 0;
}
.wsl-kicker .zh-chip-ic svg {
  width: 13px;
  height: 13px;
}
.wsl-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -1.1px;
  line-height: 1.15;
  color: var(--zh-text);
  margin: 8px 0 0;
  text-wrap: balance;
}
.wsl-sub {
  font-size: 14.5px;
  color: var(--zh-muted);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 560px;
}
/* Anneau de focus des sections claires (le violet global de mobile.css est
   gardé, mais posé ici sans rayon : il épouse chaque bouton). */
.wsl-board :focus-visible,
.wsl-how :focus-visible,
.wsl-mods :focus-visible {
  outline: 2px solid var(--zh-purple);
  outline-offset: 2px;
}
/* Bouton fantôme (relance, filtres par défaut, quitter « Mes favoris »). */
.wsl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wsl-btn--ghost {
  border: 1px solid var(--wsl-line-d);
  background: #fff;
  color: var(--zh-text);
}
/* Flèche ronde du rail des modules (44 px : cible tactile). */
.wsl-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--wsl-line);
  background: #fff;
  color: var(--zh-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.wsl-arrow svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .wsl-btn--ghost:hover {
    border-color: var(--zh-purple);
    background: var(--wsl-shade);
  }
  .wsl-arrow:hover {
    border-color: var(--zh-purple);
    color: var(--zh-purple);
  }
}

/* ── CTA rouge (pilule + chrono) ─────────────────────────────────────────── */
/* « Je me cote sur ZIC Wall Street — gratuit » (#comment, SEULE CTA de la
   page) : chrono clair 34 px (svg 28) dans une pastille blanche 18 %. */
.wsl-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 8px 8px 30px;
  border-radius: 100px;
  border: none;
  background: var(--wsl-red);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(225, 29, 72, 0.55);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
@media (hover: hover) {
  .wsl-cta:hover {
    background: var(--wsl-red-h);
    transform: translateY(-1px);
    box-shadow: 0 18px 38px -12px rgba(225, 29, 72, 0.65);
  }
}
.wsl-cta:active {
  transform: translateY(0);
}
.wsl-cta:focus-visible {
  outline: 2px solid var(--zh-purple);
  outline-offset: 3px;
}
.wsl-cta-txt {
  min-width: 0;
}
.wsl-cta-chrono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.wsl-cta-chrono .zh-chrono svg {
  width: 28px;
  height: 28px;
}

/* ── Héro ────────────────────────────────────────────────────────────────── */
.wsl-hero {
  position: relative;
  display: block;
  background: var(--wsl-hero);
  padding: 112px 36px 56px;
  color: #fff;
}
/* Longhands top/right/bottom/left plutôt que `inset` (Safari < 14.1). */
.wsl-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Halo vert du gabarit (haut-droite). */
.wsl-hero-halo {
  position: absolute;
  top: -130px;
  right: -110px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: var(--wsl-halo);
}
.wsl-hero-in {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}
.wsl-hero-copy {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.wsl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.wsl-hero-badge .zh-chip-ic svg {
  width: 12px;
  height: 12px;
}
.wsl-hero-badge-txt {
  min-width: 0;
}
/* « Séance ouverte » : fond --wsl-up-ink (le #16a34a du gabarit ne donne que
   3,3:1 au blanc à 9,5 px). Décoratif, toujours affiché. */
.wsl-hero-session {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--wsl-up-ink);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wsl-hero-h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 54px);
  letter-spacing: -2px;
  line-height: 1.06;
  color: #fff;
  margin: 18px 0 0;
}
.wsl-hero-sub {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 600px;
  margin: 14px auto 0;
}

/* ── Ticker (bandeau défilant) ───────────────────────────────────────────── */
.wsl-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wsl-ticker-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wsl-ticker-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: wsl-ticker 44s linear infinite;
}
/* Pause : bouton pressé (aria-pressed, sans JS de secours) ou classe posée
   par le JS (survol / focus / bouton). */
.wsl-ticker.is-paused .wsl-ticker-track,
.wsl-ticker:has(.wsl-ticker-toggle[aria-pressed="true"]) .wsl-ticker-track {
  animation-play-state: paused;
}
/* L'écart APRÈS le dernier élément (padding-right = gap) rend la boucle
   exacte : chaque liste mesure n × (élément + 34 px). */
.wsl-ticker-list {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0 34px 0 0;
  margin: 0;
  list-style: none;
}
.wsl-tk-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.wsl-tk-nets {
  display: inline-flex;
  gap: 3px;
}
.wsl-tk-net {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--wsl-net);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* TikTok (#111) se perdrait sur le héro sombre : liseré blanc 30 %. */
.wsl-tk-net[data-wsl-net="tiktok"] {
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.wsl-tk-net svg {
  width: 10px;
  height: 10px;
}
.wsl-tk-name {
  font-weight: 700;
  color: #fff;
}
.wsl-tk-value,
.wsl-tk-chg {
  font-family: "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
}
.wsl-tk-value {
  font-weight: 700;
}
.wsl-tk-chg {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.62);
}
.wsl-tk-chg[data-dir="up"] {
  color: var(--wsl-tk-up);
}
.wsl-tk-chg[data-dir="down"] {
  color: var(--wsl-tk-down);
}
/* Flèches ▲ / ▼ décoratives (texte alternatif vide : le signe du montant
   porte déjà le sens ; repli sans la syntaxe `/ ""` = première valeur). */
.wsl-tk-chg[data-dir="up"]::before,
.wsl-chg[data-dir="up"]::before {
  content: "\25B2";
  content: "\25B2" / "";
  margin-right: 3px;
  font-size: 0.78em;
}
.wsl-tk-chg[data-dir="down"]::before,
.wsl-chg[data-dir="down"]::before {
  content: "\25BC";
  content: "\25BC" / "";
  margin-right: 3px;
  font-size: 0.78em;
}
.wsl-ticker-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wsl-ticker-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}
.wsl-ticker-toggle [data-wsl-ticker-ic="play"],
.wsl-ticker-toggle[aria-pressed="true"] [data-wsl-ticker-ic="pause"] {
  display: none;
}
.wsl-ticker-toggle[aria-pressed="true"] [data-wsl-ticker-ic="play"] {
  display: block;
}
/* Sur le héro sombre, l'anneau violet global serait invisible. */
.wsl-ticker-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (hover: hover) {
  .wsl-ticker-viewport:hover .wsl-ticker-track {
    animation-play-state: paused;
  }
  .wsl-ticker-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* ── Simulateur MultiValue+ dans le héro sombre (#cote) ──────────────────── */
/* Composant de la home, variante « main » : AUCUN fork de son CSS. La coque
   claire de la section (padding 96 px, dégradé, overflow:hidden pour un halo
   absent ici) est retirée ; les cartes restent blanches ; seuls les textes
   posés directement sur le fond sombre changent d'encre. */
.wsl-cote {
  margin-top: 30px;
  scroll-margin-top: 16px;
}
.wsl-cote > .zmv {
  padding: 0;
  background: none;
  overflow: visible;
  scroll-margin-top: 16px;
}
.wsl-cote > .zmv .zmv-card--sim {
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.65);
}
.wsl-cote > .zmv .zmv-card--share,
.wsl-cote > .zmv .zmv-card--scale {
  box-shadow: 0 24px 56px -36px rgba(0, 0, 0, 0.6);
}
/* Ancre #multivalue-scale : la nav est déjà réservée par scroll-padding-top
   (le composant pose 78 px, pensés sans réserve). */
.wsl-cote > .zmv .zmv-card--scale {
  scroll-margin-top: 16px;
}
.wsl-cote > .zmv .zmv-scale-line {
  color: var(--wsl-on-dark);
}
.wsl-cote > .zmv .zmv-scale-link {
  color: var(--wsl-link-dark);
}
.wsl-cote > .zmv .zmv-scale-link:focus-visible {
  outline: 2px solid var(--wsl-link-dark);
  outline-offset: 2px;
}

/* ── Annuaire (#annuaire) ────────────────────────────────────────────────── */
.wsl-board {
  display: block;
  background: var(--wsl-bg);
  padding: 56px 36px 64px;
  scroll-margin-top: var(--wsl-anchor);
}
.wsl-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.wsl-board-copy {
  flex: 1 1 340px;
  min-width: 0;
}
.wsl-board-lead {
  flex: 0 1 380px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--zh-muted);
  line-height: 1.55;
  margin: 0;
}

/* Chiffres : 5 tuiles blanches sur une ligne, colonnes PONDÉRÉES plutôt
   que l'auto-fit du gabarit (qui laissait 4 + 1 orpheline entre 640 et
   1100 px) : les montants ont des insécables (U+00A0), ils ne passent à la
   ligne qu'en dernier recours ; la capitalisation FCFA (jusqu'à 11 chiffres)
   a la piste la plus large, « Comptes cotés » et l'heure les plus étroites. */
.wsl-stats {
  display: grid;
  grid-template-columns:
    minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.45fr) minmax(0, 0.9fr)
    minmax(0, 0.75fr);
  gap: 12px;
  margin: 0 0 18px;
}
.wsl-stat {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--wsl-line);
  border-radius: 14px;
  padding: 13px 16px;
}
.wsl-stat dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--zh-muted);
}
.wsl-stat dd {
  margin: 4px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--zh-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.wsl-stat--money dd,
.wsl-stat--up dd {
  color: var(--wsl-up-ink);
}
.wsl-board[data-state="unavailable"] .wsl-stat dd {
  color: var(--zh-muted);
}
/* Relecture demandée (filtre, recherche, tri, page ; jamais le LIVE) : les
   lignes restent en place, atténuées, jusqu'à la réponse. */
.wsl-board[aria-busy="true"] .wsl-table-wrap {
  opacity: 0.55;
  cursor: progress;
}

/* Panneau : barre d'outils, notes, tableau, états, pagination, note de bas. */
.wsl-panel {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--wsl-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -44px rgba(31, 19, 64, 0.35);
}
.wsl-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--wsl-line);
}
/* LIVE : vraie relecture (60 s) ; point qui pulse tant qu'elle est active. */
.wsl-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 11px 0 9px;
  border-radius: 100px;
  border: 1px solid var(--wsl-up-b);
  background: var(--wsl-up-l);
  color: var(--wsl-up-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wsl-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--wsl-up);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22);
  animation: wsl-pulse 1.6s ease-in-out infinite;
}
.wsl-live[aria-pressed="false"] {
  border-color: var(--wsl-line);
  background: var(--wsl-shade);
  color: var(--zh-muted);
}
.wsl-live[aria-pressed="false"] .wsl-live-dot {
  animation: none;
  background: var(--wsl-flat);
  box-shadow: none;
}
.wsl-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.wsl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 100px;
  border: 1px solid var(--wsl-line);
  background: #fff;
  color: var(--zh-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wsl-chip[aria-checked="true"],
.wsl-chip[aria-pressed="true"] {
  background: var(--zh-text);
  border-color: var(--zh-text);
  color: #fff;
}
/* Puce réseau : bouton rond aux couleurs de la marque (--wsl-net inline). */
.wsl-chip--net {
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--wsl-net);
}
.wsl-chip--net[aria-checked="true"] {
  background: var(--wsl-net);
  border-color: var(--wsl-net);
  color: #fff;
}
.wsl-chip--net svg {
  width: 13px;
  height: 13px;
}
.wsl-chip--fav::before {
  content: "\2605";
  content: "\2605" / "";
  font-size: 11px;
  color: #d97706;
}
.wsl-chip--fav[aria-pressed="true"]::before {
  color: #fbbf24;
}
.wsl-toolbar-sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--wsl-line);
  flex-shrink: 0;
}
.wsl-toolbar-grow {
  flex: 1 1 0;
  min-width: 0;
}
.wsl-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  min-width: 170px;
  margin: 0;
}
.wsl-search-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 34px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--wsl-line-d);
  background: var(--wsl-shade);
  color: var(--zh-text);
  font-size: 12.5px;
  line-height: 1.2;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.wsl-search-input::placeholder {
  color: var(--zh-muted);
  opacity: 1;
}
.wsl-search-input::-webkit-search-cancel-button,
.wsl-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Anneau visible au focus (souris ET clavier : champ de saisie). */
.wsl-search-input:focus {
  border-color: var(--zh-purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18);
}
.wsl-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--zh-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wsl-search-clear svg {
  width: 12px;
  height: 12px;
}
/* Menu de tri : petit écran seulement (≤ 900, les en-têtes y sont masqués). */
.wsl-sort {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wsl-sort-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--zh-muted);
  white-space: nowrap;
}
.wsl-sort-select {
  min-width: 0;
  max-width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--wsl-line-d);
  background: #fff;
  color: var(--zh-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) {
  .wsl-live:hover {
    border-color: var(--wsl-up);
  }
  .wsl-chip:hover {
    border-color: #c4b5fd;
  }
  .wsl-chip--net:hover {
    border-color: var(--wsl-net);
  }
  .wsl-search-clear:hover {
    background: var(--zh-bg3);
    color: var(--zh-text);
  }
  .wsl-sort-select:hover {
    border-color: var(--zh-purple);
  }
}

/* Notes (100 favoris les plus récents, copie de secours) et barre « Ta
   cote » (surlignage vert, accroche à gauche) entre la barre et le tableau. */
.wsl-note {
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--wsl-line);
  background: #f5f3ff;
  color: #4c1d95;
  font-size: 12.5px;
  line-height: 1.45;
}
.wsl-note--stale {
  background: #fffbeb;
  color: #7c2d12;
}
.wsl-me {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 11px 16px 11px 20px;
  border-bottom: 1px solid var(--wsl-up-b);
  background: var(--wsl-up-l);
  box-shadow: inset 4px 0 0 var(--wsl-up);
}
.wsl-me-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--wsl-up-ink);
}
.wsl-me-text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--zh-text);
}
.wsl-me-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  background: var(--wsl-up-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
@media (hover: hover) {
  .wsl-me-jump:hover {
    background: var(--wsl-up-ink-d);
    color: #fff;
  }
}

/* ── Tableau (≥ 1100 : 7 colonnes, `table-layout: fixed`) ────────────────── */
/* Largeurs posées sur la ligne d'en-tête : la colonne compte prend le reste
   (≈ 294 px à 1100 px). Aucun défilement horizontal. */
.wsl-table-wrap {
  min-width: 0;
  transition: opacity 0.2s;
}
.wsl-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.wsl-th {
  padding: 10px;
  border-bottom: 1px solid var(--wsl-line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--zh-muted);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.wsl-th--rank {
  width: 52px;
  padding-left: 16px;
}
.wsl-th--spark {
  width: 120px;
}
.wsl-th--value {
  width: 156px;
  text-align: right;
}
.wsl-th--chg {
  width: 104px;
  text-align: right;
}
.wsl-th--status {
  width: 132px;
}
.wsl-th--act {
  width: 168px;
  padding-right: 16px;
}
.wsl-th-sep {
  margin: 0 6px;
  color: var(--wsl-line-d);
}
/* Boutons de tri : texte de l'en-tête, flèche décorative (aria-hidden). */
.wsl-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  margin: -4px -2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--zh-muted);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  cursor: pointer;
}
.wsl-sort-btn.is-active {
  color: var(--zh-text);
}
.wsl-sort-ic {
  display: inline-block;
  width: 10px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
}
.wsl-sort-ic::before {
  content: "\2195";
  content: "\2195" / "";
  opacity: 0.45;
}
.wsl-th[aria-sort="descending"] .wsl-sort-btn.is-active .wsl-sort-ic::before {
  content: "\2193";
  content: "\2193" / "";
  opacity: 1;
}
.wsl-th[aria-sort="ascending"] .wsl-sort-btn.is-active .wsl-sort-ic::before {
  content: "\2191";
  content: "\2191" / "";
  opacity: 1;
}
@media (hover: hover) {
  .wsl-sort-btn:hover {
    color: var(--zh-text);
  }
}

.wsl-row {
  background: #fff;
  transition: background-color 0.6s;
}
/* Ligne du visiteur : voile vert + accroche à gauche (sur la 1ʳᵉ cellule :
   une ombre posée sur un <tr> n'est pas peinte partout). */
.wsl-row.is-me {
  background: rgba(22, 163, 74, 0.06);
}
.wsl-row.is-me > :first-child {
  box-shadow: inset 3px 0 0 var(--wsl-up);
}
/* LIVE : la ligne changée clignote 1,6 s (attribut posé puis retiré par le
   JS) ; en mouvement réduit, surlignage fixe (bloc final). */
.wsl-row[data-flash="up"] {
  animation: wsl-flash-up 1.6s ease-out;
}
.wsl-row[data-flash="down"] {
  animation: wsl-flash-down 1.6s ease-out;
}
.wsl-td {
  min-width: 0;
  padding: 11px 10px;
  border-bottom: 1px solid var(--wsl-line);
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}
.wsl-td--rank {
  padding-left: 16px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--zh-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wsl-acc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wsl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zh-text);
}
.wsl-verified {
  display: inline-flex;
  flex-shrink: 0;
}
.wsl-verified .zic-seal--inline {
  margin-inline-start: 0;
}
/* Badge « TOI » : fond --wsl-up-ink (blanc 5,0:1 ; #16a34a = 3,3:1). */
.wsl-me-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--wsl-up-ink);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.5;
}
.wsl-acc-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
}
.wsl-handle {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.4;
  color: var(--zh-muted);
}
.wsl-handle:empty {
  display: none;
}
.wsl-nets {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.wsl-net {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--wsl-net);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wsl-net svg {
  width: 10px;
  height: 10px;
}
/* Statut : « Prix certifié » (au moins un réseau lu) vert, « Estimation »
   neutre. Répété dans la cellule compte (≤ 1099). */
.wsl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--wsl-line);
  background: #f6f4fb;
  color: var(--zh-muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.wsl-status[data-measured="1"] {
  border-color: var(--wsl-up-b);
  background: var(--wsl-up-l);
  color: var(--wsl-up-ink);
}
.wsl-status[data-measured="1"]::before {
  content: "\2605";
  content: "\2605" / "";
  font-family: "Space Grotesk", sans-serif;
}
.wsl-status--inline {
  display: none;
  margin-top: 6px;
}
/* Courbe 7 jours : couleur selon data-dir (le trait garde 1,8 px quelle que
   soit la taille de la boîte). */
.wsl-spark-box {
  display: block;
  line-height: 0;
}
.wsl-spark {
  display: block;
  width: 96px;
  height: 30px;
  max-width: 100%;
  overflow: visible;
  color: var(--wsl-flat);
}
.wsl-spark[data-dir="up"] {
  color: var(--wsl-up);
}
.wsl-spark[data-dir="down"] {
  color: var(--wsl-down);
}
.wsl-spark-area {
  fill: currentColor;
  fill-opacity: 0.1;
  stroke: none;
}
.wsl-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.wsl-spark-dot {
  fill: currentColor;
}
.wsl-spark-empty {
  font-weight: 700;
  color: var(--zh-muted);
}
.wsl-td--value {
  text-align: right;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--zh-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wsl-td--chg {
  text-align: right;
  white-space: nowrap;
}
.wsl-chg {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--zh-muted);
}
.wsl-chg[data-dir="up"] {
  color: var(--wsl-up-ink);
}
.wsl-chg[data-dir="down"] {
  color: var(--wsl-down);
}
.wsl-chg-new {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--wsl-bg);
  color: var(--zh-purple);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.wsl-td--act {
  padding-right: 16px;
  text-align: right;
  white-space: nowrap;
}
/* « Suivre » : contour au repos, plein quand suivi (aria-pressed). */
.wsl-fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 100px;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: var(--zh-purple);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wsl-fav-ic {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.wsl-fav[aria-pressed="true"] {
  background: var(--zh-purple);
  border-color: var(--zh-purple);
  color: #fff;
}
.wsl-fav[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.wsl-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wsl-up-ink);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
@media (hover: hover) {
  .wsl-row:not(.is-me):hover {
    background: #faf8ff;
  }
  .wsl-fav:hover {
    border-color: var(--zh-purple);
    background: #f5f3ff;
  }
  .wsl-fav[aria-pressed="true"]:hover {
    border-color: #5b21b6;
    background: #5b21b6;
  }
  .wsl-view:hover {
    color: var(--wsl-up-ink-d);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* ── États de l'annuaire ─────────────────────────────────────────────────── */
.wsl-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zh-muted);
}
.wsl-state-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--zh-text);
  margin: 0;
}
.wsl-state-text {
  max-width: 460px;
  margin: 0;
}
/* Chargement : squelette de lignes (barres lavande + reflet qui glisse),
   puis spinner et libellé (role=status). */
.wsl-state[data-wsl-state-block="loading"] {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 18px 16px 28px;
}
.wsl-state[data-wsl-state-block="loading"]::before {
  content: "";
  display: block;
  flex: 0 0 100%;
  height: 176px;
  margin-bottom: 8px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 70%) 150% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(180deg, #f1edfb 0, #f1edfb 36px, transparent 36px, transparent 48px);
  animation: wsl-shimmer 1.4s linear infinite;
}
/* Indisponible : pastille « ! » ambre décorative au-dessus du message. */
.wsl-state[data-wsl-state-block="unavailable"]::before {
  content: "!";
  content: "!" / "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 18px;
}
.wsl-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #ddd6fe;
  border-top-color: var(--zh-purple);
  animation: wsl-spin 0.8s linear infinite;
}

/* ── Pagination + note de bas ────────────────────────────────────────────── */
.wsl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--wsl-line);
}
.wsl-page-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--wsl-line);
  background: #fff;
  color: var(--zh-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wsl-page-btn svg {
  width: 14px;
  height: 14px;
}
.wsl-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.wsl-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wsl-page-num {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--zh-text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wsl-page-num[aria-current="page"] {
  background: var(--zh-text);
  border-color: var(--zh-text);
  color: #fff;
}
.wsl-page-gap {
  padding: 0 4px;
  color: var(--zh-muted);
}
.wsl-page-status {
  margin: 0 6px;
  font-size: 12px;
  color: var(--zh-muted);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .wsl-page-btn:not(:disabled):hover {
    border-color: var(--zh-purple);
    background: var(--wsl-shade);
  }
  .wsl-page-num:not([aria-current="page"]):hover {
    border-color: var(--wsl-line);
    background: var(--wsl-shade);
  }
}
.wsl-foot {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--wsl-line);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--zh-muted);
}

/* ── « Et ton pote » (#ami) ──────────────────────────────────────────────── */
/* La carte est celle du composant (satellite .zmv-part) : seule son ombre
   (gabarit FriendQuote) est ajoutée, sur fond blanc. */
.wsl-ami {
  display: block;
  background: #fff;
  padding: 64px 36px;
  scroll-margin-top: var(--wsl-anchor);
}
.wsl-ami-kicker {
  display: block;
  margin-bottom: 14px;
}
.wsl-ami .zmv-friend {
  border-color: var(--wsl-line);
  border-radius: 22px;
  box-shadow: 0 24px 60px -40px rgba(31, 19, 64, 0.35);
}

/* ── Comment ça marche (#comment) ────────────────────────────────────────── */
.wsl-how {
  display: block;
  background: var(--zh-bg3);
  border-top: 1px solid var(--wsl-line);
  padding: 66px 36px;
  scroll-margin-top: var(--wsl-anchor);
}
.wsl-how .wsl-h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -1.2px;
  margin-top: 12px;
}
.wsl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.wsl-step {
  min-width: 0;
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--wsl-line);
  border-radius: 16px;
  padding: 20px;
  transition: transform 0.18s, box-shadow 0.22s, border-color 0.18s;
}
@media (hover: hover) {
  .wsl-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(31, 19, 64, 0.35);
    border-color: #c4b5fd;
  }
}
.wsl-step-n {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--wsl-up-t);
  color: var(--wsl-up-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 13.5px;
}
.wsl-step-txt {
  min-width: 0;
}
.wsl-step-h {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--zh-text);
  margin: 0;
}
.wsl-step-p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zh-muted);
  margin: 5px 0 0;
}
.wsl-how-cta {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* ── Le reste de ZIC (#modules, rail scroll-snap) ────────────────────────── */
.wsl-mods {
  display: block;
  background: #fff;
  border-top: 1px solid var(--wsl-line);
  padding: 66px 0 108px;
  scroll-margin-top: var(--wsl-anchor);
}
.wsl-mods-head {
  max-width: 1200px;
  margin: 0 auto 26px;
  padding: 0 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wsl-mods-copy {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 860px;
}
.wsl-mods .wsl-kicker {
  color: var(--zh-purple);
}
.wsl-mods-copy .wsl-h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -1px;
  margin-top: 10px;
}
.wsl-mods-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.wsl-mods-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 36px 8px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 36px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.wsl-mods-rail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.wsl-mod {
  flex: 0 0 258px;
  scroll-snap-align: start;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--wsl-line);
  border-radius: 18px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  color: var(--zh-text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wsl-mod:focus-visible {
  border-color: var(--wsl-mod);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px var(--wsl-mod);
  color: var(--zh-text);
}
@media (hover: hover) {
  .wsl-mod:hover {
    border-color: var(--wsl-mod);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px var(--wsl-mod);
    color: var(--zh-text);
  }
}
/* Icône : couleur du module + voile blanc en dégradé (::before, peint AVANT
   le svg positionné : aucun z-index). */
.wsl-mod-ic {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--wsl-mod);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -12px var(--wsl-mod);
  overflow: hidden;
}
.wsl-mod-ic::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.3));
}
.wsl-mod-ic svg {
  position: relative;
  width: 23px;
  height: 23px;
}
.wsl-mod-name {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.4px;
  margin-top: 15px;
}
.wsl-mod-desc {
  display: block;
  font-size: 13px;
  color: var(--zh-muted);
  line-height: 1.5;
  margin-top: 6px;
  flex: 1;
}
/* « Découvrir » fait partie du nom du lien : texte violet (7,1:1) ; la
   couleur du module ne garde que la flèche décorative. */
.wsl-mod-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--zh-purple);
  margin-top: 16px;
}
.wsl-mod-cta svg {
  width: 13px;
  height: 13px;
  color: var(--wsl-mod);
}

/* ── Toast (au-dessus du FAB chat desktop : footer + 11 + 58 + 13) ───────── */
/* À droite ; le toast du composant MultiValue+ vit à gauche (left 24 px,
   au plus 50vw − 82 px) : aucun recouvrement en desktop. */
.wsl-toast {
  position: fixed;
  right: 22px;
  bottom: calc(var(--wsl-ft-h) + 82px);
  z-index: 5000;
  max-width: 330px;
  background: #fff;
  border: 1px solid var(--wsl-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(31, 19, 64, 0.42);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: var(--zh-text);
  line-height: 1.45;
  animation: wsl-rise 0.26s ease both;
}
.wsl-toast-ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--wsl-up-t);
  color: var(--wsl-up-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
/* Erreur : le JS pose role=alert (annonce immédiate) avant de l'afficher. */
.wsl-toast[role="alert"] .wsl-toast-ic {
  background: #ffe4e6;
  color: var(--wsl-red-h);
}
.wsl-toast-msg {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* ≤ 1099 : le statut passe dans la cellule compte (colonne retirée), courbe
   72 px, colonnes resserrées. Spécificité (0,2,0) : la colonne reste retirée
   quand ≤ 900 repasse les cellules en `display: block`. */
@media (max-width: 1099px) {
  .wsl-table .wsl-th--status,
  .wsl-row .wsl-td--status {
    display: none;
  }
  /* Pseudo + réseaux puis statut sur la MÊME ligne quand ils tiennent. */
  .wsl-acc-sub {
    display: inline-flex;
    max-width: 100%;
    margin-right: 6px;
    vertical-align: middle;
  }
  .wsl-status--inline {
    display: inline-flex;
    margin: 2px 0;
    vertical-align: middle;
  }
  .wsl-search {
    flex: 1 1 240px;
  }
  /* Chiffres en 3 + 2 (grille de 6 : trois tuiles de 2, deux de 3). */
  .wsl-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .wsl-stat {
    grid-column: span 2;
  }
  .wsl-stat:nth-child(n+4) {
    grid-column: span 3;
  }
  .wsl-th--rank {
    width: 48px;
  }
  .wsl-th--spark {
    width: 92px;
  }
  .wsl-th--value {
    width: 144px;
  }
  .wsl-th--chg {
    width: 96px;
  }
  .wsl-th--act {
    width: 124px;
  }
  /* Ratio 96:30 du viewBox gardé (72 × 22,5) : sous preserveAspectRatio=none,
     le point final reste un cercle. */
  .wsl-spark {
    width: 72px;
    height: 22.5px;
  }
}
/* 601-1099 : « Suivre » en icône seule ; le libellé reste lu (masqué
   visuellement, et le bouton garde son aria-label). */
@media (min-width: 601px) and (max-width: 1099px) {
  .wsl-fav {
    width: 34px;
    padding: 0;
  }
  .wsl-fav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 1024px) {
  .wsl-hero,
  .wsl-board,
  .wsl-ami,
  .wsl-how {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* ≤ 900 : lignes en grille à 4 pistes (rang | compte | cote + variation +
   mini courbe | actions) ; en-têtes de tri masqués visuellement (gardés pour
   les lecteurs d'écran, révélés en barre quand un bouton reçoit le focus
   clavier) ; menu de tri affiché. Piste « actions » de 112 px au moins,
   boutons calés à droite : chaque ligne est sa propre grille, une piste
   `auto` suivrait son contenu (pas de « Suivre » sur la ligne du visiteur,
   pas de « Voir » sans profile_url) et décalerait cote et variation d'une
   ligne à l'autre. 112 px ≥ « Suivre » (44 px) + 8 + « Voir → » / « View → ». */
@media (max-width: 900px) {
  .wsl-table,
  .wsl-table tbody {
    display: block;
    width: 100%;
  }
  .wsl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .wsl-table thead:focus-within {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
  .wsl-table thead:focus-within tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--wsl-line);
  }
  .wsl-table thead:focus-within .wsl-th {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }
  .wsl-table thead:focus-within .wsl-th--rank,
  .wsl-table thead:focus-within .wsl-th--spark,
  .wsl-table thead:focus-within .wsl-th--status,
  .wsl-table thead:focus-within .wsl-th--act {
    display: none;
  }
  .wsl-row.is-me {
    box-shadow: inset 3px 0 0 var(--wsl-up);
  }
  .wsl-row.is-me > :first-child {
    box-shadow: none;
  }
  .wsl-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 150px minmax(112px, auto);
    grid-template-areas:
      "rank acc value act"
      "rank acc meta act";
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wsl-line);
  }
  .wsl-td {
    display: block;
    padding: 0;
    border: 0;
  }
  .wsl-td--rank {
    grid-area: rank;
  }
  .wsl-td--acc {
    grid-area: acc;
  }
  .wsl-td--value {
    grid-area: value;
    align-self: end;
    justify-self: end;
  }
  /* Courbe et variation partagent la case « meta » : courbe à gauche,
     variation à droite (150 px ≥ 60 + 12 + « ▲ +12,5 % »). */
  .wsl-td--spark {
    grid-area: meta;
    align-self: start;
    justify-self: start;
  }
  .wsl-td--chg {
    grid-area: meta;
    align-self: start;
    justify-self: end;
  }
  .wsl-td--act {
    grid-area: act;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .wsl-view {
    margin-left: 0;
  }
  /* Même ratio 96:30 que le viewBox (60 × 18,75) : point final rond. */
  .wsl-spark {
    width: 60px;
    height: 18.75px;
  }
  .wsl-sort {
    display: flex;
  }
  /* 3 étapes : liste d'une colonne (l'auto-fit laissait 2 + 1 orpheline). */
  .wsl-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  /* 152 px en haut comme le héro de la home (landing-home.css) : la nav + le
     FAB chat ancré en haut à droite sous elle (top 98 px + 46 px, bloc
     « FAB chat mobile » ci-dessous) — le badge démarre dessous. */
  .wsl-hero {
    padding: calc(152px + env(safe-area-inset-top, 0px)) 16px 40px;
  }
  .wsl-hero-h1 {
    letter-spacing: -1.2px;
  }
  .wsl-hero-sub {
    font-size: 15px;
  }
  .wsl-ticker {
    margin-top: 24px;
  }
  /* #cote / #multivalue sous le FAB chat (nav en scroll-padding-top +
     92 px = 152 px, comme le héro) ; un « Connecter » focalisé en remontant
     au clavier ne finit pas sous le bouton rond en haut à droite. */
  .wsl-cote {
    margin-top: 24px;
    scroll-margin-top: 92px;
  }
  .wsl-cote > .zmv {
    scroll-margin-top: 92px;
  }
  .wsl-cote > .zmv .zmv-net-btn {
    scroll-margin-top: 92px;
  }
  .wsl-board,
  .wsl-ami,
  .wsl-how {
    padding: 48px 16px;
  }
  .wsl-board-head {
    margin-bottom: 18px;
  }
  .wsl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .wsl-stat,
  .wsl-stat:nth-child(n+4) {
    grid-column: auto;
  }
  .wsl-stat:nth-child(3) {
    grid-column: 1 / -1;
  }
  .wsl-stat dd {
    font-size: 18px;
  }
  .wsl-section-head {
    margin-bottom: 24px;
  }
  .wsl-toolbar {
    padding: 12px;
  }
  /* iOS Safari zoome au focus de tout champ < 16 px : recherche et menu de
     tri à 16 px (tailles desktop 12,5 px inchangées). */
  .wsl-search-input,
  .wsl-sort-select {
    font-size: 16px;
  }
  /* Cibles tactiles ≥ 44 px. */
  .wsl-live,
  .wsl-chip,
  .wsl-search-input,
  .wsl-sort-select,
  .wsl-fav,
  .wsl-view,
  .wsl-btn,
  .wsl-me-jump,
  .wsl-sort-btn {
    min-height: 44px;
  }
  .wsl-search-input {
    height: 44px;
    padding-right: 44px;
  }
  .wsl-sort-select {
    height: 44px;
  }
  .wsl-chip--net,
  .wsl-ticker-toggle,
  .wsl-page-btn,
  .wsl-search-clear {
    width: 44px;
    height: 44px;
  }
  .wsl-search-clear {
    right: 0;
    margin-top: -22px;
  }
  .wsl-page-num {
    min-width: 44px;
    height: 44px;
  }
  .wsl-fav {
    height: 44px;
    min-width: 44px;
  }
  /* Bas d'un bouton de ligne focalisé : au-dessus de la partie du « + » qui
     dépasse du footer fixe (≈ 46 px ; le footer est déjà réservé). */
  .wsl-fav,
  .wsl-view {
    scroll-margin-bottom: 56px;
  }
  .wsl-mods {
    padding: 48px 0 72px;
  }
  .wsl-mods-head {
    padding: 0 16px;
    margin-bottom: 18px;
  }
  .wsl-mods-arrows {
    display: none;
  }
  .wsl-mods-rail {
    padding: 4px 16px 8px;
    scroll-padding-left: 16px;
    gap: 12px;
  }
  .wsl-mod {
    flex-basis: 232px;
    padding: 18px 18px 16px;
  }
  .wsl-step {
    padding: 18px 16px;
  }
  /* FAB chat mobile en haut à droite (bloc ci-dessous) : le toast descend en
     bas, pleine largeur, AU-DESSUS de la partie du « + » qui dépasse du
     footer fixe (≈ 46 px). */
  .wsl-toast {
    left: 12px;
    right: 12px;
    bottom: calc(var(--wsl-ft-h) + 52px);
    max-width: none;
  }
  /* Toast du composant MultiValue+ affiché (pleine largeur, bas 112 px +
     safe-area, jusqu'à ≈ 3 lignes) : le toast de page monte au-dessus. */
  body.zh-wallstreet-page:has(.zmv-toast:not([hidden])) .wsl-toast {
    bottom: calc(var(--wsl-ft-h) + 148px);
  }

  /* ── FAB chat mobile : MÊME position et MÊME animation que la home ──────
     Miroir déclaration pour déclaration du bloc « Home uniquement (D4) » de
     landing-chat-fab.css (@media ≤768, sélecteurs body.zh-home-page) re-scopé
     body.zh-wallstreet-page — ce fichier partagé n'est pas touché (copie du
     bloc de landing-multishop-page.css). WallstreetFabMobileMirrorTest
     interdit toute dérive entre les blocs : modifier la home = recopier ici.
     Wrap en haut à droite sous la nav (top 98 px + safe-area), pastille
     « verre » 46 px, anneau 2,2 s, badge 18 px. Bloc titre du héro
     (.wsl-hero-copy[data-wsl-hero-copy] : badge, h1, sous-titre) sorti de
     l'écran (body.zh-hero-out, posé par bindHeroOut() du JS de page — sur le
     bloc titre et non sur le héro, qui contient tout le simulateur) : seule
     la pastille disparaît, le bouton reste en haut à droite EXACTEMENT comme
     la home. Les seules autres règles body.zh-wallstreet-page des blocs
     @media sont le relèvement du toast ci-dessus. */
  body.zh-wallstreet-page .zic-chat-fab-wrap {
    top: calc(98px + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: 300px;
    height: 46px;
  }
  body.zh-wallstreet-page .zic-chat-fab-clip {
    display: block;
    right: 23px;
  }
  body.zh-wallstreet-page .zic-chat-fab-pill {
    height: 46px;
    top: 10px;
    gap: 8px;
    padding: 0 34px 0 8px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-right: none;
    box-shadow: none;
  }
  body.zh-wallstreet-page .zic-chat-fab-pill-title {
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
  }
  body.zh-wallstreet-page .zic-chat-fab-pill-sub {
    display: none;
  }
  body.zh-wallstreet-page .zic-chat-fab-av {
    width: 26px;
    height: 26px;
    border-color: rgba(20, 8, 64, 0.9);
    margin-left: -8px;
    font-size: 10px;
    font-weight: 700;
  }
  body.zh-wallstreet-page .zic-chat-fab-av:first-child {
    margin-left: 0;
  }
  body.zh-wallstreet-page .zic-chat-fab {
    width: 46px;
    height: 46px;
    border: none;
    box-shadow:
      0 10px 28px -8px rgba(123, 63, 242, 0.7),
      0 0 0 4px rgba(168, 85, 247, 0.22);
  }
  body.zh-wallstreet-page .zic-chat-fab-icon svg {
    width: 21px;
    height: 21px;
  }
  body.zh-wallstreet-page .zic-chat-fab-ring {
    animation-duration: 2.2s;
  }
  body.zh-wallstreet-page .zic-chat-fab-badge {
    min-width: 18px;
    height: 18px;
    top: -4px;
    right: -4px;
    border-color: #1a0840;
    line-height: 14px;
  }
  body.zh-wallstreet-page.zh-hero-out .zic-chat-fab-clip {
    display: none;
  }
}
/* ≤ 600 : chaque ligne devient une carte (rang + nom / pseudo / TOI ;
   réseaux + statut ; grosse cote + pastille de variation ; courbe pleine
   largeur ; [Suivre] [Voir →] pleine largeur) ; barre d'outils empilée,
   pagination pleine largeur (précédent | « Page 1 sur 12 » | suivant). */
@media (max-width: 600px) {
  .wsl-toolbar {
    gap: 10px;
  }
  .wsl-toolbar-sep,
  .wsl-toolbar-grow {
    display: none;
  }
  .wsl-search,
  .wsl-sort {
    flex: 1 1 100%;
    min-width: 0;
  }
  .wsl-sort {
    flex-wrap: wrap;
    gap: 6px;
  }
  .wsl-sort-label,
  .wsl-sort-select {
    flex: 1 1 100%;
  }
  .wsl-table tbody {
    padding: 10px;
    background: var(--wsl-shade);
  }
  .wsl-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rank acc acc"
      "value value chg"
      "spark spark spark"
      "act act act";
    gap: 10px 12px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--wsl-line);
    border-radius: 16px;
    box-shadow: 0 10px 24px -20px rgba(31, 19, 64, 0.35);
  }
  .wsl-row:last-child {
    margin-bottom: 0;
  }
  .wsl-row.is-me {
    border-color: #86efac;
    background: #f6fdf8;
    box-shadow: 0 10px 24px -20px rgba(22, 163, 74, 0.45);
  }
  .wsl-td--rank {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 9px;
    background: var(--zh-bg3);
    color: var(--zh-purple);
    font-weight: 800;
  }
  .wsl-td--acc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  .wsl-acc-top {
    flex: 1 1 100%;
  }
  .wsl-acc-sub,
  .wsl-status--inline {
    margin: 0;
  }
  .wsl-name {
    font-size: 15px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .wsl-td--value {
    align-self: center;
    justify-self: start;
    text-align: left;
    font-size: 22px;
    letter-spacing: -0.6px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .wsl-td--chg {
    grid-area: chg;
    align-self: center;
  }
  .wsl-chg,
  .wsl-chg-new {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 100px;
    font-size: 12.5px;
  }
  .wsl-chg {
    background: #f4f2fa;
  }
  .wsl-chg[data-dir="up"] {
    background: var(--wsl-up-t);
    color: var(--wsl-up-ink-d);
  }
  .wsl-chg[data-dir="down"] {
    background: var(--wsl-down-l);
    color: var(--wsl-down-ink);
  }
  .wsl-td--spark {
    grid-area: spark;
    justify-self: stretch;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--wsl-shade);
    text-align: center;
  }
  .wsl-spark {
    width: 100%;
    height: 44px;
  }
  /* Courbe étirée sur toute la largeur (preserveAspectRatio=none) : le point
     final y deviendrait une ellipse, il est retiré (le trait suffit). */
  .wsl-spark-dot {
    display: none;
  }
  .wsl-td--act {
    grid-area: act;
  }
  .wsl-fav,
  .wsl-view {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 44px;
    border-radius: 12px;
    font-size: 13px;
  }
  .wsl-view {
    border: 1px solid var(--wsl-up-b);
    background: var(--wsl-up-l);
  }
  .wsl-pager {
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 10px 12px;
  }
  .wsl-pages {
    display: none;
  }
  .wsl-page-status {
    flex: 1 1 auto;
    text-align: center;
  }
  .wsl-state {
    padding: 32px 16px;
  }
  /* CTA pleine largeur, libellé à gauche et chrono à droite ; le libellé
     peut passer sur 2 lignes. */
  .wsl-cta {
    width: 100%;
    justify-content: space-between;
    font-size: 14.5px;
    gap: 10px;
    padding: 7px 7px 7px 20px;
  }
}
@media (max-width: 430px) {
  .wsl-hero {
    padding-bottom: 32px;
  }
  .wsl-hero-h1 {
    font-size: 30px;
  }
  /* Chiffres : 2 colonnes depuis ≤ 768 ; tuiles et montants resserrés. */
  .wsl-stat {
    padding: 12px 13px;
  }
  .wsl-stat dd {
    font-size: 17px;
    letter-spacing: -0.3px;
  }
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */
/* Ticker figé (défilement manuel DANS le bandeau seulement, copie de boucle
   et bouton pause retirés), plus de clignotement (surlignage fixe tant que
   l'attribut est posé), point LIVE et squelette fixes, survols sans
   translation. Le spinner reste un indicateur d'activité : ralenti, pas figé
   (le `*` de mobile.css l'arrêterait après un tour). */
@media (prefers-reduced-motion: reduce) {
  html.zh-wallstreet-page {
    scroll-behavior: auto;
  }
  .wsl-mods-rail {
    scroll-behavior: auto;
  }
  .wsl-ticker-track {
    animation: none !important;
    padding: 0 24px;
  }
  .wsl-ticker-viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .wsl-ticker-list[data-wsl-ticker-dup],
  .wsl-ticker-toggle {
    display: none;
  }
  .wsl-row,
  .wsl-row[data-flash="up"],
  .wsl-row[data-flash="down"] {
    animation: none !important;
    transition: none !important;
  }
  .wsl-row[data-flash="up"] {
    background-color: rgba(22, 163, 74, 0.12);
  }
  .wsl-row[data-flash="down"] {
    background-color: rgba(220, 38, 38, 0.1);
  }
  .wsl-live-dot,
  .wsl-state[data-wsl-state-block="loading"]::before,
  .wsl-toast {
    animation: none !important;
  }
  .wsl-step,
  .wsl-step:hover,
  .wsl-mod,
  .wsl-mod:hover,
  .wsl-mod:focus-visible,
  .wsl-cta,
  .wsl-cta:hover {
    transform: none !important;
    transition: none !important;
  }
  .wsl-spinner {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}