/* 5 — GLASSMORPHISME : des panneaux de verre dépoli posés sur un dégradé vivant.
   Flou d'arrière-plan, bordure lumineuse, transparence et lumière. */

[data-style="glass"] {
  --bg: #171540;
  --surface: rgba(255, 255, 255, .14);
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, .76);
  --accent: #FFD8A8;
  --accent-2: #8FE9FF;
  --line: rgba(255, 255, 255, .28);
  --radius: 26px;
  --shadow: 0 24px 50px -26px rgba(5, 5, 30, .75);
  --code-k: #A9C4FF;
  --code-f: #FFFFFF;
  --code-s: #FFC58F;
  --code-n: #C6A9FF;
  --code-c: rgba(255, 255, 255, .5);
}

[data-style="glass"] body { background: #171540; }

[data-style="glass"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 55% at 12% 8%, #6D5BFF 0%, rgba(109, 91, 255, 0) 62%),
    radial-gradient(50% 50% at 88% 22%, #21D4FD 0%, rgba(33, 212, 253, 0) 60%),
    radial-gradient(65% 65% at 68% 95%, #FF7A59 0%, rgba(255, 122, 89, 0) 65%),
    radial-gradient(60% 60% at 30% 70%, #B93BFF 0%, rgba(185, 59, 255, 0) 60%),
    linear-gradient(160deg, #2B2A6B 0%, #14123A 60%, #1A1046 100%);
}

[data-style="glass"] .card,
[data-style="glass"] .step,
[data-style="glass"] .specimen,
[data-style="glass"] .inspector,
[data-style="glass"] .band,
[data-style="glass"] .note {
  background: var(--surface);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow);
}
[data-style="glass"] .note { border-left: 1px solid var(--line); padding: 18px 22px; }
[data-style="glass"] .note { color: var(--ink-soft); }

[data-style="glass"] .section,
[data-style="glass"] .foot { border-top: 1px solid rgba(255, 255, 255, .22); }

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

[data-style="glass"] .masthead nav a { color: rgba(255, 255, 255, .78); }
[data-style="glass"] .masthead nav a:hover { color: #fff; }

[data-style="glass"] .card:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-4px);
}

[data-style="glass"] .specimen-bar {
  background: rgba(255, 255, 255, .1);
  border-bottom: 1px solid var(--line);
  color: rgba(255, 255, 255, .75);
}

[data-style="glass"] .tag {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
}

[data-style="glass"] .btn {
  background: rgba(255, 255, 255, .92);
  color: #211D5E;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-style="glass"] .btn:hover { background: #fff; }
[data-style="glass"] .btn-ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
[data-style="glass"] .btn-ghost:hover { background: rgba(255, 255, 255, .24); border-color: #fff; }

[data-style="glass"] .band-label { color: var(--accent); }
[data-style="glass"] .band p:last-child { color: #fff; }

[data-style="glass"] .step-n { color: var(--accent-2); }
[data-style="glass"] .step .meta { color: var(--accent); }

[data-style="glass"] .reasons div { border-top: 1px solid rgba(255, 255, 255, .5); }

[data-style="glass"] kbd,
[data-style="glass"] .lede code,
[data-style="glass"] .foot code {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}

[data-style="glass"] .dock {
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 24px 50px -26px rgba(5, 5, 30, .8);
}
[data-style="glass"] .dock button { color: rgba(255, 255, 255, .8); }
[data-style="glass"] .dock button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
[data-style="glass"] .dock button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(255, 255, 255, .9);
  color: #211D5E;
}
[data-style="glass"] .dock button[aria-pressed="true"] .key { color: #6D5BFF; }

[data-style="glass"] :focus-visible { outline-color: var(--accent); }