:root {
  --police-titre: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --police-texte: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-donnee: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --graisse-titre: 600;
  --approche-titre: -.01em;
  --interligne-titre: 1.06;

  --t-2xs: 11.5px;
  --t-xs:  12.5px;
  --t-s:   13.5px;
  --t-m:   15px;
  --t-base: 16.5px;
  --t-l:   clamp(17px, 1.6vw, 19.5px);
  --t-xl:  clamp(20px, 2.1vw, 23px);
  --t-2xl: clamp(23px, 2.6vw, 30px);
  --t-3xl: clamp(28px, 3.8vw, 44px);
  --t-4xl: clamp(34px, 6vw, 68px);

  --interligne-moyen: 1.24;
  --interligne-texte: 1.68;
}

:root[data-duo="manoir"] {
  --police-titre: "Newsreader", Georgia, "Times New Roman", serif;
  --police-texte: "Karla", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --graisse-titre: 500;
  --approche-titre: -.015em;
}

:root[data-duo="riviera"] {
  --police-titre: "Bodoni Moda", Didot, Georgia, serif;
  --police-texte: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "Space Mono", ui-monospace, Menlo, monospace;
  --graisse-titre: 500;
  --approche-titre: 0;
}

:root[data-duo="atelier"] {
  --police-titre: "Spectral", Georgia, "Times New Roman", serif;
  --police-texte: "Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --graisse-titre: 600;
  --approche-titre: -.01em;
}

:root[data-duo="moderne"] {
  --police-titre: "Syne", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "Roboto Mono", ui-monospace, Menlo, monospace;
  --graisse-titre: 700;
  --approche-titre: -.03em;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--approche-titre);
  line-height: var(--interligne-titre);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); line-height: var(--interligne-moyen); }
h4 { font-size: var(--t-xl);  line-height: var(--interligne-moyen); }

.sur-titre {
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--accent-texte);
  display: block;
}

.sur-titre::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  vertical-align: middle;
  margin-right: 12px;
  background: var(--accent);
  color: var(--sur-accent);
}

.sur-titre--primaire { color: var(--accent-sur-primaire); }

.sur-titre--primaire::before {
  background: var(--accent-sur-primaire);
  color: var(--primaire);
}

.chapo {
  font-size: var(--t-l);
  color: var(--texte-doux);
  max-width: 60ch;
}

.note {
  font-size: var(--t-xs);
  color: var(--texte-discret);
  line-height: 1.55;
}

.donnee {
  font-family: var(--police-donnee);
  font-variant-numeric: tabular-nums;
}

.lien {
  color: var(--accent-texte);
  text-underline-offset: 3px;
}

.lien--primaire { color: var(--accent-sur-primaire); }