/* blog-clair.css : le blog remis dans la veine de la landing claire.

   Chargée APRÈS blog.css, qu'elle ne remplace pas : la mise en page des
   articles (colonne, tableaux, encadrés, modèles à télécharger) reste la
   sienne. On ne change ici que ce qui se voit en passant d'une page publique
   à l'autre : le fond, la fonte des titres, la barre et le pied.

   La barre vient de vitrine-barre.css. L'ancienne (nav-public.css) n'est plus
   chargée par le blog, donc les deux variables qu'elle fournissait à
   `.bl-page` sont reposées ici. */

:root {
    --bl-creme: #f7f2e9;
    /* Le nom dit « serif » et la fonte ne l'est plus : c'est la variable que
       tous les titres de blog.css lisent déjà. La renommer voudrait dire
       retoucher chacune de ses règles pour un mot. */
    --bl-serif: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    --gouttiere: var(--marge);
    --container: 100%;
}

/* LA COLONNE EST CENTRÉE. Elle était calée à gauche sous le logo de l'ancienne
   barre, qui tenait dans une boîte. La nouvelle barre va d'un bord à l'autre :
   calée dessous, la colonne se retrouverait collée au bord gauche d'un écran
   large, avec tout le vide du même côté. */
.bl-page > * { margin-left: auto; margin-right: auto; }

/* Une grotesque se serre plus qu'un serif : à l'approche du Cormorant, les
   titres paraissaient lâches. */
.bl-article-tete h1,
.bl-index-tete h1 { letter-spacing: -0.035em; line-height: 1.04; }

.bl-corps h2,
.bl-carte h2,
.bl-carte h3,
.bl-cta h2,
.bl-suite h2 { letter-spacing: -0.025em; }

/* Le pied finit sur l'encre, comme sur les autres pages. */
.bl-pied {
    border-top: 0;
    background: var(--encre);
    color: rgba(247, 242, 233, 0.6);
    padding: 2rem var(--marge) 3rem;
}

.bl-pied a { color: rgba(247, 242, 233, 0.6); }
.bl-pied a:hover { color: var(--creme); text-decoration: none; }