/* ==========================================================================
   PAGE : ARTICLE (pages/article.html?id=…) — un article du devlog
   Styles du contenu (.article__body) partagés avec l'aperçu de l'espace admin.
   ========================================================================== */

.article { --article-width: 760px; padding-bottom: var(--space-8); }

/* Pas d'arrondi dans les articles (images, code, tags) : seul le hero garde le rayon du système */

/* Rien ne s'affiche avant le chargement (évite un titre vide qui saute) */
.article:not(.is-loaded) { visibility: hidden; min-height: 60vh; }
.article.is-loaded { animation: article-in 600ms var(--ease-out); }
@keyframes article-in { from { opacity: 0; transform: translateY(12px); } }

/* Lien retour centré au-dessus du titre */
.page-article .back-link { display: flex; width: fit-content; margin-inline: auto; margin-bottom: var(--space-4); }

/* ---- En-tête (colonne centrée, texte centré) ---- */
.article__header {
  max-width: var(--article-width);
  margin: 0 auto var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.article__meta time { font-family: var(--font-price); font-weight: 300; font-size: var(--fs-base); color: var(--color-text); }
.article__meta .badge { margin-right: calc(-1 * var(--space-2)); border-radius: 0; }
.article__title {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  text-wrap: balance;
  margin-bottom: var(--space-4);
}
.article__excerpt { max-width: 36em; margin: 0 auto; font-size: var(--fs-lg); font-weight: 300; line-height: 1.35; color: var(--color-text-muted); text-wrap: balance; }

/* ---- Couverture : hero pleine largeur en haut de page (même format que le hero Accessoires) ---- */
.page-top.has-cover { padding-top: 0; }
.media--article-hero {
  width: 100%;
  aspect-ratio: 1707 / 723;
  min-height: 440px;
  max-height: 85vh;
  margin-bottom: var(--space-7);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Aperçu admin : la couverture reste dans l'article, sans arrondi */
.media--article-cover { aspect-ratio: 16 / 9; margin: 0 auto var(--space-7); }

/* ---- Contenu Markdown (aussi utilisé par l'aperçu de l'espace admin) ---- */
.article__body { max-width: var(--article-width); margin-inline: auto; font-size: var(--fs-md); line-height: 1.65; }
.article__body > * { margin: 0 0 var(--space-5); }
.article__body > :first-child { margin-top: 0; }
.article__body h1, .article__body h2, .article__body h3, .article__body h4 { font-weight: 500; line-height: 1.15; }
.article__body h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-top: var(--space-8); }
.article__body h2 { font-size: var(--fs-xl); margin-top: var(--space-7); }
.article__body h3 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.article__body h4 { font-size: var(--fs-md); margin-top: var(--space-5); }
.article__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.article__body strong { font-weight: 500; }
.article__body ul { padding-left: 1.2em; list-style: disc; }
.article__body ol { padding-left: 1.4em; }
.article__body li { margin-bottom: var(--space-2); }
.article__body li::marker { color: var(--color-accent); }
.article__body li > ul, .article__body li > ol { margin-top: var(--space-2); }
.article__body blockquote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.4;
}
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body hr { border: 0; border-top: 1px solid var(--color-line); margin-block: var(--space-7); }
.article__body code { font-family: var(--font-mono); font-size: 0.85em; padding: 0.15em 0.4em; background: var(--color-surface); }
.article__body pre { padding: var(--space-4); overflow-x: auto; background: var(--color-surface); font-size: var(--fs-sm); }
.article__body pre code { padding: 0; background: none; }
.article__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); display: block; overflow-x: auto; }
.article__body th, .article__body td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); text-align: left; }
.article__body th { font-weight: 500; }
.article__body img { max-width: 100%; }
.article__body figure { margin-block: var(--space-6); }
.article__body figure img { width: 100%; }
.article__body figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- Introuvable / autres articles ---- */
.not-found { padding-block: var(--space-6) var(--space-9); }
.not-found p { font-size: var(--fs-md); margin-bottom: var(--space-5); }
.article-more { border-top: 1px solid var(--color-line); }