/**
 * Blog — page article (surcouche custom, chargée après article.css).
 * Layout, marges, tailles profils : article.css (tronc commun).
 * Contours, typo, liens : design system custom (--pfcustom-* / --portfolios-*).
 */

/* --- Images --- */

/* Avatars auteur (en-tête) et encart À propos */
#portfolio_page.portfolio-font #blog-main-article #title-article .about-artist-img,
#portfolio_page.portfolio-font #blog-about .about-artist-img,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #title-article .about-artist-img,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about .about-artist-img {
  border-radius: var(--pfcustom-radius-social) !important;
  border-width: var(--portfolios-thumbnail-border-width) !important;
  border-style: var(--portfolios-thumbnail-border-type) !important;
  border-color: var(--portfolios-thumbnail-border-color) !important;
  box-shadow: var(--portfolios-thumbnail-box-shadow) !important;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
  background-color: var(--portfolios-theme-bg-alt, var(--pfcustom-bg-elevated));
}

/* Illustration de une + images dans le corps */
#portfolio_page.portfolio-font #blog-main-article :is(
  .portfolios-thumbnail-radius,
  .blog-article-cover,
  #content-article img,
  #subtitle-article img:not(.about-artist-img),
  .content-article .writer-figure img
),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article :is(
  .portfolios-thumbnail-radius,
  .blog-article-cover,
  #content-article img,
  #subtitle-article img:not(.about-artist-img),
  .content-article .writer-figure img
) {
  border-radius: var(--pfcustom-radius-card) !important;
  border-width: var(--portfolios-thumbnail-border-width) !important;
  border-style: var(--portfolios-thumbnail-border-type) !important;
  border-color: var(--portfolios-thumbnail-border-color) !important;
  box-shadow: var(--portfolios-thumbnail-box-shadow) !important;
  box-sizing: border-box;
  background-color: var(--portfolios-theme-bg-alt, var(--pfcustom-bg-elevated));
}

/* Vidéos et cartes média */
#portfolio_page.portfolio-font #blog-main-article #media-article :is(.youtube, .vimeo, .dailymotion, a.open-graph-card),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #media-article :is(.youtube, .vimeo, .dailymotion, a.open-graph-card) {
  border-radius: var(--pfcustom-radius-card) !important;
  border-width: var(--portfolios-thumbnail-border-width) !important;
  border-style: var(--portfolios-thumbnail-border-type) !important;
  border-color: var(--portfolios-thumbnail-border-color) !important;
  box-shadow: var(--portfolios-thumbnail-box-shadow) !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- Rythme vertical (article.css — priorité sur editor-overrides) --- */

#portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle,
#portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle p,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle p {
  margin: 0 0 1.25rem !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle:last-child,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle:last-child {
  margin-bottom: 0 !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article .blog-article-cover,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article .blog-article-cover {
  display: block;
  margin: 0 0 1.75rem !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article + #content-article,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article + #content-article {
  margin-top: 0.5rem;
}

/* --- Titres & sous-titres --- */

#portfolio_page.portfolio-font #blog-main-article #title-article h1,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #title-article h1 {
  font-size: var(--pfcustom-type-h1-size) !important;
  line-height: var(--pfcustom-type-h1-line) !important;
  font-weight: var(--pfcustom-type-h1-weight) !important;
  color: var(--pfcustom-type-h1-color) !important;
}

#portfolio_page.portfolio-font #blog-main-article #title-article h1 :is(a, span, p, strong, em, b, i, small),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #title-article h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color) !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle,
#portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle p,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle p {
  font-size: var(--pfcustom-type-h3-size) !important;
  line-height: var(--pfcustom-type-h3-line) !important;
  font-weight: 400 !important;
  color: var(--pfcustom-color-white) !important;
  opacity: 1 !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle :is(span, strong, em, b, i, small),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article h2.subtitle :is(span, strong, em, b, i, small) {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}

#portfolio_page.portfolio-font #blog-main-article #title-article .author,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #title-article .author {
  color: var(--pfcustom-text) !important;
  font-weight: var(--pfcustom-type-h3-weight) !important;
}

#portfolio_page.portfolio-font #blog-main-article #title-article .date,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #title-article .date {
  color: var(--pfcustom-text-muted) !important;
  opacity: 1 !important;
}

#portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(h2, h3),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(h2, h3) {
  margin-top: 0 !important;
  padding: 0 !important;
  text-align: inherit !important;
}

#portfolio_page.portfolio-font #blog-main-article #content-article.content-article h2,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article h2 {
  font-size: var(--pfcustom-type-h2-size) !important;
  line-height: var(--pfcustom-type-h2-line) !important;
  font-weight: var(--pfcustom-type-h2-weight) !important;
  color: var(--pfcustom-color-white) !important;
}

#portfolio_page.portfolio-font #blog-main-article #content-article.content-article h3,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article h3 {
  font-size: var(--pfcustom-type-h3-size) !important;
  line-height: var(--pfcustom-type-h3-line) !important;
  font-weight: var(--pfcustom-type-h3-weight) !important;
  color: var(--pfcustom-color-white) !important;
}

/* Chapô & corps d’article — texte blanc pur (liens : accent, règles ci-dessous) */
#portfolio_page.portfolio-font #blog-main-article #subtitle-article.content-article,
#portfolio_page.portfolio-font #blog-main-article #content-article.content-article,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article.content-article,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article {
  color: var(--pfcustom-color-white) !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article.content-article :is(p, li, blockquote, h4, h5, h6, figcaption, td, th, strong, b, em, i, u, span, div, cite, .writer-editable, .writer-list-item-text),
#portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(p, li, blockquote, h4, h5, h6, figcaption, td, th, strong, b, em, i, u, span, div, cite, .writer-editable, .writer-list-item-text),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article.content-article :is(p, li, blockquote, h4, h5, h6, figcaption, td, th, strong, b, em, i, u, span, div, cite, .writer-editable, .writer-list-item-text),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(p, li, blockquote, h4, h5, h6, figcaption, td, th, strong, b, em, i, u, span, div, cite, .writer-editable, .writer-list-item-text) {
  color: var(--pfcustom-color-white) !important;
}

#portfolio_page.portfolio-font #blog-about :is(.blog-aside-heading, h2.about-card-title),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about :is(.blog-aside-heading, h2.about-card-title) {
  font-size: var(--pfcustom-type-h2-size) !important;
  line-height: var(--pfcustom-type-h2-line) !important;
  font-weight: var(--pfcustom-type-h2-weight) !important;
  color: var(--pfcustom-type-h2-color) !important;
}

#portfolio_page.portfolio-font #blog-about :is(.blog-aside-heading, h2.about-card-title) :is(a, span, p, strong, em, b, i, small),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about :is(.blog-aside-heading, h2.about-card-title) :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color) !important;
}

#portfolio_page.portfolio-font #blog-about h4,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about h4 {
  font-size: var(--pfcustom-type-h3-size) !important;
  line-height: var(--pfcustom-type-h3-line) !important;
  font-weight: var(--pfcustom-type-h3-weight) !important;
  color: var(--pfcustom-text-muted) !important;
}

#portfolio_page.portfolio-font #blog-about .blog-aside-block .article-blog-infos__title,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about .blog-aside-block .article-blog-infos__title {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  font-weight: var(--pfcustom-type-h3-weight) !important;
  color: var(--pfcustom-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#portfolio_page.portfolio-font #blog-about .blog-aside-block .article-blog-infos__meta,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about .blog-aside-block .article-blog-infos__meta {
  color: var(--pfcustom-text-muted) !important;
}

/* --- Liens --- */

#portfolio_page.portfolio-font #blog-main-article #subtitle-article :is(a, h2.subtitle a, p a):not(:is(.folio_button, .folio-button)),
#portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article :is(a, h2.subtitle a, p a):not(:is(.folio_button, .folio-button)),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)) {
  color: var(--pfcustom-accent) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: unset !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pfcustom-accent) 45%, transparent) !important;
  padding: 0 0 0.12rem !important;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article :is(a, h2.subtitle a, p a):not(:is(.folio_button, .folio-button)):is(:link, :visited, :hover, :active),
#portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)):is(:link, :visited, :hover, :active),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article :is(a, h2.subtitle a, p a):not(:is(.folio_button, .folio-button)):is(:link, :visited, :hover, :active),
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)):is(:link, :visited, :hover, :active) {
  color: var(--pfcustom-accent) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom-color: color-mix(in srgb, var(--pfcustom-accent) 45%, transparent) !important;
  background-color: transparent !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article :is(a, h2.subtitle a, p a):not(:is(.folio_button, .folio-button)):hover,
#portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)):hover,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article :is(a, h2.subtitle a, p a):not(:is(.folio_button, .folio-button)):hover,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)):hover {
  border-bottom-color: var(--pfcustom-accent) !important;
}

#portfolio_page.portfolio-font #blog-main-article #subtitle-article a:not(:is(.folio_button, .folio-button)):focus-visible,
#portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)):focus-visible,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #subtitle-article a:not(:is(.folio_button, .folio-button)):focus-visible,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #content-article.content-article :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .folio_button, .folio-button)):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-accent) 58%, transparent);
  outline-offset: 0.18em;
}

#portfolio_page.portfolio-font #blog-main-article #title-article .title-article-author__avatar-link,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-main-article #title-article .title-article-author__avatar-link {
  border-bottom: none !important;
  padding-bottom: 0;
  background: transparent !important;
  box-shadow: none !important;
}

#portfolio_page.portfolio-font #blog-about .blog-aside-heading a,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about .blog-aside-heading a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding-bottom: 0;
  transition: color 0.15s ease;
}

#portfolio_page.portfolio-font #blog-about .blog-aside-heading a:hover,
body.portfolio-editor #webpage-simulation #portfolio_page.portfolio-font #blog-about .blog-aside-heading a:hover {
  color: var(--pfcustom-accent) !important;
  background-color: transparent !important;
}