/* Article body: shared by the article page and the TinyMCE editor sheet (body_class "blog-post",
   content_css in settings.py), so authors see what readers will see. */

/* Images fit the column by themselves; !important beats sizes written into old articles
   (CKEditor needed "max-width:600px; width:100%; height:auto" typed by hand) */
.blog-post img { max-width: 100%; height: auto !important; }
.blog-post figure.image { display: table; margin: 24px 0; }
.blog-post figure.image img { display: block; }
.blog-post figure.image figcaption { display: table-caption; caption-side: bottom; padding-top: 6px; font-size: 14px; color: #6c757d; }

/* Subheadings: "Titre 2…6" of the editor, and bold-only paragraphs of old articles (p-sub, article_body filter).
   The serif font comes from fonts.css, loaded by the page and the editor */
.blog-post h2, .blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6, .blog-post .p-sub {
  margin: 2rem 0 .7rem; font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.3; color: #111; }
.blog-post h2, .blog-post .p-sub { font-size: 1.3rem; }
.blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6 { font-size: 1.15rem; }  /* old articles used h4/h5 as main subheadings */
.blog-post .p-sub strong, .blog-post .p-sub b { font-weight: 600; }

/* "Formats" menu of the editor */
.blog-post .p-lead { font-size: 1.15em; color: #333; }
.blog-post .p-note { background: #f3f4f8; border-left: 3px solid #1a1a6b; padding: 12px 16px; }
.blog-post .p-key { background: #eef0fb; border: 1px solid #c9cdf0; border-radius: 6px; padding: 12px 16px; }
.blog-post .p-key::before { content: 'À retenir'; display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600;
                            text-transform: uppercase; letter-spacing: .04em; color: #1a1a6b; }
.blog-post blockquote.q-pull { border: 0; border-top: 2px solid #1a1a6b; border-bottom: 2px solid #1a1a6b; padding: 12px 0;
                               margin: 28px 0; font-size: 1.3em; font-style: italic; text-align: center; }
.blog-post .p-small, .blog-post .txt-small { font-size: .85em; }
.blog-post .p-source { font-size: 13px; color: #6c757d; }
.blog-post .txt-big { font-size: 1.25em; }
.blog-post mark { background: #fff3a3; padding: 0 2px; }
.blog-post img.img-full { width: 100%; }
.blog-post img.img-center { display: block; margin: 16px auto; }
.blog-post img.img-left { float: left; max-width: 45%; margin: 4px 20px 12px 0; }
.blog-post img.img-right { float: right; max-width: 45%; margin: 4px 0 12px 20px; }

/* Tables */
.blog-post table { border-collapse: collapse; margin: 16px 0; max-width: 100%; }
.blog-post td, .blog-post th { border: 1px solid #ccc; padding: 6px 10px; }

/* A Recherche article for a guest (article_details.html): the summary fading out, then the invitation */
.gate-teaser { position: relative; margin: 0 0 1.5rem; font-size: 1.1rem; line-height: 1.7; color: var(--text-strong); }
.gate-teaser::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(255,255,255,0), #fff); }
.gate-card { display: grid; justify-items: center; gap: 1rem; padding: 2.25rem 1.5rem; text-align: center;
             border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; }  /* as the home cards: a line, no shadow */
.gate-card > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-muted); color: var(--brand); font-size: 22px; }
.gate-card p { display: grid; gap: .35rem; max-width: 30rem; margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-meta); }
.gate-card b { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--text-heading); }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }