/* ===================================================
       SIMAG BANQUE — page d'accueil dédiée
       Palette : registre comptable, pas de vert néon,
       pas de crème/terracotta générique.
    =================================================== */
    body.bq-page {
      --bq-ink:    #142A2E;   /* fond sombre, encre de registre   */
      --bq-ink-2:  #1C3A3F;
      --bq-ledger: #1F5C4D;   /* vert grand-livre, sourd           */
      --bq-ledger-l:#2E7A66;
      --bq-brass:  #B08D57;   /* laiton, accent de valeur          */
      --bq-paper:  #EEEDE4;   /* papier, pas de crème classique    */
      --bq-line:   #D8D6C9;
      --bq-slate:  #55635F;
      --bq-white:  #FFFFFF;
      background: var(--bq-paper);
      font-family: 'IBM Plex Sans', sans-serif;
      color: var(--bq-ink);
    }

    body.bq-page .bq-serif { font-family: 'Fraunces', serif; }
    body.bq-page .bq-mono  { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

    body.bq-page a { color: inherit; }
    body.bq-page section { padding: 0; }

    /* ---------- HERO ---------- */
    .bq-hero {
      background: var(--bq-ink);
      background-image: radial-gradient(circle at 82% 18%, rgba(176,141,87,0.16), transparent 45%);
      padding: 72px 48px 96px;
    }
    .bq-hero-grid {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 56px;
      align-items: center;
    }
    .bq-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bq-brass);
      margin: 0 0 22px;
    }
    .bq-eyebrow::before {
      content: "";
      width: 18px; height: 1px;
      background: var(--bq-brass);
      display: inline-block;
    }
    .bq-hero h1 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: clamp(34px, 4vw, 50px);
      line-height: 1.14;
      color: var(--bq-white);
      margin: 0 0 22px;
    }
    .bq-hero h1 em {
      font-style: italic;
      color: var(--bq-ledger-l);
    }
    .bq-hero p.bq-lead {
      font-size: 16px;
      line-height: 1.7;
      color: #C9D2CF;
      max-width: 46ch;
      margin: 0 0 34px;
      font-weight: 400;
    }
    .bq-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
    .bq-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 600;
      font-size: 14px;
      padding: 14px 26px;
      border-radius: 8px;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .bq-btn:focus-visible {
      outline: 2px solid var(--bq-brass);
      outline-offset: 3px;
    }
    .bq-btn-primary {
      background: var(--bq-brass);
      color: var(--bq-ink);
    }
    .bq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(176,141,87,0.28); }
    .bq-btn-ghost {
      background: transparent;
      color: var(--bq-white);
      border: 1px solid rgba(255,255,255,0.28);
    }
    .bq-btn-ghost:hover { border-color: var(--bq-white); }

    .bq-platforms {
      display: flex;
      gap: 22px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      color: #8FA19C;
    }
    .bq-platforms span::before { content: "— "; color: var(--bq-brass); }

    /* ---------- Carte "relevé" — élément signature ---------- */
    .bq-statement {
      background: var(--bq-white);
      border-radius: 14px;
      padding: 30px 30px 26px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.35);
      position: relative;
    }
    .bq-statement::before {
      content: "";
      position: absolute;
      inset: 10px 10px auto 10px;
      height: 100%;
      background: var(--bq-ledger);
      border-radius: 14px;
      transform: translate(14px, 14px);
      z-index: -1;
      opacity: 0.9;
    }
    .bq-statement-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 1px solid var(--bq-line);
      padding-bottom: 16px;
      margin-bottom: 18px;
    }
    .bq-statement-head span.bq-tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--bq-slate);
    }
    .bq-statement-head strong {
      font-family: 'Fraunces', serif;
      font-size: 26px;
      color: var(--bq-ledger);
    }
    .bq-accounts { list-style: none; margin: 0 0 22px; padding: 0; }
    .bq-accounts li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px dashed var(--bq-line);
      font-size: 13.5px;
    }
    .bq-accounts li:last-child { border-bottom: none; }
    .bq-accounts .bq-dot {
      width: 8px; height: 8px; border-radius: 50%;
      display: inline-block; margin-right: 10px;
    }
    .bq-accounts .bq-amount { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
    .bq-amount.bq-pos { color: var(--bq-ledger); }
    .bq-amount.bq-neg { color: #A04B3C; }

    .bq-rubriques {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 96px;
      margin-bottom: 6px;
    }
    .bq-rubriques .bq-bar-col { flex: 1; text-align: center; }
    .bq-rubriques .bq-bar {
      width: 100%;
      background: var(--bq-ledger);
      border-radius: 4px 4px 0 0;
      margin: 0 auto;
      transform-origin: bottom;
      animation: bq-grow 1.1s ease-out both;
    }
    .bq-rubriques .bq-bar-col:nth-child(2) .bq-bar { background: var(--bq-brass); animation-delay: .1s; }
    .bq-rubriques .bq-bar-col:nth-child(3) .bq-bar { background: var(--bq-ledger-l); animation-delay: .2s; }
    .bq-rubriques .bq-bar-col:nth-child(4) .bq-bar { background: #8B9E99; animation-delay: .3s; }
    .bq-rubriques .bq-label {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      color: var(--bq-slate);
      margin-top: 8px;
      letter-spacing: 0.03em;
    }
    @keyframes bq-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @media (prefers-reduced-motion: reduce) {
      .bq-rubriques .bq-bar { animation: none; }
    }

    /* ---------- Bandeau chiffres ---------- */
    .bq-strip {
      background: var(--bq-paper);
      border-bottom: 1px solid var(--bq-line);
      padding: 34px 48px;
    }
    .bq-strip-grid {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
    }
    .bq-strip-grid strong {
      display: block;
      font-family: 'Fraunces', serif;
      font-size: 26px;
      color: var(--bq-ledger);
    }
    .bq-strip-grid span {
      font-size: 12.5px;
      color: var(--bq-slate);
    }

    /* ---------- Fonctionnalités ---------- */
    .bq-features { padding: 88px 48px; }
    .bq-features-inner { max-width: 1120px; margin: 0 auto; }
    .bq-section-head { max-width: 560px; margin-bottom: 48px; }
    .bq-section-head .bq-eyebrow { color: var(--bq-ledger); }
    .bq-section-head .bq-eyebrow::before { background: var(--bq-ledger); }
    .bq-section-head h2 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: clamp(26px, 3vw, 34px);
      margin: 0 0 12px;
    }
    .bq-section-head p { color: var(--bq-slate); line-height: 1.7; margin: 0; }

    .bq-grid4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .bq-card {
      background: var(--bq-white);
      border: 1px solid var(--bq-line);
      border-radius: 12px;
      padding: 28px 24px;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .bq-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20,42,46,0.08); }
    .bq-card .bq-icon {
      width: 40px; height: 40px;
      border-radius: 9px;
      background: var(--bq-ink);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
    }
    .bq-card .bq-icon svg { stroke: var(--bq-brass); }
    .bq-card h3 { font-size: 15.5px; margin: 0 0 8px; font-weight: 600; }
    .bq-card p { font-size: 13.5px; color: var(--bq-slate); line-height: 1.65; margin: 0; }

    /* ---------- Aperçu tableau de bord ---------- */
    .bq-preview {
      background: var(--bq-ink-2);
      padding: 88px 48px;
    }
    .bq-preview-grid {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 56px;
      align-items: center;
    }
    .bq-preview .bq-eyebrow { color: var(--bq-brass); }
    .bq-preview h2 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      color: var(--bq-white);
      font-size: clamp(24px, 3vw, 32px);
      margin: 0 0 16px;
    }
    .bq-preview p { color: #C9D2CF; line-height: 1.75; margin: 0 0 26px; }
    .bq-preview ul { list-style: none; padding: 0; margin: 0; }
    .bq-preview ul li {
      display: flex; gap: 10px; align-items: flex-start;
      font-size: 14px; color: #E4E8E6; margin-bottom: 14px;
    }
    .bq-preview ul li::before { content: "＋"; color: var(--bq-brass); font-weight: 700; }

    .bq-dash {
      background: var(--bq-white);
      border-radius: 14px;
      padding: 26px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    }
    .bq-dash-head { display: flex; justify-content: space-between; margin-bottom: 20px; }
    .bq-dash-head span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--bq-slate); }
    .bq-dash-chart { display: flex; align-items: flex-end; gap: 14px; height: 140px; margin-bottom: 20px; }
    .bq-dash-chart .bq-col { flex: 1; }
    .bq-dash-chart .bq-fill {
      width: 100%; border-radius: 5px 5px 0 0;
      background: var(--bq-ledger);
      animation: bq-grow 1.2s ease-out both;
    }
    .bq-dash-chart .bq-col:nth-child(odd) .bq-fill { background: var(--bq-brass); }
    .bq-dash-legend { display: flex; gap: 18px; flex-wrap: wrap; }
    .bq-dash-legend span {
      font-size: 11.5px; color: var(--bq-slate);
      display: flex; align-items: center; gap: 6px;
    }
.bq-dash-shot {
  display: block;
  width: 100%;
  height: 150px;              /* ← ajuste cette valeur pour la hauteur du bandeau */
  object-fit: cover;          /* recadre au lieu d'écraser l'image */
  object-position: 30% 78%;    /* pousse le cadrage vers le graphique, coupe les filtres du haut */
  border-radius: 8px;
  border: 1px solid var(--bq-line);
}
    .bq-dash-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

    /* ---------- Sécurité / confiance ---------- */
    .bq-trust { padding: 72px 48px; background: var(--bq-paper); }
    .bq-trust-inner {
      max-width: 1120px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;
    }
    .bq-trust-item { display: flex; gap: 14px; }
    .bq-trust-item .bq-icon {
      width: 34px; height: 34px; flex-shrink: 0;
      border-radius: 8px; background: var(--bq-ledger);
      display: flex; align-items: center; justify-content: center;
    }
    .bq-trust-item .bq-icon svg { stroke: var(--bq-white); }
    .bq-trust-item h4 { margin: 0 0 4px; font-size: 14.5px; }
    .bq-trust-item p { margin: 0; font-size: 13px; color: var(--bq-slate); line-height: 1.6; }

    /* ---------- CTA final ---------- */
    .bq-final {
      background: var(--bq-ledger);
      padding: 76px 48px;
      text-align: center;
    }
    .bq-final h2 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      color: var(--bq-white);
      font-size: clamp(26px, 3.2vw, 36px);
      margin: 0 0 14px;
    }
    .bq-final p { color: #DCEAE4; margin: 0 0 30px; }
    .bq-final .bq-btn-primary { background: var(--bq-white); color: var(--bq-ledger); }
    .bq-final .bq-btn-primary:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.2); }

    @media (max-width: 860px) {
      .bq-hero-grid, .bq-preview-grid { grid-template-columns: 1fr; }
      .bq-grid4, .bq-strip-grid, .bq-trust-inner { grid-template-columns: repeat(2, 1fr); }
      .bq-hero, .bq-features, .bq-preview, .bq-trust, .bq-final, .bq-strip { padding-left: 24px; padding-right: 24px; }
    }
    @media (max-width: 540px) {
      .bq-grid4, .bq-strip-grid, .bq-trust-inner { grid-template-columns: 1fr; }
    }