/* Brand tokens (source: brand/README.md) and the two themes.
 *
 * Two typographic systems, deliberately distinct. Optima and Didot are the
 * BRAND faces: commercial, they stay at the studio and are only ever burned
 * into exported images (covers, banners). The SITE is served Playfair Display
 * and Source Sans 3, both SIL OFL, chosen by Patrice on specimen sheets in
 * Claude Design (2026-08-01). Only the latter pair ships here — 114 KB for the
 * six files, subset to latin, which covers French including the œ ligature.
 *
 * The brand faces stay at the end of each stack: a visitor who happens to own
 * Optima is not the reason the stack exists, but there is no cost to it.
 */

@font-face {
  font-family: 'Playfair Display';
  src: url('polices/playfair-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('polices/playfair-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('polices/playfair-display-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('polices/source-sans-3-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('polices/source-sans-3-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('polices/source-sans-3-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --nuit: #15151a;
  --or: #d4af37;
  --or-facettes: #8c6f12;
  --or-fonce: #b8860b;
  --bleu: #5c8ae6;
  /* Le bleu de marque tient largement pour un FILET ou un contour de focus
   * (3,2:1 ≥ 3:1, le seuil du non-texte), mais pas pour l'étiquette d'un
   * callout à 11 px sur fond clair. Même dispositif que --accent, qui vaut
   * --or-facettes en clair et --or en nuit : la version foncée monte à 4,9:1
   * et la nuit reprend le bleu de marque, déjà à 5,4:1. */
  --bleu-texte: #3f6bc4;
  --blanc-casse: #f5f2e8;

  --fond: #fbf9f3;
  --texte: var(--nuit);
  --texte-doux: #55555f;
  /* Facet gold, not --or-fonce: the accent colours links and lexicon markers,
   * and #b8860b only reaches 3.1:1 on this background — below WCAG AA. Facet
   * gold is a brand token too, and clears the bar at 4.5:1. */
  --accent: var(--or-facettes);
  --surface: #ffffff;
  --filet: #e2ddd0;

  /* "À retenir" is the cognitive anchor, 14 times over. It used to be a night
   * block, which competed with the chapter banners when the edition is read in
   * one scroll: two dark masses, the wrong one shouting. It now works without
   * any fill — gold rules above and below, and the body shifting to Playfair
   * italic. The change of voice reads as an aside; the value stays light. */
  --retenir-filet: var(--or-facettes);
  --retenir-filet-bas: rgba(140, 111, 18, 0.28);

  /* A surface lifted off the page background. Only the night theme needs it —
   * on a light page the raised surface IS --blanc-casse. Used by the chapter
   * strip on the home page, which previously borrowed the "À retenir" fill,
   * a token that no longer exists now that the callout carries none. */
  --surface-haute: var(--blanc-casse);

  --mesure: 34rem;
  --large: 68rem;
  --font-titre: 'Playfair Display', 'Didot', Georgia, serif;
  --font-texte: 'Source Sans 3', 'Optima', 'Avenir Next', system-ui, sans-serif;

  /* Night chrome. The header, the hero, the pull quote and the footer stay dark
   * in BOTH themes: it is the brand's signature, and a washed-out white hero
   * would be a step backwards. Only the reading sections follow the toggle,
   * which is why these five are fixed values rather than themed tokens.
   *
   * All four chrome surfaces take --nuit-profonde. --nuit is the night theme's
   * --fond, so chrome painted with it would be indistinguishable from the
   * reading bands once the toggle is dark. */
  --nuit-profonde: #0e0e12;
  --nuit-texte: var(--blanc-casse);
  --nuit-doux: #a8a497;
  --nuit-filet: #32323c;
  --nuit-efface: #55555f;
}

/* The measure grows with the screen. 34rem suits a phone; holding a laptop to
 * the same column wastes most of the window and makes a 13 000-word edition
 * scroll forever. 44rem lands near 75 characters — still inside the comfortable
 * range, and noticeably less scrolling to proofread. */
@media (min-width: 56rem) {
  :root {
    --mesure: 39rem;
  }
}

@media (min-width: 78rem) {
  :root {
    --mesure: 44rem;
  }
}

/* The manual toggle must win in both directions, hence :not([data-theme]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fond: var(--nuit);
    --texte: var(--blanc-casse);
    --texte-doux: #a8a497;
    --accent: var(--or);
    --bleu-texte: var(--bleu);
    --surface: #1d1d24;
    --filet: #32323c;
    --retenir-filet: var(--or);
    --retenir-filet-bas: rgba(212, 175, 55, 0.3);
    --surface-haute: #24242e;
  }
}

:root[data-theme='dark'] {
  --fond: var(--nuit);
  --texte: var(--blanc-casse);
  --texte-doux: #a8a497;
  --accent: var(--or);
  --bleu-texte: var(--bleu);
  --surface: #1d1d24;
  --filet: #32323c;
  --retenir-filet: var(--or);
  --retenir-filet-bas: rgba(212, 175, 55, 0.3);
  --surface-haute: #24242e;
}