/* 1. Google Fonts
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500&family=Bebas+Neue&family=Exo+2:wght@300;400;500;600&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap');

/* 2. Variables CSS
   ------------------------------------------------------------ */
.wn-container {
  --wn-primary: #FF4E45;
  --wn-primary-bg: #35232f;
  --wn-primary-rgb: 255, 78, 69;
  --wn-primary-light: #ff7a73;

  --wn-yellow: #fdc700;
  --wn-yellow-bg: #392f28;
  --wn-yellow-rgb: 253, 199, 0;
  --wn-yellow-light: #ffe066;

  --wn-violet: #6039ea;
  --wn-violet-bg: #2f264f;
  --wn-violet-rgb: 96, 57, 234;
  --wn-violet-light: #8a6eff;

  --wn-rose: #f14169;
  --wn-rose-bg: #3a2434;
  --wn-rose-rgb: 241, 65, 105;
  --wn-rose-light: #ff6e91;

  --wn-green: #41cd89;
  --wn-green-bg: #1c3238;
  --wn-green-rgb: 65, 205, 137;
  --wn-green-light: #6ee8b0;

  --wn-dark-blue: #3948ce;
  --wn-dark-blue-bg: #3f3666;
  --wn-dark-blue-rgb: 30, 144, 255;
  --wn-dark-blue-light: #5e7dff;

  --wn-orange: #ff5722;
  --wn-orange-light: #ff8a65;
  --wn-orange-bg: #3a2a25;
  --wn-orange-rgb: 255, 87, 34;

  --wn-scary-red: #9c1c2e;
  --wn-scary-red-light: #e04a5f;
  --wn-scary-red-bg: #2f1f23;
  --wn-scary-red-rgb: 156, 28, 46;

  --wn-gray: #73757a;
  --wn-gray-light: #d5d9e3;
  --wn-gray-bg: #545761;
  --wn-gray-rgb: 115, 117, 122;

  --wn-bg: #1e1e2d;

  --wn-accent: var(--wn-primary);
  --wn-accent-bg: var(--wn-primary-bg);
  --wn-accent-rgb: var(--wn-primary-rgb);

  color: #c5c5d6;
  font-family: 'Exo 2', 'Barlow', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
}

.wn-container .wn-accent-gray,
.wn-container.wn-accent-gray {
  --wn-accent: var(--wn-gray);
  --wn-accent-light: var(--wn-gray-light);
  --wn-accent-bg: var(--wn-gray-bg);
  --wn-accent-rgb: var(--wn-gray-rgb);
}

.wn-container .wn-accent-yellow,
.wn-container.wn-accent-yellow {
  --wn-accent: var(--wn-yellow);
  --wn-accent-light: var(--wn-yellow-light);
  --wn-accent-bg: var(--wn-yellow-bg);
  --wn-accent-rgb: var(--wn-yellow-rgb);
}

.wn-container .wn-accent-violet,
.wn-container.wn-accent-violet {
  --wn-accent: var(--wn-violet);
  --wn-accent-light: var(--wn-violet-light);
  --wn-accent-bg: var(--wn-violet-bg);
  --wn-accent-rgb: var(--wn-violet-rgb);
}

.wn-container .wn-accent-rose,
.wn-container.wn-accent-rose {
  --wn-accent: var(--wn-rose);
  --wn-accent-light: var(--wn-rose-light);
  --wn-accent-bg: var(--wn-rose-bg);
  --wn-accent-rgb: var(--wn-rose-rgb);
}

.wn-container .wn-accent-green,
.wn-container.wn-accent-green {
  --wn-accent: var(--wn-green);
  --wn-accent-light: var(--wn-green-light);
  --wn-accent-bg: var(--wn-green-bg);
  --wn-accent-rgb: var(--wn-green-rgb);
}

.wn-container .wn-accent-red,
.wn-container.wn-accent-red {
  --wn-accent: var(--wn-primary);
  --wn-accent-light: var(--wn-primary-light);
  --wn-accent-bg: var(--wn-primary-bg);
  --wn-accent-rgb: var(--wn-primary-rgb);
}

.wn-container .wn-accent-orange,
.wn-container.wn-accent-orange {
  --wn-accent: var(--wn-orange);
  --wn-accent-light: var(--wn-orange-light);
  --wn-accent-bg: var(--wn-orange-bg);
  --wn-accent-rgb: var(--wn-orange-rgb);
}

.wn-container .wn-accent-blue,
.wn-container.wn-accent-blue {
  --wn-accent: var(--wn-blue);
  --wn-accent-light: var(--wn-blue-light);
  --wn-accent-bg: var(--wn-blue-bg);
  --wn-accent-rgb: var(--wn-blue-rgb);
}

.wn-container .wn-accent-dark-red,
.wn-container.wn-accent-dark-red {
  --wn-accent: var(--wn-scary-red);
  --wn-accent-light: var(--wn-scary-red-light);
  --wn-accent-bg: var(--wn-scary-red-bg);
  --wn-accent-rgb: var(--wn-scary-red-rgb);
}

/* 3. Typographie par balise
   ------------------------------------------------------------ */

/* --- Headings --- */
.wn-container h1 {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(32px, 5vw, 52px);
  text-transform: uppercase;
  letter-spacing: 5px;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.1;
}

.wn-container h2 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 14px;
}

.wn-container h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--wn-accent);
  box-shadow: 0 0 12px rgba(var(--wn-accent-rgb), 0.6), 0 0 30px rgba(var(--wn-accent-rgb), 0.2);
  border-radius: 2px;
}

.wn-container h3 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  margin: 0 0 12px;
}

.wn-container h4 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
  color: #e0e0ec;
  margin: 0 0 10px;
}

.wn-container h5 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px;
}

.wn-container h6 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 6px;
}

/* --- Body text --- */
.wn-container p {
  font-family: 'Exo 2', 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: #c5c5d6;
  margin: 0 0 16px;
}

.wn-container strong {
  color: #ffffffee;
  font-weight: 700;
}

.wn-container a {
  color: var(--wn-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--wn-accent-rgb), 0.3);
  transition: filter 0.2s, border-color 0.2s;
}

.wn-container a:hover {
  filter: brightness(1.3);
  border-bottom-color: var(--wn-accent);
}

.wn-container code {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  background: rgba(var(--wn-accent-rgb), 0.1);
  border: 1px solid rgba(var(--wn-accent-rgb), 0.2);
  color: var(--wn-accent);
  padding: 2px 6px;
  border-radius: 3px;
}

.wn-container pre {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--wn-accent);
  padding: 16px 20px;
  overflow-x: auto;
  border-radius: 0 4px 4px 0;
  margin: 0 0 16px;
  line-height: 1.6;
  color: #c5c5d6;
}

.wn-container pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

.wn-container mark {
  background: rgba(253, 199, 0, 0.2);
  color: #fdc700;
  padding: 1px 4px;
  border-radius: 2px;
}

.wn-container small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* 4. Balises semantiques — composants automatiques
   ------------------------------------------------------------ */

/* --- article = Card --- */
.wn-container article {
  position: relative;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
  animation: wn-fadeUp 0.5s ease both;
}

.wn-container article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--wn-accent);
  border-radius: 4px 0 0 4px;
  box-shadow: 0 0 10px rgba(var(--wn-accent-rgb), 0.5);
}

/* --- aside = Note / callout --- */
.wn-container aside {
  background: var(--wn-accent-bg);
  border-left: 3px solid var(--wn-accent);
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
  color: #d0d0e0;
}

/* --- blockquote = Citation with decorative quote --- */
.wn-container blockquote {
  position: relative;
  border-left: 3px solid var(--wn-accent);
  background: rgba(0, 0, 0, 0.15);
  padding: 16px 20px 16px 40px;
  margin: 0 0 16px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 0 4px 4px 0;
}

.wn-container blockquote::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 12px;
  width: 25px;
  height: 25px;
  -webkit-mask: url('https://wneo.fr/styles/fa/duotone/quote-left.svg?v=5.15.3') no-repeat center / contain;
  mask: url('https://wneo.fr/styles/fa/duotone/quote-left.svg?v=5.15.3') no-repeat center / contain;
  background-color: rgba(var(--wn-accent-rgb), 0.15);
}

.wn-container blockquote p {
  margin-bottom: 0;
}

/* --- section = Spacing only --- */
.wn-container section {
  margin-bottom: 32px;
}

/* --- header = Centered with divider --- */
.wn-container header {
  text-align: center;
  padding: 16px 0 20px;
  margin-bottom: 24px;
  position: relative;
}

.wn-container header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 200px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--wn-accent);
  box-shadow: 0 0 12px rgba(var(--wn-accent-rgb), 0.6), 0 0 30px rgba(var(--wn-accent-rgb), 0.2);
  border-radius: 2px;
}

.wn-container header h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* --- footer --- */
.wn-container footer {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  margin-top: 32px;
  color: rgba(255, 255, 255, 0.35);
}

/* --- nav = Flexbox horizontal --- */
.wn-container nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.wn-container nav a {
  border-bottom: none;
}

.wn-container nav a:hover {
  color: var(--wn-accent);
}

/* --- details / summary --- */
.wn-container details {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}

.wn-container summary {
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e0ec;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.wn-container summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.wn-container summary::before {
  content: '+';
  font-family: 'Share Tech Mono', monospace;
  color: var(--wn-accent);
  font-size: 16px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.wn-container details[open]>summary::before {
  content: '\2212';
}

.wn-container summary::-webkit-details-marker {
  display: none;
}

.wn-container details> :not(summary) {
  padding: 8px 16px 8px;
}

/* --- figure / figcaption --- */
.wn-container figure {
  margin: 0 0 20px;
}

.wn-container figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.wn-container figcaption {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
}

/* --- hr = Gradient divider --- */
.wn-container hr {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 28px 0;
}

/* 5. Listes
   ------------------------------------------------------------ */

/* ul — custom marker */
.wn-container ul {
  list-style: none;
  margin: 0 0 16px;
}

.wn-container ul>li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}

.wn-container ul>li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--wn-accent);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}

/* ol — counter with leading zero */
.wn-container ol {
  list-style: none;
  counter-reset: wn-ol;
  padding-left: 20px;
  margin: 0 0 16px;
}

.wn-container ol>li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 8px;
  counter-increment: wn-ol;
}

.wn-container ol>li::before {
  content: counter(wn-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: var(--wn-accent);
  font-weight: 700;
  top: 2px;
}

/* Nested lists */
.wn-container ul ul,
.wn-container ol ol,
.wn-container ul ol,
.wn-container ol ul {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 0.92em;
}

/* 6. Tables
   ------------------------------------------------------------ */
.wn-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0;
  margin-bottom: 24px;
}

.wn-container th {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--wn-accent-rgb), 0.5);
}

.wn-container td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}

.wn-container tr:hover td {
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s;
}

/* Striped variant */
.wn-container .wn-table-striped tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.15);
}

.wn-container .wn-table-striped tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

/* 7. Hero image
   ------------------------------------------------------------ */
.wn-container .wn-hero {
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  margin-bottom: 24px;
  max-height: 300px;
}

.wn-container .wn-hero img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.wn-container .wn-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--wn-bg), transparent);
  pointer-events: none;
}

.wn-container .wn-hero-overlay {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  z-index: 1;
  color: #fff;
}

/* header used as hero — override header divider with hero gradient */
.wn-container header.wn-hero::after {
  width: auto;
  height: 60%;
  transform: none;
  background: linear-gradient(to top, var(--wn-bg), transparent);
  border-radius: 0;
  box-shadow: none;
}

.wn-container header.wn-hero .wn-hero-overlay h1 {
  color: var(--wn-accent);
  text-shadow: 0 0 20px rgba(var(--wn-accent-rgb), 0.4);
}

/* 8. Composants par classes
   ------------------------------------------------------------ */

/* .wn-card — same as article */
.wn-container .wn-card {
  position: relative;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
  animation: wn-fadeUp 0.5s ease both;
}

.wn-container .wn-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--wn-accent);
  border-radius: 4px 0 0 4px;
  box-shadow: 0 0 10px rgba(var(--wn-accent-rgb), 0.5);
}

/* .wn-block — brutalist style with L-corner decorations */
.wn-container .wn-block {
  position: relative;
  background: linear-gradient(90deg, rgba(var(--wn-accent-rgb), 0.07), transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 24px 24px 24px 28px;
  margin-bottom: 24px;
  overflow: hidden;
  animation: wn-fadeUp 0.5s ease both;
}

/* L-corner decorations — top-left and bottom-right */
.wn-container .wn-block::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: var(--wn-accent);
  z-index: 3;
}

.wn-container .wn-block::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

/* Glow-bar on left edge (added via inner shadow since pseudo-elements are used for corners) */
.wn-container .wn-block {
  border-left: 3px solid var(--wn-accent);
  box-shadow: -3px 0 12px rgba(var(--wn-accent-rgb), 0.15),
    inset 120px 0 120px -120px rgba(var(--wn-accent-rgb), 0.04);
}

/* .wn-alert */
.wn-container .wn-alert {
  background: var(--wn-accent-bg);
  border-left: 3px solid var(--wn-accent);
  padding: 14px 20px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
}

/* .wn-callout — typed callouts with FA icons */
.wn-container .wn-callout-info,
.wn-container .wn-callout-success,
.wn-container .wn-callout-warning,
.wn-container .wn-callout-danger {
  position: relative;
  padding: 16px 20px 16px 44px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  line-height: 1.6;
}

.wn-container .wn-callout-info::before,
.wn-container .wn-callout-success::before,
.wn-container .wn-callout-warning::before,
.wn-container .wn-callout-danger::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 20px;
  width: 15px;
  height: 15px;
}

/* Info */
.wn-container .wn-callout-info {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
}

.wn-container .wn-callout-info::before {
  -webkit-mask: url('https://wneo.fr/styles/fa/duotone/info-circle.svg?v=5.15.3') no-repeat center / contain;
  mask: url('https://wneo.fr/styles/fa/duotone/info-circle.svg?v=5.15.3') no-repeat center / contain;
  background-color: #3b82f6;
}

/* Success */
.wn-container .wn-callout-success {
  background: rgba(65, 205, 137, 0.08);
  border-left: 3px solid var(--wn-green);
}

.wn-container .wn-callout-success::before {
  -webkit-mask: url('https://wneo.fr/styles/fa/duotone/check-circle.svg?v=5.15.3') no-repeat center / contain;
  mask: url('https://wneo.fr/styles/fa/duotone/check-circle.svg?v=5.15.3') no-repeat center / contain;
  background-color: var(--wn-green);
}

/* Warning */
.wn-container .wn-callout-warning {
  background: rgba(253, 199, 0, 0.08);
  border-left: 3px solid var(--wn-yellow);
}

.wn-container .wn-callout-warning::before {
  -webkit-mask: url('https://wneo.fr/styles/fa/duotone/exclamation-triangle.svg?v=5.15.3') no-repeat center / contain;
  mask: url('https://wneo.fr/styles/fa/duotone/exclamation-triangle.svg?v=5.15.3') no-repeat center / contain;
  background-color: var(--wn-yellow);
}

/* Danger */
.wn-container .wn-callout-danger {
  background: rgba(255, 78, 69, 0.08);
  border-left: 3px solid var(--wn-primary);
}

.wn-container .wn-callout-danger::before {
  -webkit-mask: url('https://wneo.fr/styles/fa/duotone/exclamation-circle.svg?v=5.15.3') no-repeat center / contain;
  mask: url('https://wneo.fr/styles/fa/duotone/exclamation-circle.svg?v=5.15.3') no-repeat center / contain;
  background-color: var(--wn-primary);
}

/* .wn-badge */
.wn-container .wn-badge {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: rgba(var(--wn-accent-rgb), 0.15);
  color: var(--wn-accent);
  border: 1px solid rgba(var(--wn-accent-rgb), 0.3);
  padding: 3px 10px;
  border-radius: 2px;
  vertical-align: middle;
}

/* .wn-toc — Table of contents */
.wn-container .wn-toc {
  display: block;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 3px solid var(--wn-accent);
  border-radius: 0;
  padding: 24px;
  margin-bottom: 24px;
  font-family: 'Exo 2', 'Barlow', sans-serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
}

.wn-container .wn-toc>h3 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 20px;
}

.wn-container .wn-toc .wn-toc-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.wn-container .wn-toc .wn-toc-col h5 {
  margin-bottom: 12px;
}

.wn-container .wn-toc .wn-toc-col ol {
  margin: 0;
  padding-left: 12px;
}

.wn-container .wn-toc .wn-toc-col ol li {
  margin-bottom: 4px;
}

.wn-container .wn-toc .wn-toc-col ol li a {
  font-family: 'Exo 2', 'Barlow', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: none;
  transition: color 0.2s;
}

.wn-container .wn-toc .wn-toc-col ol li a:hover {
  color: var(--wn-accent);
  filter: none;
}

/* .wn-columns — 2 columns, responsive */
.wn-container .wn-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

/* .wn-columns-3 — 3 columns */
.wn-container .wn-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

/* Stagger animation on column children */
.wn-container .wn-columns>*:nth-child(1),
.wn-container .wn-columns-3>*:nth-child(1) {
  animation-delay: 0s;
}

.wn-container .wn-columns>*:nth-child(2),
.wn-container .wn-columns-3>*:nth-child(2) {
  animation-delay: 0.1s;
}

.wn-container .wn-columns>*:nth-child(3),
.wn-container .wn-columns-3>*:nth-child(3) {
  animation-delay: 0.2s;
}

.wn-container .wn-columns>*:nth-child(4),
.wn-container .wn-columns-3>*:nth-child(4) {
  animation-delay: 0.3s;
}

.wn-container .wn-columns>*:nth-child(5),
.wn-container .wn-columns-3>*:nth-child(5) {
  animation-delay: 0.4s;
}

.wn-container .wn-columns>*:nth-child(6),
.wn-container .wn-columns-3>*:nth-child(6) {
  animation-delay: 0.5s;
}

/* 9. Classes utilitaires
   ------------------------------------------------------------ */

/* Text colors */
.wn-container .wn-red {
  color: var(--wn-primary) !important;
}

.wn-container .wn-yellow {
  color: var(--wn-yellow) !important;
}

.wn-container .wn-violet {
  color: var(--wn-violet) !important;
}

.wn-container .wn-rose {
  color: var(--wn-rose) !important;
}

.wn-container .wn-green {
  color: var(--wn-green) !important;
}

/* Background colors */
.wn-container .wn-bg-red {
  background: var(--wn-primary-bg) !important;
}

.wn-container .wn-bg-yellow {
  background: var(--wn-yellow-bg) !important;
}

.wn-container .wn-bg-violet {
  background: var(--wn-violet-bg) !important;
}

.wn-container .wn-bg-rose {
  background: var(--wn-rose-bg) !important;
}

.wn-container .wn-bg-green {
  background: var(--wn-green-bg) !important;
}

/* Text utilities */
.wn-container .wn-text-center {
  text-align: center !important;
}

.wn-container .wn-text-mono {
  font-family: 'Share Tech Mono', monospace !important;
}

.wn-container .wn-text-sm {
  font-size: 12px !important;
}

.wn-container .wn-text-lg {
  font-size: 18px !important;
}

.wn-container .wn-uppercase {
  text-transform: uppercase !important;
}

.wn-container .wn-eyebrow {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Spacing — margin-top */
.wn-container .wn-mt-0 {
  margin-top: 0 !important;
}

.wn-container .wn-mt-1 {
  margin-top: 8px !important;
}

.wn-container .wn-mt-2 {
  margin-top: 16px !important;
}

.wn-container .wn-mt-3 {
  margin-top: 32px !important;
}

/* Spacing — margin-bottom */
.wn-container .wn-mb-0 {
  margin-bottom: 0 !important;
}

.wn-container .wn-mb-1 {
  margin-bottom: 8px !important;
}

.wn-container .wn-mb-2 {
  margin-bottom: 16px !important;
}

.wn-container .wn-mb-3 {
  margin-bottom: 32px !important;
}

/* 10. Animations
   ------------------------------------------------------------ */
@keyframes wn-fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .wn-container article,
  .wn-container .wn-card,
  .wn-container .wn-block,
  .wn-container .wn-columns>*,
  .wn-container .wn-columns-3>* {
    animation: none !important;
  }

  .wn-container a,
  .wn-container summary,
  .wn-container tr {
    transition: none !important;
  }
}

/* 11. Responsive
   ------------------------------------------------------------ */
@media (max-width: 600px) {

  .wn-container .wn-columns,
  .wn-container .wn-columns-3 {
    grid-template-columns: 1fr;
  }

  .wn-container article,
  .wn-container .wn-card,
  .wn-container .wn-block,
  .wn-container aside,
  .wn-container blockquote {
    padding: 16px;
  }

  .wn-container .wn-toc .wn-toc-columns {
    grid-template-columns: 1fr;
  }

  .wn-container nav {
    gap: 12px;
  }

  .wn-container h1 {
    letter-spacing: 3px;
  }


}

.wn-container {
  --wn-blue: #2980b9;
  --wn-blue-light: #3da8e8;
  --wn-blue-bg: #1a2c3d;
  --wn-blue-rgb: 41, 128, 185;

  --wn-accent: var(--wn-blue);
  --wn-accent-bg: var(--wn-blue-bg);
  --wn-accent-rgb: var(--wn-blue-rgb);
  --wn-accent-light: var(--wn-blue-light);
}


.ly-chapter {
  position: relative;
  text-align: center;
  margin: 48px 0 32px;
  padding: 28px 24px;
  background: linear-gradient(135deg,
      rgba(var(--wn-accent-rgb), 0.12) 0%,
      rgba(var(--wn-accent-rgb), 0.04) 50%,
      transparent 100%);
  border-top: 1px solid rgba(var(--wn-accent-rgb), 0.3);
  border-bottom: 1px solid rgba(var(--wn-accent-rgb), 0.15);
  overflow: hidden;
}

.ly-chapter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent,
      var(--wn-accent) 20%,
      var(--wn-accent-light) 50%,
      var(--wn-accent) 80%,
      transparent);
  box-shadow: 0 0 20px rgba(var(--wn-accent-rgb), 0.5);
}


.ly-chapter::after {
  content: attr(data-num);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', cursive;
  font-size: 120px;
  color: rgba(var(--wn-accent-rgb), 0.06);
  letter-spacing: 10px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.ly-chapter-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 6px;
  color: rgba(var(--wn-accent-rgb), 0.7);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.ly-chapter-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(28px, 4vw, 46px);
  color: #fff;
  letter-spacing: 8px;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  text-shadow: 0 0 30px rgba(var(--wn-accent-rgb), 0.4);
  position: relative;
  z-index: 1;
}

.ly-chapter-title::after {
  background: none !important;
  box-shadow: none !important;
}


.ly-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  margin: 32px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ly-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--wn-accent);
  box-shadow: 0 0 10px rgba(var(--wn-accent-rgb), 0.6);
  flex-shrink: 0;
}


.ly-intro-grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 0;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
}

.ly-intro-col {
  padding: 24px;
}

.ly-intro-col+.ly-intro-col {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.ly-intro-col h4 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}


.ly-tier-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.ly-tier-item {
  padding: 8px 16px 6px;
  margin-bottom: 4px;
  border-radius: 3px;
  position: relative;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
  list-style: none !important;
}

.ly-tier-item::before {
  content: '' !important;
}

.ly-tier-item:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ly-tier-item.assembly,
.ly-tier-item.assembly ul>li {
  padding: 0;
  padding-left: 0;
  margin-bottom: 0;
}

.ly-tier-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid currentColor;
  opacity: 0.9;
}

.ly-tier-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ly-tier-req {
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  margin-left: auto;
}

.ly-tier-desc {
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 2px 0 0;
}

.display-flex {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ly-tier-badge.t0,
.ly-tier-name.t0 {
  color: #888888;
  background: rgba(136, 136, 136, 0.10);
}

.ly-tier-badge.t1,
.ly-tier-name.t1 {
  color: #e67e22;
  background: rgba(230, 126, 34, 0.10);
}

.ly-tier-badge.t2,
.ly-tier-name.t2 {
  color: #3498db;
  background: rgba(52, 152, 219, 0.10);
}

.ly-tier-badge.t3,
.ly-tier-name.t3 {
  color: #2ecc71;
  background: rgba(230, 230, 230, 0.10);
}

.ly-tier-badge.t4,
.ly-tier-name.t4 {
  color: #e6e6e6;
  background: rgba(230, 230, 230, 0.10);
}

.ly-tier-badge.t5,
.ly-tier-name.t5 {
  color: #9b59b6;
  background: rgba(155, 89, 182, 0.10);
}

.ly-tier-badge.t6,
.ly-tier-name.t6 {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.10);
}

.ly-tier-item.t0 .ly-tier-badge,
.ly-tier-item.t0 .ly-tier-name {
  color: #888888;
}

.ly-tier-item.t0 {
  border-left: 3px solid #888888;
}

.ly-tier-item.t1 .ly-tier-badge,
.ly-tier-item.t1 .ly-tier-name {
  color: #e67e22;
}

.ly-tier-item.t1 {
  border-left: 3px solid #e67e22;
}

.ly-tier-item.t2 .ly-tier-badge,
.ly-tier-item.t2 .ly-tier-name {
  color: #3498db;
}

.ly-tier-item.t2 {
  border-left: 3px solid #3498db;
}

.ly-tier-item.t3 .ly-tier-badge,
.ly-tier-item.t3 .ly-tier-name {
  color: #2ecc71;
}

.ly-tier-item.t3 {
  border-left: 3px solid #2ecc71;
}

.ly-tier-item.t4 .ly-tier-badge,
.ly-tier-item.t4 .ly-tier-name {
  color: #e6e6e6;
}

.ly-tier-item.t4 {
  border-left: 3px solid #e6e6e6;
}

.ly-tier-item.t5 .ly-tier-badge,
.ly-tier-item.t5 .ly-tier-name {
  color: #9b59b6;
}

.ly-tier-item.t5 {
  border-left: 3px solid #9b59b6;
}

.ly-tier-item.t6 .ly-tier-badge,
.ly-tier-item.t6 .ly-tier-name {
  color: #e74c3c;
}

.ly-tier-item.t6 {
  border-left: 3px solid #e74c3c;
}

.dept-card.cmru .ly-tier-badge,
.dept-card.cmru .ly-tier-name {
  color: #d60326;
}

.dept-card.cmru h2:after {
  background: #d60326;
  box-shadow: 0 0 12px rgba(214, 3, 38, 0.6), 0 0 30px rgba(214, 3, 38, 0.2);
}


.dept-card.cmru {
  border: 1px solid rgba(214, 3, 38, 0.25);
  border-left: 3px solid #d60326;

}

.dept-card.cwu .ly-tier-badge,
.dept-card.cwu .ly-tier-name {
  color: #dfdfdf;

}

.dept-card.cwu h2::after {
  background: #dfdfdf;
  box-shadow: 0 0 12px rgba(223, 223, 223, 0.6), 0 0 30px rgba(223, 223, 223, 0.2);
}

.dept-card.cwu {
  border: 1px solid rgba(223, 223, 223, 0.25);
  border-left: 3px solid #dfdfdf;

}


.dept-card.ucb .ly-tier-badge,
.dept-card.ucb .ly-tier-name {
  color: #386cce;
}

.dept-card.ucb h2::after {
  background: #386cce;
  box-shadow: 0 0 12px rgba(56, 108, 206, 0.6), 0 0 30px rgba(56, 108, 206, 0.2);
}


.dept-card.ucb {
  border: 1px solid rgba(56, 108, 206, 0.25);
  border-left: 3px solid #386cce;

}

.ly-exam-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 3px;
  padding: 10px 16px;
  margin: 8px 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e74c3c;
  text-align: center;
}


.ly-tier-banner {
  position: relative;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
  animation: wn-fadeUp 0.5s ease both;
}

.display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.ly-tier-banner-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ly-tier-banner-header .ly-tier-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.7;
}

.ly-tier-banner-header .ly-tier-title {
  font-family: 'Bebas Neue', cursive;
  font-size: 22px;
  letter-spacing: 4px;
  color: #fff;
}

.ly-tier-banner-header .ly-tier-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 28px;
  letter-spacing: -1px;
  opacity: 0.15;
  margin-left: auto;
  color: #fff;
}

.ly-tier-banner-body {
  padding: 16px 20px;
}

.ly-reward-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  line-height: 1.55;
  color: #c5c5d6;
}

.ly-reward-item:last-child {
  border-bottom: none;
}

.ly-reward-item::before {
  content: '›';
  color: rgba(255, 255, 255, 0.25);
  font-size: 16px;
  flex-shrink: 0;
  line-height: 0.7;
  margin-top: 2px;
}


.ly-tier-banner.t1 .ly-reward-item::before {
  color: rgba(230, 126, 34, 0.5);
}

.ly-tier-banner.t2 .ly-reward-item::before {
  color: rgba(52, 152, 219, 0.5);
}

.ly-tier-banner.t3 .ly-reward-item::before {
  color: rgba(46, 204, 113, 0.5);
}

.ly-tier-banner.t4 .ly-reward-item::before {
  color: rgba(230, 230, 230, 0.5);
}

.ly-tier-banner.t5 .ly-reward-item::before {
  color: rgba(155, 89, 182, 0.5);
}

.ly-tier-banner.t6 .ly-reward-item::before {
  color: rgba(231, 76, 60, 0.5);
}

.ly-tier-banner.t-societe .ly-reward-item::before {
  color: rgba(211, 84, 0, 0.5);
}



.ly-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.3);
  padding: 1px 7px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}


.ly-free {
  display: inline-flex;
  align-items: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.25);
  padding: 1px 7px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}


.ly-tier-banner.t1 {
  border-left: 3px solid #e67e22;
}

.ly-tier-banner.t1 .ly-tier-banner-header {
  background: rgba(230, 126, 34, 0.08);
  border-bottom-color: rgba(230, 126, 34, 0.2);
}

.ly-tier-banner.t1 .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t1 .ly-tier-banner-header .ly-tier-title {
  color: #e67e22;
}

.ly-tier-banner.t2 {
  border-left: 3px solid #3498db;
}

.ly-tier-banner.t2 .ly-tier-banner-header {
  background: rgba(52, 152, 219, 0.08);
  border-bottom-color: rgba(52, 152, 219, 0.2);
}

.ly-tier-banner.t2 .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t2 .ly-tier-banner-header .ly-tier-title {
  color: #3498db;
}

.ly-tier-banner.t3 {
  border-left: 3px solid #2ecc71;
}

.ly-tier-banner.t3 .ly-tier-banner-header {
  background: rgba(46, 204, 113, 0.08);
  border-bottom-color: rgba(46, 204, 113, 0.2);
}

.ly-tier-banner.t3 .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t3 .ly-tier-banner-header .ly-tier-title {
  color: #2ecc71;
}

.ly-tier-banner.t4 {
  border-left: 3px solid #e6e6e6;
}

.ly-tier-banner.t4 .ly-tier-banner-header {
  background: rgba(230, 230, 230, 0.08);
  border-bottom-color: rgba(230, 230, 230, 0.2);
}

.ly-tier-banner.t4 .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t4 .ly-tier-banner-header .ly-tier-title {
  color: #e6e6e6;
}

.ly-tier-banner.t5 {
  border-left: 3px solid #9b59b6;
}

.ly-tier-banner.t5 .ly-tier-banner-header {
  background: rgba(155, 89, 182, 0.08);
  border-bottom-color: rgba(155, 89, 182, 0.2);
}

.ly-tier-banner.t5 .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t5 .ly-tier-banner-header .ly-tier-title {
  color: #9b59b6;
}

.ly-tier-banner.t6 {
  border-left: 3px solid #e74c3c;
}

.ly-tier-banner.t6 .ly-tier-banner-header {
  background: rgba(231, 76, 60, 0.08);
  border-bottom-color: rgba(231, 76, 60, 0.2);
}

.ly-tier-banner.t6 .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t6 .ly-tier-banner-header .ly-tier-title {
  color: #e74c3c;
}

.ly-tier-banner.t-societe {
  border-left: 3px solid #d35400;
}

.ly-tier-banner.t-societe .ly-tier-banner-header {
  background: rgba(211, 84, 0, 0.08);
  border-bottom-color: rgba(211, 84, 0, 0.2);
}

.ly-tier-banner.t-societe .ly-tier-banner-header .ly-tier-label,
.ly-tier-banner.t-societe .ly-tier-banner-header .ly-tier-title {
  color: #d35400;
}



.ly-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  counter-reset: cert;
}

.ly-cert-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 2px solid var(--wn-primary);
  border-radius: 0 0 4px 4px;
  padding: 16px;
  animation: wn-fadeUp 0.5s ease both;
  position: relative;
  overflow: hidden;
  counter-increment: cert;
}

.ly-cert-card::after {
  content: counter(cert, decimal-leading-zero);
  position: absolute;
  bottom: -10px;
  right: 8px;
  font-family: 'Bebas Neue', cursive;
  font-size: 72px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}

.ly-cert-card-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wn-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ly-cert-card-title::before {
  content: '✦';
  font-size: 8px;
  color: var(--wn-primary);
}

.ly-cert-card p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: rgba(197, 197, 214, 0.85);
}


.ly-wip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.4);
  padding: 6px 16px;
  border-radius: 2px;
  background: rgba(231, 76, 60, 0.07);
  margin: 8px auto;
}

.ly-wip-wrap {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}


.ly-quote-attr {
  display: block;
  text-align: right;
  font-style: italic;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 8px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.5px;
}


.ly-subtitle {
  font-style: italic;
  font-size: 13px;
  color: rgba(197, 197, 214, 0.55);
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}


.ly-admin-note {
  background: rgba(var(--wn-accent-rgb), 0.07);
  border-left: 3px solid rgba(var(--wn-accent-rgb), 0.5);
  border-radius: 0 4px 4px 0;
  padding: 14px 20px;
  margin-bottom: 20px;
  font-style: italic;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.ly-admin-note strong {
  color: rgba(41, 128, 185, 0.9);
  font-style: normal;
}

.ly-page-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.ly-page-nav a {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  padding: 6px 14px;
  border-radius: 3px 3px 0 0;
  transition: all 0.2s;
  text-decoration: none;
}

.ly-page-nav a:hover {
  color: var(--wn-accent-light);
  border-color: rgba(41, 128, 185, 0.4);
  background: rgba(41, 128, 185, 0.06);
  filter: none;
}


.ly-phil-num {
  font-family: 'Bebas Neue', cursive;
  font-size: 48px;
  color: rgba(41, 128, 185, 0.18);
  line-height: 1;
  float: left;
  margin: -4px 16px 0 0;
  letter-spacing: 2px;
}


@media (max-width: 640px) {
  .ly-cert-grid {
    grid-template-columns: 1fr;
  }

  .ly-intro-grid {
    grid-template-columns: 1fr;
  }

  .ly-intro-col+.ly-intro-col {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .ly-tier-item {
    flex-wrap: wrap;
  }

  .ly-tier-req {
    margin-left: 0;
    width: 100%;
    padding-left: 0;
  }

  .ly-reward-item {
    flex-wrap: wrap;
  }

  .ly-cost,
  .ly-free {
    margin-left: 0;
  }
}

/* 12. Buttons/Tabs
    ------------------------------------------------------------ */

.sub-sub-nav {
  margin-top: 15px;
  margin-bottom: 20px;
  justify-content: center;
}

.tab-content:not(.active) .sub-sub-nav {
  display: none;
}

.subdivision {
  display: none;
}

.subdivision.active {
  display: block;
}

.dept-card-header-with-switcher {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dept-card-header-main {
  flex: 1;
  min-width: 0;
}

.subdivision-switcher {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 30px;
  margin-right: 12px;
}

.subdivision-btn {
  background: transparent;
  border: 1px solid rgba(var(--wn-accent-rgb), 0.35);
  color: var(--wn-accent);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  white-space: nowrap;
}

.subdivision-btn.active,
.subdivision-btn:hover {
  background: var(--wn-accent);
  color: #fff;
  border-color: var(--wn-accent);
  box-shadow: 0 0 8px rgba(var(--wn-accent-rgb), 0.35);
}

.subdivision-btn:not(.active) {
  opacity: 0.7;
}

.subdivision-btn:not(.active):hover {
  opacity: 1;
}

.tab-content {
  display: none;
  animation: wn-fadeUp 0.4s ease;
  min-height: 240px;
}

.tab-content.active {
  display: block;
}

.terminal-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(var(--wn-accent-rgb), 0.3);
  padding-bottom: 10px;
  justify-content: center;
}

.terminal-btn {
  background: transparent;
  border: 1px solid rgba(var(--wn-accent-rgb), 0.5);
  color: var(--wn-accent);
  font-family: 'Share Tech Mono', monospace;
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}

.terminal-btn.active,
.terminal-btn:hover {
  background: var(--wn-accent);
  color: #fff;
  border-color: var(--wn-accent);
  box-shadow: 0 0 15px rgba(var(--wn-accent-rgb), 0.5);
  transform: translateY(-1px);
}

.terminal-btn:not(.active) {
  opacity: 0.85;
}

.terminal-btn:not(.active):hover {
  opacity: 1;
}