/* Articles du blog : marges, en-tête et polices de repli (tools/corriger_articles_blog.py, 2026-09-29).
   Les règles en ligne de chaque article (.article-container en « padding: 60px 0 », en-tête sans
   marge, hauteur fixe de 450 px) collaient le texte aux bords de l'écran et glissaient la date
   sous le menu fixe (80 px). Sélecteurs plus précis que ceux en ligne : cette feuille l'emporte
   quel que soit l'ordre de chargement. */

/* 1. Colonne de lecture : 800 px de texte sur ordinateur (comme avant), 20 px de marge sur téléphone. */
main .article-container {
  max-width: 840px;
  padding-left: 20px;
  padding-right: 20px;
}

/* 2. En-tête : aligné sur la colonne de lecture, jamais sous le menu fixe. */
main .article-hero {
  height: auto;
  min-height: 450px;
  display: flex;
  flex-direction: column;
}
.article-hero .article-hero-content {
  flex: 1 1 auto;
  height: auto;
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 96px;
  padding-left: 20px;
  padding-right: 20px;
}
/* Le fil d'Ariane est centré par la feuille principale (en-têtes centrés des autres pages) ;
   ici, tout l'en-tête est aligné à gauche : il suit le titre. */
.article-hero .breadcrumb {
  justify-content: flex-start;
}
/* Les icônes (Font Awesome, chargé en différé) n'ont aucune largeur avant leur police : à son
   arrivée, date, auteur et fil d'Ariane s'écartaient et la ligne pouvait se recouper. Leur
   place est réservée d'emblée (même largeur que la classe « fa-fw » de Font Awesome). */
.article-hero .article-meta i,
.article-hero .breadcrumb i {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
/* Le titre et le chapeau héritaient du bleu marine des titres (h1) et du gris des paragraphes :
   illisibles sur la photo voilée de marine, alors que la date et le fil d'Ariane sont blancs.
   Même défaut dans l'encadré marine de fin d'article : son paragraphe était gris sur marine. */
.article-hero .article-title,
.article-hero .article-excerpt,
.article-content .cta-article p {
  color: var(--white);
}

/* 3. Polices de repli à la largeur des polices de la marque, graisse par graisse. Rapports de
   largeur mesurés le 2026-09-29 sur le texte des articles (police de la marque / repli) :
   Raleway 300 1,021 · 400 1,033 · 500 1,046 (Arial) · 600 0,992 · 700 1,003 (Arial Bold) ;
   Playfair Display 400 1,001 (Georgia) · 600 0,880 · 700 0,888 (Georgia Bold).
   Mises à l'échelle, les polices de repli occupent la même largeur : à l'arrivée des polices
   de la marque, les lignes ne se recoupent plus et le texte ne saute plus. Absentes (Android),
   elles laissent la pile d'origine. */
@font-face { font-family: 'Raleway Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 300; size-adjust: 102.1%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400; size-adjust: 103.3%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 500; size-adjust: 104.6%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600; size-adjust: 99.2%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700 900; size-adjust: 100.3%; }
@font-face { font-family: 'Playfair Fallback'; src: local('Georgia'); font-weight: 100 500; size-adjust: 100.1%; }
@font-face { font-family: 'Playfair Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 600; size-adjust: 88%; }
@font-face { font-family: 'Playfair Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 700 900; size-adjust: 88.8%; }
/* 4. Polices de la marque, déclarées ici plutôt que par la feuille de Google chargée en différé :
   connues dès le premier affichage et préchargées dans l'en-tête des articles. Même mise à
   l'échelle, les coupures de lignes d'un grand titre peuvent différer d'une police à l'autre
   (0,158 sur le guide des frais d'achat) ; avec « optional », la police de la marque s'affiche
   si elle arrive à temps, sinon l'article garde sa police de repli au lieu de sauter, et la
   visite suivante l'a d'emblée (en cache). Mêmes fichiers que ceux que Google sert à Chrome :
   cache partagé avec le reste du site. */
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300 700; font-display: optional; src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2'); 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: 'Raleway'; font-style: normal; font-weight: 300 700; font-display: optional; src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2'); 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: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: optional; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2'); 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: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: optional; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.woff2) format('woff2'); 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: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: optional; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXtHA-X-oE0o.woff2) format('woff2'); 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: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: optional; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXt_A-X-oE0qsEw.woff2) format('woff2'); 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 {
  --font-serif: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --font-sans: 'Raleway', 'Raleway Fallback', Arial, sans-serif;
}