/* 1kamas: Dofus items and accounts page tests (/objets/dofus/ and /comptes/dofus/, see
   1k-market.js and 1k-accounts.js), laid out like Eldorado's
   listings: breadcrumb and category tabs on one line, the game picture with the title, then a
   filter column on the left (folds behind a "Filtres" button below 1024px) and the results on the
   right: count and sort, compact offer cards in three columns, numbered pages; an offer window.
   1420px wide like the homepage test (1k-wide.css). Site palette (variables, both themes).
   Type: Inter only: 400 for text and filters; 500 for tabs, card titles, sort and pages; 600 for
   titles and prices (no 700 here).
   Only the pages with <html data-k1-page="market"> or "accounts" are affected. Rules that style form fields start
   with #k1-market to win over the shared form-field rule in 1k-site-base.css. */

/* ---------- Page shell: the copied 404 page ----------
   Its <main> holds the page's text (.k1s, below); anything else in it is hidden; <main> becomes a normal left-aligned content column and keeps some
   height while the page loads, so the footer doesn't jump */
html:is([data-k1-page="market"], [data-k1-page="accounts"]) main { padding-top: 0; padding-bottom: 0; text-align: left; min-height: 70vh; }
html:is([data-k1-page="market"], [data-k1-page="accounts"]) main > :not(#k1-market):not(.k1s) { display: none !important; }
/* Until the listing is there (1k-market.js / 1k-accounts.js build it once the page is shown), the
   page's text stays invisible and <main> fills the screen: the listing used to appear above the
   text and push it down, footer included. Shown anyway after 1.5 s */
html main:has(> .k1s):not(:has(#k1-market)) { min-height: 100vh; }
html main:has(> .k1s):not(:has(#k1-market)) > * { visibility: hidden; animation: k1m-show 0s 1.5s forwards; }
@keyframes k1m-show { to { visibility: visible; } }

/* Width: 1420px of content like the homepage (1k-wide.css); header controls follow it */
html:is([data-k1-page="market"], [data-k1-page="accounts"]) .container-1k { max-width: 1468px; }
@media (min-width: 1024px) {
  html:is([data-k1-page="market"], [data-k1-page="accounts"]) header .bg-header-plum .inline-flex.antialiased { right: calc(max(24px, (100% - 1420px) / 2) + 40px); }
  html:is([data-k1-page="market"], [data-k1-page="accounts"]) header .bg-header-plum .sm\:flex > div.relative:has(> .theme-toggle-btn) { right: max(24px, calc((100% - 1420px) / 2)); }
}

.k1m { color: rgb(var(--body)); font-size: 14px; line-height: 20px; scroll-margin-top: 120px; }
/* Dark mode: the browser's own controls (radios, number fields) in their dark version */
html[data-theme="dark"] .k1m { color-scheme: dark; }
.k1m *, .k1m *::before, .k1m *::after { box-sizing: border-box; }
.k1m p { margin: 0; }

/* ---------- Line 1: breadcrumb left, category tabs right ---------- */
.k1m-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.k1m-crumbs { display: flex; align-items: center; gap: 8px; color: rgb(var(--muted)); font-size: 14px; }
.k1m-crumbs a { color: inherit; text-decoration: none; }
.k1m-crumbs a:hover { color: rgb(var(--brand)); }
.k1m-crumbs [aria-current] { color: rgb(var(--ink)); }
.k1m-tabs { display: flex; align-self: stretch; gap: 24px; }
.k1m-tab {
  display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent;
  color: rgb(var(--body)); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.k1m-tab svg { flex: none; width: 18px; height: 18px; }
.k1m-tab[aria-current] { --k1i-badge: rgb(var(--brand)); }
a.k1m-tab:hover { color: rgb(var(--ink)); }
.k1m-tab[aria-current] { color: rgb(var(--brand)); border-bottom-color: rgb(var(--brand)); }
.k1m-tab.is-soon { color: rgb(var(--muted)); cursor: default; }
.k1m-tab small { font-size: 11px; font-weight: 400; }

/* ---------- Line 2: game picture + title + one line ---------- */
.k1m-head { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.k1m-head__img { flex: none; display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #1d072a; }
.k1m-head__img img { width: 100%; height: 100%; object-fit: contain; }
.k1m-head h1 { margin: 0; color: rgb(var(--ink)); font-size: 24px; line-height: 32px; font-weight: 600; }
.k1m-head p { margin-top: 2px; color: rgb(var(--body)); font-size: 14px; }

/* ---------- Filters left, results right ---------- */
.k1m-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 20px; }

/* Filter column: title + "Effacer", search, popular searches, then sections that fold */
.k1m-side__toggle { display: none; }
.k1m-side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgb(var(--line)); }
.k1m-side__head h2 { margin: 0; color: rgb(var(--ink)); font-size: 18px; line-height: 24px; font-weight: 600; }
.k1m-clear { padding: 0; border: 0; background: none; color: rgb(var(--brand)); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.k1m-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.k1m-clear[hidden] { display: none; }

/* Server first: a dropdown at the top of the column, purple once a server is chosen */
.k1m-server { margin-top: 16px; }
.k1m-server__label { margin-bottom: 6px !important; color: rgb(var(--ink)); font-size: 15px; font-weight: 600; }
.k1m-select { display: block; }
#k1-market .k1m-select select {
  width: 100%; height: 42px; padding: 0 36px 0 12px; appearance: none; cursor: pointer;
  border: 1px solid rgb(var(--line)); border-radius: 8px; background-color: rgb(var(--surface));
  color: rgb(var(--ink)); font: inherit; font-size: 14px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316151c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
}
html[data-theme="dark"] #k1-market .k1m-select select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4f1fa'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
#k1-market .k1m-select select:hover { border-color: rgb(var(--brand) / .45); }
#k1-market .k1m-select.is-set select { border-color: rgb(var(--brand)); color: rgb(var(--brand)); }
#k1-market .k1m-select select:focus-visible { outline: none; border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); }

.k1m-search { display: flex; height: 40px; margin-top: 16px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); overflow: hidden; }
#k1-market .k1m-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: rgb(var(--ink)); font: inherit; font-size: 14px;
}
.k1m-search input::placeholder { color: rgb(var(--muted)); }
.k1m-search input::-webkit-search-cancel-button { display: none; }
.k1m-search:focus-within { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); }
.k1m-search__btn { flex: none; display: grid; place-items: center; width: 40px; border: 0; background: transparent; color: rgb(var(--body)); cursor: pointer; }
.k1m-search__btn:hover { color: rgb(var(--brand)); }

.k1m-popular { margin-top: 14px; }
.k1m-popular > p { color: rgb(var(--muted)); font-size: 13px; }
.k1m-popular__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.k1m-chip {
  height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: rgb(var(--ink) / .06);
  color: rgb(var(--ink)); font: inherit; font-size: 13px; cursor: pointer;
}
.k1m-chip:hover { background: rgb(var(--brand) / .12); color: rgb(var(--brand)); }

/* Folding sections (native <details>) */
.k1m-facet { border-top: 1px solid rgb(var(--line)); margin-top: 16px; }
.k1m-facet > summary {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; list-style: none; cursor: pointer;
  color: rgb(var(--ink)); font-size: 15px; font-weight: 600;
}
.k1m-facet > summary::-webkit-details-marker { display: none; }
.k1m-facet > summary::after {
  content: ""; width: 16px; height: 16px; background: currentColor; transform: rotate(180deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.k1m-facet:not([open]) > summary::after { transform: none; }
.k1m-facet__body { padding-bottom: 4px; }

/* Price: min / max fields */
.k1m-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.k1m-range > span { color: rgb(var(--muted)); font-size: 13px; }
#k1-market .k1m-range input {
  width: 100%; height: 38px; padding: 0 10px; border: 1px solid rgb(var(--line)); border-radius: 8px;
  background: rgb(var(--surface)); color: rgb(var(--ink)); font: inherit; font-size: 14px; -moz-appearance: textfield;
}
.k1m-range input::-webkit-outer-spin-button, .k1m-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#k1-market .k1m-range input:focus { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); outline: none; }

/* Choice rows: radio, optional egg, label, count */
.k1m-opts { display: flex; flex-direction: column; }
.k1m-opt { display: flex; align-items: center; gap: 10px; min-height: 32px; color: rgb(var(--ink)); font-size: 14px; cursor: pointer; }
.k1m-opt:hover .k1m-opt__label { color: rgb(var(--brand)); }
.k1m-opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: rgb(var(--brand)); }
.k1m-opt img { flex: none; width: 20px; height: 20px; object-fit: contain; }
.k1m-opt__label { flex: 1; min-width: 0; }
.k1m-opt__count { color: rgb(var(--muted)); font-size: 12px; }
.k1m-opts__group { margin: 8px 0 2px; color: rgb(var(--muted)); font-size: 12px; font-weight: 500; }
.k1m-opt[hidden] { display: none; }
/* "Voir les 19 classes" under a long list */
.k1m-more { margin: 4px 0 0 26px; padding: 0; border: 0; background: none; color: rgb(var(--brand)); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.k1m-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Results: count and sort, then the cards ---------- */
.k1m-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.k1m-count { color: rgb(var(--muted)); font-size: 14px; }
.k1m-sort { display: flex; align-items: center; height: 40px; color: rgb(var(--ink)); cursor: pointer; }
.k1m-sort svg { flex: none; width: 18px; height: 18px; }
#k1-market .k1m-sort select {
  height: 40px; padding: 0 26px 0 8px; appearance: none; cursor: pointer; border: 0; box-shadow: none;
  background-color: transparent; color: rgb(var(--ink)); font: inherit; font-size: 14px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316151c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 18px;
}
html[data-theme="dark"] #k1-market .k1m-sort select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4f1fa'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
#k1-market .k1m-sort select:hover { color: rgb(var(--brand)); }

.k1m-grid { display: grid; gap: 16px; margin-top: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .k1m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .k1m-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* Compact card, like Eldorado's: name + stats with the egg, then server and delivery time, then
   price / buy buttons */
.k1m-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
.k1m-card:hover { border-color: rgb(var(--brand) / .45); }
.k1m-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.k1m-card__title { margin: 0; color: rgb(var(--ink)); font-size: 15px; line-height: 22px; font-weight: 500; }
/* "Légendaire" tag next to the name of a legendary item (amber, readable in both themes) */
.k1m-tag {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 4px; vertical-align: 1px;
  background: rgb(217 119 6 / .12); color: #b45309; font-size: 11px; line-height: 18px; font-weight: 600;
}
html[data-theme="dark"] .k1m-tag { background: rgb(251 191 36 / .14); color: #fbbf24; }
/* Accounts: "Niveau 200" next to the class name, in the brand colour */
.k1m-level {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 4px; vertical-align: 1px;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand)); font-size: 11px; line-height: 18px; font-weight: 600;
}
.k1m-card__sub { margin-top: 2px; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; }
/* Accounts: "Plus d'infos" under the equipment, a small lavender link above the card's
   full-card button */
.k1m-card__more {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 0;
  border: 0; background: none; color: rgb(var(--brand)); font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer;
}
.k1m-card__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.k1m-card__more:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; border-radius: 4px; }
.k1m-card__img { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: #1d072a; }
.k1m-card__img img { width: 44px; height: 44px; object-fit: contain; }
.k1m-card__img--class img { width: 40px; height: 40px; }
.k1m-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgb(var(--body)); font-size: 13px; line-height: 20px; }
.k1m-card__row + .k1m-card__row { margin-top: -4px; }
.k1m-card__server { color: rgb(var(--ink)); font-weight: 500; }
.k1m-card__server > span { color: rgb(var(--muted)); font-weight: 400; }
.k1m-card__price { color: rgb(var(--ink)); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.k1m-card__price small { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.k1m-card__time { display: inline-flex; align-items: center; gap: 5px; color: rgb(var(--body)); }
/* The delivery time ("5 min") with its clock */
.k1m-card__meta { display: inline-flex; align-items: center; gap: 6px; }

/* Buy buttons next to the price: the bag (the header's cart icon, outlined) and "Acheter" in the
   purchase purple with white text and the buy box's shield (in dark mode --cta is the buy box's
   #8B74D0). They sit above the card's full-card button, so they get their own clicks */
.k1m-card__actions { position: relative; z-index: 1; display: flex; flex: none; gap: 8px; }
.k1m-card__cart,
.k1m-card__buy {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; border-radius: 8px;
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.k1m-card__cart { width: 36px; padding: 0; border: 1px solid rgb(var(--line)); background: transparent; color: rgb(var(--ink)); }
.k1m-card__cart:hover { border-color: rgb(var(--cta) / .6); color: rgb(var(--cta)); }
.k1m-card__buy { gap: 8px; padding: 0 16px; border: 0; background: rgb(var(--cta)); color: #fff; white-space: nowrap; }
.k1m-card__buy:hover { background: rgb(var(--cta-hover)); }
/* A shield with a check before "Acheter" (secure payment), like the buy box and the quick order */
.k1m-card__buy::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.2 4.2 5.3v6.1c0 4.9 3.3 8.9 7.8 10.4 4.5-1.5 7.8-5.5 7.8-10.4V5.3zm4.1 7.6-5 5a1 1 0 0 1-1.4 0l-2.4-2.4 1.4-1.4 1.7 1.7 4.3-4.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.2 4.2 5.3v6.1c0 4.9 3.3 8.9 7.8 10.4 4.5-1.5 7.8-5.5 7.8-10.4V5.3zm4.1 7.6-5 5a1 1 0 0 1-1.4 0l-2.4-2.4 1.4-1.4 1.7 1.7 4.3-4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.k1m-card__cart, .k1m-card__buy):focus-visible { outline: 2px solid rgb(var(--cta)); outline-offset: 2px; }
html[data-theme="dark"] .k1m-card__cart { border-color: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .k1m-card__cart:hover { border-color: rgb(184 164 238 / .6); color: #b8a4ee; }

/* The rest of the card opens the offer too: one button stretched under the others, invisible
   (mouse only; "Acheter" is the keyboard's way in) */
.k1m-card__hit { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.k1m-card__hit:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }

.k1m-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; color: rgb(var(--muted)); border: 1px dashed rgb(var(--line)); border-radius: 8px; }

/* Numbered pages under the cards */
.k1m-pages { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.k1m-pages:empty { display: none; }
.k1m-page {
  min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid rgb(var(--line)); border-radius: 8px;
  background: rgb(var(--surface)); color: rgb(var(--ink)); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.k1m-page:hover { border-color: rgb(var(--brand) / .45); }
.k1m-page[aria-current] { border-color: rgb(var(--brand)); background: rgb(var(--brand)); color: #fff; }
html[data-theme="dark"] .k1m-page[aria-current] { color: #16161b; }
.k1m-page { display: inline-grid; place-items: center; }
.k1m-page:disabled { color: rgb(var(--muted)); opacity: .5; cursor: default; }
.k1m-page:disabled:hover { border-color: rgb(var(--line)); }
.k1m-page__gap { display: inline-grid; place-items: center; min-width: 24px; color: rgb(var(--muted)); }

/* Below 1024px: one column; the filters fold behind a "Filtres" button above the results */
@media (max-width: 1023px) {
  .k1m-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .k1m-side__toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
    border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface));
    color: rgb(var(--ink)); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .k1m-side.has-filters .k1m-side__toggle { border-color: rgb(var(--brand)); color: rgb(var(--brand)); }
  .k1m-side__panel { display: none; margin-top: 12px; padding: 16px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); }
  .k1m-side.is-open .k1m-side__panel { display: block; }
}

/* ---------- Offer window ---------- */
.k1m-dialog {
  width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 24px; overflow: auto;
  border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); color: rgb(var(--body));
  box-shadow: 0 16px 48px rgb(11 9 18 / .25); font-size: 14px; line-height: 20px;
}
/* The offer window is the purchase block: the purple --brand is re-declared here, so its "Acheter"
   button keeps the brand purple; the rest of it is ink / grey */
.k1m-dialog { --brand: 124 92 191; --brand-dark: 106 74 173; --brand-soft: 243 238 251; --brand-tint: 247 244 251; }
html[data-theme="dark"] .k1m-dialog { --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56; }
.k1m-dialog::backdrop { background: rgb(11 9 18 / .55); }
.k1m-dialog p { margin: 0; }
.k1m-dialog__head { display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; gap: 14px; align-items: center; }
.k1m-dialog__img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; background: #1d072a; }
.k1m-dialog__img img { width: 50px; height: 50px; object-fit: contain; }
.k1m-dialog__title { margin: 0; color: rgb(var(--ink)); font-size: 20px; line-height: 26px; font-weight: 600; }
.k1m-dialog__stats { margin-top: 2px; color: rgb(var(--muted)); font-size: 13px; }
.k1m-dialog__close { align-self: start; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: rgb(var(--muted)); cursor: pointer; }
.k1m-dialog__close:hover { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); }
.k1m-dialog .k1m-dialog__desc { margin-top: 14px; color: rgb(var(--muted)); font-size: 13px; line-height: 20px; }
/* Effects: two columns of short lines */
.k1m-dialog__effects { margin-top: 14px; }
.k1m-dialog__effects ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
.k1m-dialog__effects li { color: rgb(var(--ink)); font-size: 13px; line-height: 20px; }
/* Accounts: the description written for the account, then its strong points with a check */
.k1m-dialog__about { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: rgb(var(--ink) / .04); }
.k1m-dialog__about h3 { margin: 0 0 6px; color: rgb(var(--ink)); font-size: 14px; line-height: 20px; font-weight: 600; }
.k1m-dialog__about p { color: rgb(var(--body)); font-size: 14px; line-height: 21px; }
.k1m-dialog__about p + p { margin-top: 8px; }
.k1m-dialog__about ul { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.k1m-dialog__about li { display: flex; align-items: flex-start; gap: 8px; color: rgb(var(--ink)); font-size: 13px; line-height: 20px; }
.k1m-dialog__about li svg { flex: none; margin-top: 3px; color: #15803d; }
html[data-theme="dark"] .k1m-dialog__about li svg { color: #4ade80; }
.k1m-dialog__rows { margin: 16px 0 0; border-top: 1px solid rgb(var(--line)); }
.k1m-dialog__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgb(var(--line)); }
.k1m-dialog__row dt { color: rgb(var(--muted)); white-space: nowrap; }
.k1m-dialog__row dd { margin: 0; color: rgb(var(--ink)); font-weight: 500; text-align: right; }
/* Accounts: equipment and Dofus as slots. Equipment: two columns of slots (icon square, slot
   name, item); an empty slot dashed and grey. Dofus: six squares with the Dofus pictures, the
   empty ones dashed, and their names under them. The window is wider from 640px */
@media (min-width: 640px) { .k1m-dialog--account { width: min(600px, calc(100% - 32px)); } }
/* From 900px a wide window: details on the left, the summary, price and buy button in a column
   on the right that stays in view while the details scroll */
@media (min-width: 900px) {
  .k1m-dialog.k1m-dialog--account { width: min(940px, calc(100% - 48px)); max-height: calc(100% - 48px); padding: 24px 28px; }
  .k1m-acc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .k1m-acc__side { position: sticky; top: 0; margin-top: 16px; padding: 4px 16px 16px; border: 1px solid rgb(var(--line)); border-radius: 8px; }
  .k1m-acc__side .k1m-dialog__rows { margin-top: 0; border-top: 0; }
  .k1m-acc__side .k1m-dialog__row:last-child { border-bottom: 0; }
  .k1m-acc__side .k1m-dialog__buy { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgb(var(--line)); }
}
.k1m-eq { margin-top: 16px; }
.k1m-eq__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.k1m-eq__head h3 { margin: 0; color: rgb(var(--ink)); font-size: 14px; line-height: 20px; font-weight: 600; }
.k1m-eq__head span { color: rgb(var(--muted)); font-size: 13px; }
.k1m-eq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.k1m-eq__slot { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border: 1px solid rgb(var(--line)); border-radius: 8px; }
.k1m-eq__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: #1d072a; color: #d9cdf5; }
.k1m-eq__icon img { width: 28px; height: 28px; object-fit: contain; }
.k1m-eq__text { display: grid; min-width: 0; }
/* "Ajouter au panier" under "Acheter": outlined, with the bag */
.k1m-dialog__cart {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 8px;
  border: 1px solid rgb(var(--line)); border-radius: 8px; background: transparent; color: rgb(var(--ink));
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s;
}
.k1m-dialog__cart:hover { border-color: rgb(var(--brand) / .6); color: rgb(var(--brand)); }
.k1m-dialog__cart:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }
html[data-theme="dark"] .k1m-dialog__cart { border-color: rgba(255, 255, 255, .16); }
/* Phones: one slot per line, so the item names fit */
@media (max-width: 479px) { .k1m-eq__grid { grid-template-columns: minmax(0, 1fr); } }
.k1m-eq__text small { color: rgb(var(--muted)); font-size: 12px; line-height: 16px; }
.k1m-eq__text b { overflow: hidden; color: rgb(var(--ink)); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.k1m-eq__slot.is-empty { border-style: dashed; border-color: rgb(var(--ink) / .2); }
.k1m-eq__slot.is-empty .k1m-eq__icon { background: rgb(var(--ink) / .05); color: rgb(var(--muted)); }
.k1m-eq__slot.is-empty b { color: rgb(var(--muted)); font-weight: 400; }
.k1m-dofus { display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.k1m-dofus li { display: grid; place-items: center; aspect-ratio: 1; max-width: 56px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: #1d072a; }
.k1m-dofus li img { width: 70%; height: 70%; object-fit: contain; }
.k1m-dofus li.is-empty { border-style: dashed; border-color: rgb(var(--ink) / .2); background: transparent; }
.k1m-dialog .k1m-dofus__names { margin-top: 6px; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; }
.k1m-dialog__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 20px; }
.k1m-dialog__label { display: block; margin-bottom: 4px; color: rgb(var(--muted)); font-size: 13px; }
.k1m-dialog__buy--single { align-items: center; }
.k1m-dialog__buy--single .k1m-dialog__label { margin: 0; font-size: 14px; }
.k1m-qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid rgb(var(--line)); border-radius: 8px; overflow: hidden; }
.k1m-qty__btn { width: 40px; height: 100%; border: 0; background: transparent; color: rgb(var(--ink)); font: inherit; font-size: 18px; cursor: pointer; }
.k1m-qty__btn:hover:not(:disabled) { background: rgb(var(--ink) / .06); }
.k1m-qty__btn:disabled { color: rgb(var(--muted)); opacity: .5; cursor: default; }
.k1m-qty__value { min-width: 32px; text-align: center; color: rgb(var(--ink)); font-weight: 500; }
.k1m-dialog__sum { text-align: right; }
.k1m-dialog__total { display: block; color: rgb(var(--ink)); font-size: 24px; line-height: 30px; font-weight: 600; }
.k1m-dialog__cta {
  width: 100%; height: 48px; margin-top: 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgb(var(--brand)); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
}
.k1m-dialog__cta:hover { background: rgb(var(--brand-dark)); }
html[data-theme="dark"] .k1m-dialog__cta { color: #16151c; }
/* The quantity is at the most available (the number itself is never shown) */
.k1m-dialog .k1m-dialog__cap { margin-top: 8px; color: rgb(var(--muted)); font-size: 12.5px; line-height: 18px; }
.k1m-dialog__cap[hidden] { display: none; }
.k1m-dialog .k1m-dialog__foot { margin-top: 12px; color: rgb(var(--muted)); font-size: 12px; text-align: center; }

/* ---------- Phones ---------- */
@media (max-width: 639px) {
  .k1m-top { flex-direction: column; align-items: stretch; gap: 0; }
  .k1m-crumbs { padding-top: 12px; font-size: 13px; }
  .k1m-tabs { height: 44px; gap: 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgb(var(--line)); }
  .k1m-tabs::-webkit-scrollbar { display: none; }
  .k1m-head { margin-top: 16px; gap: 12px; }
  .k1m-head__img { width: 48px; height: 48px; }
  .k1m-head h1 { font-size: 22px; line-height: 28px; }
  .k1m-dialog { padding: 20px; }
}

/* ---------- Title row as the lavender banner, tabs as a folder tab ----------
   Same banner as the kamas pages (soft lavender over the Dofus picture; a muted violet in dark
   mode). The picture is tinted: it takes the luminosity of its layer over the lavender base colour.
   From 640px the tabs (Kamas · Comptes · Objets) sit on its top edge and the current one is
   a folder tab opening into it (painted by 1k-tabs.js; a close flat colour until then). */
html .k1m-head {
  padding: 18px 16px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(236, 233, 246, .97) 0%, rgba(236, 233, 246, .9) 55%, rgba(236, 233, 246, .78) 100%), url(/cards/bg-dofus.webp) center 40% / cover no-repeat, #ece9f6;
  background-blend-mode: normal, luminosity;
}
html[data-theme="dark"] .k1m-head {
  background: linear-gradient(90deg, rgba(39, 34, 52, .96) 0%, rgba(39, 34, 52, .86) 55%, rgba(39, 34, 52, .7) 100%), url(/cards/bg-dofus.webp) center 40% / cover no-repeat, #272234;
}
html .k1m-head h1 { color: color-mix(in srgb, #1d072a 50%, rgb(var(--ink))); }
html[data-theme="dark"] .k1m-head h1 { color: #fff; }
@media (min-width: 640px) {
  html .k1m-head { margin-top: 0; padding: 22px 26px; }
  html .k1m-top { align-items: flex-end; padding-top: 6px; }
  html .k1m-top > .k1m-crumbs { align-self: center; }
  html .k1m-tabs { align-self: flex-end; align-items: flex-end; position: relative; z-index: 1; height: 48px; gap: 14px; margin: 0 16px -2px 0; }
  .k1m-tab { height: 40px; padding: 0 18px; border-bottom: 0; gap: 8px; }
  .k1m-tab svg { width: 22px; height: 22px; }
  a.k1m-tab:hover { color: rgb(var(--brand)); }
  .k1m-tab[aria-current] { height: 46px; background: #dfdae5; color: color-mix(in srgb, #1d072a 50%, rgb(var(--ink))); font-weight: 600; }
  .k1m-tab[aria-current] { --k1i-badge: rgb(var(--brand)); }
  html[data-theme="dark"] .k1m-tab[aria-current] { background: #362e3d; color: #fff; }
  /* The folder tab and its two corners are painted with the banner's layers: same tinted picture */
  html .k1m-tab.is-folder, html .k1m-tab.is-folder::before, html .k1m-tab.is-folder::after { background-blend-mode: normal, luminosity; }
}

/* ---------- The page's own text under the listing (.k1s, in the HTML): about the items / accounts,
   why 1Kamas, steps, kinds, delivery, FAQ: the kamas page's sections, in the same look ---------- */
.k1s { display: grid; gap: 40px; margin-top: 48px; text-align: left; }
.k1s h2 { margin: 0 0 16px; color: rgb(var(--ink)); font-size: 22px; line-height: 30px; font-weight: 700; }
.k1s h3 { margin: 0 0 6px; color: rgb(var(--ink)); font-size: 16px; line-height: 22px; font-weight: 700; }
.k1s p { margin: 0; color: rgb(var(--body)); font-size: 15px; line-height: 24px; }
.k1s p + p { margin-top: 10px; }
.k1s strong { color: rgb(var(--ink)); font-weight: 600; }
/* Links: a dark muted violet (halfway between the site's purple and ink), with a faint
   underline that turns solid on hover */
.k1s a { color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--ink) / .3); text-underline-offset: 3px; }
.k1s a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.k1s-card { padding: 24px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); }
.k1s-intro h2 { margin-bottom: 12px; }
/* Reasons: four cards with a check */
.k1s-reasons { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.k1s-reasons p { font-size: 14px; line-height: 21px; }
.k1s-ic { position: relative; display: block; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 8px; background: color-mix(in srgb, rgb(118 94 184 / .1) 50%, rgb(var(--ink) / .06)); }
.k1s-ic::before { content: ""; position: absolute; inset: 8px; background: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme="dark"] .k1s-ic { background: rgb(220 210 246 / .11); }
html[data-theme="dark"] .k1s-ic::before { background: #d5cbf1; }
/* Steps: numbered, two columns */
.k1s-steps { display: grid; gap: 20px 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .k1s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k1s-steps li { display: flex; gap: 14px; }
.k1s-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: color-mix(in srgb, rgb(118 94 184 / .1) 50%, rgb(var(--ink) / .06)); color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); font-size: 14px; font-weight: 700; }
html[data-theme="dark"] .k1s-n { background: rgb(220 210 246 / .11); color: #d5cbf1; }
.k1s-steps p { font-size: 14px; line-height: 21px; }
/* What you can buy: cards with the items' (or classes') icons */
.k1s-kinds { display: grid; gap: 16px; }
@media (min-width: 768px) { .k1s-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .k1s-kinds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k1s-icons { display: flex; gap: 8px; margin-bottom: 16px; }
.k1s-icons span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #1d072a; }
.k1s-icons img { width: 36px; height: 36px; object-fit: contain; }
.k1s-kinds p { font-size: 14px; line-height: 21px; }
/* Delivery: three steps */
.k1s-delivery { display: grid; gap: 16px; }
@media (min-width: 768px) { .k1s-delivery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k1s-delivery p { font-size: 14px; line-height: 21px; }
/* FAQ: questions that open, in two fixed columns from 1024px (opening one never moves another) */
.k1s-faq { display: grid; gap: 0 48px; align-items: start; padding: 4px 24px; }
@media (min-width: 1024px) { .k1s-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k1s-faq details { border-bottom: 1px solid rgb(var(--line)); }
.k1s-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none;
  color: rgb(var(--ink)); font-size: 15px; line-height: 22px; font-weight: 600;
}
.k1s-faq summary::-webkit-details-marker { display: none; }
.k1s-faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: rgb(var(--muted)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
.k1s-faq details[open] summary::after { transform: rotate(180deg); }
.k1s-faq details p { padding-bottom: 16px; font-size: 14px; line-height: 22px; }
@media (max-width: 639px) {
  .k1s { gap: 32px; margin-top: 32px; }
  .k1s h2 { font-size: 19px; line-height: 26px; }
  .k1s-card { padding: 18px; }
  .k1s-faq { padding: 2px 18px; }
}