/* ==========================================================================
   Socle des pages de blog - v2
   Les gabarits article.css et blog-index.css viennent du jumeau, ou ils
   s'appuyaient sur son base.css. Le base.css de la v2 est different : il
   remet les titres et les paragraphes a zero, ne connait ni --gutter ni
   --font-base, et n'a pas les espaceurs .space-*.

   Ce fichier est le pont entre les deux. Il ne redecore rien : il rend aux
   pages de blog les valeurs par defaut dont leurs gabarits ont besoin, et
   rien de plus. Il se charge AVANT article.css et blog-index.css.

   Forme des selecteurs : l'ancetre est enferme dans :where() et le nom
   d'element reste nu. On obtient exactement la specificite d'un selecteur
   d'element, ni plus ni moins. C'est le seul reglage qui fonctionne : plus bas
   (tout enfermer dans :where(), specificite nulle) les remises a zero de
   base.css l'emportent et les titres du corps d'article restent a 16px ; plus
   haut, ce sont les regles de classe des gabarits qui sautent. A specificite
   egale avec base.css, c'est l'ordre de chargement qui tranche, d'ou la
   position de cette feuille apres base.css.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Le jumeau distingue --font-base (Arial, texte courant du socle) de
     --font-sans (Inter). La v2 n'auto-heberge qu'Inter et ne veut pas d'une
     police systeme : les deux pointent donc sur la meme famille. */
  --font-base: var(--font-sans);
}

/* Le jumeau ecartait ses sections de 7 % de la fenetre. La v2 centre son
   contenu a 1220px : la gouttiere devient la moitie de ce qui reste, avec un
   plancher a la marge de securite. Les gabarits ecrivent leur retrait en
   raccourci (padding: 20vh var(--gutter) 5vh), la variable doit donc rester
   une longueur valide a elle seule, sinon tout le raccourci saute. */
.article,
.blog-index {
  --gutter: max(var(--marge), calc((100% - var(--conteneur)) / 2));
}

/* ------------------------------------------------- defauts d'element rendus */

/* Metrique de texte du socle du jumeau : 14px sur 20px. Les gabarits posent
   leurs propres corps la ou ils comptent (45px pour un titre d'article, 16px
   sur 30px pour un corps d'article) ; ces valeurs ne servent qu'aux elements
   qui n'en declarent pas, comme le nom de l'auteur. */
:where(.article, .blog-index) {
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 20px;
}

:where(.article, .blog-index) h1,
:where(.article, .blog-index) h2,
:where(.article, .blog-index) h3,
:where(.article, .blog-index) h4,
:where(.article, .blog-index) h5,
:where(.article, .blog-index) h6 {
  margin-bottom: 10px;
  font-weight: 700;
}

:where(.article, .blog-index) h1 { margin-top: 20px; font-size: 38px; line-height: 44px; }
:where(.article, .blog-index) h2 { margin-top: 20px; font-size: 32px; line-height: 36px; }
:where(.article, .blog-index) h3 { margin-top: 20px; font-size: 24px; line-height: 30px; }
:where(.article, .blog-index) h4 { margin-top: 10px; font-size: 18px; line-height: 24px; }
:where(.article, .blog-index) h5 { margin-top: 10px; font-size: 14px; line-height: 20px; }
:where(.article, .blog-index) h6 { margin-top: 10px; font-size: 12px; line-height: 18px; }

:where(.article, .blog-index) p {
  margin-top: 0;
  margin-bottom: 10px;
}

:where(.article, .blog-index) ul,
:where(.article, .blog-index) ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

:where(.article, .blog-index) figure,
:where(.article, .blog-index) blockquote {
  margin: 0 0 10px;
}

/* Espaceurs verticaux du jumeau, presents dans le balisage des articles et de
   l'index. La largeur de 100% est indispensable : ces blocs vivent dans des
   colonnes flex ou, sans elle, ils retomberaient a zero de large. */
.space-small { width: 100%; height: 20px; }
.space-mid { width: 100%; height: 40px; }
.space-big { width: 100%; height: 60px; }

/* La barre de navigation de la v2 est fixe et haute de 96px, 80px sous 768px.
   Le lien d'evitement vise le contenu de la page : sans marge de defilement,
   le saut amenerait le haut de l'article sous la pilule. */
#contenu {
  scroll-margin-top: 128px;
}

@media screen and (max-width: 767px) {
  #contenu {
    scroll-margin-top: 104px;
  }
}