/* STRATIDEX — FICHIER PRODUIT par src/web/accueil.mjs (accueil v4 « Strates ») depuis accueil/socle.css et accueil/fragments/*.css : ne pas le modifier ici. */
@view-transition{navigation:auto}
@property --sep{syntax:'<number>';inherits:true;initial-value:0}
@property --ouv{syntax:'<number>';inherits:true;initial-value:0}
@property --ecart{syntax:'<number>';inherits:true;initial-value:0}
@property --ferme{syntax:'<number>';inherits:true;initial-value:0}
/* ══ 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 TITRE : une taille, un argent (la seconde ligne, la promesse, aussi claire que la première) ── */
#h1,.titre{font-size:var(--t-titre);line-height:1.05;letter-spacing:-.028em;text-wrap:balance}
#h1 span,.titre span{display:block;background:linear-gradient(180deg,#F7F8FB 25%,#AEB3C6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cles{font-weight:500;color:#F4F5F9}

/* ── LE MONUMENT : 317, ~5 % ─────────────────────────────────────────── */
.num{display:block;font:440 var(--t-mon)/.86 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;letter-spacing:-.045em;font-variant-numeric:lining-nums;white-space:nowrap;background:var(--argent);-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.02em .06em}
.num .u{font-size:.44em;font-weight:500;font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;letter-spacing:0;vertical-align:.5em;margin-right:.04em}
.num .pc{font-size:.36em;letter-spacing:0;vertical-align:1.2em;margin-left:-.02em}

/* ── 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}

/* ── LE SIGLE À 360° : trois strates, un tour en 22 s ──────────────── */
.sigle{--s:180px;--prof:.04;--depart:-20.53s;--ouv:0;--ecart:0;--ferme:0;position:relative;width:var(--s);height:var(--s);perspective:calc(var(--s) * 4.5);touch-action:pan-y pinch-zoom;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:--ouv 1100ms var(--ressort),--ecart 600ms var(--ressort),--ferme 500ms var(--ressort)}
.sigle.pris{cursor:grabbing}
.sigle-prise,.sigle-tour{position:absolute;inset:0;transform-style:preserve-3d}
.sigle-tour{--sep:calc(max(var(--ouv),var(--ecart)) * (1 - var(--ferme)));animation:tour 22s linear infinite var(--depart)}
.strate{position:absolute;inset:0}
.strate svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.strate .base{filter:drop-shadow(0 calc(var(--s) * .08) calc(var(--s) * .11) rgba(0,0,0,.55)) brightness(1);transition:filter 700ms var(--depot)}
.strate .voile{filter:brightness(0);opacity:0;animation:voile 22s linear infinite var(--depart)}
.sigle .s1{transform:translate3d(0,calc(var(--sep) * var(--s) * -.13),calc(var(--s) * (var(--prof) + .16 * var(--sep))))}
.sigle .s2{transform:none}
.sigle .s3{transform:translate3d(0,calc(var(--sep) * var(--s) * .13),calc(var(--s) * (var(--prof) + .16 * var(--sep)) * -1))}
.sigle-ombre{position:absolute;left:18%;right:18%;bottom:-7%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(6px);animation:ombre 22s linear infinite var(--depart);pointer-events:none}
@keyframes tour{to{transform:rotateY(360deg)}}
@keyframes voile{0%,100%{opacity:0}25%,75%{opacity:.42}50%{opacity:.12}}
@keyframes ombre{0%,50%,100%{transform:scaleX(1)}12.5%,37.5%,62.5%,87.5%{transform:scaleX(.74)}25%,75%{transform:scaleX(.32)}}
@keyframes souleve{50%{translate:0 calc(var(--s) * -.07)}}
@keyframes tombe{from{translate:0 calc(var(--s) * -.9);opacity:0}to{translate:0 0;opacity:1}}
.sigle.souleve .s1{animation:souleve 620ms var(--ressort)}
.sigle.souleve .s2{animation:souleve 620ms var(--ressort) 80ms}
.sigle.souleve .s3{animation:souleve 620ms var(--ressort) 160ms}
@media(prefers-reduced-motion:no-preference){
  .sigle.arme .strate{opacity:0}
  .sigle.depose .s3{animation:tombe 620ms var(--ressort) both}
  .sigle.depose .s2{animation:tombe 620ms var(--ressort) 120ms both}
  .sigle.depose .s1{animation:tombe 620ms var(--ressort) 240ms both}
}
@media(hover:hover) and (pointer:fine){.sigle:hover{--ecart:.45}}

/* ── 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}}

/* ══ module ouverture — fragments/ouverture.css ══ */
/* ── OUVERTURE : la couverture ──────────────────────────────────────
   L'accueil tient en un écran (le fondateur, 20/10) : la couverture prend la hauteur que lui laissent
   la rangée des marchés et le pied (body et main en colonne : « UN SEUL ÉCRAN », socle.css).
   Téléphone : une colonne centrée autour du sigle. Ordinateur : les mots à gauche (7 colonnes), le
   sigle à droite, chacun au milieu de l'espace sous l'en-tête ; le QR sous le Commencer. */
.hero{--ov-d:200ms;position:relative;flex:1 0 auto;margin-top:calc(var(--tete) * -1);padding:calc(var(--tete) + var(--sp-4)) 0 var(--sp-6);display:flex;flex-direction:column;justify-content:center;overflow-x:clip}
.ov-col{display:flex;justify-content:center}
.sigle-hero{--s:min(200px,30svh);flex:none}
.hero-g{display:flex;flex-direction:column;align-items:center;text-align:center}

#h1{margin-top:var(--sp-6)}
.chapeau{margin-top:var(--sp-4);max-width:21em;text-wrap:balance}
.hero .cles{margin-top:var(--sp-4)}
.cta{display:flex;justify-content:center;margin-top:var(--sp-6)}
.qr-fixe{display:none}

@media(min-width:1024px){
  .hero{--ov-d:0ms;padding:0}
  /* les mots au centre de l'espace sous l'en-tête, comme le sigle à droite ; leur marge basse (24 px) reste sous le dernier bloc si l'écran est trop court */
  .hero-g{flex:1 0 auto;align-items:flex-start;justify-content:center;text-align:left;padding-top:calc(var(--tete) + var(--sp-5));padding-bottom:0}
  .hero-g>*{max-width:var(--c7)}
  #h1{margin-top:0}
  .chapeau{margin-top:var(--sp-5);max-width:min(var(--c7),27em)}
  .cta{margin-top:var(--sp-6);margin-bottom:var(--sp-5)}
  /* la colonne du sigle : toute la couverture, sous l'en-tête */
  .ov-col{position:absolute;inset:0;z-index:1;max-width:calc(1200px + 2 * var(--g));margin-inline:auto;padding:var(--tete) var(--g) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);pointer-events:none}
  .sigle-hero{--s:clamp(300px,min(28vw,50vh),420px);grid-column:8/13;justify-self:center;align-self:center;pointer-events:auto}
}
/* le QR, à l'ordinateur tenu à la souris : on scanne l'écran avec son téléphone (celui de la clôture, retirée le 20/10) */
@media(min-width:1024px) and (hover:hover){
  .hero .qr-fixe{display:flex;align-items:center;gap:14px;margin-bottom:var(--sp-5);text-align:left;font:400 var(--t-note)/1.45 var(--sans);color:#AEB2C3;max-width:232px}
  .hero .qr-fixe svg{width:88px;height:88px;border-radius:var(--r1);flex:none}
}

@media(prefers-reduced-motion:no-preference){
  /* les mots montent après les strates (une ligne après l'autre) */
  #h1 .l1,#h1 .l2,.chapeau,.hero .cles,.cta,.hero .qr-fixe{transition:opacity 800ms var(--depot),translate 900ms var(--ressort),filter 800ms var(--depot)}
  #h1 .l1{transition-delay:var(--ov-d)}
  #h1 .l2{transition-delay:calc(var(--ov-d) + 90ms)}
  .chapeau{transition-delay:calc(var(--ov-d) + 200ms)}
  .hero .cles{transition-delay:calc(var(--ov-d) + 270ms)}
  .cta{transition-delay:calc(var(--ov-d) + 340ms)}
  .hero .qr-fixe{transition-delay:calc(var(--ov-d) + 410ms)}
  @starting-style{
    #h1 .l1,#h1 .l2,.chapeau,.hero .cles,.cta,.hero .qr-fixe{opacity:0;translate:0 .35em;filter:blur(4px)}
  }
  html.js:not(.polices) :is(#h1 .l1,#h1 .l2,.chapeau,.hero .cles,.cta,.hero .qr-fixe){translate:0 .35em;filter:blur(4px)}
}
/* première visite : les mots attendent leurs polices (classe posée dans la tête, 1,5 s au plus), puis montent ;
   en mouvement réduit, ils apparaissent d'un coup, mais jamais en police de secours non plus */
html.js:not(.polices) :is(#h1 .l1,#h1 .l2,.chapeau,.hero .cles,.cta,.hero .qr-fixe){opacity:0}

/* ══ module marches — fragments/marches.css ══ */
/* ── MARCHÉS : une rangée de vrais noms, au bas de l'écran ─────────────
   L'accueil tient en un écran (le fondateur, 20/10) : le nombre (jamais l'exact) et sa légende à
   gauche, en petites capitales ; les noms défilent à droite jusqu'au bord, lentement, chacun ouvre le
   bot sur son marché. Téléphone : la légende au-dessus, la rangée sur toute la largeur. */
.mc{--mc-bord:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);position:relative;flex:none;border-top:1px solid rgba(237,239,244,.08)}
.mc-g{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding-block:var(--sp-3)}
.mc-dit{padding-inline:var(--g);font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8A8EA6;text-align:center;text-wrap:balance}
.mc-dit .num{display:inline;padding:0;font:inherit;letter-spacing:inherit;background:none;color:#AEB2C3}
.mc-dit .num .pc{font-size:inherit;vertical-align:baseline;margin:0}
.mc-leg{color:inherit}
.mc-rang{align-self:stretch;min-width:0}
/* la liste posée (mouvement réduit, sans JS) : une ligne, les douze premiers, fondue au bord */
.mc-liste{display:flex;gap:10px;overflow:hidden;padding-inline:var(--g);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);font:500 13px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.mc-liste li{flex:none}
.mc-liste li:nth-child(n+13){display:none}
.mc-liste a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid rgba(174,178,195,.22);border-radius:999px;color:#AEB2C3;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;transition:color var(--t-ui) var(--depot),border-color var(--t-ui) var(--depot),scale var(--t-geste) var(--depot)}
.mc-liste a:is(:focus-visible,:active),.mc-liste a.mc-focus{color:#F4F5F9;border-color:rgba(159,180,240,.7)}
.mc-liste a:focus-visible,.mc-liste a.mc-focus{outline:2px solid transparent}
.mc-liste a:active{scale:.97}
@media(hover:hover) and (pointer:fine){
  .mc-liste a:hover{color:#F4F5F9;border-color:rgba(159,180,240,.7)}
  .mc-rang:hover a:not(:hover,:focus-visible){color:#8A8EA6}
}
/* ordinateur : la légende à gauche, alignée sur l'en-tête ; la rangée jusqu'au bord droit de l'écran */
@media(min-width:1024px){
  .mc-g{flex-direction:row;gap:var(--sp-5)}
  .mc-dit{flex:none;padding:0 0 0 max(var(--g),calc((100vw - 1200px) / 2));text-align:left;white-space:nowrap}
  .mc-rang{flex:1;align-self:center}
  .mc-liste{padding-inline:0}
}
:is(:lang(zh),:lang(ko)) .mc-dit{letter-spacing:.06em}

/* ── le défilement : avec JS et si le mouvement est permis ; sinon, la liste posée ── */
@media(prefers-reduced-motion:no-preference){
  .js .mc-rang{overflow:hidden;overflow:clip;-webkit-mask-image:var(--mc-bord);mask-image:var(--mc-bord);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;cursor:grab}
  .js .mc-piste{display:flex;width:max-content;will-change:transform}
  /* l'écart est DANS chaque nom (padding), pas entre les copies : la boucle mesure la liste et ne saute jamais */
  .js .mc-liste{flex:none;gap:0;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
  .js .mc-liste li,.js .mc-liste li:nth-child(n+13){display:block;padding-right:10px}
  .js .mc-liste a{cursor:pointer;-webkit-user-drag:none}
  .js .mc-rang.tire,.js .mc-rang.tire a{cursor:grabbing}
}

/* ── 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)}
}

/* ── UN SEUL ÉCRAN (le fondateur, 20/10 : « juste une landing page, sans faire défiler ») ──
   La page est une colonne haute d'un écran : l'en-tête, la couverture qui prend toute la place
   restante, la rangée des marchés, le pied court. Rien n'est coupé ni caché : un écran trop court
   (ou un texte agrandi) fait défiler la page, comme avant. Seul l'accueil charge cette partie
   (lecture.mjs ne la découpe pas) ; le grand pied plus haut reste celui des pages qu'on lit. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body>.tete{flex:none}
body>main{flex:1 0 auto;display:flex;flex-direction:column}
/* le pied court (accueil/pied-court.html) : Docs, « Préférences cookies », les réseaux — centrés au téléphone, sur une ligne à l'ordinateur.
   20/10 (le fondateur) : Docs seul parmi les liens, et plus de ligne du risque — le risque se lit sur /risks, dans les Conditions,
   au pied des pages qu'on lit et dans le bot, avant le premier ordre */
.pied-court{flex:none;padding-block:var(--sp-1) var(--sp-4);font:400 13px/1.45 var(--sans);color:#8A8EA6}
.pc-g{display:grid;justify-items:center;gap:var(--sp-1);text-align:center}
.pc-liens,.pc-reseaux{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--sp-4)}
.pc-liens a,.pc-reseaux a{display:inline-flex;align-items:center;min-height:36px;color:#AEB2C3;text-decoration:none;white-space:nowrap;transition:color var(--t-geste)}
.pc-liens a:hover,.pc-reseaux a:hover{color:#F4F5F9}
/* « Préférences cookies » : retirer son accord reste à un clic (il rouvre le bandeau) — petit, souligné d'un filet, au milieu */
.pc-cookies{font-size:12px;line-height:1.5;color:#8A8EA6}
.pc-cookies a{color:inherit;text-decoration:underline;text-decoration-color:rgba(138,142,166,.45);text-underline-offset:3px;white-space:nowrap;transition:color var(--t-geste)}
.pc-cookies a:hover{color:#F4F5F9}
@media(min-width:1024px){
  .pc-g{grid-template-columns:1fr auto 1fr;align-items:center;justify-items:stretch;column-gap:var(--sp-6)}
  .pc-liens{justify-content:flex-start;flex-wrap:nowrap}
  .pc-cookies{text-align:center}
  .pc-reseaux{justify-content:flex-end;flex-wrap:nowrap}
}

/* ══ module fond — fragments/fond.css ══ */
/* ── FOND VIVANT : le champ de strates, derrière tout ──────────────── */
.fd{position:fixed;inset:0 0 auto 0;height:100vh;height:100lvh;z-index:0;pointer-events:none;contain:strict}
.fd-champ{position:absolute;inset:0;width:100%;height:100%;display:block}
body>main,body>footer{position:relative;z-index:1}
/* l'en-tête devient du verre quand on défile (assez dense pour que rien ne fasse tache dessous) ; repli opaque (socle) sinon —
   et aussi là où les Commencer ne savent pas s'effacer en passant dessous (sans animation-timeline : iOS < 26, Firefox) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) and (animation-timeline:view()){
  .tete{transition:background-color var(--t-ui) var(--depot),border-color var(--t-ui) var(--depot),-webkit-backdrop-filter var(--t-ui) var(--depot),backdrop-filter var(--t-ui) var(--depot)}
  .tete[data-scrolled]{background:rgba(11,12,26,.78);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
}
@media print{.fd{display:none}}
@media(forced-colors:active){.fd{display:none}}

/* ── 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()){
  .hero .cta .btn{animation:sous linear both;animation-timeline:view(block var(--tete) 0px);animation-range:exit 0% exit 50%}
  @keyframes sous{to{opacity:0}}
}}

/* ── LE SIGLE AU DÉFILEMENT (téléphone) ── */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* l'ouverture du sigle (téléphone) : les strates s'écartent quand on commence à descendre */
    @keyframes ouvre{from{--ouv:0;opacity:1}to{--ouv:1;opacity:.5}}
    @media(max-width:1023px){.sigle-hero{animation:ouvre linear both;animation-timeline:scroll(root);animation-range:0 clamp(160px,24vh,240px)}}
  }
}

/* ── 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,.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,.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,.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)}}