/* 1kamas — homepage theme applied to the blog index, blog categories and blog articles.
   Selectors are prefixed with `html` to win over the per-page inlined CSS.
   Remove the <link data-1k-site="blog"> tag to undo.

   Builds on 1k-site-base.css (left-aligned page header, flat cards, neutral chips, flat buttons,
   tables). Same language as the homepage: Inter 400/700, sentence case, flat 1px-bordered panels
   with 8px corners, plum #1d072a for the brand moment, no gradients, glows, shadows or hover
   movement. Every heading, text, link, date, image and table stays in the page.

   The blog pages have no <main>: the content sits in `body > .min-h-[60vh]`.
   - Index and categories: `> div.bg-canvas > .container-1k` holds the header (eyebrow, H1,
     intro), the filter nav, the article grid and (index only) the pagination.
   - Articles: `> article.bg-canvas > .container-1k > .max-w-content` holds the breadcrumb,
     the header (category, dates, H1, lead), the cover image card, `.max-w-prose > .prose-1k`
     (the article) and the "Retour au blog" link. */


/* ======================================================================
   Index (/blog/) and categories (/categorie/*)
   ====================================================================== */

/* ---------- Page header: a plum block like the homepage hero ----------
   Eyebrow, H1 and intro were plain text on the page (32px ink title), while the articles and
   every other inner page open with the plum hero. Same treatment as those heroes: #1d072a,
   8px corners, 32px padding (24px / 20px on phones), lilac eyebrow, white H1 at the homepage
   size (48px / 1.1), white 85% intro. The base already left-aligns it. 24px to the filters,
   which stay on the page under it */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 {
  margin-bottom: 24px; padding: 32px; border-radius: 8px; background: #1e1226; color: #fff;
}
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 { padding: 24px 20px; }
}
/* Dark mode: same plum with the thin light outline of the other heroes */
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 {
  background: #22162b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* Eyebrow ("Le blog 1kamas", "Catégorie"): the lilac used on plum (8.6:1); was brand purple.
   Block, so its line is its own 16px and not the header's taller text line (it sat 6px lower
   than the eyebrow of the FAQ / service heroes) */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 > .eyebrow { display: block; color: rgba(220, 210, 246, .86); }
/* H1: white, homepage hero size (was 32px ink); no lone word on the last line */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 > h1 {
  margin-top: 8px; color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; text-wrap: pretty;
}
/* Intro: white 85%, left edge of the title, about 70 characters per line as the other heroes;
   15px / 24px on phones, 16px / 26px from 640px. (.text-body so it outranks the base's
   ".section-title ~ p" intro size) */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 > h1 + p.text-body {
  margin: 12px 0 0; max-width: 42rem; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 24px;
}
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header.mb-8 > h1 + p.text-body { font-size: 16px; line-height: 26px; }
}

/* ---------- Category filters: flat 6px chips, the current one in brand purple ----------
   The index uses bordered white pills (44px tall) and the categories use small .chip tabs with
   a taller pill for the current one; both become the same 36px neutral chip so the two pages
   match and the active one is no longer taller than the others */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav {
  justify-content: flex-start; gap: 8px; margin-bottom: 24px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 0 14px;
  border: 1px solid transparent; border-radius: 6px; background-color: rgb(var(--ink) / .06); color: rgb(var(--body));
  font-size: 14px; line-height: 20px; font-weight: 500; transition: none;
}
/* Hover: color only (light purple fill, purple text), as the base link chips */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav > a:hover {
  background-color: rgb(var(--brand) / .10); color: rgb(var(--brand)); border-color: transparent;
}
/* Current filter: solid brand purple, white text (5.1:1), bold */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav > a[aria-current="page"],
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav > a[aria-current="page"]:hover {
  background-color: rgb(var(--brand)); color: #fff; font-weight: 700;
}
/* Dark mode: the purple is light (#B899E8), so dark text (7.6:1), as the base does */
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav > a[aria-current="page"],
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > header + nav > a[aria-current="page"]:hover { color: #16151c; }

/* ---------- Article grid: the homepage "Actualités et astuces" cards ----------
   16px gaps (were 24px), as the homepage blog row */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid { gap: 16px; }

/* Image: neutral placeholder while it loads (was lavender) */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > a:first-child { background-color: rgb(var(--ink) / .06); }

/* Text block, homepage layout: tag on top, title, then the date at the bottom. The excerpt and
   the "Lire l'article" link stay: the excerpt under the title, the link on the date's line at
   the right. Grid with the tag/date row unwrapped (display: contents) so each part can be
   placed; padding and gaps as the homepage card (14px 16px, 8px) */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto;
  gap: 8px 12px; padding: 14px 16px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > div:first-child { display: contents; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > div:first-child > .chip {
  grid-column: 1 / -1; grid-row: 1; justify-self: start;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > h3 {
  grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 18px; line-height: 27px; font-weight: 700;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > p {
  grid-column: 1 / -1; grid-row: 3; align-self: start; margin: 0; font-size: 14px; line-height: 22px; color: rgb(var(--body));
}
/* Date: 14px grey at the bottom left, as on the homepage card */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > div:first-child > time {
  grid-column: 1; grid-row: 4; align-self: end; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--muted));
}
/* "Lire l'article": same line, right */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > div.mt-auto {
  grid-column: 2; grid-row: 4; align-self: end; margin: 4px 0 0; padding: 0;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid > article > div:last-child > div.mt-auto > a {
  font-size: 14px; line-height: 20px; font-weight: 700;
}

/* ---------- Pagination (index): left-aligned under the grid, 24px below it ---------- */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > nav[aria-label="Pagination"] {
  justify-content: flex-start; margin-top: 24px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > nav[aria-label="Pagination"] > span.text-body { font-size: 14px; }


/* ======================================================================
   Articles (/blog/<slug>/)
   ====================================================================== */

/* ---------- Column: full content width ----------
   The wrapper was capped at 1140px and centered, so the breadcrumb and the header started
   10px right of the header logo. Grid, so the header and the cover image can sit side by side
   on desktop (below) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1fr);
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > * { grid-column: 1 / -1; }

/* ---------- Breadcrumb: small, grey, on the content's left edge ----------
   The links keep their 44px tap height; the negative margins only absorb it, so the trail
   sits 24px under the header and 16px above the article header */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > nav[aria-label] { margin: -12px 0 4px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > nav[aria-label] > a {
  min-width: 0; padding: 0; justify-content: flex-start;
}

/* ---------- Header + cover image: one plum block, like the homepage hero ----------
   Category tag and dates, then the white H1 and the lead sentence; the cover image sits in
   the same plum block (under the text on phones, at the right from 1024px) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header {
  margin: 0; padding: 24px 20px 20px; border-radius: 8px 8px 0 0; background: #1e1226;
}
/* (no color transition on the image half: the site fades .card colors, so on a theme switch
   it would lag behind the text half for a moment) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card {
  margin: 0; padding: 0 20px 20px; border: 0; border-radius: 0 0 8px 8px; background: #1e1226; box-shadow: none; transition: none;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card:hover { box-shadow: none; }
/* Cover image: always a 16:9 box, the whole picture shown (square and wide covers sit on the
   plum), so every header has the same height and nothing moves when the image loads */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card > img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 6px;
}
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header { padding: 32px 32px 24px; }
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card { padding: 0 32px 32px; }
}
@media (min-width: 1024px) {
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header {
    grid-column: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 32px; border-radius: 8px 0 0 8px;
  }
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card {
    grid-column: 2; display: flex; align-items: center; padding: 32px 32px 32px 0; border-radius: 0 8px 8px 0;
  }
}

/* Tag and dates: the hero's flat chip (white 8% fill, 6px corners, 12px bold) and light grey
   dates */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header > div:first-child { margin-bottom: 12px; gap: 6px 12px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header > div:first-child > a.chip {
  background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px;
  color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; padding: 3px 10px; transition: none;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header > div:first-child > a.chip:hover {
  background-color: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .16);
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header > div:first-child > span.text-muted {
  color: rgba(228, 225, 234, .86); font-size: 13px; line-height: 20px;
}

/* H1: white, left-aligned, 28px on phones up to 40px (article titles are long) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header > h1 {
  margin: 0; color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; font-weight: 700;
  letter-spacing: normal; text-transform: none;
}
/* Lead sentence: white 85%, as the hero sentence */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header > h1 + p {
  margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 26px;
}

/* Dark mode: this is the page hero, so it keeps the plum #1d072a with the thin light outline
   (white 7%) of the homepage hero and the other inner-page heroes (product, server, service,
   legal, blog index), not the 12% purple lift used for plum panels inside the content. The
   cover card is .bg-brand-soft, so its background is set here too. The outline is drawn on the
   block's outer edges only, so no line runs between the text and the image */
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > :is(header, header + .card) {
  background: #22162b;
}
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card,
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card:hover {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .07);
}
@media (min-width: 1024px) {
  html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .07);
  }
  html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card,
  html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > header + .card:hover {
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .07);
  }
}

/* ---------- Article body: one white panel, readable 720px column ----------
   As the homepage panels: surface, 1px line border, 8px corners, 32px padding (20px on
   phones), 24px under the header block. The text column is centered in it */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose {
  max-width: none; margin-top: 24px; padding: 20px;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose { padding: 32px; }
}

/* Long text: 16px / 1.7 body text, 720px wide */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k {
  max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: rgb(var(--body)); overflow-wrap: break-word;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k > :first-child { margin-top: 0; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k > :last-child { margin-bottom: 0; }

/* Paragraphs and lists: 16px apart */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(p, ul, ol) { margin: 0 0 16px; }

/* Headings: H2 24px / 32px (the homepage section title), H3 18px, H4 16px, H5-H6 15px; bold,
   dark text, sentence case, more space above than below so they group with their text */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(h2, h3, h4, h5, h6) {
  color: rgb(var(--ink)); font-weight: 700; letter-spacing: normal; text-transform: none;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k h2 { margin: 40px 0 12px; font-size: 24px; line-height: 32px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k h3 { margin: 32px 0 8px; font-size: 18px; line-height: 26px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k h4 { margin: 24px 0 8px; font-size: 16px; line-height: 24px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(h5, h6) { margin: 20px 0 6px; font-size: 15px; line-height: 22px; }
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k h2 { margin-top: 32px; font-size: 20px; line-height: 28px; }
}

/* Bold text in dark ink */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(strong, b) { color: rgb(var(--ink)); font-weight: 700; }

/* Links: muted violet accent, regular weight, with a light underline so they read as links in
   long text; on hover only the colors change */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a {
  color: rgb(var(--brand)); font-weight: inherit;
  text-decoration: underline; text-decoration-color: rgb(var(--brand) / .35); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:hover {
  color: rgb(var(--brand-dark)); text-decoration-color: currentColor;
}
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:hover { color: rgb(var(--ink)); }

/* Buy links (about one per article, to a kamas product page): the purchase purple, so the way
   to buy stands out in the text. Light #765EB8 (5.2:1 on white), dark lilac #B8A4EE (7.8:1) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"]) {
  color: rgb(var(--cta)); text-decoration-color: rgb(var(--cta) / .45);
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"]):hover {
  color: rgb(var(--cta-hover)); text-decoration-color: currentColor;
}
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"]),
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"]):hover {
  color: rgb(var(--cta-on-dark)); text-decoration-color: rgb(var(--cta-on-dark) / .5);
}
html[data-theme="dark"] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k a:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"]):hover { text-decoration-color: currentColor; }

/* Headings that are entirely a link (8 H2s "Stuff Roublard Terre du niveau 20 à 44" pointing
   to an external guide, 1 in the "refonte de l'élevage" article): read as headings, in ink with
   no underline, like every other article heading, instead of 24px underlined link text.
   The link stays in the page and stays clickable; on hover only its color turns violet.
   (:only-child ignores text nodes; every heading link in the blog is the heading's whole text) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(h2, h3, h4) > a:only-child {
  color: inherit; text-decoration: none;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(h2, h3, h4) > a:only-child:hover {
  color: rgb(var(--brand));
}

/* Lists: bullets and numbers, 6px between items */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k ul { list-style: disc; padding-left: 1.25rem; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k ol { list-style: decimal; padding-left: 1.5rem; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k li { padding-left: 4px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k li + li { margin-top: 6px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k li > :is(ul, ol) { margin: 6px 0 0; }

/* Images and video: full column width, 8px corners, 24px above and below */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(img, video) {
  display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 8px;
}
/* Tall images: at most 560px high, the whole picture shown in the middle of the column.
   They are stretched to the column width, so tall and narrow pictures became huge (a 53 x 257px
   element icon was 720 x 3491px, a 150 x 600px one 720 x 2880px, the 450 x 493px quest maps
   720 x 789px). Images wider than 1.29:1 (most of them) are not affected. Width unchanged, so
   the space reserved before an image loads (720 x 405px) stays the same */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k img {
  max-height: 560px; object-fit: contain;
}
/* An image opening or closing the article: no extra 24px on top of the panel's padding (the
   image's margin went through its empty paragraph, so the panel had 56px above it) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k > :first-child > img:first-child { margin-top: 0; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k > :last-child > img:last-child { margin-bottom: 0; }

/* Tables: hairline grid in a rounded 1px frame, neutral header row, scroll sideways on phones
   (the site already makes them scrollable blocks) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k table {
  margin: 24px 0; border: 1px solid rgb(var(--line)); border-radius: 8px; border-collapse: separate; border-spacing: 0;
  font-size: 14px; line-height: 22px;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(th, td) {
  border: 0; border-bottom: 1px solid rgb(var(--line)); border-right: 1px solid rgb(var(--line));
  padding: 10px 14px; text-align: left; vertical-align: top;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k tr > :last-child { border-right: 0; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(tbody, table) > tr:last-child > * { border-bottom: 0; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k thead tr { background-color: rgb(var(--ink) / .04); }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k th { color: rgb(var(--ink)); font-size: 14px; font-weight: 700; }

/* Quotes (cost notes): a flat neutral box with 8px corners, no bar, no italics */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k blockquote {
  margin: 24px 0; padding: 16px 20px; border: 0; border-radius: 8px; background-color: rgb(var(--ink) / .04);
  color: rgb(var(--body)); font-style: normal; font-size: 15px; line-height: 24px;
}
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k blockquote > :last-child { margin-bottom: 0; }

/* Separators: one hairline */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k hr {
  margin: 32px 0; border: 0; border-top: 1px solid rgb(var(--line));
}

/* ---------- "Retour au blog": 24px under the panel, no extra rule above ---------- */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > div.border-t:last-child {
  margin-top: 24px; padding-top: 0; border-top: 0;
}


/* ======================================================================
   No emoji
   ====================================================================== */

/* 95 headings in 26 articles (and 3 paragraphs) start with an emoji ("🧭 Informations
   générales"). display: none would hide the text with them, so a tiny embedded font (1.9 KB,
   built for this file) draws every emoji code point as nothing, with no width, including the
   "🗺️" kind with a variation selector (the font declares those sequences, so Chrome doesn't
   switch to the color emoji font for them). The characters stay in the HTML, so search engines
   and screen readers get the same text as before. unicode-range limits the font to emoji, the
   variation selectors and the zero-width joiner: letters, digits, arrows (→) and punctuation
   keep Inter, and so do the line metrics. Known limit: the space that followed the emoji
   stays, so those headings start one space (about 5px) in; CSS can't remove it */
@font-face {
  font-family: "k1 no emoji"; font-display: block;
  src: url(data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMn8EWiAAAACsAAAAYGNtYXC8pHyiAAABDAAAAnxnbHlmA74F5gAAA4gAAAAiaGVhZGEKQ6EAAAOsAAAANmhoZWEFjQEGAAAD5AAAACRobXR4AfQAMgAABAgAAAEIbG9jYQRRBFEAAAUQAAABBm1heHAAhAAGAAAGGAAAACBuYW1lEY0odwAABjgAAAD+cG9zdP+4ADIAAAc4AAAAIAAEAPoBkAAFAAACigJYAAAASwKKAlgAAAFeADIBLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABOT05FAMAgDf//A8n/DwAAA8kA8QAAAAEAAAAAAfQCvAAAACAAAQAAAAMAAAAFAAAAHAADAAEAAACEAAMACgAAAOwADgAAAGgAAAACAP4OAAAAIAAAAAAA/g8AAAAgAAAAAAAAABEAIxoBACPpEQAmAP8AJwC/ACtQAAArVQAB8AD/AfEA/wHyAP8B8wD/AfQA/wH1AP8B9gD/AfcA/wH4AP8B+QD/AfoA/wAEAGgAAAAWABAAAwAGIA0jGyP6Jn8m/yd/J78rUCtV/g///wAAIA0jGiPpJgAmgCcAJ4ArUCtV/g///+B03OfcGNoB2YHZAdiB1LHUrAJyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAZAAAAAAAAAAIAAAIA0AACANAAAAgQAAIxoAACMbAAAAAQAAI+kAACP6AAAAAQAAJgAAACZ/AAAAAQAAJoAAACb/AAAAAQAAJwAAACd/AAAAAQAAJ4AAACe/AAAAAQAAK1AAACtQAAAAAQAAK1UAACtVAAAAAQAA/g8AAP4PAAAAgQAB8AAAAfB/AAAAAQAB8IAAAfD/AAAAAQAB8QAAAfF/AAAAAQAB8YAAAfH/AAAAAQAB8gAAAfJ/AAAAAQAB8oAAAfL/AAAAAQAB8wAAAfN/AAAAAQAB84AAAfP/AAAAAQAB9AAAAfR/AAAAAQAB9IAAAfT/AAAAAQAB9QAAAfV/AAAAAQAB9YAAAfX/AAAAAQAB9gAAAfZ/AAAAAQAB9oAAAfb/AAAAAQAB9wAAAfd/AAAAAQAB94AAAff/AAAAAQAB+AAAAfh/AAAAAQAB+IAAAfj/AAAAAQAB+QAAAfl/AAAAAQAB+YAAAfn/AAAAAQAB+gAAAfp/AAAAAQAB+oAAAfr/AAAAAQABADIAAAHCArwAAwAAAQEBAQAyAZAAAP5wAAAAAAK8AAAAAAABAAAAAQAAKX/gFV8PPPUAAwPoAAAAAAAAAAAAAAAAAAAAAAAyAAABwgK8AAAACAACAAAAAAAAAAEAAAPJ/w8AAAH0AAAAAAHCAAEAAAAAAAAAAAAAAAAAAAACAfQAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQARABEAEQAAAAEAAACCAAQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAGAE4AAwABBAkAAQAWAAAAAwABBAkAAgAOABYAAwABBAkAAwAmACQAAwABBAkABAAmAEoAAwABBAkABQAaAHAAAwABBAkABgAmAIoAawAxACAAbgBvACAAZQBtAG8AagBpAFIAZQBnAHUAbABhAHIAawAxAC0AbgBvAC0AZQBtAG8AagBpAC0AUgBlAGcAdQBsAGEAcgBrADEAIABuAG8AIABlAG0AbwBqAGkAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwADAAawAxAC0AbgBvAC0AZQBtAG8AagBpAC0AUgBlAGcAdQBsAGEAcgAAAAMAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype");
  unicode-range: U+200D, U+231A-231B, U+23E9-23FA, U+2600-27BF, U+2B50, U+2B55, U+FE0E-FE0F, U+1F000-1FAFF;
}
/* The blog content (cards and articles), including the headings that set their own family */
html body > .min-h-\[60vh\] > :is(div.bg-canvas, article.bg-canvas),
html body > .min-h-\[60vh\] > :is(div.bg-canvas, article.bg-canvas) :is(.font-heading, .hp-display, .section-title, .font-display, h1, h2, h3, h4, h5, h6) {
  font-family: "k1 no emoji", var(--font-inter), system-ui, sans-serif;
}

/* ---------- Wide screens (1420px of content) ----------
   Index and categories: 4 articles per row (12 per page = 3 rows). Articles: the text (up to
   900px) and, from 1200px, a side column that follows while scrolling (1k-blog.js): the article's
   contents and "Acheter des kamas" with the four games. Phones and tablets are unchanged. */
@media (min-width: 1280px) {
  html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > .grid:has(> article) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.k1b-side { display: none; }
@media (min-width: 1200px) {
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose:has(> .k1b-side) {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; align-items: start;
  }
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose:has(> .k1b-side) > .prose-1k { max-width: 900px; margin: 0; }
  html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(h2, h3) { scroll-margin-top: 120px; }
  .k1b-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 124px; }
  .k1b-box { padding: 16px 18px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--canvas)); }
  .k1b-box__title { margin: 0 0 8px; color: rgb(var(--ink)); font-size: 14px; line-height: 20px; font-weight: 600; }
  .k1b-toc { margin: 0; padding: 0; list-style: none; }
  .k1b-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid rgb(var(--line)); color: rgb(var(--body)); font-size: 13px; line-height: 18px; text-decoration: none; }
  .k1b-toc a:hover { border-left-color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); color: rgb(var(--ink)); }
  .k1b-game { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgb(var(--line)); color: rgb(var(--ink)); text-decoration: none; }
  .k1b-game:first-of-type { border-top: 0; }
  .k1b-game__logo { flex: none; width: 44px; height: 32px; border-radius: 6px; background: #1e1226 var(--k1-logo) center / 80% auto no-repeat; }
  .k1b-game__text { flex: 1; min-width: 0; }
  .k1b-game__text strong { display: block; font-size: 13px; line-height: 18px; font-weight: 600; }
  .k1b-game__text small { display: block; color: rgb(var(--muted)); font-size: 12px; line-height: 16px; }
  /* "Acheter des kamas" box (quick-buy links to the four games): the purchase purple on its
     tint, outline, arrows and hovered name, so it is the one coloured block of the side column
     (light #765EB8, dark lilac #B8A4EE); the contents box above stays neutral */
  .k1b-box:has(.k1b-game) { border-color: rgb(var(--cta) / .45); background: rgb(var(--cta) / .06); }
  .k1b-game svg { flex: none; color: rgb(var(--cta)); }
  .k1b-game:hover strong { color: rgb(var(--cta)); }
  html[data-theme="dark"] .k1b-box:has(.k1b-game) { border-color: rgb(var(--cta-on-dark) / .35); background: rgb(var(--cta-on-dark) / .06); }
  html[data-theme="dark"] .k1b-game svg,
  html[data-theme="dark"] .k1b-game:hover strong { color: rgb(var(--cta-on-dark)); }
  html[data-theme="dark"] .k1b-game__logo { background-color: #22162b; }
}