/* La page d'accueil : sa typographie, le rythme de ses sections, et les blocs qui n'existent que
 * sur elle — le hero, les quatre établis, l'établi en démonstration, les réalisations, les règles
 * de la maison et les chiffres.
 *
 * Chargée après la feuille commune, dont elle reprend les valeurs du dessin.
 */

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-acc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px }
section { padding: 84px 0 }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 700;
  font-family: var(--bnm-display); text-wrap: balance }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 14px }
.bnm-acc-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-acc-lead { font-size: 1.12rem; color: var(--bnm-ink-soft); max-width: 60ch }

.bnm-acc-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;
  font-family: inherit }
/* Le bouton fantôme porte `.bnm-acc-btn` et `.bnm-pub-btn-ghost` ; les deux fixent la couleur de
   bordure, et c'est celle de la classe partagée que ces deux déclarations appliquent. */
.bnm-acc-btn.bnm-pub-btn-ghost { border-color: var(--bnm-line) }
.bnm-acc-btn.bnm-pub-btn-ghost:hover { border-color: #d4d0c8 }

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.bnm-acc-hero { padding: 92px 0 76px; position: relative; overflow: hidden }
.bnm-acc-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 }
/* Le conteneur du hero porte `.bnm-acc-wrap` et `.bnm-pub-hero-inner` ; les deux fixent la largeur
   maximale, et c'est celle de la classe partagée que cette déclaration applique. */
.bnm-acc-wrap.bnm-pub-hero-inner { max-width: 52rem }
.bnm-acc-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin-bottom: 22px }
.bnm-acc-hero h1 .bnm-acc-accent { color: var(--bnm-indigo) }
.bnm-acc-hero .bnm-acc-lead { font-size: 1.2rem; max-width: 54ch; margin-bottom: 32px }

/* ── les quatre établis ───────────────────────────────────────────────────────────────────── */
.bnm-acc-workbenches { background: var(--bnm-white); border-top: 1px solid var(--bnm-line);
  border-bottom: 1px solid var(--bnm-line) }
.bnm-acc-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px }
@media (max-width: 860px) { .bnm-acc-grid4 { grid-template-columns: 1fr } }
.bnm-acc-workbench { display: flex; flex-direction: column; border: 1px solid var(--bnm-line);
  border-radius: var(--bnm-radius); padding: 30px; background: var(--bnm-paper); position: relative }
.bnm-acc-workbench .bnm-acc-no { font-family: var(--bnm-display); font-size: .78rem;
  font-weight: 700; letter-spacing: .12em; color: var(--bnm-muted) }
.bnm-acc-workbench h3 { font-size: 1.42rem; margin: 8px 0 10px }
.bnm-acc-workbench p { color: var(--bnm-ink-soft); margin-bottom: 16px }
.bnm-acc-workbench .bnm-acc-limit { margin-top: auto; padding-top: 16px;
  border-top: 1px dashed #d9d4ca; font-size: .9rem; color: var(--bnm-amber-ink); font-weight: 600 }
.bnm-acc-workbench .bnm-acc-go { display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-family: var(--bnm-display); font-weight: 650; color: var(--bnm-indigo) }
.bnm-acc-workbench:hover .bnm-acc-go { gap: 12px }
.bnm-acc-workbench--link { transition: transform .14s ease, box-shadow .22s ease }
.bnm-acc-workbench--link:hover { transform: translateY(-3px); box-shadow: var(--bnm-shadow) }

/* ── démo vivante ─────────────────────────────────────────────────────────────────────────── */
.bnm-acc-bench { background: radial-gradient(120% 90% at 78% -10%, #2a2550, transparent 55%),
  radial-gradient(90% 80% at 0% 110%, #241f47, transparent 55%), var(--bnm-bench); color: #eae8ff;
  position: relative; overflow: hidden }
.bnm-acc-bench:before { content: ""; position: absolute; inset: 0; opacity: .5;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask: radial-gradient(120% 100% at 50% 30%, #000, transparent 85%) }
.bnm-acc-bench .bnm-acc-wrap { position: relative }
.bnm-acc-bench .bnm-acc-eyebrow { background: rgba(255, 255, 255, .1); color: #c7c5ee }
.bnm-acc-bench h2 { color: #fff; max-width: 20ch }
.bnm-acc-bench p { color: #c3c1e6; font-size: 1.12rem; max-width: 56ch }
.bnm-acc-bench .bnm-acc-fine { color: #8f8cc0; font-size: .95rem; font-style: italic;
  margin-top: 16px }
.bnm-acc-demo-btn { display: inline-flex; align-items: center; gap: 11px; margin-top: 26px;
  font-family: var(--bnm-display); font-weight: 650; font-size: 1.02rem;
  color: #1e1b4b; background: #fff; padding: 14px 24px; border: none; border-radius: 100px;
  cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  transition: transform .12s ease }
.bnm-acc-demo-btn:hover { transform: translateY(-2px) }
.bnm-acc-demo-btn:focus-visible { outline: 3px solid var(--bnm-indigo-2); outline-offset: 3px }

/* ── ce qui sort de l'atelier ─────────────────────────────────────────────────────────────── */
.bnm-acc-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px }
@media (max-width: 860px) { .bnm-acc-shots { grid-template-columns: 1fr } }
.bnm-acc-shot { border: 1px solid var(--bnm-line); border-radius: var(--bnm-radius);
  overflow: hidden; background: var(--bnm-white); box-shadow: var(--bnm-shadow);
  transition: transform .16s ease, box-shadow .25s ease }
.bnm-acc-shot:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20, 26, 46, .14) }
.bnm-acc-shot .bnm-acc-ph { aspect-ratio: 4/3; overflow: hidden; background: #eceae5 }
.bnm-acc-shot .bnm-acc-ph img { width: 100%; height: 100%; object-fit: cover }
.bnm-acc-shot .bnm-acc-cap { padding: 18px 20px }
.bnm-acc-shot .bnm-acc-cap b { display: block; font-family: var(--bnm-display); font-size: 1.05rem;
  margin-bottom: 4px }
.bnm-acc-shot .bnm-acc-cap span { color: var(--bnm-ink-soft); font-size: .93rem }
/* La rangée de boutons qui suit la grille des réalisations : elle s'en détache plus nettement
   que deux cartes voisines ne s'espacent entre elles. */
.bnm-acc-shots-cta { margin-top: 32px }

/* ── la maison ────────────────────────────────────────────────────────────────────────────── */
.bnm-acc-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px }
@media (max-width: 900px) { .bnm-acc-rules { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .bnm-acc-rules { grid-template-columns: 1fr } }
.bnm-acc-rule { padding: 24px; border: 1px solid var(--bnm-line); border-radius: var(--bnm-radius);
  background: var(--bnm-white) }
.bnm-acc-rule h3 { font-size: 1.08rem; margin-bottom: 6px }
.bnm-acc-rule p { color: var(--bnm-ink-soft); font-size: .94rem }

/* ── qui je suis ──────────────────────────────────────────────────────────────────────────── */
.bnm-acc-about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px;
  align-items: center }
@media (max-width: 860px) { .bnm-acc-about-grid { grid-template-columns: 1fr; gap: 28px } }
/* Le second paragraphe se détache du premier, et le bouton des deux. */
.bnm-acc-about-more { margin-top: 14px }
.bnm-acc-about-cta { margin-top: 18px }
.bnm-acc-stats { display: grid; gap: 16px }
.bnm-acc-stat { padding: 22px 24px; border: 1px solid var(--bnm-line);
  border-radius: var(--bnm-radius); background: var(--bnm-white); display: flex;
  align-items: baseline; gap: 16px }
.bnm-acc-stat .bnm-acc-big { font-size: 1.9rem; font-weight: 780; letter-spacing: -.03em;
  color: var(--bnm-indigo); font-family: var(--bnm-display); flex: 0 0 auto }
.bnm-acc-stat .bnm-acc-lbl { font-size: .94rem; color: var(--bnm-ink-soft) }

/* ── contact ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) { .bnm-pub-contact-card { grid-template-columns: 1fr; padding: 36px } }

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

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }