/* blog.css — socle CSS commun des articles de blog (mapropfirm.fr)
 * GRAINE : règles partagées par tous les articles existants (extraites automatiquement).
 * RÈGLE : tout NOUVEL article doit linker ce fichier et l'ENRICHIR (pas re-styler inline).
 * Les anciens articles gardent leur <style> inline (non migrés volontairement).
 * Créé le 2026-06-11. Versionner via ?v= et bumper à chaque enrichissement.
 */

/* ===== APP LAYOUT ===== */
html{overflow:hidden;height:100%}

body{overflow:hidden;height:100%}

main{height:100vh;overflow:hidden}

.float-header{
  display:flex !important;width:fit-content !important;
  position:relative !important;top:auto !important;left:auto !important;
  transform:none !important;margin:18px auto 32px !important;flex-shrink:0;
}

.page-layout{display:flex;height:100%;overflow:hidden}

/* Reading progress bar: subtle solid steel-grey instead of blue gradient (no AI tell). */
.sidebar-nav::before{
  content:'';position:absolute;top:0;right:0;width:2px;
  height:var(--scroll-progress,0%);
  background:rgba(160,175,200,0.35);
  z-index:10;transition:height 0.6s cubic-bezier(0.22,1,0.36,1);border-radius:2px;opacity:1;
}

.sb-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-muted);text-decoration:none;
  font-size:0.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  transition:all 0.25s ease;margin-bottom:16px;
  padding:6px 12px;border-radius:6px;border:1px solid transparent;
}

.sb-back svg{flex-shrink:0;transition:transform 0.25s cubic-bezier(0.22,1,0.36,1)}

.sb-back:hover svg{transform:translateX(-4px)}

.sb-brand{display:flex;align-items:center;gap:14px}

.sb-brand-sub{font-size:0.75rem;color:var(--text-muted);display:block;margin-top:2px}

.sidebar-nav-content::-webkit-scrollbar{display:none}

.nav-item{counter-increment:nav-counter}

.nav-item{
  display:flex;align-items:flex-start;gap:0.65rem;
  padding:0.7rem 0.85rem;color:var(--text-muted);text-decoration:none !important;
  font-size:0.88rem;font-weight:500;border-radius:10px;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
  position:relative;margin-bottom:2px;cursor:pointer;
}

.nav-item::after{display:none !important}

.nav-dot::before{content:counter(nav-counter,decimal-leading-zero)}

.nav-icon{
  width:14px;height:14px;flex-shrink:0;opacity:0.45;
  transition:opacity 0.3s ease,color 0.3s ease;display:block;margin-top:2px;
}

.nav-item:hover .nav-icon{opacity:0.7}

.nav-item.active .nav-icon{opacity:1;color:var(--group-accent,#60a5fa)}

.nav-item[data-section="introduction"]{--group-accent:#60a5fa}

.nav-item:hover{color:#e0e4ea;background:rgba(160,175,200,0.06)}

.nav-item:hover .nav-dot{background:rgba(160,175,200,0.12);border-color:rgba(160,175,200,0.25);color:#e0e4ea}

.nav-item.active{
  color:#fff;font-weight:600;position:relative;z-index:2;
  background:color-mix(in srgb,var(--group-accent) 8%,transparent);
}

.nav-item.active .nav-dot{
  background:var(--group-accent);border-color:var(--group-accent);color:#fff;
  box-shadow:0 0 12px color-mix(in srgb,var(--group-accent) 40%,transparent);
}

@keyframes dotPulse{
  0%,100%{box-shadow:0 0 12px color-mix(in srgb,var(--group-accent) 40%,transparent)}
  50%{box-shadow:0 0 20px color-mix(in srgb,var(--group-accent) 60%,transparent),0 0 4px color-mix(in srgb,var(--group-accent) 30%,transparent)}
}

.nav-item.active .nav-dot{animation:dotPulse 2.5s ease-in-out infinite}

.sb-back:focus-visible,.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

.sb-progress-tracker{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px 12px;border-top:1px solid rgba(160,175,200,0.06);flex-shrink:0;
}

.sb-progress-bar-fill{
  height:100%;width:0%;border-radius:3px;background:#60a5fa;
  transition:width 0.5s cubic-bezier(0.22,1,0.36,1);position:relative;
}

.sb-progress-bar-fill::after{
  content:'';position:absolute;right:0;top:-2px;width:7px;height:7px;
  border-radius:50%;background:#60a5fa;
  opacity:0;transition:opacity 0.3s ease;
}

.sb-progress-bar-fill.has-progress::after{opacity:1}

.sb-progress-label{
  font-size:0.68rem;font-weight:600;font-family:'IBM Plex Mono',monospace;
  color:var(--text-muted);white-space:nowrap;letter-spacing:0.5px;min-width:38px;text-align:right;
  transition:color 0.3s ease;
}

.sidebar-overlay.open{display:block}

[data-theme="light"] .sb-brand-name{color:var(--text)}

[data-theme="light"] .nav-item:hover{color:var(--text-dim);background:rgba(0,0,0,0.04)}

[data-theme="light"] .nav-dot{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)}

[data-theme="light"] .sb-progress-tracker{border-top-color:var(--border)}

[data-theme="light"] .sb-progress-bar-wrap{background:rgba(0,0,0,0.06)}

[data-theme="light"] .sidebar-overlay{background:rgba(0,0,0,0.3)}

[data-theme="light"] .article-title{color:var(--text)}

[data-theme="light"] .article-body h2{color:var(--text);border-bottom-color:rgba(0,0,0,0.06)}

[data-theme="light"] .article-body strong{color:var(--text)}

.faq-item:hover .faq-summary{color:#fff}

.faq-summary::-webkit-details-marker{display:none}


/* ============================================================
   COMPOSANTS ARTICLE — enrichissement 2026-06-18 (v2)
   Couche composants commune extraite du design-system eprouve :
   content-scroll, hero-glow, article-header, CTA box, typo article-body,
   tldr, pull-quote, pf-card, cmp-table, callouts, stat-row, pros-cons,
   key-point, profile-row, pf-infographic, section-sep, FAQ complete,
   promo-code, animations, responsive, theme clair.
   REGLE : reutiliser ces classes, ne pas re-styler inline. Bumper ?v= a chaque ajout.
   ============================================================ */
/* ===== CONTENT SCROLL ===== */
.content-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0 48px 60px;-webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;min-width:0;display:flex;flex-direction:column;
  scroll-padding-top:80px; /* header N3 fixe en haut : les ancres atterrissent sous le header */
}
/* Hero glow — décoration en tête uniquement (pas de second halo bas qui suivrait le scroll)
   1 halo blur subtil en haut-gauche, fixé au top du content-scroll */
.hero-glow-tl{
  position:absolute;width:600px;height:600px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:0.04;filter:blur(120px);
  top:-200px;left:-200px;background:#60a5fa;
}
.article-header,.article-body{position:relative;z-index:1}
.content-scroll::-webkit-scrollbar{width:5px;height:5px}
.content-scroll::-webkit-scrollbar-track{background:transparent}
.content-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* ===== ARTICLE HEADER ===== */
.article-header{text-align:center;padding:0 0 40px;position:relative;max-width:780px;margin:0 auto}
.breadcrumb-nav{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:0.78rem;color:rgba(255,255,255,0.55);
  margin:18px 0 32px;
}
.breadcrumb-nav a{
  color:rgba(255,255,255,0.7);text-decoration:none;transition:color 0.2s ease;
}
.breadcrumb-nav a:hover{color:#60a5fa}
.breadcrumb-nav .breadcrumb-sep{color:rgba(255,255,255,0.3);margin:0 2px}
.breadcrumb-nav .breadcrumb-current{color:rgba(255,255,255,0.85);font-weight:500}
.article-category{
  display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:#60a5fa;
  background:rgba(96,165,250,0.1);border:1px solid rgba(96,165,250,0.15);
  padding:4px 14px;border-radius:999px;margin-bottom:16px;
}
.article-title{
  font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;
  letter-spacing:-0.02em;line-height:1.2;margin-bottom:16px;color:#fff;
}
.article-subtitle{font-size:1rem;color:var(--text-muted);line-height:1.6;margin-bottom:20px}
.article-meta{
  display:flex;gap:16px;justify-content:center;align-items:center;
  font-size:0.78rem;color:var(--text-muted);flex-wrap:wrap;
}
.article-meta-item{display:inline-flex;align-items:center;gap:5px}
.article-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:0.4}
.article-logos{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap}
.article-logo-wrap{
  display:flex;align-items:center;gap:8px;
  background:rgba(160,175,200,0.06);border:1px solid rgba(160,175,200,0.1);
  padding:8px 16px;border-radius:12px;
}
.article-logo-wrap img{width:24px;height:24px;border-radius:6px}
.article-logo-name{font-size:0.85rem;font-weight:600;color:var(--text)}

/* CTA box en tête d'article — design canonique (référence : propfirm-futures-c-est-quoi) */
.article-cta-box{
  display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;
  padding:18px 20px;border-radius:14px;
  background:linear-gradient(135deg,rgba(96,165,250,0.05),rgba(52,211,153,0.04));
  border:1px solid rgba(96,165,250,0.15);
}
.article-cta-box::before{
  content:'Pour aller plus loin →';display:block;width:100%;
  font-size:0.7rem;font-weight:700;color:#60a5fa;
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:6px;
}
.article-cta-btn{
  flex:1;min-width:200px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:9px;
  font-size:0.88rem;font-weight:600;text-decoration:none !important;
  transition:all 0.25s ease;
}
.article-body .article-cta-btn-primary{color:#fff !important}
.article-body .article-cta-btn-secondary{color:var(--text) !important}
.article-cta-btn-primary{
  background:linear-gradient(135deg,#60a5fa,#3b82f6);
  color:#fff;border:1px solid rgba(96,165,250,0.4);
  box-shadow:0 4px 16px rgba(96,165,250,0.25);
}
.article-cta-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(96,165,250,0.35)}
.article-cta-btn-secondary{
  background:rgba(160,175,200,0.06);
  color:var(--text);border:1px solid rgba(160,175,200,0.18);
}
.article-cta-btn-secondary:hover{background:rgba(160,175,200,0.1);border-color:rgba(160,175,200,0.28)}
[data-theme="light"] .article-cta-box{background:linear-gradient(135deg,rgba(96,165,250,0.06),rgba(52,211,153,0.04))}
[data-theme="light"] .article-cta-btn-secondary{background:rgba(0,0,0,0.04);color:var(--text)}
@media(max-width:600px){
  .article-cta-box{flex-direction:column}
  .article-cta-btn{width:100%}
}

/* ===== ARTICLE BODY ===== */
.article-body{max-width:780px;margin:0 auto;font-size:1rem;line-height:1.85;color:var(--text-dim)}
.article-body h2{
  font-size:1.4rem;font-weight:700;color:#fff;
  margin:52px 0 24px;padding-bottom:14px;
  border-bottom:1px solid rgba(160,175,200,0.08);
}
.article-body h2:first-of-type{margin-top:0}
.article-body h3{
  font-size:1.1rem;font-weight:600;color:var(--accent-light);
  margin:36px 0 14px;
}
.article-body p{font-size:0.95rem;color:var(--text);margin-bottom:22px}
.article-body strong{color:#fff;font-weight:600}
.article-body a{color:#60a5fa;text-decoration:underline;text-underline-offset:2px;transition:color 0.2s}
.article-body a:hover{color:#93c5fd}


/* Pull-quote — design canonique (référence : propfirm-futures-c-est-quoi)
   Border-left bleu plein + gradient horizontal + italique. Pas de guillemet décoratif. */
.pull-quote{
  margin:30px 0;padding:22px 28px;
  border-left:3px solid #60a5fa;
  background:linear-gradient(90deg,rgba(96,165,250,0.04),transparent);
  border-radius:0 14px 14px 0;
}
.pull-quote p{
  margin:0 !important;font-size:1.05rem;line-height:1.7;
  color:var(--text);font-style:italic;font-weight:500;
}

/* TLDR — design canonique (référence : propfirm-futures-c-est-quoi)
   Background dégradé bleu/vert + badge pill rectangle + bullets ✓ verts */
.tldr-box{
  background:linear-gradient(135deg,rgba(96,165,250,0.06),rgba(52,211,153,0.04));
  border:1px solid rgba(96,165,250,0.18);border-radius:14px;
  padding:22px 24px;margin:8px 0 28px;position:relative;
}
.tldr-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.7rem;font-weight:700;color:#60a5fa;
  background:rgba(96,165,250,0.1);
  padding:5px 11px;border-radius:6px;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:14px;
}
.tldr-list{margin:0 !important;padding:0 !important;list-style:none !important}
.tldr-list li{
  position:relative !important;padding-left:24px !important;
  margin-bottom:10px !important;font-size:0.95rem !important;line-height:1.65 !important;
}
.tldr-list li::before{
  content:'✓' !important;position:absolute !important;left:0 !important;top:1px !important;
  width:16px !important;height:16px !important;background:transparent !important;border-radius:0 !important;
  color:#34d399 !important;font-weight:700 !important;font-size:0.95rem !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}

/* Propfirm profile card */
.pf-card{
  margin:24px 0 28px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:22px 26px;position:relative;overflow:hidden;
}
.pf-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--pf-accent,#60a5fa);
}
.pf-card.pf-tpt{--pf-accent:#06b6d4}
.pf-card.pf-tradeday{--pf-accent:#22c55e}
.pf-card.pf-mff{--pf-accent:#f59e0b}
.pf-card.pf-tradeify{--pf-accent:#ec4899}
.pf-card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pf-card-logo{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(255,255,255,0.04);border:1px solid rgba(160,175,200,0.1);
  display:flex;align-items:center;justify-content:center;
}
.pf-card-logo img{width:30px;height:30px;border-radius:6px}
.pf-card-title{font-size:1.15rem;font-weight:700;color:#fff;margin:0;line-height:1.2}
.pf-card-tag{
  font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--pf-accent);margin-top:3px;
}
.pf-card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:6px;
}
.pf-card-stat{
  background:rgba(255,255,255,0.02);border:1px solid rgba(160,175,200,0.06);
  border-radius:10px;padding:10px 12px;
}
.pf-card-stat-label{
  font-size:0.64rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--text-muted);margin-bottom:4px;
}
.pf-card-stat-val{font-family:'IBM Plex Mono',monospace;font-size:0.95rem;font-weight:700;color:#fff}

/* Comparison table */
.cmp-table{
  width:100%;border-collapse:separate;border-spacing:0;
  margin:24px 0;border-radius:12px;overflow:hidden;
  border:1px solid rgba(160,175,200,0.1);
}
.cmp-table thead th{
  background:rgba(160,175,200,0.08);
  padding:12px 14px;font-size:0.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.5px;
  color:var(--accent);text-align:left;
  border-bottom:1px solid rgba(160,175,200,0.1);
}
.cmp-table thead th:first-child{color:var(--text-muted)}
.cmp-table tbody td{
  padding:11px 14px;font-size:0.85rem;color:var(--text);
  border-bottom:1px solid rgba(160,175,200,0.05);
}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr:nth-child(odd){background:rgba(255,255,255,0.015)}
.cmp-table tbody td:first-child{
  font-size:0.78rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.3px;
}
.cell-tpt{color:#22d3ee;font-weight:600}
.cell-tradeday{color:#4ade80;font-weight:600}
.cell-mff{color:#fbbf24;font-weight:600}
.cell-tradeify{color:#f472b6;font-weight:600}
.cmp-table tbody td.promo-cell{
  white-space:nowrap;
}
.cmp-table tbody td.promo-cell .promo-code{
  margin-right:8px;
}
.cmp-table tbody td.promo-cell > span:not(.promo-code){
  font-size:0.82rem;
}

/* Article callouts info/success/warning — design canonique (référence : propfirm-futures-c-est-quoi)
   Bordure complète tintée + background tinté léger (PAS left-border-only) */
.article-info,
.article-success,
.article-warning{
  border-radius:12px;padding:18px 22px;margin:20px 0;
  border:1px solid;font-size:0.94rem;line-height:1.75;
}
.article-info{background:rgba(6,182,212,0.06);border-color:rgba(6,182,212,0.22);color:var(--text-dim)}
.article-success{background:rgba(34,197,94,0.06);border-color:rgba(34,197,94,0.22);color:var(--text-dim)}
.article-warning{background:rgba(245,158,11,0.06);border-color:rgba(245,158,11,0.22);color:var(--text-dim)}
.article-info strong,
.article-success strong,
.article-warning strong{color:var(--text)}

/* Ordered / unordered lists */
.article-body ol{margin:16px 0;padding-left:24px}
.article-body ol li{font-size:0.92rem;color:var(--text);margin-bottom:12px;line-height:1.7}
.article-body ul{margin:12px 0;padding-left:20px}
.article-body ul li{
  font-size:0.92rem;color:var(--text);margin-bottom:8px;line-height:1.7;
  list-style:none;position:relative;padding-left:16px;
}
.article-body ul li::before{
  content:'';position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;background:rgba(96,165,250,0.5);
}

/* Premium stat row — colored variants (cyan/green/amber/pink) for propfirm-themed stats
   Default: 3 columns for 3-card rows. .cols-4 = 2x2 grid for 4-card rows
   (4-col on a 720px article body is too narrow — text wraps mid-word). */
.stat-row-premium{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 36px;
}
.stat-row-premium.cols-4{grid-template-columns:repeat(2,1fr);gap:16px}
.stat-card-premium{
  position:relative;padding:22px 20px;border-radius:16px;text-align:left;
  background:linear-gradient(135deg,var(--scp-tint,rgba(96,165,250,0.06)) 0%,rgba(255,255,255,0.015) 60%);
  border:1px solid var(--scp-border,rgba(96,175,200,0.18));
  overflow:hidden;transition:transform 0.25s ease,border-color 0.25s ease;
}
.stat-card-premium:hover{transform:translateY(-3px);border-color:var(--scp-color,rgba(96,165,250,0.4))}
.stat-card-premium::after{
  content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;
  border-radius:50%;background:var(--scp-color,#60a5fa);opacity:0.06;filter:blur(18px);
}
.scp-cyan{--scp-color:#06b6d4;--scp-tint:rgba(6,182,212,0.08);--scp-border:rgba(6,182,212,0.22)}
.scp-green{--scp-color:#22c55e;--scp-tint:rgba(34,197,94,0.08);--scp-border:rgba(34,197,94,0.22)}
.scp-amber{--scp-color:#f59e0b;--scp-tint:rgba(245,158,11,0.08);--scp-border:rgba(245,158,11,0.22)}
.scp-pink{--scp-color:#ec4899;--scp-tint:rgba(236,72,153,0.08);--scp-border:rgba(236,72,153,0.22)}
.scp-red{--scp-color:#ef4444;--scp-tint:rgba(239,68,68,0.08);--scp-border:rgba(239,68,68,0.22)}
.scp-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.scp-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--scp-tint);color:var(--scp-color);
}
.scp-badge{
  font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--scp-color);
}
.scp-value{
  font-family:'IBM Plex Mono',monospace;font-size:1.6rem;font-weight:800;
  color:#fff;line-height:1.1;margin-bottom:4px;letter-spacing:-0.02em;
}
.scp-label{font-size:0.78rem;color:var(--text-muted);line-height:1.4}
[data-theme="light"] .scp-value{color:var(--text)}
@media(max-width:900px){
  .stat-row-premium,.stat-row-premium.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .stat-row-premium,.stat-row-premium.cols-4{grid-template-columns:1fr;gap:10px}
}

/* Pros / Cons */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.pros,.cons{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:20px;position:relative;
  border-left:3px solid transparent;transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.pros:hover,.cons:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.pros{border-left-color:#22c55e;background:rgba(34,197,94,0.03)}
.cons{border-left-color:#ef4444;background:rgba(239,68,68,0.03)}
.pros h4,.cons h4{
  font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  margin:0 0 12px;display:flex;align-items:center;gap:6px;
}
.pros h4{color:#22c55e}
.cons h4{color:#ef4444}
.pros ul,.cons ul{margin:0;padding:0;list-style:none}
.pros ul li,.cons ul li{
  font-size:0.85rem;color:var(--text);margin-bottom:8px;line-height:1.6;
  position:relative;padding-left:18px;
}
.pros ul li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.4);
}
.cons ul li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,0.4);
}

/* Key point callout — design canonique (référence : propfirm-futures-c-est-quoi)
   Flex avec icône à gauche, fond bleu pâle, simple */
.key-point{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 20px;margin:20px 0;
  background:rgba(96,165,250,0.04);border:1px solid rgba(96,165,250,0.15);
  border-radius:12px;
}
.key-point-icon{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  background:rgba(96,165,250,0.1);
  display:flex;align-items:center;justify-content:center;color:#60a5fa;
}
.key-point-text{font-size:0.92rem;color:var(--text-dim);line-height:1.7}
.key-point-text strong{color:var(--text)}

/* Profile selector (who should pick what) */
.profile-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0;
}
.profile-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:18px;text-align:left;position:relative;overflow:hidden;
  transition:transform 0.25s ease,border-color 0.25s ease;
}
.profile-card:hover{transform:translateY(-3px);border-color:rgba(160,175,200,0.2)}
.profile-card::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--pc-accent,#60a5fa);
}
.profile-card.pc-tpt{--pc-accent:#06b6d4}
.profile-card.pc-tradeday{--pc-accent:#22c55e}
.profile-card.pc-mff{--pc-accent:#f59e0b}
.profile-card.pc-tradeify{--pc-accent:#ec4899}
.profile-card h4{
  font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--pc-accent);margin:0 0 8px;
}
.profile-card p{font-size:0.85rem !important;color:var(--text);line-height:1.6;margin:0 !important}

/* ===== Infographic (HTML/CSS — clean, no gradients/textures) ===== */
.pf-infographic{
  margin:40px 0;padding:32px 28px 28px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  color:var(--text);
}
.pf-infographic figcaption{
  text-align:center;font-size:0.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:3px;color:var(--text-muted);margin:0 0 28px;
  padding-bottom:18px;border-bottom:1px solid var(--border);
}
.pfi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
}
.pfi-col{
  position:relative;padding:22px 24px 24px;
  background:rgba(255,255,255,0.015);
  border:1px solid var(--border);border-radius:14px;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform 0.25s ease,border-color 0.25s ease;
}
.pfi-col:hover{transform:translateY(-3px);border-color:rgba(160,175,200,0.22)}
.pfi-col::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--pfi-accent);border-radius:14px 14px 0 0;
}
.pfi-tpt{--pfi-accent:#06b6d4;--pfi-tint:rgba(6,182,212,0.10)}
.pfi-tradeday{--pfi-accent:#22c55e;--pfi-tint:rgba(34,197,94,0.10)}
.pfi-mff{--pfi-accent:#f59e0b;--pfi-tint:rgba(245,158,11,0.10)}
.pfi-tradeify{--pfi-accent:#ec4899;--pfi-tint:rgba(236,72,153,0.10)}
/* Top row of card: axis label + icon side-by-side to save vertical space */
.pfi-top{
  display:flex;align-items:center;gap:14px;width:100%;margin-bottom:14px;
}
.pfi-axis{
  font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--text-muted);line-height:1.25;flex:1;
}
.pfi-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:var(--pfi-tint);color:var(--pfi-accent);
  display:flex;align-items:center;justify-content:center;
}
.pfi-icon svg{width:22px;height:22px}
.pfi-cat{
  font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--pfi-accent);margin-bottom:6px;
}
.pfi-name{
  font-size:1.6rem;font-weight:700;line-height:1.15;
  color:var(--text);margin:0 0 4px;letter-spacing:-0.5px;
}
.pfi-sub{
  font-size:0.82rem;color:var(--text-muted);margin-bottom:14px;
}
.pfi-metric{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;min-width:130px;padding:0 16px;
  font-family:'IBM Plex Mono',monospace;font-size:0.85rem;font-weight:700;
  color:var(--pfi-accent);background:var(--pfi-tint);
  border:1px solid var(--pfi-accent);border-radius:999px;
  margin-bottom:18px;white-space:nowrap;letter-spacing:0.02em;
}
.pfi-bullets{
  list-style:none;margin:0;padding:0;width:100%;
  border-top:1px solid var(--border);padding-top:14px;
}
.pfi-bullets li{
  font-size:0.86rem;color:var(--text);line-height:1.55;
  padding-left:16px;position:relative;margin-bottom:8px;
}
.pfi-bullets li:last-child{margin-bottom:0}
.pfi-bullets li::before{
  content:'';position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--pfi-accent);
}
[data-theme="light"] .pfi-col{background:rgba(0,0,0,0.02)}
@media(max-width:640px){
  .pfi-grid{grid-template-columns:1fr;gap:14px}
  .pf-infographic{padding:24px 18px 20px;margin:32px 0}
  .profile-row{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .pfi-col{padding:20px 20px}
  .pfi-name{font-size:1.5rem}
}

/* Section separator */
.section-sep{
  display:flex;align-items:center;gap:16px;margin:48px 0 36px;padding:0 10px;
}
.section-sep::before,.section-sep::after{
  content:'';flex:1;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(160,175,200,0.25) 50%,transparent 100%);
}
.section-sep-icon{
  width:32px;height:32px;border-radius:10px;
  background:rgba(160,175,200,0.1);border:1px solid rgba(160,175,200,0.2);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);opacity:0.8;
  box-shadow:0 0 12px rgba(160,175,200,0.08);
}

@media(max-width:700px){
  .profile-row{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .pf-card-grid{grid-template-columns:1fr 1fr}
}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.article-header{animation:fadeInUp 0.6s ease both;animation-delay:0.1s}
.article-body>*{animation:fadeInUp 0.5s ease both}

@media(max-width:900px){
  /* 1. Release html/body/main from viewport lock so content flows naturally */
  html{overflow-x:hidden!important;overflow-y:auto!important;height:auto!important}
  body{overflow-x:hidden!important;overflow-y:auto!important;height:auto!important;width:100%!important}
  main{height:auto!important;overflow:visible!important;width:100%!important;max-width:100vw!important}
  .page-layout{display:block!important;overflow:visible!important;height:auto!important;width:100%!important}
  .content-scroll{flex:none!important;position:relative!important;overflow-x:clip!important;overflow-y:visible!important;height:auto!important;padding:12px 20px 60px!important;min-width:0!important;width:100%!important;box-sizing:border-box!important}

  /* 2. Float header — static at top, scrolls with content */
  .float-header{
    display:flex!important;
    position:relative!important;top:auto!important;left:auto!important;
    transform:none!important;
    margin:12px auto 20px!important;z-index:100!important;
    flex-shrink:0!important;
    width:fit-content!important;
    max-width:calc(100vw - 24px)!important;
  }

  /* 5. Article body — constrain and reset justify */
  .article-header{max-width:100%!important;padding:0 0 24px!important}
  .article-body{max-width:100%!important;line-height:1.75!important}
  .article-body p{text-align:left!important;hyphens:auto;overflow-wrap:break-word;word-break:normal}
  .article-body h2{font-size:1.25rem!important;margin:36px 0 18px!important}
  .article-body h3{font-size:1rem!important;margin:26px 0 10px!important}

  /* 6. Comparatif table → cartes par critère (pivot) */
  .cmp-table{display:block!important;width:100%!important;border:none!important;border-radius:0!important;overflow:visible!important;margin:20px 0!important;background:none!important}
  .cmp-table thead{display:none!important}
  .cmp-table tbody{display:flex!important;flex-direction:column;gap:12px}
  .cmp-table tbody tr,
  .cmp-table tbody tr:nth-child(odd),
  .cmp-table tbody tr:nth-child(even){
    display:flex!important;flex-direction:column;
    background:rgba(255,255,255,0.02)!important;
    border:1px solid rgba(160,175,200,0.12)!important;
    border-radius:12px;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.18);
  }
  .cmp-table tbody td{
    display:flex!important;align-items:center;justify-content:space-between;
    padding:10px 14px!important;border:none!important;
    font-size:0.88rem!important;gap:14px;
    white-space:normal!important;text-align:right!important;
    border-top:1px solid rgba(160,175,200,0.08)!important;
  }
  .cmp-table tbody td:first-child{
    background:linear-gradient(135deg,rgba(96,165,250,0.14),rgba(96,165,250,0.05))!important;
    color:#fff!important;font-weight:700!important;
    font-size:0.72rem!important;text-transform:uppercase!important;letter-spacing:1.2px!important;
    justify-content:center!important;text-align:center!important;
    padding:11px 14px!important;border:none!important;
  }
  .cmp-table tbody td.cell-lucid::before,
  .cmp-table tbody td.cell-ffn::before,
  .cmp-table tbody td.cell-tpt::before{
    font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
    flex-shrink:0;
  }
  .cmp-table tbody td.cell-lucid::before{content:'Lucid';color:#4ade80}
  .cmp-table tbody td.cell-ffn::before{content:'FFN';color:#fbbf24}
  .cmp-table tbody td.cell-tpt::before{content:'TPT';color:#22d3ee}
  .cmp-table tbody td.promo-cell{white-space:nowrap!important}

  /* Autres tables fallback scroll */
  .table-wrapper{overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch}

  /* 7. Hide header + lock body when sommaire open */
  body.sommaire-open{overflow:hidden!important;touch-action:none!important}
  body.sommaire-open .float-header{opacity:0!important;pointer-events:none!important}
}
@media(max-width:700px){
  .content-scroll{padding:12px 16px 50px!important}
  .article-title{font-size:1.45rem!important;line-height:1.25!important}
  .article-subtitle{font-size:0.95rem!important}
  .cmp-table{font-size:0.8rem}
  .cmp-table thead th,.cmp-table tbody td{padding:8px 10px}
  .tldr-box{padding:16px 18px!important}
  .pf-card{padding:18px 18px!important}
  .pull-quote{padding:16px 18px!important;margin:22px 0!important}
  .pull-quote p{font-size:0.98rem !important}
}
@media(max-width:480px){
  .content-scroll{padding:10px 14px 40px!important}
  .article-title{font-size:1.3rem!important}
  .article-body p{font-size:0.92rem!important}
  .breadcrumb-nav{font-size:0.72rem!important;margin:12px 0 22px!important}
}
[data-theme="light"] .article-title{color:var(--text)}
[data-theme="light"] .article-body h2{color:var(--text);border-bottom-color:rgba(0,0,0,0.06)}
[data-theme="light"] .article-body strong{color:var(--text)}
[data-theme="light"] .pull-quote p{color:var(--text-dim) !important}
[data-theme="light"] .pf-card-title{color:var(--text)}
[data-theme="light"] .pf-card-stat-val{color:var(--text)}
[data-theme="light"] .stat-card-value{color:var(--text)}
[data-theme="light"] .cmp-table tbody tr:nth-child(odd){background:rgba(0,0,0,0.02)}
[data-theme="light"] .cmp-table thead th{background:rgba(0,0,0,0.04);border-bottom-color:var(--border)}
[data-theme="light"] .cmp-table tbody td{border-bottom-color:rgba(0,0,0,0.04)}
[data-theme="light"] .tldr-box{background:rgba(96,165,250,0.07);border-color:rgba(96,165,250,0.2)}
[data-theme="light"] .article-info{background:rgba(6,182,212,0.07)}
[data-theme="light"] .article-success{background:rgba(34,197,94,0.07)}
[data-theme="light"] .article-warning{background:rgba(245,158,11,0.07)}
[data-theme="light"] .key-point{background:rgba(96,165,250,0.06);border-color:rgba(96,165,250,0.18)}
[data-theme="light"] .key-point-text strong{color:var(--text)}
[data-theme="light"] .article-logo-wrap{background:rgba(0,0,0,0.04);border-color:var(--border)}
[data-theme="light"] .section-sep-icon{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .content-scroll .hero-glow-tl,[data-theme="light"] .content-scroll .hero-glow-br{opacity:0.02}
[data-theme="light"] .pros:hover,[data-theme="light"] .cons:hover{box-shadow:0 6px 20px rgba(0,0,0,0.08)}
[data-theme="light"] .profile-card p{color:var(--text-dim)}

/* ===== FAQ (same design as propfirm guides) ===== */
.faq-item{
  margin-bottom:12px;background:var(--surface,#12141a);
  border:1px solid var(--border,#1e2230);border-radius:12px;overflow:hidden;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.faq-item:hover{
  border-color:rgba(251,146,60,0.2);
  box-shadow:0 4px 20px rgba(0,0,0,0.2);transform:translateY(-1px);
}
details[open].faq-item{
  border-color:rgba(251,146,60,0.25);
  box-shadow:inset 3px 0 0 #fb923c,0 6px 24px rgba(0,0,0,0.2);
  background:rgba(18,20,26,0.95);
}
.faq-summary .faq-q{font-size:inherit;font-weight:inherit;margin:0;line-height:inherit}
.faq-summary{
  padding:1.2rem 1.4rem;font-weight:600;font-size:0.9rem;
  color:var(--text,#e0e4ea);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;transition:color 0.2s;
}
.faq-item:hover .faq-summary{color:#fff}
.faq-summary::-webkit-details-marker{display:none}
.faq-summary::after{
  content:'+';color:#fb923c;font-size:1.2rem;font-weight:300;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:rgba(251,146,60,0.08);border:1px solid rgba(251,146,60,0.12);
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);flex-shrink:0;margin-left:12px;
}
.faq-item:hover .faq-summary::after{background:rgba(251,146,60,0.12);border-color:rgba(251,146,60,0.25)}
details[open] .faq-summary::after{
  content:'\2212';transform:rotate(180deg);
  background:rgba(251,146,60,0.15);border-color:rgba(251,146,60,0.3);
}
.faq-content{
  padding:0 1.4rem 1.4rem;color:var(--text-dim,#8a92a0);
  line-height:1.8;font-size:0.88rem;
  border-top:1px solid rgba(160,175,200,0.06);margin-top:0;padding-top:1.1rem;
}
.faq-content p{margin:0}
[data-theme="light"] .faq-item{background:#fff;border-color:rgba(100,116,139,0.25)}
[data-theme="light"] .faq-item summary{color:#0f172a}
[data-theme="light"] .faq-item[open]{background:#f8f9fb;border-color:rgba(100,116,139,0.45)}
[data-theme="light"] .faq-content{color:#334155}
[data-theme="light"] .faq-item:hover .faq-summary{color:var(--text)}

/* ── Promo code badge (copy to clipboard) ── */
.promo-code{
  display:inline-flex;align-items:center;gap:0.3rem;
  background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(34,197,94,0.08));
  padding:0.2rem 0.55rem;border-radius:6px;
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:0.85em;
  color:#4ade80;border:1px solid rgba(34,197,94,0.4);
  cursor:pointer;transition:all 0.25s ease;white-space:nowrap;
  box-shadow:0 2px 8px rgba(34,197,94,0.15),inset 0 1px 0 rgba(255,255,255,0.05);
  letter-spacing:0.5px;
}
.promo-code:hover{
  background:linear-gradient(135deg,rgba(34,197,94,0.25),rgba(34,197,94,0.15));
  border-color:rgba(34,197,94,0.7);color:#6ee7b7;transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(34,197,94,0.3),inset 0 1px 0 rgba(255,255,255,0.1);
}
.promo-code:active{transform:translateY(0)}
[data-theme="light"] .promo-code{color:#059669}
[data-theme="light"] .promo-code:hover{color:#047857}
@keyframes fadeInOut{
  0%{opacity:0;transform:translateX(-50%) translateY(-8px)}
  15%,85%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-8px)}
}