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

/* ==========================================================================
   14. Catalogue commun — compléments
   Tous les éléments de contenu proposent les mêmes styles (portfolios_matrix_content_styles()).
   Ici, les combinaisons qui n'avaient pas encore de rendu propre. Familles :
   - cartes : polaroid (cadre clair, légère rotation) ; l'habillage vient du thème (themes/<slug>/cards.css) ;
   - dispositions : magazine (premier élément en grand), mosaic (tailles variées), bento (tuiles égales),
     feature (un par bandeau), carousel (défilement), list / journal / index (lignes) ;
   - texte : minimal, reveal (média montré au survol).
   Fond des cartes = « Couleur de fond des contenus » ; titre / texte = --pf-title / --pf-text (section 15).
   ========================================================================== */

/* --- Articles ------------------------------------------------------------ */
#portfolio_page .blog-list[data-articles-layout="polaroid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

/* Magazine, défilement (cartes à fond et contour) : le texte ne touche pas le bord de la carte.
   Éditorial dessine un magazine sans cadre : sa feuille de thème reprend la marge. */
#portfolio_page .blog-list:is([data-articles-layout="magazine"], [data-articles-layout="carousel"]) .article-blog-infos {
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)) calc(1.2rem * var(--pf-density-pad, 1));
}

/* « Couleur de la section voisine » : les cartes d'articles prennent le fond de l'autre
   alternance de section (paire ↔ impaire), pour un contraste entre la carte et la section. */
#portfolio_page:has(header[data-articles-neighbor="1"]) .section-bg-odd .blog-list {
    --pf-surface: var(--portfolios-section-color-pair, var(--portfolios-theme-bg-alt, var(--portfolios-bg-alt-color, #e2e2e2)));
}

#portfolio_page:has(header[data-articles-neighbor="1"]) .section-bg-pair .blog-list {
    --pf-surface: var(--portfolios-section-color-odd, var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa)));
}

/* Image hors carte (à côté du texte, plein bord, sans fond) : arrondie aux quatre coins. Le rendu
   tuile (thumbnails/main.css) n'arrondit que le haut, prévu pour un texte posé dessous dans la carte. */
#portfolio_page .blog-list:is([data-articles-layout="list"], [data-articles-layout="mosaic"], [data-articles-layout="feature"], [data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) .thumbnail-tile .thumb,
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumbnail-tile .thumb {
    border-radius: var(--pf-radius);
}

/* Polaroïd : image posée dans le cadre (pas contre le bord) : arrondie aux quatre coins. */
#portfolio_page .blog-list[data-articles-layout="polaroid"] .thumbnail-tile .thumb {
    border-radius: var(--pf-radius-inner);
}

/* Informations : même règle d'arrondi que les articles. Image à côté du texte → quatre coins ;
   grand format → image contre le bord, rognée par la carte (overflow: hidden), sans arrondi propre. */
#portfolio_page .informations-list:is([data-informations-layout="list"], [data-informations-layout="journal"], [data-informations-layout="index"], [data-informations-layout="reveal"]) .information-item__illustration,
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item:first-child .information-item__illustration {
    border-radius: var(--pf-radius);
}

#portfolio_page .informations-list[data-informations-layout="feature"] .information-item__illustration {
    border-radius: 0;
}

/* Page article : l'aside « Autres articles » reste sur une colonne. */
#portfolio_page #blog-about .blog-list[data-articles-layout] {
    grid-template-columns: minmax(0, 1fr);
}

#portfolio_page .blog-list[data-articles-layout="polaroid"] .thumbnail-tile {
    padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) 0;
    rotate: -1.5deg;
}

#portfolio_page .blog-list[data-articles-layout="polaroid"] > :nth-child(even) .thumbnail-tile {
    rotate: 1.5deg;
}

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

/* --- Œuvres -------------------------------------------------------------- */

#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
    --portfolios-thumbnail-overlay-title-color: var(--pf-ink);
    --portfolios-thumbnail-overlay-description-color: var(--pf-ink);
}

#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
    --portfolios-thumbnail-overlay-text-shadow: none;
    position: static;
    background: none;
    padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}

/* Bento : l'image remplit la tuile, la légende est une étiquette posée dans un coin
   (teinte de la tuile dépolie, section 15) : titre, catégorie en dessous. */
#portfolio_page .pf-thumbs[data-works-layout="bento"] > a {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
    overflow: hidden;
    padding: 0;
}

#portfolio_page .pf-thumbs[data-works-layout="bento"] > a > .poster {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
}

#portfolio_page .pf-thumbs[data-works-layout="bento"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
    --portfolios-thumbnail-overlay-title-color: var(--pf-title);
    --portfolios-thumbnail-overlay-description-color: var(--pf-text);
    --portfolios-thumbnail-overlay-text-shadow: none;
    position: absolute;
    top: auto;
    right: auto;
    left: 0.6rem;
    bottom: 0.6rem;
    width: auto;
    max-width: calc(100% - 1.2rem);
    padding: calc(0.5rem * var(--pf-density-pad, 1)) calc(0.85rem * var(--pf-density-pad, 1)) calc(0.55rem * 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 .pf-thumbs[data-works-layout="bento"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
    font-weight: 700;
}

#portfolio_page .pf-thumbs[data-works-layout="bento"] > a:nth-child(7n + 1) :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
    font-size: 1.3em;
}

/* Une seule colonne (petit mobile) : pas de vignette 2 × 2, elle créerait une colonne fantôme. */
@media (max-width: 529px) {
    #portfolio_page .pf-thumbs--portrait[data-works-layout="mosaic"] > a:nth-child(7n + 1),
    #portfolio_page .pf-thumbs:is(.pf-thumbs--landscape, .pf-thumbs--square)[data-works-layout="mosaic"] > a:nth-child(7n + 1),
    #portfolio_page .pf-thumbs[data-works-layout="bento"] > a:nth-child(7n + 1),
    #portfolio_page .pf-thumbs:is(.pf-thumbs--landscape, .pf-thumbs--square)[data-works-layout="magazine"] > a:first-child {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: var(--pf-work-ratio);
    }
}

/* Magazine : une œuvre en grand, les suivantes en grille */
/* Rangées au format des œuvres ; la première sur 2 × 2 garde donc le même format, en grand. */
#portfolio_page .pf-thumbs[data-works-layout="magazine"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: var(--layout-gap, 20px);
}

#portfolio_page .pf-thumbs[data-works-layout="magazine"] > a:first-child {
    grid-column: span 2;
    grid-row: span 2;
    /* Format propre (voir mosaïque) : ne s'écrase pas avec une seule œuvre. */
    aspect-ratio: var(--pf-work-ratio);
}

/* Journal / survol : une œuvre par ligne */
#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    counter-reset: pf-work;
}

#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) > a {
    display: grid;
    align-items: center;
    aspect-ratio: auto;
    counter-increment: pf-work;
}

#portfolio_page .pf-thumbs[data-works-layout="journal"] > a {
    grid-template-columns: 4rem var(--pf-work-thumb) minmax(0, 1fr);
    gap: calc(1rem * var(--pf-density-gap, 1));
    padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}

#portfolio_page .pf-thumbs[data-works-layout="journal"] > a::before {
    content: counter(pf-work, decimal-leading-zero);
    color: var(--pf-accent);
    font-size: 1.6em;
    font-weight: 700;
}

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

#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
    position: static;
    padding: 0;
    text-align: start;
}

/* Survol : petite vignette toujours visible (plus de ligne sans image). */
#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a > .poster {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
    border-radius: var(--pf-radius-inner);
}

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

#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a {
    position: relative;
    display: grid;
    width: auto;
    grid-template-columns: var(--pf-work-thumb) minmax(0, 1fr);
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    padding: calc(1.1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}

#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a > .poster {
    width: 100%;
    transform-origin: left center;
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

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

/* Survol : la vignette s'agrandit et passe au-dessus de la ligne. */
#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a:is(:hover, :focus-visible) > .poster {
    z-index: 2;
    scale: 1.9;
    box-shadow: var(--pf-drop-shadow);
}

/* --- Images -------------------------------------------------------------- */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="list"], [data-images-layout="feature"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="list"], [data-images-layout="feature"]) > a {
    width: auto;
    height: auto;
    padding: 0;
    aspect-ratio: var(--pf-card-ratio);
}

/* Carrés : « grand format » = deux par ligne, « liste » = une colonne étroite (jamais un bandeau). */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="feature"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="list"] {
    max-width: min(100%, 32rem);
    margin-inline: auto;
}

#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: calc(14px * var(--pf-density-gap, 1));
}

#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) > a {
    width: auto;
    height: auto;
    padding: 0;
    background-size: cover;
    background-position: center;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"] > a:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Cellules carrées : la hauteur suit la largeur de colonne (image recadrée en cover),
   les tuiles étendues gardent un multiple du carré. */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="mosaic"], [data-images-layout="bento"], [data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) > a {
    aspect-ratio: 1 / 1;
    height: auto;
    background-size: cover;
    background-position: center;
}

/* Journal : numéro de planche sur chaque image */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] {
    counter-reset: pf-image;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] > a {
    position: relative;
    counter-increment: pf-image;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] > a::before {
    content: counter(pf-image, decimal-leading-zero);
    position: absolute;
    left: 0.6rem;
    bottom: 0.5rem;
    padding: calc(0.15rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-surface);
    color: var(--pf-title);
    font-weight: 700;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="minimal"] {
    gap: calc(2px * var(--pf-density-gap, 1));
}

/* Survol : image toujours visible, elle s'avance au survol (zoom dans le cadre + ombre). */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="reveal"] > a {
    background-size: 100%;
    transition: background-size 0.4s ease, box-shadow 0.3s ease;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="reveal"] > a:is(:hover, :focus-visible) {
    background-size: 112%;
    box-shadow: var(--pf-drop-shadow);
}

/* --- Prix ---------------------------------------------------------------- */
#portfolio_page .awards-list[data-awards-layout="magazine"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(1rem * var(--pf-density-gap, 1));
}

#portfolio_page .awards-list[data-awards-layout="magazine"] .award {
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * var(--pf-density-gap, 1));
    padding: calc(1.25rem * var(--pf-density-pad, 1)) calc(1.4rem * var(--pf-density-pad, 1));
}

#portfolio_page .awards-list[data-awards-layout="magazine"] .award:first-child {
    grid-column: 1 / -1;
    padding: calc(2rem * var(--pf-density-pad, 1));
}

#portfolio_page .awards-list[data-awards-layout="magazine"] .award:first-child .award__name {
    font-size: 1.8em;
}

#portfolio_page .awards-list[data-awards-layout="magazine"] .award__index {
    color: var(--pf-title);
    font-weight: 700;
}

#portfolio_page .awards-list[data-awards-layout="magazine"] .award__logo {
    max-height: 3.5rem;
    width: auto;
    align-self: flex-start;
}

/* Texte seul : les prix à la suite, séparés par un point */
#portfolio_page .awards-list[data-awards-layout="minimal"] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.25rem * var(--pf-density-gap, 1)) 0;
}

#portfolio_page .awards-list[data-awards-layout="minimal"] :is(.award__index, .award__logo) {
    display: none;
}

#portfolio_page .awards-list[data-awards-layout="minimal"] .award:not(:last-child)::after {
    content: "·";
    margin-inline: 0.75rem;
    opacity: 0.6;
}

/* Survol : noms en grand, logo révélé au survol */
#portfolio_page .awards-list[data-awards-layout="reveal"] .award {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: calc(1rem * var(--pf-density-gap, 1));
    padding: calc(0.9rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page .awards-list[data-awards-layout="reveal"] .award__name {
    font-size: 1.6em;
}

#portfolio_page .awards-list[data-awards-layout="reveal"] .award__logo {
    position: absolute;
    right: 0;
    top: 50%;
    max-height: 4rem;
    width: auto;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.25s ease;
}

#portfolio_page .awards-list[data-awards-layout="reveal"] .award:hover .award__logo {
    opacity: 1;
}

/* --- Services ------------------------------------------------------------ */
#portfolio_page .services-slider:is([data-services-layout="magazine"], [data-services-layout="mosaic"], [data-services-layout="bento"], [data-services-layout="polaroid"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-gap, 20px);
}

#portfolio_page .services-slider:is([data-services-layout="magazine"], [data-services-layout="mosaic"], [data-services-layout="bento"], [data-services-layout="polaroid"]) > * {
    flex: none;
    width: auto;
    max-width: none;
}

/* Magazine : la première offre en bandeau, les autres dessous */
#portfolio_page .services-slider[data-services-layout="magazine"] > :first-child {
    grid-column: 1 / -1;
}

#portfolio_page .services-slider[data-services-layout="magazine"] > :first-child .service-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

/* Deux offres seulement (ordinateur) : deux colonnes égales, sans bandeau. */
@media (min-width: 1101px) {
    #portfolio_page .services-slider[data-services-layout="magazine"]:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #portfolio_page .services-slider[data-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child {
        grid-column: auto;
    }

    #portfolio_page .services-slider[data-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child .service-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
}

/* Mosaïque : l'offre populaire prend deux lignes */
#portfolio_page .services-slider[data-services-layout="mosaic"] {
    grid-auto-flow: dense;
}

#portfolio_page .services-slider[data-services-layout="mosaic"] > .populare {
    grid-row: span 2;
}

#portfolio_page .services-slider[data-services-layout="mosaic"] > .populare .service-item {
    height: 100%;
}

#portfolio_page .services-slider[data-services-layout="bento"] .service-item {
    height: 100%;
}

#portfolio_page .services-slider[data-services-layout="polaroid"] .service-item {
    padding-bottom: calc(2rem * var(--pf-density-pad, 1));
    rotate: -1.2deg;
}

#portfolio_page .services-slider[data-services-layout="polaroid"] > :nth-child(even) .service-item {
    rotate: 1.2deg;
}

/* Journal / survol : une offre par ligne */
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) {
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: pf-service;
}

#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) > * {
    flex: none;
    width: auto;
    max-width: none;
}

#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    padding: calc(1.1rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1));
    counter-increment: pf-service;
}

#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item::before {
    content: counter(pf-service, decimal-leading-zero);
    color: var(--pf-accent);
    font-size: 1.5em;
    font-weight: 700;
}

/* Badge « Populaire » sur sa propre ligne, au-dessus du titre (dans la grille : il ne peut pas déborder sur le
   texte, quelle que soit sa taille), large comme son texte ; le numéro couvre les deux lignes. */
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-badge {
    grid-column: 2 / -1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    transform: none;
}

#portfolio_page .services-slider[data-services-layout="journal"] .service-item:has(> .service-badge)::before {
    grid-row: 1 / span 2;
}

#portfolio_page .services-slider[data-services-layout="reveal"] .service-badge {
    grid-column: 1 / -1;
}

/* Une offre par ligne : le filet sépare les lignes entières (pas seulement le titre), le bouton reste centré dans
   la sienne, au-dessus du filet. */
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item {
    border-bottom: var(--pf-rule-width) solid var(--pf-rule-color);
}

#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .full-width-btn {
    width: auto;
    white-space: nowrap;
}

#portfolio_page .services-slider[data-services-layout="reveal"] .service-item::before {
    content: none;
}

#portfolio_page .services-slider[data-services-layout="reveal"] .service-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

#portfolio_page .services-slider[data-services-layout="reveal"] .service-body {
    display: none;
    grid-column: 1 / -1;
}

#portfolio_page .services-slider[data-services-layout="reveal"] .service-item:is(:hover, :focus-within) .service-body {
    display: block;
}

#portfolio_page .services-slider[data-services-layout="reveal"] .service-title {
    font-size: 1.5em;
}

/* Défilement horizontal */
#portfolio_page .services-slider[data-services-layout="carousel"] {
    display: flex;
    flex-wrap: nowrap;
    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;
}

#portfolio_page .services-slider[data-services-layout="carousel"] > * {
    flex: 0 0 clamp(15rem, 30vw, 21rem);
    max-width: none;
    scroll-snap-align: start;
}

/* --- Agenda -------------------------------------------------------------- */
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-gap, 20px);
}

#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"], [data-events-layout="carousel"]) .agenda-item {
    flex-direction: column;
    gap: calc(1rem * var(--pf-density-gap, 1));
    margin: 0;
    padding: calc(1.25rem * var(--pf-density-pad, 1));
}

#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"], [data-events-layout="carousel"]) .agenda-item .date {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(0.4rem * var(--pf-density-gap, 1));
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: calc(0.4rem * var(--portfolios-badge-pad, 1)) calc(0.75rem * var(--portfolios-badge-pad, 1));
    align-self: flex-start;
}

#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"]) .agenda-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: flex-end;
    padding: calc(2rem * var(--pf-density-pad, 1));
}

#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"]) .agenda-item:first-child h3 {
    font-size: 1.8em;
}

#portfolio_page #agenda-list[data-events-layout="magazine"] .agenda-item:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
}

#portfolio_page #agenda-list[data-events-layout="mosaic"] {
    grid-auto-flow: dense;
}

#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item {
    padding-bottom: calc(2rem * var(--pf-density-pad, 1));
    rotate: -1.2deg;
}

#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item:nth-child(even) {
    rotate: 1.2deg;
}

/* Index numéroté : tableau numéro · date · titre */
#portfolio_page #agenda-list[data-events-layout="index"] {
    counter-reset: pf-event;
}

#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item {
    align-items: center;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
    margin: 0;
    padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
    counter-increment: pf-event;
}

#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item::before {
    content: counter(pf-event, decimal-leading-zero);
    min-width: 2.5rem;
    color: var(--pf-accent);
    font-weight: 700;
}

#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item .date {
    flex-direction: row;
    gap: calc(0.35rem * var(--pf-density-gap, 1));
    min-width: 9rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
}

#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item .date p {
    color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--pf-accent)));
}

/* Défilement horizontal */
#portfolio_page #agenda-list[data-events-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;
}

#portfolio_page #agenda-list[data-events-layout="carousel"] .agenda-item {
    flex: 0 0 clamp(15rem, 30vw, 20rem);
    scroll-snap-align: start;
}

/* Survol : titres en grand, détails au survol */
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item {
    align-items: baseline;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
    margin: 0;
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1));
}

#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item .date {
    flex-direction: row;
    gap: calc(0.35rem * var(--pf-density-gap, 1));
    min-width: 8rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
}

#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item .date p {
    color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--pf-accent)));
}

#portfolio_page #agenda-list[data-events-layout="reveal"] h3 {
    font-size: 1.6em;
}

#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item ul li:not(.date):not(:first-child) {
    display: none;
}

#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item:is(:hover, :focus-visible) ul li:not(.date):not(:first-child) {
    display: list-item;
}

@media (max-width: 1100px) {

    /* Œuvres : colonnes de grid.css (--_thumbs) à tous les paliers ; vignette du journal réduite, format gardé. */
    #portfolio_page .pf-thumbs[data-works-layout="journal"] > a {
        grid-template-columns: 3rem calc(var(--pf-work-thumb) * 0.75) minmax(0, 1fr);
    }

    #portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    #portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="feature"] {
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page .awards-list[data-awards-layout="magazine"] {
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page .services-slider[data-services-layout="magazine"] > :first-child .service-item,
    #portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #portfolio_page .services-slider[data-services-layout="mosaic"] > .populare {
        grid-row: auto;
    }

    /* Une offre par ligne (services.css le pose pour tous les gabarits, ces trois colonnes l'emportaient). */
    #portfolio_page .services-slider:is([data-services-layout="magazine"], [data-services-layout="mosaic"], [data-services-layout="bento"], [data-services-layout="polaroid"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"]) .agenda-item:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    #portfolio_page #agenda-list:is([data-events-layout="index"], [data-events-layout="reveal"]) .agenda-item {
        flex-wrap: wrap;
        gap: calc(0.5rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
    }
}
}