/* ============================================================
   REPTHOCI.NET — Typographie
   Chargé APRÈS le bloc <style> de chaque page : ces règles ont donc le
   dernier mot sur la police, sans qu'il faille toucher au CSS existant.

   POURQUOI
   Tout le site était composé dans la police système du visiteur
   (-apple-system, Segoe UI, Roboto…). Techniquement irréprochable, mais
   c'est aussi ce qui donne à un site l'air d'une maquette : aucune identité,
   et un rendu différent sur chaque appareil.

   LE COUPLE RETENU
   - Titres : « Mollen », une linéale géométrique d'Eko Bimantara, nette et
     contemporaine. Auto-hébergée (voir css/mollen.css), elle remplace
     Fraunces, qui donnait au site une tonalité plus classique.
   - Texte  : « Inter », dessinée pour l'écran, très lisible en petit corps,
     excellente couverture des caractères français. Servie par Google Fonts.

   POURQUOI PAS MOLLEN DANS LE CORPS DE TEXTE
   Sa hauteur d'x vaut 0,487 em, contre 0,727 pour Inter : à 16 px, ses
   minuscules sont près d'un tiers plus petites. Superbe en titre, fatigante
   sur un article de deux mille signes. Son zéro et son O sont par ailleurs
   deux cercles identiques, gênant pour les numéros de téléphone et les
   sigles (FNIH-CI, +225 01 02 03) qui peuplent l'annuaire.

   REPLI
   Si les polices ne se chargent pas (réseau lent, coupure du CDN), la pile
   retombe sur les polices système : la page reste lisible, seule l'identité
   se perd. Pour les titres, la famille « Mollen Repli » (css/mollen.css)
   aligne d'abord les métriques d'une police système sur celles de Mollen,
   pour que la bascule ne fasse pas sauter la mise en page.

   POUR CHANGER DE POLICE
   Les deux variables ci-dessous suffisent : tout le reste du fichier s'y
   réfère, et aucune autre feuille ne nomme une police de titre.
   ============================================================ */

:root {
    --font-titre: 'Mollen', 'Mollen Repli', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Variante étroite, pour les libellés courts : menus, étiquettes de
       rubrique, fils d'Ariane. C'est ce que Fraunces ne savait pas faire. */
    --font-affiche: 'Mollen Condensed', 'Mollen', 'Mollen Repli',
                    -apple-system, 'Segoe UI', Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-texte);
}

/* Chiffres de même largeur dans les compteurs, tableaux et statistiques :
   sans cela une valeur qui s'incrémente fait « sauter » la mise en page. */
body {
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Le texte courant reprend les chiffres proportionnels, plus harmonieux
   au milieu d'une phrase. */
p, li, blockquote {
    font-variant-numeric: normal;
}

h1, h2, h3, h4,
.hero-inner h1,
.section-title,
.card-title,
.modal-title,
.article-title,
.logo-text {
    font-family: var(--font-titre);
    letter-spacing: -0.011em;
}

/* Mollen est une géométrique à bas de casse court : aux grandes tailles,
   un interlignage serré et un léger resserrement évitent que les titres
   ne paraissent délités. */
h1, .hero-inner h1 {
    line-height: 1.1;
    letter-spacing: -0.022em;
}

h2 { line-height: 1.2; }

/* Boutons, champs et en-têtes de tableau restent dans la police de texte :
   ce sont des éléments qu'on lit en petit corps, où la hauteur d'x basse
   de Mollen jouerait contre la lisibilité. */
button,
.btn,
.fchip,
th {
    font-family: var(--font-texte);
    letter-spacing: 0;
}

/* Confort de lecture des articles et des fiches : une mesure trop large
   fatigue l'œil, un interlignage trop serré aussi. */
.article-content {
    font-family: var(--font-texte);
    line-height: 1.75;
}

.article-content h2,
.article-content h3 {
    font-family: var(--font-titre);
    margin-top: 1.6em;
}

.article-content p + p {
    margin-top: 1.05em;
}

/* Chapeau d'article et sous-titres de héros : intermédiaire entre le titre
   et le texte. Avec une géométrique, l'italique penché fait « publicité »
   là où une antique faisait « édition » : on garde donc Mollen droit, en
   graisse légère et un peu desserré, pour marquer la respiration. */
.hero-inner .subtitle,
.article-resume,
.lead {
    font-family: var(--font-titre);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.002em;
}

/* ── Libellés courts en variante étroite ──────────────────────
   Le condensé n'a de sens que sur des libellés brefs et en capitales :
   employé sur une phrase, il devient illisible. */
.cat-chip,
.month-pill,
.breadcrumb,
.section-eyebrow,
.tag,
.badge,
.nav-links > a {
    font-family: var(--font-affiche);
    font-weight: 600;
    letter-spacing: 0.015em;
}

/* Les étiquettes de rubrique sont déjà en capitales dans le balisage :
   le condensé y gagne encore en tenue avec un interlettrage ouvert. */
.section-eyebrow,
.tag {
    letter-spacing: 0.06em;
}

/* Le visiteur qui a demandé moins d'animations n'est pas concerné ici,
   mais celui qui grossit le texte de son navigateur doit rester servi :
   aucune taille n'est figée en pixels dans ce fichier. */