/* ============================================================
   THEME V4 — design system du template E-Money (Figma UI8)
   Charge APRES style.css (+ marches.css) : rhabille le site
   vitrine en noir #131416 / lime #D4FE75 / Poppins.
   Aucune logique modifiee — presentation uniquement.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --bg: #131416;
  --bg-alt: #17181B;
  --surface: #1A1C1E;
  --surface-2: #232528;
  --border: rgba(163,164,165,0.18);
  --border-strong: rgba(163,164,165,0.35);
  --text: #FFFFFF;
  --text-dim: #9EA0A3;
  --text-mute: #7C7E82;
  --accent: #D4FE75;
  --accent-2: #D4FE75;
  --accent-gold: #E8C468;
  --danger: #FE7575;
  --gradient: linear-gradient(135deg, #D4FE75, #D4FE75);
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 18px 45px rgba(0,0,0,0.35);
  --ff-head: 'Poppins', sans-serif;
  --ff-body: 'Poppins', sans-serif;
  --lime: #D4FE75;
  --noir: #131416;
}

body{ background: var(--bg); color: var(--text-dim); }
h1,h2,h3,h4{ color: var(--text); letter-spacing: -0.01em; }
.noise-overlay{ display:none; }

/* ---------- Header ---------- */
.site-header{
  background: rgba(11,19,34,0.90);              /* navy translucide, ton des pages actuelles */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.main-nav a{ color: rgba(232,238,247,0.85); }
.main-nav a:hover{ color: #b6f23e; }
.logo{ color: #fff; }
.logo-dot{ background: #b6f23e; }
@media (max-width: 960px){
  .main-nav{ background: rgba(11,19,34,0.98); }
}
.nav-toggle span{ background: #e8eef7; }
/* Accents du header alignés sur le lime-vert des pages (#b6f23e) */
.site-header .btn-primary{ background: #b6f23e; color: #0b1322; }
.site-header .btn-primary:hover{ box-shadow: 0 10px 30px rgba(182,242,62,0.25); }
/* Actions du header (Mes portefeuilles, Tableau de bord, Connexion) : pastilles bordées,
   nettement distinctes des liens de navigation en simple texte (.main-nav a). */
.site-header .btn-ghost{
  color: rgba(232,238,247,0.92);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  padding: 9px 18px;
}
.site-header .btn-ghost:hover{
  color: #b6f23e;
  border-color: rgba(182,242,62,0.55);
  background: rgba(182,242,62,0.08);
}

/* ---------- Boutons ---------- */
.btn{ border-radius: 12px; }
.btn-primary{
  background: var(--lime);
  color: var(--noir);
  box-shadow: none;
}
.btn-primary:hover{ box-shadow: 0 10px 30px rgba(212,254,117,0.25); }
.btn-outline{
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover{ border-color: var(--lime); color: var(--lime); }
.btn-ghost{ color: rgba(255,255,255,0.85); }
.btn-ghost:hover{ color: var(--lime); }

/* ---------- Titres, accents ---------- */
.text-gradient{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--lime);
  color: var(--lime);
}
.eyebrow{ color: var(--lime); }
.pull-quote strong{ color: var(--lime); }

/* Hero decoratif */
.hero-glow{ opacity: 0.12; }
.hero-lines{ opacity: 0.25; }

/* ---------- Composants surfaces ---------- */
.noise-item, .factor, .univers-card, .market-card{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-dim);
}
.statement-card, .explainer-box, .plan-card, .step-card,
.futures-card, .demo-card, .compare-col, .pea-callout{
  background: var(--surface);
  border-color: var(--border);
}
.compare-after{
  background: rgba(212,254,117,0.06);
  border-color: rgba(212,254,117,0.3);
}
.step-num{
  background: var(--lime); color: var(--noir);
  border-radius: 8px; padding: 4px 12px;
  font-size: 0.9rem; display: inline-block;
}
.pill-live{ background: rgba(212,254,117,0.15); color: var(--lime); }
.pill-demo{ background: rgba(212,254,117,0.15); color: var(--lime); }
.ico-check{ background: rgba(212,254,117,0.14); color: var(--lime); }
.ico-x{ background: rgba(254,117,117,0.14); color: var(--danger); }
.markets-teaser a{ color: var(--lime); }
.explainer-note{ color: var(--text-mute); }

/* ---------- Sections chips interactives ---------- */
.profile-picker, .uni-try, .sim-card, .quiz-card, .price-calc, .plan-locked{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.profile-chip, .uni-chip, .calc-chip{
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: rgba(255,255,255,0.85);
  border-radius: 12px;
}
.profile-chip:hover, .uni-chip:hover, .calc-chip:hover{
  border-color: var(--lime); color: var(--text);
}
.profile-chip.active, .uni-chip.active, .calc-chip.active{
  background: var(--lime); color: var(--noir);
  border-color: var(--lime); font-weight: 600;
}
.calc-reco{
  background: rgba(212,254,117,0.08);
  border-color: rgba(212,254,117,0.3);
}
.blurline{ color: var(--text-mute); }

/* Quiz */
.quiz-opt{ background: var(--surface-2); border-color: var(--border-strong); color: rgba(255,255,255,0.85); }
.quiz-opt:hover{ background: rgba(212,254,117,0.07); border-color: var(--lime); color: var(--text); }
.quiz-progress{ background: var(--surface-2); }
.quiz-warn{ background: rgba(232,196,104,0.08); border-color: rgba(232,196,104,0.35); }
.quiz-strat{ background: var(--surface-2); border-color: var(--border); }
.quiz-strat strong{ color: var(--lime); }
.path-step{ background: var(--surface); border-color: var(--border); }
.path-step.done .path-check{ background: var(--lime); border-color: var(--lime); color: var(--noir); }
.sim-step{ background: var(--surface-2); border-color: var(--border); }
.sim-when{ color: var(--lime); }
.sim-field-label output{ color: var(--lime); }
.sim-field input[type="range"]::-webkit-slider-thumb{ border-color: var(--noir); }
.bs-slider input[type="range"]::-webkit-slider-thumb{ border-color: var(--noir); }

/* B-Score simulateur (methode) */
.bs-demo{ background: var(--surface); border-color: var(--border); box-shadow: none; }
.bs-result{ background: var(--surface-2); border-color: var(--border); }
.bs-high{ color: var(--lime); }
.bs-band.bs-high{ background: rgba(212,254,117,0.14); }
.bs-solid{ color: #9fc0ff; }
.bs-band.bs-solid{ background: rgba(159,192,255,0.12); }

/* ---------- FAQ ---------- */
.faq-acc details, .faq-item{ background: var(--surface); border-color: var(--border); }
.faq-acc details[open], .faq-item[open]{ border-color: var(--lime); }
.faq-acc summary::after{ color: var(--lime); }
.faq-search input{
  background: var(--surface); border-color: var(--border-strong);
  color: var(--text); box-shadow: none;
}
.faq-search input:focus{ border-color: var(--lime); }

/* ---------- Page strategies ---------- */
.risk-low{ background: rgba(212,254,117,0.12); color: var(--lime); }
.risk-mid{ background: rgba(232,196,104,0.12); color: var(--accent-gold); }
.risk-high{ background: rgba(254,117,117,0.12); color: var(--danger); }
.strat-why summary{ color: var(--lime); }
.strat-why{ border-top-color: var(--border); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-col a{ color: var(--text-dim); }
.footer-col a:hover{ color: var(--lime); }
.footer-col h4{ color: var(--text); }
.disclaimer{ color: #6F7175; }
.to-top{ background: var(--lime); color: var(--noir); }

/* Bandeau cookies : deja sombre, harmonise les boutons */
#cookieBanner .btn-primary, .cookie-banner .btn-primary{ background: var(--lime); color: var(--noir); }

/* ============================================================
   Composants v4 specifiques (accueil restructure)
   ============================================================ */

/* Bandeau stats du hero — cartes independantes, fidele au template */
.statband{
  margin-top: 70px; position: relative;
  width: min(94vw, 1560px);
  margin-left: calc((100% - min(94vw, 1560px)) / 2);
}
.statband .float{
  display: flex; justify-content: center;
  margin-bottom: 48px;
}
.statband .float .btn{
  background: var(--lime); color: var(--noir);
  padding: 15px 30px; font-weight: 600; font-size: 1rem;
}
.statband-inner{
  display: grid;
  grid-template-columns: 1fr 250px 400px 250px 1fr;
  gap: 28px; align-items: stretch;
}
.stat-photo{
  background: linear-gradient(150deg, #2A2D31, #1A1C1E);
  background-size: cover; background-position: center;
  min-height: 360px; position: relative;
  border-radius: 24px;
}
.stat-photo-1{ background-image: url('../assets/photo-hero-1.jpg'); background-position: 82% center; }
.stat-photo-2{ background-image: url('../assets/photo-hero-2.jpg'); background-position: 35% center; }
.stat{
  background: var(--surface); padding: 40px 32px 110px;
  text-align: left; position: relative; overflow: hidden;
  border-radius: 24px;
}
.stat .lab{ color: #E6E7E8; font-size: 0.98rem; line-height: 1.5; margin-bottom: 16px; }
.stat .val{
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  color: var(--text); line-height: 1; white-space: nowrap;
}
.stat svg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; }

/* Trio */
.trio-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px 36px 32px;
  display: flex; flex-direction: column; min-height: 240px;
  text-align: left;
}
.trio-card h3{ font-size: 1.085rem; margin-bottom: 14px; }
.trio-card p{ color: var(--text-dim); font-size: 0.98rem; line-height: 1.6; flex: 1; margin: 0; }
.trio-card a{ margin-top: 20px; color: var(--lime); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.trio-card a:hover{ text-decoration: underline; }

/* Bande lime */
.limeband{ background: var(--lime); color: var(--noir); }
.limeband .section-head h2, .limeband h2{ color: var(--noir); }
.limeband .section-sub, .limeband .eyebrow{ color: #3D4419; }
.limeband .eyebrow::before{ background: var(--noir); }
.lime-panel{
  background: var(--noir); border-radius: 24px;
  padding: 44px; display: grid;
  grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  color: var(--text); text-align: left;
}
.lime-panel h3{ font-size: 1.19rem; margin-bottom: 16px; color: var(--text); }
.lime-panel > div > p{ color: var(--text-dim); line-height: 1.65; margin-bottom: 24px; }
.lime-panel .uni-chips{ justify-content: flex-start; }
.lime-panel .uni-preview{ margin-top: 0; }
.lime-panel .demo-card{ background: var(--surface); }

/* Confiance */
.confiance-checks{
  display: flex; flex-direction: column;
  max-width: 720px; margin: 48px auto 0; text-align: left;
}
.c-check{
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 4px; border-bottom: 1px solid var(--border);
}
.c-check:last-child{ border-bottom: none; }
.c-check .ic{
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(212,254,117,0.14); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; margin-top: 2px;
}
.c-check p{ color: #CFD0D2; font-size: 1rem; line-height: 1.6; margin: 0; }
.c-check strong{ color: var(--text); }

/* Bande claire (tarifs, faq) : rythme du template */
.band-light{ background: #FFFFFF; }
.band-light h1, .band-light h2, .band-light h3, .band-light summary{ color: var(--noir); }
.band-light .section-sub, .band-light .body-text, .band-light p{ color: #36383C; }
.band-light .eyebrow{ color: #5a6b1e; }
.band-light .plan-card, .band-light .explainer-box{
  background: #FFFFFF; border: 1px solid #E4E5E6; box-shadow: none;
}
.band-light .plan-card h2{ color: var(--noir); }
.band-light .plan-price{ color: var(--noir); }
.band-light .check-list li{ color: #36383C; }
.band-light .btn-outline{ color: var(--noir); border-color: #C9CACB; }
.band-light .btn-outline:hover{ border-color: var(--noir); color: var(--noir); }
.band-light .explainer-note{ color: #7C7E82; }
.band-light .faq-item, .band-light .faq-acc details{
  background: #FFFFFF; border-color: #E4E5E6;
}
.band-light .faq-item[open], .band-light .faq-acc details[open]{ border-color: var(--noir); }
.band-light .faq-item p, .band-light .faq-acc details p{ color: #36383C; }
.band-light .faq-item summary::after{ color: var(--noir); }
.band-light .faq-group-title{ color: var(--noir); }
.band-light .faq-search input{
  background: #FFFFFF; border-color: #C9CACB; color: var(--noir);
}
.band-light .price-calc{ background: #FFFFFF; border-color: #E4E5E6; }
.band-light .calc-chip{ background: #F4F5F6; border-color: #D5D6D7; color: #36383C; }
.band-light .calc-chip.active{ background: var(--noir); color: #FFFFFF; border-color: var(--noir); }
.band-light .calc-row{ color: #36383C; border-color: #E4E5E6; }
.band-light .calc-row strong{ color: var(--noir); }
.band-light .calc-reco{ background: rgba(212,254,117,0.25); border-color: rgba(90,107,30,0.3); color: #36383C; }
.band-light .filter-count{ color: #7C7E82; }
.band-light .offer-sub, .band-light .offer-sub a{ color: #36383C; }
.band-light .markets-teaser a{ color: #5a6b1e; }
.band-light .hero-checks li{ color: #36383C; }
.band-light .strat-disclaimer{ color: #7C7E82; }

@media (max-width: 1280px){
  .statband-inner{ grid-template-columns: 1fr 220px 340px 220px 1fr; gap: 20px; }
}
@media (max-width: 960px){
  .statband{ width: auto; margin-left: 0; }
  .statband-inner{ grid-template-columns: 1fr; }
  .stat-photo{ display: none; }
  .stat{ padding-bottom: 90px; }
  .trio-grid{ grid-template-columns: 1fr; }
  .lime-panel{ grid-template-columns: 1fr; padding: 30px 26px; }
}

/* ============================================================
   Application connectee (.app-body) : memes couleurs que le site
   Remplace le theme "Nuit raffinee" bleu/turquoise de app.css.
   ============================================================ */
.app-body{
  --bg: #131416;
  --bg-alt: #1A1C1E;
  --surface: #1A1C1E;
  --surface-2: #232528;
  --border: rgba(163,164,165,0.18);
  --border-strong: rgba(163,164,165,0.35);
  --text: #FFFFFF;
  --text-dim: #9EA0A3;
  --text-mute: #7C7E82;
  --accent: #D4FE75;
  --accent-2: #D4FE75;
  --accent-gold: #E8C468;
  --danger: #FE7575;
  --gradient: linear-gradient(135deg, #D4FE75, #D4FE75);
  --shadow: 0 20px 55px rgba(0,0,0,0.4);
}
.app-body .btn-primary{ color: var(--noir); box-shadow: none; }
.app-body .btn-primary:hover{ box-shadow: 0 10px 30px rgba(212,254,117,0.25); }
.app-body .app-header{ background: rgba(19,20,22,0.92); }

/* Teintes turquoise codees en dur dans app.css -> lime */
.app-body .badge-live{ background: rgba(212,254,117,0.15); color: var(--accent); }
.app-body .alert-success{ background: rgba(212,254,117,0.10); border-color: rgba(212,254,117,0.35); color: var(--accent); }
.app-body .plan-card-highlight{
  border-color: rgba(212,254,117,0.4);
  background: linear-gradient(160deg, rgba(212,254,117,0.08), var(--surface));
}
.app-body .market-pick:has(input:checked){
  border-color: var(--accent);
  background: rgba(212,254,117,0.08);
  color: var(--accent);
}
.app-body .checkout-step-done .checkout-step-dot{ color: var(--noir); }

/* ============================================================
   Hero v5 : split texte / photo (modele page About du template)
   ============================================================ */
.hero-v5{ padding: 90px 0 30px; }
.hero-split{
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 70px; align-items: center;
}
.hero-left{ text-align: left; }
.hero-kicker{
  color: var(--text); font-size: 1rem; font-weight: 500;
  margin-bottom: 28px;
}
.hero-left h1{
  font-size: clamp(1.68rem, 3.15vw, 2.66rem);
  line-height: 1.12; margin-bottom: 28px; text-align: left;
}
.hero-left .hero-text{
  margin: 0 0 36px; max-width: 540px;
  font-size: 1.05rem; line-height: 1.65; color: var(--text-dim);
  text-align: left;
}
.hero-left .hero-note{
  margin-top: 16px; font-size: 0.82rem;
  color: var(--text-mute); text-align: left;
}
.hero-photo{
  border-radius: 24px; min-height: 540px;
  background: url('../assets/photo-hero-main.jpg') center / cover no-repeat, #1A1C1E;
}
@media (max-width: 960px){
  .hero-v5{ padding-top: 50px; }
  .hero-split{ grid-template-columns: 1fr; gap: 40px; }
  .hero-photo{ min-height: 340px; }
}

/* ============================================================
   Rythme de bandes alternees (noir / lime / blanc / gris)
   comme la maquette Figma du template
   ============================================================ */

/* ---- Bande grise ---- */
.band-grey{ background: #DCDDDE; }
.band-grey .section-head h2, .band-grey .faq-group-title{ color: var(--noir); }
.band-grey .eyebrow{ color: #5a6b1e; }
.band-grey .section-head .section-sub, .band-grey .body-text{ color: #36383C; }
.band-grey .pull-quote{ color: #36383C; }
.band-grey .pull-quote strong{ color: var(--noir); }
.band-grey .markets-teaser{ color: #4a4c4f; }
.band-grey .markets-teaser a{ color: var(--noir); }
.band-grey .c-check{ border-color: rgba(19,20,22,0.15); }
.band-grey .c-check p{ color: #36383C; }
.band-grey .c-check strong{ color: var(--noir); }
.band-grey .text-gradient{ color: #5a6b1e !important; -webkit-text-fill-color: #5a6b1e; }

/* ---- Complements bande lime ---- */
.limeband .body-text, .limeband .markets-teaser{ color: #3D4419; }
.limeband .markets-teaser a{ color: var(--noir); }
.limeband .pull-quote{ color: #3D4419; }
.limeband .pull-quote strong{ color: var(--noir); }
.limeband .text-gradient{ color: var(--noir) !important; -webkit-text-fill-color: var(--noir); }
.limeband .hero-note-lg{ color: #3D4419; }
.limeband .hero-checks li{ color: #3D4419; }
.limeband .btn-primary{ background: var(--noir); color: #FFFFFF; }
.limeband .btn-primary:hover{ box-shadow: 0 10px 30px rgba(19,20,22,0.3); }
.limeband .lime-panel .btn-primary,
.limeband .pea-callout .btn-primary,
.limeband .quiz-card .btn-primary{ background: var(--lime); color: var(--noir); }
.limeband .btn-outline{ border-color: rgba(19,20,22,0.4); color: var(--noir); }
.limeband .btn-outline:hover{ border-color: var(--noir); color: var(--noir); }
.limeband .quiz-card h3{ color: var(--text); }
.limeband .explainer-note{ color: #57641f; }
.limeband .quiz-card .explainer-note{ color: var(--text-mute); }

/* ---- Complements bande claire : les cartes sombres restent sombres ---- */
.band-light .pull-quote{ color: #36383C; }
.band-light .pull-quote strong{ color: var(--noir); }
.band-light .text-gradient{ color: #5a6b1e !important; -webkit-text-fill-color: #5a6b1e; }
.band-light .lime-panel h3{ color: var(--text); }
.band-light .lime-panel > div > p{ color: var(--text-dim); }
.band-light .lime-panel .uni-label{ color: var(--text); }
.band-light .lime-panel .explainer-note{ color: var(--text-mute); }
.band-light .futures-card h3{ color: var(--text); }
.band-light .futures-card p{ color: var(--text-dim); }
.band-light .futures-card .strat-holdings{ color: var(--text-mute); }
.band-light .strat-why summary{ color: var(--lime); }
.band-light .strat-why p{ color: var(--text-dim); }
.band-light .statement-card p{ color: var(--text); }
.band-light .statement-card-alt h3{ color: var(--lime); }
.band-light .statement-card-alt p{ color: var(--text-dim); }
.band-light .path-step .path-txt{ color: var(--text-dim); }
.band-light .path-txt strong{ color: var(--text); }
.band-light .plan-locked p{ color: var(--text-dim); }
.band-light .strat-filter .uni-label{ color: var(--noir); }
.band-light .quiz-legal{ color: #7C7E82; }

/* Dans les cartes sombres posees sur bandes claires, l'accent reste lime */
.band-grey .statement-card .text-gradient,
.band-light .statement-card .text-gradient,
.band-grey .compare-after h3,
.band-light .lime-panel .text-gradient{
  color: var(--lime) !important;
  -webkit-text-fill-color: var(--lime);
}

/* Bandeau lime sous le hero (comme la page About du template) */
.lime-strip{ background: var(--lime); padding: 24px 0; }
.lime-strip-inner{
  display: flex; justify-content: center; align-items: center;
  gap: 18px 48px; flex-wrap: wrap;
}
.lime-strip-inner span{
  color: var(--noir); font-weight: 600; font-size: 0.98rem;
  white-space: nowrap;
}
@media (max-width: 720px){
  .lime-strip-inner{ flex-direction: column; gap: 10px; }
  .lime-strip-inner span{ white-space: normal; text-align: center; }
}

/* ============================================================
   Bande lime haute sous le hero : promesses + profil + CTA noir
   ============================================================ */
.lime-hero-strip{ padding: 48px 0 60px; }

.lime-checks{
  display: flex; justify-content: center; align-items: center;
  gap: 16px 56px; flex-wrap: wrap;
  margin-bottom: 44px;
}
.lime-checks span{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--noir); font-weight: 600; font-size: 1rem;
}
.lime-checks .ck{
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--noir); color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-style: normal; font-weight: 700;
}

.lime-hero-strip .profile-picker{ margin-top: 0; }
/* dans la carte sombre du profil, le bouton reste lime */
.limeband .profile-picker .btn-primary{ background: var(--lime); color: var(--noir); }

.lime-cta{ display: flex; justify-content: center; margin-top: 44px; }
/* le CTA sur fond lime est noir (regle .limeband .btn-primary) — rien a ajouter */

/* la bande stats n'a plus de bouton flottant : on resserre */
#stats .statband{ margin-top: 0; }

@media (max-width: 720px){
  .lime-checks{ flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Statut de marche dans le panneau de cloture (portefeuille) */
.pf-mkt{ font-size: 0.8rem; font-weight: 600; margin: 0 0 10px; }
.pf-mkt-open{ color: var(--lime); }
.pf-mkt-closed{ color: var(--danger); }

/* ===== Graphique detaille des fiches valeurs ===== */
.fchart{ position: relative; margin-top: 6px; }
.fchart-toolbar{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 20px; margin-bottom: 10px;
}
.fchart-periods{ display: flex; gap: 6px; }
.fchart-periods button{
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--ff-body); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.fchart-periods button:hover{ border-color: var(--lime); color: var(--text); }
.fchart-periods button.on{ background: var(--lime); color: var(--noir); border-color: var(--lime); }
.fchart-stats{ display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-mute); }
.fchart-stats strong{ color: var(--text); font-weight: 600; margin-left: 4px; }
.fchart-stats .is-up{ color: var(--accent); }
.fchart-stats .is-down{ color: var(--danger); }
.fchart-wrap{ position: relative; }
.fchart-svg{ width: 100%; height: auto; display: block; cursor: crosshair; }
.fchart-grid{ stroke: rgba(163,164,165,0.12); stroke-width: 1; }
.fchart-ylab{ fill: var(--text-mute); font-size: 10px; font-family: var(--ff-body); }
.fchart-xlab{ fill: var(--text-mute); font-size: 9.5px; font-family: var(--ff-body); }
.fchart-mark{ fill: var(--text-dim); font-size: 9.5px; font-family: var(--ff-body); }
.fchart-cross{ stroke: rgba(255,255,255,0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.fchart-tip{
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 12px;
  font-size: 0.85rem; color: var(--text); white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.fchart-tip small{ display: block; color: var(--text-mute); font-size: 0.75rem; margin-top: 2px; }
.fchart-tip .is-up{ color: var(--accent); }
.fchart-tip .is-down{ color: var(--danger); }

/* ===== Portefeuilles personnels : onglets + gestion ===== */
.pfolio-bar{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 22px; }
.pfolio-tab{
  display: inline-block; padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--ff-body); font-size: 0.9rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: all .15s ease;
}
.pfolio-tab:hover{ border-color: var(--lime); color: var(--text); }
.pfolio-tab.on{ background: var(--lime); color: var(--noir); border-color: var(--lime); }
.pfolio-tab-new{ border-style: dashed; }
.pfolio-newbox{ position: relative; }
.pfolio-newbox summary{ list-style: none; }
.pfolio-newbox summary::-webkit-details-marker{ display: none; }
.pfolio-pop{
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  display: flex; gap: 8px; padding: 14px; box-sizing: border-box;
  max-width: calc(100vw - 32px);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
/* Onglets « Nouveau » / « Gérer » (à droite de la barre) : le popup s'ouvre vers la
   gauche pour rester dans l'écran. */
.pfolio-newbox .pfolio-pop{ left: auto; right: 0; }
.pfolio-pop-col{ flex-direction: column; align-items: stretch; width: 240px; max-width: calc(100vw - 32px); }
.pfolio-pop input[type=text]{
  padding: 9px 12px; border-radius: 8px; min-width: 200px; font-size: 0.8em;
  border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text); font-family: var(--ff-body);
}
.pfolio-pop-col input[type=text], .pfolio-pop-col select{ min-width: 0; width: 100%; box-sizing: border-box; }
.pf-subhead{ margin: 26px 0 10px; font-size: 0.735rem; color: var(--text); }
.pfolio-pop select{
  padding: 9px 12px; border-radius: 8px; min-width: 200px; font-size: 0.8em;
  border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text); font-family: var(--ff-body);
}

/* ===== Page d'offre : badges de sélection + tableau comparatif ===== */
.market-pick-owned{ border-color: var(--lime) !important; opacity: .82; cursor: default; }
.pick-badge{
  display: block; font-family: var(--ff-body); font-weight: 500;
  font-size: .72rem; color: var(--lime); margin-top: 5px;
}
.pick-badge-sel{ color: #7fb2ff; }
.pick-badge[hidden]{ display: none; }
.offer-compare table{ width: 100%; border-collapse: collapse; margin: 0 0 28px; }
.offer-compare th, .offer-compare td{
  padding: 11px 14px; border: 1px solid var(--border-strong);
  text-align: left; font-size: .92rem;
}
.offer-compare th{ background: var(--surface-2); font-family: var(--ff-body); }
.offer-compare td:first-child{ color: var(--text-mute); }
.offer-compare td:last-child{ color: var(--text); }

/* ===== Page d'offre v2 : abonnement actuel, cartes enrichies, apercu, commande, recap ===== */
.cur-sub{ text-align: left; margin-bottom: 22px; }
.cur-sub-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.cur-sub-price{ color: var(--lime); font-size: 1.05rem; white-space: nowrap; }
.cur-sub-row{ margin: 0 0 8px; font-size: .92rem; color: var(--text-mute); }
.cur-sub-row strong{ color: var(--text); }
.cur-sub-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cur-sub-chip{
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); font-size: .8rem;
  color: var(--text); text-decoration: none;
}
.cur-sub-chip:hover{ border-color: var(--lime); }
.cur-sub-feats{ margin-bottom: 0; font-size: .82rem; }

.market-picker-rich .market-pick{ text-align: left; align-items: flex-start; }
.pick-name{ display: block; font-weight: 700; }
.pick-goal{ display: block; font-family: var(--ff-body); font-weight: 400; font-size: .78rem; color: var(--text-mute); margin-top: 4px; line-height: 1.35; }
.pick-kpis{ display: block; font-family: var(--ff-body); font-weight: 500; font-size: .76rem; color: var(--text-mute); margin-top: 6px; }

.prev-win{ border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.prev-bar{
  display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  border-bottom: 1px solid var(--border-strong); font-size: .74rem; color: var(--text-mute);
}
.prev-bar span{ width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.prev-bar em{ font-style: normal; margin-left: 8px; }
.prev-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.prev-card{ background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; }
.prev-card small{ display: block; color: var(--text-mute); font-size: .74rem; margin-bottom: 6px; }
.prev-card p{ margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text); }
.prev-main strong{ display: block; font-size: 1.35rem; }
.prev-main svg{ display: block; width: 100%; height: 40px; margin-top: 8px; }
.prev-alloc{ position: relative; margin: 0 0 7px; height: 18px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.prev-alloc i{ position: absolute; inset: 0 auto 0 0; background: rgba(0,224,161,.25); border-radius: 5px; }
.prev-alloc b{ position: relative; font-size: .7rem; font-weight: 500; padding-left: 7px; line-height: 18px; color: var(--text); }
@media (max-width: 640px){ .prev-grid{ grid-template-columns: 1fr; } }

.order-day{ text-align: left; }
.order-includes{ margin: 0 0 12px; font-size: .8rem; color: var(--text-mute); }
.order-lines p{
  display: flex; justify-content: space-between; gap: 14px; margin: 0;
  padding: 9px 0; border-top: 1px solid var(--border-strong); font-size: .92rem;
}
.order-lines p span{ color: var(--text-mute); }
.order-lines p small{ font-size: .78rem; }
.order-today strong{ color: var(--lime); font-size: 1.05rem; }

.recap-flow{ margin: 18px 0 20px; text-align: center; }
.recap-step{
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 14px;
  font-size: .9rem; text-align: left;
}
.recap-step span{ color: var(--text-mute); }
.recap-step-pay{ border-color: var(--lime); }
.recap-step-pay strong{ color: var(--lime); }
.recap-arrow{ color: var(--text-mute); line-height: 1.4; }

.benefit-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 26px; }
.benefit-col{ border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px 18px; }
.benefit-col h3{ margin: 0 0 10px; font-size: 0.7rem; }
.benefit-col ul{ list-style: none; margin: 0; padding: 0; }
.benefit-col li{ padding: 5px 0; font-size: .9rem; color: var(--text-mute); }
.benefit-bad h3{ color: var(--text-mute); }
.benefit-good{ border-color: var(--lime); }
.benefit-good h3{ color: var(--lime); }
.benefit-good li{ color: var(--text); }
@media (max-width: 640px){ .benefit-grid{ grid-template-columns: 1fr; } }

.offer-quote{
  text-align: center; margin: 0 0 30px; padding: 18px 22px;
  border-left: 3px solid var(--lime); background: var(--surface-2);
  border-radius: 0 12px 12px 0; font-size: .98rem; line-height: 1.6;
}

/* ===== Idees : barre de tri/filtres + verrous Premium ===== */
.idees-toolbar{
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2);
}
.idees-ctl{ display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--text-mute); }
.idees-ctl select{
  padding: 7px 10px; border-radius: 8px; max-width: 240px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text); font-family: var(--ff-body); font-size: .84rem;
}
.idees-check{
  display: flex; align-items: center; gap: 6px; font-size: .84rem;
  color: var(--text); padding-bottom: 8px; cursor: pointer; white-space: nowrap;
}
.idees-lockbtn{
  padding: 7px 12px; border-radius: 8px; border: 1px dashed var(--border-strong);
  background: transparent; color: var(--text-mute); font-family: var(--ff-body);
  font-size: .82rem; cursor: pointer; margin-bottom: 2px;
}
.idees-lockbtn:hover{ border-color: var(--lime); color: var(--text); }
.premium-banner{
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 16px; border: 1px solid var(--lime);
  border-radius: 10px; background: rgba(0,224,161,.06); font-size: .9rem;
}
.idees-count{ margin: 4px 0 12px; font-size: .88rem; color: var(--text-mute); }
.idees-count strong{ color: var(--text); }
.idee-score-free .idee-score-stars{ display: block; font-size: 1.05rem; letter-spacing: 1px; color: var(--lime); }
.idee-score-free .idee-score-label, .idee-score-visitor .idee-score-label{ font-size: .62rem; color: var(--text-mute); }
.idee-score-visitor .idee-score-lock{ display: block; font-size: 1.2rem; }
.idee-locked-factors{
  margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--border-strong);
  border-radius: 8px; font-size: .74rem; color: var(--text-mute); line-height: 1.45;
}
.idees-teaser{
  margin: 26px auto 0; max-width: 560px; text-align: center;
  padding: 22px 24px; border: 1px solid var(--lime); border-radius: 14px;
  background: rgba(0,224,161,.05);
}
.idees-teaser-big{ margin: 0 0 6px; font-family: var(--ff-head, inherit); font-weight: 700; font-size: 1.05rem; }
.idees-teaser-sub{ margin: 0 0 14px; font-size: .9rem; color: var(--text-mute); }

/* ===== Fiche : elements verrouilles (comptes gratuits) ===== */
.fiche-score-free{ text-align: center; }
.fiche-score-free .fiche-score-stars{ display: block; font-size: 1.25rem; letter-spacing: 2px; color: var(--lime); }
.fiche-score-free .fiche-score-lab{ font-size: .68rem; color: var(--text-mute); }
.fiche-lock{ text-align: center; padding: 22px 16px; }
.fiche-lock-big{ margin: 0 0 8px; font-weight: 700; }
.fiche-lock-sub{ margin: 0 0 14px; font-size: .88rem; color: var(--text-mute); line-height: 1.5; }

/* ============================================================
   Hero v6 (accueil) : panneau sombre, maquette produit, stats
   ============================================================ */
.hero6{
  --hl: #b6f23e;
  background:
    linear-gradient(90deg, rgba(11,19,34,.70) 0%, rgba(11,19,34,.40) 35%, rgba(11,19,34,0) 60%),
    url('../assets/hero-dashboard.jpg?v=2') center calc(50% + 100px) / cover no-repeat,
    #0b1322;
  color: #e8eef7;
  padding: 64px 0 46px;
}
.hero6-split{ display: block; }
.hero6-left{ max-width: 600px; position: relative; z-index: 1; }
.hero6-h1{ font-size: clamp(1.68rem, 3.22vw, 2.73rem); line-height: 1.08; margin: 0 0 18px; color: #fff; text-align: left; }
.hero6-hl{ color: var(--hl); }
.hero6-sub{ font-family: var(--ff-head); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.4; margin: 0 0 22px; color: #fff; }
.hero6-text{ max-width: 470px; margin: 0 0 16px; font-size: .96rem; line-height: 1.65; color: #9fb0c4; }
.hero6-text strong{ color: #dfe8f4; }
.hero6-points{ list-style: none; margin: 8px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hero6-points li{ display: flex; align-items: center; gap: 13px; font-size: .93rem; color: #c6d2e2; line-height: 1.4; }
.hero6-points strong{ color: #fff; }
.hero6-ico{
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(182,242,62,.55); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: rgba(182,242,62,.06);
}
.hero6-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.hero6-btn{
  display: inline-block; padding: 13px 26px; border-radius: 10px;
  background: var(--hl); color: #0b1322; font-weight: 700; font-family: var(--ff-head);
  font-size: .95rem; transition: transform .15s ease;
}
.hero6-btn:hover{ transform: translateY(-2px); }
.hero6-btn-ghost{
  display: inline-block; padding: 12px 26px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; font-family: var(--ff-head);
  font-size: .95rem; transition: border-color .15s ease, color .15s ease;
}
.hero6-btn-ghost:hover{ border-color: var(--hl); color: var(--hl); }
.hero6-note{ margin: 0; font-size: .82rem; color: #8fa0b5; }
.hero6-note .hero6-hl{ font-weight: 600; }

/* Maquette produit (ordinateur + telephone) */
.hero6-right{ position: relative; }
.hero6-app{
  border: 1px solid rgba(255,255,255,.10); border-radius: 16px; overflow: hidden;
  background: #0f1a2c; box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.hero6-app-bar{
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: .82rem; font-weight: 600; color: #fff;
}
.hero6-app-bar em{ font-style: normal; margin-left: auto; font-weight: 400; color: #8fa0b5; font-size: .76rem; }
.hero6-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--hl); }
.hero6-app-body{ padding: 16px 18px 18px; }
.hero6-val{ font-family: var(--ff-head); font-weight: 800; font-size: 1.6rem; color: #fff; }
.hero6-val b{ font-size: .85rem; color: var(--hl); font-weight: 600; margin-left: 6px; }
.hero6-app-body svg{ width: 100%; height: 78px; margin: 10px 0 12px; }
.hero6-app-lab{ margin: 0 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8fa0b5; }
.hero6-rows{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.hero6-rows div{
  display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,.04); font-size: .82rem; color: #c6d2e2;
}
.hero6-rows b{ color: var(--hl); font-weight: 600; }
.hero6-cop{
  padding: 10px 12px; border-radius: 8px; border: 1px dashed rgba(182,242,62,.35);
  font-size: .78rem; color: #9fb0c4; line-height: 1.45;
}
.hero6-cop strong{ color: #fff; }
.hero6-phone{
  position: absolute; right: -8px; bottom: -26px; width: 205px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px;
  background: #101c30; box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
.hero6-phone small{ display: block; font-size: .68rem; color: #8fa0b5; margin-bottom: 6px; }
.hero6-phone-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hero6-phone-head b{ color: #fff; font-size: .95rem; }
.hero6-score{ font-family: var(--ff-head); font-weight: 800; color: var(--hl); font-size: 1.15rem; }
.hero6-score i{ font-style: normal; font-size: .65rem; color: #8fa0b5; }
.hero6-fbar{ display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.hero6-fbar span{ flex: none; width: 72px; font-size: .66rem; color: #8fa0b5; }
.hero6-fbar i{ height: 5px; border-radius: 3px; background: var(--hl); opacity: .85; }

/* Bande de statistiques */
.hero6-stats{
  margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #0f1a2c;
  padding: 18.5px 26px;
}
.hero6-stat{ display: flex; gap: 14px; align-items: flex-start; }
.hero6-stat > div{ font-size: .86rem; color: #c6d2e2; line-height: 1.45; }
.hero6-stat b{ font-family: var(--ff-head); font-weight: 800; font-size: 1.25rem; color: #fff; margin-right: 6px; }
.hero6-stat strong{ color: #fff; font-size: .95rem; }
.hero6-stat small{ display: block; font-size: .78rem; color: #8fa0b5; margin-top: 3px; }

@media (max-width: 960px){
  .hero6{
    padding-top: 54px;
    background:
      linear-gradient(rgba(11,19,34,.82), rgba(11,19,34,.82)),
      url('../assets/hero-dashboard.jpg?v=2') center calc(50% + 100px) / cover no-repeat,
      #0b1322;
  }
  .hero6-stats{ grid-template-columns: 1fr; }
}

/* ============================================================
   Section 2 accueil : Les Strategies Baziloo (vitrine)
   ============================================================ */
.strat2{
  --hl: #b6f23e;
  background: #0b1322;
  color: #e8eef7;
  padding: 76px 0 84px;
}
.strat2-split{ display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; }
/* Permutation : carte a gauche, texte a droite */
.strat2-card{ order: 1; }
.strat2-left{ order: 2; }
.strat2-eyebrow{ margin: 0 0 14px; color: var(--hl); font-weight: 600; font-size: .92rem; }
.strat2-h2{ font-size: clamp(1.19rem, 2.24vw, 1.75rem); line-height: 1.18; margin: 0 0 18px; color: #fff; }
.strat2-text{ margin: 0 0 26px; max-width: 480px; font-size: .96rem; line-height: 1.65; color: #9fb0c4; }
.strat2-points{ margin-bottom: 30px; }
.strat2-points li{ align-items: flex-start; }
.strat2-points strong{ display: inline-block; margin-bottom: 2px; }

.strat2-card{
  border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
  background: #0f1a2c; padding: 22px 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.strat2-head{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.strat2-ico{
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(182,242,62,.10); border: 1px solid rgba(182,242,62,.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.strat2-id h3{ margin: 0 0 3px; font-size: 0.77rem; color: #fff; }
.strat2-id p{ margin: 0; font-size: .8rem; color: #8fa0b5; line-height: 1.4; }
.strat2-badge{
  margin-left: auto; flex: none; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  font-size: .74rem; color: var(--hl); white-space: nowrap;
}
.strat2-kpis{ display: flex; gap: 46px; margin: 0 0 10px; }
.strat2-kpis b{ display: block; font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem; color: var(--hl); }
.strat2-kpis small{ font-size: .74rem; color: #8fa0b5; }
.strat2-chart{ width: 100%; height: 120px; display: block; }
.strat2-axis{ display: flex; justify-content: space-between; margin: 4px 0 14px; font-size: .68rem; color: #6f7f95; }
.strat2-facts{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px;
  text-align: center;
}
.strat2-facts b{ display: block; font-size: .95rem; color: #fff; }
.strat2-facts small{ font-size: .72rem; color: #8fa0b5; }
.strat2-top-head{
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
  font-size: .84rem; font-weight: 600; color: #fff;
}
.strat2-top-head a{ font-size: .78rem; font-weight: 500; color: var(--hl); }
.strat2-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: .84rem;
}
.strat2-row b{ font-weight: 600; color: #e8eef7; }
.strat2-row span{ color: #8fa0b5; font-size: .78rem; }
.strat2-more b{ color: #9fb0c4; font-weight: 500; }
.strat2-note{ margin: 12px 0 0; font-size: .68rem; color: #6f7f95; line-height: 1.45; }

@media (max-width: 960px){
  .strat2-split{ grid-template-columns: 1fr; gap: 40px; }
  .strat2-left{ order: 1; }
  .strat2-card{ order: 2; }
  .strat2-kpis{ gap: 30px; }
}

/* ============================================================
   Section 3 accueil : Vos portefeuilles (vitrine)
   ============================================================ */
.pf3{
  --hl: #b6f23e;
  background: #0a1120;
  color: #e8eef7;
  padding: 76px 0 84px;
}
.pf3-split{ display: grid; grid-template-columns: 1.14fr 0.86fr; gap: 60px; align-items: center; }
.pf3-card{ order: 1; }
.pf3-left{ order: 2; }
.pf3-eyebrow{ margin: 0 0 14px; color: var(--hl); font-weight: 600; font-size: .92rem; }
.pf3-h2{ font-size: clamp(1.19rem, 2.24vw, 1.75rem); line-height: 1.18; margin: 0 0 18px; color: #fff; }
.pf3-text{ margin: 0 0 26px; max-width: 460px; font-size: .96rem; line-height: 1.65; color: #9fb0c4; }
.pf3-points{ margin-bottom: 30px; }
.pf3-points li{ align-items: flex-start; }
.pf3-points strong{ display: inline-block; margin-bottom: 2px; }

.pf3-card{
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
  background: #0f1a2c; padding: 22px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.pf3-card-head{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.pf3-card-title{ margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: #fff; }
.pf3-card-lab{ margin: 0; font-size: .74rem; color: #8fa0b5; }
.pf3-card-val{ margin: 2px 0 0; font-family: var(--ff-head); font-weight: 800; font-size: 1.7rem; color: #fff; }
.pf3-card-val b{ font-size: .85rem; color: var(--hl); font-weight: 600; margin-left: 6px; }
.pf3-tabs{ display: flex; gap: 4px; }
.pf3-tabs span{
  padding: 4px 10px; border-radius: 7px; font-size: .72rem; color: #8fa0b5;
  border: 1px solid transparent;
}
.pf3-tabs span.on{ background: rgba(182,242,62,.12); color: var(--hl); border-color: rgba(182,242,62,.3); }
.pf3-chart{ width: 100%; height: 140px; display: block; margin-top: 6px; }
.pf3-axis{ display: flex; justify-content: space-between; margin: 4px 0 18px; font-size: .68rem; color: #6f7f95; }

.pf3-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pf3-mini{
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 16px;
}
.pf3-mini-title{ margin: 0 0 12px; font-size: .84rem; font-weight: 600; color: #fff; }
.pf3-donut-row{ display: flex; align-items: center; gap: 16px; }
.pf3-donut{
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(#b6f23e 0 36%, #35c9a0 36% 64%, #6ea8ff 64% 84%, #f2a33e 84% 100%);
  position: relative;
}
.pf3-donut::after{
  content: ""; position: absolute; inset: 26%; border-radius: 50%; background: #0f1a2c;
}
.pf3-legend{ list-style: none; margin: 0; padding: 0; flex: 1; }
.pf3-legend li{ display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: .76rem; color: #c6d2e2; }
.pf3-legend i{ width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pf3-legend b{ margin-left: auto; font-weight: 600; color: #fff; }
.pf3-bars div{ display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: .76rem; color: #c6d2e2; }
.pf3-bars span{ flex: none; width: 92px; }
.pf3-bars i{ height: 6px; border-radius: 3px; background: var(--hl); opacity: .85; min-width: 6px; }
.pf3-bars b{ margin-left: auto; font-weight: 600; color: #fff; }

.pf3-perf{ border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.pf3-perf-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pf3-perf-row div{ display: flex; flex-direction: column; gap: 3px; }
.pf3-perf-row small{ font-size: .72rem; color: #8fa0b5; }
.pf3-perf-row b{ font-family: var(--ff-head); font-weight: 800; font-size: 1.2rem; color: var(--hl); }
.pf3-perf-row .pf3-soon{ color: #6f7f95; }
.pf3-perf-row em{ font-style: normal; font-size: .62rem; color: #6f7f95; }

@media (max-width: 960px){
  .pf3-split{ grid-template-columns: 1fr; gap: 40px; }
  .pf3-left{ order: 1; }
  .pf3-card{ order: 2; }
  .pf3-grid2{ grid-template-columns: 1fr; }
  .pf3-perf-row{ grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Section 4 accueil : Le Copilote Baziloo (vitrine)
   ============================================================ */
.cop4{
  --hl: #b6f23e;
  background: #0b1322;
  color: #e8eef7;
  padding: 76px 0 84px;
}
.cop4-split{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.cop4-eyebrow{ margin: 0 0 14px; color: var(--hl); font-weight: 600; font-size: .92rem; }
.cop4-h2{ font-size: clamp(1.19rem, 2.24vw, 1.75rem); line-height: 1.18; margin: 0 0 18px; color: #fff; }
.cop4-text{ margin: 0 0 26px; max-width: 460px; font-size: .96rem; line-height: 1.65; color: #9fb0c4; }
.cop4-points{ margin-bottom: 30px; }
.cop4-points li{ align-items: flex-start; }
.cop4-points strong{ display: inline-block; margin-bottom: 2px; }

/* Scene : carte + mascotte robot (a droite, legerement par-dessus la carte) */
.cop4-stage{ display: flex; align-items: center; }
.cop4-card{
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
  background: #0f1a2c; padding: 22px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
  flex: 1 1 auto; min-width: 0; position: relative; z-index: 1;
}
.cop4-robot{
  flex: none; width: 200px; align-self: flex-end; margin: 0 0 -6px -46px;
  position: relative; z-index: 2;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
}
.cop4-card-title{ margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: #fff; }
.cop4-hello{ margin: 0 0 16px; font-size: .88rem; line-height: 1.5; color: #c6d2e2; }
.cop4-tabs{ display: flex; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 16px; }
.cop4-tabs span{ padding-bottom: 10px; font-size: .84rem; color: #8fa0b5; position: relative; }
.cop4-tabs span.on{ color: var(--hl); }
.cop4-tabs span.on::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hl);
}
.cop4-reco{
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 14px; margin-bottom: 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02);
}
.cop4-reco-ico{
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.cop4-reco-a .cop4-reco-ico{ background: rgba(53,201,160,.12); border: 1px solid rgba(53,201,160,.35); }
.cop4-reco-b .cop4-reco-ico{ background: rgba(182,242,62,.10); border: 1px solid rgba(182,242,62,.35); }
.cop4-reco-c .cop4-reco-ico{ background: rgba(254,117,117,.10); border: 1px solid rgba(254,117,117,.35); }
.cop4-reco b{ display: block; margin-bottom: 4px; font-size: .9rem; color: #fff; }
.cop4-reco p{ margin: 0; font-size: .8rem; line-height: 1.5; color: #9fb0c4; }
.cop4-cta-row{
  margin-top: 14px; padding: 12px; text-align: center; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); font-size: .86rem; font-weight: 600; color: #e8eef7;
}

@media (max-width: 960px){
  .cop4-split{ grid-template-columns: 1fr; gap: 40px; }
  .cop4-robot{ display: none; }
}

/* ============================================================
   Section 5 accueil : Idees d'investissement (vitrine)
   ============================================================ */
.idea5{
  --hl: #b6f23e;
  background: #0a1120;
  color: #e8eef7;
  padding: 76px 0 84px;
}
.idea5-split{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.idea5-eyebrow{ margin: 0 0 14px; color: var(--hl); font-weight: 600; font-size: .92rem; }
.idea5-h2{ font-size: clamp(1.19rem, 2.24vw, 1.75rem); line-height: 1.18; margin: 0 0 18px; color: #fff; }
.idea5-text{ margin: 0 0 26px; max-width: 460px; font-size: .96rem; line-height: 1.65; color: #9fb0c4; }
.idea5-points{ margin-bottom: 30px; }
.idea5-points li{ align-items: flex-start; }
.idea5-points strong{ display: inline-block; margin-bottom: 2px; }

.idea5-card{
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
  background: #0f1a2c; padding: 20px 22px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.idea5-card-head{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.idea5-card-title{ margin: 0; font-size: 1rem; font-weight: 600; color: #fff; }
.idea5-filters{ display: flex; gap: 8px; flex-wrap: wrap; }
.idea5-filters span{
  padding: 5px 10px; border-radius: 8px; font-size: .72rem; color: #8fa0b5;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02);
}
.idea5-filters .idea5-filt-btn{ color: var(--hl); border-color: rgba(182,242,62,.3); background: rgba(182,242,62,.10); }
.idea5-table{ width: 100%; border-collapse: collapse; font-size: .82rem; }
.idea5-table th{
  text-align: left; padding: 8px 10px; font-size: .7rem; font-weight: 600; color: #8fa0b5;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid rgba(255,255,255,.08);
}
.idea5-table td{ padding: 11px 10px; color: #c6d2e2; border-bottom: 1px solid rgba(255,255,255,.05); }
.idea5-table tbody tr:last-child td{ border-bottom: none; }
.idea5-table b{ color: #fff; font-weight: 600; }
.bscore{ display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.bscore-hi{ background: rgba(53,201,160,.14); color: #6fe3c0; border: 1px solid rgba(53,201,160,.35); }
.bscore-ok{ background: rgba(182,242,62,.10); color: #cdf06a; border: 1px solid rgba(182,242,62,.30); }
.idea5-star{ color: var(--hl); font-size: 1rem; text-align: center; }
.idea5-more{ display: inline-block; margin-top: 14px; color: var(--hl); font-size: .84rem; font-weight: 600; text-decoration: none; }
.idea5-note{ margin: 12px 0 0; font-size: .7rem; line-height: 1.5; color: #6f7f95; }

/* ============================================================
   Section 6 accueil : Notre methode (vitrine)
   ============================================================ */
.meth6{
  --hl: #b6f23e;
  background: #0b1322;
  color: #e8eef7;
  padding: 76px 0 84px;
}
.meth6-split{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.meth6-eyebrow{ margin: 0 0 14px; color: var(--hl); font-weight: 600; font-size: .92rem; }
.meth6-h2{ font-size: clamp(1.19rem, 2.24vw, 1.75rem); line-height: 1.18; margin: 0 0 18px; color: #fff; }
.meth6-text{ margin: 0 0 24px; max-width: 460px; font-size: .96rem; line-height: 1.65; color: #9fb0c4; }
.meth6-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.meth6-tags span{
  padding: 6px 13px; border-radius: 20px; font-size: .78rem; color: #c6d2e2;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.meth6-card{
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
  background: #0f1a2c; padding: 24px 26px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.meth6-card-title{ margin: 0 0 20px; font-size: 1rem; font-weight: 600; color: #fff; }
.meth6-steps{ list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.meth6-steps li{
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02);
}
.meth6-num{
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; color: #0b1322; background: var(--hl);
}
.meth6-ico{ font-size: 1.3rem; line-height: 1; }
.meth6-steps b{ font-size: .8rem; font-weight: 600; color: #fff; line-height: 1.3; }
.meth6-foot{ margin: 0; font-size: .78rem; line-height: 1.55; color: #8fa0b5; border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; }

/* ============================================================
   Section 7 accueil : CTA final (bande)
   ============================================================ */
.cta7{
  --hl: #b6f23e;
  background: #0a1120;
  color: #e8eef7;
  padding: 72px 0 88px;
}
.cta7-split{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.cta7-h2{ font-size: clamp(1.12rem, 2.1vw, 1.61rem); line-height: 1.2; margin: 0 0 30px; color: #fff; }
.cta7-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cta7-stats div{ display: flex; flex-direction: column; gap: 4px; }
.cta7-stats b{ font-family: var(--ff-head); font-weight: 800; font-size: 1.8rem; color: var(--hl); }
.cta7-stats small{ font-size: .78rem; line-height: 1.4; color: #9fb0c4; }
.cta7-card{
  border: 1px solid rgba(182,242,62,.25); border-radius: 18px;
  background: linear-gradient(160deg, #0f1a2c, #0c1626); padding: 30px 30px 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4); text-align: center;
}
.cta7-card-title{ margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; color: #fff; }
.cta7-card-text{ margin: 0 0 22px; font-size: .9rem; line-height: 1.55; color: #9fb0c4; }
.cta7-btn{
  display: inline-block; padding: 13px 30px; border-radius: 10px; font-weight: 700; font-size: .95rem;
  color: #0b1322; background: var(--hl); text-decoration: none; box-shadow: 0 10px 30px rgba(182,242,62,.25);
}
.cta7-btn:hover{ filter: brightness(1.05); }
.cta7-card-note{ margin: 16px 0 0; font-size: .76rem; color: #8fa0b5; }

@media (max-width: 960px){
  .idea5-split, .meth6-split, .cta7-split{ grid-template-columns: 1fr; gap: 40px; }
  .meth6-steps{ grid-template-columns: repeat(2, 1fr); }
  .cta7-stats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .idea5-table th:nth-child(2), .idea5-table td:nth-child(2){ display: none; }
}

/* ============================================================
   Footer accueil : aux couleurs des blocs (navy) + nav 2 colonnes
   (surcharge homepage uniquement, theme-v4.css charge apres style.css)
   ============================================================ */
.site-footer{
  --hl: #b6f23e;
  background: #080e1a;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 50px;
  color: #9fb0c4;
}
.site-footer .footer-inner{
  grid-template-columns: 1.3fr 1.3fr 1fr;
  gap: 40px; padding-bottom: 36px; align-items: start;
}
.site-footer .logo{ color: #fff; }
.site-footer .footer-brand p{ color: #8fa0b5; }
.site-footer .footer-col h4{ color: var(--hl); margin-bottom: 14px; }
.site-footer .footer-col a{ color: #9fb0c4; margin-bottom: 8px; }
.site-footer .footer-col a:hover{ color: var(--hl); }
.footer-col-nav .footer-links2{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.footer-col-nav .footer-links2 a{ margin-bottom: 8px; }
.site-footer .disclaimer{
  color: #6f7f95; border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0 16px;
}
.site-footer .copyright{ color: #6f7f95; padding-bottom: 26px; }

@media (max-width: 720px){
  .footer-col-nav .footer-links2{ grid-template-columns: 1fr 1fr; }
}