:root {
  /* Couleurs — charte graphique */
  --red: #CC0000;
  --red-hover: #A50000;
  --red-pressed: #3E3E3E;
  --white: #FFFFFF;
  --beige: #FFE3BE;
  --black-elegant: #0D0D0D;
  --black: #000000;
  --surface: #181515;
  --disabled-bg: #E5DDDD;
  --disabled-text: #A0A0A0;
  --error-bg: #FFC8C8;
  --valid-bg: #C2FFBE;
  --valid-text: #2E7D32;
  --muted: #A0A0A0;
  --font-sans: circe, "Avenir Next", Avenir, "Century Gothic", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-display: "the-seasons", Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", serif;
  /* Espacements — base 8px */
  --u1: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u6: 48px;
  --u8: 64px;
  --u12: 96px;
  --u16: 128px;
  --u20: 160px;
  /* Layout */
  --container: 1280px;
  /* --- Surtitres et titres de section -------------------------------------
   Le couple qui ouvre chaque écran : un surtitre rouge en capitales, puis le
   titre. Ils étaient réglés page par page — de 11 à 17 px, de 300 à 700 de
   graisse, de 0,01 à 0,22em d'interlettrage — et le rapport entre les deux
   changeait d'une rubrique à l'autre.
   Un surtitre se tient par son INTERLETTRAGE avant sa taille : trop serré, il
   ne se lit plus comme une étiquette mais comme une phrase en capitales
   écrasée sous le titre. Et un titre en capitales n'a pas besoin de gras à
   44 px : c'est la taille qui le porte, le gras n'en fait qu'un bloc compact.
   D'où ce rapport : un surtitre dense et ouvert, un titre large et léger. Le
   surtitre est donc PLUS GRAS que le titre — c'est voulu, et c'est ce qui
   tient l'équilibre. */
  --surtitre-taille: clamp(1rem, 1.3vw, 1.1875rem);
  --surtitre-graisse: 600;
  --surtitre-lettrage: 0.18em;
  --titre-graisse: 500;
  --titre-lettrage: 0.02em;
  --gutter: var(--u3);
  /* Doit rester au-dessus de --logo-fleur x 1.838 (la boîte du logo
     Professional, la plus haute). Voir components.css. */
  --header-h: 88px;
  --hero-h: calc(100svh - var(--header-h));
  --radius-btn: 10px;
  --radius-media: 16px;
  --focus-ring: 0 0 0 3px var(--beige);
  /* Transitions */
  --ease: 0.2s ease;
  --cursor-default: url("../images/cursors/connivence-motif-32.png") 16 16, auto;
  --cursor-pointer: url("../images/cursors/connivence-motif-rouge-32.png") 16 16, pointer;
}

@supports (cursor: image-set(url("../images/cursors/connivence-motif-32.png") 1x) 16 16, auto) {
  :root {
    --cursor-default: image-set(
        url("../images/cursors/connivence-motif-32.png") 1x,
        url("../images/cursors/connivence-motif-64.png") 2x) 16 16, auto;
    --cursor-pointer: image-set(
        url("../images/cursors/connivence-motif-rouge-32.png") 1x,
        url("../images/cursors/connivence-motif-rouge-64.png") 2x) 16 16, pointer;
  }
}