/* La page « L'atelier » : sa typographie, le hero posé sur l'établi, les fiches des réalisations,
 * les savoir-faire, 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-atl-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 ─────────────────────────────────────────────────────────────────────────────────── */
.bnm-atl-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-atl-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-atl-hero { position: relative; padding: 74px 0 80px }
.bnm-atl-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: 24px }
.bnm-atl-kicker b { color: var(--bnm-amber); font-weight: 800 }
.bnm-atl-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); color: #fff; max-width: 16ch;
  margin: 0 0 18px }
.bnm-atl-hero h1 em { font-style: normal; color: #8fb6f2 }
.bnm-atl-hero .bnm-atl-sub { color: #c3c1e6; font-size: 1.18rem; max-width: 52ch; margin: 0 0 10px }
.bnm-atl-hero .bnm-atl-fine { color: #8f8cc0; font-size: .98rem; font-style: italic;
  margin-top: 14px }

/* ── les réalisations ─────────────────────────────────────────────────────────────────────── */
section { padding: 74px 0 }
.bnm-atl-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: 18px }
/* L'étiquette indigo porte `.bnm-atl-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-atl-lbl.bnm-pub-lbl--indigo { color: var(--bnm-indigo); background: #eeecfb }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 14px }
.bnm-atl-intro { font-size: 1.14rem; color: var(--bnm-ink-soft); max-width: 68ch;
  margin-bottom: 38px }

.bnm-atl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px }
@media (max-width: 820px) { .bnm-atl-cards { grid-template-columns: 1fr } }
.bnm-atl-card { display: flex; flex-direction: column; background: var(--bnm-white);
  border: 1px solid var(--bnm-line); border-radius: var(--bnm-radius); overflow: hidden;
  text-decoration: none; box-shadow: var(--bnm-shadow);
  transition: transform .16s ease, box-shadow .25s ease }
.bnm-atl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20, 26, 46, .14) }
.bnm-atl-card:focus-visible { outline: 3px solid var(--bnm-indigo-2); outline-offset: 3px }
.bnm-atl-card .bnm-atl-ph { aspect-ratio: 16/10; overflow: hidden; background: #eceae5 }
.bnm-atl-card .bnm-atl-ph img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease }
.bnm-atl-card:hover .bnm-atl-ph img { transform: scale(1.03) }
.bnm-atl-card .bnm-atl-body { padding: 26px; display: flex; flex-direction: column; gap: 9px;
  flex: 1 }
.bnm-atl-card h3 { font-size: 1.32rem }
.bnm-atl-card p { color: var(--bnm-ink-soft); font-size: 1rem }
.bnm-atl-card .bnm-atl-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto;
  padding-top: 14px }
.bnm-atl-card .bnm-atl-tags span { font-family: var(--bnm-display); font-size: .72rem;
  font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bnm-indigo); background: #eeecfb; padding: 4px 10px; border-radius: 100px }
.bnm-atl-card .bnm-atl-go { font-family: var(--bnm-display); font-weight: 650;
  color: var(--bnm-indigo); display: inline-flex; align-items: center; gap: 7px; margin-top: 4px }
.bnm-atl-card:hover .bnm-atl-go { gap: 11px }

/* ── savoir-faire ─────────────────────────────────────────────────────────────────────────── */
.bnm-atl-crafts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px }
@media (max-width: 900px) { .bnm-atl-crafts { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px) { .bnm-atl-crafts { grid-template-columns: 1fr } }
.bnm-atl-craft { 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-atl-craft:hover { transform: translateY(-3px); box-shadow: var(--bnm-shadow) }
.bnm-atl-craft .bnm-atl-k { font-family: var(--bnm-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bnm-amber-ink);
  background: var(--bnm-amber-soft); padding: 4px 10px; border-radius: 100px;
  display: inline-block; margin-bottom: 12px }
.bnm-atl-craft h3 { font-size: 1.16rem; margin-bottom: 7px }
.bnm-atl-craft p { color: var(--bnm-ink-soft); font-size: .97rem }

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

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 } }