/* 2 — MATERIAL DESIGN : surfaces tonales, élévation par ombres portées douces,
   coins généreux, états par "state layers", chips et boutons pleins. */

[data-style="material"] {
  --bg: #F7F2FA;
  --surface: #FFFFFF;
  --ink: #1D1B20;
  --ink-soft: #49454F;
  --accent: #6750A4;
  --accent-2: #B3261E;
  --line: #E7E0EC;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px rgba(0, 0, 0, .12);
  --font-display: "Roboto", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
}

[data-style="material"] body { font-weight: 400; }

[data-style="material"] .eyebrow { letter-spacing: .1em; font-weight: 500; color: var(--accent); }

[data-style="material"] h1 {
  font-weight: 400;
  letter-spacing: -.015em;
}
[data-style="material"] h1 em { color: var(--accent); }

[data-style="material"] .section { border-top: none; }
[data-style="material"] .section-head h2 { font-weight: 400; font-size: clamp(2rem, 4vw, 3.1rem); }

[data-style="material"] .brand-dot { background: var(--accent); }

[data-style="material"] .card,
[data-style="material"] .step {
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 2px 5px rgba(0, 0, 0, .07);
}
[data-style="material"] .card:hover {
  transform: none;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .15), 0 7px 18px rgba(0, 0, 0, .10);
}

[data-style="material"] .tag {
  background: #E8DEF8;
  border: none;
  color: #4A4458;
  border-radius: 8px;
  font-weight: 500;
}

[data-style="material"] .btn {
  border-radius: 999px;
  font-weight: 500;
  text-transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30);
}
[data-style="material"] .btn:hover {
  transform: none;
  background: color-mix(in srgb, var(--accent) 92%, #000);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
[data-style="material"] .btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: #79747E;
  box-shadow: none;
}
[data-style="material"] .btn-ghost:hover { background: rgba(103, 80, 164, .10); color: var(--accent); }

[data-style="material"] .band {
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .10);
}
[data-style="material"] .band-label { color: #E8DEF8; }

[data-style="material"] .specimen { border: none; border-radius: 16px; }
[data-style="material"] .specimen-bar { background: #E8DEF8; color: #1D1B20; border-bottom: none; }

[data-style="material"] .inspector { border: none; border-radius: 999px; }

[data-style="material"] .note {
  border-left: none;
  border-left: 4px solid var(--accent-2);
  background: #FCE8E6;
  padding: 14px 18px;
  border-radius: 0 12px 12px 0;
}

[data-style="material"] .reasons div { border-top: none; border-top: 4px solid var(--accent); border-radius: 4px 4px 0 0; }

[data-style="material"] .dock {
  border: none;
  border-radius: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  background: #F3EDF7;
}
[data-style="material"] .dock button { border-radius: 999px; color: #49454F; }
[data-style="material"] .dock button:hover { background: rgba(103, 80, 164, .12); color: var(--ink); }
[data-style="material"] .dock button[aria-pressed="true"] {
  background: #E8DEF8;
  border-color: transparent;
  color: #1D1B20;
}
[data-style="material"] .dock button[aria-pressed="true"] .key { color: var(--accent); }

[data-style="material"] .foot { border-top: 1px solid var(--line); }