:root{
  /* Palette — 4 teintes, aucune autre couleur (charte v1) */
  --noir-intense:#151210;
  --blanc-casse:#F7F4F1;
  --rouge-cardinal:#C8102E;
  --gris-neutre:#454444;
  --noir-attenue:#4A4644; /* texte secondaire sur Blanc Cassé, dérivé du Noir Intense — pas une 5e couleur */

  /* Aliases sémantiques — thème clair (seul thème utilisé sur ce site pour l'instant) */
  --surface-page:var(--blanc-casse);
  --surface-card:var(--blanc-casse);
  --surface-inverse:var(--noir-intense);
  --surface-accent:var(--rouge-cardinal);
  --text-body:var(--noir-intense);
  --text-muted:var(--noir-attenue);
  --text-accent:var(--rouge-cardinal);
  --text-on-accent:var(--blanc-casse);
  --text-on-inverse:var(--blanc-casse);
  --border-hairline:rgb(21 18 16 / 0.14);
  --border-field:rgb(21 18 16 / 0.55); /* frontière de champ de saisie — 4,0:1 sur Blanc Cassé, conforme au seuil 3:1 de WCAG 1.4.11. Variante d'opacité du Noir Intense, pas une nouvelle couleur. */
  --border-strong:var(--noir-intense);
  --border-accent:var(--rouge-cardinal);
  --focus-ring:var(--rouge-cardinal);
  --overlay-scrim:rgb(21 18 16 / 0.72);
  --state-hover-ink:rgb(21 18 16 / 0.06);
  --state-press-ink:rgb(21 18 16 / 0.12);
  --accent-hover:color-mix(in srgb,var(--rouge-cardinal) 86%,var(--noir-intense));
  --accent-press:color-mix(in srgb,var(--rouge-cardinal) 74%,var(--noir-intense));
  --accent-wash:rgb(200 16 46 / 0.08);

  --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --weight-display:800;
  --weight-display-soft:700;
  --weight-body:400;
  --weight-body-medium:500;
  --weight-body-strong:600;

  --size-display-xl:clamp(40px, 24px + 4vw, 72px);
  --size-display:clamp(34px, 23px + 2.75vw, 56px);
  --size-h1:clamp(28px, 22px + 1.5vw, 40px);
  --size-h2:clamp(22px, 18px + 1vw, 30px);
  --size-h3:clamp(19px, 17px + 0.5vw, 23px);
  --size-h4:19px;
  --size-body-lg:19px;
  --size-body:17px;
  --size-body-sm:15px;
  --size-caption:13px;
  --size-mono:14px;

  --leading-display:1.04;
  --leading-title:1.14;
  --leading-body:1.55;
  --leading-tight:1.3;

  --tracking-display:-0.025em;
  --tracking-title:-0.015em;
  --tracking-body:0em;
  --tracking-caps:0.1em;

  --measure:62ch;
  --measure-narrow:46ch;

  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --space-10:128px; --space-11:176px;

  --gutter:32px;
  --gutter-lg:64px;
  --section-y:var(--space-9);
  --section-y-sm:var(--space-7);
  --container-max:1200px;
  --container-text:760px;

  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-pill:999px;

  --hairline:1px;
  --rule:1px;
  --border-emphasis:2px;
  --accent-bar:3px;

  --shadow-none:none;
  --ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);
  --separator:var(--hairline) solid var(--border-hairline);
  --frame:var(--hairline) solid var(--border-hairline);
  --frame-strong:var(--border-emphasis) solid var(--border-strong);

  --duration-instant:80ms;
  --duration-fast:140ms;
  --duration-base:200ms;
  --duration-slow:320ms;
  --ease-standard:cubic-bezier(0.2,0,0.2,1);
  --ease-out:cubic-bezier(0,0,0.2,1);
  --ease-in:cubic-bezier(0.4,0,1,1);
  --translate-enter:8px;
  --press-scale:0.985;
  --transition-ui:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-instant:0ms;--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--translate-enter:0px;--press-scale:1}
}

/* Ajout tâche 2a */
:root{
  /* Anneau de focus lisible pour un élément interactif posé sur fond sombre :
     l'anneau rouge par défaut (--ring-focus) n'y est pas assez contrasté.
     Dérivé des couleurs déjà validées — pas une 5e couleur. */
  --ring-focus-on-dark:0 0 0 2px var(--surface-inverse),0 0 0 4px var(--blanc-casse);
}