/* J2A Activewear : tokens de design (plan §4). À reporter tels quels dans assets/j2a-tokens.css du thème. */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Repli aux métriques proches pour limiter le saut de mise en page au chargement */
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 24%;
}

:root {
  /* Couleurs (échantillonnées dans les visuels de la marque) */
  --blanc: #ffffff;
  --marine: #1a2238;
  --pierre: #ece6df;
  --ardoise: #5a6072;
  --or: #a9803f;
  --or-clair: #c9a66b;
  --erreur: #b3261e;
  --trait: #d9d2c9;
  --trait-ui: #8d8578;
  --voile: rgb(26 34 56 / 0.4);
  --marine-doux: #2a3350;     /* survol des boutons marine */
  --pierre-fonce: #e2dad1;    /* survol des tuiles pierre */

  /* Typographie : une seule famille, la largeur fait le reste */
  --font: "Mona Sans", "Mona Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-lockup: clamp(56px, 14vw, 200px);
  --fs-section: clamp(32px, 5vw, 64px);
  --fs-h1: clamp(28px, 1.4vw + 22px, 40px);
  --fs-h2: clamp(22px, 0.6vw + 19px, 28px);
  --fs-card: clamp(15px, 0.1vw + 14.6px, 16px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-button: 15px;

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

  /* Formes : selon la hiérarchie */
  --r-pilule: 999px;
  --r-champ: 4px;
  --r-feuille: 12px;
  --r-badge: 2px;

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-micro: 160ms;
  --d-tiroir: 280ms;

  /* Gabarit */
  --bar-h: 36px;
  --header-h: 56px;
  --liseré: 2px;
}

@media (min-width: 768px) {
  :root { --marge: 32px; --gouttiere: 16px; --section: 80px; --header-h: 64px; }
}
@media (min-width: 1200px) {
  :root { --marge: 48px; --gouttiere: 24px; --section: 112px; --header-h: 72px; }
}