/* Simple Not Easy — la feuille de la page. Consomme les tokens --sne-* de
   assets/design-tokens.css (copie de l'original de la direction) et les polices de fonts.css.
   Tout le style vit ICI : la CSP du site (style-src 'self') refuse les <style> et les
   attributs style= dans les pages. */

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

html { background: var(--sne-paper); }

body {
  font-family: var(--sne-font-body);
  color: var(--sne-ink-soft);
  font-size: var(--sne-text-base);
  line-height: var(--sne-leading-normal);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--sne-content-max);
  margin: 0 auto;
  padding: var(--sne-space-8) var(--sne-space-5) var(--sne-space-8);
}

/* — Masthead : le mot-marque, sous le filet d'en-tête de la charte — */
.masthead {
  border-top: var(--sne-rule-header);
  padding-top: var(--sne-space-4);
  margin-bottom: var(--sne-space-8);
}
.lockup {
  font-family: var(--sne-font-title);
  font-weight: var(--sne-weight-bold);
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--sne-ink);
}
.lockup em { font-style: normal; color: var(--sne-accent); }

/* — Chapeau de section : mono, capitales, accent — */
.eyebrow {
  font-family: var(--sne-font-mono);
  font-weight: var(--sne-weight-normal);
  font-size: var(--sne-text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sne-accent);
  margin-bottom: var(--sne-space-3);
}

/* — Hero — */
.hero { margin-bottom: var(--sne-space-8); }
h1 {
  font-family: var(--sne-font-title);
  font-weight: var(--sne-weight-bold);
  font-size: clamp(30px, 4vw, 42px);
  line-height: var(--sne-leading-tight);
  letter-spacing: -0.02em;
  color: var(--sne-ink);
  margin-bottom: var(--sne-space-4);
}
h1 em { font-style: italic; font-weight: var(--sne-weight-medium); color: var(--sne-accent); }
.lede { max-width: 560px; }

/* — Contact — */
.contact {
  border-top: 1px solid var(--sne-rule);
  padding-top: var(--sne-space-5);
  margin-bottom: var(--sne-space-8);
}
.mail {
  font-family: var(--sne-font-mono);
  font-size: var(--sne-text-sm);
  color: var(--sne-accent-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--sne-accent-soft);
  padding-bottom: 1px;
}
.mail:hover, .mail:focus { background: var(--sne-accent-wash); border-bottom-color: var(--sne-accent-strong); }

/* — Colophon : sous le filet de pied double — */
.colophon {
  border-top: var(--sne-rule-footer);
  padding-top: var(--sne-space-3);
  font-size: var(--sne-text-2xs);
  color: var(--sne-ink-muted);
}
.colophon p { margin-bottom: var(--sne-space-1); }