/* =========================================================
   BankyBoard – /include/style.css
   - Structure originale conservée
   - Ajout des styles optimisés conversion (section V2)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --blue:#063866; --blue-600:#052e52; --dark-blue:#03233d;
  --accent:#B45309; --accent-hover:#8F3D07;

  --bg:#ffffff; --bg-soft:#f6f8fa; --surface:#ffffff;
  --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;

  --success-bg:#ecfdf5; --success-border:#10b981; --success-text:#065f46;
  --warn-bg:#fef9c3; --warn-border:#f59e0b; --warn-text:#92400e;
  --error-bg:#fee2e2; --error-border:#dc2626; --error-text:#7f1d1d;

  --shadow:0 2px 8px rgba(0,0,0,.06);

  /* Sidebar */
  --sidebar-w:260px;

  /* Thème bb- (menus / auth) */
  --bb-blue:#063866; --bb-blue-600:#0A4A88; --bb-blue-700:#0E5AA4;
  --bb-text-on-blue:#fff; --bb-text-dim:#e8eef6; --bb-border:rgba(255,255,255,.12);
  --bb-bg:#f6f8fb; --bb-white:#fff;

  /* Variables conversion page */
  --primary:#0066FF;
  --primary-dark:#0052CC;
  --primary-light:#E6F0FF;
  --success:#00C853;
  --warning:#FFB800;
  --error:#FF3D00;
  --text-primary:#0A1929;
  --text-secondary:#4A5568;
  --text-muted:#718096;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'Inter', Tahoma, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ margin:0 0 .4rem; line-height:1.2; }
p{ margin:.5rem 0; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid rgba(6,56,102,.35); outline-offset:2px; }

/* ---------- Layout helpers ---------- */
.container{ width:min(1100px,92%); margin:16px auto; padding:0 16px; }
.grid-3{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); padding:16px;
}
.pill{ display:inline-flex; align-items:center; gap:6px; background:#f3f4f6; border:1px solid var(--border);
  color:#111827; border-radius:999px; padding:6px 10px; font-size:12px; }
.muted{ color:var(--muted); } .text-right{ text-align:right; }
.mb16{ margin-bottom:16px; } .big{ font-size:2rem; font-weight:700; }
.meta-row{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 18px; }

/* ---------- Boutons (base) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 16px; font-weight:600; border-radius:12px;
  border:1px solid transparent; background:#e9eef7; color:#1d3557; transition:.2s;
}
.btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); }
.btn.block{ display:block; width:100%; }
.btn.primary,.btn-primary{ background:#fff; color:var(--dark-blue); border-color:#fff; box-shadow:0 6px 20px rgba(3,35,61,.25); }
.btn.secondary{ background:var(--blue-600); color:#fff; border-color:var(--blue-600); }
.btn.accent{ background:var(--accent); color:#fff; }
.btn.danger{ background:#fff; border-color:var(--error-border); color:var(--error-border); }
.btn[disabled],.btn.disabled{ opacity:.6; pointer-events:none; }

/* ---------- Topbar publique (menu visiteur) ---------- */
.bb-topbar--public{
  position:sticky; top:0; z-index:900; background:#fff; border-bottom:1px solid rgba(0,0,0,.06);
}
.bb-topbar__inner{
  max-width:1200px; margin:0 auto; height:64px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.bb-brand{ font-weight:800; color:var(--blue); }
.bb-nav{ display:none; gap:14px; }
.bb-nav-right{ display:none; gap:10px; align-items:center; }
.bb-link{ color:var(--text); padding:8px 10px; border-radius:8px; font-weight:600; }
.bb-link.is-active{ background:#eef2ff; color:#1d4ed8; }
.bb-cta{ background:var(--accent); color:#fff !important; }

/* Drawer (mobile) partagé */
.bb-drawer{ position:fixed; inset:0; background:rgba(2,6,23,.45); display:none; align-items:stretch; justify-content:flex-end; z-index:1000; opacity:0; transition:opacity .2s; }
.bb-drawer.open{ display:flex; opacity:1; }
.bb-drawer__panel{ width:82vw; max-width:360px; height:100vh; background:#fff; box-shadow:-8px 0 24px rgba(2,6,23,.18);
  padding:14px; position:relative; display:flex; flex-direction:column; gap:8px; }
.bb-drawer__close{ position:absolute; top:8px; right:10px; font-size:24px; border:0; background:transparent; cursor:pointer; }
.bb-drawer__nav{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.bb-drawer__title{ font-size:12px; text-transform:uppercase; color:#64748b; margin:2px 0 4px; }
.bb-drawer__link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#0f172a; }
.bb-drawer__link:hover{ background:#f1f5f9; }
.bb-drawer__link--danger{ color:#b91c1c; }
.bb-drawer__cta{ background:var(--accent); color:#fff; text-align:center; }
.bb-drawer__sep{ border:0; height:1px; background:#e5e7eb; margin:8px 0; }

/* ---------- Sidebar connectée + topbar mobile ---------- */
.bb-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); height:100vh;
  display:none; background:linear-gradient(180deg,var(--bb-blue) 0%,var(--bb-blue-600) 100%);
  color:var(--bb-text-on-blue); padding:16px 12px; z-index:1000; box-shadow:1px 0 0 rgba(0,0,0,.06);
}
.bb-sidebar__brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 14px; border-bottom:1px solid var(--bb-border); margin-bottom:10px; }
.bb-logo{ display:flex; align-items:center; gap:10px; color:var(--bb-text-on-blue); }
.bb-logo__mark{ width:28px; height:28px; display:grid; place-items:center; background:#fff; color:var(--bb-blue); border-radius:8px; font-weight:800; }
.bb-logo__text{ font-weight:700; letter-spacing:.2px; }
.bb-sidebar__nav{ display:flex; flex-direction:column; gap:6px; padding-top:8px; }
.bb-sidebar__section{ color:#cfe1ff; opacity:.95; font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:12px; margin:10px 6px 4px; }
.bb-sidebar__spacer{ flex:1; }
.bb-navlink{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin:2px; border-radius:12px; color:var(--bb-text-dim); transition:.15s; }
.bb-navlink:hover,.bb-navlink.is-active{ background:var(--bb-blue-700); color:#fff; }
.bb-navlink--danger{ color:#ffd6d6; } .bb-navlink--danger:hover{ background:rgba(255,80,80,.15); color:#fff; }

.bb-topbar.bb-topbar--connected{
  position:sticky; top:0; z-index:950; display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 14px; background:var(--blue); color:#fff;
}
.bb-topbar__brand{ display:flex; align-items:center; gap:8px; color:#fff; }

/* ---------- Contenu (fix overlay) ---------- */
.bb-main{ padding:20px 16px; }
.bb-content{ padding:20px 16px; } /* compat */
.u-main{ padding:22px 24px; }

/* >> FIX PRINCIPAL : pousse le contenu quand la sidebar est visible */
@media (min-width:1024px){
  .bb-sidebar{ display:flex; flex-direction:column; }
  .bb-topbar.bb-topbar--connected{ display:none; }
  .bb-topbar--public .bb-topbar__inner>#bb-burger{ display:none; }
  .bb-topbar--public .bb-nav{ display:flex; }
  .bb-topbar--public .bb-nav-right{ display:flex; }

  /* marge forcée (toutes variantes utilisées dans le projet) */
  body .bb-main,
  body main.bb-main,
  body .bb-content,
  body .u-main{
    margin-left:var(--sidebar-w) !important;
  }
}
@media (max-width:1023.98px){
  .bb-sidebar{ display:none; }
  .bb-topbar--public .bb-nav,
  .bb-topbar--public .bb-nav-right{ display:none; }
  .bb-topbar--public .bb-topbar__inner>#bb-burger{ display:inline-block; }
}

/* ---------- Hero / sections (originaux) ---------- */
.hero{ background:linear-gradient(135deg,var(--blue),var(--dark-blue)); color:#fff; }
.hero--home{
  background:linear-gradient(180deg,#f7f9ff 0%,#ffffff 55%); border-bottom:1px solid var(--border);
}
.hero--home .hero-inner{ padding:46px 0; display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:980px){ .hero--home .hero-inner{ grid-template-columns:1.1fr .9fr; align-items:center; } }
.hero--home .hero-text h1{ color:#0f2242; }
.hero--home .hero-sub{ color:#51627d; }
.hero--home .hero-image{ display:flex; justify-content:center; }
.hero--home .hero-photo{ width:100%; max-width:520px; border-radius:20px; box-shadow:0 10px 26px rgba(17,30,56,.08); }

/* ---------- Alertes ---------- */
.alert{ border:2px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--bg-soft); color:var(--text); margin-bottom:16px; }
.alert.success{ background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.alert.warn{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
.alert.error{ background:var(--error-bg); border-color:var(--error-border); color:var(--error-text); }

/* ---------- Dashboard (KPI + header + graph) ---------- */
.kpi-grid{ display:grid; gap:18px; margin:18px 0 22px; grid-template-columns:1fr; }
@media (min-width:700px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .kpi-grid{ grid-template-columns:repeat(3,1fr); } }

.kpi-card{ position:relative; overflow:hidden; }
.kpi-card::after{ content:""; position:absolute; right:-30px; top:-30px; width:160px; height:160px;
  background:radial-gradient(closest-side,rgba(6,56,102,.12),transparent 70%); }
.kpi-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.kpi-head h2{ font-size:16px; font-weight:700; color:#072748; margin:0; }
.kpi-icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#f2f6ff; border:1px solid #e6ecfa; font-size:18px; }
.kpi-value{ font-size:clamp(26px,4.5vw,36px); font-weight:800; color:#0f2242; margin:4px 0; line-height:1.1; }
.kpi-note{ margin:0; font-size:13px; color:#5a6b86; }

.bb-page-header--gradient{
  background:linear-gradient(135deg,#063866 0%,#0a4a86 60%,#0f5aa6 100%);
  color:#fff; border-radius:16px; padding:18px 20px; margin:0 0 12px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.chart-card{ padding:16px; }
.chart-wrap{ width:100%; height:clamp(220px,34vh,360px); }
.chart-wrap>canvas{ width:100% !important; height:100% !important; display:block; }

/* ---------- Tableau comptes / transactions ---------- */
.table-wrap{ margin-top:12px; }
.table-scroll{ overflow:auto; border:1px solid #e7e9f1; border-radius:14px; background:#fff; }
.bb-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
.bb-table thead th{
  background:#063866; color:#fff; text-align:left; font-weight:700; letter-spacing:.02em; padding:12px;
  position:sticky; top:0; z-index:1;
}
.bb-table tbody td{ padding:12px; border-top:1px solid #eef1f6; vertical-align:middle; }
.bb-table tbody tr:hover{ background:#f8fbff; }
.bb-table .num{ text-align:right; font-variant-numeric:tabular-nums; }

.bank-cell{ display:flex; align-items:center; gap:8px; }
.bank-logo--sm{ width:28px; height:28px; border-radius:6px; background:#eaf2fb; color:#063866; display:flex; align-items:center; justify-content:center; font-weight:800; }
.acc-cell{ display:flex; flex-direction:column; gap:2px; }
.iban{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }

.btn-light{ background:#f2f5fb; color:#0f2542; border:1px solid #e0e6f3; border-radius:10px; padding:8px 12px; font-weight:700; }
.btn-light:hover{ background:#e9eef8; }
.btn-cta{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; box-shadow:0 2px 10px rgba(180,83,9,.25); }
.btn-cta:hover{ opacity:.92; }

/* ---------- Bandeau "aucun compte" ---------- */
.no-accounts-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border:1px dashed var(--accent);
  background:linear-gradient(180deg,rgba(180,83,9,0.07),rgba(180,83,9,0.03)); color:#361f05;
}
.no-accounts-banner strong{ font-weight:800; }
@media (max-width:720px){
  .no-accounts-banner{ flex-direction:column; align-items:stretch; }
  .no-accounts-banner .btn-cta{ width:100%; text-align:center; }
}

/* ---------- Auth (compat) ---------- */
.bb-body{ background:var(--bb-bg); }
.bb-auth-wrap{ min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.bb-auth-card{ width:100%; max-width:440px; background:#fff; border-radius:16px; padding:28px; box-shadow:0 12px 28px rgba(0,0,0,.08); border:1px solid rgba(6,56,102,.06); }
.bb-auth-title{ margin:0 0 14px; font-size:1.6rem; font-weight:700; background:linear-gradient(135deg,var(--bb-blue),#0b4f8f); -webkit-background-clip:text; background-clip:text; color:transparent; text-align:center; }
.bb-form{ margin-top:8px; } .bb-label{ display:block; margin:10px 0 6px; font-weight:600; color:#111827; }
.bb-input{ display:block; width:100%; border:1px solid #d1d5db; border-radius:12px; background:#fff; }
.bb-input-lg{ padding:14px 16px; font-size:1rem; } .bb-input:focus{ outline:none; border-color:var(--bb-blue); box-shadow:0 0 0 4px rgba(6,56,102,.15); }
.bb-btn{ display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer; border-radius:12px; font-weight:700; }
.bb-btn-lg{ width:100%; padding:14px 16px; } .bb-btn-primary{ background:var(--bb-blue); color:#fff; } .bb-btn-primary:hover{ filter:brightness(1.05); }
.bb-alert{ border-radius:12px; padding:12px 14px; font-size:.95rem; margin:10px 0 14px; }
.bb-alert-success{ background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.bb-alert-error{ background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }


/* ============================
   Analyse abonnements – UI
   ============================ */

/* En-tête sobre */
.bb-page-header--subtle{
  background: linear-gradient(135deg, rgba(6,56,102,0.07), rgba(180,83,9,0.05));
  border: 1px solid var(--card-border, #e5e9f3);
  padding: 16px 20px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Switch (Actifs uniquement) */
.bb-switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;}
.bb-switch input{display:none;}
.bb-switch__slider{
  width:44px; height:24px; border-radius:999px; position:relative;
  background:#e6eef7; border:1px solid #d6deea; transition:all .2s ease;
  display:inline-block;
}
.bb-switch__slider::after{
  content:""; position:absolute; top:50%; left:2px; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid #c8d2e1; transition:all .2s ease;
}
.bb-switch input:checked + .bb-switch__slider{background:var(--blue,#063866); border-color:var(--blue,#063866);}
.bb-switch input:checked + .bb-switch__slider::after{left:22px; border-color:#fff;}
.bb-switch__label{font-size:14px; color:var(--muted,#5b6a85);}

/* KPIs */
.bb-kpis-grid{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;
}
@media (max-width: 1100px){ .bb-kpis-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .bb-kpis-grid{grid-template-columns:1fr;} }

.bb-kpi{display:flex; align-items:center; gap:14px; padding:16px;}
.bb-kpi__icon{font-size:22px; line-height:1; filter:saturate(0.9);}
.bb-kpi__meta{display:flex; flex-direction:column;}
.bb-kpi__label{font-size:12px; color:var(--muted,#6b7a90); text-transform:uppercase; letter-spacing:.02em;}
.bb-kpi__value{font-size:22px; font-weight:700; color:var(--dark-blue,#03233d);}

/* Carte compte */
.bb-account-card{padding:0;}
.bb-account-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 16px 12px 16px; border-bottom:1px solid var(--card-border,#e5e9f3);
  background:linear-gradient(180deg, #fff, #fafbfd);
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.bb-account-card__title{display:flex; align-items:center; gap:10px;}
.bb-account-card__dot{width:10px; height:10px; border-radius:50%; background:var(--accent,#B45309);}
.bb-account-card__meta{display:flex; flex-wrap:wrap; gap:8px;}

.bb-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#f2f6fc; color:var(--dark-blue,#03233d);
  border:1px solid #e4ebf5;
}

/* Table + responsive */
.bb-scroll{width:100%; overflow:auto;}
.bb-table--compact td{padding:10px 12px; border-bottom:1px solid #f1f4fa;}
.bb-table tr:hover td{background:#fbfcfe;}
.bb-table tbody tr:nth-child(odd) td{background:#fcfdff;}

/* Pills statut */
.bb-pill{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
.bb-pill--green{background:#e7f8ee; color:#117a36; border:1px solid #c9f0d8;}
.bb-pill--gray{background:#eef1f5; color:#5a6677; border:1px solid #e1e6ee;}

/* Details propres */
.bb-details summary{cursor:pointer; color:var(--blue,#063866); font-weight:600;}
.bb-list{margin:10px 0 0 0; padding:0 0 0 16px;}
.bb-list--tight li{margin:6px 0;}
.bb-tiny{font-size:12px; color:#6b7280;}

/* Etats vides */
.bb-empty{color:#6b7280; text-align:center; padding:14px;}
.bb-empty-block{padding:18px; text-align:center;}

/* ================================
   HOME (index.php) – BankyBoard
   Styles originaux
   ================================ */

.home-body{background:var(--bb-bg); color:var(--bb-text);}

/* Layout utilitaire local */
.home-container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* HERO original */
.home-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(180,83,9,.25), transparent 60%),
    linear-gradient(135deg, var(--bb-blue) 0%, #0a2a4a 40%, #051a33 100%);
  color:#fff; padding: clamp(48px, 10vw, 90px) 0;
}
.home-hero:before{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(600px 400px at 120% -10%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
.home-hero-grid{
  display:grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 980px){
  .home-hero-grid{ grid-template-columns: 1fr; }
}

.home-hero-left{ align-self:center; }
.home-badge{
  display:inline-block; padding:.35rem .65rem; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  font-size:.85rem; letter-spacing:.2px;
}
.home-title{
  margin:.75rem 0 .25rem; font-size: clamp(2rem, 3.8vw, 3rem); line-height:1.1;
}
.home-accent{ color:var(--bb-accent); }
.home-subtitle{
  margin:.5rem 0 1.25rem; font-size: clamp(1rem, 1.4vw, 1.15rem);
  color:rgba(255,255,255,.9); max-width: 46ch;
}
.home-cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem; }
.home-trust{ display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0 0; padding:0; list-style:none; }
.home-trust li{ color:#d8e7ff; font-size:.95rem; display:flex; align-items:center; gap:.5rem; }

/* HERO Mockup */
.home-hero-right{ display:flex; align-items:center; justify-content:center; }
.home-mockup{
  width:min(480px, 100%); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
  border-radius:18px; box-shadow: 0 20px 60px rgba(3,35,61,.35);
  overflow:hidden; transform: translateZ(0);
}
.home-mockup-header{
  height:42px; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  display:flex; align-items:center; gap:6px; padding:0 12px;
}
.hm-dot{ width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.6); }
.hm-title{ font-size:12px; color:rgba(255,255,255,.8); margin-left:8px; }
.home-mockup-body{ padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.home-kpis{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
@media (max-width:520px){ .home-kpis{ grid-template-columns:1fr; } }
.home-kpi{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:12px;
}
.home-kpi-label{ display:block; font-size:.8rem; color:#e7f0ff; }
.home-kpi-value{ display:block; font-weight:700; font-size:1.15rem; }
.home-kpi-trend{ display:block; font-size:.75rem; color:#d8e7ff; }
.home-kpi-trend.positive{ color:#b3f5c7; }
.home-kpi-trend.info{ color:#c9e5ff; }

.home-mockup-chart{
  position:relative; margin:14px 0 10px; height:120px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; overflow:hidden;
}
.chart-line, .chart-line--2{
  position:absolute; left:-10%; right:-10%;
  height:2px; top:38%; opacity:.9; background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.9), rgba(255,255,255,.0));
  transform:skewY(-6deg);
  animation: slide 6s linear infinite;
}
.chart-line--2{ top:68%; opacity:.65; animation-duration:9s; }
.chart-gradient{
  position:absolute; bottom:0; left:0; right:0; height:50%;
  background: linear-gradient(180deg, transparent, rgba(180,83,9,.15));
}
@keyframes slide { from { transform:translateX(-10%) skewY(-6deg);} to { transform:translateX(10%) skewY(-6deg);} }

.home-mockup-list{ display:grid; gap:8px; margin-top:12px; }
.home-tx{ 
  display:flex; align-items:center; justify-content:space-between; 
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); 
  border-radius:10px; padding:10px 12px; 
}
.home-tx-left{ display:flex; align-items:center; gap:10px; }
.home-tx-icon{ 
  width:32px; height:32px; border-radius:8px; 
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); font-size:16px;
}
.home-tx-icon.subscription{ background:rgba(255,100,100,.2); }
.home-tx-icon.income{ background:rgba(100,255,180,.2); }
.home-tx-icon.expense{ background:rgba(255,200,100,.2); }
.home-tx-name{ 
  display:block; color:#fff; font-weight:600; font-size:14px; 
}
.home-tx-meta{ 
  display:block; color:#cfe1ff; font-size:.85rem; 
}
.home-tx-amt{ font-weight:700; white-space:nowrap; }
.home-tx-amt.neg{ color:#ffd0d0; }
.home-tx-amt.pos{ color:#c7ffd6; }

/* STRIP */
.home-strip{
  background:linear-gradient(180deg, #fff, #f9fbff);
  border-top:1px solid var(--bb-border); border-bottom:1px solid var(--bb-border);
  padding:18px 0;
}
.home-strip-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:10px;
}
@media (max-width:900px){ .home-strip-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .home-strip-grid{ grid-template-columns:1fr; } }
.home-strip-item{
  background:#fff; border:1px solid var(--bb-border); border-radius:12px; padding:14px 16px;
  text-align:center; color:var(--bb-blue); font-weight:600; box-shadow: var(--shadow);
}

/* SECTIONS GÉNÉRIQUES */
.home-section{ padding: clamp(40px, 8vw, 88px) 0; }
.home-section--alt{ background:var(--bb-bg-soft); }
.home-head{ text-align:center; max-width:800px; margin:0 auto 26px; }
.home-head h2{ margin:0 0 8px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); color:var(--bb-blue); }
.home-eyebrow{
  display:inline-block; font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; color:var(--primary, var(--bb-blue)); 
  background:var(--primary-light, rgba(6,56,102,.08));
  padding:6px 16px; border-radius:50px; margin-bottom:16px;
}
.home-muted{ color:var(--bb-muted); font-size:18px; }

/* CARDS (features) */
.home-grid-cards{
  display:grid; gap:18px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .home-grid-cards{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 620px){ .home-grid-cards{ grid-template-columns: 1fr;} }

.home-card{
  background:#fff; border:1px solid var(--bb-border); border-radius:16px; padding:18px;
  box-shadow: var(--shadow); transition:.2s ease;
}
.home-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(3,35,61,.12); }
.home-card--featured{
  border:2px solid var(--bb-blue);
  box-shadow: 0 8px 24px rgba(6,56,102,.15);
}
.home-card-ico{ 
  width:44px; height:44px; display:grid; place-items:center; border-radius:12px; 
  background:rgba(6,56,102,.08); color:var(--bb-blue); margin-bottom:.6rem; 
}
.home-card h3{ margin:.2rem 0 .3rem; color:var(--bb-dark); font-size:18px; }
.home-card p{ margin:0 0 12px; color:var(--bb-muted); line-height:1.5; }
.home-card-list{
  list-style:none; padding:0; margin:12px 0 0; font-size:14px;
}
.home-card-list li{
  padding:4px 0; color:var(--text-secondary, #5b6a85);
}

/* ÉTAPES */
.home-steps{
  display:grid; gap:16px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px){ .home-steps{ grid-template-columns: 1fr; } }
.home-step{
  background:#fff; border:1px solid var(--bb-border); border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.home-step-num{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:rgba(6,56,102,.08); color:var(--bb-blue); font-weight:700; margin-bottom:.4rem;
}

/* SECURITY */
.home-security{
  padding:60px 0;
}
.home-security-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center;
}
@media (max-width:900px){ .home-security-grid{ grid-template-columns:1fr; } }
.home-security-left h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:16px;
}
.home-security-right{
  display:grid; gap:20px;
}
.home-security-item{
  display:flex; gap:16px; align-items:start;
}
.home-security-icon{
  font-size:32px; flex-shrink:0;
}
.home-security-item h4{
  margin:0 0 4px; font-size:16px;
}
.home-security-item p{
  margin:0; color:var(--text-secondary, #5b6a85); font-size:14px;
}

/* PRICING */
.home-pricing{
  display:grid; gap:18px; grid-template-columns: 1fr 1fr;
  align-items:stretch;
}
@media (max-width:900px){ .home-pricing{ grid-template-columns: 1fr; } }
.home-plan{
  background:#fff; border:1px solid var(--bb-border); border-radius:18px; padding:22px;
  box-shadow:var(--shadow);
}
.home-plan--pro{
  border:1px solid rgba(180,83,9,.35);
  box-shadow: 0 16px 40px rgba(180,83,9,.18);
  position:relative;
}
.home-plan-badge{
  position:absolute; top:14px; right:14px; font-size:.8rem; background:var(--bb-accent); color:#fff; padding:.25rem .5rem; border-radius:999px;
}
.home-plan h3{
  font-size:24px; margin-bottom:16px;
}
.home-price{
  font-weight:800; font-size:2rem; color:var(--bb-blue);
}
.home-price span{ font-size: .95rem; color:var(--bb-muted); margin-left:.2rem; }
.home-plan-desc{
  color:var(--text-secondary, #5b6a85); font-size:14px; margin:8px 0 16px;
}
.home-plan-list{ 
  margin:12px 0 18px; padding:0; list-style:none;
}
.home-plan-list li{ 
  margin:.35rem 0; padding:8px 0; border-bottom:1px solid #f1f4fa;
  font-size:15px;
}
.home-plan-list li:last-child{ border-bottom:none; }
.home-plan-list .included{ color:var(--text-primary, #0f172a); }
.home-plan-list .excluded{ color:#9aa9c0; }
.home-plan-note{
  text-align:center; font-size:13px; color:var(--text-secondary, #5b6a85); margin-top:16px;
}
.home-pricing-note{
  margin-top:32px; padding:20px; background:var(--primary-light, rgba(6,56,102,.06));
  border-radius:12px; text-align:center;
}

/* FAQ */
.home-faq{ display:grid; gap:10px; max-width:840px; margin:0 auto; }
.home-faq-item{
  background:#fff; border:1px solid var(--bb-border); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow);
}
.home-faq-item > summary{ 
  cursor:pointer; font-weight:600; color:var(--bb-blue); list-style:none; 
  display:flex; justify-content:space-between; align-items:center;
}
.home-faq-item > summary::-webkit-details-marker{ display:none; }
.home-faq-item > summary::after{
  content:'+'; font-size:24px; color:var(--primary, var(--bb-blue));
}
.home-faq-item[open] > summary::after{
  content:'−';
}
.home-faq-content{ 
  margin-top:.5rem; color:var(--bb-muted); line-height:1.6;
}

/* CTA Final */
.home-cta-final{
  text-align:center; max-width:700px; margin:48px auto 0;
  padding:40px; background:var(--primary-light, rgba(6,56,102,.06));
  border-radius:16px;
}
.home-cta-final h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:16px;
}
.home-cta-final p{
  font-size:18px; color:var(--text-secondary, #5b6a85); margin-bottom:32px;
}
.home-cta-row.center{ justify-content:center; }

/* FOOTER */
.home-footer{ background:#0d1b2a; color:#c9d7e8; margin-top: 20px; }
.home-footer-grid{
  display:grid; gap:18px; grid-template-columns: 1.2fr .9fr .9fr .9fr;
  padding:48px 0 32px;
}
@media (max-width:900px){ .home-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .home-footer-grid{ grid-template-columns:1fr; } }
.home-logo{ font-weight:800; color:#fff; font-size:1.2rem; margin-bottom:12px; }
.home-muted-sm{ color:#b7c7db; line-height:1.6; margin-bottom:20px; }
.home-footer-social{
  display:flex; gap:16px;
}
.home-footer-social a{
  color:#dbe8f6; text-decoration:none; font-size:14px;
}
.home-footer-social a:hover{ text-decoration:underline; }
.home-footer-col h4{
  font-size:14px; font-weight:600; margin-bottom:12px; color:#fff;
}
.home-footer-nav{
  display:flex; flex-direction:column; gap:8px;
}
.home-footer-nav a{
  color:#dbe8f6; text-decoration:none; display:block; font-size:14px;
}
.home-footer-nav a:hover{ text-decoration:underline; }
.home-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:20px 0; 
}
.home-footer-bottom p{
  text-align:center; font-size:13px; color:#a8bdd6; margin:0;
}


/* ================================================
   SECTION V2 - STYLES OPTIMISÉS CONVERSION
   À utiliser avec la nouvelle structure index.php
   ================================================ */

/* Boutons V2 (spécifiques conversion) */
.btn--xl {
  padding: 20px 48px;
  font-size: 18px;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--radius-md);
}
.btn--xl small {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.9;
}
.btn--full {
  width: 100%;
}

/* ==================== HERO V2 (Optimisé Conversion) ==================== */
.home-hero--v2 {
  background: linear-gradient(135deg, #F7FAFC 0%, #E6F0FF 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.home-hero--v2::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0,102,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.home-hero-content {
  max-width: 680px;
  margin: 0 auto 60px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Trust Badge V2 */
.home-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.home-trust-badge strong {
  color: var(--primary, var(--bb-blue));
}

/* Titre Hero V2 */
.home-title-v2 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.home-title-v2 .home-accent::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 12px;
  background: rgba(0, 102, 255, 0.15);
  z-index: -1;
  border-radius: 4px;
}

.home-subtitle-v2 {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Hero V2 */
.home-cta-hero {
  margin-bottom: 32px;
}

/* Trust Inline V2 */
.home-trust-inline {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  font-size: 14px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

/* Hero Visual avec Screenshot */
.home-hero-visual {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.home-screenshot-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.home-screenshot-main img {
  width: 100%;
  display: block;
  border: 1px solid var(--border);
}

.home-screenshot-float {
  position: absolute;
  top: 20%;
  right: -40px;
  background: white;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.insight-card {
  display: flex;
  gap: 16px;
  align-items: start;
}

.insight-icon {
  font-size: 32px;
}

.insight-card strong {
  display: block;
  font-size: 18px;
  color: var(--primary, var(--bb-blue));
  margin-bottom: 4px;
}

.insight-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* ==================== SOCIAL PROOF BAR ==================== */
.home-social-proof {
  background: white;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

.home-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  text-align: center;
}

.stat-item strong {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--primary, var(--bb-blue));
  margin-bottom: 4px;
}

.stat-item span {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ==================== SECTION PROBLÈME ==================== */
.home-problem {
  background: var(--bg-soft);
  padding: 80px 0;
}

.home-problem-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.home-problem h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 48px;
}

.home-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.problem-card {
  background: white;
  padding: 32px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.2s;
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.problem-emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.problem-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.problem-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.home-problem-stat {
  background: white;
  padding: 32px;
  border-radius: var(--radius-md);
  border: 2px solid var(--primary, var(--bb-blue));
  text-align: center;
}

.home-problem-stat strong {
  display: block;
  font-size: 24px;
  color: var(--primary, var(--bb-blue));
  margin-bottom: 8px;
}

.home-problem-stat p {
  color: var(--text-secondary);
  font-size: 16px;
  margin: 0;
}

/* ==================== SECTION SOLUTION (Features) ==================== */
.home-solution {
  padding: 80px 0;
}

/* Feature Showcase */
.home-feature-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.home-feature-reverse {
  direction: rtl;
}

.home-feature-reverse > * {
  direction: ltr;
}

.feature-number {
  display: inline-block;
  background: var(--primary-light, rgba(6,56,102,.08));
  color: var(--primary, var(--bb-blue));
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.feature-content h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.feature-content > p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.feature-list {
  list-style: none;
  margin-bottom: 24px;
  padding: 0;
}

.feature-list li {
  padding: 8px 0;
  font-size: 16px;
  color: var(--text-secondary);
}

.feature-highlight {
  background: var(--primary-light, rgba(6,56,102,.08));
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary, var(--bb-blue));
  font-size: 16px;
}

.feature-visual img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

/* ==================== TÉMOIGNAGES ==================== */
.home-testimonials {
  padding: 80px 0;
}

.home-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.testimonial-card {
  background: white;
  padding: 32px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.testimonial-stars {
  color: #FFB800;
  font-size: 18px;
  margin-bottom: 16px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.testimonial-text strong {
  color: var(--primary, var(--bb-blue));
}

.testimonial-author {
  display: flex;
  gap: 12px;
  align-items: center;
}

.testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-author strong {
  display: block;
  font-size: 15px;
}

.testimonial-author span {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ==================== PRICING V2 ==================== */
.home-pricing-v2 {
  padding: 80px 0;
  background: var(--bg-soft);
}

.home-pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto 48px;
}

.pricing-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.pricing-card--featured {
  border-color: var(--primary, var(--bb-blue));
  box-shadow: 0 8px 32px rgba(0,102,255,0.2);
  transform: scale(1.05);
}

.pricing-card--featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.pricing-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FF6B00 0%, #FF3D00 100%);
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255,61,0,0.3);
}

.pricing-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.pricing-header h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.currency {
  font-size: 56px;
  font-weight: 800;
  color: var(--primary, var(--bb-blue));
  line-height: 1;
}

.period {
  font-size: 20px;
  color: var(--text-secondary);
}

.pricing-saving {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.old-price {
  font-size: 18px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pricing-saving strong {
  background: var(--success);
  color: white;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 13px;
}

.pricing-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

.pricing-features {
  list-style: none;
  margin-bottom: 32px;
  padding: 0;
}

.pricing-features li {
  padding: 12px 0;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--bg-soft);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-trial {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 16px;
}

/* ROI Calculator */
.home-roi-box {
  background: white;
  border: 2px solid var(--primary, var(--bb-blue));
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 900px;
  margin: 0 auto 48px;
}

.home-roi-box h3 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 32px;
}

.roi-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.roi-item {
  text-align: center;
  flex: 0 0 200px;
}

.roi-label {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.roi-value {
  display: block;
  font-size: 40px;
  font-weight: 800;
  color: var(--text-primary);
}

.roi-item--profit .roi-value {
  color: var(--success);
}

.roi-minus, .roi-equals {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-muted);
}

.roi-footnote {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Garantie */
.home-guarantee {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--primary-light, rgba(6,56,102,.08));
  padding: 32px;
  border-radius: var(--radius-md);
  max-width: 700px;
  margin: 0 auto;
}

.guarantee-badge {
  font-size: 48px;
  background: var(--success);
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-guarantee h4 {
  font-size: 20px;
  margin-bottom: 8px;
}

.home-guarantee p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
}

/* ==================== STEPS V2 ==================== */
.home-steps-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.step-card {
  flex: 0 0 280px;
  text-align: center;
}

.step-visual {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  background: var(--primary-light, rgba(6,56,102,.08));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-visual img {
  width: 60px;
  height: 60px;
}

.step-number {
  display: inline-block;
  background: var(--primary, var(--bb-blue));
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 16px;
}

.step-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.step-arrow {
  font-size: 32px;
  color: var(--primary, var(--bb-blue));
  font-weight: 700;
}

/* ==================== SÉCURITÉ V2 ==================== */
.home-security-v2 {
  padding: 80px 0;
  background: white;
}

.home-security-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
}

.security-left h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.security-left p {
  font-size: 18px;
  color: var(--text-secondary);
}

.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.security-item {
  background: var(--bg-soft);
  padding: 24px;
  border-radius: var(--radius-md);
}

.security-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
}

.security-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.security-item p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* ==================== FAQ GRID ==================== */
.home-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-item-v2 {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item-v2 summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s;
}

.faq-item-v2 summary:hover {
  background: var(--bg-soft);
}

.faq-item-v2 summary::marker,
.faq-item-v2 summary::-webkit-details-marker {
  display: none;
}

.faq-item-v2 summary::after {
  content: '+';
  float: right;
  font-size: 24px;
  color: var(--primary, var(--bb-blue));
}

.faq-item-v2[open] summary::after {
  content: '−';
}

.faq-content {
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.faq-content strong {
  color: var(--primary, var(--bb-blue));
}

/* ==================== CTA FINAL V2 ==================== */
.home-cta-final-v2 {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary, var(--bb-blue)) 0%, var(--primary-dark, #052e52) 100%);
}

.cta-final-box {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: white;
}

.cta-final-box h2 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 16px;
}

.cta-final-text {
  font-size: 20px;
  margin-bottom: 32px;
  opacity: 0.95;
}

.cta-final-benefits {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  font-size: 15px;
}

.cta-final-box .btn {
  background: white;
  color: var(--primary, var(--bb-blue));
  font-size: 20px;
  padding: 20px 48px;
  margin-bottom: 24px;
}

.cta-final-box .btn:hover {
  background: var(--bg-soft);
  transform: scale(1.05);
}

.cta-final-note {
  font-size: 16px;
  opacity: 0.9;
}


/* ==================== RESPONSIVE V2 ==================== */
@media (max-width: 1024px) {
  .home-feature-showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .home-feature-reverse {
    direction: ltr;
  }
  
  .home-security-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .home-title-v2 {
    font-size: 36px;
  }
  
  .home-subtitle-v2 {
    font-size: 18px;
  }
  
  .home-stats-bar {
    grid-template-columns: 1fr 1fr;
  }
  
  .home-problem-grid {
    grid-template-columns: 1fr;
  }
  
  .home-testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .home-pricing-cards {
    grid-template-columns: 1fr;
  }
  
  .pricing-card--featured {
    transform: scale(1);
  }
  
  .home-faq-grid {
    grid-template-columns: 1fr;
  }
  
  .home-steps-v2 {
    flex-direction: column;
  }
  
  .step-arrow {
    transform: rotate(90deg);
  }
  
  .security-grid {
    grid-template-columns: 1fr;
  }
  
  .roi-calc {
    flex-direction: column;
  }
  
  .roi-minus, .roi-equals {
    transform: rotate(90deg);
  }
  
  .cta-final-box h2 {
    font-size: 32px;
  }

  .home-guarantee {
    flex-direction: column;
    text-align: center;
  }
}