:root {
  --police-titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --graisse-titre: 700;
  --approche-titre: -.02em;
  --largeur-titre: 100;

  --t-2xs: 11.5px;
  --t-xs:  12.5px;
  --t-s:   13.5px;
  --t-m:   15px;
  --t-base: 16px;
  --t-l:   clamp(17px, 1.6vw, 19px);
  --t-xl:  clamp(19px, 2vw, 21px);
  --t-2xl: clamp(21px, 2.4vw, 27px);
  --t-3xl: clamp(26px, 3.4vw, 40px);
  --t-4xl: clamp(32px, 5.4vw, 56px);

  --interligne-serre: 1.08;
  --interligne-moyen: 1.25;
  --interligne-texte: 1.6;
}

:root[data-duo="systeme"] {
  --police-titre: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-texte: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-donnee: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --graisse-titre: 700;
  --approche-titre: -.02em;
}

:root[data-duo="editorial"] {
  --police-titre: "Bricolage Grotesque", "Archivo", Arial, sans-serif;
  --police-texte: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --graisse-titre: 700;
  --approche-titre: -.03em;
}

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

:root[data-duo="classique"] {
  --police-titre: "Lora", Georgia, "Times New Roman", serif;
  --police-texte: "Libre Franklin", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "Space Mono", ui-monospace, Menlo, monospace;
  --graisse-titre: 600;
  --approche-titre: -.01em;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--approche-titre);
  line-height: var(--interligne-serre);
  font-variation-settings: "wdth" var(--largeur-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: .06em;
  color: var(--accent-texte);
  display: block;
}

.sur-titre::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  vertical-align: middle;
  margin-right: 10px;
  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: 62ch;
}

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

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