/* Thème Khraal : surcouche d'Exo (barre d'en-tête, logo, Passe Royale, gemmes). */
:root {
  --k-bg: #1d2026;
  --k-band: #23272f;
  --k-card: #272b33;
  --k-card-2: #30353f;
  --k-line: #383e49;
  --k-ink: #eceef2;
  --k-muted: #9ea5b2;
  --k-faint: #6d7482;
  --k-gold: #f0b94d;
  --k-gold-hover: #f6cb74;
  --k-gold-ink: #291b02;
  --k-gold-wash: rgba(240, 185, 77, .12);
  --k-gem: #8796ff;
  --k-gem-btn: #5560d4;
  --k-gem-btn-hover: #6570e6;
  --k-gem-wash: rgba(125, 141, 255, .13);
  --k-online: #4fd17a;
  --k-online-ring: rgba(79, 209, 122, .2);
  --k-blurple: #8a93fb;
  --k-blurple-wash: rgba(138, 147, 251, .13);
  --k-shadow: rgba(0, 0, 0, .38);
  --k-sale: #e5484d;
  --k-sale-deep: #a91f2a;
  --k-sale-ink: #ffffff;
  --k-sale-glow: rgba(229, 72, 77, .5);
  --k-timer-bg: rgba(0, 0, 0, .24);
  --k-r: 6px;
  --k-display: "Rubik", system-ui, "Segoe UI", sans-serif;
  --k-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Couleurs Exo reprises par le panier, la connexion et les fenêtres Tebex */
  --color-text: var(--k-ink);
  --color-text-darker: #d9dce3;
  --color-text-secondary: var(--k-muted);
  --color-bg: var(--k-bg);
  --color-brighter-bg: var(--k-card);
  --color-primary: var(--k-gold);
  --color-primary-hover: var(--k-gold-hover);
  --color-primary-text: var(--k-gold-ink);
  --color-primary-text-hover: var(--k-gold-ink);
  --color-secondary: var(--k-card-2);
  --color-secondary-hover: #3a404c;
  --color-secondary-text: var(--k-ink);
  --color-secondary-text-hover: var(--k-ink);
  --color-sale-banner-bg: var(--k-gold-wash);
  --color-sale-banner-text: var(--k-gold);
}

body {
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-body);
}
body::before { display: none; }

.k-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* En-tête */
.k-header {
  background:
    radial-gradient(ellipse 55% 110% at 50% 0%, var(--k-gem-wash), transparent 70%),
    linear-gradient(180deg, var(--k-band), var(--k-bg));
  border-bottom: 1px solid var(--k-line);
  padding-block: 16px 40px;
}
.k-header .k-wrap { display: flex; flex-direction: column; gap: 22px; }
.k-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--k-line);
}
.k-server {
  display: flex; flex-direction: column; gap: 5px; padding: 4px 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  height: auto; min-height: 0;
}
.k-ip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font: 700 1.2rem/1 var(--k-display); letter-spacing: .06em; text-transform: uppercase;
}
.k-copy {
  font: 600 .7rem/1 var(--k-display); letter-spacing: .1em; color: var(--k-faint);
  border: 1px solid var(--k-line); padding: 4px 7px; border-radius: 4px;
}
.k-server:hover .k-copy, .k-copy.is-done { color: var(--k-ink); border-color: var(--k-faint); }
.k-online { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--k-muted); }
.k-online b { color: var(--k-ink); }
.k-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--k-faint); flex: none; }
.k-dot.is-on { background: var(--k-online); box-shadow: 0 0 0 4px var(--k-online-ring); }
.k-bar-end { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.k-discord {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px;
  background: var(--k-blurple-wash); color: var(--k-muted); text-decoration: none; font-size: .9rem;
}
.k-discord svg { color: var(--k-blurple); flex: none; }
.k-discord b { color: var(--k-ink); }
.k-discord:hover { color: var(--k-ink); }
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: auto; min-height: 0; padding: 13px 18px; border: 0; border-radius: 5px; cursor: pointer;
  font: 700 .95rem/1 var(--k-display); letter-spacing: .03em; text-decoration: none;
  transition: filter .15s ease, transform .08s ease;
}
.k-btn:hover { filter: brightness(1.1); }
.k-btn:active { transform: translateY(1px); }
.k-btn-gold, .k-btn-gold:hover { background: var(--k-gold); color: var(--k-gold-ink); }
.k-btn-ghost, .k-btn-ghost:hover { background: transparent; color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-badge {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 5px;
  border-radius: 999px; background: var(--k-gold-ink); color: var(--k-gold); font-size: .8rem;
}
.k-promo {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 12px 18px; border-radius: var(--k-r); text-align: center;
  background: linear-gradient(90deg, var(--k-sale-deep), var(--k-sale)); color: var(--k-sale-ink);
  box-shadow: 0 12px 30px -14px var(--k-sale-glow);
}
.k-promo[hidden], .k-promo [hidden] { display: none; }
.k-promo-text { font: 800 1rem/1.2 var(--k-display); letter-spacing: .08em; text-transform: uppercase; }
.k-promo-off { padding: 5px 10px; border-radius: 999px; background: var(--k-sale-ink); color: var(--k-sale-deep); font: 800 .95rem/1 var(--k-display); }
.k-promo-timer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .88rem; }
.k-promo-timer b { padding: 6px 8px; border-radius: 5px; background: var(--k-timer-bg); font: 700 .95rem/1 var(--k-display); font-variant-numeric: tabular-nums; }
.k-brand { display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: 6px; }
.k-brand a { display: block; line-height: 0; }
.k-brand img { width: min(540px, 88vw); height: auto; filter: drop-shadow(0 12px 26px var(--k-shadow)); }
.k-brand img { animation: k-breathe 5s ease-in-out infinite; transform-origin: 50% 55%; }
@keyframes k-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.k-btn:focus-visible, .k-server:focus-visible, .k-discord:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 3px; }

/* Contenu */
.k-main { display: flex; flex-direction: column; gap: 56px; padding-block: 48px 40px; }
.k-empty { margin: 0; color: var(--k-muted); }
.k-empty a { color: var(--k-gold); }

.k-feature {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; overflow: hidden;
  background: var(--k-card); border: 1px solid var(--k-line); border-radius: var(--k-r);
}
.k-art {
  display: grid; place-items: center; padding: 24px; border-right: 1px solid var(--k-line);
  background: radial-gradient(circle at 50% 55%, var(--k-gold-wash), transparent 70%), var(--k-band);
}
.k-art img.k-crown { width: 156px; image-rendering: pixelated; }
.k-art img { width: 150px; max-width: 100%; height: auto; filter: drop-shadow(0 8px 14px var(--k-shadow)); }
.k-body { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: 30px; }
.k-pill {
  align-self: flex-start; margin: 0; padding: 6px 10px; border-radius: 999px;
  background: var(--k-gold-wash); color: var(--k-gold);
  font: 700 .7rem/1 var(--k-display); letter-spacing: .11em; text-transform: uppercase;
}
.k-feature h2 {
  margin: 0; text-align: left; color: var(--k-ink);
  font: 800 clamp(1.9rem, 3.6vw, 2.5rem)/1 var(--k-display); letter-spacing: .02em; text-transform: uppercase;
}
.k-feature h2 em { font-style: normal; color: var(--k-gold); }
.k-perks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; }
.k-perks li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; font-size: .95rem; color: var(--k-ink); }
.k-perks li.is-wide { grid-column: 1 / -1; }
.k-perks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; background: var(--k-gold); transform: rotate(45deg); }
.k-main code {
  font-family: var(--k-display); font-size: .92em; color: var(--k-gold);
  background: var(--k-card-2); padding: 1px 6px; border-radius: 4px;
}
.k-buy {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px;
  border-left: 1px solid var(--k-line); background: var(--k-band);
}

.k-buy-offers { display: flex; flex-direction: column; gap: 12px; }
.k-season-end { margin: 0; text-align: center; color: var(--k-muted); font-size: .88rem; }
.k-buy .quantity-field .adjust { display: none; }
.k-season-end { line-height: 1.5; }
.k-season-end b { color: var(--k-gold); font-family: var(--k-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Carte d'un package */
.k-pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 24px 22px 22px; background: var(--k-card); border: 1px solid var(--k-line); border-radius: var(--k-r);
  transition: border-color .15s ease, transform .15s ease;
}
.k-grid .k-pack:hover { border-color: var(--k-gem); transform: translateY(-3px); }
.k-pack-media { position: relative; width: 150px; max-width: 100%; height: 112px; }
.k-pack-media > img:only-child { width: 100%; height: 100%; object-fit: contain; }
.k-pile img { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px var(--k-shadow)); }
.k-pack-name { margin: 6px 0 0; color: var(--k-ink); font: 800 2.05rem/1 var(--k-display); }
.k-pack-name small { margin-left: 6px; color: var(--k-gem); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.k-pack-name.is-text { font-size: 1.2rem; line-height: 1.25; }
.k-pack .product-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin: 0; }
.k-pack .product-actions .price { margin: 0; color: var(--k-ink); font: 700 1.25rem/1 var(--k-display); text-align: center; }
.k-pack .product-actions .price del { margin-right: 6px; color: var(--k-faint); font-size: .8em; }
.k-grid .k-pack .product-actions .add,
.k-grid .k-pack .product-actions .subscribe { background: var(--k-gem-btn); color: var(--k-ink); border-radius: 5px; }
.k-grid .k-pack .product-actions .add:hover,
.k-grid .k-pack .product-actions .subscribe:hover { background: var(--k-gem-btn-hover); color: var(--k-ink); }

.k-pack .product-actions > a,
.k-pack .product-actions > button,
.k-pack .product-actions > .quantity-field { box-sizing: border-box; width: 100%; justify-content: center; text-align: center; }
.k-perks code { white-space: nowrap; }

.k-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: var(--k-gold); color: var(--k-gold-ink);
  font: 700 .74rem/1 var(--k-display); letter-spacing: .02em;
}
.k-tag.is-best { background: var(--k-gem); }
.k-off {
  position: absolute; top: -12px; right: 14px; z-index: 1; white-space: nowrap;
  padding: 6px 10px; border-radius: 999px; background: var(--k-sale); color: var(--k-sale-ink);
  font: 800 .78rem/1 var(--k-display);
}
.k-pack.is-popular { border-color: var(--k-gold); background: linear-gradient(180deg, var(--k-gold-wash), transparent 45%), var(--k-card); }
.k-pack.is-best { border-color: var(--k-gem); background: linear-gradient(180deg, var(--k-gem-wash), transparent 45%), var(--k-card); }
.k-grid { padding-top: 12px; }

.k-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Les durées de la Passe Royale, dans la colonne d'achat */
.k-buy .k-pack {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px;
  padding: 14px 16px; text-align: left;
}
.k-buy .k-pack-media { display: none; }
.k-buy .k-pack-name { grid-column: 1; margin: 0; font-size: 1.05rem; }
.k-buy .k-pack .product-actions { display: contents; }
.k-buy .k-pack .product-actions .price { grid-column: 2; grid-row: 1; font-size: 1.15rem; }
.k-buy .k-pack .product-actions > :not(.price) { grid-column: 1 / -1; }

/* Aide */
.k-section { display: flex; flex-direction: column; gap: 28px; }
.k-section-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.k-section-title h2 { margin: 0; text-align: left; color: var(--k-gold); font: 700 1.55rem/1 var(--k-display); }
.k-section-title p { margin: 0; color: var(--k-muted); }
.k-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.k-panel {
  display: flex; flex-direction: column; gap: 18px; padding: 24px 26px;
  background: var(--k-card); border: 1px solid var(--k-line); border-radius: var(--k-r);
}
.k-panel h3 { margin: 0; text-align: left; color: var(--k-gold); font: 700 1.12rem/1 var(--k-display); }
.k-row { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.k-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 8px; }
.k-ico.is-discord { background: var(--k-blurple-wash); color: var(--k-blurple); }
.k-ico.is-ticket { background: var(--k-online-ring); color: var(--k-online); }
.k-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.k-row-text b { font-weight: 700; }
.k-row-text span { font-size: .85rem; color: var(--k-muted); }
.k-join {
  padding: 9px 14px; border-radius: 999px; white-space: nowrap; background: var(--k-blurple-wash); color: var(--k-blurple);
  font: 700 .76rem/1 var(--k-display); letter-spacing: .09em; text-transform: uppercase;
}
.k-row:hover .k-join { color: var(--k-ink); }
.k-steps { list-style: none; counter-reset: k-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.k-steps li { counter-increment: k-step; display: flex; align-items: center; gap: 13px; color: var(--k-muted); }
.k-steps li::before {
  content: counter(k-step); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--k-card-2); color: var(--k-gold); font: 700 .9rem/1 var(--k-display);
}
.k-steps b { color: var(--k-ink); }

.k-footer-legal { margin: 0; color: var(--k-faint); font-size: .84rem; text-align: center; }

@media (max-width: 900px) {
  .k-bar { flex-direction: column; text-align: center; }
  .k-server { align-items: center; text-align: center; }
  .k-ip { justify-content: center; }
  .k-bar-end { justify-content: center; }
  .k-feature { grid-template-columns: minmax(0, 1fr); }
  .k-art { border-right: 0; border-bottom: 1px solid var(--k-line); }
  .k-buy { border-left: 0; border-top: 1px solid var(--k-line); }
  .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .k-grid, .k-perks { grid-template-columns: minmax(0, 1fr); }
  .k-body, .k-buy { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-pack, .k-btn { transition: none; }
  .k-brand img { animation: none; }
}