/* 8 — MAXIMALISME : tout en même temps. Fond à motifs, couleurs qui jurent,
   bordures épaisses, tags pivotés, typographie empilée. Le trop-plein est le propos. */

[data-style="maximalism"] {
  --bg: #FFF04D;
  --surface: #FFFFFF;
  --ink: #101010;
  --ink-soft: #3E3E3E;
  --accent: #FF2E88;
  --accent-2: #00C2FF;
  --line: #101010;
  --radius: 18px;
  --shadow: 7px 7px 0 #101010;
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --code-k: #FF2E88;
  --code-f: #101010;
  --code-s: #0076C4;
  --code-n: #8B00C7;
  --code-c: #7A7A7A;
}

[data-style="maximalism"] body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(16, 16, 16, .22) 1.3px, transparent 1.4px);
  background-size: 20px 20px;
}

[data-style="maximalism"] .masthead { border-bottom: 5px solid var(--ink); }
[data-style="maximalism"] .brand {
  background: var(--ink);
  color: var(--bg);
  padding: 8px 14px;
  border-radius: 999px;
}
[data-style="maximalism"] .brand-dot { background: var(--accent); }
[data-style="maximalism"] .masthead nav a {
  color: var(--ink);
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
}
[data-style="maximalism"] .masthead nav a:hover { background: var(--accent-2); }
[data-style="maximalism"] .masthead nav { gap: 8px 12px; }

[data-style="maximalism"] .eyebrow {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 7px 14px;
  border-radius: 999px;
  letter-spacing: .14em;
}

[data-style="maximalism"] h1 {
  font-weight: 800;
  color: var(--accent);
  text-shadow: 5px 5px 0 var(--ink);
  letter-spacing: -.03em;
}
[data-style="maximalism"] h1 em {
  color: var(--accent-2);
  text-shadow: 5px 5px 0 var(--ink);
}

[data-style="maximalism"] .lede {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--ink);
  box-shadow: var(--shadow);
  margin-top: 26px;
}

[data-style="maximalism"] .section {
  border-top: 5px solid var(--ink);
}
[data-style="maximalism"] .section-head h2 {
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  letter-spacing: -.03em;
}
[data-style="maximalism"] #bac .section-head h2 { color: var(--accent); }
[data-style="maximalism"] #choisir .section-head h2 { color: var(--accent-2); -webkit-text-stroke: 1.5px var(--ink); }

[data-style="maximalism"] .card,
[data-style="maximalism"] .step {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
[data-style="maximalism"] .cards .card:nth-child(3n + 1) { transform: rotate(-.7deg); }
[data-style="maximalism"] .cards .card:nth-child(3n + 2) { transform: rotate(.6deg); border-color: var(--accent); }
[data-style="maximalism"] .cards .card:nth-child(3n) { transform: rotate(-.35deg); border-color: var(--accent-2); }
[data-style="maximalism"] .cards .card:hover { transform: rotate(0) scale(1.02); box-shadow: 10px 10px 0 var(--ink); border-color: var(--ink); }
[data-style="maximalism"] .card h3 { font-weight: 800; font-size: 1.35rem; }

[data-style="maximalism"] .tags { gap: 9px; }
[data-style="maximalism"] .tag {
  background: var(--accent-2);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .05em;
  box-shadow: 3px 3px 0 var(--ink);
}
[data-style="maximalism"] .tag:nth-child(2n) { background: var(--accent); color: #fff; transform: rotate(1.5deg); }
[data-style="maximalism"] .tag:nth-child(3n) { background: var(--bg); color: var(--ink); transform: rotate(-1.5deg); }

[data-style="maximalism"] .btn {
  background: var(--accent);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-style="maximalism"] .btn:hover { background: var(--accent-2); color: var(--ink); transform: translateY(-3px); }
[data-style="maximalism"] .btn-ghost { background: var(--accent-2); color: var(--ink); }
[data-style="maximalism"] .btn-ghost:hover { background: var(--surface); }

[data-style="maximalism"] .band {
  background: var(--accent-2);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 9px 9px 0 var(--accent);
}
[data-style="maximalism"] .band-label {
  background: var(--ink);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: 999px;
  justify-self: start;
}

[data-style="maximalism"] .step-n { color: var(--ink); background: var(--accent-2); display: inline-block; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; }
[data-style="maximalism"] .step .meta { color: var(--accent); font-size: .86rem; }

[data-style="maximalism"] .inspector { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--accent-2); background: var(--surface); color: var(--ink); }
[data-style="maximalism"] .inspector b { color: var(--accent); }

[data-style="maximalism"] .specimen { border: 3px solid var(--ink); box-shadow: 9px 9px 0 var(--accent-2); transform: rotate(.5deg); }
[data-style="maximalism"] .specimen-bar { background: var(--accent); color: #fff; border-bottom: 3px solid var(--ink); font-weight: 700; }

[data-style="maximalism"] .note {
  background: var(--surface);
  border: 3px dashed var(--ink);
  border-left: 3px dashed var(--ink);
  padding: 16px 18px;
  color: var(--ink);
  border-radius: var(--radius);
}

[data-style="maximalism"] .reasons div { border-top: 4px solid var(--ink); }
[data-style="maximalism"] .reasons div:nth-child(2n) { border-top-color: var(--accent); }
[data-style="maximalism"] .reasons div:nth-child(3n) { border-top-color: var(--accent-2); }
[data-style="maximalism"] .reasons dt { font-weight: 800; }

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

[data-style="maximalism"] .dock {
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 7px 7px 0 var(--accent);
}
[data-style="maximalism"] .dock button { color: var(--bg); border-radius: 999px; }
[data-style="maximalism"] .dock button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
[data-style="maximalism"] .dock button[aria-pressed="true"] {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}
[data-style="maximalism"] .dock button[aria-pressed="true"] .key { color: var(--accent); }

[data-style="maximalism"] .foot { background: var(--ink); color: #CFCFCF; border-top: none; margin-top: 20px; padding-block: 46px; }
[data-style="maximalism"] .foot-label { color: var(--bg); }
[data-style="maximalism"] .foot kbd { background: var(--bg); color: var(--ink); }

[data-style="maximalism"] .card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }