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

/* ==========================================================================
   Pastilles : « Populaire » des offres, dates de l'agenda, dates des expériences et formations,
   catégories d'article du blog, titres de section des articles
   Réglages /theme (registry.php, portfolios_design_badge_options) → --portfolios-badge-* ;
   sans réglage, les valeurs de repli redonnent le rendu du thème.
   Chaque pastille déclare dans sa feuille --pf-badge-base (sa couleur) et --pf-badge-base-on
   (le texte posé dessus) ; les couleurs finales sont calculées ici, sur l'élément lui-même.
   ========================================================================== */

#portfolio_page :is(.service-badge, .agenda-item .date, .content-article h2:not(.subtitle), .about-timeline-year:not(.about-timeline-year--nodate), .article-blog-infos__category) {
    --pf-badge-c: var(--portfolios-badge-color, var(--pf-badge-base));
    --pf-badge-on: var(--portfolios-badge-on-color, var(--pf-badge-base-on));
    --pf-badge-bg: color-mix(in srgb, var(--pf-badge-c) var(--portfolios-badge-fill, 100%), transparent);
    /* Couleur du texte choisie dans /theme : quel que soit le style ; sinon dosage du style (Plein : texte « sur fond »). */
    --pf-badge-ink: var(--portfolios-badge-text-color, color-mix(in srgb, var(--pf-badge-on) var(--portfolios-badge-ink, 100%), var(--pf-badge-c)));
    --pf-badge-line: color-mix(in srgb, var(--pf-badge-c) var(--portfolios-badge-line, 0%), transparent);
}

/* Titres de section des articles : en pastille seulement si « Titres d'article » est activé (h = 1).
   Pas le chapô (h2.subtitle de #subtitle-article, aussi .content-article) : c'est un paragraphe, pas un titre.
   Arrondi seulement en pastille, et jamais de découpe : core/elements.css pose overflow: hidden sur les titres,
   qui rognait en pilule tout titre de plusieurs lignes. */
#portfolio_page .content-article h2:not(.subtitle) {
    --pf-badge-base: var(--portfolios-heading-secondary-color, var(--portfolios-text-main-color, #222));
    --pf-badge-base-on: var(--portfolios-button-text-color, #fff);
    --pf-badge-h: var(--portfolios-badge-headings, 0);
    width: var(--portfolios-badge-heading-width, auto);
    padding: calc(0.3em * var(--pf-badge-h) * var(--portfolios-badge-pad, 1)) calc(0.8em * var(--pf-badge-h) * var(--portfolios-badge-pad, 1));
    border-radius: calc(var(--portfolios-badge-radius, 999px) * var(--pf-badge-h));
    overflow: visible;
    background-color: color-mix(in srgb, var(--pf-badge-bg) calc(var(--pf-badge-h) * 100%), transparent);
    box-shadow: inset 0 0 0 calc(var(--pf-badge-h) * 1px) var(--pf-badge-line);
    color: color-mix(in srgb, var(--pf-badge-ink) calc(var(--pf-badge-h) * 100%), var(--pf-badge-base));
}

/* main.css colore chaque span / p / svg du site : le contenu des pastilles reprend leur couleur et leur casse. */
#portfolio_page :is(.service-badge, .agenda-item .date, .content-article h2:not(.subtitle), .about-timeline-year:not(.about-timeline-year--nodate), .article-blog-infos__category) :is(span, p, svg, svg *) {
    color: inherit;
    text-transform: inherit;
}
}