/* ==========================================================================
   GJS · TOKENS
   Toute valeur de design passe par ces variables. Aucune couleur en dur ailleurs.

   Palette (stricte) : crème #F4F0E8, noir doux #141414, vert citron #D4FF3A
   + 2 nuances dérivées (crème foncé pour les cartes, gris chaud pour le texte secondaire).

   Contrastes WCAG vérifiés (texte normal, seuil AA = 4,5:1) :
     noir   sur crème        16,2:1   noir   sur crème foncé  14,2:1
     noir   sur citron       15,9:1   crème  sur noir         16,2:1
     citron sur noir         15,9:1   crème foncé sur noir    14,2:1
     gris chaud sur crème     6,8:1   gris chaud sur crème foncé 6,0:1
     gris chaud sur citron    6,7:1
   INTERDIT : texte citron sur crème (1,02:1). Le citron sert de FOND, texte noir dessus.
   ========================================================================== */

/* Polices auto-hébergées (licence SIL OFL 1.1, voir /assets/fonts/OFL-*.txt). Aucun appel à un tiers. */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  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: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  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: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  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: "Poppins";
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  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;
}

/* Repli métriquement proche pendant le chargement (limite le décalage de mise en page). */
@font-face {
  font-family: "GJS Display Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Impact"), local("Arial Bold");
  size-adjust: 88%;
  ascent-override: 100%;
  descent-override: 30%;
}

@font-face {
  font-family: "GJS Text Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 112%;
  ascent-override: 93%;
  descent-override: 31%;
  line-gap-override: 9%;
}

:root {
  /* ---- Couleurs ------------------------------------------------------ */
  --cream: #F4F0E8;          /* fond */
  --cream-2: #E8E1D2;        /* dérivé : cartes, footer, ruban adhésif */
  --ink: #141414;            /* texte, bordures, ombres */
  --ink-2: #57524A;          /* dérivé : gris chaud, textes secondaires */
  --lime: #D4FF3A;           /* accent : fonds de boutons, badges, surlignage */

  /* Rôles (redéfinis par .is-dark pour les sections noires) */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --line: var(--ink);
  --card: var(--cream-2);
  --shadow-color: var(--ink);
  --focus: var(--ink);

  /* ---- Typographie : 2 polices, 5 tailles ----------------------------- */
  --font-display: "Bebas Neue", "GJS Display Fallback", Impact, "Arial Narrow", sans-serif;
  --font-text: "Poppins", "GJS Text Fallback", Arial, sans-serif;

  --fs-h1: clamp(3.5rem, 2.4rem + 5.6vw, 8rem);        /* 56 → 128 px */
  --fs-h2: clamp(2.75rem, 2.1rem + 3.2vw, 5rem);       /* 44 → 80 px */
  --fs-h3: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);   /* 28 → 36 px */
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17 → 18 px */
  --fs-small: 0.9375rem;                               /* 15 px */

  --lh-display: 0.92;
  --lh-body: 1.6;
  --measure: 65ch;

  /* ---- Espacements ----------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --s-section: clamp(80px, 2.5rem + 6vw, 144px);       /* ≥ 120 px desktop, ≥ 72 px mobile */
  --s-block: clamp(32px, 1.5rem + 2vw, 56px);
  --header-h: 72px;

  /* ---- Matière street -------------------------------------------------- */
  --border: 3px;
  --border-thin: 2px;
  --radius: 4px;
  /* Ombres dures : toujours écrites « Npx Npx 0 var(--shadow-color) » dans les composants,
     pour que la couleur suive le thème local (noir sur crème, citron ou crème sur noir). */
  --tilt-left: -3deg;
  --tilt-right: 2.5deg;

  /* ---- Motion (une seule animation : fondu + léger glissement, 0,4 s) --- */
  --dur: 0.4s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);       /* expo.out : le seul langage de mouvement */

  /* ---- Profondeurs ----------------------------------------------------- */
  --z-header: 100;
  --z-menu: 90;
  --z-cookies: 300;
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}

/* Sections noires (2 maximum par page) : crème sur noir, accents citron. */
.is-dark {
  --bg: var(--ink);
  --fg: var(--cream);
  --fg-2: var(--cream-2);
  --line: var(--cream);
  --card: var(--ink);
  --shadow-color: var(--lime);
  --focus: var(--lime);
  background-color: var(--bg);
  color: var(--fg);
}