/* 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%;
    }
}