/* Le blog (21/09). Charge seulement par /blog et les articles.
   Base de lecture, pas une identite : memes couleurs, meme police, memes
   rayons que le reste du site. L'habillage viendra de WEBDESIGN (systeme D)
   sur les memes classes.
   Le probleme regle ici : les articles reprenaient la mise en page des
   mentions legales (colonne collee a gauche, intertitres a peine plus grands
   que le texte, listes a cocher rendues en puces, liens d'action en simple
   texte souligne). */

/* ---------- une colonne de lecture, centree ---------- */
.blog-article .wrap,
.blog-liste .wrap { max-width: 44rem; }

.blog-article .hero h1 { max-width: none; font-size: clamp(2rem, 6vw, 3rem); }
.blog-liste .hero h1 { max-width: none; }

.blog-article .kicker a,
.blog-liste .kicker a { color: inherit; text-decoration: none; }

.article-meta { margin: 1.1rem 0 0; font-size: var(--t-small); color: var(--ink-2); }

/* ---------- le corps ---------- */
.blog-article .doc { max-width: none; }
.blog-article .doc h2 {
  font-size: clamp(1.45rem, 4.2vw, 1.8rem);
  margin: 3rem 0 .9rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
}
.blog-article .doc h3 { font-size: 1.3rem; margin: 2.1rem 0 .5rem; }
.blog-article .doc ul,
.blog-article .doc ol { padding-left: 1.35rem; margin: 0 0 1.25rem; }
.blog-article .doc li { margin: .4rem 0; }

/* Les listes a cocher sont le livrable de chaque article : elles doivent
   se voir comme un outil, pas comme des puces. */
.blog-article .doc .checklist {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 1.3rem 1.4rem;
  background: var(--brand-p);
  border-radius: var(--r);
}
.checklist li { position: relative; padding-left: 2.1rem; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .22em;
  width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--brand); border-radius: 4px;
  background: var(--bg);
}

/* Le tableau defile dans son cadre, jamais la page (360 px). */
.table-scroll { margin: 1.25rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--r); }
.blog-article table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: var(--t-body); }
.blog-article th,
.blog-article td { text-align: left; vertical-align: top; padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.blog-article th { background: var(--bg-soft); font-weight: 700; }
.blog-article tbody tr:last-child td { border-bottom: 0; }
.blog-article td:empty { height: 2.8rem; }

/* Un paragraphe qui ne porte qu'un lien vers /work est un appel : un bouton. */
.blog-article .doc .cta { margin: 1.75rem 0 2.25rem; }

/* ---------- la fin d'article ---------- */
.blog-fin { background: var(--bg-soft); text-align: center; }
.blog-fin .lede { margin-left: auto; margin-right: auto; }
.blog-fin .btn-row { justify-content: center; }

/* ---------- la liste /blog ---------- */
.article-list { list-style: none; margin: 0; padding: 0; }
.article-item { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.article-item:last-child { border-bottom: 1px solid var(--line); }
.article-item > a {
  display: block;
  font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
  color: var(--ink); text-decoration: none;
}
.article-item > a:hover { color: var(--brand); }
.article-item p { margin: .55rem 0 .45rem; font-size: var(--t-body); color: var(--ink-2); }
.article-item time { font-size: var(--t-small); color: var(--ink-2); }