/* Atelier d’Aplomb — shared styles
   Palette: chalk ground, slate ink, monochrome. Type: Bodoni Moda (display), Jost (text).
   Fonts are self-hosted: nothing is requested from Google. */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('fonts/bodoni-moda.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('fonts/bodoni-moda-italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-italic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink:    #1F2A33;   /* ardoise — lettering, logo, buttons */
  --ink2:   #2E3A44;   /* body text */
  --ink3:   #4D5861;   /* ardoise douce — secondary text */
  --paper:  #F2F1EE;   /* craie — ground, never pure white */
  --paper2: #E8E7E3;   /* craie profonde — second tone */
  --rule:   #D3D6D8;   /* filet — hairlines */
  --pad:    100px;
  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --text: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink2);
  font-family: var(--text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

a { text-decoration: none; color: inherit; }

img { max-width: 100%; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* small labels: Jost, modest tracking */
.label, .sec-t, .off-flag, .off-sub, .price-foot, .pr-t, .nav-links a, .nav-toggle, .nav-back, .foot-l, .foot-r {
  font-family: var(--text);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rule40 { width: 40px; height: 1px; background: var(--ink3); }

/* ── NAV (subpages) ── */

.subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px var(--pad);
  border-bottom: 1px solid var(--rule);
}

.logo-nom { display: block; height: 21px; width: auto; }

.nav-back { color: var(--ink3); transition: color 0.25s; }
.nav-back:hover { color: var(--ink); }

/* ── SECTIONS ── */

section { padding: 150px var(--pad); border-bottom: 1px solid var(--rule); }

.sec-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 72px; }
.sec-t { color: var(--ink3); }

/* Type rule: Bodoni only for what is taken in at a glance (a line, ten words or so).
   Anything that is read — paragraphs, consequences, notes — is set in Jost. */

/* display type */
.d { font-family: var(--display); font-weight: 400; color: var(--ink); }

/* ── BUTTONS — slate, the one solid colour on the page ── */

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 18px 40px;
  font-family: var(--text);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn:hover { background: var(--ink2); }
.btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) { .btn { padding: 18px 22px; letter-spacing: 0.1em; text-align: center; } }

/* ── FOOTER ── */

footer {
  padding: 90px var(--pad) 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.foot-l .logo-nom { height: 15px; }
.foot-r { display: flex; flex-wrap: wrap; gap: 14px 32px; color: var(--ink3); }
.foot-r a { white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color 0.25s; }
.foot-r a:hover { border-color: var(--ink3); }

@media (max-width: 900px) {
  :root { --pad: 28px; }
  section { padding-top: 104px; padding-bottom: 104px; }
  .subnav { padding-top: 28px; padding-bottom: 28px; }
  .logo-nom { height: 18px; }
}

@media print {
  @page { size: A4; margin: 20mm 22mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root { --pad: 0px; }
}

/* Display legibility — Bodoni Moda set to a sturdier optical size so the hairlines hold on screen.
   Large titles 450; mid-size lines (the list, format titles, pull line) 500. The logo files are unaffected. */
html .hero h1, html .pull p, html .method-p strong, html .changes li, html .bio-h, html .off-title,
html .cta-h, html .invite h1, html .form-h, html .done h1, html .legal h1 {
  font-variation-settings: "opsz" 18;
  font-optical-sizing: none;
}
html .hero h1, html .bio-h, html .cta-h, html .invite h1, html .form-h, html .done h1, html .legal h1 { font-weight: 450; }
html .hero h1 em, html .done h1 em, html .changes li, html .off-title, html .pull p, html .method-p strong { font-weight: 500; }