/* ================================================================
   OPSORA · BLOG PUBLIÉ PAR LE BLOGUEUR (07/10/2026)
   Habille ce que l'agent du Blogueur ajoute au corps d'un article
   (couverture, En bref, définitions, FAQ, sources, tableaux, citations)
   et la carte d'article avec son visuel. Chargée APRÈS style.css et
   growth.css, uniquement sur les pages du blog : nouvelles classes
   seulement (préfixe opsora-), aucune propriété structurelle d'un
   composant existant n'est écrasée. Couleurs : jetons du site.
   ================================================================ */

/* Chapô (« réponse directe » du Blogueur) dans le hero, au gabarit du .text-lead */
.opsora-chapo{ max-width: 62ch; }
.opsora-chapo p{ margin: 0; }

/* Couverture : visuel aux couleurs d'Opsora, 1200 × 630 */
.article-corps .opsora-cover{ margin: 0 0 2em; }
.article-corps .opsora-cover img{
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--border);
}
.article-corps .opsora-cover figcaption{ margin-top: 8px; font-size: var(--fs-200); color: var(--text-muted); }

/* En bref : même boîte que le sommaire du blog */
.opsora-en-bref{
  padding: 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  font-size: var(--fs-200); line-height: 1.55;
}
.article-corps .opsora-en-bref h2{ margin: 0 0 8px; font-size: 1rem; line-height: 1.4; }
.opsora-en-bref ul{ margin: 0; }
.opsora-en-bref .as-of{ color: var(--text-muted); }

/* Images, citations et tableaux du corps */
.article-corps figure{ margin: 1.6em 0; }
.article-corps figure img{ display: block; max-width: 100%; height: auto; border-radius: 14px; }
.article-corps figcaption{ margin-top: 8px; font-size: var(--fs-200); color: var(--text-muted); }
.article-corps blockquote{
  margin-left: 0; margin-right: 0; padding: 16px 20px; border-left: 2px solid var(--accent);
  background: var(--bg-card); border-radius: 0 12px 12px 0; color: var(--text-primary);
}
.article-corps blockquote p{ margin: 0; }
.article-corps table{
  display: block; width: 100%; overflow-x: auto; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
  font-size: var(--fs-200); line-height: 1.5;
}
.article-corps th, .article-corps td{ text-align: left; vertical-align: top; padding: 12px 14px; min-width: 120px; }
.article-corps th{ color: var(--text-primary); font-weight: 600; border-bottom: 1px solid var(--border); }
.article-corps tbody tr + tr td{ border-top: 1px solid var(--border); }

/* Définitions */
.opsora-definitions{ padding: 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.opsora-definitions dt{ color: var(--text-primary); font-weight: 600; }
.opsora-definitions dd{ margin: 4px 0 0; }
.opsora-definitions dd + dt{ margin-top: 12px; }

/* Questions fréquentes : questions dépliables */
.opsora-faq details{ border-top: 1px solid var(--border); padding: 14px 0; }
.opsora-faq details:last-child{ border-bottom: 1px solid var(--border); }
.opsora-faq summary{ cursor: pointer; color: var(--text-primary); font-weight: 600; line-height: 1.45; }
.opsora-faq summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.opsora-faq details p{ margin: 10px 0 0; }

/* Sources */
.opsora-sources{ font-size: var(--fs-200); line-height: 1.55; }
.opsora-sources span{ color: var(--text-muted); }
.opsora-maj{ font-size: var(--fs-200); color: var(--text-muted); }

/* Appel de fin d'article (bloc .article-suite du site) */
.article-corps + .article-suite{ margin-top: clamp(40px, 5vw, 64px); }

/* À lire aussi : cartes du blog, deux colonnes */
.opsora-related-wrap{ max-width: 960px; margin: 0 auto; }
.opsora-related{ margin-top: clamp(48px, 6vw, 80px); }
.opsora-related > h2{ font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--text-primary); margin: 0 0 24px; }
.opsora-related-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px){ .opsora-related-grid{ grid-template-columns: 1fr; } }

/* Carte d'article avec son visuel */
.opsora-carte .opsora-card-cover{ display: block; width: 100%; margin-bottom: 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.opsora-carte .opsora-card-cover img{ display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; transition: transform .4s ease; }
.opsora-carte:is(:hover, :focus-within) .opsora-card-cover img{ transform: scale(1.02); }
@media (prefers-reduced-motion: reduce){ .opsora-carte .opsora-card-cover img{ transition: none; } }
.opsora-cartes .opsora-empty{ margin: 0; color: var(--text-secondary); }