/* 1kamas — homepage theme applied to the product pages (produit / product / producto / produto).
   Selectors are prefixed with `html` to win over the per-page inlined CSS.
   Remove the <link data-1k-site="product"> tag to undo.

   Scope: every rule starts with `main:has(#buybox)`. Only the product pages have the buy box, so
   nothing here can reach another page type, and the id also gives these rules priority over the
   shared 1k-site-base.css (loaded just before) wherever this page needs something different.
   The top of the page (H1, game picture, security alert, lavender buy box) keeps its original
   colors; the title sits on a banner of the game's picture (end of this file). Below it, the same language
   as the homepage (1k-hero.css, 1k-compact.css, 1k-home.css):
   - the step lists and the long text are white panels (1px border, 8px corners);
   - the stats row becomes a plum band, like the homepage guarantees band;
   - flat cards, flat 6px chips, flat buttons, sentence-case labels, no hover movement.
   Colors, borders, radii, type and spacing only: every heading, text, link, price, form field,
   FAQ entry, rating and image stays in the page. Both themes use the palette variables; only
   the plum family (#1d072a, #c9c3d6, #b8a4ee) is hard-coded, as on the homepage. */


/* ---------- Page rhythm ---------- */

/* 48px between the sections below the buy box (were 40px), down to 32px on small screens, as on
   the homepage. The reviews block sits outside that list and gets the same gap */
html body main:has(#buybox) > .space-y-10 > * + *,
html body main:has(#buybox) > #avis { margin-top: clamp(2rem, 4vw, 3rem); }
/* Same gap between the top block (title, picture, buy box) and the stats band (was 24px), like the
   homepage hero and the "Populaires" row */
html body main:has(#buybox) > .space-y-10 { margin-top: clamp(2rem, 4vw, 3rem); }


/* ---------- Top line, as on the Dofus items page (1k-market.css) ----------
   Breadcrumb on the left of a 48px line and the game's category tabs on the right (added by
   1k-game-tabs.js: Objets · Kamas · Comptes, Kamas current), then the game picture next to the
   title. The breadcrumb reads "Accueil › Kamas Dofus" (the house icon becomes the word, "/"
   becomes "›"); its links and the page's breadcrumb data are unchanged. */
html body main:has(#buybox) { position: relative; padding-top: 0; }
html body main:has(#buybox) > nav:not(.k1g-tabs) {
  min-height: 48px; gap: 8px; color: rgb(var(--muted)); font-size: 14px; line-height: 20px;
}
html body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child { color: inherit; }
html body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child:hover { color: rgb(var(--brand)); }
html body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child svg { display: none; }
html body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child::before { content: "Accueil"; }
html[lang="en"] body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child::before { content: "Home"; }
html[lang="es"] body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child::before { content: "Inicio"; }
html[lang="pt"] body main:has(#buybox) > nav:not(.k1g-tabs) > a:first-child::before { content: "Início"; }
html body main:has(#buybox) > nav:not(.k1g-tabs) > span:not(.font-semibold) { font-size: 0; }
html body main:has(#buybox) > nav:not(.k1g-tabs) > span:not(.font-semibold)::after { content: "›"; font-size: 14px; }
html body main:has(#buybox) > nav:not(.k1g-tabs) > span.font-semibold { color: rgb(var(--ink)); font-weight: 400; }

/* Category tabs: right of the breadcrumb line from 640px, their own line under it on phones */
.k1g-tabs { display: flex; gap: 24px; }
.k1g-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;
}
.k1g-tab svg { flex: none; width: 18px; height: 18px; }
.k1g-tab[aria-current] { --k1i-badge: rgb(var(--brand)); }
a.k1g-tab:hover { color: rgb(var(--ink)); }
.k1g-tab[aria-current] { color: rgb(var(--brand)); border-bottom-color: rgb(var(--brand)); }
.k1g-tab.is-soon { color: rgb(var(--muted)); cursor: default; }
.k1g-tab small { font-size: 11px; font-weight: 400; }
/* From 640px: Kamas · Comptes · Objets on the banner's top edge (1k-tabs.js adjusts the exact top
   and paints the current tab as a folder tab opening into the banner); the other two are plain
   links beside it */
@media (min-width: 640px) {
  .k1g-tabs { position: absolute; top: 6px; right: 40px; height: 48px; align-items: flex-end; gap: 14px; }
  .k1g-tab { height: 40px; padding: 0 18px; border-bottom: 0; gap: 8px; }
  .k1g-tab svg { width: 22px; height: 22px; }
  a.k1g-tab:hover { color: rgb(var(--brand)); }
  .k1g-tab[aria-current] { height: 46px; background: #dcd2e3; color: #1d072a; font-weight: 600; }
  .k1g-tab[aria-current] { --k1i-badge: #765eb8; }
  html[data-theme="dark"] .k1g-tab[aria-current] { background: #3f3148; color: #fff; }
  html[data-theme="dark"] .k1g-tab[aria-current] { --k1i-badge: #b8a4ee; }
  /* The folder tab is painted with the banner's picture (1k-tabs.js copies its layers, not its
     filter): the same half-strength filter here, so tab and banner match */
  .k1g-tab[aria-current] { filter: grayscale(.5); }
}
@media (min-width: 1200px) {
  .k1g-tabs { top: 12px; }
}
@media (max-width: 639px) {
  .k1g-tabs { height: 44px; gap: 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgb(var(--line)); }
  .k1g-tabs::-webkit-scrollbar { display: none; }
}

/* Game picture next to the title: 56px dark plum square (48px on phones). The picture is
   lightened onto it, so the plum baked into the image (#1d072a, every channel below #24182c)
   takes the square's colour and the logo keeps its colours */
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) { display: flex; align-items: center; gap: 14px; }
.k1g-pic { flex: none; display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; background: #24182c; }
.k1g-pic img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; }
@media (max-width: 639px) {
  html body main:has(#buybox) > .grid:has(#buybox) { margin-top: 16px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) { gap: 12px; }
  .k1g-pic { width: 48px; height: 48px; }
}


/* ---------- Top block: title, then picture column + buy box, compact ----------
   Colors are the site's own; only the layout and spacing are tightened. The title runs across
   the full width on one line, left-aligned like the homepage section titles (Inter 700, 22px on
   phones, 28px from 768px), and the picture column and the buy box start on the same line under
   it. The picture is 2:1 (was 16:9) and grows only to match the buy box height, so there is no
   empty space under the security alert. Phones keep the site's order: title, buy box, picture. */
html body main:has(#buybox) > .grid:has(#buybox) { margin-top: 4px; row-gap: 16px; }
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) > h1 {
  margin: 0; color: rgb(var(--ink)); text-align: left; font-size: 20px; line-height: 26px; font-weight: 600;
  text-transform: none; letter-spacing: normal;
}
@media (min-width: 768px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) > h1 { font-size: 24px; line-height: 32px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) { grid-column: 1 / -1; grid-row: 1; }
  /* The buy box takes its own height; the picture column stretches to the row */
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> #buybox) { grid-column: 2; grid-row: 2; align-self: start; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col { grid-column: 1; grid-row: 2; align-self: stretch; gap: 12px; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child { flex: 1 0 auto; display: flex; flex-direction: column; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.relative:first-child { flex: 1 0 auto; }
}
/* Wide screens: the buy box gets a little more width (about 600px of 1160) so the 13 Dofus servers
   fit on 2 rows instead of 3; the picture column keeps about 540px */
@media (min-width: 1200px) {
  html body main:has(#buybox) > .grid:has(#buybox) { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
}

/* Picture area: 2:1, the image's own plum behind it (was a slightly redder plum while loading) */
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.relative:first-child {
  aspect-ratio: 5 / 2; background-color: #24182c;
}
/* The whole logo always shows, centered on the plum, however tall the area grows (cropping it to
   fill cut the logo on tablets, where the area is narrow and tall) */
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.relative:first-child > img { object-fit: contain; mix-blend-mode: lighten; }

/* "Service" text + Trustpilot: tighter padding (14px 18px, was 20px) */
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.flex.items-center { padding: 14px 18px; }
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.flex.items-center .eyebrow + p { margin-top: 4px; line-height: 20px; }


/* ---------- Picture card: "Service" text + Trustpilot ----------
   Side by side from 1024px as on the original page. Below that the column is too narrow and the
   text was squeezed to a few words per line next to the badge, so the badge goes under the text,
   behind a 1px line */
@media (max-width: 1023px) {
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.flex.items-center {
    flex-direction: column; align-items: stretch; gap: 16px;
  }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.flex.items-center > .border-l {
    border-left-width: 0; border-top: 1px solid rgb(var(--line)); padding-left: 0; padding-top: 16px;
  }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.flex.items-center > .border-l > a { align-items: flex-start; }
}


/* ---------- Security alert: still a warning, flat ----------
   The site's warning colors (6.7:1 light, 9.7:1 dark), 8px corners, homepage text sizes. The
   emoji before the title is hidden by 1k-site-base.css; the title and text stay. */
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .border-warn-border { border-radius: 8px; padding: 12px 18px; box-shadow: none; }
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .border-warn-border > p:first-child { font-size: 15px; line-height: 22px; }
html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .border-warn-border > p + p { margin-top: 2px; font-size: 14px; line-height: 21px; }


/* ---------- Buy box: the original lavender box ----------
   The site's own lavender background, purple border, white server buttons, bonus row, guarantees
   strip and buy button are kept as they were. Adapted here: 8px corners, no shadow, compact
   homepage spacing (20px padding, 12px between groups), sentence-case labels, and darker text
   where it was hard to read on the lavender. The panel ends with its content (see the top block). */
html body main:has(#buybox) #buybox { border-radius: 8px; box-shadow: none; padding: 20px; }
html body main:has(#buybox) #buybox hr { margin-top: 12px; margin-bottom: 12px; }
html body main:has(#buybox) #buybox > .mt-4,
html body main:has(#buybox) #buybox > p.mt-4 { margin-top: 12px; }

/* Title row: the rating sits on the same line as "Acheter Kamas Dofus" (was under it) */
html body main:has(#buybox) #buybox > div:first-child > .min-w-0 { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
html body main:has(#buybox) #buybox > div:first-child > .min-w-0 > button { margin-top: 0; }

/* Server buttons: 32px tall (were 34px), 6px apart */
html body main:has(#buybox) #buybox > .flex-wrap { gap: 6px; }
html body main:has(#buybox) #buybox > .flex-wrap > :is(button, span).rounded-lg.border { padding: 5px 11px; font-size: 14px; line-height: 20px; }

/* Fields 40px tall, bonus link 36px, guarantees strip and payment block tighter */
html body main:has(#buybox) #buybox input#qty,
html body main:has(#buybox) #buybox input#perso { height: 40px; padding-top: 0; padding-bottom: 0; }
html body main:has(#buybox) #buybox a.rounded-lg.border { padding-top: 7px; padding-bottom: 7px; line-height: 20px; }
html body main:has(#buybox) #buybox > div.my-3.flex-wrap { margin-top: 10px; margin-bottom: 10px; padding-top: 6px; padding-bottom: 6px; }
html body main:has(#buybox) #buybox > div.mt-auto { margin-top: 0; padding-top: 12px; gap: 8px; }

/* From 1024px the "Livraison 5 min · Paiement sécurisé · Support 24/7" strip is not shown: the
   stats band right under the top block says the same (< 5 min, 24/7) and so does the "Paiement
   100% sécurisé" line. Tablets and phones keep it. Only boxes with a buy button (the "coming
   soon" variant has none) */
@media (min-width: 1024px) {
  html body main:has(#buybox) #buybox:has(> .btn-primary) > div.rounded-xl.my-3 { display: none; }
}

/* Quantity + character name side by side only when the panel is wide enough. Between 768 and
   959px (panel about 300-380px wide) the two fields were 140px each: "Nome do personagem"
   wrapped onto two lines, so the two inputs no longer lined up, and the placeholder was cut.
   They stack there, as they do on phones */
@media (min-width: 768px) and (max-width: 959px) {
  html body main:has(#buybox) #buybox > .grid.sm\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Title "Acheter Kamas Dofus": 18px bold (16px on phones, unchanged) */
@media (min-width: 640px) {
  html body main:has(#buybox) #buybox h2 { font-size: 18px; line-height: 26px; }
}

/* Title row: the stock status may go under the rating on narrow phones. With the panel's 20px
   padding, "(349 avaliações)" + "Fora de estoque" made the box 5px wider than a 375px screen */
html body main:has(#buybox) #buybox > div:first-child { flex-wrap: wrap; row-gap: 4px; }

/* Stock status: darker green / red so they read on the lavender box (the site's green was 2.6:1);
   lighter shades in dark mode. The dot keeps its color */
html body main:has(#buybox) #buybox .text-green-600 { color: #15803d; }
html body main:has(#buybox) #buybox .text-red-500 { color: rgb(var(--danger)); }
html[data-theme="dark"] body main:has(#buybox) #buybox .text-green-600 { color: #4ade80; }

/* Field labels (Serveur, Quantité, Nom du personnage, Bonus, and the "coming soon" form):
   14px bold ink in sentence case (were 12px grey uppercase), 6px above the field */
html body main:has(#buybox) #buybox :is(p, label).text-xs.font-bold {
  margin-bottom: 6px; color: rgb(var(--ink)); font-size: 14px; line-height: 20px; font-weight: 700;
  text-transform: none; letter-spacing: normal;
}
/* "(Kamas gratuit)" next to "Bonus": the brand purple at full strength (was 4.0:1) */
html body main:has(#buybox) #buybox :is(p, label).text-xs.font-bold > span.text-brand { color: rgb(var(--brand)); font-weight: 700; }


/* ---------- Server picker: the site's white buttons, selected = brand ----------
   Colors as on the original page. No animation between states, and in dark mode the selected
   server gets dark text, since the white text was unreadable on the light purple (2.3:1) */
html body main:has(#buybox) #buybox .flex-wrap > :is(button, span).rounded-lg.border { transition: none; }
html[data-theme="dark"] body main:has(#buybox) #buybox .flex-wrap > button.rounded-lg.border.bg-brand:not(:disabled) { color: #16151c; }

/* Keyboard focus on every control of the box: a 2px purple ring outside the element */
html body main:has(#buybox) #buybox :is(button, a):focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }


/* ---------- Quantity and character name ----------
   The fields themselves (white, 1px border, 8px corners, purple focus ring, red hint when the buy
   button is hovered without a name) come from 1k-site-base.css and the site. Only the add-ons: */

/* Up / down arrows: 6px corners; on hover the purple fill keeps a readable arrow in dark mode */
html body main:has(#buybox) #buybox div.absolute.rounded-md.border { border-radius: 6px; }
html[data-theme="dark"] body main:has(#buybox) #buybox div.absolute.rounded-md.border > button:hover { color: #16151c; }


/* ---------- Total, guarantees strip, buy button ----------
   Colors are the site's own; the buy button is flat (no gradient, glow or lift: 1k-site-base.css)
   and stays the site's faded purple while disabled. */

/* Help line under the button: 13px (was 12px), and 12px above the payment logos' line, which
   it touched whenever the box had no spare height (always, now that the panel hugs its content) */
html body main:has(#buybox) #buybox .btn-primary + p { margin-top: 6px; margin-bottom: 12px; font-size: 13px; line-height: 18px; }

/* "Coming soon" variant (games not open yet): the launch notice (site's warning colors) and the
   "we'll let you know" confirmation (site's success colors) get 8px corners */
html body main:has(#buybox) #buybox div.rounded-lg.border-warn-border,
html body main:has(#buybox) #buybox div.rounded-lg.border-success-border { border-radius: 8px; }


/* ---------- Stats band: one plum band (homepage guarantees band) ----------
   "30 000+ / 4.9/5 / < 5 min / 24/7": white numbers and light text on plum, left-aligned, 1px
   dividers between the cells. 2 × 2 on phones, 4 in a row from 640px. */
html body main:has(#buybox) > .space-y-10 > .card.grid:first-child {
  gap: 0; padding: 0; overflow: hidden;
  background-color: #eae7f2; background-image: none; border: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(var(--line));
}
html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div {
  padding: 16px; text-align: left; border: 0 solid rgb(var(--line));
}
html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div:nth-child(even) { border-left-width: 1px; }
html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div:nth-child(n+3) { border-top-width: 1px; }
@media (min-width: 640px) {
  html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div { padding: 20px 24px; }
  html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div:nth-child(n) { border-width: 0; }
  html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div + div { border-left-width: 1px; }
}
html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div > div:first-child {
  color: rgb(var(--ink)); font-size: 24px; line-height: 32px; font-weight: 700;
}
html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div > div + div {
  margin-top: 2px; color: rgb(var(--muted)); font-size: 14px; line-height: 20px;
}
@media (min-width: 640px) {
  html body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div > div:first-child { font-size: 28px; line-height: 36px; }
}
/* Dark mode: the homepage's lifted plum (12% purple over the card surface) with a thin purple
   outline, so the band stands out from the dark page */
html[data-theme="dark"] body main:has(#buybox) > .space-y-10 > .card.grid:first-child > div > div:first-child { color: #fff; }


/* ---------- "Pourquoi choisir" and "Pourquoi acheter" cards ----------
   Flat white cards (1k-site-base.css) with the homepage "why buy" layout: a quiet 32px purple
   square holding the check icon next to the title, 14px / 22px text, 16px gaps. Not links: no
   hover reaction (base). */
html body main:has(#buybox) > .space-y-10 > section > .grid { gap: 16px; }
html body main:has(#buybox) > .space-y-10 > section > .grid > .card { padding: 20px; }
html body main:has(#buybox) > .space-y-10 > section > .grid > .card > h3 { gap: 12px; font-size: 16px; line-height: 24px; }
html body main:has(#buybox) > .space-y-10 > section > .grid > .card > h3 > svg {
  flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 7px;
  border-radius: 8px; background-color: rgb(var(--brand) / .10); color: rgb(var(--brand));
}
html body main:has(#buybox) > .space-y-10 > section > .grid > .card > p { margin-top: 12px; font-size: 14px; line-height: 22px; }

/* The 3 "Pourquoi acheter" cards (section without its own title): 3 columns from 1024px; between
   640 and 1023px two side by side and the third full width. Was 2 columns with the third card
   stretched over two rows and half empty */
html body main:has(#buybox) > .space-y-10 > section:not(:has(h2)) > .grid > .card { grid-column: auto; grid-row: auto; }
@media (min-width: 640px) and (max-width: 1023px) {
  html body main:has(#buybox) > .space-y-10 > section:not(:has(h2)) > .grid > .card:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  html body main:has(#buybox) > .space-y-10 > section:not(:has(h2)) > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Step lists ("Comment acheter… en 5 étapes", "Comment se déroule la livraison") ----------
   Each list becomes one white panel with 1px lines between the steps, as the homepage groups
   lists in panels. Full width of the content column (was capped at 1140px, 20px short). The
   number keeps the base's quiet square, at 32px like the homepage "why buy" numbers. */
html body main:has(#buybox) > .space-y-10 > section.max-w-content { max-width: none; }
html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol {
  margin-top: 0; padding: 0 20px;
  background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol > li { gap: 16px; padding: 20px 0; }
html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol > li + li { margin-top: 0; border-top: 1px solid rgb(var(--line)); }
@media (min-width: 640px) {
  html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol { padding: 0 32px; }
}
html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol > li > span:first-child { width: 32px; height: 32px; font-size: 14px; }
html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol > li h3 { font-size: 16px; line-height: 24px; }
html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol > li h3 + p { margin-top: 4px; font-size: 14px; line-height: 22px; }

/* "Conseil" tip under step 5: a quiet grey box inside the panel instead of a mint card */
html body main:has(#buybox) > .space-y-10 > section.max-w-content .border-success-border {
  margin-top: 12px; padding: 16px;
  background-color: rgb(var(--canvas)); border-color: rgb(var(--line)); border-radius: 8px;
  font-size: 14px; line-height: 22px;
}
html body main:has(#buybox) > .space-y-10 > section.max-w-content .border-success-border > p:first-child { color: rgb(var(--ink)); font-weight: 700; }


/* ---------- Long text (.prose-1k) ----------
   The long section ("Dofus 3 (Unity) : ce qu'il faut savoir…") becomes a white panel with its
   title inside, like the homepage intro panel. The short one that introduces the 3 cards below it
   ("Pourquoi acheter des Kamas Dofus ?") stays on the page like the other section titles, with
   its cards 24px under it. */
html body main:has(#buybox) > .space-y-10 > section.prose-1k { max-width: none; }
html body main:has(#buybox) > .space-y-10 > section.prose-1k > h2 {
  margin-top: 0; margin-bottom: 8px; font-size: 24px; line-height: 32px;
}
html body main:has(#buybox) > .space-y-10 > section.prose-1k > p {
  margin-top: 0; margin-bottom: 12px; color: rgb(var(--body)); font-size: 15px; line-height: 24px;
}
html body main:has(#buybox) > .space-y-10 > section.prose-1k > p:last-child { margin-bottom: 0; }
html body main:has(#buybox) > .space-y-10 > section.prose-1k:not(:has(+ section > .grid:first-child)) {
  padding: 20px; background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
@media (min-width: 640px) {
  html body main:has(#buybox) > .space-y-10 > section.prose-1k:not(:has(+ section > .grid:first-child)) { padding: 32px; }
}
@media (max-width: 639px) {
  html body main:has(#buybox) > .space-y-10 > section.prose-1k > h2 { font-size: 20px; line-height: 28px; }
}

/* The short one keeps the 900px text width of the other section intros */
html body main:has(#buybox) > .space-y-10 > section.prose-1k:has(+ section > .grid:first-child) > p { max-width: 900px; }

/* Cards right under that short section: 24px below its text (were 60px away) */
html body main:has(#buybox) > .space-y-10 > section.prose-1k + section:not(:has(h2)) { margin-top: 24px; }
html body main:has(#buybox) > .space-y-10 > section.prose-1k + section:not(:has(h2)) > .grid { margin-top: 0; }


/* ---------- FAQ ----------
   Panel, rows, sizes and the two desktop columns come from 1k-site-base.css (same as the
   homepage FAQ). Nothing to add here. */


/* ---------- Customer reviews (#avis) ----------
   White panel with the homepage title size. While loading: neutral grey placeholders instead of
   lavender ones. Loaded reviews: rows separated by 1px lines inside the panel (2 columns from
   640px) instead of bordered cards; initials in a quiet purple circle instead of six bright colors
   (white on amber/sky was under 3:1). */
html body main:has(#buybox) > #avis {
  padding: 20px; background-color: rgb(var(--surface)); background-image: none;
  border-color: rgb(var(--line)); border-radius: 8px; box-shadow: none;
}
@media (min-width: 640px) {
  html body main:has(#buybox) > #avis { padding: 32px; }
}
html body main:has(#buybox) > #avis > h2 { font-size: 24px; line-height: 32px; }
@media (max-width: 639px) {
  html body main:has(#buybox) > #avis > h2 { font-size: 20px; line-height: 28px; }
}
html body main:has(#buybox) > #avis > p { margin-top: 8px; }
html body main:has(#buybox) > #avis > .grid { margin-top: 16px; column-gap: 32px; row-gap: 0; }
html body main:has(#buybox) > #avis > .grid > .animate-pulse { margin-bottom: 12px; border-radius: 8px; background-color: rgb(var(--ink) / .06); }
html body main:has(#buybox) > #avis > .grid > div.border {
  padding: 16px 0; border-width: 0 0 1px; border-color: rgb(var(--line)); border-radius: 0; background: none;
}
html body main:has(#buybox) > #avis > .grid > div.border:last-child { border-bottom-width: 0; }
@media (min-width: 640px) {
  html body main:has(#buybox) > #avis > .grid > div.border:nth-child(odd):nth-last-child(2) { border-bottom-width: 0; }
}
html body main:has(#buybox) > #avis > .grid > div.border > span.rounded-full {
  border-radius: 9999px; background-color: rgb(var(--brand) / .10); color: rgb(var(--brand-dark));
}
html[data-theme="dark"] body main:has(#buybox) > #avis > .grid > div.border > span.rounded-full { color: rgb(var(--brand)); }
html body main:has(#buybox) > #avis .text-green-600 { color: #15803d; }
html[data-theme="dark"] body main:has(#buybox) > #avis .text-green-600 { color: #4ade80; }

/* Page buttons under the reviews: the current page was a plum gradient (#2a0f2f → #1e0624),
   almost invisible on the dark panel. Now a flat brand fill like the active filter chips: white
   number, dark number in dark mode where the purple is light (7.6:1). Size and border unchanged */
html body main:has(#buybox) > #avis > div.mt-6 > button.bg-header-plum {
  background-color: rgb(var(--brand)); background-image: none; border-color: rgb(var(--brand)); color: #fff;
}
html[data-theme="dark"] body main:has(#buybox) > #avis > div.mt-6 > button.bg-header-plum { color: #16151c; }


/* ---------- Floating buy card (desktop, appears after scrolling past the buy box) ----------
   White card with a 1px border and the light floating shadow from 1k-site-base.css, instead of a
   lavender card with a purple border and ring. Its show / hide slide is the site's own and is
   kept (it is not a hover effect). */
html:root body main:has(#buybox) > :is(button.fixed, div.fixed.inset-x-0) {
  --brand: 124 92 191; --brand-dark: 106 74 173; --brand-soft: 243 238 251; --brand-tint: 247 244 251;
}
html[data-theme="dark"]:root body main:has(#buybox) > :is(button.fixed, div.fixed.inset-x-0) {
  --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56;
}
html body main:has(#buybox) > button.fixed {
  background-color: rgb(var(--surface)); border-color: rgb(var(--line)); border-radius: 8px;
  --tw-ring-color: transparent;
}
html body main:has(#buybox) > button.fixed > span:first-child > span:first-child { font-size: 16px; line-height: 24px; }
html body main:has(#buybox) > button.fixed:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }

/* Shown: fully opaque (the site shows it at 90% with the page showing through, 100% on hover),
   and it no longer rises 2px on hover. Only the visible state (.pointer-events-auto) is touched,
   so the hidden state keeps its 0 opacity and the slide in / out is unchanged */
html body main:has(#buybox) > button.fixed.pointer-events-auto { opacity: 1; }
html body main:has(#buybox) > button.fixed.pointer-events-auto:hover { transform: none; border-color: rgb(var(--brand) / .45); }


/* ---------- Top on a game banner (with 1k-game-tabs.js) ----------
   1420px of content like the homepage. The title row sits on the game's picture (the homepage
   card pictures, faded into plum), the title in white, and under it the rating from the buy box
   and the three promises, on a light lavender (the game's picture barely showing through; a muted
   purple in dark mode). From 1200px the banner is as wide as the content (1420px, rounded
   like the homepage hero) and the buy box, on the right half of the page, overlaps it; the big game picture goes (the banner shows the game) and the service
   line and the security alert sit under the title. Below 1200px the banner is a rounded card above
   the usual picture and buy box. The buy box itself is unchanged. */
html:has(#buybox) .container-1k { max-width: 1468px; }
@media (min-width: 1024px) {
  html:has(#buybox) header .bg-header-plum .inline-flex.antialiased { right: calc(max(24px, (100% - 1420px) / 2) + 40px); }
  html:has(#buybox) header .bg-header-plum .sm\:flex > div.relative:has(> .theme-toggle-btn) { right: max(24px, calc((100% - 1420px) / 2)); }
}

/* Title row as a banner card */
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) {
  position: relative; isolation: isolate; overflow: hidden; flex-wrap: wrap; row-gap: 12px;
  padding: 20px; border-radius: 12px; background: #ece9f6; color: color-mix(in srgb, #1d072a 50%, rgb(var(--ink)));
}
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(236, 230, 251, .97) 0%, rgba(236, 230, 251, .9) 55%, rgba(236, 230, 251, .78) 100%), var(--k1g-banner, none) center 40% / cover no-repeat;
  filter: grayscale(.5);
}
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) > h1 { flex: 1; min-width: 0; color: color-mix(in srgb, #1d072a 50%, rgb(var(--ink))); }
.k1g-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: color-mix(in srgb, #4a4458 50%, rgb(var(--body))); font-size: 13px; line-height: 18px; }
.k1g-meta strong { color: color-mix(in srgb, #1d072a 50%, rgb(var(--ink))); font-weight: 700; }
.k1g-meta__stars { color: #f5b301; letter-spacing: 1px; }
.k1g-meta__item::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 12px; border-radius: 50%;
  background: color-mix(in srgb, rgba(29, 7, 42, .3) 50%, rgb(var(--ink) / .3)); vertical-align: middle;
}
.k1g-meta__item:first-child::before { display: none; }
/* Dark mode: a muted purple banner, title and rating in white */
@media (max-width: 1199px) {
  html[data-theme="dark"] body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) { background: #272234; }
}
html[data-theme="dark"] body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1)::before { background: linear-gradient(90deg, rgba(43, 33, 64, .96) 0%, rgba(43, 33, 64, .86) 55%, rgba(43, 33, 64, .7) 100%), var(--k1g-banner, none) center 40% / cover no-repeat; }
html[data-theme="dark"] body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) > h1,
html[data-theme="dark"] .k1g-meta strong { color: #fff; }
html[data-theme="dark"] .k1g-meta { color: rgba(255, 255, 255, .8); }
html[data-theme="dark"] .k1g-meta__item::before { background: rgba(255, 255, 255, .4); }
html[data-theme="dark"] body main:has(#buybox) .k1g-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
/* Phones: the rating only (the buy box lists the promises right under it there) */
@media (max-width: 639px) {
  .k1g-meta > .k1g-meta__stars ~ .k1g-meta__item { display: none; }
}
@media (min-width: 768px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) { padding: 24px 28px; }
  .k1g-meta { font-size: 14px; line-height: 20px; }
}

/* From 1200px: the banner as wide as the content, the buy box over it */
@media (min-width: 1200px) {
  html body main:has(#buybox) { isolation: isolate; }
  /* Two halves; row 1 as tall as the title, the buy box's extra height goes to row 2 */
  html body main:has(#buybox) > .grid:has(#buybox) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 48px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) {
    grid-column: 1; grid-row: 1; align-self: start; align-content: flex-start; padding: 40px 0 36px 36px; row-gap: 16px;
    overflow: visible; border-radius: 0; background: none;
  }
  /* The banner: drawn by the title cell, running under the buy box column (the same width, plus
     the 48px gap) to the content's right edge, as tall as the title cell */
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1)::before {
    inset: 6px calc(-100% - 48px) 0 0; border-radius: 12px;
    background: linear-gradient(90deg, rgba(236, 230, 251, .97) 0%, rgba(236, 230, 251, .9) 55%, rgba(236, 230, 251, .78) 100%), var(--k1g-banner, none) center 40% / cover no-repeat, #ece6fb;
  }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) > h1 { font-size: 34px; line-height: 42px; font-weight: 700; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) .k1g-pic { width: 72px; height: 72px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> #buybox) {
    position: relative; z-index: 1; grid-column: 2; grid-row: 1 / span 2; margin-top: 30px; border-radius: 8px; background: rgb(var(--canvas));
  }
  html body main:has(#buybox) #buybox { box-shadow: 0 20px 48px rgb(10 6 22 / .22); }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col { grid-column: 1; grid-row: 2; align-self: start; gap: 8px; margin-top: 8px; }
  /* Left side kept quiet next to the box: the service line without its card, the security alert
     on one smaller line (still yellow) */
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child { border: 0; background: none; box-shadow: none; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.flex.items-center { padding: 8px 0; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .border-warn-border { display: flex; gap: 8px; align-items: baseline; padding: 10px 14px; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .border-warn-border > p:first-child { flex: none; font-size: 14px; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .border-warn-border > p + p { margin: 0; font-size: 13px; line-height: 19px; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > div.relative:first-child,
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child > hr { display: none; }
}
/* Smaller desktops: a slightly smaller title, so it keeps to two lines */
@media (min-width: 1200px) and (max-width: 1439px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1) > h1 { font-size: 28px; line-height: 36px; }
}

/* Room kept from the first paint for what 1k-game-tabs.js and 1k-tabs.js add a moment later: the
   game picture before the title, the rating line under it (two lines from 640 to 819px) and, on
   phones, the Kamas · Comptes · Objets tabs above (they pushed the title and the buy box when they
   arrived). Sizes of the finished blocks. The title's margins put it where it will sit next to the
   picture (centred on its height). The rating line is built in two steps (the stars come last), so
   it stays out of sight until complete, its room held meanwhile; shown anyway after 1.5 s. The
   banner's picture (--k1g-banner, set by the script) has a fallback above, so the banner shows at
   once */
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(> .k1g-pic)) > h1 { margin-left: 60px; }
html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(.k1g-meta__stars))::after {
  content: ""; flex-basis: 100%; height: 18px; animation: k1g-unhold 0s 1.5s forwards;
}
.k1g-meta:not(:has(.k1g-meta__stars)) { position: absolute; visibility: hidden; animation: k1g-show 0s 1.5s forwards; }
@keyframes k1g-unhold { to { position: absolute; } }
@keyframes k1g-show { to { position: static; visibility: visible; } }
@media (max-width: 639px) {
  html body main:has(#buybox):not(:has(.k1g-tabs)) > .grid:has(#buybox) { margin-top: 48px; }
}
@media (min-width: 640px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(> .k1g-pic)) > h1 { margin: 15px 0 15px 70px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(.k1g-meta__stars))::after { height: 42px; }
}
@media (min-width: 768px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(> .k1g-pic)) > h1 { margin: 12px 0 12px 70px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(.k1g-meta__stars))::after { height: 46px; }
}
@media (min-width: 820px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(.k1g-meta__stars))::after { height: 20px; }
}
@media (min-width: 1200px) {
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(> .k1g-pic)) > h1 { margin: 0 0 0 86px; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> h1):not(:has(.k1g-meta__stars))::after { height: 46px; }
}

/* ---------- Buy box: a sleek dark card (Eldorado-like), the same in both themes ----------
   The site's dark palette is set on the box only, so everything inside (text, chips, fields,
   lines) takes its dark colours while the rest of the page follows the theme. No coloured header
   band: title, rating and a small "En stock" pill on the card; quiet labels; server chips and
   fields filled, without border, the chosen server ringed in lavender; the bonus as a plain link
   with a gift icon (the site's pink is gone); one strong "Acheter" button, readable before the
   form is filled; payment logos in their own colours. Same fields, same order. */
html:root body main:has(#buybox) #buybox,
html[data-theme="dark"]:root body main:has(#buybox) #buybox {
  --surface: 32 26 45; --surface-2: 58 53 82; --ink: 244 241 250; --body: 203 194 221; --muted: 160 149 186; --line: 56 47 74;
  --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56;
  overflow: hidden; color-scheme: dark; color: rgb(var(--body));
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-color: rgb(var(--line)) !important; /* the site's own class forces a purple border */
  border-radius: 12px; box-shadow: 0 1px 2px rgb(10 6 22 / .06), 0 20px 48px rgb(10 6 22 / .28);
}
/* Dark mode: the box two steps lighter than the page's cards (the site's raised purple, #362D52)
   with a lavender edge, so it stands out from the dark page */
html[data-theme="dark"]:root body main:has(#buybox) #buybox {
  --surface: 54 45 82; --line: 74 64 104; background: rgb(54 45 82); border-color: rgb(184 164 238 / .3) !important;
  box-shadow: 0 20px 48px rgb(0 0 0 / .5);
}

/* Header: title and rating on the card, a hairline under it (the box's padding is pulled back so
   the line reaches its edges) */
html:root body main:has(#buybox) #buybox > div:first-child { margin: -20px -20px 0; padding: 16px 20px 18px; background: transparent; color: inherit; }
html:root body main:has(#buybox) #buybox > div:first-child h2 { font-weight: 700; }
html:root body main:has(#buybox) #buybox > hr:first-of-type { margin-top: 0; }
html:root body main:has(#buybox) #buybox > div:first-child :is(.text-green-600, .text-red-500) {
  padding: 4px 10px; border-radius: 999px; font-size: 13px; line-height: 18px;
}
html:root body main:has(#buybox) #buybox > div:first-child .text-green-600 { color: #4ade80; background: rgb(74 222 128 / .12); }
html:root body main:has(#buybox) #buybox > div:first-child .text-red-500 { color: #fca5a5; background: rgb(252 165 165 / .12); }

/* Labels: sentence case, medium (not the hint under the button) */
html:root body main:has(#buybox) #buybox :is(p.text-xs:not(.mt-2), label.text-xs) {
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 10px;
}

/* Server chips: filled, no border; the chosen one ringed in lavender */
html:root body main:has(#buybox) #buybox > .flex-wrap:not(.my-3) { gap: 8px; }
html:root body main:has(#buybox) #buybox > .flex-wrap:not(.my-3) > button {
  height: 42px; padding: 0 16px; border-radius: 8px; font-weight: 500;
  background: rgb(var(--ink) / .05); border-color: transparent; color: rgb(var(--ink));
}
html:root body main:has(#buybox) #buybox > .flex-wrap:not(.my-3) > button:hover { background: rgb(var(--ink) / .08); }
html:root body main:has(#buybox) #buybox > .flex-wrap:not(.my-3) > button.bg-brand {
  background: rgb(184 164 238 / .1) !important; border-color: #b8a4ee; box-shadow: inset 0 0 0 1px #b8a4ee; color: #b8a4ee !important; font-weight: 600;
}

/* Fields: filled, no border, lavender when focused */
html:root body main:has(#buybox) #buybox :is(#qty, #perso) { height: 50px; border-radius: 8px; background: rgb(var(--ink) / .05); border-color: transparent; color: rgb(var(--ink)); }
html:root body main:has(#buybox) #buybox :is(#qty, #perso):focus { background: rgb(var(--surface)); border-color: #b8a4ee; box-shadow: 0 0 0 3px rgb(184 164 238 / .15); }

/* Bonus: a plain lavender link with a gift icon */
html:root body main:has(#buybox) #buybox > div.items-center.gap-3 > a { gap: 8px; padding: 0; border: 0; background: none; font-weight: 600; }
html:root body main:has(#buybox) #buybox > div.items-center.gap-3 > a:hover { text-decoration: underline; text-underline-offset: 3px; }
html:root body main:has(#buybox) #buybox > div.items-center.gap-3 > :is(a, span) { color: #b8a4ee; }
html:root body main:has(#buybox) #buybox > div.items-center.gap-3 > a::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -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%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18M12 8S10 3 7.5 4.5 9 8 12 8zm0 0s2-5 4.5-3.5S15 8 12 8z'/%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%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18M12 8S10 3 7.5 4.5 9 8 12 8zm0 0s2-5 4.5-3.5S15 8 12 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Signed in ("3,66 M" and "3%"): the free kamas read as a gain, in the stock pill's green with a
   "+" in front, and "(Kamas gratuit)" in the same green. Signed out, the link and its "0%" stay
   lavender */
html:root body main:has(#buybox) #buybox > div.items-center.gap-3:has(> div.relative) > div.relative {
  background: rgb(74 222 128 / .1); border-color: rgb(74 222 128 / .35);
}
html:root body main:has(#buybox) #buybox > div.items-center.gap-3:has(> div.relative) > div.relative > span:first-child { color: #4ade80; font-weight: 700; }
html:root body main:has(#buybox) #buybox > div.items-center.gap-3:has(> div.relative) > div.relative > span:first-child::before,
html:root body main:has(#buybox) #buybox > div.items-center.gap-3:has(> div.relative) > span::before { content: "+"; }
html:root body main:has(#buybox) #buybox > div.items-center.gap-3:has(> div.relative) > div.relative > span:last-child { background: rgb(74 222 128 / .16); color: #4ade80; }
html:root body main:has(#buybox) #buybox > div.items-center.gap-3:has(> div.relative) > span {
  padding: 4px 10px; border-radius: 999px; background: rgb(74 222 128 / .12); color: #4ade80; font-size: 13px; line-height: 18px;
}
html:root body main:has(#buybox) #buybox p:has(+ div.items-center.gap-3 > div.relative) > span.text-brand { color: #4ade80; }

/* The total: one small line right above the buy button — price per million on the left, "Total"
   and the amount on the right (1k-game-tabs.js copies the first two onto the row) — and the
   button below it on the whole width, its label centred, however big the amount. Until the
   script has run, the site's own "Total (0,60 € / M)" shows there, at the same small size */
html:root body main:has(#buybox) #buybox > div.items-center.justify-between { align-items: baseline; gap: 6px; margin-bottom: 10px; }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between > span:first-child { font-size: 13px; line-height: 20px; font-weight: 400; color: rgb(var(--muted)); }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between > span:first-child > span { font-size: inherit; }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between > span:last-child { font-size: 15px; line-height: 20px; font-weight: 600; color: rgb(var(--ink)); white-space: nowrap; }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between[data-k1-ppm] { justify-content: flex-start; }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between[data-k1-ppm] > span:first-child { display: none; }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between[data-k1-ppm]::before { content: attr(data-k1-ppm); font-size: 13px; line-height: 20px; color: rgb(var(--muted)); }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between[data-k1-ppm]::after { content: attr(data-k1-label); order: 1; margin-left: auto; font-size: 13px; line-height: 20px; color: rgb(var(--muted)); }
html:root body main:has(#buybox) #buybox > div.items-center.justify-between[data-k1-ppm] > span:last-child { order: 2; }
/* Phones and tablets: the "Livraison 5 min · Paiement sécurisé · Support 24/7" strip goes above the
   total line, so the line sits right on the button there too */
@media (max-width: 1023px) {
  html:root body main:has(#buybox) #buybox > div.items-center.justify-between,
  html:root body main:has(#buybox) #buybox > div.items-center.justify-between ~ :not(.rounded-xl.my-3) { order: 1; }
  html:root body main:has(#buybox) #buybox > div.rounded-xl.my-3 { margin: 0 0 12px; }
}

/* One strong button, readable before the form is filled (it stays disabled until then) */
html:root body main:has(#buybox) #buybox > .btn-primary { height: 52px; border-radius: 8px; background: #8b74d0; color: #fff; font-size: 17px; font-weight: 600; }
html:root body main:has(#buybox) #buybox > .btn-primary:hover { background: #7c64c4; }
/* A shield with a check before "Acheter": secure payment, at a glance */
html:root body main:has(#buybox) #buybox > .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html:root body main:has(#buybox) #buybox > .btn-primary::before {
  content: ""; flex: none; width: 20px; height: 20px; 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;
}
html:root body main:has(#buybox) #buybox > .btn-primary:disabled { opacity: 1; }
/* Out of stock (red status in the header): the button stays dimmed */
html:root body main:has(#buybox) #buybox:has(> div:first-child .text-red-500) > .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
html:root body main:has(#buybox) #buybox > p.mt-2 { font-size: 13px; }

/* Payment: the logos in their own colours, no line above */
html:root body main:has(#buybox) #buybox > div.mt-auto { border-top: 0; }

/* Wide screens (from 1200px): the buy box on half of the page, at the site's compact sizes —
   title 18px, labels 13px, server chips 36px, fields 42px (like the search and menus), button
   48px. The box stretches to the left column, so it ends level with the steps
   block. Same fields, same order */
@media (min-width: 1200px) {
  html:root body main:has(#buybox) > .grid:has(#buybox) > div:has(> #buybox) { align-self: stretch; }
  html:root body main:has(#buybox) #buybox { padding: 20px; }
  html:root body main:has(#buybox) #buybox > div:first-child { margin: -20px -20px 0; padding: 16px 20px 14px; }
  html:root body main:has(#buybox) #buybox > div:first-child h2 { font-size: 18px; line-height: 24px; }
  html:root body main:has(#buybox) #buybox > div:first-child :is(.text-green-600, .text-red-500) { padding: 3px 9px; font-size: 12px; line-height: 16px; }
  html:root body main:has(#buybox) #buybox :is(p.text-xs:not(.mt-2), label.text-xs) { font-size: 13px; line-height: 18px; margin-bottom: 8px; }
  html:root body main:has(#buybox) #buybox > p.text-xs:not(.mt-2):first-of-type { margin-top: 14px; }
  html:root body main:has(#buybox) #buybox > .flex-wrap:not(.my-3) { gap: 6px; }
  html:root body main:has(#buybox) #buybox > .flex-wrap > :is(button, span).rounded-lg.border { height: 36px; padding: 0 12px; font-size: 14px; line-height: 20px; }
  html:root body main:has(#buybox) #buybox > div.grid { margin-top: 14px; gap: 12px; }
  html:root body main:has(#buybox) #buybox :is(input#qty, input#perso) { height: 42px; font-size: 15px; }
  html:root body main:has(#buybox) #buybox > p.mt-4 { margin-top: 14px; }
  html:root body main:has(#buybox) #buybox > div.items-center.gap-3 > a { font-size: 13px; }
  html:root body main:has(#buybox) #buybox > hr ~ hr { margin-top: 14px; margin-bottom: 14px; }
  html:root body main:has(#buybox) #buybox > .btn-primary { height: 48px; font-size: 15px; }
  html:root body main:has(#buybox) #buybox > p.mt-2 { font-size: 12px; margin-top: 6px; }
  html:root body main:has(#buybox) #buybox > div.mt-auto { padding-top: 12px; gap: 8px; }
  html:root body main:has(#buybox) #buybox > div.mt-auto > span { font-size: 13px; }
}

/* ---------- Purchase steps next to the buy box (with 1k-game-tabs.js), from 1200px ----------
   Under the security alert: "Étape 1 … Étape 5" side by side, like a checkout progress bar (a thin
   line on top of each step, the first in the site's purple), in the site's white card. The left
   column stretches to the buy box's height and the steps take what is left, so both end on the
   same line; when the left side is the taller one (games with only 3 servers), the buy box grows
   to match instead. */
.k1g-steps { display: none; }
@media (min-width: 1200px) {
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col { align-self: stretch; display: flex; flex-direction: column; }
  html body main:has(#buybox) > .grid:has(#buybox) > .flex-col > .card:first-child { flex: none; }
  html body main:has(#buybox) > .grid:has(#buybox) > div:has(> #buybox) > #buybox { box-sizing: border-box; height: 100%; }
  .k1g-steps {
    flex: 1 0 auto; display: flex; flex-direction: column; padding: 18px 22px;
    border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface));
  }
  .k1g-steps__title { margin: 0 0 6px; color: rgb(var(--ink)); font-size: 15px; line-height: 22px; font-weight: 600; }
  .k1g-steps ol {
    flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-content: center;
    margin: 10px 0 0; padding: 0; list-style: none;
  }
  .k1g-steps li { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 2px solid rgb(var(--line)); }
  .k1g-steps li:first-child { border-top-color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); }
  .k1g-steps__n { color: rgb(var(--muted)); font-size: 12px; line-height: 16px; }
  .k1g-steps__name { color: rgb(var(--ink)); font-size: 14px; line-height: 19px; font-weight: 500; }
}

/* ---------- Sections under the top block, at 1420px (from 1280px) ----------
   "Pourquoi choisir 1Kamas": the 4 reasons on one row. "Comment acheter … en 5 étapes": two
   columns, the last step (with its tip) across. Delivery: the 3 steps side by side. Long text
   blocks: readable line length (960px). */
@media (min-width: 1280px) {
  html body main:has(#buybox) > .space-y-10 > section > .grid.sm\:grid-cols-2:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol:has(> :nth-child(5)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0;
  }
  html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol:has(> :nth-child(5)) > li { margin: 0; }
  html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol:has(> :nth-child(5)) > li:nth-child(5) { grid-column: 1 / -1; }
  html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol:has(> :nth-child(3):last-child) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px;
  }
  html body main:has(#buybox) > .space-y-10 > section.max-w-content > ol:has(> :nth-child(3):last-child) > li { margin: 0; border-top: 0; }
  html body main:has(#buybox) > .space-y-10 > section.prose-1k > :is(p, ul) { max-width: 960px; }
}

/* In-between front: the stats band in dark mode, the banner's muted violet */
html[data-theme="dark"] body main:has(#buybox) > .space-y-10 > .card.grid:first-child { background-color: #28232f; }