/* Hexosol V4, charte « Seuil » : jetons du design system (docs/DESIGN.md).
   Seule source des couleurs, polices, tailles, espacements et courbes. Un composant ne lit que des rôles. */

/* Polices (woff2 Fontsource, plages dans brand/fonts/web/plages.json). Les sous-ensembles latin-ext sont
   déclarés AVANT les latin : à recouvrement égal (œ, diacritiques combinants), le navigateur prend la
   dernière règle, donc le fichier latin déjà préchargé. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/web/newsreader-var-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/web/hanken-grotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/web/newsreader-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  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: "Hanken Grotesk";
  src: url("/fonts/web/hanken-grotesk-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  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;
}

/* Polices de repli calées sur les métriques des vraies, pour limiter le décalage au chargement (CLS) */
@font-face {
  font-family: "Newsreader Repli";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Repli";
  src: local("Arial"), local("Helvetica");
  size-adjust: 98%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* Couleurs (§2) */
  --platre: #F5F4F1;
  --blanc: #FFFFFF;
  --lin: #E9E5DD;
  --encre: #1D2421;
  --gris-pierre: #5E645F;
  --filet: #D9D5CC;
  --sapin: #24413A;
  --sapin-profond: #182E29;
  --chene: #A97C50;
  --chene-clair: #D9BE9C;
  --succes: #2E6B4E;
  --erreur: #A33A2C;
  --lichen: #B8C4BE;          /* texte secondaire sur sapin (6,2:1) */
  --filet-sapin: #46605A;     /* filet sur sapin */

  /* Rôles (surchargés par les tons de section) */
  --fond: var(--platre);
  --surface: var(--blanc);
  --texte: var(--encre);
  --texte-2: var(--gris-pierre);
  --trait: var(--filet);
  --action: var(--sapin);
  --action-texte: var(--blanc);
  --action-survol: var(--sapin-profond);
  --lien: var(--sapin);
  --focus: var(--sapin);

  /* Typographie (§3) */
  --police-titre: "Newsreader", "Newsreader Repli", Georgia, "Times New Roman", serif;
  --police-texte: "Hanken Grotesk", "Hanken Repli", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-affiche: clamp(2.75rem, 1.833rem + 4.074vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.75rem + 2.222vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.583rem + 1.296vw, 2.75rem);
  --fs-h3: clamp(1.3125rem, 1.208rem + 0.463vw, 1.625rem);
  --fs-carte: clamp(1.1875rem, 1.146rem + 0.185vw, 1.3125rem);
  --fs-chapo: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
  --fs-texte: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);
  --fs-petit: 0.875rem;
  --fs-mini: 0.78125rem;
  --lh-titre: 1.1;
  --lh-texte: 1.6;
  --mesure: 68ch;             /* texte courant */
  --mesure-titre: 22ch;       /* titre d'affiche */

  /* Espacement (§4) : multiples de 4 px, rien en dur ailleurs */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --section-serree: clamp(3rem, 6vw, 5.5rem);
  --conteneur-max: 82.5rem;   /* 1320 px de contenu */
  --pad-panneau: var(--e-5);  /* padding intérieur des panneaux, --e-7 à partir de 1024 px */
  --gap-grille: var(--e-5);   /* colonnes des grilles, --e-6 à partir de 1024 px */
  --apres-entete: var(--e-7); /* entre un en-tête de section et son contenu, --e-8 à partir de 1024 px */
  --hauteur-champ: 3.25rem;   /* 52 px */
  --hauteur-compacte: 2.75rem; /* 44 px */
  --hauteur-entete: 4.5rem;

  /* Formes (§5) */
  --r-champ: 8px;
  --r-pilule: 999px;
  --ombre-flottante: 0 1px 2px rgb(29 36 33 / 0.06), 0 24px 48px -16px rgb(29 36 33 / 0.24);

  /* Mouvement (§5) */
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duree-retour: 160ms;
  --duree-etat: 240ms;
  --duree-entree: 600ms;

  /* Calques */
  --z-entete: 30;
  --z-menu: 40;
  --z-tiroir: 50;
  --z-evitement: 60;

  color-scheme: light;
}

@media (min-width: 64rem) {
  :root {
    --pad-panneau: var(--e-7);
    --gap-grille: var(--e-6);
    --apres-entete: var(--e-8);
  }
}

/* Tons de section : changent les rôles, jamais les composants */
.ton-blanc {
  --fond: var(--blanc);
  --surface: var(--platre);
}
.ton-lin {
  --fond: var(--lin);
  --surface: var(--blanc);
}
.ton-sapin {
  --fond: var(--sapin);
  --surface: var(--sapin-profond);
  --texte: var(--platre);
  --texte-2: var(--lichen);
  --trait: var(--filet-sapin);
  --action: var(--platre);
  --action-texte: var(--sapin);
  --action-survol: var(--blanc);
  --lien: var(--chene-clair);
  --focus: var(--chene-clair);
  color-scheme: dark;
}
.ton-platre,
.ton-blanc,
.ton-lin,
.ton-sapin {
  background-color: var(--fond);
  color: var(--texte);
}