/* assets/css/public/structure/layout/hero-title.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/*
 * Tous thèmes : espace entre titre, sous-titre et description des fiches
 * (#title-about). headings.css (couche « reglages ») remet à zéro les marges des h2,
 * d'où un `gap` plutôt que des marges. Le thème par défaut remplace ce gap par des
 * marges calées sur l'interligne des titres (hero-spacing.css) ; un thème ou
 * /custom/css/main.css peut le surcharger.
 */
#portfolio_page #hero #title-star #title-about {
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-y-sm, 15px);
}

#portfolio_page #hero #title-star #title-about > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Fiche avec illustration : écart entre l'illustration et le texte (auparavant l'utilitaire pf-ml-lg posé par le
   template, que les règles mobiles des modules annulaient en !important). Les feuilles des modules (couche elements)
   le remettent à zéro quand le hero s'empile. */
#portfolio_page #hero #title-star > #pochette + #title-about {
    margin-left: var(--layout-space-x-lg);
}
}

/* assets/css/public/structure/layout/hero-scrim.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 03-10-2026 */
/*
 * Tous thèmes : voile de lisibilité du hero des fiches (#title-illustration).
 * Seules les fiches portent #title-illustration : l'accueil (#title-home) et les
 * vedettes gardent leur propre gestion et ne sont pas touchés.
 *
 * L'image de couverture est fondue dans la couleur de fond de la section sous
 * le texte (fondu latéral côté texte + fondu bas vers le contenu). Le texte
 * garde les couleurs du thème (headings.css), qui contrastent déjà avec ce fond : aucune
 * détection clair/sombre, aucune ombre, quel que soit le contenu de l'image.
 * L'image reste visible du côté opposé et nette dans la pochette / cover.
 *
 * À 0.92, l'image ne pèse plus que 8 % sous le texte : même un pixel blanc pur
 * sous un thème sombre (ou noir pur sous un thème clair) ne retire qu'une petite
 * part du contraste texte / fond prévu par le thème.
 *
 * Réglages surchargeables par un thème personnalisé :
 *   --hero-scrim-color     couleur du voile (posée par includes/js.php sur
 *                          #hero = couleur de section ; repli : fond du thème)
 *   --hero-scrim-strength  opacité sous le texte (0..1)
 *   --hero-scrim-reach     limite droite de la zone pleine
 *   --hero-scrim-feather   longueur du fondu après cette limite
 */

#portfolio_page #hero:has(> #title-illustration) {
    --hero-scrim-strength: 0.92;
    /* Pochette (≤ 200px) + texte (≤ 40 % de la colonne de 1000px) ≈ bord gauche de la colonne + 660px */
    --hero-scrim-reach: max(65%, calc(50% + 160px));
    --hero-scrim-feather: 25%;
    isolation: isolate;
}

#portfolio_page #hero:has(> #title-illustration)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Couleur de section par-dessus le fond de page : couvre aussi les couleurs de section translucides */
    background:
        linear-gradient(var(--hero-scrim-color, transparent), var(--hero-scrim-color, transparent)),
        var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa));
    -webkit-mask-image:
        linear-gradient(to right,
            rgb(0 0 0 / var(--hero-scrim-strength)) 0,
            rgb(0 0 0 / var(--hero-scrim-strength)) var(--hero-scrim-reach),
            transparent calc(var(--hero-scrim-reach) + var(--hero-scrim-feather))),
        linear-gradient(to bottom, transparent 55%, #000 100%);
    mask-image:
        linear-gradient(to right,
            rgb(0 0 0 / var(--hero-scrim-strength)) 0,
            rgb(0 0 0 / var(--hero-scrim-strength)) var(--hero-scrim-reach),
            transparent calc(var(--hero-scrim-reach) + var(--hero-scrim-feather))),
        linear-gradient(to bottom, transparent 55%, #000 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

#portfolio_page #hero:has(> #title-illustration) > #title-content {
    position: relative;
    z-index: 2;
}

/* Projets : la cover 16:9 pleine largeur montre déjà l'image et le texte passe
   dessous, sur toute la largeur : voile uniforme. */
#portfolio_page #hero:has(> #title-illustration):has(.project-cover) {
    --hero-scrim-reach: 100%;
}

/* Mobile : le texte occupe toute la largeur sous la pochette. */
@media screen and (max-width: 800px) {
    #portfolio_page #hero:has(> #title-illustration) {
        --hero-scrim-reach: 100%;
    }
}
}