/* Le Parc des Princes — tokens du site (Phase 2 de la refonte, 20 octobre 2026)
   Système calé sur les mesures de primefold.ai, adapté à la palette et aux polices de la marque.
   Couleurs dérivées = mélanges de deux couleurs de la palette ; contrastes calculés par contrast.py. */
:root{
  color-scheme:light; /* site de marque en thème clair unique, choix délibéré */
  /* Palette de la marque */
  --vert:#192B21; --cuivre:#A86536; --cuivre-texte:#9A5D32; --sable:#DABFA5; --ivoire:#F6F2EC;

  /* Rôles, thème clair (fond ivoire) */
  --bg:var(--ivoire);
  --surface:#F0E7DC;          /* sable 22 % sur ivoire — cartes, bandeaux de carte */
  --surface-strong:#E9DBCC;   /* sable 45 % sur ivoire — survol, piste des barres */
  --ink:var(--vert);          /* 13,37:1 sur ivoire, 12,17:1 sur surface */
  --ink-2:#57635A;            /* vert 72 % sur ivoire — texte courant secondaire, 5,66:1 / 5,16:1 */
  --ink-3:#767F76;            /* vert 58 % — contours de champ, éléments non textuels, 3,73:1 */
  --accent:var(--cuivre);     /* seul accent, réservé aux états : progression, actif, coche (4,11:1, élément graphique) */
  --accent-text:var(--cuivre-texte); /* petit texte d’accent sur ivoire seulement (4,72:1) */
  --ring:rgba(25,43,33,.12);  /* anneau d’1 px à la place des bordures */
  --ring-strong:rgba(25,43,33,.22);
  --scrim:linear-gradient(180deg,rgba(25,43,33,0) 35%,rgba(25,43,33,.78) 100%); /* ivoire dessus ≥ 5,9:1 */
  --glass:rgba(246,242,236,.72); /* barre flottante, ivoire 72 % + flou */

  /* Rôles, thème sombre (fond vert) */
  --dk-bg:var(--vert);
  --dk-surface:#2B3B31;       /* ivoire 8 % sur vert */
  --dk-ink:var(--ivoire);     /* 13,37:1 */
  --dk-ink-2:#B8BAB3;         /* ivoire 72 % sur vert, 7,62:1 / 6,07:1 */
  --dk-accent:var(--sable);   /* 8,50:1 */
  --dk-ring:rgba(246,242,236,.14);

  /* Typographie — Jost partout, Newsreader réservée au logo.
     Jost a une hauteur d’x de 0,46 em contre 0,55 em pour Inter (Primefold) :
     les textes sont agrandis de 2 px pour garder la même taille visible ; les titres gardent les mesures. */
  --font:"Jost","Helvetica Neue",Arial,sans-serif;
  --h1:400 64px/72px var(--font);    --h1-m:400 44px/52px var(--font);
  --h2:400 48px/56px var(--font);    --h2-m:400 32px/40px var(--font);
  --h3:400 32px/40px var(--font);    --h3-m:400 26px/32px var(--font);
  --h4:500 20px/28px var(--font);
  --lead:400 20px/28px var(--font);  /* 18/24 Inter */
  --body:400 16px/24px var(--font);  /* 14/20 Inter */
  --ui:500 16px/24px var(--font);    /* boutons, onglets */
  --small:400 14px/20px var(--font); /* 12/16 Inter : légendes, mentions */
  --eyebrow:500 15px/20px var(--font);
  --track-title:.01em;

  /* Espacements (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Conteneurs et grille */
  --max:1440px; --content:1280px; --measure:34em;
  --gutter:clamp(20px,5.56vw,80px);    /* 80 px à 1 440, 20 px sur mobile */
  --cols:12; --gap:24px;
  --section:clamp(80px,10.5vw,152px);  /* écart entre sections, 100–226 px chez Primefold */
  --section-tight:clamp(64px,7vw,100px);

  /* Rayons */
  --r-pill:999px; --r-card:24px; --r-media:44px; --r-inner:16px; --r-field:12px; --r-sm:8px;

  /* Ombres : anneau + ombre courte, jamais d’ombre portée large */
  --shadow-card:0 0 0 1px var(--ring),0 1px 2px rgba(25,43,33,.06);
  --shadow-float:0 0 0 1px var(--ring),0 2px 8px rgba(25,43,33,.08);

  /* Mouvement (mesuré sur la référence) */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-bg:.2s; --t-shadow:.3s; --t-press:.15s; --t-slide:.45s; --t-nav:.35s;
  --nav-h:72px;
}
@media (max-width:760px){ :root{ --gap:16px; --r-media:24px; --nav-h:64px; } }
@media (prefers-reduced-motion:reduce){ :root{ --t-bg:0s; --t-shadow:0s; --t-press:0s; --t-slide:0s; --t-nav:0s; } }