/* ==========================================================================
   MIDDLEMAN — MODULE PAGES (CV & IA · Cooptation · Apport d'affaires)
   Component layer on top of site.css. Marketing mockups recreate the product
   in the design-system style — never raw screenshots.
   ========================================================================== */

/* ---------- HERO (split: copy + product mockup) ---------- */
.mhero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 55% at 88% 25%, rgba(61,228,207,0.16), transparent 60%),
    radial-gradient(ellipse 55% 50% at 8% 80%, rgba(76,108,226,0.22), transparent 60%),
    linear-gradient(165deg, #0b1437 0%, #0a1b2e 55%, #0a2230 100%);
  color: #fff; overflow: hidden; padding-top: 66px;
}
.mhero .hero-grid-tex {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.mhero-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 78px 40px 84px;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.mhero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--heading-font); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint);
  background: rgba(94,234,212,0.1); border: 1px solid rgba(94,234,212,0.26);
  padding: 7px 14px 7px 12px; border-radius: var(--radius-full); margin-bottom: 24px;
}
.mhero-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(94,234,212,0.22); }
.mhero h1 {
  font-size: clamp(34px, 4vw, 56px); font-weight: 900; line-height: 1.02;
  letter-spacing: -0.035em; margin: 0 0 22px; max-width: 14ch;
}
.mhero h1 .mint { color: var(--mint); }
.mhero h1 .indigo { color: var(--primary-200); }
.mhero-sub { font-size: 18px; line-height: 1.62; color: #fff; max-width: 46ch; margin-bottom: 32px; }
.mhero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 30px; }
.mhero-trust { display: flex; flex-wrap: wrap; gap: 14px 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1); }
.mhero-trust .it { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #fff; font-weight: 500; }
.mhero-trust .it svg { width: 17px; height: 17px; color: var(--mint); flex-shrink: 0; }
.mhero-visual { position: relative; }

/* ---------- PRODUCT MOCKUP WINDOW ---------- */
.ui {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(2,8,28,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.ui-bar { height: 38px; background: var(--navy-deep); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.ui-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.ui-bar i:nth-child(1) { background: #ff6058; } .ui-bar i:nth-child(2) { background: #ffbd2e; } .ui-bar i:nth-child(3) { background: #28c840; }
.ui-bar .t { margin-left: 12px; font-family: var(--heading-font); font-size: 12px; font-weight: 600; color: #fff; }
.ui-tabs { display: flex; gap: 22px; padding: 0 22px; border-bottom: 1px solid var(--gray-200); background: #fff; }
.ui-tab { font-family: var(--heading-font); font-size: 12.5px; font-weight: 600; color: var(--gray-500); padding: 14px 0; position: relative; display: flex; align-items: center; gap: 7px; }
.ui-tab svg { width: 15px; height: 15px; }
.ui-tab.active { color: var(--mm-accent); }
.ui-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mm-accent); border-radius: 2px; }
.ui-body { padding: 22px; background: var(--bg-app); }
.ui-h { font-family: var(--heading-font); font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }

/* float accent behind mockup */
.mhero-visual::before { content: ""; position: absolute; inset: -8% -6% -10% -6%; background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(76,108,226,0.28), transparent 70%); filter: blur(20px); z-index: -1; }

/* ---------- CV COMPARE / BOOST ---------- */
.cvb { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cvb-score { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px 20px; }
.ring { --p: 70; position: relative; width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--mm-accent) calc(var(--p) * 1%), var(--gray-200) 0); display: flex; align-items: center; justify-content: center; }
.ring::before { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; background: #fff; }
.ring span { position: relative; font-family: var(--heading-font); font-size: 18px; font-weight: 900; color: var(--navy); }
.cvb-score .meta .l { font-family: var(--heading-font); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cvb-score .meta .v { font-family: var(--heading-font); font-size: 15px; font-weight: 800; color: var(--navy); margin-top: 2px; }
.cvb-score .meta .arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--mm-accent); font-weight: 800; }
.cvb-list { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px 18px; }
.cvb-list .lab { font-family: var(--heading-font); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mm-accent); margin-bottom: 12px; }
.cvb-li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 13px; color: var(--gray-700); line-height: 1.4; }
.cvb-li svg { width: 16px; height: 16px; color: var(--mint-700); flex-shrink: 0; margin-top: 1px; }

/* doc transform (source -> templated) */
.doc-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.doc { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 14px; }
.doc .ph { height: 8px; border-radius: 4px; background: var(--gray-200); margin-bottom: 7px; }
.doc.src .ph { background: var(--gray-300); }
.doc .ph.t { width: 60%; background: var(--navy); height: 10px; }
.doc .ph.s { width: 80%; }
.doc .ph.x { width: 45%; }
.doc-tag { font-family: var(--heading-font); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; }
.doc.out { border-color: var(--mm-accent); box-shadow: 0 8px 22px rgb(var(--mm-accent-rgb)/.12); }
.doc.out .doc-tag { color: var(--mm-accent); }
.doc-arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--mm-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.doc-arrow svg { width: 17px; height: 17px; }
.fmt-badges { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.fmt-badge { font-family: var(--heading-font); font-size: 11px; font-weight: 700; color: var(--mm-accent-700); background: var(--mm-accent-soft); padding: 5px 11px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 5px; }
.fmt-badge svg { width: 12px; height: 12px; }

/* ---------- KANBAN ---------- */
.kb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.kb-col { background: var(--gray-100); border-radius: 10px; padding: 9px; }
.kb-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--heading-font); font-size: 11px; font-weight: 700; margin-bottom: 9px; padding: 0 3px; }
.kb-head .n { width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; color: #fff; }
.kb-c-new .kb-head { color: var(--mm-accent); } .kb-c-new .n { background: var(--mm-accent); }
.kb-c-rev .kb-head { color: #d97706; } .kb-c-rev .n { background: #f59e0b; }
.kb-c-int .kb-head { color: #7c3aed; } .kb-c-int .n { background: #8b5cf6; }
.kb-c-emb .kb-head { color: var(--mint-700); } .kb-c-emb .n { background: var(--tertiary-500); }
.kb-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 9px; padding: 11px 11px 12px; margin-bottom: 8px; box-shadow: var(--shadow-xs); }
.kb-card:last-child { margin-bottom: 0; }
.kb-card .nm { font-family: var(--heading-font); font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.kb-card .ro { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }
.kb-card .row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kb-tag { font-family: var(--heading-font); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 5px; background: var(--gray-100); color: var(--gray-600); }
.kb-tag.cdi { background: var(--mm-accent-soft); color: var(--mm-accent-700); }
.kb-tag.free { background: var(--tertiary-50); color: var(--secondary-700); }
.kb-card .pr { font-family: var(--heading-font); font-size: 11px; font-weight: 800; color: var(--mint-700); }

/* ---------- STATS ROW (suivi) ---------- */
.statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.statbar .s { background: #fff; border: 1px solid var(--gray-200); border-radius: 11px; padding: 16px 18px; }
.statbar .s .l { font-size: 12px; color: var(--muted); }
.statbar .s .n { font-family: var(--heading-font); font-size: 26px; font-weight: 900; color: var(--navy); letter-spacing: -0.02em; margin-top: 4px; }
.statbar .s .n.green { color: var(--mint-700); } .statbar .s .n.accent { color: var(--mm-accent); }

/* ---------- LEADERBOARD ---------- */
.lead-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; }
.lead-row:last-child { margin-bottom: 0; }
.lead-rank { width: 24px; height: 24px; border-radius: 7px; background: var(--gray-100); color: var(--gray-600); font-family: var(--heading-font); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lead-row.top .lead-rank { background: var(--mm-accent); color: #fff; }
.lead-av { width: 30px; height: 30px; border-radius: 50%; background: var(--mm-accent-soft); color: var(--mm-accent-700); font-family: var(--heading-font); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lead-row .nm { font-family: var(--heading-font); font-size: 13px; font-weight: 700; color: var(--navy); flex: 1; }
.lead-row .pts { font-family: var(--heading-font); font-size: 13px; font-weight: 800; color: var(--mint-700); }

/* ---------- LEAD FORM PREVIEW ---------- */
.lf-sec { font-family: var(--heading-font); font-size: 12px; font-weight: 800; color: var(--mm-accent); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.lf-sec svg { width: 15px; height: 15px; }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 16px; }
.lf-field .l { font-family: var(--heading-font); font-size: 11px; font-weight: 600; color: var(--gray-600); margin-bottom: 5px; display: block; }
.lf-field .in { height: 34px; border: 1px solid var(--gray-300); border-radius: 8px; background: #fff; display: flex; align-items: center; padding: 0 11px; font-size: 12px; color: var(--navy); font-weight: 500; }
.lf-field .in.ph { color: var(--placeholdergray); font-weight: 400; }
.lf-field.full { grid-column: 1 / -1; }
.lf-submit { height: 38px; border-radius: 9px; background: var(--mm-accent); color: #fff; font-family: var(--heading-font); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lf-submit svg { width: 15px; height: 15px; }

/* ---------- OPPORTUNITY LIST ---------- */
.opp { background: #fff; border: 1px solid var(--gray-200); border-left: 3px solid var(--mm-accent); border-radius: 10px; padding: 13px 15px; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opp:last-child { margin-bottom: 0; }
.opp .co { font-family: var(--heading-font); font-size: 13.5px; font-weight: 800; color: var(--navy); }
.opp .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.opp .right { text-align: right; flex-shrink: 0; }
.opp .who { font-size: 11px; color: var(--gray-600); }
.opp-status { font-family: var(--heading-font); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.opp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.opp-status.sig { background: var(--mm-accent-soft); color: var(--mm-accent-700); } .opp-status.sig::before { background: var(--mm-accent); }
.opp-status.won { background: var(--tertiary-50); color: var(--secondary-700); } .opp-status.won::before { background: var(--tertiary-500); }

/* ---------- FUNNEL ---------- */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.fn-row .top { display: flex; justify-content: space-between; font-family: var(--heading-font); font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.fn-row .top .pct { color: var(--muted); font-weight: 600; }
.fn-bar { height: 12px; border-radius: 6px; background: var(--gray-200); overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 6px; background: var(--mm-accent); }
.fn-row:nth-child(2) .fn-bar i { background: var(--primary-400); }
.fn-row:nth-child(3) .fn-bar i { background: var(--tertiary-500); }
.fn-row:nth-child(4) .fn-bar i { background: var(--mint-700); }

/* ---------- CONSTAT (pain) ---------- */
.constat { background: var(--bg-app); }
.constat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cst { padding: 30px 28px; }
.cst .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--mm-accent-soft); color: var(--mm-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cst .ic svg { width: 23px; height: 23px; }
.cst h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; }
.cst p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.constat-stat { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 24px; background: var(--navy); border-radius: 14px; padding: 26px 34px; }
.constat-stat .s { flex: 1; min-width: 180px; }
.constat-stat .n { font-family: var(--heading-font); font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.constat-stat .n span { color: var(--mint); }
.constat-stat .l { font-size: 13px; color: #fff; margin-top: 8px; line-height: 1.45; }

/* ---------- SOLUTION (copy + mockup) ---------- */
.solution { background: #fff; }
.sol-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 52px; align-items: center; }
.sol-grid.rev .sol-copy { order: 2; }
.sol-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.sol-step { display: flex; gap: 16px; align-items: flex-start; }
.sol-step .num { width: 32px; height: 32px; border-radius: 9px; background: var(--mm-accent); color: #fff; font-family: var(--heading-font); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sol-step h4 { font-family: var(--heading-font); font-size: 15.5px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.sol-step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* feature grid under solution */
.featrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.feat { padding: 24px 22px; }
.feat .itile { margin-bottom: 16px; }
.feat h4 { font-family: var(--heading-font); font-size: 14.5px; font-weight: 800; color: var(--navy); margin-bottom: 7px; }
.feat p { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---------- ACCOMPAGNEMENT (navy band) ---------- */
.accomp { background: linear-gradient(165deg, #0b1437 0%, #0a2230 100%); color: #fff; position: relative; overflow: hidden; }
.accomp::before { content: ""; position: absolute; top: -140px; right: -100px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(61,228,207,0.12), transparent 68%); pointer-events: none; }
.accomp .wrap { position: relative; z-index: 2; }
.accomp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.accomp h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 18px; }
.accomp h2 em { font-style: normal; color: var(--mint); }
.accomp .lead { font-size: 16px; line-height: 1.65; color: #fff; margin-bottom: 22px; }
.accomp-pts { display: flex; flex-direction: column; gap: 16px; }
.accomp-pt { display: flex; gap: 14px; align-items: flex-start; }
.accomp-pt .itile.dark { width: 40px; height: 40px; flex-shrink: 0; }
.accomp-pt .h { font-family: var(--heading-font); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.accomp-pt .d { font-size: 13.5px; line-height: 1.55; color: #fff; }
.accomp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.accomp-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 26px 24px; }
.accomp-stat .n { font-family: var(--heading-font); font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.accomp-stat .n span { color: var(--mint); }
.accomp-stat .l { font-size: 13px; color: #fff; margin-top: 8px; line-height: 1.4; }

/* ---------- BÉNÉFICES (ROI KPIs) ---------- */
.benef { background: var(--bg-app); }
.benef-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bn { padding: 30px 26px; position: relative; overflow: hidden; }
.bn .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--mm-accent-soft); color: var(--mm-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.bn .ic.mint { background: var(--tertiary-100); color: var(--secondary-600); }
.bn .ic svg { width: 21px; height: 21px; }
.bn .n { font-family: var(--heading-font); font-size: 38px; font-weight: 900; color: var(--navy); letter-spacing: -0.03em; line-height: 1; }
.bn .n.accent { color: var(--mm-accent); } .bn .n.green { color: var(--mint-700); }
.bn .l { font-family: var(--heading-font); font-size: 14px; font-weight: 700; color: var(--navy); margin: 12px 0 5px; }
.bn .d { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .mhero-inner { grid-template-columns: 1fr; gap: 44px; }
  .mhero-visual { max-width: 560px; }
  .sol-grid { grid-template-columns: 1fr; gap: 36px; }
  .sol-grid.rev .sol-copy { order: 0; }
  .accomp-grid { grid-template-columns: 1fr; gap: 38px; }
  .featrow { grid-template-columns: 1fr 1fr; }
  .benef-grid { grid-template-columns: 1fr 1fr; }
  .constat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mhero-inner { padding: 58px 22px 64px; }
  .mhero h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .mhero-sub { font-size: 16px; }
  .mhero-actions { flex-direction: column; align-items: stretch; }
  .mhero-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .mhero-visual, .viz-panel { min-width: 0; }
  .viz-panel { padding: 18px 14px; }
  .kb { grid-template-columns: 1fr 1fr; }
  .lf-grid { grid-template-columns: 1fr; }
  .featrow, .benef-grid { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: 1fr; }
  .dossier-top { align-items: flex-start; flex-wrap: wrap; }
  .dossier-top .d-charte { margin-left: 0; }
  .dossier-badge { position: static; display: inline-block; margin: 12px 0 0; }
}

/* ====================================================================
   REAL PRODUCT SCREENSHOTS
   ==================================================================== */
.ui-body.shot { padding: 0; background: #fff; }
.ui-shot { display: block; width: 100%; height: auto; }
.sol-shot-wrap { border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: 0 24px 60px -22px rgba(2,8,28,0.42); background: #fff; }
.sol-shot { display: block; width: 100%; height: auto; }

/* screenshot showcase row (stats capture box) */
.shot-showcase { display: grid; grid-template-columns: 1fr 1.3fr; gap: 44px; align-items: center; }
.shot-showcase .sc-copy h3 { font-family: var(--heading-font); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.shot-showcase .sc-copy p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.shot-showcase .sc-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: 0 26px 64px -24px rgba(2,8,28,0.4); }
.shot-showcase .sc-frame .ui-bar { border-radius: 0; }
.shot-showcase .sc-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 900px){ .shot-showcase { grid-template-columns: 1fr; gap: 26px; } }

/* ====================================================================
   ACCOMPAGNEMENT — thin band
   ==================================================================== */
.accomp-band { background: linear-gradient(165deg, #0b1437 0%, #0a2230 100%); color: #fff; }
.accomp-band .wrap { display: flex; align-items: center; gap: 26px; }
.accomp-band .ab-mark { width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(61,228,207,0.12); border: 1px solid rgba(61,228,207,0.32); color: var(--mint); }
.accomp-band .ab-mark svg { width: 25px; height: 25px; }
.accomp-band .ab-txt { font-size: 16px; line-height: 1.6; color: #fff; margin: 0; }
.accomp-band .ab-txt strong { color: #fff; font-weight: 700; }
@media (max-width: 720px){ .accomp-band .wrap { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* ====================================================================
   FAQ — inline (2 columns)
   ==================================================================== */
.faq-list.faq-list-inline { max-width: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; }
.faq-list.faq-list-inline .faq-q { font-size: 14.5px; padding: 18px 20px; }
@media (max-width: 760px){ .faq-list.faq-list-inline { grid-template-columns: 1fr; } }

/* ====================================================================
   ROI as text blocks (cooptation / apport)
   ==================================================================== */
.roi-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.roi-block { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 30px 28px; box-shadow: var(--shadow-sm); }
.roi-block .rb-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--mm-accent-soft); color: var(--mm-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.roi-block .rb-ic.mint { background: var(--tertiary-50); color: var(--tertiary-700); }
.roi-block .rb-ic svg { width: 23px; height: 23px; }
.roi-block h3 { font-family: var(--heading-font); font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; }
.roi-block p { font-size: 14px; line-height: 1.62; color: var(--muted); }
@media (max-width: 860px){ .roi-blocks { grid-template-columns: 1fr; } }

/* ====================================================================
   PREMIUM HERO VISUALS (custom, replace product screenshots)
   ==================================================================== */

/* ---- accompagnement band : large statement ---- */
.accomp-band .wrap { gap: 32px; }
.accomp-band .ab-mark { width: 60px; height: 60px; border-radius: 16px; }
.accomp-band .ab-mark svg { width: 30px; height: 30px; }
.accomp-band .ab-body { flex: 1; }
.accomp-band .ab-eyebrow { font-family: var(--heading-font); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin-bottom: 14px; }
.accomp-band .ab-head { font-family: var(--heading-font); font-size: clamp(25px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.025em; color: #fff; line-height: 1.12; margin-bottom: 16px; max-width: 22ch; }
.accomp-band .ab-txt { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.65; color: #fff; margin: 0; max-width: 72ch; }

/* ---- BEFORE / AFTER (CV hero) ---- */
.ba-body { padding: 22px; background: var(--bg-app); }
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.ba-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.ba-card.before { border-color: #f0cdc6; background: #fffaf9; }
.ba-card.after { border-color: rgba(76,108,226,0.4); box-shadow: 0 14px 30px -14px rgba(76,108,226,0.4); }
.ba-tag { font-family: var(--heading-font); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-full); align-self: flex-start; margin-bottom: 13px; }
.ba-tag.warn { background: #fbe4e0; color: #c0392b; }
.ba-tag.ok { background: var(--mm-accent-soft); color: var(--mm-accent); }
.mini-cv { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mini-cv .ln { height: 7px; border-radius: 4px; background: var(--gray-200); }
.mini-cv.messy .ln { background: #ecd6d1; }
.mini-cv.messy .ln.skew { transform: rotate(-1.4deg); opacity: 0.75; }
.ln.w95{width:95%}.ln.w90{width:90%}.ln.w85{width:85%}.ln.w80{width:80%}.ln.w70{width:70%}.ln.w65{width:65%}.ln.w55{width:55%}.ln.w45{width:45%}
.mcv-head { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
.mcv-ava { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.mini-cv.messy .mcv-ava { background: #ecd6d1; }
.mcv-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.mcv-brand { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.mcv-brand .mark { width: 13px; height: 18px; flex-shrink: 0; }
.mcv-brand .ln { background: var(--mm-accent); opacity: 0.85; }
.mini-cv.clean .ln { background: #dde5fb; }
.mcv-badges { display: flex; gap: 5px; margin-top: 8px; }
.mcv-badges span { width: 32px; height: 13px; border-radius: 4px; background: var(--tertiary-100); }
.ba-foot { margin-top: 13px; font-family: var(--heading-font); font-size: 11.5px; font-weight: 700; color: var(--gray-500); display: flex; align-items: center; gap: 6px; }
.ba-foot svg { width: 14px; height: 14px; }
.ba-foot.ok { color: var(--mm-accent); }
.ba-foot.ok svg { color: var(--tertiary-600); }
.ba-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.ba-arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--mm-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(76,108,226,0.45); }
.ba-arrow svg { width: 18px; height: 18px; }
.ba-ia { font-family: var(--heading-font); font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--tertiary-700); background: var(--tertiary-50); border: 1px solid var(--tertiary-200); border-radius: var(--radius-full); padding: 3px 8px; display: flex; align-items: center; gap: 4px; }
.ba-ia svg { width: 11px; height: 11px; }
.ba-gain { margin-top: 13px; text-align: center; font-family: var(--heading-font); font-size: 13px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px; }
.ba-gain b { color: var(--mm-accent); font-size: 17px; font-weight: 900; }

/* ---- STANDARDISED DOSSIER (CV solution) ---- */
.dossier-wrap { position: relative; }
.dossier { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: 0 26px 60px -24px rgba(2,8,28,0.4); overflow: hidden; }
.dossier-top { background: var(--navy); color: #fff; padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
.dossier-top .d-ava { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg,#33406b,#1a2758); border: 1.5px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-family: var(--heading-font); font-weight: 800; font-size: 15px; flex-shrink: 0; }
.dossier-top .d-name { font-family: var(--heading-font); font-size: 16px; font-weight: 800; }
.dossier-top .d-role { font-size: 12.5px; color: #fff; margin-top: 2px; }
.dossier-top .d-charte { margin-left: auto; font-family: var(--heading-font); font-size: 10.5px; font-weight: 700; color: var(--mint); background: rgba(61,228,207,0.12); border: 1px solid rgba(61,228,207,0.3); border-radius: var(--radius-full); padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dossier-top .d-charte svg { width: 13px; height: 13px; }
.dossier-body { padding: 20px 22px; }
.dossier-sec { font-family: var(--heading-font); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-accent); margin: 0 0 10px; }
.dossier-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.dossier-chips span { font-family: var(--heading-font); font-size: 11.5px; font-weight: 600; color: var(--gray-700); background: var(--gray-100); border-radius: 6px; padding: 5px 11px; }
.dossier-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.dossier-lines .ln { height: 8px; border-radius: 4px; background: #e9edf6; }
.dossier-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--gray-200); padding-top: 16px; flex-wrap: wrap; }
.fmt-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fmt-pills span { font-family: var(--heading-font); font-size: 10.5px; font-weight: 700; color: var(--gray-600); border: 1px solid var(--gray-200); border-radius: 6px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 5px; }
.fmt-pills span svg { width: 12px; height: 12px; color: var(--mm-accent); }
.dossier-quality { display: flex; gap: 13px; }
.dossier-quality b { font-family: var(--heading-font); font-size: 11.5px; font-weight: 700; color: var(--tertiary-800); display: inline-flex; align-items: center; gap: 5px; }
.dossier-quality b svg { width: 13px; height: 13px; color: var(--tertiary-600); }
.dossier-badge { position: absolute; top: -16px; right: -10px; background: var(--mm-accent); color: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 14px 30px -8px rgba(76,108,226,0.6); text-align: center; }
.dossier-badge .n { font-family: var(--heading-font); font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.dossier-badge .l { font-size: 9.5px; font-weight: 600; opacity: 0.85; margin-top: 3px; letter-spacing: 0.02em; }

/* ---- DARK VIZ PANEL (network / chain) ---- */
.viz-panel { position: relative; background: linear-gradient(162deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.13); border-radius: 18px; padding: 24px 24px 22px; box-shadow: 0 30px 70px -22px rgba(2,8,28,0.65); }
.viz-panel .viz-eyebrow { font-family: var(--heading-font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); margin-bottom: 5px; }
.viz-panel .viz-title { font-family: var(--heading-font); font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: 4px; }

/* network */
.netviz { position: relative; width: 100%; aspect-ratio: 400 / 320; margin: 8px 0 2px; }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 2; }
.net-ava { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--heading-font); font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(150deg,#39477a,#1a2758); border: 1.5px solid rgba(255,255,255,0.2); box-shadow: 0 6px 16px rgba(0,0,0,0.35); position: relative; }
.net-ava .badge { position: absolute; bottom: -5px; right: -7px; background: var(--mint); color: var(--navy); font-family: var(--heading-font); font-size: 9px; font-weight: 800; border-radius: var(--radius-full); padding: 2px 5px; border: 1.5px solid var(--navy-deep, #091645); }
.net-node .lbl { font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; }
.net-hub .net-ava { width: 66px; height: 66px; font-size: 12px; text-align: center; line-height: 1.05; background: linear-gradient(150deg, var(--mm-accent), #3650b8); border-color: rgba(255,255,255,0.32); box-shadow: 0 0 0 7px rgba(76,108,226,0.16), 0 12px 30px rgba(76,108,226,0.45); }
.net-cand { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--mint); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(61,228,207,0.16); z-index: 1; }
.viz-stat { display: inline-flex; align-items: center; gap: 9px; background: rgba(61,228,207,0.1); border: 1px solid rgba(61,228,207,0.28); border-radius: 12px; padding: 11px 15px; margin-top: 6px; }
.viz-stat .n { font-family: var(--heading-font); font-size: 22px; font-weight: 900; color: var(--mint); letter-spacing: -0.02em; line-height: 1; }
.viz-stat .l { font-size: 12px; color: #fff; line-height: 1.3; }

/* chain (apport) */
.chainviz { display: flex; align-items: stretch; gap: 0; margin: 14px 0 4px; }
.chain-node { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.chain-node .c-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(76,108,226,0.18); color: #aec0f5; border: 1px solid rgba(76,108,226,0.3); }
.chain-node.is-end .c-ic { background: rgba(61,228,207,0.14); color: var(--mint); border-color: rgba(61,228,207,0.32); }
.chain-node .c-ic svg { width: 21px; height: 21px; }
.chain-node .c-ava { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--heading-font); font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(150deg,#39477a,#1a2758); border: 1.5px solid rgba(255,255,255,0.2); }
.chain-node .c-t { font-family: var(--heading-font); font-size: 12.5px; font-weight: 800; color: #fff; }
.chain-node .c-d { font-size: 10.5px; line-height: 1.4; color: #fff; }
.chain-arrow { display: flex; align-items: center; color: var(--mint); padding: 0 3px; flex-shrink: 0; }
.chain-arrow svg { width: 20px; height: 20px; }
.chain-out { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(61,228,207,0.1); border: 1px solid rgba(61,228,207,0.28); border-radius: 12px; padding: 13px; }
.chain-out svg { width: 18px; height: 18px; color: var(--mint); }
.chain-out .t { font-family: var(--heading-font); font-size: 13.5px; font-weight: 700; color: #fff; }
.chain-out .t b { color: var(--mint); font-weight: 900; }

@media (max-width: 980px){
  .accomp-band .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px){
  .ba { grid-template-columns: 1fr; }
  .ba-mid { flex-direction: row; padding: 4px 0; }
  .ba-arrow { transform: rotate(90deg); }
  .chainviz { flex-direction: column; }
  .chain-arrow { transform: rotate(90deg); justify-content: center; padding: 3px 0; }
}