/* ═══ Titres en Fraunces ══════════════════════════════════════════════════════
 *
 * Étend aux articles la typographie mise au point sur l'accueil : le serif
 * porte la voix, le sans porte la mécanique. Passent donc au serif le titre
 * de l'article, les titres de section, les questions de la FAQ et le titre du
 * bloc « pour aller plus loin ». Restent en Inter la navigation, les boutons,
 * le fil d'Ariane, les mentions et tout le corps de texte.
 *
 * Feuille partagée : une seule source pour les trente pages, et un seul
 * fichier mis en cache par le navigateur.
 *
 * L'URL de la police est identique à celle de l'accueil, à la lettre près,
 * pour que le fichier déjà téléchargé soit réutilisé au lieu d'être repris.
 *
 * Les réglages ne sont pas décoratifs : un serif à 600 pèse optiquement moins
 * qu'un Inter à 800, et l'interlettrage serré calibré pour le sans étrangle le
 * serif. D'où le poids 600 et un tracking presque nul.
 */

h1,
article h2,
article h3,
.faq-q,
.related-heading {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* Le titre principal respire un peu moins : un serif de grande taille a besoin
   d'un interligne plus serré que le sans pour rester compact. */
h1 { line-height: 1.08 !important; }

/* Les questions de la FAQ gardent leur taille d'interface mais passent au
   serif : sans le cran de graisse, elles s'effaceraient face aux réponses. */
.faq-q { font-weight: 600 !important; }

/* La maquette d'application et les éléments d'interface restent de l'interface. */
.s-tab-text h3,
.s-tab-text h4,
nav h1, nav h2, nav h3 {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ═══ Encadrés « À retenir » ══════════════════════════════════════════════════
 *
 * Deux défauts corrigés ici plutôt que dans les 34 pages concernées.
 *
 * Le titre de l'encadré était une micro-étiquette en capitales de 0,75 rem —
 * la signature des maquettes générées. Au milieu de titres en serif, il jurait.
 * Il redevient un vrai titre, dans la même police que les autres.
 *
 * Et les intitulés en début de ligne — « Collègue », « Famille proche » —
 * héritaient de la taille du texte courant : trop petits pour jouer le rôle
 * d'étiquette qu'on attend d'eux. Ils gagnent un cran et l'encre pleine.
 *
 * `!important` est ici indispensable, et non un raccourci. Chaque page
 * redéfinit `.resume-box > strong` dans son propre <style>, à spécificité
 * égale et plus bas dans le document : sans lui, la page l'emporte. Seule la
 * police passait alors, et le titre restait une micro-étiquette en capitales
 * espacées — un serif de 0,68 rem tout en majuscules au-dessus d'une liste en
 * Inter, ce qui se lisait comme un mélange de polices raté.
 *
 * La couleur, elle, reste sans `!important` : les pages en thème clair la
 * fixent volontairement, et il n'y a pas de raison de leur passer devant.
 */
.resume-box > strong {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--text);
  margin-bottom: 12px;
}

/*
 * Les pages ciblent `.resume-box strong` en descendant, et non en enfant
 * direct : la règle destinée au titre de l'encadré retombe donc aussi sur les
 * intitulés places DANS les puces. Ils héritaient d'un interlettrage de 2 px
 * et des capitales prévus pour une étiquette — au milieu d'une phrase, un
 * « Application recommandée : » ainsi étiré se lit comme un défaut de police.
 *
 * Ce sont des mots de phrase : ils reprennent donc la mise en lettres du
 * texte courant, et ne gardent que l'encre pleine qui les distingue.
 */
.resume-box ul li strong {
  font-size: 1.02em;      /* relatif : suit la taille de la ligne */
  font-weight: 700;
  color: var(--text);
  letter-spacing: normal !important;
  text-transform: none !important;
}