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

/* ==========================================================================
   15. Habillage des cartes — une seule définition par style, pour tous les éléments
   Articles, enquêtes, œuvres, images, prix, agenda, services, informations : un même style donne
   la même carte. Contour, arrondi, ombre = réglages de l'utilisateur (section 0) ; le fond des
   contenus n'est posé que par les styles à carte (cartes, bento, polaroïd). L'habillage propre à
   chaque thème est dans themes/<slug>/cards.css. Les styles en lignes ou texte seul restent sans fond et gardent les couleurs de la page.
   Les sections 4 à 14 ne fixent que la disposition (grille, proportions, typographie, décors) :
   aucune bordure, aucun fond, aucune ombre sur la carte elle-même.
   « grid » = rendu historique (thumbnails/main.css, .border-design), non touché ici.
   ========================================================================== */

/* Cartes : fond des contenus, contour et ombre de l'utilisateur. */
#portfolio_page :is(
    .blog-list[data-articles-layout="magazine"] .thumbnail-tile,
    .blog-list[data-articles-layout="carousel"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="magazine"] > a,
    .pf-thumbs[data-works-layout="carousel"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] > a,
    .awards-list[data-awards-layout="magazine"] .award,
    .awards-list[data-awards-layout="carousel"] .award,
    #agenda-list[data-events-layout="magazine"] .agenda-item,
    #agenda-list[data-events-layout="carousel"] .agenda-item,
    .services-slider[data-services-layout="magazine"] .service-item,
    .services-slider[data-services-layout="carousel"] .service-item,
    .informations-list[data-informations-layout="magazine"] .information-item,
    .informations-list[data-informations-layout="carousel"] .information-item,
    [data-recommendations-layout="carousel"] .recommendation-card
) {
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}

/* Lecteurs intégrés (vidéos, lecteurs d'un album : shared/includes/ui/media_embeds.php) : un cadre, jamais
   l'intérieur (il appartient à la plateforme). Contour et arrondi de l'utilisateur (.border-design,
   .portfolios-border-radius-l) ; habillage du thème avec ses cartes par défaut (themes/<slug>/cards.css). */
#portfolio_page .pf-embed {
    overflow: hidden;
}

#portfolio_page .pf-embed > iframe {
    display: block;
    border: 0;
}

/* Casse des titres (/theme) sur les titres de toutes les cartes. Spécificité nulle : un thème ou une disposition qui
   veut sa propre casse la pose avec var(--portfolios-title-transform, …) et garde donc le réglage prioritaire. */
#portfolio_page :where(.article-blog-infos__title, .agenda-item h3, .service-title, .award__name,
    .information-item__title, .about-timeline-title, .casting-section-title, .survey-title,
    :is(.vertical-infos, .horizontal-infos, .square-infos) h4) {
    text-transform: var(--portfolios-title-transform);
}

/* Bento : compartiments teintés tour à tour (--pf-tint-1..4), soulevés au survol. */
#portfolio_page :is(
    .blog-list[data-articles-layout="bento"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="bento"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a,
    .awards-list[data-awards-layout="bento"] .award,
    #agenda-list[data-events-layout="bento"] .agenda-item,
    .services-slider[data-services-layout="bento"] .service-item,
    .informations-list[data-informations-layout="bento"] .information-item,
    [data-recommendations-layout="bento"] .recommendation-card
) {
    --pf-tile: var(--pf-tint-1);
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-tile);
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
    transition: box-shadow 0.25s ease;
}

#portfolio_page :is(
    .blog-list[data-articles-layout="bento"] > :nth-child(4n + 2) .thumbnail-tile,
    .pf-thumbs[data-works-layout="bento"] > a:nth-child(4n + 2),
    :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(4n + 2),
    .awards-list[data-awards-layout="bento"] .award:nth-child(4n + 2),
    #agenda-list[data-events-layout="bento"] .agenda-item:nth-child(4n + 2),
    .services-slider[data-services-layout="bento"] .service-item:nth-child(4n + 2),
    .informations-list[data-informations-layout="bento"] .information-item:nth-child(4n + 2),
    [data-recommendations-layout="bento"] .recommendation-card:nth-child(4n + 2)
) {
    --pf-tile: var(--pf-tint-2);
}

#portfolio_page :is(
    .blog-list[data-articles-layout="bento"] > :nth-child(4n + 3) .thumbnail-tile,
    .pf-thumbs[data-works-layout="bento"] > a:nth-child(4n + 3),
    :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(4n + 3),
    .awards-list[data-awards-layout="bento"] .award:nth-child(4n + 3),
    #agenda-list[data-events-layout="bento"] .agenda-item:nth-child(4n + 3),
    .services-slider[data-services-layout="bento"] .service-item:nth-child(4n + 3),
    .informations-list[data-informations-layout="bento"] .information-item:nth-child(4n + 3),
    [data-recommendations-layout="bento"] .recommendation-card:nth-child(4n + 3)
) {
    --pf-tile: var(--pf-tint-3);
}

#portfolio_page :is(
    .blog-list[data-articles-layout="bento"] > :nth-child(4n + 4) .thumbnail-tile,
    .pf-thumbs[data-works-layout="bento"] > a:nth-child(4n + 4),
    :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(4n + 4),
    .awards-list[data-awards-layout="bento"] .award:nth-child(4n + 4),
    #agenda-list[data-events-layout="bento"] .agenda-item:nth-child(4n + 4),
    .services-slider[data-services-layout="bento"] .service-item:nth-child(4n + 4),
    .informations-list[data-informations-layout="bento"] .information-item:nth-child(4n + 4),
    [data-recommendations-layout="bento"] .recommendation-card:nth-child(4n + 4)
) {
    --pf-tile: var(--pf-tint-4);
}

#portfolio_page :is(
    .blog-list[data-articles-layout="bento"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="bento"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a,
    .awards-list[data-awards-layout="bento"] .award,
    #agenda-list[data-events-layout="bento"] .agenda-item,
    .services-slider[data-services-layout="bento"] .service-item,
    .informations-list[data-informations-layout="bento"] .information-item,
    [data-recommendations-layout="bento"] .recommendation-card
):hover {
    box-shadow: var(--pf-shadow), var(--pf-drop-shadow);
}

/* Bento : l'image remplit la tuile, la carte (overflow: hidden) la rogne à ses coins. */
#portfolio_page .blog-list[data-articles-layout="bento"] .thumbnail-tile .thumb {
    border-radius: var(--pf-radius-inner);
}

/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), bas plus large. */
#portfolio_page :is(
    .blog-list[data-articles-layout="polaroid"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="polaroid"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a,
    .awards-list[data-awards-layout="polaroid"] .award,
    #agenda-list[data-events-layout="polaroid"] .agenda-item,
    .services-slider[data-services-layout="polaroid"] .service-item,
    .informations-list[data-informations-layout="polaroid"] .information-item,
    [data-recommendations-layout="polaroid"] .recommendation-card
) {
    --pf-theme-shadow: var(--pf-drop-shadow);
    border: calc(10px + var(--pf-border-width)) solid var(--portfolios-thumbnail-contour-color, var(--pf-surface));
    border-bottom-width: calc(28px + var(--pf-border-width));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}

/* Mosaïque / grand format / planche contact (index des œuvres et images) : l'image occupe la carte, pas de fond. */
#portfolio_page :is(
    .blog-list[data-articles-layout="mosaic"] .thumbnail-tile,
    .blog-list[data-articles-layout="feature"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="mosaic"] > a,
    .pf-thumbs[data-works-layout="feature"] > a,
    .pf-thumbs[data-works-layout="index"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="feature"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] > a,
    .awards-list[data-awards-layout="mosaic"] .award,
    .awards-list[data-awards-layout="feature"] .award,
    #agenda-list[data-events-layout="mosaic"] .agenda-item,
    #agenda-list[data-events-layout="feature"] .agenda-item,
    .services-slider[data-services-layout="mosaic"] .service-item,
    .services-slider[data-services-layout="feature"] .service-item,
    .informations-list[data-informations-layout="mosaic"] .information-item,
    .informations-list[data-informations-layout="feature"] .information-item,
    [data-recommendations-layout="feature"] .recommendation-card
) {
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    background-color: transparent;
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}

/* Lignes (liste, index, journal) : filet de séparation des sections, pas de fond. */
#portfolio_page :is(
    .blog-list[data-articles-layout="list"] .thumbnail-tile,
    .blog-list[data-articles-layout="index"] .thumbnail-tile,
    .blog-list[data-articles-layout="journal"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="list"] > a,
    .pf-thumbs[data-works-layout="journal"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="list"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] > a,
    .awards-list[data-awards-layout="list"] .award,
    .awards-list[data-awards-layout="index"] .award,
    .awards-list[data-awards-layout="journal"] .award,
    #agenda-list[data-events-layout="list"] .agenda-item,
    #agenda-list[data-events-layout="index"] .agenda-item,
    #agenda-list[data-events-layout="journal"] .agenda-item,
    .services-slider[data-services-layout="list"] .service-item,
    .services-slider[data-services-layout="index"] .service-item,
    .services-slider[data-services-layout="journal"] .service-item,
    .informations-list[data-informations-layout="list"] .information-item,
    .informations-list[data-informations-layout="index"] .information-item,
    .informations-list[data-informations-layout="journal"] .information-item,
    [data-timeline-layout="index"] .about-timeline-card,
    [data-timeline-layout="journal"] .about-timeline-card,
    [data-casting-layout="index"] :is(.casting-detail, .casting-block, .casting-timeline-card),
    [data-casting-layout="journal"] :is(.casting-detail, .casting-block, .casting-timeline-card)
) {
    border: 0;
    border-bottom: var(--pf-rule-width) solid var(--pf-rule-color);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Texte seul / titres au survol : ni contour ni fond. */
#portfolio_page :is(
    .blog-list[data-articles-layout="minimal"] .thumbnail-tile,
    .blog-list[data-articles-layout="reveal"] .thumbnail-tile,
    .pf-thumbs[data-works-layout="minimal"] > a,
    .pf-thumbs[data-works-layout="reveal"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="minimal"] > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout="reveal"] > a,
    .awards-list[data-awards-layout="minimal"] .award,
    .awards-list[data-awards-layout="reveal"] .award,
    #agenda-list[data-events-layout="minimal"] .agenda-item,
    #agenda-list[data-events-layout="reveal"] .agenda-item,
    .services-slider[data-services-layout="minimal"] .service-item,
    .services-slider[data-services-layout="reveal"] .service-item,
    .informations-list[data-informations-layout="minimal"] .information-item,
    .informations-list[data-informations-layout="reveal"] .information-item,
    [data-timeline-layout="minimal"] .about-timeline-card,
    [data-recommendations-layout="minimal"] .recommendation-card
) {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Profil artistique en Texte seul / Magazine : ni fond ni cadre ni ombre. Règle à part, de même poids que celles
   de casting.css (chargée après) : les filets de ces dispositions y restent possibles. */
#portfolio_page [data-casting-layout="minimal"] :is(.casting-detail, .casting-block, .casting-timeline-card),
#portfolio_page [data-casting-layout="magazine"] :is(.casting-detail, .casting-block, .casting-timeline-card) {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Un seul contour : celui de la carte. Les contours historiques posés à l'intérieur de la carte
   (.border-design sur l'image) s'effacent ; la carte elle-même garde l'habillage ci-dessus.
   Seuls les descendants sont visés : jamais la carte elle-même. */
#portfolio_page :is(
    .blog-list[data-articles-layout]:not([data-articles-layout="grid"]) .thumbnail-tile,
    .pf-thumbs[data-works-layout]:not([data-works-layout="grid"]) > a,
    :is(#gallery, #production-show-photos-grid)[data-images-layout]:not([data-images-layout="grid"]) > a,
    .awards-list[data-awards-layout]:not([data-awards-layout="grid"]) .award,
    #agenda-list[data-events-layout]:not([data-events-layout="grid"]) .agenda-item,
    .services-slider[data-services-layout]:not([data-services-layout="grid"]) .service-item,
    .informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item
) :is(.border-design, .information-item__illustration--inherit-design) {
    border: 0;
    box-shadow: none;
}

/* Couleurs du contenu : sur le fond des contenus, titre / texte lisibles (--pf-title / --pf-text,
   portfolios_design_content_ink()). Le texte posé sur une image garde les couleurs de surimpression. */

#portfolio_page .blog-list[data-articles-layout="polaroid"] .article-blog-infos__title,
#portfolio_page .blog-list[data-articles-layout="bento"] .article-blog-infos__title,
#portfolio_page .blog-list[data-articles-layout="magazine"] .article-blog-infos__title,
#portfolio_page .blog-list[data-articles-layout="carousel"] .article-blog-infos__title,
#portfolio_page .services-slider[data-services-layout="grid"] .service-title,
#portfolio_page .services-slider[data-services-layout="grid"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="polaroid"] .service-title,
#portfolio_page .services-slider[data-services-layout="bento"] .service-title,
#portfolio_page .services-slider[data-services-layout="magazine"] .service-title,
#portfolio_page .services-slider[data-services-layout="carousel"] .service-title,
#portfolio_page .services-slider[data-services-layout="polaroid"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="bento"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="magazine"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="carousel"] .price-main:not(.promo-color),
#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item h3,
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item h3,
#portfolio_page #agenda-list[data-events-layout="magazine"] .agenda-item h3,
#portfolio_page #agenda-list[data-events-layout="carousel"] .agenda-item h3,
#portfolio_page .awards-list[data-awards-layout="polaroid"] .award__name,
#portfolio_page .awards-list[data-awards-layout="bento"] .award__name,
#portfolio_page .awards-list[data-awards-layout="magazine"] .award__name,
#portfolio_page .awards-list[data-awards-layout="carousel"] .award__name,
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item__title,
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item__title,
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item__title,
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-author cite,
#portfolio_page [data-recommendations-layout="bento"] .recommendation-author cite,
#portfolio_page [data-recommendations-layout="carousel"] .recommendation-author cite,
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item__title {
    color: var(--pf-title);
}

#portfolio_page .blog-list[data-articles-layout="polaroid"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .blog-list[data-articles-layout="bento"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .blog-list[data-articles-layout="magazine"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .blog-list[data-articles-layout="carousel"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .services-slider[data-services-layout="grid"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page #agenda-list[data-events-layout="grid"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page .services-slider[data-services-layout="polaroid"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page .services-slider[data-services-layout="bento"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page .services-slider[data-services-layout="magazine"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page .services-slider[data-services-layout="carousel"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page #agenda-list[data-events-layout="magazine"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page #agenda-list[data-events-layout="carousel"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item__description,
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item__description,
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item__description,
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-quote,
#portfolio_page [data-recommendations-layout="bento"] .recommendation-quote,
#portfolio_page [data-recommendations-layout="carousel"] .recommendation-quote,
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item__description {
    color: var(--pf-text);
}

/* Styles sans fond (lignes, texte seul, mosaïque, grand format) : la couleur « titre sur fond des
   contenus » ne vaut plus, le titre reprend les couleurs de la page. Variable lue par blog.css /
   agenda.css (qui la posent en !important) ; le texte sur image garde ses couleurs de surimpression. */
#portfolio_page :is(
    .blog-list:is([data-articles-layout="mosaic"], [data-articles-layout="feature"], [data-articles-layout="list"], [data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="minimal"], [data-articles-layout="reveal"]) .thumbnail-tile,
    #agenda-list:is([data-events-layout="mosaic"], [data-events-layout="feature"], [data-events-layout="list"], [data-events-layout="index"], [data-events-layout="journal"], [data-events-layout="minimal"], [data-events-layout="reveal"]) .agenda-item
) {
    --pf-card-title: var(--portfolios-heading-secondary-color, var(--pf-ink));
}

.informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item {
    box-sizing: border-box;
}

#portfolio_page .informations-list:is([data-informations-layout="polaroid"], [data-informations-layout="bento"], [data-informations-layout="magazine"], [data-informations-layout="carousel"]) .information-item {
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1));
}

/* Galeries : l'habillage de carte (§15) pose un `background` raccourci qui remet l'image et
   background-size à zéro. La photo (variable --pf-photo posée en ligne par le template) revient ici,
   recadrée pour remplir sa tuile ; les dispositions qui la posent sur l'<img> la retirent plus bas.
   Spécificité renforcée ([data-images-layout] doublé, a[href]) : le :is() du §15 pèse (2,2,0). */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout][data-images-layout] > a[href] {
    background-image: var(--pf-photo, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cartes à marge (magazine, défilement, bento) : la photo couvrait tout le fond et masquait
   la carte. Elle est posée dans la carte, avec une marge où l'effet reste visible. */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="carousel"], [data-images-layout="bento"])[data-images-layout] > a[href] {
    padding: calc(var(--pf-gallery-frame, 8px) * var(--pf-density-pad, 1));
    background-clip: content-box;
    background-origin: content-box;
    outline: none;
}

/* Le fond rogné (content-box) perdait l'arrondi : rayon de la carte moins la marge, soit 0 en pratique.
   La photo passe sur l'<img> du balisage, posée dans la marge et arrondie (rayon intérieur). */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="carousel"], [data-images-layout="bento"])[data-images-layout] > a[href] {
    position: relative;
    background-image: none;
}

#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="carousel"], [data-images-layout="bento"])[data-images-layout] > a[href] > img {
    display: block;
    position: absolute;
    inset: var(--pf-gallery-frame, 8px);
    width: calc(100% - 2 * var(--pf-gallery-frame, 8px));
    height: calc(100% - 2 * var(--pf-gallery-frame, 8px));
    object-fit: cover;
    border-radius: var(--pf-radius-inner);
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"][data-images-layout] > a[href] {
    background-clip: padding-box;
    background-origin: padding-box;
}

/* Cartes du parcours (expériences, formations, profil, recommandations) : leur classe .bg-color
   impose le fond de page en !important (main.css), ce qui effaçait le fond du style choisi
   et le « Fond des contenus » des styles par défaut (frise, grille), alors que
   l'agenda, les services et les articles le prennent. La variable lue par .bg-color reprend le fond
   des contenus (ou celui du style) ; le texte courant suit ce fond. Sans fond des contenus réglé,
   --pf-surface vaut le fond de la page : rendu inchangé. */
#portfolio_page :is(
    [data-timeline-layout] .about-timeline-card,
    [data-casting-layout] :is(.casting-detail, .casting-block, .casting-timeline-card),
    [data-recommendations-layout] .recommendation-card
).bg-color {
    --portfolios-theme-bg-main: var(--pf-card-bg, var(--pf-surface));
    --portfolios-body-text-color: var(--pf-card-text, var(--pf-text));
}

#portfolio_page [data-recommendations-layout="bento"] .recommendation-card.bg-color {
    --pf-card-bg: var(--pf-tile);
}

/* Sans fond (lignes, texte seul, grand format) : texte aux couleurs de la page. */
#portfolio_page :is(
    [data-timeline-layout]:is([data-timeline-layout="index"], [data-timeline-layout="journal"], [data-timeline-layout="minimal"]) .about-timeline-card,
    [data-casting-layout]:is([data-casting-layout="index"], [data-casting-layout="minimal"], [data-casting-layout="magazine"], [data-casting-layout="journal"]) :is(.casting-detail, .casting-block, .casting-timeline-card),
    [data-recommendations-layout]:is([data-recommendations-layout="feature"], [data-recommendations-layout="minimal"]) .recommendation-card
).bg-color {
    --pf-card-bg: transparent;
    --pf-card-text: var(--pf-ink);
}
}