/* WakeTrades — feuille d'entrée : les parties dans l'ordre de la cascade, à garder tel quel
   (découpage du 20/10, parties de 300 lignes au plus ; contenu déplacé sans changement). */
/* WakeTrades — charte « Vague » (décision 14.1) : accent turquoise, Inter, chiffres en chasse fixe ; fond noir depuis
   la décision 38.2, thème clair au choix (38.3) puis par défaut (91.2 ; attribut data-theme posé par js/theme.js avant l'affichage).
   Vert et rouge réservés aux gains et pertes. Ordinateur d'abord (14.4), le téléphone reste lisible. */
/* Polices hébergées chez nous (décision 19.3 : aucune requête vers Google ; licence OFL dans fonts/). */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/_v/cc4ae51a3321/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/_v/cc4ae51a3321/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/_v/cc4ae51a3321/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/_v/cc4ae51a3321/fonts/inter-latin-700-normal.woff2") format("woff2"); }   /* nom de la marque en Bold (69.2) */
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/_v/cc4ae51a3321/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/_v/cc4ae51a3321/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --bg: #0A0A0C;
  --surface: #121216;
  --surface-2: #1B1B21;
  --line: #24242B;
  --line-strong: #34343D;
  --text: #EDEDF0;
  --text-2: #A9A9B3;
  --text-3: #7D7D88;
  --accent: #38BDF8;   /* palette du logo (69.4) : bleu ciel en sombre — était turquoise #2DD4BF (charte 14.1) */
  --accent-2: #B46CF9;   /* couleur secondaire : mauve du logo — était l'orange Bitcoin #F7931A (46.4) ; My dashboard, Subscribed, Pause copy, forfait choisi */
  --accent-ink: #082436;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --accent-hover: #6AD1FF;
  --accent-line: rgba(56, 189, 248, 0.35);
  --gain: #4ADE80;
  --gain-soft: rgba(74, 222, 128, 0.10);
  --loss: #F87171;
  --adv: #FCA5A5;   /* rouge pâle de la pastille du niveau RISKY / ADVANCED de l'en-tête (152.11, 152.12) */
  --lvl-prudent: #86EFAC;   /* vert pâle : pastille PRUDENT (152.12) */
  --lvl-balanced: #FDBA74;  /* orange pâle : pastille BALANCED (152.12) */
  --loss-text: #FCA5A5;
  --loss-line: rgba(248, 113, 113, 0.35);
  --loss-line-strong: rgba(248, 113, 113, 0.65);
  --warn-bg: rgba(248, 113, 113, 0.10);
  --mark: #FACC15;
  --dot-2: #A99BFF;
  --brand-g1: #38BDF8;   /* « Trades » et vagues du logo : bleu ciel → mauve en sombre (69.1) */
  --brand-g2: #B46CF9;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  /* Bandes de l'accueil (41.1) : alternance sombre / gris */
  --band-1: linear-gradient(180deg, #0A0A0C 0%, #16161C 100%);
  --band-2: linear-gradient(180deg, #1C1C24 0%, #121217 100%);
  --band-3: linear-gradient(180deg, #0B0B0E 0%, #141419 100%);
  --band-4: linear-gradient(160deg, #20202A 0%, #15151B 60%, #0F0F13 100%);
  --band-5: linear-gradient(180deg, #111115 0%, #0A0A0C 100%);
  --radius: 10px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Thème clair (38.3) : mêmes rôles, contrastes relevés pour un fond blanc */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F6F7F9;
  --surface-2: #EDEFF2;
  --line: #E2E5EA;
  --line-strong: #CBD0D8;
  --text: #0C0E13;
  --text-2: #4A5060;
  --text-3: #767C8C;
  --accent: #1D4ED8;   /* bleu foncé en clair (69.4) — était #0D9488 */
  --accent-2: #7C3AED;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(29, 78, 216, 0.10);
  --accent-hover: #1E40AF;
  --accent-line: rgba(29, 78, 216, 0.35);
  --gain: #16A34A;
  --gain-soft: rgba(22, 163, 74, 0.10);
  --loss: #DC2626;
  --adv: #E25C5C;
  --lvl-prudent: #2FA35B;
  --lvl-balanced: #DB7A2B;
  --loss-text: #B91C1C;
  --loss-line: rgba(220, 38, 38, 0.30);
  --loss-line-strong: rgba(220, 38, 38, 0.55);
  --warn-bg: rgba(220, 38, 38, 0.06);
  --mark: #B45309;
  --dot-2: #6D5EF5;
  --brand-g1: #1D4ED8;   /* bleu foncé → mauve en clair (69.1) */
  --brand-g2: #B46CF9;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  --band-1: linear-gradient(180deg, #FFFFFF 0%, #F3F4F7 100%);
  --band-2: linear-gradient(180deg, #E9ECF1 0%, #F5F6F9 100%);
  --band-3: linear-gradient(180deg, #FFFFFF 0%, #F1F2F5 100%);
  --band-4: linear-gradient(160deg, #E6E9EF 0%, #F2F4F7 100%);
  --band-5: linear-gradient(180deg, #F6F7F9 0%, #FFFFFF 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-4); line-height: 1.6; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); } .loss { color: var(--loss); }   /* profit en vert, perte en rouge (28.3) */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Juridiction restreinte (décision 24.1, modèle Lighter) : bandeau rouge en haut de chaque page */
.geo-banner { background: var(--danger-strong); color: var(--on-brand); text-align: center; padding: 12px 20px; font-size: var(--fs-3); }
.geo-banner a { color: var(--on-brand); text-decoration: underline; }

/* En-tête */
/* En-tête collant (46.7, 47.5) : reste visible au défilement, web et mobile. Le fond (quasi opaque, flouté, ombre portée)
   est un pseudo-élément qui va d'un bord à l'autre de la fenêtre, comme les bandes de l'accueil ; le contenu reste aligné
   sur la page (Wake… My dashboard). */
.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; position: sticky; top: 0; z-index: 20; margin-bottom: 6px; }
.top::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(0, 0, 0, .32); }
:root[data-theme="light"] .top::before { box-shadow: 0 6px 22px rgba(0, 0, 0, .10); }
body { overflow-x: clip; }   /* le fond de l'en-tête dépasse la page : pas de défilement horizontal */
.brand { display: inline-flex; align-items: center; gap: 0; font-weight: 600; font-size: var(--fs-6); letter-spacing: -0.2px; color: var(--text); }   /* nom agrandi (40.6) ; Inter Bold réel (69.2) ; essai orange Bitcoin (46.3) retiré le 07/10 (48.1) */
.brand:hover { text-decoration: none; }   /* pas de soulignement au survol du logo (48.3) */
/* Logo (série 69) : deux vagues emboîtées dans une pastille. Sombre : pastille noire, vagues en dégradé ; clair : pastille dégradée, vagues blanches. */
.brand .logo { width: 1.3em; height: 1.3em; flex: none; border-radius: 0.35em; margin-right: 0.38em; }   /* « WakeTrades » en un mot (79.10) : l'espace ne reste qu'après la pastille */
:root[data-theme="light"] .logo-dark, :root:not([data-theme="light"]) .logo-light { display: none; }
.brand span { background-image: linear-gradient(90deg, var(--brand-g1), var(--brand-g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }   /* « Trades » en dégradé assorti au logo (69.1) */
.top-right { display: flex; align-items: center; gap: 20px; }
/* Boutons à icône façon Lighter (38.4) : thème (lune / soleil) puis langue « 文A » avec son menu */
.tools { display: flex; gap: 8px; }
.tool-wrap { position: relative; }
.tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer; }   /* icônes en blanc (couleur du texte), plus en gris (69.9) */
.tool:hover, .tool[aria-expanded="true"] { color: var(--text); border-color: var(--line-strong); }
.tool svg { width: 20px; height: 20px; }
.tool.tool-off, .tool.tool-off:hover { color: var(--loss); }   /* déconnexion : marche/arrêt toujours rouge (157.2) */
.tool.tool-off:hover { border-color: var(--loss); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); padding: 6px; box-shadow: var(--shadow); z-index: 30; }
.menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; border-radius: var(--r-1); color: var(--text); padding: 8px 12px; font: inherit; font-size: var(--fs-3); text-align: left; cursor: pointer; }
.menu button:hover { background: var(--surface-2); }
.menu button[aria-checked="true"] { color: var(--accent); }
.menu button:has(.menu-note) { flex-wrap: wrap; row-gap: 2px; }
.menu-note { flex-basis: 100%; max-width: 220px; font-size: var(--fs-1); line-height: 1.35; color: var(--text-3); text-align: left; white-space: normal; }   /* langue pas encore traduite sur le site (58.2) */

/* Boutons */
.btn { display: inline-block; border: 1px solid var(--line-strong); background: transparent; color: var(--text); border-radius: var(--r-2); padding: 12px 20px; font: inherit; font-weight: 500; cursor: pointer; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-lg { padding: 16px 32px; font-size: var(--fs-4); }
/* Accroche */
.hero { padding: 64px 0 32px; max-width: 760px; }
.hero h1 { font-size: var(--fs-8); line-height: 1.15; margin: 0 0 32px; font-weight: 600; letter-spacing: -0.5px; }   /* espace titre → 3 étapes (40.4) */
.hero p { font-size: var(--fs-5); color: var(--text-2); margin: 0 0 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 32px 0 32px; color: var(--text-2); font-size: var(--fs-3); }   /* espace 3 étapes → « Your funds stay… » (40.4) */
.trust b { color: var(--text); font-weight: 500; }
/* Haut de l'accueil (83.3, choix « A+ » de /dev/hero_mock) : texte à gauche, carte animée à droite (site/js/hero_story.js) ;
   une colonne sous 900 px, la carte passe sous le bouton. Copie : hc-, mise en route et scènes : hs-. Boucle de 22 s. */
.bands .hero.hero-2col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: center; }
.hero-2col .steps { font-size: var(--fs-4); gap: 12px 20px; }
@media (min-width: 700px) { .hero-2col .steps { display: grid; grid-template-columns: auto auto; justify-content: start; } }   /* quatre étapes en 2 × 2 (190.1) */
.hero-art { display: flex; justify-content: center; }
.hs-ic { width: 16px; height: 16px; color: var(--accent); }
.hc { width: 100%; max-width: 380px; padding: 20px 20px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .25)); }
.hc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.hc-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.hc-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); animation: hc-blink 1.6s ease-in-out infinite; }
.hc-ex { font-size: var(--fs-1); color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.hc-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); }
.hc-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 600; color: var(--on-brand); }
.hc-av-l { background: linear-gradient(135deg, var(--brand-g1), var(--brand-g2)); }
.hc-av-y { background: var(--accent); color: var(--accent-ink); font-size: var(--fs-1); }
.hc-body { flex: 1; min-width: 0; }
.hc-who { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-3); white-space: nowrap; }   /* nom et adresse sur une ligne (194) */
.hc-who .hc-addr { overflow: hidden; text-overflow: ellipsis; }
.hc-perp { font-size: var(--fs-1); font-weight: 600; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; }
.hc-addr { font-size: var(--fs-1); color: var(--text-3); }
.hc-what { font-size: var(--fs-3); color: var(--text-2); margin-top: 2px; }
.hc-what .num { font-size: var(--fs-3); white-space: nowrap; }
.sl-cell { white-space: nowrap; }
.pos-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }   /* titre Positions + interrupteur Market / Limit (89.22) */
.pos-head .switch-row { margin: 0; }
.pos-head h3 { margin: 0; }
.pos-title { display: flex; align-items: center; gap: 10px; }   /* titre Positions + icône « actualiser » (175.6 F2) */
.pos-title .pos-refresh { width: 32px; height: 32px; margin-left: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-2); }   /* bouton rond (21/10) */
.pos-title .pos-refresh:hover { color: var(--text); background: var(--surface-2); }
.pos-title .pos-refresh svg { width: 16px; height: 16px; stroke-width: 2.25; }
.pos-refresh:disabled { cursor: default; }
.pos-refresh:disabled svg { animation: pos-spin 0.8s linear infinite; }   /* tourne pendant la lecture */
@keyframes pos-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pos-refresh:disabled svg { animation: none; } .pos-refresh:disabled { opacity: 0.5; } }   /* SL de la copie et son origine sur une ligne (89.19) */
.hc-long { color: var(--gain); font-weight: 600; white-space: nowrap; }
.hc-time { font-size: var(--fs-1); color: var(--text-3); }
.hc-mid { display: flex; justify-content: center; height: 40px; }
.hc-link { width: 24px; height: 40px; overflow: visible; }
.hc-line { stroke: var(--brand-g1); stroke-width: 2; stroke-dasharray: 4 5; fill: none; animation: hc-flow 1s linear infinite; }
.hc-pulse { fill: var(--brand-g2); opacity: 0; }
.hc-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.hc-check { display: flex; align-items: center; gap: 12px; font-size: var(--fs-3); }
.hc-ck { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gain-soft); color: var(--gain); font-size: var(--fs-1); font-weight: 600; }
.hc .hc-foot { margin: 16px 0 0; font-size: var(--fs-1); color: var(--text-3); }

@keyframes hc-flow { to { stroke-dashoffset: -18; } }
@keyframes hc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Carte animée — trois scènes empilées, boucle de 22 s : mise en route 0–40 %, surveillance 40–53 %, copie 53–100 % */
.hs-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 286px; }   /* colonne bornée à la carte : sur téléphone, les scènes passent à la ligne au lieu de sortir de la carte */
.hs-scene { grid-area: 1 / 1; align-self: start; }
.hs-s1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; animation: hs-s1 22s linear infinite; }
.hs-s2 { align-self: center; text-align: center; opacity: 0; animation: hs-s2 22s ease-out infinite; }
.hs-s3 { opacity: 0; animation: hs-s3 22s linear infinite; }
@keyframes hs-s1 { 0% { opacity: 0; } 1%, 37% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes hs-s2 { 0%, 39% { opacity: 0; transform: scale(.85); } 42% { opacity: 1; transform: scale(1.06); } 45%, 51% { opacity: 1; transform: scale(1); } 53%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hs-s3 { 0%, 52% { opacity: 0; } 54%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* Libellé de l'en-tête selon la scène */
.hs-labels { position: relative; }
.hs-labels span { opacity: 0; white-space: nowrap; }
.hs-labels .hs-l2, .hs-labels .hs-l3 { position: absolute; left: 16px; }
.hs-l1 { animation: hs-lab1 22s linear infinite; } .hs-l2 { animation: hs-lab2 22s linear infinite; } .hs-l3 { animation: hs-lab3 22s linear infinite; }
@keyframes hs-lab1 { 0%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes hs-lab2 { 0%, 39% { opacity: 0; } 40%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes hs-lab3 { 0%, 52% { opacity: 0; } 53%, 100% { opacity: 1; } }

/* Scène 1 : quatre lignes qui arrivent l'une après l'autre, chacune cochée */
.hs-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); opacity: 0; }
.hs-icb { flex: none; width: 32px; height: 32px; border-radius: var(--r-3); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); }
.hs-icb .hs-ic { width: 17px; height: 17px; }
.hs-body { flex: 1; min-width: 0; font-size: var(--fs-3); }
.hs-body > b { display: block; font-weight: 600; }
.hs-swap { position: relative; height: 22px; font-size: var(--fs-3); color: var(--text-2); }
.hs-swap span { position: absolute; left: 0; top: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* petit téléphone : l'adresse se coupe en « … » dans la carte */
.hs-swap .num { font-size: var(--fs-1); }
.hs-a { animation: hs-swapa 22s linear infinite; } .hs-b { opacity: 0; animation: hs-swapb 22s linear infinite; }
@keyframes hs-swapa { 0%, 6% { opacity: 1; } 7%, 100% { opacity: 0; } }
@keyframes hs-swapb { 0%, 6% { opacity: 0; } 7%, 100% { opacity: 1; } }
.hs-field { margin-top: 4px; height: 22px; display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-1); font-size: var(--fs-1); color: var(--text); width: fit-content; min-width: min(140px, 100%); }
.hs-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 1.5px solid var(--accent); animation: hs-type 22s steps(11, end) infinite; }
@keyframes hs-type { 0%, 23% { width: 0; } 28%, 100% { width: 11ch; } }
.hs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hs-pill { font-size: var(--fs-1); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); }
.hs-pp { animation: hs-pp 22s linear infinite; } .hs-pb { animation: hs-pb 22s linear infinite; }
@keyframes hs-pp { 0%, 11% { border-color: var(--line); color: var(--text-2); background: transparent; } 12%, 16% { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } 17%, 100% { border-color: var(--line); color: var(--text-2); background: transparent; } }
@keyframes hs-pb { 0%, 16% { border-color: var(--line); color: var(--text-2); background: transparent; } 17%, 100% { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } }
.hs-note { font-size: var(--fs-1); color: var(--text-2); margin-top: 2px; }
.hs-r1 { animation: hs-r1 22s ease-out infinite; } .hs-r2 { animation: hs-r2 22s ease-out infinite; }
.hs-r3 { animation: hs-r3 22s ease-out infinite; } .hs-r4 { animation: hs-r4 22s ease-out infinite; }
@keyframes hs-r1 { 0%, 1% { opacity: 0; transform: translateY(8px); } 4%, 100% { opacity: 1; transform: none; } }
@keyframes hs-r2 { 0%, 9% { opacity: 0; transform: translateY(8px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes hs-r3 { 0%, 20% { opacity: 0; transform: translateY(8px); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes hs-r4 { 0%, 30% { opacity: 0; transform: translateY(8px); } 32%, 100% { opacity: 1; transform: none; } }
.hs-ck { opacity: 0; transform: scale(.4); }
.hs-ck.t1 { animation: hs-t1 22s ease-out infinite; } .hs-ck.t2 { animation: hs-t2 22s ease-out infinite; }
.hs-ck.t3 { animation: hs-t3 22s ease-out infinite; } .hs-ck.t4 { animation: hs-t4 22s ease-out infinite; }
@keyframes hs-t1 { 0%, 7% { opacity: 0; transform: scale(.4); } 8.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-t2 { 0%, 19% { opacity: 0; transform: scale(.4); } 20.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-t3 { 0%, 28% { opacity: 0; transform: scale(.4); } 29.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-t4 { 0%, 34% { opacity: 0; transform: scale(.4); } 35.5%, 100% { opacity: 1; transform: none; } }

/* Scène 2 : « boum », le leader au centre, anneaux de surveillance, barres d'écoute */
.hs-radar { position: relative; width: 120px; height: 120px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.hs-av { width: 46px; height: 46px; font-size: var(--fs-4); position: relative; z-index: 1; }
.hs-ring { position: absolute; inset: 37px; border-radius: 50%; border: 2px solid var(--brand-g1); opacity: 0; animation: hs-ring 2s ease-out infinite; }
.hs-ring.w2 { animation-delay: .66s; border-color: var(--brand-g2); } .hs-ring.w3 { animation-delay: 1.33s; }
@keyframes hs-ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.hs-boom { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle, var(--brand-g2), transparent 70%); opacity: 0; animation: hs-boom 22s ease-out infinite; }
@keyframes hs-boom { 0%, 40% { opacity: 0; transform: scale(.5); } 42% { opacity: .9; transform: scale(1.2); } 47%, 100% { opacity: 0; transform: scale(2.4); } }
.hc .hs-title { margin: 0; font-size: var(--fs-4); font-weight: 600; }
.hc .hs-sub { margin: 4px 0 12px; font-size: var(--fs-3); color: var(--text-2); }
.hs-bars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 16px; }
.hs-bars i { width: 4px; border-radius: 2px; background: linear-gradient(var(--brand-g1), var(--brand-g2)); animation: hs-bar 1s ease-in-out infinite; }
.hs-bars i:nth-child(2) { animation-delay: .15s; } .hs-bars i:nth-child(3) { animation-delay: .3s; } .hs-bars i:nth-child(4) { animation-delay: .45s; } .hs-bars i:nth-child(5) { animation-delay: .6s; }
@keyframes hs-bar { 0%, 100% { height: 4px; } 50% { height: 16px; } }

/* Scène 3 : la copie de la carte A, recalée sur 22 s */
.hs-s3 .hc-leader { animation: hs-ca 22s ease-out infinite; }
.hs-s3 .hc-mid { animation: hs-cb 22s ease-out infinite; }
.hs-s3 .hc-you { animation: hs-cc 22s ease-out infinite; }
.hs-s3 .hc-check.k1 { animation: hs-k1 22s ease-out infinite; }
.hs-s3 .hc-check.k2 { animation: hs-k2 22s ease-out infinite; }
.hs-s3 .hc-check.k3 { animation: hs-k3 22s ease-out infinite; }
.hs-s3 .hc-pulse { animation: hs-drop 22s ease-in-out infinite; }
@keyframes hs-ca { 0%, 53% { opacity: 0; transform: translateY(8px); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes hs-cb { 0%, 58% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes hs-cc { 0%, 64% { opacity: 0; transform: translateY(8px); } 67%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k1 { 0%, 70% { opacity: 0; transform: translateX(-6px); } 72.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k2 { 0%, 75% { opacity: 0; transform: translateX(-6px); } 77.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k3 { 0%, 80% { opacity: 0; transform: translateX(-6px); } 82.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-drop { 0%, 59% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 65% { transform: translateY(32px); opacity: 1; } 67%, 100% { transform: translateY(32px); opacity: 0; } }
@media (max-width: 900px) { .bands .hero.hero-2col { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero-art { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) {   /* la scène de copie seule, immobile */
  .hs-card *, .hs-card .hc-row, .hs-card .hc-mid, .hs-card .hc-check { animation: none !important; }
  .hs-card .hs-s1, .hs-card .hs-s2, .hs-card .hs-l1, .hs-card .hs-l2, .hs-card .hs-a, .hs-card .hs-ring, .hs-card .hs-boom, .hs-card .hc-pulse { opacity: 0 !important; }
  .hs-card .hs-s3, .hs-card .hs-s3 *, .hs-card .hs-l3 { opacity: 1 !important; transform: none !important; }
}
.cta-note { color: var(--text-3); font-size: var(--fs-3); margin-top: 12px; }
.cta-note b { color: var(--text-2); font-weight: 600; }   /* prérequis sous le bouton (207.3) */
.need-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }   /* trois prérequis, coche devant (207.6) */
.need-list li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 8px; }
/* Liens de l'en-tête (207.1) : entre le logo et les outils ; sous 1100 px, dernière ligne de l'en-tête, qui défile */
.top-nav { display: flex; gap: 28px; margin: 0 auto 0 40px; }
.top-nav a { color: var(--text-2); font-size: var(--fs-3); font-weight: 500; text-decoration: none; white-space: nowrap; }
.top-nav a:hover { color: var(--text); }
#how, #pricing, #faq { scroll-margin-top: 24px; }   /* cibles des liens : le titre de la section reste sous l'en-tête collant */
@media (max-width: 1100px) {   /* en-tête trop étroit : les liens passent sur leur ligne */
  .top:has(.top-nav) { flex-wrap: wrap; }
  .top-nav { order: 3; flex-basis: 100%; gap: 20px; margin: 6px 0 0; overflow-x: auto; scrollbar-width: none; }
  .top-nav::-webkit-scrollbar { display: none; }
  #how, #pricing, #faq { scroll-margin-top: 80px; }   /* en-tête plus haut (liens sur leur ligne) */
}
.top:has(.plan-badge) .top-nav { display: none; }   /* client connecté (207.4) : liens pour le visiteur seulement, l'en-tête garde forfait, profil, réglages */
@media (max-width: 760px) {
  /* Téléphone, visiteur (211.6) : « Connect Wallet » sur la 1re ligne, après la lune et la langue ; le menu en 2e ligne (deux lignes
     au lieu de trois). Le client connecté garde ses pastilles et son bouton en 2e ligne (157.4, 157.7). */
  .top:has(.top-nav):not(:has(.plan-badge)) .top-right::before { display: none; }
  .top:has(.top-nav):not(:has(.plan-badge)) .top-right .btn { order: 0; }
}
/* Comment ça marche, en 3 étapes (39.4) */
.steps { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: var(--fs-4); color: var(--text); }
.steps li { display: flex; align-items: center; gap: 12px; }
.step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: var(--fs-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Preuve avant la connexion (203) : trois cartes, une par niveau, chiffres de l'aperçu public du rapport ; remplace la section 197 */
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 32px 0 0; }
.proof-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }   /* carte blanche, sans dégradé (210.5) */
.proof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proof-name { font-size: var(--fs-4); font-weight: 600; }   /* niveau en texte, sans pastille (210.5) */
.proof-risk { font-size: var(--fs-3); color: var(--text-2); }
.proof-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.proof-big b { font-size: var(--fs-7); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.proof-big span { font-size: var(--fs-4); font-weight: 600; }
.proof-big small { font-size: var(--fs-3); color: var(--text-2); }
.proof-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-rows div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proof-rows span { font-size: var(--fs-1); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.proof-rows b { font-size: var(--fs-4); }
.proof-rows small { font-size: var(--fs-1); color: var(--text-2); }
.proof-leaders { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.proof-leaders li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); }
.pl-rank { font-weight: 600; width: 24px; flex: none; }
.pl-type { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; }
.pl-ret { font-weight: 600; }
.pl-dd { color: var(--text-2); }
.pl-lock { display: inline-flex; flex: none; color: var(--text-2); }
.pl-lock svg { width: 16px; height: 16px; }
.proof .gain { color: var(--gain); } .proof .loss { color: var(--loss); }
.proof-none { margin: 24px 0 0; color: var(--text-2); }
.proof-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }
.proof-foot { margin: 20px 0 0; color: var(--text-2); font-size: var(--fs-4); line-height: 1.5; }   /* même style que .faq-sub (fondateur) */
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
.vs2-mk { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1); font-weight: 600; }
.vs2-mk.ok { background: var(--gain-soft); color: var(--gain); }
.vs2-mk.no { background: var(--warn-bg, var(--line)); color: var(--loss-text, var(--loss)); }
.insight .report-tag { color: var(--accent); font-weight: 600; margin: 16px 0 0; }   /* client en essai : « Unlock the Monthly Report » sous l'aperçu (81.3) */
/* Ce que le prix comprend (86.1) : liste cochée sur deux colonnes */
.included { margin: 20px 0 0; }
.inc-title { margin: 0 0 12px; font-size: var(--fs-1); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.included ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.included li, .fb-list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-3); color: var(--text); line-height: 1.4; }

/* Sections */
section { padding: 32px 0; }
h2 { font-size: var(--fs-6); font-weight: 600; margin: 0 0 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.switch-card { max-width: 520px; margin: 48px auto; }
.switch-card .actions { display: flex; gap: 12px; flex-wrap: wrap; }   /* 175.3 : « Switch wallet? » avant le tableau de bord */
.card h3 { margin: 0 0 6px; font-size: var(--fs-5); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.card .line { color: var(--text-2); margin: 0 0 16px; min-height: 52px; }
.facts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.facts li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-3); }
.facts li span:first-child { color: var(--text-3); }
.card.risky { border-color: var(--loss-line); }
.facts li { gap: 12px; }
.facts li span:last-child { text-align: right; }
/* Trois niveaux (série 63) : jauge de risque, liste complète dépliée par « Compare all features » */
.risk-meter { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.risk-meter i { width: 16px; height: 5px; border-radius: 2px; background: var(--line-strong); }
.risk-meter.r1 i.on { background: var(--accent); }
.risk-meter.r2 i.on { background: var(--mark); }
.risk-meter.r3 i.on { background: var(--loss); }
.risk-meter span { margin-left: 6px; }
.feat { display: none; margin-top: 6px; text-align: left; }
.feat-open .feat { display: block; }
.feat .fg { font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin: 0; padding: 20px 0 6px; }
.feat ul { list-style: none; padding: 0; margin: 0; }
.feat li { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; font-size: var(--fs-3); color: var(--text); }
.feat li.off { color: var(--text-3); }
.feat li[title] > span:last-child { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--text-3); cursor: help; }
.fm { width: 14px; flex: none; text-align: center; font-weight: 600; }
.fm.yes { color: var(--accent); }
.fm.part { color: var(--mark); }
.fm.no { color: var(--text-3); }
.feat .fx { font-size: var(--fs-3); line-height: 1.5; color: var(--text-2); margin: 0; }
.feat .fnote { font-size: var(--fs-1); color: var(--text-3); margin: 12px 0 0; }
.compare-row { text-align: center; margin-top: 20px; }

/* Prix */
.price { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: stretch; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Cartes des forfaits (86.1) : durée et rabais en haut, prix, prix par mois, économie ; 6 mois en avant ; plus de « Choose → », la carte est le lien (177.6) */
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.plan.best { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-name { font-size: var(--fs-1); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.plan .cur { font-size: var(--fs-3); font-weight: 500; color: var(--text-2); margin: 0 8px 0 4px; }
.plan-pm { color: var(--text-2); font-size: var(--fs-3); }
.plan-save { width: fit-content; font-size: var(--fs-1); font-weight: 600; color: var(--gain); background: var(--gain-soft); border-radius: var(--r-1); padding: 1px 8px; }
.plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.plan-foot .pc-best { white-space: nowrap; font-size: var(--fs-1); }
.plan { position: relative; }
a.plan { display: block; color: inherit; transition: border-color .15s, transform .15s; }   /* carte cliquable → Abonnement, forfait présélectionné (48.6) */
a.plan:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.plan .amount { font-size: var(--fs-7); font-weight: 600; margin-top: 6px; }
.plan .list { display: block; font-size: var(--fs-5); font-weight: 400; color: var(--text-2); text-decoration-thickness: 1px; line-height: 1.2; }   /* vrai prix barré (37.4) ; 20 px sur sa ligne, sous le prix : la carte de 1 280 px est trop étroite pour les deux (177.2) */
.plan .pc-off { font-size: var(--fs-1); }   /* étiquette en 12 px sur l'accueil (177.2) */
.bands .small { font-size: var(--fs-3); }   /* notes de l'accueil en 14 px (177.2) */
.bands .fm-pos .small { font-size: var(--fs-1); }   /* Long / Short : étiquette en 12 px (177.2) */
/* Encadré du prix fondateur (86.1) : étiquette, −50 % en grand, note, puis les deux avantages cochés */
.seats { display: flex; flex-direction: column; justify-content: center; gap: 20px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 24px 24px; }
.fb-kicker { display: inline-block; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.fb-off { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: var(--fs-4); color: var(--text); }
.seats .big { font-size: var(--fs-7); font-weight: 600; line-height: 1; letter-spacing: -1px; background: linear-gradient(90deg, var(--brand-g1), var(--brand-g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fb-note { margin: 8px 0 0; color: var(--text-3); font-size: var(--fs-3); }
.fb-list { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--accent-line); display: grid; gap: 12px; }
.fb-list .fb-zero { font-size: var(--fs-4); font-weight: 600; }
/* Champs et sélecteurs */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: var(--fs-3); color: var(--text-2); margin-bottom: 6px; }
.input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 12px 12px; font: inherit; }
.input:focus { outline: none; border-color: var(--accent); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 90px; }
.seg button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.or { color: var(--text-3); font-size: var(--fs-2); margin: 8px 0; }
.small { color: var(--text-3); font-size: var(--fs-2); margin-top: 12px; }
.empty { color: var(--text-3); }

/* Messages (décision 16.2 : phrase + action + code) */
.msg { border-radius: var(--r-2); padding: 12px 16px; font-size: var(--fs-3); margin-top: 12px; }
.msg.err { background: var(--warn-bg); border: 1px solid var(--loss-line); color: var(--loss-text); }
.msg.info { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.msg.notice { display: flex; align-items: flex-start; gap: 12px; }
.msg.notice > span { flex: 1; }
.notice-x { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-4); line-height: 1; padding: 2px 4px; cursor: pointer; }
.notice-x:hover { color: var(--text); }
.msg.relay b { display: block; color: var(--text); font-size: var(--fs-4); }
.msg.relay p { margin: 6px 0 0; font-size: var(--fs-3); line-height: 1.5; }
.msg.relay p.small { font-size: var(--fs-2); }
.msg.relay .btn { margin-top: 12px; }
.msg.warn { background: color-mix(in srgb, var(--mark) 8%, transparent); border: 1px solid color-mix(in srgb, var(--mark) 40%, transparent); color: var(--mark); }
.msg .code { font-family: var(--mono); font-size: var(--fs-1); color: var(--text-3); margin-left: 8px; }
[hidden] { display: none !important; }

/* Application : étapes, fiches */
.addr { color: var(--text-2); font-size: var(--fs-3); }
.sub { color: var(--text-2); margin: -6px 0 24px; max-width: 680px; }
.btn-ghost { border-color: transparent; color: var(--accent); padding-left: 0; }
.btn-ghost:hover { background: transparent; text-decoration: underline; }
.actions { margin-top: 24px; }
#banner { margin-bottom: 20px; }

/* Niveaux (É3), style épuré */
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.grid3.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* quatre niveaux sur l'accueil (105.1) */
@media (max-width: 1100px) { .levels, .grid3.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.risk-meter.r4 span { margin-left: 0; }   /* Advanced : sans jauge */
.lv.adv, .card[data-level="advanced"] { border-style: dashed; }
/* Page Advanced (152.1) : 4 blocs, une ligne par réglage (intitulé à gauche, commande à droite), un seul Save */
.adv-page { max-width: 760px; }
.adv-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.adv-set:disabled { opacity: 0.6; }   /* sans forfait 6 mois : lecture seule */
.adv-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.adv-lbl { display: flex; flex-direction: column; gap: 2px; color: var(--text-2); font-size: var(--fs-3); }
.adv-hint { color: var(--text-3); font-size: var(--fs-2); }
.adv-hint:empty { display: none; }
.adv-ctl { flex: none; display: flex; align-items: center; gap: 8px; }
.adv-ctl .input { width: 120px; }
.adv-pair .input { width: 80px; }
.adv-ctl.seg button { flex: none; min-width: 0; padding: 8px 16px; }
.adv-range { display: flex; align-items: center; gap: 12px; }
.adv-range input { width: 180px; accent-color: var(--accent); }
.adv-range output { min-width: 34px; text-align: right; color: var(--text); }
.adv-page .adv-rule { margin: 8px 0 0; }
.adv-markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.adv-markets .check { margin: 6px 0; align-items: flex-start; }
.adv-markets .check input { margin-top: 4px; }
.adv-page input[type="checkbox"]:not(.switch) { accent-color: var(--accent); }
.adv-foot { margin-top: 32px; }
.adv-foot .row-msg { margin-bottom: 4px; }
.adv-link { margin: 16px 0 0; }   /* lien de la page Niveau (152.1) */
.adv-chip { align-self: flex-start; margin-top: 6px; font-size: var(--fs-1); color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.adv-chip:hover { color: var(--text); text-decoration: none; }
.recap:has(+ .adv-chip-row) { margin-bottom: 0; }
.adv-chip-row { margin: 16px 0 24px; }   /* « Advanced · n rules active » sous le récapitulatif (157.6) */
.adv-chip-row .adv-chip { display: inline-block; margin-top: 0; }
.nav-link { color: var(--text-2); font-size: var(--fs-3); font-weight: 500; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); text-decoration: none; }
@media (max-width: 760px) {   /* téléphone : intitulé à gauche, commande à droite ; jauges et Long / Short sur toute la largeur */
  .adv-row { gap: 12px; }
  .adv-lbl { flex: 1; min-width: 0; }
  .adv-ctl .input { width: 108px; padding: 12px 8px; }
  .adv-pair .input { width: 64px; }
  .adv-wide { flex-wrap: wrap; gap: 8px; }
  .adv-wide .adv-lbl { flex-basis: 100%; }
  .adv-wide .adv-ctl { width: 100%; }
  .adv-range { flex: 1; } .adv-range input { flex: 1; width: auto; min-width: 0; }
  .adv-ctl.seg button { flex: 1; padding: 8px 6px; white-space: nowrap; }
  .adv-markets { grid-template-columns: 1fr; }
}
.dd-banner { border: 1px solid var(--loss-line-strong); background: var(--warn-bg); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.dd-banner p { margin: 0; flex: 1 1 260px; }
.lv { text-align: left; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px; position: relative; }
.lv:hover { border-color: var(--line-strong); }
.lv.on { border-color: var(--accent); background: var(--accent-soft); }
.lv.risky.on { border-color: var(--loss-line-strong); background: var(--warn-bg); }
.lv-name { font-size: var(--fs-5); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }   /* titres des niveaux en majuscules (22.1) */
.lv-phrase { color: var(--text-2); min-height: 48px; }
.lv-preview { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.lv-line { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: var(--fs-3); }
.lv-line span { color: var(--text-3); }
.lv-line b { font-weight: 500; }
.lv-note { font-size: var(--fs-2); color: var(--text-2); margin-top: 4px; }
.lv-note.warn { color: var(--loss-text); }
.limits { max-width: 760px; }
.planned { max-width: 420px; }
/* Niveau enregistré bien visible dans les Réglages (32.1) */
.current-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; color: var(--text-2); }
.current-pill { background: var(--accent); color: var(--accent-ink); font-weight: 600; letter-spacing: 0.6px; padding: 4px 12px; border-radius: var(--r-1); font-size: var(--fs-3); }
.unsaved { color: var(--mark); font-size: var(--fs-3); }
.lv-current { position: absolute; top: -11px; right: 16px; font-size: var(--fs-1); letter-spacing: 0.4px; padding: 2px 8px; border-radius: var(--r-1); background: var(--accent); color: var(--accent-ink); }   /* sur le bord haut de la carte, au-dessus de « 6-month plan » : ne déborde plus (177.9) */
.ack p { margin: 0 0 8px; }
.ack label { cursor: pointer; color: var(--text); }
.back { margin-right: 12px; }

/* Signature (É4) */
.recap { margin: 6px 0 24px; max-width: 760px; }
.recap .fc-cell b .num { font-size: inherit; }   /* adresse du leader à la taille du niveau (44.4) */
.fc-cell b .rc-val { color: inherit; font-size: inherit; }
.edit-link { text-decoration: none; font-size: var(--fs-3); margin-left: 2px; }   /* ✏️ du niveau de risque (57.2) */
.edit-link:hover { text-decoration: none; opacity: .75; }   /* valeurs du récapitulatif du tableau de bord (56.1) */
.fc-cell b .rc-val.gain { color: var(--gain); } .fc-cell b .rc-val.loss { color: var(--loss); }
.keybox { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; max-width: 760px; margin-bottom: 20px; }
.kb-title { margin: 0 0 8px; font-weight: 600; }
.keybox ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.keybox li { padding: 4px 0 4px 24px; position: relative; color: var(--text-2); }
.keybox li::before { content: "•"; position: absolute; left: 6px; color: var(--text-3); }
.keybox li.yes::before { content: "✓"; color: var(--gain); left: 2px; }
.keybox li.no::before { content: "✕"; color: var(--loss); left: 2px; }
.keybox li.no { color: var(--text); }
.check { display: flex; align-items: center; gap: 6px; margin: 8px 0; cursor: pointer; color: var(--text-2); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.accept { margin-top: 12px; }

/* Tableau de bord (É6) */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.dash-head h2 { margin: 0; }
.head-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-resume { border-color: var(--gain); color: var(--gain); padding: 12px 24px; }   /* Resume : bordure verte (25.1) */
.btn-resume:hover { background: var(--gain-soft); }
.btn-x { width: 28px; height: 28px; border: 1px solid var(--loss-line-strong); border-radius: var(--r-1); background: transparent; color: var(--loss-text); cursor: pointer; font-size: var(--fs-2); line-height: 1; }   /* ✕ : fermer une copie (25.3) */
.btn-x:hover { background: var(--warn-bg); }
.btn-x.btn-edit { border-color: var(--line-strong); color: var(--text); }   /* ✏️ : modifier un leader (79.7) */
.btn-x.btn-edit:hover { background: var(--line); }
.x-cell { width: 36px; text-align: right; }
/* Cellule Market à la Hyperliquid (28.1–28.2) : ticker coloré long/short, barre à gauche, levier du leader */
.pos-table td.mkt { border-left: 3px solid transparent; padding-left: 12px; white-space: nowrap; }
.pos-table td.mkt.long { border-left-color: var(--gain); } .pos-table td.mkt.short { border-left-color: var(--loss); }
.mkt.long b { color: var(--gain); } .mkt.short b { color: var(--loss); }
.mkt b { font-weight: 600; }
.mkt .lev { margin-left: 8px; color: var(--text-2); font-family: var(--mono); font-size: var(--fs-2); }
.tag-iso { margin-left: 6px; font-size: var(--fs-1); padding: 1px 6px; border-radius: var(--r-1); background: var(--surface-2); color: var(--text-2); }
/* Positions regroupées par leader (26.1) */
.pos-table .grp td { color: var(--text); font-size: var(--fs-4); font-weight: 500; padding-top: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }   /* titres de leader agrandis (27.1) */
.pos-table .grp td .small { font-size: var(--fs-3); font-weight: 400; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; }
.dot-0 { background: var(--accent); } .dot-1 { background: var(--dot-2); } .dot-former { background: var(--text-3); }
/* Leaders 3 à 8 (67.0) : teintes lisibles sur les deux thèmes */
.dot-2 { background: var(--data-2); } .dot-3 { background: var(--data-3); } .dot-4 { background: var(--data-4); } .dot-5 { background: var(--data-5); } .dot-6 { background: var(--data-6); } .dot-7 { background: var(--data-7); }
.addr-title { font-size: var(--fs-5); color: var(--text-2); font-weight: 500; } .trader-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; } .trader-head h2, .trader-head p { margin-bottom: 0; }   /* lien Hyperliquid à droite du titre (27/10) */
.btn-danger { border-color: var(--loss-line-strong); color: var(--loss-text); }
.stop-choice { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.row-msg { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h3 { font-size: var(--fs-4); font-weight: 600; margin: 24px 0 12px; }
.pos-table { width: 100%; max-width: 1032px; border-collapse: collapse; font-size: var(--fs-3); }
.pos-table th { text-align: left; color: var(--text-3); font-weight: 400; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }   /* titres en majuscules (29.1) */
.pos-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.see-all { margin-top: 12px; }
.dash-sec { margin-top: 48px; }   /* même espace entre les sections du tableau de bord (61.1) ; 72 → 44 px le 09/10 (75.0) */
.recap + .dash-sec, .adv-chip-row + .dash-sec { margin-top: 24px; }   /* récapitulatif → section suivante : 22 + 22 = 44 px, comme les autres sections (75.0) */
.dash-sec.rc-sec { margin-top: 24px; }   /* carte du rapport en haut, sous le titre (76.4) */
.rc-sec + .recap { margin-top: 24px; }
.dash-sec > h3:first-child, .dash-sec > section > h3:first-child { margin-top: 0; }
.dash-sec > section { padding: 0; }   /* « See all orders → » sous les derniers ordres (60.1) */
/* Nom du leader cliquable pour le renommer (74.1) : pas de ✏️, souligné pointillé au survol */
/* Tableau des leaders (80.8, choix C) : nom au-dessus de l'adresse, chiffres de la fiche, ✏️ ✕ à droite ; leader en veille grisé (67.1).
   Série 189 (maquette /dev/leaders_card_mock) : équité, type et coins, PnL 90 / 30 jours, titres sur deux lignes centrés. */
.ld-table td { padding: 12px 16px 12px 0; vertical-align: middle; }
.ld-table th { padding-right: 16px; vertical-align: bottom; line-height: 1.4; white-space: pre-line; }
.ld-table th.c, .ld-table td.num { text-align: center; }
.ld-table th small { display: block; text-transform: none; letter-spacing: 0; }
.ld-table td.x-cell { width: 72px; }
.ld-table .row-actions { justify-content: flex-end; }
.ld-who { display: flex; align-items: center; }
.ld-who .lr-name { font-weight: 500; }
.ld-addr { display: flex; align-items: center; margin-top: 2px; padding-left: 24px; }
.ld-addr .num { font-size: var(--fs-1); color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }   /* adresse en lien bleu souligné vers la page du leader (216) */
.ld-addr .num:hover { text-decoration-thickness: 2px; }
.ld-addr .copy-btn { width: 22px; height: 22px; margin-left: 2px; }
.ld-table td.num { font-size: var(--fs-3); }
.ld-table .eq { margin-left: 6px; font-size: var(--fs-1); font-weight: 700; color: var(--bg); background: var(--text); border: 1px solid var(--text); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }   /* pastille du rapport (161.14) */
.ld-kind { margin-top: 6px; padding-left: 24px; font-size: var(--fs-2); color: var(--text-3); }
.ld-kind .tag { display: inline-block; font-size: var(--fs-1); color: var(--text); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 6px; }   /* comme .tag du rapport */
/* ✏️ ✕ au bureau : icônes seules (79.7), même allure que .btn-x */
.ld-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border-radius: var(--r-1); background: transparent; cursor: pointer; font: inherit; font-size: var(--fs-2); line-height: 1; }
.ld-btn-t { display: none; }
.ld-btn-edit { border: 1px solid var(--line-strong); color: var(--text); } .ld-btn-edit:hover { background: var(--line); }
.ld-btn-remove { border: 1px solid var(--loss-line-strong); color: var(--loss-text); } .ld-btn-remove:hover { background: var(--warn-bg); }
.ld-table .row-actions { display: flex; gap: 8px; }
.ld-table td.ld-none { color: var(--text-3); font-size: var(--fs-2); }
.ld-table tr.dormant .ld-who, .ld-table tr.dormant .ld-addr, .ld-table tr.dormant .ld-kind, .ld-table tr.dormant td.num { opacity: 0.45; }
/* Leaders surveillés (87.1) : la pastille de chaque leader actif émet un anneau de sa couleur, comme un signal de surveillance,
   décalé d'une ligne à l'autre ; rien sur un leader en veille, rien si le visiteur demande moins de mouvement. */
.ld-table tr.ld-row:not(.dormant) .dot { position: relative; }
.ld-table tr.ld-row:not(.dormant) .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ld-ping 2.4s ease-out infinite; }
.ld-table tr.ld-row:nth-child(4n+2) .dot::after { animation-delay: .6s; }
.ld-table tr.ld-row:nth-child(4n+3) .dot::after { animation-delay: 1.2s; }
.ld-table tr.ld-row:nth-child(4n+4) .dot::after { animation-delay: 1.8s; }
@keyframes ld-ping { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-table tr.ld-row:not(.dormant) .dot::after { content: none; animation: none; } }   /* même poids que la règle d'animation */
.ld-table .lr-dormant { font-size: var(--fs-1); color: var(--text-3); margin-top: 2px; padding-left: 24px; }
.ld-table tr.ld-wide td { padding: 4px 0 8px; }
.ld-note { margin-top: 12px; }
/* « + Add a leader » en carte pointillée (191.3), téléphone et bureau */
.ld-add { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin-top: 12px; padding: 16px; text-align: left; font: inherit; color: var(--text); background: transparent; border: 1.5px dashed var(--accent-line); border-radius: 16px; cursor: pointer; }
.ld-add:hover { background: var(--accent-soft); border-color: var(--accent); }
.ld-add-plus { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--on-brand, #fff); background: var(--accent); }
.ld-add b { display: block; color: var(--accent); font-size: var(--fs-4); font-weight: 600; }
.ld-add small { display: block; color: var(--text-3); font-size: var(--fs-2); margin-top: 2px; }
@media (max-width: 760px) { .ld-add { max-width: none; } }
.lr-rename { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: text; text-decoration: underline dotted transparent; text-underline-offset: 4px; }
.lr-rename:hover, .lr-rename:focus-visible { text-decoration-color: var(--text-3); outline: none; }
.lr-input { width: 220px; padding: 6px 12px; font-weight: 500; }
.copy-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: -6px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--text-3); cursor: pointer; flex: none; }   /* copier l'adresse (54.2) */
.copy-btn:hover { color: var(--text); background: var(--surface-2); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn.is-copied { color: var(--accent); }
.copy-buf { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.row-actions { display: flex; gap: 8px; margin-left: auto; }
.leader-edit { max-width: 760px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
.leader-edit .row-actions { margin-left: 0; margin-top: 12px; }
/* Interrupteur des notifications (33.1) */
.switch-row { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 6px 0 8px; }
.switch { appearance: none; width: 42px; height: 24px; border-radius: var(--r-3); background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: left .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { left: 21px; background: var(--accent-ink); }
.switch-state { color: var(--text-2); font-size: var(--fs-3); }
.paid-tag { margin-left: 12px; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 32px 0 4px; max-width: 1032px; }

/* Abonnement (É8) : cartes des forfaits avec prix par mois (36.3), historique des paiements */
.sub-status { font-size: var(--fs-4); margin: 0 0 6px; }
.founder-line { color: var(--text-2); margin: 0 0 6px; }
.founder-tag { background: var(--accent-soft); color: var(--accent); border-radius: var(--r-1); padding: 2px 8px; font-size: var(--fs-2); font-weight: 500; }
.plans-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 12px; }   /* toute la largeur, comme le titre et le texte (89.5 : était 900 px, page asymétrique) */
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.plan-card { cursor: pointer; }   /* même format pour les trois cartes, « Best value » reste une étiquette (48.8) */
.plan-card.selected { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }   /* forfait choisi depuis l'accueil (48.6) */
/* Prix fondateurs façon TradingView (37.1) : pastille de rabais, vrai prix barré, montant économisé */
.pc-tags { display: flex; gap: 8px; min-height: 24px; }
.pc-off { background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-2); padding: 2px 8px; border-radius: var(--r-1); }
.pc-best { border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: var(--fs-1); padding: 1px 8px; border-radius: var(--r-1); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-name { font-size: var(--fs-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.pc-prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pc-price { font-size: var(--fs-7); font-weight: 600; }   /* comme le prix des forfaits de l'accueil (177) */
.pc-cur { font-size: var(--fs-3); font-weight: 500; color: var(--text-2); margin-left: 4px; }   /* « USDC » de l'accueil */
.pc-list { color: var(--text-2); font-size: var(--fs-5); text-decoration-thickness: 1px; }   /* barré lisible (177) */
.pc-save { color: var(--accent); font-size: var(--fs-3); font-weight: 500; margin-top: -4px; }
.pc-per { color: var(--text-3); font-size: var(--fs-3); min-height: 22px; margin-bottom: 8px; }
.plan-card .btn { margin-top: auto; }
.pay-table { max-width: 900px; }
/* Comparateur « What It Takes to Cover Your Plan » (série 101, présentation P1 de la série 103, seuil d'abord en 207.13) */
.pb-h { margin-top: 32px; font-size: var(--fs-6); letter-spacing: -0.3px; }
.pb-pills { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.pb-pill { padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-3); cursor: pointer; }
.pb-pill.on { background: var(--text); color: var(--bg); font-weight: 600; }   /* sobre (13/10) : plus de dégradé */
.pb-chip { display: inline-block; font-size: var(--fs-3); white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }   /* délai en texte simple (13/10) */
.pb-none { color: var(--text-3); }
.pb1-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pb1-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: none; }   /* sans fond (123) */
.pb1-card.best { border-color: var(--line-strong); }
.pb-best { font-size: var(--fs-1); color: var(--text-3); }
.pb1-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pb1-top b { font-size: var(--fs-4); }
.pb1-top .num { color: var(--text-2); }
.pb1-big { font-size: var(--fs-6); font-weight: 500; line-height: 1.2; color: var(--text); }   /* comme le prix des forfaits (.pc-price num) ; rendement nécessaire (207.13), plus en majuscules */
.pb1-sub { color: var(--text-3); font-size: var(--fs-2); }
.pb1-sim { color: var(--text-2); font-size: var(--fs-3); margin: 8px 0 12px; }   /* simulation passée à Balanced, sous le seuil (207.13) */
.pb-risk { margin: 4px 0 16px; color: var(--text-2); }   /* perte possible, taille normale, juste sous le titre (207.13) */
.pb1-lv { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pb1-lv li { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: var(--fs-3); }
.pb-note { margin: 20px 0 0; max-width: 900px; }
.pb-bonus-card { display: flex; align-items: center; gap: 16px; margin: 20px 0 8px; padding: 20px 20px; border: 1px solid transparent; border-radius: var(--r-3);   /* encadré rétabli (123.5) */
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand-g1), var(--brand-g2)) border-box; }
.pb-bonus-card p { margin: 0; font-size: var(--fs-4); font-weight: 600; }
.pb-bonus-tag { flex: none; padding: 4px 12px; border-radius: var(--r-1); background: linear-gradient(135deg, var(--brand-g1), var(--brand-g2)); color: var(--on-brand); font-weight: 600; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 760px) { .pb1-row { grid-template-columns: 1fr; } .pb-pill { padding: 8px 12px; font-size: var(--fs-2); } }
/* « Still Not Convinced? » (177.5, maquette A) : deux factures, les autres outils puis le forfait du client (mauve = payant) */
.nc-lead { margin: 4px 0 16px; color: var(--text-2); max-width: 760px; }
.nc-picks { display: flex; flex-wrap: wrap; gap: 0 12px; }
.nc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nc-bill { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.nc-bill.us { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.nc-bill p { margin: 0; }
.nc-lab { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.nc-big { font-size: var(--fs-7); font-weight: 600; line-height: 1.2; }
.nc-sub { font-size: var(--fs-3); color: var(--text-2); }
.nc-bill .nc-log-t, .nc-bill .nc-us-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.nc-log { list-style: none; margin: 4px 0; padding: 0; font-size: var(--fs-3); }
.nc-log li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.nc-sum { margin: 16px 0 0; font-size: var(--fs-4); }
@media (max-width: 760px) { .nc-row { grid-template-columns: 1fr; } }
.pos-table tr.skip-row td, .pos-table tr.skip-row td.gain, .pos-table tr.skip-row td.loss { color: var(--text-3); }   /* ouverture non copiée (64.4) */
.pos-table .why { display: block; font-size: var(--fs-1); white-space: normal; max-width: 240px; }
/* Profil (É9) : lignes libellé / valeur, zone de suppression */
.profile h3 { margin-top: 32px; } .profile .sub, .settings-page .sub { max-width: none; }   /* Profil et Settings : le sous-texte suit la ligne (27/10, 219.2–219.3) */
.pf-row { display: flex; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); max-width: 760px; flex-wrap: wrap; }
.pf-label { width: 120px; flex-shrink: 0; color: var(--text-3); font-size: var(--fs-3); }
.pf-value { flex: 1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pf-value .num { overflow-wrap: anywhere; }   /* adresse complète du wallet : coupée sur téléphone plutôt que de déborder */
.pf-inline { margin-left: auto; }
.pf-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-stack { display: flex; flex-direction: column; gap: 2px; }
.pf-addr { display: flex; align-items: center; }
.pf-addr .copy-btn { width: 22px; height: 22px; margin-left: 2px; }
.pf-muted { color: var(--text-3); }
.pf-warn { color: var(--mark); }
.pf-note { max-width: 760px; }
.wallets-block { margin: 16px 0 12px; display: grid; gap: 8px; justify-items: start; }   /* wallets du même Telegram (124) */
.wallets-block p { margin: 0; }
.wallets-help { max-width: 760px; }
.wallets-help ol { margin: 6px 0 12px; padding-left: 24px; display: grid; gap: 4px; }
.pf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.danger-zone h3 { color: var(--loss-text); }
.del-box { max-width: 760px; margin-top: 16px; }
.del-box p { margin: 0 0 8px; }
.del-list { margin: 6px 0 12px; padding-left: 24px; color: var(--text-2); }
.del-list li { padding: 4px 0; }
.msg.err .del-list { color: var(--loss-text); }

/* Style épuré (retenu, décision 21.1) : pas de cases, une ligne de tête, une rangée de chiffres */
/* Pages du compte (74.0) : même échelle que les Docs — titre de page 36 px, titres de section 24 px (était 28 / 16) */
.clean h2, .clean h1 { font-size: var(--fs-7); font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; }   /* h1 : page Telegram (149) */
.clean h3 { font-size: var(--fs-6); font-weight: 600; letter-spacing: -0.3px; margin: 32px 0 12px; }
.clean .dash-sec > h3:first-child, .clean > h3:first-child { margin-top: 0; }
.step-line { color: var(--accent); font-size: var(--fs-3); margin: 8px 0 6px; }
.field-clean { max-width: 760px; margin-bottom: 20px; }
.field-clean label { display: block; font-size: var(--fs-2); color: var(--text-3); margin-bottom: 4px; }
.field-clean .input { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 12px 0; font-size: var(--fs-4); }
.field-clean .input:focus { border-bottom-color: var(--accent); }
/* ✕ dans le champ d'adresse du leader (44.1) */
/* Ligne d'état du client connecté sur l'accueil (45.2, option A) */
.status-band { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-3); color: var(--text-2); }
.status-band b { color: var(--text); font-weight: 500; }
/* My dashboard : style principal, comme Connect wallet qu'il remplace (69.6) — l'ancienne classe btn-btc (46.4, orange puis mauve) est retirée */
.btn-pause, .btn-pause:hover { background: var(--pause-bg); border-color: var(--pause-line); color: var(--pause-ink); }   /* Pause copy en orange pâle (69.5) */
.status-band a { color: var(--accent); }
.clean .sub-line { margin: -6px 0 8px; }   /* ligne d'état sous le titre de la page Abonnement (89.5) */
a.tool { text-decoration: none; }
/* Leader proposé à l'inscription (143.2–143.4) : n° 5 du rapport mensuel pour le niveau choisi */
.suggest { border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px 20px; margin: 0 0 20px; background: var(--surface-2); }
.suggest-title { margin: 0 0 4px; font-weight: 600; }
.suggest-addr { margin: 0 0 12px; color: var(--text-2); font-size: var(--fs-2); overflow-wrap: anywhere; }
.suggest .small { margin-top: 8px; }
/* Bulle « Feedback » du tableau de bord (140) : point rouge = réponse de l'équipe non lue */
.fb .tool { position: relative; }
.fb-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--loss); }
.fb-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow); }   /* comme le menu de langue */
.fb-intro { margin: 0; color: var(--text-3); font-size: var(--fs-2); line-height: 1.4; }
.fb-panel input, .fb-panel textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-3); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 12px; resize: vertical; }
.fb-panel .btn { justify-self: end; }
.fb-panel[hidden], .fb-list[hidden], .fb-renew[hidden] { display: none; }
.fb-renew { font-size: var(--fs-2); line-height: 1.4; font-weight: 600; border-left: 2px solid var(--loss); padding-left: 8px; }   /* rappel de renouvellement (148.2), comme une réponse de l'équipe */
.fb-status { margin: 0; }
.fb-status:empty { display: none; }
.fb-list { max-height: 240px; overflow-y: auto; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.fb-msg { display: grid; gap: 2px; font-size: var(--fs-2); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-msg.is-team { border-left: 2px solid var(--loss); padding-left: 8px; }   /* rouge, comme le point de la bulle (15/10) */
.fb-who { color: var(--text-3); font-size: var(--fs-1); }
.fb-text { font-weight: 600; }   /* texte du message en gras, distinct de la ligne nom · date (15/10) */   /* roue des réglages (46.6) */
.plan-badge { display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 12px; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--r-2); text-decoration: none; }   /* même hauteur que les boutons à icône (46.7) */
/* Lien « Advanced » de l'en-tête (152.1) : encadré comme la pastille du forfait, en gras, contour rouge (demande du fondateur, 15/10) */
.adv-badge { --lvl: var(--adv); display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 12px; border: 1px solid var(--lvl); color: var(--lvl); border-radius: var(--r-2); text-decoration: none; }   /* niveau actif : format de « Subscribed » (152.11, 152.12) ; RISKY et ADVANCED rouge pâle */
.adv-badge.is-prudent { --lvl: var(--lvl-prudent); }
.adv-badge.is-equilibre { --lvl: var(--lvl-balanced); }
.adv-badge:hover, .adv-badge[aria-current="page"] { background: color-mix(in srgb, var(--lvl) 12%, transparent); text-decoration: none; }
.plan-badge.is-sub { border-color: var(--accent-2); color: var(--accent-2); }
.plan-badge.is-expired { border-color: var(--mark); color: var(--mark); }   /* modificateurs préfixés : « sub » est déjà la classe des sous-titres */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 40px; }
.input-clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--text-3); font-size: var(--fs-5); line-height: 1; padding: 6px 8px; cursor: pointer; }
.input-clear:hover { color: var(--text); }
.fc { margin-top: 20px; }
.fc-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.fc-equity { font-size: var(--fs-6); font-weight: 500; }
.fc-label { color: var(--text-3); font-size: var(--fs-1); margin: 0 0 2px; }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }   /* « Account value » et 90D | 30D (214) */
.fc-period { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.fc-period button { border: 0; background: transparent; color: var(--text-2); padding: 2px 10px; border-radius: 999px; font: inherit; font-size: var(--fs-1); cursor: pointer; }
.fc-period button[aria-pressed="true"] { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
h2 > .copy-btn, h2 > .addr-wrap > .copy-btn { margin-left: 8px; }   /* page d'un leader : icône espacée du nom et de l'adresse (214.7) */
.row-msg > a.btn { white-space: nowrap; }   /* « Link Telegram » sur une ligne à côté du X (213.3) */
.fc .msg + .fc-label { margin-top: 20px; }
.fc-line { color: var(--text-2); font-size: var(--fs-3); margin: 12px 0 0; }
.fc-line b { color: var(--text); font-weight: 500; }
.fc-pnl { font-size: var(--fs-4); }
.fc-row { display: flex; gap: 0; margin-top: 16px; }
.fc-cell { flex: 1; padding: 2px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.fc-cell:first-child { padding-left: 0; border-left: 0; }
.fc-cell span { color: var(--text-3); font-size: var(--fs-1); }
.fc-cell span, .fc-label { text-transform: uppercase; letter-spacing: 0.04em; }   /* intitulés des fiches et récapitulatifs comme les titres des tableaux (80.0, généralisé 80.4) */
.fc-cell b { font-size: var(--fs-4); font-weight: 500; }

/* 41.1 (retenu) : chaque section de l'accueil sur son propre dégradé, en pleine largeur (fond qui déborde du conteneur
   centré). Retour au fond uni : retirer la classe « bands » du <body> d'index.html ; ces règles ne s'appliquent plus. */
.bands { overflow-x: clip; }
.bands .band { position: relative; z-index: 0; padding-top: 64px; padding-bottom: 64px; }
.bands .band::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; }
.bands .hero { max-width: none; }
.bands .hero > * { max-width: 760px; }
.bands .b1::before { background: var(--band-1); }
.bands .b2::before { background: var(--band-2); }
.bands .b3::before { background: var(--band-3); }
.bands .b4::before { background: var(--band-4); }
.bands .b5::before { background: var(--band-5); }
.bands footer { margin-top: 0; }

/* Pied */
footer { border-top: 1px solid var(--line); margin-top: 32px; padding: 24px 0 48px; color: var(--text-3); font-size: var(--fs-3); display: flex; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--text-2); }

/* Téléphone : lisible, une colonne (14.4 : soigné après l'ordinateur) */
@media (max-width: 760px) {
  .hero h1 { font-size: var(--fs-7); }
  /* Téléphone (157.5) : deux lignes — logo et petites icônes, puis niveau, forfait et bouton. .top-right s'efface
     (display: contents) pour que ses éléments se rangent dans l'en-tête ; sous 360 px, les icônes passent sous le logo. */
  .top { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 4px; padding: 12px 0; }
  .top::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* fond plein : le flou recalculé sous les animations du tableau de bord faisait trembler l'en-tête (22/10) */
  .top-right { display: contents; }
  .menu { left: 0; right: auto; }   /* menu de langue ouvert vers la droite : le bouton est à gauche sur téléphone (58.2) */
  .top-right .fb { position: static; }   /* le panneau se place par rapport à l'en-tête, qui reste collant (sticky = repère) */
  .fb-panel { left: 0; right: 0; top: calc(100% + 6px); width: auto; }   /* bulle (140) : panneau sous l'en-tête, sur toute la largeur */
  .top-right::before { content: ""; order: 1; flex-basis: 100%; height: 0; }   /* saut de ligne avant les pastilles (157.4) */
  .top-right .adv-badge, .top-right .plan-badge, .top-right .btn { order: 2; }   /* bouton (Connect wallet, Dashboard) en 2e ligne avec les pastilles (157.7) */
  .top-right .tool, .top-right .plan-badge { flex-shrink: 0; white-space: nowrap; }
  .top-right .btn { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 12px; font-size: var(--fs-2); white-space: nowrap; }   /* même hauteur que les pastilles (157.7) */
  .tools { gap: 4px; }
  .tool { width: 28px; height: 28px; border-radius: var(--r-1); }
  .tool svg { width: 16px; height: 16px; }
  .plan-badge { height: 32px; padding: 0 8px; font-size: var(--fs-1); }
  .adv-badge { height: 32px; padding: 0 8px; font-size: var(--fs-1); flex-shrink: 0; }
  .brand { font-size: var(--fs-4); margin-right: auto; }
  .grid3, .price, .plans, .levels, .plans-row { grid-template-columns: 1fr; }
  .grid3.grid4 { grid-template-columns: 1fr; }
  .included ul { grid-template-columns: 1fr; }
  .fc-row { flex-wrap: wrap; gap: 12px; }
  .pf-label { width: 100%; }
  .card .line { min-height: 0; }
  /* Tableaux en cartes (série 64) : une carte par ligne, première case en titre, puis « LIBELLÉ valeur » sur deux colonnes. */
  .pos-table, .pos-table tbody { display: block; max-width: none; }
  .pos-table thead { display: none; }
  .pos-table tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
  .pos-table tr:has(td.mkt.long) { border-left: 3px solid var(--gain); }
  .pos-table tr:has(td.mkt.short) { border-left: 3px solid var(--loss); }
  .pos-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; padding: 0; border: 0; white-space: normal; text-align: right; }
  .pos-table td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; text-align: left; }
  .pos-table td:first-child { grid-column: 1 / -1; justify-content: flex-start; padding-right: 32px; font-size: var(--fs-3); }
  .pos-table td:first-child::before, .pos-table td.x-cell::before { content: none; }
  .pos-table td.mkt { border-left: 0; padding-left: 0; }
  .pos-table td.x-cell { position: absolute; top: 8px; right: 8px; }
  .pos-table td { flex-wrap: wrap; }
  .pos-table .why { flex-basis: 100%; max-width: none; text-align: right; }
  .pos-table td.x-cell:empty { display: none; }
  .pos-table tr.grp { display: block; padding: 16px 0 8px; margin: 0; border: 0; border-radius: 0; background: none; }
  .pos-table .grp td { display: block; padding: 0; border: 0; text-align: left; }
}

/* Carte de remerciement après un paiement (46.5) */
.cheer { position: relative; overflow: hidden; display: flex; gap: 20px; align-items: center; padding: 20px 24px; margin: 12px 0 20px; max-width: 760px; border: 1px solid var(--accent); border-radius: var(--r-3); background: linear-gradient(135deg, rgba(45, 212, 191, .16), rgba(45, 212, 191, .03)); animation: cheer-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.cheer-text b { display: block; font-size: var(--fs-4); font-weight: 600; margin-bottom: 4px; }
.cheer-text p { margin: 0; color: var(--text-2); }
.cheer-text .cheer-paid { font-weight: 600; color: var(--text); margin-bottom: 2px; }   /* forfait et montant payés (198.1) */
.plan-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* forfait en cours (198.2) */
.pc-current { background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-2); padding: 2px 8px; border-radius: var(--r-1); }
.cheer-check { width: 46px; height: 46px; flex-shrink: 0; }
.cheer-check circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 160; stroke-dashoffset: 160; animation: cheer-draw .6s ease-out .15s forwards; }
.cheer-check path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cheer-draw .35s ease-out .7s forwards; }
.cheer-confetti { position: absolute; inset: 0; pointer-events: none; }
.cheer-confetti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; background: var(--accent); opacity: 0; animation: cheer-fall 1.9s ease-in forwards; }
.cheer-confetti i:nth-child(even) { background: var(--accent-2); }
.cheer-confetti i:nth-child(3n) { width: 5px; height: 5px; border-radius: 50%; background: var(--text); }
.cheer-confetti i:nth-child(1) { left: 4%; animation-delay: 0.30s; }\n.cheer-confetti i:nth-child(2) { left: 11%; animation-delay: 0.42s; }\n.cheer-confetti i:nth-child(3) { left: 18%; animation-delay: 0.36s; }\n.cheer-confetti i:nth-child(4) { left: 26%; animation-delay: 0.50s; }\n.cheer-confetti i:nth-child(5) { left: 33%; animation-delay: 0.33s; }\n.cheer-confetti i:nth-child(6) { left: 41%; animation-delay: 0.46s; }\n.cheer-confetti i:nth-child(7) { left: 49%; animation-delay: 0.39s; }\n.cheer-confetti i:nth-child(8) { left: 57%; animation-delay: 0.55s; }\n.cheer-confetti i:nth-child(9) { left: 64%; animation-delay: 0.31s; }\n.cheer-confetti i:nth-child(10) { left: 72%; animation-delay: 0.48s; }\n.cheer-confetti i:nth-child(11) { left: 80%; animation-delay: 0.37s; }\n.cheer-confetti i:nth-child(12) { left: 87%; animation-delay: 0.52s; }\n.cheer-confetti i:nth-child(13) { left: 93%; animation-delay: 0.44s; }\n.cheer-confetti i:nth-child(14) { left: 97%; animation-delay: 0.34s; }
@keyframes cheer-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cheer-draw { to { stroke-dashoffset: 0; } }
@keyframes cheer-fall { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(120px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  .cheer, .cheer-check circle, .cheer-check path, .cheer-confetti i { animation: none; }
  .cheer-check circle, .cheer-check path { stroke-dashoffset: 0; }
  .cheer-confetti { display: none; }
}

/* Titre « Get Access to Monthly Report » (48.5) : dégradé turquoise → orange qui glisse lentement */
@keyframes glow-shift { to { background-position: -200% 0; } }
/* Rapport mensuel sur le tableau de bord (48.5) */
/* Carte « Monthly report » du tableau de bord (séries 75, 76) : argument de vente animé — bordure dégradée bleu ciel → mauve
   qui tourne, halo, reflet, titre en dégradé, bouton qui respire ; à droite le contenu du rapport en trois lignes (76.2) ;
   bouton « − » qui réduit la carte à un seul bouton jusqu'à la prochaine édition (76.3). Tout s'arrête si le visiteur
   demande moins de mouvement. */
@property --rc-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.rc-hero { position: relative; border-radius: var(--r-3); padding: 1.5px; background: conic-gradient(from var(--rc-angle), var(--accent), var(--accent-2) 28%, transparent 52%, transparent 78%, var(--accent)); box-shadow: 0 22px 60px -28px color-mix(in srgb, var(--accent) 55%, transparent); animation: rc-spin 7s linear infinite; }
.rc-inner { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px 32px; border-radius: var(--r-3); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 11%, var(--surface)) 0%, var(--surface) 58%); }
.rc-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #FFFFFF 7%, transparent) 50%, transparent 62%); transform: translateX(-110%); animation: rc-sweep 7s ease-in-out 1.5s infinite; }
.rc-copy { min-width: 0; }
.rc-kicker { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.clean .rc-title { margin: 16px 0 8px; font-size: var(--fs-7); font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; background: linear-gradient(90deg, var(--text) 0%, var(--text) 45%, var(--accent) 70%, var(--accent-2) 85%, var(--text) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glow-shift 9s linear infinite; }
.rc-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rc-next { margin: 0; font-size: var(--fs-2); color: var(--text-2); }   /* « nouveau chaque 1er du mois » (178.1) */
.rc-next + .rc-actions { margin-top: 20px; }
.rc-title + .rc-actions { margin-top: 24px; }   /* bouton directement sous le titre, sans texte (76.5, 76.7) */
.rc-cta { animation: rc-pulse 2.8s ease-in-out infinite; }
.rc-cta:hover { text-decoration: none; }
.rc-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rc-list li { position: relative; padding-left: 24px; color: var(--text); font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.2px; opacity: 0; transform: translateX(10px); animation: rc-item-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.rc-list li:nth-child(2) { animation-delay: 0.15s; } .rc-list li:nth-child(3) { animation-delay: 0.3s; }
.rc-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: var(--r-1); background: linear-gradient(135deg, var(--brand-g1), var(--brand-g2)); }
.rc-shrink { position: absolute; top: 12px; right: 12px; z-index: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); color: var(--text-3); font: inherit; font-size: var(--fs-5); line-height: 1; cursor: pointer; }
.rc-shrink:hover { color: var(--text); border-color: var(--line-strong); }
.rc-closing { animation: rc-close 0.35s ease-in forwards; }
/* Carte réduite : un seul bouton, même bordure dégradée qui tourne (76.3) */
.rc-mini { display: inline-flex; padding: 1.5px; border-radius: 999px; background: conic-gradient(from var(--rc-angle), var(--accent), var(--accent-2) 30%, transparent 55%, transparent 78%, var(--accent)); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent); animation: rc-spin 6s linear infinite, rc-mini-in 0.4s ease-out; }
.rc-mini:hover { text-decoration: none; }
.rc-mini-in { display: inline-flex; align-items: center; gap: 4px; padding: 12px 24px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; }
.rc-mini:hover .rc-mini-in { background: var(--surface-2); }
@keyframes rc-spin { to { --rc-angle: 360deg; } }
@keyframes rc-sweep { 0%, 70% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes rc-item-in { to { opacity: 1; transform: none; } }
@keyframes rc-pulse { 0%, 100% { box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent); } 50% { box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--accent) 95%, transparent); } }
@keyframes rc-close { to { opacity: 0; transform: scale(0.96) translateY(-8px); } }
@keyframes rc-mini-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 760px) {
  .rc-inner { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .clean .rc-title { font-size: var(--fs-6); padding-right: 32px; }
  .rc-kicker { display: inline-block; font-size: var(--fs-1); line-height: 1.5; margin-right: 32px; }
  .rc-list li { font-size: var(--fs-4); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-hero, .rc-inner::after, .clean .rc-title, .rc-cta, .rc-mini { animation: none; }
  .rc-list li { opacity: 1; transform: none; animation: none; }
}
/* Bandeau animé de la page Abonnement (80.2, « la goutte », proposition G de /dev/surf_mock ; remplace le sceau + fusée de 48.7) :
   le sceau tombe dans une eau calme, éclaboussures, trois anneaux, puis il flotte. Couleurs du logo (69.1), sans fond ni texte (48.8). */
.sub-hero { position: relative; overflow: hidden; padding: 6px 0 0; margin: 0 0 12px; text-align: center; }
.sh-art { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 6px; overflow: visible; }
.sh-s1 { stop-color: var(--brand-g1); } .sh-s2 { stop-color: var(--brand-g2); }
.sh-check { fill: none; stroke: var(--accent-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sh-calm { stroke: var(--brand-g1); stroke-width: 1; stroke-dasharray: 6 10; opacity: .2; animation: sh-calm 6s linear infinite; }
@keyframes sh-calm { to { stroke-dashoffset: -64; } }
.sh-ring { fill: none; stroke-width: 1.5; opacity: 0; animation: sh-ring 5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.sh-r2 { animation-delay: .35s; } .sh-r3 { animation-delay: .7s; }
@keyframes sh-ring { 0%, 20% { opacity: 0; transform: scale(1); } 21% { opacity: .75; } 70%, 100% { opacity: 0; transform: scale(9, 5); } }
.sh-splash { fill: var(--brand-g1); opacity: 0; animation: sh-splash 5s ease-out infinite; transform-box: view-box; }
.sh-p1 { --dx: -22px; --dy: -24px; } .sh-p2 { --dx: -12px; --dy: -34px; } .sh-p3 { --dx: 0px; --dy: -38px; } .sh-p4 { --dx: 12px; --dy: -34px; } .sh-p5 { --dx: 22px; --dy: -24px; } .sh-p6 { --dx: -30px; --dy: -12px; } .sh-p7 { --dx: 30px; --dy: -12px; }
@keyframes sh-splash { 0%, 20% { opacity: 0; transform: translate(0, 0); } 21% { opacity: .9; } 48%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.sh-fall { animation: sh-fall 5s ease-in-out infinite; }
@keyframes sh-fall { 0% { transform: translateY(-100px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, 1); } 3% { opacity: 1; } 20% { transform: translateY(0); } 25% { transform: translateY(5px); } 31% { transform: translateY(0); } 86% { transform: translateY(0); opacity: 1; } 93%, 100% { transform: translateY(0); opacity: 0; } }
.sh-float { animation: sh-float 5s ease-in-out infinite; }
@keyframes sh-float { 0%, 31%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } 59% { transform: translateY(0); } 73% { transform: translateY(3px); } 86% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sh-calm, .sh-ring, .sh-splash, .sh-fall, .sh-float { animation: none; } }   /* sceau immobile sur l'eau, sans anneaux */
/* Cartes des leaders suivis sur téléphone (série 189) : ici, après les tableaux en cartes (.pos-table) qu'elles précisent. */
@media (max-width: 760px) {   /* une carte par leader (189) : nom en avant, équité et type en haut à droite, six chiffres centrés sur 3 colonnes, ✏️ Change ✕ Remove en pied de carte */
  .ld-table tr { grid-template-columns: auto auto auto; justify-content: space-between; gap: 12px 8px; padding: 16px; }   /* colonnes à la taille du contenu */
  .ld-table td.ld-lead { display: block; padding-right: 0; margin-bottom: 4px; text-align: left; }
  .ld-table .ld-who .lr-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
  .ld-table .ld-who .lr-name::after { content: "✎"; margin-left: 8px; font-size: var(--fs-3); font-weight: 400; color: var(--text-3); }   /* le nom se renomme */
  .ld-table .ld-who .dot { margin-right: 10px; }
  .ld-addr { padding-left: 0; margin-top: 4px; }
  .ld-table .eq { position: absolute; top: 16px; right: 16px; margin: 0; }
  .ld-kind { margin: 0; padding-left: 0; }
  .ld-kind .tag { position: absolute; top: 50px; right: 16px; }   /* type sous l'équité */
  .ld-kind .ld-coins { display: none; }   /* coins retirés sur téléphone */
  .ld-table .lr-dormant { padding-left: 0; }
  .ld-table td.num { flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
  .ld-table td.num::before { font-weight: 400; letter-spacing: 0.02em; text-align: center; white-space: pre; line-height: 1.3; }
  /* Ordre du téléphone : PnL sous Profit Factor (au bureau, Open At Once passe avant PnL) */
  .ld-table td.ld-lead { order: 0; } .ld-table td.num { order: 1; } .ld-table td.ld-ret { order: 2; } .ld-table td.num:has(+ .ld-ret) { order: 3; } .ld-table td.x-cell { order: 4; }
  .ld-table td.ld-none { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
  .ld-table td.ld-none::before { content: none; }
  .ld-table td.x-cell { position: static; display: block; grid-column: 1 / -1; width: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .ld-table .row-actions { width: 100%; gap: 12px; }
  .ld-btn { flex: 1; width: auto; height: auto; padding: 10px; border-radius: 999px; font-size: var(--fs-3); font-weight: 600; white-space: nowrap; }
  .ld-btn-t { display: inline; }
  .ld-table tr.ld-wide { display: block; }
  .ld-table tr.ld-wide td { display: block; text-align: left; }
}
/* Agent IA du Profil (193) : carte du parcours, code montré une fois, état « Connected » */
.agent-card h3 { margin-top: 0; }
.agent-card { max-width: 560px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.agent-list { list-style: none; padding: 0; margin: 8px 0 12px; } .agent-list li { position: relative; padding: 4px 0 4px 24px; }
.agent-list li::before { position: absolute; left: 0; font-weight: 700; } .agent-list .ok::before { content: "✓"; color: var(--gain); } .agent-list .no::before { content: "✕"; color: var(--loss-text); }
.agent-code { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--accent-line); border-radius: var(--r-2); background: var(--accent-soft); }
.agent-code code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-2); }
.agent-warn { color: var(--loss-text); font-size: var(--fs-2); }
.agent-choice .agent-list { margin: 0 0 8px 24px; }   /* point 125 : ce que permet chaque droit, sous son choix */
.agent-snip { white-space: pre-wrap; font-size: var(--fs-2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); margin: 0 0 8px; }
.agent-on { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 600; color: var(--gain); }
.dot-on { width: 9px; height: 9px; border-radius: 50%; background: var(--gain); }

.level-notes { margin: 20px 0 24px; padding-left: 20px; max-width: none; } .level-notes li { margin: 4px 0; max-width: none; } .level-notes li:empty { display: none; }   /* bas du choix du niveau en liste (219.1) */
.export-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .export-row .paid-tag { margin: 0; }   /* History (219.2) */
.oo-table th:nth-child(1) { width: 15%; } .oo-table th:nth-child(2), .oo-table th:nth-child(3), .oo-table th:nth-child(5) { width: 11%; } .oo-table th:nth-child(4) { width: 14%; } .oo-table th:nth-child(6) { width: 22%; }   /* Open Orders : colonnes régulières (27/10) */
@media (max-width: 760px) { .oo-table td:nth-child(6) { grid-column: 1 / -1; } }   /* téléphone : TP/SL sur toute la largeur de la carte */
/* Cartes du téléphone (série 191) : Positions (thème A) et ordres (thème C). Bureau : cases du téléphone cachées. */
.btn-x-t, .pos-cards td.tpsl-m, .pos-cards td.from .dot { display: none; }   /* téléphone seulement (191.1) */
.pos-cards .unit { font-size: inherit; color: inherit; }

@media (max-width: 760px) {
  /* Positions (191.1, thème A, comme les cartes des leaders) : coin et « Long 10x », PnL en pastille en haut à droite, leader
     dessous, six chiffres centrés (TP et SL réunis), ✕ Close en pied de carte. */
  .pos-cards tr:not(.grp) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; padding: 16px; }
  .pos-cards td.mkt { order: 0; align-items: center; padding-right: 96px; }
  .pos-cards td.mkt b { color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
  .pos-cards .mkt .lev { margin-left: 10px; font-family: var(--font); font-size: var(--fs-1); font-weight: 600; border-radius: 999px; padding: 2px 8px; }
  .pos-cards .mkt .lev::before { content: attr(data-side) " "; }
  .pos-cards .mkt.long .lev { color: var(--gain); background: var(--gain-soft); }
  .pos-cards .mkt.short .lev { color: var(--loss-text); background: color-mix(in srgb, var(--loss) 12%, transparent); }
  .pos-cards td.from { order: 1; grid-column: 1 / -1; justify-content: flex-start; align-items: center; margin-top: -10px; font-size: var(--fs-2); }
  .pos-cards td.from::before { content: none; }
  .pos-cards td.from .dot { display: inline-block; margin-right: 8px; }
  .pos-cards td.pnl { position: absolute; top: 14px; right: 16px; padding: 3px 10px; border-radius: 6px; font-size: var(--fs-2); font-weight: 700; color: var(--on-brand); background: var(--text-3); }
  .pos-cards td.pnl.gain { background: var(--gain); } .pos-cards td.pnl.loss { background: var(--loss); }
  .pos-cards td.pnl::before { content: none; }
  .pos-cards td.pnl:not(.gain):not(.loss) { display: none; }   /* pas de PnL (ordre limite en attente) : pas de pastille */
  .pos-cards tr.skip-row td.num { white-space: normal; }   /* « Waiting at 31.2 » passe à la ligne */
  .pos-cards td.tp, .pos-cards td.sl { display: none; }
  .pos-cards td.num:not(.pnl) { order: 2; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 2px; text-align: center; font-size: 16px; font-weight: 600; white-space: nowrap; }
  .pos-cards td.num:not(.pnl)::before { font-weight: 400; text-align: center; }
  .pos-cards td.num.tpsl-m { display: flex; white-space: normal; }   /* « 118,000 · 140,140 » passe sur deux lignes si besoin */
  .pos-cards .unit { font-size: var(--fs-1); font-weight: 400; color: var(--text-3); }
  .pos-cards td.x-cell { order: 3; position: static; display: block; grid-column: 1 / -1; width: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .pos-cards td.x-cell:empty { display: none; }
  .pos-cards .btn-x { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto; padding: 10px; border-radius: 999px; font: inherit; font-size: var(--fs-3); font-weight: 600; }
  .pos-cards .btn-x-t { display: inline; }
  /* Ordres (191.2, thème C) : coin, sens, action et PnL sur une ligne ; heure · valeur @ prix · leader (lien) dessous. */
  .ord-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 12px 16px; }
  .ord-cards tr::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .ord-cards td { display: inline; padding: 0; text-align: left; font-size: var(--fs-2); color: var(--text-3); }
  .ord-cards td::before { content: none; }
  .ord-cards td.o-coin { order: 1; font-size: 16px; color: var(--text); }
  .ord-cards td.o-side { order: 2; font-size: var(--fs-1); font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--surface-2); }
  .ord-cards td.o-side.gain { color: var(--gain); background: var(--gain-soft); }
  .ord-cards td.o-side.loss { color: var(--loss-text); background: color-mix(in srgb, var(--loss) 12%, transparent); }
  .ord-cards td.o-act { display: contents; }
  .ord-cards .act { order: 3; font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 8px; }
  .ord-cards td.pnl { order: 4; margin-left: auto; font-size: 16px; font-weight: 700; color: var(--text); }
  .ord-cards td.pnl.gain { color: var(--gain); } .ord-cards td.pnl.loss { color: var(--loss-text); }
  .ord-cards td.o-time { order: 6; }
  .ord-cards td.o-val { order: 7; } .ord-cards td.o-val::before { content: "· "; }
  .ord-cards td.o-px { order: 8; } .ord-cards td.o-px::before { content: "@ "; }
  .ord-cards .why { order: 9; display: inline; flex-basis: auto; max-width: none; text-align: left; } .ord-cards .why::before { content: "· "; }
  .ord-cards td.o-from { order: 10; } .ord-cards td.o-from::before { content: "· "; }
  .ord-cards td.o-from a { font-weight: 600; }
  .ord-cards tr:has(td.o-side.gain) { border-left: 3px solid var(--gain); }
  .ord-cards tr:has(td.o-side.loss) { border-left: 3px solid var(--loss); }
  .ord-cards td.o-time { padding-right: 0; font-size: var(--fs-2); }   /* pas le retrait de la première case des cartes */
  /* Ouverture sautée : grisée (bord, sens), sans valeur, prix ni PnL ; la raison prend leur place */
  .ord-cards tr.skip-row:has(td.o-side) { border-left-color: var(--line-strong); }
  .ord-cards tr.skip-row td.o-side { color: var(--text-3); background: var(--surface-2); }
  .ord-cards tr.skip-row td.o-val, .ord-cards tr.skip-row td.o-px { display: none; }
  .ord-cards tr.skip-row td.pnl { visibility: hidden; }
}
/* Pages Help, Terms, Privacy (48.9) */
.doc { max-width: 760px; padding: 32px 0 12px; }
.doc h1 { font-size: var(--fs-7); font-weight: 600; letter-spacing: -0.4px; margin: 0 0 8px; }
.doc .doc-lead { font-size: var(--fs-4); color: var(--text-2); margin: 0 0 20px; }
.doc h2 { font-size: var(--fs-5); margin: 32px 0 6px; }
.doc p, .doc li { color: var(--text-2); line-height: 1.6; }
.doc ul { padding-left: 24px; margin: 6px 0; }
.doc b { color: var(--text); font-weight: 600; }
.doc h3 { font-size: var(--fs-3); margin: 20px 0 4px; }
.manifesto h2 { font-size: var(--fs-5); font-weight: 600; letter-spacing: -0.2px; margin: 48px 0 12px; }   /* sous-titres comme Help : 40 → 22 → 16 px (150.8) */
.doc .doc-meta { font-size: var(--fs-2); color: var(--text-3); margin: -12px 0 20px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: var(--fs-3); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--text-2); line-height: 1.5; }
.doc th { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .doc table { display: block; overflow-x: auto; } }

/* Page Help (71.1) : catégories avec index, questions repliables (<details>), carte « Still Need Help? » vers Docs */
.help { padding: 32px 0 12px; }
.help-hero { max-width: 760px; margin-bottom: 40px; }
.eyebrow { color: var(--accent); font-size: var(--fs-2); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; }
.help-hero h1 { font-size: var(--fs-7); font-weight: 600; letter-spacing: -0.6px; margin: 0 0 12px; }
.help-hero .doc-lead { font-size: var(--fs-4); color: var(--text-2); line-height: 1.6; margin: 0; }
.help-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
.help-index { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.help-index-title { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; padding: 0 12px; }
.help-index a { color: var(--text-2); padding: 8px 12px; border-radius: var(--r-2); font-size: var(--fs-3); }
.help-index a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.help-body { max-width: 760px; }
.help-cat { padding: 0; margin-bottom: 48px; scroll-margin-top: 96px; }   /* sans le padding des sections de l'accueil */
.help-cat h2 { font-size: var(--fs-5); font-weight: 600; letter-spacing: -0.2px; margin: 0 0 16px; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); margin-bottom: 12px; scroll-margin-top: 96px; }
.faq[open] { border-color: var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); margin-top: -4px; transition: transform 0.15s; }
.faq[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq summary:hover h3 { color: var(--accent); }
.faq summary h3 { font-size: var(--fs-4); font-weight: 600; margin: 0; color: var(--text); }
.faq-a { padding: 0 24px 6px; }
.faq-a p, .faq-a li { color: var(--text-2); line-height: 1.65; margin: 0 0 12px; }
.faq-a ul { padding-left: 24px; margin: 0 0 12px; }
.faq-a li { margin-bottom: 6px; }
.faq-a b { color: var(--text); font-weight: 600; }
.help-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; }
.help-cta h2 { font-size: var(--fs-5); margin: 0 0 6px; }
.help-cta p { color: var(--text-2); margin: 0; line-height: 1.6; }
.help-cta .btn { flex: none; }
@media (max-width: 760px) {
  .help-hero h1 { font-size: var(--fs-6); }
  .help-layout { grid-template-columns: 1fr; gap: 24px; }
  .help-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .help-index-title { display: none; }
  .help-index a { border: 1px solid var(--line); font-size: var(--fs-3); padding: 6px 12px; }
  .help-cta { flex-direction: column; align-items: flex-start; }
}

/* Page Docs (série 71) : trois colonnes façon GitBook — menu et recherche, article, sommaire « On this page » */
.wrap-docs { max-width: 1320px; }
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 64px; align-items: start; padding-top: 20px; }
.docs-menu { display: none; }
.docs-nav { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding: 2px 6px 24px 2px; }
.docs-search { position: relative; margin-bottom: 8px; }
.docs-search .input { padding: 8px 32px 8px 12px; font-size: var(--fs-3); background: var(--surface); }
.docs-search kbd { position: absolute; right: 9px; top: 9px; font-family: var(--mono); font-size: var(--fs-1); color: var(--text-3); border: 1px solid var(--line-strong); border-radius: var(--r-1); padding: 1px 6px; pointer-events: none; }
.docs-results { margin-top: 6px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-3); padding: 6px; }   /* dans le menu (qui défile), pas par-dessus : sinon rogné */
.docs-results a { display: block; padding: 8px 12px; border-radius: var(--r-2); color: var(--text); }
.docs-results a:hover, .docs-results a:focus { background: var(--surface-2); text-decoration: none; outline: none; }
.docs-results small { display: block; color: var(--text-3); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.docs-results b { display: block; font-size: var(--fs-3); font-weight: 600; margin: 1px 0 2px; }
.docs-results span { display: block; color: var(--text-2); font-size: var(--fs-2); line-height: 1.45; }
.docs-results p { margin: 0; padding: 8px 12px; color: var(--text-3); font-size: var(--fs-2); }
.docs-nav nav { display: flex; flex-direction: column; gap: 1px; }
.docs-group { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin: 24px 0 6px; padding: 0 12px; }
.docs-nav nav a { color: var(--text-2); font-size: var(--fs-3); line-height: 1.35; padding: 6px 12px; border-radius: var(--r-1); }
.docs-nav nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.docs-nav nav a.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.docs-main { min-width: 0; max-width: 760px; padding-bottom: 24px; }
.docs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.docs-head .docs-crumb { margin: 0; color: var(--accent); font-size: var(--fs-3); font-weight: 500; }   /* .docs-head : plus fort que .doc p (fil d'Ariane gris sur le manifesto, 195) */
.docs-copy { padding: 6px 12px; font-size: var(--fs-2); }
.docs-article h1 { font-size: var(--fs-7); font-weight: 600; letter-spacing: -0.6px; line-height: 1.2; margin: 0 0 12px; }
.docs-lead { font-size: var(--fs-5); color: var(--text-2); line-height: 1.6; margin: 0 0 32px; }
.docs-article h2 { font-size: var(--fs-6); font-weight: 600; letter-spacing: -0.3px; margin: 48px 0 12px; scroll-margin-top: 96px; }
.docs-article h3 { font-size: var(--fs-5); font-weight: 600; margin: 32px 0 8px; scroll-margin-top: 96px; }
.docs-article p, .docs-article li { color: var(--text-2); font-size: var(--fs-4); line-height: 1.7; }
.docs-article p { margin: 0 0 20px; }
.docs-article strong { color: var(--text); font-weight: 600; }
.docs-article ul { padding-left: 24px; margin: 0 0 20px; }
.docs-article li { margin: 6px 0; }
.docs-article ol { list-style: none; counter-reset: step; padding: 0; margin: 0 0 20px; }
.docs-article ol > li { counter-increment: step; position: relative; padding-left: 48px; margin: 16px 0; }
.docs-article ol > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-2); font-weight: 600; }
.docs-article code { font-family: var(--mono); font-size: 0.88em; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-1); padding: 1px 4px; overflow-wrap: break-word; }   /* longue adresse dans une phrase : elle passe à la ligne au lieu de sortir de l'écran */
.docs-article pre { margin: 0 0 20px; padding: 16px 20px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); font-size: var(--fs-3); line-height: 1.55; }   /* bloc de code plus large que l'écran : il défile dans son cadre, pas la page */
.docs-article pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.docs-article td:not(:first-child) code { overflow-wrap: anywhere; }   /* tableau : le code des colonnes d'explication passe à la ligne ; la première colonne (nom) reste entière */
.docs-article figure { margin: 24px 0 32px; }
.docs-article figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.docs-article figcaption { margin-top: 8px; color: var(--text-3); font-size: var(--fs-2); text-align: center; }
.docs-article table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: var(--fs-3); }
.docs-article th, .docs-article td { text-align: left; vertical-align: top; padding: 12px 12px; border-bottom: 1px solid var(--line); }
.docs-article th { color: var(--text-3); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.docs-article td { color: var(--text-2); line-height: 1.55; }
.hint { margin: 24px 0; padding: 12px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-3); }
.hint::before { content: "Note"; display: block; margin-bottom: 4px; color: var(--accent); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hint p { margin: 0; }
.hint p + p { margin-top: 8px; }
.hint-tip { border-left-color: var(--gain); }
.hint-tip::before { content: "Tip"; color: var(--gain); }
.hint-warning { border-left-color: var(--mark); }
.hint-warning::before { content: "Important"; color: var(--mark); }
.docs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.docs-card { display: block; padding: 20px 24px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.docs-card:hover { border-color: var(--accent-line); text-decoration: none; }
.docs-card b { display: block; margin-bottom: 6px; font-size: var(--fs-4); }
.docs-card span { color: var(--text-2); font-size: var(--fs-3); line-height: 1.55; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 16px; }
.docs-pager a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-3); }
.docs-pager a:hover { border-color: var(--accent-line); text-decoration: none; }
.docs-pager span { color: var(--text-3); font-size: var(--fs-2); }
.docs-pager b { font-weight: 600; }
.docs-pager-next { grid-column: 2; text-align: right; }
.docs-updated { margin: 0; color: var(--text-3); font-size: var(--fs-2); }
.docs-toc { position: sticky; top: 86px; display: flex; flex-direction: column; font-size: var(--fs-2); }
.docs-toc p { margin: 0 0 12px; color: var(--text-3); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.docs-toc a { padding: 4px 0 4px 12px; color: var(--text-3); line-height: 1.4; border-left: 2px solid var(--line); }
.docs-toc a.toc-3 { padding-left: 24px; }
.docs-toc a:hover { color: var(--text); text-decoration: none; }
.docs-toc a.is-current { color: var(--accent); border-left-color: var(--accent); }
@media (max-width: 1100px) {
  .docs { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .docs-toc { display: none; }
}
@media (max-width: 760px) {
  .docs { grid-template-columns: 1fr; gap: 0; padding-top: 8px; }
  .docs-menu { display: block; justify-self: start; margin-bottom: 12px; padding: 8px 16px; font-size: var(--fs-3); }
  .docs-nav { display: none; position: static; max-height: none; overflow: visible; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
  .docs-nav.is-open { display: block; }
  .docs-article h1 { font-size: var(--fs-6); }
  .docs-article table { display: block; overflow-x: auto; font-size: var(--fs-3); }   /* tableau plus large que l'écran : il défile, pas la page */
  .docs-article th, .docs-article td { padding: 8px 12px; }
  .docs-cards, .docs-pager { grid-template-columns: 1fr; }
  .docs-pager-next { grid-column: 1; }
}

/* FAQ de l'accueil (série 72) : dernière section, mêmes cartes repliables que la page Help (.faq), puis « Read more → » vers /help */
/* FAQ de l'accueil (86.2, F1 ; 86.3) : titre, phrase et boutons Help / Docs à gauche, trois questions fermées à droite */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-left h2 { margin: 0 0 12px; }
.faq-sub { margin: 0 0 24px; color: var(--text-2); font-size: var(--fs-4); line-height: 1.5; }
.faq-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.home-faq .faq[open] { border-color: var(--accent-line); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Page Updates (série 73) : fil daté, étiquette New / Improved / Fixed, la plus récente en haut */
.updates { padding: 32px 0 12px; }
.upd-list { max-width: 820px; }
.upd { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.upd time { padding-top: 4px; color: var(--text-3); font-size: var(--fs-3); }
.upd h2 { margin: 12px 0 6px; font-size: var(--fs-5); font-weight: 600; letter-spacing: -0.2px; }
.upd p { margin: 0 0 8px; color: var(--text-2); line-height: 1.65; }
.upd-tag { display: inline-block; padding: 2px 8px; border: 1px solid; border-radius: 999px; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; }
.upd-new { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.upd-improved { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.upd-fixed { color: var(--gain); border-color: color-mix(in srgb, var(--gain) 40%, transparent); background: var(--gain-soft); }
.upd-empty { padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); }
@media (max-width: 760px) {
  .upd { grid-template-columns: 1fr; gap: 4px; padding: 24px 0; }
}

/* Pages du compte sur téléphone (74.0) */
@media (max-width: 760px) {
  .clean h2, .clean h1 { font-size: var(--fs-6); }
  .clean h3 { font-size: var(--fs-5); }
}
/* « 90D | 30D » des leaders suivis (221.1, maquette /dev/leaders_period_mock) : à droite du titre */
.ld-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ld-head h3 { margin: 0; }
.ld-period { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.ld-period button { border: 0; background: transparent; color: var(--text-2); padding: 6px 14px; border-radius: 999px; font: inherit; font-size: var(--fs-3); cursor: pointer; }
.ld-period button[aria-pressed="true"] { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
/* Compte X (221.3) : logo seul, à droite du pied de page */
footer .ft-x { margin-left: auto; display: inline-flex; align-items: center; }
footer .ft-x svg { width: 18px; height: 18px; fill: currentColor; }
footer .ft-x:hover { color: var(--text); text-decoration: none; }
/* Bande vers le compte X en bas de la FAQ de l'accueil (221.4) : fond de la section, sans cadre */
.faq-x { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.faq-x h3 { margin: 0 0 4px; font-size: var(--fs-5); }
.faq-x p { margin: 0; color: var(--text-2); }
.faq-x .btn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.faq-x .btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 734px) { .faq-x { flex-direction: column; align-items: flex-start; } }
body:has(.top .plan-badge) .faq-x { display: none; }   /* client connecté : pour le visiteur seulement, comme les liens de l'en-tête (207.4) */
/* Page d'un trader : appel à l'action selon l'état (série 222, maquette /dev/trader_cta_mock2) */
.trader-head.has-cta { align-items: center; }
.tr-cta { display: flex; align-items: center; gap: 12px; }
.tr-following { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--gain) 14%, transparent); color: var(--gain); font-weight: 600; white-space: nowrap; }
.tr-dormant { color: var(--text-2); font-size: var(--fs-3); }   /* trader suivi mais en veille au-delà du niveau */
.tr-pick { margin-top: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.tr-pick p { margin: 0 0 12px; }
.tr-pick .btn { margin: 0 8px 8px 0; }
.tr-pick .small { margin: 4px 0 0; }
.tr-lock { padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-3); color: var(--text-2); text-align: center; }
.tr-band { margin-top: 48px; padding: 28px; border-radius: var(--r-3); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tr-band h3 { margin: 0 0 4px; }
.tr-band p { margin: 0; color: var(--text-2); }
#connect-msg:not(:empty) { margin-top: 16px; }
@media (max-width: 734px) {   /* 222.10 : bouton à droite du titre, taille de « Pause Copy » ; l'adresse passe entière sous le nom */
  .trader-head.has-cta { flex-wrap: nowrap; }
  .trader-head.has-cta .addr-wrap { white-space: nowrap; }
  .tr-cta { flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 4px; }
  .tr-cta .btn-lg { padding: 8px 16px; font-size: var(--fs-3); }
  .tr-following { height: 34px; padding: 0 12px; font-size: var(--fs-3); }
  .tr-band { flex-direction: column; align-items: flex-start; } .tr-band .btn { width: 100%; }
}
/* Accueil — « Follow and Manage Every Copy » (série 85 : K3 retenue en 85.2, à la place du calculateur). Échantillons fictifs du tableau de
   bord (fenêtre de navigateur), du bot Telegram (téléphone) et du webhook ; les trois onglets partagent la même place (.is-off = invisible). */
.fm-tabs { max-width: 500px; margin-bottom: 24px; }
.fm-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fm-samples, .fm-points { display: grid; }
.fm-samples > *, .fm-points > * { grid-area: 1 / 1; }
.fm-samples > .fm-phone { align-self: center; justify-self: center; }
.fm-sec .is-off { visibility: hidden; }
.fm-side { display: flex; flex-direction: column; align-items: flex-start; }
.fm-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; align-content: start; }
.fm-ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-4); line-height: 1.4; }
.fm-trial { margin-top: 12px; }
/* Fenêtre du tableau de bord */
.fm-win { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); overflow: hidden; }
.fm-win-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fm-win-bar > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.fm-url { margin-left: 12px; padding: 4px 12px; border-radius: 999px; background: var(--bg); color: var(--text-3); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.fm-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); animation: fm-blink 1.6s ease-in-out infinite; }
@keyframes fm-blink { 50% { opacity: .35; } }
.fm-win-body { padding: 20px 20px 12px; }
.fm-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fm-dash-head > b { font-size: var(--fs-4); }
.fm-dash-btns { display: flex; gap: 6px; }
.fm-mini { padding: 4px 12px; font-size: var(--fs-1); border-radius: var(--r-1); cursor: default; }
.fm-recap { margin-top: 16px; }
.fm-recap .fc-cell { padding: 2px 12px; }
.fm-recap .fc-cell:first-child { padding-left: 0; }
.fm-recap .fc-cell span { font-size: var(--fs-1); }
.fm-recap .fc-cell b { font-size: var(--fs-3); }
.fm-sec-t { margin: 16px 0 4px; font-size: var(--fs-3); font-weight: 600; }
.fm-pos { font-size: var(--fs-3); }
.fm-pos th { font-size: var(--fs-1); padding: 4px 8px 4px 0; }
.fm-pos td { padding: 6px 8px 6px 0; }   /* lignes resserrées : la fenêtre ne dépasse pas l'onglet AI Agent (210.9) */
.fm-pos td.mkt { padding-left: 8px; }
.fm-pos .btn-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: var(--fs-1); cursor: default; }
.fm-pos .dot { width: 8px; height: 8px; margin-right: 6px; }
/* Téléphone Telegram (couleurs de Telegram, sombre ou clair selon le thème du site) ; sans cadre noir depuis 85.3, filet fin comme la fenêtre */
.fm-phone { --tg-bg: #0E1621; --tg-in: #182533; --tg-head: #17212B; --tg-kb: #17212B; --tg-text: #F5F5F5; --tg-time: #8BA0B5;
  width: 260px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--tg-bg); color: var(--tg-text); overflow: hidden; box-shadow: var(--shadow); font-size: var(--fs-1); }
:root[data-theme="light"] .fm-phone { --tg-bg: #DCE8F2; --tg-in: #FFFFFF; --tg-head: #FFFFFF; --tg-kb: #F1F4F7; --tg-text: #111111; --tg-time: #7A8A99; }
.fm-tg-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px; background: var(--tg-head); border-bottom: 1px solid rgba(127, 127, 127, .18); }
.fm-tg-av { width: 30px; height: 30px; border-radius: 50%; }
.fm-tg-head b { display: block; font-size: var(--fs-3); }
.fm-tg-head span { font-size: var(--fs-1); color: var(--tg-time); }
.fm-chat { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.fm-msg { position: relative; align-self: flex-start; max-width: 90%; padding: 6px 8px 16px; border-radius: var(--r-3); border-bottom-left-radius: 4px; background: var(--tg-in); line-height: 1.38; }
.fm-msg span { display: block; padding-right: 24px; overflow-wrap: anywhere; }
.fm-msg i { position: absolute; right: 8px; bottom: 3px; font-size: var(--fs-1); font-style: normal; color: var(--tg-time); }
.fm-kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; background: var(--tg-kb); }
.fm-kb span { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 4px; border-radius: var(--r-1); background: rgba(127, 127, 127, .16); text-align: center; font-size: var(--fs-1); line-height: 1.2; }
/* Webhook pour agents : même fenêtre que le dashboard, avec un événement signé en exemple. */
.fm-wh-event { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface); }
.fm-wh-event-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; color: var(--text-2); font-size: var(--fs-1); }
.fm-wh-ok { color: var(--gain); font-weight: 600; white-space: nowrap; }
.fm-wh-event pre { margin: 0; padding: 16px; border-top: 1px solid var(--line); background: var(--bg); color: var(--text); font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.fm-agents:not(.is-off) .fm-agent { animation: fm-in .45s ease-out both; } .fm-agents:not(.is-off) .fm-agent + .fm-agent { animation-delay: .15s; }
/* Messages qui arrivent l'un après l'autre quand l'onglet s'affiche ; coupé si moins de mouvement demandé */
.fm-phone:not(.is-off) .fm-msg { animation: fm-in .45s ease-out both; }
.fm-phone:not(.is-off) .fm-msg:nth-child(2) { animation-delay: .5s; }
.fm-phone:not(.is-off) .fm-msg:nth-child(3) { animation-delay: 1s; }
@keyframes fm-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .fm-live i, .fm-phone:not(.is-off) .fm-msg, .fm-agents:not(.is-off) .fm-agent { animation: none; } }
@media (max-width: 1000px) {
  .fm-body { grid-template-columns: 1fr; gap: 32px; }
}
/* Téléphone : l'échantillon garde un vrai tableau (le site passe ses tableaux en cartes) ; From et Value masqués */
@media (max-width: 760px) {
  .fm-win-body { padding: 12px; }
  .fm-tabs button { padding-left: 8px; padding-right: 8px; }   /* « Dashboard » centré dans son bouton */
  .fm-dash-btns { display: none; }
  .fm-recap { flex-wrap: wrap; gap: 8px 0; }
  .fm-pos, .fm-pos tbody { display: table; width: 100%; }
  .fm-pos thead { display: table-header-group; }
  .fm-pos tbody { display: table-row-group; }
  .fm-pos tr, .fm-pos tr:has(td.mkt.long), .fm-pos tr:has(td.mkt.short) { display: table-row; position: static; padding: 0; margin: 0; border: 0; background: none; }
  .fm-pos th { padding-top: 2px; padding-bottom: 2px; }
  .fm-pos td { display: table-cell; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
  .fm-pos td::before { content: none; }
  .fm-pos td.mkt { border-left: 3px solid transparent; padding-left: 8px; }
  .fm-pos td.mkt.long { border-left-color: var(--gain); } .fm-pos td.mkt.short { border-left-color: var(--loss); }
  .fm-pos td.x-cell { position: static; }
  .fm-pos .c-from, .fm-pos .c-value { display: none; }
  .fm-phone { width: 100%; max-width: 280px; }
}
@media (max-width: 360px) { .fm-pos td { padding-right: 4px; } }
@media (max-width: 359px) { .brand { flex-basis: 100%; } }   /* logo et six icônes ne tiennent plus sur une ligne : trois lignes (157.5) */   /* petit téléphone : le ✕ de la dernière colonne reste dans la fenêtre */
.settings-profile { display: flex; flex-direction: column; gap: 2px; max-width: 760px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-3); color: var(--text); text-decoration: none; } .settings-profile:hover { border-color: var(--accent); } .settings-profile span { color: var(--text-2); }   /* carte Profile des réglages (149.4, 219.3) */
/* Onglet « AI Agent » (194) : deux cartes — agent connecté au wallet de la personne, agent avec son propre wallet */
.fm-agents { display: grid; gap: 12px; align-content: start; }   /* empilées : la colonne de l'échantillon est étroite */
.fm-agent { display: grid; align-content: start; gap: 6px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface); }
.fm-agent b { font-size: var(--fs-4); }
.fm-agent p { margin: 0 0 6px; font-size: var(--fs-3); color: var(--text-2); }
.fm-agent-tag { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.fm-agent-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); font-size: var(--fs-3); }
.fm-agent-status .dot-on { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); }
.fm-agent-off { margin-left: auto; color: var(--loss-text); border: 1px solid var(--loss-line-strong); border-radius: var(--r-1); padding: 1px 8px; }
.fm-agent-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* ===== Design system — 1er lot, brouillon (série 158) : à valider par le fondateur avant le staging. =====
   Retour : tag avant-design-system-2026-10-16. Rayons 6 / 8 / 12 px (158.7) générés depuis waketrades.css et report_v3.css. */

/* 133.4 + 158.2 : pile système Apple partout, chiffres tabulaires dans la police du texte ; monospace pour les adresses seulement */
:root, :root[data-theme="light"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: var(--r-3);
  /* Couleurs sorties du CSS (0 couleur en dur hors jetons, sauf la copie de Telegram .fm-phone) */
  --on-brand: #FFFFFF; --danger-strong: #B91C1C;
  --data-2: #F59E0B; --data-3: #60A5FA; --data-4: #F472B6; --data-5: #84CC16; --data-6: #FB923C; --data-7: #E879F9;
  /* Échelle de texte (8 tailles au lieu de 30) */
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 28px; --fs-7: 40px; --fs-8: clamp(40px, 5.4vw, 56px);
  /* Rayons (158.7) */
  --r-1: 6px; --r-2: 8px; --r-3: 12px;
  /* Bandes de l'accueil : aplats au lieu des dégradés (ton sobre, 158.3) */
  --band-1: var(--bg); --band-2: var(--surface); --band-3: var(--bg); --band-4: var(--surface); --band-5: var(--bg);
}
html, body, button, input, select, textarea { font-family: var(--font); }
.num { font-family: var(--font); font-variant-numeric: tabular-nums; }
.ld-addr .num, .pf-value .num, .recap .fc-cell b .num, .hc-what .num, .hs-swap .num { font-family: var(--mono); }

/* 158.1 B : mauve réservé au payant (forfait, rapport, Bonus, 6-month plan). Le reste passe au bleu ou au neutre. */
.cheer-confetti i:nth-child(even) { background: var(--accent); }
.upd-improved { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.hc-av-l { background: var(--accent); }
.hc-pulse { fill: var(--accent); }
.hs-ring.w2 { border-color: var(--accent); }
.hs-boom { background: radial-gradient(circle, var(--accent), transparent 70%); }
.hs-bars i { background: var(--accent); }
/* 158.3 sobre : plus de titre à lueur animée */
/* Section du rapport (demande du fondateur, 16/10) : « Get Access to Our Monthly Report » reste le titre de la section, sans dégradé
   animé ; « Only 2%… » retiré (196.1) ; carte d'exemple et bouton neutres */

/* Lot 2 (maquette) : hiérarchie par la typographie, blanc régulier, composants plus calmes (Linear, apple.com — 158.4) */
html, body { line-height: 1.55; }
h1, h2, h3 { letter-spacing: -0.02em; }
h2 { line-height: 1.15; }
.hero h1 { line-height: 1.05; letter-spacing: -0.03em; }
.bands .band { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 734px) { .bands .band { padding-top: 64px; padding-bottom: 64px; } }
.btn { padding: 8px 16px; font-size: var(--fs-3); }
.btn-lg { padding: 12px 24px; font-size: var(--fs-4); }
/* Une seule profondeur : pas d'ombre décorative ni de lueur sur les blocs (bordure OU fond, pas les trois) */
:root[data-theme="light"] .top::before { box-shadow: 0 1px 0 var(--line); }
/* Exception voulue par le fondateur (189.8) : ombre sous l'en-tête quand la page défile, pour qu'il ressorte (clair et sombre) */
.top::before { transition: box-shadow .2s ease; }
:root[data-scrolled] .top::before { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(0, 0, 0, .55); }
:root[data-theme="light"][data-scrolled] .top::before { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(0, 0, 0, .12); }
/* Composants calmes : icônes d'en-tête sans cadre, sélection par le contour seul, étiquettes neutres */
.tool { background: transparent; border-color: transparent; color: var(--text-2); }
.tool:hover, .tool[aria-expanded="true"] { background: var(--surface-2); border-color: transparent; color: var(--text); }
.lv.on { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.lv.risky.on { background: transparent; box-shadow: inset 0 0 0 1px var(--loss-line-strong); }
.step-n { background: transparent; border: 1px solid var(--line-strong); color: var(--text-2); font-weight: 500; }
.hc { box-shadow: none; }
.eyebrow { color: var(--text-3); }
/* Pause copy en orange pâle (69.5), en jetons */
:root { --pause-bg: #FDBA74; --pause-line: #FDBA74; --pause-ink: #431407; }
:root[data-theme="light"] { --pause-bg: #FED7AA; --pause-line: #FDBA74; --pause-ink: #7C2D12; }
/* 158.3 sobre : plus de reflet balayant ni de halo pulsé sur la carte du rapport */
.rc-inner::after { display: none; }
.rc-hero, .rc-cta { animation: none; }   /* 160.6 : le contour tournant du bouton « Open Monthly Report » (.rc-mini) est gardé */
.rc-hero.rc-closing { animation: rc-close 0.35s ease-in forwards; }   /* « − » : l'animation de fermeture reste (la carte se change en bouton à sa fin) */
/* Encadré « Founder price » (demande du fondateur, 16/10) : plus de dégradé ni de fond teinté ; lecture de haut en bas :
   étiquette mauve (offre payante, 158.1), grand chiffre, explication dessous, note, puis la liste au même corps */
.seats { justify-content: flex-start; gap: 24px; background: var(--bg); border-color: var(--line); }
.fb-kicker { color: var(--accent-2); }
.fb-off { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 12px; color: var(--text-2); }
.seats .big { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); letter-spacing: -0.02em; }
.seats .fb-list { border-top-color: var(--line); padding-top: 20px; }
.seats .fb-list .fb-zero { font-size: var(--fs-3); }
/* En-tête (159.2) : pastilles et bouton Dashboard sur une seule ligne chacun, à toutes les largeurs */
.plan-badge, .adv-badge, .top-right > .btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1000px) { .top-right { gap: 8px; } }   /* 159.2 : le bouton Dashboard en plus tient sur une ligne jusqu'au passage en deux lignes (760 px) */
/* 160.2 : état de la copie sous le titre « Dashboard » quand elle ne tourne pas (pause, essai ou forfait terminé, clé expirée) */
.dash-state { margin: 8px 0 0; font-weight: 600; color: var(--loss-text); }
/* 160.3 : « Open Monthly Report » à côté du titre « Dashboard », à la hauteur d'un bouton ; plus de halo (158.3) */
.dash-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.dash-rc:empty { display: none; }
.dash-rc .rc-mini { box-shadow: none; }
.dash-rc .rc-mini-in { padding: 8px 16px; font-size: var(--fs-3); }
/* 160.4 : interrupteur « Limit orders » à côté de « Positions » à l'échelle d'un contrôle secondaire (texte 14 px gris, interrupteur
   36 × 20, état discret), aligné au centre du titre ; sous le titre sur téléphone */
.pos-head .switch-row { gap: 8px; font-size: var(--fs-3); color: var(--text-2); line-height: 1.3; }
.pos-head .switch { width: 36px; height: 20px; flex-shrink: 0; }
.pos-head .switch::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.pos-head .switch:checked::after { left: 19px; }
.pos-head .switch-state { font-size: var(--fs-2); color: var(--text-3); min-width: 2.5ch; }
.clean .pos-head h3 { margin: 0; }   /* 160.4 : marges du titre portées par la ligne, l'interrupteur est centré sur le titre */
.clean .pos-head { margin: 32px 0 12px; }
/* 160.5 : récapitulatif du tableau de bord sur téléphone en 2 colonnes (les montants ne se coupent plus, « Last Copy » n'est plus seul) */
@media (max-width: 760px) { .fc-row.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; } .fc-row.recap .fc-cell:nth-child(odd) { padding-left: 0; border-left: 0; } .fc-row.recap .fc-cell b { white-space: nowrap; } }
/* 160.6 : sur téléphone, « Open Monthly Report » reste sur la ligne de « Dashboard », un peu plus petit ; sous 350 px il passe dessous */
@media (max-width: 760px) {
  .dash-title { flex-wrap: nowrap; gap: 10px; }
  .dash-title h2 { white-space: nowrap; }
  .dash-rc .rc-mini-in { padding: 6px 12px; font-size: var(--fs-2); }
}
.dash-rc .rc-mini-in { white-space: nowrap; }
@media (max-width: 380px) { .dash-rc .rc-mini-in { padding: 5px 10px; font-size: var(--fs-1); } }
@media (max-width: 340px) { .dash-title { flex-wrap: wrap; } }