/* ============================================================
   typo.css — l'échelle typographique de l'accueil, portée sur
   le reste du site.  Chargée après design.css.

   Pourquoi cette feuille existe : design.css force TOUS les titres
   du site en graisse 700 avec !important, et l'approche à -.014em.
   D'où la continuité d'épaisseur que Wilson reprochait : un h2 de
   46 px et un h3 de 19 px ont la même graisse, donc la page n'a
   pas de hiérarchie à l'oeil, seulement des tailles.

   Le principe, relevé sur l'accueil : une seule échelle, portée par
   la GRAISSE et la CHASSE plutôt que par la taille. Le grand titre
   est léger et serré, le petit titre est dense et ouvert. Et la
   graisse lourde ne se pose jamais sur une ligne entière : elle se
   pose sur le membre de phrase qui porte la promesse, à l'intérieur
   d'un titre léger — c'est l'accroche.

   Cantonnée à body:not(.page-home) : l'accueil a déjà son
   traitement, il ne faut pas le lui reprendre.
   Le héros est exclu : il ne change pas.
   ============================================================ */

/* --- 1. Les titres sortent de la graisse unique ---------------
   L'approche se resserre quand le corps grandit (mécanique relevée
   sur vercel.com : -.06 em sur un H1 de 64 px, nulle sous 20 px).
   La graisse descend quand le corps grandit (github.com : un H1 de
   64 px en 425 à côté d'un intertitre de 22 px en 600).            */

body:not(.page-home) main :where(h2):not(.hero *){
  font-weight:300!important;
  letter-spacing:-.035em!important}

/* Le corps du titre de chapitre. design.css les tient à 35 px au plus ;
   à cette taille la graisse 300 passe pour de la timidité plutôt que pour
   un parti pris. Sur l'accueil, ces titres font 46 à 62 px. Sans
   !important : les pages qui fixent leur propre échelle gardent la main. */
body:not(.page-home) main h2:not(.hero *){
  font-size:clamp(27px,3.3vw,42px)}

/* Le h3 vit souvent a deux doigts du corps de texte : 18 px contre 17,5.
   A graisse presque egale il ne se distingue plus, et la page perd sa
   hierarchie. On le tient plus dense que le h2, jamais jusqu'au gras. */
body:not(.page-home) main :where(h3):not(.hero *){
  font-weight:520!important;
  letter-spacing:-.028em!important}

body:not(.page-home) main :where(h4):not(.hero *){
  font-weight:580!important;
  letter-spacing:-.022em!important}

/* Les grands titres de section : plus légers encore, plus serrés. */
body:not(.page-home) main :where(.pz-xl,.pz-l):not(.hero *){
  font-weight:250!important;
  letter-spacing:-.045em!important}

/* --- 2. L'accroche -------------------------------------------
   Quelques mots en graisse lourde dans un titre léger. C'est ce
   qui remplace le gras généralisé : le gras ne disparaît pas, il
   se concentre là où il veut dire quelque chose.                  */

body:not(.page-home) main :where(h2,h3) b,
body:not(.page-home) main :where(h2,h3) strong{
  font-weight:700!important;
  letter-spacing:-.034em!important;
  /* L'approche serrée resserre aussi les blancs entre les mots, et à 35 px
     « étape par étape » finit par se lire d'un seul tenant. On resserre donc
     les lettres et on rend aux mots leur blanc. */
  word-spacing:.055em;
  color:inherit}

/* Sur les très grands titres, le corps absorbe une approche plus serrée :
   c'est là qu'elle devient un effet et non une gêne. */
body:not(.page-home) main :where(.pz-xl,.pz-l) b,
body:not(.page-home) main :where(.pz-xl,.pz-l) strong{
  letter-spacing:-.05em!important;
  word-spacing:.04em}

/* L'accroche dans un paragraphe : plus discrète que dans un titre,
   parce qu'elle vit au milieu d'un texte de lecture.               */
body:not(.page-home) main .acc{
  font-weight:680;
  letter-spacing:-.026em}

/* --- 3. Le texte courant --------------------------------------
   L'accueil resserre aussi le texte de -.004 em. Essayé ici, écarté :
   à 17 px cela vaut 0,07 px, donc invisible, alors que la règle
   écrasait l'approche ouverte des libellés en capitales monospace
   (-.004 em au lieu de +.16 em), qui est précisément ce qui les
   rend lisibles. Le texte courant reste donc tel qu'il est.
   ------------------------------------------------------------- */

/* --- 4. Rattrapage sur petit écran ----------------------------
   Sous 860 px les titres rapetissent ; à corps réduit, une graisse
   de 250 devient fantomatique. On la remonte, comme sur l'accueil. */

@media(max-width:860px){
  body:not(.page-home) main :where(h2):not(.hero *){font-weight:380!important}
  body:not(.page-home) main :where(h3):not(.hero *){font-weight:560!important}
  body:not(.page-home) main :where(.pz-xl,.pz-l):not(.hero *){font-weight:340!important}
}


/* --- le titre de heros, 2026-10-04 ---------------------------------------
   La typographie validee sur le modele C et sur le journal, portee sur les
   anciens heros. Elle ne vaut que par l ecart entre le maigre et le gras :
   le <b> a ete pose d abord, titre par titre.
   On nomme les anciens heros un par un plutot que de viser « main h1 » :
   les 5 pages en modele C et les 11 du journal gardent ainsi la leur, qui
   est deja juste, et la regle ne peut pas fuir sur un heros qu on ajouterait
   demain sans y penser. */
body:not(.page-home) main :is(.hero-grid,.hero-light,.hero-zone,.hero-contact) h1{
  font-weight:200!important;letter-spacing:-.038em!important;line-height:1.02!important}
body:not(.page-home) main :is(.hero-grid,.hero-light,.hero-zone,.hero-contact) h1 b{
  font-weight:640!important;letter-spacing:-.042em!important}
@media(max-width:860px){
  /* a 28 px la graisse 200 devient un fantome : on remonte, comme le socle. */
  body:not(.page-home) main :is(.hero-grid,.hero-light,.hero-zone,.hero-contact) h1{
    font-weight:340!important;letter-spacing:-.03em!important}
  body:not(.page-home) main :is(.hero-grid,.hero-light,.hero-zone,.hero-contact) h1 b{
    font-weight:700!important}}