/* BAMIYAN.AI — BRAND KIT v2.0 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Sora:wght@400;500;600;700&display=swap');

:root {
  --bm-blue-deep: #0B2E6E;
  --bm-blue: #15409B;
  --bm-blue-accent: #2F6BE3;
  --bm-blue-soft: #9DC2FF;
  --bm-ink: #0C1322;
  --bm-body: #34384A;
  --bm-gray: #5C6473;
  --bm-muted: #9499A2;
  --bm-line: #E8E9ED;
  --bm-panel: #F5F6F8;
  --bm-paper: #FFFFFF;
  --bm-font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bm-font-mono: 'Space Grotesk', 'Sora', sans-serif;
  --bm-radius: 14px;
  --bm-radius-sm: 10px;
  --bm-shadow: 0 14px 34px rgba(21,64,155,.18);
  --bm-shadow-sm: 0 1px 3px rgba(12,19,34,.08);
}

/* ── TYPOGRAPHY ── */
.bm-eyebrow { font-family:var(--bm-font-sans); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bm-blue); margin:0 0 14px; }
.bm-h1 { font-family:var(--bm-font-sans); font-weight:700; font-size:clamp(28px,5vw,56px); line-height:1.1; letter-spacing:-.025em; color:var(--bm-ink); margin:0 0 18px; }
.bm-h2 { font-family:var(--bm-font-sans); font-weight:700; font-size:clamp(22px,3.4vw,38px); line-height:1.15; letter-spacing:-.02em; color:var(--bm-ink); margin:0 0 16px; }
.bm-h3 { font-family:var(--bm-font-sans); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--bm-ink); margin:0 0 8px; }
.bm-lead { font-family:var(--bm-font-sans); font-weight:400; font-size:clamp(14px,1.5vw,18px); line-height:1.65; color:var(--bm-gray); margin:0; }
.bm-body { font-family:var(--bm-font-sans); color:var(--bm-body); line-height:1.6; }
.bm-dot { color:var(--bm-blue-accent); }
.bm-num { font-family:var(--bm-font-mono); font-weight:700; color:var(--bm-blue); }

/* ── BUTTONS ── */
.bm-btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--bm-font-sans); font-weight:600; font-size:15px; line-height:1; text-decoration:none; cursor:pointer; padding:15px 26px; border-radius:10px; border:1.5px solid transparent; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.bm-btn:hover { transform:translateY(-1px); text-decoration:none; }
.bm-btn--primary { background:var(--bm-blue); color:#fff; box-shadow:var(--bm-shadow); }
.bm-btn--primary:hover { background:#11357f; color:#fff; }
.bm-btn--ghost { background:transparent; color:var(--bm-blue); border-color:var(--bm-line); }
.bm-btn--ghost:hover { border-color:var(--bm-blue); }
.bm-btn--on-dark { background:#fff; color:var(--bm-blue); }
.bm-btn--on-dark:hover { background:var(--bm-blue-soft); color:var(--bm-ink); }

/* ── TILES / LOGO ── */
.bm-tile { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:13px; background:var(--bm-blue); color:#fff; font-family:var(--bm-font-mono); font-weight:700; font-size:38px; line-height:1; letter-spacing:-.03em; }
.bm-tile > span { transform:translateY(-2px); }
.bm-tile--ghost { background:#fff; color:var(--bm-blue); box-shadow:var(--bm-shadow-sm); }
.bm-logo { display:inline-flex; align-items:center; gap:14px; }
.bm-logo__name { font-family:var(--bm-font-sans); font-weight:600; font-size:26px; letter-spacing:-.02em; color:var(--bm-ink); }

/* ── CARDS ── */
.bm-card { background:#fff; border:1px solid var(--bm-line); border-radius:var(--bm-radius); padding:28px; box-shadow:var(--bm-shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.bm-card:hover { transform:translateY(-3px); box-shadow:var(--bm-shadow); }
.bm-card--flat:hover { transform:none; box-shadow:var(--bm-shadow-sm); }
.bm-feature__icon { width:46px; height:46px; border-radius:11px; background:var(--bm-panel); color:var(--bm-blue); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:22px; }
.bm-feature__icon--solid { background:var(--bm-blue); color:#fff; }

/* ── STEPS ── */
.bm-step { display:flex; gap:16px; align-items:flex-start; }
.bm-step__n { flex:none; font-family:var(--bm-font-mono); font-weight:700; font-size:15px; color:var(--bm-blue); width:34px; height:34px; border-radius:9px; background:var(--bm-panel); display:flex; align-items:center; justify-content:center; }

/* ── STATS / CHIP / LINK ── */
.bm-stat__value { font-family:var(--bm-font-sans); font-weight:700; font-size:clamp(30px,4vw,46px); color:var(--bm-blue); line-height:1; letter-spacing:-.02em; }
.bm-stat__label { font-family:var(--bm-font-sans); font-size:13px; color:var(--bm-gray); margin-top:8px; }
.bm-chip { display:inline-flex; align-items:center; gap:7px; font-family:var(--bm-font-sans); font-size:12.5px; font-weight:500; color:var(--bm-blue); background:rgba(47,107,227,.10); padding:7px 13px; border-radius:999px; }
.bm-link { color:var(--bm-blue-accent); text-decoration:none; font-weight:600; }

/* ── SP PB OVERRIDES ── */
body, .sppb-row-container, .sppb-addon-content { font-family:var(--bm-font-sans); color:var(--bm-body); }
.sppb-addon-title, h1.sppb-addon-title, h2.sppb-addon-title, h3.sppb-addon-title { font-family:var(--bm-font-sans) !important; font-weight:700 !important; letter-spacing:-.02em; color:var(--bm-ink); }
.sppb-btn-primary { background-color:var(--bm-blue) !important; border-color:var(--bm-blue) !important; border-radius:10px !important; font-family:var(--bm-font-sans) !important; font-weight:600 !important; }
.sppb-btn-primary:hover { background-color:#11357f !important; border-color:#11357f !important; }
.sppb-btn-default { background:transparent !important; color:var(--bm-blue) !important; border:1.5px solid var(--bm-line) !important; border-radius:10px !important; font-family:var(--bm-font-sans) !important; font-weight:600 !important; }
.sppb-icon i, .sppb-feature-box-icon i { color:var(--bm-blue); }

/* ── HEADER ── */
#sp-header { background-color:#ffffff; padding-top:28px; padding-bottom:28px; }

/* ── SP PB sections : pleine largeur ── */
.sp-page-builder .page-content .sppb-section { max-width:none !important; width:100% !important; }

/* ── NAVIGATION ── */
/* Desktop : menu visible, hamburger caché (Bootstrap gère) */
/* Mobile  : hamburger visible, ul caché (Bootstrap gère via d-none d-lg-block) */
/* #sp-menu .sp-megamenu-parent { display:none !important; } */

/* ── MENU — charte Bamiyan.ai (Sora) ── */
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
  font-family: 'Sora', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  letter-spacing: -.01em !important;
  color: var(--bm-ink, #0C1322) !important;
}
#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li > a:hover {
  color: var(--bm-blue, #15409B) !important;
}
/* ── OFFCANVAS MOBILE — charte Bamiyan.ai ── */
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  font-family: 'Sora', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: -.01em !important;
  color: #0C1322 !important;
  text-transform: none !important;
  opacity: 1 !important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover {
  color: var(--bm-blue, #15409B) !important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
  color: var(--bm-blue, #15409B) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — breakpoint 768px
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Header padding mobile ── */
  #sp-header { min-height:132px !important; height:auto !important; padding-top:24px !important; padding-bottom:24px !important; }

  /* ── Hamburger menu visible ── */
  #sp-menu { display:block !important; }
  .offcanvas-toggler-right { display:flex !important; }

  /* ── Sécurité overflow ── */
  body { overflow-x:hidden; }
  .sppb-section, .sppb-row-container, .sppb-addon-content { overflow-x:hidden; }

  /* ── SP PB : padding sections réduit ── */
  .sppb-section [style*="padding"] { }
  .sppb-section > .sppb-row-container > .sppb-row { padding-left:16px !important; padding-right:16px !important; }

  /* ── Grids inline → 1 colonne ── */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Flex horizontaux → colonne ── */
  [style*="display:flex"][style*="justify-content:space-between"],
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ── Trust strip (logos inline) → wrap ── */
  [style*="display:flex"][style*="align-items:center"][style*="justify-content:center"][style*="gap:40px"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
  }

  /* ── Max-widths : permettre le scroll ── */
  [style*="max-width:1100px"],
  [style*="max-width:1200px"],
  [style*="max-width:800px"],
  [style*="max-width:720px"],
  [style*="max-width:680px"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ── Hero homepage : paddings réduits ── */
  [style*="88px 0px 88px"] { padding: 48px 16px !important; }
  [style*="100px 0px 80px"] { padding: 64px 16px 48px !important; }
  [style*="80px 0px 100px"] { padding: 48px 16px 64px !important; }
  [style*="80px 0px 80px"]  { padding: 48px 16px !important; }

  /* ── Hero : boutons → colonne centrée ── */
  [style*="margin-top:8px"] > .bm-btn,
  [style*="margin-top:28px"] > .bm-btn { width:100%; justify-content:center; }
  [style*="display:flex"][style*="gap:16px"] > a.bm-btn,
  [style*="display:inline-flex"][style*="gap:16px"] > a.bm-btn { display:block; width:100%; text-align:center; }

  /* ── Boutons côte à côte → empilés ── */
  .bm-btn + .bm-btn { margin-top: 12px; }

  /* ── Cards en grid : 1 colonne ── */
  .bm-card { margin-bottom: 16px; }

  /* ── Image consultant → pleine largeur ── */
  [style*="height:340px"] { height: 220px !important; object-fit: cover !important; }

  /* ── Stats : flex wrap ── */
  [style*="display:flex"][style*="gap:60px"],
  [style*="display:flex"][style*="gap:48px"],
  [style*="display:flex"][style*="gap:40px"] {
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: center !important;
  }

  /* ── Footer ── */
  [style*="padding-bottom:28px"][style*="border-bottom"] {
    flex-direction: column !important;
    gap: 28px !important;
  }
  [style*="padding-top:18px"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* ── Contact form : grid 2 cols → 1 ── */
  #bm-contact-form > div:first-of-type { grid-template-columns: 1fr !important; }

  /* ── Methodology : sidebar encart → sous les étapes ── */
  [style*="align-items:start"][style*="gap:3rem"] { gap: 2rem !important; }

  /* ── "What we deliver" card sombre ── */
  [style*="border-radius:20px"][style*="padding:36px"] { padding: 24px !important; }

}

  /* ── Expertise cards : réduire le double gap inter-sections (48+48 px → 8+8 px) ── */
  #section-id-1782159009710 { padding-bottom: 8px !important; }
  #section-id-1782159010889 { padding-top: 8px !important; }

  /* ── Hero : espace entre les boutons et la card "Ce que nous livrons" ── */
  [style*="background:#0C1322"][style*="border-radius:20px"],
  [style*="background: #0C1322"][style*="border-radius:20px"] {
    margin-top: 24px !important;
  }

/* Header — breakpoints 767px et 575px (template force height:56px et padding-top:0) */
@media (max-width: 767px) {
  #sp-header { min-height:132px !important; height:auto !important; padding-top:24px !important; padding-bottom:24px !important; }
}
@media (max-width: 575px) {
  #sp-header { min-height:132px !important; height:auto !important; padding-top:24px !important; padding-bottom:24px !important; }
}

/* Petit mobile (<480px) */
@media (max-width: 480px) {
  .bm-h1 { font-size: 26px !important; }
  .bm-h2 { font-size: 20px !important; }
  .bm-h3 { font-size: 16px !important; }
  .bm-lead { font-size: 14px !important; }
  .bm-btn { font-size: 14px; padding: 13px 20px; width:100%; justify-content:center; box-sizing:border-box; }
  [style*="clamp(2rem"] { font-size: 24px !important; }
  [style*="clamp(1.5rem"] { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — réduction espaces heading → contenu
   Sections concernées : PROGRAMMES / EXPERTISE / WHY BAMIYAN
   SP Builder force padding:48px sur toutes les sections mobile
   → on réduit pb des headings et pt des contenus
═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* PROGRAMMES — heading (pb:0 desktop → pb:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159009567 { padding-bottom: 8px !important; }
  /* PROGRAMMES — contenu (pt:24 desktop → pt:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159009710 { padding-top: 8px !important; padding-bottom: 8px !important; }
  /* PROGRAMMES — cards (pt:0 desktop → pt:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159010889 { padding-top: 8px !important; }

  /* EXPERTISE — heading (pb:0 desktop → pb:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159014582 { padding-bottom: 8px !important; }
  /* EXPERTISE — contenu (pt:24 desktop → pt:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159010700 { padding-top: 8px !important; }

  /* WHY BAMIYAN — heading (pb:0 desktop → pb:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159005638 { padding-bottom: 8px !important; }
  /* WHY BAMIYAN — contenu (pt:0 desktop → pt:48 mobile) */
  .sp-page-builder .page-content #section-id-1782159012053 { padding-top: 8px !important; }
}

/* ── MENU DROPDOWN (niveau 2+) — charte Bamiyan.ai ── */
#sp-menu .sp-megamenu-parent .sp-dropdown li > a,
#sp-menu .sp-megamenu-parent .sp-dropdown li > span,
#sp-menu ul.sp-dropdown li > a {
  font-family: 'Sora', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--bm-ink, #0C1322) !important;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li > a:hover,
#sp-menu ul.sp-dropdown li > a:hover {
  color: var(--bm-blue, #15409B) !important;
}
/* Offcanvas niveau 2 */
.offcanvas-menu .offcanvas-inner ul.menu ul li > a {
  font-family: 'Sora', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: #0C1322 !important;
}