/* =============================================================================
   guide.css — feuille de style unique des 13 guides propfirm.
   Chargée APRÈS styles-common.css. Deux parties : (1) socle — tokens, typo et
   composants ; (2) mise en page — habillage du markup des guides.
   Les réglages par page (mondes de couleurs) restent dans le <style> local
   de chaque guide. Fichier ÉDITÉ DIRECTEMENT (hors pipeline minify-css.js).

   Direction : « Premium & profond » — grande typo, cartes profondes, gros
   chiffres, infographies larges CENTRÉES. Dark, Roboto + IBM Plex Mono.
   Anti-fragilité : flux naturel (flex/grid/tables), zéro texte en position
   absolue sur une barre → aucune superposition possible.
   ========================================================================== */

/* =============================================================================
   PARTIE 1 — SOCLE (tokens, typo, composants)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #090a0d;
  --bg-2: #0d0f14;
  --card: linear-gradient(162deg, #191c25 0%, #111319 82%);
  --card-solid: #14161d;
  --ink: #f3f6fc;
  --body: #c9d0dd;
  --dim: #8b93a4;
  --line: rgba(165,180,205,0.12);
  --line-2: rgba(165,180,205,0.22);
  --acc: #b7c4e0;          /* accent slate lumineux */
  --acc-ink: #d8e1f2;
  --acc-deep: #7d8db0;
  --glow: rgba(150,175,230,0.30);
  --pos: #46e08a;
  --neg: #fb7185;
  --warn: #fbbf24;
  --info: #7cc4ff;
  --r: 20px;
  --r-sm: 13px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 26px 60px -30px rgba(0,0,0,0.9);
  --shadow-hi: 0 1px 0 rgba(255,255,255,0.08) inset, 0 40px 80px -30px rgba(0,0,0,0.95);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Roboto', 'Roboto Fallback', system-ui, sans-serif;
  --maxw: 1300px;
  --colw: 980px;
}

/* ---------- Reset / base ---------- */
.gx *, .gx *::before, .gx *::after { box-sizing: border-box; }
body { background: var(--bg); }
/* Lueur d'ambiance fixe (profondeur, pas de texture/grain) */
.gx-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gx-bg::before { content: ''; position: absolute; top: -260px; left: 50%; transform: translateX(-50%); width: 1100px; height: 720px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 66%); filter: blur(30px); opacity: 0.85; }

main:has(.gx) { margin-top: 64px; }
.gx { color: var(--body); font-family: var(--sans); }
.gx-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* =============================================================================
   HERO
   ========================================================================== */
.hero { text-align: center; padding: clamp(48px, 7vw, 92px) 0 clamp(36px, 4vw, 56px); position: relative; }
.hero-crumb { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); text-decoration: none; margin-bottom: 26px; transition: color 0.2s; }
.hero-crumb:hover { color: var(--acc-ink); }
.hero-crumb svg { transition: transform 0.2s var(--ease); }
.hero-crumb:hover svg { transform: translateX(-3px); }
.hero-logo { width: 96px; height: 96px; border-radius: 26px; object-fit: cover; margin: 0 auto 24px; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 9px color-mix(in srgb, var(--acc) 7%, transparent), 0 26px 50px -18px rgba(0,0,0,0.85); }
.hero h1 { font-size: clamp(2.7rem, 1.7rem + 4.4vw, 4.6rem); font-weight: 900; letter-spacing: -0.035em; line-height: 0.96; color: var(--ink); margin: 0 0 18px; text-wrap: balance; }
/* Signature visible sous le h1 : auteur + dates reelles (<time>).
   Elles n existaient que dans le JSON-LD, donc invisibles pour le lecteur
   comme pour un moteur qui lit le texte rendu. Ton discret, sous le titre. */
.hero-byline { font-size: 0.82rem; color: var(--dim); margin: -6px 0 20px; line-height: 1.6; }
.hero-byline a { color: var(--dim); text-decoration: none; border-bottom: 1px solid rgba(160,175,200,0.28); transition: color .2s, border-color .2s; }
.hero-byline a:hover { color: var(--text); border-bottom-color: currentColor; }
.hero-byline time { white-space: nowrap; }

.hero-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-bottom: 26px; }
.hero-meta .tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.hero-tp { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-solid); }
.hero-tp b { font-family: var(--mono); color: var(--ink); font-size: 0.86rem; }
.hero-tp .stars { color: #f5a623; letter-spacing: 1px; font-size: 0.82rem; }
.hero-tp .stars .h { opacity: 0.4; }
.hero-tp .c { font-size: 0.76rem; color: var(--dim); }
.hero-verdict { font-size: clamp(1.14rem, 1rem + 0.6vw, 1.36rem); line-height: 1.6; color: var(--body); max-width: 60ch; margin: 0 auto 34px; text-wrap: pretty; }
.hero-verdict b { color: var(--ink); font-weight: 700; }

/* KPI (cartes chiffres) */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 auto 34px; max-width: 940px; }
.kpi { padding: 26px 20px; border-radius: var(--r); text-align: center; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 60%, transparent), transparent); opacity: 0.7; }
.kpi:hover { transform: translateY(-5px); box-shadow: var(--shadow-hi); }
.kpi .k-l { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.kpi .k-v { font-size: clamp(1.8rem, 1.4rem + 1.1vw, 2.3rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.kpi .k-s { margin-top: 6px; font-size: 0.8rem; font-weight: 600; color: var(--dim); }

.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: 999px; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s var(--ease), box-shadow 0.2s, border-color 0.2s, background 0.2s; }
.btn svg { width: 18px; height: 18px; }
.btn-p { background: linear-gradient(162deg, var(--acc), var(--acc-deep)); color: #0a0d14; box-shadow: 0 16px 34px -14px var(--glow), 0 1px 0 rgba(255,255,255,0.28) inset; }
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -14px var(--glow), 0 1px 0 rgba(255,255,255,0.34) inset; }
.btn-g { background: var(--card-solid); color: var(--acc-ink); border-color: var(--line-2); }
.btn-g:hover { transform: translateY(-2px); border-color: var(--acc); }

/* =============================================================================
   LAYOUT : TOC sticky + contenu centré
   ========================================================================== */
.body { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-bottom: 100px; }
.toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 108px); overflow-y: auto; padding-right: 6px; }
.toc::-webkit-scrollbar { width: 4px; }
.toc::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.toc-title { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); padding: 0 12px 12px; }
.toc a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; font-size: 0.92rem; font-weight: 600; color: var(--dim); text-decoration: none; transition: color 0.2s, background 0.2s; }
.toc a .n { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); opacity: 0.7; width: 18px; flex-shrink: 0; }
.toc a:hover { color: var(--acc-ink); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.toc a.active { color: var(--ink); background: color-mix(in srgb, var(--acc) 15%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); }
.toc a.active .n { color: var(--acc); opacity: 1; }
.toc-prog { margin: 16px 12px 0; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.toc-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-deep), var(--acc)); border-radius: 2px; }

.content { min-width: 0; max-width: var(--colw); }

/* =============================================================================
   SECTIONS & TYPO
   ========================================================================== */

.sec-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.sec-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--acc); opacity: 0.6; }

/* =============================================================================
   COMPOSANTS
   ========================================================================== */
/* Panneau générique (carte profonde) */

/* Onglets de formule */

@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Table premium */

/* Rangée de comparaison à barres (drawdown vs objectif) — flux naturel, texte À CÔTÉ */

/* Jauges (cohérence) & mini-stats */

/* Ratings (verdict) — gros chiffre, pas de superposition */

/* Grille de statut (styles autorisés) */

/* Cartes plateformes / flux */

/* Grille instruments */

/* Callouts */
.callout { position: relative; padding: 20px 22px 20px 60px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--body); line-height: 1.6; font-size: 1.02rem; margin: 22px 0; }
.callout b { color: var(--ink); }

.callout.info { border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* FAQ */

/* Badges inline */

/* =============================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  
  
  html { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }

/* =============================================================================
   MOBILE : TOC en drawer
   ========================================================================== */
.toc-btn, .toc-close, .toc-ov { display: none; }
@media (max-width: 960px) {
  .body { grid-template-columns: 1fr; }
  .toc {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 9997;
    background: var(--bg-2); border-right: 1px solid var(--line-2); padding: 78px 14px 20px;
    max-height: none; transform: translateX(-100%); transition: transform 0.3s var(--ease); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  body.toc-open .toc { transform: none; }
  .content { max-width: 100%; }
  .toc-ov { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9996; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  body.toc-open .toc-ov { opacity: 1; pointer-events: auto; }
  .toc-btn { display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 16px; bottom: 16px; z-index: 9998; padding: 13px 20px; border: none; border-radius: 999px; background: linear-gradient(162deg, var(--acc), var(--acc-deep)); color: #0a0d14; font-family: var(--sans); font-weight: 700; font-size: 0.9rem; cursor: pointer; box-shadow: 0 12px 30px -8px var(--glow); }
  body.toc-open .toc-btn { display: none; }
  body.toc-open .toc-close { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 16px; left: calc(min(300px, 86vw) - 48px); z-index: 9999; width: 38px; height: 38px; border-radius: 11px; background: var(--card-solid); border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; }
}

@media (max-width: 720px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  
  .cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  
  
  
  
  
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   PARTIE 2 — MISE EN PAGE
   Habille le markup des guides dans le langage design du socle ci-dessus.
   Couleur : système de « mondes » par firme, dosé sobre.
   Les réglages par page (mondes, sections) restent dans le <style> local
   de chaque guide.
   ========================================================================== */

    /* ---------- Tokens couleur (mondes + sémantique data) ---------- */
    .gx {
      --pro: #b06bff;    --pro-d: #7c3aed;
      --flex: #15c48e;   --flex-d: #059669;
      --daily: #22d3ee;  --daily-d: #0e7490;
      --direct: #ff8a2b; --direct-d: #ea580c;
      --c-dd: #ff4d5e;   --c-obj: #22d3ee;  --c-dll: #ffc53d;
      --c-ok: #2fd66e;   --c-warn: #ffb020; --c-bad: #ff4d5e;
    }

    /* Une couleur par section, propagée en variable : eyebrow, barre des h3,
       filet des tableaux… tout s'accorde sans règle supplémentaire (motif v10). */
    #presentation   { --sec-c: var(--daily); }
    #comptes        { --sec-c: var(--flex); }
    #regles         { --sec-c: var(--c-dd); }
    #styles-trading { --sec-c: var(--pro); }
    #plateforme     { --sec-c: var(--daily); }
    #commissions    { --sec-c: var(--c-warn); }
    #funded         { --sec-c: var(--flex); }
    #verdict        { --sec-c: var(--direct); }
    #bon-a-savoir   { --sec-c: var(--c-warn); }
    #faq            { --sec-c: var(--pro); }
    .content .section .sec-eyebrow { color: var(--sec-c, var(--acc)); }
    /* Mot-clé du titre : une seule teinte, celle de la section. Léger dégradé
       clair -> base sur la même couleur (pas d'arc-en-ciel multi-teintes). */
    .grad-t { color: var(--sec-c, var(--daily)); }
    @supports (background: color-mix(in oklab, red, white)) {
      .grad-t {
        background: linear-gradient(92deg,
          color-mix(in oklab, var(--sec-c, var(--daily)) 74%, #ffffff),
          var(--sec-c, var(--daily)));
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
    }
    /* pas de liseré coloré sur les tableaux (effet « sourcil ») — la couleur de
       section vit dans l'eyebrow, les titres et les cartes, pas ici. */
    /* Eyebrow : police du site (pas la mono), nettement plus grasse et plus grande
       qu'avant — elle se lisait plus petite que le corps de texte. */
    .sec-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; }
    .sec-eyebrow::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.9; }

    /* Onglets : la pastille active prend la couleur de son monde */
    .account-tabs .tab-btn[data-tab="pro"].active    { background: linear-gradient(135deg, var(--pro), var(--pro-d)); color: #fff; box-shadow: 0 10px 22px -12px var(--pro); }
    .account-tabs .tab-btn[data-tab="flex"].active   { background: linear-gradient(135deg, var(--flex), var(--flex-d)); color: #04241a; box-shadow: 0 10px 22px -12px var(--flex); }
    .account-tabs .tab-btn[data-tab="daily"].active  { background: linear-gradient(135deg, var(--daily), var(--daily-d)); color: #052a33; box-shadow: 0 10px 22px -12px var(--daily); }
    .account-tabs .tab-btn[data-tab="direct"].active { background: linear-gradient(135deg, var(--direct), var(--direct-d)); color: #331704; box-shadow: 0 10px 22px -12px var(--direct); }
    .account-tabs .tab-btn[data-tab="eval"].active   { background: linear-gradient(135deg, var(--flex), var(--flex-d)); color: #04241a; }
    /* sous-onglets des 4 configs Daily : teinte du monde Daily, gabarit réduit */
    .account-tabs[data-tabs="dcfg"] { margin-top: 0; }
    .account-tabs[data-tabs="dcfg"] .tab-btn { padding: 8px 16px; font-size: 0.86rem; }
    .account-tabs[data-tabs="dcfg"] .tab-btn.active { background: linear-gradient(135deg, var(--daily), var(--daily-d)); color: #052a33; box-shadow: 0 10px 22px -12px var(--daily); }

    /* Liseré coloré à gauche des tableaux, selon le compte affiché */
    /* (liserés colorés retirés : la couleur passe par l'onglet actif et les cartes) */

    /* Prix des tableaux en vert (comme le hero) */
    .content .section table td:last-child { color: var(--pos); font-family: var(--mono); font-weight: 700; }
    .content .section table th:last-child { color: var(--dim); }

    /* ---------- Sections & typo (classes du guide actuel) ---------- */
    .content .section { margin-bottom: clamp(70px, 9vw, 118px); scroll-margin-top: 88px; }
    /* filet de séparation discret entre sections : repère visuel sans surcharge */
    .content .section + .section { border-top: 1px solid var(--line); padding-top: clamp(46px, 6vw, 74px); }
    /* règle générale : un bloc visuel suivi de texte doit respirer (sinon le
       paragraphe colle à l'infographie, comme les jauges de cohérence). */
    .cohgrid + p, .ddgrid + p, .price-bars + p, .styles-grid + p, .platform-grid + p, .data-grid + p, .payout-flow + p, .pros-cons + p, .vscore + p, .content .section table + p{ margin-top: 30px; }
    .content [id] { scroll-margin-top: 88px; }
    /* titres en 900 comme la v10 (h2 jusqu'à 44px) */
    .content .section h2 { font-size: clamp(2rem, 1.45rem + 2.1vw, 2.75rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.06; color: var(--ink); margin: 0 0 1.35rem; text-wrap: balance; }
    /* plus d'air AVANT les sous-titres : c'est ce qui casse l'effet « pâté ».
       Barre colorée à gauche = repère de niveau + rappel de la couleur de section. */
    .content .section h3 { position: relative; font-size: clamp(1.38rem, 1.1rem + 0.95vw, 1.72rem); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); margin: 3.4rem 0 1.15rem; padding-left: 16px; }
    .content .section h3::before { content: ''; position: absolute; left: 0; top: 0.16em; bottom: 0.16em; width: 4px; border-radius: 2px; background: var(--sec-c, var(--acc)); }
    .content .section h4 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 2.4rem 0 0.9rem; }
    /* mesure resserrée (66 caractères) + interligne et respiration inter-paragraphes */
    .content .section p { font-size: 1.06rem; line-height: 1.8; color: var(--body); margin: 0 0 1.4rem; max-width: 66ch; text-wrap: pretty; }
    /* Chapeau (motif .lead de la v10) : le 1er paragraphe de section est plus grand,
       plus clair et plus court en mesure — il sert de sas avant le corps de texte. */
    .content .section > p:first-of-type { font-size: 1.17rem; line-height: 1.68; color: var(--dim); max-width: 62ch; margin-bottom: 1.9rem; }
    .content .section > p:first-of-type strong,
    .content .section > p:first-of-type b { color: var(--body); }
    .content .section ul, .content .section ol { margin: 0 0 1.5rem; padding-left: 0; list-style: none; display: grid; gap: 13px; }
    .content .section ul li, .content .section ol li { position: relative; padding-left: 28px; font-size: 1.04rem; line-height: 1.65; color: var(--body); max-width: 66ch; }
    .content .section ul li::before, .content .section ol li::before { content: ''; position: absolute; left: 5px; top: 0.6em; width: 8px; height: 8px; border-radius: 3px; background: var(--acc); }
    .content .section strong { color: var(--ink); font-weight: 700; }
    /* styles-common pose img{display:block} — les logos inline du texte doivent rester dans le flux.
       ⚠️ PAS .hero img : le logo du hero doit rester block (centrage margin:auto + crumb au-dessus). */
    .content .section img, .data-value img, .platform-card img { display: inline-block; }
    .hero-logo { display: block; }
    /* Logotype horizontal (TradeDay, FFN…) : object-fit cover le recadrerait au
       centre — on affiche la marque entière dans la pastille. */
    .hero-logo.is-wordmark { object-fit: contain; padding: 14px; background: var(--card-solid); }
    /* Prix d'entrée du hero en vert */
    .hero .kpi .k-v.k-price { color: var(--pos); }

    /* Pastille promo du hero — parti pris v10 : pavé PLEIN, texte tout en gras,
       aucun cadre, séparateurs « · ». Dégradé volontairement désaturé (variantes
       foncées) au lieu du violet→orange saturé de la v10.
       Valeurs alimentées par le CSV (data-csv-field) → suit les promos. */
    /* placée juste sous le H1. Le code est une PUCE contrastée (fond clair, texte
       sombre) : il se détache du pavé au lieu d'être un simple mot coloré. */
    /* ⚠️ flex (pas inline-flex) + width:fit-content : sinon la pastille reste sur la
       même ligne que .hero-meta (drapeau + Trustpilot), qui est aussi en inline-flex. */
    .hero-promo { display: flex; width: fit-content; align-items: center; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 auto 18px; padding: 7px 9px 7px 18px; border-radius: 999px; border: none;
      background: linear-gradient(100deg, var(--flex-d), var(--daily-d));
      color: #dff6fb; font-size: 0.86rem; font-weight: 700;
      box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--daily) 60%, transparent); }
    .hero-promo .hp-lbl { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
    .hero-promo .hp-code { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em;
      padding: 5px 13px; border-radius: 999px; background: #fff; color: #06282c;
      box-shadow: 0 2px 10px -3px rgba(0,0,0,0.45); cursor: pointer; transition: transform 0.15s var(--ease), background 0.2s; }
    .hero-promo .hp-code:hover { transform: translateY(-1px); background: #eafcff; }
    .hero-promo .hp-txt { font-weight: 700; }
    .hero-promo .hp-txt b { color: #fff; font-weight: 800; }
    .hero-promo .hp-mid { opacity: 0.45; }
    .hero-promo .hp-code.copied { background: var(--c-ok); color: #04241a; }
    /* Mobile : la pastille passait sur 2 lignes bancales et mangeait le hero.
       On compacte : le label « code promo » disparaît (le bouton blanc suffit),
       la date passe en suffixe court, tout tient sur une ligne. */
    @media (max-width: 560px) {
      .hero-promo { gap: 8px; padding: 6px 8px 6px 14px; font-size: 0.8rem; max-width: calc(100% - 8px); }
      .hero-promo .hp-lbl, .hero-promo .hp-mid { display: none; }
      .hero-promo .hp-code { font-size: 0.88rem; padding: 4px 11px; }
      /* pas de nowrap : un libellé de promo long (mff) déborderait de l'écran */
      .hero-promo .hp-txt { min-width: 0; }
    }
    .keyword-link { color: var(--acc-ink); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color 0.2s, color 0.2s; cursor: pointer; }
    .keyword-link:hover { border-bottom-color: var(--acc); color: var(--ink); }
    .highlight { color: var(--acc-ink); font-weight: 700; }

    /* ---------- data-grid (Présentation, funded…) — style KPI v1 + logos ---------- */
    /* Cartes « en bref » : une couleur par carte + halo, comme les jauges.
       Le gris uniforme rendait la bande monotone. */
    .data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 24px 0; }
    /* Mise en page dissociée : le TITRE reste épinglé en haut (aligné sur toute
       la rangée), la VALEUR se centre dans l'espace restant — même quand une
       carte voisine est plus haute (ex. 3 flux de données). */
    .data-card { --c: var(--daily); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 20px 16px 18px; border-radius: 16px; text-align: center;
      background: radial-gradient(120% 78% at 50% -20%, color-mix(in srgb, var(--c) 15%, transparent), transparent 62%), var(--card-solid);
      border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line-2)); box-shadow: var(--shadow);
      transition: transform 0.22s var(--ease), border-color 0.22s; }
    .data-card:nth-child(4n+2) { --c: var(--flex); }
    .data-card:nth-child(4n+3) { --c: var(--pro); }
    .data-card:nth-child(4n+4) { --c: var(--direct); }
    .data-card::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; border-radius: 0 0 3px 3px; background: var(--c); opacity: 0.85; }
    .data-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
    /* libellé : police du site, teinté de l'accent (la mono grise faisait terne) */
    .data-label { font-family: var(--sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 68%, var(--dim)); margin-bottom: 9px; }
    /* la valeur se centre dans l'espace restant via marges auto : PAS de flex
       interne, sinon le contenu inline (logos, virgules) s'empile verticalement */
    .data-value { margin-top: auto; margin-bottom: auto; font-size: 1.24rem; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; line-height: 1.32; }
    /* cartes commissions : sous-libellé + barre sous la valeur, pas de centrage */
    .data-card:has(.data-sublabel) .data-value { margin-top: 0; margin-bottom: 0; }
    .data-value img { border-radius: 6px; }
    .data-sublabel { margin-top: 7px; font-size: 0.76rem; font-weight: 700; color: var(--body); background: color-mix(in srgb, var(--c) 13%, transparent); padding: 3px 10px; border-radius: 999px; display: inline-block; }

    /* ---------- Tables (data-table du guide actuel) ---------- */
    .content .section table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.96rem; margin: 18px 0 26px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
    .content .section table thead th { text-align: left; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding: 14px 16px; background: color-mix(in srgb, var(--acc) 7%, transparent); border-bottom: 1px solid var(--line-2); }
    .content .section table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--body); font-variant-numeric: tabular-nums; }
    .content .section table tbody tr:last-child td { border-bottom: none; }
    .content .section table tbody tr:hover td { background: rgba(255,255,255,0.02); }
    .content .section table td:first-child { color: var(--ink); font-weight: 700; }
    .content .section colgroup { display: none; }
    /* Tableaux étroits (2-3 colonnes) : ils gardent TOUTE la largeur (la brider les
       rendait minuscules), mais la dernière colonne est alignée à droite — c'est
       la valeur collée à gauche dans une colonne large qui créait le vide. */
    .content .section table:not(:has(thead th:nth-child(4))) td:last-child,
    .content .section table:not(:has(thead th:nth-child(4))) th:last-child { text-align: right; }
    .content .section table:not(:has(thead th:nth-child(4))) td:first-child,
    .content .section table:not(:has(thead th:nth-child(4))) th:first-child { width: 34%; }
    /* dans les briques (demi-largeur) la 1re colonne doit rester compacte */
    .fbrick table:not(:has(thead th:nth-child(4))) td:first-child,
    .fbrick table:not(:has(thead th:nth-child(4))) th:first-child { width: auto; white-space: nowrap; }
    .content .section table .promo-code { font-family: var(--mono); font-weight: 700; color: var(--pos); cursor: pointer; }
    .content .section table .act-free { color: var(--pos); font-weight: 700; }

    /* ---------- Onglets (account-tabs du guide actuel) ---------- */
    .account-tabs { display: inline-flex; gap: 5px; padding: 6px; background: var(--card-solid); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow); margin: 8px 0 22px; flex-wrap: wrap; }
    /* le sélecteur ne doit pas coller au bloc visuel qui le précède */
    .price-bars + .account-tabs, .ddgrid + .account-tabs, .cohgrid + .account-tabs,
    .data-grid + .account-tabs, .igrid + .account-tabs { margin-top: 34px; }
    .account-tabs .tab-btn { appearance: none; border: none; background: transparent; cursor: pointer; padding: 10px 24px; border-radius: 999px; font-family: var(--sans); font-size: 0.94rem; font-weight: 700; color: var(--dim); transition: color 0.2s, background 0.25s var(--ease); }
    .account-tabs .tab-btn:hover { color: var(--acc-ink); }
    .account-tabs .tab-btn.active { color: #0a0d14; background: linear-gradient(162deg, var(--acc), var(--acc-deep)); box-shadow: 0 10px 22px -10px var(--glow); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; animation: fade 0.4s var(--ease); }

    /* ---------- Callouts du guide actuel ---------- */
    /* Callouts compacts (motif v10) : bandeau d'une ligne, pas une grosse boîte
       à moitié vide. Le libellé et la valeur cohabitent sur la même ligne, et le
       bloc peut contenir de la prose (.callout p) pour éviter la boîte creuse. */
    .callout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--c-warn) 6%, var(--card-solid)); border: none; border-left: 3px solid var(--c-warn); box-shadow: none; margin: 20px 0; }
    .callout-icon { width: 20px; height: 20px; border-radius: 0; background: none !important; display: grid; place-items: center; flex: 0 0 20px; align-self: center; }
    .callout-icon svg { width: 17px; height: 17px; }
    .callout-content { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
    .callout-title { font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 0; }
    .callout-value { font-size: 0.98rem !important; font-weight: 700; color: var(--ink); }
    .callout p { margin: 6px 0 0 !important; font-size: 0.97rem !important; line-height: 1.62 !important; color: var(--body); max-width: none !important; flex: 1 1 100%; }
    .callout-content > .callout-value { flex: 1 1 100%; }
    /* variantes sémantiques */
    .callout-ok  { background: color-mix(in srgb, var(--c-ok) 6%, var(--card-solid));  border-left-color: var(--c-ok); }
    .callout-bad { background: color-mix(in srgb, var(--c-bad) 6%, var(--card-solid)); border-left-color: var(--c-bad); }
    .callout-ok .callout-icon svg  { stroke: var(--c-ok); }
    .callout-bad .callout-icon svg { stroke: var(--c-bad); }
    /* Callout SANS prose (juste un libellé + une valeur, ex. « 5 max ») : bandeau
       pleine largeur = espace gâché. On le réduit à la taille du contenu et on met
       libellé et valeur sur la même ligne → une pastille compacte. */
    .callout:not(:has(p)) { width: fit-content; max-width: 100%; padding: 9px 16px 9px 13px; }
    /* ⚠️ wrap autorisé : en nowrap, une valeur longue débordait de la boîte
       (cas « News interdites en compte Daily financé »). */
    .callout:not(:has(p)) .callout-content { flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
    .callout:not(:has(p)) .callout-content > .callout-value { flex: 1 1 auto; min-width: 0; font-size: 1.02rem !important; overflow-wrap: anywhere; }
    .callout:not(:has(p)) .callout-title { white-space: nowrap; }
    .callout { min-width: 0; overflow: hidden; }
    .info-box { padding: 18px 22px; border-radius: var(--r); background: linear-gradient(100deg, color-mix(in srgb, var(--c-obj) 7%, transparent), transparent 60%), var(--card); border: 1px solid var(--line-2); border-left: 3px solid var(--c-obj); box-shadow: var(--shadow); margin: 20px 0; font-size: 1rem; line-height: 1.65; color: var(--body); }
    .info-box.warning { background: linear-gradient(100deg, color-mix(in srgb, var(--c-warn) 8%, transparent), transparent 60%), var(--card); border-left-color: var(--c-warn); }
    .info-box.magenta { background: linear-gradient(100deg, color-mix(in srgb, var(--pro) 9%, transparent), transparent 60%), var(--card); border-left-color: var(--pro); }
    
    /* Maillage interne : utile aux moteurs, secondaire pour le lecteur. Pas de
       carte ni de barre d'accent — un simple filet et du texte en retrait. */
    /* même respiration que l'inter-sections, sinon la FAQ colle aux liens */
    .xlink { margin: 26px 0 clamp(70px, 9vw, 118px); padding-top: 14px; border-top: 1px solid var(--line-2); }
    .xlink + .xlink { margin-top: 10px; padding-top: 0; border-top: 0; }
    .xlink:has(+ .xlink) { margin-bottom: 0; }
    .xlink-h { margin: 0 0 9px; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
    .xlink ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
    .xlink li { position: relative; padding-left: 14px; margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--dim); }
    .xlink li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
    .xlink a { color: var(--body); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--body) 22%, transparent); transition: color 0.18s, border-color 0.18s; }
    .xlink a:hover { color: var(--ink); border-bottom-color: currentColor; }

    /* ---------- Price bars (section comptes) ---------- */
    /* ⚠️ Les colonnes doivent être PARTAGÉES par les 4 lignes, sinon chaque ligne
       dimensionne sa colonne « prix » selon son propre texte et les barres
       s'arrêtent à des endroits différents. D'où display:contents sur les rows :
       c'est .price-bars qui porte la grille. */
    .price-bars { display: grid; grid-template-columns: 64px 1fr max-content; align-items: center; gap: 13px 14px; margin: 22px 0; padding: 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
    .price-bar-row { display: contents; }
    .price-bar-label { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 0.92rem; }
    .price-bar-track { position: relative; height: 16px; border-radius: 6px; background: color-mix(in srgb, var(--acc) 8%, transparent); border: 1px solid var(--line); overflow: hidden; }
    .price-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--acc-deep), var(--acc)); transition: left 0.8s var(--ease), width 0.8s var(--ease); }
    .price-bar-fill.type-flex { background: linear-gradient(90deg, #0f9d70, #1ec98f); }
    .price-bar-fill.type-pro { background: linear-gradient(90deg, #7c3aed, #9d6bff); }
    .price-bar-fill.type-direct { background: linear-gradient(90deg, var(--direct-d), var(--direct)); }
    .price-bar-fill.type-daily { background: linear-gradient(90deg, var(--daily-d), var(--daily)); }
    .price-bar-prices { font-family: var(--mono); font-weight: 700; font-size: 0.88rem; color: var(--acc-ink); white-space: nowrap; text-align: right; }
    /* ⚠️ guide-csv.js REINJECTE « Meilleur prix » au chargement du CSV (fichier partagé
       par les 13 guides, donc non modifié). On le neutralise ici : display:none le sort
       complètement du flux, la colonne des prix reste homogène. */
    .price-bar-prices .best-tag { display: none; }

    /* ---------- Infographie v15 (drawdown) ---------- */
    .ddv-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 14px; font-size: 0.82rem; color: var(--dim); }
    .ddv-legend span { display: inline-flex; align-items: center; gap: 7px; }
    .ddv-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
    .dot.ddc { background: #ff5069; } .dot.objc { background: #28d6ee; } .dot.dllc { background: #ffc53d; }
    /* 3 cartes = 3 colonnes : aucune ne doit rester seule sur une ligne.
       Internes compactés (paddings, hauteurs de barres, colonnes de libellés). */
    .ddgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 34px; }
    @media (max-width: 1080px) { .ddgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .ddcard { padding: 16px 17px 17px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
    .ddcard-h { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 11px; line-height: 1.25; }
    /* note unique sous la grille (remplace les 3 sous-titres par carte) */
    .ddgrid-note { font-size: 0.84rem !important; color: var(--dim) !important; line-height: 1.55 !important; margin: 12px 0 0 !important; max-width: 78ch; }
    .ddgrid-note b { color: var(--body); font-weight: 700; }
    .dd-viz { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
    .dd-row { background: color-mix(in srgb, var(--acc) 4%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
    .dd-row-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
    .dd-sz { font-weight: 800; font-size: 0.95rem; color: var(--ink); }
    .ratio-badge { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: var(--card-solid); border: 1px solid var(--line-2); color: var(--dim); }
    .dd-bars { display: flex; flex-direction: column; gap: 6px; }
    /* ⚠️ Colonnes FIXES (pas max-content) : un libellé « OBJECTIF » plus large que
       « DD » décalait le début de la piste, donc les barres n'étaient comparables
       ni entre elles ni d'une carte à l'autre. Largeurs identiques partout =
       pistes qui commencent et finissent exactement au même endroit. */
    .dd-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
    .dd-bar-lb { font-size: 0.66rem; font-family: var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dd-track { height: 13px; border-radius: 5px; background: color-mix(in srgb, var(--acc) 8%, transparent); border: 1px solid var(--line); overflow: hidden; }
    .dd-f { display: block; height: 100%; width: 0; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
    .dd-f.dd { background: linear-gradient(90deg, #ff5069, #ff8b9a); }
    .dd-f.obj { background: linear-gradient(90deg, #159bb0, #28d6ee); }
    .dd-f.dll { background: linear-gradient(90deg, #c99418, #ffc53d); }
    .dd-num { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; white-space: nowrap; text-align: right; color: var(--ink); }
    .dd-num.empty { color: var(--dim); }

    /* ---------- Cohérence (barres du guide actuel) ---------- */
    /* ---------- Instruments : cartes par famille + puces de tickers ---------- */
    .igrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 22px 0 30px; }
    .icard { --c: var(--acc); padding: 16px 17px 15px; border-radius: 16px;
      background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 58%), var(--card-solid);
      border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line-2)); transition: transform 0.2s var(--ease), border-color 0.2s; }
    .icard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 42%, transparent); }
    .icard-h { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.01em; }
    .icard-ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
    .icard-ic svg { width: 16px; height: 16px; }
    .ichips { display: flex; flex-wrap: wrap; gap: 7px; }
    /* puce = code du contrat en gras + libellé lisible */
    .ichip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 9px;
      background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 16%, transparent); }
    .ichip b { font-family: var(--mono); font-size: 0.88rem; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
    .ichip i { font-style: normal; font-size: 0.82rem; color: var(--body); }
    /* micros : même famille, mention explicite « Micro » */
    .ichip-micro { background: transparent; border-style: dashed; }
    .ichip-micro b { color: var(--c); font-size: 0.83rem; }
    .ichip-micro i { color: var(--dim); font-size: 0.78rem; }

    /* ---------- Compte financé : chaque onglet devient une carte ----------
       ⚠️ Fait 100% en CSS : les h3 y sont DANS les .tab-panel, tout découpage HTML
       casse les onglets (bug Flex vide). On habille le panneau, on ne le touche pas. */
    /* Disposition en 2 colonnes (motif v5) : les tableaux se placent CÔTE À CÔTE
       au lieu de s'empiler. Fini la lecture verticale et les tableaux étriqués. */
    .tab-panel[data-tab-panel^="funded-"].active {
      --c: var(--sec-c, var(--flex));
      /* ⚠️ 2 colonnes FIXES : avec auto-fit la grille créait 4 colonnes de 258px,
         les tableaux devenaient illisibles et les textes se cassaient en escalier. */
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch;
      padding: 24px 26px 22px; border-radius: 18px;
      background: linear-gradient(158deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 55%), var(--card-solid);
      border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line-2));
    }
    /* titre et KPI : toute la largeur. L'intro, elle, devient une colonne et se
       place À CÔTÉ du premier tableau (motif v5) au lieu de manger une rangée. */
    .tab-panel[data-tab-panel^="funded-"].active > h3,
    .tab-panel[data-tab-panel^="funded-"].active > h4,
    .tab-panel[data-tab-panel^="funded-"].active > .data-grid,
    .tab-panel[data-tab-panel^="funded-"].active > .callout,
    .tab-panel[data-tab-panel^="funded-"].active > p,
    .tab-panel[data-tab-panel^="funded-"].active > ul { grid-column: 1 / -1; }
    .tab-panel[data-tab-panel^="funded-"].active > .fintro { grid-column: auto; }
    /* intro pleine largeur : les conditions s'étalent latéralement au lieu de
       s'empiler dans une colonne étroite, puis les tableaux s'apparient dessous */
    .tab-panel[data-tab-panel^="funded-"].active > .fintro-wide { grid-column: 1 / -1; }
    .content .section .fintro-wide ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr)); gap: 10px 24px; }
    .content .section .fintro-wide ul li { padding-left: 22px; }
    .content .section .fintro-wide p { max-width: none; }
    /* un tableau à 4 colonnes ou plus ne tient pas en demi-largeur */
    .tab-panel[data-tab-panel^="funded-"].active > .fbrick-wide { grid-column: 1 / -1; }
    /* intro : mêmes marges que les briques, texte compact */
    .fintro { display: flex; flex-direction: column; justify-content: flex-start; }
    .content .section .fintro p { font-size: 0.95rem !important; line-height: 1.62 !important; margin: 0 0 12px !important; max-width: none; }
    .content .section .fintro ul { margin: 0 !important; gap: 9px; }
    .content .section .fintro ul li { font-size: 0.93rem; line-height: 1.55; padding-left: 24px; max-width: none; }
    .content .section .fintro ul li::before { width: 6px; height: 6px; top: 0.56em; }
    /* Brique = titre court + explication + tableau (motif v10). Pas de fond ni de
       cadre : ce sont les tableaux qui portent le contenant, la brique n'est qu'un
       regroupement — sinon on empile des boîtes dans des boîtes. */
    .fbrick { display: flex; flex-direction: column; height: 100%; padding: 0; background: none; border: none; }
    .fbrick-h { font-size: 0.95rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 7px; }
    .content .section .fbrick p { font-size: 0.88rem !important; line-height: 1.55 !important; color: var(--dim); margin: 0 0 11px !important; max-width: none; }
    .content .section .fbrick table { margin: auto 0 0 !important; background: var(--card-solid) !important; }
    /* note de bas de tableau : même respiration que le gap de la grille (20px),
       sinon elle vient se coller au bord du tableau. */
    .content .section .fbrick table + p { margin: 20px 0 0 !important; }
    /* brique isolée en fin de panneau : pleine largeur */
    .tab-panel[data-tab-panel^="funded-"].active > .fbrick:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
    /* …sauf si elle est assez courte pour tenir à côté de la précédente */
    @media (min-width: 901px) {
      .tab-panel[data-tab-panel^="funded-"].active > .fbrick.fbrick-half:nth-of-type(odd):last-of-type,
      .tab-panel[data-tab-panel^="funded-"].active > .fbrick.fbrick-half { grid-column: auto; }
    }
    /* table posée en enfant direct du panneau (pas dans une fbrick) : elle prend
       toute la largeur et scrolle au lieu de forcer la piste (alpha). */
    .tab-panel[data-tab-panel^="funded-"].active > table { grid-column: 1 / -1; display: block; overflow-x: auto; }
    /* desktop : une table trop large pour sa demi-colonne scrolle dans sa brique
       au lieu de déborder de la page (alpha, bulenox). Sur mobile, les tables
       ≥4 colonnes deviennent des cartes — on ne touche donc qu'au desktop. */
    @media (min-width: 901px) {
      /* La table reste une VRAIE table (colonnes réparties sur 100%) ; c'est la
         brique qui scrolle si le contenu est trop large pour sa demi-colonne.
         display:block sur la table serrerait les colonnes à gauche. */
      .tab-panel[data-tab-panel^="funded-"].active .fbrick { min-width: 0; overflow-x: auto; }
      .tab-panel[data-tab-panel^="funded-"].active .fbrick table { display: table; width: 100%; }
    }
    @media (max-width: 900px) { .tab-panel[data-tab-panel^="funded-"].active > .fbrick { grid-column: 1 / -1; } }
    @media (max-width: 900px) {
      /* minmax(0,1fr) et pas 1fr : sinon la piste s'étire au min-content d'un
         tableau large et le panneau déborde de l'écran (alpha, bulenox). */
      .tab-panel[data-tab-panel^="funded-"].active { grid-template-columns: minmax(0, 1fr); }
      .tab-panel[data-tab-panel^="funded-"].active > table { grid-column: 1 / -1; }
    }
    /* le titre du panneau devient l'en-tête de la carte */
    .content .section .tab-panel[data-tab-panel^="funded-"] > h3 {
      margin: 0 0 16px; padding: 0 0 14px 0; border-bottom: 1px solid var(--line);
      font-size: 1.3rem;
    }
    .content .section .tab-panel[data-tab-panel^="funded-"] > h3::before { display: none; }
    /* les KPI du panneau : plus compacts, sur toute la largeur disponible */
    .tab-panel[data-tab-panel^="funded-"] .data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
    .tab-panel[data-tab-panel^="funded-"] .data-card { padding: 15px 10px 13px; border-radius: 13px; }
    .tab-panel[data-tab-panel^="funded-"] .data-label { font-size: 0.62rem; letter-spacing: 0.1em; margin-bottom: 6px; }
    .tab-panel[data-tab-panel^="funded-"] .data-value { font-size: 1.08rem; }
    /* tableaux imbriqués dans la carte : pleine largeur, fond légèrement creusé */
    /* ⚠️ pas de liseré coloré à gauche des tableaux : effet « sourcil » générique */
    .content .section .tab-panel[data-tab-panel^="funded-"] table {
      width: 100%; max-width: none; margin: 0; align-self: stretch;
      background: var(--card-solid);
      box-shadow: none; border: 1px solid var(--line-2);
    }
    /* en 2 colonnes les cellules doivent rester compactes */
    .content .section .tab-panel[data-tab-panel^="funded-"] table th,
    .content .section .tab-panel[data-tab-panel^="funded-"] table td { padding: 11px 13px; }
    .content .section .tab-panel[data-tab-panel^="funded-"] table th { font-size: 0.63rem; }
    .content .section .tab-panel[data-tab-panel^="funded-"] table td { font-size: 0.92rem; }
    .content .section .tab-panel[data-tab-panel^="funded-"] p { max-width: none; }
    .content .section .tab-panel[data-tab-panel^="funded-"] ul { max-width: none; }
    .content .section .tab-panel[data-tab-panel^="funded-"] ul li { max-width: none; }
    /* couleur propre à chaque formule */
    .tab-panel[data-tab-panel="funded-pro"].active    { --c: var(--pro); }
    .tab-panel[data-tab-panel="funded-flex"].active   { --c: var(--flex); }
    .tab-panel[data-tab-panel="funded-daily"].active  { --c: var(--daily); }
    .tab-panel[data-tab-panel="funded-direct"].active { --c: var(--direct); }
    @media (max-width: 820px) {
      .tab-panel[data-tab-panel^="funded-"].active { padding: 18px 16px 16px; }
      .tab-panel[data-tab-panel^="funded-"] .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* ---------- Briques de lecture (motif v10) ----------
       Un h3 + sa prose dans une carte autonome, avec pastille de verdict.
       Casse le déroulé « titre / paragraphe / titre / paragraphe ». */
    .brick { --c: var(--sec-c, var(--acc)); position: relative; margin: 26px 0; padding: 20px 22px 6px; border-radius: 16px;
      background: linear-gradient(150deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 58%), var(--card-solid);
      border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line-2)); }
    /* le h3 d'une brique perd sa barre et son gros écart : il devient l'en-tête */
    .content .section .brick h3 { margin: 0 0 0.85rem; padding-left: 0; font-size: 1.22rem; padding-right: 130px; }
    .content .section .brick h3::before { display: none; }
    .content .section .brick p:last-child, .content .section .brick ul:last-child { margin-bottom: 1.1rem; }
    .brick-pill { position: absolute; top: 18px; right: 18px; z-index: 1; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 17%, transparent); color: var(--c); white-space: nowrap; }
    .brick-ok    { --c: var(--c-ok); }
    .brick-bad   { --c: var(--c-bad); }
    .brick-warn  { --c: var(--c-warn); }
    
    
    @media (max-width: 620px) {
      .content .section .brick h3 { padding-right: 0; }
      .brick-pill { position: static; display: inline-block; margin-bottom: 10px; }
    }

    /* ---------- Cohérence : jauges circulaires (v21) ----------
       @property rend --p animable (sinon la transition sur une variable est ignorée). */
    @property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
    .cohgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 34px; }
    /* carte teintée de la couleur de la formule (halo radial) au lieu du gris plat */
    .cohcard { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px 18px; border-radius: 16px;
      background: radial-gradient(120% 80% at 50% -18%, color-mix(in srgb, var(--c) 16%, transparent), transparent 62%), var(--card-solid);
      border: 1px solid color-mix(in srgb, var(--c) 24%, var(--line-2)); box-shadow: var(--shadow); transition: transform 0.22s var(--ease), border-color 0.22s; }
    .cohcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
    .cohcard.g-pro { --c: var(--pro); } .cohcard.g-flex { --c: var(--flex); }
    .cohcard.g-daily { --c: var(--daily); } .cohcard.g-direct { --c: var(--direct); }
    .cohring { --p: 0; position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 96px;
      background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--acc) 9%, transparent) 0);
      filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 14%, transparent));
      transition: --p 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
    /* masque central : anneau plutôt que disque */
    .cohring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--card-solid); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
    /* chiffre en gras dans la police du site (la mono faisait trop maigre) */
    .cohring span { position: relative; font-family: var(--sans); font-weight: 900; font-size: 1.62rem; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
    .cohring span i { font-style: normal; font-weight: 800; font-size: 0.52em; color: var(--c); margin-left: 2px; vertical-align: 0.32em; }
    .cohname { font-weight: 800; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; }
    /* sous-titre : plus de mono filiforme, une puce lisible */
    .cohsub { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; color: var(--body); background: color-mix(in srgb, var(--c) 13%, transparent); padding: 4px 11px; border-radius: 999px; }
    
    
    @media (max-width: 720px) { .cohgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* colonnes partagées (même piège que les price-bars : sinon échelles décalées) */
    
    
    .coherence-bar-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; margin: 10px 0; }
    
    
    .coherence-fill { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1s var(--ease); }
    .coherence-fill.c-100 { background: linear-gradient(90deg, #ff5069, #ff8b9a); }
    .coherence-fill.c-50 { background: linear-gradient(90deg, #c99418, #ffc53d); }
    .coherence-fill.c-20 { background: linear-gradient(90deg, #0f9d70, #1ec98f); }
    .coherence-value { font-family: var(--mono); font-weight: 700; color: var(--ink); }
    

    /* ---------- Styles de trading (cellules statut) ---------- */
    /* Récapitulatif styles de trading.
       ⚠️ Les classes allowed/forbidden/partial sont portées par l'ICÔNE et le BADGE
       eux-mêmes (pas par .style-cell) : cibler directement, sinon 0 couleur. */
    .styles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; margin: 20px 0; align-items: stretch; }
    .style-cell { display: flex; align-items: center; gap: 13px; height: 100%; padding: 15px 16px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
    .style-cell-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 32px; }
    .style-cell-icon svg { width: 17px; height: 17px; }
    .style-cell-icon.allowed,   .style-cell-status.allowed   { background: color-mix(in srgb, var(--c-ok) 15%, transparent);   color: var(--c-ok); }
    .style-cell-icon.forbidden, .style-cell-status.forbidden { background: color-mix(in srgb, var(--c-bad) 15%, transparent);  color: var(--c-bad); }
    .style-cell-icon.partial,   .style-cell-status.partial   { background: color-mix(in srgb, var(--c-warn) 15%, transparent); color: var(--c-warn); }
    /* le texte occupe la place restante et pousse le badge à droite */
    .style-cell-text { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--ink); font-size: 0.94rem; line-height: 1.3; text-wrap: balance; }
    /* badge jamais compressé, jamais coupé */
    .style-cell-status { flex: 0 0 auto; white-space: nowrap; align-self: center; font-family: var(--mono); font-size: 0.63rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }

    /* ---------- Plateformes (cartes + logos) ---------- */
    /* Chaque grille plateforme se dimensionne selon SON nombre de cartes (via :has),
       les deux blocs restent indépendants :
         · 2 cartes (flux)      → largeur plafonnée, calées à gauche
         · 3 cartes (fournies)  → 3 colonnes égales, tout sur une seule ligne */
    .platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); justify-content: start; gap: 14px; margin: 20px 0; }
    .platform-grid:has(.platform-card:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platform-grid:has(.platform-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .platform-card { padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); transition: transform 0.22s var(--ease); }
    .platform-card:hover { transform: translateY(-4px); }
    /* ⚠️ nowrap obligatoire : avec flex-wrap le badge de la carte au nom le plus long
       (MotiveWave) tombait sur une 2e ligne et cassait l'alignement des 3 cartes. */
    .platform-card-header { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: nowrap; min-width: 0; }
    .platform-card-header img { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; }
    .platform-card-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ink); font-size: 0.98rem; }
    /* badge compact : jamais sur 2 lignes, texte centré */
    .platform-card-badge { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex: 0 0 auto; font-family: var(--mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc-ink); }
    .platform-card-badge.free { background: color-mix(in srgb, var(--c-ok) 15%, transparent); color: var(--c-ok); }
    .platform-card-badge.feed { background: color-mix(in srgb, var(--c-obj) 15%, transparent); color: var(--c-obj); }
    .platform-card p { font-size: 0.9rem !important; color: var(--dim) !important; margin: 6px 0 0 !important; }

    /* ---------- Pays restreints : grille de pastilles + recherche ----------
       En paragraphe, les 76 entrées formaient un pavé où le drapeau collait au
       pays suivant. Une pastille par pays = une ligne de lecture par pays. */
    .rc-block { margin: 18px 0 4px; }
    .rc-search { position: relative; display: flex; align-items: center; gap: 9px; max-width: 420px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); transition: border-color 0.2s; }
    .rc-search:focus-within { border-color: color-mix(in srgb, var(--sec-c, var(--daily)) 55%, transparent); }
    .rc-search > svg { flex: 0 0 auto; color: var(--dim); }
    /* 16px minimum : en dessous, iOS Safari zoome la page au focus du champ */
    .rc-search input { flex: 1 1 auto; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: none; color: var(--ink); font-family: var(--sans); font-size: 1rem; }
    .rc-search input::placeholder { color: var(--dim); }
    .rc-search input::-webkit-search-cancel-button { filter: invert(0.6); }
    .rc-count { flex: 0 0 auto; font-family: var(--mono); font-size: 0.74rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
    /* 76 pastilles encadrées saturaient l'écran : plus aucun cadre ici, juste du
       texte en colonnes, découpé par région pour donner des points de repère. */
    /* Un continent = une colonne, les colonnes côte à côte : la section tient en
       un écran au lieu de dérouler 76 lignes. L'Afrique (30 pays) occupe deux
       pistes et se redivise en 2 colonnes internes, sinon elle impose sa hauteur. */
    .rc-list { margin-top: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 20px 18px; }
    .rc-group.rc-wide { grid-column: span 2; }
    .rc-group.is-off { display: none; }
    .content .section .rc-group-h { display: flex; align-items: baseline; gap: 7px; margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sec-c, var(--daily)); }
    .content .section .rc-group-h span { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0; color: var(--dim); }
    .content .section .rc-group ul { display: block !important; margin: 0 !important; padding: 0; list-style: none; }
    .content .section .rc-group.rc-wide ul { columns: 2 135px; column-gap: 18px; }
    .content .section .rc-group li.rc-item { display: flex; align-items: baseline; gap: 8px; break-inside: avoid; margin: 0; padding: 3px 0; border: 0; background: none; color: var(--dim); font-size: 0.92rem; line-height: 1.4; }
    .content .section .rc-group li.rc-item::before { display: none; }
    .rc-item:hover { color: var(--ink); }
    .rc-item .fi { flex: 0 0 auto; border-radius: 2px; opacity: 0.7; transform: translateY(1px); }
    @media (max-width: 900px) {
      .rc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rc-group.rc-wide { grid-column: span 2; }
    }
    @media (max-width: 520px) {
      .rc-list { grid-template-columns: 1fr; }
      .rc-group.rc-wide { grid-column: span 1; }
    }
    .rc-item:hover .fi, .rc-item.is-hit .fi { opacity: 1; }
    .rc-item.is-off { display: none !important; }
    .rc-item.is-hit { color: var(--ink); font-weight: 700; animation: rcBlink 0.5s ease-in-out 3; }
    @keyframes rcBlink { 50% { color: var(--c-bad); } }
    @media (prefers-reduced-motion: reduce) { .rc-item.is-hit { animation: none; } }
    .content .section p.rc-none { margin: 14px 0 0 !important; padding: 12px 14px; border-radius: 10px; font-size: 0.9rem !important; color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-ok) 30%, transparent); }

    /* ---------- Support : un canal = une carte cliquable ----------
       La liste à puces noyait deux liens utiles dans du texte : ici chaque canal
       devient une cible entière, avec sa couleur de marque. */
    .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin: 20px 0; }
    .support-card { --s: var(--c-ok); display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); text-decoration: none; transition: transform 0.22s var(--ease), border-color 0.22s var(--ease); }
    .support-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--s) 45%, transparent); }
    .support-ico { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--s); background: color-mix(in srgb, var(--s) 14%, transparent); }
    .support-body { min-width: 0; flex: 1 1 auto; }
    .support-name { display: block; font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.2; }
    .support-sub { display: block; font-size: 0.85rem; color: var(--dim); margin-top: 3px; }
    .support-go { flex: 0 0 auto; color: var(--dim); transition: transform 0.22s var(--ease), color 0.22s var(--ease); }
    .support-card:hover .support-go { color: var(--s); transform: translateX(3px); }

    /* ---------- Commissions (barres) ---------- */
    .comm-bar-wrap { position: relative; height: 16px; border-radius: 6px; background: color-mix(in srgb, var(--acc) 8%, transparent); border: 1px solid var(--line); overflow: hidden; margin: 4px 0; }
    .comm-bar-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--acc-deep), var(--acc)); transition: width 0.9s var(--ease); }

    /* ---------- Funded : frise de parcours ----------
       ⚠️ .payout-flow n'était pas stylé et les SVG des flèches n'ont ni width ni
       height en attribut : sans contrainte CSS ils prennent toute la largeur. */
    .payout-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; margin: 24px 0; }
    .flow-step { flex: 1 1 160px; max-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); text-align: center; }
    .flow-step-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 40px; background: color-mix(in srgb, var(--daily) 12%, transparent); border: 1px solid var(--line-2); color: var(--daily); }
    .flow-step-icon svg { width: 19px; height: 19px; }
    .flow-step-label { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
    .flow-step-sub { font-size: 0.8rem; color: var(--dim); line-height: 1.35; }
    .flow-arrow { flex: 0 0 auto; display: grid; place-items: center; color: var(--dim); }
    .flow-arrow svg { width: 18px; height: 18px; display: block; }
    /* Mobile : les 4 cartes empilées + flèches faisaient un écran entier de scroll.
       Timeline compacte : icône à gauche, libellé + détail sur UNE ligne, un fin
       trait vertical relie les étapes. ~4x moins haut. */
    @media (max-width: 640px) {
      .payout-flow { flex-direction: column; align-items: stretch; gap: 0; padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); }
      .flow-arrow { display: none; }
      .flow-step { flex: none; max-width: none; flex-direction: row; align-items: center; text-align: left; gap: 13px; padding: 9px 0; background: none; border: 0; box-shadow: none; position: relative; }
      .flow-step-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; }
      .flow-step-icon svg { width: 16px; height: 16px; }
      .flow-step-label { font-size: 0.94rem; }
      .flow-step-sub { font-size: 0.82rem; }
      .flow-step-sub::before { content: '· '; }
      /* trait de liaison entre les icônes */
      .flow-step:not(:last-child)::after { content: ''; position: absolute; left: 16.5px; top: calc(50% + 22px); height: 14px; width: 1px; background: var(--line-2); }
    }

    /* ---------- Verdict : pour / contre ----------
       .pros-cons n'avait AUCUN style (colonnes brutes). Deux cartes opposées,
       vert vs rouge, puces iconographiques, en-tête compté. */
    /* ⚠️ Tout est scopé sous .content .section : sinon les règles génériques
       (.content .section ul li::before, .content .section h4) sont PLUS spécifiques
       et écrasent les puces colorées et la couleur des titres. */
    .content .section .pros-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 22px 0 8px; align-items: stretch; }
    .content .section .pros, .content .section .cons { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 20px 22px 22px; }
    .content .section .pros { background: linear-gradient(160deg, color-mix(in srgb, var(--c-ok) 9%, transparent), transparent 62%), var(--card); border-left: 3px solid var(--c-ok); }
    .content .section .cons { background: linear-gradient(160deg, color-mix(in srgb, var(--c-bad) 9%, transparent), transparent 62%), var(--card); border-left: 3px solid var(--c-bad); }
    .content .section .pros h4, .content .section .cons h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
    .content .section .pros h4 { color: var(--c-ok); }
    .content .section .cons h4 { color: var(--c-bad); }
    /* pastille ronde en tête de carte */
    .content .section .pros h4::before, .content .section .cons h4::before { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; font-size: 0.82rem; font-weight: 900; line-height: 1; }
    .content .section .pros h4::before { content: '✓'; background: color-mix(in srgb, var(--c-ok) 17%, transparent); color: var(--c-ok); }
    .content .section .cons h4::before { content: '✕'; background: color-mix(in srgb, var(--c-bad) 17%, transparent); color: var(--c-bad); }
    /* listes : puce iconographique colorée à la place du carré générique */
    .content .section .pros ul, .content .section .cons ul { display: grid; gap: 11px; margin: 0; align-content: start; }
    .content .section .pros ul li, .content .section .cons ul li { position: relative; padding-left: 27px; font-size: 0.98rem; line-height: 1.55; color: var(--body); }
    .content .section .pros ul li::before, .content .section .cons ul li::before {
      position: absolute; left: 0; top: 0.1em;
      width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
      font-size: 0.66rem; font-weight: 900; line-height: 1;
    }
    .content .section .pros ul li::before { content: '✓'; color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 14%, transparent); }
    .content .section .cons ul li::before { content: '✕'; color: var(--c-bad); background: color-mix(in srgb, var(--c-bad) 14%, transparent); }

    /* ---------- Verdict : notes en lignes pleine largeur ----------
       Les 3 cartes côte à côte laissaient ~180px de texte : chaque phrase se
       cassait en colonnes de 3 mots. En lignes, la description tient sur 1-2
       lignes et les notes se comparent verticalement. */
    /* grid-auto-rows: 1fr -> les 4 lignes prennent la hauteur de la plus haute
       (celle dont la description fait 2 lignes), sinon les boîtes sautillent. */
    .vscore { display: grid; grid-auto-rows: 1fr; gap: 10px; margin: 22px 0; }
    .vscore-row { --s: var(--c-ok); display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 20px; padding: 15px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); }
    .vscore-row.is-best { border-color: color-mix(in srgb, var(--s) 45%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--s) 10%, transparent), transparent 45%), var(--card); }
    .vscore-num { font-family: var(--mono); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--s); text-align: center; }
    .vscore-num span { font-size: 0.85rem; font-weight: 700; color: var(--dim); }
    .vscore-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 5px; }
    .vscore-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
    .vscore-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--s); background: color-mix(in srgb, var(--s) 15%, transparent); }
    .content .section .vscore p { margin: 0 !important; max-width: none; font-size: 0.92rem !important; line-height: 1.55 !important; color: var(--body); }
    .vscore-bar { height: 4px; margin-top: 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
    .vscore-bar i { display: block; height: 100%; border-radius: inherit; background: var(--s); }
    /* Mobile : 4 lignes compactes (note + nom + jauge), la description se déplie
       au tap — les 4 notes tiennent dans un demi-écran au lieu de 2 écrans. */
    @media (max-width: 560px) {
      .vscore { grid-auto-rows: auto; gap: 8px; }
      .vscore-row { grid-template-columns: 54px minmax(0, 1fr) 18px; gap: 6px 13px; padding: 12px 14px; cursor: pointer; }
      .vscore-num { font-size: 1.5rem; }
      .vscore-head { margin-bottom: 0; }
      .vscore-row .vscore-bar { margin-top: 7px; }
      .content .section .vscore p { display: none; }
      .content .section .vscore .vscore-row.open p { display: block; margin-top: 7px !important; }
      /* chevron indicateur */
      .vscore-row::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); justify-self: end; align-self: center; grid-column: 3; grid-row: 1; transition: transform 0.25s var(--ease); }
      .vscore-row.open::after { transform: rotate(-135deg); }
    }

    /* ---------- FAQ (details du guide actuel) ---------- */
    .faq-item { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow); overflow: hidden; transition: border-color 0.2s; margin: 0 0 12px; }
    .faq-item[open] { border-color: var(--acc-deep); }
    .faq-summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative; }
    .faq-summary::-webkit-details-marker { display: none; }
    .faq-summary h3 { font-size: 1.05rem !important; font-weight: 700; color: var(--ink); margin: 0 !important; }
    .faq-summary::after { content: ''; position: absolute; right: 22px; top: 24px; width: 11px; height: 11px; border-right: 2.4px solid var(--dim); border-bottom: 2.4px solid var(--dim); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
    .faq-item[open] .faq-summary::after { transform: rotate(-135deg); top: 28px; }
    .faq-content { padding: 0 20px 18px; color: var(--body); line-height: 1.7; font-size: 1rem; }

    /* ---------- TOC : sous-menus (nouveau, calqué sur la sidebar actuelle) ---------- */
    .toc .t-top { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; font-size: 0.92rem; font-weight: 600; color: var(--dim); text-decoration: none; transition: color 0.2s, background 0.2s; }
    .toc .t-top .n { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); opacity: 0.7; width: 18px; flex-shrink: 0; }
    .toc .t-top:hover { color: var(--acc-ink); background: color-mix(in srgb, var(--acc) 8%, transparent); }
    .toc .t-top.active { color: var(--ink); background: color-mix(in srgb, var(--acc) 15%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); }
    .toc .t-top.active .n { color: var(--daily); opacity: 1; }
    /* progression du sommaire en dégradé coloré */
    .toc-prog i { background: linear-gradient(90deg, var(--daily), var(--flex)); }
    /* FAQ ouverte : accent violet */
    .faq-item[open] { border-color: color-mix(in srgb, var(--pro) 45%, transparent); }
    /* Hero : la note Trustpilot en ambre */
    .hero-tp b { color: var(--c-warn); }
    .toc .t-sub { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
    .toc .t-grp.open .t-sub { max-height: 320px; padding: 4px 0 10px; }
    .toc .t-sub a { display: block; padding: 8px 12px 8px 41px; font-size: 0.85rem; font-weight: 500; color: var(--dim); text-decoration: none; transition: color 0.2s; }
    .toc .t-sub a:hover { color: var(--acc-ink); }
    .toc .t-sub a.active { color: var(--ink); font-weight: 700; }

    /* ---------- Reveal (classes .reveal du guide actuel) ---------- */
    html.gx-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
    html.gx-on .reveal.visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { html.gx-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

    @media (max-width: 720px) {
      /* Mobile : une carte-ligne par formule. Nom à gauche, fourchette de prix à
         droite sur la MÊME ligne (c'est elle qu'on lit), la barre passe dessous
         en pleine largeur comme simple visualisation. */
      /* align-items:stretch : la règle desktop met center, ce qui rétrécissait
         chaque ligne à son contenu et centrait tout. */
      .price-bars { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 16px; }
      .price-bar-row { display: grid; grid-template-columns: 1fr max-content; gap: 7px 10px; align-items: baseline; }
      .price-bar-label { font-size: 0.95rem; }
      /* grid-row:1 : dans l'ordre DOM la piste passe avant le prix, sans ça le
         prix descendait sous la barre au lieu de partager la ligne du nom */
      .price-bar-prices { grid-row: 1; grid-column: 2; text-align: right; margin-top: 0; font-size: 0.92rem; color: var(--ink); }
      .price-bar-track { grid-row: 2; grid-column: 1 / -1; height: 10px; }
      .ddgrid { grid-template-columns: 1fr; }
      .content .section table { display: block; overflow-x: auto; }
      /* Tableaux étroits (2-3 colonnes) : ils tiennent dans l'écran, le display:block
         ci-dessus les rétrécissait à leur contenu (marge morte à droite). Retour au
         mode table pleine largeur. Les navigateurs sans :has() gardent le scroll. */
      /* overflow:hidden conservé : c'est lui qui rogne le thead aux coins arrondis */
      .content .section table:not(:has(thead th:nth-child(4))) { display: table; width: 100%; overflow: hidden; table-layout: fixed; }
      /* table-layout fixed + césure : un libellé long (« 50% du profit, max
         $1,250 ») ne peut plus pousser la table hors de l'écran. */
      .content .section table:not(:has(thead th:nth-child(4))) td,
      .content .section table:not(:has(thead th:nth-child(4))) th { overflow-wrap: anywhere; }
      /* Tableaux larges (4 colonnes et plus) : le scroll latéral est remplacé par
         des cartes empilées — une carte par ligne, « libellé : valeur » par cellule.
         Le libellé vient de data-th, injecté par guide-lucid.js depuis le thead. */
      .content .section table.data-table:has(thead th:nth-child(4)) { display: block; overflow: visible; background: none !important; border: none; box-shadow: none; }
      .content .section table.data-table:has(thead th:nth-child(4)) colgroup,
      .content .section table.data-table:has(thead th:nth-child(4)) thead { display: none; }
      .content .section table.data-table:has(thead th:nth-child(4)) tbody { display: grid; gap: 12px; }
      .content .section table.data-table:has(thead th:nth-child(4)) tbody tr { display: block; padding: 6px 16px 10px; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--line-2); }
      .content .section table.data-table:has(thead th:nth-child(4)) tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); text-align: right; }
      .content .section table.data-table:has(thead th:nth-child(4)) tbody td:last-child { border-bottom: 0; }
      .content .section table.data-table:has(thead th:nth-child(4)) tbody td::before { content: attr(data-th); flex: 0 0 auto; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--dim); text-align: left; }
      /* 1re cellule (taille du compte) = en-tête de la carte */
      .content .section table.data-table:has(thead th:nth-child(4)) tbody td:first-child { justify-content: flex-start; font-size: 1.02rem; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line-2); padding: 10px 0 9px; }
      .content .section table.data-table:has(thead th:nth-child(4)) tbody td:first-child::before { display: none; }
      /* les grilles plateformes repassent en colonne (le :has() 3/4 cols ne tient pas) */
      .platform-grid, .platform-grid:has(.platform-card:nth-child(3)), .platform-grid:has(.platform-card:nth-child(4)) { grid-template-columns: 1fr; }
      /* cartes KPI : 2x2 au lieu d'une pile de 4 (l'auto-fit retombait en 1 colonne) */
      .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .data-grid .data-card { padding: 14px 10px; }
      .data-grid .data-value { font-size: 1.02rem; }
      /* sous-onglets Daily : la pastille flottante se cassait en 2 lignes inégales.
         En grille 2x2 pleine largeur, chaque option devient un vrai bouton. */
      .account-tabs[data-tabs="dcfg"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; padding: 6px; border-radius: 16px; }
      .account-tabs[data-tabs="dcfg"] .tab-btn { padding: 11px 6px; text-align: center; border-radius: 11px; white-space: nowrap; }
    }

    /* ---------- Sommaire mobile : reprise au langage v21 ----------
       (surcharges du socle, déclaré plus haut dans ce fichier) */
    @media (max-width: 960px) {
      /* bouton flottant : centré en bas, style carte sombre du guide */
      .toc-btn { left: 50%; bottom: 18px; transform: translateX(-50%); padding: 12px 22px; background: color-mix(in srgb, var(--card-solid) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-2); color: var(--ink); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.65); }
      .toc-btn:active { transform: translateX(-50%) scale(0.97); }
      /* panneau : menu glissant collé au bord gauche, pleine hauteur (même motif
         que les filtres du comparateur). z-index > header (9999) pour passer
         par-dessus, pas de coins flottants. */
      .toc { top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: 100dvh; max-height: none; z-index: 10001; border-radius: 0; border: none; border-right: 1px solid var(--line-2); background: var(--bg); padding: 24px 14px 24px; transform: translateX(-100%); overscroll-behavior: contain; display: flex; flex-direction: column; }
      /* occuper la hauteur : entrées plus généreuses, la barre de progression
         s'ancre en bas — fini le gros bloc noir vide sous la liste */
      .toc .t-top { padding: 12px 14px; font-size: 1rem; }
      .toc .t-sub a { padding: 10px 12px 10px 43px; font-size: 0.92rem; }
      .toc .toc-title { margin-bottom: 14px; }
      .toc .toc-prog { margin-top: auto; }
      .toc-ov { z-index: 10000; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
      /* fermeture : poignée demi-cercle collée à la tranche du panneau, mi-hauteur */
      /* même bouton que les filtres du comparateur (index) : demi-capsule accent.
         Toujours rendu, garé hors écran à gauche : il GLISSE avec le panneau
         (transition sur left) au lieu d'apparaître d'un coup. */
      .toc-close { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 50%; left: -60px; transform: translateY(-50%); z-index: 10002; width: 24px; height: 48px; padding: 0; border-radius: 0 24px 24px 0; background: var(--accent, #a0afc8); border: 1px solid rgba(255, 255, 255, 0.08); border-left: none; color: rgba(255, 255, 255, 0.7); box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3); cursor: pointer; pointer-events: none; transition: left 0.3s var(--ease); }
      /* re-déclare tout : la règle body.toc-open du socle (plus
         spécifique) re-transformait le bouton en carré 38px à l'ouverture */
      body.toc-open .toc-close { top: 50%; left: min(300px, 86vw); transform: translateY(-50%); z-index: 10002; width: 24px; height: 48px; border-radius: 0 24px 24px 0; background: var(--accent, #a0afc8); border: 1px solid rgba(255, 255, 255, 0.08); border-left: none; color: rgba(255, 255, 255, 0.7); pointer-events: auto; }
      .toc-close:active { background: var(--surface-hover, #1e2028); }
      .toc-close svg { width: 16px; height: 16px; margin-left: -3px; }
      /* page figée pendant que le drawer est ouvert (évite tout scroll fantôme) */
      body.toc-open { overflow: hidden; }
    }

    /* ---------- Très petits écrans (≤ 360px : iPhone SE, Galaxy S8) ----------
       Trois sources de débordement résiduel : le padding des cartes plateformes,
       les prix des barres en nowrap, et les liens-mots trop longs. */
    @media (max-width: 360px) {
      /* barres de prix : nom et prix empilés, sinon un libellé long (« coût
         total ») pousse la ligne hors de l ecran */
      .price-bar-row { grid-template-columns: minmax(0, 1fr) !important; }
      .price-bar-prices { grid-row: auto !important; grid-column: 1 !important; text-align: left !important; }
      .price-bar-track { grid-row: auto !important; }
      .platform-card { padding: 14px 12px; }
      .platform-card-name { font-size: 0.9rem; }
      .price-bar-prices, .price-bar-prices * { white-space: normal; }
      .price-bar-prices { font-size: 0.85rem; }
      .keyword-link { overflow-wrap: anywhere; }
    }