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

/* ==========================================================================
   0. Réglages de l'utilisateur repris par tous les thèmes
   Les gabarits sont des bases de style : ils fixent la structure (disposition, proportions,
   typographie de mise en page). Tout ce que le générateur règle passe par ces variables :
   arrondis (vignettes / liens du menu), contour (type, épaisseur, couleur), ombre, survol et
   clic, fond des contenus, filets entre sections, couleurs d'accent, police.
   Interdit dans les gabarits : couleur littérale (#hex, rgba), !important sur fond / bordure /
   ombre, transform au survol (utiliser --pf-hover / --pf-press), font-family forcée.
   Contrôle : docs/tools/matrices-banc/check.php.
   ========================================================================== */

#portfolio_page {
    --pf-radius: var(--portfolios-thumbnail-radius, 0px);
    --pf-radius-inner: max(0px, calc(var(--pf-radius) * 0.75));
    --pf-pill-radius: var(--portfolios-nav-links-radius, 999px);
    --pf-border-width: var(--portfolios-thumbnail-border-width, 0px);
    --pf-border-style-or-solid: solid;
    --pf-border-color: var(--portfolios-thumbnail-border-color, currentColor);
    /* Contour réglé par l'utilisateur (type « aucun » → pas de bordure). */
    --pf-border: var(--pf-border-width) var(--portfolios-thumbnail-border-type, none) var(--pf-border-color);
    /* Carte cadrée (1) ou libre (0) : contour ou ombre réglés par l'utilisateur, ou cadre propre au thème
       (--pf-card-framed: 1 dans themes/<slug>/tokens.css). Multiplie les marges latérales des dispositions sans
       fond (Grand format des services) : sans cadre, le texte s'aligne sur le titre de la section. */
    --pf-card-framed: var(--portfolios-thumbnail-framed, 0);
    /* Couleur du contour si l'utilisateur en a réglé un, sinon filet discret du thème. */
    --pf-contour-or-hairline: var(--portfolios-thumbnail-contour-color, color-mix(in srgb, currentColor 18%, transparent));
    /* Contour « fort » (Brutal, billets, contours) : épaisseur du thème + celle de l'utilisateur, couleur de l'utilisateur. */
    --pf-ink: var(--portfolios-text-main-color, currentColor);
    --pf-strong-border: calc(2px + var(--pf-border-width)) solid var(--portfolios-thumbnail-contour-color, var(--pf-ink));
    --pf-strong-shadow-color: var(--portfolios-thumbnail-contour-color, var(--pf-ink));
    /* Fond des cartes : « Couleur de fond des contenus », sinon fond du site. */
    --pf-surface: var(--portfolios-content-bg-color, var(--portfolios-theme-bg-main, transparent));
    --pf-surface-alt: color-mix(in srgb, var(--pf-surface) 88%, var(--pf-ink) 12%);
    /* Teintes de compartiments (cartes « bento », tuiles du thème Bento) : accents sur le fond des contenus. */
    --pf-tint-1: color-mix(in srgb, var(--pf-accent) 14%, var(--pf-surface));
    --pf-tint-2: color-mix(in srgb, var(--portfolios-color-two, var(--pf-accent)) 16%, var(--pf-surface));
    --pf-tint-3: var(--pf-surface-alt);
    --pf-tint-4: color-mix(in srgb, var(--pf-accent) 26%, var(--pf-surface));
    /* Titre / texte lisibles sur le fond des contenus (calculés en PHP, miroir JS dans l'éditeur). */
    --pf-title: var(--portfolios-content-title-color, var(--portfolios-heading-secondary-color, var(--pf-ink)));
    --pf-text: var(--portfolios-content-text-color, var(--pf-ink));
    --pf-on-accent: var(--portfolios-button-text-color, var(--portfolios-theme-bg-main, Canvas));
    --pf-accent: var(--portfolios-color-one, var(--pf-ink));
    /* Ombre de l'utilisateur ; un thème peut proposer la sienne (--pf-theme-shadow), l'utilisateur garde la main. */
    --pf-shadow: var(--portfolios-thumbnail-box-shadow, 0 0 0 0 transparent);
    --pf-theme-shadow: 0 0 0 0 transparent;
    /* Usage : box-shadow: var(--pf-shadow), var(--pf-theme-shadow) — écrit sur l'élément, pour que
       --pf-theme-shadow posé localement soit pris en compte. */
    /* Texte et voile posés sur une image (réglages « Textes des vignettes »). */
    --pf-on-media: var(--portfolios-thumbnail-overlay-title-color, #fff);
    --pf-scrim: color-mix(in srgb, #000 65%, transparent);
    --pf-scrim-strong: color-mix(in srgb, #000 85%, transparent);
    /* Verre dépoli : dérivé du fond des contenus et du contour de l'utilisateur. */
    --pf-glass-bg: color-mix(in srgb, var(--pf-surface) 55%, transparent);
    --pf-glass-edge: var(--portfolios-thumbnail-contour-color, color-mix(in srgb, #fff 40%, transparent));
    --pf-glass-shadow: 0 16px 40px color-mix(in srgb, #000 12%, transparent);
    --pf-drop-shadow: 0 10px 25px color-mix(in srgb, #000 18%, transparent);
    --pf-panel-shadow: 0 10px 30px color-mix(in srgb, #000 14%, transparent);
    --pf-panel-shadow-up: 0 -8px 24px color-mix(in srgb, #000 8%, transparent);
    /* Panneaux de menu (feuille, tiroir, palette, bulles) et voile derrière eux. */
    --pf-backdrop: color-mix(in srgb, #000 35%, transparent);
    --pf-sheet-shadow: 0 12px 40px color-mix(in srgb, #000 18%, transparent);
    --pf-sheet-shadow-strong: 0 30px 80px color-mix(in srgb, #000 35%, transparent);
    --pf-sheet-shadow-side: -24px 0 60px color-mix(in srgb, #000 18%, transparent);
    --pf-sheet-shadow-up: 0 -18px 50px color-mix(in srgb, #000 20%, transparent);
    --pf-drawer-shadow: -18px 0 50px color-mix(in srgb, #000 20%, transparent);
    --pf-bubble-shadow: 0 10px 30px color-mix(in srgb, #000 30%, transparent);
    --pf-chip-shadow: 0 6px 20px color-mix(in srgb, #000 18%, transparent);
    /* Survol / clic de l'utilisateur, à composer avec les transformations décoratives (rotate: …). */
    --pf-hover: var(--portfolios-thumbnail-hover-transform, none);
    --pf-hover-filter: var(--portfolios-thumbnail-hover-filter, none);
    --pf-press: var(--portfolios-thumbnail-click-transform, none);
    /* Police d'accent des thèmes « console » : celle de l'utilisateur, sauf choix contraire. */
    --pf-mono: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
    /* En-têtes en îlot (Bento, Verre, forme « Flottante ») : « Espacement vertical de l'en-tête »
       règle la hauteur de l'îlot (padding intérieur), l'écart autour de l'îlot reste fixe. */
    --pf-island-pad-y: calc(var(--portfolios-header-padding-y, 15px) * 0.5);
    --pf-island-gap: 0.75rem;
    --pf-rule-width: var(--portfolios-section-divider-width, 1px);
    --pf-rule-color: var(--portfolios-section-divider-color, color-mix(in srgb, currentColor 20%, transparent));
}
}