/* ParrotTalk blog, styles partages par les articles (lot E1, 16/09/2026).
   Charge par blog/_template-article.html et par chaque blog/<slug>/index.html
   apres css/main.css. Les regles de la premiere partie sont celles qui etaient
   en <style> inline dans chaque article, recopiees a l'identique : aucun
   changement visuel. La seconde partie ajoute les blocs standard (Short answer,
   Related guides, precedent / suivant, date de mise a jour) et les elements
   de corps que les guides reecrits utilisent (h3, tableaux, listes numerotees,
   citations, encadres d'exemple, reponses revelables, checklists).
   main.css n'est pas modifie. */

/* ── 1. Mise en page de l'article (identique a l'ancien style inline) ─────── */
.article-wrap { max-width: 720px; margin: 0 auto; }
.crumbs { font-size: .85rem; color: var(--text-light); padding: calc(var(--nav-h) + 20px) 0 0; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.article-head { padding: 18px 0 8px; }
.article-head h1 { font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.16; margin: 0 0 14px; color: var(--dark); }
.article-meta { font-size: .9rem; color: var(--text-muted); margin: 0; }
.article-figure { float: right; width: 190px; margin: 6px 0 14px 24px; }
.article-figure img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: var(--sh-sm); }
@media (max-width: 560px) { .article-figure { float: none; width: 150px; margin: 4px auto 16px; } }
.article-body { font-size: 1.08rem; line-height: 1.72; color: var(--text); padding: 12px 0 8px; }
.article-body h2 { font-size: 1.5rem; line-height: 1.25; margin: 38px 0 12px; color: var(--dark); }
.article-body p { margin: 0 0 18px; }
.article-body ul { margin: 0 0 18px; padding-left: 1.3em; }
.article-body li { margin: 0 0 8px; }
.article-body a { color: var(--primary); }
.article-cta { background: var(--primary-pale); border: 1px solid var(--primary-light); border-radius: var(--r-lg); padding: 22px 24px; margin: 34px 0 8px; }
.article-cta p { margin: 0 0 8px; }
.article-back { padding: 8px 0 64px; }
.article-back a { color: var(--primary); text-decoration: none; font-weight: 600; }

/* ── 2. Blocs standard du gabarit ─────────────────────────────────────────── */
/* Date de mise a jour visible, sous le byline. */
.article-updated { font-size: .85rem; color: var(--text-light); margin: 6px 0 0; }

/* Short answer : encadre sous l'image, la reponse d'abord. */
.article-short { background: var(--primary-pale); border-left: 4px solid var(--primary); border-radius: var(--r-sm); padding: 14px 18px; margin: 0 0 22px; }
.article-short p { margin: 0; }

/* Related guides : 3 liens vers des guides, jamais vers le journal. */
.article-related { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 22px 12px; margin: 30px 0 0; }
.article-related h2 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 10px; color: var(--dark); }
.article-related ul { list-style: none; margin: 0; padding: 0; }
.article-related li { margin: 0 0 8px; padding-left: 1.1em; position: relative; font-size: 1rem; line-height: 1.5; }
.article-related li::before { content: "\2192"; position: absolute; left: 0; color: var(--primary); }
.article-related a { color: var(--primary); text-decoration: none; font-weight: 600; }
.article-related a:hover { text-decoration: underline; }

/* Precedent / suivant dans la meme rubrique. */
.article-prevnext { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0 0; font-size: .95rem; line-height: 1.45; }
.article-prevnext a { color: var(--primary); text-decoration: none; font-weight: 600; max-width: 48%; }
.article-prevnext a:hover { text-decoration: underline; }
.article-prevnext .next { margin-left: auto; text-align: right; }
.article-prevnext span { display: block; font-size: .8rem; font-weight: 400; color: var(--text-light); }
@media (max-width: 560px) { .article-prevnext { flex-direction: column; } .article-prevnext a { max-width: none; } .article-prevnext .next { margin-left: 0; text-align: left; } }

/* ── 3. Elements de corps pour les guides reecrits ───────────────────────── */
/* Sous-titres : main.css leur donne deja 1.25rem / 600 / 1.3 et un margin 0 ;
   les valeurs sont reprises telles quelles pour que les Quick answers
   existantes ne bougent pas. */
.article-body h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0; }

/* Listes numerotees (main.css met list-style: none sur ol). */
.article-body ol { list-style: decimal; margin: 0 0 18px; padding-left: 1.6em; }
.article-body ol li { padding-left: .2em; }

/* Tableaux : bordures fines, en-tete grise, defilement horizontal via .tbl. */
.tbl { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.article-body table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.5; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
.article-body thead th { background: var(--surface); font-weight: 600; color: var(--dark); }
.article-body tbody th { background: var(--surface); font-weight: 600; }
.article-body table p { margin: 0; }

/* Citations. */
.article-body blockquote { border-left: 4px solid var(--primary-light); padding: 4px 0 4px 18px; margin: 0 0 18px; color: var(--text-muted); font-style: italic; }
.article-body blockquote p:last-child { margin: 0; }

/* Encadre d'exemple, avec deux variantes pour band 6 (weak) et band 7 (strong). */
.example { background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r); padding: 14px 18px; margin: 0 0 20px; font-size: 1rem; }
.example p:last-child { margin: 0; }
.example__label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.example--weak { border-left-color: var(--warning); background: var(--warning-light); }
.example--weak .example__label { color: #B45309; }
.example--strong { border-left-color: var(--success-dark); background: var(--success-light); }
.example--strong .example__label { color: var(--success-dark); }

/* Reponse revelable : <details class="answer"><summary>Show the answer</summary>...</details> */
.answer { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 16px; margin: 0 0 20px; background: var(--white); }
.answer summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; }
.answer summary::-webkit-details-marker { display: none; }
.answer summary::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--primary); }
.answer[open] summary::before { content: "\25BE"; }
.answer[open] summary { margin-bottom: 8px; }
.answer p:last-child { margin: 0; }

/* Checklist : liste a coches. */
.checklist { list-style: none; margin: 0 0 18px; padding: 0; }
.checklist li { position: relative; padding-left: 1.7em; margin: 0 0 8px; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--success-dark); font-weight: 700; }