/* 4 — NÉOMORPHISME : tout est fait de la matière du fond. Rien ne se détache
   par la couleur mais par deux ombres douces — claire au haut-gauche,
   sombre au bas-droite — pour sortir ou enfoncer les objets. */

[data-style="neumorphism"] {
  --bg: #E4E9F1;
  --surface: #E4E9F1;
  --ink: #3B4660;
  --ink-soft: #566180; /* contraste tenu : texte courant sur l'aplat clair */
  --accent: #5F7BD6;
  --accent-2: #DE8B5E;
  --line: #E4E9F1;
  --radius: 22px;
  --shadow: 11px 11px 24px rgba(163, 177, 198, .75), -11px -11px 24px rgba(255, 255, 255, .95);
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --code-k: #5F7BD6;
  --code-f: #3B4660;
  --code-s: #C67541;
  --code-n: #8257C6;
  --code-c: #9BA5BC;
}

[data-style="neumorphism"] body { letter-spacing: .005em; }

[data-style="neumorphism"] .eyebrow { color: var(--accent); letter-spacing: .2em; }

[data-style="neumorphism"] h1 { font-weight: 600; color: var(--ink); }
[data-style="neumorphism"] h1 em { color: var(--accent); }

[data-style="neumorphism"] .section { border-top: none; }
[data-style="neumorphism"] .section-head h2 { font-weight: 600; }

[data-style="neumorphism"] .card,
[data-style="neumorphism"] .step {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow);
}
[data-style="neumorphism"] .card:hover {
  transform: none;
  box-shadow: 14px 14px 30px rgba(163, 177, 198, .85), -14px -14px 30px rgba(255, 255, 255, 1);
}

[data-style="neumorphism"] .btn {
  background: var(--surface);
  color: var(--accent);
  border: none;
  font-weight: 600;
  box-shadow: var(--shadow);
}
[data-style="neumorphism"] .btn:hover {
  transform: none;
  color: var(--accent);
  box-shadow: 14px 14px 28px rgba(163, 177, 198, .85), -14px -14px 28px rgba(255, 255, 255, 1);
}
[data-style="neumorphism"] .btn:active {
  box-shadow: inset 7px 7px 14px rgba(163, 177, 198, .85), inset -7px -7px 14px rgba(255, 255, 255, .95);
}
[data-style="neumorphism"] .btn-ghost {
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: inset 5px 5px 11px rgba(163, 177, 198, .7), inset -5px -5px 11px rgba(255, 255, 255, .95);
}
[data-style="neumorphism"] .btn-ghost:hover { color: var(--accent); }

[data-style="neumorphism"] .tag {
  background: var(--surface);
  border: none;
  color: var(--ink-soft);
  box-shadow: 5px 5px 11px rgba(163, 177, 198, .65), -5px -5px 11px rgba(255, 255, 255, .95);
}

[data-style="neumorphism"] .specimen {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow);
}
[data-style="neumorphism"] .specimen-bar { border-bottom: none; }
[data-style="neumorphism"] .specimen pre {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: inset 9px 9px 18px rgba(163, 177, 198, .8), inset -9px -9px 18px rgba(255, 255, 255, .95);
}

[data-style="neumorphism"] .inspector {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow);
}

[data-style="neumorphism"] .band {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
}
[data-style="neumorphism"] .band-label { color: var(--accent-2); }
[data-style="neumorphism"] .band p:last-child { color: var(--ink); font-weight: 400; }

[data-style="neumorphism"] .note {
  border-left: none;
  color: var(--ink-soft);
  padding: 16px 20px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: inset 5px 5px 12px rgba(163, 177, 198, .7), inset -5px -5px 12px rgba(255, 255, 255, .95);
  max-width: none;
}

[data-style="neumorphism"] .reasons div {
  border-top: none;
  padding-top: 18px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

[data-style="neumorphism"] kbd,
[data-style="neumorphism"] .lede code,
[data-style="neumorphism"] .foot code {
  background: var(--surface);
  border: none;
  box-shadow: inset 3px 3px 7px rgba(163, 177, 198, .7), inset -3px -3px 7px rgba(255, 255, 255, .95);
  color: var(--accent);
}

[data-style="neumorphism"] .dock {
  background: var(--surface);
  border: none;
  border-radius: 30px;
  box-shadow: var(--shadow);
}
[data-style="neumorphism"] .dock button:hover { background: transparent; color: var(--accent); }
[data-style="neumorphism"] .dock button[aria-pressed="true"] {
  background: var(--surface);
  border-color: transparent;
  color: var(--accent);
  box-shadow: inset 6px 6px 12px rgba(163, 177, 198, .85), inset -6px -6px 12px rgba(255, 255, 255, .95);
}

[data-style="neumorphism"] .brand-dot { box-shadow: 3px 3px 7px rgba(163, 177, 198, .8), -3px -3px 7px rgba(255, 255, 255, .95); }