/* Socle typo. Familles, echelle, graisses. Zero couleur.
   Display Fraunces, corps IBM Plex Sans, mono IBM Plex Mono.
   Graisses reelles seulement. Echelle clamp de 360 px a 1440 px. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Plancher 12 px (2xs, xs). Corps plancher 16 px. Pente 360 px -> 1440 px. */
  --fs-2xs: 0.75rem;
  --fs-xs: clamp(0.75rem, calc(12px + (1px * (100vw - 360px) / 1080)), 0.8125rem);
  --fs-sm: clamp(0.875rem, calc(14px + (1px * (100vw - 360px) / 1080)), 0.9375rem);
  --fs-md: clamp(1rem, calc(16px + (2px * (100vw - 360px) / 1080)), 1.125rem);
  --fs-lg: clamp(1.125rem, calc(18px + (2px * (100vw - 360px) / 1080)), 1.25rem);
  --fs-xl: clamp(1.25rem, calc(20px + (6px * (100vw - 360px) / 1080)), 1.625rem);
  --fs-2xl: clamp(1.625rem, calc(26px + (10px * (100vw - 360px) / 1080)), 2.25rem);
  --fs-3xl: clamp(2rem, calc(32px + (16px * (100vw - 360px) / 1080)), 3rem);
  --fs-4xl: clamp(2.5rem, calc(40px + (32px * (100vw - 360px) / 1080)), 4.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.22;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-display: -0.028em;
  --ls-headline: -0.018em;
  --ls-title: -0.012em;
  --ls-body: 0.008em;
  --ls-caption: 0.016em;
  --ls-meta: 0.08em;
  --ls-kicker: 0.12em;
  --ls-mono: 0.01em;
}

html[data-theme="clair"] {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

html[data-theme="sombre"] {
  --lh-tight: 1.08;
  --lh-snug: 1.26;
  --lh-body: 1.62;
  --lh-loose: 1.78;
  --ls-display: -0.02em;
  --ls-headline: -0.01em;
  --ls-title: -0.004em;
  --ls-body: 0.018em;
  --ls-caption: 0.028em;
  --ls-meta: 0.11em;
  --ls-kicker: 0.14em;
  --ls-mono: 0.018em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: var(--font-body);
  font-size: 100%;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  color: inherit;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-wrap: balance;
  color: inherit;
}

.t-headline {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-wrap: balance;
  color: inherit;
}

.t-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  font-optical-sizing: auto;
  font-kerning: normal;
  color: inherit;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-kerning: normal;
  color: inherit;
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-caption);
  color: inherit;
}

.t-kicker {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: inherit;
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  color: inherit;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  color: inherit;
}

.t-body :is(strong, b),
.t-caption :is(strong, b) {
  font-weight: var(--fw-semibold);
}

.t-kicker :is(strong, b) {
  font-weight: var(--fw-medium);
}

.t-meta :is(strong, b),
.t-mono :is(strong, b) {
  font-weight: var(--fw-medium);
}