/* ==========================================================================================================================
   LA DOCS bndl.me (17/10/2026). Sa demande : « s'inspirer de la docs de proxima pour la refaire entièrement same avec
   animation hard codé (connect du compte proxima sur claude pour qu'il check en temps réel la docs) avec ce qu'on a en
   feature bien sure faire une page à part .docs ou je sais pas ».
   La structure de docs.proxima.tools (relevee en direct, lecture seule), la DA de la landing et de l'outil (Geist 500,
   fond sombre, accent #7892ff), nos fonctions. AUCUN script : les pages sont des <article> montres par :target (et
   :has pour la page active du menu), la palette « Jump to » aussi. Sans :has, tout s'affiche a la suite, lisible.
   Animations : CSS keyframes + SVG, transform / opacity / stroke-dashoffset seulement ; chaque scene est dessinee dans
   son ETAT FINAL et animee depuis l'etat initial : en mouvement reduit, on voit l'image finale, jamais un cadre vide.
   Les classes s-* (peinture) et k-* (mouvement) des scenes sont globales et sans ancetre : les memes scenes sont
   rejouees par <use> dans le bandeau de titre et les cartes de l'accueil (arbre clone, hors de .scene).
   ========================================================================================================================== */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono-var.woff2') format('woff2'); }

/* Les jetons de la landing (landing/index.html, :root), memes noms, memes valeurs. */
:root {
  --fond: #0b0d14;
  --texte: #f1f1f4;
  --doux: #9a9daa;
  --pale: #787a8d;
  --sourd: #4a4d5e;
  --ligne: rgba(225, 226, 242, .07);
  --ligne-forte: rgba(225, 226, 242, .12);
  --carte: rgba(24, 24, 31, .66);
  --accent: #7892ff;
  --accent-clair: #b8c5ff;
  --accent-fond: rgba(120, 146, 255, .12);
  --accent-bord: rgba(120, 146, 255, .2);
  --on-accent: #101114;
  --bleu: #3082fe;
  --app-fond: #101114;
  --app-carte: #18181f;
  --app-haut: #22242d;
  --app-creux: #141419;
  --app-trait: #22242d;
  --app-trait-fort: #2a2c37;
  --app-texte: #fcfcfc;
  --app-normal: #b9b9c8;
  --app-doux: #787a8d;
  --up: #31e3ac;
  --up-fond: rgba(49, 227, 172, .15);
  --down: #ed3a7a;
  --down-fond: rgba(237, 58, 122, .15);
  --warn: #e0a841;
  --warn-fond: rgba(224, 168, 65, .15);
  --dev: #bda2ff;
  --dev-fond: rgba(189, 162, 255, .18);
  --mine: #7cc4ff;
  --launch: #9cf2c3;
  --vamp: #f6b05e;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-btn: 9px; --r-lg: 12px; --r-card: 16px; --r-pill: 999px;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* 19/10/2026 (noms chinois de la 0.106) : PingFang (Apple), Microsoft YaHei (Windows), Noto / Source Han (Android, Linux). */
  --cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', system-ui, sans-serif;
  --tracking: -.012em;
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --top: 64px;
  --side: 280px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--fond); }
body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte);
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 26px; letter-spacing: var(--tracking);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { color: #e5eaff; background: rgba(120, 146, 255, .38); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.d-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 90; padding: 8px 14px; border-radius: var(--r-md); background: #fff; color: #000; font-size: 13px; }
.saut:focus { top: 12px; }
.d-i { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------------------------------------------ barre haute (64px) */
.d-top {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: var(--top);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: rgba(11, 13, 20, .85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
}
.d-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1; letter-spacing: -.02em; }
.d-brand img { width: auto; height: 22px; }
.mot span { color: var(--bleu); }
.d-sep { width: 1px; height: 16px; background: var(--ligne-forte); }
.d-label { font-size: 14px; color: var(--doux); }
.d-top-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.d-top-links .lnk { padding: 6px 10px; border-radius: var(--r-md); font-size: 13px; line-height: 20px; color: var(--doux); transition: color .14s ease; }
.d-top-links .lnk:hover { color: var(--texte); }
.d-open {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; margin-left: 8px;
  border-radius: 8px; background: #e5e5e6; color: #101114; font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap;
  transition: background-color .14s ease, scale .2s var(--ease-spring);
}
.d-open:hover { background: #fff; }
.d-open:active { scale: .96; }
.d-open.lg { height: 34px; margin-left: 0; padding: 0 14px; }
.d-burger, .d-burger-x { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; margin-right: -10px; border-radius: 10px; }
.d-burger span, .d-burger-x span { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: var(--texte); transition: transform .18s var(--ease-soft); }
.d-burger-x span:first-child { transform: translateY(3.75px) rotate(45deg); }
.d-burger-x span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ------------------------------------------------------------------------------------------------ coquille + barre laterale */
.d-shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); padding-top: var(--top); }
.d-side { position: sticky; top: var(--top); height: calc(100vh - var(--top)); display: flex; flex-direction: column; min-width: 0; }
.d-side-in { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 16px 12px 24px 16px; }
.d-side-in::-webkit-scrollbar { display: none; }
.d-jump {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin-bottom: 14px; border-radius: 8px;
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .086); color: var(--pale); font-size: 13px;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.d-jump:hover { color: var(--texte); border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .035); }
.d-jump .d-i { width: 14px; height: 14px; }
.d-grp + .d-grp { margin-top: 12px; }
.d-grp > summary {
  display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border-radius: 6px;
  list-style: none; cursor: pointer; user-select: none; font-size: 13px; color: var(--pale); transition: color .14s ease;
}
.d-grp > summary::-webkit-details-marker { display: none; }
.d-grp > summary:hover { color: var(--doux); }
.d-chev { width: 12px; height: 12px; transform: rotate(-90deg); transition: transform .16s var(--ease-soft); }
.d-grp[open] > summary .d-chev { transform: none; }
.d-grp ul { display: grid; gap: 1px; margin-top: 2px; }
.d-lnk {
  --on: 0; position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px 0 10px;
  border-radius: 6px; font-size: 13px; line-height: 18px; color: var(--doux); transition: background-color .14s ease, color .14s ease;
}
.d-lnk > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-lnk .d-i { opacity: calc(.55 + .45 * var(--on)); transition: opacity .14s ease; }
.d-lnk:hover { color: var(--texte); background: rgba(255, 255, 255, .04); }
.d-lnk:hover .d-i { opacity: 1; }
/* La barre d'accent 2x16 de la page active (elle s'allonge en .14s). */
.d-lnk::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 2px; height: 16px; border-radius: 2px; background: var(--accent);
  opacity: var(--on); transform: scaleY(calc(.4 + .6 * var(--on))); transition: opacity .14s var(--ease-soft), transform .14s var(--ease-soft);
}
.d-lnk .d-badge { margin-left: auto; }
.d-side-foot { flex: none; display: flex; gap: 4px; padding: 10px 12px 14px 16px; border-top: 1px solid var(--ligne); background: var(--fond); }
.d-side-foot a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--pale); transition: background-color .14s ease, color .14s ease; }
.d-side-foot a:hover { color: var(--texte); background: rgba(255, 255, 255, .04); }

/* ------------------------------------------------------------------------------------------------ badges et puces d'interface */
.d-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 16px; padding: 0 6px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
}
.d-badge img { width: 12px; height: 12px; border-radius: 3px; }
.d-badge.beta { color: var(--warn); background: var(--warn-fond); text-transform: uppercase; letter-spacing: .04em; }
.d-badge.web { color: var(--accent-clair); background: var(--accent-fond); }
.d-badge.pad { padding-left: 3px; color: var(--doux); background: rgba(255, 255, 255, .06); }
.d-badge.soon { color: var(--warn); background: var(--warn-fond); }
.d-body h2 .d-badge { height: 20px; padding: 0 8px; font-size: 11px; letter-spacing: 0; }
.d-body h2 .d-badge.pad { padding-left: 4px; }
/* Les boutons de l'outil en miniature, avec NOS libelles (le « live control » de leur docs). */
.ui {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 3px 7px; vertical-align: 1px;
  border-radius: 4px; background: #151518; border: 1px solid #303036; color: var(--texte);
  font-size: 12px; line-height: 16px; letter-spacing: 0; white-space: nowrap;
}
.ui svg { width: 12px; height: 12px; flex: none; }
.ui img { width: 12px; height: 12px; flex: none; border-radius: 3px; }
.ui.p { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ui.r { color: var(--down); background: rgba(237, 58, 122, .1); border-color: rgba(237, 58, 122, .3); }
.ui.rs { color: #fff; background: var(--down); border-color: var(--down); }
.ui.w { color: var(--warn); background: var(--warn-fond); border-color: rgba(224, 168, 65, .3); }
.ui.l svg { color: var(--launch); }
.ui.v svg { color: var(--vamp); }

/* ------------------------------------------------------------------------------------------------ contenu */
.d-main { min-width: 0; padding: 40px 32px 96px; }
.d-home, .doc, .d-body h2, .d-hero { scroll-margin-top: 80px; }
.d-art { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; }
.d-hero { grid-column: 1 / -1; }
.d-body { min-width: 0; padding-top: 40px; }
.d-toc { display: none; }

/* Le bandeau de titre : trame de points, onde qui s'elargit (9s), et la scene de la page en echo a droite. */
.d-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 240px; padding: 32px; border: 1px solid var(--ligne); border-radius: 16px;
  background: radial-gradient(120% 100% at 100% 0%, rgba(120, 146, 255, .07), transparent 60%), var(--fond);
}
.d-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.d-moire {
  position: absolute; inset: 0; opacity: .6;
  background: radial-gradient(70% 90% at 74% 30%, rgba(184, 197, 255, .55), rgba(120, 146, 255, .12) 55%, transparent 80%);
  -webkit-mask: radial-gradient(circle, #000 0 .6px, transparent .8px) 0 0 / 10px 10px;
          mask: radial-gradient(circle, #000 0 .6px, transparent .8px) 0 0 / 10px 10px;
}
.d-ring {
  position: absolute; left: 74%; top: 30%; width: 230%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 42%, rgba(240, 243, 255, .95) 50%, rgba(184, 197, 255, .25) 56%, transparent 62%);
  opacity: 0; transform: translate(-50%, -50%) scale(1.04);
  animation: d-ring 9s cubic-bezier(.25, .1, .25, 1) infinite;
}
.d-hero-art {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 520 / 300; max-width: none; opacity: .55;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%); mask-image: linear-gradient(to right, transparent 0, #000 45%);
}
.d-eyebrow { position: relative; font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.d-hero h1 { position: relative; margin-top: 10px; max-width: 18ch; font-size: 40px; line-height: 1.1; letter-spacing: -.04em; color: var(--texte); text-wrap: balance; }
.d-dek { position: relative; margin-top: 12px; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--doux); text-wrap: pretty; }

.d-body p { color: var(--doux); }
.d-body > p + p, .d-body > p + .d-table-wrap { margin-top: 12px; }
.d-body > :is(ul, ol, .d-table-wrap, .d-pads, .d-compare, .d-feats, .d-logos, .d-pills) + p { margin-top: 14px; }
.d-body b { color: var(--texte); }
.d-body p a, .d-body li a, .d-hint a, .d-table a {
  color: var(--accent-clair); text-decoration: underline; text-decoration-color: rgba(184, 197, 255, .35);
  text-underline-offset: 3px; transition: text-decoration-color .14s ease;
}
.d-body p a:hover, .d-body li a:hover, .d-hint a:hover, .d-table a:hover { text-decoration-color: var(--accent-clair); }
.d-body h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 40px 0 12px; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; color: var(--texte); }
.d-body .d-sub { margin: -4px 0 8px; font-size: 14px; color: var(--pale); }
.d-note { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--pale); text-align: center; }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Etapes numerotees reliees par un filet. */
.d-steps { margin-top: 20px; counter-reset: d-step; }
.d-steps > li { position: relative; padding: 0 0 28px 36px; counter-increment: d-step; }
.d-steps > li::before {
  content: counter(d-step); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--ligne-forte); background: var(--fond);
  font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--doux);
}
.d-steps > li::after { content: ''; position: absolute; left: 11px; top: 30px; bottom: 6px; width: 1px; background: var(--ligne-forte); }
.d-steps > li:last-child { padding-bottom: 0; }
.d-steps > li:last-child::after { display: none; }
.d-steps .d-step-t { font-size: 14px; line-height: 26px; color: var(--texte); }
.d-steps p + p { margin-top: 2px; }

/* Sequences 01..03 des modes de launch. */
.d-seq { margin-top: 12px; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.d-seq li { display: flex; align-items: center; gap: 12px; padding: 9px 14px; font-size: 14px; line-height: 22px; color: var(--doux); }
.d-seq li + li { border-top: 1px solid var(--ligne); }
.d-seq span { font-family: var(--mono); font-size: 10.5px; line-height: 1; letter-spacing: .06em; color: var(--pale); }

/* Listes a puce d'accent. */
.d-list { display: grid; gap: 8px; margin-top: 12px; }
.d-list li { position: relative; padding-left: 18px; color: var(--doux); }
.d-list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* Encadres : pas de bordure gauche, un grand pictogramme qui deborde a gauche. */
.d-hint {
  --c: var(--accent); position: relative; overflow: hidden; margin: 24px 0; padding: 18px 20px 18px 92px; border-radius: 8px;
  background: var(--fond); background: color-mix(in srgb, var(--c) 4%, var(--fond));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.d-hint.ok { --c: var(--up); }
.d-hint.warn { --c: var(--warn); }
.d-hint-ico { position: absolute; left: -26px; top: 50%; width: 112px; height: 112px; transform: translateY(-50%); color: var(--c); opacity: .3; }
.d-hint p { font-size: 14px; line-height: 22px; color: var(--doux); }
.d-hint .d-badge { margin-right: 4px; }

/* Cartes comparatives (Direct / Via Relay / CEX Funding ; BNDL-sniper / Pre snipe). */
.d-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.d-compare.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-cmp {
  --c: var(--accent); position: relative; overflow: hidden; padding: 60px 16px 16px; border-radius: 12px;
  border: 1px solid var(--ligne-forte); border-color: color-mix(in srgb, var(--c) 28%, transparent);
  background: var(--carte); background: color-mix(in srgb, var(--c) 6%, var(--fond));
}
.d-cmp.up { --c: var(--up); }
.d-cmp.ac { --c: var(--accent); }
.d-cmp.dv { --c: var(--dev); }
.d-cmp.wn { --c: var(--warn); }
.d-cmp-big { position: absolute; left: -14px; top: -14px; width: 84px; height: 84px; color: var(--c); opacity: .12; transform: rotate(-14deg); }
.d-cmp-logos { position: absolute; right: 12px; top: 12px; display: flex; gap: 4px; }
.d-cmp-logos img { width: 20px; height: 20px; border-radius: 5px; }
.d-cmp b { display: block; font-size: 15px; line-height: 22px; color: var(--texte); }
.d-cmp small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--pale); }
.d-cmp ul { display: grid; gap: 6px; margin-top: 12px; }
.d-cmp li { position: relative; padding-left: 14px; font-size: 13px; line-height: 19px; color: var(--doux); }
.d-cmp li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }

/* Le choix des exchanges, en apercu cochable (cases a cocher reelles, aucun envoi). */
.d-cex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.d-cex-c {
  position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--ligne-forte); background: var(--app-carte); font-size: 13px; color: var(--texte); cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.d-cex-c:hover { border-color: rgba(225, 226, 242, .2); }
.d-cex-c input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.d-cex-c img { width: 18px; height: 18px; border-radius: 4px; }
.d-cex-c i { margin-left: auto; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--app-trait-fort); transition: background-color .14s ease, border-color .14s ease; }
.d-cex-c i::after { content: ''; width: 4px; height: 8px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; transition: opacity .14s ease; }
.d-cex-c input:checked ~ i { background: var(--accent); border-color: var(--accent); }
.d-cex-c input:checked ~ i::after { opacity: 1; }
.d-cex-c input:focus-visible ~ i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tableaux : filets horizontaux seulement. */
.d-table-wrap { margin-top: 14px; overflow-x: auto; }
.d-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.d-table th { padding: 8px 14px 8px 0; text-align: left; font-size: 12px; font-weight: 500; color: var(--pale); border-bottom: 1px solid var(--ligne-forte); white-space: nowrap; }
.d-table td { padding: 11px 14px 11px 0; vertical-align: top; color: var(--doux); border-bottom: 1px solid var(--ligne); }
.d-table td:first-child { color: var(--texte); }
.d-table tbody tr:last-child td { border-bottom-color: var(--ligne-forte); }
.d-pad-n { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.d-pad-n img { width: 16px; height: 16px; border-radius: 4px; }

/* Launchpads (le logo officiel en grand, a 7,5 % d'opacite, en fond de carte). */
.d-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.d-pad { position: relative; overflow: hidden; padding: 16px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); }
.d-pad-bg { position: absolute; right: -28px; bottom: -28px; width: 120px; height: 120px; opacity: .075; pointer-events: none; }
.d-pad .d-pad-t { display: flex; align-items: center; gap: 10px; }
.d-pad-t img { width: 24px; height: 24px; border-radius: 6px; }
.d-pad-t b { font-size: 15px; color: var(--texte); }
.d-pad p:not(.d-pad-t) { position: relative; margin-top: 8px; font-size: 13.5px; line-height: 22px; }

/* Pastilles de chaines (44px) et logos de chaines du bridge. */
.d-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.d-pills-in { margin: 4px 0; }
.d-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 10px; border-radius: 10px;
  border: 1px solid var(--ligne-forte); background: var(--carte); font-size: 14px; color: var(--texte);
  transition: border-color .16s ease, background-color .16s ease;
}
.d-pill:hover { border-color: rgba(225, 226, 242, .2); background: var(--app-haut); }
.d-pill img { width: 22px; height: 22px; }
.d-pill small { font-size: 12px; color: var(--pale); }
.d-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.d-logos span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--r-pill); background: var(--app-haut); font-size: 13px; color: var(--app-texte); }
.d-logos img { width: 18px; height: 18px; }
.d-logos .clair img { padding: 2px; border-radius: 50%; background: #eef0f6; }

/* Securite : les quatre cartes de la landing. */
.d-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.d-feat { padding: 16px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); }
.d-feat-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--accent-clair); background: var(--accent-fond); box-shadow: inset 0 0 0 1px var(--accent-bord); }
.d-feat-i svg { width: 16px; height: 16px; }
.d-feat b { display: block; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--texte); }
.d-feat p { margin-top: 4px; font-size: 13.5px; line-height: 21px; color: var(--doux); }
.d-body .d-lockup { margin-top: 24px; }
.d-lockup img { width: auto; height: 16px; }

/* Figure animee : cadre de l'app, coins HUD en L de 8px. */
.d-fig { margin: 24px 0 8px; }
.d-body > .d-fig + p { margin-top: 20px; }
.scene { --hud-c: rgba(184, 197, 255, .36); --hud-corner: 8px; --hud-b: 1px; position: relative; border-radius: 12px; border: 1px solid var(--ligne); background: var(--app-fond); }
.scene::before, .scene::after { content: ''; position: absolute; inset: -6px; pointer-events: none; border: var(--hud-b) solid var(--hud-c); }
.scene::before {
  clip-path: polygon(0 0, var(--hud-corner) 0, var(--hud-corner) var(--hud-b), var(--hud-b) var(--hud-b), var(--hud-b) var(--hud-corner), 0 var(--hud-corner), 0 0,
    100% 0, 100% var(--hud-corner), calc(100% - var(--hud-b)) var(--hud-corner), calc(100% - var(--hud-b)) var(--hud-b), calc(100% - var(--hud-corner)) var(--hud-b), calc(100% - var(--hud-corner)) 0);
}
.scene::after {
  clip-path: polygon(0 100%, var(--hud-corner) 100%, var(--hud-corner) calc(100% - var(--hud-b)), var(--hud-b) calc(100% - var(--hud-b)), var(--hud-b) calc(100% - var(--hud-corner)), 0 calc(100% - var(--hud-corner)), 0 100%,
    100% 100%, 100% calc(100% - var(--hud-corner)), calc(100% - var(--hud-b)) calc(100% - var(--hud-corner)), calc(100% - var(--hud-b)) calc(100% - var(--hud-b)), calc(100% - var(--hud-corner)) calc(100% - var(--hud-b)), calc(100% - var(--hud-corner)) 100%);
}
.scene > svg { width: 100%; height: auto; border-radius: 12px; }
.d-fig figcaption { margin-top: 12px; text-align: center; font-size: 13px; line-height: 20px; color: var(--pale); }

/* Precedent / Suivant. */
.d-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--ligne); }
.d-pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; transition: background-color .16s ease, border-color .16s ease; }
.d-pager a:hover { background: rgba(255, 255, 255, .025); border-color: var(--ligne); }
.d-pager .next { grid-column: 2; align-items: flex-end; text-align: right; }
.d-pager small { font-size: 11px; line-height: 16px; color: var(--pale); }
.d-pager b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--texte); }
.d-pager svg { width: 14px; height: 14px; color: var(--pale); transition: transform .16s var(--ease-soft); }
.d-pager .prev:hover svg { transform: translateX(-2px); }
.d-pager .next:hover svg { transform: translateX(2px); }

/* Sommaire « On this page ». */
.d-toc-t { margin-bottom: 8px; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.d-toc a { display: block; padding: 4px 0; font-size: 13px; line-height: 18px; color: var(--pale); transition: color .14s ease; }
.d-toc a + a { padding-left: 12px; }
.d-toc a:hover { color: var(--texte); }
.doc:target .d-toc a:first-of-type { color: var(--accent-clair); }
/* Revue du lead (17/10/2026) : apres un clic sur une sous-section, plus rien n'etait en accent dans « On this page ».
   Sans script, une regle par sous-section (ids des sommaires) : la section ciblee prend l'accent, « Overview » le rend. */
.doc:has(#access-steps:target) .d-toc a[href="#access-steps"], .doc:has(#access-next:target) .d-toc a[href="#access-next"],
.doc:has(#chains-rh:target) .d-toc a[href="#chains-rh"], .doc:has(#chains-bnb:target) .d-toc a[href="#chains-bnb"],
.doc:has(#chains-sol:target) .d-toc a[href="#chains-sol"], .doc:has(#wallets-create:target) .d-toc a[href="#wallets-create"],
.doc:has(#wallets-columns:target) .d-toc a[href="#wallets-columns"], .doc:has(#wallets-actions:target) .d-toc a[href="#wallets-actions"],
.doc:has(#fund-type:target) .d-toc a[href="#fund-type"], .doc:has(#fund-cex:target) .d-toc a[href="#fund-cex"],
.doc:has(#fund-amounts:target) .d-toc a[href="#fund-amounts"], .doc:has(#fund-follow:target) .d-toc a[href="#fund-follow"],
.doc:has(#bridge-chains:target) .d-toc a[href="#bridge-chains"], .doc:has(#bridge-steps:target) .d-toc a[href="#bridge-steps"],
.doc:has(#bridge-other:target) .d-toc a[href="#bridge-other"], .doc:has(#warmup-what:target) .d-toc a[href="#warmup-what"],
.doc:has(#warmup-chains:target) .d-toc a[href="#warmup-chains"], .doc:has(#launch-steps:target) .d-toc a[href="#launch-steps"],
.doc:has(#launch-pads:target) .d-toc a[href="#launch-pads"], .doc:has(#mode-bndl:target) .d-toc a[href="#mode-bndl"],
.doc:has(#mode-block0:target) .d-toc a[href="#mode-block0"], .doc:has(#mode-anti:target) .d-toc a[href="#mode-anti"],
.doc:has(#snipe-modes:target) .d-toc a[href="#snipe-modes"], .doc:has(#snipe-plan:target) .d-toc a[href="#snipe-plan"],
.doc:has(#snipe-pre:target) .d-toc a[href="#snipe-pre"], .doc:has(#bundle-parts:target) .d-toc a[href="#bundle-parts"],
.doc:has(#bundle-run:target) .d-toc a[href="#bundle-run"], .doc:has(#vamp-steps:target) .d-toc a[href="#vamp-steps"],
.doc:has(#positions-watch:target) .d-toc a[href="#positions-watch"], .doc:has(#positions-sell:target) .d-toc a[href="#positions-sell"],
.doc:has(#positions-rows:target) .d-toc a[href="#positions-rows"], .doc:has(#positions-values:target) .d-toc a[href="#positions-values"],
.doc:has(#import-or-vamp:target) .d-toc a[href="#import-or-vamp"], .doc:has(#dashboard-read:target) .d-toc a[href="#dashboard-read"],
.doc:has(#dashboard-coins:target) .d-toc a[href="#dashboard-coins"], .doc:has(#pnl-make:target) .d-toc a[href="#pnl-make"],
.doc:has(#referral-how:target) .d-toc a[href="#referral-how"], .doc:has(#security-model:target) .d-toc a[href="#security-model"],
.doc:has(#security-rules:target) .d-toc a[href="#security-rules"], .doc:has(#web-limits-list:target) .d-toc a[href="#web-limits-list"],
.doc:has(#web-limits-perms:target) .d-toc a[href="#web-limits-perms"],
/* 19/10/2026 (lot 14) : les sous-sections d'Instant Trade, Rank, Rewards et de l'History du Bridge. */
.doc:has(#instant-panel:target) .d-toc a[href="#instant-panel"], .doc:has(#instant-wallets:target) .d-toc a[href="#instant-wallets"],
.doc:has(#instant-keys:target) .d-toc a[href="#instant-keys"], .doc:has(#rank-tiers:target) .d-toc a[href="#rank-tiers"],
.doc:has(#rank-perks:target) .d-toc a[href="#rank-perks"], .doc:has(#rank-where:target) .d-toc a[href="#rank-where"],
.doc:has(#rewards-creator:target) .d-toc a[href="#rewards-creator"], .doc:has(#rewards-cashback:target) .d-toc a[href="#rewards-cashback"],
.doc:has(#bridge-history:target) .d-toc a[href="#bridge-history"],
/* 19/10/2026 (lot 14, 2e part) : les sous-sections ajoutees aux pages existantes. */
.doc:has(#wallets-send:target) .d-toc a[href="#wallets-send"], .doc:has(#warmup-cost:target) .d-toc a[href="#warmup-cost"],
.doc:has(#launch-rewards:target) .d-toc a[href="#launch-rewards"], .doc:has(#positions-auto:target) .d-toc a[href="#positions-auto"],
.doc:has(#dashboard-locks:target) .d-toc a[href="#dashboard-locks"], .doc:has(#security-site:target) .d-toc a[href="#security-site"] { color: var(--accent-clair); }

/* ------------------------------------------------------------------------------------------------ accueil */
.d-home { max-width: 900px; margin: 0 auto; }
.d-home-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; color: var(--texte); }
.d-home-eyebrow img { width: auto; height: 22px; }
.d-home h1 { margin-top: 18px; font-size: 42px; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.d-lead { margin-top: 14px; max-width: 540px; font-size: 15px; line-height: 1.75; color: var(--doux); }
.d-home-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }
.d-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--doux); transition: color .14s ease; }
.d-arrow svg { width: 14px; height: 14px; transition: transform .18s var(--ease-soft); }
.d-arrow:hover { color: var(--texte); }
.d-arrow:hover svg { transform: translateX(2px); }
.d-h2 { margin: 48px 0 14px; font-size: 15px; line-height: 22px; letter-spacing: -.01em; color: var(--texte); }
.d-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Correction du lead (17/10/2026) : le texte des scenes passait sous l'icone et le titre des cartes (« la zone icone +
   titre + ligne ne doit plus laisser lire aucun texte de scene »). Les deux leviers ensemble : (2) la carte est une
   grille, la scene n'occupe que la rangee du haut (calee en haut, xMidYMin slice) et s'efface par un masque avant
   l'icone, donc rien de la scene n'est dessine sous le texte, quel que soit le nombre de lignes ; (1) le voile est
   opaque (>= .95) des 44 % de son calque. Le voile remonte toujours de 44 px au survol. */
.d-card { position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 220px; overflow: hidden; border-radius: 12px; border: 1px solid var(--ligne); background: var(--app-fond); transition: border-color .16s ease; }
.d-card:hover { border-color: var(--ligne-forte); }
.d-card-art {
  position: relative; z-index: -2; display: block; width: 100%; height: 100%; min-height: 0; max-width: none; opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.d-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -44px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 13, 20, 0) 14%, rgba(11, 13, 20, .3) 34%, rgba(11, 13, 20, .95) 47%, rgba(11, 13, 20, .98) 100%); transition: transform .28s var(--ease-soft);
}
.d-card:hover::after { transform: translateY(-44px); }
.d-card-txt { position: relative; padding: 6px 16px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ico ico" "t go" "s go"; column-gap: 12px; }
.d-card-ico { grid-area: ico; width: 20px; height: 20px; margin-bottom: 8px; color: var(--texte); }
.d-card-txt b { grid-area: t; font-size: 17px; line-height: 22px; letter-spacing: -.01em; }
.d-card-txt small { grid-area: s; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--doux); }
.d-card-go { grid-area: go; align-self: center; width: 16px; height: 16px; color: var(--doux); transition: transform .18s var(--ease-soft), color .18s ease; }
.d-card:hover .d-card-go { transform: translateX(2px); color: var(--texte); }
.d-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--ligne); }
.d-quick a { display: flex; align-items: center; gap: 10px; height: 44px; border-bottom: 1px solid var(--ligne); font-size: 13px; color: var(--doux); transition: color .14s ease; }
.d-quick .d-i { width: 14px; height: 14px; color: var(--pale); }
.d-quick .d-go { margin-left: auto; width: 14px; height: 14px; color: var(--pale); transition: transform .18s var(--ease-soft); }
.d-quick a:hover { color: var(--texte); }
.d-quick a:hover .d-go { transform: translateX(3px); }

/* Pied de page (toujours visible, sous la page ouverte). */
.d-foot { max-width: 988px; margin: 72px auto 0; padding-top: 24px; border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 12px; line-height: 18px; color: var(--pale); }
.d-foot-l { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.d-foot-l a { transition: color .14s ease; }
.d-foot-l a:hover { color: var(--texte); }
.d-foot img { width: auto; height: 16px; }

/* ------------------------------------------------------------------------------------------------ palette « Jump to » (:target) */
.d-search { position: fixed; inset: 0; z-index: 60; display: none; justify-content: center; align-items: flex-start; padding: 96px 16px 16px; }
.d-search:target { display: flex; }
.d-search-veil { position: absolute; inset: 0; background: rgba(11, 13, 20, .6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: d-fade .14s ease-out; }
.d-search-box {
  position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100vh - 128px); overflow: hidden;
  border-radius: 14px; background: var(--app-carte); border: 1px solid var(--ligne-forte); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: d-pop .17s var(--ease-soft);
}
.d-search-head { display: flex; align-items: center; gap: 10px; flex: none; height: 52px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--ligne); color: var(--pale); }
.d-search-head .d-i { width: 14px; height: 14px; }
.d-search-head b { font-size: 14px; color: var(--texte); }
.d-search-x { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--pale); transition: background-color .14s ease, color .14s ease; }
.d-search-x:hover { color: var(--texte); background: rgba(255, 255, 255, .05); }
.d-search-x svg { width: 14px; height: 14px; }
.d-search-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; }
.d-search-g { padding: 12px 10px 4px; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.d-search-list > a, .d-search-i > a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; transition: background-color .12s ease; }
.d-search-list > a:hover, .d-search-i > a:hover, .d-search-list > a:focus-visible, .d-search-i > a:focus-visible { background: rgba(255, 255, 255, .045); }
.d-search-s { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.d-search-s a { padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, .03); font-size: 12px; line-height: 20px; color: var(--pale); transition: background-color .12s ease, color .12s ease; }
.d-search-s a:hover, .d-search-s a:focus-visible { color: var(--texte); background: rgba(255, 255, 255, .07); }
.d-search-list b { font-size: 14px; line-height: 20px; color: var(--texte); }
.d-search-list small { font-size: 12px; line-height: 17px; color: var(--pale); }

/* ------------------------------------------------------------------------------------------------ navigation sans script
   Une page = un <article class="doc" id>. Visible quand elle est la cible, ou qu'un de ses titres l'est ; l'accueil
   tant qu'aucune page n'est ciblee. Page active du menu : --on: 1 (une regle par page). */
@supports selector(:has(a)) {
  .doc { display: none; }
  .doc:is(:target, :has(:target)) { display: block; animation: d-enter .2s var(--ease-soft); }
  .d-main:has(.doc:target, .doc :target) .d-home { display: none; }
  /* Sur une page ouverte, « Skip to content » (#doc-main) ramenerait a l'accueil : il ne s'offre que sur l'accueil. */
  body:has(.doc:target, .doc :target) .saut { display: none; }
  body:not(:has(.doc:target, .doc :target, #menu:target, #search:target)) .d-side a[href="#overview"],
  body:has(#access:target, #access :target) .d-side a[href="#access"],
  body:has(#chains:target, #chains :target) .d-side a[href="#chains"],
  body:has(#wallets:target, #wallets :target) .d-side a[href="#wallets"],
  body:has(#fund:target, #fund :target) .d-side a[href="#fund"],
  body:has(#bridge:target, #bridge :target) .d-side a[href="#bridge"],
  body:has(#warmup:target, #warmup :target) .d-side a[href="#warmup"],
  body:has(#launch:target, #launch :target) .d-side a[href="#launch"],
  body:has(#launch-modes:target, #launch-modes :target) .d-side a[href="#launch-modes"],
  body:has(#snipe:target, #snipe :target) .d-side a[href="#snipe"],
  body:has(#bundle:target, #bundle :target) .d-side a[href="#bundle"],
  body:has(#vamp:target, #vamp :target) .d-side a[href="#vamp"],
  body:has(#positions:target, #positions :target) .d-side a[href="#positions"],
  body:has(#instant-trade:target, #instant-trade :target) .d-side a[href="#instant-trade"],
  body:has(#import:target, #import :target) .d-side a[href="#import"],
  body:has(#dashboard:target, #dashboard :target) .d-side a[href="#dashboard"],
  body:has(#pnl-cards:target, #pnl-cards :target) .d-side a[href="#pnl-cards"],
  body:has(#rank:target, #rank :target) .d-side a[href="#rank"],
  body:has(#rewards:target, #rewards :target) .d-side a[href="#rewards"],
  body:has(#referral:target, #referral :target) .d-side a[href="#referral"],
  body:has(#security:target, #security :target) .d-side a[href="#security"],
  body:has(#web-limits:target, #web-limits :target) .d-side a[href="#web-limits"] {
    --on: 1; color: var(--texte); background: rgba(255, 255, 255, .045);
  }
}

/* ==========================================================================================================================
   LES SCENES (SVG en viewBox 520x300). Peinture s-*, mouvement k-* (boucles de 8s, 9s pour le feed, 3s pour la vapeur).
   ========================================================================================================================== */
text { fill: var(--app-normal); font-size: 12px; }
.s-t { fill: var(--app-normal); }
.s-tb { fill: var(--app-texte); }
.s-ts { fill: var(--app-doux); font-size: 10.5px; }
.s-tsb { fill: var(--app-texte); font-size: 10.5px; }
.s-tm { fill: var(--app-doux); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; }
.s-tmono { fill: var(--app-normal); font-family: var(--mono); font-size: 10.5px; }
.s-tl { fill: var(--app-texte); font-size: 15px; letter-spacing: -.01em; }
.s-tx { fill: var(--app-texte); font-size: 22px; letter-spacing: -.01em; }
.s-tbadge { fill: var(--app-doux); font-size: 8.5px; font-weight: 600; letter-spacing: .04em; }
.s-tq { fill: var(--down); font-size: 11.5px; font-weight: 600; }
.s-tk { fill: #101114; font-size: 10.5px; }
.s-tp { fill: var(--on-accent); }
.s-tw { fill: #fff; }
.s-6 { font-weight: 600; }
.s-c { text-anchor: middle; }
.s-e { text-anchor: end; }
.s-up { fill: var(--up); }
.s-dn { fill: var(--down); }
.s-acc { fill: var(--accent-clair); }
.s-dv { fill: var(--dev); }
.s-wn { fill: var(--warn); }
.s-me { fill: var(--bleu); }
.s-p { fill: var(--app-carte); stroke: var(--app-trait-fort); stroke-width: 1; }
.s-p2 { fill: var(--app-creux); stroke: var(--app-trait-fort); stroke-width: 1; }
.s-r { fill: var(--app-carte); }
.s-r2 { fill: rgba(34, 36, 45, .6); }
.s-h { fill: var(--app-haut); }
.s-l { fill: none; stroke: var(--app-trait-fort); stroke-width: 1; }
.s-ld { fill: none; stroke: var(--app-trait-fort); stroke-width: 1; stroke-dasharray: 3 4; }
.s-lb { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-lu { fill: none; stroke: var(--up); stroke-width: 1.2; stroke-opacity: .7; }
.s-lv { fill: none; stroke: var(--dev); stroke-width: 1.2; stroke-opacity: .8; }
.s-ldn { fill: none; stroke: var(--down); stroke-width: 1.5; stroke-linecap: round; }
.s-bp { fill: var(--accent); }
.s-bw { fill: #e5e5e6; }
.s-pu { fill: var(--up-fond); }
.s-pd { fill: var(--down-fond); }
.s-pa { fill: var(--accent-fond); }
.s-pw { fill: var(--warn-fond); }
.s-pv { fill: var(--dev-fond); }
.s-sel { fill: var(--accent-fond); stroke: var(--accent); stroke-width: 1; }
.s-scan { fill: rgba(120, 146, 255, .1); stroke: var(--accent); stroke-width: 1; }
.s-fu { fill: var(--up); }
.s-fd { fill: var(--down); }
.s-fa { fill: var(--accent); }
.s-fv { fill: var(--dev); }
.s-fl { fill: var(--accent); }
.s-cov { fill: var(--app-creux); }
.s-cover { fill: var(--app-fond); }
.s-tp-bg { fill: var(--app-carte); }
.s-tp-line { fill: none; stroke: var(--app-trait-fort); stroke-width: 1; }
.s-weld { fill: var(--app-trait-fort); }
.s-cd { fill: #1a1219; fill: color-mix(in srgb, var(--down) 7%, var(--app-fond)); }
.s-cd2 { fill: #2a1424; fill: color-mix(in srgb, var(--down) 16%, var(--app-fond)); }
.s-red { fill: var(--down); }
.s-wk-u { stroke: var(--up); stroke-width: 1.5; }
.s-wk-d { stroke: var(--down); stroke-width: 1.5; }
.s-vol { fill: var(--accent); fill-opacity: .25; }
.s-tok { fill: #5468e8; }
.s-tok2 { fill: #1f9e7a; }
.s-tok3 { fill: #b0559b; }
.s-cal rect { fill: var(--app-carte); stroke: var(--app-trait); stroke-width: 1; }
.s-cu { fill: rgba(49, 227, 172, .22); stroke: rgba(49, 227, 172, .45); stroke-width: 1; }
.s-cdn { fill: rgba(237, 58, 122, .2); stroke: rgba(237, 58, 122, .45); stroke-width: 1; }
.s-card { fill: var(--app-creux); stroke: var(--accent-bord); stroke-width: 1; }
.s-clair { fill: #eef0f6; }
.s-box { fill: none; stroke: var(--accent); stroke-width: 1; }
.s-encl { fill: rgba(120, 146, 255, .06); stroke: rgba(120, 146, 255, .45); stroke-width: 1; stroke-dasharray: 4 3; }
.s-wal circle { fill: var(--app-carte); stroke: var(--app-trait-fort); stroke-width: 1; }
.s-steam { fill: none; stroke: var(--launch); stroke-width: 2.5; stroke-linecap: round; }
.s-g { color: var(--app-doux); }
.s-ga { color: var(--accent-clair); }
.s-gl { color: var(--launch); }
.s-gv { color: var(--vamp); }
.s-gu { color: var(--up); }
.s-gd { color: var(--down); }
.s-gdv { color: var(--dev); }
.s-gw { color: #fff; }
.s-gb { color: var(--app-texte); }
/* Finition (17/10/2026): la pastille DEV du groupe Quick sell est ambre plein, texte et toque sombres, comme .dev-pill de l'outil. */
.s-gk { color: var(--on-accent); }
/* 19/10/2026 (lot 14, sa demande : « update la docs avec tout les ajouts [...] avec animation intégrée ») : la scene Rank.
   Piste et jauge bleu clair de l'outil, la perle, les gemmes Silver / Gold (deux teintes par palier, celles de l'outil :
   fill = la profonde, color = la claire, lues par <use href="#rk-gem">), facettes, reflet. */
.s-arc { fill: none; stroke: var(--app-haut); stroke-width: 10; stroke-linecap: round; }
.s-arcf { fill: none; stroke: #6cc6ff; stroke-width: 10; stroke-linecap: round; }
.s-pearl { fill: #fff; }
.s-halo { fill: #6cc6ff; }
.s-gem-s { fill: #8a94a6; color: #f3f6fb; }
.s-gem-g { fill: #c4840f; color: #ffe38c; }
.s-gem-e { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; opacity: .7; }
.s-gem-l { fill: #fff; opacity: .28; }
.s-gem-d { fill: #000; opacity: .22; }
.s-shine { fill: #fff; fill-opacity: .5; }
/* 19/10/2026 (lot 14, sa demande : « update la docs avec tout les ajouts [...] avec animation intégrée ») : la puce d'activite
   de la page Wallets (Fresh, Low activity, Active, Very active), les quatre teintes de l'outil (calculees pour le theme
   BNDL), sur un fond de la meme teinte a 14 %. */
.s-a0 { color: #72ee7e; } .s-a1 { color: #30b2d5; } .s-a2 { color: var(--bleu); } .s-a3 { color: #b578fe; }
.s-actb { fill: currentColor; fill-opacity: .14; }
.s-rb { fill: #f2b583; } .s-rs { fill: #f3f6fb; } .s-rg { fill: #ffe38c; } .s-rp { fill: #c8f8f1; } .s-rd { fill: #dbe5ff; }
/* 19/10/2026 (sa demande : « update la docs avec tout les ajouts [...] avec animation intégrée comme on a fait petit effet pour
   bien expliqué la perk de ce qu'on ajoute ») : les noms chinois de la 0.106. Le jaune BNB du bouton « 中文 » de l'outil
   (240, 185, 11 : HUD_RGB.bsc), et les polices chinoises du systeme derriere Geist, qui n'a pas ces caracteres (--cjk). */
.s-bnb, .k-glow.s-bnb { fill: #f0b90b; }
.s-bnbf { fill: rgba(240, 185, 11, .16); stroke: rgba(240, 185, 11, .55); stroke-width: 1; }
.s-cn, .d-cn, .ui.bnb { font-family: 'Geist', var(--cjk); }
.ui.bnb { color: #f0b90b; background: rgba(240, 185, 11, .16); border-color: rgba(240, 185, 11, .55); font-weight: 600; }

/* Le mouvement : etat de base = etat final ; les keyframes partent de l'etat initial. */
.k-rise, .k-on, .k-off, .k-flash, .k-glow, .k-press, .k-grow, .k-candle, .k-live, .k-hop, .k-pulse, .k-steam, .k-reveal,
.k-trav, .k-rt, .k-roll, .k-conv, .k-blink, .k-steps, .k-swd, .k-swu, .k-erase, .k-bat, .k-timer, .k-end, .k-endoff { transform-box: fill-box; transform-origin: center; }
.k-rise { animation: d-rise 8s var(--ease-soft) infinite both; }
.k-on { animation: d-on 8s var(--ease-soft) infinite both; }
.k-off { opacity: 0; animation: d-off 8s ease infinite both; }
.k-flash { opacity: 0; animation: d-flash 8s ease infinite both; }
.k-glow { opacity: 0; fill: var(--accent); animation: d-glow 8s var(--ease-soft) infinite both; }
.k-press { animation: d-press 8s var(--ease-soft) infinite both; }
.k-draw { stroke-dasharray: 100; animation: d-draw 8s var(--ease-soft) infinite both; }
.k-grow { transform-origin: 0 50%; animation: d-grow 8s var(--ease-soft) infinite both; }
.k-candle { transform-origin: 50% 100%; animation: d-candle 8s var(--ease-soft) infinite both; }
.k-live { animation: d-live 8s ease infinite both; }
.k-hop { animation: d-hop 8s var(--ease-soft) infinite both; }
.k-pulse { opacity: 0; animation: d-pulse 2.4s ease-out infinite; }
.k-steam { opacity: .7; animation: d-steam 3s ease-out infinite both; }
.k-reveal { transform-origin: 100% 50%; transform: scaleX(0); animation: d-reveal 8s var(--ease-soft) infinite both; }
.k-trav { opacity: 0; animation: d-trav 8s var(--ease-soft) infinite both; }
.k-rt { opacity: 0; animation: d-rt 8s var(--ease-soft) infinite both; }
.k-orbit { transform-box: view-box; transform-origin: 260px 290.6px; opacity: 0; transform: rotate(56deg); animation: d-orbit 8s cubic-bezier(.45, 0, .25, 1) infinite both; }
.k-roll { transform: translateY(var(--to)); animation: d-roll 8s var(--ease-soft) infinite both; }
.k-conv { animation: d-conv 9s var(--ease-soft) infinite; }
.k-blink { opacity: 0; animation: d-blink 3s ease-out infinite; }
.k-steps { transform: translateX(332px); animation: d-steps 8s var(--ease-soft) infinite both; }
.k-swd { transform: translateY(30px); animation: d-swd 8s var(--ease-soft) infinite both; }
.k-swu { transform: translateY(-30px); animation: d-swu 8s var(--ease-soft) infinite both; }
.k-erase { opacity: .15; animation: d-erase 8s ease infinite both; }
.k-timer { stroke-dasharray: 100; transform: rotate(-90deg); animation: d-timer 8s linear infinite both; }
.k-bat { animation: d-bat 3.2s ease-in-out infinite; }
/* 19/10/2026 (revue du lot 14, sa demande : « avec animation intégrée [...] pour bien expliqué la perk ») : l'etat final
   TARDIF d'une cascade (Delivered, Claimed, les coches du warm-up, SOLD). Meme fondu que k-on / k-off, tenue plus courte
   (jusqu'a 54 %) : il s'eteint avec la boucle au lieu de rester affiche pendant que le tour suivant recommence. */
.k-end { animation: d-end 8s var(--ease-soft) infinite both; }
.k-endoff { opacity: 0; animation: d-endoff 8s ease infinite both; }
/* 19/10/2026 (meme demande, Block-0 sur Solana de la 0.105) : les transactions du paquet TOMBENT dans le bloc, de 16 px plus
   haut (l'inverse de k-rise). */
.k-drop { animation: d-drop 8s var(--ease-soft) infinite both; }
/* Trajets (pixels du viewBox) et rouleaux de chiffres (26px par chiffre). */
.dxa { --dx: 298px; } .dxb { --dx: 121px; } .dxc { --dx: 149px; } .dxd { --dx: 157px; } .dxe { --dx: 178px; }
.dy0 { --dy: 0px; } .dy1 { --dy: -30px; } .dy2 { --dy: -10px; } .dy3 { --dy: 10px; } .dy4 { --dy: 30px; }
.dy5 { --dy: -93px; } .dy6 { --dy: -33px; } .dy7 { --dy: 27px; } .dy8 { --dy: 87px; }
.to1 { --to: -26px; } .to2 { --to: -52px; } .to3 { --to: -78px; } .to6 { --to: -156px; } .to8 { --to: -208px; }
/* Decalages : une cascade = la meme boucle, decalee (k1 = .25s ... k20 = 5s). */
.k1 { animation-delay: .25s; } .k2 { animation-delay: .5s; } .k3 { animation-delay: .75s; } .k4 { animation-delay: 1s; }
.k5 { animation-delay: 1.25s; } .k6 { animation-delay: 1.5s; } .k7 { animation-delay: 1.75s; } .k8 { animation-delay: 2s; }
.k9 { animation-delay: 2.25s; } .k10 { animation-delay: 2.5s; } .k11 { animation-delay: 2.75s; } .k12 { animation-delay: 3s; }
.k13 { animation-delay: 3.25s; } .k14 { animation-delay: 3.5s; } .k15 { animation-delay: 3.75s; } .k16 { animation-delay: 4s; }
.k17 { animation-delay: 4.25s; } .k18 { animation-delay: 4.5s; } .k19 { animation-delay: 4.75s; } .k20 { animation-delay: 5s; }
.kn1 { animation-delay: -5.333s; } .kn2 { animation-delay: -2.667s; } .kq { animation-delay: -1.25s; } .kr { animation-delay: 3.25s; } .kc { animation-delay: 4.5s; }

@keyframes d-rise { 0% { opacity: 0; transform: translateY(6px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes d-on { 0%, 24% { opacity: 0; transform: scale(.85); } 30%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes d-off { 0%, 24% { opacity: 1; } 28%, 91% { opacity: 0; } 100% { opacity: 1; } }
@keyframes d-flash { 0%, 22% { opacity: 0; } 26% { opacity: .22; } 40%, 100% { opacity: 0; } }
@keyframes d-glow { 0%, 8% { opacity: 0; transform: scale(.92); } 12% { opacity: .5; transform: none; } 26%, 100% { opacity: 0; transform: scale(1.08); } }
@keyframes d-press { 0%, 10% { transform: none; } 13% { transform: scale(.94); } 17%, 100% { transform: none; } }
@keyframes d-draw { 0%, 16% { stroke-dashoffset: 100; opacity: 1; } 34%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d-grow { 0% { transform: scaleX(0); opacity: 1; } 45%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes d-candle { 0% { transform: scaleY(0); opacity: 0; } 6% { opacity: 1; } 14%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes d-live { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes d-hop { 0%, 30% { transform: none; } 34%, 63% { transform: translateX(170px); } 67%, 96% { transform: translateX(340px); } 100% { transform: none; } }
@keyframes d-pulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes d-steam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes d-reveal { 0%, 22% { transform: scaleX(1); } 40%, 100% { transform: scaleX(0); } }
@keyframes d-trav { 0%, 6% { opacity: 0; transform: none; } 9% { opacity: 1; transform: none; } 26% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 30%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes d-rt { 0%, 5% { opacity: 0; transform: none; } 8% { opacity: 1; transform: none; } 20%, 24% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 36% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: none; } }
@keyframes d-orbit { 0%, 8% { opacity: 0; transform: rotate(-56deg); } 12% { opacity: 1; } 46% { opacity: 1; transform: rotate(56deg); } 50%, 100% { opacity: 0; transform: rotate(56deg); } }
@keyframes d-roll { 0%, 8% { transform: none; opacity: 1; } 34%, 94% { transform: translateY(var(--to)); opacity: 1; } 100% { transform: translateY(var(--to)); opacity: 0; } }
@keyframes d-conv { 0% { transform: none; } 4%, 33.33% { transform: translateY(28px); } 37.33%, 66.66% { transform: translateY(56px); } 70.66%, 100% { transform: translateY(84px); } }
@keyframes d-blink { 0% { opacity: 0; } 6% { opacity: .14; } 60%, 100% { opacity: 0; } }
@keyframes d-steps { 0%, 26% { transform: none; } 32%, 58% { transform: translateX(166px); } 64%, 100% { transform: translateX(332px); } }
@keyframes d-swd { 0%, 6% { transform: none; } 16%, 100% { transform: translateY(30px); } }
@keyframes d-swu { 0%, 6% { transform: none; } 16%, 100% { transform: translateY(-30px); } }
@keyframes d-erase { 0%, 40% { opacity: 1; } 52%, 94% { opacity: .15; } 100% { opacity: 1; } }
@keyframes d-timer { 0%, 20% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes d-bat { 0%, 100% { transform: none; } 50% { transform: translate(5px, -5px); } }
@keyframes d-end { 0%, 24% { opacity: 0; transform: scale(.85); } 30%, 54% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: none; } }
@keyframes d-endoff { 0%, 24% { opacity: 1; } 28%, 54% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes d-drop { 0% { opacity: 0; transform: translateY(-16px); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes d-ring { 0% { transform: translate(-50%, -50%) scale(.04); opacity: .7; } 12% { opacity: .85; } 100% { transform: translate(-50%, -50%) scale(1.04); opacity: 0; } }
@keyframes d-enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes d-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes d-fade { from { opacity: 0; } }
@keyframes d-menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------------------------------------------------------------------------ ecrans plus etroits */
@media (min-width: 1280px) {
  .d-art { grid-template-columns: minmax(0, 720px) 220px; column-gap: 48px; }
  .d-toc { display: block; position: sticky; top: 104px; align-self: start; margin-top: 40px; }
}
@media (max-width: 1100px) {
  .d-compare { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .d-shell { grid-template-columns: minmax(0, 1fr); }
  .d-side { display: none; }
  /* Le menu devient un panneau plein ecran, ouvert par le burger (#menu), ferme par la croix (#). */
  .d-side:target {
    display: flex; position: fixed; z-index: 50; top: var(--top); left: 0; right: 0; bottom: 0; height: auto;
    background: var(--fond); animation: d-menu-in .28s var(--ease-soft);
  }
  .d-side:target .d-side-in { padding: 16px; }
  .d-side:target .d-grp > summary { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .d-side:target .d-lnk { height: 44px; font-size: 16px; }
  .d-side:target .d-side-foot { padding: 10px 16px 16px; }
  .d-top-links .lnk { display: none; }
  .d-burger { display: flex; }
  .d-main { padding: 24px 16px 72px; }
  .d-hero { min-height: 220px; padding: 20px; }
  .d-hero h1 { font-size: 28px; }
  .d-dek { font-size: 14px; }
  .d-hero-art {
    top: 0; right: 0; width: 100%; height: auto; opacity: .24;
    -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 85%); mask-image: linear-gradient(to bottom, #000 15%, transparent 85%);
  }
  .d-body { padding-top: 28px; }
  .d-home h1 { font-size: 32px; }
  .d-cards, .d-compare, .d-compare.two, .d-pads, .d-feats { grid-template-columns: minmax(0, 1fr); }
  /* 17/10/2026 (correction du lead) : en une colonne la carte est large, la scene (calee sur la largeur) grossit ; la
     carte grandit avec la largeur pour que la rangee de la scene garde le haut du geste au-dessus de l'icone. */
  .d-card { height: clamp(220px, calc(28vw + 96px), 320px); }
  .d-cex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Menu ouvert : le burger devient une croix (sans :has, ces deux regles tombent : choisir une page ferme le menu). */
  body:has(#menu:target) .d-burger { display: none; }
  body:has(#menu:target) .d-burger-x { display: flex; }
}
@media (max-width: 640px) {
  .d-quick { grid-template-columns: minmax(0, 1fr); }
  .d-pager { grid-template-columns: minmax(0, 1fr); }
  .d-pager .next { grid-column: 1; }
  .d-hint { padding-left: 72px; }
  .d-hint-ico { left: -24px; width: 88px; height: 88px; }
  .d-search { padding-top: 76px; }
  .d-body h2 { font-size: 21px; }
  .d-table { font-size: 13px; }
}
@media (max-width: 420px) {
  .d-sep, .d-label { display: none; }
  .d-top { gap: 8px; padding: 0 12px 0 16px; }
  .d-cex { grid-template-columns: minmax(0, 1fr); }
  /* 17/10/2026 (correction du lead) : sur telephone le texte des cartes tient sur 3 lignes ; la carte grandit un peu
     pour que la scene garde sa rangee au-dessus de l'icone. */
  .d-card { height: 232px; }
}

/* Mouvement reduit : tout s'arrete, chaque scene montre son etat final. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}