/* La page « Solutions IA & automatisation » : sa typographie, son hero, les deux piliers, les
 * étapes, le bandeau des principes, la présentation et le pied.
 *
 * Vient après `base.css`, dont elle réutilise les valeurs et dont elle surcharge ici les seules
 * règles qui divergent sur cette page.
 */

body { font-family: var(--bnm-font); color: var(--bnm-ink); background: var(--bnm-paper);
  line-height: 1.6; -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
.bnm-ia-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px }
/* Le bloc du hero porte les deux classes. Les deux posent une largeur maximale, et c'est celle du
   hero qui vaut : le sélecteur cite les deux pour passer devant, sans dépendre de l'ordre de
   chargement des feuilles. */
.bnm-ia-wrap.bnm-pub-hero-inner { max-width: 52rem }
/* Le bouton fantôme pose sa bordure par-dessus celle, transparente, que `.bnm-ia-btn` déclare en
   raccourci. Les deux classes sont citées pour que la couleur tienne quel que soit l'ordre de
   chargement des feuilles. */
.bnm-ia-btn.bnm-pub-btn-ghost { border-color: var(--bnm-line) }
section { padding: 88px 0 }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 700; font-family: var(--bnm-display) }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 14px }
.bnm-ia-eyebrow { display: inline-block; font-size: .8rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bnm-indigo); background: #eceaf9; padding: 6px 12px;
  border-radius: 100px; margin-bottom: 20px }
.bnm-ia-lead { font-size: 1.12rem; color: var(--bnm-ink-soft); max-width: 56ch }

.bnm-ia-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: .95rem;
  padding: 11px 20px; border-radius: 100px; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease }

/* ── Le hero ──────────────────────────────────────────────────────────────────────────────── */
.bnm-ia-hero { padding: 92px 0 76px; position: relative; overflow: hidden }
.bnm-ia-hero:before { content: ""; position: absolute; inset: 0; background:
   radial-gradient(60% 60% at 82% 12%, rgba(91, 91, 214, .12), transparent 60%),
   radial-gradient(50% 50% at 8% 90%, rgba(224, 122, 63, .10), transparent 60%); pointer-events: none }
.bnm-ia-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin-bottom: 22px }
.bnm-ia-hero h1 .bnm-ia-accent { color: var(--bnm-indigo); position: relative; white-space: nowrap }
.bnm-ia-hero .bnm-ia-lead { font-size: 1.22rem; max-width: 50ch; margin-bottom: 32px }

/* ── Les piliers ──────────────────────────────────────────────────────────────────────────── */
.bnm-ia-pillars { background: var(--bnm-white); border-top: 1px solid var(--bnm-line);
  border-bottom: 1px solid var(--bnm-line) }
.bnm-ia-pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 8px }
@media (max-width: 820px) { .bnm-ia-pill-grid { grid-template-columns: 1fr } }
.bnm-ia-pillar { border: 1px solid var(--bnm-line); border-radius: var(--bnm-radius); padding: 34px;
  background: var(--bnm-paper); position: relative }
.bnm-ia-pillar.bnm-ia-lead-card { background: linear-gradient(180deg, #f6f5ff, #fbfbff); border-color: #e2def7 }
.bnm-ia-pillar .bnm-ia-tag { font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bnm-indigo) }
.bnm-ia-pillar.bnm-ia-amber .bnm-ia-tag { color: var(--bnm-amber) }
.bnm-ia-pillar h3 { font-size: 1.5rem; margin: 10px 0 8px }
.bnm-ia-pillar p { color: var(--bnm-ink-soft); margin-bottom: 18px }
.bnm-ia-pillar ul { list-style: none; display: grid; gap: 11px }
.bnm-ia-pillar li { display: flex; gap: 11px; font-size: .98rem; color: var(--bnm-ink-soft) }
.bnm-ia-pillar li:before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  border-radius: 6px; background: var(--bnm-indigo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat }
.bnm-ia-pillar.bnm-ia-amber li:before { background: var(--bnm-amber) }

/* ── Les étapes ───────────────────────────────────────────────────────────────────────────── */
.bnm-ia-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px }
@media (max-width: 820px) { .bnm-ia-steps-grid { grid-template-columns: 1fr } }
.bnm-ia-step { padding: 28px; border: 1px solid var(--bnm-line); border-radius: var(--bnm-radius);
  background: var(--bnm-white); box-shadow: var(--bnm-shadow) }
.bnm-ia-step .bnm-ia-num { font-family: var(--bnm-serif); font-size: 1.05rem; font-weight: 700; color: #fff;
  background: var(--bnm-ink); width: 34px; height: 34px; border-radius: 9px; display: grid;
  place-items: center; margin-bottom: 16px }
.bnm-ia-step h3 { font-size: 1.14rem; margin-bottom: 7px }
.bnm-ia-step p { color: var(--bnm-ink-soft); font-size: .96rem }

/* ── Le bandeau des principes ─────────────────────────────────────────────────────────────── */
.bnm-ia-band { background: var(--bnm-indigo-ink); color: #e8e7f5 }
.bnm-ia-band .bnm-ia-eyebrow { background: rgba(255, 255, 255, .1); color: #c7c5ee }
.bnm-ia-band h2 { color: #fff }
.bnm-ia-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 38px }
@media (max-width: 1000px) { .bnm-ia-principles { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .bnm-ia-principles { grid-template-columns: 1fr } }
.bnm-ia-principle { padding: 26px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--bnm-radius); background: rgba(255, 255, 255, .04) }
.bnm-ia-principle h3 { font-size: 1.1rem; color: #fff; margin-bottom: 6px }
.bnm-ia-principle p { color: #b9b7dd; font-size: .95rem }

/* ── La présentation ──────────────────────────────────────────────────────────────────────── */
.bnm-ia-about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: center }
@media (max-width: 820px) { .bnm-ia-about-grid { grid-template-columns: 1fr; gap: 28px } }
/* Le bouton se détache du paragraphe qu'il suit. */
.bnm-ia-about-cta { margin-top: 8px }
.bnm-ia-stats { display: grid; grid-template-columns: 1fr; gap: 16px }
.bnm-ia-stat { padding: 24px; border: 1px solid var(--bnm-line); border-radius: var(--bnm-radius);
  background: var(--bnm-white) }
.bnm-ia-stat .bnm-ia-big { font-size: 2rem; font-weight: 780; letter-spacing: -.03em; color: var(--bnm-indigo) }
.bnm-ia-stat .bnm-ia-lbl { font-size: .9rem; color: var(--bnm-muted) }

/* ── Le contact ───────────────────────────────────────────────────────────────────────────── */
/* La rupture qui repasse la carte de contact sur une seule colonne. */
@media (max-width: 820px) { .bnm-pub-contact-card { grid-template-columns: 1fr; padding: 36px } }

/* ── Le pied ──────────────────────────────────────────────────────────────────────────────── */
footer { padding: 40px 0; color: var(--bnm-muted); font-size: .9rem; border-top: 1px solid var(--bnm-line) }