/*
 * Jetons du système visuel « piste C — L'Antisèche ».
 * Source de vérité des couleurs, typographies et mesures du site.
 */
:root {
  /* Couleurs */
  --creme: #F5F0E7;          /* fond principal */
  --papier: #FBF8F2;         /* fiches, cartes, champs */
  --charbon: #2D2D2D;        /* texte, filets, boutons pleins */
  --bordeaux: #6E0F12;       /* À propos, Lire, cadres */
  --pervenche: #5563CC;      /* réservé à BIM! (fond, étiquette de nav) */
  --pervenche-texte: #4F5DC9;/* pervenche lisible sur crème */
  --corail: #F16C4D;         /* Voyager */
  --corail-texte: #B8432A;   /* corail lisible sur crème */
  --jaune: #F3C94E;          /* Lettres de Jo, surligneur */
  --gris-chaud: #CFC8BC;     /* texte secondaire sur charbon */
  --gris-texte: #5C5650;     /* texte secondaire sur crème */
  --gris-inactif: #8C857C;   /* onglets non sélectionnés */
  --sable: #E4DACB;          /* emplacements d'images à venir */
  --nuit: #1E2A4A;           /* fond de repli du carrousel des lettres */

  /* Typographies */
  --font-titre: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-texte: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-citation: 'Newsreader', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Mise en page */
  --largeur-max: 1280px;
  --gouttiere: 24px;          /* 16px sous 640px, voir base.css */
  --cible-tactile: 44px;
  --focus: 3px solid var(--pervenche);

  /* Mouvement — une seule échelle, réutilisée partout */
  --duree-courte: 180ms;
  --duree-moyenne: 420ms;
  --duree-longue: 700ms;
  --sortie: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 639px) {
  :root { --gouttiere: 16px; }
}

/* Titres : la condensée, toujours en 800 */
.titre {
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
}

/* Le surligneur : sur une phrase de texte courant, jamais sur un titre. Un par page. */
mark { background: var(--jaune); color: inherit; padding: 0 3px; }