/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — articles (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   4. Articles
   Balisage : .blog-list > .blog-list__item > a.thumbnail-tile > .thumb + .article-blog-infos
   ========================================================================== */

#portfolio_page .blog-list:not([data-articles-layout="grid"]) .thumbnail-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

#portfolio_page .blog-list:not([data-articles-layout="grid"]) .thumb {
    position: relative;
    padding-bottom: 60%;
    background-size: cover;
    background-position: center;
}

#portfolio_page .blog-list:not([data-articles-layout="grid"]) .article-blog-infos {
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}

/* --- Magazine : une grande « une », puis colonnes ------------------------- */
#portfolio_page .blog-list[data-articles-layout="magazine"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(2.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}

#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child {
    grid-column: 1 / -1;
}

#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumbnail-tile {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: calc(2.5rem * var(--pf-density-gap, 1));
    align-items: center;
}

#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumb {
    padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */
}

#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .article-blog-infos__title {
    /* Tailles dérivées de la taille des titres du générateur (blog.css les fixe en !important). */
    font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 2);
    line-height: 1.1;
}

/* --- Mosaïque plein bord ------------------------------------------------- */
#portfolio_page .blog-list[data-articles-layout="mosaic"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 14rem;
    grid-auto-flow: dense;
    gap: calc(4px * var(--pf-density-gap, 1));
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] > :nth-child(5n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] > :nth-child(5n + 4) {
    grid-row: span 2;
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] .thumbnail-tile {
    position: relative;
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] .thumb {
    position: absolute;
    inset: 0;
    padding: 0;
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] .article-blog-infos {
    position: absolute;
    inset: auto 0 0;
    padding: calc(2.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
    color: var(--pf-on-media);
    /* Dégradé « Textes des vignettes » (/theme) : le texte (--pf-on-media) est contrasté pour lui. */
    background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent));
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] .thumbnail-tile:is(:hover, :focus-visible) .article-blog-infos {
    opacity: 1;
    transform: none;
}

#portfolio_page .blog-list[data-articles-layout="mosaic"] .article-blog-infos__description {
    display: none;
}

/* --- Index (tableau numéroté) / journal / survol : listes en lignes ------- */
#portfolio_page .blog-list:is([data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) {
    display: block;
    counter-reset: pf-article;
}

#portfolio_page .blog-list:is([data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) > * {
    counter-increment: pf-article;
}

#portfolio_page .blog-list:is([data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) .thumb {
    display: none;
}

#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: baseline;
    padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile::before {
    content: counter(pf-article, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}

#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 calc(2rem * var(--pf-density-gap, 1));
    padding: 0;
}

#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos__meta {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
}

#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos__description {
    grid-column: 1;
    margin: 0.35rem 0 0;
    opacity: 0.75;
}

#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile:hover .article-blog-infos__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Journal : date en marge */
#portfolio_page .blog-list[data-articles-layout="journal"] .thumbnail-tile {
    display: block;
    padding: calc(1.5rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: calc(0.25rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
    padding: 0;
}

#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos > * {
    grid-column: 2;
}

#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos__meta {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0.3rem 0 0;
    font-style: italic;
    opacity: 0.7;
}

/* Liste « image qui suit la souris » (cinétique) — image positionnée par matrix-reveal (header.js) */
#portfolio_page .blog-list[data-articles-layout="reveal"] .thumbnail-tile {
    display: block;
    padding: calc(1.25rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page .blog-list[data-articles-layout="reveal"] .article-blog-infos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(0.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
    padding: 0;
}

#portfolio_page .blog-list[data-articles-layout="reveal"] .article-blog-infos__title {
    font-size: clamp(calc(var(--portfolios-heading-secondary-size, 14px) * 1.4), 4vw, calc(var(--portfolios-heading-secondary-size, 14px) * 2.6));
    line-height: 1.05;
    letter-spacing: -0.02em;
    transition: translate 0.35s ease, opacity 0.35s ease;
}

#portfolio_page .blog-list[data-articles-layout="reveal"]:hover .thumbnail-tile:not(:hover) .article-blog-infos__title {
    opacity: 0.35;
}

#portfolio_page .blog-list[data-articles-layout="reveal"] .thumbnail-tile:hover .article-blog-infos__title {
    translate: 0.75rem 0;
}

#portfolio_page .blog-list[data-articles-layout="reveal"] .article-blog-infos__description {
    display: none;
}

.matrix-reveal-image {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 700;
    width: 18rem;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: var(--pf-radius);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.matrix-reveal-image.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- Bento : grille à tailles variées (articles ; œuvres plus bas) -----------
   Un seul motif, repris tous les 7 éléments sur 4 colonnes × 3 rangées : une grande tuile 2 × 2,
   deux tuiles larges 2 × 1, quatre petites. Rangées de hauteur fixe : l'image remplit la tuile.
   Sous 1100px : 2 colonnes, la grande tuile et les larges prennent toute la ligne. */
#portfolio_page .blog-list[data-articles-layout="bento"] {
    --pf-bento-row: clamp(10rem, 16vw, 16rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: var(--pf-bento-row);
    grid-auto-flow: dense;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
}

#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

#portfolio_page .blog-list[data-articles-layout="bento"] > :is(:nth-child(7n + 2), :nth-child(7n + 5)) {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    #portfolio_page .blog-list[data-articles-layout="bento"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Œuvres : mêmes tuiles teintées, mais jamais de tuile « large » (2 × 1) : une affiche ou un album ne devient pas
   un bandeau. Colonnes de grid.css (--_thumbs), tuiles au format de l'œuvre ; une grande tuile 2 × 2 sur sept
   garde ce format (comme la mosaïque). */
#portfolio_page .pf-thumbs[data-works-layout="bento"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
}

#portfolio_page .pf-thumbs[data-works-layout="bento"] > a:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Article : comme les œuvres, l'image remplit la tuile et le texte tient dans une étiquette
   (titre + catégorie / date) ; la description n'apparaît que dans la grande tuile. */
#portfolio_page .blog-list[data-articles-layout="bento"] > * {
    min-height: 0;
}

#portfolio_page .blog-list[data-articles-layout="bento"] .thumbnail-tile {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
}

#portfolio_page .blog-list[data-articles-layout="bento"] .thumbnail-tile .thumb {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
}

#portfolio_page .blog-list[data-articles-layout="bento"] .article-blog-infos {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    max-width: calc(100% - 1.2rem);
    padding: calc(0.55rem * var(--pf-density-pad, 1)) calc(0.85rem * var(--pf-density-pad, 1)) calc(0.6rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: color-mix(in srgb, var(--pf-tile, var(--pf-surface)) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#portfolio_page .blog-list[data-articles-layout="bento"] .article-blog-infos__title {
    font-weight: 700;
}

#portfolio_page .blog-list[data-articles-layout="bento"] > :not(:nth-child(7n + 1)) .article-blog-infos__description {
    display: none;
}

/* Grande tuile : étiquette plus large, titre plus grand, description sur 2 lignes. */
#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) .article-blog-infos {
    max-width: min(28rem, calc(100% - 1.2rem));
    padding: calc(0.85rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)) calc(0.95rem * var(--pf-density-pad, 1));
}

#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) .article-blog-infos__title {
    font-size: 1.35em;
}

#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) .article-blog-infos__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* --- Grand format : un article par bandeau ------------------------------- */
#portfolio_page .blog-list[data-articles-layout="feature"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(3rem * var(--pf-density-gap, 1));
}

#portfolio_page .blog-list[data-articles-layout="feature"] .thumbnail-tile {
    position: relative;
    min-height: min(78vh, 44rem);
    justify-content: flex-end;
}

#portfolio_page .blog-list[data-articles-layout="feature"] .thumb {
    position: absolute;
    inset: 0;
    padding: 0;
}

#portfolio_page .blog-list[data-articles-layout="feature"] .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Dégradé « Textes des vignettes » (/theme), sur le bas de l'image : le texte (--pf-on-media) est contrasté pour lui. */
    background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent)) bottom / 100% 65% no-repeat;
    opacity: 1;
}

#portfolio_page .blog-list[data-articles-layout="feature"] .article-blog-infos {
    position: relative;
    flex: 0 0 auto;
    max-width: 46rem;
    margin-top: auto;
    padding: calc(2.5rem * var(--pf-density-pad, 1));
    color: var(--pf-on-media);
}

#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .article-blog-infos :is(h4, p, span, time) {
    color: var(--pf-on-media);
}

/* Article sans image (fond de remplacement clair) : pas de voile, texte aux couleurs du thème. */
#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .thumb::after {
    background: none;
}

#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .article-blog-infos {
    color: var(--pf-ink);
    background: none; /* voile de la mosaïque */
}

#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .article-blog-infos :is(h4, p, span, time) {
    color: var(--pf-ink);
}

#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .article-blog-infos__title {
    color: var(--portfolios-heading-secondary-color, var(--pf-ink));
}

#portfolio_page .blog-list[data-articles-layout="feature"] .article-blog-infos__title {
    font-size: clamp(calc(var(--portfolios-heading-secondary-size, 14px) * 1.6), 5vw, calc(var(--portfolios-heading-secondary-size, 14px) * 3.2));
    line-height: 1.02;
    text-transform: var(--portfolios-title-transform, uppercase);
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    #portfolio_page .blog-list[data-articles-layout="magazine"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumbnail-tile {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    #portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .article-blog-infos__title {
        font-size: 1.6em;
    }

    #portfolio_page .blog-list[data-articles-layout="mosaic"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 11rem;
    }

    /* Mobile : pas de survol → légende toujours visible. */
    #portfolio_page .blog-list[data-articles-layout="mosaic"] .article-blog-infos {
        opacity: 1;
        transform: none;
        padding: calc(1.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1));
        font-size: 0.85em;
    }

    #portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    #portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos {
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos__meta {
        grid-column: 1;
        grid-row: auto;
    }

    #portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos {
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos__meta {
        grid-row: auto;
        order: -1;
    }

    #portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos > * {
        grid-column: 1;
    }

    #portfolio_page .blog-list[data-articles-layout="feature"] {
        gap: 0;
        margin-inline: -20px;
    }

    /* Format portrait au lieu de presque tout l'écran (88svh) : on voit l'article suivant arriver. */
    #portfolio_page .blog-list[data-articles-layout="feature"] .thumbnail-tile {
        min-height: 0;
        aspect-ratio: 4 / 5;
        scroll-snap-align: start;
    }

    #portfolio_page .blog-list[data-articles-layout="feature"] .article-blog-infos {
        padding: calc(1.5rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1));
    }
}

@media (max-width: 640px) {
    #portfolio_page .blog-list[data-articles-layout="magazine"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   9. Articles — gabarits ajoutés : list · minimal · carousel
   ========================================================================== */

/* Liste illustrée : image à gauche, texte à droite */
#portfolio_page .blog-list[data-articles-layout="list"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(1.25rem * var(--pf-density-gap, 1));
}

#portfolio_page .blog-list[data-articles-layout="list"] .thumbnail-tile {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
    gap: calc(1.5rem * var(--pf-density-gap, 1));
    align-items: center;
}

#portfolio_page .blog-list[data-articles-layout="list"] .thumb {
    padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */
}

#portfolio_page .blog-list[data-articles-layout="list"] .article-blog-infos {
    padding: calc(0.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1)) 0;
}

/* Titres seuls : grande typographie, sans image */
#portfolio_page .blog-list[data-articles-layout="minimal"] {
    display: block;
}

#portfolio_page .blog-list[data-articles-layout="minimal"] .thumb,
#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos__description {
    display: none;
}

#portfolio_page .blog-list[data-articles-layout="minimal"] .thumbnail-tile {
    display: block;
    padding: calc(0.9rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(0.25rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
    padding: 0;
}

#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos__title {
    font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 1.6);
    line-height: 1.15;
}

#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos__meta {
    margin: 0;
    opacity: 0.6;
}

/* Carrousel : défilement horizontal aimanté */
#portfolio_page .blog-list[data-articles-layout="carousel"] {
    display: flex;
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

#portfolio_page .blog-list[data-articles-layout="carousel"] > * {
    flex: 0 0 clamp(15rem, 28vw, 22rem);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    #portfolio_page .blog-list[data-articles-layout="list"] .thumbnail-tile {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: calc(0.9rem * var(--pf-density-gap, 1));
    }

    #portfolio_page .blog-list[data-articles-layout="list"] .article-blog-infos__description {
        display: none;
    }

    #portfolio_page .blog-list[data-articles-layout="carousel"] > * {
        flex-basis: 78vw;
    }
}
}