/* 1kamas — homepage theme applied to the legal text pages (terms, privacy, AML, supplier agreement, legal information, acceptable use, supplier verification).
   Selectors are prefixed with `html` to win over the per-page inlined CSS.
   Remove the <link data-1k-site="legal"> tag to undo.

   Same page rhythm as the homepage: a flat plum header block (like the homepage hero), then the
   text grouped in one white panel with 1px dividers between the articles (like the homepage
   FAQ / servers panels), then a slim white contact row (like the homepage's last block).
   On desktop each article reads as a row: its title on the left, its text on the right, so the
   lines stay at a comfortable length (about 80 characters) inside the full-width panel.
   Colors, borders, radii, type and spacing only: every heading, paragraph, link, list, date and
   button stays in the page, in the same order.

   Scope: `main.container-1k.pb-16.pt-8` exists only on these 28 pages (fr, en, es, pt), and this
   file is linked only on them. Page structure (identical in the 4 languages):
     main > nav (breadcrumb), h1, [p intro — supplier agreement only], p.text-muted (date),
            [div.bg-brand-tint — operator note], div.mt-2 > section × n, div.border-t (contact row)
   The legal information pages have no div.mt-2 wrapper: their sections are direct children of
   main (one of them holds the company details list and the operator note), and the French one
   ends with a bordered "English summary" section. */


/* ---------- Page header: one flat plum block (H1, intro, date) ----------
   Three sibling elements share the plum background and stack with no gap, so they read as one
   8px block like the homepage hero: H1 on top (rounded top corners), the date at the bottom
   (rounded bottom corners). The breadcrumb stays above it, on the page.
   H1: 48px / 1.1 on desktop like the homepage hero and the other inner-page heroes (same
   clamp, 4vw up to 3rem); 28px on phones instead of 32px, because three titles run 70-80
   characters ("Politique de vérification des fournisseurs et de l'origine des biens virtuels") */
html body main.container-1k.pb-16.pt-8 > h1 {
  margin-top: 16px; padding: 32px 32px 0; border-radius: 8px 8px 0 0;
  background: #1e1226; color: #fff;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; font-weight: 700;
}

/* Supplier agreement subtitle ("Conditions applicables aux fournisseurs…"): white 85%, as the
   homepage hero sentence */
html body main.container-1k.pb-16.pt-8 > h1 + p.text-\[15px\] {
  margin-top: 0; padding: 12px 32px 0; background: #1e1226;
  color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 24px;
}

/* "Dernière mise à jour" line: bottom of the plum block, light plum-grey text (10:1), lilac clock */
html body main.container-1k.pb-16.pt-8 > p.text-muted.flex {
  margin-top: 0; padding: 14px 32px 32px; border-radius: 0 0 8px 8px;
  background: #1e1226; color: rgba(228, 225, 234, .86); font-size: 14px; line-height: 21px;
}
html body main.container-1k.pb-16.pt-8 > p.text-muted.flex > svg { color: rgba(220, 210, 246, .86); }

@media (max-width: 639px) {
  html body main.container-1k.pb-16.pt-8 > h1 { padding: 24px 20px 0; line-height: 1.15; }
  html body main.container-1k.pb-16.pt-8 > h1 + p.text-\[15px\] { padding: 10px 20px 0; font-size: 15px; line-height: 23px; }
  html body main.container-1k.pb-16.pt-8 > p.text-muted.flex { padding: 12px 20px 24px; }
}

/* Dark mode: same plum with the homepage hero's thin light outline, drawn piece by piece
   (top + sides on the H1, sides on the subtitle, sides + bottom on the date) so the three
   pieces still read as one outlined block */
html[data-theme="dark"] body main.container-1k.pb-16.pt-8 > :is(h1, h1 + p.text-\[15px\], p.text-muted.flex) { background: #22162b; }
html[data-theme="dark"] body main.container-1k.pb-16.pt-8 > h1 {
  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 main.container-1k.pb-16.pt-8 > h1 + p.text-\[15px\] {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .07);
}
html[data-theme="dark"] body main.container-1k.pb-16.pt-8 > p.text-muted.flex {
  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);
}


/* ---------- Operator note under the header: quiet white panel ----------
   (privacy, AML, acceptable use, supplier verification, supplier agreement). The base already
   makes it white with a 1px border; here: 24px under the header, 8px corners, homepage panel
   padding, the shield icon in plain brand purple (no tile) */
html body main.container-1k.pb-16.pt-8 > div.bg-brand-tint {
  margin-top: 24px; padding: 16px 20px; border-radius: 8px;
  background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line));
  font-size: 14px; line-height: 22px; color: rgb(var(--body));
}
html body main.container-1k.pb-16.pt-8 > div.bg-brand-tint > svg { color: rgb(var(--brand)); }

/* Its text stops at the same line length as the articles (46rem, ~100 characters at 14px), like
   the homepage "Approvisionnement responsable" panel: the supplier agreement's three-sentence
   note ran ~170 characters per line across the full 1208px panel. The panel keeps its width */
html body main.container-1k.pb-16.pt-8 > div.bg-brand-tint > :not(svg) { max-width: 46rem; }


/* ---------- The text: one white panel, articles separated by 1px lines ----------
   div.mt-2 wraps all the articles (every page except legal information). 24px under the
   header, 16px under the operator note */
html body main.container-1k.pb-16.pt-8 > div.mt-2 {
  margin-top: 24px; padding: 0 32px;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
  box-shadow: 0 1px 2px rgb(26 22 38 / .04);
}
html body main.container-1k.pb-16.pt-8 > div.bg-brand-tint + div.mt-2 { margin-top: 16px; }

/* Each article: 32px above and below, a hairline between two articles (inset by the panel
   padding, like the homepage FAQ rows) */
html body main.container-1k.pb-16.pt-8 > div.mt-2 > section { margin-top: 0; padding: 32px 0; }
html body main.container-1k.pb-16.pt-8 > div.mt-2 > section + section { border-top: 1px solid rgb(var(--line)); }

@media (max-width: 639px) {
  html body main.container-1k.pb-16.pt-8 > div.mt-2 { padding: 0 20px; }
  html body main.container-1k.pb-16.pt-8 > div.mt-2 > section { padding: 24px 0; }
}

/* Legal information pages: the sections sit directly in main, so each one is a slice of the
   same white panel — sides on every slice, top corners on the first, bottom corners on the last,
   and a hairline (::before, inset by the padding) between two slices. The French page's bordered
   "English summary" box becomes the last slice (its own border, corners and padding are reset) */
html body main.container-1k.pb-16.pt-8 > section {
  margin-top: 0; padding: 0 32px 32px;
  background: rgb(var(--surface)); border: 0 solid rgb(var(--line)); border-left-width: 1px; border-right-width: 1px; border-radius: 0;
}
html body main.container-1k.pb-16.pt-8 > p.text-muted + section {
  margin-top: 24px; padding-top: 32px; border-top-width: 1px; border-radius: 8px 8px 0 0;
}
html body main.container-1k.pb-16.pt-8 > section:last-of-type {
  border-bottom-width: 1px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
html body main.container-1k.pb-16.pt-8 > section + section::before {
  content: ""; display: block; height: 1px; margin-bottom: 32px; background: rgb(var(--line));
}
@media (max-width: 639px) {
  html body main.container-1k.pb-16.pt-8 > section { padding: 0 20px 24px; }
  html body main.container-1k.pb-16.pt-8 > p.text-muted + section { padding-top: 24px; }
  html body main.container-1k.pb-16.pt-8 > section + section::before { margin-bottom: 24px; }
}


/* ---------- Article titles and text ---------- */

/* Titles: 18px / 26px bold, no purple bar in front (decorative span, aria-hidden) */
html body main.container-1k.pb-16.pt-8 section > h2 {
  display: block; margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: rgb(var(--ink));
}
html body main.container-1k.pb-16.pt-8 section > h2 > span.w-1[aria-hidden="true"] { display: none; }

/* "English summary" label above the title of the French legal information page: quiet grey,
   sentence case (as the base), like the card labels */
html body main.container-1k.pb-16.pt-8 > section > p.text-brand:first-child {
  margin: 0 0 4px; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; font-weight: 700;
}

/* Body text: 15px / 1.7, body grey, 8px under the title, lines capped at ~80 characters */
html body main.container-1k.pb-16.pt-8 section > div.text-\[15px\] {
  margin-top: 8px; max-width: 46rem; font-size: 15px; line-height: 1.7; color: rgb(var(--body));
}
html body main.container-1k.pb-16.pt-8 section > div.text-\[15px\] > * + * { margin-top: 14px; }

/* Icon lists (supplier pages, acceptable use): 8px between items, icon lined up with the first
   line of text. Icon colors are the site's own: purple checks for obligations, red alert circles
   for prohibited activities (that meaning is kept) */
html body main.container-1k.pb-16.pt-8 section ul.space-y-2 > li + li { margin-top: 8px; }
html body main.container-1k.pb-16.pt-8 section ul.space-y-2 > li > svg { margin-top: 4px; }


/* ---------- Legal information: company details and the note inside the panel ---------- */

/* Company details list: hairlines top and bottom stay, 20px under the text */
html body main.container-1k.pb-16.pt-8 > section > div.divide-y.border-y { margin-top: 20px; border-color: rgb(var(--line)); }
html body main.container-1k.pb-16.pt-8 > section > div.divide-y.border-y > * { border-color: rgb(var(--line)); }

/* Its "Propriétaire et exploitant" label: 13px / 18px like the "English summary" label (was 12px) */
html body main.container-1k.pb-16.pt-8 > section > div.divide-y.border-y > div > p.text-xs { font-size: 13px; line-height: 18px; }

/* Operator note inside the white panel: a light neutral tint instead of a second white box
   (the 1px border is kept transparent so the size doesn't change) */
html body main.container-1k.pb-16.pt-8 > section > div.bg-brand-tint {
  margin-top: 16px; padding: 16px 20px; border-radius: 8px;
  background-color: rgb(var(--ink) / .04); border: 1px solid transparent;
  font-size: 14px; line-height: 22px; color: rgb(var(--body));
}
html body main.container-1k.pb-16.pt-8 > section > div.bg-brand-tint > svg { color: rgb(var(--brand)); }


/* ---------- Desktop: title left, text right ----------
   From 1024px each article is a row: the title (and the "English summary" label) floats in a
   left column of 28%, everything else (text, lists, details, note) sits 40px to its right.
   Same DOM order, so reading order and anchors are unchanged. flow-root keeps a tall title
   inside its row */
@media (min-width: 1024px) {
  html body main.container-1k.pb-16.pt-8 > div.mt-2 > section,
  html body main.container-1k.pb-16.pt-8 > section { display: flow-root; }
  html body main.container-1k.pb-16.pt-8 > div.mt-2 > section > h2,
  html body main.container-1k.pb-16.pt-8 > section > :is(h2, p) {
    float: left; clear: left; width: 28%; padding-right: 8px;
  }
  html body main.container-1k.pb-16.pt-8 > div.mt-2 > section > div,
  html body main.container-1k.pb-16.pt-8 > section > div { margin-left: calc(28% + 40px); }
  html body main.container-1k.pb-16.pt-8 > div.mt-2 > section > div:first-of-type,
  html body main.container-1k.pb-16.pt-8 > section > div:first-of-type { margin-top: 0; }
}


/* ---------- Contact row at the end: one slim white panel ----------
   "Une question sur ces conditions ?" + support and policy buttons, like the homepage's last
   block before the footer ("Ils nous font confiance"): white panel, 1px border, 8px corners,
   text left and buttons right (stacked on phones, as the site already does). White rather than
   plum so it doesn't sit as a second plum block right on top of the plum footer. The buttons
   keep the base's flat styles (purple primary, white secondary with a hairline) */
html body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 {
  margin-top: 24px; padding: 20px 24px;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
  box-shadow: 0 1px 2px rgb(26 22 38 / .04);
}
html[data-theme="dark"] body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 .btn-primary { background-color: #52467a; color: #fff; }
html[data-theme="dark"] body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 .btn-primary:hover { background-color: #605086; }
html body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 p.font-semibold { color: rgb(var(--ink)); font-size: 16px; line-height: 24px; font-weight: 700; }
html body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 p.text-sm { margin-top: 2px; color: rgb(var(--body)); font-size: 14px; line-height: 22px; }

/* From 640px the site puts the text and the buttons side by side, and the buttons never shrink:
   between 640 and ~690px the two buttons ran up to 49px past the panel's right edge (and 2px
   past the page at 640px on the Spanish acceptable-use page). Wrapping lets the buttons drop
   under the text, left-aligned, only when the row is too narrow for both */
html body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 { flex-wrap: wrap; }

/* Phones: the two stacked buttons take the full width of the row, so they line up instead of
   being two different widths */
@media (max-width: 639px) {
  html body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 { padding: 20px; }
  html body main.container-1k.pb-16.pt-8 > div.border-t.mt-14 > div.shrink-0 { align-self: stretch; }
}