/* 6 — BRUTALISME : le code est assumé tel quel. Bordures épaisses, ombres
   portées sans flou, capitales larges, couleurs primaires crues. Rien d'adouci. */

[data-style="brutalism"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #000000;
  --ink-soft: #333333;
  --accent: #FF3300;
  --accent-2: #FFE500;
  --line: #000000;
  --radius: 0px;
  --shadow: 6px 6px 0 #000000;
  --font-display: "Archivo Black", "Arial Black", Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --code-k: #FF3300;
  --code-f: #0000CC;
  --code-s: #007A3D;
  --code-n: #0000CC;
  --code-c: #7A7A7A;
}

[data-style="brutalism"] body { background: var(--bg); }

[data-style="brutalism"] .masthead {
  border-bottom: 4px solid var(--ink);
}
[data-style="brutalism"] .brand { text-transform: uppercase; letter-spacing: .04em; }
[data-style="brutalism"] .masthead nav a { color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: .84rem; letter-spacing: .06em; }
[data-style="brutalism"] .masthead nav a:hover { background: var(--accent-2); color: var(--ink); }

[data-style="brutalism"] .eyebrow { color: var(--accent); }

[data-style="brutalism"] h1 {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -.02em;
  text-shadow: 5px 5px 0 var(--accent-2);
}
[data-style="brutalism"] h1 em { color: var(--ink); text-shadow: 5px 5px 0 var(--accent); }

[data-style="brutalism"] .lede { color: var(--ink); font-weight: 400; }

[data-style="brutalism"] .section { border-top: 5px solid var(--ink); }
[data-style="brutalism"] .section-head h2 { text-transform: uppercase; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.2rem); }

[data-style="brutalism"] .card,
[data-style="brutalism"] .step,
[data-style="brutalism"] .specimen,
[data-style="brutalism"] .inspector,
[data-style="brutalism"] .dock {
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}
[data-style="brutalism"] .card:hover,
[data-style="brutalism"] .step:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--ink);
}
[data-style="brutalism"] .card h3,
[data-style="brutalism"] .step h3 { text-transform: uppercase; font-weight: 400; }

[data-style="brutalism"] .tag {
  background: var(--accent-2);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-style="brutalism"] .btn {
  background: var(--accent);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-style="brutalism"] .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
[data-style="brutalism"] .btn-ghost { background: var(--accent-2); color: var(--ink); }
[data-style="brutalism"] .btn-ghost:hover { background: #fff; }

[data-style="brutalism"] .band {
  background: var(--ink);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--accent);
}
[data-style="brutalism"] .band-label { color: var(--accent-2); }

[data-style="brutalism"] .specimen-bar {
  background: var(--accent-2);
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
  font-weight: 700;
}
[data-style="brutalism"] .specimen pre { background: #fff; color: var(--ink); }

[data-style="brutalism"] .step-n { color: var(--accent); }
[data-style="brutalism"] .step .meta { color: var(--ink); background: var(--accent-2); display: inline-block; padding: 2px 8px; border: 2px solid var(--ink); }

[data-style="brutalism"] .note {
  border: 3px dashed var(--ink);
  border-left-width: 3px;
  padding: 16px 18px;
  color: var(--ink);
  background: var(--accent-2);
}

[data-style="brutalism"] .reasons div { border-top: 4px solid var(--ink); }
[data-style="brutalism"] .reasons dt { text-transform: uppercase; font-weight: 400; }

[data-style="brutalism"] kbd,
[data-style="brutalism"] .lede code,
[data-style="brutalism"] .foot code,
[data-style="brutalism"] .reasons code {
  background: var(--accent-2);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-weight: 700;
}

[data-style="brutalism"] .inspector { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-style="brutalism"] .inspector b { color: var(--accent-2); }
[data-style="brutalism"] .inspector-note { color: #bbb; }

[data-style="brutalism"] .dock {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 0;
}
[data-style="brutalism"] .dock button {
  border: 2px solid transparent;
  border-radius: 0;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
}
[data-style="brutalism"] .dock button:hover { background: var(--accent-2); }
[data-style="brutalism"] .dock button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--ink);
  color: #fff;
}

[data-style="brutalism"] .foot { border-top: 5px solid var(--ink); }

[data-style="brutalism"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }