/* =============================================================
   Audioguide Pompeii — typographie et tokens de couleur
   Polices auto-hébergées, variables, sous-ensemble FR + EN.
   Aucune requête externe. 94 Ko au total.
   ============================================================= */

/* --- 1. Polices ------------------------------------------------ */

/* Oswald — police de la charte, titres. OFL.            22,6 Ko */
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-var.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — substitution de FK Grotesk, interface et corps. OFL.  45,4 Ko */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible Next — mode « lisibilité renforcée ». OFL. 26,2 Ko
   Chargée uniquement si le visiteur active l'option (voir §4). */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-next-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Tokens ------------------------------------------------- */

:root {
  /* Familles */
  --police-titre:  'Oswald', 'Arial Narrow', sans-serif;
  --police-corps:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Couleurs — ratios mesurés en sRGB, formule WCAG 2.x */
  --creme:          #F4F1EA;  /* fond principal                        */
  --sable:          #E9D6B0;  /* surface secondaire                    */
  --encre:          #3D3D3D;  /* 9,63 sur crème · 7,61 sur sable (AAA) */
  --terracotta:     #C1440E;  /* MARQUE : aplats, filets, icônes,
                                 grands titres. JAMAIS de petit corps. */
  --terracotta-txt: #9E360A;  /* TEXTE accent : 6,24 sur crème,
                                 4,93 sur sable. AA partout.           */
  --blanc:          #FFFFFF;  /* 5,12 sur terracotta, 7,03 sur
                                 terracotta-txt (AAA)                  */

  /* Corps de texte : jamais de px figé, la taille système est respectée */
  --corps-base: 1rem;
  --corps-lg:   1.125rem;
}

/* --- 3. Application -------------------------------------------- */

body {
  font-family: var(--police-corps);
  font-size: var(--corps-base);
  line-height: 1.6;
  color: var(--encre);
  background: var(--creme);
  /* Inter : opsz suit la taille de rendu */
  font-optical-sizing: auto;
}

h1, h2, .titre-poste {
  font-family: var(--police-titre);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Numéro de poste : élément fonctionnel critique.
   Jamais en Oswald — chiffres condensés, 1/7 trop proches à distance. */
.numero-poste,
.champ-code,
.champ-code::placeholder {
  font-family: var(--police-corps);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
}

.champ-code {
  font-size: 1.75rem;      /* saisie confortable au pouce  */
  min-height: 3rem;        /* cible tactile ≥ 44 px        */
  padding: 0.5rem 0.75rem;
}

/* Texte accent : token distinct de la couleur de marque */
.accent        { color: var(--terracotta-txt); }
.surface-marque{ background: var(--terracotta); color: var(--blanc); }

/* --- 4. Mode lisibilité renforcée ------------------------------- */
/* Activé par le visiteur, mémorisé en localStorage.
   document.documentElement.dataset.lisibilite = 'renforcee' */

:root[data-lisibilite='renforcee'] {
  --police-corps: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --police-titre: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --corps-base: 1.125rem;
}

:root[data-lisibilite='renforcee'] body { line-height: 1.75; }

/* --- 5. Préférences système ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --encre: #1A1A1A; --terracotta-txt: #8A2E08; }
}