/* 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: var(--w-lecture); }
/* On lit longtemps un article : un cran plus genereux que le site (D §8). */
.blog-article .doc { font-size: var(--t-article); line-height: var(--lh-article); }

.blog-article .hero h1 { max-width: none; font-size: var(--t-h1); }
.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: var(--t-h2);
  /* l'espace au-dessus vaut le double de celui en dessous (D §8) */
  margin: 3rem 0 1.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
}
.blog-article .doc h3 { font-size: var(--t-h3); 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-bloc);
}
.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: var(--r-bloc);
  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-bloc); }
.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; }

/* Sous 40rem, chaque ligne devient une carte : toutes les colonnes se lisent
   sans defiler (la colonne de droite etait hors champ a 360 px, 36, 06/11).
   L'en-tete de chaque cellule vient de data-label (article_depuis_markdown.py). */
@media (max-width: 40rem) {
  .table-scroll { border: 0; overflow: visible !important; }
  .blog-article table, .blog-article tbody, .blog-article tr, .blog-article td { display: block; min-width: 0; }
  .blog-article thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .blog-article tbody tr { border: 1px solid var(--line); border-radius: var(--r-bloc); margin-bottom: .75rem; }
  .blog-article tbody tr td { border-bottom: 1px solid var(--line); }
  .blog-article tbody tr td:last-child { border-bottom: 0; }
  .blog-article td:first-child { background: var(--bg-soft); font-weight: 700; }
  .blog-article td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: var(--t-small); font-weight: 700; color: var(--brand-d);
  }
  .blog-article td:first-child:not(:empty)::before { display: none !important; }
  /* Une grille a remplir garde chaque case vide, son etiquette et de quoi ecrire. */
  .blog-article td:empty { height: auto; min-height: 4rem; }
}
.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 : l'encart qui presente l'offre ----------
   Decision de Simon (22/09 16:55) : le texte des articles ne dit plus que
   l'offre est la notre ; c'est cet encart, hors du texte, qui la presente.
   Texte : REDACTION Gravity (« Encart fin d'article - about.md »). */
.blog-fin { background: var(--bg-soft); }
.encart-offre {
  max-width: 36rem; margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2rem);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-bloc);
}
.encart-offre h2 { font-size: var(--t-h3); margin-bottom: .8rem; }
.encart-offre p { font-size: var(--t-body); }
.encart-offre .btn-row { margin-top: 1.25rem; }

/* ---------- 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-family: var(--f-titre); font-size: var(--t-h3); 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); }

/* ---------- systeme visuel D (22/09) ---------- */
.blog-article .kicker,
.blog-liste .kicker {
  background: none; padding: 0;
  font-size: var(--t-label); color: var(--brand-d);
  letter-spacing: .1em; text-transform: uppercase;
}
/* L'index des guides est une liste a filets, jamais des cartes. */
.article-item { padding: 0; border-top: 1px solid var(--line); }
.article-item:last-child { border-bottom: 1px solid var(--line); }
.article-item > a { padding: var(--s-5) 0 var(--s-2); min-height: var(--s-8); }
.article-item > a:hover { color: var(--brand-d); }
.article-item p { margin: 0 0 var(--s-2); }
.article-item time { display: block; padding-bottom: var(--s-5); }
.article-item:hover { background: var(--bg-soft); }
/* L'etat vide : un filet a gauche, pas une carte. */
.article-list-empty {
  border-left: 3px solid var(--brand); padding-left: 14px;
  color: var(--ink-2); font-size: var(--t-body);
}
.article-list:not(:empty) + .article-list-empty { display: none; }
/* L'encart de fin : filet haut vert, angles droits (D §4, §5). */
.encart-offre {
  border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--r-bloc);
}

/* L'appel du milieu d'article (strategie validee par Simon, 22/09 17:15) :
   il mene au formulaire, pas a /work, et se pose apres le passage ou l'offre
   est decrite en entier. Filet haut et bas, pas de carte. */
.appel-milieu {
  margin: var(--s-7) 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.appel-milieu p { font-family: var(--f-titre); font-size: var(--t-h3); margin: 0; }
.appel-milieu .btn-row { justify-content: center; margin-top: var(--s-4); }