/* ------------------------------------------------------------------
   tokens.css — polices, palette, échelle, socle typographique.
   SEUL fichier où vivent les couleurs. Une seule teinte d'accent,
   déclinée en alphas : c'est cette discipline qui fait le premium.
   ------------------------------------------------------------------ */

/* Playfair Display droit, graisse 700 : un seul fichier, instance fixe (23 Ko).
   L'italique 900 des v16-v17 était beau mais se lisait mal : remplacé le 22/09. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* L'italique, en graisse 500 : seulement pour les deux phrases sous le schéma */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;

  /* --- Palette --- */
  --ink: #060b12;
  --deep: #0b1622;
  --card: #0f1d2b;
  --border: #1b2e3f;
  --gold: #c8a75b;
  --gold-mid: #d9bc77;
  --gold-bright: #ebd49b;
  --gold-deep: #a8873f;
  --teal: #4a9b8e;
  --muted: #6b8294;
  --soft: #9db2c2;
  --white: #ffffff;

  /* Les mêmes teintes en canaux, pour les décliner en alphas sans jamais les réécrire */
  --gold-rgb: 200 167 91;
  --teal-rgb: 74 155 142;
  --soft-rgb: 157 178 194;
  --muted-rgb: 107 130 148;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --ink-rgb: 6 11 18;
  --deep-rgb: 11 22 34;
  --card-rgb: 15 29 43;
  --alert-rgb: 255 100 100;

  /* --- Texte --- */
  --text-title: var(--white);
  /* 0,65 et non 0,5 : le lecteur a plus de 45 ans et lit souvent dehors */
  --text-body: rgb(var(--white-rgb) / 0.65);
  /* Le tertiaire à 0,4 ne passe AA qu'en grand corps : en petit, on prend --muted ou --soft */
  --text-faint: rgb(var(--white-rgb) / 0.4);
  --text-small: var(--soft);

  /* --- Familles --- */
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-label: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Échelle fluide (en rem : elle suit le réglage de taille du lecteur) --- */
  --fs-cta: clamp(2rem, 4.4vw, 3.5rem);
  --fs-h2: clamp(2rem, 5vw, 4rem);
  --fs-h1-a: clamp(1.75rem, 3.6vw, 3.25rem);
  --fs-h1-b: clamp(1.25rem, 3.2vw, 2.75rem);
  --fs-chapeau: 1.0625rem;
  --fs-card-title: 0.9375rem;
  --fs-card-body: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-legend: 0.6875rem;
  /* Les sources sont les seules preuves de la page : jamais sous 13 px */
  --fs-source: 0.8125rem;

  /* --- Rythme et largeurs --- */
  --gutter: 32px;
  --section-y: 100px;
  --head-gap: 72px;
  --w-page: 1100px;
  --w-read: 760px;
  --nav-h: 64px;

  /* Dessins servant de masques : la couleur vient toujours d'un token */
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.4 3.4L15.5 6.5'/%3E%3C/svg%3E");
  --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-accordion: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-y: 72px;
    --head-gap: 40px;
    --nav-h: 56px;
  }
}

/* Sous 600 px les légendes remontent d'un cran : elles doivent rester lisibles */
@media (max-width: 599px) {
  :root {
    --fs-legend: 0.75rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

[hidden] {
  display: none !important;
}

::selection {
  background: rgb(var(--gold-rgb) / 0.35);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Un mot composé qui ne doit jamais se couper à son trait d'union */
.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}