/* What an article may hold (app/ArticleHtml.php), inside the site's frame (.cadre-texte), and the buttons of the
   accounts that write (article.php). */
.cadre-texte h3 { margin: 1.2em 0 .4em; font-size: 1.3rem; color: #4a2a10; }
.cadre-texte h4 { margin: 1em 0 .3em; font-size: 1.12rem; color: #4a2a10; }
.cadre-texte blockquote { margin: .8em 0; padding: .3em 0 .3em 1em; border-left: 3px solid #b07a1e; color: #4a3728; font-style: italic; }
.cadre-texte ul, .cadre-texte ol { margin: .5em 0 .8em; padding-left: 1.6em; }
.cadre-texte li { margin: .2em 0; }
.cadre-texte p a, .cadre-texte li a, .cadre-texte blockquote a { text-decoration: underline; text-decoration-color: #b07a1e; text-underline-offset: 2px; }
.cadre-texte img { max-width: 95%; max-height: 500px; height: auto; display: block; margin: .6em auto; }
.cadre-texte video.ql-video { display: block; width: 100%; max-width: 620px; height: auto; margin: .6em auto 1em; border-radius: 4px; background: #000; }
.cadre-texte iframe.ql-video { display: block; width: 100%; max-width: 620px; aspect-ratio: 16 / 9; height: auto; margin: .6em auto 1em; border: 0; }
/* a row of figures: its width set by the writer (style from data-width), the pictures side by side at one height
   (each figure grows by its width over its height, data-ratio), each with its caption */
.cadre-texte .article-figures { display: flex; gap: .7em; align-items: flex-start; max-width: 100%; margin: .8em auto 1.1em; }
.cadre-texte .article-figures figure { flex: 1 1 0; min-width: 0; margin: 0; }
.cadre-texte .article-figures img { display: block; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; }
.cadre-texte .article-figures figcaption { margin-top: .35em; font-size: .86em; line-height: 1.35; font-style: italic; text-align: center; color: #5a4632; }
@media (max-width: 600px) {
    .cadre-texte .article-figures { width: 100% !important; gap: .45em; }
}
.cadre-texte hr { border: 0; border-top: 1px solid #b07a1e88; margin: 1.2em 10%; }
.cadre-texte hr.lire-la-suite { display: none; }
.cadre-texte .article-more { font-style: italic; text-decoration: underline; }

/* the writers' buttons */
.article-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 24px 0 0; position: relative; z-index: 20; }
.article-button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid #8a6a48;
    background: linear-gradient(#3b2a1c, #2a1d13); color: #f3e9d8; font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer;
    box-shadow: 0 1px 0 #d4af3740, 0 4px 12px #0006; }
.article-button:hover { color: #fde08d; border-color: #b07a1e; }
.article-button svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.article-edit-link { font-size: .85rem; margin-left: .6rem; text-decoration: underline; }
.article-drafts { position: relative; z-index: 20; margin: 14px auto 0; padding: .6rem 1rem; max-width: 560px; border-radius: 8px; background: #2a1d13e6; color: #e8d9bf; font-size: .92rem; }
.article-drafts a { color: #fde08d; }
.article-drafts ul { margin: .3rem 0 0; padding-left: 1.2rem; }