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

/* ==========================================================================
   12. Œuvres — [data-works-layout] sur chaque .pf-thumbs (productions, livres,
   discographie, projets, albums photo) : un seul design pour toutes les œuvres.
   Balisage : .pf-thumbs > a.(vertical|horizontal|square)-grid-item > .poster + .(…)-infos
   (`grid` = rendu historique : grid.css, un format par type d'œuvre)
   ========================================================================== */

/* Orientation préservée dans tous les thèmes : une œuvre verticale (affiche, livre) reste verticale,
   une horizontale (projet) reste horizontale, un carré (album) reste carré. Mêmes formats que la grille
   historique (grid.css : 2/3, 2/1, 1/1). --pf-work-thumb = largeur d'une vignette en ligne (liste, journal).
   Colonnes : toujours celles de grid.css par palier et par orientation (--_thumbs), aucune mise en page
   n'en ajoute. Les mises en page ne changent que la disposition, jamais le format ni le nombre par ligne. */
#portfolio_page .pf-thumbs[data-works-layout]:where(:not([data-works-layout="grid"])) {
    --pf-work-ratio: 2 / 3;
    --pf-work-thumb: 4.5rem;
}

#portfolio_page .pf-thumbs--landscape[data-works-layout]:where(:not([data-works-layout="grid"])) {
    --pf-work-ratio: 2 / 1;
    --pf-work-thumb: 9rem;
}

#portfolio_page .pf-thumbs--square[data-works-layout]:where(:not([data-works-layout="grid"])) {
    --pf-work-ratio: 1 / 1;
    --pf-work-thumb: 6rem;
}

/* Grille, œuvres verticales : une par ligne sur mobile (deux affiches côte à côte étaient trop petites). */
#portfolio_page .pf-thumbs--portrait[data-works-layout="grid"] {
    --thumbs-xs: 1;
}

/* Hors grille historique : la vignette prend sa hauteur du format de son type d'œuvre. */
#portfolio_page .pf-thumbs[data-works-layout]:where(:not([data-works-layout="grid"])) > a {
    height: auto;
    padding: 0;
    aspect-ratio: var(--pf-work-ratio);
}

/* Texte posé à côté de l'image (liste, titres seuls) : couleurs du thème, pas celles de la surimpression. */
#portfolio_page .pf-thumbs:is([data-works-layout="list"], [data-works-layout="minimal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
    --portfolios-thumbnail-overlay-title-color: var(--pf-ink);
    --portfolios-thumbnail-overlay-description-color: color-mix(in srgb, var(--pf-ink) 70%, transparent);
    --portfolios-thumbnail-overlay-text-shadow: none;
    position: static;
    background: none;
}

/* Liste illustrée : vignette à gauche, titre et sous-titre à droite */
#portfolio_page .pf-thumbs[data-works-layout="list"] {
    grid-template-columns: minmax(0, 1fr);
}

#portfolio_page .pf-thumbs[data-works-layout="list"] > a {
    display: grid;
    grid-template-columns: var(--pf-work-thumb) minmax(0, 1fr);
    align-items: center;
    aspect-ratio: auto;
}

/* Vignette au format de l'œuvre (verticale étroite, horizontale large). */
#portfolio_page .pf-thumbs[data-works-layout="list"] > a > .poster {
    position: relative;
    grid-row: 1;
    align-self: center;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
}

#portfolio_page .pf-thumbs[data-works-layout="list"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
    grid-column: 2;
    grid-row: 1;
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1));
}

/* Mosaïque : tailles variées, sans marge entre les vignettes */
#portfolio_page .pf-thumbs[data-works-layout="mosaic"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(4px * var(--pf-density-gap, 1));
}

/* Une vignette en grand toutes les sept : 2 colonnes × 2 rangées, donc même format que les autres
   (une vignette sur 2 colonnes et 1 rangée écraserait une affiche ou étirerait un projet). */
#portfolio_page .pf-thumbs[data-works-layout="mosaic"] > a:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
    /* Format propre (pas « auto ») : seule ou presque seule, la vignette ne dépend pas des rangées voisines
       (sinon elle s'écrase à quelques pixels de haut). */
    aspect-ratio: var(--pf-work-ratio);
}

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

/* Autant de vignettes visibles que de colonnes de la grille. */
#portfolio_page .pf-thumbs[data-works-layout="carousel"] > a {
    flex: 0 0 calc((100% - (var(--_thumbs) - 1) * var(--layout-gap, 20px)) / var(--_thumbs));
    scroll-snap-align: start;
}

#portfolio_page [id^="home-section-"] .pf-thumbs[data-works-layout="carousel"] > a {
    display: block;
}

/* Bento : grille à tailles variées, avec les articles (section 4). */


/* Grand format : une œuvre par bandeau */
/* Œuvres horizontales : une par ligne, au format de leur type (2/1, comme la grille historique) ;
   verticales et carrées : grands formats, une colonne de moins que la grille. */
#portfolio_page .pf-thumbs[data-works-layout="feature"] {
    grid-template-columns: repeat(max(1, calc(var(--_thumbs) - 1)), minmax(0, 1fr));
    gap: calc(2rem * var(--pf-density-gap, 1));
}

#portfolio_page .pf-thumbs--landscape[data-works-layout="feature"] {
    grid-template-columns: minmax(0, 1fr);
}

#portfolio_page .pf-thumbs[data-works-layout="feature"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
    padding: calc(3rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1));
}

#portfolio_page .pf-thumbs[data-works-layout="feature"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
    font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 2);
    line-height: 1.1;
}

/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), légère rotation */
/* Format de l'œuvre gardé dans le cadre ; colonnes réduites pour les carrés seulement
   (horizontales et verticales gardent les colonnes de leur type : 3 puis 4 pour les verticales). */
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] {
    gap: calc(2rem * var(--pf-density-gap, 1));
    padding: calc(0.75rem * var(--pf-density-pad, 1));
}

#portfolio_page .pf-thumbs--square[data-works-layout="polaroid"] {
    --thumbs-xs: 2;
    --thumbs-sm: 3;
    --thumbs-md: 3;
    --thumbs-lg: 4;
    --thumbs-xl: 4;
}

/* Le cadre (bordures épaisses, bas plus large) mangerait le format : il est porté par l'image. */
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a {
    aspect-ratio: auto;
}

#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a > .poster {
    position: relative;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
}

#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a {
    background-clip: padding-box;
    transition: rotate 0.2s ease;
}

#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a:nth-child(odd) {
    rotate: -1deg;
}

#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a:nth-child(even) {
    rotate: 1deg;
}

#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a:hover {
    rotate: 0deg;
}

/* Planche contact : petites vignettes serrées, titre au survol */
#portfolio_page .pf-thumbs[data-works-layout="index"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    gap: calc(4px * var(--pf-density-gap, 1));
    padding: calc(8px * var(--pf-density-pad, 1));
    background: var(--pf-ink);
}


/* Index numéroté : numéro sur chaque vignette, titre toujours lisible. */
#portfolio_page .pf-thumbs[data-works-layout="index"] {
    counter-reset: pf-work;
}

#portfolio_page .pf-thumbs[data-works-layout="index"] > a {
    position: relative;
    isolation: isolate;
    counter-increment: pf-work;
}

#portfolio_page .pf-thumbs[data-works-layout="index"] > a::before {
    content: counter(pf-work, decimal-leading-zero);
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 10;
    padding: calc(0.05rem * var(--pf-density-pad, 1)) calc(0.4rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-ink);
    color: var(--pf-on-accent);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Titres seuls : liste typographique, filets entre les œuvres */
#portfolio_page .pf-thumbs[data-works-layout="minimal"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

#portfolio_page .pf-thumbs[data-works-layout="minimal"] > a {
    aspect-ratio: auto;
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page .pf-thumbs[data-works-layout="minimal"] > a > :is(.poster, .no-illustration__icon) {
    display: none;
}

#portfolio_page .pf-thumbs[data-works-layout="minimal"] > a.no-illustration {
    background-image: none;
}

#portfolio_page .pf-thumbs[data-works-layout="minimal"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
    padding: 0;
}

#portfolio_page .pf-thumbs[data-works-layout="minimal"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
    font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 1.4);
}

@media (max-width: 1100px) {

    /* Grande vignette (2 × 2) seulement s'il y a au moins 3 colonnes : sinon elle remplit la ligne
       et crée une colonne fantôme quand la grille n'en a qu'une. */
    #portfolio_page .pf-thumbs--landscape[data-works-layout="mosaic"] > a:nth-child(7n + 1) {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: var(--pf-work-ratio);
    }

    #portfolio_page .pf-thumbs--landscape[data-works-layout="feature"] {
        --pf-work-ratio: 16 / 9;
        grid-template-columns: minmax(0, 1fr);
    }
}
}