/* =====================================================
   CONSEIL SNDGK — Confort de lecture des articles

   Fichier AUTONOME, chargé par les 14 articles du blog : ne modifie ni
   premium.css ni premium-themes.css.

   LE DIAGNOSTIC, MESURÉ SUR « Les agents IA en entreprise » :
     colonne 760 px, texte 16,5 px  ->  88 caractères par ligne
   Au-delà de 80 caractères, l'oeil perd la ligne au retour à la marge. Et
   16,5 px est une taille d'interface, pas une taille d'article : les
   publications longues tournent entre 18 et 20 px.

   UN SEUL LEVIER RÈGLE LES DEUX. Agrandir le texte réduit mécaniquement le
   nombre de caractères par ligne à largeur égale. On resserre en plus la
   colonne :
     colonne 700 px, texte 18,5 px  ->  72 caractères par ligne

   L'interligne redescend de 1,85 à 1,75 : à 18,5 px, 1,85 écartait trop les
   lignes et le paragraphe se délitait en bandes séparées.

   POURQUOI `html[...]` DEVANT CERTAINES RÈGLES. premium.css pèse (0,2,0) sur
   .article-body h2 par exemple ; le préfixe fait gagner la nôtre sur la
   SPÉCIFICITÉ et non sur l'ordre de chargement, qu'un déplacement de balise
   <link> pourrait casser en silence.
===================================================== */

/* ---------- La mesure ---------- */

body.page-article .article {
  max-width: 700px;
}

html body.page-article .article-body {
  font-size: 1.16rem;
  line-height: 1.75;
}

html body.page-article .article-body p {
  margin-bottom: 1.4rem;
}

/* Le premier paragraphe fait office de chapô : il annonce l'article et
   mérite d'être lu même par qui ne lira pas la suite. */
html body.page-article .article-body > p:first-child {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--fg);
  margin-bottom: 2.2rem;
}

/* ---------- La hiérarchie ---------- */

html body.page-article .article-body h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  /* 4,5rem au-dessus, 1rem en dessous : le titre appartient visiblement à ce
     qui le suit, pas à ce qui le précède. Sans cet écart asymétrique, le
     lecteur ne sait pas où finit une section. */
  margin: 4.5rem 0 1.1rem;
  scroll-margin-top: 6rem;
}

/* Un filet court au-dessus du titre : il marque la coupure sans ajouter de
   bruit, et donne au regard un point d'accroche en fin de section. */
html body.page-article .article-body h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: var(--red);
  margin-bottom: 1.4rem;
}

/* h3 était à 1,15rem, soit SOUS le nouveau corps de texte (1,16rem) : un
   sous-titre plus petit que son paragraphe. Corrigé. */
html body.page-article .article-body h3 {
  font-size: 1.32rem;
  margin: 2.6rem 0 0.8rem;
}

/* ---------- Les listes ---------- */

html body.page-article .article-body ul,
html body.page-article .article-body ol {
  margin: 0 0 1.6rem;
  padding-left: 1.6rem;
}

html body.page-article .article-body li {
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}

/* La puce prend la couleur d'accent : elle structure la liste au lieu de la
   ponctuer de gris. ::marker évite de reconstruire la liste à la main. */
html body.page-article .article-body ul li::marker {
  color: var(--red);
}
html body.page-article .article-body ol li::marker {
  color: var(--red);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

/* ---------- Le sommaire (construit par article.js) ---------- */

.article-sommaire {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.6rem;
  background: var(--bg-2);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.article-sommaire-titre {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.article-sommaire ol {
  margin: 0;
  padding-left: 1.3rem;
}

.article-sommaire li {
  margin-bottom: 0.45rem;
  line-height: 1.45;
}
.article-sommaire li::marker {
  color: var(--red);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
}

.article-sommaire a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.96rem;
}
.article-sommaire a:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Sous 620 px ---------- */

@media (max-width: 619px) {
  html body.page-article .article-body { font-size: 1.08rem; }
  html body.page-article .article-body > p:first-child { font-size: 1.18rem; }
  html body.page-article .article-body h2 { margin-top: 3rem; }
  .article-sommaire { padding: 1.1rem 1.2rem; }
}

/* =====================================================
   Éléments de rythme

   Un article de 3,6 écrans sans autre relief que des titres et des listes se
   lit comme un mur. Ces trois éléments cassent le flux — mais chacun doit
   avoir une RAISON d'être là, pas une place à remplir.
===================================================== */

/* ---------- Le schéma ----------
   Il déborde volontairement la colonne de texte : un schéma contraint à
   700 px devient illisible, et le débordement signale qu'on change de
   registre. Il reste dans le .wrap, donc jamais de défilement horizontal. */

.article-schema {
  margin: 3.2rem calc(-1 * clamp(0px, 4vw, 90px)) 3.2rem;
}

.article-schema svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.article-schema figcaption {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted-2);
  margin-top: 0.9rem;
  text-align: center;
}

/* ---------- La citation détachée ----------
   Pas de guillemets décoratifs : la phrase est du texte de l'article, pas
   une citation externe. C'est le corps et le filet qui la détachent. */

.article-citation {
  margin: 3rem 0;
  padding-left: 1.6rem;
  border-left: 3px solid var(--red);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* ---------- L'encadré « à retenir » ---------- */

.article-retenir {
  margin: 3rem 0 0;
  padding: 1.6rem 1.8rem;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
}

.article-retenir-titre {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.9rem;
}

html body.page-article .article-retenir p:last-child { margin-bottom: 0; }

@media (max-width: 619px) {
  .article-schema { margin-left: 0; margin-right: 0; }
  .article-citation { padding-left: 1.1rem; }
  .article-retenir { padding: 1.2rem 1.3rem; }
}