/* BEGIN GENERATED by scripts/gen-design-tokens.mjs from web/src/design/tokens.json. Do not edit between these markers. */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --pv-white: #FFFFFF;
  --pv-rule: #E4E7E2;
  --pv-ink: #171D28;
  --pv-muted: #4A5264;
  --pv-blue: #1F3BB3;
  --pv-blue-deep: #16297D;
  --pv-green: #0E6E46;
  --pv-blue-8: #E7EDF6;
  --pv-green-10: #E5EDE7;
  --pv-line-green: #8CB099;
  --pv-bg: var(--pv-white);
  --pv-surface: var(--pv-white);
  --pv-line: var(--pv-rule);
  --pv-line-strong: var(--pv-muted);
  --pv-fg: var(--pv-ink);
  --pv-fg-muted: var(--pv-muted);
  --pv-accent: var(--pv-blue);
  --pv-accent-deep: var(--pv-blue-deep);
  --pv-accent-bg: var(--pv-blue-8);
  --pv-on-accent: var(--pv-white);
  --pv-verdict-valid: var(--pv-green);
  --pv-verdict-valid-bg: var(--pv-green-10);
  --pv-focus: var(--pv-blue-deep);
  --pv-tint: #F2F5FC;
  --pv-block: #0D0D0D;
  --pv-block-fg: #F2F2F2;
  --pv-block-muted: #ABABAB;
  --pv-block-line: #2E2E2E;
  --pv-on-block: var(--pv-block-fg);
  --pv-on-block-muted: var(--pv-block-muted);
  --pv-line-block: var(--pv-block-line);
  --pv-lift-1: var(--pv-shadow-1);
  --pv-lift-2: var(--pv-shadow-2);
  --pv-lift-3: var(--pv-shadow-3);
  --pv-font-display: "Figtree", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pv-font-sans: "Geist", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pv-font-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pv-type-size-label: 0.75rem;
  --pv-type-size-code: 0.8125rem;
  --pv-type-size-small: 0.875rem;
  --pv-type-size-body: 0.9375rem;
  --pv-type-size-lede: 1.0625rem;
  --pv-type-size-h3: 1.0625rem;
  --pv-type-size-h2: 1.5rem;
  --pv-type-size-headline: 1.875rem;
  --pv-type-size-price: 1.625rem;
  --pv-type-size-h1: clamp(30px, 2.8vw, 38px);
  --pv-type-size-display: clamp(40px, 4.4vw, 56px);
  --pv-type-size-figure: clamp(30px, 3vw, 44px);
  --pv-space-1: 0.25rem;
  --pv-space-2: 0.5rem;
  --pv-space-3: 0.75rem;
  --pv-space-4: 1rem;
  --pv-space-5: 1.25rem;
  --pv-space-6: 1.5rem;
  --pv-space-7: 2rem;
  --pv-space-8: 3rem;
  --pv-space-9: 4rem;
  --pv-radius-chip: 3px;
  --pv-radius-control: 8px;
  --pv-radius-card: 12px;
  --pv-shadow-1: 0 1px 2px rgba(9, 20, 48, 0.05), 0 2px 8px -2px rgba(9, 20, 48, 0.06);
  --pv-shadow-2: 0 1px 2px rgba(9, 20, 48, 0.05), 0 16px 40px -16px rgba(9, 20, 48, 0.16);
  --pv-shadow-3: 0 2px 4px rgba(9, 20, 48, 0.05), 0 40px 80px -32px rgba(9, 20, 48, 0.28);
  --pv-shadow-1-dark: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 8px -2px rgba(0, 0, 0, 0.30);
  --pv-shadow-2-dark: 0 1px 2px rgba(0, 0, 0, 0.36), 0 16px 40px -16px rgba(0, 0, 0, 0.55);
  --pv-shadow-3-dark: 0 2px 4px rgba(0, 0, 0, 0.40), 0 40px 80px -32px rgba(0, 0, 0, 0.66);
  --pv-border-hairline: 1px;
  --pv-border-strong: 2px;
  --pv-motion-fast: 120ms;
  --pv-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --pv-layout-frame: 1180px;
  --pv-layout-measure: 34rem;
  --pv-layout-band-home: 7rem;
  --pv-layout-band-home-narrow: 4rem;
  --pv-layout-band-monument: 10rem;
  --pv-layout-band-monument-narrow: 5.5rem;
  --pv-layout-head-offset: 5rem;
  --pv-layout-head-offset-narrow: 8rem;
  --pv-z-raised: 10;
}

@media (prefers-color-scheme: dark) {
  :root:not(.pv-light) {
    color-scheme: dark;
    --pv-white: #FFFFFF;
    --pv-ink: #171D28;
    --pv-muted: #4A5264;
    --pv-blue: #1F3BB3;
    --pv-green: #0E6E46;
    --pv-night: #0F0F0F;
    --pv-night-surface: #1C1C1C;
    --pv-night-line: #383838;
    --pv-night-line-strong: #717171;
    --pv-blue-l: #80AFFF;
    --pv-blue-ll: #98CAFF;
    --pv-muted-l: #ABABAB;
    --pv-green-l: #79CC9F;
    --pv-blue-d: #1D273F;
    --pv-green-d: #202F26;
    --pv-line-green: #577764;
    --pv-bg: var(--pv-night);
    --pv-surface: var(--pv-night-surface);
    --pv-line: var(--pv-night-line);
    --pv-line-strong: var(--pv-night-line-strong);
    --pv-fg: #F2F2F2;
    --pv-fg-muted: var(--pv-muted-l);
    --pv-accent: var(--pv-blue-l);
    --pv-accent-deep: var(--pv-blue-ll);
    --pv-accent-bg: var(--pv-blue-d);
    --pv-on-accent: var(--pv-ink);
    --pv-verdict-valid: var(--pv-green-l);
    --pv-verdict-valid-bg: var(--pv-green-d);
    --pv-focus: var(--pv-blue-l);
    --pv-tint: #181818;
    --pv-block: #060606;
    --pv-block-fg: #F2F2F2;
    --pv-block-muted: #ABABAB;
    --pv-block-line: #242424;
    --pv-on-block: var(--pv-block-fg);
    --pv-on-block-muted: var(--pv-block-muted);
    --pv-line-block: var(--pv-block-line);
    --pv-lift-1: var(--pv-shadow-1-dark);
    --pv-lift-2: var(--pv-shadow-2-dark);
    --pv-lift-3: var(--pv-shadow-3-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pv-motion-fast: 0ms;
  }
}
/* END GENERATED */
/* Pruvue, the site (DESIGN_SPEC §4): one stylesheet for every page. Values are --pv-* tokens only
   (scripts/token-gate.mjs); the region above is generated from web/src/design/tokens.json. */

/* ---------------------------------------------------------------- page */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--pv-bg);
  color: var(--pv-fg);
  font-family: var(--pv-font-sans);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: var(--pv-type-size-body);
}
/* .btn's display beats the UA [hidden] rule; scripts/site-render-gates.mjs holds this. */
[hidden] {
  display: none !important;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--pv-font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 {
  font-size: var(--pv-type-size-h1);
  font-weight: 700;
  line-height: 1.05;
}
h2 {
  font-size: var(--pv-type-size-h2);
  font-weight: 700;
}
h3 {
  font-size: var(--pv-type-size-h3);
  font-weight: 700;
}
p {
  margin: 0;
}
a {
  color: var(--pv-accent);
  text-underline-offset: 0.15em;
}
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--pv-bg), 0 0 0 4px var(--pv-focus);
  border-radius: var(--pv-radius-chip);
}
.wrap {
  max-width: var(--pv-layout-frame);
  margin: 0 auto;
  padding: 0 var(--pv-space-4);
}
.mono {
  font-family: var(--pv-font-mono);
}
/* A version line carries a 64-digit digest, one unbreakable word wider than a phone (2026-09-25). */
.updated {
  overflow-wrap: anywhere;
}
/* A file name, an identifier, a cookie: DESIGN_SPEC §1.2 sets them in the mono face. Nothing styled the
   element, so outside the home page `<code>` rendered in the reader's system monospace (F-10, found on every
   page by the render gate of 2026-09-25). */
code {
  font-family: var(--pv-font-mono);
}
.label {
  font-family: var(--pv-font-mono);
  font-size: var(--pv-type-size-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pv-accent);
}

/* ---------------------------------------------------------------- the lockup, in currentColor */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--pv-fg);
  text-decoration: none;
}
.brand .bmk,
.brand .bvv {
  color: var(--pv-accent);
}
.brand svg {
  display: block;
  height: 26px;
  width: auto;
}

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--pv-z-raised);
  background: color-mix(in srgb, var(--pv-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--pv-border-hairline) solid var(--pv-line);
}
.head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-space-4);
  min-height: 56px;
}
.head-nav {
  display: flex;
  gap: var(--pv-space-5);
  margin-left: auto;
  font-size: var(--pv-type-size-small);
  font-weight: 500;
}
.head-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pv-fg-muted);
  text-decoration: none;
}
.head-nav a:hover {
  color: var(--pv-fg);
}
.head-end {
  display: flex;
  align-items: center;
  gap: var(--pv-space-3);
}
/* The language control as a physical switch (MD ruling from the renders, 2026-09-24): FR and EN either
   side of a track whose thumb sits under the language being read, the same control as the
   application's (`.pv-lang` in web/src/design/components/segmented.css), held the same by the sameness
   gate. The track and thumb are drawn, not controls: the language not being read is the link, the one
   being read is marked aria-current. The thumb is inset by a space token rather than the render's 3px,
   since spacing is a token everywhere (gate 1), so the track is 22px tall rather than the render's 20. */
.lang {
  display: inline-grid;
  grid-template-columns: auto 34px auto;
  align-items: center;
  gap: var(--pv-space-2);
}
.lang::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 22px;
  border: var(--pv-border-hairline) solid var(--pv-line-strong);
  /* at least half the height, so the corner clamps to a full pill: the card radius, not one of its own (F6) */
  border-radius: var(--pv-radius-card);
  background: var(--pv-accent-bg);
}
.lang::after {
  content: '';
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  width: 14px;
  height: 14px;
  margin: 0 var(--pv-space-1);
  /* at least half the size, so it clamps to a circle: the control radius (F6) */
  border-radius: var(--pv-radius-control);
  background: var(--pv-accent);
  box-shadow: var(--pv-lift-1);
}
.lang:has([lang="en"][aria-current="true"])::after {
  justify-self: end;
}
.lang__opt {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: var(--pv-font-mono);
  font-size: var(--pv-type-size-label);
  letter-spacing: 0.08em;
  color: var(--pv-fg-muted);
  text-decoration: none;
  transition: color var(--pv-motion-fast) var(--pv-motion-ease);
}
.lang__opt[lang="fr"] {
  grid-column: 1;
}
.lang__opt[lang="en"] {
  grid-column: 3;
}
a.lang__opt:hover {
  color: var(--pv-fg);
}
.lang__opt[aria-current="true"] {
  color: var(--pv-fg);
  font-weight: 600;
}
.site-head .btn {
  min-height: 36px;
  font-size: var(--pv-type-size-small);
}

/* ---------------------------------------------------------------- buttons (46px, direction v2) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--pv-space-6);
  border: var(--pv-border-hairline) solid transparent;
  border-radius: var(--pv-radius-control);
  background: var(--pv-accent);
  color: var(--pv-on-accent);
  font: inherit;
  font-size: var(--pv-type-size-body);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--pv-lift-1);
  transition: background-color var(--pv-motion-fast) var(--pv-motion-ease);
}
.btn:hover {
  background: var(--pv-accent-deep);
  border-color: transparent;
}
/* The quieter action beside a primary one, drawn as the application draws it (.pv-btn--secondary). */
.btn--secondary {
  background: var(--pv-surface);
  border-color: var(--pv-line-strong);
  color: var(--pv-fg);
}
.btn--secondary:hover {
  background: var(--pv-surface);
  border-color: var(--pv-accent);
  color: var(--pv-accent);
}
/* A button whose label is data rather than a verb, and may be long: the payment page's territory
   suggestion names a territory (« Choisir Saint-Pierre-et-Miquelon »), which at 360 px does not fit on
   one line. It wraps inside the column instead of pushing the page sideways. */
.btn--wrap {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  padding-block: var(--pv-space-2);
}

/* ---------------------------------------------------------------- the language offer
   Drawn by site/lang.<hash>.js only when the browser's language is the other one and nothing has been
   chosen (MD, 2026-09-23); a crawler that runs no script never meets it. */
.lang-offer {
  background: var(--pv-accent-bg);
  border-bottom: var(--pv-border-hairline) solid var(--pv-line);
  font-size: var(--pv-type-size-small);
}
.lang-offer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-space-2) var(--pv-space-4);
  padding-top: var(--pv-space-2);
  padding-bottom: var(--pv-space-2);
}
.lang-offer__go {
  font-weight: 600;
}
.lang-offer__no {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--pv-fg-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* ---------------------------------------------------------------- guide and tool indexes */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pv-space-6);
  margin-top: var(--pv-space-7);
}
.card {
  display: block;
  padding: var(--pv-space-5) var(--pv-space-6);
  background: var(--pv-surface);
  border: var(--pv-border-hairline) solid var(--pv-line);
  border-radius: var(--pv-radius-card);
  box-shadow: var(--pv-lift-1);
  color: inherit;
  text-decoration: none;
}
.card:hover {
  border-color: var(--pv-accent);
}
.card p {
  margin-top: var(--pv-space-2);
  font-size: var(--pv-type-size-small);
  color: var(--pv-fg-muted);
}

/* ---------------------------------------------------------------- prose pages: guides, legal, 404 */
.prose {
  /* the reading measure (F-12): about 80 characters per full line, measured 2026-09-24 in the legal
     pages and guides at 834 and 1440px (the 71 once written here was an estimate) */
  max-width: var(--pv-layout-measure);
  padding: var(--pv-space-8) 0;
}
.prose h1 {
  font-size: var(--pv-type-size-h1);
  margin-bottom: var(--pv-space-4);
}
.prose h2 {
  margin: var(--pv-space-7) 0 var(--pv-space-3);
}
.prose h3 {
  margin: var(--pv-space-6) 0 var(--pv-space-2);
}
.prose p,
.prose li {
  margin-bottom: var(--pv-space-3);
  font-size: var(--pv-type-size-body);
}
.prose ul,
.prose ol {
  padding-left: var(--pv-space-5);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pv-type-size-small);
}
.prose th,
.prose td {
  padding: var(--pv-space-2) var(--pv-space-3) var(--pv-space-2) 0;
  border-bottom: var(--pv-border-hairline) solid var(--pv-line);
  text-align: left;
  vertical-align: top;
}
/* A legal table of four long columns does not fit a phone's measure (the privacy policy's recipients,
   2026-09-23). Below the narrow breakpoint each row becomes a block and each cell shows its column's name
   from data-label, which scripts/gen-site-legal.mjs writes from the header row: nothing scrolls sideways,
   and no word of the text changes. */
@media (max-width: 560px) {
  .prose table.stack,
  .prose table.stack tbody,
  .prose table.stack tr,
  .prose table.stack td {
    display: block;
  }
  .prose table.stack thead {
    display: none;
  }
  .prose table.stack tr {
    padding: var(--pv-space-3) 0;
    border-bottom: var(--pv-border-hairline) solid var(--pv-line);
  }
  .prose table.stack td {
    padding: var(--pv-space-1) 0;
    border-bottom: 0;
  }
  .prose table.stack td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--pv-fg-muted);
  }
}
.prose blockquote {
  margin: var(--pv-space-4) 0;
  padding-left: var(--pv-space-4);
  border-left: var(--pv-border-strong) solid var(--pv-accent);
  color: var(--pv-fg-muted);
}

/* the guides' furniture: a call to action, its sources, what to read next */
.updated {
  margin-bottom: var(--pv-space-6);
  font-size: var(--pv-type-size-label);
  letter-spacing: 0.08em;
  color: var(--pv-fg-muted);
}
.cta {
  display: block;
  margin: var(--pv-space-7) 0;
  padding: var(--pv-space-4) var(--pv-space-5);
  background: var(--pv-surface);
  border: var(--pv-border-hairline) solid var(--pv-line);
  border-radius: var(--pv-radius-card);
  box-shadow: var(--pv-lift-1);
  color: inherit;
  text-decoration: none;
}
.cta:hover {
  border-color: var(--pv-accent);
}
.cta b {
  display: block;
  color: var(--pv-accent);
}
.cta span {
  display: block;
  margin-top: var(--pv-space-1);
  font-size: var(--pv-type-size-small);
  color: var(--pv-fg-muted);
}
.sources {
  margin-top: var(--pv-space-6);
  padding-top: var(--pv-space-4);
  border-top: var(--pv-border-hairline) solid var(--pv-line);
  font-size: var(--pv-type-size-small);
  color: var(--pv-fg-muted);
}
.more {
  margin-top: var(--pv-space-7);
  padding-top: var(--pv-space-5);
  border-top: var(--pv-border-hairline) solid var(--pv-line);
}
.more ul {
  padding: 0;
  list-style: none;
}
.prose .cards {
  grid-template-columns: 1fr;
  gap: var(--pv-space-4);
  margin-top: var(--pv-space-6);
}
.card b {
  display: block;
  margin-bottom: var(--pv-space-1);
  font-size: var(--pv-type-size-body);
  font-weight: 600;
  color: var(--pv-accent);
}
.card span {
  font-size: var(--pv-type-size-small);
  color: var(--pv-fg-muted);
}

/* ---------------------------------------------------------------- footer (F-07), scripts/gen-site-footer.mjs */
.site-foot {
  border-top: var(--pv-border-hairline) solid var(--pv-line);
  padding: var(--pv-space-9) 0 var(--pv-space-8);
  font-size: var(--pv-type-size-small);
  line-height: 1.6;
  color: var(--pv-fg-muted);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--pv-space-8);
}
.site-foot .brand svg {
  height: 20px;
}
.foot-editor {
  margin: var(--pv-space-6) 0 0;
  max-width: 22rem;
}
.foot-h {
  margin: 0 0 var(--pv-space-4);
  font-family: var(--pv-font-mono);
  font-size: var(--pv-type-size-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--pv-fg-muted);
}
.site-foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--pv-fg-muted);
  text-decoration: none;
}
.site-foot a:hover {
  color: var(--pv-accent);
  text-decoration: underline;
}
.foot-social {
  display: flex;
  gap: var(--pv-space-6);
  margin-top: var(--pv-space-7);
}
.foot-social a {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.foot-legal {
  max-width: var(--pv-layout-measure);
  margin: var(--pv-space-8) 0 0;
  padding-top: var(--pv-space-6);
  border-top: var(--pv-border-hairline) solid var(--pv-line);
}
/* raised controls restate the ring with their lift, or the lift beats it (scripts/focus-ring-check.mjs) */
.btn:focus-visible,
.card:focus-visible,
.cta:focus-visible {
  box-shadow: 0 0 0 2px var(--pv-bg), 0 0 0 4px var(--pv-focus), var(--pv-lift-1);
}

@media (pointer: coarse) {
  .site-foot a,
  .lang__opt,
  .brand {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- narrow (D1: below 1180px stacks) */
@media (max-width: 1180px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .head-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: var(--pv-space-2);
  }
}
@media (max-width: 1000px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Below 560 the lockup, the language control and a call to action whose ruled label does not shorten
   stop fitting on one row: the lockup and the control share the first, the action takes its own. */
@media (max-width: 560px) {
  .head-in {
    gap: var(--pv-space-4);
    min-height: 0;
    padding-top: var(--pv-space-2);
    padding-bottom: var(--pv-space-2);
  }
  .head-end {
    display: contents;
  }
  .lang {
    margin-left: auto;
  }
  .site-head .btn {
    flex: 1 0 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* An order reference is copied and typed back as one token: it never breaks at its hyphen, which at a phone's width
   put "ORD-" on one line and the rest on the next (payment page, held view; review of 2026-09-27). */
.pay-ref {
  white-space: nowrap;
}