:root {
  --color-text: #111111;
  --color-text-secondary: #666666;
  --color-background: #ffffff;

  /* Fond du splash uniquement (site/index.html). Bleu pur, repris du
     BGCOLOR="#00F" de l'ancien index.php. */
  --color-splash-background: #00FFFF;
  --color-border: #cccccc;

  /* Les liens du site n'ont qu'une seule paire de couleurs : bleu au repos,
     violet au survol. Le menu utilise la même — changer ces deux lignes
     change la couleur de TOUS les liens du site, menu compris. */
  --color-link: #0433FF;
  --color-link-hover: #942192;

  /* Passages en anglais (class="eng" dans les articles). Volontairement dans
     la même famille que le survol des liens. */
  --color-eng: #942192;

  /* Le menu suit la couleur de lien générale. */
  --color-menu-link: var(--color-link);
  --color-menu-link-hover: var(--color-link-hover);

  /* Pile reprise de la version NEWS : Helvetica y figure entre Helvetica Neue
     et Arial. Sans elle, les systèmes qui n'ont que l'Helvetica classique
     retombaient directement sur Arial, plus étroite et plus contrastée. */
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Réglages typographiques repris de NEWS (NEWS/css/style.css, body).
     Appliqués sur body dans main.css. */
  --font-weight-body: 300;
  --letter-spacing-body: 0.02em;
  --line-height-body: 1.7;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
}

/* Base de la typo : 1rem = cette taille. Toutes les tailles du site
   (--font-size-*, --spacing-*, et tout ce qui est écrit en rem) sont
   proportionnées à cette seule valeur — changer ici change tout le
   site de façon cohérente. */
html {
  /* 93.75% de 16px = 15px, la taille de base de NEWS. Passer par la base rem
     plutôt que par une taille en dur sur body : tout le site est écrit en rem,
     donc cette seule valeur re-proportionne l'ensemble de façon cohérente. */
  font-size: 93.75%;
}

@media (max-width: 768px) {
  html {
    font-size: 87.5%; /* réduit toute la typo en rem proportionnellement sur mobile */
  }
}