/* 1kamas — compact homepage test (sections below "Populaires"), inspired by Eldorado:
   tighter spacing, left-aligned section titles, content grouped in panels, and a background
   rhythm that changes from section to section (white panel, plain cards, dark plum panel,
   tinted band). Layout and colors only: every text, heading, FAQ entry and link stays in the page.
   Homepage rules apply on pages with the hero; the footer part applies on every page.
   Selectors are prefixed with `html` to win over the per-page inlined CSS.
   Remove the <link data-1k-compact> tag to undo. */

/* ---------- No hover movement ----------
   The site's own CSS lifts cards on hover (translateY(-3px) / -6px). Cards never move here:
   written without :has() and with !important so it holds in every browser and against every
   copy of the site's rule (each CSS bundle and inlined page style has one). Applies to the
   same card types on every page. */
html body main .card:hover,
html body main .hp-card:hover,
html body main .hp-lift:hover { transform: none !important; }

/* ---------- Homepage: rhythm and titles ---------- */

/* 48px between sections on desktop (was 64), down to 32px on small screens */
html:has(.hp-hero) main .pt-\[clamp\(3rem\2c 6vw\2c 5rem\)\] { padding-top: clamp(2rem, 4vw, 3rem); }
html:has(.hp-hero) main .py-\[clamp\(3rem\2c 6vw\2c 5rem\)\] {
  padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* Section titles: left-aligned, 24px (was centered 30px), like Eldorado's section headers */
html:has(.hp-hero) main .section-title { text-align: left; font-size: 24px; line-height: 32px; margin-bottom: 8px; }
html:has(.hp-hero) main div.mb-8.text-center { text-align: left; margin-bottom: 16px; }
html:has(.hp-hero) main p.max-w-prose { margin-left: 0; font-size: 15px; line-height: 24px; }
html:has(.hp-hero) main p.mb-10.max-w-prose { margin-bottom: 20px; }
@media (max-width: 639px) {
  html:has(.hp-hero) main .section-title { font-size: 20px; line-height: 28px; }
}

/* ---------- Intro + FAQ: one white panel, FAQ in two columns ---------- */
html:has(.hp-hero) main section:has(> .space-y-14) > .space-y-14 {
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; padding: 32px;
}
html:has(.hp-hero) main section:has(> .space-y-14) > .space-y-14 > * + * { margin-top: 32px; }
html:has(.hp-hero) main section:has(> .space-y-14) > .space-y-14 p { line-height: 24px; }
html:has(.hp-hero) main section:has(> .space-y-14) .mb-6 { margin-bottom: 8px; }
html:has(.hp-hero) main section:has(> .space-y-14) .max-w-content.divide-y {
  max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
  align-items: start; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
html:has(.hp-hero) main section:has(> .space-y-14) .max-w-content.divide-y > div {
  border-style: solid; border-color: rgb(var(--line)); border-width: 0 0 1px 0;
}
html:has(.hp-hero) main section:has(> .space-y-14) .max-w-content.divide-y > div > button {
  padding: 12px 0; font-size: 15px; line-height: 22px;
}
html:has(.hp-hero) main section:has(> .space-y-14) .max-w-content.divide-y > div > div {
  padding: 0 0 12px; font-size: 14px; line-height: 22px;
}
@media (max-width: 767px) {
  html:has(.hp-hero) main section:has(> .space-y-14) > .space-y-14 { padding: 20px; }
  html:has(.hp-hero) main section:has(> .space-y-14) .max-w-content.divide-y { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Why buy: number next to the title, tighter cards ---------- */
html:has(.hp-hero) main section:has(.rounded-full.bg-brand-soft) .grid { gap: 16px; }
html:has(.hp-hero) main section:has(.rounded-full.bg-brand-soft) .hp-card {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 20px;
}
html:has(.hp-hero) main section:has(.rounded-full.bg-brand-soft) .hp-card > span { width: 32px; height: 32px; margin: 0; font-size: 14px; }
html:has(.hp-hero) main section:has(.rounded-full.bg-brand-soft) .hp-card > h3 { margin: 0; }
html:has(.hp-hero) main section:has(.rounded-full.bg-brand-soft) .hp-card > p {
  grid-column: 1 / -1; margin-top: 12px; font-size: 14px; line-height: 22px;
}

/* ---------- 4 universes: one dark plum panel, 4 columns on desktop ---------- */
html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid {
  gap: 0; background: #1e1226; border-radius: 8px; overflow: hidden;
}
html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card {
  background: transparent; border-radius: 0; box-shadow: none; padding: 24px;
  border-style: solid; border-color: rgba(255, 255, 255, .08); border-width: 0;
}
/* Hover only cancels the site's hover colors; padding and dividers stay, so nothing shifts */
html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card:hover {
  background: transparent; box-shadow: none; border-color: rgba(255, 255, 255, .08);
}
html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card + .hp-card { border-top-width: 1px; }
@media (min-width: 640px) {
  html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card + .hp-card { border-top-width: 0; }
  html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card:nth-child(even) { border-left-width: 1px; }
  html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card:nth-child(n+3) { border-top-width: 1px; }
}
@media (min-width: 1024px) {
  html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card:nth-child(n+3) { border-top-width: 0; }
  html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card + .hp-card { border-left-width: 1px; }
}
html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) .hp-card h3 { color: #fff; }
html:has(.hp-hero) main section.container-1k:has(> div > .grid.sm\:grid-cols-2) .hp-card p { color: rgba(228, 225, 234, .86); font-size: 14px; line-height: 22px; }

/* ---------- Blog: smaller images, tighter cards, button aligned left ---------- */
html:has(.hp-hero) main section:has(article.hp-lift) .grid { gap: 16px; }
html:has(.hp-hero) main section:has(article.hp-lift) article > a:first-child { aspect-ratio: 16 / 9; }
html:has(.hp-hero) main section:has(article.hp-lift) article > div { padding: 14px 16px; gap: 8px; }
html:has(.hp-hero) main section:has(article.hp-lift) div.mt-8.flex { margin-top: 20px; justify-content: flex-start; }
/* Phones: the 3 articles become a swipeable row instead of a tall stack (all 3 stay in the page) */
@media (max-width: 639px) {
  html:has(.hp-hero) main section:has(article.hp-lift) .grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
  }
  html:has(.hp-hero) main section:has(article.hp-lift) article { scroll-snap-align: start; }
}

/* ---------- Servers: one white panel of link lists, a game logo heading each column ----------
   2 columns of games below 1024px, 5 columns above. Each server is a plain link row with a
   chevron instead of a lavender tag; the 22 links and their text are unchanged. */
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) .section-title { margin-bottom: 16px; }
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid {
  gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; overflow: hidden;
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card {
  background: transparent; border-radius: 0; box-shadow: none; padding: 16px 12px;
  border-style: solid; border-color: rgb(var(--line)); border-width: 0;
}
/* Hover only cancels the site's hover colors; padding and dividers stay, so nothing shifts */
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:hover {
  background: transparent; box-shadow: none; border-color: rgb(var(--line));
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(even) { border-left-width: 1px; }
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(n+3) { border-top-width: 1px; }
@media (min-width: 640px) {
  html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card { padding: 20px 16px; }
}
@media (min-width: 1024px) {
  html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(n) { border-top-width: 0; border-left-width: 0; }
  html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card + .card { border-left-width: 1px; }
}

/* Column heading: small game logo (existing card images, same order in every language)
   + group name in normal text; fixed height so all the lists start on the same line */
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card > h3 {
  display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 10px;
  font-size: 14px; line-height: 18px; font-weight: 700; color: rgb(var(--ink)); text-transform: none; letter-spacing: normal;
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card > h3::before {
  content: ""; flex: none; width: 36px; height: 22px; border-radius: 6px; background: #24182c center / contain no-repeat;
  background-blend-mode: lighten;
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(1) > h3::before,
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(2) > h3::before { background-image: url(/cards/dofus-unity-kamas.png); }
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(3) > h3::before { background-image: url(/cards/dofus-retro-kamas-v3.webp); }
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(4) > h3::before { background-image: url(/cards/dofus-touch-kamas-v3.webp); }
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card:nth-child(5) > h3::before { background-image: url(/cards/wakfu-kamas-v3.webp); }
@media (min-width: 640px) {
  html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card > h3 { gap: 10px; font-size: 15px; line-height: 20px; }
  html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card > h3::before { width: 44px; height: 26px; }
}

/* Server links: plain rows with a chevron. Static on hover: only the text turns purple, with no
   background fill and no animation; the panel and columns never move */
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card,
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card a.chip { transition: none; }
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card > div {
  flex-direction: column; flex-wrap: nowrap; gap: 2px;
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card a.chip {
  display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 4px 8px;
  border: 0; border-radius: 6px; background: transparent; color: rgb(var(--body));
  font-size: 14px; line-height: 20px; font-weight: 500;
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card a.chip::after {
  content: "›"; color: rgb(var(--muted)); font-size: 16px; line-height: 1;
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card a.chip:hover {
  background: transparent; color: rgb(var(--brand));
}
html:has(.hp-hero) main section:not(.container-1k):has(> .container-1k > .grid) > .container-1k > .grid > .card a.chip:hover::after { color: rgb(var(--brand)); }

/* ---------- Hero guarantees, phones only (section.sm:hidden): hidden ----------
   The same three promises as the hero boxes (hidden too, see 1k-hero.css); the guarantees band
   further down already says them once. */
html:has(.hp-hero) main section.sm\:hidden:has(> .grid > .hp-card.items-start) { display: none; }

/* ---------- Guarantees: one plum brand band, 4 columns, no icons, text links ----------
   Same plum as the image cards and the 4 universes panel. Title, text, then a text link added by
   1k-guarantees.js ("En savoir plus →"). Columns: 4 from 1024px, 2 from 640px, stacked below. */
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) > .grid {
  gap: 0; background: #1e1226; border: 0; border-radius: 8px; overflow: hidden;
}
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card {
  align-items: stretch; /* text block fills the column, so all 4 links share one bottom line */
  background: transparent; border-radius: 0; box-shadow: none; padding: 20px; gap: 0;
  border-style: solid; border-color: rgba(255, 255, 255, .08); border-width: 0;
}
/* Hover only cancels the site's hover colors; padding and dividers stay, so nothing shifts */
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card:hover {
  background: transparent; box-shadow: none; border-color: rgba(255, 255, 255, .08);
}
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card + .hp-card { border-top-width: 1px; }
@media (min-width: 640px) {
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card { padding: 24px; }
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card + .hp-card { border-top-width: 0; }
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card:nth-child(even) { border-left-width: 1px; }
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card:nth-child(n+3) { border-top-width: 1px; }
}
@media (min-width: 1024px) {
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card:nth-child(n) { border-top-width: 0; border-left-width: 0; }
  html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card + .hp-card { border-left-width: 1px; }
}
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card > span { display: none; }
/* The link's 20px line (+16px gap) is reserved up front, so the band doesn't grow when the
   script adds it */
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card > div {
  position: relative; flex: 1; width: 100%; padding-bottom: 36px;
}
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card h3 { color: #fff; font-size: 16px; line-height: 24px; }
html:has(.hp-hero) main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card p { margin: 6px 0 0; color: rgba(228, 225, 234, .86); font-size: 14px; line-height: 22px; }
.k1-g-cta {
  position: absolute; left: 0; bottom: 0; color: #dcd2f6; font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none;
}
.k1-g-cta::after { content: " →"; white-space: pre; }
.k1-g-cta:hover { color: rgba(255, 255, 255, .86); }

/* ---------- Responsible sourcing: text left, links right ---------- */
html:has(.hp-hero) main section:has(> .hp-card > div > a.chip) > .hp-card { padding: 20px; }
@media (min-width: 768px) {
  html:has(.hp-hero) main section:has(> .hp-card > div > a.chip) > .hp-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center;
  }
  html:has(.hp-hero) main section:has(> .hp-card > div > a.chip) > .hp-card > p { grid-column: 1; }
  html:has(.hp-hero) main section:has(> .hp-card > div > a.chip) > .hp-card > div {
    grid-column: 2; grid-row: 1 / span 2; margin-top: 0;
  }
}

/* ---------- Trustpilot: one slim row instead of a tall centered box ---------- */
html:has(.hp-hero) main section:has(.trustpilot-widget) > .hp-card { padding: 16px 20px; gap: 16px; }
@media (min-width: 768px) {
  html:has(.hp-hero) main section:has(.trustpilot-widget) > .hp-card {
    flex-direction: row; justify-content: space-between; text-align: left;
  }
  html:has(.hp-hero) main section:has(.trustpilot-widget) .trustpilot-widget { flex: 1; max-width: 480px; }
}

/* ---------- Footer (every page): same content, tighter spacing ---------- */
html footer.mt-16 { margin-top: 48px; }
html footer > .container-1k.py-14 { padding-top: 40px; padding-bottom: 40px; }
html footer > .container-1k > .mb-10.border-b { margin-bottom: 24px; padding-bottom: 20px; }
html footer > .container-1k > .grid.gap-10 { gap: 32px; }
html footer > .container-1k > .mt-12.border-t { margin-top: 32px; padding-top: 24px; }
html footer > .container-1k > .mt-8 { margin-top: 24px; }
html footer > .container-1k a.rounded-btn { padding: 6px 12px; font-size: 13px; line-height: 18px; }
html footer > .container-1k > .mt-8 > .grid { row-gap: 16px; }