/* 9 — TYPOGRAPHIQUE : la lettre fait tout le travail. Échelle extrême
   (titres géants, texte petit), mêmes familles poussées de 200 à 800,
   filets fins, zéro ornement. */

[data-style="typo"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #0F0F0F;
  --ink-soft: #6E6E6E;
  --accent: #E8410A;
  --accent-2: #0F0F0F;
  --line: #111111;
  --radius: 0px;
  --shadow: none;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-style="typo"] body { font-size: .95rem; line-height: 1.6; }

[data-style="typo"] .masthead { border-bottom: 1px solid var(--ink); padding-block: 20px; }
[data-style="typo"] .brand { font-weight: 700; letter-spacing: -.03em; }
[data-style="typo"] .brand-dot { background: var(--accent); border-radius: 0; }
[data-style="typo"] .masthead nav a { color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
[data-style="typo"] .masthead nav a:hover { color: var(--accent); }

[data-style="typo"] .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .3em; font-size: .7rem; }

[data-style="typo"] h1 {
  font-size: clamp(3.2rem, 12vw, 8.5rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.045em;
  margin-top: 24px;
}
[data-style="typo"] h1 em {
  color: var(--ink);
  font-weight: 200;
  font-variation-settings: "wght" 200;
}

[data-style="typo"] .lede { font-size: 1rem; max-width: 50ch; color: var(--ink); font-weight: 400; }
[data-style="typo"] .hint { font-size: .8rem; }

[data-style="typo"] .inspector {
  border: none;
  border-bottom: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 0;
  background: none;
  font-size: .8rem;
}
[data-style="typo"] .inspector b { color: var(--accent); }

[data-style="typo"] .btn,
[data-style="typo"] .btn-ghost {
  background: none;
  border: none;
  border-bottom: 5px solid var(--ink);
  border-radius: 0;
  padding: 2px 0;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
[data-style="typo"] .btn-ghost { border-bottom-width: 1px; color: var(--ink-soft); font-weight: 500; }
[data-style="typo"] .btn:hover { transform: none; color: var(--accent); border-bottom-color: var(--accent); }
[data-style="typo"] .btn-ghost:hover { color: var(--ink); border-bottom-color: var(--ink); }

[data-style="typo"] .section { border-top: 1px solid var(--ink); }

[data-style="typo"] .section-head { gap: 18px; max-width: none; }
[data-style="typo"] .section-head h2 {
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
}
[data-style="typo"] .section-head p:not(.eyebrow) { font-size: .95rem; max-width: 56ch; color: var(--ink-soft); }

[data-style="typo"] .card {
  background: none;
  border: none;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 20px 0 0;
}
[data-style="typo"] .card:hover { transform: none; box-shadow: none; }
[data-style="typo"] .card h3 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
}
[data-style="typo"] .card p { font-size: .88rem; color: var(--ink-soft); }
[data-style="typo"] .cards { gap: 40px 36px; }

[data-style="typo"] .tag {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
}

[data-style="typo"] .band {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  border-top: 1px solid var(--ink);
}
[data-style="typo"] .band-label { color: var(--accent); }
[data-style="typo"] .band p:last-child { font-size: 1rem; max-width: 70ch; }

[data-style="typo"] .step {
  background: none;
  border: none;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 20px 0 0;
}
[data-style="typo"] .step h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
}
[data-style="typo"] .step .meta { color: var(--accent); }
[data-style="typo"] .step p:last-child { font-size: .88rem; }

[data-style="typo"] .specimen { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
[data-style="typo"] .specimen-bar { background: var(--ink); color: #fff; border-bottom: none; letter-spacing: .2em; }
[data-style="typo"] .specimen-bar span:last-child { color: var(--accent); }
[data-style="typo"] .specimen pre { font-size: .8rem; }

[data-style="typo"] .note {
  border-left: none;
  border-left: 5px solid var(--accent);
  font-size: .88rem;
  color: var(--ink);
}

[data-style="typo"] .reasons dt {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}
[data-style="typo"] .reasons div { border-top: 1px solid var(--ink); }
[data-style="typo"] .reasons dd { font-size: .88rem; }

[data-style="typo"] kbd,
[data-style="typo"] .lede code,
[data-style="typo"] .foot code,
[data-style="typo"] .reasons code {
  background: var(--ink);
  border: none;
  color: #fff;
  border-radius: 0;
}

[data-style="typo"] .dock {
  background: var(--ink);
  border: none;
  border-radius: 0;
  box-shadow: none;
}
[data-style="typo"] .dock button {
  border-radius: 0;
  color: #8C8C8C;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem;
}
[data-style="typo"] .dock button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
[data-style="typo"] .dock button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-style="typo"] .foot { border-top: 1px solid var(--ink); font-size: .86rem; }
[data-style="typo"] .foot-label { color: var(--accent); }
[data-style="typo"] .foot kbd { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); }