/* La page « Impression 3D » de l'atelier : sa typographie, le hero posé sur l'établi, les
 * chantiers racontés en texte et en photos, le jeu des deux pièces, les étapes, la franchise,
 * le mot de la fin et le pied.
 *
 * 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 }
.bnm-i3d-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700;
  font-family: var(--bnm-display); text-wrap: balance }

/* ── HERO : l'établi de nuit ──────────────────────────────────────────────────────────────── */
.bnm-i3d-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-i3d-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-i3d-hero { position: relative; padding: 56px 0 66px; display: grid;
  grid-template-columns: .92fr 1.08fr; gap: 52px; align-items: center }
@media (max-width: 940px) {
  .bnm-i3d-hero { grid-template-columns: 1fr; gap: 34px; padding: 48px 0 56px;
    text-align: center }
  .bnm-i3d-hero h1, .bnm-i3d-hero .bnm-i3d-sub, .bnm-i3d-hero .bnm-i3d-sub-explain {
    margin-left: auto; margin-right: auto }
}
.bnm-i3d-kicker { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--bnm-display); font-size: .8rem; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: #b9b7f0; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px; padding: 6px 14px; margin-bottom: 22px }
.bnm-i3d-kicker b { color: var(--bnm-amber); font-weight: 800 }
.bnm-i3d-hero h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); color: #fff; max-width: 13ch;
  margin: 0 0 16px }
.bnm-i3d-hero h1 em { font-style: normal; color: #8fb6f2 }
.bnm-i3d-hero .bnm-i3d-sub { color: #c3c1e6; font-size: 1.15rem; max-width: 40ch; margin: 0 0 10px }
.bnm-i3d-hero .bnm-i3d-sub-explain { font-size: 1rem; color: #a5a2ce; max-width: 46ch }
.bnm-i3d-hero .bnm-i3d-sub-explain b { color: #e8e6ff; font-weight: 600 }

/* ── cadre photo sur l'établi ─────────────────────────────────────────────────────────────── */
.bnm-i3d-shot { position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3) }
.bnm-i3d-shot img { width: 100% }
.bnm-i3d-badge { position: absolute; font-family: var(--bnm-display); font-size: .78rem;
  font-weight: 650;
  background: rgba(20, 18, 37, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: 100px; white-space: nowrap }
.bnm-i3d-badge b { color: var(--bnm-amber); font-weight: 700 }
.bnm-i3d-badge--broken { top: 9%; left: 3.5% }
.bnm-i3d-badge--new { bottom: 7%; left: 3.5% }
@media (max-width: 560px) { .bnm-i3d-badge { font-size: .68rem; padding: 5px 9px } }
.bnm-i3d-shot-note { margin-top: 12px; color: #8f8cc0; font-size: .92rem; font-style: italic;
  text-align: center }

/* ── sections claires : papier millimétré ─────────────────────────────────────────────────── */
section { padding: 74px 0 }
.bnm-i3d-lbl { font-family: var(--bnm-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bnm-amber-ink);
  background: var(--bnm-amber-soft); padding: 5px 12px; border-radius: 100px;
  display: inline-block; margin-bottom: 20px }
/* L'étiquette indigo porte `.bnm-i3d-lbl` et `.bnm-pub-lbl--indigo` ; les deux fixent la couleur
   du texte et le fond, et c'est celle de la classe partagée que cette déclaration applique. */
.bnm-i3d-lbl.bnm-pub-lbl--indigo { color: var(--bnm-indigo); background: #eeecfb }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 18px }
.bnm-i3d-lead { font-size: 1.14rem; color: var(--bnm-ink-soft); margin-bottom: 16px }
.bnm-i3d-mark-am { background: linear-gradient(transparent 62%, rgba(224, 122, 63, .35) 0);
  padding: 0 2px }
.bnm-i3d-signoff { font-family: var(--bnm-display); font-style: italic; color: var(--bnm-ink);
  font-weight: 500; font-size: 1.1rem }

/* ── chantier : texte + photo ─────────────────────────────────────────────────────────────── */
.bnm-i3d-case { display: grid; grid-template-columns: 1.04fr .96fr; gap: 48px;
  align-items: center }
.bnm-i3d-case--flip .bnm-i3d-case-media { order: -1 }
@media (max-width: 880px) {
  .bnm-i3d-case { grid-template-columns: 1fr; gap: 30px }
  .bnm-i3d-case--flip .bnm-i3d-case-media { order: 0 }
}
.bnm-i3d-case-copy { max-width: 56ch }
figure { margin: 0 }
/* La photo d'un objet tenu en main ne remplit pas sa colonne : elle se pose au milieu, à sa
   taille. Le sélecteur de classe l'emporte sur le `figure` ci-dessus, qui annule les marges. */
.bnm-i3d-case-figure { max-width: 400px; margin: 0 auto }
.bnm-i3d-frame { border-radius: var(--bnm-radius); overflow: hidden;
  border: 1px solid var(--bnm-line); box-shadow: var(--bnm-shadow); background: #fff;
  position: relative }
figcaption { margin-top: 11px; color: var(--bnm-muted); font-size: .92rem; line-height: 1.5 }
.bnm-i3d-stack { display: grid; gap: 22px }
.bnm-i3d-stack .bnm-i3d-small { max-width: 82%; margin-left: auto }
@media (max-width: 880px) { .bnm-i3d-stack .bnm-i3d-small { max-width: 100% } }

/* ── callout ──────────────────────────────────────────────────────────────────────────────── */
.bnm-i3d-callout { background: var(--bnm-white); border: 1px solid var(--bnm-line);
  border-left: 4px solid var(--bnm-indigo); border-radius: 14px; padding: 22px 24px;
  box-shadow: var(--bnm-shadow); margin-top: 26px }
.bnm-i3d-callout h3 { font-size: 1.12rem; margin-bottom: 6px }
.bnm-i3d-callout p { color: var(--bnm-ink-soft); font-size: 1rem }

/* ── le petit jeu : laquelle est l'originale ? ────────────────────────────────────────────── */
.bnm-i3d-quiz { max-width: 400px; margin: 0 auto }
.bnm-i3d-quiz .bnm-i3d-frame { background: #f4f2ef }
/* ici, les repères n'apparaissent qu'une fois la réponse donnée */
#quizFrame .bnm-ann-annot { opacity: 0; transition: opacity .45s ease }
#quizFrame.bnm-i3d-revealed .bnm-ann-annot { opacity: 1 }
.bnm-i3d-quiz-ask { font-family: var(--bnm-display); font-size: 1.06rem; font-weight: 600;
  text-align: center; margin: 20px 0 12px }
.bnm-i3d-choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.bnm-i3d-choices button { font-family: var(--bnm-font); font-size: .95rem; font-weight: 600;
  color: var(--bnm-indigo-ink); background: #fff; border: 1px solid var(--bnm-line);
  padding: 11px 20px; border-radius: 100px; cursor: pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
  box-shadow: var(--bnm-shadow) }
.bnm-i3d-choices button:hover { transform: translateY(-2px); border-color: var(--bnm-indigo-2) }
.bnm-i3d-choices button:focus-visible { outline: 3px solid var(--bnm-indigo-2);
  outline-offset: 3px }
.bnm-i3d-choices button[aria-pressed="true"] { background: var(--bnm-indigo); color: #fff;
  border-color: var(--bnm-indigo) }
.bnm-i3d-verdict { margin: 16px auto 0; max-width: 44ch; text-align: center;
  color: var(--bnm-ink-soft); font-size: 1.02rem; min-height: 3.2em }
.bnm-i3d-verdict b { color: var(--bnm-ink) }

/* ── étapes ───────────────────────────────────────────────────────────────────────────────── */
/* Le chapô d'une section pleine largeur garde une longueur de ligne lisible, que la colonne
   ne lui impose plus. */
.bnm-i3d-steps-lead { max-width: 68ch }
.bnm-i3d-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 34px }
@media (max-width: 900px) { .bnm-i3d-steps { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px) { .bnm-i3d-steps { grid-template-columns: 1fr } }
.bnm-i3d-step { background: var(--bnm-white); border: 1px solid var(--bnm-line);
  border-radius: var(--bnm-radius); padding: 24px;
  transition: transform .14s ease, box-shadow .2s ease }
.bnm-i3d-step:hover { transform: translateY(-3px); box-shadow: var(--bnm-shadow) }
.bnm-i3d-step .bnm-i3d-num { font-family: var(--bnm-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bnm-amber-ink);
  background: var(--bnm-amber-soft); width: fit-content; padding: 4px 11px; border-radius: 100px;
  margin-bottom: 12px }
.bnm-i3d-step h3 { font-size: 1.18rem; margin-bottom: 7px }
.bnm-i3d-step p { color: var(--bnm-ink-soft); font-size: .97rem }

/* ── franchise ────────────────────────────────────────────────────────────────────────────── */
.bnm-i3d-honest { background: var(--bnm-bench); color: #e6e4ff }
.bnm-i3d-honest h2 { color: #fff }
.bnm-i3d-honest .bnm-i3d-lead { color: #b6b3e0 }
.bnm-i3d-truths-lead { max-width: 64ch }
.bnm-i3d-truths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-top: 34px }
@media (max-width: 760px) { .bnm-i3d-truths { grid-template-columns: 1fr } }
.bnm-i3d-truth { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--bnm-radius);
  padding: 24px; background: rgba(255, 255, 255, .04) }
.bnm-i3d-truth h3 { font-size: 1.1rem; color: #fff; margin-bottom: 7px }
.bnm-i3d-truth p { color: #b6b3e0; font-size: .97rem }

/* ── fin ──────────────────────────────────────────────────────────────────────────────────── */
.bnm-i3d-end { text-align: center; padding: 84px 0 }
.bnm-i3d-end h2 { margin-bottom: 14px }
.bnm-i3d-end p { font-size: 1.14rem; color: var(--bnm-ink-soft); max-width: 48ch;
  margin: 0 auto 26px }
.bnm-i3d-end .bnm-i3d-fine { margin-top: 16px; color: var(--bnm-muted); font-size: .92rem }

/* ── carte « dans l'atelier aussi » ───────────────────────────────────────────────────────── */
.bnm-i3d-next { display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: center;
  max-width: 610px; margin: 44px auto 0; text-align: left;
  background: var(--bnm-white); border: 1px solid var(--bnm-line);
  border-radius: var(--bnm-radius); padding: 16px; box-shadow: var(--bnm-shadow);
  text-decoration: none; transition: transform .14s ease, box-shadow .2s ease }
.bnm-i3d-next:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 26, 46, .12) }
.bnm-i3d-next img { border-radius: 10px }
.bnm-i3d-next .bnm-i3d-k { font-family: var(--bnm-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bnm-amber-ink); display: block;
  margin-bottom: 7px }
.bnm-i3d-next h3 { font-size: 1.14rem; margin-bottom: 5px }
.bnm-i3d-next p { font-size: .96rem; color: var(--bnm-ink-soft); margin: 0 }
@media (max-width: 560px) { .bnm-i3d-next { grid-template-columns: 1fr; text-align: center } }

footer { padding: 30px 0; color: var(--bnm-muted); font-size: .88rem;
  border-top: 1px solid var(--bnm-line); text-align: center }
footer a { color: var(--bnm-ink-soft) }

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