/* assets/css/public/modules/blog/blog.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 09-10-2026-card-ink */
.blog-list {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto;
    /* Écart réglé par la densité des articles (design/elements/options.css, --layout-gap du conteneur). */
    grid-gap: var(--layout-gap, 20px);
}

/* Vignettes blog — typo et métadonnées (variables thème portfolio) */
#portfolio_page main .thumbnail .article-blog-infos,
#portfolio_page main .thumbnail-tile .article-blog-infos {
    gap: 0.65rem;
}

#portfolio_page main .thumbnail .article-blog-infos__title,
#portfolio_page main .thumbnail-tile .article-blog-infos__title {
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
    font-weight: bold;
    color: var(--pf-card-title, var(--portfolios-content-title-color, var(--portfolios-heading-primary-color, var(--portfolios-text-main-color, inherit))));
    margin: 0;
    padding: 0;
    text-align: inherit;
}

#portfolio_page main .thumbnail .article-blog-infos__meta,
#portfolio_page main .thumbnail-tile .article-blog-infos__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    /* Taille : structure/layout/reading.css (couche « typo ») l'impose sur toutes les listes ; ici la valeur de base. */
    font-size: var(--portfolios-font-size-meta);
    line-height: calc(0.75rem + 8px);
    color: var(--portfolios-heading-secondary-color, var(--portfolios-text-main-color, inherit));
    opacity: 0.9;
}

#portfolio_page main .thumbnail .article-blog-infos__date,
#portfolio_page main .thumbnail-tile .article-blog-infos__date {
    font-style: normal;
    letter-spacing: 0.02em;
}

#portfolio_page main .thumbnail .article-blog-infos__category,
#portfolio_page main .thumbnail-tile .article-blog-infos__category {
    /* Pastille : même réglage /theme que « Populaire » et les dates (Pastilles, design/matrices/base.css). */
    --pf-badge-base: var(--portfolios-button-background-color, #222);
    --pf-badge-base-on: var(--portfolios-button-text-color, #fff);
    display: inline-block;
    padding: calc(0.12em * var(--portfolios-badge-pad, 1)) calc(0.55em * var(--portfolios-badge-pad, 1));
    border-radius: var(--portfolios-badge-radius, var(--portfolios-button-radius, var(--portfolios-border-radius-custom, 4px)));
    background: var(--pf-badge-bg);
    color: var(--pf-badge-ink);
    border: none;
    box-shadow: inset 0 0 0 1px var(--pf-badge-line);
    font-family: var(--portfolios-button-font-family, inherit);
    font-size: var(--portfolios-font-size-small);
    line-height: calc(0.68rem + 6px);
    letter-spacing: var(--portfolios-button-letter-spacing, 0.04em);
    text-transform: var(--portfolios-button-text-transform, none);
    font-weight: var(--portfolios-button-font-weight, 600);
}

#portfolio_page main .thumbnail .article-blog-infos__description,
#portfolio_page main .thumbnail-tile .article-blog-infos__description {
    flex: 1;
    margin: 0;
    font-size: calc(var(--portfolios-font-size-base, 14px) * 0.875);
    line-height: calc(var(--portfolios-text-line-height) * 0.875);
    color: var(--portfolios-text-main-color, inherit);
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
}

/* assets/css/public/modules/blog/article.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 08-10-2026-read-col */
/* -------------------------------------------------------------------------
   Page article blog — rythme vertical et colonnes
   ------------------------------------------------------------------------- */

#portfolio_page main:has(#blog-article) {
    background-color: var(--portfolios-section-color-odd, var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa)));
}

#portfolio_page #blog-article {
    align-items: start;
}

/* Colonne de lecture (--layout-width-read), quelle que soit la largeur de page :
   chapô, couverture, médias et texte partagent la même largeur ; l'aside
   reste borné et se cale sur le bord droit de la page. */
@media screen and (min-width: 901px) {
    #portfolio_page #blog-article.pf-split--right {
        grid-template-columns: minmax(0, var(--layout-width-read)) minmax(220px, 360px);
        justify-content: space-between;
    }
}

#portfolio_page #blog-main-article > .ariane {
    margin-bottom: 1.25rem;
}

#portfolio_page #blog-main-article {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}

#portfolio_page #blog-about {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-width: 0;
    padding-bottom: 0;
}

#portfolio_page #blog-about > article.blog-aside-heading {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}

#portfolio_page #blog-about h2.blog-aside-heading,
#portfolio_page #blog-about > article.blog-aside-heading > h2 {
    margin: 0 0 1rem;
    padding: 0;
}

#portfolio_page #blog-about > article.blog-aside-heading > h2 {
    margin: 0;
}

#portfolio_page #blog-about > article.blog-aside-heading > .pf-cols-1 {
    padding: 0;
    margin: 0;
}

#portfolio_page #blog-about .blog-aside-block {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}

#portfolio_page #blog-about .blog-aside-block .blog-list {
    margin-top: 0;
}

@media screen and (min-width: 901px) {

    #portfolio_page #blog-about > article.blog-aside-heading {
        text-align: center;
    }

    #portfolio_page #blog-about > article.blog-aside-heading > .pf-cols-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    #portfolio_page #blog-about > article.blog-aside-heading .about-artist-img {
        margin-left: auto;
        margin-right: auto;
    }

    #portfolio_page #blog-about > article.blog-aside-heading .social-medias {
        justify-content: center;
        text-align: center;
    }

    #portfolio_page #blog-about > article.blog-aside-heading .social-medias li {
        margin: 0;
    }

}

/* En-tête article */
#portfolio_page #title-article {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#portfolio_page #title-article h1 {
    margin: 0;
}

#portfolio_page #blog-main-article .article-meta-block {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
}

#portfolio_page #blog-main-article .article-meta-block-footer {
    margin: 2.5rem 0 0;
    padding-top: 1.75rem;
    border-top: var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, var(--pf-ctl-line)));
}

#portfolio_page #blog-main-article .title-article-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
}

#portfolio_page #blog-main-article .title-article-author__avatar-link {
    display: block;
    flex: 0 0 auto;
    text-decoration: none;
}

#portfolio_page #blog-main-article .title-article-author .about-artist-img {
    width: 50px;
    height: 50px;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border: none;
    border-width: 0;
    border-style: none;
    border-color: transparent;
    border-radius: 50%;
    box-shadow: none;
    background-color: transparent;
}

#portfolio_page #blog-main-article #profil-infos {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

#portfolio_page #blog-main-article .author {
    color: var(--portfolios-text-main-color, inherit);
    font-weight: var(--portfolios-font-weight-bold, 700);
    line-height: 1.2;
}

#portfolio_page #blog-main-article .date {
    color: var(--portfolios-heading-secondary-color, currentColor);
    font-size: calc(var(--portfolios-font-size-base) * 0.9);
    line-height: 1.2;
    opacity: 0.82;
}

/* Chapô, illustration et corps */
#portfolio_page #subtitle-article {
    margin: 0;
    padding: 0;
}

#portfolio_page #subtitle-article h2.subtitle,
#portfolio_page #subtitle-article h2.subtitle p {
    margin: 0 0 1.25rem;
}

#portfolio_page #subtitle-article h2.subtitle:last-child {
    margin-bottom: 0;
}

#portfolio_page #subtitle-article .blog-article-cover {
    display: block;
    margin: 0 0 1.75rem;
}

#portfolio_page #subtitle-article:empty {
    display: none;
}

#portfolio_page #content-article {
    margin: 0;
    padding: 0;
}

#portfolio_page #subtitle-article + #content-article {
    margin-top: 0.5rem;
}

/* Sans illustration : reprendre le rythme visuel de l’image (marge + séparation) */
#portfolio_page #subtitle-article:has(h2.subtitle):not(:has(.blog-article-cover)) + #content-article {
    margin-top: 0;
    padding-top: 1.75rem;
    border-top: 1px solid color-mix(in srgb, var(--portfolios-thumbnail-border-color, currentColor) 45%, transparent);
}

#portfolio_page #content-article.content-article > :first-child {
    margin-top: 0;
}

#portfolio_page #media-article {
    margin: 2rem 0 0;
    padding: 0;
}

#portfolio_page #media-article > :last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 900px) {

    #portfolio_page #blog-article {
        gap: 2.5rem;
    }

    #portfolio_page #blog-main-article,
    #portfolio_page #media-article {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #portfolio_page #blog-about {
        gap: 2rem;
    }

}

/* -------------------------------------------------------------------------
   Article blog : partage & copie de lien (module CMS / vitrine).
   Les actions utilisent la même liste que le reste du portfolio (.social-medias).
   Variables --arkt-* : définies par le thème (ex. templates/custom/css/root.css).
   ------------------------------------------------------------------------- */

#portfolio_page #title-article .blog-article-copy-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin-top: 0.35rem;
}

#portfolio_page #title-article .blog-article-copy-link.is-copied {
  border-color: var(--arkt-rgba-valid-border, rgba(94, 234, 212, 0.45));
}

/* Barre d'actions de l'en-tête (confort de lecture + partage) : mise en page ici, contrôles dans layout/reading.css */
#portfolio_page #blog-main-article .blog-article-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, var(--pf-ctl-line)));
}

#portfolio_page #blog-main-article .blog-article-bar .blog-article-share {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

#portfolio_page #blog-main-article .blog-article-share__heading {
  margin: 0;
  font-size: var(--arkt-type-caption-size, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pf-ctl-ink-soft);
}

#portfolio_page #blog-main-article .blog-article-share__status.blog-article-copy-link__status {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0.35rem 0 0;
  font-size: var(--arkt-type-caption-size, 0.8125rem);
  white-space: nowrap;
  color: var(--pf-ctl-ink-soft);
}
}