/* STRATIDEX — FICHIER PRODUIT par src/web/lecture.mjs depuis les parties de la coquille de /accueil.css (accueil v4) et lecture/lecture.css : ne pas le modifier ici. */
/* STRATIDEX — LA COUCHE DE LECTURE : la SOURCE de /site.css (lecture.mjs l'assemble au build).
   Pages qu'on lit : sécurité, frais, FAQ, risques, conditions, confidentialité, invitation, marchés
   (hub, familles, fiches), guides, Docs, 404. L'accueil garde /accueil.css.
   Une seule identité (03/10) : à la marque COQUILLE ci-dessous, lecture.mjs pose les parties de la
   feuille de l'accueil v4 elle-même (jetons, base, bouton, marque, en-tête, langues, pied, relais,
   mouvement réduit, consentement, écritures) — rien n'y est recopié à la main. Ce qui suit n'utilise
   que ses jetons : nuit #0B0C1A, argent pour les titres et les chiffres, texte #F4F5F9 / #AEB2C3 /
   #8A8EA6, UN accent #9FB4F0 (le focus et ce que fait le bot), Fraunces pour l'affichage, Plex Sans
   pour le texte, Plex Mono seulement pour une donnée machine (une adresse, du code) ; les quatre
   tailles de la v4 — titre (h1), outil (h2), texte, note — et l'étiquette du pied ; la base 8. */
@view-transition{navigation:auto}

/* ════ LA COQUILLE : les parties de /accueil.css, telles quelles (lecture.mjs) ════ */
/* ══ LE SYSTÈME ═══════════════════════════════════════════════════════
   Une grille (12 colonnes, gouttière 24), un axe par appareil (centré sur
   téléphone ; mots à gauche, sigle à droite sur ordinateur), quatre tailles
   (monument, titre, outil, texte) + une note, une base de 8, un accent. */
:root{
  --n0:#0B0C1A;--n1:#12142A;--n2:#1A1C36;--f2:#3A3E5E;--bord:#6B7090;
  --e1:#F4F5F9;--e2:#AEB2C3;--e3:#8A8EA6;
  --ac:#9FB4F0;
  --filet:rgba(237,239,244,.12);
  --argent:linear-gradient(180deg,#F7F8FB 12%,#9DA2B6 96%);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --g:20px;--tete:56px;--gout:24px;
  --cw:calc(100vw - 2 * var(--g));                 /* la largeur utile */
  --c7:var(--cw);                                  /* la colonne des mots (7 sur 12 sur ordinateur) */
  --t-mon:clamp(176px,52vw,236px);                 /* 317, ~5 % : sur téléphone, le chiffre est l'image */
  --t-titre:min(54px,calc(var(--c7) * .092));      /* h1, h2 : la même taille partout */
  --t-outil:clamp(24px,calc(var(--t-titre) * .82),34px);   /* Stop suiveur, Copy-wallet, Earn : toujours un cran sous le titre */
  --t-texte:clamp(17px,.19vw + 16.3px,19px);
  --t-note:14px;
  --sigle:clamp(200px,60vw,264px);                 /* le sigle 3D sur téléphone : le même à l'ouverture et à la clôture */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  --idee:clamp(88px,1.5vw + 82px,104px);           /* entre deux idées */
  --t-geste:140ms;--t-ui:360ms;--t-scene:700ms;
  --depot:cubic-bezier(.2,.7,.2,1);
  --ressort:linear(0,0.0718,0.226,0.4068,0.5801,0.7277,0.843,0.9261,0.9812,1.014,1.0304,1.0358,1.0343,1.0293,1.0229,1.0165,1.0109,1.0065,1.0033,1.0011,0.9997,0.999,0.9987,0.9987,0.9989,0.9991,0.9994,0.9996,0.9997,0.9999,0.9999,1,1,1,1,1,1,1,1,1,1,1);
  --r1:8px;--r2:14px;--r3:22px;
  color-scheme:dark;
  interpolate-size:allow-keywords;
}
@media(max-width:359px){:root{--g:16px}}
@media(min-width:640px){:root{--g:32px;--cw:min(100vw - 2 * var(--g),640px)}}
@media(min-width:1024px){:root{--t-mon:clamp(128px,5.2vw + 108px,184px);--g:48px;--tete:64px;--cw:calc(min(100vw,1200px + 2 * var(--g)) - 2 * var(--g));--c7:calc((var(--cw) - 11 * var(--gout)) / 12 * 7 + 6 * var(--gout));--t-titre:min(60px,calc(var(--c7) * .092))}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--tete) + var(--sp-4));background:#0B0C1A}
body{background:#0B0C1A;color:#F4F5F9;font:400 var(--t-texte)/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100vh}
img,svg{display:block}
a{color:inherit}
b,strong{font-weight:600;color:#F4F5F9}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}   /* pas de rectangle du système au toucher : chaque élément a son état pressé */
ol,ul{list-style:none}
:focus-visible{outline:2px solid #9FB4F0;outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:calc(1200px + 2 * var(--g));margin:0 auto;padding-inline:var(--g)}
h1,h2,h3{font-family:var(--serif);font-weight:600;font-optical-sizing:auto;font-variation-settings:"SOFT" 0,"WONK" 0;color:#F4F5F9}
p{color:#AEB2C3;text-wrap:pretty}
.nw{white-space:nowrap}
.evite{position:fixed;left:var(--sp-4);top:var(--sp-2);z-index:100;padding:10px 16px;border-radius:var(--r1);background:#EDEFF4;color:#0B0C1A;font-weight:600;text-decoration:none;transform:translateY(-150%)}
.evite:focus{transform:none}

/* ── LE BOUTON TELEGRAM : un seul format pour les Commencer de la page (ouverture, clôture) ; .btn-s dans l'en-tête ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px 0 22px;border-radius:999px;background:linear-gradient(180deg,#F7F8FB,#D9DCE5);color:#0B0C1A;font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,0 12px 32px -14px rgba(159,180,240,.55);transition:scale var(--t-geste) var(--depot),box-shadow var(--t-ui) var(--depot);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:hover{box-shadow:inset 0 1px 0 #fff,0 16px 40px -12px rgba(159,180,240,.8)}
.btn:active{scale:.97}
.btn .tg{width:24px;height:24px;flex:none}
.btn-s{height:44px;padding:0 14px 0 10px;font-size:14px;gap:6px}
.btn-s .tg{width:18px;height:18px}
@media(min-width:640px){.btn-s{padding:0 16px 0 12px;font-size:15px;gap:8px}.btn-s .tg{width:20px;height:20px}}
.btn-o{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;border:1px solid #6B7090;font:500 15px/1 var(--sans);color:#F4F5F9;text-decoration:none;white-space:nowrap;transition:border-color var(--t-geste),background-color var(--t-geste),scale var(--t-geste) var(--depot);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn-o:hover{border-color:#AEB2C3;background:rgba(237,239,244,.04)}
.btn-o:active{scale:.97}

/* ── LA MARQUE PLATE (en-tête, pied) ───────────────────────────────── */
.sg{--s:28px;position:relative;display:block;flex:none;width:var(--s);height:var(--s)}
.sg>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ── EN-TÊTE ───────────────────────────────────────────────────────── */
.sentinelle{position:absolute;top:24px;left:0;width:1px;height:1px}
.tete{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--tete);border-bottom:1px solid transparent;transition:background-color var(--t-ui) var(--depot),border-color var(--t-ui) var(--depot)}
.tete[data-scrolled]{background:#0B0C1A;border-bottom-color:rgba(237,239,244,.08)}
.tete .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.marque{display:flex;align-items:center;gap:7px;min-height:44px;min-width:44px;text-decoration:none;font:600 17px/1 var(--serif);letter-spacing:-.01em;font-variation-settings:"SOFT" 0,"WONK" 0;view-transition-name:sigle}
.nav{display:flex;align-items:center;gap:2px}
.nav-l{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 6px;border-radius:var(--r1);font:500 15px/1 var(--sans);color:#AEB2C3;text-decoration:none;transition:color var(--t-geste)}
.nav-l:hover{color:#F4F5F9}
.nav-l svg{width:20px;height:20px}
.nav .code{display:none;font:500 13px/1 var(--sans);letter-spacing:.04em;margin-left:6px}
.loupe{display:none}
.tete-cta{position:relative;margin-left:2px;transition:opacity var(--t-ui) var(--depot),translate var(--t-ui) var(--ressort),visibility 0s}
/* un seul « Commencer » à l'écran : celui de l'en-tête cède la place à celui de la page, et ne garde pas sa place
   (la navigation reste au bord, puis glisse quand il revient). Chacun attend que l'autre soit parti : rien ne passe
   jamais sur la pastille pendant qu'elle se montre ou s'efface */
.js .nav{position:relative;padding-right:calc(var(--cta-w,124px) + 2px);transition:padding-right var(--t-ui) var(--ressort)}
.js .tete-cta{position:absolute;right:0;top:0;bottom:0;margin:0;display:flex;align-items:center}
.js .tete[data-cta-cache] .nav{padding-right:0;transition-delay:var(--t-ui)}
.js .tete[data-cta-cache] .tete-cta{opacity:0;translate:0 -6px;visibility:hidden;pointer-events:none;transition:opacity var(--t-ui) var(--depot),translate var(--t-ui) var(--ressort),visibility 0s linear var(--t-ui)}
@media(min-width:480px){.js .tete:not([data-cta-cache]) .tete-cta{transition-delay:60ms}}   /* la pastille arrive une fois la place libre */
.qr-carte{position:absolute;right:0;top:calc(100% + 10px);width:188px;padding:14px;border-radius:var(--r2);background:#12142A;border:1px solid #3A3E5E;text-align:center;opacity:0;translate:0 -6px;pointer-events:none;visibility:hidden;transition:opacity 200ms var(--depot),translate 200ms var(--depot),visibility 0s linear 200ms}
.qr-carte svg{width:100%;height:auto;aspect-ratio:1;border-radius:6px}
.qr-carte span{display:block;margin-top:var(--sp-2);font:400 13px/1.4 var(--sans);color:#AEB2C3}
@media(hover:hover) and (min-width:1024px){
  .tete-cta:hover .qr-carte,.tete-cta:focus-within .qr-carte{opacity:1;translate:0 0;visibility:visible;transition-delay:400ms,400ms,400ms}
}
@media(min-width:640px){.marque{font-size:19px}.nav .code{display:inline}.nav{gap:var(--sp-2)}}
@media(min-width:1024px){.loupe{display:inline-flex}.nav-l kbd{font:500 12px/1 var(--sans);color:#8A8EA6;margin-left:var(--sp-2);border:1px solid #3A3E5E;border-radius:4px;padding:3px 5px}}
/* téléphone : quand le Commencer entre dans l'en-tête, il prend la place de « Docs », à gauche du globe (trois objets,
   jamais quatre ; le nom reste). Le globe ne bouge jamais ; « Docs » part d'un coup quand la pastille arrive, et ne
   revient qu'une fois elle partie. L'icône du globe tombe sur la marge, comme le sigle de la marque à gauche
   (sa zone tactile de 44 px est gardée). */
@media(max-width:479px){
  .js .nav,.js .tete[data-cta-cache] .nav{padding-right:0;transition:none}
  .js .tete-cta{right:34px}
  .nav>button.nav-l{margin-right:-12px}
  .js .tete:not([data-cta-cache]) .nav-l.docs{opacity:0;visibility:hidden;transition:none}   /* il garde sa place, sous la pastille */
  .nav-l.docs{transition:color var(--t-geste),scale var(--t-geste) var(--depot),opacity 160ms var(--depot) var(--t-ui),visibility 0s linear var(--t-ui)}
}

/* ── LANGUES : popover natif, feuille basse sur téléphone ─────────── */
.langues{--depuis:0 100%;position:fixed;margin:0;inset:auto 0 0 0;width:100%;max-width:none;max-height:85vh;overflow:auto;border:0;border-top:1px solid #3A3E5E;border-radius:var(--r3) var(--r3) 0 0;background:#12142A;color:#F4F5F9;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}
.langues::backdrop{background:rgba(4,5,12,.64)}
.langues .poignee{width:40px;height:4px;border-radius:2px;background:#3A3E5E;margin:4px auto 12px}
.langues .titre-l{padding:0 12px 8px;font:500 13px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#8A8EA6}
.langues a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 12px;border-radius:var(--r1);text-decoration:none;color:#AEB2C3;font-size:16px}
.langues a:hover,.langues a:active{background:#1A1C36;color:#F4F5F9}
.langues a[aria-current]{color:#F4F5F9;font-weight:600}
.langues a[aria-current]::after{content:"✓";color:#9FB4F0}
.langues .fermer{width:100%;min-height:48px;margin-top:var(--sp-2);border-radius:var(--r1);border:1px solid #6B7090;color:#F4F5F9;font-size:16px}
@media(min-width:640px){
  .langues{--depuis:0 -6px;inset:calc(var(--tete) - 4px) max(var(--g),calc((100vw - 1200px) / 2)) auto auto;width:260px;border:1px solid #3A3E5E;border-radius:var(--r2);padding:8px}
  .langues .poignee,.langues .fermer{display:none}
}
.langues{opacity:0;translate:var(--depuis);transition:translate 360ms var(--depot),opacity 240ms var(--depot),overlay 360ms allow-discrete,display 360ms allow-discrete}
.langues:popover-open{opacity:1;translate:0 0}
@starting-style{.langues:popover-open{opacity:0;translate:var(--depuis)}}
.langues::backdrop{opacity:0;transition:opacity 360ms var(--depot),overlay 360ms allow-discrete,display 360ms allow-discrete}
.langues:popover-open::backdrop{opacity:1}
@starting-style{.langues:popover-open::backdrop{opacity:0}}

/* ── PIED : inchangé dans son contenu, dans le même système ───────── */
.pied{border-top:1px solid rgba(237,239,244,.10);padding-block:var(--sp-6) var(--sp-5);font-size:15px}
.pied-g{display:grid;gap:var(--sp-5)}
.p-id{display:grid;gap:var(--sp-2);justify-items:start}
.p-marque{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1);font:600 20px/1 var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.01em;color:#F4F5F9}
.p-desc{font-size:15px;line-height:1.55;max-width:34em;text-wrap:balance}
.p-off{font-size:14px;color:#8A8EA6}
.p-mail{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.mail{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--sans);color:#F4F5F9;text-underline-offset:5px;text-decoration-color:rgba(244,245,249,.35)}
.copier{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid #3A3E5E;font:500 14px/1 var(--sans);color:#AEB2C3;transition:color var(--t-geste),border-color var(--t-geste),scale var(--t-geste) var(--depot)}
.copier:hover{color:#F4F5F9;border-color:#6B7090}
.copier:active{scale:.97}
.p-plan details{border-bottom:1px solid rgba(237,239,244,.10)}
.p-plan details:first-child{border-top:1px solid rgba(237,239,244,.10)}
.p-plan summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.p-plan summary::-webkit-details-marker{display:none}
.p-plan h3{font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
.chev{width:8px;height:8px;margin-right:6px;border-right:1.5px solid #8A8EA6;border-bottom:1.5px solid #8A8EA6;rotate:45deg;translate:0 -2px;transition:rotate var(--t-ui) var(--ressort),translate var(--t-ui) var(--ressort)}
.p-plan details[open] .chev{rotate:225deg;translate:0 2px}
.p-plan ul{padding-bottom:var(--sp-2)}
.p-plan a{display:flex;align-items:center;min-height:44px;font-size:15px;color:#AEB2C3;text-decoration:none;transition:color var(--t-geste)}
.p-plan a:hover,.p-plan a:active{color:#F4F5F9}
.p-plan summary:active h3{color:#AEB2C3}
@supports selector(::details-content){
  .p-plan details::details-content{height:0;overflow:clip;transition:height var(--t-ui) var(--ressort),content-visibility var(--t-ui) allow-discrete}
  .p-plan details[open]::details-content{height:auto}
}
.p-bas{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.p-lang{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 14px 0 10px;border-radius:999px;border:1px solid #3A3E5E;font:500 14px/1 var(--sans);color:#AEB2C3;transition:color var(--t-geste),border-color var(--t-geste)}
.p-lang:hover{color:#F4F5F9;border-color:#6B7090}
.p-lang svg{width:18px;height:18px}
.reseaux{display:flex;gap:var(--sp-2)}
.reseaux a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #3A3E5E;color:#AEB2C3;transition:color var(--t-geste),border-color var(--t-geste),scale var(--t-geste) var(--depot)}
.reseaux a:hover{color:#F4F5F9;border-color:#6B7090}
.reseaux a:active{scale:.95}
.reseaux svg{width:18px;height:18px}
.p-legal{display:grid;gap:var(--sp-1);font-size:13px;line-height:1.5}
.p-legal p{color:#8A8EA6;text-wrap:balance}
.marque,.nav-l,.p-lang,.mail,.langues .fermer{transition:color var(--t-geste),border-color var(--t-geste),scale var(--t-geste) var(--depot)}
.nav-l:active,.marque:active,.p-lang:active,.mail:active,.langues .fermer:active{scale:.96}
@media(min-width:640px){
  .p-plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-5)}
  .p-plan details,.p-plan details:first-child{border:0}
  .p-plan summary{cursor:default;min-height:44px}
  .chev{display:none}
}
@media(min-width:1024px){
  .pied{padding-block:var(--sp-7) var(--sp-6)}
  .pied-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);row-gap:var(--sp-6)}
  .p-id{grid-column:1/5;align-content:start}
  .p-plan{grid-column:6/13}
  .p-bas{grid-column:1/-1;padding-top:var(--sp-5);border-top:1px solid rgba(237,239,244,.10)}
  .p-legal{grid-column:1/-1;margin-top:calc(var(--sp-4) * -1)}
}

/* ── LE RELAIS : un Commencer de la page s'efface en passant sous l'en-tête (pas de tache sous le verre) ;
   à moitié caché il est transparent, à l'instant où celui de l'en-tête revient (même seuil que l'observateur) ── */
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
  main .appel .btn{animation:sous linear both;animation-timeline:view(block var(--tete) 0px);animation-range:exit 0% exit 50%}
  @keyframes sous{to{opacity:0}}
}}

/* ── MOUVEMENT RÉDUIT : tout est posé ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .tete[data-scrolled]{background:#0B0C1A;-webkit-backdrop-filter:none;backdrop-filter:none}   /* rien ne s'efface : l'en-tête est opaque, aucune tache sous le verre */
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important}
  @view-transition{navigation:none}
  .sigle-tour{animation:none;transform:rotateX(10deg) rotateY(-28deg)}
  .sigle{--ecart:.2;cursor:default}
  .strate .voile,.sigle-ombre{animation:none}
}

/* ── PRODUCTION : le bandeau de consentement (mesure.js), repris tel quel de l'accueil v3 ──
   Il n'existe pas dans la v4 validée : c'est l'un des écarts permis (la mesure Google
   Analytics ne se charge qu'avec l'accord du visiteur). Fixé en bas, au-dessus de tout. */
.consent[hidden]{display:none}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;margin:0 auto;max-width:560px;background:var(--n1);border:1px solid var(--f2);border-radius:10px;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.consent p{margin:0;flex:1 1 260px;font-size:13px;color:var(--e2)}
.consent p a{color:var(--e1);display:inline-block;min-width:44px;text-align:center;padding:14px 6px;margin:-14px -6px}  /* cible de 44 px, sans bouger la ligne */
.consent .b{display:flex;gap:8px}
.consent button{font:600 13px var(--sans);padding:8px 14px;border-radius:6px;border:1px solid var(--f2);background:transparent;color:var(--e1);cursor:pointer;min-height:44px}
.consent button.ok{background:var(--e1);color:var(--n0);border-color:var(--e1)}

/* ── PRODUCTION : les écritures des huit autres langues (03/10) ──
   La Fraunces de la v4 n'a ni cyrillique, ni hangul, ni idéogrammes. Laissés au navigateur, les titres
   mêleraient deux polices dans une même ligne (« Nvidia » en Fraunces, « Золото » en Palatino), et un
   iPhone ne les dessinerait pas comme un ordinateur (Song sur Mac, PingFang sur iPhone). Chaque
   écriture reçoit donc des polices nommées, les mêmes partout :
   · russe : la Plex Sans (auto-hébergée, avec son cyrillique), celle du texte de la page ;
   · chinois, coréen : la Plex Sans pour les lettres latines, puis la police du système (PingFang,
     Apple SD Gothic Neo ; YaHei, Malgun sous Windows ; Noto CJK sous Android), sans approche négative,
     un cran plus petite (un idéogramme remplit son carré : à corps égal il paraît plus grand, et les
     onze signes de « 比特币。英伟达。黄金。 » doivent tenir sur une ligne), avec un interligne qui laisse
     respirer deux lignes pleines ; le coréen ne se coupe qu'entre deux mots (keep-all) ;
   · le vietnamien, le turc, le portugais, l'espagnol et l'indonésien gardent la Fraunces (elle a leurs signes).
   Les chiffres monumentaux (300+, ~5 %) et le nom StratiDex restent en Fraunces dans les dix langues :
   .num, .marque et .p-marque ne sont pas touchés. Rien ici ne s'applique au français ni à l'anglais. */
:root:lang(zh){--cjk:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",sans-serif}
:root:lang(ko){--cjk:"IBM Plex Sans","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR","Source Han Sans K",sans-serif;word-break:keep-all}
:root:is(:lang(zh),:lang(ko)){--t-titre:min(50px,calc(var(--c7) * .084))}
@media(min-width:1024px){:root:is(:lang(zh),:lang(ko)){--t-titre:min(54px,calc(var(--c7) * .084))}}
:is(:lang(zh),:lang(ko)) :is(#h1,.titre,.outil h3,.mc-liste){font-family:var(--cjk);letter-spacing:0}
:is(:lang(zh),:lang(ko)) :is(#h1,.titre){line-height:1.2}
:lang(ru) :is(#h1,.titre,.outil h3,.mc-liste){font-family:var(--sans);letter-spacing:-.018em}
:is(:lang(zh),:lang(ko),:lang(ru)) .mc-liste{font-weight:400}
/* le chinois se coupe entre deux caractères quelconques, même au milieu d'un mot (« 加 / 密货币 ») : les phrases
   courtes ne se coupent qu'à leur ponctuation ou autour d'un mot latin (keep-all), et si un morceau ne tient
   pas dans la ligne, il se coupe quand même (anywhere) plutôt que de déborder */
:lang(zh) :is(.chapeau,.mc-leg,.ea-note,.qr-fixe span){word-break:keep-all;overflow-wrap:anywhere}
/* russe et vietnamien : au corps du français, la plus longue ligne du titre (« Биткоин. Nvidia. Золото. » en Plex Sans,
   « Chỉ một cuộc trò chuyện. ») dépasse la colonne de 4 % et de 3 % au téléphone, et le h1 passerait à trois
   lignes : le titre y prend un cran de moins (mesuré à 360 et 390 px) ; à l'ordinateur il ne change presque pas */
:root:lang(ru){--t-titre:min(54px,calc(var(--c7) * .086))}
:root:lang(vi){--t-titre:min(54px,calc(var(--c7) * .088))}
@media(min-width:1024px){:root:lang(ru){--t-titre:min(60px,calc(var(--c7) * .086))}:root:lang(vi){--t-titre:min(60px,calc(var(--c7) * .088))}}
/* le bas du pied au très petit téléphone (< 375 px) : le nom de la langue est plus long en portugais, en indonésien
   et en vietnamien (« Português », 117 px, contre 106 pour « Français ») et repoussait les quatre réseaux sur une
   seconde ligne (+56 px). Ils se rapprochent d'un cran (8 → 4 px, la base du système) au lieu de passer dessous */
@media(max-width:374px){:is(:lang(pt),:lang(id),:lang(vi)) .p-bas{column-gap:var(--sp-2)}:is(:lang(pt),:lang(id),:lang(vi)) .reseaux{gap:var(--sp-1)}}
/* le champ du Copy-wallet sous 390 px : « ✓ Following », « ✓ Đang theo dõi »… sont plus larges que « ✓ Suivi », et
   l'ellipse du navigateur revenait sur l'adresse d'exemple (« 0x7a3f5e2… 0c91 », le blanc que la v4 avait supprimé en la
   coupant elle-même). Le champ se resserre d'un cran (écarts et marges du bouton), la hauteur du bouton ne change pas :
   l'adresse tient entière à 360, 375 et 384 px dans ces cinq langues. Le français ne bouge pas (mesuré). */
@media(max-width:389px){:is(:lang(en),:lang(ru),:lang(vi),:lang(pt),:lang(es)) .champ{gap:6px}:is(:lang(en),:lang(ru),:lang(vi),:lang(pt),:lang(es)) .ou-ex{margin-right:6px}:is(:lang(en),:lang(ru),:lang(vi),:lang(pt),:lang(es)) .ou-suivre{padding:0 10px 0 8px}:is(:lang(en),:lang(ru),:lang(vi),:lang(pt),:lang(es)) .ou-suivre .ou-l{gap:4px}}
/* ════ fin de la coquille ════ */

/* ══ LA LECTURE : rien de ce qui suit n'existe sur l'accueil ════════════
   On lit : le rythme est plus serré que les « idées » de l'accueil (88 → 104 px) — 48 px entre
   deux blocs au téléphone, 64 px à l'ordinateur. Une ligne de texte tient ~70 signes. */
:root{--mesure:36em;--bloc:var(--sp-7)}
@media(min-width:1024px){:root{--bloc:var(--sp-8)}}

/* ── LES VOIX : l'étiquette du pied, la note, le chapeau ─────────────── */
/* l'étiquette : la voix des rubriques du pied (13 px, capitales espacées), jamais la machine à écrire */
.etiquette{font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
.cap{font:400 var(--t-note)/1.5 var(--sans);color:#8A8EA6}
.cap b{font-weight:500;color:#AEB2C3}
.fine{font-size:var(--t-note);line-height:1.5;color:#8A8EA6;max-width:34em}
.fine a{color:#AEB2C3;text-decoration:underline 1px rgba(174,178,195,.4);text-underline-offset:3px}
.lead{max-width:34em}
.small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:#8A8EA6}
/* un lien qui mène ailleurs, avec sa flèche (« → toutes les actions ») : la voix de l'adresse du pied */
.lien{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;color:#F4F5F9;font:500 var(--t-texte)/1.3 var(--sans);text-decoration:underline 1px rgba(244,245,249,.35);text-underline-offset:5px;transition:text-decoration-color var(--t-ui) var(--depot),scale var(--t-geste) var(--depot)}
.lien span{display:inline-block;transition:translate var(--t-ui) var(--ressort)}
.lien:hover{text-decoration-color:rgba(244,245,249,.85)}
.lien:hover span{translate:4px 0}
.lien:active{scale:.98}

/* ── LA PAGE : la grille de l'accueil, les mots à gauche ─────────────────
   Téléphone : un axe, la colonne pleine. Ordinateur : les 12 colonnes de la v4 ; le texte tient les
   colonnes 1 à 7, comme les mots de l'accueil, et le sommaire colle à droite (10 à 12). Les Docs
   ajoutent leur navigation à gauche ; le hub, les familles et les fiches prennent toute la largeur. */
.page{padding-block:var(--sp-2) var(--sp-8)}
.grille{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.corps{min-width:0}
.rail-d{display:none}
@media(min-width:1024px){
  .page{padding-top:var(--sp-5)}
  .grille{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout)}
  .grille>.corps{grid-column:1/8;grid-row:1}
  .grille>.rail-d{display:block;grid-column:10/13;grid-row:1;align-self:stretch}
  .grille>.rail-g{grid-column:1/4;grid-row:1;align-self:stretch}
  .a-docs .grille>.corps{grid-column:4/11}
  .a-docs .grille>.rail-d{grid-column:11/13}
  .grille.large>.corps{grid-column:1/-1}
  /* le rail colle sous l'en-tête et défile seul quand il dépasse l'écran ; son haut s'aligne sur le fil d'Ariane */
  .rail{position:sticky;top:calc(var(--tete) + var(--sp-5));max-height:calc(100vh - var(--tete) - var(--sp-7));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3A3E5E transparent;padding-top:14px}
  .rail-g .rail{padding-bottom:var(--sp-6);-webkit-mask-image:linear-gradient(#000 calc(100% - var(--sp-6)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--sp-6)),transparent)}
}

/* ── LE FIL D'ARIANE : la voix de l'étiquette ────────────────────────── */
.ariane ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-2);font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
.ariane li{display:flex;align-items:center;gap:var(--sp-2);min-height:44px}
.ariane li+li::before{content:"›"/"";color:#6B7090}
/* la cible atteint 44 px par une marge intérieure reprise par une marge négative : une marche d'un mot court ne pousse rien */
.ariane a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-inline:14px;margin-inline:-14px;color:#AEB2C3;text-decoration:none;transition:color var(--t-geste)}
.ariane a:hover{color:#F4F5F9}
/* le lien « Docs » de l'en-tête, quand on est dans les Docs : la couleur du survol, gardée */
.nav-l[aria-current="page"]{color:#F4F5F9}

/* ── LE HAUT DE PAGE : le titre de l'accueil, puis la phrase-réponse ─────
   Le H1 a la taille et l'argent des titres de l'accueil (--t-titre, le même dégradé) ; le dégradé se
   répète à chaque ligne (une tuile de la hauteur d'une ligne), comme sur les deux lignes du titre de
   l'accueil : un titre sur trois lignes ne s'assombrit pas vers le bas. */
.intro h1,.m-id h1{--lh:1.05;font-size:var(--t-titre);line-height:var(--lh);letter-spacing:-.028em;text-wrap:balance;background:linear-gradient(180deg,#F7F8FB 25%,#AEB3C6) 0 0/100% calc(var(--lh) * 1em) repeat-y;-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{margin-top:var(--sp-2)}
.intro>.etiquette{margin-bottom:var(--sp-3)}
.intro>.cap{margin-top:var(--sp-3)}
.intro>.lead{margin-top:var(--sp-4)}
.intro+.appel,.h-etat+.appel{margin-top:var(--sp-5)}

/* ── LE TEXTE COURANT ────────────────────────────────────────────────── */
.prose{line-height:1.6}
.prose>*{max-width:var(--mesure)}
.prose>*+*{margin-top:var(--sp-4)}
.intro+.prose{margin-top:var(--sp-6)}
.prose h2{margin-top:var(--bloc);font-size:var(--t-outil);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.prose h2+*{margin-top:var(--sp-3)}
.prose h3{margin-top:var(--sp-6);font:600 var(--t-texte)/1.4 var(--sans);color:#F4F5F9}
.prose h3+*{margin-top:var(--sp-2)}
.prose p,.prose li{color:#AEB2C3}
.prose a,.lire a{color:#F4F5F9;text-decoration:underline 1px rgba(244,245,249,.35);text-underline-offset:4px;text-decoration-skip-ink:auto;transition:text-decoration-color var(--t-geste)}
.prose a:hover,.lire a:hover{text-decoration-color:rgba(244,245,249,.85)}
.prose ul,.prose ol{display:grid;gap:var(--sp-2)}
.prose ul>li{position:relative;padding-left:1.3em}
.prose ul>li::before{content:"";position:absolute;left:.15em;top:.8em;width:.5em;height:1px;background:#8A8EA6}
.prose ol{counter-reset:n}
.prose ol>li{position:relative;padding-left:1.8em;counter-increment:n}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.2em;font:500 var(--t-note)/1.6 var(--sans);color:#8A8EA6;font-variant-numeric:tabular-nums}
/* du code : une donnée machine, la seule place de la Plex Mono avec les adresses */
.prose code{font:400 .88em/1 var(--mono);color:#F4F5F9;background:#1A1C36;border-radius:4px;padding:.14em .36em}
/* 04/10 : un nom de champ (« pre-ipo », « isolated-only ») ne se coupe pas à son trait d'union, sa pastille ne se casse
   pas en deux ; le plus long des codes d'une phrase (l'adresse de l'API, sur /data) tient dans 328 px */
.prose :not(pre)>code{white-space:nowrap}
/* un bloc de code (la commande d'exemple de /data, 04/10) : la ligne se replie dans son cadre — au téléphone, une
   commande longue ne fait jamais défiler la page de côté, et elle reste lisible en entier sans geste */
.prose pre{padding:var(--sp-3) var(--sp-4);background:#1A1C36;border-radius:var(--r1)}
.prose pre code{padding:0;background:none;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
/* aucune italique n'est servie (fonts.css) : l'accent passe par la couleur, pas par une fausse italique */
.prose em{font-style:normal;color:#F4F5F9}
.prose blockquote{padding-left:var(--sp-4);border-left:1px solid rgba(237,239,244,.2)}
.prose hr{border:0;height:1px;background:var(--filet)}
/* un tableau de contenu (tarifs, « comment ça marche ») : des filets seuls ; la première colonne se lit comme un
   titre de ligne. Au téléphone, il défile dans son cadre, jamais la page. 15 px : le corps de la bulle du bot. */
.tableau{overflow-x:auto;scrollbar-width:thin;border-top:1px solid rgba(237,239,244,.2)}
.prose>.tableau{max-width:none}
.tableau table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tableau th,.tableau td{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--filet);text-align:left;vertical-align:top}
.tableau thead th{padding-block:var(--sp-2);font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6;white-space:nowrap}
.tableau tbody th{font-weight:500;color:#F4F5F9;min-width:9em}
.tableau td{color:#AEB2C3;min-width:12em}
.tableau td b{color:#F4F5F9}
.tableau:focus-visible{outline-offset:2px}
/* au téléphone, une rangée = un bloc : le libellé, puis chaque valeur sous le titre de sa colonne (data-th, dans la
   voix de l'étiquette). Trois colonnes ne tiennent pas dans 350 px sans couper un mot : rien ne défile, rien n'est coupé */
@media(max-width:639px){
  .tableau{overflow:visible}
  .tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tableau table,.tableau tbody,.tableau tr,.tableau th,.tableau td{display:block}
  .tableau tr{padding-block:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--filet)}
  .tableau th,.tableau td{padding:0;border:0;min-width:0}
  .tableau tbody th{font-size:var(--t-texte);line-height:1.35}
  .tableau td{margin-top:var(--sp-2);font-size:var(--t-texte);line-height:1.45}
  .tableau td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
  .tableau td.vide{display:none}
}

/* ── LES BLOCS : un filet, un titre à la taille des outils de l'accueil ──
   Le texte courant n'en a pas (on lit d'un trait) ; les blocs de structure (étapes, questions,
   liens, voisins) en ont un, pour qu'on les trouve en survolant la page. */
.bloc{margin-top:var(--bloc)}
.bloc>.fs{display:grid;gap:var(--sp-3);padding-top:var(--sp-5);border-top:1px solid var(--filet)}
.bloc>.fs+*{margin-top:var(--sp-5)}
.bloc h2{font-size:var(--t-outil);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}

/* ── LES ÉTAPES : une pastille, un titre, et parfois le vrai écran du bot ── */
.etapes{display:grid;gap:var(--sp-6)}
.etape{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--sp-4);align-items:start}
.pas{grid-column:1;grid-row:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #6B7090;font:500 14px/1 var(--sans);color:#F4F5F9;font-variant-numeric:lining-nums}
/* le trait qui relie les pastilles : on suit le chemin sans lire les numéros */
.etape::before{content:"";position:absolute;left:15.5px;top:40px;bottom:calc(var(--sp-6) * -1 + 8px);width:1px;background:var(--filet)}
.etape:last-child::before{display:none}
.etape h3{grid-column:2;grid-row:1;align-self:center;font:600 var(--t-texte)/1.35 var(--sans);color:#F4F5F9}
.etape>.lire{grid-column:2;margin-top:var(--sp-2);line-height:1.6;max-width:var(--mesure)}
.etape>.lire b{color:#F4F5F9;font-weight:600}
.etape>.ecran{grid-column:2;margin-top:var(--sp-4)}
/* téléphone : l'écran prend toute la largeur, ses tableaux tiennent sur une ligne */
@media(max-width:639px){.etape>.ecran{grid-column:1/-1}.etape:has(>.ecran)::before{display:none}}
.etapes+.appel{margin-top:var(--sp-6)}

/* ── L'ÉCRAN DU BOT : la bulle de l'accueil (outils.css), plus le clavier de Telegram ──
   Le texte vient tel quel de src/bot/ecrans ; ses tableaux alignés au caractère restent sur une
   ligne, et c'est la bulle qui défile si un écran étroit ne suffit pas, jamais la page. */
/* 04/10 : la colonne de l'écran (et celle du clavier, plus bas) peut descendre sous la largeur de sa plus longue rangée
   de touches : sinon, à 360 px, la rangée des six onglets du bot en russe élargissait toute la page */
.ecran{margin:0;display:grid;gap:4px;max-width:26rem;min-width:0;grid-template-columns:minmax(0,1fr)}
.fenetre{background:#1E2140;border-radius:18px 18px 18px 6px;padding:12px 16px;font:400 15px/1.5 var(--sans);color:#F4F5F9;box-shadow:0 24px 48px -24px #000c;white-space:pre-wrap;overflow-wrap:break-word;overflow-x:auto;scrollbar-width:thin}
.fenetre b{font-weight:600}
.fenetre code{font:400 13px/1.5 var(--mono);color:#F4F5F9;white-space:pre;font-variant-numeric:tabular-nums}
.fenetre i{font-style:normal;color:#AEB2C3}
.fenetre a{color:#9FB4F0;text-decoration:none}
.clavier{display:grid;gap:4px;grid-template-columns:minmax(0,1fr)}
.clavier .rang{display:flex;gap:4px}
/* 04/10 : une touche trop longue se coupe à la fin, avec « … », comme dans Telegram. En boîte flexible centrée, son
   texte débordait des DEUX côtés sans points de suite (« · 🔥 Populaires · » se lisait « Populair ») : un bloc centré
   de 40 px de haut, sur une ligne, garde l'ellipse. Une touche qui tient ne bouge pas. */
.touche{flex:1 1 0;min-width:0;display:block;text-align:center;padding:0 6px;border-radius:10px;background:rgba(237,239,244,.08);font:500 14px/40px var(--sans);color:#F4F5F9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* les boutons colorés de Telegram (danger, succès, principal) : reproduits, sans crier */
.touche[data-style="danger"]{color:#E2A3A3;background:rgba(217,130,130,.12)}
.touche[data-style="success"]{color:#9BD3BF;background:rgba(111,191,163,.12)}
.touche[data-style="primary"]{background:rgba(159,180,240,.18)}
.ecran figcaption{margin-top:var(--sp-1)}

/* ── L'APPEL : le seul bouton Telegram de la page, au format des Commencer de l'accueil (56 px) ── */
.appel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4)}
.appel .fine{flex:1 1 16em}
/* 04/10 : le bouton d'une fiche porte le nom du marché (« Trader Samsung Electronics dans Telegram ») ; le .btn de
   l'accueil ne se replie jamais (nowrap, 56 px) et, entre 360 et 430 px, il élargissait la page de côté. Ici il se
   replie sur deux lignes équilibrées et centrées ; sur une ligne, il garde exactement sa forme (56 px, centré). */
main .appel .btn{max-width:100%;height:auto;min-height:56px;padding-block:8px;white-space:normal;line-height:1.25;text-align:center;text-wrap:balance}

/* ── LES QUESTIONS : <details> natif, le chevron et le filet du pied ──── */
.faq{border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:56px;padding-block:var(--sp-3);cursor:pointer;font:500 var(--t-texte)/1.4 var(--sans);color:#F4F5F9;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
/* la question est un titre (H3 dans un bloc, H2 sur la page FAQ) : elle garde la voix du texte, pas celle d'un titre */
.faq summary :is(h2,h3){font:inherit;color:inherit;letter-spacing:0;text-wrap:pretty}
.faq summary:hover .chev{border-color:#F4F5F9}
.faq summary:active{color:#AEB2C3}
.faq .chev{flex:none}
.faq details[open] .chev{rotate:225deg;translate:0 2px}
.faq .rep{padding-bottom:var(--sp-5);line-height:1.6;max-width:var(--mesure)}
.faq .rep>*+*{margin-top:var(--sp-3)}
@supports selector(::details-content){
  .faq details::details-content{height:0;overflow:clip;transition:height var(--t-ui) var(--ressort),content-visibility var(--t-ui) allow-discrete}
  .faq details[open]::details-content{height:auto}
}
/* le pied cache .chev dès 640 px (ses rubriques y sont ouvertes) : pas ceux de la lecture */
.faq .chev,.d-nav .chev{display:block}

/* ── LES LIENS : une liste à filets, le type à droite dans la voix de l'étiquette ── */
.liens ul{border-top:1px solid var(--filet)}
.liens li{border-bottom:1px solid var(--filet)}
.liens a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:56px;padding-block:var(--sp-2);text-decoration:none;color:#F4F5F9;font:500 var(--t-texte)/1.35 var(--sans);-webkit-tap-highlight-color:transparent;transition:color var(--t-geste),scale var(--t-geste) var(--depot)}
.liens a .t{text-decoration:underline 1px rgba(244,245,249,0);text-underline-offset:5px;transition:text-decoration-color var(--t-ui) var(--depot)}
.liens a:hover .t{text-decoration-color:rgba(244,245,249,.45)}
.liens a .cap{flex:none;font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.liens a:active{scale:.99}
/* sur les pages larges, une liste de liens ne traverse pas tout l'écran : l'œil perdrait la ligne */
.large .liens{max-width:46rem}

/* ── LES VOISINES (Docs) : la page précédente, la suivante ─────────────── */
.voisines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);border-top:1px solid var(--filet)}
.bloc.voisines{margin-top:var(--sp-6)}
.voisines a{display:grid;align-content:start;gap:var(--sp-1);min-height:44px;padding-top:var(--sp-4);text-decoration:none;-webkit-tap-highlight-color:transparent}
.voisines .suiv{grid-column:2;text-align:right;justify-items:end}
.voisines .t{font:500 var(--t-texte)/1.35 var(--sans);color:#F4F5F9;text-decoration:underline 1px rgba(244,245,249,0);text-underline-offset:5px;transition:text-decoration-color var(--t-ui) var(--depot)}
.voisines a:hover .t{text-decoration-color:rgba(244,245,249,.45)}

/* ── LA LIGNE DE RISQUE : sur chaque page, sous le contenu ───────────────
   Le filet court sur toute la colonne ; seul le texte garde sa mesure. */
.risque{margin-top:var(--bloc);padding-top:var(--sp-4);padding-right:calc(100% - min(100%, 42em));border-top:1px solid var(--filet);font-size:var(--t-note);line-height:1.55;color:#8A8EA6}
.voisines+.risque{margin-top:var(--sp-6)}
.risque b{color:#AEB2C3;font-weight:600}
.risque a{color:#AEB2C3;text-decoration:underline 1px rgba(174,178,195,.4);text-underline-offset:3px}
.risque a:hover{color:#F4F5F9}

/* ── LA NAVIGATION DES DOCS : un <details> au téléphone, un rail à l'ordinateur ──
   Fermée par défaut au téléphone : on arrive pour lire la page, pas le plan. À 1 024 px, site.js
   l'ouvre ; ::details-content l'affiche même avant le script. La page courante : le blanc du survol. */
.d-nav{margin-bottom:var(--sp-2);border-block:1px solid var(--filet)}
.d-nav>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.d-nav>summary::-webkit-details-marker{display:none}
.d-nav>summary .ou{display:flex;align-items:baseline;gap:var(--sp-2);min-width:0;font:500 15px/1.3 var(--sans);color:#F4F5F9}
.d-nav>summary .ou .etiquette{flex:none}
.d-nav>summary .ou span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-nav[open]>summary .chev{rotate:225deg;translate:0 2px}
.d-nav .plan{padding-bottom:var(--sp-3)}
.d-nav .groupe+.groupe{margin-top:var(--sp-3)}
.d-nav .d-g{padding-block:var(--sp-3) var(--sp-1);font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
.d-nav a{display:flex;align-items:center;min-height:44px;padding-inline:var(--sp-3);margin-inline:calc(var(--sp-3) * -1);border-radius:var(--r1);font:400 15px/1.3 var(--sans);color:#AEB2C3;text-decoration:none;transition:color var(--t-geste),background-color var(--t-geste)}
.d-nav a:hover{color:#F4F5F9;background:rgba(237,239,244,.04)}
.d-nav a[aria-current="page"]{color:#F4F5F9;background:rgba(237,239,244,.07)}
@supports selector(::details-content){
  .d-nav::details-content{height:0;overflow:clip;transition:height var(--t-ui) var(--ressort),content-visibility var(--t-ui) allow-discrete}
  .d-nav[open]::details-content{height:auto}
}
@media(min-width:1024px){
  .d-nav{margin:0;border:0}
  .d-nav>summary{display:none}
  .d-nav .plan{padding:0}
  .d-nav .groupe:first-child .d-g{padding-top:0}
  @supports selector(::details-content){.d-nav::details-content,.d-nav:not([open])::details-content{height:auto;content-visibility:visible}}
}
/* au téléphone, le résumé du <details> dit déjà où l'on est : le fil d'Ariane s'efface */
@media(max-width:1023px){.a-docs .ariane{display:none}}

/* ── LE SOMMAIRE DE LA PAGE (rail droit, ordinateur seulement) ───────────
   La section qu'on lit : le blanc du texte et un trait d'argent — l'accent reste à ce que fait le bot. */
.sommaire>.etiquette{padding-bottom:var(--sp-2)}
.sommaire ol{border-left:1px solid var(--filet)}
.sommaire a{display:flex;align-items:center;min-height:44px;padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);margin-left:-1px;border-left:1px solid transparent;font:400 var(--t-note)/1.4 var(--sans);color:#8A8EA6;text-decoration:none;transition:color var(--t-geste),border-color var(--t-geste)}
.sommaire a:hover{color:#F4F5F9}
.sommaire a[aria-current]{color:#F4F5F9;border-left-color:#EDEFF4}

/* ── ARTICLE : « En bref », sources ─────────────────────────────────── */
.en-bref{margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5) var(--sp-5);border:1px solid var(--filet);border-radius:var(--r2);max-width:var(--mesure)}
.en-bref ul{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.en-bref li{position:relative;padding-left:1.3em;line-height:1.55;color:#F4F5F9}
.en-bref li::before{content:"";position:absolute;left:.1em;top:.78em;width:.5em;height:1px;background:#8A8EA6}
.dans .etapes{margin-top:var(--sp-2)}
.dans .appel{margin-top:var(--sp-6)}
/* les sources se lisent en dernier : un titre dans la voix de l'étiquette, pas un H2 à la taille des outils */
.bloc.discret>.fs h2{font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
.bloc.discret>.fs+*{margin-top:var(--sp-2)}
.sources ol{display:grid;counter-reset:s}
.sources li{display:flex;align-items:baseline;gap:var(--sp-3);counter-increment:s;font-size:var(--t-note);line-height:1.55;color:#8A8EA6}
.sources li::before{content:counter(s);flex:none;min-width:1.2em;font:500 13px/1.55 var(--sans);color:#8A8EA6}
.sources a{display:inline-flex;align-items:center;min-height:44px;color:#AEB2C3;text-decoration:underline 1px rgba(174,178,195,.4);text-underline-offset:3px;overflow-wrap:anywhere}
.sources a:hover{color:#F4F5F9}

/* ── LE SÉLECTEUR (le tri d'une famille, le filtre des guides) ───────────
   Le choix courant : le blanc du texte et un trait d'argent qui glisse — l'accent reste au bot. */
.choix{position:relative;display:flex;flex-wrap:nowrap;margin-inline-start:-12px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.choix::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filet);pointer-events:none}
.choix [role=radio]{min-height:44px;min-width:44px;padding:0 12px;font:500 15px/1 var(--sans);color:#8A8EA6;white-space:nowrap;transition:color var(--t-geste) var(--depot),scale var(--t-geste) var(--depot);-webkit-tap-highlight-color:transparent}
.choix [role=radio]:hover{color:#AEB2C3}
.choix [role=radio][aria-checked=true]{color:#F4F5F9}
.choix [role=radio]:active{scale:.97}
.choix [role=radio]:focus-visible{outline-offset:-2px}
.choix-trait{position:absolute;left:0;top:0;height:2px;width:var(--cw,0px);transform:translate(var(--cx,0px),var(--cy,0px));background:#EDEFF4;border-radius:1px;pointer-events:none;display:none;z-index:1}
.choix.pret .choix-trait{display:block}
.choix.anime .choix-trait{transition:transform var(--t-ui) var(--ressort),width var(--t-ui) var(--ressort)}
.choix:not(.pret) [aria-checked=true]{box-shadow:inset 0 -2px #EDEFF4}

/* ── LE SOMMAIRE DES GUIDES (et du blog) : une liste à filets ────────────
   Les titres en Fraunces, à la taille des outils de l'accueil ; une colonne, celle des mots. */
.filtre{margin-top:var(--sp-5);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline-start:-12px;padding-inline-start:12px}
.filtre::-webkit-scrollbar{display:none}
.filtre>.choix{width:max-content;min-width:100%}
.filtre-vide{padding-block:var(--sp-5);color:#8A8EA6}
/* sans script, le filtre ne ferait rien : il n'apparaît pas, la liste est complète */
html:not(.js) .filtre{display:none}
.b-liste{margin-top:var(--sp-5);display:grid;max-width:46rem;border-top:1px solid var(--filet)}
.b-item{border-bottom:1px solid var(--filet)}
.b-item[hidden]{display:none}
.b-lien{display:grid;gap:var(--sp-2);padding-block:var(--sp-5);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:scale var(--t-geste) var(--depot)}
.b-titre{font-size:var(--t-outil);line-height:1.1;letter-spacing:-.018em;color:#F4F5F9;text-wrap:balance;text-decoration:underline 1px rgba(244,245,249,0);text-underline-offset:6px;transition:text-decoration-color var(--t-ui) var(--depot)}
.b-lien:hover .b-titre{text-decoration-color:rgba(244,245,249,.45)}
.b-resume{line-height:1.55;color:#AEB2C3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.b-lien:active{scale:.995}
/* les guides : une seule catégorie, son étiquette ne se répète pas sur chaque titre */
.a-guides .b-lien>.etiquette{display:none}

/* ── LA FICHE D'UN MARCHÉ ────────────────────────────────────────────────
   Au téléphone : le nom, le prix, la phrase, le bouton — le prix est ce qu'on vient chercher. À
   l'ordinateur, le prix passe à droite, où l'accueil pose son sigle. Le prix a l'argent des chiffres
   de l'accueil (Fraunces 440, --argent), à la taille du titre ; il est seul sur sa ligne (Fraunces
   n'a pas de chiffres tabulaires : sa largeur qui bouge ne pousse rien). */
.m-tete{display:grid;row-gap:var(--sp-4)}
.m-id{margin-top:var(--sp-2)}
.m-id>.cap{margin-top:var(--sp-3);font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6}
.m-tete>.appel{margin-top:var(--sp-2)}
.m-prix{display:grid;gap:var(--sp-2);align-content:end}
.m-px{font:440 var(--t-titre)/1 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;letter-spacing:-.03em;font-variant-numeric:lining-nums;white-space:nowrap;background:var(--argent);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.m-var{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);font:400 var(--t-note)/1.5 var(--sans);color:#8A8EA6}
.m-var [data-var]{font:500 var(--t-texte)/1.2 var(--sans);font-variant-numeric:tabular-nums;color:#F4F5F9}
@media(min-width:1024px){
  .m-tete{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout)}
  .m-id,.m-tete>.lead,.m-tete>.appel{grid-column:1/8}
  .m-prix{grid-column:9/13;grid-row:1/4;align-self:end;justify-items:end;text-align:right;padding-bottom:var(--sp-2)}
  .m-var{justify-content:flex-end}
}
/* une variation se lit à son signe : ni vert ni rouge (un seul accent, réservé au bot) */
[data-var]{color:#AEB2C3}
/* quatre faits, tirés des données : famille, levier, place, week-end */
.faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5)}
.faits>div{padding-block:var(--sp-3) var(--sp-4);border-top:1px solid var(--filet)}
.faits dd{margin-top:var(--sp-2);font:500 var(--t-texte)/1.35 var(--sans);color:#F4F5F9}
/* un fait lié d'un seul mot court (« 주식 », « 股票 ») reste une cible de 44 × 44 px */
.faits dd a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-block:-10px;color:inherit;text-decoration:underline 1px rgba(244,245,249,.35);text-underline-offset:4px}
@media(min-width:640px){.faits{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* six voisins : deux colonnes au téléphone, trois à la tablette, une rangée à l'ordinateur */
.voisins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.v-tuile{display:grid;align-content:start;gap:2px;min-height:96px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--filet);border-radius:var(--r2);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-color var(--t-geste),background-color var(--t-geste),scale var(--t-geste) var(--depot)}
.v-tuile:hover{border-color:#3A3E5E;background:rgba(237,239,244,.03)}
.v-tuile:active{scale:.98}
.v-nom{font:600 var(--t-texte)/1.25 var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0;color:#F4F5F9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-px{margin-top:var(--sp-1);font:500 15px/1.3 var(--sans);color:#F4F5F9;font-variant-numeric:tabular-nums}
.v-tuile [data-var]{font:400 13px/1.3 var(--sans);color:#8A8EA6;font-variant-numeric:tabular-nums}
@media(min-width:640px){.voisins{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.voisins{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ── LA PAGE D'UNE FAMILLE, LE HUB : des tableaux de marchés ─────────────
   Plex Sans à chiffres tabulaires (plus de machine à écrire) ; le ticker dans la voix de l'étiquette. */
.tri{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-6)}
.tri .cmd{display:flex;align-items:center;gap:var(--sp-3)}
.tri .choix{margin-inline-start:0}
html:not(.js) .tri .cmd{display:none}
.table-defile{overflow-x:auto;margin-top:var(--sp-2);scrollbar-width:thin}
.marches{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.marches th{padding:var(--sp-2);border-bottom:1px solid rgba(237,239,244,.2);font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8A8EA6;text-align:right;white-space:nowrap}
.marches th:first-child,.marches td:first-child{text-align:left;padding-left:0}
.marches th:last-child,.marches td:last-child{padding-right:0}
.marches th[aria-sort]:not([aria-sort="none"]){color:#F4F5F9}
.marches tr{position:relative}
.marches td{height:56px;padding:0 var(--sp-2);border-bottom:1px solid var(--filet);font:400 15px/1.3 var(--sans);color:#F4F5F9;text-align:right;white-space:nowrap}
.marches td.m-nom{white-space:normal}
.m-nom a,.m-nom .m-lib{display:flex;flex-direction:column;justify-content:center;min-height:52px;text-decoration:none;font:500 var(--t-texte)/1.25 var(--sans);color:#F4F5F9}
/* toute la ligne se touche : le lien du nom s'étend sur la rangée */
.m-nom a::after{content:"";position:absolute;inset:0}
.m-nom .tk{font:500 12px/1.4 var(--sans);letter-spacing:.06em;color:#8A8EA6}
.marches tbody tr:hover td{background:rgba(237,239,244,.03)}
.marches tbody tr:hover .m-nom a>span:first-child{text-decoration:underline 1px rgba(244,245,249,.45);text-underline-offset:4px}
.marches .vol,.marches .lev,.marches .frais{color:#AEB2C3}
/* au téléphone, le levier se lit sur la fiche ; les en-têtes passent à la ligne (« FRAIS DE / MARCHÉ ») :
   les colonnes tiennent dans l'écran au lieu d'en cacher une hors du cadre */
@media(max-width:639px){.marches .col-lev{display:none}.marches td{font-size:13px}.marches th{font-size:12px;letter-spacing:.05em;white-space:normal;vertical-align:bottom}.marches th,.marches td{padding-inline:4px}.m-nom a,.m-nom .m-lib{font-size:15px}}
/* le « → » sous un extrait de tableau : un seul par bloc */
.suite-l{margin-top:var(--sp-3)}
/* un seul « En direct » sous la phrase du hub, allumé par site.js au premier prix lu */
.h-etat{margin-top:var(--sp-3);min-height:20px}
.direct::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#AEB2C3;margin-right:8px;vertical-align:2px}
/* tous les marchés de A à Z : un index qui coule ; chaque lien au moins 44 × 44 px */
.az{display:flex;flex-wrap:wrap;column-gap:var(--sp-4)}
.az li,.az a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.az li{font:500 15px/1.5 var(--sans);letter-spacing:.02em;color:#AEB2C3}
.az .x{font-size:13px;font-weight:400;letter-spacing:0;color:#8A8EA6}
.az a{min-width:44px;color:#F4F5F9;text-decoration:none;-webkit-tap-highlight-color:transparent}
.az a .s{text-decoration:underline 1px rgba(244,245,249,.35);text-underline-offset:4px;transition:text-decoration-color var(--t-geste)}
.az a:hover .s{text-decoration-color:rgba(244,245,249,.85)}
.az+.fine{margin-top:var(--sp-5)}
/* le fichier de données : un nom de fichier, une donnée machine */
.fine a[href$=".json"]{font-family:var(--mono);font-size:13px}

/* ── PAGES LÉGALES : du texte long, des titres rapprochés ─────────────── */
.legal .prose h2{margin-top:var(--sp-7)}
.legal .prose h2:first-child{margin-top:0}

/* ── 404 ─────────────────────────────────────────────────────────────── */
.page.p404{padding-top:var(--sp-7)}
.p404 .corps{max-width:40rem}
.p404 .appel{margin-top:var(--sp-6)}

/* ── UN LIEN DANS UNE PHRASE : 44 px à toucher, sans bouger la ligne ──────
   Une marge intérieure reprise par une marge négative. Hors des tableaux, qui défilent dans leur
   cadre : là, une marge qui déborde ferait naître une barre de défilement.
   04/10 (les Docs en coréen) : 8 px de chaque côté au lieu de 7 — un lien de deux syllabes coréennes (« 입금 », « 보안 »,
   les noms du pied dans le sommaire) mesure 29 px : il touchait 43 px. La ligne ne bouge toujours pas. */
:is(.prose,.lire,.risque,.fine,.lead,.cap,.en-bref) a:not([class]):not(:is(td,th) a){padding:13px 8px;margin:-13px -8px}
:is(.prose,.lire,.risque,.fine,.lead,.cap,.en-bref) a:not([class]):not(:is(td,th) a):focus-visible{outline-offset:-6px}
/* le sommaire des Docs ouvre chaque ligne par le nom d'une page, qui est souvent le libellé du pied de l'accueil (validé,
   on ne le réécrit pas) : en vietnamien « Phí » (les frais) ne mesure que 24 px. À gauche il n'y a que la puce, à droite
   le tiret : 12 px de chaque côté y portent la cible à 44 px, toujours sans bouger la ligne (04/10) */
.a-docs-index .prose li>a:first-child{padding-inline:12px;margin-inline:-12px}
/* le nom du fichier de données est en Plex Mono 13 px : sa boîte est plus basse, il lui faut un pixel de plus de chaque côté */
.fine a[href$=".json"]:not([class]){padding:14px 8px;margin:-14px -8px}

/* ── LES ÉCRITURES QUE FRAUNCES N'A PAS : celles de l'accueil (sa partie PRODUCTION) ──
   Le russe passe ses titres en Plex Sans ; le chinois et le coréen en --cjk (la Plex Sans pour les
   lettres latines, puis la police du système), sans approche négative, avec l'interligne qui laisse
   respirer deux lignes pleines — les mêmes règles que les titres de l'accueil, sur les titres d'ici. */
:lang(ru) :is(.intro h1,.m-id h1,.prose h2,.bloc h2,.b-titre,.v-nom){font-family:var(--sans);letter-spacing:-.018em}
:is(:lang(zh),:lang(ko)) :is(.intro h1,.m-id h1,.prose h2,.bloc h2,.b-titre,.v-nom){font-family:var(--cjk);letter-spacing:0}
:is(:lang(zh),:lang(ko)) :is(.intro h1,.m-id h1){--lh:1.2}
:is(:lang(zh),:lang(ko)) :is(.prose,.lead,.faq .rep,.etape>.lire){line-height:1.8}
:is(:lang(zh),:lang(ko)) :is(.etiquette,.ariane ol,.liens a .cap,.m-id>.cap,.marches th){letter-spacing:.02em}