/* ⚠️ Polices HÉBERGÉES ICI (21/09, référencement / Core Web Vitals) : la feuille de Google
   Fonts bloquait l'affichage ~0,8 s sur mobile (chaîne googleapis → gstatic). Ce sont les
   MÊMES fichiers woff2 que Google servait (polices variables, un fichier couvre toutes les
   graisses), avec les mêmes unicode-range — rendu identique. Licence OFL. */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/geist-mono-symbols2.woff2) format('woff2');unicode-range:U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   Direction D — corrigée.
   Ce qui ne bouge pas de D : hero pleine vidéo, dock promo à 3
   codes, angles droits, tout en capitales larges, near-black.
   Ce qui est corrigé :
     1. Anton et IBM Plex Mono → les polices du site
        (Montserrat 900 pour l'affichage, Bricolage Grotesque
         pour les micro-étiquettes, Inter pour le texte).
     2. Les 5 chiffres du bandeau étaient inventés → remplacés
        par des chiffres sourcés dans le repo.
     3. Ajout du configurateur complet, qui manquait à D.
   ============================================================ */
:root{
  --ink:#03051c; --navy:#020547;              /* le navy de la marque revient sur le configurateur */
  --panel:rgba(255,255,255,.055); --glass:rgba(6,10,44,.62);
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26);
  --line-3:rgba(255,255,255,.08);
  --blue:#077CFA; --orange:#F19526; --green:#2ecc8f;
  --dim:rgba(255,255,255,.62); --dim-2:rgba(255,255,255,.4);
  /* Système typographique du 11/09 (retour client : « la police, notamment la
     phrase principale mais aussi le reste, j'aime pas trop — voir comme
     upcomers.com ou smartraderfunds.com »). Relevé sur upcomers : Hanken
     Grotesk partout, titres en 600-700 serrés à -0,03 em, micro-étiquettes en
     Geist Mono. Montserrat 900 en capitales et Bricolage sont abandonnées. */
  --display:'Hanken Grotesk',system-ui,sans-serif;       /* h1, h2 */
  --display-2:'Hanken Grotesk',system-ui,sans-serif;     /* titres de carte, chiffres */
  --sans:'Hanken Grotesk',system-ui,sans-serif;          /* le texte */
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;  /* micro-étiquettes */
  /* l'échelle de rayons du site : .sf-card 28 · .why-card 22 · .testimonial 18 · .faq-item 14 */
  --r-panel:28px; --r-card:22px; --r-rev:18px; --r-small:14px;
}
*{box-sizing:border-box}
/* les ancres doivent s'arreter SOUS la barre collante, sinon le titre vise
   atterrit cache derriere. La hauteur est mesuree par le script en bas. */
/* La page ne glisse JAMAIS de côté (retour client du 11/09 : « si je glisse un peu à
   droite ça décale tout le site »). overflow-x:CLIP et non hidden : clip ne crée pas
   de conteneur de défilement, donc les éléments collants (header, panneau d'achat,
   barre d'achat) continuent de coller. overscroll-behavior-x:none : pas de rebond ni
   de « page précédente » au balayage horizontal. Les rangées qui défilent (tailles de
   l'Instant) gardent leur propre défilement. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topstack,143px) + 18px);overflow-x:clip;overscroll-behavior-x:none}
/* iPhone sous iOS 15 et avant : clip inconnu, donc aucun verrou. hidden sur html SEUL :
   propagé à la fenêtre, il ne crée pas de conteneur de défilement (sur body, si, et le
   collant casserait). */
@supports not (overflow-x:clip){html{overflow-x:hidden}}
body{margin:0;overflow-x:clip;overscroll-behavior-x:none;background:var(--ink);color:#fff;font-family:var(--sans);font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
/* Les titres de smartraderfunds / upcomers : casse normale, gras mais pas
   noir, crénage serré, et le dégradé blanc -> gris de smartraderfunds qui
   donne le relief sans changer de couleur. */
h1,h2{margin:0;font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.034em;
  text-wrap:balance;color:#fff;
  background:linear-gradient(180deg,#fff 0%,#fff 38%,#aeb5c4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h3{margin:0;font-family:var(--display-2);font-weight:700;line-height:1.15;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 48px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* le registre « technique » : une vraie monospace, comme les deux références */
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;
  min-height:min(840px, max(460px, calc(100vh - var(--topstack,143px))));
  min-height:min(840px, max(460px, calc(100dvh - var(--topstack,143px))))}
/* Le flou (11/09), deuxième essai demandé par Alexandre : la vidéo reste NETTE et
   seul l'arrière du titre est flouté (h1::before plus bas). Le premier essai —
   toute la vidéo floutée à 4 px — reste visible avec ?flou=video (classe posée
   par d2.js) pour comparer ; la vidéo y déborde de 24 px, sinon le flou rend ses
   bords semi-transparents. */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.flou-video .hero video{inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);filter:blur(4px)}
.scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(3,5,28,.92) 0%,rgba(3,5,28,.62) 14%,rgba(3,5,28,.40) 34%,rgba(3,5,28,.62) 74%,rgba(3,5,28,.98) 100%),
  radial-gradient(ellipse 70% 66% at 50% 48%,rgba(3,5,28,.88),rgba(3,5,28,.46) 60%,transparent 100%),
  linear-gradient(90deg,rgba(3,5,28,.62) 0%,transparent 26%,transparent 74%,rgba(3,5,28,.62) 100%)}
.hero > *{position:relative;z-index:2}
/* ⚠️ .hero > * a le même poids que .scrim et vient après : il repassait le voile en
   position:relative, donc 0 px de haut → aucun voile sur /, /pricing et /proof
   depuis le début. Réparé ici, en plus léger que l'original (qui éteignait la
   vidéo une fois le flou ajouté). Le voile de l'écran verrouillé (.gate) n'est
   pas concerné. */
.hero > .scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(3,5,28,.55) 0%,rgba(3,5,28,.18) 18%,rgba(3,5,28,.14) 60%,rgba(3,5,28,.75) 100%),
  radial-gradient(ellipse 60% 58% at 50% 50%,rgba(3,5,28,.50),rgba(3,5,28,.22) 62%,transparent 100%)}

/* ⚠️ backdrop-filter cree un CONTEXTE D EMPILEMENT : sans un z-index ici, la
   bande promo (z-index 2, soeur du header) passe au-dessus du menu de langue,
   qui est pourtant a z-index 20 — mais a l interieur du header. */
header{position:relative;z-index:3;background:rgba(3,5,28,.58);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.09)}
header .wrap{display:flex;align-items:center;gap:44px;height:92px}
.logo{height:38px}
/* Le logo ramène à l'accueil (12/09). ⚠️ `header .wrap` est un conteneur flex :
   sans cette règle, c'est le LIEN qui devient l'élément flex, et l'espace de ligne
   sous une image en display:inline le rend plus haut que l'image — l'entière ligne
   de l'entête se décale de quelques pixels. */
.logo-lien{display:flex;align-items:center;flex:none}
nav{display:flex;gap:28px;align-items:center}
nav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--dim);white-space:nowrap;transition:color .15s}
nav a:hover{color:#fff}
nav a.on{color:#fff}
/* 7 liens depuis l'ajout de « Blog » (21/09) : entre 1181 px (apparition du menu complet) et
   ~1380 px, l'espacement de 28 px poussait le bouton « S'inscrire » hors de l'écran */
@media (min-width:1181px) and (max-width:1380px){ nav{gap:17px} nav a{font-size:14.5px} }
/* la pastille « Instant Funding » du vrai site : pilule bleue qui respire,
   surmontée du badge « Private Access » (styles.css, .nav-private) */
.nav-private{position:relative;display:inline-flex;align-items:center;color:#9ecbff !important;
  background:rgba(7,124,250,.10);border:1px solid rgba(7,124,250,.5);border-radius:999px;
  padding:8px 16px;margin-left:4px;text-transform:none;letter-spacing:.01em;font-weight:600;
  animation:navPrivateGlow 2.8s ease-in-out infinite}
.nav-private:hover{color:#fff !important;background:rgba(7,124,250,.2);border-color:rgba(7,124,250,.85)}
.nav-badge{position:absolute;top:-9px;right:10px;padding:2px 8px;border-radius:999px;
  background:linear-gradient(90deg,#077CFA,#1727C7);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@keyframes navPrivateGlow{
  0%,100%{box-shadow:0 0 12px rgba(7,124,250,.3)}
  50%    {box-shadow:0 0 22px rgba(7,124,250,.6)}
}
@media(prefers-reduced-motion:reduce){.nav-private{animation:none}}
/* MASQUÉ TEMPORAIREMENT (01/10/2026, demande du client) : l'onglet Instant Funding
   disparaît du menu (bureau + burger mobile). Supprimer cette ligne pour le remettre. */
.nav-private,.menu-private{display:none !important}
.nav-auth{display:none}   /* visible seulement dans le menu déroulant mobile */
/* La rangée de droite de wegetfunded (relevée le 11/09) : globe + code langue,
   panier en simple icône, « Se connecter » en texte, « S'inscrire » en bouton
   plein. Pas de cadre autour de la langue ni du panier. */
.hgroup{margin-left:auto;display:flex;align-items:center;gap:6px}
.cart{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;color:#fff;transition:background .15s}
.cart:hover{background:rgba(255,255,255,.07)}
.cart svg{width:21px;height:21px}
.h-login{font-size:15px;font-weight:600;color:#fff;padding:9px 12px;margin-left:4px;white-space:nowrap;
  border-radius:10px;transition:background .15s}
.h-login:hover{background:rgba(255,255,255,.07)}
header .h-signup{padding:10px 20px;font-size:14.5px;margin-left:2px}
/* Les boutons du site, repris tels quels de styles.css : pilule, 15 px,
   casse normale. C'est le composant de marque, il ne change pas. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:12px 26px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:all .18s ease;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(60,120,255,.5),transparent 75%),
    linear-gradient(180deg,rgba(7,124,250,.18),rgba(7,124,250,.05));
  color:#fff;border:1.5px solid var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 4px rgba(7,124,250,.18),0 12px 32px rgba(7,124,250,.55);
  text-shadow:0 0 12px rgba(7,124,250,.4);
}
.btn:hover{border-color:#2b8eff;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 5px rgba(7,124,250,.25),0 16px 38px rgba(7,124,250,.7)}
.btn-fill{background:#fff;color:#0a1d6e;border:1px solid transparent;text-shadow:none;
  box-shadow:0 6px 20px rgba(255,255,255,.12)}
.btn-fill:hover{background:#f0f4ff;color:#0a1d6e;box-shadow:0 10px 28px rgba(255,255,255,.18)}
/* ⚠️ background-origin:border-box — sans lui le dégradé est calé sur l'intérieur de
   la bordure transparente et se RÉPÈTE dessous : un croissant indigo au bout gauche
   de la pilule et un bleu vif au bout droit, bien visibles sur écran Retina
   (retour du 11/09 sur capture). L'anneau gris devient bleu + reflet en haut. */
.btn-blue{background:linear-gradient(90deg,#077CFA,#1727C7);background-origin:border-box;
  color:#fff;border:1px solid transparent;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(64,140,255,.45),0 8px 26px rgba(7,124,250,.5)}
.btn-blue:hover{filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(90,160,255,.6),0 12px 32px rgba(7,124,250,.65)}
.btn-lg{padding:14px 28px;font-size:16px}
/* le bouton du header reste discret : le site n'y met pas la lueur */
header .btn:not(.btn-fill):not(.btn-blue){background:none;border:1px solid var(--line-2);box-shadow:none;text-shadow:none;font-size:14px;padding:10px 22px}
header .btn:not(.btn-fill):not(.btn-blue):hover{border-color:#fff;transform:none;box-shadow:none}
header .btn-blue{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(64,140,255,.45),0 6px 18px rgba(7,124,250,.38)}
header .btn-blue:hover{transform:none}
/* dans une carte, la lueur du bouton débordait sous le bord : on la resserre */
.card .btn,.buy .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 3px rgba(7,124,250,.14),0 4px 14px rgba(7,124,250,.3)}
.card .btn:hover,.buy .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 4px rgba(7,124,250,.2),0 6px 18px rgba(7,124,250,.45)}
.card .btn-blue,.buy .btn-blue{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(64,140,255,.45),0 4px 16px rgba(7,124,250,.45)}

/* ⚠️ La pastille promo FLOTTE au-dessus du hero : sa hauteur doit être réservée
   ici, sinon le titre passe dessous dès que la fenêtre est courte (le contenu du
   hero est centré, donc il remonte). Et « safe center » : un contenu trop haut
   déborde alors vers le BAS, jamais au-dessus de la zone réservée. */
.hero-body{flex:1;display:flex;align-items:safe center;padding:96px 0 56px}
.hero-body .wrap{width:100%;text-align:center}
.hero-body h1{max-width:19ch;text-wrap:balance}
/* Le flou derrière le titre : un calque en backdrop-filter, fondu sur les bords par
   un masque. ⚠️ Le h1 est positionné SANS z-index : il ne doit pas créer de contexte
   d'empilement, sinon le ::before (z-index -1) se peindrait par-dessus son texte en
   dégradé (background-clip:text) et flouterait le titre lui-même. */
.hero-body h1{position:relative}
.hero-body h1::before{content:"";position:absolute;z-index:-1;inset:-26% -12%;pointer-events:none;
  background:rgba(3,5,28,.22);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent);
          mask-image:radial-gradient(closest-side,#000 64%,transparent)}
.flou-video .hero-body h1::before{display:none}
/* le sous-titre porte maintenant le message client : il doit rester lisible
   sur les images claires de la video */
.hero-body .sub{color:rgba(255,255,255,.86);text-shadow:0 1px 14px rgba(3,5,28,.55)}
h1{font-size:76px;max-width:15ch;margin:0 auto}
/* l'accent du titre : le dégradé de marque, à la place du bleu plat */
h1 .blue{background:linear-gradient(135deg,#077CFA 0%,#5aa8ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-pills{display:inline-block;margin:24px 0 0;padding:11px 24px;border-radius:999px;
  background:linear-gradient(90deg,#077CFA,#1727C7);color:#fff;font-size:14.5px;font-weight:600;
  box-shadow:0 0 0 1px rgba(160,190,255,.25),0 8px 26px rgba(7,124,250,.45)}
.sub{color:var(--dim);font-size:17px;max-width:52ch;margin:18px auto 0;text-wrap:balance}
/* la note du hero de wegetfunded : le mot, le score, cinq carrés verts */
.rating{display:flex;flex-direction:column;align-items:center;gap:5px;margin:30px auto 0}
.rt-line{display:inline-flex;align-items:center;gap:9px}
.rt-word{font-family:var(--display-2);font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff}
.rt-score{font-family:var(--display-2);font-size:16px;font-weight:700;color:var(--green)}
.rt-stars{display:inline-flex;gap:3px}
.rt-stars i{width:22px;height:22px;border-radius:4px;background:var(--green);
  display:inline-flex;align-items:center;justify-content:center}
.rt-stars svg{width:14px;height:14px;fill:#fff;display:block}
/* la case entamée : le vert s'arrête à --p, le reste est gris, l'étoile reste blanche */
.rt-stars i.part{background:linear-gradient(90deg,var(--green) var(--p,50%),rgba(255,255,255,.22) var(--p,50%))}
.rt-base{font-size:12.5px;color:var(--dim)}
.hero-ctas{display:flex;gap:14px;margin-top:26px;justify-content:center}

/* barre promo tout en haut, au-dessus du header — le motif FTMO / FundedNext :
   une seule offre, centrée, et la pastille du code qui se copie au clic. */
/* barre promo + header dans un seul bloc collant : ils restent en haut au
   défilement, comme le header fixe du vrai site. Le header ne peut pas être
   collant à l'intérieur du hero, qui est en overflow:hidden. */
.topstack{position:sticky;top:0;z-index:60}
/* La pastille promo, exactement comme chez wegetfunded : DANS le bandeau
   collant (donc elle suit le défilement), mais en position absolue sous le
   header (donc elle flotte sur le hero sans occuper de bande pleine largeur).
   `pointer-events` : le conteneur laisse passer les clics, la pastille les prend. */
.promo-strip{position:absolute;top:100%;left:0;right:0;z-index:2;
  display:flex;justify-content:center;padding:18px 20px 0;pointer-events:none}
.promo-strip .promo-pill{pointer-events:auto}
/* cachée tant que d2.js n'a pas confirmé une promo active (évite le flash au chargement) */
html:not(.promo-on) .promo-strip{display:none}
/* la pastille de wegetfunded : CODE · le code copiable · la remise · la portée */
.promo-pill{display:inline-flex;align-items:center;gap:11px;border-radius:999px;max-width:100%;
  padding:5px 18px 5px 16px;background:linear-gradient(90deg,#077CFA,#1727C7);
  box-shadow:0 0 0 1px rgba(160,190,255,.28),0 8px 24px rgba(7,124,250,.35)}
.pp-lbl{font-family:var(--display-2);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.9)}
.pp-sep{width:1px;height:17px;background:rgba(255,255,255,.34);flex:none}
.pp-off{background:#fff;color:#0a1a5e;border-radius:999px;padding:3px 11px;white-space:nowrap;
  font-family:var(--display-2);font-size:12px;font-weight:700;letter-spacing:.02em}
.pp-txt{font-family:var(--display-2);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;white-space:nowrap}
.code{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0a1a5e;
  border:1px solid #fff;border-radius:999px;padding:5px 12px;cursor:pointer;transition:filter .15s;
  font-family:var(--display-2);font-size:12.5px;font-weight:700;letter-spacing:.1em}
.code:hover{filter:brightness(.93)}
.code svg{width:13px;height:13px;opacity:.7}
.code.ok{background:var(--green);border-color:var(--green);color:#04240f}
.promo-pill .code{background:rgba(3,5,28,.92);color:#fff;border-color:transparent;padding:4px 12px}
.promo-pill .code:hover{filter:none;background:#03051c}
.promo-pill .code svg{opacity:.8}
.promo-pill .code.ok{background:var(--green);color:#04240f}

/* ---------- bande de logos ----------
   Reprise à l'identique de stf-site-v4 (assets/site.css) : cartes 212x84,
   rayon 20 px, logos à 21 px en opacité .74, défilement 46 s, masque en
   fondu sur les bords, et pause au survol. */
/* « As featured in » d'upcomers : un intitulé discret, les marques en
   lettrage blanc atténué, sans cadre et sans défilement. */
.press{border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3);
  padding:24px 0;background:rgba(255,255,255,.015)}
.press .wrap{display:flex;align-items:center;gap:34px}
.press-t{margin:0;flex:none;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2)}
/* l'intitulé reste en place, seuls les lettrages défilent */
.press-mq{flex:1;min-width:0}
.press-set{display:flex;align-items:center;gap:64px;padding-right:64px}
.press-set img{filter:brightness(0) invert(1);opacity:.6;transition:opacity .25s;display:block}
.press-set img:hover{opacity:1}
.logos{border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3);padding:36px 0}
.logos-t{text-align:center;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);margin:0 0 22px}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.track{display:flex;width:max-content;animation:defile 46s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.logo-set{display:flex;gap:14px;padding-right:14px}
.plogo{display:flex;align-items:center;justify-content:center;min-width:212px;height:84px;padding:0 30px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;transition:.25s}
.plogo:hover{border-color:var(--line-2);background:rgba(255,255,255,.06)}
.plogo img{height:21px;width:auto;max-width:148px;display:block;opacity:.74;transition:.25s}
.plogo:hover img{opacity:1}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .track{animation:none;width:100%;justify-content:center}
  .press-set{flex-wrap:wrap;justify-content:center;padding-right:0}
  .press-set[aria-hidden]{display:none}
}

/* ---------- bandeau capacités ---------- */
.caps{border-bottom:1px solid var(--line-3);background:rgba(255,255,255,.02)}
.caps .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;padding-top:16px;padding-bottom:16px}
.cap{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim)}
.cap svg{width:13px;height:13px;color:var(--green);flex:none}

/* ---------- configurateur (ce qui manquait à D) ---------- */
.cfg{position:relative;padding:88px 0 96px;background:var(--navy);border-top:1px solid var(--line-3)}
.cfg-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.cfg-bg video{width:100%;height:100%;object-fit:cover;opacity:.62;display:block}
.cfg-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(2,5,71,.58) 20%,rgba(2,5,71,.66) 74%,var(--ink) 100%)}
.cfg > .wrap{position:relative;z-index:2}
.cfg-head{margin-bottom:34px;text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.cfg-head .mono{color:var(--blue);display:block;margin-bottom:18px}
.cfg-head h2{font-size:52px;max-width:none}
.cfg-head p{color:var(--dim);margin:18px auto 0;max-width:56ch;font-size:16px}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:rgba(3,5,28,.6);padding:4px;gap:4px;margin-bottom:20px}
.seg button{background:none;border:0;border-radius:999px;color:var(--dim);cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;padding:11px 24px;transition:background .15s,color .15s}
.seg button.on{background:linear-gradient(90deg,#077CFA,#1727C7);color:#fff;box-shadow:0 6px 18px rgba(7,124,250,.4)}
.seg button span{display:block;font-size:11px;font-weight:400;opacity:.7;margin-top:1px}

.cfg > .wrap > .seg{display:flex;width:fit-content;margin:0 auto 16px}
/* Alexandre : « trop de règles marquées, et le prix s'affiche trop bas ».
   Trois zones : les tailles en haut à gauche, le panneau d'achat COLLANT à
   droite (il reste à hauteur d'œil), les chiffres clés et le détail des
   règles dessous. En colonne unique, l'ordre du DOM donne tailles -> prix
   -> règles, qui est l'ordre de lecture voulu. */
/* grid-template-rows:auto 1fr — le panneau d'achat couvre les 2 rangées : sans
   ça, sa hauteur se répartissait aussi sur la 1ʳᵉ, et depuis que les tailles
   tiennent en une rangée basse (11/09) un vide de ~120 px s'ouvrait dessous. */
.cfg-stack{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr .8fr;
  grid-template-rows:auto 1fr;gap:22px;align-items:start}
.cfg-a{grid-column:1;grid-row:1;min-width:0}
.cfg-b{grid-column:2;grid-row:1 / span 2;min-width:0;position:sticky;
  top:calc(var(--topstack,143px) + 18px)}
.cfg-c{grid-column:1;grid-row:2;min-width:0}
.cfg-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.cfg-lbl h3{font-size:15px;letter-spacing:.06em}
.cfg-lbl .mono{color:var(--dim-2)}

/* les quatre chiffres qui comptent, tirés des mêmes données que le tableau */
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.key{border:1px solid var(--line);border-radius:var(--r-card);background:rgba(3,5,28,.6);
  padding:14px 14px 13px}
.key-k{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:8px;min-height:23px}
.key-v{font-family:var(--display-2);font-size:23px;font-weight:700;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}

/* le tableau complet passe sous un dépliant, fermé par défaut */
.rules{border:1px solid var(--line);border-radius:var(--r-panel);background:rgba(3,5,28,.78);
  backdrop-filter:blur(8px);overflow:hidden}
.rules > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:15px 20px;font-family:var(--display-2);font-size:14px;font-weight:700;
  letter-spacing:-.01em;color:#fff}
.rules > summary::-webkit-details-marker{display:none}
.rules > summary .mono{margin-left:auto;color:var(--dim-2)}
.rules > summary .chev{width:16px;height:16px;color:var(--blue);flex:none;transition:transform .2s}
.rules[open] > summary{border-bottom:1px solid var(--line)}
.rules[open] > summary .chev{transform:rotate(180deg)}
.rules > summary:hover{background:rgba(255,255,255,.03)}

/* le panneau d'achat */
.buy{border:1px solid rgba(140,175,255,.30);border-radius:var(--r-panel);padding:22px 22px 20px;
  background:linear-gradient(180deg,rgba(7,124,250,.20),rgba(3,5,28,.88) 58%);backdrop-filter:blur(8px)}
.buy-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-3)}
.buy-kind{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim-2)}
/* la taille : un rappel surligné, jamais à la taille du prix */
.buy-size{flex:none;background:rgba(7,124,250,.18);border:1px solid rgba(140,175,255,.34);
  border-radius:999px;padding:4px 12px;font-family:var(--display-2);font-size:13px;font-weight:700;
  line-height:1.3;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.buy-lbl{font-size:12.5px;font-weight:500;color:var(--dim);margin:0 0 5px}
.buy-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.buy-now{font-family:var(--display-2);font-size:42px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.buy-old{font-size:16px;color:var(--dim-2);text-decoration:line-through;font-weight:600}
.buy-save{background:rgba(46,204,143,.16);color:var(--green);border-radius:999px;padding:3px 10px;
  font-family:var(--display-2);font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.buy-note{font-size:12.5px;color:var(--dim);margin:9px 0 16px}
.buy > .btn{width:100%;justify-content:center}
.buy .addons{flex-direction:column;gap:8px;margin:0 0 14px}
.buy .addon{width:100%;justify-content:space-between;text-align:left}
.buy-list{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line-3);
  display:grid;gap:9px}
.buy-list li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--dim)}
.buy-list svg{width:13px;height:13px;color:var(--green);flex:none;margin-top:4px}

/* La barre d'achat collée du bas (vidéo upcomers du 11/09). Sous 1080 px
   seulement : au-dessus, le panneau d'achat est déjà collant. Collante DANS la
   section (.cfg > .wrap) : elle apparaît dès que le configurateur est à l'écran
   et se range à la fin de la section. Jamais masquée en cours de route (cf. d2.js). */
.cfg-bar{display:none}
@media (max-width:1080px){
  .cfg-bar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;
    gap:12px;max-width:760px;margin:22px auto 0;padding:10px 10px 10px 16px;border-radius:18px;
    border:1px solid rgba(140,175,255,.30);background:rgba(4,8,40,.88);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 36px rgba(0,0,0,.5)}
  .cfg-bar-prix{display:flex;flex-direction:column;gap:5px;min-width:0}
  .cfg-bar-now{font-family:var(--display-2);font-size:24px;font-weight:700;line-height:1;letter-spacing:-.01em}
  .cfg-bar-meta{display:flex;align-items:center;gap:8px}
  .cfg-bar-save{background:rgba(46,204,143,.18);color:var(--green);border-radius:6px;padding:2px 7px;
    font-family:var(--display-2);font-size:11px;font-weight:700;white-space:nowrap}
  .cfg-bar-old{font-size:12.5px;font-weight:600;color:var(--dim-2);text-decoration:line-through}
  .cfg-bar .btn{flex:none;padding:12px 20px;font-size:14.5px}
}

/* cartes de taille, au lieu de pilules : plus lisibles et plus cliquables */
.sz{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:0}
.sz button{background:rgba(3,5,28,.6);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 12px;cursor:pointer;transition:.16s;text-align:center;font-family:var(--sans)}
.sz button:hover{border-color:var(--line-2)}
.sz button.on{border-color:var(--blue);background:rgba(7,124,250,.12);box-shadow:0 0 0 1px var(--blue) inset}
.sz .k{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:6px}
.sz .v{display:block;font-family:var(--display-2);font-size:22px;font-weight:700;color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sz button.on .v{color:#fff}
/* Challenges : les tailles en UNE rangée compacte, prix sous chaque taille (vidéo
   upcomers du 11/09). `--n` = nombre de tailles, posé par renderCfg. /instant-
   funding a porté cette rangée (13 paliers en 7 + 6) avant de passer à un menu
   déroulant le 11/09 au soir (voir sa feuille). Poids .sz.sz-row : bat les
   .sz{grid-template-columns} des media queries, écrits plus bas. */
.sz.sz-row{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:4px;padding:5px;
  border:1px solid var(--line);border-radius:16px;background:rgba(3,5,28,.6)}
.sz-row button{border:0;border-radius:11px;padding:10px 2px 9px;background:none;box-shadow:none;min-width:0}
.sz-row button:hover{background:rgba(255,255,255,.05)}
.sz-row button.on{background:linear-gradient(180deg,#0b83ff,#1a3bd6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 18px rgba(7,124,250,.35)}
.sz-row .v{font-size:17px;color:#fff;line-height:1.1}
.sz-row .p{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--dim-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sz-row button.on .p{color:rgba(255,255,255,.88)}

.pan{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:rgba(3,5,28,.78);backdrop-filter:blur(8px)}
.pan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.pan-head h3{font-size:15px;letter-spacing:.06em}
.pan-body{padding:6px 20px 18px}

.matrix{width:100%;border-collapse:collapse;font-size:13.5px}
.matrix th{text-align:left;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--dim-2);padding:14px 12px 11px 0}
.matrix th.c{text-align:right;padding-right:0}
.matrix th.c.fin{color:#5aa8ff}
.matrix td{padding:11px 12px 11px 0;border-top:1px solid var(--line-3)}
.matrix td:first-child{color:var(--dim)}
.matrix td.c{text-align:right;padding-right:0;font-weight:600;font-variant-numeric:tabular-nums}
.matrix td.c.fin{color:#5aa8ff}
.matrix td.c::before{content:attr(data-col);display:none}
.matrix .hint{display:none;font-size:11px;color:var(--dim-2);font-weight:400;margin-top:2px}

/* le « ? » d'aide de wegetfunded : l'explication passe en infobulle en desktop,
   et reste affichée sous l'intitulé en mobile (pas de survol sur un téléphone) */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:7px;border:1px solid var(--line-2);border-radius:50%;
  font-family:var(--display-2);font-size:9px;font-weight:700;color:var(--dim-2);cursor:help;vertical-align:middle}
.tip:hover,.tip:focus-visible{border-color:var(--blue);color:#fff;outline:none}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  width:236px;background:#0a1030;border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;
  font-family:var(--sans);font-size:12px;font-weight:400;line-height:1.5;color:#fff;text-align:left;
  letter-spacing:0;text-transform:none;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .15s;z-index:20;pointer-events:none}
.tip:hover::after,.tip:focus-visible::after{opacity:1;visibility:visible}
/* ⚠️ Les « ? » des options sont au bord droit du panneau d'achat : la bulle centrée
   (236 px, présente même invisible) sortait de 24 px de l'écran vers 1280 px et
   élargissait la page — elle glissait de côté (11/09). Calée à droite du « ? », elle
   s'ouvre vers la gauche. */
.addon .tip::after{left:auto;right:-8px;transform:none}

.addons{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;justify-content:center}
.addon{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);padding:8px 16px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--dim);cursor:pointer;transition:.15s}
.addon:hover{border-color:var(--line-2);color:#fff}
.addon .tip{margin-left:4px}
.addon.on{border-color:var(--blue);background:rgba(7,124,250,.16);color:#fff}

/* la barre de prix horizontale, à la place du panneau latéral */
.pricebar{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:28px;margin-top:18px;
  border:1px solid rgba(140,175,255,.30);border-radius:var(--r-panel);
  background:linear-gradient(90deg,rgba(7,124,250,.16),rgba(7,124,250,.05));background-origin:border-box;padding:20px 24px}
.pb-k{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:5px}
.pb-v{font-family:var(--display-2);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pb-old{font-size:14px;color:var(--dim-2);text-decoration:line-through;margin-left:9px;font-weight:600}
.pb-cta{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.pb-note{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim-2)}

/* ---------- les chiffres du client, mise en page de wegetfunded ----------
   Leur « Construit pour les traders sérieux » : l'accroche et le bouton à
   gauche, les chiffres en très grand à droite. Bien plus frappant que ma
   bande à cinq colonnes égales. */
.figs{padding:82px 0 86px;position:relative;z-index:2;border-top:1px solid var(--line-3)}
.figs-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.figs-l h2{font-size:46px;margin-bottom:14px;max-width:15ch}
.figs-l p{color:var(--dim);font-size:16px;line-height:1.6;margin:0 0 26px;max-width:34ch}
/* quatre cellules de même poids, séparées par des filets : depuis que le 5e
   chiffre a sauté, la rangée « un grand + trois » était bancale. */
.figs-r{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fig{padding:26px 30px}
.fig:nth-child(2n+1){padding-left:0}
.fig:nth-child(2n){border-left:1px solid var(--line-3)}
.fig:nth-child(n+3){border-top:1px solid var(--line-3)}
.fig-n{font-family:var(--display-2);font-weight:700;line-height:.92;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-bottom:10px;font-size:54px}
.fig-l{font-size:14px;color:var(--dim)}
@media (max-width:980px){
  .figs{padding:52px 0 56px}
  .figs-in{grid-template-columns:1fr;gap:30px}
  .figs-l h2{font-size:32px;max-width:none}
  .fig{padding:20px 22px}
  .fig-n{font-size:38px}
}
@media (max-width:560px){
  .figs-r{grid-template-columns:1fr}
  .fig{padding:18px 0}
  .fig:nth-child(2n){border-left:0}
  .fig:nth-child(n+2){border-top:1px solid var(--line-3)}
  .fig-n{font-size:34px}
}

/* ---------- « Votre espace » : le bloc de stf-v4 (capture du 11/09) ----------
   Trois cartes en haut — texte à gauche, visuel à droite fondu dans la carte —
   puis une grande carte : le texte sur un dégradé de marque, le tableau de
   bord à droite, rogné par le cadre comme une capture. */
.svc{border-top:1px solid var(--line-3);padding:88px 0 92px}
.svc-head{text-align:center;margin-bottom:40px}
.svc-head .mono{color:var(--blue);display:block;margin-bottom:16px}
.svc-head h2{font-size:52px;max-width:none}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.svc-card{position:relative;display:grid;grid-template-columns:1fr 44%;min-height:168px;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  transition:border-color .2s}
.svc-card:hover{border-color:rgba(140,175,255,.32)}
.svc-txt{padding:24px 4px 24px 24px;position:relative;z-index:1}
.svc-txt h3{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:10px}
.svc-txt h3 svg{width:19px;height:19px;color:#5aa8ff;flex:none}
.svc-txt p{color:var(--dim);font-size:14px;line-height:1.55;margin:0}
.svc-img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}

.svc-dash{display:grid;grid-template-columns:.78fr 1.22fr;min-height:470px;
  border:1px solid rgba(140,175,255,.22);border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(140deg,rgba(7,124,250,.28) 0%,rgba(23,39,199,.14) 38%,rgba(3,5,28,.92) 78%)}
.svc-dash-txt{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.svc-dash-txt h3{font-size:30px;margin-bottom:14px;letter-spacing:-.025em}
.svc-dash-txt p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.66;margin:0;max-width:36ch}
.show-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.show-list span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
/* le cadre du tableau de bord : un conteneur de requête, pour que tout le
   contenu (en em) se mette à l'échelle de sa largeur, comme une image */
.svc-dash-ui{position:relative;overflow:hidden;border-left:1px solid var(--line);background:#04060f;
  container-type:inline-size;padding:22px 0 0 22px}

/* ---- le tableau de bord (maquette HTML) ----
   Tout est en em : 1 em = 1/60e de la largeur du cadre. */
.dz{font-size:calc((100cqw - 22px) / 62);width:62em;font-family:var(--sans);color:#fff;line-height:1.3;
  border:1px solid rgba(255,255,255,.1);border-right:0;border-bottom:0;border-radius:1em 0 0 0;
  background:#070a16;box-shadow:0 2em 5em rgba(0,0,0,.5)}
.dz-bar{height:2.7em;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);background:#0a0e1c;border-radius:1em 0 0 0}
.dz-url{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.78em;
  color:rgba(255,255,255,.42);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  border-radius:.7em;padding:.35em 1.4em}
.dz-url svg{width:1em;height:1em}
.dz-body{position:relative;padding:1.6em 1.6em 1.4em}
.dz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3em}
.dz-crumb{display:flex;align-items:center;gap:.7em;font-size:.86em;color:rgba(255,255,255,.45)}
.dz-crumb i{width:.38em;height:.38em;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.dz-crumb b{font-family:var(--mono);font-weight:500;color:#fff}
.dz-new{display:inline-flex;align-items:center;gap:.45em;font-size:.86em;font-weight:600;
  background:linear-gradient(90deg,#077CFA,#1727C7);border-radius:.6em;padding:.6em 1.1em;
  box-shadow:0 .4em 1.2em rgba(7,124,250,.4)}
.dz-new svg{width:1.05em;height:1.05em}
.dz-title{display:flex;align-items:center;gap:.7em;margin-bottom:1.3em}
.dz-h{font-size:1.45em;font-weight:700;letter-spacing:-.02em;margin-right:.3em}
.dz-chip{display:inline-flex;align-items:center;gap:.45em;font-size:.74em;font-weight:600;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:.6em;padding:.35em .8em;color:rgba(255,255,255,.75)}
.dz-chip i{width:.5em;height:.5em;border-radius:50%;background:currentColor}
.dz-chip.ok{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1);box-shadow:0 0 1em rgba(74,222,128,.15)}
.dz-chip.live{color:#f87171;border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.06)}
.dz-toast{position:absolute;top:4.1em;right:1.6em;display:flex;align-items:center;gap:.9em;
  background:rgba(10,30,20,.92);border:1px solid rgba(74,222,128,.35);border-radius:.8em;padding:.8em 1.2em;
  box-shadow:0 .8em 2.4em rgba(0,0,0,.5)}
.dz-toast-i{flex:none;width:2em;height:2em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.4);color:#4ade80}
.dz-toast-i svg{width:1em;height:1em}
.dz-toast b{display:block;font-size:.86em}
.dz-toast span{display:block;font-size:.72em;color:rgba(255,255,255,.5);margin-top:.15em}
.dz-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em;margin-bottom:.9em}
.dz-tile{border:1px solid rgba(255,255,255,.08);background:#0b0f1e;border-radius:.8em;padding:1em 1.1em}
.dz-k{display:block;font-family:var(--mono);font-size:.66em;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:.5em}
.dz-v{display:block;font-size:1.65em;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dz-tile em{display:block;font-style:normal;font-size:.72em;color:rgba(255,255,255,.42);margin-top:.35em}
.dz .up{color:#4ade80}
.dz-row{display:grid;grid-template-columns:1.45fr 1fr;gap:.9em;margin-bottom:.9em}
.dz-card{border:1px solid rgba(255,255,255,.08);background:#0b0f1e;border-radius:.8em;padding:1.1em 1.2em}
.dz-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;margin-bottom:.8em}
.dz-card-h b{font-size:.92em;font-weight:700}
.dz-card-h div span{display:block;font-size:.7em;color:rgba(255,255,255,.4);margin-top:.2em}
.dz-pill{display:inline-flex;align-items:center;gap:.4em;font-size:.72em;font-weight:600;color:#4ade80;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);border-radius:.6em;padding:.3em .7em}
.dz-pill i{width:.5em;height:.5em;border-radius:50%;background:currentColor}
.dz-svg{display:block;width:100%;height:auto}
.dz-rule + .dz-rule{margin-top:1.05em}
.dz-rule-h{display:flex;justify-content:space-between;align-items:baseline;font-size:.8em;margin-bottom:.5em}
.dz-rule-h span{color:rgba(255,255,255,.7)}
.dz-rule-h b{font-weight:700;font-variant-numeric:tabular-nums}
.dz-rule-h u{text-decoration:none}
.dz-rule-h i{font-style:normal;font-weight:500;color:rgba(255,255,255,.35)}
.dz-rule-h i::before{content:" / "}
.dz-meter{height:.42em;border-radius:1em;background:rgba(255,255,255,.07);overflow:hidden}
.dz-meter i{display:block;height:100%;border-radius:1em;background:#22c55e}
.dz-rule-f{display:flex;justify-content:space-between;font-size:.7em;margin-top:.45em;color:rgba(255,255,255,.35)}
.dz-rule-f .ok{color:#4ade80;font-weight:600}
.dz-trades > b{display:block;font-size:.92em;margin-bottom:.6em}
.dz-trades table{width:100%;border-collapse:collapse;font-size:.74em}
.dz-trades th{text-align:left;font-family:var(--mono);font-weight:500;font-size:.9em;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.35);padding:.4em 0 .6em}
.dz-trades td{padding:.7em 0;border-top:1px solid rgba(255,255,255,.06);font-family:var(--mono);color:rgba(255,255,255,.8)}
.dz-trades td:first-child{font-family:var(--sans);font-weight:700;color:#fff}
.dz-trades td.dz-buy{color:#4ade80;font-weight:600}
.dz-trades td.dz-sell{color:#f87171;font-weight:600}
.dz-trades th:last-child,.dz-trades td:last-child{text-align:right;padding-right:1.4em}

@media (max-width:1180px){
  .svc-cards{grid-template-columns:1fr 1fr}
  .svc-cards .svc-card:last-child{grid-column:1 / -1}
}
@media (max-width:980px){
  .svc{padding:52px 0 58px}
  .svc-head{margin-bottom:28px}
  .svc-head h2{font-size:32px}
  .svc-dash{grid-template-columns:1fr;min-height:0}
  .svc-dash-txt{padding:28px 24px 26px}
  .svc-dash-txt h3{font-size:24px}
  .svc-dash-ui{border-left:0;border-top:1px solid var(--line);padding:16px 0 0 16px;height:min(64vw,440px)}
  .dz{font-size:calc((100cqw - 16px) / 62)}
}
@media (max-width:700px){
  .svc-cards{grid-template-columns:1fr}
  .svc-cards .svc-card:last-child{grid-column:auto}
  .svc-card{min-height:148px;grid-template-columns:1fr 40%}
  .svc-txt{padding:20px 4px 20px 20px}
  .svc-txt h3{font-size:16px}
  .svc-txt p{font-size:13.5px}
}

/* ---------- pourquoi nous choisir ---------- */
.why{border-top:1px solid var(--line-3);padding:88px 0 96px;overflow:hidden}
.why .mono{color:var(--blue);display:block;margin-bottom:16px}
.why h2{font-size:52px;margin-bottom:38px;max-width:18ch}
/* une seule rangée qui défile, comme le vrai site (32 s, pause au survol).
   Le rail est posé hors du .wrap : pas de `width:100vw` + marge négative,
   qui ferait déborder la page de la largeur de la barre de défilement. */
.why-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.why-track{display:flex;width:max-content;animation:defile 32s linear infinite}
.why-marquee:hover .why-track,.why-marquee:focus-within .why-track{animation-play-state:paused}
.why-set{display:flex;gap:18px;padding-right:18px}
.wc{flex:none;width:286px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;transition:border-color .2s,background .2s}
.wc:hover{border-color:rgba(140,175,255,.32);background:rgba(7,124,250,.05)}
.wc-img{aspect-ratio:16/11;overflow:hidden;background:#2c73d3}
.wc-img img{width:100%;height:100%;object-fit:cover;display:block}
.wc-txt{padding:20px 22px 24px}
.wc-txt h3{font-size:16px;margin-bottom:7px}
.wc-txt p{color:var(--dim);font-size:13px;line-height:1.6;margin:0}

/* ---------- comment ça marche ----------
   Les 3 étapes du vrai site, avec ses textes et ses chiffres. Les visuels
   sont générés ; les chiffres restent en HTML par-dessus, jamais dans
   l'image — Gemini rend mal le texte et en invente. */
.how{border-top:1px solid var(--line-3);padding:88px 0 96px}
.how .mono{color:var(--blue);display:block;margin-bottom:16px}
.how h2{font-size:52px;margin-bottom:14px;max-width:20ch}
.how-intro{color:var(--dim);max-width:56ch;margin:0 0 42px;font-size:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:rgba(255,255,255,.02);display:flex;flex-direction:column}
.step-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.step-img img{width:100%;height:100%;object-fit:cover;display:block}
.step-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,5,28,.62) 0%,rgba(3,5,28,.14) 34%,rgba(3,5,28,.22) 52%,rgba(3,5,28,.93) 100%)}
.step-n{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--display-2);
  font-size:46px;font-weight:700;line-height:1;color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 18px rgba(3,5,28,.9),0 0 42px rgba(3,5,28,.7)}
.step-chips{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;flex-wrap:wrap;gap:7px}
.step-chip{display:inline-flex;align-items:baseline;gap:6px;background:rgba(3,5,28,.74);
  border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.step-chip b{text-transform:none;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.step-chip.up b{color:#5aa8ff}
.step-chip.down b{color:var(--orange)}
.step-txt{padding:22px 24px 26px}
.step-txt h3{font-size:19px;margin-bottom:8px}
.step-txt p{color:var(--dim);font-size:14px;line-height:1.6;margin:0}

/* ---------- le parcours produit, façon wegetfunded ----------
   Chez eux la progression n'est pas racontée en texte mais montrée en
   fragments d'interface. Ici tout ce qui s'affiche vient des vraies règles. */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.fl{border:1px solid var(--line);border-radius:var(--r-card);background:rgba(3,5,28,.6);
  padding:18px;display:flex;flex-direction:column;gap:13px;position:relative}
.fl-k{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim-2)}
.fl-ui{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);padding:13px}
.fl-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
.fl-row + .fl-row{margin-top:9px}
.fl-row span{color:var(--dim-2)}
.fl-row b{font-weight:700;font-variant-numeric:tabular-nums}
.fl-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:11px}
.fl-bar i{display:block;height:100%;border-radius:999px;background:var(--blue)}
.fl-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim)}
.fl-chk + .fl-chk{margin-top:9px}
.fl-chk svg{width:13px;height:13px;color:var(--green);flex:none}
.fl-pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  background:rgba(46,212,122,.14);border:1px solid rgba(46,212,122,.32);color:#7ee8ac;
  border-radius:999px;padding:5px 11px;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.fl-big{font-family:var(--display-2);font-size:26px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.fl h4{font-size:14.5px;margin:0}
.fl p{color:var(--dim);font-size:12.5px;line-height:1.5;margin:0}
@media (max-width:980px){ .flow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .flow{grid-template-columns:1fr} }

/* ---------- retraits, section de wegetfunded ---------- */
.wd{border-top:1px solid var(--line-3);padding:84px 0 88px}
.wd-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.wd-l h2{font-size:46px;margin-bottom:22px;max-width:14ch}
.wd-l p{color:var(--dim);font-size:15px;line-height:1.7;margin:0 0 16px;max-width:46ch}
.wd-l p b{color:#fff;font-weight:600}
.wd-l .btn{margin-top:12px}
.wd-card{border:1px solid var(--line);border-radius:var(--r-panel);background:rgba(3,5,28,.66);padding:22px}
.wd-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.wd-row + .wd-row{border-top:1px solid var(--line-3)}
.wd-ico{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center}
.wd-ico svg{width:19px;height:19px;color:var(--dim)}
.wd-row .k{font-size:12.5px;color:var(--dim);margin-bottom:3px}
.wd-row .v{font-family:var(--display-2);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.wd-tag{margin-left:auto;align-self:flex-start;background:rgba(46,212,122,.14);border:1px solid rgba(46,212,122,.3);
  color:#7ee8ac;border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.wd-card .btn{width:100%;margin-top:16px}
.wd-h3{font-size:30px;margin:32px 0 12px}
.wd-h3 em{font-style:normal;color:#5aa8ff}
.wd-r > p{color:var(--dim);font-size:14.5px;line-height:1.65;margin:0;max-width:46ch}
@media (max-width:980px){
  .wd{padding:52px 0 58px}
  .wd-in{grid-template-columns:1fr;gap:36px}
  .wd-l h2{font-size:32px;max-width:none}
  .wd-h3{font-size:24px}
}

/* ---------- payouts ---------- */
.band{border-top:1px solid var(--line-3);padding:78px 0 90px;background:linear-gradient(180deg,rgba(7,124,250,.07),transparent 60%)}
.band-head{display:flex;align-items:flex-end;gap:36px;margin-bottom:36px}
/* la carte « récompense la plus élevée » de wegetfunded — ici avec le VRAI
   maximum lu sur les 12 certificats publiés (8 100 $, cert-03). */
.record{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;margin-bottom:22px;
  border:1px solid rgba(140,175,255,.28);border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(120deg,rgba(7,124,250,.20),rgba(3,5,28,.85) 70%);background-origin:border-box}
.record-t{padding:30px 30px 28px;display:flex;flex-direction:column;justify-content:center}
.record-t .mono{color:var(--orange);display:block;margin-bottom:14px}
.record-v{font-family:var(--display-2);font-size:52px;font-weight:700;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.record-t p{color:var(--dim);font-size:14px;line-height:1.6;margin:0}
.record-t p b{color:#fff;font-weight:600}
.record-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.record-meta span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}
.record-img{border-left:1px solid var(--line);display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;min-height:230px}
@media (max-width:820px){
  .record{grid-template-columns:1fr}
  .record-img{border-left:0;border-top:1px solid var(--line);min-height:0;aspect-ratio:16/10}
  .record-v{font-size:40px}
}
.band h2{font-size:48px}
.band-head .mono{color:var(--blue);display:block;margin-bottom:16px}
.band-head p{color:var(--dim);max-width:40ch;margin:16px 0 0}
/* même mécanique que la bande de logos : deux jeux, le second en aria-hidden,
   translation de -50 %, masque en fondu sur les bords, pause au survol. */
.cert-set{display:flex;gap:16px;padding-right:16px}
.cert-set figure{margin:0;border:1px solid var(--line);border-radius:var(--r-small);overflow:hidden;
  flex:none;width:296px;background:rgba(255,255,255,.02)}
/* ⚠️ height:auto est OBLIGATOIRE : les attributs width/height du HTML sont des
   indices de présentation. Le width:100% du CSS écrase l'indice de largeur, mais
   RIEN n'écrase celui de hauteur -> l'image s'étire verticalement (428 px au lieu
   de 211). Les attributs restent : ils réservent le bon rapport au chargement. */
.cert-set img{width:100%;height:auto;display:block}
.cert-set figcaption{display:flex;justify-content:space-between;padding:12px 14px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);border-top:1px solid var(--line)}
.cert-set figcaption b{color:var(--green);font-weight:600}
/* le QR code des certificats, demandé le 10/09 */
.cert-note{display:flex;align-items:flex-start;gap:11px;margin:20px 0 0;max-width:70ch;
  font-size:13.5px;color:var(--dim)}
.cert-note b{color:#fff;font-weight:600}
.cert-note svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:3px}
.track-certs{display:flex;width:max-content;animation:defile 58s linear infinite}
.marquee:hover .track-certs,.marquee:focus-within .track-certs{animation-play-state:paused}
/* le second ruban part dans l autre sens : deux bandes qui defilent du meme
   cote donnent une page qui glisse, deux sens opposes se tiennent */
.track-inv{animation-direction:reverse}
.band-sub{margin:34px 0 18px}
.band-sub h3{font-size:22px;margin-bottom:8px}
.band-sub p{color:var(--dim);margin:0;max-width:52ch;font-size:14.5px}
@media(prefers-reduced-motion:reduce){
  .track-certs{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .cert-set[aria-hidden]{display:none}
}

/* ---------- avis : la mosaïque de wegetfunded ----------
   Colonnes CSS plutôt qu'une grille : les cartes ont des hauteurs libres et
   se rangent d'elles-mêmes, sans trou ni calcul de masonry en JavaScript. */
.revs{border-top:1px solid var(--line-3);padding:80px 0 88px}
/* la pastille de note de wegetfunded, au-dessus du titre */
.revs-head{margin-bottom:34px}
.revs-note{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.04);padding:7px 15px;font-size:13.5px;color:var(--dim);margin-bottom:18px}
.revs-note svg{width:15px;height:15px;fill:#5aa8ff;flex:none}
.revs-note b{color:#fff;font-weight:700}
.revs-note i{width:3px;height:3px;border-radius:50%;background:var(--dim-2)}
.revs h2{font-size:48px}
.revs-mosaic{columns:3;column-gap:16px}
.rev{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-rev);
  padding:20px 22px 22px;background:#0b0e22}
/* en-tête de carte : initiales, nom + pays, étoiles blanches dans leur pastille */
.rev-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.rev-av{flex:none;width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#077CFA,#1727C7);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.rev-id{min-width:0;flex:1}
.rev-id b{display:block;font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.rev-id span{display:block;font-size:12.5px;color:var(--dim-2);margin-top:1px}
.rev-stars{flex:none;display:inline-flex;gap:2px;background:rgba(255,255,255,.07);border-radius:999px;padding:5px 9px}
.rev-stars svg{width:11px;height:11px;fill:#fff;display:block}
.rev-t{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.rev-p{color:var(--dim);font-size:14px;line-height:1.62;margin:0}
/* texte replié à 3 lignes ; « Lire la suite » n'apparaît que s'il déborde */
.rev-p.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rev-more{background:none;border:0;padding:0;margin-top:10px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:#5aa8ff}
.rev-more:hover{color:#8fc0ff}
/* la carte de note globale, en fin de mosaïque, comme chez wegetfunded */
.rev-score{padding:24px 22px}
.rev-score > p{color:var(--dim);font-size:14px;margin:0 0 14px}
.rev-score-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-score-in b{background:linear-gradient(90deg,#077CFA,#1727C7);border-radius:9px;padding:5px 11px;
  font-size:15px;font-weight:700}

/* la carte de marque, comme leur « Rejoignez plus de 50 000 traders » */
/* la carte pleine de wegetfunded : un vrai aplat de marque, pas un voile */
.rev-brand{border:1px solid rgba(160,195,255,.35);
  background:radial-gradient(120% 90% at 100% 100%,rgba(90,168,255,.35),transparent 60%),linear-gradient(135deg,#0a6fe6 0%,#1727C7 100%);background-origin:border-box;
  padding:26px 24px;box-shadow:0 14px 40px rgba(7,124,250,.25)}
.rev-brand .ico{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.rev-brand .ico svg{width:20px;height:20px}
.rev-brand h3{font-size:19px;margin-bottom:7px}
.rev-brand p{color:rgba(255,255,255,.78);font-size:13.5px;margin:0}

@media (max-width:980px){ .revs-mosaic{columns:2} }
@media (max-width:700px){ .revs-mosaic{columns:1} }

/* ---------- la presse (02/10/2026) ----------
   Le visuel du communiqué à gauche, les deux articles à droite. Le visuel est
   allongé (1200x1300, fond flouté en haut et en bas) : en object-fit:cover il
   prend la hauteur des deux cartes et ne rogne que ce fond. Une carte = un
   seul lien, toute la carte est cliquable (cible pleine largeur au pouce).
   06/10/2026 : 3e carte (Yahoo Finance) -> la colonne de droite est plus haute
   que le visuel n'est large (rapport 0,61 a 1024 px) : en cover le logo
   Starfunded etait coupe. Sur ordinateur l'image passe en CONTAIN, le cadre
   est rempli par un degrade qui reprend la bordure floutee du visuel (releve
   au pixel), donc la jointure ne se voit pas. Une colonne : cover, inchange. */
.presse{border-top:1px solid var(--line-3);padding:80px 0 88px}
.presse-head{margin-bottom:34px}
.presse h2{font-size:48px}
.presse-head p{color:var(--dim);font-size:16px;margin:14px 0 0;max-width:52ch}
.presse-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}
.presse-vis{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:#eeeeeb linear-gradient(90deg,#ecede8,#eeeee9 25%,#f2f3f0 50%,#f2f3f0 75%,#f0f0ee)}
/* en absolu : l'image ne compte pas dans la hauteur de la rangée, ce sont les cartes qui la donnent */
.presse-vis img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.presse-list{display:grid;gap:16px}
.presse-item{display:flex;flex-direction:column;gap:12px;padding:22px 24px 20px;border:1px solid var(--line);
  border-radius:var(--r-card);background:#0b0e22;color:#fff;text-decoration:none;
  transition:border-color .25s,background-color .25s,transform .25s}
.presse-item:hover{border-color:var(--line-2);background:#10142f}
.presse-item:active{transform:translateY(1px)}
.presse-item:focus-visible{outline:2px solid #5aa8ff;outline-offset:3px}
.presse-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.presse-top img{display:block;filter:brightness(0) invert(1);opacity:.86}
.presse-top time{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.presse-item h3{margin:0;font-family:var(--display-2);font-size:19px;font-weight:600;line-height:1.32;
  letter-spacing:-.012em;color:#fff;text-wrap:pretty}
.presse-item p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.6}
.presse-cta{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:#5aa8ff;transition:color .25s}
.presse-item:hover .presse-cta{color:#8cc3ff}
@media (max-width:980px){
  .presse{padding:56px 0 62px}
  .presse h2{font-size:32px}
  .presse-head{margin-bottom:24px}
  .presse-head p{font-size:15px}
  .presse-in{grid-template-columns:1fr;gap:12px}
  /* sur une colonne, le cadrage d'origine (5:3) : le fond ajouté est rogné */
  .presse-vis{aspect-ratio:5/3}
  .presse-vis img{object-fit:cover}
  .presse-list{gap:12px}
}
@media (max-width:700px){
  .presse-item{padding:18px 18px 16px;gap:10px}
  .presse-item h3{font-size:17px}
  .presse-item p{font-size:14px}
  /* cible tactile : toute la carte est le lien, la ligne d'appel reste lisible */
  .presse-cta{font-size:14.5px}
}

/* ---------- FAQ ----------
   Les 9 questions du vrai site, reprises telles quelles (index.html).
   <details> natif : ouverture au clavier d'office, et Ctrl+F trouve le
   texte replié depuis Chrome 120 — zéro ligne de JavaScript. */
.faq{border-top:1px solid var(--line-3);padding:80px 0 88px}
.faq .mono{color:var(--blue);display:block;margin-bottom:16px}
.faq h2{font-size:48px;margin-bottom:34px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.qa{border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.02);
  overflow:hidden;transition:border-color .18s,background .18s}
.qa.is-open{border-color:rgba(140,175,255,.32);background:rgba(7,124,250,.06)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px 22px;font-family:var(--display-2);font-size:16px;font-weight:700;letter-spacing:-.005em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#fff}
.qa-ico{flex:none;width:22px;height:22px;position:relative}
.qa-ico::before,.qa-ico::after{content:"";position:absolute;left:50%;top:50%;background:var(--blue);
  border-radius:2px;transform:translate(-50%,-50%);transition:transform .22s ease,opacity .22s ease}
.qa-ico::before{width:14px;height:2.5px}
.qa-ico::after{width:2.5px;height:14px}
.qa.is-open .qa-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa-a{overflow:hidden;will-change:height}
.qa-in{padding:0 22px 20px;color:var(--dim);font-size:14.5px;line-height:1.68;max-width:74ch}
.qa-in p{margin:0 0 10px}
.qa-in p:last-child{margin-bottom:0}
.qa-in strong{color:#fff;font-weight:600}
.qa-in ul{margin:0;padding-left:18px}
.qa-in li{margin-bottom:6px}
.qa-in li:last-child{margin-bottom:0}

/* ---------- communauté : newsletter + tuiles, façon wegetfunded ---------- */
.news{border-top:1px solid var(--line-3);padding:80px 0 86px}
.news .mono{color:var(--blue);display:block;margin-bottom:14px}
.news > .wrap > h2{font-size:44px;margin-bottom:34px}
.news-in{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.news-in > *{min-width:0}
.news-box{border:1px solid rgba(140,175,255,.24);border-radius:var(--r-panel);
  background:linear-gradient(140deg,rgba(7,124,250,.20),rgba(3,5,28,.86) 70%);
  padding:34px 30px;display:flex;flex-direction:column;justify-content:center}
.news-box h3{font-size:24px;margin-bottom:10px}
.news-box p{color:var(--dim);font-size:14px;line-height:1.6;margin:0 0 22px;max-width:40ch}
.news-form{display:flex;gap:10px}
.news-form input{flex:1;min-width:0;background:rgba(3,5,28,.7);border:1px solid var(--line-2);
  border-radius:999px;padding:13px 20px;color:#fff;font-family:var(--sans);font-size:16px;outline:none}
/* ↑ 16 px minimum : en dessous, Safari sur iPhone zoome dans le champ au toucher et la
   page reste zoomée — elle glisse ensuite de côté (même cause que le code de l'Instant) */
.news-form input::placeholder{color:var(--dim-2)}
.news-form input:focus{border-color:var(--blue)}
.news-note{margin-top:12px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim-2)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.tile{min-width:0}
.tile{position:relative;border-radius:var(--r-card);padding:22px;min-height:158px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  transition:transform .18s ease}
.tile:hover{transform:translateY(-2px)}
.tile svg{width:30px;height:30px}
.tile b{font-size:16px;font-weight:700}
.tile span{overflow-wrap:anywhere}
.tile span{display:block;font-size:12.5px;opacity:.78;margin-top:3px;font-weight:400}
.t-wa{background:#1fa855}
.t-mail{background:linear-gradient(150deg,#0b3fae,#062a86)}
.t-dc{background:#5865F2}
.t-ig{background:linear-gradient(140deg,#F9A03C,#E1306C 46%,#7638FA)}
@media (max-width:980px){
  .news{padding:52px 0 58px}
  .news > .wrap > h2{font-size:30px}
  .news-in{grid-template-columns:1fr}
  .news-form{flex-direction:column}
  .news-form .btn{width:100%}
}

/* ---------- final ---------- */
/* le CTA final est posé sur l'image générée : texte à gauche, sur son tiers sombre */
.final{position:relative;overflow:hidden;border-top:1px solid var(--line-3);padding:104px 0;text-align:left}
.final-bg{position:absolute;inset:0;z-index:0}
.final-bg img{width:100%;height:100%;object-fit:cover;display:block}
.final-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(3,5,28,.86) 34%,rgba(3,5,28,.34) 62%,rgba(3,5,28,.55) 100%),
             linear-gradient(180deg,var(--ink),transparent 22%,transparent 76%,var(--ink))}
.final > .wrap{position:relative;z-index:2}
.final .mono{color:var(--orange);display:block;margin-bottom:16px}
.final h2{font-size:56px;margin-bottom:16px;max-width:14ch}
.final p{max-width:44ch}
.final h2{font-size:52px;margin-bottom:16px}
.final p{color:var(--dim);margin:0 0 30px}
/* ---------- pied de page : celui du vrai site ----------
   Cinq blocs : logo + contacts, la mention approuvée par le PSP (encadrée,
   en anglais dans toutes les langues — c'est SA formulation qui doit être
   vue), la mention société, le long texte légal repliable, et la barre du bas. */
.foot{border-top:1px solid var(--line-3);padding:56px 0 34px;background:var(--ink)}
.foot-grid{display:flex;align-items:center;gap:26px;padding-bottom:30px}
.foot-logo img{height:34px;display:block}
.foot-sep{flex:1;height:1px;background:var(--line)}
.foot-contact{display:flex;gap:26px;flex-wrap:wrap}
.foot-mail{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--dim)}
.foot-mail:hover{color:#fff}
.foot-mail svg{width:16px;height:16px;flex:none;opacity:.7}
.psp{border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.025);
  padding:18px 22px;margin-bottom:26px}
.psp p{margin:0;font-size:12.5px;line-height:1.7;color:var(--dim)}
.legal{font-size:12px;line-height:1.75;color:var(--dim-2);margin:0 0 30px}
.legal-more{display:none}
.legal.is-open .legal-more{display:inline}
.legal-toggle{background:none;border:0;padding:0;margin-left:6px;cursor:pointer;
  font-family:var(--display-2);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#5aa8ff;text-decoration:underline;text-underline-offset:3px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line-3);padding-top:22px}
.foot-bottom p{margin:0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim-2)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.foot-links a{font-size:13px;color:var(--dim)}
.foot-links a:hover{color:#fff}
/* pied de page : les pages de contenu (21/09), au-dessus de la mention PSP */
.foot-res{display:flex;flex-wrap:wrap;gap:12px 28px;padding:24px 0 4px;margin-top:26px;border-top:1px solid var(--line-3)}
.foot-res a{font-size:14px;font-weight:500;color:rgba(255,255,255,.82);transition:color .15s}
.foot-res a:hover{color:#fff}
@media (max-width:700px){
  .foot{padding:40px 0 28px}
  .foot-grid{flex-direction:column;align-items:flex-start;gap:18px}
  .foot-sep{display:none}
  .foot-contact{flex-direction:column;gap:12px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:16px}
}

.burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;background:none;color:#fff;cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:#fff;position:relative}
.burger span:before,.burger span:after{content:'';position:absolute;left:0;width:16px;height:1.5px;background:#fff}
.burger span:before{top:-5px}.burger span:after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}
.burger span,.burger span:before,.burger span:after{transition:transform .22s ease,background .15s}

/* le panneau déroulant : replié à hauteur 0, on anime la hauteur réelle */
.menu{position:relative;z-index:3;overflow:hidden;background:rgba(3,5,28,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.menu .wrap{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:0;
  padding-top:10px;padding-bottom:18px;text-align:left}
.menu a{display:block;padding:15px 2px;font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:-.005em;color:var(--dim);border-bottom:1px solid var(--line-3)}
.menu a:active,.menu a:hover{color:#fff}
.menu-private{position:relative;color:#9ecbff !important}
.menu-private .nav-badge{position:static;margin-left:10px;display:inline-block;vertical-align:middle}
/* le pied du burger : connexion et inscription côte à côte — la langue et le
   panier n'y sont plus, ils restent dans le header comme chez wegetfunded */
.menu-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:18px}
.menu-foot a.btn{display:flex;justify-content:center;width:100%;text-transform:none;letter-spacing:.01em;
  border-bottom:0;padding:12px 16px;font-family:var(--sans);font-size:15px;font-weight:600;color:#fff}
@media (min-width:1181px){ .menu{display:none} }
/* le header bascule plus tôt que le reste : sa nav est longue */
@media (max-width:1180px){
  nav,.h-login,.hgroup .btn{display:none}
  .burger{display:inline-flex}
  header .wrap{gap:0;justify-content:space-between}
}



/* fenêtres basses (portables 768 px, fenêtre non maximisée) : le titre sur
   4 lignes ne rentre pas sous la barre collante, le CTA passait sous le pli. */
@media (min-width:981px) and (max-height:800px){
  h1{font-size:64px}
  .sub{font-size:17px;margin-top:20px}
  .hero-ctas{margin-top:28px}
  /* on gagne de la place en bas, JAMAIS en haut : les 96 px du haut sont ceux
     de la pastille promo qui flotte au-dessus du hero */
  .hero-body{padding:96px 0 36px}
  .rating{margin-top:22px}
}
@media (min-width:981px) and (max-height:660px){
  h1{font-size:50px}
  .sub{font-size:15.5px;margin-top:16px}
  .hero-ctas{margin-top:22px}
  .btn-lg{padding:12px 24px;font-size:15px}
}
@media (max-width:980px){
  .wrap{padding:0 20px}
  header .wrap{height:70px;gap:0}
  nav,.h-login,.hgroup .btn{display:none}
  .nav-auth{display:block}  /* remonte dans le burger, comme sur le site */
  .burger{display:inline-flex}
  .hgroup{gap:8px}
  .hero{min-height:0}
  /* la pastille flotte : la place qu'elle occupe doit être réservée ici,
     sinon elle recouvre le haut du hero */
  .hero-body{padding:106px 0 48px}
  h1{font-size:31px;max-width:none;letter-spacing:-.02em}
  .hero-pills{font-size:12.5px;padding:10px 18px;margin-top:20px;text-wrap:balance;max-width:100%}
  .sub{font-size:15px;margin-top:16px}
  .sub{font-size:15px}
  /* retour du 11/09 : « trop large ». Les deux boutons prennent la largeur du plus
     long (colonne max-content), centrés, au lieu de toute la largeur de l'écran. */
  .hero-ctas{display:grid;grid-template-columns:max-content;justify-content:center;gap:12px;margin-top:28px}
  .hero-ctas .btn{width:100%}
  .dock .wrap{grid-template-columns:1fr;gap:16px;padding-top:18px;padding-bottom:18px}
  .dock-lbl{max-width:none}
  .codes{grid-template-columns:1fr;gap:10px}
  .dock-timer{text-align:left;display:flex;align-items:baseline;gap:12px}
  .dock-timer span{margin-top:0}
  .cfg-head h2{font-size:34px}
  .logos{padding:26px 0}
  .plogo{min-width:172px;height:74px;padding:0 22px}
  .plogo img{height:18px}
  .cfg{padding:52px 0 58px}
  .seg{display:flex;width:100%}
  .seg button{flex:1;padding:11px 8px;font-size:12.5px}
  .band{padding:50px 0 58px}
  .band-head{flex-direction:column;align-items:flex-start;gap:22px}
  .band h2,.revs h2,.final h2,.faq h2,.how h2{font-size:32px}
  .steps{grid-template-columns:1fr}
  .wc{width:250px}
  .why h2{font-size:32px}
  .figs{padding:48px 0 52px}
  .how{padding:52px 0 58px}
  .qa summary{font-size:14.5px;padding:16px 18px;gap:14px}
  .qa-in{padding:0 18px 18px;font-size:13.5px}
  .final{padding:56px 0}
  .band-head .btn{margin-left:0 !important}
  .band-grid{grid-template-columns:1fr 1fr;gap:12px}
}

@media (max-width:700px){
  /* le tableau devient une liste de blocs : intitulé, puis les deux valeurs
     côte à côte avec leur en-tête, chacune sur la moitié de la largeur */
  .matrix thead{display:none}
  .matrix,.matrix tbody,.matrix tr,.matrix td{display:block;width:100%}
  .matrix tr{padding:13px 0;border-top:1px solid var(--line-3)}
  .matrix tr.is-key{background:rgba(7,124,250,.07);box-shadow:inset 3px 0 0 var(--blue);
    padding-left:14px;padding-right:12px;border-radius:0 8px 8px 0}
  .matrix tr.is-key td{background:transparent}
  .matrix td{border-top:0;padding:0}
  .matrix td:first-child{color:#fff;font-weight:600;font-size:14px;margin-bottom:9px}
  .matrix td.c{display:inline-block;width:49%;text-align:left;vertical-align:top;font-size:14.5px}
  .tip{display:none}
  .matrix .hint{display:block}
  .pricebar{grid-template-columns:1fr 1fr;gap:16px;padding:18px}
  .pb-cta{grid-column:1 / -1;align-items:stretch}
  .pb-cta .btn{width:100%}
  .sz{grid-template-columns:repeat(2,1fr)}
  .matrix td.c::before{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);margin-bottom:3px}
  .matrix .hint{font-size:11.5px;margin-top:3px}
  .matrix td:first-child .hint{color:var(--dim-2);font-weight:400}

  /* cibles tactiles : 35 px et 34 px mesurés, on passe à 44 */
  .addon{min-height:44px;padding:0 16px;font-size:13.5px}
  .code{min-height:38px;padding:0 14px}
  .buy-extra-row a{display:inline-block;padding:6px 0}

  /* micro-étiquettes : 9 à 10 px mesurés, illisibles sur un téléphone */
  .why h2,.how h2{font-size:27px;max-width:none}
  .code{min-height:40px}
  .cert-set figcaption{font-size:10.5px}
  .step-chip{font-size:10.5px}
}
@media (max-width:700px){
  .promo-strip{padding:14px 12px 0}
  .promo-pill{gap:8px;padding:4px 12px}
  .pp-lbl{display:none}
  .pp-txt{font-size:9.5px;letter-spacing:.09em}
  .pp-off{font-size:11px;padding:2px 8px}
  .code{font-size:11.5px;padding:4px 10px}
  .promo-pill .code{font-size:11.5px;padding:3px 10px}
}


/* très petits écrans (iPhone SE 1ʳᵉ génération, 320 px) : la pastille dépassait de 9 px
   dans le moteur de Safari (webkit-debord.cjs, 11/09). Écrit APRÈS le bloc 700 px. */
@media (max-width:360px){
  .promo-strip{padding-left:10px;padding-right:10px}
  .promo-pill{gap:6px;padding:4px 10px}
  .pp-txt{letter-spacing:.04em}
}

/* ---------- retours Alexandre du 10/09 : ruptures ---------- */
@media (max-width:1080px){
  .cfg-stack{grid-template-columns:1fr;grid-template-rows:none;max-width:760px}
  .cfg-a,.cfg-b,.cfg-c{grid-column:1}
  .cfg-a{grid-row:1} .cfg-b{grid-row:2} .cfg-c{grid-row:3}
  .cfg-b{position:static}
  .buy .addons{flex-direction:row}
  .buy .addon{width:auto}
}
@media (max-width:700px){
  .keys{grid-template-columns:repeat(2,1fr);gap:8px}
  .key{padding:12px}
  .key-v{font-size:20px}
  .sz{grid-template-columns:repeat(2,1fr)}
  .buy{padding:18px}
  .buy-now{font-size:36px}
  .buy .addons{flex-direction:column}
  .buy .addon{width:100%}
  .press{padding:18px 0}
  .press .wrap{flex-direction:column;align-items:stretch;gap:12px}
  .press-t{text-align:center}
  .press-set{gap:40px;padding-right:40px}
  .press-set img{height:15px !important}
  .press-set img.big{height:21px !important}
  .rules > summary{padding:14px 16px;font-size:13px}
  .rt-stars i{width:19px;height:19px}
  .rt-stars svg{width:12px;height:12px}
  .rt-word,.rt-score{font-size:14.5px}
  .rt-base{font-size:11.5px}
}


/* ---------- le wall of proof (/proof) ----------
   Une grille de vignettes cliquables, filtrable payouts / challenges. */
.proof{padding:52px 0 96px}
.pf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  flex-wrap:wrap;margin-bottom:26px}
.pf-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  background:rgba(3,5,28,.6);padding:4px;gap:4px}
.pf-tabs button{background:none;border:0;border-radius:999px;color:var(--dim);cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;padding:10px 18px;transition:.15s;
  display:inline-flex;align-items:center;gap:8px}
.pf-tabs button span{font-family:var(--display-2);font-size:11px;font-weight:700;color:var(--dim-2)}
.pf-tabs button.on{background:linear-gradient(90deg,#077CFA,#1727C7);color:#fff;
  box-shadow:0 6px 18px rgba(7,124,250,.4)}
.pf-tabs button.on span{color:rgba(255,255,255,.82)}
.pf-note{display:flex;align-items:flex-start;gap:11px;margin:0;max-width:60ch;
  font-size:13.5px;color:var(--dim)}
.pf-note svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:3px}
.pf-note b{color:#fff;font-weight:600}
.pf-note a{color:#5aa8ff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.pf-card{display:block;border:1px solid var(--line);border-radius:var(--r-small);overflow:hidden;
  background:rgba(255,255,255,.02);transition:border-color .2s,transform .2s,box-shadow .2s}
/* ⚠️ display:block bat le style par défaut de [hidden] : sans cette ligne, le
   filtre ne masquerait rien. */
.pf-card[hidden]{display:none}
.pf-card:hover{border-color:rgba(140,175,255,.42);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(2,5,71,.55)}
.pf-card img{width:100%;height:auto;display:block}
.pf-in{padding:12px 14px 13px;border-top:1px solid var(--line)}
.pf-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pf-nom{font-size:13.5px;font-weight:600;color:#fff}
.pf-val{font-family:var(--display-2);font-size:14px;font-weight:700;color:var(--green);white-space:nowrap}
.pf-card[data-type="challenge"] .pf-val{color:#5aa8ff}
.pf-meta{display:flex;justify-content:space-between;gap:10px;margin-top:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim-2)}
/* la vignette ouvre la page de vérification de CE certificat (11/09) : son
   identifiant — celui imprimé à côté du QR — et l'invitation à vérifier */
.pf-verif{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:9.5px;
  font-weight:500;letter-spacing:.04em;color:var(--green)}
.pf-verif i{display:inline-flex;align-items:center;gap:5px;font-style:normal;min-width:0;white-space:nowrap}
.pf-verif svg{width:11px;height:11px;flex:none}
.pf-verif span{color:#5aa8ff;white-space:nowrap}
.pf-card:hover .pf-verif span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){
  .proof{padding:34px 0 60px}
  .pf-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .pf-tabs{width:100%}
  .pf-tabs button{flex:1;justify-content:center;padding:10px 6px;font-size:12.5px}
  .pf-in{padding:9px 10px 10px}
  .pf-nom{font-size:12px}
  .pf-val{font-size:12.5px}
  .pf-meta{font-size:8.5px;letter-spacing:.05em}
}


/* ---------- le sélecteur de langue ---------- */
.lang{position:relative}
/* le déclencheur de wegetfunded : un globe et le code en gras, sans cadre */
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  border-radius:10px;padding:9px 10px;color:#fff;cursor:pointer;transition:background .15s;
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.01em}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:rgba(255,255,255,.07)}
.lang-btn svg{width:18px;height:18px;flex:none}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:20;min-width:176px;
  background:rgba(3,5,28,.97);border:1px solid var(--line);border-radius:var(--r-small);
  padding:6px;display:grid;gap:2px;box-shadow:0 18px 40px rgba(2,5,71,.6);backdrop-filter:blur(12px)}
.lang-menu[hidden]{display:none}
.lang-menu button{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:10px;
  padding:9px 12px;text-align:left;font-family:var(--sans);font-size:14px;color:var(--dim);cursor:pointer;transition:.12s}
.lang-menu button b{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;
  color:var(--dim-2);width:20px}
.lang-menu button:hover{background:rgba(255,255,255,.06);color:#fff}
.lang-menu button.on{background:rgba(7,124,250,.18);color:#fff}
.lang-menu button.on b{color:#5aa8ff}
/* en mobile, la langue et le panier RESTENT dans le header (wegetfunded) :
   globe + code, panier, burger — sans libellé autour */
@media (max-width:980px){
  .hgroup{gap:2px}
  .lang-btn{padding:8px 8px;font-size:13.5px}
  .lang-btn svg{width:19px;height:19px}
  .cart{width:40px;height:40px}
  .burger{margin-left:6px;border-radius:10px}
}

/* ---------- les drapeaux (retour d'Aymen du 11/09 : « mets les drapeaux, c'est stylé ») ----------
   En CSS seulement : les 8 pages partagent ce sélecteur, aucun HTML touché.
   SVG et non émoji : Windows affiche les émojis drapeaux en lettres (« FR »).
   EN = Royaume-Uni (STAR FINANCE LTD est une société anglaise).
   Le bouton suit la langue en cours : i18n.js pose documentElement.lang (fr-FR, en, es, it).
   Écrit APRÈS le bloc 980 px ci-dessus, qui retaille le globe. */
:root{
  --drapeau-fr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002395' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ED2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
  --drapeau-en:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' clip-path='url(%23t)' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
  --drapeau-es:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E");
  --drapeau-it:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23CE2B37' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}
/* dans le menu : un drapeau rond à la place du code — le code reste dans le HTML, donc lu
   par un lecteur d'écran */
.lang-menu button b{width:20px;height:20px;flex:none;border-radius:50%;font-size:0;color:transparent;
  background:center/cover no-repeat var(--drapeau-fr);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.lang-menu button[data-lang="en"] b{background-image:var(--drapeau-en)}
.lang-menu button[data-lang="es"] b{background-image:var(--drapeau-es)}
.lang-menu button[data-lang="it"] b{background-image:var(--drapeau-it)}
.lang-menu button.on b{box-shadow:0 0 0 2px #5aa8ff}
/* sur le bouton : le drapeau de la langue en cours à la place du globe, puis le code */
.lang-btn svg{display:none}
.lang-btn::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;
  background:center/cover no-repeat var(--drapeau-fr);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
:root[lang="en"] .lang-btn::before{background-image:var(--drapeau-en)}
:root[lang="es"] .lang-btn::before{background-image:var(--drapeau-es)}
:root[lang="it"] .lang-btn::before{background-image:var(--drapeau-it)}
/* le menu des langues OPAQUE : son backdrop-filter était imbriqué dans celui du header,
   donc sans effet (il ne voit pas la page derrière le header), et à 97 % la pastille
   promo et le titre du hero se lisaient au travers sur mobile (captures du 11/09) */
.lang-menu{background:linear-gradient(180deg,#081045,#040828);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- maillage vers le blog (26/09) ---------- */
.sf-plus{color:var(--dim);font-size:15px;line-height:1.6;max-width:62ch}
.sf-plus a{color:#fff;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
.sf-plus a:hover{color:var(--blue)}
.how .sf-plus{margin:-26px 0 42px}
.duo .sf-plus{margin:-28px 0 42px}
.intro .sf-plus{margin:14px auto 0}