/* ══════════════════════════════════════════════════════════════════════
   BUNBOX — système typographique.

   Avant : aucune police web. Le titre s'affichait en « Iowan Old Style »,
   qui n'existe QUE sur les appareils Apple — la marque n'avait donc pas de
   visage stable, elle changeait selon le téléphone. C'est le signal le plus
   visible d'un produit fait maison.

   Deux familles VARIABLES, auto-hébergées, licence libre (OFL) :

   · FRAUNCES pour les titres. Serif à axes rares :
       opsz  — taille optique : les grands titres prennent un dessin contrasté
               et fin, les petits un dessin robuste. Un vrai typographe faisait
               ça à la main il y a un siècle ; ici c'est automatique.
       SOFT  — arrondit les angles. On l'ouvre un peu : ce produit parle
               d'affection, pas de finance.
       WONK  — bascule certaines lettres vers des formes plus manuscrites.
               Réservé aux TRÈS grands corps, à dose homéopathique : c'est ce
               qui fait qu'on sent une main derrière, sans que ça se remarque.

   · INSTRUMENT SANS pour le texte et l'interface. Contemporaine, un rien
     décalée, elle tient la lecture sans jamais voler la vedette au serif.

   Une seule fabrication par famille couvre toutes les graisses.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2?v=1') format('woff2');
  font-weight: 300 900;
  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: 'Fraunces';
  src: url('/fonts/fraunces-latin-ext.woff2?v=1') format('woff2');
  font-weight: 300 900;
  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: 'Instrument Sans';
  src: url('/fonts/instrument-latin.woff2?v=1') format('woff2');
  font-weight: 400 700;
  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: 'Instrument Sans';
  src: url('/fonts/instrument-latin-ext.woff2?v=1') format('woff2');
  font-weight: 400 700;
  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;
}

:root {
  /* Familles. Le repli reste digne si la police tarde ou échoue. */
  --bx-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --bx-texte: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide. Avant, les tailles étaient posées au hasard ; ici chaque
     cran découle du précédent et respire avec la largeur de l'écran. */
  --t-micro: clamp(0.69rem, 0.66rem + 0.15vw, 0.75rem);
  --t-petit: clamp(0.81rem, 0.78rem + 0.16vw, 0.88rem);
  --t-base:  clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem);
  --t-moyen: clamp(1.12rem, 1.05rem + 0.34vw, 1.28rem);
  --t-grand: clamp(1.45rem, 1.28rem + 0.85vw, 1.85rem);
  --t-titre: clamp(2rem, 1.6rem + 2vw, 2.9rem);

  /* Interlignes explicites : l'audit a montré « normal » un peu partout,
     ce qui laisse le navigateur décider — et il décide mal sur les titres. */
  --i-serre: 1.06;
  --i-titre: 1.14;
  --i-texte: 1.58;

  /* Échelle d'espacement sur 4. Avant : 3, 6, 8, 10, 12, 14, 16, 18 px
     employés à parts égales — d'où cette impression de « presque juste ». */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
}

/* La taille optique fait son travail sur tous les titres. */
h1, h2, h3, .bx-display { font-optical-sizing: auto; }

/* Réglages de la police variable, par usage.
   Les très grands titres reçoivent une pointe de WONK — c'est le détail qui
   se sent sans se voir. Le texte courant n'y touche pas. */
.bx-t-titre {
  font-family: var(--bx-display);
  font-size: var(--t-titre);
  line-height: var(--i-serre);
  font-weight: 700;
  font-variation-settings: 'SOFT' 42, 'WONK' 1;
  letter-spacing: -0.018em;
}
.bx-t-grand {
  font-family: var(--bx-display);
  font-size: var(--t-grand);
  line-height: var(--i-titre);
  font-weight: 650;
  font-variation-settings: 'SOFT' 30, 'WONK' 0;
  letter-spacing: -0.012em;
}
.bx-t-moyen {
  font-family: var(--bx-display);
  font-size: var(--t-moyen);
  line-height: var(--i-titre);
  font-weight: 600;
  font-variation-settings: 'SOFT' 22, 'WONK' 0;
  letter-spacing: -0.006em;
}

/* Petites capitales d'étiquetage : lisibles seulement si on les aère. */
.bx-t-etiquette {
  font-family: var(--bx-texte);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Chiffres alignés partout où l'on compare des nombres (jauge, compte à
   rebours, jour X/30) : sinon les colonnes dansent. */
.bx-chiffres, .daychip, .gauge, #cd, #g-pts, #g-goal {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}