/*
 * Titres de gabarit : couleurs / tailles du setup (variables primary / secondary).
 * Exception : titres dans .content-article (TinyMCE) — règles dédiées en bas pour gagner sur les styles inline.
 * Le corps de texte (p, listes, etc.) dans .content-article reste géré par l’éditeur.
 */

/* Logo : typographie (couleur gérée par design/header/main.css — nav) */
#portfolio_page #hub-logo .hub-logo__mark--image {
    display: flex;
    font-size: var(--portfolios-heading-primary-size) !important;
    line-height: calc(var(--portfolios-heading-primary-size) + 10px) !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
}

#portfolio_page #hub-logo .hub-logo__mark--text {
    font-size: var(--portfolios-heading-primary-size) !important;
    line-height: calc(var(--portfolios-heading-primary-size) + 10px) !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Titres principaux de contenu (h1) — sélecteurs hors blocs TinyMCE */
#portfolio_page #title-article h1,
#portfolio_page #about-content h1,
#portfolio_page #hero #title-star #title-about h1,
#portfolio_page #title-star #title-about h1,
#portfolio_page main h1.limited-width,
#portfolio_page main#about section article h1,
#portfolio_page #quatrecentquatre-elements h1,
#portfolio_page main section#hero > div > h1,
#portfolio_page main section#hero > div.full-width > h1 {
    font-size: var(--portfolios-heading-primary-size) !important;
    line-height: calc(var(--portfolios-heading-primary-size) + 2px) !important;
    font-weight: bold !important;
    color: var(--portfolios-heading-primary-color) !important;
    display: block !important;
    padding: 0 !important;
}

#portfolio_page #title-article h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #about-content h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-star #title-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #title-star #title-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h1.limited-width :is(a, span, p, strong, em, b, i, small),
#portfolio_page main#about section article h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #quatrecentquatre-elements h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section#hero > div > h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section#hero > div.full-width > h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-primary-color) !important;
}

/* Bloc « A propos » sur les fiches : nom du portfolio (title_about) — échelle h2 du thème, couleur du texte courant */
#portfolio_page #about-content h2.about-card-title,
#portfolio_page #blog-about h2.about-card-title {
    font-size: var(--portfolios-heading-secondary-size) !important;
    line-height: calc(var(--portfolios-heading-secondary-size) + 10px) !important;
    font-weight: bold !important;
    color: inherit !important;
    margin-top: 0 !important;
}

#portfolio_page #about-content h2.about-card-title :is(a, span, p, strong, em, b, i, small),
#portfolio_page #blog-about h2.about-card-title :is(a, span, p, strong, em, b, i, small) {
    color: inherit !important;
}

/*
 * Accueil — hero (#title-home) et vedettes (.home-feature-vedette) :
 * couleurs définies dans manage (home_custom.color_home_custom, color_feature_element).
 * Variables optionnelles posées dans public/pages/home.php ; sinon repli sur le thème.
 */
#portfolio_page #hero #title-home {
    --home-hero-title-color: var(--portfolios-heading-primary-color);
    --home-hero-subtitle-color: var(--portfolios-heading-secondary-color);
}

#portfolio_page #hero #title-home #home-about h1,
#portfolio_page #hero #title-home #home-present h1 {
    font-size: var(--portfolios-heading-primary-size) !important;
    line-height: calc(var(--portfolios-heading-primary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--home-hero-title-color) !important;
    display: block !important;
    padding: 0 !important;
}

#portfolio_page #hero #title-home #home-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-home #home-present h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--home-hero-title-color) !important;
}

#portfolio_page #hero #title-home #home-about h2,
#portfolio_page #hero #title-home #home-present h2 {
    font-size: var(--portfolios-heading-secondary-size) !important;
    line-height: calc(var(--portfolios-heading-secondary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--home-hero-subtitle-color) !important;
}

#portfolio_page #hero #title-home #home-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-home #home-present h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--home-hero-subtitle-color) !important;
}

#portfolio_page section.home-feature-vedette {
    --home-feature-title-color: var(--portfolios-heading-primary-color);
    --home-feature-subtitle-color: var(--portfolios-heading-secondary-color);
}

#portfolio_page section.home-feature-vedette #feature-about h1,
#portfolio_page section.home-feature-vedette #feature-present h1 {
    font-size: var(--portfolios-heading-primary-size) !important;
    line-height: calc(var(--portfolios-heading-primary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--home-feature-title-color) !important;
    display: block !important;
    padding: 0 !important;
}

#portfolio_page section.home-feature-vedette #feature-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page section.home-feature-vedette #feature-present h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--home-feature-title-color) !important;
}

#portfolio_page section.home-feature-vedette #feature-about h2,
#portfolio_page section.home-feature-vedette #feature-present h2 {
    font-size: var(--portfolios-heading-secondary-size) !important;
    line-height: calc(var(--portfolios-heading-secondary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--home-feature-subtitle-color) !important;
    margin: 0 !important;
}

#portfolio_page section.home-feature-vedette #feature-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page section.home-feature-vedette #feature-present h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--home-feature-subtitle-color) !important;
}

/* Sous-titres de hero (ex. « De … », sous-titre album) */
#portfolio_page #hero #title-star #title-about h2,
#portfolio_page #title-star #title-about h2 {
    font-size: var(--portfolios-heading-secondary-size) !important;
    line-height: calc(var(--portfolios-heading-secondary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--portfolios-heading-secondary-color) !important;
    margin: 0 !important;
}

#portfolio_page #hero #title-star #title-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #title-star #title-about h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-secondary-color) !important;
}

/* Hero contenus (#title-content) : ne pas imposer la couleur thème sur h1/h2 (lisibilité sur image / héritage) */
#portfolio_page #hero #title-content #title-about h1,
#portfolio_page #hero #title-content #title-about h2 {
    color: inherit !important;
}

#portfolio_page #hero #title-content #title-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-content #title-about h2 :is(a, span, p, strong, em, b, i, small) {
    color: inherit !important;
}

/* Intertitres de mise en page : classes title-align / padding-bottom (accueil, modules, etc.) */
/* :not(#h2_demo) : la démo setup thème (#theme-visualiser) garde ses styles inline sur le sous-titre */
#portfolio_page main h2[class*="title-align"]:not(#h2_demo),
#portfolio_page main h2[class*="padding-bottom"][class*="title-align"]:not(#h2_demo),
#portfolio_page main h2.big-margin-top,
#portfolio_page main h3[class*="title-align"],
#portfolio_page main h3[class*="padding-bottom"][class*="title-align"],
#portfolio_page main section:not(.demo-pair-section) > article > h2,
#portfolio_page main h2.subtitle {
    font-size: var(--portfolios-heading-secondary-size) !important;
    line-height: calc(var(--portfolios-heading-secondary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--portfolios-heading-secondary-color) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: inherit !important;
}

#portfolio_page main h2[class*="title-align"]:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h2[class*="padding-bottom"][class*="title-align"]:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h2.big-margin-top :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h3[class*="padding-bottom"][class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section:not(.demo-pair-section) > article > h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h2.subtitle :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-secondary-color) !important;
}

/* Titres de cartes / listes : ne pas appliquer la typo « intertitre » du thème */
#portfolio_page main .vertical-infos h4,
#portfolio_page main .vertical-infos h5,
#portfolio_page main .horizontal-elements h4,
#portfolio_page main .square-elements h4,
#portfolio_page main .square-grid-item h4,
#portfolio_page main .thumbnail h4,
#portfolio_page main .thumbnail h5,
#portfolio_page main .thumbnail-tile h4,
#portfolio_page main .thumbnail-tile h5 {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: inherit !important;
}

/* TinyMCE : titres dans le contenu riche — !important pour passer au-dessus des styles inline éditeur */
#portfolio_page .content-article h1 {
    font-size: var(--portfolios-heading-primary-size) !important;
    line-height: calc(var(--portfolios-heading-primary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--portfolios-heading-primary-color) !important;
    display: block !important;
    padding: 0 !important;
}

#portfolio_page .content-article h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-primary-color) !important;
}

#portfolio_page .content-article :is(h2, h3, h4, h5, h6) {
    font-size: var(--portfolios-heading-secondary-size) !important;
    line-height: calc(var(--portfolios-heading-secondary-size) + 10px) !important;
    font-weight: bold !important;
    color: var(--portfolios-heading-secondary-color) !important;
}

#portfolio_page .content-article :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-secondary-color) !important;
}