/* =========================================================
   CRÈME — Page d'article (lecture)
   ========================================================= */

.article-lecture { padding-top: var(--creme-space-48); padding-bottom: var(--creme-space-64); }
.article-lecture__entete { display: flex; flex-direction: column; gap: var(--creme-space-16); margin: 0 auto var(--creme-space-32); max-width: var(--creme-reading-max); }
.article-lecture__titre { margin: 0; }
.article-lecture__meta { color: var(--creme-texte-secondaire); margin: 0; }

.article-lecture__chapo {
  font: 400 21px/31px var(--creme-font-principale);
  margin: 0 auto var(--creme-space-32);
}

.article-lecture__legende {
  color: var(--creme-texte-secondaire);
  margin: var(--creme-space-8) auto 0;
}

.article-lecture__visuel {
  margin-bottom: var(--creme-space-48);
  display: flex; align-items: center; justify-content: center;
}
.article-lecture__visuel img { width: 100%; height: 100%; object-fit: cover; }

.article-lecture__corps { display: flex; flex-direction: column; gap: var(--creme-space-24); }
.article-lecture__corps p { margin: 0; }
.article-lecture__corps h2 { font: 800 34px/1.15 var(--creme-font-principale); letter-spacing: -1.2px; margin: var(--creme-space-16) 0 0; }
.article-lecture__corps h3 { font: 800 26px/1.2 var(--creme-font-principale); letter-spacing: -0.9px; margin: var(--creme-space-16) 0 0; }
.article-lecture__corps a { color: var(--creme-cobalt); text-decoration: underline; }
.article-lecture__corps blockquote {
  margin: var(--creme-space-16) 0; padding-left: var(--creme-space-24);
  border-left: 3px solid var(--creme-cobalt);
  font-family: var(--creme-font-editoriale); font-style: italic; font-size: 22px; line-height: 32px;
}
.article-lecture__corps figure { margin: 0; }
.article-lecture__corps figcaption { font-size: 13px; color: var(--creme-texte-secondaire); margin-top: var(--creme-space-8); }

.article-lecture__tags { display: flex; gap: var(--creme-space-8); flex-wrap: wrap; margin-top: var(--creme-space-32); }

.article-lecture__suite { border-top: 1px solid var(--creme-filet); }

.article-lecture__partage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--creme-space-16); margin-top: var(--creme-space-32); padding-top: var(--creme-space-24); border-top: 1px solid var(--creme-filet); }
.article-lecture__partage-label { color: var(--creme-texte-secondaire); margin: 0; }
.article-lecture__partage-liens { display: flex; flex-wrap: wrap; gap: var(--creme-space-16); margin: 0; padding: 0; list-style: none; }
.article-lecture__partage-liens a,
.article-lecture__partage-liens button {
  color: var(--creme-texte-principal);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-lecture__partage-liens a:hover,
.article-lecture__partage-liens button:hover {
  color: var(--creme-cobalt);
  border-bottom-color: var(--creme-cobalt);
}

@media (max-width: 768px) {
  .article-lecture { padding-top: var(--creme-space-24); }
  .article-lecture__corps h2 { font-size: 26px; }
  .article-lecture__corps h3 { font-size: 21px; }
}


/* ===== Commentaires (articles) ===== */
.article-lecture__commentaires { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid currentColor; }
.article-lecture__commentaires-titre { margin: 0 0 1.5rem; }
.creme-commentaires { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.creme-commentaires .comment { margin: 0 0 1.5rem; padding: 0 0 1.5rem; border-bottom: 1px solid rgba(0,0,0,.12); }
.creme-commentaires .children { list-style: none; margin: 1.25rem 0 0 1.5rem; padding: 0; }
.creme-commentaires .comment-author { display: flex; align-items: center; gap: .75rem; font-weight: 700; }
.creme-commentaires .avatar { border-radius: 50%; }
.creme-commentaires .comment-metadata { font-size: .8rem; opacity: .7; margin: .25rem 0 .75rem; }
.creme-commentaires .comment-metadata a { color: inherit; text-decoration: none; }
.creme-commentaires .reply a { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--creme-cobalt, #1d3df5); }
.creme-comment-form label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.creme-comment-form input[type="text"], .creme-comment-form input[type="email"], .creme-comment-form input[type="url"], .creme-comment-form textarea { width: 100%; box-sizing: border-box; padding: .75rem; font: inherit; border: 1px solid currentColor; background: transparent; border-radius: 0; }
.creme-comment-form p { margin: 0 0 1rem; }
.creme-comment-form .comment-reply-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 1rem; }
.creme-comment-form .submit { padding: .8rem 1.5rem; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 0; border-radius: 0; background: var(--creme-cobalt, #1d3df5); color: #fff; cursor: pointer; }
